@fluix-ui/vanilla 0.0.5 → 0.0.6

package/dist/index.global.js

@@ -458,6 +458,69 @@ 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)
+      }
+    };
+  }
 
   // src/toast.ts
   var WIDTH = 350;
@@ -1240,6 +1303,462 @@ 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();
+      }
+    };
+  }
+
+  exports.createNotch = createNotch;
   exports.createToaster = createToaster;
   exports.fluix = fluix;