@fluid-app/portal-sdk 0.1.172 → 0.1.174

package/dist/{ContactsScreen-Bufy88vw.cjs → ContactsScreen-RK8gQwUZ.cjs}

@@ -41,6 +41,67 @@ function StatusBadge({ status, label, className }) {
 	});
 }
 //#endregion
+//#region ../../contacts/core/src/contacts-api-context.ts
+const ContactsApiContext = (0, react.createContext)(null);
+const ContactsApiProvider = ContactsApiContext.Provider;
+function useContactsDomainApi() {
+	const api = (0, react.useContext)(ContactsApiContext);
+	if (!api) throw new Error("useContactsDomainApi must be used within a ContactsApiProvider");
+	return api;
+}
+function useContactsCrud() {
+	return useContactsDomainApi().contacts;
+}
+function useNotesApi() {
+	return useContactsDomainApi().notes;
+}
+function useTasksApi() {
+	return useContactsDomainApi().tasks;
+}
+/** Returns GroupsApi if the provider supplies one, otherwise null. */
+function useGroupsApi() {
+	return useContactsDomainApi().groups ?? null;
+}
+//#endregion
+//#region ../../contacts/core/src/query-keys.ts
+const CONTACTS_QUERY_KEYS = {
+	all: (prefix) => [prefix],
+	list: (prefix) => [...CONTACTS_QUERY_KEYS.all(prefix), "list"],
+	detail: (prefix, id) => [
+		...CONTACTS_QUERY_KEYS.all(prefix),
+		"detail",
+		id
+	]
+};
+const contactsKeys = {
+	activities: (contactId) => [
+		"portal-contacts",
+		"activities",
+		contactId
+	],
+	tasks: (contactId) => [
+		"portal-contacts",
+		"tasks",
+		contactId
+	],
+	notes: (contactId) => [
+		"portal-contacts",
+		"notes",
+		contactId
+	],
+	orders: (contactId) => [
+		"rep-contacts",
+		"orders",
+		contactId
+	],
+	subscriptionOrders: (contactId) => [
+		"rep-contacts",
+		"subscription-orders",
+		contactId
+	],
+	groups: () => ["portal-contacts", "groups"]
+};
+//#endregion
 //#region ../../contacts/ui/src/shared/components/contacts/allContacts/contactsTable.tsx
 function getInitials(fullName) {
 	const trimmed = fullName?.trim();
@@ -137,11 +198,11 @@ function resolveContactGroupLabels(contact) {
 	if (lead && String(lead).trim()) return [String(lead).replaceAll("_", " ")];
 	return [];
 }
-function RepContactCard({ contact, selected, onToggleSelect, onRowClick, onEditContact, setSelectedContacts, setOpenDeleteModal }) {
+function RepContactCard({ contact, selected, onToggleSelect, onRowClick, onEditContact, setSelectedContacts, setOpenDeleteModal, groupsByName }) {
 	const groupLabels = resolveContactGroupLabels(contact);
 	const groupTitle = groupLabels.length > 0 ? groupLabels.join(", ") : void 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Card, {
-		className: require_src.cn("border-border hover:bg-accent/30 h-[100px] w-full flex-col items-start justify-center gap-0 py-0 shadow-sm transition-colors", selected && "bg-accent/40 border-primary/25 ring-primary/20 ring-1"),
+		className: require_src.cn("border-border hover:bg-accent/30 min-h-[100px] w-full flex-col items-start justify-center gap-0 py-3 shadow-sm transition-colors sm:py-0", selected && "bg-accent/40 border-primary/25 ring-primary/20 ring-1"),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.CardContent, {
 			className: "w-full px-3 py-0",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -162,46 +223,54 @@ function RepContactCard({ contact, selected, onToggleSelect, onRowClick, onEditC
 						type: "button",
 						className: "text-foreground focus-visible:ring-ring flex min-w-0 flex-1 items-center gap-2 rounded-md text-left outline-none focus-visible:ring-2 sm:gap-3",
 						onClick: () => onRowClick?.(contact),
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Avatar, {
-								className: "size-12 shrink-0",
-								children: [contact.avatar_url ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AvatarImage, {
-									src: contact.avatar_url,
-									alt: contact.full_name || "Contact"
-								}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AvatarFallback, {
-									className: "border-border text-foreground bg-accent ring-border/80 text-xs font-semibold ring-1",
-									children: getInitials(contact.full_name)
-								})]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "max-w-[32%] min-w-0 shrink truncate text-sm leading-tight font-semibold sm:max-w-none sm:flex-[1.15]",
-								title: contact.full_name,
-								children: contact.full_name || "—"
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "text-muted-foreground min-w-0 flex-[1.35] truncate text-xs leading-tight",
-								title: contact.email ?? void 0,
-								children: contact.email || "—"
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "text-muted-foreground min-w-0 flex-[0.95] truncate text-xs leading-tight",
-								title: contact.phone ?? void 0,
-								children: contact.phone || "—"
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-								className: "text-muted-foreground flex min-w-0 flex-[0.95] items-center gap-1 text-xs leading-tight",
-								title: groupTitle,
-								children: [groupLabels.length > 0 ? groupLabels.slice(0, 2).map((label, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Badge, {
-									variant: "secondary",
-									className: "max-w-[min(100%,10rem)] shrink truncate font-normal capitalize",
-									title: label,
-									children: label
-								}, `${contact.id}-group-${index}-${label}`)) : "—", groupLabels.length > 2 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-									className: "text-muted-foreground shrink-0 text-[10px]",
-									children: ["+", groupLabels.length - 2]
-								})]
-							})
-						]
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Avatar, {
+							className: "size-12 shrink-0",
+							children: [contact.avatar_url ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AvatarImage, {
+								src: contact.avatar_url,
+								alt: contact.full_name || "Contact"
+							}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AvatarFallback, {
+								className: "border-border text-foreground bg-accent ring-border/80 text-xs font-semibold ring-1",
+								children: getInitials(contact.full_name)
+							})]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex min-w-0 flex-1 flex-col gap-0.5 sm:flex-row sm:items-center sm:gap-3",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "min-w-0 truncate text-sm leading-tight font-semibold sm:flex-[1.15]",
+									title: contact.full_name,
+									children: contact.full_name || "—"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "text-muted-foreground min-w-0 truncate text-xs leading-tight sm:flex-[1.35]",
+									title: contact.email ?? void 0,
+									children: contact.email || "—"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "text-muted-foreground min-w-0 truncate text-xs leading-tight sm:flex-[0.95]",
+									title: contact.phone ?? void 0,
+									children: contact.phone || "—"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: "text-muted-foreground flex min-w-0 flex-wrap items-center gap-1 text-xs leading-tight sm:flex-[0.95] sm:flex-nowrap",
+									title: groupTitle,
+									children: [groupLabels.length > 0 ? groupLabels.slice(0, 2).map((label, index) => {
+										const group = groupsByName.get(label);
+										return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+											className: "text-foreground border-border inline-flex max-w-[min(100%,10rem)] shrink items-center gap-1 truncate rounded-full border px-2 py-0.5 font-normal capitalize",
+											style: { backgroundColor: group?.avatar_background ?? "var(--color-muted)" },
+											title: label,
+											children: [group?.avatar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: group.avatar }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												className: "truncate",
+												children: label
+											})]
+										}, `${contact.id}-group-${index}-${label}`);
+									}) : "—", groupLabels.length > 2 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+										className: "text-muted-foreground shrink-0 text-[10px]",
+										children: ["+", groupLabels.length - 2]
+									})]
+								})
+							]
+						})]
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "flex shrink-0 items-center",
@@ -234,11 +303,6 @@ function RepContactCard({ contact, selected, onToggleSelect, onRowClick, onEditC
 		})
 	});
 }
