decantr 0.9.0

package/src/components/textarea.js

@@ -0,0 +1,82 @@
+import { createEffect } from '../state/index.js';
+import { tags } from '../tags/index.js';
+import { injectBase, cx } from './_base.js';
+import { createFormField } from './_behaviors.js';
+import { applyFieldState } from './_primitives.js';
+
+const { div, textarea: textareaTag } = tags;
+
+/**
+ * @param {Object} [props]
+ * @param {string} [props.placeholder]
+ * @param {string|Function} [props.value]
+ * @param {boolean|Function} [props.disabled]
+ * @param {boolean|Function} [props.readonly]
+ * @param {boolean|string|Function} [props.error]
+ * @param {boolean|string|Function} [props.success]
+ * @param {string} [props.variant='outlined'] - 'outlined'|'filled'|'ghost'
+ * @param {string} [props.size] - xs|sm|lg
+ * @param {number} [props.rows=3]
+ * @param {string} [props.resize='vertical'] - 'none'|'vertical'|'horizontal'|'both'
+ * @param {string} [props.label]
+ * @param {string} [props.help]
+ * @param {boolean} [props.required]
+ * @param {Function} [props.oninput]
+ * @param {Function} [props.ref]
+ * @param {string} [props['aria-label']]
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function Textarea(props = {}) {
+  injectBase();
+
+  const {
+    placeholder, value, disabled, readonly, error, success,
+    variant, size, rows = 3, resize = 'vertical',
+    label, help, required, oninput, ref,
+    'aria-label': ariaLabel, class: cls
+  } = props;
+
+  const textareaProps = { class: 'd-textarea', rows };
+  if (placeholder) textareaProps.placeholder = placeholder;
+  if (readonly && typeof readonly !== 'function') textareaProps.readonly = '';
+  if (oninput) textareaProps.oninput = oninput;
+  if (ariaLabel) textareaProps['aria-label'] = ariaLabel;
+  if (required) textareaProps.required = '';
+
+  const textareaEl = textareaTag(textareaProps);
+  // resize is runtime-derived from prop
+  textareaEl.style.resize = resize;
+
+  if (ref) ref(textareaEl);
+
+  // Reactive value
+  if (typeof value === 'function') {
+    createEffect(() => { textareaEl.value = value(); });
+  } else if (value !== undefined) {
+    textareaEl.value = value;
+  }
+
+  // Reactive disabled
+  if (typeof disabled === 'function') {
+    createEffect(() => { textareaEl.disabled = disabled(); });
+  } else if (disabled) {
+    textareaEl.disabled = true;
+  }
+
+  // Reactive readonly
+  if (typeof readonly === 'function') {
+    createEffect(() => { textareaEl.readOnly = readonly(); });
+  }
+
+  const wrap = div({ class: cx('d-textarea-wrap', cls) }, textareaEl);
+
+  applyFieldState(wrap, { error, success, disabled, readonly, variant, size });
+
+  if (label || help) {
+    const { wrapper } = createFormField(wrap, { label, error, help, required, success, variant, size });
+    return wrapper;
+  }
+
+  return wrap;
+}

package/src/components/time-picker.js

@@ -0,0 +1,153 @@
+/**
+ * TimePicker — Time selection with scrollable hour/minute/second columns.
+ * Uses renderTimeColumns primitive, createFieldOverlay behavior.
+ *
+ * @module decantr/components/time-picker
+ */
+import { onDestroy } from '../core/index.js';
+import { createEffect } from '../state/index.js';
+import { tags } from '../tags/index.js';
+import { injectBase, cx } from './_base.js';
+import { createFormField } from './_behaviors.js';
+import { icon } from './icon.js';
+import { applyFieldState, createFieldOverlay, renderTimeColumns } from './_primitives.js';
+
+const { div, button: buttonTag, span } = tags;
+
+/**
+ * @param {Object} [props]
+ * @param {string|Function} [props.value]
+ * @param {string} [props.placeholder='Select time']
+ * @param {boolean} [props.seconds=false]
+ * @param {boolean} [props.use12h=false]
+ * @param {number} [props.hourStep=1]
+ * @param {number} [props.minuteStep=1]
+ * @param {number} [props.secondStep=1]
+ * @param {boolean|Function} [props.disabled]
+ * @param {boolean|string|Function} [props.error]
+ * @param {boolean|string|Function} [props.success]
+ * @param {string} [props.variant='outlined'] - 'outlined'|'filled'|'ghost'
+ * @param {string} [props.size] - xs|sm|lg
+ * @param {string} [props.label]
+ * @param {string} [props.help]
+ * @param {boolean} [props.required]
+ * @param {Function} [props.onchange]
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function TimePicker(props = {}) {
+  injectBase();
+  const {
+    value, placeholder = 'Select time', seconds = false, use12h = false,
+    hourStep = 1, minuteStep = 1, secondStep = 1, disabled,
+    error, success, variant, size, label, help, required, onchange, class: cls
+  } = props;
+
+  let _h = 0, _m = 0, _s = 0, _period = 'AM';
+
+  function parseTime(v) {
+    if (!v) return;
+    const parts = v.split(':').map(Number);
+    _h = parts[0] || 0;
+    _m = parts[1] || 0;
+    _s = parts[2] || 0;
+    if (use12h) {
+      _period = _h >= 12 ? 'PM' : 'AM';
+      _h = _h % 12 || 12;
+    }
+  }
+
+  function formatTime() {
+    let hour = _h;
+    if (use12h) hour = _period === 'PM' ? (_h === 12 ? 12 : _h + 12) : (_h === 12 ? 0 : _h);
+    const hh = String(hour).padStart(2, '0');
+    const mm = String(_m).padStart(2, '0');
+    if (seconds) return `${hh}:${mm}:${String(_s).padStart(2, '0')}`;
+    return `${hh}:${mm}`;
+  }
+
+  function displayTime() {
+    const hh = String(_h).padStart(2, '0');
+    const mm = String(_m).padStart(2, '0');
+    let t = `${hh}:${mm}`;
+    if (seconds) t += `:${String(_s).padStart(2, '0')}`;
+    if (use12h) t += ` ${_period}`;
+    return t;
+  }
+
+  parseTime(typeof value === 'function' ? value() : value);
+
+  const displayEl = span({ class: 'd-select-display' });
+  const trigger = buttonTag({
+    type: 'button',
+    class: 'd-select',
+    'aria-haspopup': 'dialog',
+    'aria-expanded': 'false'
+  }, displayEl, icon('clock', { size: '1em', class: 'd-select-arrow' }));
+
+  const panel = div({ class: 'd-timepicker-panel' });
+  const wrap = div({ class: cx('d-timepicker', cls) }, trigger, panel);
+
+  applyFieldState(wrap, { error, success, disabled, variant, size });
+
+  function updateDisplay() {
+    const initVal = typeof value === 'function' ? value() : value;
+    displayEl.textContent = initVal || _h || _m || _s ? displayTime() : placeholder;
+    if (!initVal && !_h && !_m && !_s) displayEl.classList.add('d-select-placeholder');
+    else displayEl.classList.remove('d-select-placeholder');
+  }
+
+  function emitChange() {
+    updateDisplay();
+    if (onchange) onchange(formatTime());
+  }
+
+  function renderPanel() {
+    panel.replaceChildren();
+    panel.appendChild(renderTimeColumns({
+      hours: _h,
+      minutes: _m,
+      seconds: seconds ? _s : undefined,
+      hourStep,
+      minuteStep,
+      secondStep,
+      use12h,
+      period: _period,
+      onChange: (vals) => {
+        _h = vals.hours;
+        _m = vals.minutes;
+        if (vals.seconds !== undefined) _s = vals.seconds;
+        if (vals.period) _period = vals.period;
+        emitChange();
+      }
+    }));
+  }
+
+  const overlay = createFieldOverlay(trigger, panel, {
+    trigger: 'click',
+    matchWidth: false,
+    onOpen: renderPanel
+  });
+
+  updateDisplay();
+
+  if (typeof value === 'function') {
+    createEffect(() => { parseTime(value()); updateDisplay(); });
+  }
+
+  // Reactive disabled
+  if (typeof disabled === 'function') {
+    createEffect(() => { trigger.disabled = disabled(); });
+  } else if (disabled) {
+    trigger.disabled = true;
+  }
+
+  onDestroy(() => { overlay.destroy(); });
+
+  if (label || help) {
+    const { wrapper } = createFormField(wrap, { label, error, help, required, success, variant, size });
+    return wrapper;
+  }
+
+  return wrap;
+}

package/src/components/time-range-picker.js

@@ -0,0 +1,170 @@
+/**
+ * TimeRangePicker — Two time selectors for start/end time range.
+ * Uses renderTimeColumns primitive, createFieldOverlay behavior.
+ *
+ * @module decantr/components/time-range-picker
+ */
+import { onDestroy } from '../core/index.js';
+import { createEffect } from '../state/index.js';
+import { tags } from '../tags/index.js';
+import { injectBase, cx } from './_base.js';
+import { createFormField } from './_behaviors.js';
+import { applyFieldState, createFieldOverlay, renderTimeColumns } from './_primitives.js';
+
+const { div, button: buttonTag, span } = tags;
+
+/**
+ * @param {Object} [props]
+ * @param {Array<string>|Function} [props.value] - ['09:00', '17:00']
+ * @param {string} [props.placeholder='Select time range']
+ * @param {Function} [props.onchange]
+ * @param {boolean|Function} [props.disabled]
+ * @param {boolean|string|Function} [props.error]
+ * @param {boolean|string|Function} [props.success]
+ * @param {string} [props.variant='outlined'] - 'outlined'|'filled'|'ghost'
+ * @param {string} [props.size] - xs|sm|lg
+ * @param {string} [props.label]
+ * @param {string} [props.help]
+ * @param {boolean} [props.required]
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function TimeRangePicker(props = {}) {
+  injectBase();
+  const {
+    value, placeholder = 'Select time range', onchange,
+    disabled, error, success, variant, size, label, help, required, class: cls
+  } = props;
+
+  let _sh = 9, _sm = 0, _eh = 17, _em = 0;
+  let _hasValue = false;
+
+  function parseValue(v) {
+    if (!v || !Array.isArray(v) || v.length < 2) return;
+    const sp = (v[0] || '').split(':').map(Number);
+    const ep = (v[1] || '').split(':').map(Number);
+    _sh = sp[0] || 0; _sm = sp[1] || 0;
+    _eh = ep[0] || 0; _em = ep[1] || 0;
+    _hasValue = true;
+  }
+
+  parseValue(typeof value === 'function' ? value() : value);
+
+  function formatTime(hh, mm) {
+    return `${String(hh).padStart(2, '0')}:${String(mm).padStart(2, '0')}`;
+  }
+
+  function toMinutes(hh, mm) { return hh * 60 + mm; }
+  function isValid() { return toMinutes(_eh, _em) > toMinutes(_sh, _sm); }
+
+  // Display
+  const displayEl = span({ class: 'd-select-display' });
+  const trigger = buttonTag({
+    type: 'button',
+    class: 'd-select',
+    'aria-haspopup': 'dialog',
+    'aria-expanded': 'false'
+  }, displayEl, span({ class: 'd-select-arrow' }, '\u23F0'));
+
+  const panel = div({ class: 'd-timerange-panel' });
+  const wrap = div({ class: cx('d-timerange', cls) }, trigger, panel);
+
+  applyFieldState(wrap, { error, success, disabled, variant, size });
+
+  function updateDisplay() {
+    if (_hasValue) {
+      displayEl.textContent = `${formatTime(_sh, _sm)} — ${formatTime(_eh, _em)}`;
+      displayEl.classList.remove('d-select-placeholder');
+    } else {
+      displayEl.textContent = placeholder;
+      displayEl.classList.add('d-select-placeholder');
+    }
+  }
+
+  function emitChange() {
+    _hasValue = true;
+    updateDisplay();
+    if (onchange) onchange([formatTime(_sh, _sm), formatTime(_eh, _em)]);
+  }
+
+  let errorEl = null;
+
+  function renderValidation() {
+    if (!errorEl) return;
+    errorEl.textContent = isValid() ? '' : 'End time must be after start time';
+  }
+
+  function renderPanel() {
+    panel.replaceChildren();
+
+    // Start time columns
+    const startLabel = div({ class: 'd-timerange-label' }, 'Start');
+    const startCols = renderTimeColumns({
+      hours: _sh,
+      minutes: _sm,
+      onChange: (vals) => {
+        _sh = vals.hours;
+        _sm = vals.minutes;
+        renderValidation();
+        emitChange();
+      }
+    });
+    const startSection = div({ class: 'd-timerange-section' }, startLabel, startCols);
+
+    const divider = div({ class: 'd-timerange-divider' }, '\u2014');
+
+    // End time columns
+    const endLabel = div({ class: 'd-timerange-label' }, 'End');
+    const endCols = renderTimeColumns({
+      hours: _eh,
+      minutes: _em,
+      onChange: (vals) => {
+        _eh = vals.hours;
+        _em = vals.minutes;
+        renderValidation();
+        emitChange();
+      }
+    });
+    const endSection = div({ class: 'd-timerange-section' }, endLabel, endCols);
+
+    errorEl = div({ class: 'd-timerange-error', role: 'alert' });
+
+    const row = div({ class: 'd-timerange-row' }, startSection, divider, endSection);
+    panel.appendChild(row);
+    panel.appendChild(errorEl);
+    renderValidation();
+  }
+
+  const overlay = createFieldOverlay(trigger, panel, {
+    trigger: 'click',
+    matchWidth: false,
+    onOpen: renderPanel
+  });
+
+  // Reactive disabled
+  if (typeof disabled === 'function') {
+    createEffect(() => {
+      trigger.disabled = disabled();
+      trigger.setAttribute('aria-disabled', String(!!disabled()));
+    });
+  } else if (disabled) {
+    trigger.disabled = true;
+    trigger.setAttribute('aria-disabled', 'true');
+  }
+
+  // Reactive value
+  if (typeof value === 'function') {
+    createEffect(() => { parseValue(value()); updateDisplay(); });
+  }
+
+  onDestroy(() => { overlay.destroy(); });
+
+  updateDisplay();
+
+  if (label || help) {
+    const { wrapper } = createFormField(wrap, { label, error, help, required, success, variant, size });
+    return wrapper;
+  }
+
+  return wrap;
+}

package/src/components/timeline.js

@@ -0,0 +1,226 @@
+/**
+ * Timeline — Vertical/horizontal sequence of events with connecting lines.
+ *
+ * @module decantr/components/timeline
+ */
+import { h } from '../core/index.js';
+import { createSignal, createEffect } from '../state/index.js';
+import { injectBase, cx } from './_base.js';
+
+/**
+ * @param {Object} [props]
+ * @param {{ label?: string, content: string|Node, color?: string, icon?: string|Node, time?: string, status?: 'default'|'success'|'warning'|'error'|'info', tag?: string, position?: 'left'|'right', collapsible?: boolean, defaultOpen?: boolean, onclick?: Function, disabled?: boolean }[]} [props.items]
+ * @param {'left'|'right'|'alternate'|'custom'} [props.mode='left']
+ * @param {boolean|string} [props.pending=false] - Show pending last item
+ * @param {string|Node} [props.pendingDot] - Custom dot for pending item
+ * @param {'default'|'branded'} [props.variant='default']
+ * @param {string} [props.size] - sm|lg
+ * @param {number|Function} [props.active] - Index of active item (reactive)
+ * @param {boolean} [props.gradient=false] - Gradient connector line
+ * @param {boolean} [props.glass=false] - Glass background on dots
+ * @param {boolean} [props.reverse=false] - Reverse item order
+ * @param {'vertical'|'horizontal'} [props.direction='vertical'] - Layout direction
+ * @param {boolean|Function} [props.loading=false] - Skeleton loading state (reactive)
+ * @param {number} [props.loadingCount=3] - Skeleton item count
+ * @param {Function} [props.onClick] - Global click handler (item, index)
+ * @param {string} [props.class]
+ * @returns {HTMLElement}
+ */
+export function Timeline(props = {}) {
+  injectBase();
+  const {
+    items = [], mode = 'left', pending = false, pendingDot,
+    variant = 'default', size, active, gradient = false, glass = false,
+    reverse = false, direction = 'vertical', loading = false,
+    loadingCount = 3, onClick, class: cls
+  } = props;
+
+  const isBranded = variant === 'branded';
+  const isHorizontal = direction === 'horizontal';
+
+  const container = h('div', {
+    class: cx('d-timeline',
+      mode === 'alternate' && 'd-timeline-alternate',
+      mode === 'right' && 'd-timeline-right',
+      mode === 'custom' && 'd-timeline-custom',
+      isHorizontal && 'd-timeline-horizontal',
+      size && `d-timeline-${size}`,
+      isBranded && 'd-timeline-lg d-timeline-gradient d-timeline-glass',
+      !isBranded && gradient && 'd-timeline-gradient',
+      !isBranded && glass && 'd-timeline-glass',
+      cls
+    )
+  });
+
+  // Skeleton loading state
+  if (typeof loading === 'function') {
+    const [content, setContent] = createSignal(null);
+    createEffect(() => {
+      const isLoading = loading();
+      container.replaceChildren();
+      if (isLoading) {
+        renderSkeleton(container, loadingCount);
+      } else {
+        renderItems(container, items, { mode, pending, pendingDot, active, reverse, isHorizontal, onClick, isBranded, gradient });
+      }
+    });
+    return container;
+  }
+
+  if (loading) {
+    renderSkeleton(container, loadingCount);
+  } else {
+    renderItems(container, items, { mode, pending, pendingDot, active, reverse, isHorizontal, onClick, isBranded, gradient });
+  }
+
+  return container;
+}
+
+/**
+ * Render timeline items into the container.
+ */
+function renderItems(container, items, opts) {
+  const { mode, pending, pendingDot, active, reverse, isHorizontal, onClick, isBranded, gradient } = opts;
+  const ordered = reverse ? [...items].reverse() : items;
+  const dots = [];
+
+  ordered.forEach((item, i) => {
+    const itemDisabled = item.disabled;
+    const itemClickable = !itemDisabled && (item.onclick || onClick);
+
+    const el = h('div', {
+      class: cx('d-timeline-item',
+        mode === 'custom' && item.position === 'right' && 'd-timeline-item-right',
+        mode === 'custom' && item.position !== 'right' && 'd-timeline-item-left',
+        itemClickable && 'd-timeline-item-clickable',
+        itemDisabled && 'd-timeline-item-disabled'
+      )
+    });
+
+    if (itemClickable) {
+      el.addEventListener('click', () => {
+        if (item.onclick) item.onclick(item, i);
+        if (onClick) onClick(item, i);
+      });
+    }
+
+    // Dot
+    const dot = h('div', { class: cx('d-timeline-dot', item.icon && 'd-timeline-dot-lg') });
+    if (item.icon) {
+      if (typeof item.icon === 'string') dot.textContent = item.icon;
+      else dot.appendChild(item.icon);
+    }
+    if (item.status && item.status !== 'default') dot.dataset.status = item.status;
+    if (item.color && !item.status) dot.dataset.color = item.color;
+    el.appendChild(dot);
+    dots.push(dot);
+
+    // Line (not on last item unless pending)
+    if (i < ordered.length - 1 || pending) {
+      el.appendChild(h('div', { class: 'd-timeline-line' }));
+    }
+
+    // Opposite label for alternate mode
+    if (mode === 'alternate' && item.label) {
+      const opposite = h('div', { class: 'd-timeline-opposite' }, item.label);
+      // In alternate mode, insert opposite before or after content depending on even/odd
+      el.insertBefore(opposite, el.firstChild);
+    }
+
+    // Content
+    const content = h('div', { class: 'd-timeline-content' });
+    if (item.time) content.appendChild(h('div', { class: 'd-timeline-label' }, item.time));
+    if (item.tag) {
+      content.appendChild(h('span', { class: 'd-timeline-tag' }, item.tag));
+    }
+
+    if (item.collapsible) {
+      // Collapsible content
+      const [open, setOpen] = createSignal(item.defaultOpen !== false);
+      const trigger = h('div', { class: 'd-timeline-collapse-trigger' });
+      createEffect(() => {
+        trigger.textContent = open() ? '▾ Collapse' : '▸ Expand';
+      });
+      trigger.addEventListener('click', (e) => {
+        e.stopPropagation();
+        setOpen(!open());
+      });
+
+      const region = h('div', { class: 'd-timeline-collapse-region', role: 'region' });
+      if (typeof item.content === 'string') {
+        region.appendChild(h('div', null, item.content));
+      } else if (item.content?.nodeType) {
+        region.appendChild(item.content);
+      }
+
+      createEffect(() => {
+        region.style.maxHeight = open() ? 'none' : '0px';
+        region.style.overflow = open() ? 'visible' : 'hidden';
+      });
+
+      content.appendChild(trigger);
+      content.appendChild(region);
+    } else {
+      if (typeof item.content === 'string') {
+        content.appendChild(h('div', null, item.content));
+      } else if (item.content?.nodeType) {
+        content.appendChild(item.content);
+      }
+    }
+
+    el.appendChild(content);
+    container.appendChild(el);
+  });
+
+  // Active item highlight
+  if (active != null) {
+    const applyActive = (idx) => {
+      dots.forEach((d, i) => {
+        d.classList.toggle('d-timeline-dot-active', i === idx);
+      });
+    };
+    if (typeof active === 'function') {
+      createEffect(() => applyActive(active()));
+    } else {
+      applyActive(active);
+    }
+  }
+
+  // Pending item
+  if (pending) {
+    const pendingItem = h('div', { class: 'd-timeline-item' });
+    const dot = h('div', { class: 'd-timeline-dot d-timeline-dot-pending' });
+    if (pendingDot) {
+      if (typeof pendingDot === 'string') dot.textContent = pendingDot;
+      else if (pendingDot.nodeType) dot.appendChild(pendingDot);
+    }
+    pendingItem.appendChild(dot);
+    pendingItem.appendChild(h('div', { class: 'd-timeline-content' },
+      h('div', { class: 'd-timeline-label' }, typeof pending === 'string' ? pending : 'Loading...')
+    ));
+    container.appendChild(pendingItem);
+  }
+}
+
+/**
+ * Render skeleton loading items.
+ */
+function renderSkeleton(container, count) {
+  container.classList.add('d-timeline-skeleton');
+  for (let i = 0; i < count; i++) {
+    const el = h('div', { class: 'd-timeline-item' });
+    el.appendChild(h('div', { class: 'd-timeline-dot' }));
+    if (i < count - 1) {
+      el.appendChild(h('div', { class: 'd-timeline-line' }));
+    }
+    const content = h('div', { class: 'd-timeline-content' });
+    const bar1 = h('div', { class: 'd-timeline-skel-bar' });
+    bar1.style.width = `${60 + Math.random() * 30}%`;
+    const bar2 = h('div', { class: 'd-timeline-skel-bar' });
+    bar2.style.width = `${40 + Math.random() * 40}%`;
+    content.appendChild(bar1);
+    content.appendChild(bar2);
+    el.appendChild(content);
+    container.appendChild(el);
+  }
+}

