@questpie/admin 1.1.0 → 2.0.0

package/dist/client/components/fields/relation/displays/cards-display.mjs

@@ -0,0 +1,140 @@
+import { useResolveText } from "../../../../i18n/hooks.mjs";
+import { Button } from "../../../ui/button.mjs";
+import { Skeleton } from "../../../ui/skeleton.mjs";
+import { formatCellValue, formatColumnHeader, getImageUrl, getItemDisplayValue } from "./types.mjs";
+import { CollectionEditLink } from "../../../admin-link.mjs";
+import { Icon } from "@iconify/react";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/fields/relation/displays/cards-display.tsx
+/**
+* Cards Display - card grid with image, title, subtitle, meta
+*/
+const gridCols = {
+	1: "grid-cols-1",
+	2: "grid-cols-1 sm:grid-cols-2",
+	3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+	4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
+};
+function CardsSkeleton({ count = 3, gridColumns = 2, hasImage = false }) {
+	const skeletonKeys = React$1.useMemo(() => Array.from({ length: count }, () => crypto.randomUUID()), [count]);
+	return /* @__PURE__ */ jsx("div", {
+		className: `grid gap-4 ${gridCols[gridColumns]}`,
+		children: skeletonKeys.map((key) => /* @__PURE__ */ jsxs("div", {
+			className: "rounded-lg border border-border/60 bg-card/30 backdrop-blur-sm overflow-hidden",
+			children: [hasImage && /* @__PURE__ */ jsx(Skeleton, { className: "aspect-video w-full" }), /* @__PURE__ */ jsxs("div", {
+				className: "p-3 space-y-2",
+				children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-3/4 rounded" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2 rounded" })]
+			})]
+		}, key))
+	});
+}
+function CardsDisplay({ items, collection, actions, editable = false, fields, gridColumns = 2, linkToDetail = false, isLoading = false, loadingCount = 3 }) {
+	const resolveText = useResolveText();
+	const getTitle = (item) => item[fields?.title || "_title"] || getItemDisplayValue(item);
+	const getSubtitle = (item) => fields?.subtitle ? item[fields.subtitle] : null;
+	const getImage = (item) => getImageUrl(item, fields?.image);
+	const getMeta = (item) => {
+		if (!fields?.meta?.length) return [];
+		return fields.meta.map((field) => ({
+			label: formatColumnHeader(field),
+			value: formatCellValue(item[field])
+		})).filter((m) => m.value !== "-");
+	};
+	if (isLoading && items.length === 0) return /* @__PURE__ */ jsx(CardsSkeleton, {
+		count: loadingCount,
+		gridColumns,
+		hasImage: !!fields?.image
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: `grid gap-4 ${gridCols[gridColumns]}`,
+		children: items.map((item) => {
+			const image = getImage(item);
+			const subtitle = getSubtitle(item);
+			const meta = getMeta(item);
+			const cardContent = /* @__PURE__ */ jsxs("div", {
+				className: "rounded-lg border border-border/60 bg-card/30 backdrop-blur-sm hover:bg-card/50 transition-colors overflow-hidden h-full",
+				children: [image && /* @__PURE__ */ jsx("div", {
+					className: "aspect-video bg-muted",
+					children: /* @__PURE__ */ jsx("img", {
+						src: image,
+						alt: getTitle(item),
+						className: "w-full h-full object-cover"
+					})
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "p-3",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-start justify-between gap-2",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "min-w-0 flex-1",
+							children: [/* @__PURE__ */ jsx("div", {
+								className: "font-medium truncate",
+								children: getTitle(item)
+							}), subtitle && /* @__PURE__ */ jsx("div", {
+								className: "text-sm text-muted-foreground truncate mt-0.5",
+								children: subtitle
+							})]
+						}), editable && (actions?.onEdit || actions?.onRemove) && /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-1 shrink-0",
+							children: [actions?.onEdit && /* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "ghost",
+								size: "icon",
+								className: "h-7 w-7",
+								onClick: (e) => {
+									e.preventDefault();
+									e.stopPropagation();
+									actions.onEdit?.(item);
+								},
+								"aria-label": "Edit item",
+								children: /* @__PURE__ */ jsx(Icon, {
+									icon: "ph:pencil",
+									className: "size-3"
+								})
+							}), actions?.onRemove && /* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "ghost",
+								size: "icon",
+								className: "h-7 w-7",
+								onClick: (e) => {
+									e.preventDefault();
+									e.stopPropagation();
+									actions.onRemove?.(item);
+								},
+								"aria-label": "Remove item",
+								children: /* @__PURE__ */ jsx(Icon, {
+									icon: "ph:x",
+									className: "size-3"
+								})
+							})]
+						})]
+					}), meta.length > 0 && /* @__PURE__ */ jsx("div", {
+						className: "flex flex-wrap gap-x-3 gap-y-1 mt-2 text-xs text-muted-foreground",
+						children: meta.map((m) => /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsxs("span", {
+							className: "font-medium",
+							children: [resolveText(m.label), ":"]
+						}), m.value] }, String(m.label)))
+					})]
+				})]
+			});
+			if (!editable && actions?.onEdit) return /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => actions.onEdit?.(item),
+				className: "text-left w-full",
+				children: cardContent
+			}, item.id);
+			if (!editable && linkToDetail) return /* @__PURE__ */ jsx(CollectionEditLink, {
+				collection,
+				id: item.id,
+				className: "block",
+				children: cardContent
+			}, item.id);
+			return /* @__PURE__ */ jsx("div", { children: cardContent }, item.id);
+		})
+	});
+}
+
+//#endregion
+export { CardsDisplay };
+//# sourceMappingURL=cards-display.mjs.map