-const TABS = [
-	"All",
-	"Leads",
-	"Customers"
-];
 function getSortComparable(contact, field) {
 	if (field === "name") return contact.full_name ?? "";
 	return contact.email ?? "";
@@ -253,9 +317,20 @@ const CONTACT_SORT_COLUMNS = [{
 }];
 function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setOpenDeleteModal, onEditContact, onRowClick, resetKey, tableLayout }) {
 	const isMemberLayout = tableLayout === "members";
+	const groupsApi = useGroupsApi();
+	const { data: availableGroups = [] } = (0, _tanstack_react_query.useQuery)({
+		queryKey: contactsKeys.groups(),
+		queryFn: () => groupsApi.listGroups(),
+		enabled: !!groupsApi && isMemberLayout,
+		select: (data) => data.groups
+	});
+	const groupsByName = (0, react.useMemo)(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const group of availableGroups) map.set(group.name, group);
+		return map;
+	}, [availableGroups]);
 	const [currentPage, setCurrentPage] = (0, react.useState)(1);
 	const [searchTerm, setSearchTerm] = (0, react.useState)("");
-	const [activeTab, setActiveTab] = (0, react.useState)("All");
 	const [sortValue, setSortValue] = (0, react.useState)("name_asc");
 	const [selectedIds, setSelectedIds] = (0, react.useState)(/* @__PURE__ */ new Set());
 	const parsedSort = (0, react.useMemo)(() => {
@@ -268,23 +343,17 @@ function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setO
 	(0, react.useEffect)(() => {
 		setCurrentPage(1);
 		setSelectedIds(/* @__PURE__ */ new Set());
-	}, [
-		searchTerm,
-		activeTab,
-		sortValue
-	]);
+	}, [searchTerm, sortValue]);
 	(0, react.useEffect)(() => {
 		setSelectedIds(/* @__PURE__ */ new Set());
 	}, [currentPage]);
 	(0, react.useEffect)(() => {
 		setSelectedIds(/* @__PURE__ */ new Set());
 	}, [resetKey]);
