@enigmax/primitives 0.26.0 → 0.28.0

package/dist/{color-T63FLJNH.js → color-WBNVPFT5.js}

@@ -1,5 +1,7 @@
 import { parseColor, rgbToHsv, colorEquals, hsvToRgb, formatColor, toHex } from './chunk-S2FPN5ID.js';
 import { writeValue, ColorSwatch } from './chunk-KVLSOQTI.js';
+import { useFloating, tabOut } from './chunk-RXEO4WPI.js';
+import { createPortal } from 'react-dom';
 import { useLayoutEffect, useRef, useState, useMemo, useEffect, useCallback } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -23,6 +25,11 @@ var COLOR_STYLES = `
        on, which is why only one colour is a property. */
     --enigma-color-checker: rgba(255, 255, 255, 0.22);
     --enigma-color-checker-size: 0.5rem;
+
+    /* The layer every portaled popup shares, declared with the same value by the select and
+       the context menu: above the lightbox (9999), because a popup is opened FROM whatever
+       is on top. Not in the light-scheme block, or half the readers get no z-index. */
+    --enigma-floating-z: 10000;
 }
 
 @media (prefers-color-scheme: light) {
@@ -39,9 +46,7 @@ var COLOR_STYLES = `
     }
 }
 
-/* The anchor the panel hangs from. Inline so it sits in the field's own row, and the
-   positioning context so the panel needs no portal and no scroll listener: it moves with
-   the field because it is INSIDE it. */
+/* The anchor the panel is placed against. Inline so it sits in the field's own row. */
 [data-enigma-color] { position: relative; display: inline-flex; flex: none; }
 
 [data-enigma-color-swatch] {
@@ -65,8 +70,13 @@ var COLOR_STYLES = `
    rather than the last good colour: a stale swatch says the value is fine when it is not. */
 [data-enigma-color-swatch][data-invalid] [data-enigma-color-fill] { background: none; }
 
+/* Portaled and placed in viewport coordinates against the swatch (see react/floating.ts),
+   so a dialog or a card with overflow: hidden cannot cut it off. left, top, max-height and
+   data-side are written by the placement: below, flipped above when there is more room
+   there, and capped to the room it has - scrolling inside rather than off the screen. */
 [data-enigma-color-panel] {
-    position: absolute; z-index: 60; top: calc(100% + 0.375rem); left: 0;
+    position: fixed; z-index: var(--enigma-floating-z);
+    overflow-y: auto; overscroll-behavior: contain;
     display: grid; gap: 0.625rem;
     box-sizing: border-box; width: var(--enigma-color-panel-width); padding: 0.625rem;
     color: var(--enigma-color-text); background: var(--enigma-color-panel-bg);
@@ -74,9 +84,6 @@ var COLOR_STYLES = `
     border-radius: var(--enigma-color-panel-radius);
     box-shadow: var(--enigma-color-panel-shadow);
 }
