@nqmcreative/ui 0.1.0

package/dist/index.js

@@ -0,0 +1,77 @@
+/**
+ * @nqmcreative/ui — public entry point.
+ * Tokens live in `theme.css`; shared tone maps live in `tones.ts`.
+ */
+/* --- tokens --- */
+export { TONES, focusRing, peerFocusRing, toneBorder, toneBorderLeft, toneBorderSoft, toneFill, toneFocusBorder, toneFocusWithinBorder, toneHoverBorder, toneHoverText, tonePeerChecked, tonePeerFocus, toneRing, toneSoft, toneSoftHover, toneSolid, toneSolidHover, toneSurface, toneText } from './tones.js';
+/* --- behaviour (actions + stores) --- */
+export { anchored } from './actions/anchor.js';
+export { clickOutside, focusTrap, focusable, navigateList, portal } from './actions/dismissable.js';
+export { toast } from './toast.svelte.js';
+/* --- locale --- */
+export { locale, setLocale, provideLocale, useLocale, enUS, idID, LocaleStore } from './locale.svelte.js';
+export { default as LocaleProvider } from './components/LocaleProvider.svelte';
+/* --- actions --- */
+export { default as Button } from './components/Button.svelte';
+export { default as Link } from './components/Link.svelte';
+/* --- forms --- */
+export { default as Input } from './components/Input.svelte';
+export { default as Textarea } from './components/Textarea.svelte';
+export { default as Select } from './components/Select.svelte';
+export { default as Checkbox } from './components/Checkbox.svelte';
+export { default as Radio } from './components/Radio.svelte';
+export { default as Switch } from './components/Switch.svelte';
+export { default as Field } from './components/Field.svelte';
+export { default as Label } from './components/Label.svelte';
+export { default as PasswordInput } from './components/PasswordInput.svelte';
+export { default as NumberInput } from './components/NumberInput.svelte';
+export { default as Slider } from './components/Slider.svelte';
+export { default as RadioGroup } from './components/RadioGroup.svelte';
+export { default as CheckboxGroup } from './components/CheckboxGroup.svelte';
+export { default as SegmentedControl } from './components/SegmentedControl.svelte';
+export { default as InputGroup } from './components/InputGroup.svelte';
+export { default as Combobox } from './components/Combobox.svelte';
+export { default as MultiSelect } from './components/MultiSelect.svelte';
+export { default as DatePicker } from './components/DatePicker.svelte';
+export { default as Calendar } from './components/Calendar.svelte';
+export { toISO, fromISO, today, isSameDay, addDays, addMonths, monthGrid, weekdayNames, monthLabel, isOutOfRange, formatISO, parseFormatted } from './date.js';
+export { default as Dropzone } from './components/Dropzone.svelte';
+/* --- data display --- */
+export { default as Badge } from './components/Badge.svelte';
+export { default as Avatar } from './components/Avatar.svelte';
+export { default as AvatarGroup } from './components/AvatarGroup.svelte';
+export { default as Card } from './components/Card.svelte';
+export { default as Stat } from './components/Stat.svelte';
+export { default as Table } from './components/Table.svelte';
+export { default as Kbd } from './components/Kbd.svelte';
+/* --- feedback --- */
+export { default as Alert } from './components/Alert.svelte';
+export { default as Progress } from './components/Progress.svelte';
+export { default as Spinner } from './components/Spinner.svelte';
+export { default as Skeleton } from './components/Skeleton.svelte';
+export { default as EmptyState } from './components/EmptyState.svelte';
+export { default as Toaster } from './components/Toaster.svelte';
+/* --- layout & navigation --- */
+export { default as Divider } from './components/Divider.svelte';
+export { default as Tabs } from './components/Tabs.svelte';
+export { default as Accordion } from './components/Accordion.svelte';
+export { default as AccordionItem } from './components/AccordionItem.svelte';
+export { default as Breadcrumb } from './components/Breadcrumb.svelte';
+export { default as Pagination } from './components/Pagination.svelte';
+export { default as Steps } from './components/Steps.svelte';
+/* --- app shell --- */
+export { default as Navbar } from './components/Navbar.svelte';
+export { default as Sidebar } from './components/Sidebar.svelte';
+export { default as Footer } from './components/Footer.svelte';
+/* --- overlay --- */
+export { default as Modal } from './components/Modal.svelte';
+export { default as Drawer } from './components/Drawer.svelte';
+export { default as ConfirmDialog } from './components/ConfirmDialog.svelte';
+export { default as CommandPalette } from './components/CommandPalette.svelte';
+export { default as ContextMenu } from './components/ContextMenu.svelte';
+export { default as Dropdown } from './components/Dropdown.svelte';
+export { default as MenuItem } from './components/MenuItem.svelte';
+export { default as MenuSeparator } from './components/MenuSeparator.svelte';
+export { default as Popover } from './components/Popover.svelte';
+export { default as ThemeToggle, applyTheme, storedTheme } from './components/ThemeToggle.svelte';
+export { default as Tooltip } from './components/Tooltip.svelte';