-	const resolvedStatus = activeTab === "Leads" ? "lead" : activeTab === "Customers" ? "customer" : null;
 	const { data, isLoading } = (0, _tanstack_react_query.useQuery)({
 		queryKey: [queryKeyPrefix, {
 			searchTerm,
 			currentPage,
-			activeTab,
 			sortField: parsedSort.id,
 			sortDesc: parsedSort.desc
 		}],
@@ -292,7 +361,6 @@ function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setO
 			search_query: searchTerm || void 0,
 			page: currentPage,
 			per_page: PAGE_SIZE,
-			...resolvedStatus ? { status: resolvedStatus } : {},
 			sort_by: parsedSort.id,
 			sort_direction: parsedSort.desc ? "desc" : "asc"
 		}),
@@ -348,20 +416,9 @@ function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setO
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "border-border overflow-hidden rounded-lg border shadow-sm",
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex flex-col gap-2 p-3 sm:flex-row sm:items-center sm:justify-between",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.ToggleGroup, {
-					type: "single",
-					value: activeTab,
-					onValueChange: (v) => {
-						if (v) setActiveTab(v);
-					},
-					variant: "ghost",
-					children: TABS.map((tab) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.ToggleGroupItem, {
-						value: tab,
-						children: tab
-					}, tab))
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex justify-end p-3",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "w-full max-w-sm",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchSort.SearchSort, {
 						searchValue: searchTerm,
@@ -377,7 +434,7 @@ function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setO
 						sortValue,
 						onSortChange: setSortValue
 					})
-				})]
+				})
 			}),
 			isMemberLayout ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "space-y-3 p-3",
@@ -448,7 +505,8 @@ function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setO
 					onRowClick,
 					onEditContact,
 					setSelectedContacts,
-					setOpenDeleteModal
+					setOpenDeleteModal,
+					groupsByName
 				}, contact.id))]
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "block md:hidden",
@@ -690,45 +748,6 @@ function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setO
 	});
 }
 //#endregion
