@the-portland-company/shell 0.88.0 → 0.89.0

package/dist/app-chrome.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { p as StandardNavIconKey, q as NavIcon, N as NavItem, r as NavBreadcrumb, s as StandardNavMode, t as NavLinkComponent, u as NavChromeFetcher, v as NavMode, w as NavUserMenu, x as NavOrgOption, i as NotificationsAdapter, y as NavFooterLink, z as NavFooter, A as NavDisplayMode } from './index-tfcLFAni.cjs';
+import { v as StandardNavIconKey, w as NavIcon, N as NavItem, x as NavBreadcrumb, y as StandardNavMode, z as NavLinkComponent, A as NavChromeFetcher, D as NavMode, E as NavUserMenu, G as NavOrgOption, o as NotificationsAdapter, J as NavFooterLink, K as NavFooter, L as NavDisplayMode } from './index-CZylXAP4.cjs';
 import './theme-preference.cjs';
 
 /**

package/dist/app-chrome.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { p as StandardNavIconKey, q as NavIcon, N as NavItem, r as NavBreadcrumb, s as StandardNavMode, t as NavLinkComponent, u as NavChromeFetcher, v as NavMode, w as NavUserMenu, x as NavOrgOption, i as NotificationsAdapter, y as NavFooterLink, z as NavFooter, A as NavDisplayMode } from './index-DEiOABW2.js';
+import { v as StandardNavIconKey, w as NavIcon, N as NavItem, x as NavBreadcrumb, y as StandardNavMode, z as NavLinkComponent, A as NavChromeFetcher, D as NavMode, E as NavUserMenu, G as NavOrgOption, o as NotificationsAdapter, J as NavFooterLink, K as NavFooter, L as NavDisplayMode } from './index-DwkSyAip.js';
 import './theme-preference.js';
 
 /**

package/dist/app-chrome.js

@@ -1,9 +1,9 @@
 "use client";
 import { broadcastLogout, watchLogout } from './chunk-LL6LSJAH.js';
 import { writeUrlState } from './chunk-GVQKZI5X.js';
-import { clearBetaBannerDismissal, standardPolitogyNav, standardNavIcons, isNavItemActive, NavAppShell } from './chunk-2ACN7HQC.js';
-export { standardNavIcons } from './chunk-2ACN7HQC.js';
-import { warnDeprecated, NavChromeProvider, TopBarWidgetSlot, FuelAction, SpecOverlayAction, NotificationsAction, SupportAction, useChromeMe, useNavChromeDedupedFetch, useChromeOrgs, useNavChromeFetcher } from './chunk-7WSGW5CC.js';
+import { clearBetaBannerDismissal, standardPolitogyNav, standardNavIcons, isNavItemActive, NavAppShell } from './chunk-SJDFAK5R.js';
+export { standardNavIcons } from './chunk-SJDFAK5R.js';
+import { warnDeprecated, NavChromeProvider, TopBarWidgetSlot, FuelAction, SpecOverlayAction, NotificationsAction, SupportAction, useChromeMe, useNavChromeDedupedFetch, useChromeOrgs, useNavChromeFetcher } from './chunk-J23MTK56.js';
 import './chunk-BHRVZPZ7.js';
 import { NAV_DISPLAY_DEFAULT, resolveNavDisplay, writeNavDisplayLocal, writeNavDisplayCookie, isNavDisplayPreference, NAV_DISPLAY_STORAGE_KEY, readNavDisplayCookie } from './chunk-7YVJ7HQG.js';
 import { authBaseUrl, orgIdTail, settingsBaseUrl, ORG_ID_QUERY_PARAM, readOrgSelectorFromUrl, matchOrgSelector, syncOrgIdInUrl, isOrgId, switchActiveOrg, ACTIVE_ORG_QUERY_PARAM, writeActiveOrgCookie, resolveActiveOrg, readActiveOrgCookie } from './chunk-5LO5W7W5.js';

package/dist/chrome.css

@@ -599,3 +599,23 @@
   box-shadow: none !important;
 }
 
+
+/* ---- Card + Checkbox surface tokens (shell 0.89.0) ---------------------
+ * `Card` and `Checkbox` read these so they follow the theme. Light values are
+ * the Brand "Card" white, G3 border, graphite text; the muted text is #5C6B80
+ * (5.9:1 on white) rather than --color-g4, which is 3.0:1 on white and fails AA.
+ * Dark values are the neutral-black ramp (theme/colors.ts `neutral`): surface
+ * #161616, border #333333, text #E8E8E8, muted #A3A3A3 (6.9:1 on the surface).
+ * `applyThemePreference` puts `.dark` on <html>. The Brand stylesheet's `.dark {}` may override any of them. */
+:root {
+  --app-card-bg: #FFFFFF;
+  --app-card-border: #D7DADF;
+  --app-card-fg: #2F3136;
+  --app-card-fg-muted: #5C6B80;
+}
+.dark {
+  --app-card-bg: #161616;
+  --app-card-border: #333333;
+  --app-card-fg: #E8E8E8;
+  --app-card-fg-muted: #A3A3A3;
+}

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

