@jini-ai/ui 0.5.5 → 0.6.10

package/dist/features/admin-widgets/components/Lightbox/Lightbox.hooks.js

@@ -0,0 +1,128 @@
+import { useEffect, useRef } from "react";
+/**
+ * Lifecycle for the shared `Lightbox`: native `<dialog>` open/close, focus capture and return,
+ * arrow-key navigation, Escape and backdrop dismissal. Absorbs the open/close and focus logic the
+ * media lightboxes and `ImagePreviewModal` each carried, so every caller gets the same behavior.
+ */
+/** Idempotent native open. `showModal()` throws on an already-open dialog in real browsers; the
+ *  attribute fallback covers DOM environments without it (jsdom). */
+export function openLightboxDialog(dialog) {
+    if (typeof dialog.showModal === "function") {
+        if (!dialog.open)
+            dialog.showModal();
+        return;
+    }
+    dialog.setAttribute("open", "");
+}
+/** The close-side mirror of {@link openLightboxDialog} — same fallback and already-closed guard. */
+export function closeLightboxDialog(dialog) {
+    if (typeof dialog.close === "function") {
+        if (dialog.open)
+            dialog.close();
+        return;
+    }
+    dialog.removeAttribute("open");
+}
+/** Marks the stage's empty area: the dialog fills the viewport, so "backdrop" is any click that
+ *  lands on the dialog itself or the stage around the media rather than on a control or the media. */
+export const LIGHTBOX_DISMISS_ATTR = "data-jini-lightbox-dismiss";
+function isDismissTarget(target) {
+    return target instanceof Element && (target.tagName === "DIALOG" || target.hasAttribute(LIGHTBOX_DISMISS_ATTR));
+}
+function navState(input) {
+    const count = input.count ?? 0;
+    const index = input.index ?? 0;
+    const navigable = count > 1 && typeof input.onNavigate === "function";
+    return { count, index, navigable, hasPrev: navigable && index > 0, hasNext: navigable && index + 1 < count };
+}
+export function useLightbox(input) {
+    const dialogRef = useRef(null);
+    const closeRef = useRef(null);
+    const prevRef = useRef(null);
+    const nextRef = useRef(null);
+    // Captured when the dialog opens, before focus moves inside: by construction the element that
+    // opened it (a card's expand button). Restored on close so keyboard users land where they were.
+    const triggerRef = useRef(null);
+    const pendingFocusRef = useRef(null);
+    const nav = navState(input);
+    useEffect(() => {
+        pendingFocusRef.current?.current?.focus({ preventScroll: true });
+        pendingFocusRef.current = null;
+    }, [input.index]);
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        if (!dialog)
+            return;
+        if (input.open) {
+            triggerRef.current = dialog.ownerDocument.activeElement;
+            openLightboxDialog(dialog);
+            // Close exists at every position (a single item has no arrows), so it is the stable initial
+            // focus target. Only opening focuses it; navigation preserves the operator's current focus.
+            closeRef.current?.focus({ preventScroll: true });
+            return;
+        }
+        closeLightboxDialog(dialog);
+        const trigger = triggerRef.current;
+        trigger?.focus?.({ preventScroll: true });
+        // Keyed on `open`, not `index`: navigating while open must not reopen the dialog (showModal on
+        // an open dialog throws) or recapture its trigger from inside the lightbox.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [input.open]);
+    function go(target) {
+        // Clamps rather than wrapping: staying on the last asset is the less surprising default for an
+        // operator navigating a specific set of uploads, not a slideshow.
+        if (!nav.navigable || target < 0 || target >= nav.count)
+            return;
+        // An arrow becomes disabled at its end, and a disabled focused button drops focus out of the
+        // dialog. Hand focus to its neighbour first; interior moves leave focus where the operator put it.
+        // The neighbour may itself be disabled until the caller re-renders, so the move is applied
+        // after the index changes.
+        const active = dialogRef.current?.ownerDocument.activeElement;
+        if (target === 0 && active === prevRef.current)
+            pendingFocusRef.current = nextRef;
+        if (target === nav.count - 1 && active === nextRef.current)
+            pendingFocusRef.current = prevRef;
+        input.onNavigate?.(target);
+    }
+    // Listens on the document rather than the dialog: when the focused media is swapped out (an
+    // image that failed over to a video) focus drops to the body, and arrow keys must keep working.
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        if (!dialog || !input.open)
+            return;
+        const onKey = (event) => {
+            if (event.key !== "ArrowLeft" && event.key !== "ArrowRight")
+                return;
+            // Known limitation: a focused `<video controls>` also seeks on these keys natively, so the
+            // press both seeks and navigates. Callers know their media; the shell does not.
+            event.preventDefault();
+            go(nav.index + (event.key === "ArrowRight" ? 1 : -1));
+        };
+        dialog.ownerDocument.addEventListener("keydown", onKey);
+        return () => dialog.ownerDocument.removeEventListener("keydown", onKey);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [input.open, nav.index, nav.count, input.onNavigate]);
+    return {
+        dialogRef,
+        closeRef,
+        prevRef,
+        nextRef,
+        navigable: nav.navigable,
+        hasPrev: nav.hasPrev,
+        hasNext: nav.hasNext,
+        counter: nav.count > 1 ? `${nav.index + 1} / ${nav.count}` : "",
+        previous: () => go(nav.index - 1),
+        next: () => go(nav.index + 1),
+        // Always prevented so the `open` prop stays the single source of truth; Escape routes through
+        // onClose and the caller's state change is what actually closes the dialog.
+        handleCancel: (event) => {
+            event.preventDefault();
+            input.onClose();
+        },
+        handleClick: (event) => {
+            if (isDismissTarget(event.target))
+                input.onClose();
+        },
+    };
+}
+//# sourceMappingURL=Lightbox.hooks.js.map