-//#region ../../contacts/core/src/query-keys.ts
-const CONTACTS_QUERY_KEYS = {
-	all: (prefix) => [prefix],
-	list: (prefix) => [...CONTACTS_QUERY_KEYS.all(prefix), "list"],
-	detail: (prefix, id) => [
-		...CONTACTS_QUERY_KEYS.all(prefix),
-		"detail",
-		id
-	]
-};
-const contactsKeys = {
-	activities: (contactId) => [
-		"portal-contacts",
-		"activities",
-		contactId
-	],
-	tasks: (contactId) => [
-		"portal-contacts",
-		"tasks",
-		contactId
-	],
-	notes: (contactId) => [
-		"portal-contacts",
-		"notes",
-		contactId
-	],
-	orders: (contactId) => [
-		"rep-contacts",
-		"orders",
-		contactId
-	],
-	subscriptionOrders: (contactId) => [
-		"rep-contacts",
-		"subscription-orders",
-		contactId
-	],
-	groups: () => ["portal-contacts", "groups"]
-};
-//#endregion
 //#region ../../contacts/ui/src/shared/components/contacts/allContacts/contactsPage.tsx
 function ContactsPage({ listContacts, deleteContacts, queryKeyPrefix, header, onEditContact, onRowClick, tableLayout }) {
 	const [openDeleteModal, setOpenDeleteModal] = (0, react.useState)(false);
@@ -1091,7 +1110,7 @@ const ContactInfoCard = ({ contact, className, onEdit, showActions = false, onCr
 				renderer: renderBackground
 			})
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "relative z-10 p-6",
+			className: "relative p-6",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "mb-5 flex items-center justify-between",
@@ -1103,7 +1122,7 @@ const ContactInfoCard = ({ contact, className, onEdit, showActions = false, onCr
 						onClick: onEdit,
 						disabled: isDimmed,
 						className: "bg-card/90 text-card-foreground hover:bg-card rounded-lg px-4 py-1.5 text-sm font-medium shadow-sm backdrop-blur-sm transition-colors disabled:opacity-60",
-						children: isDimmed ? "Editing…" : "Edit"
+						children: "Edit"
 					})]
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -1281,7 +1300,7 @@ const ContactDetailsForm = ({ className, countries = DEFAULT_COUNTRIES, renderAv
 				onChange: (url) => setValue("avatar_url", url ?? "", { shouldDirty: true })
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "grid grid-cols-1 gap-6 md:grid-cols-2",
+			className: "grid grid-cols-1 gap-6 lg:grid-cols-2",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.FormField, {
 					control,
@@ -1295,7 +1314,7 @@ const ContactDetailsForm = ({ className, countries = DEFAULT_COUNTRIES, renderAv
 							placeholder: "Enter first name",
 							...field,
 							value: field.value ?? "",
-							className: "ring-input bg-white shadow-sm"
+							className: "ring-input"
 						}) }),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.FormMessage, {})
 					] })
@@ -1312,7 +1331,7 @@ const ContactDetailsForm = ({ className, countries = DEFAULT_COUNTRIES, renderAv
 							placeholder: "Enter last name",
 							...field,
 							value: field.value ?? "",
-							className: "ring-input bg-white shadow-sm"
+							className: "ring-input"
 						}) }),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.FormMessage, {})
 					] })
@@ -1330,7 +1349,7 @@ const ContactDetailsForm = ({ className, countries = DEFAULT_COUNTRIES, renderAv
 							type: "email",
 							...field,
 							value: field.value ?? "",
-							className: "ring-input bg-white shadow-sm"
+							className: "ring-input"
 						}) }),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.FormMessage, {})
 					] })
@@ -1347,7 +1366,7 @@ const ContactDetailsForm = ({ className, countries = DEFAULT_COUNTRIES, renderAv
 							placeholder: "Enter phone number",
 							...field,
 							value: field.value ?? "",
-							className: "ring-input bg-white shadow-sm"
+							className: "ring-input"
 						}) }),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.FormMessage, {})
 					] })
@@ -1364,7 +1383,7 @@ const ContactDetailsForm = ({ className, countries = DEFAULT_COUNTRIES, renderAv
 							value: field.value ?? "",
 							onValueChange: field.onChange,
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.FormControl, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.SelectTrigger, {
-								className: "w-full bg-white shadow-sm",
+								className: "w-full",
 								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.SelectValue, { placeholder: "Select status" })
 							}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.SelectContent, {
 								position: "popper",
@@ -1382,7 +1401,7 @@ const ContactDetailsForm = ({ className, countries = DEFAULT_COUNTRIES, renderAv
 					control,
 					name: "address",
 					render: ({ field }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.FormItem, {
-						className: "col-span-2",
+						className: "lg:col-span-2",
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.FormLabel, {
 								className: "font-inter text-foreground font-medium",
@@ -1392,7 +1411,7 @@ const ContactDetailsForm = ({ className, countries = DEFAULT_COUNTRIES, renderAv
 								placeholder: "Enter street address",
 								...field,
 								value: field.value ?? "",
-								className: "ring-input bg-white shadow-sm"
+								className: "ring-input"
 							}) }),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.FormMessage, {})
 						]
@@ -1410,7 +1429,7 @@ const ContactDetailsForm = ({ className, countries = DEFAULT_COUNTRIES, renderAv
 							placeholder: "Enter city",
 							...field,
 							value: field.value ?? "",
-							className: "ring-input bg-white shadow-sm"
+							className: "ring-input"
 						}) }),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.FormMessage, {})
 					] })
