@fluix-ui/vanilla 0.0.7 → 0.0.9

package/dist/index.js

@@ -1,125 +1,101 @@
-import { Toaster, NOTCH_DEFAULTS, createNotchMachine, getNotchAttrs, MENU_DEFAULTS, createMenuMachine, getMenuAttrs, connectMenu, FLUIX_SPRING, animateSpring, TOAST_DEFAULTS } from '@fluix-ui/core';
+import { Toaster, createNotchMachine, NOTCH_DEFAULTS, MENU_DEFAULTS, createMenuMachine, getMenuAttrs, getNotchAttrs, connectMenu, FLUIX_SPRING, TOAST_DEFAULTS, animateSpring } from '@fluix-ui/core';
 export { fluix } from '@fluix-ui/core';
 
 // src/index.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;
 }
@@ -139,77 +115,25 @@ function renderIconInto(container, icon, state) {
   const svgIcon = createSvgIcon(state);
   if (svgIcon) container.appendChild(svgIcon);
 }
-function getPillAlign(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;
-}
+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 = getPillAlign(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;
@@ -217,7 +141,7 @@ function computeLayout(item, inst) {
     ready,
     isExpanded,
     roundness,
-    blur,
+    blur: blur2,
     hasDesc,
     isLoading,
     open,
@@ -232,76 +156,288 @@ function computeLayout(item, inst) {
     svgHeight
   };
 }
-function createInstance(item, machine) {
-  const localState = { ready: false, expanded: false };
-  const roundness = item.roundness ?? TOAST_DEFAULTS.roundness;
-  const blur = Math.min(10, Math.max(6, roundness * 0.45));
+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);
+  const { open, expanded, resolvedPillWidth, pillX, edge, expandedContent, svgHeight } = layout;
+  const vars = {
+    "--_h": `${open ? expanded : HEIGHT}px`,
+    "--_pw": `${resolvedPillWidth}px`,
+    "--_px": `${pillX}px`,
+    "--_ht": `translateY(${open ? edge === "bottom" ? 3 : -3 : 0}px) scale(${open ? 0.9 : 1})`,
+    "--_co": `${open ? 1 : 0}`,
+    "--_cy": `${open ? 0 : -14}px`,
+    "--_cm": `${open ? expandedContent : 0}px`,
+    "--_by": `${open ? HEIGHT - BODY_MERGE_OVERLAP : HEIGHT}px`,
+    "--_bh": `${open ? expandedContent : 0}px`,
+    "--_bo": `${open ? 1 : 0}`
+  };
+  for (const [key, value] of Object.entries(vars)) inst.el.style.setProperty(key, value);
+  inst.svgEl.setAttribute("height", String(svgHeight));
+  inst.svgEl.setAttribute("viewBox", `0 0 ${WIDTH} ${svgHeight}`);
+}
+function animatePill(inst, item) {
+  const { 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;
+  inst.pillAnim?.cancel();
+  if (!inst.localState.ready || inst.pillFirst) {
+    inst.pillFirst = false;
+    inst.pillEl.setAttribute("x", String(next.x));
+    inst.pillEl.setAttribute("width", String(next.width));
+    inst.pillEl.setAttribute("height", String(next.height));
+    inst.prevPill = next;
+    return;
+  }
+  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, machine) {
+  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;
+        machine.dismiss(item.id);
+      }, 1200);
+      return;
+    }
+    inst.pendingDismiss = false;
+    inst.dismissRequested = true;
+    machine.dismiss(item.id);
+  }, duration);
+}
+function setupAutopilot(inst, item, machine) {
+  if (item.autoExpandDelayMs != null && item.autoExpandDelayMs > 0) {
+    setTimer(inst, () => {
+      if (!inst.hovering) {
+        inst.localState.expanded = true;
+        applyUpdate(inst, inst.item);
+      }
+    }, item.autoExpandDelayMs);
+  }
+  if (item.autoCollapseDelayMs != null && item.autoCollapseDelayMs > 0) {
+    setTimer(inst, () => {
+      if (!inst.hovering) {
+        inst.localState.expanded = false;
+        applyUpdate(inst, inst.item);
+      }
+    }, item.autoCollapseDelayMs);
+  }
+}
+function updateDescription(inst, item, attrs) {
+  const hasDesc = Boolean(item.description) || Boolean(item.button);
+  if (hasDesc && !inst.contentEl) {
+    const contentEl = document.createElement("div");
+    const descriptionEl = document.createElement("div");
+    contentEl.appendChild(descriptionEl);
+    inst.el.appendChild(contentEl);
+    inst.contentEl = contentEl;
+    inst.descriptionEl = 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);
+  }
+  if (inst.contentEl) applyAttrs(inst.contentEl, attrs.content);
+  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}`;
+  if (newHeaderKey !== inst.headerKey) {
+    crossfadeHeader(inst, item, attrs);
+    inst.headerKey = newHeaderKey;
+  }
+  applyVars(inst, item);
+  animatePill(inst, item);
+}
+function crossfadeHeader(inst, item, attrs) {
+  const oldInner = inst.innerEl;
+  oldInner.setAttribute("data-layer", "prev");
+  oldInner.setAttribute("data-exiting", "true");
+  const newInner = document.createElement("div");
+  newInner.setAttribute("data-fluix-header-inner", "");
+  newInner.setAttribute("data-layer", "current");
+  const badgeEl = document.createElement("div");
+  applyAttrs(badgeEl, attrs.badge);
+  if (item.styles?.badge) badgeEl.className = item.styles.badge;
+  renderIconInto(badgeEl, item.icon, item.state);
+  const titleEl = document.createElement("span");
+  applyAttrs(titleEl, attrs.title);
+  if (item.styles?.title) titleEl.className = item.styles.title;
+  titleEl.textContent = item.title ?? item.state;
+  newInner.appendChild(badgeEl);
+  newInner.appendChild(titleEl);
+  inst.headerStackEl.insertBefore(newInner, oldInner);
+  inst.innerEl = newInner;
+  inst.pillRo.unobserve(oldInner);
+  inst.pillRo.observe(newInner);
+  setTimer(inst, () => {
+    oldInner.remove();
+  }, HEADER_EXIT_MS);
+  requestAnimationFrame(() => {
+    measurePillWidth(inst);
+    applyVars(inst, inst.item);
+    animatePill(inst, inst.item);
+  });
+}
+function destroyInstance(inst) {
+  for (const t of inst.timers) clearTimeout(t);
+  inst.timers.clear();
+  inst.pillAnim?.cancel();
+  inst.pillRo.disconnect();
+  inst.contentRo?.disconnect();
+  inst.connectHandle.destroy();
+  inst.el.remove();
+}
+
+// src/toast/instance.ts
+var WIDTH = 350;
+var HEIGHT = 40;
+var MIN_EXPAND_RATIO2 = 2.25;
+function getPillAlign(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 el = document.createElement("button");
-  el.type = "button";
-  const canvasDiv = document.createElement("div");
-  const minExpanded = HEIGHT * MIN_EXPAND_RATIO;
-  const initialSvgHeight = hasDesc ? minExpanded : HEIGHT;
+  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 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);
+  const { g, defs } = createGooeyFilter(filterId, blur2);
   svg.appendChild(defs);
-  const g = document.createElementNS(SVG_NS, "g");
-  g.setAttribute("filter", `url(#${filterId})`);
   const initialPillX = getPillAlign(item.position) === "right" ? WIDTH - HEIGHT : getPillAlign(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", "");
-  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)");
+  for (const [k, v] of Object.entries({ x: initialPillX, y: 0, width: HEIGHT, height: HEIGHT, rx: roundness, ry: roundness })) {
+    pillEl.setAttribute(k, String(v));
+  }
+  pillEl.setAttribute("fill", fill);
   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)");
