@pipelex/mthds-form 0.25.0 → 0.27.0

package/dist/{chunk-NA7SIQOH.js → chunk-AZIUFSIQ.js}

@@ -1,9 +1,9 @@
-import { planFileSave, planStuffSave, splitFileName, typedFileStem } from './chunk-QWHUUMSB.js';
+import { planFileSave, planStuffSave, splitFileName, typedFileStem } from './chunk-4VAO6BDE.js';
 import { seedInputs, closeOptionalStructures, openOptionalStructures } from './chunk-VH5CDQDR.js';
 import { sourceFileValue, roomForChosenFiles, roomForDroppedFiles, addChosenFiles, placeDroppedFiles, chosenFilesAdded } from './chunk-NSHGLM6A.js';
-import { readStuffFile } from './chunk-QINLJ5RM.js';
+import { readStuffFile } from './chunk-56WECFBD.js';
 import { apiInputsFromRunValues, sameRunValues, runValuesFromInputs, setValueAtPath } from './chunk-ZX52CQJ4.js';
-import { TYPED_SCALAR_MARKERS, viewableUrl, isNativeDateNode, isNativeHtmlNode, readHtmlContent, isNativeCompositeNode, readCompositeContent, isNativePageNode, nativeVerdictOf, isNativeValueNode, readDateContent, formatDateContent, readPageContent, readYesNoContent, readRatingContent, readChoiceContent, readImageContent, readDataUrl, readDocumentContent } from './chunk-JSPF4BQP.js';
+import { TYPED_SCALAR_MARKERS, viewableUrl, splitCitations, webHref, isNativeDateNode, isNativeHtmlNode, readHtmlContent, isNativeCompositeNode, readCompositeContent, isNativePageNode, nativeVerdictOf, isNativeSearchResultNode, readSearchResultContent, isNativeValueNode, readDateContent, formatDateContent, readPageContent, readYesNoContent, readRatingContent, readChoiceContent, readDocumentContent, readImageContent, readDataUrl, citedSource } from './chunk-QQK6Y55E.js';
 import { buildRunFields } from './chunk-ZB4RYUKV.js';
 import { conceptCategory } from './chunk-FABY3DEY.js';
 import { acceptLabel, acceptMap, isAcceptedFile, normalizeMimeType, formatOfFilename, DOCUMENT_FORMATS, IMAGE_FORMATS } from './chunk-XCO6GTEC.js';
@@ -12,10 +12,10 @@ import { ownProp } from './chunk-V3OV2XQT.js';
 import { toStoredDateValue, toDateInputValue } from './chunk-GKV77RAS.js';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { ChevronDown, ChevronUp, Check, List, Braces, ListChecks, ToggleLeft, Hash, Image as Image$1, FileText, CalendarDays, Type, Folder, Search, X, ImageIcon, Loader2, ImageOff, Upload, Link2, EyeOff, Eye, Minus, Plus, Trash2, Sparkles, MoreHorizontal, TriangleAlert, FileDown, Copy, Download, ChevronRight } from 'lucide-react';
+import { ChevronDown, ChevronUp, Check, List, Braces, ListChecks, ToggleLeft, Hash, Image as Image$1, FileText, CalendarDays, Type, Folder, Search, X, ImageIcon, Loader2, ImageOff, Upload, Link2, EyeOff, Eye, Minus, Plus, Trash2, Sparkles, MoreHorizontal, TriangleAlert, FileDown, Copy, Download, ChevronRight, ExternalLink, ChevronLeft } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as React5 from 'react';
-import { createContext, use, useId, useMemo, useContext, useState, useEffect, useRef, useLayoutEffect, useCallback, Fragment as Fragment$1 } from 'react';
+import * as React9 from 'react';
+import { createContext, use, useId, useMemo, useContext, useState, useEffect, useRef, useLayoutEffect, useCallback, Fragment as Fragment$1, useSyncExternalStore } from 'react';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import { useDropzone } from 'react-dropzone';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -25,6 +25,7 @@ import { cva } from 'class-variance-authority';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { createPortal } from 'react-dom';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { marked } from 'marked';
 
@@ -114,7 +115,7 @@ function fieldLabel(title, name, presentation) {
   if (title !== void 0) return title;
   return presentation === "app" ? humanizeFieldName(name) : name;
 }
