@the-portland-company/shell 0.68.1 → 0.69.0

package/dist/{chunk-2UTIX3LI.js → chunk-WFUWFMCA.js}

@@ -1,3 +1,4 @@
+import { warnDeprecated } from './chunk-LPSBSAF3.js';
 import { readThemeCookie, THEME_STORAGE_KEY, isThemePreference, applyThemePreference, readPendingThemeChoice, writeThemeCookie, clearPendingThemeChoice, markThemeChoicePending } from './chunk-NHBNM5P3.js';
 import { createContext, useRef, useState, useEffect, useContext, useCallback, useMemo, useSyncExternalStore } from 'react';
 import clsx from 'clsx';
@@ -2080,6 +2081,24 @@ function envChipClasses(label) {
   return "bg-[rgba(107,114,128,0.16)] text-[#6b7280]";
 }
 var ORG_PILL_DEFAULT = "var(--color-accent)";
+var RailCollapsibleContext = createContext(false);
+function useRailCollapse() {
+  const collapsible = useContext(RailCollapsibleContext);
+  return (cls) => collapsible ? cls : "";
+}
+function OrgIconMark({ org, logoSrc }) {
+  const rc = useRailCollapse();
+  const src = resolveOrgLogoUrl(org.iconUrl) ?? logoSrc;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      "data-rail-org-mark": "",
+      className: `hidden h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-[5px] bg-[#FFFFFF] text-[11px] font-bold text-neutral-800 ${rc("max-md:flex")}`,
+      children: src ? /* @__PURE__ */ jsx("img", { src, alt: "", className: "max-h-full max-w-full object-contain" }) : (org.name ?? "Org").slice(0, 2).toUpperCase()
+    }
+  );
+}
 function NavSidebar({
   pathname,
   brand,
@@ -2092,6 +2111,8 @@ function NavSidebar({
   onClose
 }) {
   const Link = linkComponent ?? DefaultLink;
+  const collapsible = !open;
+  const rc = (cls) => collapsible ? cls : "";
   const asideRef = useRef(null);
   const closeButtonRef = useRef(null);
   const previouslyFocusedRef = useRef(null);
@@ -2158,12 +2179,12 @@ function NavSidebar({
     setOpenGroup(activeGroupKey);
   }, [activeGroupKey]);
   const toggleGroup = (key) => setOpenGroup((prev) => prev === key ? null : key);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(RailCollapsibleContext.Provider, { value: collapsible, children: [
     open ? /* @__PURE__ */ jsx(
       "div",
       {
         "aria-hidden": true,
-        className: "fixed inset-0 z-40 bg-black/40 lg:hidden",
+        className: "fixed inset-0 z-40 bg-black/40 md:hidden",
         onClick: onClose
       }
     ) : null,
@@ -2176,8 +2197,10 @@ function NavSidebar({
         "aria-modal": open ? "true" : void 0,
         "aria-label": open ? "Navigation" : void 0,
         className: clsx(
-          "fixed inset-y-0 left-0 w-[var(--sidebar-width,236px)] flex-col border-r border-[color:var(--sidebar-line,var(--line))] bg-[color:var(--sidebar-bg,var(--nav-surface))] lg:flex",
-          open ? "flex z-50" : "hidden z-30"
+          "fixed inset-y-0 left-0 flex flex-col border-r border-[color:var(--sidebar-line,var(--line))] bg-[color:var(--sidebar-bg,var(--nav-surface))]",
+          // Never hidden: the 64px icon rail below `md`, the full rail from
+          // `md` up, and the full rail as a drawer when expanded below `md`.
+          open ? "z-50 w-[var(--sidebar-width,236px)]" : "z-30 w-[var(--sidebar-collapsed-width,64px)] md:w-[var(--sidebar-width,236px)]"
         ),
         style: { fontFamily: 'var(--font-family, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif)' },
         onKeyDown: trapTab,
@@ -2192,36 +2215,62 @@ function NavSidebar({
               ref: closeButtonRef,
               onClick: onClose,
               "aria-label": "Close menu",
-              className: "absolute right-3 top-3 flex h-8 w-8 items-center justify-center rounded-full text-[color:var(--muted)] transition hover:bg-[color:var(--panel-elevated)] hover:text-[color:var(--foreground)] lg:hidden",
+              className: "absolute right-3 top-3 flex h-8 w-8 items-center justify-center rounded-full text-[color:var(--muted)] transition hover:bg-[color:var(--panel-elevated)] hover:text-[color:var(--foreground)] md:hidden",
               children: /* @__PURE__ */ jsx(CloseIcon, {})
             }
           ) : null,
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 flex-col gap-[14px] border-b border-[color:var(--sidebar-line,var(--line))] px-[18px] py-4", children: [
-            /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs("div", { className: `flex flex-shrink-0 flex-col gap-[14px] border-b border-[color:var(--sidebar-line,var(--line))] px-[18px] py-4 ${rc("max-md:items-center max-md:px-[10px]")}`, children: [
+            /* @__PURE__ */ jsxs(
               Link,
               {
                 href: brand.homeHref ?? "/",
-                className: "flex items-center gap-2.5",
-                children: brand.logoSrc ? /* @__PURE__ */ jsx(
-                  "img",
-                  {
-                    src: brand.logoSrc,
-                    alt: brand.logoAlt ?? brand.title,
-                    draggable: false,
-                    className: "h-[var(--sidebar-brand-logo-height,24px)] w-auto object-contain"
-                  }
-                ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx("span", { className: "flex h-9 w-9 items-center justify-center rounded-xl bg-[color:var(--color-accent)] text-base font-black text-[#FFFFFF] shadow-sm", children: brand.badgeLabel }),
-                  /* @__PURE__ */ jsxs("span", { className: "flex flex-col leading-tight", children: [
-                    /* @__PURE__ */ jsx("span", { className: "text-base font-extrabold tracking-[-0.01em] text-[color:var(--color-accent)]", children: brand.title }),
-                    brand.subtitle ? /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold uppercase tracking-[0.16em] text-[color:var(--muted)]", children: brand.subtitle }) : null
+                "aria-label": brand.logoAlt ?? brand.title,
+                className: `flex items-center gap-2.5 ${rc("max-md:justify-center")}`,
+                children: [
+                  brand.logoSquareSrc ? /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: brand.logoSquareSrc,
+                      alt: "",
+                      draggable: false,
+                      "data-rail-logo": "square",
+                      className: `hidden h-8 w-8 object-contain ${rc("max-md:block")}`
+                    }
+                  ) : brand.logoPending ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: `hidden h-8 w-8 ${rc("max-md:block")}` }) : null,
+                  brand.logoSrc ? /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: brand.logoSrc,
+                      alt: brand.logoAlt ?? brand.title,
+                      draggable: false,
+                      "data-rail-logo": "horizontal",
+                      className: `h-[var(--sidebar-brand-logo-height,24px)] w-auto object-contain ${rc("max-md:hidden")}`
+                    }
+                  ) : brand.logoPending ? /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": true,
+                      className: `block h-[var(--sidebar-brand-logo-height,24px)] ${rc("max-md:hidden")}`
+                    }
+                  ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: `flex h-9 w-9 items-center justify-center rounded-xl bg-[color:var(--color-accent)] text-base font-black text-[#FFFFFF] shadow-sm ${brand.logoSquareSrc ? rc("max-md:hidden") : ""}`,
+                        children: brand.badgeLabel
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("span", { className: `flex flex-col leading-tight ${rc("max-md:hidden")}`, children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-base font-extrabold tracking-[-0.01em] text-[color:var(--color-accent)]", children: brand.title }),
+                      brand.subtitle ? /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold uppercase tracking-[0.16em] text-[color:var(--muted)]", children: brand.subtitle }) : null
+                    ] })
                   ] })
-                ] })
+                ]
               }
             ),
-            org ? /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("div", { className: "mb-[7px] flex items-center justify-between", children: /* @__PURE__ */ jsx("p", { className: NAV_EYEBROW_CLASS, children: "Organization" }) }),
-              org.loading ? /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2.5 rounded-md border border-[color:var(--line)] bg-[color:var(--panel-elevated)] px-2.5 py-2 shadow-sm", children: [
+            org ? /* @__PURE__ */ jsxs("div", { className: rc("max-md:flex max-md:justify-center"), children: [
+              /* @__PURE__ */ jsx("div", { className: `mb-[7px] flex items-center justify-between ${rc("max-md:hidden")}`, children: /* @__PURE__ */ jsx("p", { className: NAV_EYEBROW_CLASS, children: "Organization" }) }),
+              org.loading ? /* @__PURE__ */ jsxs("div", { className: `flex w-full items-center gap-2.5 rounded-md border border-[color:var(--line)] bg-[color:var(--panel-elevated)] px-2.5 py-2 shadow-sm ${rc("max-md:w-auto max-md:border-0 max-md:bg-transparent max-md:p-0 max-md:shadow-none")}`, children: [
                 /* @__PURE__ */ jsx(
                   "span",
                   {
@@ -2233,7 +2282,7 @@ function NavSidebar({
                   "span",
                   {
                     "aria-hidden": true,
-                    className: "h-4 flex-1 animate-pulse rounded bg-[color:var(--panel)]"
+                    className: `h-4 flex-1 animate-pulse rounded bg-[color:var(--panel)] ${rc("max-md:hidden")}`
                   }
                 ),
                 /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading organization" })
@@ -2242,9 +2291,11 @@ function NavSidebar({
                   "summary",
                   {
                     style: orgCardStyle,
-                    className: "flex w-full cursor-pointer list-none flex-col overflow-hidden rounded-[5px] border border-[color:var(--sidebar-card-border,var(--sidebar-line,var(--line)))] bg-[color:var(--sidebar-card-bg,var(--panel-elevated))] text-left text-[color:var(--sidebar-text,var(--foreground))] transition hover:bg-[color:var(--sidebar-row-hover-bg,var(--panel))] [&::-webkit-details-marker]:hidden",
+                    title: org.name ?? void 0,
+                    className: `flex w-full cursor-pointer list-none flex-col overflow-hidden rounded-[5px] border border-[color:var(--sidebar-card-border,var(--sidebar-line,var(--line)))] bg-[color:var(--sidebar-card-bg,var(--panel-elevated))] text-left text-[color:var(--sidebar-text,var(--foreground))] transition hover:bg-[color:var(--sidebar-row-hover-bg,var(--panel))] [&::-webkit-details-marker]:hidden ${rc("max-md:w-auto max-md:items-center max-md:overflow-visible max-md:border-0 max-md:bg-transparent")}`,
                     children: [
-                      /* @__PURE__ */ jsxs("span", { className: "relative flex h-[var(--sidebar-org-band-height,48px)] w-full items-center justify-center bg-[#FFFFFF] px-3 py-[7px]", children: [
+                      /* @__PURE__ */ jsx(OrgIconMark, { org, logoSrc: orgLogoSrc }),
+                      /* @__PURE__ */ jsxs("span", { className: `relative flex h-[var(--sidebar-org-band-height,48px)] w-full items-center justify-center bg-[#FFFFFF] px-3 py-[7px] ${rc("max-md:hidden")}`, children: [
                         orgLogoSrc ? /* @__PURE__ */ jsx("img", { src: orgLogoSrc, alt: "", className: "max-h-full max-w-[132px] object-contain" }) : org.canUploadLogo ? /* @__PURE__ */ jsx(
                           "a",
                           {
@@ -2256,7 +2307,7 @@ function NavSidebar({
                         ) : /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold text-neutral-800", children: org.name ?? "Organization" }),
                         /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute inset-x-0 bottom-0 h-[3px]", style: { backgroundImage: orgGradient } })
                       ] }),
-                      /* @__PURE__ */ jsxs("span", { className: "flex w-full min-w-0 items-center justify-between gap-[9px] px-[10px] py-2", children: [
+                      /* @__PURE__ */ jsxs("span", { className: `flex w-full min-w-0 items-center justify-between gap-[9px] px-[10px] py-2 ${rc("max-md:hidden")}`, children: [
                         /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col", children: [
                           /* @__PURE__ */ jsx(
                             "span",
@@ -2273,7 +2324,7 @@ function NavSidebar({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxs("div", { className: "absolute left-0 right-0 z-40 mt-1 max-h-[min(60vh,520px)] overflow-y-auto rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] py-1 shadow-[var(--shadow-soft)]", children: [
+                /* @__PURE__ */ jsxs("div", { className: `absolute left-0 right-0 z-40 mt-1 max-h-[min(60vh,520px)] overflow-y-auto rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] py-1 shadow-[var(--shadow-soft)] ${rc("max-md:right-auto max-md:w-[236px]")}`, children: [
                   shouldShowOrgFilter(org.organizations.length) ? /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 bg-[color:var(--panel-elevated)] px-2 pb-1 pt-1", children: /* @__PURE__ */ jsx(
                     "input",
                     {
@@ -2342,9 +2393,11 @@ function NavSidebar({
                   type: "button",
                   onClick: org.onClick,
                   style: orgCardStyle,
-                  className: "flex w-full flex-col overflow-hidden rounded-[5px] border border-[color:var(--sidebar-card-border,var(--sidebar-line,var(--line)))] bg-[color:var(--sidebar-card-bg,var(--panel-elevated))] text-left text-[color:var(--sidebar-text,var(--foreground))] transition hover:bg-[color:var(--sidebar-row-hover-bg,var(--panel))]",
+                  title: org.name ?? void 0,
+                  className: `flex w-full flex-col overflow-hidden rounded-[5px] border border-[color:var(--sidebar-card-border,var(--sidebar-line,var(--line)))] bg-[color:var(--sidebar-card-bg,var(--panel-elevated))] text-left text-[color:var(--sidebar-text,var(--foreground))] transition hover:bg-[color:var(--sidebar-row-hover-bg,var(--panel))] ${rc("max-md:w-auto max-md:items-center max-md:overflow-visible max-md:border-0 max-md:bg-transparent")}`,
                   children: [
-                    /* @__PURE__ */ jsxs("span", { className: "relative flex h-[var(--sidebar-org-band-height,48px)] w-full items-center justify-center bg-[#FFFFFF] px-3 py-[7px]", children: [
+                    /* @__PURE__ */ jsx(OrgIconMark, { org, logoSrc: orgLogoSrc }),
+                    /* @__PURE__ */ jsxs("span", { className: `relative flex h-[var(--sidebar-org-band-height,48px)] w-full items-center justify-center bg-[#FFFFFF] px-3 py-[7px] ${rc("max-md:hidden")}`, children: [
                       orgLogoSrc ? /* @__PURE__ */ jsx("img", { src: orgLogoSrc, alt: "", className: "max-h-full max-w-[132px] object-contain" }) : org.canUploadLogo ? /* @__PURE__ */ jsx(
                         "a",
                         {
@@ -2356,7 +2409,7 @@ function NavSidebar({
                       ) : /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold text-neutral-800", children: org.name ?? "Organization" }),
                       /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute inset-x-0 bottom-0 h-[3px]", style: { backgroundImage: orgGradient } })
                     ] }),
-                    /* @__PURE__ */ jsxs("span", { className: "flex w-full min-w-0 items-center justify-between gap-[9px] px-[10px] py-2", children: [
+                    /* @__PURE__ */ jsxs("span", { className: `flex w-full min-w-0 items-center justify-between gap-[9px] px-[10px] py-2 ${rc("max-md:hidden")}`, children: [
                       /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col", children: [
                         /* @__PURE__ */ jsx(
                           "span",
@@ -2374,13 +2427,13 @@ function NavSidebar({
                 }
               )
             ] }) : null,
-            mode ? /* @__PURE__ */ jsxs("div", { children: [
+            mode ? /* @__PURE__ */ jsxs("div", { className: rc("max-md:w-full"), children: [
               /* @__PURE__ */ jsx(
                 "div",
                 {
                   role: "radiogroup",
                   "aria-label": "Mode",
-                  className: "flex w-full items-center gap-1 rounded-lg border border-[color:var(--border-inverse,var(--sidebar-line,var(--line)))] bg-[color:var(--mode-track-bg,var(--panel-elevated))] p-[3px]",
+                  className: `flex w-full items-center gap-1 rounded-lg border border-[color:var(--border-inverse,var(--sidebar-line,var(--line)))] bg-[color:var(--mode-track-bg,var(--panel-elevated))] p-[3px] ${rc("max-md:flex-col max-md:items-stretch")}`,
                   children: (mode.options && mode.options.length > 0 ? mode.options : [{ id: mode.label, label: mode.label, icon: ModeIcon }]).map(
                     (opt) => {
                       const selected = opt.label === mode.label;
@@ -2412,11 +2465,11 @@ function NavSidebar({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-left text-[11px] leading-[1.2] text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))]", children: modeCaption(mode.label) })
+              /* @__PURE__ */ jsx("p", { className: `mt-1.5 text-left text-[11px] leading-[1.2] text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))] ${rc("max-md:hidden")}`, children: modeCaption(mode.label) })
             ] }) : null
           ] }),
           /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col overflow-y-auto px-[10px] py-3", children: /* @__PURE__ */ jsxs("nav", { className: "flex flex-col gap-0.5", children: [
-            nav.groupLabel ? /* @__PURE__ */ jsx("p", { className: `${NAV_EYEBROW_CLASS} px-2 pb-1.5 pt-1`, children: nav.groupLabel }) : null,
+            nav.groupLabel ? /* @__PURE__ */ jsx("p", { className: `${NAV_EYEBROW_CLASS} px-2 pb-1.5 pt-1 ${rc("max-md:hidden")}`, children: nav.groupLabel }) : null,
             nav.items.map((item, idx) => {
               if (item.kind === "section") {
                 return /* @__PURE__ */ jsx(
@@ -2482,7 +2535,7 @@ function NavSidebar({
               );
             })
           ] }) }),
-          footer ? /* @__PURE__ */ jsxs("div", { className: "relative flex-shrink-0 border-t border-[color:var(--sidebar-line,var(--line))] px-[14px] py-3", children: [
+          footer ? /* @__PURE__ */ jsxs("div", { className: `relative flex-shrink-0 border-t border-[color:var(--sidebar-line,var(--line))] px-[14px] py-3 ${rc("max-md:px-[10px]")}`, children: [
             footer.user ? /* @__PURE__ */ jsx(
               NavSidebarUserCard,
               {
@@ -2491,7 +2544,7 @@ function NavSidebar({
                 onSignOut: footer.onSignOut
               }
             ) : null,
-            footer.links && footer.links.length > 0 ? /* @__PURE__ */ jsx("div", { className: `flex flex-wrap items-center gap-[10px] text-[11px] leading-[1.2] ${footer.user ? "mt-3" : ""}`, children: footer.links.map((l) => /* @__PURE__ */ jsx(
+            footer.links && footer.links.length > 0 ? /* @__PURE__ */ jsx("div", { className: `flex flex-wrap items-center gap-[10px] text-[11px] leading-[1.2] ${footer.user ? "mt-3" : ""} ${rc("max-md:hidden")}`, children: footer.links.map((l) => /* @__PURE__ */ jsx(
               "a",
               {
                 href: safeHref(l.href),
@@ -2504,7 +2557,7 @@ function NavSidebar({
               "div",
               {
                 "data-shell-meta": true,
-                className: "mt-1.5 flex flex-col items-start gap-0.5 font-[family-name:var(--font-plex-mono)] text-[10px] text-[color:var(--sidebar-meta-text,var(--sidebar-text))]",
+                className: `mt-1.5 flex flex-col items-start gap-0.5 font-[family-name:var(--font-plex-mono)] text-[10px] text-[color:var(--sidebar-meta-text,var(--sidebar-text))] ${rc("max-md:hidden")}`,
                 children: [
                   /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
                     /* @__PURE__ */ jsx(
@@ -2667,21 +2720,27 @@ function NavActiveRail() {
   );
 }
 function NavRowBadge({ value }) {
+  const rc = useRailCollapse();
   if (value === void 0 || value === null || value === "") return null;
-  return /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 font-[family-name:var(--font-plex-mono,ui-monospace,monospace)] text-[11px] font-semibold leading-none text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))]", children: value });
+  return /* @__PURE__ */ jsx("span", { className: `ml-auto shrink-0 font-[family-name:var(--font-plex-mono,ui-monospace,monospace)] text-[11px] font-semibold leading-none text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))] ${rc("max-md:hidden")}`, children: value });
 }
 function NavSectionRow({
   label,
   first,
   variant = "top"
 }) {
+  const rc = useRailCollapse();
+  const collapsed = variant === "sub" ? "" : first ? rc("max-md:sr-only") : rc(
+    "max-md:mx-2 max-md:my-2 max-md:h-px max-md:overflow-hidden max-md:bg-[color:var(--sidebar-line,var(--line))] max-md:p-0 max-md:text-transparent"
+  );
   return /* @__PURE__ */ jsx(
     "p",
     {
       className: [
         NAV_EYEBROW_CLASS,
         variant === "sub" ? "px-3 pb-0.5" : "px-2 pb-1.5 pt-1",
-        first ? "" : variant === "sub" ? "mt-3" : "mt-[14px]"
+        first ? "" : variant === "sub" ? "mt-3" : "mt-[14px]",
+        collapsed
       ].join(" "),
       children: label
     }
@@ -2693,6 +2752,7 @@ function NavRow({
   Link,
   variant = "top"
 }) {
+  const rc = useRailCollapse();
   const Icon = item.icon;
   const isSub = variant === "sub";
   const washActive = variant !== "top";
@@ -2718,9 +2778,12 @@ function NavRow({
         }
       ) : null
     ) : /* @__PURE__ */ jsx(NavActiveRail, {}),
-    /* @__PURE__ */ jsxs("span", { className: `relative z-10 flex items-center ${rowPadding}`, children: [
-      Icon ? /* @__PURE__ */ jsx(Icon, { size: iconSize, className: `shrink-0 ${iconClass}` }) : null,
-      /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
+    /* @__PURE__ */ jsxs("span", { className: `relative z-10 flex items-center ${rowPadding} ${rc("max-md:justify-center max-md:px-0")}`, children: [
+      Icon ? /* @__PURE__ */ jsx(Icon, { size: iconSize, className: `shrink-0 ${iconClass}` }) : (
+        // A row with no glyph still needs something on the icon rail.
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: `hidden text-[11px] font-semibold uppercase ${rc("max-md:inline")}`, children: item.label.slice(0, 2) })
+      ),
+      /* @__PURE__ */ jsx("span", { className: `min-w-0 flex-1 truncate ${rc("max-md:hidden")}`, children: item.label }),
       /* @__PURE__ */ jsx(NavRowBadge, { value: item.badge })
     ] })
   ] });
@@ -2729,20 +2792,30 @@ function NavRow({
       "span",
       {
         "aria-disabled": "true",
-        title: item.disabledTitle,
+        title: item.disabledTitle ?? item.label,
         className: `${wrapperClasses} cursor-not-allowed opacity-50`,
         children: inner
       }
     );
   }
   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(
+      "button",
+      {
+        type: "button",
+        onClick: item.onClick,
+        title: item.label,
+        className: `w-full text-left ${wrapperClasses}`,
+        children: inner
+      }
+    );
   }
   return /* @__PURE__ */ jsx(
     Link,
     {
       href: item.href ?? "#",
       "aria-current": active ? "page" : void 0,
+      title: item.label,
       className: wrapperClasses,
       children: inner
     }
@@ -2757,6 +2830,7 @@ function NavGroup({
   activeFn,
   Link
 }) {
+  const rc = useRailCollapse();
   const Icon = item.icon;
   const headerClasses = [
     "group relative block w-full overflow-hidden text-left transition",
@@ -2773,19 +2847,21 @@ function NavGroup({
           item.onClick?.();
         },
         "aria-expanded": open,
+        title: item.label,
         className: headerClasses,
         children: [
           active ? /* @__PURE__ */ jsx(NavActiveRail, {}) : null,
-          /* @__PURE__ */ jsxs("span", { className: `relative z-10 flex items-center ${NAV_TOP_ROW_CLASS(active)}`, children: [
+          /* @__PURE__ */ jsxs("span", { className: `relative z-10 flex items-center ${NAV_TOP_ROW_CLASS(active)} ${rc("max-md:justify-center max-md:px-0")}`, children: [
             Icon ? /* @__PURE__ */ jsx(Icon, { size: NAV_TOP_ICON_SIZE, className: "shrink-0 text-current" }) : null,
-            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
+            /* @__PURE__ */ jsx("span", { className: `min-w-0 flex-1 truncate ${rc("max-md:hidden")}`, children: item.label }),
             /* @__PURE__ */ jsx(NavRowBadge, { value: item.badge }),
             /* @__PURE__ */ jsx(
               ChevronDown,
               {
                 className: [
                   "shrink-0 opacity-80 transition-transform duration-200",
-                  open ? "rotate-180" : ""
+                  open ? "rotate-180" : "",
+                  rc("max-md:hidden")
                 ].join(" ")
               }
             )
@@ -2793,7 +2869,7 @@ function NavGroup({
         ]
       }
     ),
-    open ? /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-b-md bg-[color:var(--nav-submenu-bg)] p-1", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5", children: item.children.map((child, i) => {
+    open ? /* @__PURE__ */ jsx("div", { className: `overflow-hidden rounded-b-md bg-[color:var(--nav-submenu-bg)] p-1 ${rc("max-md:hidden")}`, children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5", children: item.children.map((child, i) => {
       if (child.kind === "section") {
         return /* @__PURE__ */ jsx(
           NavSectionRow,
@@ -2932,7 +3008,7 @@ function NavTopBar({
           "aria-label": "Open menu",
           "aria-expanded": navOpen ?? false,
           "aria-controls": "politogy-nav-drawer",
-          className: `${topBarIconButtonClass("default")} mr-1 shrink-0 lg:hidden`,
+          className: `${topBarIconButtonClass("default")} mr-1 shrink-0 md:hidden`,
           children: /* @__PURE__ */ jsx(HamburgerIcon, {})
         }
       ) : null,
@@ -3030,7 +3106,8 @@ function NavAccountMenuPanel({
   onSignOut,
   placement
 }) {
-  const wrapper = placement === "above" ? "absolute bottom-full left-0 right-0 z-40 mb-2 flex max-h-[calc(100vh-5rem)] flex-col overflow-hidden rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] py-1 text-[color:var(--foreground)] shadow-[var(--shadow-soft)]" : "absolute right-0 z-30 mt-2 flex max-h-[calc(100vh-5rem)] w-72 flex-col overflow-hidden rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] py-1 shadow-[var(--shadow-soft)]";
+  const rc = useRailCollapse();
+  const wrapper = placement === "above" ? rc("max-md:right-auto max-md:w-64") + " absolute bottom-full left-0 right-0 z-40 mb-2 flex max-h-[calc(100vh-5rem)] flex-col overflow-hidden rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] py-1 text-[color:var(--foreground)] shadow-[var(--shadow-soft)]" : "absolute right-0 z-30 mt-2 flex max-h-[calc(100vh-5rem)] w-72 flex-col overflow-hidden rounded-xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] py-1 shadow-[var(--shadow-soft)]";
   return /* @__PURE__ */ jsxs("div", { className: wrapper, children: [
     placement === "below" ? /* @__PURE__ */ jsx(TopBarPanelArrow, {}) : null,
     /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain", children: [
@@ -3182,19 +3259,20 @@ function NavSidebarUserCard({
   const displayName = hasRealName ? rawName : user.email ?? "Signed in";
   const initials = (hasRealName ? rawName : user.email ?? "P").slice(0, 2).toUpperCase();
   const secondary = hasRealName ? user.email || [user.tier, user.role].filter(Boolean).join(" \xB7 ") || "member" : [user.tier, user.role].filter(Boolean).join(" \xB7 ") || "member";
+  const rc = useRailCollapse();
   return /* @__PURE__ */ jsxs("details", { "data-nav-details": true, className: "group/acct relative", children: [
     /* @__PURE__ */ jsxs(
       "summary",
       {
         "aria-label": "My Account",
-        className: "flex w-full cursor-pointer list-none items-center gap-[9px] rounded-[5px] px-1 py-1 text-left transition hover:bg-[color:var(--sidebar-row-hover-bg,var(--panel-elevated))] [&::-webkit-details-marker]:hidden",
+        className: `flex w-full cursor-pointer list-none items-center gap-[9px] rounded-[5px] px-1 py-1 text-left transition hover:bg-[color:var(--sidebar-row-hover-bg,var(--panel-elevated))] [&::-webkit-details-marker]:hidden ${rc("max-md:justify-center max-md:px-0")}`,
         children: [
           /* @__PURE__ */ jsx("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden rounded-full bg-[color:var(--sidebar-avatar-bg,var(--color-accent))] text-[11px] font-bold text-[#FFFFFF]", children: user.avatarUrl || user.memojiUrl ? /* @__PURE__ */ jsx("img", { src: user.avatarUrl || user.memojiUrl, alt: "", className: "h-full w-full object-cover" }) : initials }),
-          /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ jsxs("span", { className: `flex min-w-0 flex-1 flex-col ${rc("max-md:hidden")}`, children: [
             /* @__PURE__ */ jsx("span", { className: "truncate text-[12px] font-semibold leading-[1.2] text-[color:var(--sidebar-text,var(--foreground))]", children: displayName }),
             /* @__PURE__ */ jsx("span", { className: "truncate text-[11px] leading-[1.3] text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))]", children: secondary })
           ] }),
-          /* @__PURE__ */ jsx(ChevronDown, { size: 14, className: "shrink-0 rotate-180 text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))] transition group-open/acct:rotate-0" })
+          /* @__PURE__ */ jsx(ChevronDown, { size: 14, className: `shrink-0 rotate-180 text-[color:var(--sidebar-caption,var(--sidebar-text-muted,var(--muted)))] transition group-open/acct:rotate-0 ${rc("max-md:hidden")}` })
         ]
       }
     ),
@@ -3350,25 +3428,22 @@ function NavTopBarActionButton({ action }) {
     }
   );
 }
-var TAB_ICON_SIZE = 18;
+var TAB_UNDERLINE_COLOR = "var(--mode-accent, var(--color-accent))";
 function NavTabButton({
   tab,
-  Link
+  Link,
+  size
 }) {
-  const { label, icon: Icon, href, onSelect, selected, disabled, disabledTitle } = tab;
-  const title = disabled ? disabledTitle ?? label : label;
-  const base = "inline-flex shrink-0 items-center justify-center border border-b-0 transition-opacity";
-  const stateClass = disabled ? "cursor-not-allowed border-transparent opacity-40" : selected ? "relative z-10 opacity-100 border-[color:var(--line)]" : "border-transparent opacity-[var(--tab-unselected-opacity,0.6)] hover:opacity-90";
-  const className = `${base} ${stateClass}`;
-  const style = {
-    height: "var(--tab-height, 36px)",
-    width: "var(--tab-width, 40px)",
-    color: "var(--foreground)",
-    borderTopLeftRadius: "var(--tab-radius, 12px)",
-    borderTopRightRadius: "var(--tab-radius, 12px)",
-    ...selected ? { background: "var(--tab-content-bg)" } : null
-  };
-  const glyph = /* @__PURE__ */ jsx(Icon, { size: TAB_ICON_SIZE, className: "text-current" });
+  const { label, count, href, onSelect, selected, disabled, disabledTitle } = tab;
+  const base = "-mb-px inline-flex shrink-0 items-center gap-2 border-b-2 font-semibold leading-none transition-colors";
+  const sizeClass = size === "sm" ? "py-2 text-[12px]" : "py-3 text-[13px]";
+  const stateClass = disabled ? "cursor-not-allowed border-transparent text-[color:var(--color-g4,#929599)] opacity-50" : selected ? "text-[color:var(--tab-selected-color,#2F3136)]" : "border-transparent text-[color:var(--color-g4,#929599)] hover:text-[color:var(--tab-hover-color,#2F3136)]";
+  const className = `${base} ${sizeClass} ${stateClass}`;
+  const style = selected && !disabled ? { borderBottomColor: TAB_UNDERLINE_COLOR } : void 0;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { children: label }),
+    count !== void 0 && count !== null && count !== "" ? /* @__PURE__ */ jsx("span", { className: "rounded-full bg-[color:var(--color-g2,#ECEEEF)] px-1.5 py-0.5 font-[family-name:var(--font-plex-mono,ui-monospace,monospace)] text-[11px] font-semibold leading-none", children: count }) : null
+  ] });
   if (disabled) {
     return /* @__PURE__ */ jsx(
       "span",
@@ -3377,10 +3452,10 @@ function NavTabButton({
         "aria-selected": false,
         "aria-disabled": "true",
         "aria-label": label,
-        title,
+        title: disabledTitle,
         className,
         style,
-        children: glyph
+        children: content
       }
     );
   }
@@ -3392,10 +3467,9 @@ function NavTabButton({
         role: "tab",
         "aria-selected": selected ? true : false,
         "aria-label": label,
-        title,
         className,
         style,
-        children: glyph
+        children: content
       }
     );
   }
@@ -3406,11 +3480,10 @@ function NavTabButton({
       role: "tab",
       "aria-selected": selected ? true : false,
       "aria-label": label,
-      title,
       onClick: onSelect,
       className,
       style,
-      children: glyph
+      children: content
     }
   );
 }
@@ -3418,6 +3491,7 @@ function NavTabStrip({
   tabs,
   "aria-label": ariaLabel,
   linkComponent,
+  size = "md",
   className,
   children
 }) {
@@ -3428,24 +3502,14 @@ function NavTabStrip({
       {
         role: "tablist",
         "aria-label": ariaLabel,
-        className: ["flex items-end gap-[var(--tab-gap,8px)]", className].filter(Boolean).join(" "),
-        children: tabs.map((tab) => /* @__PURE__ */ jsx(NavTabButton, { tab, Link }, tab.key))
+        className: [
+          "flex items-end gap-[var(--tab-gap,24px)] border-b border-[color:var(--tab-border-color,#D7DADF)]",
+          className
+        ].filter(Boolean).join(" "),
+        children: tabs.map((tab) => /* @__PURE__ */ jsx(NavTabButton, { tab, Link, size }, tab.key))
       }
     ),
-    children !== void 0 ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "relative -mt-px border border-[color:var(--line)] p-5",
-        style: {
-          background: "var(--tab-content-bg)",
-          borderTopLeftRadius: 0,
-          borderTopRightRadius: "var(--tab-radius, 12px)",
-          borderBottomLeftRadius: "var(--tab-radius, 12px)",
-          borderBottomRightRadius: "var(--tab-radius, 12px)"
-        },
-        children
-      }
-    ) : null
+    children !== void 0 ? /* @__PURE__ */ jsx("div", { className: "pt-5", children }) : null
   ] });
 }
 var BETA_BANNER_DEFAULTS = {
@@ -3553,6 +3617,12 @@ function NavAppShell({
   children
 }) {
   useCloseNavDetailsOnOutsideClick();
+  if (contentWrapper === "bare") {
+    warnDeprecated(
+      "contentWrapper",
+      "`contentWrapper: 'bare'` is deprecated: the frame's <main> is fluid and apps must not emit their own page container. Remove the app's PageContainer and drop the prop."
+    );
+  }
   const [navOpen, setNavOpen] = useState(false);
   useEffect(() => {
     setNavOpen(false);
@@ -3578,7 +3648,7 @@ function NavAppShell({
       className: "min-h-screen bg-[color:var(--background)] text-[color:var(--foreground)]",
       children: [
         /* @__PURE__ */ jsx(NavSidebar, { ...sidebar, footer: sidebarFooter, open: navOpen, onClose: () => setNavOpen(false) }),
-        /* @__PURE__ */ jsxs("div", { className: "lg:pl-[var(--sidebar-width,236px)]", children: [
+        /* @__PURE__ */ jsxs("div", { className: "pl-[var(--sidebar-collapsed-width,64px)] md:pl-[var(--sidebar-width,236px)]", children: [
           /* @__PURE__ */ jsx(
             NavTopBar,
             {
@@ -3589,19 +3659,21 @@ function NavAppShell({
             }
           ),
           betaBanner ? /* @__PURE__ */ jsx(NavBetaBanner, { ...betaBanner }) : null,
-          topBar.title ? /* @__PURE__ */ jsx("h1", { className: "px-6 pt-7 text-xl font-semibold text-[color:var(--foreground)]", children: topBar.title }) : null,
+          topBar.title ? /* @__PURE__ */ jsx("h1", { className: "px-4 pt-7 text-xl font-semibold text-[color:var(--foreground)] md:px-6", children: topBar.title }) : null,
           contentWrapper === "bare" ? /* @__PURE__ */ jsx("div", { "data-shell-content": "", className: topBar.title ? "mt-[22px]" : void 0, children }) : (
-            // Claude Design: "a rounded, inset frame on a light-grey page
-            // background" — the shell owns the page background and the
-            // gutter; it does not draw a hard border/box around the content
-            // (that reads as a second frame on top of the page header). An
-            // app's own cards are its own furniture and stay app-owned.
+            // Brand guidelines "Content width is fluid" + "Content body
+            // padding": `<main>` fills the space beside the rail with ONE
+            // gutter — 24px, or 16px below `md`, horizontally and vertically —
+            // and has no max-width and no centered container. Form and settings
+            // pages constrain themselves with <FormColumn> (960px, left-aligned).
+            // The shell owns the page background and the gutter; an app's own
+            // cards are its own furniture and stay app-owned.
             /* @__PURE__ */ jsx(
               "main",
               {
                 "data-shell-content": "",
-                className: `min-h-[calc(100vh-63px)] bg-[color:var(--chrome-page-bg,#F4F5F7)] px-6 ${topBar.title ? "pb-7 pt-[22px]" : "py-7"}`,
-                children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-7xl", children })
+                className: `min-h-[calc(100vh-63px)] bg-[color:var(--chrome-page-bg,#F4F5F7)] px-4 pb-4 md:px-6 md:pb-6 ${topBar.title ? "pt-[22px]" : "pt-4 md:pt-6"}`,
+                children
               }
             )
           )
@@ -3612,5 +3684,5 @@ function NavAppShell({
 }
 
 export { BETA_BANNER_DISMISS_KEY, CAMPAIGN_FEATURE_AVAILABILITY, CORE_APP_ORIGIN, CORE_BILLING_PATH, FuelAction, NavAppShell, NavBetaBanner, NavChromeProvider, NavDisplayAction, NavSidebar, NavTabStrip, NavThemeControl, NavTopBar, NotificationsAction, SPECS_ORIGIN, SpecOverlayAction, SupportAction, TopBarCountBadge, TopBarPanelArrow, TopBarPopover, TopBarTooltip, TopBarWidgetSlot, clearBetaBannerDismissal, envChipClasses, isNavItemActive, resolveOrgLogoUrl, standardPolitogyNav, topBarIconButtonClass, useChromeMe, useChromeOrgs, useNavChromeFetcher, useThemePreference };
-//# sourceMappingURL=chunk-2UTIX3LI.js.map
-//# sourceMappingURL=chunk-2UTIX3LI.js.map
+//# sourceMappingURL=chunk-WFUWFMCA.js.map
+//# sourceMappingURL=chunk-WFUWFMCA.js.map