@eifi1/ui-kit 0.11.0 → 0.12.0

package/dist/components/form-actions.d.ts

@@ -0,0 +1,53 @@
+import 'react';
+export { N as DEFAULT_FORM_ACTIONS_LABELS, aj as FormActions, ak as FormActionsAlign, al as FormActionsDestructive, am as FormActionsLabels, an as FormActionsPlacement, ao as FormActionsProps } from '../kit-labels-v3biUF1L.js';
+import './data-table-labels.js';
+import './mini-calendar.js';
+import './calendar-heatmap.js';
+import './popover.js';
+import './chip.js';
+import 'lucide-react';
+import './field-sync.js';
+import './tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
+import '../wizard/types.js';
+import '../tour/tour.js';
+import '../search/command-palette.js';
+import '../search/global-search.js';
+import '../search/search-index.js';
+import './month-picker.js';
+import './page-contents.js';
+import './series-chart-labels.js';
+import './pie-chart-labels.js';
+import './sparkline.js';
+import './stat-tile.js';
+import './signature-pad.js';
+import './password-strength.js';
+import './danger-confirm.js';
+import './swatch-picker.js';
+import './tile-radio.js';
+import './icon-picker.js';
+import './dialog-frame.js';
+import './modal.js';
+import '../hooks/use-search-param-state.js';
+import './measured-grid.js';
+import '../feedback/feedback-attachment.js';
+import '../feedback/feedback-dialog.js';
+import '../feedback/feedback-thread.js';
+import '../feedback/feedback-inbox.js';
+import './account-settings-labels.js';
+import './confirm-dialog.js';
+import './floating-panel.js';
+import './bulk-action-bar.js';
+import './list.js';
+import './breadcrumbs.js';
+import './toast.js';
+import './description-list.js';
+import './line-items.js';
+import './progress-bar.js';
+import './signed-amount.js';
+import './error-boundary.js';
+import './authed-image.js';
+import '../hooks/use-authed-src.js';
+import './image-grid.js';
+import './lightbox.js';

package/dist/components/form-actions.js