@@ -1427,7 +1446,7 @@ const ContactDetailsForm = ({ className, countries = DEFAULT_COUNTRIES, renderAv
 							placeholder: "Enter state or province",
 							...field,
 							value: field.value ?? "",
-							className: "ring-input bg-white shadow-sm"
+							className: "ring-input"
 						}) }),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.FormMessage, {})
 					] })
@@ -1444,7 +1463,7 @@ const ContactDetailsForm = ({ className, countries = DEFAULT_COUNTRIES, renderAv
 							placeholder: "Enter postal code",
 							...field,
 							value: field.value ?? "",
-							className: "ring-input bg-white shadow-sm"
+							className: "ring-input"
 						}) }),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.FormMessage, {})
 					] })
@@ -1461,7 +1480,7 @@ const ContactDetailsForm = ({ className, countries = DEFAULT_COUNTRIES, renderAv
 							value: field.value ?? "",
 							onValueChange: field.onChange,
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.FormControl, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.SelectTrigger, {
-								className: "w-full bg-white shadow-sm",
+								className: "w-full",
 								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.SelectValue, { placeholder: "Select country" })
 							}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.SelectContent, {
 								position: "popper",
@@ -1480,28 +1499,6 @@ const ContactDetailsForm = ({ className, countries = DEFAULT_COUNTRIES, renderAv
 	});
 };
 //#endregion
-//#region ../../contacts/core/src/contacts-api-context.ts
-const ContactsApiContext = (0, react.createContext)(null);
-const ContactsApiProvider = ContactsApiContext.Provider;
-function useContactsDomainApi() {
-	const api = (0, react.useContext)(ContactsApiContext);
-	if (!api) throw new Error("useContactsDomainApi must be used within a ContactsApiProvider");
-	return api;
-}
-function useContactsCrud() {
-	return useContactsDomainApi().contacts;
-}
-function useNotesApi() {
-	return useContactsDomainApi().notes;
-}
-function useTasksApi() {
-	return useContactsDomainApi().tasks;
-}
-/** Returns GroupsApi if the provider supplies one, otherwise null. */
-function useGroupsApi() {
-	return useContactsDomainApi().groups ?? null;
-}
-//#endregion
 //#region ../../contacts/ui/src/portal/hooks/notes/use-delete-contact-note.ts
 function useDeleteContactNote(contactId, options) {
 	const queryClient = (0, _tanstack_react_query.useQueryClient)();
@@ -1697,14 +1694,14 @@ function NoteTaskEditor({ titlePlaceholder = "New Note", bodyPlaceholder = "Star
 		fireOnChange();
 	}, [dueDate]);
 	const buttonBase = "flex h-7 w-7 items-center justify-center rounded text-xs transition-colors";
-	const buttonActive = "bg-gray-100 text-primary";
-	const buttonInactive = "text-gray-400 hover:bg-gray-50";
-	const toolbarSeparator = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "mx-1 h-5 w-px bg-gray-200" });
+	const buttonActive = "bg-muted text-primary";
+	const buttonInactive = "text-muted-foreground hover:bg-muted/50";
+	const toolbarSeparator = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-border mx-1 h-5 w-px" });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: require_src.cn("border-border flex flex-col overflow-hidden rounded-lg border", className),
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "border-border flex items-center gap-0.5 border-b bg-gray-50 px-2 py-1.5",
+				className: "border-border bg-muted/50 flex items-center gap-0.5 border-b px-2 py-1.5",
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
@@ -1793,7 +1790,7 @@ function NoteTaskEditor({ titlePlaceholder = "New Note", bodyPlaceholder = "Star
 					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 						type: "button",
 						onClick: () => dateInputRef.current?.showPicker(),
-						className: "flex h-7 cursor-pointer items-center gap-1 rounded px-2 text-xs font-medium text-gray-400 transition-colors hover:bg-gray-50 hover:text-gray-600",
+						className: "text-muted-foreground hover:bg-muted hover:text-foreground flex h-7 cursor-pointer items-center gap-1 rounded px-2 text-xs font-medium transition-colors",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Calendar, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Due date" })]
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 						ref: dateInputRef,
@@ -1823,7 +1820,7 @@ function NoteTaskEditor({ titlePlaceholder = "New Note", bodyPlaceholder = "Star
 
         .ProseMirror h1.is-empty::before,
         .ProseMirror p.is-empty::before {
-          color: #9ca3af;
+          color: var(--color-muted-foreground);
           content: attr(data-placeholder);
           float: left;
           height: 0;
@@ -1921,7 +1918,7 @@ function NoteTaskModal({ open, onOpenChange, mode, type, initialTitle = "", init
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 									type: "button",
 									onClick: () => dateInputRef.current?.showPicker(),
-									className: "text-muted-foreground hover:text-foreground inline-flex cursor-pointer items-center gap-1.5 rounded-md px-2.5 py-1.5 text-sm font-medium transition-colors hover:bg-gray-50",
+									className: "text-muted-foreground hover:text-foreground hover:bg-muted inline-flex cursor-pointer items-center gap-1.5 rounded-md px-2.5 py-1.5 text-sm font-medium transition-colors",
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Calendar, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Add due date" })]
 								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 									ref: dateInputRef,
@@ -1980,7 +1977,7 @@ function EmptyState$3({ onCreateNote }) {
 					className: "flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-amber-100 to-yellow-100",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.StickyNote, { className: "h-9 w-9 text-amber-500" })
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "absolute -right-2 -bottom-1 flex h-9 w-9 items-center justify-center rounded-full border-2 border-white bg-gradient-to-br from-orange-100 to-red-100 shadow-sm",
+					className: "border-background absolute -right-2 -bottom-1 flex h-9 w-9 items-center justify-center rounded-full border-2 bg-gradient-to-br from-orange-100 to-red-100 shadow-sm",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pen, { className: "h-4 w-4 text-orange-500" })
 				})]
 			}),
@@ -2316,7 +2313,7 @@ function EmptyState$2({ onCreateTask }) {
 					className: "flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-teal-100 to-emerald-100",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ClipboardList, { className: "h-9 w-9 text-teal-500" })
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "absolute -right-2 -bottom-1 flex h-9 w-9 items-center justify-center rounded-full border-2 border-white bg-gradient-to-br from-blue-100 to-indigo-100 shadow-sm",
+					className: "border-background absolute -right-2 -bottom-1 flex h-9 w-9 items-center justify-center rounded-full border-2 bg-gradient-to-br from-blue-100 to-indigo-100 shadow-sm",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.SquareCheckBig, { className: "h-4 w-4 text-blue-500" })
 				})]
 			}),
