@pindoba/astro-toast 0.0.0-alpha-20260426220647

package/LICENSE

@@ -0,0 +1,12 @@
+Copyright 2025 Eduardo Lopes
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
+PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE
+FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+DEALINGS IN THE SOFTWARE.

package/index.ts

@@ -0,0 +1,6 @@
+// Do not write code directly here, instead use the `src` folder!
+// Then, use this file to export everything you want your user to access.
+
+import Toaster from "./src/Toaster.astro";
+
+export default Toaster;

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@pindoba/astro-toast",
+  "version": "0.0.0-alpha-20260426220647",
+  "sideEffects": false,
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": "./index.ts",
+    "./runtime": "./src/runtime.ts",
+    "./demos": "./src/demos/index.ts",
+    "./demos/default": "./src/demos/default.astro",
+    "./demos/emphasis": "./src/demos/emphasis.astro",
+    "./demos/promise": "./src/demos/promise.astro",
+    "./demos/positions": "./src/demos/positions.astro",
+    "./demos/stacked": "./src/demos/stacked.astro",
+    "./demos/dedupe": "./src/demos/dedupe.astro",
+    "./demos/actions": "./src/demos/actions.astro",
+    "./demos/history": "./src/demos/history.astro"
+  },
+  "files": [
+    "src",
+    "index.ts"
+  ],
+  "keywords": [
+    "astro-component"
+  ],
+  "devDependencies": {
+    "@astrojs/check": "^0.9.8",
+    "astro": "^6.1.9",
+    "typescript": "^6.0.3"
+  },
+  "peerDependencies": {
+    "astro": "^4.0.0"
+  },
+  "dependencies": {
+    "@iconify-json/lucide": "^1.2.103",
+    "astro-icon": "^1.1.5",
+    "@pindoba/astro-button": "0.0.0-alpha-20260426220647",
+    "@pindoba/astro-dialog": "0.0.0-alpha-20260426220647",
+    "@pindoba/astro-group": "0.0.0-alpha-20260426220647",
+    "@pindoba/astro-radio": "0.0.0-alpha-20260426220647",
+    "@pindoba/core-toast": "0.0.0-alpha-20260426220647",
+    "@pindoba/styles-toast": "0.0.0-alpha-20260426220647",
+    "@pindoba/styled-system": "0.0.0-alpha-20260426220647",
+    "@pindoba/astro-alert": "0.0.0-alpha-20260426220647",
+    "@pindoba/astro-badge": "0.0.0-alpha-20260426220647"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "check": "astro check",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
+  }
+}

package/src/Toaster.astro