package/dist/locale.svelte.d.ts

@@ -0,0 +1,93 @@
+/**
+ * Every string a component renders on its own — labels, ARIA names, the words
+ * inside a rejected-file message. Override them once instead of passing a prop
+ * to every instance.
+ *
+ * Two ways in:
+ *
+ *   1. `setLocale(idID)` at app start — one global locale, the common case.
+ *   2. `<LocaleProvider locale={idID}>` — scoped to a subtree, and the right
+ *      choice under SSR, where module state is shared between requests.
+ *
+ * Per-instance props still win over both: `<Table empty="…" />`.
+ */
+export interface Locale {
+    close: string;
+    dismiss: string;
+    loading: string;
+    cancel: string;
+    confirm: string;
+    clear: string;
+    search: string;
+    menu: string;
+    navigation: string;
+    openMenu: string;
+    closeMenu: string;
+    collapseSidebar: string;
+    expandSidebar: string;
+    notifications: string;
+    commandPlaceholder: string;
+    noResults: string;
+    noData: string;
+    selectAllRows: string;
+    selectRow: string;
+    pagination: string;
+    previousPage: string;
+    nextPage: string;
+    breadcrumb: string;
+    comboboxPlaceholder: string;
+    noMatches: string;
+    dropFiles: string;
+    or: string;
+    browse: string;
+    remove: string;
+    rejectedType: string;
+    rejectedSize: string;
+    rejectedCount: string;
+    /** Byte-size units, smallest first. */
+    byteUnits: [string, string, string, string];
+    showPassword: string;
+    hidePassword: string;
+    /** Five buckets, from empty to strongest. */
+    passwordStrength: [string, string, string, string, string];
+    decrease: string;
+    increase: string;
+    /** BCP 47 tag handed to `Intl` for month and weekday names. */
+    dateLocale: string;
+    /** Order of the date parts the input accepts and prints. */
+    dateFormat: 'dmy' | 'mdy' | 'ymd';
+    today: string;
+    previousMonth: string;
+    nextMonth: string;
+    selectDate: string;
+    selected: string;
+    removeItem: string;
+    toggleTheme: string;
+    lightMode: string;
+    darkMode: string;
+}
+export declare const enUS: Locale;
+/** Bahasa Indonesia. Pass to `setLocale` or `<LocaleProvider>`. */
+export declare const idID: Locale;
+export declare class LocaleStore {
+    current: Locale;
+    /** Merges on top of what is already there. */
+    set(next: Partial<Locale>): void;
+    /**
+     * Replaces everything with `enUS` plus `next`. Unlike `set` this never reads
+     * `current`, so it is safe to call from an effect without the write feeding
+     * back into the effect's own dependencies.
+     */
+    replace(next: Partial<Locale>): void;
+}
+/** The global locale, used by any component with no provider above it. */
+export declare const locale: LocaleStore;
+/** Replaces some or all of the global strings. Call once, at app start. */
+export declare function setLocale(next: Partial<Locale>): void;
+/**
+ * Scopes a locale to the current component subtree. Call during init — the
+ * `LocaleProvider` component does exactly this.
+ */
+export declare function provideLocale(next: Partial<Locale>): LocaleStore;
+/** The nearest provided locale, falling back to the global one. */
+export declare function useLocale(): LocaleStore;

package/dist/locale.svelte.js

