@loafmarkets/ui 0.1.0 → 0.1.2

package/dist/index.mjs

@@ -6,7 +6,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Newspaper, BedDouble, Bath, CarFront } from 'lucide-react';
-import { createChart } from 'lightweight-charts';
+import * as LightweightCharts from 'lightweight-charts';
 
 function cn(...inputs) {
   return twMerge(clsx(inputs));
@@ -784,6 +784,745 @@ function HousePositionSlider({
     ] })
   ] });
 }
+var clamp2 = (v2, min, max) => Math.min(max, Math.max(min, v2));
+var fmt02 = (v2) => Math.abs(v2).toLocaleString(void 0, { maximumFractionDigits: 0 });
+var styles = {
+  // SliderContainer @media (max-width: 1024px)
+  sliderContainer: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    padding: "1.5rem 1rem 0.75rem",
+    background: "#111111",
+    borderRadius: "12px",
+    gap: "0.4rem",
+    position: "relative",
+    border: "1px solid rgba(255, 255, 255, 0.1)",
+    overflow: "hidden"
+  },
+  // ValueDisplay @media (max-width: 1024px)
+  valueDisplay: {
+    textAlign: "center",
+    marginBottom: "0.2rem"
+  },
+  // ValueLabel @media (max-width: 1024px)
+  valueLabel: {
+    fontSize: "0.65rem",
+    color: "#C9A227",
+    textTransform: "uppercase",
+    letterSpacing: "1px",
+    marginBottom: "0.2rem"
+  },
+  // ValueAmount @media (max-width: 1024px)
+  valueAmount: {
+    fontSize: "1.1rem",
+    fontWeight: 700,
+    color: "#fff",
+    display: "inline-flex",
+    alignItems: "baseline",
+    gap: "0.3rem"
+  },
+  // HouseWrapper @media (max-width: 1024px)
+  houseWrapper: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "0.75rem",
+    margin: "0.25rem 0",
+    width: "100%"
+  },
+  // HouseContainer @media (max-width: 1024px)
+  houseContainer: {
+    position: "relative",
+    width: "100px",
+    height: "130px",
+    cursor: "ns-resize",
+    touchAction: "none",
+    userSelect: "none"
+  },
+  // MobilePercentButtons @media (max-width: 1024px)
+  mobilePercentButtons: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    height: "130px",
+    position: "absolute",
+    left: "-38px",
+    top: 0
+  },
+  // MobilePercentBtn
+  mobilePercentBtn: {
+    background: "rgba(255, 255, 255, 0.05)",
+    border: "1px solid rgba(255, 255, 255, 0.2)",
+    borderRadius: "4px",
+    color: "rgba(255, 255, 255, 0.6)",
+    fontSize: "0.55rem",
+    padding: "0.25rem 0.35rem",
+    cursor: "pointer",
+    transition: "all 0.15s ease",
+    textAlign: "center",
+    minWidth: "32px",
+    outline: "none",
+    WebkitTapHighlightColor: "transparent"
+  },
+  // ConfirmButton @media (max-width: 1024px)
+  confirmButton: {
+    width: "100%",
+    padding: "0.65rem",
+    fontSize: "0.85rem",
+    fontWeight: 600,
+    border: "none",
+    borderRadius: "8px",
+    cursor: "pointer",
+    transition: "all 0.2s ease"
+  },
+  // SummarySection @media (max-width: 1024px)
+  summarySection: {
+    width: "100%",
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.4rem",
+    padding: "0.6rem",
+    background: "rgba(0, 0, 0, 0.2)",
+    borderRadius: "8px",
+    marginTop: 0
+  },
+  // BoxedSummaryRow @media (max-width: 1024px)
+  boxedSummaryRow: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    background: "transparent",
+    borderRadius: "6px",
+    padding: "0.35rem 0.5rem",
+    cursor: "text",
+    flexWrap: "nowrap",
+    fontSize: "0.75rem"
+  },
+  // SummaryLabel @media (max-width: 1024px)
+  summaryLabel: {
+    color: "rgba(255, 255, 255, 0.6)",
+    fontSize: "0.7rem",
+    whiteSpace: "nowrap"
+  },
+  // SummaryValue @media (max-width: 1024px)
+  summaryValue: {
+    color: "#fff",
+    fontWeight: 500,
+    fontSize: "0.8rem",
+    display: "flex",
+    alignItems: "center",
+    gap: "0.25rem",
+    overflow: "hidden",
+    flexShrink: 1,
+    minWidth: 0
+  },
+  // BoxedInput @media (max-width: 1024px)
+  boxedInput: {
+    background: "transparent",
+    border: "none",
+    fontWeight: 600,
+    fontSize: "0.8rem",
+    width: "50px",
+    textAlign: "right",
+    outline: "none",
+    padding: 0,
+    flexShrink: 0
+  },
+  // InputSuffix @media (max-width: 1024px)
+  inputSuffix: {
+    fontWeight: 600,
+    fontSize: "0.65rem",
+    marginLeft: "0.2rem",
+    display: "inline-flex",
+    alignItems: "center",
+    lineHeight: 1,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    maxWidth: "80px"
+  },
+  // SummaryRow @media (max-width: 1024px)
+  summaryRow: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    fontSize: "0.8rem"
+  },
+  // OrderTypeToggle @media (max-width: 1024px)
+  orderTypeToggle: {
+    display: "flex",
+    backgroundColor: "rgba(255, 255, 255, 0.05)",
+    borderRadius: "6px",
+    padding: "2px",
+    marginBottom: 0,
+    width: "100%"
+  },
+  // OrderTypeButton @media (max-width: 1024px)
+  orderTypeButton: {
+    flex: 1,
+    padding: "0.35rem",
+    fontSize: "0.7rem",
+    fontWeight: 500,
+    border: "none",
+    borderRadius: "4px",
+    cursor: "pointer",
+    transition: "all 0.15s ease"
+  },
+  // AvailableFunds
+  availableFunds: {
+    width: "100%",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    fontSize: "0.75rem",
+    color: "rgba(255, 255, 255, 0.5)"
+  },
+  // AddFundsButton
+  addFundsButton: {
+    background: "none",
+    border: "none",
+    color: "#f0b90b",
+    fontSize: "0.75rem",
+    cursor: "pointer",
+    padding: 0
+  }
+};
+function HousePositionSliderMobile({
+  tokenId,
+  tokenSymbol,
+  totalTokens,
+  currentPrice,
+  availableCash,
+  tokensHeld,
+  defaultOrderType = "market",
+  orderbook,
+  ownershipPercentOverride,
+  onConfirmOrder,
+  className,
+  ...props
+}) {
+  const [orderMode, setOrderMode] = o.useState("none");
+  const [deltaDollars, setDeltaDollars] = o.useState(0);
+  const [deltaTokensSell, setDeltaTokensSell] = o.useState(0);
+  const [deltaTokensBuy, setDeltaTokensBuy] = o.useState(0);
+  const [buyTrackingMode, setBuyTrackingMode] = o.useState("dollars");
+  const [orderType, setOrderType] = o.useState(defaultOrderType);
+  const [limitPrice, setLimitPrice] = o.useState(currentPrice);
+  const [limitPriceInput, setLimitPriceInput] = o.useState(currentPrice.toFixed(2));
+  const [limitPriceDirty, setLimitPriceDirty] = o.useState(false);
+  const [tokenAmountInput, setTokenAmountInput] = o.useState("");
+  const houseRef = o.useRef(null);
+  o.useEffect(() => {
+    if (orderType !== "limit") return;
+    if (limitPriceDirty) return;
+    setLimitPrice(currentPrice);
+    setLimitPriceInput(currentPrice.toFixed(2));
+  }, [orderType, currentPrice, limitPriceDirty]);
+  const effectivePrice = orderType === "limit" ? limitPrice : currentPrice;
+  const holdingsValue = tokensHeld * effectivePrice;
+  const totalCapacity = holdingsValue + availableCash;
+  const baselinePct = totalCapacity > 0 ? holdingsValue / totalCapacity * 100 : 0;
+  let deltaTokens;
+  let deltaValue;
+  let targetTokens;
+  let targetValue;
+  if (orderMode === "buy") {
+    if (buyTrackingMode === "tokens") {
+      deltaTokens = deltaTokensBuy;
+      deltaValue = deltaTokensBuy * effectivePrice;
+      targetTokens = tokensHeld + deltaTokensBuy;
+      targetValue = targetTokens * effectivePrice;
+    } else {
+      deltaValue = deltaDollars;
+      deltaTokens = effectivePrice > 0 ? deltaDollars / effectivePrice : 0;
+      targetTokens = tokensHeld + deltaTokens;
+      targetValue = targetTokens * effectivePrice;
+    }
+  } else if (orderMode === "sell") {
+    deltaTokens = deltaTokensSell;
+    deltaValue = deltaTokensSell * effectivePrice;
+    targetTokens = tokensHeld + deltaTokensSell;
+    targetValue = targetTokens * effectivePrice;
+  } else {
+    deltaTokens = 0;
+    deltaValue = 0;
+    targetTokens = tokensHeld;
+    targetValue = holdingsValue;
+  }
+  const targetPct = totalCapacity > 0 ? targetValue / totalCapacity * 100 : 0;
+  const isIncrease = orderMode === "buy";
+  const hasChange = orderMode !== "none" && (Math.abs(deltaTokens) > 1e-3 || Math.abs(deltaValue) > 0.01);
+  const targetOwnership = totalTokens > 0 ? targetTokens / totalTokens * 100 : 0;
+  const estFeeTokens = effectivePrice > 0 ? Math.abs(deltaValue) * 5e-3 / effectivePrice : 0;
+  const updateOrderFromTargetValue = o.useCallback(
+    (newTargetValue) => {
+      const newDeltaValue = newTargetValue - holdingsValue;
+      if (newDeltaValue > 0.01) {
+        const capped = Math.min(newDeltaValue, availableCash);
+        setOrderMode("buy");
+        setBuyTrackingMode("dollars");
+        setDeltaDollars(capped);
+        setDeltaTokensBuy(0);
+        setDeltaTokensSell(0);
+      } else if (newDeltaValue < -0.01) {
+        const newDeltaTokens = effectivePrice > 0 ? newTargetValue / effectivePrice - tokensHeld : 0;
+        const capped = Math.max(newDeltaTokens, -tokensHeld);
+        setOrderMode("sell");
+        setBuyTrackingMode("dollars");
+        setDeltaTokensSell(capped);
+        setDeltaDollars(0);
+        setDeltaTokensBuy(0);
+      } else {
+        setOrderMode("none");
+        setBuyTrackingMode("dollars");
+        setDeltaDollars(0);
+        setDeltaTokensBuy(0);
+        setDeltaTokensSell(0);
+      }
+    },
+    [holdingsValue, availableCash, effectivePrice, tokensHeld]
+  );
+  const updateOrderFromTokenAmount = o.useCallback(
+    (tokenAmount) => {
+      if (tokenAmount > 0) {
+        const maxTokens = effectivePrice > 0 ? availableCash / effectivePrice : 0;
+        const capped = Math.min(tokenAmount, maxTokens);
+        setOrderMode("buy");
+        setBuyTrackingMode("tokens");
+        setDeltaTokensBuy(capped);
+        setDeltaDollars(0);
+        setDeltaTokensSell(0);
+      } else if (tokenAmount < 0) {
+        const capped = Math.max(tokenAmount, -tokensHeld);
+        setOrderMode("sell");
+        setBuyTrackingMode("dollars");
+        setDeltaTokensSell(capped);
+        setDeltaDollars(0);
+        setDeltaTokensBuy(0);
+      } else {
+        setOrderMode("none");
+        setBuyTrackingMode("dollars");
+        setDeltaDollars(0);
+        setDeltaTokensBuy(0);
+        setDeltaTokensSell(0);
+      }
+    },
+    [effectivePrice, availableCash, tokensHeld]
+  );
+  const handleMarkerClick = o.useCallback(
+    (pct) => {
+      const newTargetValue = pct / 100 * totalCapacity;
+      updateOrderFromTargetValue(newTargetValue);
+    },
+    [totalCapacity, updateOrderFromTargetValue]
+  );
+  const onMouseDown = o.useCallback(
+    (e) => {
+      e.preventDefault();
+      const move = (ev) => {
+        if (!houseRef.current) return;
+        const rect = houseRef.current.getBoundingClientRect();
+        const y2 = ev.clientY - rect.top;
+        const pct = clamp2(100 - y2 / rect.height * 100, 0, 100);
+        const newTargetValue = pct / 100 * totalCapacity;
+        updateOrderFromTargetValue(newTargetValue);
+      };
+      const up = () => {
+        document.removeEventListener("mousemove", move);
+        document.removeEventListener("mouseup", up);
+      };
+      document.addEventListener("mousemove", move);
+      document.addEventListener("mouseup", up);
+    },
+    [totalCapacity, updateOrderFromTargetValue]
+  );
+  const onTouchStart = o.useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const move = (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        if (!houseRef.current) return;
+        const rect = houseRef.current.getBoundingClientRect();
+        const touch = ev.touches[0];
+        const y2 = touch.clientY - rect.top;
+        const pct = clamp2(100 - y2 / rect.height * 100, 0, 100);
+        const newTargetValue = pct / 100 * totalCapacity;
+        updateOrderFromTargetValue(newTargetValue);
+      };
+      const up = () => {
+        document.removeEventListener("touchmove", move);
+        document.removeEventListener("touchend", up);
+      };
+      document.addEventListener("touchmove", move, { passive: false });
+      document.addEventListener("touchend", up);
+    },
+    [totalCapacity, updateOrderFromTargetValue]
+  );
+  const handleConfirm = () => {
+    if (!hasChange || !onConfirmOrder) return;
+    onConfirmOrder({
+      side: isIncrease ? "buy" : "sell",
+      orderType,
+      tokenId,
+      tokenSymbol,
+      price: effectivePrice,
+      deltaTokens: Math.abs(deltaTokens),
+      deltaValue: Math.abs(deltaValue),
+      targetOwnership,
+      targetTokens,
+      targetValue
+    });
+    setOrderMode("none");
+    setDeltaDollars(0);
+    setDeltaTokensBuy(0);
+    setDeltaTokensSell(0);
+  };
+  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 = `${tokenSymbol} OWNED`;
+  const getBorderColor = () => {
+    if (!hasChange) return "rgba(201, 162, 39, 0.5)";
+    return isIncrease ? "rgba(14, 203, 129, 0.3)" : "rgba(246, 70, 93, 0.3)";
+  };
+  const getValueColor = () => {
+    if (!hasChange) return "#fff";
+    return isIncrease ? "#0ecb81" : "#f6465d";
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: styles.sliderContainer,
+      className,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: styles.valueDisplay, children: [
+          /* @__PURE__ */ jsx("div", { style: styles.valueLabel, children: valueLabel }),
+          /* @__PURE__ */ jsxs("div", { style: styles.valueAmount, children: [
+            "$",
+            fmt02(targetValue)
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: styles.houseWrapper, children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: houseRef,
+            style: styles.houseContainer,
+            onMouseDown,
+            onTouchStart,
+            children: [
+              /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 120 160", style: { width: "100%", height: "100%", overflow: "visible" }, children: [
+                /* @__PURE__ */ jsxs("defs", { children: [
+                  /* @__PURE__ */ jsx("clipPath", { id: "mobile-clip", children: /* @__PURE__ */ jsx("rect", { x: "12", y: "12", width: "96", height: "136", rx: "6" }) }),
+                  /* @__PURE__ */ jsxs("linearGradient", { id: "mobileGoldFill", x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
+                    /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "rgba(220, 175, 120, 0.7)" }),
+                    /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "rgba(220, 175, 120, 0.7)" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("linearGradient", { id: "mobileGreenFill", x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
+                    /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "rgba(14, 203, 129, 0.5)" }),
+                    /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "rgba(14, 203, 129, 0.2)" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("linearGradient", { id: "mobileRedFill", x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
+                    /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "rgba(246, 70, 93, 0.15)" }),
+                    /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "rgba(246, 70, 93, 0.5)" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("filter", { id: "mobileGoldGlow", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+                    /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "6", result: "blur" }),
+                    /* @__PURE__ */ jsx("feFlood", { floodColor: "rgba(234, 217, 162, 0.6)", result: "color" }),
+                    /* @__PURE__ */ jsx("feComposite", { in: "color", in2: "blur", operator: "in", result: "glow" }),
+                    /* @__PURE__ */ jsxs("feMerge", { children: [
+                      /* @__PURE__ */ jsx("feMergeNode", { in: "glow" }),
+                      /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("filter", { id: "mobileGreenGlow", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+                    /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "6", result: "blur" }),
+                    /* @__PURE__ */ jsx("feFlood", { floodColor: "rgba(14, 203, 129, 0.6)", result: "color" }),
+                    /* @__PURE__ */ jsx("feComposite", { in: "color", in2: "blur", operator: "in", result: "glow" }),
+                    /* @__PURE__ */ jsxs("feMerge", { children: [
+                      /* @__PURE__ */ jsx("feMergeNode", { in: "glow" }),
+                      /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("filter", { id: "mobileRedGlow", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+                    /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "6", result: "blur" }),
+                    /* @__PURE__ */ jsx("feFlood", { floodColor: "rgba(246, 70, 93, 0.6)", result: "color" }),
+                    /* @__PURE__ */ jsx("feComposite", { in: "color", in2: "blur", operator: "in", result: "glow" }),
+                    /* @__PURE__ */ jsxs("feMerge", { children: [
+                      /* @__PURE__ */ jsx("feMergeNode", { in: "glow" }),
+                      /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+                    ] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx("rect", { x: "10", y: "10", width: "100", height: "140", rx: "8", fill: "rgba(255,255,255,0.04)" }),
+                /* @__PURE__ */ jsxs("g", { clipPath: "url(#mobile-clip)", children: [
+                  /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      x: "10",
+                      y: showDecrease ? targetFillY : baselineFillY,
+                      width: "100",
+                      height: showDecrease ? targetFillHeight : baselineFillHeight,
+                      fill: "url(#mobileGoldFill)"
+                    }
+                  ),
+                  showIncrease && /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      x: "10",
+                      y: targetFillY,
+                      width: "100",
+                      height: targetFillHeight - baselineFillHeight,
+                      fill: "url(#mobileGreenFill)"
+                    }
+                  ),
+                  showDecrease && /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      x: "10",
+                      y: baselineFillY,
+                      width: "100",
+                      height: baselineFillHeight - targetFillHeight,
+                      fill: "url(#mobileRedFill)"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "line",
+                    {
+                      x1: "12",
+                      y1: targetFillY,
+                      x2: "108",
+                      y2: targetFillY,
+                      stroke: showIncrease ? "rgba(14, 203, 129, 1)" : showDecrease ? "rgba(246, 70, 93, 1)" : "rgba(234, 217, 162, 1)",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      filter: showIncrease ? "url(#mobileGreenGlow)" : showDecrease ? "url(#mobileRedGlow)" : "url(#mobileGoldGlow)"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "rect",
+                  {
+                    x: "10",
+                    y: "10",
+                    width: "100",
+                    height: "140",
+                    rx: "8",
+                    fill: "none",
+                    stroke: showIncrease ? "rgba(14, 203, 129, 0.6)" : showDecrease ? "rgba(246, 70, 93, 0.6)" : "rgba(234, 217, 162, 0.6)",
+                    strokeWidth: "2",
+                    filter: showIncrease ? "url(#mobileGreenGlow)" : showDecrease ? "url(#mobileRedGlow)" : "url(#mobileGoldGlow)"
+                  }
+                ),
+                /* @__PURE__ */ jsx("rect", { x: "10", y: "10", width: "100", height: "140", rx: "8", fill: "none", stroke: "rgba(255, 255, 255, 0.1)", strokeWidth: "1" })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: styles.mobilePercentButtons,
+                  onMouseDown: (e) => e.stopPropagation(),
+                  onTouchStart: (e) => e.stopPropagation(),
+                  children: [100, 50, 25, 0].map((pct) => /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      style: styles.mobilePercentBtn,
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        handleMarkerClick(pct);
+                      },
+                      children: [
+                        pct,
+                        "%"
+                      ]
+                    },
+                    pct
+                  ))
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled: !hasChange,
+            onClick: handleConfirm,
+            style: {
+              ...styles.confirmButton,
+              backgroundColor: !hasChange ? "rgba(255, 255, 255, 0.1)" : isIncrease ? "#0ecb81" : "#f6465d",
+              color: !hasChange ? "rgba(255, 255, 255, 0.3)" : "#fff",
+              cursor: !hasChange ? "not-allowed" : "pointer"
+            },
+            children: !hasChange ? "Adjust Position" : isIncrease ? `Buy $${fmt02(deltaValue)}` : `Sell $${fmt02(deltaValue)}`
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: styles.summarySection, children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                ...styles.boxedSummaryRow,
+                border: `1px solid ${getBorderColor()}`
+              },
+              onClick: (e) => {
+                const input = e.currentTarget.querySelector("input");
+                if (input && e.target !== input) {
+                  input.focus();
+                  const len = input.value.length;
+                  input.setSelectionRange(len, len);
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { style: styles.summaryLabel, children: isIncrease ? "Est. Buy" : "Est. Sell" }),
+                /* @__PURE__ */ jsxs("span", { style: styles.summaryValue, children: [
+                  /* @__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();
+                      },
+                      style: {
+                        ...styles.boxedInput,
+                        color: getValueColor()
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { style: { ...styles.inputSuffix, color: getValueColor() }, children: tokenSymbol })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                ...styles.boxedSummaryRow,
+                border: `1px solid ${getBorderColor()}`
+              },
+              onClick: (e) => {
+                if (orderType === "limit") {
+                  const input = e.currentTarget.querySelector("input");
+                  if (input && e.target !== input) {
+                    input.focus();
+                    const len = input.value.length;
+                    input.setSelectionRange(len, len);
+                  }
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { style: styles.summaryLabel, children: orderType === "market" ? "Price" : "Limit Price" }),
+                orderType === "market" ? /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: "rgba(255, 255, 255, 0.6)", fontSize: "0.8rem" }, children: "Market" }) : /* @__PURE__ */ jsxs("span", { style: styles.summaryValue, children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "text",
+                      value: limitPriceInput,
+                      onChange: (e) => {
+                        const input = e.target.value;
+                        if (input === "" || /^[0-9]*\.?[0-9]*$/.test(input)) {
+                          setLimitPriceDirty(true);
+                          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));
+                        }
+                      },
+                      onKeyDown: (e) => {
+                        if (e.key === "Enter") e.target.blur();
+                      },
+                      style: {
+                        ...styles.boxedInput,
+                        color: getValueColor()
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { style: { ...styles.inputSuffix, color: getValueColor() }, children: "USD" })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { style: styles.summaryRow, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.summaryLabel, children: "Est. Fee" }),
+            /* @__PURE__ */ jsxs("span", { style: { color: "#fff", fontWeight: 500, fontSize: "0.8rem" }, children: [
+              estFeeTokens.toFixed(6),
+              " ",
+              tokenSymbol
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: styles.orderTypeToggle, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setOrderType("market"),
+              style: {
+                ...styles.orderTypeButton,
+                backgroundColor: orderType === "market" ? "rgba(201, 162, 39, 0.2)" : "transparent",
+                color: orderType === "market" ? "#C9A227" : "rgba(255, 255, 255, 0.5)"
+              },
+              children: "Market"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setOrderType("limit"),
+              style: {
+                ...styles.orderTypeButton,
+                backgroundColor: orderType === "limit" ? "rgba(201, 162, 39, 0.2)" : "transparent",
+                color: orderType === "limit" ? "#C9A227" : "rgba(255, 255, 255, 0.5)"
+              },
+              children: "Limit"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: styles.availableFunds, children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            "Cash: $",
+            availableCash.toLocaleString()
+          ] }),
+          /* @__PURE__ */ jsx("button", { type: "button", style: styles.addFundsButton, children: "Add Funds" })
+        ] })
+      ]
+    }
+  );
+}
 
 // ../../../node_modules/.pnpm/tslib@2.8.1/node_modules/tslib/tslib.es6.mjs
 var __assign = function() {
@@ -2325,6 +3064,17 @@ var LoafLiquidityBadge = o.forwardRef(
   }
 );
 LoafLiquidityBadge.displayName = "LoafLiquidityBadge";
+function useViewportCompact(breakpoint) {
+  const [isCompact, setIsCompact] = o.useState(false);
+  o.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const check = () => setIsCompact(window.innerWidth <= breakpoint);
+    check();
+    window.addEventListener("resize", check);
+    return () => window.removeEventListener("resize", check);
+  }, [breakpoint]);
+  return isCompact;
+}
 var formatNumber = (value, precision) => value.toFixed(precision);
 function DepthRow({
   side,
@@ -2343,7 +3093,7 @@ function DepthRow({
           "absolute inset-y-0 right-0",
           isAsk ? "bg-rose-900/30" : "bg-emerald-900/30"
         ),
-        style: { width: `${clamp2(depthPct, 0, 100)}%` }
+        style: { width: `${clamp3(depthPct, 0, 100)}%` }
       }
     ),
     /* @__PURE__ */ jsxs(
@@ -2359,10 +3109,12 @@ function DepthRow({
     /* @__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 clamp3 = (value, min, max) => Math.min(max, Math.max(min, value));
 var LEVEL_ROWS_VISIBLE = 6;
 var DEPTH_ROW_HEIGHT_PX = 34;
-var SECTION_HEIGHT = LEVEL_ROWS_VISIBLE * DEPTH_ROW_HEIGHT_PX;
+var COMPACT_ROWS_VISIBLE = 5;
+var COMPACT_ROW_HEIGHT_PX = 30;
+var COMPACT_BREAKPOINT_PX = 1024;
 var Orderbook = o.forwardRef(
   ({
     asks,
@@ -2377,11 +3129,13 @@ var Orderbook = o.forwardRef(
     defaultTab = "orderbook",
     onTabChange,
     rightHeader = /* @__PURE__ */ jsx(LoafLiquidityBadge, { className: "text-[0.6rem]" }),
+    variant = "auto",
     className,
     ...props
   }, ref) => {
     const [tab, setTab] = o.useState(defaultTab);
     const [tradeFilter, setTradeFilter] = o.useState("all");
+    const viewportCompact = useViewportCompact(COMPACT_BREAKPOINT_PX);
     o.useEffect(() => {
       setTab(defaultTab);
     }, [defaultTab]);
@@ -2389,178 +3143,450 @@ var Orderbook = o.forwardRef(
       setTab(next2);
       onTabChange?.(next2);
     };
+    const isCompact = variant === "compact" || variant === "auto" && viewportCompact;
+    const sectionHeight = isCompact ? COMPACT_ROWS_VISIBLE * COMPACT_ROW_HEIGHT_PX : LEVEL_ROWS_VISIBLE * DEPTH_ROW_HEIGHT_PX;
     const maxAskDepth = Math.max(1, ...asks.map((l2) => l2.depth ?? l2.amount));
     const maxBidDepth = Math.max(1, ...bids.map((l2) => l2.depth ?? l2.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(
+    const layoutProps = {
+      tab,
+      handleTab,
+      tradeFilter,
+      setTradeFilter,
+      rightHeader,
+      priceLabel,
+      amountLabel,
+      tradeFiltered,
+      precision,
+      amountPrecision,
+      asks,
+      bids,
+      maxAskDepth,
+      maxBidDepth,
+      midPrice,
+      midChangePercent,
+      midClass,
+      sectionHeight
+    };
+    return /* @__PURE__ */ jsx(
       Card,
       {
         ref,
         className: cn(
           "w-full max-w-[520px] overflow-hidden rounded-[12px] border border-white/10 bg-[#111111] text-white shadow-md",
+          isCompact && "max-w-none",
           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 overflow-y-auto",
-                  style: { height: `${SECTION_HEIGHT}px`, scrollbarGutter: "stable" },
-                  children: asks.map((l2, idx) => /* @__PURE__ */ jsx(
-                    DepthRow,
-                    {
-                      side: "ask",
-                      price: l2.price,
-                      amount: l2.amount,
-                      depthPct: (l2.depth ?? l2.amount) / maxAskDepth * 100,
-                      precision,
-                      amountPrecision
-                    },
-                    `ask-${idx}-${l2.price}-${l2.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 overflow-y-auto",
-                  style: { height: `${SECTION_HEIGHT}px`, scrollbarGutter: "stable" },
-                  children: bids.map((l2, idx) => /* @__PURE__ */ jsx(
-                    DepthRow,
-                    {
-                      side: "bid",
-                      price: l2.price,
-                      amount: l2.amount,
-                      depthPct: (l2.depth ?? l2.amount) / maxBidDepth * 100,
-                      precision,
-                      amountPrecision
-                    },
-                    `bid-${idx}-${l2.price}-${l2.amount}`
-                  ))
-                }
-              )
-            ] })
-          ] })
-        ]
+        children: isCompact ? /* @__PURE__ */ jsx(MobileOrderbookLayout, { ...layoutProps }) : /* @__PURE__ */ jsx(DesktopOrderbookLayout, { ...layoutProps })
       }
     );
   }
 );
 Orderbook.displayName = "Orderbook";
+function DesktopOrderbookLayout({
+  tab,
+  handleTab,
+  tradeFilter,
+  setTradeFilter,
+  rightHeader,
+  priceLabel,
+  amountLabel,
+  tradeFiltered,
+  precision,
+  amountPrecision,
+  asks,
+  bids,
+  maxAskDepth,
+  maxBidDepth,
+  midPrice,
+  midChangePercent,
+  midClass,
+  sectionHeight
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { 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 overflow-y-auto",
+            style: { height: `${sectionHeight}px`, scrollbarGutter: "stable" },
+            children: asks.map((l2, idx) => /* @__PURE__ */ jsx(
+              DepthRow,
+              {
+                side: "ask",
+                price: l2.price,
+                amount: l2.amount,
+                depthPct: (l2.depth ?? l2.amount) / maxAskDepth * 100,
+                precision,
+                amountPrecision
+              },
+              `ask-${idx}-${l2.price}-${l2.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 overflow-y-auto",
+            style: { height: `${sectionHeight}px`, scrollbarGutter: "stable" },
+            children: bids.map((l2, idx) => /* @__PURE__ */ jsx(
+              DepthRow,
+              {
+                side: "bid",
+                price: l2.price,
+                amount: l2.amount,
+                depthPct: (l2.depth ?? l2.amount) / maxBidDepth * 100,
+                precision,
+                amountPrecision
+              },
+              `bid-${idx}-${l2.price}-${l2.amount}`
+            ))
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function MobileOrderbookLayout({
+  tab,
+  handleTab,
+  tradeFilter,
+  setTradeFilter,
+  rightHeader,
+  priceLabel,
+  amountLabel,
+  tradeFiltered,
+  precision,
+  amountPrecision,
+  asks,
+  bids,
+  maxAskDepth,
+  maxBidDepth,
+  midPrice,
+  midChangePercent,
+  midClass,
+  sectionHeight
+}) {
+  const visibleAsks = o.useMemo(() => asks.slice(0, COMPACT_ROWS_VISIBLE), [asks]);
+  const visibleBids = o.useMemo(() => bids.slice(0, COMPACT_ROWS_VISIBLE), [bids]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "px-3 pt-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            onClick: () => handleTab("orderbook"),
+            style: {
+              cursor: "pointer",
+              fontSize: "0.8rem",
+              fontWeight: tab === "orderbook" ? 600 : 400,
+              color: tab === "orderbook" ? "#fff" : "rgba(255,255,255,0.6)",
+              borderBottom: tab === "orderbook" ? "2px solid #C9A227" : "none",
+              paddingBottom: "0.25rem"
+            },
+            children: "Orderbook"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            onClick: () => handleTab("trades"),
+            style: {
+              cursor: "pointer",
+              fontSize: "0.8rem",
+              fontWeight: tab === "trades" ? 600 : 400,
+              color: tab === "trades" ? "#fff" : "rgba(255,255,255,0.6)",
+              borderBottom: tab === "trades" ? "2px solid #C9A227" : "none",
+              paddingBottom: "0.25rem"
+            },
+            children: "Trades"
+          }
+        )
+      ] }),
+      tab === "trades" ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 text-[0.6rem] text-white/70", children: ["all", "buy", "sell"].map((filter2) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setTradeFilter(filter2),
+          className: cn(
+            "rounded-md border border-white/15 px-2 py-1",
+            tradeFilter === filter2 ? "bg-white/15 text-white" : "hover:bg-white/10"
+          ),
+          children: filter2 === "all" ? "All" : filter2 === "buy" ? "Buy" : "Sell"
+        },
+        filter2
+      )) }) : /* @__PURE__ */ jsx("div", { className: "hidden text-xs text-white/70 sm:flex", children: rightHeader })
+    ] }) }),
+    tab === "orderbook" ? /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden px-3 pb-2", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "inline-flex sm:hidden",
+          style: { padding: "0.5rem 0", marginBottom: "0.5rem", transform: "scale(0.85)", transformOrigin: "left center" },
+          children: rightHeader
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "grid text-white/60",
+          style: { gridTemplateColumns: "1.2fr 0.8fr", padding: "0.3rem 0 0.2rem 0", fontSize: "0.75rem", fontWeight: 500 },
+          children: [
+            /* @__PURE__ */ jsx("div", { children: priceLabel }),
+            /* @__PURE__ */ jsx("div", { style: { textAlign: "right", paddingRight: "0.5rem" }, children: amountLabel })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column" }, children: visibleAsks.map((l2, idx) => /* @__PURE__ */ jsx(
+        MobileDepthRow,
+        {
+          side: "ask",
+          price: l2.price,
+          amount: l2.amount,
+          depthPct: (l2.depth ?? l2.amount) / maxAskDepth * 100,
+          precision,
+          amountPrecision
+        },
+        `mobile-ask-${idx}-${l2.price}-${l2.amount}`
+      )) }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "grid",
+          style: {
+            gridTemplateColumns: "1.2fr 0.8fr",
+            padding: "0.3rem 0",
+            fontSize: "0.8rem",
+            backgroundColor: "rgba(0, 123, 255, 0.05)",
+            borderTop: "1px solid rgba(255,255,255,0.1)",
+            borderBottom: "1px solid rgba(255,255,255,0.1)"
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { style: { fontWeight: "bold", display: "flex", alignItems: "center", gap: "8px" }, className: midClass, children: [
+              "$",
+              formatNumber(midPrice, precision),
+              midChangePercent != null && /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.8rem" }, className: midClass, children: [
+                midChangePercent >= 0 ? "+" : "",
+                midChangePercent.toFixed(2),
+                "%"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", {})
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column" }, children: visibleBids.map((l2, idx) => /* @__PURE__ */ jsx(
+        MobileDepthRow,
+        {
+          side: "bid",
+          price: l2.price,
+          amount: l2.amount,
+          depthPct: (l2.depth ?? l2.amount) / maxBidDepth * 100,
+          precision,
+          amountPrecision
+        },
+        `mobile-bid-${idx}-${l2.price}-${l2.amount}`
+      )) })
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden px-3 pb-2", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "grid text-white/60",
+          style: { gridTemplateColumns: "1.2fr 0.8fr", padding: "0.3rem 0 0.2rem 0", fontSize: "0.75rem", fontWeight: 500 },
+          children: [
+            /* @__PURE__ */ jsx("div", { children: priceLabel }),
+            /* @__PURE__ */ jsx("div", { style: { textAlign: "right", paddingRight: "0.5rem" }, children: amountLabel })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { style: { flex: 1, overflowY: "auto", minHeight: 0 }, children: tradeFiltered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "py-6 text-center text-[0.7rem] text-white/50", children: "No trades" }) : tradeFiltered.map((trade, i) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "grid",
+          style: { gridTemplateColumns: "1.2fr 0.8fr", padding: "0.2rem 0", fontSize: "0.8rem" },
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: { color: trade.type === "buy" ? "#0ecb81" : "#f6465d", fontWeight: 500 },
+                children: [
+                  "$",
+                  formatNumber(trade.price, precision)
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { style: { textAlign: "right", paddingRight: "0.5rem" }, children: formatNumber(trade.amount, amountPrecision) })
+          ]
+        },
+        `${trade.type}-${trade.price}-${trade.amount}-${trade.time ?? i}`
+      )) })
+    ] })
+  ] });
+}
+function MobileDepthRow({
+  side,
+  price,
+  amount,
+  depthPct,
+  precision,
+  amountPrecision
+}) {
+  const isAsk = side === "ask";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: "1.2fr 0.8fr",
+        padding: "0.2rem 0",
+        fontSize: "0.8rem",
+        position: "relative"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { position: "relative", zIndex: 1, color: isAsk ? "#f6465d" : "#0ecb81" }, children: [
+          "$",
+          formatNumber(price, precision)
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { textAlign: "right", paddingRight: "0.5rem", position: "relative", zIndex: 1 }, children: formatNumber(amount, amountPrecision) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              right: 0,
+              bottom: 0,
+              width: `${clamp3(depthPct, 0, 100)}%`,
+              backgroundColor: isAsk ? "#f6465d" : "#0ecb81",
+              opacity: 0.1,
+              zIndex: 0
+            }
+          }
+        )
+      ]
+    }
+  );
+}
 var PropertyTour = o.forwardRef(
   ({
     className,
@@ -2765,7 +3791,7 @@ var PropertyNewsUpdates = o.forwardRef(
               children: hasItems ? paginatedItems.map((item, index) => {
                 const absoluteIndex = page * ITEMS_PER_PAGE + index;
                 const key = item.displayId ?? item.id ?? `${item.title}-${absoluteIndex}`;
-                const styles = categoryStyles[item.type] ?? categoryStyles.market;
+                const styles2 = categoryStyles[item.type] ?? categoryStyles.market;
                 const dateLabel = item.isNew ?? (highlightFirst && absoluteIndex === 0) ? "Just now" : typeof item.date === "string" && item.date.trim().length > 0 ? item.date : formatDate(item.date);
                 const isHighlighted = item.isNew ?? (highlightFirst && absoluteIndex === 0);
                 return /* @__PURE__ */ jsxs(
@@ -2799,14 +3825,14 @@ var PropertyNewsUpdates = o.forwardRef(
                                 style: {
                                   padding: "0.25rem 0.6rem",
                                   borderRadius: "4px",
-                                  border: `1px solid ${styles.borderColor}`,
-                                  backgroundColor: styles.backgroundColor,
-                                  color: styles.color,
+                                  border: `1px solid ${styles2.borderColor}`,
+                                  backgroundColor: styles2.backgroundColor,
+                                  color: styles2.color,
                                   fontSize: "0.68rem",
                                   fontWeight: 600,
                                   textTransform: "uppercase"
                                 },
-                                children: item.type === "property" ? styles.label : "Market News"
+                                children: item.type === "property" ? styles2.label : "Market News"
                               }
                             )
                           ]
@@ -2870,6 +3896,7 @@ var PropertyCompareBar = o.forwardRef(
     onSelectAddress,
     propertyValue,
     propertyValueVariant = "classic",
+    price,
     ...props
   }, ref) => {
     const normalizedAddresses = o.useMemo(() => {
@@ -2936,7 +3963,36 @@ var PropertyCompareBar = o.forwardRef(
     const formattedPropertyChange = propertyValue?.change == null ? null : `${propertyValue.change >= 0 ? "+" : "-"}${propertyValueCurrency}${Math.abs(
       propertyValue.change
     ).toLocaleString(void 0, propertyValueFormat)}`;
-    propertyValue?.change == null ? void 0 : propertyValue.change >= 0 ? "text-[#0ecb81]" : "text-[#f6465d]";
+    const priceCurrency = price?.currencySymbol ?? "$";
+    const priceFormat = price?.formatOptions ?? { minimumFractionDigits: 2, maximumFractionDigits: 2 };
+    const pricePercentFormat = price?.percentFormatOptions ?? { minimumFractionDigits: 2, maximumFractionDigits: 2 };
+    const formattedPriceValue = price == null ? null : `${priceCurrency}${price.value.toLocaleString(void 0, priceFormat)}`;
+    const formattedPriceChange = price?.change == null ? null : `${price.change >= 0 ? "+" : "-"}${priceCurrency}${Math.abs(price.change).toLocaleString(
+      void 0,
+      priceFormat
+    )}`;
+    const formattedPricePercent = price?.changePercent == null ? null : `${price.changePercent >= 0 ? "+" : "-"}${Math.abs(price.changePercent).toLocaleString(
+      void 0,
+      pricePercentFormat
+    )}%`;
+    const priceContent = formattedPriceValue && propertyValueVariant === "pill" ? /* @__PURE__ */ jsxs(PriceBlock, { $variant: propertyValueVariant, children: [
+      /* @__PURE__ */ jsx(PriceAmount, { children: formattedPriceValue }),
+      formattedPriceChange || formattedPricePercent ? /* @__PURE__ */ jsxs(
+        PriceChange,
+        {
+          $isPositive: price?.change != null ? price.change >= 0 : price?.changePercent != null ? price.changePercent >= 0 : void 0,
+          children: [
+            formattedPriceChange ? /* @__PURE__ */ jsx("span", { children: formattedPriceChange }) : null,
+            formattedPricePercent ? /* @__PURE__ */ jsx("span", { children: formattedPricePercent }) : null
+          ]
+        }
+      ) : null
+    ] }) : null;
+    const propertyValueContent = formattedPropertyValue ? /* @__PURE__ */ jsxs(PropertyValueBlock, { $variant: propertyValueVariant, children: [
+      /* @__PURE__ */ jsx(PropertyValueLabel, { children: propertyValueLabel }),
+      /* @__PURE__ */ jsx(PropertyValueAmount, { children: formattedPropertyValue }),
+      formattedPropertyChange ? /* @__PURE__ */ jsx(PropertyValueChange, { $isPositive: propertyValue?.change != null ? propertyValue.change >= 0 : void 0, children: formattedPropertyChange }) : null
+    ] }) : null;
     return /* @__PURE__ */ jsxs(PropertySelectorContainer, { ref, className, $variant: propertyValueVariant, ...props, children: [
       /* @__PURE__ */ jsxs(PropertySelector, { ref: dropdownRef, onClick: () => hasAddresses && setIsDropdownOpen((prev2) => !prev2), children: [
         /* @__PURE__ */ jsxs(PropertyAddress, { children: [
@@ -2967,11 +4023,10 @@ var PropertyCompareBar = o.forwardRef(
           option.id
         )) })
       ] }),
-      formattedPropertyValue ? /* @__PURE__ */ jsxs(PropertyValueBlock, { $variant: propertyValueVariant, children: [
-        /* @__PURE__ */ jsx(PropertyValueLabel, { children: propertyValueLabel }),
-        /* @__PURE__ */ jsx(PropertyValueAmount, { children: formattedPropertyValue }),
-        formattedPropertyChange ? /* @__PURE__ */ jsx(PropertyValueChange, { $isPositive: propertyValue?.change != null ? propertyValue.change >= 0 : void 0, children: formattedPropertyChange }) : null
-      ] }) : null
+      propertyValueVariant === "pill" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        priceContent,
+        propertyValueContent
+      ] }) : propertyValueContent
     ] });
   }
 );
@@ -2998,14 +4053,36 @@ var PropertySelectorContainer = at.div`
     border-radius: 0;
     margin-top: 0;
     padding-top: 0.5rem;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.75rem;
   }
 
   @media (max-width: 600px) {
-    flex-direction: column;
-    gap: 0.5rem;
+    width: 100%;
+
+    ${({ $variant }) => $variant === "pill" ? rt`
+            display: grid;
+            grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 1fr);
+            gap: 0.35rem;
+            align-items: center;
+
+            > *:nth-child(1) {
+              width: 100%;
+            }
+
+            > *:nth-child(2) {
+              justify-self: center;
+              width: 100%;
+            }
+
+            > *:nth-child(3) {
+              justify-self: end;
+              text-align: right;
+            }
+          ` : rt`
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+            gap: 0.5rem;
+          `};
   }
 `;
 var PropertySelector = at.div`
@@ -3023,7 +4100,7 @@ var PropertySelector = at.div`
   }
 `;
 var PropertyAddress = at.div`
-  font-size: 1.25rem;
+  font-size: 1.125rem;
   font-weight: 600;
   display: flex;
   align-items: center;
@@ -3033,6 +4110,15 @@ var PropertyAddress = at.div`
   svg {
     transition: transform 0.2s;
   }
+
+  @media (max-width: 600px) {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.2rem;
+    font-size: 1rem;
+    line-height: 1.2;
+    white-space: normal;
+  }
 `;
 var PropertySelectorDropdown = at.div`
   position: absolute;
@@ -3083,6 +4169,19 @@ var PropertyValueBlock = at.div`
       box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
       gap: 0.85rem;
       justify-content: flex-end;
+
+      @media (max-width: 600px) {
+        margin: 0;
+        width: auto;
+        min-width: 0;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 0.125rem;
+        padding: 0;
+        background: transparent;
+        border-radius: 0;
+        box-shadow: none;
+      }
     `}
 
   ${({ $variant }) => $variant === "pill" && rt`
@@ -3094,17 +4193,29 @@ var PropertyValueBlock = at.div`
       padding: 0.5rem 1rem;
       gap: 1rem;
       align-items: center;
-    `}
 
