@enigmax/primitives 0.25.0 → 0.27.0

package/dist/menu-YIGMPFUP.js

@@ -0,0 +1,58 @@
+import { Download, NewTab, MenuButton } from './chunk-O2UJ5ZIX.js';
+import { downloadFile, openInNewTab } from './chunk-HUUINHPR.js';
+import { ContextMenu, useContextMenuContext } from './chunk-CPJJ3FPW.js';
+import './chunk-EYZ366LP.js';
+import './chunk-YQV5XZIA.js';
+import './chunk-4VUHQFAT.js';
+import './chunk-HS3X3XCW.js';
+import './chunk-4ZPMP47J.js';
+import { useRef } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function ImageMenu({ item, index, options, labels }) {
+  const rows = [];
+  if (options.download !== false) {
+    rows.push({ id: "download", label: labels.download ?? "Download", icon: /* @__PURE__ */ jsx(Download, {}) });
+  }
+  if (options.newTab !== false) {
+    rows.push({ id: "new-tab", label: labels.newTab ?? "Open in a new tab", icon: /* @__PURE__ */ jsx(NewTab, {}) });
+  }
+  if (options.items?.length) {
+    if (rows.length > 0) rows.push({ type: "separator" });
+    rows.push(...options.items);
+  }
+  return /* @__PURE__ */ jsxs(
+    ContextMenu.Root,
+    {
+      items: rows,
+      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);
+      },
+      children: [
+        /* @__PURE__ */ jsx(Trigger, { label: labels.menu ?? "More" }),
+        /* @__PURE__ */ jsx(ContextMenu.Content, {})
+      ]
+    }
+  );
+}
+function Trigger({ label }) {
+  const menu = useContextMenuContext("Image.Menu");
+  const ref = useRef(null);
+  return /* @__PURE__ */ jsx("span", { ref, style: { display: "contents" }, children: /* @__PURE__ */ jsx(
+    MenuButton,
+    {
+      label,
+      expanded: menu.state.open,
+      onPress: () => {
+        const box = ref.current?.firstElementChild?.getBoundingClientRect();
+        if (!box) return;
+        menu.open({ x: box.right, y: box.bottom + 6 });
+      }
+    }
+  ) });
+}
+
+export { ImageMenu };

package/dist/next/index.d.ts

@@ -23,11 +23,15 @@ export { PaletteContent, PaletteContextValue, PaletteField, PaletteFooter, Palet
 export { R as RecentEntry, b as RecentStore, e as createRecentStore, g as groupRows, i as isPaletteShortcut, m as moveActive, r as recentKey, s as shortcutLabel } from '../palette-D7iuQh_T.js';
 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, ContextMenuContextValue, ContextMenuItem, ContextMenuList, ContextMenuNode, ContextMenuPanel, ContextMenuProps, ContextMenuRoot, ContextMenuRootProps, ContextMenuRow, ContextMenuSearch, ContextMenuTrigger, ContextMenuTriggerProps, useContextMenuContext } from '../react/context-menu.js';
