@jini-ai/ui 0.5.4 → 0.5.6

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

@@ -5,7 +5,8 @@ import { useInfoTip } from "./InfoTip.hooks.js";
  * and no touch visibility. Hover/focus opens this affordance; Escape dismisses without moving
  * focus, which onBlur alone cannot do.
  * A body portal escapes overflow:hidden/scrolling ancestors: z-index cannot rescue an absolutely
- * positioned descendant from clipping. Measured viewport coordinates position it above by
+ * positioned descendant from clipping. Inside a modal <dialog> it portals into that dialog
+ * instead, because the dialog's top layer covers everything in body. Measured viewport coordinates position it above by
  * preference, with the hook's headroom guard choosing below near the viewport's top; near a side
  * edge (or a host panel marked `data-jini-tip-bounds`) it shifts by its real width, never squeezes.
  * Keep state and DOM measurement in the injectable hook so rendering can use fixed fake state.
@@ -13,7 +14,7 @@ import { useInfoTip } from "./InfoTip.hooks.js";
  * tap, blur or Escape; a hover-opened tip still closes when the pointer leaves.
  */
 export interface InfoTipProps {
-    /** The explanation the bubble shows. */
+    /** The explanation the bubble shows; newlines separate lines, and "• " lines show as a hanging list. */
     label: string;
     /**
      * Short accessible name for the icon ("About subagents"). Omitted, the icon is named by `label`

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

@@ -78,6 +78,8 @@ export function useInfoTip(_input = {}, { placement: preferredPlacement } = {})
     }, [open]);
     function handleIconKeyDown(e) {
         if (e.key === "Escape" && open) {
+            // preventDefault also stops an enclosing modal <dialog> from closing on the same keypress.
+            e.preventDefault();
             e.stopPropagation();
             hide();
             return;

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

@@ -3,18 +3,45 @@ import { useId } from "react";
 import { createPortal } from "react-dom";
 import { agentHandle } from "@jini-ai/agentic";
 import { useInfoTip } from "./InfoTip.hooks.js";
-import { infoTipBubbleStyle } from "./InfoTip.rules.js";
+import { infoTipBubbleStyle, infoTipLines } from "./InfoTip.rules.js";
 /** Focus/hover tooltip that portals outside clipping ancestors; Escape dismisses in place. */
 export function InfoTip({ label, triggerLabel, descriptionId, placement: preferredPlacement, useTip = useInfoTip, agentHandle: handle, icon }) {
-    const { open, placement, coords, iconRef, bubbleRef, show, hide, leave, toggle, handleIconKeyDown } = useTip({}, { placement: preferredPlacement === "inline" ? undefined : preferredPlacement });
+    const inline = preferredPlacement === "inline";
+    const { open, placement, coords, iconRef, bubbleRef, show, hide, leave, toggle, handleIconKeyDown } = useTip({}, { placement: inline ? undefined : preferredPlacement });
     const autoId = useId();
-    const name = triggerLabel ?? label;
+    const { name, textId, describedBy } = infoTipNaming({ label, autoId }, { triggerLabel, descriptionId });
+    return (_jsxs("span", { className: inline ? "info-tip info-tip--inline" : "info-tip", children: [_jsx("span", { ref: iconRef, className: icon ? "info-tip-icon info-tip-icon--custom" : "info-tip-icon", role: "button", tabIndex: 0, "aria-label": name, "aria-expanded": open, ...(describedBy ? { "aria-describedby": describedBy } : {}), onMouseEnter: show, onMouseLeave: leave, onFocus: show, onBlur: hide, onClick: toggle, onKeyDown: handleIconKeyDown, ...(handle ? agentHandle({ handle }, { role: "button", label: name }) : {}), children: icon ?? "ⓘ" }), textId ? _jsx("span", { id: textId, hidden: true, children: label }) : null, open ? _jsx(InfoTipOpenCopy, { label: label, inline: inline, placement: placement, coords: coords, iconRef: iconRef, bubbleRef: bubbleRef }) : null] }));
+}
+/**
+ * The icon's accessible name and the id of the hidden copy of `label` (if any).
+ * @returns `name` for `aria-label`, `textId` for the hidden copy, `describedBy` for `aria-describedby`.
+ * @complexity O(1).
+ */
+function infoTipNaming({ label, autoId }, { triggerLabel, descriptionId }) {
     // With no short name the icon is already named by the full text; describing it again would
     // make a screen reader read it twice.
     const textId = descriptionId ?? (triggerLabel ? autoId : undefined);
-    const describedBy = triggerLabel ? textId : undefined;
-    return (_jsxs("span", { className: preferredPlacement === "inline" ? "info-tip info-tip--inline" : "info-tip", children: [_jsx("span", { ref: iconRef, className: icon ? "info-tip-icon info-tip-icon--custom" : "info-tip-icon", role: "button", tabIndex: 0, "aria-label": name, "aria-expanded": open, ...(describedBy ? { "aria-describedby": describedBy } : {}), onMouseEnter: show, onMouseLeave: leave, onFocus: show, onBlur: hide, onClick: toggle, onKeyDown: handleIconKeyDown, ...(handle ? agentHandle({ handle: handle }, { role: "button", label: name }) : {}), children: icon ?? "ⓘ" }), textId ? _jsx("span", { id: textId, hidden: true, children: label }) : null, open && preferredPlacement === "inline" ? _jsx("span", { className: "info-tip-inline-copy", "aria-hidden": "true", children: label }) : open
-                ? createPortal(_jsx("span", { ref: bubbleRef, className: placement === "below" ? "info-tip-bubble info-tip-bubble-below" : "info-tip-bubble", role: "presentation", "aria-hidden": "true", style: infoTipBubbleStyle(coords), children: label }), document.body)
-                : null] }));
+    return { name: triggerLabel ?? label, textId, describedBy: triggerLabel ? textId : undefined };
+}
+/** The open tip: inline copy beside the icon, or the bubble portaled out of clipping ancestors. */
+function InfoTipOpenCopy({ label, inline, placement, coords, iconRef, bubbleRef }) {
+    if (inline)
+        return _jsx("span", { className: "info-tip-inline-copy", "aria-hidden": "true", children: label });
+    return createPortal(_jsx("span", { ref: bubbleRef, className: placement === "below" ? "info-tip-bubble info-tip-bubble-below" : "info-tip-bubble", role: "presentation", "aria-hidden": "true", style: { ...infoTipBubbleStyle(coords), whiteSpace: "pre-line" }, children: _jsx(InfoTipBubbleText, { label: label }) }), 
+    // A modal <dialog> sits in the browser's top layer, above anything portaled to body.
+    iconRef.current?.closest("dialog") ?? document.body);
+}
+/** The bubble's text: a hanging list when any line is a "• " bullet, else the label as-is. */
+function InfoTipBubbleText({ label }) {
+    const lines = infoTipLines(label);
+    if (!lines)
+        return label;
+    // Keep the label's text separators; flex layout alone loses them from textContent.
+    return lines.map((line, index) => {
+        const separator = index < lines.length - 1 ? "\n" : null;
+        return line.bullet
+            ? _jsxs("span", { className: "info-tip-bullet", children: [_jsx("span", { "aria-hidden": "true", children: "\u2022" }), " ", _jsx("span", { children: line.text }), separator] }, index)
+            : _jsxs("span", { className: "info-tip-line", children: [line.text, separator] }, index);
+    });
 }
 //# sourceMappingURL=InfoTip.js.map

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

@@ -69,4 +69,17 @@ export declare function infoTipBubbleStyle(coords: {
     left: number;
     arrowLeft?: number | undefined;
 }): CSSProperties;
+/** One line of a bubble that holds a bulleted list. */
+export interface InfoTipLine {
+    text: string;
+    bullet: boolean;
+}
+/**
+ * Splits a label into lines when any line is a "• " bullet (e.g. a settings group's one tip, a line
+ * per option), so each bullet's wrapped text can hang past its dot; `pre-line` alone wraps under it.
+ * @param label The tip text; newlines separate lines.
+ * @returns The lines with their "• " removed, or `null` when the label has no bullet line.
+ * @complexity O(n) in the label's length.
+ */
+export declare function infoTipLines(label: string): InfoTipLine[] | null;
 //# sourceMappingURL=InfoTip.rules.d.ts.map

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

@@ -32,25 +32,45 @@ const ARROW_INSET_PX = 10;
 export function placeInfoTipBubble(input, { bounds, preferred } = {}) {
     const { anchor, bubble, viewport } = input;
     const width = bubble && bubble.width > 0 ? bubble.width : MAX_BUBBLE_WIDTH_PX;
+    const height = bubble && bubble.height > 0 ? bubble.height : 0;
+    const { left, arrowLeft } = placeHorizontally({ anchor, width, viewportWidth: viewport.width }, { bounds });
+    const placement = placeVertically({ anchor, height, viewportHeight: viewport.height }, { preferred });
+    return { placement, top: placement === "above" ? anchor.top : anchor.top + anchor.height, left, arrowLeft };
+}
+/**
+ * The horizontal half of {@link placeInfoTipBubble}: the bubble's centre x and the arrow's offset.
+ * @param input.width The bubble's measured width, or the worst-case estimate before measurement.
+ * @param options.bounds A host panel's limits; used only when the bubble fits inside them.
+ * @returns The bubble's centre x and the arrow's x inside the bubble.
+ * @complexity O(1).
+ */
+function placeHorizontally({ anchor, width, viewportWidth }, { bounds }) {
     const anchorCentre = anchor.left + anchor.width / 2;
-    const viewportSpan = { lo: EDGE_MARGIN_PX, hi: viewport.width - EDGE_MARGIN_PX };
+    const viewportSpan = { lo: EDGE_MARGIN_PX, hi: viewportWidth - EDGE_MARGIN_PX };
     const boundsSpan = bounds
-        ? { lo: Math.max(bounds.left, 0) + EDGE_MARGIN_PX, hi: Math.min(bounds.right, viewport.width) - EDGE_MARGIN_PX }
+        ? { lo: Math.max(bounds.left, 0) + EDGE_MARGIN_PX, hi: Math.min(bounds.right, viewportWidth) - EDGE_MARGIN_PX }
         : null;
     const span = boundsSpan && boundsSpan.hi - boundsSpan.lo >= width ? boundsSpan : viewportSpan;
     const left = span.hi - span.lo < width
-        ? viewport.width / 2
+        ? viewportWidth / 2
         : Math.min(Math.max(anchorCentre, span.lo + width / 2), span.hi - width / 2);
     const bubbleLeftEdge = left - width / 2;
     const arrowLeft = Math.min(Math.max(anchorCentre - bubbleLeftEdge, ARROW_INSET_PX), width - ARROW_INSET_PX);
-    const anchorBottom = anchor.top + anchor.height;
-    const height = bubble && bubble.height > 0 ? bubble.height : 0;
+    return { left, arrowLeft };
+}
+/**
+ * The vertical half of {@link placeInfoTipBubble}: which side of the icon the bubble opens on.
+ * @param input.height The bubble's measured height, or 0 before measurement.
+ * @param options.preferred A host's preferred side; only "bottom" changes the default above-first rule.
+ * @returns The side the bubble opens on.
+ * @complexity O(1).
+ */
+function placeVertically({ anchor, height, viewportHeight }, { preferred }) {
     const fitsAbove = height > 0 ? anchor.top >= height + GAP_PX : anchor.top >= ABOVE_HEADROOM_PX;
-    const fitsBelow = height === 0 || anchorBottom + GAP_PX + height <= viewport.height;
-    const placement = preferred === "bottom"
-        ? (!fitsBelow && fitsAbove ? "above" : "below")
-        : fitsAbove ? "above" : "below";
-    return { placement, top: placement === "above" ? anchor.top : anchorBottom, left, arrowLeft };
+    if (preferred !== "bottom")
+        return fitsAbove ? "above" : "below";
+    const fitsBelow = height === 0 || anchor.top + anchor.height + GAP_PX + height <= viewportHeight;
+    return !fitsBelow && fitsAbove ? "above" : "below";
 }
 /**
  * The portal's inline style: position plus, once measured, the arrow offset as a CSS variable
@@ -65,4 +85,17 @@ export function infoTipBubbleStyle(coords) {
         style["--info-tip-arrow-left"] = `${coords.arrowLeft}px`;
     return style;
 }
+/**
+ * Splits a label into lines when any line is a "• " bullet (e.g. a settings group's one tip, a line
+ * per option), so each bullet's wrapped text can hang past its dot; `pre-line` alone wraps under it.
+ * @param label The tip text; newlines separate lines.
+ * @returns The lines with their "• " removed, or `null` when the label has no bullet line.
+ * @complexity O(n) in the label's length.
+ */
+export function infoTipLines(label) {
+    const lines = label.split("\n");
+    if (!lines.some((line) => line.startsWith("• ")))
+        return null;
+    return lines.map((line) => line.startsWith("• ") ? { text: line.slice(2), bullet: true } : { text: line, bullet: false });
+}
 //# sourceMappingURL=InfoTip.rules.js.map

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

@@ -0,0 +1,30 @@
+import { type ReactNode } from "react";
+import { useLightbox } from "./Lightbox.hooks.js";
+type LightboxPart = "dialog" | "close" | "previous" | "next";
+export interface LightboxProps {
+    open: boolean;
+    /** Shown above the media (usually the file name) and used as the dialog's accessible name. */
+    title: string;
+    onClose: () => void;
+    /** The media itself. `img`/`video` children are contain-fit to the viewport and never upscaled. */
+    children?: ReactNode;
+    /** Zero-based position and set size; with `onNavigate` and `count > 1` the arrow pair renders. */
+    index?: number | undefined;
+    count?: number | undefined;
+    onNavigate?: ((index: number) => void) | undefined;
+    /** Caller-specific controls (download, copy, metadata), placed bottom-left opposite the arrows. */
+    actions?: ReactNode;
+    /** No locale is owned here; a translated caller passes its own accessible labels. */
+    labels?: Partial<Record<"close" | "previous" | "next", string>> | undefined;
+    /** Extra class on the `<dialog>` so a caller can scope its own media rules. */
+    className?: string | undefined;
+    /** Per-part attributes (agent handles, `data-jini-part` markers) without the shell knowing them. */
+    partAttrs?: Partial<Record<LightboxPart, Record<string, string>>> | undefined;
+    /** A fake controller can exercise rendering without a real native-dialog lifecycle. */
+    useLightboxHook?: typeof useLightbox | undefined;
+}
+/** 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 declare function Lightbox(props: LightboxProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Lightbox.d.ts.map

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

@@ -0,0 +1,40 @@
+import { type MouseEvent, type RefObject, type SyntheticEvent } 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 declare function openLightboxDialog(dialog: HTMLDialogElement): void;
+/** The close-side mirror of {@link openLightboxDialog} — same fallback and already-closed guard. */
+export declare function closeLightboxDialog(dialog: HTMLDialogElement): void;
+export interface LightboxHookInput {
+    open: boolean;
+    onClose: () => void;
+    /** Zero-based position in the set; with `count > 1` and `onNavigate` the arrow pair renders. */
+    index?: number | undefined;
+    count?: number | undefined;
+    onNavigate?: ((index: number) => void) | undefined;
+}
+export interface LightboxController {
+    dialogRef: RefObject<HTMLDialogElement | null>;
+    closeRef: RefObject<HTMLButtonElement | null>;
+    prevRef: RefObject<HTMLButtonElement | null>;
+    nextRef: RefObject<HTMLButtonElement | null>;
+    /** Whether the arrow pair renders at all (a single item has nowhere to go). */
+    navigable: boolean;
+    hasPrev: boolean;
+    hasNext: boolean;
+    /** "3 / 12", or "" when there is no set to count. */
+    counter: string;
+    previous: () => void;
+    next: () => void;
+    handleCancel: (event: SyntheticEvent<HTMLDialogElement>) => void;
+    handleClick: (event: MouseEvent<HTMLDialogElement>) => void;
+}
+/** 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 declare const LIGHTBOX_DISMISS_ATTR = "data-jini-lightbox-dismiss";
+export declare function useLightbox(input: LightboxHookInput): LightboxController;
+//# sourceMappingURL=Lightbox.hooks.d.ts.map

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