@eifi1/ui-kit 0.10.0 → 0.12.0

package/dist/components/image-grid.d.ts

@@ -0,0 +1,67 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { AuthedFetcher } from '../hooks/use-authed-src.js';
+import { ImageItem, LightboxLabels } from './lightbox.js';
+
+interface ImageGridLabels {
+    /** The list's accessible name. */
+    list: string;
+    /** An open button's name when an item's `alt` is empty: "Image 3 of 7". */
+    item: (index: number, count: number) => string;
+    /** The name of the group of per-image actions, given the image's name. */
+    actions: (name: string) => string;
+}
+declare const DEFAULT_IMAGE_GRID_LABELS: ImageGridLabels;
+interface ImageGridProps extends Omit<ComponentPropsWithoutRef<"ul">, "children"> {
+    items: readonly ImageItem[];
+    /** The app's authenticated GET — thumbnails and the lightbox fetch through it. Only
+     *  images are fetched for the grid; a file (PDF) tile shows its icon and name. */
+    fetcher?: AuthedFetcher | null;
+    /**
+     * Per-image actions — a delete, an edit. Rendered BESIDE the open button (on top of
+     * the thumbnail's corner), never inside it: a button inside a button is invalid HTML
+     * and a screen reader flattens it into the outer one's name, where it cannot be
+     * reached. Use `IconButton variant="overlay"` for controls that sit on a photo.
+     */
+    renderActions?: (item: ImageItem, index: number) => ReactNode;
+    /**
+     * What a tile's click does. Left out, the grid opens its own {@link Lightbox} on that
+     * image. Given, the grid opens nothing — for a caller that keeps the lightbox's
+     * index in the URL, or that opens something else.
+     */
+    onOpen?: (index: number) => void;
+    /**
+     * A fixed column count. Left out, the grid is responsive: as many columns of at
+     * least {@link minTileSize} px as fit, so the same grid is three across in a card on
+     * a phone and eight across on a desktop page — no breakpoints to choose.
+     */
+    columns?: number;
+    /** The smallest a tile may be in the responsive layout. Default 96 (px). */
+    minTileSize?: number;
+    /** `square` (default) crops to a square; `video` to 16:9; `auto` keeps each image's
+     *  own proportions (a floor plan), within a square-ish box. */
+    aspect?: "square" | "video" | "auto";
+    /** Props for the built-in lightbox (ignored with {@link onOpen}). */
+    lightbox?: {
+        loop?: boolean;
+        zoom?: boolean;
+        download?: boolean;
+        onDownload?: (item: ImageItem, index: number) => void;
+        labels?: Partial<LightboxLabels>;
+    };
+    labels?: Partial<ImageGridLabels>;
+}
+/**
+ * A grid of thumbnails that open in a {@link Lightbox} — kastlan's room and defect
+ * photos (room-inspector, unit-rooms-tab) and its floor plans (unit-floor-plan), each
+ * of which drew its own `grid grid-cols-N` of `<img>` that nothing could open, with no
+ * loading state and nowhere to put a delete.
+ *
+ * Each tile is a real `<button>` named by the image's alt, with the actions beside it
+ * and the caption below it — outside the button, so the name stays the alt and the
+ * caption is read once. Placeholders come from {@link AuthedImage}: a skeleton while
+ * loading, a "couldn't load" tile on failure.
+ */
+declare function ImageGrid({ items, fetcher, renderActions, onOpen, columns, minTileSize, aspect, lightbox, labels: labelsProp, className, style, ...rest }: ImageGridProps): react.JSX.Element;
+
+export { DEFAULT_IMAGE_GRID_LABELS, ImageGrid, type ImageGridLabels, type ImageGridProps };

package/dist/components/image-grid.js

@@ -0,0 +1,112 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { FileText } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useKitLabels } from "../i18n/kit-labels.js";
+import { AuthedImage } from "./authed-image.js";
+import { Lightbox, imageItemKind } from "./lightbox.js";
+const DEFAULT_IMAGE_GRID_LABELS = {
+  list: "Images",
+  item: (index, count) => `Image ${index} of ${count}`,
+  actions: (name) => `Actions for ${name}`
+};
+const ASPECT_CLASS = {
+  square: "aspect-square",
+  video: "aspect-video",
+  auto: "aspect-[4/3]"
+};
+function ImageGrid({
+  items,
+  fetcher,
+  renderActions,
+  onOpen,
+  columns,
+  minTileSize = 96,
+  aspect = "square",
+  lightbox,
+  labels: labelsProp,
+  className,
+  style,
+  ...rest
+}) {
+  const labels = useKitLabels("imageGrid", DEFAULT_IMAGE_GRID_LABELS, labelsProp);
+  const [openIndex, setOpenIndex] = useState(null);
+  const count = items.length;
+  const gridStyle = {
+    gridTemplateColumns: columns !== void 0 ? `repeat(${columns}, minmax(0, 1fr))` : `repeat(auto-fill, minmax(min(${minTileSize}px, 100%), 1fr))`,
+    ...style
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "ul",
+      {
+        "aria-label": labels.list,
+        ...rest,
+        className: cn("grid gap-2", className),
+        style: gridStyle,
+        children: items.map((item, i) => {
+          const name = item.alt || labels.item(i + 1, count);
+          const kind = imageItemKind(item);
+          const actions = renderActions?.(item, i);
+          return /* @__PURE__ */ jsxs("li", { className: "relative min-w-0", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": name,
+                onClick: () => onOpen ? onOpen(i) : setOpenIndex(i),
+                className: cn(
+                  "block w-full overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-hover)]",
+                  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--brand)]",
+                  ASPECT_CLASS[aspect]
+                ),
+                children: kind === "file" ? /* @__PURE__ */ jsxs("span", { className: "flex h-full w-full flex-col items-center justify-center gap-1 p-2 text-center text-xs text-[var(--text-secondary)]", children: [
+                  /* @__PURE__ */ jsx(FileText, { "aria-hidden": true, className: "size-6 shrink-0 text-[var(--text-muted)]" }),
+                  /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "line-clamp-2 break-all", children: item.fileName ?? item.alt })
+                ] }) : /* @__PURE__ */ jsx(
+                  AuthedImage,
+                  {
+                    src: item.thumbnailSrc ?? item.src,
+                    alt: "",
+                    fetcher,
+                    loading: "lazy",
+                    wrapperClassName: "h-full w-full",
+                    className: cn("h-full w-full", aspect === "auto" ? "object-contain" : "object-cover")
+                  }
+                )
+              }
+            ),
+            actions !== void 0 && actions !== null && actions !== false && /* @__PURE__ */ jsx(
+              "div",
+              {
+                role: "group",
+                "aria-label": labels.actions(name),
+                className: "absolute end-1 top-1 flex gap-1",
+                children: actions
+              }
+            ),
+            item.caption !== void 0 && item.caption !== null && item.caption !== false && /* @__PURE__ */ jsx("div", { className: "mt-1 line-clamp-2 text-xs text-[var(--text-secondary)]", children: item.caption })
+          ] }, item.key ?? item.src);
+        })
+      }
+    ),
+    !onOpen && /* @__PURE__ */ jsx(
+      Lightbox,
+      {
+        open: openIndex !== null,
+        onClose: () => setOpenIndex(null),
+        items,
+        index: openIndex ?? 0,
+        onIndexChange: setOpenIndex,
+        fetcher,
+        ...lightbox
+      }
+    )
+  ] });
+}
+export {
+  DEFAULT_IMAGE_GRID_LABELS,
+  ImageGrid
+};
+//# sourceMappingURL=image-grid.js.map