-  @media (max-width: 768px) {
-    margin-left: 0;
-  }
+      @media (max-width: 600px) {
+        margin: 0;
+        width: 100%;
+        min-width: 0;
+        flex-direction: column;
+        align-items: flex-end;
+        text-align: right;
+        gap: 0.2rem;
+        padding: 0;
+        background: transparent;
+        border-radius: 0;
+        border: none;
+        white-space: normal;
+      }
+    `}
 
   @media (max-width: 600px) {
     margin: 0;
     flex-direction: column;
-    align-items: flex-start;
-    gap: 0.125rem;
+    align-items: flex-end;
+    gap: 0.2rem;
+    white-space: normal;
   }
 `;
 var PropertyValueLabel = at.span`
@@ -3112,18 +4223,59 @@ var PropertyValueLabel = at.span`
   color: var(--color-text-secondary, rgba(255, 255, 255, 0.6));
   text-transform: uppercase;
   letter-spacing: 0.5px;
+
+  @media (max-width: 600px) {
+    font-size: 0.6rem;
+    letter-spacing: 0.4px;
+  }
 `;
 var PropertyValueAmount = at.span`
   font-size: 1.1rem;
   font-weight: 600;
   color: #fff;
+
+  @media (max-width: 600px) {
+    font-size: 0.95rem;
+  }
 `;
 var PropertyValueChange = at.span`
   font-size: 0.75rem;
   font-weight: 500;
   color: ${(props) => props.$isPositive == null ? "var(--color-text-secondary, rgba(255, 255, 255, 0.6))" : props.$isPositive ? "var(--color-positive, #0ecb81)" : "var(--color-negative, #f6465d)"};