package/dist/features/admin-widgets/components/Lightbox/Lightbox.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId } from "react";
+import { Icon } from "../../../../react/components/Icon.js";
+import { LIGHTBOX_DISMISS_ATTR, useLightbox } from "./Lightbox.hooks.js";
+const DEFAULT_LABELS = { close: "Close preview", previous: "Previous", next: "Next" };
+// Native dialog supplies the focus trap, Escape and top-layer stacking, so there is no hand-built
+// overlay or z-index policy. The dialog itself fills the viewport as the dark gray stage (rather
+// than a card over a dim backdrop) so the media can take nearly all of the screen.
+/** Full-viewport media lightbox: title and counter top-left, close top-right, the media as large
+ *  as fits, caller actions bottom-left and the previous/next pair together bottom-right. */
+export function Lightbox(props) {
+    const { open, title, children, actions, className, partAttrs = {}, useLightboxHook = useLightbox } = props;
+    const labels = { ...DEFAULT_LABELS, ...props.labels };
+    const titleId = useId();
+    const vm = useLightboxHook({ open, onClose: props.onClose, index: props.index, count: props.count, onNavigate: props.onNavigate });
+    return (_jsx("dialog", { ref: vm.dialogRef, className: className ? `jini-lightbox ${className}` : "jini-lightbox", "aria-labelledby": open ? titleId : undefined, onCancel: vm.handleCancel, onClick: vm.handleClick, ...partAttrs.dialog, children: open ? (_jsxs(_Fragment, { children: [_jsxs("header", { className: "jini-lightbox-header", children: [_jsx("h2", { id: titleId, className: "jini-lightbox-title", title: title, children: title }), vm.counter ? _jsx("span", { className: "jini-lightbox-counter", children: vm.counter }) : null, _jsx("button", { type: "button", ref: vm.closeRef, className: "jini-lightbox-button jini-lightbox-close", "aria-label": labels.close, onClick: props.onClose, ...partAttrs.close, children: _jsx(Icon, { name: "close", size: 16, strokeWidth: 1.8 }) })] }), _jsx("div", { className: "jini-lightbox-stage", [LIGHTBOX_DISMISS_ATTR]: "", children: children }), actions || vm.navigable ? (_jsxs("footer", { className: "jini-lightbox-footer", children: [_jsx("div", { className: "jini-lightbox-actions", children: actions }), vm.navigable ? (_jsxs("div", { className: "jini-lightbox-nav", children: [_jsx("button", { type: "button", ref: vm.prevRef, className: "jini-lightbox-button", "aria-label": labels.previous, disabled: !vm.hasPrev, onClick: vm.previous, ...partAttrs.previous, children: _jsx(Icon, { name: "chevron-left", size: 18, strokeWidth: 1.8 }) }), _jsx("button", { type: "button", ref: vm.nextRef, className: "jini-lightbox-button", "aria-label": labels.next, disabled: !vm.hasNext, onClick: vm.next, ...partAttrs.next, children: _jsx(Icon, { name: "chevron-right", size: 18, strokeWidth: 1.8 }) })] })) : null] })) : null] })) : null }));
+}
+//# sourceMappingURL=Lightbox.js.map

package/dist/features/admin-widgets/components/MiddleTruncate.d.ts

