basecoat-cli 0.1.0

package/dist/assets/jinja/toast.html.jinja

@@ -0,0 +1,198 @@
+{#
+  Renders a toaster container and individual toast messages.
+  Can render the initial container or be used with htmx OOB swaps to add toasts dynamically.
+
+  @param id {string} [optional] [default="toaster"] - Unique identifier for the toaster container.
+  @param toasts {array} [optional] - An array of toast objects to render initially. See the <code>toast()</code> macro for more details.
+  @param main_attrs {object} [optional] - Additional HTML attributes for the main toaster container div.
+  @param is_fragment {boolean} [optional] [default=False] - If True, renders only the toast elements with hx-swap-oob="beforeend", suitable for htmx responses. Skips script and template inclusion.
+#}
+{% macro toaster(
+  id="toaster",
+  toasts=[],
+  main_attrs=None,
+  is_fragment=False
+) %}
+<div
+  id="{{ id }}"
+  class="toaster"
+  {% for key, value in main_attrs.items() %}
+    {{ key }}="{{ value }}"
+  {% endfor %}
+  {% if is_fragment %}hx-swap-oob="beforeend"{% endif %}
+>
+{% for item in toasts.items() %}
+  {{ toast(
+    category=item.category,
+    title=item.title,
+    description=item.description,
+    action=item.action,
+    cancel=item.cancel
+  ) }}
+{% endfor %}
+</div>
+
+{% if not is_fragment %}
+<template id="toast-template">
+  <div
+    class="toast"
+    role="status"
+    aria-atomic="true"
+    x-bind="$toastBindings"
+  >
+    <div class="toast-content">
+      <div class="flex items-center justify-between gap-x-3 p-4 [&>svg]:size-4 [&>svg]:shrink-0 [&>[role=img]]:size-4 [&>[role=img]]:shrink-0 [&>[role=img]>svg]:size-4">
+        <template x-if="config.icon">
+          <span aria-hidden="true" role="img" x-html="config.icon"></span>
+        </template>
+        <template x-if="!config.icon && config.category === 'success'">
+          {{ toast_icons.success | safe }}
+        </template>
+        <template x-if="!config.icon && config.category === 'error'">
+          {{ toast_icons.error | safe }}
+        </template>
+        <template x-if="!config.icon && config.category === 'info'">
+          {{ toast_icons.info | safe }}
+        </template>
+        <template x-if="!config.icon && config.category === 'warning'">
+          {{ toast_icons.warning | safe }}
+        </template>
+        <section class="flex-1 flex flex-col gap-0.5 items-start">
+          <template x-if="config.title">
+            <h2 class="font-medium" x-text="config.title"></h2>
+          </template>
+          <template x-if="config.description">
+            <p class="text-muted-foreground" x-text="config.description"></p>
+          </template>
+        </section>
+        <template x-if="config.action || config.cancel">
+          <footer class="flex flex-col gap-1 self-start">
+            <template x-if="config.action?.click">
+              <button
+                type="button"
+                class="btn h-6 text-xs px-2.5 rounded-sm"
+                @click="executeAction(config.action.click)"
+                x-text="config.action.label"
+              ></button>
+            </template>
+            <template x-if="config.action?.url">
+              <a
+                :href="config.action.url"
+                class="btn h-6 text-xs px-2.5 rounded-sm"
+                x-text="config.action.label"
+              ></a>
+            </template>
+            <template x-if="config.cancel?.click">
+              <button
+                type="button"
+                class="btn-outline h-6 text-xs px-2.5 rounded-sm"
+                @click="executeAction(config.cancel.click)"
+                x-text="config.cancel.label"
+              ></button>
+            </template>
+            <template x-if="config.cancel?.url">
+              <a
+                :href="config.cancel.url"
+                class="btn-outline h-6 text-xs px-2.5 rounded-sm"
+                x-text="config.cancel.label"
+              ></a>
+            </template>
+          </footer>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+{% endif %}
+{% endmacro %}
+
+{#
+  Renders a single toast message.
+
+  @param category {string} [optional] [default="success"] - Type of toast ('success', 'error', 'info', 'warning'). Determines icon and ARIA role.
+  @param title {string} [optional] - The main title text of the toast.
+  @param description {string} [optional] - The secondary description text.
+  @param action {object} [optional] - Defines an action button.
+    - label {string}: Button text.
+    - click {string}: JavaScript code to execute on click (e.g., '$dispatch(\'custom-event\')').
+    - url {string}: URL for an anchor link button.
+  @param cancel {object} [optional] - Defines a cancel/dismiss button (similar structure to action).
+    - label {string}: Button text.
+    - click {string}: JavaScript code to execute on click (e.g., '$dispatch(\'custom-event\')').
+    - url {string}: URL for an anchor link button.
+#}
+{% macro toast(
+  category="success",
+  title="",
+  description="",
+  action=None,
+  cancel=None
+) %}
+<div
+  class="toast"
+  role="{{ 'alert' if category == 'error' else 'status' }}"
+  aria-atomic="true"
+  aria-hidden="false"
+  {% if category %}data-category="{{ category }}"{% endif %}
+  x-data="toast({
+    category: '{{ category }}',
+    duration: {{ duration or 'null' }}
+  })"
+  x-bind="$toastBindings"
+>
+  <div class="toast-content">
+    <div class="flex items-center justify-between gap-x-3 p-4 [&>svg]:size-4 [&>svg]:shrink-0 [&>[role=img]]:size-4 [&>[role=img]]:shrink-0 [&>[role=img]>svg]:size-4">
+      {% if category in ["error", "success", "info", "warning"] %}
+        {{ toast_icons[category] | safe }}
+      {% endif %}
+      <section class="flex-1 flex flex-col gap-0.5 items-start">
+        {% if title %}
+          <h2 class="font-medium">{{ title }}</h2>
+        {% endif %}
+        {% if description %}
+          <p class="text-muted-foreground">{{ description }}</p>
+        {% endif %}
+      </section>
+      {% if action or cancel %}
+        <footer class="flex flex-col gap-1 self-start">
+          {% if action %}
+            {% if action.click %}
+              <button
+                type="button"
+                class="btn h-6 text-xs px-2.5 rounded-sm"
+                @click="{{ action.click }}"
+              >{{ action.label }}</button>
+            {% elif action.url %}
+              <a
+                href="{{ action.url }}"
+                class="btn h-6 text-xs px-2.5 rounded-sm"
+              >{{ action.label }}</a>
+            {% endif %}
+          {% endif %}
+          {% if cancel %}
+            {% if cancel.click %}
+              <button
+                type="button"
+                class="btn-outline h-6 text-xs px-2.5 rounded-sm"
+                @click="{{ cancel.click }}"
+              >{{ cancel.label }}</button>
+            {% elif cancel.url %}
+              <a
+                href="{{ cancel.url }}"
+                class="btn-outline h-6 text-xs px-2.5 rounded-sm"
+              >{{ toast.cancel.label }}</a>
+            {% endif %}
+          {% endif %}
+        </footer>
+      {% endif %}
+    </div>
+  </div>
+</div>
+{% endmacro %}
+
+{% set toast_icons = {
+  'success': '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check-icon lucide-circle-check"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>',
+  'error': '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-x-icon lucide-circle-x"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>',
+  'info': '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info-icon lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>',
+  'warning': '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert-icon lucide-triangle-alert"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>'
+} %}

