@luxfi/ui 7.4.10 → 7.4.12

package/dist/chrome.cjs

@@ -1,15 +1,13 @@
 "use client";
 'use strict';
 
-var React6 = require('react');
+var React3 = require('react');
 var lucideReact = require('lucide-react');
 var gui = require('@hanzo/gui');
-var RadixDialog = require('@radix-ui/react-dialog');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 var reactQuery = require('@tanstack/react-query');
-var DropdownMenu = require('@radix-ui/react-dropdown-menu');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -29,26 +27,8 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
-var RadixDialog__namespace = /*#__PURE__*/_interopNamespace(RadixDialog);
-var DropdownMenu__namespace = /*#__PURE__*/_interopNamespace(DropdownMenu);
+var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 
-var NARROW_PX = 640;
-function useBelow(px) {
-  const [below, setBelow] = React6__namespace.useState(false);
-  React6__namespace.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${px - 1}px)`);
-    const apply = () => setBelow(mql.matches);
-    apply();
-    mql.addEventListener("change", apply);
-    return () => mql.removeEventListener("change", apply);
-  }, [px]);
-  return below;
-}
-var useIsNarrow = () => useBelow(NARROW_PX);
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
 var CLOSE_ICON_PATH = "M9.44 8.035a.791.791 0 0 0 1.12 0l3.802-3.803a.791.791 0 0 1 1.119 0l.287.287a.79.79 0 0 1 0 1.119L11.965 9.44a.79.79 0 0 0 0 1.118l3.803 3.803a.791.791 0 0 1 0 1.119l-.287.287a.791.791 0 0 1-1.119 0l-3.803-3.803a.79.79 0 0 0-1.118 0l-3.803 3.803a.79.79 0 0 1-1.119 0l-.287-.287a.791.791 0 0 1 0-1.119l3.803-3.803a.791.791 0 0 0 0-1.118L4.232 5.638a.791.791 0 0 1 0-1.119l.287-.287a.791.791 0 0 1 1.119 0L9.44 8.035Z";
 var CloseButtonFrame = gui.styled(gui.View, {
   name: "LuxCloseButton",
@@ -79,23 +59,19 @@ var CloseButtonFrame = gui.styled(gui.View, {
     }
   }
 });
-var CLOSE_BUTTON_CLASSES = [
-  "text-[var(--closeButton-fg,currentColor)]",
-  "hover:text-[var(--hover-color,currentColor)]",
-  "disabled:opacity-40"
-].join(" ");
-var CloseButton = React6__namespace.forwardRef(function CloseButton2(props, ref) {
+var CloseButton = React3__namespace.forwardRef(function CloseButton2(props, ref) {
   const { variant: _variant, size: _size, className, children, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     CloseButtonFrame,
     {
       ref,
-      className: [CLOSE_BUTTON_CLASSES, className].filter(Boolean).join(" "),
+      className,
       ...rest,
       children: children ?? /* @__PURE__ */ jsxRuntime.jsx(
         "svg",
         {
-          className: "size-5",
+          width: 20,
+          height: 20,
           viewBox: "0 0 20 20",
           fill: "none",
           "aria-hidden": "true",
@@ -111,13 +87,35 @@ var CloseButton = React6__namespace.forwardRef(function CloseButton2(props, ref)
     }
   );
 });
-var DrawerPlacementContext = React6__namespace.createContext("right");
-var DrawerSizeContext = React6__namespace.createContext("md");
-var DrawerStateContext = React6__namespace.createContext({
+var ink = (children, Wrap = gui.Text, props = {}) => {
+  let hasText = false;
+  React3.Children.forEach(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") hasText = true;
+  });
+  if (!hasText) return children;
+  return React3.Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? React3.createElement(Wrap, props, child) : child);
+};
+var NARROW_PX = 640;
+function useBelow(px) {
+  const [below, setBelow] = React3__namespace.useState(false);
+  React3__namespace.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${px - 1}px)`);
+    const apply = () => setBelow(mql.matches);
+    apply();
+    mql.addEventListener("change", apply);
+    return () => mql.removeEventListener("change", apply);
+  }, [px]);
+  return below;
+}
+var useIsNarrow = () => useBelow(NARROW_PX);
+var DrawerPlacementContext = React3__namespace.createContext("right");
+var DrawerSizeContext = React3__namespace.createContext("md");
+var DrawerStateContext = React3__namespace.createContext({
   open: false,
   setOpen: () => {
   },
-  modal: true
+  modal: true,
+  narrow: false
 });
 var DrawerRoot = (props) => {
   const {
@@ -129,63 +127,43 @@ var DrawerRoot = (props) => {
     modal = true,
     size = "md"
   } = props;
-  const [uncontrolled, setUncontrolled] = React6__namespace.useState(defaultOpen ?? false);
+  const [uncontrolled, setUncontrolled] = React3__namespace.useState(defaultOpen ?? false);
   const isControlled = open !== void 0;
   const isOpen = isControlled ? open : uncontrolled;
-  const setOpen = React6__namespace.useCallback((nextOpen) => {
+  const narrow = useIsNarrow();
+  const setOpen = React3__namespace.useCallback((nextOpen) => {
     if (!isControlled) setUncontrolled(nextOpen);
     onOpenChange?.({ open: nextOpen });
   }, [isControlled, onOpenChange]);
-  const state = React6__namespace.useMemo(
-    () => ({ open: isOpen, setOpen, modal }),
-    [isOpen, setOpen, modal]
+  const state = React3__namespace.useMemo(
+    () => ({ open: isOpen, setOpen, modal, narrow }),
+    [isOpen, setOpen, modal, narrow]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(DrawerPlacementContext.Provider, { value: placement, children: /* @__PURE__ */ jsxRuntime.jsx(DrawerSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxRuntime.jsx(DrawerStateContext.Provider, { value: state, children: /* @__PURE__ */ jsxRuntime.jsx(
-    RadixDialog__namespace.Root,
-    {
-      open: isOpen,
-      onOpenChange: setOpen,
-      modal,
-      children
-    }
-  ) }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(DrawerPlacementContext.Provider, { value: placement, children: /* @__PURE__ */ jsxRuntime.jsx(DrawerSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxRuntime.jsx(DrawerStateContext.Provider, { value: state, children: narrow ? children : /* @__PURE__ */ jsxRuntime.jsx(gui.Dialog, { open: isOpen, onOpenChange: setOpen, modal, children }) }) }) });
 };
-var PLACEMENT_CLASSES = {
-  right: [
-    "inset-y-0 right-0",
-    "data-[state=open]:animate-in data-[state=open]:slide-in-from-right",
-    "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right"
-  ].join(" "),
-  left: [
-    "inset-y-0 left-0",
-    "data-[state=open]:animate-in data-[state=open]:slide-in-from-left",
-    "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-left"
-  ].join(" "),
-  top: [
-    "inset-x-0 top-0",
-    "data-[state=open]:animate-in data-[state=open]:slide-in-from-top",
-    "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top"
-  ].join(" "),
-  bottom: [
-    "inset-x-0 bottom-0",
-    "data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom",
-    "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom"
-  ].join(" ")
+var ANCHOR = {
+  right: { top: 0, bottom: 0, right: 0, enterStyle: { x: 24, opacity: 0 }, exitStyle: { x: 24, opacity: 0 } },
+  left: { top: 0, bottom: 0, left: 0, enterStyle: { x: -24, opacity: 0 }, exitStyle: { x: -24, opacity: 0 } },
+  top: { left: 0, right: 0, top: 0, enterStyle: { y: -24, opacity: 0 }, exitStyle: { y: -24, opacity: 0 } },
+  bottom: { left: 0, right: 0, bottom: 0, enterStyle: { y: 24, opacity: 0 }, exitStyle: { y: 24, opacity: 0 } }
 };
-var SIZE_CLASSES = {
-  right: { xs: "w-60", sm: "w-80", md: "w-96", lg: "w-[480px]", xl: "w-[640px]", full: "w-screen" },
-  left: { xs: "w-60", sm: "w-80", md: "w-96", lg: "w-[480px]", xl: "w-[640px]", full: "w-screen" },
-  top: { xs: "h-40", sm: "h-60", md: "h-80", lg: "h-96", xl: "h-[480px]", full: "h-screen" },
-  bottom: { xs: "h-40", sm: "h-60", md: "h-80", lg: "h-96", xl: "h-[480px]", full: "h-screen" }
+var ACROSS = {
+  xs: 240,
+  sm: 320,
+  md: 384,
+  lg: 480,
+  xl: 640,
+  full: "100%"
 };
-var DrawerContent = React6__namespace.forwardRef(
+var extent = (placement, size) => placement === "left" || placement === "right" ? { width: ACROSS[size], maxWidth: "100%" } : { height: ACROSS[size], maxHeight: "100%" };
+var SCRIM = "rgba(0,0,0,0.5)";
+var DrawerContent = React3__namespace.forwardRef(
   function DrawerContent2(props, ref) {
-    const { children, portalled = true, portalRef, offset: _offset, backdrop = true, className, ...rest } = props;
-    const placement = React6__namespace.useContext(DrawerPlacementContext);
-    const size = React6__namespace.useContext(DrawerSizeContext);
-    const { open, setOpen, modal } = React6__namespace.useContext(DrawerStateContext);
-    const isNarrow = useIsNarrow();
-    if (isNarrow) {
+    const { children, portalled = true, portalRef: _portalRef, offset: _offset, backdrop = true, ...rest } = props;
+    const placement = React3__namespace.useContext(DrawerPlacementContext);
+    const size = React3__namespace.useContext(DrawerSizeContext);
+    const { open, setOpen, modal, narrow } = React3__namespace.useContext(DrawerStateContext);
+    if (narrow) {
       return /* @__PURE__ */ jsxRuntime.jsxs(
         gui.Sheet,
         {
@@ -203,7 +181,7 @@ var DrawerContent = React6__namespace.forwardRef(
                 transition: "lazy",
                 enterStyle: { opacity: 0 },
                 exitStyle: { opacity: 0 },
-                className: "bg-black/50"
+                backgroundColor: SCRIM
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(gui.Sheet.Handle, {}),
@@ -211,10 +189,11 @@ var DrawerContent = React6__namespace.forwardRef(
               gui.Sheet.Frame,
               {
                 unstyled: true,
-                className: cn(
-                  "flex flex-col rounded-t-2xl bg-[var(--color-drawer-bg)] shadow-[var(--shadow-drawer)]",
-                  className
-                ),
+                flexDirection: "column",
+                borderTopLeftRadius: 16,
+                borderTopRightRadius: 16,
+                backgroundColor: "var(--color-drawer-bg)",
+                shadowColor: "var(--shadow-drawer)",
                 ...rest,
                 children
               }
@@ -225,62 +204,54 @@ var DrawerContent = React6__namespace.forwardRef(
     }
     const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       backdrop && /* @__PURE__ */ jsxRuntime.jsx(
-        RadixDialog__namespace.Overlay,
+        gui.Dialog.Overlay,
         {
-          className: cn(
-            "fixed inset-0 z-50 bg-black/50",
-            "data-[state=open]:animate-in data-[state=open]:fade-in-0",
-            "data-[state=closed]:animate-out data-[state=closed]:fade-out-0"
-          )
-        }
+          position: "fixed",
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          zIndex: 50,
+          backgroundColor: SCRIM,
+          transition: "lazy",
+          enterStyle: { opacity: 0 },
+          exitStyle: { opacity: 0 }
+        },
+        "overlay"
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        RadixDialog__namespace.Content,
+        gui.Dialog.Content,
         {
           ref,
-          className: cn(
-            "fixed z-50 flex flex-col bg-[var(--color-drawer-bg)] shadow-[var(--shadow-drawer)] duration-300",
-            PLACEMENT_CLASSES[placement] ?? PLACEMENT_CLASSES.right,
-            SIZE_CLASSES[placement]?.[size] ?? SIZE_CLASSES.right?.md,
-            className
-          ),
+          unstyled: true,
+          position: "fixed",
+          zIndex: 50,
+          flexDirection: "column",
+          backgroundColor: "var(--color-drawer-bg)",
+          transition: "medium",
+          ...ANCHOR[placement],
+          ...extent(placement, size),
           ...rest,
           children
-        }
+        },
+        "content"
       )
     ] });
-    if (portalled) {
-      return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Portal, { container: portalRef?.current ?? void 0, children: content });
-    }
-    return content;
+    return portalled ? /* @__PURE__ */ jsxRuntime.jsx(gui.Dialog.Portal, { children: content }) : content;
   }
 );
-React6__namespace.forwardRef(function DrawerCloseTrigger2(props, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-    CloseButton,
-    {
-      ref,
-      className: cn("absolute top-7 right-5", props.className),
-      ...props
-    }
-  ) });
+React3__namespace.forwardRef(function DrawerCloseTrigger2(props, ref) {
+  return (
+    // Placement belongs to the surrounding box, not to the button: CloseButton
+    // is a fixed 20px control and has no opinion about where it sits.
+    /* @__PURE__ */ jsxRuntime.jsx(gui.View, { position: "absolute", top: 28, right: 20, zIndex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(gui.Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { ref, ...props }) }) })
+  );
 });
-var DrawerHeader = React6__namespace.forwardRef(
-  function DrawerHeader2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex flex-col gap-1.5 p-6 pb-0", className), ...props });
-  }
-);
-var DrawerBody = React6__namespace.forwardRef(
-  function DrawerBody2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex-1 overflow-auto p-6", className), ...props });
-  }
-);
-React6__namespace.forwardRef(
-  function DrawerFooter2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex items-center justify-end gap-2 p-6 pt-0", className), ...props });
-  }
-);
-var DrawerTitle = RadixDialog__namespace.Title;
+var DrawerHeader = ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(gui.YStack, { gap: 6, padding: 24, paddingBottom: 0, ...props, children: ink(children) });
+var DrawerBody = ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(gui.YStack, { flex: 1, overflow: "scroll", padding: 24, ...props, children: ink(children) });
+var DrawerTitle = gui.Dialog.Title;
+gui.Dialog.Description;
+gui.Dialog.Close;
 
 // src/white-label.ts
 var LUX_BRAND = {
@@ -407,13 +378,13 @@ function resolveWhiteLabel(host) {
 new reactQuery.QueryClient({
   defaultOptions: { queries: { refetchOnWindowFocus: false, retry: 1, staleTime: 3e4 } }
 });
-var WhiteLabelContext = React6__namespace.default.createContext(resolveWhiteLabel(""));
-var useWhiteLabel = () => React6__namespace.default.useContext(WhiteLabelContext);
-var IdentityContext = React6__namespace.createContext(null);
+var WhiteLabelContext = React3__namespace.default.createContext(resolveWhiteLabel(""));
+var useWhiteLabel = () => React3__namespace.default.useContext(WhiteLabelContext);
+var IdentityContext = React3__namespace.createContext(null);
 function useIdentity() {
-  const ctx = React6__namespace.useContext(IdentityContext);
+  const ctx = React3__namespace.useContext(IdentityContext);
   const whiteLabel = useWhiteLabel();
-  const fallback = React6__namespace.useMemo(() => ({
+  const fallback = React3__namespace.useMemo(() => ({
     status: "anonymous",
     account: null,
     orgs: [],
@@ -432,262 +403,101 @@ function useIdentity() {
   }), [whiteLabel]);
   return ctx ?? fallback;
 }
-function parsePlacement(placement) {
-  if (!placement) {
-    return { side: "bottom", align: "start" };
-  }
-  const parts = placement.split("-");
-  const side = parts[0] ?? "bottom";
-  const alignPart = parts[1];
-  let align = "center";
-  if (alignPart === "start") {
-    align = "start";
-  } else if (alignPart === "end") {
-    align = "end";
-  }
-  return { side, align };
-}
-var PositioningContext = React6__namespace.createContext({
-  side: "bottom",
-  align: "start",
-  sideOffset: 4,
-  alignOffset: 0
-});
-var MenuRoot = (props) => {
-  const {
-    children,
+var ITEM_HOVER = "var(--color-popover-item-hover)";
+var TEXT = "var(--color-text-primary)";
+var ROW = {
+  position: "relative",
+  flexDirection: "row",
+  alignItems: "center",
+  cursor: "pointer",
+  userSelect: "none",
+  borderRadius: 6,
+  fontSize: 14,
+  backgroundColor: "transparent",
+  hoverStyle: { backgroundColor: ITEM_HOVER },
+  focusStyle: { backgroundColor: ITEM_HOVER }
+};
+var MenuRoot = ({
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  positioning,
+  modal = true
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  gui.Menu,
+  {
     open,
     defaultOpen,
-    onOpenChange,
-    positioning,
-    modal = true,
-    // lazyMount / unmountOnExit have no direct Radix equivalent; Radix handles
-    // mount/unmount automatically.
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    lazyMount: _lazyMount,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    unmountOnExit: _unmountOnExit
-  } = props;
-  const mergedPositioning = {
-    placement: "bottom-start",
-    ...positioning,
-    offset: {
-      mainAxis: 4,
-      ...positioning?.offset
-    }
-  };
-  const { side, align } = parsePlacement(mergedPositioning.placement);
-  const positioningValue = React6__namespace.useMemo(() => ({
-    side,
-    align,
-    sideOffset: mergedPositioning.offset?.mainAxis ?? 4,
-    alignOffset: mergedPositioning.offset?.crossAxis ?? 0
-  }), [side, align, mergedPositioning.offset?.mainAxis, mergedPositioning.offset?.crossAxis]);
-  const handleOpenChange = React6__namespace.useCallback((isOpen) => {
-    onOpenChange?.({ open: isOpen });
-  }, [onOpenChange]);
-  return /* @__PURE__ */ jsxRuntime.jsx(PositioningContext.Provider, { value: positioningValue, children: /* @__PURE__ */ jsxRuntime.jsx(
-    DropdownMenu__namespace.Root,
-    {
-      open,
-      defaultOpen,
-      onOpenChange: handleOpenChange,
-      modal,
-      children
-    }
-  ) });
-};
-var MenuTrigger = React6__namespace.forwardRef(function MenuTrigger2(props, ref) {
-  const { asChild = false, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Trigger, { asChild, ref, ...rest });
-});
-var MenuContent = React6__namespace.forwardRef(function MenuContent2(props, ref) {
-  const { portalled = true, portalRef, className, zIndex, minW, style, ...rest } = props;
-  const positioning = React6__namespace.useContext(PositioningContext);
-  const mergedStyle = {
-    ...style,
-    ...zIndex !== void 0 ? { zIndex: typeof zIndex === "string" ? `var(--z-index-${zIndex}, ${zIndex})` : zIndex } : {},
-    ...minW !== void 0 ? { minWidth: minW } : {}
-  };
-  const content = /* @__PURE__ */ jsxRuntime.jsx(
-    DropdownMenu__namespace.Content,
-    {
-      ref,
-      side: positioning.side,
-      align: positioning.align,
-      sideOffset: positioning.sideOffset,
-      alignOffset: positioning.alignOffset,
-      className: cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-lg p-1",
-        "border border-[var(--color-popover-border,var(--color-border-divider))]",
-        "bg-[var(--color-popover-bg,var(--color-dialog-bg))]",
-        "shadow-[0_4px_12px_var(--color-popover-shadow)]",
-        "outline-none",
-        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
-        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      ),
-      style: Object.keys(mergedStyle).length > 0 ? mergedStyle : void 0,
-      ...rest
-    }
-  );
-  if (!portalled) {
-    return content;
+    onOpenChange: onOpenChange ? (isOpen) => onOpenChange({ open: isOpen }) : void 0,
+    modal,
+    placement: positioning?.placement ?? "bottom-start",
+    offset: positioning?.offset?.mainAxis ?? 4,
+    children
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Portal, { container: portalRef?.current ?? void 0, children: content });
-});
-var MenuItem = React6__namespace.forwardRef(function MenuItem2(props, ref) {
-  const { className, value: _value, asChild, closeOnSelect: _closeOnSelect, disabled, children, onClick, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DropdownMenu__namespace.Item,
+);
+var MenuTrigger = ({ asChild = false, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(gui.Menu.Trigger, { asChild, ...rest });
+var MenuContent = ({
+  portalled = true,
+  minW,
+  children,
+  ...rest
+}) => {
+  const content = /* @__PURE__ */ jsxRuntime.jsx(
+    gui.Menu.Content,
     {
-      ref,
-      asChild,
-      disabled,
-      onClick,
-      className: cn(
-        "relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm",
-        "outline-none transition-colors",
-        "text-[var(--color-text-primary,inherit)]",
-        "data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]",
-        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-        className
-      ),
+      unstyled: true,
+      zIndex: 50,
+      minWidth: minW ?? 128,
+      overflow: "hidden",
+      borderRadius: 8,
+      padding: 4,
+      borderWidth: 1,
+      borderColor: "var(--color-popover-border)",
+      backgroundColor: "var(--color-popover-bg)",
+      transition: "quick",
+      enterStyle: { opacity: 0, scale: 0.95 },
+      exitStyle: { opacity: 0, scale: 0.95 },
       ...rest,
       children
     }
   );
-});
-React6__namespace.forwardRef(function MenuItemText2(props, ref) {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: cn("flex-1", className), ...rest });
-});
-React6__namespace.forwardRef(function MenuItemCommand2(props, ref) {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      ref,
-      className: cn("ml-auto text-xs tracking-widest opacity-60", className),
-      ...rest
-    }
-  );
-});
-var MenuSeparator = React6__namespace.forwardRef(function MenuSeparator2(props, ref) {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DropdownMenu__namespace.Separator,
-    {
-      ref,
-      className: cn("-mx-1 my-1 h-px bg-[var(--color-border-divider)]", className),
-      ...rest
-    }
-  );
-});
-React6__namespace.forwardRef(function MenuItemGroup2(props, ref) {
-  const { title, children, className, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu__namespace.Group, { ref, className, ...rest, children: [
-    title && /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Label, { className: "px-2 py-1.5 text-xs font-semibold select-none opacity-60", children: title }),
-    children
-  ] });
-});
-React6__namespace.forwardRef(function MenuArrow2(props, ref) {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DropdownMenu__namespace.Arrow,
-    {
-      ref,
-      className: cn("fill-[var(--color-popover-bg,var(--color-dialog-bg))]", className),
-      ...rest
-    }
-  );
-});
-React6__namespace.forwardRef(function MenuCheckboxItem2(props, ref) {
-  const { className, children, checked, onCheckedChange, onClick, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    DropdownMenu__namespace.CheckboxItem,
-    {
-      ref,
-      checked,
-      onCheckedChange,
-      onClick,
-      className: cn(
-        "relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm",
-        "outline-none transition-colors",
-        "data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]",
-        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-        className
-      ),
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) }) }),
-        children
-      ]
-    }
-  );
-});
-React6__namespace.forwardRef(function MenuRadioItemGroup2(props, ref) {
-  const { value, onValueChange, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DropdownMenu__namespace.RadioGroup,
-    {
-      ref,
-      value,
-      onValueChange,
-      ...rest
-    }
-  );
-});
-React6__namespace.forwardRef(function MenuRadioItem2(props, ref) {
-  const { className, children, value, onClick, ...rest } = props;
-  const { value: _v, ...radixRest } = rest;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    DropdownMenu__namespace.RadioItem,
-    {
-      ref,
-      value,
-      onClick,
-      className: cn(
-        "relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm",
-        "outline-none transition-colors",
-        "data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]",
-        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children })
-      ]
-    }
-  );
-});
-React6__namespace.forwardRef(function MenuContextTrigger2(props, ref) {
-  const { asChild: _asChild, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, ...rest });
-});
-React6__namespace.forwardRef(function MenuTriggerItem2(props, ref) {
-  const { startIcon, children, className, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Sub, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-    DropdownMenu__namespace.SubTrigger,
+  return portalled ? /* @__PURE__ */ jsxRuntime.jsx(gui.Menu.Portal, { children: content }) : content;
+};
+var MenuItem = ({ children, value: _value, asChild, ...rest }) => (
+  // `asChild` means the caller brought its own element and owns the look. Its
+  // props are then forwarded to that element verbatim, so the skin must NOT be
+  // applied: `unstyled` and friends are not DOM attributes and React rejects
+  // them out loud ("Received `true` for a non-boolean attribute `unstyled`").
+  // Two shapes, said once, rather than one shape that is wrong in one of them.
+  asChild ? /* @__PURE__ */ jsxRuntime.jsx(gui.Menu.Item, { asChild: true, ...rest, children }) : /* @__PURE__ */ jsxRuntime.jsx(
+    gui.Menu.Item,
     {
-      ref,
-      className: cn(
-        "relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm",
-        "outline-none transition-colors",
-        "data-[highlighted]:bg-[var(--color-popover-item-hover,rgba(0,0,0,0.04))]",
-        className
-      ),
+      unstyled: true,
+      ...ROW,
+      gap: 8,
+      paddingHorizontal: 8,
+      paddingVertical: 6,
+      disabledStyle: { opacity: 0.5, pointerEvents: "none" },
       ...rest,
-      children: [
-        startIcon,
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children }),
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" })
-      ]
+      children: ink(children, void 0, { fontSize: 14, color: TEXT })
     }
-  ) });
-});
+  )
+);
+var MenuSeparator = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+  gui.Menu.Separator,
+  {
+    unstyled: true,
+    height: 1,
+    marginVertical: 4,
+    marginHorizontal: -4,
+    backgroundColor: "var(--color-border-divider)",
+    ...props
+  }
+);
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
 function initials(label) {
   return label.split(/[\s._-]+/).filter(Boolean).map((w) => w[0]).join("").slice(0, 2).toUpperCase();
 }
