<div class="toaster-demo-host" id="vanilla-toast-demo">
  <neo-button
    role="button"
    variant="primary"
    tabindex="0"
    id="vanilla-toast-btn"
  >Show toast</neo-button>
  <neo-toaster
    position="bottom-right"
    contained
    id="vanilla-toast-toaster"
  ></neo-toaster>
</div>
<script>
  (() => {
    const toaster = document.getElementById('vanilla-toast-toaster');
    const btn = document.getElementById('vanilla-toast-btn');
    let n = 0;
    btn.addEventListener('click', () => {
      toaster.show({
        title: 'Hello from vanilla JS',
        description: `Toast #${++n}`,
      });
    });
  })();

</script>

package examples

import "github.com/romshark/morpheus/neo"

templ ToasterVanilla() {
	<div class="toaster-demo-host" id="vanilla-toast-demo">
		@neo.ButtonAttrs(neo.ButtonOpts{Variant: neo.Set(neo.ButtonVariantPrimary)}, templ.Attributes{
			"id": "vanilla-toast-btn",
		}) {
			Show toast
		}
		@neo.ToasterAttrs(neo.ToasterOpts{
			Contained: neo.Set(true),
			Position:  neo.Set(neo.ToasterPositionBottomRight),
		}, templ.Attributes{"id": "vanilla-toast-toaster"})
	</div>
	<script>
		(() => {
			const toaster = document.getElementById('vanilla-toast-toaster');
			const btn = document.getElementById('vanilla-toast-btn');
			let n = 0;
			btn.addEventListener('click', () => {
				toaster.show({
					title: 'Hello from vanilla JS',
					description: `Toast #${++n}`,
				});
			});
		})();
	</script>
}

.toaster-demo-host {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	width: 100%;
	height: 100%;
	align-content: flex-start;
	align-items: flex-start;
	justify-content: flex-start;
}

.toaster-demo-host > neo-toaster[contained] {
	--neo-toaster-max-height: calc(
		100% -
			var(--neo-toaster-padding, 1rem) -
			var(--neo-toaster-padding, 1rem) +
			var(--neo-toast-shadow-bleed, 1.5rem) +
			var(--neo-toast-shadow-bleed, 1.5rem)
	);
}

<neo-button
  role="button"
  variant="primary"
  tabindex="0"
  data-on:click="@post(&#39;/toaster/app-shell/show&#39;)"
>Show toast</neo-button>
<neo-button
  role="button"
  variant="danger"
  tabindex="0"
  data-on:click="@post(&#39;/toaster/app-shell/dismiss&#39;)"
>Dismiss app toasts</neo-button>

package examples

import "github.com/romshark/morpheus/neo"

templ ToasterAppShell() {
	@neo.ButtonAttrs(neo.ButtonOpts{Variant: neo.Set(neo.ButtonVariantPrimary)}, templ.Attributes{
		"data-on:click": "@post('/toaster/app-shell/show')",
	}) {
		Show toast
	}
	@neo.ButtonAttrs(neo.ButtonOpts{Variant: neo.Set(neo.ButtonVariantDanger)}, templ.Attributes{
		"data-on:click": "@post('/toaster/app-shell/dismiss')",
	}) {
		Dismiss app toasts
	}
}

// Server handlers for the app-shell toaster examples. `/show` appends a
// toast to the page-level toaster's stack and `/dismiss` clears it. The
// async trio (`/loading`, `/resolve`, `/reject`) is the promise-style
// flow — first a loading toast with duration 0 so it doesn't
// auto-dismiss, then the resolution swaps the same id to a terminal
// variant.

import sim from "/static/datasim.js";

const escAttr = (str) =>
	String(str)
		.replace(/&/g, "&")
		.replace(/"/g, """)
		.replace(/</g, "&lt;");
const escText = (str) =>
	String(str)
		.replace(/&/g, "&amp;")
		.replace(/</g, "&lt;")
		.replace(/>/g, "&gt;");

// Append directly to the toaster host; <neo-toast> children project
// through the shadow stack via the host's <slot>.
const STACK_SELECTOR = "#app-toaster";

const toastHTML = ({ id, variant = "default", title, description = "", duration = "4000" }) => [
	`<neo-toast id="${escAttr(id)}" variant="${escAttr(variant)}" duration="${escAttr(duration)}">`,
	`<span slot="title">${escText(title)}</span>`,
	description ? `<span slot="description">${escText(description)}</span>` : "",
	`</neo-toast>`,
].join("");