-var Switch = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Switch = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SwitchPrimitives.Root,
   {
     className: cn(
@@ -255,6 +256,8 @@ var EN_FIELD_STRINGS = {
   preview: "Preview",
   removeFileAria: "Remove file",
   previewUnavailablePdf: "Preview unavailable - open to view.",
+  pdfViewerUnavailable: "This browser cannot show the PDF here.",
+  openInNewTab: "Open in a new tab",
   // U+002D HYPHEN-MINUS, deliberately: not an en dash, not an em dash.
   resultAbsent: "-",
   resultAbsentDescription: "Not provided",
@@ -287,6 +290,12 @@ var EN_FIELD_STRINGS = {
   ratingLevel: (position) => `Level ${position}`,
   pageNumber: (position) => `Page ${position}`,
   extractedTable: "Table",
+  searchSources: "Sources",
+  viewImage: (name) => `View ${name}`,
+  imagePosition: (position, count) => `${position} of ${count}`,
+  previousImage: "Previous picture",
+  nextImage: "Next picture",
+  openOriginal: "Open the original",
   unsupportedFileType: (formats) => `That file type is not supported. Accepted formats: ${formats}.`,
   dropFilesOrBrowse: "Drop files or click to browse",
   dropFilesToAdd: "Drop to add the files",
@@ -431,6 +440,8 @@ var FR_FIELD_STRINGS = {
   preview: "Aper\xE7u",
   removeFileAria: "Retirer le fichier",
   previewUnavailablePdf: "Aper\xE7u indisponible - ouvrez le fichier pour le consulter.",
+  pdfViewerUnavailable: "Ce navigateur ne peut pas afficher le PDF ici.",
+  openInNewTab: "Ouvrir dans un nouvel onglet",
   // U+002D HYPHEN-MINUS, as in the English defaults.
   resultAbsent: "-",
   resultAbsentDescription: "Non renseign\xE9",
@@ -463,6 +474,12 @@ var FR_FIELD_STRINGS = {
   ratingLevel: (position) => `Niveau ${position}`,
   pageNumber: (position) => `Page ${position}`,
   extractedTable: "Tableau",
+  searchSources: "Sources",
+  viewImage: (name) => `Voir ${name}`,
+  imagePosition: (position, count) => `${position} sur ${count}`,
+  previousImage: "Image pr\xE9c\xE9dente",
+  nextImage: "Image suivante",
+  openOriginal: "Ouvrir l\u2019original",
   unsupportedFileType: (formats) => `Ce type de fichier n\u2019est pas pris en charge. Formats accept\xE9s\xA0: ${formats}.`,
   dropFilesOrBrowse: "D\xE9posez des fichiers ou cliquez pour parcourir",
   dropFilesToAdd: "D\xE9posez pour ajouter les fichiers",
@@ -841,7 +858,11 @@ function closeAutoFocus(onCloseAutoFocus, returnFocus) {
     target.focus();
   };
 }
-var DialogOverlay = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var keepPress = (event) => event.stopPropagation();
+function DialogSurface({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "contents", onClick: keepPress, onMouseDown: keepPress, children });
+}
+var DialogOverlay = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -850,7 +871,7 @@ var DialogOverlay = React5.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React5.forwardRef(({ className, layout = "dialog", returnFocus, onCloseAutoFocus, children, ...props }, ref) => /* @__PURE__ */ jsxs(Fragment, { children: [
+var DialogContent = React9.forwardRef(({ className, layout = "dialog", returnFocus, onCloseAutoFocus, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogSurface, { children: [
   /* @__PURE__ */ jsx(DialogOverlay, {}),
   /* @__PURE__ */ jsx(
     DialogPrimitive.Content,
@@ -871,7 +892,7 @@ var DialogContent = React5.forwardRef(({ className, layout = "dialog", returnFoc
   )
 ] }));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
-var DialogTitle = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Title,
   {
     ref,
@@ -880,7 +901,7 @@ var DialogTitle = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Description,
   {
     ref,
@@ -912,7 +933,7 @@ var toggleVariants = cva(
     }
   }
 );
-var Toggle = React5.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(
+var Toggle = React9.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(
   TogglePrimitive.Root,
   {
     ref,
@@ -921,11 +942,11 @@ var Toggle = React5.forwardRef(({ className, variant, size, ...props }, ref) =>
   }
 ));
 Toggle.displayName = TogglePrimitive.Root.displayName;
-var ToggleGroupContext = React5.createContext({
+var ToggleGroupContext = React9.createContext({
   size: "default",
   variant: "default"
 });
-var ToggleGroup = React5.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx(
+var ToggleGroup = React9.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx(
   ToggleGroupPrimitive.Root,
   {
     ref,
@@ -935,8 +956,8 @@ var ToggleGroup = React5.forwardRef(({ className, variant, size, children, ...pr
   }
 ));
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-var ToggleGroupItem = React5.forwardRef(({ className, children, variant, size, ...props }, ref) => {
-  const context = React5.useContext(ToggleGroupContext);
+var ToggleGroupItem = React9.forwardRef(({ className, children, variant, size, ...props }, ref) => {
+  const context = React9.useContext(ToggleGroupContext);
   return /* @__PURE__ */ jsx(
     ToggleGroupPrimitive.Item,
     {
@@ -1005,7 +1026,6 @@ function FilePicker({
       onCloseAutoFocus,
       returnFocus: () => returnFocusTo?.current ?? heldFocus.current,
       style: drag > 0 ? { transform: `translateY(${drag}px)` } : void 0,
-      onClick: (event) => event.stopPropagation(),
       children: /* @__PURE__ */ jsx(FilePickerBody, { ...props, onDrag: setDrag, onClose: () => onOpenChange(false) })
     }
   ) });
@@ -1046,7 +1066,7 @@ function FilePickerBody({
     return next;
   });
   const choices = [...chosen.values()];
-  const use7 = () => {
+  const use8 = () => {
     if (choices.length === 0) return;
     onUse(choices);
     onClose();
@@ -1151,7 +1171,7 @@ function FilePickerBody({
       "button",
       {
         type: "button",
-        onClick: use7,
+        onClick: use8,
         disabled: choices.length === 0,
         className: cn(
           "flex h-12 w-full items-center justify-center rounded-md bg-primary px-4 text-[16px] font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50",
@@ -1848,7 +1868,7 @@ function ClearButton({ disabled, onClick }) {
 }
 var Select = SelectPrimitive.Root;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React5.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectTrigger = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -1867,7 +1887,7 @@ var SelectTrigger = React5.forwardRef(({ className, children, ...props }, ref) =
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollUpButton = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -1877,7 +1897,7 @@ var SelectScrollUpButton = React5.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollDownButton = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -1887,7 +1907,7 @@ var SelectScrollDownButton = React5.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React5.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+var SelectContent = React9.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
   SelectPrimitive.Content,
   {
     ref,
@@ -1915,7 +1935,7 @@ var SelectContent = React5.forwardRef(({ className, children, position = "popper
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectLabel = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Label,
   {
     ref,
@@ -1924,7 +1944,7 @@ var SelectLabel = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React5.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectItem = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Item,
   {
     ref,
@@ -1940,7 +1960,7 @@ var SelectItem = React5.forwardRef(({ className, children, ...props }, ref) => /
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectSeparator = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Separator,
   {
     ref,
@@ -2909,7 +2929,7 @@ function FieldRenderer({ field, value, onChange, id, error, env }) {
   }
 }
 var AlertDialog = AlertDialogPrimitive.Root;
-var AlertDialogContent = React5.forwardRef(({ className, returnFocus, onCloseAutoFocus, ...props }, ref) => /* @__PURE__ */ jsxs(Fragment, { children: [
+var AlertDialogContent = React9.forwardRef(({ className, returnFocus, onCloseAutoFocus, ...props }, ref) => /* @__PURE__ */ jsxs(DialogSurface, { children: [
   /* @__PURE__ */ jsx(AlertDialogPrimitive.Overlay, { className: "fixed inset-0 z-50 bg-black/50" }),
   /* @__PURE__ */ jsx(
     AlertDialogPrimitive.Content,
@@ -2925,7 +2945,7 @@ var AlertDialogContent = React5.forwardRef(({ className, returnFocus, onCloseAut
   )
 ] }));
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-var AlertDialogTitle = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Title,
   {
     ref,
@@ -2934,7 +2954,7 @@ var AlertDialogTitle = React5.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-var AlertDialogDescription = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Description,
   {
     ref,
@@ -2947,7 +2967,7 @@ var AlertDialogCancel = AlertDialogPrimitive.Cancel;
 var AlertDialogAction = AlertDialogPrimitive.Action;
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-var DropdownMenuContent = React5.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuContent = React9.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -2960,7 +2980,7 @@ var DropdownMenuContent = React5.forwardRef(({ className, sideOffset = 4, ...pro
   }
 ));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuItem = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -3091,7 +3111,6 @@ function FillWithExample({
             className: "top-auto max-h-[calc(100dvh-1.5rem)]",
             ref: sheet,
             returnFocus: () => control.current ?? afterControl.current,
-            onClick: (event) => event.stopPropagation(),
             children: [
               /* @__PURE__ */ jsx("div", { className: "px-4 pt-4 pb-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
                 /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-1 pt-1", children: [
@@ -3176,7 +3195,6 @@ function FillWithExample({
               const row = rows.current.get(replacing.id);
               return row?.isConnected ? row : control.current;
             },
-            onClick: (event) => event.stopPropagation(),
             children: [
               /* @__PURE__ */ jsx(AlertDialogTitle, { children: s.replaceEnteredTitle }),
               /* @__PURE__ */ jsx(AlertDialogDescription, { children: s.replaceEnteredDescription(replacing.name) }),
@@ -3267,7 +3285,7 @@ function RenameExampleDialog({
       onOpenChange: (next) => {
         if (!next && state !== "busy") onCancel();
       },
-      children: /* @__PURE__ */ jsxs(DialogContent, { returnFocus, onClick: (event) => event.stopPropagation(), children: [
+      children: /* @__PURE__ */ jsxs(DialogContent, { returnFocus, children: [
         /* @__PURE__ */ jsx(DialogTitle, { children: s.renameExampleTitle }),
         /* @__PURE__ */ jsx(DialogDescription, { className: "sr-only", children: example.name }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
@@ -3346,7 +3364,7 @@ function DeleteExampleDialog({
       onOpenChange: (next) => {
         if (!next && state !== "busy") onCancel();
       },
-      children: /* @__PURE__ */ jsxs(AlertDialogContent, { returnFocus, onClick: (event) => event.stopPropagation(), children: [
+      children: /* @__PURE__ */ jsxs(AlertDialogContent, { returnFocus, children: [
         /* @__PURE__ */ jsx(AlertDialogTitle, { children: s.deleteExampleTitle(example.name) }),
         /* @__PURE__ */ jsx(AlertDialogDescription, { children: s.deleteExampleDescription }),
         state === "failed" && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-[13px] text-destructive", children: s.deleteFailed }),
@@ -4098,6 +4116,7 @@ var ResultEnvContext = createContext({});
 function ResultEnvProvider({
   resolveUrl,
   resolveUrls,
+  resolveRendition,
   resolveShareUrl,
   proseImages,
   tableColumns,
@@ -4111,6 +4130,7 @@ function ResultEnvProvider({
     () => ({
       resolveUrl,
       resolveUrls,
+      resolveRendition,
       resolveShareUrl,
       proseImages,
       tableColumns,
@@ -4122,6 +4142,7 @@ function ResultEnvProvider({
     [
       resolveUrl,
       resolveUrls,
+      resolveRendition,
       resolveShareUrl,
       proseImages,
       tableColumns,
@@ -4171,6 +4192,9 @@ function useMarkupResolvers() {
   const { resolveUrl, resolveUrls } = use(ResultEnvContext);
   return useMemo(() => ({ resolveUrl, resolveUrls }), [resolveUrl, resolveUrls]);
 }
+function useResolveRendition() {
+  return use(ResultEnvContext).resolveRendition;
+}
 function useResolveShareUrl() {
   return use(ResultEnvContext).resolveShareUrl;
 }
@@ -4226,6 +4250,34 @@ function useTableColumns() {
 function useTableLayout() {
   return use(ResultEnvContext).tableLayout ?? "scroll";
 }
+var OverlayLayerContext = createContext(null);
+function OverlayLayer({ children }) {
+  const outer = use(OverlayLayerContext);
+  const [holders, setHolders] = useState(0);
+  const [target, setTarget] = useState(null);
+  const acquire = useCallback(() => {
+    setHolders((count) => count + 1);
+    let released = false;
+    return () => {
+      if (released) return;
+      released = true;
+      setHolders((count) => count - 1);
+    };
+  }, []);
+  const layer = useMemo(() => ({ target, acquire }), [target, acquire]);
+  if (outer) return children;
+  return /* @__PURE__ */ jsxs(OverlayLayerContext, { value: layer, children: [
+    holders > 0 && /* @__PURE__ */ jsx("span", { ref: setTarget, "data-overlay-layer": true, className: "absolute size-0" }),
+    children
+  ] });
+}
+function InOverlayLayer({ children }) {
+  const layer = use(OverlayLayerContext);
+  const acquire = layer?.acquire;
+  useEffect(() => acquire?.(), [acquire]);
+  if (!layer) return children;
+  return layer.target ? createPortal(children, layer.target) : null;
+}
 var ResultLocationContext = createContext(void 0);
 function useResultLocation() {
   return use(ResultLocationContext);
@@ -4237,7 +4289,7 @@ function ResultRoot({
 }) {
   const key = path.join("\0");
   const location = useMemo(() => ({ baseName, path: key.split("\0") }), [baseName, key]);
-  return /* @__PURE__ */ jsx(ResultLocationContext, { value: location, children });
+  return /* @__PURE__ */ jsx(ResultLocationContext, { value: location, children: /* @__PURE__ */ jsx(OverlayLayer, { children }) });
 }
 function ResultAt({ segment, children }) {
   const parent = use(ResultLocationContext);
@@ -4324,10 +4376,21 @@ function useFrameFocus(frame) {
   }, [frame]);
   return focused;
 }
+var subscribe = () => () => {
+};
+function browserViewer() {
+  return navigator.pdfViewerEnabled === false ? "no" : "yes";
+}
+function serverViewer() {
+  return "unknown";
+}
+function usePdfViewer() {
+  return useSyncExternalStore(subscribe, browserViewer, serverViewer);
+}
 var TooltipProvider = TooltipPrimitive.Provider;
 var TooltipRoot = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React5.forwardRef(({ className, sideOffset = 6, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var TooltipContent = React9.forwardRef(({ className, sideOffset = 6, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   TooltipPrimitive.Content,
   {
     ref,
@@ -5317,14 +5380,240 @@ function useResolvedMarkup(markup) {
   if (!needed) return markup;
   return shown?.source === markup ? shown.html : void 0;
 }
+var SWIPE_DISTANCE = 40;
+function ImageViewer({
+  pictures,
+  index,
+  onIndexChange,
+  onClose,
+  returnFocus
+}) {
+  const s = useFieldStrings();
+  const panel = useRef(null);
+  const swipe = useRef(null);
+  const count = pictures.length;
+  const at = Math.min(Math.max(index, 0), count - 1);
+  const picture = pictures[at];
+  if (!picture) return null;
+  const several = count > 1;
+  const go = (step) => {
+    const next = at + step;
+    if (next >= 0 && next < count) onIndexChange(next);
+  };
+  const onPointerDown = (event) => {
+    swipe.current = event.pointerType === "touch" && event.isPrimary ? { id: event.pointerId, x: event.clientX, y: event.clientY } : null;
+  };
+  const onPointerUp = (event) => {
+    const start = swipe.current;
+    swipe.current = null;
+    if (!start || start.id !== event.pointerId) return;
+    const across = event.clientX - start.x;
+    const down = event.clientY - start.y;
+    if (Math.abs(across) < SWIPE_DISTANCE || Math.abs(across) < Math.abs(down) * 1.5) return;
+    go(across < 0 ? 1 : -1);
+  };
+  return /* @__PURE__ */ jsx(InOverlayLayer, { children: /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) onClose();
+      },
+      children: /* @__PURE__ */ jsxs(
+        DialogContent,
+        {
+          ref: panel,
+          returnFocus,
+          onOpenAutoFocus: (event) => {
+            event.preventDefault();
+            panel.current?.focus();
+          },
+          onEscapeKeyDown: (event) => {
+            if (event.target instanceof Element && event.target.closest("[data-file-name-backdrop]")) {
+              event.preventDefault();
+            }
+          },
+          onKeyDown: (event) => {
+            if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+              return;
+            }
+            if (isTextEntry(event.target)) return;
+            if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+            event.preventDefault();
+            event.stopPropagation();
+            go(event.key === "ArrowLeft" ? -1 : 1);
+          },
+          ...picture.caption ? {} : { "aria-describedby": void 0 },
+          className: cn(
+            "m-0 h-dvh w-full max-w-none gap-0 rounded-none border-0 p-0",
+            "sm:m-auto sm:h-[calc(100dvh-4rem)] sm:w-[calc(100%-4rem)] sm:max-w-6xl sm:rounded-xl sm:border"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2 border-b border-border py-1.5 pr-1.5 pl-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx(DialogTitle, { className: "truncate text-[14px] font-medium", children: picture.name }),
+                several && // A live region from the moment the viewer opens, so each move
+                // is announced: one inserted with its text already in it is not.
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    "aria-live": "polite",
+                    "aria-atomic": "true",
+                    className: "text-[12px] text-muted-foreground",
+                    children: s.imagePosition(at + 1, count)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+                /* @__PURE__ */ jsxs(
+                  "a",
+                  {
+                    href: picture.src,
+                    target: "_blank",
+                    rel: "noreferrer",
+                    className: cn(
+                      "inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-[12px] text-muted-foreground hover:bg-muted hover:text-foreground max-sm:size-11 max-sm:justify-center max-sm:p-0",
+                      focusOutlineClass
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx(ExternalLink, { "aria-hidden": true, className: "size-3.5" }),
+                      /* @__PURE__ */ jsx("span", { className: "max-sm:sr-only", children: s.openOriginal })
+                    ]
+                  }
+                ),
+                picture.actions,
+                /* @__PURE__ */ jsx(
+                  DialogClose,
+                  {
+                    "aria-label": s.close,
+                    className: cn(
+                      "flex size-9 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground max-sm:size-11",
+                      focusOutlineClass
+                    ),
+                    children: /* @__PURE__ */ jsx(X, { "aria-hidden": true, className: "size-4" })
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                "data-viewer-stage": true,
+                onPointerDown,
+                onPointerUp,
+                onPointerCancel: () => {
+                  swipe.current = null;
+                },
+                className: "relative min-h-0 flex-1 touch-pan-y touch-pinch-zoom",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    ViewerImage,
+                    {
+                      src: picture.src,
+                      alt: picture.caption ?? picture.name
+                    },
+                    picture.src
+                  ),
+                  several && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(
+                      StepButton2,
+                      {
+                        label: s.previousImage,
+                        unavailable: at === 0,
+                        onStep: () => go(-1),
+                        className: "left-2",
+                        children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": true, className: "size-5" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      StepButton2,
+                      {
+                        label: s.nextImage,
+                        unavailable: at === count - 1,
+                        onStep: () => go(1),
+                        className: "right-2",
+                        children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true, className: "size-5" })
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
+            picture.caption && /* @__PURE__ */ jsx(DialogDescription, { className: "max-h-24 shrink-0 overflow-y-auto border-t border-border px-4 py-2 text-[13px]", children: picture.caption })
+          ]
+        }
+      )
+    }
+  ) });
+}
+function ViewerImage({ src, alt }) {
+  const [loading, setLoading] = useState(true);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    loading && /* @__PURE__ */ jsx(
+      "span",
+      {
+        role: "status",
+        "aria-label": alt,
+        className: "absolute inset-0 flex items-center justify-center",
+        children: /* @__PURE__ */ jsx(Loader2, { "aria-hidden": true, className: "size-5 animate-spin text-muted-foreground" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src,
+        alt,
+        referrerPolicy: "no-referrer",
+        decoding: "async",
+        draggable: false,
+        onLoad: () => setLoading(false),
+        onError: () => setLoading(false),
+        className: cn(
+          "absolute inset-0 size-full object-contain p-2 sm:p-4",
+          loading && "opacity-0"
+        )
+      }
+    )
+  ] });
+}
+function StepButton2({
+  label,
+  unavailable,
+  onStep,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      "aria-disabled": unavailable,
+      onClick: () => {
+        if (!unavailable) onStep();
+      },
+      className: cn(
+        "absolute top-1/2 flex size-11 -translate-y-1/2 items-center justify-center rounded-full border border-border bg-popover/90 text-foreground shadow-sm hover:bg-muted aria-disabled:opacity-40 aria-disabled:hover:bg-popover/90",
+        focusOutlineClass,
+        className
+      ),
+      children
+    }
+  );
+}
+function isTextEntry(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  return target.isContentEditable || target.closest("input, textarea, select") !== null;
+}
 var LEX_OPTIONS = { gfm: true, breaks: true };
-function Markdown({ text, className, proseImages }) {
-  const tokens = React5.useMemo(() => marked.lexer(text, LEX_OPTIONS), [text]);
+function Markdown({ text, className, proseImages, citations }) {
+  const tokens = React9.useMemo(() => marked.lexer(text, LEX_OPTIONS), [text]);
   const fromEnv = useProseImages();
   const mode = proseImages ?? fromEnv;
-  return /* @__PURE__ */ jsx(ProseImagesContext, { value: mode, children: /* @__PURE__ */ jsx("div", { className: cn("space-y-2 text-[13px] leading-relaxed text-foreground", className), children: /* @__PURE__ */ jsx(Blocks, { tokens }) }) });
+  return /* @__PURE__ */ jsx(ProseImagesContext, { value: mode, children: /* @__PURE__ */ jsx(CitationsContext, { value: citations, children: /* @__PURE__ */ jsx("div", { className: cn("space-y-2 text-[13px] leading-relaxed text-foreground", className), children: /* @__PURE__ */ jsx(Blocks, { tokens }) }) }) });
 }
-var ProseImagesContext = React5.createContext("link");
+var ProseImagesContext = React9.createContext("link");
+var CitationsContext = React9.createContext(void 0);
 var HEADING_CLASS = {
   1: "text-[16px] font-semibold",
   2: "text-[14.5px] font-semibold",
@@ -5441,7 +5730,7 @@ function InlineToken({ token }) {
   switch (token.type) {
     case "text": {
       const text = token;
-      return text.tokens ? /* @__PURE__ */ jsx(Inline, { tokens: text.tokens }) : /* @__PURE__ */ jsx(Fragment, { children: decode(text.text) });
+      return text.tokens ? /* @__PURE__ */ jsx(Inline, { tokens: text.tokens }) : /* @__PURE__ */ jsx(CitedText, { text: decode(text.text) });
     }
     case "escape":
       return /* @__PURE__ */ jsx(Fragment, { children: token.text });
@@ -5458,7 +5747,9 @@ function InlineToken({ token }) {
     case "link": {
       const link = token;
       const href = safeHref(link.href);
-      if (!href) return /* @__PURE__ */ jsx(Inline, { tokens: link.tokens });
+      if (!href) {
+        return /* @__PURE__ */ jsx(CitationsContext, { value: void 0, children: /* @__PURE__ */ jsx(Inline, { tokens: link.tokens }) });
+      }
       return (
         // The flag is set for everything under the anchor, so a nested `image`
         // token knows not to open one of its own — see {@link ProseImage}.
@@ -5480,9 +5771,34 @@ function InlineToken({ token }) {
       return /* @__PURE__ */ jsx(Fragment, { children: rawOf(token) });
   }
 }
+function CitedText({ text }) {
+  const citations = React9.use(CitationsContext);
+  const insideLink = React9.use(InsideLinkContext);
+  if (!citations || insideLink) return /* @__PURE__ */ jsx(Fragment, { children: text });
+  return /* @__PURE__ */ jsx(Fragment, { children: splitCitations(text).map((segment, index) => {
+    const target = "citation" in segment ? citations(segment.citation) : void 0;
+    const href = target ? webHref(target.href) : void 0;
+    if (!target || !href) return /* @__PURE__ */ jsx(React9.Fragment, { children: segment.text }, index);
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        title: target.label,
+        className: cn(
+          "mx-px whitespace-nowrap rounded-sm underline underline-offset-2",
+          focusOutlineClass
+        ),
+        children: segment.text
+      },
+      index
+    );
+  }) });
+}
 function ProseImage({ token }) {
-  const mode = React5.use(ProseImagesContext);
-  const insideLink = React5.use(InsideLinkContext);
+  const mode = React9.use(ProseImagesContext);
+  const insideLink = React9.use(InsideLinkContext);
   const src = proseImageUrl(token.href);
   if (!src) return /* @__PURE__ */ jsx(Fragment, { children: token.text });
   if (mode === "load") {
@@ -5508,7 +5824,7 @@ function ProseImage({ token }) {
     }
   );
 }
-var InsideLinkContext = React5.createContext(false);
+var InsideLinkContext = React9.createContext(false);
 function proseImageUrl(href) {
   const url = viewableUrl(href);
   return url && /^https?:/.test(url) ? url : void 0;
@@ -6359,6 +6675,7 @@ function pathLabel(url) {
   return segment && segment.length > 0 ? segment : url;
 }
 var FILE_BUTTON_ON_A_PHONE = "max-sm:grid max-sm:size-11 max-sm:place-items-center";
+var CARD_ACTION = "inline-flex shrink-0 items-center gap-1.5 rounded-md border border-border px-2 py-1 text-[12px] hover:bg-card max-sm:min-h-11 max-sm:px-3";
 function CopyButton({
   value,
   provide,
@@ -6473,7 +6790,7 @@ function useStuffFile(kind, value) {
   const location = useResultLocation();
   return location ? readStuffFile(kind, value, location.path.join(".")) : void 0;
 }
-function FileDownloadButton({ file }) {
+function FileDownloadButton({ file, labelled = false }) {
   const s = useFieldStrings();
   const location = useResultLocation();
   const resolve = useResolveUrl();
@@ -6502,7 +6819,7 @@ ${planned.url ?? planned.text}`;
   const failed = state === "failed";
   const label = s.downloadFile(planned.name);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
@@ -6521,12 +6838,17 @@ ${planned.url ?? planned.text}`;
         title: failed ? s.downloadFileFailed : label,
         ...failed ? { "aria-describedby": statusId } : {},
         className: cn(
-          "shrink-0 rounded p-0.5 hover:bg-card disabled:opacity-60",
+          labelled ? cn(CARD_ACTION, "disabled:opacity-60") : cn(
+            "shrink-0 rounded p-0.5 hover:bg-card disabled:opacity-60",
+            FILE_BUTTON_ON_A_PHONE
+          ),
           focusOutlineClass,
-          FILE_BUTTON_ON_A_PHONE,
           failed ? "text-destructive" : "text-muted-foreground hover:text-foreground"
         ),
-        children: state === "saving" ? /* @__PURE__ */ jsx(Loader2, { "aria-hidden": true, className: "size-3.5 animate-spin" }) : state === "saved" ? /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "size-3.5" }) : failed ? /* @__PURE__ */ jsx(TriangleAlert, { "aria-hidden": true, className: "size-3.5" }) : /* @__PURE__ */ jsx(Download, { "aria-hidden": true, className: "size-3.5" })
+        children: [
+          state === "saving" ? /* @__PURE__ */ jsx(Loader2, { "aria-hidden": true, className: "size-3.5 animate-spin" }) : state === "saved" ? /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "size-3.5" }) : failed ? /* @__PURE__ */ jsx(TriangleAlert, { "aria-hidden": true, className: "size-3.5" }) : /* @__PURE__ */ jsx(Download, { "aria-hidden": true, className: "size-3.5" }),
+          labelled && s.download
+        ]
       }
     ),
     /* @__PURE__ */ jsx("span", { id: statusId, role: "status", className: "sr-only", children: failed ? s.downloadFileFailed : "" }),
@@ -6556,7 +6878,32 @@ function previewableUrl(content, resolve) {
   const renderable = content.mimeType ? PREVIEWABLE_MIME_RE.test(content.mimeType) : PREVIEWABLE_EXT_RE.test(named);
   return renderable ? url : void 0;
 }
-function DocumentPreview({ url, name }) {
+function isPdfDocument(content, url) {
+  return content.mimeType ? /^application\/pdf\s*(;|$)/i.test(content.mimeType) : /\.pdf(\?|#|$)/i.test(content.filename ?? url);
+}
+function DocumentPreview({
+  url,
+  name,
+  pdf,
+  file,
+  whole
+}) {
+  const viewer = usePdfViewer();
+  const size = whole ? WHOLE_RESULT_FRAME : NESTED_FRAME;
+  if (pdf && viewer === "no") return /* @__PURE__ */ jsx(PdfUnavailable, { url, name, file });
+  if (pdf && viewer === "unknown") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        className: cn(
+          size,
+          "flex items-center justify-center rounded-lg border border-border bg-card/40"
+        ),
+        children: /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin text-muted-foreground" })
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     FocusFrame,
     {
@@ -6564,19 +6911,56 @@ function DocumentPreview({ url, name }) {
       title: name,
       loading: "lazy",
       referrerPolicy: "no-referrer",
-      className: "h-112 w-full rounded-lg border border-border bg-card/40"
+      className: cn(size, "rounded-lg border border-border bg-card/40")
     }
   );
 }
-function DocumentValue({ value }) {
+var NESTED_FRAME = "h-112 w-full";
+var WHOLE_RESULT_FRAME = "aspect-[1/1.414] max-h-[80vh] min-h-80 w-full";
+function PdfUnavailable({
+  url,
+  name,
+  file
+}) {
+  const s = useFieldStrings();
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 rounded-lg border border-border bg-card/40 px-3.5 py-3 sm:flex-row sm:items-center", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-2.5", children: [
+      /* @__PURE__ */ jsx(FileText, { "aria-hidden": true, className: "mt-0.5 size-4 shrink-0 text-muted-foreground" }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-0.5", children: [
+        /* @__PURE__ */ jsx("p", { title: name, className: "truncate text-[13px] font-medium text-foreground", children: name }),
+        /* @__PURE__ */ jsx("p", { className: "text-[12.5px] leading-relaxed text-muted-foreground", children: s.pdfViewerUnavailable })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: url,
+          target: "_blank",
+          rel: "noreferrer",
+          className: cn(CARD_ACTION, "text-foreground", focusOutlineClass),
+          children: [
+            /* @__PURE__ */ jsx(ExternalLink, { "aria-hidden": true, className: "size-3.5" }),
+            s.openInNewTab
+          ]
+        }
+      ),
+      file && /* @__PURE__ */ jsx(FileDownloadButton, { file, labelled: true })
+    ] })
+  ] });
+}
+function DocumentValue({ value, whole = false }) {
   const s = useFieldStrings();
   const resolve = useResolveUrl();
+  const isApp = useFieldPresentation() === "app";
   const [open, setOpen] = useState(false);
   const file = useStuffFile("document", value);
   const content = readDocumentContent(value);
   if (!content) return /* @__PURE__ */ jsx(Absent, {});
   const name = content.title ?? content.filename ?? fileLabel(content.url, content.filename, s);
   const preview = previewableUrl(content, resolve);
+  const pdf = preview !== void 0 && isPdfDocument(content, preview);
+  const opened = whole && isApp && pdf;
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-2.5", children: [
       /* @__PURE__ */ jsx(FileText, { "aria-hidden": true, className: "mt-0.5 size-4 shrink-0 text-muted-foreground" }),
@@ -6594,7 +6978,7 @@ function DocumentValue({ value }) {
         ),
         content.snippet && /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-[12px] leading-relaxed text-muted-foreground", children: content.snippet })
       ] }),
-      preview && /* @__PURE__ */ jsxs(
+      preview && !opened && /* @__PURE__ */ jsxs(
         "button",
         {
           type: "button",
@@ -6611,58 +6995,98 @@ function DocumentValue({ value }) {
         }
       )
     ] }),
-    preview && open && /* @__PURE__ */ jsx(DocumentPreview, { url: preview, name })
+    preview && (opened || open) && /* @__PURE__ */ jsx(DocumentPreview, { url: preview, name, pdf, file, whole: opened })
   ] });
 }
+var TILE_RENDITION_SIDE = 576;
+var CELL_RENDITION_HEIGHT = 80;
+var CELL_RENDITION_WIDTH = 256;
+function renditionWidth(place, content) {
+  const { width, height } = content;
+  const ratio = width !== void 0 && height !== void 0 && width > 0 && height > 0 ? width / height : void 0;
+  if (place === "tile") {
+    return ratio === void 0 ? TILE_RENDITION_SIDE : Math.ceil(TILE_RENDITION_SIDE * Math.max(1, ratio));
+  }
+  return ratio === void 0 ? CELL_RENDITION_WIDTH : Math.max(CELL_RENDITION_WIDTH, Math.ceil(CELL_RENDITION_HEIGHT * ratio));
+}
+function renditionUrl(content, whole, resolveRendition, width) {
+  return viewableUrl(resolveRendition?.(content.url, { width })) ?? whole;
+}
 function ImageValue({
   value,
   inGallery = false,
   inRow = false,
   compact = false,
-  downloadable = true
+  downloadable = true,
+  opener
 }) {
   const s = useFieldStrings();
+  const presentation = useFieldPresentation();
   const resolve = useResolveUrl();
+  const resolveRendition = useResolveRendition();
   const stuffFile = useStuffFile("image", value);
   const file = downloadable ? stuffFile : void 0;
+  const [viewing, setViewing] = useState(false);
+  const ownButton = useRef(null);
+  const frame = useRef(null);
   const content = readImageContent(value);
+  const src = content ? paintableUrl(content, resolve) : void 0;
+  if (viewing && src === void 0) setViewing(false);
   if (!content) return /* @__PURE__ */ jsx(Absent, {});
-  const src = paintableUrl(content, resolve);
-  return /* @__PURE__ */ jsxs("div", { className: inGallery ? "space-y-1" : "space-y-1.5", children: [
-    src ? (
-      // Wrapped in a link: the picture is a PREVIEW of a file, and clicking a
-      // preview to see the thing it previews is what a reader expects. The
-      // reference underneath is the other half - a picture with no URL beside
-      // it is a result you can look at and cannot use.
+  const place = inGallery ? "tile" : compact ? "cell" : void 0;
+  const drawn = src !== void 0 && place !== void 0 ? renditionUrl(content, src, resolveRendition, renditionWidth(place, content)) : src;
+  const name = src === void 0 ? "" : fileLabel(src, content.filename, s);
+  const fileLine = src !== void 0 && !compact && !(inGallery && presentation === "app");
+  const size = !inGallery && !compact && content.width && content.height ? { width: content.width, height: content.height } : void 0;
+  return /* @__PURE__ */ jsxs("div", { ref: frame, className: inGallery ? "space-y-1" : "space-y-1.5", children: [
+    src !== void 0 && drawn !== void 0 ? (
+      // A button, not a link: the picture opens in the viewer over the
+      // result. Enter and Space open it as a click does.
       /* @__PURE__ */ jsx(
-        "a",
+        "button",
         {
-          href: src,
-          target: "_blank",
-          rel: "noreferrer",
-          title: content.url,
+          ref: opener ? opener.ref : ownButton,
+          type: "button",
+          onClick: opener ? opener.open : () => setViewing(true),
+          "aria-label": s.viewImage(name),
+          "aria-haspopup": "dialog",
           className: cn(
-            inGallery || compact ? "inline-block" : "block w-full",
+            // BLOCK when the picture fills its column. A table cell's
+            // thumbnail sizes itself, and is 44px square at the least below
+            // `sm`, where it is tapped.
+            compact ? "inline-flex items-center justify-center align-top max-sm:min-h-11 max-sm:min-w-11" : "block w-full",
+            "cursor-zoom-in",
             focusOutlineInsetClass
           ),
           children: /* @__PURE__ */ jsx(
             LoadingImage,
             {
-              src,
+              src: drawn,
+              ...drawn !== src ? { fallbackSrc: src } : {},
               alt: content.caption ?? s.preview,
+              lazy: inGallery || compact,
+              ...size ? { size } : {},
+              ...inGallery ? (
+                // The tile's box is square before anything arrives, and the
+                // picture covers it once it does: tiles of one size, whatever
+                // the pictures' shapes, and nothing moves when one lands.
+                { box: "aspect-square w-full overflow-hidden" }
+              ) : compact ? { box: "h-10 min-w-10" } : {},
               className: cn(
-                inGallery && "block aspect-square w-full object-cover",
-                // A cell is one line tall. An image column rendered at the standalone
-                // height turns every row into a picture and the table into a
-                // slideshow, so a cell gets a thumbnail and the row's expansion gets
-                // the picture.
+                inGallery && "absolute inset-0 size-full object-cover",
+                // A cell is one line tall. An image column rendered at the
+                // standalone height turns every row into a picture and the
+                // table into a slideshow, so a cell gets a thumbnail and the
+                // row's expansion gets the picture.
                 compact && "h-10 w-auto rounded border border-border object-cover",
                 // On its own: the full width it is given, capped generously in
                 // height. `max-h-64` was a 256px thumbnail in a panel several
                 // times that tall — a generated report image is the RESULT here,
-                // not a decoration beside one, and it was unreadable at that size.
-                // `object-contain` keeps the aspect ratio when the cap bites.
-                !inGallery && !compact && "max-h-176 w-full rounded-lg border border-border object-contain"
+                // not a decoration beside one, and it was unreadable at that
+                // size. `object-contain` keeps the aspect ratio when the cap
+                // bites, and the payload's own width and height, when it states
+                // them, reserve the box before the picture arrives.
+                !inGallery && !compact && "h-auto max-h-176 w-full rounded-lg border border-border object-contain"
               )
             }
           )
@@ -6708,7 +7132,7 @@ function ImageValue({
         file
       }
     ),
-    src && !compact && /* @__PURE__ */ jsx("div", { className: inGallery ? "px-2.5" : void 0, children: /* @__PURE__ */ jsx(
+    fileLine && /* @__PURE__ */ jsx("div", { className: inGallery ? "px-2.5" : void 0, children: /* @__PURE__ */ jsx(
       FileRef,
       {
         url: src,
@@ -6727,6 +7151,24 @@ function ImageValue({
         ),
         children: content.caption
       }
+    ),
+    viewing && src !== void 0 && /* @__PURE__ */ jsx(
+      ImageViewer,
+      {
+        pictures: [
+          {
+            src,
+            name,
+            ...content.caption ? { caption: content.caption } : {},
+            actions: /* @__PURE__ */ jsx(FileActions, { copy: { url: src, storageUrl: content.url }, file })
+          }
+        ],
+        index: 0,
+        onIndexChange: () => {
+        },
+        onClose: () => setViewing(false),
+        returnFocus: () => ownButton.current ?? frame.current?.querySelector("a[href], button")
+      }
     )
   ] });
 }
@@ -6776,32 +7218,59 @@ function RecordSummary({ field, value }) {
   }
   return /* @__PURE__ */ jsx(LeafValue, { field: naming, value: ownProp(value, naming.name), compact: true });
 }
-function LoadingImage({ src, alt, className }) {
+function LoadingImage({
+  src,
+  fallbackSrc,
+  alt,
+  className,
+  box,
+  size,
+  lazy = false
+}) {
   const [state, setState] = useState("loading");
-  const [current, setCurrent] = useState(src);
-  if (current !== src) {
-    setCurrent(src);
-    setState("loading");
+  const [current, setCurrent] = useState({ src, fallbackSrc });
+  const [shown, setShown] = useState(src);
+  if (current.src !== src || current.fallbackSrc !== fallbackSrc) {
+    const next = current.src !== src ? src : shown === current.fallbackSrc ? fallbackSrc ?? src : shown;
+    setCurrent({ src, fallbackSrc });
+    if (next !== shown) {
+      setShown(next);
+      setState("loading");
+    }
   }
-  return /* @__PURE__ */ jsxs("span", { className: "relative block", children: [
+  const reserved = box !== void 0 || size !== void 0;
+  return /* @__PURE__ */ jsxs("span", { className: cn("relative block", box), children: [
     state === "loading" && /* @__PURE__ */ jsx(
       "span",
       {
         role: "status",
         "aria-label": alt,
-        className: "absolute inset-0 flex items-center justify-center rounded-lg border border-border bg-card/40",
+        className: cn(
+          "absolute inset-0 flex items-center justify-center",
+          // A box the caller drew is the frame; anything else gets one.
+          box ? "bg-muted/40" : "rounded-lg border border-border bg-card/40"
+        ),
         children: /* @__PURE__ */ jsx(Loader2, { "aria-hidden": true, className: "size-4 animate-spin text-muted-foreground" })
       }
     ),
     /* @__PURE__ */ jsx(
       "img",
       {
-        src,
+        src: shown,
         alt,
         referrerPolicy: "no-referrer",
+        decoding: "async",
+        ...lazy ? { loading: "lazy" } : {},
+        ...size ? { width: size.width, height: size.height } : {},
         onLoad: () => setState("done"),
-        onError: () => setState("done"),
-        className: cn(className, state === "loading" && "min-h-40 opacity-0")
+        onError: () => {
+          if (fallbackSrc !== void 0 && shown !== fallbackSrc) setShown(fallbackSrc);
+          else setState("done");
+        },
+        className: cn(
+          className,
+          state === "loading" && (reserved ? "opacity-0" : "min-h-40 opacity-0")
+        )
       }
     )
   ] });
@@ -7264,13 +7733,65 @@ function ScalarLines({ field, items }) {
   return /* @__PURE__ */ jsx("div", { className: "divide-y divide-border/60 overflow-hidden rounded-lg border border-border", children: items.map((item, index) => /* @__PURE__ */ jsx("div", { className: "bg-card/40 px-3 py-1.5", children: /* @__PURE__ */ jsx(LeafValue, { field, value: item }) }, index)) });
 }
 function ImageGallery({ items }) {
+  const s = useFieldStrings();
   const resolve = useResolveUrl();
-  const anyViewable = items.some((item) => {
+  const [viewing, setViewing] = useState(null);
+  const tiles = useRef(/* @__PURE__ */ new Map());
+  const gallery = useRef(null);
+  const pictures = items.flatMap((item, entry) => {
     const content = readImageContent(item);
-    return content ? paintableUrl(content, resolve) !== void 0 : false;
+    const src = content ? paintableUrl(content, resolve) : void 0;
+    return content && src !== void 0 ? [{ entry, item, content, src }] : [];
   });
-  if (!anyViewable) return /* @__PURE__ */ jsx(FileRows, { items, kind: "image" });
-  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(140px,1fr))] gap-2", children: items.map((item, index) => /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg border border-border bg-card/40", children: /* @__PURE__ */ jsx(ResultAt, { segment: String(index), children: /* @__PURE__ */ jsx(ImageValue, { value: item, inGallery: true }) }) }, index)) });
+  const shown = viewing ? pictures.findIndex((picture) => picture.entry === viewing.entry) : -1;
+  if (viewing && shown === -1) setViewing(null);
+  const returnFocus = (opener) => () => {
+    const first = [...tiles.current.entries()].sort(([a], [b]) => a - b)[0]?.[1];
+    return tiles.current.get(opener) ?? first ?? gallery.current;
+  };
+  const frame = (children) => /* @__PURE__ */ jsx("div", { ref: gallery, tabIndex: -1, className: "outline-none", children });
+  if (pictures.length === 0) return frame(/* @__PURE__ */ jsx(FileRows, { items, kind: "image" }));
+  return frame(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(140px,1fr))] gap-2", children: items.map((item, index) => /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg border border-border bg-card/40", children: /* @__PURE__ */ jsx(ResultAt, { segment: String(index), children: /* @__PURE__ */ jsx(
+        ImageValue,
+        {
+          value: item,
+          inGallery: true,
+          opener: {
+            open: () => setViewing({ entry: index, opener: index }),
+            ref: (button) => {
+              if (button) tiles.current.set(index, button);
+              else tiles.current.delete(index);
+            }
+          }
+        }
+      ) }) }, index)) }),
+      viewing && shown !== -1 && /* @__PURE__ */ jsx(
+        ImageViewer,
+        {
+          pictures: pictures.map(({ entry, item, content, src }) => ({
+            src,
+            name: fileLabel(src, content.filename, s),
+            ...content.caption ? { caption: content.caption } : {},
+            actions: /* @__PURE__ */ jsx(ResultAt, { segment: String(entry), children: /* @__PURE__ */ jsx(ViewerFileActions, { value: item, src }) })
+          })),
+          index: shown,
+          onIndexChange: (position) => {
+            const picture = pictures[position];
+            if (picture) setViewing({ entry: picture.entry, opener: viewing.opener });
+          },
+          onClose: () => setViewing(null),
+          returnFocus: returnFocus(viewing.opener)
+        }
+      )
+    ] })
+  );
+}
+function ViewerFileActions({ value, src }) {
+  const file = useStuffFile("image", value);
+  const content = readImageContent(value);
+  return /* @__PURE__ */ jsx(FileActions, { copy: { url: src, ...content ? { storageUrl: content.url } : {} }, file });
 }
 function FileRows({ items, kind }) {
   return /* @__PURE__ */ jsx("div", { className: "divide-y divide-border overflow-hidden rounded-lg border border-border", children: items.map((item, index) => /* @__PURE__ */ jsx("div", { className: "bg-card/40 px-3.5 py-2", children: /* @__PURE__ */ jsx(ResultAt, { segment: String(index), children: kind === "document" ? /* @__PURE__ */ jsx(DocumentValue, { value: item }) : /* @__PURE__ */ jsx(ImageValue, { value: item, inRow: true }) }) }, index)) });
@@ -7373,6 +7894,64 @@ function VerdictValue({ reading, prominent }) {
     reading.measure !== void 0 && /* @__PURE__ */ jsx("p", { className: "text-[12.5px] text-muted-foreground", children: reading.measure })
   ] });
 }
+function SearchResultValue({ content }) {
+  const s = useFieldStrings();
+  const headingId = useId();
+  const citations = (citation) => {
+    const source = citedSource(content, citation);
+    return source?.href ? { href: source.href, label: source.title ?? source.address } : void 0;
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    content.answer.trim() === "" ? /* @__PURE__ */ jsx(Absent, {}) : /* @__PURE__ */ jsx(Markdown, { text: content.answer, citations }),
+    content.sources.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsx("p", { id: headingId, className: "text-[12px] font-medium text-muted-foreground", children: s.searchSources }),
+      /* @__PURE__ */ jsx(
+        "ul",
+        {
+          "aria-labelledby": headingId,
+          className: "grid grid-cols-[max-content_minmax(0,1fr)] gap-x-2 gap-y-1",
+          children: content.sources.map((source) => /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: "col-span-2 grid grid-cols-subgrid items-baseline",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "font-mono text-[11px] tabular-nums text-muted-foreground", children: source.citations.map((citation) => `[${citation}]`).join("") }),
+                /* @__PURE__ */ jsx(SearchSource, { source })
+              ]
+            },
+            source.citations[0]
+          ))
+        }
+      )
+    ] })
+  ] });
+}
+function SearchSource({ source }) {
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "text-[13px] leading-5 wrap-anywhere text-foreground",
+          source.href && "underline underline-offset-2"
+        ),
+        children: source.title ?? source.address
+      }
+    ),
+    source.host && /* @__PURE__ */ jsx("span", { className: "block text-[12px] leading-4 text-muted-foreground wrap-anywhere", children: source.host })
+  ] });
+  if (!source.href) return /* @__PURE__ */ jsx("div", { className: "min-w-0", children: body });
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: source.href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: cn("block min-w-0 rounded-sm max-sm:py-1.5", focusOutlineClass),
+      children: body
+    }
+  );
+}
 function isLongText(value) {
   return typeof value === "string" && (value.includes("\n") || value.length > CELL_LENGTH_LIMIT);
 }
@@ -7457,6 +8036,16 @@ function ResultNode({
       /* @__PURE__ */ jsx(VerdictValue, { reading, prominent: whole })
     ] });
   }
+  const search = isApp && isNativeSearchResultNode(field) ? readSearchResultContent(unwrapped) : void 0;
+  if (search) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      search.answer.trim() === "" ? header : /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: header }),
+        /* @__PURE__ */ jsx(CopyButton, { value: search.answer, label: s.copyText })
+      ] }),
+      /* @__PURE__ */ jsx(SearchResultValue, { content: search })
+    ] });
+  }
   switch (field.kind) {
     case "object": {
       const memberValue = (child) => typeof unwrapped === "object" && unwrapped !== null ? ownProp(unwrapped, child.name) : void 0;
@@ -7542,9 +8131,12 @@ function ResultNode({
         ) : isApp && nativeVerdictOf(field.item) ? (
           // Verdicts in `app`, one per line, each drawn by the verdict arm.
           /* @__PURE__ */ jsx("div", { className: "divide-y divide-border/60 overflow-hidden rounded-lg border border-border", children: items.map((item, index) => /* @__PURE__ */ jsx("div", { className: "bg-card/40 px-3 py-1.5", children: /* @__PURE__ */ jsx(ResultAt, { segment: String(index), children: /* @__PURE__ */ jsx(ResultField, { field: field.item, value: item, depth: depth + 1, hideLabel: true }) }) }, index)) })
-        ) : columns ? (
+        ) : columns && !(isApp && isNativeSearchResultNode(field.item)) ? (
           // Same shape every row: the labels are column headers, not per-row
-          // labels. See `ObjectTable`.
+          // labels. See `ObjectTable`. A list of search results in `app` is
+          // the exception: a row would hide each answer's citations and its
+          // sources until it is opened, so each search takes a card of its
+          // own below and is drawn by the search arm. `studio` keeps the table.
           /* @__PURE__ */ jsx(
             ObjectTable,
             {
@@ -7598,7 +8190,7 @@ function ResultNode({
           /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: header }),
           /* @__PURE__ */ jsx(CopyButton, { value: copyText, label: s.copyText })
         ] }),
-        isApp && field.kind === "text" && isLongText(unwrapped) ? /* @__PURE__ */ jsx(Markdown, { text: unwrapped }) : /* @__PURE__ */ jsx(LeafValue, { field, value })
+        isApp && field.kind === "text" && isLongText(unwrapped) ? /* @__PURE__ */ jsx(Markdown, { text: unwrapped }) : field.kind === "document" && whole ? /* @__PURE__ */ jsx(DocumentValue, { value: unwrapped, whole: true }) : /* @__PURE__ */ jsx(LeafValue, { field, value })
       ] });
   }
   return null;
@@ -7859,6 +8451,6 @@ function pdfFileName(field, value, baseName) {
   return name === void 0 ? "" : name.replace(/\.[^.]+$/, "");
 }
 
-export { BooleanField, ConceptPill, DEFAULT_FIELD_STRINGS, DateField, DocumentField, EN_FIELD_STRINGS, EnumField, FIELD_STRINGS_BY_LOCALE, FR_FIELD_STRINGS, FieldDomIdProvider, FieldPresentationProvider, FieldRenderer, FieldShell, FieldStringsProvider, FilePicker, FilePickerEntry, FillWithExample, HtmlPreview, ImageField, JsonView, ListField, Markdown, MethodForm, NumberField, ObjectField, OptionalToggle, PdfDownloadButton, ProseField, ResultEnvProvider, ResultField, ResultRoot, SUPPORTED_LOCALES, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, StuffViewer, Switch, TextField, ToggleGroup, ToggleGroupItem, UnknownField, checkedAccentClass, cn, fieldControlClass, fieldStringsFor, focusOutlineClass, humanizeFieldName, linkTextClass, renderHtmlPdf, resolveHtmlStorageUrls, saveInBrowser, selectedBorderClass, selectedFillClass, selectedFillStrongClass, useFieldDomId, useFieldPresentation, useFieldStrings, useMethodForm, useProseImages, useResolveShareUrl, useResolveUrl, useResolvedUrl };
-//# sourceMappingURL=chunk-NA7SIQOH.js.map
-//# sourceMappingURL=chunk-NA7SIQOH.js.map
+export { BooleanField, ConceptPill, DEFAULT_FIELD_STRINGS, DateField, DocumentField, EN_FIELD_STRINGS, EnumField, FIELD_STRINGS_BY_LOCALE, FR_FIELD_STRINGS, FieldDomIdProvider, FieldPresentationProvider, FieldRenderer, FieldShell, FieldStringsProvider, FilePicker, FilePickerEntry, FillWithExample, HtmlPreview, ImageField, JsonView, ListField, Markdown, MethodForm, NumberField, ObjectField, OptionalToggle, PdfDownloadButton, ProseField, ResultEnvProvider, ResultField, ResultRoot, SUPPORTED_LOCALES, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, StuffViewer, Switch, TextField, ToggleGroup, ToggleGroupItem, UnknownField, checkedAccentClass, cn, fieldControlClass, fieldStringsFor, focusOutlineClass, humanizeFieldName, linkTextClass, renderHtmlPdf, resolveHtmlStorageUrls, saveInBrowser, selectedBorderClass, selectedFillClass, selectedFillStrongClass, useFieldDomId, useFieldPresentation, useFieldStrings, useMethodForm, useProseImages, useResolveRendition, useResolveShareUrl, useResolveUrl, useResolvedUrl };
+//# sourceMappingURL=chunk-AZIUFSIQ.js.map
+//# sourceMappingURL=chunk-AZIUFSIQ.js.map