package/dist/components/image-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/image-grid.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from \"react\";\nimport { FileText } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport type { AuthedFetcher } from \"../hooks/use-authed-src\";\nimport { AuthedImage } from \"./authed-image\";\nimport { Lightbox, imageItemKind } from \"./lightbox\";\nimport type { ImageItem, LightboxLabels } from \"./lightbox\";\n\nexport interface ImageGridLabels {\n  /** The list's accessible name. */\n  list: string;\n  /** An open button's name when an item's `alt` is empty: \"Image 3 of 7\". */\n  item: (index: number, count: number) => string;\n  /** The name of the group of per-image actions, given the image's name. */\n  actions: (name: string) => string;\n}\n\nexport const DEFAULT_IMAGE_GRID_LABELS: ImageGridLabels = {\n  list: \"Images\",\n  item: (index, count) => `Image ${index} of ${count}`,\n  actions: (name) => `Actions for ${name}`,\n};\n\nexport interface ImageGridProps extends Omit<ComponentPropsWithoutRef<\"ul\">, \"children\"> {\n  items: readonly ImageItem[];\n  /** The app's authenticated GET — thumbnails and the lightbox fetch through it. Only\n   *  images are fetched for the grid; a file (PDF) tile shows its icon and name. */\n  fetcher?: AuthedFetcher | null;\n  /**\n   * Per-image actions — a delete, an edit. Rendered BESIDE the open button (on top of\n   * the thumbnail's corner), never inside it: a button inside a button is invalid HTML\n   * and a screen reader flattens it into the outer one's name, where it cannot be\n   * reached. Use `IconButton variant=\"overlay\"` for controls that sit on a photo.\n   */\n  renderActions?: (item: ImageItem, index: number) => ReactNode;\n  /**\n   * What a tile's click does. Left out, the grid opens its own {@link Lightbox} on that\n   * image. Given, the grid opens nothing — for a caller that keeps the lightbox's\n   * index in the URL, or that opens something else.\n   */\n  onOpen?: (index: number) => void;\n  /**\n   * A fixed column count. Left out, the grid is responsive: as many columns of at\n   * least {@link minTileSize} px as fit, so the same grid is three across in a card on\n   * a phone and eight across on a desktop page — no breakpoints to choose.\n   */\n  columns?: number;\n  /** The smallest a tile may be in the responsive layout. Default 96 (px). */\n  minTileSize?: number;\n  /** `square` (default) crops to a square; `video` to 16:9; `auto` keeps each image's\n   *  own proportions (a floor plan), within a square-ish box. */\n  aspect?: \"square\" | \"video\" | \"auto\";\n  /** Props for the built-in lightbox (ignored with {@link onOpen}). */\n  lightbox?: {\n    loop?: boolean;\n    zoom?: boolean;\n    download?: boolean;\n    onDownload?: (item: ImageItem, index: number) => void;\n    labels?: Partial<LightboxLabels>;\n  };\n  labels?: Partial<ImageGridLabels>;\n}\n\nconst ASPECT_CLASS = {\n  square: \"aspect-square\",\n  video: \"aspect-video\",\n  auto: \"aspect-[4/3]\",\n} as const;\n\n/**\n * A grid of thumbnails that open in a {@link Lightbox} — kastlan's room and defect\n * photos (room-inspector, unit-rooms-tab) and its floor plans (unit-floor-plan), each\n * of which drew its own `grid grid-cols-N` of `<img>` that nothing could open, with no\n * loading state and nowhere to put a delete.\n *\n * Each tile is a real `<button>` named by the image's alt, with the actions beside it\n * and the caption below it — outside the button, so the name stays the alt and the\n * caption is read once. Placeholders come from {@link AuthedImage}: a skeleton while\n * loading, a \"couldn't load\" tile on failure.\n */\nexport function ImageGrid({\n  items,\n  fetcher,\n  renderActions,\n  onOpen,\n  columns,\n  minTileSize = 96,\n  aspect = \"square\",\n  lightbox,\n  labels: labelsProp,\n  className,\n  style,\n  ...rest\n}: ImageGridProps) {\n  const labels = useKitLabels(\"imageGrid\", DEFAULT_IMAGE_GRID_LABELS, labelsProp);\n  const [openIndex, setOpenIndex] = useState<number | null>(null);\n  const count = items.length;\n\n  const gridStyle: CSSProperties = {\n    gridTemplateColumns:\n      columns !== undefined\n        ? `repeat(${columns}, minmax(0, 1fr))`\n        : `repeat(auto-fill, minmax(min(${minTileSize}px, 100%), 1fr))`,\n    ...style,\n  };\n\n  return (\n    <>\n      <ul\n        aria-label={labels.list}\n        {...rest}\n        className={cn(\"grid gap-2\", className)}\n        style={gridStyle}\n      >\n        {items.map((item, i) => {\n          const name = item.alt || labels.item(i + 1, count);\n          const kind = imageItemKind(item);\n          const actions = renderActions?.(item, i);\n          return (\n            <li key={item.key ?? item.src} className=\"relative min-w-0\">\n              <button\n                type=\"button\"\n                aria-label={name}\n                onClick={() => (onOpen ? onOpen(i) : setOpenIndex(i))}\n                className={cn(\n                  \"block w-full overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-hover)]\",\n                  \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--brand)]\",\n                  ASPECT_CLASS[aspect],\n                )}\n              >\n                {kind === \"file\" ? (\n                  <span className=\"flex h-full w-full flex-col items-center justify-center gap-1 p-2 text-center text-xs text-[var(--text-secondary)]\">\n                    <FileText aria-hidden className=\"size-6 shrink-0 text-[var(--text-muted)]\" />\n                    <span aria-hidden className=\"line-clamp-2 break-all\">{item.fileName ?? item.alt}</span>\n                  </span>\n                ) : (\n                  <AuthedImage\n                    src={item.thumbnailSrc ?? item.src}\n                    // The button is named already; the picture inside it is decoration\n                    // to a reader, or the name would be read twice.\n                    alt=\"\"\n                    fetcher={fetcher}\n                    loading=\"lazy\"\n                    wrapperClassName=\"h-full w-full\"\n                    className={cn(\"h-full w-full\", aspect === \"auto\" ? \"object-contain\" : \"object-cover\")}\n                  />\n                )}\n              </button>\n              {actions !== undefined && actions !== null && actions !== false && (\n                <div\n                  role=\"group\"\n                  aria-label={labels.actions(name)}\n                  className=\"absolute end-1 top-1 flex gap-1\"\n                >\n                  {actions}\n                </div>\n              )}\n              {item.caption !== undefined && item.caption !== null && item.caption !== false && (\n                <div className=\"mt-1 line-clamp-2 text-xs text-[var(--text-secondary)]\">{item.caption}</div>\n              )}\n            </li>\n          );\n        })}\n      </ul>\n      {!onOpen && (\n        <Lightbox\n          open={openIndex !== null}\n          onClose={() => setOpenIndex(null)}\n          items={items}\n          index={openIndex ?? 0}\n          onIndexChange={setOpenIndex}\n          fetcher={fetcher}\n          {...lightbox}\n        />\n      )}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/lightbox.d.ts

