@the-portland-company/shell 0.86.0 → 0.88.0

package/dist/{chunk-PRZP2SB6.js → chunk-7WSGW5CC.js}

@@ -1,13 +1,227 @@
 import { readThemeCookie, THEME_STORAGE_KEY, isThemePreference, applyThemePreference, readPendingThemeChoice, writeThemeCookie, clearPendingThemeChoice, markThemeChoicePending } from './chunk-BHRVZPZ7.js';
-import clsx from 'clsx';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { createContext, useState, useEffect, useRef, useContext, useMemo, useCallback, useSyncExternalStore } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import clsx8 from 'clsx';
+import { forwardRef, useId, createContext, useState, useEffect, useRef, useContext, useMemo, useCallback, useSyncExternalStore } from 'react';
 import { FiUser, FiSettings, FiMessageSquare, FiMail, FiInfo, FiSun, FiMoon, FiHelpCircle, FiLifeBuoy, FiAlertCircle, FiAlertTriangle, FiBell, FiGrid, FiZap, FiBatteryCharging, FiBattery } from 'react-icons/fi';
 import { createPortal } from 'react-dom';
 
+function Card({
+  title,
+  children,
+  minH,
+  className,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `rounded-lg border border-slate-200 bg-white p-6 shadow-sm ${className || ""}`,
+      style: { minHeight: minH, ...style },
+      ...props,
+      children: [
+        title && /* @__PURE__ */ jsx("h3", { className: "mb-4 text-lg font-semibold", children: title }),
+        children
+      ]
+    }
+  );
+}
 function FormColumn({ children, className }) {
-  return /* @__PURE__ */ jsx("div", { "data-shell-form-column": "", className: clsx("w-full max-w-[960px]", className), children });
+  return /* @__PURE__ */ jsx("div", { "data-shell-form-column": "", className: clsx8("w-full max-w-[960px]", className), children });
 }
