@the-portland-company/shell 0.76.2 → 0.76.4

package/dist/app-chrome.cjs

@@ -795,6 +795,21 @@ function FuelRow({
     ) })
   ] });
 }
+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 useLowFuelHintVisible() {
+  return react.useSyncExternalStore(subscribeLowFuelHintVisible, () => lowFuelHintVisible);
+}
+var LOW_FUEL_HINT_CLEARANCE_PX = 96;
 function LowFuelHint({ lowFuel, orgId }) {
   const [dismissed, setDismissed] = react.useState(() => {
     if (typeof window === "undefined") return false;
@@ -812,7 +827,12 @@ function LowFuelHint({ lowFuel, orgId }) {
     }
   }, [lowFuel]);
   const panelOpen = useAnyTopBarPanelOpen();
-  if (!lowFuel || dismissed || panelOpen) return null;
+  const showing = lowFuel && !dismissed && !panelOpen;
+  react.useEffect(() => {
+    setLowFuelHintVisible(showing);
+    return () => setLowFuelHintVisible(false);
+  }, [showing]);
+  if (!showing) return null;
   const dismiss = () => {
     try {
       window.sessionStorage.setItem(LOW_FUEL_HINT_DISMISSED_KEY, "1");
@@ -824,7 +844,7 @@ function LowFuelHint({ lowFuel, orgId }) {
     "div",
     {
       role: "status",
-      className: "absolute right-0 top-[calc(100%+10px)] z-50 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)]",
+      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__ */ jsxRuntime.jsx(
@@ -1013,6 +1033,7 @@ function NewReplyToast({
   const [visible, setVisible] = react.useState(false);
   const onCloseRef = react.useRef(onClose);
   onCloseRef.current = onClose;
+  const lowFuelHintVisible2 = useLowFuelHintVisible();
   react.useEffect(() => {
     setVisible(true);
     const fadeAt = Math.max(0, ttlMs - 450);
@@ -1042,6 +1063,7 @@ 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"