@the-portland-company/shell 0.82.0 → 0.84.0

package/dist/chrome.css

@@ -354,6 +354,11 @@
      "3 unread" badge or a green low-fuel warning is worse than a red one — so
      they must not follow a Mode accent. Same value as before. */
   --chrome-danger: var(--color-race-red);
+  /* Credits icon health (UI-Platform → Top bar → Credits; Pricing & Metering
+     §7.5): Good is green, Low is yellow, Out is --chrome-danger. The yellow is
+     a darker tread-yellow so a 17px stroke stays legible on the light bar. */
+  --credits-good: var(--color-green-flag);
+  --credits-low: #B7791F;
 
   /* Nav row hover sweep. Was hardcoded #EA4751 → #D32F3B in native/index.tsx
      (race-red 400 → 500); same two stops, now overridable. */

package/dist/{chunk-L73FZKGE.js → chunk-PRZP2SB6.js}

@@ -1,7 +1,7 @@
 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, useCallback, useMemo, useSyncExternalStore } from 'react';
+import { 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';
 
@@ -70,6 +70,81 @@ function resolveBrandGlyph(name) {
   return GLYPHS[name.trim().toLowerCase()] ?? null;
 }
 
+// src/native/credits.ts
+var CREDIT_TYPE_ORDER = [
+  "signal",
+  "broadcast",
+  "ai",
+  "enhancement"
+];
+var CREDIT_TYPE_LABELS = {
+  signal: "Signal Credits",
+  broadcast: "Broadcast Credits",
+  ai: "AI Credits",
+  enhancement: "Enhancement Credits"
+};
+var RANK = {
+  unknown: 0,
+  good: 1,
+  low: 2,
+  out: 3
+};
+function creditsIconState(channels) {
+  let worst = "unknown";
+  for (const channel of channels) {
+    const state = channel?.state ?? null;
+    if (state === null || state === "not_in_use") continue;
+    if (RANK[state] > RANK[worst]) worst = state;
+  }
+  return worst;
+}
+function creditGaugeRatio(channel) {
+  if (!channel || channel.state == null || channel.state === "not_in_use")
+    return null;
+  const fullMark = channel.fullMarkUnits ?? 0;
+  if (!(fullMark > 0)) return null;
+  return Math.min(1, Math.max(0, channel.remainingUnits / fullMark));
+}
+function creditStateWord(state) {
+  switch (state) {
+    case "good":
+      return "Good";
+    case "low":
+      return "Low";
+    case "out":
+      return "Out";
+    case "not_in_use":
+      return "Not in use";
+    default:
+      return "Unknown";
+  }
+}
+function daysPhrase(days) {
+  if (days < 1) return "less than a day at your recent pace";
+  const rounded = Math.round(days);
+  return `about ${rounded} ${rounded === 1 ? "day" : "days"} at your recent pace`;
+}
+function creditTooltipLine(type, channel) {
+  const label = CREDIT_TYPE_LABELS[type];
+  if (!channel) return `${label}: unavailable`;
+  const left = `${Math.max(0, channel.remainingUnits).toLocaleString()} left`;
+  if (channel.state === "not_in_use") return `${label}: not in use`;
+  if (channel.state == null) return `${label}: ${left}`;
+  if (channel.state === "out") return `${label}: ${left}, out`;
+  const days = channel.daysOfUseLeft;
+  const pace = typeof days === "number" && Number.isFinite(days) ? `, ${daysPhrase(days)}` : "";
+  return `${label}: ${left}${pace}`;
+}
+function creditsAriaLabel(channels) {
+  const worst = creditsIconState(CREDIT_TYPE_ORDER.map((t) => channels[t]));
+  if (worst === "unknown") return "Credits";
+  if (worst === "good") return "Credits: all good";
+  const named = CREDIT_TYPE_ORDER.filter(
+    (t) => channels[t]?.state === worst
+  ).map((t) => CREDIT_TYPE_LABELS[t]);
+  return `Credits: ${worst === "low" ? "low on" : "out of"} ${named.join(", ")}`;
+}
+
 // src/notifications/adapter.ts
 function emptyNotificationsFeed() {
   return { notifications: [], badge: 0 };
@@ -164,7 +239,7 @@ function resolveOrgLogoUrl(url) {
 }
 var TOPBAR_GLYPH_SIZE = 17;
 function topBarIconButtonClass(tone = "default") {
-  const toneClass = tone === "danger" || tone === "warning" ? "text-[color:var(--chrome-danger)] hover:text-[color:var(--chrome-danger)]" : "text-[color:var(--topbar-icon-color,var(--muted))] hover:text-[color:var(--topbar-icon-hover-color,var(--foreground))] hover:bg-[color:var(--topbar-icon-hover-bg,transparent)]";
+  const toneClass = tone === "danger" || tone === "warning" ? "text-[color:var(--chrome-danger)] hover:text-[color:var(--chrome-danger)]" : tone === "ok" ? "text-[color:var(--credits-good,#00783B)] hover:text-[color:var(--credits-good,#00783B)]" : tone === "low" ? "text-[color:var(--credits-low,#B7791F)] hover:text-[color:var(--credits-low,#B7791F)]" : "text-[color:var(--topbar-icon-color,var(--muted))] hover:text-[color:var(--topbar-icon-hover-color,var(--foreground))] hover:bg-[color:var(--topbar-icon-hover-bg,transparent)]";
   return [
     // `group/tbtip` powers the shared <TopBarTooltip> rendered inside the trigger.
     "group/tbtip relative flex items-center justify-center rounded-[var(--topbar-icon-button-radius,5px)] border border-transparent transition",
@@ -393,6 +468,9 @@ function ValueSkeleton({ className }) {
     }
   );
 }
+function IconGlyph({ icon: Icon, size = TOPBAR_GLYPH_SIZE }) {
+  return /* @__PURE__ */ jsx(Icon, { size, className: "text-current" });
+}
 function SlotGlyph({
   slot,
   fallback: Fallback,
@@ -405,9 +483,12 @@ function SlotGlyph({
 }
 function TopBarPopover({
   label,
+  ariaLabel,
   description,
+  tooltip,
   slot,
   fallbackIcon,
+  icon,
   badge,
   tone,
   onOpen,
@@ -457,7 +538,7 @@ function TopBarPopover({
       "button",
       {
         type: "button",
-        "aria-label": label,
+        "aria-label": ariaLabel ?? label,
         "aria-expanded": open,
         className: topBarIconButtonClass(tone),
         onClick: () => {
@@ -468,9 +549,9 @@ function TopBarPopover({
           });
         },
         children: [
-          /* @__PURE__ */ jsx(SlotGlyph, { slot, fallback: fallbackIcon }),
+          icon ? /* @__PURE__ */ jsx(IconGlyph, { icon }) : /* @__PURE__ */ jsx(SlotGlyph, { slot, fallback: fallbackIcon }),
           typeof badge === "number" ? /* @__PURE__ */ jsx(TopBarCountBadge, { count: badge }) : null,
-          !open && !hideTooltip ? /* @__PURE__ */ jsx(TopBarTooltip, { title: label, description }) : null
+          !open && !hideTooltip ? /* @__PURE__ */ jsx(TopBarTooltip, { title: label, description: tooltip ?? description }) : null
         ]
       }
     ),
@@ -544,147 +625,145 @@ function XGlyph({ size = 14, className }) {
 function CheckGlyph({ size = 14, className }) {
   return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", className, "aria-hidden": true, children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) });
 }
-var LOW_FUEL_HINT_DISMISSED_KEY = "politogy_low_fuel_hint_dismissed";
-function FuelRow({
-  label,
+function batteryFillWidth(state) {
+  switch (state) {
+    case "good":
+      return 12;
+    case "low":
+      return 5;
+    default:
+      return 0;
+  }
+}
+function creditsBatteryGlyph(state) {
+  const fill = batteryFillWidth(state);
+  const Glyph = ({ size = TOPBAR_GLYPH_SIZE, className }) => /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "data-credits-state": state,
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "1", y: "6", width: "18", height: "12", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx("line", { x1: "23", y1: "10", x2: "23", y2: "14" }),
+        fill > 0 ? /* @__PURE__ */ jsx("rect", { x: "4", y: "9", width: fill, height: "6", rx: "1", fill: "currentColor", stroke: "none", opacity: 0.35 }) : null,
+        /* @__PURE__ */ jsx("path", { d: "M11.5 8 8.5 12.5h3L10.5 16l3.5-4.5h-3L11.5 8z", fill: "currentColor", stroke: "none" })
+      ]
+    }
+  );
+  Glyph.displayName = `CreditsBatteryGlyph(${state})`;
+  return Glyph;
+}
+function stateTone(state) {
+  switch (state) {
+    case "good":
+      return "ok";
+    case "low":
+      return "low";
+    case "out":
+      return "danger";
+    default:
+      return "default";
+  }
+}
+function stateColorVar(state) {
+  switch (state) {
+    case "good":
+      return "var(--credits-good,#00783B)";
+    case "low":
+      return "var(--credits-low,#B7791F)";
+    case "out":
+      return "var(--chrome-danger)";
+    default:
+      return "var(--muted)";
+  }
+}
+function CreditGauge({ channel, className }) {
+  const ratio = creditGaugeRatio(channel);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "meter",
+      "aria-label": `${creditStateWord(channel?.state)} level`,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": ratio === null ? void 0 : Math.round(ratio * 100),
+      className: ["h-1.5 w-full overflow-hidden rounded-full bg-[color:var(--panel)]", className ?? ""].join(" "),
+      children: ratio === null ? null : /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "h-full rounded-full transition-[width]",
+          style: { width: `${Math.round(ratio * 100)}%`, backgroundColor: stateColorVar(channel?.state) }
+        }
+      )
+    }
+  );
+}
+function formatGrantDate(iso) {
+  if (!iso) return null;
+  const t = Date.parse(iso);
+  if (!Number.isFinite(t)) return null;
+  return new Date(t).toLocaleDateString("en-US", { month: "short", day: "numeric" });
+}
+function CreditRow({
+  type,
   channel,
   loading,
-  addHref,
-  addLabel
+  addHref
 }) {
+  const label = CREDIT_TYPE_LABELS[type];
   const remaining = channel?.remainingUnits ?? 0;
-  const total = channel ? Math.max(channel.rawBalanceUnits, channel.remainingUnits) : 0;
-  const ratio = total > 0 ? Math.min(100, Math.max(0, remaining / total * 100)) : 0;
-  const low = channel?.lowFuel ?? false;
-  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+  const state = channel?.state ?? null;
+  const unavailable = !loading && !channel;
+  const nextGrant = formatGrantDate(channel?.nextGrantAt);
+  const pools = channel && typeof channel.includedUnits === "number" && typeof channel.purchasedUnits === "number" ? `Included ${channel.includedUnits.toLocaleString()}${nextGrant ? ` (next ${nextGrant})` : ""} \xB7 Purchased ${channel.purchasedUnits.toLocaleString()}` : null;
+  return /* @__PURE__ */ jsxs("div", { className: "w-full", "data-credit-type": type, children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between gap-2", children: [
       /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-[color:var(--foreground)]", children: label }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        loading ? /* @__PURE__ */ jsx(ValueSkeleton, { className: "h-3.5 w-14" }) : /* @__PURE__ */ jsxs(
-          "span",
-          {
-            className: [
-              "text-xs font-semibold tabular-nums",
-              low ? "text-[color:var(--chrome-danger)]" : "text-[color:var(--muted)]"
-            ].join(" "),
-            children: [
-              remaining.toLocaleString(),
-              " left"
-            ]
-          }
-        ),
-        addHref ? /* @__PURE__ */ jsx(
+        loading ? /* @__PURE__ */ jsx(ValueSkeleton, { className: "h-3.5 w-14" }) : unavailable ? /* @__PURE__ */ jsx("span", { className: "text-xs text-[color:var(--muted)]", children: "Unavailable" }) : /* @__PURE__ */ jsxs("span", { className: "text-xs font-semibold tabular-nums", style: { color: stateColorVar(state) }, children: [
+          remaining.toLocaleString(),
+          " left",
+          state === "not_in_use" ? null : /* @__PURE__ */ jsxs("span", { className: "font-normal text-[color:var(--muted)]", children: [
+            " \xB7 ",
+            creditStateWord(state)
+          ] })
+        ] }),
+        addHref && !unavailable ? /* @__PURE__ */ jsx(
           "a",
           {
             href: addHref,
-            "aria-label": addLabel,
+            "aria-label": `Add ${label}`,
             className: "flex h-5 w-5 items-center justify-center rounded-full border border-[color:var(--line)] text-[color:var(--muted)] transition hover:border-[color:var(--foreground)] hover:text-[color:var(--foreground)]",
             children: /* @__PURE__ */ jsx(PlusGlyph, {})
           }
         ) : null
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-[color:var(--panel)]", children: loading ? /* @__PURE__ */ jsx("div", { className: "h-full w-full animate-pulse bg-[color:var(--line)]" }) : /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: [
-          "h-full rounded-full transition-[width]",
-          low ? "bg-[color:var(--chrome-danger)]" : "bg-[color:var(--color-ok,#00783B)]"
-        ].join(" "),
-        style: { width: `${ratio}%` }
-      }
-    ) })
+    loading ? /* @__PURE__ */ jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-[color:var(--panel)]", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full animate-pulse bg-[color:var(--line)]" }) }) : /* @__PURE__ */ jsx(CreditGauge, { channel: unavailable ? null : channel }),
+    !loading && state === "not_in_use" ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-[11px] text-[color:var(--muted)]", children: "Not in use" }) : pools ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-[11px] text-[color:var(--muted)]", children: pools }) : null
   ] });
 }
