2b:I[97408,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"StageProvider"] 2c:I[60401,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"DetailTabs"] 2d:T203f,"use client"; import { AnimatePresence, MotionConfig, motion } from "motion/react"; import { Check, ChevronRight } from "lucide-react"; import { ContextMenu as ContextMenuPrimitive } from "radix-ui"; import { createContext, useContext, useState, type ComponentProps } from "react"; import { cn } from "@/lib/utils"; type Variant = "solid" | "glass"; const MenuContext = createContext<{ open: boolean; variant: Variant }>({ open: false, variant: "solid" }); const SubContext = createContext(false); const SURFACE = { solid: "bg-white shadow-[0_12px_32px_-8px_rgb(0_0_0/0.18),0_2px_6px_rgb(0_0_0/0.05)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-[0_12px_32px_-8px_rgb(0_0_0/0.7)] dark:ring-white/[0.1]", glass: "bg-white/75 shadow-[0_12px_32px_-8px_rgb(0_0_0/0.2),inset_0_1px_0_rgb(255_255_255/0.6)] ring-1 ring-black/[0.08] backdrop-blur-xl backdrop-saturate-150 dark:bg-neutral-900/75 dark:shadow-[0_12px_32px_-8px_rgb(0_0_0/0.7),inset_0_1px_0_rgb(255_255_255/0.06)] dark:ring-white/[0.1]", } as const; const ITEM = cn( "relative flex h-9 cursor-default select-none items-center gap-2.5 rounded-[10px] px-2.5 text-[13.5px] text-neutral-700 outline-none transition-colors duration-75", "data-highlighted:bg-neutral-950/[0.05] data-highlighted:text-neutral-950 data-disabled:pointer-events-none data-disabled:opacity-40", "dark:text-neutral-300 dark:data-highlighted:bg-white/[0.08] dark:data-highlighted:text-white", "[&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-neutral-400 data-highlighted:[&_svg]:text-neutral-700 dark:data-highlighted:[&_svg]:text-neutral-200", ); const MOTION = { initial: { opacity: 0, scale: 0.96 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.98, transition: { duration: 0.1 } }, transition: { type: "spring", bounce: 0.14, duration: 0.26 }, } as const; export interface ContextMenuProps extends ComponentProps { /** solid: a white panel · glass: translucent with a background blur. */ variant?: Variant; } export function ContextMenu({ variant = "solid", onOpenChange, ...props }: ContextMenuProps) { const [open, setOpen] = useState(false); return ( { setOpen(next); onOpenChange?.(next); }} {...props} /> ); } export const ContextMenuTrigger = ContextMenuPrimitive.Trigger; export const ContextMenuGroup = ContextMenuPrimitive.Group; export const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup; export function ContextMenuContent({ className, children, ...props }: ComponentProps) { const { open, variant } = useContext(MenuContext); return ( {open && ( {children} )} ); } export interface ContextMenuItemProps extends ComponentProps { variant?: "default" | "destructive"; /** Indent the label to line up with checkbox and radio items. */ inset?: boolean; } export function ContextMenuItem({ variant = "default", inset, className, ...props }: ContextMenuItemProps) { return ( ); } export function ContextMenuCheckboxItem({ className, children, ...props }: ComponentProps) { return ( {children} ); } export function ContextMenuRadioItem({ className, children, ...props }: ComponentProps) { return ( {children} ); } export function ContextMenuLabel({ inset, className, ...props }: ComponentProps & { inset?: boolean }) { return ( ); } export function ContextMenuSeparator({ className, ...props }: ComponentProps) { return ; } export function ContextMenuShortcut({ className, ...props }: ComponentProps<"span">) { return ; } export function ContextMenuSub({ open: openProp, defaultOpen = false, onOpenChange, ...props }: ComponentProps) { const [uncontrolled, setUncontrolled] = useState(defaultOpen); const open = openProp ?? uncontrolled; return ( { if (openProp === undefined) setUncontrolled(next); onOpenChange?.(next); }} {...props} /> ); } export function ContextMenuSubTrigger({ className, children, ...props }: ComponentProps) { return ( {children} ); } export function ContextMenuSubContent({ className, children, ...props }: ComponentProps) { const open = useContext(SubContext); const { variant } = useContext(MenuContext); return ( {open && ( {children} )} ); } export default ContextMenu; 2e:T10974,

