@fluix-ui/vanilla 0.0.5 → 0.0.7

package/dist/index.global.js

@@ -458,6 +458,776 @@ var Fluix = (function (exports) {
     getViewportAttrs,
     connect: connectToast
   };
+  var NOTCH_DEFAULTS = {
+    roundness: 20,
+    pillHeight: 40,
+    pillMinWidth: 40
+  };
+  function createNotchMachine(initialConfig) {
+    const store = createStore({
+      open: false,
+      config: { ...initialConfig },
+      contentSize: { w: 0, h: 0 },
+      baseSize: { w: NOTCH_DEFAULTS.pillMinWidth, h: NOTCH_DEFAULTS.pillHeight }
+    });
+    function open() {
+      store.update((prev) => prev.open ? prev : { ...prev, open: true });
+    }
+    function close() {
+      store.update((prev) => prev.open ? { ...prev, open: false } : prev);
+    }
+    function toggle() {
+      store.update((prev) => ({ ...prev, open: !prev.open }));
+    }
+    function setContentSize(size) {
+      store.update((prev) => {
+        if (prev.contentSize.w === size.w && prev.contentSize.h === size.h) return prev;
+        return { ...prev, contentSize: size };
+      });
+    }
+    function setBaseSize(size) {
+      store.update((prev) => {
+        if (prev.baseSize.w === size.w && prev.baseSize.h === size.h) return prev;
+        return { ...prev, baseSize: size };
+      });
+    }
+    function configure(config) {
+      store.update((prev) => ({ ...prev, config: { ...prev.config, ...config } }));
+    }
+    function destroy() {
+    }
+    return { store, open, close, toggle, setContentSize, setBaseSize, configure, destroy };
+  }
+  function getNotchAttrs(context) {
+    const root = {
+      "data-fluix-notch": "",
+      "data-open": String(context.open),
+      "data-position": context.position
+    };
+    if (context.theme) {
+      root["data-theme"] = context.theme;
+    }
+    return {
+      root,
+      canvas: {
+        "data-fluix-notch-canvas": ""
+      },
+      pill: {
+        "data-fluix-notch-pill": ""
+      },
+      content: {
+        "data-fluix-notch-content": "",
+        "data-open": String(context.open)
+      }
+    };
+  }
+  var MENU_DEFAULTS = {
+    orientation: "vertical",
+    roundness: 16
+  };
+  function createMenuMachine(initialConfig) {
+    const store = createStore({
+      activeId: initialConfig?.initialActiveId ?? null,
+      config: { ...initialConfig }
+    });
+    function setActive(id) {
+      store.update((prev) => {
+        if (prev.activeId === id) return prev;
+        return { ...prev, activeId: id };
+      });
+    }
+    function configure(config) {
+      store.update((prev) => ({ ...prev, config: { ...prev.config, ...config } }));
+    }
+    function destroy() {
+    }
+    return { store, setActive, configure, destroy };
+  }
+  function getMenuAttrs(context) {
+    const root = {
+      "data-fluix-menu": "",
+      "data-orientation": context.orientation
+    };
+    if (context.theme) {
+      root["data-theme"] = context.theme;
+    }
+    if (context.variant) {
+      root["data-variant"] = context.variant;
+    }
+    return {
+      root,
+      list: {
+        "data-fluix-menu-list": ""
+      },
+      canvas: {
+        "data-fluix-menu-canvas": ""
+      },
+      indicator: {
+        "data-fluix-menu-indicator": ""
+      },
+      item(itemContext) {
+        const item = {
+          "data-fluix-menu-item": "",
+          "data-menu-id": itemContext.id,
+          "data-state": itemContext.active ? "active" : "inactive"
+        };
+        if (itemContext.disabled) {
+          item["data-disabled"] = "true";
+        }
+        return item;
+      }
+    };
+  }
+  var ITEM_SELECTOR = "[data-fluix-menu-item]";
+  var TAB_CURVE_RADIUS = 14;
+  function readItemFrame(root, activeId, padding, variant, orientation) {
+    const activeItem = root.querySelector(
+      `${ITEM_SELECTOR}[data-menu-id="${CSS.escape(activeId)}"]`
+    );
+    if (!activeItem) return null;
+    const rootRect = root.getBoundingClientRect();
+    const itemRect = activeItem.getBoundingClientRect();
+    const width = Math.max(0, itemRect.width + padding * 2);
+    const height = Math.max(0, itemRect.height + padding * 2);
+    const x = itemRect.left - rootRect.left - padding;
+    const y = itemRect.top - rootRect.top - padding;
+    if (variant === "tab") {
+      if (orientation === "horizontal") {
+        const extendedHeight = rootRect.height - y + 1;
+        return {
+          x,
+          y,
+          width,
+          height: extendedHeight,
+          radius: height / 2,
+          // use original item height for top pill arc
+          visible: width > 0 && height > 0
+        };
+      }
+      const extendedWidth = rootRect.width - x;
+      return {
+        x,
+        y,
+        width: extendedWidth,
+        height,
+        radius: height / 2,
+        visible: width > 0 && height > 0
+      };
+    }
+    return {
+      x,
+      y,
+      width,
+      height,
+      radius: height / 2,
+      visible: width > 0 && height > 0
+    };
+  }
+  function generateTabPath(frame, cr) {
+    const { x, y, width, height } = frame;
+    const r = Math.min(frame.radius, height / 2, width / 2);
+    const rw = x + width;
+    const concaveR = Math.min(cr, height / 2, Math.max(0, width / 2 - r));
+    return [
+      `M ${x + r} ${y}`,
+      `L ${rw - concaveR} ${y}`,
+      `Q ${rw} ${y} ${rw} ${y - concaveR}`,
+      `L ${rw} ${y + height + concaveR}`,
+      `Q ${rw} ${y + height} ${rw - concaveR} ${y + height}`,
+      `L ${x + r} ${y + height}`,
+      `A ${r} ${r} 0 0 1 ${x} ${y + height - r}`,
+      `L ${x} ${y + r}`,
+      `A ${r} ${r} 0 0 1 ${x + r} ${y}`,
+      "Z"
+    ].join(" ");
+  }
+  function generateHorizontalTabPath(frame, cr) {
+    const { x, y, width, height } = frame;
+    const r = Math.min(frame.radius, width / 2, height / 2);
+    const bottom = y + height;
+    const concaveR = Math.min(cr, width / 2, Math.max(0, height - r));
+    return [
+      // Start at top-left, after the rounded corner
+      `M ${x} ${y + r}`,
+      // Arc from left edge to top edge (top-left rounded corner)
+      `A ${r} ${r} 0 0 1 ${x + r} ${y}`,
+      // Top edge to top-right corner
+      `L ${x + width - r} ${y}`,
+      // Arc from top edge to right edge (top-right rounded corner)
+      `A ${r} ${r} 0 0 1 ${x + width} ${y + r}`,
+      // Right edge down to bottom-right concave
+      `L ${x + width} ${bottom - concaveR}`,
+      // Concave curve at bottom-right (curves outward)
+      `Q ${x + width} ${bottom} ${x + width + concaveR} ${bottom}`,
+      // Flat bottom edge (off to the right, then back to the left)
+      `L ${x - concaveR} ${bottom}`,
+      // Concave curve at bottom-left (curves outward)
+      `Q ${x} ${bottom} ${x} ${bottom - concaveR}`,
+      // Left edge back up
+      `L ${x} ${y + r}`,
+      "Z"
+    ].join(" ");
+  }
+  function applyFrame(indicator, frame, variant, orientation) {
+    if (variant === "tab") {
+      const path = indicator;
+      const generator = orientation === "horizontal" ? generateHorizontalTabPath : generateTabPath;
+      path.setAttribute("d", generator(frame, TAB_CURVE_RADIUS));
+      path.setAttribute("opacity", frame.visible ? "1" : "0");
+    } else {
+      const rect = indicator;
+      rect.setAttribute("x", String(frame.x));
+      rect.setAttribute("y", String(frame.y));
+      rect.setAttribute("width", String(frame.width));
+      rect.setAttribute("height", String(frame.height));
+      rect.setAttribute("rx", String(frame.radius));
+      rect.setAttribute("ry", String(frame.radius));
+      rect.setAttribute("opacity", frame.visible ? "1" : "0");
+    }
+  }
+  function frameEquals(a, b) {
+    if (!a || !b) return false;
+    return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height && a.radius === b.radius && a.visible === b.visible;
+  }
+  function simulateSpringValues(config) {
+    const { stiffness, damping, mass } = config;
+    const dt = 1 / 120;
+    const maxDuration = 3;
+    const samples = [0];
+    let position = 0;
+    let velocity = 0;
+    let t = 0;
+    while (t < maxDuration) {
+      const acceleration = (-stiffness * (position - 1) - damping * velocity) / mass;
+      const midVelocity = velocity + acceleration * (dt / 2);
+      const midPosition = position + velocity * (dt / 2);
+      const midAcceleration = (-stiffness * (midPosition - 1) - damping * midVelocity) / mass;
+      velocity = velocity + midAcceleration * dt;
+      position = position + midVelocity * dt;
+      t += dt;
+      samples.push(position);
+      if (Math.abs(position - 1) < 1e-3 && Math.abs(velocity) < 1e-3) break;
+    }
+    samples.push(1);
+    return samples;
+  }
+  function lerp(a, b, t) {
+    return a + (b - a) * t;
+  }
+  function easeOutCubic(t) {
+    return 1 - (1 - t) ** 3;
+  }
+  var EXIT_MS = 130;
+  function animateTabEnter(path, from, to, cr, spring) {
+    const rightEdge = from.x + from.width;
+    const samples = simulateSpringValues(spring);
+    const count = samples.length;
+    const durationMs = count / 120 * 1e3;
+    const startTime = performance.now();
+    let cancelled = false;
+    const handle = {
+      onfinish: null,
+      cancel() {
+        cancelled = true;
+      }
+    };
+    function tick() {
+      if (cancelled) return;
+      const elapsed = performance.now() - startTime;
+      const progress = Math.min(elapsed / durationMs, 1);
+      const idx = Math.min(Math.floor(progress * (count - 1)), count - 1);
+      const t = samples[idx];
+      const frame = {
+        x: lerp(rightEdge, to.x, t),
+        y: to.y,
+        width: lerp(0, to.width, t),
+        height: to.height,
+        radius: to.radius
+      };
+      path.setAttribute("d", generateTabPath(frame, cr));
+      if (progress < 1) {
+        requestAnimationFrame(tick);
+      } else {
+        handle.onfinish?.();
+      }
+    }
+    requestAnimationFrame(tick);
+    return handle;
+  }
+  function animateHorizontalTabEnter(path, from, to, cr, spring) {
+    const bottomEdge = from.y + from.height;
+    const samples = simulateSpringValues(spring);
+    const count = samples.length;
+    const durationMs = count / 120 * 1e3;
+    const startTime = performance.now();
+    let cancelled = false;
+    const handle = {
+      onfinish: null,
+      cancel() {
+        cancelled = true;
+      }
+    };
+    function tick() {
+      if (cancelled) return;
+      const elapsed = performance.now() - startTime;
+      const progress = Math.min(elapsed / durationMs, 1);
+      const idx = Math.min(Math.floor(progress * (count - 1)), count - 1);
+      const t = samples[idx];
+      const frame = {
+        x: to.x,
+        y: lerp(bottomEdge, to.y, t),
+        width: to.width,
+        height: lerp(0, to.height, t),
+        radius: to.radius
+      };
+      path.setAttribute("d", generateHorizontalTabPath(frame, cr));
+      if (progress < 1) {
+        requestAnimationFrame(tick);
+      } else {
+        handle.onfinish?.();
+      }
+    }
+    requestAnimationFrame(tick);
+    return handle;
+  }
+  function animateTabIndicator(path, from, to, cr, spring, onEnterStart) {
+    const rightEdge = from.x + from.width;
+    const enterSamples = simulateSpringValues({
+      stiffness: spring.stiffness * 3,
+      damping: spring.damping * 1.8,
+      mass: spring.mass
+    });
+    const enterCount = enterSamples.length;
+    const enterMs = enterCount / 120 * 1e3;
+    const totalMs = EXIT_MS + enterMs;
+    const startTime = performance.now();
+    let cancelled = false;
+    let enteredPhase2 = false;
+    const handle = {
+      onfinish: null,
+      cancel() {
+        cancelled = true;
+      }
+    };
+    function tick() {
+      if (cancelled) return;
+      const elapsed = performance.now() - startTime;
+      let frame;
+      if (elapsed < EXIT_MS) {
+        const t = easeOutCubic(elapsed / EXIT_MS);
+        frame = {
+          x: lerp(from.x, rightEdge, t),
+          y: from.y,
+          width: lerp(from.width, 0, t),
+          height: from.height,
+          radius: from.radius,
+          visible: true
+        };
+      } else {
+        if (!enteredPhase2) {
+          enteredPhase2 = true;
+          onEnterStart?.();
+        }
+        const phaseElapsed = elapsed - EXIT_MS;
+        const phaseProgress = Math.min(phaseElapsed / enterMs, 1);
+        const idx = Math.min(
+          Math.floor(phaseProgress * (enterCount - 1)),
+          enterCount - 1
+        );
+        const t = enterSamples[idx];
+        frame = {
+          x: lerp(rightEdge, to.x, t),
+          y: to.y,
+          width: lerp(0, to.width, t),
+          height: to.height,
+          radius: to.radius,
+          visible: true
+        };
+      }
+      path.setAttribute("d", generateTabPath(frame, cr));
+      if (elapsed < totalMs) {
+        requestAnimationFrame(tick);
+      } else {
+        handle.onfinish?.();
+      }
+    }
+    requestAnimationFrame(tick);
+    return handle;
+  }
+  function animateHorizontalTabIndicator(path, from, to, cr, spring, onEnterStart) {
+    const bottomEdge = from.y + from.height;
+    const enterSamples = simulateSpringValues({
+      stiffness: spring.stiffness * 3,
+      damping: spring.damping * 1.8,
+      mass: spring.mass
+    });
+    const enterCount = enterSamples.length;
+    const enterMs = enterCount / 120 * 1e3;
+    const totalMs = EXIT_MS + enterMs;
+    const startTime = performance.now();
+    let cancelled = false;
+    let enteredPhase2 = false;
+    const handle = {
+      onfinish: null,
+      cancel() {
+        cancelled = true;
+      }
+    };
+    function tick() {
+      if (cancelled) return;
+      const elapsed = performance.now() - startTime;
+      let frame;
+      if (elapsed < EXIT_MS) {
+        const t = easeOutCubic(elapsed / EXIT_MS);
+        frame = {
+          x: from.x,
+          y: lerp(from.y, bottomEdge, t),
+          width: from.width,
+          height: lerp(from.height, 0, t),
+          radius: from.radius,
+          visible: true
+        };
+      } else {
+        if (!enteredPhase2) {
+          enteredPhase2 = true;
+          onEnterStart?.();
+        }
+        const phaseElapsed = elapsed - EXIT_MS;
+        const phaseProgress = Math.min(phaseElapsed / enterMs, 1);
+        const idx = Math.min(
+          Math.floor(phaseProgress * (enterCount - 1)),
+          enterCount - 1
+        );
+        const t = enterSamples[idx];
+        frame = {
+          x: to.x,
+          y: lerp(bottomEdge, to.y, t),
+          width: to.width,
+          height: lerp(0, to.height, t),
+          radius: to.radius,
+          visible: true
+        };
+      }
+      path.setAttribute("d", generateHorizontalTabPath(frame, cr));
+      if (elapsed < totalMs) {
+        requestAnimationFrame(tick);
+      } else {
+        handle.onfinish?.();
+      }
+    }
+    requestAnimationFrame(tick);
+    return handle;
+  }
+  var STRETCH_MS = 150;
+  function animatePillMorph(rect, from, to, spring) {
+    const stretchedX = Math.min(from.x, to.x);
+    const stretchedRight = Math.max(from.x + from.width, to.x + to.width);
+    const stretchedWidth = stretchedRight - stretchedX;
+    const contractSamples = simulateSpringValues({
+      stiffness: spring.stiffness * 2.5,
+      damping: spring.damping * 1.6,
+      mass: spring.mass
+    });
+    const contractCount = contractSamples.length;
+    const contractMs = contractCount / 120 * 1e3;
+    const totalMs = STRETCH_MS + contractMs;
+    const startTime = performance.now();
+    let cancelled = false;
+    const handle = {
+      onfinish: null,
+      cancel() {
+        cancelled = true;
+      }
+    };
+    function applyRect(x, y, w, h, r) {
+      rect.setAttribute("x", String(x));
+      rect.setAttribute("y", String(y));
+      rect.setAttribute("width", String(w));
+      rect.setAttribute("height", String(h));
+      rect.setAttribute("rx", String(r));
+      rect.setAttribute("ry", String(r));
+    }
+    function tick() {
+      if (cancelled) return;
+      const elapsed = performance.now() - startTime;
+      if (elapsed < STRETCH_MS) {
+        const t = easeOutCubic(elapsed / STRETCH_MS);
+        applyRect(
+          lerp(from.x, stretchedX, t),
+          lerp(from.y, to.y, t),
+          lerp(from.width, stretchedWidth, t),
+          lerp(from.height, to.height, t),
+          lerp(from.radius, to.radius, t)
+        );
+      } else {
+        const phaseElapsed = elapsed - STRETCH_MS;
+        const phaseProgress = Math.min(phaseElapsed / contractMs, 1);
+        const idx = Math.min(Math.floor(phaseProgress * (contractCount - 1)), contractCount - 1);
+        const t = contractSamples[idx];
+        applyRect(
+          lerp(stretchedX, to.x, t),
+          to.y,
+          lerp(stretchedWidth, to.width, t),
+          to.height,
+          to.radius
+        );
+      }
+      if (elapsed < totalMs) {
+        requestAnimationFrame(tick);
+      } else {
+        handle.onfinish?.();
+      }
+    }
+    requestAnimationFrame(tick);
+    return handle;
+  }
+  function connectMenu(options) {
+    const spring = options.spring ?? FLUIX_SPRING;
+    const padding = options.padding ?? 6;
+    const variant = options.variant;
+    const orientation = options.orientation;
+    const cleanups = [];
+    let currentAnimation = null;
+    let lastFrame = null;
+    let rafId = 0;
+    let resizeObserver = null;
+    let mutationObserver = null;
+    let previousActiveId = null;
+    let animOldId = null;
+    let animNewId = null;
+    let animPhase = null;
+    function setItemState(id, state) {
+      const el = options.root.querySelector(
+        `${ITEM_SELECTOR}[data-menu-id="${CSS.escape(id)}"]`
+      );
+      if (el && el.dataset["state"] !== state) {
+        el.dataset["state"] = state;
+      }
+    }
+    function enforceAnimStates() {
+      if (!animPhase) return;
+      if (animPhase === "exit") {
+        if (animOldId) setItemState(animOldId, "active");
+        if (animNewId) setItemState(animNewId, "inactive");
+      } else {
+        if (animOldId) setItemState(animOldId, "inactive");
+        if (animNewId) setItemState(animNewId, "active");
+      }
+    }
+    function clearAnimState() {
+      animOldId = null;
+      animNewId = null;
+      animPhase = null;
+    }
+    function apply(frame) {
+      applyFrame(options.indicator, frame, variant, orientation);
+    }
+    const updateIndicator = (immediate = false) => {
+      const activeId = options.getActiveId();
+      const nextFrame = activeId ? readItemFrame(options.root, activeId, padding, variant, orientation) : null;
+      const fallbackFrame = nextFrame ?? lastFrame ?? {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+        radius: 0,
+        visible: false
+      };
+      if (!lastFrame) {
+        lastFrame = fallbackFrame;
+        previousActiveId = activeId;
+        apply(fallbackFrame);
+        return;
+      }
+      if (frameEquals(lastFrame, fallbackFrame)) return;
+      if (currentAnimation) {
+        currentAnimation.cancel();
+        currentAnimation = null;
+        clearAnimState();
+      }
+      if (variant === "tab" && !immediate && fallbackFrame.visible && !lastFrame.visible) {
+        const to2 = fallbackFrame;
+        lastFrame = to2;
+        previousActiveId = activeId;
+        const isHorizontal = orientation === "horizontal";
+        const collapsedFrom = isHorizontal ? {
+          x: to2.x,
+          y: to2.y + to2.height,
+          // bottom edge
+          width: to2.width,
+          height: 0,
+          radius: to2.radius
+        } : {
+          x: to2.x + to2.width,
+          // right edge
+          y: to2.y,
+          width: 0,
+          height: to2.height,
+          radius: to2.radius
+        };
+        options.indicator.setAttribute("opacity", "1");
+        const springConfig = { stiffness: spring.stiffness ?? 170, damping: spring.damping ?? 18, mass: spring.mass ?? 1 };
+        const enterAnim = isHorizontal ? animateHorizontalTabEnter(
+          options.indicator,
+          collapsedFrom,
+          to2,
+          TAB_CURVE_RADIUS,
+          springConfig
+        ) : animateTabEnter(
+          options.indicator,
+          collapsedFrom,
+          to2,
+          TAB_CURVE_RADIUS,
+          springConfig
+        );
+        currentAnimation = enterAnim;
+        enterAnim.onfinish = () => {
+          currentAnimation = null;
+          const settledId = options.getActiveId();
+          const settled = settledId ? readItemFrame(options.root, settledId, padding, variant, orientation) : null;
+          if (settled) {
+            lastFrame = settled;
+            apply(settled);
+          } else {
+            apply(to2);
+          }
+        };
+        return;
+      }
+      if (immediate || !fallbackFrame.visible || !lastFrame.visible) {
+        lastFrame = fallbackFrame;
+        previousActiveId = activeId;
+        apply(fallbackFrame);
+        return;
+      }
+      const from = lastFrame;
+      const to = fallbackFrame;
+      const oldActiveId = previousActiveId;
+      const newActiveId = activeId;
+      lastFrame = to;
+      previousActiveId = activeId;
+      let animation = null;
+      if (variant === "tab") {
+        animOldId = oldActiveId;
+        animNewId = newActiveId;
+        animPhase = "exit";
+        enforceAnimStates();
+        const springConfig = { stiffness: spring.stiffness ?? 170, damping: spring.damping ?? 18, mass: spring.mass ?? 1 };
+        const onEnterStart = () => {
+          animPhase = "enter";
+          enforceAnimStates();
+        };
+        animation = orientation === "horizontal" ? animateHorizontalTabIndicator(
+          options.indicator,
+          from,
+          to,
+          TAB_CURVE_RADIUS,
+          springConfig,
+          onEnterStart
+        ) : animateTabIndicator(
+          options.indicator,
+          from,
+          to,
+          TAB_CURVE_RADIUS,
+          springConfig,
+          onEnterStart
+        );
+      } else {
+        animation = animatePillMorph(
+          options.indicator,
+          from,
+          to,
+          { stiffness: spring.stiffness ?? 170, damping: spring.damping ?? 18, mass: spring.mass ?? 1 }
+        );
+      }
+      if (!animation) {
+        apply(to);
+        return;
+      }
+      currentAnimation = animation;
+      animation.onfinish = () => {
+        currentAnimation = null;
+        if (variant === "tab") {
+          if (newActiveId) setItemState(newActiveId, "active");
+          if (oldActiveId && oldActiveId !== newActiveId) setItemState(oldActiveId, "inactive");
+          clearAnimState();
+        }
+        const settledId = options.getActiveId();
+        const settled = settledId ? readItemFrame(options.root, settledId, padding, variant, orientation) : null;
+        if (settled) {
+          lastFrame = settled;
+          apply(settled);
+        } else {
+          apply(to);
+        }
+      };
+    };
+    const sync = (immediate = false) => {
+      cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => updateIndicator(immediate));
+    };
+    const handleClick = (event) => {
+      if (!options.onSelect) return;
+      const target = event.target;
+      if (!target) return;
+      const item = target.closest(ITEM_SELECTOR);
+      if (!item || item.dataset["disabled"] === "true") return;
+      const id = item.dataset["menuId"];
+      if (!id) return;
+      options.onSelect(id);
+    };
+    options.root.addEventListener("click", handleClick);
+    cleanups.push(() => options.root.removeEventListener("click", handleClick));
+    const scheduleSync = () => {
+      if (animPhase) return;
+      sync(false);
+    };
+    resizeObserver = new ResizeObserver(scheduleSync);
+    resizeObserver.observe(options.root);
+    for (const item of options.root.querySelectorAll(ITEM_SELECTOR)) {
+      resizeObserver.observe(item);
+    }
+    cleanups.push(() => {
+      resizeObserver?.disconnect();
+      resizeObserver = null;
+    });
+    mutationObserver = new MutationObserver(() => {
+      if (animPhase) {
+        enforceAnimStates();
+        return;
+      }
+      if (!resizeObserver) return;
+      resizeObserver.disconnect();
+      resizeObserver.observe(options.root);
+      for (const item of options.root.querySelectorAll(ITEM_SELECTOR)) {
+        resizeObserver.observe(item);
+      }
+      sync(false);
+    });
+    mutationObserver.observe(options.root, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["data-menu-id", "data-state"]
+    });
+    cleanups.push(() => {
+      mutationObserver?.disconnect();
+      mutationObserver = null;
+    });
+    sync(true);
+    return {
+      sync,
+      destroy() {
+        cancelAnimationFrame(rafId);
+        if (currentAnimation) {
+          currentAnimation.cancel();
+          currentAnimation = null;
+        }
+        for (const cleanup of cleanups) cleanup();
+        cleanups.length = 0;
+      }
+    };
+  }
 
   // src/toast.ts
   var WIDTH = 350;
