@eifi1/ui-kit 0.11.0 → 0.12.0

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":[]}

package/dist/components/line-items.d.ts

@@ -0,0 +1,114 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode, Key } from 'react';
+
+/** The words {@link LineItems} renders on its own behalf. Row numbers are 1-based. */
+interface LineItemsLabels {
+    /** The dashed add button. */
+    add: string;
+    /** The remove button's name for one row. */
+    remove: (row: number) => string;
+    /** Its name while it waits for the second press (`confirmRemove`). */
+    confirmRemove: (row: number) => string;
+    /** A row's group name, when the caller gives no `rowLabel`. */
+    row: (row: number) => string;
+    /** The name a cell's field should carry: the column, and which row. */
+    cell: (column: string, row: number) => string;
+    /** The totals row's label, and its group name. */
+    totals: string;
+}
+declare const DEFAULT_LINE_ITEMS_LABELS: LineItemsLabels;
+/** What a column's `render` receives for one row. */
+interface LineItemCellContext<T> {
+    item: T;
+    /** 0-based. */
+    index: number;
+    /** The accessible name for the cell's field — "Debit, row 2". The header is
+     *  hidden from assistive tech (each row repeats it), so the field has to carry it:
+     *  `<Input aria-label={label} … />`. */
+    label: string;
+}
+interface LineItemsColumn<T> {
+    /** Stable id: the React key, and the key into `totals`. */
+    key: string;
+    /** The column header (and the small label over the cell once the rows stack). */
+    header: ReactNode;
+    /** The column's name for {@link LineItemCellContext.label}, when `header` is not a
+     *  string. */
+    label?: string;
+    /** The grid track once the rows are wide enough to be a table. Default
+     *  `minmax(0,1fr)`; `"7rem"` for an amount. */
+    width?: string;
+    /** `end` for figures: the header and the totals cell end-align with the field. */
+    align?: "start" | "end";
+    render: (ctx: LineItemCellContext<T>) => ReactNode;
+}
+interface LineItemsProps<T> extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+    items: readonly T[];
+    columns: readonly LineItemsColumn<T>[];
+    /** The row's React key. Default: the item's `id` (react-hook-form's `useFieldArray`
+     *  `fields` carry one), else its index. */
+    getKey?: (item: T, index: number) => Key;
+    /** Append a row. Omitted: no add button. The first field of the new row is focused. */
+    onAdd?: () => void;
+    /** Remove the row at `index`. Omitted: no remove buttons. */
+    onRemove?: (index: number) => void;
+    /** Remove is disabled at or below this many rows (a journal entry needs two).
+     *  Default 0. */
+    minItems?: number;
+    /** Add is disabled at this many rows. */
+    maxItems?: number;
+    /**
+     * Ask before a row goes:
+     *  - `true`: the remove button asks for a second press — it fills red and its name
+     *    becomes `lineItems.confirmRemove`; Escape, or leaving it, calls it off.
+     *  - a function: called with the row, and the row goes only if it answers `true`
+     *    (`(item, i) => confirm({ title: … , tone: "danger" })` with `useConfirm`).
+     */
+    confirmRemove?: boolean | ((item: T, index: number) => boolean | Promise<boolean>);
+    /** The add button's text. Default `lineItems.add`. */
+    addLabel?: ReactNode;
+    /** A row's group name ("Line 2"). Default `lineItems.row`. */
+    rowLabel?: (index: number, item: T) => string;
+    /** A totals row under the lines, one entry per column `key`. The first column
+     *  without an entry carries {@link totalsLabel}. Omitted: no totals row. */
+    totals?: Partial<Record<string, ReactNode>>;
+    /** Default `lineItems.totals`, "Total". */
+    totalsLabel?: ReactNode;
+    /** Shown in place of the rows when there are none. */
+    empty?: ReactNode;
+    /** A message about the list as a whole ("The entry does not balance"). */
+    error?: ReactNode;
+    /** Disables add and remove (the fields are the caller's to disable). */
+    disabled?: boolean;
+    labels?: Partial<LineItemsLabels>;
+}
+/**
+ * An editable list of lines — journal entry lines, lease components, invoice
+ * positions, budget rows: column headers, a row of fields per item, a remove button
+ * per row, a dashed "add" button under them, and an optional totals row.
+ *
+ * Presentation only: the rows are the caller's `items` and the fields are the
+ * caller's, rendered per column. So it works over plain state —
+ *
+ * ```tsx
+ * <LineItems items={lines} columns={cols} onAdd={() => setLines([...lines, blank()])}
+ *   onRemove={(i) => setLines(lines.filter((_, j) => j !== i))} minItems={2} />
+ * ```
+ *
+ * — and over react-hook-form's `useFieldArray` alike (`items={fields}`, `onAdd={() =>
+ * append(blank())}`, `onRemove={remove}`), for which `@eifi1/ui-kit/rhf` has
+ * `RhfLineItems`.
+ *
+ * On a wide pane the rows are a grid under the headers; on a narrow one (a container
+ * query, so a dialog stacks where it is cramped) each row stacks its fields, each
+ * under a small copy of its header. The headers are `aria-hidden`: every row is a
+ * named group and every field is named by `render`'s `label` ("Debit, row 2"), which
+ * is what a screen reader needs — a header row it would read once, out of context.
+ *
+ * Keyboard: after Add, focus lands in the new row's first field; after a remove, on
+ * the row that took its place (else the add button). Ctrl/⌘+Enter in any row adds a
+ * row.
+ */
+declare function LineItems<T>({ items, columns, getKey, onAdd, onRemove, minItems, maxItems, confirmRemove, addLabel, rowLabel, totals, totalsLabel, empty, error, disabled, labels: labelsProp, className, style, ...rest }: LineItemsProps<T>): react.JSX.Element;
+
+export { DEFAULT_LINE_ITEMS_LABELS, type LineItemCellContext, LineItems, type LineItemsColumn, type LineItemsLabels, type LineItemsProps };