@@ -0,0 +1,435 @@
+---
+import Alert from "@pindoba/astro-alert";
+import Badge from "@pindoba/astro-badge";
+import Button from "@pindoba/astro-button";
+import Dialog from "@pindoba/astro-dialog";
+import DialogManagerScript from "@pindoba/astro-dialog/script";
+import Group from "@pindoba/astro-group";
+import Radio from "@pindoba/astro-radio";
+import { Icon } from "astro-icon/components";
+import { connectToaster } from "@pindoba/core-toast";
+import type { ToastPosition, ToasterConfig } from "@pindoba/core-toast";
+import type { AlertFeedback } from "@pindoba/astro-alert";
+
+export interface ToasterProps extends Partial<ToasterConfig> {
+  class?: string;
+}
+
+const {
+  position = "bottom-right",
+  stacked = true,
+  expandOnHover = true,
+  duration = 4000,
+  limit = 5,
+  pauseOnHover = true,
+  swipeToDismiss = true,
+  showProgressBar = true,
+  enableHistory = false,
+  maxHistoryItems = 50,
+  historyDrawer = "right",
+  defaultEmphasis = "secondary",
+  storageKey,
+  class: className,
+}: ToasterProps = Astro.props;
+
+const config: Partial<ToasterConfig> = {
+  position,
+  stacked,
+  expandOnHover,
+  duration,
+  limit,
+  pauseOnHover,
+  swipeToDismiss,
+  showProgressBar,
+  enableHistory,
+  maxHistoryItems,
+  historyDrawer,
+  defaultEmphasis,
+  storageKey,
+};
+
+const api = connectToaster({ class: className });
+const positions: ToastPosition[] = [
+  "top-left",
+  "top-right",
+  "top-center",
+  "bottom-left",
+  "bottom-right",
+  "bottom-center",
+];
+
+const types = [
+  "primary",
+  "success",
+  "danger",
+  "warning",
+  "neutral",
+  "loading",
+] as const;
+const typeFeedbackMap: Record<(typeof types)[number], AlertFeedback> = {
+  primary: "default",
+  success: "success",
+  danger: "danger",
+  warning: "warning",
+  neutral: "neutral",
+  loading: "loading",
+};
+// Badge has no "loading" — fall back to primary for the dedupe chip.
+const badgeFeedbackMap: Record<
+  (typeof types)[number],
+  "success" | "danger" | "warning" | "neutral" | "primary"
+> = {
+  primary: "primary",
+  success: "success",
+  danger: "danger",
+  warning: "warning",
+  neutral: "neutral",
+  loading: "primary",
+};
+// History items reuse Alert's feedback variants directly.
+const historyFeedbackMap: Record<
+  (typeof types)[number],
+  "success" | "danger" | "warning" | "default" | "neutral" | "loading"
+> = {
+  primary: "default",
+  success: "success",
+  danger: "danger",
+  warning: "warning",
+  neutral: "neutral",
+  loading: "loading",
+};
+---
+
+{
+  /*
+  astro-icon scans the *visible* page output to build its SVG sprite — icons
+  that only appear inside <template> tags (toast row + history item templates
+  below) are skipped, so cloned templates would render as empty stamps. Force
+  the scanner to include them by mounting a hidden block of Icon refs.
+*/
+}
+<div hidden aria-hidden="true">
+  <Icon name="lucide:x" />
+  <Icon name="lucide:check" />
+  <Icon name="lucide:triangle-alert" />
+  <Icon name="lucide:badge-alert" />
+  <Icon name="lucide:loader-circle" />
+  <Icon name="lucide:megaphone" />
+  <Icon name="lucide:bell" />
+  <Icon name="lucide:check-check" />
+  <Icon name="lucide:trash-2" />
+</div>
+
+<div
+  {...api.rootProps}
+  data-toaster-root
+  data-toaster-config={JSON.stringify(config)}
+>
+  {
+    positions.map((pos) => (
+      <div
+        class={api.viewportClass(pos)}
+        data-toast-viewport={pos}
+        data-position={pos}
+        data-stacked={stacked ? "true" : "false"}
+        data-expanded="false"
+        data-empty="true"
+        style="display: none;"
+        role="region"
+        aria-label={`Toasts ${pos}`}
+      />
+    ))
+  }
+
+  {
+    /* Templates per type × variant × emphasis. attach-toaster picks at runtime. */
+  }
+  {
+    types.flatMap((type) =>
+      (["with-title", "no-title"] as const).flatMap((variant) =>
+        (["primary", "secondary", "tertiary"] as const).map((emphasis) => (
+          <template
+            data-toast-template={type}
+            data-toast-variant={variant}
+            data-toast-emphasis={emphasis}
+          >
+            <div
+              class={api.classes.row}
+              data-state="active"
+              data-feedback={type}
+              data-emphasis={emphasis}
+              role={type === "danger" ? "alert" : "status"}
+              aria-live={type === "danger" ? "assertive" : "polite"}
+              aria-atomic="true"
+            >
+              <Alert
+                feedback={typeFeedbackMap[type]}
+                emphasis={emphasis}
+                title={
+                  variant === "with-title" ? "TITLE_PLACEHOLDER" : undefined
+                }
+                passThrough={{
+                  title: { props: { "data-slot": "title" } },
+                }}
+              >
+                <span data-slot="content" />
+                <Fragment slot="actions">
+                  <span data-slot="actions" data-action-mount />
+                  <Button
+                    size="xs"
+                    emphasis="ghost"
+                    data-slot="action-template"
+                    aria-hidden="true"
+                    style="display:none"
+                  />
+                  <Button
+                    size="xs"
+                    shape="square"
+                    emphasis="ghost"
+                    aria-label="Dismiss"
+                    data-slot="dismiss"
+                  >
+                    <Icon name="lucide:x" width={14} height={14} />
+                  </Button>
+                </Fragment>
+              </Alert>
+              <span
+                class={api.classes.dedupeBadge}
+                data-slot="dedupe"
+                data-count="1"
+              >
+                <Badge
+                  size="sm"
+                  feedback={badgeFeedbackMap[type]}
+                  emphasis="primary"
+                >
+                  <span data-slot="dedupe-content" />
+                </Badge>
+              </span>
+              {showProgressBar && (
+                <span class={api.classes.progressBar} data-slot="progress" />
+              )}
+            </div>
+          </template>
+        )),
+      ),
+    )
+  }
+
+  {/* Custom toast template (no Alert wrapper) */}
+  <template data-toast-template="custom">
+    <div
+      class={api.classes.row}
+      data-state="active"
+      data-feedback="neutral"
+      role="status"
+      aria-live="polite"
+    >
+      <div data-slot="content"></div>
+      <span class={api.classes.dedupeBadge} data-slot="dedupe" data-count="1">
+        <Badge size="sm" feedback="neutral" emphasis="primary">
+          <span data-slot="dedupe-content"></span>
+        </Badge>
+      </span>
+      {
+        showProgressBar && (
+          <span class={api.classes.progressBar} data-slot="progress" />
+        )
+      }
+    </div>
+  </template>
+
+  {/* Toast Center dialog (always rendered when enableHistory) */}
+  {enableHistory && <DialogManagerScript />}
+  {
+    enableHistory && (
+      <Dialog
+        id="pindoba-toast-center"
+        title="Notifications"
+        drawer={historyDrawer || undefined}
+        data-toast-center-dialog
+        passThrough={{
+          wrapper: { style: { minHeight: 0, overflow: "hidden" } },
+          content: {
+            style: { minHeight: 0, overflow: "hidden", flex: "1 1 auto" },
+          },
+        }}
+      >
+        <div class={api.classes.centerBody}>
+          <div class={api.classes.centerTabs} role="tablist">
+            <Group>
+              <Radio
+                id="pindoba-toast-center-tab-all"
+                appearance="button"
+                size="sm"
+                name="pindoba-toast-center-filter"
+                value="all"
+                checked
+                data-toast-center-tab="all"
+              >
+                All
+                <Badge
+                  size="sm"
+                  feedback="neutral"
+                  class={api.classes.centerCount}
+                >
+                  <span data-toast-center-count="all">0</span>
+                </Badge>
+              </Radio>
+              <Radio
+                id="pindoba-toast-center-tab-unread"
+                appearance="button"
+                size="sm"
+                name="pindoba-toast-center-filter"
+                value="unread"
+                data-toast-center-tab="unread"
+              >
+                Unread
+                <Badge
+                  size="sm"
+                  feedback="primary"
+                  class={api.classes.centerCount}
+                >
+                  <span data-toast-center-count="unread">0</span>
+                </Badge>
+              </Radio>
+            </Group>
+            <div class={api.classes.centerActions}>
+              <Button emphasis="ghost" size="sm" data-toast-center-mark-all>
+                <Icon name="lucide:check-check" width={16} height={16} />
+                Mark all read
+              </Button>
+              <Button emphasis="ghost" size="sm" data-toast-center-clear>
+                <Icon name="lucide:trash-2" width={16} height={16} />
+                Clear
+              </Button>
+            </div>
+          </div>
+          <ul class={api.classes.centerList} data-toast-center-list />
+          <p class={api.classes.centerEmpty} data-toast-center-empty>
+            No notifications.
+          </p>
+        </div>
+        {types.flatMap((type) =>
+          (["with-title", "no-title"] as const).flatMap((variant) =>
+            (["primary", "secondary", "tertiary"] as const).map((emphasis) => (
+              <template
+                data-toast-center-item-template={type}
+                data-toast-center-item-variant={variant}
+                data-toast-center-item-emphasis={emphasis}
+              >
+                <li class={api.classes.centerItem} data-has-recurrences="false">
+                  {variant === "with-title" ? (
+                    <Alert
+                      feedback={historyFeedbackMap[type]}
+                      emphasis={emphasis}
+                      title="TITLE_PLACEHOLDER"
+                      passThrough={{
+                        title: { props: { "data-history-slot": "title" } },
+                      }}
+                    >
+                      <span data-history-slot="content" />
+                      <div
+                        class={api.classes.centerRecurrences}
+                        data-history-slot="recurrences"
+                      >
+                        <p
+                          class={api.classes.centerRecurrencesSummary}
+                          data-history-slot="recurrences-summary"
+                        />
+                        <ul
+                          class={api.classes.centerRecurrenceList}
+                          data-history-slot="recurrences-list"
+                        />
+                      </div>
+                      <Fragment slot="actions">
+                        <span
+                          class={api.classes.centerLatestTime}
+                          data-history-slot="latest-time"
+                        />
+                      </Fragment>
+                    </Alert>
+                  ) : (
+                    <Alert
+                      feedback={historyFeedbackMap[type]}
+                      emphasis={emphasis}
+                    >
+                      <span data-history-slot="content" />
+                      <div
+                        class={api.classes.centerRecurrences}
+                        data-history-slot="recurrences"
+                      >
+                        <p
+                          class={api.classes.centerRecurrencesSummary}
+                          data-history-slot="recurrences-summary"
+                        />
+                        <ul
+                          class={api.classes.centerRecurrenceList}
+                          data-history-slot="recurrences-list"
+                        />
+                      </div>
+                      <Fragment slot="actions">
+                        <span
+                          class={api.classes.centerLatestTime}
+                          data-history-slot="latest-time"
+                        />
+                      </Fragment>
+                    </Alert>
+                  )}
+                  <span
+                    class={api.classes.centerUnreadDot}
+                    data-history-slot="unread-dot"
+                  />
+                </li>
+              </template>
+            )),
+          ),
+        )}
+        <template data-history-recurrence-item>
+          <li
+            class={api.classes.centerRecurrenceItem}
+            data-history-slot="recurrence-row"
+          >
+            <span data-history-slot="recurrence-time" />
+          </li>
+        </template>
+      </Dialog>
+    )
+  }
+</div>
+
+<script>
+  import {
+    attachToaster,
+    markAllAsRead,
+    clearHistory,
+  } from "@pindoba/core-toast";
+  import type { ToasterConfig } from "@pindoba/core-toast";
+
+  // Multiple Toasters share one store — attach each one but only the first
+  // claim wins (handled inside attachToaster, which also portals viewports
+  // and the Toast Center dialog to document.body). Skip roots that don't
+  // carry an Astro config attribute — those belong to Svelte/React Toasters
+  // that configure themselves via their own onMount/effect.
+  const roots = document.querySelectorAll<HTMLElement>(
+    "[data-toaster-root][data-toaster-config]",
+  );
+  for (const root of Array.from(roots)) {
+    const raw = root.getAttribute("data-toaster-config");
+    let config: Partial<ToasterConfig> = {};
+    try {
+      config = raw ? (JSON.parse(raw) as Partial<ToasterConfig>) : {};
+    } catch {
+      /* ignore */
+    }
+    attachToaster(root, config);
+  }
+
+  // Bind Toast Center action buttons. Close is provided by the pindoba Dialog.
+  document
+    .querySelector("[data-toast-center-mark-all]")
+    ?.addEventListener("click", () => markAllAsRead());
+  document
+    .querySelector("[data-toast-center-clear]")
+    ?.addEventListener("click", () => clearHistory());
+</script>

