motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-TTNORJF5.js

@@ -0,0 +1,908 @@
+"use client";
+import {
+  ChartPieIcon
+} from "./chunk-YFLQ4HPJ.js";
+import {
+  ArrowDownRightIcon
+} from "./chunk-25254AZA.js";
+import {
+  ArrowUpRightIcon
+} from "./chunk-I7KTTOOJ.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/channel-mix/channel-mix.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  motion as motion4,
+  useInView,
+  useReducedMotion as useReducedMotion4
+} from "motion/react";
+import { Info } from "lucide-react";
+
+// src/icons/circle-dollar-sign.tsx
+import { motion, useAnimation, useReducedMotion } from "motion/react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DOLLAR_MAIN_VARIANTS = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+    transition: {
+      duration: 0.4,
+      opacity: { duration: 0.1 }
+    }
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    transition: {
+      duration: 0.6,
+      opacity: { duration: 0.1 }
+    }
+  }
+};
+var DOLLAR_SECONDARY_VARIANTS = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+    pathOffset: 0,
+    transition: {
+      delay: 0.3,
+      duration: 0.3,
+      opacity: { duration: 0.1, delay: 0.3 }
+    }
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    pathOffset: [1, 0],
+    transition: {
+      delay: 0.5,
+      duration: 0.4,
+      opacity: { duration: 0.1, delay: 0.5 }
+    }
+  }
+};
+var CircleDollarSignIcon = forwardRef(({ onMouseEnter, onMouseLeave, className, size, active, style, strokeWidth, ...props }, ref) => {
+  const controls = useAnimation();
+  const isControlledRef = useRef(false);
+  useImperativeHandle(ref, () => {
+    isControlledRef.current = true;
+    return {
+      startAnimation: () => controls.start("animate"),
+      stopAnimation: () => controls.start("normal")
+    };
+  });
+  const handleMouseEnter = useCallback(
+    (e) => {
+      if (isControlledRef.current) {
+        onMouseEnter?.(e);
+      } else {
+        controls.start("animate");
+      }
+    },
+    [controls, onMouseEnter]
+  );
+  const handleMouseLeave = useCallback(
+    (e) => {
+      if (isControlledRef.current) {
+        onMouseLeave?.(e);
+      } else {
+        controls.start("normal");
+      }
+    },
+    [controls, onMouseLeave]
+  );
+  const wrap = useRef(null);
+  const reduced = useReducedMotion();
+  const [hosted, setHosted] = useState(false);
+  useEffect(() => {
+    const fake = {};
+    if (reduced) {
+      setHosted(true);
+      return;
+    }
+    if (active !== void 0) {
+      setHosted(true);
+      (active ? handleMouseEnter : handleMouseLeave)(fake);
+      return;
+    }
+    const host = wrap.current?.parentElement?.closest("button, a, [role=button], [role=menuitem], [role=tab], [role=switch], [role=radio], label");
+    setHosted(!!host);
+    if (!host) return;
+    const on = () => handleMouseEnter(fake);
+    const off = () => handleMouseLeave(fake);
+    host.addEventListener("pointerenter", on);
+    host.addEventListener("pointerleave", off);
+    return () => {
+      host.removeEventListener("pointerenter", on);
+      host.removeEventListener("pointerleave", off);
+    };
+  }, [active, reduced, handleMouseEnter, handleMouseLeave]);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref: wrap,
+      className: cn("inline-grid size-6 shrink-0 place-items-center align-middle [&>svg]:size-full", className),
+      style: size ? { width: size, height: size, ...style } : style,
+      onMouseEnter: hosted ? void 0 : handleMouseEnter,
+      onMouseLeave: hosted ? void 0 : handleMouseLeave,
+      ...props,
+      children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          fill: "none",
+          height: size,
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: strokeWidth ?? 2,
+          viewBox: "0 0 24 24",
+          width: size,
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+            /* @__PURE__ */ jsx(
+              motion.path,
+              {
+                animate: controls,
+                d: "M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8",
+                initial: "normal",
+                variants: DOLLAR_MAIN_VARIANTS
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              motion.path,
+              {
+                animate: controls,
+                d: "M12 18V6",
+                initial: "normal",
+                variants: DOLLAR_SECONDARY_VARIANTS
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
+CircleDollarSignIcon.displayName = "CircleDollarSignIcon";
+
+// src/icons/hourglass.tsx
+import { motion as motion2, useAnimation as useAnimation2, useReducedMotion as useReducedMotion2 } from "motion/react";
+import { forwardRef as forwardRef2, useCallback as useCallback2, useEffect as useEffect2, useImperativeHandle as useImperativeHandle2, useRef as useRef2, useState as useState2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var HourglassIcon = forwardRef2(
+  ({ onMouseEnter, onMouseLeave, className, size, active, style, strokeWidth, ...props }, ref) => {
+    const controls = useAnimation2();
+    const isControlledRef = useRef2(false);
+    useImperativeHandle2(ref, () => {
+      isControlledRef.current = true;
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal")
+      };
+    });
+    const handleMouseEnter = useCallback2(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+    const handleMouseLeave = useCallback2(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+    const wrap = useRef2(null);
+    const reduced = useReducedMotion2();
+    const [hosted, setHosted] = useState2(false);
+    useEffect2(() => {
+      const fake = {};
+      if (reduced) {
+        setHosted(true);
+        return;
+      }
+      if (active !== void 0) {
+        setHosted(true);
+        (active ? handleMouseEnter : handleMouseLeave)(fake);
+        return;
+      }
+      const host = wrap.current?.parentElement?.closest("button, a, [role=button], [role=menuitem], [role=tab], [role=switch], [role=radio], label");
+      setHosted(!!host);
+      if (!host) return;
+      const on = () => handleMouseEnter(fake);
+      const off = () => handleMouseLeave(fake);
+      host.addEventListener("pointerenter", on);
+      host.addEventListener("pointerleave", off);
+      return () => {
+        host.removeEventListener("pointerenter", on);
+        host.removeEventListener("pointerleave", off);
+      };
+    }, [active, reduced, handleMouseEnter, handleMouseLeave]);
+    return /* @__PURE__ */ jsx2(
+      "span",
+      {
+        ref: wrap,
+        className: cn("inline-grid size-6 shrink-0 place-items-center align-middle [&>svg]:size-full", className),
+        style: size ? { width: size, height: size, ...style } : style,
+        onMouseEnter: hosted ? void 0 : handleMouseEnter,
+        onMouseLeave: hosted ? void 0 : handleMouseLeave,
+        ...props,
+        children: /* @__PURE__ */ jsx2(
+          "svg",
+          {
+            fill: "none",
+            height: size,
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: strokeWidth ?? 2,
+            viewBox: "0 0 24 24",
+            width: size,
+            xmlns: "http://www.w3.org/2000/svg",
+            children: /* @__PURE__ */ jsxs2(
+              motion2.g,
+              {
+                animate: controls,
+                style: {
+                  transformOrigin: "12px 12px"
+                },
+                transition: {
+                  type: "spring",
+                  stiffness: 100,
+                  damping: 15,
+                  mass: 1
+                },
+                variants: {
+                  normal: {
+                    rotate: 0
+                  },
+                  animate: {
+                    rotate: 180
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsx2("path", { d: "M5 22h14" }),
+                  /* @__PURE__ */ jsx2("path", { d: "M5 2h14" }),
+                  /* @__PURE__ */ jsx2("path", { d: "M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22" }),
+                  /* @__PURE__ */ jsx2("path", { d: "M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2" })
+                ]
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+HourglassIcon.displayName = "HourglassIcon";
+
+// src/icons/user-round-plus.tsx
+import { motion as motion3, useAnimation as useAnimation3, useReducedMotion as useReducedMotion3 } from "motion/react";
+import { forwardRef as forwardRef3, useCallback as useCallback3, useEffect as useEffect3, useImperativeHandle as useImperativeHandle3, useRef as useRef3, useState as useState3 } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var VERTICAL_BAR_VARIANTS = {
+  normal: {
+    opacity: 1
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    transition: {
+      delay: 0.3,
+      duration: 0.2,
+      opacity: { duration: 0.1, delay: 0.3 }
+    }
+  }
+};
+var HORIZONTAL_BAR_VARIANTS = {
+  normal: {
+    opacity: 1
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    transition: {
+      delay: 0.6,
+      duration: 0.2,
+      opacity: { duration: 0.1, delay: 0.6 }
+    }
+  }
+};
+var UserRoundPlusIcon = forwardRef3(({ onMouseEnter, onMouseLeave, className, size, active, style, strokeWidth, ...props }, ref) => {
+  const controls = useAnimation3();
+  const isControlledRef = useRef3(false);
+  useImperativeHandle3(ref, () => {
+    isControlledRef.current = true;
+    return {
+      startAnimation: () => controls.start("animate"),
+      stopAnimation: () => controls.start("normal")
+    };
+  });
+  const handleMouseEnter = useCallback3(
+    (e) => {
+      if (isControlledRef.current) {
+        onMouseEnter?.(e);
+      } else {
+        controls.start("animate");
+      }
+    },
+    [controls, onMouseEnter]
+  );
+  const handleMouseLeave = useCallback3(
+    (e) => {
+      if (isControlledRef.current) {
+        onMouseLeave?.(e);
+      } else {
+        controls.start("normal");
+      }
+    },
+    [controls, onMouseLeave]
+  );
+  const wrap = useRef3(null);
+  const reduced = useReducedMotion3();
+  const [hosted, setHosted] = useState3(false);
+  useEffect3(() => {
+    const fake = {};
+    if (reduced) {
+      setHosted(true);
+      return;
+    }
+    if (active !== void 0) {
+      setHosted(true);
+      (active ? handleMouseEnter : handleMouseLeave)(fake);
+      return;
+    }
+    const host = wrap.current?.parentElement?.closest("button, a, [role=button], [role=menuitem], [role=tab], [role=switch], [role=radio], label");
+    setHosted(!!host);
+    if (!host) return;
+    const on = () => handleMouseEnter(fake);
+    const off = () => handleMouseLeave(fake);
+    host.addEventListener("pointerenter", on);
+    host.addEventListener("pointerleave", off);
+    return () => {
+      host.removeEventListener("pointerenter", on);
+      host.removeEventListener("pointerleave", off);
+    };
+  }, [active, reduced, handleMouseEnter, handleMouseLeave]);
+  return /* @__PURE__ */ jsx3(
+    "span",
+    {
+      ref: wrap,
+      className: cn("inline-grid size-6 shrink-0 place-items-center align-middle [&>svg]:size-full", className),
+      style: size ? { width: size, height: size, ...style } : style,
+      onMouseEnter: hosted ? void 0 : handleMouseEnter,
+      onMouseLeave: hosted ? void 0 : handleMouseLeave,
+      ...props,
+      children: /* @__PURE__ */ jsxs3(
+        motion3.svg,
+        {
+          fill: "none",
+          height: size,
+          initial: "normal",
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: strokeWidth ?? 2,
+          viewBox: "0 0 24 24",
+          width: size,
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ jsx3("path", { d: "M2 21a8 8 0 0 1 13.292-6" }),
+            /* @__PURE__ */ jsx3("circle", { cx: "10", cy: "8", r: "5" }),
+            /* @__PURE__ */ jsx3(
+              motion3.path,
+              {
+                animate: controls,
+                d: "M19 16v6",
+                initial: "normal",
+                variants: VERTICAL_BAR_VARIANTS
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              motion3.path,
+              {
+                animate: controls,
+                d: "M22 19h-6",
+                initial: "normal",
+                variants: HORIZONTAL_BAR_VARIANTS
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
+UserRoundPlusIcon.displayName = "UserRoundPlusIcon";
+
+// src/components/channel-mix/channel-mix.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var PALETTE = ["#4f46e5", "#38bdf8", "#34d399", "#f59e0b", "#f472b6"];
+var GOOD = "#269a5a";
+var BAD = "#d64545";
+var TICKS = 44;
+var DEFAULT_CHANNELS = [
+  { name: "Organic search", sessions: 21480, change: 3.4 },
+  { name: "Social", sessions: 15920, change: 1.2 },
+  { name: "Direct", sessions: 10810, change: -0.8 }
+];
+var DEFAULT_METRICS = [
+  {
+    label: "Cost per signup",
+    value: "$38.25",
+    change: -4.1,
+    higherIsBetter: false,
+    icon: "people"
+  },
+  {
+    label: "Days to convert",
+    value: "4.2 days",
+    change: 3.8,
+    higherIsBetter: false,
+    icon: "time"
+  },
+  { label: "Return on spend", value: "324%", change: 4.5, icon: "money" }
+];
+var ICONS = {
+  people: UserRoundPlusIcon,
+  time: HourglassIcon,
+  money: CircleDollarSignIcon
+};
+var GLIDE = [0.22, 1, 0.36, 1];
+var ROLL = { type: "spring", stiffness: 200, damping: 26 };
+var PILL = { type: "spring", stiffness: 500, damping: 40 };
+var DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+function Digit({ digit, still }) {
+  return /* @__PURE__ */ jsx4("span", { className: "relative inline-block h-[1em] w-[0.62em] overflow-hidden", children: /* @__PURE__ */ jsx4(
+    motion4.span,
+    {
+      className: "absolute inset-x-0 top-0 flex flex-col",
+      initial: false,
+      animate: { y: `${-digit * 10}%` },
+      transition: still ? { duration: 0 } : ROLL,
+      children: DIGITS.map((d) => /* @__PURE__ */ jsx4("span", { className: "flex h-[1em] items-center justify-center", children: d }, d))
+    }
+  ) });
+}
+function RollText({ text, still }) {
+  const chars = Array.from(text);
+  return /* @__PURE__ */ jsx4("span", { "aria-hidden": true, className: "inline-flex leading-none tabular-nums", children: chars.map((ch, i) => {
+    const key = chars.length - i;
+    return /\d/.test(ch) ? /* @__PURE__ */ jsx4(Digit, { digit: Number(ch), still }, key) : /* @__PURE__ */ jsx4("span", { className: "whitespace-pre", children: ch }, `${key}${ch}`);
+  }) });
+}
+var zeroed = (text) => text.replace(/\d/g, "0");
+function Change({
+  change,
+  good,
+  nudge
+}) {
+  const up = change >= 0;
+  const Arrow = up ? ArrowUpRightIcon : ArrowDownRightIcon;
+  return /* @__PURE__ */ jsxs4(
+    "span",
+    {
+      className: "inline-flex items-center gap-1 text-sm font-medium tabular-nums",
+      style: { color: good ? GOOD : BAD },
+      children: [
+        /* @__PURE__ */ jsx4(
+          motion4.span,
+          {
+            className: "grid",
+            animate: nudge ? { x: 2, y: up ? -2 : 2 } : { x: 0, y: 0 },
+            transition: { duration: 0.25, ease: GLIDE },
+            children: /* @__PURE__ */ jsx4(Arrow, { className: "size-3.5", strokeWidth: 2.5 })
+          }
+        ),
+        up ? "+" : "\u2212",
+        Math.abs(change).toFixed(1),
+        "%"
+      ]
+    }
+  );
+}
+var ChannelMix = React.forwardRef(
+  function ChannelMix2({
+    title = "Channel insights",
+    description = "See which channels bring people in, and what each one costs, as the week goes on.",
+    label = "Sessions this week",
+    info = "Visits to your site this week, split by where they came from.",
+    channels = DEFAULT_CHANNELS,
+    change = 2.1,
+    metrics = DEFAULT_METRICS,
+    onDetails,
+    locale = "en-US",
+    header = true,
+    className
+  }, ref) {
+    const still = !!useReducedMotion4();
+    const id = React.useId();
+    const root = React.useRef(null);
+    React.useImperativeHandle(ref, () => root.current);
+    const seen = useInView(root, { once: true, amount: 0.35 });
+    const shown = seen || still;
+    const [active, setActive] = React.useState(null);
+    const [row, setRow] = React.useState(null);
+    const [tip, setTip] = React.useState(false);
+    const [headHover, setHeadHover] = React.useState(false);
+    const [settled, setSettled] = React.useState(false);
+    const format = React.useMemo(() => new Intl.NumberFormat(locale), [locale]);
+    React.useEffect(() => {
+      if (!shown) return;
+      const t = window.setTimeout(() => setSettled(true), still ? 0 : 1400);
+      return () => window.clearTimeout(t);
+    }, [shown, still]);
+    const total = channels.reduce((s, c) => s + c.sessions, 0) || 1;
+    const colorOf = (i) => channels[i]?.color ?? PALETTE[i % PALETTE.length];
+    const owner = React.useMemo(() => {
+      const edges = [];
+      let run = 0;
+      for (const c of channels) edges.push(run += c.sessions / total);
+      return Array.from({ length: TICKS }, (_, i) => {
+        const at = (i + 0.5) / TICKS;
+        const k = edges.findIndex((e) => at <= e);
+        return k < 0 ? channels.length - 1 : k;
+      });
+    }, [channels, total]);
+    const focus = active === null ? null : channels[active];
+    const headline = focus ? format.format(focus.sessions) : format.format(total);
+    const headChange = focus ? focus.change : change;
+    const pickFromPointer = (e) => {
+      const r = e.currentTarget.getBoundingClientRect();
+      const i = Math.min(
+        TICKS - 1,
+        Math.max(0, Math.floor((e.clientX - r.left) / r.width * TICKS))
+      );
+      setActive(owner[i] ?? null);
+    };
+    return /* @__PURE__ */ jsxs4(
+      motion4.div,
+      {
+        ref: root,
+        initial: still ? false : { opacity: 0, y: 16, filter: "blur(8px)" },
+        animate: shown ? { opacity: 1, y: 0, filter: "blur(0px)" } : void 0,
+        transition: { duration: 0.6, ease: GLIDE },
+        className: cn(
+          "w-[400px] max-w-full overflow-hidden rounded-[32px] bg-white text-[#242423] shadow-[0_1px_2px_rgba(0,0,0,0.04),0_12px_32px_-16px_rgba(0,0,0,0.18)]",
+          className
+        ),
+        children: [
+          header && /* @__PURE__ */ jsxs4(
+            "div",
+            {
+              className: "bg-[#f1f1ef] px-6 pb-14 pt-6",
+              onPointerEnter: () => setHeadHover(true),
+              onPointerLeave: () => setHeadHover(false),
+              children: [
+                /* @__PURE__ */ jsx4("span", { className: "grid size-11 place-items-center rounded-2xl bg-white text-[#4f46e5] shadow-[0_1px_2px_rgba(0,0,0,0.06)]", children: /* @__PURE__ */ jsx4(
+                  ChartPieIcon,
+                  {
+                    className: "size-5",
+                    active: headHover || shown && !settled
+                  }
+                ) }),
+                /* @__PURE__ */ jsx4("h3", { className: "mt-6 text-xl font-semibold tracking-tight", children: title }),
+                /* @__PURE__ */ jsx4("p", { className: "mt-1.5 text-pretty text-sm leading-relaxed text-zinc-500", children: description })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs4(
+            motion4.div,
+            {
+              initial: still ? false : { opacity: 0, y: 12 },
+              animate: shown ? { opacity: 1, y: 0 } : void 0,
+              transition: { duration: 0.55, ease: GLIDE, delay: still ? 0 : 0.12 },
+              className: cn(
+                "relative bg-white px-6 pb-6 pt-6",
+                header && "-mt-8 rounded-t-[28px]"
+              ),
+              children: [
+                /* @__PURE__ */ jsxs4("div", { className: "flex items-start justify-between gap-3", children: [
+                  /* @__PURE__ */ jsxs4("div", { className: "min-w-0", children: [
+                    /* @__PURE__ */ jsxs4("div", { className: "relative flex h-5 items-center gap-1.5 text-sm text-zinc-500", children: [
+                      /* @__PURE__ */ jsx4(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsxs4(
+                        motion4.span,
+                        {
+                          initial: { opacity: 0, y: 6, filter: "blur(3px)" },
+                          animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+                          exit: { opacity: 0, y: -6, filter: "blur(3px)" },
+                          transition: { duration: still ? 0 : 0.22, ease: GLIDE },
+                          className: "flex items-center gap-1.5 whitespace-nowrap",
+                          children: [
+                            focus && /* @__PURE__ */ jsx4(
+                              "span",
+                              {
+                                className: "size-2 rounded-full",
+                                style: { background: colorOf(active) }
+                              }
+                            ),
+                            focus ? focus.name : label
+                          ]
+                        },
+                        focus?.name ?? "all"
+                      ) }),
+                      /* @__PURE__ */ jsxs4("span", { className: "relative", children: [
+                        /* @__PURE__ */ jsx4(
+                          "button",
+                          {
+                            type: "button",
+                            "aria-label": "About these numbers",
+                            "aria-describedby": tip ? `${id}-tip` : void 0,
+                            onPointerEnter: () => setTip(true),
+                            onPointerLeave: () => setTip(false),
+                            onFocus: () => setTip(true),
+                            onBlur: () => setTip(false),
+                            className: "grid size-5 cursor-help place-items-center rounded-full text-zinc-400 outline-none transition-colors hover:text-zinc-700 focus-visible:ring-2 focus-visible:ring-zinc-400",
+                            children: /* @__PURE__ */ jsx4(Info, { className: "size-3.5" })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx4(AnimatePresence, { children: tip && /* @__PURE__ */ jsx4(
+                          motion4.span,
+                          {
+                            id: `${id}-tip`,
+                            role: "tooltip",
+                            initial: { opacity: 0, y: -4, filter: "blur(4px)" },
+                            animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+                            exit: { opacity: 0, y: -2, filter: "blur(4px)" },
+                            transition: { duration: still ? 0 : 0.18, ease: GLIDE },
+                            className: "pointer-events-none absolute left-1/2 top-7 z-10 w-56 -translate-x-1/2 rounded-xl bg-[#242423] px-3 py-2 text-xs leading-relaxed text-white shadow-[0_8px_24px_-8px_rgba(0,0,0,0.35)]",
+                            children: info
+                          }
+                        ) })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs4("div", { className: "mt-2 flex flex-wrap items-baseline gap-x-3 gap-y-1", children: [
+                      /* @__PURE__ */ jsxs4(
+                        "span",
+                        {
+                          className: "text-[32px] font-semibold leading-none tracking-tight",
+                          "aria-live": "polite",
+                          children: [
+                            /* @__PURE__ */ jsx4("span", { className: "sr-only", children: headline }),
+                            /* @__PURE__ */ jsx4(
+                              RollText,
+                              {
+                                text: shown ? headline : zeroed(headline),
+                                still
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs4("span", { className: "flex items-center gap-1.5", children: [
+                        /* @__PURE__ */ jsx4(
+                          Change,
+                          {
+                            change: headChange,
+                            good: headChange >= 0,
+                            nudge: active !== null
+                          }
+                        ),
+                        /* @__PURE__ */ jsx4("span", { className: "text-sm text-zinc-400", children: "vs last week" })
+                      ] })
+                    ] })
+                  ] }),
+                  onDetails && /* @__PURE__ */ jsxs4(
+                    motion4.button,
+                    {
+                      type: "button",
+                      onClick: onDetails,
+                      whileTap: still ? void 0 : { scale: 0.95 },
+                      className: "group/btn flex h-9 shrink-0 cursor-pointer items-center gap-1 overflow-hidden rounded-full bg-[#242423]/[0.05] pl-3.5 pr-2.5 text-sm font-medium outline-none transition-colors hover:bg-[#242423]/[0.09] focus-visible:ring-2 focus-visible:ring-zinc-400",
+                      children: [
+                        "Details",
+                        /* @__PURE__ */ jsxs4("span", { className: "relative grid size-4 place-items-center overflow-hidden", children: [
+                          /* @__PURE__ */ jsx4(
+                            ArrowUpRightIcon,
+                            {
+                              className: "size-3.5 transition-transform duration-300 ease-out group-hover/btn:-translate-y-4 group-hover/btn:translate-x-4",
+                              strokeWidth: 2.5
+                            }
+                          ),
+                          /* @__PURE__ */ jsx4(
+                            ArrowUpRightIcon,
+                            {
+                              className: "absolute size-3.5 -translate-x-4 translate-y-4 transition-transform duration-300 ease-out group-hover/btn:translate-x-0 group-hover/btn:translate-y-0",
+                              strokeWidth: 2.5
+                            }
+                          )
+                        ] })
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx4(
+                  "div",
+                  {
+                    role: "img",
+                    "aria-label": channels.map(
+                      (c) => `${c.name} ${Math.round(c.sessions / total * 100)}%`
+                    ).join(", "),
+                    onPointerMove: pickFromPointer,
+                    onPointerLeave: () => setActive(null),
+                    className: "mt-6 flex h-10 cursor-crosshair items-end justify-between",
+                    children: owner.map((k, i) => {
+                      const lit = active === null || active === k;
+                      return /* @__PURE__ */ jsx4(
+                        motion4.span,
+                        {
+                          className: "h-full w-1 origin-bottom rounded-full",
+                          style: { background: colorOf(k) },
+                          initial: still ? false : { scaleY: 0.08, opacity: 0 },
+                          animate: shown ? { scaleY: lit ? 1 : 0.55, opacity: lit ? 1 : 0.22 } : { scaleY: 0.08, opacity: 0 },
+                          transition: still ? { duration: 0 } : settled ? {
+                            type: "spring",
+                            stiffness: 420,
+                            damping: 30,
+                            delay: active === null ? 0 : Math.abs(i - TICKS / 2) * 2e-3
+                          } : {
+                            duration: 0.6,
+                            ease: GLIDE,
+                            delay: 0.25 + i * 0.016
+                          }
+                        },
+                        i
+                      );
+                    })
+                  }
+                ),
+                /* @__PURE__ */ jsx4("div", { className: "mt-4 flex flex-wrap gap-1.5", children: channels.map((c, i) => {
+                  const on = active === i;
+                  return /* @__PURE__ */ jsxs4(
+                    motion4.button,
+                    {
+                      type: "button",
+                      "aria-pressed": on,
+                      onPointerEnter: () => setActive(i),
+                      onPointerLeave: () => setActive(null),
+                      onFocus: () => setActive(i),
+                      onBlur: () => setActive(null),
+                      initial: still ? false : { opacity: 0, y: 6 },
+                      animate: shown ? { opacity: active === null || on ? 1 : 0.5, y: 0 } : void 0,
+                      transition: {
+                        duration: 0.35,
+                        ease: GLIDE,
+                        delay: settled || still ? 0 : 0.6 + i * 0.06
+                      },
+                      className: "flex h-8 cursor-default items-center gap-2 rounded-full bg-[#242423]/[0.04] pl-2.5 pr-3 text-xs font-medium outline-none focus-visible:ring-2 focus-visible:ring-zinc-400",
+                      children: [
+                        /* @__PURE__ */ jsx4(
+                          motion4.span,
+                          {
+                            className: "size-2 rounded-full",
+                            style: { background: colorOf(i) },
+                            animate: { scale: on ? 1.5 : 1 },
+                            transition: { type: "spring", stiffness: 500, damping: 20 }
+                          }
+                        ),
+                        c.name,
+                        /* @__PURE__ */ jsxs4("span", { className: "tabular-nums text-zinc-400", children: [
+                          Math.round(c.sessions / total * 100),
+                          "%"
+                        ] })
+                      ]
+                    },
+                    c.name
+                  );
+                }) }),
+                /* @__PURE__ */ jsx4("div", { "aria-hidden": true, className: "-mx-6 my-5 h-px bg-[#242423]/[0.07]" }),
+                /* @__PURE__ */ jsxs4(
+                  "div",
+                  {
+                    role: "table",
+                    "aria-label": "Channel metrics",
+                    onPointerLeave: () => setRow(null),
+                    children: [
+                      /* @__PURE__ */ jsxs4(
+                        "div",
+                        {
+                          role: "row",
+                          className: "grid grid-cols-[1fr_auto_80px] gap-3 px-2 pb-2 text-xs text-zinc-400",
+                          children: [
+                            /* @__PURE__ */ jsx4("span", { role: "columnheader", children: "Metric" }),
+                            /* @__PURE__ */ jsx4("span", { role: "columnheader", className: "text-right", children: "Value" }),
+                            /* @__PURE__ */ jsx4("span", { role: "columnheader", className: "text-right", children: "Change" })
+                          ]
+                        }
+                      ),
+                      metrics.map((m, i) => {
+                        const Icon = ICONS[m.icon];
+                        const good = m.change >= 0 === (m.higherIsBetter ?? true);
+                        const on = row === i;
+                        return /* @__PURE__ */ jsxs4(
+                          motion4.div,
+                          {
+                            role: "row",
+                            tabIndex: 0,
+                            onPointerEnter: () => setRow(i),
+                            onFocus: () => setRow(i),
+                            onBlur: () => setRow(null),
+                            initial: still ? false : { opacity: 0, y: 8 },
+                            animate: shown ? { opacity: 1, y: 0 } : void 0,
+                            transition: {
+                              duration: 0.4,
+                              ease: GLIDE,
+                              delay: still ? 0 : 0.7 + i * 0.07
+                            },
+                            className: "relative grid h-11 grid-cols-[1fr_auto_80px] items-center gap-3 rounded-xl px-2 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-zinc-300",
+                            children: [
+                              on && /* @__PURE__ */ jsx4(
+                                motion4.span,
+                                {
+                                  layoutId: `${id}-row`,
+                                  className: "absolute inset-0 rounded-xl bg-[#242423]/[0.04]",
+                                  transition: still ? { duration: 0 } : PILL
+                                }
+                              ),
+                              /* @__PURE__ */ jsxs4(
+                                "span",
+                                {
+                                  role: "cell",
+                                  className: "relative flex min-w-0 items-center gap-2.5 text-sm font-medium",
+                                  children: [
+                                    /* @__PURE__ */ jsx4(
+                                      "span",
+                                      {
+                                        className: cn(
+                                          "grid size-5 place-items-center transition-colors",
+                                          on ? "text-[#242423]" : "text-zinc-400"
+                                        ),
+                                        children: /* @__PURE__ */ jsx4(Icon, { className: "size-[18px]", active: on })
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsx4("span", { className: "truncate", children: m.label })
+                                  ]
+                                }
+                              ),
+                              /* @__PURE__ */ jsxs4(
+                                "span",
+                                {
+                                  role: "cell",
+                                  className: "relative flex items-center justify-end text-sm tabular-nums text-zinc-600",
+                                  children: [
+                                    /* @__PURE__ */ jsx4("span", { className: "sr-only", children: m.value }),
+                                    /* @__PURE__ */ jsx4(
+                                      RollText,
+                                      {
+                                        text: shown ? m.value : zeroed(m.value),
+                                        still
+                                      }
+                                    )
+                                  ]
+                                }
+                              ),
+                              /* @__PURE__ */ jsx4("span", { role: "cell", className: "relative flex justify-end", children: /* @__PURE__ */ jsx4(Change, { change: m.change, good, nudge: on }) })
+                            ]
+                          },
+                          m.label
+                        );
+                      })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+export {
+  ChannelMix
+};