@the-portland-company/shell 0.89.0 → 0.90.0

package/dist/{index-DwkSyAip.d.ts → index-C3jzqN9K.d.ts}

@@ -76,9 +76,11 @@ type PageHeaderProps = {
     showEyebrow?: boolean;
     /** Optional one-line subtitle, 15px G4, directly under the title. */
     subtitle?: ReactNode;
+    /** @deprecated The breadcrumb trail is retired. Accepted for compatibility; renders nothing and warns once in dev. */
     breadcrumbs?: BreadcrumbItem$1[];
     actions?: ReactNode;
     tabBar?: ReactNode;
+    /** @deprecated Ignored. The header spans its container; pages choose `FormColumn` (960px) or the fluid frame. */
     maxW?: string;
     hideSidebar?: boolean;
 };
@@ -246,7 +248,7 @@ type FileInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'valu
  * field tokens as `Input`; the native "Choose file" button is styled with the
  * secondary-button tokens. Use `accept` / `multiple` as usual.
  */
-declare const FileInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "defaultValue"> & FieldChromeProps & {
+declare const FileInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue"> & FieldChromeProps & {
     /** Class for the control itself; the wrapper takes `wrapperClassName`. */
     className?: string;
     wrapperClassName?: string;
@@ -689,7 +691,7 @@ declare function useThemePreference(): {
     setValue: (next: ThemePreference) => void;
 };
 
-/** Page header for apps with no react-router: breadcrumbs render as plain anchors. */
+/** Page header for apps with no react-router. Same view as the main entry. */
 declare function PageHeader(props: PageHeaderProps): react_jsx_runtime.JSX.Element;
 
 /**

package/dist/{index-CZylXAP4.d.cts → index-CaMJSRDb.d.cts}

@@ -76,9 +76,11 @@ type PageHeaderProps = {
     showEyebrow?: boolean;
     /** Optional one-line subtitle, 15px G4, directly under the title. */
     subtitle?: ReactNode;
+    /** @deprecated The breadcrumb trail is retired. Accepted for compatibility; renders nothing and warns once in dev. */
     breadcrumbs?: BreadcrumbItem$1[];
     actions?: ReactNode;
     tabBar?: ReactNode;
+    /** @deprecated Ignored. The header spans its container; pages choose `FormColumn` (960px) or the fluid frame. */
     maxW?: string;
     hideSidebar?: boolean;
 };
@@ -246,7 +248,7 @@ type FileInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'valu
  * field tokens as `Input`; the native "Choose file" button is styled with the
  * secondary-button tokens. Use `accept` / `multiple` as usual.
  */