@@ -0,0 +1,153 @@
+/**
+ * Every string a component renders on its own — labels, ARIA names, the words
+ * inside a rejected-file message. Override them once instead of passing a prop
+ * to every instance.
+ *
+ * Two ways in:
+ *
+ *   1. `setLocale(idID)` at app start — one global locale, the common case.
+ *   2. `<LocaleProvider locale={idID}>` — scoped to a subtree, and the right
+ *      choice under SSR, where module state is shared between requests.
+ *
+ * Per-instance props still win over both: `<Table empty="…" />`.
+ */
+import { getContext, setContext } from 'svelte';
+export const enUS = {
+    close: 'Close',
+    dismiss: 'Dismiss',
+    loading: 'Loading',
+    cancel: 'Cancel',
+    confirm: 'Confirm',
+    clear: 'Clear selection',
+    search: 'Search',
+    menu: 'Menu',
+    navigation: 'Navigation',
+    openMenu: 'Open menu',
+    closeMenu: 'Close menu',
+    collapseSidebar: 'Collapse sidebar',
+    expandSidebar: 'Expand sidebar',
+    notifications: 'Notifications',
+    commandPlaceholder: 'Type a command or search…',
+    noResults: 'No results',
+    noData: 'No data',
+    selectAllRows: 'Select all rows',
+    selectRow: 'Select row',
+    pagination: 'Pagination',
+    previousPage: 'Previous page',
+    nextPage: 'Next page',
+    breadcrumb: 'Breadcrumb',
+    comboboxPlaceholder: 'Search…',
+    noMatches: 'No matches',
+    dropFiles: 'Drop files here',
+    or: 'or',
+    browse: 'browse',
+    remove: 'Remove',
+    rejectedType: 'wrong file type',
+    rejectedSize: 'too large',
+    rejectedCount: 'over the file limit',
+    byteUnits: ['B', 'KB', 'MB', 'GB'],
+    showPassword: 'Show password',
+    hidePassword: 'Hide password',
+    passwordStrength: ['Too short', 'Weak', 'Fair', 'Good', 'Strong'],
+    decrease: 'Decrease',
+    increase: 'Increase',
+    dateLocale: 'en-US',
+    dateFormat: 'mdy',
+    today: 'Today',
+    previousMonth: 'Previous month',
+    nextMonth: 'Next month',
+    selectDate: 'Select a date',
+    selected: 'selected',
+    removeItem: 'Remove',
+    toggleTheme: 'Toggle theme',
+    lightMode: 'Light',
+    darkMode: 'Dark'
+};
+/** Bahasa Indonesia. Pass to `setLocale` or `<LocaleProvider>`. */
+export const idID = {
+    close: 'Tutup',
+    dismiss: 'Tutup',
+    loading: 'Memuat',
+    cancel: 'Batal',
+    confirm: 'Konfirmasi',
+    clear: 'Hapus pilihan',
+    search: 'Cari',
+    menu: 'Menu',
+    navigation: 'Navigasi',
+    openMenu: 'Buka menu',
+    closeMenu: 'Tutup menu',
+    collapseSidebar: 'Ciutkan bilah sisi',
+    expandSidebar: 'Bentangkan bilah sisi',
+    notifications: 'Notifikasi',
+    commandPlaceholder: 'Ketik perintah atau cari…',
+    noResults: 'Tidak ada hasil',
+    noData: 'Tidak ada data',
+    selectAllRows: 'Pilih semua baris',
+    selectRow: 'Pilih baris',
+    pagination: 'Paginasi',
+    previousPage: 'Halaman sebelumnya',
+    nextPage: 'Halaman berikutnya',
+    breadcrumb: 'Remah roti',
+    comboboxPlaceholder: 'Cari…',
+    noMatches: 'Tidak ditemukan',
+    dropFiles: 'Letakkan berkas di sini',
+    or: 'atau',
+    browse: 'jelajahi',
+    remove: 'Hapus',
+    rejectedType: 'tipe berkas tidak sesuai',
+    rejectedSize: 'ukuran terlalu besar',
+    rejectedCount: 'melebihi batas jumlah berkas',
+    byteUnits: ['B', 'KB', 'MB', 'GB'],
+    showPassword: 'Tampilkan kata sandi',
+    hidePassword: 'Sembunyikan kata sandi',
+    passwordStrength: ['Terlalu pendek', 'Lemah', 'Cukup', 'Baik', 'Kuat'],
+    decrease: 'Kurangi',
+    increase: 'Tambah',
+    dateLocale: 'id-ID',
+    dateFormat: 'dmy',
+    today: 'Hari ini',
+    previousMonth: 'Bulan sebelumnya',
+    nextMonth: 'Bulan berikutnya',
+    selectDate: 'Pilih tanggal',
+    selected: 'dipilih',
+    removeItem: 'Hapus',
+    toggleTheme: 'Ganti tema',
+    lightMode: 'Terang',
+    darkMode: 'Gelap'
+};
+export class LocaleStore {
+    current = $state({ ...enUS });
+    /** Merges on top of what is already there. */
+    set(next) {
+        this.current = { ...this.current, ...next };
+    }
+    /**
+     * Replaces everything with `enUS` plus `next`. Unlike `set` this never reads
+     * `current`, so it is safe to call from an effect without the write feeding
+     * back into the effect's own dependencies.
+     */
+    replace(next) {
+        this.current = { ...enUS, ...next };
+    }
+}
+const KEY = Symbol.for('@nqmcreative/ui:locale');
+/** The global locale, used by any component with no provider above it. */
+export const locale = new LocaleStore();
+/** Replaces some or all of the global strings. Call once, at app start. */
+export function setLocale(next) {
+    locale.set(next);
+}
+/**
+ * Scopes a locale to the current component subtree. Call during init — the
+ * `LocaleProvider` component does exactly this.
+ */
+export function provideLocale(next) {
+    const store = new LocaleStore();
+    store.replace(next);
+    setContext(KEY, store);
+    return store;
+}
+/** The nearest provided locale, falling back to the global one. */
+export function useLocale() {
+    return getContext(KEY) ?? locale;
+}