package/dist/client/components/fields/relation/displays/cards-display.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cards-display.mjs","names":["React"],"sources":["../../../../../../src/client/components/fields/relation/displays/cards-display.tsx"],"sourcesContent":["/**\n * Cards Display - card grid with image, title, subtitle, meta\n */\n\nimport { Icon } from \"@iconify/react\";\nimport * as React from \"react\";\nimport { useResolveText } from \"../../../../i18n/hooks\";\nimport { CollectionEditLink } from \"../../../admin-link\";\nimport { Button } from \"../../../ui/button\";\nimport { Skeleton } from \"../../../ui/skeleton\";\nimport {\n\tformatCellValue,\n\tformatColumnHeader,\n\tgetImageUrl,\n\tgetItemDisplayValue,\n\ttype RelationDisplayProps,\n} from \"./types\";\n\nconst gridCols = {\n\t1: \"grid-cols-1\",\n\t2: \"grid-cols-1 sm:grid-cols-2\",\n\t3: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-3\",\n\t4: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-4\",\n};\n\nfunction CardsSkeleton({\n\tcount = 3,\n\tgridColumns = 2,\n\thasImage = false,\n}: {\n\tcount?: number;\n\tgridColumns?: 1 | 2 | 3 | 4;\n\thasImage?: boolean;\n}) {\n\tconst skeletonKeys = React.useMemo(\n\t\t() => Array.from({ length: count }, () => crypto.randomUUID()),\n\t\t[count],\n\t);\n\n\treturn (\n\t\t<div className={`grid gap-4 ${gridCols[gridColumns]}`}>\n\t\t\t{skeletonKeys.map((key) => (\n\t\t\t\t<div\n\t\t\t\t\tkey={key}\n\t\t\t\t\tclassName=\"rounded-lg border border-border/60 bg-card/30 backdrop-blur-sm overflow-hidden\"\n\t\t\t\t>\n\t\t\t\t\t{hasImage && <Skeleton className=\"aspect-video w-full\" />}\n\t\t\t\t\t<div className=\"p-3 space-y-2\">\n\t\t\t\t\t\t<Skeleton className=\"h-5 w-3/4 rounded\" />\n\t\t\t\t\t\t<Skeleton className=\"h-4 w-1/2 rounded\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</div>\n\t);\n}\n\nexport function CardsDisplay({\n\titems,\n\tcollection,\n\tactions,\n\teditable = false,\n\tfields,\n\tgridColumns = 2,\n\tlinkToDetail = false,\n\tisLoading = false,\n\tloadingCount = 3,\n}: RelationDisplayProps) {\n\tconst resolveText = useResolveText();\n\tconst getTitle = (item: any) =>\n\t\titem[fields?.title || \"_title\"] || getItemDisplayValue(item);\n\tconst getSubtitle = (item: any) =>\n\t\tfields?.subtitle ? item[fields.subtitle] : null;\n\tconst getImage = (item: any) => getImageUrl(item, fields?.image);\n\tconst getMeta = (item: any) => {\n\t\tif (!fields?.meta?.length) return [];\n\t\treturn fields.meta\n\t\t\t.map((field) => ({\n\t\t\t\tlabel: formatColumnHeader(field),\n\t\t\t\tvalue: formatCellValue(item[field]),\n\t\t\t}))\n\t\t\t.filter((m) => m.value !== \"-\");\n\t};\n\n\t// Show skeleton when loading and no items\n\tif (isLoading && items.length === 0) {\n\t\treturn (\n\t\t\t<CardsSkeleton\n\t\t\t\tcount={loadingCount}\n\t\t\t\tgridColumns={gridColumns}\n\t\t\t\thasImage={!!fields?.image}\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div className={`grid gap-4 ${gridCols[gridColumns]}`}>\n\t\t\t{items.map((item) => {\n\t\t\t\tconst image = getImage(item);\n\t\t\t\tconst subtitle = getSubtitle(item);\n\t\t\t\tconst meta = getMeta(item);\n\n\t\t\t\tconst cardContent = (\n\t\t\t\t\t<div className=\"rounded-lg border border-border/60 bg-card/30 backdrop-blur-sm hover:bg-card/50 transition-colors overflow-hidden h-full\">\n\t\t\t\t\t\t{image && (\n\t\t\t\t\t\t\t<div className=\"aspect-video bg-muted\">\n\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\tsrc={image}\n\t\t\t\t\t\t\t\t\talt={getTitle(item)}\n\t\t\t\t\t\t\t\t\tclassName=\"w-full h-full object-cover\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div className=\"p-3\">\n\t\t\t\t\t\t\t<div className=\"flex items-start justify-between gap-2\">\n\t\t\t\t\t\t\t\t<div className=\"min-w-0 flex-1\">\n\t\t\t\t\t\t\t\t\t<div className=\"font-medium truncate\">{getTitle(item)}</div>\n\t\t\t\t\t\t\t\t\t{subtitle && (\n\t\t\t\t\t\t\t\t\t\t<div className=\"text-sm text-muted-foreground truncate mt-0.5\">\n\t\t\t\t\t\t\t\t\t\t\t{subtitle}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t{/* Action buttons for editable mode */}\n\t\t\t\t\t\t\t\t{editable && (actions?.onEdit || actions?.onRemove) && (\n\t\t\t\t\t\t\t\t\t<div className=\"flex items-center gap-1 shrink-0\">\n\t\t\t\t\t\t\t\t\t\t{actions?.onEdit && (\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"h-7 w-7\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\t\t\tactions.onEdit?.(item);\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\taria-label=\"Edit item\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Icon icon=\"ph:pencil\" className=\"size-3\" />\n\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t{actions?.onRemove && (\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"h-7 w-7\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\t\t\tactions.onRemove?.(item);\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\taria-label=\"Remove item\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Icon icon=\"ph:x\" className=\"size-3\" />\n\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{meta.length > 0 && (\n\t\t\t\t\t\t\t\t<div className=\"flex flex-wrap gap-x-3 gap-y-1 mt-2 text-xs text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t{meta.map((m) => (\n\t\t\t\t\t\t\t\t\t\t<span key={String(m.label)}>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"font-medium\">\n\t\t\t\t\t\t\t\t\t\t\t\t{resolveText(m.label)}:\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t{m.value}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\n\t\t\t\t// Non-editable with sheet edit\n\t\t\t\tif (!editable && actions?.onEdit) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tonClick={() => actions.onEdit?.(item)}\n\t\t\t\t\t\t\tclassName=\"text-left w-full\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{cardContent}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\t// Non-editable with link to detail\n\t\t\t\tif (!editable && linkToDetail) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<CollectionEditLink\n\t\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t\tcollection={collection as any}\n\t\t\t\t\t\t\tid={item.id}\n\t\t\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{cardContent}\n\t\t\t\t\t\t</CollectionEditLink>\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\t// Editable or read-only\n\t\t\t\treturn <div key={item.id}>{cardContent}</div>;\n\t\t\t})}\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}

package/dist/client/components/fields/relation/displays/chips-display.d.mts

@@ -0,0 +1,2 @@
+import "./types.mjs";
+import "react/jsx-runtime";

package/dist/client/components/fields/relation/displays/chips-display.mjs