+  for (const [k, v] of Object.entries({ x: 0, y: HEIGHT, width: WIDTH, height: 0, rx: roundness, ry: roundness })) {
+    bodyEl.setAttribute(k, String(v));
+  }
+  bodyEl.setAttribute("fill", fill);
   bodyEl.setAttribute("opacity", "0");
   g.appendChild(pillEl);
   g.appendChild(bodyEl);
   svg.appendChild(g);
-  canvasDiv.appendChild(svg);
-  el.appendChild(canvasDiv);
+  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", "");
@@ -316,40 +452,24 @@ function createInstance(item, machine) {
   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);
-  }
+  return { headerEl, headerStackEl, innerEl, badgeEl, titleEl };
+}
+function createInstance(item, machine) {
+  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(el, attrs.root);
+  applyAttrs(el2, attrs.root);
   applyAttrs(canvasDiv, attrs.canvas);
   applyAttrs(headerEl, attrs.header);
   applyAttrs(badgeEl, attrs.badge);
@@ -362,9 +482,8 @@ function createInstance(item, machine) {
     const btnEl = descriptionEl.querySelector("button");
     if (btnEl) applyAttrs(btnEl, attrs.button);
   }
-  const headerKey = `${item.state}-${item.title ?? item.state}`;
   const inst = {
-    el,
+    el: el2,
     pillEl,
     bodyEl,
     svgEl: svg,
@@ -376,7 +495,7 @@ function createInstance(item, machine) {
     localState,
     pillWidth: 0,
     contentHeight: 0,
-    frozenExpanded: HEIGHT * MIN_EXPAND_RATIO,
+    frozenExpanded: HEIGHT * MIN_EXPAND_RATIO2,
     hovering: false,
     pendingDismiss: false,
     dismissRequested: false,
@@ -385,865 +504,735 @@ function createInstance(item, machine) {
     pillAnim: null,
     prevPill: { x: initialPillX, width: HEIGHT, height: HEIGHT },
     pillFirst: true,
-    headerKey,
+    headerKey: `${item.state}-${item.title ?? item.state}`,
     headerPad: null,
     connectHandle: null,
     timers: /* @__PURE__ */ new Set(),
     item
   };
+  wireObservers(inst);
+  wireConnect(inst, item, machine);
+  applyVars(inst, item);
+  setTimer(inst, () => {
+    inst.localState.ready = true;
+    applyUpdate(inst, inst.item);
+    setupAutopilot(inst, inst.item);
+  }, 32);
+  setupAutoDismiss(inst, item, machine);
+  measurePillWidth(inst);
+  return inst;
+}
+function wireObservers(inst, _item) {
   inst.pillRo = new ResizeObserver(() => {
     requestAnimationFrame(() => {
       measurePillWidth(inst);
       applyVars(inst, inst.item);
-      animatePill(inst, inst.item);
     });
   });
-  inst.pillRo.observe(innerEl);
-  if (descriptionEl) {
+  inst.pillRo.observe(inst.innerEl);
+  if (inst.descriptionEl) {
+    const descEl = inst.descriptionEl;
     inst.contentRo = new ResizeObserver(() => {
       requestAnimationFrame(() => {
-        const h = descriptionEl.scrollHeight;
+        const h = descEl.scrollHeight;
         if (h !== inst.contentHeight) {
           inst.contentHeight = h;
           applyVars(inst, inst.item);
         }
       });
     });
-    inst.contentRo.observe(descriptionEl);
+    inst.contentRo.observe(descEl);
   }
-  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;
-        machine.dismiss(item.id);
-      },
-      onHoverStart: () => {
-        inst.hovering = true;
-      },
-      onHoverEnd: () => {
-        inst.hovering = false;
-        if (inst.pendingDismiss) {
-          inst.pendingDismiss = false;
-          if (inst.dismissRequested) return;
-          inst.dismissRequested = true;
-          machine.dismiss(inst.item.id);
-        }
-      }
-    },
-    item
-  );
-  applyVars(inst, item);
-  setTimer(
-    inst,
-    () => {
-      inst.localState.ready = true;
+}
+function wireConnect(inst, item, machine) {
+  inst.connectHandle = Toaster.connect(inst.el, {
+    onExpand: () => {
+      if (inst.item.exiting || inst.dismissRequested) return;
+      inst.localState.expanded = true;
       applyUpdate(inst, inst.item);
-      setupAutopilot(inst, inst.item);
     },
-    32
-  );
-  setupAutoDismiss(inst, item, machine);
-  measurePillWidth(inst);
-  return inst;
-}
-function measurePillWidth(inst) {
-  if (!inst.el.isConnected) return;
-  if (inst.headerPad === null) {
-    const cs = getComputedStyle(inst.headerEl);
-    inst.headerPad = Number.parseFloat(cs.paddingLeft) + Number.parseFloat(cs.paddingRight);
-  }
-  const intrinsicWidth = inst.innerEl.getBoundingClientRect().width;
-  const w = intrinsicWidth + inst.headerPad + PILL_PADDING;
-  if (w > PILL_PADDING && w !== inst.pillWidth) {
-    inst.pillWidth = w;
-  }
-}
-function applyVars(inst, item) {
-  const layout = computeLayout(item, inst);
-  const { open, expanded, resolvedPillWidth, pillX, edge, expandedContent, svgHeight } = layout;
-  const vars = {
-    "--_h": `${open ? expanded : HEIGHT}px`,
-    "--_pw": `${resolvedPillWidth}px`,
-    "--_px": `${pillX}px`,
-    "--_ht": `translateY(${open ? edge === "bottom" ? 3 : -3 : 0}px) scale(${open ? 0.9 : 1})`,
-    "--_co": `${open ? 1 : 0}`,
-    "--_cy": `${open ? 0 : -14}px`,
-    "--_cm": `${open ? expandedContent : 0}px`,
-    "--_by": `${open ? HEIGHT - BODY_MERGE_OVERLAP : HEIGHT}px`,
-    "--_bh": `${open ? expandedContent : 0}px`,
-    "--_bo": `${open ? 1 : 0}`
-  };
-  for (const [key, value] of Object.entries(vars)) {
-    inst.el.style.setProperty(key, value);
-  }
-  inst.svgEl.setAttribute("height", String(svgHeight));
-  inst.svgEl.setAttribute("viewBox", `0 0 ${WIDTH} ${svgHeight}`);
-}
-function animatePill(inst, item) {
-  const layout = computeLayout(item, inst);
-  const { open, resolvedPillWidth, pillX, pillHeight } = layout;
-  const prev = inst.prevPill;
-  const next = { x: pillX, width: resolvedPillWidth, height: open ? pillHeight : HEIGHT };
-  if (prev.x === next.x && prev.width === next.width && prev.height === next.height) return;
-  inst.pillAnim?.cancel();
-  if (!inst.localState.ready || inst.pillFirst) {
-    inst.pillFirst = false;
-    inst.pillEl.setAttribute("x", String(next.x));
-    inst.pillEl.setAttribute("width", String(next.width));
-    inst.pillEl.setAttribute("height", String(next.height));
-    inst.prevPill = next;
-    return;
-  }
-  const anim = animateSpring(
-    inst.pillEl,
-    {
-      x: { from: prev.x, to: next.x, unit: "px" },
-      width: { from: prev.width, to: next.width, unit: "px" },
-      height: { from: prev.height, to: next.height, unit: "px" }
+    onCollapse: () => {
+      if (inst.item.exiting || inst.dismissRequested) return;
+      if (inst.item.autopilot !== false) return;
+      inst.localState.expanded = false;
+      applyUpdate(inst, inst.item);
     },
-    FLUIX_SPRING
-  );
-  inst.pillAnim = anim;
-  inst.prevPill = next;
-}
-function setupAutoDismiss(inst, item, machine) {
-  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;
-            machine.dismiss(item.id);
-          },
-          1200
-        );
-        return;
-      }
-      inst.pendingDismiss = false;
+    onDismiss: () => {
+      if (inst.dismissRequested) return;
       inst.dismissRequested = true;
       machine.dismiss(item.id);
     },
-    duration
-  );
-}
-function setupAutopilot(inst, item, machine) {
-  if (item.autoExpandDelayMs != null && item.autoExpandDelayMs > 0) {
-    setTimer(
-      inst,
-      () => {
-        if (!inst.hovering) {
-          inst.localState.expanded = true;
-          applyUpdate(inst, inst.item);
-        }
-      },
-      item.autoExpandDelayMs
-    );
-  }
-  if (item.autoCollapseDelayMs != null && item.autoCollapseDelayMs > 0) {
-    setTimer(
-      inst,
-      () => {
-        if (!inst.hovering) {
-          inst.localState.expanded = false;
-          applyUpdate(inst, inst.item);
-        }
-      },
-      item.autoCollapseDelayMs
-    );
-  }
-}
-function applyUpdate(inst, item, _machine) {
-  inst.item = item;
-  const attrs = Toaster.getAttrs(item, inst.localState);
-  applyAttrs(inst.el, attrs.root);
-  const canvasEl = inst.el.querySelector("[data-fluix-canvas]");
-  if (canvasEl) applyAttrs(canvasEl, attrs.canvas);
-  applyAttrs(inst.headerEl, attrs.header);
-  const badgeEl = inst.innerEl.querySelector("[data-fluix-badge]");
-  if (badgeEl) {
-    applyAttrs(badgeEl, attrs.badge);
-    if (item.styles?.badge) badgeEl.className = item.styles.badge;
-  }
-  const titleEl = inst.innerEl.querySelector("[data-fluix-title]");
-  if (titleEl) {
-    applyAttrs(titleEl, attrs.title);
-    if (item.styles?.title) titleEl.className = item.styles.title;
-  }
-  const hasDesc = Boolean(item.description) || Boolean(item.button);
-  if (hasDesc && !inst.contentEl) {
-    const contentEl = document.createElement("div");
-    const descriptionEl = document.createElement("div");
-    contentEl.appendChild(descriptionEl);
-    inst.el.appendChild(contentEl);
-    inst.contentEl = contentEl;
-    inst.descriptionEl = 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);
-  }
-  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";
+    onHoverStart: () => {
+      inst.hovering = true;
+    },
+    onHoverEnd: () => {
+      inst.hovering = false;
+      if (inst.pendingDismiss) {
+        inst.pendingDismiss = false;
+        if (inst.dismissRequested) return;
+        inst.dismissRequested = true;
+        machine.dismiss(inst.item.id);
       }
-      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);
     }
