@fluix-ui/vanilla 0.0.7 → 0.0.9

package/dist/index.global.js

@@ -68,7 +68,7 @@ var Fluix = (function (exports) {
     samples.push([t, 1]);
     return samples;
   }
-  function animateSpring(el, properties, config) {
+  function animateSpring(el2, properties, config) {
     const samples = simulateSpring(config);
     const totalTime = samples[samples.length - 1][0];
     const durationMs = Math.round(totalTime * 1e3);
@@ -85,7 +85,7 @@ var Fluix = (function (exports) {
       keyframes.push(frame);
     }
     try {
-      return el.animate(keyframes, {
+      return el2.animate(keyframes, {
         duration: durationMs,
         fill: "forwards",
         easing: "linear"
@@ -216,13 +216,17 @@ var Fluix = (function (exports) {
       });
     }
     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)
-      }));
+      let shouldScheduleRemoval = false;
+      store.update((prev) => {
+        const item = prev.toasts.find((t) => t.id === id);
+        if (!item || item.exiting) return prev;
+        shouldScheduleRemoval = true;
+        return {
+          ...prev,
+          toasts: prev.toasts.map((t) => t.id === id ? { ...t, exiting: true } : t)
+        };
+      });
+      if (!shouldScheduleRemoval) return;
       const timer = setTimeout(() => {
         exitTimers.delete(id);
         store.update((prev) => ({
@@ -233,16 +237,20 @@ var Fluix = (function (exports) {
       exitTimers.set(id, timer);
     }
     function clear(position) {
-      store.update((prev) => ({
-        ...prev,
-        toasts: position ? prev.toasts.filter((t) => t.position !== position) : []
-      }));
+      store.update((prev) => {
+        if (prev.toasts.length === 0) return prev;
+        const filtered = position ? prev.toasts.filter((t) => t.position !== position) : [];
+        if (filtered.length === prev.toasts.length) return prev;
+        return { ...prev, toasts: filtered };
+      });
     }
     function configure(config) {
-      store.update((prev) => ({
-        ...prev,
-        config: { ...prev.config, ...config }
-      }));
+      store.update((prev) => {
+        const merged = { ...prev.config, ...config };
+        const keys = Object.keys(merged);
+        if (keys.every((k) => prev.config[k] === merged[k])) return prev;
+        return { ...prev, config: merged };
+      });
     }
     function destroy() {
       for (const timer of exitTimers.values()) clearTimeout(timer);
@@ -492,7 +500,12 @@ var Fluix = (function (exports) {
       });
     }
     function configure(config) {
-      store.update((prev) => ({ ...prev, config: { ...prev.config, ...config } }));
+      store.update((prev) => {
+        const merged = { ...prev.config, ...config };
+        const keys = Object.keys(merged);
+        if (keys.every((k) => prev.config[k] === merged[k])) return prev;
+        return { ...prev, config: merged };
+      });
     }
     function destroy() {
     }
@@ -537,7 +550,12 @@ var Fluix = (function (exports) {
       });
     }
     function configure(config) {
-      store.update((prev) => ({ ...prev, config: { ...prev.config, ...config } }));
+      store.update((prev) => {
+        const merged = { ...prev.config, ...config };
+        const keys = Object.keys(merged);
+        if (keys.every((k) => prev.config[k] === merged[k])) return prev;
+        return { ...prev, config: merged };
+      });
     }
     function destroy() {
     }
@@ -689,7 +707,11 @@ var Fluix = (function (exports) {
     if (!a || !b) return false;
     return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height && a.radius === b.radius && a.visible === b.visible;
   }
+  var springCache = /* @__PURE__ */ new Map();
   function simulateSpringValues(config) {
+    const key = `${config.stiffness}-${config.damping}-${config.mass}`;
+    const cached = springCache.get(key);
+    if (cached) return cached;
     const { stiffness, damping, mass } = config;
     const dt = 1 / 120;
     const maxDuration = 3;
@@ -709,6 +731,7 @@ var Fluix = (function (exports) {
       if (Math.abs(position - 1) < 1e-3 && Math.abs(velocity) < 1e-3) break;
     }
     samples.push(1);
+    springCache.set(key, samples);
     return samples;
   }
   function lerp(a, b, t) {
@@ -918,74 +941,146 @@ var Fluix = (function (exports) {
     requestAnimationFrame(tick);
     return handle;
   }
-  var STRETCH_MS = 150;
-  function animatePillMorph(rect, from, to, spring) {
-    const stretchedX = Math.min(from.x, to.x);
-    const stretchedRight = Math.max(from.x + from.width, to.x + to.width);
-    const stretchedWidth = stretchedRight - stretchedX;
-    const contractSamples = simulateSpringValues({
-      stiffness: spring.stiffness * 2.5,
-      damping: spring.damping * 1.6,
+  function setRectAttrs(el2, x, y, w, h, r) {
+    el2.setAttribute("x", String(x));
+    el2.setAttribute("y", String(y));
+    el2.setAttribute("width", String(Math.max(0, w)));
+    el2.setAttribute("height", String(Math.max(0, h)));
+    el2.setAttribute("rx", String(Math.max(0, r)));
+    el2.setAttribute("ry", String(Math.max(0, r)));
+  }
+  function animatePillMorph(rect, ghost, from, to, spring, _orientation) {
+    const growSamples = simulateSpringValues({
+      stiffness: spring.stiffness * 1.4,
+      damping: spring.damping * 1.2,
       mass: spring.mass
     });
-    const contractCount = contractSamples.length;
-    const contractMs = contractCount / 120 * 1e3;
-    const totalMs = STRETCH_MS + contractMs;
+    const growCount = growSamples.length;
+    const growMs = growCount / 120 * 1e3;
+    const totalMs = growMs;
+    const ghostDuration = totalMs * 0.8;
     const startTime = performance.now();
     let cancelled = false;
     const handle = {
       onfinish: null,
       cancel() {
         cancelled = true;
+        if (ghost) ghost.setAttribute("opacity", "0");
       }
     };
-    function applyRect(x, y, w, h, r) {
-      rect.setAttribute("x", String(x));
-      rect.setAttribute("y", String(y));
-      rect.setAttribute("width", String(w));
-      rect.setAttribute("height", String(h));
-      rect.setAttribute("rx", String(r));
-      rect.setAttribute("ry", String(r));
+    if (ghost) {
+      setRectAttrs(ghost, from.x, from.y, from.width, from.height, from.radius);
+      ghost.setAttribute("opacity", "1");
     }
+    const toCx = to.x + to.width / 2;
+    const toCy = to.y + to.height / 2;
+    setRectAttrs(rect, toCx, toCy, 0, 0, 0);
     function tick() {
       if (cancelled) return;
       const elapsed = performance.now() - startTime;
-      if (elapsed < STRETCH_MS) {
-        const t = easeOutCubic(elapsed / STRETCH_MS);
-        applyRect(
-          lerp(from.x, stretchedX, t),
-          lerp(from.y, to.y, t),
-          lerp(from.width, stretchedWidth, t),
-          lerp(from.height, to.height, t),
-          lerp(from.radius, to.radius, t)
-        );
-      } else {
-        const phaseElapsed = elapsed - STRETCH_MS;
-        const phaseProgress = Math.min(phaseElapsed / contractMs, 1);
-        const idx = Math.min(Math.floor(phaseProgress * (contractCount - 1)), contractCount - 1);
-        const t = contractSamples[idx];
-        applyRect(
-          lerp(stretchedX, to.x, t),
-          to.y,
-          lerp(stretchedWidth, to.width, t),
-          to.height,
-          to.radius
-        );
+      const progress = Math.min(elapsed / totalMs, 1);
+      const idx = Math.min(Math.floor(progress * (growCount - 1)), growCount - 1);
+      const gt = growSamples[idx];
+      setRectAttrs(
+        rect,
+        lerp(toCx, to.x, gt),
+        lerp(toCy, to.y, gt),
+        lerp(0, to.width, gt),
+        lerp(0, to.height, gt),
+        lerp(0, to.radius, gt)
+      );
+      if (ghost) {
+        if (elapsed < ghostDuration) {
+          const raw = elapsed / ghostDuration;
+          const shrink = raw * raw;
+          const scale = 1 - shrink;
+          const drift = easeOutCubic(raw) * 0.25;
+          const cx = lerp(from.x + from.width / 2, to.x + to.width / 2, drift);
+          const cy = lerp(from.y + from.height / 2, to.y + to.height / 2, drift);
+          const w = from.width * scale;
+          const h = from.height * scale;
+          setRectAttrs(
+            ghost,
+            cx - w / 2,
+            cy - h / 2,
+            w,
+            h,
+            from.radius * scale
+          );
+        } else {
+          ghost.setAttribute("opacity", "0");
+        }
       }
-      if (elapsed < totalMs) {
+      if (progress < 1) {
         requestAnimationFrame(tick);
       } else {
+        if (ghost) ghost.setAttribute("opacity", "0");
         handle.onfinish?.();
       }
     }
     requestAnimationFrame(tick);
     return handle;
   }
+  function buildPillWaypoints(root, oldId, newId, padding, variant, orientation, from, to) {
+    if (!oldId || !newId) return [from, to];
+    const items = Array.from(root.querySelectorAll(ITEM_SELECTOR));
+    const ids = items.map((el2) => el2.dataset["menuId"] ?? "");
+    const oldIdx = ids.indexOf(oldId);
+    const newIdx = ids.indexOf(newId);
+    if (oldIdx === -1 || newIdx === -1 || Math.abs(newIdx - oldIdx) <= 1) {
+      return [from, to];
+    }
+    const step = newIdx > oldIdx ? 1 : -1;
+    const waypoints = [from];
+    for (let i = oldIdx + step; i !== newIdx; i += step) {
+      const id = ids[i];
+      const frame = readItemFrame(root, id, padding, variant, orientation);
+      if (frame) waypoints.push(frame);
+    }
+    waypoints.push(to);
+    return waypoints;
+  }
+  function chainPillMorphs(rect, ghost, waypoints, spring, orientation) {
+    if (waypoints.length <= 2) {
+      return animatePillMorph(rect, ghost, waypoints[0], waypoints[waypoints.length - 1], spring);
+    }
+    const steps = waypoints.length - 1;
+    let currentStep = 0;
+    let activeAnim = null;
+    const stepSpring = {
+      stiffness: spring.stiffness * (1 + steps * 0.6),
+      damping: spring.damping * (1 + steps * 0.3),
+      mass: spring.mass
+    };
+    const handle = {
+      onfinish: null,
+      cancel() {
+        activeAnim?.cancel();
+        activeAnim = null;
+      }
+    };
+    function runStep() {
+      if (currentStep >= steps) {
+        handle.onfinish?.();
+        return;
+      }
+      const from = waypoints[currentStep];
+      const to = waypoints[currentStep + 1];
+      activeAnim = animatePillMorph(rect, ghost, from, to, stepSpring);
+      activeAnim.onfinish = () => {
+        currentStep++;
+        setRectAttrs(rect, to.x, to.y, to.width, to.height, to.radius);
+        runStep();
+      };
+    }
+    runStep();
+    return handle;
+  }
   function connectMenu(options) {
     const spring = options.spring ?? FLUIX_SPRING;
-    const padding = options.padding ?? 6;
     const variant = options.variant;
     const orientation = options.orientation;
+    const padding = options.padding ?? (variant === "pill" ? 0 : 6);
     const cleanups = [];
     let currentAnimation = null;
     let lastFrame = null;
@@ -997,11 +1092,11 @@ var Fluix = (function (exports) {
     let animNewId = null;
     let animPhase = null;
     function setItemState(id, state) {
-      const el = options.root.querySelector(
+      const el2 = options.root.querySelector(
         `${ITEM_SELECTOR}[data-menu-id="${CSS.escape(id)}"]`
       );
-      if (el && el.dataset["state"] !== state) {
-        el.dataset["state"] = state;
+      if (el2 && el2.dataset["state"] !== state) {
+        el2.dataset["state"] = state;
       }
     }
     function enforceAnimStates() {
@@ -1021,6 +1116,9 @@ var Fluix = (function (exports) {
     }
     function apply(frame) {
       applyFrame(options.indicator, frame, variant, orientation);
+      if (options.ghostIndicator) {
+        options.ghostIndicator.setAttribute("opacity", "0");
+      }
     }
     const updateIndicator = (immediate = false) => {
       const activeId = options.getActiveId();
@@ -1133,11 +1231,23 @@ var Fluix = (function (exports) {
           onEnterStart
         );
       } else {
-        animation = animatePillMorph(
-          options.indicator,
+        const waypoints = buildPillWaypoints(
+          options.root,
+          oldActiveId,
+          newActiveId,
+          padding,
+          variant,
+          orientation,
           from,
-          to,
-          { stiffness: spring.stiffness ?? 170, damping: spring.damping ?? 18, mass: spring.mass ?? 1 }
+          to
+        );
+        const springConfig = { stiffness: spring.stiffness ?? 170, damping: spring.damping ?? 18, mass: spring.mass ?? 1 };
+        const ghost = options.ghostIndicator ?? null;
+        animation = chainPillMorphs(
+          options.indicator,
+          ghost,
+          waypoints,
+          springConfig
         );
       }
       if (!animation) {
@@ -1162,7 +1272,7 @@ var Fluix = (function (exports) {
         }
       };
     };
-    const sync = (immediate = false) => {
+    const sync2 = (immediate = false) => {
       cancelAnimationFrame(rafId);
       rafId = requestAnimationFrame(() => updateIndicator(immediate));
     };
@@ -1180,7 +1290,7 @@ var Fluix = (function (exports) {
     cleanups.push(() => options.root.removeEventListener("click", handleClick));
     const scheduleSync = () => {
       if (animPhase) return;
-      sync(false);
+      sync2(false);
     };
     resizeObserver = new ResizeObserver(scheduleSync);
     resizeObserver.observe(options.root);
@@ -1191,18 +1301,24 @@ var Fluix = (function (exports) {
       resizeObserver?.disconnect();
       resizeObserver = null;
     });
-    mutationObserver = new MutationObserver(() => {
-      if (animPhase) {
-        enforceAnimStates();
-        return;
-      }
+    function rebuildResizeObserver() {
       if (!resizeObserver) return;
       resizeObserver.disconnect();
       resizeObserver.observe(options.root);
       for (const item of options.root.querySelectorAll(ITEM_SELECTOR)) {
         resizeObserver.observe(item);
       }
-      sync(false);
+    }
+    mutationObserver = new MutationObserver((mutations) => {
+      if (animPhase) {
+        enforceAnimStates();
+        return;
+      }
+      const hasStructuralChange = mutations.some((m) => m.type === "childList");
+      if (hasStructuralChange) {
+        rebuildResizeObserver();
+      }
+      sync2(false);
     });
     mutationObserver.observe(options.root, {
       childList: true,
@@ -1214,9 +1330,9 @@ var Fluix = (function (exports) {
       mutationObserver?.disconnect();
       mutationObserver = null;
     });
-    sync(true);
+    sync2(true);
     return {
-      sync,
+      sync: sync2,
       destroy() {
         cancelAnimationFrame(rafId);
         if (currentAnimation) {
@@ -1229,125 +1345,99 @@ var Fluix = (function (exports) {
     };
   }
 
-  // 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;
+  // src/shared.ts
   var SVG_NS = "http://www.w3.org/2000/svg";
+  var GOO_MATRIX = "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10";
+  function applyAttrs(el2, attrs) {
+    for (const [key, value] of Object.entries(attrs)) {
+      el2.setAttribute(key, value);
+    }
+  }
+  function clearChildren(el2) {
+    while (el2.firstChild) el2.removeChild(el2.firstChild);
+  }
+  function createGooeyFilter(filterId, blur2) {
+    const defs = document.createElementNS(SVG_NS, "defs");
+    const filter = document.createElementNS(SVG_NS, "filter");
+    filter.setAttribute("id", filterId);
+    for (const [k, v] of Object.entries({ x: "-50%", y: "-50%", width: "200%", height: "200%" })) {
+      filter.setAttribute(k, v);
+    }
+    filter.setAttribute("color-interpolation-filters", "sRGB");
+    const feBlur = document.createElementNS(SVG_NS, "feGaussianBlur");
+    feBlur.setAttribute("in", "SourceGraphic");
+    feBlur.setAttribute("stdDeviation", String(blur2));
+    feBlur.setAttribute("result", "blur");
+    const feCM = document.createElementNS(SVG_NS, "feColorMatrix");
+    feCM.setAttribute("in", "blur");
+    feCM.setAttribute("type", "matrix");
+    feCM.setAttribute("values", GOO_MATRIX);
+    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);
+    const g = document.createElementNS(SVG_NS, "g");
+    g.setAttribute("filter", `url(#${filterId})`);
+    return { g, defs, feBlur };
+  }
+  function zeroRect(el2) {
+    for (const attr of ["x", "y", "width", "height", "rx", "ry"]) {
+      el2.setAttribute(attr, "0");
+    }
+  }
+
+  // src/toast/icons.ts
+  function el(tag, attrs) {
+    return { tag, attrs };
+  }
+  function line(x1, y1, x2, y2) {
+    return el("line", { x1, y1, x2, y2 });
+  }
+  var ICON_DEFS = {
+    success: { children: [el("polyline", { points: "20 6 9 17 4 12" })] },
+    error: { children: [line("18", "6", "6", "18"), line("6", "6", "18", "18")] },
+    warning: { children: [
+      el("path", { 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" }),
+      line("12", "9", "12", "13"),
+      line("12", "17", "12.01", "17")
+    ] },
+    info: { children: [
+      el("circle", { cx: "12", cy: "12", r: "10" }),
+      line("12", "16", "12", "12"),
+      line("12", "8", "12.01", "8")
+    ] },
+    loading: { spin: true, children: [
+      line("12", "2", "12", "6"),
+      line("12", "18", "12", "22"),
+      line("4.93", "4.93", "7.76", "7.76"),
+      line("16.24", "16.24", "19.07", "19.07"),
+      line("2", "12", "6", "12"),
+      line("18", "12", "22", "12"),
+      line("4.93", "19.07", "7.76", "16.24"),
+      line("16.24", "7.76", "19.07", "4.93")
+    ] },
+    action: { children: [
+      el("circle", { cx: "12", cy: "12", r: "10" }),
+      el("polygon", { points: "10 8 16 12 10 16 10 8", fill: "currentColor", stroke: "none" })
+    ] }
+  };
   function createSvgIcon(state) {
+    const def = ICON_DEFS[state];
+    if (!def) return null;
     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;
+    for (const [k, v] of Object.entries({ width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2.5", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" })) {
+      svg.setAttribute(k, v);
+    }
+    if (def.spin) svg.setAttribute("data-fluix-icon", "spin");
+    for (const child of def.children) {
+      const node = document.createElementNS(SVG_NS, child.tag);
+      for (const [k, v] of Object.entries(child.attrs)) node.setAttribute(k, v);
+      svg.appendChild(node);
     }
     return svg;
   }
@@ -1367,77 +1457,27 @@ var Fluix = (function (exports) {
     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;
-  }
+
+  // src/toast/update.ts
+  var PILL_PADDING = 10;
+  var MIN_EXPAND_RATIO = 2.25;
+  var HEADER_EXIT_MS = 600 * 0.7;
+  var BODY_MERGE_OVERLAP = 6;
   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 blur2 = 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 position = getPillAlignLocal(item.position);
     const edge = item.position.startsWith("top") ? "bottom" : "top";
     const resolvedPillWidth = Math.max(inst.pillWidth || HEIGHT, HEIGHT);
-    const pillHeight = HEIGHT + blur * 3;
+    const pillHeight = HEIGHT + blur2 * 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;
-    }
+    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;
@@ -1445,7 +1485,7 @@ var Fluix = (function (exports) {
       ready,
       isExpanded,
       roundness,
-      blur,
+      blur: blur2,
       hasDesc,
       isLoading,
       open,
@@ -1460,244 +1500,19 @@ var Fluix = (function (exports) {
       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 ?? "var(--fluix-surface-contrast)");
-    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 ?? "var(--fluix-surface-contrast)");
-    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);
-        setupAutopilot(inst, inst.item);
-      },
-      32
-    );
-    setupAutoDismiss(inst, item, machine2);
-    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 getPillAlignLocal(position) {
+    if (position.includes("right")) return "right";
+    if (position.includes("center")) return "center";
+    return "left";
+  }
+  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 w = inst.innerEl.getBoundingClientRect().width + inst.headerPad + PILL_PADDING;
+    if (w > PILL_PADDING && w !== inst.pillWidth) inst.pillWidth = w;
   }
   function applyVars(inst, item) {
     const layout = computeLayout(item, inst);
@@ -1714,15 +1529,12 @@ var Fluix = (function (exports) {
       "--_bh": `${open ? expandedContent : 0}px`,
       "--_bo": `${open ? 1 : 0}`
     };
-    for (const [key, value] of Object.entries(vars)) {
-      inst.el.style.setProperty(key, value);
-    }
+    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 { open, resolvedPillWidth, pillX, pillHeight } = computeLayout(item, inst);
     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;
@@ -1735,88 +1547,59 @@ var Fluix = (function (exports) {
       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.pillAnim = 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.prevPill = next;
   }
+  function setTimer(inst, fn, ms) {
+    const id = setTimeout(() => {
+      inst.timers.delete(id);
+      fn();
+    }, ms);
+    inst.timers.add(id);
+    return id;
+  }
   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
-    );
+    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 (item.autoExpandDelayMs != null && item.autoExpandDelayMs > 0) {
-      setTimer(
-        inst,
-        () => {
-          if (!inst.hovering) {
-            inst.localState.expanded = true;
-            applyUpdate(inst, inst.item);
-          }
-        },
-        item.autoExpandDelayMs
-      );
+      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
-      );
+      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;
-    }
+  function updateDescription(inst, item, attrs) {
     const hasDesc = Boolean(item.description) || Boolean(item.button);
     if (hasDesc && !inst.contentEl) {
       const contentEl = document.createElement("div");
@@ -1837,37 +1620,50 @@ var Fluix = (function (exports) {
       inst.contentRo.observe(descriptionEl);
     }
     if (inst.contentEl) applyAttrs(inst.contentEl, attrs.content);
-    if (inst.descriptionEl) {
-      applyAttrs(inst.descriptionEl, attrs.description);
-      if (item.styles?.description) {
-        inst.descriptionEl.className = item.styles.description;
-      }
-      const existingBtn = inst.descriptionEl.querySelector("[data-fluix-button]");
-      inst.descriptionEl.textContent = "";
-      if (item.description != null) {
-        if (typeof item.description === "string") {
-          inst.descriptionEl.textContent = item.description;
-        } else if (item.description instanceof HTMLElement) {
-          inst.descriptionEl.appendChild(item.description);
-        }
-      }
-      if (item.button) {
-        let btnEl = existingBtn;
-        if (!btnEl) {
-          btnEl = document.createElement("button");
-          btnEl.type = "button";
-        }
-        btnEl.textContent = item.button.title;
-        if (item.styles?.button) btnEl.className = item.styles.button;
-        applyAttrs(btnEl, attrs.button);
-        const newBtn = btnEl.cloneNode(true);
-        newBtn.addEventListener("click", (e) => {
-          e.stopPropagation();
-          item.button?.onClick();
-        });
-        inst.descriptionEl.appendChild(newBtn);
-      }
+    if (!inst.descriptionEl) return;
+    applyAttrs(inst.descriptionEl, attrs.description);
+    if (item.styles?.description) inst.descriptionEl.className = item.styles.description;
+    const existingBtn = inst.descriptionEl.querySelector("[data-fluix-button]");
+    inst.descriptionEl.textContent = "";
+    if (item.description != null) {
+      if (typeof item.description === "string") inst.descriptionEl.textContent = item.description;
+      else if (item.description instanceof HTMLElement) inst.descriptionEl.appendChild(item.description);
+    }
+    if (item.button) {
+      let btnEl = existingBtn;
+      if (!btnEl) {
+        btnEl = document.createElement("button");
+        btnEl.type = "button";
+      }
+      btnEl.textContent = item.button.title;
+      if (item.styles?.button) btnEl.className = item.styles.button;
+      applyAttrs(btnEl, attrs.button);
+      const newBtn = btnEl.cloneNode(true);
+      newBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        item.button?.onClick();
+      });
+      inst.descriptionEl.appendChild(newBtn);
     }
+  }
+  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;
+    }
+    updateDescription(inst, item, attrs);
     inst.pillEl.setAttribute("fill", item.fill ?? "var(--fluix-surface-contrast)");
     inst.bodyEl.setAttribute("fill", item.fill ?? "var(--fluix-surface-contrast)");
     const newHeaderKey = `${item.state}-${item.title ?? item.state}`;
@@ -1899,13 +1695,9 @@ var Fluix = (function (exports) {
     inst.innerEl = newInner;
     inst.pillRo.unobserve(oldInner);
     inst.pillRo.observe(newInner);
-    setTimer(
-      inst,
-      () => {
-        oldInner.remove();
-      },
-      HEADER_EXIT_MS
-    );
+    setTimer(inst, () => {
+      oldInner.remove();
+    }, HEADER_EXIT_MS);
     requestAnimationFrame(() => {
       measurePillWidth(inst);
       applyVars(inst, inst.item);
@@ -1921,560 +1713,874 @@ var Fluix = (function (exports) {
     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;
+
+  // src/toast/instance.ts
+  var WIDTH = 350;
+  var HEIGHT = 40;
+  var MIN_EXPAND_RATIO2 = 2.25;
+  function getPillAlign2(position) {
+    if (position.includes("right")) return "right";
+    if (position.includes("center")) return "center";
+    return "left";
+  }
+  function buildInstanceSvg(item, roundness, blur2) {
+    const filterId = `fluix-gooey-${item.id.replace(/[^a-z0-9-]/gi, "-")}`;
+    const hasDesc = Boolean(item.description) || Boolean(item.button);
+    const initialSvgHeight = hasDesc ? HEIGHT * MIN_EXPAND_RATIO2 : 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 { g, defs } = createGooeyFilter(filterId, blur2);
+    svg.appendChild(defs);
+    const initialPillX = getPillAlign2(item.position) === "right" ? WIDTH - HEIGHT : getPillAlign2(item.position) === "center" ? (WIDTH - HEIGHT) / 2 : 0;
+    const fill = item.fill ?? "var(--fluix-surface-contrast)";
+    const pillEl = document.createElementNS(SVG_NS, "rect");
+    pillEl.setAttribute("data-fluix-pill", "");
+    for (const [k, v] of Object.entries({ x: initialPillX, y: 0, width: HEIGHT, height: HEIGHT, rx: roundness, ry: roundness })) {
+      pillEl.setAttribute(k, String(v));
     }
-    function removeViewport(position) {
-      const vp = viewports.get(position);
-      if (vp) {
-        vp.remove();
-        viewports.delete(position);
-      }
+    pillEl.setAttribute("fill", fill);
+    const bodyEl = document.createElementNS(SVG_NS, "rect");
+    bodyEl.setAttribute("data-fluix-body", "");
+    for (const [k, v] of Object.entries({ x: 0, y: HEIGHT, width: WIDTH, height: 0, rx: roundness, ry: roundness })) {
+      bodyEl.setAttribute(k, String(v));
     }
-    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);
+    bodyEl.setAttribute("fill", fill);
+    bodyEl.setAttribute("opacity", "0");
+    g.appendChild(pillEl);
+    g.appendChild(bodyEl);
+    svg.appendChild(g);
+    return { svg, pillEl, bodyEl, initialPillX };
+  }
+  function buildInstanceContent(item) {
+    let contentEl = null;
+    let descriptionEl = null;
+    const hasDesc = Boolean(item.description) || Boolean(item.button);
+    if (!hasDesc) return { contentEl, descriptionEl };
+    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);
+    return { contentEl, descriptionEl };
+  }
+  function buildHeader(item) {
+    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);
+    return { headerEl, headerStackEl, innerEl, badgeEl, titleEl };
+  }
+  function createInstance(item, machine2) {
+    const localState = { ready: false, expanded: false };
+    const roundness = item.roundness ?? TOAST_DEFAULTS.roundness;
+    const blur2 = Math.min(10, Math.max(6, roundness * 0.45));
+    const el2 = document.createElement("button");
+    el2.type = "button";
+    const canvasDiv = document.createElement("div");
+    const { svg, pillEl, bodyEl, initialPillX } = buildInstanceSvg(item, roundness, blur2);
+    canvasDiv.appendChild(svg);
+    el2.appendChild(canvasDiv);
+    const { headerEl, headerStackEl, innerEl, badgeEl, titleEl } = buildHeader(item);
+    el2.appendChild(headerEl);
+    const { contentEl, descriptionEl } = buildInstanceContent(item);
+    if (contentEl) el2.appendChild(contentEl);
+    const attrs = Toaster.getAttrs(item, localState);
+    applyAttrs(el2, 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 inst = {
+      el: el2,
+      pillEl,
+      bodyEl,
+      svgEl: svg,
+      headerEl,
+      innerEl,
+      headerStackEl,
+      contentEl,
+      descriptionEl,
+      localState,
+      pillWidth: 0,
+      contentHeight: 0,
+      frozenExpanded: HEIGHT * MIN_EXPAND_RATIO2,
+      hovering: false,
+      pendingDismiss: false,
+      dismissRequested: false,
+      pillRo: null,
+      contentRo: null,
+      pillAnim: null,
+      prevPill: { x: initialPillX, width: HEIGHT, height: HEIGHT },
+      pillFirst: true,
+      headerKey: `${item.state}-${item.title ?? item.state}`,
+      headerPad: null,
+      connectHandle: null,
+      timers: /* @__PURE__ */ new Set(),
+      item
+    };
+    wireObservers(inst);
+    wireConnect(inst, item, machine2);
+    applyVars(inst, item);
+    setTimer(inst, () => {
+      inst.localState.ready = true;
+      applyUpdate(inst, inst.item);
+      setupAutopilot(inst, inst.item);
+    }, 32);
+    setupAutoDismiss(inst, item, machine2);
+    measurePillWidth(inst);
+    return inst;
+  }
+  function wireObservers(inst, _item) {
+    inst.pillRo = new ResizeObserver(() => {
+      requestAnimationFrame(() => {
+        measurePillWidth(inst);
+        applyVars(inst, inst.item);
+      });
+    });
+    inst.pillRo.observe(inst.innerEl);
+    if (inst.descriptionEl) {
+      const descEl = inst.descriptionEl;
+      inst.contentRo = new ResizeObserver(() => {
+        requestAnimationFrame(() => {
+          const h = descEl.scrollHeight;
+          if (h !== inst.contentHeight) {
+            inst.contentHeight = h;
+            applyVars(inst, inst.item);
           }
+        });
+      });
+      inst.contentRo.observe(descEl);
+    }
+  }
+  function wireConnect(inst, item, machine2) {
+    inst.connectHandle = Toaster.connect(inst.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);
         }
       }
-      for (const [position, vp] of viewports) {
-        const vpAttrs = Toaster.getViewportAttrs(position, resolvedLayout);
-        applyAttrs(vp, vpAttrs);
-        applyViewportOffset(vp, resolvedOffset, position);
+    }, item);
+  }
+
+  // src/toast/index.ts
+  function resolveOffsetValue(v) {
+    return typeof v === "number" ? `${v}px` : v;
+  }
+  function applyViewportOffset(el2, offset, position) {
+    el2.style.top = "";
+    el2.style.right = "";
+    el2.style.bottom = "";
+    el2.style.left = "";
+    el2.style.paddingLeft = "";
+    el2.style.paddingRight = "";
+    if (offset == null) return;
+    let top, right, bottom, 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) el2.style.top = top;
+    if (position.startsWith("bottom") && bottom) el2.style.bottom = bottom;
+    if (position.endsWith("right") && right) el2.style.right = right;
+    if (position.endsWith("left") && left) el2.style.left = left;
+    if (position.endsWith("center")) {
+      if (left) el2.style.paddingLeft = left;
+      if (right) el2.style.paddingRight = right;
+    }
+  }
+  function ensureViewport(state, position, layout, offset) {
+    let vp = state.viewports.get(position);
+    if (!vp) {
+      vp = document.createElement("section");
+      applyAttrs(vp, Toaster.getViewportAttrs(position, layout));
+      applyViewportOffset(vp, offset, position);
+      document.body.appendChild(vp);
+      state.viewports.set(position, vp);
+    }
+    return vp;
+  }
+  function sync(state) {
+    const next = state.machine.store.getSnapshot();
+    const layout = next.config?.layout ?? state.currentConfig?.layout ?? "stack";
+    const offset = next.config?.offset ?? state.currentConfig?.offset;
+    const activePositions = /* @__PURE__ */ new Set();
+    const nextIds = new Set(next.toasts.map((t) => t.id));
+    for (const [id, inst] of state.instances) {
+      if (!nextIds.has(id)) {
+        destroyInstance(inst);
+        state.instances.delete(id);
+      }
+    }
+    for (const item of next.toasts) {
+      activePositions.add(item.position);
+      const vp = ensureViewport(state, item.position, layout, offset);
+      const existing = state.instances.get(item.id);
+      if (!existing) {
+        const inst = createInstance(item, state.machine);
+        state.instances.set(item.id, inst);
+        vp.appendChild(inst.el);
+      } else if (existing.item.instanceId !== item.instanceId) {
+        destroyInstance(existing);
+        const inst = createInstance(item, state.machine);
+        state.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] of viewports) {
-        if (!activePositions.has(position)) {
-          removeViewport(position);
-        }
+    }
+    for (const [position, vp] of state.viewports) {
+      applyAttrs(vp, Toaster.getViewportAttrs(position, layout));
+      applyViewportOffset(vp, offset, position);
+    }
+    for (const [position] of state.viewports) {
+      if (!activePositions.has(position)) {
+        state.viewports.get(position)?.remove();
+        state.viewports.delete(position);
       }
     }
-    sync();
-    const unsubscribe = machine2.store.subscribe(sync);
+  }
+  function createToaster(config) {
+    const state = {
+      machine: Toaster.getMachine(),
+      instances: /* @__PURE__ */ new Map(),
+      viewports: /* @__PURE__ */ new Map(),
+      currentConfig: config
+    };
+    if (config) state.machine.configure(config);
+    sync(state);
+    const unsubscribe = state.machine.store.subscribe(() => sync(state));
     return {
       destroy() {
         unsubscribe();
-        for (const inst of instances.values()) {
-          destroyInstance(inst);
-        }
-        instances.clear();
-        for (const vp of viewports.values()) {
-          vp.remove();
-        }
-        viewports.clear();
+        for (const inst of state.instances.values()) destroyInstance(inst);
+        state.instances.clear();
+        for (const vp of state.viewports.values()) vp.remove();
+        state.viewports.clear();
       },
       update(newConfig) {
-        currentConfig = newConfig;
-        machine2.configure(newConfig);
+        state.currentConfig = newConfig;
+        state.machine.configure(newConfig);
       }
     };
   }
 
-  // src/notch.ts
-  var SVG_NS2 = "http://www.w3.org/2000/svg";
-  function applyAttrs2(el, attrs) {
-    for (const [key, value] of Object.entries(attrs)) {
-      el.setAttribute(key, value);
+  // src/notch/highlight.ts
+  function setBlobAttrs(el2, x, y, w, h, rx, opacity) {
+    el2.setAttribute("x", String(x));
+    el2.setAttribute("y", String(y));
+    el2.setAttribute("width", String(w));
+    el2.setAttribute("height", String(h));
+    el2.setAttribute("rx", String(rx));
+    el2.setAttribute("ry", String(rx));
+    el2.setAttribute("opacity", opacity);
+  }
+  function springBlob(el2, from, to, sc) {
+    return animateSpring(el2, {
+      x: { from: from.x, to: to.x, unit: "px" },
+      y: { from: from.y, to: to.y, unit: "px" },
+      width: { from: from.w, to: to.w, unit: "px" },
+      height: { from: from.h, to: to.h, unit: "px" },
+      rx: { from: from.rx, to: to.rx, unit: "px" },
+      ry: { from: from.rx, to: to.rx, unit: "px" }
+    }, { ...sc, stiffness: (sc.stiffness ?? 300) * 1.2 });
+  }
+  function createHighlightTracker(el2, springConfig) {
+    let anim = null;
+    const prev = { x: 0, y: 0, w: 0, h: 0, visible: false };
+    function finish(a, x, y, w, h, rx, opacity) {
+      if (a) {
+        anim = a;
+        a.onfinish = () => {
+          anim = null;
+          setBlobAttrs(el2, x, y, w, h, rx, opacity);
+        };
+      } else {
+        setBlobAttrs(el2, x, y, w, h, rx, opacity);
+      }
     }
+    return {
+      onItemEnter(e, rootEl, isOpen, roundness) {
+        const target = e.target.closest("a, button");
+        if (!target || !isOpen) return;
+        const rootRect = rootEl.getBoundingClientRect();
+        const itemRect = target.getBoundingClientRect();
+        const padX = 8, padY = 4;
+        const overshoot = Math.max(6, roundness * 0.35);
+        const toW = target.offsetWidth + padX * 2;
+        const toH = Math.max(target.offsetHeight + padY * 2, rootRect.height + overshoot * 2);
+        const toX = itemRect.left + itemRect.width / 2 - rootRect.left - toW / 2;
+        const toY = itemRect.top + itemRect.height / 2 - rootRect.top - toH / 2;
+        if (anim) {
+          anim.cancel();
+          anim = null;
+        }
+        const from = {
+          x: prev.visible ? prev.x : toX + toW / 2,
+          y: prev.visible ? prev.y : toY + toH / 2,
+          w: prev.visible ? prev.w : 0,
+          h: prev.visible ? prev.h : 0,
+          rx: prev.visible ? prev.h / 2 : 0
+        };
+        finish(springBlob(el2, from, { x: toX, y: toY, w: toW, h: toH, rx: toH / 2 }, springConfig()), toX, toY, toW, toH, toH / 2, "1");
+        el2.setAttribute("opacity", "1");
+        prev.x = toX;
+        prev.y = toY;
+        prev.w = toW;
+        prev.h = toH;
+        prev.visible = true;
+      },
+      onItemLeave() {
+        if (!prev.visible) return;
+        const cx = prev.x + prev.w / 2, cy = prev.y + prev.h / 2;
+        finish(springBlob(el2, { x: prev.x, y: prev.y, w: prev.w, h: prev.h, rx: prev.h / 2 }, { x: cx, y: cy, w: 0, h: 0, rx: 0 }, springConfig()), cx, cy, 0, 0, 0, "0");
+        prev.visible = false;
+      },
+      reset(rootW, rootH) {
+        if (anim) {
+          anim.cancel();
+          anim = null;
+        }
+        setBlobAttrs(el2, rootW / 2, rootH / 2, 0, 0, 0, "0");
+        prev.visible = false;
+      },
+      cancelAnim() {
+        anim?.cancel();
+      }
+    };
   }
+
+  // src/notch/dom.ts
   function resolveContent(source) {
     if (source instanceof HTMLElement) return source;
     const span = document.createElement("span");
     span.textContent = source;
     return span;
   }
-  function createNotch(container, options) {
-    let {
-      trigger = "click",
-      position = "top-center",
-      spring,
-      dotSize = 36,
-      roundness = NOTCH_DEFAULTS.roundness,
-      theme = "dark",
-      fill,
-      open: controlledOpen,
-      onOpenChange
-    } = options;
-    const springConfig = () => spring ?? FLUIX_SPRING;
-    const machine2 = createNotchMachine({
-      position,
-      trigger,
-      roundness,
-      fill,
-      spring
-    });
-    let snapshot = machine2.store.getSnapshot();
-    let prevOpenVal;
-    const blur = () => Math.min(10, Math.max(6, roundness * 0.45));
-    const collapsedW = () => dotSize;
-    const collapsedH = () => dotSize;
-    let contentSize = { w: 200, h: 44 };
-    const hlPad = 12;
-    const expandedW = () => contentSize.w + hlPad * 2;
-    const expandedH = () => Math.max(contentSize.h + hlPad, dotSize);
-    const targetW = () => snapshot.open ? expandedW() : collapsedW();
-    const targetH = () => snapshot.open ? expandedH() : collapsedH();
-    const rootW = () => Math.max(expandedW(), collapsedW());
-    const rootH = () => Math.max(expandedH(), collapsedH());
-    const prev = { w: 0, h: 0, initialized: false };
-    let currentAnim = null;
-    let highlightAnim = null;
-    const hlPrev = { x: 0, y: 0, w: 0, h: 0, visible: false };
+  function buildNotchSvg(rW, rH, collW, collH, blurVal, fill) {
+    const svg = document.createElementNS(SVG_NS, "svg");
+    svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    for (const [k, v] of Object.entries({ width: String(rW), height: String(rH), viewBox: `0 0 ${rW} ${rH}`, "aria-hidden": "true" })) svg.setAttribute(k, v);
+    const { g, defs, feBlur } = createGooeyFilter("fluix-notch-goo", blurVal);
+    svg.appendChild(defs);
+    const effectiveFill = fill ?? "var(--fluix-notch-bg)";
+    const svgRectEl = document.createElementNS(SVG_NS, "rect");
+    const cx = (rW - collW) / 2, cy = (rH - collH) / 2;
+    for (const [k, v] of Object.entries({ x: cx, y: cy, width: collW, height: collH, rx: collW / 2, ry: collH / 2 })) svgRectEl.setAttribute(k, String(v));
+    svgRectEl.setAttribute("fill", effectiveFill);
+    g.appendChild(svgRectEl);
+    const hoverBlobEl = document.createElementNS(SVG_NS, "rect");
+    for (const [k, v] of Object.entries({ x: cx, y: cy, width: 0, height: 0, rx: 0, ry: 0, opacity: "0" })) hoverBlobEl.setAttribute(k, String(v));
+    hoverBlobEl.setAttribute("fill", effectiveFill);
+    g.appendChild(hoverBlobEl);
+    svg.appendChild(g);
+    return { svg, svgRectEl, hoverBlobEl, feBlur };
+  }
+  var HL_PAD = 12;
+  function computeDims(cfg) {
+    const collW = cfg.dotSize, collH = cfg.dotSize;
+    const expW = cfg.contentSize.w + HL_PAD * 2;
+    const expH = Math.max(cfg.contentSize.h + HL_PAD, cfg.dotSize);
+    const rW = Math.max(expW, collW);
+    const rH = Math.max(expH, collH);
+    return { collW, collH, rW, rH };
+  }
+  function computeBlur(roundness) {
+    return Math.min(10, Math.max(6, roundness * 0.45));
+  }
+  function buildNotchDOM(cfg, pill, content, container, springCfg2) {
     const measureEl = document.createElement("div");
     measureEl.setAttribute("data-fluix-notch-measure", "");
-    measureEl.appendChild(resolveContent(options.content).cloneNode(true));
+    measureEl.appendChild(resolveContent(content).cloneNode(true));
     container.appendChild(measureEl);
+    const d = computeDims(cfg);
     const rootEl = document.createElement("div");
-    const attrs = getNotchAttrs({ open: snapshot.open, position, theme });
-    applyAttrs2(rootEl, attrs.root);
-    rootEl.style.width = `${rootW()}px`;
-    rootEl.style.height = `${rootH()}px`;
+    const attrs = getNotchAttrs({ open: cfg.snapshot.open, position: cfg.position, theme: cfg.theme });
+    applyAttrs(rootEl, attrs.root);
+    rootEl.style.width = `${d.rW}px`;
+    rootEl.style.height = `${d.rH}px`;
     const canvasDiv = document.createElement("div");
-    applyAttrs2(canvasDiv, attrs.canvas);
-    const svg = document.createElementNS(SVG_NS2, "svg");
-    svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-    svg.setAttribute("width", String(rootW()));
-    svg.setAttribute("height", String(rootH()));
-    svg.setAttribute("viewBox", `0 0 ${rootW()} ${rootH()}`);
-    svg.setAttribute("aria-hidden", "true");
-    const defs = document.createElementNS(SVG_NS2, "defs");
-    const filter = document.createElementNS(SVG_NS2, "filter");
-    filter.setAttribute("id", "fluix-notch-goo");
-    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_NS2, "feGaussianBlur");
-    feBlur.setAttribute("in", "SourceGraphic");
-    feBlur.setAttribute("stdDeviation", String(blur()));
-    feBlur.setAttribute("result", "blur");
-    const feCM = document.createElementNS(SVG_NS2, "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_NS2, "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 gGroup = document.createElementNS(SVG_NS2, "g");
-    gGroup.setAttribute("filter", "url(#fluix-notch-goo)");
-    const svgRectEl = document.createElementNS(SVG_NS2, "rect");
-    const cw = collapsedW();
-    const ch = collapsedH();
-    svgRectEl.setAttribute("x", String((rootW() - cw) / 2));
-    svgRectEl.setAttribute("y", String((rootH() - ch) / 2));
-    svgRectEl.setAttribute("width", String(cw));
-    svgRectEl.setAttribute("height", String(ch));
-    svgRectEl.setAttribute("rx", String(cw / 2));
-    svgRectEl.setAttribute("ry", String(ch / 2));
-    svgRectEl.setAttribute("fill", fill ?? "var(--fluix-notch-bg)");
-    gGroup.appendChild(svgRectEl);
-    svg.appendChild(gGroup);
-    const hoverBlobEl = document.createElementNS(SVG_NS2, "rect");
-    hoverBlobEl.setAttribute("x", String((rootW() - cw) / 2));
-    hoverBlobEl.setAttribute("y", String((rootH() - ch) / 2));
-    hoverBlobEl.setAttribute("width", "0");
-    hoverBlobEl.setAttribute("height", "0");
-    hoverBlobEl.setAttribute("rx", "0");
-    hoverBlobEl.setAttribute("ry", "0");
-    hoverBlobEl.setAttribute("opacity", "0");
-    hoverBlobEl.setAttribute("fill", fill ?? "var(--fluix-notch-bg)");
-    gGroup.appendChild(hoverBlobEl);
-    canvasDiv.appendChild(svg);
+    applyAttrs(canvasDiv, attrs.canvas);
+    canvasDiv.style.cssText = "position:absolute;inset:0;pointer-events:none;overflow:visible;";
+    const svgRefs = buildNotchSvg(d.rW, d.rH, d.collW, d.collH, computeBlur(cfg.roundness), cfg.fill);
+    canvasDiv.appendChild(svgRefs.svg);
     rootEl.appendChild(canvasDiv);
+    const highlight = createHighlightTracker(svgRefs.hoverBlobEl, springCfg2);
     const pillDiv = document.createElement("div");
-    applyAttrs2(pillDiv, attrs.pill);
-    pillDiv.style.width = `${dotSize}px`;
-    pillDiv.style.height = `${dotSize}px`;
-    pillDiv.appendChild(resolveContent(options.pill));
+    applyAttrs(pillDiv, attrs.pill);
+    pillDiv.style.cssText = `position:absolute;z-index:10;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;pointer-events:none;width:${cfg.dotSize}px;height:${cfg.dotSize}px;color:var(--fluix-notch-color);`;
+    pillDiv.appendChild(resolveContent(pill));
     rootEl.appendChild(pillDiv);
     const contentDiv = document.createElement("div");
-    applyAttrs2(contentDiv, attrs.content);
-    contentDiv.appendChild(resolveContent(options.content));
+    applyAttrs(contentDiv, attrs.content);
+    contentDiv.style.cssText = "position:absolute;z-index:10;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;color:var(--fluix-notch-color);";
+    contentDiv.appendChild(resolveContent(content));
     rootEl.appendChild(contentDiv);
     container.appendChild(rootEl);
-    prev.w = cw;
-    prev.h = ch;
-    prev.initialized = true;
-    let measureRaf = 0;
+    rootEl.setAttribute("role", "button");
+    rootEl.setAttribute("tabindex", "0");
+    rootEl.setAttribute("aria-expanded", String(cfg.snapshot.open));
+    return { rootEl, measureEl, pillDiv, contentDiv, highlight, ...svgRefs };
+  }
+
+  // src/notch/index.ts
+  var HL_PAD2 = 12;
+  function dims(ctx) {
+    const collW = ctx.dotSize, collH = ctx.dotSize;
+    const expW = ctx.contentSize.w + HL_PAD2 * 2;
+    const expH = Math.max(ctx.contentSize.h + HL_PAD2, ctx.dotSize);
+    const tW = ctx.snapshot.open ? expW : collW;
+    const tH = ctx.snapshot.open ? expH : collH;
+    const rW = Math.max(expW, collW);
+    const rH = Math.max(expH, collH);
+    return { collW, collH, expW, expH, tW, tH, rW, rH };
+  }
+  function blur(ctx) {
+    return Math.min(10, Math.max(6, ctx.roundness * 0.45));
+  }
+  function springCfg(ctx) {
+    return ctx.spring ?? FLUIX_SPRING;
+  }
+  function animateRect(ctx) {
+    const d = dims(ctx);
+    const toX = (d.rW - d.tW) / 2, toY = (d.rH - d.tH) / 2;
+    if (d.tW === ctx.prev.w && d.tH === ctx.prev.h) {
+      const el3 = ctx.dom.svgRectEl;
+      const rx = d.tW === d.collW && d.tH === d.collH ? d.collW / 2 : ctx.roundness;
+      for (const [k, v] of Object.entries({ x: toX, y: toY, width: d.tW, height: d.tH, rx, ry: rx })) el3.setAttribute(k, String(v));
+      return;
+    }
+    if (ctx.currentAnim) {
+      ctx.currentAnim.cancel();
+      ctx.currentAnim = null;
+    }
+    const fromW = ctx.prev.w, fromH = ctx.prev.h;
+    const fromX = (d.rW - fromW) / 2, fromY = (d.rH - fromH) / 2;
+    ctx.prev.w = d.tW;
+    ctx.prev.h = d.tH;
+    const wasCollapsed = fromW === d.collW && fromH === d.collH;
+    const isCollapsing = d.tW === d.collW && d.tH === d.collH;
+    const fromRx = wasCollapsed ? d.collW / 2 : ctx.roundness;
+    const toRx = isCollapsing ? d.collW / 2 : ctx.roundness;
+    const el2 = ctx.dom.svgRectEl;
+    const a = animateSpring(el2, {
+      width: { from: fromW, to: d.tW, unit: "px" },
+      height: { from: fromH, to: d.tH, unit: "px" },
+      x: { from: fromX, to: toX, unit: "px" },
+      y: { from: fromY, to: toY, unit: "px" },
+      rx: { from: fromRx, to: toRx, unit: "px" },
+      ry: { from: fromRx, to: toRx, unit: "px" }
+    }, springCfg(ctx));
+    const applyFinal = () => {
+      for (const [k, v] of Object.entries({ width: d.tW, height: d.tH, x: toX, y: toY, rx: toRx, ry: toRx })) el2.setAttribute(k, String(v));
+    };
+    if (a) {
+      ctx.currentAnim = a;
+      a.onfinish = () => {
+        ctx.currentAnim = null;
+        applyFinal();
+      };
+    } else applyFinal();
+  }
+  function updateLayout(ctx) {
+    const d = dims(ctx);
+    const isOpen = ctx.snapshot.open;
+    const newAttrs = getNotchAttrs({ open: isOpen, position: ctx.position, theme: ctx.theme });
+    applyAttrs(ctx.dom.rootEl, newAttrs.root);
+    ctx.dom.rootEl.setAttribute("aria-expanded", String(isOpen));
+    ctx.dom.rootEl.style.width = `${d.rW}px`;
+    ctx.dom.rootEl.style.height = `${d.rH}px`;
+    ctx.dom.svg.setAttribute("width", String(d.rW));
+    ctx.dom.svg.setAttribute("height", String(d.rH));
+    ctx.dom.svg.setAttribute("viewBox", `0 0 ${d.rW} ${d.rH}`);
+    ctx.dom.feBlur.setAttribute("stdDeviation", String(blur(ctx)));
+    const effectiveFill = ctx.fill ?? "var(--fluix-notch-bg)";
+    ctx.dom.svgRectEl.setAttribute("fill", effectiveFill);
+    ctx.dom.hoverBlobEl.setAttribute("fill", effectiveFill);
+    applyAttrs(ctx.dom.contentDiv, newAttrs.content);
+    ctx.dom.contentDiv.style.opacity = isOpen ? "1" : "0";
+    ctx.dom.contentDiv.style.pointerEvents = isOpen ? "auto" : "none";
+    ctx.dom.pillDiv.style.opacity = isOpen ? "0" : "1";
+    animateRect(ctx);
+    if (!isOpen) ctx.highlight.reset(d.rW, d.rH);
+    document.documentElement.style.setProperty("--fluix-notch-offset", `${d.rH}px`);
+  }
+  function createListeners(ctx) {
+    const handleOpen = () => {
+      ctx.controlledOpen === void 0 ? ctx.machine.open() : ctx.onOpenChange?.(true);
+    };
+    const handleClose = () => {
+      ctx.controlledOpen === void 0 ? ctx.machine.close() : ctx.onOpenChange?.(false);
+    };
+    const handleToggle = () => {
+      ctx.controlledOpen === void 0 ? ctx.machine.toggle() : ctx.onOpenChange?.(!ctx.snapshot.open);
+    };
+    return {
+      mouseenter: () => {
+        if (ctx.trigger === "hover") handleOpen();
+      },
+      mouseleave: () => {
+        if (ctx.trigger === "hover") {
+          handleClose();
+          ctx.highlight.reset(dims(ctx).rW, dims(ctx).rH);
+          return;
+        }
+        ctx.highlight.onItemLeave();
+      },
+      mouseover: (e) => {
+        ctx.highlight.onItemEnter(e, ctx.dom.rootEl, ctx.snapshot.open, ctx.roundness);
+      },
+      click: () => {
+        if (ctx.trigger === "click") handleToggle();
+      },
+      keydown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleToggle();
+        } else if (e.key === "Escape" && ctx.snapshot.open) {
+          e.preventDefault();
+          handleClose();
+        }
+      }
+    };
+  }
+  function attachListeners(el2, ls) {
+    el2.addEventListener("mouseenter", ls.mouseenter);
+    el2.addEventListener("mouseleave", ls.mouseleave);
+    el2.addEventListener("mouseover", ls.mouseover);
+    el2.addEventListener("click", ls.click);
+    el2.addEventListener("keydown", ls.keydown);
+  }
+  function detachListeners(el2, ls) {
+    el2.removeEventListener("mouseenter", ls.mouseenter);
+    el2.removeEventListener("mouseleave", ls.mouseleave);
+    el2.removeEventListener("mouseover", ls.mouseover);
+    el2.removeEventListener("click", ls.click);
+    el2.removeEventListener("keydown", ls.keydown);
+  }
+  function notchUpdate(ctx, opts, listeners) {
+    if (opts.trigger !== void 0) ctx.trigger = opts.trigger;
+    if (opts.position !== void 0) ctx.position = opts.position;
+    if (opts.spring !== void 0) ctx.spring = opts.spring;
+    if (opts.dotSize !== void 0) ctx.dotSize = opts.dotSize;
+    if (opts.roundness !== void 0) ctx.roundness = opts.roundness;
+    if (opts.theme !== void 0) ctx.theme = opts.theme;
+    if (opts.fill !== void 0) ctx.fill = opts.fill;
+    if (opts.open !== void 0) ctx.controlledOpen = opts.open;
+    if (opts.onOpenChange !== void 0) ctx.onOpenChange = opts.onOpenChange;
+    if (opts.pill !== void 0) {
+      ctx.dom.pillDiv.textContent = "";
+      ctx.dom.pillDiv.appendChild(resolveContent(opts.pill));
+    }
+    if (opts.content !== void 0) {
+      ctx.dom.contentDiv.textContent = "";
+      ctx.dom.contentDiv.appendChild(resolveContent(opts.content));
+      ctx.dom.measureEl.textContent = "";
+      ctx.dom.measureEl.appendChild(resolveContent(opts.content).cloneNode(true));
+    }
+    ctx.dom.pillDiv.style.width = `${ctx.dotSize}px`;
+    ctx.dom.pillDiv.style.height = `${ctx.dotSize}px`;
+    ctx.machine.configure({ position: ctx.position, trigger: ctx.trigger, roundness: ctx.roundness, fill: ctx.fill, spring: ctx.spring });
+    if (ctx.controlledOpen !== void 0) {
+      if (ctx.controlledOpen && !ctx.snapshot.open) ctx.machine.open();
+      else if (!ctx.controlledOpen && ctx.snapshot.open) ctx.machine.close();
+    }
+    detachListeners(ctx.dom.rootEl, listeners);
+    const newListeners = createListeners(ctx);
+    Object.assign(listeners, newListeners);
+    attachListeners(ctx.dom.rootEl, listeners);
+    updateLayout(ctx);
+    return listeners;
+  }
+  function createNotch(container, options) {
+    const machine2 = createNotchMachine({
+      position: options.position ?? "top-center",
+      trigger: options.trigger ?? "click",
+      roundness: options.roundness ?? NOTCH_DEFAULTS.roundness,
+      fill: options.fill,
+      spring: options.spring
+    });
+    const dotSize = options.dotSize ?? 36;
+    const roundness = options.roundness ?? NOTCH_DEFAULTS.roundness;
+    const spring = options.spring;
+    const domCfg = {
+      snapshot: machine2.store.getSnapshot(),
+      position: options.position ?? "top-center",
+      theme: options.theme ?? "dark",
+      dotSize,
+      fill: options.fill,
+      contentSize: { w: 200, h: 44 },
+      roundness};
+    const dom = buildNotchDOM(domCfg, options.pill, options.content, container, () => springCfg(ctx));
+    const ctx = {
+      trigger: options.trigger ?? "click",
+      position: options.position ?? "top-center",
+      spring,
+      dotSize,
+      roundness,
+      theme: options.theme ?? "dark",
+      fill: options.fill,
+      controlledOpen: options.open,
+      onOpenChange: options.onOpenChange,
+      snapshot: machine2.store.getSnapshot(),
+      prevOpenVal: void 0,
+      contentSize: { w: 200, h: 44 },
+      currentAnim: null,
+      measureRaf: 0,
+      machine: machine2,
+      prev: { w: dotSize, h: dotSize },
+      highlight: dom.highlight,
+      dom
+    };
+    let listeners = createListeners(ctx);
+    attachListeners(ctx.dom.rootEl, listeners);
     const measureObs = new ResizeObserver(() => {
-      cancelAnimationFrame(measureRaf);
-      measureRaf = requestAnimationFrame(() => {
-        const r = measureEl.getBoundingClientRect();
+      cancelAnimationFrame(ctx.measureRaf);
+      ctx.measureRaf = requestAnimationFrame(() => {
+        const r = ctx.dom.measureEl.getBoundingClientRect();
         if (r.width > 0 && r.height > 0) {
           const newSize = { w: Math.ceil(r.width), h: Math.ceil(r.height) };
-          if (newSize.w !== contentSize.w || newSize.h !== contentSize.h) {
-            contentSize = newSize;
-            updateLayout();
+          if (newSize.w !== ctx.contentSize.w || newSize.h !== ctx.contentSize.h) {
+            ctx.contentSize = newSize;
+            updateLayout(ctx);
           }
         }
       });
     });
-    measureObs.observe(measureEl);
-    function onItemEnter(e) {
-      const target = e.target.closest("a, button");
-      if (!target || !snapshot.open) return;
-      const rootRect = rootEl.getBoundingClientRect();
-      const itemW = target.offsetWidth;
-      const itemH = target.offsetHeight;
-      const itemRect = target.getBoundingClientRect();
-      const itemCenterX = itemRect.left + itemRect.width / 2;
-      const itemCenterY = itemRect.top + itemRect.height / 2;
-      const padX = 8;
-      const padY = 4;
-      const blobOvershoot = Math.max(6, roundness * 0.35);
-      const toW = itemW + padX * 2;
-      const toH = Math.max(itemH + padY * 2, rootRect.height + blobOvershoot * 2);
-      const toX = itemCenterX - rootRect.left - toW / 2;
-      const toY = itemCenterY - rootRect.top - toH / 2;
-      const toRx = toH / 2;
-      const fromX = hlPrev.visible ? hlPrev.x : toX + toW / 2;
-      const fromY = hlPrev.visible ? hlPrev.y : toY + toH / 2;
-      const fromW = hlPrev.visible ? hlPrev.w : 0;
-      const fromH = hlPrev.visible ? hlPrev.h : 0;
-      const fromR = hlPrev.visible ? hlPrev.h / 2 : 0;
-      if (highlightAnim) {
-        highlightAnim.cancel();
-        highlightAnim = null;
-      }
-      const sc = springConfig();
-      const a = animateSpring(
-        hoverBlobEl,
-        {
-          x: { from: fromX, to: toX, unit: "px" },
-          y: { from: fromY, to: toY, unit: "px" },
-          width: { from: fromW, to: toW, unit: "px" },
-          height: { from: fromH, to: toH, unit: "px" },
-          rx: { from: fromR, to: toRx, unit: "px" },
-          ry: { from: fromR, to: toRx, unit: "px" }
-        },
-        { ...sc, stiffness: (sc.stiffness ?? 300) * 1.2 }
-      );
-      hlPrev.x = toX;
-      hlPrev.y = toY;
-      hlPrev.w = toW;
-      hlPrev.h = toH;
-      if (a) {
-        highlightAnim = a;
-        a.onfinish = () => {
-          highlightAnim = null;
-          hoverBlobEl.setAttribute("x", String(toX));
-          hoverBlobEl.setAttribute("y", String(toY));
-          hoverBlobEl.setAttribute("width", String(toW));
-          hoverBlobEl.setAttribute("height", String(toH));
-          hoverBlobEl.setAttribute("rx", String(toRx));
-          hoverBlobEl.setAttribute("ry", String(toRx));
-          hoverBlobEl.setAttribute("opacity", "1");
-        };
-      } else {
-        hoverBlobEl.setAttribute("x", String(toX));
-        hoverBlobEl.setAttribute("y", String(toY));
-        hoverBlobEl.setAttribute("width", String(toW));
-        hoverBlobEl.setAttribute("height", String(toH));
-        hoverBlobEl.setAttribute("rx", String(toRx));
-        hoverBlobEl.setAttribute("ry", String(toRx));
-        hoverBlobEl.setAttribute("opacity", "1");
-      }
-      hoverBlobEl.setAttribute("opacity", "1");
-      hlPrev.visible = true;
-    }
-    function resetHoverBlobImmediate() {
-      if (highlightAnim) {
-        highlightAnim.cancel();
-        highlightAnim = null;
-      }
-      hoverBlobEl.setAttribute("x", String(rootW() / 2));
-      hoverBlobEl.setAttribute("y", String(rootH() / 2));
-      hoverBlobEl.setAttribute("width", "0");
-      hoverBlobEl.setAttribute("height", "0");
-      hoverBlobEl.setAttribute("rx", "0");
-      hoverBlobEl.setAttribute("ry", "0");
-      hoverBlobEl.setAttribute("opacity", "0");
-      hlPrev.visible = false;
-    }
-    function onItemLeave() {
-      if (!hlPrev.visible) return;
-      const cx = hlPrev.x + hlPrev.w / 2;
-      const cy = hlPrev.y + hlPrev.h / 2;
-      const sc = springConfig();
-      const a = animateSpring(
-        hoverBlobEl,
-        {
-          x: { from: hlPrev.x, to: cx, unit: "px" },
-          y: { from: hlPrev.y, to: cy, unit: "px" },
-          width: { from: hlPrev.w, to: 0, unit: "px" },
-          height: { from: hlPrev.h, to: 0, unit: "px" },
-          rx: { from: hlPrev.h / 2, to: 0, unit: "px" },
-          ry: { from: hlPrev.h / 2, to: 0, unit: "px" }
-        },
-        { ...sc, stiffness: (sc.stiffness ?? 300) * 1.2 }
-      );
-      if (a) {
-        highlightAnim = a;
-        a.onfinish = () => {
-          highlightAnim = null;
-          hoverBlobEl.setAttribute("x", String(cx));
-          hoverBlobEl.setAttribute("y", String(cy));
-          hoverBlobEl.setAttribute("width", "0");
-          hoverBlobEl.setAttribute("height", "0");
-          hoverBlobEl.setAttribute("rx", "0");
-          hoverBlobEl.setAttribute("ry", "0");
-          hoverBlobEl.setAttribute("opacity", "0");
-        };
-      } else {
-        hoverBlobEl.setAttribute("x", String(cx));
-        hoverBlobEl.setAttribute("y", String(cy));
-        hoverBlobEl.setAttribute("width", "0");
-        hoverBlobEl.setAttribute("height", "0");
-        hoverBlobEl.setAttribute("rx", "0");
-        hoverBlobEl.setAttribute("ry", "0");
-        hoverBlobEl.setAttribute("opacity", "0");
-      }
-      hlPrev.visible = false;
-    }
-    function handleOpen() {
-      if (controlledOpen === void 0) machine2.open();
-      else onOpenChange?.(true);
-    }
-    function handleClose() {
-      if (controlledOpen === void 0) machine2.close();
-      else onOpenChange?.(false);
-    }
-    function handleToggle() {
-      if (controlledOpen === void 0) machine2.toggle();
-      else onOpenChange?.(!snapshot.open);
-    }
-    function onMouseEnter() {
-      if (trigger === "hover") handleOpen();
-    }
-    function onMouseLeave() {
-      if (trigger === "hover") {
-        handleClose();
-        resetHoverBlobImmediate();
-        return;
-      }
-      onItemLeave();
-    }
-    function onClick() {
-      if (trigger === "click") handleToggle();
-    }
-    rootEl.addEventListener("mouseenter", onMouseEnter);
-    rootEl.addEventListener("mouseleave", onMouseLeave);
-    rootEl.addEventListener("mouseover", onItemEnter);
-    rootEl.addEventListener("click", onClick);
-    function animateRect() {
-      const tw = targetW();
-      const th = targetH();
-      if (tw === prev.w && th === prev.h) return;
-      if (currentAnim) {
-        currentAnim.cancel();
-        currentAnim = null;
-      }
-      const rw = rootW();
-      const rh = rootH();
-      const fromW = prev.w;
-      const fromH = prev.h;
-      const fromX = (rw - fromW) / 2;
-      const fromY = (rh - fromH) / 2;
-      const toX = (rw - tw) / 2;
-      const toY = (rh - th) / 2;
-      prev.w = tw;
-      prev.h = th;
-      const isCollapsing = tw === collapsedW() && th === collapsedH();
-      const wasCollapsed = fromW === collapsedW() && fromH === collapsedH();
-      const fromRx = wasCollapsed ? collapsedW() / 2 : roundness;
-      const toRx = isCollapsing ? collapsedW() / 2 : roundness;
-      const a = animateSpring(
-        svgRectEl,
-        {
-          width: { from: fromW, to: tw, unit: "px" },
-          height: { from: fromH, to: th, unit: "px" },
-          x: { from: fromX, to: toX, unit: "px" },
-          y: { from: fromY, to: toY, unit: "px" },
-          rx: { from: fromRx, to: toRx, unit: "px" },
-          ry: { from: fromRx, to: toRx, unit: "px" }
-        },
-        springConfig()
-      );
-      if (a) {
-        currentAnim = a;
-        a.onfinish = () => {
-          currentAnim = null;
-          svgRectEl.setAttribute("width", String(tw));
-          svgRectEl.setAttribute("height", String(th));
-          svgRectEl.setAttribute("x", String(toX));
-          svgRectEl.setAttribute("y", String(toY));
-          svgRectEl.setAttribute("rx", String(toRx));
-          svgRectEl.setAttribute("ry", String(toRx));
-        };
-      } else {
-        svgRectEl.setAttribute("width", String(tw));
-        svgRectEl.setAttribute("height", String(th));
-        svgRectEl.setAttribute("x", String(toX));
-        svgRectEl.setAttribute("y", String(toY));
-        svgRectEl.setAttribute("rx", String(toRx));
-        svgRectEl.setAttribute("ry", String(toRx));
-      }
-    }
-    function updateLayout() {
-      const isOpen = snapshot.open;
-      const newAttrs = getNotchAttrs({ open: isOpen, position, theme });
-      applyAttrs2(rootEl, newAttrs.root);
-      rootEl.style.width = `${rootW()}px`;
-      rootEl.style.height = `${rootH()}px`;
-      svg.setAttribute("width", String(rootW()));
-      svg.setAttribute("height", String(rootH()));
-      svg.setAttribute("viewBox", `0 0 ${rootW()} ${rootH()}`);
-      feBlur.setAttribute("stdDeviation", String(blur()));
-      svgRectEl.setAttribute("fill", fill ?? "var(--fluix-notch-bg)");
-      hoverBlobEl.setAttribute("fill", fill ?? "var(--fluix-notch-bg)");
-      applyAttrs2(contentDiv, newAttrs.content);
-      animateRect();
-      if (!isOpen) {
-        resetHoverBlobImmediate();
-      }
-      document.documentElement.style.setProperty(
-        "--fluix-notch-offset",
-        `${rootH()}px`
-      );
-    }
+    measureObs.observe(ctx.dom.measureEl);
     const unsubscribe = machine2.store.subscribe(() => {
-      const next = machine2.store.getSnapshot();
-      snapshot = next;
-      if (controlledOpen !== void 0) {
-        if (controlledOpen && !next.open) machine2.open();
-        else if (!controlledOpen && next.open) machine2.close();
-      }
-      if (prevOpenVal !== void 0 && prevOpenVal !== next.open) {
-        onOpenChange?.(next.open);
-      }
-      prevOpenVal = next.open;
-      updateLayout();
+      ctx.snapshot = machine2.store.getSnapshot();
+      if (ctx.controlledOpen !== void 0) {
+        if (ctx.controlledOpen && !ctx.snapshot.open) machine2.open();
+        else if (!ctx.controlledOpen && ctx.snapshot.open) machine2.close();
+      }
+      if (ctx.prevOpenVal !== void 0 && ctx.prevOpenVal !== ctx.snapshot.open) ctx.onOpenChange?.(ctx.snapshot.open);
+      ctx.prevOpenVal = ctx.snapshot.open;
+      updateLayout(ctx);
     });
-    updateLayout();
-    document.documentElement.style.setProperty(
-      "--fluix-notch-offset",
-      `${rootH()}px`
-    );
+    updateLayout(ctx);
+    document.documentElement.style.setProperty("--fluix-notch-offset", `${dims(ctx).rH}px`);
     return {
       open() {
-        handleOpen();
+        ctx.controlledOpen === void 0 ? machine2.open() : ctx.onOpenChange?.(true);
       },
       close() {
-        handleClose();
+        ctx.controlledOpen === void 0 ? machine2.close() : ctx.onOpenChange?.(false);
       },
       toggle() {
-        handleToggle();
+        ctx.controlledOpen === void 0 ? machine2.toggle() : ctx.onOpenChange?.(!ctx.snapshot.open);
       },
       destroy() {
         unsubscribe();
-        cancelAnimationFrame(measureRaf);
+        cancelAnimationFrame(ctx.measureRaf);
         measureObs.disconnect();
-        currentAnim?.cancel();
-        highlightAnim?.cancel();
-        rootEl.removeEventListener("mouseenter", onMouseEnter);
-        rootEl.removeEventListener("mouseleave", onMouseLeave);
-        rootEl.removeEventListener("mouseover", onItemEnter);
-        rootEl.removeEventListener("click", onClick);
-        measureEl.remove();
-        rootEl.remove();
+        ctx.currentAnim?.cancel();
+        ctx.highlight.cancelAnim();
+        detachListeners(ctx.dom.rootEl, listeners);
+        machine2.destroy();
+        ctx.dom.measureEl.remove();
+        ctx.dom.rootEl.remove();
         document.documentElement.style.removeProperty("--fluix-notch-offset");
       },
       update(opts) {
-        if (opts.trigger !== void 0) trigger = opts.trigger;
-        if (opts.position !== void 0) position = opts.position;
-        if (opts.spring !== void 0) spring = opts.spring;
-        if (opts.dotSize !== void 0) dotSize = opts.dotSize;
-        if (opts.roundness !== void 0) roundness = opts.roundness;
-        if (opts.theme !== void 0) theme = opts.theme;
-        if (opts.fill !== void 0) fill = opts.fill;
-        if (opts.open !== void 0) controlledOpen = opts.open;
-        if (opts.onOpenChange !== void 0) onOpenChange = opts.onOpenChange;
-        if (opts.pill !== void 0) {
-          pillDiv.textContent = "";
-          pillDiv.appendChild(resolveContent(opts.pill));
-        }
-        if (opts.content !== void 0) {
-          contentDiv.textContent = "";
-          contentDiv.appendChild(resolveContent(opts.content));
-          measureEl.textContent = "";
-          measureEl.appendChild(resolveContent(opts.content).cloneNode(true));
-        }
-        pillDiv.style.width = `${dotSize}px`;
-        pillDiv.style.height = `${dotSize}px`;
-        machine2.configure({ position, trigger, roundness, fill, spring });
-        if (controlledOpen !== void 0) {
-          if (controlledOpen && !snapshot.open) machine2.open();
-          else if (!controlledOpen && snapshot.open) machine2.close();
-        }
-        rootEl.removeEventListener("mouseenter", onMouseEnter);
-        rootEl.removeEventListener("mouseleave", onMouseLeave);
-        rootEl.removeEventListener("click", onClick);
-        rootEl.addEventListener("mouseenter", onMouseEnter);
-        rootEl.addEventListener("mouseleave", onMouseLeave);
-        rootEl.addEventListener("click", onClick);
-        updateLayout();
+        listeners = notchUpdate(ctx, opts, listeners);
       }
     };
   }
 
-  // src/menu.ts
-  var SVG_NS3 = "http://www.w3.org/2000/svg";
-  var GOO_MATRIX = "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10";
-  function applyAttrs3(el, attrs) {
-    for (const [key, value] of Object.entries(attrs)) {
-      el.setAttribute(key, value);
+  // src/menu/index.ts
+  function buildSvgIndicator(svg, isTab, filterId, resolvedBlur, fill, indicatorAttrs) {
+    clearChildren(svg);
+    const effectiveFill = fill ?? "var(--fluix-menu-indicator)";
+    if (isTab) {
+      const indicatorEl2 = document.createElementNS(SVG_NS, "path");
+      applyAttrs(indicatorEl2, indicatorAttrs);
+      indicatorEl2.setAttribute("d", "");
+      indicatorEl2.setAttribute("opacity", "0");
+      indicatorEl2.style.fill = effectiveFill;
+      svg.appendChild(indicatorEl2);
+      return { indicatorEl: indicatorEl2, ghostIndicatorEl: null };
+    }
+    const { g, defs } = createGooeyFilter(filterId, resolvedBlur);
+    svg.appendChild(defs);
+    const ghostIndicatorEl = document.createElementNS(SVG_NS, "rect");
+    zeroRect(ghostIndicatorEl);
+    ghostIndicatorEl.setAttribute("opacity", "0");
+    ghostIndicatorEl.style.fill = effectiveFill;
+    const indicatorEl = document.createElementNS(SVG_NS, "rect");
+    applyAttrs(indicatorEl, indicatorAttrs);
+    zeroRect(indicatorEl);
+    indicatorEl.setAttribute("opacity", "0");
+    indicatorEl.style.fill = effectiveFill;
+    g.appendChild(ghostIndicatorEl);
+    g.appendChild(indicatorEl);
+    svg.appendChild(g);
+    return { indicatorEl, ghostIndicatorEl };
+  }
+  function buildMenuDOM(attrs, filterId, variant, resolvedBlur, fill) {
+    const navEl = document.createElement("nav");
+    applyAttrs(navEl, attrs.root);
+    navEl.setAttribute("aria-label", "Fluix menu");
+    const canvasDiv = document.createElement("div");
+    applyAttrs(canvasDiv, attrs.canvas);
+    const svg = document.createElementNS(SVG_NS, "svg");
+    svg.setAttribute("xmlns", SVG_NS);
+    for (const [k, v] of Object.entries({ width: "1", height: "1", viewBox: "0 0 1 1", "aria-hidden": "true" })) svg.setAttribute(k, v);
+    const { indicatorEl, ghostIndicatorEl } = buildSvgIndicator(svg, variant === "tab", filterId, resolvedBlur, fill, attrs.indicator);
+    canvasDiv.appendChild(svg);
+    navEl.appendChild(canvasDiv);
+    const listDiv = document.createElement("div");
+    applyAttrs(listDiv, attrs.list);
+    navEl.appendChild(listDiv);
+    return { navEl, svg, listDiv, buttonMap: /* @__PURE__ */ new Map(), indicatorEl, ghostIndicatorEl };
+  }
+  function createItemButton(ctx, item) {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    const active = ctx.snapshot.activeId === item.id;
+    applyAttrs(btn, ctx.attrs.item({ id: item.id, active, disabled: item.disabled }));
+    if (item.disabled) btn.disabled = true;
+    btn.textContent = item.label;
+    btn.addEventListener("click", () => {
+      if (item.disabled) return;
+      if (ctx.controlledActiveId === void 0) ctx.machine.setActive(item.id);
+      else ctx.onActiveChange?.(item.id);
+    });
+    ctx.buttonMap.set(item.id, btn);
+    ctx.listDiv.appendChild(btn);
+  }
+  function makeConnection(ctx) {
+    return connectMenu({
+      root: ctx.navEl,
+      indicator: ctx.indicatorEl,
+      ghostIndicator: ctx.ghostIndicatorEl,
+      getActiveId: () => ctx.snapshot.activeId,
+      onSelect(id) {
+        if (ctx.controlledActiveId === void 0) ctx.machine.setActive(id);
+        else ctx.onActiveChange?.(id);
+      },
+      spring: ctx.spring ?? FLUIX_SPRING,
+      variant: ctx.variant,
+      orientation: ctx.orientation
+    });
+  }
+  function measure(ctx) {
+    const rect = ctx.navEl.getBoundingClientRect();
+    const w = Math.ceil(rect.width);
+    const h = Math.ceil(rect.height);
+    if (ctx.size.width !== w || ctx.size.height !== h) {
+      ctx.size = { width: w, height: h };
+      const sw = Math.max(1, w);
+      const sh = Math.max(1, h);
+      ctx.svg.setAttribute("width", String(sw));
+      ctx.svg.setAttribute("height", String(sh));
+      ctx.svg.setAttribute("viewBox", `0 0 ${sw} ${sh}`);
+      ctx.connection?.sync(false);
     }
   }
+  function menuUpdate(ctx, opts) {
+    const prevVariant = ctx.variant;
+    if (opts.orientation !== void 0) ctx.orientation = opts.orientation;
+    if (opts.variant !== void 0) ctx.variant = opts.variant;
+    if (opts.theme !== void 0) ctx.theme = opts.theme;
+    if (opts.activeId !== void 0) ctx.controlledActiveId = opts.activeId;
+    if (opts.onActiveChange !== void 0) ctx.onActiveChange = opts.onActiveChange;
+    if (opts.spring !== void 0) ctx.spring = opts.spring;
+    if (opts.roundness !== void 0) ctx.roundness = opts.roundness;
+    if (opts.blur !== void 0) ctx.blurProp = opts.blur;
+    if (opts.fill !== void 0) ctx.fill = opts.fill;
+    ctx.machine.configure({ orientation: ctx.orientation, variant: ctx.variant, spring: ctx.spring, roundness: ctx.roundness, blur: ctx.blurProp, fill: ctx.fill });
+    if (ctx.controlledActiveId !== void 0) ctx.machine.setActive(ctx.controlledActiveId ?? null);
+    ctx.attrs = getMenuAttrs({ orientation: ctx.orientation, theme: ctx.theme, variant: ctx.variant });
+    applyAttrs(ctx.navEl, ctx.attrs.root);
+    if (prevVariant !== ctx.variant) {
+      const resolvedBlur = ctx.blurProp ?? Math.min(10, Math.max(6, ctx.roundness * 0.45));
+      const refs = buildSvgIndicator(ctx.svg, ctx.variant === "tab", ctx.filterId, resolvedBlur, ctx.fill, ctx.attrs.indicator);
+      ctx.indicatorEl = refs.indicatorEl;
+      ctx.ghostIndicatorEl = refs.ghostIndicatorEl;
+    }
+    if (opts.items !== void 0) {
+      ctx.items = opts.items;
+      clearChildren(ctx.listDiv);
+      ctx.buttonMap.clear();
+      for (const item of ctx.items) createItemButton(ctx, item);
+    }
+    ctx.connection.destroy();
+    ctx.connection = makeConnection(ctx);
+    requestAnimationFrame(() => {
+      measure(ctx);
+      ctx.connection.sync(false);
+    });
+  }
   function createMenu(container, options) {
-    let {
+    const {
       orientation = MENU_DEFAULTS.orientation,
       variant = "pill",
       theme = "dark",
@@ -2486,8 +2592,6 @@ var Fluix = (function (exports) {
       fill,
       items
     } = options;
-    const springConfig = () => spring ?? FLUIX_SPRING;
-    const resolvedBlur = () => blurProp ?? Math.min(10, Math.max(6, roundness * 0.45));
     const machine2 = createMenuMachine({
       orientation,
       variant,
@@ -2497,216 +2601,69 @@ var Fluix = (function (exports) {
       fill,
       initialActiveId: controlledActiveId ?? null
     });
-    let snapshot = machine2.store.getSnapshot();
-    let lastActiveNotified = snapshot.activeId;
     const attrs = getMenuAttrs({ orientation, theme, variant });
     const filterId = `fluix-menu-goo-${Math.random().toString(36).slice(2, 8)}`;
-    const isTab = variant === "tab";
-    const navEl = document.createElement("nav");
-    applyAttrs3(navEl, attrs.root);
-    navEl.setAttribute("aria-label", "Fluix menu");
-    const canvasDiv = document.createElement("div");
-    applyAttrs3(canvasDiv, attrs.canvas);
-    const svg = document.createElementNS(SVG_NS3, "svg");
-    svg.setAttribute("xmlns", SVG_NS3);
-    svg.setAttribute("width", "1");
-    svg.setAttribute("height", "1");
-    svg.setAttribute("viewBox", "0 0 1 1");
-    svg.setAttribute("aria-hidden", "true");
-    let indicatorEl;
-    if (isTab) {
-      indicatorEl = document.createElementNS(SVG_NS3, "path");
-      applyAttrs3(indicatorEl, attrs.indicator);
-      indicatorEl.setAttribute("d", "");
-      indicatorEl.setAttribute("opacity", "0");
-      indicatorEl.setAttribute("fill", fill ?? "var(--fluix-menu-indicator)");
-      svg.appendChild(indicatorEl);
-    } else {
-      const defs = document.createElementNS(SVG_NS3, "defs");
-      const filter = document.createElementNS(SVG_NS3, "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_NS3, "feGaussianBlur");
-      feBlur.setAttribute("in", "SourceGraphic");
-      feBlur.setAttribute("stdDeviation", String(resolvedBlur()));
-      feBlur.setAttribute("result", "blur");
-      const feCM = document.createElementNS(SVG_NS3, "feColorMatrix");
-      feCM.setAttribute("in", "blur");
-      feCM.setAttribute("type", "matrix");
-      feCM.setAttribute("values", GOO_MATRIX);
-      feCM.setAttribute("result", "goo");
-      const feComp = document.createElementNS(SVG_NS3, "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 gGroup = document.createElementNS(SVG_NS3, "g");
-      gGroup.setAttribute("filter", `url(#${filterId})`);
-      indicatorEl = document.createElementNS(SVG_NS3, "rect");
-      applyAttrs3(indicatorEl, attrs.indicator);
-      indicatorEl.setAttribute("x", "0");
-      indicatorEl.setAttribute("y", "0");
-      indicatorEl.setAttribute("width", "0");
-      indicatorEl.setAttribute("height", "0");
-      indicatorEl.setAttribute("rx", "0");
-      indicatorEl.setAttribute("ry", "0");
-      indicatorEl.setAttribute("opacity", "0");
-      indicatorEl.setAttribute("fill", fill ?? "var(--fluix-menu-indicator)");
-      gGroup.appendChild(indicatorEl);
-      svg.appendChild(gGroup);
-    }
-    canvasDiv.appendChild(svg);
-    navEl.appendChild(canvasDiv);
-    const listDiv = document.createElement("div");
-    applyAttrs3(listDiv, attrs.list);
-    const buttonMap = /* @__PURE__ */ new Map();
-    function createItemButton(item) {
-      const btn = document.createElement("button");
-      btn.type = "button";
-      const active = snapshot.activeId === item.id;
-      const itemAttrs = attrs.item({ id: item.id, active, disabled: item.disabled });
-      applyAttrs3(btn, itemAttrs);
-      if (item.disabled) btn.disabled = true;
-      btn.textContent = item.label;
-      btn.addEventListener("click", () => {
-        if (item.disabled) return;
-        if (controlledActiveId === void 0) {
-          machine2.setActive(item.id);
-        } else {
-          onActiveChange?.(item.id);
-        }
-      });
-      buttonMap.set(item.id, btn);
-      listDiv.appendChild(btn);
-    }
-    for (const item of items) {
-      createItemButton(item);
-    }
-    navEl.appendChild(listDiv);
-    container.appendChild(navEl);
-    let size = { width: 0, height: 0 };
-    let measureRaf = 0;
-    const measure = () => {
-      const rect = navEl.getBoundingClientRect();
-      const w = Math.ceil(rect.width);
-      const h = Math.ceil(rect.height);
-      if (size.width !== w || size.height !== h) {
-        size = { width: w, height: h };
-        updateSvgSize();
-        connection?.sync(false);
-      }
+    const resolvedBlur = blurProp ?? Math.min(10, Math.max(6, roundness * 0.45));
+    const dom = buildMenuDOM(attrs, filterId, variant, resolvedBlur, fill);
+    const ctx = {
+      orientation,
+      variant,
+      theme,
+      controlledActiveId,
+      onActiveChange,
+      spring,
+      roundness,
+      blurProp,
+      fill,
+      items,
+      attrs,
+      filterId,
+      machine: machine2,
+      snapshot: machine2.store.getSnapshot(),
+      lastActiveNotified: machine2.store.getSnapshot().activeId,
+      ...dom,
+      connection: null,
+      size: { width: 0, height: 0 },
+      measureRaf: 0
     };
+    for (const item of items) createItemButton(ctx, item);
+    container.appendChild(ctx.navEl);
     const resizeObs = new ResizeObserver(() => {
-      cancelAnimationFrame(measureRaf);
-      measureRaf = requestAnimationFrame(measure);
-    });
-    resizeObs.observe(navEl);
-    function updateSvgSize() {
-      const w = Math.max(1, size.width);
-      const h = Math.max(1, size.height);
-      svg.setAttribute("width", String(w));
-      svg.setAttribute("height", String(h));
-      svg.setAttribute("viewBox", `0 0 ${w} ${h}`);
-    }
-    let connection = connectMenu({
-      root: navEl,
-      indicator: indicatorEl,
-      getActiveId: () => snapshot.activeId,
-      onSelect(id) {
-        if (controlledActiveId === void 0) {
-          machine2.setActive(id);
-        } else {
-          onActiveChange?.(id);
-        }
-      },
-      spring: springConfig(),
-      variant,
-      orientation
+      cancelAnimationFrame(ctx.measureRaf);
+      ctx.measureRaf = requestAnimationFrame(() => measure(ctx));
     });
+    resizeObs.observe(ctx.navEl);
+    ctx.connection = makeConnection(ctx);
     requestAnimationFrame(() => {
-      measure();
-      connection.sync(false);
+      measure(ctx);
+      ctx.connection.sync(false);
     });
     const unsubscribe = machine2.store.subscribe(() => {
-      const next = machine2.store.getSnapshot();
-      snapshot = next;
-      for (const item of items) {
-        const btn = buttonMap.get(item.id);
-        if (btn) {
-          const active = next.activeId === item.id;
-          const itemAttrs = attrs.item({ id: item.id, active, disabled: item.disabled });
-          applyAttrs3(btn, itemAttrs);
-        }
+      ctx.snapshot = machine2.store.getSnapshot();
+      for (const item of ctx.items) {
+        const btn = ctx.buttonMap.get(item.id);
+        if (btn) applyAttrs(btn, ctx.attrs.item({ id: item.id, active: ctx.snapshot.activeId === item.id, disabled: item.disabled }));
       }
-      if (next.activeId && lastActiveNotified !== next.activeId && onActiveChange) {
-        onActiveChange(next.activeId);
+      if (ctx.snapshot.activeId && ctx.lastActiveNotified !== ctx.snapshot.activeId && ctx.onActiveChange) {
+        ctx.onActiveChange(ctx.snapshot.activeId);
       }
-      lastActiveNotified = next.activeId;
-      connection.sync(false);
+      ctx.lastActiveNotified = ctx.snapshot.activeId;
+      ctx.connection.sync(false);
     });
     return {
       setActive(id) {
         machine2.setActive(id);
       },
       update(opts) {
-        if (opts.orientation !== void 0) orientation = opts.orientation;
-        if (opts.variant !== void 0) variant = opts.variant;
-        if (opts.theme !== void 0) theme = opts.theme;
-        if (opts.activeId !== void 0) controlledActiveId = opts.activeId;
-        if (opts.onActiveChange !== void 0) onActiveChange = opts.onActiveChange;
-        if (opts.spring !== void 0) spring = opts.spring;
-        if (opts.roundness !== void 0) roundness = opts.roundness;
-        if (opts.blur !== void 0) blurProp = opts.blur;
-        if (opts.fill !== void 0) fill = opts.fill;
-        machine2.configure({ orientation, variant, spring, roundness, blur: blurProp, fill });
-        if (controlledActiveId !== void 0) {
-          machine2.setActive(controlledActiveId ?? null);
-        }
-        const newAttrs = getMenuAttrs({ orientation, theme, variant });
-        applyAttrs3(navEl, newAttrs.root);
-        if (opts.items !== void 0) {
-          items = opts.items;
-          listDiv.innerHTML = "";
-          buttonMap.clear();
-          for (const item of items) {
-            createItemButton(item);
-          }
-        }
-        connection.destroy();
-        connection = connectMenu({
-          root: navEl,
-          indicator: indicatorEl,
-          getActiveId: () => snapshot.activeId,
-          onSelect(id) {
-            if (controlledActiveId === void 0) {
-              machine2.setActive(id);
-            } else {
-              onActiveChange?.(id);
-            }
-          },
-          spring: springConfig(),
-          variant,
-          orientation
-        });
-        requestAnimationFrame(() => {
-          measure();
-          connection.sync(false);
-        });
+        menuUpdate(ctx, opts);
       },
       destroy() {
         unsubscribe();
-        cancelAnimationFrame(measureRaf);
+        cancelAnimationFrame(ctx.measureRaf);
         resizeObs.disconnect();
-        connection.destroy();
-        navEl.remove();
+        ctx.connection.destroy();
+        machine2.destroy();
+        ctx.navEl.remove();
       }
     };
   }