-var lowFuelHintVisible = false;
-var lowFuelHintListeners = /* @__PURE__ */ new Set();
-function setLowFuelHintVisible(visible) {
-  if (lowFuelHintVisible === visible) return;
-  lowFuelHintVisible = visible;
-  lowFuelHintListeners.forEach((l) => l());
-}
-function subscribeLowFuelHintVisible(onChange) {
-  lowFuelHintListeners.add(onChange);
-  return () => lowFuelHintListeners.delete(onChange);
+function CreditsTooltip({ fuel }) {
+  return /* @__PURE__ */ jsx("span", { className: "flex w-56 flex-col gap-1.5", "data-testid": "credits-tooltip", children: CREDIT_TYPE_ORDER.map((type) => {
+    const channel = fuel ? fuel[type] ?? null : null;
+    return /* @__PURE__ */ jsxs("span", { className: "flex flex-col gap-0.5", children: [
+      /* @__PURE__ */ jsx("span", { children: creditTooltipLine(type, channel) }),
+      /* @__PURE__ */ jsx(CreditGauge, { channel, className: "bg-[#FFFFFF]/20" })
+    ] }, type);
+  }) });
 }
-function useLowFuelHintVisible() {
-  return useSyncExternalStore(
-    subscribeLowFuelHintVisible,
-    () => lowFuelHintVisible,
-    () => false
-  );
-}
-var LOW_FUEL_HINT_CLEARANCE_PX = 96;
-function LowFuelHint({ lowFuel, orgId }) {
-  const [dismissed, setDismissed] = useState(() => {
-    if (typeof window === "undefined") return false;
-    try {
-      return window.sessionStorage.getItem(LOW_FUEL_HINT_DISMISSED_KEY) === "1";
-    } catch {
-      return false;
-    }
-  });
-  useEffect(() => {
-    if (lowFuel) return;
-    try {
-      window.sessionStorage.removeItem(LOW_FUEL_HINT_DISMISSED_KEY);
-    } catch {
-    }
-  }, [lowFuel]);
-  const panelOpen = useAnyTopBarPanelOpen();
-  const showing = lowFuel && !dismissed && !panelOpen;
-  useEffect(() => {
-    setLowFuelHintVisible(showing);
-    return () => setLowFuelHintVisible(false);
-  }, [showing]);
-  if (!showing) return null;
-  const dismiss = () => {
-    try {
-      window.sessionStorage.setItem(LOW_FUEL_HINT_DISMISSED_KEY, "1");
-    } catch {
-    }
-    setDismissed(true);
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      role: "status",
-      className: "absolute right-0 top-[calc(100%+10px)] z-[60] w-60 rounded-lg border border-[color:var(--chrome-danger)] bg-[color:var(--chrome-danger)] px-3 py-2 text-[#FFFFFF] shadow-[var(--shadow-soft)]",
-      onClick: (e) => e.stopPropagation(),
-      children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            "aria-hidden": true,
-            className: "absolute -top-[5px] right-[11px] h-2.5 w-2.5 rotate-45 bg-[color:var(--chrome-danger)]"
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: "You\u2019re low on fuel" }),
-            /* @__PURE__ */ jsx(
-              "a",
-              {
-                href: withOrgParam(CORE_BILLING_URL, orgId),
-                className: "mt-1 inline-block text-sm font-bold underline hover:opacity-90",
-                children: "Buy More Fuel"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              "aria-label": "Dismiss low fuel notice",
-              onClick: dismiss,
-              className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[#FFFFFF]/90 transition hover:bg-[#FFFFFF]/20",
-              children: /* @__PURE__ */ jsx(XGlyph, {})
-            }
-          )
-        ] })
-      ]
-    }
-  );
+function channelsOf(fuel) {
+  if (!fuel) return {};
+  return { signal: fuel.signal, broadcast: fuel.broadcast, ai: fuel.ai, enhancement: fuel.enhancement };
 }
 function FuelAction({ orgId }) {
   const { dedupedFetch } = useNavChrome("FuelAction");
@@ -716,52 +795,28 @@ function FuelAction({ orgId }) {
       cancelled = true;
     };
   }, [dedupedFetch, orgId]);