-/* Flipped when the field sits near the bottom of the window. Without it the panel opens off
-   the screen and the controls are unreachable, which is the same defect the select fixes. */
-[data-enigma-color-panel][data-side="top"] { top: auto; bottom: calc(100% + 0.375rem); }
 
 [data-enigma-color-area] {
     position: relative; height: var(--enigma-color-area-height);
@@ -164,6 +171,7 @@ var COLOR_STYLES = `
 var INITIAL = { h: 0, s: 0, v: 0, a: 1 };
 var STEP = { fine: 0.01, coarse: 0.1, hue: 1, hueCoarse: 10 };
 var MARGIN = 12;
+var GAP = 6;
 var FORMATS = ["hex", "rgb", "hsl"];
 var FORMAT_LABELS = { hex: "HEX", rgb: "RGB", hsl: "HSL" };
 var injected = false;
@@ -200,7 +208,6 @@ function ColorExtras({
   const swatchRef = useRef(null);
   const areaRef = useRef(null);
   const [open, setOpen] = useState(openOnMount && !locked);
-  const [side, setSide] = useState(placement === "top" ? "top" : "bottom");
   const parsed = useMemo(() => parseColor(value), [value]);
   const [hsv, setHsv] = useState(() => parsed ? rgbToHsv(parsed) : INITIAL);
   useEffect(() => {
@@ -230,22 +237,14 @@ function ColorExtras({
     setOpenState(false);
     if (focusSwatch) swatchRef.current?.focus();
   }, [setOpenState]);
-  const place = useCallback(() => {
-    if (placement !== "auto") return setSide(placement);
-    const anchor = anchorRef.current?.getBoundingClientRect();
-    const panel = panelRef.current?.getBoundingClientRect();
-    if (!anchor || !panel) return;
-    const below = window.innerHeight - anchor.bottom;
-    setSide(below < panel.height + MARGIN && anchor.top > below ? "top" : "bottom");
-  }, [placement]);
-  useLayoutEffect(() => {
-    if (!open) return;
-    place();
-  }, [open, place]);
+  const showing = open && !locked;
+  const container = useFloating({ open: showing, anchorRef, panelRef, gap: GAP, margin: MARGIN, side: placement });
+  useEffect(() => {
+    if (showing && container) areaRef.current?.focus();
+  }, [showing, container]);
   useEffect(() => {
     if (!open) return;
-    areaRef.current?.focus();
-    const inside = (target) => Boolean(anchorRef.current?.contains(target));
+    const inside = (target) => Boolean(anchorRef.current?.contains(target) || panelRef.current?.contains(target));
     const onPointerDown = (event) => {
       if (!inside(event.target)) setOpenState(false);
     };
@@ -253,16 +252,13 @@ function ColorExtras({
       if (event.target === document.body || inside(event.target)) return;
       setOpenState(false);
     };
-    const onResize = () => place();
     document.addEventListener("pointerdown", onPointerDown, true);
     document.addEventListener("focusin", onFocusIn, true);
-    window.addEventListener("resize", onResize);
     return () => {
       document.removeEventListener("pointerdown", onPointerDown, true);
       document.removeEventListener("focusin", onFocusIn, true);
-      window.removeEventListener("resize", onResize);
     };
-  }, [open, place, setOpenState]);
+  }, [open, setOpenState]);
   const track = useCallback((event, onMove) => {
     if (event.button !== 0) return;
     const element = event.currentTarget;
@@ -354,149 +350,152 @@ function ColorExtras({
       locked,
       label: text.open ?? "Pick a colour",
       onPress: () => open ? close(true) : setOpenState(true),
-      children: open && !locked && /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref: panelRef,
-          "data-enigma-color-panel": "",
-          "data-side": side,
-          role: "dialog",
-          "aria-label": text.panel ?? "Colour picker",
-          style: panelStyle,
-          onKeyDown: (event) => {
-            if (event.key !== "Escape") return;
-            event.stopPropagation();
-            close(true);
-          },
-          children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                ref: areaRef,
-                "data-enigma-color-area": "",
-                role: "slider",
-                tabIndex: 0,
-                "aria-label": text.area ?? "Saturation and brightness",
-                "aria-valuemin": 0,
-                "aria-valuemax": 100,
-                "aria-valuenow": Math.round(hsv.s * 100),
-                "aria-valuetext": `${Math.round(hsv.s * 100)}% saturation, ${Math.round(hsv.v * 100)}% brightness, ${valueText}`,
-                onKeyDown: areaKeys,
-                onPointerDown: (event) => track(event, (x, y) => commit({ ...hsv, s: x, v: 1 - y })),
-                children: /* @__PURE__ */ jsx("span", { "data-enigma-color-thumb": "", style: { left: `${hsv.s * 100}%`, top: `${(1 - hsv.v) * 100}%` } })
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { "data-enigma-color-controls": "", children: [
-              /* @__PURE__ */ jsx("span", { "data-enigma-color-preview": "", "data-enigma-color-checkers": "", children: /* @__PURE__ */ jsx("span", { "data-enigma-color-fill": "", style: { background: css } }) }),
-              dropper && /* @__PURE__ */ jsx(
-                "button",
+      children: showing && container && createPortal(
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: panelRef,
+            "data-enigma-color-panel": "",
+            role: "dialog",
+            "aria-label": text.panel ?? "Colour picker",
+            style: panelStyle,
+            onKeyDown: (event) => {
+              if (tabOut(event, panelRef.current, swatchRef.current)) return;
+              if (event.key !== "Escape") return;
+              event.stopPropagation();
+              close(true);
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
                 {
-                  type: "button",
-                  "data-enigma-color-eyedropper": "",
-                  "aria-label": text.eyedropper ?? "Pick a colour from the screen",
-                  title: text.eyedropper ?? "Pick a colour from the screen",
-                  onClick: () => {
-                    void pick();
-                  },
-                  children: /* @__PURE__ */ jsx(EyedropperIcon, {})
+                  ref: areaRef,
+                  "data-enigma-color-area": "",
+                  role: "slider",
+                  tabIndex: 0,
+                  "aria-label": text.area ?? "Saturation and brightness",
+                  "aria-valuemin": 0,
+                  "aria-valuemax": 100,
+                  "aria-valuenow": Math.round(hsv.s * 100),
+                  "aria-valuetext": `${Math.round(hsv.s * 100)}% saturation, ${Math.round(hsv.v * 100)}% brightness, ${valueText}`,
+                  onKeyDown: areaKeys,
+                  onPointerDown: (event) => track(event, (x, y) => commit({ ...hsv, s: x, v: 1 - y })),
+                  children: /* @__PURE__ */ jsx("span", { "data-enigma-color-thumb": "", style: { left: `${hsv.s * 100}%`, top: `${(1 - hsv.v) * 100}%` } })
                 }
               ),
-              /* @__PURE__ */ jsxs("div", { "data-enigma-color-rails": "", children: [
+              /* @__PURE__ */ jsxs("div", { "data-enigma-color-controls": "", children: [
+                /* @__PURE__ */ jsx("span", { "data-enigma-color-preview": "", "data-enigma-color-checkers": "", children: /* @__PURE__ */ jsx("span", { "data-enigma-color-fill": "", style: { background: css } }) }),
+                dropper && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "data-enigma-color-eyedropper": "",
+                    "aria-label": text.eyedropper ?? "Pick a colour from the screen",
+                    title: text.eyedropper ?? "Pick a colour from the screen",
+                    onClick: () => {
+                      void pick();
+                    },
+                    children: /* @__PURE__ */ jsx(EyedropperIcon, {})
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { "data-enigma-color-rails": "", children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      "data-enigma-color-rail": "hue",
+                      role: "slider",
+                      tabIndex: 0,
+                      "aria-label": text.hue ?? "Hue",
+                      "aria-valuemin": 0,
+                      "aria-valuemax": 360,
+                      "aria-valuenow": Math.round(hsv.h),
+                      "aria-valuetext": `${Math.round(hsv.h)} degrees`,
+                      onKeyDown: (event) => railKeys(event, "hue"),
+                      onPointerDown: (event) => track(event, (x) => commit({ ...hsv, h: x * 360 })),
+                      children: /* @__PURE__ */ jsx("span", { "data-enigma-color-thumb": "", style: { left: `${hsv.h / 360 * 100}%` } })
+                    }
+                  ),
+                  alpha && /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      "data-enigma-color-rail": "alpha",
+                      "data-enigma-color-checkers": "",
+                      role: "slider",
+                      tabIndex: 0,
+                      "aria-label": text.alpha ?? "Opacity",
+                      "aria-valuemin": 0,
+                      "aria-valuemax": 100,
+                      "aria-valuenow": Math.round(hsv.a * 100),
+                      "aria-valuetext": `${Math.round(hsv.a * 100)}% opacity`,
+                      onKeyDown: (event) => railKeys(event, "alpha"),
+                      onPointerDown: (event) => track(event, (x) => commit({ ...hsv, a: x })),
+                      children: [
+                        /* @__PURE__ */ jsx("span", { "data-enigma-color-gradient": "" }),
+                        /* @__PURE__ */ jsx("span", { "data-enigma-color-thumb": "", style: { left: `${hsv.a * 100}%` } })
+                      ]
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { "data-enigma-color-value": "", children: [
                 /* @__PURE__ */ jsx(
-                  "div",
+                  "button",
                   {
-                    "data-enigma-color-rail": "hue",
-                    role: "slider",
-                    tabIndex: 0,
-                    "aria-label": text.hue ?? "Hue",
-                    "aria-valuemin": 0,
-                    "aria-valuemax": 360,
-                    "aria-valuenow": Math.round(hsv.h),
-                    "aria-valuetext": `${Math.round(hsv.h)} degrees`,
-                    onKeyDown: (event) => railKeys(event, "hue"),
-                    onPointerDown: (event) => track(event, (x) => commit({ ...hsv, h: x * 360 })),
-                    children: /* @__PURE__ */ jsx("span", { "data-enigma-color-thumb": "", style: { left: `${hsv.h / 360 * 100}%` } })
+                    type: "button",
+                    "data-enigma-color-format": "",
+                    "aria-label": `${text.formatAs ?? "Show as"} ${FORMAT_LABELS[nextFormat]}`,
+                    title: `${text.formatAs ?? "Show as"} ${FORMAT_LABELS[nextFormat]}`,
+                    onClick: () => {
+                      setShown(nextFormat);
+                      setDraft(null);
+                    },
+                    children: FORMAT_LABELS[shown]
                   }
                 ),
-                alpha && /* @__PURE__ */ jsxs(
-                  "div",
+                /* @__PURE__ */ jsx(
+                  "input",
                   {
-                    "data-enigma-color-rail": "alpha",
-                    "data-enigma-color-checkers": "",
-                    role: "slider",
-                    tabIndex: 0,
-                    "aria-label": text.alpha ?? "Opacity",
-                    "aria-valuemin": 0,
-                    "aria-valuemax": 100,
-                    "aria-valuenow": Math.round(hsv.a * 100),
-                    "aria-valuetext": `${Math.round(hsv.a * 100)}% opacity`,
-                    onKeyDown: (event) => railKeys(event, "alpha"),
-                    onPointerDown: (event) => track(event, (x) => commit({ ...hsv, a: x })),
-                    children: [
-                      /* @__PURE__ */ jsx("span", { "data-enigma-color-gradient": "" }),
-                      /* @__PURE__ */ jsx("span", { "data-enigma-color-thumb": "", style: { left: `${hsv.a * 100}%` } })
-                    ]
+                    type: "text",
+                    "data-enigma-color-input": "",
+                    value: draft ?? readout,
+                    "aria-label": text.value ?? "Colour value",
+                    spellCheck: false,
+                    autoComplete: "off",
+                    autoCorrect: "off",
+                    autoCapitalize: "off",
+                    onChange: (event) => typed(event.target.value),
+                    onBlur: () => setDraft(null),
+                    onKeyDown: (event) => {
+                      if (event.key !== "Enter") return;
+                      event.preventDefault();
+                      setDraft(null);
+                    }
                   }
                 )
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { "data-enigma-color-value": "", children: [
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  "data-enigma-color-format": "",
-                  "aria-label": `${text.formatAs ?? "Show as"} ${FORMAT_LABELS[nextFormat]}`,
-                  title: `${text.formatAs ?? "Show as"} ${FORMAT_LABELS[nextFormat]}`,
-                  onClick: () => {
-                    setShown(nextFormat);
-                    setDraft(null);
+              ] }),
+              swatches && swatches.length > 0 && /* @__PURE__ */ jsx("div", { "data-enigma-color-swatches": "", role: "group", "aria-label": text.swatches ?? "Preset colours", children: swatches.map((preset) => {
+                const colour = parseColor(preset);
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "data-enigma-color-preset": "",
+                    "data-enigma-color-checkers": "",
+                    style: { background: preset },
+                    "aria-label": preset,
+                    title: preset,
+                    "aria-pressed": colourEqualsPreset(colour, css),
+                    onClick: () => {
+                      if (colour) commit(rgbToHsv(alpha ? colour : { ...colour, a: 1 }, hsv.h));
+                    }
                   },
-                  children: FORMAT_LABELS[shown]
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "text",
-                  "data-enigma-color-input": "",
-                  value: draft ?? readout,
-                  "aria-label": text.value ?? "Colour value",
-                  spellCheck: false,
-                  autoComplete: "off",
-                  autoCorrect: "off",
-                  autoCapitalize: "off",
-                  onChange: (event) => typed(event.target.value),
-                  onBlur: () => setDraft(null),
-                  onKeyDown: (event) => {
-                    if (event.key !== "Enter") return;
-                    event.preventDefault();
-                    setDraft(null);
-                  }
-                }
-              )
-            ] }),
-            swatches && swatches.length > 0 && /* @__PURE__ */ jsx("div", { "data-enigma-color-swatches": "", role: "group", "aria-label": text.swatches ?? "Preset colours", children: swatches.map((preset) => {
-              const colour = parseColor(preset);
-              return /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  "data-enigma-color-preset": "",
-                  "data-enigma-color-checkers": "",
-                  style: { background: preset },
-                  "aria-label": preset,
-                  title: preset,
-                  "aria-pressed": colourEqualsPreset(colour, css),
-                  onClick: () => {
-                    if (colour) commit(rgbToHsv(alpha ? colour : { ...colour, a: 1 }, hsv.h));
-                  }
-                },
-                preset
-              );
-            }) })
-          ]
-        }
+                  preset
+                );
+              }) })
+            ]
+          }
+        ),
+        container
       )
     }
   );

package/dist/{context-BfjYGPnH.d.ts → context-DR1dpO8b.d.ts}

@@ -1,5 +1,5 @@
 import { ReactNode, RefObject } from 'react';
-import { a as ContextMenuAction, b as ContextMenuEntry, c as ContextMenuInstance, j as ContextMenuState, h as ContextMenuPoint } from './context-menu-D3FtTn7v.js';
+import { a as ContextMenuAction, b as ContextMenuEntry, c as ContextMenuInstance, j as ContextMenuState, h as ContextMenuPoint } from './context-menu-qqpGBkny.js';
 
 /**
  * One row, as React draws it. The core carries `icon` as `unknown` because it cannot know

package/dist/{context-menu-D3FtTn7v.d.ts → context-menu-qqpGBkny.d.ts}

@@ -126,6 +126,12 @@ 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";
 }
 interface ContextMenuInstance {
     readonly state: ContextMenuState;

package/dist/index.d.ts

@@ -9,8 +9,8 @@ export { R as RelativeTimeFormat, a as RelativeTimeOptions, b as RelativeTimePre
 export { F as FLAG_CDN, a as FLAG_RATIO, b as FlagConfig, c as FlagFormat, d as FlagOptions, e as FlagShape, f as FlagSource, g as FlagView, h as configureFlags, i as flagAttributes, j as flagConfig, k as flagName, l as flagSrc, m as flagView, n as normalizeFlagCode, r as resetFlagConfig } from './flags-BQU1V9rE.js';
 export { P as PaletteKey, a as PositionedRow, R as RecentEntry, b as RecentStore, c as RecentStoreOptions, d as RowGroup, e as createRecentStore, g as groupRows, i as isPaletteShortcut, m as moveActive, r as recentKey, s as shortcutLabel } from './palette-D7iuQh_T.js';
 export { S as SELECT_SEARCH_KEYS, a as SelectInstance, b as SelectMoveKey, c as SelectOption, d as SelectOptions, e as SelectState, f as createSelect } from './select-ClSy-J1f.js';
-export { C as CONTEXT_MENU_SEARCH_KEYS, a as ContextMenuAction, b as ContextMenuEntry, c as ContextMenuInstance, d as ContextMenuLabel, e as ContextMenuLevel, f as ContextMenuMoveKey, g as ContextMenuOptions, h as ContextMenuPoint, i as ContextMenuSeparator, 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-BvXJCSFN.js';
+export { C as CONTEXT_MENU_SEARCH_KEYS, a as ContextMenuAction, b as ContextMenuEntry, c as ContextMenuInstance, d as ContextMenuLabel, e as ContextMenuLevel, f as ContextMenuMoveKey, g as ContextMenuOptions, h as ContextMenuPoint, i as ContextMenuSeparator, j as ContextMenuState, k as createContextMenu, l as isAction } from './context-menu-qqpGBkny.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 { D as DEFAULT_SELECTION_SHORTCUTS, S as SelectionClickModifiers, 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, a as ShortcutEvent, b as ShortcutSpec, T as TYPEAHEAD_MS, c as TypeaheadState, d as TypeaheadStep, i as isApplePlatform, m as matchesShortcut, p as parseShortcut, s as shortcutList, e as shortcutText, f as shortcutTokens, t as typeaheadStep } from './keys-D2zJs1uB.js';
 
@@ -140,6 +140,23 @@ declare function filenameFrom(url: string, fallback?: string): string;
  * when that is refused (no CORS header) - a tab is still better than nothing happening.
  */
 declare function downloadFile(url: string, filename?: string): Promise<void>;
+/**
+ * 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.
+ */
+declare function dataUrlToBlob(url: string): Blob;
+/**
+ * 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.
+ */
+declare function openInNewTab(url: string): void;
 /** How long the picture takes to fly, when the stylesheet does not say otherwise. */
 declare const FLIGHT_MS = 300;
 /**
@@ -249,6 +266,15 @@ declare function toggleFullscreen(container: HTMLElement, video: HTMLVideoElemen
 /** Picture in picture, where the browser has it. Firefox has its own button and no API. */
 declare function supportsPip(): boolean;
 declare function togglePip(video: HTMLVideoElement): Promise<void>;
+/**
+ * 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.
+ */
+declare function sourceType(url: string): string | undefined;
 /** One subtitle track, as the menu lists it. */
 interface CaptionTrack {
     /** Where it sits in the element's own `textTracks`, which is what turns it on. */
@@ -303,4 +329,4 @@ declare function watchRemote(video: HTMLVideoElement, onChange: (state: RemoteSt
  */
 declare function promptRemote(video: HTMLVideoElement): Promise<void>;
 
-export { type Box, type CaptionTrack, FLIGHT_MS, IDENTITY, INPUT_ICON_PATHS, type PlayerCommand, type RemoteState, SEEK_JUMP, SEEK_STEP, SPEEDS, type Transform, VOLUME_STEP, ZOOM_DOUBLE, ZOOM_LIMITS, ZOOM_STEP, type ZoomLimits, activeCaption, bufferedAhead, captionTracks, clampPan, clampScale, commandFor, downloadFile, filenameFrom, fittedSize, flightFrom, flightMs, formatTime, fractionAt, fullscreenElement, iconMarkup, isTypingTarget, nextIndex, nextSpeed, pinchDistance, prefersReducedMotion, progress, promptRemote, showCaption, supportsPip, supportsRemote, toggleFullscreen, togglePip, watchRemote, wheelFactor, zoomAt };
+export { type Box, type CaptionTrack, FLIGHT_MS, IDENTITY, INPUT_ICON_PATHS, type PlayerCommand, type RemoteState, SEEK_JUMP, SEEK_STEP, SPEEDS, type Transform, VOLUME_STEP, ZOOM_DOUBLE, ZOOM_LIMITS, ZOOM_STEP, type ZoomLimits, activeCaption, bufferedAhead, captionTracks, clampPan, clampScale, commandFor, dataUrlToBlob, downloadFile, filenameFrom, fittedSize, flightFrom, flightMs, formatTime, fractionAt, fullscreenElement, iconMarkup, isTypingTarget, nextIndex, nextSpeed, openInNewTab, pinchDistance, prefersReducedMotion, progress, promptRemote, showCaption, sourceType, supportsPip, supportsRemote, toggleFullscreen, togglePip, watchRemote, wheelFactor, zoomAt };

package/dist/index.js

@@ -1,12 +1,12 @@
-export { FLIGHT_MS, IDENTITY, ZOOM_DOUBLE, ZOOM_LIMITS, ZOOM_STEP, clampPan, clampScale, downloadFile, filenameFrom, fittedSize, flightFrom, flightMs, nextIndex, pinchDistance, prefersReducedMotion, wheelFactor, zoomAt } from './chunk-QIIV2QSV.js';
+export { FLIGHT_MS, IDENTITY, ZOOM_DOUBLE, ZOOM_LIMITS, ZOOM_STEP, clampPan, clampScale, dataUrlToBlob, downloadFile, filenameFrom, fittedSize, flightFrom, flightMs, nextIndex, openInNewTab, pinchDistance, prefersReducedMotion, wheelFactor, zoomAt } from './chunk-HUUINHPR.js';
 export { createInput } from './chunk-KJINGUQN.js';
 export { colorEquals, formatColor, hslToRgb, hsvToRgb, parseColor, rgbToHsl, rgbToHsv, toHex } from './chunk-S2FPN5ID.js';
 export { SERVER_NETWORK_STATE, createNetworkMonitor } from './chunk-2QFTRNAZ.js';
 export { ensureZone, normalizeDate, parseDuration, relativeTimeAttributes, relativeTimeView } from './chunk-IXVMRVD4.js';
 export { estimatePasswordStrength, generatePassword } from './chunk-HC2ME5PU.js';
-export { CLIPBOARD_PREFIX, CONTEXT_MENU_SEARCH_KEYS, clipboardAction, clipboardEntries, clipboardHasText, createContextMenu, inspectClipboardTarget, isAction, performClipboardAction } from './chunk-Z3VDE7OA.js';
+export { CLIPBOARD_PREFIX, CONTEXT_MENU_SEARCH_KEYS, clipboardAction, clipboardEntries, clipboardHasText, createContextMenu, inspectClipboardTarget, isAction, performClipboardAction } from './chunk-YQV5XZIA.js';
 export { DEFAULT_SELECTION_SHORTCUTS, createSelection } from './chunk-WSQC3PCC.js';
-export { SEEK_JUMP, SEEK_STEP, SPEEDS, VOLUME_STEP, activeCaption, bufferedAhead, captionTracks, commandFor, formatTime, fractionAt, fullscreenElement, isTypingTarget, nextSpeed, progress, promptRemote, showCaption, supportsPip, supportsRemote, toggleFullscreen, togglePip, watchRemote } from './chunk-RUEQ3TGP.js';
+export { SEEK_JUMP, SEEK_STEP, SPEEDS, VOLUME_STEP, activeCaption, bufferedAhead, captionTracks, commandFor, formatTime, fractionAt, fullscreenElement, isTypingTarget, nextSpeed, progress, promptRemote, showCaption, sourceType, supportsPip, supportsRemote, toggleFullscreen, togglePip, watchRemote } from './chunk-JLZDS6CV.js';
 export { createButton } from './chunk-MMQPZGSU.js';
 export { FLAG_CDN, FLAG_RATIO, configureFlags, flagAttributes, flagConfig, flagName, flagSrc, flagView, normalizeFlagCode, resetFlagConfig } from './chunk-LMZJBOZG.js';
 export { createNotifications } from './chunk-SNYUBXWQ.js';

package/dist/{menu-PNQRTRNV.js → menu-5JZMGNOT.js}

@@ -1,5 +1,6 @@
-import { ContextMenu, useContextMenuContext } from './chunk-DZMHY3SU.js';
-import './chunk-Z3VDE7OA.js';
+import { ContextMenu, useContextMenuContext } from './chunk-RRPWJAIJ.js';
+import './chunk-YQV5XZIA.js';
+import './chunk-RXEO4WPI.js';
 import './chunk-4VUHQFAT.js';
 import './chunk-HS3X3XCW.js';
 import './chunk-4ZPMP47J.js';

package/dist/{menu-MSQSE6U5.js → menu-O3G4LM5O.js}

@@ -1,8 +1,9 @@
-import { Download, MenuButton } from './chunk-ISXB5RUH.js';
-import { downloadFile } from './chunk-QIIV2QSV.js';
-import { ContextMenu, useContextMenuContext } from './chunk-DZMHY3SU.js';
+import { Download, NewTab, MenuButton } from './chunk-CB7K6VW4.js';
+import { downloadFile, openInNewTab } from './chunk-HUUINHPR.js';
+import { ContextMenu, useContextMenuContext } from './chunk-RRPWJAIJ.js';
 import './chunk-EYZ366LP.js';
-import './chunk-Z3VDE7OA.js';
+import './chunk-YQV5XZIA.js';
+import './chunk-RXEO4WPI.js';
 import './chunk-4VUHQFAT.js';
 import './chunk-HS3X3XCW.js';
 import './chunk-4ZPMP47J.js';
@@ -14,6 +15,9 @@ function ImageMenu({ item, index, options, labels }) {
   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);
@@ -25,6 +29,7 @@ function ImageMenu({ item, index, options, labels }) {
       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: [

package/dist/next/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';
 
 /**
  * The Next.js entry. Same components, wired to `next/link`.

package/dist/next/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-RRPWJAIJ.js';
 export { SelectionList, useSelection } from '../chunk-N6PDHMAX.js';
-export { Image } from '../chunk-4SZ5N7BA.js';
+export { Image } from '../chunk-IQMHDRJF.js';
 import '../chunk-EYZ366LP.js';
-export { Video } from '../chunk-JJVZYW5C.js';
+export { Video } from '../chunk-JPBVKXOL.js';
 import { Button } from '../chunk-6BGBYUSZ.js';
 export { getLinkComponent, setLinkComponent, useButton } from '../chunk-6BGBYUSZ.js';
 export { Flag } from '../chunk-NPHRS2Q7.js';
@@ -20,18 +20,19 @@ 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';
 import '../chunk-UOSSNUSC.js';
-export { Input } from '../chunk-RMNXVWQ4.js';
+export { Input } from '../chunk-YHH5U2NW.js';
 import '../chunk-KVLSOQTI.js';
 import '../chunk-F25CGNQC.js';
 export { PaletteContent, PaletteField, PaletteFooter, PaletteItem, PaletteList, PaletteRoot, PaletteTrigger, SearchPalette, usePaletteContext } from '../chunk-FGBIZDV2.js';
-export { Select, SelectContent, SelectList, SelectOptionRow, SelectRoot, SelectSearch, SelectTrigger, SelectValue, useSelectContext } from '../chunk-VKL3DEIQ.js';
+export { Select, SelectContent, SelectList, SelectOptionRow, SelectRoot, SelectSearch, SelectTrigger, SelectValue, useSelectContext } from '../chunk-6WIGVIQF.js';
+import '../chunk-RXEO4WPI.js';
 export { createSelect } from '../chunk-NONGREXC.js';
 export { isApplePlatform, matchesShortcut, parseShortcut, shortcutText, shortcutTokens } from '../chunk-4VUHQFAT.js';
 export { Slot, mergeSlotProps } from '../chunk-HS3X3XCW.js';