@loafmarkets/ui 0.0.4 → 0.0.6

package/dist/index.mjs

@@ -282,6 +282,7 @@ function HousePositionSlider({
   pendingOrders = [],
   defaultOrderType = "market",
   orderbook,
+  ownershipPercentOverride,
   onConfirmOrder,
   className,
   ...props
@@ -292,6 +293,7 @@ function HousePositionSlider({
   const [deltaTokensBuy, setDeltaTokensBuy] = React5.useState(0);
   const [deltaTokensSell, setDeltaTokensSell] = React5.useState(0);
   const [isDragging, setIsDragging] = React5.useState(false);
+  const [visualTargetPct, setVisualTargetPct] = React5.useState(null);
   const [orderType, setOrderType] = React5.useState(defaultOrderType);
   const [limitPrice, setLimitPrice] = React5.useState(currentPrice);
   const [limitPriceInput, setLimitPriceInput] = React5.useState(currentPrice.toFixed(2));
@@ -313,9 +315,8 @@ function HousePositionSlider({
   const effectiveAvailableCash = Math.max(0, availableCash - pendingBuyValue);
   const effectiveTokensHeld = Math.max(0, tokensHeld - pendingSellTokens);
   const holdingsValue = tokensHeld * effectivePrice;
-  const sliderHoldingsValue = effectiveTokensHeld * effectivePrice;
-  const sliderTotalCapacity = sliderHoldingsValue + effectiveAvailableCash;
-  const baselinePct = sliderTotalCapacity <= 0 ? 0 : sliderHoldingsValue / sliderTotalCapacity * 100;
+  const safeTotalTokens = totalTokens > 0 ? totalTokens : 1;
+  const baselineOwnershipActual = clamp(effectiveTokensHeld / safeTotalTokens * 100, 0, 100);
   let deltaTokens = 0;
   let deltaValue = 0;
   let marketAvgPrice = null;
@@ -361,29 +362,21 @@ function HousePositionSlider({
   }
   targetTokens = tokensHeld + deltaTokens;
   targetValue = targetTokens * effectivePrice;
-  const plannedDeltaValue = (() => {
-    if (orderMode === "buy") {
-      if (buyTrackingMode === "dollars") {
-        const notional = Math.min(Math.max(0, deltaDollars), effectiveAvailableCash);
-        return notional;
-      }
-      const tokensPlanned = Math.max(0, deltaTokensBuy);
-      const referencePrice = orderType === "market" ? currentPrice || limitPriceSafe : limitPriceSafe;
-      return Math.min(tokensPlanned * referencePrice, effectiveAvailableCash);
-    }
-    if (orderMode === "sell") {
-      const tokensToSell = Math.abs(Math.min(0, deltaTokensSell));
-      const sellValue = tokensToSell * effectivePrice;
-      return -Math.min(sellValue, sliderHoldingsValue);
-    }
-    return 0;
-  })();
-  const sliderTargetValue = clamp(sliderHoldingsValue + plannedDeltaValue, 0, sliderTotalCapacity);
-  const targetPct = sliderTotalCapacity <= 0 ? 0 : sliderTargetValue / sliderTotalCapacity * 100;
+  const sliderTargetTokens = clamp(effectiveTokensHeld + deltaTokens, 0, safeTotalTokens);
+  const normalizedTargetPct = sliderTargetTokens / safeTotalTokens * 100;
   const isIncrease = orderMode === "buy";
   const hasChange = orderMode !== "none" && (Math.abs(deltaTokens) > 1e-3 || Math.abs(deltaValue) > 0.01);
-  const currentOwnership = totalTokens <= 0 ? 0 : tokensHeld / totalTokens * 100;
-  const targetOwnership = totalTokens <= 0 ? 0 : targetTokens / totalTokens * 100;
+  const currentOwnership = totalTokens <= 0 ? 0 : clamp(tokensHeld / totalTokens * 100, 0, 100);
+  const targetOwnership = totalTokens <= 0 ? 0 : clamp(targetTokens / totalTokens * 100, 0, 100);
+  const ownershipOverrideValue = typeof ownershipPercentOverride === "number" && Number.isFinite(ownershipPercentOverride) ? clamp(ownershipPercentOverride, 0, 100) : null;
+  const ownershipShift = ownershipOverrideValue != null ? ownershipOverrideValue - baselineOwnershipActual : 0;
+  const baselinePct = clamp(ownershipOverrideValue ?? baselineOwnershipActual, 0, 100);
+  const impliedTargetPct = clamp(normalizedTargetPct + ownershipShift, 0, 100);
+  const displayTargetPct = visualTargetPct ?? impliedTargetPct;
+  const targetPct = displayTargetPct;
+  const displayCurrentOwnership = clamp(ownershipOverrideValue ?? currentOwnership, 0, 100);
+  const impliedDisplayTargetOwnership = clamp(targetOwnership + ownershipShift, 0, 100);
+  const displayTargetOwnership = visualTargetPct ?? impliedDisplayTargetOwnership;
   const estFeeTokens = Math.abs(deltaValue) * 5e-3 / (effectivePrice || 1);
   const resetOrder = React5.useCallback(() => {
     setOrderMode("none");
@@ -391,6 +384,7 @@ function HousePositionSlider({
     setDeltaDollars(0);
     setDeltaTokensBuy(0);
     setDeltaTokensSell(0);
+    setVisualTargetPct(null);
   }, []);
   const updateOrderFromTargetValue = React5.useCallback(
     (newTargetValue) => {
@@ -421,6 +415,7 @@ function HousePositionSlider({
       const nextOwnership = clamp(newOwnershipPercent, 0, 100);
       const newTargetTokens = nextOwnership / 100 * totalTokens;
       updateOrderFromTargetValue(newTargetTokens * effectivePrice);
+      setVisualTargetPct(nextOwnership);
     },
     [effectivePrice, totalTokens, updateOrderFromTargetValue]
   );
@@ -453,12 +448,14 @@ function HousePositionSlider({
       const magnitude = Math.min(Math.abs(normalized), 1);
       if (magnitude < 0.02) {
         resetOrder();
+        setVisualTargetPct(null);
         return;
       }
       if (normalized > 0) {
         const notional = clamp(magnitude * effectiveAvailableCash, 0, effectiveAvailableCash);
         if (notional <= 0) {
           resetOrder();
+          setVisualTargetPct(null);
           return;
         }
         setOrderMode("buy");
@@ -466,12 +463,14 @@ function HousePositionSlider({
         setDeltaDollars(notional);
         setDeltaTokensBuy(0);
         setDeltaTokensSell(0);
+        setVisualTargetPct(clamp(pct, 0, 100));
         return;
       }
       if (normalized < 0) {
         const tokensToSell = clamp(magnitude * effectiveTokensHeld, 0, effectiveTokensHeld);
         if (tokensToSell <= 0) {
           resetOrder();
+          setVisualTargetPct(null);
           return;
         }
         setOrderMode("sell");
@@ -479,9 +478,11 @@ function HousePositionSlider({
         setDeltaTokensSell(-tokensToSell);
         setDeltaDollars(0);
         setDeltaTokensBuy(0);
+        setVisualTargetPct(clamp(pct, 0, 100));
         return;
       }
       resetOrder();
+      setVisualTargetPct(null);
     },
     [effectiveAvailableCash, effectiveTokensHeld, resetOrder]
   );
@@ -644,19 +645,19 @@ function HousePositionSlider({
           " Ownership"
         ] }),
         /* @__PURE__ */ jsxs("span", { className: "text-white", children: [
-          currentOwnership.toFixed(2),
+          displayCurrentOwnership.toFixed(2),
           "%",
           /* @__PURE__ */ jsx("span", { className: "mx-1.5 text-white/50", children: "\u2192" }),
           /* @__PURE__ */ jsx(
             "input",
             {
               type: "text",
-              value: ownershipInput || targetOwnership.toFixed(2),
+              value: ownershipInput || displayTargetOwnership.toFixed(2),
               onChange: (e) => {
                 const val = e.target.value;
                 if (val === "" || /^[0-9]*\.?[0-9]*$/.test(val)) setOwnershipInput(val);
               },
-              onFocus: () => setOwnershipInput(targetOwnership.toFixed(2)),
+              onFocus: () => setOwnershipInput(displayTargetOwnership.toFixed(2)),
               onBlur: () => {
                 const num = Number.parseFloat(ownershipInput);
                 if (Number.isFinite(num)) updateOrderFromOwnership(num);
@@ -667,7 +668,7 @@ function HousePositionSlider({
               },
               className: cn(
                 "w-[70px] rounded-[4px] border bg-white/10 px-2 py-1 text-right font-semibold outline-none",
-                targetOwnership >= currentOwnership ? "border-[rgba(14,203,129,0.3)] text-[#0ecb81] focus:border-[#0ecb81]" : "border-[rgba(246,70,93,0.3)] text-[#f6465d] focus:border-[#f6465d]"
+                displayTargetOwnership >= displayCurrentOwnership ? "border-[rgba(14,203,129,0.3)] text-[#0ecb81] focus:border-[#0ecb81]" : "border-[rgba(246,70,93,0.3)] text-[#f6465d] focus:border-[#f6465d]"
               )
             }
           )
@@ -1227,6 +1228,144 @@ var PropertyNewsUpdates = React5.forwardRef(
   }
 );
 PropertyNewsUpdates.displayName = "PropertyNewsUpdates";
+var PropertyCompareBar = React5.forwardRef(
+  ({
+    className,
+    addresses,
+    selectedAddressId,
+    onSelectAddress,
+    compareLabel = "Compare",
+    onCompareClick,
+    compareIcon,
+    ...props
+  }, ref) => {
+    const normalizedAddresses = React5.useMemo(() => {
+      return addresses.map(
+        (option) => typeof option === "string" ? { id: option, label: option } : option
+      );
+    }, [addresses]);
+    const hasAddresses = normalizedAddresses.length > 0;
+    const firstAddressId = normalizedAddresses[0]?.id;
+    const isControlled = selectedAddressId !== void 0;
+    const [internalSelectedId, setInternalSelectedId] = React5.useState(
+      () => isControlled ? void 0 : firstAddressId
+    );
+    const resolvedSelectedId = isControlled ? selectedAddressId : internalSelectedId;
+    React5.useEffect(() => {
+      if (!isControlled) {
+        setInternalSelectedId((current) => {
+          if (current != null && normalizedAddresses.some((option) => option.id === current)) {
+            return current;
+          }
+          return firstAddressId;
+        });
+      }
+    }, [firstAddressId, isControlled, normalizedAddresses]);
+    const selectedOption = normalizedAddresses.find((option) => option.id === resolvedSelectedId) ?? normalizedAddresses[0];
+    const [isDropdownOpen, setIsDropdownOpen] = React5.useState(false);
+    const dropdownRef = React5.useRef(null);
+    React5.useEffect(() => {
+      if (!isDropdownOpen) return;
+      const handleClick = (event) => {
+        if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+          setIsDropdownOpen(false);
+        }
+      };
+      const handleKey = (event) => {
+        if (event.key === "Escape") {
+          setIsDropdownOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClick);
+      document.addEventListener("keydown", handleKey);
+      return () => {
+        document.removeEventListener("mousedown", handleClick);
+        document.removeEventListener("keydown", handleKey);
+      };
+    }, [isDropdownOpen]);
+    const defaultCompareIcon = /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4 4h7v7H4V4zm0 9h7v7H4v-7zm9-9h7v7h-7V4zm0 9h7v7h-7v-7z" }) });
+    const handleAddressSelect = (addressId) => {
+      if (!isControlled) {
+        setInternalSelectedId(addressId);
+      }
+      onSelectAddress?.(addressId);
+      setIsDropdownOpen(false);
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex w-full flex-col gap-3 border border-white/10 px-4 py-3 text-white shadow-[0_18px_40px_rgba(0,0,0,0.55)] md:flex-row md:items-center md:justify-between md:gap-4",
+          className
+        ),
+        style: { borderRadius: "16px" },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative w-auto", ref: dropdownRef, children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                disabled: !hasAddresses,
+                onClick: () => setIsDropdownOpen((prev) => !prev),
+                className: cn(
+                  "flex h-[42px] w-auto items-center gap-2 rounded-[12px] border border-transparent bg-transparent px-0 text-left text-[15px] font-semibold text-white transition hover:text-white/80 focus-visible:outline-none",
+                  !hasAddresses && "text-white/40"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedOption ? selectedOption.label : hasAddresses ? "Select address" : "No addresses available" }),
+                  /* @__PURE__ */ jsx("span", { className: "ml-3 flex items-center text-white/60 transition-transform", "aria-hidden": true, children: /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      width: "16",
+                      height: "16",
+                      viewBox: "0 0 24 24",
+                      fill: "currentColor",
+                      className: cn("transition-transform", isDropdownOpen && "rotate-180"),
+                      children: /* @__PURE__ */ jsx("path", { d: "M7 10l5 5 5-5H7z" })
+                    }
+                  ) })
+                ]
+              }
+            ),
+            isDropdownOpen && hasAddresses ? /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-[calc(100%+8px)] z-20 w-full rounded-[12px] border border-white/10 py-1 shadow-[0_25px_55px_rgba(0,0,0,0.6)] bg-black", children: normalizedAddresses.map((option) => {
+              const active = option.id === resolvedSelectedId;
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: cn(
+                    "flex w-full items-center px-4 py-2 text-left text-[14px] text-white/80 transition hover:bg-white/5 hover:text-white",
+                    active && "text-white"
+                  ),
+                  onClick: () => handleAddressSelect(option.id),
+                  children: option.label
+                },
+                option.id
+              );
+            }) }) : null
+          ] }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "accentOutline",
+              size: "sm",
+              className: "flex items-center justify-center gap-2 rounded-[10px] border-[var(--color-accent,#e6c87e)] bg-transparent px-4 py-2 text-[14px] font-semibold text-[var(--color-accent,#e6c87e)] transition hover:bg-[rgba(230,200,126,0.08)] md:ml-auto",
+              onClick: onCompareClick,
+              disabled: !hasAddresses,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "text-base", children: compareIcon ?? defaultCompareIcon }),
+                compareLabel
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+PropertyCompareBar.displayName = "PropertyCompareBar";
 var clampPct = (pct) => Math.min(100, Math.max(0, pct));
 var EditIcon = ({ className }) => /* @__PURE__ */ jsxs(
   "svg",
@@ -1821,6 +1960,6 @@ var PropertySubheader = React5.forwardRef(
 );
 PropertySubheader.displayName = "PropertySubheader";
 
-export { Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, HousePositionSlider, Orderbook, PortfolioSummary, PriceChart, PropertyHeroHeader, PropertyNewsUpdates, PropertySubheader, PropertyTour, YourOrders, badgeVariants, buttonVariants };
+export { Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, HousePositionSlider, Orderbook, PortfolioSummary, PriceChart, PropertyCompareBar, PropertyHeroHeader, PropertyNewsUpdates, PropertySubheader, PropertyTour, YourOrders, badgeVariants, buttonVariants };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map