@aglyn/plugins-mui 1.0.0-beta.235 → 1.0.0-beta.237

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aglyn/plugins-mui",
-  "version": "1.0.0-beta.235",
+  "version": "1.0.0-beta.237",
   "license": "Apache-2.0",
   "homepage": "https://aglyn.com",
   "repository": {
@@ -25,12 +25,12 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@aglyn/aglyn": "1.0.0-beta.235",
-    "@aglyn/shared-data-enums": "1.0.0-beta.235",
-    "@aglyn/shared-data-mdi": "1.0.0-beta.235",
-    "@aglyn/shared-ui-jsx": "1.0.0-beta.235",
-    "@aglyn/shared-ui-theme": "1.0.0-beta.235",
-    "@aglyn/shared-util-vendor": "1.0.0-beta.235",
+    "@aglyn/aglyn": "1.0.0-beta.237",
+    "@aglyn/shared-data-enums": "1.0.0-beta.237",
+    "@aglyn/shared-data-mdi": "1.0.0-beta.237",
+    "@aglyn/shared-ui-jsx": "1.0.0-beta.237",
+    "@aglyn/shared-ui-theme": "1.0.0-beta.237",
+    "@aglyn/shared-util-vendor": "1.0.0-beta.237",
     "@swc/helpers": "0.5.23",
     "mobx": "^7.0.5",
     "mobx-react-lite": "^5.1.0"

package/src/lib/components/image-lightbox-items.d.ts

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/** Marks an `<img>` that opens in a lightbox; its value is the gallery name. */
+export declare const LIGHTBOX_ATTRIBUTE = "data-aglyn-lightbox";
+/** The caption a picture shows in the lightbox. */
+export declare const LIGHTBOX_CAPTION_ATTRIBUTE = "data-aglyn-lightbox-caption";
+export interface LightboxPicture {
+    src: string;
+    srcSet?: string;
+    alt: string;
+    caption?: string;
+}
+export interface LightboxGallery {
+    pictures: LightboxPicture[];
+    index: number;
+}
+/**
+ * Opens the gallery the trigger belongs to. Provided by an Image List whose
+ * lightbox is on, so every Image inside it opens the list's gallery rather
+ * than one of its own.
+ */
+export interface ImageLightboxGalleryApi {
+    open: (trigger: HTMLElement) => void;
+}
+export declare const ImageLightboxGalleryContext: import("react").Context<ImageLightboxGalleryApi>;
+/** One `<img>` as a lightbox picture, or nothing for one with no source. */
+export declare function pictureOf(img: Element): LightboxPicture | null;
+/**
+ * The gallery an Image List opens from one of its pictures: every picture in
+ * the list, starting at the one pressed.
+ */
+export declare function listGalleryOf(list: Element, trigger: Element): LightboxGallery;
+/**
+ * The gallery an Image opens on its own: itself, or — when it names a
+ * gallery — every picture on the page with the same name.
+ */
+export declare function imageGalleryOf(img: Element): LightboxGallery;
+/** The next index, wrapping at both ends. */
+export declare function stepIndex(index: number, step: number, count: number): number;

package/src/lib/components/image-lightbox-items.js

@@ -0,0 +1,113 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ /**
+ * What a picture lightbox shows, read off the page (AGL-3717).
+ *
+ * No React and no MUI here: the Image and the Image List import this on every
+ * page that places them, and the dialog itself (`image-lightbox.tsx`) loads
+ * only when a visitor opens it.
+ *
+ * ## Why the pictures are read from the DOM
+ *
+ * A gallery is "the pictures in this list" or "the pictures that share this
+ * gallery name", and the page already holds exactly that: every Image that
+ * takes part stamps {@link LIGHTBOX_ATTRIBUTE} on its `<img>`, with its
+ * caption beside it. Reading them when the visitor clicks — rather than
+ * registering each Image with its list in React state — gives the order the
+ * visitor sees (a list's tiles, a page's sections), costs nothing until the
+ * click, and works whatever wraps the pictures: a tile, a card, a grid cell
+ * or a reusable component.
+ *
+ * The lightbox asks for the picture by the URL and `srcset` the Image already
+ * rendered, with a `sizes` of the whole screen, so the browser picks the
+ * full-size variant the media CDN already holds for it (AGL-175). Nothing new
+ * is resolved here, and no host is reached that the page did not reach.
+ */ import { createContext } from "react";
+/** Marks an `<img>` that opens in a lightbox; its value is the gallery name. */ export const LIGHTBOX_ATTRIBUTE = 'data-aglyn-lightbox';
+/** The caption a picture shows in the lightbox. */ export const LIGHTBOX_CAPTION_ATTRIBUTE = 'data-aglyn-lightbox-caption';
+export const ImageLightboxGalleryContext = createContext(null);
+/** The caption of an Image List tile, when the picture names none itself. */ function tileCaption(img) {
+    var _img_closest_querySelector_textContent, _img_closest_querySelector, _img_closest;
+    const title = (_img_closest = img.closest('li')) == null ? void 0 : (_img_closest_querySelector = _img_closest.querySelector('.MuiImageListItemBar-title')) == null ? void 0 : (_img_closest_querySelector_textContent = _img_closest_querySelector.textContent) == null ? void 0 : _img_closest_querySelector_textContent.trim();
+    return title || undefined;
+}
+/** One `<img>` as a lightbox picture, or nothing for one with no source. */ export function pictureOf(img) {
+    var _img_getAttribute;
+    var _img_getAttribute1, _img_getAttribute2, _img_getAttribute3;
+    const src = (_img_getAttribute1 = img.getAttribute('src')) == null ? void 0 : _img_getAttribute1.trim();
+    if (!src) return null;
+    const srcSet = ((_img_getAttribute2 = img.getAttribute('srcset')) == null ? void 0 : _img_getAttribute2.trim()) || undefined;
+    const caption = ((_img_getAttribute3 = img.getAttribute(LIGHTBOX_CAPTION_ATTRIBUTE)) == null ? void 0 : _img_getAttribute3.trim()) || tileCaption(img);
+    return _extends({
+        src
+    }, srcSet ? {
+        srcSet
+    } : {}, {
+        alt: (_img_getAttribute = img.getAttribute('alt')) != null ? _img_getAttribute : ''
+    }, caption ? {
+        caption
+    } : {});
+}
+/** The pictures under `root` that take part, in document order. */ function picturesUnder(root, trigger, selector) {
+    const images = Array.from(root.querySelectorAll(selector));
+    const pictures = [];
+    let index = 0;
+    for (const img of images){
+        const picture = pictureOf(img);
+        if (!picture) continue;
+        if (img === trigger || img.contains(trigger) || trigger.contains(img)) {
+            index = pictures.length;
+        }
+        pictures.push(picture);
+    }
+    return {
+        pictures,
+        index
+    };
+}
+/**
+ * The gallery an Image List opens from one of its pictures: every picture in
+ * the list, starting at the one pressed.
+ */ export function listGalleryOf(list, trigger) {
+    return picturesUnder(list, trigger, `img[${LIGHTBOX_ATTRIBUTE}]`);
+}
+/**
+ * The gallery an Image opens on its own: itself, or — when it names a
+ * gallery — every picture on the page with the same name.
+ */ export function imageGalleryOf(img) {
+    var _img_getAttribute;
+    const name = (_img_getAttribute = img.getAttribute(LIGHTBOX_ATTRIBUTE)) != null ? _img_getAttribute : '';
+    if (name) {
+        const doc = img.ownerDocument;
+        const escaped = typeof CSS !== 'undefined' && typeof CSS.escape === 'function' ? CSS.escape(name) : name.replace(/["\\]/g, '\\$&');
+        const gallery = picturesUnder(doc, img, `img[${LIGHTBOX_ATTRIBUTE}="${escaped}"]`);
+        if (gallery.pictures.length) return gallery;
+    }
+    const picture = pictureOf(img);
+    return {
+        pictures: picture ? [
+            picture
+        ] : [],
+        index: 0
+    };
+}
+/** The next index, wrapping at both ends. */ export function stepIndex(index, step, count) {
+    if (count <= 0) return 0;
+    return ((index + step) % count + count) % count;
+}
+
+//# sourceMappingURL=image-lightbox-items.js.map

package/src/lib/components/image-lightbox-items.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/mui/src/lib/components/image-lightbox-items.ts"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * What a picture lightbox shows, read off the page (AGL-3717).\n *\n * No React and no MUI here: the Image and the Image List import this on every\n * page that places them, and the dialog itself (`image-lightbox.tsx`) loads\n * only when a visitor opens it.\n *\n * ## Why the pictures are read from the DOM\n *\n * A gallery is \"the pictures in this list\" or \"the pictures that share this\n * gallery name\", and the page already holds exactly that: every Image that\n * takes part stamps {@link LIGHTBOX_ATTRIBUTE} on its `<img>`, with its\n * caption beside it. Reading them when the visitor clicks — rather than\n * registering each Image with its list in React state — gives the order the\n * visitor sees (a list's tiles, a page's sections), costs nothing until the\n * click, and works whatever wraps the pictures: a tile, a card, a grid cell\n * or a reusable component.\n *\n * The lightbox asks for the picture by the URL and `srcset` the Image already\n * rendered, with a `sizes` of the whole screen, so the browser picks the\n * full-size variant the media CDN already holds for it (AGL-175). Nothing new\n * is resolved here, and no host is reached that the page did not reach.\n */\n\nimport { createContext } from 'react'\n\n/** Marks an `<img>` that opens in a lightbox; its value is the gallery name. */\nexport const LIGHTBOX_ATTRIBUTE = 'data-aglyn-lightbox'\n/** The caption a picture shows in the lightbox. */\nexport const LIGHTBOX_CAPTION_ATTRIBUTE = 'data-aglyn-lightbox-caption'\n\nexport interface LightboxPicture {\n  src: string\n  srcSet?: string\n  alt: string\n  caption?: string\n}\n\nexport interface LightboxGallery {\n  pictures: LightboxPicture[]\n  index: number\n}\n\n/**\n * Opens the gallery the trigger belongs to. Provided by an Image List whose\n * lightbox is on, so every Image inside it opens the list's gallery rather\n * than one of its own.\n */\nexport interface ImageLightboxGalleryApi {\n  open: (trigger: HTMLElement) => void\n}\n\nexport const ImageLightboxGalleryContext =\n  createContext<ImageLightboxGalleryApi | null>(null)\n\n/** The caption of an Image List tile, when the picture names none itself. */\nfunction tileCaption(img: Element): string | undefined {\n  const title = img\n    .closest('li')\n    ?.querySelector('.MuiImageListItemBar-title')\n    ?.textContent?.trim()\n  return title || undefined\n}\n\n/** One `<img>` as a lightbox picture, or nothing for one with no source. */\nexport function pictureOf(img: Element): LightboxPicture | null {\n  const src = img.getAttribute('src')?.trim()\n  if (!src) return null\n  const srcSet = img.getAttribute('srcset')?.trim() || undefined\n  const caption =\n    img.getAttribute(LIGHTBOX_CAPTION_ATTRIBUTE)?.trim() || tileCaption(img)\n  return {\n    src,\n    ...(srcSet ? { srcSet } : {}),\n    alt: img.getAttribute('alt') ?? '',\n    ...(caption ? { caption } : {}),\n  }\n}\n\n/** The pictures under `root` that take part, in document order. */\nfunction picturesUnder(\n  root: ParentNode,\n  trigger: Element,\n  selector: string,\n): LightboxGallery {\n  const images = Array.from(root.querySelectorAll(selector))\n  const pictures: LightboxPicture[] = []\n  let index = 0\n  for (const img of images) {\n    const picture = pictureOf(img)\n    if (!picture) continue\n    if (img === trigger || img.contains(trigger) || trigger.contains(img)) {\n      index = pictures.length\n    }\n    pictures.push(picture)\n  }\n  return { pictures, index }\n}\n\n/**\n * The gallery an Image List opens from one of its pictures: every picture in\n * the list, starting at the one pressed.\n */\nexport function listGalleryOf(\n  list: Element,\n  trigger: Element,\n): LightboxGallery {\n  return picturesUnder(list, trigger, `img[${LIGHTBOX_ATTRIBUTE}]`)\n}\n\n/**\n * The gallery an Image opens on its own: itself, or — when it names a\n * gallery — every picture on the page with the same name.\n */\nexport function imageGalleryOf(img: Element): LightboxGallery {\n  const name = img.getAttribute(LIGHTBOX_ATTRIBUTE) ?? ''\n  if (name) {\n    const doc = img.ownerDocument\n    const escaped =\n      typeof CSS !== 'undefined' && typeof CSS.escape === 'function'\n        ? CSS.escape(name)\n        : name.replace(/[\"\\\\]/g, '\\\\$&')\n    const gallery = picturesUnder(doc, img, `img[${LIGHTBOX_ATTRIBUTE}=\"${escaped}\"]`)\n    if (gallery.pictures.length) return gallery\n  }\n  const picture = pictureOf(img)\n  return { pictures: picture ? [picture] : [], index: 0 }\n}\n\n/** The next index, wrapping at both ends. */\nexport function stepIndex(index: number, step: number, count: number): number {\n  if (count <= 0) return 0\n  return (((index + step) % count) + count) % count\n}\n"],"names":["createContext","LIGHTBOX_ATTRIBUTE","LIGHTBOX_CAPTION_ATTRIBUTE","ImageLightboxGalleryContext","tileCaption","img","title","closest","querySelector","textContent","trim","undefined","pictureOf","src","getAttribute","srcSet","caption","alt","picturesUnder","root","trigger","selector","images","Array","from","querySelectorAll","pictures","index","picture","contains","length","push","listGalleryOf","list","imageGalleryOf","name","doc","ownerDocument","escaped","CSS","escape","replace","gallery","stepIndex","step","count"],"mappings":"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"}

package/src/lib/components/image-lightbox.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type { LightboxAppearance } from '@aglyn/shared-ui-jsx/components/lightbox/lightbox-appearance';
+import { type LightboxGallery } from './image-lightbox-items';
+/** How far a finger has to travel sideways before it counts as a swipe. */
+export declare const SWIPE_THRESHOLD_PX = 40;
+export interface ImageLightboxProps {
+    open: boolean;
+    onClose: () => void;
+    gallery: LightboxGallery;
+    appearance?: LightboxAppearance;
+    /** A strip of thumbnails under the picture, for a gallery of two or more. */
+    thumbnails?: boolean;
+    /** The dialog's name; the gallery's own name or "Gallery". */
+    label?: string;
+}
+export declare function ImageLightbox(props: ImageLightboxProps): import("react").JSX.Element;
+export declare namespace ImageLightbox {
+    var displayName: string;
+}
+export default ImageLightbox;

package/src/lib/components/image-lightbox.js

@@ -0,0 +1,303 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ /**
+ * The picture lightbox (AGL-3717): one picture full size, or a gallery of
+ * them with previous and next, a counter, captions and an optional strip of
+ * thumbnails.
+ *
+ * It is the shared lightbox shell — the Video's dialog, lifted into
+ * `@aglyn/shared-ui-jsx/components/lightbox/lightbox-dialog` — with pictures
+ * in it, and it is reached the way the Video's is: `image.tsx` and
+ * `image-list.tsx` load this module through `lazy(() => import())` the first
+ * time a visitor goes near a picture that opens, so a page that only shows
+ * pictures never downloads the Dialog stack (AGL-1290).
+ *
+ * Nothing in it renders while closed. The full-size picture is requested when
+ * the dialog opens and not before; it is the one image here that loads
+ * eagerly, because the visitor has just asked to see it.
+ */ 'use client';
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as Aglyn from "@aglyn/aglyn";
+import { mdiChevronLeft, mdiChevronRight } from "@aglyn/shared-data-mdi";
+import { MdiIcon } from "@aglyn/shared-ui-jsx";
+import { LightboxDialog } from "@aglyn/shared-ui-jsx/components/lightbox/lightbox-dialog";
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import { alpha } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
+import { useEffect, useRef, useState } from "react";
+import { stepIndex } from "./image-lightbox-items.js";
+/** How far a finger has to travel sideways before it counts as a swipe. */ export const SWIPE_THRESHOLD_PX = 40;
+const navButtonSx = {
+    position: 'absolute',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    zIndex: 1,
+    color: 'common.white',
+    bgcolor: (theme)=>alpha(theme.palette.common.black, 0.45),
+    '&:hover': {
+        bgcolor: (theme)=>alpha(theme.palette.common.black, 0.65)
+    }
+};
+export function ImageLightbox(props) {
+    var _ref;
+    const { open, onClose, gallery, appearance, thumbnails, label } = props;
+    const { pictures } = gallery;
+    const count = pictures.length;
+    const [index, setIndex] = useState(gallery.index);
+    // A new opening starts at the picture pressed, not where the last one left off.
+    useEffect(()=>{
+        if (open) setIndex(gallery.index);
+    }, [
+        open,
+        gallery
+    ]);
+    const swipeStart = useRef(null);
+    const current = pictures[Math.min(index, Math.max(count - 1, 0))];
+    if (!current) return null;
+    const many = count > 1;
+    const go = (step)=>setIndex((value)=>stepIndex(value, step, count));
+    const handleKeyDown = (event)=>{
+        if (!many) return;
+        if (event.key === 'ArrowRight') go(1);
+        else if (event.key === 'ArrowLeft') go(-1);
+        else if (event.key === 'Home') setIndex(0);
+        else if (event.key === 'End') setIndex(count - 1);
+        else return;
+        event.preventDefault();
+    };
+    const handlePointerDown = (event)=>{
+        swipeStart.current = {
+            x: event.clientX,
+            y: event.clientY
+        };
+    };
+    const handlePointerUp = (event)=>{
+        const start = swipeStart.current;
+        swipeStart.current = null;
+        if (!start || !many) return;
+        const dx = event.clientX - start.x;
+        const dy = event.clientY - start.y;
+        // Sideways and far enough: a scroll or a tap is neither.
+        if (Math.abs(dx) < SWIPE_THRESHOLD_PX || Math.abs(dx) < Math.abs(dy)) return;
+        go(dx < 0 ? 1 : -1);
+    };
+    const placement = (_ref = appearance == null ? void 0 : appearance.captionPlacement) != null ? _ref : 'below';
+    const caption = placement !== 'hidden' ? current.caption : undefined;
+    const ownCloseLook = Boolean((appearance == null ? void 0 : appearance.closeStyle) && appearance.closeStyle !== 'icon');
+    return /*#__PURE__*/ _jsxs(LightboxDialog, {
+        open: open,
+        onClose: onClose,
+        label: label || (many ? 'Gallery' : current.alt || 'Picture'),
+        closeLabel: many ? 'Close gallery' : 'Close picture',
+        appearance: appearance,
+        onKeyDown: handleKeyDown,
+        maxWidth: "lg",
+        // The pictures float on the backdrop: no sheet behind them.
+        paperSx: {
+            // `background`, not a colour alone: it also clears the overlay
+            // gradient a dark theme lays on every paper.
+            background: 'transparent',
+            boxShadow: 'none',
+            overflow: 'visible',
+            alignItems: 'center'
+        },
+        closeButtonSx: ownCloseLook ? undefined : {
+            color: 'common.white',
+            bgcolor: (theme)=>alpha(theme.palette.common.black, 0.45)
+        },
+        children: [
+            /*#__PURE__*/ _jsxs(Box, {
+                component: "figure",
+                sx: {
+                    position: 'relative',
+                    m: 0,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    minHeight: 0,
+                    // A swipe moves between pictures, never the page behind them.
+                    touchAction: 'pan-y'
+                },
+                onPointerDown: handlePointerDown,
+                onPointerUp: handlePointerUp,
+                children: [
+                    /*#__PURE__*/ _jsxs(Box, {
+                        sx: {
+                            position: 'relative',
+                            maxWidth: '100%'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Box, {
+                                component: "img",
+                                src: current.src,
+                                srcSet: current.srcSet,
+                                // The whole screen is the slot, so the browser takes the
+                                // full-size variant the media CDN already holds.
+                                sizes: "100vw",
+                                alt: current.alt,
+                                // Requested only now, because the visitor asked for it.
+                                loading: "eager",
+                                draggable: false,
+                                sx: {
+                                    display: 'block',
+                                    maxWidth: '100%',
+                                    maxHeight: thumbnails && many ? 'calc(100vh - 220px)' : 'calc(100vh - 140px)',
+                                    width: 'auto',
+                                    height: 'auto',
+                                    objectFit: 'contain',
+                                    userSelect: 'none',
+                                    borderRadius: (appearance == null ? void 0 : appearance.radius) !== undefined ? `${appearance.radius}px` : undefined
+                                }
+                            }, current.src),
+                            caption && placement === 'overlay' ? /*#__PURE__*/ _jsx(Typography, {
+                                component: "figcaption",
+                                variant: "body2",
+                                sx: {
+                                    position: 'absolute',
+                                    left: 0,
+                                    right: 0,
+                                    bottom: 0,
+                                    px: 2,
+                                    py: 1.5,
+                                    color: 'common.white',
+                                    background: (theme)=>`linear-gradient(transparent, ${alpha(theme.palette.common.black, 0.7)})`
+                                },
+                                children: caption
+                            }) : null
+                        ]
+                    }),
+                    many ? /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx(IconButton, {
+                                "aria-label": "Previous picture",
+                                onClick: ()=>go(-1),
+                                sx: [
+                                    navButtonSx,
+                                    {
+                                        left: {
+                                            xs: 4,
+                                            sm: -56
+                                        }
+                                    }
+                                ],
+                                children: /*#__PURE__*/ _jsx(MdiIcon, {
+                                    path: mdiChevronLeft.path
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(IconButton, {
+                                "aria-label": "Next picture",
+                                onClick: ()=>go(1),
+                                sx: [
+                                    navButtonSx,
+                                    {
+                                        right: {
+                                            xs: 4,
+                                            sm: -56
+                                        }
+                                    }
+                                ],
+                                children: /*#__PURE__*/ _jsx(MdiIcon, {
+                                    path: mdiChevronRight.path
+                                })
+                            })
+                        ]
+                    }) : null,
+                    caption && placement === 'below' || many ? /*#__PURE__*/ _jsxs(Box, {
+                        sx: {
+                            display: 'flex',
+                            gap: 2,
+                            alignItems: 'baseline',
+                            justifyContent: 'space-between',
+                            width: '100%',
+                            pt: 1.5,
+                            color: 'common.white'
+                        },
+                        children: [
+                            caption && placement === 'below' ? /*#__PURE__*/ _jsx(Typography, {
+                                component: "figcaption",
+                                variant: "body2",
+                                children: caption
+                            }) : /*#__PURE__*/ _jsx("span", {}),
+                            many ? /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                "aria-live": "polite",
+                                "aria-label": `Picture ${index + 1} of ${count}`,
+                                sx: {
+                                    whiteSpace: 'nowrap',
+                                    opacity: 0.85
+                                },
+                                children: `${index + 1} / ${count}`
+                            }) : null
+                        ]
+                    }) : null
+                ]
+            }),
+            thumbnails && many ? /*#__PURE__*/ _jsx(Box, {
+                role: "group",
+                "aria-label": "Pictures",
+                sx: {
+                    display: 'flex',
+                    gap: 1,
+                    pt: 1.5,
+                    overflowX: 'auto',
+                    maxWidth: '100%',
+                    justifyContent: 'safe center'
+                },
+                children: pictures.map((picture, position)=>/*#__PURE__*/ _jsx(Box, {
+                        component: "button",
+                        type: "button",
+                        onClick: ()=>setIndex(position),
+                        "aria-label": `Show picture ${position + 1}${picture.alt ? `: ${picture.alt}` : ''}`,
+                        "aria-current": position === index ? 'true' : undefined,
+                        sx: {
+                            flex: '0 0 auto',
+                            p: 0,
+                            border: 2,
+                            borderColor: position === index ? 'common.white' : 'transparent',
+                            borderRadius: 1,
+                            bgcolor: 'transparent',
+                            cursor: 'pointer',
+                            opacity: position === index ? 1 : 0.6,
+                            '&:focus-visible': {
+                                outline: '2px solid',
+                                outlineColor: 'common.white'
+                            }
+                        },
+                        children: /*#__PURE__*/ _jsx(Box, _extends({
+                            component: "img",
+                            src: picture.src,
+                            srcSet: picture.srcSet,
+                            sizes: "64px",
+                            alt: "",
+                            sx: {
+                                display: 'block',
+                                width: 64,
+                                height: 48,
+                                objectFit: 'cover',
+                                borderRadius: 0.5
+                            }
+                        }, Aglyn.DEFERRED_IMAGE_ATTRIBUTES))
+                    }, `${picture.src}-${position}`))
+            }) : null
+        ]
+    });
+}
+ImageLightbox.displayName = 'ImageLightbox';
+export default ImageLightbox;
+
+//# sourceMappingURL=image-lightbox.js.map