+  }, 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);
   }
-  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}`;
-  if (newHeaderKey !== inst.headerKey) {
-    crossfadeHeader(inst, item, attrs);
-    inst.headerKey = newHeaderKey;
+  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;
   }
-  applyVars(inst, item);
-  animatePill(inst, item);
-}
-function crossfadeHeader(inst, item, attrs) {
-  const oldInner = inst.innerEl;
-  oldInner.setAttribute("data-layer", "prev");
-  oldInner.setAttribute("data-exiting", "true");
-  const newInner = document.createElement("div");
-  newInner.setAttribute("data-fluix-header-inner", "");
-  newInner.setAttribute("data-layer", "current");
-  const badgeEl = document.createElement("div");
-  applyAttrs(badgeEl, attrs.badge);
-  if (item.styles?.badge) badgeEl.className = item.styles.badge;
-  renderIconInto(badgeEl, item.icon, item.state);
-  const titleEl = document.createElement("span");
-  applyAttrs(titleEl, attrs.title);
-  if (item.styles?.title) titleEl.className = item.styles.title;
-  titleEl.textContent = item.title ?? item.state;
-  newInner.appendChild(badgeEl);
-  newInner.appendChild(titleEl);
-  inst.headerStackEl.insertBefore(newInner, oldInner);
-  inst.innerEl = newInner;
-  inst.pillRo.unobserve(oldInner);
-  inst.pillRo.observe(newInner);
-  setTimer(
-    inst,
-    () => {
-      oldInner.remove();
-    },
-    HEADER_EXIT_MS
-  );
-  requestAnimationFrame(() => {
-    measurePillWidth(inst);
-    applyVars(inst, inst.item);
-    animatePill(inst, inst.item);
-  });
 }
-function destroyInstance(inst) {
-  for (const t of inst.timers) clearTimeout(t);
-  inst.timers.clear();
-  inst.pillAnim?.cancel();
-  inst.pillRo.disconnect();
-  inst.contentRo?.disconnect();
-  inst.connectHandle.destroy();
-  inst.el.remove();
+function 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 createToaster(config) {
-  const machine = Toaster.getMachine();
-  let currentConfig = config;
-  if (currentConfig) machine.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);
+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);
     }
-    return vp;
   }
-  function removeViewport(position) {
-    const vp = viewports.get(position);
-    if (vp) {
-      vp.remove();
-      viewports.delete(position);
+  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);
     }
   }
-  function sync() {
-    const next = machine.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, machine);
-        instances.set(item.id, inst);
-        vp.appendChild(inst.el);
-      } else if (existing.item.instanceId !== item.instanceId) {
-        destroyInstance(existing);
-        const inst = createInstance(item, machine);
-        instances.set(item.id, inst);
-        vp.appendChild(inst.el);
-      } else {
-        applyUpdate(existing, item);
-        if (existing.el.parentElement !== vp) {
-          vp.appendChild(existing.el);
-        }
-      }
-    }
-    for (const [position, vp] of viewports) {
-      const vpAttrs = Toaster.getViewportAttrs(position, resolvedLayout);
-      applyAttrs(vp, vpAttrs);
-      applyViewportOffset(vp, resolvedOffset, position);
-    }
-    for (const [position] of viewports) {
-      if (!activePositions.has(position)) {
-        removeViewport(position);
-      }
+  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 = machine.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;
-      machine.configure(newConfig);
+      state.currentConfig = newConfig;
+      state.machine.configure(newConfig);
     }
   };
 }
-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);
+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 machine = createNotchMachine({
-    position,
-    trigger,
-    roundness,
-    fill,
-    spring
-  });
-  let snapshot = machine.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 machine = 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: machine.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: machine.store.getSnapshot(),
+    prevOpenVal: void 0,
+    contentSize: { w: 200, h: 44 },
+    currentAnim: null,
+    measureRaf: 0,
+    machine,
+    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) machine.open();
-    else onOpenChange?.(true);
-  }
-  function handleClose() {
-    if (controlledOpen === void 0) machine.close();
-    else onOpenChange?.(false);
-  }
-  function handleToggle() {
-    if (controlledOpen === void 0) machine.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 = machine.store.subscribe(() => {
-    const next = machine.store.getSnapshot();
-    snapshot = next;
-    if (controlledOpen !== void 0) {
-      if (controlledOpen && !next.open) machine.open();
-      else if (!controlledOpen && next.open) machine.close();
-    }
-    if (prevOpenVal !== void 0 && prevOpenVal !== next.open) {
-      onOpenChange?.(next.open);
+    ctx.snapshot = machine.store.getSnapshot();
+    if (ctx.controlledOpen !== void 0) {
+      if (ctx.controlledOpen && !ctx.snapshot.open) machine.open();
+      else if (!ctx.controlledOpen && ctx.snapshot.open) machine.close();
     }
-    prevOpenVal = next.open;
-    updateLayout();
+    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 ? machine.open() : ctx.onOpenChange?.(true);
     },
     close() {
-      handleClose();
+      ctx.controlledOpen === void 0 ? machine.close() : ctx.onOpenChange?.(false);
     },
     toggle() {
-      handleToggle();
+      ctx.controlledOpen === void 0 ? machine.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);
+      ctx.currentAnim?.cancel();
+      ctx.highlight.cancelAnim();
+      detachListeners(ctx.dom.rootEl, listeners);
       machine.destroy();
-      measureEl.remove();
-      rootEl.remove();
+      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`;
-      machine.configure({ position, trigger, roundness, fill, spring });
-      if (controlledOpen !== void 0) {
-        if (controlledOpen && !snapshot.open) machine.open();
-        else if (!controlledOpen && snapshot.open) machine.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);
     }
   };
 }
-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);
+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",
@@ -1255,8 +1244,6 @@ function createMenu(container, options) {
     fill,
     items
   } = options;
-  const springConfig = () => spring ?? FLUIX_SPRING;
-  const resolvedBlur = () => blurProp ?? Math.min(10, Math.max(6, roundness * 0.45));
   const machine = createMenuMachine({
     orientation,
     variant,
@@ -1266,217 +1253,69 @@ function createMenu(container, options) {
     fill,
     initialActiveId: controlledActiveId ?? null
   });
-  let snapshot = machine.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) {
-        machine.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,
+    snapshot: machine.store.getSnapshot(),
+    lastActiveNotified: machine.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) {
-        machine.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 = machine.store.subscribe(() => {
-    const next = machine.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 = machine.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) {
       machine.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;
-      machine.configure({ orientation, variant, spring, roundness, blur: blurProp, fill });
-      if (controlledActiveId !== void 0) {
-        machine.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) {
-            machine.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();
+      ctx.connection.destroy();
       machine.destroy();
-      navEl.remove();
+      ctx.navEl.remove();
     }
   };
 }