@withpotter/components 0.13.0-next.101

package/dist/mobile/primitives/bottom-tab-bar.js

@@ -0,0 +1,461 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { createPortal } from "react-dom";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import {
+  ArrowLeft,
+  House,
+  Layers,
+  Menu as MenuIcon,
+  Plus,
+  Palette,
+  Search,
+  Settings,
+  CircleHelp,
+  Toolbox,
+  Type,
+  X
+} from "lucide-react";
+import { useRouter } from "next/navigation";
+import { usePathname } from "@withpotter/lib/use-pathname";
+import { useMobileGlobalUi } from "@withpotter/components/mobile/mobile-global-ui-context";
+import { useNavGroups } from "@withpotter/lib/use-nav-groups";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { effectiveModuleLabels } from "@withpotter/lib/effective-module-labels";
+import { rowLabel } from "@withpotter/components/sidebar/rail-edits";
+import { ScreenSheet } from "./screen-frame";
+import { NavGroup } from "../nav-group";
+import { useMobileEditorMenuItems } from "../mobile-editor-menu-context";
+const TAB_ROUTES = {
+  today: "/dashboard",
+  manage: "/dashboard/orders",
+  catalog: "/dashboard/catalog",
+  store: "/dashboard/store"
+};
+const subscribeToMount = () => () => {
+};
+const clientMounted = () => true;
+const serverMounted = () => false;
+const MOBILE_BACK_RETURN_KEY = "pb:mobile-back-return";
+function MenuOverlay({
+  onDismiss,
+  editor,
+  onHelp
+}) {
+  const groups = useNavGroups();
+  const { tenant } = useAuth();
+  const toolkitLabel = rowLabel(
+    effectiveModuleLabels(tenant?.settings),
+    "toolkit",
+    "Toolkit"
+  );
+  const editorMenu = useMobileEditorMenuItems();
+  const reduceMotion = useReducedMotion();
+  if (editor) {
+    const background = editorMenu.find((item) => item.label === "Background");
+    const sections = editorMenu.find((item) => item.label === "Sections");
+    const fonts = editorMenu.find((item) => item.label === "Fonts");
+    const history = editorMenu.find((item) => item.label === "Change history");
+    const controlClass = "flex min-h-10 items-center justify-center gap-2 rounded-xl px-2 text-center text-sm font-semibold";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-x-0 bottom-0 z-[var(--z-sticky)] flex justify-center bg-black/25 px-3 pb-[calc(env(safe-area-inset-bottom)+4.5rem)]",
+        style: {
+          top: "calc(env(safe-area-inset-top) + var(--mb-app-bar-height))"
+        },
+        onClick: onDismiss,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "w-full max-w-xs self-end overflow-hidden rounded-2xl border p-2 shadow-lg",
+            style: {
+              background: "var(--mb-surface)",
+              borderColor: "var(--mb-border)"
+            },
+            onClick: (event) => event.stopPropagation(),
+            role: "dialog",
+            "aria-label": "Editor settings",
+            children: [
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: "px-3 pb-2 pt-2 text-center text-2xs font-semibold uppercase tracking-[0.08em]",
+                  style: { color: "var(--mb-text-tertiary)" },
+                  children: "Page controls"
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+                background && /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: controlClass,
+                    style: {
+                      color: "var(--mb-text)",
+                      background: "var(--mb-elevated)"
+                    },
+                    onClick: () => {
+                      background.onSelect();
+                      onDismiss();
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(Palette, { className: "size-4" }),
+                      " Background"
+                    ]
+                  }
+                ),
+                sections && /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: controlClass,
+                    style: {
+                      color: "var(--mb-text)",
+                      background: "var(--mb-elevated)"
+                    },
+                    onClick: () => {
+                      sections.onSelect();
+                      onDismiss();
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(Layers, { className: "size-4" }),
+                      " Sections"
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: "px-3 pb-2 pt-5 text-center text-2xs font-semibold uppercase tracking-[0.08em]",
+                  style: { color: "var(--mb-text-tertiary)" },
+                  children: "Site controls"
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: [
+                fonts && { ...fonts, icon: Type },
+                { label: "Help", icon: CircleHelp, onSelect: () => onHelp?.() },
+                history
+              ].filter(Boolean).map((item) => {
+                if (!item) return null;
+                const Icon = item.icon;
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: controlClass,
+                    style: {
+                      color: "var(--mb-text)",
+                      background: "var(--mb-elevated)"
+                    },
+                    onClick: () => {
+                      item.onSelect();
+                      onDismiss();
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(Icon, { className: "size-4" }),
+                      /* @__PURE__ */ jsx("span", { children: item.label })
+                    ]
+                  },
+                  item.label
+                );
+              }) })
+            ]
+          }
+        )
+      }
+    );
+  }
+  const flattenItems = (items) => items.flatMap((item) => [
+    item,
+    ...item.children ? flattenItems(item.children) : []
+  ]);
+  const groupItems = (group) => {
+    return [
+      ...group.href ? [
+        {
+          id: `${group.id}-link`,
+          name: (group.landingLabel ?? group.label).replace(
+            "{label}",
+            group.label.toLowerCase()
+          ),
+          href: group.href,
+          icon: group.icon
+        }
+      ] : [],
+      ...flattenItems(group.items ?? []),
+      ...group.sections?.flatMap((section) => flattenItems(section.items)) ?? []
+    ];
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "fixed inset-x-0 bottom-0 z-[var(--z-sticky)] flex min-h-0 flex-col",
+      style: {
+        top: "calc(env(safe-area-inset-top) + var(--mb-app-bar-height))",
+        background: "transparent"
+      },
+      children: /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          className: "flex min-h-0 flex-1",
+          initial: reduceMotion ? false : { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: reduceMotion ? void 0 : { opacity: 0 },
+          transition: { duration: 0.16, ease: "easeOut" },
+          children: /* @__PURE__ */ jsx(ScreenSheet, { title: "Explore", children: /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              className: "mx-auto w-full max-w-xl space-y-6 pb-8 pt-4",
+              initial: reduceMotion ? false : { opacity: 0, y: 10 },
+              animate: { opacity: 1, y: 0 },
+              transition: { duration: 0.24, ease: "easeOut", delay: 0.04 },
+              children: [
+                /* @__PURE__ */ jsx(
+                  NavGroup,
+                  {
+                    label: "BUSINESS",
+                    items: [
+                      { id: "today", name: "Home", href: "/dashboard", icon: House },
+                      {
+                        id: "toolkit",
+                        name: toolkitLabel,
+                        href: "/dashboard/toolkit",
+                        icon: Toolbox
+                      }
+                    ],
+                    onNavigate: onDismiss
+                  }
+                ),
+                groups.filter((group) => group.id !== "settings").map((group) => /* @__PURE__ */ jsx(
+                  NavGroup,
+                  {
+                    label: group.label.toUpperCase(),
+                    items: groupItems(group),
+                    onNavigate: onDismiss
+                  },
+                  group.id
+                )),
+                /* @__PURE__ */ jsx(
+                  NavGroup,
+                  {
+                    label: "ACCOUNT",
+                    items: [
+                      {
+                        id: "account-settings",
+                        name: "Account settings",
+                        href: "/dashboard/settings",
+                        icon: Settings
+                      }
+                    ],
+                    onNavigate: onDismiss
+                  }
+                )
+              ]
+            }
+          ) })
+        }
+      )
+    }
+  );
+}
+function BottomTabBar({ addAction }) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const { closeSearch, openSearch, searchOpen } = useMobileGlobalUi();
+  const isHome = pathname === "/dashboard";
+  const isWebsite = pathname === "/dashboard/business";
+  const isEditor = pathname.startsWith("/dashboard/editor/");
+  const isNestedPage = !isHome && !isWebsite && !isEditor;
+  const showsBack = isNestedPage || isEditor;
+  const [backState, setBackState] = React.useState("idle");
+  const [surface, setSurface] = React.useState(null);
+  const homeActive = isHome && !searchOpen && surface === null;
+  const mounted = React.useSyncExternalStore(
+    subscribeToMount,
+    clientMounted,
+    serverMounted
+  );
+  const closeEditorPanel = () => window.dispatchEvent(new CustomEvent("pb:close-editor-panel"));
+  React.useEffect(() => {
+    setSurface(null);
+    const pendingReturn = window.sessionStorage.getItem(MOBILE_BACK_RETURN_KEY);
+    if (!pendingReturn) {
+      setBackState("idle");
+      return;
+    }
+    if (pendingReturn !== pathname) {
+      setBackState("home");
+    } else {
+      window.sessionStorage.removeItem(MOBILE_BACK_RETURN_KEY);
+      setBackState("idle");
+    }
+  }, [pathname]);
+  const handleBackOrHome = () => {
+    closeSearch();
+    setSurface(null);
+    if (backState === "home" || !showsBack) {
+      window.sessionStorage.removeItem(MOBILE_BACK_RETURN_KEY);
+      router.push("/dashboard");
+      return;
+    }
+    if (window.history.length <= 1) {
+      router.push("/dashboard");
+      return;
+    }
+    window.sessionStorage.setItem(MOBILE_BACK_RETURN_KEY, pathname);
+    router.back();
+  };
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "pointer-events-none fixed inset-x-0 z-[var(--z-dropdown)] flex justify-center",
+        style: {
+          bottom: 0,
+          paddingBottom: "max(12px, env(safe-area-inset-bottom))"
+        },
+        children: /* @__PURE__ */ jsxs(
+          "nav",
+          {
+            "aria-label": "Quick actions",
+            className: "pointer-events-auto flex h-14 items-center gap-1 rounded-xl border px-1",
+            style: {
+              borderColor: "color-mix(in srgb, var(--mb-border) 58%, transparent)",
+              background: "var(--mb-surface)",
+              backdropFilter: "blur(20px) saturate(160%)",
+              WebkitBackdropFilter: "blur(20px) saturate(160%)",
+              boxShadow: "var(--shadow-lg)"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": showsBack ? "Back" : "Home",
+                  "aria-current": homeActive ? "page" : void 0,
+                  className: "flex h-[46px] items-center gap-2 rounded-lg px-3",
+                  onClick: handleBackOrHome,
+                  style: {
+                    background: homeActive ? "var(--mb-elevated)" : "transparent"
+                  },
+                  children: [
+                    showsBack ? /* @__PURE__ */ jsx(
+                      ArrowLeft,
+                      {
+                        className: "size-5",
+                        style: { color: "var(--mb-text)" }
+                      }
+                    ) : /* @__PURE__ */ jsx(House, { className: "size-5", style: { color: "var(--mb-text)" } }),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "text-base font-medium",
+                        style: { color: "var(--mb-text)" },
+                        children: showsBack ? "Back" : "Home"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "h-6 w-px",
+                  "aria-hidden": true,
+                  style: { background: "var(--mb-border)" }
+                }
+              ),
+              isEditor ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Add",
+                  className: "flex size-[46px] items-center justify-center rounded-lg",
+                  onClick: () => {
+                    closeSearch();
+                    setSurface(null);
+                    closeEditorPanel();
+                    addAction?.();
+                  },
+                  children: /* @__PURE__ */ jsx(Plus, { className: "size-5", style: { color: "var(--mb-text)" } })
+                }
+              ) : /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Find",
+                  className: "flex size-[46px] items-center justify-center rounded-lg",
+                  onClick: () => {
+                    setSurface(null);
+                    openSearch();
+                  },
+                  children: /* @__PURE__ */ jsx(Search, { className: "size-5", style: { color: "var(--mb-text)" } })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "h-6 w-px",
+                  "aria-hidden": true,
+                  style: { background: "var(--mb-border)" }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": surface === "menu" ? "Close more navigation" : "More",
+                  "aria-expanded": surface === "menu",
+                  className: "flex size-[46px] items-center justify-center rounded-lg",
+                  onClick: () => {
+                    closeEditorPanel();
+                    setSurface(surface === "menu" ? null : "menu");
+                  },
+                  children: surface === "menu" ? /* @__PURE__ */ jsx(X, { className: "size-5", style: { color: "var(--mb-text)" } }) : /* @__PURE__ */ jsx(
+                    MenuIcon,
+                    {
+                      className: "size-5",
+                      style: { color: "var(--mb-text)" }
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: surface === "menu" && /* @__PURE__ */ jsx(
+      MenuOverlay,
+      {
+        onDismiss: () => setSurface(null),
+        editor: isEditor,
+        onHelp: () => router.push("/dashboard/help")
+      }
+    ) })
+  ] });
+  if (!mounted) return null;
+  return createPortal(content, document.body);
+}
+const TabBar = BottomTabBar;
+const MOBILE_TAB_BAR_HEIGHT = 50;
+const MOBILE_BOTTOM_GAP = 18;
+const MOBILE_BOTTOM_OFFSET = "var(--mb-safe-bottom)";
+const MOBILE_BOTTOM_OFFSET_CLASS = "mb-safe-bottom";
+const MOBILE_BOTTOM_OFFSET_MIN = "var(--mb-safe-bottom-min)";
+const MOBILE_BOTTOM_OFFSET_MIN_CLASS = "mb-safe-bottom-min";
+export {
+  BottomTabBar,
+  MOBILE_BOTTOM_GAP,
+  MOBILE_BOTTOM_OFFSET,
+  MOBILE_BOTTOM_OFFSET_CLASS,
+  MOBILE_BOTTOM_OFFSET_MIN,
+  MOBILE_BOTTOM_OFFSET_MIN_CLASS,
+  MOBILE_TAB_BAR_HEIGHT,
+  TAB_ROUTES,
+  TabBar
+};
+//# sourceMappingURL=bottom-tab-bar.js.map

