@luxfi/ui 7.4.0 → 7.4.2

package/dist/chrome.js

@@ -0,0 +1,921 @@
+"use client";
+import * as React6 from 'react';
+import React6__default from 'react';
+import { Check, ChevronRight, ChevronsUpDown, Folder, LogOut, User, Settings, Menu, Building2 } from 'lucide-react';
+import { styled, View, Sheet } from '@hanzo/gui';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { QueryClient } from '@tanstack/react-query';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+
+var NARROW_PX = 640;
+function useBelow(px) {
+  const [below, setBelow] = React6.useState(false);
+  React6.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 twMerge(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 = styled(View, {
+  name: "LuxCloseButton",
+  render: /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Close" }),
+  role: "button",
+  cursor: "pointer",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 20,
+  height: 20,
+  minWidth: 0,
+  flexShrink: 1,
+  padding: 0,
+  borderRadius: 4,
+  borderWidth: 0,
+  overflow: "hidden",
+  backgroundColor: "transparent",
+  hoverStyle: {
+    backgroundColor: "transparent"
+  },
+  variants: {
+    disabled: {
+      true: {
+        opacity: 0.4,
+        pointerEvents: "none"
+      }
+    }
+  }
+});
+var CLOSE_BUTTON_CLASSES = [
+  "text-[var(--closeButton-fg,currentColor)]",
+  "hover:text-[var(--hover-color,currentColor)]",
+  "disabled:opacity-40"
+].join(" ");
+var CloseButton = React6.forwardRef(function CloseButton2(props, ref) {
+  const { variant: _variant, size: _size, className, children, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    CloseButtonFrame,
+    {
+      ref,
+      className: [CLOSE_BUTTON_CLASSES, className].filter(Boolean).join(" "),
+      ...rest,
+      children: children ?? /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "size-5",
+          viewBox: "0 0 20 20",
+          fill: "none",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: CLOSE_ICON_PATH,
+              fill: "currentColor"
+            }
+          )
+        }
+      )
+    }
+  );
+});
+var DrawerPlacementContext = React6.createContext("right");
+var DrawerSizeContext = React6.createContext("md");
+var DrawerStateContext = React6.createContext({
+  open: false,
+  setOpen: () => {
+  },
+  modal: true
+});
+var DrawerRoot = (props) => {
+  const {
+    children,
+    open,
+    defaultOpen,
+    onOpenChange,
+    placement = "right",
+    modal = true,
+    size = "md"
+  } = props;
+  const [uncontrolled, setUncontrolled] = React6.useState(defaultOpen ?? false);
+  const isControlled = open !== void 0;
+  const isOpen = isControlled ? open : uncontrolled;
+  const setOpen = React6.useCallback((nextOpen) => {
+    if (!isControlled) setUncontrolled(nextOpen);
+    onOpenChange?.({ open: nextOpen });
+  }, [isControlled, onOpenChange]);
+  const state = React6.useMemo(
+    () => ({ open: isOpen, setOpen, modal }),
+    [isOpen, setOpen, modal]
+  );
+  return /* @__PURE__ */ jsx(DrawerPlacementContext.Provider, { value: placement, children: /* @__PURE__ */ jsx(DrawerSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(DrawerStateContext.Provider, { value: state, children: /* @__PURE__ */ jsx(
+    RadixDialog.Root,
+    {
+      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 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 DrawerContent = React6.forwardRef(
+  function DrawerContent2(props, ref) {
+    const { children, portalled = true, portalRef, offset: _offset, backdrop = true, className, ...rest } = props;
+    const placement = React6.useContext(DrawerPlacementContext);
+    const size = React6.useContext(DrawerSizeContext);
+    const { open, setOpen, modal } = React6.useContext(DrawerStateContext);
+    const isNarrow = useIsNarrow();
+    if (isNarrow) {
+      return /* @__PURE__ */ jsxs(
+        Sheet,
+        {
+          open,
+          onOpenChange: setOpen,
+          modal,
+          dismissOnSnapToBottom: true,
+          snapPointsMode: "percent",
+          snapPoints: [88],
+          transition: "medium",
+          children: [
+            backdrop && /* @__PURE__ */ jsx(
+              Sheet.Overlay,
+              {
+                transition: "lazy",
+                enterStyle: { opacity: 0 },
+                exitStyle: { opacity: 0 },
+                className: "bg-black/50"
+              }
+            ),
+            /* @__PURE__ */ jsx(Sheet.Handle, {}),
+            /* @__PURE__ */ jsx(
+              Sheet.Frame,
+              {
+                unstyled: true,
+                className: cn(
+                  "flex flex-col rounded-t-2xl bg-[var(--color-drawer-bg)] shadow-[var(--shadow-drawer)]",
+                  className
+                ),
+                ...rest,
+                children
+              }
+            )
+          ]
+        }
+      );
+    }
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      backdrop && /* @__PURE__ */ jsx(
+        RadixDialog.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"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        RadixDialog.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
+          ),
+          ...rest,
+          children
+        }
+      )
+    ] });
+    if (portalled) {
+      return /* @__PURE__ */ jsx(RadixDialog.Portal, { container: portalRef?.current ?? void 0, children: content });
+    }
+    return content;
+  }
+);
+React6.forwardRef(function DrawerCloseTrigger2(props, ref) {
+  return /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(
+    CloseButton,
+    {
+      ref,
+      className: cn("absolute top-7 right-5", props.className),
+      ...props
+    }
+  ) });
+});
+var DrawerHeader = React6.forwardRef(
+  function DrawerHeader2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-1.5 p-6 pb-0", className), ...props });
+  }
+);
+var DrawerBody = React6.forwardRef(
+  function DrawerBody2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex-1 overflow-auto p-6", className), ...props });
+  }
+);
+React6.forwardRef(
+  function DrawerFooter2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center justify-end gap-2 p-6 pt-0", className), ...props });
+  }
+);
+var DrawerTitle = RadixDialog.Title;
+
+// src/white-label.ts
+var LUX_BRAND = {
+  lux: "#7000FF",
+  zoo: "#6C5EFB",
+  hanzo: "#EA580C",
+  pars: "#1C3879"};
+var PARS_GOLD = "#C8A45C";
+var ORGS = {
+  lux: {
+    org: "lux",
+    name: "Lux",
+    domain: "lux.network",
+    iamDomain: "lux.id",
+    accent: LUX_BRAND.lux,
+    accentForeground: "#FFFFFF"
+  },
+  zoo: {
+    org: "zoo",
+    name: "Zoo",
+    domain: "zoo.ngo",
+    // Zoo's IdP is `id.zoo.network`, not a `zoo.id` apex — the one row in this
+    // table where the issuer is not `<org>.id`, and the one every hand-rolled
+    // per-app branding map got wrong.
+    iamDomain: "id.zoo.network",
+    accent: LUX_BRAND.zoo,
+    accentForeground: "#FFFFFF"
+  },
+  bootnode: {
+    org: "bootnode",
+    name: "Bootnode",
+    domain: "bootno.de",
+    iamDomain: "id.bootno.de",
+    accent: LUX_BRAND.lux,
+    accentForeground: "#FFFFFF"
+  },
+  hanzo: {
+    org: "hanzo",
+    name: "Hanzo",
+    domain: "hanzo.ai",
+    iamDomain: "hanzo.id",
+    accent: LUX_BRAND.hanzo,
+    accentForeground: "#FFFFFF"
+  },
+  pars: {
+    org: "pars",
+    name: "Pars",
+    domain: "pars.id",
+    iamDomain: "pars.id",
+    accent: LUX_BRAND.pars,
+    accentForeground: PARS_GOLD
+  }
+};
+var DOMAIN_ORG = [
+  ["lux.network", "lux"],
+  ["lux.cloud", "lux"],
+  ["lux.id", "lux"],
+  ["lux.finance", "lux"],
+  ["zoo.ngo", "zoo"],
+  ["zoo.network", "zoo"],
+  ["zoo.cloud", "zoo"],
+  ["zoo.id", "zoo"],
+  ["hanzo.ai", "hanzo"],
+  ["hanzo.cloud", "hanzo"],
+  ["hanzo.id", "hanzo"],
+  ["pars.id", "pars"],
+  ["parsdao.org", "pars"],
+  ["bootno.de", "bootnode", "platform"]
+];
+var DEFAULT_ORG = "lux";
+function normalizeHost(host) {
+  const noPort = host.trim().toLowerCase().split(":")[0] ?? "";
+  return noPort.replace(/\.$/, "");
+}
+function isUnder(host, domain) {
+  return host === domain || host.endsWith(`.${domain}`);
+}
+function matchDomain(host) {
+  let best;
+  for (const entry of DOMAIN_ORG) {
+    if (isUnder(host, entry[0]) && (!best || entry[0].length > best[0].length)) {
+      best = entry;
+    }
+  }
+  return best;
+}
+function appSlug(host, domain, apexApp) {
+  const sub = host === domain ? "" : host.slice(0, -(domain.length + 1));
+  const leftmost = sub.split(".")[0] ?? "";
+  if (leftmost && leftmost !== "www") return leftmost;
+  if (apexApp) return apexApp;
+  const label = domain.split(".")[0] ?? "";
+  const tld = domain.split(".").slice(1).join(".");
+  return tld.split(".")[0] || label;
+}
+function isLocal(host) {
+  return host === "localhost" || host.endsWith(".localhost") || host === "127.0.0.1" || host === "0.0.0.0" || host === "[::1]" || host.endsWith(".local");
+}
+function resolveWhiteLabel(host) {
+  const h = normalizeHost(host);
+  const match = h ? matchDomain(h) : void 0;
+  const org = match ? match[1] : DEFAULT_ORG;
+  const identity = ORGS[org];
+  const app = match ? appSlug(h, match[0], match[2]) : h && isLocal(h) ? "local" : "app";
+  return {
+    ...identity,
+    host: h,
+    app,
+    theme: `dark_${org}`,
+    issuer: `https://${identity.iamDomain}`,
+    clientId: `${org}-${app}`
+  };
+}
+new QueryClient({
+  defaultOptions: { queries: { refetchOnWindowFocus: false, retry: 1, staleTime: 3e4 } }
+});
+var WhiteLabelContext = React6__default.createContext(resolveWhiteLabel(""));
+var useWhiteLabel = () => React6__default.useContext(WhiteLabelContext);
+var IdentityContext = React6.createContext(null);
+function useIdentity() {
+  const ctx = React6.useContext(IdentityContext);
+  const whiteLabel = useWhiteLabel();
+  const fallback = React6.useMemo(() => ({
+    status: "anonymous",
+    account: null,
+    orgs: [],
+    org: null,
+    projects: [],
+    project: null,
+    error: null,
+    whiteLabel,
+    setOrg: () => void 0,
+    setProject: () => void 0,
+    signIn: () => {
+      if (typeof window !== "undefined") window.location.assign("/login");
+    },
+    signOut: () => void 0,
+    reload: () => void 0
+  }), [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.createContext({
+  side: "bottom",
+  align: "start",
+  sideOffset: 4,
+  alignOffset: 0
+});
+var MenuRoot = (props) => {
+  const {
+    children,
+    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.useMemo(() => ({
+    side,
+    align,
+    sideOffset: mergedPositioning.offset?.mainAxis ?? 4,
+    alignOffset: mergedPositioning.offset?.crossAxis ?? 0
+  }), [side, align, mergedPositioning.offset?.mainAxis, mergedPositioning.offset?.crossAxis]);
+  const handleOpenChange = React6.useCallback((isOpen) => {
+    onOpenChange?.({ open: isOpen });
+  }, [onOpenChange]);
+  return /* @__PURE__ */ jsx(PositioningContext.Provider, { value: positioningValue, children: /* @__PURE__ */ jsx(
+    DropdownMenu.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange: handleOpenChange,
+      modal,
+      children
+    }
+  ) });
+};
+var MenuTrigger = React6.forwardRef(function MenuTrigger2(props, ref) {
+  const { asChild = false, ...rest } = props;
+  return /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild, ref, ...rest });
+});
+var MenuContent = React6.forwardRef(function MenuContent2(props, ref) {
+  const { portalled = true, portalRef, className, zIndex, minW, style, ...rest } = props;
+  const positioning = React6.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__ */ jsx(
+    DropdownMenu.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;
+  }
+  return /* @__PURE__ */ jsx(DropdownMenu.Portal, { container: portalRef?.current ?? void 0, children: content });
+});
+var MenuItem = React6.forwardRef(function MenuItem2(props, ref) {
+  const { className, value: _value, asChild, closeOnSelect: _closeOnSelect, disabled, children, onClick, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    DropdownMenu.Item,
+    {
+      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
+      ),
+      ...rest,
+      children
+    }
+  );
+});
+React6.forwardRef(function MenuItemText2(props, ref) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx("span", { ref, className: cn("flex-1", className), ...rest });
+});
+React6.forwardRef(function MenuItemCommand2(props, ref) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: cn("ml-auto text-xs tracking-widest opacity-60", className),
+      ...rest
+    }
+  );
+});
+var MenuSeparator = React6.forwardRef(function MenuSeparator2(props, ref) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    DropdownMenu.Separator,
+    {
+      ref,
+      className: cn("-mx-1 my-1 h-px bg-[var(--color-border-divider)]", className),
+      ...rest
+    }
+  );
+});
+React6.forwardRef(function MenuItemGroup2(props, ref) {
+  const { title, children, className, ...rest } = props;
+  return /* @__PURE__ */ jsxs(DropdownMenu.Group, { ref, className, ...rest, children: [
+    title && /* @__PURE__ */ jsx(DropdownMenu.Label, { className: "px-2 py-1.5 text-xs font-semibold select-none opacity-60", children: title }),
+    children
+  ] });
+});
+React6.forwardRef(function MenuArrow2(props, ref) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    DropdownMenu.Arrow,
+    {
+      ref,
+      className: cn("fill-[var(--color-popover-bg,var(--color-dialog-bg))]", className),
+      ...rest
+    }
+  );
+});
+React6.forwardRef(function MenuCheckboxItem2(props, ref) {
+  const { className, children, checked, onCheckedChange, onClick, ...rest } = props;
+  return /* @__PURE__ */ jsxs(
+    DropdownMenu.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__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+        children
+      ]
+    }
+  );
+});
+React6.forwardRef(function MenuRadioItemGroup2(props, ref) {
+  const { value, onValueChange, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    DropdownMenu.RadioGroup,
+    {
+      ref,
+      value,
+      onValueChange,
+      ...rest
+    }
+  );
+});
+React6.forwardRef(function MenuRadioItem2(props, ref) {
+  const { className, children, value, onClick, ...rest } = props;
+  const { value: _v, ...radixRest } = rest;
+  return /* @__PURE__ */ jsxs(
+    DropdownMenu.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__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+        /* @__PURE__ */ jsx("span", { children })
+      ]
+    }
+  );
+});
+React6.forwardRef(function MenuContextTrigger2(props, ref) {
+  const { asChild: _asChild, ...rest } = props;
+  return /* @__PURE__ */ jsx("span", { ref, ...rest });
+});
+React6.forwardRef(function MenuTriggerItem2(props, ref) {
+  const { startIcon, children, className, ...rest } = props;
+  return /* @__PURE__ */ jsx(DropdownMenu.Sub, { children: /* @__PURE__ */ jsxs(
+    DropdownMenu.SubTrigger,
+    {
+      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
+      ),
+      ...rest,
+      children: [
+        startIcon,
+        /* @__PURE__ */ jsx("span", { className: "flex-1", children }),
+        /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+      ]
+    }
+  ) });
+});
+function initials(label) {
+  return label.split(/[\s._-]+/).filter(Boolean).map((w) => w[0]).join("").slice(0, 2).toUpperCase();
+}
+var Monogram = ({ label, logo }) => logo ? /* @__PURE__ */ jsx("img", { src: logo, alt: "", className: "h-5 w-5 shrink-0 rounded object-contain" }) : /* @__PURE__ */ jsx(
+  "span",
+  {
+    "aria-hidden": "true",
+    className: "flex h-5 w-5 shrink-0 items-center justify-center rounded bg-[rgba(127,127,127,0.22)] text-[10px] font-bold",
+    children: initials(label)
+  }
+);
+var Row = ({ item, onDone, menu }) => {
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    item.icon,
+    /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: item.label }),
+    item.hint ? /* @__PURE__ */ jsx("span", { className: "text-xs opacity-60", children: item.hint }) : null,
+    item.selected ? /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: "h-4 w-4 shrink-0" }) : null
+  ] });
+  const className = cn(
+    "flex w-full cursor-pointer select-none items-center gap-2.5 rounded-md px-2 py-2 text-left text-sm",
+    "hover:bg-[rgba(127,127,127,0.14)]",
+    item.danger && "text-[var(--color-text-error,#e5484d)]"
+  );
+  const activate = () => {
+    onDone();
+    item.onSelect?.();
+  };
+  const shared = {
+    "data-testid": `chrome-item-${item.id}`,
+    "aria-current": item.selected ? "true" : void 0,
+    className
+  };
+  const control = item.href ? /* @__PURE__ */ jsx("a", { href: item.href, ...shared, onClick: onDone, children: body }) : /* @__PURE__ */ jsx("button", { type: "button", ...shared, onClick: activate, children: body });
+  return menu ? /* @__PURE__ */ jsx(MenuItem, { value: item.id, asChild: true, children: control }) : control;
+};
+var Switcher = ({
+  title,
+  label,
+  icon,
+  items,
+  footer = [],
+  status = "ready",
+  empty = "Nothing here yet.",
+  onSignIn,
+  signInLabel = "Sign in",
+  error,
+  align = "start",
+  testId
+}) => {
+  const [open, setOpen] = React6.useState(false);
+  const narrow = useIsNarrow();
+  const close = React6.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__ */ jsx(User, { "aria-hidden": "true", className: "h-4 w-4" }), onSelect: onSignIn }] : status === "ready" ? items : [];
+  const panel = (menu) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "px-2 pb-1 pt-1 text-[11px] font-semibold uppercase tracking-wide opacity-55", children: title }),
+    message ? /* @__PURE__ */ jsx("div", { "data-testid": "chrome-message", className: "px-2 py-2 text-sm opacity-70", children: message }) : null,
+    rows.map((item) => /* @__PURE__ */ jsx(Row, { item, onDone: close, menu }, item.id)),
+    footer.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      menu ? /* @__PURE__ */ jsx(MenuSeparator, { className: "my-1 h-px bg-[var(--color-border-divider,rgba(127,127,127,0.25))]" }) : /* @__PURE__ */ jsx("div", { className: "my-1 h-px bg-[var(--color-border-divider,rgba(127,127,127,0.25))]" }),
+      footer.map((item) => /* @__PURE__ */ jsx(Row, { item, onDone: close, menu }, item.id))
+    ] }) : null
+  ] });
+  const trigger = /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "data-testid": testId,
+      "aria-label": title,
+      "aria-haspopup": "menu",
+      "aria-expanded": open,
+      className: cn(
+        "flex max-w-[14rem] items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium",
+        "hover:bg-[rgba(127,127,127,0.14)]"
+      ),
+      children: [
+        icon,
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: label }),
+        /* @__PURE__ */ jsx(ChevronsUpDown, { "aria-hidden": "true", className: "h-3.5 w-3.5 shrink-0 opacity-60" })
+      ]
+    }
+  );
+  if (narrow) {
+    return /* @__PURE__ */ jsxs(DrawerRoot, { open, onOpenChange: (d) => setOpen(d.open), placement: "bottom", size: "md", children: [
+      React6.cloneElement(trigger, { onClick: () => setOpen(true) }),
+      /* @__PURE__ */ jsxs(DrawerContent, { "data-testid": testId ? `${testId}-panel` : void 0, children: [
+        /* @__PURE__ */ jsx(DrawerHeader, { children: /* @__PURE__ */ jsx(DrawerTitle, { children: title }) }),
+        /* @__PURE__ */ jsx(DrawerBody, { children: panel(false) })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    MenuRoot,
+    {
+      open,
+      onOpenChange: (d) => setOpen(d.open),
+      positioning: { placement: align === "end" ? "bottom-end" : "bottom-start" },
+      children: [
+        /* @__PURE__ */ jsx(MenuTrigger, { asChild: true, children: trigger }),
+        /* @__PURE__ */ jsx(MenuContent, { minW: "16rem", "data-testid": testId ? `${testId}-panel` : void 0, children: panel(true) })
+      ]
+    }
+  );
+};
+var OrgSwitcher = () => {
+  const id = useIdentity();
+  return /* @__PURE__ */ jsx(
+    Switcher,
+    {
+      testId: "org-switcher",
+      title: "Organization",
+      label: id.org?.displayName || id.org?.name || id.whiteLabel.name,
+      icon: /* @__PURE__ */ jsx(Monogram, { label: id.org?.displayName || id.org?.name || id.whiteLabel.name, logo: id.org?.logo }),
+      status: id.status,
+      error: id.error,
+      empty: "No organizations for this account.",
+      onSignIn: id.signIn,
+      signInLabel: `Sign in with ${id.whiteLabel.iamDomain}`,
+      items: id.orgs.map((o) => ({
+        id: o.name,
+        label: o.displayName || o.name,
+        icon: /* @__PURE__ */ jsx(Monogram, { label: o.displayName || o.name, logo: o.logo }),
+        selected: o.name === id.org?.name,
+        onSelect: () => id.setOrg(o.name)
+      }))
+    }
+  );
+};
+var ProjectSwitcher = () => {
+  const id = useIdentity();
+  if (id.status === "ready" && id.projects.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    Switcher,
+    {
+      testId: "project-switcher",
+      title: "Project",
+      label: id.project?.displayName || id.project?.name || "Project",
+      icon: /* @__PURE__ */ jsx(Folder, { "aria-hidden": "true", className: "h-4 w-4 opacity-70" }),
+      status: id.status,
+      error: id.error,
+      empty: "No projects in this organization.",
+      onSignIn: id.signIn,
+      items: id.projects.map((p) => ({
+        id: p.name,
+        label: p.displayName || p.name,
+        icon: /* @__PURE__ */ jsx(Folder, { "aria-hidden": "true", className: "h-4 w-4 opacity-70" }),
+        selected: p.name === id.project?.name,
+        onSelect: () => id.setProject(p.name)
+      }))
+    }
+  );
+};
+var UserMenu = ({ items = [] }) => {
+  const id = useIdentity();
+  const who = id.account?.displayName || id.account?.email || id.account?.name || "Account";
+  return /* @__PURE__ */ jsx(
+    Switcher,
+    {
+      testId: "user-menu",
+      align: "end",
+      title: id.status === "ready" ? who : "Account",
+      label: id.status === "ready" ? who : "Sign in",
+      icon: id.status === "ready" ? /* @__PURE__ */ jsx(Monogram, { label: who, logo: id.account?.avatar }) : /* @__PURE__ */ jsx(User, { "aria-hidden": "true", className: "h-4 w-4 opacity-70" }),
+      status: id.status,
+      error: id.error,
+      onSignIn: id.signIn,
+      signInLabel: `Sign in with ${id.whiteLabel.iamDomain}`,
+      items: [
+        { id: "account", label: id.account?.email || who, icon: /* @__PURE__ */ jsx(User, { "aria-hidden": "true", className: "h-4 w-4 opacity-70" }) },
+        ...items
+      ],
+      footer: id.status === "ready" ? [{ id: "sign-out", label: "Sign out", danger: true, icon: /* @__PURE__ */ jsx(LogOut, { "aria-hidden": "true", className: "h-4 w-4" }), onSelect: id.signOut }] : []
+    }
+  );
+};
+var SettingsMenu = ({ items = [], href = "/settings" }) => /* @__PURE__ */ jsx(
+  Switcher,
+  {
+    testId: "settings-menu",
+    align: "end",
+    title: "Settings",
+    label: "Settings",
+    icon: /* @__PURE__ */ jsx(Settings, { "aria-hidden": "true", className: "h-4 w-4 opacity-70" }),
+    items,
+    empty: "No settings on this surface.",
+    footer: [{ id: "all-settings", label: "All settings", href, icon: /* @__PURE__ */ jsx(Settings, { "aria-hidden": "true", className: "h-4 w-4 opacity-70" }) }]
+  }
+);
+var AppNav = ({
+  brand,
+  home = "/",
+  links = [],
+  org = true,
+  project = false,
+  settings,
+  userItems,
+  children
+}) => {
+  const id = useIdentity();
+  const narrow = useIsNarrow();
+  const [menu, setMenu] = React6.useState(false);
+  return /* @__PURE__ */ jsx(
+    "header",
+    {
+      "data-testid": "app-nav",
+      className: "sticky top-0 z-50 border-b border-[var(--color-border-divider,rgba(127,127,127,0.25))] bg-[var(--color-bg-body,inherit)]",
+      children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-14 max-w-7xl items-center gap-2 px-4", children: [
+        narrow && links.length > 0 ? /* @__PURE__ */ jsxs(DrawerRoot, { open: menu, onOpenChange: (d) => setMenu(d.open), placement: "bottom", size: "md", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Menu",
+              "data-testid": "nav-menu",
+              className: "rounded-md p-2 hover:bg-[rgba(127,127,127,0.14)]",
+              onClick: () => setMenu(true),
+              children: /* @__PURE__ */ jsx(Menu, { "aria-hidden": "true", className: "h-5 w-5" })
+            }
+          ),
+          /* @__PURE__ */ jsxs(DrawerContent, { "data-testid": "nav-menu-panel", children: [
+            /* @__PURE__ */ jsx(DrawerHeader, { children: /* @__PURE__ */ jsx(DrawerTitle, { children: "Menu" }) }),
+            /* @__PURE__ */ jsx(DrawerBody, { children: links.map((l) => /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: l.href,
+                onClick: () => setMenu(false),
+                "aria-current": l.active ? "page" : void 0,
+                className: "block rounded-md px-2 py-2.5 text-sm hover:bg-[rgba(127,127,127,0.14)]",
+                children: l.label
+              },
+              l.href
+            )) })
+          ] })
+        ] }) : null,
+        /* @__PURE__ */ jsx("a", { href: home, className: "flex items-center gap-2 font-semibold tracking-tight", children: brand ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Building2, { "aria-hidden": "true", className: "h-4 w-4 opacity-70" }),
+          id.whiteLabel.name
+        ] }) }),
+        org ? /* @__PURE__ */ jsx(OrgSwitcher, {}) : null,
+        project ? /* @__PURE__ */ jsx(ProjectSwitcher, {}) : null,
+        !narrow && links.length > 0 ? /* @__PURE__ */ jsx("nav", { className: "flex items-center gap-1", children: links.map((l) => /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: l.href,
+            "aria-current": l.active ? "page" : void 0,
+            className: cn(
+              "rounded-md px-3 py-1.5 text-sm font-medium",
+              l.active ? "bg-[rgba(127,127,127,0.14)]" : "opacity-75 hover:opacity-100"
+            ),
+            children: l.label
+          },
+          l.href
+        )) }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center justify-end gap-1", children: [
+          children,
+          settings ? /* @__PURE__ */ jsx(SettingsMenu, { items: settings }) : null,
+          /* @__PURE__ */ jsx(UserMenu, { items: userItems })
+        ] })
+      ] })
+    }
+  );
+};
+
+export { AppNav, OrgSwitcher, ProjectSwitcher, SettingsMenu, Switcher, UserMenu, initials };