+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))]",
+  secondary: "border border-[color:var(--app-btn-secondary-border,var(--color-border))] bg-[color:var(--app-btn-secondary-bg,var(--color-white))] text-[color:var(--app-btn-secondary-fg,var(--color-text))] hover:bg-[color:var(--app-btn-secondary-bg-hover,var(--color-bg))]",
+  ghost: "border border-transparent bg-transparent text-[color:var(--app-btn-secondary-fg,var(--color-text))] hover:bg-[color:var(--app-btn-secondary-bg-hover,var(--color-bg))]",
+  danger: "border border-transparent bg-[color:var(--chrome-danger,var(--color-race-red))] text-[color:var(--color-white)] hover:bg-[color:var(--color-race-red-600)]"
+};
+var SIZE_CLASS = {
+  md: "h-[44px]",
+  sm: "h-[36px]"
+};
+var Button = forwardRef(function Button2({
+  variant = "primary",
+  size = "md",
+  loading = false,
+  disabled = false,
+  href,
+  as,
+  type,
+  className,
+  children,
+  onClick,
+  ...props
+}, ref) {
+  const Component = as ?? (href ? "a" : "button");
+  const isNativeButton = Component === "button";
+  const inactive = disabled || loading;
+  const linkProps = isNativeButton ? { type: type ?? "button", disabled: inactive } : {
+    href,
+    "aria-disabled": inactive || void 0,
+    tabIndex: inactive ? -1 : void 0
+  };
+  return /* @__PURE__ */ jsxs(
+    Component,
+    {
+      ref,
+      "data-shell-button": "",
+      "data-variant": variant,
+      "aria-busy": loading || void 0,
+      className: clsx8(
+        "inline-flex items-center justify-center gap-2 rounded-[5px] px-3 text-sm font-semibold no-underline transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--app-field-focus,var(--color-accent))] focus-visible:ring-offset-2",
+        SIZE_CLASS[size],
+        VARIANT_CLASS[variant],
+        inactive && "cursor-not-allowed opacity-50",
+        className
+      ),
+      onClick: inactive ? (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+      } : onClick,
+      ...linkProps,
+      ...props,
+      children: [
+        loading ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            "data-shell-button-spinner": "",
+            className: "inline-block h-4 w-4 animate-spin motion-reduce:animate-none rounded-full border-2 border-current border-t-transparent"
+          }
+        ) : null,
+        children
+      ]
+    }
+  );
+});
+var Button_default = Button;
+function FormField({
+  id,
+  label,
+  helperText,
+  error,
+  required,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: clsx8("flex w-full flex-col gap-1", className), children: [
+    label ? /* @__PURE__ */ jsxs("label", { htmlFor: id, className: "text-sm font-semibold text-[color:var(--color-text)]", children: [
+      label,
+      required ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " *" }) : null
+    ] }) : null,
+    children,
+    error ? /* @__PURE__ */ jsx(
+      "p",
+      {
+        id: `${id}-error`,
+        role: "alert",
+        className: "text-xs text-[color:var(--chrome-danger,var(--color-race-red))]",
+        children: error
+      }
+    ) : helperText ? /* @__PURE__ */ jsx("p", { id: `${id}-helper`, className: "text-xs text-[color:var(--color-text-muted)]", children: helperText }) : null
+  ] });
+}
+function describedBy(id, helperText, error, extra) {
+  const generated = error ? `${id}-error` : helperText ? `${id}-helper` : void 0;
+  const merged = [generated, extra].filter(Boolean).join(" ");
+  return merged || void 0;
+}
+
+// src/components/fieldStyles.ts
+var FIELD_BASE = "w-full rounded-[5px] border bg-[color:var(--app-field-bg,var(--color-white))] px-3 text-sm text-[color:var(--color-text)] placeholder:text-[color:var(--color-text-muted)] focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50";
+var FIELD_VALID = "border-[color:var(--app-field-border,var(--color-border))] hover:border-[color:var(--app-field-border-hover,var(--color-g4))] focus:border-[color:var(--app-field-focus,var(--color-accent))] focus:ring-[color:var(--app-field-focus,var(--color-accent))]";
+var FIELD_INVALID = "border-[color:var(--chrome-danger,var(--color-race-red))] focus:ring-[color:var(--chrome-danger,var(--color-race-red))]";
+var Input = forwardRef(function Input2({ label, helperText, error, invalid, className, wrapperClassName, id, required, "aria-describedby": ariaDescribedBy, ...props }, ref) {
+  const autoId = useId();
+  const fieldId = id ?? autoId;
+  const isInvalid = Boolean(error) || Boolean(invalid);
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      id: fieldId,
+      label,
+      helperText,
+      error,
+      required,
+      className: wrapperClassName,
+      children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          id: fieldId,
+          required,
+          "data-shell-field": "",
+          "aria-invalid": isInvalid || void 0,
+          "aria-describedby": describedBy(fieldId, helperText, error, ariaDescribedBy),
+          className: clsx8(FIELD_BASE, "h-[44px]", isInvalid ? FIELD_INVALID : FIELD_VALID, className),
+          ...props
+        }
+      )
+    }
+  );
+});
+var Input_default = Input;
+var Select = forwardRef(function Select2({ label, helperText, error, invalid, className, wrapperClassName, id, required, children, "aria-describedby": ariaDescribedBy, ...props }, ref) {
+  const autoId = useId();
+  const fieldId = id ?? autoId;
+  const isInvalid = Boolean(error) || Boolean(invalid);
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      id: fieldId,
+      label,
+      helperText,
+      error,
+      required,
+      className: wrapperClassName,
+      children: /* @__PURE__ */ jsx(
+        "select",
+        {
+          ref,
+          id: fieldId,
+          required,
+          "data-shell-field": "",
+          "aria-invalid": isInvalid || void 0,
+          "aria-describedby": describedBy(fieldId, helperText, error, ariaDescribedBy),
+          className: clsx8(FIELD_BASE, "h-[44px]", isInvalid ? FIELD_INVALID : FIELD_VALID, className),
+          ...props,
+          children
+        }
+      )
+    }
+  );
+});
+var Select_default = Select;
+var Textarea = forwardRef(function Textarea2({ label, helperText, error, invalid, className, wrapperClassName, id, required, "aria-describedby": ariaDescribedBy, ...props }, ref) {
+  const autoId = useId();
+  const fieldId = id ?? autoId;
+  const isInvalid = Boolean(error) || Boolean(invalid);
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      id: fieldId,
+      label,
+      helperText,
+      error,
+      required,
+      className: wrapperClassName,
+      children: /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref,
+          id: fieldId,
+          required,
+          "data-shell-field": "",
+          "aria-invalid": isInvalid || void 0,
+          "aria-describedby": describedBy(fieldId, helperText, error, ariaDescribedBy),
+          className: clsx8(FIELD_BASE, "min-h-[88px] py-3", isInvalid ? FIELD_INVALID : FIELD_VALID, className),
+          ...props
+        }
+      )
+    }
+  );
+});
+var Textarea_default = Textarea;
 
 // src/lib/deprecation.ts
 var warned = /* @__PURE__ */ new Set();
@@ -1952,6 +2166,72 @@ function useThemePreference() {
   );
   return { value, setValue };
 }
