2c:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2d:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2e:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 2f:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 30:T1c76,"use client"; import type { ComponentProps, ReactElement, ReactNode } from "react"; import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, } from "@/components/ui/context-menu"; import { Kbd } from "@/components/ui/kbd"; import { cn } from "@/lib/utils"; import { useLongPress } from "../_shared/use-long-press"; /* ---- the menu description ----------------------------------------------------------------- */ export type MenuRadioOption = { value: string; label: ReactNode; disabled?: boolean }; /** One row of a context menu. Menus are plain data, so they can be built, filtered and shared. */ export type ContextMenuNode = | { type: "item"; id: string; label: ReactNode; icon?: ReactNode; /** Keys shown at the end of the row, e.g. ["⌘", "C"]. Hidden on touch. */ shortcut?: string[]; disabled?: boolean; destructive?: boolean; onSelect?: () => void; } | { type: "checkbox"; id: string; label: ReactNode; icon?: ReactNode; checked?: boolean; defaultChecked?: boolean; onCheckedChange?: (checked: boolean) => void; disabled?: boolean; } | { type: "radio"; /** Group id. Items inside announce as one group. */ id: string; label?: ReactNode; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; options: MenuRadioOption[]; } | { type: "sub"; id: string; label: ReactNode; icon?: ReactNode; disabled?: boolean; items: ContextMenuNode[] } | { type: "group"; id: string; label?: ReactNode; items: ContextMenuNode[] } | { type: "separator"; id?: string }; function Shortcut({ keys }: { keys: string[] }) { return ( {keys.map((k) => ( {k} ))} ); } function renderNodes(nodes: ContextMenuNode[], onAction?: (id: string) => void): ReactNode { return nodes.map((node, i) => { switch (node.type) { case "separator": return ; case "item": return ( { node.onSelect?.(); onAction?.(node.id); }} > {node.icon} {node.label} {node.shortcut ? : null} ); case "checkbox": return ( { node.onCheckedChange?.(next); onAction?.(node.id); }} > {node.icon} {node.label} ); case "radio": return ( {node.label ? {node.label} : null} { node.onValueChange?.(next as string); onAction?.(`${node.id}:${next as string}`); }} > {node.options.map((o) => ( {o.label} ))} ); case "sub": return ( {node.icon} {node.label} {renderNodes(node.items, onAction)} ); case "group": return ( {node.label ? {node.label} : null} {renderNodes(node.items, onAction)} ); } }); } /* ---- the surface -------------------------------------------------------------------------- */ export type ContextMenuAreaProps = { /** The menu, as data. */ items: ContextMenuNode[]; /** Fires with the item id (`group:value` for a radio choice) after any item or choice. */ onAction?: (id: string) => void; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; disabled?: boolean; /** Swap the element the area renders (default a div). Base UI `render`. */ render?: ReactElement; /** Keyboard users reach the menu with the Menu key or Shift+F10 when the area takes focus. Default true. */ focusable?: boolean; /** Class for the content panel. */ contentClassName?: string; /** Accessible name for the area when it takes focus. */ "aria-label"?: string; className?: string; children?: ReactNode; } & Pick, "align" | "side">; /** * Right click, long press (500ms, canceled by movement) or the Menu key opens the menu at the * pointer. While a touch hold is pending the area dips to 0.99 as a hint; `data-pressing` and * `data-popup-open` are on the root for your own styling. */ export function ContextMenuArea({ items, onAction, open, defaultOpen, onOpenChange, disabled, render, focusable = true, contentClassName, className, children, align, side, ...rest }: ContextMenuAreaProps) { const { pressing, bind } = useLongPress({ disabled }); return ( {children} {renderNodes(items, onAction)} ); } export { renderNodes as renderContextMenuNodes }; 31:Taaa,"use client"; import { useCallback, useEffect, useRef, useState, type PointerEvent, type MouseEvent } from "react"; type Point = { x: number; y: number }; /** * Touch and pen press-and-hold. Fires `onLongPress` after `delay` (500ms by default) and cancels when * the pointer moves more than `tolerance` px, lifts, or the browser takes the gesture over (scroll * start fires pointercancel). Mouse is ignored on purpose: a mouse has a right click. * * `pressing` is true while the hold is pending, for a press hint. Spread `bind` on the surface and * give it `touch-action: manipulation` (the browser keeps pan and pinch, drops double-tap zoom) plus * `-webkit-touch-callout: none` so the native callout does not compete. */ export function useLongPress({ onLongPress, delay = 500, tolerance = 10, disabled = false, }: { onLongPress?: (point: Point) => void; delay?: number; tolerance?: number; disabled?: boolean; }) { const timer = useRef(undefined); const origin = useRef(null); const fired = useRef(false); const latest = useRef(onLongPress); const [pressing, setPressing] = useState(false); useEffect(() => { latest.current = onLongPress; }); const cancel = useCallback(() => { window.clearTimeout(timer.current); timer.current = undefined; origin.current = null; setPressing(false); }, []); useEffect(() => cancel, [cancel]); const bind = { onPointerDown(e: PointerEvent) { if (disabled || e.pointerType === "mouse" || !e.isPrimary) return; fired.current = false; const point = { x: e.clientX, y: e.clientY }; origin.current = point; setPressing(true); window.clearTimeout(timer.current); timer.current = window.setTimeout(() => { fired.current = true; origin.current = null; setPressing(false); latest.current?.(point); }, delay); }, onPointerMove(e: PointerEvent) { const start = origin.current; if (!start) return; if (Math.hypot(e.clientX - start.x, e.clientY - start.y) > tolerance) cancel(); }, onPointerUp: cancel, onPointerCancel: cancel, onPointerLeave: cancel, onContextMenu(e: MouseEvent) { // iOS and Android raise a contextmenu after a long press; the sheet or menu already opened. if (fired.current) e.preventDefault(); }, onClickCapture(e: MouseEvent) { // The lift that ends a long press must not also click what is underneath. if (fired.current) { fired.current = false; e.preventDefault(); e.stopPropagation(); } }, }; return { pressing, bind }; } 32:T2db3,"use client"; import { useState, type ReactNode } from "react"; import { IconArrowsMove, IconClipboard, IconCopy, IconCut, IconDownload, IconEye, IconFile, IconFileText, IconFolder, IconLayoutGrid, IconLink, IconMovie, IconPencil, IconPhoto, IconShare3, IconStar, IconStarFilled, IconTable, IconTrash, IconUsers, } from "@tabler/icons-react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import { DemoPage, DemoSection } from "../../_shared/variant-frame"; import { PortalScope } from "../../pdp/_shared/portal-scope"; import { fileRows, moveTargets, sharePeople, sortOptions, type FileKind, type FileRow } from "../_fixtures"; import { ContextMenuArea, type ContextMenuNode } from "./context-menu"; const kindIcon: Record = { folder: , image: , doc: , sheet: , video: , }; /** A labelled surface that says how to open its menu on the device in front of you. */ function Surface({ className, children }: { className?: string; children: ReactNode }) { return (

{children}

); } function Hint() { return ( <> Right-click here Press and hold here ); } /* ---- sections, shortcuts, disabled -------------------------------------------------------- */ const editMenu: ContextMenuNode[] = [ { type: "group", id: "clip", label: "Edit", items: [ { type: "item", id: "cut", label: "Cut", icon: , shortcut: ["⌘", "X"] }, { type: "item", id: "copy", label: "Copy", icon: , shortcut: ["⌘", "C"] }, { type: "item", id: "paste", label: "Paste", icon: , shortcut: ["⌘", "V"], disabled: true }, ], }, { type: "separator" }, { type: "group", id: "arrange", label: "Arrange", items: [ { type: "item", id: "rename", label: "Rename", icon: , shortcut: ["F2"] }, { type: "item", id: "move", label: "Move to…", icon: }, ], }, { type: "separator" }, { type: "item", id: "delete", label: "Delete", icon: , shortcut: ["⌫"], destructive: true }, ]; function SectionsDemo() { const [last, setLast] = useState("Nothing picked yet"); return (

setLast(`Picked ${id}`)} aria-label="Canvas with an edit menu" className="group/area rounded-xl">

{last}

); } /* ---- submenus, checkbox, radio ------------------------------------------------------------ */ function ViewDemo() { const [hidden, setHidden] = useState(false); const [preview, setPreview] = useState(true); const [sort, setSort] = useState("name"); const items: ContextMenuNode[] = [ { type: "sub", id: "view", label: "View", icon: , items: [ { type: "checkbox", id: "hidden", label: "Show hidden files", checked: hidden, onCheckedChange: setHidden }, { type: "checkbox", id: "preview", label: "Show preview pane", checked: preview, onCheckedChange: setPreview }, ], }, { type: "sub", id: "sort", label: "Sort by", icon: , items: [{ type: "radio", id: "sort", value: sort, onValueChange: setSort, options: sortOptions }], }, { type: "separator" }, { type: "sub", id: "disabled", label: "Sync (offline)", icon: , disabled: true, items: [{ type: "item", id: "sync-now", label: "Sync now" }], }, { type: "item", id: "refresh", label: "Refresh", shortcut: ["⌘", "R"] }, ]; return (

Hidden files {hidden ? "shown" : "off"}, preview pane {preview ? "on" : "off"}, sorted by {sortOptions.find((o) => o.value === sort)?.label.toLowerCase()}

); } /* ---- controlled --------------------------------------------------------------------------- */ function ControlledDemo() { const [open, setOpen] = useState(false); return (

}, { type: "item", id: "dl", label: "Download", icon: }, { type: "item", id: "link", label: "Copy link", icon: }, ]} >