+
+  @media (max-width: 600px) {
+    font-size: 0.65rem;
+  }
+`;
+var PriceBlock = at.div`
+  display: none;
+
+  ${({ $variant }) => $variant === "pill" && rt`
+      @media (max-width: 600px) {
+        display: flex;
+        flex: none;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 0.15rem;
+        width: 100%;
+      }
+    `}
+`;
+var PriceAmount = at.span`
+  font-size: 1.6rem;
+  font-weight: 600;
+  color: #fff;
+  letter-spacing: 0.2px;
+`;
+var PriceChange = at.span`
+  font-size: 0.85rem;
+  font-weight: 500;
+  display: inline-flex;
+  gap: 0.35rem;
+  color: ${(props) => props.$isPositive == null ? "var(--color-text-secondary, rgba(255, 255, 255, 0.6))" : props.$isPositive ? "var(--color-positive, #0ecb81)" : "var(--color-negative, #f6465d)"};
 `;
-var TABS = [
+var DEFAULT_TABS = [
   { id: "portfolio", label: "Portfolio" },
   { id: "openOrders", label: "Open Orders" },
   { id: "tradeHistory", label: "Trade History" },
@@ -3132,7 +4284,7 @@ var TABS = [
 var panelStyle = {
   width: "100%",
   borderRadius: "16px",
-  backgroundColor: "#111111",
+  backgroundColor: "#0b0e10",
   border: "1px solid rgba(255,255,255,0.08)",
   color: "#ffffff",
   display: "flex",
@@ -3218,12 +4370,29 @@ var formatPercent = (value, fractionDigits = 2) => {
   return `${value.toFixed(fractionDigits)}%`;
 };
 var YourOrders = o.forwardRef(
-  ({ className, title = "Portfolio Holdings (Demo)", orders, renderOrderActions, ...props }, ref) => {
-    const [activeTab, setActiveTab] = o.useState("portfolio");
-    const hasOrders = Array.isArray(orders) && orders.length > 0;
-    const renderPortfolio = () => {
+  ({ className, title, orders, tabs, activeTabId, onTabChange, renderOrderActions, ...props }, ref) => {
+    const [internalActiveTab, setInternalActiveTab] = o.useState(tabs?.[0]?.id ?? "portfolio");
+    const effectiveActiveTabId = activeTabId ?? internalActiveTab;
+    const handleTabChange = (tabId) => {
+      if (onTabChange) {
+        onTabChange(tabId);
+      } else {
+        setInternalActiveTab(tabId);
+      }
+    };
+    const resolvedTabs = tabs ?? DEFAULT_TABS.map((t) => ({ ...t, orders: orders ?? [], emptyState: `No ${t.label.toLowerCase()} data available.` }));
+    const activeTab = resolvedTabs.find((t) => t.id === effectiveActiveTabId) ?? resolvedTabs[0];
+    const activeOrders = activeTab?.orders ?? orders ?? [];
+    const displayTitle = title ?? activeTab?.title ?? activeTab?.label ?? "Portfolio Holdings";
+    console.log("[YourOrders] tabs:", tabs?.map((t) => ({ id: t.id, ordersCount: t.orders?.length })));
+    console.log("[YourOrders] activeTabId prop:", activeTabId);
+    console.log("[YourOrders] effectiveActiveTabId:", effectiveActiveTabId);
+    console.log("[YourOrders] activeTab:", activeTab?.id, "orders count:", activeOrders?.length);
+    const hasOrders = Array.isArray(activeOrders) && activeOrders.length > 0;
+    const emptyMessage = activeTab?.emptyState ?? "No holdings yet. Start trading to build your portfolio.";
+    const renderOrders = () => {
       if (!hasOrders) {
-        return /* @__PURE__ */ jsx("div", { style: emptyStateStyle, children: "No holdings yet. Start trading to build your portfolio." });
+        return /* @__PURE__ */ jsx("div", { style: emptyStateStyle, children: emptyMessage });
       }
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs("div", { style: tableHeaderStyle, children: [
@@ -3234,7 +4403,7 @@ var YourOrders = o.forwardRef(
           /* @__PURE__ */ jsx("div", { style: tableHeaderCell, children: "Avg Price" }),
           /* @__PURE__ */ jsx("div", { style: tableHeaderCell, children: "P&L" })
         ] }),
-        /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.65rem" }, children: orders.map((order) => {
+        /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.65rem" }, children: activeOrders.map((order) => {
           const propertyName = order.asset;
           const holding = order.holdingLabel ?? `${order.amount.toLocaleString(void 0, {
             minimumFractionDigits: 0,
@@ -3327,60 +4496,52 @@ var YourOrders = o.forwardRef(
         }) })
       ] });
     };
