Toast

---
import Button from "@pindoba/astro-button";
import Toaster from "../Toaster.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "sm", direction: "row", flexWrap: "wrap" })}>
  <Button data-toast-demo="primary">Primary</Button>
  <Button data-toast-demo="success">Success</Button>
  <Button data-toast-demo="danger">Danger</Button>
  <Button data-toast-demo="warning">Warning</Button>
  <Button data-toast-demo="neutral">Neutral</Button>
</div>

<Toaster position="bottom-right" />

<script>
  import { toast } from "@pindoba/astro-toast/runtime";

  document.querySelectorAll<HTMLElement>("[data-toast-demo]").forEach((btn) => {
    btn.addEventListener("click", () => {
      const type = btn.dataset.toastDemo;
      if (type === "primary") {
        toast.primary({
          title: "New mention",
          content: "Jane tagged you in a doc.",
        });
      } else if (type === "success") {
        toast.success({ title: "Saved", content: "Your changes are live." });
      } else if (type === "danger") {
        toast.danger({
          title: "Couldn't save",
          content: "Network is unreachable.",
        });
      } else if (type === "warning") {
        toast.warning({
          title: "Heads up",
          content: "Disk is almost full.",
        });
      } else if (type === "neutral") {
        toast.neutral({ title: "FYI", content: "Cache rebuilt." });
      }
    });
  });
</script>

import { Button } from "@pindoba/react-button";
import { toast } from "@pindoba/core-toast";
import { stack } from "@pindoba/styled-system/patterns";
import { Toaster } from "../Toaster";

export default function DefaultDemo() {
  return (
    <>
      <div className={stack({ gap: "sm", direction: "row", flexWrap: "wrap" })}>
        <Button
          onClick={() =>
            toast.primary({
              title: "New mention",
              content: "Jane tagged you in a doc.",
            })
          }
        >
          Primary
        </Button>
        <Button
          onClick={() =>
            toast.success({ title: "Saved", content: "Your changes are live." })
          }
        >
          Success
        </Button>
        <Button
          onClick={() =>
            toast.danger({
              title: "Couldn't save",
              content: "Network is unreachable.",
            })
          }
        >
          Danger
        </Button>
        <Button
          onClick={() =>
            toast.warning({
              title: "Heads up",
              content: "Disk is almost full.",
            })
          }
        >
          Warning
        </Button>
        <Button
          onClick={() =>
            toast.neutral({ title: "FYI", content: "Cache rebuilt." })
          }
        >
          Neutral
        </Button>
      </div>

      <Toaster position="bottom-right" />
    </>
  );
}

<script lang="ts">
  import Button from "@pindoba/svelte-button";
  import Toaster, { toast } from "../index.js";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "sm", direction: "row", flexWrap: "wrap" })}>
  <Button
    onclick={() =>
      toast.primary({
        title: "New mention",
        content: "Jane tagged you in a doc.",
      })}>Primary</Button
  >
  <Button
    onclick={() =>
      toast.success({ title: "Saved", content: "Your changes are live." })}
    >Success</Button
  >
  <Button
    onclick={() =>
      toast.danger({
        title: "Couldn't save",
        content: "Network is unreachable.",
      })}>Danger</Button
  >
  <Button
    onclick={() =>
      toast.warning({ title: "Heads up", content: "Disk is almost full." })}
    >Warning</Button
  >
  <Button
    onclick={() => toast.neutral({ title: "FYI", content: "Cache rebuilt." })}
    >Neutral</Button
  >
</div>

<Toaster position="bottom-right" />

---
import Button from "@pindoba/astro-button";
import Toaster from "../Toaster.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "sm", direction: "row", flexWrap: "wrap" })}>
  <Button data-emphasis-demo="default">Default (secondary)</Button>
  <Button data-emphasis-demo="primary">Primary (loud)</Button>
  <Button data-emphasis-demo="tertiary">Tertiary (quietest)</Button>
</div>

<Toaster position="bottom-right" />

