@luxfi/ui 7.4.0 → 7.4.2

package/dist/index.cjs

@@ -3,26 +3,21 @@
 
 var gui = require('@hanzo/gui');
 var reactQuery = require('@tanstack/react-query');
-var React30 = require('react');
+var React33 = require('react');
 var v5 = require('@hanzogui/config/v5');
+var v5Css = require('@hanzogui/config/v5-css');
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
+var lucideReact = require('lucide-react');
+var RadixDialog = require('@radix-ui/react-dialog');
+var DropdownMenu = require('@radix-ui/react-dropdown-menu');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
-var RadixAvatar = require('@radix-ui/react-avatar');
 var usehooks = require('@uidotdev/usehooks');
-var RadixCheckbox = require('@radix-ui/react-checkbox');
 var Collapsible = require('@radix-ui/react-collapsible');
-var RadixDialog = require('@radix-ui/react-dialog');
 var LabelPrimitive = require('@radix-ui/react-label');
 var esToolkit = require('es-toolkit');
-var DropdownMenu = require('@radix-ui/react-dropdown-menu');
-var lu = require('react-icons/lu');
-var RadixProgress = require('@radix-ui/react-progress');
-var RadixRadioGroup = require('@radix-ui/react-radio-group');
 var RadixSelect = require('@radix-ui/react-select');
-var RadixSlider = require('@radix-ui/react-slider');
-var RadixSwitch = require('@radix-ui/react-switch');
 var RadixTabs = require('@radix-ui/react-tabs');
 var sonner = require('sonner');
 
@@ -44,29 +39,141 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React30__namespace = /*#__PURE__*/_interopNamespace(React30);
+var React33__namespace = /*#__PURE__*/_interopNamespace(React33);
+var RadixDialog__namespace = /*#__PURE__*/_interopNamespace(RadixDialog);
+var DropdownMenu__namespace = /*#__PURE__*/_interopNamespace(DropdownMenu);
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
-var RadixAvatar__namespace = /*#__PURE__*/_interopNamespace(RadixAvatar);
-var RadixCheckbox__namespace = /*#__PURE__*/_interopNamespace(RadixCheckbox);
 var Collapsible__namespace = /*#__PURE__*/_interopNamespace(Collapsible);
-var RadixDialog__namespace = /*#__PURE__*/_interopNamespace(RadixDialog);
 var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
-var DropdownMenu__namespace = /*#__PURE__*/_interopNamespace(DropdownMenu);
-var RadixProgress__namespace = /*#__PURE__*/_interopNamespace(RadixProgress);
-var RadixRadioGroup__namespace = /*#__PURE__*/_interopNamespace(RadixRadioGroup);
 var RadixSelect__namespace = /*#__PURE__*/_interopNamespace(RadixSelect);
-var RadixSlider__namespace = /*#__PURE__*/_interopNamespace(RadixSlider);
-var RadixSwitch__namespace = /*#__PURE__*/_interopNamespace(RadixSwitch);
 var RadixTabs__namespace = /*#__PURE__*/_interopNamespace(RadixTabs);
 
 // src/provider.tsx
