npm - @burdenoff/microfe-housingvista - Versions diffs - 2026.625.1 → 2026.626.1 - Mend

@burdenoff/microfe-housingvista 2026.625.1 → 2026.626.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (49) hide show

package/dist/housingvista/components/DataTable.js CHANGED Viewed

@@ -2,80 +2,83 @@ import { cn as e } from "../utils/helpers.js";
 import { useCallback as t, useMemo as n, useState as r } from "react";
 import { ChevronDown as i, ChevronLeft as a, ChevronRight as o, ChevronUp as s, ChevronsUpDown as c } from "lucide-react";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { IllustratedEmptyState as d } from "@burdenoff/fe-libs/ui";
 //#region src/housingvista/components/DataTable.tsx
-function d({ columns: d, data: f, keyField: p, onRowClick: m, emptyMessage: h = "No data available", className: g, pageSize: _ = 10, selectable: v = !1, selectedKeys: y, onSelectionChange: b, serverPagination: x }) {
-	let [S, C] = r(null), [w, T] = r(null), [E, D] = r(0), O = t((e) => {
-		S === e ? w === "asc" ? T("desc") : w === "desc" ? (C(null), T(null)) : T("asc") : (C(e), T("asc")), D(0);
-	}, [S, w]), k = n(() => !S || !w ? f : [...f].sort((e, t) => {
-		let n = e[S], r = t[S];
+function f({ columns: f, data: p, keyField: m, onRowClick: h, emptyMessage: g = "No data available", emptyDescription: _, emptyIllustration: v = "empty-data", emptyAction: y, className: b, pageSize: x = 10, selectable: S = !1, selectedKeys: C, onSelectionChange: w, serverPagination: T }) {
+	let [E, D] = r(null), [O, k] = r(null), [A, j] = r(0), M = t((e) => {
+		E === e ? O === "asc" ? k("desc") : O === "desc" ? (D(null), k(null)) : k("asc") : (D(e), k("asc")), j(0);
+	}, [E, O]), N = n(() => !E || !O ? p : [...p].sort((e, t) => {
+		let n = e[E], r = t[E];
 		if (n == null && r == null) return 0;
 		if (n == null) return 1;
 		if (r == null) return -1;
 		let i = typeof n == "number" && typeof r == "number" ? n - r : String(n).localeCompare(String(r));
-		return w === "asc" ? i : -i;
+		return O === "asc" ? i : -i;
 	}), [
-		f,
-		S,
-		w
-	]), A = x?.pageSize ?? _, j = Math.max(1, Math.ceil(k.length / A)), M = x ? k : k.slice(E * A, (E + 1) * A), N = v && y ? M.every((e) => y.has(String(e[p]))) : !1, P = () => {
-		if (!b || !y) return;
-		let e = new Set(y);
-		N ? M.forEach((t) => e.delete(String(t[p]))) : M.forEach((t) => e.add(String(t[p]))), b(e);
-	}, F = (e) => {
-		if (!b || !y) return;
-		let t = String(e[p]), n = new Set(y);
-		n.has(t) ? n.delete(t) : n.add(t), b(n);
+		p,
+		E,
+		O
+	]), P = T?.pageSize ?? x, F = Math.max(1, Math.ceil(N.length / P)), I = T ? N : N.slice(A * P, (A + 1) * P), L = S && C ? I.every((e) => C.has(String(e[m]))) : !1, R = () => {
+		if (!w || !C) return;
+		let e = new Set(C);
+		L ? I.forEach((t) => e.delete(String(t[m]))) : I.forEach((t) => e.add(String(t[m]))), w(e);
+	}, z = (e) => {
+		if (!w || !C) return;
+		let t = String(e[m]), n = new Set(C);
+		n.has(t) ? n.delete(t) : n.add(t), w(n);
 	};
-	return f.length === 0 ? /* @__PURE__ */ l("div", {
-		className: "flex items-center justify-center rounded-lg border border-border-subtle bg-bg-surface p-12",
-		children: /* @__PURE__ */ l("p", {
-			className: "text-sm text-text-secondary",
-			children: h
+	return p.length === 0 ? /* @__PURE__ */ l("div", {
+		className: "rounded-card border border-dashed border-border-seam bg-bg-surface/50",
+		children: /* @__PURE__ */ l(d, {
+			illustration: v,
+			title: g,
+			description: _,
+			action: y
 		})
 	}) : /* @__PURE__ */ u("div", {
-		className: e("space-y-3", g),
+		className: e("space-y-3", b),
 		children: [/* @__PURE__ */ l("div", {
 			className: "overflow-x-auto rounded-card border border-border-seam bg-bg-surface shadow-elevation-1",
 			children: /* @__PURE__ */ u("table", {
 				className: "w-full",
 				children: [/* @__PURE__ */ l("thead", { children: /* @__PURE__ */ u("tr", {
 					className: "border-b border-border-subtle bg-bg-sunken/50",
-					children: [v && /* @__PURE__ */ l("th", {
+					children: [S && /* @__PURE__ */ l("th", {
 						className: "w-10 px-3 py-3",
 						children: /* @__PURE__ */ l("input", {
 							type: "checkbox",
-							checked: N && M.length > 0,
-							onChange: P,
+							checked: L && I.length > 0,
+							onChange: R,
 							className: "h-4 w-4 rounded border-border-subtle"
 						})
-					}), d.map((t) => {
-						let n = t.sortable !== !1, r = S === t.key;
+					}), f.map((t) => {
+						let n = t.sortable !== !1, r = E === t.key;
 						return /* @__PURE__ */ l("th", {
 							className: e("px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-text-secondary", n && "cursor-pointer select-none hover:text-text-primary", t.className),
-							onClick: n ? () => O(t.key) : void 0,
+							onClick: n ? () => M(t.key) : void 0,
 							children: /* @__PURE__ */ u("span", {
 								className: "inline-flex items-center gap-1",
-								children: [t.header, n && (r ? l(w === "asc" ? s : i, { className: "h-3 w-3" }) : /* @__PURE__ */ l(c, { className: "h-3 w-3 opacity-30" }))]
+								children: [t.header, n && (r ? l(O === "asc" ? s : i, { className: "h-3 w-3" }) : /* @__PURE__ */ l(c, { className: "h-3 w-3 opacity-30" }))]
 							})
 						}, t.key);
 					})]
 				}) }), /* @__PURE__ */ l("tbody", {
 					className: "divide-y divide-border bg-bg-surface",
-					children: M.map((t) => {
-						let n = String(t[p]), r = v && y?.has(n);
+					children: I.map((t) => {
+						let n = String(t[m]), r = S && C?.has(n);
 						return /* @__PURE__ */ u("tr", {
-							className: e("transition-colors", m && "cursor-pointer hover:bg-bg-sunken/50", r && "bg-action-primary-bg/5"),
-							onClick: () => m?.(t),
-							children: [v && /* @__PURE__ */ l("td", {
+							className: e("transition-colors", h && "cursor-pointer hover:bg-bg-sunken/50", r && "bg-action-primary-bg/5"),
+							onClick: () => h?.(t),
+							children: [S && /* @__PURE__ */ l("td", {
 								className: "w-10 px-3 py-3",
 								onClick: (e) => e.stopPropagation(),
 								children: /* @__PURE__ */ l("input", {
 									type: "checkbox",
 									checked: r ?? !1,
-									onChange: () => F(t),
+									onChange: () => z(t),
 									className: "h-4 w-4 rounded border-border-subtle"
 								})
-							}), d.map((n) => /* @__PURE__ */ l("td", {
+							}), f.map((n) => /* @__PURE__ */ l("td", {
 								className: e("px-4 py-3 text-sm text-text-primary", n.className),
 								children: n.render ? n.render(t) : String(t[n.key] ?? "")
 							}, n.key))]
@@ -83,18 +86,18 @@ function d({ columns: d, data: f, keyField: p, onRowClick: m, emptyMessage: h =
 					})
 				})]
 			})
-		}), x ? /* @__PURE__ */ u("div", {
+		}), T ? /* @__PURE__ */ u("div", {
 			className: "flex flex-col gap-3 rounded-lg border border-border-subtle bg-bg-surface p-3 text-sm sm:flex-row sm:items-center sm:justify-between",
 			children: [/* @__PURE__ */ u("span", {
 				className: "text-text-secondary",
-				children: ["Page ", x.page]
+				children: ["Page ", T.page]
 			}), /* @__PURE__ */ u("div", {
 				className: "flex flex-wrap items-center gap-2",
 				children: [
-					x.onPageSizeChange ? /* @__PURE__ */ l("select", {
-						value: x.pageSize,
-						onChange: (e) => x.onPageSizeChange?.(Number(e.target.value)),
-						disabled: x.loading,
+					T.onPageSizeChange ? /* @__PURE__ */ l("select", {
+						value: T.pageSize,
+						onChange: (e) => T.onPageSizeChange?.(Number(e.target.value)),
+						disabled: T.loading,
 						className: "h-8 rounded-md border border-border-subtle bg-bg-surface px-2 text-sm text-text-primary disabled:opacity-50",
 						"aria-label": "Rows per page",
 						children: [
@@ -109,49 +112,49 @@ function d({ columns: d, data: f, keyField: p, onRowClick: m, emptyMessage: h =
 					}) : null,
 					/* @__PURE__ */ u("button", {
 						type: "button",
-						onClick: () => x.onPageChange(x.page - 1),
-						disabled: x.loading || x.page <= 1,
+						onClick: () => T.onPageChange(T.page - 1),
+						disabled: T.loading || T.page <= 1,
 						className: "inline-flex items-center gap-1 rounded-md border border-border-subtle px-3 py-1.5 text-text-secondary transition-colors hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-40",
 						children: [/* @__PURE__ */ l(a, { className: "h-4 w-4" }), "Previous"]
 					}),
 					/* @__PURE__ */ u("button", {
 						type: "button",
-						onClick: () => x.onPageChange(x.page + 1),
-						disabled: x.loading || !(x.hasNextPage ?? k.length >= x.pageSize),
+						onClick: () => T.onPageChange(T.page + 1),
+						disabled: T.loading || !(T.hasNextPage ?? N.length >= T.pageSize),
 						className: "inline-flex items-center gap-1 rounded-md border border-border-subtle px-3 py-1.5 text-text-secondary transition-colors hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-40",
 						children: ["Next", /* @__PURE__ */ l(o, { className: "h-4 w-4" })]
 					})
 				]
 			})]
-		}) : k.length > _ ? /* @__PURE__ */ u("div", {
+		}) : N.length > x ? /* @__PURE__ */ u("div", {
 			className: "flex items-center justify-between text-sm",
 			children: [/* @__PURE__ */ u("span", {
 				className: "text-text-secondary",
 				children: [
 					"Showing ",
-					E * _ + 1,
+					A * x + 1,
 					"-",
-					Math.min((E + 1) * _, k.length),
+					Math.min((A + 1) * x, N.length),
 					" of ",
-					k.length
+					N.length
 				]
 			}), /* @__PURE__ */ u("div", {
 				className: "flex items-center gap-1",
 				children: [
 					/* @__PURE__ */ l("button", {
-						onClick: () => D((e) => Math.max(0, e - 1)),
-						disabled: E === 0,
+						onClick: () => j((e) => Math.max(0, e - 1)),
+						disabled: A === 0,
 						className: "rounded-md border border-border-subtle p-1.5 text-text-secondary transition-colors hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-40",
 						children: /* @__PURE__ */ l(a, { className: "h-4 w-4" })
 					}),
-					Array.from({ length: j }).map((t, n) => /* @__PURE__ */ l("button", {
-						onClick: () => D(n),
-						className: e("h-8 w-8 rounded-md text-xs font-medium transition-colors", n === E ? "bg-foreground text-background" : "text-text-secondary hover:bg-bg-sunken"),
+					Array.from({ length: F }).map((t, n) => /* @__PURE__ */ l("button", {
+						onClick: () => j(n),
+						className: e("h-8 w-8 rounded-md text-xs font-medium transition-colors", n === A ? "bg-foreground text-background" : "text-text-secondary hover:bg-bg-sunken"),
 						children: n + 1
 					}, n)),
 					/* @__PURE__ */ l("button", {
-						onClick: () => D((e) => Math.min(j - 1, e + 1)),
-						disabled: E >= j - 1,
+						onClick: () => j((e) => Math.min(F - 1, e + 1)),
+						disabled: A >= F - 1,
 						className: "rounded-md border border-border-subtle p-1.5 text-text-secondary transition-colors hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-40",
 						children: /* @__PURE__ */ l(o, { className: "h-4 w-4" })
 					})
@@ -161,6 +164,6 @@ function d({ columns: d, data: f, keyField: p, onRowClick: m, emptyMessage: h =
 	});
 }
 //#endregion
-export { d as DataTable };
+export { f as DataTable };
 //# sourceMappingURL=DataTable.js.map

package/dist/housingvista/components/DataTable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTable.js","names":[],"sources":["../../../src/housingvista/components/DataTable.tsx"],"sourcesContent":["import { useState, useMemo, useCallback, type ReactNode } from 'react';\nimport { ChevronUp, ChevronDown, ChevronsUpDown, ChevronLeft, ChevronRight } from 'lucide-react';\nimport { cn } from '../utils/helpers';\n\nexport interface Column<T> {\n key: string;\n header: string;\n render?: (item: T) => ReactNode;\n className?: string;\n sortable?: boolean;\n}\n\ntype SortDirection = 'asc' \| 'desc' \| null;\n\ninterface DataTableProps<T> {\n columns: Column<T>[];\n data: T[];\n keyField: string;\n onRowClick?: (item: T) => void;\n emptyMessage?: string;\n className?: string;\n pageSize?: number;\n selectable?: boolean;\n selectedKeys?: Set<string>;\n onSelectionChange?: (keys: Set<string>) => void;\n serverPagination?: {\n page: number;\n pageSize: number;\n hasNextPage?: boolean;\n loading?: boolean;\n onPageChange: (page: number) => void;\n onPageSizeChange?: (pageSize: number) => void;\n };\n}\n\nexport function DataTable<T extends object>({\n columns,\n data,\n keyField,\n onRowClick,\n emptyMessage = 'No data available',\n className,\n pageSize = 10,\n selectable = false,\n selectedKeys,\n onSelectionChange,\n serverPagination,\n}: DataTableProps<T>) {\n const [sortKey, setSortKey] = useState<string \| null>(null);\n const [sortDir, setSortDir] = useState<SortDirection>(null);\n const [page, setPage] = useState(0);\n\n const handleSort = useCallback(\n (key: string) => {\n if (sortKey === key) {\n if (sortDir === 'asc') setSortDir('desc');\n else if (sortDir === 'desc') {\n setSortKey(null);\n setSortDir(null);\n } else setSortDir('asc');\n } else {\n setSortKey(key);\n setSortDir('asc');\n }\n setPage(0);\n },\n [sortKey, sortDir]\n );\n\n const sorted = useMemo(() => {\n if (!sortKey \|\| !sortDir) return data;\n return [...data].sort((a, b) => {\n const av = (a as Record<string, unknown>)[sortKey];\n const bv = (b as Record<string, unknown>)[sortKey];\n if (av == null && bv == null) return 0;\n if (av == null) return 1;\n if (bv == null) return -1;\n const cmp = typeof av === 'number' && typeof bv === 'number' ? av - bv : String(av).localeCompare(String(bv));\n return sortDir === 'asc' ? cmp : -cmp;\n });\n }, [data, sortKey, sortDir]);\n\n const effectivePageSize = serverPagination?.pageSize ?? pageSize;\n const totalPages = Math.max(1, Math.ceil(sorted.length / effectivePageSize));\n const paged = serverPagination ? sorted : sorted.slice(page * effectivePageSize, (page + 1) * effectivePageSize);\n\n const allPageKeysSelected =\n selectable && selectedKeys\n ? paged.every((item) => selectedKeys.has(String((item as Record<string, unknown>)[keyField])))\n : false;\n\n const handleSelectAll = () => {\n if (!onSelectionChange \|\| !selectedKeys) return;\n const keys = new Set(selectedKeys);\n if (allPageKeysSelected) {\n paged.forEach((item) => keys.delete(String((item as Record<string, unknown>)[keyField])));\n } else {\n paged.forEach((item) => keys.add(String((item as Record<string, unknown>)[keyField])));\n }\n onSelectionChange(keys);\n };\n\n const handleSelectRow = (item: T) => {\n if (!onSelectionChange \|\| !selectedKeys) return;\n const key = String((item as Record<string, unknown>)[keyField]);\n const keys = new Set(selectedKeys);\n if (keys.has(key)) keys.delete(key);\n else keys.add(key);\n onSelectionChange(keys);\n };\n\n if (data.length === 0) {\n return (\n <div className=\"flex items-center justify-center rounded-lg border border-border-subtle bg-bg-surface p-12\">\n <p className=\"text-sm text-text-secondary\">{emptyMessage}</p>\n </div>\n );\n }\n\n return (\n <div className={cn('space-y-3', className)}>\n <div className=\"overflow-x-auto rounded-card border border-border-seam bg-bg-surface shadow-elevation-1\">\n <table className=\"w-full\">\n <thead>\n <tr className=\"border-b border-border-subtle bg-bg-sunken/50\">\n {selectable && (\n <th className=\"w-10 px-3 py-3\">\n <input\n type=\"checkbox\"\n checked={allPageKeysSelected && paged.length > 0}\n onChange={handleSelectAll}\n className=\"h-4 w-4 rounded border-border-subtle\"\n />\n </th>\n )}\n {columns.map((col) => {\n const isSortable = col.sortable !== false;\n const isActive = sortKey === col.key;\n return (\n <th\n key={col.key}\n className={cn(\n 'px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-text-secondary',\n isSortable && 'cursor-pointer select-none hover:text-text-primary',\n col.className\n )}\n onClick={isSortable ? () => handleSort(col.key) : undefined}\n >\n <span className=\"inline-flex items-center gap-1\">\n {col.header}\n {isSortable &&\n (isActive ? (\n sortDir === 'asc' ? (\n <ChevronUp className=\"h-3 w-3\" />\n ) : (\n <ChevronDown className=\"h-3 w-3\" />\n )\n ) : (\n <ChevronsUpDown className=\"h-3 w-3 opacity-30\" />\n ))}\n </span>\n </th>\n );\n })}\n </tr>\n </thead>\n <tbody className=\"divide-y divide-border bg-bg-surface\">\n {paged.map((item) => {\n const rowKey = String((item as Record<string, unknown>)[keyField]);\n const isSelected = selectable && selectedKeys?.has(rowKey);\n return (\n <tr\n key={rowKey}\n className={cn(\n 'transition-colors',\n onRowClick && 'cursor-pointer hover:bg-bg-sunken/50',\n isSelected && 'bg-action-primary-bg/5'\n )}\n onClick={() => onRowClick?.(item)}\n >\n {selectable && (\n <td className=\"w-10 px-3 py-3\" onClick={(e) => e.stopPropagation()}>\n <input\n type=\"checkbox\"\n checked={isSelected ?? false}\n onChange={() => handleSelectRow(item)}\n className=\"h-4 w-4 rounded border-border-subtle\"\n />\n </td>\n )}\n {columns.map((col) => (\n <td key={col.key} className={cn('px-4 py-3 text-sm text-text-primary', col.className)}>\n {col.render ? col.render(item) : String((item as Record<string, unknown>)[col.key] ?? '')}\n </td>\n ))}\n </tr>\n );\n })}\n </tbody>\n </table>\n </div>\n\n {serverPagination ? (\n <div className=\"flex flex-col gap-3 rounded-lg border border-border-subtle bg-bg-surface p-3 text-sm sm:flex-row sm:items-center sm:justify-between\">\n <span className=\"text-text-secondary\">Page {serverPagination.page}</span>\n <div className=\"flex flex-wrap items-center gap-2\">\n {serverPagination.onPageSizeChange ? (\n <select\n value={serverPagination.pageSize}\n onChange={(event) => serverPagination.onPageSizeChange?.(Number(event.target.value))}\n disabled={serverPagination.loading}\n className=\"h-8 rounded-md border border-border-subtle bg-bg-surface px-2 text-sm text-text-primary disabled:opacity-50\"\n aria-label=\"Rows per page\"\n >\n {[10, 25, 50, 100].map((option) => (\n <option key={option} value={option}>\n {option} / page\n </option>\n ))}\n </select>\n ) : null}\n <button\n type=\"button\"\n onClick={() => serverPagination.onPageChange(serverPagination.page - 1)}\n disabled={serverPagination.loading \|\| serverPagination.page <= 1}\n className=\"inline-flex items-center gap-1 rounded-md border border-border-subtle px-3 py-1.5 text-text-secondary transition-colors hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-40\"\n >\n <ChevronLeft className=\"h-4 w-4\" />\n Previous\n </button>\n <button\n type=\"button\"\n onClick={() => serverPagination.onPageChange(serverPagination.page + 1)}\n disabled={\n serverPagination.loading \|\|\n !(serverPagination.hasNextPage ?? sorted.length >= serverPagination.pageSize)\n }\n className=\"inline-flex items-center gap-1 rounded-md border border-border-subtle px-3 py-1.5 text-text-secondary transition-colors hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-40\"\n >\n Next\n <ChevronRight className=\"h-4 w-4\" />\n </button>\n </div>\n </div>\n ) : sorted.length > pageSize ? (\n <div className=\"flex items-center justify-between text-sm\">\n <span className=\"text-text-secondary\">\n Showing {page * pageSize + 1}-{Math.min((page + 1) * pageSize, sorted.length)} of {sorted.length}\n </span>\n <div className=\"flex items-center gap-1\">\n <button\n onClick={() => setPage((p) => Math.max(0, p - 1))}\n disabled={page === 0}\n className=\"rounded-md border border-border-subtle p-1.5 text-text-secondary transition-colors hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-40\"\n >\n <ChevronLeft className=\"h-4 w-4\" />\n </button>\n {Array.from({ length: totalPages }).map((_, i) => (\n <button\n key={i}\n onClick={() => setPage(i)}\n className={cn(\n 'h-8 w-8 rounded-md text-xs font-medium transition-colors',\n i === page ? 'bg-foreground text-background' : 'text-text-secondary hover:bg-bg-sunken'\n )}\n >\n {i + 1}\n </button>\n ))}\n <button\n onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}\n disabled={page >= totalPages - 1}\n className=\"rounded-md border border-border-subtle p-1.5 text-text-secondary transition-colors hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-40\"\n >\n <ChevronRight className=\"h-4 w-4\" />\n </button>\n </div>\n </div>\n ) : null}\n </div>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"DataTable.js","names":[],"sources":["../../../src/housingvista/components/DataTable.tsx"],"sourcesContent":["import { useState, useMemo, useCallback, type ReactNode } from 'react';\nimport { ChevronUp, ChevronDown, ChevronsUpDown, ChevronLeft, ChevronRight } from 'lucide-react';\nimport { IllustratedEmptyState } from '@burdenoff/fe-libs/ui';\nimport { cn } from '../utils/helpers';\n\nexport interface Column<T> {\n key: string;\n header: string;\n render?: (item: T) => ReactNode;\n className?: string;\n sortable?: boolean;\n}\n\ntype SortDirection = 'asc' \| 'desc' \| null;\n\ninterface DataTableProps<T> {\n columns: Column<T>[];\n data: T[];\n keyField: string;\n onRowClick?: (item: T) => void;\n emptyMessage?: string;\n /** Optional secondary line under the empty title. /\n emptyDescription?: string;\n /\n Boff UI 2.0 — on-brand illustration name (served from `/illustrations/<name>.webp`)\n * shown in the zero state. Standard names: empty-data, empty-search, empty-files,\n * empty-people, empty-notifications, empty-generic. Defaults to `empty-data`.\n /\n emptyIllustration?: string;\n /* Optional action rendered in the empty state (e.g. a create button). /\n emptyAction?: ReactNode;\n className?: string;\n pageSize?: number;\n selectable?: boolean;\n selectedKeys?: Set<string>;\n onSelectionChange?: (keys: Set<string>) => void;\n serverPagination?: {\n page: number;\n pageSize: number;\n hasNextPage?: boolean;\n loading?: boolean;\n onPageChange: (page: number) => void;\n onPageSizeChange?: (pageSize: number) => void;\n };\n}\n\nexport function DataTable<T extends object>({\n columns,\n data,\n keyField,\n onRowClick,\n emptyMessage = 'No data available',\n emptyDescription,\n emptyIllustration = 'empty-data',\n emptyAction,\n className,\n pageSize = 10,\n selectable = false,\n selectedKeys,\n onSelectionChange,\n serverPagination,\n}: DataTableProps<T>) {\n const [sortKey, setSortKey] = useState<string \| null>(null);\n const [sortDir, setSortDir] = useState<SortDirection>(null);\n const [page, setPage] = useState(0);\n\n const handleSort = useCallback(\n (key: string) => {\n if (sortKey === key) {\n if (sortDir === 'asc') setSortDir('desc');\n else if (sortDir === 'desc') {\n setSortKey(null);\n setSortDir(null);\n } else setSortDir('asc');\n } else {\n setSortKey(key);\n setSortDir('asc');\n }\n setPage(0);\n },\n [sortKey, sortDir]\n );\n\n const sorted = useMemo(() => {\n if (!sortKey \|\| !sortDir) return data;\n return [...data].sort((a, b) => {\n const av = (a as Record<string, unknown>)[sortKey];\n const bv = (b as Record<string, unknown>)[sortKey];\n if (av == null && bv == null) return 0;\n if (av == null) return 1;\n if (bv == null) return -1;\n const cmp = typeof av === 'number' && typeof bv === 'number' ? av - bv : String(av).localeCompare(String(bv));\n return sortDir === 'asc' ? cmp : -cmp;\n });\n }, [data, sortKey, sortDir]);\n\n const effectivePageSize = serverPagination?.pageSize ?? pageSize;\n const totalPages = Math.max(1, Math.ceil(sorted.length / effectivePageSize));\n const paged = serverPagination ? sorted : sorted.slice(page effectivePageSize, (page + 1) * effectivePageSize);\n\n const allPageKeysSelected =\n selectable && selectedKeys\n ? paged.every((item) => selectedKeys.has(String((item as Record<string, unknown>)[keyField])))\n : false;\n\n const handleSelectAll = () => {\n if (!onSelectionChange \|\| !selectedKeys) return;\n const keys = new Set(selectedKeys);\n if (allPageKeysSelected) {\n paged.forEach((item) => keys.delete(String((item as Record<string, unknown>)[keyField])));\n } else {\n paged.forEach((item) => keys.add(String((item as Record<string, unknown>)[keyField])));\n }\n onSelectionChange(keys);\n };\n\n const handleSelectRow = (item: T) => {\n if (!onSelectionChange \|\| !selectedKeys) return;\n const key = String((item as Record<string, unknown>)[keyField]);\n const keys = new Set(selectedKeys);\n if (keys.has(key)) keys.delete(key);\n else keys.add(key);\n onSelectionChange(keys);\n };\n\n if (data.length === 0) {\n return (\n <div className=\"rounded-card border border-dashed border-border-seam bg-bg-surface/50\">\n <IllustratedEmptyState\n illustration={emptyIllustration}\n title={emptyMessage}\n description={emptyDescription}\n action={emptyAction}\n />\n </div>\n );\n }\n\n return (\n <div className={cn('space-y-3', className)}>\n <div className=\"overflow-x-auto rounded-card border border-border-seam bg-bg-surface shadow-elevation-1\">\n <table className=\"w-full\">\n <thead>\n <tr className=\"border-b border-border-subtle bg-bg-sunken/50\">\n {selectable && (\n <th className=\"w-10 px-3 py-3\">\n <input\n type=\"checkbox\"\n checked={allPageKeysSelected && paged.length > 0}\n onChange={handleSelectAll}\n className=\"h-4 w-4 rounded border-border-subtle\"\n />\n </th>\n )}\n {columns.map((col) => {\n const isSortable = col.sortable !== false;\n const isActive = sortKey === col.key;\n return (\n <th\n key={col.key}\n className={cn(\n 'px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-text-secondary',\n isSortable && 'cursor-pointer select-none hover:text-text-primary',\n col.className\n )}\n onClick={isSortable ? () => handleSort(col.key) : undefined}\n >\n <span className=\"inline-flex items-center gap-1\">\n {col.header}\n {isSortable &&\n (isActive ? (\n sortDir === 'asc' ? (\n <ChevronUp className=\"h-3 w-3\" />\n ) : (\n <ChevronDown className=\"h-3 w-3\" />\n )\n ) : (\n <ChevronsUpDown className=\"h-3 w-3 opacity-30\" />\n ))}\n </span>\n </th>\n );\n })}\n </tr>\n </thead>\n <tbody className=\"divide-y divide-border bg-bg-surface\">\n {paged.map((item) => {\n const rowKey = String((item as Record<string, unknown>)[keyField]);\n const isSelected = selectable && selectedKeys?.has(rowKey);\n return (\n <tr\n key={rowKey}\n className={cn(\n 'transition-colors',\n onRowClick && 'cursor-pointer hover:bg-bg-sunken/50',\n isSelected && 'bg-action-primary-bg/5'\n )}\n onClick={() => onRowClick?.(item)}\n >\n {selectable && (\n <td className=\"w-10 px-3 py-3\" onClick={(e) => e.stopPropagation()}>\n <input\n type=\"checkbox\"\n checked={isSelected ?? false}\n onChange={() => handleSelectRow(item)}\n className=\"h-4 w-4 rounded border-border-subtle\"\n />\n </td>\n )}\n {columns.map((col) => (\n <td key={col.key} className={cn('px-4 py-3 text-sm text-text-primary', col.className)}>\n {col.render ? col.render(item) : String((item as Record<string, unknown>)[col.key] ?? '')}\n </td>\n ))}\n </tr>\n );\n })}\n </tbody>\n </table>\n </div>\n\n {serverPagination ? (\n <div className=\"flex flex-col gap-3 rounded-lg border border-border-subtle bg-bg-surface p-3 text-sm sm:flex-row sm:items-center sm:justify-between\">\n <span className=\"text-text-secondary\">Page {serverPagination.page}</span>\n <div className=\"flex flex-wrap items-center gap-2\">\n {serverPagination.onPageSizeChange ? (\n <select\n value={serverPagination.pageSize}\n onChange={(event) => serverPagination.onPageSizeChange?.(Number(event.target.value))}\n disabled={serverPagination.loading}\n className=\"h-8 rounded-md border border-border-subtle bg-bg-surface px-2 text-sm text-text-primary disabled:opacity-50\"\n aria-label=\"Rows per page\"\n >\n {[10, 25, 50, 100].map((option) => (\n <option key={option} value={option}>\n {option} / page\n </option>\n ))}\n </select>\n ) : null}\n <button\n type=\"button\"\n onClick={() => serverPagination.onPageChange(serverPagination.page - 1)}\n disabled={serverPagination.loading \|\| serverPagination.page <= 1}\n className=\"inline-flex items-center gap-1 rounded-md border border-border-subtle px-3 py-1.5 text-text-secondary transition-colors hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-40\"\n >\n <ChevronLeft className=\"h-4 w-4\" />\n Previous\n </button>\n <button\n type=\"button\"\n onClick={() => serverPagination.onPageChange(serverPagination.page + 1)}\n disabled={\n serverPagination.loading \|\|\n !(serverPagination.hasNextPage ?? sorted.length >= serverPagination.pageSize)\n }\n className=\"inline-flex items-center gap-1 rounded-md border border-border-subtle px-3 py-1.5 text-text-secondary transition-colors hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-40\"\n >\n Next\n <ChevronRight className=\"h-4 w-4\" />\n </button>\n </div>\n </div>\n ) : sorted.length > pageSize ? (\n <div className=\"flex items-center justify-between text-sm\">\n <span className=\"text-text-secondary\">\n Showing {page * pageSize + 1}-{Math.min((page + 1) * pageSize, sorted.length)} of {sorted.length}\n </span>\n <div className=\"flex items-center gap-1\">\n <button\n onClick={() => setPage((p) => Math.max(0, p - 1))}\n disabled={page === 0}\n className=\"rounded-md border border-border-subtle p-1.5 text-text-secondary transition-colors hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-40\"\n >\n <ChevronLeft className=\"h-4 w-4\" />\n </button>\n {Array.from({ length: totalPages }).map((_, i) => (\n <button\n key={i}\n onClick={() => setPage(i)}\n className={cn(\n 'h-8 w-8 rounded-md text-xs font-medium transition-colors',\n i === page ? 'bg-foreground text-background' : 'text-text-secondary hover:bg-bg-sunken'\n )}\n >\n {i + 1}\n </button>\n ))}\n <button\n onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}\n disabled={page >= totalPages - 1}\n className=\"rounded-md border border-border-subtle p-1.5 text-text-secondary transition-colors hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-40\"\n >\n <ChevronRight className=\"h-4 w-4\" />\n </button>\n </div>\n </div>\n ) : null}\n </div>\n );\n}\n"],"mappings":";;;;;;AA8CA,SAAgB,EAA4B,EAC1C,YACA,SACA,aACA,eACA,kBAAe,qBACf,qBACA,uBAAoB,cACpB,gBACA,cACA,cAAW,IACX,gBAAa,IACb,iBACA,sBACA,uBACoB;CACpB,IAAM,CAAC,GAAS,KAAc,EAAwB,KAAK,EACrD,CAAC,GAAS,KAAc,EAAwB,KAAK,EACrD,CAAC,GAAM,KAAW,EAAS,EAAE,EAE7B,IAAa,GAChB,MAAgB;AAWf,EAVI,MAAY,IACV,MAAY,QAAO,EAAW,OAAO,GAChC,MAAY,UACnB,EAAW,KAAK,EAChB,EAAW,KAAK,IACX,EAAW,MAAM,IAExB,EAAW,EAAI,EACf,EAAW,MAAM,GAEnB,EAAQ,EAAE;IAEZ,CAAC,GAAS,EAAQ,CACnB,EAEK,IAAS,QACT,CAAC,KAAW,CAAC,IAAgB,IAC1B,CAAC,GAAG,EAAK,CAAC,MAAM,GAAG,MAAM;EAC9B,IAAM,IAAM,EAA8B,IACpC,IAAM,EAA8B;AAC1C,MAAI,KAAM,QAAQ,KAAM,KAAM,QAAO;AACrC,MAAI,KAAM,KAAM,QAAO;AACvB,MAAI,KAAM,KAAM,QAAO;EACvB,IAAM,IAAM,OAAO,KAAO,YAAY,OAAO,KAAO,WAAW,IAAK,IAAK,OAAO,EAAG,CAAC,cAAc,OAAO,EAAG,CAAC;AAC7G,SAAO,MAAY,QAAQ,IAAM,CAAC;GAClC,EACD;EAAC;EAAM;EAAS;EAAQ,CAAC,EAEtB,IAAoB,GAAkB,YAAY,GAClD,IAAa,KAAK,IAAI,GAAG,KAAK,KAAK,EAAO,SAAS,EAAkB,CAAC,EACtE,IAAQ,IAAmB,IAAS,EAAO,MAAM,IAAO,IAAoB,IAAO,KAAK,EAAkB,EAE1G,IACJ,KAAc,IACV,EAAM,OAAO,MAAS,EAAa,IAAI,OAAQ,EAAiC,GAAU,CAAC,CAAC,GAC5F,IAEA,UAAwB;AAC5B,MAAI,CAAC,KAAqB,CAAC,EAAc;EACzC,IAAM,IAAO,IAAI,IAAI,EAAa;AAMlC,EALI,IACF,EAAM,SAAS,MAAS,EAAK,OAAO,OAAQ,EAAiC,GAAU,CAAC,CAAC,GAEzF,EAAM,SAAS,MAAS,EAAK,IAAI,OAAQ,EAAiC,GAAU,CAAC,CAAC,EAExF,EAAkB,EAAK;IAGnB,KAAmB,MAAY;AACnC,MAAI,CAAC,KAAqB,CAAC,EAAc;EACzC,IAAM,IAAM,OAAQ,EAAiC,GAAU,EACzD,IAAO,IAAI,IAAI,EAAa;AAGlC,EAFI,EAAK,IAAI,EAAI,GAAE,EAAK,OAAO,EAAI,GAC9B,EAAK,IAAI,EAAI,EAClB,EAAkB,EAAK;;AAgBzB,QAbI,EAAK,WAAW,IAEhB,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD;GACE,cAAc;GACd,OAAO;GACP,aAAa;GACb,QAAQ;GACR,CAAA;EACE,CAAA,GAKR,kBAAC,OAAD;EAAK,WAAW,EAAG,aAAa,EAAU;YAA1C,CACE,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,SAAD;IAAO,WAAU;cAAjB,CACE,kBAAC,SAAD,EAAA,UACE,kBAAC,MAAD;KAAI,WAAU;eAAd,CACG,KACC,kBAAC,MAAD;MAAI,WAAU;gBACZ,kBAAC,SAAD;OACE,MAAK;OACL,SAAS,KAAuB,EAAM,SAAS;OAC/C,UAAU;OACV,WAAU;OACV,CAAA;MACC,CAAA,EAEN,EAAQ,KAAK,MAAQ;MACpB,IAAM,IAAa,EAAI,aAAa,IAC9B,IAAW,MAAY,EAAI;AACjC,aACE,kBAAC,MAAD;OAEE,WAAW,EACT,wFACA,KAAc,sDACd,EAAI,UACL;OACD,SAAS,UAAmB,EAAW,EAAI,IAAI,GAAG,KAAA;iBAElD,kBAAC,QAAD;QAAM,WAAU;kBAAhB,CACG,EAAI,QACJ,MACE,IAEG,EADF,MAAY,QACT,IAEA,GAFD,EAAW,WAAU,WAAY,CAEE,GAGrC,kBAAC,GAAD,EAAgB,WAAU,sBAAuB,CAAA,EAEhD;;OACJ,EArBE,EAAI,IAqBN;OAEP,CACC;QACC,CAAA,EACR,kBAAC,SAAD;KAAO,WAAU;eACd,EAAM,KAAK,MAAS;MACnB,IAAM,IAAS,OAAQ,EAAiC,GAAU,EAC5D,IAAa,KAAc,GAAc,IAAI,EAAO;AAC1D,aACE,kBAAC,MAAD;OAEE,WAAW,EACT,qBACA,KAAc,wCACd,KAAc,yBACf;OACD,eAAe,IAAa,EAAK;iBAPnC,CASG,KACC,kBAAC,MAAD;QAAI,WAAU;QAAiB,UAAU,MAAM,EAAE,iBAAiB;kBAChE,kBAAC,SAAD;SACE,MAAK;SACL,SAAS,KAAc;SACvB,gBAAgB,EAAgB,EAAK;SACrC,WAAU;SACV,CAAA;QACC,CAAA,EAEN,EAAQ,KAAK,MACZ,kBAAC,MAAD;QAAkB,WAAW,EAAG,uCAAuC,EAAI,UAAU;kBAClF,EAAI,SAAS,EAAI,OAAO,EAAK,GAAG,OAAQ,EAAiC,EAAI,QAAQ,GAAG;QACtF,EAFI,EAAI,IAER,CACL,CACC;SAvBE,EAuBF;OAEP;KACI,CAAA,CACF;;GACJ,CAAA,EAEL,IACC,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,QAAD;IAAM,WAAU;cAAhB,CAAsC,SAAM,EAAiB,KAAY;OACzE,kBAAC,OAAD;IAAK,WAAU;cAAf;KACG,EAAiB,mBAChB,kBAAC,UAAD;MACE,OAAO,EAAiB;MACxB,WAAW,MAAU,EAAiB,mBAAmB,OAAO,EAAM,OAAO,MAAM,CAAC;MACpF,UAAU,EAAiB;MAC3B,WAAU;MACV,cAAW;gBAEV;OAAC;OAAI;OAAI;OAAI;OAAI,CAAC,KAAK,MACtB,kBAAC,UAAD;OAAqB,OAAO;iBAA5B,CACG,GAAO,UACD;SAFI,EAEJ,CACT;MACK,CAAA,GACP;KACJ,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAiB,aAAa,EAAiB,OAAO,EAAE;MACvE,UAAU,EAAiB,WAAW,EAAiB,QAAQ;MAC/D,WAAU;gBAJZ,CAME,kBAAC,GAAD,EAAa,WAAU,WAAY,CAAA,EAAA,WAE5B;;KACT,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAiB,aAAa,EAAiB,OAAO,EAAE;MACvE,UACE,EAAiB,WACjB,EAAE,EAAiB,eAAe,EAAO,UAAU,EAAiB;MAEtE,WAAU;gBAPZ,CAQC,QAEC,kBAAC,GAAD,EAAc,WAAU,WAAY,CAAA,CAC7B;;KACL;MACF;OACJ,EAAO,SAAS,IAClB,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,QAAD;IAAM,WAAU;cAAhB;KAAsC;KAC3B,IAAO,IAAW;KAAE;KAAE,KAAK,KAAK,IAAO,KAAK,GAAU,EAAO,OAAO;KAAC;KAAK,EAAO;KACrF;OACP,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,UAAD;MACE,eAAe,GAAS,MAAM,KAAK,IAAI,GAAG,IAAI,EAAE,CAAC;MACjD,UAAU,MAAS;MACnB,WAAU;gBAEV,kBAAC,GAAD,EAAa,WAAU,WAAY,CAAA;MAC5B,CAAA;KACR,MAAM,KAAK,EAAE,QAAQ,GAAY,CAAC,CAAC,KAAK,GAAG,MAC1C,kBAAC,UAAD;MAEE,eAAe,EAAQ,EAAE;MACzB,WAAW,EACT,4DACA,MAAM,IAAO,kCAAkC,yCAChD;gBAEA,IAAI;MACE,EARF,EAQE,CACT;KACF,kBAAC,UAAD;MACE,eAAe,GAAS,MAAM,KAAK,IAAI,IAAa,GAAG,IAAI,EAAE,CAAC;MAC9D,UAAU,KAAQ,IAAa;MAC/B,WAAU;gBAEV,kBAAC,GAAD,EAAc,WAAU,WAAY,CAAA;MAC7B,CAAA;KACL;MACF;OACJ,KACA"}

package/dist/housingvista/components/PageLayout.js CHANGED Viewed

@@ -1,24 +1,30 @@
 import { cn as e } from "../utils/helpers.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { GradientText as r } from "@burdenoff/fe-libs/ui";
+import { GradientText as r, PagePurpose as i } from "@burdenoff/fe-libs/ui";
 //#region src/housingvista/components/PageLayout.tsx
-var i = ({ title: i, description: a, actions: o, children: s, className: c }) => /* @__PURE__ */ n("div", {
-	className: e("flex flex-col gap-6 p-6", c),
+var a = ({ title: a, description: o, actions: s, children: c, className: l, purpose: u }) => /* @__PURE__ */ n("div", {
+	className: e("flex flex-col gap-6 p-6", l),
 	children: [/* @__PURE__ */ n("div", {
-		className: "flex items-start justify-between gap-4",
-		children: [/* @__PURE__ */ n("div", { children: [/* @__PURE__ */ t("h1", {
-			className: "text-2xl font-semibold text-text-primary",
-			children: /* @__PURE__ */ t(r, { children: i })
-		}), a && /* @__PURE__ */ t("p", {
-			className: "mt-1 text-sm text-text-secondary",
-			children: a
-		})] }), o && /* @__PURE__ */ t("div", {
-			className: "flex items-center gap-2 shrink-0",
-			children: o
+		className: "flex flex-col gap-2",
+		children: [/* @__PURE__ */ n("div", {
+			className: "flex items-start justify-between gap-4",
+			children: [/* @__PURE__ */ n("div", { children: [/* @__PURE__ */ t("h1", {
+				className: "text-2xl font-semibold text-text-primary",
+				children: /* @__PURE__ */ t(r, { children: a })
+			}), o && /* @__PURE__ */ t("p", {
+				className: "mt-1 text-sm text-text-secondary",
+				children: o
+			})] }), s && /* @__PURE__ */ t("div", {
+				className: "flex items-center gap-2 shrink-0",
+				children: s
+			})]
+		}), u && /* @__PURE__ */ t(i, {
+			className: "max-w-3xl",
+			children: u
 		})]
-	}), s]
+	}), c]
 });
 //#endregion
-export { i as PageLayout };
+export { a as PageLayout };
 //# sourceMappingURL=PageLayout.js.map

package/dist/housingvista/components/PageLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PageLayout.js","names":[],"sources":["../../../src/housingvista/components/PageLayout.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\nimport { GradientText } from '@burdenoff/fe-libs/ui';\nimport { cn } from '../utils/helpers';\n\ninterface PageLayoutProps {\n title: string;\n description?: string;\n actions?: ReactNode;\n children: ReactNode;\n className?: string;\n}\n\nexport const PageLayout: FC<PageLayoutProps> = ({ title, description, actions, children, className }) => {\n return (\n <div className={cn('flex flex-col gap-6 p-6', className)}>\n <div className=\"flex items-start justify-between gap-4\">\n <div>\n <h1 className=\"text-2xl font-semibold text-text-primary\">\n <GradientText>{title}</GradientText>\n </h1>\n {description && <p className=\"mt-1 text-sm text-text-secondary\">{description}</p>}\n </div>\n {actions && <div className=\"flex items-center gap-2 shrink-0\">{actions}</div>}\n </div>\n {children}\n </div>\n );\n};\n"],"mappings":";;;;~~AAYA~~,IAAa,KAAmC,~~EAAE~~,~~UAAO~~,~~gBAAa~~,~~YAAS~~,~~aAAU~~,~~mBAErF~~,kBAAC,OAAD;CAAK,WAAW,EAAG,2BAA2B,EAAU;WAAxD,CACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;~~GAAI~~,WAAU;~~aACZ~~,kBAAC,GAAD,EAAA,UAAe,GAAqB,CAAA;~~GACjC~~,CAAA,EACJ,KAAe,kBAAC,KAAD;~~GAAG~~,WAAU;~~aAAoC~~;~~GAAgB~~,CAAA,CAC7E,EAAA,CAAA,EACL,KAAW,kBAAC,OAAD;~~GAAK~~,WAAU;~~aAAoC~~;~~GAAc~~,CAAA,CACzE;KACL,EACG"}
1	+ {"version":3,"file":"PageLayout.js","names":[],"sources":["../../../src/housingvista/components/PageLayout.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\nimport { GradientText, PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { cn } from '../utils/helpers';\n\ninterface PageLayoutProps {\n title: string;\n description?: string;\n actions?: ReactNode;\n children: ReactNode;\n className?: string;\n /*\n Boff UI 2.0 — a calm one/two-line \"story\" explaining WHAT this page is for\n * and the use-case, so a new user understands it at a glance. Rendered with\n * the {@link PagePurpose} primitive directly under the title.\n */\n purpose?: ReactNode;\n}\n\nexport const PageLayout: FC<PageLayoutProps> = ({\n title,\n description,\n actions,\n children,\n className,\n purpose,\n}) => {\n return (\n <div className={cn('flex flex-col gap-6 p-6', className)}>\n <div className=\"flex flex-col gap-2\">\n <div className=\"flex items-start justify-between gap-4\">\n <div>\n <h1 className=\"text-2xl font-semibold text-text-primary\">\n <GradientText>{title}</GradientText>\n </h1>\n {description && <p className=\"mt-1 text-sm text-text-secondary\">{description}</p>}\n </div>\n {actions && <div className=\"flex items-center gap-2 shrink-0\">{actions}</div>}\n </div>\n {purpose && <PagePurpose className=\"max-w-3xl\">{purpose}</PagePurpose>}\n </div>\n {children}\n </div>\n );\n};\n"],"mappings":";;;;AAkBA,IAAa,KAAmC,EAC9C,UACA,gBACA,YACA,aACA,cACA,iBAGE,kBAAC,OAAD;CAAK,WAAW,EAAG,2BAA2B,EAAU;WAAxD,CACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;IAAI,WAAU;cACZ,kBAAC,GAAD,EAAA,UAAe,GAAqB,CAAA;IACjC,CAAA,EACJ,KAAe,kBAAC,KAAD;IAAG,WAAU;cAAoC;IAAgB,CAAA,CAC7E,EAAA,CAAA,EACL,KAAW,kBAAC,OAAD;IAAK,WAAU;cAAoC;IAAc,CAAA,CACzE;MACL,KAAW,kBAAC,GAAD;GAAa,WAAU;aAAa;GAAsB,CAAA,CAClE;KACL,EACG"}

package/dist/housingvista/pages/HomePage.js CHANGED Viewed

@@ -8,9 +8,9 @@ import { ArrowRight as l, BarChart3 as u, Building as d, DollarSign as f, Eye as
 import { useNavigate as v } from "react-router-dom";
 import { jsx as y, jsxs as b } from "react/jsx-runtime";
 import { useI18n as x } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { AuroraBackground as S, Button as C, EmphasisPanel as w, GlassCard as T, GradientText as E, IllustratedEmptyState as D } from "@burdenoff/fe-libs/ui";
+import { AuroraBackground as S, Button as C, EmphasisPanel as w, GlassCard as T, GradientText as E, IllustratedEmptyState as D, NextSteps as O, PagePurpose as k } from "@burdenoff/fe-libs/ui";
 //#region src/housingvista/pages/HomePage.tsx
-var O = {
+var A = {
 	property_listed: h,
 	transaction_update: m,
 	payment_received: f,
@@ -19,7 +19,7 @@ var O = {
 	document_uploaded: m,
 	offer_received: _,
 	lease_signed: m
-}, k = {
+}, j = {
 	property_listed: "text-purple-600 dark:text-purple-400",
 	transaction_update: "text-blue-600 dark:text-blue-400",
 	payment_received: "text-emerald-600 dark:text-emerald-400",
@@ -28,36 +28,36 @@ var O = {
 	document_uploaded: "text-indigo-600 dark:text-indigo-400",
 	offer_received: "text-emerald-600 dark:text-emerald-400",
 	lease_signed: "text-teal-600 dark:text-teal-400"
-}, A = () => {
-	let h = v(), { t: A } = x(), { data: j } = a(), { data: M } = s(), { data: N } = o(), P = (e, t) => {
-		let n = A(e);
+}, M = () => {
+	let h = v(), { t: M } = x(), { data: N } = a(), { data: P } = s(), { data: F } = o(), I = (e, t) => {
+		let n = M(e);
 		return n === e ? t : n;
-	}, F = [
+	}, L = [
 		{
-			title: P("housingvista.home.quickActions.addProperty.title", "Add Property"),
-			description: P("housingvista.home.quickActions.addProperty.description", "List a new property"),
+			title: I("housingvista.home.quickActions.addProperty.title", "Add Property"),
+			description: I("housingvista.home.quickActions.addProperty.description", "List a new property"),
 			icon: g,
 			path: "properties/new"
 		},
 		{
-			title: P("housingvista.home.quickActions.viewAnalytics.title", "View Analytics"),
-			description: P("housingvista.home.quickActions.viewAnalytics.description", "Check performance metrics"),
+			title: I("housingvista.home.quickActions.viewAnalytics.title", "View Analytics"),
+			description: I("housingvista.home.quickActions.viewAnalytics.description", "Check performance metrics"),
 			icon: u,
 			path: "analytics"
 		},
 		{
-			title: P("housingvista.home.quickActions.manageTransactions.title", "Manage Transactions"),
-			description: P("housingvista.home.quickActions.manageTransactions.description", "Handle ongoing deals"),
+			title: I("housingvista.home.quickActions.manageTransactions.title", "Manage Transactions"),
+			description: I("housingvista.home.quickActions.manageTransactions.description", "Handle ongoing deals"),
 			icon: m,
 			path: "transactions"
 		},
 		{
-			title: P("housingvista.home.quickActions.browseProperties.title", "Browse Properties"),
-			description: P("housingvista.home.quickActions.browseProperties.description", "Explore listings"),
+			title: I("housingvista.home.quickActions.browseProperties.title", "Browse Properties"),
+			description: I("housingvista.home.quickActions.browseProperties.description", "Explore listings"),
 			icon: d,
 			path: "properties"
 		}
-	], I = c(() => N.slice(0, 6), [N]);
+	], R = c(() => F.slice(0, 6), [F]);
 	return /* @__PURE__ */ b("div", {
 		className: "space-y-6 p-6",
 		children: [
@@ -67,45 +67,72 @@ var O = {
 					className: "relative flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between",
 					children: [/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("h1", {
 						className: "text-3xl font-bold text-text-primary",
-						children: /* @__PURE__ */ y(E, { children: P("housingvista.home.header.title", "Welcome back!") })
+						children: /* @__PURE__ */ y(E, { children: I("housingvista.home.header.title", "Welcome back!") })
 					}), /* @__PURE__ */ y("p", {
 						className: "mt-1 text-text-secondary",
-						children: P("housingvista.home.header.description", "Here's what's happening with your real estate portfolio today.")
+						children: I("housingvista.home.header.description", "Here's what's happening with your real estate portfolio today.")
 					})] }), /* @__PURE__ */ b(C, {
 						onClick: () => h("properties/new"),
 						className: "gap-2 self-start lg:self-auto",
-						children: [/* @__PURE__ */ y(g, { className: "h-4 w-4" }), P("housingvista.home.header.quickAdd", "Quick Add")]
+						children: [/* @__PURE__ */ y(g, { className: "h-4 w-4" }), I("housingvista.home.header.quickAdd", "Quick Add")]
 					})]
 				})]
 			}),
+			/* @__PURE__ */ y(k, {
+				className: "max-w-3xl",
+				children: I("housingvista.home.purpose", "Your real-estate command center. See your portfolio at a glance, jump to the things you do most, and pick up where you left off — from listing a property to tracking deals and analytics.")
+			}),
+			/* @__PURE__ */ y(O, {
+				storageKey: "housingvista-home",
+				steps: [
+					{
+						id: "add-property",
+						label: I("housingvista.home.nextSteps.addProperty", "List your first property"),
+						description: I("housingvista.home.nextSteps.addPropertyDesc", "Create a market-ready listing in a few guided steps."),
+						onClick: () => h("properties/new")
+					},
+					{
+						id: "browse",
+						label: I("housingvista.home.nextSteps.browse", "Browse properties"),
+						description: I("housingvista.home.nextSteps.browseDesc", "Explore listings and open one for full details."),
+						onClick: () => h("properties")
+					},
+					{
+						id: "analytics",
+						label: I("housingvista.home.nextSteps.analytics", "Review your analytics"),
+						description: I("housingvista.home.nextSteps.analyticsDesc", "Check portfolio performance and market insights."),
+						onClick: () => h("analytics")
+					}
+				]
+			}),
 			/* @__PURE__ */ b("div", {
 				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
 				children: [
 					/* @__PURE__ */ y(r, {
-						label: P("housingvista.home.stats.totalProperties", "Total Properties"),
-						value: j.totalProperties,
+						label: I("housingvista.home.stats.totalProperties", "Total Properties"),
+						value: N.totalProperties,
 						icon: /* @__PURE__ */ y(d, { className: "h-5 w-5" }),
 						trend: "up",
 						change: 12,
 						featured: !0
 					}),
 					/* @__PURE__ */ y(r, {
-						label: P("housingvista.home.stats.activeListings", "Active Listings"),
-						value: j.activeTransactions,
+						label: I("housingvista.home.stats.activeListings", "Active Listings"),
+						value: N.activeTransactions,
 						icon: /* @__PURE__ */ y(_, { className: "h-5 w-5" }),
 						trend: "up",
 						change: 8
 					}),
 					/* @__PURE__ */ y(r, {
-						label: P("housingvista.home.stats.totalViews", "Total Views"),
+						label: I("housingvista.home.stats.totalViews", "Total Views"),
 						value: t(12540),
 						icon: /* @__PURE__ */ y(p, { className: "h-5 w-5" }),
 						trend: "down",
 						change: -2
 					}),
 					/* @__PURE__ */ y(r, {
-						label: P("housingvista.home.stats.monthlyRevenue", "Monthly Revenue"),
-						value: j.monthlyRevenue,
+						label: I("housingvista.home.stats.monthlyRevenue", "Monthly Revenue"),
+						value: N.monthlyRevenue,
 						prefix: "$",
 						icon: /* @__PURE__ */ y(f, { className: "h-5 w-5" }),
 						trend: "up",
@@ -124,11 +151,11 @@ var O = {
 							className: "border-b border-border-seam px-5 py-4",
 							children: /* @__PURE__ */ y("h2", {
 								className: "text-base font-semibold text-text-primary",
-								children: P("housingvista.home.quickActions.title", "Quick Actions")
+								children: I("housingvista.home.quickActions.title", "Quick Actions")
 							})
 						}), /* @__PURE__ */ y("div", {
 							className: "space-y-2 p-4",
-							children: F.map((e) => {
+							children: L.map((e) => {
 								let t = e.icon;
 								return /* @__PURE__ */ b("button", {
 									onClick: () => h(e.path),
@@ -158,15 +185,15 @@ var O = {
 							className: "border-b border-border-seam px-5 py-4",
 							children: /* @__PURE__ */ y("h2", {
 								className: "text-base font-semibold text-text-primary",
-								children: P("housingvista.home.recentActivity.title", "Recent Activity")
+								children: I("housingvista.home.recentActivity.title", "Recent Activity")
 							})
 						}), /* @__PURE__ */ y("div", {
 							className: "space-y-2 p-4",
-							children: M.slice(0, 6).map((t) => /* @__PURE__ */ b("div", {
+							children: P.slice(0, 6).map((t) => /* @__PURE__ */ b("div", {
 								className: "flex items-start gap-4 rounded-lg border border-border-seam bg-bg-surface/60 p-4 transition-colors hover:bg-bg-sunken/50",
 								children: [/* @__PURE__ */ y("div", {
 									className: "rounded-lg bg-bg-sunken p-2",
-									children: /* @__PURE__ */ y(O[t.type] ?? p, { className: e("h-5 w-5", k[t.type] ?? "text-text-secondary") })
+									children: /* @__PURE__ */ y(A[t.type] ?? p, { className: e("h-5 w-5", j[t.type] ?? "text-text-secondary") })
 								}), /* @__PURE__ */ b("div", {
 									className: "flex-1 min-w-0",
 									children: [
@@ -196,27 +223,27 @@ var O = {
 					className: "flex items-center justify-between border-b border-border-seam px-5 py-4",
 					children: [/* @__PURE__ */ y("h2", {
 						className: "text-base font-semibold text-text-primary",
-						children: P("housingvista.home.recentProperties.title", "Recent Properties")
+						children: I("housingvista.home.recentProperties.title", "Recent Properties")
 					}), /* @__PURE__ */ b("button", {
 						onClick: () => h("properties"),
 						className: "inline-flex min-h-[44px] items-center gap-1 text-sm font-medium text-text-secondary transition-colors hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)] rounded-md px-1",
-						children: [P("housingvista.home.recentProperties.viewAll", "View All"), /* @__PURE__ */ y(l, { className: "h-4 w-4" })]
+						children: [I("housingvista.home.recentProperties.viewAll", "View All"), /* @__PURE__ */ y(l, { className: "h-4 w-4" })]
 					})]
-				}), I.length === 0 ? /* @__PURE__ */ y("div", {
+				}), R.length === 0 ? /* @__PURE__ */ y("div", {
 					className: "p-4",
 					children: /* @__PURE__ */ y(D, {
 						illustration: "empty-data",
-						title: P("housingvista.home.recentProperties.empty.title", "No properties yet"),
-						description: P("housingvista.home.recentProperties.empty.description", "List your first property to see it appear here."),
+						title: I("housingvista.home.recentProperties.empty.title", "No properties yet"),
+						description: I("housingvista.home.recentProperties.empty.description", "List your first property to see it appear here."),
 						action: /* @__PURE__ */ b(C, {
 							onClick: () => h("properties/new"),
 							className: "gap-2",
-							children: [/* @__PURE__ */ y(g, { className: "h-4 w-4" }), P("housingvista.home.header.quickAdd", "Quick Add")]
+							children: [/* @__PURE__ */ y(g, { className: "h-4 w-4" }), I("housingvista.home.header.quickAdd", "Quick Add")]
 						})
 					})
 				}) : /* @__PURE__ */ y("div", {
 					className: "grid grid-cols-1 gap-4 p-4 sm:grid-cols-2 lg:grid-cols-3",
-					children: I.map((e) => /* @__PURE__ */ y(i, {
+					children: R.map((e) => /* @__PURE__ */ y(i, {
 						id: e.id,
 						title: e.title,
 						price: e.price.amount,
@@ -237,6 +264,6 @@ var O = {
 	});
 };
 //#endregion
-export { A as HomePage };
+export { M as HomePage };
 //# sourceMappingURL=HomePage.js.map