@fluix-ui/vanilla 0.0.5 → 0.0.7

package/dist/index.cjs

@@ -782,11 +782,712 @@ function createToaster(config) {
     }
   };
 }
+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 = core.NOTCH_DEFAULTS.roundness,
+    theme = "dark",
+    fill,
+    open: controlledOpen,
+    onOpenChange
+  } = options;
+  const springConfig = () => spring ?? core.FLUIX_SPRING;
+  const machine = core.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 };
+  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 = core.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 = core.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 = core.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 = core.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 = core.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 = 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);
+    }
+    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);
+      machine.destroy();
+      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`;
+      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();
+    }
+  };
+}
+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 = core.MENU_DEFAULTS.orientation,
+    variant = "pill",
+    theme = "dark",
+    activeId: controlledActiveId,
+    onActiveChange,
+    spring,
+    roundness = core.MENU_DEFAULTS.roundness,
+    blur: blurProp,
+    fill,
+    items
+  } = options;
+  const springConfig = () => spring ?? core.FLUIX_SPRING;
+  const resolvedBlur = () => blurProp ?? Math.min(10, Math.max(6, roundness * 0.45));
+  const machine = core.createMenuMachine({
+    orientation,
+    variant,
+    spring,
+    roundness,
+    blur: blurProp,
+    fill,
+    initialActiveId: controlledActiveId ?? null
+  });
+  let snapshot = machine.store.getSnapshot();
+  let lastActiveNotified = snapshot.activeId;
+  const attrs = core.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 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 = core.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);
+  });
+  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);
+      }
+    }
+    if (next.activeId && lastActiveNotified !== next.activeId && onActiveChange) {
+      onActiveChange(next.activeId);
+    }
+    lastActiveNotified = next.activeId;
+    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 = core.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 = core.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);
+      });
+    },
+    destroy() {
+      unsubscribe();
+      cancelAnimationFrame(measureRaf);
+      resizeObs.disconnect();
+      connection.destroy();
+      machine.destroy();
+      navEl.remove();
+    }
+  };
+}
 
 Object.defineProperty(exports, "fluix", {
   enumerable: true,
   get: function () { return core.fluix; }
 });
+exports.createMenu = createMenu;
+exports.createNotch = createNotch;
 exports.createToaster = createToaster;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map