package/dist/theme.css

@@ -0,0 +1,210 @@
+/*
+ * @nqmcreative/ui design tokens
+ * Mirrors the visual language of https://nqmcreative.com
+ * Flat, no shadows, no border-radius (except pills). Import this after
+ * `@import "tailwindcss";` in your app's CSS entry point. Ships light and dark
+ * palettes — see the bottom of this file.
+ *
+ * Colour system: `brand` (teal green) is the primary. Every other hue below
+ * follows the same 4-step shape so components can swap tones freely:
+ *   --color-<tone>          base / solid fill / text on light surfaces
+ *   --color-<tone>-hover    darker step for hover + active
+ *   --color-<tone>-light    tinted surface (soft variants, alerts, badges)
+ *   --color-<tone>-border   hairline that reads against the tinted surface
+ */
+@theme {
+	/* --- surfaces --- */
+	--color-bg: #ffffff;
+	--color-bg-alt: #f8fafc;
+	--color-bg-inset: #f1f5f9;
+	--color-hairline: #e5e7eb;
+	--color-hairline-strong: #cbd5e1;
+
+	/* --- text --- */
+	--color-text: #0f172a;
+	--color-text-secondary: #475569;
+	--color-text-muted: #64748b;
+	--color-text-inverse: #ffffff;
+
+	/* --- brand / primary (teal green) --- */
+	--color-brand: #1c6358;
+	--color-brand-hover: #155047;
+	--color-brand-light: #e8f3f1;
+	--color-brand-border: #a8ccc5;
+
+	/* --- accent (copper) --- */
+	--color-accent: #c2410c;
+	--color-accent-hover: #9a3412;
+	--color-accent-light: #fdf1e9;
+	--color-accent-border: #f0c5a8;
+
+	/* --- violet --- */
+	--color-violet: #6d28d9;
+	--color-violet-hover: #5b21b6;
+	--color-violet-light: #f3edfd;
+	--color-violet-border: #cfbdf5;
+
+	/* --- info (blue) --- */
+	--color-info: #1d4ed8;
+	--color-info-hover: #1e40af;
+	--color-info-light: #eaf0fd;
+	--color-info-border: #b8caf7;
+
+	/* --- success (green) --- */
+	--color-success: #15803d;
+	--color-success-hover: #166534;
+	--color-success-light: #e9f6ed;
+	--color-success-border: #a8d9b8;
+
+	/* --- warning (amber) --- */
+	--color-warning: #b45309;
+	--color-warning-hover: #92400e;
+	--color-warning-light: #fdf4e6;
+	--color-warning-border: #f0d3a3;
+
+	/* --- danger (red) --- */
+	--color-danger: #b91c1c;
+	--color-danger-hover: #991b1b;
+	--color-danger-light: #fdecec;
+	--color-danger-border: #f2b9b9;
+
+	/* --- neutral (slate) --- */
+	--color-neutral: #475569;
+	--color-neutral-hover: #334155;
+	--color-neutral-light: #f1f5f9;
+	--color-neutral-border: #cbd5e1;
+
+	/* --- type --- */
+	--font-sans: 'Work Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
+	--font-heading: 'Sora', ui-sans-serif, system-ui, sans-serif;
+	--font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
+
+	/* --- motion --- */
+	--ease-brand: cubic-bezier(0.16, 1, 0.3, 1);
+	--ease-brand-out: cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+/*
+ * Dark mode. Two ways in, and they cooperate:
+ *
+ *   1. put `class="dark"` on <html> — an explicit choice always wins
+ *   2. do nothing — the OS preference applies, unless <html> says `class="light"`
+ *
+ * Both blocks below carry the same values on purpose; keep them in sync.
+ * Every utility built on these tokens (`bg-bg`, `text-text-secondary`,
+ * `bg-brand`, `border-hairline`, the whole tone system) follows automatically —
+ * components need no `dark:` classes of their own.
+ */
+@custom-variant dark (&:where(.dark, .dark *));
+
+.dark {
+	color-scheme: dark;
+
+	--color-bg: #0f172a;
+	--color-bg-alt: #16203a;
+	--color-bg-inset: #1e293b;
+	--color-hairline: #1e293b;
+	--color-hairline-strong: #334155;
+
+	--color-text: #f1f5f9;
+	--color-text-secondary: #cbd5e1;
+	--color-text-muted: #94a3b8;
+	--color-text-inverse: #0f172a;
+
+	--color-brand: #3f9585;
+	--color-brand-hover: #55ab9a;
+	--color-brand-light: #10302b;
+	--color-brand-border: #235047;
+
+	--color-accent: #ea7d4b;
+	--color-accent-hover: #f59564;
+	--color-accent-light: #3a1d0e;
+	--color-accent-border: #6b3417;
+
+	--color-violet: #a78bfa;
+	--color-violet-hover: #bda5fb;
+	--color-violet-light: #241a3d;
+	--color-violet-border: #40306b;
+
+	--color-info: #6b9bf7;
+	--color-info-hover: #8fb4f9;
+	--color-info-light: #14213f;
+	--color-info-border: #26406e;
+
+	--color-success: #46a06a;
+	--color-success-hover: #5cb47e;
+	--color-success-light: #10281a;
+	--color-success-border: #23492f;
+
+	--color-warning: #d99b3f;
+	--color-warning-hover: #e8ae55;
+	--color-warning-light: #33240c;
+	--color-warning-border: #5c421a;
+
+	--color-danger: #ef6b6b;
+	--color-danger-hover: #f38585;
+	--color-danger-light: #3a1616;
+	--color-danger-border: #6b2626;
+
+	--color-neutral: #94a3b8;
+	--color-neutral-hover: #cbd5e1;
+	--color-neutral-light: #1e293b;
+	--color-neutral-border: #334155;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root:not(.light) {
+		color-scheme: dark;
+
+		--color-bg: #0f172a;
+		--color-bg-alt: #16203a;
+		--color-bg-inset: #1e293b;
+		--color-hairline: #1e293b;
+		--color-hairline-strong: #334155;
+
+		--color-text: #f1f5f9;
+		--color-text-secondary: #cbd5e1;
+		--color-text-muted: #94a3b8;
+		--color-text-inverse: #0f172a;
+
+		--color-brand: #3f9585;
+		--color-brand-hover: #55ab9a;
+		--color-brand-light: #10302b;
+		--color-brand-border: #235047;
+
+		--color-accent: #ea7d4b;
+		--color-accent-hover: #f59564;
+		--color-accent-light: #3a1d0e;
+		--color-accent-border: #6b3417;
+
+		--color-violet: #a78bfa;
+		--color-violet-hover: #bda5fb;
+		--color-violet-light: #241a3d;
+		--color-violet-border: #40306b;
+
+		--color-info: #6b9bf7;
+		--color-info-hover: #8fb4f9;
+		--color-info-light: #14213f;
+		--color-info-border: #26406e;
+
+		--color-success: #46a06a;
+		--color-success-hover: #5cb47e;
+		--color-success-light: #10281a;
+		--color-success-border: #23492f;
+
+		--color-warning: #d99b3f;
+		--color-warning-hover: #e8ae55;
+		--color-warning-light: #33240c;
+		--color-warning-border: #5c421a;
+
+		--color-danger: #ef6b6b;
+		--color-danger-hover: #f38585;
+		--color-danger-light: #3a1616;
+		--color-danger-border: #6b2626;
+
+		--color-neutral: #94a3b8;
+		--color-neutral-hover: #cbd5e1;
+		--color-neutral-light: #1e293b;
+		--color-neutral-border: #334155;
+	}
+}