@@ -0,0 +1,100 @@
+import { resolveIconElement } from "../../../component-renderer.mjs";
+import { Button } from "../../../ui/button.mjs";
+import { Badge } from "../../../ui/badge.mjs";
+import { Skeleton } from "../../../ui/skeleton.mjs";
+import { getItemDisplayValue } from "./types.mjs";
+import { CollectionEditLink } from "../../../admin-link.mjs";
+import { Icon } from "@iconify/react";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/fields/relation/displays/chips-display.tsx
+/**
+* Chips Display - compact badge/tag style
+*/
+function ChipsSkeleton({ count = 3 }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-wrap gap-2",
+		children: React$1.useMemo(() => Array.from({ length: count }, () => crypto.randomUUID()), [count]).map((key) => /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-20 rounded-full" }, key))
+	});
+}
+function ChipsDisplay({ items, collection, collectionIcon, actions, editable = false, linkToDetail = false, isLoading = false, loadingCount = 3 }) {
+	const iconElement = resolveIconElement(collectionIcon, { className: "size-3 text-muted-foreground" });
+	if (isLoading && items.length === 0) return /* @__PURE__ */ jsx(ChipsSkeleton, { count: loadingCount });
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-wrap gap-2",
+		children: items.map((item) => {
+			const displayText = getItemDisplayValue(item);
+			if (editable && (actions?.onEdit || actions?.onRemove)) return /* @__PURE__ */ jsxs("div", {
+				className: "inline-flex items-center gap-1 rounded-md border bg-secondary/50 pl-2 pr-1 py-1",
+				children: [
+					iconElement,
+					/* @__PURE__ */ jsx("span", {
+						className: "text-sm",
+						children: displayText
+					}),
+					actions?.onEdit && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon",
+						className: "h-5 w-5",
+						onClick: () => actions.onEdit?.(item),
+						"aria-label": "Edit item",
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: "ph:pencil",
+							className: "size-3"
+						})
+					}),
+					actions?.onRemove && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon",
+						className: "h-5 w-5",
+						onClick: () => actions.onRemove?.(item),
+						"aria-label": "Remove item",
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: "ph:x",
+							className: "size-3"
+						})
+					})
+				]
+			}, item.id);
+			if (actions?.onEdit) return /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => actions.onEdit?.(item),
+				className: "inline-flex",
+				children: /* @__PURE__ */ jsxs(Badge, {
+					variant: "secondary",
+					className: "hover:bg-secondary/80 cursor-pointer gap-1",
+					children: [
+						iconElement,
+						displayText,
+						/* @__PURE__ */ jsx(Icon, {
+							icon: "ph:pencil",
+							className: "size-3"
+						})
+					]
+				})
+			}, item.id);
+			if (linkToDetail && actions?.onNavigate) return /* @__PURE__ */ jsx(CollectionEditLink, {
+				collection,
+				id: item.id,
+				className: "inline-flex",
+				children: /* @__PURE__ */ jsxs(Badge, {
+					variant: "secondary",
+					className: "hover:bg-secondary/80 cursor-pointer gap-1",
+					children: [iconElement, displayText]
+				})
+			}, item.id);
+			return /* @__PURE__ */ jsxs(Badge, {
+				variant: "secondary",
+				className: "gap-1",
+				children: [iconElement, displayText]
+			}, item.id);
+		})
+	});
+}
+
+//#endregion
+export { ChipsDisplay };
+//# sourceMappingURL=chips-display.mjs.map

package/dist/client/components/fields/relation/displays/chips-display.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chips-display.mjs","names":["React"],"sources":["../../../../../../src/client/components/fields/relation/displays/chips-display.tsx"],"sourcesContent":["/**\n * Chips Display - compact badge/tag style\n */\n\nimport { Icon } from \"@iconify/react\";\nimport * as React from \"react\";\nimport { CollectionEditLink } from \"../../../admin-link\";\nimport { resolveIconElement } from \"../../../component-renderer\";\nimport { Badge } from \"../../../ui/badge\";\nimport { Button } from \"../../../ui/button\";\nimport { Skeleton } from \"../../../ui/skeleton\";\nimport { getItemDisplayValue, type RelationDisplayProps } from \"./types\";\n\nfunction ChipsSkeleton({ count = 3 }: { count?: number }) {\n\tconst skeletonKeys = React.useMemo(\n\t\t() => Array.from({ length: count }, () => crypto.randomUUID()),\n\t\t[count],\n\t);\n\n\treturn (\n\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t{skeletonKeys.map((key) => (\n\t\t\t\t<Skeleton key={key} className=\"h-6 w-20 rounded-full\" />\n\t\t\t))}\n\t\t</div>\n\t);\n}\n\nexport function ChipsDisplay({\n\titems,\n\tcollection,\n\tcollectionIcon,\n\tactions,\n\teditable = false,\n\tlinkToDetail = false,\n\tisLoading = false,\n\tloadingCount = 3,\n}: RelationDisplayProps) {\n\tconst iconElement = resolveIconElement(collectionIcon, {\n\t\tclassName: \"size-3 text-muted-foreground\",\n\t});\n\n\t// Show skeleton when loading and no items\n\tif (isLoading && items.length === 0) {\n\t\treturn <ChipsSkeleton count={loadingCount} />;\n\t}\n\n\treturn (\n\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t{items.map((item) => {\n\t\t\t\tconst displayText = getItemDisplayValue(item);\n\n\t\t\t\t// Editable mode - show edit/remove buttons\n\t\t\t\tif (editable && (actions?.onEdit || actions?.onRemove)) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t\tclassName=\"inline-flex items-center gap-1 rounded-md border bg-secondary/50 pl-2 pr-1 py-1\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{iconElement}\n\t\t\t\t\t\t\t<span className=\"text-sm\">{displayText}</span>\n\t\t\t\t\t\t\t{actions?.onEdit && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\t\tclassName=\"h-5 w-5\"\n\t\t\t\t\t\t\t\t\tonClick={() => actions.onEdit?.(item)}\n\t\t\t\t\t\t\t\t\taria-label=\"Edit item\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Icon icon=\"ph:pencil\" className=\"size-3\" />\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{actions?.onRemove && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\t\tclassName=\"h-5 w-5\"\n\t\t\t\t\t\t\t\t\tonClick={() => actions.onRemove?.(item)}\n\t\t\t\t\t\t\t\t\taria-label=\"Remove item\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Icon icon=\"ph:x\" className=\"size-3\" />\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\t// Clickable for edit in sheet\n\t\t\t\tif (actions?.onEdit) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tonClick={() => actions.onEdit?.(item)}\n\t\t\t\t\t\t\tclassName=\"inline-flex\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Badge\n\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\tclassName=\"hover:bg-secondary/80 cursor-pointer gap-1\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{iconElement}\n\t\t\t\t\t\t\t\t{displayText}\n\t\t\t\t\t\t\t\t<Icon icon=\"ph:pencil\" className=\"size-3\" />\n\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\t// Link to detail page\n\t\t\t\tif (linkToDetail && actions?.onNavigate) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<CollectionEditLink\n\t\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t\tcollection={collection as any}\n\t\t\t\t\t\t\tid={item.id}\n\t\t\t\t\t\t\tclassName=\"inline-flex\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Badge\n\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\tclassName=\"hover:bg-secondary/80 cursor-pointer gap-1\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{iconElement}\n\t\t\t\t\t\t\t\t{displayText}\n\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t</CollectionEditLink>\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\t// Read-only badge\n\t\t\t\treturn (\n\t\t\t\t\t<Badge key={item.id} variant=\"secondary\" className=\"gap-1\">\n\t\t\t\t\t\t{iconElement}\n\t\t\t\t\t\t{displayText}\n\t\t\t\t\t</Badge>\n\t\t\t\t);\n\t\t\t})}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;;;;;;;AAaA,SAAS,cAAc,EAAE,QAAQ,KAAyB;AAMzD,QACC,oBAAC;EAAI,WAAU;YANKA,QAAM,cACpB,MAAM,KAAK,EAAE,QAAQ,OAAO,QAAQ,OAAO,YAAY,CAAC,EAC9D,CAAC,MAAM,CACP,CAIe,KAAK,QAClB,oBAAC,YAAmB,WAAU,2BAAf,IAAyC,CACvD;GACG;;AAIR,SAAgB,aAAa,EAC5B,OACA,YACA,gBACA,SACA,WAAW,OACX,eAAe,OACf,YAAY,OACZ,eAAe,KACS;CACxB,MAAM,cAAc,mBAAmB,gBAAgB,EACtD,WAAW,gCACX,CAAC;AAGF,KAAI,aAAa,MAAM,WAAW,EACjC,QAAO,oBAAC,iBAAc,OAAO,eAAgB;AAG9C,QACC,oBAAC;EAAI,WAAU;YACb,MAAM,KAAK,SAAS;GACpB,MAAM,cAAc,oBAAoB,KAAK;AAG7C,OAAI,aAAa,SAAS,UAAU,SAAS,UAC5C,QACC,qBAAC;IAEA,WAAU;;KAET;KACD,oBAAC;MAAK,WAAU;gBAAW;OAAmB;KAC7C,SAAS,UACT,oBAAC;MACA,MAAK;MACL,SAAQ;MACR,MAAK;MACL,WAAU;MACV,eAAe,QAAQ,SAAS,KAAK;MACrC,cAAW;gBAEX,oBAAC;OAAK,MAAK;OAAY,WAAU;QAAW;OACpC;KAET,SAAS,YACT,oBAAC;MACA,MAAK;MACL,SAAQ;MACR,MAAK;MACL,WAAU;MACV,eAAe,QAAQ,WAAW,KAAK;MACvC,cAAW;gBAEX,oBAAC;OAAK,MAAK;OAAO,WAAU;QAAW;OAC/B;;MA3BL,KAAK,GA6BL;AAKR,OAAI,SAAS,OACZ,QACC,oBAAC;IAEA,MAAK;IACL,eAAe,QAAQ,SAAS,KAAK;IACrC,WAAU;cAEV,qBAAC;KACA,SAAQ;KACR,WAAU;;MAET;MACA;MACD,oBAAC;OAAK,MAAK;OAAY,WAAU;QAAW;;MACrC;MAZH,KAAK,GAaF;AAKX,OAAI,gBAAgB,SAAS,WAC5B,QACC,oBAAC;IAEY;IACZ,IAAI,KAAK;IACT,WAAU;cAEV,qBAAC;KACA,SAAQ;KACR,WAAU;gBAET,aACA;MACM;MAXH,KAAK,GAYU;AAKvB,UACC,qBAAC;IAAoB,SAAQ;IAAY,WAAU;eACjD,aACA;MAFU,KAAK,GAGT;IAER;GACG"}