@@ -2649,7 +2646,7 @@ function GroupsSection({ contactTags, availableGroups = [], onManageGroups, onAd
 		return availableGroups.find((g) => g.name === tagName);
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_src.cn("rounded-lg border bg-white p-4 shadow-xs transition-all hover:shadow-md", disabled && "pointer-events-none opacity-45 select-none"),
+		className: require_src.cn("bg-card rounded-lg border p-4 shadow-xs transition-all hover:shadow-md", disabled && "pointer-events-none opacity-45 select-none"),
 		"aria-disabled": disabled || void 0,
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -2668,10 +2665,10 @@ function GroupsSection({ contactTags, availableGroups = [], onManageGroups, onAd
 				className: "flex flex-wrap gap-2",
 				children: contactTags.map((tag) => {
 					const group = getGroupDetails(tag);
-					const backgroundColor = group?.avatar_background ?? "#F3F4F6";
+					const backgroundColor = group?.avatar_background ?? "var(--color-muted)";
 					const emoji = group?.avatar;
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: "text-foreground inline-flex items-center gap-2 rounded-full border border-gray-100 px-3 py-1.5 text-xs",
+						className: "text-foreground border-border inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs",
 						style: { backgroundColor },
 						children: [
 							emoji && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: emoji }),
@@ -2703,7 +2700,7 @@ function GroupsSection({ contactTags, availableGroups = [], onManageGroups, onAd
 						className: "flex cursor-pointer items-center gap-3",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-sm",
-							style: { backgroundColor: group.avatar_background ?? "#F3F4F6" },
+							style: { backgroundColor: group.avatar_background ?? "var(--color-muted)" },
 							children: group.avatar
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: "flex-1 truncate text-sm",
@@ -2766,14 +2763,14 @@ function ManageGroupsModal({ open, onOpenChange, contactName, currentTags, avail
 										}),
 										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 											className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-lg",
-											style: { backgroundColor: group.avatar_background ?? "#F3F4F6" },
+											style: { backgroundColor: group.avatar_background ?? "var(--color-muted)" },
 											children: group.avatar
 										}),
 										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 											className: "text-foreground min-w-0 flex-1 truncate text-sm font-medium",
 											children: group.name
 										}),
-										isSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-4 w-4 shrink-0 text-green-600" })
+										isSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "text-primary h-4 w-4 shrink-0" })
 									]
 								}, group.id);
 							})
