@the-portland-company/shell 0.76.2 → 0.76.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/native.cjs CHANGED
@@ -747,6 +747,21 @@ function FuelRow({
747
747
  ) })
748
748
  ] });
749
749
  }
750
+ var lowFuelHintVisible = false;
751
+ var lowFuelHintListeners = /* @__PURE__ */ new Set();
752
+ function setLowFuelHintVisible(visible) {
753
+ if (lowFuelHintVisible === visible) return;
754
+ lowFuelHintVisible = visible;
755
+ lowFuelHintListeners.forEach((l) => l());
756
+ }
757
+ function subscribeLowFuelHintVisible(onChange) {
758
+ lowFuelHintListeners.add(onChange);
759
+ return () => lowFuelHintListeners.delete(onChange);
760
+ }
761
+ function useLowFuelHintVisible() {
762
+ return react.useSyncExternalStore(subscribeLowFuelHintVisible, () => lowFuelHintVisible);
763
+ }
764
+ var LOW_FUEL_HINT_CLEARANCE_PX = 96;
750
765
  function LowFuelHint({ lowFuel, orgId }) {
751
766
  const [dismissed, setDismissed] = react.useState(() => {
752
767
  if (typeof window === "undefined") return false;
@@ -764,7 +779,12 @@ function LowFuelHint({ lowFuel, orgId }) {
764
779
  }
765
780
  }, [lowFuel]);
766
781
  const panelOpen = useAnyTopBarPanelOpen();
767
- if (!lowFuel || dismissed || panelOpen) return null;
782
+ const showing = lowFuel && !dismissed && !panelOpen;
783
+ react.useEffect(() => {
784
+ setLowFuelHintVisible(showing);
785
+ return () => setLowFuelHintVisible(false);
786
+ }, [showing]);
787
+ if (!showing) return null;
768
788
  const dismiss = () => {
769
789
  try {
770
790
  window.sessionStorage.setItem(LOW_FUEL_HINT_DISMISSED_KEY, "1");
@@ -776,7 +796,7 @@ function LowFuelHint({ lowFuel, orgId }) {
776
796
  "div",
777
797
  {
778
798
  role: "status",
779
- 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)]",
799
+ 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)]",
780
800
  onClick: (e) => e.stopPropagation(),
781
801
  children: [
782
802
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -965,6 +985,7 @@ function NewReplyToast({
965
985
  const [visible, setVisible] = react.useState(false);
966
986
  const onCloseRef = react.useRef(onClose);
967
987
  onCloseRef.current = onClose;
988
+ const lowFuelHintVisible2 = useLowFuelHintVisible();
968
989
  react.useEffect(() => {
969
990
  setVisible(true);
970
991
  const fadeAt = Math.max(0, ttlMs - 450);
@@ -994,6 +1015,7 @@ function NewReplyToast({
994
1015
  },
995
1016
  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)]",
996
1017
  style: {
1018
+ top: lowFuelHintVisible2 ? `calc(100% + 12px + ${LOW_FUEL_HINT_CLEARANCE_PX}px)` : void 0,
997
1019
  opacity: visible ? 1 : 0,
998
1020
  transform: visible ? "translateY(0px)" : "translateY(-4px)",
999
1021
  transition: "opacity 250ms ease, transform 250ms ease"