package/src/lib/components/image-lightbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/mui/src/lib/components/image-lightbox.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * The picture lightbox (AGL-3717): one picture full size, or a gallery of\n * them with previous and next, a counter, captions and an optional strip of\n * thumbnails.\n *\n * It is the shared lightbox shell — the Video's dialog, lifted into\n * `@aglyn/shared-ui-jsx/components/lightbox/lightbox-dialog` — with pictures\n * in it, and it is reached the way the Video's is: `image.tsx` and\n * `image-list.tsx` load this module through `lazy(() => import())` the first\n * time a visitor goes near a picture that opens, so a page that only shows\n * pictures never downloads the Dialog stack (AGL-1290).\n *\n * Nothing in it renders while closed. The full-size picture is requested when\n * the dialog opens and not before; it is the one image here that loads\n * eagerly, because the visitor has just asked to see it.\n */\n'use client'\n\nimport * as Aglyn from '@aglyn/aglyn'\nimport { mdiChevronLeft, mdiChevronRight } from '@aglyn/shared-data-mdi'\nimport { MdiIcon } from '@aglyn/shared-ui-jsx'\nimport type { LightboxAppearance } from '@aglyn/shared-ui-jsx/components/lightbox/lightbox-appearance'\nimport { LightboxDialog } from '@aglyn/shared-ui-jsx/components/lightbox/lightbox-dialog'\nimport Box from '@mui/material/Box'\nimport IconButton from '@mui/material/IconButton'\nimport { alpha, type Theme } from '@mui/material/styles'\nimport Typography from '@mui/material/Typography'\nimport { type KeyboardEvent, type PointerEvent, useEffect, useRef, useState } from 'react'\nimport { type LightboxGallery, stepIndex } from './image-lightbox-items'\n\n/** How far a finger has to travel sideways before it counts as a swipe. */\nexport const SWIPE_THRESHOLD_PX = 40\n\nexport interface ImageLightboxProps {\n  open: boolean\n  onClose: () => void\n  gallery: LightboxGallery\n  appearance?: LightboxAppearance\n  /** A strip of thumbnails under the picture, for a gallery of two or more. */\n  thumbnails?: boolean\n  /** The dialog's name; the gallery's own name or \"Gallery\". */\n  label?: string\n}\n\nconst navButtonSx = {\n  position: 'absolute',\n  top: '50%',\n  transform: 'translateY(-50%)',\n  zIndex: 1,\n  color: 'common.white',\n  bgcolor: (theme: Theme) => alpha(theme.palette.common.black, 0.45),\n  '&:hover': { bgcolor: (theme: Theme) => alpha(theme.palette.common.black, 0.65) },\n} as const\n\nexport function ImageLightbox(props: ImageLightboxProps) {\n  const { open, onClose, gallery, appearance, thumbnails, label } = props\n  const { pictures } = gallery\n  const count = pictures.length\n  const [index, setIndex] = useState(gallery.index)\n  // A new opening starts at the picture pressed, not where the last one left off.\n  useEffect(() => {\n    if (open) setIndex(gallery.index)\n  }, [open, gallery])\n  const swipeStart = useRef<{ x: number; y: number } | null>(null)\n  const current = pictures[Math.min(index, Math.max(count - 1, 0))]\n  if (!current) return null\n  const many = count > 1\n  const go = (step: number) => setIndex((value) => stepIndex(value, step, count))\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (!many) return\n    if (event.key === 'ArrowRight') go(1)\n    else if (event.key === 'ArrowLeft') go(-1)\n    else if (event.key === 'Home') setIndex(0)\n    else if (event.key === 'End') setIndex(count - 1)\n    else return\n    event.preventDefault()\n  }\n  const handlePointerDown = (event: PointerEvent<HTMLElement>) => {\n    swipeStart.current = { x: event.clientX, y: event.clientY }\n  }\n  const handlePointerUp = (event: PointerEvent<HTMLElement>) => {\n    const start = swipeStart.current\n    swipeStart.current = null\n    if (!start || !many) return\n    const dx = event.clientX - start.x\n    const dy = event.clientY - start.y\n    // Sideways and far enough: a scroll or a tap is neither.\n    if (Math.abs(dx) < SWIPE_THRESHOLD_PX || Math.abs(dx) < Math.abs(dy)) return\n    go(dx < 0 ? 1 : -1)\n  }\n  const placement = appearance?.captionPlacement ?? 'below'\n  const caption = placement !== 'hidden' ? current.caption : undefined\n  const ownCloseLook = Boolean(appearance?.closeStyle && appearance.closeStyle !== 'icon')\n  return (\n    <LightboxDialog\n      open={open}\n      onClose={onClose}\n      label={label || (many ? 'Gallery' : current.alt || 'Picture')}\n      closeLabel={many ? 'Close gallery' : 'Close picture'}\n      appearance={appearance}\n      onKeyDown={handleKeyDown}\n      maxWidth=\"lg\"\n      // The pictures float on the backdrop: no sheet behind them.\n      paperSx={{\n        // `background`, not a colour alone: it also clears the overlay\n        // gradient a dark theme lays on every paper.\n        background: 'transparent',\n        boxShadow: 'none',\n        overflow: 'visible',\n        alignItems: 'center',\n      }}\n      closeButtonSx={\n        ownCloseLook\n          ? undefined\n          : { color: 'common.white', bgcolor: (theme: Theme) => alpha(theme.palette.common.black, 0.45) }\n      }\n    >\n      <Box\n        component=\"figure\"\n        sx={{\n          position: 'relative',\n          m: 0,\n          display: 'flex',\n          flexDirection: 'column',\n          alignItems: 'center',\n          minHeight: 0,\n          // A swipe moves between pictures, never the page behind them.\n          touchAction: 'pan-y',\n        }}\n        onPointerDown={handlePointerDown}\n        onPointerUp={handlePointerUp}\n      >\n        <Box sx={{ position: 'relative', maxWidth: '100%' }}>\n          <Box\n            component=\"img\"\n            key={current.src}\n            src={current.src}\n            srcSet={current.srcSet}\n            // The whole screen is the slot, so the browser takes the\n            // full-size variant the media CDN already holds.\n            sizes=\"100vw\"\n            alt={current.alt}\n            // Requested only now, because the visitor asked for it.\n            loading=\"eager\"\n            draggable={false}\n            sx={{\n              display: 'block',\n              maxWidth: '100%',\n              maxHeight: thumbnails && many ? 'calc(100vh - 220px)' : 'calc(100vh - 140px)',\n              width: 'auto',\n              height: 'auto',\n              objectFit: 'contain',\n              userSelect: 'none',\n              borderRadius: appearance?.radius !== undefined ? `${appearance.radius}px` : undefined,\n            }}\n          />\n          {caption && placement === 'overlay' ? (\n            <Typography\n              component=\"figcaption\"\n              variant=\"body2\"\n              sx={{\n                position: 'absolute',\n                left: 0,\n                right: 0,\n                bottom: 0,\n                px: 2,\n                py: 1.5,\n                color: 'common.white',\n                background: (theme: Theme) =>\n                  `linear-gradient(transparent, ${alpha(theme.palette.common.black, 0.7)})`,\n              }}\n            >\n              {caption}\n            </Typography>\n          ) : null}\n        </Box>\n        {many ? (\n          <>\n            <IconButton\n              aria-label=\"Previous picture\"\n              onClick={() => go(-1)}\n              sx={[navButtonSx, { left: { xs: 4, sm: -56 } }]}\n            >\n              <MdiIcon path={mdiChevronLeft.path} />\n            </IconButton>\n            <IconButton\n              aria-label=\"Next picture\"\n              onClick={() => go(1)}\n              sx={[navButtonSx, { right: { xs: 4, sm: -56 } }]}\n            >\n              <MdiIcon path={mdiChevronRight.path} />\n            </IconButton>\n          </>\n        ) : null}\n        {(caption && placement === 'below') || many ? (\n          <Box\n            sx={{\n              display: 'flex',\n              gap: 2,\n              alignItems: 'baseline',\n              justifyContent: 'space-between',\n              width: '100%',\n              pt: 1.5,\n              color: 'common.white',\n            }}\n          >\n            {caption && placement === 'below' ? (\n              <Typography component=\"figcaption\" variant=\"body2\">\n                {caption}\n              </Typography>\n            ) : (\n              <span />\n            )}\n            {many ? (\n              <Typography\n                variant=\"body2\"\n                aria-live=\"polite\"\n                aria-label={`Picture ${index + 1} of ${count}`}\n                sx={{ whiteSpace: 'nowrap', opacity: 0.85 }}\n              >\n                {`${index + 1} / ${count}`}\n              </Typography>\n            ) : null}\n          </Box>\n        ) : null}\n      </Box>\n      {thumbnails && many ? (\n        <Box\n          role=\"group\"\n          aria-label=\"Pictures\"\n          sx={{\n            display: 'flex',\n            gap: 1,\n            pt: 1.5,\n            overflowX: 'auto',\n            maxWidth: '100%',\n            justifyContent: 'safe center',\n          }}\n        >\n          {pictures.map((picture, position) => (\n            <Box\n              key={`${picture.src}-${position}`}\n              component=\"button\"\n              type=\"button\"\n              onClick={() => setIndex(position)}\n              aria-label={`Show picture ${position + 1}${picture.alt ? `: ${picture.alt}` : ''}`}\n              aria-current={position === index ? 'true' : undefined}\n              sx={{\n                flex: '0 0 auto',\n                p: 0,\n                border: 2,\n                borderColor: position === index ? 'common.white' : 'transparent',\n                borderRadius: 1,\n                bgcolor: 'transparent',\n                cursor: 'pointer',\n                opacity: position === index ? 1 : 0.6,\n                '&:focus-visible': { outline: '2px solid', outlineColor: 'common.white' },\n              }}\n            >\n              <Box\n                component=\"img\"\n                src={picture.src}\n                srcSet={picture.srcSet}\n                sizes=\"64px\"\n                alt=\"\"\n                sx={{ display: 'block', width: 64, height: 48, objectFit: 'cover', borderRadius: 0.5 }}\n                {...Aglyn.DEFERRED_IMAGE_ATTRIBUTES}\n              />\n            </Box>\n          ))}\n        </Box>\n      ) : null}\n    </LightboxDialog>\n  )\n}\nImageLightbox.displayName = 'ImageLightbox'\n\nexport default ImageLightbox\n"],"names":["Aglyn","mdiChevronLeft","mdiChevronRight","MdiIcon","LightboxDialog","Box","IconButton","alpha","Typography","useEffect","useRef","useState","stepIndex","SWIPE_THRESHOLD_PX","navButtonSx","position","top","transform","zIndex","color","bgcolor","theme","palette","common","black","ImageLightbox","props","open","onClose","gallery","appearance","thumbnails","label","pictures","count","length","index","setIndex","swipeStart","current","Math","min","max","many","go","step","value","handleKeyDown","event","key","preventDefault","handlePointerDown","x","clientX","y","clientY","handlePointerUp","start","dx","dy","abs","placement","captionPlacement","caption","undefined","ownCloseLook","Boolean","closeStyle","alt","closeLabel","onKeyDown","maxWidth","paperSx","background","boxShadow","overflow","alignItems","closeButtonSx","component","sx","m","display","flexDirection","minHeight","touchAction","onPointerDown","onPointerUp","src","srcSet","sizes","loading","draggable","maxHeight","width","height","objectFit","userSelect","borderRadius","radius","variant","left","right","bottom","px","py","aria-label","onClick","xs","sm","path","gap","justifyContent","pt","span","aria-live","whiteSpace","opacity","role","overflowX","map","picture","type","aria-current","flex","p","border","borderColor","cursor","outline","outlineColor","DEFERRED_IMAGE_ATTRIBUTES","displayName"],"mappings":"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"}

package/src/lib/components/image-list.d.ts

@@ -15,12 +15,20 @@
  * limitations under the License.
  */
 import * as Aglyn from '@aglyn/aglyn';
+import { type LightboxAppearanceProps } from '@aglyn/shared-ui-jsx/components/lightbox/lightbox-appearance';
 import { type ReactNode } from 'react';
 import { toCount } from '../utils/to-count';
 export declare const IMAGE_LIST_ID: Aglyn.ComponentId;
 export declare const IMAGE_LIST_ITEM_ID: Aglyn.ComponentId;
 export type ImageListVariant = 'standard' | 'quilted' | 'masonry' | 'woven';
-export interface ImageListElementProps {
+export interface ImageListElementProps extends LightboxAppearanceProps {
+    /**
+     * Opens a gallery lightbox when a visitor presses any picture in the list
+     * (AGL-3717): previous and next, swipe, arrow keys, a counter, captions.
+     */
+    lightbox?: boolean | string;
+    /** A strip of thumbnails under the gallery's picture. */
+    lightboxThumbnails?: boolean | string;
     cols?: number | string;
     gap?: number | string;
     /** Row height in px, or blank for `auto`. */