package/dist/mobile/primitives/bottom-tab-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/primitives/bottom-tab-bar.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { createPortal } from 'react-dom';\nimport { AnimatePresence, motion, useReducedMotion } from 'motion/react';\nimport {\n  ArrowLeft,\n  House,\n  Layers,\n  Menu as MenuIcon,\n  Plus,\n  Palette,\n  Search,\n  Settings,\n  CircleHelp,\n  Toolbox,\n  Type,\n  X,\n} from 'lucide-react';\nimport { useRouter } from 'next/navigation';\nimport { usePathname } from '@withpotter/lib/use-pathname';\nimport { useMobileGlobalUi } from '@withpotter/components/mobile/mobile-global-ui-context';\nimport { useNavGroups } from '@withpotter/lib/use-nav-groups';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { effectiveModuleLabels } from '@withpotter/lib/effective-module-labels';\nimport { rowLabel } from '@withpotter/components/sidebar/rail-edits';\nimport {\n  type NavGroup as SidebarNavGroup,\n  type NavItem,\n} from '@withpotter/components/sidebar/config';\nimport { ScreenSheet } from './screen-frame';\nimport { NavGroup, type NavItemLike } from '../nav-group';\nimport { useMobileEditorMenuItems } from '../mobile-editor-menu-context';\n\nexport type TabId = 'today' | 'manage' | 'catalog' | 'store';\n\n/** Kept for callers that still use the legacy route map. */\nexport const TAB_ROUTES: Record<TabId, string> = {\n  today: '/dashboard',\n  manage: '/dashboard/orders',\n  catalog: '/dashboard/catalog',\n  store: '/dashboard/store',\n};\n\nconst subscribeToMount = () => () => {};\nconst clientMounted = () => true;\nconst serverMounted = () => false;\nconst MOBILE_BACK_RETURN_KEY = 'pb:mobile-back-return';\n\nfunction MenuOverlay({\n  onDismiss,\n  editor,\n  onHelp,\n}: {\n  onDismiss: () => void;\n  editor?: boolean;\n  onHelp?: () => void;\n}) {\n  const groups = useNavGroups();\n  const { tenant } = useAuth();\n  // The same word the desktop rail shows for Toolkit, the merchant's rename included.\n  const toolkitLabel = rowLabel(\n    effectiveModuleLabels(tenant?.settings as Record<string, unknown> | undefined),\n    'toolkit',\n    'Toolkit',\n  );\n  const editorMenu = useMobileEditorMenuItems();\n  const reduceMotion = useReducedMotion();\n\n  if (editor) {\n    const background = editorMenu.find((item) => item.label === 'Background');\n    const sections = editorMenu.find((item) => item.label === 'Sections');\n    const fonts = editorMenu.find((item) => item.label === 'Fonts');\n    const history = editorMenu.find((item) => item.label === 'Change history');\n    const controlClass =\n      'flex min-h-10 items-center justify-center gap-2 rounded-xl px-2 text-center text-sm font-semibold';\n    return (\n      <div\n        className=\"fixed inset-x-0 bottom-0 z-[var(--z-sticky)] flex justify-center bg-black/25 px-3 pb-[calc(env(safe-area-inset-bottom)+4.5rem)]\"\n        style={{\n          top: 'calc(env(safe-area-inset-top) + var(--mb-app-bar-height))',\n        }}\n        onClick={onDismiss}\n      >\n        <div\n          className=\"w-full max-w-xs self-end overflow-hidden rounded-2xl border p-2 shadow-lg\"\n          style={{\n            background: 'var(--mb-surface)',\n            borderColor: 'var(--mb-border)',\n          }}\n          onClick={(event) => event.stopPropagation()}\n          role=\"dialog\"\n          aria-label=\"Editor settings\"\n        >\n          <p\n            className=\"px-3 pb-2 pt-2 text-center text-2xs font-semibold uppercase tracking-[0.08em]\"\n            style={{ color: 'var(--mb-text-tertiary)' }}\n          >\n            Page controls\n          </p>\n          <div className=\"grid grid-cols-2 gap-2\">\n            {background && (\n              <button\n                type=\"button\"\n                className={controlClass}\n                style={{\n                  color: 'var(--mb-text)',\n                  background: 'var(--mb-elevated)',\n                }}\n                onClick={() => {\n                  background.onSelect();\n                  onDismiss();\n                }}\n              >\n                <Palette className=\"size-4\" /> Background\n              </button>\n            )}\n            {sections && (\n              <button\n                type=\"button\"\n                className={controlClass}\n                style={{\n                  color: 'var(--mb-text)',\n                  background: 'var(--mb-elevated)',\n                }}\n                onClick={() => {\n                  sections.onSelect();\n                  onDismiss();\n                }}\n              >\n                <Layers className=\"size-4\" /> Sections\n              </button>\n            )}\n          </div>\n          <p\n            className=\"px-3 pb-2 pt-5 text-center text-2xs font-semibold uppercase tracking-[0.08em]\"\n            style={{ color: 'var(--mb-text-tertiary)' }}\n          >\n            Site controls\n          </p>\n          <div className=\"grid grid-cols-2 gap-2\">\n            {[\n              fonts && { ...fonts, icon: Type },\n              { label: 'Help', icon: CircleHelp, onSelect: () => onHelp?.() },\n              history,\n            ]\n              .filter(Boolean)\n              .map((item) => {\n                if (!item) return null;\n                const Icon = item.icon;\n                return (\n                  <button\n                    key={item.label}\n                    type=\"button\"\n                    className={controlClass}\n                    style={{\n                      color: 'var(--mb-text)',\n                      background: 'var(--mb-elevated)',\n                    }}\n                    onClick={() => {\n                      item.onSelect();\n                      onDismiss();\n                    }}\n                  >\n                    <Icon className=\"size-4\" />\n                    <span>{item.label}</span>\n                  </button>\n                );\n              })}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  const flattenItems = (items: NavItem[]): NavItemLike[] =>\n    items.flatMap((item) => [\n      item,\n      ...(item.children ? flattenItems(item.children) : []),\n    ]);\n\n  const groupItems = (group: SidebarNavGroup): NavItemLike[] => {\n    return [\n      ...(group.href\n        ? [\n            {\n              id: `${group.id}-link`,\n              name: (group.landingLabel ?? group.label).replace(\n                '{label}',\n                group.label.toLowerCase(),\n              ),\n              href: group.href,\n              icon: group.icon,\n            } satisfies NavItem,\n          ]\n        : []),\n      ...flattenItems(group.items ?? []),\n      ...(group.sections?.flatMap((section) => flattenItems(section.items)) ??\n        []),\n    ];\n  };\n\n  return (\n    <div\n      className=\"fixed inset-x-0 bottom-0 z-[var(--z-sticky)] flex min-h-0 flex-col\"\n      style={{\n        top: 'calc(env(safe-area-inset-top) + var(--mb-app-bar-height))',\n        background: 'transparent',\n      }}\n    >\n      <motion.div\n        className=\"flex min-h-0 flex-1\"\n        initial={reduceMotion ? false : { opacity: 0 }}\n        animate={{ opacity: 1 }}\n        exit={reduceMotion ? undefined : { opacity: 0 }}\n        transition={{ duration: 0.16, ease: 'easeOut' }}\n      >\n        <ScreenSheet title=\"Explore\">\n          <motion.div\n            className=\"mx-auto w-full max-w-xl space-y-6 pb-8 pt-4\"\n            initial={reduceMotion ? false : { opacity: 0, y: 10 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ duration: 0.24, ease: 'easeOut', delay: 0.04 }}\n          >\n            <NavGroup\n              label=\"BUSINESS\"\n              items={[\n                { id: 'today', name: 'Home', href: '/dashboard', icon: House },\n                {\n                  id: 'toolkit',\n                  name: toolkitLabel,\n                  href: '/dashboard/toolkit',\n                  icon: Toolbox,\n                },\n              ]}\n              onNavigate={onDismiss}\n            />\n            {groups\n              .filter((group) => group.id !== 'settings')\n              .map((group) => (\n                <NavGroup\n                  key={group.id}\n                  label={group.label.toUpperCase()}\n                  items={groupItems(group)}\n                  onNavigate={onDismiss}\n                />\n              ))}\n            <NavGroup\n              label=\"ACCOUNT\"\n              items={[\n                {\n                  id: 'account-settings',\n                  name: 'Account settings',\n                  href: '/dashboard/settings',\n                  icon: Settings,\n                },\n              ]}\n              onNavigate={onDismiss}\n            />\n          </motion.div>\n        </ScreenSheet>\n      </motion.div>\n    </div>\n  );\n}\n\nexport function BottomTabBar({ addAction }: { addAction?: () => void }) {\n  const router = useRouter();\n  const pathname = usePathname();\n  const { closeSearch, openSearch, searchOpen } = useMobileGlobalUi();\n  const isHome = pathname === '/dashboard';\n  const isWebsite = pathname === '/dashboard/business';\n  const isEditor = pathname.startsWith('/dashboard/editor/');\n  // Settings is reached from the avatar, not from a tab: it is a place you\n  // went to, so the bar offers the way back rather than Home.\n  const isNestedPage = !isHome && !isWebsite && !isEditor;\n  const showsBack = isNestedPage || isEditor;\n  const [backState, setBackState] = React.useState<'idle' | 'home'>('idle');\n  const [surface, setSurface] = React.useState<'find' | 'menu' | null>(null);\n  const homeActive = isHome && !searchOpen && surface === null;\n  const mounted = React.useSyncExternalStore(\n    subscribeToMount,\n    clientMounted,\n    serverMounted,\n  );\n  const closeEditorPanel = () =>\n    window.dispatchEvent(new CustomEvent('pb:close-editor-panel'));\n\n  React.useEffect(() => {\n    setSurface(null);\n    const pendingReturn = window.sessionStorage.getItem(MOBILE_BACK_RETURN_KEY);\n    if (!pendingReturn) {\n      setBackState('idle');\n      return;\n    }\n\n    if (pendingReturn !== pathname) {\n      setBackState('home');\n    } else {\n      window.sessionStorage.removeItem(MOBILE_BACK_RETURN_KEY);\n      setBackState('idle');\n    }\n  }, [pathname]);\n\n  const handleBackOrHome = () => {\n    closeSearch();\n    setSurface(null);\n\n    if (backState === 'home' || !showsBack) {\n      window.sessionStorage.removeItem(MOBILE_BACK_RETURN_KEY);\n      router.push('/dashboard');\n      return;\n    }\n\n    if (window.history.length <= 1) {\n      router.push('/dashboard');\n      return;\n    }\n\n    window.sessionStorage.setItem(MOBILE_BACK_RETURN_KEY, pathname);\n    router.back();\n  };\n\n  const content = (\n    <>\n      <div\n        className=\"pointer-events-none fixed inset-x-0 z-[var(--z-dropdown)] flex justify-center\"\n        style={{\n          bottom: 0,\n          paddingBottom: 'max(12px, env(safe-area-inset-bottom))',\n        }}\n      >\n        <nav\n          aria-label=\"Quick actions\"\n          className=\"pointer-events-auto flex h-14 items-center gap-1 rounded-xl border px-1\"\n          style={{\n            borderColor:\n              'color-mix(in srgb, var(--mb-border) 58%, transparent)',\n            background: 'var(--mb-surface)',\n            backdropFilter: 'blur(20px) saturate(160%)',\n            WebkitBackdropFilter: 'blur(20px) saturate(160%)',\n            boxShadow: 'var(--shadow-lg)',\n          }}\n        >\n          <button\n            type=\"button\"\n            aria-label={showsBack ? 'Back' : 'Home'}\n            aria-current={homeActive ? 'page' : undefined}\n            className=\"flex h-[46px] items-center gap-2 rounded-lg px-3\"\n            onClick={handleBackOrHome}\n            style={{\n              background: homeActive ? 'var(--mb-elevated)' : 'transparent',\n            }}\n          >\n            {showsBack ? (\n              <ArrowLeft\n                className=\"size-5\"\n                style={{ color: 'var(--mb-text)' }}\n              />\n            ) : (\n              <House className=\"size-5\" style={{ color: 'var(--mb-text)' }} />\n            )}\n            <span\n              className=\"text-base font-medium\"\n              style={{ color: 'var(--mb-text)' }}\n            >\n              {showsBack ? 'Back' : 'Home'}\n            </span>\n          </button>\n          <div\n            className=\"h-6 w-px\"\n            aria-hidden\n            style={{ background: 'var(--mb-border)' }}\n          />\n          {isEditor ? (\n            <button\n              type=\"button\"\n              aria-label=\"Add\"\n              className=\"flex size-[46px] items-center justify-center rounded-lg\"\n              onClick={() => {\n                closeSearch();\n                setSurface(null);\n                closeEditorPanel();\n                addAction?.();\n              }}\n            >\n              <Plus className=\"size-5\" style={{ color: 'var(--mb-text)' }} />\n            </button>\n          ) : (\n            <button\n              type=\"button\"\n              aria-label=\"Find\"\n              className=\"flex size-[46px] items-center justify-center rounded-lg\"\n              onClick={() => {\n                setSurface(null);\n                openSearch();\n              }}\n            >\n              <Search className=\"size-5\" style={{ color: 'var(--mb-text)' }} />\n            </button>\n          )}\n          <div\n            className=\"h-6 w-px\"\n            aria-hidden\n            style={{ background: 'var(--mb-border)' }}\n          />\n          <button\n            type=\"button\"\n            aria-label={surface === 'menu' ? 'Close more navigation' : 'More'}\n            aria-expanded={surface === 'menu'}\n            className=\"flex size-[46px] items-center justify-center rounded-lg\"\n            onClick={() => {\n              closeEditorPanel();\n              setSurface(surface === 'menu' ? null : 'menu');\n            }}\n          >\n            {surface === 'menu' ? (\n              <X className=\"size-5\" style={{ color: 'var(--mb-text)' }} />\n            ) : (\n              <MenuIcon\n                className=\"size-5\"\n                style={{ color: 'var(--mb-text)' }}\n              />\n            )}\n          </button>\n        </nav>\n      </div>\n      <AnimatePresence>\n        {surface === 'menu' && (\n          <MenuOverlay\n            onDismiss={() => setSurface(null)}\n            editor={isEditor}\n            onHelp={() => router.push('/dashboard/help')}\n          />\n        )}\n      </AnimatePresence>\n    </>\n  );\n\n  if (!mounted) return null;\n  return createPortal(content, document.body);\n}\n\n/** @deprecated Kept for mockup gallery compatibility. */\nexport const TabBar = BottomTabBar;\n\nexport const MOBILE_TAB_BAR_HEIGHT = 50;\nexport const MOBILE_BOTTOM_GAP = 18;\nexport const MOBILE_BOTTOM_OFFSET = 'var(--mb-safe-bottom)' as const;\nexport const MOBILE_BOTTOM_OFFSET_CLASS = 'mb-safe-bottom' as const;\nexport const MOBILE_BOTTOM_OFFSET_MIN = 'var(--mb-safe-bottom-min)' as const;\nexport const MOBILE_BOTTOM_OFFSET_MIN_CLASS = 'mb-safe-bottom-min' as const;\n"],"mappings":"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","names":[]}

package/dist/mobile/primitives/chrome.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Mobile primitives — chrome layer.
+ *
+ * The bottom navigation lives in bottom-tab-bar.tsx so this file stays focused
+ * on the reusable status and back bars.
+ */
+import React from 'react';
+export { BottomTabBar, TabBar, TAB_ROUTES, MOBILE_TAB_BAR_HEIGHT, MOBILE_BOTTOM_GAP, MOBILE_BOTTOM_OFFSET, MOBILE_BOTTOM_OFFSET_CLASS, MOBILE_BOTTOM_OFFSET_MIN, MOBILE_BOTTOM_OFFSET_MIN_CLASS, } from './bottom-tab-bar';
+export declare function PhoneSafeArea({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare function StatusBar(): React.JSX.Element;
+export declare function TopBar({ title, leading, trailing, }: {
+    title: string;
+    leading?: React.ReactNode;
+    trailing?: React.ReactNode;
+}): React.JSX.Element;
+export declare function BackBar({ title, trailing, onBack, }: {
+    title: string;
+    trailing?: React.ReactNode;
+    onBack: () => void;
+}): React.JSX.Element;
+/** @deprecated Use BackBar. Kept for mockup gallery compatibility. */
+export declare const HubHeader: typeof BackBar;

package/dist/mobile/primitives/chrome.js

@@ -0,0 +1,115 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowLeft } from "lucide-react";
+import {
+  BottomTabBar,
+  TabBar,
+  TAB_ROUTES,
+  MOBILE_TAB_BAR_HEIGHT,
+  MOBILE_BOTTOM_GAP,
+  MOBILE_BOTTOM_OFFSET,
+  MOBILE_BOTTOM_OFFSET_CLASS,
+  MOBILE_BOTTOM_OFFSET_MIN,
+  MOBILE_BOTTOM_OFFSET_MIN_CLASS
+} from "./bottom-tab-bar";
+function PhoneSafeArea({ children }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "flex h-full flex-col",
+      style: {
+        paddingTop: "env(safe-area-inset-top)",
+        paddingBottom: "env(safe-area-inset-bottom)",
+        paddingLeft: "env(safe-area-inset-left)",
+        paddingRight: "env(safe-area-inset-right)"
+      },
+      children
+    }
+  );
+}
+function StatusBar() {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "relative z-20 h-11 shrink-0",
+      style: { color: "var(--mb-text)" }
+    }
+  );
+}
+function TopBar({
+  title,
+  leading,
+  trailing
+}) {
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: "flex h-12 shrink-0 items-center justify-between px-4",
+      style: {
+        background: "var(--mb-surface)",
+        borderBottom: "1px solid var(--mb-border)"
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center", children: leading }),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "truncate text-md font-semibold",
+            style: { color: "var(--mb-text)" },
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 justify-end", children: trailing })
+      ]
+    }
+  );
+}
+function BackBar({
+  title,
+  trailing,
+  onBack
+}) {
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: "sticky top-0 z-20 flex h-12 items-center justify-between px-2",
+      style: {
+        background: "var(--mb-surface)",
+        borderBottom: "1px solid var(--mb-border)"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "flex h-11 w-11 items-center justify-center rounded-full",
+            style: { background: "var(--mb-elevated)" },
+            "aria-label": "Back",
+            onClick: onBack,
+            children: /* @__PURE__ */ jsx(ArrowLeft, { className: "size-4", style: { color: "var(--mb-text)" } })
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { className: "text-md font-semibold", style: { color: "var(--mb-text)" }, children: title }),
+        /* @__PURE__ */ jsx("div", { className: "flex h-11 w-11 items-center justify-center", children: trailing })
+      ]
+    }
+  );
+}
+const HubHeader = BackBar;
+export {
+  BackBar,
+  BottomTabBar,
+  HubHeader,
+  MOBILE_BOTTOM_GAP,
+  MOBILE_BOTTOM_OFFSET,
+  MOBILE_BOTTOM_OFFSET_CLASS,
+  MOBILE_BOTTOM_OFFSET_MIN,
+  MOBILE_BOTTOM_OFFSET_MIN_CLASS,
+  MOBILE_TAB_BAR_HEIGHT,
+  PhoneSafeArea,
+  StatusBar,
+  TAB_ROUTES,
+  TabBar,
+  TopBar
+};
+//# sourceMappingURL=chrome.js.map