"use client";

import { AnimatePresence, MotionConfig, motion } from "motion/react";
import { Check, ChevronRight } from "lucide-react";
import { ContextMenu as ContextMenuPrimitive } from "radix-ui";
import { createContext, useContext, useState, type ComponentProps } from "react";
import { cn } from "@/lib/utils";

type Variant = "solid" | "glass";

const MenuContext = createContext<{ open: boolean; variant: Variant }>({ open: false, variant: "solid" });
const SubContext = createContext(false);

const SURFACE = {
  solid:
    "bg-white shadow-[0_12px_32px_-8px_rgb(0_0_0/0.18),0_2px_6px_rgb(0_0_0/0.05)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-[0_12px_32px_-8px_rgb(0_0_0/0.7)] dark:ring-white/[0.1]",
  glass:
    "bg-white/75 shadow-[0_12px_32px_-8px_rgb(0_0_0/0.2),inset_0_1px_0_rgb(255_255_255/0.6)] ring-1 ring-black/[0.08] backdrop-blur-xl backdrop-saturate-150 dark:bg-neutral-900/75 dark:shadow-[0_12px_32px_-8px_rgb(0_0_0/0.7),inset_0_1px_0_rgb(255_255_255/0.06)] dark:ring-white/[0.1]",
} as const;

const ITEM = cn(
  "relative flex h-9 cursor-default select-none items-center gap-2.5 rounded-[10px] px-2.5 text-[13.5px] text-neutral-700 outline-none transition-colors duration-75",
  "data-highlighted:bg-neutral-950/[0.05] data-highlighted:text-neutral-950 data-disabled:pointer-events-none data-disabled:opacity-40",
  "dark:text-neutral-300 dark:data-highlighted:bg-white/[0.08] dark:data-highlighted:text-white",
  "[&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-neutral-400 data-highlighted:[&_svg]:text-neutral-700 dark:data-highlighted:[&_svg]:text-neutral-200",
);

const MOTION = {
  initial: { opacity: 0, scale: 0.96 },
  animate: { opacity: 1, scale: 1 },
  exit: { opacity: 0, scale: 0.98, transition: { duration: 0.1 } },
  transition: { type: "spring", bounce: 0.14, duration: 0.26 },
} as const;

export interface ContextMenuProps extends ComponentProps<typeof ContextMenuPrimitive.Root> {
  /** solid: a white panel · glass: translucent with a background blur. */
  variant?: Variant;
}

export function ContextMenu({ variant = "solid", onOpenChange, ...props }: ContextMenuProps) {
  const [open, setOpen] = useState(false);
  return (
    <MenuContext.Provider value={{ open, variant }}>
      <ContextMenuPrimitive.Root
        onOpenChange={(next) => {
          setOpen(next);
          onOpenChange?.(next);
        }}
        {...props}
      />
    </MenuContext.Provider>
  );
}

export const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
export const ContextMenuGroup = ContextMenuPrimitive.Group;
export const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;

export function ContextMenuContent({ className, children, ...props }: ComponentProps<typeof ContextMenuPrimitive.Content>) {
  const { open, variant } = useContext(MenuContext);
  return (
    <AnimatePresence>
      {open && (
        <ContextMenuPrimitive.Portal forceMount>
          <MotionConfig reducedMotion="user">
            <ContextMenuPrimitive.Content forceMount asChild collisionPadding={8} {...props}>
              <motion.div
                {...MOTION}
                className={cn(
                  "z-50 min-w-[220px] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-2xl p-1.5 text-neutral-950 outline-none dark:text-white",
                  SURFACE[variant],
                  className,
                )}
              >
                {children}
              </motion.div>
            </ContextMenuPrimitive.Content>
          </MotionConfig>
        </ContextMenuPrimitive.Portal>
      )}
    </AnimatePresence>
  );
}

