@enigmax/primitives 0.26.0 → 0.27.0

package/dist/react/index.js

@@ -4,11 +4,11 @@ export { useSearch } from '../chunk-45UHLZYT.js';
 export { useNetworkState } from '../chunk-S653GLSF.js';
 export { RelativeTime } from '../chunk-OCMI7R6H.js';
 export { PasswordStrength } from '../chunk-XQHCZAPJ.js';
-export { ContextMenu, ContextMenuContent, ContextMenuList, ContextMenuPanel, ContextMenuRoot, ContextMenuRow, ContextMenuSearch, ContextMenuTrigger, useContextMenuContext } from '../chunk-DZMHY3SU.js';
+export { ContextMenu, ContextMenuContent, ContextMenuList, ContextMenuPanel, ContextMenuRoot, ContextMenuRow, ContextMenuSearch, ContextMenuTrigger, useContextMenuContext } from '../chunk-CPJJ3FPW.js';
 export { SelectionList, useSelection } from '../chunk-N6PDHMAX.js';
-export { Image } from '../chunk-4SZ5N7BA.js';
+export { Image } from '../chunk-2RIO4VDV.js';
 import '../chunk-EYZ366LP.js';
-export { Video } from '../chunk-JJVZYW5C.js';
+export { Video } from '../chunk-PVDU6AZU.js';
 export { Button, getLinkComponent, setLinkComponent, useButton } from '../chunk-6BGBYUSZ.js';
 export { Flag } from '../chunk-NPHRS2Q7.js';
 export { Toaster, toast, useSonner } from '../chunk-WPTBURIC.js';
