@fluix-ui/vanilla 0.0.2

package/dist/index.global.js

@@ -0,0 +1,1208 @@
+var Fluix = (function (exports) {
+  'use strict';
+
+  // ../core/dist/index.js
+  function createStore(initialState) {
+    let state = initialState;
+    const listeners = /* @__PURE__ */ new Set();
+    const store = {
+      getSnapshot() {
+        return state;
+      },
+      getServerSnapshot() {
+        return initialState;
+      },
+      subscribe(listener) {
+        listeners.add(listener);
+        return () => {
+          listeners.delete(listener);
+        };
+      },
+      update(fn) {
+        const next = fn(state);
+        if (next === state) return;
+        state = next;
+        for (const listener of listeners) {
+          listener();
+        }
+      },
+      set(next) {
+        store.update(() => next);
+      }
+    };
+    return store;
+  }
+  var DEFAULT_CONFIG = {
+    stiffness: 100,
+    damping: 10,
+    mass: 1
+  };
+  var SOLVER_STEP = 1 / 120;
+  var SETTLE_THRESHOLD = 1e-3;
+  var MAX_DURATION_S = 3;
+  function resolveConfig(config) {
+    return { ...DEFAULT_CONFIG, ...config };
+  }
+  function simulateSpring(config) {
+    const { stiffness, damping, mass } = resolveConfig(config);
+    const samples = [];
+    let state = { position: 0, velocity: 0 };
+    let t = 0;
+    samples.push([0, 0]);
+    while (t < MAX_DURATION_S) {
+      const dt = SOLVER_STEP;
+      const acceleration = (-stiffness * (state.position - 1) - damping * state.velocity) / mass;
+      const midVelocity = state.velocity + acceleration * (dt / 2);
+      const midPosition = state.position + state.velocity * (dt / 2);
+      const midAcceleration = (-stiffness * (midPosition - 1) - damping * midVelocity) / mass;
+      state = {
+        velocity: state.velocity + midAcceleration * dt,
+        position: state.position + midVelocity * dt
+      };
+      t += dt;
+      samples.push([t, state.position]);
+      if (Math.abs(state.position - 1) < SETTLE_THRESHOLD && Math.abs(state.velocity) < SETTLE_THRESHOLD) {
+        break;
+      }
+    }
+    samples.push([t, 1]);
+    return samples;
+  }
+  function animateSpring(el, properties, config) {
+    const samples = simulateSpring(config);
+    const totalTime = samples[samples.length - 1][0];
+    const durationMs = Math.round(totalTime * 1e3);
+    const targetFrames = 40;
+    const step = Math.max(1, Math.floor(samples.length / targetFrames));
+    const keyframes = [];
+    for (let i = 0; i < samples.length; i += step) {
+      const [t, value] = samples[i];
+      const frame = { offset: t / totalTime };
+      for (const [prop, { from, to, unit }] of Object.entries(properties)) {
+        const v = from + value * (to - from);
+        frame[prop] = unit ? `${round(v)}${unit}` : round(v);
+      }
+      keyframes.push(frame);
+    }
+    try {
+      return el.animate(keyframes, {
+        duration: durationMs,
+        fill: "forwards",
+        easing: "linear"
+        // Easing is baked into the keyframes
+      });
+    } catch {
+      return null;
+    }
+  }
+  function round(n) {
+    return Math.round(n * 1e3) / 1e3;
+  }
+  var FLUIX_SPRING = {
+    stiffness: 170,
+    damping: 18,
+    mass: 1
+  };
+  var TOAST_DEFAULTS = {
+    duration: 6e3,
+    lightFill: "#FFFFFF",
+    darkFill: "#141416",
+    roundness: 16,
+    theme: "light",
+    position: "top-right",
+    layout: "stack"
+  };
+  var EXIT_DURATION_MS = TOAST_DEFAULTS.duration * 0.1;
+  var AUTO_EXPAND_DELAY_MS = TOAST_DEFAULTS.duration * 0.025;
+  var AUTO_COLLAPSE_DELAY_MS = TOAST_DEFAULTS.duration - 450;
+  var idCounter = 0;
+  function generateId() {
+    return `${++idCounter}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+  }
+  function createToastMachine() {
+    const store = createStore({
+      toasts: [],
+      config: { position: TOAST_DEFAULTS.position, layout: TOAST_DEFAULTS.layout }
+    });
+    const exitTimers = /* @__PURE__ */ new Map();
+    function getConfig() {
+      return store.getSnapshot().config;
+    }
+    function resolveAutopilot(opts, duration) {
+      if (opts.autopilot === false || !duration || duration <= 0) return {};
+      const cfg = typeof opts.autopilot === "object" ? opts.autopilot : void 0;
+      const clamp = (v) => Math.min(duration, Math.max(0, v));
+      return {
+        expandDelayMs: clamp(cfg?.expand ?? AUTO_EXPAND_DELAY_MS),
+        collapseDelayMs: clamp(cfg?.collapse ?? AUTO_COLLAPSE_DELAY_MS)
+      };
+    }
+    function mergeDefaults(opts) {
+      const defaults = getConfig().defaults;
+      if (!defaults) return opts;
+      return {
+        ...defaults,
+        ...opts,
+        styles: { ...defaults.styles, ...opts.styles }
+      };
+    }
+    function buildItem(opts, id, fallbackPosition) {
+      const merged = mergeDefaults(opts);
+      const theme = merged.theme ?? TOAST_DEFAULTS.theme;
+      const duration = merged.duration ?? TOAST_DEFAULTS.duration;
+      const auto = resolveAutopilot(merged, duration);
+      return {
+        ...merged,
+        id,
+        instanceId: generateId(),
+        state: opts.state ?? "success",
+        theme,
+        position: merged.position ?? fallbackPosition ?? getConfig().position ?? TOAST_DEFAULTS.position,
+        duration,
+        fill: merged.fill ?? (theme === "dark" ? TOAST_DEFAULTS.darkFill : TOAST_DEFAULTS.lightFill),
+        roundness: merged.roundness ?? TOAST_DEFAULTS.roundness,
+        exiting: false,
+        autoExpandDelayMs: auto.expandDelayMs,
+        autoCollapseDelayMs: auto.collapseDelayMs
+      };
+    }
+    function create(opts) {
+      const requestedId = opts.id ?? generateId();
+      let resolvedId = requestedId;
+      store.update((prev) => {
+        const live = prev.toasts.filter((t) => !t.exiting);
+        const existing = live.find((t) => t.id === requestedId);
+        const item = buildItem(opts, requestedId, existing?.position);
+        const layout = prev.config.layout ?? TOAST_DEFAULTS.layout;
+        if (existing) {
+          return {
+            ...prev,
+            toasts: prev.toasts.map((t) => t.id === requestedId ? item : t)
+          };
+        }
+        if (layout === "notch") {
+          const currentAtPosition = live.find((t) => t.position === item.position);
+          if (currentAtPosition) {
+            resolvedId = currentAtPosition.id;
+            const replaced = {
+              ...item,
+              id: currentAtPosition.id,
+              instanceId: currentAtPosition.instanceId
+            };
+            return {
+              ...prev,
+              toasts: prev.toasts.map((t) => t.id === currentAtPosition.id ? replaced : t)
+            };
+          }
+          return {
+            ...prev,
+            toasts: [...prev.toasts.filter((t) => t.id !== requestedId), item]
+          };
+        }
+        return {
+          ...prev,
+          toasts: [...prev.toasts.filter((t) => t.id !== requestedId), item]
+        };
+      });
+      return resolvedId;
+    }
+    function update(id, opts) {
+      store.update((prev) => {
+        const existing = prev.toasts.find((t) => t.id === id);
+        if (!existing) return prev;
+        const item = buildItem(opts, id, existing.position);
+        return {
+          ...prev,
+          toasts: prev.toasts.map((t) => t.id === id ? item : t)
+        };
+      });
+    }
+    function dismiss(id) {
+      const { toasts } = store.getSnapshot();
+      const item = toasts.find((t) => t.id === id);
+      if (!item || item.exiting) return;
+      store.update((prev) => ({
+        ...prev,
+        toasts: prev.toasts.map((t) => t.id === id ? { ...t, exiting: true } : t)
+      }));
+      const timer = setTimeout(() => {
+        exitTimers.delete(id);
+        store.update((prev) => ({
+          ...prev,
+          toasts: prev.toasts.filter((t) => t.id !== id)
+        }));
+      }, EXIT_DURATION_MS);
+      exitTimers.set(id, timer);
+    }
+    function clear(position) {
+      store.update((prev) => ({
+        ...prev,
+        toasts: position ? prev.toasts.filter((t) => t.position !== position) : []
+      }));
+    }
+    function configure(config) {
+      store.update((prev) => ({
+        ...prev,
+        config: { ...prev.config, ...config }
+      }));
+    }
+    function destroy() {
+      for (const timer of exitTimers.values()) clearTimeout(timer);
+      exitTimers.clear();
+    }
+    return { store, create, update, dismiss, clear, configure, destroy };
+  }
+  var machine = null;
+  function getToastMachine() {
+    if (!machine) {
+      machine = createToastMachine();
+    }
+    return machine;
+  }
+  function resetToastMachine() {
+    machine?.destroy();
+    machine = null;
+  }
+  var fluix = {
+    /** Show a toast with explicit options. */
+    show(opts) {
+      return getToastMachine().create(opts);
+    },
+    /** Show a success toast. */
+    success(opts) {
+      return getToastMachine().create({ ...opts, state: "success" });
+    },
+    /** Show an error toast. */
+    error(opts) {
+      return getToastMachine().create({ ...opts, state: "error" });
+    },
+    /** Show a warning toast. */
+    warning(opts) {
+      return getToastMachine().create({ ...opts, state: "warning" });
+    },
+    /** Show an info toast. */
+    info(opts) {
+      return getToastMachine().create({ ...opts, state: "info" });
+    },
+    /** Show an action toast (with button). */
+    action(opts) {
+      return getToastMachine().create({ ...opts, state: "action" });
+    },
+    /**
+     * Bind a promise to a toast.
+     * Shows loading state, then transitions to success or error.
+     */
+    promise(promise, opts) {
+      const m = getToastMachine();
+      const id = m.create({
+        ...opts.loading,
+        state: "loading",
+        duration: null,
+        // Persistent until promise resolves
+        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;
+          m.update(id, { ...actionOpts, state: "action", id });
+        } else {
+          const successOpts = typeof opts.success === "function" ? opts.success(data) : opts.success;
+          m.update(id, { ...successOpts, state: "success", id });
+        }
+      }).catch((err) => {
+        const errorOpts = typeof opts.error === "function" ? opts.error(err) : opts.error;
+        m.update(id, { ...errorOpts, state: "error", id });
+      });
+      return p;
+    },
+    /** Dismiss a specific toast by ID. */
+    dismiss(id) {
+      getToastMachine().dismiss(id);
+    },
+    /** Clear all toasts, or only those at a specific position. */
+    clear(position) {
+      getToastMachine().clear(position);
+    },
+    /** Update default toaster configuration. */
+    configure(config) {
+      getToastMachine().configure(config);
+    }
+  };
+  function getPillAlign(position) {
+    if (position.includes("right")) return "right";
+    if (position.includes("center")) return "center";
+    return "left";
+  }
+  function getExpandDirection(position) {
+    return position.startsWith("top") ? "bottom" : "top";
+  }
+  function getViewportAttrs(position, layout = "stack") {
+    return {
+      "data-fluix-viewport": "",
+      "data-position": position,
+      "data-layout": layout,
+      "aria-live": "polite",
+      role: "region"
+    };
+  }
+  function getToastAttrs(item, context) {
+    const edge = getExpandDirection(item.position);
+    const pillAlign = getPillAlign(item.position);
+    return {
+      viewport: getViewportAttrs(item.position),
+      root: {
+        "data-fluix-toast": "",
+        "data-state": item.state,
+        "data-theme": item.theme,
+        "data-ready": String(context.ready),
+        "data-expanded": String(context.expanded),
+        "data-exiting": String(item.exiting),
+        "data-edge": edge,
+        "data-position": pillAlign
+      },
+      canvas: {
+        "data-fluix-canvas": "",
+        "data-edge": edge
+      },
+      header: {
+        "data-fluix-header": "",
+        "data-edge": edge
+      },
+      badge: {
+        "data-fluix-badge": "",
+        "data-state": item.state
+      },
+      title: {
+        "data-fluix-title": "",
+        "data-state": item.state
+      },
+      content: {
+        "data-fluix-content": "",
+        "data-edge": edge,
+        "data-visible": String(context.expanded)
+      },
+      description: {
+        "data-fluix-description": ""
+      },
+      button: {
+        "data-fluix-button": "",
+        "data-state": item.state
+      }
+    };
+  }
+  var SWIPE_DISMISS_THRESHOLD = 30;
+  var SWIPE_MAX_VISUAL = 20;
+  function connectToast(element, callbacks, item) {
+    const cleanups = [];
+    let pointerStartY = null;
+    const hasDescription = Boolean(item.description) || Boolean(item.button);
+    const handleMouseEnter = () => {
+      callbacks.onHoverStart();
+      if (hasDescription && item.state !== "loading") {
+        callbacks.onExpand();
+      }
+    };
+    const handleMouseLeave = () => {
+      callbacks.onHoverEnd();
+      callbacks.onCollapse();
+    };
+    element.addEventListener("mouseenter", handleMouseEnter);
+    element.addEventListener("mouseleave", handleMouseLeave);
+    cleanups.push(() => {
+      element.removeEventListener("mouseenter", handleMouseEnter);
+      element.removeEventListener("mouseleave", handleMouseLeave);
+    });
+    const handlePointerMove = (e) => {
+      if (pointerStartY === null) return;
+      const dy = e.clientY - pointerStartY;
+      const sign = dy > 0 ? 1 : -1;
+      const clamped = Math.min(Math.abs(dy), SWIPE_MAX_VISUAL) * sign;
+      element.style.transform = `translateY(${clamped}px)`;
+    };
+    const handlePointerUp = (e) => {
+      if (pointerStartY === null) return;
+      const dy = e.clientY - pointerStartY;
+      pointerStartY = null;
+      element.style.transform = "";
+      element.removeEventListener("pointermove", handlePointerMove);
+      element.removeEventListener("pointerup", handlePointerUp);
+      if (Math.abs(dy) > SWIPE_DISMISS_THRESHOLD) {
+        callbacks.onDismiss();
+      }
+    };
+    const handlePointerDown = (e) => {
+      if (item.exiting) return;
+      const target = e.target;
+      if (target.closest("[data-fluix-button]")) return;
+      pointerStartY = e.clientY;
+      e.currentTarget.setPointerCapture(e.pointerId);
+      element.addEventListener("pointermove", handlePointerMove, { passive: true });
+      element.addEventListener("pointerup", handlePointerUp, { passive: true });
+    };
+    element.addEventListener("pointerdown", handlePointerDown);
+    cleanups.push(() => {
+      element.removeEventListener("pointerdown", handlePointerDown);
+      element.removeEventListener("pointermove", handlePointerMove);
+      element.removeEventListener("pointerup", handlePointerUp);
+    });
+    return {
+      destroy() {
+        for (const cleanup of cleanups) cleanup();
+        cleanups.length = 0;
+      }
+    };
+  }
+  var Toaster = {
+    getMachine: getToastMachine,
+    reset: resetToastMachine,
+    getAttrs: getToastAttrs,
+    getViewportAttrs,
+    connect: connectToast
+  };
+
+  // src/toast.ts
+  var WIDTH = 350;
+  var HEIGHT = 40;
+  var PILL_PADDING = 10;
+  var MIN_EXPAND_RATIO = 2.25;
+  var HEADER_EXIT_MS = 600 * 0.7;
+  var BODY_MERGE_OVERLAP = 6;
+  var SVG_NS = "http://www.w3.org/2000/svg";
+  function createSvgIcon(state) {
+    const svg = document.createElementNS(SVG_NS, "svg");
+    svg.setAttribute("width", "14");
+    svg.setAttribute("height", "14");
+    svg.setAttribute("viewBox", "0 0 24 24");
+    svg.setAttribute("fill", "none");
+    svg.setAttribute("stroke", "currentColor");
+    svg.setAttribute("stroke-width", "2.5");
+    svg.setAttribute("stroke-linecap", "round");
+    svg.setAttribute("stroke-linejoin", "round");
+    svg.setAttribute("aria-hidden", "true");
+    switch (state) {
+      case "success": {
+        const p = document.createElementNS(SVG_NS, "polyline");
+        p.setAttribute("points", "20 6 9 17 4 12");
+        svg.appendChild(p);
+        break;
+      }
+      case "error": {
+        const l1 = document.createElementNS(SVG_NS, "line");
+        l1.setAttribute("x1", "18");
+        l1.setAttribute("y1", "6");
+        l1.setAttribute("x2", "6");
+        l1.setAttribute("y2", "18");
+        const l2 = document.createElementNS(SVG_NS, "line");
+        l2.setAttribute("x1", "6");
+        l2.setAttribute("y1", "6");
+        l2.setAttribute("x2", "18");
+        l2.setAttribute("y2", "18");
+        svg.appendChild(l1);
+        svg.appendChild(l2);
+        break;
+      }
+      case "warning": {
+        const path = document.createElementNS(SVG_NS, "path");
+        path.setAttribute(
+          "d",
+          "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
+        );
+        const l1 = document.createElementNS(SVG_NS, "line");
+        l1.setAttribute("x1", "12");
+        l1.setAttribute("y1", "9");
+        l1.setAttribute("x2", "12");
+        l1.setAttribute("y2", "13");
+        const l2 = document.createElementNS(SVG_NS, "line");
+        l2.setAttribute("x1", "12");
+        l2.setAttribute("y1", "17");
+        l2.setAttribute("x2", "12.01");
+        l2.setAttribute("y2", "17");
+        svg.appendChild(path);
+        svg.appendChild(l1);
+        svg.appendChild(l2);
+        break;
+      }
+      case "info": {
+        const c = document.createElementNS(SVG_NS, "circle");
+        c.setAttribute("cx", "12");
+        c.setAttribute("cy", "12");
+        c.setAttribute("r", "10");
+        const l1 = document.createElementNS(SVG_NS, "line");
+        l1.setAttribute("x1", "12");
+        l1.setAttribute("y1", "16");
+        l1.setAttribute("x2", "12");
+        l1.setAttribute("y2", "12");
+        const l2 = document.createElementNS(SVG_NS, "line");
+        l2.setAttribute("x1", "12");
+        l2.setAttribute("y1", "8");
+        l2.setAttribute("x2", "12.01");
+        l2.setAttribute("y2", "8");
+        svg.appendChild(c);
+        svg.appendChild(l1);
+        svg.appendChild(l2);
+        break;
+      }
+      case "loading": {
+        svg.setAttribute("data-fluix-icon", "spin");
+        const lines = [
+          ["12", "2", "12", "6"],
+          ["12", "18", "12", "22"],
+          ["4.93", "4.93", "7.76", "7.76"],
+          ["16.24", "16.24", "19.07", "19.07"],
+          ["2", "12", "6", "12"],
+          ["18", "12", "22", "12"],
+          ["4.93", "19.07", "7.76", "16.24"],
+          ["16.24", "7.76", "19.07", "4.93"]
+        ];
+        for (const [x1, y1, x2, y2] of lines) {
+          const l = document.createElementNS(SVG_NS, "line");
+          l.setAttribute("x1", x1);
+          l.setAttribute("y1", y1);
+          l.setAttribute("x2", x2);
+          l.setAttribute("y2", y2);
+          svg.appendChild(l);
+        }
+        break;
+      }
+      case "action": {
+        const c = document.createElementNS(SVG_NS, "circle");
+        c.setAttribute("cx", "12");
+        c.setAttribute("cy", "12");
+        c.setAttribute("r", "10");
+        const poly = document.createElementNS(SVG_NS, "polygon");
+        poly.setAttribute("points", "10 8 16 12 10 16 10 8");
+        poly.setAttribute("fill", "currentColor");
+        poly.setAttribute("stroke", "none");
+        svg.appendChild(c);
+        svg.appendChild(poly);
+        break;
+      }
+      default:
+        return null;
+    }
+    return svg;
+  }
+  function renderIconInto(container, icon, state) {
+    container.textContent = "";
+    if (icon != null) {
+      if (icon instanceof HTMLElement || icon instanceof SVGElement) {
+        container.appendChild(icon);
+      } else {
+        const span = document.createElement("span");
+        span.setAttribute("aria-hidden", "true");
+        span.textContent = String(icon);
+        container.appendChild(span);
+      }
+      return;
+    }
+    const svgIcon = createSvgIcon(state);
+    if (svgIcon) container.appendChild(svgIcon);
+  }
+  function getPillAlign2(position) {
+    if (position.includes("right")) return "right";
+    if (position.includes("center")) return "center";
+    return "left";
+  }
+  function applyAttrs(el, attrs) {
+    for (const [key, value] of Object.entries(attrs)) {
+      el.setAttribute(key, value);
+    }
+  }
+  function resolveOffsetValue(v) {
+    return typeof v === "number" ? `${v}px` : v;
+  }
+  function applyViewportOffset(el, offset, position) {
+    el.style.top = "";
+    el.style.right = "";
+    el.style.bottom = "";
+    el.style.left = "";
+    el.style.paddingLeft = "";
+    el.style.paddingRight = "";
+    if (offset == null) return;
+    let top;
+    let right;
+    let bottom;
+    let left;
+    if (typeof offset === "number" || typeof offset === "string") {
+      const v = resolveOffsetValue(offset);
+      top = v;
+      right = v;
+      bottom = v;
+      left = v;
+    } else {
+      if (offset.top != null) top = resolveOffsetValue(offset.top);
+      if (offset.right != null) right = resolveOffsetValue(offset.right);
+      if (offset.bottom != null) bottom = resolveOffsetValue(offset.bottom);
+      if (offset.left != null) left = resolveOffsetValue(offset.left);
+    }
+    if (position.startsWith("top") && top) el.style.top = top;
+    if (position.startsWith("bottom") && bottom) el.style.bottom = bottom;
+    if (position.endsWith("right") && right) el.style.right = right;
+    if (position.endsWith("left") && left) el.style.left = left;
+    if (position.endsWith("center")) {
+      if (left) el.style.paddingLeft = left;
+      if (right) el.style.paddingRight = right;
+    }
+  }
+  function setTimer(inst, fn, ms) {
+    const id = setTimeout(() => {
+      inst.timers.delete(id);
+      fn();
+    }, ms);
+    inst.timers.add(id);
+    return id;
+  }
+  function computeLayout(item, inst) {
+    const { ready, expanded: isExpanded } = inst.localState;
+    const roundness = item.roundness ?? TOAST_DEFAULTS.roundness;
+    const blur = Math.min(10, Math.max(6, roundness * 0.45));
+    const hasDesc = Boolean(item.description) || Boolean(item.button);
+    const isLoading = item.state === "loading";
+    const open = hasDesc && isExpanded && !isLoading;
+    const position = getPillAlign2(item.position);
+    const edge = item.position.startsWith("top") ? "bottom" : "top";
+    const resolvedPillWidth = Math.max(inst.pillWidth || HEIGHT, HEIGHT);
+    const pillHeight = HEIGHT + blur * 3;
+    const pillX = position === "right" ? WIDTH - resolvedPillWidth : position === "center" ? (WIDTH - resolvedPillWidth) / 2 : 0;
+    const minExpanded = HEIGHT * MIN_EXPAND_RATIO;
+    const rawExpanded = hasDesc ? Math.max(minExpanded, HEIGHT + inst.contentHeight) : minExpanded;
+    if (open) {
+      inst.frozenExpanded = rawExpanded;
+    }
+    const expanded = open ? rawExpanded : inst.frozenExpanded;
+    const expandedContent = Math.max(0, expanded - HEIGHT);
+    const svgHeight = hasDesc ? Math.max(expanded, minExpanded) : HEIGHT;
+    return {
+      ready,
+      isExpanded,
+      roundness,
+      blur,
+      hasDesc,
+      isLoading,
+      open,
+      position,
+      edge,
+      resolvedPillWidth,
+      pillHeight,
+      pillX,
+      minExpanded,
+      expanded,
+      expandedContent,
+      svgHeight
+    };
+  }
+  function createInstance(item, machine2) {
+    const localState = { ready: false, expanded: false };
+    const roundness = item.roundness ?? TOAST_DEFAULTS.roundness;
+    const blur = Math.min(10, Math.max(6, roundness * 0.45));
+    const filterId = `fluix-gooey-${item.id.replace(/[^a-z0-9-]/gi, "-")}`;
+    const hasDesc = Boolean(item.description) || Boolean(item.button);
+    const el = document.createElement("button");
+    el.type = "button";
+    const canvasDiv = document.createElement("div");
+    const minExpanded = HEIGHT * MIN_EXPAND_RATIO;
+    const initialSvgHeight = hasDesc ? minExpanded : HEIGHT;
+    const svg = document.createElementNS(SVG_NS, "svg");
+    svg.setAttribute("data-fluix-svg", "");
+    svg.setAttribute("width", String(WIDTH));
+    svg.setAttribute("height", String(initialSvgHeight));
+    svg.setAttribute("viewBox", `0 0 ${WIDTH} ${initialSvgHeight}`);
+    svg.setAttribute("aria-hidden", "true");
+    const defs = document.createElementNS(SVG_NS, "defs");
+    const filter = document.createElementNS(SVG_NS, "filter");
+    filter.setAttribute("id", filterId);
+    filter.setAttribute("x", "-20%");
+    filter.setAttribute("y", "-20%");
+    filter.setAttribute("width", "140%");
+    filter.setAttribute("height", "140%");
+    filter.setAttribute("color-interpolation-filters", "sRGB");
+    const feBlur = document.createElementNS(SVG_NS, "feGaussianBlur");
+    feBlur.setAttribute("in", "SourceGraphic");
+    feBlur.setAttribute("stdDeviation", String(blur));
+    feBlur.setAttribute("result", "blur");
+    const feCM = document.createElementNS(SVG_NS, "feColorMatrix");
+    feCM.setAttribute("in", "blur");
+    feCM.setAttribute("type", "matrix");
+    feCM.setAttribute("values", "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10");
+    feCM.setAttribute("result", "goo");
+    const feComp = document.createElementNS(SVG_NS, "feComposite");
+    feComp.setAttribute("in", "SourceGraphic");
+    feComp.setAttribute("in2", "goo");
+    feComp.setAttribute("operator", "atop");
+    filter.appendChild(feBlur);
+    filter.appendChild(feCM);
+    filter.appendChild(feComp);
+    defs.appendChild(filter);
+    svg.appendChild(defs);
+    const g = document.createElementNS(SVG_NS, "g");
+    g.setAttribute("filter", `url(#${filterId})`);
+    const initialPillX = getPillAlign2(item.position) === "right" ? WIDTH - HEIGHT : getPillAlign2(item.position) === "center" ? (WIDTH - HEIGHT) / 2 : 0;
+    const pillEl = document.createElementNS(SVG_NS, "rect");
+    pillEl.setAttribute("data-fluix-pill", "");
+    pillEl.setAttribute("x", String(initialPillX));
+    pillEl.setAttribute("y", "0");
+    pillEl.setAttribute("width", String(HEIGHT));
+    pillEl.setAttribute("height", String(HEIGHT));
+    pillEl.setAttribute("rx", String(roundness));
+    pillEl.setAttribute("ry", String(roundness));
+    pillEl.setAttribute("fill", item.fill ?? "#FFFFFF");
+    const bodyEl = document.createElementNS(SVG_NS, "rect");
+    bodyEl.setAttribute("data-fluix-body", "");
+    bodyEl.setAttribute("x", "0");
+    bodyEl.setAttribute("y", String(HEIGHT));
+    bodyEl.setAttribute("width", String(WIDTH));
+    bodyEl.setAttribute("height", "0");
+    bodyEl.setAttribute("rx", String(roundness));
+    bodyEl.setAttribute("ry", String(roundness));
+    bodyEl.setAttribute("fill", item.fill ?? "#FFFFFF");
+    bodyEl.setAttribute("opacity", "0");
+    g.appendChild(pillEl);
+    g.appendChild(bodyEl);
+    svg.appendChild(g);
+    canvasDiv.appendChild(svg);
+    el.appendChild(canvasDiv);
+    const headerEl = document.createElement("div");
+    const headerStackEl = document.createElement("div");
+    headerStackEl.setAttribute("data-fluix-header-stack", "");
+    const innerEl = document.createElement("div");
+    innerEl.setAttribute("data-fluix-header-inner", "");
+    innerEl.setAttribute("data-layer", "current");
+    const badgeEl = document.createElement("div");
+    renderIconInto(badgeEl, item.icon, item.state);
+    const titleEl = document.createElement("span");
+    titleEl.textContent = item.title ?? item.state;
+    innerEl.appendChild(badgeEl);
+    innerEl.appendChild(titleEl);
+    headerStackEl.appendChild(innerEl);
+    headerEl.appendChild(headerStackEl);
+    el.appendChild(headerEl);
+    let contentEl = null;
+    let descriptionEl = null;
+    if (hasDesc) {
+      contentEl = document.createElement("div");
+      descriptionEl = document.createElement("div");
+      if (item.styles?.description) {
+        descriptionEl.className = item.styles.description;
+      }
+      if (item.description != null) {
+        if (typeof item.description === "string") {
+          descriptionEl.textContent = item.description;
+        } else if (item.description instanceof HTMLElement) {
+          descriptionEl.appendChild(item.description);
+        }
+      }
+      if (item.button) {
+        const btn = document.createElement("button");
+        btn.type = "button";
+        btn.textContent = item.button.title;
+        if (item.styles?.button) {
+          btn.className = item.styles.button;
+        }
+        btn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          item.button?.onClick();
+        });
+        descriptionEl.appendChild(btn);
+      }
+      contentEl.appendChild(descriptionEl);
+      el.appendChild(contentEl);
+    }
+    const attrs = Toaster.getAttrs(item, localState);
+    applyAttrs(el, attrs.root);
+    applyAttrs(canvasDiv, attrs.canvas);
+    applyAttrs(headerEl, attrs.header);
+    applyAttrs(badgeEl, attrs.badge);
+    if (item.styles?.badge) badgeEl.className = item.styles.badge;
+    applyAttrs(titleEl, attrs.title);
+    if (item.styles?.title) titleEl.className = item.styles.title;
+    if (contentEl) applyAttrs(contentEl, attrs.content);
+    if (descriptionEl) applyAttrs(descriptionEl, attrs.description);
+    if (item.button && descriptionEl) {
+      const btnEl = descriptionEl.querySelector("button");
+      if (btnEl) applyAttrs(btnEl, attrs.button);
+    }
+    const headerKey = `${item.state}-${item.title ?? item.state}`;
+    const inst = {
+      el,
+      pillEl,
+      bodyEl,
+      svgEl: svg,
+      headerEl,
+      innerEl,
+      headerStackEl,
+      contentEl,
+      descriptionEl,
+      localState,
+      pillWidth: 0,
+      contentHeight: 0,
+      frozenExpanded: HEIGHT * MIN_EXPAND_RATIO,
+      hovering: false,
+      pendingDismiss: false,
+      dismissRequested: false,
+      pillRo: null,
+      contentRo: null,
+      pillAnim: null,
+      prevPill: { x: initialPillX, width: HEIGHT, height: HEIGHT },
+      pillFirst: true,
+      headerKey,
+      headerPad: null,
+      connectHandle: null,
+      timers: /* @__PURE__ */ new Set(),
+      item
+    };
+    inst.pillRo = new ResizeObserver(() => {
+      requestAnimationFrame(() => {
+        measurePillWidth(inst);
+        applyVars(inst, inst.item);
+        animatePill(inst, inst.item);
+      });
+    });
+    inst.pillRo.observe(innerEl);
+    if (descriptionEl) {
+      inst.contentRo = new ResizeObserver(() => {
+        requestAnimationFrame(() => {
+          const h = descriptionEl.scrollHeight;
+          if (h !== inst.contentHeight) {
+            inst.contentHeight = h;
+            applyVars(inst, inst.item);
+          }
+        });
+      });
+      inst.contentRo.observe(descriptionEl);
+    }
+    inst.connectHandle = Toaster.connect(
+      el,
+      {
+        onExpand: () => {
+          if (inst.item.exiting || inst.dismissRequested) return;
+          inst.localState.expanded = true;
+          applyUpdate(inst, inst.item);
+        },
+        onCollapse: () => {
+          if (inst.item.exiting || inst.dismissRequested) return;
+          if (inst.item.autopilot !== false) return;
+          inst.localState.expanded = false;
+          applyUpdate(inst, inst.item);
+        },
+        onDismiss: () => {
+          if (inst.dismissRequested) return;
+          inst.dismissRequested = true;
+          machine2.dismiss(item.id);
+        },
+        onHoverStart: () => {
+          inst.hovering = true;
+        },
+        onHoverEnd: () => {
+          inst.hovering = false;
+          if (inst.pendingDismiss) {
+            inst.pendingDismiss = false;
+            if (inst.dismissRequested) return;
+            inst.dismissRequested = true;
+            machine2.dismiss(inst.item.id);
+          }
+        }
+      },
+      item
+    );
+    applyVars(inst, item);
+    setTimer(
+      inst,
+      () => {
+        inst.localState.ready = true;
+        applyUpdate(inst, inst.item);
+      },
+      32
+    );
+    setupAutoDismiss(inst, item, machine2);
+    setupAutopilot(inst, item);
+    measurePillWidth(inst);
+    return inst;
+  }
+  function measurePillWidth(inst) {
+    if (!inst.el.isConnected) return;
+    if (inst.headerPad === null) {
+      const cs = getComputedStyle(inst.headerEl);
+      inst.headerPad = Number.parseFloat(cs.paddingLeft) + Number.parseFloat(cs.paddingRight);
+    }
+    const intrinsicWidth = inst.innerEl.getBoundingClientRect().width;
+    const w = intrinsicWidth + inst.headerPad + PILL_PADDING;
+    if (w > PILL_PADDING && w !== inst.pillWidth) {
+      inst.pillWidth = w;
+    }
+  }
+  function applyVars(inst, item) {
+    const layout = computeLayout(item, inst);
+    const { open, expanded, resolvedPillWidth, pillX, edge, expandedContent, svgHeight } = layout;
+    const vars = {
+      "--_h": `${open ? expanded : HEIGHT}px`,
+      "--_pw": `${resolvedPillWidth}px`,
+      "--_px": `${pillX}px`,
+      "--_ht": `translateY(${open ? edge === "bottom" ? 3 : -3 : 0}px) scale(${open ? 0.9 : 1})`,
+      "--_co": `${open ? 1 : 0}`,
+      "--_cy": `${open ? 0 : -14}px`,
+      "--_cm": `${open ? expandedContent : 0}px`,
+      "--_by": `${open ? HEIGHT - BODY_MERGE_OVERLAP : HEIGHT}px`,
+      "--_bh": `${open ? expandedContent : 0}px`,
+      "--_bo": `${open ? 1 : 0}`
+    };
+    for (const [key, value] of Object.entries(vars)) {
+      inst.el.style.setProperty(key, value);
+    }
+    inst.svgEl.setAttribute("height", String(svgHeight));
+    inst.svgEl.setAttribute("viewBox", `0 0 ${WIDTH} ${svgHeight}`);
+  }
+  function animatePill(inst, item) {
+    const layout = computeLayout(item, inst);
+    const { open, resolvedPillWidth, pillX, pillHeight } = layout;
+    const prev = inst.prevPill;
+    const next = { x: pillX, width: resolvedPillWidth, height: open ? pillHeight : HEIGHT };
+    if (prev.x === next.x && prev.width === next.width && prev.height === next.height) return;
+    inst.pillAnim?.cancel();
+    if (!inst.localState.ready || inst.pillFirst) {
+      inst.pillFirst = false;
+      inst.pillEl.setAttribute("x", String(next.x));
+      inst.pillEl.setAttribute("width", String(next.width));
+      inst.pillEl.setAttribute("height", String(next.height));
+      inst.prevPill = next;
+      return;
+    }
+    const anim = animateSpring(
+      inst.pillEl,
+      {
+        x: { from: prev.x, to: next.x, unit: "px" },
+        width: { from: prev.width, to: next.width, unit: "px" },
+        height: { from: prev.height, to: next.height, unit: "px" }
+      },
+      FLUIX_SPRING
+    );
+    inst.pillAnim = anim;
+    inst.prevPill = next;
+  }
+  function setupAutoDismiss(inst, item, machine2) {
+    const duration = item.duration;
+    if (duration == null || duration <= 0) return;
+    setTimer(
+      inst,
+      () => {
+        if (inst.hovering) {
+          inst.pendingDismiss = true;
+          setTimer(
+            inst,
+            () => {
+              if (inst.dismissRequested) return;
+              inst.dismissRequested = true;
+              inst.pendingDismiss = false;
+              machine2.dismiss(item.id);
+            },
+            1200
+          );
+          return;
+        }
+        inst.pendingDismiss = false;
+        inst.dismissRequested = true;
+        machine2.dismiss(item.id);
+      },
+      duration
+    );
+  }
+  function setupAutopilot(inst, item, machine2) {
+    if (!inst.localState.ready) return;
+    if (item.autoExpandDelayMs != null && item.autoExpandDelayMs > 0) {
+      setTimer(
+        inst,
+        () => {
+          if (!inst.hovering) {
+            inst.localState.expanded = true;
+            applyUpdate(inst, inst.item);
+          }
+        },
+        item.autoExpandDelayMs
+      );
+    }
+    if (item.autoCollapseDelayMs != null && item.autoCollapseDelayMs > 0) {
+      setTimer(
+        inst,
+        () => {
+          if (!inst.hovering) {
+            inst.localState.expanded = false;
+            applyUpdate(inst, inst.item);
+          }
+        },
+        item.autoCollapseDelayMs
+      );
+    }
+  }
+  function applyUpdate(inst, item, _machine) {
+    inst.item = item;
+    const attrs = Toaster.getAttrs(item, inst.localState);
+    applyAttrs(inst.el, attrs.root);
+    const canvasEl = inst.el.querySelector("[data-fluix-canvas]");
+    if (canvasEl) applyAttrs(canvasEl, attrs.canvas);
+    applyAttrs(inst.headerEl, attrs.header);
+    const badgeEl = inst.innerEl.querySelector("[data-fluix-badge]");
+    if (badgeEl) {
+      applyAttrs(badgeEl, attrs.badge);
+      if (item.styles?.badge) badgeEl.className = item.styles.badge;
+    }
+    const titleEl = inst.innerEl.querySelector("[data-fluix-title]");
+    if (titleEl) {
+      applyAttrs(titleEl, attrs.title);
+      if (item.styles?.title) titleEl.className = item.styles.title;
+    }
+    if (inst.contentEl) applyAttrs(inst.contentEl, attrs.content);
+    if (inst.descriptionEl) applyAttrs(inst.descriptionEl, attrs.description);
+    if (item.button && inst.descriptionEl) {
+      const btnEl = inst.descriptionEl.querySelector("button");
+      if (btnEl) applyAttrs(btnEl, attrs.button);
+    }
+    inst.pillEl.setAttribute("fill", item.fill ?? "#FFFFFF");
+    inst.bodyEl.setAttribute("fill", item.fill ?? "#FFFFFF");
+    const newHeaderKey = `${item.state}-${item.title ?? item.state}`;
+    if (newHeaderKey !== inst.headerKey) {
+      crossfadeHeader(inst, item, attrs);
+      inst.headerKey = newHeaderKey;
+    }
+    applyVars(inst, item);
+    animatePill(inst, item);
+  }
+  function crossfadeHeader(inst, item, attrs) {
+    const oldInner = inst.innerEl;
+    oldInner.setAttribute("data-layer", "prev");
+    oldInner.setAttribute("data-exiting", "true");
+    const newInner = document.createElement("div");
+    newInner.setAttribute("data-fluix-header-inner", "");
+    newInner.setAttribute("data-layer", "current");
+    const badgeEl = document.createElement("div");
+    applyAttrs(badgeEl, attrs.badge);
+    if (item.styles?.badge) badgeEl.className = item.styles.badge;
+    renderIconInto(badgeEl, item.icon, item.state);
+    const titleEl = document.createElement("span");
+    applyAttrs(titleEl, attrs.title);
+    if (item.styles?.title) titleEl.className = item.styles.title;
+    titleEl.textContent = item.title ?? item.state;
+    newInner.appendChild(badgeEl);
+    newInner.appendChild(titleEl);
+    inst.headerStackEl.insertBefore(newInner, oldInner);
+    inst.innerEl = newInner;
+    inst.pillRo.unobserve(oldInner);
+    inst.pillRo.observe(newInner);
+    setTimer(
+      inst,
+      () => {
+        oldInner.remove();
+      },
+      HEADER_EXIT_MS
+    );
+    requestAnimationFrame(() => {
+      measurePillWidth(inst);
+      applyVars(inst, inst.item);
+      animatePill(inst, inst.item);
+    });
+  }
+  function destroyInstance(inst) {
+    for (const t of inst.timers) clearTimeout(t);
+    inst.timers.clear();
+    inst.pillAnim?.cancel();
+    inst.pillRo.disconnect();
+    inst.contentRo?.disconnect();
+    inst.connectHandle.destroy();
+    inst.el.remove();
+  }
+  function createToaster(config) {
+    const machine2 = Toaster.getMachine();
+    let currentConfig = config;
+    if (currentConfig) machine2.configure(currentConfig);
+    const instances = /* @__PURE__ */ new Map();
+    const viewports = /* @__PURE__ */ new Map();
+    function ensureViewport(position, layout, offset) {
+      let vp = viewports.get(position);
+      if (!vp) {
+        vp = document.createElement("section");
+        const vpAttrs = Toaster.getViewportAttrs(position, layout);
+        applyAttrs(vp, vpAttrs);
+        applyViewportOffset(vp, offset, position);
+        document.body.appendChild(vp);
+        viewports.set(position, vp);
+      }
+      return vp;
+    }
+    function removeViewport(position) {
+      const vp = viewports.get(position);
+      if (vp) {
+        vp.remove();
+        viewports.delete(position);
+      }
+    }
+    function sync() {
+      const next = machine2.store.getSnapshot();
+      const resolvedLayout = next.config?.layout ?? currentConfig?.layout ?? "stack";
+      const resolvedOffset = next.config?.offset ?? currentConfig?.offset;
+      const activePositions = /* @__PURE__ */ new Set();
+      const nextIds = new Set(next.toasts.map((t) => t.id));
+      for (const [id, inst] of instances) {
+        if (!nextIds.has(id)) {
+          destroyInstance(inst);
+          instances.delete(id);
+        }
+      }
+      for (const item of next.toasts) {
+        activePositions.add(item.position);
+        const vp = ensureViewport(item.position, resolvedLayout, resolvedOffset);
+        const existing = instances.get(item.id);
+        if (!existing) {
+          const inst = createInstance(item, machine2);
+          instances.set(item.id, inst);
+          vp.appendChild(inst.el);
+        } else if (existing.item.instanceId !== item.instanceId) {
+          destroyInstance(existing);
+          const inst = createInstance(item, machine2);
+          instances.set(item.id, inst);
+          vp.appendChild(inst.el);
+        } else {
+          applyUpdate(existing, item);
+          if (existing.el.parentElement !== vp) {
+            vp.appendChild(existing.el);
+          }
+        }
+      }
+      for (const [position, vp] of viewports) {
+        const vpAttrs = Toaster.getViewportAttrs(position, resolvedLayout);
+        applyAttrs(vp, vpAttrs);
+        applyViewportOffset(vp, resolvedOffset, position);
+      }
+      for (const [position] of viewports) {
+        if (!activePositions.has(position)) {
+          removeViewport(position);
+        }
+      }
+    }
+    sync();
+    const unsubscribe = machine2.store.subscribe(sync);
+    return {
+      destroy() {
+        unsubscribe();
+        for (const inst of instances.values()) {
+          destroyInstance(inst);
+        }
+        instances.clear();
+        for (const vp of viewports.values()) {
+          vp.remove();
+        }
+        viewports.clear();
+      },
+      update(newConfig) {
+        currentConfig = newConfig;
+        machine2.configure(newConfig);
+      }
+    };
+  }
+
+  exports.createToaster = createToaster;
+  exports.fluix = fluix;
+
+  return exports;
+
+})({});
+//# sourceMappingURL=index.global.js.map
+//# sourceMappingURL=index.global.js.map