@pipelex/mthds-form 0.19.0 → 0.21.0

package/dist/{chunk-QCGIH3WY.js → chunk-3XDR2C4I.js}

@@ -1,26 +1,30 @@
 import { planFileSave, planStuffSave, splitFileName, typedFileStem } from './chunk-ICUEHNEH.js';
 import { seedInputs, closeOptionalStructures, openOptionalStructures } from './chunk-VH5CDQDR.js';
+import { sourceFileValue, roomForChosenFiles, addChosenFiles, chosenFilesAdded } from './chunk-EQJBM3NS.js';
 import { readStuffFile } from './chunk-RRTI7AIR.js';
-import { setValueAtPath, apiInputsFromRunValues } from './chunk-MEXWXLR7.js';
+import { setValueAtPath, apiInputsFromRunValues, sameRunValues, runValuesFromInputs } from './chunk-ZX52CQJ4.js';
 import { viewableUrl, isNativeDateNode, isNativeHtmlNode, readHtmlContent, isNativeCompositeNode, readCompositeContent, isNativeValueNode, readDateContent, formatDateContent, readImageContent, readDataUrl, readDocumentContent } from './chunk-CM4KVG53.js';
 import { buildRunFields } from './chunk-ZB4RYUKV.js';
 import { conceptCategory } from './chunk-FABY3DEY.js';
-import { acceptLabel, acceptMap, isAcceptedFile, formatOfFilename, DOCUMENT_FORMATS, IMAGE_FORMATS } from './chunk-XCO6GTEC.js';
+import { acceptLabel, acceptMap, isAcceptedFile, normalizeMimeType, formatOfFilename, DOCUMENT_FORMATS, IMAGE_FORMATS } from './chunk-XCO6GTEC.js';
 import { shownAsOptional, isFoldedOptional, anyOptionalStructureOpen, isOptionalStructure, computeReadiness, optionalStructureOpen, mustBeFilled, fieldFilled, isFilled } from './chunk-XO5OENNF.js';
 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, Loader2, ImageOff, Upload, Link2, EyeOff, Eye, X, Minus, Plus, Trash2, 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 } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as React2 from 'react';
-import { createContext, use, useId, useMemo, useContext, useState, useRef, useCallback, useEffect, Fragment as Fragment$1, useLayoutEffect } from 'react';
+import * as React5 from 'react';
+import { createContext, use, useId, useMemo, useContext, useState, useEffect, useRef, useLayoutEffect, useCallback, Fragment as Fragment$1 } from 'react';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import { useDropzone } from 'react-dropzone';
-import * as SelectPrimitive from '@radix-ui/react-select';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 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 * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { marked } from 'marked';
 
@@ -107,7 +111,7 @@ function fieldLabel(title, name, presentation) {
   if (title !== void 0) return title;
   return presentation === "app" ? humanizeFieldName(name) : name;
 }
-var Switch = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Switch = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SwitchPrimitives.Root,
   {
     className: cn(
@@ -186,12 +190,38 @@ function BooleanField({ field, value, onChange, id, disabled }) {
   );
 }
 
+// src/react/locales/calendar.ts
+function dayNumber(date) {
+  return Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()) / 864e5;
+}
+function calendarDaysBefore(date, now = /* @__PURE__ */ new Date()) {
+  return dayNumber(now) - dayNumber(date);
+}
+function inCurrentYear(date, now = /* @__PURE__ */ new Date()) {
+  return date.getFullYear() === now.getFullYear();
+}
+
 // src/react/locales/en.ts
 function formatBytes(bytes) {
   if (bytes < 1024) return bytes === 1 ? "1 byte" : `${bytes} bytes`;
   if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
+var AND = new Intl.ListFormat("en-GB", { type: "conjunction" });
+var OR = new Intl.ListFormat("en-GB", { type: "disjunction" });
+var TIME = new Intl.DateTimeFormat("en-GB", { hour: "2-digit", minute: "2-digit" });
+var DAY = new Intl.DateTimeFormat("en-GB", { day: "numeric", month: "short" });
+var DAY_YEAR = new Intl.DateTimeFormat("en-GB", {
+  day: "numeric",
+  month: "short",
+  year: "numeric"
+});
+function formatFileDate(date) {
+  const days = calendarDaysBefore(date);
+  if (days === 0) return `Today, ${TIME.format(date)}`;
+  if (days === 1) return "Yesterday";
+  return inCurrentYear(date) ? DAY.format(date) : DAY_YEAR.format(date);
+}
 var EN_FIELD_STRINGS = {
   optionalBadge: "optional",
   selectPlaceholder: "Select\u2026",
@@ -252,7 +282,61 @@ var EN_FIELD_STRINGS = {
   optionalInputsCount: (count) => count === 1 ? "1 optional input" : `${count} optional inputs`,
   requiredField: "Required",
   incompleteField: "Incomplete: fill in its required fields",
-  uploadFailed: "This file could not be uploaded. Try again."
+  uploadFailed: "This file could not be uploaded. Try again.",
+  chooseFromSource: "Choose from your team's files",
+  chooseFromSourceAria: (label) => label ? `Choose from your team's files for ${label}` : "Choose from your team's files",
+  filePickerTitle: "Your team's files",
+  filePickerTakes: (formats) => `Showing ${AND.format(formats)} files, which this input takes`,
+  filePickerSearch: "Search files",
+  filePickerSearchPlaceholder: "Search by name",
+  filePickerScope: "Whose files",
+  filePickerMine: "Mine",
+  filePickerEveryone: "Everyone",
+  filePickerUse: (count, name) => {
+    if (count === 0) return "Choose a file";
+    if (count === 1 && name) return `Use ${name}`;
+    return count === 1 ? "Use 1 file" : `Use ${count} files`;
+  },
+  filePickerLoading: "Loading your files\u2026",
+  filePickerFailed: "Couldn't load your files.",
+  filePickerNoMatch: "No files match.",
+  filePickerClearSearch: "Clear search",
+  filePickerNoneTeam: (formats) => `Your team has no ${OR.format(formats)} files yet.`,
+  filePickerNoneMine: (formats) => `You haven't added or made any ${OR.format(formats)} files yet.`,
+  filePickerShowEveryone: "Show everyone's",
+  filePickerUpload: "Upload a file",
+  filePickerShown: (count) => count === 1 ? "1 file" : `${count} files`,
+  testFile: "Test file",
+  fileSize: formatBytes,
+  fileDate: formatFileDate,
+  fillWithExample: "Fill with an example",
+  examplesTitle: "Examples",
+  examplesHint: "Choosing one fills the form. Nothing runs until you run it.",
+  examplesLoading: "Loading the examples\u2026",
+  examplesFailed: "Couldn't load the examples.",
+  examplesNone: "No examples yet. Run it, then save the run as an example.",
+  examplesShown: (count) => count === 1 ? "1 example" : `${count} examples`,
+  replaceEnteredTitle: "Replace what you entered?",
+  replaceEnteredDescription: (name) => `Filling the form with \u201C${name}\u201D replaces every value in it.`,
+  replaceEnteredConfirm: "Replace",
+  exampleActions: (name) => `Actions for ${name}`,
+  renameExample: "Rename",
+  deleteExample: "Delete",
+  renameExampleTitle: "Rename the example",
+  exampleName: "Name",
+  renaming: "Renaming\u2026",
+  renameFailed: "Couldn't rename the example.",
+  deleteExampleTitle: (name) => `Delete \u201C${name}\u201D?`,
+  deleteExampleDescription: "This cannot be undone.",
+  deleting: "Deleting\u2026",
+  deleteFailed: "Couldn't delete the example.",
+  close: "Close",
+  cancel: "Cancel",
+  save: "Save",
+  tryAgain: "Try again",
+  showMore: "Show more",
+  loadingMore: "Loading more\u2026",
+  loadMoreFailed: "Couldn't load more."
 };
 
 // src/react/locales/fr.ts
@@ -270,6 +354,21 @@ var MEGABYTES = new Intl.NumberFormat("fr-FR", {
   unitDisplay: "short",
   maximumFractionDigits: 1
 });
+var AND2 = new Intl.ListFormat("fr", { type: "conjunction" });
+var OR2 = new Intl.ListFormat("fr", { type: "disjunction" });
+var TIME2 = new Intl.DateTimeFormat("fr-FR", { hour: "2-digit", minute: "2-digit" });
+var DAY2 = new Intl.DateTimeFormat("fr-FR", { day: "numeric", month: "short" });
+var DAY_YEAR2 = new Intl.DateTimeFormat("fr-FR", {
+  day: "numeric",
+  month: "short",
+  year: "numeric"
+});
+function formatFileDate2(date) {
+  const days = calendarDaysBefore(date);
+  if (days === 0) return `Aujourd\u2019hui, ${TIME2.format(date)}`;
+  if (days === 1) return "Hier";
+  return inCurrentYear(date) ? DAY2.format(date) : DAY_YEAR2.format(date);
+}
 function plural(count, one, other) {
   return PLURALS.select(count) === "one" ? one : other;
 }
@@ -338,7 +437,61 @@ var FR_FIELD_STRINGS = {
   optionalInputsCount: (count) => `${count} ${plural(count, "entr\xE9e facultative", "entr\xE9es facultatives")}`,
   requiredField: "Obligatoire",
   incompleteField: "Incomplet\xA0: remplissez ses champs obligatoires",
-  uploadFailed: "Ce fichier n\u2019a pas pu \xEAtre envoy\xE9. R\xE9essayez."
+  uploadFailed: "Ce fichier n\u2019a pas pu \xEAtre envoy\xE9. R\xE9essayez.",
+  chooseFromSource: "Choisir parmi les fichiers de l\u2019\xE9quipe",
+  chooseFromSourceAria: (label) => label ? `Choisir parmi les fichiers de l\u2019\xE9quipe pour ${label}` : "Choisir parmi les fichiers de l\u2019\xE9quipe",
+  filePickerTitle: "Les fichiers de l\u2019\xE9quipe",
+  filePickerTakes: (formats) => `Fichiers ${AND2.format(formats)} uniquement, ceux que cette entr\xE9e accepte`,
+  filePickerSearch: "Rechercher des fichiers",
+  filePickerSearchPlaceholder: "Rechercher par nom",
+  filePickerScope: "Quels fichiers",
+  filePickerMine: "Les miens",
+  filePickerEveryone: "Toute l\u2019\xE9quipe",
+  filePickerUse: (count, name) => {
+    if (count === 0) return "Choisissez un fichier";
+    if (count === 1 && name) return `Utiliser ${name}`;
+    return `Utiliser ${count} ${plural(count, "fichier", "fichiers")}`;
+  },
+  filePickerLoading: "Chargement de vos fichiers\u2026",
+  filePickerFailed: "Impossible de charger vos fichiers.",
+  filePickerNoMatch: "Aucun fichier ne correspond.",
+  filePickerClearSearch: "Effacer la recherche",
+  filePickerNoneTeam: (formats) => `L\u2019\xE9quipe n\u2019a encore aucun fichier ${OR2.format(formats)}.`,
+  filePickerNoneMine: (formats) => `Vous n\u2019avez encore ni ajout\xE9 ni cr\xE9\xE9 de fichier ${OR2.format(formats)}.`,
+  filePickerShowEveryone: "Voir ceux de l\u2019\xE9quipe",
+  filePickerUpload: "Envoyer un fichier",
+  filePickerShown: (count) => `${count} ${plural(count, "fichier", "fichiers")}`,
+  testFile: "Fichier de test",
+  fileSize: formatBytes2,
+  fileDate: formatFileDate2,
+  fillWithExample: "Remplir avec un exemple",
+  examplesTitle: "Exemples",
+  examplesHint: "En choisir un remplit le formulaire. Rien ne s\u2019ex\xE9cute avant que vous le lanciez.",
+  examplesLoading: "Chargement des exemples\u2026",
+  examplesFailed: "Impossible de charger les exemples.",
+  examplesNone: "Aucun exemple pour le moment. Lancez-le, puis enregistrez l\u2019ex\xE9cution comme exemple.",
+  examplesShown: (count) => `${count} ${plural(count, "exemple", "exemples")}`,
+  replaceEnteredTitle: "Remplacer ce que vous avez saisi\xA0?",
+  replaceEnteredDescription: (name) => `Remplir le formulaire avec \xAB\xA0${name}\xA0\xBB remplace toutes ses valeurs.`,
+  replaceEnteredConfirm: "Remplacer",
+  exampleActions: (name) => `Actions pour ${name}`,
+  renameExample: "Renommer",
+  deleteExample: "Supprimer",
+  renameExampleTitle: "Renommer l\u2019exemple",
+  exampleName: "Nom",
+  renaming: "Renommage\u2026",
+  renameFailed: "Impossible de renommer l\u2019exemple.",
+  deleteExampleTitle: (name) => `Supprimer \xAB\xA0${name}\xA0\xBB\xA0?`,
+  deleteExampleDescription: "Cette action est irr\xE9versible.",
+  deleting: "Suppression\u2026",
+  deleteFailed: "Impossible de supprimer l\u2019exemple.",
+  close: "Fermer",
+  cancel: "Annuler",
+  save: "Enregistrer",
+  tryAgain: "R\xE9essayer",
+  showMore: "Afficher plus",
+  loadingMore: "Chargement de la suite\u2026",
+  loadMoreFailed: "Impossible de charger la suite."
 };
 
 // src/react/locales/index.ts
@@ -413,11 +566,20 @@ function FieldShell({
   ] });
 }
 
