motion-brew 0.0.0-stage → 0.1.1

package/dist/chunk-T2TSMDP3.js

@@ -0,0 +1,1022 @@
+"use client";
+import {
+  BookmarkIcon
+} from "./chunk-VIR5NV5W.js";
+import {
+  FolderOpenIcon
+} from "./chunk-MUDKP3LK.js";
+import {
+  ChevronRightIcon
+} from "./chunk-XH6YNONO.js";
+import {
+  DeleteIcon
+} from "./chunk-JFTD3YAL.js";
+import {
+  CopyIcon
+} from "./chunk-M22UY764.js";
+import {
+  EyeIcon
+} from "./chunk-BN4MA5UY.js";
+import {
+  SparklesIcon
+} from "./chunk-YGONLKWH.js";
+import {
+  DownloadIcon
+} from "./chunk-IKM7EEYN.js";
+import {
+  CheckIcon
+} from "./chunk-JHT6RCGY.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/context-menu/context-menu.tsx
+import * as React from "react";
+import { createPortal } from "react-dom";
+import {
+  AnimatePresence,
+  motion as motion5,
+  useReducedMotion as useReducedMotion5
+} from "motion/react";
+
+// src/icons/clipboard-check.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 CHECK_VARIANTS = {
+  normal: {
+    pathLength: 1,
+    opacity: 0,
+    transition: {
+      duration: 0.3
+    }
+  },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: {
+      pathLength: { duration: 0.3, ease: "easeInOut" },
+      opacity: { duration: 0.3, ease: "easeInOut" }
+    }
+  }
+};
+var ClipboardCheckIcon = 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("rect", { height: "4", rx: "1", ry: "1", width: "8", x: "8", y: "2" }),
+            /* @__PURE__ */ jsx("path", { d: "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" }),
+            /* @__PURE__ */ jsx(
+              motion.path,
+              {
+                animate: controls,
+                d: "m9 14 2 2 4-4",
+                initial: "normal",
+                style: { transformOrigin: "center" },
+                variants: CHECK_VARIANTS
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
+ClipboardCheckIcon.displayName = "ClipboardCheckIcon";
+
+// src/icons/folder-input.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 ARROW_VARIANTS = {
+  normal: { x: 0 },
+  animate: { x: [0, 2, 0] }
+};
+var ARROW_TRANSITION = {
+  times: [0, 0.4, 1],
+  duration: 0.5
+};
+var FolderInputIcon = 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(
+      (event) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(event);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+    const handleMouseLeave = useCallback2(
+      (event) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(event);
+        } 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__ */ jsxs2(
+          "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__ */ jsx2("path", { d: "M2 9V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-1" }),
+              /* @__PURE__ */ jsxs2(
+                motion2.g,
+                {
+                  animate: controls,
+                  initial: "normal",
+                  transition: ARROW_TRANSITION,
+                  variants: ARROW_VARIANTS,
+                  children: [
+                    /* @__PURE__ */ jsx2("path", { d: "M2 13h10" }),
+                    /* @__PURE__ */ jsx2("path", { d: "m9 16 3-3-3-3" })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+FolderInputIcon.displayName = "FolderInputIcon";
+
+// src/icons/link.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 PATH_VARIANTS = {
+  initial: { pathLength: 1, pathOffset: 0, rotate: 0 },
+  animate: {
+    pathLength: [1, 0.97, 1, 0.97, 1],
+    pathOffset: [0, 0.05, 0, 0.05, 0],
+    rotate: [0, -5, 0],
+    transition: {
+      rotate: {
+        duration: 0.5
+      },
+      duration: 1,
+      times: [0, 0.2, 0.4, 0.6, 1],
+      ease: "easeInOut"
+    }
+  }
+};
+var LinkIcon = 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(
+          "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__ */ jsx3(
+                motion3.path,
+                {
+                  animate: controls,
+                  d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71",
+                  variants: PATH_VARIANTS
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                motion3.path,
+                {
+                  animate: controls,
+                  d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71",
+                  variants: PATH_VARIANTS
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+LinkIcon.displayName = "LinkIcon";
+
+// src/icons/square-pen.tsx
+import { motion as motion4, useAnimation as useAnimation4, useReducedMotion as useReducedMotion4 } from "motion/react";
+import { forwardRef as forwardRef4, useCallback as useCallback4, useEffect as useEffect4, useImperativeHandle as useImperativeHandle4, useRef as useRef4, useState as useState4 } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var PEN_VARIANTS = {
+  normal: {
+    rotate: 0,
+    x: 0,
+    y: 0
+  },
+  animate: {
+    rotate: [-0.5, 0.5, -0.5],
+    x: [0, -1, 1.5, 0],
+    y: [0, 1.5, -1, 0]
+  }
+};
+var SquarePenIcon = forwardRef4(
+  ({ onMouseEnter, onMouseLeave, className, size, active, style, strokeWidth, ...props }, ref) => {
+    const controls = useAnimation4();
+    const isControlledRef = useRef4(false);
+    useImperativeHandle4(ref, () => {
+      isControlledRef.current = true;
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal")
+      };
+    });
+    const handleMouseEnter = useCallback4(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+    const handleMouseLeave = useCallback4(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+    const wrap = useRef4(null);
+    const reduced = useReducedMotion4();
+    const [hosted, setHosted] = useState4(false);
+    useEffect4(() => {
+      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__ */ jsx4(
+      "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__ */ jsxs4(
+          "svg",
+          {
+            fill: "none",
+            height: size,
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: strokeWidth ?? 2,
+            style: { overflow: "visible" },
+            viewBox: "0 0 24 24",
+            width: size,
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ jsx4("path", { d: "M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
+              /* @__PURE__ */ jsx4(
+                motion4.path,
+                {
+                  animate: controls,
+                  d: "M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z",
+                  variants: PEN_VARIANTS
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+SquarePenIcon.displayName = "SquarePenIcon";
+
+// src/components/context-menu/context-menu.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var isItem = (i) => !("separator" in i);
+var DEFAULT_ITEMS = [
+  {
+    id: "ask",
+    label: "Ask AI about this",
+    icon: SparklesIcon,
+    feedback: "Asking AI"
+  },
+  { separator: true },
+  {
+    id: "open",
+    label: "Open",
+    icon: EyeIcon,
+    shortcut: "\u2318O",
+    feedback: "Opened"
+  },
+  {
+    id: "rename",
+    label: "Rename",
+    icon: SquarePenIcon,
+    shortcut: "F2",
+    feedback: "Renaming"
+  },
+  {
+    id: "duplicate",
+    label: "Duplicate",
+    icon: CopyIcon,
+    shortcut: "\u2318D",
+    feedback: "Duplicated"
+  },
+  {
+    id: "link",
+    label: "Copy link",
+    icon: LinkIcon,
+    shortcut: "\u2318L",
+    done: { label: "Link copied", icon: ClipboardCheckIcon },
+    feedback: "Link copied"
+  },
+  { id: "save", label: "Bookmark", icon: BookmarkIcon, feedback: "Bookmarked" },
+  {
+    id: "move",
+    label: "Move to",
+    icon: FolderInputIcon,
+    items: [
+      {
+        id: "design",
+        label: "Design",
+        icon: FolderOpenIcon,
+        feedback: "Moved to Design"
+      },
+      {
+        id: "marketing",
+        label: "Marketing",
+        icon: FolderOpenIcon,
+        feedback: "Moved to Marketing"
+      },
+      {
+        id: "archive",
+        label: "Archive",
+        icon: FolderOpenIcon,
+        feedback: "Moved to Archive"
+      }
+    ]
+  },
+  {
+    id: "download",
+    label: "Download",
+    icon: DownloadIcon,
+    shortcut: "\u2318S",
+    feedback: "Downloading"
+  },
+  { separator: true },
+  {
+    id: "delete",
+    label: "Delete",
+    icon: DeleteIcon,
+    shortcut: "\u232B",
+    danger: true,
+    confirm: "Click again to delete",
+    feedback: "Moved to trash"
+  }
+];
+var GLIDE = [0.22, 1, 0.36, 1];
+var PILL = { type: "spring", stiffness: 520, damping: 38 };
+var MENU_W = 232;
+var MENU = {
+  closed: { opacity: 0, scale: 0.9, filter: "blur(6px)" },
+  open: {
+    opacity: 1,
+    scale: 1,
+    filter: "blur(0px)",
+    transition: {
+      type: "spring",
+      stiffness: 460,
+      damping: 32,
+      staggerChildren: 0.025
+    }
+  },
+  exit: {
+    opacity: 0,
+    scale: 0.96,
+    filter: "blur(4px)",
+    transition: { duration: 0.14, ease: GLIDE }
+  }
+};
+var ROW = {
+  closed: { opacity: 0, y: 4 },
+  open: { opacity: 1, y: 0, transition: { duration: 0.25, ease: GLIDE } }
+};
+function FileCard() {
+  return /* @__PURE__ */ jsxs5("div", { className: "flex w-[280px] items-center gap-3 rounded-2xl bg-white p-3 shadow-[0_1px_2px_rgba(0,0,0,0.04),0_12px_32px_-16px_rgba(0,0,0,0.18)] dark:bg-zinc-900", children: [
+    /* @__PURE__ */ jsx5("span", { className: "grid size-11 shrink-0 place-items-center rounded-xl bg-[#242423]/[0.06] text-xs font-semibold text-zinc-500 dark:bg-white/[0.08]", children: "PDF" }),
+    /* @__PURE__ */ jsxs5("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx5("p", { className: "truncate text-sm font-medium text-[#242423] dark:text-zinc-100", children: "Q3 report.pdf" }),
+      /* @__PURE__ */ jsx5("p", { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "2.4 MB \xB7 Edited 2h ago" })
+    ] })
+  ] });
+}
+function Panel({
+  items,
+  hover,
+  setHover,
+  armed,
+  doneId,
+  openSub,
+  onPick,
+  onSub,
+  still,
+  pillId,
+  style,
+  origin,
+  onKey,
+  panelRef
+}) {
+  return /* @__PURE__ */ jsx5(
+    motion5.div,
+    {
+      ref: panelRef,
+      role: "menu",
+      tabIndex: -1,
+      onKeyDown: onKey,
+      variants: still ? void 0 : MENU,
+      initial: still ? false : "closed",
+      animate: "open",
+      exit: still ? void 0 : "exit",
+      style: { ...style, transformOrigin: origin, width: MENU_W },
+      onPointerLeave: () => setHover(null),
+      className: "fixed z-[1000] rounded-2xl bg-white p-1.5 text-[#242423] shadow-[0_1px_2px_rgba(0,0,0,0.06),0_16px_40px_-12px_rgba(0,0,0,0.25)] ring-1 ring-black/5 outline-none dark:bg-zinc-900 dark:text-zinc-100 dark:ring-white/10",
+      children: items.map((it, i) => {
+        if (!isItem(it)) {
+          return /* @__PURE__ */ jsx5(
+            motion5.div,
+            {
+              variants: ROW,
+              "aria-hidden": true,
+              className: "mx-2.5 my-1 h-px bg-[#242423]/[0.07] dark:bg-white/10"
+            },
+            `sep-${i}`
+          );
+        }
+        const on = hover === it.id || openSub === it.id;
+        const isArmed = armed === it.id;
+        const isDone = doneId === it.id;
+        const Icon = isDone && it.done?.icon ? it.done.icon : it.icon;
+        const text = isDone && it.done ? it.done.label : isArmed && it.confirm ? it.confirm : it.label;
+        return /* @__PURE__ */ jsxs5(
+          motion5.button,
+          {
+            type: "button",
+            role: "menuitem",
+            "data-id": it.id,
+            "aria-haspopup": it.items ? "menu" : void 0,
+            "aria-expanded": it.items ? openSub === it.id : void 0,
+            variants: ROW,
+            onPointerEnter: (e) => {
+              setHover(it.id);
+              if (it.items) onSub(it, e.currentTarget);
+            },
+            onFocus: () => setHover(it.id),
+            onClick: (e) => it.items ? onSub(it, e.currentTarget) : onPick(it, e.currentTarget),
+            whileTap: still ? void 0 : { scale: 0.98 },
+            className: cn(
+              "relative flex h-9 w-full cursor-pointer items-center gap-2.5 rounded-xl px-2.5 text-left text-sm font-medium outline-none",
+              it.danger && "text-[#d23f3f] dark:text-[#f07070]"
+            ),
+            children: [
+              on && /* @__PURE__ */ jsx5(
+                motion5.span,
+                {
+                  layoutId: pillId,
+                  className: cn(
+                    "absolute inset-0 rounded-xl",
+                    it.danger ? "bg-[#d23f3f]/[0.08]" : "bg-[#242423]/[0.05] dark:bg-white/[0.06]"
+                  ),
+                  transition: still ? { duration: 0 } : PILL
+                }
+              ),
+              isArmed && /* @__PURE__ */ jsx5(
+                motion5.span,
+                {
+                  "aria-hidden": true,
+                  className: "absolute inset-0 origin-left rounded-xl bg-[#d23f3f]/[0.1]",
+                  initial: still ? false : { scaleX: 0 },
+                  animate: { scaleX: 1 },
+                  transition: { duration: 0.35, ease: GLIDE }
+                }
+              ),
+              /* @__PURE__ */ jsx5(
+                "span",
+                {
+                  className: cn(
+                    "relative grid size-4 shrink-0 place-items-center transition-colors",
+                    it.danger ? "" : on ? "text-[#242423] dark:text-zinc-100" : "text-zinc-500 dark:text-zinc-400",
+                    isDone && "text-[#269a5a]"
+                  ),
+                  children: Icon && /* @__PURE__ */ jsx5(
+                    Icon,
+                    {
+                      className: "size-4",
+                      active: on || isDone || isArmed
+                    },
+                    isDone ? "done" : "icon"
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx5("span", { className: "relative h-5 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx5(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx5(
+                motion5.span,
+                {
+                  className: "block truncate leading-5",
+                  initial: still ? false : { y: 14, opacity: 0 },
+                  animate: { y: 0, opacity: 1 },
+                  exit: still ? void 0 : { y: -14, opacity: 0 },
+                  transition: { type: "spring", stiffness: 420, damping: 32 },
+                  children: text
+                },
+                text
+              ) }) }),
+              it.items ? /* @__PURE__ */ jsx5("span", { className: "relative grid size-4 place-items-center text-zinc-400", children: /* @__PURE__ */ jsx5(ChevronRightIcon, { className: "size-4", active: on }) }) : it.shortcut ? /* @__PURE__ */ jsx5("kbd", { className: "relative font-sans text-xs text-zinc-400", children: it.shortcut }) : null
+            ]
+          },
+          it.id
+        );
+      })
+    }
+  );
+}
+var ContextMenu = React.forwardRef(
+  function ContextMenu2({
+    items = DEFAULT_ITEMS,
+    children,
+    label = "File, right click for actions",
+    className
+  }, ref) {
+    const still = !!useReducedMotion5();
+    const id = React.useId();
+    const root = React.useRef(null);
+    React.useImperativeHandle(ref, () => root.current);
+    const menuRef = React.useRef(null);
+    const subRef = React.useRef(null);
+    const [at, setAt] = React.useState(null);
+    const [hover, setHover] = React.useState(null);
+    const [subHover, setSubHover] = React.useState(null);
+    const [sub, setSub] = React.useState(null);
+    const [armed, setArmed] = React.useState(null);
+    const [doneId, setDoneId] = React.useState(null);
+    const [toast, setToast] = React.useState(null);
+    const press = React.useRef(0);
+    const close = React.useCallback(() => {
+      setAt(null);
+      setHover(null);
+      setSub(null);
+      setSubHover(null);
+      setArmed(null);
+      setDoneId(null);
+    }, []);
+    const openAt = (clientX, clientY) => {
+      const x = clientX;
+      const y = clientY;
+      const h = items.filter(isItem).length * 36 + (items.length - items.filter(isItem).length) * 9 + 16;
+      setAt({
+        x,
+        y,
+        flipX: clientX + MENU_W + 8 > window.innerWidth,
+        flipY: clientY + h + 8 > window.innerHeight
+      });
+      setHover(null);
+      setSub(null);
+      setArmed(null);
+      setDoneId(null);
+      requestAnimationFrame(() => menuRef.current?.focus());
+    };
+    React.useEffect(() => {
+      if (!at) return;
+      const down = (e) => {
+        if (!menuRef.current?.contains(e.target) && !subRef.current?.contains(e.target))
+          close();
+      };
+      document.addEventListener("pointerdown", down);
+      window.addEventListener("scroll", close, {
+        passive: true,
+        capture: true
+      });
+      return () => {
+        document.removeEventListener("pointerdown", down);
+        window.removeEventListener("scroll", close, { capture: true });
+      };
+    }, [at, close]);
+    React.useEffect(() => {
+      if (!toast) return;
+      const t = window.setTimeout(() => setToast(null), 2200);
+      return () => window.clearTimeout(t);
+    }, [toast]);
+    const run = (it) => {
+      it.onSelect?.();
+      if (it.feedback) setToast({ key: Date.now(), text: it.feedback });
+    };
+    const pick = (it) => {
+      if (it.confirm && armed !== it.id) {
+        setArmed(it.id);
+        return;
+      }
+      if (it.done) {
+        setDoneId(it.id);
+        window.setTimeout(
+          () => {
+            run(it);
+            close();
+          },
+          still ? 0 : 750
+        );
+        return;
+      }
+      run(it);
+      close();
+    };
+    const openSub = (it, row) => {
+      const m = menuRef.current.getBoundingClientRect();
+      const r = row.getBoundingClientRect();
+      const left = m.right + MENU_W + 8 > window.innerWidth;
+      const subH = (it.items?.length ?? 0) * 36 + 16;
+      const top = Math.max(
+        8,
+        Math.min(r.top - 6, window.innerHeight - subH - 8)
+      );
+      setSub({
+        id: it.id,
+        top,
+        x: left ? m.left - MENU_W + 6 : m.right - 6,
+        left
+      });
+    };
+    const keys = (inSub) => (e) => {
+      const panel = (inSub ? subRef : menuRef).current;
+      if (!panel) return;
+      const rows = Array.from(
+        panel.querySelectorAll("[role=menuitem]")
+      );
+      const at2 = rows.indexOf(document.activeElement);
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        const n = e.key === "ArrowDown" ? (at2 + 1) % rows.length : (at2 - 1 + rows.length) % rows.length;
+        rows[at2 < 0 ? 0 : n]?.focus();
+      } else if (e.key === "ArrowRight" && !inSub && at2 >= 0) {
+        const it = items.filter(isItem).find((x) => x.id === rows[at2].dataset.id);
+        if (it?.items) {
+          e.preventDefault();
+          openSub(it, rows[at2]);
+          requestAnimationFrame(
+            () => subRef.current?.querySelector("[role=menuitem]")?.focus()
+          );
+        }
+      } else if ((e.key === "ArrowLeft" || e.key === "Escape") && inSub) {
+        e.preventDefault();
+        e.stopPropagation();
+        const owner = sub?.id;
+        setSub(null);
+        requestAnimationFrame(
+          () => menuRef.current?.querySelector(`[data-id="${owner}"]`)?.focus()
+        );
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        close();
+        root.current?.focus();
+      } else if (e.key === "Tab") {
+        e.preventDefault();
+      }
+    };
+    const subItems = sub ? items.filter(isItem).find((x) => x.id === sub.id)?.items ?? [] : [];
+    const pos = at ? {
+      left: Math.max(8, at.flipX ? at.x - MENU_W : at.x),
+      ...at.flipY ? { bottom: window.innerHeight - at.y } : { top: at.y }
+    } : {};
+    const origin = at ? `${at.flipY ? "bottom" : "top"} ${at.flipX ? "right" : "left"}` : "top left";
+    return /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        ref: root,
+        tabIndex: 0,
+        role: "button",
+        "aria-label": label,
+        "aria-haspopup": "menu",
+        "aria-expanded": !!at,
+        onContextMenu: (e) => {
+          e.preventDefault();
+          openAt(e.clientX, e.clientY);
+        },
+        onKeyDown: (e) => {
+          if (at) return;
+          if (e.shiftKey && e.key === "F10" || e.key === "ContextMenu") {
+            e.preventDefault();
+            const r = root.current.getBoundingClientRect();
+            openAt(r.left + r.width / 2, r.top + r.height / 2);
+          }
+        },
+        onPointerDown: (e) => {
+          if (e.pointerType !== "touch") return;
+          const { clientX, clientY } = e;
+          window.clearTimeout(press.current);
+          press.current = window.setTimeout(
+            () => openAt(clientX, clientY),
+            500
+          );
+        },
+        onPointerUp: () => window.clearTimeout(press.current),
+        onPointerCancel: () => window.clearTimeout(press.current),
+        className: cn(
+          "relative inline-block select-none rounded-2xl outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-4",
+          className
+        ),
+        children: [
+          children ?? /* @__PURE__ */ jsx5(FileCard, {}),
+          typeof document !== "undefined" && createPortal(
+            /* @__PURE__ */ jsxs5(Fragment, { children: [
+              /* @__PURE__ */ jsx5(AnimatePresence, { children: at && /* @__PURE__ */ jsx5(
+                Panel,
+                {
+                  panelRef: menuRef,
+                  items,
+                  hover,
+                  setHover: (h) => {
+                    setHover(h);
+                    const it = items.filter(isItem).find((x) => x.id === h);
+                    if (h && !it?.items) setSub(null);
+                    if (h !== armed) setArmed(null);
+                  },
+                  armed,
+                  doneId,
+                  openSub: sub?.id ?? null,
+                  onPick: (it) => pick(it),
+                  onSub: (it, el) => openSub(it, el),
+                  still,
+                  pillId: `${id}-pill`,
+                  style: pos,
+                  origin,
+                  onKey: keys(false)
+                },
+                "menu"
+              ) }),
+              /* @__PURE__ */ jsx5(AnimatePresence, { children: at && sub && /* @__PURE__ */ jsx5(
+                Panel,
+                {
+                  panelRef: subRef,
+                  items: subItems,
+                  hover: subHover,
+                  setHover: setSubHover,
+                  armed: null,
+                  doneId: null,
+                  openSub: null,
+                  onPick: (it) => pick(it),
+                  onSub: () => {
+                  },
+                  still,
+                  pillId: `${id}-subpill`,
+                  style: { left: sub.x, top: sub.top },
+                  origin: sub.left ? "top right" : "top left",
+                  onKey: keys(true)
+                },
+                `sub-${sub.id}`
+              ) })
+            ] }),
+            document.body
+          ),
+          /* @__PURE__ */ jsx5("div", { className: "pointer-events-none absolute inset-x-0 top-full mt-4 flex justify-center", children: /* @__PURE__ */ jsx5(AnimatePresence, { mode: "popLayout", children: toast && /* @__PURE__ */ jsxs5(
+            motion5.span,
+            {
+              role: "status",
+              initial: still ? false : { opacity: 0, y: 8, scale: 0.94 },
+              animate: { opacity: 1, y: 0, scale: 1 },
+              exit: still ? void 0 : { opacity: 0, y: -4, scale: 0.96 },
+              transition: { type: "spring", stiffness: 420, damping: 28 },
+              className: "inline-flex h-9 items-center gap-2 whitespace-nowrap rounded-full bg-[#242423] pl-3 pr-4 text-sm font-medium text-white dark:bg-zinc-100 dark:text-[#242423]",
+              children: [
+                /* @__PURE__ */ jsx5(CheckIcon, { className: "size-4", active: true }),
+                toast.text
+              ]
+            },
+            toast.key
+          ) }) })
+        ]
+      }
+    );
+  }
+);
+
+export {
+  ContextMenu
+};