package/dist/assets/js/dialog.js

@@ -0,0 +1,54 @@
+window.basecoat = window.basecoat || {};
+window.basecoat.registerDialog = function(Alpine) {
+  if (Alpine.components && Alpine.components.dialog) return;
+
+  Alpine.data('dialog', (initialOpen = false, initialCloseOnOverlayClick = true) => ({
+    id: null,
+    open: false,
+    closeOnOverlayClick: true,
+
+    init() {
+      this.id = this.$el.id;
+      if (!this.id) {
+        console.warn('Dialog component initialized without an `id`. This may cause issues with event targeting and accessibility.');
+      }
+      this.open = initialOpen;
+      this.closeOnOverlayClick = initialCloseOnOverlayClick;
+    },
+    show() {
+      if (!this.open) {
+        this.open = true;
+        this.$nextTick(() => {
+          this.$el.dispatchEvent(new CustomEvent('dialog:opened', { bubbles: true, detail: { id: this.id } }));
+          setTimeout(() => {
+            const focusTarget = this.$refs.focusOnOpen || this.$el.querySelector('[role="dialog"]');
+            if (focusTarget) focusTarget.focus();
+          }, 50);
+        });
+      }
+    },
+    hide() {
+      if (this.open) {
+        this.open = false;
+        this.$nextTick(() => {
+          this.$el.dispatchEvent(new CustomEvent('dialog:closed', { bubbles: true, detail: { id: this.id } }));
+        });
+      }
+    },
+
+    $main: {
+      '@dialog:open.window'(e) { if (e.detail && e.detail.id === this.id) this.show() },
+      '@dialog:close.window'(e) { if (e.detail && e.detail.id === this.id) this.hide() },
+      '@keydown.escape.window'() { this.open && this.hide() },
+    },
+    $trigger: {
+      '@click'() { this.show() },
+      ':aria-expanded'() { return this.open }
+    },
+    $content: {
+      ':inert'() { return !this.open },
+      '@click.self'() { if (this.closeOnOverlayClick) this.hide() },
+      'x-cloak': ''
+    }
+  }));
+};

