@burdenoff/microfe-brainyrich 2026.705.1 → 2026.706.2

package/dist/brainyrich/pages/PortfoliosPage.js

@@ -1,11 +1,18 @@
-import { useAccounts as e, useArchivePortfolio as t, useCreateHolding as n, useCreatePortfolio as r, useDeleteHolding as i, useHouseholds as a, useModelPortfolios as o, usePortfolio as s, usePortfolios as c, useUpdateHolding as l, useUpdatePortfolio as u } from "../hooks/useBrainyRichApi.js";
-import { AllocationBars as d, EmptyState as f, ErrorState as p, KpiGrid as m, LoadingState as h, SectionShell as g, formatMoney as _, formatPct as v, statusBadgeVariant as y } from "./_shared.js";
-import { useMemo as b, useState as x } from "react";
-import { ArrowDownRight as S, ArrowUpRight as C, Briefcase as w, MoreHorizontal as ee, Pencil as te, Plus as T, Trash2 as ne } from "lucide-react";
-import { Fragment as re, jsx as E, jsxs as D } from "react/jsx-runtime";
-import { Badge as O, Button as k, Card as A, CardContent as j, CardDescription as ie, CardHeader as M, CardTitle as N, Dialog as P, DialogContent as F, DialogDescription as I, DialogFooter as L, DialogHeader as R, DialogTitle as ae, DropdownMenu as z, DropdownMenuContent as oe, DropdownMenuItem as B, DropdownMenuLabel as se, DropdownMenuSeparator as ce, DropdownMenuTrigger as le, Input as V, Label as H, Select as U, SelectContent as W, SelectItem as G, SelectTrigger as K, SelectValue as q, Sheet as ue, SheetContent as de, SheetDescription as fe, SheetHeader as pe, SheetTitle as me, Table as he, TableBody as ge, TableCell as J, TableHead as Y, TableHeader as _e, TableRow as ve, Textarea as ye } from "@burdenoff/fe-libs/ui";
+import { useArchivePortfolio as e, useCreateHolding as t, useCreatePortfolio as n, useDeleteHolding as r, useHouseholds as i, useModelPortfolios as a, usePagedPortfolios as o, usePortfolio as s, useUpdateHolding as c, useUpdatePortfolio as l } from "../hooks/useBrainyRichApi.js";
+import { LoadMore as u } from "../components/LoadMore.js";
+import { ConfirmDialog as d } from "../components/ConfirmDialog.js";
+import { DonutChart as f, FadeIn as p, GlassCard as m, StatTile as h } from "../components/viz.js";
+import { AccountPicker as g } from "../components/pickers.js";
+import "../components/index.js";
+import { AllocationBars as _, EmptyState as ee, ErrorState as te, LoadingState as ne, SectionShell as v, formatCompact as re, formatMoney as y, formatPct as b, statusBadgeVariant as x } from "./_shared.js";
+import { TagField as S } from "../components/reuse/TagField.js";
+import { CommentThread as ie } from "../components/reuse/CommentThread.js";
+import { useMemo as C, useState as w } from "react";
+import { ArrowDownRight as T, ArrowUpRight as E, Briefcase as D, MoreHorizontal as ae, Pencil as oe, Plus as O, Trash2 as se } from "lucide-react";
+import { Fragment as ce, jsx as k, jsxs as A } from "react/jsx-runtime";
+import { Badge as j, Button as M, Card as N, CardContent as P, CardDescription as F, CardHeader as le, CardTitle as ue, Dialog as I, DialogContent as L, DialogDescription as R, DialogFooter as z, DialogHeader as B, DialogTitle as de, DropdownMenu as fe, DropdownMenuContent as pe, DropdownMenuItem as V, DropdownMenuLabel as me, DropdownMenuSeparator as he, DropdownMenuTrigger as ge, Input as H, Label as U, Select as W, SelectContent as G, SelectItem as K, SelectTrigger as q, SelectValue as J, Sheet as _e, SheetContent as ve, SheetDescription as ye, SheetHeader as be, SheetTitle as xe, Table as Se, TableBody as Ce, TableCell as Y, TableHead as X, TableHeader as we, TableRow as Te, Textarea as Ee } from "@burdenoff/fe-libs/ui";
 //#region src/brainyrich/pages/PortfoliosPage.tsx
