@multiplatform.one/components 6.7.0 → 7.0.0

package/src/Toast/Toast.spec.tsx

@@ -5,16 +5,24 @@ import { Button } from "tamagui";
 import { __resetDevWarnSeen } from "@multiplatform.one/theme";
 import { Toast, ToastViewport, useToast } from "./index";
 import {
+  __resetToastViewportRegistry,
   dismissToast,
   getToasts,
   resetToasts,
+  resolveToastPolicy,
   showToast,
   TOAST_ACTION_MIN_MS,
+  TOAST_DEFAULT_MS,
+  TOAST_ERROR_MS,
   TOAST_EXIT_MS,
+  TOAST_WARNING_MS,
 } from "./store";
 
 afterEach(() => {
-  act(() => resetToasts());
+  act(() => {
+    resetToasts();
+    __resetToastViewportRegistry();
+  });
 });
 
 function Trigger(props: Parameters<ReturnType<typeof useToast>["show"]>[0]) {
@@ -52,6 +60,114 @@ describe("Toast (standalone)", () => {
     renderWithProviders(<Toast title="Plain" />);
     expect(screen.queryByLabelText("Dismiss notification")).not.toBeInTheDocument();
   });
+
+  it("paints the LC-71 ring on the glyph/pill, not the 44px hit box", () => {
+    renderWithProviders(
+      <Toast title="Archived" action={{ label: "Undo", onPress: () => {} }} onDismiss={() => {}} />,
+    );
+    const close = screen.getByLabelText("Dismiss notification");
+    expect(close.className).toMatch(/mp-chip-dismiss/);
+    expect(close.querySelector(".mp-chip-dismiss-ring")).not.toBeNull();
+    const action = screen.getByLabelText("Undo");
+    expect(action.className).toMatch(/mp-chip-dismiss/);
+    expect(action.querySelector(".mp-chip-dismiss-ring")).not.toBeNull();
+  });
+
+  it("keeps nested painted chrome below 44px and the press floor at 44 (LC-54 / LC-73)", () => {
+    renderWithProviders(<Toast title="Saved" onDismiss={() => {}} />);
+    const toast = screen.getByTestId("toast");
+    const nestedPx = Number(toast.getAttribute("data-nested-px"));
+    expect(nestedPx).toBeGreaterThan(0);
+    expect(nestedPx).toBeLessThan(44);
+    const close = screen.getByLabelText("Dismiss notification");
+    expect(close).toHaveStyle({ minHeight: "44px" });
+    expect(close).toHaveStyle({ minWidth: "44px" });
+  });
+
+  it("compact steps nested scale down; size is a separate axis from density", () => {
+    const { rerender } = renderWithProviders(
+      <Toast title="Saved" compact={false} onDismiss={() => {}} />,
+    );
+    const comfortable = screen.getByTestId("toast");
+    expect(comfortable.getAttribute("data-density")).toBe("comfortable");
+    expect(comfortable.getAttribute("data-size")).toBe("medium");
+    const comfortablePx = Number(comfortable.getAttribute("data-nested-px"));
+    rerender(<Toast title="Saved" compact onDismiss={() => {}} />);
+    const compactToast = screen.getByTestId("toast");
+    expect(compactToast.getAttribute("data-density")).toBe("compact");
+    expect(compactToast.getAttribute("data-size")).toBe("small");
+    expect(Number(compactToast.getAttribute("data-nested-px"))).toBeLessThan(comfortablePx);
+  });
+});
+
+describe("toast expiry policy (resolveToastPolicy)", () => {
+  it("resolves the house per-intent defaults", () => {
+    expect(resolveToastPolicy({ title: "t" }).duration).toBe(TOAST_DEFAULT_MS);
+    expect(resolveToastPolicy({ title: "t", intent: "success" }).duration).toBe(TOAST_DEFAULT_MS);
+    expect(resolveToastPolicy({ title: "t", intent: "warning" }).duration).toBe(TOAST_WARNING_MS);
+    expect(resolveToastPolicy({ title: "t", intent: "error" }).duration).toBe(TOAST_ERROR_MS);
+  });
+
+  it("error toasts auto-expire at the ceiling, not never", () => {
+    const { duration, sticky } = resolveToastPolicy({ title: "t", intent: "error" });
+    expect(sticky).toBe(false);
+    expect(duration).toBeGreaterThan(0);
+    expect(Number.isFinite(duration)).toBe(true);
+  });
+
+  it("sticky opts out of expiry and forces the dismiss affordance", () => {
+    const policy = resolveToastPolicy({ title: "t", sticky: true });
+    expect(policy.sticky).toBe(true);
+    expect(policy.duration).toBe(0);
+    expect(policy.dismissible).toBe(true);
+  });
+
+  it("legacy duration 0 / Infinity map to sticky", () => {
+    expect(resolveToastPolicy({ title: "t", duration: 0 }).sticky).toBe(true);
+    expect(resolveToastPolicy({ title: "t", duration: Number.POSITIVE_INFINITY }).sticky).toBe(
+      true,
+    );
+  });
+
+  it("explicit duration wins over the intent default (action floor still applies)", () => {
+    expect(resolveToastPolicy({ title: "t", intent: "error", duration: 3000 }).duration).toBe(3000);
+    expect(
+      resolveToastPolicy({
+        title: "t",
+        duration: 3000,
+        action: { label: "Undo", onPress: () => {} },
+      }).duration,
+    ).toBe(TOAST_ACTION_MIN_MS);
+  });
+
+  it("forces dismissible for error and sticky toasts (DEV warn)", () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      expect(
+        resolveToastPolicy({ title: "t", intent: "error", dismissible: false }).dismissible,
+      ).toBe(true);
+      expect(resolveToastPolicy({ title: "t", sticky: true, dismissible: false }).dismissible).toBe(
+        true,
+      );
+      expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("[toast]"));
+    } finally {
+      warnSpy.mockRestore();
+    }
+  });
+
+  it("showToast stores the resolved policy on the entry", () => {
+    act(() => {
+      showToast({ title: "Default" });
+      showToast({ title: "Failure", intent: "error" });
+      showToast({ title: "Pinned", sticky: true });
+    });
+    const byTitle = (title: string) => getToasts().find((e) => e.title === title);
+    expect(byTitle("Default")?.duration).toBe(TOAST_DEFAULT_MS);
+    expect(byTitle("Failure")?.duration).toBe(TOAST_ERROR_MS);
+    expect(byTitle("Failure")?.dismissible).toBe(true);
+    expect(byTitle("Pinned")?.duration).toBe(0);
+    expect(byTitle("Pinned")?.sticky).toBe(true);
+  });
 });
 
 describe("useToast + ToastViewport (imperative)", () => {
@@ -90,13 +206,13 @@ describe("useToast + ToastViewport (imperative)", () => {
     }
   });
 
-  it("auto-dismisses after its duration but keeps persistent toasts", () => {
+  it("auto-dismisses after its duration but keeps sticky toasts", () => {
     vi.useFakeTimers();
     try {
       renderWithProviders(<ToastViewport />);
       act(() => {
         showToast({ title: "Ephemeral", duration: 1000 });
-        showToast({ title: "Sticky", duration: 0 });
+        showToast({ title: "Sticky", sticky: true });
       });
       expect(getToasts()).toHaveLength(2);
       // Two advances: the close flows through React state (onOpenChange) and
@@ -115,6 +231,47 @@ describe("useToast + ToastViewport (imperative)", () => {
     }
   });
 
+  it("error toasts expire at the ceiling; sticky errors survive it", () => {
+    vi.useFakeTimers();
+    try {
+      renderWithProviders(<ToastViewport />);
+      act(() => {
+        showToast({ title: "Transient failure", intent: "error" });
+        showToast({ title: "Pinned failure", intent: "error", sticky: true });
+      });
+      expect(getToasts()).toHaveLength(2);
+      act(() => {
+        vi.advanceTimersByTime(TOAST_ERROR_MS + 100);
+      });
+      act(() => {
+        vi.advanceTimersByTime(TOAST_EXIT_MS + 100);
+      });
+      const titles = getToasts().map((t) => t.title);
+      expect(titles).not.toContain("Transient failure");
+      expect(titles).toContain("Pinned failure");
+      // Well past the ceiling the sticky error is still on screen.
+      act(() => {
+        vi.advanceTimersByTime(TOAST_ERROR_MS * 10);
+      });
+      expect(screen.getByText("Pinned failure")).toBeInTheDocument();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("error toasts render the dismiss affordance even when the caller opts out", () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      renderWithProviders(<ToastViewport />);
+      act(() => {
+        showToast({ title: "Failure", intent: "error", dismissible: false });
+      });
+      expect(screen.getByLabelText("Dismiss notification")).toBeInTheDocument();
+    } finally {
+      warnSpy.mockRestore();
+    }
+  });
+
   it("action button runs the callback and closes the toast", () => {
     vi.useFakeTimers();
     try {
@@ -123,7 +280,7 @@ describe("useToast + ToastViewport (imperative)", () => {
       act(() => {
         showToast({
           title: "Archived",
-          duration: 0,
+          sticky: true,
           action: { label: "Undo", altText: "Undo archive", onPress },
         });
       });
@@ -159,7 +316,7 @@ describe("useToast + ToastViewport (imperative)", () => {
     act(() => {
       showToast({
         title: "Sticky action",
-        duration: 0,
+        sticky: true,
         action: { label: "Undo", onPress: () => {} },
       });
     });
@@ -169,8 +326,8 @@ describe("useToast + ToastViewport (imperative)", () => {
   it("re-showing the same id replaces instead of stacking", () => {
     renderWithProviders(<ToastViewport />);
     act(() => {
-      showToast({ id: "save", title: "Saving…", duration: 0 });
-      showToast({ id: "save", title: "Saved", duration: 0 });
+      showToast({ id: "save", title: "Saving…", sticky: true });
+      showToast({ id: "save", title: "Saved", sticky: true });
     });
     expect(getToasts()).toHaveLength(1);
     expect(getToasts()[0]?.title).toBe("Saved");
@@ -182,7 +339,7 @@ describe("useToast + ToastViewport (imperative)", () => {
       renderWithProviders(<ToastViewport />);
       let id = "";
       act(() => {
-        id = showToast({ title: "Bye", duration: 0 });
+        id = showToast({ title: "Bye", sticky: true });
       });
       act(() => dismissToast(id));
       expect(getToasts()[0]?.open).toBe(false);
@@ -196,6 +353,49 @@ describe("useToast + ToastViewport (imperative)", () => {
   });
 });
 
+describe("ToastViewport layering + single-mount contract", () => {
+  it("contains the web viewport in the loading-tier stacking context", () => {
+    renderWithProviders(<ToastViewport />);
+    act(() => {
+      showToast({ title: "Layered" });
+    });
+    const layer = screen.getByTestId("toast-layer");
+    expect(layer).toBeInTheDocument();
+    // The toast card renders INSIDE the contained layer, so the tamagui
+    // wrapper's hardcoded zIndex 1e5 is flattened below sheet/dialog portals.
+    expect(layer.contains(screen.getByText("Layered"))).toBe(true);
+  });
+
+  it("renders each toast once when a second viewport mounts (DEV warn), and hands over on unmount", () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      const { rerender } = renderWithProviders(
+        <>
+          <ToastViewport key="first" />
+          <ToastViewport key="second" />
+        </>,
+      );
+      act(() => {
+        showToast({ title: "Solo", sticky: true });
+      });
+      expect(screen.getAllByText("Solo")).toHaveLength(1);
+      expect(warnSpy).toHaveBeenCalledWith(
+        expect.stringContaining("[toast] a second ToastViewport"),
+      );
+
+      // Owner unmounts → the surviving viewport takes over rendering.
+      rerender(
+        <>
+          <ToastViewport key="second" />
+        </>,
+      );
+      expect(screen.getAllByText("Solo")).toHaveLength(1);
+    } finally {
+      warnSpy.mockRestore();
+    }
+  });
+});
+
 describe("Toast banned-error-word DEV warn", () => {
   let warnSpy: ReturnType<typeof vi.spyOn>;
 

package/src/Toast/Toast.stories.tsx

@@ -1,8 +1,9 @@
 import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Button } from "@multiplatform.one/forms";
 import { Text, XStack, YStack } from "tamagui";
+import { SheetModal } from "../SheetModal";
 import { Toast, ToastViewport, useToast, type ToastIntent, type ToastShowOptions } from "./index";
 import { resetToasts } from "./store";
 
@@ -22,7 +23,7 @@ const meta: Meta<ToastShowOptions> = {
     docs: {
       description: {
         component:
-          "Imperative feedback toasts: mount `<ToastViewport />` once, then fire from anywhere with `useToast().show({ title, description, intent, duration, action })`. Stacks bottom-right on web (top on native), auto-dismisses with pause-on-hover, swipe/Escape/close-button dismissal, F8 focuses the viewport.",
+          "Imperative feedback toasts: mount `<ToastViewport />` once at the app shell (a second mounted viewport no-ops), then fire from anywhere with `useToast().show({ title, description, intent, duration, sticky, action })`. Expiry policy: accent/success auto-dismiss at 5s, warning at 8s, error persists to a 12s ceiling and always carries the dismiss (X) affordance; `sticky: true` opts out of expiry (dismiss stays forced). Stacks bottom-right on web (top on native), pauses on hover, swipe/Escape/close-button dismissal, F8 focuses the viewport. Toasts layer BELOW modal overlays (sheets/dialogs) and only the card itself is interactive — clicks beside a toast pass through.",
       },
     },
   },
@@ -31,6 +32,7 @@ const meta: Meta<ToastShowOptions> = {
     description: { control: "text" },
     intent: { control: "select", options: intents },
     duration: { control: "number" },
+    sticky: { control: "boolean" },
     dismissible: { control: "boolean" },
   },
   args: {
@@ -38,6 +40,7 @@ const meta: Meta<ToastShowOptions> = {
     description: "Your changes were written to the server.",
     intent: "accent",
     duration: 5000,
+    sticky: false,
     dismissible: true,
   },
 };
@@ -149,25 +152,95 @@ export const Stacking: Story = {
   },
 };
 
-export const Persistent: Story = {
+/**
+ * Expiry policy specimen: the plain failure toast expires at the 12s error
+ * ceiling; the `sticky` one never expires and keeps its forced dismiss (X).
+ */
+export const ErrorExpiry: Story = {
   render: () => {
     const toast = useToast();
     return (
       <YStack gap="$4" alignItems="flex-start">
         <StoryReset />
-        <Button
-          error
-          onPress={() =>
-            toast.show({
-              title: "Connection lost",
-              description: "Retrying in the background. This toast stays until dismissed.",
-              intent: "error",
-              duration: 0,
-            })
-          }
-        >
-          Trigger persistent error
-        </Button>
+        <XStack gap="$2" flexWrap="wrap">
+          <Button
+            error
+            onPress={() =>
+              toast.show({
+                title: "Save failed",
+                description: "Expires on its own at the 12s ceiling.",
+                intent: "error",
+              })
+            }
+          >
+            Failure (auto-expires)
+          </Button>
+          <Button
+            error
+            onPress={() =>
+              toast.show({
+                title: "Connection lost",
+                description: "Retrying in the background. Sticky: stays until dismissed.",
+                intent: "error",
+                sticky: true,
+              })
+            }
+          >
+            Sticky failure
+          </Button>
+        </XStack>
+        <ToastViewport />
+      </YStack>
+    );
+  },
+};
+
+/**
+ * Layering specimen: a sticky error + stacked success over an open modal
+ * sheet. The sheet paints and hit-tests ABOVE the toasts (toast layer rides
+ * `zIndex.loading`; the sheet portals to the root host at the sheet tier),
+ * and only the toast card itself is ever interactive — sheet controls and
+ * scrim taps beside a toast keep working.
+ */
+export const StickyErrorOverSheet: Story = {
+  render: () => {
+    const toast = useToast();
+    const [sheetOpen, setSheetOpen] = useState(false);
+    const [presses, setPresses] = useState(0);
+    return (
+      <YStack gap="$4" alignItems="flex-start">
+        <StoryReset />
+        <XStack gap="$2" flexWrap="wrap">
+          <Button
+            error
+            onPress={() => {
+              toast.show({
+                title: "Connection lost",
+                description: "Sticky failure stays visible under the sheet.",
+                intent: "error",
+                sticky: true,
+              });
+              toast.show({
+                title: "Draft saved",
+                description: "Stacked success toast.",
+                intent: "success",
+              });
+            }}
+          >
+            Show stacked toasts
+          </Button>
+          <Button accent onPress={() => setSheetOpen(true)} data-testid="open-sheet">
+            Open sheet
+          </Button>
+        </XStack>
+        <SheetModal open={sheetOpen} onOpenChange={setSheetOpen} snapPoint={70}>
+          <YStack gap="$3" padding="$4" alignItems="flex-start">
+            <Text fontWeight="600">Modal sheet above the toasts</Text>
+            <Button onPress={() => setPresses((n) => n + 1)} data-testid="sheet-counter">
+              Sheet button pressed {presses} times
+            </Button>
+          </YStack>
+        </SheetModal>
         <ToastViewport />
       </YStack>
     );
@@ -205,6 +278,14 @@ export const AllIntentsStatic: Story = {
         onDismiss={() => action("dismiss")("error")}
       />
       <Toast title="Title only, not dismissible" intent="accent" />
+      <Toast
+        compact
+        title="Draft discarded"
+        description="Nested overlay scale — density steps type and spacing; size stays independent."
+        intent="warning"
+        action={{ label: "Undo", onPress: () => action("undo")() }}
+        onDismiss={() => action("dismiss")("compact")}
+      />
     </YStack>
   ),
 };