@@ -0,0 +1,14 @@
+export interface MiddleTruncateProps {
+    /** The full text, e.g. a file name. */
+    text: string;
+    /** Stem characters kept beside the extension; see `splitMiddleTruncation`. */
+    keepChars?: number | undefined;
+    className?: string | undefined;
+}
+/**
+ * One line of text that ellipsizes in the middle, keeping the end (a file's extension) visible.
+ * The two halves are separate boxes, so a screen reader may read them as two pieces: name the
+ * enclosing control with the full text (`aria-label`) rather than relying on this content.
+ */
+export declare function MiddleTruncate({ text, keepChars, className }: MiddleTruncateProps): import("react").JSX.Element;
+//# sourceMappingURL=MiddleTruncate.d.ts.map

package/dist/features/admin-widgets/components/MiddleTruncate.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { splitMiddleTruncation } from "./MiddleTruncate.rules.js";
+/**
+ * One line of text that ellipsizes in the middle, keeping the end (a file's extension) visible.
+ * The two halves are separate boxes, so a screen reader may read them as two pieces: name the
+ * enclosing control with the full text (`aria-label`) rather than relying on this content.
+ */
+export function MiddleTruncate({ text, keepChars, className }) {
+    const { head, tail } = splitMiddleTruncation({ text }, keepChars === undefined ? {} : { keepChars });
+    return (_jsxs("span", { className: className ? `jini-middle-truncate ${className}` : "jini-middle-truncate", children: [_jsx("span", { className: "jini-middle-truncate__head", children: head }), tail ? _jsx("span", { className: "jini-middle-truncate__tail", children: tail }) : null] }));
+}
+//# sourceMappingURL=MiddleTruncate.js.map

package/dist/features/admin-widgets/components/MiddleTruncate.rules.d.ts

@@ -0,0 +1,20 @@
+export interface MiddleTruncationParts {
+    /** The part that shrinks with an ellipsis when space runs out. */
+    head: string;
+    /** The part that always stays visible: the extension plus a few characters before it. */
+    tail: string;
+}
+/**
+ * Splits a name so CSS can cut it in the MIDDLE: `head` ellipsizes, `tail` never shrinks, so
+ * `woodnest-cabin-booking.mp4` narrows to `woodnest-cabin-bo…ing.mp4` and the extension stays
+ * readable. CSS does the measuring, so the same split works at any card width.
+ * @param required.text The full name.
+ * @param optional.keepChars Characters of the stem kept beside the extension.
+ * @complexity O(n) in the name's length.
+ */
+export declare function splitMiddleTruncation({ text }: {
+    text: string;
+}, { keepChars }?: {
+    keepChars?: number;
+}): MiddleTruncationParts;
+//# sourceMappingURL=MiddleTruncate.rules.d.ts.map

package/dist/features/admin-widgets/components/MiddleTruncate.rules.js

@@ -0,0 +1,21 @@
+/** Longest trailing ".ext" still treated as an extension; a longer dotted tail is just text. */
+const MAX_EXTENSION_CHARS = 10;
+/**
+ * Splits a name so CSS can cut it in the MIDDLE: `head` ellipsizes, `tail` never shrinks, so
+ * `woodnest-cabin-booking.mp4` narrows to `woodnest-cabin-bo…ing.mp4` and the extension stays
+ * readable. CSS does the measuring, so the same split works at any card width.
+ * @param required.text The full name.
+ * @param optional.keepChars Characters of the stem kept beside the extension.
+ * @complexity O(n) in the name's length.
+ */
+export function splitMiddleTruncation({ text }, { keepChars = 3 } = {}) {
+    const dot = text.lastIndexOf(".");
+    // A leading dot (".env") is a hidden-file name, not an extension.
+    const extensionChars = dot > 0 && text.length - dot <= MAX_EXTENSION_CHARS ? text.length - dot : 0;
+    const tailChars = extensionChars + keepChars;
+    // No extension to protect, or a name too short to cut: one piece that ellipsizes at its end.
+    if (extensionChars === 0 || text.length <= tailChars + 1)
+        return { head: text, tail: "" };
+    return { head: text.slice(0, text.length - tailChars), tail: text.slice(text.length - tailChars) };
+}
+//# sourceMappingURL=MiddleTruncate.rules.js.map

package/dist/features/admin-widgets/components/ScrollJump/ScrollJump.d.ts

@@ -0,0 +1,18 @@
+import { useScrollJump } from "./ScrollJump.hooks.js";
+export interface ScrollJumpButtonsProps {
+    /** The scrolling element the buttons control (an admin shell's `<main>`); `null` renders nothing. */
+    container: HTMLElement | null;
+    /** Accessible names, already translated by the host. */
+    labels?: {
+        toTop: string;
+        toBottom: string;
+    } | undefined;
+    useJump?: typeof useScrollJump | undefined;
+}
+/**
+ * A quiet ↑/↓ pair for long pages. Hidden on short pages; ↑ hides at the top and ↓ at the bottom.
+ * Position it with the host's CSS (`--jini-scroll-jump-right`/`-bottom`/`-direction`) so it
+ * clears that host's own floating controls.
+ */
+export declare function ScrollJumpButtons({ container, labels, useJump }: ScrollJumpButtonsProps): import("react").JSX.Element | null;
+//# sourceMappingURL=ScrollJump.d.ts.map

