@loafmarkets/ui 0.0.1

package/dist/index.mjs

@@ -0,0 +1,1660 @@
+import * as React5 from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { CalendarDays, ArrowUpRight, Newspaper, BedDouble, Bath, CarFront, Building2, Sparkles, LineChart } from 'lucide-react';
+import { createChart } from 'lightweight-charts';
+
+// src/components/button.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var buttonVariants = cva(
+  "inline-flex items-center justify-center font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        primary: "bg-teal-500 text-slate-950 hover:bg-teal-400 focus-visible:ring-teal-200",
+        accent: "bg-[var(--color-accent,#e6c87e)] text-black hover:bg-[var(--color-accent-hover,#f8d12f)] focus-visible:ring-[var(--color-accent,#e6c87e)]",
+        accentOutline: "border border-[var(--color-accent,#e6c87e)] bg-transparent text-[var(--color-accent,#e6c87e)] hover:bg-[rgba(230,200,126,0.10)] focus-visible:ring-[var(--color-accent,#e6c87e)]",
+        media: "border border-white/10 bg-transparent text-white/90 hover:bg-white/5 hover:border-[var(--color-accent,#e6c87e)] hover:text-[var(--color-accent,#e6c87e)] focus-visible:ring-[var(--color-accent,#e6c87e)]",
+        outline: "border border-slate-800/20 bg-white text-slate-900 hover:border-slate-800/40 focus-visible:ring-slate-200",
+        ghost: "bg-transparent text-slate-900 hover:bg-slate-900/5 focus-visible:ring-slate-200",
+        danger: "bg-rose-500 text-white hover:bg-rose-400 focus-visible:ring-rose-200"
+      },
+      size: {
+        sm: "h-9 px-4 text-sm",
+        md: "h-11 px-6 text-base",
+        lg: "h-12 px-7 text-lg",
+        icon: "h-10 w-10"
+      },
+      radius: {
+        pill: "rounded-full",
+        md: "rounded"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+      radius: "pill"
+    }
+  }
+);
+var Button = React5.forwardRef(
+  ({ className, variant, size, radius, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        className: cn(buttonVariants({ variant, size, radius }), className),
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-3 py-1 text-xs font-semibold uppercase tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-slate-900 text-white focus-visible:ring-slate-300",
+        muted: "border-transparent bg-slate-100 text-slate-600 focus-visible:ring-slate-200",
+        outline: "border-slate-200 bg-white text-slate-600 focus-visible:ring-slate-200",
+        success: "border-transparent bg-teal-500/15 text-teal-600 focus-visible:ring-teal-200",
+        active: "border-transparent bg-[rgba(14,203,129,0.25)] text-[#0ecb81] focus-visible:ring-[rgba(14,203,129,0.35)]",
+        pending: "border-transparent bg-white/10 text-white/60 focus-visible:ring-white/20",
+        rejected: "border-transparent bg-[rgba(246,70,93,0.20)] text-[#f6465d] focus-visible:ring-[rgba(246,70,93,0.30)]"
+      },
+      size: {
+        sm: "px-2.5 py-0.5 text-[11px]",
+        md: "px-3 py-1 text-xs"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+var Badge = React5.forwardRef(
+  ({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx("span", { ref, className: cn(badgeVariants({ variant, size }), className), ...props })
+);
+Badge.displayName = "Badge";
+var Card = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "rounded-3xl border border-slate-200 bg-white shadow-sm transition hover:shadow-md",
+      className
+    ),
+    ...props
+  }
+));
+Card.displayName = "Card";
+var CardHeader = React5.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = React5.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "h3",
+    {
+      ref,
+      className: cn("text-xl font-semibold tracking-tight text-slate-900", className),
+      ...props
+    }
+  )
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = React5.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("text-sm text-slate-500", className), ...props })
+);
+CardDescription.displayName = "CardDescription";
+var CardContent = React5.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("px-6 pb-6 pt-2 text-sm text-slate-600", className), ...props })
+);
+CardContent.displayName = "CardContent";
+var CardFooter = React5.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center border-t border-slate-100 px-6 py-4", className), ...props })
+);
+CardFooter.displayName = "CardFooter";
+var defaultFormatCurrency = (value) => new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2
+}).format(value);
+var defaultFormatPercent = (value) => {
+  const sign = value >= 0 ? "+" : "-";
+  return `${sign}${Math.abs(value).toFixed(2)}%`;
+};
+var defaultFormatSignedCurrency = (value) => {
+  const sign = value >= 0 ? "+" : "-";
+  return `${sign}${defaultFormatCurrency(Math.abs(value))}`;
+};
+var PortfolioSummary = React5.forwardRef(
+  ({
+    availableCash,
+    portfolioValue,
+    totalReturnPercent,
+    unrealizedPnl,
+    onResetAccount,
+    positionsHeading = "Current Positions",
+    emptyPositionsText = "No positions yet. Start trading to build your portfolio!",
+    formatCurrency = defaultFormatCurrency,
+    formatPercent = defaultFormatPercent,
+    formatSignedCurrency = defaultFormatSignedCurrency,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const totalReturnClassName = totalReturnPercent >= 0 ? "text-[#0ecb81]" : "text-[#f6465d]";
+    const pnlClassName = unrealizedPnl >= 0 ? "text-[#0ecb81]" : "text-[#f6465d]";
+    return /* @__PURE__ */ jsxs(
+      Card,
+      {
+        ref,
+        className: cn(
+          "w-full max-w-[560px] rounded-[12px] border border-white/10 bg-black/30 p-6 text-white backdrop-blur-md",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(CardHeader, { className: "p-0 pb-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+              /* @__PURE__ */ jsx(CardTitle, { className: "m-0 text-[1.1rem] font-semibold text-white", children: "Portfolio Summary" }),
+              onResetAccount ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onResetAccount,
+                  className: "cursor-pointer rounded-[6px] border border-white/20 bg-white/10 px-[0.7rem] py-[0.35rem] text-xs text-[#888] transition-all duration-150 hover:border-white/30 hover:bg-white/[0.15] hover:text-white",
+                  children: "Reset Account"
+                }
+              ) : null
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "mt-3 h-px w-full bg-white/10" })
+          ] }),
+          /* @__PURE__ */ jsxs(CardContent, { className: "p-0 pt-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("p", { className: "text-xs uppercase tracking-[0.5px] text-white/50", children: "Available Cash" }),
+                /* @__PURE__ */ jsx("p", { className: "mt-1 text-[1.25rem] font-semibold text-white", children: formatCurrency(availableCash) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("p", { className: "text-xs uppercase tracking-[0.5px] text-white/50", children: "Portfolio Value" }),
+                /* @__PURE__ */ jsx("p", { className: "mt-1 text-[1.25rem] font-semibold text-white", children: formatCurrency(portfolioValue) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("p", { className: "text-xs uppercase tracking-[0.5px] text-white/50", children: "Total Return" }),
+                /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-[1.25rem] font-semibold", totalReturnClassName), children: formatPercent(totalReturnPercent) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("p", { className: "text-xs uppercase tracking-[0.5px] text-white/50", children: "Unrealized P&L" }),
+                /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-[1.25rem] font-semibold", pnlClassName), children: formatSignedCurrency(unrealizedPnl) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-6", children: [
+              /* @__PURE__ */ jsx("p", { className: "m-0 text-[0.9rem] font-medium text-white/70", children: positionsHeading }),
+              /* @__PURE__ */ jsx("div", { className: "mt-3", children: children ? children : /* @__PURE__ */ jsx("p", { className: "py-4 text-center text-[0.85rem] text-white/40", children: emptyPositionsText }) })
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+PortfolioSummary.displayName = "PortfolioSummary";
+var clamp = (v, min, max) => Math.min(max, Math.max(min, v));
+var fmt0 = (v) => Math.abs(v).toLocaleString(void 0, { maximumFractionDigits: 0 });
+function HousePositionSlider({
+  tokenId,
+  tokenSymbol,
+  totalTokens,
+  currentPrice,
+  availableCash,
+  tokensHeld,
+  pendingOrders = [],
+  defaultOrderType = "market",
+  onConfirmOrder,
+  className,
+  ...props
+}) {
+  const [orderMode, setOrderMode] = React5.useState("none");
+  const [buyTrackingMode, setBuyTrackingMode] = React5.useState("dollars");
+  const [deltaDollars, setDeltaDollars] = React5.useState(0);
+  const [deltaTokensBuy, setDeltaTokensBuy] = React5.useState(0);
+  const [deltaTokensSell, setDeltaTokensSell] = React5.useState(0);
+  const [isDragging, setIsDragging] = React5.useState(false);
+  const [orderType, setOrderType] = React5.useState(defaultOrderType);
+  const [limitPrice, setLimitPrice] = React5.useState(currentPrice);
+  const [limitPriceInput, setLimitPriceInput] = React5.useState(currentPrice.toFixed(2));
+  const [ownershipInput, setOwnershipInput] = React5.useState("");
+  const [tokenAmountInput, setTokenAmountInput] = React5.useState("");
+  const houseRef = React5.useRef(null);
+  React5.useEffect(() => {
+    setLimitPrice(currentPrice);
+    setLimitPriceInput(currentPrice.toFixed(2));
+  }, [currentPrice]);
+  const effectivePrice = orderType === "limit" ? limitPrice : currentPrice;
+  const holdingsValue = tokensHeld * effectivePrice;
+  const totalCapacity = holdingsValue + availableCash;
+  const pendingBuyValue = pendingOrders.filter((o) => o.type === "buy").reduce((s, o) => s + o.value, 0);
+  const pendingSellTokens = pendingOrders.filter((o) => o.type === "sell").reduce((s, o) => s + Math.abs(o.tokens), 0);
+  const effectiveAvailableCash = Math.max(0, availableCash - pendingBuyValue);
+  const effectiveTokensHeld = Math.max(0, tokensHeld - pendingSellTokens);
+  const baselinePct = totalCapacity <= 0 ? 0 : holdingsValue / totalCapacity * 100;
+  let deltaTokens = 0;
+  let deltaValue = 0;
+  let targetTokens = tokensHeld;
+  let targetValue = holdingsValue;
+  if (orderMode === "buy") {
+    if (buyTrackingMode === "tokens") {
+      deltaTokens = deltaTokensBuy;
+      deltaValue = deltaTokensBuy * effectivePrice;
+    } else {
+      deltaValue = deltaDollars;
+      deltaTokens = deltaDollars / (effectivePrice || 1);
+    }
+  } else if (orderMode === "sell") {
+    deltaTokens = deltaTokensSell;
+    deltaValue = deltaTokensSell * effectivePrice;
+  }
+  targetTokens = tokensHeld + deltaTokens;
+  targetValue = targetTokens * effectivePrice;
+  const targetPct = totalCapacity <= 0 ? 0 : targetValue / totalCapacity * 100;
+  const isIncrease = orderMode === "buy";
+  const hasChange = orderMode !== "none" && (Math.abs(deltaTokens) > 1e-3 || Math.abs(deltaValue) > 0.01);
+  const currentOwnership = totalTokens <= 0 ? 0 : tokensHeld / totalTokens * 100;
+  const targetOwnership = totalTokens <= 0 ? 0 : targetTokens / totalTokens * 100;
+  const estFeeTokens = Math.abs(deltaValue) * 5e-3 / (effectivePrice || 1);
+  const updateOrderFromTargetValue = React5.useCallback(
+    (newTargetValue) => {
+      const newDeltaValue = newTargetValue - holdingsValue;
+      if (newDeltaValue > 0) {
+        setOrderMode("buy");
+        setBuyTrackingMode("dollars");
+        setDeltaDollars(Math.min(newDeltaValue, effectiveAvailableCash));
+        setDeltaTokensBuy(0);
+        setDeltaTokensSell(0);
+        return;
+      }
+      if (newDeltaValue < 0) {
+        const newDeltaTokens = newTargetValue / (effectivePrice || 1) - tokensHeld;
+        setOrderMode("sell");
+        setBuyTrackingMode("dollars");
+        setDeltaTokensSell(Math.max(newDeltaTokens, -effectiveTokensHeld));
+        setDeltaDollars(0);
+        setDeltaTokensBuy(0);
+        return;
+      }
+      setOrderMode("none");
+      setBuyTrackingMode("dollars");
+      setDeltaDollars(0);
+      setDeltaTokensBuy(0);
+      setDeltaTokensSell(0);
+    },
+    [effectiveAvailableCash, effectivePrice, effectiveTokensHeld, holdingsValue, tokensHeld]
+  );
+  const updateOrderFromOwnership = React5.useCallback(
+    (newOwnershipPercent) => {
+      const nextOwnership = clamp(newOwnershipPercent, 0, 100);
+      const newTargetTokens = nextOwnership / 100 * totalTokens;
+      updateOrderFromTargetValue(newTargetTokens * effectivePrice);
+    },
+    [effectivePrice, totalTokens, updateOrderFromTargetValue]
+  );
+  const updateOrderFromTokenAmount = React5.useCallback(
+    (tokenAmountSigned) => {
+      if (tokenAmountSigned > 0) {
+        const maxTokens = effectiveAvailableCash / (effectivePrice || 1);
+        setOrderMode("buy");
+        setBuyTrackingMode("tokens");
+        setDeltaTokensBuy(Math.min(tokenAmountSigned, maxTokens));
+        setDeltaDollars(0);
+        setDeltaTokensSell(0);
+        return;
+      }
+      if (tokenAmountSigned < 0) {
+        setOrderMode("sell");
+        setBuyTrackingMode("dollars");
+        setDeltaTokensSell(Math.max(tokenAmountSigned, -effectiveTokensHeld));
+        setDeltaDollars(0);
+        setDeltaTokensBuy(0);
+        return;
+      }
+      setOrderMode("none");
+      setBuyTrackingMode("dollars");
+      setDeltaDollars(0);
+      setDeltaTokensBuy(0);
+      setDeltaTokensSell(0);
+    },
+    [effectiveAvailableCash, effectivePrice, effectiveTokensHeld]
+  );
+  const handleDragAtClientY = React5.useCallback(
+    (clientY) => {
+      if (!houseRef.current) return;
+      const rect = houseRef.current.getBoundingClientRect();
+      const y = clientY - rect.top;
+      const pct = clamp(100 - y / rect.height * 100, 0, 100);
+      updateOrderFromTargetValue(pct / 100 * totalCapacity);
+    },
+    [totalCapacity, updateOrderFromTargetValue]
+  );
+  const onMouseDown = (e) => {
+    e.preventDefault();
+    setIsDragging(true);
+    const onMove = (ev) => handleDragAtClientY(ev.clientY);
+    const onUp = () => {
+      setIsDragging(false);
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+  };
+  const onTouchStart = () => {
+    setIsDragging(true);
+    const onMove = (ev) => {
+      const touch = ev.touches[0];
+      if (!touch) return;
+      handleDragAtClientY(touch.clientY);
+    };
+    const onEnd = () => {
+      setIsDragging(false);
+      document.removeEventListener("touchmove", onMove);
+      document.removeEventListener("touchend", onEnd);
+    };
+    document.addEventListener("touchmove", onMove);
+    document.addEventListener("touchend", onEnd);
+  };
+  const handleCancel = () => {
+    setOrderMode("none");
+    setBuyTrackingMode("dollars");
+    setDeltaDollars(0);
+    setDeltaTokensBuy(0);
+    setDeltaTokensSell(0);
+  };
+  const handleConfirm = () => {
+    if (!hasChange) return;
+    const priceToUse = orderType === "market" ? currentPrice : limitPrice;
+    onConfirmOrder?.({
+      side: isIncrease ? "buy" : "sell",
+      orderType,
+      tokenId,
+      tokenSymbol,
+      price: priceToUse,
+      deltaTokens,
+      deltaValue,
+      targetOwnership,
+      targetTokens,
+      targetValue
+    });
+    handleCancel();
+  };
+  const rectTop = 10;
+  const rectBottom = 150;
+  const totalFillableHeight = rectBottom - rectTop;
+  const baselineFillHeight = baselinePct / 100 * totalFillableHeight;
+  const targetFillHeight = targetPct / 100 * totalFillableHeight;
+  const baselineFillY = rectBottom - baselineFillHeight;
+  const targetFillY = rectBottom - targetFillHeight;
+  const showIncrease = targetPct > baselinePct;
+  const showDecrease = targetPct < baselinePct;
+  const valueLabel = orderType === "limit" ? `${tokenSymbol} Owned at Limit` : `${tokenSymbol} Owned`;
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative flex w-full flex-col items-center gap-6 rounded-[12px] bg-black/20 px-8 pb-6 pt-12", className), ...props, children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute left-4 top-4 text-[1.1rem] font-semibold tracking-[0.5px] text-white", children: "Place Order" }),
+    hasChange ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleCancel,
+        className: "absolute right-3 top-3 rounded-[6px] border border-white/20 bg-white/10 px-2.5 py-1.5 text-[0.7rem] text-[#888] transition-all duration-150 hover:border-white/30 hover:bg-white/[0.15] hover:text-white",
+        children: "\u2715 Cancel"
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "mb-2 text-xs uppercase tracking-[1px] text-[#888]", children: valueLabel }),
+      /* @__PURE__ */ jsx("div", { className: "inline-flex items-baseline gap-2 text-[2rem] font-bold text-white", children: isDragging ? /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: cn("text-[2rem] font-semibold", deltaValue >= 0 ? "text-[#0ecb81]" : "text-[#f6465d]"),
+          children: [
+            deltaValue > 0 ? "+" : deltaValue < 0 ? "-" : "",
+            "$",
+            fmt0(deltaValue)
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("span", { children: [
+          "$",
+          fmt0(targetValue)
+        ] }),
+        hasChange ? /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cn(
+              "relative top-[-0.5rem] text-[0.85rem] font-semibold",
+              deltaValue >= 0 ? "text-[#0ecb81]" : "text-[#f6465d]"
+            ),
+            children: [
+              deltaValue > 0 ? "+" : deltaValue < 0 ? "-" : "",
+              fmt0(deltaValue)
+            ]
+          }
+        ) : null
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { ref: houseRef, className: "h-[200px] w-[160px] select-none touch-none", style: { cursor: "ns-resize" }, onMouseDown, onTouchStart, children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 120 160", className: "h-full w-full overflow-visible", children: [
+      /* @__PURE__ */ jsx("rect", { x: "10", y: "10", width: "100", height: "140", rx: "8", fill: "rgba(255,255,255,0.04)", stroke: "rgba(255,255,255,0.10)" }),
+      /* @__PURE__ */ jsx("clipPath", { id: "loaf-clip", children: /* @__PURE__ */ jsx("rect", { x: "10", y: "10", width: "100", height: "140", rx: "8" }) }),
+      /* @__PURE__ */ jsxs("g", { clipPath: "url(#loaf-clip)", children: [
+        /* @__PURE__ */ jsx("rect", { x: "10", y: showDecrease ? targetFillY : baselineFillY, width: "100", height: showDecrease ? targetFillHeight : baselineFillHeight, fill: "rgba(220,175,120,0.7)" }),
+        showIncrease ? /* @__PURE__ */ jsx("rect", { x: "10", y: targetFillY, width: "100", height: targetFillHeight - baselineFillHeight, fill: "rgba(14,203,129,0.35)" }) : null,
+        showDecrease ? /* @__PURE__ */ jsx("rect", { x: "10", y: baselineFillY, width: "100", height: baselineFillHeight - targetFillHeight, fill: "rgba(246,70,93,0.35)" }) : null,
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: targetFillY, x2: "108", y2: targetFillY, stroke: showIncrease ? "#0ecb81" : showDecrease ? "#f6465d" : "rgba(234,217,162,1)", strokeWidth: "2", strokeLinecap: "round" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        disabled: !hasChange,
+        onClick: handleConfirm,
+        className: cn(
+          "w-full rounded-[10px] px-4 py-4 text-base font-semibold transition",
+          !hasChange ? "cursor-not-allowed bg-white/10 text-white/30" : isIncrease ? "bg-[#0ecb81] text-white hover:-translate-y-[1px] hover:shadow-[0_4px_12px_rgba(14,203,129,0.3)]" : "bg-[#f6465d] text-white hover:-translate-y-[1px] hover:shadow-[0_4px_12px_rgba(246,70,93,0.3)]"
+        ),
+        children: !hasChange ? "Adjust Position" : isIncrease ? `Buy $${fmt0(deltaValue)}` : `Sell $${fmt0(deltaValue)}`
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "w-full border-t border-white/10 py-4 text-[0.85rem]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-2", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-white/50", children: [
+          tokenSymbol,
+          " Ownership"
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "text-white", children: [
+          currentOwnership.toFixed(2),
+          "%",
+          /* @__PURE__ */ jsx("span", { className: "mx-1.5 text-white/50", children: "\u2192" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              value: ownershipInput || targetOwnership.toFixed(2),
+              onChange: (e) => {
+                const val = e.target.value;
+                if (val === "" || /^[0-9]*\.?[0-9]*$/.test(val)) setOwnershipInput(val);
+              },
+              onFocus: () => setOwnershipInput(targetOwnership.toFixed(2)),
+              onBlur: () => {
+                const num = Number.parseFloat(ownershipInput);
+                if (Number.isFinite(num)) updateOrderFromOwnership(num);
+                setOwnershipInput("");
+              },
+              onKeyDown: (e) => {
+                if (e.key === "Enter") e.target.blur();
+              },
+              className: cn(
+                "w-[70px] rounded-[4px] border bg-white/10 px-2 py-1 text-right font-semibold outline-none",
+                targetOwnership >= currentOwnership ? "border-[rgba(14,203,129,0.3)] text-[#0ecb81] focus:border-[#0ecb81]" : "border-[rgba(246,70,93,0.3)] text-[#f6465d] focus:border-[#f6465d]"
+              )
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-white/50", children: isIncrease ? "Buying" : "Selling" }),
+        /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+          orderMode === "buy" && buyTrackingMode === "dollars" ? /* @__PURE__ */ jsx("span", { className: "mr-1 text-[#0ecb81]", children: "~" }) : null,
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              value: tokenAmountInput || Math.abs(deltaTokens).toFixed(2),
+              onChange: (e) => {
+                const val = e.target.value;
+                if (val === "" || /^[0-9]*\.?[0-9]*$/.test(val)) setTokenAmountInput(val);
+              },
+              onFocus: () => setTokenAmountInput(Math.abs(deltaTokens).toFixed(2)),
+              onBlur: () => {
+                const num = Number.parseFloat(tokenAmountInput);
+                if (Number.isFinite(num) && num >= 0) {
+                  const signed = isIncrease || orderMode === "none" ? num : -num;
+                  updateOrderFromTokenAmount(signed);
+                }
+                setTokenAmountInput("");
+              },
+              onKeyDown: (e) => {
+                if (e.key === "Enter") e.target.blur();
+              },
+              className: cn(
+                "w-[90px] rounded-[4px] border bg-white/10 px-2 py-1 text-right font-semibold outline-none",
+                isIncrease ? "border-[rgba(14,203,129,0.3)] text-[#0ecb81] focus:border-[#0ecb81]" : "border-[rgba(246,70,93,0.3)] text-[#f6465d] focus:border-[#f6465d]"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: cn("font-semibold", isIncrease ? "text-[#0ecb81]" : "text-[#f6465d]"), children: "tokens" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-white/50", children: "Est. Fee" }),
+        /* @__PURE__ */ jsxs("span", { className: "text-white", children: [
+          estFeeTokens.toFixed(6),
+          " ",
+          tokenSymbol
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-4 flex w-full rounded-[8px] bg-white/5 p-[3px]", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setOrderType("market"),
+            className: cn(
+              "flex-1 rounded-[6px] px-3 py-2 text-[0.8rem] font-medium transition",
+              orderType === "market" ? "bg-[rgba(201,162,39,0.2)] text-[#C9A227]" : "text-white/50 hover:bg-white/5"
+            ),
+            children: "Market"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setOrderType("limit"),
+            className: cn(
+              "flex-1 rounded-[6px] px-3 py-2 text-[0.8rem] font-medium transition",
+              orderType === "limit" ? "bg-[rgba(201,162,39,0.2)] text-[#C9A227]" : "text-white/50 hover:bg-white/5"
+            ),
+            children: "Limit"
+          }
+        )
+      ] }),
+      orderType === "limit" ? /* @__PURE__ */ jsxs("div", { className: "relative mb-4", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value: limitPriceInput,
+            onChange: (e) => {
+              const input = e.target.value;
+              if (input === "" || /^[0-9]*\.?[0-9]*$/.test(input)) {
+                setLimitPriceInput(input);
+                const num = Number.parseFloat(input);
+                if (Number.isFinite(num) && num > 0) setLimitPrice(num);
+              }
+            },
+            onBlur: () => {
+              const num = Number.parseFloat(limitPriceInput);
+              if (Number.isFinite(num) && num > 0) {
+                setLimitPriceInput(num.toFixed(2));
+                setLimitPrice(num);
+              } else {
+                setLimitPriceInput(limitPrice.toFixed(2));
+              }
+            },
+            placeholder: "Price",
+            className: "w-full rounded-[8px] border border-white/10 bg-black/30 px-4 py-3 pr-14 text-[0.95rem] text-white outline-none focus:border-[#f0b90b]"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "absolute right-4 top-1/2 -translate-y-1/2 text-[0.8rem] text-white/50", children: "USD" })
+      ] }) : null,
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs text-white/50", children: [
+        /* @__PURE__ */ jsxs("span", { children: [
+          "Available: $",
+          availableCash.toLocaleString()
+        ] }),
+        /* @__PURE__ */ jsx("button", { type: "button", className: "text-[#f0b90b] hover:underline", children: "Add Funds" })
+      ] })
+    ] })
+  ] });
+}
+var formatNumber = (value, precision) => value.toFixed(precision);
+function DepthRow({
+  side,
+  price,
+  amount,
+  depthPct,
+  precision,
+  amountPrecision
+}) {
+  const isAsk = side === "ask";
+  return /* @__PURE__ */ jsxs("div", { className: "relative grid grid-cols-2 items-center gap-3 px-3 py-1.5", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "absolute inset-y-0 right-0",
+          isAsk ? "bg-rose-900/30" : "bg-emerald-900/30"
+        ),
+        style: { width: `${clamp2(depthPct, 0, 100)}%` }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("relative z-[1] tabular-nums", isAsk ? "text-[#f6465d]" : "text-[#0ecb81]"),
+        children: [
+          "$",
+          formatNumber(price, precision)
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "relative z-[1] text-right tabular-nums text-white/90", children: formatNumber(amount, amountPrecision) })
+  ] });
+}
+var clamp2 = (value, min, max) => Math.min(max, Math.max(min, value));
+var Orderbook = React5.forwardRef(
+  ({
+    asks,
+    bids,
+    midPrice,
+    midChangePercent,
+    trades = [],
+    priceLabel = "Price (USD)",
+    amountLabel = "Amount",
+    precision = 2,
+    amountPrecision = 2,
+    defaultTab = "orderbook",
+    onTabChange,
+    rightHeader,
+    className,
+    ...props
+  }, ref) => {
+    const [tab, setTab] = React5.useState(defaultTab);
+    const [tradeFilter, setTradeFilter] = React5.useState("all");
+    React5.useEffect(() => {
+      setTab(defaultTab);
+    }, [defaultTab]);
+    const handleTab = (next) => {
+      setTab(next);
+      onTabChange?.(next);
+    };
+    const maxAskDepth = Math.max(1, ...asks.map((l) => l.depth ?? l.amount));
+    const maxBidDepth = Math.max(1, ...bids.map((l) => l.depth ?? l.amount));
+    const midClass = midChangePercent == null ? "text-white" : midChangePercent >= 0 ? "text-[#0ecb81]" : "text-[#f6465d]";
+    const tradeFiltered = trades.filter((t) => tradeFilter === "all" || t.type === tradeFilter);
+    return /* @__PURE__ */ jsxs(
+      Card,
+      {
+        ref,
+        className: cn(
+          "w-full max-w-[520px] overflow-hidden rounded-[12px] border border-white/10 bg-black/30 text-white shadow-md",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 pt-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => handleTab("orderbook"),
+                  className: cn(
+                    "relative pb-2 text-sm font-semibold",
+                    tab === "orderbook" ? "text-white" : "text-white/60"
+                  ),
+                  children: [
+                    "Orderbook",
+                    tab === "orderbook" ? /* @__PURE__ */ jsx("span", { className: "absolute -bottom-px left-0 h-[2px] w-full bg-[#C9A227]" }) : null
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => handleTab("trades"),
+                  className: cn(
+                    "relative pb-2 text-sm font-medium",
+                    tab === "trades" ? "text-white" : "text-white/60"
+                  ),
+                  children: [
+                    "Trades",
+                    tab === "trades" ? /* @__PURE__ */ jsx("span", { className: "absolute -bottom-px left-0 h-[2px] w-full bg-[#C9A227]" }) : null
+                  ]
+                }
+              )
+            ] }),
+            tab === "trades" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setTradeFilter("all"),
+                  className: cn(
+                    "rounded-md px-2 py-1 transition",
+                    tradeFilter === "all" ? "bg-white/10 text-white" : "text-white/70 hover:bg-white/10"
+                  ),
+                  children: "All"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setTradeFilter("buy"),
+                  className: cn(
+                    "rounded-md px-2 py-1 transition",
+                    tradeFilter === "buy" ? "bg-white/10 text-white" : "text-white/70 hover:bg-white/10"
+                  ),
+                  children: "Buy"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setTradeFilter("sell"),
+                  className: cn(
+                    "rounded-md px-2 py-1 transition",
+                    tradeFilter === "sell" ? "bg-white/10 text-white" : "text-white/70 hover:bg-white/10"
+                  ),
+                  children: "Sell"
+                }
+              )
+            ] }) : /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: rightHeader })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "px-4 pb-3 pt-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 px-3 py-2 text-xs text-white/60", children: [
+              /* @__PURE__ */ jsx("div", { children: priceLabel }),
+              /* @__PURE__ */ jsx("div", { className: "text-right", children: amountLabel })
+            ] }),
+            tab === "trades" ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "max-h-[380px] overflow-y-auto overflow-x-hidden",
+                style: { scrollbarGutter: "stable" },
+                children: tradeFiltered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-10 text-center text-sm text-white/50", children: "No trades" }) : /* @__PURE__ */ jsx("div", { className: "divide-y divide-white/5", children: tradeFiltered.map((trade, i) => /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 items-center gap-3 px-3 py-1.5", children: [
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: cn(
+                        "tabular-nums",
+                        trade.type === "buy" ? "text-[#0ecb81]" : "text-[#f6465d]"
+                      ),
+                      children: [
+                        "$",
+                        formatNumber(trade.price, precision)
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { className: "text-right tabular-nums text-white/90", children: formatNumber(trade.amount, amountPrecision) })
+                ] }, `${trade.type}-${trade.price}-${trade.amount}-${trade.time ?? i}`)) })
+              }
+            ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { className: "divide-y divide-white/5", children: asks.map((l, idx) => /* @__PURE__ */ jsx(
+                DepthRow,
+                {
+                  side: "ask",
+                  price: l.price,
+                  amount: l.amount,
+                  depthPct: (l.depth ?? l.amount) / maxAskDepth * 100,
+                  precision,
+                  amountPrecision
+                },
+                `ask-${idx}-${l.price}-${l.amount}`
+              )) }),
+              /* @__PURE__ */ jsxs("div", { className: "mt-2 grid grid-cols-2 items-center gap-3 bg-[#0b1a24] px-3 py-2", children: [
+                /* @__PURE__ */ jsxs("div", { className: cn("text-lg font-semibold tabular-nums", midClass), children: [
+                  "$",
+                  formatNumber(midPrice, precision),
+                  midChangePercent == null ? null : /* @__PURE__ */ jsxs("span", { className: "ml-2 text-sm font-semibold", children: [
+                    midChangePercent >= 0 ? "+" : "",
+                    midChangePercent.toFixed(2),
+                    "%"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx("div", {})
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "divide-y divide-white/5", children: bids.map((l, idx) => /* @__PURE__ */ jsx(
+                DepthRow,
+                {
+                  side: "bid",
+                  price: l.price,
+                  amount: l.amount,
+                  depthPct: (l.depth ?? l.amount) / maxBidDepth * 100,
+                  precision,
+                  amountPrecision
+                },
+                `bid-${idx}-${l.price}-${l.amount}`
+              )) })
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Orderbook.displayName = "Orderbook";
+var PropertyTour = React5.forwardRef(
+  ({
+    className,
+    title,
+    src,
+    poster,
+    autoPlay = true,
+    muted = true,
+    loop = true,
+    controls = true,
+    playsInline = true,
+    ...props
+  }, ref) => {
+    const videoRef = React5.useRef(null);
+    React5.useEffect(() => {
+      const video = videoRef.current;
+      if (!video) return;
+      const handleFullscreenChange = () => {
+        const d = document;
+        const isFullscreen = !!(d.fullscreenElement || d.webkitFullscreenElement || d.mozFullScreenElement || d.msFullscreenElement);
+        if (isFullscreen) {
+          video.style.objectFit = "contain";
+          video.style.width = "100vw";
+          video.style.height = "100vh";
+          video.style.position = "fixed";
+          video.style.top = "0";
+          video.style.left = "0";
+          video.style.transform = "none";
+          video.style.zIndex = "9999";
+        } else {
+          video.style.objectFit = "cover";
+          video.style.width = "100%";
+          video.style.height = "100%";
+          video.style.position = "absolute";
+          video.style.top = "0";
+          video.style.left = "0";
+          video.style.transform = "none";
+          video.style.zIndex = "auto";
+        }
+      };
+      video.addEventListener("fullscreenchange", handleFullscreenChange);
+      video.addEventListener("webkitfullscreenchange", handleFullscreenChange);
+      video.addEventListener("mozfullscreenchange", handleFullscreenChange);
+      video.addEventListener("MSFullscreenChange", handleFullscreenChange);
+      document.addEventListener("fullscreenchange", handleFullscreenChange);
+      document.addEventListener("webkitfullscreenchange", handleFullscreenChange);
+      document.addEventListener("mozfullscreenchange", handleFullscreenChange);
+      document.addEventListener("MSFullscreenChange", handleFullscreenChange);
+      return () => {
+        video.removeEventListener("fullscreenchange", handleFullscreenChange);
+        video.removeEventListener("webkitfullscreenchange", handleFullscreenChange);
+        video.removeEventListener("mozfullscreenchange", handleFullscreenChange);
+        video.removeEventListener("MSFullscreenChange", handleFullscreenChange);
+        document.removeEventListener("fullscreenchange", handleFullscreenChange);
+        document.removeEventListener("webkitfullscreenchange", handleFullscreenChange);
+        document.removeEventListener("mozfullscreenchange", handleFullscreenChange);
+        document.removeEventListener("MSFullscreenChange", handleFullscreenChange);
+      };
+    }, []);
+    return /* @__PURE__ */ jsxs(
+      Card,
+      {
+        ref,
+        className: cn(
+          "w-full max-w-[820px] rounded-[12px] border border-white/10 bg-black/30 text-white backdrop-blur-md",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(CardHeader, { className: "px-6 pb-0 pt-6", children: /* @__PURE__ */ jsx(CardTitle, { className: "m-0 text-lg font-semibold text-white", children: title }) }),
+          /* @__PURE__ */ jsx("div", { className: "px-6 pb-6 pt-5", children: /* @__PURE__ */ jsx("div", { className: "relative aspect-video w-full overflow-hidden rounded-lg bg-black", children: /* @__PURE__ */ jsxs(
+            "video",
+            {
+              ref: videoRef,
+              className: "absolute inset-0 h-full w-full object-cover object-center",
+              controls,
+              loop,
+              autoPlay,
+              muted,
+              playsInline,
+              poster,
+              children: [
+                /* @__PURE__ */ jsx("source", { src }),
+                "Your browser does not support the video tag."
+              ]
+            }
+          ) }) })
+        ]
+      }
+    );
+  }
+);
+PropertyTour.displayName = "PropertyTour";
+var TYPE_META = {
+  property: {
+    label: "Property Update",
+    accent: "#f8d12f",
+    pillBg: "rgba(248, 209, 47, 0.12)",
+    pillBorder: "rgba(248, 209, 47, 0.45)",
+    pillColor: "#f8d12f",
+    icon: Building2
+  },
+  market: {
+    label: "Market Insight",
+    accent: "#0ecb81",
+    pillBg: "rgba(14, 203, 129, 0.12)",
+    pillBorder: "rgba(14, 203, 129, 0.45)",
+    pillColor: "#0ecb81",
+    icon: LineChart
+  },
+  portfolio: {
+    label: "Portfolio Signal",
+    accent: "#6c8cff",
+    pillBg: "rgba(108, 140, 255, 0.12)",
+    pillBorder: "rgba(108, 140, 255, 0.45)",
+    pillColor: "#c9d5ff",
+    icon: Sparkles
+  }
+};
+var getTypeMeta = (type) => {
+  if (!type) return TYPE_META.property;
+  const key = type;
+  if (key in TYPE_META) return TYPE_META[key];
+  return {
+    label: type.toString(),
+    accent: "#f5f5f5",
+    pillBg: "rgba(255,255,255,0.08)",
+    pillBorder: "rgba(255,255,255,0.25)",
+    pillColor: "#ffffff",
+    icon: Newspaper
+  };
+};
+var formatDate = (value) => {
+  const date = typeof value === "string" ? new Date(value) : value;
+  if (Number.isNaN(date.getTime())) return typeof value === "string" ? value : "";
+  return date.toLocaleDateString(void 0, {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  });
+};
+var PropertyNewsUpdates = React5.forwardRef(
+  ({ className, heading = "Latest property intelligence", subheading, items, emptyState, ...props }, ref) => {
+    const hasItems = Array.isArray(items) && items.length > 0;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "w-full max-w-[480px] rounded-[20px] border border-white/10 bg-gradient-to-br from-[#06090f] via-[#0f1621] to-[#111b2a] p-6 text-white shadow-[0_30px_80px_rgba(3,7,18,0.65)] backdrop-blur-xl",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-[0.85rem] uppercase tracking-[0.25em] text-white/50", children: heading }),
+            subheading ? /* @__PURE__ */ jsx("p", { className: "text-sm text-white/60", children: subheading }) : null
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "mt-5 flex flex-col gap-4", children: hasItems ? items.map((item, index) => {
+            const meta = getTypeMeta(item.type);
+            const Icon = meta.icon;
+            const key = item.id ?? `${item.title}-${index}`;
+            const content = /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "relative flex w-full gap-4 rounded-2xl border border-white/5 bg-white/[0.04] p-4 transition hover:border-white/15 hover:bg-white/[0.06]",
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "flex h-12 w-12 items-center justify-center rounded-full border text-white",
+                        style: {
+                          background: meta.pillBg,
+                          borderColor: meta.pillBorder,
+                          color: meta.pillColor
+                        },
+                        children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5" })
+                      }
+                    ),
+                    index !== items.length - 1 ? /* @__PURE__ */ jsx("div", { className: "mt-2 h-full w-px flex-1 bg-white/10" }) : null
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-[0.7rem] font-semibold uppercase tracking-[0.3em]", style: { color: meta.accent }, children: meta.label }),
+                      /* @__PURE__ */ jsxs("span", { className: "flex items-center text-xs text-white/60", children: [
+                        /* @__PURE__ */ jsx(CalendarDays, { className: "mr-1 h-3.5 w-3.5" }),
+                        formatDate(item.date)
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsx("p", { className: "mt-2 text-base font-semibold leading-snug", children: item.title }),
+                    item.description ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-white/65", children: item.description }) : null,
+                    (item.href || item.onAction) && item.actionLabel ? /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        className: "group mt-3 inline-flex items-center gap-1 text-sm font-semibold text-white transition hover:text-white/80",
+                        onClick: () => {
+                          if (item.href) {
+                            window?.open?.(item.href, "_blank", "noopener,noreferrer");
+                          }
+                          item.onAction?.(item);
+                        },
+                        children: [
+                          item.actionLabel,
+                          /* @__PURE__ */ jsx(ArrowUpRight, { className: "h-4 w-4 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5" })
+                        ]
+                      }
+                    ) : null
+                  ] })
+                ]
+              },
+              key
+            );
+            return content;
+          }) : emptyState ?? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center rounded-2xl border border-dashed border-white/20 px-6 py-10 text-center text-sm text-white/60", children: [
+            /* @__PURE__ */ jsx(Newspaper, { className: "mb-3 h-8 w-8 text-white/40" }),
+            "No property news yet. Updates will land here as soon as we receive new intelligence."
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+PropertyNewsUpdates.displayName = "PropertyNewsUpdates";
+var clampPct = (pct) => Math.min(100, Math.max(0, pct));
+var EditIcon = ({ className }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className,
+    children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M12 20H21",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5Z",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    ]
+  }
+);
+var YourOrders = React5.forwardRef(
+  ({
+    className,
+    title = "Your Orders",
+    orders,
+    onEditPrice,
+    onEditAmount,
+    onCancel,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      Card,
+      {
+        ref,
+        className: cn(
+          "w-full min-h-[301.52px] rounded-[12px] border border-white/10 bg-black/30 text-white backdrop-blur-md max-[1024px]:min-h-[250px] max-[480px]:min-h-[200px]",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(CardHeader, { className: "px-6 pb-2 pt-6", children: /* @__PURE__ */ jsx(CardTitle, { className: "m-0 text-[1.1rem] font-semibold text-white", children: title }) }),
+          /* @__PURE__ */ jsxs("div", { className: "px-6 pb-6 pt-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1.2fr_0.8fr_1fr_1fr_1fr_1fr_1.2fr_0.8fr] border-b border-white/10 pb-2 text-[0.85rem] font-medium text-white/60", children: [
+              /* @__PURE__ */ jsx("div", { className: "px-2", children: "Asset" }),
+              /* @__PURE__ */ jsx("div", { className: "px-2", children: "Type" }),
+              /* @__PURE__ */ jsx("div", { className: "px-2", children: "Date" }),
+              /* @__PURE__ */ jsx("div", { className: "px-2", children: "Price" }),
+              /* @__PURE__ */ jsx("div", { className: "px-2", children: "Amount" }),
+              /* @__PURE__ */ jsx("div", { className: "px-2", children: "Total" }),
+              /* @__PURE__ */ jsx("div", { className: "px-2", children: "Filled" }),
+              /* @__PURE__ */ jsx("div", { className: "px-2 text-center", children: "Actions" })
+            ] }),
+            orders.length === 0 ? /* @__PURE__ */ jsx("div", { className: "py-10 text-center text-sm text-white/50", children: "No orders" }) : /* @__PURE__ */ jsx("div", { children: orders.map((order) => {
+              const sideClass = order.side === "buy" ? "text-[#0ecb81]" : "text-[#f6465d]";
+              const filled = clampPct(order.filledPercent);
+              const canEditPrice = Boolean(onEditPrice);
+              const canEditAmount = Boolean(onEditAmount);
+              const canCancel = Boolean(onCancel);
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "grid grid-cols-[1.5fr_0.8fr_0.8fr_1fr_0.8fr_1fr_1fr_0.8fr] items-center border-b border-white/5 py-2 text-[0.9rem] transition-colors hover:bg-white/[0.03]",
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: "truncate px-2 font-medium", children: order.asset }),
+                    /* @__PURE__ */ jsx("div", { className: cn("px-2 font-medium uppercase", sideClass), children: order.side }),
+                    /* @__PURE__ */ jsx("div", { className: "px-2 font-medium", children: order.date }),
+                    /* @__PURE__ */ jsxs("div", { className: "px-2 font-medium", children: [
+                      /* @__PURE__ */ jsxs("span", { className: "tabular-nums", children: [
+                        "$",
+                        order.price.toLocaleString()
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: canEditPrice ? () => onEditPrice?.(order) : void 0,
+                          className: cn(
+                            "ml-1 inline-flex items-center justify-center text-white/60 transition-colors",
+                            canEditPrice ? "cursor-pointer hover:text-[#C9A227] active:translate-y-px" : "cursor-default"
+                          ),
+                          "aria-label": "Edit price",
+                          children: /* @__PURE__ */ jsx(EditIcon, { className: "h-[14px] w-[14px]" })
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "px-2 font-medium", children: [
+                      /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: order.amount.toLocaleString() }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: canEditAmount ? () => onEditAmount?.(order) : void 0,
+                          className: cn(
+                            "ml-1 inline-flex items-center justify-center text-white/60 transition-colors",
+                            canEditAmount ? "cursor-pointer hover:text-[#C9A227] active:translate-y-px" : "cursor-default"
+                          ),
+                          "aria-label": "Edit amount",
+                          children: /* @__PURE__ */ jsx(EditIcon, { className: "h-[14px] w-[14px]" })
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "px-2 font-medium tabular-nums", children: [
+                      "$",
+                      order.total.toLocaleString()
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "px-2", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "text-[0.875rem] font-medium tabular-nums", children: [
+                        filled.toFixed(0),
+                        "%"
+                      ] }),
+                      /* @__PURE__ */ jsx("div", { className: "mt-1 h-1 w-4/5 overflow-hidden rounded-sm bg-white/10", children: /* @__PURE__ */ jsx("div", { className: "h-full rounded-sm bg-[#C9A227]", style: { width: `${filled}%` } }) })
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { className: "px-2 text-center", children: /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: canCancel ? () => onCancel?.(order) : void 0,
+                        className: cn(
+                          "rounded border border-white/40 px-3 py-1 text-[0.8rem] text-white/70 transition-colors",
+                          canCancel ? "cursor-pointer hover:bg-white/10 active:text-[#f6465d] active:border-[#f6465d] active:translate-y-px" : "cursor-default"
+                        ),
+                        children: "Cancel"
+                      }
+                    ) })
+                  ]
+                },
+                order.id
+              );
+            }) })
+          ] })
+        ]
+      }
+    );
+  }
+);
+YourOrders.displayName = "YourOrders";
+var defaultRanges = ["1D", "1W", "1M", "3M", "1Y"];
+var formatPrice = (value, currencySymbol) => {
+  return `${currencySymbol}${value.toLocaleString(void 0, {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  })}`;
+};
+var PriceChart = React5.forwardRef(
+  ({
+    className,
+    title = "Price Chart",
+    ranges = defaultRanges,
+    selectedRange,
+    onRangeChange,
+    data,
+    price,
+    changePercent,
+    currencySymbol = "$",
+    height = 301.52,
+    ...props
+  }, ref) => {
+    const containerRef = React5.useRef(null);
+    const chartRef = React5.useRef(null);
+    const seriesRef = React5.useRef(null);
+    const priceLineRef = React5.useRef(null);
+    const [hoveredRange, setHoveredRange] = React5.useState(null);
+    const resolvedPrice = React5.useMemo(() => {
+      if (price != null) return price;
+      const last = data.at(-1);
+      return last?.close;
+    }, [data, price]);
+    const inferredChangePercent = React5.useMemo(() => {
+      if (changePercent != null) return changePercent;
+      const first = data[0]?.open;
+      const last = data.at(-1)?.close;
+      if (first == null || last == null || first === 0) return void 0;
+      return (last - first) / first * 100;
+    }, [changePercent, data]);
+    React5.useEffect(() => {
+      const el = containerRef.current;
+      if (!el) return;
+      const chart = createChart(el, {
+        autoSize: true,
+        layout: {
+          background: { color: "transparent" },
+          textColor: "rgba(255,255,255,0.55)",
+          fontFamily: "inherit"
+        },
+        grid: {
+          vertLines: { color: "rgba(255,255,255,0.06)" },
+          horzLines: { color: "rgba(255,255,255,0.06)" }
+        },
+        rightPriceScale: {
+          borderColor: "rgba(230, 200, 126, 0.25)",
+          textColor: "rgba(230, 200, 126, 0.7)"
+        },
+        timeScale: {
+          borderColor: "rgba(255,255,255,0.06)",
+          timeVisible: true,
+          secondsVisible: false
+        },
+        crosshair: {
+          vertLine: { color: "rgba(255,255,255,0.12)" },
+          horzLine: { color: "rgba(255,255,255,0.12)" }
+        }
+      });
+      const series = chart.addCandlestickSeries({
+        upColor: "#0ecb81",
+        downColor: "#f6465d",
+        borderVisible: false,
+        wickUpColor: "#0ecb81",
+        wickDownColor: "#f6465d"
+      });
+      chartRef.current = chart;
+      seriesRef.current = series;
+      return () => {
+        chartRef.current = null;
+        seriesRef.current = null;
+        chart.remove();
+      };
+    }, []);
+    React5.useEffect(() => {
+      const chart = chartRef.current;
+      const series = seriesRef.current;
+      if (!chart || !series) return;
+      series.setData(data);
+      if (priceLineRef.current) {
+        series.removePriceLine(priceLineRef.current);
+        priceLineRef.current = null;
+      }
+      if (resolvedPrice != null) {
+        const priceLineColor = "rgba(230, 200, 126, 0.9)";
+        priceLineRef.current = series.createPriceLine({
+          price: resolvedPrice,
+          color: priceLineColor,
+          lineWidth: 1,
+          lineStyle: 2,
+          axisLabelVisible: true,
+          title: resolvedPrice.toFixed(2)
+        });
+      }
+      chart.timeScale().fitContent();
+    }, [data, resolvedPrice]);
+    const sign = inferredChangePercent == null ? null : inferredChangePercent >= 0 ? "+" : "";
+    const changeClass = inferredChangePercent == null ? "" : inferredChangePercent >= 0 ? "text-[#0ecb81]" : "text-[#f6465d]";
+    const badgeClass = inferredChangePercent == null ? "" : inferredChangePercent >= 0 ? "bg-[#0ecb81]/15 text-[#0ecb81]" : "bg-[#f6465d]/15 text-[#f6465d]";
+    const btnBaseStyle = {
+      backgroundColor: "var(--color-card-dark, rgba(255, 255, 255, 0.05))",
+      borderColor: "var(--color-border, rgba(255, 255, 255, 0.12))",
+      color: "var(--color-text-secondary, rgba(255, 255, 255, 0.7))"
+    };
+    const btnHoverStyle = {
+      backgroundColor: "var(--color-accent-dark, rgba(230, 200, 126, 0.15))",
+      color: "var(--color-text, #ffffff)"
+    };
+    const btnActiveStyle = {
+      backgroundColor: "var(--color-accent, #e6c87e)",
+      borderColor: "var(--color-accent, #e6c87e)",
+      color: "#000000"
+    };
+    return /* @__PURE__ */ jsxs(
+      Card,
+      {
+        ref,
+        className: cn(
+          "w-full min-h-[450px] rounded-lg border border-white/10 bg-black/30 text-white backdrop-blur-md",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-4 px-6 pb-2 pt-6", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(CardTitle, { className: "m-0 text-[1.1rem] font-semibold text-white", children: title }),
+              /* @__PURE__ */ jsx("div", { className: "mt-3 flex items-center gap-2", children: ranges.map((r) => {
+                const active = r === selectedRange;
+                const hovered = hoveredRange === r;
+                const style = {
+                  ...btnBaseStyle,
+                  ...hovered ? btnHoverStyle : null,
+                  ...active ? btnActiveStyle : null
+                };
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => onRangeChange?.(r),
+                    onMouseEnter: () => setHoveredRange(r),
+                    onMouseLeave: () => setHoveredRange((prev) => prev === r ? null : prev),
+                    style,
+                    className: cn(
+                      "rounded border px-3 py-1 text-[0.85rem] font-medium transition-all duration-200"
+                    ),
+                    children: r
+                  },
+                  r
+                );
+              }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+              resolvedPrice == null ? null : /* @__PURE__ */ jsx("div", { className: cn("text-xl font-semibold tabular-nums", changeClass), children: formatPrice(resolvedPrice, currencySymbol) }),
+              inferredChangePercent == null ? null : /* @__PURE__ */ jsxs("div", { className: cn("rounded-md px-2 py-1 text-xs font-semibold tabular-nums", badgeClass), children: [
+                sign,
+                inferredChangePercent?.toFixed(2),
+                "%"
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "px-6 pb-6 pt-2", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: containerRef,
+              className: "w-full overflow-hidden rounded-lg",
+              style: { height }
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+PriceChart.displayName = "PriceChart";
+var formatPrice2 = (value, currencySymbol) => {
+  return `${currencySymbol}${value.toLocaleString(void 0, {
+    minimumFractionDigits: 3,
+    maximumFractionDigits: 3
+  })}`;
+};
+var PropertyHeroHeader = React5.forwardRef(
+  ({
+    className,
+    imageUrl,
+    imageAlt,
+    name,
+    location,
+    price,
+    currencySymbol = "$",
+    changePercent,
+    beds,
+    baths,
+    cars,
+    propertyTypeLabel,
+    onTrade,
+    onMakeOffer,
+    ...props
+  }, ref) => {
+    const isPositive = changePercent == null ? void 0 : changePercent >= 0;
+    const tradeHoverColor = "var(--color-accent-hover, #f8d12f)";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "relative w-full overflow-hidden bg-black h-[500px] rounded-[12px] max-[768px]:h-[400px] max-[768px]:rounded-lg max-[480px]:h-[350px] max-[480px]:rounded-md",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: imageUrl,
+              alt: imageAlt ?? name,
+              className: "h-full w-full object-cover object-center block max-w-none min-w-[120%] min-h-[120%]",
+              style: { transform: "scale(1.0)", transformOrigin: "center" }
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "absolute bottom-0 left-0 right-0 flex w-full items-end justify-between p-8 max-[768px]:flex-col max-[768px]:items-start max-[768px]:gap-4 max-[768px]:p-6 max-[480px]:p-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "inline-block w-auto max-w-[70%] rounded-lg bg-black/15 px-4 py-3 text-white shadow-[0px_1px_1px_rgba(0,0,0,0.3)] backdrop-blur-[3px] max-[768px]:w-full max-[768px]:max-w-full max-[768px]:px-3 max-[768px]:py-3 max-[480px]:px-3 max-[480px]:py-2", children: [
+              /* @__PURE__ */ jsx("h1", { className: "mb-2 text-[2.5rem] leading-tight text-white [text-shadow:0_2px_4px_rgba(0,0,0,0.3)] max-[768px]:mb-[0.4rem] max-[768px]:text-[2rem] max-[480px]:mb-[0.3rem] max-[480px]:text-[1.75rem]", children: name }),
+              /* @__PURE__ */ jsxs("div", { className: "mb-3 flex flex-wrap items-center text-[1.25rem] text-white/90 max-[768px]:mb-[0.6rem] max-[768px]:text-[1.1rem] max-[480px]:mb-[0.5rem] max-[480px]:text-[1rem]", children: [
+                /* @__PURE__ */ jsx("span", { children: location }),
+                price == null ? null : /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: "ml-4 flex items-center border-l border-white/30 pl-4 font-semibold",
+                    style: { color: "var(--color-accent, #e6c87e)" },
+                    children: [
+                      formatPrice2(price, currencySymbol),
+                      changePercent == null ? null : /* @__PURE__ */ jsxs(
+                        "span",
+                        {
+                          className: cn(
+                            "ml-2 flex items-center text-[0.875rem] font-medium",
+                            isPositive ? "text-[#0ecb81]" : "text-[#f6465d]"
+                          ),
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              "svg",
+                              {
+                                xmlns: "http://www.w3.org/2000/svg",
+                                width: "12",
+                                height: "12",
+                                viewBox: "0 0 24 24",
+                                fill: "currentColor",
+                                className: "mr-[0.15rem]",
+                                children: /* @__PURE__ */ jsx("path", { d: isPositive ? "M7 14l5-5 5 5H7z" : "M7 10l5 5 5-5H7z" })
+                              }
+                            ),
+                            Math.abs(changePercent).toFixed(2),
+                            "%"
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6 text-[0.95rem] text-white/90 max-[768px]:hidden", children: [
+                beds == null ? null : /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+                  /* @__PURE__ */ jsx(BedDouble, { className: "mr-2 h-[18px] w-[18px]" }),
+                  /* @__PURE__ */ jsxs("span", { children: [
+                    beds,
+                    " Beds"
+                  ] })
+                ] }),
+                baths == null ? null : /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+                  /* @__PURE__ */ jsx(Bath, { className: "mr-2 h-[18px] w-[18px]" }),
+                  /* @__PURE__ */ jsxs("span", { children: [
+                    baths,
+                    " Baths"
+                  ] })
+                ] }),
+                cars == null ? null : /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+                  /* @__PURE__ */ jsx(CarFront, { className: "mr-2 h-[18px] w-[18px]" }),
+                  /* @__PURE__ */ jsxs("span", { children: [
+                    cars,
+                    " Cars"
+                  ] })
+                ] }),
+                propertyTypeLabel == null ? null : /* @__PURE__ */ jsx("div", { children: propertyTypeLabel })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 max-[768px]:w-full max-[768px]:flex-row max-[768px]:justify-between max-[768px]:gap-2 max-[480px]:gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onTrade,
+                  className: "rounded border border-transparent px-6 py-3 font-semibold transition-all hover:-translate-y-0.5 hover:shadow-[0_4px_8px_rgba(0,0,0,0.2)] active:translate-y-0 active:shadow-[0_2px_4px_rgba(0,0,0,0.1)] max-[768px]:flex-1 max-[768px]:px-5 max-[768px]:py-2.5 max-[768px]:text-[0.95rem] max-[480px]:px-4 max-[480px]:py-2 max-[480px]:text-[0.9rem]",
+                  style: { backgroundColor: "var(--color-accent, #e6c87e)", color: "black" },
+                  onMouseEnter: (e) => {
+                    e.currentTarget.style.backgroundColor = tradeHoverColor;
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.backgroundColor = "var(--color-accent, #e6c87e)";
+                  },
+                  children: "Trade"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onMakeOffer,
+                  className: "rounded border px-6 py-3 font-semibold transition-all hover:-translate-y-0.5 hover:shadow-[0_4px_8px_rgba(0,0,0,0.2)] active:translate-y-0 active:shadow-[0_2px_4px_rgba(0,0,0,0.1)] max-[768px]:flex-1 max-[768px]:px-5 max-[768px]:py-2.5 max-[768px]:text-[0.95rem] max-[480px]:px-4 max-[480px]:py-2 max-[480px]:text-[0.9rem]",
+                  style: {
+                    backgroundColor: "transparent",
+                    borderColor: "var(--color-accent, #e6c87e)",
+                    color: "var(--color-accent, #e6c87e)"
+                  },
+                  onMouseEnter: (e) => {
+                    e.currentTarget.style.backgroundColor = "rgba(240, 185, 11, 0.1)";
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.backgroundColor = "transparent";
+                  },
+                  children: "Make Offer"
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+PropertyHeroHeader.displayName = "PropertyHeroHeader";
+var PropertySubheader = React5.forwardRef(
+  ({ className, tabs, activeTabId, onTabChange, actions, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "w-full font-normal",
+          "flex flex-col gap-3",
+          "md:flex-row md:items-center md:justify-between",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex items-center border-b border-white/10",
+                "overflow-x-auto md:overflow-visible",
+                "[-webkit-overflow-scrolling:touch]",
+                "[scrollbar-width:none]",
+                "[scroll-behavior:smooth]",
+                "[touch-action:pan-x]",
+                "md:border-b-0"
+              ),
+              style: { WebkitTapHighlightColor: "transparent" },
+              children: /* @__PURE__ */ jsx("div", { className: "flex min-w-max", children: tabs.map((tab) => {
+                const active = tab.id === activeTabId;
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => onTabChange?.(tab.id),
+                    className: cn(
+                      "relative whitespace-nowrap",
+                      "px-6 py-4",
+                      "font-normal",
+                      "transition-colors",
+                      "max-[768px]:px-[1.2rem] max-[768px]:py-[0.8rem]",
+                      "max-[480px]:px-4 max-[480px]:py-[0.7rem] max-[480px]:text-[0.9rem]",
+                      active ? "font-semibold text-[var(--color-accent,#e6c87e)]" : "text-white/60 hover:text-white"
+                    ),
+                    style: {
+                      borderBottom: active ? "2px solid var(--color-accent, #e6c87e)" : "2px solid transparent",
+                      minWidth: "80px",
+                      touchAction: "manipulation"
+                    },
+                    children: [
+                      tab.label,
+                      tab.hasNotification ? /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "absolute right-[10px] top-[10px] h-2 w-2 rounded-full animate-pulse",
+                          style: {
+                            backgroundColor: tab.notificationColor ?? "#f6465d",
+                            boxShadow: "0 0 0 0 rgba(246, 70, 93, 0.7)"
+                          }
+                        }
+                      ) : null
+                    ]
+                  },
+                  tab.id
+                );
+              }) })
+            }
+          ),
+          actions != null && actions.length > 0 ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex items-center gap-[10px]",
+                "overflow-x-auto md:overflow-visible",
+                "[scrollbar-width:none]",
+                "md:justify-end",
+                "max-[768px]:w-full max-[768px]:justify-center max-[768px]:pb-2 max-[768px]:mb-4"
+              ),
+              children: actions.map((action) => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: action.onClick,
+                  className: cn(
+                    "flex shrink-0 items-center gap-[5px] whitespace-nowrap",
+                    "rounded",
+                    "border border-white/10",
+                    "bg-transparent",
+                    "px-3 py-1.5 text-[14px] font-normal",
+                    "transition-all",
+                    "max-[768px]:px-2.5 max-[768px]:py-[5px] max-[768px]:text-[13px]",
+                    "hover:bg-white/5 hover:border-[var(--color-accent,#e6c87e)] hover:text-[var(--color-accent,#e6c87e)]"
+                  ),
+                  children: [
+                    action.icon,
+                    action.label
+                  ]
+                },
+                action.id
+              ))
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+PropertySubheader.displayName = "PropertySubheader";
+
+export { Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, HousePositionSlider, Orderbook, PortfolioSummary, PriceChart, PropertyHeroHeader, PropertyNewsUpdates, PropertySubheader, PropertyTour, YourOrders, badgeVariants, buttonVariants };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map