npm - @enigmax/primitives - Versions diffs - 0.27.0 → 0.28.0 - Mend

@enigmax/primitives 0.27.0 → 0.28.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (36) hide show

package/dist/{chunk-VKL3DEIQ.js → chunk-6WIGVIQF.js} +58 -37
package/dist/{chunk-O2UJ5ZIX.js → chunk-CB7K6VW4.js} +1 -1
package/dist/{chunk-2RIO4VDV.js → chunk-IQMHDRJF.js} +2 -2
package/dist/{chunk-PVDU6AZU.js → chunk-JPBVKXOL.js} +1 -1
package/dist/{chunk-CPJJ3FPW.js → chunk-RRPWJAIJ.js} +26 -12
package/dist/chunk-RXEO4WPI.js +111 -0
package/dist/{chunk-RMNXVWQ4.js → chunk-YHH5U2NW.js} +1 -1
package/dist/{color-T63FLJNH.js → color-WBNVPFT5.js} +157 -158
package/dist/{menu-52PXC5PL.js → menu-5JZMGNOT.js} +2 -1
package/dist/{menu-YIGMPFUP.js → menu-O3G4LM5O.js} +3 -2
package/dist/next/index.js +6 -5
package/dist/react/context-menu.d.ts +1 -1
package/dist/react/context-menu.js +2 -1
package/dist/react/image.js +1 -1
package/dist/react/index.js +6 -5
package/dist/react/input.js +1 -1
package/dist/react/select.d.ts +6 -1
package/dist/react/select.js +2 -1
package/dist/react/video.js +1 -1
package/dist/react-router/index.js +6 -5
package/dist/viewer-C323RYNZ.js +3 -0
package/package.json +1 -1
package/recipes/color/styles.css +12 -7
package/recipes/context-menu/styles.css +9 -2
package/recipes/select/styles.css +24 -7
package/registry.json +98 -5
package/src/core/floating.ts +71 -0
package/src/react/context-menu/root.tsx +30 -15
package/src/react/context-menu/styles.ts +9 -2
package/src/react/floating.ts +185 -0
package/src/react/input/color-styles.ts +12 -7
package/src/react/input/color.tsx +30 -27
package/src/react/select/context.ts +5 -0
package/src/react/select/root.tsx +33 -21
package/src/react/select/styles.ts +24 -7
package/dist/viewer-N5WLFB24.js +0 -3

package/src/react/floating.ts ADDED Viewed