+// src/react/brand-ink.ts
+var brandInkClass = "text-[color:var(--brand,var(--primary,hsl(240_5.9%_10%)))]";
+var brandFillInkClass = "text-[color:var(--brand-muted-foreground,var(--brand,var(--primary,hsl(240_5.9%_10%))))]";
+var brandFillClass = "bg-[color:var(--brand-muted,color-mix(in_oklab,var(--primary,hsl(240_5.9%_10%))_10%,transparent))]";
+var brandFillSelectedClass = "data-[state=on]:bg-[color:var(--brand-muted,color-mix(in_oklab,var(--primary,hsl(240_5.9%_10%))_10%,transparent))]";
+var brandFillStrongClass = "bg-[color:var(--brand-muted,color-mix(in_oklab,var(--primary,hsl(240_5.9%_10%))_15%,transparent))]";
+var brandFocusClass = "focus-visible:border-[color:var(--brand,var(--primary,hsl(240_5.9%_10%)))] focus-visible:ring-[color:color-mix(in_oklab,var(--brand,var(--primary,hsl(240_5.9%_10%)))_40%,transparent)]";
+
 // src/react/field-styles.ts
 var fieldControlClass = cn(
   "w-full rounded-md border border-border bg-input text-sm text-foreground",
   "placeholder:text-muted-foreground/70 transition-colors",
-  "focus-visible:outline-hidden focus-visible:border-primary focus-visible:ring-1 focus-visible:ring-primary/40",
+  "focus-visible:outline-hidden focus-visible:ring-1",
+  brandFocusClass,
   "disabled:cursor-not-allowed disabled:opacity-50",
   "aria-invalid:border-destructive aria-invalid:ring-destructive/30"
 );
@@ -457,6 +619,622 @@ function encodedFileSummary(url, strings) {
   const format = [...DOCUMENT_FORMATS, ...IMAGE_FORMATS].find((known) => known.mimeType === view.mediaType)?.label ?? view.mediaType;
   return strings.encodedFileSummary(format, view.bytes);
 }