@@ -0,0 +1,104 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { AuthedFetcher } from '../hooks/use-authed-src.js';
+
+/** `image`: shown as a picture. `file`: anything a browser cannot put in an `<img>` —
+ *  a floor plan uploaded as a PDF — shown as a file card with open and download. */
+type ImageItemKind = "image" | "file";
+interface ImageItem {
+    /** React key. Defaults to `src`. */
+    key?: string | number;
+    /** The full-size file — what the lightbox shows and downloads. An API path when the
+     *  component is given a `fetcher`. */
+    src: string;
+    /** A smaller rendition for the grid, when the server has one. Default: `src`. */
+    thumbnailSrc?: string;
+    /** Required: the picture's text alternative, and the open button's name. */
+    alt: string;
+    /** Shown under the thumbnail and at the foot of the lightbox. */
+    caption?: ReactNode;
+    /** The file's MIME type, when known (`"application/pdf"`). Decides {@link kind}. */
+    mimeType?: string;
+    /** Say it outright. Default: from {@link mimeType}, else from the file extension in
+     *  `src`, else — for a fetched file — from the type the server sent back. */
+    kind?: ImageItemKind;
+    /** The name a download is saved under, and a file card's heading. */
+    fileName?: string;
+}
+/** What an item is, from what is known about it WITHOUT fetching it — see
+ *  {@link ImageItem.kind}. `fetchedType` is the blob's type once it is in. */
+declare function imageItemKind(item: ImageItem, fetchedType?: string): ImageItemKind;
+interface LightboxLabels {
+    /** The dialog's accessible name. */
+    dialog: string;
+    close: string;
+    previous: string;
+    next: string;
+    /** The visible counter: "3 / 7". */
+    counter: (index: number, count: number) => string;
+    /** What a screen reader hears on each page turn: "Image 3 of 7". The alt follows. */
+    position: (index: number, count: number) => string;
+    download: string;
+    /** The zoom toggle (a pressed/not-pressed button — its name does not change). */
+    zoom: string;
+    /** A file card's note: the file has no picture to show. */
+    noPreview: string;
+    /** A file card's link to the browser's own viewer (a PDF opens in its viewer). */
+    openInNewTab: string;
+}
+declare const DEFAULT_LIGHTBOX_LABELS: LightboxLabels;
+interface LightboxProps {
+    open: boolean;
+    /** The X, Escape and the Back gesture all call this. */
+    onClose: () => void;
+    items: readonly ImageItem[];
+    /** The item on screen (0-based). Controlled, so the grid — or a URL — can own it. */
+    index: number;
+    onIndexChange: (index: number) => void;
+    /** The app's authenticated GET (see {@link useAuthedSrc}); left out, `src` is
+     *  loaded by the browser as usual. */
+    fetcher?: AuthedFetcher | null;
+    /** Previous from the first goes to the last, and next from the last to the first.
+     *  Default `false`: the buttons at the ends are disabled, which says where the set
+     *  ends. */
+    loop?: boolean;
+    /** Double-click (or double-tap) the picture, or the zoom button, to see it at full
+     *  size and pan by scrolling. Default `true`. Pinch zoom is the browser's own. */
+    zoom?: boolean;
+    /** A download link in the header. Default `true`. */
+    download?: boolean;
+    /**
+     * Download through the app instead — kastlan's floor plans have `openDocument(id)`,
+     * which knows the stored file name. Replaces the link with a button that calls this.
+     */
+    onDownload?: (item: ImageItem, index: number) => void;
+    /** Push a history entry so Back closes the viewer. Default `true`; see
+     *  `FullBleedDialog`'s `backCloses` for when to turn it off. */
+    backCloses?: boolean;
+    labels?: Partial<LightboxLabels>;
+}
+/**
+ * A full-screen viewer for a set of images (and files that are not images).
+ *
+ * Built on {@link FullBleedDialog} rather than beside it, so the viewer has the kit's
+ * one implementation of everything an overlay owes the page: the focus trap, Escape,
+ * the Back gesture closing it instead of leaving the page (`useOverlayHistory`), the
+ * body-scroll lock and the enter/exit motion.
+ *
+ * Paging: the previous/next buttons, ←/→ (which swap in a right-to-left page — the
+ * direction is read at the point the viewer is rendered, since the dialog itself is
+ * portalled out of it), Home/End, and a horizontal swipe on a touch screen.
+ *
+ * Zoom is a TOGGLE, not a gesture: double-click (or the zoom button) shows the picture
+ * at its natural size and the body scrolls to pan. Pinch-to-zoom is not implemented —
+ * the browser's own page pinch still works — because a pinch handler would have to own
+ * every touch on the picture, and with it the swipe.
+ *
+ * A non-image (a PDF floor plan) is shown as a file card: its name, "no preview", a
+ * link that opens it in the browser's own viewer, and the download. An `<iframe>`
+ * preview was the alternative; phone browsers render a PDF in one inconsistently or
+ * not at all, and a card works everywhere.
+ */
+declare function Lightbox({ open, onClose, items, index: indexProp, onIndexChange, fetcher, loop, zoom: zoomEnabled, download, onDownload, backCloses, labels: labelsProp, }: LightboxProps): react.JSX.Element;
+
+export { DEFAULT_LIGHTBOX_LABELS, type ImageItem, type ImageItemKind, Lightbox, type LightboxLabels, type LightboxProps, imageItemKind };