sim.post("/toaster/app-shell/show", async (_ctx, sse) => {
	sse.patchElements(toastHTML({
		id: "app-shell-live-" + Date.now(),
		title: "Event has been created",
	}), { selector: STACK_SELECTOR, mode: "append" });
});

sim.post("/toaster/app-shell/dismiss", async (_ctx, sse) => {
	sse.executeScript(`document.getElementById("app-toaster")?.dismiss()`);
});

const patchAsyncToast = (sse, state) => {
	sse.patchElements(toastHTML({
		id: "app-shell-async-demo",
		duration: state.variant === "loading" ? "0" : "4000",
		...state,
	}), { selector: STACK_SELECTOR, mode: "append" });
};

sim.post("/toaster/app-shell/loading", async (_ctx, sse) => {
	patchAsyncToast(sse, {
		variant: "loading",
		title: "Saving...",
		description: "Waiting for the server.",
	});
});

sim.post("/toaster/app-shell/resolve", async (_ctx, sse) => {
	patchAsyncToast(sse, {
		variant: "loading",
		title: "Saving...",
		description: "Waiting for the server.",
	});
	sse.patchElements(toastHTML({
		id: "app-shell-async-demo",
		variant: "success",
		title: "Profile saved",
		description: "Server accepted the update.",
		duration: "4000",
	}), { selector: STACK_SELECTOR, mode: "append" });
});

sim.post("/toaster/app-shell/reject", async (_ctx, sse) => {
	patchAsyncToast(sse, {
		variant: "loading",
		title: "Saving...",
		description: "Waiting for the server.",
	});
	sse.patchElements(toastHTML({
		id: "app-shell-async-demo",
		variant: "error",
		title: "Save failed",
		description: "The server rejected the update.",
		duration: "6000",
	}), { selector: STACK_SELECTOR, mode: "append" });
});

<neo-button
  role="button"
  tabindex="0"
  data-on:click="@post(&#39;/toast/append&#39;, { requestCancellation: &#39;disabled&#39; })"
>Append toast</neo-button>
<neo-toaster position="bottom-right" contained id="my-toaster"></neo-toaster>

package examples

import "github.com/romshark/morpheus/neo"

templ ToasterPatchAppend() {
	@neo.ButtonAttrs(neo.ButtonOpts{}, templ.Attributes{
		"data-on:click": "@post('/toast/append', { requestCancellation: 'disabled' })",
	}) {
		Append toast
	}
	@neo.ToasterAttrs(neo.ToasterOpts{
		Contained: neo.Set(true),
		Position:  neo.Set(neo.ToasterPositionBottomRight),
	}, templ.Attributes{"id": "my-toaster"})
}

// Server handler for "Patch — append a toast". The button @posts here;
// the simulator streams an SSE patch-elements event targeting the
// toaster host with `mode: "append"`, dropping a freshly-rendered
// <neo-toast> into the stack. Datastar's morph preserves existing
// toasts; the toaster's MutationObserver picks up the new card and
// animates it in. Auto-dismisses after 3 s per its own `duration`.

import sim from "/static/datasim.js";

const STACK_SELECTOR = "#demo-toaster-append";

sim.post("/toaster/patch-append/", async (_ctx, sse) => {
	sse.patchElements(
		`<neo-toast variant="success" duration="3000">` +
		`<span slot="title">Patched in</span>` +
		`<span slot="description">Inserted via DOM mutation.</span>` +
		`</neo-toast>`,
		{ selector: STACK_SELECTOR, mode: "append" },
	);
});

<neo-button
  role="button"
  tabindex="0"
  data-on:click="@post(&#39;/toast/pin&#39;, { requestCancellation: &#39;disabled&#39; })"
>Pin one</neo-button>
<neo-button
  role="button"
  variant="primary"
  tabindex="0"
  data-on:click="@post(&#39;/toast/replace&#39;, { requestCancellation: &#39;disabled&#39; })"
>Replace all</neo-button>
<neo-toaster position="bottom-right" contained id="my-toaster"></neo-toaster>

package examples

import "github.com/romshark/morpheus/neo"

templ ToasterPatchReplace() {
	@neo.ButtonAttrs(neo.ButtonOpts{}, templ.Attributes{
		"data-on:click": "@post('/toast/pin', { requestCancellation: 'disabled' })",
	}) {
		Pin one
	}
	@neo.ButtonAttrs(neo.ButtonOpts{Variant: neo.Set(neo.ButtonVariantPrimary)}, templ.Attributes{
		"data-on:click": "@post('/toast/replace', { requestCancellation: 'disabled' })",
	}) {
		Replace all
	}
	@neo.ToasterAttrs(neo.ToasterOpts{
		Contained: neo.Set(true),
		Position:  neo.Set(neo.ToasterPositionBottomRight),
	}, templ.Attributes{"id": "my-toaster"})
}

