@questpie/admin 3.0.2 → 3.0.4

package/dist/client/components/fields/blocks-field/blocks-field.mjs

@@ -4,7 +4,6 @@ import { useTranslation } from "../../../i18n/hooks.mjs";
 import { EMPTY_BLOCK_CONTENT, isBlockContent } from "../../../blocks/types.mjs";
 import { useAdminConfig } from "../../../hooks/use-admin-config.mjs";
 import { FieldWrapper } from "../field-wrapper.mjs";
-import { Card, CardContent, CardHeader, CardTitle } from "../../ui/card.mjs";
 import { countBlocks } from "../../blocks/utils/tree-utils.mjs";
 import { BlockEditorLayout } from "../../blocks/block-editor-layout.mjs";
 import { BlockEditorProvider } from "../../blocks/block-editor-provider.mjs";
@@ -20,13 +19,14 @@ import { useFormContext, useWatch } from "react-hook-form";
 * Form field for editing block content using the visual block editor.
 * Block definitions are fetched from server introspection API.
 */
+const EMPTY_BLOCKS = {};
 /**
 * Blocks field component.
 *
 * Renders the visual block editor for editing block content.
 */
 function BlocksField(t0) {
-	const $ = c(42);
+	const $ = c(39);
 	const { name, value, onChange, label, description, error, required, disabled, allowedBlocks, minBlocks, maxBlocks } = t0;
 	const { t } = useTranslation();
 	const form = useFormContext();
@@ -50,105 +50,85 @@ function BlocksField(t0) {
 		$[5] = t2;
 	} else t2 = $[5];
 	const content = t2;
+	const blocks = adminConfig?.blocks ?? EMPTY_BLOCKS;
 	let t3;
-	if ($[6] !== adminConfig?.blocks) {
-		t3 = adminConfig?.blocks ?? {};
-		$[6] = adminConfig?.blocks;
-		$[7] = t3;
-	} else t3 = $[7];
-	const blocks = t3;
-	let t4;
 	bb0: {
 		if (!allowedBlocks || allowedBlocks.length === 0) {
-			t4 = blocks;
+			t3 = blocks;
 			break bb0;
 		}
+		let t4$1;
+		if ($[6] !== allowedBlocks) {
+			t4$1 = new Set(allowedBlocks);
+			$[6] = allowedBlocks;
+			$[7] = t4$1;
+		} else t4$1 = $[7];
+		const allowed = t4$1;
 		let t5$1;
-		if ($[8] !== allowedBlocks) {
-			t5$1 = new Set(allowedBlocks);
-			$[8] = allowedBlocks;
-			$[9] = t5$1;
-		} else t5$1 = $[9];
-		const allowed = t5$1;
-		let t6$1;
-		if ($[10] !== allowed || $[11] !== blocks) {
-			t6$1 = Object.fromEntries(Object.entries(blocks).filter((t7$1) => {
-				const [name_0] = t7$1;
+		if ($[8] !== allowed || $[9] !== blocks) {
+			t5$1 = Object.fromEntries(Object.entries(blocks).filter((t6$1) => {
+				const [name_0] = t6$1;
 				return allowed.has(name_0);
 			}));
-			$[10] = allowed;
-			$[11] = blocks;
-			$[12] = t6$1;
-		} else t6$1 = $[12];
-		t4 = t6$1;
+			$[8] = allowed;
+			$[9] = blocks;
+			$[10] = t5$1;
+		} else t5$1 = $[10];
+		t3 = t5$1;
 	}
-	const filteredBlocks = t4;
-	let t5;
-	if ($[13] !== onChange) {
-		t5 = (newContent) => {
+	const filteredBlocks = t3;
+	let t4;
+	if ($[11] !== onChange) {
+		t4 = (newContent) => {
 			onChange?.(newContent);
 		};
-		$[13] = onChange;
+		$[11] = onChange;
+		$[12] = t4;
+	} else t4 = $[12];
+	const handleChange = t4;
+	let t5;
+	if ($[13] !== content._tree) {
+		t5 = countBlocks(content._tree);
+		$[13] = content._tree;
 		$[14] = t5;
 	} else t5 = $[14];
-	const handleChange = t5;
+	const blockCount = t5;
 	let t6;
-	if ($[15] !== content._tree) {
-		t6 = countBlocks(content._tree);
-		$[15] = content._tree;
+	if ($[15] !== filteredBlocks) {
+		t6 = Object.keys(filteredBlocks);
+		$[15] = filteredBlocks;
 		$[16] = t6;
 	} else t6 = $[16];
-	const blockCount = t6;
+	const hasBlocks = t6.length > 0;
 	let t7;
-	if ($[17] !== filteredBlocks) {
-		t7 = Object.keys(filteredBlocks);
-		$[17] = filteredBlocks;
-		$[18] = t7;
-	} else t7 = $[18];
-	const hasBlocks = t7.length > 0;
-	let t8;
-	if ($[19] !== allowedBlocks || $[20] !== blockCount || $[21] !== content || $[22] !== filteredBlocks || $[23] !== handleChange || $[24] !== hasBlocks || $[25] !== t) {
-		t8 = hasBlocks ? /* @__PURE__ */ jsx(BlockEditorProvider, {
+	if ($[17] !== allowedBlocks || $[18] !== content || $[19] !== filteredBlocks || $[20] !== handleChange || $[21] !== hasBlocks || $[22] !== t) {
+		t7 = hasBlocks ? /* @__PURE__ */ jsx(BlockEditorProvider, {
 			value: content,
 			onChange: handleChange,
 			blocks: filteredBlocks,
 			allowedBlocks,
 			children: /* @__PURE__ */ jsx(BlockEditorLayout, {})
-		}) : /* @__PURE__ */ jsxs(Card, {
-			className: "border-dashed",
-			children: [/* @__PURE__ */ jsx(CardHeader, {
-				className: "pb-2",
-				children: /* @__PURE__ */ jsx(CardTitle, {
-					className: "flex items-center justify-between text-sm font-medium",
-					children: /* @__PURE__ */ jsxs("span", { children: [
-						"Blocks (",
-						blockCount,
-						")"
-					] })
-				})
-			}), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", {
-				className: "text-muted-foreground py-8 text-center",
-				children: [/* @__PURE__ */ jsx("p", {
-					className: "text-sm",
-					children: t("blocks.noDefinitions")
-				}), /* @__PURE__ */ jsx("p", {
-					className: "mt-1 text-xs",
-					children: t("blocks.noDefinitionsHint")
-				})]
-			}) })]
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "text-muted-foreground py-4",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "text-sm",
+				children: t("blocks.noDefinitions")
+			}), /* @__PURE__ */ jsx("p", {
+				className: "mt-1 text-xs",
+				children: t("blocks.noDefinitionsHint")
+			})]
 		});
-		$[19] = allowedBlocks;
-		$[20] = blockCount;
-		$[21] = content;
-		$[22] = filteredBlocks;
-		$[23] = handleChange;
-		$[24] = hasBlocks;
-		$[25] = t;
-		$[26] = t8;
-	} else t8 = $[26];
-	let t9;
-	if ($[27] !== blockCount || $[28] !== maxBlocks || $[29] !== minBlocks) {
-		t9 = (minBlocks || maxBlocks) && /* @__PURE__ */ jsxs("div", {
+		$[17] = allowedBlocks;
+		$[18] = content;
+		$[19] = filteredBlocks;
+		$[20] = handleChange;
+		$[21] = hasBlocks;
+		$[22] = t;
+		$[23] = t7;
+	} else t7 = $[23];
+	let t8;
+	if ($[24] !== blockCount || $[25] !== maxBlocks || $[26] !== minBlocks) {
+		t8 = (minBlocks || maxBlocks) && /* @__PURE__ */ jsxs("div", {
 			className: "text-muted-foreground mt-2 text-xs",
 			children: [
 				minBlocks && /* @__PURE__ */ jsxs("span", { children: [
@@ -167,42 +147,42 @@ function BlocksField(t0) {
 				})
 			]
 		});
-		$[27] = blockCount;
-		$[28] = maxBlocks;
-		$[29] = minBlocks;
+		$[24] = blockCount;
+		$[25] = maxBlocks;
+		$[26] = minBlocks;
+		$[27] = t8;
+	} else t8 = $[27];
+	let t9;
+	if ($[28] !== t7 || $[29] !== t8) {
+		t9 = /* @__PURE__ */ jsxs("div", {
+			className: "qa-blocks-field",
+			children: [t7, t8]
+		});
+		$[28] = t7;
+		$[29] = t8;
 		$[30] = t9;
 	} else t9 = $[30];
 	let t10;
-	if ($[31] !== t8 || $[32] !== t9) {
-		t10 = /* @__PURE__ */ jsxs("div", {
-			className: "qa-blocks-field",
-			children: [t8, t9]
-		});
-		$[31] = t8;
-		$[32] = t9;
-		$[33] = t10;
-	} else t10 = $[33];
-	let t11;
-	if ($[34] !== description || $[35] !== disabled || $[36] !== error || $[37] !== label || $[38] !== name || $[39] !== required || $[40] !== t10) {
-		t11 = /* @__PURE__ */ jsx(FieldWrapper, {
+	if ($[31] !== description || $[32] !== disabled || $[33] !== error || $[34] !== label || $[35] !== name || $[36] !== required || $[37] !== t9) {
+		t10 = /* @__PURE__ */ jsx(FieldWrapper, {
 			name,
 			label,
 			description,
 			error,
 			required,
 			disabled,
-			children: t10
+			children: t9
 		});
-		$[34] = description;
-		$[35] = disabled;
-		$[36] = error;
-		$[37] = label;
-		$[38] = name;
-		$[39] = required;
-		$[40] = t10;
-		$[41] = t11;
-	} else t11 = $[41];
-	return t11;
+		$[31] = description;
+		$[32] = disabled;
+		$[33] = error;
+		$[34] = label;
+		$[35] = name;
+		$[36] = required;
+		$[37] = t9;
+		$[38] = t10;
+	} else t10 = $[38];
+	return t10;
 }
 
 //#endregion

package/dist/client/components/fields/json-field.mjs

@@ -339,7 +339,7 @@ function JsonCodeEditor(t0) {
 	let t15;
 	if ($[26] !== parseError) {
 		t15 = parseError && /* @__PURE__ */ jsxs("div", {
-			className: "text-destructive absolute top-2 right-2 flex items-center gap-1 text-xs",
+			className: "text-destructive bg-background/80 absolute top-2 right-2 flex items-center gap-1 px-1 text-xs text-pretty backdrop-blur-sm",
 			children: [/* @__PURE__ */ jsx(Icon, {
 				icon: "ph:warning-circle-fill",
 				className: "size-3"
@@ -448,7 +448,7 @@ function JsonFormEditor(t0) {
 	let t3;
 	if ($[10] !== formContent) {
 		t3 = /* @__PURE__ */ jsx("div", {
-			className: "border p-4",
+			className: "panel-surface p-4",
 			children: formContent
 		});
 		$[10] = formContent;

package/dist/client/components/fields/object-array-field.mjs

@@ -55,7 +55,7 @@ function ItemFieldRenderer(t0) {
 	let readOnly;
 	let required;
 	if ($[4] !== options) {
-		const { label: t2$1, description: t3$1, placeholder: t4$1, required: t5$1, disabled: t6$1, readOnly: t7, hidden, localized: t8, locale: t9, ...t10 } = options;
+		const { label: t2$1, description: t3$1, placeholder: t4$1, required: t5$1, disabled: t6$1, readOnly: t7, hidden: _hidden, localized: t8, locale: t9, ...t10 } = options;
 		label = t2$1;
 		description = t3$1;
 		placeholder = t4$1;
@@ -144,9 +144,9 @@ function ObjectArrayItemFields(t0) {
 		let t1$1;
 		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 			t1$1 = /* @__PURE__ */ jsx("div", {
-				className: "border border-dashed p-4 text-center",
+				className: "py-2",
 				children: /* @__PURE__ */ jsx("p", {
-					className: "text-muted-foreground text-sm",
+					className: "text-muted-foreground text-sm text-pretty",
 					children: "No fields configured for items."
 				})
 			});
@@ -397,9 +397,9 @@ function ObjectArrayField(t0) {
 	let t16;
 	if ($[42] !== t15) {
 		t16 = /* @__PURE__ */ jsx("div", {
-			className: "border border-dashed p-4 text-center",
+			className: "py-2",
 			children: /* @__PURE__ */ jsx("p", {
-				className: "text-muted-foreground text-sm",
+				className: "text-muted-foreground text-sm text-pretty",
 				children: t15
 			})
 		});
@@ -451,7 +451,7 @@ function ObjectArrayField(t0) {
 						children: "*"
 					}),
 					maxItems && /* @__PURE__ */ jsxs("span", {
-						className: "text-muted-foreground ml-2 text-xs",
+						className: "text-muted-foreground ml-2 text-xs tabular-nums",
 						children: [
 							"(",
 							fields.length,
@@ -476,7 +476,7 @@ function ObjectArrayField(t0) {
 	let t20;
 	if ($[65] !== description || $[66] !== resolveText) {
 		t20 = description && /* @__PURE__ */ jsx("p", {
-			className: "text-muted-foreground text-sm",
+			className: "text-muted-foreground text-sm text-pretty",
 			children: resolveText(description)
 		});
 		$[65] = description;
@@ -491,13 +491,13 @@ function ObjectArrayField(t0) {
 			const canMoveUp = orderable && index_1 > 0;
 			const canMoveDown = orderable && index_1 < fields.length - 1;
 			return /* @__PURE__ */ jsxs("div", {
-				className: "border-border bg-card border",
+				className: "panel-surface overflow-hidden",
 				children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex items-center justify-between border-b px-3 py-2",
+					className: "border-border-subtle bg-surface-low flex items-center justify-between border-b px-3 py-2",
 					children: [/* @__PURE__ */ jsxs("div", {
 						className: "flex items-center gap-2",
 						children: [/* @__PURE__ */ jsxs("span", {
-							className: "text-muted-foreground text-xs",
+							className: "text-muted-foreground text-xs tabular-nums",
 							children: ["#", index_1 + 1]
 						}), /* @__PURE__ */ jsx("span", {
 							className: "text-sm font-medium",
@@ -509,35 +509,35 @@ function ObjectArrayField(t0) {
 							orderable && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
 								type: "button",
 								variant: "ghost",
-								size: "icon",
-								className: "h-6 w-6",
+								size: "icon-sm",
+								className: "relative after:absolute after:-inset-1",
 								onClick: () => handleMove(index_1, index_1 - 1),
 								disabled: !canMoveUp || disabled,
 								title: t("field.moveUp"),
 								"aria-label": t("field.moveUp"),
 								children: /* @__PURE__ */ jsx(Icon, {
 									icon: "ph:caret-up",
-									className: "h-3 w-3"
+									className: "size-3.5"
 								})
 							}), /* @__PURE__ */ jsx(Button, {
 								type: "button",
 								variant: "ghost",
-								size: "icon",
-								className: "h-6 w-6",
+								size: "icon-sm",
+								className: "relative after:absolute after:-inset-1",
 								onClick: () => handleMove(index_1, index_1 + 1),
 								disabled: !canMoveDown || disabled,
 								title: t("field.moveDown"),
 								"aria-label": t("field.moveDown"),
 								children: /* @__PURE__ */ jsx(Icon, {
 									icon: "ph:caret-down",
-									className: "h-3 w-3"
+									className: "size-3.5"
 								})
 							})] }),
 							mode !== "inline" && /* @__PURE__ */ jsx(Button, {
 								type: "button",
 								variant: "ghost",
-								size: "icon",
-								className: "h-6 w-6",
+								size: "icon-sm",
+								className: "relative after:absolute after:-inset-1",
 								onClick: () => {
 									setActiveIndex(index_1);
 									setIsOpen(true);
@@ -547,21 +547,21 @@ function ObjectArrayField(t0) {
 								"aria-label": t("common.edit"),
 								children: /* @__PURE__ */ jsx(Icon, {
 									icon: "ph:pencil",
-									className: "h-3 w-3"
+									className: "size-3.5"
 								})
 							}),
 							canRemove && /* @__PURE__ */ jsx(Button, {
 								type: "button",
 								variant: "ghost",
-								size: "icon",
-								className: "h-6 w-6",
+								size: "icon-sm",
+								className: "relative after:absolute after:-inset-1",
 								onClick: () => handleRemove(index_1),
 								disabled,
 								title: t("common.remove"),
 								"aria-label": t("common.remove"),
 								children: /* @__PURE__ */ jsx(Icon, {
 									icon: "ph:trash",
-									className: "h-3 w-3"
+									className: "size-3.5"
 								})
 							})
 						]

package/dist/client/components/fields/object-field.mjs

@@ -229,7 +229,7 @@ function ObjectField(t0) {
 		if (wrapper === "collapsible") {
 			let t11$1;
 			if ($[18] !== className) {
-				t11$1 = cn("qa-object-field border-border bg-card border", className);
+				t11$1 = cn("qa-object-field panel-surface", className);
 				$[18] = className;
 				$[19] = t11$1;
 			} else t11$1 = $[19];
@@ -297,7 +297,7 @@ function ObjectField(t0) {
 				t19 = /* @__PURE__ */ jsx("button", {
 					type: "button",
 					onClick: t12$1,
-					className: "hover:bg-muted flex w-full items-center justify-between p-3 text-left",
+					className: "hover:bg-muted flex min-h-10 w-full items-center justify-between p-3 text-left transition-colors active:scale-[0.96]",
 					disabled,
 					children: t18
 				});
@@ -398,7 +398,7 @@ function ObjectField(t0) {
 	if (wrapper === "collapsible" || layout === "collapsible") {
 		let t7$1;
 		if ($[68] !== className) {
-			t7$1 = cn("qa-object-field border-border bg-card border", className);
+			t7$1 = cn("qa-object-field panel-surface", className);
 			$[68] = className;
 			$[69] = t7$1;
 		} else t7$1 = $[69];
@@ -466,7 +466,7 @@ function ObjectField(t0) {
 			t15 = /* @__PURE__ */ jsx("button", {
 				type: "button",
 				onClick: t8$1,
-				className: "hover:bg-muted flex w-full items-center justify-between p-3 text-left",
+				className: "hover:bg-muted flex min-h-10 w-full items-center justify-between p-3 text-left transition-colors active:scale-[0.96]",
 				disabled,
 				children: t14
 			});
@@ -480,7 +480,7 @@ function ObjectField(t0) {
 			t16 = !isCollapsed && /* @__PURE__ */ jsxs("div", {
 				className: "border-t p-4",
 				children: [description && /* @__PURE__ */ jsx("p", {
-					className: "text-muted-foreground mb-4 text-sm",
+					className: "text-muted-foreground mb-4 text-sm text-pretty",
 					children: resolveText(description)
 				}), /* @__PURE__ */ jsx(NestedFieldsLayout, {
 					fieldEntries,

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

@@ -1,4 +1,5 @@
 import { useResolveText, useTranslation } from "../../../../i18n/hooks.mjs";
+import { cn } from "../../../../lib/utils.mjs";
 import { Button } from "../../../ui/button.mjs";
 import { Skeleton } from "../../../ui/skeleton.mjs";
 import { formatCellValue, formatColumnHeader, getImageUrl, getItemDisplayValue } from "./types.mjs";
@@ -35,10 +36,16 @@ function CardsSkeleton(t0) {
 	let t6;
 	if ($[2] !== hasImage || $[3] !== skeletonKeys) {
 		t6 = skeletonKeys.map((key) => /* @__PURE__ */ jsxs("div", {
-			className: "border-border bg-card overflow-hidden border",
+			className: "panel-surface overflow-hidden",
 			children: [hasImage && /* @__PURE__ */ jsx(Skeleton, { className: "aspect-video w-full" }), /* @__PURE__ */ jsxs("div", {
 				className: "space-y-2 p-3",
-				children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-3/4 rounded" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2 rounded" })]
+				children: [/* @__PURE__ */ jsx(Skeleton, {
+					variant: "text",
+					className: "h-5 w-3/4"
+				}), /* @__PURE__ */ jsx(Skeleton, {
+					variant: "text",
+					className: "h-4 w-1/2"
+				})]
 			})]
 		}, key));
 		$[2] = hasImage;
@@ -130,13 +137,13 @@ function CardsDisplay(t0) {
 				const subtitle = getSubtitle(item_3);
 				const meta = getMeta(item_3);
 				const cardContent = /* @__PURE__ */ jsxs("div", {
-					className: "border-border bg-card hover:bg-card h-full overflow-hidden border transition-colors",
+					className: cn("panel-surface h-full overflow-hidden", (editable || !!actions?.onEdit || linkToDetail) && "hover:border-border hover:bg-accent/30 hover:text-foreground"),
 					children: [image && /* @__PURE__ */ jsx("div", {
 						className: "bg-muted aspect-video",
 						children: /* @__PURE__ */ jsx("img", {
 							src: image,
 							alt: getTitle(item_3),
-							className: "h-full w-full object-cover"
+							className: "image-outline h-full w-full object-cover"
 						})
 					}), /* @__PURE__ */ jsxs("div", {
 						className: "p-3",
@@ -156,8 +163,8 @@ function CardsDisplay(t0) {
 								children: [actions?.onEdit && /* @__PURE__ */ jsx(Button, {
 									type: "button",
 									variant: "ghost",
-									size: "icon",
-									className: "h-7 w-7",
+									size: "icon-xs",
+									className: "relative after:absolute after:-inset-1",
 									onClick: (e) => {
 										e.preventDefault();
 										e.stopPropagation();
@@ -171,8 +178,8 @@ function CardsDisplay(t0) {
 								}), actions?.onRemove && /* @__PURE__ */ jsx(Button, {
 									type: "button",
 									variant: "ghost",
-									size: "icon",
-									className: "h-7 w-7",
+									size: "icon-xs",
+									className: "relative after:absolute after:-inset-1",
 									onClick: (e_0) => {
 										e_0.preventDefault();
 										e_0.stopPropagation();
@@ -188,7 +195,7 @@ function CardsDisplay(t0) {
 						}), meta.length > 0 && /* @__PURE__ */ jsx("div", {
 							className: "text-muted-foreground mt-2 flex flex-wrap gap-x-3 gap-y-1 text-xs",
 							children: meta.map((m_0) => /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsxs("span", {
-								className: "font-medium",
+								className: "font-chrome chrome-meta mr-1 font-medium",
 								children: [resolveText(m_0.label), ":"]
 							}), m_0.value] }, String(m_0.label)))
 						})]

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

@@ -37,7 +37,10 @@ function ChipsSkeleton(t0) {
 	return t3;
 }
 function _temp2(key) {
-	return /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-20 rounded-full" }, key);
+	return /* @__PURE__ */ jsx(Skeleton, {
+		variant: "chip",
+		className: "h-6 w-20"
+	}, key);
 }
 function _temp() {
 	return crypto.randomUUID();
@@ -73,7 +76,7 @@ function ChipsDisplay(t0) {
 			t7$1 = (item) => {
 				const displayText = getItemDisplayValue(item);
 				if (editable && (actions?.onEdit || actions?.onRemove)) return /* @__PURE__ */ jsxs("div", {
-					className: "bg-secondary inline-flex items-center gap-1 border py-1 pr-1 pl-2",
+					className: "qa-chips-display__chip item-surface border-border bg-secondary text-secondary-foreground inline-flex min-h-8 items-center gap-1 py-0.5 pr-1 pl-2",
 					children: [
 						iconElement,
 						/* @__PURE__ */ jsx("span", {
@@ -83,8 +86,8 @@ function ChipsDisplay(t0) {
 						actions?.onEdit && /* @__PURE__ */ jsx(Button, {
 							type: "button",
 							variant: "ghost",
-							size: "icon",
-							className: "h-5 w-5",
+							size: "icon-xs",
+							className: "relative after:absolute after:-inset-1",
 							onClick: () => actions.onEdit?.(item),
 							"aria-label": t("field.editItem"),
 							children: /* @__PURE__ */ jsx(Icon, {
@@ -95,8 +98,8 @@ function ChipsDisplay(t0) {
 						actions?.onRemove && /* @__PURE__ */ jsx(Button, {
 							type: "button",
 							variant: "ghost",
-							size: "icon",
-							className: "h-5 w-5",
+							size: "icon-xs",
+							className: "relative after:absolute after:-inset-1",
 							onClick: () => actions.onRemove?.(item),
 							"aria-label": t("field.removeItem"),
 							children: /* @__PURE__ */ jsx(Icon, {
@@ -109,10 +112,10 @@ function ChipsDisplay(t0) {
 				if (actions?.onEdit) return /* @__PURE__ */ jsx("button", {
 					type: "button",
 					onClick: () => actions.onEdit?.(item),
-					className: "inline-flex",
+					className: "focus-visible:ring-ring/40 inline-flex rounded-md focus-visible:ring-2 focus-visible:outline-none active:scale-[0.96]",
 					children: /* @__PURE__ */ jsxs(Badge, {
 						variant: "secondary",
-						className: "hover:bg-secondary cursor-pointer gap-1",
+						className: "item-surface border-border hover:bg-accent hover:text-accent-foreground cursor-pointer gap-1",
 						children: [
 							iconElement,
 							displayText,
@@ -126,16 +129,16 @@ function ChipsDisplay(t0) {
 				if (linkToDetail && actions?.onNavigate) return /* @__PURE__ */ jsx(CollectionEditLink, {
 					collection,
 					id: item.id,
-					className: "inline-flex",
+					className: "focus-visible:ring-ring/40 inline-flex rounded-md focus-visible:ring-2 focus-visible:outline-none active:scale-[0.96]",
 					children: /* @__PURE__ */ jsxs(Badge, {
 						variant: "secondary",
-						className: "hover:bg-secondary cursor-pointer gap-1",
+						className: "item-surface border-border hover:bg-accent hover:text-accent-foreground cursor-pointer gap-1",
 						children: [iconElement, displayText]
 					})
 				}, item.id);
 				return /* @__PURE__ */ jsxs(Badge, {
 					variant: "secondary",
-					className: "gap-1",
+					className: "item-surface border-border gap-1",
 					children: [iconElement, displayText]
 				}, item.id);
 			};
@@ -160,7 +163,7 @@ function ChipsDisplay(t0) {
 	let t7;
 	if ($[19] !== t6) {
 		t7 = /* @__PURE__ */ jsx("div", {
-			className: "flex flex-wrap gap-2",
+			className: "qa-chips-display flex flex-wrap gap-2",
 			children: t6
 		});
 		$[19] = t6;