+function startFor(key) {
+  return { key, status: key === null ? "idle" : "loading", items: [], cursor: null, more: "idle" };
+}
+function useSourcePages(load, key) {
+  const [stored, setState] = useState(() => startFor(key));
+  if (stored.key !== key) setState(startFor(key));
+  const state = stored.key === key ? stored : startFor(key);
+  const loadRef = useRef(load);
+  const inFlight = useRef(null);
+  const followed = useRef(/* @__PURE__ */ new Set());
+  useEffect(() => {
+    loadRef.current = load;
+  });
+  const read = useCallback(
+    (forKey, cursor, phase) => {
+      inFlight.current?.abort();
+      const controller = new AbortController();
+      inFlight.current = controller;
+      const seen = new Set(phase === "first" ? [] : followed.current);
+      const follow = (from) => {
+        if (from !== void 0) seen.add(from);
+        let page;
+        try {
+          page = Promise.resolve(loadRef.current(from, controller.signal));
+        } catch (error) {
+          page = Promise.reject(error);
+        }
+        page.then(
+          (answer) => {
+            if (inFlight.current !== controller) return;
+            const offered = answer.nextCursor ?? null;
+            const next = offered !== null && seen.has(offered) ? null : offered;
+            const items = [...answer.items];
+            if (items.length === 0 && next !== null) {
+              follow(next);
+              return;
+            }
+            inFlight.current = null;
+            followed.current = seen;
+            setState(
+              (previous) => previous.key !== forKey ? previous : {
+                key: forKey,
+                status: "ready",
+                items: phase === "first" ? items : [...previous.items, ...items],
+                cursor: next,
+                more: "idle"
+              }
+            );
+          },
+          () => {
+            if (inFlight.current !== controller) return;
+            inFlight.current = null;
+            setState(
+              (previous) => previous.key !== forKey ? previous : phase === "first" ? { key: forKey, status: "failed", items: [], cursor: null, more: "idle" } : { ...previous, more: "failed" }
+            );
+          }
+        );
+      };
+      follow(cursor);
+    },
+    []
+  );
+  useEffect(() => {
+    if (key === null) {
+      inFlight.current?.abort();
+      inFlight.current = null;
+      return;
+    }
+    read(key, void 0, "first");
+  }, [key, read]);
+  useEffect(
+    () => () => {
+      inFlight.current?.abort();
+      inFlight.current = null;
+    },
+    []
+  );
+  const loadMore = useCallback(() => {
+    if (state.status !== "ready" || state.cursor === null || state.more === "loading") return;
+    setState((previous) => ({ ...previous, more: "loading" }));
+    read(state.key, state.cursor, "more");
+  }, [state.key, state.status, state.cursor, state.more, read]);
+  const retry = useCallback(() => {
+    if (state.status === "failed") {
+      setState((previous) => startFor(previous.key));
+      read(state.key, void 0, "first");
+    } else if (state.more === "failed") {
+      loadMore();
+    }
+  }, [state.key, state.status, state.more, read, loadMore]);
+  const updateItems = useCallback((update) => {
+    setState((previous) => ({ ...previous, items: update(previous.items) }));
+  }, []);
+  const drained = state.status === "ready" && state.items.length === 0 && state.cursor !== null && state.more === "idle";
+  useEffect(() => {
+    if (drained) loadMore();
+  }, [drained, loadMore]);
+  return {
+    status: state.status,
+    items: state.items,
+    hasMore: state.cursor !== null,
+    empty: state.status === "ready" && state.items.length === 0 && state.cursor === null,
+    more: state.more,
+    loadMore,
+    retry,
+    updateItems
+  };
+}
+function DimRows({ count = 4 }) {
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", "data-dim-rows": true, className: "divide-y divide-border", children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsxs("div", { className: "flex min-h-16 items-center gap-3 px-4 py-3 opacity-60", children: [
+    /* @__PURE__ */ jsx("span", { className: "size-8 shrink-0 rounded-md bg-muted" }),
+    /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "h-3.5 w-2/5 rounded-sm bg-muted" }),
+      /* @__PURE__ */ jsx("span", { className: "h-3 w-3/5 rounded-sm bg-muted" })
+    ] })
+  ] }, index)) });
+}
+function ListAction({
+  onClick,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "inline-flex min-h-11 items-center justify-center rounded-md border border-border px-4 text-[14px] text-foreground transition-colors hover:bg-muted sm:min-h-9",
+        className
+      ),
+      children
+    }
+  );
+}
+function ListMessage({ text, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3 px-4 py-10 text-center", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-[14px] text-foreground", children: text }),
+    children && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-center gap-2", children })
+  ] });
+}
+function MoreFooter({ pages }) {
+  const s = useFieldStrings();
+  if (pages.more === "failed") {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-3 px-4 py-4", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-[13px] text-muted-foreground", children: s.loadMoreFailed }),
+      /* @__PURE__ */ jsx(ListAction, { onClick: pages.retry, children: s.tryAgain })
+    ] });
+  }
+  if (pages.more === "loading") {
+    return /* @__PURE__ */ jsxs("p", { className: "flex items-center justify-center gap-2 px-4 py-4 text-[13px] text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": "true" }),
+      s.loadingMore
+    ] });
+  }
+  if (!pages.hasMore) return null;
+  return /* @__PURE__ */ jsx("div", { className: "flex justify-center px-4 py-4", children: /* @__PURE__ */ jsx(ListAction, { onClick: pages.loadMore, children: s.showMore }) });
+}
+var Dialog = DialogPrimitive.Root;
+var DialogClose = DialogPrimitive.Close;
+function closeAutoFocus(onCloseAutoFocus, returnFocus) {
+  return (event) => {
+    onCloseAutoFocus?.(event);
+    if (event.defaultPrevented || !returnFocus) return;
+    const target = returnFocus();
+    if (!target?.isConnected) return;
+    event.preventDefault();
+    target.focus();
+  };
+}
+var DialogOverlay = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn("fixed inset-0 z-50 bg-black/50", className),
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+var DialogContent = React5.forwardRef(({ className, layout = "dialog", returnFocus, onCloseAutoFocus, children, ...props }, ref) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsx(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "fixed z-50 flex flex-col border-border bg-popover text-popover-foreground shadow-lg outline-hidden",
+        layout === "sheet" ? [
+          "inset-x-0 top-6 bottom-0 rounded-t-xl border-t",
+          "xl:inset-0 xl:m-auto xl:h-fit xl:max-h-[min(720px,calc(100dvh-4rem))] xl:w-[calc(100%-2rem)] xl:max-w-[560px] xl:rounded-xl xl:border"
+        ] : "inset-0 m-auto h-fit w-[calc(100%-2rem)] max-w-sm gap-3 rounded-lg border p-4",
+        className
+      ),
+      onCloseAutoFocus: closeAutoFocus(onCloseAutoFocus, returnFocus),
+      ...props,
+      children
+    }
+  )
+] }));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+var DialogTitle = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-[16px] font-semibold text-foreground", className),
+    ...props
+  }
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+var DialogDescription = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-[13px] text-muted-foreground", className),
+    ...props
+  }
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+var toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground"
+      },
+      size: {
+        default: "h-10 px-3 min-w-10",
+        sm: "h-9 px-2.5 min-w-9",
+        lg: "h-11 px-5 min-w-11"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Toggle = React5.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(
+  TogglePrimitive.Root,
+  {
+    ref,
+    className: cn(toggleVariants({ variant, size, className })),
+    ...props
+  }
+));
+Toggle.displayName = TogglePrimitive.Root.displayName;
+var ToggleGroupContext = React5.createContext({
+  size: "default",
+  variant: "default"
+});
+var ToggleGroup = React5.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToggleGroupPrimitive.Root,
+  {
+    ref,
+    className: cn("flex items-center justify-center gap-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
+  }
+));
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+var ToggleGroupItem = React5.forwardRef(({ className, children, variant, size, ...props }, ref) => {
+  const context = React5.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size
+        }),
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+});
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+var SEARCH_PAUSE_MS = 250;
+var SWIPE_CLOSE_PX = 96;
+function FilePickerEntry({ onOpen, label, disabled, ref, id }) {
+  const s = useFieldStrings();
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      id,
+      type: "button",
+      onClick: onOpen,
+      disabled,
+      "aria-haspopup": "dialog",
+      "aria-label": s.chooseFromSourceAria(label),
+      className: "flex min-h-11 w-full items-center justify-center gap-2 rounded-md border border-border px-3 text-[14px] text-foreground transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50 sm:min-h-9",
+      children: [
+        /* @__PURE__ */ jsx(Folder, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }),
+        s.chooseFromSource
+      ]
+    }
+  );
+}
+function FilePicker({
+  open,
+  onOpenChange,
+  returnFocusTo,
+  onCloseAutoFocus,
+  disabled = false,
+  ...props
+}) {
+  const [drag, setDrag] = useState(0);
+  const shown = open && !disabled;
+  useEffect(() => {
+    if (open && disabled) onOpenChange(false);
+  }, [open, disabled, onOpenChange]);
+  const heldFocus = useRef(null);
+  useLayoutEffect(() => {
+    if (!open) return;
+    const active = document.activeElement;
+    heldFocus.current = active instanceof HTMLElement && active !== document.body ? active : null;
+  }, [open]);
+  return /* @__PURE__ */ jsx(Dialog, { open: shown, onOpenChange, children: shown && /* @__PURE__ */ jsx(
+    DialogContent,
+    {
+      layout: "sheet",
+      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) })
+    }
+  ) });
+}
+function FilePickerBody({
+  source,
+  formats,
+  multiple = false,
+  maxChoices,
+  held,
+  onUse,
+  onUpload,
+  onDrag,
+  onClose
+}) {
+  const s = useFieldStrings();
+  const searchId = useId();
+  const [search, setSearch] = useState("");
+  const [query, setQuery] = useState("");
+  const [scope, setScope] = useState(source.initialScope);
+  const [chosen, setChosen] = useState(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    const next = search.trim();
+    if (next === query) return;
+    const timer = setTimeout(() => setQuery(next), SEARCH_PAUSE_MS);
+    return () => clearTimeout(timer);
+  }, [search, query]);
+  const mediaTypes = useMemo(() => formats.map((format) => format.mimeType), [formats]);
+  const labels = useMemo(() => formats.map((format) => format.label), [formats]);
+  const load = (cursor, signal) => source.list({ search: query, scope, mediaTypes, cursor, signal }).then((page) => ({ items: page.files, nextCursor: page.nextCursor }));
+  const pages = useSourcePages(load, JSON.stringify([query, scope, mediaTypes]));
+  const fits = (files) => maxChoices === void 0 || chosenFilesAdded(held, files) <= maxChoices;
+  const toggle = (file) => setChosen((previous) => {
+    if (!multiple) return previous.has(file.id) ? previous : /* @__PURE__ */ new Map([[file.id, file]]);
+    const next = new Map(previous);
+    if (next.has(file.id)) next.delete(file.id);
+    else if (fits([...next.values(), file])) next.set(file.id, file);
+    return next;
+  });
+  const choices = [...chosen.values()];
+  const use6 = () => {
+    if (choices.length === 0) return;
+    onUse(choices);
+    onClose();
+  };
+  const clearSearch = () => {
+    setSearch("");
+    setQuery("");
+  };
+  const status = pickerStatus(s, pages, query, scope, labels);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(SheetHeader, { onDrag, onClose, children: [
+      /* @__PURE__ */ jsx(DialogTitle, { className: "text-[20px]", children: s.filePickerTitle }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: s.filePickerTakes(labels) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2 px-4 pb-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: searchId, className: "sr-only", children: s.filePickerSearch }),
+        /* @__PURE__ */ jsx(
+          Search,
+          {
+            className: "pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground",
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: searchId,
+            type: "search",
+            value: search,
+            onChange: (event) => setSearch(event.target.value),
+            onKeyDown: (event) => {
+              if (event.key === "Enter") event.preventDefault();
+            },
+            placeholder: s.filePickerSearchPlaceholder,
+            autoComplete: "off",
+            className: "h-11 w-full rounded-md border border-border bg-input pr-3 pl-9 text-[16px] text-foreground placeholder:text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(
+        ToggleGroup,
+        {
+          type: "single",
+          value: scope,
+          onValueChange: (value) => {
+            if (value === "mine" || value === "everyone") setScope(value);
+          },
+          "aria-label": s.filePickerScope,
+          className: "grid grid-cols-2 gap-1 rounded-md border border-border p-1",
+          children: [
+            /* @__PURE__ */ jsx(ToggleGroupItem, { value: "mine", className: "h-11 w-full text-[15px]", children: s.filePickerMine }),
+            /* @__PURE__ */ jsx(ToggleGroupItem, { value: "everyone", className: "h-11 w-full text-[15px]", children: s.filePickerEveryone })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("p", { role: "status", className: "sr-only", children: status }),
+    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto border-t border-border", children: pages.status === "idle" || pages.status === "loading" ? /* @__PURE__ */ jsx(DimRows, {}) : pages.status === "failed" ? /* @__PURE__ */ jsx(ListMessage, { text: s.filePickerFailed, children: /* @__PURE__ */ jsx(ListAction, { onClick: pages.retry, children: s.tryAgain }) }) : pages.empty ? query !== "" ? /* @__PURE__ */ jsx(ListMessage, { text: s.filePickerNoMatch, children: /* @__PURE__ */ jsx(ListAction, { onClick: clearSearch, children: s.filePickerClearSearch }) }) : /* @__PURE__ */ jsxs(ListMessage, { text: status, children: [
+      scope === "mine" && /* @__PURE__ */ jsx(ListAction, { onClick: () => setScope("everyone"), children: s.filePickerShowEveryone }),
+      onUpload && /* @__PURE__ */ jsx(
+        ListAction,
+        {
+          onClick: () => {
+            onClose();
+            onUpload();
+          },
+          children: s.filePickerUpload
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      pages.items.length > 0 && /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: multiple ? "group" : "radiogroup",
+          "aria-label": s.filePickerTitle,
+          className: "divide-y divide-border",
+          children: pages.items.map((file) => {
+            const isChosen = chosen.has(file.id);
+            return /* @__PURE__ */ jsx(
+              FileRow,
+              {
+                file,
+                formats,
+                role: multiple ? "checkbox" : "radio",
+                chosen: isChosen,
+                disabled: !isChosen && !fits([...choices, file]),
+                onToggle: () => toggle(file)
+              },
+              file.id
+            );
+          })
+        }
+      ),
+      /* @__PURE__ */ jsx(MoreFooter, { pages })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "border-t border-border px-4 pt-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: use6,
+        disabled: choices.length === 0,
+        className: "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",
+        children: /* @__PURE__ */ jsx("span", { className: "truncate", children: s.filePickerUse(choices.length, choices[0]?.name) })
+      }
+    ) })
+  ] });
+}
+function pickerStatus(s, pages, query, scope, labels) {
+  if (pages.status === "idle" || pages.status === "loading") return s.filePickerLoading;
+  if (pages.status === "failed") return s.filePickerFailed;
+  if (pages.more === "failed") return s.loadMoreFailed;
+  if (pages.items.length > 0) return s.filePickerShown(pages.items.length);
+  if (!pages.empty) return s.filePickerLoading;
+  if (query !== "") return s.filePickerNoMatch;
+  return scope === "mine" ? s.filePickerNoneMine(labels) : s.filePickerNoneTeam(labels);
+}
+function SheetHeader({
+  onDrag,
+  onClose,
+  children
+}) {
+  const s = useFieldStrings();
+  const start = useRef(null);
+  const offset = useRef(0);
+  const onPointerDown = (event) => {
+    if (event.pointerType === "mouse") return;
+    if (window.matchMedia?.("(min-width: 80rem)").matches) return;
+    start.current = event.clientY;
+    offset.current = 0;
+  };
+  const onPointerMove = (event) => {
+    if (start.current === null) return;
+    offset.current = Math.max(0, event.clientY - start.current);
+    onDrag(offset.current);
+  };
+  const onPointerEnd = () => {
+    if (start.current === null) return;
+    const closes = offset.current > SWIPE_CLOSE_PX;
+    start.current = null;
+    offset.current = 0;
+    onDrag(0);
+    if (closes) onClose();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "touch-none px-4 pt-2 pb-3 select-none",
+      onPointerDown,
+      onPointerMove,
+      onPointerUp: onPointerEnd,
+      onPointerCancel: onPointerEnd,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "mx-auto mb-2 block h-1.5 w-12 rounded-full bg-muted-foreground/40 xl:hidden"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 space-y-1 pt-1", children }),
+          /* @__PURE__ */ jsx(
+            DialogClose,
+            {
+              "aria-label": s.close,
+              className: "flex size-11 shrink-0 items-center justify-center rounded-full border border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+              children: /* @__PURE__ */ jsx(X, { className: "size-5", "aria-hidden": "true" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function rowFormat(file, formats) {
+  const type = file.mediaType ? normalizeMimeType(file.mediaType) : "";
+  return formats.find((format) => format.mimeType === type) ?? formatOfFilename(formats, file.name);
+}
+function rowMeta(s, file, format) {
+  const parts = [];
+  if (format) parts.push(format.label);
+  if (file.size !== void 0) parts.push(s.fileSize(file.size));
+  if (file.origin) parts.push(file.origin);
+  if (file.createdAt) {
+    const date = new Date(file.createdAt);
+    if (!Number.isNaN(date.getTime())) parts.push(s.fileDate(date));
+  }
+  return parts.join(" \xB7 ");
+}
+function FileRow({
+  file,
+  formats,
+  role,
+  chosen,
+  disabled,
+  onToggle
+}) {
+  const s = useFieldStrings();
+  const format = rowFormat(file, formats);
+  const isImage = format?.mimeType.startsWith("image/") ?? false;
+  const meta = rowMeta(s, file, format);
+  const Glyph = isImage ? ImageIcon : FileText;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      role,
+      "aria-checked": chosen,
+      disabled,
+      onClick: onToggle,
+      className: cn(
+        "flex min-h-16 w-full items-center gap-3 px-4 py-2.5 text-left transition-colors hover:bg-muted/60 disabled:cursor-not-allowed disabled:opacity-50",
+        "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring",
+        chosen && "bg-muted"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          Glyph,
+          {
+            className: "size-6 shrink-0 text-muted-foreground",
+            strokeWidth: 1.5,
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "block truncate text-[16px] font-medium text-foreground", children: file.name }),
+          (file.kind === "test" || meta) && /* @__PURE__ */ jsxs("span", { className: "block truncate text-[13px] text-muted-foreground", children: [
+            file.kind === "test" && /* @__PURE__ */ jsxs("span", { className: "text-foreground", children: [
+              s.testFile,
+              meta && " \xB7 "
+            ] }),
+            meta
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Check,
+          {
+            className: cn("size-5 shrink-0 text-foreground", !chosen && "invisible"),
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+}
 var IMAGE_EXT_RE = /\.(jpg|jpeg|png|gif|webp|bmp|svg|avif)(\?|$)/i;
 var PDF_EXT_RE = /\.pdf(\?|$)/i;
 var DATA_URL_MIME_RE = /^data:([^;,]+)/i;
@@ -484,6 +1262,7 @@ function FileField({
   uploading,
   uploadError,
   resolveUrl,
+  fileSource,
   error,
   disabled,
   category
@@ -497,6 +1276,9 @@ function FileField({
   const [localPreview, setLocalPreview] = useState(null);
   const [resolved, setResolved] = useState(null);
   const localUrlRef = useRef(null);
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const cardRef = useRef(null);
+  const pickerEntryRef = useRef(null);
   const setLocal = useCallback((next) => {
     if (localUrlRef.current) URL.revokeObjectURL(localUrlRef.current);
     localUrlRef.current = next?.objectUrl ?? null;
@@ -532,7 +1314,12 @@ function FileField({
     [formats, setLocal, onDropFile]
   );
   const busy = disabled || uploading;
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+  const {
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    open: openFileDialog
+  } = useDropzone({
     maxFiles: 1,
     multiple: false,
     // Disabled, not merely unrendered, when there is no upload path: the hook
@@ -570,7 +1357,30 @@ function FileField({
     dismissUploadError();
     onChange(void 0);
   }, [setLocal, onChange, dismissUploadError]);
+  const chooseFromSource = useCallback(
+    (file) => {
+      setLocal(null);
+      setResolved(null);
+      setRejected(null);
+      dismissUploadError();
+      onChange(sourceFileValue(file));
+    },
+    [setLocal, onChange, dismissUploadError]
+  );
   const localIsCurrent = !!localPreview && (localPreview.boundUrl === void 0 || localPreview.boundUrl === value?.url);
+  const wasUploading = useRef(!!uploading);
+  useEffect(() => {
+    const ended = wasUploading.current && !uploading;
+    wasUploading.current = !!uploading;
+    if (!localPreview || localPreview.boundUrl !== void 0) return;
+    if (failure !== null || ended && !value?.url) setLocal(null);
+  }, [uploading, failure, localPreview, value?.url, setLocal]);
+  const lastUrl = useRef(value?.url);
+  useEffect(() => {
+    if (lastUrl.current === value?.url) return;
+    lastUrl.current = value?.url;
+    if (uploadError !== void 0) setDismissedUploadError(uploadError);
+  }, [value?.url, uploadError]);
   useEffect(() => {
     if (!localPreview) return;
     if (localPreview.boundUrl === void 0) {
@@ -611,13 +1421,15 @@ function FileField({
   };
   const urlValue = value?.url ?? "";
   const urlText = presentation === "studio" || isReadableLink(urlValue) || urlValue === typedUrl ? urlValue : "";
-  if (!canUpload && !allowUrl) {
+  const canChoose = fileSource !== void 0;
+  if (!canUpload && !allowUrl && !canChoose) {
     throw new Error(
-      `The file field at "${id}" has no way in: the form's environment supplies no onDropFile and sets allowUrl to false. Supply onDropFile so the file can be uploaded, or leave allowUrl unset so a link can be pasted.`
+      `The file field at "${id}" has no way in: the form's environment supplies no onDropFile and no fileSource, and sets allowUrl to false. Supply onDropFile so the file can be uploaded, leave allowUrl unset so a link can be pasted, or supply a fileSource so a stored file can be chosen.`
     );
   }
   const linkOpen = allowUrl && (!canUpload || showUrl);
-  const noUploadLineShown = !canUpload && !hasFile && !uploading;
+  const noUploadLineShown = !canUpload && allowUrl && !hasFile && !uploading;
+  const choosingOnly = !canUpload && !allowUrl;
   const noUploadLineId = `${domId}-no-upload`;
   return /* @__PURE__ */ jsxs(
     FieldShell,
@@ -631,7 +1443,7 @@ function FileField({
       error,
       htmlFor: domId,
       children: [
-        hasFile && !uploading ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        hasFile && !uploading ? /* @__PURE__ */ jsxs("div", { ref: cardRef, tabIndex: -1, className: "space-y-2 outline-none", children: [
           /* @__PURE__ */ jsx(
             FileChip,
             {
@@ -661,7 +1473,7 @@ function FileField({
             /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }),
             s.uploading
           ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("p", { id: noUploadLineId, className: "text-[12px] text-muted-foreground", children: s.uploadUnavailable }),
+            noUploadLineShown && /* @__PURE__ */ jsx("p", { id: noUploadLineId, className: "text-[12px] text-muted-foreground", children: s.uploadUnavailable }),
             hint && /* @__PURE__ */ jsx("p", { className: "font-mono text-[10.5px] text-muted-foreground", children: hint })
           ] }) })
         ) : (
@@ -736,12 +1548,43 @@ function FileField({
           {
             type: "button",
             disabled: busy,
-            onClick: () => setShowUrl(true),
-            className: "flex w-fit items-center gap-1 font-mono text-[11px] text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50 max-sm:min-h-11",
-            children: [
-              /* @__PURE__ */ jsx(Link2, { className: "h-3 w-3" }),
-              s.pasteUrlInstead
-            ]
+            onClick: () => setShowUrl(true),
+            className: "flex w-fit items-center gap-1 font-mono text-[11px] text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50 max-sm:min-h-11",
+            children: [
+              /* @__PURE__ */ jsx(Link2, { className: "h-3 w-3" }),
+              s.pasteUrlInstead
+            ]
+          }
+        ),
+        fileSource && !hasFile && /* @__PURE__ */ jsx(
+          FilePickerEntry,
+          {
+            ref: pickerEntryRef,
+            id: choosingOnly ? domId : void 0,
+            label: fieldLabel(field.title, field.name, presentation),
+            disabled: busy,
+            onOpen: () => setPickerOpen(true)
+          }
+        ),
+        fileSource && /* @__PURE__ */ jsx(
+          FilePicker,
+          {
+            source: fileSource,
+            formats,
+            open: pickerOpen,
+            onOpenChange: setPickerOpen,
+            onUse: (files) => {
+              const file = files[0];
+              if (file) chooseFromSource(file);
+            },
+            onUpload: canUpload ? openFileDialog : void 0,
+            disabled: busy,
+            returnFocusTo: pickerEntryRef,
+            onCloseAutoFocus: (event) => {
+              if (!cardRef.current) return;
+              event.preventDefault();
+              cardRef.current.focus();
+            }
           }
         )
       ]
@@ -843,7 +1686,7 @@ function ClearButton({ disabled, onClick }) {
 }
 var Select = SelectPrimitive.Root;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectTrigger = React5.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -862,7 +1705,7 @@ var SelectTrigger = React2.forwardRef(({ className, children, ...props }, ref) =
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollUpButton = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -872,7 +1715,7 @@ var SelectScrollUpButton = React2.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollDownButton = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -882,7 +1725,7 @@ var SelectScrollDownButton = React2.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React2.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+var SelectContent = React5.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
   SelectPrimitive.Content,
   {
     ref,
@@ -910,7 +1753,7 @@ var SelectContent = React2.forwardRef(({ className, children, position = "popper
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectLabel = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Label,
   {
     ref,
@@ -919,7 +1762,7 @@ var SelectLabel = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectItem = React5.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Item,
   {
     ref,
@@ -935,7 +1778,7 @@ var SelectItem = React2.forwardRef(({ className, children, ...props }, ref) => /
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectSeparator = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Separator,
   {
     ref,
@@ -944,68 +1787,6 @@ var SelectSeparator = React2.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-var toggleVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground"
-      },
-      size: {
-        default: "h-10 px-3 min-w-10",
-        sm: "h-9 px-2.5 min-w-9",
-        lg: "h-11 px-5 min-w-11"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-var Toggle = React2.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(
-  TogglePrimitive.Root,
-  {
-    ref,
-    className: cn(toggleVariants({ variant, size, className })),
-    ...props
-  }
-));
-Toggle.displayName = TogglePrimitive.Root.displayName;
-var ToggleGroupContext = React2.createContext({
-  size: "default",
-  variant: "default"
-});
-var ToggleGroup = React2.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx(
-  ToggleGroupPrimitive.Root,
-  {
-    ref,
-    className: cn("flex items-center justify-center gap-1", className),
-    ...props,
-    children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
-  }
-));
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-var ToggleGroupItem = React2.forwardRef(({ className, children, variant, size, ...props }, ref) => {
-  const context = React2.useContext(ToggleGroupContext);
-  return /* @__PURE__ */ jsx(
-    ToggleGroupPrimitive.Item,
-    {
-      ref,
-      className: cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size
-        }),
-        className
-      ),
-      ...props,
-      children
-    }
-  );
-});
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 var CLEAR_VALUE = "__none__";
 function EnumField({ field, value, onChange, id, error, disabled }) {
   const s = useFieldStrings();
@@ -1042,9 +1823,19 @@ function EnumField({ field, value, onChange, id, error, disabled }) {
               {
                 value: option,
                 variant: "outline",
-                className: "h-9 min-w-0 gap-1.5 border-border bg-input px-3 text-[13px] text-muted-foreground hover:bg-muted hover:text-foreground data-[state=on]:border-primary/40 data-[state=on]:bg-primary/10 data-[state=on]:font-medium data-[state=on]:text-foreground",
+                className: cn(
+                  "h-9 min-w-0 gap-1.5 border-border bg-input px-3 text-[13px] text-muted-foreground hover:bg-muted hover:text-foreground data-[state=on]:border-primary/40 data-[state=on]:font-medium data-[state=on]:text-foreground",
+                  brandFillSelectedClass
+                ),
                 children: [
-                  value === option && /* @__PURE__ */ jsx(Check, { className: "size-3.5 text-primary", strokeWidth: 2.5, "aria-hidden": "true" }),
+                  value === option && /* @__PURE__ */ jsx(
+                    Check,
+                    {
+                      className: cn("size-3.5", brandFillInkClass),
+                      strokeWidth: 2.5,
+                      "aria-hidden": "true"
+                    }
+                  ),
                   labelOf(option)
                 ]
               },
@@ -1288,12 +2079,39 @@ function ObjectField({ field, value, onChange, id, error, env }) {
     error && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-destructive", role: "alert", children: error })
   ] });
 }
+
+// src/react/focus.ts
+var FOCUSABLE = "a[href], button, input, select, textarea, [tabindex]";
+function takesFocus(element) {
+  if (element.tabIndex < 0 || element.matches(":disabled")) return false;
+  return element.closest("[hidden], [inert]") === null;
+}
+function followingFocusable(from, skip) {
+  if (!from) return null;
+  for (const element of from.ownerDocument.querySelectorAll(FOCUSABLE)) {
+    if (!(from.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_FOLLOWING)) continue;
+    if (skip?.contains(element)) continue;
+    if (takesFocus(element)) return element;
+  }
+  return null;
+}
+function firstFocusable(within) {
+  if (!within) return null;
+  for (const element of within.querySelectorAll(FOCUSABLE)) {
+    if (takesFocus(element)) return element;
+  }
+  return null;
+}
 function ListField({ field, value, onChange, id, error, env }) {
   const s = useFieldStrings();
   const presentation = useFieldPresentation();
   const isApp = presentation === "app";
   const items = value ?? [];
   const [rowKeys, setRowKeys] = useRowKeys(items.length);
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const pickerEntryRef = useRef(null);
+  const rowsRef = useRef(null);
+  const landedRow = useRef(null);
   const [staleErrors, setStaleErrors] = useState(NO_ERRORS);
   const setItem = (index, itemValue) => {
     const next = items.slice();
@@ -1337,6 +2155,9 @@ function ListField({ field, value, onChange, id, error, env }) {
     };
   }, [env, staleErrors]);
   const isFull = field.maxItemCount !== void 0 && items.length >= field.maxItemCount;
+  const fileSource = env?.fileSource;
+  const fileItem = field.item.kind === "document" || field.item.kind === "image" ? field.item : null;
+  const room = roomForChosenFiles(items, field.maxItemCount);
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [
       /* @__PURE__ */ jsx(
@@ -1354,11 +2175,12 @@ function ListField({ field, value, onChange, id, error, env }) {
       shownAsOptional(field) && /* @__PURE__ */ jsx("span", { className: "ml-auto font-mono text-[10px] uppercase tracking-wider text-muted-foreground", children: s.optionalBadge })
     ] }),
     field.description && /* @__PURE__ */ jsx("p", { className: "text-[12px] leading-relaxed text-muted-foreground", children: field.description }),
-    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { ref: rowsRef, className: "space-y-2", children: [
       items.length === 0 && /* @__PURE__ */ jsx("p", { className: "rounded-md border border-dashed border-border bg-input/50 px-3 py-4 text-center text-[12px] text-muted-foreground", children: s.noItemsYet }),
       items.map((item, index) => /* @__PURE__ */ jsxs(
         "div",
         {
+          "data-list-row": true,
           className: "flex items-start gap-2 rounded-md border border-border bg-card/40 p-3",
           children: [
             /* @__PURE__ */ jsx("span", { className: "mt-1 w-5 shrink-0 text-center font-mono text-[11px] text-muted-foreground", children: index + 1 }),
@@ -1407,11 +2229,56 @@ function ListField({ field, value, onChange, id, error, env }) {
             s.addItem
           ]
         }
-      )
+      ),
+      fileSource && fileItem && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          FilePickerEntry,
+          {
+            ref: pickerEntryRef,
+            label: fieldLabel(field.title, field.name, presentation),
+            disabled: env?.disabled || busy || room === 0,
+            onOpen: () => setPickerOpen(true)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FilePicker,
+          {
+            source: fileSource,
+            formats: fileItem.formats,
+            multiple: true,
+            maxChoices: room,
+            held: items,
+            open: pickerOpen,
+            onOpenChange: setPickerOpen,
+            disabled: env?.disabled || busy,
+            returnFocusTo: pickerEntryRef,
+            onCloseAutoFocus: (event) => {
+              const landed = landedRow.current;
+              landedRow.current = null;
+              if (landed === null || !pickerEntryRef.current?.disabled) return;
+              const rows = rowsRef.current?.querySelectorAll(":scope > [data-list-row]");
+              const target = firstFocusable(rows?.[landed]);
+              if (!target) return;
+              event.preventDefault();
+              target.focus();
+            },
+            onUse: (files) => {
+              const next = addChosenFiles(items, files);
+              landedRow.current = lastWrittenRow(items, next);
+              onChange(next);
+            }
+          }
+        )
+      ] })
     ] }),
     error && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-destructive", role: "alert", children: error })
   ] });
 }
+function lastWrittenRow(before, after) {
+  let index = after.length - 1;
+  while (index >= 0 && after[index] === before[index]) index -= 1;
+  return index >= 0 ? index : null;
+}
 function listIsBusy(id, uploadingIds) {
   if (!uploadingIds?.size) return false;
   const prefix = `${id}.`;
@@ -1581,6 +2448,7 @@ function FieldRenderer({ field, value, onChange, id, error, env }) {
           uploading: env?.uploadingIds?.has(id),
           uploadError: env?.uploadErrors?.get(id),
           resolveUrl: env?.resolveUrl,
+          fileSource: env?.fileSource,
           id,
           error,
           disabled
@@ -1598,6 +2466,7 @@ function FieldRenderer({ field, value, onChange, id, error, env }) {
           uploading: env?.uploadingIds?.has(id),
           uploadError: env?.uploadErrors?.get(id),
           resolveUrl: env?.resolveUrl,
+          fileSource: env?.fileSource,
           id,
           error,
           disabled
@@ -1641,6 +2510,450 @@ 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: [
+  /* @__PURE__ */ jsx(AlertDialogPrimitive.Overlay, { className: "fixed inset-0 z-50 bg-black/50" }),
+  /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "fixed inset-0 z-50 m-auto grid h-fit w-[calc(100%-2rem)] max-w-sm gap-3 rounded-lg border border-border bg-popover p-4 text-popover-foreground shadow-lg outline-hidden",
+        className
+      ),
+      onCloseAutoFocus: closeAutoFocus(onCloseAutoFocus, returnFocus),
+      ...props
+    }
+  )
+] }));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+var AlertDialogTitle = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AlertDialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-[16px] font-semibold text-foreground", className),
+    ...props
+  }
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+var AlertDialogDescription = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AlertDialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-[13px] text-muted-foreground", className),
+    ...props
+  }
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+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(
+  DropdownMenuPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 min-w-36 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+var DropdownMenuItem = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "flex min-h-11 cursor-default select-none items-center gap-2 rounded-sm px-3 text-[14px] outline-hidden data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 sm:min-h-9",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+var buttonClass = "inline-flex min-h-11 items-center justify-center gap-2 rounded-md px-4 text-[14px] transition-colors disabled:cursor-not-allowed disabled:opacity-50 sm:min-h-9";
+var secondaryClass = cn(buttonClass, "border border-border text-foreground hover:bg-muted");
+var primaryClass = cn(
+  buttonClass,
+  "bg-primary font-medium text-primary-foreground hover:bg-primary/90"
+);
+var dangerClass = cn(
+  buttonClass,
+  "bg-destructive font-medium text-destructive-foreground hover:bg-destructive/90"
+);
+function FillWithExample({
+  source,
+  fields,
+  touched,
+  onFill,
+  disabled,
+  className
+}) {
+  const s = useFieldStrings();
+  const [open, setOpen] = useState(false);
+  const [opening, setOpening] = useState(0);
+  const [closing, setClosing] = useState(0);
+  const [replacing, setReplacing] = useState(null);
+  const [renaming, setRenaming] = useState(null);
+  const [deleting, setDeleting] = useState(null);
+  const control = useRef(null);
+  const closeButton = useRef(null);
+  const sheet = useRef(null);
+  const afterControl = useRef(null);
+  const rows = useRef(/* @__PURE__ */ new Map());
+  const menus = useRef(/* @__PURE__ */ new Map());
+  const afterRowDialog = useRef(null);
+  const register = (map, id) => (element) => {
+    map.set(id, element);
+    return () => {
+      if (map.get(id) === element) map.delete(id);
+    };
+  };
+  const load = (cursor, signal) => source.list({ cursor, signal }).then((page) => ({ items: page.examples, nextCursor: page.nextCursor }));
+  const probe = useSourcePages(load, source.hideWhenEmpty ? `probe-${closing}` : null);
+  const pages = useSourcePages(load, open ? `open-${opening}` : null);
+  const answer = probe.status === "failed" || probe.more === "failed" ? true : probe.items.length > 0 ? true : probe.empty ? false : null;
+  const [hasExamples, setHasExamples] = useState(null);
+  if (answer !== null && answer !== hasExamples) setHasExamples(answer);
+  if (disabled && (open || replacing || renaming || deleting)) {
+    if (open) setClosing((count) => count + 1);
+    setOpen(false);
+    setReplacing(null);
+    setRenaming(null);
+    setDeleting(null);
+  }
+  if (source.hideWhenEmpty && !open && (answer ?? hasExamples) !== true) return null;
+  const closeList = () => {
+    if (source.hideWhenEmpty && pages.status === "ready") {
+      if (pages.items.length > 0) setHasExamples(true);
+      else if (pages.empty) {
+        afterControl.current = followingFocusable(control.current, sheet.current);
+        setHasExamples(false);
+      }
+    }
+    setOpen(false);
+    setClosing((count) => count + 1);
+  };
+  const fill = (example) => {
+    if (disabled) return;
+    onFill(runValuesFromInputs(example.inputs, fields), example);
+    setReplacing(null);
+    closeList();
+  };
+  const choose = (example) => {
+    if (touched) setReplacing(example);
+    else fill(example);
+  };
+  const manages = source.rename !== void 0 || source.delete !== void 0;
+  const status = pages.status === "idle" || pages.status === "loading" ? s.examplesLoading : pages.status === "failed" ? s.examplesFailed : pages.more === "failed" ? s.loadMoreFailed : pages.items.length > 0 ? s.examplesShown(pages.items.length) : pages.empty ? s.examplesNone : s.examplesLoading;
+  const returnFromRowDialog = () => {
+    const next = afterRowDialog.current;
+    afterRowDialog.current = null;
+    if (!next) return null;
+    const target = next.id === void 0 ? void 0 : (next.to === "menu" ? menus : rows).current.get(next.id);
+    return target?.isConnected ? target : closeButton.current;
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: control,
+        type: "button",
+        disabled,
+        "aria-haspopup": "dialog",
+        onClick: () => {
+          setOpening((count) => count + 1);
+          setOpen(true);
+        },
+        className: cn(secondaryClass, className),
+        children: [
+          /* @__PURE__ */ jsx(Sparkles, { className: "size-4 text-muted-foreground", "aria-hidden": "true" }),
+          s.fillWithExample
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open,
+        onOpenChange: (next) => {
+          if (next) setOpen(true);
+          else closeList();
+        },
+        children: open && /* @__PURE__ */ jsxs(
+          DialogContent,
+          {
+            layout: "sheet",
+            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: [
+                  /* @__PURE__ */ jsx(DialogTitle, { className: "text-[20px]", children: s.examplesTitle }),
+                  /* @__PURE__ */ jsx(DialogDescription, { children: s.examplesHint })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  DialogClose,
+                  {
+                    ref: closeButton,
+                    "aria-label": s.close,
+                    className: "flex size-11 shrink-0 items-center justify-center rounded-full border border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                    children: /* @__PURE__ */ jsx(X, { className: "size-5", "aria-hidden": "true" })
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ jsx("p", { role: "status", className: "sr-only", children: status }),
+              /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto border-t border-border pb-[env(safe-area-inset-bottom)]", children: pages.status === "idle" || pages.status === "loading" ? /* @__PURE__ */ jsx(DimRows, { count: 3 }) : pages.status === "failed" ? /* @__PURE__ */ jsx(ListMessage, { text: s.examplesFailed, children: /* @__PURE__ */ jsx(ListAction, { onClick: pages.retry, children: s.tryAgain }) }) : pages.empty ? /* @__PURE__ */ jsx(ListMessage, { text: s.examplesNone }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                pages.items.length > 0 && /* @__PURE__ */ jsx("ul", { className: "divide-y divide-border", children: pages.items.map((example) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1 pr-2", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      ref: register(rows.current, example.id),
+                      type: "button",
+                      onClick: () => choose(example),
+                      className: "flex min-h-16 min-w-0 flex-1 items-center px-4 py-2.5 text-left transition-colors hover:bg-muted/60 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring",
+                      children: /* @__PURE__ */ jsx("span", { className: "truncate text-[16px] font-medium text-foreground", children: example.name })
+                    }
+                  ),
+                  manages && // Not modal, so the question a menu item opens takes
+                  // the focus without the menu fighting it for the page.
+                  /* @__PURE__ */ jsxs(DropdownMenu, { modal: false, children: [
+                    /* @__PURE__ */ jsx(
+                      DropdownMenuTrigger,
+                      {
+                        ref: register(menus.current, example.id),
+                        "aria-label": s.exampleActions(example.name),
+                        className: "flex size-11 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                        children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-5", "aria-hidden": "true" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+                      source.rename && /* @__PURE__ */ jsx(DropdownMenuItem, { onSelect: () => setRenaming(example), children: s.renameExample }),
+                      source.delete && /* @__PURE__ */ jsx(
+                        DropdownMenuItem,
+                        {
+                          onSelect: () => setDeleting(example),
+                          className: "text-destructive data-highlighted:text-destructive",
+                          children: s.deleteExample
+                        }
+                      )
+                    ] })
+                  ] })
+                ] }, example.id)) }),
+                /* @__PURE__ */ jsx(MoreFooter, { pages })
+              ] }) })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AlertDialog,
+      {
+        open: replacing !== null,
+        onOpenChange: (next) => {
+          if (!next) setReplacing(null);
+        },
+        children: replacing && /* @__PURE__ */ jsxs(
+          AlertDialogContent,
+          {
+            returnFocus: () => {
+              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) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap justify-end gap-2", children: [
+                /* @__PURE__ */ jsx(AlertDialogCancel, { className: secondaryClass, children: s.cancel }),
+                /* @__PURE__ */ jsx(AlertDialogAction, { className: primaryClass, onClick: () => fill(replacing), children: s.replaceEnteredConfirm })
+              ] })
+            ]
+          }
+        )
+      }
+    ),
+    source.rename && renaming && /* @__PURE__ */ jsx(
+      RenameExampleDialog,
+      {
+        example: renaming,
+        rename: source.rename,
+        returnFocus: returnFromRowDialog,
+        onDone: (renamed) => {
+          pages.updateItems(
+            (items) => items.map((item) => item.id === renaming.id ? renamed : item)
+          );
+          afterRowDialog.current = { id: renamed.id, to: "menu" };
+          setRenaming(null);
+        },
+        onCancel: () => {
+          afterRowDialog.current = { id: renaming.id, to: "menu" };
+          setRenaming(null);
+        }
+      }
+    ),
+    source.delete && deleting && /* @__PURE__ */ jsx(
+      DeleteExampleDialog,
+      {
+        example: deleting,
+        remove: source.delete,
+        returnFocus: returnFromRowDialog,
+        onDone: (deleted) => {
+          const index = pages.items.findIndex((item) => item.id === deleted.id);
+          const neighbour = pages.items[index + 1] ?? pages.items[index - 1];
+          pages.updateItems((items) => items.filter((item) => item.id !== deleted.id));
+          afterRowDialog.current = { id: neighbour?.id, to: "row" };
+          setDeleting(null);
+        },
+        onCancel: () => {
+          afterRowDialog.current = { id: deleting.id, to: "menu" };
+          setDeleting(null);
+        }
+      }
+    )
+  ] });
+}
+function RenameExampleDialog({
+  example,
+  rename,
+  returnFocus,
+  onDone,
+  onCancel
+}) {
+  const s = useFieldStrings();
+  const fieldId = useId();
+  const [name, setName] = useState(example.name);
+  const [state, setState] = useState("idle");
+  const trimmed = name.trim();
+  const save = () => {
+    if (trimmed === "" || state === "busy") return;
+    setState("busy");
+    let renamed;
+    try {
+      renamed = Promise.resolve(rename(example, trimmed));
+    } catch (error) {
+      renamed = Promise.reject(error);
+    }
+    renamed.then(
+      (stored) => onDone(stored ?? { ...example, name: trimmed }),
+      () => setState("failed")
+    );
+  };
+  const onKeyDown = (event) => {
+    if (event.key !== "Enter") return;
+    event.preventDefault();
+    save();
+  };
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open: true,
+      onOpenChange: (next) => {
+        if (!next && state !== "busy") onCancel();
+      },
+      children: /* @__PURE__ */ jsxs(DialogContent, { returnFocus, onClick: (event) => event.stopPropagation(), 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: [
+          /* @__PURE__ */ jsx("label", { htmlFor: fieldId, className: "text-[13px] font-medium text-foreground", children: s.exampleName }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: fieldId,
+              type: "text",
+              value: name,
+              onChange: (event) => setName(event.target.value),
+              onKeyDown,
+              disabled: state === "busy",
+              autoComplete: "off",
+              className: "h-11 w-full rounded-md border border-border bg-input px-3 text-[16px] text-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring"
+            }
+          )
+        ] }),
+        state === "failed" && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-[13px] text-destructive", children: s.renameFailed }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap justify-end gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onCancel,
+              disabled: state === "busy",
+              className: secondaryClass,
+              children: s.cancel
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: save,
+              disabled: trimmed === "" || state === "busy",
+              className: primaryClass,
+              children: state === "busy" ? s.renaming : state === "failed" ? s.tryAgain : s.save
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function DeleteExampleDialog({
+  example,
+  remove,
+  returnFocus,
+  onDone,
+  onCancel
+}) {
+  const s = useFieldStrings();
+  const [state, setState] = useState("idle");
+  const confirm = () => {
+    if (state === "busy") return;
+    setState("busy");
+    let removed;
+    try {
+      removed = Promise.resolve(remove(example));
+    } catch (error) {
+      removed = Promise.reject(error);
+    }
+    removed.then(
+      () => onDone(example),
+      () => setState("failed")
+    );
+  };
+  return /* @__PURE__ */ jsx(
+    AlertDialog,
+    {
+      open: true,
+      onOpenChange: (next) => {
+        if (!next && state !== "busy") onCancel();
+      },
+      children: /* @__PURE__ */ jsxs(AlertDialogContent, { returnFocus, onClick: (event) => event.stopPropagation(), 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 }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap justify-end gap-2", children: [
+          /* @__PURE__ */ jsx(AlertDialogCancel, { disabled: state === "busy", className: secondaryClass, children: s.cancel }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: confirm,
+              disabled: state === "busy",
+              className: dangerClass,
+              children: state === "busy" ? s.deleting : state === "failed" ? s.tryAgain : s.deleteExample
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
 var EMPTY_IDS = /* @__PURE__ */ new Set();
 function withId(ids, id) {
   if (ids.has(id)) return ids;
@@ -1668,7 +2981,9 @@ function useMethodForm({
   prepareFields,
   order,
   initialValues,
-  uploadFile
+  uploadFile,
+  fileSource,
+  exampleSource
 }) {
   const orderKey = order ? order.join("\0") : "";
   const fields = useMemo(() => {
@@ -1681,22 +2996,29 @@ function useMethodForm({
     return initialValues ?? seedInputs(fields);
   }, [initialValues, fields]);
   const [edited, setEdited] = useState(null);
+  const [given, setGiven] = useState(null);
   const [uploadingIds, setUploadingIds] = useState(EMPTY_IDS);
   const [failedUploadIds, setFailedUploadIds] = useState(EMPTY_IDS);
   const [attempted, setAttempted] = useState(false);
+  const [resets, setResets] = useState(0);
   const pendingUploads = useRef(/* @__PURE__ */ new Map());
   const uploadCounter = useRef(0);
   const values = edited ?? initial;
   const setValues = useCallback(
-    (next) => setEdited((previous) => typeof next === "function" ? next(previous ?? initial) : next),
+    (next) => {
+      setGiven((previous) => previous ?? initial);
+      setEdited((previous) => typeof next === "function" ? next(previous ?? initial) : next);
+    },
     [initial]
   );
   const reset = useCallback((next) => {
     pendingUploads.current.clear();
     setEdited(next ?? null);
+    setGiven(next ?? null);
     setUploadingIds(EMPTY_IDS);
     setFailedUploadIds(EMPTY_IDS);
     setAttempted(false);
+    setResets((count) => count + 1);
   }, []);
   const dropFile = useMemo(() => {
     if (!uploadFile) return void 0;
@@ -1717,6 +3039,7 @@ function useMethodForm({
         (stored) => {
           if (!current()) return;
           const value = typeof stored === "string" ? { url: stored, filename: file.name } : { url: stored.url, filename: stored.filename ?? file.name };
+          setGiven((previous) => previous ?? initial);
           setEdited((previous) => setValueAtPath(previous ?? initial, path, value));
         },
         () => {
@@ -1736,6 +3059,10 @@ function useMethodForm({
   );
   const uploading = uploadingIds.size > 0;
   const ready = readiness.ready === readiness.total && !uploading;
+  const touched = useMemo(
+    () => uploading || edited !== null && given !== null && !sameRunValues(edited, given, fields),
+    [uploading, edited, given, fields]
+  );
   const attempt = useCallback(() => {
     setAttempted(true);
     return ready;
@@ -1748,12 +3075,16 @@ function useMethodForm({
     uploading,
     ready,
     attempted,
+    touched,
     setValues,
     reset,
     attempt,
+    resets,
     uploadingIds,
     failedUploadIds,
-    dropFile
+    dropFile,
+    fileSource,
+    exampleSource
   };
 }
 function MethodForm({ locale, strings, presentation, ...props }) {
@@ -1777,14 +3108,35 @@ function MethodFormFields({
 }) {
   const s = useFieldStrings();
   const [showOptional, setShowOptional] = useState(false);
-  const { fields, values, setValues, attempted, uploadingIds, failedUploadIds, dropFile } = form;
+  const {
+    fields,
+    values,
+    setValues,
+    reset,
+    attempted,
+    touched,
+    resets,
+    uploadingIds,
+    failedUploadIds,
+    dropFile,
+    fileSource,
+    exampleSource
+  } = form;
   const uploadErrors = useMemo(
     () => new Map([...failedUploadIds].map((id) => [id, s.uploadFailed])),
     [failedUploadIds, s.uploadFailed]
   );
   const env = useMemo(
-    () => ({ disabled, onDropFile: dropFile, uploadingIds, uploadErrors, allowUrl, resolveUrl }),
-    [disabled, dropFile, uploadingIds, uploadErrors, allowUrl, resolveUrl]
+    () => ({
+      disabled,
+      onDropFile: dropFile,
+      uploadingIds,
+      uploadErrors,
+      allowUrl,
+      resolveUrl,
+      fileSource
+    }),
+    [disabled, dropFile, uploadingIds, uploadErrors, allowUrl, resolveUrl, fileSource]
   );
   const folds = (field) => {
     const value = ownProp(values, field.name);
@@ -1812,6 +3164,16 @@ function MethodFormFields({
     return isFilled(value) && !fieldFilled(field, value) ? s.incompleteField : void 0;
   };
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-6", className), children: [
+    exampleSource && /* @__PURE__ */ jsx(
+      FillWithExample,
+      {
+        source: exampleSource,
+        fields,
+        touched,
+        onFill: (next) => reset(next),
+        disabled
+      }
+    ),
     visible.map((field) => /* @__PURE__ */ jsx(
       FieldRenderer,
       {
@@ -1822,7 +3184,7 @@ function MethodFormFields({
         env,
         onChange: (next) => setValues((previous) => ({ ...previous, [field.name]: next }))
       },
-      field.name
+      `${field.name}:${resets}`
     )),
     (folded.length > 0 || structureOpen) && /* @__PURE__ */ jsx(OptionalToggle, { count: folded.length, expanded, onToggle: toggle, noun: "input" })
   ] });
@@ -2319,7 +3681,7 @@ function ResultAt({ segment, children }) {
 var TooltipProvider = TooltipPrimitive.Provider;
 var TooltipRoot = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React2.forwardRef(({ className, sideOffset = 6, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var TooltipContent = React5.forwardRef(({ className, sideOffset = 6, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   TooltipPrimitive.Content,
   {
     ref,
@@ -3301,12 +4663,12 @@ function useResolvedMarkup(markup) {
 }
 var LEX_OPTIONS = { gfm: true, breaks: true };
 function Markdown({ text, className, proseImages }) {
-  const tokens = React2.useMemo(() => marked.lexer(text, LEX_OPTIONS), [text]);
+  const tokens = React5.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 }) }) });
 }
-var ProseImagesContext = React2.createContext("link");
+var ProseImagesContext = React5.createContext("link");
 var HEADING_CLASS = {
   1: "text-[16px] font-semibold",
   2: "text-[14.5px] font-semibold",
@@ -3463,8 +4825,8 @@ function InlineToken({ token }) {
   }
 }
 function ProseImage({ token }) {
-  const mode = React2.use(ProseImagesContext);
-  const insideLink = React2.use(InsideLinkContext);
+  const mode = React5.use(ProseImagesContext);
+  const insideLink = React5.use(InsideLinkContext);
   const src = proseImageUrl(token.href);
   if (!src) return /* @__PURE__ */ jsx(Fragment, { children: token.text });
   if (mode === "load") {
@@ -3490,7 +4852,7 @@ function ProseImage({ token }) {
     }
   );
 }
-var InsideLinkContext = React2.createContext(false);
+var InsideLinkContext = React5.createContext(false);
 function proseImageUrl(href) {
   const url = viewableUrl(href);
   return url && /^https?:/.test(url) ? url : void 0;
@@ -4854,6 +6216,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, 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, cn, fieldControlClass, fieldStringsFor, humanizeFieldName, renderHtmlPdf, resolveHtmlStorageUrls, saveInBrowser, useFieldDomId, useFieldPresentation, useFieldStrings, useMethodForm, useProseImages, useResolveShareUrl, useResolveUrl, useResolvedUrl };
-//# sourceMappingURL=chunk-QCGIH3WY.js.map
-//# sourceMappingURL=chunk-QCGIH3WY.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, brandFillClass, brandFillInkClass, brandFillStrongClass, brandInkClass, cn, fieldControlClass, fieldStringsFor, humanizeFieldName, renderHtmlPdf, resolveHtmlStorageUrls, saveInBrowser, useFieldDomId, useFieldPresentation, useFieldStrings, useMethodForm, useProseImages, useResolveShareUrl, useResolveUrl, useResolvedUrl };
+//# sourceMappingURL=chunk-3XDR2C4I.js.map
+//# sourceMappingURL=chunk-3XDR2C4I.js.map