@questpie/admin 1.1.0 → 2.0.0

package/dist/client/views/collection/cells/relation-cells.d.mts

@@ -0,0 +1,21 @@
+import { FieldDefinition } from "../../../builder/field/field.mjs";
+import * as react_jsx_runtime200 from "react/jsx-runtime";
+
+//#region src/client/views/collection/cells/relation-cells.d.ts
+
+/**
+ * Relation cell - displays relation as clickable chips
+ * Supports both single relations and arrays
+ * Opens detail sheet on click
+ */
+declare function RelationCell({
+  value,
+  fieldDef
+}: {
+  value: unknown;
+  row?: unknown;
+  fieldDef?: FieldDefinition;
+}): react_jsx_runtime200.JSX.Element;
+//#endregion
+export { RelationCell };
+//# sourceMappingURL=relation-cells.d.mts.map

package/dist/client/views/collection/cells/relation-cells.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"relation-cells.d.mts","names":[],"sources":["../../../../../src/client/views/collection/cells/relation-cells.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;iBA+BgB,YAAA;;;;;;aAMJ;IACX,oBAAA,CAAA,GAAA,CAAA"}

package/dist/client/views/collection/cells/relation-cells.mjs

@@ -0,0 +1,105 @@
+import { useResolveText } from "../../../i18n/hooks.mjs";
+import { Badge } from "../../../components/ui/badge.mjs";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../../components/ui/tooltip.mjs";
+import { getRelationItemId, getRelationItemLabel } from "./shared/cell-helpers.mjs";
+import { ResourceSheet } from "../../../components/sheets/resource-sheet.mjs";
+import { RelationChip } from "./shared/relation-chip.mjs";
+import * as React$1 from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/views/collection/cells/relation-cells.tsx
+/**
+* Relation Cell Components
+*
+* Cells for displaying relation fields:
+* - RelationCell - forward relations (belongs-to, has-one, has-many)
+* - ReverseRelationCell - reverse relations (computed from other collections)
+*/
+/**
+* Relation cell - displays relation as clickable chips
+* Supports both single relations and arrays
+* Opens detail sheet on click
+*/
+function RelationCell({ value, fieldDef }) {
+	const resolveText = useResolveText();
+	const targetCollection = fieldDef?.["~options"]?.targetCollection;
+	const [sheetOpen, setSheetOpen] = React$1.useState(false);
+	const [sheetItemId, setSheetItemId] = React$1.useState();
+	const [sheetCollection, setSheetCollection] = React$1.useState();
+	const handleChipClick = React$1.useCallback((itemId, collection) => {
+		setSheetItemId(itemId);
+		setSheetCollection(collection);
+		setSheetOpen(true);
+	}, []);
+	if (value === null || value === void 0) return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: "-"
+	});
+	if (Array.isArray(value)) {
+		if (value.length === 0) return /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground",
+			children: "-"
+		});
+		const visibleItems = value.slice(0, 3);
+		const remainingCount = value.length - 3;
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxs("span", {
+			className: "inline-flex items-center gap-1 max-w-[250px] overflow-hidden",
+			children: [visibleItems.map((item, idx) => /* @__PURE__ */ jsx(RelationChip, {
+				item,
+				targetCollection,
+				onClick: handleChipClick,
+				className: "shrink-0"
+			}, idx)), remainingCount > 0 && /* @__PURE__ */ jsxs(Badge, {
+				variant: "secondary",
+				className: "h-5 px-1.5 text-[10px] shrink-0",
+				children: ["+", remainingCount]
+			})]
+		}) }), value.length > 3 && /* @__PURE__ */ jsx(TooltipContent, {
+			side: "bottom",
+			align: "start",
+			className: "p-0 w-56",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "max-h-[200px] overflow-y-auto p-2 space-y-1",
+				children: value.map((item, idx) => {
+					const label = resolveText(getRelationItemLabel(item));
+					const id = getRelationItemId(item);
+					const canNavigate = targetCollection && id;
+					const key = id ?? label ?? `item-${idx}`;
+					return /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-1.5 text-xs",
+						children: [/* @__PURE__ */ jsx("span", { className: "size-1 rounded-full bg-foreground/60" }), canNavigate ? /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: (e) => {
+								e.stopPropagation();
+								handleChipClick(id, targetCollection);
+							},
+							className: "text-primary hover:underline text-left",
+							children: label
+						}) : /* @__PURE__ */ jsx("span", { children: label })]
+					}, key);
+				})
+			})
+		})] }), sheetCollection && sheetItemId && /* @__PURE__ */ jsx(ResourceSheet, {
+			type: "collection",
+			collection: sheetCollection,
+			itemId: sheetItemId,
+			open: sheetOpen,
+			onOpenChange: setSheetOpen
+		})] });
+	}
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(RelationChip, {
+		item: value,
+		targetCollection,
+		onClick: handleChipClick
+	}), sheetCollection && sheetItemId && /* @__PURE__ */ jsx(ResourceSheet, {
+		type: "collection",
+		collection: sheetCollection,
+		itemId: sheetItemId,
+		open: sheetOpen,
+		onOpenChange: setSheetOpen
+	})] });
+}
+
+//#endregion
+export { RelationCell };
+//# sourceMappingURL=relation-cells.mjs.map