@@ -1240,6 +2010,709 @@ var Fluix = (function (exports) {
     };
   }
 
+  // src/notch.ts
+  var SVG_NS2 = "http://www.w3.org/2000/svg";
+  function applyAttrs2(el, attrs) {
+    for (const [key, value] of Object.entries(attrs)) {
+      el.setAttribute(key, value);
+    }
+  }
+  function resolveContent(source) {
+    if (source instanceof HTMLElement) return source;
+    const span = document.createElement("span");
+    span.textContent = source;
+    return span;
+  }
+  function createNotch(container, options) {
+    let {
+      trigger = "click",
+      position = "top-center",
+      spring,
+      dotSize = 36,
+      roundness = NOTCH_DEFAULTS.roundness,
+      theme = "dark",
+      fill,
+      open: controlledOpen,
+      onOpenChange
+    } = options;
+    const springConfig = () => spring ?? FLUIX_SPRING;
+    const machine2 = createNotchMachine({
+      position,
+      trigger,
+      roundness,
+      fill,
+      spring
+    });
+    let snapshot = machine2.store.getSnapshot();
+    let prevOpenVal;
+    const blur = () => Math.min(10, Math.max(6, roundness * 0.45));
+    const collapsedW = () => dotSize;
+    const collapsedH = () => dotSize;
+    let contentSize = { w: 200, h: 44 };
+    const hlPad = 12;
+    const expandedW = () => contentSize.w + hlPad * 2;
+    const expandedH = () => Math.max(contentSize.h + hlPad, dotSize);
+    const targetW = () => snapshot.open ? expandedW() : collapsedW();
+    const targetH = () => snapshot.open ? expandedH() : collapsedH();
+    const rootW = () => Math.max(expandedW(), collapsedW());
+    const rootH = () => Math.max(expandedH(), collapsedH());
+    const prev = { w: 0, h: 0, initialized: false };
+    let currentAnim = null;
+    let highlightAnim = null;
+    const hlPrev = { x: 0, y: 0, w: 0, h: 0, visible: false };
+    const measureEl = document.createElement("div");
+    measureEl.setAttribute("data-fluix-notch-measure", "");
+    measureEl.appendChild(resolveContent(options.content).cloneNode(true));
+    container.appendChild(measureEl);
+    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 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);
+    rootEl.appendChild(canvasDiv);
+    const pillDiv = document.createElement("div");
+    applyAttrs2(pillDiv, attrs.pill);
+    pillDiv.style.width = `${dotSize}px`;
+    pillDiv.style.height = `${dotSize}px`;
+    pillDiv.appendChild(resolveContent(options.pill));
+    rootEl.appendChild(pillDiv);
+    const contentDiv = document.createElement("div");
+    applyAttrs2(contentDiv, attrs.content);
+    contentDiv.appendChild(resolveContent(options.content));
+    rootEl.appendChild(contentDiv);
+    container.appendChild(rootEl);
+    prev.w = cw;
+    prev.h = ch;
+    prev.initialized = true;
+    let measureRaf = 0;
+    const measureObs = new ResizeObserver(() => {
+      cancelAnimationFrame(measureRaf);
+      measureRaf = requestAnimationFrame(() => {
+        const r = 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();
+          }
+        }
+      });
+    });
+    measureObs.observe(measureEl);
+    function onItemEnter(e) {
+      const target = e.target.closest("a, button");
+      if (!target || !snapshot.open) return;
+      const rootRect = rootEl.getBoundingClientRect();
+      const itemW = target.offsetWidth;
+      const itemH = target.offsetHeight;
+      const itemRect = target.getBoundingClientRect();
+      const itemCenterX = itemRect.left + itemRect.width / 2;
+      const itemCenterY = itemRect.top + itemRect.height / 2;
+      const padX = 8;
+      const padY = 4;
+      const blobOvershoot = Math.max(6, roundness * 0.35);
+      const toW = itemW + padX * 2;
+      const toH = Math.max(itemH + padY * 2, rootRect.height + blobOvershoot * 2);
+      const toX = itemCenterX - rootRect.left - toW / 2;
+      const toY = itemCenterY - rootRect.top - toH / 2;
+      const toRx = toH / 2;
+      const fromX = hlPrev.visible ? hlPrev.x : toX + toW / 2;
+      const fromY = hlPrev.visible ? hlPrev.y : toY + toH / 2;
+      const fromW = hlPrev.visible ? hlPrev.w : 0;
+      const fromH = hlPrev.visible ? hlPrev.h : 0;
+      const fromR = hlPrev.visible ? hlPrev.h / 2 : 0;
+      if (highlightAnim) {
+        highlightAnim.cancel();
+        highlightAnim = null;
+      }
+      const sc = springConfig();
+      const a = animateSpring(
+        hoverBlobEl,
+        {
+          x: { from: fromX, to: toX, unit: "px" },
+          y: { from: fromY, to: toY, unit: "px" },
+          width: { from: fromW, to: toW, unit: "px" },
+          height: { from: fromH, to: toH, unit: "px" },
+          rx: { from: fromR, to: toRx, unit: "px" },
+          ry: { from: fromR, to: toRx, unit: "px" }
+        },
+        { ...sc, stiffness: (sc.stiffness ?? 300) * 1.2 }
+      );
+      hlPrev.x = toX;
+      hlPrev.y = toY;
+      hlPrev.w = toW;
+      hlPrev.h = toH;
+      if (a) {
+        highlightAnim = a;
+        a.onfinish = () => {
+          highlightAnim = null;
+          hoverBlobEl.setAttribute("x", String(toX));
+          hoverBlobEl.setAttribute("y", String(toY));
+          hoverBlobEl.setAttribute("width", String(toW));
+          hoverBlobEl.setAttribute("height", String(toH));
+          hoverBlobEl.setAttribute("rx", String(toRx));
+          hoverBlobEl.setAttribute("ry", String(toRx));
+          hoverBlobEl.setAttribute("opacity", "1");
+        };
+      } else {
+        hoverBlobEl.setAttribute("x", String(toX));
+        hoverBlobEl.setAttribute("y", String(toY));
+        hoverBlobEl.setAttribute("width", String(toW));
+        hoverBlobEl.setAttribute("height", String(toH));
+        hoverBlobEl.setAttribute("rx", String(toRx));
+        hoverBlobEl.setAttribute("ry", String(toRx));
+        hoverBlobEl.setAttribute("opacity", "1");
+      }
+      hoverBlobEl.setAttribute("opacity", "1");
+      hlPrev.visible = true;
+    }
+    function resetHoverBlobImmediate() {
+      if (highlightAnim) {
+        highlightAnim.cancel();
+        highlightAnim = null;
+      }
+      hoverBlobEl.setAttribute("x", String(rootW() / 2));
+      hoverBlobEl.setAttribute("y", String(rootH() / 2));
+      hoverBlobEl.setAttribute("width", "0");
+      hoverBlobEl.setAttribute("height", "0");
+      hoverBlobEl.setAttribute("rx", "0");
+      hoverBlobEl.setAttribute("ry", "0");
+      hoverBlobEl.setAttribute("opacity", "0");
+      hlPrev.visible = false;
+    }
+    function onItemLeave() {
+      if (!hlPrev.visible) return;
+      const cx = hlPrev.x + hlPrev.w / 2;
+      const cy = hlPrev.y + hlPrev.h / 2;
+      const sc = springConfig();
+      const a = animateSpring(
+        hoverBlobEl,
+        {
+          x: { from: hlPrev.x, to: cx, unit: "px" },
+          y: { from: hlPrev.y, to: cy, unit: "px" },
+          width: { from: hlPrev.w, to: 0, unit: "px" },
+          height: { from: hlPrev.h, to: 0, unit: "px" },
+          rx: { from: hlPrev.h / 2, to: 0, unit: "px" },
+          ry: { from: hlPrev.h / 2, to: 0, unit: "px" }
+        },
+        { ...sc, stiffness: (sc.stiffness ?? 300) * 1.2 }
+      );
+      if (a) {
+        highlightAnim = a;
+        a.onfinish = () => {
+          highlightAnim = null;
+          hoverBlobEl.setAttribute("x", String(cx));
+          hoverBlobEl.setAttribute("y", String(cy));
+          hoverBlobEl.setAttribute("width", "0");
+          hoverBlobEl.setAttribute("height", "0");
+          hoverBlobEl.setAttribute("rx", "0");
+          hoverBlobEl.setAttribute("ry", "0");
+          hoverBlobEl.setAttribute("opacity", "0");
+        };
+      } else {
+        hoverBlobEl.setAttribute("x", String(cx));
+        hoverBlobEl.setAttribute("y", String(cy));
+        hoverBlobEl.setAttribute("width", "0");
+        hoverBlobEl.setAttribute("height", "0");
+        hoverBlobEl.setAttribute("rx", "0");
+        hoverBlobEl.setAttribute("ry", "0");
+        hoverBlobEl.setAttribute("opacity", "0");
+      }
+      hlPrev.visible = false;
+    }
+    function handleOpen() {
+      if (controlledOpen === void 0) machine2.open();
+      else onOpenChange?.(true);
+    }
+    function handleClose() {
+      if (controlledOpen === void 0) machine2.close();
+      else onOpenChange?.(false);
+    }
+    function handleToggle() {
+      if (controlledOpen === void 0) machine2.toggle();
+      else onOpenChange?.(!snapshot.open);
+    }
+    function onMouseEnter() {
+      if (trigger === "hover") handleOpen();
+    }
+    function onMouseLeave() {
+      if (trigger === "hover") {
+        handleClose();
+        resetHoverBlobImmediate();
+        return;
+      }
+      onItemLeave();
+    }
+    function onClick() {
+      if (trigger === "click") handleToggle();
+    }
+    rootEl.addEventListener("mouseenter", onMouseEnter);
+    rootEl.addEventListener("mouseleave", onMouseLeave);
+    rootEl.addEventListener("mouseover", onItemEnter);
+    rootEl.addEventListener("click", onClick);
+    function animateRect() {
+      const tw = targetW();
+      const th = targetH();
+      if (tw === prev.w && th === prev.h) return;
+      if (currentAnim) {
+        currentAnim.cancel();
+        currentAnim = null;
+      }
+      const rw = rootW();
+      const rh = rootH();
+      const fromW = prev.w;
+      const fromH = prev.h;
+      const fromX = (rw - fromW) / 2;
+      const fromY = (rh - fromH) / 2;
+      const toX = (rw - tw) / 2;
+      const toY = (rh - th) / 2;
+      prev.w = tw;
+      prev.h = th;
+      const isCollapsing = tw === collapsedW() && th === collapsedH();
+      const wasCollapsed = fromW === collapsedW() && fromH === collapsedH();
+      const fromRx = wasCollapsed ? collapsedW() / 2 : roundness;
+      const toRx = isCollapsing ? collapsedW() / 2 : roundness;
+      const a = animateSpring(
+        svgRectEl,
+        {
+          width: { from: fromW, to: tw, unit: "px" },
+          height: { from: fromH, to: th, unit: "px" },
+          x: { from: fromX, to: toX, unit: "px" },
+          y: { from: fromY, to: toY, unit: "px" },
+          rx: { from: fromRx, to: toRx, unit: "px" },
+          ry: { from: fromRx, to: toRx, unit: "px" }
+        },
+        springConfig()
+      );
+      if (a) {
+        currentAnim = a;
+        a.onfinish = () => {
+          currentAnim = null;
+          svgRectEl.setAttribute("width", String(tw));
+          svgRectEl.setAttribute("height", String(th));
+          svgRectEl.setAttribute("x", String(toX));
+          svgRectEl.setAttribute("y", String(toY));
+          svgRectEl.setAttribute("rx", String(toRx));
+          svgRectEl.setAttribute("ry", String(toRx));
+        };
+      } else {
+        svgRectEl.setAttribute("width", String(tw));
+        svgRectEl.setAttribute("height", String(th));
+        svgRectEl.setAttribute("x", String(toX));
+        svgRectEl.setAttribute("y", String(toY));
+        svgRectEl.setAttribute("rx", String(toRx));
+        svgRectEl.setAttribute("ry", String(toRx));
+      }
+    }
+    function updateLayout() {
+      const isOpen = snapshot.open;
+      const newAttrs = getNotchAttrs({ open: isOpen, position, theme });
+      applyAttrs2(rootEl, newAttrs.root);
+      rootEl.style.width = `${rootW()}px`;
+      rootEl.style.height = `${rootH()}px`;
+      svg.setAttribute("width", String(rootW()));
+      svg.setAttribute("height", String(rootH()));
+      svg.setAttribute("viewBox", `0 0 ${rootW()} ${rootH()}`);
+      feBlur.setAttribute("stdDeviation", String(blur()));
+      svgRectEl.setAttribute("fill", fill ?? "var(--fluix-notch-bg)");
+      hoverBlobEl.setAttribute("fill", fill ?? "var(--fluix-notch-bg)");
+      applyAttrs2(contentDiv, newAttrs.content);
+      animateRect();
+      if (!isOpen) {
+        resetHoverBlobImmediate();
+      }
+      document.documentElement.style.setProperty(
+        "--fluix-notch-offset",
+        `${rootH()}px`
+      );
+    }
+    const unsubscribe = machine2.store.subscribe(() => {
+      const next = machine2.store.getSnapshot();
+      snapshot = next;
+      if (controlledOpen !== void 0) {
+        if (controlledOpen && !next.open) machine2.open();
+        else if (!controlledOpen && next.open) machine2.close();
+      }
+      if (prevOpenVal !== void 0 && prevOpenVal !== next.open) {
+        onOpenChange?.(next.open);
+      }
+      prevOpenVal = next.open;
+      updateLayout();
+    });
+    updateLayout();
+    document.documentElement.style.setProperty(
+      "--fluix-notch-offset",
+      `${rootH()}px`
+    );
+    return {
+      open() {
+        handleOpen();
+      },
+      close() {
+        handleClose();
+      },
+      toggle() {
+        handleToggle();
+      },
+      destroy() {
+        unsubscribe();
+        cancelAnimationFrame(measureRaf);
+        measureObs.disconnect();
+        currentAnim?.cancel();
+        highlightAnim?.cancel();
+        rootEl.removeEventListener("mouseenter", onMouseEnter);
+        rootEl.removeEventListener("mouseleave", onMouseLeave);
+        rootEl.removeEventListener("mouseover", onItemEnter);
+        rootEl.removeEventListener("click", onClick);
+        measureEl.remove();
+        rootEl.remove();
+        document.documentElement.style.removeProperty("--fluix-notch-offset");
+      },
+      update(opts) {
+        if (opts.trigger !== void 0) trigger = opts.trigger;
+        if (opts.position !== void 0) position = opts.position;
+        if (opts.spring !== void 0) spring = opts.spring;
+        if (opts.dotSize !== void 0) dotSize = opts.dotSize;
+        if (opts.roundness !== void 0) roundness = opts.roundness;
+        if (opts.theme !== void 0) theme = opts.theme;
+        if (opts.fill !== void 0) fill = opts.fill;
+        if (opts.open !== void 0) controlledOpen = opts.open;
+        if (opts.onOpenChange !== void 0) onOpenChange = opts.onOpenChange;
+        if (opts.pill !== void 0) {
+          pillDiv.textContent = "";
+          pillDiv.appendChild(resolveContent(opts.pill));
+        }
+        if (opts.content !== void 0) {
+          contentDiv.textContent = "";
+          contentDiv.appendChild(resolveContent(opts.content));
+          measureEl.textContent = "";
+          measureEl.appendChild(resolveContent(opts.content).cloneNode(true));
+        }
+        pillDiv.style.width = `${dotSize}px`;
+        pillDiv.style.height = `${dotSize}px`;
+        machine2.configure({ position, trigger, roundness, fill, spring });
+        if (controlledOpen !== void 0) {
+          if (controlledOpen && !snapshot.open) machine2.open();
+          else if (!controlledOpen && snapshot.open) machine2.close();
+        }
+        rootEl.removeEventListener("mouseenter", onMouseEnter);
+        rootEl.removeEventListener("mouseleave", onMouseLeave);
+        rootEl.removeEventListener("click", onClick);
+        rootEl.addEventListener("mouseenter", onMouseEnter);
+        rootEl.addEventListener("mouseleave", onMouseLeave);
+        rootEl.addEventListener("click", onClick);
+        updateLayout();
+      }
+    };
+  }
+
+  // src/menu.ts
+  var SVG_NS3 = "http://www.w3.org/2000/svg";
+  var GOO_MATRIX = "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10";
+  function applyAttrs3(el, attrs) {
+    for (const [key, value] of Object.entries(attrs)) {
+      el.setAttribute(key, value);
+    }
+  }
+  function createMenu(container, options) {
+    let {
+      orientation = MENU_DEFAULTS.orientation,
+      variant = "pill",
+      theme = "dark",
+      activeId: controlledActiveId,
+      onActiveChange,
+      spring,
+      roundness = MENU_DEFAULTS.roundness,
+      blur: blurProp,
+      fill,
+      items
+    } = options;
+    const springConfig = () => spring ?? FLUIX_SPRING;
+    const resolvedBlur = () => blurProp ?? Math.min(10, Math.max(6, roundness * 0.45));
+    const machine2 = createMenuMachine({
+      orientation,
+      variant,
+      spring,
+      roundness,
+      blur: blurProp,
+      fill,
+      initialActiveId: controlledActiveId ?? null
+    });
+    let snapshot = machine2.store.getSnapshot();
+    let lastActiveNotified = snapshot.activeId;
+    const attrs = getMenuAttrs({ orientation, theme, variant });
+    const filterId = `fluix-menu-goo-${Math.random().toString(36).slice(2, 8)}`;
+    const isTab = variant === "tab";
+    const navEl = document.createElement("nav");
+    applyAttrs3(navEl, attrs.root);
+    navEl.setAttribute("aria-label", "Fluix menu");
+    const canvasDiv = document.createElement("div");
+    applyAttrs3(canvasDiv, attrs.canvas);
+    const svg = document.createElementNS(SVG_NS3, "svg");
+    svg.setAttribute("xmlns", SVG_NS3);
+    svg.setAttribute("width", "1");
+    svg.setAttribute("height", "1");
+    svg.setAttribute("viewBox", "0 0 1 1");
+    svg.setAttribute("aria-hidden", "true");
+    let indicatorEl;
+    if (isTab) {
+      indicatorEl = document.createElementNS(SVG_NS3, "path");
+      applyAttrs3(indicatorEl, attrs.indicator);
+      indicatorEl.setAttribute("d", "");
+      indicatorEl.setAttribute("opacity", "0");
+      indicatorEl.setAttribute("fill", fill ?? "var(--fluix-menu-indicator)");
+      svg.appendChild(indicatorEl);
+    } else {
+      const defs = document.createElementNS(SVG_NS3, "defs");
+      const filter = document.createElementNS(SVG_NS3, "filter");
+      filter.setAttribute("id", filterId);
+      filter.setAttribute("x", "-20%");
+      filter.setAttribute("y", "-20%");
+      filter.setAttribute("width", "140%");
+      filter.setAttribute("height", "140%");
+      filter.setAttribute("color-interpolation-filters", "sRGB");
+      const feBlur = document.createElementNS(SVG_NS3, "feGaussianBlur");
+      feBlur.setAttribute("in", "SourceGraphic");
+      feBlur.setAttribute("stdDeviation", String(resolvedBlur()));
+      feBlur.setAttribute("result", "blur");
+      const feCM = document.createElementNS(SVG_NS3, "feColorMatrix");
+      feCM.setAttribute("in", "blur");
+      feCM.setAttribute("type", "matrix");
+      feCM.setAttribute("values", GOO_MATRIX);
+      feCM.setAttribute("result", "goo");
+      const feComp = document.createElementNS(SVG_NS3, "feComposite");
+      feComp.setAttribute("in", "SourceGraphic");
+      feComp.setAttribute("in2", "goo");
+      feComp.setAttribute("operator", "atop");
+      filter.appendChild(feBlur);
+      filter.appendChild(feCM);
+      filter.appendChild(feComp);
+      defs.appendChild(filter);
+      svg.appendChild(defs);
+      const gGroup = document.createElementNS(SVG_NS3, "g");
+      gGroup.setAttribute("filter", `url(#${filterId})`);
+      indicatorEl = document.createElementNS(SVG_NS3, "rect");
+      applyAttrs3(indicatorEl, attrs.indicator);
+      indicatorEl.setAttribute("x", "0");
+      indicatorEl.setAttribute("y", "0");
+      indicatorEl.setAttribute("width", "0");
+      indicatorEl.setAttribute("height", "0");
+      indicatorEl.setAttribute("rx", "0");
+      indicatorEl.setAttribute("ry", "0");
+      indicatorEl.setAttribute("opacity", "0");
+      indicatorEl.setAttribute("fill", fill ?? "var(--fluix-menu-indicator)");
+      gGroup.appendChild(indicatorEl);
+      svg.appendChild(gGroup);
+    }
+    canvasDiv.appendChild(svg);
+    navEl.appendChild(canvasDiv);
+    const listDiv = document.createElement("div");
+    applyAttrs3(listDiv, attrs.list);
+    const buttonMap = /* @__PURE__ */ new Map();
+    function createItemButton(item) {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      const active = snapshot.activeId === item.id;
+      const itemAttrs = attrs.item({ id: item.id, active, disabled: item.disabled });
+      applyAttrs3(btn, itemAttrs);
+      if (item.disabled) btn.disabled = true;
+      btn.textContent = item.label;
+      btn.addEventListener("click", () => {
+        if (item.disabled) return;
+        if (controlledActiveId === void 0) {
+          machine2.setActive(item.id);
+        } else {
+          onActiveChange?.(item.id);
+        }
+      });
+      buttonMap.set(item.id, btn);
+      listDiv.appendChild(btn);
+    }
+    for (const item of items) {
+      createItemButton(item);
+    }
+    navEl.appendChild(listDiv);
+    container.appendChild(navEl);
+    let size = { width: 0, height: 0 };
+    let measureRaf = 0;
+    const measure = () => {
+      const rect = navEl.getBoundingClientRect();
+      const w = Math.ceil(rect.width);
+      const h = Math.ceil(rect.height);
+      if (size.width !== w || size.height !== h) {
+        size = { width: w, height: h };
+        updateSvgSize();
+        connection?.sync(false);
+      }
+    };
+    const resizeObs = new ResizeObserver(() => {
+      cancelAnimationFrame(measureRaf);
+      measureRaf = requestAnimationFrame(measure);
+    });
+    resizeObs.observe(navEl);
+    function updateSvgSize() {
+      const w = Math.max(1, size.width);
+      const h = Math.max(1, size.height);
+      svg.setAttribute("width", String(w));
+      svg.setAttribute("height", String(h));
+      svg.setAttribute("viewBox", `0 0 ${w} ${h}`);
+    }
+    let connection = connectMenu({
+      root: navEl,
+      indicator: indicatorEl,
+      getActiveId: () => snapshot.activeId,
+      onSelect(id) {
+        if (controlledActiveId === void 0) {
+          machine2.setActive(id);
+        } else {
+          onActiveChange?.(id);
+        }
+      },
+      spring: springConfig(),
+      variant,
+      orientation
+    });
+    requestAnimationFrame(() => {
+      measure();
+      connection.sync(false);
+    });
+    const unsubscribe = machine2.store.subscribe(() => {
+      const next = machine2.store.getSnapshot();
+      snapshot = next;
+      for (const item of items) {
+        const btn = buttonMap.get(item.id);
+        if (btn) {
+          const active = next.activeId === item.id;
+          const itemAttrs = attrs.item({ id: item.id, active, disabled: item.disabled });
+          applyAttrs3(btn, itemAttrs);
+        }
+      }
+      if (next.activeId && lastActiveNotified !== next.activeId && onActiveChange) {
+        onActiveChange(next.activeId);
+      }
+      lastActiveNotified = next.activeId;
+      connection.sync(false);
+    });
+    return {
+      setActive(id) {
+        machine2.setActive(id);
+      },
+      update(opts) {
+        if (opts.orientation !== void 0) orientation = opts.orientation;
+        if (opts.variant !== void 0) variant = opts.variant;
+        if (opts.theme !== void 0) theme = opts.theme;
+        if (opts.activeId !== void 0) controlledActiveId = opts.activeId;
+        if (opts.onActiveChange !== void 0) onActiveChange = opts.onActiveChange;
+        if (opts.spring !== void 0) spring = opts.spring;
+        if (opts.roundness !== void 0) roundness = opts.roundness;
+        if (opts.blur !== void 0) blurProp = opts.blur;
+        if (opts.fill !== void 0) fill = opts.fill;
+        machine2.configure({ orientation, variant, spring, roundness, blur: blurProp, fill });
+        if (controlledActiveId !== void 0) {
+          machine2.setActive(controlledActiveId ?? null);
+        }
+        const newAttrs = getMenuAttrs({ orientation, theme, variant });
+        applyAttrs3(navEl, newAttrs.root);
+        if (opts.items !== void 0) {
+          items = opts.items;
+          listDiv.innerHTML = "";
+          buttonMap.clear();
+          for (const item of items) {
+            createItemButton(item);
+          }
+        }
+        connection.destroy();
+        connection = connectMenu({
+          root: navEl,
+          indicator: indicatorEl,
+          getActiveId: () => snapshot.activeId,
+          onSelect(id) {
+            if (controlledActiveId === void 0) {
+              machine2.setActive(id);
+            } else {
+              onActiveChange?.(id);
+            }
+          },
+          spring: springConfig(),
+          variant,
+          orientation
+        });
+        requestAnimationFrame(() => {
+          measure();
+          connection.sync(false);
+        });
+      },
+      destroy() {
+        unsubscribe();
+        cancelAnimationFrame(measureRaf);
+        resizeObs.disconnect();
+        connection.destroy();
+        navEl.remove();
+      }
+    };
+  }
+
+  exports.createMenu = createMenu;
+  exports.createNotch = createNotch;
   exports.createToaster = createToaster;
   exports.fluix = fluix;