package/dist/features/admin-widgets/components/ScrollJump/ScrollJump.hooks.d.ts

@@ -0,0 +1,16 @@
+import { type ScrollJumpVisibility } from "./ScrollJump.rules.js";
+export interface ScrollJumpController extends ScrollJumpVisibility {
+    jump: (edge: "top" | "bottom") => void;
+}
+/**
+ * Tracks whether `container` is tall enough for jump buttons and which edges it is away from.
+ * Scroll events alone miss content that loads or grows without scrolling (a media grid filling in),
+ * so a ResizeObserver watches the container and each direct child, and a MutationObserver
+ * re-observes when a route swaps the children out.
+ */
+export declare function useScrollJump({ container }: {
+    container: HTMLElement | null;
+}, { reducedMotion }?: {
+    reducedMotion?: () => boolean;
+}): ScrollJumpController;
+//# sourceMappingURL=ScrollJump.hooks.d.ts.map

package/dist/features/admin-widgets/components/ScrollJump/ScrollJump.hooks.js

@@ -0,0 +1,45 @@
+import { useCallback, useEffect, useState } from "react";
+import { scrollJumpBehavior, scrollJumpTarget, scrollJumpVisibility } from "./ScrollJump.rules.js";
+const HIDDEN = { showTop: false, showBottom: false };
+const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+const prefersReducedMotion = () => typeof window !== "undefined" && (window.matchMedia?.(REDUCED_MOTION_QUERY).matches ?? false);
+/**
+ * Tracks whether `container` is tall enough for jump buttons and which edges it is away from.
+ * Scroll events alone miss content that loads or grows without scrolling (a media grid filling in),
+ * so a ResizeObserver watches the container and each direct child, and a MutationObserver
+ * re-observes when a route swaps the children out.
+ */
+export function useScrollJump({ container }, { reducedMotion = prefersReducedMotion } = {}) {
+    const [visibility, setVisibility] = useState(HIDDEN);
+    useEffect(() => {
+        if (!container)
+            return;
+        // Same-value updates keep the previous object so a scroll that changes nothing does not re-render.
+        const update = () => setVisibility((previous) => {
+            const next = scrollJumpVisibility(container);
+            return next.showTop === previous.showTop && next.showBottom === previous.showBottom ? previous : next;
+        });
+        update();
+        container.addEventListener("scroll", update, { passive: true });
+        const resize = typeof ResizeObserver === "function" ? new ResizeObserver(update) : null;
+        const observeChildren = () => {
+            resize?.disconnect();
+            resize?.observe(container);
+            for (const child of Array.from(container.children))
+                resize?.observe(child);
+        };
+        observeChildren();
+        const mutation = typeof MutationObserver === "function" ? new MutationObserver(() => { observeChildren(); update(); }) : null;
+        mutation?.observe(container, { childList: true });
+        return () => {
+            container.removeEventListener("scroll", update);
+            resize?.disconnect();
+            mutation?.disconnect();
+        };
+    }, [container]);
+    const jump = useCallback((edge) => {
+        container?.scrollTo({ top: scrollJumpTarget({ edge, scrollHeight: container.scrollHeight }), behavior: scrollJumpBehavior({ reducedMotion: reducedMotion() }) });
+    }, [container, reducedMotion]);
+    return { ...(container ? visibility : HIDDEN), jump };
+}
+//# sourceMappingURL=ScrollJump.hooks.js.map

package/dist/features/admin-widgets/components/ScrollJump/ScrollJump.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useScrollJump } from "./ScrollJump.hooks.js";
+const DEFAULT_LABELS = { toTop: "Scroll to top", toBottom: "Scroll to bottom" };
+/** An edge button that does not apply keeps its slot (CSS `visibility: hidden`, which also drops it
+ * from the tab order), so the other button never slides under the pointer that just clicked. */
+const offProps = (show) => (show ? {} : { "data-off": "" });
+/**
+ * A quiet ↑/↓ pair for long pages. Hidden on short pages; ↑ hides at the top and ↓ at the bottom.
+ * Position it with the host's CSS (`--jini-scroll-jump-right`/`-bottom`/`-direction`) so it
+ * clears that host's own floating controls.
+ */
+export function ScrollJumpButtons({ container, labels = DEFAULT_LABELS, useJump = useScrollJump }) {
+    const { showTop, showBottom, jump } = useJump({ container });
+    if (!showTop && !showBottom)
+        return null;
+    return (_jsxs("div", { className: "jini-scroll-jump", children: [_jsx("button", { type: "button", className: "jini-scroll-jump__btn", ...offProps(showTop), "aria-label": labels.toTop, title: labels.toTop, onClick: () => jump("top"), children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "m18 15-6-6-6 6" }) }) }), _jsx("button", { type: "button", className: "jini-scroll-jump__btn", ...offProps(showBottom), "aria-label": labels.toBottom, title: labels.toBottom, onClick: () => jump("bottom"), children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "m6 9 6 6 6-6" }) }) })] }));
+}
+//# sourceMappingURL=ScrollJump.js.map