package/dist/client/views/collection/cells/relation-cells.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"relation-cells.mjs","names":["React"],"sources":["../../../../../src/client/views/collection/cells/relation-cells.tsx"],"sourcesContent":["/**\n * Relation Cell Components\n *\n * Cells for displaying relation fields:\n * - RelationCell - forward relations (belongs-to, has-one, has-many)\n * - ReverseRelationCell - reverse relations (computed from other collections)\n */\n\nimport * as React from \"react\";\nimport type { FieldDefinition } from \"../../../builder/field/field\";\nimport { ResourceSheet } from \"../../../components/sheets\";\nimport { Badge } from \"../../../components/ui/badge\";\nimport {\n\tTooltip,\n\tTooltipContent,\n\tTooltipTrigger,\n} from \"../../../components/ui/tooltip\";\nimport { useResolveText } from \"../../../i18n/hooks\";\nimport { cn } from \"../../../lib/utils\";\nimport { getRelationItemId, getRelationItemLabel } from \"./shared/cell-helpers\";\nimport { RelationChip } from \"./shared/relation-chip\";\n\n// ============================================================================\n// Relation Cell\n// ============================================================================\n\n/**\n * Relation cell - displays relation as clickable chips\n * Supports both single relations and arrays\n * Opens detail sheet on click\n */\nexport function RelationCell({\n\tvalue,\n\tfieldDef,\n}: {\n\tvalue: unknown;\n\trow?: unknown;\n\tfieldDef?: FieldDefinition;\n}) {\n\tconst resolveText = useResolveText();\n\tconst targetCollection = fieldDef?.[\"~options\"]?.targetCollection as\n\t\t| string\n\t\t| undefined;\n\n\t// Sheet state\n\tconst [sheetOpen, setSheetOpen] = React.useState(false);\n\tconst [sheetItemId, setSheetItemId] = React.useState<string | undefined>();\n\tconst [sheetCollection, setSheetCollection] = React.useState<\n\t\tstring | undefined\n\t>();\n\n\tconst handleChipClick = React.useCallback(\n\t\t(itemId: string, collection: string) => {\n\t\t\tsetSheetItemId(itemId);\n\t\t\tsetSheetCollection(collection);\n\t\t\tsetSheetOpen(true);\n\t\t},\n\t\t[],\n\t);\n\n\tif (value === null || value === undefined) {\n\t\treturn <span className=\"text-muted-foreground\">-</span>;\n\t}\n\n\t// Handle array of relations (multiple)\n\tif (Array.isArray(value)) {\n\t\tif (value.length === 0) {\n\t\t\treturn <span className=\"text-muted-foreground\">-</span>;\n\t\t}\n\n\t\tconst visibleItems = value.slice(0, 3);\n\t\tconst remainingCount = value.length - 3;\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<Tooltip>\n\t\t\t\t\t<TooltipTrigger\n\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t<span className=\"inline-flex items-center gap-1 max-w-[250px] overflow-hidden\">\n\t\t\t\t\t\t\t\t{visibleItems.map((item, idx) => (\n\t\t\t\t\t\t\t\t\t<RelationChip\n\t\t\t\t\t\t\t\t\t\t// biome-ignore lint/suspicious/noArrayIndexKey: stable array from backend\n\t\t\t\t\t\t\t\t\t\tkey={idx}\n\t\t\t\t\t\t\t\t\t\titem={item}\n\t\t\t\t\t\t\t\t\t\ttargetCollection={targetCollection}\n\t\t\t\t\t\t\t\t\t\tonClick={handleChipClick}\n\t\t\t\t\t\t\t\t\t\tclassName=\"shrink-0\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t{remainingCount > 0 && (\n\t\t\t\t\t\t\t\t\t<Badge\n\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"h-5 px-1.5 text-[10px] shrink-0\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t+{remainingCount}\n\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t\t{value.length > 3 && (\n\t\t\t\t\t\t<TooltipContent side=\"bottom\" align=\"start\" className=\"p-0 w-56\">\n\t\t\t\t\t\t\t<div className=\"max-h-[200px] overflow-y-auto p-2 space-y-1\">\n\t\t\t\t\t\t\t\t{value.map((item, idx) => {\n\t\t\t\t\t\t\t\t\tconst label = resolveText(getRelationItemLabel(item));\n\t\t\t\t\t\t\t\t\tconst id = getRelationItemId(item);\n\t\t\t\t\t\t\t\t\tconst canNavigate = targetCollection && id;\n\t\t\t\t\t\t\t\t\tconst key = id ?? label ?? `item-${idx}`;\n\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"flex items-center gap-1.5 text-xs\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"size-1 rounded-full bg-foreground/60\" />\n\t\t\t\t\t\t\t\t\t\t\t{canNavigate ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<button\n\t\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\t\tonClick={(e) => {\n\t\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\t\thandleChipClick(id, targetCollection);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"text-primary hover:underline text-left\"\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\t\t{label}\n\t\t\t\t\t\t\t\t\t\t\t\t</button>\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<span>{label}</span>\n\t\t\t\t\t\t\t\t\t\t\t)}\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})}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</TooltipContent>\n\t\t\t\t\t)}\n\t\t\t\t</Tooltip>\n\n\t\t\t\t{/* Detail sheet */}\n\t\t\t\t{sheetCollection && sheetItemId && (\n\t\t\t\t\t<ResourceSheet\n\t\t\t\t\t\ttype=\"collection\"\n\t\t\t\t\t\tcollection={sheetCollection}\n\t\t\t\t\t\titemId={sheetItemId}\n\t\t\t\t\t\topen={sheetOpen}\n\t\t\t\t\t\tonOpenChange={setSheetOpen}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</>\n\t\t);\n\t}\n\n\t// Handle single relation\n\treturn (\n\t\t<>\n\t\t\t<RelationChip\n\t\t\t\titem={value}\n\t\t\t\ttargetCollection={targetCollection}\n\t\t\t\tonClick={handleChipClick}\n\t\t\t/>\n\t\t\t{/* Detail sheet */}\n\t\t\t{sheetCollection && sheetItemId && (\n\t\t\t\t<ResourceSheet\n\t\t\t\t\ttype=\"collection\"\n\t\t\t\t\tcollection={sheetCollection}\n\t\t\t\t\titemId={sheetItemId}\n\t\t\t\t\topen={sheetOpen}\n\t\t\t\t\tonOpenChange={setSheetOpen}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n}\n\n// ============================================================================\n// Reverse Relation Cell\n// ============================================================================\n\n/**\n * Reverse relation cell - displays related items as clickable chips\n * Shows count badge with tooltip listing all items for navigation\n * Opens detail sheet on click\n */\nexport function ReverseRelationCell({\n\tvalue,\n\tfieldDef,\n}: {\n\tvalue: unknown;\n\trow?: unknown;\n\tfieldDef?: FieldDefinition;\n}) {\n\tconst resolveText = useResolveText();\n\t// Get source collection from fieldDef (the collection that has the relation pointing here)\n\tconst sourceCollection = fieldDef?.[\"~options\"]?.sourceCollection as\n\t\t| string\n\t\t| undefined;\n\n\t// Sheet state\n\tconst [sheetOpen, setSheetOpen] = React.useState(false);\n\tconst [sheetItemId, setSheetItemId] = React.useState<string | undefined>();\n\tconst [sheetCollection, setSheetCollection] = React.useState<\n\t\tstring | undefined\n\t>();\n\n\tconst handleChipClick = React.useCallback(\n\t\t(itemId: string, collection: string) => {\n\t\t\tsetSheetItemId(itemId);\n\t\t\tsetSheetCollection(collection);\n\t\t\tsetSheetOpen(true);\n\t\t},\n\t\t[],\n\t);\n\n\tif (value === null || value === undefined) {\n\t\treturn <span className=\"text-muted-foreground\">-</span>;\n\t}\n\n\t// Handle count-only value (when items not fetched)\n\tif (typeof value === \"number\") {\n\t\treturn (\n\t\t\t<Badge variant=\"secondary\">\n\t\t\t\t{value} item{value !== 1 ? \"s\" : \"\"}\n\t\t\t</Badge>\n\t\t);\n\t}\n\n\t// Handle array of related items\n\tif (Array.isArray(value)) {\n\t\tif (value.length === 0) {\n\t\t\treturn <span className=\"text-muted-foreground\">-</span>;\n\t\t}\n\n\t\t// For small counts, show chips inline\n\t\tif (value.length <= 2) {\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t<span className=\"inline-flex flex-wrap items-center gap-1\">\n\t\t\t\t\t\t{value.map((item, idx) => (\n\t\t\t\t\t\t\t<RelationChip\n\t\t\t\t\t\t\t\t// biome-ignore lint/suspicious/noArrayIndexKey: stable array from backend\n\t\t\t\t\t\t\t\tkey={idx}\n\t\t\t\t\t\t\t\titem={item}\n\t\t\t\t\t\t\t\ttargetCollection={sourceCollection}\n\t\t\t\t\t\t\t\tonClick={handleChipClick}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</span>\n\t\t\t\t\t{/* Detail sheet */}\n\t\t\t\t\t{sheetCollection && sheetItemId && (\n\t\t\t\t\t\t<ResourceSheet\n\t\t\t\t\t\t\ttype=\"collection\"\n\t\t\t\t\t\t\tcollection={sheetCollection}\n\t\t\t\t\t\t\titemId={sheetItemId}\n\t\t\t\t\t\t\topen={sheetOpen}\n\t\t\t\t\t\t\tonOpenChange={setSheetOpen}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t);\n\t\t}\n\n\t\t// For larger counts, show count badge with tooltip\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<Tooltip>\n\t\t\t\t\t<TooltipTrigger\n\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"inline-flex items-center gap-1.5 cursor-default\",\n\t\t\t\t\t\t\t\t\t\"text-muted-foreground hover:text-foreground transition-colors\",\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Badge variant=\"secondary\" className=\"h-5 px-1.5 text-xs\">\n\t\t\t\t\t\t\t\t\t{value.length}\n\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t<span className=\"text-xs\">\n\t\t\t\t\t\t\t\t\t{resolveText(getRelationItemLabel(value[0]))}\n\t\t\t\t\t\t\t\t\t{value.length > 1 && ` +${value.length - 1}`}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t\t<TooltipContent side=\"bottom\" align=\"start\" className=\"p-0 w-56\">\n\t\t\t\t\t\t<div className=\"max-h-[200px] overflow-y-auto p-2 space-y-1\">\n\t\t\t\t\t\t\t{value.slice(0, 15).map((item, idx) => {\n\t\t\t\t\t\t\t\tconst label = resolveText(getRelationItemLabel(item));\n\t\t\t\t\t\t\t\tconst id = getRelationItemId(item);\n\t\t\t\t\t\t\t\tconst canNavigate = sourceCollection && id;\n\t\t\t\t\t\t\t\tconst key = id ?? label ?? `item-${idx}`;\n\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<div key={key} className=\"flex items-center gap-1.5 text-xs\">\n\t\t\t\t\t\t\t\t\t\t<span className=\"size-1 rounded-full bg-foreground/60\" />\n\t\t\t\t\t\t\t\t\t\t{canNavigate ? (\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\tonClick={(e) => {\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\thandleChipClick(id, sourceCollection);\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\tclassName=\"text-primary hover:underline text-left truncate\"\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{label}\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\t<span className=\"truncate\">{label}</span>\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})}\n\t\t\t\t\t\t\t{value.length > 15 && (\n\t\t\t\t\t\t\t\t<div className=\"text-[11px] text-muted-foreground text-center pt-1 border-t border-border/50 mt-1\">\n\t\t\t\t\t\t\t\t\t+{value.length - 15} more\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</TooltipContent>\n\t\t\t\t</Tooltip>\n\n\t\t\t\t{/* Detail sheet */}\n\t\t\t\t{sheetCollection && sheetItemId && (\n\t\t\t\t\t<ResourceSheet\n\t\t\t\t\t\ttype=\"collection\"\n\t\t\t\t\t\tcollection={sheetCollection}\n\t\t\t\t\t\titemId={sheetItemId}\n\t\t\t\t\t\topen={sheetOpen}\n\t\t\t\t\t\tonOpenChange={setSheetOpen}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</>\n\t\t);\n\t}\n\n\treturn <span className=\"text-muted-foreground\">-</span>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA+BA,SAAgB,aAAa,EAC5B,OACA,YAKE;CACF,MAAM,cAAc,gBAAgB;CACpC,MAAM,mBAAmB,WAAW,aAAa;CAKjD,MAAM,CAAC,WAAW,gBAAgBA,QAAM,SAAS,MAAM;CACvD,MAAM,CAAC,aAAa,kBAAkBA,QAAM,UAA8B;CAC1E,MAAM,CAAC,iBAAiB,sBAAsBA,QAAM,UAEjD;CAEH,MAAM,kBAAkBA,QAAM,aAC5B,QAAgB,eAAuB;AACvC,iBAAe,OAAO;AACtB,qBAAmB,WAAW;AAC9B,eAAa,KAAK;IAEnB,EAAE,CACF;AAED,KAAI,UAAU,QAAQ,UAAU,OAC/B,QAAO,oBAAC;EAAK,WAAU;YAAwB;GAAQ;AAIxD,KAAI,MAAM,QAAQ,MAAM,EAAE;AACzB,MAAI,MAAM,WAAW,EACpB,QAAO,oBAAC;GAAK,WAAU;aAAwB;IAAQ;EAGxD,MAAM,eAAe,MAAM,MAAM,GAAG,EAAE;EACtC,MAAM,iBAAiB,MAAM,SAAS;AAEtC,SACC,4CACC,qBAAC,sBACA,oBAAC,kBACA,QACC,qBAAC;GAAK,WAAU;cACd,aAAa,KAAK,MAAM,QACxB,oBAAC;IAGM;IACY;IAClB,SAAS;IACT,WAAU;MAJL,IAKJ,CACD,EACD,iBAAiB,KACjB,qBAAC;IACA,SAAQ;IACR,WAAU;eACV,KACE;KACK;IAEH,GAEP,EACD,MAAM,SAAS,KACf,oBAAC;GAAe,MAAK;GAAS,OAAM;GAAQ,WAAU;aACrD,oBAAC;IAAI,WAAU;cACb,MAAM,KAAK,MAAM,QAAQ;KACzB,MAAM,QAAQ,YAAY,qBAAqB,KAAK,CAAC;KACrD,MAAM,KAAK,kBAAkB,KAAK;KAClC,MAAM,cAAc,oBAAoB;KACxC,MAAM,MAAM,MAAM,SAAS,QAAQ;AAEnC,YACC,qBAAC;MAEA,WAAU;iBAEV,oBAAC,UAAK,WAAU,yCAAyC,EACxD,cACA,oBAAC;OACA,MAAK;OACL,UAAU,MAAM;AACf,UAAE,iBAAiB;AACnB,wBAAgB,IAAI,iBAAiB;;OAEtC,WAAU;iBAET;QACO,GAET,oBAAC,oBAAM,QAAa;QAhBhB,IAkBA;MAEN;KACG;IACU,IAET,EAGT,mBAAmB,eACnB,oBAAC;GACA,MAAK;GACL,YAAY;GACZ,QAAQ;GACR,MAAM;GACN,cAAc;IACb,IAED;;AAKL,QACC,4CACC,oBAAC;EACA,MAAM;EACY;EAClB,SAAS;GACR,EAED,mBAAmB,eACnB,oBAAC;EACA,MAAK;EACL,YAAY;EACZ,QAAQ;EACR,MAAM;EACN,cAAc;GACb,IAED"}

package/dist/client/views/collection/cells/shared/asset-thumbnail.d.mts

@@ -0,0 +1 @@
+import "react/jsx-runtime";

package/dist/client/views/collection/cells/shared/asset-thumbnail.mjs

@@ -0,0 +1,189 @@
+import { cn } from "../../../../lib/utils.mjs";
+import { Button } from "../../../../components/ui/button.mjs";
+import { Icon } from "@iconify/react";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/views/collection/cells/shared/asset-thumbnail.tsx
+function getFileIcon(mimeType) {
+	if (!mimeType) return "ph:file";
+	const type = mimeType.toLowerCase();
+	if (type.startsWith("image/")) return "ph:file-image";
+	if (type.startsWith("video/")) return "ph:file-video";
+	if (type.startsWith("audio/")) return "ph:file-audio";
+	if (type === "application/pdf") return "ph:file-pdf";
+	if (type.includes("zip") || type.includes("compressed") || type.includes("archive")) return "ph:file-zip";
+	if (type.includes("word") || type.includes("document") || type === "application/rtf") return "ph:file-doc";
+	if (type.includes("json") || type.includes("javascript") || type.includes("typescript") || type.includes("xml") || type.includes("html")) return "ph:file-code";
+	return "ph:file";
+}
+function isImage(mimeType) {
+	return !!mimeType?.toLowerCase().startsWith("image/");
+}
+function isVideo(mimeType) {
+	return !!mimeType?.toLowerCase().startsWith("video/");
+}
+function isAudio(mimeType) {
+	return !!mimeType?.toLowerCase().startsWith("audio/");
+}
+function AssetThumbnail({ asset, size = "sm", showFilename = false, showControls = false, onClick, className }) {
+	if (asset === null || asset === void 0) return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: "-"
+	});
+	if (typeof asset === "string") return /* @__PURE__ */ jsxs("span", {
+		className: "font-mono text-xs text-muted-foreground truncate max-w-[100px]",
+		title: asset,
+		children: [asset.slice(0, 8), "..."]
+	});
+	const assetObj = asset;
+	const url = assetObj.url;
+	const filename = assetObj.filename;
+	const mimeType = assetObj.mimeType;
+	const alt = assetObj.alt;
+	const isImageType = isImage(mimeType);
+	const isVideoType = isVideo(mimeType);
+	const isAudioType = isAudio(mimeType);
+	const fileIcon = getFileIcon(mimeType);
+	if (!url) {
+		if (assetObj.id) return /* @__PURE__ */ jsxs("span", {
+			className: "font-mono text-xs text-muted-foreground",
+			children: [String(assetObj.id).slice(0, 8), "..."]
+		});
+		return /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground",
+			children: "-"
+		});
+	}
+	if (size === "sm") {
+		const assetId = assetObj.id;
+		const handleClick = onClick && assetId ? () => onClick(assetId) : void 0;
+		if (isImageType) return /* @__PURE__ */ jsxs("div", {
+			className: cn("flex items-center gap-2", onClick && "cursor-pointer hover:opacity-80", className),
+			onClick: handleClick,
+			children: [/* @__PURE__ */ jsx("img", {
+				src: url,
+				alt: filename || "Asset",
+				className: "size-8 rounded object-cover border"
+			}), showFilename && filename && /* @__PURE__ */ jsx("span", {
+				className: "text-xs truncate max-w-[100px]",
+				title: filename,
+				children: filename
+			})]
+		});
+		if (showFilename && filename) return /* @__PURE__ */ jsx("span", {
+			className: "text-sm truncate max-w-[150px]",
+			title: filename,
+			children: filename
+		});
+		return /* @__PURE__ */ jsxs("span", {
+			className: "font-mono text-xs text-muted-foreground",
+			children: [String(assetObj.id || "").slice(0, 8), "..."]
+		});
+	}
+	if (size === "md") {
+		const assetId = assetObj.id;
+		const handleClick = onClick && assetId ? () => onClick(assetId) : void 0;
+		if (isImageType) return /* @__PURE__ */ jsx("div", {
+			className: cn("flex items-center justify-center", onClick && "cursor-pointer hover:opacity-80", className),
+			onClick: handleClick,
+			children: /* @__PURE__ */ jsx("img", {
+				src: url,
+				alt: filename || "Asset",
+				className: "size-10 rounded object-cover border"
+			})
+		});
+		return /* @__PURE__ */ jsx("div", {
+			className: cn("flex items-center justify-center", onClick && "cursor-pointer hover:opacity-80", className),
+			onClick: handleClick,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "size-10 rounded border bg-muted flex items-center justify-center",
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon: fileIcon,
+					className: "size-5 text-muted-foreground"
+				})
+			})
+		});
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative overflow-hidden rounded-lg border bg-muted/30", className),
+		children: [
+			isImageType && /* @__PURE__ */ jsx("div", {
+				className: "relative",
+				children: /* @__PURE__ */ jsx("img", {
+					src: url,
+					alt: alt || filename || "Asset preview",
+					className: "max-h-[400px] w-full object-contain"
+				})
+			}),
+			isVideoType && /* @__PURE__ */ jsx("div", {
+				className: "relative",
+				children: showControls ? /* @__PURE__ */ jsxs("video", {
+					src: url,
+					controls: true,
+					className: "max-h-[400px] w-full",
+					preload: "metadata",
+					children: [/* @__PURE__ */ jsx("track", { kind: "captions" }), "Your browser does not support the video tag."]
+				}) : /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col items-center justify-center gap-4 p-12",
+					children: [/* @__PURE__ */ jsx(Icon, {
+						icon: fileIcon,
+						className: "size-20 text-muted-foreground"
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-muted-foreground",
+						children: filename || "Video"
+					})]
+				})
+			}),
+			isAudioType && /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col items-center justify-center gap-4 p-8",
+				children: [
+					/* @__PURE__ */ jsx(Icon, {
+						icon: fileIcon,
+						className: "size-16 text-muted-foreground"
+					}),
+					showControls && /* @__PURE__ */ jsx("audio", {
+						src: url,
+						controls: true,
+						className: "w-full max-w-md",
+						preload: "metadata",
+						children: "Your browser does not support the audio tag."
+					}),
+					!showControls && /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-muted-foreground",
+						children: filename || "Audio"
+					})
+				]
+			}),
+			!isImageType && !isVideoType && !isAudioType && /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col items-center justify-center gap-4 p-12",
+				children: [/* @__PURE__ */ jsx(Icon, {
+					icon: fileIcon,
+					className: "size-20 text-muted-foreground"
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-sm text-muted-foreground",
+					children: filename || "File"
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "absolute right-2 top-2",
+				children: /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "secondary",
+					size: "icon-sm",
+					nativeButton: false,
+					render: /* @__PURE__ */ jsx("a", {
+						href: url,
+						target: "_blank",
+						rel: "noopener noreferrer"
+					}),
+					children: /* @__PURE__ */ jsx(Icon, { icon: "ph:arrow-square-out-bold" })
+				})
+			})
+		]
+	});
+}
+
+//#endregion
+export { AssetThumbnail };
+//# sourceMappingURL=asset-thumbnail.mjs.map