open: {String(open)}

); } /* ---- the file row sub-demo ---------------------------------------------------------------- */ function FileList({ interactive = true }: { interactive?: boolean }) { const [rows, setRows] = useState(fileRows); const [last, setLast] = useState("Right-click a row, or press and hold"); const [place, setPlace] = useState>({}); const menuFor = (row: FileRow): ContextMenuNode[] => [ { type: "item", id: "open", label: "Open", icon: , shortcut: ["↵"] }, { type: "item", id: "rename", label: "Rename", icon: , shortcut: ["F2"] }, { type: "separator" }, { type: "sub", id: "share", label: "Share with", icon: , items: [ ...sharePeople.map((p): ContextMenuNode => ({ type: "item", id: `share-${p}`, label: p, icon: })), { type: "separator" }, { type: "item", id: "copy-link", label: "Copy link", icon: }, ], }, { type: "sub", id: "move", label: "Move to", icon: , items: [{ type: "radio", id: `move-${row.id}`, value: place[row.id], onValueChange: (v) => setPlace((p) => ({ ...p, [row.id]: v })), options: moveTargets }], }, { type: "checkbox", id: "favorite", label: "Favorite", icon: row.favorite ? : , checked: row.favorite, onCheckedChange: (next) => setRows((all) => all.map((r) => (r.id === row.id ? { ...r, favorite: next } : r))), }, { type: "item", id: "download", label: "Download", icon: , disabled: row.kind === "folder" }, { type: "separator" }, { type: "item", id: "delete", label: "Delete", icon: , destructive: true, shortcut: ["⌫"] }, ]; return (

} items={menuFor(row)} disabled={!interactive} onAction={(id) => setLast(`${row.name}: ${id}`)} aria-label={`${row.name}, ${row.kind}. Press the Menu key for actions`} className="flex items-center gap-3 bg-background px-3 py-2.5 text-sm data-popup-open:bg-muted hover:bg-muted/60 focus-visible:z-10" > {kindIcon[row.kind]} {row.name} {row.favorite ? : null} {row.shared ? : null} {row.size} {row.modified}

{last} {Object.keys(place).length ? ` · moved ${Object.keys(place).length}` : ""}

); } /** A still picture of an open menu for the gallery card, which cannot hold a real open menu. */ function MenuIllustration() { const row = "flex h-7 items-center gap-2 rounded-md px-2 text-sm [&_svg]:size-4"; return (

Open ↵

Rename F2

Share with ›

Move to ›

Favorite

Delete

); } export function ContextMenuDemo() { return (

); } 33:T8d3,import type { BlockMeta } from "../../../lib/block-meta"; export const contextMenuMeta: BlockMeta = { slug: "context-menu", title: "Context menu", description: "Right click or press and hold anywhere on a surface. A menu described as data (items, sections, submenus, checkbox and radio choices, disabled rows) on the Kobra context menu, with a 500ms touch hold that cancels on movement and a controlled open state.", group: "overlays", kobraDeps: ["context-menu", "kbd"], files: ["blocks/overlays/context-menu/context-menu.tsx", "blocks/overlays/_shared/use-long-press.ts"], props: [ { name: "items", type: "ContextMenuNode[]", description: "The menu as data: item, checkbox, radio, sub, group (with a label) and separator nodes." }, { name: "onAction", type: "(id: string) => void", description: "Fires with the node id after a pick; radio picks arrive as `group:value`." }, { name: "open / defaultOpen", type: "boolean", description: "Controlled or initial open state." }, { name: "onOpenChange", type: "(open: boolean) => void", description: "Fires when the menu opens or closes." }, { name: "disabled", type: "boolean", default: "false", description: "Turns the area into plain content: no menu, native context menu returns." }, { name: "render", type: "ReactElement", description: "Swap the element the area renders, e.g. an li or a tr." }, { name: "focusable", type: "boolean", default: "true", description: "Puts the area in the tab order so the Menu key and Shift+F10 reach it." }, { name: "contentClassName", type: "string", description: "Class for the menu panel." }, { name: "ContextMenuNode.item", type: "{ id, label, icon, shortcut, disabled, destructive, onSelect }", description: "A pickable row. `shortcut` is a list of keys and is hidden on touch." }, { name: "ContextMenuNode.checkbox", type: "{ id, label, checked, defaultChecked, onCheckedChange, disabled }", description: "A toggle row with a check at the end." }, { name: "ContextMenuNode.radio", type: "{ id, label, value, defaultValue, onValueChange, options }", description: "One choice from several, announced as a group." }, ], tags: ["menu", "right-click", "long-press", "touch", "base-ui"], status: "ready", }; 23:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/#overlays","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Overlays"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Context menu"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Context menu"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"Right click or press and hold anywhere on a surface. A menu described as data (items, sections, submenus, checkbox and radio choices, disabled rows) on the Kobra context menu, with a 500ms touch hold that cancels on movement and a controlled open state."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"context-menu","group":"overlays","minHeight":520,"fixedHeight":720}],"code":["$","$L2f",null,{"files":[{"path":"blocks/overlays/context-menu/context-menu.tsx","code":"$30"},{"path":"blocks/overlays/_shared/use-long-press.ts","code":"$31"},{"path":"blocks/overlays/context-menu/demo.tsx","code":"$32"},{"path":"blocks/overlays/context-menu/meta.ts","code":"$33"}]}],"props":"$L34"}],"$L35"]}]