@@ -19,9 +19,9 @@ export { colorEquals, formatColor, hslToRgb, hsvToRgb, parseColor, rgbToHsl, rgb
 import '../chunk-2QFTRNAZ.js';
 import '../chunk-IXVMRVD4.js';
 export { estimatePasswordStrength, generatePassword } from '../chunk-HC2ME5PU.js';
-export { CLIPBOARD_PREFIX, clipboardAction, clipboardEntries, clipboardHasText, createContextMenu, inspectClipboardTarget, isAction, performClipboardAction } from '../chunk-Z3VDE7OA.js';
+export { CLIPBOARD_PREFIX, clipboardAction, clipboardEntries, clipboardHasText, createContextMenu, inspectClipboardTarget, isAction, performClipboardAction } from '../chunk-YQV5XZIA.js';
 export { DEFAULT_SELECTION_SHORTCUTS, createSelection } from '../chunk-WSQC3PCC.js';
-import '../chunk-RUEQ3TGP.js';
+import '../chunk-JLZDS6CV.js';
 import '../chunk-MMQPZGSU.js';
 export { configureFlags, flagAttributes, flagName, flagSrc, flagView, normalizeFlagCode } from '../chunk-LMZJBOZG.js';
 import '../chunk-SNYUBXWQ.js';

package/dist/react/video.d.ts

@@ -1,6 +1,6 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { b as ContextMenuNode, a as ContextMenuItem } from '../context-BfjYGPnH.js';
-import '../context-menu-D3FtTn7v.js';
+import { b as ContextMenuNode, a as ContextMenuItem } from '../context-DR1dpO8b.js';
+import '../context-menu-qqpGBkny.js';
 import '../search-DYgqRp37.js';
 
 /**
@@ -14,7 +14,13 @@ import '../search-DYgqRp37.js';
 
 interface VideoSource {
     src: string;
-    /** `video/mp4`, `video/webm`. The browser picks the first one it can play. */
+    /**
+     * `video/mp4`, `video/webm`. The browser picks the first one it can play.
+     *
+     * Inferred from the file extension when it is left out, and left off entirely when the
+     * extension means nothing - the browser then fetches and sniffs, which always works. A
+     * WRONG type is the expensive mistake: the source is skipped without being tried.
+     */
     type?: string;
 }
 interface VideoTrack {

package/dist/react/video.js

@@ -1,3 +1,3 @@
 "use client";
-export { Video } from '../chunk-JJVZYW5C.js';
-import '../chunk-RUEQ3TGP.js';
+export { Video } from '../chunk-PVDU6AZU.js';
+import '../chunk-JLZDS6CV.js';

package/dist/react-router/index.d.ts

@@ -24,14 +24,14 @@ export { R as RecentEntry, b as RecentStore, e as createRecentStore, g as groupR
 export { Select, SelectContent, SelectContextValue, SelectItem, SelectList, SelectMultipleProps, SelectOptionRow, SelectProps, SelectRoot, SelectRootProps, SelectSearch, SelectSingleProps, SelectTrigger, SelectValue, useSelectContext } from '../react/select.js';
 export { a as SelectInstance, c as SelectOption, d as SelectOptions, e as SelectState, f as createSelect } from '../select-ClSy-J1f.js';
 export { ContextMenu, ContextMenuContent, ContextMenuContentProps, ContextMenuList, ContextMenuPanel, ContextMenuProps, ContextMenuRoot, ContextMenuRootProps, ContextMenuRow, ContextMenuSearch, ContextMenuTrigger, ContextMenuTriggerProps } from '../react/context-menu.js';
-export { C as CLIPBOARD_PREFIX, a as ClipboardAction, b as ClipboardMenuLabels, c as ClipboardMenuOptions, d as ClipboardTarget, e as clipboardAction, f as clipboardEntries, g as clipboardHasText, i as inspectClipboardTarget, p as performClipboardAction } from '../clipboard-menu-BvXJCSFN.js';
-export { a as ContextMenuAction, b as ContextMenuEntry, c as ContextMenuInstance, g as ContextMenuOptions, j as ContextMenuState, k as createContextMenu, l as isAction } from '../context-menu-D3FtTn7v.js';
+export { C as CLIPBOARD_PREFIX, a as ClipboardAction, b as ClipboardMenuLabels, c as ClipboardMenuOptions, d as ClipboardTarget, e as clipboardAction, f as clipboardEntries, g as clipboardHasText, i as inspectClipboardTarget, p as performClipboardAction } from '../clipboard-menu-eemzEBqB.js';
+export { a as ContextMenuAction, b as ContextMenuEntry, c as ContextMenuInstance, g as ContextMenuOptions, j as ContextMenuState, k as createContextMenu, l as isAction } from '../context-menu-qqpGBkny.js';
 export { MarqueeRect, SelectionList, SelectionListProps, SelectionRenderer, SelectionRowRender, UseSelectionOptions, UseSelectionResult, useSelection } from '../react/selection.js';
 export { D as DEFAULT_SELECTION_SHORTCUTS, a as SelectionCommand, b as SelectionCommandEvent, c as SelectionCommandName, d as SelectionInstance, e as SelectionOptions, f as SelectionShortcuts, g as SelectionState, h as createSelection } from '../selection-B_pmzHpy.js';
 export { S as Shortcut, b as ShortcutSpec, i as isApplePlatform, m as matchesShortcut, p as parseShortcut, e as shortcutText, f as shortcutTokens } from '../keys-D2zJs1uB.js';
 export { Image, ImageItem, ImageLabels, ImageMenuOptions, ImageProps, ImageSource, ZoomOptions } from '../react/image.js';
 export { Video, VideoControls, VideoLabels, VideoProps, VideoSource, VideoTrack } from '../react/video.js';
-export { C as ContextMenuContextValue, a as ContextMenuItem, b as ContextMenuNode, u as useContextMenuContext } from '../context-BfjYGPnH.js';
+export { C as ContextMenuContextValue, a as ContextMenuItem, b as ContextMenuNode, u as useContextMenuContext } from '../context-DR1dpO8b.js';
 
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLElement>>;
 

package/dist/react-router/index.js

@@ -4,11 +4,11 @@ export { useSearch } from '../chunk-45UHLZYT.js';
 export { useNetworkState } from '../chunk-S653GLSF.js';
 export { RelativeTime } from '../chunk-OCMI7R6H.js';
 export { PasswordStrength } from '../chunk-XQHCZAPJ.js';
-export { ContextMenu, ContextMenuContent, ContextMenuList, ContextMenuPanel, ContextMenuRoot, ContextMenuRow, ContextMenuSearch, ContextMenuTrigger, useContextMenuContext } from '../chunk-DZMHY3SU.js';
+export { ContextMenu, ContextMenuContent, ContextMenuList, ContextMenuPanel, ContextMenuRoot, ContextMenuRow, ContextMenuSearch, ContextMenuTrigger, useContextMenuContext } from '../chunk-CPJJ3FPW.js';
 export { SelectionList, useSelection } from '../chunk-N6PDHMAX.js';
-export { Image } from '../chunk-4SZ5N7BA.js';
+export { Image } from '../chunk-2RIO4VDV.js';
 import '../chunk-EYZ366LP.js';
-export { Video } from '../chunk-JJVZYW5C.js';
+export { Video } from '../chunk-PVDU6AZU.js';
 import { Button } from '../chunk-6BGBYUSZ.js';
 export { getLinkComponent, setLinkComponent, useButton } from '../chunk-6BGBYUSZ.js';
 export { Flag } from '../chunk-NPHRS2Q7.js';
@@ -20,9 +20,9 @@ export { colorEquals, formatColor, hslToRgb, hsvToRgb, parseColor, rgbToHsl, rgb
 import '../chunk-2QFTRNAZ.js';
 import '../chunk-IXVMRVD4.js';
 export { estimatePasswordStrength, generatePassword } from '../chunk-HC2ME5PU.js';
-export { CLIPBOARD_PREFIX, clipboardAction, clipboardEntries, clipboardHasText, createContextMenu, inspectClipboardTarget, isAction, performClipboardAction } from '../chunk-Z3VDE7OA.js';
+export { CLIPBOARD_PREFIX, clipboardAction, clipboardEntries, clipboardHasText, createContextMenu, inspectClipboardTarget, isAction, performClipboardAction } from '../chunk-YQV5XZIA.js';
 export { DEFAULT_SELECTION_SHORTCUTS, createSelection } from '../chunk-WSQC3PCC.js';
-import '../chunk-RUEQ3TGP.js';
+import '../chunk-JLZDS6CV.js';
 import '../chunk-MMQPZGSU.js';
 export { configureFlags, flagAttributes, flagName, flagSrc, flagView, normalizeFlagCode } from '../chunk-LMZJBOZG.js';
 import '../chunk-SNYUBXWQ.js';

package/dist/viewer-N5WLFB24.js

@@ -0,0 +1,3 @@
+export { ImageViewer, MenuButton } from './chunk-O2UJ5ZIX.js';
+import './chunk-HUUINHPR.js';
+import './chunk-EYZ366LP.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enigmax/primitives",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "description": "Headless components: the behaviour, the timing and the accessibility, with no styles of their own. Framework-agnostic core plus thin adapters.",
   "type": "module",
   "sideEffects": [

package/recipes/context-menu/styles.css

@@ -21,6 +21,13 @@
     --enigma-menu-accent: #fbbf24;
     --enigma-menu-danger: #f87171;
     --enigma-menu-danger-bg: rgba(248, 113, 113, 0.12);
+
+    /* Above the lightbox, which sits at 9999, because a menu is opened FROM whatever is on
+       top: the image viewer's own three-dot menu was portalled to the same body and painted
+       underneath it, so its rows could be neither seen nor pressed. A menu is the topmost
+       transient surface on a page, and this is the number that says so. It belongs here and
+       not in the light-scheme block, or half the readers get an invalid z-index. */
+    --enigma-menu-z: 10000;
 }
 
 @media (prefers-color-scheme: light) {
@@ -41,7 +48,7 @@
    and what a menu opened at the pointer needs. Fixed rather than absolute so a scrolling
    ancestor cannot drag it away from the place it was opened. */
 [data-enigma-menu-panel] {
-    position: fixed; z-index: 60;
+    position: fixed; z-index: var(--enigma-menu-z);
     box-sizing: border-box;
     min-width: var(--enigma-menu-min-width);
     max-width: min(22rem, calc(100vw - 1rem));

package/registry.json

@@ -86,6 +86,7 @@
         "[data-enigma-marquee-copy]"
       ],
       "docs": "docs/notes/primitives.md#marquee",
+      "source": "src/core/marquee.ts",
       "recipes": [
         "tailwind",
         "css"
@@ -151,7 +152,8 @@
         ".logo-marquee[data-grabbing]",
         ".logo-marquee__item"
       ],
-      "docs": "docs/notes/primitives.md#logo-marquee"
+      "docs": "docs/notes/primitives.md#logo-marquee",
+      "source": "recipes/logo-marquee/index.tsx"
     },
     {
       "name": "input",
@@ -392,6 +394,7 @@
         "[data-enigma-color-preset]"
       ],
       "docs": "docs/notes/primitives.md#input",
+      "source": "src/core/input.ts",
       "recipes": [
         "tailwind",
         "css"
@@ -460,6 +463,7 @@
         "fuse.js": "Fuzzy matching. Omit it and a built-in substring matcher is used."
       },
       "docs": "docs/notes/primitives.md#search",
+      "source": "src/core/search.ts",
       "recipes": [
         "tailwind"
       ],
@@ -551,7 +555,8 @@
         "[aria-busy=true]",
         "[data-enigma-button-key]"
       ],
-      "docs": "docs/notes/primitives.md#button"
+      "docs": "docs/notes/primitives.md#button",
+      "source": "src/core/button.ts"
     },
     {
       "name": "palette",
@@ -656,6 +661,7 @@
         "[data-enigma-palette-hint]"
       ],
       "docs": "docs/notes/primitives.md#palette",
+      "source": "src/core/palette.ts",
       "recipes": [
         "css"
       ]
@@ -799,6 +805,7 @@
         "[data-enigma-select-empty]"
       ],
       "docs": "docs/notes/primitives.md#select",