export interface ContextMenuItemProps extends ComponentProps<typeof ContextMenuPrimitive.Item> {
  variant?: "default" | "destructive";
  /** Indent the label to line up with checkbox and radio items. */
  inset?: boolean;
}

export function ContextMenuItem({ variant = "default", inset, className, ...props }: ContextMenuItemProps) {
  return (
    <ContextMenuPrimitive.Item
      className={cn(
        ITEM,
        inset && "pl-8",
        variant === "destructive" &&
          "text-red-600 data-highlighted:bg-red-500/[0.08] data-highlighted:text-red-700 dark:text-red-400 dark:data-highlighted:bg-red-500/15 dark:data-highlighted:text-red-300 [&_svg]:text-red-500 data-highlighted:[&_svg]:text-red-600",
        className,
      )}
      {...props}
    />
  );
}

export function ContextMenuCheckboxItem({ className, children, ...props }: ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
  return (
    <ContextMenuPrimitive.CheckboxItem className={cn(ITEM, "pl-8", className)} {...props}>
      <ContextMenuPrimitive.ItemIndicator className="absolute left-2.5 flex">
        <Check className="text-neutral-950! dark:text-white!" />
      </ContextMenuPrimitive.ItemIndicator>
      {children}
    </ContextMenuPrimitive.CheckboxItem>
  );
}

export function ContextMenuRadioItem({ className, children, ...props }: ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
  return (
    <ContextMenuPrimitive.RadioItem className={cn(ITEM, "pl-8", className)} {...props}>
      <ContextMenuPrimitive.ItemIndicator className="absolute left-3.5 flex">
        <span className="size-1.5 rounded-full bg-neutral-950 dark:bg-white" />
      </ContextMenuPrimitive.ItemIndicator>
      {children}
    </ContextMenuPrimitive.RadioItem>
  );
}

export function ContextMenuLabel({ inset, className, ...props }: ComponentProps<typeof ContextMenuPrimitive.Label> & { inset?: boolean }) {
  return (
    <ContextMenuPrimitive.Label
      className={cn("px-2.5 pb-1 pt-2 text-[11.5px] font-medium uppercase tracking-[0.06em] text-neutral-400", inset && "pl-8", className)}
      {...props}
    />
  );
}

export function ContextMenuSeparator({ className, ...props }: ComponentProps<typeof ContextMenuPrimitive.Separator>) {
  return <ContextMenuPrimitive.Separator className={cn("-mx-1.5 my-1.5 h-px bg-black/[0.06] dark:bg-white/[0.08]", className)} {...props} />;
}

export function ContextMenuShortcut({ className, ...props }: ComponentProps<"span">) {
  return <span className={cn("ml-auto pl-4 text-[12px] tracking-[0.08em] text-neutral-400", className)} {...props} />;
}

export function ContextMenuSub({ open: openProp, defaultOpen = false, onOpenChange, ...props }: ComponentProps<typeof ContextMenuPrimitive.Sub>) {
  const [uncontrolled, setUncontrolled] = useState(defaultOpen);
  const open = openProp ?? uncontrolled;
  return (
    <SubContext.Provider value={open}>
      <ContextMenuPrimitive.Sub
        open={open}
        onOpenChange={(next) => {
          if (openProp === undefined) setUncontrolled(next);
          onOpenChange?.(next);
        }}
        {...props}
      />
    </SubContext.Provider>
  );
}

export function ContextMenuSubTrigger({ className, children, ...props }: ComponentProps<typeof ContextMenuPrimitive.SubTrigger>) {
  return (
    <ContextMenuPrimitive.SubTrigger
      className={cn(ITEM, "data-[state=open]:bg-neutral-950/[0.05] data-[state=open]:text-neutral-950 dark:data-[state=open]:bg-white/[0.08] dark:data-[state=open]:text-white", className)}
      {...props}
    >
      {children}
      <ChevronRight className="ml-auto size-3.5!" />
    </ContextMenuPrimitive.SubTrigger>
  );
}