package/dist/client/views/collection/cells/shared/asset-thumbnail.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"asset-thumbnail.mjs","names":[],"sources":["../../../../../../src/client/views/collection/cells/shared/asset-thumbnail.tsx"],"sourcesContent":["/**\n * AssetThumbnail Component\n *\n * Unified asset display component for all contexts.\n * Replaces 3 duplicate implementations:\n * - UploadCell (32px table)\n * - AssetPreviewCell (40px preview)\n * - AssetPreviewField (400px form preview)\n */\n\nimport * as React from \"react\";\nimport { Icon } from \"@iconify/react\";\nimport { Button } from \"../../../../components/ui/button\";\nimport { cn } from \"../../../../lib/utils\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface AssetThumbnailProps {\n  /**\n   * Asset object or ID\n   */\n  asset: unknown;\n\n  /**\n   * Size variant\n   * - sm: 32px (table cells)\n   * - md: 40px/64px (preview)\n   * - lg: 400px (form preview with controls)\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n\n  /**\n   * Show filename next to thumbnail (sm/md sizes only)\n   */\n  showFilename?: boolean;\n\n  /**\n   * Show video/audio controls (lg size only)\n   */\n  showControls?: boolean;\n\n  /**\n   * Called when the thumbnail is clicked\n   */\n  onClick?: (id: string) => void;\n\n  /**\n   * Additional className\n   */\n  className?: string;\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction getFileIcon(mimeType?: string): string {\n  if (!mimeType) return \"ph:file\";\n\n  const type = mimeType.toLowerCase();\n\n  if (type.startsWith(\"image/\")) return \"ph:file-image\";\n  if (type.startsWith(\"video/\")) return \"ph:file-video\";\n  if (type.startsWith(\"audio/\")) return \"ph:file-audio\";\n  if (type === \"application/pdf\") return \"ph:file-pdf\";\n  if (\n    type.includes(\"zip\") ||\n    type.includes(\"compressed\") ||\n    type.includes(\"archive\")\n  )\n    return \"ph:file-zip\";\n  if (\n    type.includes(\"word\") ||\n    type.includes(\"document\") ||\n    type === \"application/rtf\"\n  )\n    return \"ph:file-doc\";\n  if (\n    type.includes(\"json\") ||\n    type.includes(\"javascript\") ||\n    type.includes(\"typescript\") ||\n    type.includes(\"xml\") ||\n    type.includes(\"html\")\n  )\n    return \"ph:file-code\";\n\n  return \"ph:file\";\n}\n\nfunction isImage(mimeType?: string): boolean {\n  return !!mimeType?.toLowerCase().startsWith(\"image/\");\n}\n\nfunction isVideo(mimeType?: string): boolean {\n  return !!mimeType?.toLowerCase().startsWith(\"video/\");\n}\n\nfunction isAudio(mimeType?: string): boolean {\n  return !!mimeType?.toLowerCase().startsWith(\"audio/\");\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport function AssetThumbnail({\n  asset,\n  size = \"sm\",\n  showFilename = false,\n  showControls = false,\n  onClick,\n  className,\n}: AssetThumbnailProps) {\n  // Handle null/undefined\n  if (asset === null || asset === undefined) {\n    return <span className=\"text-muted-foreground\">-</span>;\n  }\n\n  // If asset is just an ID string\n  if (typeof asset === \"string\") {\n    return (\n      <span\n        className=\"font-mono text-xs text-muted-foreground truncate max-w-[100px]\"\n        title={asset}\n      >\n        {asset.slice(0, 8)}...\n      </span>\n    );\n  }\n\n  // Extract asset properties\n  const assetObj = asset as Record<string, unknown>;\n  const url = assetObj.url as string | undefined;\n  const filename = assetObj.filename as string | undefined;\n  const mimeType = assetObj.mimeType as string | undefined;\n  const alt = assetObj.alt as string | undefined;\n\n  const isImageType = isImage(mimeType);\n  const isVideoType = isVideo(mimeType);\n  const isAudioType = isAudio(mimeType);\n  const fileIcon = getFileIcon(mimeType);\n\n  // No URL means no preview\n  if (!url) {\n    if (assetObj.id) {\n      return (\n        <span className=\"font-mono text-xs text-muted-foreground\">\n          {String(assetObj.id).slice(0, 8)}...\n        </span>\n      );\n    }\n    return <span className=\"text-muted-foreground\">-</span>;\n  }\n\n  // ========== SM SIZE (32px) - Table cells ==========\n  if (size === \"sm\") {\n    const assetId = assetObj.id as string | undefined;\n    const handleClick = onClick && assetId ? () => onClick(assetId) : undefined;\n\n    if (isImageType) {\n      return (\n        <div\n          className={cn(\n            \"flex items-center gap-2\",\n            onClick && \"cursor-pointer hover:opacity-80\",\n            className,\n          )}\n          onClick={handleClick}\n        >\n          <img\n            src={url}\n            alt={filename || \"Asset\"}\n            className=\"size-8 rounded object-cover border\"\n          />\n          {showFilename && filename && (\n            <span className=\"text-xs truncate max-w-[100px]\" title={filename}>\n              {filename}\n            </span>\n          )}\n        </div>\n      );\n    }\n\n    // Non-image files\n    if (showFilename && filename) {\n      return (\n        <span className=\"text-sm truncate max-w-[150px]\" title={filename}>\n          {filename}\n        </span>\n      );\n    }\n\n    return (\n      <span className=\"font-mono text-xs text-muted-foreground\">\n        {String(assetObj.id || \"\").slice(0, 8)}...\n      </span>\n    );\n  }\n\n  // ========== MD SIZE (40px) - Preview/Icon ==========\n  if (size === \"md\") {\n    const assetId = assetObj.id as string | undefined;\n    const handleClick = onClick && assetId ? () => onClick(assetId) : undefined;\n\n    if (isImageType) {\n      return (\n        <div\n          className={cn(\n            \"flex items-center justify-center\",\n            onClick && \"cursor-pointer hover:opacity-80\",\n            className,\n          )}\n          onClick={handleClick}\n        >\n          <img\n            src={url}\n            alt={filename || \"Asset\"}\n            className=\"size-10 rounded object-cover border\"\n          />\n        </div>\n      );\n    }\n\n    // Show icon for non-images\n    return (\n      <div\n        className={cn(\n          \"flex items-center justify-center\",\n          onClick && \"cursor-pointer hover:opacity-80\",\n          className,\n        )}\n        onClick={handleClick}\n      >\n        <div className=\"size-10 rounded border bg-muted flex items-center justify-center\">\n          <Icon icon={fileIcon} className=\"size-5 text-muted-foreground\" />\n        </div>\n      </div>\n    );\n  }\n\n  // ========== LG SIZE (400px) - Full preview with controls ==========\n  return (\n    <div\n      className={cn(\n        \"relative overflow-hidden rounded-lg border bg-muted/30\",\n        className,\n      )}\n    >\n      {/* Image Preview */}\n      {isImageType && (\n        <div className=\"relative\">\n          <img\n            src={url}\n            alt={alt || filename || \"Asset preview\"}\n            className=\"max-h-[400px] w-full object-contain\"\n          />\n        </div>\n      )}\n\n      {/* Video Preview */}\n      {isVideoType && (\n        <div className=\"relative\">\n          {showControls ? (\n            <video\n              src={url}\n              controls\n              className=\"max-h-[400px] w-full\"\n              preload=\"metadata\"\n            >\n              <track kind=\"captions\" />\n              Your browser does not support the video tag.\n            </video>\n          ) : (\n            <div className=\"flex flex-col items-center justify-center gap-4 p-12\">\n              <Icon icon={fileIcon} className=\"size-20 text-muted-foreground\" />\n              <p className=\"text-sm text-muted-foreground\">\n                {filename || \"Video\"}\n              </p>\n            </div>\n          )}\n        </div>\n      )}\n\n      {/* Audio Preview */}\n      {isAudioType && (\n        <div className=\"flex flex-col items-center justify-center gap-4 p-8\">\n          <Icon icon={fileIcon} className=\"size-16 text-muted-foreground\" />\n          {showControls && (\n            <audio\n              src={url}\n              controls\n              className=\"w-full max-w-md\"\n              preload=\"metadata\"\n            >\n              Your browser does not support the audio tag.\n            </audio>\n          )}\n          {!showControls && (\n            <p className=\"text-sm text-muted-foreground\">\n              {filename || \"Audio\"}\n            </p>\n          )}\n        </div>\n      )}\n\n      {/* Other File Types */}\n      {!isImageType && !isVideoType && !isAudioType && (\n        <div className=\"flex flex-col items-center justify-center gap-4 p-12\">\n          <Icon icon={fileIcon} className=\"size-20 text-muted-foreground\" />\n          <p className=\"text-sm text-muted-foreground\">{filename || \"File\"}</p>\n        </div>\n      )}\n\n      {/* Open in new tab button (lg size only) */}\n      <div className=\"absolute right-2 top-2\">\n        <Button\n          type=\"button\"\n          variant=\"secondary\"\n          size=\"icon-sm\"\n          nativeButton={false}\n          render={<a href={url} target=\"_blank\" rel=\"noopener noreferrer\" />}\n        >\n          <Icon icon=\"ph:arrow-square-out-bold\" />\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AA0DA,SAAS,YAAY,UAA2B;AAC9C,KAAI,CAAC,SAAU,QAAO;CAEtB,MAAM,OAAO,SAAS,aAAa;AAEnC,KAAI,KAAK,WAAW,SAAS,CAAE,QAAO;AACtC,KAAI,KAAK,WAAW,SAAS,CAAE,QAAO;AACtC,KAAI,KAAK,WAAW,SAAS,CAAE,QAAO;AACtC,KAAI,SAAS,kBAAmB,QAAO;AACvC,KACE,KAAK,SAAS,MAAM,IACpB,KAAK,SAAS,aAAa,IAC3B,KAAK,SAAS,UAAU,CAExB,QAAO;AACT,KACE,KAAK,SAAS,OAAO,IACrB,KAAK,SAAS,WAAW,IACzB,SAAS,kBAET,QAAO;AACT,KACE,KAAK,SAAS,OAAO,IACrB,KAAK,SAAS,aAAa,IAC3B,KAAK,SAAS,aAAa,IAC3B,KAAK,SAAS,MAAM,IACpB,KAAK,SAAS,OAAO,CAErB,QAAO;AAET,QAAO;;AAGT,SAAS,QAAQ,UAA4B;AAC3C,QAAO,CAAC,CAAC,UAAU,aAAa,CAAC,WAAW,SAAS;;AAGvD,SAAS,QAAQ,UAA4B;AAC3C,QAAO,CAAC,CAAC,UAAU,aAAa,CAAC,WAAW,SAAS;;AAGvD,SAAS,QAAQ,UAA4B;AAC3C,QAAO,CAAC,CAAC,UAAU,aAAa,CAAC,WAAW,SAAS;;AAOvD,SAAgB,eAAe,EAC7B,OACA,OAAO,MACP,eAAe,OACf,eAAe,OACf,SACA,aACsB;AAEtB,KAAI,UAAU,QAAQ,UAAU,OAC9B,QAAO,oBAAC;EAAK,WAAU;YAAwB;GAAQ;AAIzD,KAAI,OAAO,UAAU,SACnB,QACE,qBAAC;EACC,WAAU;EACV,OAAO;aAEN,MAAM,MAAM,GAAG,EAAE,EAAC;GACd;CAKX,MAAM,WAAW;CACjB,MAAM,MAAM,SAAS;CACrB,MAAM,WAAW,SAAS;CAC1B,MAAM,WAAW,SAAS;CAC1B,MAAM,MAAM,SAAS;CAErB,MAAM,cAAc,QAAQ,SAAS;CACrC,MAAM,cAAc,QAAQ,SAAS;CACrC,MAAM,cAAc,QAAQ,SAAS;CACrC,MAAM,WAAW,YAAY,SAAS;AAGtC,KAAI,CAAC,KAAK;AACR,MAAI,SAAS,GACX,QACE,qBAAC;GAAK,WAAU;cACb,OAAO,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE,EAAC;IAC5B;AAGX,SAAO,oBAAC;GAAK,WAAU;aAAwB;IAAQ;;AAIzD,KAAI,SAAS,MAAM;EACjB,MAAM,UAAU,SAAS;EACzB,MAAM,cAAc,WAAW,gBAAgB,QAAQ,QAAQ,GAAG;AAElE,MAAI,YACF,QACE,qBAAC;GACC,WAAW,GACT,2BACA,WAAW,mCACX,UACD;GACD,SAAS;cAET,oBAAC;IACC,KAAK;IACL,KAAK,YAAY;IACjB,WAAU;KACV,EACD,gBAAgB,YACf,oBAAC;IAAK,WAAU;IAAiC,OAAO;cACrD;KACI;IAEL;AAKV,MAAI,gBAAgB,SAClB,QACE,oBAAC;GAAK,WAAU;GAAiC,OAAO;aACrD;IACI;AAIX,SACE,qBAAC;GAAK,WAAU;cACb,OAAO,SAAS,MAAM,GAAG,CAAC,MAAM,GAAG,EAAE,EAAC;IAClC;;AAKX,KAAI,SAAS,MAAM;EACjB,MAAM,UAAU,SAAS;EACzB,MAAM,cAAc,WAAW,gBAAgB,QAAQ,QAAQ,GAAG;AAElE,MAAI,YACF,QACE,oBAAC;GACC,WAAW,GACT,oCACA,WAAW,mCACX,UACD;GACD,SAAS;aAET,oBAAC;IACC,KAAK;IACL,KAAK,YAAY;IACjB,WAAU;KACV;IACE;AAKV,SACE,oBAAC;GACC,WAAW,GACT,oCACA,WAAW,mCACX,UACD;GACD,SAAS;aAET,oBAAC;IAAI,WAAU;cACb,oBAAC;KAAK,MAAM;KAAU,WAAU;MAAiC;KAC7D;IACF;;AAKV,QACE,qBAAC;EACC,WAAW,GACT,0DACA,UACD;;GAGA,eACC,oBAAC;IAAI,WAAU;cACb,oBAAC;KACC,KAAK;KACL,KAAK,OAAO,YAAY;KACxB,WAAU;MACV;KACE;GAIP,eACC,oBAAC;IAAI,WAAU;cACZ,eACC,qBAAC;KACC,KAAK;KACL;KACA,WAAU;KACV,SAAQ;gBAER,oBAAC,WAAM,MAAK,aAAa;MAEnB,GAER,qBAAC;KAAI,WAAU;gBACb,oBAAC;MAAK,MAAM;MAAU,WAAU;OAAkC,EAClE,oBAAC;MAAE,WAAU;gBACV,YAAY;OACX;MACA;KAEJ;GAIP,eACC,qBAAC;IAAI,WAAU;;KACb,oBAAC;MAAK,MAAM;MAAU,WAAU;OAAkC;KACjE,gBACC,oBAAC;MACC,KAAK;MACL;MACA,WAAU;MACV,SAAQ;gBACT;OAEO;KAET,CAAC,gBACA,oBAAC;MAAE,WAAU;gBACV,YAAY;OACX;;KAEF;GAIP,CAAC,eAAe,CAAC,eAAe,CAAC,eAChC,qBAAC;IAAI,WAAU;eACb,oBAAC;KAAK,MAAM;KAAU,WAAU;MAAkC,EAClE,oBAAC;KAAE,WAAU;eAAiC,YAAY;MAAW;KACjE;GAIR,oBAAC;IAAI,WAAU;cACb,oBAAC;KACC,MAAK;KACL,SAAQ;KACR,MAAK;KACL,cAAc;KACd,QAAQ,oBAAC;MAAE,MAAM;MAAK,QAAO;MAAS,KAAI;OAAwB;eAElE,oBAAC,QAAK,MAAK,6BAA6B;MACjC;KACL;;GACF"}

