@burdenoff/microfe-housingvista 2026.703.11 → 2026.703.13

package/dist/housingvista/components/PropertyCard.js

@@ -1,12 +1,17 @@
-import { cn as e, formatCurrency as t, formatNumber as n } from "../utils/helpers.js";
+import { cn as e, formatCompactCurrency as t, formatNumber as n } from "../utils/helpers.js";
 import { StatusBadge as r } from "./StatusBadge.js";
-import { Bath as i, Bed as a, Heart as o, MapPin as s, Square as c } from "lucide-react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useState as i } from "react";
+import { Bath as a, Bed as o, Heart as s, Home as c, MapPin as l, Square as u } from "lucide-react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/housingvista/components/PropertyCard.tsx
-var d = {
+var p = {
 	available: "success",
 	active: "success",
 	listed: "success",
+	for_sale: "success",
+	"for sale": "success",
+	for_rent: "info",
+	"for rent": "info",
 	pending: "warning",
 	"under contract": "warning",
 	"under offer": "warning",
@@ -15,92 +20,112 @@ var d = {
 	off_market: "muted",
 	"off market": "muted",
 	draft: "muted"
-}, f = ({ title: f, price: p, priceType: m, pricePeriod: h, location: g, bedrooms: _, bathrooms: v, area: y, imageUrl: b, status: x, type: S, onClick: C, className: w, isShortlisted: T, onToggleShortlist: E }) => {
-	let D = m === "rent" ? `${t(p)}${h ? `/${h}` : "/mo"}` : t(p), O = d[x.toLowerCase()] ?? "default";
-	return /* @__PURE__ */ u("div", {
-		className: e("group overflow-hidden rounded-card border border-border-seam bg-bg-surface shadow-elevation-1 transition-[box-shadow,border-color] hover:border-border-strong hover:shadow-elevation-2", C && "cursor-pointer", w),
-		onClick: C,
-		children: [/* @__PURE__ */ u("div", {
-			className: "relative aspect-[16/10] overflow-hidden",
+}, m = () => /* @__PURE__ */ f("div", {
+	className: "relative flex h-full w-full items-center justify-center overflow-hidden bg-gradient-to-br from-[var(--color-action-primary-bg)]/15 via-bg-sunken to-[var(--color-accent-blue)]/15",
+	children: [/* @__PURE__ */ d("div", {
+		className: "absolute inset-0 opacity-[0.35]",
+		style: {
+			backgroundImage: "radial-gradient(circle at 1px 1px, var(--color-border-seam, rgba(120,120,120,.25)) 1px, transparent 0)",
+			backgroundSize: "16px 16px"
+		}
+	}), /* @__PURE__ */ f("div", {
+		className: "relative flex flex-col items-center gap-2 text-text-secondary/70",
+		children: [/* @__PURE__ */ d(c, { className: "h-9 w-9" }), /* @__PURE__ */ d("span", {
+			className: "text-[11px] font-medium tracking-wide",
+			children: "HousingVista"
+		})]
+	})]
+}), h = ({ title: c, price: h, priceType: g, pricePeriod: _, currency: v = "USD", location: y, bedrooms: b, bathrooms: x, area: S, imageUrl: C, status: w, type: T, onClick: E, className: D, isShortlisted: O, onToggleShortlist: k }) => {
+	let [A, j] = i(!1), M = !!C && !A, N = t(h, v), P = g === "rent" ? `${N}${_ ? `/${_.replace("ly", "")}` : "/mo"}` : N, F = p[w.toLowerCase()] ?? "default";
+	return /* @__PURE__ */ f("div", {
+		className: e("group flex flex-col overflow-hidden rounded-card border border-border-seam bg-bg-surface shadow-elevation-1 transition-[box-shadow,border-color] hover:border-border-strong hover:shadow-elevation-2 focus-within:border-border-strong", E && "cursor-pointer", D),
+		onClick: E,
+		onKeyDown: (e) => {
+			E && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), E());
+		},
+		role: E ? "button" : void 0,
+		tabIndex: E ? 0 : void 0,
+		"aria-label": E ? `View ${c}` : void 0,
+		children: [/* @__PURE__ */ f("div", {
+			className: "relative aspect-[16/10] shrink-0 overflow-hidden",
 			children: [
-				b ? /* @__PURE__ */ l("img", {
-					src: b,
-					alt: f,
-					className: "h-full w-full object-cover"
-				}) : /* @__PURE__ */ l("div", {
-					className: "flex h-full w-full items-center justify-center bg-gradient-to-br from-bg-sunken to-bg-sunken/60",
-					children: /* @__PURE__ */ l(c, { className: "h-10 w-10 text-text-secondary/40" })
-				}),
-				/* @__PURE__ */ l("div", {
+				M ? /* @__PURE__ */ d("img", {
+					src: C,
+					alt: c,
+					loading: "lazy",
+					onError: () => j(!0),
+					className: "h-full w-full object-cover transition-[filter] duration-300 group-hover:brightness-[1.02]"
+				}) : /* @__PURE__ */ d(m, {}),
+				/* @__PURE__ */ d("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-bg-overlay/75 to-transparent" }),
+				/* @__PURE__ */ d("div", {
 					className: "absolute left-3 top-3",
-					children: /* @__PURE__ */ l(r, {
-						label: x,
-						variant: O,
+					children: /* @__PURE__ */ d(r, {
+						label: w,
+						variant: F,
 						dot: !0
 					})
 				}),
-				E && /* @__PURE__ */ l("button", {
+				k && /* @__PURE__ */ d("button", {
+					type: "button",
 					onClick: (e) => {
-						e.stopPropagation(), E();
+						e.stopPropagation(), k();
 					},
-					className: e("absolute right-3 top-3 rounded-full bg-bg-surface/80 p-1.5 backdrop-blur-sm transition-colors hover:bg-bg-surface", T ? "text-status-error-text" : "text-text-secondary"),
-					"aria-label": T ? "Remove from shortlist" : "Save to shortlist",
-					children: /* @__PURE__ */ l(o, { className: e("h-4 w-4", T && "fill-current") })
+					className: e("absolute right-3 top-3 rounded-full bg-bg-surface/85 p-2 shadow-elevation-1 backdrop-blur-sm transition-colors hover:bg-bg-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]", O ? "text-status-error-text" : "text-text-secondary"),
+					"aria-pressed": O,
+					"aria-label": O ? "Remove from shortlist" : "Save to shortlist",
+					children: /* @__PURE__ */ d(s, { className: e("h-4 w-4", O && "fill-current") })
 				}),
-				/* @__PURE__ */ l("div", {
+				/* @__PURE__ */ d("div", {
 					className: "absolute bottom-3 left-3",
-					children: /* @__PURE__ */ l("span", {
-						className: "rounded-md bg-bg-surface/80 px-2 py-1 text-xs font-medium text-text-primary backdrop-blur-sm",
-						children: S
+					children: /* @__PURE__ */ d("span", {
+						className: "text-lg font-bold text-text-inverse drop-shadow-sm",
+						children: P
+					})
+				}),
+				/* @__PURE__ */ d("div", {
+					className: "absolute bottom-3 right-3",
+					children: /* @__PURE__ */ d("span", {
+						className: "rounded-md bg-bg-surface/85 px-2 py-1 text-xs font-medium capitalize text-text-primary backdrop-blur-sm",
+						children: T
 					})
 				})
 			]
-		}), /* @__PURE__ */ u("div", {
-			className: "p-4",
+		}), /* @__PURE__ */ f("div", {
+			className: "flex flex-1 flex-col p-4",
 			children: [
-				/* @__PURE__ */ u("div", {
-					className: "flex items-baseline justify-between gap-2",
-					children: [/* @__PURE__ */ l("span", {
-						className: "text-lg font-bold text-text-primary",
-						children: D
-					}), m === "sale" && /* @__PURE__ */ l("span", {
-						className: "text-xs font-medium text-text-secondary",
-						children: "For Sale"
-					})]
-				}),
-				/* @__PURE__ */ l("h3", {
-					className: "mt-1 truncate text-sm font-medium text-text-primary",
-					children: f
+				/* @__PURE__ */ d("h3", {
+					className: "truncate text-sm font-semibold text-text-primary",
+					children: c
 				}),
-				/* @__PURE__ */ u("div", {
-					className: "mt-1.5 flex items-center gap-1 text-text-secondary",
-					children: [/* @__PURE__ */ l(s, { className: "h-3.5 w-3.5 shrink-0" }), /* @__PURE__ */ l("span", {
+				/* @__PURE__ */ f("div", {
+					className: "mt-1 flex items-center gap-1 text-text-secondary",
+					children: [/* @__PURE__ */ d(l, { className: "h-3.5 w-3.5 shrink-0" }), /* @__PURE__ */ d("span", {
 						className: "truncate text-xs",
-						children: g
+						children: y
 					})]
 				}),
-				/* @__PURE__ */ u("div", {
-					className: "mt-3 flex items-center gap-3 border-t border-border-subtle pt-3",
+				/* @__PURE__ */ f("div", {
+					className: "mt-3 flex items-center gap-4 border-t border-border-subtle pt-3",
 					children: [
-						_ != null && /* @__PURE__ */ u("div", {
-							className: "flex items-center gap-1 text-xs text-text-secondary",
-							children: [/* @__PURE__ */ l(a, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ u("span", { children: [
-								_,
+						b != null && /* @__PURE__ */ f("div", {
+							className: "flex items-center gap-1.5 text-xs text-text-secondary",
+							children: [/* @__PURE__ */ d(o, { className: "h-4 w-4" }), /* @__PURE__ */ f("span", { children: [
+								b,
 								" ",
-								_ === 1 ? "Bed" : "Beds"
+								b === 1 ? "Bed" : "Beds"
 							] })]
 						}),
-						v != null && /* @__PURE__ */ u("div", {
-							className: "flex items-center gap-1 text-xs text-text-secondary",
-							children: [/* @__PURE__ */ l(i, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ u("span", { children: [
-								v,
+						x != null && /* @__PURE__ */ f("div", {
+							className: "flex items-center gap-1.5 text-xs text-text-secondary",
+							children: [/* @__PURE__ */ d(a, { className: "h-4 w-4" }), /* @__PURE__ */ f("span", { children: [
+								x,
 								" ",
-								v === 1 ? "Bath" : "Baths"
+								x === 1 ? "Bath" : "Baths"
 							] })]
 						}),
-						/* @__PURE__ */ u("div", {
-							className: "flex items-center gap-1 text-xs text-text-secondary",
-							children: [/* @__PURE__ */ l(c, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ u("span", { children: [n(y), " sq ft"] })]
+						/* @__PURE__ */ f("div", {
+							className: "flex items-center gap-1.5 text-xs text-text-secondary",
+							children: [/* @__PURE__ */ d(u, { className: "h-4 w-4" }), /* @__PURE__ */ f("span", { children: [n(S), " sq ft"] })]
 						})
 					]
 				})
@@ -109,6 +134,6 @@ var d = {
 	});
 };
 //#endregion
-export { f as PropertyCard };
+export { h as PropertyCard };
 
 //# sourceMappingURL=PropertyCard.js.map

package/dist/housingvista/components/PropertyCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"PropertyCard.js","names":[],"sources":["../../../src/housingvista/components/PropertyCard.tsx"],"sourcesContent":["import { type FC } from 'react';\nimport { MapPin, Bed, Bath, Square, Heart } from 'lucide-react';\nimport { cn, formatCurrency, formatNumber } from '../utils/helpers';\nimport { StatusBadge } from './StatusBadge';\n\ninterface PropertyCardProps {\n  id: string;\n  title: string;\n  price: number;\n  priceType: 'sale' | 'rent';\n  pricePeriod?: string;\n  location: string;\n  bedrooms?: number;\n  bathrooms?: number;\n  area: number;\n  imageUrl?: string;\n  status: string;\n  type: string;\n  onClick?: () => void;\n  className?: string;\n  /** When provided the heart becomes a controlled shortlist toggle. */\n  isShortlisted?: boolean;\n  onToggleShortlist?: () => void;\n}\n\nconst statusVariantMap: Record<string, 'success' | 'warning' | 'error' | 'info' | 'default' | 'muted'> = {\n  available: 'success',\n  active: 'success',\n  listed: 'success',\n  pending: 'warning',\n  'under contract': 'warning',\n  'under offer': 'warning',\n  sold: 'error',\n  rented: 'error',\n  off_market: 'muted',\n  'off market': 'muted',\n  draft: 'muted',\n};\n\nexport const PropertyCard: FC<PropertyCardProps> = ({\n  title,\n  price,\n  priceType,\n  pricePeriod,\n  location,\n  bedrooms,\n  bathrooms,\n  area,\n  imageUrl,\n  status,\n  type,\n  onClick,\n  className,\n  isShortlisted,\n  onToggleShortlist,\n}) => {\n  const priceDisplay =\n    priceType === 'rent' ? `${formatCurrency(price)}${pricePeriod ? `/${pricePeriod}` : '/mo'}` : formatCurrency(price);\n\n  const badgeVariant = statusVariantMap[status.toLowerCase()] ?? 'default';\n\n  return (\n    <div\n      className={cn(\n        'group overflow-hidden rounded-card border border-border-seam bg-bg-surface shadow-elevation-1 transition-[box-shadow,border-color] hover:border-border-strong hover:shadow-elevation-2',\n        onClick && 'cursor-pointer',\n        className\n      )}\n      onClick={onClick}\n    >\n      {/* Image Section */}\n      <div className=\"relative aspect-[16/10] overflow-hidden\">\n        {imageUrl ? (\n          <img src={imageUrl} alt={title} className=\"h-full w-full object-cover\" />\n        ) : (\n          <div className=\"flex h-full w-full items-center justify-center bg-gradient-to-br from-bg-sunken to-bg-sunken/60\">\n            <Square className=\"h-10 w-10 text-text-secondary/40\" />\n          </div>\n        )}\n\n        {/* Overlays */}\n        <div className=\"absolute left-3 top-3\">\n          <StatusBadge label={status} variant={badgeVariant} dot />\n        </div>\n        {onToggleShortlist && (\n          <button\n            onClick={(e) => {\n              e.stopPropagation();\n              onToggleShortlist();\n            }}\n            className={cn(\n              'absolute right-3 top-3 rounded-full bg-bg-surface/80 p-1.5 backdrop-blur-sm transition-colors hover:bg-bg-surface',\n              isShortlisted ? 'text-status-error-text' : 'text-text-secondary'\n            )}\n            aria-label={isShortlisted ? 'Remove from shortlist' : 'Save to shortlist'}\n          >\n            <Heart className={cn('h-4 w-4', isShortlisted && 'fill-current')} />\n          </button>\n        )}\n        <div className=\"absolute bottom-3 left-3\">\n          <span className=\"rounded-md bg-bg-surface/80 px-2 py-1 text-xs font-medium text-text-primary backdrop-blur-sm\">\n            {type}\n          </span>\n        </div>\n      </div>\n\n      {/* Content Section */}\n      <div className=\"p-4\">\n        {/* Price */}\n        <div className=\"flex items-baseline justify-between gap-2\">\n          <span className=\"text-lg font-bold text-text-primary\">{priceDisplay}</span>\n          {priceType === 'sale' && <span className=\"text-xs font-medium text-text-secondary\">For Sale</span>}\n        </div>\n\n        {/* Title */}\n        <h3 className=\"mt-1 truncate text-sm font-medium text-text-primary\">{title}</h3>\n\n        {/* Location */}\n        <div className=\"mt-1.5 flex items-center gap-1 text-text-secondary\">\n          <MapPin className=\"h-3.5 w-3.5 shrink-0\" />\n          <span className=\"truncate text-xs\">{location}</span>\n        </div>\n\n        {/* Specs Row */}\n        <div className=\"mt-3 flex items-center gap-3 border-t border-border-subtle pt-3\">\n          {bedrooms != null && (\n            <div className=\"flex items-center gap-1 text-xs text-text-secondary\">\n              <Bed className=\"h-3.5 w-3.5\" />\n              <span>\n                {bedrooms} {bedrooms === 1 ? 'Bed' : 'Beds'}\n              </span>\n            </div>\n          )}\n          {bathrooms != null && (\n            <div className=\"flex items-center gap-1 text-xs text-text-secondary\">\n              <Bath className=\"h-3.5 w-3.5\" />\n              <span>\n                {bathrooms} {bathrooms === 1 ? 'Bath' : 'Baths'}\n              </span>\n            </div>\n          )}\n          <div className=\"flex items-center gap-1 text-xs text-text-secondary\">\n            <Square className=\"h-3.5 w-3.5\" />\n            <span>{formatNumber(area)} sq ft</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;AAyBA,IAAM,IAAmG;CACvG,WAAW;CACX,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,kBAAkB;CAClB,eAAe;CACf,MAAM;CACN,QAAQ;CACR,YAAY;CACZ,cAAc;CACd,OAAO;CACR,EAEY,KAAuC,EAClD,UACA,UACA,cACA,gBACA,aACA,aACA,cACA,SACA,aACA,WACA,SACA,YACA,cACA,kBACA,2BACI;CACJ,IAAM,IACJ,MAAc,SAAS,GAAG,EAAe,EAAM,GAAG,IAAc,IAAI,MAAgB,UAAU,EAAe,EAAM,EAE/G,IAAe,EAAiB,EAAO,aAAa,KAAK;AAE/D,QACE,kBAAC,OAAD;EACE,WAAW,EACT,0LACA,KAAW,kBACX,EACD;EACQ;YANX,CASE,kBAAC,OAAD;GAAK,WAAU;aAAf;IACG,IACC,kBAAC,OAAD;KAAK,KAAK;KAAU,KAAK;KAAO,WAAU;KAA+B,CAAA,GAEzE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD,EAAQ,WAAU,oCAAqC,CAAA;KACnD,CAAA;IAIR,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD;MAAa,OAAO;MAAQ,SAAS;MAAc,KAAA;MAAM,CAAA;KACrD,CAAA;IACL,KACC,kBAAC,UAAD;KACE,UAAU,MAAM;AAEd,MADA,EAAE,iBAAiB,EACnB,GAAmB;;KAErB,WAAW,EACT,qHACA,IAAgB,2BAA2B,sBAC5C;KACD,cAAY,IAAgB,0BAA0B;eAEtD,kBAAC,GAAD,EAAO,WAAW,EAAG,WAAW,KAAiB,eAAe,EAAI,CAAA;KAC7D,CAAA;IAEX,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,QAAD;MAAM,WAAU;gBACb;MACI,CAAA;KACH,CAAA;IACF;MAGN,kBAAC,OAAD;GAAK,WAAU;aAAf;IAEE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,QAAD;MAAM,WAAU;gBAAuC;MAAoB,CAAA,EAC1E,MAAc,UAAU,kBAAC,QAAD;MAAM,WAAU;gBAA0C;MAAe,CAAA,CAC9F;;IAGN,kBAAC,MAAD;KAAI,WAAU;eAAuD;KAAW,CAAA;IAGhF,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD,EAAQ,WAAU,wBAAyB,CAAA,EAC3C,kBAAC,QAAD;MAAM,WAAU;gBAAoB;MAAgB,CAAA,CAChD;;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf;MACG,KAAY,QACX,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,GAAD,EAAK,WAAU,eAAgB,CAAA,EAC/B,kBAAC,QAAD,EAAA,UAAA;QACG;QAAS;QAAE,MAAa,IAAI,QAAQ;QAChC,EAAA,CAAA,CACH;;MAEP,KAAa,QACZ,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,GAAD,EAAM,WAAU,eAAgB,CAAA,EAChC,kBAAC,QAAD,EAAA,UAAA;QACG;QAAU;QAAE,MAAc,IAAI,SAAS;QACnC,EAAA,CAAA,CACH;;MAER,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,GAAD,EAAQ,WAAU,eAAgB,CAAA,EAClC,kBAAC,QAAD,EAAA,UAAA,CAAO,EAAa,EAAK,EAAC,SAAa,EAAA,CAAA,CACnC;;MACF;;IACF;KACF"}
+{"version":3,"file":"PropertyCard.js","names":[],"sources":["../../../src/housingvista/components/PropertyCard.tsx"],"sourcesContent":["import { type FC, useState } from 'react';\nimport { MapPin, Bed, Bath, Square, Heart, Home } from 'lucide-react';\nimport { cn, formatNumber, formatCompactCurrency } from '../utils/helpers';\nimport { StatusBadge } from './StatusBadge';\n\ninterface PropertyCardProps {\n  id: string;\n  title: string;\n  price: number;\n  priceType: 'sale' | 'rent';\n  pricePeriod?: string;\n  /** ISO currency code for the price (defaults to USD). */\n  currency?: string;\n  location: string;\n  bedrooms?: number;\n  bathrooms?: number;\n  area: number;\n  imageUrl?: string;\n  status: string;\n  type: string;\n  onClick?: () => void;\n  className?: string;\n  /** When provided the heart becomes a controlled shortlist toggle. */\n  isShortlisted?: boolean;\n  onToggleShortlist?: () => void;\n}\n\nconst statusVariantMap: Record<string, 'success' | 'warning' | 'error' | 'info' | 'default' | 'muted'> = {\n  available: 'success',\n  active: 'success',\n  listed: 'success',\n  for_sale: 'success',\n  'for sale': 'success',\n  for_rent: 'info',\n  'for rent': 'info',\n  pending: 'warning',\n  'under contract': 'warning',\n  'under offer': 'warning',\n  sold: 'error',\n  rented: 'error',\n  off_market: 'muted',\n  'off market': 'muted',\n  draft: 'muted',\n};\n\n/** Tasteful branded fallback shown when a listing has no files-svc image. */\nconst PropertyPlaceholder: FC = () => (\n  <div className=\"relative flex h-full w-full items-center justify-center overflow-hidden bg-gradient-to-br from-[var(--color-action-primary-bg)]/15 via-bg-sunken to-[var(--color-accent-blue)]/15\">\n    <div\n      className=\"absolute inset-0 opacity-[0.35]\"\n      style={{\n        backgroundImage:\n          'radial-gradient(circle at 1px 1px, var(--color-border-seam, rgba(120,120,120,.25)) 1px, transparent 0)',\n        backgroundSize: '16px 16px',\n      }}\n    />\n    <div className=\"relative flex flex-col items-center gap-2 text-text-secondary/70\">\n      <Home className=\"h-9 w-9\" />\n      <span className=\"text-[11px] font-medium tracking-wide\">HousingVista</span>\n    </div>\n  </div>\n);\n\nexport const PropertyCard: FC<PropertyCardProps> = ({\n  title,\n  price,\n  priceType,\n  pricePeriod,\n  currency = 'USD',\n  location,\n  bedrooms,\n  bathrooms,\n  area,\n  imageUrl,\n  status,\n  type,\n  onClick,\n  className,\n  isShortlisted,\n  onToggleShortlist,\n}) => {\n  const [imgFailed, setImgFailed] = useState(false);\n  const showImage = Boolean(imageUrl) && !imgFailed;\n\n  const compactPrice = formatCompactCurrency(price, currency);\n  const priceDisplay =\n    priceType === 'rent' ? `${compactPrice}${pricePeriod ? `/${pricePeriod.replace('ly', '')}` : '/mo'}` : compactPrice;\n\n  const badgeVariant = statusVariantMap[status.toLowerCase()] ?? 'default';\n\n  return (\n    <div\n      className={cn(\n        'group flex flex-col overflow-hidden rounded-card border border-border-seam bg-bg-surface shadow-elevation-1 transition-[box-shadow,border-color] hover:border-border-strong hover:shadow-elevation-2 focus-within:border-border-strong',\n        onClick && 'cursor-pointer',\n        className\n      )}\n      onClick={onClick}\n      onKeyDown={(e) => {\n        if (onClick && (e.key === 'Enter' || e.key === ' ')) {\n          e.preventDefault();\n          onClick();\n        }\n      }}\n      role={onClick ? 'button' : undefined}\n      tabIndex={onClick ? 0 : undefined}\n      aria-label={onClick ? `View ${title}` : undefined}\n    >\n      {/* Image Section */}\n      <div className=\"relative aspect-[16/10] shrink-0 overflow-hidden\">\n        {showImage ? (\n          <img\n            src={imageUrl}\n            alt={title}\n            loading=\"lazy\"\n            onError={() => setImgFailed(true)}\n            className=\"h-full w-full object-cover transition-[filter] duration-300 group-hover:brightness-[1.02]\"\n          />\n        ) : (\n          <PropertyPlaceholder />\n        )}\n\n        {/* Gradient scrim so overlaid text stays legible over any photo */}\n        <div className=\"pointer-events-none absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-bg-overlay/75 to-transparent\" />\n\n        {/* Status pill (top-left) */}\n        <div className=\"absolute left-3 top-3\">\n          <StatusBadge label={status} variant={badgeVariant} dot />\n        </div>\n\n        {/* Shortlist heart (top-right) */}\n        {onToggleShortlist && (\n          <button\n            type=\"button\"\n            onClick={(e) => {\n              e.stopPropagation();\n              onToggleShortlist();\n            }}\n            className={cn(\n              'absolute right-3 top-3 rounded-full bg-bg-surface/85 p-2 shadow-elevation-1 backdrop-blur-sm transition-colors hover:bg-bg-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]',\n              isShortlisted ? 'text-status-error-text' : 'text-text-secondary'\n            )}\n            aria-pressed={isShortlisted}\n            aria-label={isShortlisted ? 'Remove from shortlist' : 'Save to shortlist'}\n          >\n            <Heart className={cn('h-4 w-4', isShortlisted && 'fill-current')} />\n          </button>\n        )}\n\n        {/* Price overlay (bottom-left) */}\n        <div className=\"absolute bottom-3 left-3\">\n          <span className=\"text-lg font-bold text-text-inverse drop-shadow-sm\">{priceDisplay}</span>\n        </div>\n\n        {/* Category chip (bottom-right) */}\n        <div className=\"absolute bottom-3 right-3\">\n          <span className=\"rounded-md bg-bg-surface/85 px-2 py-1 text-xs font-medium capitalize text-text-primary backdrop-blur-sm\">\n            {type}\n          </span>\n        </div>\n      </div>\n\n      {/* Content Section */}\n      <div className=\"flex flex-1 flex-col p-4\">\n        {/* Title */}\n        <h3 className=\"truncate text-sm font-semibold text-text-primary\">{title}</h3>\n\n        {/* Location */}\n        <div className=\"mt-1 flex items-center gap-1 text-text-secondary\">\n          <MapPin className=\"h-3.5 w-3.5 shrink-0\" />\n          <span className=\"truncate text-xs\">{location}</span>\n        </div>\n\n        {/* Specs Row */}\n        <div className=\"mt-3 flex items-center gap-4 border-t border-border-subtle pt-3\">\n          {bedrooms != null && (\n            <div className=\"flex items-center gap-1.5 text-xs text-text-secondary\">\n              <Bed className=\"h-4 w-4\" />\n              <span>\n                {bedrooms} {bedrooms === 1 ? 'Bed' : 'Beds'}\n              </span>\n            </div>\n          )}\n          {bathrooms != null && (\n            <div className=\"flex items-center gap-1.5 text-xs text-text-secondary\">\n              <Bath className=\"h-4 w-4\" />\n              <span>\n                {bathrooms} {bathrooms === 1 ? 'Bath' : 'Baths'}\n              </span>\n            </div>\n          )}\n          <div className=\"flex items-center gap-1.5 text-xs text-text-secondary\">\n            <Square className=\"h-4 w-4\" />\n            <span>{formatNumber(area)} sq ft</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/housingvista/hooks/messages.js

@@ -0,0 +1,66 @@
+import { gql as e } from "@apollo/client";
+import { useQuery as t } from "@apollo/client/react";
+//#region src/housingvista/hooks/messages.ts
+var n = e`
+  query HvConversations($first: Int, $sort: ConversationSort) {
+    conversations(first: $first, sort: $sort) {
+      edges {
+        node {
+          id
+          title
+          avatar
+          unreadCount
+          updatedAt
+          settings
+          lastMessage {
+            id
+            authorId
+            content
+            createdAt
+          }
+        }
+      }
+    }
+  }
+`, r = (e) => e && typeof e == "object" && !Array.isArray(e) ? e : null, i = (e) => typeof e == "string" && e.length > 0 ? e : null, a = (e) => {
+	let t = r(e?.metadata), n = r(t?.sourceContext), a = r(t?.channelLink), o = r(t?.jumpToContext), s = i(n?.product), c = i(a?.channelKey);
+	return {
+		isHousingVista: s === "housingvista" || c === "housingvista-widget",
+		contextHref: i(o?.href) ?? i(n?.contextHref),
+		entityType: i(n?.entityType)
+	};
+}, o = (e = 50) => {
+	let { data: r, loading: i, error: o, refetch: s } = t(n, {
+		variables: {
+			first: e,
+			sort: {
+				field: "LAST_MESSAGE_AT",
+				direction: "DESC"
+			}
+		},
+		fetchPolicy: "cache-and-network"
+	});
+	return {
+		data: (r?.conversations.edges ?? []).map((e) => e.node).filter((e) => a(e.settings).isHousingVista).map((e) => {
+			let t = a(e.settings);
+			return {
+				id: e.id,
+				title: e.title ?? "Conversation",
+				avatar: e.avatar,
+				unreadCount: e.unreadCount,
+				updatedAt: e.updatedAt,
+				lastMessageText: e.lastMessage?.content?.text ?? "",
+				lastMessageAt: e.lastMessage?.createdAt ?? null,
+				contextHref: t.contextHref,
+				entityType: t.entityType
+			};
+		}),
+		loading: i,
+		error: o,
+		refetch: s
+	};
+};
+//#endregion
+export { o as useHousingVistaConversations };
+
+//# sourceMappingURL=messages.js.map

package/dist/housingvista/hooks/messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","names":[],"sources":["../../../src/housingvista/hooks/messages.ts"],"sourcesContent":["/**\n * HousingVista inbox — the conversation list behind the `/housingvista/chat`\n * (Messages) surface. Reads the current user's workspace conversations from\n * `wspace-conversations-svc` and narrows them to the threads THIS product\n * created: `resolveContextConversation` stamps every HousingVista thread with a\n * `sourceContext.product = \"housingvista\"` (and `channelLink.channelKey =\n * \"housingvista-widget\"`) inside the conversation `settings`, so we filter on\n * that. Thread reads + sends reuse the shared platform hooks\n * (`useConversationMessages` / `useSendMessage`) — no stub, no mock data.\n * @module housingvista\n */\n\nimport { gql } from '@apollo/client';\nimport { useQuery } from '@apollo/client/react';\n\nconst GET_HV_CONVERSATIONS = gql`\n  query HvConversations($first: Int, $sort: ConversationSort) {\n    conversations(first: $first, sort: $sort) {\n      edges {\n        node {\n          id\n          title\n          avatar\n          unreadCount\n          updatedAt\n          settings\n          lastMessage {\n            id\n            authorId\n            content\n            createdAt\n          }\n        }\n      }\n    }\n  }\n`;\n\n/** A HousingVista thread as shown in the inbox list. */\nexport interface HvConversationSummary {\n  id: string;\n  title: string;\n  avatar: string | null;\n  unreadCount: number;\n  updatedAt: string;\n  lastMessageText: string;\n  lastMessageAt: string | null;\n  /** Deep link back to the property/service the thread is about, if any. */\n  contextHref: string | null;\n  /** e.g. `housingvista-property`, `housingvista-marketplace-service`. */\n  entityType: string | null;\n}\n\ninterface MessageContentJson {\n  text?: string;\n}\n\ninterface ConversationNode {\n  id: string;\n  title: string | null;\n  avatar: string | null;\n  unreadCount: number;\n  updatedAt: string;\n  settings: Record<string, unknown> | null;\n  lastMessage: {\n    id: string;\n    authorId: string;\n    content: MessageContentJson | null;\n    createdAt: string;\n  } | null;\n}\n\ninterface HvConversationsResult {\n  conversations: {\n    edges: { node: ConversationNode }[];\n  };\n}\n\n/** Safely read a nested object off an opaque JSON value. */\nconst asRecord = (value: unknown): Record<string, unknown> | null =>\n  value && typeof value === 'object' && !Array.isArray(value) ? (value as Record<string, unknown>) : null;\n\nconst asString = (value: unknown): string | null => (typeof value === 'string' && value.length > 0 ? value : null);\n\n/**\n * A conversation belongs to HousingVista when its source context (or channel\n * link) was stamped by this product. Reads the shape written by\n * `buildContextConversationSettings` in wspace-conversations-svc.\n */\nconst readHousingVistaContext = (\n  settings: Record<string, unknown> | null\n): { isHousingVista: boolean; contextHref: string | null; entityType: string | null } => {\n  const metadata = asRecord(settings?.metadata);\n  const sourceContext = asRecord(metadata?.sourceContext);\n  const channelLink = asRecord(metadata?.channelLink);\n  const jumpToContext = asRecord(metadata?.jumpToContext);\n\n  const product = asString(sourceContext?.product);\n  const channelKey = asString(channelLink?.channelKey);\n  const isHousingVista = product === 'housingvista' || channelKey === 'housingvista-widget';\n\n  return {\n    isHousingVista,\n    contextHref: asString(jumpToContext?.href) ?? asString(sourceContext?.contextHref),\n    entityType: asString(sourceContext?.entityType),\n  };\n};\n\n/**\n * The user's HousingVista conversations, most-recent first. Filtered client-side\n * to product-owned threads (see {@link readHousingVistaContext}); everything\n * else is honestly empty rather than fabricated.\n */\nexport const useHousingVistaConversations = (first = 50) => {\n  const { data, loading, error, refetch } = useQuery<HvConversationsResult>(GET_HV_CONVERSATIONS, {\n    variables: { first, sort: { field: 'LAST_MESSAGE_AT', direction: 'DESC' } },\n    fetchPolicy: 'cache-and-network',\n  });\n\n  const conversations: HvConversationSummary[] = (data?.conversations.edges ?? [])\n    .map((edge) => edge.node)\n    .filter((node) => readHousingVistaContext(node.settings).isHousingVista)\n    .map((node) => {\n      const context = readHousingVistaContext(node.settings);\n      return {\n        id: node.id,\n        title: node.title ?? 'Conversation',\n        avatar: node.avatar,\n        unreadCount: node.unreadCount,\n        updatedAt: node.updatedAt,\n        lastMessageText: node.lastMessage?.content?.text ?? '',\n        lastMessageAt: node.lastMessage?.createdAt ?? null,\n        contextHref: context.contextHref,\n        entityType: context.entityType,\n      };\n    });\n\n  return { data: conversations, loading, error, refetch };\n};\n"],"mappings":";;;AAeA,IAAM,IAAuB,CAAG;;;;;;;;;;;;;;;;;;;;;GAgE1B,KAAY,MAChB,KAAS,OAAO,KAAU,YAAY,CAAC,MAAM,QAAQ,EAAM,GAAI,IAAoC,MAE/F,KAAY,MAAmC,OAAO,KAAU,YAAY,EAAM,SAAS,IAAI,IAAQ,MAOvG,KACJ,MACuF;CACvF,IAAM,IAAW,EAAS,GAAU,SAAS,EACvC,IAAgB,EAAS,GAAU,cAAc,EACjD,IAAc,EAAS,GAAU,YAAY,EAC7C,IAAgB,EAAS,GAAU,cAAc,EAEjD,IAAU,EAAS,GAAe,QAAQ,EAC1C,IAAa,EAAS,GAAa,WAAW;AAGpD,QAAO;EACL,gBAHqB,MAAY,kBAAkB,MAAe;EAIlE,aAAa,EAAS,GAAe,KAAK,IAAI,EAAS,GAAe,YAAY;EAClF,YAAY,EAAS,GAAe,WAAW;EAChD;GAQU,KAAgC,IAAQ,OAAO;CAC1D,IAAM,EAAE,SAAM,YAAS,UAAO,eAAY,EAAgC,GAAsB;EAC9F,WAAW;GAAE;GAAO,MAAM;IAAE,OAAO;IAAmB,WAAW;IAAQ;GAAE;EAC3E,aAAa;EACd,CAAC;AAoBF,QAAO;EAAE,OAlBuC,GAAM,cAAc,SAAS,EAAE,EAC5E,KAAK,MAAS,EAAK,KAAK,CACxB,QAAQ,MAAS,EAAwB,EAAK,SAAS,CAAC,eAAe,CACvE,KAAK,MAAS;GACb,IAAM,IAAU,EAAwB,EAAK,SAAS;AACtD,UAAO;IACL,IAAI,EAAK;IACT,OAAO,EAAK,SAAS;IACrB,QAAQ,EAAK;IACb,aAAa,EAAK;IAClB,WAAW,EAAK;IAChB,iBAAiB,EAAK,aAAa,SAAS,QAAQ;IACpD,eAAe,EAAK,aAAa,aAAa;IAC9C,aAAa,EAAQ;IACrB,YAAY,EAAQ;IACrB;IACD;EAE0B;EAAS;EAAO;EAAS"}