-export { C as CLIPBOARD_PREFIX, b as ClipboardAction, c as ClipboardMenuLabels, d as ClipboardMenuOptions, e as ClipboardTarget, f as ContextMenuAction, g as ContextMenuEntry, h as ContextMenuInstance, l as ContextMenuOptions, o as ContextMenuState, p as clipboardAction, q as clipboardEntries, r as clipboardHasText, s as createContextMenu, t as inspectClipboardTarget, u as isAction, v as performClipboardAction } from '../clipboard-menu-B_ouitfS.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-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-DR1dpO8b.js';
 
 /**
  * The Next.js entry. Same components, wired to `next/link`.

package/dist/next/index.js

@@ -1,29 +1,33 @@
 "use client";
-export { useInput } from '../chunk-MSOCCQGH.js';
+export { useInput } from '../chunk-T7I6WJSN.js';
+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-2RIO4VDV.js';
+import '../chunk-EYZ366LP.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';
 export { Toaster, toast, useSonner } from '../chunk-WPTBURIC.js';
 export { createNotificationQueue, defaultQueue, useNotifications } from '../chunk-QYMUIW5I.js';
 export { useMarquee } from '../chunk-ZWR2EXHQ.js';
-export { useSearch } from '../chunk-45UHLZYT.js';
-export { useNetworkState } from '../chunk-S653GLSF.js';
 import '../chunk-KJINGUQN.js';
+export { colorEquals, formatColor, hslToRgb, hsvToRgb, parseColor, rgbToHsl, rgbToHsv, toHex } from '../chunk-S2FPN5ID.js';
+import '../chunk-2QFTRNAZ.js';
 import '../chunk-IXVMRVD4.js';
 export { estimatePasswordStrength, generatePassword } from '../chunk-HC2ME5PU.js';
-export { colorEquals, formatColor, hslToRgb, hsvToRgb, parseColor, rgbToHsl, rgbToHsv, toHex } from '../chunk-S2FPN5ID.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-JLZDS6CV.js';
 import '../chunk-MMQPZGSU.js';
 export { configureFlags, flagAttributes, flagName, flagSrc, flagView, normalizeFlagCode } from '../chunk-LMZJBOZG.js';
 import '../chunk-SNYUBXWQ.js';
 import '../chunk-UOSSNUSC.js';
-import '../chunk-2QFTRNAZ.js';
-export { Input } from '../chunk-3MGBZOAU.js';
+export { Input } from '../chunk-RMNXVWQ4.js';
 import '../chunk-KVLSOQTI.js';
 import '../chunk-F25CGNQC.js';
 export { PaletteContent, PaletteField, PaletteFooter, PaletteItem, PaletteList, PaletteRoot, PaletteTrigger, SearchPalette, usePaletteContext } from '../chunk-FGBIZDV2.js';

package/dist/react/context-menu.d.ts

@@ -1,59 +1,13 @@
-import { ReactNode, RefObject, ComponentPropsWithoutRef } from 'react';
-import { f as ContextMenuAction, g as ContextMenuEntry, h as ContextMenuInstance, o as ContextMenuState, m as ContextMenuPoint, d as ClipboardMenuOptions, l as ContextMenuOptions } from '../clipboard-menu-B_ouitfS.js';
-export { C as CLIPBOARD_PREFIX, a as CONTEXT_MENU_SEARCH_KEYS, b as ClipboardAction, c as ClipboardMenuLabels, e as ClipboardTarget, i as ContextMenuLabel, j as ContextMenuLevel, k as ContextMenuMoveKey, n as ContextMenuSeparator, p as clipboardAction, q as clipboardEntries, r as clipboardHasText, s as createContextMenu, t as inspectClipboardTarget, u as isAction, v as performClipboardAction } from '../clipboard-menu-B_ouitfS.js';
+import { ReactNode, ComponentPropsWithoutRef } from 'react';
+import { b as ContextMenuNode, a as ContextMenuItem } from '../context-DR1dpO8b.js';
+export { C as ContextMenuContextValue, u as useContextMenuContext } from '../context-DR1dpO8b.js';
+import { c as ClipboardMenuOptions } from '../clipboard-menu-eemzEBqB.js';
+export { C as CLIPBOARD_PREFIX, a as ClipboardAction, b as ClipboardMenuLabels, d as ClipboardTarget, e as clipboardAction, f as clipboardEntries, g as clipboardHasText, i as inspectClipboardTarget, p as performClipboardAction } from '../clipboard-menu-eemzEBqB.js';
+import { g as ContextMenuOptions, b as ContextMenuEntry } from '../context-menu-qqpGBkny.js';
+export { C as CONTEXT_MENU_SEARCH_KEYS, a as ContextMenuAction, c as ContextMenuInstance, d as ContextMenuLabel, e as ContextMenuLevel, f as ContextMenuMoveKey, h as ContextMenuPoint, i as ContextMenuSeparator, j as ContextMenuState, k as createContextMenu, l as isAction } from '../context-menu-qqpGBkny.js';
 export { S as Shortcut, b as ShortcutSpec, m as matchesShortcut, p as parseShortcut, e as shortcutText, f as shortcutTokens } from '../keys-D2zJs1uB.js';
 import '../search-DYgqRp37.js';
 
-/**
- * One row, as React draws it. The core carries `icon` as `unknown` because it cannot know
- * what a node is; here it is one.
- */
-interface ContextMenuItem extends Omit<ContextMenuAction, "icon" | "items"> {
-    icon?: ReactNode;
-    items?: readonly ContextMenuNode[];
-}
-/** Anything that can appear in a menu, with React's icon type. */
-type ContextMenuNode = ContextMenuItem | Exclude<ContextMenuEntry, ContextMenuAction>;
-interface ContextMenuContextValue {
-    instance: ContextMenuInstance;
-    state: ContextMenuState;
-    /**
-     * Open at a point, over what the press landed on. False when there was nothing to show,
-     * so the press is left alone.
-     *
-     * `target` is what the clipboard rows are built from - the field or the selection under
-     * the pointer - and a caller that leaves it out gets a menu with none of them, which is
-     * the right answer for a menu opened from somewhere that is not a press.
-     */
-    open: (point: ContextMenuPoint, target?: EventTarget | null) => boolean;
-    close: () => void;
-    /** ids the parts need to point at each other. */
-    ids: {
-        trigger: string;
-    };
-    panelId: (level: number) => string;
-    itemId: (level: number, index: number) => string;
-    triggerRef: RefObject<HTMLElement | null>;
-    /** Which panel the keyboard is in. Always the deepest open one. */
-    onMenuKeyDown: (event: React.KeyboardEvent) => void;
-    /** How long the pointer must rest on a row before its submenu opens, and before one closes. */
-    delays: {
-        open: number;
-        close: number;
-    };
-    /** Drop the pending close, wherever it was scheduled. Called wherever the pointer lands. */
-    cancelClose: () => void;
-    /** Close everything below `level`, after the beat - replacing any close already waiting. */
-    scheduleClose: (level: number) => void;
-    /** Draw a row instead of the default icon / label / shortcut. */
-    renderItem?: (item: ContextMenuItem, level: number, index: number) => ReactNode;
-    /** Shown while a fetched submenu has not answered. */
-    loadingLabel: ReactNode;
-    /** Shown when a filter matched nothing, or a fetched submenu came back with nothing. */
-    emptyLabel: ReactNode;
-}
-declare function useContextMenuContext(part: string): ContextMenuContextValue;
-
 interface ContextMenuRootProps {
     /** The rows. A list with nothing selectable in it opens no menu at all. */
     items: readonly ContextMenuNode[];
@@ -74,6 +28,12 @@ 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>;
@@ -170,7 +130,7 @@ declare function ContextMenuRow({ level, index, entry, children, ...props }: Con
  * is PREPENDED to `<head>`, so anything the document already has wins on source order at
  * equal specificity.
  */
-declare const CONTEXT_MENU_STYLES = "\n:root {\n    --enigma-menu-bg: #1c1c1c;\n    --enigma-menu-border: #333333;\n    --enigma-menu-radius: 0.625rem;\n    --enigma-menu-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);\n    --enigma-menu-text: #f5f5f5;\n    --enigma-menu-muted: #a3a3a3;\n    --enigma-menu-font-size: 0.8125rem;\n    --enigma-menu-min-width: 12rem;\n    --enigma-menu-max-height: 20rem;\n\n    --enigma-menu-active-bg: #2a2a2a;\n    --enigma-menu-accent: #fbbf24;\n    --enigma-menu-danger: #f87171;\n    --enigma-menu-danger-bg: rgba(248, 113, 113, 0.12);\n}\n\n@media (prefers-color-scheme: light) {\n    :root {\n        --enigma-menu-bg: #ffffff;\n        --enigma-menu-border: #e5e5e5;\n        --enigma-menu-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);\n        --enigma-menu-text: #171717;\n        --enigma-menu-muted: #737373;\n        --enigma-menu-active-bg: #f5f5f5;\n        --enigma-menu-accent: #b45309;\n        --enigma-menu-danger: #b91c1c;\n        --enigma-menu-danger-bg: rgba(185, 28, 28, 0.08);\n    }\n}\n\n/* Every panel is positioned in VIEWPORT coordinates, which is what a pointer event reports\n   and what a menu opened at the pointer needs. Fixed rather than absolute so a scrolling\n   ancestor cannot drag it away from the place it was opened. */\n[data-enigma-menu-panel] {\n    position: fixed; z-index: 60;\n    box-sizing: border-box;\n    min-width: var(--enigma-menu-min-width);\n    max-width: min(22rem, calc(100vw - 1rem));\n    padding: 0.25rem;\n    color: var(--enigma-menu-text);\n    background: var(--enigma-menu-bg);\n    border: 1px solid var(--enigma-menu-border);\n    border-radius: var(--enigma-menu-radius);\n    box-shadow: var(--enigma-menu-shadow);\n    font-size: var(--enigma-menu-font-size);\n    animation: enigma-menu-in 90ms ease-out;\n    /* Measured before it is placed, and placed before it is seen: without this the panel is\n       painted at 0,0 for one frame and jumps to the pointer on the next. */\n    visibility: hidden;\n}\n[data-enigma-menu-panel][data-placed] { visibility: visible; }\n/* No focus ring around the panel. It takes focus so the keyboard has somewhere to be, not\n   because it is a control: what MOVES is the highlighted row, drawn by [data-active] and\n   announced through aria-activedescendant. A ring around the whole menu says the menu is the\n   thing focused, which is not what is happening - and it appears the moment you press an\n   arrow, over a surface that was already showing you where you are. Nothing is lost by\n   removing it, because nothing inside is reachable by Tab: the menu owns that key. */\n[data-enigma-menu-panel]:focus,\n[data-enigma-menu-panel]:focus-visible { outline: none; }\n@keyframes enigma-menu-in {\n    from { opacity: 0; transform: scale(0.98); }\n    to { opacity: 1; transform: none; }\n}\n@media (prefers-reduced-motion: reduce) {\n    [data-enigma-menu-panel] { animation: none; }\n}\n\n/* The heading: what the menu is acting ON. A long file name is cut rather than allowed to\n   set the panel's width, and the full one stays reachable through its title attribute. */\n[data-enigma-menu-title] {\n    margin: 0; padding: 0.375rem 0.5rem 0.25rem;\n    font-size: 0.6875rem; font-weight: 600;\n    color: var(--enigma-menu-muted);\n    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;\n}\n\n[data-enigma-menu-search] {\n    width: 100%; box-sizing: border-box;\n    padding: 0.375rem 0.5rem 0.5rem;\n    font: inherit; font-size: var(--enigma-menu-font-size);\n    color: var(--enigma-menu-text); background: transparent;\n    border: 0; border-bottom: 1px solid var(--enigma-menu-border);\n    outline: none;\n}\n[data-enigma-menu-search]::-webkit-search-cancel-button,\n[data-enigma-menu-search]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }\n\n[data-enigma-menu-list] {\n    max-height: var(--enigma-menu-max-height);\n    overflow-y: auto; overscroll-behavior: contain;\n}\n\n[data-enigma-menu-item] {\n    display: flex; align-items: center; gap: 0.5rem;\n    padding: 0.3125rem 0.5rem; border-radius: 0.375rem;\n    line-height: 1.4;\n    color: var(--enigma-menu-text);\n    /* The hand, not the arrow. A native menu uses the arrow because the whole surface is\n       drawn by the OS and nothing on a page looks like it; here the rows sit on a web page,\n       where the hand is what says \"this is a thing you press\". */\n    cursor: pointer; user-select: none;\n}\n[data-enigma-menu-item][data-active] { background: var(--enigma-menu-active-bg); }\n[data-enigma-menu-item][data-disabled] { opacity: 0.45; cursor: not-allowed; }\n[data-enigma-menu-item][data-destructive] { color: var(--enigma-menu-danger); }\n[data-enigma-menu-item][data-destructive][data-active] { background: var(--enigma-menu-danger-bg); }\n\n[data-enigma-menu-item-text] { display: grid; min-width: 0; }\n[data-enigma-menu-item-label] { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }\n[data-enigma-menu-item-description] {\n    font-size: 0.6875rem; color: var(--enigma-menu-muted);\n    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;\n}\n\n[data-enigma-menu-icon] { display: inline-flex; align-items: center; flex: none; width: 1rem; max-height: 1.25em; line-height: 0; }\n\n/* The shortcut, on the right, the way every desktop menu prints it. margin-left: auto is\n   what pushes it there, and flex: none is what stops a long label squashing it. */\n[data-enigma-menu-shortcut] {\n    display: flex; align-items: center; gap: 0.125rem;\n    flex: none; margin-left: auto; padding-left: 1.5rem;\n    font-size: 0.6875rem; color: var(--enigma-menu-muted);\n    font-variant-numeric: tabular-nums;\n}\n[data-enigma-menu-shortcut] kbd { font: inherit; }\n\n/* The submenu arrow shares the shortcut's slot, so a row never has both pushed apart. */\n[data-enigma-menu-arrow] {\n    flex: none; margin-left: auto;\n    width: 0.35rem; height: 0.35rem;\n    border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor;\n    transform: rotate(45deg);\n    opacity: 0.6;\n}\n[data-enigma-menu-shortcut] + [data-enigma-menu-arrow] { margin-left: 0.5rem; }\n\n/* Check and radio: drawn rather than loaded, and reserving their space either way so\n   choosing a row does not shift the label under the pointer. */\n[data-enigma-menu-check] {\n    flex: none; width: 1rem; height: 1rem;\n    display: grid; place-items: center;\n    color: var(--enigma-menu-accent);\n}\n[data-enigma-menu-check]::after { content: \"\"; width: 0.35rem; height: 0.6rem; opacity: 0; }\n[data-enigma-menu-item][aria-checked=\"true\"] [data-enigma-menu-check]::after {\n    opacity: 1;\n    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;\n    transform: rotate(45deg) translate(-0.05rem, -0.05rem);\n}\n[data-enigma-menu-item][role=\"menuitemradio\"] [data-enigma-menu-check]::after {\n    width: 0.4rem; height: 0.4rem; border-radius: 999px; background: currentColor;\n    transform: none; border: 0;\n}\n\n[data-enigma-menu-separator] {\n    height: 1px; margin: 0.25rem 0.25rem;\n    background: var(--enigma-menu-border);\n}\n\n[data-enigma-menu-label] {\n    margin: 0.375rem 0 0.125rem; padding: 0 0.5rem;\n    font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;\n    color: var(--enigma-menu-muted);\n}\n\n[data-enigma-menu-status] {\n    margin: 0; padding: 0.625rem 0.5rem;\n    font-size: var(--enigma-menu-font-size); color: var(--enigma-menu-muted);\n    /* The quoted query is cut in the text as well, but a pasted string with no spaces has no\n       break opportunity at all - so this is what stops it stretching the panel. */\n    overflow-wrap: anywhere;\n}\n[data-enigma-menu-status][data-error] { color: var(--enigma-menu-danger); }\n\n/* The end-of-window marker: one pixel, so it has a box to be scrolled into. */\n[data-enigma-menu-more] { height: 1px; }\n";
+declare const CONTEXT_MENU_STYLES = "\n:root {\n    --enigma-menu-bg: #1c1c1c;\n    --enigma-menu-border: #333333;\n    --enigma-menu-radius: 0.625rem;\n    --enigma-menu-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);\n    --enigma-menu-text: #f5f5f5;\n    --enigma-menu-muted: #a3a3a3;\n    --enigma-menu-font-size: 0.8125rem;\n    --enigma-menu-min-width: 12rem;\n    --enigma-menu-max-height: 20rem;\n\n    --enigma-menu-active-bg: #2a2a2a;\n    --enigma-menu-accent: #fbbf24;\n    --enigma-menu-danger: #f87171;\n    --enigma-menu-danger-bg: rgba(248, 113, 113, 0.12);\n\n    /* Above the lightbox, which sits at 9999, because a menu is opened FROM whatever is on\n       top: the image viewer's own three-dot menu was portalled to the same body and painted\n       underneath it, so its rows could be neither seen nor pressed. A menu is the topmost\n       transient surface on a page, and this is the number that says so. It belongs here and\n       not in the light-scheme block, or half the readers get an invalid z-index. */\n    --enigma-menu-z: 10000;\n}\n\n@media (prefers-color-scheme: light) {\n    :root {\n        --enigma-menu-bg: #ffffff;\n        --enigma-menu-border: #e5e5e5;\n        --enigma-menu-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);\n        --enigma-menu-text: #171717;\n        --enigma-menu-muted: #737373;\n        --enigma-menu-active-bg: #f5f5f5;\n        --enigma-menu-accent: #b45309;\n        --enigma-menu-danger: #b91c1c;\n        --enigma-menu-danger-bg: rgba(185, 28, 28, 0.08);\n    }\n}\n\n/* Every panel is positioned in VIEWPORT coordinates, which is what a pointer event reports\n   and what a menu opened at the pointer needs. Fixed rather than absolute so a scrolling\n   ancestor cannot drag it away from the place it was opened. */\n[data-enigma-menu-panel] {\n    position: fixed; z-index: var(--enigma-menu-z);\n    box-sizing: border-box;\n    min-width: var(--enigma-menu-min-width);\n    max-width: min(22rem, calc(100vw - 1rem));\n    padding: 0.25rem;\n    color: var(--enigma-menu-text);\n    background: var(--enigma-menu-bg);\n    border: 1px solid var(--enigma-menu-border);\n    border-radius: var(--enigma-menu-radius);\n    box-shadow: var(--enigma-menu-shadow);\n    font-size: var(--enigma-menu-font-size);\n    animation: enigma-menu-in 90ms ease-out;\n    /* Measured before it is placed, and placed before it is seen: without this the panel is\n       painted at 0,0 for one frame and jumps to the pointer on the next. */\n    visibility: hidden;\n}\n[data-enigma-menu-panel][data-placed] { visibility: visible; }\n/* No focus ring around the panel. It takes focus so the keyboard has somewhere to be, not\n   because it is a control: what MOVES is the highlighted row, drawn by [data-active] and\n   announced through aria-activedescendant. A ring around the whole menu says the menu is the\n   thing focused, which is not what is happening - and it appears the moment you press an\n   arrow, over a surface that was already showing you where you are. Nothing is lost by\n   removing it, because nothing inside is reachable by Tab: the menu owns that key. */\n[data-enigma-menu-panel]:focus,\n[data-enigma-menu-panel]:focus-visible { outline: none; }\n@keyframes enigma-menu-in {\n    from { opacity: 0; transform: scale(0.98); }\n    to { opacity: 1; transform: none; }\n}\n@media (prefers-reduced-motion: reduce) {\n    [data-enigma-menu-panel] { animation: none; }\n}\n\n/* The heading: what the menu is acting ON. A long file name is cut rather than allowed to\n   set the panel's width, and the full one stays reachable through its title attribute. */\n[data-enigma-menu-title] {\n    margin: 0; padding: 0.375rem 0.5rem 0.25rem;\n    font-size: 0.6875rem; font-weight: 600;\n    color: var(--enigma-menu-muted);\n    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;\n}\n\n[data-enigma-menu-search] {\n    width: 100%; box-sizing: border-box;\n    padding: 0.375rem 0.5rem 0.5rem;\n    font: inherit; font-size: var(--enigma-menu-font-size);\n    color: var(--enigma-menu-text); background: transparent;\n    border: 0; border-bottom: 1px solid var(--enigma-menu-border);\n    outline: none;\n}\n[data-enigma-menu-search]::-webkit-search-cancel-button,\n[data-enigma-menu-search]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }\n\n[data-enigma-menu-list] {\n    max-height: var(--enigma-menu-max-height);\n    overflow-y: auto; overscroll-behavior: contain;\n}\n\n[data-enigma-menu-item] {\n    display: flex; align-items: center; gap: 0.5rem;\n    padding: 0.3125rem 0.5rem; border-radius: 0.375rem;\n    line-height: 1.4;\n    color: var(--enigma-menu-text);\n    /* The hand, not the arrow. A native menu uses the arrow because the whole surface is\n       drawn by the OS and nothing on a page looks like it; here the rows sit on a web page,\n       where the hand is what says \"this is a thing you press\". */\n    cursor: pointer; user-select: none;\n}\n[data-enigma-menu-item][data-active] { background: var(--enigma-menu-active-bg); }\n[data-enigma-menu-item][data-disabled] { opacity: 0.45; cursor: not-allowed; }\n[data-enigma-menu-item][data-destructive] { color: var(--enigma-menu-danger); }\n[data-enigma-menu-item][data-destructive][data-active] { background: var(--enigma-menu-danger-bg); }\n\n[data-enigma-menu-item-text] { display: grid; min-width: 0; }\n[data-enigma-menu-item-label] { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }\n[data-enigma-menu-item-description] {\n    font-size: 0.6875rem; color: var(--enigma-menu-muted);\n    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;\n}\n\n[data-enigma-menu-icon] { display: inline-flex; align-items: center; flex: none; width: 1rem; max-height: 1.25em; line-height: 0; }\n\n/* The shortcut, on the right, the way every desktop menu prints it. margin-left: auto is\n   what pushes it there, and flex: none is what stops a long label squashing it. */\n[data-enigma-menu-shortcut] {\n    display: flex; align-items: center; gap: 0.125rem;\n    flex: none; margin-left: auto; padding-left: 1.5rem;\n    font-size: 0.6875rem; color: var(--enigma-menu-muted);\n    font-variant-numeric: tabular-nums;\n}\n[data-enigma-menu-shortcut] kbd { font: inherit; }\n\n/* The submenu arrow shares the shortcut's slot, so a row never has both pushed apart. */\n[data-enigma-menu-arrow] {\n    flex: none; margin-left: auto;\n    width: 0.35rem; height: 0.35rem;\n    border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor;\n    transform: rotate(45deg);\n    opacity: 0.6;\n}\n[data-enigma-menu-shortcut] + [data-enigma-menu-arrow] { margin-left: 0.5rem; }\n\n/* Check and radio: drawn rather than loaded, and reserving their space either way so\n   choosing a row does not shift the label under the pointer. */\n[data-enigma-menu-check] {\n    flex: none; width: 1rem; height: 1rem;\n    display: grid; place-items: center;\n    color: var(--enigma-menu-accent);\n}\n[data-enigma-menu-check]::after { content: \"\"; width: 0.35rem; height: 0.6rem; opacity: 0; }\n[data-enigma-menu-item][aria-checked=\"true\"] [data-enigma-menu-check]::after {\n    opacity: 1;\n    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;\n    transform: rotate(45deg) translate(-0.05rem, -0.05rem);\n}\n[data-enigma-menu-item][role=\"menuitemradio\"] [data-enigma-menu-check]::after {\n    width: 0.4rem; height: 0.4rem; border-radius: 999px; background: currentColor;\n    transform: none; border: 0;\n}\n\n[data-enigma-menu-separator] {\n    height: 1px; margin: 0.25rem 0.25rem;\n    background: var(--enigma-menu-border);\n}\n\n[data-enigma-menu-label] {\n    margin: 0.375rem 0 0.125rem; padding: 0 0.5rem;\n    font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;\n    color: var(--enigma-menu-muted);\n}\n\n[data-enigma-menu-status] {\n    margin: 0; padding: 0.625rem 0.5rem;\n    font-size: var(--enigma-menu-font-size); color: var(--enigma-menu-muted);\n    /* The quoted query is cut in the text as well, but a pasted string with no spaces has no\n       break opportunity at all - so this is what stops it stretching the panel. */\n    overflow-wrap: anywhere;\n}\n[data-enigma-menu-status][data-error] { color: var(--enigma-menu-danger); }\n\n/* The end-of-window marker: one pixel, so it has a box to be scrolled into. */\n[data-enigma-menu-more] { height: 1px; }\n";
 
 type ContextMenuProps = ContextMenuRootProps & {
     /** How many rows to put in the document at once. `Infinity` renders the lot. */
@@ -216,4 +176,4 @@ declare namespace ContextMenu {
     var Item: typeof ContextMenuRow;
 }
 
-export { CONTEXT_MENU_STYLES, ClipboardMenuOptions, ContextMenu, ContextMenuAction, ContextMenuContent, type ContextMenuContentProps, type ContextMenuContextValue, ContextMenuEntry, ContextMenuInstance, type ContextMenuItem, ContextMenuList, type ContextMenuListProps, type ContextMenuNode, ContextMenuOptions, ContextMenuPanel, type ContextMenuPanelProps, ContextMenuPoint, type ContextMenuProps, ContextMenuRoot, type ContextMenuRootProps, ContextMenuRow, type ContextMenuRowProps, ContextMenuSearch, type ContextMenuSearchProps, ContextMenuState, ContextMenuTrigger, type ContextMenuTriggerProps, useContextMenuContext };
+export { CONTEXT_MENU_STYLES, ClipboardMenuOptions, ContextMenu, ContextMenuContent, type ContextMenuContentProps, ContextMenuEntry, ContextMenuItem, ContextMenuList, type ContextMenuListProps, ContextMenuNode, ContextMenuOptions, ContextMenuPanel, type ContextMenuPanelProps, type ContextMenuProps, ContextMenuRoot, type ContextMenuRootProps, ContextMenuRow, type ContextMenuRowProps, ContextMenuSearch, type ContextMenuSearchProps, ContextMenuTrigger, type ContextMenuTriggerProps };

package/dist/react/context-menu.js

@@ -1,6 +1,6 @@
 "use client";
-export { CONTEXT_MENU_STYLES, ContextMenu, ContextMenuContent, ContextMenuList, ContextMenuPanel, ContextMenuRoot, ContextMenuRow, ContextMenuSearch, ContextMenuTrigger, useContextMenuContext } from '../chunk-DZMHY3SU.js';
-export { CLIPBOARD_PREFIX, CONTEXT_MENU_SEARCH_KEYS, clipboardAction, clipboardEntries, clipboardHasText, createContextMenu, inspectClipboardTarget, isAction, performClipboardAction } from '../chunk-Z3VDE7OA.js';
+export { CONTEXT_MENU_STYLES, ContextMenu, ContextMenuContent, ContextMenuList, ContextMenuPanel, ContextMenuRoot, ContextMenuRow, ContextMenuSearch, ContextMenuTrigger, useContextMenuContext } from '../chunk-CPJJ3FPW.js';
+export { CLIPBOARD_PREFIX, CONTEXT_MENU_SEARCH_KEYS, clipboardAction, clipboardEntries, clipboardHasText, createContextMenu, inspectClipboardTarget, isAction, performClipboardAction } from '../chunk-YQV5XZIA.js';
 export { matchesShortcut, parseShortcut, shortcutText, shortcutTokens } from '../chunk-4VUHQFAT.js';
 import '../chunk-HS3X3XCW.js';
 import '../chunk-4ZPMP47J.js';

package/dist/react/image.d.ts

@@ -0,0 +1,112 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { b as ContextMenuNode } from '../context-DR1dpO8b.js';
+import '../context-menu-qqpGBkny.js';
+import '../search-DYgqRp37.js';
+
+/**
+ * The prop shapes for `<Image>`, split from the component so the viewer's chunk can import
+ * them without pulling the component in - the same arrangement `<Input>` is in.
+ *
+ * WHAT IS ON BY DEFAULT is the whole design of this API: an image that opens and zooms, and
+ * nothing else. A gallery's arrows, its thumbnails, a menu and a discard action are each a
+ * decision about the page they sit in, so each is a prop you turn on rather than one you
+ * remember to turn off.
+ */
+
+/** One image in a set: a URL, or the URL plus what is known about it. */
+type ImageSource = string | ImageItem;
+interface ImageItem {
+    src: string;
+    alt?: string;
+    /** A smaller file for the strip and for the frame while the full one loads. */
+    thumbnail?: string;
+    /** The URL to save, when the file to download is not the one being shown. */
+    download?: string;
+    /** Saved under this name instead of the one in the URL. */
+    filename?: string;
+    caption?: ReactNode;
+}
+interface ZoomOptions {
+    /** How far out. 1 is the fitted image; below it the picture is smaller than its frame. */
+    min?: number;
+    max?: number;
+    /** Zoom on the wheel. On by default - it is the gesture every image viewer answers. */
+    wheel?: boolean;
+    /** A double press toggles between fitted and this. `false` leaves the gesture alone. */
+    doubleClick?: boolean;
+}
+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;
+}
+/** Every string the viewer says, for a UI that is not in English. */
+interface ImageLabels {
+    open?: string;
+    close?: string;
+    zoomIn?: string;
+    zoomOut?: string;
+    reset?: string;
+    previous?: string;
+    next?: string;
+    menu?: string;
+    download?: string;
+    newTab?: string;
+    discard?: string;
+    thumbnails?: string;
+    /** The frame itself, announced as the dialog's name. Default "Image viewer". */
+    viewer?: string;
+    /** `{index}` and `{total}` are replaced. Default "{index} of {total}". */
+    counter?: string;
+}
+interface ImageProps extends Omit<ComponentPropsWithoutRef<"img">, "children" | "onSelect"> {
+    src: string;
+    alt: string;
+    /**
+     * The set this image belongs to. Without it the viewer shows this one image; with it the
+     * arrows, the strip and the discard action have something to move through.
+     */
+    images?: readonly ImageSource[];
+    /** Where in `images` this one is. Found by `src` when it is left out. */
+    index?: number;
+    /** Click to see it larger. ON by default: it is what an image in a page is expected to do. */
+    lightbox?: boolean;
+    /** Zoom, with the wheel and the keyboard. ON by default. */
+    zoom?: boolean | ZoomOptions;
+    /**
+     * The picture flies out of the page into the viewer, and back into it on the way out. ON
+     * by default, and skipped anyway for a reader who has asked for less movement.
+     */
+    animate?: boolean;
+    /** Arrows, the counter, and Left/Right on the keyboard. Off by default. */
+    navigation?: boolean;
+    /** The strip of previews along the bottom. Off by default. */
+    thumbnails?: boolean;
+    /** The three dots, and what is under them. Off by default. */
+    menu?: boolean | ImageMenuOptions;
+    /**
+     * Take an image out of the set and move to the next one. Off by default, because it is
+     * destructive and only the caller knows whether it means anything on their page.
+     */
+    discardable?: boolean;
+    onDiscard?: (item: ImageItem, index: number) => void;
+    /** Whether the arrows and the strip wrap around at the ends. On by default. */
+    loop?: boolean;
+    /** The caption under the frame, when the item carries none of its own. */
+    caption?: ReactNode;
+    onOpenChange?: (open: boolean) => void;
+    onIndexChange?: (index: number, item: ImageItem) => void;
+    /** The viewer's stylesheet, injected once. There is no useful unstyled lightbox. */
+    styles?: boolean;
+    labels?: ImageLabels;
+    /** Props for the element wrapping the thumbnail - this is what you position. */
+    wrapperProps?: ComponentPropsWithoutRef<"span">;
+}
+
+declare function Image(props: ImageProps): ReactNode;
+
+export { Image, type ImageItem, type ImageLabels, type ImageMenuOptions, type ImageProps, type ImageSource, type ZoomOptions };

package/dist/react/image.js

@@ -0,0 +1,3 @@
+"use client";
+export { Image } from '../chunk-2RIO4VDV.js';
+import '../chunk-EYZ366LP.js';

package/dist/react/index.d.ts

@@ -25,11 +25,15 @@ export { PaletteContent, PaletteContextValue, PaletteField, PaletteFooter, Palet
 export { R as RecentEntry, b as RecentStore, e as createRecentStore, g as groupRows, i as isPaletteShortcut, m as moveActive, r as recentKey, s as shortcutLabel } from '../palette-D7iuQh_T.js';
 export { Select, SelectContent, SelectContextValue, SelectItem, SelectList, SelectMultipleProps, SelectOptionRow, SelectProps, SelectRoot, SelectRootProps, SelectSearch, SelectSingleProps, SelectTrigger, SelectValue, useSelectContext } from './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, ContextMenuContextValue, ContextMenuItem, ContextMenuList, ContextMenuNode, ContextMenuPanel, ContextMenuProps, ContextMenuRoot, ContextMenuRootProps, ContextMenuRow, ContextMenuSearch, ContextMenuTrigger, ContextMenuTriggerProps, useContextMenuContext } from './context-menu.js';
-export { C as CLIPBOARD_PREFIX, b as ClipboardAction, c as ClipboardMenuLabels, d as ClipboardMenuOptions, e as ClipboardTarget, f as ContextMenuAction, g as ContextMenuEntry, h as ContextMenuInstance, l as ContextMenuOptions, o as ContextMenuState, p as clipboardAction, q as clipboardEntries, r as clipboardHasText, s as createContextMenu, t as inspectClipboardTarget, u as isAction, v as performClipboardAction } from '../clipboard-menu-B_ouitfS.js';
+export { ContextMenu, ContextMenuContent, ContextMenuContentProps, ContextMenuList, ContextMenuPanel, ContextMenuProps, ContextMenuRoot, ContextMenuRootProps, ContextMenuRow, ContextMenuSearch, ContextMenuTrigger, ContextMenuTriggerProps } from './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-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 './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 './image.js';
+export { Video, VideoControls, VideoLabels, VideoProps, VideoSource, VideoTrack } from './video.js';
+export { C as ContextMenuContextValue, a as ContextMenuItem, b as ContextMenuNode, u as useContextMenuContext } from '../context-DR1dpO8b.js';
 
 interface UseInputResult {
     /** Attach to the `<input>`. */

package/dist/react/index.js

@@ -1,28 +1,32 @@
 "use client";
-export { useInput } from '../chunk-MSOCCQGH.js';
+export { useInput } from '../chunk-T7I6WJSN.js';
+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-2RIO4VDV.js';
+import '../chunk-EYZ366LP.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';
 export { createNotificationQueue, defaultQueue, useNotifications } from '../chunk-QYMUIW5I.js';
 export { useMarquee } from '../chunk-ZWR2EXHQ.js';
-export { useSearch } from '../chunk-45UHLZYT.js';
-export { useNetworkState } from '../chunk-S653GLSF.js';
 import '../chunk-KJINGUQN.js';
+export { colorEquals, formatColor, hslToRgb, hsvToRgb, parseColor, rgbToHsl, rgbToHsv, toHex } from '../chunk-S2FPN5ID.js';
+import '../chunk-2QFTRNAZ.js';
 import '../chunk-IXVMRVD4.js';
 export { estimatePasswordStrength, generatePassword } from '../chunk-HC2ME5PU.js';
-export { colorEquals, formatColor, hslToRgb, hsvToRgb, parseColor, rgbToHsl, rgbToHsv, toHex } from '../chunk-S2FPN5ID.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-JLZDS6CV.js';
 import '../chunk-MMQPZGSU.js';
 export { configureFlags, flagAttributes, flagName, flagSrc, flagView, normalizeFlagCode } from '../chunk-LMZJBOZG.js';
 import '../chunk-SNYUBXWQ.js';
 import '../chunk-UOSSNUSC.js';
-import '../chunk-2QFTRNAZ.js';
-export { Input } from '../chunk-3MGBZOAU.js';
+export { Input } from '../chunk-RMNXVWQ4.js';
 import '../chunk-KVLSOQTI.js';
 import '../chunk-F25CGNQC.js';
 export { PaletteContent, PaletteField, PaletteFooter, PaletteItem, PaletteList, PaletteRoot, PaletteTrigger, SearchPalette, usePaletteContext } from '../chunk-FGBIZDV2.js';

package/dist/react/input.js

@@ -1,4 +1,4 @@
 "use client";
-export { Input } from '../chunk-3MGBZOAU.js';
+export { Input } from '../chunk-RMNXVWQ4.js';
 import '../chunk-KVLSOQTI.js';
 import '../chunk-F25CGNQC.js';

package/dist/react/video.d.ts

@@ -0,0 +1,126 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { b as ContextMenuNode, a as ContextMenuItem } from '../context-DR1dpO8b.js';
+import '../context-menu-qqpGBkny.js';
+import '../search-DYgqRp37.js';
+
+/**
+ * The prop shapes for `<Video>`.
+ *
+ * Shaped after Plyr, which is the player this one is measured against: the same control set,
+ * the same shortcuts, the same auto-hiding bar. What differs is that the controls are the
+ * component's own markup rather than a string of HTML it parses, so a project styles them
+ * with the attributes below instead of overriding a stylesheet it did not write.
+ */
+
+interface VideoSource {
+    src: string;
+    /**
+     * `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 {
+    src: string;
+    /** BCP 47: `en`, `es-419`. */
+    srcLang: string;
+    label: string;
+    kind?: "subtitles" | "captions" | "descriptions" | "chapters" | "metadata";
+    default?: boolean;
+}
+/** Which controls the bar carries. Everything is on except `download`, as Plyr has it. */
+interface VideoControls {
+    play?: boolean;
+    progress?: boolean;
+    currentTime?: boolean;
+    duration?: boolean;
+    volume?: boolean;
+    captions?: boolean;
+    settings?: boolean;
+    pip?: boolean;
+    /** Play on a TV. Feature-detected, and absent until the browser reports a screen to cast to. */
+    cast?: boolean;
+    fullscreen?: boolean;
+    /** Off by default: a video a page shows is not always one it means to hand over. */
+    download?: boolean;
+}
+interface VideoLabels {
+    play?: string;
+    pause?: string;
+    mute?: string;
+    unmute?: string;
+    volume?: string;
+    seek?: string;
+    captions?: string;
+    /** The row that turns subtitles off. Default "Off". */
+    captionsOff?: string;
+    /** The heading over the language rows. Default "Subtitles". */
+    subtitles?: string;
+    settings?: string;
+    speed?: string;
+    normal?: string;
+    pip?: string;
+    cast?: string;
+    /** While it is playing on the other screen. Default "Stop casting". */
+    stopCast?: string;
+    /** The context menu's rows. */
+    loop?: string;
+    copyUrl?: string;
+    copyUrlAtTime?: string;
+    enterFullscreen?: string;
+    exitFullscreen?: string;
+    download?: string;
+    /** The player itself, as a screen reader announces the region. Default "Video player". */
+    player?: string;
+}
+interface VideoProps extends Omit<ComponentPropsWithoutRef<"video">, "controls" | "children" | "src" | "contextMenu"> {
+    /** One file, or the list the browser should choose from. */
+    src?: string | readonly VideoSource[];
+    poster?: string;
+    tracks?: readonly VideoTrack[];
+    /** The control bar. `false` leaves a bare `<video>` with nothing over it. */
+    controls?: boolean | VideoControls;
+    /** Rates the settings menu offers. Defaults to Plyr's 0.5 through 2. */
+    speeds?: readonly number[];
+    /** Space, arrows, M, F, C and the digits. On by default, and never while typing. */
+    keyboard?: boolean;
+    /** A press on the picture plays and pauses. On by default. */
+    clickToPlay?: boolean;
+    /** Hide the bar while playing, until the pointer moves. On by default. */
+    autoHide?: boolean;
+    /** How long the pointer has to be still before the bar goes, in ms. Default 2600. */
+    autoHideDelay?: number;
+    /**
+     * The menu a right-click opens, shaped the way YouTube's is. ON by default.
+     *
+     * `false` gives the browser's own menu back - which is what a page wants when the point of
+     * the video is that it can be saved from the native menu.
+     */
+    contextMenu?: boolean | VideoContextMenuOptions;
+    /** The player's stylesheet, injected once. There is no useful unstyled player. */
+    styles?: boolean;
+    labels?: VideoLabels;
+    /** The URL the download control saves. Defaults to what is playing. */
+    download?: string;
+    /** Rendered over the picture, under the controls - a title, a badge, your own overlay. */
+    children?: ReactNode;
+    /** Props for the element wrapping the video and its controls; this is what you size. */
+    wrapperProps?: ComponentPropsWithoutRef<"div">;
+}
+interface VideoContextMenuOptions {
+    /** Rows of your own, after the built-in ones. */
+    items?: readonly ContextMenuNode[];
+    /** A row was invoked - yours, or one of the built-in ids. */
+    onSelect?: (item: ContextMenuItem) => void;
+    /** The two "copy the link" rows. On whenever the menu is, where there is a URL to copy. */
+    copyUrl?: boolean;
+    /** The heading over the rows, naming what the menu is acting on. */
+    title?: string;
+}
+
+declare function Video(props: VideoProps): ReactNode;
+
+export { Video, type VideoContextMenuOptions, type VideoControls, type VideoLabels, type VideoProps, type VideoSource, type VideoTrack };

package/dist/react/video.js

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

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

@@ -23,11 +23,15 @@ export { PaletteContent, PaletteContextValue, PaletteField, PaletteFooter, Palet
 export { R as RecentEntry, b as RecentStore, e as createRecentStore, g as groupRows, i as isPaletteShortcut, m as moveActive, r as recentKey, s as shortcutLabel } from '../palette-D7iuQh_T.js';
 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, ContextMenuContextValue, ContextMenuItem, ContextMenuList, ContextMenuNode, ContextMenuPanel, ContextMenuProps, ContextMenuRoot, ContextMenuRootProps, ContextMenuRow, ContextMenuSearch, ContextMenuTrigger, ContextMenuTriggerProps, useContextMenuContext } from '../react/context-menu.js';
-export { C as CLIPBOARD_PREFIX, b as ClipboardAction, c as ClipboardMenuLabels, d as ClipboardMenuOptions, e as ClipboardTarget, f as ContextMenuAction, g as ContextMenuEntry, h as ContextMenuInstance, l as ContextMenuOptions, o as ContextMenuState, p as clipboardAction, q as clipboardEntries, r as clipboardHasText, s as createContextMenu, t as inspectClipboardTarget, u as isAction, v as performClipboardAction } from '../clipboard-menu-B_ouitfS.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-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-DR1dpO8b.js';
 
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLElement>>;