@the-portland-company/shell 0.5.0 → 0.7.0

package/dist/native.js

@@ -1,19 +1,109 @@
+import { useMemo, useState, useEffect } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // src/native/index.tsx
+
+// src/native/standardNav.ts
+var CONTACTS_DEFAULT_CHILDREN = [
+  { label: "Dashboard", icon: "grid", path: "/relationship/contacts/dashboard" },
+  { label: "All Contacts", icon: "list", path: "/relationship/contacts/all" },
+  { label: "Tribes", icon: "users", path: "/relationship/contacts/groups" },
+  { label: "Import", icon: "upload", path: "/relationship/contacts/import" },
+  { label: "Import History", icon: "fileText", path: "/relationship/contacts/import-history" },
+  { label: "Merge Rules", icon: "layout", path: "/relationship/contacts/merge-rules" }
+];
+var EMAIL_CHILDREN = [
+  { label: "Dashboard", icon: "grid", path: "/relationship/email/dashboard" },
+  { label: "Create & Edit", icon: "edit", path: "/relationship/email/create-and-edit" },
+  { label: "Sender Information", icon: "mail", path: "/relationship/email/inbox" },
+  { label: "Recipients", icon: "user", path: "/relationship/email/send-to" },
+  { label: "Send & Automate", icon: "clock", path: "/relationship/email/send-and-automate" },
+  { label: "Statistics", icon: "barChart", path: "/relationship/email/statistics" }
+];
+var SMS_CHILDREN = [
+  { label: "Dashboard", icon: "grid", path: "/relationship/sms-mms-blast/dashboard" },
+  { label: "Compose & Send", icon: "send", path: "/relationship/sms-mms-blast/compose-and-send" },
+  { label: "Conversations", icon: "messageSquare", path: "/relationship/sms-mms-blast/conversations" }
+];
+var CTA_CHILDREN = [
+  { label: "Dashboard", icon: "grid", path: "/relationship/cta-database/dashboard" },
+  { label: "Create & Edit", icon: "edit", path: "/relationship/cta-creator/create-and-edit" },
+  { label: "Submissions", icon: "fileText", path: "/relationship/cta-submissions/submissions" }
+];
+var FORMS_CHILDREN = [
+  { label: "Dashboard", icon: "grid", path: "/relationship/forms" },
+  { label: "Create & Edit", icon: "edit", path: "/relationship/forms/create-and-edit" },
+  { label: "Submissions", icon: "fileText", path: "/relationship/forms/submissions" }
+];
+function standardPolitogyNav(opts) {
+  const base = opts.coreBaseUrl.replace(/\/+$/, "");
+  const abs = (path) => `${base}${path.startsWith("/") ? path : `/${path}`}`;
+  const icon = (key) => opts.icons?.[key];
+  const leaves = (children) => children.map((c) => ({ label: c.label, icon: icon(c.icon), href: abs(c.path) }));
+  const contacts = opts.contactsItem ? {
+    label: "Contacts",
+    icon: icon("users"),
+    href: opts.contactsItem.href,
+    children: opts.contactsItem.children
+  } : {
+    label: "Contacts",
+    icon: icon("users"),
+    href: abs("/relationship/contacts/dashboard"),
+    children: leaves(CONTACTS_DEFAULT_CHILDREN)
+  };
+  const items = [
+    { label: "Dashboard", icon: icon("home"), href: abs("/relationship/dashboard") },
+    contacts,
+    {
+      label: "Email Broadcast",
+      icon: icon("mail"),
+      href: abs("/relationship/email/dashboard"),
+      children: leaves(EMAIL_CHILDREN)
+    },
+    {
+      label: "SMS/MMS Blast",
+      icon: icon("messageSquare"),
+      href: abs("/relationship/sms-mms-blast/dashboard"),
+      children: leaves(SMS_CHILDREN)
+    },
+    // These two carry no top-level href in VRM core (parent row only toggles).
+    { label: "Calls to Action", icon: icon("layout"), children: leaves(CTA_CHILDREN) },
+    { label: "Forms & Surveys", icon: icon("activity"), children: leaves(FORMS_CHILDREN) }
+  ];
+  if (opts.supportItem) {
+    items.push({
+      label: "Support",
+      icon: icon("lifeBuoy"),
+      href: opts.supportItem.href,
+      onClick: opts.supportItem.onClick
+    });
+  }
+  return items;
+}
 var DefaultLink = ({ href, children, ...rest }) => /* @__PURE__ */ jsx("a", { href, ...rest, children });
 function isNavItemActive(pathname, href) {
   if (href === "/") return pathname === "/";
   return pathname === href || pathname.startsWith(`${href}/`);
 }