package/dist/client/views/collection/cells/shared/cell-helpers.d.mts

@@ -0,0 +1,2 @@
+import "../../../../builder/field/field.mjs";
+import "../../../../lib/utils.mjs";

package/dist/client/views/collection/cells/shared/cell-helpers.mjs

@@ -0,0 +1,78 @@
+import { formatLabel } from "../../../../lib/utils.mjs";
+
+//#region src/client/views/collection/cells/shared/cell-helpers.ts
+/**
+* Get display label for a relation item
+* Prefers _title (backend computed), then common label fields, then id
+*/
+function getRelationItemLabel(item) {
+	if (typeof item === "object" && item !== null) {
+		const obj = item;
+		return String(obj._title || obj.name || obj.title || obj.id || "-");
+	}
+	return String(item);
+}
+/**
+* Get ID from a relation item
+*/
+function getRelationItemId(item) {
+	if (typeof item === "object" && item !== null) {
+		const obj = item;
+		return obj.id ? String(obj.id) : null;
+	}
+	if (typeof item === "string" || typeof item === "number") return String(item);
+	return null;
+}
+/**
+* Format a field key as a readable label (camelCase -> Title Case)
+* @deprecated Use `formatLabel` from `@/lib/utils` instead
+*/
+const formatFieldLabel = formatLabel;
+/**
+* Get label for a field from field definition or format from key
+*/
+function getFieldLabel(key, fieldDef) {
+	if (fieldDef?.["~options"]?.label) return fieldDef["~options"].label;
+	return formatFieldLabel(key);
+}
+/**
+* Format a primitive value for display
+*/
+function formatPrimitiveValue(value) {
+	if (value === null || value === void 0) return "-";
+	if (typeof value === "boolean") return value ? "Yes" : "No";
+	if (value instanceof Date) return value.toLocaleDateString();
+	if (typeof value === "number") return value.toLocaleString();
+	return String(value);
+}
+/**
+* Summarize a value for inline preview
+*/
+function summarizeValue(val) {
+	if (val === null || val === void 0) return "-";
+	if (typeof val === "boolean") return val ? "Yes" : "No";
+	if (typeof val === "number") return val.toLocaleString();
+	if (typeof val === "string") return val.length > 25 ? `${val.slice(0, 25)}…` : val;
+	if (Array.isArray(val)) return `${val.length} items`;
+	if (typeof val === "object") return `${Object.keys(val).length} fields`;
+	return String(val);
+}
+/**
+* Get item label from various sources (used in array cells)
+*/
+function getItemLabel(item, idx, itemLabelFn) {
+	if (itemLabelFn) try {
+		return itemLabelFn(item) || `Item ${idx + 1}`;
+	} catch {
+		return `Item ${idx + 1}`;
+	}
+	if (typeof item === "object" && item !== null) {
+		const obj = item;
+		return String(obj.name || obj.title || obj.label || obj.platform || obj.type || "") || `Item ${idx + 1}`;
+	}
+	return formatPrimitiveValue(item);
+}
+
+//#endregion
+export { formatFieldLabel, formatPrimitiveValue, getFieldLabel, getItemLabel, getRelationItemId, getRelationItemLabel, summarizeValue };
+//# sourceMappingURL=cell-helpers.mjs.map

