@enigmax/primitives 0.27.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/{menu-52PXC5PL.js → menu-5JZMGNOT.js}

@@ -1,5 +1,6 @@
-import { ContextMenu, useContextMenuContext } from './chunk-CPJJ3FPW.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-YIGMPFUP.js → menu-O3G4LM5O.js}

@@ -1,8 +1,9 @@
-import { Download, NewTab, MenuButton } from './chunk-O2UJ5ZIX.js';
+import { Download, NewTab, MenuButton } from './chunk-CB7K6VW4.js';
 import { downloadFile, openInNewTab } from './chunk-HUUINHPR.js';
-import { ContextMenu, useContextMenuContext } from './chunk-CPJJ3FPW.js';
+import { ContextMenu, useContextMenuContext } from './chunk-RRPWJAIJ.js';
 import './chunk-EYZ366LP.js';
 import './chunk-YQV5XZIA.js';
+import './chunk-RXEO4WPI.js';
 import './chunk-4VUHQFAT.js';
 import './chunk-HS3X3XCW.js';
 import './chunk-4ZPMP47J.js';

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-CPJJ3FPW.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-2RIO4VDV.js';
+export { Image } from '../chunk-IQMHDRJF.js';
 import '../chunk-EYZ366LP.js';
-export { Video } from '../chunk-PVDU6AZU.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';
@@ -27,11 +27,12 @@ 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';

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

@@ -130,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    /* 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";
+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-floating-z is the layer the select and the colour picker share, declared with\n       the same value in their sheets, so overriding it once moves every popup together. */\n    --enigma-floating-z: 10000;\n    --enigma-menu-z: var(--enigma-floating-z);\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    /* A column, so the max-height the placement writes in a short window shrinks the LIST,\n       which scrolls, rather than letting rows spill past the panel's edge. */\n    display: flex; flex-direction: column;\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    min-height: 0; flex: 0 1 auto;\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. */

package/dist/react/context-menu.js

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

package/dist/react/image.js

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

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-CPJJ3FPW.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-2RIO4VDV.js';
+export { Image } from '../chunk-IQMHDRJF.js';
 import '../chunk-EYZ366LP.js';
-export { Video } from '../chunk-PVDU6AZU.js';
+export { Video } from '../chunk-JPBVKXOL.js';
 export { Button, getLinkComponent, setLinkComponent, useButton } from '../chunk-6BGBYUSZ.js';
 export { Flag } from '../chunk-NPHRS2Q7.js';
 export { Toaster, toast, useSonner } from '../chunk-WPTBURIC.js';
@@ -26,11 +26,12 @@ 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';

package/dist/react/input.js

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