-  const low = !!fuel && (fuel.signal.lowFuel || fuel.broadcast.lowFuel);
-  const lowFuelHintUp = useLowFuelHintVisible();
-  return (
-    // The nudge anchors to the trigger, so it sits OUTSIDE the popover panel in
-    // its own relative wrapper (same shape the VRM widget used).
-    /* @__PURE__ */ jsxs("div", { className: "relative inline-flex", children: [
-      /* @__PURE__ */ jsx(
-        TopBarPopover,
-        {
-          label: "Communications Fuel",
-          description: "Remaining SMS and email sending balance for the active organization.",
-          slot: "comms-fuel",
-          fallbackIcon: BatteryGlyph,
-          tone: low ? "warning" : "default",
-          hideTooltip: lowFuelHintUp,
-          children: /* @__PURE__ */ jsxs("div", { className: "px-4 py-3", children: [
-            /* @__PURE__ */ jsx("p", { className: "mb-3 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Communications Fuel" }),
-            error || !loading && !fuel ? /* @__PURE__ */ jsx("p", { className: "text-sm text-[color:var(--muted)]", children: "Fuel balance is unavailable right now." }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
-              /* @__PURE__ */ jsx(
-                FuelRow,
-                {
-                  label: "SMS Signal",
-                  channel: fuel?.signal ?? null,
-                  loading,
-                  addHref: withOrgParam(CORE_BILLING_URL, orgId),
-                  addLabel: "Add SMS Signal fuel"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                FuelRow,
-                {
-                  label: "Email Broadcast",
-                  channel: fuel?.broadcast ?? null,
-                  loading,
-                  addHref: withOrgParam(CORE_BILLING_URL, orgId),
-                  addLabel: "Add Email Broadcast fuel"
-                }
-              )
-            ] })
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsx(LowFuelHint, { lowFuel: low, orgId })
-    ] })
+  const channels = channelsOf(fuel);
+  const iconState = creditsIconState(CREDIT_TYPE_ORDER.map((t) => channels[t]));
+  const Glyph = useMemo(() => creditsBatteryGlyph(iconState), [iconState]);
+  const addHref = withOrgParam(CORE_BILLING_URL, orgId);
+  return /* @__PURE__ */ jsx(
+    TopBarPopover,
+    {
+      label: "Credits",
+      ariaLabel: creditsAriaLabel(channels),
+      tooltip: /* @__PURE__ */ jsx(CreditsTooltip, { fuel }),
+      slot: "comms-fuel",
+      fallbackIcon: BatteryGlyph,
+      icon: Glyph,
+      tone: stateTone(iconState),
+      children: /* @__PURE__ */ jsxs("div", { className: "px-4 py-3", children: [
+        /* @__PURE__ */ jsx("p", { className: "mb-3 text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]", children: "Credits" }),
+        error || !loading && !fuel ? /* @__PURE__ */ jsx("p", { className: "text-sm text-[color:var(--muted)]", children: "Credits are unavailable right now." }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: CREDIT_TYPE_ORDER.map((type) => /* @__PURE__ */ jsx(CreditRow, { type, channel: channels[type] ?? null, loading, addHref }, type)) })
+      ] })
+    }
   );
 }
+var CreditsAction = FuelAction;
 function notifStateKey(orgId) {
   return `politogy_chrome_notif_state:${orgId ?? "none"}`;
 }
@@ -840,7 +895,6 @@ function NewReplyToast({
   const [visible, setVisible] = useState(false);
   const onCloseRef = useRef(onClose);
   onCloseRef.current = onClose;
-  const lowFuelHintVisible2 = useLowFuelHintVisible();
   useEffect(() => {
     setVisible(true);
     const fadeAt = Math.max(0, ttlMs - 450);
@@ -870,7 +924,6 @@ function NewReplyToast({
       },
       className: "absolute right-[-6px] top-[calc(100%+12px)] z-50 min-w-[240px] max-w-[320px] cursor-pointer rounded-xl bg-[#161616] px-4 py-3 text-[#FFFFFF] shadow-[var(--shadow-soft)]",
       style: {
-        top: lowFuelHintVisible2 ? `calc(100% + 12px + ${LOW_FUEL_HINT_CLEARANCE_PX}px)` : void 0,
         opacity: visible ? 1 : 0,
         transform: visible ? "translateY(0px)" : "translateY(-4px)",
         transition: "opacity 250ms ease, transform 250ms ease"
@@ -1998,6 +2051,6 @@ function SpeculationRulesScript({ items }) {
   return null;
 }
 
-export { CORE_APP_ORIGIN, CORE_BILLING_PATH, 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, emptyNotificationsFeed, normalizeNotificationsFeed, resolveBrandGlyph, resolveOrgLogoUrl, topBarIconButtonClass, useChromeMe, useChromeOrgs, useNavChromeDedupedFetch, useNavChromeFetcher, useThemePreference, useTopBarIconSlotGlyph, warnDeprecated };
-//# sourceMappingURL=chunk-L73FZKGE.js.map
-//# sourceMappingURL=chunk-L73FZKGE.js.map
+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