material 1.0.3 → 3.0.0-next.0

package/dist/components/snackbar/constants.d.ts

@@ -0,0 +1,132 @@
+/**
+ * Where the snackbar sits along the bottom edge
+ * @category Components
+ */
+export declare const SNACKBAR_POSITIONS: {
+    /** Centred (default) */
+    readonly CENTER: "center";
+    /** Against the leading edge */
+    readonly START: "start";
+    /** Against the trailing edge */
+    readonly END: "end";
+};
+/**
+ * Duration presets (Compose Material 3 `SnackbarDuration`)
+ * @category Components
+ */
+export declare const SNACKBAR_DURATIONS: {
+    /** 4 seconds, the default without an action */
+    readonly SHORT: "short";
+    /** 10 seconds */
+    readonly LONG: "long";
+    /** Stays until acted on or dismissed, the default with an action */
+    readonly INDEFINITE: "indefinite";
+};
+/**
+ * Milliseconds behind the presets; 0 means no auto-dismiss
+ * @category Components
+ */
+export declare const SNACKBAR_DURATION_MS: {
+    readonly short: 4000;
+    readonly long: 10000;
+    readonly indefinite: 0;
+};
+/**
+ * Snackbar visibility states
+ * @category Components
+ */
+export declare const SNACKBAR_STATES: {
+    readonly VISIBLE: "visible";
+    readonly HIDDEN: "hidden";
+};
+/**
+ * Snackbar queue behaviors
+ *
+ * Controls how a newly shown snackbar interacts with the one currently on
+ * screen and any still waiting in the queue.
+ * @category Components
+ */
+export declare const SNACKBAR_QUEUE_BEHAVIORS: {
+    /** Wait in line: shown one at a time, in order (default) */
+    readonly QUEUE: "queue";
+    /** Replace: dismiss the current snackbar, drop any pending ones, and show
+     *  this snackbar right away (last wins) */
+    readonly REPLACE: "replace";
+};
+/**
+ * Snackbar event types
+ * @category Components
+ */
+export declare const SNACKBAR_EVENTS: {
+    /** The snackbar is on screen */
+    readonly OPEN: "open";
+    /** The snackbar is leaving; the event carries the reason */
+    readonly CLOSE: "close";
+    /** The action button was clicked */
+    readonly ACTION: "action";
+    /** Fired with `close`; the queue listens to it */
+    readonly DISMISS: "dismiss";
+};
+/**
+ * Why a snackbar closed
+ * @category Components
+ */
+export declare const SNACKBAR_CLOSE_REASONS: {
+    /** The duration ran out */
+    readonly TIMEOUT: "timeout";
+    /** The action was clicked */
+    readonly ACTION: "action";
+    /** The close icon was clicked */
+    readonly CLOSE_BUTTON: "close-button";
+    /** Escape was pressed while focus was inside */
+    readonly ESCAPE: "escape";
+    /** `hide()` was called */
+    readonly API: "api";
+    /** The queue replaced or cleared it */
+    readonly QUEUE: "queue";
+};
+/**
+ * Default configuration values for snackbar
+ * @category Components
+ */
+export declare const SNACKBAR_DEFAULTS: {
+    /** Default display position */
+    readonly POSITION: "center";
+    /** Default queue behavior */
+    readonly QUEUE_BEHAVIOR: "queue";
+    /** Delay in milliseconds between a dismissed snackbar and the next one */
+    readonly QUEUE_GAP: 200;
+    /** Accessible name of the close icon */
+    readonly CLOSE_LABEL: "Dismiss";
+    /** The longest of the exit transitions, after which the element is
+     *  removed whether or not `transitionend` came */
+    readonly ANIMATION_DURATION: 425;
+    /** An action wider than this moves below the text
+     *  (`design_snackbar_action_inline_max_width`) */
+    readonly ACTION_INLINE_MAX_WIDTH: 128;
+};
+/**
+ * CSS class names used by the snackbar component, without the prefix
+ * @category Components
+ */
+export declare const SNACKBAR_CLASSES: {
+    readonly ROOT: "snackbar";
+    readonly CENTER: "snackbar--center";
+    readonly START: "snackbar--start";
+    readonly END: "snackbar--end";
+    readonly VISIBLE: "snackbar--visible";
+    /** An action is present */
+    readonly WITH_ACTION: "snackbar--with-action";
+    /** A close icon is present */
+    readonly DISMISSIBLE: "snackbar--dismissible";
+    /** The action is too wide to sit beside the text */
+    readonly ACTION_BELOW: "snackbar--action-below";
+    readonly TEXT: "snackbar__text";
+    readonly ACTION: "snackbar__action";
+    readonly CLOSE: "snackbar__close";
+};
+/**
+ * The close icon (Material Symbols "close")
+ * @category Components
+ */
+export declare const SNACKBAR_CLOSE_ICON: string;