export function ContextMenuSubContent({ className, children, ...props }: ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
  const open = useContext(SubContext);
  const { variant } = useContext(MenuContext);
  return (
    <AnimatePresence>
      {open && (
        <ContextMenuPrimitive.Portal forceMount>
          <ContextMenuPrimitive.SubContent forceMount asChild sideOffset={6} alignOffset={-6} collisionPadding={8} {...props}>
            <motion.div
              {...MOTION}
              className={cn(
                "z-50 min-w-[180px] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-2xl p-1.5 text-neutral-950 outline-none dark:text-white",
                SURFACE[variant],
                className,
              )}
            >
              {children}
            </motion.div>
          </ContextMenuPrimitive.SubContent>
        </ContextMenuPrimitive.Portal>
      )}
    </AnimatePresence>
  );
}

export default ContextMenu;

2f:T77c,import { Copy, Folder, FolderInput, Link2, Pencil, Share, Trash2 } from "lucide-react"; import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, } from "@/components/scalar-ui/context-menu"; const area = "flex h-44 w-full max-w-[340px] select-none items-center justify-center rounded-[22px] border-[1.5px] border-dashed border-black/[0.12] text-[13.5px] text-neutral-500 dark:border-white/[0.14] dark:text-neutral-400"; export default function Demo() { return ( Right-click here Rename ⌘R Duplicate ⌘D Copy link Move to {["Design", "Engineering", "Archive"].map((f) => ( {f} ))} Share… Delete ⌫ ); } 30:T3d3c,

import { Copy, Folder, FolderInput, Link2, Pencil, Share, Trash2 } from "lucide-react";
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/components/scalar-ui/context-menu";

const area =
  "flex h-44 w-full max-w-[340px] select-none items-center justify-center rounded-[22px] border-[1.5px] border-dashed border-black/[0.12] text-[13.5px] text-neutral-500 dark:border-white/[0.14] dark:text-neutral-400";

export default function Demo() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className={area}>Right-click here</ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem>
          <Pencil />
          Rename
          <ContextMenuShortcut>⌘R</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          <Copy />
          Duplicate
          <ContextMenuShortcut>⌘D</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          <Link2 />
          Copy link
        </ContextMenuItem>
        <ContextMenuSub>
          <ContextMenuSubTrigger>
            <FolderInput />
            Move to
          </ContextMenuSubTrigger>
          <ContextMenuSubContent>
            {["Design", "Engineering", "Archive"].map((f) => (
              <ContextMenuItem key={f}>
                <Folder />
                {f}
              </ContextMenuItem>
            ))}
          </ContextMenuSubContent>
        </ContextMenuSub>
        <ContextMenuItem>
          <Share />
          Share…
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem variant="destructive">
          <Trash2 />
          Delete
          <ContextMenuShortcut>⌫</ContextMenuShortcut>
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}

31:T74a,import { Download, FileText, Pencil, Star, Trash2 } from "lucide-react"; import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger } from "@/components/scalar-ui/context-menu"; const files = [ { name: "Q3 report.pdf", size: "2.4 MB", date: "Oct 8" }, { name: "Roadmap.pdf", size: "860 KB", date: "Oct 2" }, { name: "Brand guide.pdf", size: "12 MB", date: "Sep 21" }, ]; export default function Example() { return (

{files.map((f) => ( {f.name} {f.size} {f.date} Download Add to favourites Rename Move to trash ))}

); } 32:T39ea,

import { Download, FileText, Pencil, Star, Trash2 } from "lucide-react";
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger } from "@/components/scalar-ui/context-menu";

const files = [
  { name: "Q3 report.pdf", size: "2.4 MB", date: "Oct 8" },
  { name: "Roadmap.pdf", size: "860 KB", date: "Oct 2" },
  { name: "Brand guide.pdf", size: "12 MB", date: "Sep 21" },
];

