@the-portland-company/shell 0.26.0 → 0.27.0

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+## 0.27.0 — 2026-07-23
+
+VRM native-chrome parity (shell-nav-handoff §1–§3). All three were verified in
+this package's source before changing anything, and all three are additive —
+forms / surveys / polls / contacts behavior is unchanged.
+
+### Added — `NavAppShell contentWrapper`
+
+`'padded'` (default) keeps the existing `<main class="px-6 py-7">` + `mx-auto
+max-w-7xl`. `'bare'` renders children directly. VRM wraps every page in the
+shell's own `PageContainer` — which emits its OWN `<main>` and max-width — so
+the default gave it a **nested `<main>`** (invalid HTML) and a doubled gutter on
+Org Settings, Email Broadcast and SMS/MMS Blast.
+
+### Added — nav group headers can navigate as well as expand
+
+A group header always toggles; when the item also carries an `onClick`, that now
+runs too, so a parent row can open its section dashboard AND expand in one
+click. Existing apps pass no parent `onClick`, so nothing changes for them.
+
+### Added — `NavItem.disabled` + `NavItem.disabledTitle`
+
+Mirrors `NavTab`'s existing contract: a gated row renders as a non-interactive,
+dimmed `aria-disabled` span with its reason as a tooltip. VRM gates Email / SMS
+until setup is complete and previously had no way to express that, so gated rows
+rendered fully clickable.
+
 ## 0.26.0 — 2026-07-23
 
 ### Added — `PolitogyAppFrame` data plumbing (so Contacts can adopt it)

package/dist/app-chrome.cjs

@@ -1313,6 +1313,17 @@ function NavRow({
       item.label
     ] })
   ] });
+  if (item.disabled) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-disabled": "true",
+        title: item.disabledTitle,
+        className: `${wrapperClasses} cursor-not-allowed opacity-50`,
+        children: inner
+      }
+    );
+  }
   if (item.onClick && !item.href) {
     return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: item.onClick, className: `w-full text-left ${wrapperClasses}`, children: inner });
   }
@@ -1346,7 +1357,10 @@ function NavGroup({
       "button",
       {
         type: "button",
-        onClick: onToggle,
+        onClick: () => {
+          onToggle();
+          item.onClick?.();
+        },
         "aria-expanded": open,
         className: headerClasses,
         children: [
@@ -1866,14 +1880,20 @@ function useCloseNavDetailsOnOutsideClick() {
     };
   }, []);
 }
-function NavAppShell({ sidebar, topBar, betaBanner, children }) {
+function NavAppShell({
+  sidebar,
+  topBar,
+  betaBanner,
+  contentWrapper = "padded",
+  children
+}) {
   useCloseNavDetailsOnOutsideClick();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen bg-[color:var(--background)] text-[color:var(--foreground)]", children: [
     /* @__PURE__ */ jsxRuntime.jsx(NavSidebar, { ...sidebar }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:pl-[240px]", children: [
       /* @__PURE__ */ jsxRuntime.jsx(NavTopBar, { ...topBar }),
       betaBanner ? /* @__PURE__ */ jsxRuntime.jsx(NavBetaBanner, { ...betaBanner }) : null,
-      /* @__PURE__ */ jsxRuntime.jsx("main", { className: "px-6 py-7", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto max-w-7xl", children }) })
+      contentWrapper === "bare" ? children : /* @__PURE__ */ jsxRuntime.jsx("main", { className: "px-6 py-7", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto max-w-7xl", children }) })
     ] })
   ] });
 }