package/dist/assets/js/dropdown-menu.js

@@ -0,0 +1,91 @@
+window.basecoat = window.basecoat || {};
+window.basecoat.registerDropdownMenu = function(Alpine) {
+  if (Alpine.components && Alpine.components.dropdownMenu) return;
+
+  Alpine.data('dropdownMenu', () => ({
+    open: false,
+    focusedIndex: null,
+    menuItems: [],
+
+    init() {
+      this.$nextTick(() => {
+        this.menuItems = Array.from(this.$el.querySelectorAll('[role=menuitem]:not([disabled]),[role=menuitemcheckbox]:not([disabled]),[role=menuitemradio]:not([disabled])'));
+      });
+    },
+    focusMenuitem() {
+      if (this.menuItems.length === 0) return;
+
+      if (this.focusedIndex >= this.menuItems.length) {
+        this.focusedIndex = this.menuItems.length - 1;
+      } else if (this.focusedIndex < 0 || this.focusedIndex === null) {
+        this.focusedIndex = 0;
+      }
+      this.menuItems.forEach(item => item.blur());
+      this.menuItems[this.focusedIndex].focus();
+    },
+    moveMenuitemFocus(delta) {
+      if (this.menuItems.length === 0) return;
+
+      let wasOpen = this.open;
+      if (!this.open) { 
+        this.open = true;
+        this.focusedIndex = 0;
+      } else {
+        this.focusedIndex = this.focusedIndex === null
+          ? 0
+          : this.focusedIndex + delta;
+      }
+
+      if (wasOpen) {
+        this.focusMenuitem();
+      } else {
+        setTimeout(() => this.focusMenuitem(), 50);
+      }
+    },
+    handleMenuitemClick(event) {
+      const menuitem = event.target.closest('[role=menuitem],[role=menuitemcheckbox],[role=menuitemradio]');
+      if (menuitem && menuitem.getAttribute('aria-disabled') !== 'true' && !menuitem.disabled) {
+        this.$nextTick(() => {
+          this.$refs.trigger.focus();
+          this.open = false;
+        });
+      }
+    },
+    handleMenuitemMousemove(event) {
+      const menuitem = event.target.closest('[role=menuitem],[role=menuitemcheckbox],[role=menuitemradio]');
+      if (menuitem && menuitem.getAttribute('aria-disabled') !== 'true' && !menuitem.disabled) {
+        this.focusedIndex = this.menuItems.indexOf(menuitem);
+        this.focusMenuitem();
+      }
+    },
+
+    $trigger: {
+      '@click'() { this.open = !this.open },
+      '@keydown.escape.prevent'() {
+        this.open = false;
+        this.$refs.trigger.focus();
+      },
+      '@keydown.down.prevent'() { this.moveMenuitemFocus(+1); },
+      '@keydown.up.prevent'() { this.moveMenuitemFocus(-1); },
+      '@keydown.home.prevent'() { this.focusMenuitem(0) },
+      '@keydown.end.prevent'() { this.focusMenuitem(this.menuItems.length - 1) },
+      '@keydown.enter.prevent'() { this.open = !this.open },
+      ':aria-expanded'() { return this.open },
+      'x-ref': 'trigger'
+    },
+    $content: {
+      '@click'(e) { this.handleMenuitemClick(e) },
+      '@keydown.escape.prevent'() {
+        this.open = false;
+        this.$refs.trigger.focus();
+      },
+      '@keydown.down.prevent'() { this.moveMenuitemFocus(+1); },
+      '@keydown.up.prevent'() { this.moveMenuitemFocus(-1); },
+      '@keydown.home.prevent'() { this.focusMenuitem(0) },
+      '@keydown.end.prevent'() { this.focusMenuitem(this.menuItems.length - 1) },
+      '@mouseover'(e) { this.handleMenuitemMousemove(e) },
+      ':aria-hidden'() { return !this.open },
+      'x-cloak': ''
+    },
+  }));
+};