package/dist/client/views/collection/cells/shared/cell-helpers.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cell-helpers.mjs","names":[],"sources":["../../../../../../src/client/views/collection/cells/shared/cell-helpers.ts"],"sourcesContent":["/**\n * Shared helper functions for cell rendering\n * Extracted from build-columns.tsx to reduce duplication\n */\n\nimport type { FieldDefinition } from \"../../../../builder/field/field\";\nimport { formatLabel } from \"../../../../lib/utils\";\n\n/**\n * Get display label for a relation item\n * Prefers _title (backend computed), then common label fields, then id\n */\nexport function getRelationItemLabel(item: unknown): string {\n  if (typeof item === \"object\" && item !== null) {\n    const obj = item as Record<string, unknown>;\n    // Prefer _title computed field from backend\n    return String(obj._title || obj.name || obj.title || obj.id || \"-\");\n  }\n  return String(item);\n}\n\n/**\n * Get ID from a relation item\n */\nexport function getRelationItemId(item: unknown): string | null {\n  if (typeof item === \"object\" && item !== null) {\n    const obj = item as Record<string, unknown>;\n    return obj.id ? String(obj.id) : null;\n  }\n  if (typeof item === \"string\" || typeof item === \"number\") {\n    return String(item);\n  }\n  return null;\n}\n\n/**\n * Format a field key as a readable label (camelCase -> Title Case)\n * @deprecated Use `formatLabel` from `@/lib/utils` instead\n */\nexport const formatFieldLabel = formatLabel;\n\n/**\n * Get label for a field from field definition or format from key\n */\nexport function getFieldLabel(key: string, fieldDef?: FieldDefinition): string {\n  if (fieldDef?.[\"~options\"]?.label) {\n    return fieldDef[\"~options\"].label;\n  }\n  return formatFieldLabel(key);\n}\n\n/**\n * Format a primitive value for display\n */\nexport function formatPrimitiveValue(value: unknown): string {\n  if (value === null || value === undefined) return \"-\";\n  if (typeof value === \"boolean\") return value ? \"Yes\" : \"No\";\n  if (value instanceof Date) return value.toLocaleDateString();\n  if (typeof value === \"number\") return value.toLocaleString();\n  return String(value);\n}\n\n/**\n * Summarize a value for inline preview\n */\nexport function summarizeValue(val: unknown): string {\n  if (val === null || val === undefined) return \"-\";\n  if (typeof val === \"boolean\") return val ? \"Yes\" : \"No\";\n  if (typeof val === \"number\") return val.toLocaleString();\n  if (typeof val === \"string\")\n    return val.length > 25 ? `${val.slice(0, 25)}…` : val;\n  if (Array.isArray(val)) return `${val.length} items`;\n  if (typeof val === \"object\") return `${Object.keys(val).length} fields`;\n  return String(val);\n}\n\n/**\n * Get item label from various sources (used in array cells)\n */\nexport function getItemLabel(\n  item: unknown,\n  idx: number,\n  itemLabelFn?: (item: unknown) => string,\n): string {\n  if (itemLabelFn) {\n    try {\n      return itemLabelFn(item) || `Item ${idx + 1}`;\n    } catch {\n      return `Item ${idx + 1}`;\n    }\n  }\n  if (typeof item === \"object\" && item !== null) {\n    const obj = item as Record<string, unknown>;\n    return (\n      String(\n        obj.name || obj.title || obj.label || obj.platform || obj.type || \"\",\n      ) || `Item ${idx + 1}`\n    );\n  }\n  return formatPrimitiveValue(item);\n}\n"],"mappings":";;;;;;;AAYA,SAAgB,qBAAqB,MAAuB;AAC1D,KAAI,OAAO,SAAS,YAAY,SAAS,MAAM;EAC7C,MAAM,MAAM;AAEZ,SAAO,OAAO,IAAI,UAAU,IAAI,QAAQ,IAAI,SAAS,IAAI,MAAM,IAAI;;AAErE,QAAO,OAAO,KAAK;;;;;AAMrB,SAAgB,kBAAkB,MAA8B;AAC9D,KAAI,OAAO,SAAS,YAAY,SAAS,MAAM;EAC7C,MAAM,MAAM;AACZ,SAAO,IAAI,KAAK,OAAO,IAAI,GAAG,GAAG;;AAEnC,KAAI,OAAO,SAAS,YAAY,OAAO,SAAS,SAC9C,QAAO,OAAO,KAAK;AAErB,QAAO;;;;;;AAOT,MAAa,mBAAmB;;;;AAKhC,SAAgB,cAAc,KAAa,UAAoC;AAC7E,KAAI,WAAW,aAAa,MAC1B,QAAO,SAAS,YAAY;AAE9B,QAAO,iBAAiB,IAAI;;;;;AAM9B,SAAgB,qBAAqB,OAAwB;AAC3D,KAAI,UAAU,QAAQ,UAAU,OAAW,QAAO;AAClD,KAAI,OAAO,UAAU,UAAW,QAAO,QAAQ,QAAQ;AACvD,KAAI,iBAAiB,KAAM,QAAO,MAAM,oBAAoB;AAC5D,KAAI,OAAO,UAAU,SAAU,QAAO,MAAM,gBAAgB;AAC5D,QAAO,OAAO,MAAM;;;;;AAMtB,SAAgB,eAAe,KAAsB;AACnD,KAAI,QAAQ,QAAQ,QAAQ,OAAW,QAAO;AAC9C,KAAI,OAAO,QAAQ,UAAW,QAAO,MAAM,QAAQ;AACnD,KAAI,OAAO,QAAQ,SAAU,QAAO,IAAI,gBAAgB;AACxD,KAAI,OAAO,QAAQ,SACjB,QAAO,IAAI,SAAS,KAAK,GAAG,IAAI,MAAM,GAAG,GAAG,CAAC,KAAK;AACpD,KAAI,MAAM,QAAQ,IAAI,CAAE,QAAO,GAAG,IAAI,OAAO;AAC7C,KAAI,OAAO,QAAQ,SAAU,QAAO,GAAG,OAAO,KAAK,IAAI,CAAC,OAAO;AAC/D,QAAO,OAAO,IAAI;;;;;AAMpB,SAAgB,aACd,MACA,KACA,aACQ;AACR,KAAI,YACF,KAAI;AACF,SAAO,YAAY,KAAK,IAAI,QAAQ,MAAM;SACpC;AACN,SAAO,QAAQ,MAAM;;AAGzB,KAAI,OAAO,SAAS,YAAY,SAAS,MAAM;EAC7C,MAAM,MAAM;AACZ,SACE,OACE,IAAI,QAAQ,IAAI,SAAS,IAAI,SAAS,IAAI,YAAY,IAAI,QAAQ,GACnE,IAAI,QAAQ,MAAM;;AAGvB,QAAO,qBAAqB,KAAK"}

