@loafmarkets/ui 0.0.5 → 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]"
               )
             }
           )
@@ -1295,12 +1296,13 @@ var PropertyCompareBar = React5.forwardRef(
       {
         ref,
         className: cn(
-          "flex w-full flex-col gap-3 rounded-[14px] border border-[#1a1f2b] bg-[#0f131c] px-4 py-3 text-white shadow-[0_18px_45px_rgba(0,0,0,0.55)] md:flex-row md:items-center md:gap-4",
+          "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 flex-1", ref: dropdownRef, children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative w-auto", ref: dropdownRef, children: [
             /* @__PURE__ */ jsxs(
               "button",
               {
@@ -1308,7 +1310,7 @@ var PropertyCompareBar = React5.forwardRef(
                 disabled: !hasAddresses,
                 onClick: () => setIsDropdownOpen((prev) => !prev),
                 className: cn(
-                  "flex h-[42px] w-full items-center justify-between rounded-[10px] border border-[#202632] bg-[#181c27] px-4 text-left text-[15px] font-semibold text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.05)] transition hover:bg-[#1d222e] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent,#e6c87e)]",
+                  "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: [
@@ -1327,7 +1329,7 @@ var PropertyCompareBar = React5.forwardRef(
                 ]
               }
             ),
-            isDropdownOpen && hasAddresses ? /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-[calc(100%+8px)] z-20 w-full rounded-[12px] border border-[#1f2431] bg-[#161925] py-1 shadow-[0_25px_55px_rgba(0,0,0,0.65)] backdrop-blur-sm", children: normalizedAddresses.map((option) => {
+            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",
@@ -1349,7 +1351,7 @@ var PropertyCompareBar = React5.forwardRef(
             {
               variant: "accentOutline",
               size: "sm",
-              className: "flex w-full 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)] shadow-[0_10px_25px_rgba(0,0,0,0.45)] transition hover:bg-[rgba(230,200,126,0.08)] md:w-max",
+              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: [