export default function Example() {
  return (
    <div className="w-full max-w-[400px] rounded-[22px] bg-white p-2 shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:ring-white/[0.08]">
      {files.map((f) => (
        <ContextMenu key={f.name}>
          <ContextMenuTrigger className="flex items-center gap-3 rounded-xl px-3 py-2.5 transition-colors data-[state=open]:bg-neutral-100 dark:data-[state=open]:bg-white/[0.06]">
            <FileText className="size-4 text-neutral-400" />
            <span className="flex-1 text-[13.5px] text-neutral-900 dark:text-white">{f.name}</span>
            <span className="text-[12.5px] text-neutral-500">{f.size}</span>
            <span className="w-12 text-right text-[12.5px] text-neutral-500">{f.date}</span>
          </ContextMenuTrigger>
          <ContextMenuContent>
            <ContextMenuItem>
              <Download />
              Download
            </ContextMenuItem>
            <ContextMenuItem>
              <Star />
              Add to favourites
            </ContextMenuItem>
            <ContextMenuItem>
              <Pencil />
              Rename
            </ContextMenuItem>
            <ContextMenuSeparator />
            <ContextMenuItem variant="destructive">
              <Trash2 />
              Move to trash
            </ContextMenuItem>
          </ContextMenuContent>
        </ContextMenu>
      ))}
    </div>
  );
}

33:T536,"use client"; import { useState } from "react"; import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuLabel, ContextMenuTrigger } from "@/components/scalar-ui/context-menu"; const area = "flex h-44 w-full max-w-[340px] select-none items-center justify-center rounded-[22px] border-[1.5px] border-dashed border-black/[0.12] text-[13.5px] text-neutral-500 dark:border-white/[0.14] dark:text-neutral-400"; export default function Example() { const [view, setView] = useState({ grid: true, rulers: false, snap: true }); const set = (key: keyof typeof view) => (checked: boolean) => setView((v) => ({ ...v, [key]: checked })); return ( Right-click the canvas View Show grid Show rulers Snap to grid ); } 34:T2fca,

"use client";

import { useState } from "react";
import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuLabel, ContextMenuTrigger } from "@/components/scalar-ui/context-menu";

const area =
  "flex h-44 w-full max-w-[340px] select-none items-center justify-center rounded-[22px] border-[1.5px] border-dashed border-black/[0.12] text-[13.5px] text-neutral-500 dark:border-white/[0.14] dark:text-neutral-400";

export default function Example() {
  const [view, setView] = useState({ grid: true, rulers: false, snap: true });
  const set = (key: keyof typeof view) => (checked: boolean) => setView((v) => ({ ...v, [key]: checked }));
  return (
    <ContextMenu>
      <ContextMenuTrigger className={area}>Right-click the canvas</ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuLabel inset>View</ContextMenuLabel>
        <ContextMenuCheckboxItem checked={view.grid} onCheckedChange={set("grid")}>
          Show grid
        </ContextMenuCheckboxItem>
        <ContextMenuCheckboxItem checked={view.rulers} onCheckedChange={set("rulers")}>
          Show rulers
        </ContextMenuCheckboxItem>
        <ContextMenuCheckboxItem checked={view.snap} onCheckedChange={set("snap")}>
          Snap to grid
        </ContextMenuCheckboxItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}

35:T4b2,"use client"; import { useState } from "react"; import { ContextMenu, ContextMenuContent, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuTrigger } from "@/components/scalar-ui/context-menu"; const area = "flex h-44 w-full max-w-[340px] select-none items-center justify-center rounded-[22px] border-[1.5px] border-dashed border-black/[0.12] text-[13.5px] text-neutral-500 dark:border-white/[0.14] dark:text-neutral-400"; export default function Example() { const [sort, setSort] = useState("modified"); return ( Right-click the file list Sort by Name Date modified Size Kind ); } 36:T24f2,

"use client";

import { useState } from "react";
import { ContextMenu, ContextMenuContent, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuTrigger } from "@/components/scalar-ui/context-menu";

const area =
  "flex h-44 w-full max-w-[340px] select-none items-center justify-center rounded-[22px] border-[1.5px] border-dashed border-black/[0.12] text-[13.5px] text-neutral-500 dark:border-white/[0.14] dark:text-neutral-400";

export default function Example() {
  const [sort, setSort] = useState("modified");
  return (
    <ContextMenu>
      <ContextMenuTrigger className={area}>Right-click the file list</ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuLabel inset>Sort by</ContextMenuLabel>
        <ContextMenuRadioGroup value={sort} onValueChange={setSort}>
          <ContextMenuRadioItem value="name">Name</ContextMenuRadioItem>
          <ContextMenuRadioItem value="modified">Date modified</ContextMenuRadioItem>
          <ContextMenuRadioItem value="size">Size</ContextMenuRadioItem>
          <ContextMenuRadioItem value="kind">Kind</ContextMenuRadioItem>
        </ContextMenuRadioGroup>
      </ContextMenuContent>
    </ContextMenu>
  );
}

37:T554,import { Copy, Scissors, Clipboard, Trash2 } from "lucide-react"; import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuTrigger } from "@/components/scalar-ui/context-menu"; export default function Example() { return ( Right-click here Cut ⌘X Copy ⌘C Paste ⌘V Delete ); } 38:T24a1,