package/dist/features/admin-widgets/components/ScrollJump/ScrollJump.rules.d.ts

@@ -0,0 +1,32 @@
+/** A page must be at least this many viewports tall before the jump buttons are worth their space. */
+export declare const SCROLL_JUMP_MIN_VIEWPORTS = 2;
+/** Within this many px of an edge counts as AT that edge (fractional scroll positions never hit 0 exactly). */
+export declare const SCROLL_JUMP_EDGE_SLACK_PX = 8;
+export interface ScrollMetrics {
+    scrollTop: number;
+    scrollHeight: number;
+    clientHeight: number;
+}
+export interface ScrollJumpVisibility {
+    showTop: boolean;
+    showBottom: boolean;
+}
+/**
+ * Which jump buttons a scroll container shows: none on a short page, ↑ only once scrolled away from
+ * the top, ↓ only while there is more below.
+ * @complexity O(1).
+ */
+export declare function scrollJumpVisibility({ scrollTop, scrollHeight, clientHeight }: ScrollMetrics, { minViewports, edgeSlackPx }?: {
+    minViewports?: number;
+    edgeSlackPx?: number;
+}): ScrollJumpVisibility;
+/** Reduced-motion users get an instant jump instead of a long animated scroll. */
+export declare function scrollJumpBehavior({ reducedMotion }: {
+    reducedMotion: boolean;
+}): ScrollBehavior;
+/** The `scrollTo` target for an edge: 0 for the top, the full content height for the bottom. */
+export declare function scrollJumpTarget({ edge, scrollHeight }: {
+    edge: "top" | "bottom";
+    scrollHeight: number;
+}): number;
+//# sourceMappingURL=ScrollJump.rules.d.ts.map

package/dist/features/admin-widgets/components/ScrollJump/ScrollJump.rules.js

@@ -0,0 +1,26 @@
+/** A page must be at least this many viewports tall before the jump buttons are worth their space. */
+export const SCROLL_JUMP_MIN_VIEWPORTS = 2;
+/** Within this many px of an edge counts as AT that edge (fractional scroll positions never hit 0 exactly). */
+export const SCROLL_JUMP_EDGE_SLACK_PX = 8;
+/**
+ * Which jump buttons a scroll container shows: none on a short page, ↑ only once scrolled away from
+ * the top, ↓ only while there is more below.
+ * @complexity O(1).
+ */
+export function scrollJumpVisibility({ scrollTop, scrollHeight, clientHeight }, { minViewports = SCROLL_JUMP_MIN_VIEWPORTS, edgeSlackPx = SCROLL_JUMP_EDGE_SLACK_PX } = {}) {
+    if (clientHeight <= 0 || scrollHeight < clientHeight * minViewports)
+        return { showTop: false, showBottom: false };
+    return {
+        showTop: scrollTop > edgeSlackPx,
+        showBottom: scrollHeight - scrollTop - clientHeight > edgeSlackPx,
+    };
+}
+/** Reduced-motion users get an instant jump instead of a long animated scroll. */
+export function scrollJumpBehavior({ reducedMotion }) {
+    return reducedMotion ? "auto" : "smooth";
+}
+/** The `scrollTo` target for an edge: 0 for the top, the full content height for the bottom. */
+export function scrollJumpTarget({ edge, scrollHeight }) {
+    return edge === "top" ? 0 : scrollHeight;
+}
+//# sourceMappingURL=ScrollJump.rules.js.map

package/dist/features/admin-widgets/components/SuggestInput/SuggestInput.hooks.js