package/dist/client/components/fields/relation/displays/grid-display.d.mts

@@ -0,0 +1,2 @@
+import "./types.mjs";
+import "react/jsx-runtime";

package/dist/client/components/fields/relation/displays/grid-display.mjs

@@ -0,0 +1,114 @@
+import { resolveIconElement } from "../../../component-renderer.mjs";
+import { Button } from "../../../ui/button.mjs";
+import { Skeleton } from "../../../ui/skeleton.mjs";
+import { getImageUrl, getItemDisplayValue } from "./types.mjs";
+import { CollectionEditLink } from "../../../admin-link.mjs";
+import { Icon } from "@iconify/react";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/fields/relation/displays/grid-display.tsx
+/**
+* Grid Display - compact grid with thumbnails
+*/
+const gridCols = {
+	1: "grid-cols-1",
+	2: "grid-cols-2",
+	3: "grid-cols-2 sm:grid-cols-3",
+	4: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4"
+};
+function GridSkeleton({ count = 6, gridColumns = 3 }) {
+	const skeletonKeys = React$1.useMemo(() => Array.from({ length: count }, () => crypto.randomUUID()), [count]);
+	return /* @__PURE__ */ jsx("div", {
+		className: `grid gap-2 ${gridCols[gridColumns]}`,
+		children: skeletonKeys.map((key) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 rounded-md border border-border/60 bg-card/30 backdrop-blur-sm p-2",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "size-8 shrink-0 rounded" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 flex-1 max-w-[120px] rounded" })]
+		}, key))
+	});
+}
+function GridDisplay({ items, collection, collectionIcon, actions, editable = false, fields, gridColumns = 3, linkToDetail = false, isLoading = false, loadingCount = 6 }) {
+	const getTitle = (item) => item[fields?.title || "_title"] || getItemDisplayValue(item);
+	const getImage = (item) => getImageUrl(item, fields?.image);
+	if (isLoading && items.length === 0) return /* @__PURE__ */ jsx(GridSkeleton, {
+		count: loadingCount,
+		gridColumns
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: `grid gap-2 ${gridCols[gridColumns]}`,
+		children: items.map((item) => {
+			const image = getImage(item);
+			const gridContent = /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 rounded-md border border-border/60 bg-card/30 backdrop-blur-sm p-2 hover:bg-card/50 transition-colors h-full",
+				children: [
+					image ? /* @__PURE__ */ jsx("div", {
+						className: "size-8 rounded bg-muted shrink-0 overflow-hidden",
+						children: /* @__PURE__ */ jsx("img", {
+							src: image,
+							alt: getTitle(item),
+							className: "w-full h-full object-cover"
+						})
+					}) : collectionIcon ? /* @__PURE__ */ jsx("div", {
+						className: "size-8 rounded bg-muted shrink-0 flex items-center justify-center",
+						children: resolveIconElement(collectionIcon, { className: "size-4 text-muted-foreground" })
+					}) : null,
+					/* @__PURE__ */ jsx("span", {
+						className: "text-sm truncate flex-1",
+						children: getTitle(item)
+					}),
+					editable && (actions?.onEdit || actions?.onRemove) && /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-0.5 shrink-0",
+						children: [actions?.onEdit && /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "icon",
+							className: "h-6 w-6",
+							onClick: (e) => {
+								e.preventDefault();
+								e.stopPropagation();
+								actions.onEdit?.(item);
+							},
+							"aria-label": "Edit item",
+							children: /* @__PURE__ */ jsx(Icon, {
+								icon: "ph:pencil",
+								className: "size-3"
+							})
+						}), actions?.onRemove && /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "icon",
+							className: "h-6 w-6",
+							onClick: (e) => {
+								e.preventDefault();
+								e.stopPropagation();
+								actions.onRemove?.(item);
+							},
+							"aria-label": "Remove item",
+							children: /* @__PURE__ */ jsx(Icon, {
+								icon: "ph:x",
+								className: "size-3"
+							})
+						})]
+					})
+				]
+			});
+			if (!editable && actions?.onEdit) return /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => actions.onEdit?.(item),
+				className: "text-left w-full",
+				children: gridContent
+			}, item.id);
+			if (!editable && linkToDetail) return /* @__PURE__ */ jsx(CollectionEditLink, {
+				collection,
+				id: item.id,
+				className: "block",
+				children: gridContent
+			}, item.id);
+			return /* @__PURE__ */ jsx("div", { children: gridContent }, item.id);
+		})
+	});
+}
+
+//#endregion
+export { GridDisplay };
+//# sourceMappingURL=grid-display.mjs.map