package/dist/mobile/primitives/chrome.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/primitives/chrome.tsx"],"sourcesContent":["'use client';\n\n/**\n * Mobile primitives — chrome layer.\n *\n * The bottom navigation lives in bottom-tab-bar.tsx so this file stays focused\n * on the reusable status and back bars.\n */\n\nimport React from 'react';\nimport { ArrowLeft } from 'lucide-react';\n\nexport {\n  BottomTabBar,\n  TabBar,\n  TAB_ROUTES,\n  MOBILE_TAB_BAR_HEIGHT,\n  MOBILE_BOTTOM_GAP,\n  MOBILE_BOTTOM_OFFSET,\n  MOBILE_BOTTOM_OFFSET_CLASS,\n  MOBILE_BOTTOM_OFFSET_MIN,\n  MOBILE_BOTTOM_OFFSET_MIN_CLASS,\n} from './bottom-tab-bar';\n\nexport function PhoneSafeArea({ children }: { children: React.ReactNode }) {\n  return (\n    <div\n      className=\"flex h-full flex-col\"\n      style={{\n        paddingTop: 'env(safe-area-inset-top)',\n        paddingBottom: 'env(safe-area-inset-bottom)',\n        paddingLeft: 'env(safe-area-inset-left)',\n        paddingRight: 'env(safe-area-inset-right)',\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport function StatusBar() {\n  return (\n    <div\n      className=\"relative z-20 h-11 shrink-0\"\n      style={{ color: 'var(--mb-text)' }}\n    />\n  );\n}\n\nexport function TopBar({\n  title,\n  leading,\n  trailing,\n}: {\n  title: string;\n  leading?: React.ReactNode;\n  trailing?: React.ReactNode;\n}) {\n  return (\n    <header\n      className=\"flex h-12 shrink-0 items-center justify-between px-4\"\n      style={{\n        background: 'var(--mb-surface)',\n        borderBottom: '1px solid var(--mb-border)',\n      }}\n    >\n      <div className=\"flex min-w-0 flex-1 items-center\">{leading}</div>\n      <p\n        className=\"truncate text-md font-semibold\"\n        style={{ color: 'var(--mb-text)' }}\n      >\n        {title}\n      </p>\n      <div className=\"flex min-w-0 flex-1 justify-end\">{trailing}</div>\n    </header>\n  );\n}\n\nexport function BackBar({\n  title,\n  trailing,\n  onBack,\n}: {\n  title: string;\n  trailing?: React.ReactNode;\n  onBack: () => void;\n}) {\n  return (\n    <header\n      className=\"sticky top-0 z-20 flex h-12 items-center justify-between px-2\"\n      style={{\n        background: 'var(--mb-surface)',\n        borderBottom: '1px solid var(--mb-border)',\n      }}\n    >\n      <button\n        type=\"button\"\n        className=\"flex h-11 w-11 items-center justify-center rounded-full\"\n        style={{ background: 'var(--mb-elevated)' }}\n        aria-label=\"Back\"\n        onClick={onBack}\n      >\n        <ArrowLeft className=\"size-4\" style={{ color: 'var(--mb-text)' }} />\n      </button>\n      <p className=\"text-md font-semibold\" style={{ color: 'var(--mb-text)' }}>\n        {title}\n      </p>\n      <div className=\"flex h-11 w-11 items-center justify-center\">\n        {trailing}\n      </div>\n    </header>\n  );\n}\n\n/** @deprecated Use BackBar. Kept for mockup gallery compatibility. */\nexport const HubHeader = BackBar;\n"],"mappings":";AA0BI,cAiCA,YAjCA;AAhBJ,SAAS,iBAAiB;AAE1B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,cAAc,EAAE,SAAS,GAAkC;AACzE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,aAAa;AAAA,QACb,cAAc;AAAA,MAChB;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEO,SAAS,YAAY;AAC1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,OAAO,iBAAiB;AAAA;AAAA,EACnC;AAEJ;AAEO,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,cAAc;AAAA,MAChB;AAAA,MAEA;AAAA,4BAAC,SAAI,WAAU,oCAAoC,mBAAQ;AAAA,QAC3D;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,OAAO,iBAAiB;AAAA,YAEhC;AAAA;AAAA,QACH;AAAA,QACA,oBAAC,SAAI,WAAU,mCAAmC,oBAAS;AAAA;AAAA;AAAA,EAC7D;AAEJ;AAEO,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,cAAc;AAAA,MAChB;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,OAAO,EAAE,YAAY,qBAAqB;AAAA,YAC1C,cAAW;AAAA,YACX,SAAS;AAAA,YAET,8BAAC,aAAU,WAAU,UAAS,OAAO,EAAE,OAAO,iBAAiB,GAAG;AAAA;AAAA,QACpE;AAAA,QACA,oBAAC,OAAE,WAAU,yBAAwB,OAAO,EAAE,OAAO,iBAAiB,GACnE,iBACH;AAAA,QACA,oBAAC,SAAI,WAAU,8CACZ,oBACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAGO,MAAM,YAAY;","names":[]}