// Server handlers for "Patch — replace all". Two endpoints:
//   - /pin/     appends a single pinned toast (mode: "append").
//   - /replace/ replaces every toast with a fresh batch by morphing
//               the host's inner HTML (mode: "inner"). The toaster's
//               MutationObserver fires on each removal, running each
//               outgoing toast's leave animation, and animates the
//               newcomers in.

import sim from "/static/datasim.js";

const STACK_SELECTOR = "#demo-toaster-replace";

sim.post("/toaster/patch-replace/pin/", async (_ctx, sse) => {
	sse.patchElements(
		`<neo-toast variant="info">` +
		`<span slot="title">Pinned</span>` +
		`</neo-toast>`,
		{ selector: STACK_SELECTOR, mode: "append" },
	);
});

const batchToast = (title) =>
	`<neo-toast variant="warning">` +
	`<span slot="title">${title}</span>` +
	`</neo-toast>`;

sim.post("/toaster/patch-replace/replace/", async (_ctx, sse) => {
	sse.patchElements(
		batchToast("Fresh batch — A") + batchToast("Fresh batch — B"),
		{ selector: STACK_SELECTOR, mode: "inner" },
	);
});

<neo-button
  role="button"
  variant="primary"
  tabindex="0"
  data-on:click="@post(&#39;/toast/update-title&#39;, { requestCancellation: &#39;disabled&#39; })"
>Update title</neo-button>
<neo-toaster position="bottom-right" contained stack="1" id="my-toaster">
  <neo-toast>
    <span id="job-42-title" slot="title">Original title</span>
    <span slot="description">Click "Update title" to morph this label.</span>
  </neo-toast>
</neo-toaster>

package examples

import "github.com/romshark/morpheus/neo"

templ ToasterPatchUpdate() {
	@neo.ButtonAttrs(neo.ButtonOpts{Variant: neo.Set(neo.ButtonVariantPrimary)}, templ.Attributes{
		"data-on:click": "@post('/toast/update-title', { requestCancellation: 'disabled' })",
	}) {
		Update title
	}
	@neo.ToasterAttrs(neo.ToasterOpts{
		Contained: neo.Set(true),
		Position:  neo.Set(neo.ToasterPositionBottomRight),
		Stack:     neo.Set(1),
	}, templ.Attributes{"id": "my-toaster"}) {
		@neo.Toast(neo.ToastOpts{}) {
			<span id="job-42-title" slot="title">Original title</span>
			<span slot="description">Click "Update title" to morph this label.</span>
		}
	}
}

// Server handler for the "Patch — update one toast" example. The
// toaster ships an SSR'd toast whose title carries an id
// (`#patch-update-toast-title`); on click, the host @posts here and we
// stream an SSE patch-elements event with the same id. Datastar
// morphs the title's text in place — the toast element keeps its
// identity (and its dismissal timer), only the inner text changes.

import sim from "/static/datasim.js";

sim.post("/toaster/patch-update/", async (_ctx, sse) => {
	const title = `Updated at ${new Date().toLocaleTimeString()}`;
	sse.patchElements(
		`<span id="patch-update-toast-title" slot="title">${title}</span>`,
	);
});

<neo-button
  role="button"
  tabindex="0"
  data-on:click="@post(&#39;/api/save&#39;)"
>Create</neo-button>
<neo-button
  role="button"
  variant="primary"
  tabindex="0"
  data-on:click="@post(&#39;/api/save/resolve&#39;, { requestCancellation: &#39;disabled&#39; })"
>Resolve</neo-button>
<neo-button
  role="button"
  variant="danger"
  tabindex="0"
  data-on:click="@post(&#39;/api/save/reject&#39;, { requestCancellation: &#39;disabled&#39; })"
>Reject</neo-button>

package examples

import "github.com/romshark/morpheus/neo"

templ ToasterLoadingAsync() {
	@neo.ButtonAttrs(neo.ButtonOpts{}, templ.Attributes{
		"data-on:click": "@post('/api/save')",
	}) {
		Create
	}
	@neo.ButtonAttrs(neo.ButtonOpts{Variant: neo.Set(neo.ButtonVariantPrimary)}, templ.Attributes{
		"data-on:click": "@post('/api/save/resolve', { requestCancellation: 'disabled' })",
	}) {
		Resolve
	}
	@neo.ButtonAttrs(neo.ButtonOpts{Variant: neo.Set(neo.ButtonVariantDanger)}, templ.Attributes{
		"data-on:click": "@post('/api/save/reject', { requestCancellation: 'disabled' })",
	}) {
		Reject
	}
}