package/dist/client/components/fields/relation/displays/grid-display.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-display.mjs","names":["React"],"sources":["../../../../../../src/client/components/fields/relation/displays/grid-display.tsx"],"sourcesContent":["/**\n * Grid Display - compact grid with thumbnails\n */\n\nimport { Icon } from \"@iconify/react\";\nimport * as React from \"react\";\nimport { CollectionEditLink } from \"../../../admin-link\";\nimport { resolveIconElement } from \"../../../component-renderer\";\nimport { Button } from \"../../../ui/button\";\nimport { Skeleton } from \"../../../ui/skeleton\";\nimport {\n\tgetImageUrl,\n\tgetItemDisplayValue,\n\ttype RelationDisplayProps,\n} from \"./types\";\n\nconst gridCols = {\n\t1: \"grid-cols-1\",\n\t2: \"grid-cols-2\",\n\t3: \"grid-cols-2 sm:grid-cols-3\",\n\t4: \"grid-cols-2 sm:grid-cols-3 lg:grid-cols-4\",\n};\n\nfunction GridSkeleton({\n\tcount = 6,\n\tgridColumns = 3,\n}: {\n\tcount?: number;\n\tgridColumns?: 1 | 2 | 3 | 4;\n}) {\n\tconst skeletonKeys = React.useMemo(\n\t\t() => Array.from({ length: count }, () => crypto.randomUUID()),\n\t\t[count],\n\t);\n\n\treturn (\n\t\t<div className={`grid gap-2 ${gridCols[gridColumns]}`}>\n\t\t\t{skeletonKeys.map((key) => (\n\t\t\t\t<div\n\t\t\t\t\tkey={key}\n\t\t\t\t\tclassName=\"flex items-center gap-2 rounded-md border border-border/60 bg-card/30 backdrop-blur-sm p-2\"\n\t\t\t\t>\n\t\t\t\t\t<Skeleton className=\"size-8 shrink-0 rounded\" />\n\t\t\t\t\t<Skeleton className=\"h-4 flex-1 max-w-[120px] rounded\" />\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</div>\n\t);\n}\n\nexport function GridDisplay({\n\titems,\n\tcollection,\n\tcollectionIcon,\n\tactions,\n\teditable = false,\n\tfields,\n\tgridColumns = 3,\n\tlinkToDetail = false,\n\tisLoading = false,\n\tloadingCount = 6,\n}: RelationDisplayProps) {\n\tconst getTitle = (item: any) =>\n\t\titem[fields?.title || \"_title\"] || getItemDisplayValue(item);\n\tconst getImage = (item: any) => getImageUrl(item, fields?.image);\n\n\t// Show skeleton when loading and no items\n\tif (isLoading && items.length === 0) {\n\t\treturn <GridSkeleton count={loadingCount} gridColumns={gridColumns} />;\n\t}\n\n\treturn (\n\t\t<div className={`grid gap-2 ${gridCols[gridColumns]}`}>\n\t\t\t{items.map((item) => {\n\t\t\t\tconst image = getImage(item);\n\n\t\t\t\tconst gridContent = (\n\t\t\t\t\t<div className=\"flex items-center gap-2 rounded-md border border-border/60 bg-card/30 backdrop-blur-sm p-2 hover:bg-card/50 transition-colors h-full\">\n\t\t\t\t\t\t{image ? (\n\t\t\t\t\t\t\t<div className=\"size-8 rounded bg-muted shrink-0 overflow-hidden\">\n\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\tsrc={image}\n\t\t\t\t\t\t\t\t\talt={getTitle(item)}\n\t\t\t\t\t\t\t\t\tclassName=\"w-full h-full object-cover\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : collectionIcon ? (\n\t\t\t\t\t\t\t<div className=\"size-8 rounded bg-muted shrink-0 flex items-center justify-center\">\n\t\t\t\t\t\t\t\t{resolveIconElement(collectionIcon, {\n\t\t\t\t\t\t\t\t\tclassName: \"size-4 text-muted-foreground\",\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t<span className=\"text-sm truncate flex-1\">{getTitle(item)}</span>\n\t\t\t\t\t\t{/* Action buttons for editable mode */}\n\t\t\t\t\t\t{editable && (actions?.onEdit || actions?.onRemove) && (\n\t\t\t\t\t\t\t<div className=\"flex items-center gap-0.5 shrink-0\">\n\t\t\t\t\t\t\t\t{actions?.onEdit && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"h-6 w-6\"\n\t\t\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\tactions.onEdit?.(item);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\taria-label=\"Edit item\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<Icon icon=\"ph:pencil\" className=\"size-3\" />\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{actions?.onRemove && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"h-6 w-6\"\n\t\t\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\tactions.onRemove?.(item);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\taria-label=\"Remove item\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<Icon icon=\"ph:x\" className=\"size-3\" />\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t);\n\n\t\t\t\t// Non-editable with sheet edit\n\t\t\t\tif (!editable && actions?.onEdit) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tonClick={() => actions.onEdit?.(item)}\n\t\t\t\t\t\t\tclassName=\"text-left w-full\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{gridContent}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\t// Non-editable with link to detail\n\t\t\t\tif (!editable && linkToDetail) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<CollectionEditLink\n\t\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t\tcollection={collection as any}\n\t\t\t\t\t\t\tid={item.id}\n\t\t\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{gridContent}\n\t\t\t\t\t\t</CollectionEditLink>\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\t// Editable or read-only\n\t\t\t\treturn <div key={item.id}>{gridContent}</div>;\n\t\t\t})}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,WAAW;CAChB,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH;AAED,SAAS,aAAa,EACrB,QAAQ,GACR,cAAc,KAIZ;CACF,MAAM,eAAeA,QAAM,cACpB,MAAM,KAAK,EAAE,QAAQ,OAAO,QAAQ,OAAO,YAAY,CAAC,EAC9D,CAAC,MAAM,CACP;AAED,QACC,oBAAC;EAAI,WAAW,cAAc,SAAS;YACrC,aAAa,KAAK,QAClB,qBAAC;GAEA,WAAU;cAEV,oBAAC,YAAS,WAAU,4BAA4B,EAChD,oBAAC,YAAS,WAAU,qCAAqC;KAJpD,IAKA,CACL;GACG;;AAIR,SAAgB,YAAY,EAC3B,OACA,YACA,gBACA,SACA,WAAW,OACX,QACA,cAAc,GACd,eAAe,OACf,YAAY,OACZ,eAAe,KACS;CACxB,MAAM,YAAY,SACjB,KAAK,QAAQ,SAAS,aAAa,oBAAoB,KAAK;CAC7D,MAAM,YAAY,SAAc,YAAY,MAAM,QAAQ,MAAM;AAGhE,KAAI,aAAa,MAAM,WAAW,EACjC,QAAO,oBAAC;EAAa,OAAO;EAA2B;GAAe;AAGvE,QACC,oBAAC;EAAI,WAAW,cAAc,SAAS;YACrC,MAAM,KAAK,SAAS;GACpB,MAAM,QAAQ,SAAS,KAAK;GAE5B,MAAM,cACL,qBAAC;IAAI,WAAU;;KACb,QACA,oBAAC;MAAI,WAAU;gBACd,oBAAC;OACA,KAAK;OACL,KAAK,SAAS,KAAK;OACnB,WAAU;QACT;OACG,GACH,iBACH,oBAAC;MAAI,WAAU;gBACb,mBAAmB,gBAAgB,EACnC,WAAW,gCACX,CAAC;OACG,GACH;KACJ,oBAAC;MAAK,WAAU;gBAA2B,SAAS,KAAK;OAAQ;KAEhE,aAAa,SAAS,UAAU,SAAS,aACzC,qBAAC;MAAI,WAAU;iBACb,SAAS,UACT,oBAAC;OACA,MAAK;OACL,SAAQ;OACR,MAAK;OACL,WAAU;OACV,UAAU,MAAM;AACf,UAAE,gBAAgB;AAClB,UAAE,iBAAiB;AACnB,gBAAQ,SAAS,KAAK;;OAEvB,cAAW;iBAEX,oBAAC;QAAK,MAAK;QAAY,WAAU;SAAW;QACpC,EAET,SAAS,YACT,oBAAC;OACA,MAAK;OACL,SAAQ;OACR,MAAK;OACL,WAAU;OACV,UAAU,MAAM;AACf,UAAE,gBAAgB;AAClB,UAAE,iBAAiB;AACnB,gBAAQ,WAAW,KAAK;;OAEzB,cAAW;iBAEX,oBAAC;QAAK,MAAK;QAAO,WAAU;SAAW;QAC/B;OAEL;;KAEF;AAIP,OAAI,CAAC,YAAY,SAAS,OACzB,QACC,oBAAC;IAEA,MAAK;IACL,eAAe,QAAQ,SAAS,KAAK;IACrC,WAAU;cAET;MALI,KAAK,GAMF;AAKX,OAAI,CAAC,YAAY,aAChB,QACC,oBAAC;IAEY;IACZ,IAAI,KAAK;IACT,WAAU;cAET;MALI,KAAK,GAMU;AAKvB,UAAO,oBAAC,mBAAmB,eAAV,KAAK,GAAuB;IAC5C;GACG"}