+function HeaderTabBar({
+  items,
+  activeId,
+  onChange,
+  className,
+  ariaLabel = "Tabs"
+}) {
+  warnDeprecated(
+    "HeaderTabBar",
+    "<HeaderTabBar> is deprecated: use <NavTabStrip> from @the-portland-company/shell/native, the canonical page tab strip."
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tablist",
+      "aria-label": ariaLabel,
+      className: clsx8(
+        // Header-wide tab strip: background + bottom border only (no outer box).
+        // Left-aligned and fluid: the container spans the full content width,
+        // the tabs keep their natural width packed from the left (Global-Rules
+        // "Tabs & UI Styling": the strip spans the full width of the content
+        // area; tabs keep their natural width, left-aligned. Spencer 2026-10-11:
+        // all apps, all tabs, all screens). No mx-auto / justify-center /
+        // fixed width on the container.
+        "app-header-tab-bar m-0 flex w-full justify-start bg-slate-100 p-0",
+        "border-b border-slate-200",
+        className
+      ),
+      children: items.map((item, idx) => {
+        const isActive = item.id === activeId;
+        const isDisabled = Boolean(item.disabled);
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": isActive,
+            "aria-label": item.label,
+            disabled: isDisabled,
+            onClick: () => onChange(item.id),
+            className: clsx8(
+              // `group/tbtip relative` powers the shared <TopBarTooltip>.
+              // Natural width (no flex-1 stretch); 40px square hit area for the
+              // icon-only tab so the strip stays tappable.
+              "group/tbtip app-header-tab-button relative inline-flex h-10 min-w-10 items-center justify-center px-3",
+              "transition-colors",
+              "rounded-none",
+              idx === 0 ? "rounded-tl-lg" : null,
+              idx === items.length - 1 ? "rounded-tr-lg" : null,
+              isActive ? "text-white" : "bg-transparent text-slate-600 hover:bg-white/60 hover:text-slate-900",
+              isDisabled ? "cursor-not-allowed opacity-50" : null
+            ),
+            style: {
+              background: isActive ? "var(--mode-primary-color, var(--app-btn-primary-bg))" : void 0
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center text-[14px] leading-none", children: item.icon }),
+              isDisabled ? null : /* @__PURE__ */ jsx(TopBarTooltip, { title: item.label })
+            ]
+          },
+          item.id
+        );
+      })
+    }
+  );
+}
 
 // src/speculation/emitRules.ts
 function buildSpeculationRules(currentApp, registry) {
@@ -2050,7 +2330,129 @@ function SpeculationRulesScript({ items }) {
   }, [items, origin]);
   return null;
 }
+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";
+};
+function PageHeaderView({
+  renderCrumbLink,
+  title,
+  mode,
+  eyebrow,
+  showEyebrow = true,
+  subtitle,
+  breadcrumbs = [],
+  actions = null,
+  tabBar = null,
+  maxW = "full",
+  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();
+  }
+  const eyebrowText = showEyebrow ? eyebrow ?? (mode ? MODE_EYEBROW_LABEL[mode] : void 0) : void 0;
+  if (!title && !eyebrowText && breadcrumbsWithoutCurrent.length === 0 && !actions && !tabBar) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: { backgroundColor: "var(--app-tab-header-bg, #888888)" },
+      className: clsx8("text-slate-100", tabBar ? "pt-3 pb-0" : "py-3 border-b border-gray-200", {
+        "md:ml-60": !hideSidebar
+      }),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: clsx8("w-full px-4", maxWClass), children: /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-nowrap items-start justify-between gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            eyebrowText ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "truncate text-[11px] font-bold uppercase leading-[1.2] tracking-[0.09em]",
+                style: { color: "var(--mode-accent, var(--color-accent, #E63946))" },
+                children: eyebrowText
+              }
+            ) : null,
+            title ? /* @__PURE__ */ jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "truncate font-bold text-white",
+                style: {
+                  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)"
+                },
+                children: title
+              }
+            ) }) : null,
+            subtitle ? /* @__PURE__ */ jsx("div", { className: "mt-1 truncate text-[15px] text-[color:var(--color-g4,#929599)]", children: subtitle }) : null,
+            breadcrumbsWithoutCurrent.length > 0 ? /* @__PURE__ */ jsx(
+              "nav",
+              {
+                "aria-label": "Breadcrumb",
+                className: clsx8("min-w-0 text-slate-100", title ? "mt-1" : ""),
+                children: /* @__PURE__ */ jsx("ol", { className: "flex flex-nowrap items-center gap-2 overflow-hidden text-sm text-gray-600", children: breadcrumbsWithoutCurrent.map((item, index) => /* @__PURE__ */ jsxs(
+                  "li",
+                  {
+                    className: "flex min-w-0 flex-shrink-0 items-center gap-2",
+                    children: [
+                      index > 0 ? /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: ">" }) : null,
+                      item.href ? renderCrumbLink(item.href, item.label, "truncate text-slate-100 hover:underline") : /* @__PURE__ */ jsx("span", { className: "truncate text-slate-100", children: item.label })
+                    ]
+                  },
+                  `${item.label}-${index}`
+                )) })
+              }
+            ) : null
+          ] }),
+          actions ? /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: actions }) : null
+        ] }) }),
+        tabBar ? /* @__PURE__ */ jsx("div", { className: "m-0 w-full px-0", style: { backgroundColor: "transparent" }, children: tabBar }) : null
+      ]
+    }
+  );
+}
+function BreadcrumbBarView({
+  renderCrumbLink,
+  breadcrumbs = [],
+  actions = null,
+  maxW = "full"
+}) {
+  warnDeprecated(
+    "BreadcrumbBar",
+    "<BreadcrumbBar> is deprecated for apps: the breadcrumb trail is retired. Use the page header (mode eyebrow + title) instead."
+  );
+  if ((!breadcrumbs || breadcrumbs.length === 0) && !actions) {
+    return null;
+  }
+  const maxWClass = maxW === "full" ? "max-w-none" : maxW === "container.xl" ? "max-w-7xl" : maxW === "container.lg" ? "max-w-6xl" : maxW === "container.md" ? "max-w-5xl" : "max-w-7xl";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "ml-0 border-b border-gray-200 px-4 py-3 md:ml-60",
+      style: { backgroundColor: "var(--app-tab-header-bg, #888888)" },
+      children: /* @__PURE__ */ jsx("div", { className: clsx8("mx-auto w-full px-0", maxWClass), children: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between", children: [
+        breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx("ol", { className: "flex items-center gap-2 text-sm text-slate-100", children: breadcrumbs.map((item, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
+          index > 0 ? /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: ">" }) : null,
+          item.href ? renderCrumbLink(item.href, item.label, "text-slate-100 hover:underline") : /* @__PURE__ */ jsx("span", { className: "text-slate-100", children: item.label })
+        ] }, index)) }) }),
+        actions && /* @__PURE__ */ jsx("div", { children: actions })
+      ] }) })
+    }
+  );
+}
 