+      "source": "src/core/select.ts",
       "recipes": [
         "css"
       ]
@@ -946,6 +953,7 @@
         "[data-enigma-menu-status][data-error]"
       ],
       "docs": "docs/notes/primitives.md#context-menu",
+      "source": "src/core/context-menu.ts",
       "recipes": [
         "css"
       ]
@@ -1019,7 +1027,8 @@
         "[data-enigma-selection-marquee]",
         "[data-enigma-selection-empty]"
       ],
-      "docs": "docs/notes/primitives.md#selection"
+      "docs": "docs/notes/primitives.md#selection",
+      "source": "src/core/selection.ts"
     },
     {
       "name": "flags",
@@ -1081,7 +1090,8 @@
         "[data-enigma-flag][data-flag-shape=circle]"
       ],
       "assets": "flags",
-      "docs": "docs/notes/primitives.md#flags"
+      "docs": "docs/notes/primitives.md#flags",
+      "source": "src/core/flags.ts"
     },
     {
       "name": "notifications",
@@ -1140,6 +1150,7 @@
       ],
       "styles": false,
       "docs": "docs/notes/primitives.md#notifications",
+      "source": "src/core/notifications.ts",
       "recipes": [
         "tailwind"
       ]
@@ -1278,6 +1289,7 @@
         "[data-icon]"
       ],
       "docs": "docs/notes/primitives.md#toast",
