motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-SOW7S7ET.js

@@ -0,0 +1,1103 @@
+"use client";
+import {
+  LayoutGridIcon
+} from "./chunk-WWWKMU4Y.js";
+import {
+  CompassIcon
+} from "./chunk-BS4ZFJKW.js";
+import {
+  ChartLineIcon
+} from "./chunk-XDR4FO6Q.js";
+import {
+  XIcon
+} from "./chunk-7FQ4XU7E.js";
+import {
+  BookmarkIcon
+} from "./chunk-VIR5NV5W.js";
+import {
+  ArrowRightIcon
+} from "./chunk-H7XKIWHA.js";
+import {
+  TrendingUpIcon
+} from "./chunk-SSWKGVRI.js";
+import {
+  SearchIcon
+} from "./chunk-WOR2GMMN.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/search-modal/search-modal.tsx
+import * as React from "react";
+import { createPortal } from "react-dom";
+import {
+  AnimatePresence,
+  motion,
+  useInView,
+  useReducedMotion
+} from "motion/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_GROUPS = ["Products", "Shops", "Watchlist", "Keywords"];
+var DEFAULT_ITEMS = [
+  {
+    id: "p1",
+    group: "Products",
+    title: "Ceramic pour over kettle",
+    meta: "1,210 sales",
+    tint: "#e7efe4"
+  },
+  {
+    id: "p2",
+    group: "Products",
+    title: "Linen tote bag",
+    meta: "970 sales",
+    tint: "#f3ebe0"
+  },
+  {
+    id: "p3",
+    group: "Products",
+    title: "Walnut desk organiser",
+    meta: "640 sales",
+    tint: "#ece7e2"
+  },
+  {
+    id: "p4",
+    group: "Products",
+    title: "Matte steel water bottle",
+    meta: "2,140 sales",
+    tint: "#e3e9f2"
+  },
+  {
+    id: "p5",
+    group: "Products",
+    title: "Stoneware mug set",
+    meta: "388 sales",
+    tint: "#f1e6e6"
+  },
+  {
+    id: "s1",
+    group: "Shops",
+    title: "Northwind Goods",
+    meta: "12 products",
+    tint: "#e3e9f2"
+  },
+  {
+    id: "s2",
+    group: "Shops",
+    title: "Moonspirit Studio",
+    meta: "48 products",
+    tint: "#ece6f3"
+  },
+  {
+    id: "s3",
+    group: "Shops",
+    title: "Paper and Pine",
+    meta: "31 products",
+    tint: "#e7efe4"
+  },
+  {
+    id: "s4",
+    group: "Shops",
+    title: "Switchback Supply",
+    meta: "86 products",
+    tint: "#f3ebe0"
+  },
+  {
+    id: "w1",
+    group: "Watchlist",
+    title: "Kettle price drops",
+    meta: "3 alerts",
+    tint: "#f1e6e6"
+  },
+  {
+    id: "w2",
+    group: "Watchlist",
+    title: "Spring launch keywords",
+    meta: "12 terms",
+    tint: "#e3e9f2"
+  },
+  {
+    id: "k1",
+    group: "Keywords",
+    title: "pour over coffee",
+    meta: "8.2k searches",
+    tint: "#ece7e2"
+  },
+  {
+    id: "k2",
+    group: "Keywords",
+    title: "minimal desk setup",
+    meta: "5.1k searches",
+    tint: "#e7efe4"
+  },
+  {
+    id: "k3",
+    group: "Keywords",
+    title: "linen tote",
+    meta: "2.4k searches",
+    tint: "#f3ebe0"
+  },
+  {
+    id: "t1",
+    group: "Tags",
+    title: "handmade",
+    meta: "1.9k items",
+    tint: "#ece6f3"
+  },
+  {
+    id: "t2",
+    group: "Tags",
+    title: "stoneware",
+    meta: "740 items",
+    tint: "#f1e6e6"
+  },
+  {
+    id: "p6",
+    group: "Products",
+    title: "Gooseneck kettle, matte black",
+    meta: "1,880 sales",
+    tint: "#e3e9f2"
+  },
+  {
+    id: "p7",
+    group: "Products",
+    title: "Studio desk lamp",
+    meta: "512 sales",
+    tint: "#f3ebe0"
+  },
+  {
+    id: "p8",
+    group: "Products",
+    title: "Linen napkin set",
+    meta: "430 sales",
+    tint: "#e7efe4"
+  },
+  {
+    id: "p9",
+    group: "Products",
+    title: "Standing desk mat",
+    meta: "296 sales",
+    tint: "#ece7e2"
+  },
+  {
+    id: "s5",
+    group: "Shops",
+    title: "Studio North",
+    meta: "22 products",
+    tint: "#e3e9f2"
+  },
+  {
+    id: "s6",
+    group: "Shops",
+    title: "Linen and Loom",
+    meta: "64 products",
+    tint: "#f3ebe0"
+  },
+  {
+    id: "s7",
+    group: "Shops",
+    title: "Stoneware Co.",
+    meta: "19 products",
+    tint: "#f1e6e6"
+  },
+  {
+    id: "w3",
+    group: "Watchlist",
+    title: "Studio lamp restock",
+    meta: "1 alert",
+    tint: "#ece6f3"
+  },
+  {
+    id: "w4",
+    group: "Watchlist",
+    title: "Desk accessories trend",
+    meta: "6 terms",
+    tint: "#e7efe4"
+  },
+  {
+    id: "w5",
+    group: "Watchlist",
+    title: "Stoneware competitors",
+    meta: "4 shops",
+    tint: "#ece7e2"
+  }
+];
+var DEFAULT_ACTIONS = [
+  { id: "a1", label: "Product analytics", icon: "chart", key: "R" },
+  { id: "a2", label: "Shop analyser", icon: "grid", key: "Y" },
+  { id: "a3", label: "Keyword research", icon: "compass", key: "F" },
+  { id: "a4", label: "Trends", icon: "trend", key: "T" }
+];
+var ACTION_ICONS = {
+  chart: ChartLineIcon,
+  grid: LayoutGridIcon,
+  compass: CompassIcon,
+  trend: TrendingUpIcon,
+  bookmark: BookmarkIcon
+};
+var GLIDE = [0.22, 1, 0.36, 1];
+var POP = { type: "spring", stiffness: 520, damping: 30 };
+var SOFT = { type: "spring", stiffness: 340, damping: 34 };
+function Marked({
+  text,
+  query,
+  still
+}) {
+  const q = query.trim().toLowerCase();
+  if (!q) return /* @__PURE__ */ jsx(Fragment, { children: text });
+  const parts = [];
+  const lower = text.toLowerCase();
+  let at = 0;
+  let k = 0;
+  for (; ; ) {
+    const i = lower.indexOf(q, at);
+    if (i < 0) break;
+    if (i > at) parts.push(text.slice(at, i));
+    parts.push(
+      /* @__PURE__ */ jsxs("span", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            "aria-hidden": true,
+            className: "absolute -inset-x-0.5 inset-y-0 rounded-[4px] bg-[#f5d77a]/45",
+            initial: still ? false : { scaleX: 0 },
+            animate: { scaleX: 1 },
+            transition: { duration: 0.35, ease: GLIDE },
+            style: { originX: 0 }
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "relative", children: text.slice(i, i + q.length) })
+      ] }, k++)
+    );
+    at = i + q.length;
+  }
+  parts.push(text.slice(at));
+  return /* @__PURE__ */ jsx(Fragment, { children: parts });
+}
+function Key({ children }) {
+  return /* @__PURE__ */ jsx("span", { className: "grid h-6 min-w-6 place-items-center rounded-md bg-white px-1.5 text-[12px] font-medium text-[#242423]/60 shadow-[0_1px_2px_rgba(36,36,35,0.12)]", children });
+}
+function Count({
+  value,
+  still,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "relative inline-grid overflow-hidden tabular-nums",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
+        motion.span,
+        {
+          initial: still ? { opacity: 0 } : { y: "80%", opacity: 0 },
+          animate: { y: 0, opacity: 1 },
+          exit: still ? { opacity: 0 } : { y: "-80%", opacity: 0 },
+          transition: { duration: 0.25, ease: GLIDE },
+          children: value
+        },
+        value
+      ) })
+    }
+  );
+}
+var SearchModal = React.forwardRef(
+  function SearchModal2({
+    items = DEFAULT_ITEMS,
+    groups = DEFAULT_GROUPS,
+    defaultScope = "All",
+    recent = ["p1", "s2", "p2", "s3"],
+    actions = DEFAULT_ACTIONS,
+    placeholder = "Search products, shops and more",
+    examples = ["kettle", "studio", "linen", "desk", "stoneware"],
+    modal = false,
+    defaultOpen = false,
+    onSelect,
+    className
+  }, ref) {
+    const still = !!useReducedMotion();
+    const uid = React.useId();
+    const root = React.useRef(null);
+    React.useImperativeHandle(ref, () => root.current);
+    const input = React.useRef(null);
+    const body = React.useRef(null);
+    const seen = useInView(root, { once: true, amount: 0.3 });
+    const shown = seen || still || modal;
+    const [open, setOpen] = React.useState(!modal || defaultOpen);
+    const [expanded, setExpanded] = React.useState(modal);
+    const showCard = modal || expanded;
+    const [query, setQuery] = React.useState("");
+    const [scope, setScope] = React.useState(defaultScope);
+    const [cursor, setCursor] = React.useState(0);
+    const [focused, setFocused] = React.useState(false);
+    const [typing, setTyping] = React.useState(false);
+    const [hint, setHint] = React.useState(0);
+    const typingTimer = React.useRef(0);
+    React.useEffect(() => () => window.clearTimeout(typingTimer.current), []);
+    const scopes = ["All", ...groups];
+    const q = query.trim().toLowerCase();
+    const inScope = (i) => scope === "All" || i.group === scope;
+    const matches = React.useMemo(
+      () => q ? items.filter((i) => i.title.toLowerCase().includes(q)) : [],
+      [q, items]
+    );
+    const counts = React.useMemo(() => {
+      const c = { All: matches.length };
+      for (const g of groups)
+        c[g] = matches.filter((i) => i.group === g).length;
+      return c;
+    }, [matches, groups]);
+    const recentItems = recent.map((id) => items.find((i) => i.id === id)).filter((i) => !!i && inScope(i)).slice(0, 4);
+    const found = matches.filter(inScope);
+    const results = found.slice(0, 7);
+    const entries = q ? results.map((item) => ({
+      kind: "item",
+      key: `i-${item.id}`,
+      item
+    })) : [
+      ...recentItems.map((item) => ({
+        kind: "item",
+        key: `r-${item.id}`,
+        item
+      })),
+      ...actions.map((action) => ({
+        kind: "action",
+        key: `a-${action.id}`,
+        action
+      }))
+    ];
+    const at = entries.length ? Math.min(cursor, entries.length - 1) : -1;
+    const activeKey = at >= 0 ? entries[at].key : null;
+    React.useEffect(() => setCursor(0), [q, scope]);
+    React.useEffect(() => {
+      if (query || examples.length < 2 || still) return;
+      const t = window.setInterval(
+        () => setHint((h) => (h + 1) % examples.length),
+        2400
+      );
+      return () => window.clearInterval(t);
+    }, [query, examples.length, still]);
+    const example = examples.length ? examples[hint % examples.length] : void 0;
+    const [height, setHeight] = React.useState("auto");
+    React.useLayoutEffect(() => {
+      const el = body.current;
+      if (!el) return;
+      setHeight(el.offsetHeight);
+      if (typeof ResizeObserver === "undefined") return;
+      const ro = new ResizeObserver(() => setHeight(el.offsetHeight));
+      ro.observe(el);
+      return () => ro.disconnect();
+    }, [showCard]);
+    React.useEffect(() => {
+      if (modal || !expanded) return;
+      const away = (e) => {
+        if (!root.current?.contains(e.target)) setExpanded(false);
+      };
+      document.addEventListener("pointerdown", away);
+      return () => document.removeEventListener("pointerdown", away);
+    }, [modal, expanded]);
+    React.useEffect(() => {
+      if (!modal) return;
+      const onKey = (e) => {
+        if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
+          e.preventDefault();
+          setOpen((o) => !o);
+        }
+      };
+      window.addEventListener("keydown", onKey);
+      return () => window.removeEventListener("keydown", onKey);
+    }, [modal]);
+    React.useEffect(() => {
+      if (modal && open) requestAnimationFrame(() => input.current?.focus());
+    }, [modal, open]);
+    const choose = (entry) => {
+      if (!entry) return;
+      onSelect?.(entry.kind === "item" ? entry.item : entry.action);
+    };
+    const onKeyDown = (e) => {
+      if (!expanded) setExpanded(true);
+      if (e.key === "Tab" && !query && example && !e.shiftKey) {
+        e.preventDefault();
+        setQuery(example);
+      } else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        if (!entries.length) return;
+        setCursor(
+          (c) => (Math.min(c, entries.length - 1) + (e.key === "ArrowDown" ? 1 : entries.length - 1)) % entries.length
+        );
+      } else if ((e.key === "ArrowRight" || e.key === "ArrowLeft") && e.altKey) {
+        e.preventDefault();
+        const i = scopes.indexOf(scope);
+        setScope(
+          scopes[(i + (e.key === "ArrowRight" ? 1 : scopes.length - 1)) % scopes.length]
+        );
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        choose(entries[at]);
+      } else if (e.key === "Escape") {
+        if (query) setQuery("");
+        else if (modal) setOpen(false);
+        else if (expanded) setExpanded(false);
+        else return;
+        e.preventDefault();
+        e.stopPropagation();
+      } else if ((e.metaKey || e.ctrlKey) && e.key.length === 1) {
+        const action = actions.find(
+          (a) => a.key?.toLowerCase() === e.key.toLowerCase()
+        );
+        if (!action) return;
+        e.preventDefault();
+        choose({ kind: "action", key: `a-${action.id}`, action });
+      }
+    };
+    const enter = (delay) => ({
+      initial: still ? false : { opacity: 0, y: 10, filter: "blur(4px)" },
+      animate: shown ? { opacity: 1, y: 0, filter: "blur(0px)" } : void 0,
+      transition: { duration: 0.5, ease: GLIDE, delay: still ? 0 : delay }
+    });
+    const rise = (i) => ({
+      initial: still ? false : { opacity: 0, y: 8, filter: "blur(4px)" },
+      animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+      transition: { duration: 0.35, ease: GLIDE, delay: still ? 0 : i * 0.04 }
+    });
+    const optionProps = (entry, index) => ({
+      id: `${uid}-${entry.key}`,
+      role: "option",
+      "aria-selected": entry.key === activeKey,
+      onPointerEnter: () => setCursor(index),
+      onPointerDown: (e) => e.preventDefault(),
+      onClick: () => choose(entry)
+    });
+    const tail = (key, extra) => /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: activeKey === key ? /* @__PURE__ */ jsxs(
+      motion.span,
+      {
+        initial: still ? { opacity: 0 } : { opacity: 0, x: -6 },
+        animate: { opacity: 1, x: 0 },
+        exit: { opacity: 0, transition: { duration: 0.1 } },
+        transition: { duration: 0.25, ease: GLIDE },
+        className: "relative flex shrink-0 items-center gap-1 text-[12px] font-medium text-[#242423]/55",
+        children: [
+          "Open",
+          /* @__PURE__ */ jsx("span", { className: "grid h-5 min-w-5 place-items-center rounded-[6px] bg-white px-1 text-[12px] shadow-[0_1px_2px_rgba(36,36,35,0.12)]", children: "\u21B5" })
+        ]
+      },
+      "open"
+    ) : extra });
+    const top = q ? results[0] : void 0;
+    const rest = q ? results.slice(1) : [];
+    const panel = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: root,
+        onKeyDown: (e) => {
+          if (e.key !== "Escape" || e.target === input.current || !query)
+            return;
+          setQuery("");
+          input.current?.focus();
+          e.stopPropagation();
+        },
+        className: cn(
+          "relative w-[560px] max-w-full text-[#242423]",
+          !modal && className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              ...enter(0),
+              animate: shown ? {
+                opacity: 1,
+                y: 0,
+                filter: "blur(0px)",
+                boxShadow: focused ? "0 0 0 4px rgba(36,36,35,0.06), 0 1px 2px rgba(0,0,0,0.05), 0 16px 36px -18px rgba(0,0,0,0.22)" : "0 0 0 0px rgba(36,36,35,0), 0 1px 2px rgba(0,0,0,0.04), 0 12px 32px -16px rgba(0,0,0,0.18)"
+              } : void 0,
+              className: "relative flex h-14 items-center gap-3 rounded-[22px] bg-white pl-4 pr-2.5",
+              children: [
+                /* @__PURE__ */ jsx(
+                  SearchIcon,
+                  {
+                    className: "size-5 shrink-0 text-[#242423]/45",
+                    active: typing
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "relative h-full min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      ref: input,
+                      value: query,
+                      role: "combobox",
+                      "aria-expanded": showCard,
+                      "aria-controls": `${uid}-list`,
+                      "aria-activedescendant": activeKey ? `${uid}-${activeKey}` : void 0,
+                      "aria-label": "Search",
+                      placeholder: example ? "" : placeholder,
+                      onChange: (e) => {
+                        setQuery(e.target.value);
+                        setTyping(true);
+                        window.clearTimeout(typingTimer.current);
+                        typingTimer.current = window.setTimeout(
+                          () => setTyping(false),
+                          600
+                        );
+                      },
+                      onFocus: () => {
+                        setFocused(true);
+                        setExpanded(true);
+                      },
+                      onPointerDown: () => setExpanded(true),
+                      onBlur: () => setFocused(false),
+                      onKeyDown,
+                      className: "h-full w-full bg-transparent text-[16px] outline-none placeholder:text-[#242423]/35"
+                    }
+                  ),
+                  !query && example && /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      "aria-hidden": true,
+                      className: "pointer-events-none absolute inset-0 flex items-center overflow-hidden whitespace-nowrap text-[16px] text-[#242423]/35",
+                      children: [
+                        "Search for\xA0",
+                        /* @__PURE__ */ jsx("span", { className: "relative inline-grid overflow-hidden", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsxs(
+                          motion.span,
+                          {
+                            initial: still ? { opacity: 0 } : { y: "80%", opacity: 0, filter: "blur(3px)" },
+                            animate: { y: 0, opacity: 1, filter: "blur(0px)" },
+                            exit: still ? { opacity: 0 } : { y: "-80%", opacity: 0, filter: "blur(3px)" },
+                            transition: { duration: 0.4, ease: GLIDE },
+                            className: "text-[#242423]/55",
+                            children: [
+                              "\u201C",
+                              example,
+                              "\u201D"
+                            ]
+                          },
+                          example
+                        ) }) }),
+                        focused && /* @__PURE__ */ jsx("span", { className: "ml-2 rounded-md bg-[#242423]/[0.05] px-1.5 text-[12px] leading-5 text-[#242423]/45", children: "Tab" })
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: query ? /* @__PURE__ */ jsx(
+                  motion.button,
+                  {
+                    type: "button",
+                    "aria-label": "Clear search",
+                    onClick: () => {
+                      setQuery("");
+                      input.current?.focus();
+                    },
+                    initial: still ? { opacity: 0 } : { opacity: 0, scale: 0.6, rotate: -90 },
+                    animate: { opacity: 1, scale: 1, rotate: 0 },
+                    exit: still ? { opacity: 0 } : { opacity: 0, scale: 0.6, rotate: 90 },
+                    whileTap: still ? void 0 : { scale: 0.88 },
+                    transition: POP,
+                    className: "group grid size-9 cursor-pointer place-items-center rounded-full text-[#242423]/55 outline-none transition-colors hover:bg-[#242423]/[0.05] hover:text-[#242423] focus-visible:ring-2 focus-visible:ring-[#242423]/30",
+                    children: /* @__PURE__ */ jsx(XIcon, { className: "size-4" })
+                  },
+                  "clear"
+                ) : /* @__PURE__ */ jsxs(
+                  motion.span,
+                  {
+                    "aria-hidden": true,
+                    initial: still ? { opacity: 0 } : { opacity: 0, scale: 0.8 },
+                    animate: { opacity: 1, scale: 1 },
+                    exit: { opacity: 0, scale: 0.8 },
+                    transition: POP,
+                    className: "flex gap-1 pr-1",
+                    children: [
+                      /* @__PURE__ */ jsx(Key, { children: "\u2318" }),
+                      /* @__PURE__ */ jsx(Key, { children: "K" })
+                    ]
+                  },
+                  "keys"
+                ) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(AnimatePresence, { children: showCard && /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              initial: still ? { opacity: 0 } : { opacity: 0, y: -8, scale: 0.98, filter: "blur(6px)" },
+              animate: { opacity: 1, y: 0, scale: 1, filter: "blur(0px)" },
+              exit: still ? { opacity: 0 } : {
+                opacity: 0,
+                y: -6,
+                scale: 0.98,
+                filter: "blur(4px)",
+                transition: { duration: 0.18 }
+              },
+              transition: { type: "spring", stiffness: 380, damping: 32 },
+              style: { transformOrigin: "50% 0%" },
+              className: cn(
+                "mt-2 overflow-hidden rounded-[24px] bg-white shadow-[0_1px_2px_rgba(0,0,0,0.04),0_18px_44px_-18px_rgba(0,0,0,0.25)]",
+                modal ? "relative" : "absolute inset-x-0 top-full z-30"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "p-2", children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    role: "tablist",
+                    "aria-label": "Search in",
+                    className: "flex gap-0.5 overflow-x-auto rounded-full bg-[#242423]/[0.04] p-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+                    children: scopes.map((s) => {
+                      const on = s === scope;
+                      return /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          role: "tab",
+                          "aria-selected": on,
+                          onMouseDown: (e) => e.preventDefault(),
+                          onClick: () => setScope(s),
+                          className: cn(
+                            "relative flex h-8 shrink-0 cursor-pointer items-center gap-1.5 rounded-full px-3 text-[14px] outline-none transition-colors focus-visible:ring-2 focus-visible:ring-[#242423]/30",
+                            on ? "font-medium text-[#242423]" : "text-[#242423]/50 hover:text-[#242423]/80"
+                          ),
+                          children: [
+                            on && /* @__PURE__ */ jsx(
+                              motion.span,
+                              {
+                                layoutId: `${uid}-scope`,
+                                transition: still ? { duration: 0 } : POP,
+                                className: "absolute inset-0 rounded-full bg-white shadow-[0_1px_2px_rgba(0,0,0,0.08)]"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx("span", { className: "relative", children: s }),
+                            /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: q && /* @__PURE__ */ jsx(
+                              motion.span,
+                              {
+                                initial: still ? { opacity: 0 } : { opacity: 0, width: 0, scale: 0.6 },
+                                animate: { opacity: 1, width: "auto", scale: 1 },
+                                exit: still ? { opacity: 0 } : { opacity: 0, width: 0, scale: 0.6 },
+                                transition: POP,
+                                className: cn(
+                                  "relative grid h-5 min-w-5 place-items-center rounded-full px-1 text-[12px]",
+                                  counts[s] ? on ? "bg-[#242423] text-white" : "bg-[#242423]/[0.08] text-[#242423]/60" : "bg-transparent text-[#242423]/30"
+                                ),
+                                children: /* @__PURE__ */ jsx(Count, { value: counts[s] ?? 0, still })
+                              }
+                            ) })
+                          ]
+                        },
+                        s
+                      );
+                    })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    animate: { height },
+                    transition: still ? { duration: 0 } : SOFT,
+                    className: "overflow-hidden",
+                    children: /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        ref: body,
+                        id: `${uid}-list`,
+                        role: "listbox",
+                        "aria-label": "Results",
+                        className: "flow-root px-3 pb-3",
+                        children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: !q ? /* @__PURE__ */ jsxs(
+                          motion.div,
+                          {
+                            exit: { opacity: 0, transition: { duration: 0.12 } },
+                            children: [
+                              recentItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                                /* @__PURE__ */ jsx("p", { className: "px-1 pb-2 pt-2 text-[12px] font-medium text-[#242423]/45", children: "Jump back in" }),
+                                /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: recentItems.map((item, i) => {
+                                  const entry = entries[i];
+                                  const on = entry.key === activeKey;
+                                  return /* @__PURE__ */ jsxs(
+                                    motion.div,
+                                    {
+                                      ...rise(i),
+                                      ...optionProps(entry, i),
+                                      whileTap: still ? void 0 : { scale: 0.97 },
+                                      className: "group relative cursor-pointer rounded-2xl p-3",
+                                      style: {
+                                        backgroundColor: item.tint ?? "#f1f1ef"
+                                      },
+                                      children: [
+                                        /* @__PURE__ */ jsx(
+                                          motion.span,
+                                          {
+                                            "aria-hidden": true,
+                                            animate: { opacity: on ? 1 : 0 },
+                                            transition: { duration: 0.2 },
+                                            className: "absolute inset-0 rounded-2xl bg-[#242423]/[0.05]"
+                                          }
+                                        ),
+                                        /* @__PURE__ */ jsxs("div", { className: "relative flex items-start justify-between gap-2", children: [
+                                          /* @__PURE__ */ jsx(
+                                            motion.span,
+                                            {
+                                              animate: {
+                                                rotate: on && !still ? -6 : 0,
+                                                scale: on && !still ? 1.06 : 1
+                                              },
+                                              transition: POP,
+                                              className: "grid size-8 place-items-center rounded-[10px] bg-white/80 text-[14px] font-semibold text-[#242423]/70",
+                                              children: item.title[0].toUpperCase()
+                                            }
+                                          ),
+                                          tail(
+                                            entry.key,
+                                            /* @__PURE__ */ jsx(
+                                              "span",
+                                              {
+                                                className: "text-[12px] text-[#242423]/45",
+                                                children: item.group
+                                              },
+                                              "group"
+                                            )
+                                          )
+                                        ] }),
+                                        /* @__PURE__ */ jsx("p", { className: "relative mt-3 truncate text-[14px] font-medium", children: item.title }),
+                                        item.meta && /* @__PURE__ */ jsx("p", { className: "relative text-[12px] text-[#242423]/55", children: item.meta })
+                                      ]
+                                    },
+                                    entry.key
+                                  );
+                                }) })
+                              ] }),
+                              actions.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                                /* @__PURE__ */ jsx("p", { className: "px-1 pb-2 pt-4 text-[12px] font-medium text-[#242423]/45", children: "Shortcuts" }),
+                                /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: actions.map((action, j) => {
+                                  const index = recentItems.length + j;
+                                  const entry = entries[index];
+                                  const on = entry.key === activeKey;
+                                  const Icon = ACTION_ICONS[action.icon];
+                                  return /* @__PURE__ */ jsxs(
+                                    motion.div,
+                                    {
+                                      ...rise(index),
+                                      ...optionProps(entry, index),
+                                      whileTap: still ? void 0 : { scale: 0.95 },
+                                      className: cn(
+                                        "group relative flex h-9 cursor-pointer items-center gap-2 rounded-full pl-2.5 pr-3 text-[14px] transition-colors",
+                                        on ? "bg-[#242423]/[0.08]" : "bg-[#242423]/[0.04]"
+                                      ),
+                                      children: [
+                                        /* @__PURE__ */ jsx(
+                                          Icon,
+                                          {
+                                            className: "size-4 text-[#242423]/70",
+                                            active: on
+                                          }
+                                        ),
+                                        action.label,
+                                        /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: on && action.key && /* @__PURE__ */ jsxs(
+                                          motion.span,
+                                          {
+                                            initial: still ? { opacity: 0 } : { opacity: 0, width: 0 },
+                                            animate: {
+                                              opacity: 1,
+                                              width: "auto"
+                                            },
+                                            exit: still ? { opacity: 0 } : { opacity: 0, width: 0 },
+                                            transition: {
+                                              duration: 0.25,
+                                              ease: GLIDE
+                                            },
+                                            className: "overflow-hidden whitespace-nowrap text-[12px] text-[#242423]/45",
+                                            children: [
+                                              "\u2318",
+                                              action.key
+                                            ]
+                                          }
+                                        ) })
+                                      ]
+                                    },
+                                    entry.key
+                                  );
+                                }) })
+                              ] })
+                            ]
+                          },
+                          "idle"
+                        ) : top ? /* @__PURE__ */ jsxs(
+                          motion.div,
+                          {
+                            exit: { opacity: 0, transition: { duration: 0.12 } },
+                            children: [
+                              /* @__PURE__ */ jsx("p", { className: "px-1 pb-2 pt-2 text-[12px] font-medium text-[#242423]/45", children: "Top result" }),
+                              (() => {
+                                const entry = entries[0];
+                                const on = entry.key === activeKey;
+                                return /* @__PURE__ */ jsxs(
+                                  motion.div,
+                                  {
+                                    ...rise(0),
+                                    ...optionProps(entry, 0),
+                                    animate: {
+                                      opacity: 1,
+                                      y: on && !still ? -1 : 0,
+                                      filter: "blur(0px)"
+                                    },
+                                    whileTap: still ? void 0 : { scale: 0.985 },
+                                    className: "group relative flex cursor-pointer items-center gap-3 rounded-2xl p-3",
+                                    style: { backgroundColor: top.tint ?? "#f1f1ef" },
+                                    children: [
+                                      /* @__PURE__ */ jsx(
+                                        motion.span,
+                                        {
+                                          "aria-hidden": true,
+                                          animate: { opacity: on ? 1 : 0 },
+                                          transition: { duration: 0.2 },
+                                          className: "absolute inset-0 rounded-2xl bg-[#242423]/[0.05]"
+                                        }
+                                      ),
+                                      /* @__PURE__ */ jsx(
+                                        motion.span,
+                                        {
+                                          animate: {
+                                            rotate: on && !still ? -6 : 0,
+                                            scale: on && !still ? 1.06 : 1
+                                          },
+                                          transition: POP,
+                                          className: "relative grid size-11 shrink-0 place-items-center rounded-[14px] bg-white/80 text-[16px] font-semibold text-[#242423]/70",
+                                          children: top.title[0].toUpperCase()
+                                        }
+                                      ),
+                                      /* @__PURE__ */ jsxs("span", { className: "relative min-w-0 flex-1", children: [
+                                        /* @__PURE__ */ jsx("span", { className: "block truncate text-[16px] font-medium leading-6", children: /* @__PURE__ */ jsx(
+                                          Marked,
+                                          {
+                                            text: top.title,
+                                            query,
+                                            still
+                                          }
+                                        ) }),
+                                        /* @__PURE__ */ jsxs("span", { className: "block truncate text-[12px] text-[#242423]/55", children: [
+                                          top.group,
+                                          top.meta ? `, ${top.meta}` : ""
+                                        ] })
+                                      ] }),
+                                      tail(
+                                        entry.key,
+                                        /* @__PURE__ */ jsx(
+                                          "span",
+                                          {
+                                            className: "relative grid size-8 place-items-center rounded-full bg-white/80 text-[#242423]/60",
+                                            children: /* @__PURE__ */ jsx(ArrowRightIcon, { className: "size-4" })
+                                          },
+                                          "arrow"
+                                        )
+                                      )
+                                    ]
+                                  },
+                                  entry.key
+                                );
+                              })(),
+                              rest.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                                /* @__PURE__ */ jsx("p", { className: "px-1 pb-1 pt-4 text-[12px] font-medium text-[#242423]/45", children: "More results" }),
+                                rest.map((item, j) => {
+                                  const index = j + 1;
+                                  const entry = entries[index];
+                                  const on = entry.key === activeKey;
+                                  return /* @__PURE__ */ jsxs(
+                                    motion.div,
+                                    {
+                                      ...rise(index),
+                                      ...optionProps(entry, index),
+                                      className: "group relative flex h-11 cursor-pointer items-center gap-3 rounded-xl px-2",
+                                      children: [
+                                        on && /* @__PURE__ */ jsx(
+                                          motion.span,
+                                          {
+                                            layoutId: `${uid}-row`,
+                                            transition: still ? { duration: 0 } : POP,
+                                            className: "absolute inset-0 rounded-xl bg-[#242423]/[0.04]"
+                                          }
+                                        ),
+                                        /* @__PURE__ */ jsx(
+                                          "span",
+                                          {
+                                            className: "relative size-2 shrink-0 rounded-full",
+                                            style: {
+                                              backgroundColor: item.tint ? `color-mix(in srgb, ${item.tint} 45%, #242423)` : "#a3a3a0"
+                                            }
+                                          }
+                                        ),
+                                        /* @__PURE__ */ jsx("span", { className: "relative min-w-0 flex-1 truncate text-[14px]", children: /* @__PURE__ */ jsx(
+                                          Marked,
+                                          {
+                                            text: item.title,
+                                            query,
+                                            still
+                                          }
+                                        ) }),
+                                        tail(
+                                          entry.key,
+                                          /* @__PURE__ */ jsxs(
+                                            "span",
+                                            {
+                                              className: "relative flex shrink-0 items-center gap-2 text-[12px] text-[#242423]/45",
+                                              children: [
+                                                item.meta && /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: item.meta }),
+                                                /* @__PURE__ */ jsx("span", { className: "rounded-full bg-[#242423]/[0.05] px-2 py-0.5", children: item.group })
+                                              ]
+                                            },
+                                            "tag"
+                                          )
+                                        )
+                                      ]
+                                    },
+                                    entry.key
+                                  );
+                                })
+                              ] })
+                            ]
+                          },
+                          `found-${scope}`
+                        ) : /* @__PURE__ */ jsxs(
+                          motion.div,
+                          {
+                            initial: still ? { opacity: 0 } : { opacity: 0, y: 8, filter: "blur(4px)" },
+                            animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+                            exit: { opacity: 0 },
+                            transition: { duration: 0.35, ease: GLIDE },
+                            className: "flex flex-col items-center px-6 pb-4 pt-8 text-center",
+                            children: [
+                              /* @__PURE__ */ jsx("span", { className: "grid size-11 place-items-center rounded-full bg-[#242423]/[0.05] text-[#242423]/60", children: /* @__PURE__ */ jsx(SearchIcon, { className: "size-5", active: true }) }),
+                              /* @__PURE__ */ jsxs("p", { className: "mt-3 text-[14px] font-medium", children: [
+                                "Nothing for \u201C",
+                                query.trim(),
+                                "\u201D",
+                                scope !== "All" ? ` in ${scope}` : ""
+                              ] }),
+                              /* @__PURE__ */ jsx("p", { className: "mt-1 text-[12px] text-[#242423]/50", children: scope !== "All" && counts.All ? /* @__PURE__ */ jsxs(
+                                "button",
+                                {
+                                  type: "button",
+                                  onClick: () => setScope("All"),
+                                  className: "cursor-pointer underline decoration-[#242423]/25 underline-offset-2 hover:text-[#242423]",
+                                  children: [
+                                    "Search everything instead (",
+                                    counts.All,
+                                    ")"
+                                  ]
+                                }
+                              ) : "Try another word." })
+                            ]
+                          },
+                          "none"
+                        ) })
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-t border-[#242423]/[0.06] px-5 py-2.5 text-[12px] text-[#242423]/45", children: [
+                  /* @__PURE__ */ jsx("span", { children: q ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    found.length > results.length ? "Showing " : "",
+                    /* @__PURE__ */ jsx(
+                      Count,
+                      {
+                        value: results.length,
+                        still,
+                        className: "font-medium text-[#242423]/70"
+                      }
+                    ),
+                    found.length > results.length ? ` of ${found.length}` : "",
+                    " ",
+                    found.length === 1 ? "result" : "results",
+                    scope !== "All" ? ` in ${scope}` : ""
+                  ] }) : "Type to search, Tab for the example" }),
+                  /* @__PURE__ */ jsxs("span", { children: [
+                    "\u2191 \u2193 to move, \u21B5 to open, Esc to ",
+                    modal ? "close" : "clear"
+                  ] })
+                ] })
+              ]
+            },
+            "card"
+          ) }),
+          /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: q ? `${found.length} results` : "" })
+        ]
+      }
+    );
+    if (!modal) return panel;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setOpen(true),
+          className: cn(
+            "group flex h-11 w-72 max-w-full cursor-pointer items-center gap-2.5 rounded-full bg-white pl-4 pr-2 text-[14px] text-[#242423]/45 shadow-[0_1px_2px_rgba(0,0,0,0.04),0_12px_32px_-16px_rgba(0,0,0,0.18)] outline-none focus-visible:ring-2 focus-visible:ring-[#242423]/30",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsx(SearchIcon, { className: "size-4" }),
+            /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: "Search" }),
+            /* @__PURE__ */ jsxs("span", { className: "flex gap-1", children: [
+              /* @__PURE__ */ jsx(Key, { children: "\u2318" }),
+              /* @__PURE__ */ jsx(Key, { children: "K" })
+            ] })
+          ]
+        }
+      ),
+      typeof document !== "undefined" && createPortal(
+        /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            className: "fixed inset-0 z-[100] flex items-start justify-center px-4 pt-[12vh]",
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            exit: { opacity: 0 },
+            transition: { duration: 0.2 },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "aria-hidden": true,
+                  onClick: () => setOpen(false),
+                  className: "absolute inset-0 bg-[#242423]/20 backdrop-blur-sm"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  role: "dialog",
+                  "aria-modal": true,
+                  "aria-label": "Search",
+                  initial: still ? false : {
+                    opacity: 0,
+                    y: -12,
+                    scale: 0.97,
+                    filter: "blur(6px)"
+                  },
+                  animate: {
+                    opacity: 1,
+                    y: 0,
+                    scale: 1,
+                    filter: "blur(0px)"
+                  },
+                  exit: still ? { opacity: 0 } : {
+                    opacity: 0,
+                    y: -8,
+                    scale: 0.98,
+                    filter: "blur(4px)"
+                  },
+                  transition: { duration: 0.3, ease: GLIDE },
+                  className: "relative",
+                  children: panel
+                }
+              )
+            ]
+          }
+        ) }),
+        document.body
+      )
+    ] });
+  }
+);
+
+export {
+  SearchModal
+};