kaleido-ui 0.1.0

package/dist/web/index.js

@@ -0,0 +1,1191 @@
+"use client";
+
+// src/web/utils/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/web/primitives/button.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-semibold ring-offset-background transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98]",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-glow-subtle hover:shadow-glow",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-border bg-transparent hover:bg-accent hover:text-accent-foreground hover:border-primary/30",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-white/5 hover:text-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        glow: "bg-primary text-primary-foreground shadow-glow hover:shadow-glow-strong animate-pulse-glow",
+        surface: "bg-card text-card-foreground border border-border hover:bg-accent hover:border-primary/30",
+        cta: "w-full bg-primary hover:bg-primary-dark text-primary-foreground font-bold rounded-2xl shadow-glow-accent disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none",
+        "cta-gradient": "w-full bg-gradient-to-r from-primary to-primary-dark text-primary-foreground font-extrabold rounded-2xl shadow-[0_8px_30px_rgba(43,238,121,0.35)] hover:opacity-90 hover:-translate-y-0.5 active:translate-y-0 active:opacity-100 disabled:opacity-40 disabled:shadow-none disabled:cursor-not-allowed disabled:bg-surface-highlight disabled:text-white/50",
+        "danger-subtle": "w-full bg-red-500/10 border border-red-500/20 text-red-400 font-bold rounded-xl hover:bg-red-500/20"
+      },
+      size: {
+        default: "h-11 px-5 py-2",
+        sm: "h-9 rounded-lg px-3 text-xs",
+        lg: "h-14 rounded-xl px-8 text-base font-bold",
+        xl: "h-16 rounded-2xl px-10 text-lg font-bold",
+        cta: "h-14 py-4 px-6 text-lg",
+        "cta-lg": "h-[60px] py-5 px-6 text-lg",
+        icon: "h-10 w-10 rounded-full",
+        "icon-lg": "h-12 w-12 rounded-full",
+        "icon-xl": "h-14 w-14 rounded-full"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/web/primitives/card.tsx
+import * as React2 from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Card = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref,
+      className: cn(
+        "rounded-2xl border border-border/50 bg-card text-card-foreground shadow-sm transition-colors",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Card.displayName = "Card";
+var CardHeader = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx2("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+    "h3",
+    {
+      ref,
+      className: cn("text-2xl font-semibold leading-none tracking-tight", className),
+      ...props
+    }
+  )
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx2("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props })
+);
+CardDescription.displayName = "CardDescription";
+var CardContent = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx2("div", { ref, className: cn("p-6 pt-0", className), ...props })
+);
+CardContent.displayName = "CardContent";
+var CardFooter = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx2("div", { ref, className: cn("flex items-center p-6 pt-0", className), ...props })
+);
+CardFooter.displayName = "CardFooter";
+
+// src/web/primitives/input.tsx
+import * as React3 from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Input = React3.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsx3(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-12 w-full rounded-xl border border-border bg-card px-4 py-3 text-base ring-offset-background transition-all file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:border-primary disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+// src/web/primitives/dialog.tsx
+import * as React4 from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+
+// src/web/primitives/icon.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var sizeClasses = {
+  xs: "text-[14px]",
+  sm: "text-[16px]",
+  md: "text-[20px]",
+  lg: "text-[24px]",
+  xl: "text-[32px]",
+  "2xl": "text-[48px]"
+};
+function Icon({
+  name,
+  filled = false,
+  size = "lg",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    "span",
+    {
+      className: cn(
+        "material-symbols-outlined",
+        filled && "filled",
+        sizeClasses[size],
+        className
+      ),
+      ...props,
+      children: name
+    }
+  );
+}
+var Icons = {
+  // Navigation
+  ArrowBack: (props) => /* @__PURE__ */ jsx4(Icon, { name: "arrow_back", ...props }),
+  ArrowForward: (props) => /* @__PURE__ */ jsx4(Icon, { name: "arrow_forward", ...props }),
+  Close: (props) => /* @__PURE__ */ jsx4(Icon, { name: "close", ...props }),
+  Menu: (props) => /* @__PURE__ */ jsx4(Icon, { name: "menu", ...props }),
+  // Actions
+  Send: (props) => /* @__PURE__ */ jsx4(Icon, { name: "arrow_upward", ...props }),
+  Receive: (props) => /* @__PURE__ */ jsx4(Icon, { name: "arrow_downward", ...props }),
+  Swap: (props) => /* @__PURE__ */ jsx4(Icon, { name: "swap_horiz", ...props }),
+  Copy: (props) => /* @__PURE__ */ jsx4(Icon, { name: "content_copy", ...props }),
+  Paste: (props) => /* @__PURE__ */ jsx4(Icon, { name: "content_paste", ...props }),
+  Refresh: (props) => /* @__PURE__ */ jsx4(Icon, { name: "refresh", ...props }),
+  Share: (props) => /* @__PURE__ */ jsx4(Icon, { name: "ios_share", ...props }),
+  QrCode: (props) => /* @__PURE__ */ jsx4(Icon, { name: "qr_code_2", ...props }),
+  QrScanner: (props) => /* @__PURE__ */ jsx4(Icon, { name: "qr_code_scanner", ...props }),
+  // Status
+  Check: (props) => /* @__PURE__ */ jsx4(Icon, { name: "check", ...props }),
+  CheckCircle: (props) => /* @__PURE__ */ jsx4(Icon, { name: "check_circle", ...props }),
+  Error: (props) => /* @__PURE__ */ jsx4(Icon, { name: "error", ...props }),
+  Warning: (props) => /* @__PURE__ */ jsx4(Icon, { name: "warning", ...props }),
+  Info: (props) => /* @__PURE__ */ jsx4(Icon, { name: "info", ...props }),
+  Pending: (props) => /* @__PURE__ */ jsx4(Icon, { name: "hourglass_top", ...props }),
+  // Navigation tabs
+  Wallet: (props) => /* @__PURE__ */ jsx4(Icon, { name: "account_balance_wallet", ...props }),
+  Activity: (props) => /* @__PURE__ */ jsx4(Icon, { name: "history", ...props }),
+  Settings: (props) => /* @__PURE__ */ jsx4(Icon, { name: "settings", ...props }),
+  // Networks
+  Lightning: (props) => /* @__PURE__ */ jsx4(Icon, { name: "bolt", ...props }),
+  Bitcoin: (props) => /* @__PURE__ */ jsx4(Icon, { name: "currency_bitcoin", ...props }),
+  Ark: (props) => /* @__PURE__ */ jsx4(Icon, { name: "hexagon", ...props }),
+  // Security
+  Lock: (props) => /* @__PURE__ */ jsx4(Icon, { name: "lock", ...props }),
+  Unlock: (props) => /* @__PURE__ */ jsx4(Icon, { name: "lock_open", ...props }),
+  Shield: (props) => /* @__PURE__ */ jsx4(Icon, { name: "shield", ...props }),
+  Key: (props) => /* @__PURE__ */ jsx4(Icon, { name: "key", ...props }),
+  Fingerprint: (props) => /* @__PURE__ */ jsx4(Icon, { name: "fingerprint", ...props }),
+  Visibility: (props) => /* @__PURE__ */ jsx4(Icon, { name: "visibility", ...props }),
+  VisibilityOff: (props) => /* @__PURE__ */ jsx4(Icon, { name: "visibility_off", ...props }),
+  // Misc
+  ExpandMore: (props) => /* @__PURE__ */ jsx4(Icon, { name: "expand_more", ...props }),
+  ExpandLess: (props) => /* @__PURE__ */ jsx4(Icon, { name: "expand_less", ...props }),
+  ChevronRight: (props) => /* @__PURE__ */ jsx4(Icon, { name: "chevron_right", ...props }),
+  OpenInNew: (props) => /* @__PURE__ */ jsx4(Icon, { name: "open_in_new", ...props }),
+  Search: (props) => /* @__PURE__ */ jsx4(Icon, { name: "search", ...props }),
+  Add: (props) => /* @__PURE__ */ jsx4(Icon, { name: "add", ...props }),
+  Download: (props) => /* @__PURE__ */ jsx4(Icon, { name: "download", ...props }),
+  Upload: (props) => /* @__PURE__ */ jsx4(Icon, { name: "upload", ...props }),
+  Edit: (props) => /* @__PURE__ */ jsx4(Icon, { name: "edit", ...props }),
+  Delete: (props) => /* @__PURE__ */ jsx4(Icon, { name: "delete", ...props }),
+  Timer: (props) => /* @__PURE__ */ jsx4(Icon, { name: "timer", ...props }),
+  Person: (props) => /* @__PURE__ */ jsx4(Icon, { name: "person", ...props }),
+  Hub: (props) => /* @__PURE__ */ jsx4(Icon, { name: "hub", ...props }),
+  Verified: (props) => /* @__PURE__ */ jsx4(Icon, { name: "verified", ...props }),
+  // Agent / AI
+  SmartToy: (props) => /* @__PURE__ */ jsx4(Icon, { name: "smart_toy", ...props }),
+  Psychology: (props) => /* @__PURE__ */ jsx4(Icon, { name: "psychology", ...props }),
+  Event: (props) => /* @__PURE__ */ jsx4(Icon, { name: "event", ...props }),
+  PlayArrow: (props) => /* @__PURE__ */ jsx4(Icon, { name: "play_arrow", ...props }),
+  ChatBubble: (props) => /* @__PURE__ */ jsx4(Icon, { name: "chat_bubble", ...props }),
+  Progress: (props) => /* @__PURE__ */ jsx4(Icon, { name: "progress_activity", ...props })
+};
+
+// src/web/primitives/dialog.tsx
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+var Dialog = DialogPrimitive.Root;
+var DialogTrigger = DialogPrimitive.Trigger;
+var DialogPortal = DialogPrimitive.Portal;
+var DialogClose = DialogPrimitive.Close;
+var DialogOverlay = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+var DialogContent = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+  /* @__PURE__ */ jsx5(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+          /* @__PURE__ */ jsx5(Icon, { name: "close", size: "sm" }),
+          /* @__PURE__ */ jsx5("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx5("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx5("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props });
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+var DialogDescription = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+// src/web/primitives/tabs.tsx
+import * as React5 from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Tabs = TabsPrimitive.Root;
+var TabsList = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+  TabsPrimitive.List,
+  {
+    ref,
+    className: cn(
+      "inline-flex h-12 items-center justify-center gap-2 rounded-xl bg-card p-1.5 text-muted-foreground border border-border/50",
+      className
+    ),
+    ...props
+  }
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+var TabsTrigger = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+  TabsPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-lg px-4 py-2 text-sm font-semibold ring-offset-background transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+      "hover:text-foreground hover:bg-white/5",
+      "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-glow-subtle",
+      className
+    ),
+    ...props
+  }
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+var TabsContent = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+  TabsPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "mt-4 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 animate-fade-in",
+      className
+    ),
+    ...props
+  }
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+// src/web/primitives/label.tsx
+import * as React6 from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var labelVariants = cva2(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(labelVariants(), className),
+    ...props
+  }
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+// src/web/primitives/toast.tsx
+import * as React7 from "react";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cva as cva3 } from "class-variance-authority";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var ToastProvider = ToastPrimitives.Provider;
+var ToastViewport = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+  ToastPrimitives.Viewport,
+  {
+    ref,
+    className: cn(
+      "fixed bottom-20 left-0 right-0 z-[100] flex max-h-screen w-full flex-col items-center p-4 gap-2",
+      className
+    ),
+    ...props
+  }
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+var toastVariants = cva3(
+  "group pointer-events-auto relative flex w-full max-w-md items-center justify-between space-x-3 overflow-hidden rounded-xl border backdrop-blur-xl p-4 pr-10 shadow-[0_0_30px_rgba(0,0,0,0.3)] transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-bottom-full data-[state=open]:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border-white/10 bg-surface-dark/95 text-white",
+        destructive: "border-red-500/20 bg-red-500/10 text-red-400"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var Toast = React7.forwardRef(({ className, variant, ...props }, ref) => {
+  return /* @__PURE__ */ jsx8(
+    ToastPrimitives.Root,
+    {
+      ref,
+      className: cn(toastVariants({ variant }), className),
+      ...props
+    }
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+var ToastAction = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+  ToastPrimitives.Action,
+  {
+    ref,
+    className: cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    ),
+    ...props
+  }
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+var ToastClose = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+  ToastPrimitives.Close,
+  {
+    ref,
+    className: cn(
+      "absolute right-2 top-2 rounded-full p-1 text-white/50 opacity-100 transition-all hover:text-white hover:bg-white/10 focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-primary group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:hover:bg-red-500/20 group-[.destructive]:focus:ring-red-400",
+      className
+    ),
+    "toast-close": "",
+    ...props,
+    children: /* @__PURE__ */ jsx8(Icon, { name: "close", size: "sm" })
+  }
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+var ToastTitle = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+  ToastPrimitives.Title,
+  {
+    ref,
+    className: cn("text-sm font-semibold text-white", className),
+    ...props
+  }
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+var ToastDescription = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+  ToastPrimitives.Description,
+  {
+    ref,
+    className: cn("text-xs text-white/70", className),
+    ...props
+  }
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+// src/web/primitives/toaster.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+
+// src/web/hooks/use-toast.ts
+import * as React8 from "react";
+var TOAST_LIMIT = 1;
+var TOAST_REMOVE_DELAY = 1e3;
+var count = 0;
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+var toastTimeouts = /* @__PURE__ */ new Map();
+var addToRemoveQueue = (toastId) => {
+  if (toastTimeouts.has(toastId)) return;
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({ type: "REMOVE_TOAST", toastId });
+  }, TOAST_REMOVE_DELAY);
+  toastTimeouts.set(toastId, timeout);
+};
+var reducer = (state, action) => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)
+      };
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map(
+          (t) => t.id === action.toast.id ? { ...t, ...action.toast } : t
+        )
+      };
+    case "DISMISS_TOAST": {
+      const { toastId } = action;
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((toast2) => addToRemoveQueue(toast2.id));
+      }
+      return {
+        ...state,
+        toasts: state.toasts.map(
+          (t) => t.id === toastId || toastId === void 0 ? { ...t, open: false } : t
+        )
+      };
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === void 0) return { ...state, toasts: [] };
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId)
+      };
+  }
+};
+var listeners = [];
+var memoryState = { toasts: [] };
+function dispatch(action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => listener(memoryState));
+}
+function toast({ duration = 4e3, ...props }) {
+  const id = genId();
+  const update = (props2) => dispatch({ type: "UPDATE_TOAST", toast: { ...props2, id } });
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      duration,
+      onOpenChange: (open) => {
+        if (!open) dismiss();
+      }
+    }
+  });
+  if (duration > 0) {
+    setTimeout(() => dismiss(), duration);
+  }
+  return { id, dismiss, update };
+}
+function useToast() {
+  const [state, setState] = React8.useState(memoryState);
+  React8.useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) listeners.splice(index, 1);
+    };
+  }, [state]);
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId) => dispatch({ type: "DISMISS_TOAST", toastId })
+  };
+}
+
+// src/web/primitives/toaster.tsx
+import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+function ToastWithProgress({ id, title, description, action, duration = 4e3, variant, ...props }) {
+  const [progress, setProgress] = useState2(100);
+  useEffect2(() => {
+    const interval = 50;
+    const decrement = interval / duration * 100;
+    const timer = setInterval(() => {
+      setProgress((prev) => {
+        const next = prev - decrement;
+        return next <= 0 ? 0 : next;
+      });
+    }, interval);
+    return () => clearInterval(timer);
+  }, [duration]);
+  const getIcon = () => {
+    if (variant === "destructive") {
+      return /* @__PURE__ */ jsx9(Icon, { name: "error", size: "md", className: "text-red-400" });
+    }
+    return /* @__PURE__ */ jsx9(Icon, { name: "check_circle", size: "md", className: "text-primary" });
+  };
+  return /* @__PURE__ */ jsxs2(Toast, { ...props, variant, children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-3 flex-1", children: [
+      getIcon(),
+      /* @__PURE__ */ jsxs2("div", { className: "grid gap-1 flex-1", children: [
+        title && /* @__PURE__ */ jsx9(ToastTitle, { children: title }),
+        description && /* @__PURE__ */ jsx9(ToastDescription, { children: description })
+      ] })
+    ] }),
+    action,
+    /* @__PURE__ */ jsx9(ToastClose, {}),
+    /* @__PURE__ */ jsx9("div", { className: "absolute bottom-0 left-0 right-0 h-1 bg-white/10 overflow-hidden", children: /* @__PURE__ */ jsx9(
+      "div",
+      {
+        className: `h-full transition-all ease-linear ${variant === "destructive" ? "bg-red-500" : "bg-primary"}`,
+        style: { width: `${progress}%` }
+      }
+    ) })
+  ] });
+}
+function Toaster() {
+  const { toasts } = useToast();
+  return /* @__PURE__ */ jsxs2(ToastProvider, { children: [
+    toasts.map(function({ id, title, description, action, duration, ...props }) {
+      return /* @__PURE__ */ jsx9(
+        ToastWithProgress,
+        {
+          id,
+          title,
+          description,
+          action,
+          duration,
+          ...props
+        },
+        id
+      );
+    }),
+    /* @__PURE__ */ jsx9(ToastViewport, {})
+  ] });
+}
+
+// src/web/components/status-badge.tsx
+import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+function StatusBadge({ status, className }) {
+  const config = {
+    success: {
+      color: "text-primary",
+      bg: "bg-primary/10",
+      border: "border-primary/20",
+      icon: "check_circle",
+      label: "Success"
+    },
+    completed: {
+      color: "text-primary",
+      bg: "bg-primary/10",
+      border: "border-primary/20",
+      icon: "check_circle",
+      label: "Completed"
+    },
+    pending: {
+      color: "text-yellow-500",
+      bg: "bg-yellow-500/10",
+      border: "border-yellow-500/20",
+      icon: "schedule",
+      label: "Pending"
+    },
+    failed: {
+      color: "text-red-500",
+      bg: "bg-red-500/10",
+      border: "border-red-500/20",
+      icon: "error",
+      label: "Failed"
+    },
+    error: {
+      color: "text-red-500",
+      bg: "bg-red-500/10",
+      border: "border-red-500/20",
+      icon: "error",
+      label: "Error"
+    }
+  };
+  const { color, bg, border, icon, label } = config[status];
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: cn(
+        "inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full border font-medium text-xs",
+        bg,
+        border,
+        color,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx10("span", { className: "material-symbols-outlined text-[14px]", children: icon }),
+        /* @__PURE__ */ jsx10("span", { children: label })
+      ]
+    }
+  );
+}
+
+// src/web/components/network-badge.tsx
+import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+var networkConfig = {
+  L1: {
+    color: "text-network-bitcoin",
+    bg: "bg-network-bitcoin/10 backdrop-blur-md",
+    border: "border-network-bitcoin/20",
+    label: "L1",
+    iconSuffix: "bitcoin/bitcoin-logo.svg"
+  },
+  LN: {
+    color: "text-purple-400",
+    bg: "bg-purple-500/10 backdrop-blur-md",
+    border: "border-purple-500/20",
+    label: "LN",
+    iconSuffix: "lightning/lightning.svg"
+  },
+  RGB20: {
+    color: "text-network-rgb",
+    bg: "bg-network-rgb/10 backdrop-blur-md",
+    border: "border-network-rgb/20",
+    label: "RGB",
+    iconSuffix: "rgb/rgb-logo.svg"
+  },
+  RGB21: {
+    color: "text-network-rgb",
+    bg: "bg-network-rgb/10 backdrop-blur-md",
+    border: "border-network-rgb/20",
+    label: "RGB21",
+    iconSuffix: "rgb/rgb-logo.svg"
+  },
+  "RGB-L1": {
+    color: "text-network-rgb",
+    bg: "bg-network-rgb/10 backdrop-blur-md",
+    border: "border-network-rgb/20",
+    label: "RGB L1",
+    iconSuffix: "rgb/rgb-logo.svg"
+  },
+  "RGB-LN": {
+    color: "text-network-rgb",
+    bg: "bg-network-rgb/10 backdrop-blur-md",
+    border: "border-network-rgb/20",
+    label: "RGB LN",
+    iconSuffix: "rgb/rgb-logo.svg"
+  },
+  Spark: {
+    color: "text-network-spark",
+    bg: "bg-network-spark/10 backdrop-blur-md",
+    border: "border-network-spark/20",
+    label: "Spark",
+    iconSuffix: "spark/Asterisk/Spark Asterisk White.svg"
+  },
+  Arkade: {
+    color: "text-network-arkade",
+    bg: "bg-network-arkade/10 backdrop-blur-md",
+    border: "border-network-arkade/20",
+    label: "Arkade",
+    iconSuffix: "arkade/arkade-icon.svg"
+  }
+};
+function NetworkBadge({ network, iconBasePath = "/icons", className }) {
+  const { color, bg, border, label, iconSuffix } = networkConfig[network];
+  const icon = `${iconBasePath}/${iconSuffix}`;
+  return /* @__PURE__ */ jsxs4(
+    "span",
+    {
+      className: cn(
+        "text-xxs px-2 py-0.5 rounded-full font-bold border shadow-inner flex items-center justify-center gap-1 w-max transition-all",
+        bg,
+        border,
+        color,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx11(
+          "img",
+          {
+            src: icon,
+            alt: network,
+            className: cn("size-3 object-contain", network === "Spark" && "opacity-80")
+          }
+        ),
+        label
+      ]
+    }
+  );
+}
+
+// src/web/components/asset-icon.tsx
+import { useEffect as useEffect4, useState as useState4 } from "react";
+
+// src/web/hooks/use-asset-icon.ts
+import { useState as useState3, useEffect as useEffect3 } from "react";
+var DEFAULT_ICON_CDN_BASE_URL = "https://raw.githubusercontent.com/kaleidoswap/coinmarketcap-icons-cryptos/refs/heads/main/icons/";
+var DICEBEAR_SHAPES_BASE_URL = "https://api.dicebear.com/9.x/shapes/svg";
+var TICKER_MAPPINGS = {
+  SAT: "BTC",
+  None: ""
+};
+var VALID_ICON_TICKER_REGEX = /^[A-Z0-9-]{1,12}$/;
+function getAssetIconUrl(ticker, cdnBaseUrl = DEFAULT_ICON_CDN_BASE_URL) {
+  if (!ticker || ticker.trim() === "") return "";
+  const normalized = ticker.toUpperCase().trim();
+  if (!VALID_ICON_TICKER_REGEX.test(normalized)) return "";
+  if (TICKER_MAPPINGS[normalized] !== void 0) {
+    const mapped = TICKER_MAPPINGS[normalized];
+    if (mapped === "") return "";
+    return getAssetIconUrl(mapped, cdnBaseUrl);
+  }
+  return `${cdnBaseUrl}${normalized.toLowerCase()}.png`;
+}
+function getFallbackAssetIconUrl(seed) {
+  const normalized = seed.trim();
+  if (!normalized) return "";
+  const params = new URLSearchParams({
+    seed: normalized,
+    backgroundType: "gradientLinear",
+    radius: "50"
+  });
+  return `${DICEBEAR_SHAPES_BASE_URL}?${params.toString()}`;
+}
+function useAssetIcon(ticker, cdnBaseUrl) {
+  const [url, setUrl] = useState3(() => getAssetIconUrl(ticker, cdnBaseUrl));
+  useEffect3(() => {
+    setUrl(getAssetIconUrl(ticker, cdnBaseUrl));
+  }, [ticker, cdnBaseUrl]);
+  return url;
+}
+
+// src/web/components/asset-icon.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var ASSET_COLORS = {
+  BTC: "bg-transparent",
+  ETH: "bg-[#627EEA]",
+  USDT: "bg-[#26A17B]",
+  USDC: "bg-[#2775CA]"
+};
+var LOCAL_ICONS = {
+  BTC: "/icons/bitcoin/bitcoin-logo.svg",
+  ARKADE: "/icons/arkade/arkade-icon.svg",
+  RGB: "/icons/rgb/rgb-logo.svg",
+  SPARK: "/icons/spark/Asterisk/Spark Asterisk White.svg"
+};
+function AssetIcon({ ticker, logoUri, cdnBaseUrl, size = 40, className }) {
+  const normTicker = ticker.toUpperCase();
+  const localIcon = LOCAL_ICONS[normTicker];
+  const cdnUrl = useAssetIcon(ticker, cdnBaseUrl);
+  const fallbackUrl = getFallbackAssetIconUrl(ticker);
+  const [useFallback, setUseFallback] = useState4(!logoUri && !localIcon && !cdnUrl && !!fallbackUrl);
+  const [failed, setFailed] = useState4(false);
+  useEffect4(() => {
+    setFailed(false);
+    setUseFallback(!logoUri && !localIcon && !cdnUrl && !!fallbackUrl);
+  }, [logoUri, localIcon, cdnUrl, fallbackUrl]);
+  const iconUrl = logoUri ? logoUri : localIcon ? localIcon : failed ? null : useFallback || !cdnUrl ? fallbackUrl || null : cdnUrl || fallbackUrl || null;
+  const bgColor = ASSET_COLORS[normTicker] || "bg-slate-600";
+  if (iconUrl) {
+    return /* @__PURE__ */ jsx12(
+      "div",
+      {
+        className: cn(
+          "rounded-full overflow-hidden flex items-center justify-center shadow-inner",
+          !localIcon && bgColor,
+          className
+        ),
+        style: { width: size, height: size },
+        children: /* @__PURE__ */ jsx12(
+          "img",
+          {
+            src: iconUrl,
+            alt: `${ticker} icon`,
+            width: size,
+            height: size,
+            className: "object-cover w-full h-full",
+            onError: () => {
+              if (logoUri) {
+                setFailed(false);
+                setUseFallback(!localIcon && !!fallbackUrl);
+                return;
+              }
+              if (localIcon) return;
+              if (!useFallback && fallbackUrl) {
+                setUseFallback(true);
+                return;
+              }
+              setFailed(true);
+            }
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx12(
+    "div",
+    {
+      className: cn(
+        "rounded-full flex items-center justify-center font-bold text-white shadow-inner border border-white/10",
+        bgColor,
+        className
+      ),
+      style: { width: size, height: size, fontSize: size * 0.4 },
+      children: ticker.charAt(0).toUpperCase()
+    }
+  );
+}
+
+// src/web/components/asset-card.tsx
+import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+function AssetCard({
+  ticker,
+  name,
+  displayBalance,
+  networks = [],
+  logoUri,
+  balanceVisible = true,
+  onClick,
+  className
+}) {
+  const shown = balanceVisible ? displayBalance : "\u2022\u2022\u2022\u2022\u2022\u2022";
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: cn(
+        "p-4 rounded-card bg-background-dark/40 backdrop-blur-xl border border-white/5 transition-all shadow-sm relative overflow-hidden group",
+        onClick && "cursor-pointer hover:border-primary/40 hover:shadow-glow-subtle active:scale-[0.98]",
+        className
+      ),
+      onClick,
+      children: [
+        /* @__PURE__ */ jsx13("div", { className: "absolute inset-0 bg-gradient-to-br from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" }),
+        /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between relative z-10", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx13(
+              AssetIcon,
+              {
+                ticker,
+                logoUri,
+                size: 44,
+                className: "group-hover:scale-105 transition-transform"
+              }
+            ),
+            /* @__PURE__ */ jsxs5("div", { className: "flex flex-col", children: [
+              /* @__PURE__ */ jsx13(
+                "span",
+                {
+                  className: cn(
+                    "font-bold text-base leading-tight tracking-wide text-white",
+                    onClick && "group-hover:text-primary transition-colors"
+                  ),
+                  children: name
+                }
+              ),
+              /* @__PURE__ */ jsx13("div", { className: "flex flex-wrap gap-1 mt-1", children: networks.map((network) => /* @__PURE__ */ jsx13(NetworkBadge, { network }, network)) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs5("div", { className: "text-right", children: [
+            /* @__PURE__ */ jsx13("p", { className: "font-bold text-base tracking-tight text-white group-hover:text-white/90 transition-colors", children: shown }),
+            /* @__PURE__ */ jsx13("p", { className: "text-tiny text-slate-400 font-medium tracking-wide uppercase mt-0.5", children: ticker })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/web/components/transaction-card.tsx
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+function TransactionCard({
+  direction,
+  status,
+  displayAmount,
+  unit = "sats",
+  timestamp,
+  onClick,
+  className
+}) {
+  const isInbound = direction === "inbound";
+  const formatDate = (ts) => new Date(ts * 1e3).toLocaleDateString();
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: cn(
+        "p-4 rounded-card bg-background-dark/40 backdrop-blur-xl border border-white/5 flex items-center justify-between transition-all shadow-sm relative overflow-hidden group",
+        onClick && "cursor-pointer hover:border-primary/40 hover:shadow-glow-subtle active:scale-[0.98]",
+        className
+      ),
+      onClick,
+      children: [
+        /* @__PURE__ */ jsx14("div", { className: "absolute inset-0 bg-gradient-to-br from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" }),
+        /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-3 relative z-10", children: [
+          /* @__PURE__ */ jsx14(
+            "div",
+            {
+              className: cn(
+                "size-11 rounded-full flex items-center justify-center shadow-inner group-hover:scale-105 transition-transform",
+                isInbound ? "bg-primary/20 text-primary border border-primary/20" : "bg-white/5 text-slate-300 border border-white/10"
+              ),
+              children: /* @__PURE__ */ jsx14("span", { className: "material-symbols-outlined text-[20px]", children: isInbound ? "arrow_downward" : "arrow_outward" })
+            }
+          ),
+          /* @__PURE__ */ jsxs6("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx14(
+              "span",
+              {
+                className: cn(
+                  "font-bold text-sm text-white tracking-wide",
+                  onClick && "group-hover:text-primary transition-colors"
+                ),
+                children: isInbound ? "Received" : "Sent"
+              }
+            ),
+            /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2 mt-1", children: [
+              /* @__PURE__ */ jsx14(StatusBadge, { status, className: "text-xxs px-1.5 py-0.5" }),
+              /* @__PURE__ */ jsx14("span", { className: "text-tiny text-slate-400 font-medium tracking-wide", children: formatDate(timestamp) })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs6("div", { className: "text-right relative z-10", children: [
+          /* @__PURE__ */ jsxs6(
+            "p",
+            {
+              className: cn(
+                "font-bold text-base tracking-tight group-hover:opacity-90 transition-opacity",
+                isInbound ? "text-primary" : "text-white"
+              ),
+              children: [
+                isInbound ? "+" : "-",
+                displayAmount
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx14("p", { className: "text-tiny text-slate-400 font-medium tracking-wide uppercase mt-0.5", children: unit })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/web/components/page-header.tsx
+import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+function PageHeader({ left, title, right, borderClassName = "border-border" }) {
+  if (!title) {
+    return /* @__PURE__ */ jsxs7("header", { className: `sticky top-0 z-20 flex items-center border-b bg-background-dark/95 px-4 py-3.5 backdrop-blur ${borderClassName}`, children: [
+      /* @__PURE__ */ jsx15("div", { className: "flex shrink-0 items-center", children: left }),
+      /* @__PURE__ */ jsx15("div", { className: "ml-auto flex min-w-0 items-center justify-end gap-2", children: right })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs7("header", { className: `sticky top-0 z-20 flex items-center border-b bg-background-dark/95 px-4 py-3.5 backdrop-blur ${borderClassName}`, children: [
+    /* @__PURE__ */ jsx15("div", { className: "flex min-w-0 flex-1 items-center", children: left }),
+    /* @__PURE__ */ jsx15("span", { className: "font-bold text-body text-white shrink-0", children: title }),
+    /* @__PURE__ */ jsx15("div", { className: "flex min-w-0 flex-1 items-center justify-end gap-2", children: right })
+  ] });
+}
+
+// src/web/components/setting-item.tsx
+import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+function SettingItem({
+  icon,
+  iconSrc,
+  iconAlt,
+  title,
+  description,
+  value,
+  onClick,
+  showChevron = true,
+  className,
+  iconColor = "text-primary"
+}) {
+  const isClickable = !!onClick;
+  return /* @__PURE__ */ jsx16(
+    "div",
+    {
+      className: cn(
+        "p-5 rounded-2xl glass-panel border border-white/10 shadow-inner transition-all duration-200",
+        isClickable && "cursor-pointer hover:bg-white/5 active:scale-[0.98]",
+        className
+      ),
+      onClick,
+      children: /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [
+          (icon || iconSrc) && /* @__PURE__ */ jsx16(
+            "div",
+            {
+              className: cn(
+                "flex-shrink-0 size-10 rounded-xl flex items-center justify-center bg-black/20 shadow-inner border border-white/5",
+                iconColor
+              ),
+              children: iconSrc ? /* @__PURE__ */ jsx16("img", { src: iconSrc, alt: iconAlt ?? title, className: "size-5 object-contain" }) : /* @__PURE__ */ jsx16("span", { className: "material-symbols-outlined text-[20px]", children: icon })
+            }
+          ),
+          /* @__PURE__ */ jsxs8("div", { className: "flex flex-col flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx16("span", { className: "font-bold text-body text-white tracking-wide", children: title }),
+            description && /* @__PURE__ */ jsx16("span", { className: "text-sm text-slate-400 mt-0.5 font-medium", children: description })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
+          value && /* @__PURE__ */ jsx16("span", { className: "text-xs text-slate-400 font-mono", children: value }),
+          showChevron && isClickable && /* @__PURE__ */ jsx16("span", { className: "material-symbols-outlined text-[16px] text-slate-500", children: "chevron_right" })
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/web/components/section-label.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+function SectionLabel({ children, className }) {
+  return /* @__PURE__ */ jsx17("span", { className: cn("text-xxs font-black uppercase tracking-[0.22em] text-white/30", className), children });
+}
+
+// src/web/components/alert-banner.tsx
+import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+var variantStyles = {
+  error: {
+    container: "bg-red-500/10 border-red-500/20",
+    icon: "text-red-400",
+    iconName: "error"
+  },
+  warning: {
+    container: "bg-amber-500/10 border-amber-500/20",
+    icon: "text-amber-400",
+    iconName: "warning"
+  },
+  info: {
+    container: "bg-blue-500/10 border-blue-500/20",
+    icon: "text-blue-400",
+    iconName: "info"
+  },
+  success: {
+    container: "bg-primary/10 border-primary/20",
+    icon: "text-primary",
+    iconName: "check_circle"
+  }
+};
+function AlertBanner({ variant = "info", icon, children, className }) {
+  const styles = variantStyles[variant];
+  return /* @__PURE__ */ jsxs9("div", { className: cn("rounded-xl border p-3 flex items-start gap-2", styles.container, className), children: [
+    /* @__PURE__ */ jsx18(Icon, { name: icon ?? styles.iconName, size: "md", className: cn("shrink-0 mt-0.5", styles.icon) }),
+    /* @__PURE__ */ jsx18("div", { className: "text-sm", children })
+  ] });
+}
+
+// src/web/components/error-boundary.tsx
+import { Component } from "react";
+import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+var ErrorBoundary = class extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, info) {
+    console.error("[ErrorBoundary] Render crash:", error, info);
+  }
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback ?? /* @__PURE__ */ jsxs10("div", { className: "min-h-screen bg-background-dark text-white font-display flex flex-col items-center justify-center p-6 gap-4", children: [
+        /* @__PURE__ */ jsx19("span", { className: "material-symbols-outlined text-red-400 text-[48px]", children: "error" }),
+        /* @__PURE__ */ jsx19("h2", { className: "text-lg font-bold", children: "Something went wrong" }),
+        /* @__PURE__ */ jsx19("p", { className: "text-sm text-white/50 text-center", children: this.state.error?.message ?? "An unexpected error occurred." }),
+        /* @__PURE__ */ jsx19(
+          "button",
+          {
+            onClick: () => {
+              this.setState({ hasError: false, error: null });
+              this.props.onReset?.();
+            },
+            className: "px-6 py-3 rounded-xl bg-primary text-black font-bold hover:bg-primary/90 transition-all",
+            children: "Try Again"
+          }
+        )
+      ] });
+    }
+    return this.props.children;
+  }
+};
+export {
+  AlertBanner,
+  AssetCard,
+  AssetIcon,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  ErrorBoundary,
+  Icon,
+  Icons,
+  Input,
+  Label,
+  NetworkBadge,
+  PageHeader,
+  SectionLabel,
+  SettingItem,
+  StatusBadge,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+  Toaster,
+  TransactionCard,
+  buttonVariants,
+  cn,
+  getAssetIconUrl,
+  getFallbackAssetIconUrl,
+  toast,
+  useAssetIcon,
+  useToast
+};