@@ -0,0 +1,98 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isValidElement } from "react";
+import { cn } from "../lib/cn.js";
+import { useKitLabels } from "../i18n/kit-labels.js";
+import { Button, Spinner } from "./ui.js";
+const DEFAULT_FORM_ACTIONS_LABELS = {
+  save: "Save",
+  cancel: "Cancel"
+};
+const ALIGN_CLASS = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between"
+};
+const PLACEMENT_CLASS = {
+  inline: "pt-4",
+  sticky: "sticky bottom-0 z-10 border-t border-[var(--border)] bg-[var(--bg-surface)] pt-3",
+  dialog: ""
+};
+function isDestructiveData(value) {
+  return typeof value === "object" && value !== null && !isValidElement(value) && "onClick" in value;
+}
+function FormActions({
+  onCancel,
+  onSubmit,
+  submitLabel,
+  cancelLabel,
+  pendingLabel,
+  pending = false,
+  submitDisabled = false,
+  submitDisabledReason,
+  submitVariant = "brand",
+  destructive,
+  align,
+  placement = "inline",
+  form,
+  children,
+  className,
+  style,
+  ...rest
+}) {
+  const labels = useKitLabels("form", DEFAULT_FORM_ACTIONS_LABELS);
+  const hasDestructive = destructive !== void 0 && destructive !== null && destructive !== false;
+  const justify = align ?? (hasDestructive ? "between" : "end");
+  const start = !hasDestructive ? null : isDestructiveData(destructive) ? /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      variant: "ghost",
+      tone: "danger",
+      onClick: destructive.onClick,
+      disabled: destructive.disabled,
+      disabledReason: destructive.disabledReason,
+      children: destructive.label
+    }
+  ) : destructive;
+  const saveLabel = submitLabel ?? labels.save;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "form-actions",
+      "data-placement": placement,
+      ...rest,
+      style: placement === "sticky" ? { paddingBottom: "max(0.75rem, env(safe-area-inset-bottom))", ...style } : style,
+      className: cn("flex flex-wrap items-center gap-2", ALIGN_CLASS[justify], PLACEMENT_CLASS[placement], className),
+      children: [
+        start && /* @__PURE__ */ jsx("div", { className: "me-auto flex items-center gap-2", children: start }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+          children,
+          onCancel && /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", onClick: onCancel, children: cancelLabel ?? labels.cancel }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: onSubmit ? "button" : "submit",
+              form,
+              onClick: onSubmit,
+              variant: submitVariant,
+              disabled: pending || submitDisabled,
+              disabledReason: pending ? void 0 : submitDisabledReason,
+              "aria-busy": pending || void 0,
+              children: [
+                pending && /* @__PURE__ */ jsx(Spinner, { label: null, className: "size-4" }),
+                pending && pendingLabel !== void 0 ? pendingLabel : saveLabel
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  DEFAULT_FORM_ACTIONS_LABELS,
+  FormActions
+};
+//# sourceMappingURL=form-actions.js.map

package/dist/components/form-actions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/form-actions.tsx"],"sourcesContent":["import { isValidElement } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { Button, Spinner, type ButtonVariant } from \"./ui\";\n\n/** The words {@link FormActions} renders on its own behalf — the `form` namespace. */\nexport interface FormActionsLabels {\n  save: string;\n  cancel: string;\n}\n\nexport const DEFAULT_FORM_ACTIONS_LABELS: FormActionsLabels = {\n  save: \"Save\",\n  cancel: \"Cancel\",\n};\n\nexport type FormActionsAlign = \"start\" | \"center\" | \"end\" | \"between\";\n\n/**\n * Where the row sits:\n *  - `inline` (default): under the form's last field, `pt-4` above it.\n *  - `sticky`: stuck to the bottom of the scrolling page or pane, on the surface\n *    colour with a rule above, clear of the phone's home indicator — for a long form\n *    whose Save should not be a scroll away.\n *  - `dialog`: no spacing of its own, for a dialog's footer slot (DialogFrame,\n *    FullBleedDialog's `footer`), which already pads and rules it.\n */\nexport type FormActionsPlacement = \"inline\" | \"sticky\" | \"dialog\";\n\n/** The start-side action of {@link FormActionsProps.destructive}, as data. */\nexport interface FormActionsDestructive {\n  label: ReactNode;\n  onClick: () => void;\n  disabled?: boolean;\n  /** See Button's `disabledReason`. */\n  disabledReason?: ReactNode;\n}\n\nconst ALIGN_CLASS: Record<FormActionsAlign, string> = {\n  start: \"justify-start\",\n  center: \"justify-center\",\n  end: \"justify-end\",\n  between: \"justify-between\",\n};\n\nconst PLACEMENT_CLASS: Record<FormActionsPlacement, string> = {\n  inline: \"pt-4\",\n  sticky: \"sticky bottom-0 z-10 border-t border-[var(--border)] bg-[var(--bg-surface)] pt-3\",\n  dialog: \"\",\n};\n\nexport interface FormActionsProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /** Called by Cancel. Omitted: no Cancel button (a form that only saves). */\n  onCancel?: () => void;\n  /**\n   * Given: the save button is `type=\"button\"` and calls this — for a dialog or a row\n   * that saves from a handler. Omitted: it is `type=\"submit\"` and submits the\n   * enclosing `<form>` (or the one named by {@link form}).\n   */\n  onSubmit?: () => void;\n  /** The save button's text. Default `form.save` from the provider, else \"Save\". */\n  submitLabel?: ReactNode;\n  /** The cancel button's text. Default `form.cancel` from the provider, else \"Cancel\". */\n  cancelLabel?: ReactNode;\n  /** The save button's text while `pending` (\"Saving…\"). Default: `submitLabel`. */\n  pendingLabel?: ReactNode;\n  /**\n   * The save is running: a spinner in the save button, `aria-busy` on it, and the\n   * button disabled, so a second click cannot send the form twice. Cancel stays\n   * usable.\n   */\n  pending?: boolean;\n  /** Disable save for a reason of the form's own (an unbalanced entry). */\n  submitDisabled?: boolean;\n  /** Why save is disabled — see Button's `disabledReason`. Keeps it focusable. */\n  submitDisabledReason?: ReactNode;\n  /** The save button's variant. Default `brand`; `danger` for a save that destroys\n   *  (kastlan's `destructive` flag on its own FormActions). */\n  submitVariant?: ButtonVariant;\n  /**\n   * A destructive action at the START of the row, apart from Save and Cancel — the\n   * \"Delete\" of an edit dialog. Pass `{ label, onClick }` for the kit's quiet danger\n   * button, or an element of your own (a {@link DangerConfirm}, say). With it the row\n   * is `between`-aligned unless `align` says otherwise.\n   */\n  destructive?: ReactNode | FormActionsDestructive;\n  /** Horizontal alignment. Default `end` (`between` with a `destructive` action). */\n  align?: FormActionsAlign;\n  /** See {@link FormActionsPlacement}. Default `inline`. */\n  placement?: FormActionsPlacement;\n  /** The `id` of the `<form>` the save button submits, when the row is rendered\n   *  outside it (a dialog's footer slot). */\n  form?: string;\n  /** Extra actions, placed before Cancel. */\n  children?: ReactNode;\n}\n\nfunction isDestructiveData(value: unknown): value is FormActionsDestructive {\n  return typeof value === \"object\" && value !== null && !isValidElement(value) && \"onClick\" in value;\n}\n\n/**\n * The Save / Cancel row every form, wizard-step form and dialog ends in — kastlan's\n * `FormActions`, with the labels from the provider, a pending state and a place for\n * the destructive action.\n *\n * ```tsx\n * <form onSubmit={form.handleSubmit(save)}>\n *   …\n *   <FormActions onCancel={close} pending={mutation.isPending} />\n * </form>\n * ```\n *\n * The spinner is the kit's {@link Spinner}, drawn inside the button with `label={null}`\n * so the button's name stays its text; `aria-busy` is what says it is working.\n */\nexport function FormActions({\n  onCancel,\n  onSubmit,\n  submitLabel,\n  cancelLabel,\n  pendingLabel,\n  pending = false,\n  submitDisabled = false,\n  submitDisabledReason,\n  submitVariant = \"brand\",\n  destructive,\n  align,\n  placement = \"inline\",\n  form,\n  children,\n  className,\n  style,\n  ...rest\n}: FormActionsProps) {\n  const labels = useKitLabels(\"form\", DEFAULT_FORM_ACTIONS_LABELS);\n  const hasDestructive = destructive !== undefined && destructive !== null && destructive !== false;\n  const justify = align ?? (hasDestructive ? \"between\" : \"end\");\n  const start = !hasDestructive ? null : isDestructiveData(destructive) ? (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      tone=\"danger\"\n      onClick={destructive.onClick}\n      disabled={destructive.disabled}\n      disabledReason={destructive.disabledReason}\n    >\n      {destructive.label}\n    </Button>\n  ) : (\n    destructive\n  );\n  const saveLabel = submitLabel ?? labels.save;\n\n  return (\n    <div\n      data-slot=\"form-actions\"\n      data-placement={placement}\n      {...rest}\n      style={\n        placement === \"sticky\"\n          ? { paddingBottom: \"max(0.75rem, env(safe-area-inset-bottom))\", ...style }\n          : style\n      }\n      className={cn(\"flex flex-wrap items-center gap-2\", ALIGN_CLASS[justify], PLACEMENT_CLASS[placement], className)}\n    >\n      {start && <div className=\"me-auto flex items-center gap-2\">{start}</div>}\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {children}\n        {onCancel && (\n          <Button type=\"button\" variant=\"secondary\" onClick={onCancel}>\n            {cancelLabel ?? labels.cancel}\n          </Button>\n        )}\n        <Button\n          type={onSubmit ? \"button\" : \"submit\"}\n          form={form}\n          onClick={onSubmit}\n          variant={submitVariant}\n          disabled={pending || submitDisabled}\n          disabledReason={pending ? undefined : submitDisabledReason}\n          aria-busy={pending || undefined}\n        >\n          {pending && <Spinner label={null} className=\"size-4\" />}\n          {pending && pendingLabel !== undefined ? pendingLabel : saveLabel}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AA4II,cAmCI,YAnCJ;AA5IJ,SAAS,sBAAsB;AAE/B,SAAS,UAAU;AACnB,SAAS,oBAAoB;AAC7B,SAAS,QAAQ,eAAmC;AAQ7C,MAAM,8BAAiD;AAAA,EAC5D,MAAM;AAAA,EACN,QAAQ;AACV;AAwBA,MAAM,cAAgD;AAAA,EACpD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,SAAS;AACX;AAEA,MAAM,kBAAwD;AAAA,EAC5D,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AACV;AAgDA,SAAS,kBAAkB,OAAiD;AAC1E,SAAO,OAAO,UAAU,YAAY,UAAU,QAAQ,CAAC,eAAe,KAAK,KAAK,aAAa;AAC/F;AAiBO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,SAAS,aAAa,QAAQ,2BAA2B;AAC/D,QAAM,iBAAiB,gBAAgB,UAAa,gBAAgB,QAAQ,gBAAgB;AAC5F,QAAM,UAAU,UAAU,iBAAiB,YAAY;AACvD,QAAM,QAAQ,CAAC,iBAAiB,OAAO,kBAAkB,WAAW,IAClE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,SAAS,YAAY;AAAA,MACrB,UAAU,YAAY;AAAA,MACtB,gBAAgB,YAAY;AAAA,MAE3B,sBAAY;AAAA;AAAA,EACf,IAEA;AAEF,QAAM,YAAY,eAAe,OAAO;AAExC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,kBAAgB;AAAA,MACf,GAAG;AAAA,MACJ,OACE,cAAc,WACV,EAAE,eAAe,6CAA6C,GAAG,MAAM,IACvE;AAAA,MAEN,WAAW,GAAG,qCAAqC,YAAY,OAAO,GAAG,gBAAgB,SAAS,GAAG,SAAS;AAAA,MAE7G;AAAA,iBAAS,oBAAC,SAAI,WAAU,mCAAmC,iBAAM;AAAA,QAClE,qBAAC,SAAI,WAAU,qCACZ;AAAA;AAAA,UACA,YACC,oBAAC,UAAO,MAAK,UAAS,SAAQ,aAAY,SAAS,UAChD,yBAAe,OAAO,QACzB;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,WAAW,WAAW;AAAA,cAC5B;AAAA,cACA,SAAS;AAAA,cACT,SAAS;AAAA,cACT,UAAU,WAAW;AAAA,cACrB,gBAAgB,UAAU,SAAY;AAAA,cACtC,aAAW,WAAW;AAAA,cAErB;AAAA,2BAAW,oBAAC,WAAQ,OAAO,MAAM,WAAU,UAAS;AAAA,gBACpD,WAAW,iBAAiB,SAAY,eAAe;AAAA;AAAA;AAAA,UAC1D;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

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 };