package/dist/client/views/collection/cells/shared/relation-chip.d.mts

@@ -0,0 +1 @@
+import "react/jsx-runtime";

package/dist/client/views/collection/cells/shared/relation-chip.mjs

@@ -0,0 +1,37 @@
+import { useResolveText } from "../../../../i18n/hooks.mjs";
+import { cn } from "../../../../lib/utils.mjs";
+import { getRelationItemId, getRelationItemLabel } from "./cell-helpers.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/client/views/collection/cells/shared/relation-chip.tsx
+/**
+* Clickable relation chip component
+* Shows label and navigates to related item on click (or opens sheet if onClick provided)
+*/
+function RelationChip({ item, targetCollection, onClick, className }) {
+	const label = useResolveText()(getRelationItemLabel(item));
+	const id = getRelationItemId(item);
+	const canInteract = targetCollection && id;
+	const handleClick = (e) => {
+		e.stopPropagation();
+		if (onClick && id && targetCollection) {
+			e.preventDefault();
+			onClick(id, targetCollection);
+		}
+	};
+	if (canInteract) return /* @__PURE__ */ jsx("a", {
+		href: `/admin/collections/${targetCollection}/${id}`,
+		onClick: handleClick,
+		onPointerDown: (e) => e.stopPropagation(),
+		className: cn("inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs", "bg-primary/10 text-primary hover:bg-primary/20", "transition-colors cursor-pointer", "border border-primary/20 hover:border-primary/40", className),
+		children: label
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs", "bg-muted text-muted-foreground", "border border-border", className),
+		children: label
+	});
+}
+
+//#endregion
+export { RelationChip };
+//# sourceMappingURL=relation-chip.mjs.map