import { Copy, Scissors, Clipboard, Trash2 } from "lucide-react";
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuTrigger } from "@/components/scalar-ui/context-menu";

export default function Example() {
  return (
    <ContextMenu variant="glass">
      <ContextMenuTrigger className="flex h-48 w-full max-w-[360px] select-none items-center justify-center rounded-[22px] bg-[radial-gradient(circle_at_30%_30%,#a78bfa,transparent_55%),radial-gradient(circle_at_75%_70%,#38bdf8,transparent_55%),linear-gradient(135deg,#f0abfc,#93c5fd)] text-[13.5px] font-medium text-white">
        Right-click here
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem>
          <Scissors />
          Cut
          <ContextMenuShortcut>⌘X</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          <Copy />
          Copy
          <ContextMenuShortcut>⌘C</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          <Clipboard />
          Paste
          <ContextMenuShortcut>⌘V</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem variant="destructive">
          <Trash2 />
          Delete
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}

29:["$","section","context-menu",{"id":"context-menu","aria-labelledby":"context-menu-title","className":"scroll-mt-24","children":[["$","header",null,{"className":"mb-5 flex flex-wrap items-start justify-between gap-4","children":[["$","div",null,{"className":"min-w-0 max-w-2xl","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h2",null,{"id":"context-menu-title","className":"sr-only","children":"Context Menu"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"radix-ui · motion · lucide-react"}]]}],false]}],["$","$L2b",null,{"children":["$","$L2c",null,{"slug":"context-menu","gated":{"unlocked":true,"files":[{"name":"context-menu.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"$2f","html":"$30"}],"examples":{"file-row":{"name":"file-row.tsx","code":"$31","html":"$32"},"checkbox-items":{"name":"checkbox-items.tsx","code":"$33","html":"$34"},"radio-items":{"name":"radio-items.tsx","code":"$35","html":"$36"},"glass":{"name":"glass.tsx","code":"$37","html":"$38"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add context-menu","shadcn":"npx shadcn@latest add https://scalarui.com/r/context-menu.json","shadcnConfig":"{\n \"registries\": {\n \"@scalar-ui\": {\n \"url\": \"https://scalarui.com/r/{name}.json\",\n \"headers\": {\n \"Authorization\": \"Bearer ${SCALAR_TOKEN}\"\n }\n }\n }\n}","mcpClaude":"claude mcp add scalar-ui \\\n -e SCALAR_TOKEN=slk_your_token \\\n -e SCALAR_URL=https://scalarui.com \\\n -- npx -y @scalardesign/mcp","mcpJson":"{\n \"mcpServers\": {\n \"scalar-ui\": {\n \"command\": \"npx\",\n \"args\": [\n \"-y\",\n \"@scalardesign/mcp\"\n ],\n \"env\": {\n \"SCALAR_TOKEN\": \"slk_your_token\",\n \"SCALAR_URL\": \"https://scalarui.com\"\n }\n }\n }\n}","npm":"npm install radix-ui motion lucide-react","origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L39","toolbar":"$L3a"}]}],["$L3b","$L3c","$L3d","$L3e"]]}]

Context Menus

Context Menus

File Rows

Checkbox Items

Radio Items

Glass