package/dist/components/lightbox.js

@@ -0,0 +1,229 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { ChevronLeft, ChevronRight, Download, ExternalLink, FileText, ZoomIn } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { horizontalStep } from "../lib/direction.js";
+import { useKitLabels } from "../i18n/kit-labels.js";
+import { useAuthedSrc } from "../hooks/use-authed-src.js";
+import { FullBleedDialog } from "./full-bleed-dialog.js";
+import { IconButton, buttonClasses } from "./ui.js";
+import { ImageStates, DEFAULT_AUTHED_IMAGE_LABELS } from "./authed-image.js";
+import { useAnchorDir } from "./use-anchor-dir.js";
+const FILE_EXTENSION = /\.(pdf|docx?|xlsx?|pptx?|odt|ods|zip|txt|csv|rtf)(?:[?#]|$)/i;
+function imageItemKind(item, fetchedType) {
+  if (item.kind) return item.kind;
+  if (item.mimeType) return item.mimeType.startsWith("image/") ? "image" : "file";
+  if (FILE_EXTENSION.test(item.src)) return "file";
+  if (fetchedType && !fetchedType.startsWith("image/")) return "file";
+  return "image";
+}
+const DEFAULT_LIGHTBOX_LABELS = {
+  dialog: "Image viewer",
+  close: "Close",
+  previous: "Previous image",
+  next: "Next image",
+  counter: (index, count) => `${index} / ${count}`,
+  position: (index, count) => `Image ${index} of ${count}`,
+  download: "Download",
+  zoom: "Zoom",
+  noPreview: "No preview available for this file",
+  openInNewTab: "Open in new tab"
+};
+const SWIPE_MIN_PX = 50;
+function Lightbox({
+  open,
+  onClose,
+  items,
+  index: indexProp,
+  onIndexChange,
+  fetcher,
+  loop = false,
+  zoom: zoomEnabled = true,
+  download = true,
+  onDownload,
+  backCloses,
+  labels: labelsProp
+}) {
+  const labels = useKitLabels("lightbox", DEFAULT_LIGHTBOX_LABELS, labelsProp);
+  const imageLabels = useKitLabels("authedImage", DEFAULT_AUTHED_IMAGE_LABELS);
+  const count = items.length;
+  const index = count === 0 ? 0 : Math.min(Math.max(indexProp, 0), count - 1);
+  const item = items[index];
+  const anchorRef = useRef(null);
+  const dir = useAnchorDir(anchorRef, open);
+  const fetched = useAuthedSrc(item?.src, { fetcher, enabled: open });
+  const kind = item ? imageItemKind(item, fetched.type) : "image";
+  const [zoomedKey, setZoomedKey] = useState(null);
+  const itemKey = item ? String(item.key ?? item.src) : null;
+  const zoomed = zoomEnabled && kind === "image" && zoomedKey !== null && zoomedKey === itemKey;
+  const toggleZoom = () => setZoomedKey(zoomed ? null : itemKey);
+  const canPrev = loop ? count > 1 : index > 0;
+  const canNext = loop ? count > 1 : index < count - 1;
+  const go = (step) => {
+    if (count === 0) return;
+    let next = index + step;
+    if (loop) next = (next + count) % count;
+    if (next < 0 || next >= count || next === index) return;
+    onIndexChange(next);
+  };
+  const onKeyDown = (e) => {
+    const target = e.target;
+    if (target.closest("input, textarea, select, [contenteditable='true']")) return;
+    const step = horizontalStep(e.key, e.currentTarget);
+    if (step !== 0) {
+      e.preventDefault();
+      go(step);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      if (index !== 0) onIndexChange(0);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      if (index !== count - 1) onIndexChange(count - 1);
+    }
+  };
+  const touchStart = useRef(null);
+  const onTouchStart = (e) => {
+    const t = e.touches[0];
+    touchStart.current = e.touches.length === 1 && t ? { x: t.clientX, y: t.clientY } : null;
+  };
+  const onTouchEnd = (e) => {
+    const start = touchStart.current;
+    touchStart.current = null;
+    const t = e.changedTouches[0];
+    if (!start || !t || zoomed) return;
+    const dx = t.clientX - start.x;
+    const dy = t.clientY - start.y;
+    if (Math.abs(dx) < SWIPE_MIN_PX || Math.abs(dx) < Math.abs(dy)) return;
+    const towardStart = dir === "rtl" ? dx > 0 : dx < 0;
+    go(towardStart ? 1 : -1);
+  };
+  const bodyRef = useRef(null);
+  useEffect(() => {
+    bodyRef.current?.scrollTo?.({ top: 0, left: 0 });
+  }, [index]);
+  const downloadHref = fetched.src;
+  const downloadControl = download && item ? onDownload ? /* @__PURE__ */ jsx(IconButton, { size: "sm", label: labels.download, onClick: () => onDownload(item, index), children: /* @__PURE__ */ jsx(Download, {}) }) : downloadHref ? /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: downloadHref,
+      download: item.fileName ?? "",
+      className: buttonClasses("ghost", { size: "sm" }),
+      children: [
+        /* @__PURE__ */ jsx(Download, { "aria-hidden": true, className: "size-4" }),
+        /* @__PURE__ */ jsx("span", { className: "max-sm:sr-only", children: labels.download })
+      ]
+    }
+  ) : null : null;
+  const header = item ? /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "shrink-0 text-sm tabular-nums text-[var(--text-secondary)]", children: labels.counter(index + 1, count) }),
+    /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: `${labels.position(index + 1, count)}${item.alt ? `: ${item.alt}` : ""}` }),
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1" }),
+    zoomEnabled && kind === "image" && /* @__PURE__ */ jsx(IconButton, { size: "sm", label: labels.zoom, pressed: zoomed, onClick: toggleZoom, children: /* @__PURE__ */ jsx(ZoomIn, {}) }),
+    downloadControl
+  ] }) : null;
+  const slide = !item ? null : kind === "file" ? /* @__PURE__ */ jsxs("div", { className: "flex max-w-sm flex-col items-center gap-3 rounded-lg border border-[var(--border)] p-6 text-center", children: [
+    /* @__PURE__ */ jsx(FileText, { "aria-hidden": true, className: "size-10 text-[var(--text-muted)]" }),
+    /* @__PURE__ */ jsx("p", { className: "break-all font-medium text-[var(--text-primary)]", children: item.fileName ?? item.alt }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-muted)]", children: labels.noPreview }),
+    fetched.src && /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: fetched.src,
+        target: "_blank",
+        rel: "noreferrer noopener",
+        className: buttonClasses("secondary", { size: "sm" }),
+        children: [
+          /* @__PURE__ */ jsx(ExternalLink, { "aria-hidden": true, className: "size-4" }),
+          labels.openInNewTab
+        ]
+      }
+    )
+  ] }) : /* @__PURE__ */ jsx(
+    ImageStates,
+    {
+      fetched,
+      alt: item.alt,
+      labels: imageLabels,
+      wrapperClassName: zoomed ? "max-w-none shrink-0" : "flex h-full w-full items-center justify-center",
+      className: cn(
+        zoomed ? "max-w-none cursor-zoom-out" : "max-h-full max-w-full object-contain",
+        !zoomed && zoomEnabled && "cursor-zoom-in"
+      ),
+      imgProps: {
+        draggable: false,
+        onDoubleClick: zoomEnabled ? toggleZoom : void 0
+      }
+    },
+    itemKey ?? void 0
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { ref: anchorRef, hidden: true }),
+    /* @__PURE__ */ jsxs(
+      FullBleedDialog,
+      {
+        open: open && !!item,
+        onClose,
+        closeLabel: labels.close,
+        "aria-label": labels.dialog,
+        dir,
+        header,
+        backCloses,
+        onKeyDown,
+        "data-lightbox": "",
+        footer: item?.caption !== void 0 && item.caption !== null && item.caption !== false ? /* @__PURE__ */ jsx("p", { className: "me-auto min-w-0 text-sm text-[var(--text-secondary)]", children: item.caption }) : void 0,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: bodyRef,
+              "data-lightbox-stage": "",
+              "data-zoomed": zoomed ? "" : void 0,
+              onTouchStart,
+              onTouchEnd,
+              className: cn(
+                "relative h-full min-h-48 w-full",
+                zoomed ? "overflow-auto" : "flex items-center justify-center overflow-hidden"
+              ),
+              children: slide
+            }
+          ),
+          count > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                variant: "overlay",
+                size: "lg",
+                label: labels.previous,
+                disabled: !canPrev,
+                onClick: () => go(-1),
+                className: "absolute start-3 top-1/2 -translate-y-1/2",
+                tooltip: false,
+                children: /* @__PURE__ */ jsx(ChevronLeft, { className: "rtl:-scale-x-100" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                variant: "overlay",
+                size: "lg",
+                label: labels.next,
+                disabled: !canNext,
+                onClick: () => go(1),
+                className: "absolute end-3 top-1/2 -translate-y-1/2",
+                tooltip: false,
+                children: /* @__PURE__ */ jsx(ChevronRight, { className: "rtl:-scale-x-100" })
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  DEFAULT_LIGHTBOX_LABELS,
+  Lightbox,
+  imageItemKind
+};
+//# sourceMappingURL=lightbox.js.map

package/dist/components/lightbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/lightbox.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { KeyboardEvent, ReactNode, TouchEvent } from \"react\";\nimport { ChevronLeft, ChevronRight, Download, ExternalLink, FileText, ZoomIn } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { useAuthedSrc } from \"../hooks/use-authed-src\";\nimport type { AuthedFetcher } from \"../hooks/use-authed-src\";\nimport { FullBleedDialog } from \"./full-bleed-dialog\";\nimport { IconButton, buttonClasses } from \"./ui\";\nimport { ImageStates, DEFAULT_AUTHED_IMAGE_LABELS } from \"./authed-image\";\nimport { useAnchorDir } from \"./use-anchor-dir\";\n\n/* ── The item both the grid and the lightbox show ────────────────────────── */\n\n/** `image`: shown as a picture. `file`: anything a browser cannot put in an `<img>` —\n *  a floor plan uploaded as a PDF — shown as a file card with open and download. */\nexport type ImageItemKind = \"image\" | \"file\";\n\nexport interface ImageItem {\n  /** React key. Defaults to `src`. */\n  key?: string | number;\n  /** The full-size file — what the lightbox shows and downloads. An API path when the\n   *  component is given a `fetcher`. */\n  src: string;\n  /** A smaller rendition for the grid, when the server has one. Default: `src`. */\n  thumbnailSrc?: string;\n  /** Required: the picture's text alternative, and the open button's name. */\n  alt: string;\n  /** Shown under the thumbnail and at the foot of the lightbox. */\n  caption?: ReactNode;\n  /** The file's MIME type, when known (`\"application/pdf\"`). Decides {@link kind}. */\n  mimeType?: string;\n  /** Say it outright. Default: from {@link mimeType}, else from the file extension in\n   *  `src`, else — for a fetched file — from the type the server sent back. */\n  kind?: ImageItemKind;\n  /** The name a download is saved under, and a file card's heading. */\n  fileName?: string;\n}\n\nconst FILE_EXTENSION = /\\.(pdf|docx?|xlsx?|pptx?|odt|ods|zip|txt|csv|rtf)(?:[?#]|$)/i;\n\n/** What an item is, from what is known about it WITHOUT fetching it — see\n *  {@link ImageItem.kind}. `fetchedType` is the blob's type once it is in. */\nexport function imageItemKind(item: ImageItem, fetchedType?: string): ImageItemKind {\n  if (item.kind) return item.kind;\n  if (item.mimeType) return item.mimeType.startsWith(\"image/\") ? \"image\" : \"file\";\n  if (FILE_EXTENSION.test(item.src)) return \"file\";\n  if (fetchedType && !fetchedType.startsWith(\"image/\")) return \"file\";\n  return \"image\";\n}\n\n/* ── Labels ──────────────────────────────────────────────────────────────── */\n\nexport interface LightboxLabels {\n  /** The dialog's accessible name. */\n  dialog: string;\n  close: string;\n  previous: string;\n  next: string;\n  /** The visible counter: \"3 / 7\". */\n  counter: (index: number, count: number) => string;\n  /** What a screen reader hears on each page turn: \"Image 3 of 7\". The alt follows. */\n  position: (index: number, count: number) => string;\n  download: string;\n  /** The zoom toggle (a pressed/not-pressed button — its name does not change). */\n  zoom: string;\n  /** A file card's note: the file has no picture to show. */\n  noPreview: string;\n  /** A file card's link to the browser's own viewer (a PDF opens in its viewer). */\n  openInNewTab: string;\n}\n\nexport const DEFAULT_LIGHTBOX_LABELS: LightboxLabels = {\n  dialog: \"Image viewer\",\n  close: \"Close\",\n  previous: \"Previous image\",\n  next: \"Next image\",\n  counter: (index, count) => `${index} / ${count}`,\n  position: (index, count) => `Image ${index} of ${count}`,\n  download: \"Download\",\n  zoom: \"Zoom\",\n  noPreview: \"No preview available for this file\",\n  openInNewTab: \"Open in new tab\",\n};\n\n/* ── The component ───────────────────────────────────────────────────────── */\n\nexport interface LightboxProps {\n  open: boolean;\n  /** The X, Escape and the Back gesture all call this. */\n  onClose: () => void;\n  items: readonly ImageItem[];\n  /** The item on screen (0-based). Controlled, so the grid — or a URL — can own it. */\n  index: number;\n  onIndexChange: (index: number) => void;\n  /** The app's authenticated GET (see {@link useAuthedSrc}); left out, `src` is\n   *  loaded by the browser as usual. */\n  fetcher?: AuthedFetcher | null;\n  /** Previous from the first goes to the last, and next from the last to the first.\n   *  Default `false`: the buttons at the ends are disabled, which says where the set\n   *  ends. */\n  loop?: boolean;\n  /** Double-click (or double-tap) the picture, or the zoom button, to see it at full\n   *  size and pan by scrolling. Default `true`. Pinch zoom is the browser's own. */\n  zoom?: boolean;\n  /** A download link in the header. Default `true`. */\n  download?: boolean;\n  /**\n   * Download through the app instead — kastlan's floor plans have `openDocument(id)`,\n   * which knows the stored file name. Replaces the link with a button that calls this.\n   */\n  onDownload?: (item: ImageItem, index: number) => void;\n  /** Push a history entry so Back closes the viewer. Default `true`; see\n   *  `FullBleedDialog`'s `backCloses` for when to turn it off. */\n  backCloses?: boolean;\n  labels?: Partial<LightboxLabels>;\n}\n\n/** Swipes shorter than this are taps, and a drag that is mostly vertical is a scroll. */\nconst SWIPE_MIN_PX = 50;\n\n/**\n * A full-screen viewer for a set of images (and files that are not images).\n *\n * Built on {@link FullBleedDialog} rather than beside it, so the viewer has the kit's\n * one implementation of everything an overlay owes the page: the focus trap, Escape,\n * the Back gesture closing it instead of leaving the page (`useOverlayHistory`), the\n * body-scroll lock and the enter/exit motion.\n *\n * Paging: the previous/next buttons, ←/→ (which swap in a right-to-left page — the\n * direction is read at the point the viewer is rendered, since the dialog itself is\n * portalled out of it), Home/End, and a horizontal swipe on a touch screen.\n *\n * Zoom is a TOGGLE, not a gesture: double-click (or the zoom button) shows the picture\n * at its natural size and the body scrolls to pan. Pinch-to-zoom is not implemented —\n * the browser's own page pinch still works — because a pinch handler would have to own\n * every touch on the picture, and with it the swipe.\n *\n * A non-image (a PDF floor plan) is shown as a file card: its name, \"no preview\", a\n * link that opens it in the browser's own viewer, and the download. An `<iframe>`\n * preview was the alternative; phone browsers render a PDF in one inconsistently or\n * not at all, and a card works everywhere.\n */\nexport function Lightbox({\n  open,\n  onClose,\n  items,\n  index: indexProp,\n  onIndexChange,\n  fetcher,\n  loop = false,\n  zoom: zoomEnabled = true,\n  download = true,\n  onDownload,\n  backCloses,\n  labels: labelsProp,\n}: LightboxProps) {\n  const labels = useKitLabels(\"lightbox\", DEFAULT_LIGHTBOX_LABELS, labelsProp);\n  const imageLabels = useKitLabels(\"authedImage\", DEFAULT_AUTHED_IMAGE_LABELS);\n  const count = items.length;\n  // Clamped: the set can shrink under an open viewer (the photo on screen was deleted).\n  const index = count === 0 ? 0 : Math.min(Math.max(indexProp, 0), count - 1);\n  const item = items[index] as ImageItem | undefined;\n\n  // The dialog is portalled to <body>, out of the subtree whose `dir` it would have\n  // inherited; this marker stays where the viewer was rendered and reads it there.\n  const anchorRef = useRef<HTMLSpanElement>(null);\n  const dir = useAnchorDir(anchorRef, open);\n\n  const fetched = useAuthedSrc(item?.src, { fetcher, enabled: open });\n  const kind = item ? imageItemKind(item, fetched.type) : \"image\";\n\n  const [zoomedKey, setZoomedKey] = useState<string | null>(null);\n  const itemKey = item ? String(item.key ?? item.src) : null;\n  // Zoom belongs to the picture it was turned on for: paging on resets it.\n  const zoomed = zoomEnabled && kind === \"image\" && zoomedKey !== null && zoomedKey === itemKey;\n  const toggleZoom = () => setZoomedKey(zoomed ? null : itemKey);\n\n  const canPrev = loop ? count > 1 : index > 0;\n  const canNext = loop ? count > 1 : index < count - 1;\n  const go = (step: number) => {\n    if (count === 0) return;\n    let next = index + step;\n    if (loop) next = (next + count) % count;\n    if (next < 0 || next >= count || next === index) return;\n    onIndexChange(next);\n  };\n\n  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    // A key meant for a control stays with it: Space/Enter on a button, typing in any\n    // field a caller's caption might hold.\n    const target = e.target as HTMLElement;\n    if (target.closest(\"input, textarea, select, [contenteditable='true']\")) return;\n    const step = horizontalStep(e.key, e.currentTarget);\n    if (step !== 0) {\n      e.preventDefault();\n      go(step);\n    } else if (e.key === \"Home\") {\n      e.preventDefault();\n      if (index !== 0) onIndexChange(0);\n    } else if (e.key === \"End\") {\n      e.preventDefault();\n      if (index !== count - 1) onIndexChange(count - 1);\n    }\n  };\n\n  const touchStart = useRef<{ x: number; y: number } | null>(null);\n  const onTouchStart = (e: TouchEvent) => {\n    const t = e.touches[0];\n    touchStart.current = e.touches.length === 1 && t ? { x: t.clientX, y: t.clientY } : null;\n  };\n  const onTouchEnd = (e: TouchEvent) => {\n    const start = touchStart.current;\n    touchStart.current = null;\n    const t = e.changedTouches[0];\n    // Zoomed, a drag is a PAN of the picture, not a page turn.\n    if (!start || !t || zoomed) return;\n    const dx = t.clientX - start.x;\n    const dy = t.clientY - start.y;\n    if (Math.abs(dx) < SWIPE_MIN_PX || Math.abs(dx) < Math.abs(dy)) return;\n    // Swiping toward the START edge brings in the next picture from the end edge.\n    const towardStart = dir === \"rtl\" ? dx > 0 : dx < 0;\n    go(towardStart ? 1 : -1);\n  };\n\n  // Paging the viewer while zoomed would leave the new picture scrolled to where the\n  // last one was panned; start each at its top-left.\n  const bodyRef = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    bodyRef.current?.scrollTo?.({ top: 0, left: 0 });\n  }, [index]);\n\n  const downloadHref = fetched.src;\n  const downloadControl =\n    download && item ? (\n      onDownload ? (\n        <IconButton size=\"sm\" label={labels.download} onClick={() => onDownload(item, index)}>\n          <Download />\n        </IconButton>\n      ) : downloadHref ? (\n        <a\n          href={downloadHref}\n          // `download` names the saved file; a blob: URL has no name of its own.\n          download={item.fileName ?? \"\"}\n          className={buttonClasses(\"ghost\", { size: \"sm\" })}\n        >\n          <Download aria-hidden className=\"size-4\" />\n          <span className=\"max-sm:sr-only\">{labels.download}</span>\n        </a>\n      ) : null\n    ) : null;\n\n  const header = item ? (\n    <div className=\"flex min-w-0 items-center gap-2\">\n      <span aria-hidden className=\"shrink-0 text-sm tabular-nums text-[var(--text-secondary)]\">\n        {labels.counter(index + 1, count)}\n      </span>\n      {/* The page turn, said — focus does not move when the picture changes, so\n          without this a reader pressing → hears nothing at all. */}\n      <span role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {`${labels.position(index + 1, count)}${item.alt ? `: ${item.alt}` : \"\"}`}\n      </span>\n      <span className=\"min-w-0 flex-1\" />\n      {zoomEnabled && kind === \"image\" && (\n        <IconButton size=\"sm\" label={labels.zoom} pressed={zoomed} onClick={toggleZoom}>\n          <ZoomIn />\n        </IconButton>\n      )}\n      {downloadControl}\n    </div>\n  ) : null;\n\n  const slide = !item ? null : kind === \"file\" ? (\n    <div className=\"flex max-w-sm flex-col items-center gap-3 rounded-lg border border-[var(--border)] p-6 text-center\">\n      <FileText aria-hidden className=\"size-10 text-[var(--text-muted)]\" />\n      <p className=\"break-all font-medium text-[var(--text-primary)]\">{item.fileName ?? item.alt}</p>\n      <p className=\"text-sm text-[var(--text-muted)]\">{labels.noPreview}</p>\n      {fetched.src && (\n        <a\n          href={fetched.src}\n          target=\"_blank\"\n          rel=\"noreferrer noopener\"\n          className={buttonClasses(\"secondary\", { size: \"sm\" })}\n        >\n          <ExternalLink aria-hidden className=\"size-4\" />\n          {labels.openInNewTab}\n        </a>\n      )}\n    </div>\n  ) : (\n    <ImageStates\n      // Keyed by item: a new picture is a new decode, never the old one's \"loaded\".\n      key={itemKey ?? undefined}\n      fetched={fetched}\n      alt={item.alt}\n      labels={imageLabels}\n      wrapperClassName={\n        zoomed ? \"max-w-none shrink-0\" : \"flex h-full w-full items-center justify-center\"\n      }\n      className={cn(\n        zoomed ? \"max-w-none cursor-zoom-out\" : \"max-h-full max-w-full object-contain\",\n        !zoomed && zoomEnabled && \"cursor-zoom-in\",\n      )}\n      imgProps={{\n        draggable: false,\n        onDoubleClick: zoomEnabled ? toggleZoom : undefined,\n      }}\n    />\n  );\n\n  return (\n    <>\n      <span ref={anchorRef} hidden />\n      <FullBleedDialog\n        open={open && !!item}\n        onClose={onClose}\n        closeLabel={labels.close}\n        aria-label={labels.dialog}\n        dir={dir}\n        header={header}\n        backCloses={backCloses}\n        onKeyDown={onKeyDown}\n        data-lightbox=\"\"\n        footer={\n          item?.caption !== undefined && item.caption !== null && item.caption !== false ? (\n            <p className=\"me-auto min-w-0 text-sm text-[var(--text-secondary)]\">{item.caption}</p>\n          ) : undefined\n        }\n      >\n        <div\n          ref={bodyRef}\n          data-lightbox-stage=\"\"\n          data-zoomed={zoomed ? \"\" : undefined}\n          onTouchStart={onTouchStart}\n          onTouchEnd={onTouchEnd}\n          className={cn(\n            \"relative h-full min-h-48 w-full\",\n            zoomed ? \"overflow-auto\" : \"flex items-center justify-center overflow-hidden\",\n          )}\n        >\n          {slide}\n        </div>\n        {count > 1 && (\n          <>\n            <IconButton\n              variant=\"overlay\"\n              size=\"lg\"\n              label={labels.previous}\n              disabled={!canPrev}\n              onClick={() => go(-1)}\n              className=\"absolute start-3 top-1/2 -translate-y-1/2\"\n              tooltip={false}\n            >\n              <ChevronLeft className=\"rtl:-scale-x-100\" />\n            </IconButton>\n            <IconButton\n              variant=\"overlay\"\n              size=\"lg\"\n              label={labels.next}\n              disabled={!canNext}\n              onClick={() => go(1)}\n              className=\"absolute end-3 top-1/2 -translate-y-1/2\"\n              tooltip={false}\n            >\n              <ChevronRight className=\"rtl:-scale-x-100\" />\n            </IconButton>\n          </>\n        )}\n      </FullBleedDialog>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}