package/src/components/toast.js

@@ -0,0 +1,71 @@
+import { h } from '../core/index.js';
+import { injectBase, cx } from './_base.js';
+
+let containerCache = {};
+
+function getContainer(position) {
+  if (containerCache[position]) return containerCache[position];
+  if (typeof document === 'undefined') return null;
+
+  const el = h('div', { class: cx('d-toast-container', `d-toast-${position}`) });
+  document.body.appendChild(el);
+  containerCache[position] = el;
+  return el;
+}
+
+/**
+ * Show a toast notification.
+ * @param {Object} props
+ * @param {string} props.message
+ * @param {string} [props.variant] - info|success|warning|error (default: info)
+ * @param {number} [props.duration] - Auto-dismiss in ms (default: 3000, 0 = manual)
+ * @param {string} [props.position] - top-right|top-left|bottom-right|bottom-left (default: top-right)
+ * @returns {{ dismiss: Function }}
+ */
+export function toast(props = {}) {
+  injectBase();
+
+  const {
+    message,
+    variant = 'info',
+    duration = 3000,
+    position = 'top-right'
+  } = props;
+
+  const container = getContainer(position);
+  if (!container) return { dismiss: () => {} };
+
+  const toastClass = cx('d-toast', `d-toast-${variant}`);
+  const el = h('div', { class: toastClass, role: 'status', 'aria-live': 'polite' },
+    h('span', { class: 'd-toast-message' }, message),
+    h('button', {
+      class: 'd-toast-close',
+      'aria-label': 'Dismiss',
+      type: 'button'
+    }, '\u00d7')
+  );
+
+  const dismiss = () => {
+    el.classList.add('d-toast-exit');
+    setTimeout(() => {
+      if (el.parentNode) el.parentNode.removeChild(el);
+    }, 200);
+  };
+
+  el.querySelector('.d-toast-close').addEventListener('click', dismiss);
+  container.appendChild(el);
+
+  if (duration > 0) {
+    setTimeout(dismiss, duration);
+  }
+
+  return { dismiss };
+}
+
+/** Reset toast containers (for testing) */
+export function resetToasts() {
+  for (const el of Object.values(containerCache)) {
+    if (el.parentNode) el.parentNode.removeChild(el);
+  }
+  containerCache = {};
+}