+function groupKeyOf(item, index) {
+  return item.href ?? `nav-group-${index}-${item.label}`;
+}
+function hasActiveChild(item, pathname, activeFn) {
+  return (item.children ?? []).some(
+    (child) => child.href ? activeFn(pathname, child.href) : false
+  );
+}
 function envChipClasses(label) {
   const l = label.toLowerCase();
-  if (l === "production")
-    return "bg-[rgba(230,57,70,0.12)] text-[color:var(--color-race-red)]";
-  if (l === "staging") return "bg-[rgba(242,201,76,0.18)] text-[#a6791f]";
-  return "bg-[rgba(0,166,81,0.14)] text-[color:var(--color-green-flag)]";
+  if (l === "production" || l === "prod")
+    return "bg-[#fee2e2] text-[#ef4444]";
+  if (l === "staging" || l === "stage")
+    return "bg-[#ffedd5] text-[#f97316]";
+  if (l === "local" || l === "development" || l === "dev")
+    return "bg-[#dcfce7] text-[#22c55e]";
+  return "bg-[rgba(107,114,128,0.16)] text-[#6b7280]";
 }
-var ORG_PILL_DEFAULT = "#2d2f36";
+var ORG_PILL_DEFAULT = "var(--color-race-red)";
 function NavSidebar({
   pathname,
   brand,
@@ -27,6 +117,20 @@ function NavSidebar({
   const activeFn = nav.isActive ?? isNavItemActive;
   const ModeIcon = mode?.icon;
   const orgBg = org?.brandColor || ORG_PILL_DEFAULT;
+  const activeGroupKey = useMemo(() => {
+    for (let i = 0; i < nav.items.length; i++) {
+      const item = nav.items[i];
+      if (item.children && item.children.length > 0 && hasActiveChild(item, pathname, activeFn)) {
+        return groupKeyOf(item, i);
+      }
+    }
+    return null;
+  }, [nav.items, pathname, activeFn]);
+  const [openGroup, setOpenGroup] = useState(activeGroupKey);
+  useEffect(() => {
+    setOpenGroup(activeGroupKey);
+  }, [activeGroupKey]);
+  const toggleGroup = (key) => setOpenGroup((prev) => prev === key ? null : key);
   return /* @__PURE__ */ jsxs("aside", { className: "fixed inset-y-0 left-0 z-30 hidden w-[240px] flex-col border-r border-[color:var(--line)] bg-[color:var(--panel-elevated)] lg:flex", children: [
     /* @__PURE__ */ jsx(
       Link,
@@ -52,7 +156,10 @@ function NavSidebar({
     ),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-y-auto px-4 pb-2", children: [
       org ? /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
-        /* @__PURE__ */ jsx("p", { className: "mb-2 px-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Organization" }),
+        /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between px-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Organization" }),
+          org.id ? /* @__PURE__ */ jsx(OrgIdCopyButton, { id: org.id }) : null
+        ] }),
         /* @__PURE__ */ jsxs(
           "button",
           {
@@ -86,30 +193,34 @@ function NavSidebar({
       ) }) : null,
       /* @__PURE__ */ jsxs("nav", { className: "flex flex-col gap-1", children: [
         nav.groupLabel ? /* @__PURE__ */ jsx("p", { className: "px-2 pb-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: nav.groupLabel }) : null,
-        nav.items.map((item) => {
-          const active = activeFn(pathname, item.href);
-          const Icon = item.icon;
-          return /* @__PURE__ */ jsxs(
-            Link,
+        nav.items.map((item, idx) => {
+          if (item.children && item.children.length > 0) {
+            const key = groupKeyOf(item, idx);
+            const selfActive = item.href ? activeFn(pathname, item.href) : false;
+            const parentActive = selfActive || hasActiveChild(item, pathname, activeFn);
+            return /* @__PURE__ */ jsx(
+              NavGroup,
+              {
+                item,
+                active: parentActive,
+                open: openGroup === key,
+                onToggle: () => toggleGroup(key),
+                pathname,
+                activeFn,
+                Link
+              },
+              key
+            );
+          }
+          const active = item.href ? activeFn(pathname, item.href) : false;
+          return /* @__PURE__ */ jsx(
+            NavRow,
             {
-              href: item.href,
-              "aria-current": active ? "page" : void 0,
-              className: [
-                "group flex items-center gap-3 rounded-md px-3 py-2 text-sm font-semibold transition",
-                active ? "bg-[color:var(--color-race-red)] text-white shadow-sm" : "text-[color:var(--muted)] hover:bg-[color:var(--panel)] hover:text-[color:var(--foreground)]"
-              ].join(" "),
-              children: [
-                Icon ? /* @__PURE__ */ jsx(
-                  Icon,
-                  {
-                    size: 18,
-                    className: active ? "text-white" : "text-current"
-                  }
-                ) : null,
-                item.label
-              ]
+              item,
+              active,
+              Link
             },
-            item.href
+            item.href ?? `nav-${idx}-${item.label}`
           );
         })
       ] })
@@ -126,17 +237,41 @@ function NavSidebar({
           }
         )
       ] }, l.label)) }) : null,
-      /* @__PURE__ */ jsxs("p", { className: "mt-1.5 font-[family-name:var(--font-plex-mono)] text-[10px] text-[color:var(--muted)]", children: [
-        footer.envLabel,
-        " \xB7 v",
-        footer.version,
-        " \xB7 ",
-        footer.commit.slice(0, 7)
+      /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex flex-col items-center gap-0.5 font-[family-name:var(--font-plex-mono)] text-[10px] text-[color:var(--muted)]", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: [
+                "rounded-md px-1.5 py-0.5 text-[10px] font-semibold",
+                envChipClasses(footer.envLabel)
+              ].join(" "),
+              children: footer.envLabel
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-[color:var(--muted)]", children: "|" }),
+          /* @__PURE__ */ jsx("span", { children: footer.commit.slice(-4) }),
+          /* @__PURE__ */ jsx("span", { className: "text-[color:var(--muted)]", children: "|" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "v",
+            footer.version
+          ] })
+        ] }),
+        footer.commitDate || footer.commitAuthor ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[color:var(--muted)]", children: "|" }),
+          footer.commitDate ? /* @__PURE__ */ jsx("span", { children: new Date(footer.commitDate).toLocaleDateString(void 0, {
+            month: "short",
+            day: "numeric"
+          }) }) : null,
+          /* @__PURE__ */ jsx("span", { className: "text-[color:var(--muted)]", children: "|" }),
+          footer.commitAuthor ? /* @__PURE__ */ jsx("span", { children: footer.commitAuthor.split(/\s+/)[0] }) : null,
+          /* @__PURE__ */ jsx("span", { className: "text-[color:var(--muted)]", children: "|" })
+        ] }) : null
       ] })
     ] }) : null
   ] });
 }
