@fluix-ui/vanilla 0.0.6 → 0.0.7

package/dist/index.global.js

@@ -521,6 +521,713 @@ var Fluix = (function (exports) {
       }
     };
   }
+  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;
@@ -1758,6 +2465,253 @@ var Fluix = (function (exports) {
     };
   }
 
+  // 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;