package/dist/client/views/collection/cells/shared/relation-chip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"relation-chip.mjs","names":[],"sources":["../../../../../../src/client/views/collection/cells/shared/relation-chip.tsx"],"sourcesContent":["/**\n * RelationChip Component\n *\n * Clickable chip for displaying relation items.\n * Extracted from RelationCell to eliminate duplication.\n * Used by RelationCell and ReverseRelationCell.\n */\n\nimport type * as React from \"react\";\nimport { useResolveText } from \"../../../../i18n/hooks\";\nimport { cn } from \"../../../../lib/utils\";\nimport { getRelationItemId, getRelationItemLabel } from \"./cell-helpers\";\n\nexport interface RelationChipProps {\n\t/**\n\t * Relation item (object with id, name, title, etc.)\n\t */\n\titem: unknown;\n\n\t/**\n\t * Target collection name for navigation\n\t */\n\ttargetCollection?: string;\n\n\t/**\n\t * Click handler (if provided, prevents default navigation)\n\t * Receives item ID and collection name\n\t */\n\tonClick?: (itemId: string, collection: string) => void;\n\n\t/**\n\t * Additional CSS classes\n\t */\n\tclassName?: string;\n}\n\n/**\n * Clickable relation chip component\n * Shows label and navigates to related item on click (or opens sheet if onClick provided)\n */\nexport function RelationChip({\n\titem,\n\ttargetCollection,\n\tonClick,\n\tclassName,\n}: RelationChipProps) {\n\tconst resolveText = useResolveText();\n\tconst label = resolveText(getRelationItemLabel(item));\n\tconst id = getRelationItemId(item);\n\tconst canInteract = targetCollection && id;\n\n\tconst handleClick = (e: React.MouseEvent) => {\n\t\te.stopPropagation();\n\t\tif (onClick && id && targetCollection) {\n\t\t\te.preventDefault();\n\t\t\tonClick(id, targetCollection);\n\t\t}\n\t};\n\n\tif (canInteract) {\n\t\tconst href = `/admin/collections/${targetCollection}/${id}`;\n\t\tconst chipClassName = cn(\n\t\t\t\"inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs\",\n\t\t\t\"bg-primary/10 text-primary hover:bg-primary/20\",\n\t\t\t\"transition-colors cursor-pointer\",\n\t\t\t\"border border-primary/20 hover:border-primary/40\",\n\t\t\tclassName,\n\t\t);\n\n\t\t// If onClick provided, use button-like behavior but keep href for accessibility\n\t\treturn (\n\t\t\t<a\n\t\t\t\thref={href}\n\t\t\t\tonClick={handleClick}\n\t\t\t\tonPointerDown={(e) => e.stopPropagation()}\n\t\t\t\tclassName={chipClassName}\n\t\t\t>\n\t\t\t\t{label}\n\t\t\t</a>\n\t\t);\n\t}\n\n\t// Non-clickable chip (no target collection or id)\n\treturn (\n\t\t<span\n\t\t\tclassName={cn(\n\t\t\t\t\"inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs\",\n\t\t\t\t\"bg-muted text-muted-foreground\",\n\t\t\t\t\"border border-border\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{label}\n\t\t</span>\n\t);\n}\n"],"mappings":";;;;;;;;;;AAwCA,SAAgB,aAAa,EAC5B,MACA,kBACA,SACA,aACqB;CAErB,MAAM,QADc,gBAAgB,CACV,qBAAqB,KAAK,CAAC;CACrD,MAAM,KAAK,kBAAkB,KAAK;CAClC,MAAM,cAAc,oBAAoB;CAExC,MAAM,eAAe,MAAwB;AAC5C,IAAE,iBAAiB;AACnB,MAAI,WAAW,MAAM,kBAAkB;AACtC,KAAE,gBAAgB;AAClB,WAAQ,IAAI,iBAAiB;;;AAI/B,KAAI,YAWH,QACC,oBAAC;EACA,MAZW,sBAAsB,iBAAiB,GAAG;EAarD,SAAS;EACT,gBAAgB,MAAM,EAAE,iBAAiB;EACzC,WAdoB,GACrB,iEACA,kDACA,oCACA,oDACA,UACA;YAUE;GACE;AAKN,QACC,oBAAC;EACA,WAAW,GACV,iEACA,kCACA,wBACA,UACA;YAEA;GACK"}

