kaleido-ui 0.1.72 → 0.1.74

package/dist/web/index.cjs

@@ -1156,7 +1156,8 @@ function dispatch(action) {
   memoryState = reducer(memoryState, action);
   listeners.forEach((listener) => listener(memoryState));
 }
-function toast({ duration = 4e3, ...props }) {
+function toast({ duration, ...props }) {
+  const effectiveDuration = duration ?? (props.variant === "destructive" ? 12e3 : 4e3);
   const id = genId();
   const update = (props2) => dispatch({ type: "UPDATE_TOAST", toast: { ...props2, id } });
   const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
@@ -1166,14 +1167,14 @@ function toast({ duration = 4e3, ...props }) {
       ...props,
       id,
       open: true,
-      duration,
+      duration: effectiveDuration,
       onOpenChange: (open) => {
         if (!open) dismiss();
       }
     }
   });
-  if (duration > 0) {
-    setTimeout(() => dismiss(), duration);
+  if (effectiveDuration > 0) {
+    setTimeout(() => dismiss(), effectiveDuration);
   }
   return { id, dismiss, update };
 }
@@ -1195,8 +1196,16 @@ function useToast() {
 
 // src/web/primitives/toaster.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
+function toPlainText(node) {
+  if (node == null || node === false) return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(toPlainText).join("");
+  const kids = node?.props?.children;
+  return kids != null ? toPlainText(kids) : "";
+}
 function ToastWithProgress({ id, title, description, action, duration = 4e3, variant, ...props }) {
   const [progress, setProgress] = (0, import_react.useState)(100);
+  const [copied, setCopied] = (0, import_react.useState)(false);
   (0, import_react.useEffect)(() => {
     const interval = 50;
     const decrement = interval / duration * 100;
@@ -1214,16 +1223,36 @@ function ToastWithProgress({ id, title, description, action, duration = 4e3, var
     }
     return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "check_circle", size: "md", className: "text-primary" });
   };
+  const showCopy = variant === "destructive";
+  const copyText = () => {
+    const text = [toPlainText(title), toPlainText(description)].filter(Boolean).join("\n");
+    if (!text) return;
+    void Promise.resolve(navigator?.clipboard?.writeText?.(text)).catch(() => {
+    });
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Toast, { ...props, variant, children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-start gap-3 flex-1", children: [
       getIcon(),
       /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "grid gap-1 flex-1", children: [
         title && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ToastTitle, { children: title }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ToastDescription, { children: description })
+        description && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ToastDescription, { className: "select-text", children: description })
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2 shrink-0", children: [
       action,
+      showCopy && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: copyText,
+          "aria-label": copied ? "Copied" : "Copy error",
+          title: copied ? "Copied" : "Copy error",
+          className: "rounded-md p-1 text-foreground/60 hover:text-foreground hover:bg-white/10 transition-colors",
+          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: copied ? "check" : "content_copy", size: "sm" })
+        }
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ToastClose, {})
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "absolute bottom-0 left-0 right-0 h-1 bg-white/10 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
@@ -2245,7 +2274,7 @@ var LOGO_PATHS = /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runti
   ),
   /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { d: "M274.479 0.104797H411.786L274.533 137.411H137.226L274.479 0.104797Z", fill: "#17B581" })
 ] });
-function QrCode({ value, size = 160, className }) {
+function QrCode({ value, size = 160, className, tone = "onLight" }) {
   const svgContent = (0, import_react6.useMemo)(() => {
     if (!value) return null;
     const matrix = (0, import_qr.default)(value, "raw", { ecc: "medium", border: 0 });
@@ -2253,8 +2282,8 @@ function QrCode({ value, size = 160, className }) {
     const moduleSize = 10;
     const quietZone = moduleSize * 2;
     const svgSize = n * moduleSize + quietZone * 2;
-    const fg = "#040404";
-    const bg = "#ffffff";
+    const fg = tone === "onDark" ? "#ffffff" : "#040404";
+    const bg = tone === "onDark" ? "transparent" : "#ffffff";
     const logoModules = Math.ceil(n * 0.2);
     const logoZoneSize = logoModules % 2 === 0 ? logoModules + 1 : logoModules;
     const elements = [];
@@ -2308,7 +2337,7 @@ function QrCode({ value, size = 160, className }) {
         children: elements
       }
     );
-  }, [value]);
+  }, [value, tone]);
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className, style: { width: size, height: size }, children: svgContent });
 }
 