package/dist/client/components/fields/relation/displays/index.d.mts

@@ -0,0 +1,6 @@
+import { RelationDisplayFields, RelationDisplayMode } from "./types.mjs";
+import "./chips-display.mjs";
+import "./list-display.mjs";
+import "./table-display.mjs";
+import "./cards-display.mjs";
+import "./grid-display.mjs";

package/dist/client/components/fields/relation/displays/list-display.d.mts

@@ -0,0 +1,2 @@
+import "./types.mjs";
+import "react/jsx-runtime";

package/dist/client/components/fields/relation/displays/list-display.mjs

@@ -0,0 +1,128 @@
+import { resolveIconElement } from "../../../component-renderer.mjs";
+import { Button } from "../../../ui/button.mjs";
+import { Skeleton } from "../../../ui/skeleton.mjs";
+import { getItemDisplayValue } from "./types.mjs";
+import { CollectionEditLink } from "../../../admin-link.mjs";
+import { Icon } from "@iconify/react";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/fields/relation/displays/list-display.tsx
+/**
+* List Display - vertical list with action buttons
+*/
+function ListSkeleton({ count = 3, editable = false }) {
+	const skeletonKeys = React$1.useMemo(() => Array.from({ length: count }, () => crypto.randomUUID()), [count]);
+	if (editable) return /* @__PURE__ */ jsx("div", {
+		className: "space-y-2 rounded-lg border border-border/60 bg-card/30 backdrop-blur-sm p-3",
+		children: skeletonKeys.map((key) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 rounded-md border border-border/60 bg-card/30 backdrop-blur-sm p-2",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "size-3.5 rounded" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 flex-1 max-w-[200px] rounded" })]
+		}, key))
+	});
+	return /* @__PURE__ */ jsx("ul", {
+		className: "space-y-1",
+		children: skeletonKeys.map((key) => /* @__PURE__ */ jsxs("li", {
+			className: "flex items-center gap-1",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "size-3 rounded" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32 rounded" })]
+		}, key))
+	});
+}
+function ListDisplay({ items, collection, collectionIcon, actions, editable = false, orderable = false, linkToDetail = false, renderItem, isLoading = false, loadingCount = 3 }) {
+	const iconElement = resolveIconElement(collectionIcon, { className: "size-3.5 text-muted-foreground shrink-0" });
+	const smallIconElement = resolveIconElement(collectionIcon, { className: "size-3 text-muted-foreground" });
+	if (isLoading && items.length === 0) return /* @__PURE__ */ jsx(ListSkeleton, {
+		count: loadingCount,
+		editable
+	});
+	if (editable) return /* @__PURE__ */ jsx("div", {
+		className: "space-y-2 rounded-lg border border-border/60 bg-card/30 backdrop-blur-sm p-3",
+		children: items.map((item, index) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 rounded-md border border-border/60 bg-card/30 backdrop-blur-sm p-2",
+			children: [
+				orderable && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "cursor-grab text-muted-foreground hover:text-foreground",
+					"aria-label": "Drag to reorder",
+					children: /* @__PURE__ */ jsx(Icon, {
+						icon: "ph:dots-six-vertical",
+						className: "h-4 w-4"
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex-1 flex items-center gap-2 min-w-0",
+					children: [iconElement, renderItem ? renderItem(item, index) : /* @__PURE__ */ jsx("span", {
+						className: "text-sm truncate",
+						children: getItemDisplayValue(item)
+					})]
+				}),
+				actions?.onEdit && /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					size: "icon",
+					className: "h-7 w-7 shrink-0",
+					onClick: () => actions.onEdit?.(item),
+					title: "Edit",
+					"aria-label": "Edit item",
+					children: /* @__PURE__ */ jsx(Icon, {
+						icon: "ph:pencil",
+						className: "h-3 w-3"
+					})
+				}),
+				actions?.onRemove && /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					size: "icon",
+					className: "h-7 w-7 shrink-0",
+					onClick: () => actions.onRemove?.(item),
+					title: "Remove",
+					"aria-label": "Remove item",
+					children: /* @__PURE__ */ jsx(Icon, {
+						icon: "ph:x",
+						className: "h-3 w-3"
+					})
+				})
+			]
+		}, item.id))
+	});
+	return /* @__PURE__ */ jsx("ul", {
+		className: "space-y-1",
+		children: items.map((item, index) => {
+			const displayText = renderItem ? renderItem(item, index) : getItemDisplayValue(item);
+			if (actions?.onEdit) return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => actions.onEdit?.(item),
+				className: "text-sm text-primary hover:underline inline-flex items-center gap-1",
+				children: [
+					smallIconElement,
+					displayText,
+					/* @__PURE__ */ jsx(Icon, {
+						icon: "ph:pencil",
+						className: "size-3"
+					})
+				]
+			}) }, item.id);
+			if (linkToDetail) return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(CollectionEditLink, {
+				collection,
+				id: item.id,
+				className: "text-sm text-primary hover:underline inline-flex items-center gap-1",
+				children: [
+					smallIconElement,
+					displayText,
+					/* @__PURE__ */ jsx(Icon, {
+						icon: "ph:arrow-right",
+						className: "size-3"
+					})
+				]
+			}) }, item.id);
+			return /* @__PURE__ */ jsxs("li", {
+				className: "text-sm flex items-center gap-1",
+				children: [smallIconElement, displayText]
+			}, item.id);
+		})
+	});
+}
+
+//#endregion
+export { ListDisplay };
+//# sourceMappingURL=list-display.mjs.map