<script>
  import { toast } from "@pindoba/astro-toast/runtime";

  document
    .querySelectorAll<HTMLElement>("[data-emphasis-demo]")
    .forEach((btn) => {
      btn.addEventListener("click", () => {
        const variant = btn.dataset.emphasisDemo;
        if (variant === "default") {
          toast.success({
            title: "Saved",
            content: "Default toasts use secondary emphasis.",
          });
        } else if (variant === "primary") {
          toast.danger({
            title: "Outage detected",
            content: "Reserve primary for can't-miss messages.",
            emphasis: "primary",
          });
        } else if (variant === "tertiary") {
          toast.neutral({
            title: "Heads up",
            content: "Tertiary is the quietest variant.",
            emphasis: "tertiary",
          });
        }
      });
    });
</script>

import { Button } from "@pindoba/react-button";
import { toast } from "@pindoba/core-toast";
import { stack } from "@pindoba/styled-system/patterns";
import { Toaster } from "../Toaster";

export default function EmphasisDemo() {
  return (
    <>
      <div className={stack({ gap: "sm", direction: "row", flexWrap: "wrap" })}>
        <Button
          onClick={() =>
            toast.success({
              title: "Saved",
              content: "Default toasts use secondary emphasis.",
            })
          }
        >
          Default (secondary)
        </Button>
        <Button
          onClick={() =>
            toast.danger({
              title: "Outage detected",
              content: "Reserve primary for can't-miss messages.",
              emphasis: "primary",
            })
          }
        >
          Primary (loud)
        </Button>
        <Button
          onClick={() =>
            toast.neutral({
              title: "Heads up",
              content: "Tertiary is the quietest variant.",
              emphasis: "tertiary",
            })
          }
        >
          Tertiary (quietest)
        </Button>
      </div>

      <Toaster position="bottom-right" />
    </>
  );
}

<script lang="ts">
  import Button from "@pindoba/svelte-button";
  import Toaster, { toast } from "../index.js";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "sm", direction: "row", flexWrap: "wrap" })}>
  <Button
    onclick={() =>
      toast.success({
        title: "Saved",
        content: "Default toasts use secondary emphasis.",
      })}>Default (secondary)</Button
  >
  <Button
    onclick={() =>
      toast.danger({
        title: "Outage detected",
        content: "Reserve primary for can't-miss messages.",
        emphasis: "primary",
      })}>Primary (loud)</Button
  >
  <Button
    onclick={() =>
      toast.neutral({
        title: "Heads up",
        content: "Tertiary is the quietest variant.",
        emphasis: "tertiary",
      })}>Tertiary (quietest)</Button
  >
</div>

<Toaster position="bottom-right" />

---
import Button from "@pindoba/astro-button";
import Toaster from "../Toaster.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "sm", direction: "row" })}>
  <Button data-toast-demo="promise-resolve">Resolve in 1.5s</Button>
  <Button data-toast-demo="promise-reject">Reject in 1.5s</Button>
</div>

<Toaster position="bottom-right" />

<script>
  import { toast } from "@pindoba/astro-toast/runtime";

  document.querySelectorAll<HTMLElement>("[data-toast-demo]").forEach((btn) => {
    btn.addEventListener("click", () => {
      const action = btn.dataset.toastDemo;
      if (action === "promise-resolve") {
        toast.promise(
          new Promise<string>((res) => setTimeout(() => res("ok"), 1500)),
          {
            loading: "Uploading…",
            success: "Uploaded",
            error: "Upload failed",
          },
        );
      } else if (action === "promise-reject") {
        toast
          .promise(
            new Promise<never>((_, rej) =>
              setTimeout(() => rej(new Error("503")), 1500),
            ),
            {
              loading: "Uploading…",
              success: "Uploaded",
              error: "Upload failed — try again",
            },
          )
          .catch(() => {
            /* swallow — toast already showed */
          });
      }
    });
  });
</script>

import { Button } from "@pindoba/react-button";
import { toast } from "@pindoba/core-toast";
import { stack } from "@pindoba/styled-system/patterns";
import { Toaster } from "../Toaster";

export default function PromiseDemo() {
  function resolveDemo(): void {
    toast.promise(
      new Promise<string>((res) => setTimeout(() => res("ok"), 1500)),
      {
        loading: "Uploading…",
        success: "Uploaded",
        error: "Upload failed",
      },
    );
  }

  function rejectDemo(): void {
    toast
      .promise(
        new Promise<never>((_, rej) =>
          setTimeout(() => rej(new Error("503")), 1500),
        ),
        {
          loading: "Uploading…",
          success: "Uploaded",
          error: "Upload failed — try again",
        },
      )
      .catch(() => {
        /* swallow — toast already showed */
      });
  }

  return (
    <>
      <div className={stack({ gap: "sm", direction: "row" })}>
        <Button onClick={resolveDemo}>Resolve in 1.5s</Button>
        <Button onClick={rejectDemo}>Reject in 1.5s</Button>
      </div>

      <Toaster position="bottom-right" />
    </>
  );
}