-declare const FileInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "defaultValue"> & FieldChromeProps & {
+declare const FileInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue"> & FieldChromeProps & {
     /** Class for the control itself; the wrapper takes `wrapperClassName`. */
     className?: string;
     wrapperClassName?: string;
@@ -689,7 +691,7 @@ declare function useThemePreference(): {
     setValue: (next: ThemePreference) => void;
 };
 
-/** Page header for apps with no react-router: breadcrumbs render as plain anchors. */
+/** Page header for apps with no react-router. Same view as the main entry. */
 declare function PageHeader(props: PageHeaderProps): react_jsx_runtime.JSX.Element;
 
 /**

package/dist/index.cjs

@@ -3,8 +3,8 @@
 var react = require('@chakra-ui/react');
 var clsx = require('clsx');
 var jsxRuntime = require('react/jsx-runtime');
-var reactRouterDom = require('react-router-dom');
 var react$1 = require('react');
+var reactRouterDom = require('react-router-dom');
 require('react-dom');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -906,65 +906,85 @@ function Card({
 function FormColumn({ children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-shell-form-column": "", className: clsx__default.default("w-full max-w-[960px]", className), children });
 }
+
+// src/lib/deprecation.ts
+var warned = /* @__PURE__ */ new Set();
+function isDev() {
+  try {
+    return typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
+  } catch {
+    return false;
+  }
+}
+function warnDeprecated(key, message) {
+  if (!isDev() || warned.has(key)) return;
+  warned.add(key);
+  console.warn(`[@the-portland-company/shell] ${message}`);
+}
 var MODE_EYEBROW_LABEL = {
   relationship: "Relationship mode",
   campaign: "Campaign mode",
   petition: "Petition mode"
 };
-var resolveMaxWidthClass = (maxW) => {
-  if (maxW === "full") return "max-w-none";
-  if (maxW === "container.lg") return "max-w-6xl";
-  if (maxW === "container.md") return "max-w-5xl";
-  return "max-w-7xl";
-};
+var EMAIL_PATTERN = /[^\s@]+@[^\s@]+\.[^\s@]+/;
 function PageHeaderView({
-  renderCrumbLink,
   title,
   mode,
   eyebrow,
   showEyebrow = true,
   subtitle,
-  breadcrumbs = [],
+  breadcrumbs,
   actions = null,
   tabBar = null,
-  maxW = "full",
+  maxW,
   hideSidebar = false
 }) {
-  const maxWClass = resolveMaxWidthClass(maxW);
-  const titleText = typeof title === "string" ? title.trim() : "";
-  const normalizedTitle = titleText.toLowerCase();
-  const breadcrumbsWithoutCurrent = [...breadcrumbs];
-  const last = breadcrumbsWithoutCurrent[breadcrumbsWithoutCurrent.length - 1];
-  if (breadcrumbsWithoutCurrent.length > 1 && normalizedTitle && last && last.label.trim().toLowerCase() === normalizedTitle) {
-    breadcrumbsWithoutCurrent.pop();
+  if (breadcrumbs !== void 0) {
+    warnDeprecated(
+      "PageHeader.breadcrumbs",
+      '<PageHeader breadcrumbs> is deprecated and renders nothing: the breadcrumb trail is retired (Reference/UI-Platform \u2192 "Page header"). Remove the prop.'
+    );
+  }
+  if (maxW !== void 0) {
+    warnDeprecated(
+      "PageHeader.maxW",
+      "<PageHeader maxW> is deprecated and ignored: the header spans its container. Use <FormColumn> (960px) or the fluid frame for page width."
+    );
+  }
+  if (typeof title === "string" && EMAIL_PATTERN.test(title) || typeof subtitle === "string" && EMAIL_PATTERN.test(subtitle)) {
+    warnDeprecated(
+      "PageHeader.email",
+      `<PageHeader> title/subtitle contains an email address. The user's email never appears in the page header (Reference/UI-Platform \u2192 "Page header"); identity lives in the left bar footer.`
+    );
   }
   const eyebrowText = showEyebrow ? eyebrow ?? (mode ? MODE_EYEBROW_LABEL[mode] : void 0) : void 0;
-  if (!title && !eyebrowText && breadcrumbsWithoutCurrent.length === 0 && !actions && !tabBar) {
+  if (!title && !eyebrowText && !actions && !tabBar) {
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      style: { backgroundColor: "var(--app-tab-header-bg, #888888)" },
-      className: clsx__default.default("text-slate-100", tabBar ? "pt-3 pb-0" : "py-3 border-b border-gray-200", {
+      "data-shell-page-header": "",
+      className: clsx__default.default("pt-[22px] text-[color:var(--color-text,#2F3136)]", tabBar ? "pb-0" : "pb-4", {
         "md:ml-60": !hideSidebar
       }),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx__default.default("w-full px-4", maxWClass), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-nowrap items-start justify-between gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full px-4 md:px-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-nowrap items-start justify-between gap-4", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
             eyebrowText ? /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
                 className: "truncate text-[11px] font-bold uppercase leading-[1.2] tracking-[0.09em]",
-                style: { color: "var(--mode-accent, var(--color-accent, #E63946))" },
+                style: { color: "var(--color-accent-fg, var(--mode-accent, var(--color-accent, #E63946)))" },
                 children: eyebrowText
               }
             ) : null,
             title ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
+              "h1",
               {
-                className: "truncate font-bold text-white",
+                className: "m-0 truncate font-bold",
                 style: {
+                  color: "var(--color-text, #2F3136)",
                   fontFamily: "var(--font-family, ui-sans-serif, system-ui, sans-serif)",
                   fontSize: "var(--type-h2-size, 1.875rem)",
                   lineHeight: "var(--type-h2-line-height, 1.25)"
@@ -972,25 +992,7 @@ function PageHeaderView({
                 children: title
               }
             ) }) : null,
-            subtitle ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 truncate text-[15px] text-[color:var(--color-g4,#929599)]", children: subtitle }) : null,
-            breadcrumbsWithoutCurrent.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-              "nav",
-              {
-                "aria-label": "Breadcrumb",
-                className: clsx__default.default("min-w-0 text-slate-100", title ? "mt-1" : ""),
-                children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex flex-nowrap items-center gap-2 overflow-hidden text-sm text-gray-600", children: breadcrumbsWithoutCurrent.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-                  "li",
-                  {
-                    className: "flex min-w-0 flex-shrink-0 items-center gap-2",
-                    children: [
-                      index > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: ">" }) : null,
-                      item.href ? renderCrumbLink(item.href, item.label, "truncate text-slate-100 hover:underline") : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-slate-100", children: item.label })
-                    ]
-                  },
-                  `${item.label}-${index}`
-                )) })
-              }
-            ) : null
+            subtitle ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 truncate text-[15px] text-[color:var(--color-g4,#58657A)]", children: subtitle }) : null
           ] }),
           actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: actions }) : null
         ] }) }),
@@ -1000,13 +1002,7 @@ function PageHeaderView({
   );
 }
 function PageHeader(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    PageHeaderView,
-    {
-      ...props,
-      renderCrumbLink: (href, label, className) => /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Link, { to: href, className, children: label })
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(PageHeaderView, { ...props });
 }
 var VARIANT_CLASS = {
   primary: "border border-transparent bg-[color:var(--app-btn-primary-bg,var(--color-accent))] text-[color:var(--app-btn-primary-fg,var(--color-white))] hover:bg-[color:var(--app-btn-primary-bg-hover,var(--color-accent-hover))]",
@@ -1313,21 +1309,6 @@ var FileInput = react$1.forwardRef(function FileInput2({ label, helperText, erro
   );
 });
 var FileInput_default = FileInput;
-
-// src/lib/deprecation.ts
-var warned = /* @__PURE__ */ new Set();
-function isDev() {
-  try {
-    return typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
-  } catch {
-    return false;
-  }
-}
-function warnDeprecated(key, message) {
-  if (!isDev() || warned.has(key)) return;
-  warned.add(key);
-  console.warn(`[@the-portland-company/shell] ${message}`);
-}
 function PageContainer({
   children,
   maxW = "container.xl",