package/dist/client/components/fields/relation/displays/list-display.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-display.mjs","names":["React"],"sources":["../../../../../../src/client/components/fields/relation/displays/list-display.tsx"],"sourcesContent":["/**\n * List Display - vertical list with action buttons\n */\n\nimport { Icon } from \"@iconify/react\";\nimport * as React from \"react\";\nimport { CollectionEditLink } from \"../../../admin-link\";\nimport { resolveIconElement } from \"../../../component-renderer\";\nimport { Button } from \"../../../ui/button\";\nimport { Skeleton } from \"../../../ui/skeleton\";\nimport { getItemDisplayValue, type RelationDisplayProps } from \"./types\";\n\nfunction ListSkeleton({\n\tcount = 3,\n\teditable = false,\n}: {\n\tcount?: number;\n\teditable?: boolean;\n}) {\n\tconst skeletonKeys = React.useMemo(\n\t\t() => Array.from({ length: count }, () => crypto.randomUUID()),\n\t\t[count],\n\t);\n\n\tif (editable) {\n\t\treturn (\n\t\t\t<div className=\"space-y-2 rounded-lg border border-border/60 bg-card/30 backdrop-blur-sm p-3\">\n\t\t\t\t{skeletonKeys.map((key) => (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\tclassName=\"flex items-center gap-2 rounded-md border border-border/60 bg-card/30 backdrop-blur-sm p-2\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Skeleton className=\"size-3.5 rounded\" />\n\t\t\t\t\t\t<Skeleton className=\"h-4 flex-1 max-w-[200px] rounded\" />\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<ul className=\"space-y-1\">\n\t\t\t{skeletonKeys.map((key) => (\n\t\t\t\t<li key={key} className=\"flex items-center gap-1\">\n\t\t\t\t\t<Skeleton className=\"size-3 rounded\" />\n\t\t\t\t\t<Skeleton className=\"h-4 w-32 rounded\" />\n\t\t\t\t</li>\n\t\t\t))}\n\t\t</ul>\n\t);\n}\n\nexport function ListDisplay({\n\titems,\n\tcollection,\n\tcollectionIcon,\n\tactions,\n\teditable = false,\n\torderable = false,\n\tlinkToDetail = false,\n\trenderItem,\n\tisLoading = false,\n\tloadingCount = 3,\n}: RelationDisplayProps) {\n\tconst iconElement = resolveIconElement(collectionIcon, {\n\t\tclassName: \"size-3.5 text-muted-foreground shrink-0\",\n\t});\n\tconst smallIconElement = resolveIconElement(collectionIcon, {\n\t\tclassName: \"size-3 text-muted-foreground\",\n\t});\n\n\t// Show skeleton when loading and no items\n\tif (isLoading && items.length === 0) {\n\t\treturn <ListSkeleton count={loadingCount} editable={editable} />;\n\t}\n\n\t// Editable list with cards\n\tif (editable) {\n\t\treturn (\n\t\t\t<div className=\"space-y-2 rounded-lg border border-border/60 bg-card/30 backdrop-blur-sm p-3\">\n\t\t\t\t{items.map((item, index) => (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\tclassName=\"flex items-center gap-2 rounded-md border border-border/60 bg-card/30 backdrop-blur-sm p-2\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{/* Drag Handle */}\n\t\t\t\t\t\t{orderable && (\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclassName=\"cursor-grab text-muted-foreground hover:text-foreground\"\n\t\t\t\t\t\t\t\taria-label=\"Drag to reorder\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Icon icon=\"ph:dots-six-vertical\" className=\"h-4 w-4\" />\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{/* Item Display */}\n\t\t\t\t\t\t<div className=\"flex-1 flex items-center gap-2 min-w-0\">\n\t\t\t\t\t\t\t{iconElement}\n\t\t\t\t\t\t\t{renderItem ? (\n\t\t\t\t\t\t\t\trenderItem(item, index)\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span className=\"text-sm truncate\">\n\t\t\t\t\t\t\t\t\t{getItemDisplayValue(item)}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t{/* Edit Button */}\n\t\t\t\t\t\t{actions?.onEdit && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\tclassName=\"h-7 w-7 shrink-0\"\n\t\t\t\t\t\t\t\tonClick={() => actions.onEdit?.(item)}\n\t\t\t\t\t\t\t\ttitle=\"Edit\"\n\t\t\t\t\t\t\t\taria-label=\"Edit item\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Icon icon=\"ph:pencil\" className=\"h-3 w-3\" />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{/* Remove Button */}\n\t\t\t\t\t\t{actions?.onRemove && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\tclassName=\"h-7 w-7 shrink-0\"\n\t\t\t\t\t\t\t\tonClick={() => actions.onRemove?.(item)}\n\t\t\t\t\t\t\t\ttitle=\"Remove\"\n\t\t\t\t\t\t\t\taria-label=\"Remove item\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Icon icon=\"ph:x\" className=\"h-3 w-3\" />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Read-only list\n\treturn (\n\t\t<ul className=\"space-y-1\">\n\t\t\t{items.map((item, index) => {\n\t\t\t\tconst displayText = renderItem\n\t\t\t\t\t? renderItem(item, index)\n\t\t\t\t\t: getItemDisplayValue(item);\n\n\t\t\t\t// Clickable for sheet edit\n\t\t\t\tif (actions?.onEdit) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<li key={item.id}>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tonClick={() => actions.onEdit?.(item)}\n\t\t\t\t\t\t\t\tclassName=\"text-sm text-primary hover:underline inline-flex items-center gap-1\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{smallIconElement}\n\t\t\t\t\t\t\t\t{displayText}\n\t\t\t\t\t\t\t\t<Icon icon=\"ph:pencil\" className=\"size-3\" />\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\t// Link to detail page\n\t\t\t\tif (linkToDetail) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<li key={item.id}>\n\t\t\t\t\t\t\t<CollectionEditLink\n\t\t\t\t\t\t\t\tcollection={collection as any}\n\t\t\t\t\t\t\t\tid={item.id}\n\t\t\t\t\t\t\t\tclassName=\"text-sm text-primary hover:underline inline-flex items-center gap-1\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{smallIconElement}\n\t\t\t\t\t\t\t\t{displayText}\n\t\t\t\t\t\t\t\t<Icon icon=\"ph:arrow-right\" className=\"size-3\" />\n\t\t\t\t\t\t\t</CollectionEditLink>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\t// Read-only\n\t\t\t\treturn (\n\t\t\t\t\t<li key={item.id} className=\"text-sm flex items-center gap-1\">\n\t\t\t\t\t\t{smallIconElement}\n\t\t\t\t\t\t{displayText}\n\t\t\t\t\t</li>\n\t\t\t\t);\n\t\t\t})}\n\t\t</ul>\n\t);\n}\n"],"mappings":";;;;;;;;;;;;;AAYA,SAAS,aAAa,EACrB,QAAQ,GACR,WAAW,SAIT;CACF,MAAM,eAAeA,QAAM,cACpB,MAAM,KAAK,EAAE,QAAQ,OAAO,QAAQ,OAAO,YAAY,CAAC,EAC9D,CAAC,MAAM,CACP;AAED,KAAI,SACH,QACC,oBAAC;EAAI,WAAU;YACb,aAAa,KAAK,QAClB,qBAAC;GAEA,WAAU;cAEV,oBAAC,YAAS,WAAU,qBAAqB,EACzC,oBAAC,YAAS,WAAU,qCAAqC;KAJpD,IAKA,CACL;GACG;AAIR,QACC,oBAAC;EAAG,WAAU;YACZ,aAAa,KAAK,QAClB,qBAAC;GAAa,WAAU;cACvB,oBAAC,YAAS,WAAU,mBAAmB,EACvC,oBAAC,YAAS,WAAU,qBAAqB;KAFjC,IAGJ,CACJ;GACE;;AAIP,SAAgB,YAAY,EAC3B,OACA,YACA,gBACA,SACA,WAAW,OACX,YAAY,OACZ,eAAe,OACf,YACA,YAAY,OACZ,eAAe,KACS;CACxB,MAAM,cAAc,mBAAmB,gBAAgB,EACtD,WAAW,2CACX,CAAC;CACF,MAAM,mBAAmB,mBAAmB,gBAAgB,EAC3D,WAAW,gCACX,CAAC;AAGF,KAAI,aAAa,MAAM,WAAW,EACjC,QAAO,oBAAC;EAAa,OAAO;EAAwB;GAAY;AAIjE,KAAI,SACH,QACC,oBAAC;EAAI,WAAU;YACb,MAAM,KAAK,MAAM,UACjB,qBAAC;GAEA,WAAU;;IAGT,aACA,oBAAC;KACA,MAAK;KACL,WAAU;KACV,cAAW;eAEX,oBAAC;MAAK,MAAK;MAAuB,WAAU;OAAY;MAChD;IAIV,qBAAC;KAAI,WAAU;gBACb,aACA,aACA,WAAW,MAAM,MAAM,GAEvB,oBAAC;MAAK,WAAU;gBACd,oBAAoB,KAAK;OACpB;MAEH;IAGL,SAAS,UACT,oBAAC;KACA,MAAK;KACL,SAAQ;KACR,MAAK;KACL,WAAU;KACV,eAAe,QAAQ,SAAS,KAAK;KACrC,OAAM;KACN,cAAW;eAEX,oBAAC;MAAK,MAAK;MAAY,WAAU;OAAY;MACrC;IAIT,SAAS,YACT,oBAAC;KACA,MAAK;KACL,SAAQ;KACR,MAAK;KACL,WAAU;KACV,eAAe,QAAQ,WAAW,KAAK;KACvC,OAAM;KACN,cAAW;eAEX,oBAAC;MAAK,MAAK;MAAO,WAAU;OAAY;MAChC;;KArDL,KAAK,GAuDL,CACL;GACG;AAKR,QACC,oBAAC;EAAG,WAAU;YACZ,MAAM,KAAK,MAAM,UAAU;GAC3B,MAAM,cAAc,aACjB,WAAW,MAAM,MAAM,GACvB,oBAAoB,KAAK;AAG5B,OAAI,SAAS,OACZ,QACC,oBAAC,kBACA,qBAAC;IACA,MAAK;IACL,eAAe,QAAQ,SAAS,KAAK;IACrC,WAAU;;KAET;KACA;KACD,oBAAC;MAAK,MAAK;MAAY,WAAU;OAAW;;KACpC,IATD,KAAK,GAUT;AAKP,OAAI,aACH,QACC,oBAAC,kBACA,qBAAC;IACY;IACZ,IAAI,KAAK;IACT,WAAU;;KAET;KACA;KACD,oBAAC;MAAK,MAAK;MAAiB,WAAU;OAAW;;KAC7B,IATb,KAAK,GAUT;AAKP,UACC,qBAAC;IAAiB,WAAU;eAC1B,kBACA;MAFO,KAAK,GAGT;IAEL;GACE"}

package/dist/client/components/fields/relation/displays/table-display.d.mts

@@ -0,0 +1,2 @@
+import "./types.mjs";
+import "react/jsx-runtime";