@@ -0,0 +1,185 @@
+"use client";
+import { placeFloating, type FloatingRect, type FloatingSide } from "@/core/floating";
+import { useCallback, useEffect, useLayoutEffect, useState, type DependencyList, type KeyboardEvent, type RefObject } from "react";
+/**
+ * A popup that cannot be clipped: portaled out of the tree and placed in viewport coordinates.
+ *
+ * Left where it is declared, an absolutely positioned panel belongs to its ancestors: any
+ * `overflow: hidden` between it and the page cuts it off, and any stacking context puts it
+ * under whatever the page raised - so a select inside a dialog, a card or a scrolling table
+ * opens a list that is half there. Every primitive popup that hangs from a trigger (the
+ * select, the colour picker) and the context menu go through here, so they escape the same
+ * way and sit on the same layer (`--enigma-floating-z`, above the lightbox).
+ *
+ * The portal goes into `<body>`, except inside a dialog. A native modal `<dialog>` makes
+ * everything outside it inert, and a script dialog (anything with `role="dialog"` or
+ * `aria-modal`) traps focus and treats a press outside itself as dismissal - a panel in
+ * `<body>` would be unclickable, or would close the dialog it was opened from. Inside the
+ * dialog it is still `position: fixed`, which escapes every scrolling region in the dialog;
+ * only a dialog that is itself a containing block (a `transform`, typically the centring
+ * one) can clip it, and then the dialog's box is the boundary the panel flips and shrinks
+ * inside, rather than a line it is cut at.
+ */
+/** Where a panel that hangs from `anchor` is portaled to. Null during a server render. */
+export function floatingContainer(anchor: Element | null): HTMLElement | null {
+    if (typeof document === "undefined") return null;
+    const host = anchor?.closest<HTMLElement>("dialog[open], [popover], [role=dialog], [role=alertdialog], [aria-modal=true]");
+    return host ?? document.body;
+}
+/**
+ * The frame a fixed panel lives in: what `left: 0; top: 0` resolves to, and the box it has
+ * to stay inside.
+ *
+ * Measured with a probe rather than assumed, because `fixed` resolves against the viewport
+ * only until an ancestor has a `transform`, a `filter` or `contain` - and then it resolves
+ * against that ancestor, so viewport coordinates written as-is land offset by wherever the
+ * ancestor happens to be.
+ */
+export function measureFrame(panel: HTMLElement): { x: number; y: number; boundary: FloatingRect; } {
+    const root = document.documentElement;
+    const viewport: FloatingRect = { left: 0, top: 0, right: root.clientWidth || window.innerWidth, bottom: root.clientHeight || window.innerHeight };
+    const host = panel.parentElement;
+    if (!host || host === document.body) return { x: 0, y: 0, boundary: viewport };
+    const probe = document.createElement("div");
+    probe.style.cssText = "position:fixed;left:0;top:0;width:0;height:0;visibility:hidden;pointer-events:none";
+    host.appendChild(probe);
+    const origin = probe.getBoundingClientRect();
+    probe.remove();
+    const box = host.getBoundingClientRect();
+    // The host IS the containing block when the probe sits on its padding box. Then its own
+    // overflow clips the panel, and the room the panel has is the part of the host on screen.
+    const isBlock = Math.abs(origin.left - (box.left + host.clientLeft)) < 1 && Math.abs(origin.top - (box.top + host.clientTop)) < 1;
+    const style = getComputedStyle(host);
+    const clips = style.overflowX !== "visible" || style.overflowY !== "visible";
+    const boundary = isBlock && clips
+        ? {
+            left: Math.max(viewport.left, box.left), top: Math.max(viewport.top, box.top),
+            right: Math.min(viewport.right, box.right), bottom: Math.min(viewport.bottom, box.bottom)
+        }
+        : viewport;
+    return { x: origin.left, y: origin.top, boundary };
+}
+export interface UseFloatingOptions {
+    /** Whether the panel is up. Listeners exist only while it is. */
+    open: boolean;
+    /** What the panel hangs from. */
+    anchorRef: RefObject<HTMLElement | null>;
+    /** The panel itself, which has to be rendered into the returned container. */
+    panelRef: RefObject<HTMLElement | null>;
+    gap?: number;
+    margin?: number;
+    side?: FloatingSide | "auto";
+    /** Things that change the panel's size, re-placed in the same frame rather than the next. */
+    deps?: DependencyList;
+}
+/**
+ * Places a portaled panel against its anchor and keeps it there.
+ *
+ * Returns the element to portal into - null until the first client effect, so a server
+ * render and the hydration render agree on rendering no panel at all.
+ *
+ * The placement is written onto the element rather than kept in state: it lands in the same
+ * layout pass the panel mounts in, before paint and before any effect of the panel's own
+ * children. That order matters - the select's search field focuses itself in an effect, and a
+ * panel still waiting for a state round-trip to be placed would be taking focus off-screen.
+ * `--enigma-anchor-width` is the trigger's width, which is what a list's `min-width` needs now
+ * that `100%` would be a percentage of the window.
+ */
+export function useFloating({ open, anchorRef, panelRef, gap = 4, margin = 8, side = "auto", deps = [] }: UseFloatingOptions): HTMLElement | null {
+    const [container, setContainer] = useState<HTMLElement | null>(null);
+    useLayoutEffect(() => {
+        if (open) setContainer(floatingContainer(anchorRef.current));
+    }, [open, anchorRef]);
+    const place = useCallback(() => {
+        const anchor = anchorRef.current;
+        const panel = panelRef.current;
+        if (!anchor || !panel) return;
+        const rect = anchor.getBoundingClientRect();
+        panel.style.setProperty("--enigma-anchor-width", `${rect.width}px`);
+        // Measured at its natural height: the cap from the last placement would otherwise be
+        // read back as the panel's size, and a panel that shrank once could never grow again.
+        panel.style.maxHeight = "";
+        const frame = measureFrame(panel);
+        const placed = placeFloating(rect, { width: panel.offsetWidth, height: panel.offsetHeight }, { boundary: frame.boundary, margin, gap, side });
+        panel.style.left = `${placed.left - frame.x}px`;
+        panel.style.top = `${placed.top - frame.y}px`;
+        panel.style.maxHeight = `${placed.maxHeight}px`;
+        panel.setAttribute("data-side", placed.side);
+    }, [anchorRef, panelRef, margin, gap, side]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useLayoutEffect(() => { if (open) place(); }, [open, container, place, ...deps]);
+    /**
+     * Kept against its anchor while anything moves. Fixed coordinates do not follow a scroll,
+     * so every scroll anywhere (captured - a container's scroll does not bubble) and every
+     * resize re-places it, one frame at a time. A ResizeObserver covers what no event reports:
+     * the trigger growing a row of tags, the list filtering down to three rows.
+     */
+    useEffect(() => {
+        if (!open || !container) return;
+        let frame = 0;
+        const schedule = (): void => {
+            if (frame) return;
+            frame = requestAnimationFrame(() => { frame = 0; place(); });
+        };
+        const onScroll = (event: Event): void => {
+            // The panel's own list scrolling moves nothing.
+            if (panelRef.current?.contains(event.target as Node | null)) return;
+            schedule();
+        };
+        document.addEventListener("scroll", onScroll, true);
+        window.addEventListener("resize", schedule);
+        const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(schedule);
+        if (anchorRef.current) observer?.observe(anchorRef.current);
+        if (panelRef.current) observer?.observe(panelRef.current);
+        return () => {
+            cancelAnimationFrame(frame);
+            document.removeEventListener("scroll", onScroll, true);
+            window.removeEventListener("resize", schedule);
+            observer?.disconnect();
+        };
+    }, [open, container, place, anchorRef, panelRef]);
+    return container;
+}
+const TABBABLE = "a[href], button:not(:disabled), input:not(:disabled):not([type=hidden]), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex='-1'])";
+/**
+ * Tab out of a portaled panel, landing where it would have if the panel were still next to
+ * its trigger.
+ *
+ * In the tree, the panel came straight after the trigger, so Tab off its last control went to
+ * whatever follows the trigger and Shift+Tab off its first went back to the trigger. In
+ * `<body>` the panel is at the end of the page, and the same keys would send focus to the
+ * browser's own chrome or the last link on the page. So: Shift+Tab off the first control
+ * focuses the trigger itself, and Tab off the last focuses the trigger and lets the key carry
+ * on from there, which is the element after it.
+ *
+ * Returns whether the key left the panel.
+ */
+export function tabOut(event: KeyboardEvent, panel: HTMLElement | null, trigger: HTMLElement | null): boolean {
+    if (event.key !== "Tab" || !panel || !trigger) return false;
+    const stops = Array.from(panel.querySelectorAll<HTMLElement>(TABBABLE));
+    const at = stops.indexOf(document.activeElement as HTMLElement);
+    if (event.shiftKey) {
+        if (at > 0) return false;
+        event.preventDefault();
+        trigger.focus();
+        return true;
+    }
+    if (at !== -1 && at < stops.length - 1) return false;
+    trigger.focus();
+    return true;
+}

package/src/react/input/color-styles.ts CHANGED Viewed

@@ -36,6 +36,11 @@ export const 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) {
@@ -52,9 +57,7 @@ export const 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] {
@@ -78,8 +81,13 @@ export const 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);
@@ -87,9 +95,6 @@ export const 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);

