@antadesign/anta 0.3.13 → 0.3.14

package/dist/elements/a-toast.js

@@ -0,0 +1,283 @@
+import { HTMLElementBase, installDismissTrigger } from "../anta_helpers";
+import "./a-toast.css";
+const EXIT_MS = 220;
+const DEFAULT_DURATION = 5e3;
+const DISMISS_ATTR = "data-toast-dismiss";
+class AToastElement extends HTMLElementBase {
+  // `leaving` triggers the exit; `rev` (bumped on an in-place update) restarts
+  // the timer. `duration` is read on demand, not observed.
+  static observedAttributes = ["leaving", "rev"];
+  /** Off-DOM state channel — drives `:state(leaving)` for the exit fade. */
+  #internals;
+  /** The content slot. Also the element the `--toast-remaining` countdown
+   *  animates on, so slotted content can inherit the value (see SHADOW_STYLE). */
+  #slot;
+  /** A DOM node handed in via the `content` property (the wrapper's DOM-node
+   *  branch). String / JSX content arrives as slotted children instead. */
+  #content;
+  /** The content node we last slotted, so an in-place update can swap or clear it
+   *  without touching the reconciler's own children. */
+  #slotted;
+  #timer;
+  #exitTimer;
+  /** Time left on the auto-dismiss timer (ms), tracked across pause/resume. */
+  #remaining = 0;
+  /** When the current run started, for computing remaining on pause. */
+  #startedAt = 0;
+  #leaving = false;
+  // Independent pause holds — the countdown runs only when BOTH are false.
+  #hovered = false;
+  #focused = false;
+  constructor() {
+    super();
+    try {
+      this.#internals = this.attachInternals?.();
+    } catch (err) {
+      console.warn("a-toast: ElementInternals unavailable \u2014 exit fade disabled.", err);
+    }
+    const shadow = this.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = SHADOW_STYLE;
+    this.#slot = document.createElement("slot");
+    shadow.append(style, this.#slot);
+    installDismissTrigger(this, DISMISS_ATTR, () => this.dismiss());
+  }
+  connectedCallback() {
+    this.#applyContent();
+    this.addEventListener("pointerenter", this.#onPointerEnter);
+    this.addEventListener("pointerleave", this.#onPointerLeave);
+    this.addEventListener("focusin", this.#onFocusIn);
+    this.addEventListener("focusout", this.#onFocusOut);
+    if (this.hasAttribute("leaving")) {
+      this.dismiss();
+      return;
+    }
+    this.#startTimer();
+  }
+  disconnectedCallback() {
+    this.#clearTimer();
+    if (this.#exitTimer != null) {
+      this.view.clearTimeout(this.#exitTimer);
+      this.#exitTimer = void 0;
+    }
+    this.removeEventListener("pointerenter", this.#onPointerEnter);
+    this.removeEventListener("pointerleave", this.#onPointerLeave);
+    this.removeEventListener("focusin", this.#onFocusIn);
+    this.removeEventListener("focusout", this.#onFocusOut);
+  }
+  attributeChangedCallback(name) {
+    if (name === "leaving") {
+      if (this.hasAttribute("leaving")) {
+        if (this.isConnected) this.dismiss();
+      } else if (this.#leaving) {
+        this.#revive();
+      }
+    } else if (name === "rev") {
+      if (this.isConnected) this.restart();
+    }
+  }
+  /** Cancel a pending exit and bring the toast back (an upsert landed during the
+   *  exit window). */
+  #revive() {
+    if (this.#exitTimer != null) {
+      this.view.clearTimeout(this.#exitTimer);
+      this.#exitTimer = void 0;
+    }
+    this.#leaving = false;
+    this.#internals?.states.delete("leaving");
+    this.#startTimer();
+  }
+  /** A live DOM node to show as the content (set by the wrapper's DOM-node
+   *  branch). Paired getter/setter so React 19's property assignment works. */
+  get content() {
+    return this.#content ?? null;
+  }
+  set content(node) {
+    this.#content = node ?? void 0;
+    this.#applyContent();
+  }
+  /** Slot the content node into our own light DOM. Only ever touches the node WE
+   *  slotted (tracked in `#slotted`), never the reconciler's children: it removes
+   *  the previous node and appends the new one, or removes it when `content` goes
+   *  null (an in-place update swapping DOM-node content for a string / JSX — else
+   *  the stale node would stack under the new content). String / JSX content
+   *  arrives as reconciler-owned children, so `#content` is undefined and this
+   *  only clears any node we had slotted. */
+  #applyContent() {
+    if (this.#content === this.#slotted) return;
+    if (this.#slotted?.parentNode === this) this.removeChild(this.#slotted);
+    this.#slotted = this.#content;
+    if (this.#content) this.append(this.#content);
+  }
+  /** Auto-dismiss delay in ms. Empty / non-positive falls back to the 5000ms
+   *  default; `Infinity` is sticky (never auto-dismisses). */
+  get #duration() {
+    const a = this.getAttribute("duration");
+    if (a == null) return DEFAULT_DURATION;
+    const n = Number(a);
+    if (n === Infinity) return Infinity;
+    return Number.isFinite(n) && n > 0 ? n : DEFAULT_DURATION;
+  }
+  /** Paused while either hold is active. */
+  get #paused() {
+    return this.#hovered || this.#focused;
+  }
+  #startTimer() {
+    this.#remaining = this.#duration;
+    this.#startCountdown();
+    this.#armIfActive();
+  }
+  /** Set up (or restart) the display countdown that drives `--toast-remaining`
+   *  1 → 0 on the slot over `duration`; slotted content inherits it. It's display
+   *  only — the auto-dismiss above is the real JS timer — so it degrades to a
+   *  static full bar where custom-property animation is unsupported. Sticky
+   *  (`Infinity` duration) runs no countdown; the var stays at its initial 1. */
+  #startCountdown() {
+    if (Number.isFinite(this.#duration)) {
+      this.#slot.style.animation = `toast-remaining ${this.#duration}ms linear forwards`;
+      this.#eachCountdown((a) => {
+        a.currentTime = 0;
+      });
+      if (this.#paused || this.#leaving) this.#pauseCountdown();
+    } else {
+      this.#slot.style.animation = "";
+    }
+  }
+  /** Run `fn` for the `--toast-remaining` animation on the slot, if present.
+   *  Guarded — `getAnimations` / animation control may be absent in a partial
+   *  runtime, and the countdown is non-essential (never let it break the toast). */
+  #eachCountdown(fn) {
+    try {
+      for (const a of this.#slot.getAnimations?.() ?? []) {
+        if (a.animationName === "toast-remaining") fn(a);
+      }
+    } catch {
+    }
+  }
+  #pauseCountdown() {
+    this.#eachCountdown((a) => a.pause());
+  }
+  #playCountdown() {
+    this.#eachCountdown((a) => a.play());
+  }
+  /** Start (or resume) the dismiss timer only when it should be running: a finite
+   *  duration (a non-finite one is sticky), not leaving, not paused, not already
+   *  running. */
+  #armIfActive() {
+    if (this.#timer != null || this.#leaving || this.#paused || !Number.isFinite(this.#duration)) return;
+    if (this.#remaining <= 0) {
+      this.dismiss();
+      return;
+    }
+    this.#startedAt = Date.now();
+    this.#timer = this.view.setTimeout(() => {
+      this.#timer = void 0;
+      this.dismiss();
+    }, this.#remaining);
+    this.#playCountdown();
+  }
+  #clearTimer() {
+    if (this.#timer != null) {
+      this.view.clearTimeout(this.#timer);
+      this.#timer = void 0;
+    }
+  }
+  /** Freeze the timer, banking the time left, and freeze the display countdown
+   *  with it. Idempotent. */
+  #pause() {
+    if (this.#timer == null) return;
+    this.#remaining -= Date.now() - this.#startedAt;
+    this.#clearTimer();
+    this.#pauseCountdown();
+  }
+  #onPointerEnter = () => {
+    this.#hovered = true;
+    this.#pause();
+  };
+  #onPointerLeave = () => {
+    this.#hovered = false;
+    this.#armIfActive();
+  };
+  #onFocusIn = () => {
+    this.#focused = true;
+    this.#pause();
+  };
+  #onFocusOut = () => {
+    this.#focused = false;
+    this.#armIfActive();
+  };
+  #reducedMotion() {
+    return this.view.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+  }
+  /** How long to wait after starting the exit before emitting `dismiss` (node
+   *  removal). Read from the computed `--toast-dur` token so it tracks a consumer
+   *  override and the removal fires exactly when the fade ends — instead of a
+   *  fixed 220ms that desyncs from a changed `--toast-dur`. 0 under reduced motion
+   *  (the shadow transition is gated off there); `EXIT_MS` if it can't be read. */
+  #exitDuration() {
+    if (this.#reducedMotion()) return 0;
+    const raw = this.view.getComputedStyle?.(this).getPropertyValue("--toast-dur").trim();
+    if (raw) {
+      const n = parseFloat(raw);
+      if (Number.isFinite(n)) return raw.endsWith("ms") ? n : n * 1e3;
+    }
+    return EXIT_MS;
+  }
+  /** Restart the auto-dismiss timer from the current `duration` (an in-place
+   *  update). If the toast is currently paused, the fresh time is banked and the
+   *  countdown stays paused until hover / focus releases. */
+  restart() {
+    if (this.#leaving) return;
+    this.#clearTimer();
+    this.#startTimer();
+  }
+  /** Play the exit (shadow only), then emit a bubbling `dismiss`. The owner
+   *  removes the node on that event — the element never removes itself.
+   *  Idempotent. */
+  dismiss() {
+    if (this.#leaving) return;
+    this.#leaving = true;
+    this.#clearTimer();
+    this.#pauseCountdown();
+    this.#internals?.states.add("leaving");
+    const wait = this.#exitDuration();
+    this.#exitTimer = this.view.setTimeout(() => {
+      this.#exitTimer = void 0;
+      this.dispatchEvent(new CustomEvent("dismiss", { bubbles: true, composed: true }));
+    }, wait);
+  }
+}
+const SHADOW_STYLE = `
+  :host { display: block; opacity: 1; translate: 0 0; }
+  :host(:state(leaving)) { opacity: 0; }
+
+  @starting-style {
+    :host { opacity: 0; translate: 0 12px; }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    :host {
+      transition:
+        opacity var(--toast-dur, 220ms) ease,
+        translate var(--toast-dur, 220ms) ease;
+    }
+  }
+
+  slot { display: block; }
+
+  @keyframes toast-remaining {
+    from { --toast-remaining: 1; }
+    to { --toast-remaining: 0; }
+  }
+`;
+function register_a_toast() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-toast")) {
+    customElements.define("a-toast", AToastElement);
+  }
+}
+register_a_toast();
+export {
+  AToastElement,
+  register_a_toast
+};