package/dist/assets/js/popover.js

@@ -0,0 +1,26 @@
+window.basecoat = window.basecoat || {};
+window.basecoat.registerPopover = function(Alpine) {
+  if (Alpine.components && Alpine.components.popover) return;
+
+  Alpine.data('popover', () => ({
+    open: false,
+
+    $trigger: {
+      '@click'() { this.open = !this.open },
+      '@keydown.escape.prevent'() {
+        this.open = false;
+        this.$refs.trigger.focus();
+      },
+      ':aria-expanded'() { return this.open },
+      'x-ref': 'trigger'
+    },
+    $content: {
+      '@keydown.escape.prevent'() {
+        this.open = false;
+        this.$refs.trigger.focus();
+      },
+      ':aria-hidden'() { return !this.open },
+      'x-cloak': ''
+    },
+  }));
+};

package/dist/assets/js/select.js

@@ -0,0 +1,150 @@
+window.basecoat = window.basecoat || {};
+window.basecoat.registerSelect = function(Alpine) {
+  if (Alpine.components && Alpine.components.select) return;
+  
+  Alpine.data('select', (name = null, initialValue = null) => ({
+    open: false,
+    name: null,
+    options: [],
+    disabledOptions: [],
+    focusedIndex: null,
+    selectedLabel: null,
+    selectedValue: null,
+    query: '',
+    
+    init() {
+      this.$nextTick(() => {
+        if (name) this.name = name;
+        this.options = Array.from(this.$el.querySelectorAll('[role=option]:not([aria-disabled])'));
+        this.disabledOptions = Array.from(this.$el.querySelectorAll('[role=option][aria-disabled=true]'));
+        if (this.options.length === 0) return;
+        if (initialValue) {
+          const option = this.options.find(opt => opt.getAttribute('data-value') === initialValue);
+          this.selectOption(option, false);
+          this.focusedIndex = this.options.indexOf(option);
+        } else {
+          this.selectOption(this.options[0], false);
+        }
+      });
+    },
+    focusOption() {
+      if (this.options.length === 0) return;
+
+      if (this.focusedIndex >= this.options.length) {
+        this.focusedIndex = this.options.length - 1;
+      } else if (this.focusedIndex < 0 || this.focusedIndex === null) {
+        this.focusedIndex = 0;
+      }
+      this.options.forEach(opt => opt.removeAttribute('data-focus'));
+      const option = this.options[this.focusedIndex];
+      option.setAttribute('data-focus', '');
+      option.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    },
+    focusOnSelectedOption() {
+      if (this.options.length === 0 || this.selectedValue === null) return;
+      const option = this.options.find(opt => opt.getAttribute('data-value') === this.selectedValue);
+      if (!option) return;
+      this.focusedIndex = this.options.indexOf(option);
+      this.focusOption();
+    },
+    moveOptionFocus(delta) {
+      if (this.options.length === 0) return;
+
+      if (!this.open) { 
+        this.open = true;
+        this.focusOnSelectedOption();
+      } else {
+        this.focusedIndex = this.focusedIndex === null
+          ? 0
+          : this.focusedIndex + delta;
+      }
+      this.focusOption();
+    },
+    handleOptionClick(event) {
+      const option = event.target.closest('[role=option]');
+      if (option && option.getAttribute('aria-disabled') !== 'true') {
+        this.selectOption(option);
+        this.open = false;
+        this.$nextTick(() => this.$refs.trigger.focus());
+      }
+    },
+    handleOptionMousemove(event) {
+      const option = event.target.closest('[role=option]');
+      if (option && option.getAttribute('aria-disabled') !== 'true') {
+        this.focusedIndex = this.options.indexOf(option);
+        this.focusOption();
+      }
+    },
+    handleOptionEnter(event) {
+      this.selectOption(this.options[this.focusedIndex]);
+      this.open = !this.open;
+    },
+    selectOption(option, dispatch = true) {
+      if (this.options.length === 0 || !option || option.disabled || option.getAttribute('data-value') == null) {
+        return;
+      }
+
+      this.options.forEach(opt => {
+        opt.setAttribute('aria-selected', opt === option);
+      });
+      this.selectedLabel = option.innerHTML;
+      this.selectedValue = option.getAttribute('data-value');
+      if (dispatch) {
+        this.$dispatch('select:change', {
+          value: this.selectedValue,
+          label: this.selectedLabel
+        });
+        this.$dispatch('change'); 
+      }
+    },
+    filterOptions(query) {
+      if (query.length > 0) {
+        this.disabledOptions.forEach(opt => { opt.setAttribute('aria-hidden', 'true'); });
+      } else {
+        this.disabledOptions.forEach(opt => { opt.removeAttribute('aria-hidden'); });
+      }
+      this.options.forEach(opt => {
+        opt.removeAttribute('aria-hidden');
+        if (opt.getAttribute('data-value') != null && !opt.innerHTML.toLowerCase().includes(query.toLowerCase())) {
+          opt.setAttribute('aria-hidden', 'true');
+        }
+      });
+    },
+
+    $trigger: {
+      '@click'() { this.open = !this.open; this.focusOnSelectedOption(); },
+      '@keydown.escape.prevent'() {
+        this.open = false;
+        this.$refs.trigger.focus();
+      },
+      '@keydown.down.prevent'() { this.moveOptionFocus(+1); },
+      '@keydown.up.prevent'() { this.moveOptionFocus(-1); },
+      '@keydown.home.prevent'() { this.focusOption(0) },
+      '@keydown.end.prevent'() { this.focusOption(this.options.length - 1) },
+      '@keydown.enter.prevent'() {
+        if (this.open) this.handleOptionEnter();
+        else this.open = true;
+      },
+      ':aria-expanded'() { return this.open },
+      'x-ref': 'trigger'
+    },
+    $content: {
+      '@click'(e) { this.handleOptionClick(e) },
+      '@mouseover'(e) { this.handleOptionMousemove(e) },
+      ':aria-hidden'() { return !this.open },
+      'x-cloak': ''
+    },
+    $filter: {
+      '@input'(e) { this.filterOptions(e.target.value) },
+      '@keydown.escape.prevent'() {
+        this.open = false;
+        this.$refs.trigger.focus();
+      },
+      '@keydown.down.prevent'() { this.moveOptionFocus(+1); },
+      '@keydown.up.prevent'() { this.moveOptionFocus(-1); },
+      '@keydown.home.prevent'() { this.focusOption(0) },
+      '@keydown.end.prevent'() { this.focusOption(this.options.length - 1) },
+      '@keydown.enter.prevent'() { this.handleOptionEnter() },
+    }
+  }));
+};