+      "source": "src/react/toaster.tsx",
       "recipes": [
         "tailwind",
         "css"
@@ -1331,7 +1343,8 @@
         }
       ],
       "styles": false,
-      "docs": "docs/notes/primitives.md#network"
+      "docs": "docs/notes/primitives.md#network",
+      "source": "src/core/network.ts"
     },
     {
       "name": "relative-time",
@@ -1399,6 +1412,7 @@
         "[data-relative-time-capitalize-first-letter=true]"
       ],
       "docs": "docs/notes/primitives.md#relative-time",
+      "source": "src/core/relative-time.ts",
       "dependencies": {
         "@github/relative-time-element": "^4.4.0"
       }
@@ -1632,6 +1646,7 @@
         "[data-enigma-image-frame][data-flying]"
       ],
       "docs": "docs/notes/primitives.md#image",
+      "source": "src/core/image-viewer.ts",
       "recipes": [
         "css"
       ]
@@ -1864,6 +1879,7 @@
         "[data-enigma-video][data-casting]"
       ],
       "docs": "docs/notes/primitives.md#video",
+      "source": "src/core/player.ts",
       "recipes": [
         "css"
       ]

package/src/core/context-menu.ts

@@ -82,8 +82,18 @@ export function isAction(entry: ContextMenuEntry): entry is ContextMenuAction {
 /** The fields the filter reads when the caller does not say. */
 export const CONTEXT_MENU_SEARCH_KEYS = ["label", "description", "group", "keywords"];
 
-/** Filtering six rows is worth a field; filtering three is a bigger panel for nothing. */
-export const SEARCHABLE_FROM = 8;
+/**
+ * How many rows a level needs before it grows a filter on its own.
+ *
+ * Raised from 8, which turned out to be a number you can still READ. A menu of eight is
+ * scanned in one look, so the field was a row of chrome, a focus stop and a taller panel in
+ * exchange for nothing - the video player's own menu, at nine rows, is what showed it. Twelve
+ * is about where a list stops being a shape and starts being a list.
+ *
+ * It is only the DEFAULT. A menu whose rows arrive from somewhere - a list of files, a
+ * directory, anything fetched - says `searchable` and does not wait to grow into it.
+ */
+export const SEARCHABLE_FROM = 12;
 
 /** Where a menu was opened. Viewport coordinates, which is what a pointer event reports. */
 export interface ContextMenuPoint {
@@ -141,6 +151,12 @@ export interface ContextMenuOptions {
     /** A row was invoked. The menu has already closed unless the row keeps it open. */
     onSelect?: (item: ContextMenuAction, path: string[]) => void;
     onOpenChange?: (open: boolean) => void;
+    /**
+     * Whether the ROOT level draws a filter. `"auto"` (the default) grows one from
+     * `SEARCHABLE_FROM` rows; `true` puts one there whatever the count, which is what a menu
+     * filling itself from somewhere wants; `false` never does.
+     */
+    searchable?: boolean | "auto";
 }
 
 export interface ContextMenuInstance {
@@ -235,7 +251,10 @@ export function createContextMenu(options: ContextMenuOptions = {}): ContextMenu
     }
 
     function searchableFor(item: ContextMenuAction | null, entries: readonly ContextMenuEntry[]): boolean {
-        const asked = item?.searchable ?? "auto";
+        // The root has no item to carry the answer, so it reads the menu's own option - which
+        // is the only way a caller can turn the field on for rows they are about to fetch, or
+        // off for a menu they know is short.
+        const asked = (item ? item.searchable : opts.searchable) ?? "auto";
         if (asked !== "auto") return asked;
         return entries.filter(isAction).length >= SEARCHABLE_FROM;
     }

package/src/core/image-viewer.ts

@@ -174,6 +174,53 @@ function saveAs(href: string, name: string, external = false): void {
     anchor.remove();
 }
 
+/**
+ * A `data:` URL as the bytes it stands for.
+ *
+ * Synchronous on purpose: it is used to open a tab, and a window opened after an `await` is a
+ * popup with no gesture behind it, which the browser blocks.
+ */
+export function dataUrlToBlob(url: string): Blob {
+    const comma = url.indexOf(",");
+    if (!url.startsWith("data:") || comma === -1) throw new Error("not a data URL");
+    const head = url.slice("data:".length, comma);
+    const body = url.slice(comma + 1);
+    const base64 = head.endsWith(";base64");
+    const type = (base64 ? head.slice(0, -";base64".length) : head) || "text/plain";
+    if (!base64) return new Blob([decodeURIComponent(body)], { type });
+
+    const binary = atob(body);
+    const bytes = new Uint8Array(binary.length);
+    for (let at = 0; at < binary.length; at += 1) bytes[at] = binary.charCodeAt(at);
+    return new Blob([bytes], { type });
+}
+
+/**
+ * The picture on its own, in another tab.
+ *
+ * Chromium refuses a top-level navigation to a `data:` URL - it was a phishing vector - so a
+ * row that just called `window.open` on one did nothing at all, silently, which is how it
+ * shipped. Those are handed over as a blob instead; everything else opens as it is.
+ *
+ * `noopener` on both: the new tab must not get a handle on the page that opened it.
+ */
+export function openInNewTab(url: string): void {
+    if (typeof window === "undefined") return;
+    if (!url.startsWith("data:")) {
+        window.open(url, "_blank", "noopener,noreferrer");
+        return;
+    }
+    try {
+        const href = URL.createObjectURL(dataUrlToBlob(url));
+        window.open(href, "_blank", "noopener,noreferrer");
+        // Revoked later, not now: the tab has not finished reading it yet.
+        setTimeout(() => URL.revokeObjectURL(href), 60_000);
+    } catch {
+        // Undecodable, or a blocked popup. Better the browser's own refusal than a throw.
+        window.open(url, "_blank", "noopener,noreferrer");
+    }
+}
+
 /* -------- the flight from the thumbnail into the viewer -------- */
 
 /** How long the picture takes to fly, when the stylesheet does not say otherwise. */

package/src/core/player.ts

@@ -150,6 +150,48 @@ export async function togglePip(video: HTMLVideoElement): Promise<void> {
     await video.requestPictureInPicture();
 }
 
+/* -------- what a source IS -------- */
+
+/**
+ * The MIME types worth naming from a file extension, and nothing else.
+ *
+ * Deliberately short. A `<source>` with no `type` makes the browser fetch and sniff, which
+ * costs a request and always works; a `<source>` with the WRONG type is skipped outright, and
+ * the video then does not play at all. So a guess is more expensive than silence, and only
+ * extensions that mean one thing are in here.
+ */
+const SOURCE_TYPES: Record<string, string> = {
+    mp4: "video/mp4",
+    m4v: "video/mp4",
+    webm: "video/webm",
+    ogv: "video/ogg",
+    mov: "video/quicktime",
+    mkv: "video/x-matroska",
+    m3u8: "application/vnd.apple.mpegurl",
+    mpd: "application/dash+xml"
+};
+
+/**
+ * The type a URL's extension implies, or undefined.
+ *
+ * Read from the PATH, so a query string or a fragment cannot be mistaken for one -
+ * `/clip.mp4?token=...` is still an mp4, and `/download?file=x.webm` is not a webm, because
+ * the extension has to be on the path's last segment. A `blob:` or `data:` URL has no
+ * extension to read and gets nothing, which is the right answer: the browser sniffs.
+ */
+export function sourceType(url: string): string | undefined {
+    let path = url;
+    try {
+        path = new URL(url, typeof location === "undefined" ? "https://localhost" : location.href).pathname;
+    } catch {
+        path = url.split("?")[0]!.split("#")[0]!;
+    }
+    const name = path.split("/").pop() ?? "";
+    const dot = name.lastIndexOf(".");
+    if (dot <= 0) return undefined;
+    return SOURCE_TYPES[name.slice(dot + 1).toLowerCase()];
+}
+
 /* -------- captions -------- */
 
 /** One subtitle track, as the menu lists it. */

package/src/index.ts

@@ -167,6 +167,8 @@ export {
     downloadFile,
     flightFrom,
     flightMs,
+    openInNewTab,
+    dataUrlToBlob,
     prefersReducedMotion,
     FLIGHT_MS,
     IDENTITY,
@@ -190,6 +192,7 @@ export {
     toggleFullscreen,
     supportsPip,
     togglePip,
+    sourceType,
     captionTracks,
     activeCaption,
     showCaption,

package/src/react/context-menu/root.tsx

@@ -146,6 +146,12 @@ export interface ContextMenuRootProps {
      * selection, Cut over a selection in something writable, Paste in anything writable.
      */
     clipboard?: boolean | ClipboardMenuOptions;
+    /**
+     * A filter field over the rows. `"auto"` (the default) grows one only once there are
+     * enough rows to be worth filtering; `true` asks for one whatever the count - which is
+     * what a menu whose rows are fetched wants - and `false` never draws one.
+     */
+    searchable?: boolean | "auto";
     /** Fuse.js's constructor, for fuzzy filtering. Omit it for the built-in matcher. */
     fuse?: ContextMenuOptions["fuse"];
     fuseOptions?: Record<string, unknown>;
@@ -169,6 +175,7 @@ export function ContextMenuRoot(props: ContextMenuRootProps): ReactNode {
     const {
         items,
         title,
+        searchable,
         disabled = false,
         fuse,
         fuseOptions,
@@ -208,6 +215,7 @@ export function ContextMenuRoot(props: ContextMenuRootProps): ReactNode {
     const instance = useMemo<ContextMenuInstance>(() => createContextMenu({
         items: items as readonly ContextMenuEntry[],
         title,
+        searchable,
         fuse,
         fuseOptions,
         matcher,
@@ -307,8 +315,8 @@ export function ContextMenuRoot(props: ContextMenuRootProps): ReactNode {
     }, []);
 
     useEffect(() => {
-        instance.update({ items: withClipboard(currentItems.current), title });
-    }, [instance, signature, title, withClipboard]);
+        instance.update({ items: withClipboard(currentItems.current), title, searchable });
+    }, [instance, signature, title, searchable, withClipboard]);
 
     const cancelClose = useCallback(() => { window.clearTimeout(closing.current); }, []);
 
@@ -883,6 +891,18 @@ export function ContextMenuRow({ level, index, entry, children, ...props }: Cont
         return <p {...props} data-enigma-menu-label="" aria-hidden="true">{entry.label}</p>;
     }
 
+    /**
+     * Whether the level RESERVES the tick column, which is not the same as this row having a
+     * tick.
+     *
+     * A checkable row carries a check and, usually, an icon; its neighbours carry only the
+     * icon. Drawn per row, the ticked one's label therefore sat a column further right than
+     * everyone else's and the menu read as broken. Every desktop menu reserves the column for
+     * the whole level instead, so this asks the LEVEL. Read from `entries` rather than from
+     * what is visible: filtering a menu must not shift its rows sideways.
+     */
+    const reserveCheck = state?.entries.some((entry) => isAction(entry) && (entry as ContextMenuItem).checked !== undefined) ?? false;
+
     const checkable = item.checked !== undefined;
     // A checkable row inside a group is a radio: choosing one is choosing INSTEAD of its
     // siblings, and a screen reader announces the two differently.
@@ -942,16 +962,18 @@ export function ContextMenuRow({ level, index, entry, children, ...props }: Cont
                 menu.instance.select(level, index);
             }}
         >
-            {children ?? menu.renderItem?.(item, level, index) ?? <ContextMenuRowContent item={item} submenu={submenu} />}
+            {children ?? menu.renderItem?.(item, level, index) ?? <ContextMenuRowContent item={item} submenu={submenu} reserveCheck={reserveCheck} />}
         </div>
     );
 }
 
 /** The default row: what a desktop menu draws, in the order it draws it. */
-function ContextMenuRowContent({ item, submenu }: { item: ContextMenuItem; submenu: boolean; }): ReactNode {
+function ContextMenuRowContent({ item, submenu, reserveCheck }: { item: ContextMenuItem; submenu: boolean; reserveCheck: boolean; }): ReactNode {
     return (
         <>
-            {item.checked !== undefined && <span data-enigma-menu-check="" aria-hidden="true" />}
+            {/* Empty when this row is not checkable and something else in the level is: the
+                column is the level's, not the row's. */}
+            {(item.checked !== undefined || reserveCheck) && <span data-enigma-menu-check="" aria-hidden="true" />}
             {item.icon ? <span data-enigma-menu-icon="">{item.icon}</span> : null}
             <span data-enigma-menu-item-text="">
                 <span data-enigma-menu-item-label="">{item.label}</span>

package/src/react/context-menu/styles.ts

@@ -29,6 +29,13 @@ export const CONTEXT_MENU_STYLES = `
     --enigma-menu-accent: #fbbf24;
     --enigma-menu-danger: #f87171;
     --enigma-menu-danger-bg: rgba(248, 113, 113, 0.12);
+
+    /* Above the lightbox, which sits at 9999, because a menu is opened FROM whatever is on
+       top: the image viewer's own three-dot menu was portalled to the same body and painted
+       underneath it, so its rows could be neither seen nor pressed. A menu is the topmost
+       transient surface on a page, and this is the number that says so. It belongs here and
+       not in the light-scheme block, or half the readers get an invalid z-index. */
+    --enigma-menu-z: 10000;
 }
 
 @media (prefers-color-scheme: light) {
@@ -49,7 +56,7 @@ export const CONTEXT_MENU_STYLES = `
    and what a menu opened at the pointer needs. Fixed rather than absolute so a scrolling
    ancestor cannot drag it away from the place it was opened. */
 [data-enigma-menu-panel] {
-    position: fixed; z-index: 60;
+    position: fixed; z-index: var(--enigma-menu-z);
     box-sizing: border-box;
     min-width: var(--enigma-menu-min-width);
     max-width: min(22rem, calc(100vw - 1rem));

package/src/react/image/icons.tsx

@@ -53,3 +53,7 @@ export function Dots(): ReactNode {
 export function Download(): ReactNode {
     return <Glyph><path d="M12 3v12M7 11l5 5 5-5M4 20h16" /></Glyph>;
 }
+
+export function NewTab(): ReactNode {
+    return <Glyph><path d="M14 4h6v6" /><path d="M20 4 11 13" /><path d="M18 14v5a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 4 19V7.5A1.5 1.5 0 0 1 5.5 6H10" /></Glyph>;
+}

package/src/react/image/menu.tsx

@@ -3,7 +3,7 @@
 import * as icons from "@/react/image/icons";
 import { useRef, type ReactNode } from "react";
 import { MenuButton } from "@/react/image/viewer";
-import { downloadFile } from "@/core/image-viewer";
+import { downloadFile, openInNewTab } from "@/core/image-viewer";
 import type { ImageItem, ImageLabels, ImageMenuOptions } from "@/react/image/types";
 import { ContextMenu, useContextMenuContext, type ContextMenuNode } from "@/react/context-menu";
 
@@ -31,6 +31,9 @@ export function ImageMenu({ item, index, options, labels }: ImageMenuProps): Rea
     if (options.download !== false) {
         rows.push({ id: "download", label: labels.download ?? "Download", icon: <icons.Download /> });
     }
+    if (options.newTab !== false) {
+        rows.push({ id: "new-tab", label: labels.newTab ?? "Open in a new tab", icon: <icons.NewTab /> });
+    }
     if (options.items?.length) {
         if (rows.length > 0) rows.push({ type: "separator" });
         rows.push(...options.items);
@@ -44,6 +47,7 @@ export function ImageMenu({ item, index, options, labels }: ImageMenuProps): Rea
             clipboard={false}
             onSelect={(row) => {
                 if (row.id === "download") void downloadFile(item.download ?? item.src, item.filename);
+                if (row.id === "new-tab") openInNewTab(item.src);
                 options.onSelect?.(row.id, item, index);
             }}
         >

package/src/react/image/types.ts

@@ -39,6 +39,8 @@ export interface ZoomOptions {
 export interface ImageMenuOptions {
     /** The download row. On whenever the menu is. */
     download?: boolean;
+    /** The row that opens the picture on its own, in another tab. On whenever the menu is. */
+    newTab?: boolean;
     /** Rows of your own, after the built-in ones. */
     items?: readonly ContextMenuNode[];
     onSelect?: (id: string, item: ImageItem, index: number) => void;
@@ -55,6 +57,7 @@ export interface ImageLabels {
     next?: string;
     menu?: string;
     download?: string;
+    newTab?: string;
     discard?: string;
     thumbnails?: string;
     /** The frame itself, announced as the dialog's name. Default "Image viewer". */

package/src/react/video/index.tsx

@@ -531,7 +531,14 @@ export function Video(props: VideoProps): ReactNode {
                 playsInline={rest.playsInline ?? true}
                 onClick={() => { if (clickToPlay) toggle(); }}
             >
-                {typeof src !== "string" && sources.map((source) => <source key={source.src} src={source.src} type={source.type} />)}
+                {typeof src !== "string" && sources.map((source) => (
+                    // The type is what lets the browser SKIP a file it cannot play without
+                    // fetching it, which is the only reason to list several. Read from the
+                    // extension when it was not given, and left off when the extension means
+                    // nothing - a wrong type is worse than none, because the source is then
+                    // skipped and the video does not play at all.
+                    <source key={source.src} src={source.src} type={source.type ?? player.sourceType(source.src)} />
+                ))}
                 {tracks?.map((track) => (
                     <track
                         key={track.src}

package/src/react/video/types.ts

@@ -12,7 +12,13 @@ import type { ContextMenuItem, ContextMenuNode } from "@/react/context-menu/cont
 
 export interface VideoSource {
     src: string;
-    /** `video/mp4`, `video/webm`. The browser picks the first one it can play. */
+    /**
+     * `video/mp4`, `video/webm`. The browser picks the first one it can play.
+     *
+     * Inferred from the file extension when it is left out, and left off entirely when the
+     * extension means nothing - the browser then fetches and sniffs, which always works. A
+     * WRONG type is the expensive mistake: the source is skipped without being tried.
+     */
     type?: string;
 }
 

package/dist/viewer-73LSE6RR.js

@@ -1,3 +0,0 @@
-export { ImageViewer, MenuButton } from './chunk-ISXB5RUH.js';
-import './chunk-QIIV2QSV.js';
-import './chunk-EYZ366LP.js';