Toast

<unmagic-toast-demo class="block space-y-4">
  <div class="flex flex-wrap gap-2">
    <%= button_tag "Show notification", type: "button", class: button_classes, data: { demo: "show" } %>
    <%= button_tag "Update to success", type: "button", class: button_classes, data: { demo: "update" } %>
    <%= button_tag "Dismiss latest", type: "button", class: button_classes, data: { demo: "dismiss" } %>
    <%= button_tag "Dismiss all", type: "button", class: button_classes, data: { demo: "all" } %>
    <%= button_tag "Async action", type: "button", class: button_classes, data: { demo: "async" } %>
    <%= button_tag "Action with an error", type: "button", class: button_classes, data: { demo: "error" } %>
  </div>
  <output class="block text-sm text-neutral-600 dark:text-neutral-400" aria-live="polite">Show a notification, then update or dismiss it.</output>
  <div class="relative min-h-64 rounded-lg border border-neutral-200 p-4 dark:border-neutral-800">
    <%= button_tag "Notify this panel", type: "button", class: button_classes, data: { demo: "scoped" } %>
    <%= flash_toasts({}, id: "toast_api_panel", scoped: true, position: :bottom_end) %>
  </div>
</unmagic-toast-demo>

<script type="module">
  import { toast } from "unmagic/components/toasts";

  if (!customElements.get("unmagic-toast-demo")) {
    customElements.define("unmagic-toast-demo", class extends HTMLElement {
      #latest;
      constructor() {
        super();
        this.addEventListener("click", (event) => {
          const action = event.target.closest("[data-demo]")?.dataset.demo;
          const output = this.querySelector("output");
          if (action === "show") {
            this.#latest = toast.show("Preparing your export…", { duration: 0, tone: "info" });
            output.textContent = "Notification shown. Update it when ready.";
          } else if (action === "update") {
            const updated = toast.update(this.#latest, { message: "Export ready.", tone: "good", duration: 5000 });
            output.textContent = updated ? "Updated. It closes after five seconds." : "Show a notification first.";
          } else if (action === "dismiss") {
            output.textContent = toast.dismiss(this.#latest) ? "Dismissed." : "No active notification.";
          } else if (action === "all") {
            output.textContent = `Dismissed ${toast.dismissAll()} notifications from the page mount.`;
          } else if (action === "scoped") {
            toast.show("Saved inside this panel.", { target: "toast_api_panel", duration: 0 });
          } else if (action === "async") {
            toast.show("Ready to archive this item?", {
              duration: 0, closeButton: false,
              actions: [
                { label: "Archive", onClick: async () => {
                  output.textContent = "Archiving…";
                  await new Promise(resolve => setTimeout(resolve, 1200));
                  if (this.isConnected) output.textContent = "Archived. The notification closed after completion.";
                } },
                { label: "Dismiss" },
              ],
            });
          } else if (action === "error") {
            const id = toast.show("Try saving this draft.", {
              duration: 0,
              actions: [{ label: "Save", onClick: async () => {
                await new Promise(resolve => setTimeout(resolve, 700));
                throw new Error("The demo server is unavailable.");
              } }],
            });
            const mount = document.getElementById("unmagic_toasts");
            const controller = new AbortController();
            mount.addEventListener("unmagic-toast:action-error", (event) => {
              if (event.detail.id !== id) return;
              toast.update(id, { message: event.detail.error.message, tone: "bad" });
            }, { signal: controller.signal });
            mount.addEventListener("unmagic-toast:dismiss", (event) => {
              if (event.detail.id === id) controller.abort();
            }, { signal: controller.signal });
          }
        });
      }
    });
  }
</script>

<unmagic-rails-toast-demo class="flex flex-wrap gap-2">
  <%# The response calls turbo_stream.toast(message, toast_id: a_unique_id, duration: 0). %>
  <%= button_to "Stream from Rails", stream_toast_path,
        params: { example: "javascript_rails", message: "Created by Rails. Dismiss me from JavaScript." }, class: button_classes %>
  <%= button_tag "Dismiss from JavaScript", type: "button", class: button_classes, data: { dismiss_rails: "" } %>
</unmagic-rails-toast-demo>
<script type="module">
  import { toast } from "unmagic/components/toasts";

  if (!customElements.get("unmagic-rails-toast-demo")) {
    customElements.define("unmagic-rails-toast-demo", class extends HTMLElement {
      #latest;
      #shown = (event) => {
        if (event.detail.id.startsWith("browser-export-")) this.#latest = event.detail.id;
      };
      constructor() {
        super();
        this.addEventListener("click", (event) => {
          if (event.target.closest("[data-dismiss-rails]")) toast.dismiss(this.#latest);
        });
      }
      connectedCallback() { document.addEventListener("unmagic-toast:show", this.#shown); }
      disconnectedCallback() { document.removeEventListener("unmagic-toast:show", this.#shown); }
    });
  }
</script>

<div class="flex flex-wrap gap-2">
  <%= button_to "Notice", flash_toast_path, params: { type: "notice", message: "Changes saved." },
        class: button_classes(:primary) %>
  <%= button_to "Alert", flash_toast_path, params: { type: "alert", message: "Couldn't save your changes." },
        class: button_classes %>
  <%= button_to "Warning", flash_toast_path, params: { type: "warning", message: "Your trial ends in 3 days." },
        class: button_classes %>
  <%= button_to "Info", flash_toast_path, params: { type: "info", message: "A new version is available." },
        class: button_classes %>
  <%= button_to "Long", flash_toast_path,
        params: { type: "notice", message: "Imported 1,204 contacts from contacts-export-2026-09-16-final-final.csv into the Sales pipeline." },
        class: button_classes %>
</div>

<div class="flex flex-wrap gap-2">
  <%= button_to "Stream a toast", stream_toast_path, params: { tone: "good", message: "Copied to your clipboard." },
        class: button_classes %>
  <%= button_to "Stream a bad toast", stream_toast_path, params: { tone: "bad", message: "Couldn't reach Slack." },
        class: button_classes(:danger) %>
</div>

<%# The stream response calls turbo_stream.toast(message, title: "All set", icon: :circle_check)
    and captures toast.actions with a data-unmagic-toast-dismiss button. %>
<%= button_to "Show title and action", stream_toast_path, params: { example: "content" }, class: button_classes %>

<%# Turbo Stream response (options contains the selected demo options): %>
<%= turbo_stream.toast("Your workspace is ready for the team.", title: "All set", icon: :circle_check, **options) do |toast| %>
  <% toast.actions do %>
    <%= button_tag "Got it", type: "button", class: button_classes(size: :small), data: { unmagic_toast_dismiss: "" } %>
  <% end %>
<% end %>

<%= button_to "Show image toast", stream_toast_path, params: { example: "image", tone: "info" },
      class: button_classes(:primary) %>

<%# Turbo Stream response (options contains the selected demo options): %>
<%= turbo_stream.toast(tone: :info, **options) do |toast| %>
  <% toast.body do %>
    <%= render partial: "unmagic/components/browser/examples/toast/image_content", formats: [ :html ] %>
  <% end %>
<% end %>

<%= button_to "Show upload toast", stream_toast_path, params: { example: "upload", tone: "info" },
      class: button_classes(:primary) %>

<%# Turbo Stream response (options contains the selected demo options): %>
<%= turbo_stream.toast(tone: :info, **options) do |toast| %>
  <% toast.body do %>
    <%= render partial: "unmagic/components/browser/examples/toast/upload_content", formats: [ :html ] %>
  <% end %>
<% end %>

<div class="flex flex-wrap gap-2">
  <% %w[good warn bad info neutral accent inverted].each do |tone| %>
    <%= button_to tone.capitalize, stream_toast_path,
      params: { tone: tone, message: "#{tone.capitalize}: your notification is here." }, class: button_classes %>
  <% end %>
</div>

<%# turbo_stream.toast("Placed independently.", position: :bottom_start) %>
<div class="grid grid-cols-3 gap-2">
  <% %w[top_start top top_end bottom_start bottom bottom_end].each do |position| %>
    <%= button_to position.humanize, stream_toast_path,
      params: { position: position, message: "Hello from #{position.humanize.downcase}." }, class: button_classes %>
  <% end %>
</div>

<%# turbo_stream.toast("Here until you dismiss it.", duration: 0) %>
<div class="flex flex-wrap gap-2">
  <%= button_to "Short · 2 seconds", stream_toast_path,
    params: { duration: 2000, message: "A quick update. This closes after two seconds." }, class: button_classes %>
  <%= button_to "Long · 10 seconds", stream_toast_path,
    params: { duration: 10000, message: "Take your time. This stays for ten seconds." }, class: button_classes %>
  <%= button_to "Sticky · dismiss manually", stream_toast_path,
    params: { duration: 0, message: "Here until you dismiss it.", tone: "info" }, class: button_classes %>
</div>

<%# turbo_stream.toast(message, width: :long) also accepts a positive pixel integer. %>
<div class="flex flex-wrap gap-2">
  <% { "Short · 384px" => "short", "Long · 560px" => "long", "Custom · 440px" => "440" }.each do |label, width| %>
    <%= button_to label, stream_toast_path,
      params: { width: width, message: "Your project has been saved. Everyone in the workspace can now see the latest changes." }, class: button_classes %>
  <% end %>
</div>

<%# In the response, toast.actions captures normal links and buttons.
    layout: :vertical places the actions below the message. %>
<div class="flex flex-wrap gap-2">
  <% %w[horizontal vertical].each do |layout| %>
    <%= button_to layout.capitalize, stream_toast_path,
      params: { example: "actions", layout: layout, tone: "neutral" }, class: button_classes %>
  <% end %>
</div>

<%# Turbo Stream response (options contains the selected demo options): %>
<%= turbo_stream.toast("The export is ready to review.", title: "Export complete", duration: 0, close_button: false,
      width: (options[:layout] == :vertical ? :short : :long), **options) do |toast| %>
  <% toast.actions do %>
    <%= link_to "View examples", component_path("toast", anchor: "toast_flash"), class: button_classes(size: :small), data: { unmagic_toast_dismiss: "" } %>
    <%= button_tag "Dismiss", type: "button", class: button_classes(size: :small), data: { unmagic_toast_dismiss: "" } %>
  <% end %>
<% end %>

<%# In the response: toast.leading { avatar "Alex Morgan", size: :small } %>
<%= button_to "Show avatar notification", stream_toast_path,
  params: { example: "leading", tone: "neutral" }, class: button_classes %>

<%# Turbo Stream response (options contains the selected demo options): %>
<%= turbo_stream.toast("Alex joined the workspace.", title: "A new teammate", **options) do |toast| %>
  <% toast.leading do %>
    <%= avatar "Alex Morgan", size: :small %>
  <% end %>
<% end %>

<%# The response captures toast.body, keeping the standard container and close button.
    It uses duration: 0, position: :bottom_start, width: :long and icon: false. %>
<%= button_to "Show announcement", stream_toast_path,
  params: { example: "custom" }, class: button_classes %>

<%# Turbo Stream response (options contains the selected demo options): %>
<%= turbo_stream.toast(tone: :neutral, position: :bottom_start, duration: 0, width: :long, icon: false) do |toast| %>
  <% toast.body do %>
    <div class="space-y-3">
      <div class="flex items-center gap-2">
        <%= badge "New", tone: :accent %>
        <strong>A little more room to create</strong>
      </div>
      <p>Shared workspaces now include project notes. Keep decisions and next steps together.</p>
      <%= link_to "Explore the components", components_path, class: button_classes(size: :small), data: { unmagic_toast_dismiss: "" } %>
    </div>
  <% end %>
<% end %>

<div class="relative min-h-80 rounded-lg border border-neutral-200 bg-neutral-50 p-4 dark:border-neutral-800 dark:bg-neutral-950">
  <%= button_to "Notify inside this panel", stream_toast_path,
    params: { example: "boundaries", message: "This notification stays inside its panel.", position: "bottom_end", duration: 0 },
    class: button_classes %>
  <%= flash_toasts({}, id: "toast_panel", scoped: true) %>
  <%# Stream with: turbo_stream.toast(message, target: "toast_panel", position: :bottom_end, duration: 0) %>
</div>

<%= dialog_button "Open a dialog", dialog: "toast_over_dialog", class: button_classes %>

<%= dialog_tag "toast_over_dialog", title: "A dialog" do %>
  <p>
    A toast streamed from in here shows above the dialog, not under its backdrop. It can't be
    hovered or dismissed until the dialog closes, but it still times out on its own.
  </p>
  <%= button_to "Stream a toast", stream_toast_path, params: { tone: "info", message: "Above the dialog." },
        class: button_classes(:primary) %>
<% end %>