package/dist/assets/js/sidebar.js

@@ -0,0 +1,25 @@
+window.basecoat = window.basecoat || {};
+window.basecoat.registerSidebar= function(Alpine) {
+  if (Alpine.components && Alpine.components.sidebar) return;
+
+  Alpine.data('sidebar', (initialOpen = true, initialMobileOpen = false) => ({
+    open: window.innerWidth >= 768
+      ? initialOpen
+      : initialMobileOpen,
+
+    init() {
+      this.$nextTick(() => {
+        this.$el.removeAttribute('data-uninitialized');
+      });
+    },
+
+    $main: {
+      '@sidebar:open.window'(e) { this.open = true },
+      '@sidebar:close.window'(e) { this.open = false },
+      '@sidebar:toggle.window'(e) { this.open = !this.open },
+      '@click'(e) { if (e.target === this.$el) this.open = false },
+      ':aria-hidden'() { return !this.open },
+      ':inert'() { return !this.open }
+    },
+  }));
+};

package/dist/assets/js/tabs.js

@@ -0,0 +1,64 @@
+window.basecoat = window.basecoat || {};
+window.basecoat.registerTabs = function(Alpine) {
+  if (Alpine.components && Alpine.components.tabs) return;
+  
+  Alpine.data('tabs', (initialTabIndex = 0) => ({
+    activeTabIndex: initialTabIndex,
+    tabs: [],
+    panels: [],
+
+    init() {
+      this.$nextTick(() => {
+        this.tabs = Array.from(this.$el.querySelectorAll(':scope > [role=tablist] [role=tab]:not([disabled])'));
+        this.panels = Array.from(this.$el.querySelectorAll(':scope > [role=tabpanel]'));
+        if (this.tabs.length > 0) {
+          this.selectTab(this.tabs[initialTabIndex], false);
+        }
+      });
+    },
+    nextTab() {
+      if (this.tabs.length === 0) return;
+      let newIndex = (this.activeTabIndex + 1) % this.tabs.length;
+      this.selectTab(this.tabs[newIndex]);
+    },
+    prevTab() {
+      if (this.tabs.length === 0) return;
+      let newIndex = (this.activeTabIndex - 1 + this.tabs.length) % this.tabs.length;
+      this.selectTab(this.tabs[newIndex]);
+    },
+    selectTab(tab, focus = true) {
+      if (!tab || this.tabs.length === 0) return;
+
+      this.tabs.forEach((t, index) => {
+        const isSelected = t === tab;
+        t.setAttribute('aria-selected', isSelected);
+        t.setAttribute('tabindex', isSelected ? '0' : '-1');
+        if (isSelected) {
+          this.activeTabIndex = index;
+          this.activeTab = t;
+          if (focus) {
+            t.focus();
+          }
+        }
+      });
+
+      const panelId = tab.getAttribute('aria-controls');
+      if (!panelId) return;
+
+      this.panels.forEach(panel => {
+          panel.hidden = (panel.getAttribute('id') !== panelId);
+      });
+    },
+
+    $tablist: {
+      ['@click'](event) {
+          const clickedTab = event.target.closest('[role=tab]');
+          if (clickedTab) {
+              this.selectTab(clickedTab);
+          }
+      },
+      ['@keydown.arrow-right.prevent']() { this.nextTab() },
+      ['@keydown.arrow-left.prevent']() { this.prevTab() },
+    },
+  }));
+};