@@ -3133,11 +3130,11 @@ function RepContactDetailView({ contact, contactId, countryOptions = DEFAULT_COU
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "flex h-full flex-col",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "mx-auto w-full flex-1 overflow-hidden",
+			className: "mx-auto w-full flex-1 lg:overflow-hidden",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex h-full gap-6 px-6 py-8",
+				className: "flex flex-col gap-6 px-4 py-4 lg:h-full lg:flex-row lg:px-6 lg:py-8",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "w-80 space-y-6 overflow-y-auto",
+					className: require_src.cn("w-full space-y-6 lg:w-80 lg:overflow-y-auto", isEditingProfile && "hidden lg:block"),
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContactInfoCard, {
 						contact: contactInfo,
 						isDimmed: isEditingProfile,
@@ -3161,15 +3158,15 @@ function RepContactDetailView({ contact, contactId, countryOptions = DEFAULT_COU
 						disabled: isEditingProfile
 					})]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex flex-1 flex-col overflow-hidden",
+					className: "flex flex-1 flex-col lg:overflow-hidden",
 					children: [isEditingProfile ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-2",
+						className: "flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between sm:gap-x-4 sm:gap-y-2",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "flex min-w-0 items-center gap-1",
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 								type: "button",
 								onClick: () => setActiveTab("Tasks"),
-								className: "text-muted-foreground hover:bg-muted hover:text-foreground flex h-9 w-9 shrink-0 items-center justify-center rounded-md transition-colors",
+								className: "text-muted-foreground hover:bg-muted hover:text-foreground hidden h-9 w-9 shrink-0 items-center justify-center rounded-md transition-colors sm:flex",
 								"aria-label": "Back to Tasks",
 								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowLeft, { className: "h-4 w-4" })
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
@@ -3177,17 +3174,21 @@ function RepContactDetailView({ contact, contactId, countryOptions = DEFAULT_COU
 								children: ["Editing ", fullName]
 							})]
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "flex shrink-0 items-center gap-3",
+							className: "flex w-full flex-col gap-2 sm:w-auto sm:shrink-0 sm:flex-row sm:items-center sm:gap-3",
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
 								type: "button",
 								variant: "secondary",
 								onClick: () => setActiveTab("Tasks"),
+								disabled: isSubmitting,
+								className: "w-full sm:w-auto",
 								children: "Cancel"
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
 								type: "button",
 								onClick: onSave,
 								disabled: !isDirty || isSubmitting,
-								children: isSubmitting ? "Updating…" : "Update Contact"
+								"aria-busy": isSubmitting,
+								className: "w-full sm:w-auto",
+								children: [isSubmitting && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Spinner, { className: "size-4" }), isSubmitting ? "Saving" : "Update Contact"]
 							})]
 						})]
 					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -3199,7 +3200,7 @@ function RepContactDetailView({ contact, contactId, countryOptions = DEFAULT_COU
 							children: tab
 						}, tab))
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "flex-1 overflow-y-auto pt-6",
+						className: "flex-1 pt-6 lg:overflow-y-auto",
 						children: [
 							activeTab === "Tasks" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TaskList, {
 								tasks,
@@ -4606,4 +4607,4 @@ Object.defineProperty(exports, "contactsScreenPropertySchema", {
 	}
 });
 
-//# sourceMappingURL=ContactsScreen-Bufy88vw.cjs.map
+//# sourceMappingURL=ContactsScreen-RK8gQwUZ.cjs.map