package/dist/toast.svelte.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Toast queue. One module-level store, so any file can fire a toast without
+ * prop-drilling — mount a single `<Toaster />` once, near the root.
+ *
+ *   import { toast } from '@nqmcreative/ui';
+ *   toast.success('Project archived');
+ *   toast.error('Upload failed', { description: 'The file is over 25 MB.' });
+ *   const id = toast.loading('Rendering…');
+ *   toast.dismiss(id);
+ */
+import type { Tone } from './tones.js';
+export interface ToastAction {
+    label: string;
+    onclick: () => void;
+}
+export interface ToastOptions {
+    description?: string;
+    tone?: Tone;
+    /** Milliseconds on screen. `0` keeps it until dismissed. Default 5000. */
+    duration?: number;
+    action?: ToastAction;
+    /** Swaps the glyph for a spinner and defaults `duration` to 0. */
+    loading?: boolean;
+}
+export interface Toast extends ToastOptions {
+    id: number;
+    title: string;
+    tone: Tone;
+    duration: number;
+}
+declare class ToastStore {
+    items: Toast[];
+    private timers;
+    /** Fires a toast and returns its id, for `update` or `dismiss`. */
+    show(title: string, options?: ToastOptions): number;
+    /** Replaces a live toast in place — a loading toast becoming a result. */
+    update(id: number, title: string, options?: ToastOptions): void;
+    dismiss(id: number): void;
+    clear(): void;
+    success: (title: string, options?: ToastOptions) => number;
+    error: (title: string, options?: ToastOptions) => number;
+    warning: (title: string, options?: ToastOptions) => number;
+    info: (title: string, options?: ToastOptions) => number;
+    loading: (title: string, options?: ToastOptions) => number;
+}
+export declare const toast: ToastStore;
+export {};

