sileo-solid 0.1.0

package/dist/index.mjs

@@ -0,0 +1,824 @@
+function __insertCSS(code) {
+  if (!code || typeof document == 'undefined') return
+  let head = document.head || document.getElementsByTagName('head')[0]
+  let style = document.createElement('style')
+  style.type = 'text/css'
+  head.appendChild(style)
+  ;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
+}
+
+import { createMemo, createSignal, createEffect, onCleanup, onMount, Show, For } from 'solid-js';
+import 'motion';
+
+__insertCSS(":root{--sileo-spring-easing:linear(\r\n\t\t0,\r\n\t\t0.002 0.6%,\r\n\t\t0.007 1.2%,\r\n\t\t0.015 1.8%,\r\n\t\t0.026 2.4%,\r\n\t\t0.041 3.1%,\r\n\t\t0.06 3.8%,\r\n\t\t0.108 5.3%,\r\n\t\t0.157 6.6%,\r\n\t\t0.214 8%,\r\n\t\t0.467 13.7%,\r\n\t\t0.577 16.3%,\r\n\t\t0.631 17.7%,\r\n\t\t0.682 19.1%,\r\n\t\t0.73 20.5%,\r\n\t\t0.771 21.8%,\r\n\t\t0.808 23.1%,\r\n\t\t0.844 24.5%,\r\n\t\t0.874 25.8%,\r\n\t\t0.903 27.2%,\r\n\t\t0.928 28.6%,\r\n\t\t0.952 30.1%,\r\n\t\t0.972 31.6%,\r\n\t\t0.988 33.1%,\r\n\t\t1.01 35.7%,\r\n\t\t1.025 38.5%,\r\n\t\t1.034 41.6%,\r\n\t\t1.038 45%,\r\n\t\t1.035 50.1%,\r\n\t\t1.012 64.2%,\r\n\t\t1.003 73%,\r\n\t\t0.999 83.7%,\r\n\t\t1\r\n\t);--sileo-duration:600ms;--sileo-height:40px;--sileo-width:350px;--sileo-state-success:oklch(0.723 0.219 142.136);--sileo-state-loading:oklch(0.556 0 0);--sileo-state-error:oklch(0.637 0.237 25.331);--sileo-state-warning:oklch(0.795 0.184 86.047);--sileo-state-info:oklch(0.685 0.169 237.323);--sileo-state-action:oklch(0.623 0.214 259.815)}[data-sileo-toast]{position:relative;cursor:pointer;pointer-events:auto;touch-action:none;border:0;background:0 0;padding:0;width:var(--sileo-width);height:var(--_h,var(--sileo-height));opacity:0;transform:translateZ(0) scale(.95);transform-origin:center;contain:layout style;overflow:visible}[data-sileo-toast][data-state=loading]{cursor:default}[data-sileo-toast][data-ready=true]{opacity:1;transform:translateZ(0) scale(1);transition:transform calc(var(--sileo-duration) * .66) var(--sileo-spring-easing),opacity calc(var(--sileo-duration) * .66) var(--sileo-spring-easing),margin-bottom calc(var(--sileo-duration) * .66) var(--sileo-spring-easing),margin-top calc(var(--sileo-duration) * .66) var(--sileo-spring-easing),height var(--sileo-duration) var(--sileo-spring-easing)}[data-sileo-viewport][data-position^=top] [data-sileo-toast]:not([data-ready=true]){transform:translateY(-6px) scale(.95)}[data-sileo-viewport][data-position^=bottom] [data-sileo-toast]:not([data-ready=true]){transform:translateY(6px) scale(.95)}[data-sileo-toast][data-ready=true][data-exiting=true]{opacity:0;pointer-events:none}[data-sileo-viewport][data-position^=top] [data-sileo-toast][data-ready=true][data-exiting=true]{transform:translateY(-6px) scale(.95)}[data-sileo-viewport][data-position^=bottom] [data-sileo-toast][data-ready=true][data-exiting=true]{transform:translateY(6px) scale(.95)}[data-sileo-canvas]{position:absolute;left:0;right:0;pointer-events:none;transform:translateZ(0);contain:layout style;overflow:visible}[data-sileo-canvas][data-edge=top]{bottom:0;transform:scaleY(-1) translateZ(0)}[data-sileo-canvas][data-edge=bottom]{top:0}[data-sileo-svg]{overflow:visible}[data-sileo-header]{position:absolute;z-index:20;display:flex;align-items:center;padding:.5rem;height:var(--sileo-height);overflow:hidden;left:var(--_px,0);transform:var(--_ht);max-width:var(--_pw)}[data-sileo-toast][data-ready=true] [data-sileo-header]{transition:transform var(--sileo-duration) var(--sileo-spring-easing),left var(--sileo-duration) var(--sileo-spring-easing),max-width var(--sileo-duration) var(--sileo-spring-easing)}[data-sileo-header][data-edge=top]{bottom:0}[data-sileo-header][data-edge=bottom]{top:0}[data-sileo-header-stack]{position:relative;display:inline-flex;align-items:center;height:100%}[data-sileo-header-inner]{display:flex;align-items:center;gap:.5rem;white-space:nowrap;opacity:1;filter:blur(0px);transform:translateZ(0)}[data-sileo-header-inner][data-layer=current]{position:relative;z-index:1;animation:sileo-header-enter var(--sileo-duration) var(--sileo-spring-easing) both}[data-sileo-header-inner][data-exiting=true],[data-sileo-header-inner][data-layer=current]:not(:only-child){will-change:opacity,filter}[data-sileo-header-inner][data-layer=prev]{position:absolute;left:0;top:0;z-index:0;pointer-events:none}[data-sileo-header-inner][data-exiting=true]{animation:sileo-header-exit calc(var(--sileo-duration) * .7) ease forwards}[data-sileo-badge]{display:flex;height:24px;width:24px;flex-shrink:0;align-items:center;justify-content:center;padding:2px;box-sizing:border-box;border-radius:9999px;color:var(--sileo-tone,currentColor);background-color:var(--sileo-tone-bg,transparent)}[data-sileo-title]{font-size:.825rem;line-height:1rem;font-weight:500;text-transform:capitalize;color:var(--sileo-tone,currentColor)}:is([data-sileo-badge],[data-sileo-title],[data-sileo-button])[data-state]{--_c:var(--sileo-state-success)}:is(\r[data-sileo-badge],[data-sileo-title],[data-sileo-button]\r)[data-state=loading]{--_c:var(--sileo-state-loading)}:is(\r[data-sileo-badge],[data-sileo-title],[data-sileo-button]\r)[data-state=error]{--_c:var(--sileo-state-error)}:is(\r[data-sileo-badge],[data-sileo-title],[data-sileo-button]\r)[data-state=warning]{--_c:var(--sileo-state-warning)}:is(\r[data-sileo-badge],[data-sileo-title],[data-sileo-button]\r)[data-state=info]{--_c:var(--sileo-state-info)}:is(\r[data-sileo-badge],[data-sileo-title],[data-sileo-button]\r)[data-state=action]{--_c:var(--sileo-state-action)}:is([data-sileo-badge],[data-sileo-title])[data-state]{--sileo-tone:var(--_c);--sileo-tone-bg:color-mix(in oklch, var(--_c) 20%, transparent)}[data-sileo-content]{position:absolute;left:0;z-index:10;width:100%;pointer-events:none;opacity:var(--_co, 0)}[data-sileo-content]:not([data-visible=true]){content-visibility:hidden}[data-sileo-toast][data-ready=true] [data-sileo-content]{transition:opacity calc(var(--sileo-duration) * .08) ease calc(var(--sileo-duration) * .04)}[data-sileo-content][data-edge=top]{top:0}[data-sileo-content][data-edge=bottom]{top:var(--sileo-height)}[data-sileo-content][data-visible=true]{pointer-events:auto}[data-sileo-toast][data-ready=true] [data-sileo-content][data-visible=true]{transition:opacity calc(var(--sileo-duration) * .6) ease calc(var(--sileo-duration) * .3)}[data-sileo-description]{width:100%;text-align:left;padding:1rem;font-size:.875rem;line-height:1.25rem;contain:layout style paint;content-visibility:auto;color:rgba(0,0,0,.7)}[data-sileo-button]{display:flex;align-items:center;justify-content:center;height:1.75rem;padding:0 .625rem;margin-top:.75rem;border-radius:9999px;border:0;font-size:.75rem;font-weight:500;cursor:pointer;color:var(--sileo-btn-color,currentColor);background-color:var(--sileo-btn-bg,transparent);transition:background-color 150ms ease}[data-sileo-button]:hover{background-color:var(--sileo-btn-bg-hover,transparent)}[data-sileo-button][data-state]{--sileo-btn-color:var(--_c);--sileo-btn-bg:color-mix(in oklch, var(--_c) 15%, transparent);--sileo-btn-bg-hover:color-mix(in oklch, var(--_c) 25%, transparent)}[data-sileo-icon=spin]{animation:sileo-spin 1s linear infinite}@keyframes sileo-spin{to{transform:rotate(360deg)}}@keyframes sileo-header-enter{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:blur(0px)}}@keyframes sileo-header-exit{from{opacity:1;filter:blur(0px)}to{opacity:0;filter:blur(6px)}}[data-sileo-viewport]{position:fixed;z-index:50;display:flex;gap:.75rem;padding:.75rem;pointer-events:none;max-width:calc(100vw - 1.5rem);contain:layout style}[data-sileo-viewport][data-position^=top] [data-sileo-toast]:not([data-ready=true]){margin-bottom:calc(-1 * (var(--sileo-height) + .75rem))}[data-sileo-viewport][data-position^=bottom] [data-sileo-toast]:not([data-ready=true]){margin-top:calc(-1 * (var(--sileo-height) + .75rem))}[data-sileo-viewport][data-position^=top]{top:0;flex-direction:column-reverse}[data-sileo-viewport][data-position^=bottom]{bottom:0;flex-direction:column}[data-sileo-viewport][data-position$=left]{left:0;align-items:flex-start}[data-sileo-viewport][data-position$=right]{right:0;align-items:flex-end}[data-sileo-viewport][data-position$=center]{left:50%;transform:translateX(-50%);align-items:center}@media (prefers-reduced-motion:no-preference){[data-sileo-toast][data-ready=true]:hover,[data-sileo-toast][data-ready=true][data-exiting=true]{will-change:transform,opacity,height}}@media (prefers-reduced-motion:reduce){[data-sileo-viewport],[data-sileo-viewport] *,[data-sileo-viewport] ::after,[data-sileo-viewport] ::before{animation-duration:0s;animation-iteration-count:1;transition-duration:0s}}[data-sileo-viewport][data-theme=dark] [data-sileo-description]{color:rgba(0,0,0,.7)}[data-sileo-viewport][data-theme=light] [data-sileo-description]{color:rgba(255,255,255,.5)}");
+
+/* --------------------------------- Layout --------------------------------- */ const HEIGHT = 40;
+const WIDTH = 350;
+const DEFAULT_ROUNDNESS = 16;
+/* --------------------------------- Timing --------------------------------- */ const DURATION_MS = 600;
+const DEFAULT_TOAST_DURATION = 6000;
+const EXIT_DURATION = DEFAULT_TOAST_DURATION * 0.1;
+const AUTO_EXPAND_DELAY = DEFAULT_TOAST_DURATION * 0.025;
+const AUTO_COLLAPSE_DELAY = DEFAULT_TOAST_DURATION - 2000;
+/* --------------------------------- Render --------------------------------- */ const BLUR_RATIO = 0.5;
+const MIN_EXPAND_RATIO = 2.25;
+const SWAP_COLLAPSE_MS = 200;
+const HEADER_EXIT_MS = DURATION_MS * 0.7;
+
+const Icon = (props)=>{
+    const { title, children, ...rest } = props;
+    return /*#__PURE__*/ React.createElement("svg", {
+        ...rest,
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+    }, /*#__PURE__*/ React.createElement("title", null, title), children);
+};
+const ArrowRight = ()=>/*#__PURE__*/ React.createElement(Icon, {
+        title: "Arrow Right"
+    }, /*#__PURE__*/ React.createElement("path", {
+        d: "M5 12h14"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "m12 5 7 7-7 7"
+    }));
+const LifeBuoy = ()=>/*#__PURE__*/ React.createElement(Icon, {
+        title: "Life Buoy"
+    }, /*#__PURE__*/ React.createElement("circle", {
+        cx: "12",
+        cy: "12",
+        r: "10"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "m4.93 4.93 4.24 4.24"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "m14.83 9.17 4.24-4.24"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "m14.83 14.83 4.24 4.24"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "m9.17 14.83-4.24 4.24"
+    }), /*#__PURE__*/ React.createElement("circle", {
+        cx: "12",
+        cy: "12",
+        r: "4"
+    }));
+const LoaderCircle = (props)=>/*#__PURE__*/ React.createElement(Icon, {
+        title: "Loader Circle",
+        ...props
+    }, /*#__PURE__*/ React.createElement("path", {
+        d: "M21 12a9 9 0 1 1-6.219-8.56"
+    }));
+const X = ()=>/*#__PURE__*/ React.createElement(Icon, {
+        title: "X"
+    }, /*#__PURE__*/ React.createElement("path", {
+        d: "M18 6 6 18"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "m6 6 12 12"
+    }));
+const CircleAlert = ()=>/*#__PURE__*/ React.createElement(Icon, {
+        title: "Circle Alert"
+    }, /*#__PURE__*/ React.createElement("circle", {
+        cx: "12",
+        cy: "12",
+        r: "10"
+    }), /*#__PURE__*/ React.createElement("line", {
+        x1: "12",
+        x2: "12",
+        y1: "8",
+        y2: "12"
+    }), /*#__PURE__*/ React.createElement("line", {
+        x1: "12",
+        x2: "12.01",
+        y1: "16",
+        y2: "16"
+    }));
+const Check = ()=>/*#__PURE__*/ React.createElement(Icon, {
+        title: "Check"
+    }, /*#__PURE__*/ React.createElement("path", {
+        d: "M20 6 9 17l-5-5"
+    }));
+
+const STATE_ICON = {
+    success: /*#__PURE__*/ React.createElement(Check, null),
+    loading: /*#__PURE__*/ React.createElement(LoaderCircle, {
+        "data-sileo-icon": "spin",
+        "aria-hidden": "true"
+    }),
+    error: /*#__PURE__*/ React.createElement(X, null),
+    warning: /*#__PURE__*/ React.createElement(CircleAlert, null),
+    info: /*#__PURE__*/ React.createElement(LifeBuoy, null),
+    action: /*#__PURE__*/ React.createElement(ArrowRight, null)
+};
+function GooeyDefs(props) {
+    return /*#__PURE__*/ React.createElement("defs", null, /*#__PURE__*/ React.createElement("filter", {
+        id: props.filterId,
+        x: "-20%",
+        y: "-20%",
+        width: "140%",
+        height: "140%",
+        "color-interpolation-filters": "sRGB"
+    }, /*#__PURE__*/ React.createElement("feGaussianBlur", {
+        in: "SourceGraphic",
+        stdDeviation: props.blur,
+        result: "blur"
+    }), /*#__PURE__*/ React.createElement("feColorMatrix", {
+        in: "blur",
+        type: "matrix",
+        values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10",
+        result: "goo"
+    }), /*#__PURE__*/ React.createElement("feComposite", {
+        in: "SourceGraphic",
+        in2: "goo",
+        operator: "atop"
+    })));
+}
+function Sileo(props) {
+    const state = ()=>props.state ?? "success";
+    const fill = ()=>props.fill ?? "#FFFFFF";
+    const next = createMemo(()=>({
+            title: props.title,
+            description: props.description,
+            state: state(),
+            icon: props.icon,
+            styles: props.styles,
+            button: props.button,
+            fill: fill()
+        }));
+    const [view, setView] = createSignal(next());
+    const [applied, setApplied] = createSignal(props.refreshKey);
+    const [isExpanded, setIsExpanded] = createSignal(false);
+    const [ready, setReady] = createSignal(false);
+    const [pillWidth, setPillWidth] = createSignal(0);
+    const [contentHeight, setContentHeight] = createSignal(0);
+    const hasDesc = createMemo(()=>Boolean(view().description) || Boolean(view().button));
+    const isLoading = createMemo(()=>view().state === "loading");
+    const open = createMemo(()=>hasDesc() && isExpanded() && !isLoading());
+    const allowExpand = createMemo(()=>isLoading() ? false : props.canExpand ?? (!props.interruptKey || props.interruptKey === props.id));
+    const headerKey = createMemo(()=>`${view().state}-${view().title}`);
+    const filterId = `sileo-gooey-${props.id}`;
+    const resolvedRoundness = createMemo(()=>Math.max(0, props.roundness ?? DEFAULT_ROUNDNESS));
+    const blur = createMemo(()=>resolvedRoundness() * BLUR_RATIO);
+    let contentRef;
+    const headerExitRef = {
+        current: null
+    };
+    const autoExpandRef = {
+        current: null
+    };
+    const autoCollapseRef = {
+        current: null
+    };
+    const swapTimerRef = {
+        current: null
+    };
+    const lastRefreshKeyRef = {
+        current: props.refreshKey
+    };
+    const pendingRef = {
+        current: null
+    };
+    const [headerCurrentKey, setHeaderCurrentKey] = createSignal(headerKey());
+    const [headerCurrentView, setHeaderCurrentView] = createSignal(view());
+    const [headerPrevKey, setHeaderPrevKey] = createSignal(null);
+    const [headerPrevView, setHeaderPrevView] = createSignal(null);
+    let innerRef;
+    let headerEl;
+    let pillRaf = 0;
+    createEffect(()=>{
+        headerKey();
+        return;
+    });
+    onCleanup(()=>{
+        cancelAnimationFrame(pillRaf);
+    });
+    createEffect(()=>{
+        if (!hasDesc()) {
+            setContentHeight(0);
+            return;
+        }
+        return;
+    });
+    onMount(()=>{
+        const raf = requestAnimationFrame(()=>setReady(true));
+        return ()=>cancelAnimationFrame(raf);
+    });
+    createEffect(()=>{
+        const hk = headerKey();
+        const v = view();
+        if (headerCurrentKey() === hk) {
+            if (headerCurrentView() === v) return;
+            setHeaderCurrentView(v);
+        } else {
+            setHeaderPrevKey(headerCurrentKey());
+            setHeaderPrevView(headerCurrentView());
+            setHeaderCurrentKey(hk);
+            setHeaderCurrentView(v);
+        }
+    });
+    createEffect(()=>{
+        if (!headerPrevKey()) return;
+        if (headerExitRef.current) clearTimeout(headerExitRef.current);
+        headerExitRef.current = window.setTimeout(()=>{
+            headerExitRef.current = null;
+            setHeaderPrevKey(null);
+            setHeaderPrevView(null);
+        }, HEADER_EXIT_MS);
+        return ()=>{
+            if (headerExitRef.current) {
+                clearTimeout(headerExitRef.current);
+                headerExitRef.current = null;
+            }
+        };
+    });
+    createEffect(()=>{
+        const f = props.fill;
+        if (f !== undefined && view().fill !== f) {
+            setView((prev)=>({
+                    ...prev,
+                    fill: f
+                }));
+        }
+    });
+    createEffect(()=>{
+        const rk = props.refreshKey;
+        const n = next();
+        if (rk === undefined) {
+            setView(n);
+            setApplied(undefined);
+            pendingRef.current = null;
+            lastRefreshKeyRef.current = rk;
+            return;
+        }
+        if (lastRefreshKeyRef.current === rk) return;
+        lastRefreshKeyRef.current = rk;
+        if (swapTimerRef.current) {
+            clearTimeout(swapTimerRef.current);
+            swapTimerRef.current = null;
+        }
+        if (open()) {
+            pendingRef.current = {
+                key: rk,
+                payload: n
+            };
+            setIsExpanded(false);
+            swapTimerRef.current = window.setTimeout(()=>{
+                swapTimerRef.current = null;
+                const pending = pendingRef.current;
+                if (!pending) return;
+                setView(pending.payload);
+                setApplied(pending.key);
+                pendingRef.current = null;
+            }, SWAP_COLLAPSE_MS);
+        } else {
+            pendingRef.current = null;
+            setView(n);
+            setApplied(rk);
+        }
+    });
+    createEffect(()=>{
+        const hd = hasDesc();
+        if (!hd) return;
+        if (autoExpandRef.current) clearTimeout(autoExpandRef.current);
+        if (autoCollapseRef.current) clearTimeout(autoCollapseRef.current);
+        if (props.exiting || !allowExpand()) {
+            setIsExpanded(false);
+            return;
+        }
+        if (props.autoExpandDelayMs == null && props.autoCollapseDelayMs == null) return;
+        const expandDelay = props.autoExpandDelayMs ?? 0;
+        const collapseDelay = props.autoCollapseDelayMs ?? 0;
+        if (expandDelay > 0) {
+            autoExpandRef.current = window.setTimeout(()=>setIsExpanded(true), expandDelay);
+        } else {
+            setIsExpanded(true);
+        }
+        if (collapseDelay > 0) {
+            autoCollapseRef.current = window.setTimeout(()=>setIsExpanded(false), collapseDelay);
+        }
+        return ()=>{
+            if (autoExpandRef.current) clearTimeout(autoExpandRef.current);
+            if (autoCollapseRef.current) clearTimeout(autoCollapseRef.current);
+        };
+    });
+    const minExpanded = HEIGHT * MIN_EXPAND_RATIO;
+    const rawExpanded = createMemo(()=>hasDesc() ? Math.max(minExpanded, HEIGHT + contentHeight()) : minExpanded);
+    const frozenExpandedRef = {
+        current: minExpanded
+    };
+    createEffect(()=>{
+        if (open()) {
+            frozenExpandedRef.current = rawExpanded();
+        }
+    });
+    const expanded = open() ? rawExpanded() : frozenExpandedRef.current;
+    const svgHeight = hasDesc() ? Math.max(expanded, minExpanded) : HEIGHT;
+    const resolvedPillWidth = createMemo(()=>Math.max(pillWidth() || HEIGHT, HEIGHT));
+    HEIGHT + blur() * 3;
+    const pillX = createMemo(()=>props.position === "right" ? WIDTH - resolvedPillWidth() : props.position === "center" ? (WIDTH - resolvedPillWidth()) / 2 : 0);
+    const viewBox = `0 0 ${WIDTH} ${svgHeight}`;
+    const canvasStyle = createMemo(()=>({
+            filter: `url(#${filterId})`
+        }));
+    const rootStyle = createMemo(()=>({
+            "--_h": `${open() ? expanded : HEIGHT}px`,
+            "--_pw": `${resolvedPillWidth()}px`,
+            "--_px": `${pillX()}px`,
+            "--_ht": `translateY(${open() ? props.expand === "bottom" ? 3 : -3 : 0}px) scale(${open() ? 0.9 : 1})`,
+            "--_co": `${open() ? 1 : 0}`
+        }));
+    const handleEnter = (e)=>{
+        props.onMouseEnter?.(e);
+        if (hasDesc()) setIsExpanded(true);
+    };
+    const handleLeave = (e)=>{
+        props.onMouseLeave?.(e);
+        setIsExpanded(false);
+    };
+    const handleTransitionEnd = (e)=>{
+        if (e.propertyName !== "height" && e.propertyName !== "transform") return;
+        if (open()) return;
+        const pending = pendingRef.current;
+        if (!pending) return;
+        if (swapTimerRef.current) {
+            clearTimeout(swapTimerRef.current);
+            swapTimerRef.current = null;
+        }
+        setView(pending.payload);
+        setApplied(pending.key);
+        pendingRef.current = null;
+    };
+    let buttonRef;
+    ({
+        current: props.onDismiss
+    });
+    props.onDismiss;
+    const handleButtonClick = (e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        view().button?.onClick();
+    };
+    const handlePointerDown = (e)=>{
+        if (props.exiting || !props.onDismiss) return;
+        const target = e.target;
+        if (target.closest("[data-sileo-button]")) return;
+        e.clientY;
+        e.currentTarget.setPointerCapture(e.pointerId);
+    };
+    let pillRef;
+    let bodyRef;
+    createEffect(()=>{
+        return;
+    });
+    createEffect(()=>{
+        return;
+    });
+    const curView = headerCurrentView();
+    const prevView = headerPrevView();
+    return /*#__PURE__*/ React.createElement("button", {
+        ref: buttonRef,
+        type: "button",
+        "data-sileo-toast": true,
+        "data-ready": ready(),
+        "data-expanded": open(),
+        "data-exiting": props.exiting,
+        "data-edge": props.expand,
+        "data-position": props.position,
+        "data-state": view().state,
+        class: props.class,
+        style: rootStyle(),
+        onMouseEnter: handleEnter,
+        onMouseLeave: handleLeave,
+        onTransitionEnd: handleTransitionEnd,
+        onPointerDown: handlePointerDown
+    }, /*#__PURE__*/ React.createElement("div", {
+        "data-sileo-canvas": true,
+        "data-edge": props.expand,
+        style: canvasStyle()
+    }, /*#__PURE__*/ React.createElement("svg", {
+        "data-sileo-svg": true,
+        width: WIDTH,
+        height: svgHeight,
+        viewBox: viewBox
+    }, /*#__PURE__*/ React.createElement("title", null, "Sileo Notification"), /*#__PURE__*/ React.createElement(GooeyDefs, {
+        filterId: filterId,
+        blur: blur()
+    }), /*#__PURE__*/ React.createElement("rect", {
+        ref: pillRef,
+        "data-sileo-pill": true,
+        rx: resolvedRoundness(),
+        ry: resolvedRoundness(),
+        fill: view().fill
+    }), /*#__PURE__*/ React.createElement("rect", {
+        ref: bodyRef,
+        "data-sileo-body": true,
+        y: HEIGHT,
+        width: WIDTH,
+        rx: resolvedRoundness(),
+        ry: resolvedRoundness(),
+        fill: view().fill
+    }))), /*#__PURE__*/ React.createElement("div", {
+        ref: headerEl,
+        "data-sileo-header": true,
+        "data-edge": props.expand
+    }, /*#__PURE__*/ React.createElement("div", {
+        "data-sileo-header-stack": true
+    }, /*#__PURE__*/ React.createElement("div", {
+        ref: innerRef,
+        "data-sileo-header-inner": true,
+        "data-layer": "current"
+    }, /*#__PURE__*/ React.createElement("div", {
+        "data-sileo-badge": true,
+        "data-state": curView.state,
+        class: curView.styles?.badge
+    }, curView.icon ?? STATE_ICON[curView.state]), /*#__PURE__*/ React.createElement("span", {
+        "data-sileo-title": true,
+        "data-state": curView.state,
+        class: curView.styles?.title
+    }, curView.title)), /*#__PURE__*/ React.createElement(Show, {
+        when: prevView
+    }, (pv)=>/*#__PURE__*/ React.createElement("div", {
+            "data-sileo-header-inner": true,
+            "data-layer": "prev",
+            "data-exiting": "true"
+        }, /*#__PURE__*/ React.createElement("div", {
+            "data-sileo-badge": true,
+            "data-state": pv().state,
+            class: pv().styles?.badge
+        }, pv().icon ?? STATE_ICON[pv().state]), /*#__PURE__*/ React.createElement("span", {
+            "data-sileo-title": true,
+            "data-state": pv().state,
+            class: pv().styles?.title
+        }, pv().title))))), hasDesc() && /*#__PURE__*/ React.createElement("div", {
+        "data-sileo-content": true,
+        "data-edge": props.expand,
+        "data-visible": open()
+    }, /*#__PURE__*/ React.createElement("div", {
+        ref: contentRef,
+        "data-sileo-description": true,
+        class: view().styles?.description
+    }, view().description, view().button && /*#__PURE__*/ React.createElement("a", {
+        href: "#",
+        type: "button",
+        "data-sileo-button": true,
+        "data-state": view().state,
+        class: view().styles?.button,
+        onClick: handleButtonClick
+    }, view().button?.title))));
+}
+
+const pillAlign = (pos)=>pos.includes("right") ? "right" : pos.includes("center") ? "center" : "left";
+const expandDir = (pos)=>pos.startsWith("top") ? "bottom" : "top";
+const store = {
+    toasts: [],
+    listeners: new Set(),
+    position: "top-right",
+    options: undefined,
+    emit () {
+        for (const fn of this.listeners)fn(this.toasts);
+    },
+    update (fn) {
+        this.toasts = fn(this.toasts);
+        this.emit();
+    }
+};
+let idCounter = 0;
+const generateId = ()=>`${++idCounter}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+const timeoutKey = (t)=>`${t.id}:${t.instanceId}`;
+/* ------------------------------- Toast API -------------------------------- */ const dismissToast = (id)=>{
+    const item = store.toasts.find((t)=>t.id === id);
+    if (!item || item.exiting) return;
+    store.update((prev)=>prev.map((t)=>t.id === id ? {
+                ...t,
+                exiting: true
+            } : t));
+    setTimeout(()=>store.update((prev)=>prev.filter((t)=>t.id !== id)), EXIT_DURATION);
+};
+const resolveAutopilot = (opts, duration)=>{
+    if (opts.autopilot === false || !duration || duration <= 0) return {};
+    const cfg = typeof opts.autopilot === "object" ? opts.autopilot : undefined;
+    const clamp = (v)=>Math.min(duration, Math.max(0, v));
+    return {
+        expandDelayMs: clamp(cfg?.expand ?? AUTO_EXPAND_DELAY),
+        collapseDelayMs: clamp(cfg?.collapse ?? AUTO_COLLAPSE_DELAY)
+    };
+};
+const mergeOptions = (options)=>({
+        ...store.options,
+        ...options,
+        styles: {
+            ...store.options?.styles,
+            ...options.styles
+        }
+    });
+const buildSileoItem = (merged, id, fallbackPosition)=>{
+    const duration = merged.duration ?? DEFAULT_TOAST_DURATION;
+    const auto = resolveAutopilot(merged, duration);
+    return {
+        ...merged,
+        id,
+        instanceId: generateId(),
+        position: merged.position ?? fallbackPosition ?? store.position,
+        autoExpandDelayMs: auto.expandDelayMs,
+        autoCollapseDelayMs: auto.collapseDelayMs
+    };
+};
+const createToast = (options)=>{
+    const live = store.toasts.filter((t)=>!t.exiting);
+    const merged = mergeOptions(options);
+    const id = merged.id ?? "sileo-default";
+    const prev = live.find((t)=>t.id === id);
+    const item = buildSileoItem(merged, id, prev?.position);
+    if (prev) {
+        store.update((p)=>p.map((t)=>t.id === id ? item : t));
+    } else {
+        store.update((p)=>[
+                ...p.filter((t)=>t.id !== id),
+                item
+            ]);
+    }
+    return {
+        id,
+        duration: merged.duration ?? DEFAULT_TOAST_DURATION
+    };
+};
+const updateToast = (id, options)=>{
+    const existing = store.toasts.find((t)=>t.id === id);
+    if (!existing) return;
+    const item = buildSileoItem(mergeOptions(options), id, existing.position);
+    store.update((prev)=>prev.map((t)=>t.id === id ? item : t));
+};
+const sileo = {
+    show: (opts)=>createToast({
+            ...opts,
+            state: opts.type
+        }).id,
+    success: (opts)=>createToast({
+            ...opts,
+            state: "success"
+        }).id,
+    error: (opts)=>createToast({
+            ...opts,
+            state: "error"
+        }).id,
+    warning: (opts)=>createToast({
+            ...opts,
+            state: "warning"
+        }).id,
+    info: (opts)=>createToast({
+            ...opts,
+            state: "info"
+        }).id,
+    action: (opts)=>createToast({
+            ...opts,
+            state: "action"
+        }).id,
+    promise: (promise, opts)=>{
+        const { id } = createToast({
+            ...opts.loading,
+            state: "loading",
+            duration: null,
+            position: opts.position
+        });
+        const p = typeof promise === "function" ? promise() : promise;
+        p.then((data)=>{
+            if (opts.action) {
+                const actionOpts = typeof opts.action === "function" ? opts.action(data) : opts.action;
+                updateToast(id, {
+                    ...actionOpts,
+                    state: "action",
+                    id
+                });
+            } else {
+                const successOpts = typeof opts.success === "function" ? opts.success(data) : opts.success;
+                updateToast(id, {
+                    ...successOpts,
+                    state: "success",
+                    id
+                });
+            }
+        }).catch((err)=>{
+            const errorOpts = typeof opts.error === "function" ? opts.error(err) : opts.error;
+            updateToast(id, {
+                ...errorOpts,
+                state: "error",
+                id
+            });
+        });
+        return p;
+    },
+    dismiss: dismissToast,
+    clear: (position)=>store.update((prev)=>position ? prev.filter((t)=>t.position !== position) : [])
+};
+/* ------------------------------ Toaster Component ------------------------- */ const THEME_FILLS = {
+    light: "#1a1a1a",
+    dark: "#f2f2f2"
+};
+function useResolvedTheme(theme) {
+    const getInitialTheme = ()=>{
+        if (theme === "light" || theme === "dark") return theme;
+        if (typeof window === "undefined") return "light";
+        return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    };
+    const [resolved, setResolved] = createSignal(getInitialTheme());
+    createEffect(()=>{
+        const t = theme;
+        if (t === "light" || t === "dark") {
+            setResolved(t);
+            return;
+        }
+        const mq = window.matchMedia("(prefers-color-scheme: dark)");
+        const handler = (e)=>setResolved(e.matches ? "dark" : "light");
+        setResolved(mq.matches ? "dark" : "light");
+        mq.addEventListener("change", handler);
+        return ()=>mq.removeEventListener("change", handler);
+    });
+    return resolved;
+}
+function Toaster(props) {
+    const resolvedTheme = useResolvedTheme(props.theme);
+    const [toasts, setToasts] = createSignal(store.toasts);
+    const [activeId, setActiveId] = createSignal();
+    const hoverRef = {
+        current: false
+    };
+    const timersRef = {
+        current: new Map()
+    };
+    const listRef = {
+        current: store.toasts
+    };
+    const latestRef = {
+        current: undefined
+    };
+    const handlersCache = {
+        current: new Map()
+    };
+    createEffect(()=>{
+        store.position = props.position ?? "top-right";
+        store.options = props.options;
+    });
+    const clearAllTimers = ()=>{
+        for (const t of timersRef.current.values())clearTimeout(t);
+        timersRef.current.clear();
+    };
+    const schedule = (items)=>{
+        if (hoverRef.current) return;
+        for (const item of items){
+            if (item.exiting) continue;
+            const key = timeoutKey(item);
+            if (timersRef.current.has(key)) continue;
+            if (item.duration === null) continue;
+            const dur = item.duration ?? DEFAULT_TOAST_DURATION;
+            if (dur <= 0) continue;
+            timersRef.current.set(key, window.setTimeout(()=>dismissToast(item.id), dur));
+        }
+    };
+    createEffect(()=>{
+        const listener = (next)=>setToasts(next);
+        store.listeners.add(listener);
+        return ()=>{
+            store.listeners.delete(listener);
+            clearAllTimers();
+        };
+    });
+    createEffect(()=>{
+        const items = toasts();
+        listRef.current = items;
+        const toastKeys = new Set(items.map(timeoutKey));
+        const toastIds = new Set(items.map((t)=>t.id));
+        for (const [key, timer] of timersRef.current){
+            if (!toastKeys.has(key)) {
+                clearTimeout(timer);
+                timersRef.current.delete(key);
+            }
+        }
+        for (const id of handlersCache.current.keys()){
+            if (!toastIds.has(id)) handlersCache.current.delete(id);
+        }
+        schedule(items);
+    });
+    const handleMouseEnterRef = {
+        current: null
+    };
+    const handleMouseLeaveRef = {
+        current: null
+    };
+    handleMouseEnterRef.current = ()=>{
+        if (hoverRef.current) return;
+        hoverRef.current = true;
+        clearAllTimers();
+    };
+    handleMouseLeaveRef.current = ()=>{
+        if (!hoverRef.current) return;
+        hoverRef.current = false;
+        schedule(listRef.current);
+    };
+    const latest = createMemo(()=>{
+        const items = toasts();
+        for(let i = items.length - 1; i >= 0; i--){
+            if (!items[i].exiting) return items[i].id;
+        }
+        return undefined;
+    });
+    createEffect(()=>{
+        latestRef.current = latest();
+        setActiveId(latest());
+    });
+    const getHandlers = (toastId)=>{
+        let cached = handlersCache.current.get(toastId);
+        if (cached) return cached;
+        cached = {
+            enter: (e)=>{
+                setActiveId((prev)=>prev === toastId ? prev : toastId);
+                handleMouseEnterRef.current?.(e);
+            },
+            leave: (e)=>{
+                setActiveId((prev)=>prev === latestRef.current ? prev : latestRef.current);
+                handleMouseLeaveRef.current?.(e);
+            },
+            dismiss: ()=>dismissToast(toastId)
+        };
+        handlersCache.current.set(toastId, cached);
+        return cached;
+    };
+    const getViewportStyle = (pos)=>{
+        if (props.offset === undefined) return undefined;
+        const o = typeof props.offset === "object" ? props.offset : {
+            top: props.offset,
+            right: props.offset,
+            bottom: props.offset,
+            left: props.offset
+        };
+        const s = {};
+        const px = (v)=>typeof v === "number" ? `${v}px` : v;
+        if (pos.startsWith("top") && o.top) s.top = px(o.top);
+        if (pos.startsWith("bottom") && o.bottom) s.bottom = px(o.bottom);
+        if (pos.endsWith("left") && o.left) s.left = px(o.left);
+        if (pos.endsWith("right") && o.right) s.right = px(o.right);
+        return s;
+    };
+    const activePositionsList = createMemo(()=>{
+        const map = new Map();
+        const items = toasts();
+        const pos = props.position ?? "top-right";
+        for (const t of items){
+            const tPos = t.position ?? pos;
+            const arr = map.get(tPos);
+            if (arr) {
+                arr.push(t);
+            } else {
+                map.set(tPos, [
+                    t
+                ]);
+            }
+        }
+        return Array.from(map, ([p, its])=>({
+                pos: p,
+                items: its
+            }));
+    });
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, props.children, /*#__PURE__*/ React.createElement(For, {
+        each: activePositionsList()
+    }, ({ pos, items })=>{
+        const pill = pillAlign(pos);
+        const expand = expandDir(pos);
+        return /*#__PURE__*/ React.createElement("section", {
+            "data-sileo-viewport": true,
+            "data-position": pos,
+            "data-theme": props.theme ? resolvedTheme() : undefined,
+            "aria-live": "polite",
+            style: getViewportStyle(pos)
+        }, /*#__PURE__*/ React.createElement(For, {
+            each: items
+        }, (item)=>{
+            const h = getHandlers(item.id);
+            return /*#__PURE__*/ React.createElement(Sileo, {
+                id: item.id,
+                state: item.state,
+                title: item.title,
+                description: item.description,
+                position: pill,
+                expand: expand,
+                icon: item.icon,
+                fill: item.fill ?? (props.theme ? THEME_FILLS[resolvedTheme()] : undefined),
+                styles: item.styles,
+                button: item.button,
+                roundness: item.roundness,
+                exiting: item.exiting,
+                autoExpandDelayMs: item.autoExpandDelayMs,
+                autoCollapseDelayMs: item.autoCollapseDelayMs,
+                refreshKey: item.instanceId,
+                canExpand: activeId() === undefined || activeId() === item.id,
+                onMouseEnter: h.enter,
+                onMouseLeave: h.leave,
+                onDismiss: h.dismiss
+            });
+        }));
+    }));
+}
+
+export { Toaster, sileo };