@orangecheck/app-design 1.4.0 → 1.5.0

package/dist/chrome.mjs

@@ -1,4 +1,4 @@
-import { X, ChevronDown, Menu, ChevronRight, Sun, Moon, SunMoon, PanelLeft, CircleUser, LogOut, ArrowUpRight } from 'lucide-react';
+import { X, ChevronDown, Menu, ChevronRight, Sun, Moon, SunMoon, PanelLeft, CircleUser, LogOut, ArrowUpRight, Ellipsis } from 'lucide-react';
 import Link from 'next/link';
 import { forwardRef, createContext, useContext, useState, useMemo, useEffect, useRef, useId, useSyncExternalStore, createElement } from 'react';
 import { clsx } from 'clsx';
@@ -349,7 +349,10 @@ var PopoverContent = forwardRef(function PopoverContent2({ className, align = "c
     }
   ) });
 });
-forwardRef(function TooltipContent2({ className, sideOffset = 6, ...props }, ref) {
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = forwardRef(function TooltipContent2({ className, sideOffset = 6, ...props }, ref) {
   return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
     TooltipPrimitive.Content,
     {
@@ -600,48 +603,106 @@ function SectionSwitch({
     }
   );
 }
+function NavBadge({ badge, className }) {
+  if (typeof badge === "number") {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: cn(
+          "absolute flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 text-[0.625rem] font-medium leading-none text-primary-foreground ring-2 ring-background oca-tabular",
+          className
+        ),
+        children: badge > 99 ? "99+" : badge
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("absolute size-2 rounded-full bg-oca-orange-deep ring-2 ring-background", className) });
+}
+var TAB = "flex min-w-0 flex-col items-center justify-center gap-1 rounded-2xl text-[0.6875rem] leading-none outline-none transition-colors [-webkit-tap-highlight-color:transparent] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring";
+function TabFace({ icon, label, badge, active }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          "relative flex h-7 w-12 items-center justify-center rounded-full transition-[background-color,box-shadow] duration-200",
+          "[&_svg]:size-[1.125rem] [&_svg]:shrink-0",
+          active ? "bg-card shadow-sm ring-1 ring-border [&_svg]:stroke-2" : "[&_svg]:stroke-[1.75]"
+        ),
+        children: [
+          icon,
+          badge ? /* @__PURE__ */ jsx(NavBadge, { badge, className: typeof badge === "number" ? "-top-1 right-0.5" : "right-2.5 top-0.5" }) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "max-w-full truncate px-0.5", children: label }),
+    badge ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: badge }) : null
+  ] });
+}
 function TabBar({ items }) {
+  const [more, setMore] = useState(false);
+  const overflow = items.length > 5;
+  const shown = overflow ? items.slice(0, 4) : items;
+  const rest = overflow ? items.slice(4) : [];
+  const restBadge = rest.find((it) => it.badge)?.badge;
   return /* @__PURE__ */ jsx(
     "nav",
     {
       "aria-label": "Pages",
       "data-oca-tabbar": "",
       className: "fixed inset-x-0 bottom-0 z-40 border-t border-border bg-background/90 pb-[env(safe-area-inset-bottom)] backdrop-blur-md md:hidden",
-      children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsxs(
         "div",
         {
           className: "mx-auto grid h-14 max-w-[32rem] px-1.5",
-          style: { gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))` },
-          children: items.map((it) => /* @__PURE__ */ jsxs(
-            Link,
-            {
-              href: it.href,
-              "aria-current": it.active ? "page" : void 0,
-              className: cn(
-                "flex min-w-0 flex-col items-center justify-center gap-1 rounded-2xl text-[0.6875rem] leading-none outline-none transition-colors [-webkit-tap-highlight-color:transparent] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
-                it.active ? "text-foreground" : "text-muted-foreground hover:text-foreground"
+          style: { gridTemplateColumns: `repeat(${shown.length + (overflow ? 1 : 0)}, minmax(0, 1fr))` },
+          children: [
+            shown.map((it) => /* @__PURE__ */ jsx(
+              Link,
+              {
+                href: it.href,
+                "aria-current": it.active ? "page" : void 0,
+                className: cn(TAB, it.active ? "text-foreground" : "text-muted-foreground hover:text-foreground"),
+                children: /* @__PURE__ */ jsx(TabFace, { icon: it.icon, label: it.label, badge: it.badge, active: it.active })
+              },
+              it.href
+            )),
+            overflow ? /* @__PURE__ */ jsxs(Sheet, { open: more, onOpenChange: setMore, children: [
+              /* @__PURE__ */ jsx(
+                SheetTrigger,
+                {
+                  className: cn(TAB, rest.some((it) => it.active) ? "text-foreground" : "text-muted-foreground hover:text-foreground"),
+                  children: /* @__PURE__ */ jsx(TabFace, { icon: /* @__PURE__ */ jsx(Ellipsis, {}), label: "More", badge: restBadge ? true : void 0, active: rest.some((it) => it.active) })
+                }
               ),
-              children: [
-                /* @__PURE__ */ jsxs(
-                  "span",
+              /* @__PURE__ */ jsxs(SheetContent, { side: "bottom", className: "pb-[calc(1.5rem+env(safe-area-inset-bottom))]", children: [
+                /* @__PURE__ */ jsx(SheetTitle, { className: "px-1 text-[1.0625rem] font-medium", children: "More" }),
+                /* @__PURE__ */ jsx("div", { className: "mt-4 grid grid-cols-3 gap-2", children: rest.map((it) => /* @__PURE__ */ jsxs(
+                  Link,
                   {
+                    href: it.href,
+                    onClick: () => setMore(false),
+                    "aria-current": it.active ? "page" : void 0,
                     className: cn(
-                      "relative flex h-7 w-12 items-center justify-center rounded-full transition-[background-color,box-shadow] duration-200",
-                      "[&_svg]:size-[1.125rem] [&_svg]:shrink-0",
-                      it.active ? "bg-card shadow-sm ring-1 ring-border [&_svg]:stroke-2" : "[&_svg]:stroke-[1.75]"
+                      "flex min-h-20 flex-col items-center justify-center gap-2 rounded-2xl border px-2 text-center text-[0.8125rem] transition-colors",
+                      "[&_svg]:size-5",
+                      it.active ? "border-foreground bg-card text-foreground" : "border-border text-muted-foreground hover:text-foreground"
                     ),
                     children: [
-                      it.icon,
-                      it.badge ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute right-2.5 top-0.5 size-2 rounded-full bg-oca-orange ring-2 ring-background" }) : null
+                      /* @__PURE__ */ jsxs("span", { className: "relative", children: [
+                        it.icon,
+                        it.badge ? /* @__PURE__ */ jsx(NavBadge, { badge: it.badge, className: typeof it.badge === "number" ? "-right-3 -top-2" : "-right-1 -top-0.5" }) : null
+                      ] }),
+                      /* @__PURE__ */ jsx("span", { className: "max-w-full truncate", children: it.label }),
+                      it.badge ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: it.badge }) : null
                     ]
-                  }
-                ),
-                /* @__PURE__ */ jsx("span", { className: "max-w-full truncate px-0.5", children: it.label }),
-                it.badge ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: it.badge }) : null
-              ]
-            },
-            it.href
-          ))
+                  },
+                  it.href
+                )) })
+              ] })
+            ] }) : null
+          ]
         }
       )
     }
@@ -649,7 +710,11 @@ function TabBar({ items }) {
 }
 function tabsFor(groups) {
   const items = groups.flatMap((g) => g.items);
-  return items.length >= 2 && items.length <= 5 && items.every((it) => it.icon) ? items : null;
+  return items.length >= 2 && items.every((it) => it.icon) ? items : null;
+}
+function sectionTabs(sections, current) {
+  if (!sections || !current || sections.length < 2 || !sections.every((sec) => sec.icon)) return null;
+  return sections.map((sec) => ({ href: sec.href, label: sec.label, icon: sec.icon, active: sec.id === current.id }));
 }
 var activeItem = (groups) => groups.flatMap((g) => g.items).find((it) => it.active);
 var warned = /* @__PURE__ */ new Set();
@@ -664,7 +729,10 @@ function warnDuplicateLabels(groups) {
     seen.add(it.label);
   }
 }
-function AppShell({
+function AppShell(props) {
+  return props.variant === "rail" ? /* @__PURE__ */ jsx(RailShell, { ...props }) : /* @__PURE__ */ jsx(SidebarShell, { ...props });
+}
+function SidebarShell({
   nav,
   sections,
   activeSection,
@@ -682,7 +750,8 @@ function AppShell({
   const current = sections && sections.length > 0 ? sections.find((sec) => sec.id === activeSection) ?? sections.find((sec) => activeItem(sec.groups)) ?? sections[0] : void 0;
   const groups = current ? [...current.groups, ...persistent] : [...nav ?? [], ...persistent];
   warnDuplicateLabels(groups);
-  const tabs = current ? null : tabsFor(groups);
+  const sectionTabsFor = sectionTabs(sections, current);
+  const tabs = current ? sectionTabsFor : tabsFor(groups);
   const page = activeItem(groups);
   const place = useMemo(
     () => ({
@@ -710,8 +779,8 @@ function AppShell({
                 {
                   className: cn(
                     "inline-flex size-10 items-center justify-center rounded-full hover:bg-accent",
-                    // The tab bar holds every page; the sheet is left for a footer.
-                    tabs && !footer && "max-md:hidden"
+                    // The tab bar holds every page; the sheet is left for a footer. Section tabs leave the pages here.
+                    tabs && !sectionTabsFor && !footer && "max-md:hidden"
                   ),
                   "aria-label": "Open navigation",
                   children: /* @__PURE__ */ jsx(Menu, { className: "size-5" })
@@ -719,8 +788,8 @@ function AppShell({
               ),
               /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "flex flex-col gap-6 overflow-y-auto p-4 pt-16", children: [
                 /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: "Navigation" }),
-                switcher,
-                /* @__PURE__ */ jsx("div", { className: tabs ? "max-md:hidden" : void 0, children: /* @__PURE__ */ jsx(SideNav, { groups, onNavigate: () => setOpen(false) }) }),
+                switcher ? /* @__PURE__ */ jsx("div", { className: sectionTabsFor ? "max-md:hidden" : void 0, children: switcher }) : null,
+                /* @__PURE__ */ jsx("div", { className: tabs && !sectionTabsFor ? "max-md:hidden" : void 0, children: /* @__PURE__ */ jsx(SideNav, { groups, onNavigate: () => setOpen(false) }) }),
                 footer ? /* @__PURE__ */ jsx("div", { className: "mt-auto flex flex-col gap-3", children: footer }) : null
               ] })
             ] }),
@@ -734,7 +803,7 @@ function AppShell({
               className: cn(
                 "flex h-9 items-center gap-1.5 border-t border-border px-4 text-[0.875rem]",
                 // The active tab already names the page.
-                tabs && !pageOverride && "max-md:hidden"
+                tabs && !sectionTabsFor && !pageOverride && "max-md:hidden"
               ),
               children: [
                 place.section ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -767,6 +836,64 @@ function AppShell({
     }
   ) });
 }
+function RailItem({ item }) {
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Link,
+      {
+        href: item.href,
+        "aria-current": item.active ? "page" : void 0,
+        className: cn(
+          "relative flex size-10 items-center justify-center rounded-xl outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring",
+          "[&_svg]:size-5 [&_svg]:shrink-0",
+          item.active ? "bg-card text-foreground shadow-sm ring-1 ring-border" : "text-muted-foreground hover:bg-accent hover:text-foreground"
+        ),
+        children: [
+          item.icon,
+          /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+            item.label,
+            item.badge ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              ", ",
+              item.badge
+            ] }) : null
+          ] }),
+          item.badge ? /* @__PURE__ */ jsx(NavBadge, { badge: item.badge, className: typeof item.badge === "number" ? "-right-1 -top-1" : "right-1 top-1" }) : null
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: item.label })
+  ] });
+}
+function RailShell({ nav = [], persistent = [], page: pageOverride, header, account, banner, children, className }) {
+  const main = nav.flatMap((g) => g.items);
+  const foot = persistent.flatMap((g) => g.items);
+  warnDuplicateLabels([...nav, ...persistent]);
+  const tabs = tabsFor([{ items: [...main, ...foot] }]);
+  const active = activeItem([...nav, ...persistent]);
+  const place = useMemo(() => ({ page: pageOverride ?? active?.label }), [pageOverride, active?.label]);
+  return /* @__PURE__ */ jsx(ShellContext.Provider, { value: place, children: /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 300, children: /* @__PURE__ */ jsxs("div", { className: cn("flex h-dvh flex-col overflow-hidden bg-background", className), children: [
+    header,
+    banner,
+    /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1", children: [
+      /* @__PURE__ */ jsxs("nav", { "aria-label": "Pages", className: "hidden w-14 shrink-0 flex-col items-center gap-1 border-r border-border py-3 md:flex", children: [
+        main.map((it) => /* @__PURE__ */ jsx(RailItem, { item: it }, it.href)),
+        /* @__PURE__ */ jsxs("div", { className: "mt-auto flex flex-col items-center gap-1", children: [
+          foot.map((it) => /* @__PURE__ */ jsx(RailItem, { item: it }, it.href)),
+          account
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "main",
+        {
+          id: "main-content",
+          className: cn("flex min-h-0 min-w-0 flex-1 flex-col", tabs && "max-md:pb-[calc(3.5rem_+_env(safe-area-inset-bottom))]"),
+          children
+        }
+      )
+    ] }),
+    tabs ? /* @__PURE__ */ jsx(TabBar, { items: tabs }) : null
+  ] }) }) });
+}
 function AccountMenu({
   name,
   detail,
@@ -1231,12 +1358,14 @@ function SignInFrame({
   error,
   fineprint,
   brand,
-  home = "/",
+  home,
+  protocol: protocol2,
   back,
   art,
   caption,
   className
 }) {
+  const homeHref = home ?? (protocol2 ? protocolSite(protocol2).pageHref : OCHK_IO);
   return /* @__PURE__ */ jsxs(
     "main",
     {
@@ -1245,14 +1374,14 @@ function SignInFrame({
       children: [
         /* @__PURE__ */ jsxs("section", { className: "flex flex-col px-4 pb-8 pt-5 sm:px-8 lg:px-14 lg:pt-8", children: [
           /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between gap-4", children: [
-            /* @__PURE__ */ jsxs(Link, { href: home, className: "w-fit rounded-lg", children: [
+            /* @__PURE__ */ jsxs(Link, { href: homeHref, className: "w-fit rounded-lg", children: [
               brand ?? /* @__PURE__ */ jsx(Lockup, { size: 28 }),
               /* @__PURE__ */ jsx("span", { className: "sr-only", children: " home" })
             ] }),
             back === void 0 ? /* @__PURE__ */ jsx(
               Link,
               {
-                href: home,
+                href: homeHref,
                 className: "text-[0.9375rem] text-muted-foreground underline-offset-4 hover:text-foreground hover:underline",
                 children: "Back to home"
               }
@@ -1599,6 +1728,7 @@ function DocsShell({
     footer ?? /* @__PURE__ */ jsx(OchkIoFooter, {})
   ] });
 }
+var SiteHomeContext = sharedContext("site-home", void 0);
 var OCHK_APP_ACCOUNT = "https://ochk.app/me/account";
 function onHistory(change) {
   window.addEventListener("popstate", change);
@@ -1670,6 +1800,7 @@ function ToolShell({
   children
 }) {
   const p = protocolSite(protocol2);
+  const homeHref = home ?? p.pageHref;
   const app = variant === "app";
   const tabs = app ? null : tabsFor([{ items: [...tools] }]);
   const about = /* @__PURE__ */ jsxs(
@@ -1699,7 +1830,7 @@ function ToolShell({
           SiteHeader,
           {
             variant: "tool",
-            home: home ?? p.pageHref,
+            home: homeHref,
             product: p.label,
             family: protocol2,
             nav: tools.map((t) => ({ href: t.href, label: t.label, active: t.active })),
@@ -1724,7 +1855,7 @@ function ToolShell({
             {
               id: "main-content",
               className: cn("min-w-0 flex-1", app ? "flex min-h-0 flex-col" : "px-4 pb-16 pt-8 md:px-8 md:pt-10"),
-              children: app ? children : /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-[72rem]", children })
+              children: /* @__PURE__ */ jsx(SiteHomeContext.Provider, { value: homeHref, children: app ? children : /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-[72rem]", children }) })
             }
           )
         ] }),