package/dist/components/snackbar/constants.js

@@ -0,0 +1,60 @@
+export const SNACKBAR_POSITIONS = {
+    CENTER: 'center',
+    START: 'start',
+    END: 'end'
+};
+export const SNACKBAR_DURATIONS = {
+    SHORT: 'short',
+    LONG: 'long',
+    INDEFINITE: 'indefinite'
+};
+export const SNACKBAR_DURATION_MS = {
+    short: 4000,
+    long: 10000,
+    indefinite: 0
+};
+export const SNACKBAR_STATES = {
+    VISIBLE: 'visible',
+    HIDDEN: 'hidden'
+};
+export const SNACKBAR_QUEUE_BEHAVIORS = {
+    QUEUE: 'queue',
+    REPLACE: 'replace'
+};
+export const SNACKBAR_EVENTS = {
+    OPEN: 'open',
+    CLOSE: 'close',
+    ACTION: 'action',
+    DISMISS: 'dismiss'
+};
+export const SNACKBAR_CLOSE_REASONS = {
+    TIMEOUT: 'timeout',
+    ACTION: 'action',
+    CLOSE_BUTTON: 'close-button',
+    ESCAPE: 'escape',
+    API: 'api',
+    QUEUE: 'queue'
+};
+export const SNACKBAR_DEFAULTS = {
+    POSITION: SNACKBAR_POSITIONS.CENTER,
+    QUEUE_BEHAVIOR: SNACKBAR_QUEUE_BEHAVIORS.QUEUE,
+    QUEUE_GAP: 200,
+    CLOSE_LABEL: 'Dismiss',
+    ANIMATION_DURATION: 425,
+    ACTION_INLINE_MAX_WIDTH: 128
+};
+export const SNACKBAR_CLASSES = {
+    ROOT: 'snackbar',
+    CENTER: 'snackbar--center',
+    START: 'snackbar--start',
+    END: 'snackbar--end',
+    VISIBLE: 'snackbar--visible',
+    WITH_ACTION: 'snackbar--with-action',
+    DISMISSIBLE: 'snackbar--dismissible',
+    ACTION_BELOW: 'snackbar--action-below',
+    TEXT: 'snackbar__text',
+    ACTION: 'snackbar__action',
+    CLOSE: 'snackbar__close'
+};
+export const SNACKBAR_CLOSE_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width="24" height="24" fill="currentColor" aria-hidden="true">' +
+    '<path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>';

package/dist/components/snackbar/features.d.ts

@@ -0,0 +1,26 @@
+import { BaseComponent, SnackbarConfig } from "./types.js";
+/**
+ * Adds the action: a text button, the one M3 allows, coloured inverse-primary
+ * by the stylesheet. Reusing the button gives it the state layers, the focus
+ * ring and the touch target.
+ * @param {SnackbarConfig} config - Component configuration
+ * @returns {Function} Higher-order function that adds the action button
+ */
+export declare const withActionButton: (config: SnackbarConfig) => <C extends BaseComponent>(component: C) => C & Pick<BaseComponent, "action" | "actionButton">;
+/**
+ * Adds the optional close affordance: a standard icon button (40dp, 24dp
+ * icon; `SnackbarTokens.IconSize`), coloured inverse-on-surface by the
+ * stylesheet.
+ * @param {SnackbarConfig} config - Component configuration
+ * @returns {Function} Higher-order function that adds the close button
+ */
+export declare const withCloseButton: (config: SnackbarConfig) => <C extends BaseComponent>(component: C) => C & Pick<BaseComponent, "close" | "closeButton">;
+/**
+ * Adds the auto-dismiss timer. It emits `timeout` when the duration runs out
+ * and holds while the pointer is over the snackbar or focus is inside it:
+ * Compose extends the timeout through the accessibility manager, and pausing
+ * is the web's equivalent for someone who needs more time (WCAG 2.2.1).
+ * @param {SnackbarConfig} config - Component configuration
+ * @returns {Function} Higher-order function that adds timer features
+ */
+export declare const withDismissTimer: (config: SnackbarConfig) => <C extends BaseComponent>(component: C) => C & Required<Pick<BaseComponent, "timer">>;