-function ChevronDown() {
+function ChevronDown({ className } = {}) {
   return /* @__PURE__ */ jsx(
     "svg",
     {
@@ -148,17 +283,145 @@ function ChevronDown() {
       strokeWidth: 2,
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      className: "shrink-0 opacity-80",
+      className: className ?? "shrink-0 opacity-80",
       "aria-hidden": "true",
       children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
     }
   );
 }
+var NAV_HOVER_GRADIENT = "linear-gradient(90deg,#ea6a3a 0%,#E63946 100%)";
+function NavRow({
+  item,
+  active,
+  Link,
+  variant = "top"
+}) {
+  const Icon = item.icon;
+  const isSub = variant === "sub";
+  const activeClasses = isSub ? "bg-[color:var(--panel-elevated)] text-[color:var(--color-race-red)] shadow-sm" : "bg-[color:var(--color-race-red)] text-white shadow-sm";
+  const wrapperClasses = [
+    "group relative block overflow-hidden rounded-md transition",
+    active ? activeClasses : "text-[color:var(--muted)] hover:text-white"
+  ].join(" ");
+  const rowPadding = isSub ? "px-3 py-1.5 text-[13px]" : "px-3 py-2 text-sm";
+  const iconSize = isSub ? 16 : 18;
+  const iconClass = active && !isSub ? "text-white" : "text-current";
+  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    !active ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "pointer-events-none absolute inset-y-0 left-0 w-0 transition-[width] duration-300 group-hover:w-full",
+        style: { background: NAV_HOVER_GRADIENT }
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs("span", { className: `relative z-10 flex items-center gap-3 font-semibold ${rowPadding}`, children: [
+      Icon ? /* @__PURE__ */ jsx(Icon, { size: iconSize, className: iconClass }) : null,
+      item.label
+    ] })
+  ] });
+  if (item.onClick && !item.href) {
+    return /* @__PURE__ */ jsx("button", { type: "button", onClick: item.onClick, className: `w-full text-left ${wrapperClasses}`, children: inner });
+  }
+  return /* @__PURE__ */ jsx(
+    Link,
+    {
+      href: item.href ?? "#",
+      "aria-current": active ? "page" : void 0,
+      className: wrapperClasses,
+      children: inner
+    }
+  );
+}
+function NavGroup({
+  item,
+  active,
+  open,
+  onToggle,
+  pathname,
+  activeFn,
+  Link
+}) {
+  const Icon = item.icon;
+  const headerClasses = [
+    "group relative block w-full overflow-hidden text-left transition",
+    open ? "rounded-t-md" : "rounded-md",
+    active ? "bg-[color:var(--color-race-red)] text-white shadow-sm" : open ? "bg-[color:var(--panel)] text-[color:var(--foreground)]" : "text-[color:var(--muted)] hover:text-white"
+  ].join(" ");
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onToggle,
+        "aria-expanded": open,
+        className: headerClasses,
+        children: [
+          !active ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "pointer-events-none absolute inset-y-0 left-0 w-0 transition-[width] duration-300 group-hover:w-full",
+              style: { background: NAV_HOVER_GRADIENT }
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs("span", { className: "relative z-10 flex items-center gap-3 px-3 py-2 text-sm font-semibold", children: [
+            Icon ? /* @__PURE__ */ jsx(Icon, { size: 18, className: active ? "text-white" : "text-current" }) : null,
+            /* @__PURE__ */ jsx("span", { className: "flex-1", children: item.label }),
+            /* @__PURE__ */ jsx(
+              ChevronDown,
+              {
+                className: [
+                  "shrink-0 opacity-80 transition-transform duration-200",
+                  open ? "rotate-180" : ""
+                ].join(" ")
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-b-md bg-[color:var(--panel)] p-1", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5", children: item.children.map((child, i) => {
+      const childActive = child.href ? activeFn(pathname, child.href) : false;
+      return /* @__PURE__ */ jsx(
+        NavRow,
+        {
+          item: child,
+          active: childActive,
+          Link,
+          variant: "sub"
+        },
+        child.href ?? `sub-${i}-${child.label}`
+      );
+    }) }) }) : null
+  ] });
+}
+function OrgIdCopyButton({ id }) {
+  const [copied, setCopied] = useState(false);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        try {
+          void navigator.clipboard?.writeText(id);
+        } catch {
+        }
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+      },
+      title: "Copy organization id",
+      className: "rounded px-1 text-[11px] text-[color:var(--muted)] hover:bg-[color:var(--panel)]",
+      children: copied ? "Copied" : `...${id.slice(-8)}`
+    }
+  );
+}
 function NavTopBar({
   title,
   subtitle,
   user,
   onSignOut,
+  actionsList,
   actions,
   themeToggle
 }) {
@@ -177,6 +440,7 @@ function NavTopBar({
       subtitle ? /* @__PURE__ */ jsx("p", { className: "truncate text-sm text-[color:var(--muted)]", children: subtitle }) : null
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+      actionsList && actionsList.length > 0 ? actionsList.map((action) => /* @__PURE__ */ jsx(NavTopBarActionButton, { action }, action.key)) : null,
       actions,
       themeToggle,
       /* @__PURE__ */ jsxs("details", { className: "group relative", children: [
@@ -225,6 +489,44 @@ function SignOutIcon() {
     }
   );
 }
+function NavTopBarActionButton({ action }) {
+  const Icon = action.icon;
+  const tone = action.tone ?? "default";
+  const toneClass = tone === "danger" || tone === "warning" ? "text-[color:var(--color-race-red)] hover:text-[color:var(--color-race-red)]" : "text-[color:var(--muted)] hover:text-[color:var(--foreground)]";
+  const className = [
+    "relative flex h-8 w-8 items-center justify-center rounded-full border border-[color:var(--line)] transition",
+    toneClass
+  ].join(" ");
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Icon, { size: 20, className: "text-current" }),
+    typeof action.badge === "number" && action.badge > 0 ? /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-[color:var(--color-race-red)] px-1 text-[10px] text-white", children: action.badge }) : null
+  ] });
+  const isExternal = action.href ? /^https?:\/\//.test(action.href) : false;
+  if (action.href) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: action.href,
+        "aria-label": action.label,
+        title: action.label,
+        className,
+        ...isExternal ? { target: "_blank", rel: "noreferrer" } : {},
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: action.onClick,
+      "aria-label": action.label,
+      title: action.label,
+      className,
+      children: content
+    }
+  );
+}
 function NavAppShell({ sidebar, topBar, children }) {
   return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-[color:var(--background)] text-[color:var(--foreground)]", children: [
     /* @__PURE__ */ jsx(NavSidebar, { ...sidebar }),
@@ -235,6 +537,6 @@ function NavAppShell({ sidebar, topBar, children }) {
   ] });
 }
 
-export { NavAppShell, NavSidebar, NavTopBar, envChipClasses, isNavItemActive };
+export { NavAppShell, NavSidebar, NavTopBar, envChipClasses, isNavItemActive, standardPolitogyNav };
 //# sourceMappingURL=native.js.map
 //# sourceMappingURL=native.js.map