package/dist/elements/a-toaster.css

@@ -0,0 +1 @@
+@layer anta{a-toaster{--toaster-inset: 16px;--toaster-gap: 12px;--toaster-width: 380px}a-toaster:not(:defined){display:none}}

package/dist/elements/a-toaster.d.ts

@@ -0,0 +1,30 @@
+import { HTMLElementBase } from '../anta_helpers';
+import './a-toaster.css';
+/**
+ * `<a-toaster>` — a viewport-anchored notification region. One instance hosts all
+ * six placement zones; each `<a-toast>` routes to a corner/edge by its `slot`
+ * attribute (`slot="bottom-right"`, …). The `<Toaster>` wrapper keeps it mounted
+ * and renders its `<a-toast>` children through the reconciler; this element only
+ * lays them out — it touches its own shadow and reads its children, never a host
+ * or light-DOM write.
+ *
+ * Shadow structure:
+ *
+ *   <div part="region" popover="manual">   ← top-layer, viewport-covering, click-through
+ *     <slot name="top-left">    …           ← one flex column per zone, pinned to its edge
+ *     <slot name="bottom-right"> …
+ *
+ * The region is a `popover` so it renders in the top layer and escapes any
+ * transformed / clipping ancestor of wherever `<Toaster>` is mounted. It's shown
+ * only while it holds at least one toast (`showPopover`) and hidden when empty
+ * (`hidePopover`), so it never sits in the top layer for nothing. Natural
+ * top-layer ordering stands: a dialog or menu opened afterward can cover it (by
+ * design — toasts don't force themselves above modals).
+ */
+export declare class AToasterElement extends HTMLElementBase {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+export declare function register_a_toaster(): void;

package/dist/elements/a-toaster.js

@@ -0,0 +1,98 @@
+import { HTMLElementBase } from "../anta_helpers";
+import { TOAST_PLACEMENTS } from "../toaster";
+import "./a-toaster.css";
+const ZONES = TOAST_PLACEMENTS;
+class AToasterElement extends HTMLElementBase {
+  #region;
+  #shown = false;
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = SHADOW_STYLE;
+    this.#region = document.createElement("div");
+    this.#region.className = "region";
+    this.#region.setAttribute("part", "region");
+    this.#region.setAttribute("popover", "manual");
+    for (const zone of ZONES) {
+      const slot = document.createElement("slot");
+      slot.name = zone;
+      this.#region.append(slot);
+    }
+    this.#region.addEventListener("slotchange", this.#syncVisibility);
+    shadow.append(style, this.#region);
+  }
+  connectedCallback() {
+    this.#syncVisibility();
+  }
+  disconnectedCallback() {
+    this.#shown = false;
+  }
+  /** Show the region while it holds a toast, hide it when empty. A child count
+   *  read + a shadow popover toggle — no host or light-DOM mutation. */
+  #syncVisibility = () => {
+    const region = this.#region;
+    if (typeof region.showPopover !== "function") return;
+    const has = this.childElementCount > 0;
+    if (has && !this.#shown) {
+      if (!this.isConnected) return;
+      try {
+        region.showPopover();
+        this.#shown = true;
+      } catch {
+      }
+    } else if (!has && this.#shown) {
+      try {
+        if (region.matches(":popover-open")) region.hidePopover();
+      } catch {
+      }
+      this.#shown = false;
+    }
+  };
+}
+const SHADOW_STYLE = `
+  :host { display: contents; }
+
+  .region {
+    position: fixed;
+    inset: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    overflow: visible;
+    pointer-events: none;
+    width: auto;
+    height: auto;
+  }
+  .region:popover-open { display: block; }
+
+  slot {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    gap: var(--toaster-gap, 12px);
+    width: min(var(--toaster-width, 380px), calc(100vw - 2 * var(--toaster-inset, 16px)));
+    box-sizing: border-box;
+    pointer-events: none;
+  }
+
+  ::slotted(*) { pointer-events: auto; }
+
+  slot[name^="top-"] { top: var(--toaster-inset, 16px); flex-direction: column-reverse; }
+  slot[name^="bottom-"] { bottom: var(--toaster-inset, 16px); flex-direction: column; }
+  slot[name$="-left"] { left: var(--toaster-inset, 16px); }
+  slot[name$="-right"] { right: var(--toaster-inset, 16px); }
+  slot[name$="-center"] { left: 50%; transform: translateX(-50%); }
+`;
+function register_a_toaster() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-toaster")) {
+    customElements.define("a-toaster", AToasterElement);
+  }
+}
+register_a_toaster();
+export {
+  AToasterElement,
+  register_a_toaster
+};