-    const renderOtherTab = (label) => /* @__PURE__ */ jsx("div", { style: emptyStateStyle, children: `No ${label.toLowerCase()} data available.` });
-    let tabContent = null;
-    switch (activeTab) {
-      case "portfolio":
-        tabContent = renderPortfolio();
-        break;
-      case "openOrders":
-        tabContent = renderOtherTab("Open Orders");
-        break;
-      case "tradeHistory":
-        tabContent = renderOtherTab("Trade History");
-        break;
-      case "orderHistory":
-        tabContent = renderOtherTab("Order History");
-        break;
-      default:
-        tabContent = null;
-    }
-    return /* @__PURE__ */ jsxs("div", { ref, style: panelStyle, className, ...props, children: [
-      /* @__PURE__ */ jsx("div", { style: headerStyle, children: /* @__PURE__ */ jsx("h3", { style: titleStyle, children: title }) }),
-      /* @__PURE__ */ jsx("div", { style: tabsRowStyle, children: TABS.map((tab) => {
-        const isActive = activeTab === tab.id;
-        return /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: () => setActiveTab(tab.id),
-            style: {
-              ...tabButtonBase,
-              color: isActive ? "#ffffff" : "rgba(255,255,255,0.55)",
-              fontWeight: isActive ? 600 : 400
-            },
-            children: [
-              tab.label,
-              isActive ? /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    position: "absolute",
-                    bottom: "-1px",
-                    left: 0,
-                    right: 0,
-                    height: "2px",
-                    background: "#f0b90b"
-                  }
-                }
-              ) : null
-            ]
-          },
-          tab.id
-        );
-      }) }),
-      /* @__PURE__ */ jsx("div", { style: tabContentWrapper, children: tabContent })
-    ] });
+    const tabContent = renderOrders();
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        style: { ...panelStyle, ...props.style ?? {} },
+        className,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { style: headerStyle, children: /* @__PURE__ */ jsx("h3", { style: titleStyle, children: displayTitle }) }),
+          resolvedTabs.length > 1 && /* @__PURE__ */ jsx("div", { style: tabsRowStyle, children: resolvedTabs.map((tab) => {
+            const isActive = effectiveActiveTabId === tab.id;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleTabChange(tab.id),
+                style: {
+                  ...tabButtonBase,
+                  color: isActive ? "#ffffff" : "rgba(255,255,255,0.55)",
+                  fontWeight: isActive ? 600 : 400
+                },
+                children: [
+                  tab.label,
+                  isActive ? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        bottom: "-1px",
+                        left: 0,
+                        right: 0,
+                        height: "2px",
+                        background: "#f0b90b"
+                      }
+                    }
+                  ) : null
+                ]
+              },
+              tab.id
+            );
+          }) }),
+          /* @__PURE__ */ jsx("div", { style: tabContentWrapper, children: tabContent })
+        ]
+      }
+    );
   }
 );
 YourOrders.displayName = "YourOrders";
