@rafal.lemieszewski/tide-ui 0.83.0 → 0.84.3

package/dist/es/components/product/app-frame.js

@@ -0,0 +1,985 @@
+import { jsxs as l, jsx as e, Fragment as J } from "react/jsx-runtime";
+import * as u from "react";
+import { SidebarProvider as ee, SidebarInset as re, Sidebar as le, SidebarHeader as ie, SidebarGroup as R, SidebarGroupContent as U, SidebarMenu as j, SidebarMenuItem as O, SidebarMenuButton as x, SidebarGroupLabel as Q, SidebarMenuSub as X, SidebarMenuSubItem as q, SidebarMenuSubButton as Y, SidebarFooter as te, SidebarRail as ne, useSidebar as ae, SidebarTrigger as oe } from "../fundamental/sidebar.js";
+import { Button as se } from "../fundamental/button.js";
+import { Icon as s } from "../fundamental/icon.js";
+import { Avatar as z, AvatarImage as A, AvatarFallback as M } from "../fundamental/avatar.js";
+import { Separator as W } from "../fundamental/separator.js";
+import { Kbd as E } from "../fundamental/kbd.js";
+import { DropdownMenu as Z, DropdownMenuTrigger as K, DropdownMenuContent as P, DropdownMenuLabel as T, DropdownMenuSeparator as H, DropdownMenuItem as y } from "../fundamental/dropdown-menu.js";
+import { TooltipProvider as ce, Tooltip as C, TooltipTrigger as w, TooltipContent as k } from "../fundamental/tooltip.js";
+import { CommandDialog as de, CommandInput as pe, CommandList as he, CommandEmpty as ue, CommandGroup as I, CommandItem as V } from "../fundamental/command.js";
+const me = {
+  name: "John Doe",
+  email: "john@example.com",
+  avatarUrl: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=32&h=32&fit=crop&crop=face"
+}, fe = [
+  {
+    name: "Acme Corp",
+    role: "Admin",
+    plan: "Enterprise",
+    avatarUrl: "https://useful-toucan-91.convex.cloud/api/storage/5e36a31d-3f0a-4bb0-95db-f5b1c8e8af93"
+  },
+  {
+    name: "Startup Inc",
+    role: "Member",
+    plan: "Pro",
+    avatarUrl: "https://useful-toucan-91.convex.cloud/api/storage/5e36a31d-3f0a-4bb0-95db-f5b1c8e8af93"
+  }
+], be = {
+  main: [
+    {
+      title: "Home",
+      icon: "house",
+      url: "/home",
+      isActive: !1
+    },
+    {
+      title: "Boards",
+      icon: "layout-dashboard",
+      url: "/boards",
+      isActive: !1
+    }
+  ],
+  operations: [
+    {
+      title: "Voyage economics",
+      icon: "ship",
+      url: "/freight-planner",
+      isActive: !1,
+      items: []
+    },
+    {
+      title: "Trade desk",
+      icon: "trending-up",
+      url: "/trade-desk",
+      isActive: !1,
+      items: []
+    },
+    {
+      title: "Agreements",
+      icon: "scroll-text",
+      url: "/agreements",
+      isActive: !0,
+      items: [
+        {
+          title: "Recaps",
+          url: "/agreements/recaps",
+          isActive: !0
+        },
+        {
+          title: "Contracts",
+          url: "/agreements/contracts",
+          isActive: !1
+        },
+        {
+          title: "Clause library",
+          url: "/agreements/clause-library",
+          isActive: !1
+        }
+      ]
+    },
+    {
+      title: "Compliance",
+      icon: "shield-check",
+      url: "/compliance",
+      isActive: !1,
+      items: []
+    }
+  ],
+  intelligence: [
+    {
+      title: "Global market",
+      icon: "globe",
+      url: "/global-market",
+      isActive: !1,
+      items: [
+        { title: "Supply", url: "/global-market/supply", isActive: !1 },
+        { title: "Commodities", url: "/global-market/commodities", isActive: !1 },
+        { title: "Freight", url: "/global-market/freight", isActive: !1 }
+      ]
+    },
+    {
+      title: "Assets",
+      icon: "container",
+      url: "/assets",
+      isActive: !1,
+      items: [
+        { title: "Vessels", url: "/assets/vessels", isActive: !1 },
+        { title: "Fleets", url: "/assets/fleets", isActive: !1 },
+        { title: "Ports", url: "/assets/ports", isActive: !1 },
+        { title: "Canals", url: "/assets/canals", isActive: !1 }
+      ]
+    },
+    {
+      title: "Fixtures",
+      icon: "anchor",
+      url: "/fixtures",
+      isActive: !1
+    }
+  ],
+  support: [
+    {
+      title: "Notifications",
+      icon: "bell",
+      url: "/notifications",
+      isActive: !1
+    },
+    {
+      title: "Help & support",
+      icon: "circle-help",
+      url: "/help-support",
+      isActive: !1
+    }
+  ]
+}, B = (o) => o.split(" ").filter(Boolean).map((n) => n[0]).join("").slice(0, 2).toUpperCase(), D = (o) => o.split(" ").filter(Boolean).map((n) => n[0]).join("").slice(0, 2).toUpperCase(), F = () => typeof navigator < "u" && /Mac|iPod|iPhone|iPad/.test(navigator.userAgent);
+function _(o) {
+  const n = {};
+  return [
+    ...o.main || [],
+    ...o.operations || [],
+    ...o.intelligence || [],
+    ...o.support || []
+  ].forEach((t) => {
+    if (t.items && t.items.length > 0) {
+      const p = t.items.some((h) => h.isActive);
+      n[t.title] = p;
+    }
+  }), n;
+}
+function ge({ navigationData: o, user: n, teams: m, onNavigate: t, navigationMode: p, onNavigationModeChange: h }) {
+  const [f, c] = u.useState(!1), [v, N] = u.useState(""), [b, a] = u.useState(
+    () => _(o)
+  ), [d, g] = u.useState(m[0]), G = (r) => {
+    a((i) => ({
+      ...i,
+      [r]: !i[r]
+    }));
+  }, $ = (r) => r.items && r.items.some((i) => i.isActive), L = (r) => {
+    if (r.items && r.items.length > 0) {
+      const i = r.items.find((S) => S.isActive);
+      if (i)
+        return `${r.title} → ${i.title}`;
+    }
+    return r.title;
+  };
+  return u.useEffect(() => {
+    const r = (i) => {
+      i.key === "k" && (i.metaKey || i.ctrlKey) && (i.preventDefault(), c((S) => !S));
+    };
+    return document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
+  }, []), u.useEffect(() => {
+    a(_(o));
+  }, [o]), /* @__PURE__ */ l(ce, { delayDuration: 100, children: [
+    /* @__PURE__ */ l(le, { variant: "sidebar", collapsible: "icon", className: "flex h-full flex-col", children: [
+      /* @__PURE__ */ e(ie, { className: "sticky top-0 z-10 h-12 border-b border-[var(--color-border-primary-subtle)] bg-[var(--color-surface-primary)] group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-2 box-border", children: /* @__PURE__ */ e("div", { className: "flex h-[22px] w-7 items-center justify-center", children: /* @__PURE__ */ e(
+        "svg",
+        {
+          width: "28",
+          height: "22",
+          viewBox: "0 0 28 22",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /* @__PURE__ */ e(
+            "path",
+            {
+              d: "M4.39355 0.688477C6.89528 0.688477 8.12094 1.67409 8.12109 3.74609V7.69043H5.5332V2.87695H3.28711V8.03125L8.12109 11.458V18.2705C8.12109 20.3262 6.92916 21.3125 4.39355 21.3125C1.85827 21.3124 0.701172 20.3261 0.701172 18.2705L0.700195 13.7412H3.28711V19.1396H5.5332V12.6777L0.701172 9.23438V3.74609C0.701322 1.67422 1.89214 0.688597 4.39355 0.688477ZM13.8379 0.6875C16.4752 0.687615 17.6152 1.67395 17.6152 3.74609V10.5312L12.6113 13.7236V19.123H15.0273V14.3096H17.6143V18.2705C17.6143 20.3262 16.4235 21.3125 13.8027 21.3125C11.1821 21.3125 10.0244 20.3262 10.0244 18.2705V3.74609H10.0254C10.0254 1.67382 11.2003 0.6875 13.8379 0.6875ZM23.333 0.6875C25.9537 0.6875 27.1113 1.67378 27.1113 3.72949V18.2539H27.1104C27.1104 20.3261 25.9363 21.3125 23.2988 21.3125C20.6612 21.3125 19.5205 20.3262 19.5205 18.2539V11.4688L24.5254 8.27637V2.87695H22.1084V7.69043H19.5215V3.72949C19.5215 1.67384 20.7124 0.687556 23.333 0.6875ZM22.1084 12.2197V19.1396H24.5254V10.5986L22.1084 12.2197ZM12.6113 11.4014L15.0273 9.78027V2.86035H12.6113V11.4014Z",
+              fill: "#005F85"
+            }
+          )
+        }
+      ) }) }),
+      /* @__PURE__ */ l(
+        "div",
+        {
+          className: "flex min-h-0 flex-1 flex-col overflow-y-auto group-data-[collapsible=icon]:overflow-hidden",
+          "data-sidebar": "content",
+          children: [
+            /* @__PURE__ */ e("div", { className: "p-[var(--space-m)] pt-[var(--space-s)] group-data-[collapsible=icon]:px-2", children: /* @__PURE__ */ l("div", { className: "relative", children: [
+              /* @__PURE__ */ e("div", { className: "absolute top-1/2 left-2 -translate-y-1/2 group-data-[collapsible=icon]:hidden", children: /* @__PURE__ */ e(s, { name: "search", size: "m", color: "tertiary" }) }),
+              /* @__PURE__ */ l("div", { className: "group-data-[collapsible=icon]:hidden", children: [
+                /* @__PURE__ */ e(
+                  "button",
+                  {
+                    onClick: () => c(!0),
+                    className: "text-body-md flex h-8 w-full cursor-pointer items-center rounded-m border border-[var(--color-border-primary-subtle)] bg-[var(--color-surface-primary)] px-3 py-1 pr-20 pl-8 text-left text-[var(--color-text-tertiary)] transition-colors hover:border-[var(--color-border-primary-medium)] hover:!bg-[var(--color-background-neutral-subtlest-hovered)] focus:border-[var(--color-border-brand-bold)] focus:ring-2 focus:ring-[var(--color-border-brand-bold)]/20 focus:ring-offset-0 focus:outline-none active:border-[var(--color-border-primary-medium)]",
+                    children: "Search"
+                  }
+                ),
+                /* @__PURE__ */ l("div", { className: "absolute top-1/2 right-2 flex -translate-y-1/2 gap-1", children: [
+                  /* @__PURE__ */ e(E, { size: "s", children: F() ? "⌘" : "Ctrl" }),
+                  /* @__PURE__ */ e(E, { size: "s", children: "K" })
+                ] })
+              ] }),
+              /* @__PURE__ */ l(C, { delayDuration: 500, children: [
+                /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ e(
+                  "button",
+                  {
+                    onClick: () => c(!0),
+                    className: "hidden h-8 w-8 cursor-pointer items-center justify-center rounded border border-[var(--color-border-primary-subtle)] bg-transparent transition-all duration-200 group-data-[collapsible=icon]:flex hover:border-[var(--color-border-primary-medium)] hover:!bg-[var(--color-background-neutral-subtlest-hovered)] focus:border-[var(--color-border-brand-bold)] focus:ring-2 focus:ring-[var(--color-border-brand-bold)]/20 focus:ring-offset-0 focus:outline-none active:border-[var(--color-border-primary-medium)]",
+                    "aria-label": "Search",
+                    children: /* @__PURE__ */ e(s, { name: "search", size: "m", color: "tertiary" })
+                  }
+                ) }),
+                /* @__PURE__ */ e(k, { side: "right", className: "hidden group-data-[collapsible=icon]:block", children: /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ e("span", { children: "Search" }),
+                  /* @__PURE__ */ l("div", { className: "flex gap-1", children: [
+                    /* @__PURE__ */ e(E, { size: "s", variant: "dark", children: F() ? "⌘" : "Ctrl" }),
+                    /* @__PURE__ */ e(E, { size: "s", variant: "dark", children: "K" })
+                  ] })
+                ] }) })
+              ] })
+            ] }) }),
+            /* @__PURE__ */ e(R, { className: "pb-1 mt-1 p-[var(--space-s)]", children: /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(j, { children: o.main.map((r) => /* @__PURE__ */ e(O, { children: /* @__PURE__ */ l(C, { children: [
+              /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ l(
+                x,
+                {
+                  isActive: r.isActive,
+                  onClick: (i) => {
+                    t && (i.preventDefault(), t(r.url));
+                  },
+                  children: [
+                    /* @__PURE__ */ e(s, { name: r.icon, size: "s" }),
+                    /* @__PURE__ */ e("span", { children: r.title })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ e(k, { side: "right", className: "hidden group-data-[collapsible=icon]:block", children: L(r) })
+            ] }) }, r.title)) }) }) }),
+            /* @__PURE__ */ e("div", { className: "my-2 hidden justify-center px-2 group-data-[collapsible=icon]:flex", children: /* @__PURE__ */ e(W, { layout: "vertical" }) }),
+            /* @__PURE__ */ l(R, { className: "mt-1 p-[var(--space-s)]", children: [
+              /* @__PURE__ */ e(Q, { className: "py-1 pb-1.5 group-data-[collapsible=icon]:hidden", children: "Operations" }),
+              /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(j, { children: o.operations.map((r) => /* @__PURE__ */ e(O, { children: r.items && r.items.length > 0 ? /* @__PURE__ */ l(J, { children: [
+                /* @__PURE__ */ e("div", { className: "group-data-[collapsible=icon]:hidden", children: /* @__PURE__ */ l(
+                  x,
+                  {
+                    isActive: r.isActive && !r.items?.length,
+                    onClick: () => G(r.title),
+                    children: [
+                      /* @__PURE__ */ e(s, { name: r.icon, size: "s" }),
+                      /* @__PURE__ */ e("span", { children: r.title }),
+                      /* @__PURE__ */ e(
+                        s,
+                        {
+                          name: "chevron-right",
+                          size: "s",
+                          className: `ml-auto transition-transform ${b[r.title] ? "rotate-90" : ""}`
+                        }
+                      )
+                    ]
+                  }
+                ) }),
+                r.items && r.items.length > 0 && b[r.title] && /* @__PURE__ */ e(X, { children: r.items.map((i) => /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(
+                  Y,
+                  {
+                    isActive: i.isActive,
+                    onClick: (S) => {
+                      t && (S.preventDefault(), t(i.url));
+                    },
+                    children: /* @__PURE__ */ e("span", { children: i.title })
+                  }
+                ) }, i.title)) }),
+                /* @__PURE__ */ e("div", { className: "hidden group-data-[collapsible=icon]:block", children: /* @__PURE__ */ l(Z, { children: [
+                  /* @__PURE__ */ l(C, { children: [
+                    /* @__PURE__ */ e(K, { asChild: !0, children: /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ e(
+                      x,
+                      {
+                        isActive: $(r),
+                        className: "w-full justify-center",
+                        children: /* @__PURE__ */ e(s, { name: r.icon, size: "s" })
+                      }
+                    ) }) }),
+                    /* @__PURE__ */ e(k, { side: "right", className: "hidden group-data-[collapsible=icon]:block", children: L(r) })
+                  ] }),
+                  /* @__PURE__ */ l(P, { side: "right", sideOffset: 8, align: "start", children: [
+                    /* @__PURE__ */ e(T, { className: "text-body-medium-sm font-medium", children: r.title }),
+                    /* @__PURE__ */ e(H, {}),
+                    r.items.map((i) => /* @__PURE__ */ e(
+                      y,
+                      {
+                        className: i.isActive ? "bg-[var(--color-background-blue-subtle-selected)] text-[var(--color-text-brand-bold)]" : "",
+                        onSelect: () => {
+                          t && t(i.url);
+                        },
+                        children: i.title
+                      },
+                      i.title
+                    ))
+                  ] })
+                ] }) })
+              ] }) : /* @__PURE__ */ l(C, { children: [
+                /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ l(
+                  x,
+                  {
+                    isActive: r.isActive,
+                    onClick: (i) => {
+                      t && (i.preventDefault(), t(r.url));
+                    },
+                    children: [
+                      /* @__PURE__ */ e(s, { name: r.icon, size: "s" }),
+                      /* @__PURE__ */ e("span", { children: r.title })
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ e(k, { side: "right", className: "hidden group-data-[collapsible=icon]:block", children: L(r) })
+              ] }) }, r.title)) }) })
+            ] }),
+            /* @__PURE__ */ e("div", { className: "my-2 hidden justify-center px-2 group-data-[collapsible=icon]:flex", children: /* @__PURE__ */ e(W, { layout: "vertical" }) }),
+            /* @__PURE__ */ l(R, { className: "mt-1 p-[var(--space-s)]", children: [
+              /* @__PURE__ */ e(Q, { className: "py-1 pb-1.5 group-data-[collapsible=icon]:hidden", children: "Intelligence" }),
+              /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(j, { children: o.intelligence.map((r) => /* @__PURE__ */ e(O, { children: r.items && r.items.length > 0 ? /* @__PURE__ */ l(J, { children: [
+                /* @__PURE__ */ e("div", { className: "group-data-[collapsible=icon]:hidden", children: /* @__PURE__ */ l(
+                  x,
+                  {
+                    isActive: r.isActive && !r.items?.length,
+                    onClick: () => G(r.title),
+                    children: [
+                      /* @__PURE__ */ e(s, { name: r.icon, size: "s" }),
+                      /* @__PURE__ */ e("span", { children: r.title }),
+                      /* @__PURE__ */ e(
+                        s,
+                        {
+                          name: "chevron-right",
+                          size: "s",
+                          className: `ml-auto transition-transform ${b[r.title] ? "rotate-90" : ""}`
+                        }
+                      )
+                    ]
+                  }
+                ) }),
+                r.items && r.items.length > 0 && b[r.title] && /* @__PURE__ */ e(X, { children: r.items.map((i) => /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(
+                  Y,
+                  {
+                    isActive: i.isActive,
+                    onClick: (S) => {
+                      t && (S.preventDefault(), t(i.url));
+                    },
+                    children: /* @__PURE__ */ e("span", { children: i.title })
+                  }
+                ) }, i.title)) }),
+                /* @__PURE__ */ e("div", { className: "hidden group-data-[collapsible=icon]:block", children: /* @__PURE__ */ l(Z, { children: [
+                  /* @__PURE__ */ l(C, { children: [
+                    /* @__PURE__ */ e(K, { asChild: !0, children: /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ e(
+                      x,
+                      {
+                        isActive: $(r),
+                        className: "w-full justify-center",
+                        children: /* @__PURE__ */ e(s, { name: r.icon, size: "s" })
+                      }
+                    ) }) }),
+                    /* @__PURE__ */ e(k, { side: "right", className: "hidden group-data-[collapsible=icon]:block", children: L(r) })
+                  ] }),
+                  /* @__PURE__ */ l(P, { side: "right", sideOffset: 8, align: "start", children: [
+                    /* @__PURE__ */ e(T, { className: "text-body-medium-sm font-medium", children: r.title }),
+                    /* @__PURE__ */ e(H, {}),
+                    r.items.map((i) => /* @__PURE__ */ e(
+                      y,
+                      {
+                        className: i.isActive ? "bg-[var(--color-background-blue-subtle-selected)] text-[var(--color-text-brand-bold)]" : "",
+                        onSelect: () => {
+                          t && t(i.url);
+                        },
+                        children: i.title
+                      },
+                      i.title
+                    ))
+                  ] })
+                ] }) })
+              ] }) : /* @__PURE__ */ l(C, { children: [
+                /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ l(
+                  x,
+                  {
+                    isActive: r.isActive,
+                    onClick: (i) => {
+                      t && (i.preventDefault(), t(r.url));
+                    },
+                    children: [
+                      /* @__PURE__ */ e(s, { name: r.icon, size: "s" }),
+                      /* @__PURE__ */ e("span", { children: r.title })
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ e(k, { side: "right", className: "hidden group-data-[collapsible=icon]:block", children: L(r) })
+              ] }) }, r.title)) }) })
+            ] }),
+            /* @__PURE__ */ e(R, { className: "pb-2 p-[var(--space-s)] mt-auto", children: /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(j, { children: o.support.map((r) => /* @__PURE__ */ e(O, { children: /* @__PURE__ */ l(C, { children: [
+              /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ l(
+                x,
+                {
+                  isActive: r.isActive,
+                  onClick: (i) => {
+                    t && (i.preventDefault(), t(r.url));
+                  },
+                  children: [
+                    /* @__PURE__ */ e(s, { name: r.icon, size: "s" }),
+                    /* @__PURE__ */ e("span", { children: r.title })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ e(k, { side: "right", className: "hidden group-data-[collapsible=icon]:block", children: L(r) })
+            ] }) }, r.title)) }) }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(te, { className: "sticky bottom-0 z-10 border-t border-[var(--color-border-primary-subtle)] bg-[var(--color-surface-primary)] group-data-[collapsible=icon]:px-2 group-data-[collapsible=icon]:py-2", children: /* @__PURE__ */ e("div", { className: "group/user-menu rounded-m border border-[var(--color-border-primary-subtle)] transition-colors hover:border-[var(--color-border-primary-medium)] group-data-[collapsible=icon]:rounded-none group-data-[collapsible=icon]:border-none", children: /* @__PURE__ */ l(Z, { children: [
+        /* @__PURE__ */ e(K, { asChild: !0, children: /* @__PURE__ */ l(
+          se,
+          {
+            variant: "ghost",
+            className: "h-auto min-h-[56px] w-full justify-start rounded-m px-3 py-2 hover:!bg-[var(--color-background-neutral-subtlest-hovered)] group-data-[collapsible=icon]:h-8 group-data-[collapsible=icon]:min-h-0 group-data-[collapsible=icon]:w-8 group-data-[collapsible=icon]:p-0",
+            children: [
+              /* @__PURE__ */ l("div", { className: "flex w-full items-center gap-3 group-data-[collapsible=icon]:hidden", children: [
+                /* @__PURE__ */ l("div", { className: "relative flex-shrink-0", children: [
+                  /* @__PURE__ */ l(z, { size: "m", type: "user", children: [
+                    /* @__PURE__ */ e(A, { src: n.avatarUrl, alt: n.name }),
+                    /* @__PURE__ */ e(M, { size: "m", type: "user", children: B(n.name) })
+                  ] }),
+                  /* @__PURE__ */ e("div", { className: "absolute -right-1 -bottom-1 rounded-[4px] border-2 border-white p-0", children: /* @__PURE__ */ l(z, { size: "xxs", type: "organization", children: [
+                    /* @__PURE__ */ e(A, { src: d.avatarUrl, alt: d.name }),
+                    /* @__PURE__ */ e(M, { size: "xxs", type: "organization", children: D(d.name) })
+                  ] }) })
+                ] }),
+                /* @__PURE__ */ l("div", { className: "min-w-0 flex-1 text-left", children: [
+                  /* @__PURE__ */ e("div", { className: "text-body-medium-sm truncate font-medium text-[var(--color-text-primary)]", children: n.name }),
+                  /* @__PURE__ */ l("div", { className: "text-body-xsm text-[var(--color-text-secondary)]", children: [
+                    d.role,
+                    " at ",
+                    d.name
+                  ] })
+                ] }),
+                /* @__PURE__ */ e(s, { name: "chevron-down", size: "m", className: "opacity-50" })
+              ] }),
+              /* @__PURE__ */ l("div", { className: "relative hidden group-data-[collapsible=icon]:block", children: [
+                /* @__PURE__ */ l(z, { size: "s", type: "user", children: [
+                  /* @__PURE__ */ e(A, { src: n.avatarUrl, alt: n.name }),
+                  /* @__PURE__ */ e(M, { size: "s", type: "user", children: B(n.name) })
+                ] }),
+                /* @__PURE__ */ e("div", { className: "absolute -right-1 -bottom-1 rounded-[2px] border-2 border-white bg-[var(--color-surface-primary)]", children: /* @__PURE__ */ l(z, { size: "xxs", type: "organization", children: [
+                  /* @__PURE__ */ e(A, { src: d.avatarUrl, alt: d.name }),
+                  /* @__PURE__ */ e(M, { size: "xxs", type: "organization", children: D(d.name) })
+                ] }) })
+              ] })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ l(
+          P,
+          {
+            className: "w-[--radix-dropdown-menu-trigger-width]",
+            align: "start",
+            side: "top",
+            sideOffset: 4,
+            children: [
+              /* @__PURE__ */ e(T, { className: "p-0 font-normal", children: /* @__PURE__ */ l("div", { className: "flex items-center gap-3 px-2 py-2", children: [
+                /* @__PURE__ */ l(z, { size: "s", type: "user", children: [
+                  /* @__PURE__ */ e(A, { src: n.avatarUrl, alt: n.name }),
+                  /* @__PURE__ */ e(M, { size: "s", type: "user", children: B(n.name) })
+                ] }),
+                /* @__PURE__ */ l("div", { className: "grid flex-1 text-left", children: [
+                  /* @__PURE__ */ e("span", { className: "text-body-medium-sm truncate font-semibold text-[var(--color-text-primary)]", children: n.name }),
+                  /* @__PURE__ */ e("span", { className: "text-caption-xsm truncate text-[var(--color-text-secondary)]", children: n.email })
+                ] })
+              ] }) }),
+              /* @__PURE__ */ e(H, {}),
+              /* @__PURE__ */ e(T, { className: "px-2 py-1 text-[12px] font-medium text-[var(--color-text-tertiary)]", children: "Organizations" }),
+              m.map((r) => /* @__PURE__ */ l(
+                y,
+                {
+                  onSelect: () => g(r),
+                  className: "mx-1 mb-1 h-10 cursor-pointer gap-2 px-1 pr-2 pl-1",
+                  children: [
+                    /* @__PURE__ */ l(z, { size: "s", type: "organization", children: [
+                      /* @__PURE__ */ e(A, { src: r.avatarUrl, alt: r.name }),
+                      /* @__PURE__ */ e(M, { size: "s", type: "organization", children: D(r.name) })
+                    ] }),
+                    /* @__PURE__ */ l("div", { className: "flex flex-1 flex-col text-left", children: [
+                      /* @__PURE__ */ e("span", { className: "text-body-medium-sm truncate font-semibold text-[var(--color-text-primary)]", children: r.name }),
+                      /* @__PURE__ */ l("span", { className: "text-caption-xsm truncate text-[var(--color-text-secondary)]", children: [
+                        r.role,
+                        " • ",
+                        r.plan,
+                        " plan"
+                      ] })
+                    ] }),
+                    d.name === r.name && /* @__PURE__ */ e(s, { name: "check", size: "m", className: "text-[var(--color-icon-brand-bold)]" })
+                  ]
+                },
+                r.name
+              )),
+              /* @__PURE__ */ e(H, {}),
+              /* @__PURE__ */ e(T, { className: "px-2 py-1 text-[12px] font-medium text-[var(--color-text-tertiary)]", children: "Navigation" }),
+              /* @__PURE__ */ l(
+                y,
+                {
+                  className: "mx-1 mb-0.5 cursor-pointer gap-2 px-2",
+                  onSelect: () => h("sidebar"),
+                  children: [
+                    /* @__PURE__ */ e("span", { className: "flex-1", children: "New sidebar navigation" }),
+                    p === "sidebar" && /* @__PURE__ */ e(s, { name: "check", size: "m", className: "text-[var(--color-icon-brand-bold)]" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ l(
+                y,
+                {
+                  className: "mx-1 mb-1 cursor-pointer gap-2 px-2",
+                  onSelect: () => h("horizontal"),
+                  children: [
+                    /* @__PURE__ */ e("span", { className: "flex-1", children: "Old horizontal menu" }),
+                    p === "horizontal" && /* @__PURE__ */ e(s, { name: "check", size: "m", className: "text-[var(--color-icon-brand-bold)]" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ e(H, {}),
+              /* @__PURE__ */ e(
+                y,
+                {
+                  icon: "user",
+                  className: "cursor-pointer",
+                  onSelect: () => {
+                    t && t("/user/profile");
+                  },
+                  children: "User profile"
+                }
+              ),
+              /* @__PURE__ */ e(
+                y,
+                {
+                  icon: "settings",
+                  className: "cursor-pointer",
+                  onSelect: () => {
+                    t && t("/organization/settings");
+                  },
+                  children: "Organization settings"
+                }
+              ),
+              /* @__PURE__ */ e(H, {}),
+              /* @__PURE__ */ e(
+                y,
+                {
+                  icon: "log-out",
+                  destructive: !0,
+                  className: "cursor-pointer",
+                  onSelect: () => {
+                    t && t("/auth/sign-out");
+                  },
+                  children: "Sign out"
+                }
+              )
+            ]
+          }
+        )
+      ] }) }) }),
+      /* @__PURE__ */ e(ne, {})
+    ] }),
+    /* @__PURE__ */ l(de, { open: f, onOpenChange: c, children: [
+      /* @__PURE__ */ e(
+        pe,
+        {
+          placeholder: "Type a command or search...",
+          value: v,
+          onValueChange: N,
+          clearable: !1
+        }
+      ),
+      /* @__PURE__ */ l(he, { children: [
+        /* @__PURE__ */ e(ue, { children: "No results found." }),
+        /* @__PURE__ */ l(I, { heading: "Quick actions", children: [
+          /* @__PURE__ */ l(V, { onSelect: () => console.log("Reload"), children: [
+            /* @__PURE__ */ e(s, { name: "rotate-ccw", size: "s", className: "mr-2" }),
+            /* @__PURE__ */ e("span", { children: "Reload Page" }),
+            /* @__PURE__ */ l("span", { className: "text-caption-sm ml-auto text-[var(--color-text-tertiary)]", children: [
+              F() ? "⌘" : "Ctrl",
+              "R"
+            ] })
+          ] }),
+          /* @__PURE__ */ l(V, { onSelect: () => c(!1), children: [
+            /* @__PURE__ */ e(s, { name: "search", size: "s", className: "mr-2" }),
+            /* @__PURE__ */ e("span", { children: "Search" }),
+            /* @__PURE__ */ l("span", { className: "text-caption-sm ml-auto text-[var(--color-text-tertiary)]", children: [
+              F() ? "⌘" : "Ctrl",
+              "K"
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ l(I, { heading: "Navigation", children: [
+          o.main.map((r) => /* @__PURE__ */ l(V, { onSelect: () => c(!1), children: [
+            /* @__PURE__ */ e(s, { name: r.icon, size: "s", className: "mr-2" }),
+            /* @__PURE__ */ e("span", { children: r.title })
+          ] }, r.title)),
+          o.operations.map((r) => /* @__PURE__ */ l(V, { onSelect: () => c(!1), children: [
+            /* @__PURE__ */ e(s, { name: r.icon, size: "s", className: "mr-2" }),
+            /* @__PURE__ */ e("span", { children: r.title })
+          ] }, r.title)),
+          o.intelligence.map((r) => /* @__PURE__ */ l(V, { onSelect: () => c(!1), children: [
+            /* @__PURE__ */ e(s, { name: r.icon, size: "s", className: "mr-2" }),
+            /* @__PURE__ */ e("span", { children: r.title })
+          ] }, r.title))
+        ] }),
+        /* @__PURE__ */ e(I, { heading: "Settings", children: o.support.map((r) => /* @__PURE__ */ l(V, { onSelect: () => c(!1), children: [
+          /* @__PURE__ */ e(s, { name: r.icon, size: "s", className: "mr-2" }),
+          /* @__PURE__ */ e("span", { children: r.title })
+        ] }, r.title)) }),
+        /* @__PURE__ */ e(I, { heading: "Switch team", children: m.map((r) => /* @__PURE__ */ l(V, { onSelect: () => c(!1), children: [
+          /* @__PURE__ */ l(z, { size: "s", className: "mr-2", type: "organization", children: [
+            /* @__PURE__ */ e(A, { src: r.avatarUrl, alt: r.name }),
+            /* @__PURE__ */ e(M, { size: "s", type: "organization", children: D(r.name) })
+          ] }),
+          /* @__PURE__ */ e("span", { children: r.name })
+        ] }, r.name)) })
+      ] })
+    ] })
+  ] });
+}
+function ve({
+  navigationData: o,
+  user: n,
+  activeTeam: m,
+  onNavigate: t,
+  navigationMode: p,
+  onNavigationModeChange: h
+}) {
+  const [f, c] = u.useState(!1), v = u.useRef(null);
+  u.useEffect(() => {
+    if (!f) return;
+    const a = (d) => {
+      v.current && !v.current.contains(d.target) && c(!1);
+    };
+    return document.addEventListener("mousedown", a), () => document.removeEventListener("mousedown", a);
+  }, [f]);
+  const N = [
+    ...o.main,
+    ...o.operations,
+    ...o.intelligence
+  ], b = B(n.name);
+  return /* @__PURE__ */ l("div", { style: { width: "100%" }, children: [
+    /* @__PURE__ */ l(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          height: 48,
+          backgroundColor: "#162736",
+          padding: "0 16px"
+        },
+        children: [
+          /* @__PURE__ */ l("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
+            /* @__PURE__ */ l("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
+              /* @__PURE__ */ e("rect", { width: "20", height: "20", rx: "4", fill: "#005F85" }),
+              /* @__PURE__ */ e("rect", { x: "4", y: "4", width: "5", height: "5", rx: "1", fill: "white" }),
+              /* @__PURE__ */ e("rect", { x: "11", y: "4", width: "5", height: "5", rx: "1", fill: "white", opacity: "0.6" }),
+              /* @__PURE__ */ e("rect", { x: "4", y: "11", width: "5", height: "5", rx: "1", fill: "white", opacity: "0.6" }),
+              /* @__PURE__ */ e("rect", { x: "11", y: "11", width: "5", height: "5", rx: "1", fill: "white", opacity: "0.4" })
+            ] }),
+            /* @__PURE__ */ e(
+              "svg",
+              {
+                width: "28",
+                height: "22",
+                viewBox: "0 0 28 22",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: /* @__PURE__ */ e(
+                  "path",
+                  {
+                    d: "M4.39355 0.688477C6.89528 0.688477 8.12094 1.67409 8.12109 3.74609V7.69043H5.5332V2.87695H3.28711V8.03125L8.12109 11.458V18.2705C8.12109 20.3262 6.92916 21.3125 4.39355 21.3125C1.85827 21.3124 0.701172 20.3261 0.701172 18.2705L0.700195 13.7412H3.28711V19.1396H5.5332V12.6777L0.701172 9.23438V3.74609C0.701322 1.67422 1.89214 0.688597 4.39355 0.688477ZM13.8379 0.6875C16.4752 0.687615 17.6152 1.67395 17.6152 3.74609V10.5312L12.6113 13.7236V19.123H15.0273V14.3096H17.6143V18.2705C17.6143 20.3262 16.4235 21.3125 13.8027 21.3125C11.1821 21.3125 10.0244 20.3262 10.0244 18.2705V3.74609H10.0254C10.0254 1.67382 11.2003 0.6875 13.8379 0.6875ZM23.333 0.6875C25.9537 0.6875 27.1113 1.67378 27.1113 3.72949V18.2539H27.1104C27.1104 20.3261 25.9363 21.3125 23.2988 21.3125C20.6612 21.3125 19.5205 20.3262 19.5205 18.2539V11.4688L24.5254 8.27637V2.87695H22.1084V7.69043H19.5215V3.72949C19.5215 1.67384 20.7124 0.687556 23.333 0.6875ZM22.1084 12.2197V19.1396H24.5254V10.5986L22.1084 12.2197ZM12.6113 11.4014L15.0273 9.78027V2.86035H12.6113V11.4014Z",
+                    fill: "white"
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e("div", { style: { flex: 1 } }),
+          /* @__PURE__ */ l("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+            /* @__PURE__ */ e(
+              "button",
+              {
+                onClick: () => t?.("/notifications"),
+                style: {
+                  background: "none",
+                  border: "none",
+                  cursor: "pointer",
+                  padding: 6,
+                  borderRadius: 4,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center"
+                },
+                onMouseEnter: (a) => {
+                  a.currentTarget.style.backgroundColor = "rgba(255,255,255,0.1)";
+                },
+                onMouseLeave: (a) => {
+                  a.currentTarget.style.backgroundColor = "transparent";
+                },
+                children: /* @__PURE__ */ l("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ e("path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" }),
+                  /* @__PURE__ */ e("path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" })
+                ] })
+              }
+            ),
+            /* @__PURE__ */ l("div", { ref: v, style: { position: "relative" }, children: [
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  onClick: () => c((a) => !a),
+                  style: {
+                    width: 32,
+                    height: 32,
+                    borderRadius: "50%",
+                    backgroundColor: "#005F85",
+                    color: "white",
+                    border: "2px solid rgba(255,255,255,0.3)",
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    fontSize: 12,
+                    fontWeight: 600,
+                    padding: 0
+                  },
+                  children: n.avatarUrl ? /* @__PURE__ */ e(
+                    "img",
+                    {
+                      src: n.avatarUrl,
+                      alt: n.name,
+                      style: { width: "100%", height: "100%", borderRadius: "50%", objectFit: "cover" }
+                    }
+                  ) : b
+                }
+              ),
+              f && /* @__PURE__ */ l(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: 40,
+                    right: 0,
+                    width: 220,
+                    backgroundColor: "white",
+                    borderRadius: 8,
+                    boxShadow: "0 4px 24px rgba(0,0,0,0.15)",
+                    zIndex: 9999,
+                    padding: "4px 0",
+                    fontSize: 14
+                  },
+                  children: [
+                    /* @__PURE__ */ l("div", { style: { padding: "8px 12px", borderBottom: "1px solid #e5e7eb" }, children: [
+                      /* @__PURE__ */ e("div", { style: { fontWeight: 600, color: "#111827" }, children: n.name }),
+                      /* @__PURE__ */ e("div", { style: { fontSize: 12, color: "#6b7280" }, children: n.email })
+                    ] }),
+                    /* @__PURE__ */ l("div", { style: { padding: "4px 0", borderBottom: "1px solid #e5e7eb" }, children: [
+                      /* @__PURE__ */ e("div", { style: { padding: "4px 12px", fontSize: 11, fontWeight: 500, color: "#9ca3af", textTransform: "uppercase", letterSpacing: "0.05em" }, children: "Navigation" }),
+                      /* @__PURE__ */ l(
+                        "button",
+                        {
+                          onClick: () => {
+                            h("sidebar"), c(!1);
+                          },
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            width: "100%",
+                            padding: "6px 12px",
+                            background: "none",
+                            border: "none",
+                            cursor: "pointer",
+                            fontSize: 14,
+                            color: "#374151",
+                            textAlign: "left"
+                          },
+                          onMouseEnter: (a) => {
+                            a.currentTarget.style.backgroundColor = "#f3f4f6";
+                          },
+                          onMouseLeave: (a) => {
+                            a.currentTarget.style.backgroundColor = "transparent";
+                          },
+                          children: [
+                            /* @__PURE__ */ e("span", { style: { flex: 1 }, children: "New sidebar navigation" }),
+                            p === "sidebar" && /* @__PURE__ */ e("span", { style: { color: "#005F85", fontWeight: 700 }, children: "✓" })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ l(
+                        "button",
+                        {
+                          onClick: () => {
+                            h("horizontal"), c(!1);
+                          },
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            width: "100%",
+                            padding: "6px 12px",
+                            background: "none",
+                            border: "none",
+                            cursor: "pointer",
+                            fontSize: 14,
+                            color: "#374151",
+                            textAlign: "left"
+                          },
+                          onMouseEnter: (a) => {
+                            a.currentTarget.style.backgroundColor = "#f3f4f6";
+                          },
+                          onMouseLeave: (a) => {
+                            a.currentTarget.style.backgroundColor = "transparent";
+                          },
+                          children: [
+                            /* @__PURE__ */ e("span", { style: { flex: 1 }, children: "Old horizontal menu" }),
+                            p === "horizontal" && /* @__PURE__ */ e("span", { style: { color: "#005F85", fontWeight: 700 }, children: "✓" })
+                          ]
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ e("div", { style: { padding: "4px 0" }, children: /* @__PURE__ */ e(
+                      "button",
+                      {
+                        onClick: () => {
+                          t?.("/auth/sign-out"), c(!1);
+                        },
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          width: "100%",
+                          padding: "6px 12px",
+                          background: "none",
+                          border: "none",
+                          cursor: "pointer",
+                          fontSize: 14,
+                          color: "#dc2626",
+                          textAlign: "left"
+                        },
+                        onMouseEnter: (a) => {
+                          a.currentTarget.style.backgroundColor = "#fef2f2";
+                        },
+                        onMouseLeave: (a) => {
+                          a.currentTarget.style.backgroundColor = "transparent";
+                        },
+                        children: "Sign out"
+                      }
+                    ) })
+                  ]
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          height: 40,
+          backgroundColor: "#1e3a4f",
+          padding: "0 16px",
+          gap: 2,
+          overflowX: "auto"
+        },
+        children: N.map((a) => {
+          const d = a.isActive || (a.items?.some((g) => g.isActive) ?? !1);
+          return /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: (g) => {
+                g.preventDefault(), t?.(a.url);
+              },
+              style: {
+                padding: "6px 14px",
+                borderRadius: 4,
+                border: "none",
+                cursor: "pointer",
+                fontSize: 13,
+                fontWeight: d ? 600 : 400,
+                color: "white",
+                backgroundColor: d ? "#005F85" : "transparent",
+                whiteSpace: "nowrap",
+                transition: "background-color 0.15s"
+              },
+              onMouseEnter: (g) => {
+                d || (g.currentTarget.style.backgroundColor = "rgba(255,255,255,0.1)");
+              },
+              onMouseLeave: (g) => {
+                d || (g.currentTarget.style.backgroundColor = "transparent");
+              },
+              children: a.title
+            },
+            a.title
+          );
+        })
+      }
+    )
+  ] });
+}
+function xe() {
+  const { state: o, toggleSidebar: n } = ae(), m = o === "collapsed";
+  return u.useEffect(() => {
+    const t = (p) => {
+      p.key === "[" && (p.preventDefault(), n());
+    };
+    return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+  }, [n]), /* @__PURE__ */ l(C, { delayDuration: 500, children: [
+    /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ e(oe, { className: "-ml-1" }) }),
+    /* @__PURE__ */ e(k, { side: "bottom", children: /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ e("span", { children: m ? "Expand sidebar" : "Collapse sidebar" }),
+      /* @__PURE__ */ e(E, { size: "s", variant: "dark", children: "[" })
+    ] }) })
+  ] });
+}
+function Le({
+  navigationData: o = be,
+  user: n = me,
+  teams: m = fe,
+  defaultSidebarOpen: t = !0,
+  headerContent: p,
+  headerTabs: h,
+  headerActions: f,
+  children: c,
+  onNavigate: v
+}) {
+  const [N, b] = u.useState("sidebar"), [a] = u.useState(m[0]);
+  return N === "horizontal" ? /* @__PURE__ */ l("div", { className: "h-screen overflow-hidden", style: { display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ e(
+      ve,
+      {
+        navigationData: o,
+        user: n,
+        activeTeam: a,
+        onNavigate: v,
+        navigationMode: N,
+        onNavigationModeChange: b
+      }
+    ),
+    /* @__PURE__ */ e("div", { style: { flex: 1, overflow: "auto", minHeight: 0, backgroundColor: "var(--color-surface-base)" }, children: c })
+  ] }) : /* @__PURE__ */ e("div", { className: "h-screen overflow-hidden", children: /* @__PURE__ */ l(ee, { defaultOpen: t, children: [
+    /* @__PURE__ */ e(
+      ge,
+      {
+        navigationData: o,
+        user: n,
+        teams: m,
+        onNavigate: v,
+        navigationMode: N,
+        onNavigationModeChange: b
+      }
+    ),
+    /* @__PURE__ */ l(re, { children: [
+      (p || f || h) && /* @__PURE__ */ l("header", { className: "flex h-12 shrink-0 items-center gap-2 border-b border-[var(--color-border-primary-subtle)] transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 box-border px-[var(--space-m)]", children: [
+        /* @__PURE__ */ e(xe, {}),
+        /* @__PURE__ */ e(W, { layout: "horizontal", className: "mr-2 h-4" }),
+        /* @__PURE__ */ e("div", { className: "flex-1 min-w-0", children: p }),
+        /* @__PURE__ */ l("div", { className: "flex items-center gap-2 ml-auto shrink-0", children: [
+          h && /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: h }),
+          h && f && /* @__PURE__ */ e("span", { className: "text-[var(--color-text-tertiary)] select-none", "aria-hidden": !0, children: "•" }),
+          f && /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: f })
+        ] })
+      ] }),
+      /* @__PURE__ */ e("div", { className: "flex flex-1 flex-col overflow-auto min-h-0 min-w-0", children: c })
+    ] })
+  ] }) });
+}
+export {
+  Le as AppFrame
+};