+
+// src/white-label.ts
 var LUX_BRAND = {
   lux: "#7000FF",
   zoo: "#6C5EFB",
   hanzo: "#EA580C",
-  pars: "#1C3879"
+  pars: "#1C3879",
+  // bootno.de is its own white label with its own IdP (id.bootno.de) — accent
+  // taken from the bootnode console's own brand default, not invented here.
+  bootnode: "#3B82F6"
 };
 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}`
+  };
+}
+function currentHost() {
+  return typeof window === "undefined" ? "" : window.location.host;
+}
+function orgIdentity(org) {
+  return ORGS[org];
+}
+
+// src/lux.config.ts
 var TRUE_BLACK = "#000000";
 var darkBase = {
   ...v5.defaultConfig.themes.dark,
@@ -88,48 +195,1107 @@ var luxThemes = {
   dark_lux: brandTheme(LUX_BRAND.lux),
   dark_zoo: brandTheme(LUX_BRAND.zoo),
   dark_hanzo: brandTheme(LUX_BRAND.hanzo),
-  dark_pars: brandTheme(LUX_BRAND.pars, { accentColor: PARS_GOLD })
+  dark_pars: brandTheme(LUX_BRAND.pars, { accentColor: PARS_GOLD }),
+  dark_bootnode: brandTheme(LUX_BRAND.bootnode)
+};
+var config = gui.createGui({
+  ...v5.defaultConfig,
+  animations: v5Css.animations,
+  settings: {
+    ...v5.defaultConfig.settings,
+    onlyAllowShorthands: false
+  },
+  themes: {
+    ...v5.defaultConfig.themes,
+    ...luxThemes
+  }
+});
+var lux_config_default = config;
+var defaultQueryClient = new reactQuery.QueryClient({
+  defaultOptions: { queries: { refetchOnWindowFocus: false, retry: 1, staleTime: 3e4 } }
+});
+var FONT_BODY_RESET_ID = "lux-ui-font-body-reset";
+var FONT_BODY_RESET_CSS = "body .font_body{line-height:1.5}";
+var useFontBodyReset = () => {
+  React33__namespace.default.useInsertionEffect(() => {
+    if (typeof document === "undefined") return;
+    if (document.getElementById(FONT_BODY_RESET_ID)) return;
+    const style = document.createElement("style");
+    style.id = FONT_BODY_RESET_ID;
+    style.textContent = FONT_BODY_RESET_CSS;
+    document.head.appendChild(style);
+  }, []);
+};
+var WhiteLabelContext = React33__namespace.default.createContext(resolveWhiteLabel(""));
+var useWhiteLabel = () => React33__namespace.default.useContext(WhiteLabelContext);
+var useHostWhiteLabel = (host) => {
+  const [resolvedHost, setResolvedHost] = React33__namespace.default.useState(host ?? "");
+  React33__namespace.default.useEffect(() => {
+    if (host !== void 0) return;
+    const browserHost = currentHost();
+    if (browserHost) setResolvedHost(browserHost);
+  }, [host]);
+  return React33__namespace.default.useMemo(() => resolveWhiteLabel(resolvedHost), [resolvedHost]);
+};
+var AppProvider = ({
+  children,
+  queryClient,
+  host,
+  defaultTheme
+}) => {
+  useFontBodyReset();
+  const whiteLabel = useHostWhiteLabel(host);
+  const theme = defaultTheme ?? whiteLabel.theme;
+  return /* @__PURE__ */ jsxRuntime.jsx(WhiteLabelContext.Provider, { value: whiteLabel, children: /* @__PURE__ */ jsxRuntime.jsx(gui.GuiProvider, { config: lux_config_default, defaultTheme: theme, children: /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: queryClient ?? defaultQueryClient, children }) }) });
+};
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var NARROW_PX = 640;
+var TOUCH_PX = 1024;
+function useBelow(px) {
+  const [below, setBelow] = React33__namespace.useState(false);
+  React33__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 useIsTouch = () => useBelow(TOUCH_PX);
+
+// src/iam.ts
+var IamError = class extends Error {
+  constructor(message, status, unauthenticated) {
+    super(message);
+    this.name = "IamError";
+    this.status = status;
+    this.unauthenticated = unauthenticated;
+  }
+};
+var SIGNED_OUT = /please sign in|authentication required|unauthorized/i;
+function isSignedOut(status, msg) {
+  return status === 401 || status === 403 || SIGNED_OUT.test(msg);
+}
+function iamBase(host) {
+  const wl = typeof host === "object" && host !== null ? host : resolveWhiteLabel(host);
+  return `${wl.issuer}/v1/iam`;
+}
+async function read(call, verb, params) {
+  const url = new URL(`${call.base}/${verb}`);
+  for (const [k, v] of Object.entries(params)) url.searchParams.set(k, String(v));
+  let res;
+  try {
+    res = await fetch(url.toString(), {
+      method: "GET",
+      // The bearer is the whole credential. IAM does not allow credentialed
+      // CORS, so sending cookies would only get the response blocked.
+      headers: call.token ? { Authorization: `Bearer ${call.token}` } : {},
+      signal: call.signal
+    });
+  } catch (e) {
+    throw new IamError(e instanceof Error ? e.message : "IAM unreachable", 0, false);
+  }
+  const body = await res.json().catch(() => ({}));
+  const msg = typeof body.msg === "string" ? body.msg : "";
+  if (!res.ok || body.status === "error") {
+    throw new IamError(msg || `IAM ${verb} failed (${res.status})`, res.status, isSignedOut(res.status, msg));
+  }
+  return body.data;
+}
+var IAM_PAGE_SIZE = 20;
+var iam = {
+  /** The signed-in principal, or null when there is no session. */
+  async account(call) {
+    try {
+      const data = await read(call, "get-account", {});
+      return data && data.name ? data : null;
+    } catch (e) {
+      if (e instanceof IamError && e.unauthenticated) return null;
+      throw e;
+    }
+  },
+  /**
+   * One page of the orgs the principal can see. IAM scopes the read to the
+   * caller's authority, so a normal member gets their own org and a super
+   * admin gets the tenant list — the page never has to decide.
+   */
+  async organizations(call, page = 0, query = "", pageSize = IAM_PAGE_SIZE) {
+    const params = {
+      owner: "admin",
+      // IAM orgs live under the reserved `admin` owner
+      p: page + 1,
+      // the backend page is 1-based
+      pageSize,
+      sortField: "name",
+      sortOrder: "ascending"
+    };
+    const q = query.trim();
+    if (q) {
+      params.field = "name";
+      params.value = q;
+    }
+    return await read(call, "get-organizations", params) ?? [];
+  },
+  /** One organization by name. */
+  async organization(call, name) {
+    return await read(call, "get-organization", { id: `admin/${name}` }) ?? null;
+  },
+  /** Members of an organization. */
+  async users(call, org) {
+    return await read(call, "get-users", { owner: org }) ?? [];
+  },
+  /** The organization's projects — IAM keys this read by `organization`. */
+  async projects(call, org) {
+    return await read(call, "get-organization-projects", { organization: org }) ?? [];
+  }
+};
+var IAM_TOKEN_KEY = "hanzo_iam_access_token";
+function storedToken() {
+  if (typeof window === "undefined") return null;
+  for (const store of [window.sessionStorage, window.localStorage]) {
+    try {
+      const t = store.getItem(IAM_TOKEN_KEY);
+      if (t) return t;
+    } catch {
+    }
+  }
+  return null;
+}
+function clearStoredTokens() {
+  if (typeof window === "undefined") return;
+  for (const store of [window.sessionStorage, window.localStorage]) {
+    try {
+      for (const k of ["access_token", "refresh_token", "id_token", "expires_at"]) {
+        store.removeItem(`hanzo_iam_${k}`);
+      }
+    } catch {
+    }
+  }
+}
+var defaultAuth = {};
+var scopeKey = (host, kind) => `lux-ui:${kind}:${host}`;
+function readScope(host, kind) {
+  if (typeof window === "undefined") return null;
+  try {
+    return window.localStorage.getItem(scopeKey(host, kind));
+  } catch {
+    return null;
+  }
+}
+function writeScope(host, kind, value) {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(scopeKey(host, kind), value);
+  } catch {
+  }
+}
+var IdentityContext = React33__namespace.createContext(null);
+var IdentityProvider = ({
+  children,
+  auth = defaultAuth,
+  loginPath = "/login"
+}) => {
+  const whiteLabel = useWhiteLabel();
+  const base = React33__namespace.useMemo(() => iamBase(whiteLabel), [whiteLabel]);
+  const [status, setStatus] = React33__namespace.useState("loading");
+  const [account, setAccount] = React33__namespace.useState(null);
+  const [orgs, setOrgs] = React33__namespace.useState([]);
+  const [projects, setProjects] = React33__namespace.useState([]);
+  const [error, setError] = React33__namespace.useState(null);
+  const [orgName, setOrgName] = React33__namespace.useState(null);
+  const [projectName, setProjectName] = React33__namespace.useState(null);
+  const [epoch, setEpoch] = React33__namespace.useState(0);
+  React33__namespace.useEffect(() => {
+    const ac = new AbortController();
+    let live = true;
+    void (async () => {
+      const token = await (auth.token ?? storedToken)();
+      if (!live) return;
+      if (!token) {
+        setStatus("anonymous");
+        setAccount(null);
+        setOrgs([]);
+        return;
+      }
+      const call = { base, token, signal: ac.signal };
+      try {
+        const me = await iam.account(call);
+        if (!live) return;
+        if (!me) {
+          setStatus("anonymous");
+          setAccount(null);
+          setOrgs([]);
+          return;
+        }
+        setAccount(me);
+        const rows = await iam.organizations(call).catch((e) => {
+          if (e instanceof IamError && !e.unauthenticated) return [{ owner: "admin", name: me.owner }];
+          throw e;
+        });
+        if (!live) return;
+        setOrgs(rows);
+        setStatus("ready");
+        setError(null);
+      } catch (e) {
+        if (!live || ac.signal.aborted) return;
+        if (e instanceof IamError && e.unauthenticated) {
+          setStatus("anonymous");
+          setAccount(null);
+          setOrgs([]);
+          return;
+        }
+        setStatus("error");
+        setError(e instanceof Error ? e.message : "Could not reach IAM.");
+      }
+    })();
+    return () => {
+      live = false;
+      ac.abort();
+    };
+  }, [base, auth, epoch]);
+  const org = React33__namespace.useMemo(() => {
+    if (orgs.length === 0) return null;
+    const saved = orgName ?? readScope(whiteLabel.host, "org");
+    return orgs.find((o) => o.name === saved) ?? orgs.find((o) => o.name === account?.owner) ?? orgs[0];
+  }, [orgs, orgName, account, whiteLabel.host]);
+  React33__namespace.useEffect(() => {
+    if (!org) {
+      setProjects([]);
+      return;
+    }
+    const ac = new AbortController();
+    let live = true;
+    void (async () => {
+      const token = await (auth.token ?? storedToken)();
+      if (!live || !token) return;
+      const rows = await iam.projects({ base, token, signal: ac.signal }, org.name).catch(() => []);
+      if (live) setProjects(rows);
+    })();
+    return () => {
+      live = false;
+      ac.abort();
+    };
+  }, [base, auth, org, epoch]);
+  const project = React33__namespace.useMemo(() => {
+    if (projects.length === 0) return null;
+    const saved = projectName ?? readScope(whiteLabel.host, "project");
+    return projects.find((p) => p.name === saved) ?? projects.find((p) => p.isDefault) ?? projects[0];
+  }, [projects, projectName, whiteLabel.host]);
+  const value = React33__namespace.useMemo(() => ({
+    status,
+    account,
+    orgs,
+    org,
+    projects,
+    project,
+    error,
+    whiteLabel,
+    setOrg: (name) => {
+      writeScope(whiteLabel.host, "org", name);
+      setOrgName(name);
+      setProjectName(null);
+    },
+    setProject: (name) => {
+      writeScope(whiteLabel.host, "project", name);
+      setProjectName(name);
+    },
+    signIn: () => {
+      if (auth.signIn) return auth.signIn();
+      if (typeof window !== "undefined") window.location.assign(loginPath);
+    },
+    signOut: () => {
+      if (auth.signOut) return auth.signOut();
+      clearStoredTokens();
+      if (typeof window !== "undefined") window.location.assign(loginPath);
+    },
+    reload: () => setEpoch((n) => n + 1)
+  }), [status, account, orgs, org, projects, project, error, whiteLabel, auth, loginPath]);
+  return /* @__PURE__ */ jsxRuntime.jsx(IdentityContext.Provider, { value, children });
+};
+function useIdentity() {
+  const ctx = React33__namespace.useContext(IdentityContext);
+  const whiteLabel = useWhiteLabel();
+  const fallback = React33__namespace.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;
+}
+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",
+  render: /* @__PURE__ */ jsxRuntime.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 = React33__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(" "),
+      ...rest,
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          className: "size-5",
+          viewBox: "0 0 20 20",
+          fill: "none",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: CLOSE_ICON_PATH,
+              fill: "currentColor"
+            }
+          )
+        }
+      )
+    }
+  );
+});
+var DrawerPlacementContext = React33__namespace.createContext("right");
+var DrawerSizeContext = React33__namespace.createContext("md");
+var DrawerStateContext = React33__namespace.createContext({
+  open: false,
+  setOpen: () => {
+  },
+  modal: true
+});
+var DrawerRoot = (props) => {
+  const {
+    children,
+    open,
+    defaultOpen,
+    onOpenChange,
+    placement = "right",
+    modal = true,
+    size = "md"
+  } = props;
+  const [uncontrolled, setUncontrolled] = React33__namespace.useState(defaultOpen ?? false);
+  const isControlled = open !== void 0;
+  const isOpen = isControlled ? open : uncontrolled;
+  const setOpen = React33__namespace.useCallback((nextOpen) => {
+    if (!isControlled) setUncontrolled(nextOpen);
+    onOpenChange?.({ open: nextOpen });
+  }, [isControlled, onOpenChange]);
+  const state = React33__namespace.useMemo(
+    () => ({ open: isOpen, setOpen, modal }),
+    [isOpen, setOpen, modal]
+  );
+  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
+    }
+  ) }) }) });
+};
+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 = React33__namespace.forwardRef(
+  function DrawerContent2(props, ref) {
+    const { children, portalled = true, portalRef, offset: _offset, backdrop = true, className, ...rest } = props;
+    const placement = React33__namespace.useContext(DrawerPlacementContext);
+    const size = React33__namespace.useContext(DrawerSizeContext);
+    const { open, setOpen, modal } = React33__namespace.useContext(DrawerStateContext);
+    const isNarrow = useIsNarrow();
+    if (isNarrow) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        gui.Sheet,
+        {
+          open,
+          onOpenChange: setOpen,
+          modal,
+          dismissOnSnapToBottom: true,
+          snapPointsMode: "percent",
+          snapPoints: [88],
+          transition: "medium",
+          children: [
+            backdrop && /* @__PURE__ */ jsxRuntime.jsx(
+              gui.Sheet.Overlay,
+              {
+                transition: "lazy",
+                enterStyle: { opacity: 0 },
+                exitStyle: { opacity: 0 },
+                className: "bg-black/50"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(gui.Sheet.Handle, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              gui.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      backdrop && /* @__PURE__ */ jsxRuntime.jsx(
+        RadixDialog__namespace.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__ */ jsxRuntime.jsx(
+        RadixDialog__namespace.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__ */ jsxRuntime.jsx(RadixDialog__namespace.Portal, { container: portalRef?.current ?? void 0, children: content });
+    }
+    return content;
+  }
+);
+var DrawerCloseTrigger = React33__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
+    }
+  ) });
+});
+var DrawerTrigger = (props) => {
+  const { asChild = true, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Trigger, { asChild, ...rest });
+};
+var DrawerHeader = React33__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 = React33__namespace.forwardRef(
+  function DrawerBody2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex-1 overflow-auto p-6", className), ...props });
+  }
+);
+var DrawerFooter = React33__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 DrawerDescription = RadixDialog__namespace.Description;
+var DrawerActionTrigger = RadixDialog__namespace.Close;
+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 = React33__namespace.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 = React33__namespace.useMemo(() => ({
+    side,
+    align,
+    sideOffset: mergedPositioning.offset?.mainAxis ?? 4,
+    alignOffset: mergedPositioning.offset?.crossAxis ?? 0
+  }), [side, align, mergedPositioning.offset?.mainAxis, mergedPositioning.offset?.crossAxis]);
+  const handleOpenChange = React33__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 = React33__namespace.forwardRef(function MenuTrigger2(props, ref) {
+  const { asChild = false, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Trigger, { asChild, ref, ...rest });
+});
+var MenuContent = React33__namespace.forwardRef(function MenuContent2(props, ref) {
+  const { portalled = true, portalRef, className, zIndex, minW, style, ...rest } = props;
+  const positioning = React33__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;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Portal, { container: portalRef?.current ?? void 0, children: content });
+});
+var MenuItem = React33__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,
+    {
+      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
+    }
+  );
+});
+var MenuItemText = React33__namespace.forwardRef(function MenuItemText2(props, ref) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: cn("flex-1", className), ...rest });
+});
+React33__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 = React33__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
+    }
+  );
+});
+var MenuItemGroup = React33__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
+  ] });
+});
+var MenuArrow = React33__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
+    }
+  );
+});
+var MenuCheckboxItem = React33__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
+      ]
+    }
+  );
+});
+var MenuRadioItemGroup = React33__namespace.forwardRef(function MenuRadioItemGroup2(props, ref) {
+  const { value, onValueChange, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenu__namespace.RadioGroup,
+    {
+      ref,
+      value,
+      onValueChange,
+      ...rest
+    }
+  );
+});
+var MenuRadioItem = React33__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 })
+      ]
+    }
+  );
+});
+React33__namespace.forwardRef(function MenuContextTrigger2(props, ref) {
+  const { asChild: _asChild, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, ...rest });
+});
+var MenuTriggerItem = React33__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,
+    {
+      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__ */ jsxRuntime.jsx("span", { className: "flex-1", children }),
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsx("img", { src: logo, alt: "", className: "h-5 w-5 shrink-0 rounded object-contain" }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    item.icon,
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: item.label }),
+    item.hint ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs opacity-60", children: item.hint }) : null,
+    item.selected ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsx("a", { href: item.href, ...shared, onClick: onDone, children: body }) : /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", ...shared, onClick: activate, children: body });
+  return menu ? /* @__PURE__ */ jsxRuntime.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] = React33__namespace.useState(false);
+  const narrow = useIsNarrow();
+  const close = React33__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: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 pb-1 pt-1 text-[11px] font-semibold uppercase tracking-wide opacity-55", children: title }),
+    message ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "chrome-message", className: "px-2 py-2 text-sm opacity-70", children: message }) : null,
+    rows.map((item) => /* @__PURE__ */ jsxRuntime.jsx(Row, { item, onDone: close, menu }, item.id)),
+    footer.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      menu ? /* @__PURE__ */ jsxRuntime.jsx(MenuSeparator, { className: "my-1 h-px bg-[var(--color-border-divider,rgba(127,127,127,0.25))]" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-1 h-px bg-[var(--color-border-divider,rgba(127,127,127,0.25))]" }),
+      footer.map((item) => /* @__PURE__ */ jsxRuntime.jsx(Row, { item, onDone: close, menu }, item.id))
+    ] }) : null
+  ] });
+  const trigger = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "truncate", children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { "aria-hidden": "true", className: "h-3.5 w-3.5 shrink-0 opacity-60" })
+      ]
+    }
+  );
+  if (narrow) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(DrawerRoot, { open, onOpenChange: (d) => setOpen(d.open), placement: "bottom", size: "md", children: [
+      React33__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) })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    MenuRoot,
+    {
+      open,
+      onOpenChange: (d) => setOpen(d.open),
+      positioning: { placement: align === "end" ? "bottom-end" : "bottom-start" },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(MenuTrigger, { asChild: true, children: trigger }),
+        /* @__PURE__ */ jsxRuntime.jsx(MenuContent, { minW: "16rem", "data-testid": testId ? `${testId}-panel` : void 0, children: panel(true) })
+      ]
+    }
+  );
+};
+var OrgSwitcher = () => {
+  const id = useIdentity();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Switcher,
+    {
+      testId: "org-switcher",
+      title: "Organization",
+      label: id.org?.displayName || id.org?.name || id.whiteLabel.name,
+      icon: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    Switcher,
+    {
+      testId: "project-switcher",
+      title: "Project",
+      label: id.project?.displayName || id.project?.name || "Project",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsx(lucideReact.Folder, { "aria-hidden": "true", className: "h-4 w-4 opacity-70" }),
+        selected: p.name === id.project?.name,
+        onSelect: () => id.setProject(p.name)
+      }))
+    }
+  );
 };
-var config = gui.createGui({
-  ...v5.defaultConfig,
-  settings: {
-    ...v5.defaultConfig.settings,
-    onlyAllowShorthands: false
-  },
-  themes: {
-    ...v5.defaultConfig.themes,
-    ...luxThemes
-  }
-});
-var lux_config_default = config;
-var defaultQueryClient = new reactQuery.QueryClient({
-  defaultOptions: { queries: { refetchOnWindowFocus: false, retry: 1, staleTime: 3e4 } }
-});
-var FONT_BODY_RESET_ID = "lux-ui-font-body-reset";
-var FONT_BODY_RESET_CSS = "body .font_body{line-height:1.5}";
-var useFontBodyReset = () => {
-  React30__namespace.default.useInsertionEffect(() => {
-    if (typeof document === "undefined") return;
-    if (document.getElementById(FONT_BODY_RESET_ID)) return;
-    const style = document.createElement("style");
-    style.id = FONT_BODY_RESET_ID;
-    style.textContent = FONT_BODY_RESET_CSS;
-    document.head.appendChild(style);
-  }, []);
+var UserMenu = ({ items = [] }) => {
+  const id = useIdentity();
+  const who = id.account?.displayName || id.account?.email || id.account?.name || "Account";
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Monogram, { label: who, logo: id.account?.avatar }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsx(lucideReact.LogOut, { "aria-hidden": "true", className: "h-4 w-4" }), onSelect: id.signOut }] : []
+    }
+  );
 };
-var AppProvider = ({
-  children,
-  queryClient,
-  defaultTheme = "dark_lux"
+var SettingsMenu = ({ items = [], href = "/settings" }) => /* @__PURE__ */ jsxRuntime.jsx(
+  Switcher,
+  {
+    testId: "settings-menu",
+    align: "end",
+    title: "Settings",
+    label: "Settings",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsx(lucideReact.Settings, { "aria-hidden": "true", className: "h-4 w-4 opacity-70" }) }]
+  }
+);
+var AppNav = ({
+  brand,
+  home = "/",
+  links = [],
+  org = true,
+  project = false,
+  settings,
+  userItems,
+  children
 }) => {
-  useFontBodyReset();
-  return /* @__PURE__ */ jsxRuntime.jsx(gui.GuiProvider, { config: lux_config_default, defaultTheme, children: /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: queryClient ?? defaultQueryClient, children }) });
+  const id = useIdentity();
+  const narrow = useIsNarrow();
+  const [menu, setMenu] = React33__namespace.useState(false);
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex h-14 max-w-7xl items-center gap-2 px-4", children: [
+        narrow && links.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(DrawerRoot, { open: menu, onOpenChange: (d) => setMenu(d.open), placement: "bottom", size: "md", children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Menu, { "aria-hidden": "true", className: "h-5 w-5" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(DrawerContent, { "data-testid": "nav-menu-panel", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(DrawerHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DrawerTitle, { children: "Menu" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(DrawerBody, { children: links.map((l) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("a", { href: home, className: "flex items-center gap-2 font-semibold tracking-tight", children: brand ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, { "aria-hidden": "true", className: "h-4 w-4 opacity-70" }),
+          id.whiteLabel.name
+        ] }) }),
+        org ? /* @__PURE__ */ jsxRuntime.jsx(OrgSwitcher, {}) : null,
+        project ? /* @__PURE__ */ jsxRuntime.jsx(ProjectSwitcher, {}) : null,
+        !narrow && links.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex items-center gap-1", children: links.map((l) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 items-center justify-end gap-1", children: [
+          children,
+          settings ? /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { items: settings }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(UserMenu, { items: userItems })
+        ] })
+      ] })
+    }
+  );
 };
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
 var IndicatorIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7.5 15L12.5 10L7.5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
-var AccordionRoot = React30__namespace.forwardRef(
+var AccordionRoot = React33__namespace.forwardRef(
   function AccordionRoot2(props, ref) {
     const {
       multiple: _multiple,
@@ -148,7 +1314,7 @@ var AccordionRoot = React30__namespace.forwardRef(
       borderRadius: _borderRadius,
       ...rest
     } = props;
-    const handleValueChange = React30__namespace.useCallback(
+    const handleValueChange = React33__namespace.useCallback(
       (next) => {
         onValueChange?.({ value: next });
       },
@@ -176,7 +1342,7 @@ var AccordionRoot = React30__namespace.forwardRef(
     );
   }
 );
-var AccordionItem = React30__namespace.forwardRef(
+var AccordionItem = React33__namespace.forwardRef(
   function AccordionItem2(props, ref) {
     const { className, as: _as, _first, _last, display: _display, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -192,7 +1358,7 @@ var AccordionItem = React30__namespace.forwardRef(
     );
   }
 );
-var AccordionItemTrigger = React30__namespace.forwardRef(function AccordionItemTrigger2(props, ref) {
+var AccordionItemTrigger = React33__namespace.forwardRef(function AccordionItemTrigger2(props, ref) {
   const {
     children,
     indicatorPlacement: indicatorPlacementProp,
@@ -257,7 +1423,7 @@ var AccordionItemTrigger = React30__namespace.forwardRef(function AccordionItemT
     }
   ) }) });
 });
-var AccordionItemContent = React30__namespace.forwardRef(function AccordionItemContent2(props, ref) {
+var AccordionItemContent = React33__namespace.forwardRef(function AccordionItemContent2(props, ref) {
   const { className, children, pb: _pb, pr: _pr, pl: _pl, w: _w, display: _display, flexDir: _flexDir, rowGap: _rowGap, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     AccordionPrimitive__namespace.Content,
@@ -275,11 +1441,11 @@ var AccordionItemContent = React30__namespace.forwardRef(function AccordionItemC
   );
 });
 function useAccordion(items) {
-  const [value, setValue] = React30__namespace.useState([]);
-  const onValueChange = React30__namespace.useCallback(({ value: value2 }) => {
+  const [value, setValue] = React33__namespace.useState([]);
+  const onValueChange = React33__namespace.useCallback(({ value: value2 }) => {
     setValue(value2);
   }, []);
-  const scrollToItemFromUrl = React30__namespace.useCallback(() => {
+  const scrollToItemFromUrl = React33__namespace.useCallback(() => {
     const hash = window.location.hash.replace("#", "");
     if (!hash) {
       return;
@@ -293,7 +1459,7 @@ function useAccordion(items) {
       setValue([itemToScroll.id]);
     }
   }, [items]);
-  return React30__namespace.useMemo(() => {
+  return React33__namespace.useMemo(() => {
     return {
       value,
       onValueChange,
@@ -301,68 +1467,6 @@ function useAccordion(items) {
     };
   }, [value, onValueChange, scrollToItemFromUrl]);
 }
-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",
-  render: /* @__PURE__ */ jsxRuntime.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 = React30__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(" "),
-      ...rest,
-      children: children ?? /* @__PURE__ */ jsxRuntime.jsx(
-        "svg",
-        {
-          className: "size-5",
-          viewBox: "0 0 20 20",
-          fill: "none",
-          "aria-hidden": "true",
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            "path",
-            {
-              d: CLOSE_ICON_PATH,
-              fill: "currentColor"
-            }
-          )
-        }
-      )
-    }
-  );
-});
 var SHIM_PROPS = [
   "w",
   "h",
@@ -483,7 +1587,7 @@ var SKELETON_CLASSES = [
   "bg-[length:200%_100%]"
 ].join(" ");
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
-var Skeleton = React30__namespace.forwardRef(
+var Skeleton = React33__namespace.forwardRef(
   function Skeleton2(props, ref) {
     const { loading = false, asChild, className, children, style: styleProp, as: Component = "div", ...allRest } = props;
     const shimStyle = shimToStyle(props);
@@ -492,10 +1596,10 @@ var Skeleton = React30__namespace.forwardRef(
     const cls = hideBelowClass ? cn(className, hideBelowClass) : className;
     const htmlRest = stripShims(allRest);
     if (!loading) {
-      if (asChild && React30__namespace.isValidElement(children)) return children;
+      if (asChild && React33__namespace.isValidElement(children)) return children;
       return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: cls, style: mergedStyle, ...htmlRest, children });
     }
-    if (asChild && React30__namespace.isValidElement(children)) {
+    if (asChild && React33__namespace.isValidElement(children)) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         Component,
         {
@@ -521,7 +1625,7 @@ var Skeleton = React30__namespace.forwardRef(
     );
   }
 );
-var SkeletonCircle = React30__namespace.forwardRef(
+var SkeletonCircle = React33__namespace.forwardRef(
   function SkeletonCircle2(props, ref) {
     const { size = 40, loading = true, className, ...rest } = props;
     const dimension = typeof size === "number" ? `${size}px` : size;
@@ -537,7 +1641,7 @@ var SkeletonCircle = React30__namespace.forwardRef(
     );
   }
 );
-var SkeletonText = React30__namespace.forwardRef(
+var SkeletonText = React33__namespace.forwardRef(
   function SkeletonText2(props, ref) {
     const { noOfLines = 3, loading = true, className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -559,7 +1663,7 @@ var STATUS_CLASSES = {
   success: "bg-[var(--color-alert-bg-success)]",
   error: "bg-[var(--color-alert-bg-error)]"
 };
-var SIZE_CLASSES = {
+var SIZE_CLASSES2 = {
   sm: "gap-2 px-2 py-2 text-xs",
   md: "gap-2 px-3 py-2 text-base"
 };
@@ -567,7 +1671,7 @@ var INDICATOR_SIZE_CLASSES = {
   sm: "w-5 h-5 my-0",
   md: "w-5 h-5 my-[2px]"
 };
-var Alert = React30__namespace.forwardRef(
+var Alert = React33__namespace.forwardRef(
   function Alert2(props, ref) {
     const {
       title,
@@ -592,7 +1696,7 @@ var Alert = React30__namespace.forwardRef(
     if (_mb !== void 0) shimStyle.marginBottom = typeof _mb === "number" ? `${_mb * 4}px` : _mb;
     if (_mt !== void 0) shimStyle.marginTop = typeof _mt === "number" ? `${_mt * 4}px` : _mt;
     const alertStyle = Object.keys(shimStyle).length > 0 ? shimStyle : void 0;
-    const [isOpen, setIsOpen] = React30__namespace.useState(true);
+    const [isOpen, setIsOpen] = React33__namespace.useState(true);
     const resolvedSize = size ?? "md";
     const defaultIcon = /* @__PURE__ */ jsxRuntime.jsx(IndicatorIcon2, { className: "w-5 h-5" });
     const iconElement = (() => {
@@ -607,7 +1711,7 @@ var Alert = React30__namespace.forwardRef(
         INDICATOR_SIZE_CLASSES[resolvedSize]
       ), children: icon || defaultIcon });
     })();
-    const handleClose = React30__namespace.useCallback(() => {
+    const handleClose = React33__namespace.useCallback(() => {
       setIsOpen(false);
       onClose?.();
     }, [onClose]);
@@ -638,7 +1742,7 @@ var Alert = React30__namespace.forwardRef(
       "div",
       {
         ref,
-        className: cn(ALERT_BASE, STATUS_CLASSES[status], SIZE_CLASSES[resolvedSize], className),
+        className: cn(ALERT_BASE, STATUS_CLASSES[status], SIZE_CLASSES2[resolvedSize], className),
         style: alertStyle,
         ...alertRest,
         children: [
@@ -668,7 +1772,7 @@ var Alert = React30__namespace.forwardRef(
     ) });
   }
 );
-var SIZE_CLASSES2 = {
+var SIZE_CLASSES3 = {
   xs: "h-6 w-6 text-[10px]",
   sm: "h-8 w-8 text-xs",
   md: "h-10 w-10 text-sm",
@@ -683,11 +1787,11 @@ var VARIANT_CLASSES = {
 };
 var DEFAULT_SIZE = "md";
 var DEFAULT_VARIANT = "subtle";
-var AvatarGroupContext = React30__namespace.createContext({});
+var AvatarGroupContext = React33__namespace.createContext({});
 function useAvatarGroupContext() {
-  return React30__namespace.useContext(AvatarGroupContext);
+  return React33__namespace.useContext(AvatarGroupContext);
 }
-var Avatar = React30__namespace.forwardRef(
+var Avatar = React33__namespace.forwardRef(
   function Avatar2(props, ref) {
     const group = useAvatarGroupContext();
     const {
@@ -708,12 +1812,13 @@ var Avatar = React30__namespace.forwardRef(
     const variant = variantProp ?? group.variant ?? DEFAULT_VARIANT;
     const isBorderless = borderless ?? group.borderless ?? false;
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      RadixAvatar__namespace.Root,
+      gui.Avatar,
       {
         ref,
+        unstyled: true,
         className: cn(
           "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full align-middle",
-          SIZE_CLASSES2[size],
+          SIZE_CLASSES3[size],
           VARIANT_CLASSES[variant],
           !isBorderless && "ring-2 ring-white dark:ring-gray-900",
           className
@@ -721,8 +1826,8 @@ var Avatar = React30__namespace.forwardRef(
         ...rest,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { name, icon, children: fallback }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            RadixAvatar__namespace.Image,
+          src != null && /* @__PURE__ */ jsxRuntime.jsx(
+            gui.Avatar.Image,
             {
               className: "h-full w-full rounded-[inherit] object-cover",
               src,
@@ -737,13 +1842,14 @@ var Avatar = React30__namespace.forwardRef(
     );
   }
 );
-var AvatarFallback = React30__namespace.forwardRef(
+var AvatarFallback = React33__namespace.forwardRef(
   function AvatarFallback2(props, ref) {
     const { name, icon, children, className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      RadixAvatar__namespace.Fallback,
+      gui.Avatar.Fallback,
       {
         ref,
+        unstyled: true,
         className: cn(
           "flex h-full w-full items-center justify-center font-medium",
           className
@@ -764,10 +1870,10 @@ function getInitials(name) {
   const lastName = names.length > 1 ? names[names.length - 1] : "";
   return firstName && lastName ? `${firstName.charAt(0)}${lastName.charAt(0)}` : firstName.charAt(0);
 }
-var AvatarGroup = React30__namespace.forwardRef(
+var AvatarGroup = React33__namespace.forwardRef(
   function AvatarGroup2(props, ref) {
     const { size, variant, borderless, className, ...rest } = props;
-    const contextValue = React30__namespace.useMemo(
+    const contextValue = React33__namespace.useMemo(
       () => ({ size, variant, borderless }),
       [size, variant, borderless]
     );
@@ -781,26 +1887,11 @@ var AvatarGroup = React30__namespace.forwardRef(
     ) });
   }
 );
-var LG_BREAKPOINT = 1024;
-function useIsMobile() {
-  const [isMobile, setIsMobile] = React30__namespace.useState(() => {
-    if (typeof window === "undefined") return false;
-    return window.innerWidth < LG_BREAKPOINT;
-  });
-  React30__namespace.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${LG_BREAKPOINT - 1}px)`);
-    const handler = (e) => setIsMobile(e.matches);
-    setIsMobile(mql.matches);
-    mql.addEventListener("change", handler);
-    return () => mql.removeEventListener("change", handler);
-  }, []);
-  return isMobile;
-}
 function mapPlacement(p) {
   if (!p) return void 0;
   return p;
 }