package/src/demos/actions.astro

@@ -0,0 +1,39 @@
+---
+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>

package/src/demos/dedupe.astro

@@ -0,0 +1,26 @@
+---
+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>

package/src/demos/default.astro

@@ -0,0 +1,45 @@
+---
+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", wrap: "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>

package/src/demos/emphasis.astro

@@ -0,0 +1,43 @@
+---
+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", wrap: "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>

package/src/demos/history.astro

@@ -0,0 +1,76 @@
+---
+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>

package/src/demos/index.ts

@@ -0,0 +1,8 @@
+export { default as Default } from "./default.astro";
+export { default as Emphasis } from "./emphasis.astro";
+export { default as Promise } from "./promise.astro";
+export { default as Positions } from "./positions.astro";
+export { default as Stacked } from "./stacked.astro";
+export { default as Dedupe } from "./dedupe.astro";
+export { default as Actions } from "./actions.astro";
+export { default as History } from "./history.astro";

package/src/demos/positions.astro

@@ -0,0 +1,34 @@
+---
+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>

package/src/demos/promise.astro

@@ -0,0 +1,47 @@
+---
+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>

package/src/demos/stacked.astro

@@ -0,0 +1,29 @@
+---
+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>

package/src/runtime.ts

@@ -0,0 +1,31 @@
+/**
+ * Astro runtime exports — consumers import from `@pindoba/astro-toast/runtime`.
+ * Includes the imperative `toast()` API, history/center handles, and the
+ * `getToaster()` accessor.
+ */
+export {
+  toast,
+  attachToaster,
+  getToaster,
+  getToastStore,
+  $history,
+  $isCenterOpen,
+  $unreadCount,
+  markAsRead,
+  markAllAsRead,
+  clearHistory,
+  toggleCenter,
+  getToastHistoryHandles,
+} from "@pindoba/core-toast";
+export type {
+  ToastInput,
+  ToastEntry,
+  ToastType,
+  ToastPosition,
+  ToastContent,
+  ToastContentRenderer,
+  ToastAction,
+  ToasterConfig,
+  HistoryEntry,
+  UseToastHistory,
+} from "@pindoba/core-toast";