// Server handlers for the app-shell toaster examples. `/show` appends a
// toast to the page-level toaster's stack and `/dismiss` clears it. The
// async trio (`/loading`, `/resolve`, `/reject`) is the promise-style
// flow — first a loading toast with duration 0 so it doesn't
// auto-dismiss, then the resolution swaps the same id to a terminal
// variant.

import sim from "/static/datasim.js";

const escAttr = (str) =>
	String(str)
		.replace(/&/g, "&")
		.replace(/"/g, """)
		.replace(/</g, "&lt;");
const escText = (str) =>
	String(str)
		.replace(/&/g, "&amp;")
		.replace(/</g, "&lt;")
		.replace(/>/g, "&gt;");

// Append directly to the toaster host; <neo-toast> children project
// through the shadow stack via the host's <slot>.
const STACK_SELECTOR = "#app-toaster";

const toastHTML = ({ id, variant = "default", title, description = "", duration = "4000" }) => [
	`<neo-toast id="${escAttr(id)}" variant="${escAttr(variant)}" duration="${escAttr(duration)}">`,
	`<span slot="title">${escText(title)}</span>`,
	description ? `<span slot="description">${escText(description)}</span>` : "",
	`</neo-toast>`,
].join("");

sim.post("/toaster/app-shell/show", async (_ctx, sse) => {
	sse.patchElements(toastHTML({
		id: "app-shell-live-" + Date.now(),
		title: "Event has been created",
	}), { selector: STACK_SELECTOR, mode: "append" });
});

sim.post("/toaster/app-shell/dismiss", async (_ctx, sse) => {
	sse.executeScript(`document.getElementById("app-toaster")?.dismiss()`);
});

const patchAsyncToast = (sse, state) => {
	sse.patchElements(toastHTML({
		id: "app-shell-async-demo",
		duration: state.variant === "loading" ? "0" : "4000",
		...state,
	}), { selector: STACK_SELECTOR, mode: "append" });
};

sim.post("/toaster/app-shell/loading", async (_ctx, sse) => {
	patchAsyncToast(sse, {
		variant: "loading",
		title: "Saving...",
		description: "Waiting for the server.",
	});
});

sim.post("/toaster/app-shell/resolve", async (_ctx, sse) => {
	patchAsyncToast(sse, {
		variant: "loading",
		title: "Saving...",
		description: "Waiting for the server.",
	});
	sse.patchElements(toastHTML({
		id: "app-shell-async-demo",
		variant: "success",
		title: "Profile saved",
		description: "Server accepted the update.",
		duration: "4000",
	}), { selector: STACK_SELECTOR, mode: "append" });
});

sim.post("/toaster/app-shell/reject", async (_ctx, sse) => {
	patchAsyncToast(sse, {
		variant: "loading",
		title: "Saving...",
		description: "Waiting for the server.",
	});
	sse.patchElements(toastHTML({
		id: "app-shell-async-demo",
		variant: "error",
		title: "Save failed",
		description: "The server rejected the update.",
		duration: "6000",
	}), { selector: STACK_SELECTOR, mode: "append" });
});

<neo-button
  role="button"
  variant="danger"
  tabindex="0"
  data-on:click="@post(&#39;/archive&#39;, { requestCancellation: &#39;disabled&#39; })"
>Archive</neo-button>
<neo-toaster position="bottom-right" contained id="my-toaster"></neo-toaster>

package examples

import "github.com/romshark/morpheus/neo"

templ ToasterActionButton() {
	@neo.ButtonAttrs(neo.ButtonOpts{Variant: neo.Set(neo.ButtonVariantDanger)}, templ.Attributes{
		"data-on:click": "@post('/archive', { requestCancellation: 'disabled' })",
	}) {
		Archive
	}
	@neo.ToasterAttrs(neo.ToasterOpts{
		Contained: neo.Set(true),
		Position:  neo.Set(neo.ToasterPositionBottomRight),
	}, templ.Attributes{"id": "my-toaster"})
}

// Server handlers for the "Action toast (undo)" example. The Archive
// button @posts here; the handler appends a warning toast carrying an
// in-toast Undo button (slot="action") whose own @post URL is the
// toast's id. The undo handler removes the original toast and replaces
// it with a success confirmation. Missing `duration` keeps the warning
// visible until the user reacts.

import sim from "/static/datasim.js";

const STACK_SELECTOR = "#demo-toaster-action";

let counter = 0;