package/dist/assets/js/toast.js

@@ -0,0 +1,75 @@
+window.basecoat = window.basecoat || {};
+window.basecoat.registerToast = function(Alpine) {
+  if (Alpine.components && Alpine.components.toast) return;
+
+  Alpine.store('toaster', { isPaused: false });
+  Alpine.data('toast', (config={}) => ({
+    config: config,
+    open: false,
+    timeoutDuration: null,
+    timeoutId: null,
+
+    init() {
+      if (config.duration !== -1) {
+        this.timeoutDuration = config.duration || (config.category === 'error' ? 5000 : 3000);
+        this.timeoutId = setTimeout(() => { this.close() }, this.timeoutDuration);
+      }
+      this.open = true;
+      this.$watch('$store.toaster.isPaused', (isPaused) => {
+        if (!this.open) return;
+        if (isPaused) {
+          this.pauseTimeout();
+        } else {
+          this.resumeTimeout();
+        }
+      });
+    },
+    pauseTimeout() {
+      clearTimeout(this.timeoutId);
+      this.timeoutId = null;
+    },
+    resumeTimeout(index) {
+      if (this.open && this.timeoutId === null) {
+        this.timeoutId = setTimeout(() => { this.close() }, this.timeoutDuration);
+      }
+    },
+    close() {
+      this.pauseTimeout();
+      this.open = false;
+      this.$el.blur();
+    },
+    executeAction(actionString) {
+      if (actionString) {
+        Alpine.evaluate(this.$el, actionString);
+      }
+    },
+
+    $toastBindings: {
+      ['@mouseenter']() { this.$store.toaster.isPaused = true },
+      ['@mouseleave']() { this.$store.toaster.isPaused = false },
+      ['@keydown.escape.prevent']() { this.close() },
+      [':aria-hidden']() { return !this.open }
+    },
+  }));
+
+  Alpine.magic('toast', (el) => (config, toasterId='toaster') => {
+    const toaster = document.getElementById(toasterId);
+    const template = document.getElementById('toast-template');
+
+    if (!toaster) {
+      console.error(`Toaster container with id #${toasterId} not found.`);
+      return;
+    }
+    if (!template) {
+      console.error('Toast template with id #toast-template not found.');
+      return;
+    }
+
+    const clone = template.content.firstElementChild.cloneNode(true);
+
+    clone.setAttribute('x-data', `toast(${JSON.stringify(config)})`);
+    clone.removeAttribute('id'); 
+
+    toaster.appendChild(clone);
+  });
+};