@@ -737,9 +547,9 @@ var Switcher = ({
   align = "start",
   testId
 }) => {
-  const [open, setOpen] = React6__namespace.useState(false);
+  const [open, setOpen] = React3__namespace.useState(false);
   const narrow = useIsNarrow();
-  const close = React6__namespace.useCallback(() => setOpen(false), []);
+  const close = React3__namespace.useCallback(() => setOpen(false), []);
   const message = status === "loading" ? "Loading\u2026" : status === "error" ? error ?? "Could not reach IAM." : status === "anonymous" ? null : items.length === 0 ? empty : null;
   const rows = status === "anonymous" && onSignIn ? [{ id: "sign-in", label: signInLabel, icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { "aria-hidden": "true", className: "h-4 w-4" }), onSelect: onSignIn }] : status === "ready" ? items : [];
   const panel = (menu) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -772,7 +582,7 @@ var Switcher = ({
   );
   if (narrow) {
     return /* @__PURE__ */ jsxRuntime.jsxs(DrawerRoot, { open, onOpenChange: (d) => setOpen(d.open), placement: "bottom", size: "md", children: [
-      React6__namespace.cloneElement(trigger, { onClick: () => setOpen(true) }),
+      React3__namespace.cloneElement(trigger, { onClick: () => setOpen(true) }),
       /* @__PURE__ */ jsxRuntime.jsxs(DrawerContent, { "data-testid": testId ? `${testId}-panel` : void 0, children: [
         /* @__PURE__ */ jsxRuntime.jsx(DrawerHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DrawerTitle, { children: title }) }),
         /* @__PURE__ */ jsxRuntime.jsx(DrawerBody, { children: panel(false) })
@@ -888,7 +698,7 @@ var AppNav = ({
 }) => {
   const id = useIdentity();
   const narrow = useIsNarrow();
-  const [menu, setMenu] = React6__namespace.useState(false);
+  const [menu, setMenu] = React3__namespace.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "header",
     {