package/dist/components/line-items.js

@@ -0,0 +1,238 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { Plus, Trash2 } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useKitLabels } from "../i18n/kit-labels.js";
+import { Button, IconButton } from "./ui.js";
+const DEFAULT_LINE_ITEMS_LABELS = {
+  add: "Add row",
+  remove: (row) => `Remove row ${row}`,
+  confirmRemove: (row) => `Remove row ${row}? Press again to confirm`,
+  row: (row) => `Row ${row}`,
+  cell: (column, row) => `${column}, row ${row}`,
+  totals: "Total"
+};
+const REMOVE_TRACK = "2.25rem";
+const FOCUSABLE = "input:not([disabled]):not([type=hidden]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex='-1'])";
+function defaultKey(item, index) {
+  if (typeof item === "object" && item !== null && "id" in item) {
+    const id = item.id;
+    if (typeof id === "string" || typeof id === "number") return id;
+  }
+  return index;
+}
+function hasContent(node) {
+  return node !== void 0 && node !== null && node !== false && node !== "";
+}
+function LineItems({
+  items,
+  columns,
+  getKey = defaultKey,
+  onAdd,
+  onRemove,
+  minItems = 0,
+  maxItems,
+  confirmRemove,
+  addLabel,
+  rowLabel,
+  totals,
+  totalsLabel,
+  empty,
+  error,
+  disabled = false,
+  labels: labelsProp,
+  className,
+  style,
+  ...rest
+}) {
+  const labels = useKitLabels("lineItems", DEFAULT_LINE_ITEMS_LABELS, labelsProp);
+  const rowRefs = useRef([]);
+  const addRef = useRef(null);
+  const pendingFocus = useRef(null);
+  const [confirmingAt, setConfirming] = useState(null);
+  const confirming = confirmingAt !== null && confirmingAt < items.length ? confirmingAt : null;
+  const tracks = [...columns.map((c) => c.width ?? "minmax(0,1fr)"), ...onRemove ? [REMOVE_TRACK] : []];
+  const gridStyle = { "--line-items-cols": tracks.join(" ") };
+  const canAdd = Boolean(onAdd) && !disabled && (maxItems === void 0 || items.length < maxItems);
+  const canRemove = Boolean(onRemove) && !disabled && items.length > minItems;
+  const hasError = hasContent(error);
+  useLayoutEffect(() => {
+    const pending = pendingFocus.current;
+    if (!pending) return;
+    pendingFocus.current = null;
+    if (pending.kind === "added") {
+      const row2 = rowRefs.current[items.length - 1];
+      row2?.querySelector(FOCUSABLE)?.focus();
+      return;
+    }
+    const row = rowRefs.current[Math.min(pending.index, items.length - 1)];
+    const target = row?.querySelector("[data-line-items-remove]:not([disabled])") ?? row?.querySelector(FOCUSABLE) ?? addRef.current;
+    target?.focus();
+  }, [items.length]);
+  const add = useCallback(() => {
+    if (!canAdd || !onAdd) return;
+    pendingFocus.current = { kind: "added" };
+    onAdd();
+  }, [canAdd, onAdd]);
+  const removeAt = async (index) => {
+    if (!canRemove || !onRemove) return;
+    if (confirmRemove === true && confirming !== index) {
+      setConfirming(index);
+      return;
+    }
+    if (typeof confirmRemove === "function") {
+      const ok = await confirmRemove(items[index], index);
+      if (!ok) return;
+    }
+    setConfirming(null);
+    pendingFocus.current = { kind: "removed", index };
+    onRemove(index);
+  };
+  const onRowKeyDown = (e) => {
+    if (e.key === "Enter" && (e.ctrlKey || e.metaKey) && canAdd) {
+      e.preventDefault();
+      add();
+    }
+  };
+  const columnName = (column) => column.label ?? (typeof column.header === "string" ? column.header : column.key);
+  const headerCell = (column) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "min-w-0 truncate text-xs font-medium text-[var(--text-muted)]",
+        column.align === "end" && "text-end"
+      ),
+      children: column.header
+    },
+    column.key
+  );
+  const showTotals = totals !== void 0;
+  const labelColumn = showTotals ? columns.find((c) => !hasContent(totals[c.key]))?.key : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "line-items",
+      ...rest,
+      style: { ...gridStyle, ...style },
+      className: cn("@container space-y-2", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: "hidden gap-2 @lg:grid @lg:grid-cols-[var(--line-items-cols)]", children: [
+          columns.map(headerCell),
+          onRemove && /* @__PURE__ */ jsx("span", {})
+        ] }),
+        items.length === 0 && hasContent(empty) && /* @__PURE__ */ jsx("div", { className: "rounded-md border border-dashed border-[var(--border)] px-3 py-4 text-center text-sm text-[var(--text-muted)]", children: empty }),
+        items.map((item, index) => {
+          const row = index + 1;
+          const isConfirming = confirming === index;
+          return (
+            // The row's Ctrl/⌘+Enter is a shortcut for the add button, which is itself
+            // reachable by Tab; the group only listens for it bubbling from its fields.
+            // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ref: (el) => {
+                  rowRefs.current[index] = el;
+                },
+                role: "group",
+                "aria-label": rowLabel ? rowLabel(index, item) : labels.row(row),
+                "data-line-items-row": "",
+                onKeyDown: onRowKeyDown,
+                className: cn(
+                  "grid grid-cols-1 gap-2 @lg:grid-cols-[var(--line-items-cols)] @lg:items-start",
+                  // Stacked, each row is a card of its own so the rows stay apart.
+                  "@max-lg:rounded-md @max-lg:border @max-lg:border-[var(--border)] @max-lg:p-3"
+                ),
+                children: [
+                  columns.map((column) => /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1 @lg:space-y-0", children: [
+                    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "block text-xs font-medium text-[var(--text-muted)] @lg:hidden", children: column.header }),
+                    column.render({ item, index, label: labels.cell(columnName(column), row) })
+                  ] }, column.key)),
+                  onRemove && /* @__PURE__ */ jsx("div", { className: "flex justify-end @lg:justify-center", children: /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      type: "button",
+                      "data-line-items-remove": "",
+                      variant: isConfirming ? "danger" : "ghost",
+                      tone: isConfirming ? void 0 : "danger",
+                      label: isConfirming ? labels.confirmRemove(row) : labels.remove(row),
+                      disabled: !canRemove,
+                      onClick: () => void removeAt(index),
+                      onBlur: () => {
+                        if (isConfirming) setConfirming(null);
+                      },
+                      onKeyDown: (e) => {
+                        if (e.key === "Escape" && isConfirming) {
+                          e.stopPropagation();
+                          setConfirming(null);
+                        }
+                      },
+                      children: /* @__PURE__ */ jsx(Trash2, {})
+                    }
+                  ) })
+                ]
+              },
+              getKey(item, index)
+            )
+          );
+        }),
+        showTotals && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "group",
+            "aria-label": typeof totalsLabel === "string" ? totalsLabel : labels.totals,
+            "data-line-items-totals": "",
+            className: "grid grid-cols-1 gap-2 border-t border-[var(--border)] pt-2 text-sm font-semibold tabular-nums text-[var(--text-primary)] @lg:grid-cols-[var(--line-items-cols)]",
+            children: [
+              columns.map((column) => {
+                const value = totals[column.key];
+                if (column.key === labelColumn) {
+                  return /* @__PURE__ */ jsx("span", { className: "min-w-0", children: totalsLabel ?? labels.totals }, column.key);
+                }
+                return /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "min-w-0",
+                      column.align === "end" && "@lg:text-end",
+                      // Stacked, a column with no total takes no line.
+                      !hasContent(value) && "@max-lg:hidden"
+                    ),
+                    children: hasContent(value) && /* @__PURE__ */ jsxs("span", { className: "flex justify-between gap-2 @lg:block", children: [
+                      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "font-normal text-[var(--text-muted)] @lg:hidden", children: column.header }),
+                      value
+                    ] })
+                  },
+                  column.key
+                );
+              }),
+              onRemove && /* @__PURE__ */ jsx("span", { className: "@max-lg:hidden" })
+            ]
+          }
+        ),
+        hasError && /* @__PURE__ */ jsx("p", { className: "text-[11px] leading-tight text-[var(--danger)]", children: error }),
+        onAdd && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            ref: addRef,
+            type: "button",
+            variant: "secondary",
+            className: "w-full border-dashed",
+            disabled: !canAdd,
+            onClick: add,
+            children: [
+              /* @__PURE__ */ jsx(Plus, { "aria-hidden": true, className: "size-4" }),
+              addLabel ?? labels.add
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  DEFAULT_LINE_ITEMS_LABELS,
+  LineItems
+};
+//# sourceMappingURL=line-items.js.map