-var be = [
+var De = [
 	"EQUITY",
 	"FIXED_INCOME",
 	"CASH",
@@ -13,78 +20,96 @@ var be = [
 	"COMMODITY",
 	"CRYPTO",
 	"ALTERNATIVE"
-], xe = [
+], Oe = [
 	"DRAFT",
 	"ACTIVE",
 	"ARCHIVED"
-], X = "__none__", Z = (e) => e.toLowerCase().split("_").map((e) => e.charAt(0).toUpperCase() + e.slice(1)).join(" "), Q = (e) => {
+], Z = "__none__", Q = (e) => e.toLowerCase().split("_").map((e) => e.charAt(0).toUpperCase() + e.slice(1)).join(" "), $ = (e) => {
 	if (e.trim() === "") return;
 	let t = Number(e);
 	return Number.isFinite(t) ? t : void 0;
-};
-function Se(e) {
+}, ke = {
+	EQUITY: "brand",
+	FIXED_INCOME: "blue",
+	CASH: "teal",
+	REAL_ESTATE: "purple",
+	COMMODITY: "warning",
+	CRYPTO: "indigo",
+	ALTERNATIVE: "info"
+}, Ae = (e) => ke[e.toUpperCase()] ?? "neutral";
+function je(e) {
 	return !e || typeof e != "object" ? [] : Object.entries(e).map(([e, t]) => ({
 		label: e,
 		value: Number(t)
 	})).filter((e) => Number.isFinite(e.value)).map((e) => ({
-		label: Z(e.label),
+		label: Q(e.label),
 		value: e.value,
 		tone: "accent"
 	}));
 }
-function Ce({ value: e, currency: t }) {
-	let n = e > 0, r = e < 0, i = n ? "text-status-success-text" : r ? "text-status-error-text" : "text-text-secondary", a = n ? C : r ? S : null;
-	return /* @__PURE__ */ D("span", {
+function Me(e) {
+	return !e || typeof e != "object" ? [] : Object.entries(e).map(([e, t]) => ({
+		key: e,
+		value: Number(t)
+	})).filter((e) => Number.isFinite(e.value) && e.value > 0).sort((e, t) => t.value - e.value).map((e) => ({
+		label: Q(e.key),
+		value: e.value,
+		tone: Ae(e.key)
+	}));
+}
+function Ne({ value: e, currency: t }) {
+	let n = e > 0, r = e < 0, i = n ? "text-status-success-text" : r ? "text-status-error-text" : "text-text-secondary", a = n ? E : r ? T : null;
+	return /* @__PURE__ */ A("span", {
 		className: `inline-flex items-center justify-end gap-1 font-medium ${i}`,
 		children: [
-			a ? /* @__PURE__ */ E(a, {
+			a ? /* @__PURE__ */ k(a, {
 				className: "size-3.5",
 				"aria-hidden": "true"
 			}) : null,
 			n ? "+" : "",
-			_(e, t)
+			y(e, t)
 		]
 	});
 }
-function $() {
+function Pe() {
 	return {
 		name: "",
 		baseCurrency: "USD",
 		description: "",
 		driftThresholdPct: "5",
 		status: "DRAFT",
-		modelPortfolioId: X,
-		householdId: X
+		modelPortfolioId: Z,
+		householdId: Z
 	};
 }
-function we({ open: e, onOpenChange: t, editing: n }) {
-	let { data: i } = o(), { data: s } = a(), c = r(), l = u(), [d, f] = x($), [p, m] = x(null), h = n?.id ?? "new";
-	e && p !== h && (m(h), f(n ? {
-		name: n.name,
-		baseCurrency: n.baseCurrency,
-		description: n.description ?? "",
-		driftThresholdPct: String(n.driftThresholdPct),
-		status: n.status,
-		modelPortfolioId: n.modelPortfolioId ?? X,
-		householdId: n.householdId ?? X
-	} : $())), !e && p !== null && m(null);
-	let g = c.isPending || l.isPending, _ = d.name.trim().length > 0;
-	return /* @__PURE__ */ E(P, {
+function Fe({ open: e, onOpenChange: t, editing: r }) {
+	let { data: o } = a(), { data: s } = i(), c = n(), u = l(), [d, f] = w(Pe), [p, m] = w(null), h = r?.id ?? "new";
+	e && p !== h && (m(h), f(r ? {
+		name: r.name,
+		baseCurrency: r.baseCurrency,
+		description: r.description ?? "",
+		driftThresholdPct: String(r.driftThresholdPct),
+		status: r.status,
+		modelPortfolioId: r.modelPortfolioId ?? Z,
+		householdId: r.householdId ?? Z
+	} : Pe())), !e && p !== null && m(null);
+	let g = c.isPending || u.isPending, _ = d.name.trim().length > 0;
+	return /* @__PURE__ */ k(I, {
 		open: e,
 		onOpenChange: t,
-		children: /* @__PURE__ */ D(F, {
+		children: /* @__PURE__ */ A(L, {
 			className: "max-h-[90vh] overflow-y-auto sm:max-w-lg",
 			children: [
-				/* @__PURE__ */ D(R, { children: [/* @__PURE__ */ E(ae, { children: n ? "Edit portfolio" : "New portfolio" }), /* @__PURE__ */ E(I, { children: n ? "Update this portfolio’s strategy settings." : "Create an investment portfolio to organize and rebalance holdings." })] }),
-				/* @__PURE__ */ D("div", {
+				/* @__PURE__ */ A(B, { children: [/* @__PURE__ */ k(de, { children: r ? "Edit portfolio" : "New portfolio" }), /* @__PURE__ */ k(R, { children: r ? "Update this portfolio’s strategy settings." : "Create an investment portfolio to organize and rebalance holdings." })] }),
+				/* @__PURE__ */ A("div", {
 					className: "space-y-4 py-2",
 					children: [
-						/* @__PURE__ */ D("div", {
+						/* @__PURE__ */ A("div", {
 							className: "space-y-1.5",
-							children: [/* @__PURE__ */ E(H, {
+							children: [/* @__PURE__ */ k(U, {
 								htmlFor: "pf-name",
 								children: "Name"
-							}), /* @__PURE__ */ E(V, {
+							}), /* @__PURE__ */ k(H, {
 								id: "pf-name",
 								value: d.name,
 								onChange: (e) => f((t) => ({
@@ -95,14 +120,14 @@ function we({ open: e, onOpenChange: t, editing: n }) {
 								"aria-invalid": !_
 							})]
 						}),
-						/* @__PURE__ */ D("div", {
+						/* @__PURE__ */ A("div", {
 							className: "grid grid-cols-2 gap-4",
-							children: [/* @__PURE__ */ D("div", {
+							children: [/* @__PURE__ */ A("div", {
 								className: "space-y-1.5",
-								children: [/* @__PURE__ */ E(H, {
+								children: [/* @__PURE__ */ k(U, {
 									htmlFor: "pf-currency",
 									children: "Base currency"
-								}), /* @__PURE__ */ E(V, {
+								}), /* @__PURE__ */ k(H, {
 									id: "pf-currency",
 									value: d.baseCurrency,
 									onChange: (e) => f((t) => ({
@@ -112,12 +137,12 @@ function we({ open: e, onOpenChange: t, editing: n }) {
 									placeholder: "USD",
 									maxLength: 3
 								})]
-							}), /* @__PURE__ */ D("div", {
+							}), /* @__PURE__ */ A("div", {
 								className: "space-y-1.5",
-								children: [/* @__PURE__ */ E(H, {
+								children: [/* @__PURE__ */ k(U, {
 									htmlFor: "pf-drift",
 									children: "Drift threshold %"
-								}), /* @__PURE__ */ E(V, {
+								}), /* @__PURE__ */ k(H, {
 									id: "pf-drift",
 									type: "number",
 									min: 0,
@@ -130,78 +155,78 @@ function we({ open: e, onOpenChange: t, editing: n }) {
 								})]
 							})]
 						}),
-						n ? /* @__PURE__ */ D("div", {
+						r ? /* @__PURE__ */ A("div", {
 							className: "space-y-1.5",
-							children: [/* @__PURE__ */ E(H, {
+							children: [/* @__PURE__ */ k(U, {
 								htmlFor: "pf-status",
 								children: "Status"
-							}), /* @__PURE__ */ D(U, {
+							}), /* @__PURE__ */ A(W, {
 								value: d.status,
 								onValueChange: (e) => f((t) => ({
 									...t,
 									status: e
 								})),
-								children: [/* @__PURE__ */ E(K, {
+								children: [/* @__PURE__ */ k(q, {
 									id: "pf-status",
-									children: /* @__PURE__ */ E(q, {})
-								}), /* @__PURE__ */ E(W, { children: xe.map((e) => /* @__PURE__ */ E(G, {
+									children: /* @__PURE__ */ k(J, {})
+								}), /* @__PURE__ */ k(G, { children: Oe.map((e) => /* @__PURE__ */ k(K, {
 									value: e,
-									children: Z(e)
+									children: Q(e)
 								}, e)) })]
 							})]
 						}) : null,
-						/* @__PURE__ */ D("div", {
+						/* @__PURE__ */ A("div", {
 							className: "space-y-1.5",
-							children: [/* @__PURE__ */ E(H, {
+							children: [/* @__PURE__ */ k(U, {
 								htmlFor: "pf-model",
 								children: "Model portfolio"
-							}), /* @__PURE__ */ D(U, {
+							}), /* @__PURE__ */ A(W, {
 								value: d.modelPortfolioId,
 								onValueChange: (e) => f((t) => ({
 									...t,
 									modelPortfolioId: e
 								})),
-								children: [/* @__PURE__ */ E(K, {
+								children: [/* @__PURE__ */ k(q, {
 									id: "pf-model",
-									children: /* @__PURE__ */ E(q, { placeholder: "None" })
-								}), /* @__PURE__ */ D(W, { children: [/* @__PURE__ */ E(G, {
-									value: X,
+									children: /* @__PURE__ */ k(J, { placeholder: "None" })
+								}), /* @__PURE__ */ A(G, { children: [/* @__PURE__ */ k(K, {
+									value: Z,
 									children: "None"
-								}), i.map((e) => /* @__PURE__ */ E(G, {
+								}), o.map((e) => /* @__PURE__ */ k(K, {
 									value: e.id,
 									children: e.name
 								}, e.id))] })]
 							})]
 						}),
-						n ? null : /* @__PURE__ */ D("div", {
+						r ? null : /* @__PURE__ */ A("div", {
 							className: "space-y-1.5",
-							children: [/* @__PURE__ */ E(H, {
+							children: [/* @__PURE__ */ k(U, {
 								htmlFor: "pf-household",
 								children: "Household"
-							}), /* @__PURE__ */ D(U, {
+							}), /* @__PURE__ */ A(W, {
 								value: d.householdId,
 								onValueChange: (e) => f((t) => ({
 									...t,
 									householdId: e
 								})),
-								children: [/* @__PURE__ */ E(K, {
+								children: [/* @__PURE__ */ k(q, {
 									id: "pf-household",
-									children: /* @__PURE__ */ E(q, { placeholder: "None" })
-								}), /* @__PURE__ */ D(W, { children: [/* @__PURE__ */ E(G, {
-									value: X,
+									children: /* @__PURE__ */ k(J, { placeholder: "None" })
+								}), /* @__PURE__ */ A(G, { children: [/* @__PURE__ */ k(K, {
+									value: Z,
 									children: "None"
-								}), s.map((e) => /* @__PURE__ */ E(G, {
+								}), s.map((e) => /* @__PURE__ */ k(K, {
 									value: e.id,
 									children: e.name
 								}, e.id))] })]
 							})]
 						}),
-						/* @__PURE__ */ D("div", {
+						/* @__PURE__ */ A("div", {
 							className: "space-y-1.5",
-							children: [/* @__PURE__ */ E(H, {
+							children: [/* @__PURE__ */ k(U, {
 								htmlFor: "pf-desc",
 								children: "Description"
-							}), /* @__PURE__ */ E(ye, {
+							}), /* @__PURE__ */ k(Ee, {
 								id: "pf-desc",
 								value: d.description,
 								onChange: (e) => f((t) => ({
@@ -214,42 +239,42 @@ function we({ open: e, onOpenChange: t, editing: n }) {
 						})
 					]
 				}),
-				/* @__PURE__ */ D(L, { children: [/* @__PURE__ */ E(k, {
+				/* @__PURE__ */ A(z, { children: [/* @__PURE__ */ k(M, {
 					variant: "outline",
 					onClick: () => t(!1),
 					disabled: g,
 					children: "Cancel"
-				}), /* @__PURE__ */ E(k, {
+				}), /* @__PURE__ */ k(M, {
 					onClick: () => {
 						if (!_) return;
-						let e = Q(d.driftThresholdPct), r = d.modelPortfolioId === X ? null : d.modelPortfolioId, i = d.householdId === X ? null : d.householdId;
-						n ? l.mutate({
-							id: n.id,
+						let e = $(d.driftThresholdPct), n = d.modelPortfolioId === Z ? null : d.modelPortfolioId, i = d.householdId === Z ? null : d.householdId;
+						r ? u.mutate({
+							id: r.id,
 							input: {
 								name: d.name.trim(),
 								baseCurrency: d.baseCurrency.trim() || "USD",
 								description: d.description.trim() || null,
 								driftThresholdPct: e,
 								status: d.status,
-								modelPortfolioId: r
+								modelPortfolioId: n
 							}
 						}, { onSuccess: () => t(!1) }) : c.mutate({
 							name: d.name.trim(),
 							baseCurrency: d.baseCurrency.trim() || "USD",
 							description: d.description.trim() || null,
 							driftThresholdPct: e,
-							modelPortfolioId: r,
+							modelPortfolioId: n,
 							householdId: i
 						}, { onSuccess: () => t(!1) });
 					},
 					disabled: !_ || g,
-					children: g ? "Saving…" : n ? "Save changes" : "Create portfolio"
+					children: g ? "Saving…" : r ? "Save changes" : "Create portfolio"
 				})] })
 			]
 		})
 	});
 }
-function Te() {
+function Ie() {
 	return {
 		accountId: "",
 		symbol: "",
@@ -260,156 +285,137 @@ function Te() {
 		costBasis: "0"
 	};
 }
-function Ee({ open: t, onOpenChange: r, portfolioId: i, editing: a }) {
-	let { data: o } = e(), s = n(), c = l(), [u, d] = x(Te), [f, p] = x(null), m = a?.id ?? "new";
-	t && f !== m && (p(m), d(a ? {
-		accountId: a.accountId,
-		symbol: a.symbol,
-		name: a.name ?? "",
-		assetClass: a.assetClass,
-		quantity: String(a.quantity),
-		lastPrice: String(a.lastPrice),
-		costBasis: String(a.costBasis)
-	} : Te())), !t && f !== null && p(null);
-	let h = s.isPending || c.isPending, g = u.symbol.trim().length > 0, _ = a ? !0 : u.accountId.trim().length > 0, v = g && _ && !h;
-	return /* @__PURE__ */ E(P, {
-		open: t,
-		onOpenChange: r,
-		children: /* @__PURE__ */ D(F, {
+function Le({ open: e, onOpenChange: n, portfolioId: r, editing: i }) {
+	let a = t(), o = c(), [s, l] = w(Ie), [u, d] = w(null), f = i?.id ?? "new";
+	e && u !== f && (d(f), l(i ? {
+		accountId: i.accountId,
+		symbol: i.symbol,
+		name: i.name ?? "",
+		assetClass: i.assetClass,
+		quantity: String(i.quantity),
+		lastPrice: String(i.lastPrice),
+		costBasis: String(i.costBasis)
+	} : Ie())), !e && u !== null && d(null);
+	let p = a.isPending || o.isPending, m = s.symbol.trim().length > 0, h = i ? !0 : s.accountId.trim().length > 0, _ = m && h && !p;
+	return /* @__PURE__ */ k(I, {
+		open: e,
+		onOpenChange: n,
+		children: /* @__PURE__ */ A(L, {
 			className: "max-h-[90vh] overflow-y-auto sm:max-w-lg",
 			children: [
-				/* @__PURE__ */ D(R, { children: [/* @__PURE__ */ E(ae, { children: a ? "Edit holding" : "Add holding" }), /* @__PURE__ */ E(I, { children: a ? "Update the position details for this holding." : "Add a position to this portfolio from one of your accounts." })] }),
-				/* @__PURE__ */ D("div", {
+				/* @__PURE__ */ A(B, { children: [/* @__PURE__ */ k(de, { children: i ? "Edit holding" : "Add holding" }), /* @__PURE__ */ k(R, { children: i ? "Update the position details for this holding." : "Add a position to this portfolio from one of your accounts." })] }),
+				/* @__PURE__ */ A("div", {
 					className: "space-y-4 py-2",
 					children: [
-						a ? null : /* @__PURE__ */ D("div", {
-							className: "space-y-1.5",
-							children: [
-								/* @__PURE__ */ E(H, {
-									htmlFor: "h-account",
-									children: "Account"
-								}),
-								/* @__PURE__ */ D(U, {
-									value: u.accountId,
-									onValueChange: (e) => d((t) => ({
-										...t,
-										accountId: e
-									})),
-									children: [/* @__PURE__ */ E(K, {
-										id: "h-account",
-										"aria-invalid": !_,
-										children: /* @__PURE__ */ E(q, { placeholder: "Select account" })
-									}), /* @__PURE__ */ E(W, { children: o.map((e) => /* @__PURE__ */ E(G, {
-										value: e.id,
-										children: e.name
-									}, e.id)) })]
-								}),
-								o.length === 0 ? /* @__PURE__ */ E("p", {
-									className: "text-xs text-text-secondary",
-									children: "No accounts yet — create an account first."
-								}) : null
-							]
+						i ? null : /* @__PURE__ */ k(g, {
+							id: "h-account",
+							value: s.accountId,
+							onChange: (e) => l((t) => ({
+								...t,
+								accountId: e
+							})),
+							placeholder: "Select account"
 						}),
-						/* @__PURE__ */ D("div", {
+						/* @__PURE__ */ A("div", {
 							className: "grid grid-cols-2 gap-4",
-							children: [/* @__PURE__ */ D("div", {
+							children: [/* @__PURE__ */ A("div", {
 								className: "space-y-1.5",
-								children: [/* @__PURE__ */ E(H, {
+								children: [/* @__PURE__ */ k(U, {
 									htmlFor: "h-symbol",
 									children: "Symbol"
-								}), /* @__PURE__ */ E(V, {
+								}), /* @__PURE__ */ k(H, {
 									id: "h-symbol",
-									value: u.symbol,
-									onChange: (e) => d((t) => ({
+									value: s.symbol,
+									onChange: (e) => l((t) => ({
 										...t,
 										symbol: e.target.value
 									})),
 									placeholder: "AAPL",
-									disabled: !!a,
-									"aria-invalid": !g
+									disabled: !!i,
+									"aria-invalid": !m
 								})]
-							}), /* @__PURE__ */ D("div", {
+							}), /* @__PURE__ */ A("div", {
 								className: "space-y-1.5",
-								children: [/* @__PURE__ */ E(H, {
+								children: [/* @__PURE__ */ k(U, {
 									htmlFor: "h-class",
 									children: "Asset class"
-								}), /* @__PURE__ */ D(U, {
-									value: u.assetClass,
-									onValueChange: (e) => d((t) => ({
+								}), /* @__PURE__ */ A(W, {
+									value: s.assetClass,
+									onValueChange: (e) => l((t) => ({
 										...t,
 										assetClass: e
 									})),
-									children: [/* @__PURE__ */ E(K, {
+									children: [/* @__PURE__ */ k(q, {
 										id: "h-class",
-										children: /* @__PURE__ */ E(q, {})
-									}), /* @__PURE__ */ E(W, { children: be.map((e) => /* @__PURE__ */ E(G, {
+										children: /* @__PURE__ */ k(J, {})
+									}), /* @__PURE__ */ k(G, { children: De.map((e) => /* @__PURE__ */ k(K, {
 										value: e,
-										children: Z(e)
+										children: Q(e)
 									}, e)) })]
 								})]
 							})]
 						}),
-						/* @__PURE__ */ D("div", {
+						/* @__PURE__ */ A("div", {
 							className: "space-y-1.5",
-							children: [/* @__PURE__ */ E(H, {
+							children: [/* @__PURE__ */ k(U, {
 								htmlFor: "h-name",
 								children: "Name"
-							}), /* @__PURE__ */ E(V, {
+							}), /* @__PURE__ */ k(H, {
 								id: "h-name",
-								value: u.name,
-								onChange: (e) => d((t) => ({
+								value: s.name,
+								onChange: (e) => l((t) => ({
 									...t,
 									name: e.target.value
 								})),
 								placeholder: "Apple Inc."
 							})]
 						}),
-						/* @__PURE__ */ D("div", {
+						/* @__PURE__ */ A("div", {
 							className: "grid grid-cols-3 gap-4",
 							children: [
-								/* @__PURE__ */ D("div", {
+								/* @__PURE__ */ A("div", {
 									className: "space-y-1.5",
-									children: [/* @__PURE__ */ E(H, {
+									children: [/* @__PURE__ */ k(U, {
 										htmlFor: "h-qty",
 										children: "Quantity"
-									}), /* @__PURE__ */ E(V, {
+									}), /* @__PURE__ */ k(H, {
 										id: "h-qty",
 										type: "number",
 										step: "any",
-										value: u.quantity,
-										onChange: (e) => d((t) => ({
+										value: s.quantity,
+										onChange: (e) => l((t) => ({
 											...t,
 											quantity: e.target.value
 										}))
 									})]
 								}),
-								/* @__PURE__ */ D("div", {
+								/* @__PURE__ */ A("div", {
 									className: "space-y-1.5",
-									children: [/* @__PURE__ */ E(H, {
+									children: [/* @__PURE__ */ k(U, {
 										htmlFor: "h-price",
 										children: "Last price"
-									}), /* @__PURE__ */ E(V, {
+									}), /* @__PURE__ */ k(H, {
 										id: "h-price",
 										type: "number",
 										step: "any",
-										value: u.lastPrice,
-										onChange: (e) => d((t) => ({
+										value: s.lastPrice,
+										onChange: (e) => l((t) => ({
 											...t,
 											lastPrice: e.target.value
 										}))
 									})]
 								}),
-								/* @__PURE__ */ D("div", {
+								/* @__PURE__ */ A("div", {
 									className: "space-y-1.5",
-									children: [/* @__PURE__ */ E(H, {
+									children: [/* @__PURE__ */ k(U, {
 										htmlFor: "h-cost",
 										children: "Cost basis"
-									}), /* @__PURE__ */ E(V, {
+									}), /* @__PURE__ */ k(H, {
 										id: "h-cost",
 										type: "number",
 										step: "any",
-										value: u.costBasis,
-										onChange: (e) => d((t) => ({
+										value: s.costBasis,
+										onChange: (e) => l((t) => ({
 											...t,
 											costBasis: e.target.value
 										}))
@@ -419,268 +425,335 @@ function Ee({ open: t, onOpenChange: r, portfolioId: i, editing: a }) {
 						})
 					]
 				}),
-				/* @__PURE__ */ D(L, { children: [/* @__PURE__ */ E(k, {
+				/* @__PURE__ */ A(z, { children: [/* @__PURE__ */ k(M, {
 					variant: "outline",
-					onClick: () => r(!1),
-					disabled: h,
+					onClick: () => n(!1),
+					disabled: p,
 					children: "Cancel"
-				}), /* @__PURE__ */ E(k, {
+				}), /* @__PURE__ */ k(M, {
 					onClick: () => {
-						!g || !_ || (a ? c.mutate({
-							id: a.id,
+						!m || !h || (i ? o.mutate({
+							id: i.id,
 							input: {
-								name: u.name.trim() || null,
-								assetClass: u.assetClass,
-								quantity: Q(u.quantity),
-								lastPrice: Q(u.lastPrice),
-								costBasis: Q(u.costBasis)
+								name: s.name.trim() || null,
+								assetClass: s.assetClass,
+								quantity: $(s.quantity),
+								lastPrice: $(s.lastPrice),
+								costBasis: $(s.costBasis)
 							}
-						}, { onSuccess: () => r(!1) }) : s.mutate({
-							accountId: u.accountId,
-							portfolioId: i,
-							symbol: u.symbol.trim().toUpperCase(),
-							name: u.name.trim() || null,
-							assetClass: u.assetClass,
-							quantity: Q(u.quantity),
-							lastPrice: Q(u.lastPrice),
-							costBasis: Q(u.costBasis)
-						}, { onSuccess: () => r(!1) }));
+						}, { onSuccess: () => n(!1) }) : a.mutate({
+							accountId: s.accountId,
+							portfolioId: r,
+							symbol: s.symbol.trim().toUpperCase(),
+							name: s.name.trim() || null,
+							assetClass: s.assetClass,
+							quantity: $(s.quantity),
+							lastPrice: $(s.lastPrice),
+							costBasis: $(s.costBasis)
+						}, { onSuccess: () => n(!1) }));
 					},
-					disabled: !v,
-					children: h ? "Saving…" : a ? "Save changes" : "Add holding"
+					disabled: !_,
+					children: p ? "Saving…" : i ? "Save changes" : "Add holding"
 				})] })
 			]
 		})
 	});
 }
-function De({ portfolioId: e, onOpenChange: t }) {
-	let { data: n, isLoading: r, isError: a, refetch: o } = s(e ?? void 0), c = i(), [l, u] = x(!1), [m, g] = x(null), S = n?.holdings ?? [], C = n?.baseCurrency ?? "USD", P = S.reduce((e, t) => e + t.marketValue, 0), F = b(() => {
-		if (S.length === 0 || P <= 0) return [];
+function Re({ portfolioId: e, onOpenChange: t }) {
+	let { data: n, isLoading: i, isError: a, refetch: o } = s(e ?? void 0), c = r(), [l, u] = w(!1), [g, v] = w(null), [T, E] = w(null), I = n?.holdings ?? [], L = n?.baseCurrency ?? "USD", R = I.reduce((e, t) => e + t.marketValue, 0), z = I.reduce((e, t) => e + t.costBasis, 0), B = R - z, de = z > 0 ? B / z * 100 : 0, H = C(() => {
+		if (I.length === 0 || R <= 0) return [];
 		let e = /* @__PURE__ */ new Map();
-		return S.forEach((t) => e.set(t.assetClass, (e.get(t.assetClass) ?? 0) + t.marketValue)), Array.from(e.entries()).map(([e, t]) => ({
-			label: Z(e),
-			value: t / P * 100,
-			caption: _(t, C),
-			tone: "default"
+		return I.forEach((t) => e.set(t.assetClass, (e.get(t.assetClass) ?? 0) + t.marketValue)), Array.from(e.entries()).map(([e, t]) => ({
+			label: Q(e),
+			value: t,
+			tone: Ae(e)
 		})).sort((e, t) => t.value - e.value);
-	}, [
-		S,
-		P,
-		C
-	]), I = b(() => Se(n?.targetAllocation), [n?.targetAllocation]), L = () => {
-		g(null), u(!0);
-	}, R = (e) => {
-		g(e), u(!0);
+	}, [I, R]), U = C(() => {
+		let e = /* @__PURE__ */ new Map();
+		return R <= 0 || I.forEach((t) => e.set(Q(t.assetClass), (e.get(Q(t.assetClass)) ?? 0) + t.marketValue / R * 100)), e;
+	}, [I, R]), W = C(() => je(n?.targetAllocation).map((e) => {
+		let t = U.get(e.label) ?? 0;
+		return {
+			label: e.label,
+			value: e.value,
+			tone: "accent",
+			caption: `${b(e.value, 0)} target · ${b(t, 0)} actual`
+		};
+	}), [n?.targetAllocation, U]), G = () => {
+		v(null), u(!0);
+	}, K = (e) => {
+		v(e), u(!0);
 	};
-	return /* @__PURE__ */ E(ue, {
+	return /* @__PURE__ */ k(_e, {
 		open: e !== null,
 		onOpenChange: t,
-		children: /* @__PURE__ */ E(de, {
+		children: /* @__PURE__ */ k(ve, {
 			className: "flex w-full flex-col gap-0 overflow-y-auto p-0 sm:max-w-2xl",
-			children: r ? /* @__PURE__ */ E("div", {
+			children: i ? /* @__PURE__ */ k("div", {
 				className: "p-6",
-				children: /* @__PURE__ */ E(h, { rows: 5 })
-			}) : a ? /* @__PURE__ */ E("div", {
+				children: /* @__PURE__ */ k(ne, { rows: 5 })
+			}) : a ? /* @__PURE__ */ k("div", {
 				className: "p-6",
-				children: /* @__PURE__ */ E(p, { onRetry: () => o() })
-			}) : n ? /* @__PURE__ */ D(re, { children: [
-				/* @__PURE__ */ D(pe, {
+				children: /* @__PURE__ */ k(te, { onRetry: () => o() })
+			}) : n ? /* @__PURE__ */ A(ce, { children: [
+				/* @__PURE__ */ A(be, {
 					className: "border-b border-border-subtle p-6",
-					children: [/* @__PURE__ */ D("div", {
+					children: [/* @__PURE__ */ A("div", {
 						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ E(me, {
+						children: [/* @__PURE__ */ k(xe, {
 							className: "text-xl",
 							children: n.name
-						}), /* @__PURE__ */ E(O, {
-							variant: y(n.status),
-							children: Z(n.status)
+						}), /* @__PURE__ */ k(j, {
+							variant: x(n.status),
+							children: Q(n.status)
 						})]
-					}), /* @__PURE__ */ E(fe, { children: n.description?.trim() ? n.description : `${n.baseCurrency} · Drift threshold ${v(n.driftThresholdPct)}` })]
+					}), /* @__PURE__ */ k(ye, { children: n.description?.trim() ? n.description : `${n.baseCurrency} · Drift threshold ${b(n.driftThresholdPct)}` })]
 				}),
-				/* @__PURE__ */ D("div", {
+				/* @__PURE__ */ A("div", {
 					className: "space-y-6 p-6",
 					children: [
-						/* @__PURE__ */ D("div", {
-							className: "grid grid-cols-2 gap-4",
-							children: [/* @__PURE__ */ E(A, { children: /* @__PURE__ */ D(j, {
-								className: "space-y-1 p-4",
-								children: [/* @__PURE__ */ E("p", {
-									className: "text-xs text-text-secondary",
-									children: "Market value"
-								}), /* @__PURE__ */ E("p", {
-									className: "text-2xl font-semibold text-text-primary",
-									children: _(P, C)
-								})]
-							}) }), /* @__PURE__ */ E(A, { children: /* @__PURE__ */ D(j, {
-								className: "space-y-1 p-4",
-								children: [/* @__PURE__ */ E("p", {
-									className: "text-xs text-text-secondary",
-									children: "Holdings"
-								}), /* @__PURE__ */ E("p", {
-									className: "text-2xl font-semibold text-text-primary",
-									children: S.length
-								})]
-							}) })]
-						}),
-						/* @__PURE__ */ D("div", {
-							className: "grid gap-4 md:grid-cols-2",
-							children: [/* @__PURE__ */ D(A, { children: [/* @__PURE__ */ E(M, {
-								className: "pb-3",
-								children: /* @__PURE__ */ E(N, {
-									className: "text-sm",
-									children: "Target allocation"
-								})
-							}), /* @__PURE__ */ E(j, { children: I.length > 0 ? /* @__PURE__ */ E(d, { data: I }) : /* @__PURE__ */ E("p", {
-								className: "text-sm text-text-secondary",
-								children: "No target allocation set for this portfolio."
-							}) })] }), /* @__PURE__ */ D(A, { children: [/* @__PURE__ */ E(M, {
-								className: "pb-3",
-								children: /* @__PURE__ */ E(N, {
-									className: "text-sm",
-									children: "Actual allocation"
+						/* @__PURE__ */ A(p, {
+							className: "grid grid-cols-2 gap-3 lg:grid-cols-4",
+							children: [
+								/* @__PURE__ */ k(h, {
+									label: "Market value",
+									value: y(R, L),
+									glow: !0
+								}),
+								/* @__PURE__ */ k(h, {
+									label: "Unrealized gain",
+									value: y(B, L),
+									delta: z > 0 ? de : void 0,
+									deltaTone: B > 0 ? "positive" : B < 0 ? "negative" : "neutral"
+								}),
+								/* @__PURE__ */ k(h, {
+									label: "Holdings",
+									value: String(I.length)
+								}),
+								/* @__PURE__ */ k(h, {
+									label: "Drift threshold",
+									value: b(n.driftThresholdPct)
 								})
-							}), /* @__PURE__ */ E(j, { children: F.length > 0 ? /* @__PURE__ */ E(d, { data: F }) : /* @__PURE__ */ E("p", {
-								className: "text-sm text-text-secondary",
-								children: "Add holdings to see the live allocation."
-							}) })] })]
+							]
+						}),
+						/* @__PURE__ */ k(p, {
+							index: 1,
+							children: /* @__PURE__ */ A(m, {
+								glow: !0,
+								className: "space-y-5",
+								children: [/* @__PURE__ */ A("div", {
+									className: "flex items-center justify-between gap-2",
+									children: [/* @__PURE__ */ k("h3", {
+										className: "text-sm font-semibold text-text-primary",
+										children: "Target vs actual allocation"
+									}), /* @__PURE__ */ k(j, {
+										variant: "outline",
+										children: L
+									})]
+								}), /* @__PURE__ */ A("div", {
+									className: "grid gap-6 md:grid-cols-2",
+									children: [/* @__PURE__ */ A("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ k("p", {
+											className: "text-xs font-medium uppercase tracking-wide text-text-secondary",
+											children: "Actual — by market value"
+										}), H.length > 0 ? /* @__PURE__ */ k(f, {
+											data: H,
+											centerValue: re(R, L),
+											centerLabel: "Market value",
+											valueFormatter: (e) => y(e, L)
+										}) : /* @__PURE__ */ k("p", {
+											className: "py-8 text-center text-sm text-text-secondary",
+											children: "Add holdings to see the live allocation."
+										})]
+									}), /* @__PURE__ */ A("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ k("p", {
+											className: "text-xs font-medium uppercase tracking-wide text-text-secondary",
+											children: "Target — vs live actual"
+										}), W.length > 0 ? /* @__PURE__ */ k(_, { data: W }) : /* @__PURE__ */ k("p", {
+											className: "py-8 text-center text-sm text-text-secondary",
+											children: "No target allocation set for this portfolio."
+										})]
+									})]
+								})]
+							})
 						}),
-						/* @__PURE__ */ D(A, { children: [/* @__PURE__ */ D(M, {
+						/* @__PURE__ */ A(N, { children: [/* @__PURE__ */ A(le, {
 							className: "flex flex-row items-center justify-between",
-							children: [/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E(N, {
+							children: [/* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k(ue, {
 								className: "text-base",
 								children: "Holdings"
-							}), /* @__PURE__ */ E(ie, { children: "Positions held in this portfolio" })] }), /* @__PURE__ */ D(k, {
+							}), /* @__PURE__ */ k(F, { children: "Positions held in this portfolio" })] }), /* @__PURE__ */ A(M, {
 								size: "sm",
-								onClick: L,
-								children: [/* @__PURE__ */ E(T, {
+								onClick: G,
+								children: [/* @__PURE__ */ k(O, {
 									className: "size-4",
 									"aria-hidden": "true"
 								}), "Add holding"]
 							})]
-						}), /* @__PURE__ */ E(j, { children: S.length === 0 ? /* @__PURE__ */ E(f, {
-							icon: /* @__PURE__ */ E(w, {
+						}), /* @__PURE__ */ k(P, { children: I.length === 0 ? /* @__PURE__ */ k(ee, {
+							icon: /* @__PURE__ */ k(D, {
 								className: "size-6",
 								"aria-hidden": "true"
 							}),
 							title: "No holdings yet",
 							description: "Add positions to start tracking this portfolio.",
-							action: /* @__PURE__ */ D(k, {
+							action: /* @__PURE__ */ A(M, {
 								size: "sm",
-								onClick: L,
-								children: [/* @__PURE__ */ E(T, {
+								onClick: G,
+								children: [/* @__PURE__ */ k(O, {
 									className: "size-4",
 									"aria-hidden": "true"
 								}), "Add holding"]
 							})
-						}) : /* @__PURE__ */ E("div", {
+						}) : /* @__PURE__ */ k("div", {
 							className: "overflow-x-auto",
-							children: /* @__PURE__ */ D(he, { children: [/* @__PURE__ */ E(_e, { children: /* @__PURE__ */ D(ve, { children: [
-								/* @__PURE__ */ E(Y, { children: "Symbol" }),
-								/* @__PURE__ */ E(Y, { children: "Class" }),
-								/* @__PURE__ */ E(Y, {
+							children: /* @__PURE__ */ A(Se, { children: [/* @__PURE__ */ k(we, { children: /* @__PURE__ */ A(Te, { children: [
+								/* @__PURE__ */ k(X, { children: "Symbol" }),
+								/* @__PURE__ */ k(X, { children: "Class" }),
+								/* @__PURE__ */ k(X, {
 									className: "text-right",
 									children: "Qty"
 								}),
-								/* @__PURE__ */ E(Y, {
+								/* @__PURE__ */ k(X, {
 									className: "text-right",
 									children: "Price"
 								}),
-								/* @__PURE__ */ E(Y, {
+								/* @__PURE__ */ k(X, {
 									className: "text-right",
 									children: "Market value"
 								}),
-								/* @__PURE__ */ E(Y, {
+								/* @__PURE__ */ k(X, {
 									className: "text-right",
 									children: "Gain"
 								}),
-								/* @__PURE__ */ E(Y, { className: "w-10" })
-							] }) }), /* @__PURE__ */ E(ge, { children: S.map((e) => {
-								let t = e.marketValue - e.costBasis;
-								return /* @__PURE__ */ D(ve, { children: [
-									/* @__PURE__ */ D(J, { children: [/* @__PURE__ */ E("div", {
-										className: "font-semibold text-text-primary",
-										children: e.symbol
-									}), e.name ? /* @__PURE__ */ E("div", {
-										className: "text-xs text-text-secondary",
-										children: e.name
-									}) : null] }),
-									/* @__PURE__ */ E(J, { children: /* @__PURE__ */ E(O, {
-										variant: "outline",
-										children: Z(e.assetClass)
-									}) }),
-									/* @__PURE__ */ E(J, {
-										className: "text-right tabular-nums",
-										children: e.quantity
-									}),
-									/* @__PURE__ */ E(J, {
-										className: "text-right tabular-nums",
-										children: _(e.lastPrice, e.currency)
-									}),
-									/* @__PURE__ */ E(J, {
-										className: "text-right font-medium tabular-nums",
-										children: _(e.marketValue, e.currency)
-									}),
-									/* @__PURE__ */ E(J, {
-										className: "text-right tabular-nums",
-										children: /* @__PURE__ */ E(Ce, {
-											value: t,
-											currency: e.currency
-										})
-									}),
-									/* @__PURE__ */ E(J, {
-										className: "text-right",
-										children: /* @__PURE__ */ D(z, { children: [/* @__PURE__ */ E(le, {
-											asChild: !0,
-											children: /* @__PURE__ */ E(k, {
-												variant: "ghost",
-												size: "icon",
-												className: "size-10",
-												"aria-label": `Actions for ${e.symbol}`,
-												children: /* @__PURE__ */ E(ee, {
-													className: "size-4",
-													"aria-hidden": "true"
-												})
-											})
-										}), /* @__PURE__ */ D(oe, {
-											align: "end",
-											children: [
-												/* @__PURE__ */ E(se, { children: e.symbol }),
-												/* @__PURE__ */ E(ce, {}),
-												/* @__PURE__ */ D(B, {
-													className: "gap-2",
-													onClick: () => R(e),
-													children: [/* @__PURE__ */ E(te, {
-														className: "size-4",
-														"aria-hidden": "true"
-													}), "Edit"]
-												}),
-												/* @__PURE__ */ D(B, {
-													className: "gap-2 text-status-error-text focus:text-status-error-text",
-													disabled: c.isPending,
-													onClick: () => c.mutate(e.id),
-													children: [/* @__PURE__ */ E(ne, {
+								/* @__PURE__ */ k(X, { className: "w-10" })
+							] }) }), /* @__PURE__ */ k(Ce, { children: I.map((e) => {
+								let t = e.marketValue - e.costBasis, n = e.costBasis > 0 ? t / e.costBasis * 100 : 0;
+								return /* @__PURE__ */ A(Te, {
+									className: "transition-colors motion-safe:hover:bg-bg-sunken/60",
+									children: [
+										/* @__PURE__ */ A(Y, { children: [/* @__PURE__ */ k("div", {
+											className: "font-semibold text-text-primary",
+											children: e.symbol
+										}), e.name ? /* @__PURE__ */ k("div", {
+											className: "text-xs text-text-secondary",
+											children: e.name
+										}) : null] }),
+										/* @__PURE__ */ k(Y, { children: /* @__PURE__ */ k(j, {
+											variant: "outline",
+											children: Q(e.assetClass)
+										}) }),
+										/* @__PURE__ */ k(Y, {
+											className: "text-right tabular-nums",
+											children: e.quantity
+										}),
+										/* @__PURE__ */ k(Y, {
+											className: "text-right tabular-nums",
+											children: y(e.lastPrice, e.currency)
+										}),
+										/* @__PURE__ */ k(Y, {
+											className: "text-right font-medium tabular-nums",
+											children: y(e.marketValue, e.currency)
+										}),
+										/* @__PURE__ */ A(Y, {
+											className: "text-right tabular-nums",
+											children: [/* @__PURE__ */ k(Ne, {
+												value: t,
+												currency: e.currency
+											}), e.costBasis > 0 ? /* @__PURE__ */ A("div", {
+												className: "text-xs text-text-secondary",
+												children: [t > 0 ? "+" : "", b(n)]
+											}) : null]
+										}),
+										/* @__PURE__ */ k(Y, {
+											className: "text-right",
+											children: /* @__PURE__ */ A(fe, { children: [/* @__PURE__ */ k(ge, {
+												asChild: !0,
+												children: /* @__PURE__ */ k(M, {
+													variant: "ghost",
+													size: "icon",
+													className: "size-10",
+													"aria-label": `Actions for ${e.symbol}`,
+													children: /* @__PURE__ */ k(ae, {
 														className: "size-4",
 														"aria-hidden": "true"
-													}), "Delete"]
+													})
 												})
-											]
-										})] })
-									})
-								] }, e.id);
+											}), /* @__PURE__ */ A(pe, {
+												align: "end",
+												children: [
+													/* @__PURE__ */ k(me, { children: e.symbol }),
+													/* @__PURE__ */ k(he, {}),
+													/* @__PURE__ */ A(V, {
+														className: "gap-2",
+														onClick: () => K(e),
+														children: [/* @__PURE__ */ k(oe, {
+															className: "size-4",
+															"aria-hidden": "true"
+														}), "Edit"]
+													}),
+													/* @__PURE__ */ A(V, {
+														className: "gap-2 text-status-error-text focus:text-status-error-text",
+														onClick: () => E(e),
+														children: [/* @__PURE__ */ k(se, {
+															className: "size-4",
+															"aria-hidden": "true"
+														}), "Delete"]
+													})
+												]
+											})] })
+										})
+									]
+								}, e.id);
 							}) })] })
-						}) })] })
+						}) })] }),
+						/* @__PURE__ */ A(N, { children: [/* @__PURE__ */ A(le, {
+							className: "pb-3",
+							children: [/* @__PURE__ */ k(ue, {
+								className: "text-sm",
+								children: "Tags"
+							}), /* @__PURE__ */ k(F, { children: "Organize and filter this portfolio." })]
+						}), /* @__PURE__ */ k(P, { children: /* @__PURE__ */ k(S, {
+							entityType: "brainyrich-portfolio",
+							entityId: n.id,
+							hideLabel: !0
+						}) })] }),
+						/* @__PURE__ */ k(N, { children: /* @__PURE__ */ k(P, {
+							className: "pt-6",
+							children: /* @__PURE__ */ k(ie, {
+								entityType: "brainyrich-portfolio",
+								entityId: n.id
+							})
+						}) })
 					]
 				}),
-				/* @__PURE__ */ E(Ee, {
+				/* @__PURE__ */ k(Le, {
 					open: l,
 					onOpenChange: u,
 					portfolioId: n.id,
-					editing: m
+					editing: g
+				}),
+				/* @__PURE__ */ k(d, {
+					open: T !== null,
+					onOpenChange: (e) => {
+						e || E(null);
+					},
+					title: "Delete holding?",
+					description: T ? `Remove ${T.symbol} from this portfolio. This cannot be undone.` : void 0,
+					confirmLabel: "Delete",
+					pendingLabel: "Deleting…",
+					destructive: !0,
+					pending: c.isPending,
+					onConfirm: () => {
+						T && c.mutate(T.id, { onSuccess: () => E(null) });
+					}
 				})
-			] }) : /* @__PURE__ */ E("div", {
+			] }) : /* @__PURE__ */ k("div", {
 				className: "p-6",
-				children: /* @__PURE__ */ E(f, {
-					icon: /* @__PURE__ */ E(w, {
+				children: /* @__PURE__ */ k(ee, {
+					icon: /* @__PURE__ */ k(D, {
 						className: "size-6",
 						"aria-hidden": "true"
 					}),
@@ -691,154 +764,249 @@ function De({ portfolioId: e, onOpenChange: t }) {
 		})
 	});
 }
-function Oe() {
-	let { data: e, isLoading: n, isError: r, refetch: i } = c(), a = t(), [o, s] = x(!1), [l, u] = x(null), [d, _] = x(null), b = e.filter((e) => e.status === "ACTIVE").length, S = e.filter((e) => e.status === "DRAFT").length, C = e.length > 0 ? e.reduce((e, t) => e + t.driftThresholdPct, 0) / e.length : 0, P = () => {
-		u(null), s(!0);
-	}, F = (e) => {
-		u(e), s(!0);
+function ze({ portfolio: e, index: t, onView: n, onEdit: r, onArchive: i }) {
+	let a = C(() => Me(e.targetAllocation), [e.targetAllocation]), o = a[0], s = e.tags ?? [];
+	return /* @__PURE__ */ k(p, {
+		index: t,
+		as: "div",
+		className: "h-full",
+		children: /* @__PURE__ */ A(N, {
+			className: "flex h-full flex-col transition-shadow motion-safe:hover:shadow-[var(--shadow-pop-hover,var(--shadow-elevation-2))]",
+			children: [/* @__PURE__ */ A(le, {
+				className: "pb-3",
+				children: [/* @__PURE__ */ A("div", {
+					className: "flex items-start justify-between gap-2",
+					children: [/* @__PURE__ */ A("div", {
+						className: "flex min-w-0 items-center gap-2",
+						children: [
+							/* @__PURE__ */ k("span", {
+								className: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-[var(--color-action-primary-bg)]/12 text-[var(--color-action-primary-text)]",
+								children: /* @__PURE__ */ k(D, {
+									className: "size-4",
+									"aria-hidden": "true"
+								})
+							}),
+							/* @__PURE__ */ k(ue, {
+								className: "truncate text-base",
+								children: e.name
+							}),
+							/* @__PURE__ */ k(j, {
+								variant: x(e.status),
+								children: Q(e.status)
+							})
+						]
+					}), /* @__PURE__ */ A(fe, { children: [/* @__PURE__ */ k(ge, {
+						asChild: !0,
+						children: /* @__PURE__ */ k(M, {
+							variant: "ghost",
+							size: "icon",
+							className: "size-9 shrink-0",
+							"aria-label": `Actions for ${e.name}`,
+							children: /* @__PURE__ */ k(ae, {
+								className: "size-4",
+								"aria-hidden": "true"
+							})
+						})
+					}), /* @__PURE__ */ A(pe, {
+						align: "end",
+						children: [
+							/* @__PURE__ */ k(me, { children: e.name }),
+							/* @__PURE__ */ k(he, {}),
+							/* @__PURE__ */ A(V, {
+								className: "gap-2",
+								onClick: r,
+								children: [/* @__PURE__ */ k(oe, {
+									className: "size-4",
+									"aria-hidden": "true"
+								}), "Edit"]
+							}),
+							/* @__PURE__ */ A(V, {
+								className: "gap-2 text-status-error-text focus:text-status-error-text",
+								disabled: e.status === "ARCHIVED",
+								onClick: i,
+								children: [/* @__PURE__ */ k(se, {
+									className: "size-4",
+									"aria-hidden": "true"
+								}), "Archive"]
+							})
+						]
+					})] })]
+				}), e.description?.trim() ? /* @__PURE__ */ k(F, {
+					className: "line-clamp-2",
+					children: e.description
+				}) : null]
+			}), /* @__PURE__ */ A(P, {
+				className: "flex flex-1 flex-col justify-between gap-4",
+				children: [/* @__PURE__ */ A("div", {
+					className: "grid grid-cols-[auto_1fr] items-center gap-4",
+					children: [a.length > 0 ? /* @__PURE__ */ k("div", {
+						className: "w-28 shrink-0",
+						children: /* @__PURE__ */ k(f, {
+							data: a,
+							legend: !1,
+							height: 112,
+							centerValue: o ? b(o.value, 0) : void 0,
+							centerLabel: o?.label,
+							valueFormatter: (e) => b(e, 0)
+						})
+					}) : /* @__PURE__ */ A("div", {
+						className: "flex size-28 shrink-0 items-center justify-center rounded-full border border-dashed border-border-subtle text-center text-[10px] leading-tight text-text-secondary",
+						children: [
+							"No target",
+							/* @__PURE__ */ k("br", {}),
+							"allocation"
+						]
+					}), /* @__PURE__ */ A("div", {
+						className: "min-w-0 space-y-2",
+						children: [
+							/* @__PURE__ */ A("div", {
+								className: "flex flex-wrap items-center gap-1.5",
+								children: [/* @__PURE__ */ k(j, {
+									variant: "outline",
+									children: e.baseCurrency
+								}), /* @__PURE__ */ A(j, {
+									variant: "secondary",
+									children: ["Drift ≤ ", b(e.driftThresholdPct)]
+								})]
+							}),
+							a.length > 0 ? /* @__PURE__ */ k("ul", {
+								className: "space-y-1",
+								"aria-label": "Target allocation",
+								children: a.slice(0, 3).map((e) => /* @__PURE__ */ A("li", {
+									className: "flex items-center gap-1.5 text-xs",
+									children: [/* @__PURE__ */ k("span", {
+										className: "truncate text-text-secondary",
+										children: e.label
+									}), /* @__PURE__ */ k("span", {
+										className: "ml-auto font-medium tabular-nums text-text-primary",
+										children: b(e.value, 0)
+									})]
+								}, e.label))
+							}) : null,
+							s.length > 0 ? /* @__PURE__ */ k("div", {
+								className: "flex flex-wrap gap-1",
+								children: s.slice(0, 3).map((e) => /* @__PURE__ */ k(j, {
+									variant: "outline",
+									className: "text-[10px]",
+									children: e
+								}, e))
+							}) : null
+						]
+					})]
+				}), /* @__PURE__ */ k(M, {
+					variant: "outline",
+					size: "sm",
+					className: "w-full",
+					onClick: n,
+					children: "View holdings"
+				})]
+			})]
+		})
+	});
+}
+function Be() {
+	let { items: t, hasMore: n, loadMore: r, isLoading: i, isFetchingNextPage: a, isError: s, refetch: c } = o(), l = e(), [f, m] = w(!1), [g, _] = w(null), [re, y] = w(null), [x, S] = w(null), ie = t.filter((e) => e.status === "ACTIVE").length, C = t.filter((e) => e.status === "DRAFT").length, T = t.length > 0 ? t.reduce((e, t) => e + t.driftThresholdPct, 0) / t.length : 0, E = () => {
+		_(null), m(!0);
+	}, ae = (e) => {
+		_(e), m(!0);
 	};
-	return /* @__PURE__ */ D(g, {
+	return /* @__PURE__ */ A(v, {
 		title: "Portfolios",
 		description: "Organize holdings into strategies and keep allocations on target.",
-		badges: e.length > 0 ? [`${e.length} total`] : [],
-		actions: /* @__PURE__ */ D(k, {
+		badges: t.length > 0 ? [`${t.length} total`] : [],
+		actions: /* @__PURE__ */ A(M, {
 			size: "sm",
-			onClick: P,
-			children: [/* @__PURE__ */ E(T, {
+			onClick: E,
+			children: [/* @__PURE__ */ k(O, {
 				className: "size-4",
 				"aria-hidden": "true"
 			}), "New portfolio"]
 		}),
 		children: [
-			n ? /* @__PURE__ */ E(h, { rows: 4 }) : r ? /* @__PURE__ */ E(p, { onRetry: () => i() }) : e.length === 0 ? /* @__PURE__ */ E(f, {
-				icon: /* @__PURE__ */ E(w, {
+			i ? /* @__PURE__ */ k(ne, { rows: 4 }) : s ? /* @__PURE__ */ k(te, { onRetry: () => c() }) : t.length === 0 ? /* @__PURE__ */ k(ee, {
+				icon: /* @__PURE__ */ k(D, {
 					className: "size-6",
 					"aria-hidden": "true"
 				}),
 				title: "No portfolios yet",
 				description: "Create your first portfolio to start organizing holdings and tracking drift.",
-				action: /* @__PURE__ */ D(k, {
+				action: /* @__PURE__ */ A(M, {
 					size: "sm",
-					onClick: P,
-					children: [/* @__PURE__ */ E(T, {
+					onClick: E,
+					children: [/* @__PURE__ */ k(O, {
 						className: "size-4",
 						"aria-hidden": "true"
 					}), "New portfolio"]
 				})
-			}) : /* @__PURE__ */ D(re, { children: [/* @__PURE__ */ E(m, { items: [
-				{
-					label: "Portfolios",
-					value: String(e.length)
-				},
-				{
-					label: "Active",
-					value: String(b)
-				},
-				{
-					label: "Drafts",
-					value: String(S)
-				},
-				{
-					label: "Avg drift threshold",
-					value: v(C)
+			}) : /* @__PURE__ */ A(ce, { children: [
+				/* @__PURE__ */ A(p, {
+					className: "grid grid-cols-2 gap-3 lg:grid-cols-4",
+					children: [
+						/* @__PURE__ */ k(h, {
+							label: "Portfolios",
+							value: String(t.length),
+							glow: !0
+						}),
+						/* @__PURE__ */ k(h, {
+							label: "Active",
+							value: String(ie)
+						}),
+						/* @__PURE__ */ k(h, {
+							label: "Drafts",
+							value: String(C)
+						}),
+						/* @__PURE__ */ k(h, {
+							label: "Avg drift threshold",
+							value: b(T)
+						})
+					]
+				}),
+				/* @__PURE__ */ k("div", {
+					className: "grid gap-4 md:grid-cols-2 xl:grid-cols-3",
+					children: t.map((e, t) => /* @__PURE__ */ k(ze, {
+						portfolio: e,
+						index: t,
+						onView: () => y(e.id),
+						onEdit: () => ae(e),
+						onArchive: () => S(e)
+					}, e.id))
+				}),
+				/* @__PURE__ */ k(u, {
+					hasMore: n,
+					onClick: r,
+					loading: a
+				})
+			] }),
+			/* @__PURE__ */ k(Fe, {
+				open: f,
+				onOpenChange: m,
+				editing: g
+			}),
+			/* @__PURE__ */ k(Re, {
+				portfolioId: re,
+				onOpenChange: (e) => {
+					e || y(null);
 				}
-			] }), /* @__PURE__ */ E("div", {
-				className: "grid gap-4 md:grid-cols-2 xl:grid-cols-3",
-				children: e.map((e) => /* @__PURE__ */ D(A, {
-					className: "flex flex-col",
-					children: [/* @__PURE__ */ D(M, {
-						className: "pb-3",
-						children: [/* @__PURE__ */ D("div", {
-							className: "flex items-start justify-between gap-2",
-							children: [/* @__PURE__ */ D(N, {
-								className: "flex items-center gap-2 text-base",
-								children: [/* @__PURE__ */ E(w, {
-									className: "size-4 text-text-secondary",
-									"aria-hidden": "true"
-								}), e.name]
-							}), /* @__PURE__ */ D(z, { children: [/* @__PURE__ */ E(le, {
-								asChild: !0,
-								children: /* @__PURE__ */ E(k, {
-									variant: "ghost",
-									size: "icon",
-									className: "size-10",
-									"aria-label": `Actions for ${e.name}`,
-									children: /* @__PURE__ */ E(ee, {
-										className: "size-4",
-										"aria-hidden": "true"
-									})
-								})
-							}), /* @__PURE__ */ D(oe, {
-								align: "end",
-								children: [
-									/* @__PURE__ */ E(se, { children: e.name }),
-									/* @__PURE__ */ E(ce, {}),
-									/* @__PURE__ */ D(B, {
-										className: "gap-2",
-										onClick: () => F(e),
-										children: [/* @__PURE__ */ E(te, {
-											className: "size-4",
-											"aria-hidden": "true"
-										}), "Edit"]
-									}),
-									/* @__PURE__ */ D(B, {
-										className: "gap-2 text-status-error-text focus:text-status-error-text",
-										disabled: a.isPending || e.status === "ARCHIVED",
-										onClick: () => a.mutate(e.id),
-										children: [/* @__PURE__ */ E(ne, {
-											className: "size-4",
-											"aria-hidden": "true"
-										}), "Archive"]
-									})
-								]
-							})] })]
-						}), e.description?.trim() ? /* @__PURE__ */ E(ie, {
-							className: "line-clamp-2",
-							children: e.description
-						}) : null]
-					}), /* @__PURE__ */ D(j, {
-						className: "flex flex-1 flex-col justify-between gap-4",
-						children: [/* @__PURE__ */ D("div", {
-							className: "flex flex-wrap items-center gap-2",
-							children: [
-								/* @__PURE__ */ E(O, {
-									variant: y(e.status),
-									children: Z(e.status)
-								}),
-								/* @__PURE__ */ E(O, {
-									variant: "outline",
-									children: e.baseCurrency
-								}),
-								/* @__PURE__ */ D(O, {
-									variant: "secondary",
-									children: ["Drift ", v(e.driftThresholdPct)]
-								})
-							]
-						}), /* @__PURE__ */ E(k, {
-							variant: "outline",
-							size: "sm",
-							className: "w-full",
-							onClick: () => _(e.id),
-							children: "View holdings"
-						})]
-					})]
-				}, e.id))
-			})] }),
-			/* @__PURE__ */ E(we, {
-				open: o,
-				onOpenChange: s,
-				editing: l
 			}),
-			/* @__PURE__ */ E(De, {
-				portfolioId: d,
+			/* @__PURE__ */ k(d, {
+				open: x !== null,
 				onOpenChange: (e) => {
-					e || _(null);
+					e || S(null);
+				},
+				title: "Archive portfolio?",
+				description: x ? `Archive “${x.name}”. It will move to archived status and stop appearing in active views.` : void 0,
+				confirmLabel: "Archive",
+				pendingLabel: "Archiving…",
+				destructive: !0,
+				pending: l.isPending,
+				onConfirm: () => {
+					x && l.mutate(x.id, { onSuccess: () => S(null) });
 				}
 			})
 		]
 	});
 }
 //#endregion
-export { Oe as PortfoliosPage };
+export { Be as PortfoliosPage };
 
 //# sourceMappingURL=PortfoliosPage.js.map