@@ -7179,7 +7208,7 @@ var NETWORK_CONFIG = {
     border: "border-network-bitcoin/40",
     qrBorder: "border-network-bitcoin/30",
     qrGlow: qrGlowStyle(colors.network.bitcoin),
-    icon: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "material-symbols-outlined text-icon-xs leading-none", children: "link" })
+    icon: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "material-symbols-outlined text-icon-xs leading-none", children: "currency_bitcoin" })
   },
   lightning: {
     label: "Lightning",
@@ -7591,13 +7620,13 @@ function DepositNetworkDefaultModal({
 }
 
 // src/web/components/btc-unified-receive.tsx
+var import_react16 = require("react");
 var import_jsx_runtime76 = require("react/jsx-runtime");
 function formatSatsForRow(value) {
   if (!value || value <= 0 || !Number.isFinite(value)) return null;
   return `${value.toLocaleString("en-US")} sats`;
 }
 function BtcUnifiedReceive({
-  btcSelectedAccount,
   accountReceiveResult,
   invoiceStatus,
   isInvoicePending,
@@ -7612,66 +7641,56 @@ function BtcUnifiedReceive({
   setAmount,
   setInvoiceStatus,
   setAccountReceiveResult,
-  handleDone,
-  showRegenerate = true
+  showRegenerate = true,
+  description,
+  onDescriptionChange
 }) {
-  const accountNetwork = btcSelectedAccount === "SPARK" ? "spark" : btcSelectedAccount === "ARKADE" ? "arkade" : "onchain";
-  const qrNetwork = NETWORK_CONFIG[accountNetwork];
+  const [showEdit, setShowEdit] = (0, import_react16.useState)(false);
+  const isQrCopied = copied === accountReceiveResult.qrValue;
+  const handleNewAddress = () => {
+    setAddress("");
+    setAmount("");
+    setInvoiceStatus(null);
+    setAccountReceiveResult(null);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "space-y-3 animate-in fade-in zoom-in-95 duration-300", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex flex-col gap-1.5 rounded-xl border border-white/8 bg-white/3 p-2.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "flex items-center justify-between px-1", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("label", { className: "text-xxs font-bold uppercase tracking-widest text-white/40", children: "Amount (optional)" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-        "input",
-        {
-          type: "text",
-          value: amount,
-          onChange: handleAmountChange,
-          placeholder: "Any amount",
-          className: "w-full rounded-lg border bg-white/5 px-3 py-1.5 font-mono text-xs font-bold text-white transition-all placeholder:text-white/25 focus:border-primary/40 focus:outline-none",
-          inputMode: "decimal"
-        }
-      ),
-      amount && loading && /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("p", { className: "flex items-center gap-1 text-xxs text-warning/70", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "material-symbols-outlined animate-spin text-icon-xxs", children: "progress_activity" }),
-        "Updating invoice..."
-      ] })
-    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex flex-col items-center gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
-        "div",
-        {
-          className: cn(
-            "relative flex flex-col items-center rounded-2xl border-2 bg-white p-2 transition-all",
-            qrNetwork.qrBorder
-          ),
-          style: qrNetwork.qrGlow,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(QrCode, { value: accountReceiveResult.qrValue, size: 200 }),
-            isInvoicePaid && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(PaidOverlay, {})
-          ]
-        }
-      ),
-      (() => {
-        const isQrCopied = copied === accountReceiveResult.qrValue;
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
-          "button",
+      /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "relative flex flex-col items-center p-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(QrCode, { value: accountReceiveResult.qrValue, size: 200, tone: "onDark" }),
+        isInvoicePaid && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(PaidOverlay, {})
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex items-center justify-center gap-2.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+          Button,
           {
-            type: "button",
-            className: cn(
-              "flex items-center gap-1 rounded-full border px-2.5 py-1 text-xxs font-bold uppercase tracking-widest transition-all",
-              isQrCopied ? "border-primary/30 bg-primary/10 text-primary" : "border-border bg-white/5 text-muted-foreground hover:border-white/20 hover:bg-accent hover:text-white"
-            ),
-            onClick: (event) => {
-              event.stopPropagation();
-              void copyToClipboard(accountReceiveResult.qrValue);
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Icon, { name: isQrCopied ? "check" : "content_copy", size: "xs" }),
-              isQrCopied ? "Copied" : `Copy ${accountReceiveResult.qrLabel}`
-            ]
+            variant: "surface",
+            size: "icon-xl",
+            "aria-label": `Copy ${accountReceiveResult.qrLabel}`,
+            onClick: () => void copyToClipboard(accountReceiveResult.qrValue),
+            children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Icon, { name: isQrCopied ? "check" : "content_copy", size: "lg" })
           }
-        );
-      })()
+        ),
+        showRegenerate && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+          Button,
+          {
+            variant: "surface",
+            size: "icon-xl",
+            "aria-label": "New address",
+            onClick: handleNewAddress,
+            children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Icon, { name: "refresh", size: "lg" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+          Button,
+          {
+            variant: "surface",
+            size: "icon-xl",
+            "aria-label": "Edit amount and description",
+            onClick: () => setShowEdit(true),
+            children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Icon, { name: "edit", size: "lg" })
+          }
+        )
+      ] })
     ] }),
     invoiceStatus && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
       InvoiceStatusBanner,