<script lang="ts">
  import Button from "@pindoba/svelte-button";
  import Toaster, { toast } from "../index.js";
  import { stack } from "@pindoba/styled-system/patterns";

  function resolveDemo(): void {
    toast.promise(
      new Promise<string>((res) => setTimeout(() => res("ok"), 1500)),
      {
        loading: "Uploading…",
        success: "Uploaded",
        error: "Upload failed",
      },
    );
  }

  function rejectDemo(): void {
    toast
      .promise(
        new Promise<never>((_, rej) =>
          setTimeout(() => rej(new Error("503")), 1500),
        ),
        {
          loading: "Uploading…",
          success: "Uploaded",
          error: "Upload failed — try again",
        },
      )
      .catch(() => {
        /* swallow — toast already showed */
      });
  }
</script>

<div class={stack({ gap: "sm", direction: "row" })}>
  <Button onclick={resolveDemo}>Resolve in 1.5s</Button>
  <Button onclick={rejectDemo}>Reject in 1.5s</Button>
</div>

<Toaster position="bottom-right" />

---
import Button from "@pindoba/astro-button";
import Toaster from "../Toaster.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "sm", direction: "row" })}>
  <Button data-toast-action="with-action">With action button</Button>
  <Button data-toast-action="no-title">Title-less</Button>
</div>

<Toaster position="bottom-right" />

<script>
  import { toast } from "@pindoba/astro-toast/runtime";

  document
    .querySelectorAll<HTMLElement>("[data-toast-action]")
    .forEach((btn) => {
      btn.addEventListener("click", () => {
        const action = btn.dataset.toastAction;
        if (action === "with-action") {
          toast.neutral({
            title: "Email archived",
            content: "Tap undo to restore it.",
            action: {
              label: "Undo",
              onClick: () => toast.success({ title: "Restored" }),
            },
          });
        } else if (action === "no-title") {
          toast.warning({
            content:
              "Title-less toasts use the row layout, like a compact alert.",
          });
        }
      });
    });
</script>

import { Button } from "@pindoba/react-button";
import { toast } from "@pindoba/core-toast";
import { stack } from "@pindoba/styled-system/patterns";
import { Toaster } from "../Toaster";

export default function ActionsDemo() {
  function withAction(): void {
    toast.neutral({
      title: "Email archived",
      content: "Tap undo to restore it.",
      action: {
        label: "Undo",
        onClick: () => toast.success({ title: "Restored" }),
      },
    });
  }

  function noTitle(): void {
    toast.warning({
      content: "Title-less toasts use the row layout, like a compact alert.",
    });
  }

  return (
    <>
      <div className={stack({ gap: "sm", direction: "row" })}>
        <Button onClick={withAction}>With action button</Button>
        <Button onClick={noTitle}>Title-less</Button>
      </div>

      <Toaster position="bottom-right" />
    </>
  );
}

<script lang="ts">
  import Button from "@pindoba/svelte-button";
  import Toaster, { toast } from "../index.js";
  import { stack } from "@pindoba/styled-system/patterns";

  function withAction(): void {
    toast.neutral({
      title: "Email archived",
      content: "Tap undo to restore it.",
      action: {
        label: "Undo",
        onClick: () => toast.success({ title: "Restored" }),
      },
    });
  }

  function noTitle(): void {
    toast.warning({
      content: "Title-less toasts use the row layout, like a compact alert.",
    });
  }
</script>

<div class={stack({ gap: "sm", direction: "row" })}>
  <Button onclick={withAction}>With action button</Button>
  <Button onclick={noTitle}>Title-less</Button>
</div>

<Toaster position="bottom-right" />

---
import Button from "@pindoba/astro-button";
import Toaster from "../Toaster.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "sm", direction: "row" })}>
  <Button data-toast-dedupe>Fire same id</Button>
</div>

<Toaster position="bottom-right" />