package/dist/elements/index.d.ts

@@ -35,5 +35,6 @@ export { ATabsElement, register_a_tabs } from './a-tabs';
 export { ATabPanelElement, register_a_tabpanel } from './a-tabpanel';
 export { ADialogElement, register_a_dialog } from './a-dialog';
 export { ACardElement, register_a_card } from './a-card';
+export { ABannerElement, register_a_banner } from './a-banner';
 import './a-title.css';
 import './a-tag.css';

package/dist/elements/index.js

@@ -20,9 +20,11 @@ import { ATabsElement, register_a_tabs } from "./a-tabs";
 import { ATabPanelElement, register_a_tabpanel } from "./a-tabpanel";
 import { ADialogElement, register_a_dialog } from "./a-dialog";
 import { ACardElement, register_a_card } from "./a-card";
+import { ABannerElement, register_a_banner } from "./a-banner";
 import "./a-title.css";
 import "./a-tag.css";
 export {
+  ABannerElement,
   AButtonElement,
   ACalendarElement,
   ACardElement,
@@ -45,6 +47,7 @@ export {
   ATabsElement,
   ATextElement,
   ATooltipElement,
+  register_a_banner,
   register_a_button,
   register_a_calendar,
   register_a_card,

package/dist/general_types.d.ts

@@ -1081,3 +1081,43 @@ export interface ACardAttributes extends BaseAttributes {
      *  chain the element derives in link mode. */
     'aria-label'?: string;
 }
+/**
+ * Attributes for the `<a-banner>` custom element — a full-width, dismissible
+ * message strip (borderless by default; opt into a rule via `border-bottom-width` /
+ * `border-width`, the Progress pattern). Slots (light-DOM children): `message`
+ * (leading), the default slot (middle content), `actions` (trailing), and `close`
+ * (the ✕ button). The element exposes `::part(message | content | actions | close)`,
+ * and `:state(open)` / `:state(closed)` as visibility hooks (the external
+ * sheet collapses the host on `:state(closed)`). Low-level attributes; for the
+ * typed JSX wrapper use `Banner` from `@antadesign/anta`.
+ */
+export interface ABannerAttributes extends BaseAttributes {
+    /** Controlled visibility (`'open'` / `'closed'`). Present → controlled: the
+     *  attribute is the source of truth, the ✕ dismiss only dispatches the cancelable
+     *  `statechange` event, and the consumer answers by updating it. Absent →
+     *  uncontrolled (use `default-state`). The `<Banner>` wrapper presents this as
+     *  `dismissed` (closed = dismissed). See STATEFUL-COMPONENTS.md. */
+    state?: 'open' | 'closed';
+    /** Initial visibility for the uncontrolled mode (`'open'` / `'closed'`), read
+     *  once at connect. A banner is shown by default, so omit / `'open'` shows it;
+     *  `'closed'` starts it dismissed. */
+    'default-state'?: 'open' | 'closed';
+    /** Semantic tone, or any literal CSS color for a one-off custom tone. Named tones
+     *  re-point the surface + text + border colour (used if you opt into a border); a
+     *  custom color keeps its hue with lightness/chroma pinned. `'neutral'` is the
+     *  default (same as omitting it). */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Rounded corners for a standalone banner — `border-radius: 999px` (clamps to a
+     *  stadium), or a custom radius via a length value (`round="12px"`). Borderless
+     *  like the default. Presence-based for the boolean form. */
+    round?: boolean | number | string;
+    /** Fires before visibility changes — the element dispatches a `cancelable`
+     *  `statechange` `CustomEvent` whose `detail` is `{ next, prev }` in the
+     *  `'open'|'closed'` vocabulary (a dismiss is always `next: 'closed'`).
+     *  Uncontrolled, `preventDefault()` vetoes the transition. All-lowercase so both
+     *  renderers bind it (React 19 keeps the case after `on`; Preact lowercases). */
+    onstatechange?: (e: CustomEvent<{
+        next: 'open' | 'closed';
+        prev: 'open' | 'closed';
+    }>) => void;
+}

package/dist/index.d.ts

@@ -74,6 +74,8 @@ export { Dialog } from './components/Dialog';
 export type { DialogProps } from './components/Dialog';
 export { Card } from './components/Card';
 export type { CardProps } from './components/Card';
+export { Banner } from './components/Banner';
+export type { BannerProps } from './components/Banner';
 export type { BaseProps, BaseAttributes } from './general_types';
 export { configure } from './jsx-runtime';
 export type { AntaIntrinsicElements } from './jsx-runtime';

package/dist/index.js

@@ -42,8 +42,10 @@ import { Tabs } from "./components/Tabs";
 import { TabPanel } from "./components/TabPanel";
 import { Dialog } from "./components/Dialog";
 import { Card } from "./components/Card";
+import { Banner } from "./components/Banner";
 import { configure } from "./jsx-runtime";
 export {
+  Banner,
   Button,
   ButtonCopy,
   Calendar,

package/dist/jsx-runtime.d.ts

@@ -41,7 +41,7 @@ export declare function useMemo<T>(factory: () => T, deps: unknown[]): T;
 export declare function jsx(type: ComponentType, props: Record<string, unknown> | null, key?: string | number): unknown;
 export declare function jsxs(type: ComponentType, props: Record<string, unknown> | null, key?: string | number): unknown;
 export { _Fragment as Fragment };
-import type { AProgressAttributes, ATextAttributes, ATitleAttributes, ATagAttributes, AExpanderAttributes, AIconAttributes, AButtonAttributes, ACopyAttributes, ACheckboxAttributes, ATooltipAttributes, AInputAttributes, AInputTimeAttributes, ACalendarAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, ATabsAttributes, ATabAttributes, ATabpanelAttributes, ADialogAttributes, ACardAttributes, BaseAttributes } from './general_types';
+import type { AProgressAttributes, ATextAttributes, ATitleAttributes, ATagAttributes, AExpanderAttributes, AIconAttributes, AButtonAttributes, ACopyAttributes, ACheckboxAttributes, ATooltipAttributes, AInputAttributes, AInputTimeAttributes, ACalendarAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, ATabsAttributes, ATabAttributes, ATabpanelAttributes, ADialogAttributes, ACardAttributes, ABannerAttributes, BaseAttributes } from './general_types';
 export declare namespace JSX {
     interface IntrinsicElements extends React.JSX.IntrinsicElements, AntaIntrinsicElements {
     }
@@ -94,4 +94,6 @@ export interface AntaIntrinsicElements {
     'a-tabpanel': ATabpanelAttributes;
     'a-dialog': ADialogAttributes;
     'a-card': ACardAttributes;
+    'a-banner': ABannerAttributes;
+    'a-banner-message': BaseAttributes;
 }

package/dist/toaster.d.ts

@@ -0,0 +1,99 @@
+/**
+ * Toaster store — the data behind `<Toaster>` / `Toaster.manager`.
+ *
+ * A pure, renderer-agnostic store: it holds a list of toast entries and notifies
+ * subscribers when it changes. It never touches the DOM. A mounted `<Toaster>`
+ * subscribes to it (via `useSyncExternalStore`) and renders each entry through
+ * the reconciler, so React/Preact owns every toast node — no imperative append,
+ * no coordinator, no node refs.
+ *
+ * A toast's content is a **render function** `(id) => …`. Return a string, a JSX
+ * node, or a real DOM `Node`; the `<Toaster>` renders a string / JSX through the
+ * reconciler and hands a DOM node to the `<a-toast>` element to slot. The `id`
+ * lets the content wire its own dismiss button (`() => manager.dismiss(id)`).
+ *
+ * Dismissal is two-phase so the exit animation plays: `dismiss(id)` marks the
+ * entry `leaving` (it stays rendered), the `<a-toast>` element animates out and
+ * fires `dismiss`, and only then is the entry removed. `remove` is the second
+ * phase, called by the wrapper on that event.
+ *
+ * SSR-safe: no `HTMLElement` reference and no top-level DOM access; `getServerSnapshot`
+ * returns an empty list, so nothing renders server-side.
+ */
+/** The placement zones, in the order their `<slot name>` appears in the toaster
+ *  shadow. Single source of truth: `a-toaster` builds its zones from this list, so
+ *  a placement can't drift between the type here and the element's slots. */
+export declare const TOAST_PLACEMENTS: readonly ["top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right"];
+/** Where a toast is anchored in the viewport. */
+export type ToastPlacement = (typeof TOAST_PLACEMENTS)[number];
+/** What a toast's render function may return: a string / JSX (rendered through
+ *  the reconciler) or a live DOM node (slotted by the element). */
+export type ToastContent = React.ReactNode | Node;
+/** A toast's content, as a function of its id (so content can dismiss itself). */
+export type ToastRender = (id: string) => ToastContent;
+/** Per-toast options for {@link Toaster.add}. */
+export interface ToastOptions {
+    /** Stable id. Reuse it to update a live toast in place (upsert) or to target
+     *  it with `dismiss` / `update`. Auto-generated when omitted. */
+    id?: string;
+    /** Which corner / edge to show it in.
+     *  @defaultValue 'bottom-right' */
+    placement?: ToastPlacement;
+    /** Auto-dismiss delay in ms. Empty or non-positive values fall back to the
+     *  default; pass `Infinity` to keep the toast until it's dismissed (sticky).
+     *  @defaultValue 5000 */
+    duration?: number;
+    /** Announce this toast to assistive tech via `aria-live` on the toast. Opt-in
+     *  per toast — omit for no announcement (the content may carry its own live
+     *  semantics, e.g. a `Banner`'s `role="status"`). `'assertive'` interrupts. */
+    politeness?: 'polite' | 'assertive';
+}
+/** One live toast, as the mounted `<Toaster>` reads it. */
+export interface ToastEntry {
+    id: string;
+    render: ToastRender;
+    placement: ToastPlacement;
+    duration?: number;
+    /** `aria-live` politeness for this toast, or undefined for no announcement. */
+    politeness?: 'polite' | 'assertive';
+    /** True once dismissal has been requested — the entry stays rendered so the
+     *  element can animate out, then `remove` drops it. */
+    leaving: boolean;
+    /** Bumped on every add/update for an existing id, so the element restarts its
+     *  timer (and the wrapper recomputes the content) on an in-place change. */
+    rev: number;
+}
+/** The toast controller returned by {@link createToaster}. */
+export interface Toaster {
+    /** Show `render()` as a toast; returns its id. Reusing an existing `id` replaces
+     *  that toast's content in place and restarts its timer; options omitted on the
+     *  upsert are kept from the live toast. */
+    add(render: ToastRender, opts?: ToastOptions): string;
+    /** Request dismissal: the toast animates out, then leaves. */
+    dismiss(id: string): void;
+    /** Replace a live toast's content in place. */
+    update(id: string, render: ToastRender): void;
+    /** Dismiss every toast. */
+    clear(): void;
+    /** Drop an entry now (no animation) — the wrapper calls this once the element
+     *  reports it finished animating out. Rarely needed directly. */
+    remove(id: string): void;
+    /** Subscribe to changes; returns an unsubscribe. For `useSyncExternalStore`. */
+    subscribe(onChange: () => void): () => void;
+    /** Current entries (a stable reference until the next change). */
+    getSnapshot(): readonly ToastEntry[];
+    /** Server snapshot — always empty (toasts don't render server-side). */
+    getServerSnapshot(): readonly ToastEntry[];
+}
+/**
+ * Create a toast store. Export one as your app singleton and drive it from
+ * anywhere; bind it to a mounted region with `<Toaster toaster={…} />`. Most apps
+ * use the built-in default, `Toaster.manager`, and a bare `<Toaster />`.
+ *
+ * @example
+ * ```ts
+ * export const toaster = createToaster()
+ * toaster.add(() => <Card>Saved</Card>, { placement: 'bottom-right' })
+ * ```
+ */
+export declare function createToaster(): Toaster;