package/dist/components/snackbar/features.js

@@ -0,0 +1,125 @@
+import createButton from "../button/index.js";
+import createIconButton from "../icon-button/index.js";
+import { SNACKBAR_CLASSES, SNACKBAR_CLOSE_ICON } from "./constants.js";
+import { durationToMs } from "./config.js";
+export const withActionButton = (config) => (component) => {
+    if (!config.action)
+        return component;
+    const prefix = config.prefix || 'mtrl';
+    const button = createButton({
+        text: config.action,
+        variant: 'text',
+        prefix,
+        class: `${prefix}-${SNACKBAR_CLASSES.ACTION}`,
+    });
+    component.element.classList.add(`${prefix}-${SNACKBAR_CLASSES.WITH_ACTION}`);
+    component.element.appendChild(button.element);
+    return {
+        ...component,
+        action: button,
+        actionButton: button.element,
+    };
+};
+export const withCloseButton = (config) => (component) => {
+    if (!config.dismissible)
+        return component;
+    const prefix = config.prefix || 'mtrl';
+    const button = createIconButton({
+        icon: SNACKBAR_CLOSE_ICON,
+        variant: 'standard',
+        size: 's',
+        ariaLabel: config.closeLabel || 'Dismiss',
+        prefix,
+        class: `${prefix}-${SNACKBAR_CLASSES.CLOSE}`,
+    });
+    component.element.classList.add(`${prefix}-${SNACKBAR_CLASSES.DISMISSIBLE}`);
+    component.element.appendChild(button.element);
+    return {
+        ...component,
+        close: button,
+        closeButton: button.element,
+    };
+};
+export const withDismissTimer = (config) => (component) => {
+    const element = component.element;
+    let duration = durationToMs(config.duration, Boolean(config.action));
+    let timeoutId = null;
+    let remaining = 0;
+    let startedAt = 0;
+    let running = false;
+    let hovered = false;
+    let focused = false;
+    const fire = () => {
+        timeoutId = null;
+        running = false;
+        component.emit?.('timeout');
+    };
+    const run = () => {
+        if (timeoutId !== null || remaining <= 0)
+            return;
+        startedAt = Date.now();
+        timeoutId = setTimeout(fire, remaining);
+    };
+    const halt = () => {
+        if (timeoutId === null)
+            return;
+        clearTimeout(timeoutId);
+        timeoutId = null;
+        remaining -= Date.now() - startedAt;
+    };
+    const held = () => hovered || focused;
+    const startTimer = () => {
+        halt();
+        remaining = duration;
+        running = duration > 0;
+        if (running && !held())
+            run();
+    };
+    const stopTimer = () => {
+        halt();
+        running = false;
+        remaining = 0;
+    };
+    const resume = () => {
+        if (running && !held())
+            run();
+    };
+    element.addEventListener('pointerenter', () => {
+        hovered = true;
+        halt();
+    });
+    element.addEventListener('pointerleave', () => {
+        hovered = false;
+        resume();
+    });
+    element.addEventListener('focusin', () => {
+        focused = true;
+        halt();
+    });
+    element.addEventListener('focusout', (event) => {
+        const next = event.relatedTarget;
+        if (next instanceof Node && element.contains(next))
+            return;
+        focused = false;
+        resume();
+    });
+    const originalDestroy = component.lifecycle?.destroy;
+    if (component.lifecycle) {
+        component.lifecycle.destroy = () => {
+            stopTimer();
+            originalDestroy?.call(component.lifecycle);
+        };
+    }
+    const timer = {
+        start: startTimer,
+        stop: stopTimer,
+        setDuration: (value) => {
+            duration = Number.isFinite(value) && value > 0 ? value : 0;
+        },
+        getDuration: () => duration,
+    };
+    return {
+        ...component,
+        timer,
+    };
+};