<script>
  import { toast } from "@pindoba/astro-toast/runtime";

  document
    .querySelector("[data-toast-dedupe]")
    ?.addEventListener("click", () => {
      toast.success({
        id: "dedupe-demo",
        title: "Saved",
        content:
          "Same id — count badge ticks up and the toast pops to the front.",
      });
    });
</script>

import { Button } from "@pindoba/react-button";
import { toast } from "@pindoba/core-toast";
import { stack } from "@pindoba/styled-system/patterns";
import { Toaster } from "../Toaster";

export default function DedupeDemo() {
  function fireSame(): void {
    toast.success({
      id: "dedupe-demo",
      title: "Saved",
      content:
        "Same id — count badge ticks up and the toast pops to the front.",
    });
  }

  return (
    <>
      <div className={stack({ gap: "sm", direction: "row" })}>
        <Button onClick={fireSame}>Fire same id</Button>
      </div>

      <Toaster position="bottom-right" />
    </>
  );
}

<script lang="ts">
  import Button from "@pindoba/svelte-button";
  import Toaster, { toast } from "../index.js";
  import { stack } from "@pindoba/styled-system/patterns";

  function fireSame(): void {
    toast.success({
      id: "dedupe-demo",
      title: "Saved",
      content:
        "Same id — count badge ticks up and the toast pops to the front.",
    });
  }
</script>

<div class={stack({ gap: "sm", direction: "row" })}>
  <Button onclick={fireSame}>Fire same id</Button>
</div>

<Toaster position="bottom-right" />

---
import Button from "@pindoba/astro-button";
import Toaster from "../Toaster.astro";
import { grid } from "@pindoba/styled-system/patterns";
---

<div class={grid({ columns: 3, gap: "sm" })}>
  <Button data-toast-position="top-left">Top left</Button>
  <Button data-toast-position="top-center">Top center</Button>
  <Button data-toast-position="top-right">Top right</Button>
  <Button data-toast-position="bottom-left">Bottom left</Button>
  <Button data-toast-position="bottom-center">Bottom center</Button>
  <Button data-toast-position="bottom-right">Bottom right</Button>
</div>

<Toaster position="bottom-right" />

<script>
  import { toast } from "@pindoba/astro-toast/runtime";
  import type { ToastPosition } from "@pindoba/astro-toast/runtime";

  document
    .querySelectorAll<HTMLElement>("[data-toast-position]")
    .forEach((btn) => {
      btn.addEventListener("click", () => {
        const position = btn.dataset.toastPosition as ToastPosition;
        toast.neutral({
          title: position,
          content: "Per-toast position override.",
          position,
        });
      });
    });
</script>

import { Button } from "@pindoba/react-button";
import { toast, type ToastPosition } from "@pindoba/core-toast";
import { grid } from "@pindoba/styled-system/patterns";
import { Toaster } from "../Toaster";

const positions: ToastPosition[] = [
  "top-left",
  "top-center",
  "top-right",
  "bottom-left",
  "bottom-center",
  "bottom-right",
];

export default function PositionsDemo() {
  function fire(position: ToastPosition): void {
    toast.neutral({
      title: position,
      content: "Per-toast position override.",
      position,
    });
  }

  return (
    <>
      <div className={grid({ columns: 3, gap: "sm" })}>
        {positions.map((position) => (
          <Button key={position} onClick={() => fire(position)}>
            {position}
          </Button>
        ))}
      </div>

      <Toaster position="bottom-right" />
    </>
  );
}

<script lang="ts">
  import Button from "@pindoba/svelte-button";
  import Toaster, { toast } from "../index.js";
  import type { ToastPosition } from "../index.js";
  import { grid } from "@pindoba/styled-system/patterns";

  const positions: ToastPosition[] = [
    "top-left",
    "top-center",
    "top-right",
    "bottom-left",
    "bottom-center",
    "bottom-right",
  ];

  function fire(position: ToastPosition): void {
    toast.neutral({
      title: position,
      content: "Per-toast position override.",
      position,
    });
  }
</script>