package/dist/client/views/collection/cells/upload-cells.d.mts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime197 from "react/jsx-runtime";
+
+//#region src/client/views/collection/cells/upload-cells.d.ts
+
+/**
+ * Upload Cell Components
+ *
+ * Cells for displaying asset/upload fields:
+ * - UploadCell - single asset
+ * - UploadManyCell - multiple assets
+ *
+ * Uses unified AssetThumbnail component
+ */
+/**
+ * Upload cell - displays single asset thumbnail or file info
+ * Uses AssetThumbnail with size="sm"
+ */
+declare function UploadCell({
+  value
+}: {
+  value: unknown;
+}): react_jsx_runtime197.JSX.Element;
+//#endregion
+export { UploadCell };
+//# sourceMappingURL=upload-cells.d.mts.map

package/dist/client/views/collection/cells/upload-cells.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload-cells.d.mts","names":[],"sources":["../../../../../src/client/views/collection/cells/upload-cells.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAsBA;;;;;;;;;;iBAAgB,UAAA;;;;IAAwC,oBAAA,CAAA,GAAA,CAAA"}

package/dist/client/views/collection/cells/upload-cells.mjs

@@ -0,0 +1,20 @@
+import { AssetThumbnail } from "./shared/asset-thumbnail.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/views/collection/cells/upload-cells.tsx
+/**
+* Upload cell - displays single asset thumbnail or file info
+* Uses AssetThumbnail with size="sm"
+*/
+function UploadCell({ value }) {
+	return /* @__PURE__ */ jsx(AssetThumbnail, {
+		asset: value,
+		size: "sm",
+		showFilename: true
+	});
+}
+
+//#endregion
+export { UploadCell };
+//# sourceMappingURL=upload-cells.mjs.map

package/dist/client/views/collection/cells/upload-cells.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload-cells.mjs","names":[],"sources":["../../../../../src/client/views/collection/cells/upload-cells.tsx"],"sourcesContent":["/**\n * Upload Cell Components\n *\n * Cells for displaying asset/upload fields:\n * - UploadCell - single asset\n * - UploadManyCell - multiple assets\n *\n * Uses unified AssetThumbnail component\n */\n\nimport * as React from \"react\";\nimport { Badge } from \"../../../components/ui/badge\";\nimport { AssetThumbnail } from \"./shared/asset-thumbnail\";\n\n// ============================================================================\n// Upload Cell\n// ============================================================================\n\n/**\n * Upload cell - displays single asset thumbnail or file info\n * Uses AssetThumbnail with size=\"sm\"\n */\nexport function UploadCell({ value }: { value: unknown }) {\n  return <AssetThumbnail asset={value} size=\"sm\" showFilename />;\n}\n\n// ============================================================================\n// Upload Many Cell\n// ============================================================================\n\n/**\n * Upload many cell - displays multiple assets count or thumbnails\n */\nexport function UploadManyCell({ value }: { value: unknown }) {\n  if (value === null || value === undefined) {\n    return <span className=\"text-muted-foreground\">-</span>;\n  }\n\n  if (!Array.isArray(value)) {\n    return <span className=\"text-muted-foreground\">-</span>;\n  }\n\n  if (value.length === 0) {\n    return <span className=\"text-muted-foreground\">-</span>;\n  }\n\n  // Get image assets for preview\n  const imageAssets = value\n    .filter((item): item is Record<string, unknown> => {\n      if (typeof item !== \"object\" || item === null) return false;\n      const mimeType = (item as Record<string, unknown>).mimeType;\n      return typeof mimeType === \"string\" && mimeType.startsWith(\"image/\");\n    })\n    .slice(0, 3);\n\n  // Show mini grid of thumbnails for images\n  if (imageAssets.length > 0) {\n    const remaining = value.length - imageAssets.length;\n    return (\n      <div className=\"flex items-center gap-1\">\n        <div className=\"flex -space-x-2\">\n          {imageAssets.map((asset, index) => (\n            <img\n              key={(asset.id as string) || index}\n              src={asset.url as string}\n              alt={(asset.filename as string) || \"Asset\"}\n              className=\"size-6 rounded border bg-background object-cover\"\n            />\n          ))}\n        </div>\n        {remaining > 0 && (\n          <span className=\"text-xs text-muted-foreground ml-1\">\n            +{remaining}\n          </span>\n        )}\n      </div>\n    );\n  }\n\n  // Show count badge for non-images\n  return (\n    <Badge variant=\"secondary\">\n      {value.length} file{value.length !== 1 ? \"s\" : \"\"}\n    </Badge>\n  );\n}\n"],"mappings":";;;;;;;;;AAsBA,SAAgB,WAAW,EAAE,SAA6B;AACxD,QAAO,oBAAC;EAAe,OAAO;EAAO,MAAK;EAAK;GAAe"}

package/dist/client/views/collection/columns/build-columns.d.mts

@@ -0,0 +1,2 @@
+import "./types.mjs";
+import "@tanstack/react-table";