@@ -1,33 +1,76 @@
 import { readThemeCookie, THEME_STORAGE_KEY, isThemePreference, applyThemePreference, readPendingThemeChoice, writeThemeCookie, clearPendingThemeChoice, markThemeChoicePending } from './chunk-BHRVZPZ7.js';
+import clsx from 'clsx';
 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 { forwardRef, useId, useRef, useCallback, useEffect, createContext, useState, useContext, useMemo, 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';
 
+var PADDING = {
+  none: "p-0",
+  sm: "p-4",
+  md: "p-6",
+  lg: "p-8"
+};
 function Card({
   title,
+  subtitle,
+  aside,
+  actions,
+  footer,
   children,
+  padding = "md",
+  bodyClassName,
   minH,
   className,
   style,
   ...props
 }) {
+  const structured = Boolean(subtitle || aside || actions || footer || bodyClassName);
+  const surface = "rounded-lg border border-[color:var(--app-card-border,var(--color-border))] bg-[color:var(--app-card-bg,var(--color-panel))] text-[color:var(--app-card-fg,var(--color-text))] shadow-sm";
+  if (!structured) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-shell-card": "",
+        className: clsx(surface, PADDING[padding], className),
+        style: { minHeight: minH, ...style },
+        ...props,
+        children: [
+          title ? /* @__PURE__ */ jsx("h3", { className: "mb-4 text-lg font-semibold", children: title }) : null,
+          children
+        ]
+      }
+    );
+  }
+  const hasHeader = Boolean(title || subtitle || aside || actions);
+  const divider = "border-[color:var(--app-card-border,var(--color-border))]";
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `rounded-lg border border-slate-200 bg-white p-6 shadow-sm ${className || ""}`,
+      "data-shell-card": "",
+      "data-shell-card-structured": "",
+      className: clsx(surface, "overflow-hidden", className),
       style: { minHeight: minH, ...style },
       ...props,
       children: [
-        title && /* @__PURE__ */ jsx("h3", { className: "mb-4 text-lg font-semibold", children: title }),
-        children
+        hasHeader ? /* @__PURE__ */ jsxs("div", { className: clsx("flex flex-wrap items-start justify-between gap-3 border-b px-5 py-4", divider), children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            title ? /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold", children: title }) : null,
+            subtitle ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-sm text-[color:var(--app-card-fg-muted,var(--color-text-muted))]", children: subtitle }) : null
+          ] }),
+          aside || actions ? /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+            aside,
+            actions
+          ] }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsx("div", { className: bodyClassName ?? PADDING[padding], children }),
+        footer ? /* @__PURE__ */ jsx("div", { className: clsx("border-t px-5 py-3", divider), children: footer }) : null
       ]
     }
   );
 }
 function FormColumn({ children, className }) {
-  return /* @__PURE__ */ jsx("div", { "data-shell-form-column": "", className: clsx8("w-full max-w-[960px]", className), children });
+  return /* @__PURE__ */ jsx("div", { "data-shell-form-column": "", className: clsx("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))]",
@@ -67,7 +110,7 @@ var Button = forwardRef(function Button2({
       "data-shell-button": "",
       "data-variant": variant,
       "aria-busy": loading || void 0,
-      className: clsx8(
+      className: clsx(
         "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],
@@ -104,7 +147,7 @@ function FormField({
   className,
   children
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: clsx8("flex w-full flex-col gap-1", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx("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
@@ -153,7 +196,7 @@ var Input = forwardRef(function Input2({ label, helperText, error, invalid, clas
           "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),
+          className: clsx(FIELD_BASE, "h-[44px]", isInvalid ? FIELD_INVALID : FIELD_VALID, className),
           ...props
         }
       )
@@ -183,7 +226,7 @@ var Select = forwardRef(function Select2({ label, helperText, error, invalid, cl
           "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),
+          className: clsx(FIELD_BASE, "h-[44px]", isInvalid ? FIELD_INVALID : FIELD_VALID, className),
           ...props,
           children
         }
@@ -214,7 +257,7 @@ var Textarea = forwardRef(function Textarea2({ label, helperText, error, invalid
           "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),
+          className: clsx(FIELD_BASE, "min-h-[88px] py-3", isInvalid ? FIELD_INVALID : FIELD_VALID, className),
           ...props
         }
       )
@@ -222,6 +265,118 @@ var Textarea = forwardRef(function Textarea2({ label, helperText, error, invalid
   );
 });
 var Textarea_default = Textarea;
+var Checkbox = forwardRef(function Checkbox2({
+  label,
+  description,
+  indeterminate,
+  invalid,
+  className,
+  wrapperClassName,
+  id,
+  disabled,
+  "aria-describedby": ariaDescribedBy,
+  ...props
+}, ref) {
+  const autoId = useId();
+  const fieldId = id ?? autoId;
+  const descId = description ? `${fieldId}-description` : void 0;
+  const inner = useRef(null);
+  const setRef = useCallback(
+    (node) => {
+      inner.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  useEffect(() => {
+    if (inner.current) inner.current.indeterminate = Boolean(indeterminate);
+  }, [indeterminate]);
+  const describedBy2 = [descId, ariaDescribedBy].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      htmlFor: fieldId,
+      "data-shell-checkbox": "",
+      className: clsx(
+        "flex min-h-[44px] items-start gap-3 py-[10px] text-sm text-[color:var(--app-card-fg,var(--color-text))]",
+        disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+        wrapperClassName
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...props,
+            ref: setRef,
+            id: fieldId,
+            type: "checkbox",
+            disabled,
+            "data-shell-field": "",
+            "aria-invalid": invalid || void 0,
+            "aria-describedby": describedBy2,
+            className: clsx(
+              "mt-[2px] h-5 w-5 shrink-0 rounded-[5px] border focus:outline-none focus-visible:ring-2",
+              "accent-[color:var(--color-accent-bg-safe,var(--color-accent))]",
+              "focus-visible:ring-[color:var(--app-field-focus,var(--color-accent))]",
+              invalid ? "border-[color:var(--chrome-danger,var(--color-race-red))] outline outline-2 outline-[color:var(--chrome-danger,var(--color-race-red))]" : "border-[color:var(--app-field-border,var(--color-border))]",
+              disabled ? "cursor-not-allowed" : "cursor-pointer",
+              className
+            )
+          }
+        ),
+        label || description ? /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+          label ? /* @__PURE__ */ jsx("span", { className: "block font-medium", children: label }) : null,
+          description ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              id: descId,
+              className: "block text-xs text-[color:var(--app-card-fg-muted,var(--color-text-muted))]",
+              children: description
+            }
+          ) : null
+        ] }) : null
+      ]
+    }
+  );
+});
+var Checkbox_default = Checkbox;
+var FileInput = forwardRef(function FileInput2({ 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",
+        {
+          ...props,
+          ref,
+          id: fieldId,
+          type: "file",
+          required,
+          "data-shell-field": "",
+          "aria-invalid": isInvalid || void 0,
+          "aria-describedby": describedBy(fieldId, helperText, error, ariaDescribedBy),
+          className: clsx(
+            FIELD_BASE,
+            "h-[44px] cursor-pointer py-[5px] file:mr-3 file:h-[32px] file:cursor-pointer file:rounded-[5px] file:border file:border-[color:var(--app-btn-secondary-border,var(--color-border))] file:bg-[color:var(--app-btn-secondary-bg,var(--color-white))] file:px-3 file:text-sm file:font-medium file:text-[color:var(--app-btn-secondary-fg,var(--color-text))]",
+            isInvalid ? FIELD_INVALID : FIELD_VALID,
+            className
+          )
+        }
+      )
+    }
+  );
+});
+var FileInput_default = FileInput;
 
 // src/lib/deprecation.ts
 var warned = /* @__PURE__ */ new Set();
@@ -2182,7 +2337,7 @@ function HeaderTabBar({
     {
       role: "tablist",
       "aria-label": ariaLabel,
-      className: clsx8(
+      className: clsx(
         // 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
@@ -2206,7 +2361,7 @@ function HeaderTabBar({
             "aria-label": item.label,
             disabled: isDisabled,
             onClick: () => onChange(item.id),
-            className: clsx8(
+            className: clsx(
               // `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.
@@ -2370,11 +2525,11 @@ function PageHeaderView({
     "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", {
+      className: clsx("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__ */ jsx("div", { className: clsx("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",
@@ -2401,7 +2556,7 @@ function PageHeaderView({
               "nav",
               {
                 "aria-label": "Breadcrumb",
-                className: clsx8("min-w-0 text-slate-100", title ? "mt-1" : ""),
+                className: clsx("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",
                   {
@@ -2442,7 +2597,7 @@ function BreadcrumbBarView({
     {
       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: [
+      children: /* @__PURE__ */ jsx("div", { className: clsx("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 })
@@ -2453,6 +2608,6 @@ function BreadcrumbBarView({
   );
 }
 
-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
+export { BreadcrumbBarView, Button_default, CORE_APP_ORIGIN, CORE_BILLING_PATH, CREDIT_TYPE_LABELS, CREDIT_TYPE_ORDER, Card, Checkbox_default, CreditsAction, FileInput_default, 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-J23MTK56.js.map
+//# sourceMappingURL=chunk-J23MTK56.js.map