package/dist/components/snackbar/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from "./snackbar.js";
+export { clearSnackbars } from "./snackbar.js";
+export type { SnackbarConfig, SnackbarComponent, SnackbarEvent, SnackbarEvents, SnackbarPosition, SnackbarDuration, SnackbarCloseReason, SnackbarQueueBehavior, } from "./types.js";
+export { SNACKBAR_POSITIONS, SNACKBAR_DURATIONS, SNACKBAR_CLOSE_REASONS, SNACKBAR_QUEUE_BEHAVIORS, } from "./constants.js";

package/dist/components/snackbar/index.js

@@ -0,0 +1,3 @@
+export { default } from "./snackbar.js";
+export { clearSnackbars } from "./snackbar.js";
+export { SNACKBAR_POSITIONS, SNACKBAR_DURATIONS, SNACKBAR_CLOSE_REASONS, SNACKBAR_QUEUE_BEHAVIORS, } from "./constants.js";

package/dist/components/snackbar/layer.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Places a top-layer snackbar while it shows, and returns how to put it back
+ * once it is hidden.
+ *
+ * It opens where its owner put it (an element's shadow root), or on the body
+ * as without a layer. While a modal `<dialog>` is open, though, everything
+ * outside it is inert, top layer or not: it cannot be clicked and is not
+ * announced. The snackbar then goes inside the topmost modal dialog, above
+ * it. Coming from a shadow root into another tree, it is carried in a shadow
+ * root of its own that adopts the same stylesheets.
+ *
+ * The place follows the modals while the snackbar shows. A modal opening
+ * moves focus into itself, and the snackbar follows it there; the modal it is
+ * in closing sends it back to the modal below, or home. A move takes the
+ * element out of the top layer, so `moved` shows it again, above everything
+ * that opened since. Nothing else changes: the snackbar stays open, its
+ * timer runs on, and it closes once.
+ *
+ * @param element - The snackbar element
+ * @param moved - Called after each move
+ * @returns Restores the element to where it was, or takes it off the page
+ */
+export declare const placeInLayer: (element: HTMLElement, moved: () => void) => (() => void);

package/dist/components/snackbar/layer.js

@@ -0,0 +1,85 @@
+import { deepActiveElement } from "../../core/dom/focus.js";
+const hostOf = (node) => node.host ?? null;
+const up = (node) => {
+    const parent = node.parentNode;
+    return parent && parent.nodeType === 11 ? hostOf(parent) : parent;
+};
+const isModal = (node) => node.localName === 'dialog' && node.matches(':modal');
+const modalsIn = (root, found) => {
+    for (const element of Array.from(root.querySelectorAll('*'))) {
+        if (isModal(element))
+            found.push(element);
+        if (element.shadowRoot)
+            modalsIn(element.shadowRoot, found);
+    }
+    return found;
+};
+const blockingDialog = (doc) => {
+    const active = deepActiveElement();
+    for (let node = active; node; node = up(node)) {
+        if (isModal(node))
+            return node;
+    }
+    if (active && active !== doc.body)
+        return null;
+    const modals = modalsIn(doc, []);
+    return modals[modals.length - 1] ?? null;
+};
+const within = (node, ancestor) => {
+    for (let current = node; current; current = up(current)) {
+        if (current === ancestor)
+            return true;
+    }
+    return false;
+};
+export const placeInLayer = (element, moved) => {
+    const doc = element.ownerDocument;
+    const parent = element.parentNode;
+    const next = element.nextSibling;
+    const home = parent ?? doc.body;
+    let dialog = null;
+    let carrier = null;
+    const leave = () => {
+        dialog?.removeEventListener('close', place);
+        carrier?.remove();
+        carrier = null;
+        dialog = null;
+    };
+    function place() {
+        const blocking = blockingDialog(doc);
+        const target = blocking && !within(home, blocking) ? blocking : null;
+        if (target === dialog && element.isConnected)
+            return;
+        leave();
+        if (target) {
+            const root = home.getRootNode();
+            if (hostOf(root) && root !== target.getRootNode()) {
+                carrier = doc.createElement('div');
+                carrier.style.display = 'contents';
+                const shadow = carrier.attachShadow({ mode: 'open' });
+                shadow.adoptedStyleSheets = root.adoptedStyleSheets;
+                shadow.append(element);
+                target.append(carrier);
+            }
+            else {
+                target.append(element);
+            }
+            dialog = target;
+            target.addEventListener('close', place);
+        }
+        else {
+            home.insertBefore(element, next && next.parentNode === home ? next : null);
+        }
+        moved();
+    }
+    place();
+    doc.addEventListener('focusin', place, true);
+    return () => {
+        doc.removeEventListener('focusin', place, true);
+        leave();
+        if (parent)
+            parent.insertBefore(element, next && next.parentNode === parent ? next : null);
+        else
+            element.remove();
+    };
+};

package/dist/components/snackbar/position.d.ts

@@ -0,0 +1,16 @@
+import { BaseComponent, SnackbarPosition } from "./types.js";
+/**
+ * Position configuration for the withPosition function
+ */
+interface PositionConfig {
+    prefix?: string;
+    position?: SnackbarPosition;
+}
+/**
+ * Adds position handling to snackbar. The position is a class; the
+ * stylesheet does the rest, so nothing here touches inline styles.
+ * @param {PositionConfig} config - Position configuration
+ * @returns {Function} Higher-order function that adds position features
+ */
+export declare const withPosition: (config: PositionConfig) => <C extends BaseComponent>(component: C) => C & Required<Pick<BaseComponent, "position">>;
+export {};

package/dist/components/snackbar/position.js

@@ -0,0 +1,24 @@
+import { SNACKBAR_POSITIONS } from "./constants.js";
+const isPosition = (value) => Object.values(SNACKBAR_POSITIONS).includes(value);
+export const withPosition = (config) => (component) => {
+    const prefix = config.prefix || 'mtrl';
+    let position = isPosition(config.position) ? config.position : SNACKBAR_POSITIONS.CENTER;
+    const className = (value) => `${prefix}-snackbar--${value}`;
+    component.element.classList.add(className(position));
+    return {
+        ...component,
+        position: {
+            getPosition: () => position,
+            setPosition: (next) => {
+                const value = isPosition(next) ? next : SNACKBAR_POSITIONS.CENTER;
+                if (!isPosition(next)) {
+                    console.warn(`Invalid position: ${next}. Using default: ${SNACKBAR_POSITIONS.CENTER}`);
+                }
+                component.element.classList.remove(className(position));
+                position = value;
+                component.element.classList.add(className(position));
+                return component;
+            }
+        }
+    };
+};

package/dist/components/snackbar/queue.d.ts

@@ -0,0 +1,15 @@
+import { SnackbarQueue } from "./types.js";
+/**
+ * Creates a queue manager for snackbars
+ *
+ * Ensures only one snackbar is visible at a time. Supports two behaviors when
+ * a new snackbar is added (see {@link SnackbarQueueAddOptions}):
+ * - `'queue'` (default): the snackbar waits its turn and is shown in order.
+ * - `'replace'`: the snackbar evicts whatever is currently on screen, drops any
+ *   still-pending snackbars, and shows immediately. This keeps rapid, repeated
+ *   actions snappy instead of serializing a long backlog.
+ *
+ * @param {number} gap - Delay in ms between a dismissed snackbar and the next
+ * @returns {SnackbarQueue} Queue manager with add/clear methods
+ */
+export declare const createSnackbarQueue: (gap?: number) => SnackbarQueue;

package/dist/components/snackbar/queue.js

@@ -0,0 +1,92 @@
+import { SNACKBAR_DEFAULTS, SNACKBAR_QUEUE_BEHAVIORS } from "./constants.js";
+export const createSnackbarQueue = (gap = SNACKBAR_DEFAULTS.QUEUE_GAP) => {
+    const pending = [];
+    let current = null;
+    let currentDismiss = null;
+    let advanceTimer = null;
+    const clearAdvanceTimer = () => {
+        if (advanceTimer !== null) {
+            clearTimeout(advanceTimer);
+            advanceTimer = null;
+        }
+    };
+    const releaseCurrent = () => {
+        if (current && currentDismiss) {
+            current.off?.('dismiss', currentDismiss);
+        }
+        current = null;
+        currentDismiss = null;
+    };
+    const evictCurrent = () => {
+        const active = current;
+        releaseCurrent();
+        try {
+            active?._hide?.();
+        }
+        catch {
+        }
+    };
+    const dropPending = () => {
+        for (const snackbar of pending.splice(0))
+            snackbar._hide?.();
+    };
+    const showNext = () => {
+        clearAdvanceTimer();
+        if (current || pending.length === 0)
+            return;
+        const snackbar = pending.shift();
+        current = snackbar;
+        const handleDismiss = () => {
+            releaseCurrent();
+            if (pending.length > 0) {
+                advanceTimer = setTimeout(() => {
+                    advanceTimer = null;
+                    showNext();
+                }, gap);
+            }
+        };
+        currentDismiss = handleDismiss;
+        snackbar.on?.('dismiss', handleDismiss);
+        snackbar._show();
+    };
+    return {
+        add(snackbar, options = {}) {
+            if (!snackbar._show) {
+                throw new Error('Snackbar must implement _show method');
+            }
+            const behavior = options.behavior ?? SNACKBAR_QUEUE_BEHAVIORS.QUEUE;
+            if (current && current.element && !current.element.isConnected) {
+                releaseCurrent();
+            }
+            if (behavior === SNACKBAR_QUEUE_BEHAVIORS.REPLACE) {
+                dropPending();
+                clearAdvanceTimer();
+                evictCurrent();
+                pending.push(snackbar);
+                showNext();
+                return;
+            }
+            pending.push(snackbar);
+            if (!current) {
+                showNext();
+            }
+        },
+        clear() {
+            dropPending();
+            clearAdvanceTimer();
+            evictCurrent();
+        },
+        remove(snackbar) {
+            if (snackbar === current) {
+                currentDismiss?.();
+                return;
+            }
+            const index = pending.indexOf(snackbar);
+            if (index >= 0)
+                pending.splice(index, 1);
+        },
+        getLength() {
+            return pending.length + (current ? 1 : 0);
+        }
+    };
+};

package/dist/components/snackbar/snackbar.d.ts

@@ -0,0 +1,17 @@
+import { SnackbarConfig, SnackbarComponent } from "./types.js";
+/**
+ * Creates a new Snackbar component
+ * @param {SnackbarConfig} config - Snackbar configuration
+ * @returns {SnackbarComponent} Snackbar component instance
+ */
+declare const createSnackbar: (config: SnackbarConfig) => SnackbarComponent;
+/**
+ * Dismisses the snackbar on screen and drops the ones still waiting.
+ *
+ * Messages belong to the thing that raised them: a drawer that closes, an
+ * account that signs out. Without this the queue outlives them, so a message
+ * about a list nobody is looking at any more stays on screen, and, because the
+ * queue shows one at a time, the next message waits behind it.
+ */
+export declare const clearSnackbars: () => void;
+export default createSnackbar;

package/dist/components/snackbar/snackbar.js

@@ -0,0 +1,25 @@
+import { pipe } from "../../core/compose/index.js";
+import { createBase, withElement } from "../../core/compose/component.js";
+import { withActionButton, withCloseButton, withDismissTimer } from "./features.js";
+import { withPosition } from "./position.js";
+import { withEvents, withText, withLifecycle } from "../../core/compose/features/index.js";
+import { withAPI } from "./api.js";
+import { createSnackbarQueue } from "./queue.js";
+import { createBaseConfig, getElementConfig, getTextConfig, getApiConfig } from "./config.js";
+const queue = createSnackbarQueue();
+const createSnackbar = (config) => {
+    if (!config.message) {
+        throw new Error('Snackbar message is required');
+    }
+    const baseConfig = createBaseConfig(config);
+    try {
+        const snackbar = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withPosition(baseConfig), withText(getTextConfig(baseConfig)), withActionButton(baseConfig), withCloseButton(baseConfig), withLifecycle(), withDismissTimer(baseConfig), comp => withAPI(getApiConfig(comp, queue, baseConfig))(comp))(baseConfig);
+        return snackbar;
+    }
+    catch (error) {
+        console.error('Snackbar creation error:', error instanceof Error ? error.message : String(error));
+        throw new Error(`Failed to create snackbar: ${error instanceof Error ? error.message : String(error)}`);
+    }
+};
+export const clearSnackbars = () => queue.clear();
+export default createSnackbar;