@@ -3391,6 +4552,17 @@ var formatPrice = (value, currencySymbol) => {
     maximumFractionDigits: 2
   })}`;
 };
+function createCandlestickSeries(chart, options) {
+  const chartWithSeries = chart;
+  if (typeof chartWithSeries.addCandlestickSeries === "function") {
+    return chartWithSeries.addCandlestickSeries(options);
+  }
+  const candlestickCtor = LightweightCharts.CandlestickSeries;
+  if (typeof chartWithSeries.addSeries === "function" && candlestickCtor) {
+    return chartWithSeries.addSeries(candlestickCtor, options);
+  }
+  throw new Error("Candlestick series API is not available in the current lightweight-charts version.");
+}
 var PriceChart = o.forwardRef(
   ({
     className,
@@ -3422,10 +4594,16 @@ var PriceChart = o.forwardRef(
       if (first == null || last == null || first === 0) return void 0;
       return (last - first) / first * 100;
     }, [changePercent, data]);
+    const dollarChange = o.useMemo(() => {
+      const first = data[0]?.open;
+      const last = data.at(-1)?.close;
+      if (first == null || last == null) return void 0;
+      return last - first;
+    }, [data]);
     o.useEffect(() => {
       const el = containerRef.current;
       if (!el) return;
-      const chart = createChart(el, {
+      const chart = LightweightCharts.createChart(el, {
         autoSize: true,
         layout: {
           background: { color: "transparent" },
@@ -3450,7 +4628,7 @@ var PriceChart = o.forwardRef(
           horzLine: { color: "rgba(255,255,255,0.12)" }
         }
       });
-      const series = chart.addCandlestickSeries({
+      const series = createCandlestickSeries(chart, {
         upColor: "#0ecb81",
         downColor: "#f6465d",
         borderVisible: false,
@@ -3509,15 +4687,15 @@ var PriceChart = o.forwardRef(
       {
         ref,
         className: cn(
-          "w-full min-h-[450px] rounded-lg border border-white/10 bg-black/30 text-white backdrop-blur-md",
+          "w-full min-h-[360px] rounded-lg border border-white/10 bg-black/30 text-white backdrop-blur-md sm:min-h-[450px]",
           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__ */ jsxs(CardHeader, { className: "flex flex-col gap-4 px-4 pb-2 pt-5 md:flex-row md:items-start md:justify-between md:px-6 md:pt-6", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-3 md:w-auto", 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((r2) => {
+              /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: ranges.map((r2) => {
                 const active = r2 === selectedRange;
                 const hovered = hoveredRange === r2;
                 const style = {
@@ -3542,16 +4720,43 @@ var PriceChart = o.forwardRef(
                 );
               }) })
             ] }),
-            /* @__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),
-                "%"
-              ] })
+            resolvedPrice == null && inferredChangePercent == null ? null : /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
+              resolvedPrice == null ? null : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn("text-xl font-semibold tabular-nums", changeClass),
+                  style: { marginRight: "1rem" },
+                  children: formatPrice(resolvedPrice, currencySymbol)
+                }
+              ),
+              dollarChange != null ? /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: cn("text-base font-medium tabular-nums", changeClass),
+                  style: { marginRight: "0.5rem" },
+                  children: [
+                    dollarChange >= 0 ? "+" : "",
+                    dollarChange.toFixed(2)
+                  ]
+                }
+              ) : null,
+              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(
+          /* @__PURE__ */ jsx("div", { className: "px-4 pb-5 pt-2 md:px-6 md:pb-6", children: /* @__PURE__ */ jsx(
             "div",
             {
               ref: containerRef,
@@ -3594,195 +4799,369 @@ var PropertyHeroHeader = o.forwardRef(
     const tradeHoverColor = "#f5dd9a";
     const [isTradeInteracting, setIsTradeInteracting] = o.useState(false);
     const [isOfferInteracting, setIsOfferInteracting] = o.useState(false);
+    const hasAmenities = beds != null || baths != null || cars != null || propertyTypeLabel != null;
     const headingStyle = {
-      fontSize: "2.5rem",
+      fontSize: "clamp(1.6rem, 4vw, 2.5rem)",
       marginBottom: "0.5rem",
       color: "#ffffff",
       textShadow: "0 2px 4px rgba(0, 0, 0, 0.3)",
       fontWeight: 600,
       lineHeight: 1.2
     };
-    const priceBlockStyle = {
-      fontSize: "1.25rem",
-      fontWeight: 600,
-      color: "var(--color-accent, #f0b90b)",
-      marginLeft: "1rem",
-      paddingLeft: "1rem",
-      borderLeft: "1px solid rgba(255, 255, 255, 0.3)",
-      display: "flex",
-      alignItems: "center"
-    };
-    const locationStyle = {
-      fontSize: "1.25rem",
-      color: "rgba(255, 255, 255, 0.9)",
-      marginBottom: "0.75rem",
-      display: "flex",
-      alignItems: "center"
-    };
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        className: cn(
-          "relative w-[1200px] h-[500px] overflow-hidden bg-black rounded-[12px]",
-          className
+    return /* @__PURE__ */ jsxs(OuterWrapper, { ref, className: cn(className), ...props, children: [
+      /* @__PURE__ */ jsxs(HeroContainer, { children: [
+        /* @__PURE__ */ jsx(
+          HeroImage,
+          {
+            src: imageUrl,
+            alt: imageAlt ?? name
+          }
         ),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: imageUrl,
-              alt: imageAlt ?? name,
-              className: "absolute inset-0 block h-full w-full object-cover object-center",
-              style: { transform: "scale(1.20)", transformOrigin: "center" }
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "absolute bottom-0 left-0 right-0 z-10 flex w-full items-end justify-between gap-4 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-full 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]:px-3 max-[768px]:py-3 max-[480px]:px-3 max-[480px]:py-2 min-[769px]:flex-1 min-[769px]:min-w-0", children: [
-              /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-2", children: [
-                /* @__PURE__ */ jsx("h1", { style: headingStyle, className: "break-words", children: name }),
-                /* @__PURE__ */ jsxs("div", { className: "mb-3 flex flex-wrap items-center max-[768px]:mb-[0.6rem] max-[768px]:text-[1.1rem] max-[480px]:mb-[0.5rem] max-[480px]:text-[1rem]", children: [
-                  /* @__PURE__ */ jsx("span", { style: locationStyle, children: location }),
-                  price == null ? null : /* @__PURE__ */ jsxs("span", { style: priceBlockStyle, 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]"
+        /* @__PURE__ */ jsx(HeroGradient, { "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs("div", { className: "absolute bottom-0 left-0 right-0 z-10 flex w-full flex-wrap items-end justify-between gap-4 p-8 max-[768px]:gap-4 max-[640px]:gap-3 max-[768px]:p-6 max-[480px]:p-4", children: [
+          /* @__PURE__ */ jsxs(InfoCard, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-2", children: [
+              /* @__PURE__ */ jsx("h1", { style: headingStyle, className: "break-words", children: name }),
+              /* @__PURE__ */ jsxs(InfoRow, { className: "mb-3 max-[768px]:mb-[0.6rem] max-[480px]:mb-[0.5rem]", children: [
+                /* @__PURE__ */ jsx(LocationText, { children: location }),
+                price == null ? null : /* @__PURE__ */ jsxs(PriceBlock2, { 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" })
+                          }
                         ),
-                        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),
-                          "%"
-                        ]
-                      }
-                    )
-                  ] })
+                        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 shrink-0 flex-wrap items-center gap-3 max-[768px]:w-full max-[768px]:justify-between max-[768px]:gap-2 max-[480px]:gap-2", children: [
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: onTrade,
-                  className: "flex items-center justify-center rounded border font-semibold transition-all duration-200 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)] text-[0.95rem] max-[480px]:text-[0.9rem]",
-                  style: {
-                    backgroundColor: isTradeInteracting ? tradeHoverColor : accentColor,
-                    color: "black",
-                    width: "88.06px",
-                    height: "43px",
-                    minWidth: "88.06px",
-                    borderColor: isTradeInteracting ? accentColor : "transparent",
-                    boxShadow: isTradeInteracting ? `0 0 0 2px rgba(0,0,0,0.4), 0 0 0 4px ${accentColor}` : "none"
-                  },
-                  onMouseEnter: () => setIsTradeInteracting(true),
-                  onMouseLeave: () => setIsTradeInteracting(false),
-                  onMouseDown: () => setIsTradeInteracting(true),
-                  onMouseUp: () => setIsTradeInteracting(false),
-                  onFocus: () => setIsTradeInteracting(true),
-                  onBlur: () => setIsTradeInteracting(false),
-                  onTouchStart: () => setIsTradeInteracting(true),
-                  onTouchEnd: () => setIsTradeInteracting(false),
-                  children: "Trade"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: onMakeOffer,
-                  className: "flex items-center justify-center rounded border font-semibold transition-all duration-200 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)] text-[0.95rem] max-[480px]:text-[0.9rem]",
-                  style: {
-                    backgroundColor: isOfferInteracting ? accentColor : "transparent",
-                    borderColor: accentColor,
-                    color: isOfferInteracting ? "black" : accentColor,
-                    width: "127.14px",
-                    height: "43px",
-                    minWidth: "127.14px",
-                    boxShadow: isOfferInteracting ? `0 0 0 2px rgba(0,0,0,0.4), 0 0 0 4px ${accentColor}` : "none"
-                  },
-                  onMouseEnter: () => setIsOfferInteracting(true),
-                  onMouseLeave: () => setIsOfferInteracting(false),
-                  onMouseDown: () => setIsOfferInteracting(true),
-                  onMouseUp: () => setIsOfferInteracting(false),
-                  onFocus: () => setIsOfferInteracting(true),
-                  onBlur: () => setIsOfferInteracting(false),
-                  onTouchStart: () => setIsOfferInteracting(true),
-                  onTouchEnd: () => setIsOfferInteracting(false),
-                  children: "Make Offer"
-                }
-              )
+            /* @__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(ActionButtons, { children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onTrade,
+                className: "flex items-center justify-center rounded border font-semibold transition-all duration-200 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)] text-[0.95rem] max-[480px]:text-[0.9rem]",
+                style: {
+                  backgroundColor: isTradeInteracting ? tradeHoverColor : accentColor,
+                  color: "black",
+                  width: "88.06px",
+                  height: "43px",
+                  minWidth: "88.06px",
+                  borderColor: isTradeInteracting ? accentColor : "transparent",
+                  boxShadow: isTradeInteracting ? `0 0 0 2px rgba(0,0,0,0.4), 0 0 0 4px ${accentColor}` : "none"
+                },
+                onMouseEnter: () => setIsTradeInteracting(true),
+                onMouseLeave: () => setIsTradeInteracting(false),
+                onMouseDown: () => setIsTradeInteracting(true),
+                onMouseUp: () => setIsTradeInteracting(false),
+                onFocus: () => setIsTradeInteracting(true),
+                onBlur: () => setIsTradeInteracting(false),
+                onTouchStart: () => setIsTradeInteracting(true),
+                onTouchEnd: () => setIsTradeInteracting(false),
+                children: "Trade"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onMakeOffer,
+                className: "flex items-center justify-center rounded border font-semibold transition-all duration-200 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)] text-[0.95rem] max-[480px]:text-[0.9rem]",
+                style: {
+                  backgroundColor: isOfferInteracting ? accentColor : "transparent",
+                  borderColor: accentColor,
+                  color: isOfferInteracting ? "black" : accentColor,
+                  width: "127.14px",
+                  height: "43px",
+                  minWidth: "127.14px",
+                  boxShadow: isOfferInteracting ? `0 0 0 2px rgba(0,0,0,0.4), 0 0 0 4px ${accentColor}` : "none"
+                },
+                onMouseEnter: () => setIsOfferInteracting(true),
+                onMouseLeave: () => setIsOfferInteracting(false),
+                onMouseDown: () => setIsOfferInteracting(true),
+                onMouseUp: () => setIsOfferInteracting(false),
+                onFocus: () => setIsOfferInteracting(true),
+                onBlur: () => setIsOfferInteracting(false),
+                onTouchStart: () => setIsOfferInteracting(true),
+                onTouchEnd: () => setIsOfferInteracting(false),
+                children: "Make Offer"
+              }
+            )
           ] })
-        ]
-      }
-    );
+        ] })
+      ] }),
+      hasAmenities ? /* @__PURE__ */ jsxs(MobileAmenities, { children: [
+        beds == null ? null : /* @__PURE__ */ jsxs(MobileAmenity, { children: [
+          /* @__PURE__ */ jsx(BedDouble, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            beds,
+            " Beds"
+          ] })
+        ] }),
+        baths == null ? null : /* @__PURE__ */ jsxs(MobileAmenity, { children: [
+          /* @__PURE__ */ jsx(Bath, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            baths,
+            " Baths"
+          ] })
+        ] }),
+        cars == null ? null : /* @__PURE__ */ jsxs(MobileAmenity, { children: [
+          /* @__PURE__ */ jsx(CarFront, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            cars,
+            " Cars"
+          ] })
+        ] }),
+        propertyTypeLabel == null ? null : /* @__PURE__ */ jsx(MobileAmenity, { children: propertyTypeLabel })
+      ] }) : null
+    ] });
   }
 );
 PropertyHeroHeader.displayName = "PropertyHeroHeader";
+var OuterWrapper = at.div`
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+var HeroContainer = at.div`
+  position: relative;
+  width: 100%;
+  height: 500px;
+  border-radius: 12px;
+  overflow: hidden;
+  background-color: #000;
+
+  @media (max-width: 1024px) {
+    height: 420px;
+  }
+
+  @media (max-width: 768px) {
+    height: 320px;
+  }
+
+  @media (max-width: 640px) {
+    height: 280px;
+  }
+
+  @media (max-width: 540px) {
+    height: 250px;
+  }
+
+  @media (max-width: 420px) {
+    height: 220px;
+  }
+
+  @media (max-width: 360px) {
+    height: 200px;
+  }
+`;
+var MobileAmenities = at.div`
+  display: none;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: rgba(8, 8, 12, 0.85);
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 0.85rem;
+
+  @media (max-width: 768px) {
+    display: flex;
+    flex-wrap: wrap;
+  }
+`;
+var MobileAmenity = at.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.35rem 0.5rem;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+  font-weight: 500;
+`;
+var HeroImage = at.img`
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  transform: scale(1.15);
+  transform-origin: center;
+  min-width: 110%;
+  transition: transform 0.5s ease-out;
+`;
+var HeroGradient = at.div`
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0.75) 100%);
+`;
+var ActionButtons = at.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem;
+  justify-content: flex-start;
+
+  @media (max-width: 768px) {
+    gap: 0.5rem;
+  }
+
+  @media (max-width: 640px) {
+    display: none;
+  }
+`;
+var InfoCard = at.div`
+  display: inline-block;
+  width: fit-content;
+  max-width: 70%;
+  border-radius: 12px;
+  background: rgba(0, 0, 0, 0.12);
+  padding: 0.75rem 1rem;
+  color: #fff;
+  backdrop-filter: blur(6px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  min-width: 0;
+
+  @media (max-width: 768px) {
+    max-width: 85%;
+  }
+
+  @media (max-width: 640px) {
+    max-width: 92%;
+  }
+
+  @media (max-width: 480px) {
+    max-width: 95%;
+  }
+`;
+var InfoRow = at.div`
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+
+  @media (max-width: 640px) {
+    gap: 0.5rem;
+  }
+`;
+var LocationText = at.span`
+  font-size: clamp(1rem, 2.6vw, 1.25rem);
+  color: rgba(255, 255, 255, 0.9);
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+var PriceBlock2 = at.span`
+  display: flex;
+  align-items: center;
+  font-size: clamp(1rem, 2.2vw, 1.25rem);
+  font-weight: 600;
+  color: var(--color-accent, #f0b90b);
+  padding-left: 1rem;
+  border-left: 1px solid rgba(255, 255, 255, 0.25);
+  min-height: 1.5rem;
+`;
 var PropertySubheader = o.forwardRef(
   ({ className, tabs, activeTabId, onTabChange, actions, ...props }, ref) => {
+    const tabsContainerRef = o.useRef(null);
+    o.useEffect(() => {
+      const container = tabsContainerRef.current;
+      if (!container) return;
+      const isMobile = window.innerWidth <= 768;
+      if (!isMobile) return;
+      const forceScrollbar = () => {
+        if (container.scrollWidth > container.clientWidth) {
+          container.scrollTop = 1;
+          container.scrollTop = 0;
+          container.scrollLeft = 1;
+          container.scrollLeft = 0;
+        }
+      };
+      setTimeout(forceScrollbar, 100);
+      window.addEventListener("resize", forceScrollbar);
+      return () => window.removeEventListener("resize", forceScrollbar);
+    }, [tabs]);
     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),
+        className: cn(
+          "w-full font-normal",
+          "flex flex-col-reverse gap-3",
+          "md:flex-row md:items-center md:justify-between",
+          className
+        ),
         ...props,
         children: [
           /* @__PURE__ */ jsx(
             "div",
             {
+              ref: tabsContainerRef,
               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 gap-2 lg:gap-4", children: tabs.map((tab) => {
+              children: /* @__PURE__ */ jsx("div", { className: "flex min-w-max", children: tabs.map((tab) => {
                 const active = tab.id === activeTabId;
                 return /* @__PURE__ */ jsxs(
                   "button",
@@ -3791,13 +5170,12 @@ var PropertySubheader = o.forwardRef(
                     onClick: () => onTabChange?.(tab.id),
                     className: cn(
                       "relative whitespace-nowrap",
-                      "px-5 py-4 lg:px-6",
-                      "text-[16px]",
-                      "font-medium",
+                      "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]",
-                      active ? "font-semibold text-[var(--color-accent,#e6c87e)] hover:text-[var(--color-accent,#f1d27a)]" : "text-white/65 hover:text-white"
+                      "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",
@@ -3840,10 +5218,10 @@ var PropertySubheader = o.forwardRef(
                   onClick: action.onClick,
                   className: cn(
                     "flex shrink-0 items-center gap-[5px] whitespace-nowrap",
-                    "rounded-[6px]",
-                    "border border-white/15",
+                    "rounded",
+                    "border border-white/10",
                     "bg-transparent",
-                    "px-3.5 py-1.5 text-[14px] font-medium",
+                    "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)]"
@@ -3863,7 +5241,66 @@ var PropertySubheader = o.forwardRef(
   }
 );
 PropertySubheader.displayName = "PropertySubheader";
+var MobileToggleContainer = at.div`
+  display: none;
+  
+  @media (max-width: 1024px) {
+    display: flex;
+    gap: 0.5rem;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: var(--color-card-darker, #111);
+    padding: 0.75rem 1rem;
+    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
+    border-top: 1px solid var(--color-border);
+    z-index: 100;
+    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
+  }
+`;
+var MobileToggleButton = at.button`
+  flex: 1;
+  padding: 0.75rem;
+  background-color: ${(props) => props.active ? "var(--color-accent)" : "transparent"};
+  color: ${(props) => props.active ? "#000" : "var(--color-text-secondary)"};
+  border: ${(props) => props.active ? "1px solid var(--color-accent)" : "1px solid rgba(255, 255, 255, 0.2)"};
+  border-radius: 6px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  
+  &:hover {
+    background-color: ${(props) => props.active ? "var(--color-accent-hover)" : "rgba(255, 255, 255, 0.05)"};
+    border-color: ${(props) => props.active ? "var(--color-accent)" : "rgba(255, 255, 255, 0.3)"};
+  }
+  
+  @media (max-width: 480px) {
+    font-size: 0.85rem;
+    padding: 0.6rem 0.5rem;
+  }
+`;
+var MobileTradeNav = o.forwardRef(
+  ({ className, items, activeId, onChange, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(MobileToggleContainer, { ref, className: cn(className), ...props, children: items.map((item) => /* @__PURE__ */ jsxs(
+      MobileToggleButton,
+      {
+        type: "button",
+        active: item.id === activeId,
+        onClick: () => onChange?.(item.id),
+        children: [
+          item.icon,
+          item.label
+        ]
+      },
+      item.id
+    )) });
+  }
+);
+MobileTradeNav.displayName = "MobileTradeNav";
 
-export { Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, HousePositionSlider, LoafLiquidityBadge, Orderbook, PortfolioSummary, PriceChart, PropertyCompareBar, PropertyHeroHeader, PropertyNewsUpdates, PropertySubheader, PropertyTour, YourOrders, badgeVariants, buttonVariants };
+export { Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, HousePositionSlider, HousePositionSliderMobile, LoafLiquidityBadge, MobileTradeNav, Orderbook, PortfolioSummary, PriceChart, PropertyCompareBar, PropertyHeroHeader, PropertyNewsUpdates, PropertySubheader, PropertyTour, YourOrders, badgeVariants, buttonVariants };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map