package/src/react/input/color.tsx CHANGED Viewed

@@ -1,5 +1,7 @@
 "use client";
+import { createPortal } from "react-dom";
+import { tabOut, useFloating } from "@/react/floating";
 import { writeValue } from "@/react/input/write-value";
 import { ColorSwatch } from "@/react/input/color-swatch";
 import { COLOR_STYLES } from "@/react/input/color-styles";
@@ -48,6 +50,9 @@ const STEP = { fine: 0.01, coarse: 0.1, hue: 1, hueCoarse: 10 };
 /** Kept clear of the window edge when deciding which side to open on. */
 const MARGIN = 12;
+/** Between the swatch and the panel: the 0.375rem the sheet used to put there. */
+const GAP = 6;
 /** The notations the readout cycles through, in the order the button steps over them. */
 const FORMATS: ColorFormat[] = ["hex", "rgb", "hsl"];
 const FORMAT_LABELS: Record<ColorFormat, string> = { hex: "HEX", rgb: "RGB", hsl: "HSL" };
@@ -111,7 +116,6 @@ export function ColorExtras({
     const areaRef = useRef<HTMLDivElement | null>(null);
     const [open, setOpen] = useState(openOnMount && !locked);
-    const [side, setSide] = useState<"top" | "bottom">(placement === "top" ? "top" : "bottom");
     const parsed = useMemo(() => parseColor(value), [value]);
     const [hsv, setHsv] = useState<Hsv>(() => (parsed ? rgbToHsv(parsed) : INITIAL));
@@ -169,29 +173,28 @@ export function ColorExtras({
     /* -------- where the panel goes, and what dismisses it -------- */
-    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;
-        // Flipped only when there is genuinely more room the other way: near the bottom of the
-        // window an unflipped panel hangs off the screen and its rails cannot be reached.
-        setSide(below < panel.height + MARGIN && anchor.top > below ? "top" : "bottom");
-    }, [placement]);
-    useLayoutEffect(() => {
-        if (!open) return;
-        place();
-    }, [open, place]);
+    /**
+     * Portaled and placed against the swatch rather than hung from it: a colour field inside a
+     * dialog or a card with `overflow: hidden` would otherwise open a picker cut in half. The
+     * side is measured unless `placement` insists - below, flipped above when there is more
+     * room there - and capped to the room it has. See `react/floating.ts`.
+     */
+    const showing = open && !locked;
+    const container = useFloating({ open: showing, anchorRef, panelRef, gap: GAP, margin: MARGIN, side: placement });
+    // Focus goes into the panel, because the press that opened it was on a control the
+    // keyboard has to be able to keep using. The square is what the arrows drive. Keyed on the
+    // container as well: the panel only exists once there is somewhere to portal it.
+    useEffect(() => {
+        if (showing && container) areaRef.current?.focus();
+    }, [showing, container]);
     useEffect(() => {
         if (!open) return;
-        // Focus goes into the panel, because the press that opened it was on a control the
-        // keyboard has to be able to keep using. The square is what the arrows drive.
-        areaRef.current?.focus();
-        const inside = (target: EventTarget | null): boolean => Boolean(anchorRef.current?.contains(target as Node | null));
+        // The swatch or the panel: the panel is portaled, so it is not inside the anchor.
+        const inside = (target: EventTarget | null): boolean =>
+            Boolean(anchorRef.current?.contains(target as Node | null) || panelRef.current?.contains(target as Node | null));
         const onPointerDown = (event: globalThis.PointerEvent): void => { if (!inside(event.target)) setOpenState(false); };
         /**
          * Tabbing out closes it. `document.body` is skipped on purpose: pressing the panel's
@@ -202,17 +205,14 @@ export function ColorExtras({
             if (event.target === document.body || inside(event.target)) return;
             setOpenState(false);
         };
-        const onResize = (): void => 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]);
     /* -------- dragging -------- */
@@ -354,15 +354,17 @@ export function ColorExtras({
             label={text.open ?? "Pick a colour"}
             onPress={() => (open ? close(true) : setOpenState(true))}
         >
-            {open && !locked && (
+            {showing && container && createPortal(
                 <div
                     ref={panelRef}
                     data-enigma-color-panel=""
-                    data-side={side}
                     role="dialog"
                     aria-label={text.panel ?? "Colour picker"}
                     style={panelStyle}
                     onKeyDown={(event) => {
+                        // Off either end of the panel, Tab lands beside the swatch, where the
+                        // panel used to sit - not at the end of the page it is portaled to.
+                        if (tabOut(event, panelRef.current, swatchRef.current)) return;
                         if (event.key !== "Escape") return;
                         event.stopPropagation();
                         close(true);
@@ -504,7 +506,8 @@ export function ColorExtras({
                             })}
                         </div>
                     )}
-                </div>
+                </div>,
+                container
             )}
         </ColorSwatch>
     );

package/src/react/select/context.ts CHANGED Viewed

@@ -36,6 +36,11 @@ export interface SelectContextValue {
     optionId: (index: number) => string;
     triggerRef: RefObject<HTMLButtonElement | null>;
     fieldRef: RefObject<HTMLInputElement | null>;
+    /**
+     * The panel. Portaled out of the root, so "inside the select" is the root OR this - a
+     * press or a focus check against the root alone would call every option outside.
+     */
+    contentRef: RefObject<HTMLDivElement | null>;
     /** Close and put focus back where it came from - the trigger, always. */
     close: () => void;
     /** The keys the list answers to, shared by the trigger and the search field. */

package/src/react/select/root.tsx CHANGED Viewed

@@ -1,9 +1,11 @@
 "use client";
 import { Slot } from "@/react/slot";
+import { createPortal } from "react-dom";
 import { groupRows } from "@/core/palette";
 import { shortenQuery } from "@/core/search";
 import { SELECT_STYLES } from "@/react/select/styles";
+import { tabOut, useFloating } from "@/react/floating";
 import { SelectContext, useSelectContext, type SelectItem } from "@/react/select/context";
 import { createSelect, type SelectInstance, type SelectMoveKey, type SelectOptions, type SelectState } from "@/core/select";
 import {
@@ -174,6 +176,9 @@ export function SelectRoot(props: SelectRootProps): ReactNode {
     const triggerRef = useRef<HTMLButtonElement | null>(null);
     const fieldRef = useRef<HTMLInputElement | null>(null);
     const rootRef = useRef<HTMLDivElement | null>(null);
+    const contentRef = useRef<HTMLDivElement | null>(null);
+    /** The root or the portaled panel: both are the select, only one is its DOM subtree. */
+    const owns = useCallback((node: Node | null) => Boolean(node && (rootRef.current?.contains(node) || contentRef.current?.contains(node))), []);
     // Kept in a ref so the instance - built once - always calls the CURRENT props rather
     // than the ones it closed over on the first render.
@@ -304,10 +309,10 @@ export function SelectRoot(props: SelectRootProps): ReactNode {
         // Whatever closed it was inside the panel - a row, or Enter in the search field -
         // and the panel is about to unmount with the focus still in it. Focus goes back to
         // the trigger rather than to the body, exactly as Escape does it.
-        const held = rootRef.current?.contains(document.activeElement);
+        const held = owns(document.activeElement);
         setOpen(false);
         if (held) triggerRef.current?.focus();
-    }, [state.open, open, setOpen]);
+    }, [state.open, open, setOpen, owns]);
     const close = useCallback(() => {
         setOpen(false);
@@ -321,12 +326,12 @@ export function SelectRoot(props: SelectRootProps): ReactNode {
     useEffect(() => {
         if (!open) return;
         const onPointerDown = (event: PointerEvent) => {
-            if (rootRef.current?.contains(event.target as Node)) return;
+            if (owns(event.target as Node)) return;
             setOpen(false);
         };
         document.addEventListener("pointerdown", onPointerDown, true);
         return () => document.removeEventListener("pointerdown", onPointerDown, true);
-    }, [open, setOpen]);
+    }, [open, setOpen, owns]);
     const onListKeyDown = useCallback((event: KeyboardEvent) => {
         const move = MOVE_KEYS[event.key];
@@ -351,6 +356,9 @@ export function SelectRoot(props: SelectRootProps): ReactNode {
             return;
         }
         if (event.key === "Tab" && open) {
+            // The search field is in the portaled panel, at the end of the page: off it, Tab
+            // goes where it would have from beside the trigger, not to the browser chrome.
+            if (contentRef.current?.contains(event.target as Node)) tabOut(event, contentRef.current, triggerRef.current);
             setOpen(false);
             return;
         }
@@ -399,6 +407,7 @@ export function SelectRoot(props: SelectRootProps): ReactNode {
         optionId: (index: number) => `${id}-option-${index}`,
         triggerRef,
         fieldRef,
+        contentRef,
         close,
         onListKeyDown
     }), [instance, state, setOpen, disabled, clearable, multiple, isSearchable, isEmpty, loading, emptyLabel, loadingLabel, ids, id, close, onListKeyDown]);
@@ -614,9 +623,7 @@ export interface SelectContentProps extends ComponentPropsWithoutRef<"div"> {
 export function SelectContent({ closeDuration = 120, children, ...props }: SelectContentProps): ReactNode {
     const select = useSelectContext("Select.Content");
-    const ref = useRef<HTMLDivElement | null>(null);
     const [mounted, setMounted] = useState(select.state.open);
-    const [side, setSide] = useState<"top" | "bottom">("bottom");
     useEffect(() => {
         if (select.state.open) { setMounted(true); return; }
@@ -625,33 +632,38 @@ export function SelectContent({ closeDuration = 120, children, ...props }: Selec
         return () => clearTimeout(timer);
     }, [select.state.open, closeDuration]);
-    // Which way it opens is measured, not assumed: a select near the bottom of the window
-    // opens upwards, or its list is off the screen and unreachable.
-    useLayoutEffect(() => {
-        if (!select.state.open || !ref.current) return;
-        const trigger = select.triggerRef.current?.getBoundingClientRect();
-        if (!trigger) return;
-        const height = ref.current.offsetHeight;
-        const below = window.innerHeight - trigger.bottom;
-        setSide(below < height && trigger.top > below ? "top" : "bottom");
-    }, [select.state.open, select.state.visible.length, select.triggerRef]);
+    /**
+     * Portaled and placed against the trigger, never left in the tree.
+     *
+     * An absolute panel inside the root is clipped by any `overflow: hidden` ancestor and
+     * stacked under any dialog - which is where a select usually sits. So it goes to `<body>`
+     * (or into the dialog it was opened from - see `react/floating.ts`), measured against the
+     * trigger: below it, flipped above when there is more room there, and capped to the room
+     * it has with the list scrolling inside, because a list off the screen is unreachable.
+     */
+    const container = useFloating({
+        open: mounted && select.state.open,
+        anchorRef: select.triggerRef,
+        panelRef: select.contentRef,
+        deps: [select.state.visible.length]
+    });
-    if (!mounted) return null;
+    if (!mounted || !container) return null;
-    return (
+    return createPortal(
         <div
             {...props}
-            ref={ref}
+            ref={select.contentRef}
             data-enigma-select-content=""
             data-state={select.state.open ? "open" : "closed"}
-            data-side={side}
             onKeyDown={(event) => {
                 props.onKeyDown?.(event);
                 if (!event.defaultPrevented) select.onListKeyDown(event);
             }}
         >
             {children}
-        </div>
+        </div>,
+        container
     );
 }

package/src/react/select/styles.ts CHANGED Viewed

@@ -27,12 +27,17 @@ export const SELECT_STYLES = `
     --enigma-select-panel-border: #333333;
     --enigma-select-panel-radius: 0.625rem;
     --enigma-select-panel-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
-    --enigma-select-panel-width: 100%;
     --enigma-select-list-height: 15rem;
     --enigma-select-active-bg: #2a2a2a;
     --enigma-select-accent: #fbbf24;
     --enigma-select-tag-bg: #2a2a2a;
+    /* The layer every portaled popup shares: above the lightbox (9999), because a popup is
+       opened FROM whatever is on top. The select, the colour picker and the context menu
+       each declare it with the same value, so overriding it once moves all three. Here and
+       not in the light-scheme block, or half the readers get an invalid z-index. */
+    --enigma-floating-z: 10000;
 }
 @media (prefers-color-scheme: light) {
@@ -137,11 +142,24 @@ export const SELECT_STYLES = `
 [data-enigma-select-trigger][data-clearable]:focus [data-enigma-select-caret] { opacity: 0; }
 [data-enigma-select-clear]:hover { color: var(--enigma-select-text); background: var(--enigma-select-active-bg); }
+/* Portaled to <body> and placed in viewport coordinates against the trigger (see
+   react/floating.ts), so no ancestor's overflow can clip it and no dialog can stack over it.
+   left, top, max-height and data-side are written by the placement: below the trigger,
+   flipped above when there is more room there, and capped to the room it has. The column
+   is what makes the cap shrink the LIST, which scrolls, instead of cutting off the panel. */
 [data-enigma-select-content] {
-    position: absolute; z-index: 50;
-    top: calc(100% + 0.25rem); left: 0;
-    min-width: var(--enigma-select-panel-width); box-sizing: border-box;
+    position: fixed; z-index: var(--enigma-floating-z);
+    display: flex; flex-direction: column;
+    /* As wide as the trigger, measured - 100% would now be a percentage of the window - and
+       wider only for content that cannot shrink. min-content is what keeps the rest at the
+       trigger's width: fixed, the panel's room is the whole window, and a long label or a
+       long "Nothing matches" would otherwise widen it to max-width. --enigma-select-panel-width
+       overrides the trigger's width. */
+    width: min-content;
+    min-width: var(--enigma-select-panel-width, var(--enigma-anchor-width, auto)); box-sizing: border-box;
     padding: 0.25rem;
+    color: var(--enigma-select-text);
+    font-size: var(--enigma-select-font-size);
     background: var(--enigma-select-panel-bg);
     border: 1px solid var(--enigma-select-panel-border);
     border-radius: var(--enigma-select-panel-radius);
@@ -152,9 +170,6 @@ export const SELECT_STYLES = `
        trigger wider than this, which is what it is for. */
     max-width: min(28rem, calc(100vw - 2rem));
 }
-/* Opening upwards is not a variant, it is the same panel measured against the window: near
-   the bottom of the screen the list would otherwise be unreachable. */
-[data-enigma-select-content][data-side="top"] { top: auto; bottom: calc(100% + 0.25rem); }
 [data-enigma-select-content][data-state="closed"] { animation: enigma-select-out 120ms ease-in forwards; pointer-events: none; }
 @keyframes enigma-select-in {
@@ -186,6 +201,8 @@ export const SELECT_STYLES = `
 [data-enigma-select-list] {
     max-height: var(--enigma-select-list-height);
+    /* Allowed below its content, so the panel's placement cap shrinks it and it scrolls. */
+    min-height: 0; flex: 0 1 auto;
     margin-top: 0.25rem;
     overflow-y: auto; overscroll-behavior: contain;
 }

package/dist/viewer-N5WLFB24.js DELETED Viewed

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