<div class={grid({ columns: 3, gap: "sm" })}>
  {#each positions as position (position)}
    <Button onclick={() => fire(position)}>{position}</Button>
  {/each}
</div>

<Toaster position="bottom-right" />

---
import Button from "@pindoba/astro-button";
import Toaster from "../Toaster.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "sm", direction: "row" })}>
  <Button data-toast-spawn>Spawn random toast</Button>
</div>

<Toaster position="bottom-right" stacked={true} expandOnHover={true} />

<script>
  import { toast, getToastStore } from "@pindoba/astro-toast/runtime";

  document
    .querySelector("[data-toast-spawn]")
    ?.addEventListener("click", () => {
      // Reapply the demo's Toaster config — needed when several demos share
      // one document and the user wants to see this demo's settings now.
      getToastStore().setConfig({ stacked: true, expandOnHover: true });
      const types = ["success", "danger", "warning", "neutral"] as const;
      const type = types[Math.floor(Math.random() * types.length)];
      toast[type]({
        title: type,
        content: `Spawned at ${new Date().toLocaleTimeString()}`,
      });
    });
</script>

import { Button } from "@pindoba/react-button";
import { toast, getToastStore } from "@pindoba/core-toast";
import { stack } from "@pindoba/styled-system/patterns";
import { Toaster } from "../Toaster";

export default function StackedDemo() {
  function spawn(): void {
    // Reapply the demo's Toaster config — needed when several demos share one
    // document and the user wants to see this demo's settings now.
    getToastStore().setConfig({ stacked: true, expandOnHover: true });
    const types = ["success", "danger", "warning", "neutral"] as const;
    const type = types[Math.floor(Math.random() * types.length)]!;
    toast[type]({
      title: type,
      content: `Spawned at ${new Date().toLocaleTimeString()}`,
    });
  }

  return (
    <>
      <div className={stack({ gap: "sm", direction: "row" })}>
        <Button onClick={spawn}>Spawn random toast</Button>
      </div>

      <Toaster position="bottom-right" stacked expandOnHover />
    </>
  );
}

<script lang="ts">
  import Button from "@pindoba/svelte-button";
  import Toaster, { toast } from "../index.js";
  import { getToastStore } from "@pindoba/core-toast";
  import { stack } from "@pindoba/styled-system/patterns";

  function spawn(): void {
    // Reapply the demo's Toaster config — needed when several demos share
    // one document and the user wants to see this demo's settings now.
    getToastStore().setConfig({ stacked: true, expandOnHover: true });
    const types = ["success", "danger", "warning", "neutral"] as const;
    const type = types[Math.floor(Math.random() * types.length)];
    toast[type]({
      title: type,
      content: `Spawned at ${new Date().toLocaleTimeString()}`,
    });
  }
</script>

<div class={stack({ gap: "sm", direction: "row" })}>
  <Button onclick={spawn}>Spawn random toast</Button>
</div>

<Toaster position="bottom-right" stacked={true} expandOnHover={true} />

---
import Button from "@pindoba/astro-button";
import Toaster from "../Toaster.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "sm", direction: "row" })}>
  <Button data-toast-history="push">Push toast</Button>
  <Button data-toast-history="open">
    Open notifications (<span data-history-unread-count>0</span>)
  </Button>
  <Button data-toast-history="mark-read">Mark all read</Button>
  <Button data-toast-history="clear">Clear history</Button>
</div>

<Toaster
  position="bottom-right"
  enableHistory={true}
  storageKey="pindoba-toast-demo"
/>

<script>
  import {
    toast,
    toggleCenter,
    markAllAsRead,
    clearHistory,
    $unreadCount,
  } from "@pindoba/astro-toast/runtime";

  $unreadCount.subscribe((count) => {
    document
      .querySelectorAll<HTMLElement>("[data-history-unread-count]")
      .forEach((el) => (el.textContent = String(count)));
  });

  type DemoToast = {
    type: "primary" | "success" | "danger" | "warning" | "neutral";
    title: string;
    content: string;
  };
  const samples: DemoToast[] = [
    { type: "success", title: "Saved", content: "Changes published." },
    { type: "danger", title: "Failed", content: "Unable to reach server." },
    { type: "warning", title: "Heads up", content: "Disk almost full." },
    { type: "neutral", title: "FYI", content: "Cache rebuilt." },
    {
      type: "primary",
      title: "New mention",
      content: "Jane tagged you in a doc.",
    },
    { type: "success", title: "Deployed", content: "Build finished in 12s." },
    { type: "warning", title: "Slow query", content: "Check the indexes." },
    { type: "danger", title: "Payment failed", content: "Card was declined." },
    { type: "neutral", title: "Reminder", content: "Standup in 5 minutes." },
    { type: "primary", title: "Sync complete", content: "Latest data is in." },
  ];

  document
    .querySelectorAll<HTMLElement>("[data-toast-history]")
    .forEach((btn) => {
      btn.addEventListener("click", () => {
        const action = btn.dataset.toastHistory;
        if (action === "push") {
          const sample = samples[Math.floor(Math.random() * samples.length)]!;
          toast[sample.type]({ title: sample.title, content: sample.content });
        } else if (action === "open") {
          toggleCenter(true);
        } else if (action === "mark-read") {
          markAllAsRead();
        } else if (action === "clear") {
          clearHistory();
        }
      });
    });
</script>

import { Button } from "@pindoba/react-button";
import { toast } from "@pindoba/core-toast";
import { stack } from "@pindoba/styled-system/patterns";
import { Toaster } from "../Toaster";
import { useToastHistory } from "../use-toast-history";

const samples = [
  { type: "success", title: "Saved", content: "Changes published." },
  { type: "danger", title: "Failed", content: "Unable to reach server." },
  { type: "warning", title: "Heads up", content: "Disk almost full." },
  { type: "neutral", title: "FYI", content: "Cache rebuilt." },
  {
    type: "primary",
    title: "New mention",
    content: "Jane tagged you in a doc.",
  },
  { type: "success", title: "Deployed", content: "Build finished in 12s." },
  { type: "warning", title: "Slow query", content: "Check the indexes." },
  { type: "danger", title: "Payment failed", content: "Card was declined." },
  { type: "neutral", title: "Reminder", content: "Standup in 5 minutes." },
  { type: "primary", title: "Sync complete", content: "Latest data is in." },
] as const;

export default function HistoryDemo() {
  const history = useToastHistory();

  function pushRandom(): void {
    const s = samples[Math.floor(Math.random() * samples.length)]!;
    toast[s.type]({ title: s.title, content: s.content });
  }

  return (
    <>
      <div className={stack({ gap: "sm", direction: "row" })}>
        <Button onClick={pushRandom}>Push toast</Button>
        <Button onClick={() => history.toggleCenter(true)}>
          Open notifications ({history.unreadCount})
        </Button>
        <Button onClick={() => history.markAllAsRead()}>Mark all read</Button>
        <Button onClick={() => history.clearHistory()}>Clear history</Button>
      </div>

      <Toaster
        position="bottom-right"
        enableHistory
        storageKey="pindoba-toast-demo"
      />
    </>
  );
}

<script lang="ts">
  import Button from "@pindoba/svelte-button";
  import Toaster, { toast } from "../index.js";
  import { useToastHistory } from "../use-toast-history.svelte.js";
  import { stack } from "@pindoba/styled-system/patterns";

  const history = useToastHistory();

  const samples = [
    { type: "success", title: "Saved", content: "Changes published." },
    { type: "danger", title: "Failed", content: "Unable to reach server." },
    { type: "warning", title: "Heads up", content: "Disk almost full." },
    { type: "neutral", title: "FYI", content: "Cache rebuilt." },
    {
      type: "primary",
      title: "New mention",
      content: "Jane tagged you in a doc.",
    },
    { type: "success", title: "Deployed", content: "Build finished in 12s." },
    { type: "warning", title: "Slow query", content: "Check the indexes." },
    { type: "danger", title: "Payment failed", content: "Card was declined." },
    { type: "neutral", title: "Reminder", content: "Standup in 5 minutes." },
    { type: "primary", title: "Sync complete", content: "Latest data is in." },
  ] as const;

  function pushRandom(): void {
    const s = samples[Math.floor(Math.random() * samples.length)];
    toast[s.type]({ title: s.title, content: s.content });
  }
</script>

<div class={stack({ gap: "sm", direction: "row" })}>
  <Button onclick={pushRandom}>Push toast</Button>
  <Button onclick={() => history.toggleCenter(true)}>
    Open notifications ({history.unreadCount})
  </Button>
  <Button onclick={() => history.markAllAsRead()}>Mark all read</Button>
  <Button onclick={() => history.clearHistory()}>Clear history</Button>
</div>

<Toaster
  position="bottom-right"
  enableHistory={true}
  storageKey="pindoba-toast-demo"
/>