@@ -13,6 +13,13 @@ export function useSuggestInput({ value, suggestions }, { limit } = {}) {
     const matches = matchSuggestions({ typed: value, suggestions }, { limit });
     const visible = open && matches.length > 0;
     const current = highlighted < matches.length ? highlighted : -1;
+    const close = () => { setOpen(false); setHighlighted(-1); };
+    const move = (step) => {
+        setOpen(true);
+        const next = nextHighlight({ current, step, count: matches.length });
+        setHighlighted(next);
+        setScrollTarget({ index: next });
+    };
     return {
         open: visible,
         matches,
@@ -20,33 +27,41 @@ export function useSuggestInput({ value, suggestions }, { limit } = {}) {
         setHighlighted,
         scrollTarget,
         openList: () => setOpen(true),
-        closeList: () => { setOpen(false); setHighlighted(-1); },
+        closeList: close,
         handleKey: (key) => {
-            if (key === 'ArrowDown' || key === 'ArrowUp') {
+            const step = arrowStep(key);
+            if (step !== undefined) {
                 if (matches.length === 0)
                     return { consumed: false };
-                setOpen(true);
-                const step = key === 'ArrowDown' ? 1 : -1;
-                const next = (current + step + matches.length + (current === -1 && step === -1 ? 1 : 0)) % matches.length;
-                setHighlighted(next);
-                setScrollTarget({ index: next });
+                move(step);
                 return { consumed: true };
             }
             if (key === 'Escape' && visible) {
-                setOpen(false);
-                setHighlighted(-1);
+                close();
                 return { consumed: true };
             }
-            const picked = current >= 0 ? matches[current] : undefined;
-            if (key === 'Enter' && visible && picked !== undefined) {
-                setOpen(false);
-                setHighlighted(-1);
-                return { consumed: true, picked };
+            if (key === 'Enter' && visible && current >= 0) {
+                close();
+                return { consumed: true, picked: matches[current] };
             }
             return { consumed: false };
         },
     };
 }
+/** +1 for ArrowDown, -1 for ArrowUp, undefined for every other key. */
+function arrowStep(key) {
+    if (key === 'ArrowDown')
+        return 1;
+    if (key === 'ArrowUp')
+        return -1;
+    return undefined;
+}
+/** The row an arrow key moves to, wrapping at either end; from no highlight, ArrowUp lands on the last row. */
+function nextHighlight({ current, step, count }) {
+    if (current === -1)
+        return step === 1 ? 0 : count - 1;
+    return (current + step + count) % count;
+}
 /** Default scroller: `block: 'nearest'` moves the list only as far as needed. Optional call because
  *  non-browser DOMs (jsdom in host test suites) don't implement `scrollIntoView`. */
 export function scrollOptionIntoView(option) {

package/dist/features/admin-widgets/index.d.ts

@@ -14,8 +14,10 @@ export type { SeeMoreProps, SeeMoreView } from './components/SeeMore/SeeMore.js'
 export { useSeeMoreClamp } from './components/SeeMore/SeeMore.hooks.js';
 export { ImagePreviewModal } from './components/ImagePreviewModal.js';
 export type { ImagePreviewModalProps } from './components/ImagePreviewModal.js';
-export { useImagePreviewModal } from './components/ImagePreviewModal.hooks.js';
-export type { ImagePreviewModalController } from './components/ImagePreviewModal.hooks.js';
+export { Lightbox } from './components/Lightbox/Lightbox.js';
+export type { LightboxProps } from './components/Lightbox/Lightbox.js';
+export { useLightbox, openLightboxDialog, closeLightboxDialog } from './components/Lightbox/Lightbox.hooks.js';
+export type { LightboxController, LightboxHookInput } from './components/Lightbox/Lightbox.hooks.js';
 export { ComingSoonPanel } from './components/ComingSoonPanel.js';
 export type { ComingSoonPanelProps } from './components/ComingSoonPanel.js';
 export { ComingSoonNotice } from './components/ComingSoonNotice.js';
@@ -26,4 +28,14 @@ export { useSuggestInput, matchSuggestions } from './components/SuggestInput/Sug
 export type { SuggestInputController } from './components/SuggestInput/SuggestInput.hooks.js';
 export { useDebouncedHtmlPreview } from './components/useDebouncedHtmlPreview.hooks.js';
 export type { HtmlPreviewPort, HtmlPreviewState } from './components/useDebouncedHtmlPreview.hooks.js';
+export { MiddleTruncate } from './components/MiddleTruncate.js';
+export type { MiddleTruncateProps } from './components/MiddleTruncate.js';
+export { splitMiddleTruncation } from './components/MiddleTruncate.rules.js';
+export type { MiddleTruncationParts } from './components/MiddleTruncate.rules.js';
+export { ScrollJumpButtons } from './components/ScrollJump/ScrollJump.js';
+export type { ScrollJumpButtonsProps } from './components/ScrollJump/ScrollJump.js';
+export { useScrollJump } from './components/ScrollJump/ScrollJump.hooks.js';
+export type { ScrollJumpController } from './components/ScrollJump/ScrollJump.hooks.js';
+export { scrollJumpVisibility, scrollJumpBehavior, scrollJumpTarget } from './components/ScrollJump/ScrollJump.rules.js';
+export type { ScrollJumpVisibility, ScrollMetrics } from './components/ScrollJump/ScrollJump.rules.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/features/admin-widgets/index.js

@@ -7,10 +7,16 @@ export { placeInfoTipBubble, infoTipBubbleStyle } from './components/InfoTip.rul
 export { SeeMore, resolveSeeMoreView } from './components/SeeMore/SeeMore.js';
 export { useSeeMoreClamp } from './components/SeeMore/SeeMore.hooks.js';
 export { ImagePreviewModal } from './components/ImagePreviewModal.js';
-export { useImagePreviewModal } from './components/ImagePreviewModal.hooks.js';
+export { Lightbox } from './components/Lightbox/Lightbox.js';
+export { useLightbox, openLightboxDialog, closeLightboxDialog } from './components/Lightbox/Lightbox.hooks.js';
 export { ComingSoonPanel } from './components/ComingSoonPanel.js';
 export { ComingSoonNotice } from './components/ComingSoonNotice.js';
 export { SuggestInput } from './components/SuggestInput/SuggestInput.js';
 export { useSuggestInput, matchSuggestions } from './components/SuggestInput/SuggestInput.hooks.js';
 export { useDebouncedHtmlPreview } from './components/useDebouncedHtmlPreview.hooks.js';
+export { MiddleTruncate } from './components/MiddleTruncate.js';
+export { splitMiddleTruncation } from './components/MiddleTruncate.rules.js';
+export { ScrollJumpButtons } from './components/ScrollJump/ScrollJump.js';
+export { useScrollJump } from './components/ScrollJump/ScrollJump.hooks.js';
+export { scrollJumpVisibility, scrollJumpBehavior, scrollJumpTarget } from './components/ScrollJump/ScrollJump.rules.js';
 //# sourceMappingURL=index.js.map

package/dist/features/admin-widgets/styles/admin-widgets.css

@@ -1,2 +1,3 @@
 /* Existing ui subpath continues to load the merged admin styles. */
 @import "../../../styles/admin.css";
+@import "../../../styles/lightbox.css";

package/dist/features/asset-grid/react/components/AssetCard.js

@@ -3,9 +3,15 @@ import { useCallback } from 'react';
 import { useT } from '../../../i18n/index.js';
 import { useInView } from '../../../../react/hooks/useInView.js';
 import { resolveCheckboxClickAction, resolvePreviewClickAction } from '../../rules.js';
+function renderCardActions({ asset, renderCardExtra, onDeleteAsset, t }, _options = {}) {
+    if (!renderCardExtra && !onDeleteAsset)
+        return null;
+    return (_jsxs("div", { className: "asset-grid-card-actions", children: [renderCardExtra ? renderCardExtra(asset) : _jsx("span", {}), onDeleteAsset ? (_jsx("button", { type: "button", className: "asset-grid-card-delete-btn", onClick: () => onDeleteAsset(asset.id), children: t('Remove') })) : null] }));
+}
 export function AssetCard({ asset, index, selected, title, subtitle, kindLabel, sourceLabel, renderThumbnail, renderThumbnailPlaceholder, onToggle, onRange, onPreview, onDeleteAsset, renderCardExtra, }) {
     const t = useT();
     const { ref, inView } = useInView({ once: true, rootMargin: '300px' });
+    const selectionValue = selected ? 'true' : 'false';
     const handlePreviewClick = useCallback((e) => {
         const action = resolvePreviewClickAction(e);
         if (action === 'toggle')
@@ -22,6 +28,6 @@ export function AssetCard({ asset, index, selected, title, subtitle, kindLabel,
         else
             onToggle(asset.id, index);
     }, [asset.id, index, onToggle, onRange]);
-    return (_jsxs("figure", { className: "asset-grid-card", "data-asset-grid-id": asset.id, "data-selected": selected ? 'true' : 'false', children: [_jsxs("div", { className: "asset-grid-card-thumb", children: [_jsx("div", { ref: ref, className: "asset-grid-card-thumb-lazy", children: inView ? renderThumbnail(asset) : (renderThumbnailPlaceholder?.(asset) ?? null) }), _jsx("button", { type: "button", className: "asset-grid-card-preview-btn", onClick: handlePreviewClick, "aria-label": t('Preview {title}', { title }), children: _jsx("span", { className: "asset-grid-card-preview-overlay", "aria-hidden": true, children: _jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("circle", { cx: "11", cy: "11", r: "7" }), _jsx("path", { d: "m21 21-4.3-4.3" })] }) }) }), _jsx("button", { type: "button", className: "asset-grid-card-select-check", "data-checked": selected ? 'true' : 'false', "aria-pressed": selected, "aria-label": selected ? t('Deselect asset') : t('Select asset'), onClick: handleCheckboxClick, children: selected ? (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: _jsx("path", { d: "M20 6 9 17l-5-5" }) })) : null }), sourceLabel ? (_jsx("span", { className: "asset-grid-card-badge", "data-badge": "source", children: sourceLabel })) : null, kindLabel ? (_jsx("span", { className: "asset-grid-card-badge", "data-badge": "kind", children: kindLabel })) : null] }), _jsxs("figcaption", { className: "asset-grid-card-meta", children: [_jsx("button", { type: "button", className: "asset-grid-card-title", title: title, onClick: () => onPreview(asset.id), children: title }), subtitle ? _jsx("span", { className: "asset-grid-card-subtitle", children: subtitle }) : null] }), renderCardExtra || onDeleteAsset ? (_jsxs("div", { className: "asset-grid-card-actions", children: [renderCardExtra ? renderCardExtra(asset) : _jsx("span", {}), onDeleteAsset ? (_jsx("button", { type: "button", className: "asset-grid-card-delete-btn", onClick: () => onDeleteAsset(asset.id), children: t('Remove') })) : null] })) : null] }));
+    return (_jsxs("figure", { className: "asset-grid-card", "data-asset-grid-id": asset.id, "data-selected": selectionValue, children: [_jsxs("div", { className: "asset-grid-card-thumb", children: [_jsx("div", { ref: ref, className: "asset-grid-card-thumb-lazy", children: inView ? renderThumbnail(asset) : (renderThumbnailPlaceholder?.(asset) ?? null) }), _jsx("button", { type: "button", className: "asset-grid-card-preview-btn", onClick: handlePreviewClick, "aria-label": t('Preview {title}', { title }), children: _jsx("span", { className: "asset-grid-card-preview-overlay", "aria-hidden": true, children: _jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("circle", { cx: "11", cy: "11", r: "7" }), _jsx("path", { d: "m21 21-4.3-4.3" })] }) }) }), _jsx("button", { type: "button", className: "asset-grid-card-select-check", "data-checked": selectionValue, "aria-pressed": selected, "aria-label": selected ? t('Deselect asset') : t('Select asset'), onClick: handleCheckboxClick, children: selected ? (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: _jsx("path", { d: "M20 6 9 17l-5-5" }) })) : null }), sourceLabel ? (_jsx("span", { className: "asset-grid-card-badge", "data-badge": "source", children: sourceLabel })) : null, kindLabel ? (_jsx("span", { className: "asset-grid-card-badge", "data-badge": "kind", children: kindLabel })) : null] }), _jsxs("figcaption", { className: "asset-grid-card-meta", children: [_jsx("button", { type: "button", className: "asset-grid-card-title", title: title, onClick: () => onPreview(asset.id), children: title }), subtitle ? _jsx("span", { className: "asset-grid-card-subtitle", children: subtitle }) : null] }), renderCardActions({ asset, renderCardExtra, onDeleteAsset, t })] }));
 }
 //# sourceMappingURL=AssetCard.js.map

