@loafmarkets/ui 0.1.36 → 0.1.37

package/dist/index.d.mts

@@ -591,6 +591,8 @@ declare const PropertySubheader: React$1.ForwardRefExoticComponent<React$1.HTMLA
 type PropertyAddressOption = {
     id: string;
     label: string;
+    subtitle?: string;
+    status?: string;
 };
 type PropertyValueSummary = {
     value: number;
@@ -754,12 +756,13 @@ type OrderType = 'MARKET' | 'LIMIT';
 type TimeInForce = 'GTC' | 'IOC' | 'FOK' | 'GTD';
 type OrderStatus = 'OPEN' | 'PARTIALLY_FILLED' | 'FILLED' | 'CANCELLED' | 'REJECTED';
 interface OfferingOrder {
+    readonly ipoOrderId?: number;
     readonly tokenName: string;
     readonly txHash: string;
     readonly price: number;
     readonly quantity: number;
     readonly status: string;
-    readonly imageUrl: string;
+    readonly imageUrl?: string;
     readonly createdAt: number;
 }
 interface OrderHistoryItem {
@@ -832,6 +835,14 @@ type PortfolioActivityPanelProps = {
 };
 declare function PortfolioActivityPanel({ positions, showPositionsTab, onPositionClick, offeringOrders, openOrders, orderHistory, tradeHistory, transfers, onCancelOrder, cancellingOrderId, defaultTab, pageSize, blockExplorerBaseUrl, className, style, }: PortfolioActivityPanelProps): react_jsx_runtime.JSX.Element;
 
+type SelectorItem = {
+    readonly tokenName: string;
+    readonly ticker: string;
+    readonly streetAddress: string;
+    readonly suburb: string;
+    readonly status: string;
+};
+
 type IpoStatus = 'PENDING' | 'LIVE' | 'CLOSED' | 'CANCELLED';
 type SaleData = {
     loading: boolean;
@@ -883,6 +894,8 @@ type PropertyBuyProps = {
     recentOrders?: readonly IpoRecentOrder[];
     ordersAllocated?: number;
     subscribers?: number;
+    selectorItems?: readonly SelectorItem[];
+    onSelectorSelect?: (tokenName: string) => void;
     portfolioActivity?: {
         positions?: readonly PortfolioPosition[];
         onPositionClick?: (tokenName: string, isIpo: boolean) => void;
@@ -895,7 +908,7 @@ type PropertyBuyProps = {
         cancellingOrderId?: number | null;
     };
 };
-declare function PropertyBuy({ propertyName, propertyLocation: propertyLocationLabel, tokenDisplayName, tokenSymbol, tokenName, isAuthenticated, onSignIn, saleData, walletUsdcBalance, walletPropertyTokenBalance, onPurchase, purchaseStatus, purchaseError, onDeposit, opensAt, isPrivateClient, recentOrders, ordersAllocated, subscribers, portfolioActivity, }: PropertyBuyProps): react_jsx_runtime.JSX.Element;
+declare function PropertyBuy({ propertyName, propertyLocation: propertyLocationLabel, tokenDisplayName, tokenSymbol, tokenName, isAuthenticated, onSignIn, saleData, walletUsdcBalance, walletPropertyTokenBalance, onPurchase, purchaseStatus, purchaseError, onDeposit, opensAt, isPrivateClient, recentOrders, ordersAllocated, subscribers, selectorItems, onSelectorSelect, portfolioActivity, }: PropertyBuyProps): react_jsx_runtime.JSX.Element;
 
 type OwnerBookingProps = {
     propertyName?: string | null;

package/dist/index.d.ts

@@ -591,6 +591,8 @@ declare const PropertySubheader: React$1.ForwardRefExoticComponent<React$1.HTMLA
 type PropertyAddressOption = {
     id: string;
     label: string;
+    subtitle?: string;
+    status?: string;
 };
 type PropertyValueSummary = {
     value: number;
@@ -754,12 +756,13 @@ type OrderType = 'MARKET' | 'LIMIT';
 type TimeInForce = 'GTC' | 'IOC' | 'FOK' | 'GTD';
 type OrderStatus = 'OPEN' | 'PARTIALLY_FILLED' | 'FILLED' | 'CANCELLED' | 'REJECTED';
 interface OfferingOrder {
+    readonly ipoOrderId?: number;
     readonly tokenName: string;
     readonly txHash: string;
     readonly price: number;
     readonly quantity: number;
     readonly status: string;
-    readonly imageUrl: string;
+    readonly imageUrl?: string;
     readonly createdAt: number;
 }
 interface OrderHistoryItem {
@@ -832,6 +835,14 @@ type PortfolioActivityPanelProps = {
 };
 declare function PortfolioActivityPanel({ positions, showPositionsTab, onPositionClick, offeringOrders, openOrders, orderHistory, tradeHistory, transfers, onCancelOrder, cancellingOrderId, defaultTab, pageSize, blockExplorerBaseUrl, className, style, }: PortfolioActivityPanelProps): react_jsx_runtime.JSX.Element;
 
+type SelectorItem = {
+    readonly tokenName: string;
+    readonly ticker: string;
+    readonly streetAddress: string;
+    readonly suburb: string;
+    readonly status: string;
+};
+
 type IpoStatus = 'PENDING' | 'LIVE' | 'CLOSED' | 'CANCELLED';
 type SaleData = {
     loading: boolean;
@@ -883,6 +894,8 @@ type PropertyBuyProps = {
     recentOrders?: readonly IpoRecentOrder[];
     ordersAllocated?: number;
     subscribers?: number;
+    selectorItems?: readonly SelectorItem[];
+    onSelectorSelect?: (tokenName: string) => void;
     portfolioActivity?: {
         positions?: readonly PortfolioPosition[];
         onPositionClick?: (tokenName: string, isIpo: boolean) => void;
@@ -895,7 +908,7 @@ type PropertyBuyProps = {
         cancellingOrderId?: number | null;
     };
 };
-declare function PropertyBuy({ propertyName, propertyLocation: propertyLocationLabel, tokenDisplayName, tokenSymbol, tokenName, isAuthenticated, onSignIn, saleData, walletUsdcBalance, walletPropertyTokenBalance, onPurchase, purchaseStatus, purchaseError, onDeposit, opensAt, isPrivateClient, recentOrders, ordersAllocated, subscribers, portfolioActivity, }: PropertyBuyProps): react_jsx_runtime.JSX.Element;
+declare function PropertyBuy({ propertyName, propertyLocation: propertyLocationLabel, tokenDisplayName, tokenSymbol, tokenName, isAuthenticated, onSignIn, saleData, walletUsdcBalance, walletPropertyTokenBalance, onPurchase, purchaseStatus, purchaseError, onDeposit, opensAt, isPrivateClient, recentOrders, ordersAllocated, subscribers, selectorItems, onSelectorSelect, portfolioActivity, }: PropertyBuyProps): react_jsx_runtime.JSX.Element;
 
 type OwnerBookingProps = {
     propertyName?: string | null;

package/dist/index.js

@@ -6976,17 +6976,27 @@ var PropertyCompareBar = React5__namespace.forwardRef(
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(PropertySelectorDropdown, { $isOpen: isDropdownOpen && hasAddresses, children: normalizedAddresses.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
-          PropertySelectorOption,
-          {
-            onClick: (event) => {
-              event.stopPropagation();
-              handleAddressSelect(option.id);
+        /* @__PURE__ */ jsxRuntime.jsx(PropertySelectorDropdown, { $isOpen: isDropdownOpen && hasAddresses, children: normalizedAddresses.map((option) => {
+          const isSelected = option.id === resolvedSelectedId;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            PropertySelectorOption,
+            {
+              $selected: isSelected,
+              onClick: (event) => {
+                event.stopPropagation();
+                handleAddressSelect(option.id);
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(PropertySelectorName, { children: option.label }),
+                option.subtitle && /* @__PURE__ */ jsxRuntime.jsxs(PropertySelectorSubtitle, { children: [
+                  option.subtitle,
+                  option.status && option.status !== "LIVE" && /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.status === "PENDING" ? "Coming Soon" : option.status })
+                ] })
+              ]
             },
-            children: /* @__PURE__ */ jsxRuntime.jsx(PropertySelectorName, { children: option.label })
-          },
-          option.id
-        )) })
+            option.id
+          );
+        }) })
       ] }),
       propertyValueVariant === "pill" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         priceContent,
@@ -7087,33 +7097,64 @@ var PropertyAddress = styled24__default.default.div`
 `;
 var PropertySelectorDropdown = styled24__default.default.div`
   position: absolute;
-  top: 100%;
+  top: calc(100% + 12px);
   left: 0;
-  width: 100%;
-  max-width: 400px;
-  background-color: var(--color-card, #1f232b);
-  border-radius: 8px;
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
-  z-index: 100;
-  overflow: hidden;
+  right: 0;
+  max-width: 420px;
+  background: #0a0a0a;
+  border-radius: 16px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8), 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  z-index: 1000;
+  max-height: 360px;
+  overflow-y: auto;
+  border: 1px solid rgba(255, 255, 255, 0.08);
   display: ${(props) => props.$isOpen ? "block" : "none"};
+  animation: compareSlideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  @keyframes compareSlideDown {
+    from { opacity: 0; transform: translateY(-10px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
 `;
 var PropertySelectorOption = styled24__default.default.div`
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 1.25rem 1.5rem;
+  transition: all 0.2s ease;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
+  position: relative;
   cursor: pointer;
-  transition: background-color 0.2s;
 
-  &:hover {
-    background-color: rgba(255, 255, 255, 0.05);
+  &:last-child { border-bottom: none; }
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    background: ${(p) => p.$selected ? "var(--color-accent, #e6c87e)" : "transparent"};
+    transition: all 0.2s ease;
   }
 
-  &:last-child {
-    border-bottom: none;
+  ${(p) => p.$selected && `background: linear-gradient(90deg, rgba(230, 200, 126, 0.08) 0%, transparent 100%);`}
+
+  &:hover {
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0%, transparent 100%);
   }
 `;
 var PropertySelectorName = styled24__default.default.div`
   font-weight: 600;
+  font-size: 1rem;
+  color: #ffffff;
+  margin-bottom: 0.15rem;
+`;
+var PropertySelectorSubtitle = styled24__default.default.div`
+  font-size: 0.875rem;
+  color: rgba(255, 255, 255, 0.5);
+  span {
+    margin-left: 0.5rem;
+    color: var(--color-accent, #e6c87e);
+    font-size: 0.75rem;
+  }
 `;
 var PropertyValueBlock = styled24__default.default.div`
   display: flex;
@@ -7532,22 +7573,22 @@ var GymIcon = /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16"
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 18h4" })
 ] });
 var DEFAULT_FEATURES = [
-  { icon: BedIcon, value: "4", label: "Beds" },
-  { icon: BathIcon, value: "5", label: "Baths" },
-  { icon: CarIcon, value: "4", label: "Cars" },
+  { icon: BedIcon, value: "\u2014", label: "Beds" },
+  { icon: BathIcon, value: "\u2014", label: "Baths" },
+  { icon: CarIcon, value: "\u2014", label: "Cars" },
   { icon: PoolIcon, label: "Pool" },
   { icon: GardenIcon, label: "Garden" },
   { icon: GymIcon, label: "Gym" }
 ];
 var DEFAULT_PROPERTY_INFO = [
-  { label: "Property Type", value: "Contemporary House" },
-  { label: "Built", value: "2015" },
-  { label: "Ownership", value: "Freehold" },
-  { label: "Zoning", value: "R2 Low Density" },
-  { label: "Levels", value: "3" },
-  { label: "Status", value: "Rented", status: "active" }
+  { label: "Property Type", value: "N/A" },
+  { label: "Built", value: "N/A" },
+  { label: "Ownership", value: "N/A" },
+  { label: "Zoning", value: "N/A" },
+  { label: "Levels", value: "N/A" },
+  { label: "Status", value: "N/A" }
 ];
-var DEFAULT_DESCRIPTION = "A sweeping panorama across Sydney Harbour stretching from Manly to the iconic city skyline creates a spectacular backdrop from every level of this contemporary masterpiece.";
+var DEFAULT_DESCRIPTION = "Property description not available.";
 function PropertyOverview({
   propertyName,
   location,
@@ -8836,66 +8877,25 @@ var SignInButton = styled24__default.default.button`
     background: rgba(240, 185, 11, 0.1);
   }
 `;
-
-// src/components/property-buy/constants.ts
-var mockIPOList = [
-  { id: "musgrave", name: "8C Mcleod Street (Musgrave)", location: "Mosman, Sydney", status: "live" },
-  { id: "ipo-002", name: "15 Ocean View Drive", location: "Bondi, Sydney", status: "coming_soon" },
-  { id: "ipo-003", name: "42 Harbour Lane", location: "Mosman, Sydney", status: "coming_soon" }
-];
-var allNewsItems = [
-  { id: 1, title: "RBA signals potential rate cut in Q1 2026 - property stocks rally", type: "market" },
-  { id: 2, title: "Sydney unemployment drops to 3.1% - Eastern suburbs lead recovery", type: "market" },
-  { id: 3, title: "Musgrave heritage listing confirmed - protects architectural value", type: "property" },
-  { id: 4, title: "Mosman Council approves DA for Musgrave restoration works", type: "property" },
-  { id: 5, title: "Nearby 12 Mcleod St sells for $18.5M - sets new street record", type: "market" },
-  { id: 6, title: "Eastern suburbs rental yields reach 3.8% - highest in 5 years", type: "market" },
-  { id: 7, title: "Musgrave pool resurfacing completed - heritage sandstone preserved", type: "property" },
-  { id: 8, title: "Mosman median house price hits $7.2M - up 9% YoY", type: "market" },
-  { id: 9, title: "Musgrave gardens featured in Heritage NSW annual report", type: "property" },
-  { id: 10, title: "Lower North Shore vacancy rates drop to 1.2% - rental demand surges", type: "market" },
-  { id: 11, title: "Musgrave structural inspection complete - excellent condition confirmed", type: "property" },
-  { id: 12, title: "Sydney harbour views premium reaches 35% - Mosman leads growth", type: "market" },
-  { id: 13, title: "New security system installed at Musgrave - smart home integration", type: "property" },
-  { id: 14, title: "Heritage property demand up 22% - pre-Federation homes most sought", type: "market" }
-];
-var musgraveGalleryImages = [
-  { src: "/properties/Musgrave/ExteriorFront_Musgrave_Loafmarkets.jpg", title: "Exterior Front", subtitle: "Grand entrance" },
-  { src: "/properties/Musgrave/ExteriorDusk_Musgrave_Loafmarkets.jpg", title: "Exterior Dusk", subtitle: "Evening ambiance" },
-  { src: "/properties/Musgrave/LivingRoom_Musgrave_Loafmarkets.jpg", title: "Living Room", subtitle: "Spacious living" },
-  { src: "/properties/Musgrave/Kitchen_Musgrave_Loafmarkets.jpg", title: "Kitchen", subtitle: "Modern design" },
-  { src: "/properties/Musgrave/DiningRoom_Musgrave_Loafmarkets.jpg", title: "Dining Room", subtitle: "Elegant dining" },
-  { src: "/properties/Musgrave/BreakfastRoom_Musgrave_Loafmarkets.jpg", title: "Breakfast Room", subtitle: "Morning light" },
-  { src: "/properties/Musgrave/MainBedroom_Musgrave_Loafmarkets.jpg", title: "Main Bedroom", subtitle: "Master suite" },
-  { src: "/properties/Musgrave/GuestBedroom_Musgrave_Loafmarkets.jpg", title: "Guest Bedroom", subtitle: "Comfortable stay" },
-  { src: "/properties/Musgrave/Bathroom_Musgrave_Loafmarkets.jpg", title: "Bathroom", subtitle: "Luxury finishes" },
-  { src: "/properties/Musgrave/PoolArea_Musgrave_Loafmarkets.jpg", title: "Pool Area", subtitle: "Resort living" },
-  { src: "/properties/Musgrave/GardenView_Musgrave_Loafmarkets.jpg", title: "Garden View", subtitle: "Lush gardens" },
-  { src: "/properties/Musgrave/SideGarden_Musgrave_Loafmarkets.jpg", title: "Side Garden", subtitle: "Private retreat" },
-  { src: "/properties/Musgrave/AerialView_Musgrave_Loafmarkets.jpg", title: "Aerial View", subtitle: "Property overview" },
-  { src: "/properties/Musgrave/AerialLocation_Musgrave_Loafmarkets.jpg", title: "Aerial Location", subtitle: "Neighborhood" },
-  { src: "/properties/Musgrave/Floorplan_Musgrave_Loafmarkets.jpg", title: "Floorplan", subtitle: "Layout" }
-];
-var galleryCategories = [
-  { name: "Exterior", startIndex: 0 },
-  { name: "Living", startIndex: 2 },
-  { name: "Bedrooms", startIndex: 6 },
-  { name: "Outdoor", startIndex: 9 },
-  { name: "Aerial", startIndex: 12 },
-  { name: "Floorplan", startIndex: 14 }
-];
-var STATUS_COLOR2 = {
-  PENDING: "#D4AF37",
-  LIVE: "#0ecb81",
-  CLOSED: "#848e9c",
-  CANCELLED: "#f6465d"
-};
-function AssetSelectorBar({ propertyName, tokenPrice, offeringValuation }) {
+function AssetSelectorBar({
+  propertyName,
+  tokenPrice,
+  offeringValuation,
+  metrics: metricsProp,
+  currentTokenName,
+  selectorItems,
+  onSelect
+}) {
   const [isDropdownOpen, setIsDropdownOpen] = React5.useState(false);
+  const hasItems = selectorItems && selectorItems.length > 0;
+  const metrics = metricsProp ?? [
+    ...tokenPrice != null ? [{ label: "Unit Price", value: `$${tokenPrice.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`, accent: true }] : [],
+    ...offeringValuation != null ? [{ label: "Offering Valuation", value: `$${offeringValuation.toLocaleString()}` }] : []
+  ];
   return /* @__PURE__ */ jsxRuntime.jsx(AssetSelectorWrapper, { children: /* @__PURE__ */ jsxRuntime.jsxs(IPOAssetSelector, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(AssetSelectorDropdown, { onClick: () => setIsDropdownOpen((prev) => !prev), children: /* @__PURE__ */ jsxRuntime.jsxs(AssetName, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(AssetSelectorDropdown, { onClick: () => hasItems && setIsDropdownOpen((prev) => !prev), children: /* @__PURE__ */ jsxRuntime.jsxs(AssetName, { children: [
       propertyName,
-      /* @__PURE__ */ jsxRuntime.jsx(
+      hasItems && /* @__PURE__ */ jsxRuntime.jsx(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
@@ -8908,42 +8908,47 @@ function AssetSelectorBar({ propertyName, tokenPrice, offeringValuation }) {
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(SelectorMetrics, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(MetricLabel2, { children: "Unit Price" }),
-        /* @__PURE__ */ jsxRuntime.jsxs(MetricValue, { $accent: true, children: [
-          "$",
-          tokenPrice.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(Separator, { children: "|" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(MetricLabel2, { children: "Offering Valuation" }),
-        /* @__PURE__ */ jsxRuntime.jsxs(MetricValue, { children: [
+    metrics.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(SelectorMetrics, { children: metrics.map((m, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "contents" }, children: [
+      i > 0 && /* @__PURE__ */ jsxRuntime.jsx(Separator, { children: "|" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(MetricLabel2, { children: m.label }),
+          /* @__PURE__ */ jsxRuntime.jsx(MetricValue, { $accent: !!m.accent, children: m.value })
+        ] }),
+        m.change != null && /* @__PURE__ */ jsxRuntime.jsxs(MetricChange, { $positive: m.change >= 0, children: [
+          m.change >= 0 ? "\u2191" : "\u2193",
           "$",
-          offeringValuation.toLocaleString()
+          Math.abs(m.change).toLocaleString(void 0, { maximumFractionDigits: 0 })
         ] })
       ] })
-    ] }),
-    isDropdownOpen && /* @__PURE__ */ jsxRuntime.jsx(IPODropdown, { children: mockIPOList.map((ipo) => {
-      const isDisabled = ipo.status === "coming_soon";
+    ] }, m.label)) }),
+    isDropdownOpen && hasItems && /* @__PURE__ */ jsxRuntime.jsx(IPODropdown, { children: selectorItems.map((item) => {
+      const isCurrent = item.tokenName === currentTokenName;
+      const status = item.status?.toUpperCase();
+      const statusLabel = status === "PENDING" ? "Coming Soon" : status === "CLOSED" ? "Closed" : status === "CANCELLED" ? "Cancelled" : null;
       return /* @__PURE__ */ jsxRuntime.jsxs(
         IPOOption,
         {
           onClick: () => {
-            if (!isDisabled) setIsDropdownOpen(false);
+            if (!isCurrent && onSelect) {
+              onSelect(item.tokenName);
+            }
+            setIsDropdownOpen(false);
           },
-          $selected: ipo.id === "musgrave",
-          style: { opacity: isDisabled ? 0.4 : 1, cursor: isDisabled ? "not-allowed" : "pointer" },
+          $selected: isCurrent,
+          style: { cursor: isCurrent ? "default" : "pointer" },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(IPOOptionName, { children: ipo.name }),
+            /* @__PURE__ */ jsxRuntime.jsxs(IPOOptionName, { children: [
+              item.streetAddress,
+              item.ticker ? ` (${item.ticker})` : ""
+            ] }),
             /* @__PURE__ */ jsxRuntime.jsxs(IPOOptionLocation, { children: [
-              ipo.location,
-              isDisabled && /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Coming Soon" })
+              item.suburb,
+              statusLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { children: statusLabel })
             ] })
           ]
         },
-        ipo.id
+        item.tokenName
       );
     }) })
   ] }) });
@@ -8997,17 +9002,26 @@ var SelectorMetrics = styled24__default.default.div`
   border: 1px solid rgba(255,255,255,0.05);
 `;
 var MetricLabel2 = styled24__default.default.span`
-  font-size: 0.65rem;
+  font-size: 0.75rem;
   color: var(--color-text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   font-weight: 500;
+  margin-right: 0.5rem;
 `;
 var MetricValue = styled24__default.default.span`
-  font-size: 1.1rem;
+  font-size: 1.25rem;
   font-weight: 700;
   color: ${(p) => p.$accent ? "#D4AF37" : "#fff"};
 `;
+var MetricChange = styled24__default.default.span`
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: ${(p) => p.$positive ? "var(--color-positive, #0ecb81)" : "var(--color-negative, #f6465d)"};
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+`;
 var Separator = styled24__default.default.span`
   font-size: 1rem;
   color: rgba(255,255,255,0.2);
@@ -9715,7 +9729,7 @@ function OrderPanel({
   orderPlacedSuccess,
   lastOrderDetails,
   tokenQuantity,
-  feeInTokens,
+  feeInUsd,
   orderTotal,
   sliderValue,
   manualOrderAmount,
@@ -9752,17 +9766,17 @@ function OrderPanel({
   };
   const handleReceiveBlur = () => {
     setIsReceiveInputFocused(false);
-    const parsed = parseFloat(receiveInputValue) || 0;
-    const newOrderTotal = Math.round(parsed * tokenPrice);
-    if (newOrderTotal <= 0) {
+    const units = Math.floor(parseInt(receiveInputValue.replace(/[^0-9]/g, ""), 10) || 0);
+    const spend = units * tokenPrice;
+    if (units <= 0) {
       setManualOrderAmount(null);
       setSliderValue(0);
-    } else if (newOrderTotal >= availableBalance) {
+    } else if (spend >= availableBalance) {
       setManualOrderAmount(null);
       setSliderValue(100);
     } else {
-      setManualOrderAmount(newOrderTotal);
-      const ratio = availableBalance === 0 ? 0 : Math.round(Math.max(0, newOrderTotal / availableBalance * 100));
+      setManualOrderAmount(spend);
+      const ratio = availableBalance === 0 ? 0 : Math.round(Math.max(0, spend / availableBalance * 100));
       setSliderValue(ratio);
     }
   };
@@ -9884,12 +9898,12 @@ function OrderPanel({
             "input",
             {
               type: "text",
-              inputMode: "decimal",
-              value: isReceiveInputFocused ? receiveInputValue : tokenQuantity.toFixed(2),
+              inputMode: "numeric",
+              value: isReceiveInputFocused ? receiveInputValue : tokenQuantity.toString(),
               style: { color: "#0ecb81" },
               onFocus: (e) => {
                 setIsReceiveInputFocused(true);
-                setReceiveInputValue(tokenQuantity.toFixed(2));
+                setReceiveInputValue(tokenQuantity.toString());
                 e.target.select();
               },
               onBlur: handleReceiveBlur,
@@ -9916,7 +9930,7 @@ function OrderPanel({
         /* @__PURE__ */ jsxRuntime.jsxs(SummaryRow, { children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Buying" }),
           /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
-            tokenQuantity.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 }),
+            tokenQuantity.toLocaleString(),
             " ",
             tokenSymbol
           ] })
@@ -9928,9 +9942,9 @@ function OrderPanel({
             "%)"
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
-            feeInTokens.toFixed(2),
-            " ",
-            tokenSymbol
+            "$",
+            feeInUsd.toFixed(2),
+            " USD"
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(SummaryTotal, { children: [
@@ -11282,6 +11296,55 @@ var ButtonRow2 = styled24__default.default.div`
     box-shadow: 0 4px 12px rgba(14,203,129,0.3);
   }
 `;
+
+// src/components/property-buy/constants.ts
+var allNewsItems = [
+  { id: 1, title: "RBA signals potential rate cut in Q1 2026 - property stocks rally", type: "market" },
+  { id: 2, title: "Sydney unemployment drops to 3.1% - Eastern suburbs lead recovery", type: "market" },
+  { id: 3, title: "Musgrave heritage listing confirmed - protects architectural value", type: "property" },
+  { id: 4, title: "Mosman Council approves DA for Musgrave restoration works", type: "property" },
+  { id: 5, title: "Nearby 12 Mcleod St sells for $18.5M - sets new street record", type: "market" },
+  { id: 6, title: "Eastern suburbs rental yields reach 3.8% - highest in 5 years", type: "market" },
+  { id: 7, title: "Musgrave pool resurfacing completed - heritage sandstone preserved", type: "property" },
+  { id: 8, title: "Mosman median house price hits $7.2M - up 9% YoY", type: "market" },
+  { id: 9, title: "Musgrave gardens featured in Heritage NSW annual report", type: "property" },
+  { id: 10, title: "Lower North Shore vacancy rates drop to 1.2% - rental demand surges", type: "market" },
+  { id: 11, title: "Musgrave structural inspection complete - excellent condition confirmed", type: "property" },
+  { id: 12, title: "Sydney harbour views premium reaches 35% - Mosman leads growth", type: "market" },
+  { id: 13, title: "New security system installed at Musgrave - smart home integration", type: "property" },
+  { id: 14, title: "Heritage property demand up 22% - pre-Federation homes most sought", type: "market" }
+];
+var musgraveGalleryImages = [
+  { src: "/properties/Musgrave/ExteriorFront_Musgrave_Loafmarkets.jpg", title: "Exterior Front", subtitle: "Grand entrance" },
+  { src: "/properties/Musgrave/ExteriorDusk_Musgrave_Loafmarkets.jpg", title: "Exterior Dusk", subtitle: "Evening ambiance" },
+  { src: "/properties/Musgrave/LivingRoom_Musgrave_Loafmarkets.jpg", title: "Living Room", subtitle: "Spacious living" },
+  { src: "/properties/Musgrave/Kitchen_Musgrave_Loafmarkets.jpg", title: "Kitchen", subtitle: "Modern design" },
+  { src: "/properties/Musgrave/DiningRoom_Musgrave_Loafmarkets.jpg", title: "Dining Room", subtitle: "Elegant dining" },
+  { src: "/properties/Musgrave/BreakfastRoom_Musgrave_Loafmarkets.jpg", title: "Breakfast Room", subtitle: "Morning light" },
+  { src: "/properties/Musgrave/MainBedroom_Musgrave_Loafmarkets.jpg", title: "Main Bedroom", subtitle: "Master suite" },
+  { src: "/properties/Musgrave/GuestBedroom_Musgrave_Loafmarkets.jpg", title: "Guest Bedroom", subtitle: "Comfortable stay" },
+  { src: "/properties/Musgrave/Bathroom_Musgrave_Loafmarkets.jpg", title: "Bathroom", subtitle: "Luxury finishes" },
+  { src: "/properties/Musgrave/PoolArea_Musgrave_Loafmarkets.jpg", title: "Pool Area", subtitle: "Resort living" },
+  { src: "/properties/Musgrave/GardenView_Musgrave_Loafmarkets.jpg", title: "Garden View", subtitle: "Lush gardens" },
+  { src: "/properties/Musgrave/SideGarden_Musgrave_Loafmarkets.jpg", title: "Side Garden", subtitle: "Private retreat" },
+  { src: "/properties/Musgrave/AerialView_Musgrave_Loafmarkets.jpg", title: "Aerial View", subtitle: "Property overview" },
+  { src: "/properties/Musgrave/AerialLocation_Musgrave_Loafmarkets.jpg", title: "Aerial Location", subtitle: "Neighborhood" },
+  { src: "/properties/Musgrave/Floorplan_Musgrave_Loafmarkets.jpg", title: "Floorplan", subtitle: "Layout" }
+];
+var galleryCategories = [
+  { name: "Exterior", startIndex: 0 },
+  { name: "Living", startIndex: 2 },
+  { name: "Bedrooms", startIndex: 6 },
+  { name: "Outdoor", startIndex: 9 },
+  { name: "Aerial", startIndex: 12 },
+  { name: "Floorplan", startIndex: 14 }
+];
+var STATUS_COLOR2 = {
+  PENDING: "#D4AF37",
+  LIVE: "#0ecb81",
+  CLOSED: "#848e9c",
+  CANCELLED: "#f6465d"
+};
 function PropertyBuy({
   propertyName = "Loaf Property",
   propertyLocation: propertyLocationLabel = "Sydney, NSW",
@@ -11302,10 +11365,12 @@ function PropertyBuy({
   recentOrders = [],
   ordersAllocated = 0,
   subscribers = 0,
+  selectorItems,
+  onSelectorSelect,
   portfolioActivity
 }) {
   const [sliderValue, setSliderValue] = React5.useState(0);
-  const [availableBalance, setAvailableBalance] = React5.useState(walletUsdcBalance ?? 125e3);
+  const [availableBalance, setAvailableBalance] = React5.useState(walletUsdcBalance ?? 0);
   const [manualOrderAmount, setManualOrderAmount] = React5.useState(null);
   const [ownedTokens, setOwnedTokens] = React5.useState(0);
   const [displayedOwnedTokens, setDisplayedOwnedTokens] = React5.useState(0);
@@ -11335,11 +11400,10 @@ function PropertyBuy({
   const statusColor = STATUS_COLOR2[ipoStatus] ?? "#D4AF37";
   const displayStatusLabel = isPrivateClient && ipoStatus !== "LIVE" ? "Private Client Access" : statusLabel;
   const displayStatusColor = isPrivateClient && ipoStatus !== "LIVE" ? "#D4AF37" : statusColor;
-  const totalSpend = manualOrderAmount !== null ? manualOrderAmount : Math.round(sliderValue / 100 * availableBalance);
-  const grossTokens = totalSpend / tokenPrice;
-  const feeInTokens = grossTokens * feeRate;
-  const tokenQuantity = grossTokens - feeInTokens;
-  const orderTotal = totalSpend;
+  const rawSpend = manualOrderAmount !== null ? manualOrderAmount : Math.round(sliderValue / 100 * availableBalance);
+  const tokenQuantity = Math.floor(rawSpend / tokenPrice);
+  const feeInUsd = tokenQuantity * tokenPrice * feeRate;
+  const orderTotal = tokenQuantity * tokenPrice + feeInUsd;
   const estExposure = (tokenQuantity / supplyToSell * 100).toFixed(4);
   const hasInsufficientFunds = orderTotal > availableBalance;
   React5.useEffect(() => {
@@ -11379,16 +11443,20 @@ function PropertyBuy({
     return false;
   };
   const confirmOrder = async () => {
-    setShowOrderConfirmModal(false);
     const tokenAmountInt = Math.floor(tokenQuantity);
-    if (tokenAmountInt <= 0) return;
+    if (tokenAmountInt <= 0) {
+      setShowOrderConfirmModal(false);
+      return;
+    }
     if (onPurchase) {
       try {
         await onPurchase(tokenAmountInt);
       } catch {
+        setShowOrderConfirmModal(false);
         return;
       }
     }
+    setShowOrderConfirmModal(false);
     if (walletUsdcBalance == null) {
       setAvailableBalance((prev) => prev - orderTotal);
     }
@@ -11440,7 +11508,10 @@ function PropertyBuy({
         {
           propertyName,
           tokenPrice,
-          offeringValuation
+          offeringValuation,
+          currentTokenName: tokenName,
+          selectorItems,
+          onSelect: onSelectorSelect
         }
       ) }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -11489,7 +11560,7 @@ function PropertyBuy({
             orderPlacedSuccess,
             lastOrderDetails,
             tokenQuantity,
-            feeInTokens,
+            feeInUsd,
             orderTotal,
             sliderValue,
             manualOrderAmount,