sim.post("/toaster/action/archive", async (_ctx, sse) => {
	const toastId = "notif-archived-" + (++counter);
	sse.patchElements([
		`<neo-toast id="${toastId}" variant="warning">`,
		`<span slot="title">Project archived</span>`,
		`<span slot="description">Files moved to the archive.</span>`,
		`<neo-button variant="secondary" slot="action" data-on:click="@post('/toaster/action/undo/${toastId}', { requestCancellation: 'disabled' })">Undo</neo-button>`,
		`</neo-toast>`,
	].join(""), { selector: STACK_SELECTOR, mode: "append" });
});

sim.post("/toaster/action/undo/:id", async (ctx, sse) => {
	const toastId = ctx.params.id;
	sse.removeElements("#" + toastId);
	sse.patchElements([
		`<neo-toast id="${toastId}-undone" variant="success" duration="3000">`,
		`<span slot="title">Archive undone</span>`,
		`<span slot="description">Project files are active again.</span>`,
		`</neo-toast>`,
	].join(""), { selector: STACK_SELECTOR, mode: "append" });
});

<neo-button
  role="button"
  variant="primary"
  tabindex="0"
  data-on:click="NeoToast.success(&#39;Profile saved&#39;)"
>Success</neo-button>
<neo-button
  role="button"
  variant="danger"
  tabindex="0"
  data-on:click="NeoToast.error(&#39;Network error&#39;, { description: &#39;Server unreachable.&#39; })"
>Error</neo-button>
<neo-button
  role="button"
  variant="secondary"
  tabindex="0"
  data-on:click="NeoToast.warning(&#39;Low disk space&#39;, { description: &#39;Less than 5% free.&#39; })"
>Warning</neo-button>
<neo-button
  role="button"
  tabindex="0"
  data-on:click="NeoToast.info(&#39;Update available&#39;, { description: &#39;Restart to apply.&#39; })"
>Info</neo-button>

package examples

import "github.com/romshark/morpheus/neo"

templ ToasterVariants() {
	@neo.ButtonAttrs(neo.ButtonOpts{Variant: neo.Set(neo.ButtonVariantPrimary)}, templ.Attributes{
		"data-on:click": "NeoToast.success('Profile saved')",
	}) {
		Success
	}
	@neo.ButtonAttrs(neo.ButtonOpts{Variant: neo.Set(neo.ButtonVariantDanger)}, templ.Attributes{
		"data-on:click": "NeoToast.error('Network error', { description: 'Server unreachable.' })",
	}) {
		Error
	}
	@neo.ButtonAttrs(neo.ButtonOpts{Variant: neo.Set(neo.ButtonVariantSecondary)}, templ.Attributes{
		"data-on:click": "NeoToast.warning('Low disk space', { description: 'Less than 5% free.' })",
	}) {
		Warning
	}
	@neo.ButtonAttrs(neo.ButtonOpts{}, templ.Attributes{
		"data-on:click": "NeoToast.info('Update available', { description: 'Restart to apply.' })",
	}) {
		Info
	}
}

<neo-button
  role="button"
  tabindex="0"
  data-on:click="NeoToast.show({ title: &#39;Event created&#39;, description: &#39;Sunday, December 03, 2023 at 9:00 AM&#39; })"
>Show</neo-button>

package examples

import "github.com/romshark/morpheus/neo"

templ ToasterTitleDesc() {
	@neo.ButtonAttrs(neo.ButtonOpts{}, templ.Attributes{
		"data-on:click": "NeoToast.show({ title: 'Event created', description: 'Sunday, December 03, 2023 at 9:00 AM' })",
	}) {
		Show
	}
}

<neo-button
  role="button"
  tabindex="0"
  data-on:click="for (let i = 1; i &lt;= 4; i++) setTimeout(() =&gt; NeoToast.show({ title: `Notification ${i}` }), i * 150)"
>Stack four</neo-button>
<neo-button
  role="button"
  variant="danger"
  tabindex="0"
  data-on:click="NeoToast.dismiss()"
>Dismiss all</neo-button>

package examples

import "github.com/romshark/morpheus/neo"

templ ToasterStackDismiss() {
	@neo.ButtonAttrs(neo.ButtonOpts{}, templ.Attributes{
		"data-on:click": "for (let i = 1; i <= 4; i++) setTimeout(() => NeoToast.show({ title: `Notification ${i}` }), i * 150)",
	}) {
		Stack four
	}
	@neo.ButtonAttrs(neo.ButtonOpts{Variant: neo.Set(neo.ButtonVariantDanger)}, templ.Attributes{
		"data-on:click": "NeoToast.dismiss()",
	}) {
		Dismiss all
	}
}