Element: #402 Context menu (navigation/menu) What it shows: A dashed button area that opens a Rename, Duplicate, Delete menu at the pointer on right-click, or from the keyboard with Shift+F10 or the ContextMenu key. When to use: Context menus on rows, files or canvases: the menu opens where the user pointed and moves when they right-click again. Spec: - `let open = $state(false)` and `let point = $state<{ x: number; y: number } | null>(null)` - The area is a native `` so it is focusable and named by its visible text - `oncontextmenu` calls `e.preventDefault()`, sets `point = { x: e.clientX, y: e.clientY }` and `open = true` - `onkeydown` handles `ContextMenu` and Shift+F10 and anchors the menu to the area's top-left - `` has no trigger; items Rename, Duplicate and a destructive Delete after `` - Each item calls `function pick(action: string)`, which sets `last = action` and calls `announce`; `Last action: {last}` is shown below Tags: dropdown-menu, context-menu, right-click, anchor, bind-open, keyboard Needs: @codeatlasdev/ui@4.4.0 Components: DropdownMenu, DropdownMenuItem, DropdownMenuSeparator Live demo: https://ui.codeatlas.com.br/docs/navigation/menu#context-menu Right-click here, or focus it and press Shift+F10. pick('Rename')}>Rename pick('Duplicate')}>Duplicate pick('Delete')}>Delete {#if last}Last action: {last}{/if}