@@ -7690,9 +7709,8 @@ function BtcUnifiedReceive({
           "div",
           {
             className: cn(
-              "group flex cursor-pointer items-center gap-2 rounded-xl border bg-white/3 px-2.5 py-1.5",
-              "transition-all hover:bg-white/6 active:scale-[0.98]",
-              network.border
+              "group flex cursor-pointer items-center gap-2 rounded-xl bg-white/3 px-2.5 py-1.5",
+              "transition-all hover:bg-white/6 active:scale-[0.98]"
             ),
             style: { borderLeftWidth: 3, borderLeftColor: network.color },
             onClick: () => void copyToClipboard(address.value),
@@ -7716,36 +7734,48 @@ function BtcUnifiedReceive({
       })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-      NetworkInfoDisclosure,
+      BottomSheet,
       {
-        networks: Array.from(
-          new Set(accountReceiveResult.addresses.map((address) => address.network))
-        )
+        open: showEdit,
+        title: "Edit request",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Icon, { name: "edit", size: "md" }),
+        onClose: () => setShowEdit(false),
+        children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "space-y-1.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("label", { className: "text-xxs font-bold uppercase tracking-widest text-white/40", children: "Amount (optional)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+              "input",
+              {
+                type: "text",
+                value: amount,
+                onChange: handleAmountChange,
+                placeholder: "Any amount",
+                className: "w-full rounded-xl bg-white/5 px-3 py-2.5 font-mono text-sm font-bold text-white shadow-inner transition-all placeholder:text-white/25 focus:outline focus:outline-2 focus:outline-primary/40",
+                inputMode: "decimal"
+              }
+            ),
+            amount && loading && /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("p", { className: "flex items-center gap-1 text-xxs text-warning/70", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "material-symbols-outlined animate-spin text-icon-xxs", children: "progress_activity" }),
+              "Updating invoice..."
+            ] })
+          ] }),
+          onDescriptionChange && /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "space-y-1.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("label", { className: "text-xxs font-bold uppercase tracking-widest text-white/40", children: "Description (optional)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+              "input",
+              {
+                type: "text",
+                value: description ?? "",
+                onChange: (event) => onDescriptionChange(event.target.value),
+                placeholder: "What's this for?",
+                className: "w-full rounded-xl bg-white/5 px-3 py-2.5 text-sm text-white shadow-inner transition-all placeholder:text-white/25 focus:outline focus:outline-2 focus:outline-primary/40"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Button, { variant: "cta", className: "w-full", onClick: () => setShowEdit(false), children: "Done" })
+        ] })
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex gap-2.5 pt-1", children: [
-      showRegenerate && /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
-        "button",
-        {
-          type: "button",
-          onClick: () => {
-            setAddress("");
-            setAmount("");
-            setInvoiceStatus(null);
-            setAccountReceiveResult(null);
-          },
-          className: "flex flex-1 items-center justify-center gap-1.5 rounded-xl border py-3 text-xs font-bold text-muted-foreground transition-all hover:border-border hover:bg-accent hover:text-white active:scale-[0.98]",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "material-symbols-outlined text-icon-sm", children: "refresh" }),
-            "New Address"
-          ]
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(Button, { variant: "cta", onClick: handleDone, className: showRegenerate ? void 0 : "flex-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "material-symbols-outlined text-icon-sm", children: "check" }),
-        "Done"
-      ] })
-    ] })
+    )
   ] });
 }
 