package/dist/features/asset-grid/react/components/AssetGrid.d.ts

@@ -41,5 +41,5 @@ export interface AssetGridProps<TAsset extends AssetGridItem> {
  * pattern behind a photo library / DAM. See `packages/ui/source-map.md` for
  * the full retained-behavior manifest against the original `LibrarySection.tsx`.
  */
-export declare function AssetGrid<TAsset extends AssetGridItem>({ active, selectors, dependencies, kindFacets, sourceFacets, renderThumbnail, renderThumbnailPlaceholder, renderCardExtra, renderBulkActions, onDeleteAsset, onDeleteSelected, onPreview, isPreviewOpen, toolbarActions, emptyState, searchPlaceholder, searchDebounceMs, liveUpdateCoalesceMs, initialViewMode, useWiredAssetGridData: useWiredAssetGridDataHook, useAssetGridSelection: useAssetGridSelectionHook, }: AssetGridProps<TAsset>): import("react").JSX.Element;
+export declare function AssetGrid<TAsset extends AssetGridItem>({ active, selectors, dependencies, kindFacets: configuredKindFacets, sourceFacets: configuredSourceFacets, renderThumbnail, renderThumbnailPlaceholder, renderCardExtra, renderBulkActions, onDeleteAsset, onDeleteSelected, onPreview, isPreviewOpen, toolbarActions, emptyState, searchPlaceholder, searchDebounceMs, liveUpdateCoalesceMs, initialViewMode, useWiredAssetGridData: useWiredAssetGridDataHook, useAssetGridSelection: useAssetGridSelectionHook, }: AssetGridProps<TAsset>): import("react").JSX.Element;
 //# sourceMappingURL=AssetGrid.d.ts.map