package/dist/toast.svelte.js

@@ -0,0 +1,60 @@
+/**
+ * Toast queue. One module-level store, so any file can fire a toast without
+ * prop-drilling — mount a single `<Toaster />` once, near the root.
+ *
+ *   import { toast } from '@nqmcreative/ui';
+ *   toast.success('Project archived');
+ *   toast.error('Upload failed', { description: 'The file is over 25 MB.' });
+ *   const id = toast.loading('Rendering…');
+ *   toast.dismiss(id);
+ */
+let nextId = 0;
+class ToastStore {
+    items = $state([]);
+    timers = new Map();
+    /** Fires a toast and returns its id, for `update` or `dismiss`. */
+    show(title, options = {}) {
+        const id = nextId++;
+        const duration = options.duration ?? (options.loading ? 0 : 5000);
+        const toast = { ...options, id, title, tone: options.tone ?? 'neutral', duration };
+        this.items = [...this.items, toast];
+        if (duration > 0)
+            this.timers.set(id, setTimeout(() => this.dismiss(id), duration));
+        return id;
+    }
+    /** Replaces a live toast in place — a loading toast becoming a result. */
+    update(id, title, options = {}) {
+        const existing = this.items.find((t) => t.id === id);
+        if (!existing)
+            return;
+        clearTimeout(this.timers.get(id));
+        const duration = options.duration ?? (options.loading ? 0 : 5000);
+        const next = {
+            ...existing,
+            ...options,
+            loading: options.loading ?? false,
+            title,
+            tone: options.tone ?? existing.tone,
+            duration
+        };
+        this.items = this.items.map((t) => (t.id === id ? next : t));
+        if (duration > 0)
+            this.timers.set(id, setTimeout(() => this.dismiss(id), duration));
+    }
+    dismiss(id) {
+        clearTimeout(this.timers.get(id));
+        this.timers.delete(id);
+        this.items = this.items.filter((t) => t.id !== id);
+    }
+    clear() {
+        this.timers.forEach(clearTimeout);
+        this.timers.clear();
+        this.items = [];
+    }
+    success = (title, options) => this.show(title, { ...options, tone: 'success' });
+    error = (title, options) => this.show(title, { ...options, tone: 'danger', duration: options?.duration ?? 8000 });
+    warning = (title, options) => this.show(title, { ...options, tone: 'warning' });
+    info = (title, options) => this.show(title, { ...options, tone: 'info' });
+    loading = (title, options) => this.show(title, { ...options, tone: 'brand', loading: true });
+}
+export const toast = new ToastStore();