@@ -8167,7 +8197,7 @@ function DepositPreGeneration({
 }
 
 // src/web/components/deposit-asset-selection.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime79 = require("react/jsx-runtime");
 var ADD_ASSET_SUBTITLE = {
   RGB: "RGB asset on Bitcoin",
@@ -8210,9 +8240,9 @@ function DepositAssetSelection({
   const ownedAssetsCount = ownedAssets.length;
   const noResults = filteredAssets.length === 0 && !!searchQuery;
   const isSearching = !!searchQuery;
-  const [assetsExpanded, setAssetsExpanded] = (0, import_react16.useState)(false);
-  const [showAddAssetModal, setShowAddAssetModal] = (0, import_react16.useState)(false);
-  (0, import_react16.useEffect)(() => {
+  const [assetsExpanded, setAssetsExpanded] = (0, import_react17.useState)(false);
+  const [showAddAssetModal, setShowAddAssetModal] = (0, import_react17.useState)(false);
+  (0, import_react17.useEffect)(() => {
     if (isSearching) setAssetsExpanded(true);
   }, [isSearching]);
   const showOwnedAssets = isSearching ? true : assetsExpanded;

package/dist/web/index.d.cts

@@ -334,8 +334,14 @@ interface QrCodeProps {
     value: string;
     size?: number;
     className?: string;
+    /**
+     * 'onLight' (default) renders dark modules on a white card — use inside a
+     * white container. 'onDark' renders white modules on a transparent
+     * background so the QR sits directly on the app background.
+     */
+    tone?: 'onLight' | 'onDark';
 }
-declare function QrCode({ value, size, className }: QrCodeProps): react_jsx_runtime.JSX.Element;
+declare function QrCode({ value, size, className, tone }: QrCodeProps): react_jsx_runtime.JSX.Element;
 
 interface BottomNavItem<TValue extends string = string> {
     id: TValue;
@@ -1468,8 +1474,12 @@ interface BtcUnifiedReceiveProps {
      * button leads to a half-initialised state).
      */
     showRegenerate?: boolean;
+    /** Optional request description/memo, edited alongside the amount in the
+     * Edit modal. When omitted the description field is hidden. */
+    description?: string;
+    onDescriptionChange?: (value: string) => void;
 }
-declare function BtcUnifiedReceive({ btcSelectedAccount, accountReceiveResult, invoiceStatus, isInvoicePending, isInvoicePaid, isInvoiceFailedOrExpired, amount, handleAmountChange, loading, copied, copyToClipboard, setAddress, setAmount, setInvoiceStatus, setAccountReceiveResult, handleDone, showRegenerate, }: BtcUnifiedReceiveProps): react_jsx_runtime.JSX.Element;
+declare function BtcUnifiedReceive({ accountReceiveResult, invoiceStatus, isInvoicePending, isInvoicePaid, isInvoiceFailedOrExpired, amount, handleAmountChange, loading, copied, copyToClipboard, setAddress, setAmount, setInvoiceStatus, setAccountReceiveResult, showRegenerate, description, onDescriptionChange, }: BtcUnifiedReceiveProps): react_jsx_runtime.JSX.Element;
 
 interface DepositGeneratedAsset {
     ticker?: string;

package/dist/web/index.d.ts

@@ -334,8 +334,14 @@ interface QrCodeProps {
     value: string;
     size?: number;
     className?: string;
+    /**
+     * 'onLight' (default) renders dark modules on a white card — use inside a
+     * white container. 'onDark' renders white modules on a transparent
+     * background so the QR sits directly on the app background.
+     */
+    tone?: 'onLight' | 'onDark';
 }
-declare function QrCode({ value, size, className }: QrCodeProps): react_jsx_runtime.JSX.Element;
+declare function QrCode({ value, size, className, tone }: QrCodeProps): react_jsx_runtime.JSX.Element;
 
 interface BottomNavItem<TValue extends string = string> {
     id: TValue;
@@ -1468,8 +1474,12 @@ interface BtcUnifiedReceiveProps {
      * button leads to a half-initialised state).
      */
     showRegenerate?: boolean;
+    /** Optional request description/memo, edited alongside the amount in the
+     * Edit modal. When omitted the description field is hidden. */
+    description?: string;
+    onDescriptionChange?: (value: string) => void;
 }
-declare function BtcUnifiedReceive({ btcSelectedAccount, accountReceiveResult, invoiceStatus, isInvoicePending, isInvoicePaid, isInvoiceFailedOrExpired, amount, handleAmountChange, loading, copied, copyToClipboard, setAddress, setAmount, setInvoiceStatus, setAccountReceiveResult, handleDone, showRegenerate, }: BtcUnifiedReceiveProps): react_jsx_runtime.JSX.Element;
+declare function BtcUnifiedReceive({ accountReceiveResult, invoiceStatus, isInvoicePending, isInvoicePaid, isInvoiceFailedOrExpired, amount, handleAmountChange, loading, copied, copyToClipboard, setAddress, setAmount, setInvoiceStatus, setAccountReceiveResult, showRegenerate, description, onDescriptionChange, }: BtcUnifiedReceiveProps): react_jsx_runtime.JSX.Element;
 
 interface DepositGeneratedAsset {
     ticker?: string;

package/dist/web/index.js

@@ -972,7 +972,8 @@ function dispatch(action) {
   memoryState = reducer(memoryState, action);
   listeners.forEach((listener) => listener(memoryState));
 }
-function toast({ duration = 4e3, ...props }) {
+function toast({ duration, ...props }) {
+  const effectiveDuration = duration ?? (props.variant === "destructive" ? 12e3 : 4e3);
   const id = genId();
   const update = (props2) => dispatch({ type: "UPDATE_TOAST", toast: { ...props2, id } });
   const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
@@ -982,14 +983,14 @@ function toast({ duration = 4e3, ...props }) {
       ...props,
       id,
       open: true,
-      duration,
+      duration: effectiveDuration,
       onOpenChange: (open) => {
         if (!open) dismiss();
       }
     }
   });
-  if (duration > 0) {
-    setTimeout(() => dismiss(), duration);
+  if (effectiveDuration > 0) {
+    setTimeout(() => dismiss(), effectiveDuration);
   }
   return { id, dismiss, update };
 }
@@ -1011,8 +1012,16 @@ function useToast() {
 
 // src/web/primitives/toaster.tsx
 import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+function toPlainText(node) {
+  if (node == null || node === false) return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(toPlainText).join("");
+  const kids = node?.props?.children;
+  return kids != null ? toPlainText(kids) : "";
+}
 function ToastWithProgress({ id, title, description, action, duration = 4e3, variant, ...props }) {
   const [progress, setProgress] = useState2(100);
+  const [copied, setCopied] = useState2(false);
   useEffect2(() => {
     const interval = 50;
     const decrement = interval / duration * 100;
@@ -1030,16 +1039,36 @@ function ToastWithProgress({ id, title, description, action, duration = 4e3, var
     }
     return /* @__PURE__ */ jsx14(Icon, { name: "check_circle", size: "md", className: "text-primary" });
   };
+  const showCopy = variant === "destructive";
+  const copyText = () => {
+    const text = [toPlainText(title), toPlainText(description)].filter(Boolean).join("\n");
+    if (!text) return;
+    void Promise.resolve(navigator?.clipboard?.writeText?.(text)).catch(() => {
+    });
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
   return /* @__PURE__ */ jsxs5(Toast, { ...props, variant, children: [
     /* @__PURE__ */ jsxs5("div", { className: "flex items-start gap-3 flex-1", children: [
       getIcon(),
       /* @__PURE__ */ jsxs5("div", { className: "grid gap-1 flex-1", children: [
         title && /* @__PURE__ */ jsx14(ToastTitle, { children: title }),
-        description && /* @__PURE__ */ jsx14(ToastDescription, { children: description })
+        description && /* @__PURE__ */ jsx14(ToastDescription, { className: "select-text", children: description })
       ] })
     ] }),
     /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 shrink-0", children: [
       action,
+      showCopy && /* @__PURE__ */ jsx14(
+        "button",
+        {
+          type: "button",
+          onClick: copyText,
+          "aria-label": copied ? "Copied" : "Copy error",
+          title: copied ? "Copied" : "Copy error",
+          className: "rounded-md p-1 text-foreground/60 hover:text-foreground hover:bg-white/10 transition-colors",
+          children: /* @__PURE__ */ jsx14(Icon, { name: copied ? "check" : "content_copy", size: "sm" })
+        }
+      ),
       /* @__PURE__ */ jsx14(ToastClose, {})
     ] }),
     /* @__PURE__ */ jsx14("div", { className: "absolute bottom-0 left-0 right-0 h-1 bg-white/10 overflow-hidden", children: /* @__PURE__ */ jsx14(
@@ -2067,7 +2096,7 @@ var LOGO_PATHS = /* @__PURE__ */ jsxs13(Fragment, { children: [
   ),
   /* @__PURE__ */ jsx26("path", { d: "M274.479 0.104797H411.786L274.533 137.411H137.226L274.479 0.104797Z", fill: "#17B581" })
 ] });
-function QrCode({ value, size = 160, className }) {
+function QrCode({ value, size = 160, className, tone = "onLight" }) {
   const svgContent = useMemo(() => {
     if (!value) return null;
     const matrix = encodeQR(value, "raw", { ecc: "medium", border: 0 });
@@ -2075,8 +2104,8 @@ function QrCode({ value, size = 160, className }) {
     const moduleSize = 10;
     const quietZone = moduleSize * 2;
     const svgSize = n * moduleSize + quietZone * 2;
-    const fg = "#040404";
-    const bg = "#ffffff";
+    const fg = tone === "onDark" ? "#ffffff" : "#040404";
+    const bg = tone === "onDark" ? "transparent" : "#ffffff";
     const logoModules = Math.ceil(n * 0.2);
     const logoZoneSize = logoModules % 2 === 0 ? logoModules + 1 : logoModules;
     const elements = [];
@@ -2130,7 +2159,7 @@ function QrCode({ value, size = 160, className }) {
         children: elements
       }
     );
-  }, [value]);
+  }, [value, tone]);
   return /* @__PURE__ */ jsx26("div", { className, style: { width: size, height: size }, children: svgContent });
 }
 
@@ -7001,7 +7030,7 @@ var NETWORK_CONFIG = {
     border: "border-network-bitcoin/40",
     qrBorder: "border-network-bitcoin/30",
     qrGlow: qrGlowStyle(colors.network.bitcoin),
-    icon: /* @__PURE__ */ jsx73("span", { className: "material-symbols-outlined text-icon-xs leading-none", children: "link" })
+    icon: /* @__PURE__ */ jsx73("span", { className: "material-symbols-outlined text-icon-xs leading-none", children: "currency_bitcoin" })
   },
   lightning: {
     label: "Lightning",
@@ -7413,13 +7442,13 @@ function DepositNetworkDefaultModal({
 }
 
 // src/web/components/btc-unified-receive.tsx
+import { useState as useState15 } from "react";
 import { jsx as jsx76, jsxs as jsxs62 } from "react/jsx-runtime";
 function formatSatsForRow(value) {
   if (!value || value <= 0 || !Number.isFinite(value)) return null;
   return `${value.toLocaleString("en-US")} sats`;
 }
 function BtcUnifiedReceive({
-  btcSelectedAccount,
   accountReceiveResult,
   invoiceStatus,
   isInvoicePending,
@@ -7434,66 +7463,56 @@ function BtcUnifiedReceive({
   setAmount,
   setInvoiceStatus,
   setAccountReceiveResult,
-  handleDone,
-  showRegenerate = true
+  showRegenerate = true,
+  description,
+  onDescriptionChange
 }) {
-  const accountNetwork = btcSelectedAccount === "SPARK" ? "spark" : btcSelectedAccount === "ARKADE" ? "arkade" : "onchain";
-  const qrNetwork = NETWORK_CONFIG[accountNetwork];
+  const [showEdit, setShowEdit] = useState15(false);
+  const isQrCopied = copied === accountReceiveResult.qrValue;
+  const handleNewAddress = () => {
+    setAddress("");
+    setAmount("");
+    setInvoiceStatus(null);
+    setAccountReceiveResult(null);
+  };
   return /* @__PURE__ */ jsxs62("div", { className: "space-y-3 animate-in fade-in zoom-in-95 duration-300", children: [
-    /* @__PURE__ */ jsxs62("div", { className: "flex flex-col gap-1.5 rounded-xl border border-white/8 bg-white/3 p-2.5", children: [
-      /* @__PURE__ */ jsx76("div", { className: "flex items-center justify-between px-1", children: /* @__PURE__ */ jsx76("label", { className: "text-xxs font-bold uppercase tracking-widest text-white/40", children: "Amount (optional)" }) }),
-      /* @__PURE__ */ jsx76(
-        "input",
-        {
-          type: "text",
-          value: amount,
-          onChange: handleAmountChange,
-          placeholder: "Any amount",
-          className: "w-full rounded-lg border bg-white/5 px-3 py-1.5 font-mono text-xs font-bold text-white transition-all placeholder:text-white/25 focus:border-primary/40 focus:outline-none",
-          inputMode: "decimal"
-        }
-      ),
-      amount && loading && /* @__PURE__ */ jsxs62("p", { className: "flex items-center gap-1 text-xxs text-warning/70", children: [
-        /* @__PURE__ */ jsx76("span", { className: "material-symbols-outlined animate-spin text-icon-xxs", children: "progress_activity" }),
-        "Updating invoice..."
-      ] })
-    ] }),
     /* @__PURE__ */ jsxs62("div", { className: "flex flex-col items-center gap-3", children: [
-      /* @__PURE__ */ jsxs62(
-        "div",
-        {
-          className: cn(
-            "relative flex flex-col items-center rounded-2xl border-2 bg-white p-2 transition-all",
-            qrNetwork.qrBorder
-          ),
-          style: qrNetwork.qrGlow,
-          children: [
-            /* @__PURE__ */ jsx76(QrCode, { value: accountReceiveResult.qrValue, size: 200 }),
-            isInvoicePaid && /* @__PURE__ */ jsx76(PaidOverlay, {})
-          ]
-        }
-      ),
-      (() => {
-        const isQrCopied = copied === accountReceiveResult.qrValue;
-        return /* @__PURE__ */ jsxs62(
-          "button",
+      /* @__PURE__ */ jsxs62("div", { className: "relative flex flex-col items-center p-2", children: [
+        /* @__PURE__ */ jsx76(QrCode, { value: accountReceiveResult.qrValue, size: 200, tone: "onDark" }),
+        isInvoicePaid && /* @__PURE__ */ jsx76(PaidOverlay, {})
+      ] }),
+      /* @__PURE__ */ jsxs62("div", { className: "flex items-center justify-center gap-2.5", children: [
+        /* @__PURE__ */ jsx76(
+          Button,
           {
-            type: "button",
-            className: cn(
-              "flex items-center gap-1 rounded-full border px-2.5 py-1 text-xxs font-bold uppercase tracking-widest transition-all",
-              isQrCopied ? "border-primary/30 bg-primary/10 text-primary" : "border-border bg-white/5 text-muted-foreground hover:border-white/20 hover:bg-accent hover:text-white"
-            ),
-            onClick: (event) => {
-              event.stopPropagation();
-              void copyToClipboard(accountReceiveResult.qrValue);
-            },
-            children: [
-              /* @__PURE__ */ jsx76(Icon, { name: isQrCopied ? "check" : "content_copy", size: "xs" }),
-              isQrCopied ? "Copied" : `Copy ${accountReceiveResult.qrLabel}`
-            ]
+            variant: "surface",
+            size: "icon-xl",
+            "aria-label": `Copy ${accountReceiveResult.qrLabel}`,
+            onClick: () => void copyToClipboard(accountReceiveResult.qrValue),
+            children: /* @__PURE__ */ jsx76(Icon, { name: isQrCopied ? "check" : "content_copy", size: "lg" })
           }
-        );
-      })()
+        ),
+        showRegenerate && /* @__PURE__ */ jsx76(
+          Button,
+          {
+            variant: "surface",
+            size: "icon-xl",
+            "aria-label": "New address",
+            onClick: handleNewAddress,
+            children: /* @__PURE__ */ jsx76(Icon, { name: "refresh", size: "lg" })
+          }
+        ),
+        /* @__PURE__ */ jsx76(
+          Button,
+          {
+            variant: "surface",
+            size: "icon-xl",
+            "aria-label": "Edit amount and description",
+            onClick: () => setShowEdit(true),
+            children: /* @__PURE__ */ jsx76(Icon, { name: "edit", size: "lg" })
+          }
+        )
+      ] })
     ] }),
     invoiceStatus && /* @__PURE__ */ jsx76(
       InvoiceStatusBanner,
@@ -7512,9 +7531,8 @@ function BtcUnifiedReceive({
           "div",
           {
             className: cn(
-              "group flex cursor-pointer items-center gap-2 rounded-xl border bg-white/3 px-2.5 py-1.5",
-              "transition-all hover:bg-white/6 active:scale-[0.98]",
-              network.border
+              "group flex cursor-pointer items-center gap-2 rounded-xl bg-white/3 px-2.5 py-1.5",
+              "transition-all hover:bg-white/6 active:scale-[0.98]"
             ),
             style: { borderLeftWidth: 3, borderLeftColor: network.color },
             onClick: () => void copyToClipboard(address.value),
@@ -7538,36 +7556,48 @@ function BtcUnifiedReceive({
       })
     ] }),
     /* @__PURE__ */ jsx76(
-      NetworkInfoDisclosure,
+      BottomSheet,
       {
-        networks: Array.from(
-          new Set(accountReceiveResult.addresses.map((address) => address.network))
-        )
+        open: showEdit,
+        title: "Edit request",
+        icon: /* @__PURE__ */ jsx76(Icon, { name: "edit", size: "md" }),
+        onClose: () => setShowEdit(false),
+        children: /* @__PURE__ */ jsxs62("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs62("div", { className: "space-y-1.5", children: [
+            /* @__PURE__ */ jsx76("label", { className: "text-xxs font-bold uppercase tracking-widest text-white/40", children: "Amount (optional)" }),
+            /* @__PURE__ */ jsx76(
+              "input",
+              {
+                type: "text",
+                value: amount,
+                onChange: handleAmountChange,
+                placeholder: "Any amount",
+                className: "w-full rounded-xl bg-white/5 px-3 py-2.5 font-mono text-sm font-bold text-white shadow-inner transition-all placeholder:text-white/25 focus:outline focus:outline-2 focus:outline-primary/40",
+                inputMode: "decimal"
+              }
+            ),
+            amount && loading && /* @__PURE__ */ jsxs62("p", { className: "flex items-center gap-1 text-xxs text-warning/70", children: [
+              /* @__PURE__ */ jsx76("span", { className: "material-symbols-outlined animate-spin text-icon-xxs", children: "progress_activity" }),
+              "Updating invoice..."
+            ] })
+          ] }),
+          onDescriptionChange && /* @__PURE__ */ jsxs62("div", { className: "space-y-1.5", children: [
+            /* @__PURE__ */ jsx76("label", { className: "text-xxs font-bold uppercase tracking-widest text-white/40", children: "Description (optional)" }),
+            /* @__PURE__ */ jsx76(
+              "input",
+              {
+                type: "text",
+                value: description ?? "",
+                onChange: (event) => onDescriptionChange(event.target.value),
+                placeholder: "What's this for?",
+                className: "w-full rounded-xl bg-white/5 px-3 py-2.5 text-sm text-white shadow-inner transition-all placeholder:text-white/25 focus:outline focus:outline-2 focus:outline-primary/40"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx76(Button, { variant: "cta", className: "w-full", onClick: () => setShowEdit(false), children: "Done" })
+        ] })
       }
-    ),
-    /* @__PURE__ */ jsxs62("div", { className: "flex gap-2.5 pt-1", children: [
-      showRegenerate && /* @__PURE__ */ jsxs62(
-        "button",
-        {
-          type: "button",
-          onClick: () => {
-            setAddress("");
-            setAmount("");
-            setInvoiceStatus(null);
-            setAccountReceiveResult(null);
-          },
-          className: "flex flex-1 items-center justify-center gap-1.5 rounded-xl border py-3 text-xs font-bold text-muted-foreground transition-all hover:border-border hover:bg-accent hover:text-white active:scale-[0.98]",
-          children: [
-            /* @__PURE__ */ jsx76("span", { className: "material-symbols-outlined text-icon-sm", children: "refresh" }),
-            "New Address"
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs62(Button, { variant: "cta", onClick: handleDone, className: showRegenerate ? void 0 : "flex-1", children: [
-        /* @__PURE__ */ jsx76("span", { className: "material-symbols-outlined text-icon-sm", children: "check" }),
-        "Done"
-      ] })
-    ] })
+    )
   ] });
 }
 
@@ -7989,7 +8019,7 @@ function DepositPreGeneration({
 }
 
 // src/web/components/deposit-asset-selection.tsx
-import { useEffect as useEffect10, useState as useState15 } from "react";
+import { useEffect as useEffect10, useState as useState16 } from "react";
 import { jsx as jsx79, jsxs as jsxs65 } from "react/jsx-runtime";
 var ADD_ASSET_SUBTITLE = {
   RGB: "RGB asset on Bitcoin",
@@ -8032,8 +8062,8 @@ function DepositAssetSelection({
   const ownedAssetsCount = ownedAssets.length;
   const noResults = filteredAssets.length === 0 && !!searchQuery;
   const isSearching = !!searchQuery;
-  const [assetsExpanded, setAssetsExpanded] = useState15(false);
-  const [showAddAssetModal, setShowAddAssetModal] = useState15(false);
+  const [assetsExpanded, setAssetsExpanded] = useState16(false);
+  const [showAddAssetModal, setShowAddAssetModal] = useState16(false);
   useEffect10(() => {
     if (isSearching) setAssetsExpanded(true);
   }, [isSearching]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaleido-ui",
-  "version": "0.1.72",
+  "version": "0.1.74",
   "description": "KaleidoSwap shared UI library — design tokens, web components (Tailwind + Radix), and React Native components extending WDK UI Kit",
   "license": "MIT",
   "type": "module",