-var Tooltip = React30__namespace.forwardRef(
+var Tooltip = React33__namespace.forwardRef(
   function Tooltip2(props, ref) {
     const {
       showArrow: showArrowProp,
@@ -819,28 +1910,28 @@ var Tooltip = React30__namespace.forwardRef(
       interactive,
       positioning
     } = props;
-    const [open, setOpen] = React30__namespace.useState(defaultOpen);
-    const timeoutRef = React30__namespace.useRef(null);
-    const isMobile = useIsMobile();
-    const handleOpenChange = React30__namespace.useCallback((nextOpen) => {
+    const [open, setOpen] = React33__namespace.useState(defaultOpen);
+    const timeoutRef = React33__namespace.useRef(null);
+    const isMobile = useIsTouch();
+    const handleOpenChange = React33__namespace.useCallback((nextOpen) => {
       setOpen(nextOpen);
       onOpenChange?.({ open: nextOpen });
     }, [onOpenChange]);
-    const handleOpenChangeManual = React30__namespace.useCallback((nextOpen) => {
+    const handleOpenChangeManual = React33__namespace.useCallback((nextOpen) => {
       timeoutRef.current && window.clearTimeout(timeoutRef.current);
       timeoutRef.current = window.setTimeout(() => {
         setOpen(nextOpen);
         onOpenChange?.({ open: nextOpen });
       }, nextOpen ? openDelay : closeDelay);
     }, [closeDelay, openDelay, onOpenChange]);
-    const handleClickAway = React30__namespace.useCallback(() => {
+    const handleClickAway = React33__namespace.useCallback(() => {
       handleOpenChangeManual(false);
     }, [handleOpenChangeManual]);
     const triggerRef = usehooks.useClickAway(handleClickAway);
-    const handleTriggerClick = React30__namespace.useCallback(() => {
+    const handleTriggerClick = React33__namespace.useCallback(() => {
       handleOpenChangeManual(!open);
     }, [handleOpenChangeManual, open]);
-    const handleContentClick = React30__namespace.useCallback((event) => {
+    const handleContentClick = React33__namespace.useCallback((event) => {
       event.stopPropagation();
       if (interactive) {
         const closestLink = event.target?.closest("a");
@@ -849,7 +1940,7 @@ var Tooltip = React30__namespace.forwardRef(
         }
       }
     }, [interactive, handleOpenChangeManual]);
-    React30__namespace.useEffect(() => {
+    React33__namespace.useEffect(() => {
       return () => {
         if (timeoutRef.current) {
           clearTimeout(timeoutRef.current);
@@ -921,7 +2012,7 @@ function TruncatedTextTooltip({ label, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { content: label, positioning: { placement: "top" }, children });
 }
 var BASE_CLASSES = "inline-flex items-center rounded-sm gap-1 font-medium w-fit max-w-full whitespace-nowrap select-text";
-var SIZE_CLASSES3 = {
+var SIZE_CLASSES4 = {
   sm: "text-xs p-1 h-[18px] min-h-[18px]",
   md: "text-sm px-1 py-0.5 min-h-6",
   lg: "text-sm px-2 py-1 min-h-7 font-semibold"
@@ -951,7 +2042,7 @@ var COLOR_PALETTE_CLASSES = {
   bright_pink: "bg-badge-bright-pink-bg text-badge-bright-pink-fg"
 };
 var S2 = 4;
-var Badge = React30__namespace.default.forwardRef(
+var Badge = React33__namespace.default.forwardRef(
   function Badge2(props, ref) {
     const {
       loading,
@@ -991,7 +2082,7 @@ var Badge = React30__namespace.default.forwardRef(
         ref,
         className: cn(
           BASE_CLASSES,
-          SIZE_CLASSES3[size],
+          SIZE_CLASSES4[size],
           COLOR_PALETTE_CLASSES[colorPalette],
           className
         ),
@@ -1200,7 +2291,7 @@ function buildShimStyle(props) {
   if (props.borderTopRightRadius !== void 0) s.borderTopRightRadius = typeof props.borderTopRightRadius === "number" ? `${props.borderTopRightRadius}px` : props.borderTopRightRadius;
   return Object.keys(s).length > 0 ? s : void 0;
 }
-var Button = React30__namespace.forwardRef(
+var Button = React33__namespace.forwardRef(
   function Button2(props, ref) {
     const {
       className,
@@ -1291,7 +2382,7 @@ var Button = React30__namespace.forwardRef(
     return button;
   }
 );
-var SIZE_CLASSES4 = {
+var SIZE_CLASSES5 = {
   "2xs": "px-2 h-5 min-w-5 text-xs rounded-sm gap-1",
   xs: "px-2 h-6 min-w-6 text-sm rounded-sm gap-1",
   sm: "px-3 h-8 min-w-8 text-sm rounded-md gap-1",
@@ -1300,9 +2391,9 @@ var SIZE_CLASSES4 = {
 function buttonVariants(opts) {
   const v = opts?.variant ?? "solid";
   const s = opts?.size ?? "md";
-  return [BASE_CLASSES2, VARIANT_CLASSES2[v] ?? "", SIZE_CLASSES4[s] ?? ""].filter(Boolean).join(" ");
+  return [BASE_CLASSES2, VARIANT_CLASSES2[v] ?? "", SIZE_CLASSES5[s] ?? ""].filter(Boolean).join(" ");
 }
-var ButtonGroup = React30__namespace.forwardRef(
+var ButtonGroup = React33__namespace.forwardRef(
   function ButtonGroup2(props, ref) {
     const { className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1316,7 +2407,7 @@ var ButtonGroup = React30__namespace.forwardRef(
     );
   }
 );
-var ButtonGroupRadio = React30__namespace.forwardRef(
+var ButtonGroupRadio = React33__namespace.forwardRef(
   function ButtonGroupRadio2(props, ref) {
     const {
       children,
@@ -1328,24 +2419,24 @@ var ButtonGroupRadio = React30__namespace.forwardRef(
       className,
       ...rest
     } = props;
-    const firstChildValue = React30__namespace.useMemo(() => {
+    const firstChildValue = React33__namespace.useMemo(() => {
       const firstChild = Array.isArray(children) ? children[0] : void 0;
       return typeof firstChild?.props.value === "string" ? firstChild.props.value : void 0;
     }, [children]);
-    const [value, setValue] = React30__namespace.useState(defaultValue ?? firstChildValue);
-    const handleItemClick = React30__namespace.useCallback((event) => {
+    const [value, setValue] = React33__namespace.useState(defaultValue ?? firstChildValue);
+    const handleItemClick = React33__namespace.useCallback((event) => {
       const v = event.currentTarget.value;
       setValue(v);
       onChange?.(v);
     }, [onChange]);
-    const clonedChildren = React30__namespace.Children.map(children, (child) => {
-      return React30__namespace.cloneElement(child, {
+    const clonedChildren = React33__namespace.Children.map(children, (child) => {
+      return React33__namespace.cloneElement(child, {
         onClick: handleItemClick,
         selected: value === child.props.value,
         variant
       });
     });
-    const childrenLength = React30__namespace.Children.count(children);
+    const childrenLength = React33__namespace.Children.count(children);
     return /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { loading, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -1365,11 +2456,11 @@ var ButtonGroupRadio = React30__namespace.forwardRef(
 );
 var NOOP = () => {
 };
-var CheckboxGroupContext = React30__namespace.createContext(null);
+var CheckboxGroupContext = React33__namespace.createContext(null);
 function useCheckboxGroupContext() {
-  return React30__namespace.useContext(CheckboxGroupContext);
+  return React33__namespace.useContext(CheckboxGroupContext);
 }
-var CheckboxGroupBase = React30__namespace.forwardRef(
+var CheckboxGroupBase = React33__namespace.forwardRef(
   function CheckboxGroup(props, ref) {
     const {
       children,
@@ -1381,10 +2472,10 @@ var CheckboxGroupBase = React30__namespace.forwardRef(
       className,
       ...rest
     } = props;
-    const [uncontrolledValue, setUncontrolledValue] = React30__namespace.useState(defaultValue ?? []);
+    const [uncontrolledValue, setUncontrolledValue] = React33__namespace.useState(defaultValue ?? []);
     const isControlled = controlledValue !== void 0;
     const value = isControlled ? controlledValue : uncontrolledValue;
-    const toggle = React30__namespace.useCallback(
+    const toggle = React33__namespace.useCallback(
       (itemValue) => {
         const next = value.includes(itemValue) ? value.filter((v) => v !== itemValue) : [...value, itemValue];
         if (!isControlled) {
@@ -1394,12 +2485,12 @@ var CheckboxGroupBase = React30__namespace.forwardRef(
       },
       [value, isControlled, onValueChange]
     );
-    React30__namespace.useEffect(() => {
+    React33__namespace.useEffect(() => {
       if (isControlled) {
         setUncontrolledValue(controlledValue);
       }
     }, [isControlled, controlledValue]);
-    const ctx = React30__namespace.useMemo(() => ({ value, toggle }), [value, toggle]);
+    const ctx = React33__namespace.useMemo(() => ({ value, toggle }), [value, toggle]);
     return /* @__PURE__ */ jsxRuntime.jsx(CheckboxGroupContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -1417,7 +2508,7 @@ var CheckboxGroupBase = React30__namespace.forwardRef(
   }
 );
 var CheckboxGroup2 = CheckboxGroupBase;
-var SIZE_CLASSES5 = {
+var SIZE_CLASSES6 = {
   sm: {
     root: "gap-1.5",
     control: "h-3.5 w-3.5 rounded-sm",
@@ -1457,7 +2548,7 @@ var IndeterminateIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx(
     children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0 0H12V2H0V0Z", fill: "currentColor" })
   }
 );
-var CheckboxBase = React30__namespace.forwardRef(
+var CheckboxBase = React33__namespace.forwardRef(
   function Checkbox(props, ref) {
     const {
       icon,
@@ -1478,8 +2569,8 @@ var CheckboxBase = React30__namespace.forwardRef(
       ...rest
     } = props;
     const group = useCheckboxGroupContext();
-    const hiddenInputRef = React30__namespace.useRef(null);
-    const setHiddenInputRef = React30__namespace.useCallback(
+    const hiddenInputRef = React33__namespace.useRef(null);
+    const setHiddenInputRef = React33__namespace.useCallback(
       (node) => {
         hiddenInputRef.current = node;
         if (typeof ref === "function") {
@@ -1492,7 +2583,7 @@ var CheckboxBase = React30__namespace.forwardRef(
     );
     const isInGroup = group !== null && value !== void 0;
     const groupChecked = isInGroup ? group.value.includes(value) : void 0;
-    const [internalChecked, setInternalChecked] = React30__namespace.useState(
+    const [internalChecked, setInternalChecked] = React33__namespace.useState(
       defaultChecked ?? false
     );
     const isControlled = checkedProp !== void 0 || isInGroup;
@@ -1504,7 +2595,7 @@ var CheckboxBase = React30__namespace.forwardRef(
     } else {
       checkedState = internalChecked;
     }
-    const handleCheckedChange = React30__namespace.useCallback(
+    const handleCheckedChange = React33__namespace.useCallback(
       (nextChecked) => {
         if (readOnly) return;
         if (!isControlled) {
@@ -1527,7 +2618,7 @@ var CheckboxBase = React30__namespace.forwardRef(
       },
       [readOnly, isControlled, isInGroup, group, value, onCheckedChange, onChange]
     );
-    const sizeClasses2 = SIZE_CLASSES5[size];
+    const sizeClasses2 = SIZE_CLASSES6[size];
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "label",
       {
@@ -1545,8 +2636,9 @@ var CheckboxBase = React30__namespace.forwardRef(
         ...rest,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            RadixCheckbox__namespace.Root,
+            gui.Checkbox,
             {
+              unstyled: true,
               checked: checkedState,
               onCheckedChange: handleCheckedChange,
               disabled: disabled || readOnly,
@@ -1564,7 +2656,7 @@ var CheckboxBase = React30__namespace.forwardRef(
                 "transition-colors duration-150",
                 sizeClasses2.control
               ),
-              children: icon ?? /* @__PURE__ */ jsxRuntime.jsx(RadixCheckbox__namespace.Indicator, { className: cn("flex items-center justify-center", sizeClasses2.icon), children: checkedState === "indeterminate" ? /* @__PURE__ */ jsxRuntime.jsx(IndeterminateIcon, { className: sizeClasses2.icon }) : /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: sizeClasses2.icon }) })
+              children: icon ?? /* @__PURE__ */ jsxRuntime.jsx(gui.Checkbox.Indicator, { className: cn("flex items-center justify-center", sizeClasses2.icon), children: checkedState === "indeterminate" ? /* @__PURE__ */ jsxRuntime.jsx(IndeterminateIcon, { className: sizeClasses2.icon }) : /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: sizeClasses2.icon }) })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -1668,7 +2760,7 @@ function resolveSpacing(v) {
   }
   return void 0;
 }
-var Link = React30__namespace.default.forwardRef(
+var Link = React33__namespace.default.forwardRef(
   function Link2(props, ref) {
     const {
       external,
@@ -1757,7 +2849,7 @@ var Link = React30__namespace.default.forwardRef(
     ) });
   }
 );
-var LinkBox = React30__namespace.default.forwardRef(
+var LinkBox = React33__namespace.default.forwardRef(
   function LinkBox2(props, ref) {
     const { className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1770,7 +2862,7 @@ var LinkBox = React30__namespace.default.forwardRef(
     );
   }
 );
-var LinkOverlay = React30__namespace.default.forwardRef(
+var LinkOverlay = React33__namespace.default.forwardRef(
   function LinkOverlay2(props, ref) {
     const {
       children,
@@ -1851,8 +2943,8 @@ var LinkOverlay = React30__namespace.default.forwardRef(
   }
 );
 function useUpdateEffect(effect, deps) {
-  const isFirstMount = React30__namespace.default.useRef(true);
-  React30__namespace.default.useEffect(() => {
+  const isFirstMount = React33__namespace.default.useRef(true);
+  React33__namespace.default.useEffect(() => {
     if (isFirstMount.current) {
       isFirstMount.current = false;
       return;
@@ -1869,8 +2961,8 @@ function scrollToElement(id) {
 var CUT_ID = "CollapsibleDetails";
 var CollapsibleDetails = (props) => {
   const { children, id = CUT_ID, onClick, isExpanded: isExpandedProp = false, text: textProp, loading, noScroll, ...rest } = props;
-  const [isExpanded, setIsExpanded] = React30__namespace.default.useState(isExpandedProp);
-  const handleClick = React30__namespace.default.useCallback((event) => {
+  const [isExpanded, setIsExpanded] = React33__namespace.default.useState(isExpandedProp);
+  const handleClick = React33__namespace.default.useCallback((event) => {
     setIsExpanded((flag) => !flag);
     if (!noScroll) {
       scrollToElement(id);
@@ -1901,11 +2993,11 @@ var CollapsibleDetails = (props) => {
 var CollapsibleList = (props) => {
   const CUT_LENGTH = 3;
   const { items, renderItem, triggerProps, cutLength = CUT_LENGTH, text: textProp, defaultExpanded = false, className, ...rest } = props;
-  const [isExpanded, setIsExpanded] = React30__namespace.default.useState(defaultExpanded);
-  React30__namespace.default.useEffect(() => {
+  const [isExpanded, setIsExpanded] = React33__namespace.default.useState(defaultExpanded);
+  React33__namespace.default.useEffect(() => {
     setIsExpanded(defaultExpanded);
   }, [defaultExpanded]);
-  const handleToggle = React30__namespace.default.useCallback(() => {
+  const handleToggle = React33__namespace.default.useCallback(() => {
     setIsExpanded((flag) => !flag);
   }, []);
   const text = isExpanded ? textProp?.[1] ?? "Hide" : textProp?.[0] ?? "Show all";
@@ -1922,10 +3014,10 @@ var CollapsibleList = (props) => {
     ) })
   ] }) });
 };
-var ColorModeContext = React30__namespace.createContext(void 0);
+var ColorModeContext = React33__namespace.createContext(void 0);
 function ColorModeProvider(props) {
   const { children, defaultTheme = "light", value: controlledValue, onValueChange } = props;
-  const [internalMode, setInternalMode] = React30__namespace.useState(() => {
+  const [internalMode, setInternalMode] = React33__namespace.useState(() => {
     if (controlledValue === "dark" || controlledValue === "light") {
       return controlledValue;
     }
@@ -1935,7 +3027,7 @@ function ColorModeProvider(props) {
     return defaultTheme === "dark" ? "dark" : "light";
   });
   const colorMode = controlledValue === "dark" || controlledValue === "light" ? controlledValue : internalMode;
-  const setColorMode = React30__namespace.useCallback((mode) => {
+  const setColorMode = React33__namespace.useCallback((mode) => {
     const resolved = mode === "dark" ? "dark" : "light";
     setInternalMode(resolved);
     onValueChange?.(resolved);
@@ -1944,19 +3036,19 @@ function ColorModeProvider(props) {
       document.documentElement.classList.toggle("light", resolved === "light");
     }
   }, [onValueChange]);
-  const toggleColorMode = React30__namespace.useCallback(() => {
+  const toggleColorMode = React33__namespace.useCallback(() => {
     setColorMode(colorMode === "dark" ? "light" : "dark");
   }, [colorMode, setColorMode]);
-  const ctx = React30__namespace.useMemo(
+  const ctx = React33__namespace.useMemo(
     () => ({ colorMode, setColorMode, toggleColorMode }),
     [colorMode, setColorMode, toggleColorMode]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(ColorModeContext.Provider, { value: ctx, children });
 }
 function useColorMode() {
-  const ctx = React30__namespace.useContext(ColorModeContext);
+  const ctx = React33__namespace.useContext(ColorModeContext);
   if (!ctx) {
-    const [mode, setMode] = React30__namespace.useState(() => {
+    const [mode, setMode] = React33__namespace.useState(() => {
       if (typeof document !== "undefined" && document.documentElement.classList.contains("dark")) {
         return "dark";
       }
@@ -2000,9 +3092,9 @@ function BackToButton({ onClick }) {
     }
   );
 }
-var DialogSizeContext = React30__namespace.createContext({ size: "md" });
+var DialogSizeContext = React33__namespace.createContext({ size: "md" });
 function useDialogSizeContext() {
-  return React30__namespace.useContext(DialogSizeContext);
+  return React33__namespace.useContext(DialogSizeContext);
 }
 var CONTENT_SIZE_MAP = {
   sm: "max-w-[400px]",
@@ -2034,13 +3126,13 @@ var DialogRoot = ({
   modal = true
   // motionPreset is intentionally unused -- kept for API compat
 }) => {
-  const handleOpenChange = React30__namespace.useCallback(
+  const handleOpenChange = React33__namespace.useCallback(
     (nextOpen) => {
       onOpenChange?.({ open: nextOpen });
     },
     [onOpenChange]
   );
-  const ctx = React30__namespace.useMemo(() => ({ size }), [size]);
+  const ctx = React33__namespace.useMemo(() => ({ size }), [size]);
   return /* @__PURE__ */ jsxRuntime.jsx(DialogSizeContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
     gui.Dialog,
     {
@@ -2052,7 +3144,7 @@ var DialogRoot = ({
     }
   ) });
 };
-var DialogContent = React30__namespace.forwardRef(function DialogContent2(props, ref) {
+var DialogContent = React33__namespace.forwardRef(function DialogContent2(props, ref) {
   const {
     children,
     portalled: _portalled = true,
@@ -2109,11 +3201,11 @@ var DialogContent = React30__namespace.forwardRef(function DialogContent2(props,
     )
   ] });
 });
-var DialogCloseTrigger = React30__namespace.forwardRef(function DialogCloseTrigger2(props, ref) {
+var DialogCloseTrigger = React33__namespace.forwardRef(function DialogCloseTrigger2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(gui.Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { ref, className, ...rest, children: props.children }) });
 });
-var DialogHeader = React30__namespace.forwardRef(function DialogHeader2(props, ref) {
+var DialogHeader = React33__namespace.forwardRef(function DialogHeader2(props, ref) {
   const { startElement: startElementProp, onBackToClick, className, children, ...rest } = props;
   const startElement = startElementProp ?? (onBackToClick ? /* @__PURE__ */ jsxRuntime.jsx(BackToButton, { onClick: onBackToClick }) : void 0);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2143,7 +3235,7 @@ var DialogHeader = React30__namespace.forwardRef(function DialogHeader2(props, r
     }
   );
 });
-var DialogBody = React30__namespace.forwardRef(function DialogBody2({ className, pt, display, flexDir, style: styleProp, ...props }, ref) {
+var DialogBody = React33__namespace.forwardRef(function DialogBody2({ className, pt, display, flexDir, style: styleProp, ...props }, ref) {
   const bodyStyle = {
     ...styleProp,
     ...pt !== void 0 ? { paddingTop: typeof pt === "number" ? `${pt * 4}px` : pt } : {},
@@ -2160,7 +3252,7 @@ var DialogBody = React30__namespace.forwardRef(function DialogBody2({ className,
     }
   );
 });
-var DialogFooter = React30__namespace.forwardRef(function DialogFooter2({ className, ...props }, ref) {
+var DialogFooter = React33__namespace.forwardRef(function DialogFooter2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -2172,138 +3264,15 @@ var DialogFooter = React30__namespace.forwardRef(function DialogFooter2({ classN
 });
 var DialogBackdrop = gui.Dialog.Overlay;
 var DialogTitle = gui.Dialog.Title;
-var DialogDescription = gui.Dialog.Description;
-var DialogTrigger = gui.Dialog.Trigger;
-var DialogActionTrigger = gui.Dialog.Close;
-var DrawerPlacementContext = React30__namespace.createContext("right");
-var DrawerSizeContext = React30__namespace.createContext("md");
-var DrawerRoot = (props) => {
-  const {
-    children,
-    open,
-    defaultOpen,
-    onOpenChange,
-    placement = "right",
-    modal = true,
-    size = "md"
-  } = props;
-  const handleOpenChange = React30__namespace.useCallback((nextOpen) => {
-    onOpenChange?.({ open: nextOpen });
-  }, [onOpenChange]);
-  return /* @__PURE__ */ jsxRuntime.jsx(DrawerPlacementContext.Provider, { value: placement, children: /* @__PURE__ */ jsxRuntime.jsx(DrawerSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxRuntime.jsx(
-    RadixDialog__namespace.Root,
-    {
-      open,
-      defaultOpen,
-      onOpenChange: handleOpenChange,
-      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_CLASSES6 = {
-  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 = React30__namespace.forwardRef(
-  function DrawerContent2(props, ref) {
-    const { children, portalled = true, portalRef, offset: _offset, backdrop = true, className, ...rest } = props;
-    const placement = React30__namespace.useContext(DrawerPlacementContext);
-    const size = React30__namespace.useContext(DrawerSizeContext);
-    const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      backdrop && /* @__PURE__ */ jsxRuntime.jsx(
-        RadixDialog__namespace.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__ */ jsxRuntime.jsx(
-        RadixDialog__namespace.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_CLASSES6[placement]?.[size] ?? SIZE_CLASSES6.right?.md,
-            className
-          ),
-          ...rest,
-          children
-        }
-      )
-    ] });
-    if (portalled) {
-      return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Portal, { container: portalRef?.current ?? void 0, children: content });
-    }
-    return content;
-  }
-);
-var DrawerCloseTrigger = React30__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
-    }
-  ) });
-});
-var DrawerTrigger = (props) => {
-  const { asChild = true, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Trigger, { asChild, ...rest });
-};
-var DrawerHeader = React30__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 = React30__namespace.forwardRef(
-  function DrawerBody2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex-1 overflow-auto p-6", className), ...props });
-  }
-);
-var DrawerFooter = React30__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 DrawerDescription = RadixDialog__namespace.Description;
-var DrawerActionTrigger = RadixDialog__namespace.Close;
+var DialogDescription = gui.Dialog.Description;
+var DialogTrigger = gui.Dialog.Trigger;
+var DialogActionTrigger = gui.Dialog.Close;
 var apos = "\u2019";
 function upperFirst(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
 var ICONS = {};
-var EmptyState = React30__namespace.forwardRef(
+var EmptyState = React33__namespace.forwardRef(
   function EmptyState2(props, ref) {
     const { title, description, term, type = "query", icon, children, className, ...rest } = props;
     const titleContent = (() => {
@@ -2363,7 +3332,7 @@ function getComponentDisplayName(type) {
   if ("displayName" in type) return type.displayName;
   return void 0;
 }
-var Field = React30__namespace.forwardRef(
+var Field = React33__namespace.forwardRef(
   function Field2(props, ref) {
     const {
       label,
@@ -2415,14 +3384,14 @@ var Field = React30__namespace.forwardRef(
         }
       );
       const helperTextElement = helperText ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1.5 text-xs text-[var(--color-text-secondary,theme(colors.gray.400))]", children: helperText }) : null;
-      const child2 = React30__namespace.Children.only(children);
+      const child2 = React33__namespace.Children.only(children);
       const isInputGroup = getComponentDisplayName(child2.type) === "InputGroup";
       if (isInputGroup) {
-        const inputElement2 = React30__namespace.cloneElement(
-          React30__namespace.Children.only(child2.props.children),
+        const inputElement2 = React33__namespace.cloneElement(
+          React33__namespace.Children.only(child2.props.children),
           injectedProps2
         );
-        const groupInputElement = React30__namespace.cloneElement(
+        const groupInputElement = React33__namespace.cloneElement(
           child2,
           {},
           inputElement2,
@@ -2445,7 +3414,7 @@ var Field = React30__namespace.forwardRef(
           }
         );
       }
-      const inputElement = React30__namespace.cloneElement(child2, injectedProps2);
+      const inputElement = React33__namespace.cloneElement(child2, injectedProps2);
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
@@ -2467,8 +3436,8 @@ var Field = React30__namespace.forwardRef(
     const injectedProps = {
       size
     };
-    const child = React30__namespace.Children.only(children);
-    const clonedChild = React30__namespace.cloneElement(child, injectedProps);
+    const child = React33__namespace.Children.only(children);
+    const clonedChild = React33__namespace.cloneElement(child, injectedProps);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -2504,22 +3473,23 @@ var Field = React30__namespace.forwardRef(
     );
   }
 );
-var LEVEL_TAG = { "1": "h1", "2": "h2", "3": "h3" };
+var LEVEL_TAG = { "1": gui.H1, "2": gui.H2, "3": gui.H3 };
 var LEVEL_CLASSES = {
   "1": "text-[18px] leading-[24px] font-medium lg:text-[32px] lg:leading-[40px] lg:tracking-[-0.5px]",
   "2": "text-[16px] leading-[24px] font-medium lg:text-[24px] lg:leading-[32px]",
   "3": "text-[14px] leading-[20px] font-semibold lg:text-[18px] lg:leading-[24px] lg:font-medium"
 };
 var BASE_CLASSES4 = "font-heading text-heading";
-var Heading = React30__namespace.default.forwardRef(
+var Heading = React33__namespace.default.forwardRef(
   function Heading2({ level, className, mb, size: _size, style: styleProp, ...rest }, ref) {
-    const Tag3 = level ? LEVEL_TAG[level] : "h2";
+    const Tag3 = level ? LEVEL_TAG[level] : gui.H2;
     const levelClasses = level ? LEVEL_CLASSES[level] : void 0;
     const mergedStyle = mb !== void 0 ? { ...styleProp, marginBottom: typeof mb === "number" ? `${mb * 4}px` : mb } : styleProp;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Tag3,
       {
         ref,
+        unstyled: true,
         className: cn(BASE_CLASSES4, levelClasses, className),
         style: mergedStyle,
         ...rest
@@ -2597,7 +3567,7 @@ var ICON_SIZE_CLASSES = {
   md: "[&_svg]:size-5"
 };
 var SP2 = 4;
-var IconButton = React30__namespace.forwardRef(
+var IconButton = React33__namespace.forwardRef(
   function IconButton2(props, ref) {
     const {
       size,
@@ -2648,7 +3618,7 @@ var IconButton = React30__namespace.forwardRef(
         ref,
         size,
         disabled: !loadingSkeleton && (loading || disabled) || void 0,
-        render: _as ? React30__namespace.createElement(_as) : void 0,
+        render: _as ? React33__namespace.createElement(_as) : void 0,
         className: combinedClassName,
         style: mergedStyle,
         ...expanded ? { "data-expanded": true } : {},
@@ -2819,31 +3789,31 @@ function extractStyleProps(props) {
   }
   return { styleProps, rest };
 }
-var Image2 = React30__namespace.default.forwardRef(
-  function Image3(props, ref) {
+var Image = React33__namespace.default.forwardRef(
+  function Image2(props, ref) {
     const { fallback, src, onLoad, onError, skeletonWidth, skeletonHeight, alt, className, style: styleProp, ...allRest } = props;
     const { styleProps, rest: extraProps } = extractStyleProps(allRest);
-    const [loading, setLoading] = React30__namespace.default.useState(true);
-    const [error, setError] = React30__namespace.default.useState(false);
-    const handleLoadError = React30__namespace.default.useCallback((event) => {
+    const [loading, setLoading] = React33__namespace.default.useState(true);
+    const [error, setError] = React33__namespace.default.useState(false);
+    const handleLoadError = React33__namespace.default.useCallback((event) => {
       setError(true);
       setLoading(false);
       onError?.(event);
     }, [onError]);
-    const handleLoadSuccess = React30__namespace.default.useCallback((event) => {
+    const handleLoadSuccess = React33__namespace.default.useCallback((event) => {
       setLoading(false);
       onLoad?.(event);
     }, [onLoad]);
     const passthroughProps = allRest;
     if (!src && fallback) {
-      if (React30__namespace.default.isValidElement(fallback)) {
-        return React30__namespace.default.cloneElement(fallback, passthroughProps);
+      if (React33__namespace.default.isValidElement(fallback)) {
+        return React33__namespace.default.cloneElement(fallback, passthroughProps);
       }
       return fallback;
     }
     if (error) {
-      if (React30__namespace.default.isValidElement(fallback)) {
-        return React30__namespace.default.cloneElement(fallback, passthroughProps);
+      if (React33__namespace.default.isValidElement(fallback)) {
+        return React33__namespace.default.cloneElement(fallback, passthroughProps);
       }
       return fallback;
     }
@@ -2899,9 +3869,9 @@ var INPUT_VARIANT_CLASSES = {
   filled: "border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]",
   unstyled: "border-0 bg-transparent p-0 h-auto"
 };
-var Input = React30__namespace.default.forwardRef(
+var Input = React33__namespace.default.forwardRef(
   ({ size = "md", variant = "outline", className, onChange, onChangeText, ...rest }, ref) => {
-    const handleChange = React30__namespace.default.useCallback(
+    const handleChange = React33__namespace.default.useCallback(
       (event) => {
         onChange?.(event);
         onChangeText?.(event.target.value);
@@ -2909,9 +3879,10 @@ var Input = React30__namespace.default.forwardRef(
       [onChange, onChangeText]
     );
     return /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
+      gui.Input,
       {
         ref,
+        unstyled: true,
         className: cn(INPUT_BASE, INPUT_SIZE_CLASSES[size], INPUT_VARIANT_CLASSES[variant], className),
         ...rest,
         onChange: handleChange
@@ -2925,7 +3896,7 @@ function getComponentDisplayName2(type) {
   if ("displayName" in type) return type.displayName;
   return void 0;
 }
-var InputGroup = React30__namespace.forwardRef(
+var InputGroup = React33__namespace.forwardRef(
   function InputGroup2(props, ref) {
     const {
       startElement,
@@ -2938,11 +3909,11 @@ var InputGroup = React30__namespace.forwardRef(
       className,
       ...rest
     } = props;
-    const startElementRef = React30__namespace.useRef(null);
-    const endElementRef = React30__namespace.useRef(null);
-    const groupRef = React30__namespace.useRef(null);
-    const [inlinePaddings, setInlinePaddings] = React30__namespace.useState();
-    const calculateInlinePaddings = React30__namespace.useCallback(() => {
+    const startElementRef = React33__namespace.useRef(null);
+    const endElementRef = React33__namespace.useRef(null);
+    const groupRef = React33__namespace.useRef(null);
+    const [inlinePaddings, setInlinePaddings] = React33__namespace.useState();
+    const calculateInlinePaddings = React33__namespace.useCallback(() => {
       const startWidth = startElementRef.current?.getBoundingClientRect().width ?? 0;
       const endWidth = endElementRef.current?.getBoundingClientRect().width ?? 0;
       setInlinePaddings({
@@ -2950,7 +3921,7 @@ var InputGroup = React30__namespace.forwardRef(
         end: endWidth
       });
     }, []);
-    React30__namespace.useEffect(() => {
+    React33__namespace.useEffect(() => {
       if (!groupRef.current) return;
       let timeoutId;
       const intersectionObserver = new IntersectionObserver(
@@ -2970,7 +3941,7 @@ var InputGroup = React30__namespace.forwardRef(
         }
       };
     }, [calculateInlinePaddings]);
-    React30__namespace.useEffect(() => {
+    React33__namespace.useEffect(() => {
       calculateInlinePaddings();
       const resizeHandler = esToolkit.debounce(calculateInlinePaddings, 300);
       const resizeObserver = new ResizeObserver(resizeHandler);
@@ -2981,7 +3952,7 @@ var InputGroup = React30__namespace.forwardRef(
         resizeObserver.disconnect();
       };
     }, [calculateInlinePaddings]);
-    const combinedRef = React30__namespace.useCallback((node) => {
+    const combinedRef = React33__namespace.useCallback((node) => {
       groupRef.current = node;
       if (typeof ref === "function") {
         ref(node);
@@ -3010,11 +3981,11 @@ var InputGroup = React30__namespace.forwardRef(
               children: startElement
             }
           ),
-          React30__namespace.Children.map(children, (child) => {
+          React33__namespace.Children.map(children, (child) => {
             if (getComponentDisplayName2(child.type) !== "FieldInput") {
               return child;
             }
-            return React30__namespace.cloneElement(child, {
+            return React33__namespace.cloneElement(child, {
               ...startElement && { ps: startOffset ?? (inlinePaddings?.start ? `${inlinePaddings.start}px` : void 0) },
               ...endElement && { pe: endOffset ?? (inlinePaddings?.end ? `${inlinePaddings.end}px` : void 0) },
               // hide input value and placeholder for the first render
@@ -3040,262 +4011,6 @@ var InputGroup = React30__namespace.forwardRef(
   }
 );
 InputGroup.displayName = "InputGroup";
-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 = React30__namespace.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 = React30__namespace.useMemo(() => ({
-    side,
-    align,
-    sideOffset: mergedPositioning.offset?.mainAxis ?? 4,
-    alignOffset: mergedPositioning.offset?.crossAxis ?? 0
-  }), [side, align, mergedPositioning.offset?.mainAxis, mergedPositioning.offset?.crossAxis]);
-  const handleOpenChange = React30__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 = React30__namespace.forwardRef(function MenuTrigger2(props, ref) {
-  const { asChild = false, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Trigger, { asChild, ref, ...rest });
-});
-var MenuContent = React30__namespace.forwardRef(function MenuContent2(props, ref) {
-  const { portalled = true, portalRef, className, zIndex, minW, style, ...rest } = props;
-  const positioning = React30__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;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Portal, { container: portalRef?.current ?? void 0, children: content });
-});
-var MenuItem = React30__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,
-    {
-      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
-    }
-  );
-});
-var MenuItemText = React30__namespace.forwardRef(function MenuItemText2(props, ref) {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: cn("flex-1", className), ...rest });
-});
-React30__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 = React30__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
-    }
-  );
-});
-var MenuItemGroup = React30__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
-  ] });
-});
-var MenuArrow = React30__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
-    }
-  );
-});
-var MenuCheckboxItem = React30__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(lu.LuCheck, { className: "h-4 w-4" }) }) }),
-        children
-      ]
-    }
-  );
-});
-var MenuRadioItemGroup = React30__namespace.forwardRef(function MenuRadioItemGroup2(props, ref) {
-  const { value, onValueChange, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DropdownMenu__namespace.RadioGroup,
-    {
-      ref,
-      value,
-      onValueChange,
-      ...rest
-    }
-  );
-});
-var MenuRadioItem = React30__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(lu.LuCheck, { className: "h-4 w-4" }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children })
-      ]
-    }
-  );
-});
-React30__namespace.forwardRef(function MenuContextTrigger2(props, ref) {
-  const { asChild: _asChild, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, ...rest });
-});
-var MenuTriggerItem = React30__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,
-    {
-      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__ */ jsxRuntime.jsx("span", { className: "flex-1", children }),
-        /* @__PURE__ */ jsxRuntime.jsx(lu.LuChevronRight, { className: "h-4 w-4" })
-      ]
-    }
-  ) });
-});
 var INPUT_BASE2 = [
   "w-10 h-10",
   "text-center text-sm font-medium",
@@ -3310,7 +4025,7 @@ var INPUT_BASE2 = [
 ].join(" ");
 var INPUT_FILLED = "border-[var(--color-input-border)]";
 var INPUT_INVALID = "border-[var(--color-border-error)] hover:border-[var(--color-border-error)]";
-var PinInput = React30__namespace.forwardRef(
+var PinInput = React33__namespace.forwardRef(
   function PinInput2(props, ref) {
     const {
       count = 6,
@@ -3328,12 +4043,12 @@ var PinInput = React30__namespace.forwardRef(
       bgColor,
       className
     } = props;
-    const inputRefs = React30__namespace.useRef([]);
-    const values = React30__namespace.useMemo(
+    const inputRefs = React33__namespace.useRef([]);
+    const values = React33__namespace.useMemo(
       () => controlledValue ?? Array.from({ length: count }).fill(""),
       [controlledValue, count]
     );
-    const updateValue = React30__namespace.useCallback((index, char) => {
+    const updateValue = React33__namespace.useCallback((index, char) => {
       const next = [...values];
       next[index] = char;
       onValueChange?.({ value: next });
@@ -3341,11 +4056,11 @@ var PinInput = React30__namespace.forwardRef(
         onValueComplete?.({ value: next });
       }
     }, [values, onValueChange, onValueComplete]);
-    const focusInput = React30__namespace.useCallback((index) => {
+    const focusInput = React33__namespace.useCallback((index) => {
       const clamped = Math.max(0, Math.min(index, count - 1));
       inputRefs.current[clamped]?.focus();
     }, [count]);
-    const handleInput = React30__namespace.useCallback((index, e) => {
+    const handleInput = React33__namespace.useCallback((index, e) => {
       const target = e.currentTarget;
       const char = target.value.slice(-1);
       updateValue(index, char);
@@ -3353,7 +4068,7 @@ var PinInput = React30__namespace.forwardRef(
         focusInput(index + 1);
       }
     }, [count, updateValue, focusInput]);
-    const handleKeyDown = React30__namespace.useCallback((index, e) => {
+    const handleKeyDown = React33__namespace.useCallback((index, e) => {
       if (e.key === "Backspace") {
         if (values[index]) {
           updateValue(index, "");
@@ -3370,7 +4085,7 @@ var PinInput = React30__namespace.forwardRef(
         e.preventDefault();
       }
     }, [count, values, updateValue, focusInput]);
-    const handlePaste = React30__namespace.useCallback((e) => {
+    const handlePaste = React33__namespace.useCallback((e) => {
       e.preventDefault();
       const pasted = e.clipboardData.getData("text/plain").trim();
       if (!pasted) {
@@ -3387,18 +4102,18 @@ var PinInput = React30__namespace.forwardRef(
       }
       focusInput(Math.min(chars.length, count - 1));
     }, [count, values, onValueChange, onValueComplete, focusInput]);
-    const handleFocus = React30__namespace.useCallback((e) => {
+    const handleFocus = React33__namespace.useCallback((e) => {
       e.currentTarget.select();
     }, []);
-    const handleNoop = React30__namespace.useCallback(() => {
+    const handleNoop = React33__namespace.useCallback(() => {
     }, []);
-    const setInputRef = React30__namespace.useCallback((index) => (el) => {
+    const setInputRef = React33__namespace.useCallback((index) => (el) => {
       inputRefs.current[index] = el;
     }, []);
-    const onInputAtIndex = React30__namespace.useCallback((index) => (e) => {
+    const onInputAtIndex = React33__namespace.useCallback((index) => (e) => {
       handleInput(index, e);
     }, [handleInput]);
-    const onKeyDownAtIndex = React30__namespace.useCallback((index) => (e) => {
+    const onKeyDownAtIndex = React33__namespace.useCallback((index) => (e) => {
       handleKeyDown(index, e);
     }, [handleKeyDown]);
     const bgStyle = bgColor ? { backgroundColor: `var(--color-${bgColor.replace(/\./g, "-")})` } : void 0;
@@ -3459,7 +4174,7 @@ function parsePlacement2(placement) {
   }
   return { side, align };
 }
-var PositioningContext2 = React30__namespace.createContext({
+var PositioningContext2 = React33__namespace.createContext({
   side: "bottom",
   align: "start",
   sideOffset: 4,
@@ -3493,7 +4208,7 @@ var PopoverRoot = (props) => {
     }
   };
   const { side, align } = parsePlacement2(mergedPositioning.placement);
-  const positioningValue = React30__namespace.useMemo(() => ({
+  const positioningValue = React33__namespace.useMemo(() => ({
     side,
     align,
     sideOffset: mergedPositioning.offset?.mainAxis ?? 4,
@@ -3510,7 +4225,7 @@ var PopoverRoot = (props) => {
     autoFocus,
     closeOnInteractOutside
   ]);
-  const handleOpenChange = React30__namespace.useCallback((isOpen) => {
+  const handleOpenChange = React33__namespace.useCallback((isOpen) => {
     onOpenChange?.({ open: isOpen });
   }, [onOpenChange]);
   const placement = mergedPositioning.placement ?? "bottom-start";
@@ -3528,11 +4243,11 @@ var PopoverRoot = (props) => {
     }
   ) });
 };
-var PopoverTrigger = React30__namespace.forwardRef(function PopoverTrigger2(props, ref) {
+var PopoverTrigger = React33__namespace.forwardRef(function PopoverTrigger2(props, ref) {
   const { asChild = true, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(gui.Popover.Trigger, { asChild: asChild ? "except-style" : void 0, ref, ...rest });
 });
-var PopoverContent = React30__namespace.forwardRef(function PopoverContent2(props, ref) {
+var PopoverContent = React33__namespace.forwardRef(function PopoverContent2(props, ref) {
   const { portalled = true, portalRef: _portalRef, className, w, minW, maxW, paddingTop, style: styleProp, ...rest } = props;
   const resolvedW = typeof w === "object" ? w.base ?? w.lg : w;
   const contentStyle = {
@@ -3563,7 +4278,7 @@ var PopoverContent = React30__namespace.forwardRef(function PopoverContent2(prop
     }
   );
 });
-var PopoverArrow = React30__namespace.forwardRef(function PopoverArrow2(props, ref) {
+var PopoverArrow = React33__namespace.forwardRef(function PopoverArrow2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     gui.Popover.Arrow,
@@ -3575,7 +4290,7 @@ var PopoverArrow = React30__namespace.forwardRef(function PopoverArrow2(props, r
     }
   );
 });
-var PopoverCloseTrigger = React30__namespace.forwardRef(function PopoverCloseTrigger2(props, ref) {
+var PopoverCloseTrigger = React33__namespace.forwardRef(function PopoverCloseTrigger2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     gui.Popover.Close,
@@ -3589,14 +4304,14 @@ var PopoverCloseTrigger = React30__namespace.forwardRef(function PopoverCloseTri
     }
   );
 });
-var PopoverCloseTriggerWrapper = React30__namespace.forwardRef(function PopoverCloseTriggerWrapper2(props, ref) {
+var PopoverCloseTriggerWrapper = React33__namespace.forwardRef(function PopoverCloseTriggerWrapper2(props, ref) {
   const { disabled, children, ...rest } = props;
   if (disabled) {
     return children;
   }
   return /* @__PURE__ */ jsxRuntime.jsx(gui.Popover.Close, { ref, ...rest, asChild: true, children });
 });
-var PopoverBody = React30__namespace.forwardRef(function PopoverBody2(props, ref) {
+var PopoverBody = React33__namespace.forwardRef(function PopoverBody2(props, ref) {
   const {
     className,
     style: styleProp,
@@ -3634,7 +4349,7 @@ var PopoverBody = React30__namespace.forwardRef(function PopoverBody2(props, ref
     }
   );
 });
-var PopoverHeader = React30__namespace.forwardRef(function PopoverHeader2(props, ref) {
+var PopoverHeader = React33__namespace.forwardRef(function PopoverHeader2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -3645,7 +4360,7 @@ var PopoverHeader = React30__namespace.forwardRef(function PopoverHeader2(props,
     }
   );
 });
-var PopoverFooter = React30__namespace.forwardRef(function PopoverFooter2(props, ref) {
+var PopoverFooter = React33__namespace.forwardRef(function PopoverFooter2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -3656,7 +4371,7 @@ var PopoverFooter = React30__namespace.forwardRef(function PopoverFooter2(props,
     }
   );
 });
-var PopoverTitle = React30__namespace.forwardRef(function PopoverTitle2(props, ref) {
+var PopoverTitle = React33__namespace.forwardRef(function PopoverTitle2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "h3",
@@ -3667,7 +4382,7 @@ var PopoverTitle = React30__namespace.forwardRef(function PopoverTitle2(props, r
     }
   );
 });
-var PopoverDescription = React30__namespace.forwardRef(function PopoverDescription2(props, ref) {
+var PopoverDescription = React33__namespace.forwardRef(function PopoverDescription2(props, ref) {
   const { className, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "p",
@@ -3689,7 +4404,7 @@ function normalizeValue(value, min, max) {
   if (max <= min) return 0;
   return Math.round((value - min) / (max - min) * 100);
 }
-var Progress = React30__namespace.forwardRef(
+var Progress = React33__namespace.forwardRef(
   function Progress2(props, ref) {
     const {
       value,
@@ -3729,10 +4444,11 @@ var Progress = React30__namespace.forwardRef(
         style: rootStyle,
         ...rest,
         children: /* @__PURE__ */ jsxRuntime.jsx(
-          RadixProgress__namespace.Root,
+          gui.Progress,
           {
             value: percent,
             max: 100,
+            unstyled: true,
             className: cn(
               "w-full overflow-hidden rounded-full",
               "bg-[var(--color-progress-track)]",
@@ -3741,14 +4457,15 @@ var Progress = React30__namespace.forwardRef(
             ),
             style: trackStyle,
             children: /* @__PURE__ */ jsxRuntime.jsx(
-              RadixProgress__namespace.Indicator,
+              gui.Progress.Indicator,
               {
+                unstyled: true,
+                transition: "slow",
                 className: cn(
-                  "h-full rounded-full transition-transform duration-500 ease-out",
+                  "h-full rounded-full",
                   !color && "bg-[var(--color-progress-indicator)]"
                 ),
                 style: {
-                  width: `${percent}%`,
                   ...color && { backgroundColor: `var(--color-${color.replace(".", "-")}, ${color})` }
                 }
               }
@@ -3766,12 +4483,12 @@ var SIZE_MAP = {
   lg: { size: 48, thickness: 7, textClass: "text-sm" },
   xl: { size: 64, thickness: 8, textClass: "text-sm" }
 };
-var Ctx = React30__namespace.createContext({
+var Ctx = React33__namespace.createContext({
   value: 0,
   size: "md",
   colorPalette: "blue"
 });
-var ProgressCircleRoot = React30__namespace.forwardRef(function ProgressCircleRoot2(props, ref) {
+var ProgressCircleRoot = React33__namespace.forwardRef(function ProgressCircleRoot2(props, ref) {
   const {
     value = 0,
     size = "md",
@@ -3780,7 +4497,7 @@ var ProgressCircleRoot = React30__namespace.forwardRef(function ProgressCircleRo
     children,
     ...rest
   } = props;
-  const ctx = React30__namespace.useMemo(
+  const ctx = React33__namespace.useMemo(
     () => ({ value: value ?? null, size, colorPalette }),
     [value, size, colorPalette]
   );
@@ -3798,9 +4515,9 @@ var ProgressCircleRoot = React30__namespace.forwardRef(function ProgressCircleRo
     }
   ) });
 });
-var ProgressCircleRing = React30__namespace.forwardRef(function ProgressCircleRing2(props, ref) {
+var ProgressCircleRing = React33__namespace.forwardRef(function ProgressCircleRing2(props, ref) {
   const { trackColor, cap, color, className, ...rest } = props;
-  const { value, size: sizeKey } = React30__namespace.useContext(Ctx);
+  const { value, size: sizeKey } = React33__namespace.useContext(Ctx);
   const { size, thickness } = SIZE_MAP[sizeKey];
   const radius = size / 2 - thickness / 2;
   const circumference = 2 * Math.PI * radius;
@@ -3855,9 +4572,9 @@ var ProgressCircleRing = React30__namespace.forwardRef(function ProgressCircleRi
     }
   );
 });
-var ProgressCircleValueText = React30__namespace.forwardRef(function ProgressCircleValueText2(props, ref) {
+var ProgressCircleValueText = React33__namespace.forwardRef(function ProgressCircleValueText2(props, ref) {
   const { className, children, ...rest } = props;
-  const { value, size: sizeKey } = React30__namespace.useContext(Ctx);
+  const { value, size: sizeKey } = React33__namespace.useContext(Ctx);
   const { textClass } = SIZE_MAP[sizeKey];
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -3901,8 +4618,8 @@ var SIZE_CLASSES8 = {
     label: "text-base"
   }
 };
-var RadioSizeContext = React30__namespace.createContext("md");
-var RadioGroupBase = React30__namespace.forwardRef(
+var RadioSizeContext = React33__namespace.createContext("md");
+var RadioGroupBase = React33__namespace.forwardRef(
   function RadioGroup2(props, ref) {
     const {
       children,
@@ -3911,7 +4628,8 @@ var RadioGroupBase = React30__namespace.forwardRef(
       disabled = false,
       readOnly = false,
       orientation = "vertical",
-      loop = true,
+      // `loop` was a Radix-only knob; gui's roving focus always wraps.
+      loop: _loop = true,
       defaultValue,
       value,
       onValueChange,
@@ -3919,7 +4637,7 @@ var RadioGroupBase = React30__namespace.forwardRef(
       className,
       ...rest
     } = props;
-    const handleValueChange = React30__namespace.useCallback(
+    const handleValueChange = React33__namespace.useCallback(
       (nextValue) => {
         if (readOnly) return;
         onValueChange?.({ value: nextValue });
@@ -3927,14 +4645,14 @@ var RadioGroupBase = React30__namespace.forwardRef(
       [readOnly, onValueChange]
     );
     return /* @__PURE__ */ jsxRuntime.jsx(RadioSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxRuntime.jsx(
-      RadixRadioGroup__namespace.Root,
+      gui.RadioGroup,
       {
         ref,
+        unstyled: true,
         name,
         required,
         disabled: disabled || readOnly,
         orientation,
-        loop,
         defaultValue,
         value: value ?? void 0,
         onValueChange: handleValueChange,
@@ -3952,10 +4670,10 @@ var RadioGroupBase = React30__namespace.forwardRef(
 var RadioGroup3 = RadioGroupBase;
 var NOOP2 = () => {
 };
-var RadioBase = React30__namespace.forwardRef(
+var RadioBase = React33__namespace.forwardRef(
   function Radio(props, ref) {
     const { children, inputProps, rootRef, value, disabled, className, ...rest } = props;
-    const size = React30__namespace.useContext(RadioSizeContext);
+    const size = React33__namespace.useContext(RadioSizeContext);
     const sizeClasses2 = SIZE_CLASSES8[size];
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "label",
@@ -3971,8 +4689,9 @@ var RadioBase = React30__namespace.forwardRef(
         ...rest,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            RadixRadioGroup__namespace.Item,
+            gui.RadioGroup.Item,
             {
+              unstyled: true,
               value,
               disabled,
               className: cn(
@@ -3984,8 +4703,9 @@ var RadioBase = React30__namespace.forwardRef(
                 sizeClasses2.control
               ),
               children: /* @__PURE__ */ jsxRuntime.jsx(
-                RadixRadioGroup__namespace.Indicator,
+                gui.RadioGroup.Indicator,
                 {
+                  unstyled: true,
                   className: cn(
                     "block rounded-full bg-gray-800 dark:bg-white",
                     sizeClasses2.indicator
@@ -4017,23 +4737,23 @@ var RadioBase = React30__namespace.forwardRef(
 var Radio2 = RadioBase;
 var StarFilledIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) });
 var StarOutlineIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z", strokeWidth: "1.5" }) });
-var Rating = React30__namespace.forwardRef(
+var Rating = React33__namespace.forwardRef(
   function Rating2(props, ref) {
     const { count = 5, label: labelProp, defaultValue = 0, onValueChange, readOnly, className, ...rest } = props;
-    const [value, setValue] = React30__namespace.useState(defaultValue);
-    const [hoveredIndex, setHoveredIndex] = React30__namespace.useState(-1);
+    const [value, setValue] = React33__namespace.useState(defaultValue);
+    const [hoveredIndex, setHoveredIndex] = React33__namespace.useState(-1);
     const highlightedIndex = hoveredIndex >= 0 && !readOnly ? hoveredIndex + 1 : value;
     const label = Array.isArray(labelProp) ? labelProp[highlightedIndex - 1] : labelProp;
-    const handleClick = React30__namespace.useCallback((index) => () => {
+    const handleClick = React33__namespace.useCallback((index) => () => {
       if (readOnly) return;
       setValue(index);
       onValueChange?.({ value: index });
     }, [readOnly, onValueChange]);
-    const handleMouseEnter = React30__namespace.useCallback((index) => () => {
+    const handleMouseEnter = React33__namespace.useCallback((index) => () => {
       if (readOnly) return;
       setHoveredIndex(index);
     }, [readOnly]);
-    const handleMouseLeave = React30__namespace.useCallback(() => {
+    const handleMouseLeave = React33__namespace.useCallback(() => {
       setHoveredIndex(-1);
     }, []);
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("inline-flex items-center gap-1", className), ...rest, children: [
@@ -4067,8 +4787,8 @@ function createListCollection(config2) {
 var ArrowIcon2 = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7.5 15L12.5 10L7.5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
 var CheckIcon2 = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16.667 5L7.5 14.167 3.333 10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
 function FilterInput({ placeholder, initialValue = "", onChange }) {
-  const [value, setValue] = React30__namespace.useState(initialValue);
-  const handleChange = React30__namespace.useCallback((e) => {
+  const [value, setValue] = React33__namespace.useState(initialValue);
+  const handleChange = React33__namespace.useCallback((e) => {
     setValue(e.target.value);
     onChange?.(e.target.value);
   }, [onChange]);
@@ -4087,15 +4807,15 @@ function FilterInput({ placeholder, initialValue = "", onChange }) {
     }
   );
 }
-var SelectInternalContext = React30__namespace.createContext(null);
+var SelectInternalContext = React33__namespace.createContext(null);
 function useSelectInternalContext() {
-  const ctx = React30__namespace.useContext(SelectInternalContext);
+  const ctx = React33__namespace.useContext(SelectInternalContext);
   if (!ctx) {
     throw new Error("Select compound components must be rendered inside <SelectRoot>");
   }
   return ctx;
 }
-var SelectRoot = React30__namespace.forwardRef(
+var SelectRoot = React33__namespace.forwardRef(
   function SelectRoot2(props, ref) {
     const {
       children,
@@ -4126,21 +4846,21 @@ var SelectRoot = React30__namespace.forwardRef(
       hideFrom: _hideFrom
     } = props;
     const collection = collectionProp ?? createListCollection({ items: [] });
-    const [internalValue, setInternalValue] = React30__namespace.useState(defaultValueArr ?? []);
+    const [internalValue, setInternalValue] = React33__namespace.useState(defaultValueArr ?? []);
     const currentValue = valueProp ?? internalValue;
-    const selectedItems = React30__namespace.useMemo(() => {
+    const selectedItems = React33__namespace.useMemo(() => {
       return currentValue.map((v) => collection.items.find((item) => item.value === v)).filter(Boolean);
     }, [currentValue, collection.items]);
-    const [open, setOpen] = React30__namespace.useState(defaultOpen ?? false);
+    const [open, setOpen] = React33__namespace.useState(defaultOpen ?? false);
     const isOpen = openProp ?? open;
-    const handleOpenChange = React30__namespace.useCallback((nextOpen) => {
+    const handleOpenChange = React33__namespace.useCallback((nextOpen) => {
       setOpen(nextOpen);
       onOpenChange?.(nextOpen);
       if (!nextOpen) {
         onInteractOutside?.();
       }
     }, [onOpenChange, onInteractOutside]);
-    const handleRadixValueChange = React30__namespace.useCallback((radixValue) => {
+    const handleRadixValueChange = React33__namespace.useCallback((radixValue) => {
       const nextArr = [radixValue];
       if (!valueProp) {
         setInternalValue(nextArr);
@@ -4148,7 +4868,7 @@ var SelectRoot = React30__namespace.forwardRef(
       const items = collection.items.filter((item) => nextArr.includes(item.value));
       onValueChangeProp?.({ value: nextArr, items });
     }, [valueProp, collection.items, onValueChangeProp]);
-    const ctxValue = React30__namespace.useMemo(() => ({
+    const ctxValue = React33__namespace.useMemo(() => ({
       value: currentValue,
       selectedItems,
       collection,
@@ -4168,7 +4888,7 @@ var SelectRoot = React30__namespace.forwardRef(
       if (typeof v === "string") return v;
       return v.base ?? v.lg ?? Object.values(v)[0];
     };
-    const inlineStyle = React30__namespace.useMemo(() => {
+    const inlineStyle = React33__namespace.useMemo(() => {
       const s = { ...style };
       const rw = resolveVal(w);
       if (rw) s.width = rw;
@@ -4206,7 +4926,7 @@ var SelectRoot = React30__namespace.forwardRef(
     ) });
   }
 );
-var SelectControl = React30__namespace.forwardRef(
+var SelectControl = React33__namespace.forwardRef(
   function SelectControl2(props, ref) {
     const { children, noIndicator, triggerProps, loading, defaultValue } = props;
     const ctx = useSelectInternalContext();
@@ -4243,11 +4963,11 @@ var SelectControl = React30__namespace.forwardRef(
     return trigger;
   }
 );
-var SelectClearTrigger = React30__namespace.forwardRef(
+var SelectClearTrigger = React33__namespace.forwardRef(
   function SelectClearTrigger2(props, ref) {
     const { className, ...rest } = props;
     const ctx = useSelectInternalContext();
-    const handleClick = React30__namespace.useCallback(() => {
+    const handleClick = React33__namespace.useCallback(() => {
       ctx.onValueChange({ value: [], items: [] });
     }, [ctx]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4264,7 +4984,7 @@ var SelectClearTrigger = React30__namespace.forwardRef(
     );
   }
 );
-var SelectContent = React30__namespace.forwardRef(
+var SelectContent = React33__namespace.forwardRef(
   function SelectContent2(props, ref) {
     const { portalled = true, portalRef, children, className, ...rest } = props;
     const content = /* @__PURE__ */ jsxRuntime.jsx(
@@ -4291,7 +5011,7 @@ var SelectContent = React30__namespace.forwardRef(
     return content;
   }
 );
-var SelectItem = React30__namespace.forwardRef(
+var SelectItem = React33__namespace.forwardRef(
   function SelectItem2(props, ref) {
     const { item, children, className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4319,7 +5039,7 @@ var SelectItem = React30__namespace.forwardRef(
     );
   }
 );
-var SelectValueText = React30__namespace.forwardRef(
+var SelectValueText = React33__namespace.forwardRef(
   function SelectValueText2(props, ref) {
     const { children, size, required, invalid, errorText, mode, className, style, placeholder: placeholderProp, ...rest } = props;
     const ctx = useSelectInternalContext();
@@ -4375,7 +5095,7 @@ var SelectValueText = React30__namespace.forwardRef(
     );
   }
 );
-var SelectItemGroup = React30__namespace.forwardRef(
+var SelectItemGroup = React33__namespace.forwardRef(
   function SelectItemGroup2(props, ref) {
     const { children, label, className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsxs(RadixSelect__namespace.Group, { ref, className: cn("py-1", className), ...rest, children: [
@@ -4386,7 +5106,7 @@ var SelectItemGroup = React30__namespace.forwardRef(
 );
 var SelectLabel = RadixSelect__namespace.Label;
 var SelectItemText = RadixSelect__namespace.ItemText;
-var Select = React30__namespace.forwardRef((props, ref) => {
+var Select = React33__namespace.forwardRef((props, ref) => {
   const { collection, placeholder, portalled = true, loading, errorText, contentProps, contentHeader, itemFilter, mode, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     SelectRoot,
@@ -4408,7 +5128,7 @@ var Select = React30__namespace.forwardRef((props, ref) => {
         ) }),
         /* @__PURE__ */ jsxRuntime.jsxs(SelectContent, { portalled, ...contentProps, children: [
           contentHeader,
-          collection.items.filter(itemFilter ?? (() => true)).map((item) => /* @__PURE__ */ jsxRuntime.jsxs(React30__namespace.Fragment, { children: [
+          collection.items.filter(itemFilter ?? (() => true)).map((item) => /* @__PURE__ */ jsxRuntime.jsxs(React33__namespace.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { item, children: item.renderLabel ? item.renderLabel("item") : item.label }),
             item.afterElement
           ] }, item.value))
@@ -4417,19 +5137,19 @@ var Select = React30__namespace.forwardRef((props, ref) => {
     }
   );
 });
-var SelectAsync = React30__namespace.forwardRef((props, ref) => {
+var SelectAsync = React33__namespace.forwardRef((props, ref) => {
   const { placeholder, portalled = true, loading, loadOptions, extraControls, onValueChange, errorText, mode, contentHeader, ...rest } = props;
-  const [collection, setCollection] = React30__namespace.useState(createListCollection({ items: [] }));
-  const [inputValue, setInputValue] = React30__namespace.useState("");
-  const [value, setValue] = React30__namespace.useState([]);
+  const [collection, setCollection] = React33__namespace.useState(createListCollection({ items: [] }));
+  const [inputValue, setInputValue] = React33__namespace.useState("");
+  const [value, setValue] = React33__namespace.useState([]);
   const debouncedInputValue = usehooks.useDebounce(inputValue, 300);
-  React30__namespace.useEffect(() => {
+  React33__namespace.useEffect(() => {
     loadOptions(debouncedInputValue, value).then(setCollection);
   }, [debouncedInputValue, loadOptions, value]);
-  const handleFilterChange = React30__namespace.useCallback((val) => {
+  const handleFilterChange = React33__namespace.useCallback((val) => {
     setInputValue(val);
   }, []);
-  const handleValueChange = React30__namespace.useCallback(({ value: v, items }) => {
+  const handleValueChange = React33__namespace.useCallback(({ value: v, items }) => {
     setValue(v);
     onValueChange?.({ value: v, items });
   }, [onValueChange]);
@@ -4488,13 +5208,14 @@ var VERTICAL_SIZE_CLASSES = {
   md: "border-l-2",
   lg: "border-l-[3px]"
 };
-var Separator2 = React30__namespace.default.forwardRef(
+var Separator2 = React33__namespace.default.forwardRef(
   function Separator3({ orientation = "horizontal", variant = "solid", size = "sm", className, ...rest }, ref) {
     const isVertical = orientation === "vertical";
     return /* @__PURE__ */ jsxRuntime.jsx(
-      "hr",
+      gui.Separator,
       {
         ref,
+        vertical: isVertical,
         role: "separator",
         "aria-orientation": orientation,
         className: cn(
@@ -4510,9 +5231,7 @@ var Separator2 = React30__namespace.default.forwardRef(
     );
   }
 );
-var THUMB_SIZE = 20;
-var TRACK_HEIGHT = 6;
-var Slider = React30__namespace.forwardRef(
+var Slider = React33__namespace.forwardRef(
   function Slider2(props, ref) {
     const {
       marks: marksProp,
@@ -4524,7 +5243,7 @@ var Slider = React30__namespace.forwardRef(
       max = 100,
       step,
       disabled,
-      orientation,
+      orientation = "horizontal",
       name,
       onValueChange,
       onValueCommit,
@@ -4536,6 +5255,14 @@ var Slider = React30__namespace.forwardRef(
       return mark;
     });
     const hasMarkLabel = Boolean(marks?.some((mark) => mark.label));
+    const latest = React33__namespace.useRef(value ?? defaultValue ?? []);
+    const handleValueChange = React33__namespace.useCallback((next) => {
+      latest.current = next;
+      onValueChange?.(next);
+    }, [onValueChange]);
+    const handleSlideEnd = React33__namespace.useCallback(() => {
+      onValueCommit?.(latest.current);
+    }, [onValueCommit]);
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1", className), children: [
       label && !showValue && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-text-secondary", children: label }),
       label && showValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
@@ -4543,9 +5270,10 @@ var Slider = React30__namespace.forwardRef(
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-text-secondary", children: (value ?? defaultValue ?? [])?.join(", ") })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(
-        RadixSlider__namespace.Root,
+        gui.Slider,
         {
           ref,
+          unstyled: true,
           className: cn(
             "relative flex w-full touch-none select-none items-center",
             hasMarkLabel && "mb-6"
@@ -4558,24 +5286,30 @@ var Slider = React30__namespace.forwardRef(
           disabled,
           orientation,
           name,
-          onValueChange,
-          onValueCommit,
+          onValueChange: handleValueChange,
+          onSlideEnd: handleSlideEnd,
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              RadixSlider__namespace.Track,
+              gui.Slider.Track,
               {
-                className: cn(
-                  "relative grow rounded-full bg-border-divider",
-                  `h-[${TRACK_HEIGHT}px]`
-                ),
-                children: /* @__PURE__ */ jsxRuntime.jsx(RadixSlider__namespace.Range, { className: "absolute h-full rounded-full bg-link-primary" })
+                unstyled: true,
+                className: "relative grow h-1.5 rounded-full bg-border-divider",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  gui.Slider.TrackActive,
+                  {
+                    unstyled: true,
+                    className: "absolute h-full rounded-full bg-link-primary"
+                  }
+                )
               }
             ),
             resolvedValue?.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
-              RadixSlider__namespace.Thumb,
+              gui.Slider.Thumb,
               {
+                index,
+                unstyled: true,
                 className: cn(
-                  `block h-[${THUMB_SIZE}px] w-[${THUMB_SIZE}px]`,
+                  "block h-5 w-5",
                   "rounded-full border-2 border-link-primary bg-white",
                   "shadow-sm transition-colors",
                   "hover:border-link-primary-hover",
@@ -4617,21 +5351,21 @@ var NOOP3 = () => {
 var SIZE_CLASSES9 = {
   sm: {
     root: "h-4 w-7",
-    thumb: "h-3 w-3 data-[state=checked]:translate-x-3",
+    thumb: "h-3 w-3",
     label: "text-xs"
   },
   md: {
     root: "h-5 w-9",
-    thumb: "h-4 w-4 data-[state=checked]:translate-x-4",
+    thumb: "h-4 w-4",
     label: "text-sm"
   },
   lg: {
     root: "h-6 w-11",
-    thumb: "h-5 w-5 data-[state=checked]:translate-x-5",
+    thumb: "h-5 w-5",
     label: "text-base"
   }
 };
-var SwitchBase = React30__namespace.forwardRef(
+var SwitchBase = React33__namespace.forwardRef(
   function Switch(props, ref) {
     const {
       inputProps,
@@ -4650,17 +5384,15 @@ var SwitchBase = React30__namespace.forwardRef(
       className,
       ...rest
     } = props;
-    const [internalChecked, setInternalChecked] = React30__namespace.useState(defaultChecked ?? false);
+    const [internalChecked, setInternalChecked] = React33__namespace.useState(defaultChecked ?? false);
     const isControlled = checkedProp !== void 0;
     const checkedState = isControlled ? checkedProp : internalChecked;
-    const handleCheckedChange = React30__namespace.useCallback(
+    const handleCheckedChange = React33__namespace.useCallback(
       (nextChecked) => {
         if (!isControlled) {
           setInternalChecked(nextChecked);
         }
-        if (onCheckedChange) {
-          onCheckedChange({ checked: nextChecked });
-        }
+        onCheckedChange?.({ checked: nextChecked });
       },
       [isControlled, onCheckedChange]
     );
@@ -4681,8 +5413,9 @@ var SwitchBase = React30__namespace.forwardRef(
         ...rest,
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
-            RadixSwitch__namespace.Root,
+            gui.Switch,
             {
+              unstyled: true,
               checked: checkedState,
               onCheckedChange: handleCheckedChange,
               disabled,
@@ -4697,12 +5430,13 @@ var SwitchBase = React30__namespace.forwardRef(
               children: [
                 trackLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 flex items-center justify-center text-[8px] font-bold text-white pointer-events-none", children: checkedState ? trackLabel.on : trackLabel.off }),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  RadixSwitch__namespace.Thumb,
+                  gui.Switch.Thumb,
                   {
+                    unstyled: true,
+                    "data-thumb": true,
+                    transition: "quicker",
                     className: cn(
                       "block rounded-full bg-white shadow-sm",
-                      "transition-transform duration-200",
-                      "translate-x-0.5",
                       sizeClasses2.thumb
                     ),
                     children: thumbLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center justify-center h-full w-full text-[8px]", children: checkedState ? thumbLabel.on : thumbLabel.off })
@@ -4918,7 +5652,7 @@ function resolveResponsive(value) {
   }
   return void 0;
 }
-var TableRoot = React30__namespace.forwardRef(
+var TableRoot = React33__namespace.forwardRef(
   function TableRoot2(props, ref) {
     const { className, style: styleProp, children, ...other } = props;
     const rawMinW = other.minWidth ?? other.minW;
@@ -4941,7 +5675,7 @@ var TableRoot = React30__namespace.forwardRef(
     );
   }
 );
-var TableHeader = React30__namespace.forwardRef(
+var TableHeader = React33__namespace.forwardRef(
   function TableHeader2(props, ref) {
     const { className, style: styleProp, children, ...other } = props;
     const { style: extracted, rest } = extractStyles(other);
@@ -4958,7 +5692,7 @@ var TableHeader = React30__namespace.forwardRef(
     );
   }
 );
-var TableBody = React30__namespace.forwardRef(
+var TableBody = React33__namespace.forwardRef(
   function TableBody2(props, ref) {
     const { className, style: styleProp, children, ...other } = props;
     const { style: extracted, rest } = extractStyles(other);
@@ -4975,7 +5709,7 @@ var TableBody = React30__namespace.forwardRef(
     );
   }
 );
-var TableRow = React30__namespace.forwardRef(
+var TableRow = React33__namespace.forwardRef(
   function TableRow2(props, ref) {
     const { className, style: styleProp, children, ...other } = props;
     const { style: extracted, rest } = extractStyles(other);
@@ -4992,7 +5726,7 @@ var TableRow = React30__namespace.forwardRef(
     );
   }
 );
-var TableCell = React30__namespace.forwardRef(
+var TableCell = React33__namespace.forwardRef(
   function TableCell2(props, ref) {
     const { isNumeric, className, style: styleProp, children, ...other } = props;
     const { style: extracted, rest } = extractStyles(other);
@@ -5013,7 +5747,7 @@ var TableCell = React30__namespace.forwardRef(
     );
   }
 );
-var TableColumnHeader = React30__namespace.forwardRef(
+var TableColumnHeader = React33__namespace.forwardRef(
   function TableColumnHeader2(props, ref) {
     const { isNumeric, className, style: styleProp, children, ...other } = props;
     const { style: extracted, rest } = extractStyles(other);
@@ -5040,7 +5774,7 @@ var TableColumnHeader = React30__namespace.forwardRef(
 );
 var TableColumnHeaderSortable = (props) => {
   const { sortField, sortValue, onSortToggle, children, disabled, indicatorPosition = "left", contentAfter, ...rest } = props;
-  const handleSortToggle = React30__namespace.useCallback(() => {
+  const handleSortToggle = React33__namespace.useCallback(() => {
     onSortToggle(sortField);
   }, [onSortToggle, sortField]);
   const isActive = sortValue.includes(sortField);
@@ -5066,16 +5800,16 @@ var TableColumnHeaderSortable = (props) => {
 var ACTION_BAR_SHADOW = "0 4px 4px -4px rgb(0 0 0 / 10%), 0 2px 4px -4px rgb(0 0 0 / 6%)";
 var TableHeaderSticky = (props) => {
   const { top, children, className, style: styleProp, ...rest } = props;
-  const ref = React30__namespace.useRef(null);
-  const [isStuck, setIsStuck] = React30__namespace.useState(false);
-  const handleScroll = React30__namespace.useCallback(() => {
+  const ref = React33__namespace.useRef(null);
+  const [isStuck, setIsStuck] = React33__namespace.useState(false);
+  const handleScroll = React33__namespace.useCallback(() => {
     if (Number(ref.current?.getBoundingClientRect().y) <= (Number(top) || 0)) {
       setIsStuck(true);
     } else {
       setIsStuck(false);
     }
   }, [top]);
-  React30__namespace.useEffect(() => {
+  React33__namespace.useEffect(() => {
     const throttledHandleScroll = esToolkit.throttle(handleScroll, 300);
     window.addEventListener("scroll", throttledHandleScroll);
     return () => {
@@ -5097,7 +5831,7 @@ var TableHeaderSticky = (props) => {
     }
   );
 };
-var TableCaption = React30__namespace.forwardRef(
+var TableCaption = React33__namespace.forwardRef(
   function TableCaption2(props, ref) {
     const { className, style: styleProp, children, ...other } = props;
     const { style: extracted, rest } = extractStyles(other);
@@ -5114,7 +5848,7 @@ var TableCaption = React30__namespace.forwardRef(
     );
   }
 );
-var TableFooter = React30__namespace.forwardRef(
+var TableFooter = React33__namespace.forwardRef(
   function TableFooter2(props, ref) {
     const { className, style: styleProp, children, ...other } = props;
     const { style: extracted, rest } = extractStyles(other);
@@ -5131,7 +5865,7 @@ var TableFooter = React30__namespace.forwardRef(
     );
   }
 );
-var TableScrollWrapper = React30__namespace.forwardRef(
+var TableScrollWrapper = React33__namespace.forwardRef(
   function TableScrollWrapper2(props, ref) {
     const { className, children, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -5150,7 +5884,7 @@ var ROOT_SIZE_CLASSES = {
   md: "[--tabs-height:2.5rem] [--tabs-content-padding:1.5rem]",
   free: ""
 };
-var TabsRoot = React30__namespace.forwardRef(
+var TabsRoot = React33__namespace.forwardRef(
   function TabsRoot2(props, ref) {
     const {
       variant = "solid",
@@ -5162,7 +5896,7 @@ var TabsRoot = React30__namespace.forwardRef(
       className,
       ...rest
     } = props;
-    const handleValueChange = React30__namespace.useCallback(
+    const handleValueChange = React33__namespace.useCallback(
       (value) => {
         if (!onValueChange) return;
         onValueChange({ value });
@@ -5187,7 +5921,7 @@ var TabsRoot = React30__namespace.forwardRef(
     );
   }
 );
-var TabsList = React30__namespace.forwardRef(
+var TabsList = React33__namespace.forwardRef(
   function TabsList2(props, ref) {
     const {
       className,
@@ -5241,7 +5975,7 @@ var TRIGGER_VARIANT_CLASSES = {
   segmented: "bg-transparent text-text-primary border-2 border-solid border-selected-control-bg hover:text-hover data-[state=active]:text-selected-control-text data-[state=active]:bg-selected-control-bg data-[state=active]:border-selected-control-bg data-[state=active]:hover:text-selected-control-text",
   unstyled: ""
 };
-var TabsTrigger = React30__namespace.forwardRef(
+var TabsTrigger = React33__namespace.forwardRef(
   function TabsTrigger2(props, ref) {
     const {
       className,
@@ -5261,7 +5995,7 @@ var TabsTrigger = React30__namespace.forwardRef(
       visibility: _visibility,
       ...rest
     } = props;
-    const internalRef = React30__namespace.useRef(null);
+    const internalRef = React33__namespace.useRef(null);
     const mergedRef = useMergedRef(ref, internalRef);
     const { variant, size, fitted } = useTabsContext(internalRef);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -5281,7 +6015,7 @@ var TabsTrigger = React30__namespace.forwardRef(
     );
   }
 );
-var TabsContent = React30__namespace.forwardRef(
+var TabsContent = React33__namespace.forwardRef(
   function TabsContent2(props, ref) {
     const { className, padding: _padding, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -5315,8 +6049,8 @@ var TabsCounter = ({ count }) => {
   );
 };
 function useTabsContext(triggerRef) {
-  const [ctx, setCtx] = React30__namespace.useState({ variant: "solid", size: "md", fitted: false });
-  React30__namespace.useEffect(() => {
+  const [ctx, setCtx] = React33__namespace.useState({ variant: "solid", size: "md", fitted: false });
+  React33__namespace.useEffect(() => {
     const el = triggerRef.current;
     if (!el) return;
     const root = el.closest("[data-variant]");
@@ -5330,7 +6064,7 @@ function useTabsContext(triggerRef) {
   return ctx;
 }
 function useMergedRef(...refs) {
-  return React30__namespace.useCallback(
+  return React33__namespace.useCallback(
     (instance) => {
       for (const ref of refs) {
         if (!ref) continue;
@@ -5368,7 +6102,7 @@ var TAG_SELECTED_CLASSES = [
   "hover:opacity-76"
 ].join(" ");
 var TAG_DISABLED_CLASSES = "opacity-40 pointer-events-none cursor-not-allowed";
-var Tag = React30__namespace.forwardRef(
+var Tag = React33__namespace.forwardRef(
   function Tag2(props, ref) {
     const {
       variant,
@@ -5455,9 +6189,9 @@ var TEXTAREA_VARIANT_CLASSES = {
   filled: "border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]",
   unstyled: "border-0 bg-transparent p-0"
 };
-var Textarea = React30__namespace.default.forwardRef(
+var Textarea = React33__namespace.default.forwardRef(
   ({ size = "md", variant = "outline", className, onChange, onChangeText, ...rest }, ref) => {
-    const handleChange = React30__namespace.default.useCallback(
+    const handleChange = React33__namespace.default.useCallback(
       (event) => {
         onChange?.(event);
         onChangeText?.(event.target.value);
@@ -5465,9 +6199,10 @@ var Textarea = React30__namespace.default.forwardRef(
       [onChange, onChangeText]
     );
     return /* @__PURE__ */ jsxRuntime.jsx(
-      "textarea",
+      gui.TextArea,
       {
         ref,
+        unstyled: true,
         className: cn(TEXTAREA_BASE, TEXTAREA_SIZE_CLASSES[size], TEXTAREA_VARIANT_CLASSES[variant], className),
         ...rest,
         onChange: handleChange
@@ -5599,7 +6334,7 @@ function QuoteCell({ value, highlight, align = "right", onClick, className }) {
 }
 var CALL_HEADERS = ["Bid", "Ask", "Last", "Vol", "OI", "IV", "Delta"];
 var PUT_HEADERS = ["Delta", "IV", "OI", "Vol", "Last", "Ask", "Bid"];
-var OptionChain = React30__namespace.forwardRef(
+var OptionChain = React33__namespace.forwardRef(
   function OptionChain2(props, ref) {
     const {
       symbol: _symbol,
@@ -5610,7 +6345,7 @@ var OptionChain = React30__namespace.forwardRef(
       className,
       ...rest
     } = props;
-    const handleClick = React30__namespace.useCallback(
+    const handleClick = React33__namespace.useCallback(
       (quote, type, strike) => {
         if (!quote || !onSelectContract) return;
         onSelectContract({
@@ -5716,7 +6451,7 @@ var OptionChain = React30__namespace.forwardRef(
                     {
                       className: cn(
                         "px-2 py-1 text-center font-mono tabular-nums text-xs font-semibold",
-                        isATM ? "text-amber-400 bg-zinc-800/80" : "text-zinc-300"
+                        isATM ? "text-[var(--foreground)] bg-[var(--secondary)]" : "text-[var(--muted-foreground)]"
                       ),
                       children: fmt(row.strike)
                     }
@@ -5755,12 +6490,12 @@ var OptionChain = React30__namespace.forwardRef(
   }
 );
 var GREEKS = [
-  { key: "delta", label: "Delta", symbol: "\u0394", color: "text-blue-400", barColor: "bg-blue-500", decimals: 4, maxMagnitude: 1 },
-  { key: "gamma", label: "Gamma", symbol: "\u0393", color: "text-purple-400", barColor: "bg-purple-500", decimals: 4, maxMagnitude: 0.1 },
-  { key: "theta", label: "Theta", symbol: "\u0398", color: "text-red-400", barColor: "bg-red-500", decimals: 4, maxMagnitude: 1 },
-  { key: "vega", label: "Vega", symbol: "\u03BD", color: "text-emerald-400", barColor: "bg-emerald-500", decimals: 4, maxMagnitude: 1 },
-  { key: "rho", label: "Rho", symbol: "\u03C1", color: "text-orange-400", barColor: "bg-orange-500", decimals: 4, maxMagnitude: 1 },
-  { key: "iv", label: "IV", symbol: "\u03C3", color: "text-amber-400", barColor: "bg-amber-500", decimals: 1, maxMagnitude: 100 }
+  { key: "delta", label: "Delta", symbol: "\u0394", color: "text-[var(--foreground)]", barColor: "bg-[var(--foreground)]", decimals: 4, maxMagnitude: 1 },
+  { key: "gamma", label: "Gamma", symbol: "\u0393", color: "text-[var(--chart-1)]", barColor: "bg-[var(--chart-1)]", decimals: 4, maxMagnitude: 0.1 },
+  { key: "theta", label: "Theta", symbol: "\u0398", color: "text-[var(--chart-4)]", barColor: "bg-[var(--chart-4)]", decimals: 4, maxMagnitude: 1 },
+  { key: "vega", label: "Vega", symbol: "\u03BD", color: "text-[var(--chart-2)]", barColor: "bg-[var(--chart-2)]", decimals: 4, maxMagnitude: 1 },
+  { key: "rho", label: "Rho", symbol: "\u03C1", color: "text-[var(--chart-3)]", barColor: "bg-[var(--chart-3)]", decimals: 4, maxMagnitude: 1 },
+  { key: "iv", label: "IV", symbol: "\u03C3", color: "text-[var(--chart-5)]", barColor: "bg-[var(--chart-5)]", decimals: 1, maxMagnitude: 100 }
 ];
 function GreekItem({ def, value, compact }) {
   const magnitude = Math.min(Math.abs(value) / def.maxMagnitude, 1);
@@ -5790,7 +6525,7 @@ function GreekItem({ def, value, compact }) {
     }
   );
 }
-var GreeksDisplay = React30__namespace.forwardRef(
+var GreeksDisplay = React33__namespace.forwardRef(
   function GreeksDisplay2(props, ref) {
     const {
       delta,
@@ -5967,7 +6702,8 @@ function LegRow({ leg, index, strikes, expirations, removable, onChange, onRemov
         type: "button",
         className: cn(
           "px-2 py-0.5 rounded text-xs font-medium transition-colors",
-          leg.type === "call" ? "bg-blue-900/40 text-blue-400" : "bg-orange-900/40 text-orange-400"
+          // Call vs put is a rank difference, not a hue difference.
+          leg.type === "call" ? "bg-[var(--secondary)] text-[var(--foreground)]" : "bg-[var(--muted)] text-[var(--muted-foreground)]"
         ),
         onClick: () => update2({ type: leg.type === "call" ? "put" : "call" }),
         children: leg.type === "call" ? "CALL" : "PUT"
@@ -6021,7 +6757,7 @@ function LegRow({ leg, index, strikes, expirations, removable, onChange, onRemov
     )
   ] });
 }
-var StrategyBuilder = React30__namespace.forwardRef(
+var StrategyBuilder = React33__namespace.forwardRef(
   function StrategyBuilder2(props, ref) {
     const {
       underlying,
@@ -6033,12 +6769,12 @@ var StrategyBuilder = React30__namespace.forwardRef(
       ...rest
     } = props;
     const defaultExp = expirations[0] ?? "";
-    const [strategyType, setStrategyType] = React30__namespace.useState("bull_call_spread");
-    const [legs, setLegs] = React30__namespace.useState(() => {
+    const [strategyType, setStrategyType] = React33__namespace.useState("bull_call_spread");
+    const [legs, setLegs] = React33__namespace.useState(() => {
       const preset = STRATEGY_PRESETS.find((p) => p.value === "bull_call_spread");
       return preset ? preset.buildLegs(strikes, spotPrice, defaultExp) : [];
     });
-    const handleStrategyChange = React30__namespace.useCallback(
+    const handleStrategyChange = React33__namespace.useCallback(
       (e) => {
         const type = e.target.value;
         setStrategyType(type);
@@ -6049,7 +6785,7 @@ var StrategyBuilder = React30__namespace.forwardRef(
       },
       [strikes, spotPrice, defaultExp]
     );
-    const handleLegChange = React30__namespace.useCallback(
+    const handleLegChange = React33__namespace.useCallback(
       (index, leg) => {
         setLegs((prev) => {
           const next = [...prev];
@@ -6059,13 +6795,13 @@ var StrategyBuilder = React30__namespace.forwardRef(
       },
       []
     );
-    const handleLegRemove = React30__namespace.useCallback(
+    const handleLegRemove = React33__namespace.useCallback(
       (index) => {
         setLegs((prev) => prev.filter((_, i) => i !== index));
       },
       []
     );
-    const handleAddLeg = React30__namespace.useCallback(() => {
+    const handleAddLeg = React33__namespace.useCallback(() => {
       if (legs.length >= 4) return;
       const atm = findATM(strikes, spotPrice);
       setLegs((prev) => [
@@ -6073,14 +6809,14 @@ var StrategyBuilder = React30__namespace.forwardRef(
         { action: "buy", type: "call", strike: atm, expiration: defaultExp, quantity: 1 }
       ]);
     }, [legs.length, strikes, spotPrice, defaultExp]);
-    const netPremium = React30__namespace.useMemo(() => {
+    const netPremium = React33__namespace.useMemo(() => {
       return legs.reduce((sum, leg) => {
         if (leg.premium === void 0) return sum;
         const sign = leg.action === "buy" ? -1 : 1;
         return sum + sign * leg.premium * leg.quantity;
       }, 0);
     }, [legs]);
-    const handleSubmit = React30__namespace.useCallback(() => {
+    const handleSubmit = React33__namespace.useCallback(() => {
       if (!onSubmit || legs.length === 0) return;
       onSubmit({
         type: strategyType,
@@ -6200,8 +6936,10 @@ function buildPath(points, vb, width, height) {
   });
   return parts.join(" ");
 }
-var LEG_COLORS = ["#6366f1", "#f59e0b", "#ec4899", "#06b6d4"];
-var PnlDiagram = React30__namespace.forwardRef(
+var LEG_COLORS = ["var(--chart-1)", "var(--chart-2)", "var(--chart-3)", "var(--chart-4)"];
+var BREAKEVEN_COLOR = "var(--chart-1)";
+var BREAKEVEN_RING = "var(--background)";
+var PnlDiagram = React33__namespace.forwardRef(
   function PnlDiagram2(props, ref) {
     const {
       legs,
@@ -6210,10 +6948,10 @@ var PnlDiagram = React30__namespace.forwardRef(
       className,
       ...rest
     } = props;
-    const containerRef = React30__namespace.useRef(null);
-    const [hoverX, setHoverX] = React30__namespace.useState(null);
-    const [dims, setDims] = React30__namespace.useState({ width: 600, height: 240 });
-    React30__namespace.useEffect(() => {
+    const containerRef = React33__namespace.useRef(null);
+    const [hoverX, setHoverX] = React33__namespace.useState(null);
+    const [dims, setDims] = React33__namespace.useState({ width: 600, height: 240 });
+    React33__namespace.useEffect(() => {
       const el = containerRef.current;
       if (!el) return;
       const observer = new ResizeObserver((entries) => {
@@ -6236,7 +6974,7 @@ var PnlDiagram = React30__namespace.forwardRef(
     const xMax = maxStrike + range * 0.3;
     const SAMPLES = 200;
     const step = (xMax - xMin) / SAMPLES;
-    const combinedPoints = React30__namespace.useMemo(() => {
+    const combinedPoints = React33__namespace.useMemo(() => {
       const pts = [];
       for (let i = 0; i <= SAMPLES; i++) {
         const price = xMin + i * step;
@@ -6244,7 +6982,7 @@ var PnlDiagram = React30__namespace.forwardRef(
       }
       return pts;
     }, [legs, multiplier, xMin, step]);
-    const legPointSets = React30__namespace.useMemo(() => {
+    const legPointSets = React33__namespace.useMemo(() => {
       return legs.map((leg) => {
         const pts = [];
         for (let i = 0; i <= SAMPLES; i++) {
@@ -6265,7 +7003,7 @@ var PnlDiagram = React30__namespace.forwardRef(
     const chartH = height - PADDING.top - PADDING.bottom;
     const scaleX = (x) => PADDING.left + (x - vb.xMin) / (vb.xMax - vb.xMin) * chartW;
     const scaleY = (y) => PADDING.top + chartH - (y - vb.yMin) / (vb.yMax - vb.yMin) * chartH;
-    const breakevens = React30__namespace.useMemo(() => {
+    const breakevens = React33__namespace.useMemo(() => {
       const pts = [];
       for (let i = 1; i < combinedPoints.length; i++) {
         const prev = combinedPoints[i - 1];
@@ -6282,7 +7020,7 @@ var PnlDiagram = React30__namespace.forwardRef(
     const maxGainPoint = combinedPoints.find((p) => p.y === maxGain);
     const maxLossPoint = combinedPoints.find((p) => p.y === maxLoss);
     const zeroY = scaleY(0);
-    const handleMouseMove = React30__namespace.useCallback(
+    const handleMouseMove = React33__namespace.useCallback(
       (e) => {
         const rect = e.currentTarget.getBoundingClientRect();
         const mouseX = e.clientX - rect.left;
@@ -6295,7 +7033,7 @@ var PnlDiagram = React30__namespace.forwardRef(
       },
       [vb.xMin, vb.xMax, chartW]
     );
-    const handleMouseLeave = React30__namespace.useCallback(() => setHoverX(null), []);
+    const handleMouseLeave = React33__namespace.useCallback(() => setHoverX(null), []);
     const hoverPnl = hoverX !== null ? calcTotalPnl(legs, hoverX, multiplier) : null;
     buildPath(
       combinedPoints.map((p) => ({ x: scaleX(p.x), y: scaleY(p.y) })).map((p) => ({ x: p.x - PADDING.left, y: p.y - PADDING.top })),
@@ -6442,13 +7180,13 @@ var PnlDiagram = React30__namespace.forwardRef(
                   }
                 ),
                 breakevens.map((be, i) => /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: scaleX(be), cy: zeroY, r: "3", fill: "#fbbf24", stroke: "#18181b", strokeWidth: "1" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: scaleX(be), cy: zeroY, r: "3", fill: BREAKEVEN_COLOR, stroke: BREAKEVEN_RING, strokeWidth: "1" }),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "text",
                     {
                       x: scaleX(be),
                       y: PADDING.top + chartH + 14,
-                      fill: "#fbbf24",
+                      fill: BREAKEVEN_COLOR,
                       fontSize: "8",
                       fontFamily: "monospace",
                       textAnchor: "middle",
@@ -6489,7 +7227,7 @@ var PnlDiagram = React30__namespace.forwardRef(
                       cy: scaleY(hoverPnl),
                       r: "3",
                       fill: hoverPnl >= 0 ? "#22c55e" : "#ef4444",
-                      stroke: "#18181b",
+                      stroke: BREAKEVEN_RING,
                       strokeWidth: "1"
                     }
                   ),
@@ -6501,7 +7239,7 @@ var PnlDiagram = React30__namespace.forwardRef(
                       width: "90",
                       height: "28",
                       rx: "3",
-                      fill: "#18181b",
+                      fill: BREAKEVEN_RING,
                       stroke: "#3f3f46",
                       strokeWidth: "1"
                     }
@@ -6583,7 +7321,7 @@ var PnlDiagram = React30__namespace.forwardRef(
               ] })
             ] }, i)),
             breakevens.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-1.5 rounded-full bg-amber-400" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-1.5 rounded-full", style: { background: BREAKEVEN_COLOR } }),
               /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-zinc-500", children: [
                 "BE: ",
                 breakevens.map((b) => b.toFixed(1)).join(", ")
@@ -6599,7 +7337,7 @@ function formatDate(date) {
   const d = new Date(date);
   return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
 }
-var OptionPositionCard = React30__namespace.forwardRef(
+var OptionPositionCard = React33__namespace.forwardRef(
   function OptionPositionCard2(props, ref) {
     const {
       position,
@@ -6625,7 +7363,8 @@ var OptionPositionCard = React30__namespace.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(
               "inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-semibold",
-              isCall ? "bg-blue-900/40 text-blue-400" : "bg-orange-900/40 text-orange-400"
+              // Call vs put is a rank difference, not a hue difference.
+              isCall ? "bg-[var(--secondary)] text-[var(--foreground)]" : "bg-[var(--muted)] text-[var(--muted-foreground)]"
             ), children: [
               position.underlying,
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono tabular-nums", children: position.strike }),
@@ -6751,8 +7490,9 @@ function ExpirationPill({ exp, isSelected, onClick }) {
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium whitespace-nowrap", children: formatExpDate(exp.date) }),
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(
           "font-mono tabular-nums text-[10px]",
-          isSelected ? "text-blue-400/70" : "text-zinc-600",
-          exp.dte <= 7 && !isSelected && "text-amber-600"
+          isSelected ? "text-[var(--foreground)]" : "text-[var(--muted-foreground)]",
+          // Near expiry is a notice, and a notice in Lux is the loudest neutral.
+          exp.dte <= 7 && !isSelected && "text-[var(--color-status-warn)]"
         ), children: [
           exp.dte,
           "d"
@@ -6761,7 +7501,7 @@ function ExpirationPill({ exp, isSelected, onClick }) {
     }
   );
 }
-var ExpirationSelector = React30__namespace.forwardRef(
+var ExpirationSelector = React33__namespace.forwardRef(
   function ExpirationSelector2(props, ref) {
     const {
       expirations,
@@ -6771,8 +7511,8 @@ var ExpirationSelector = React30__namespace.forwardRef(
       className,
       ...rest
     } = props;
-    const scrollRef = React30__namespace.useRef(null);
-    React30__namespace.useEffect(() => {
+    const scrollRef = React33__namespace.useRef(null);
+    React33__namespace.useEffect(() => {
       const container = scrollRef.current;
       if (!container) return;
       const selectedEl = container.querySelector('[data-selected="true"]');
@@ -7089,6 +7829,7 @@ exports.AccordionItemContent = AccordionItemContent;
 exports.AccordionItemTrigger = AccordionItemTrigger;
 exports.AccordionRoot = AccordionRoot;
 exports.Alert = Alert;
+exports.AppNav = AppNav;
 exports.AppProvider = AppProvider;
 exports.Avatar = Avatar;
 exports.AvatarGroup = AvatarGroup;
@@ -7114,6 +7855,7 @@ exports.CloseButton = CloseButton;
 exports.CollapsibleDetails = CollapsibleDetails;
 exports.CollapsibleList = CollapsibleList;
 exports.ColorModeProvider = ColorModeProvider;
+exports.DEFAULT_ORG = DEFAULT_ORG;
 exports.DialogActionTrigger = DialogActionTrigger;
 exports.DialogBackdrop = DialogBackdrop;
 exports.DialogBody = DialogBody;
@@ -7140,8 +7882,11 @@ exports.ExpirationSelector = ExpirationSelector;
 exports.Field = Field;
 exports.GreeksDisplay = GreeksDisplay;
 exports.Heading = Heading;
+exports.IAM_PAGE_SIZE = IAM_PAGE_SIZE;
+exports.IamError = IamError;
 exports.IconButton = IconButton;
-exports.Image = Image2;
+exports.IdentityProvider = IdentityProvider;
+exports.Image = Image;
 exports.Input = Input;
 exports.InputGroup = InputGroup;
 exports.LUX_BRAND = LUX_BRAND;
@@ -7161,8 +7906,10 @@ exports.MenuRoot = MenuRoot;
 exports.MenuSeparator = MenuSeparator;
 exports.MenuTrigger = MenuTrigger;
 exports.MenuTriggerItem = MenuTriggerItem;
+exports.NARROW_PX = NARROW_PX;
 exports.OptionChain = OptionChain;
 exports.OptionPositionCard = OptionPositionCard;
+exports.OrgSwitcher = OrgSwitcher;
 exports.PARS_GOLD = PARS_GOLD;
 exports.PinInput = PinInput;
 exports.PnlDiagram = PnlDiagram;
@@ -7181,6 +7928,7 @@ exports.Progress = Progress;
 exports.ProgressCircleRing = ProgressCircleRing;
 exports.ProgressCircleRoot = ProgressCircleRoot;
 exports.ProgressCircleValueText = ProgressCircleValueText;
+exports.ProjectSwitcher = ProjectSwitcher;
 exports.Radio = Radio2;
 exports.RadioGroup = RadioGroup3;
 exports.Rating = Rating;
@@ -7196,12 +7944,15 @@ exports.SelectLabel = SelectLabel;
 exports.SelectRoot = SelectRoot;
 exports.SelectValueText = SelectValueText;
 exports.Separator = Separator2;
+exports.SettingsMenu = SettingsMenu;
 exports.Skeleton = Skeleton;
 exports.SkeletonCircle = SkeletonCircle;
 exports.SkeletonText = SkeletonText;
 exports.Slider = Slider;
 exports.StrategyBuilder = StrategyBuilder;
 exports.Switch = Switch2;
+exports.Switcher = Switcher;
+exports.TOUCH_PX = TOUCH_PX;
 exports.TableBody = TableBody;
 exports.TableCaption = TableCaption;
 exports.TableCell = TableCell;
@@ -7222,14 +7973,27 @@ exports.Tag = Tag;
 exports.Textarea = Textarea;
 exports.Toaster = Toaster;
 exports.Tooltip = Tooltip;
+exports.UserMenu = UserMenu;
 exports.bankColors = bankColors;
 exports.buttonVariants = buttonVariants;
 exports.cn = cn;
 exports.config = config;
 exports.createListCollection = createListCollection;
+exports.currentHost = currentHost;
 exports.guiConfig = lux_config_default;
+exports.iam = iam;
+exports.iamBase = iamBase;
+exports.initials = initials;
 exports.luxThemes = luxThemes;
+exports.orgIdentity = orgIdentity;
+exports.orgs = ORGS;
+exports.resolveWhiteLabel = resolveWhiteLabel;
 exports.toaster = toaster;
 exports.useAccordion = useAccordion;
+exports.useBelow = useBelow;
 exports.useColorMode = useColorMode;
 exports.useColorModeValue = useColorModeValue;
+exports.useIdentity = useIdentity;
+exports.useIsNarrow = useIsNarrow;
+exports.useIsTouch = useIsTouch;
+exports.useWhiteLabel = useWhiteLabel;