-export { CORE_APP_ORIGIN, CORE_BILLING_PATH, CREDIT_TYPE_LABELS, CREDIT_TYPE_ORDER, CreditsAction, FormColumn, FuelAction, NAV_DISPLAY_OPTIONS, NavChromeProvider, NavDisplayAction, NavThemeControl, NotificationsAction, SPECS_ORIGIN, SpecOverlayAction, SpeculationRulesScript, SupportAction, TOPBAR_GLYPH_SIZE, TopBarCountBadge, TopBarPanelArrow, TopBarPopover, TopBarTooltip, TopBarWidgetSlot, buildNavSpeculationRules, buildSpeculationRules, collectSiblingAppUrls, createCommsNotificationsAdapter, creditGaugeRatio, creditStateWord, creditTooltipLine, creditsAriaLabel, creditsIconState, emptyNotificationsFeed, normalizeNotificationsFeed, resolveBrandGlyph, resolveOrgLogoUrl, topBarIconButtonClass, useChromeMe, useChromeOrgs, useNavChromeDedupedFetch, useNavChromeFetcher, useThemePreference, useTopBarIconSlotGlyph, warnDeprecated };
-//# sourceMappingURL=chunk-PRZP2SB6.js.map
-//# sourceMappingURL=chunk-PRZP2SB6.js.map
+export { BreadcrumbBarView, Button_default, CORE_APP_ORIGIN, CORE_BILLING_PATH, CREDIT_TYPE_LABELS, CREDIT_TYPE_ORDER, Card, CreditsAction, FormColumn, FuelAction, HeaderTabBar, Input_default, NAV_DISPLAY_OPTIONS, NavChromeProvider, NavDisplayAction, NavThemeControl, NotificationsAction, PageHeaderView, SPECS_ORIGIN, Select_default, SpecOverlayAction, SpeculationRulesScript, SupportAction, TOPBAR_GLYPH_SIZE, Textarea_default, TopBarCountBadge, TopBarPanelArrow, TopBarPopover, TopBarTooltip, TopBarWidgetSlot, buildNavSpeculationRules, buildSpeculationRules, collectSiblingAppUrls, createCommsNotificationsAdapter, creditGaugeRatio, creditStateWord, creditTooltipLine, creditsAriaLabel, creditsIconState, emptyNotificationsFeed, normalizeNotificationsFeed, resolveBrandGlyph, resolveOrgLogoUrl, topBarIconButtonClass, useChromeMe, useChromeOrgs, useNavChromeDedupedFetch, useNavChromeFetcher, useThemePreference, useTopBarIconSlotGlyph, warnDeprecated };
+//# sourceMappingURL=chunk-7WSGW5CC.js.map
+//# sourceMappingURL=chunk-7WSGW5CC.js.map