@pipelex/mthds-form 0.21.0 → 0.23.0

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

@@ -2,7 +2,7 @@ import { planFileSave, planStuffSave, splitFileName, typedFileStem } from './chu
 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, sameRunValues, runValuesFromInputs } from './chunk-ZX52CQJ4.js';
+import { apiInputsFromRunValues, sameRunValues, runValuesFromInputs, setValueAtPath } 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';
@@ -566,20 +566,12 @@ 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:ring-1",
-  brandFocusClass,
+  "focus-visible:border-ring focus-visible:ring-ring/40",
   "disabled:cursor-not-allowed disabled:opacity-50",
   "aria-invalid:border-destructive aria-invalid:ring-destructive/30"
 );
@@ -612,6 +604,20 @@ function DateField({ field, value, onChange, id, error, disabled }) {
   );
 }
 
+// src/react/role-tokens.ts
+var linkTextClass = "text-[color:var(--link,var(--primary,hsl(240_5.9%_10%)))]";
+var selectedFillClass = "bg-[color:var(--selected,color-mix(in_oklab,var(--primary,hsl(240_5.9%_10%))_10%,transparent))]";
+var selectedStateFillClass = "data-[state=on]:bg-[color:var(--selected,color-mix(in_oklab,var(--primary,hsl(240_5.9%_10%))_10%,transparent))]";
+var selectedCheckedFillClass = "aria-checked:bg-[color:var(--selected,color-mix(in_oklab,var(--primary,hsl(240_5.9%_10%))_10%,transparent))]";
+var selectedFillStrongClass = "bg-[color:var(--selected,color-mix(in_oklab,var(--primary,hsl(240_5.9%_10%))_15%,transparent))]";
+var selectedBorderClass = "border-[color:color-mix(in_oklab,var(--link,var(--primary,hsl(240_5.9%_10%)))_40%,transparent)]";
+var selectedStateBorderClass = "data-[state=on]:border-[color:color-mix(in_oklab,var(--link,var(--primary,hsl(240_5.9%_10%)))_40%,transparent)]";
+var selectedHoverBorderClass = "hover:border-[color:color-mix(in_oklab,var(--link,var(--primary,hsl(240_5.9%_10%)))_40%,transparent)]";
+var checkedAccentClass = "accent-[color:var(--link,var(--primary,hsl(240_5.9%_10%)))]";
+var focusOutlineClass = "focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring";
+var focusOutlineInsetClass = "focus-visible:outline-solid focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring";
+var frameFocusOutlineClass = "data-focus-visible:outline-solid data-focus-visible:outline-2 data-focus-visible:-outline-offset-2 data-focus-visible:outline-ring";
+
 // src/react/encoded-file.ts
 function encodedFileSummary(url, strings) {
   const view = readDataUrl(url);
@@ -748,6 +754,7 @@ function ListAction({
       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",
+        focusOutlineClass,
         className
       ),
       children
@@ -838,12 +845,15 @@ var DialogDescription = React5.forwardRef(({ className, ...props }, ref) => /* @
 ));
 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",
+  [
+    "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]:text-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
+    selectedStateFillClass
+  ],
   {
     variants: {
       variant: {
         default: "bg-transparent",
-        outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground"
+        outline: "border border-border bg-transparent hover:bg-accent hover:text-accent-foreground"
       },
       size: {
         default: "h-10 px-3 min-w-10",
@@ -913,7 +923,10 @@ function FilePickerEntry({ onOpen, label, disabled, ref, id }) {
       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",
+      className: cn(
+        "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",
+        focusOutlineClass
+      ),
       children: [
         /* @__PURE__ */ jsx(Folder, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }),
         s.chooseFromSource
@@ -1025,7 +1038,10 @@ function FilePickerBody({
             },
             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"
+            className: cn(
+              "h-11 w-full rounded-md border border-border bg-input pr-3 pl-9 text-[16px] text-foreground placeholder:text-muted-foreground",
+              focusOutlineClass
+            )
           }
         )
       ] }),
@@ -1091,7 +1107,10 @@ function FilePickerBody({
         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",
+        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",
+          focusOutlineClass
+        ),
         children: /* @__PURE__ */ jsx("span", { className: "truncate", children: s.filePickerUse(choices.length, choices[0]?.name) })
       }
     ) })
@@ -1155,7 +1174,10 @@ function SheetHeader({
             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",
+              className: cn(
+                "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",
+                focusOutlineClass
+              ),
               children: /* @__PURE__ */ jsx(X, { className: "size-5", "aria-hidden": "true" })
             }
           )
@@ -1201,9 +1223,9 @@ function FileRow({
       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"
+        "group 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",
+        focusOutlineInsetClass,
+        selectedCheckedFillClass
       ),
       children: [
         /* @__PURE__ */ jsx(
@@ -1216,7 +1238,7 @@ function FileRow({
         ),
         /* @__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" || meta) && /* @__PURE__ */ jsxs("span", { className: "block truncate text-[13px] text-muted-foreground group-aria-checked:text-foreground", children: [
             file.kind === "test" && /* @__PURE__ */ jsxs("span", { className: "text-foreground", children: [
               s.testFile,
               meta && " \xB7 "
@@ -1227,7 +1249,7 @@ function FileRow({
         /* @__PURE__ */ jsx(
           Check,
           {
-            className: cn("size-5 shrink-0 text-foreground", !chosen && "invisible"),
+            className: "invisible size-5 shrink-0 text-foreground group-aria-checked:visible",
             "aria-hidden": "true"
           }
         )
@@ -1246,6 +1268,20 @@ function isReadableLink(url) {
 function dataUrlMime(url) {
   return DATA_URL_MIME_RE.exec(url)?.[1]?.toLowerCase();
 }
+function isThenable(answer) {
+  return (typeof answer === "object" || typeof answer === "function") && answer !== null && typeof answer.then === "function";
+}
+function storedUrlOf(stored) {
+  if (typeof stored === "string") return stored === "" ? void 0 : stored;
+  if (stored === null || typeof stored !== "object") return void 0;
+  const url = stored.url;
+  return typeof url === "string" && url !== "" ? url : void 0;
+}
+function describesValue(local, url) {
+  if (local.boundUrl !== void 0) return local.boundUrl === url;
+  if (local.storedUrl !== void 0) return local.storedUrl === url;
+  return !local.awaitingUpload;
+}
 function DocumentField(props) {
   return /* @__PURE__ */ jsx(FileField, { ...props, category: "document" });
 }
@@ -1274,6 +1310,9 @@ function FileField({
   const [typedUrl, setTypedUrl] = useState(null);
   const [previewOpen, setPreviewOpen] = useState(false);
   const [localPreview, setLocalPreview] = useState(null);
+  const urlInFlight = useRef(void 0);
+  const flightSeen = useRef(false);
+  const localGeneration = useRef(0);
   const [resolved, setResolved] = useState(null);
   const localUrlRef = useRef(null);
   const [pickerOpen, setPickerOpen] = useState(false);
@@ -1282,6 +1321,7 @@ function FileField({
   const setLocal = useCallback((next) => {
     if (localUrlRef.current) URL.revokeObjectURL(localUrlRef.current);
     localUrlRef.current = next?.objectUrl ?? null;
+    localGeneration.current += 1;
     setLocalPreview(next);
   }, []);
   useEffect(() => () => setLocal(null), [setLocal]);
@@ -1308,10 +1348,27 @@ function FileField({
       }
       setRejected(null);
       setDismissedUploadError(null);
-      setLocal({ objectUrl: URL.createObjectURL(file), type: file.type });
-      onDropFile(file);
+      const upload = onDropFile(file);
+      const awaitingUpload = isThenable(upload);
+      setLocal({ objectUrl: URL.createObjectURL(file), type: file.type, awaitingUpload });
+      urlInFlight.current = value?.url;
+      flightSeen.current = false;
+      if (!awaitingUpload) return;
+      const generation = localGeneration.current;
+      Promise.resolve(upload).then(
+        (stored) => {
+          if (localGeneration.current !== generation) return;
+          const storedUrl = storedUrlOf(stored);
+          setLocalPreview(
+            (current) => current ? { ...current, awaitingUpload: false, storedUrl } : current
+          );
+        },
+        () => {
+          if (localGeneration.current === generation) setLocal(null);
+        }
+      );
     },
-    [formats, setLocal, onDropFile]
+    [formats, setLocal, onDropFile, value?.url]
   );
   const busy = disabled || uploading;
   const {
@@ -1367,14 +1424,11 @@ function FileField({
     },
     [setLocal, onChange, dismissUploadError]
   );
-  const localIsCurrent = !!localPreview && (localPreview.boundUrl === void 0 || localPreview.boundUrl === value?.url);
-  const wasUploading = useRef(!!uploading);
+  const localIsCurrent = !!localPreview && describesValue(localPreview, value?.url);
   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]);
+    if (failure !== null) setLocal(null);
+  }, [failure, localPreview, setLocal]);
   const lastUrl = useRef(value?.url);
   useEffect(() => {
     if (lastUrl.current === value?.url) return;
@@ -1383,12 +1437,30 @@ function FileField({
   }, [value?.url, uploadError]);
   useEffect(() => {
     if (!localPreview) return;
-    if (localPreview.boundUrl === void 0) {
-      if (uploading || !value?.url) return;
-      setLocalPreview({ ...localPreview, boundUrl: value.url });
+    if (localPreview.boundUrl !== void 0) {
+      if (value?.url !== localPreview.boundUrl) setLocal(null);
       return;
     }
-    if (value?.url !== localPreview.boundUrl) setLocal(null);
+    if (uploading) {
+      urlInFlight.current = value?.url;
+      flightSeen.current = true;
+    }
+    if (localPreview.storedUrl !== void 0) {
+      if (value?.url === localPreview.storedUrl) {
+        setLocalPreview({ ...localPreview, boundUrl: localPreview.storedUrl });
+      }
+      return;
+    }
+    if (uploading || localPreview.awaitingUpload) return;
+    if (!value?.url) {
+      if (flightSeen.current) setLocal(null);
+      return;
+    }
+    if (value.url === urlInFlight.current) {
+      setLocal(null);
+      return;
+    }
+    setLocalPreview({ ...localPreview, boundUrl: value.url });
   }, [localPreview, value?.url, uploading, setLocal]);
   const hasFile = !!value?.url;
   const localType = localIsCurrent ? localPreview?.type : void 0;
@@ -1549,7 +1621,11 @@ 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",
+            className: cn(
+              "flex w-fit items-center gap-1 rounded-sm font-mono text-[11px] text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50 max-sm:min-h-11",
+              focusOutlineClass,
+              "focus-visible:outline-offset-2"
+            ),
             children: [
               /* @__PURE__ */ jsx(Link2, { className: "h-3 w-3" }),
               s.pasteUrlInstead
@@ -1659,7 +1735,10 @@ function FileChip({
         {
           type: "button",
           onClick: onTogglePreview,
-          className: "inline-flex h-7 shrink-0 items-center gap-1 rounded-md border border-border px-2 text-[11px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground max-sm:h-11 max-sm:px-3",
+          className: cn(
+            "inline-flex h-7 shrink-0 items-center gap-1 rounded-md border border-border px-2 text-[11px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground max-sm:h-11 max-sm:px-3",
+            focusOutlineClass
+          ),
           children: [
             previewOpen ? /* @__PURE__ */ jsx(EyeOff, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Eye, { className: "h-3.5 w-3.5" }),
             s.preview
@@ -1679,7 +1758,10 @@ function ClearButton({ disabled, onClick }) {
       onClick,
       disabled,
       "aria-label": s.removeFileAria,
-      className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50 max-sm:size-11",
+      className: cn(
+        "flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50 max-sm:size-11",
+        focusOutlineClass
+      ),
       children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
     }
   );
@@ -1824,14 +1906,14 @@ function EnumField({ field, value, onChange, id, error, disabled }) {
                 value: option,
                 variant: "outline",
                 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
+                  "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]:font-medium",
+                  selectedStateBorderClass
                 ),
                 children: [
                   value === option && /* @__PURE__ */ jsx(
                     Check,
                     {
-                      className: cn("size-3.5", brandFillInkClass),
+                      className: cn("size-3.5", linkTextClass),
                       strokeWidth: 2.5,
                       "aria-hidden": "true"
                     }
@@ -1926,7 +2008,8 @@ function StepButton({
       "aria-label": label,
       className: cn(
         "flex h-11 w-11 shrink-0 items-center justify-center rounded-md border border-border bg-input text-muted-foreground transition-colors",
-        "hover:border-border hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
+        "hover:border-border hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        focusOutlineClass
       ),
       children
     }
@@ -2003,7 +2086,11 @@ function OptionalToggle({ count, expanded, onToggle, noun = "field" }) {
       type: "button",
       onClick: onToggle,
       "aria-expanded": expanded,
-      className: "flex w-fit items-center gap-1.5 text-[11px] text-muted-foreground transition-colors hover:text-foreground max-sm:min-h-11",
+      className: cn(
+        "flex w-fit items-center gap-1.5 rounded-sm text-[11px] text-muted-foreground transition-colors hover:text-foreground max-sm:min-h-11",
+        focusOutlineClass,
+        "focus-visible:outline-offset-2"
+      ),
       children: [
         expanded ? /* @__PURE__ */ jsx(Minus, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Plus, { className: "h-3 w-3" }),
         expanded ? noun === "field" ? s.hideOptionalFields : s.hideOptionalInputs : noun === "field" ? s.optionalFieldsCount(count) : s.optionalInputsCount(count)
@@ -2102,12 +2189,28 @@ function firstFocusable(within) {
   }
   return null;
 }
+
+// src/react/row-moves.ts
+function destinationOf(order) {
+  return new Map(order.map((source, index) => [source, index]));
+}
+function movedId(id, listId, destination) {
+  const prefix = `${listId}.`;
+  if (!id.startsWith(prefix)) return id;
+  const rest = id.slice(prefix.length);
+  const dot = rest.indexOf(".");
+  const row = dot === -1 ? rest : rest.slice(0, dot);
+  if (!/^\d+$/.test(row)) return id;
+  const index = destination.get(Number(row));
+  if (index === void 0) return void 0;
+  return `${prefix}${index}${dot === -1 ? "" : rest.slice(dot)}`;
+}
 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 [rowKeys, setRowKeys] = useRowKeys(items.length, id, env?.rowMoves);
   const [pickerOpen, setPickerOpen] = useState(false);
   const pickerEntryRef = useRef(null);
   const rowsRef = useRef(null);
@@ -2119,7 +2222,12 @@ function ListField({ field, value, onChange, id, error, env }) {
     onChange(next);
   };
   const removeItem = (index) => {
-    setRowKeys((prev) => prev.filter((_, i) => i !== index));
+    if (!env?.rowMoves) setRowKeys((prev) => prev.filter((_, i) => i !== index));
+    const hostRemoves = env?.onRemoveItem;
+    if (hostRemoves) {
+      hostRemoves(id, index);
+      return;
+    }
     setStaleErrors((prev) => withRenumberedErrors(prev, id, index, env?.uploadErrors));
     onChange(items.filter((_, i) => i !== index));
   };
@@ -2150,7 +2258,7 @@ function ListField({ field, value, onChange, id, error, env }) {
           next.delete(dropId);
           return next;
         });
-        drop(dropId, file);
+        return drop(dropId, file);
       } : void 0
     };
   }, [env, staleErrors]);
@@ -2206,7 +2314,10 @@ function ListField({ field, value, onChange, id, error, env }) {
                 onClick: () => removeItem(index),
                 disabled: env?.disabled || busy,
                 "aria-label": s.removeItemAria(index + 1),
-                className: "mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-destructive disabled:opacity-50 max-sm:mt-0 max-sm:size-11",
+                className: cn(
+                  "mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-destructive disabled:opacity-50 max-sm:mt-0 max-sm:size-11",
+                  focusOutlineClass
+                ),
                 children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" })
               }
             )
@@ -2222,7 +2333,11 @@ function ListField({ field, value, onChange, id, error, env }) {
           disabled: env?.disabled || isFull,
           className: cn(
             "inline-flex h-9 w-full items-center justify-center gap-1.5 rounded-md border border-dashed border-border text-[13px] text-muted-foreground transition-colors max-sm:h-11",
-            "hover:border-primary/40 hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
+            // The edge under the pointer is the accent's, as a selected pill's
+            // is; the fill under it stays neutral.
+            "hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50",
+            selectedHoverBorderClass,
+            focusOutlineClass
           ),
           children: [
             /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
@@ -2297,24 +2412,49 @@ function withRenumberedErrors(stale, listId, removed, hostErrors) {
   }
   return next.size === stale.size && [...next].every(([k, m]) => stale.get(k) === m) ? stale : next;
 }
-function useRowKeys(length) {
+function useRowKeys(length, id, moves) {
+  const latest = moves?.[moves.length - 1]?.seq ?? 0;
   const [state, setState] = useState(() => ({
     keys: Array.from({ length }, (_, i) => i),
-    next: length
+    next: length,
+    seq: latest,
+    id
   }));
-  if (state.keys.length !== length) {
-    setState((prev) => {
-      if (length <= prev.keys.length) return { keys: prev.keys.slice(0, length), next: prev.next };
-      const added = length - prev.keys.length;
-      return {
-        keys: [...prev.keys, ...Array.from({ length: added }, (_, i) => prev.next + i)],
-        next: prev.next + added
-      };
-    });
+  if (state.seq !== latest || state.id !== id || state.keys.length !== length) {
+    setState((prev) => withLength(replayed(prev, moves, latest, id), length));
   }
-  const update = (fn) => setState((prev) => ({ keys: fn(prev.keys), next: prev.next }));
+  const update = (fn) => setState((prev) => ({ ...prev, keys: fn(prev.keys) }));
   return [state.keys, update];
 }
+function replayed(state, moves, latest, id) {
+  let { keys, next } = state;
+  let tracked = state.id;
+  for (const move of moves ?? []) {
+    if (move.seq <= state.seq || tracked === void 0) continue;
+    if (move.listId === tracked) {
+      const before = keys;
+      keys = [];
+      for (const source of move.order) {
+        const key = before[source];
+        if (key === void 0) keys.push(next++);
+        else keys.push(key);
+      }
+    } else {
+      tracked = movedId(tracked, move.listId, destinationOf(move.order));
+    }
+  }
+  return { keys, next, seq: latest, id };
+}
+function withLength(state, length) {
+  if (state.keys.length === length) return state;
+  if (length < state.keys.length) return { ...state, keys: state.keys.slice(0, length) };
+  const added = length - state.keys.length;
+  return {
+    ...state,
+    keys: [...state.keys, ...Array.from({ length: added }, (_, i) => state.next + i)],
+    next: state.next + added
+  };
+}
 function emptyValue(field) {
   switch (field.kind) {
     case "boolean":
@@ -2574,7 +2714,10 @@ var DropdownMenuItem = React5.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 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 buttonClass = cn(
+  "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",
+  focusOutlineClass
+);
 var secondaryClass = cn(buttonClass, "border border-border text-foreground hover:bg-muted");
 var primaryClass = cn(
   buttonClass,
@@ -2702,7 +2845,10 @@ function FillWithExample({
                   {
                     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",
+                    className: cn(
+                      "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",
+                      focusOutlineClass
+                    ),
                     children: /* @__PURE__ */ jsx(X, { className: "size-5", "aria-hidden": "true" })
                   }
                 )
@@ -2716,7 +2862,10 @@ function FillWithExample({
                       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",
+                      className: cn(
+                        "flex min-h-16 min-w-0 flex-1 items-center px-4 py-2.5 text-left transition-colors hover:bg-muted/60",
+                        focusOutlineInsetClass
+                      ),
                       children: /* @__PURE__ */ jsx("span", { className: "truncate text-[16px] font-medium text-foreground", children: example.name })
                     }
                   ),
@@ -2728,7 +2877,10 @@ function FillWithExample({
                       {
                         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",
+                        className: cn(
+                          "flex size-11 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                          focusOutlineInsetClass
+                        ),
                         children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-5", "aria-hidden": "true" })
                       }
                     ),
@@ -2872,7 +3024,10 @@ function RenameExampleDialog({
               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"
+              className: cn(
+                "h-11 w-full rounded-md border border-border bg-input px-3 text-[16px] text-foreground",
+                focusOutlineClass
+              )
             }
           )
         ] }),
@@ -2967,6 +3122,110 @@ function withoutId(ids, id) {
   next.delete(id);
   return next;
 }
+var NO_UPLOADS = /* @__PURE__ */ new Map();
+var NO_MOVES = [];
+var NOTHING_HELD = {
+  edited: null,
+  failed: EMPTY_IDS,
+  uploads: NO_UPLOADS,
+  moves: NO_MOVES
+};
+function withoutEntry(entries, id) {
+  if (!entries.has(id)) return entries;
+  const next = new Map(entries);
+  next.delete(id);
+  return next;
+}
+function fileUrlAt(values, id) {
+  const node = valueAt(values, id);
+  if (node === null || typeof node !== "object") return void 0;
+  const url = ownProp(node, "url");
+  return typeof url === "string" && url !== "" ? url : void 0;
+}
+function valueAt(values, id) {
+  let node = values;
+  for (const key of id.split(".")) {
+    if (node === null || typeof node !== "object") return void 0;
+    node = ownProp(node, key);
+  }
+  return node;
+}
+function written(held, initial, update) {
+  const before = held.edited ?? initial;
+  const after = update(before);
+  if (after === held.edited) return held;
+  const replaced = [...held.failed].filter((id) => fileUrlAt(before, id) !== fileUrlAt(after, id));
+  if (replaced.length === 0) return { ...held, edited: after };
+  const failed = new Set(held.failed);
+  for (const id of replaced) failed.delete(id);
+  return { ...held, edited: after, failed };
+}
+function uploadDropped(held, initial, id, token) {
+  const uploads = new Map(held.uploads);
+  uploads.set(id, { token, over: fileUrlAt(held.edited ?? initial, id) });
+  return { ...held, failed: withoutId(held.failed, id), uploads };
+}
+function placeOf(held, token) {
+  for (const entry of held.uploads) if (entry[1].token === token) return entry;
+  return void 0;
+}
+function uploadFailed(held, initial, token) {
+  const place = placeOf(held, token);
+  if (!place) return held;
+  const [id, upload] = place;
+  const stillThere = fileUrlAt(held.edited ?? initial, id) === upload.over;
+  return {
+    ...held,
+    failed: stillThere ? withId(held.failed, id) : held.failed,
+    uploads: withoutEntry(held.uploads, id)
+  };
+}
+function uploadLanded(held, initial, token, value) {
+  const place = placeOf(held, token);
+  if (!place) return held;
+  const [id] = place;
+  const next = written(held, initial, (before) => setValueAtPath(before, id.split("."), value));
+  return { ...next, uploads: withoutEntry(next.uploads, id) };
+}
+function rowsMoved(held, initial, listId, order, seq) {
+  const before = held.edited ?? initial;
+  const rows = valueAt(before, listId);
+  if (!Array.isArray(rows)) return held;
+  const sources = order(rows);
+  if (!sources) return held;
+  const after = setValueAtPath(
+    before,
+    listId.split("."),
+    sources.map((source) => rows[source])
+  );
+  const destination = destinationOf(sources);
+  const failed = /* @__PURE__ */ new Set();
+  for (const id of held.failed) {
+    const moved = movedId(id, listId, destination);
+    if (moved !== void 0) failed.add(moved);
+  }
+  const uploads = /* @__PURE__ */ new Map();
+  for (const [id, upload] of held.uploads) {
+    const moved = movedId(id, listId, destination);
+    if (moved !== void 0) uploads.set(moved, upload);
+  }
+  const moves = [...held.moves, { seq, listId, order: sources }];
+  return { edited: after, failed, uploads, moves };
+}
+function isRow(rows, index) {
+  return Number.isInteger(index) && index >= 0 && index < rows.length;
+}
+function withoutRow(index) {
+  return (rows) => isRow(rows, index) ? rows.map((_, i) => i).filter((i) => i !== index) : null;
+}
+function rowMovedTo(from, to) {
+  return (rows) => {
+    if (!isRow(rows, from) || !isRow(rows, to) || from === to) return null;
+    const order = rows.map((_, i) => i).filter((i) => i !== from);
+    order.splice(to, 0, from);
+    return order;
+  };
+}
 function orderFields(fields, order) {
   if (!order || order.length === 0) return fields;
   const rank = (field) => {
@@ -2995,39 +3254,71 @@ function useMethodForm({
     if (typeof initialValues === "function") return initialValues(seedInputs(fields));
     return initialValues ?? seedInputs(fields);
   }, [initialValues, fields]);
-  const [edited, setEdited] = useState(null);
+  const store = useRef(NOTHING_HELD);
+  const [held, setHeld] = useState(NOTHING_HELD);
+  const commit = useCallback((next) => {
+    if (next === store.current) return;
+    store.current = next;
+    setHeld(next);
+  }, []);
+  const edited = held.edited;
+  const failedUploadIds = held.failed;
+  const uploadingIds = useMemo(
+    () => held.uploads.size === 0 ? EMPTY_IDS : new Set(held.uploads.keys()),
+    [held.uploads]
+  );
   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 moveCounter = useRef(0);
   const values = edited ?? initial;
   const setValues = useCallback(
     (next) => {
       setGiven((previous) => previous ?? initial);
-      setEdited((previous) => typeof next === "function" ? next(previous ?? initial) : next);
+      commit(
+        written(
+          store.current,
+          initial,
+          (before) => typeof next === "function" ? next(before) : next
+        )
+      );
+    },
+    [initial, commit]
+  );
+  const moveRows = useCallback(
+    (listId, order2) => {
+      const seq = moveCounter.current + 1;
+      const next = rowsMoved(store.current, initial, listId, order2, seq);
+      if (next === store.current) return;
+      moveCounter.current = seq;
+      setGiven((previous) => previous ?? initial);
+      commit(next);
     },
-    [initial]
+    [initial, commit]
+  );
+  const removeItem = useCallback(
+    (listId, index) => moveRows(listId, withoutRow(index)),
+    [moveRows]
+  );
+  const moveItem = useCallback(
+    (listId, from, to) => moveRows(listId, rowMovedTo(from, to)),
+    [moveRows]
+  );
+  const reset = useCallback(
+    (next) => {
+      commit({ edited: next ?? null, failed: EMPTY_IDS, uploads: NO_UPLOADS, moves: NO_MOVES });
+      setGiven(next ?? null);
+      setAttempted(false);
+      setResets((count) => count + 1);
+    },
+    [commit]
   );
-  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;
     return (id, file) => {
       const token = ++uploadCounter.current;
-      pendingUploads.current.set(id, token);
-      const current = () => pendingUploads.current.get(id) === token;
-      setUploadingIds((previous) => withId(previous, id));
-      setFailedUploadIds((previous) => withoutId(previous, id));
+      commit(uploadDropped(store.current, initial, id, token));
       const path = id.split(".");
       let upload;
       try {
@@ -3035,23 +3326,21 @@ function useMethodForm({
       } catch (error) {
         upload = Promise.reject(error);
       }
-      upload.then(
-        (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));
-        },
-        () => {
-          if (current()) setFailedUploadIds((previous) => withId(previous, id));
+      const landed = upload.then((stored) => {
+        if (!placeOf(store.current, token)) {
+          throw new Error(
+            `A newer file, a reset or the removal of its row replaced the upload dropped at "${id}".`
+          );
         }
-      ).finally(() => {
-        if (!current()) return;
-        pendingUploads.current.delete(id);
-        setUploadingIds((previous) => withoutId(previous, id));
+        const value = typeof stored === "string" ? { url: stored, filename: file.name } : { url: stored.url, filename: stored.filename ?? file.name };
+        setGiven((previous) => previous ?? initial);
+        commit(uploadLanded(store.current, initial, token, value));
+        return value;
       });
+      landed.then(void 0, () => commit(uploadFailed(store.current, initial, token)));
+      return landed;
     };
-  }, [uploadFile, initial]);
+  }, [uploadFile, initial, commit]);
   const readiness = useMemo(() => computeReadiness(fields, values), [fields, values]);
   const inputs = useMemo(
     () => apiInputsFromRunValues(values, fields, contract.inputs),
@@ -3077,6 +3366,9 @@ function useMethodForm({
     attempted,
     touched,
     setValues,
+    removeItem,
+    moveItem,
+    rowMoves: held.moves,
     reset,
     attempt,
     resets,
@@ -3112,6 +3404,8 @@ function MethodFormFields({
     fields,
     values,
     setValues,
+    removeItem,
+    rowMoves,
     reset,
     attempted,
     touched,
@@ -3132,11 +3426,27 @@ function MethodFormFields({
       onDropFile: dropFile,
       uploadingIds,
       uploadErrors,
+      // A list's remove button goes through the form, which carries a failed
+      // upload, or one in flight, along with the rows it renumbers, and logs
+      // the move for every list to move its rows' identities the same way,
+      // whether the button or the host moved them.
+      onRemoveItem: removeItem,
+      rowMoves,
       allowUrl,
       resolveUrl,
       fileSource
     }),
-    [disabled, dropFile, uploadingIds, uploadErrors, allowUrl, resolveUrl, fileSource]
+    [
+      disabled,
+      dropFile,
+      uploadingIds,
+      uploadErrors,
+      removeItem,
+      rowMoves,
+      allowUrl,
+      resolveUrl,
+      fileSource
+    ]
   );
   const folds = (field) => {
     const value = ownProp(values, field.name);
@@ -3678,6 +3988,83 @@ function ResultAt({ segment, children }) {
   );
   return /* @__PURE__ */ jsx(ResultLocationContext, { value: location, children });
 }
+function FocusFrame({ ref, className, ...props }) {
+  const [frame, setFrame] = useState(null);
+  const focused = useFrameFocus(frame);
+  const attach = useCallback(
+    (node) => {
+      setFrame(node);
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  return /* @__PURE__ */ jsx(
+    "iframe",
+    {
+      ...props,
+      ref: attach,
+      ...focused ? { "data-focus-visible": "" } : {},
+      className: cn(className, frameFocusOutlineClass)
+    }
+  );
+}
+var frames = /* @__PURE__ */ new Set();
+var settling;
+var refresh = () => {
+  for (const check of frames) check();
+};
+var onBlur = () => {
+  refresh();
+  clearTimeout(settling);
+  settling = setTimeout(refresh, 0);
+};
+function listen(win) {
+  win.addEventListener("blur", onBlur);
+  win.addEventListener("focus", refresh);
+}
+function unlisten(win) {
+  win.removeEventListener("blur", onBlur);
+  win.removeEventListener("focus", refresh);
+}
+function useFrameFocus(frame) {
+  const [focused, setFocused] = useState(false);
+  useEffect(() => {
+    if (!frame) return;
+    const check = () => setFocused(document.hasFocus() && document.activeElement === frame);
+    if (frames.size === 0) {
+      listen(window);
+      document.addEventListener("focusin", refresh);
+    }
+    frames.add(check);
+    let own = null;
+    const attachOwn = () => {
+      try {
+        own = frame.contentWindow;
+        if (own) listen(own);
+      } catch {
+        own = null;
+      }
+    };
+    attachOwn();
+    frame.addEventListener("load", attachOwn);
+    return () => {
+      frame.removeEventListener("load", attachOwn);
+      try {
+        if (own) unlisten(own);
+      } catch {
+      }
+      frames.delete(check);
+      if (frames.size === 0) {
+        unlisten(window);
+        document.removeEventListener("focusin", refresh);
+        clearTimeout(settling);
+        settling = void 0;
+      }
+    };
+  }, [frame]);
+  return focused;
+}
 var TooltipProvider = TooltipPrimitive.Provider;
 var TooltipRoot = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
@@ -3819,7 +4206,10 @@ function FileNameDialog({ stem: stem2, extension, onConfirm, onCancel }) {
                 {
                   type: "button",
                   onClick: onCancel,
-                  className: "rounded-md border border-border px-3 py-1 text-[12px] text-muted-foreground hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1",
+                  className: cn(
+                    "rounded-md border border-border px-3 py-1 text-[12px] text-muted-foreground hover:text-foreground",
+                    focusOutlineClass
+                  ),
                   children: s.fileNameCancel
                 }
               ),
@@ -3828,7 +4218,10 @@ function FileNameDialog({ stem: stem2, extension, onConfirm, onCancel }) {
                 {
                   type: "button",
                   onClick: () => onConfirm(value),
-                  className: "rounded-md bg-primary px-3 py-1 text-[12px] font-medium text-primary-foreground hover:bg-primary/90 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1",
+                  className: cn(
+                    "rounded-md bg-primary px-3 py-1 text-[12px] font-medium text-primary-foreground hover:bg-primary/90",
+                    focusOutlineClass
+                  ),
                   children: s.fileNameConfirm
                 }
               )
@@ -4463,7 +4856,8 @@ function PdfDownloadButton({
         title: failed ? s.downloadPdfFailed : name,
         ...failed ? { "aria-describedby": statusId } : {},
         className: cn(
-          "inline-flex shrink-0 items-center gap-1.5 rounded-md px-2 py-1 text-[12px] font-medium focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1 disabled:opacity-70",
+          "inline-flex shrink-0 items-center gap-1.5 rounded-md px-2 py-1 text-[12px] font-medium disabled:opacity-70",
+          focusOutlineClass,
           primary ? "bg-primary text-primary-foreground hover:bg-primary/90" : "border border-border text-muted-foreground hover:text-foreground",
           failed && (primary ? "bg-destructive text-white hover:bg-destructive/90" : "text-destructive"),
           className
@@ -4581,28 +4975,31 @@ function HtmlPreview({
             ]
           }
         )
-      ) : doc === null ? null : /* @__PURE__ */ jsx(
-        "iframe",
-        {
-          ref: frameRef,
-          title: content.cssClass ? `HTML result (${content.cssClass})` : "HTML result",
-          srcDoc: doc,
-          onLoad,
-          sandbox: "allow-same-origin",
-          style: {
-            display: "block",
-            width: "100%",
-            border: 0,
-            height: height === 0 ? void 0 : limit === void 0 ? height : Math.min(height, limit),
-            ...limit === void 0 ? {} : { maxHeight: limit },
-            // Its height is the page's, as a flex basis: in a bounded flex
-            // column it shrinks to what is left (never below the floor) and the
-            // page scrolls inside the frame; anywhere else it is the page's.
-            // `minHeight` is explicit because a replaced element's automatic
-            // minimum is its own height, which would forbid the shrink.
-            ...filling && height > 0 ? { flex: "0 1 auto", minHeight: Math.min(height, FILL_MIN_HEIGHT) } : {}
+      ) : doc === null ? null : (
+        // A tab stop, whose keyboard focus `FocusFrame` draws.
+        /* @__PURE__ */ jsx(
+          FocusFrame,
+          {
+            ref: frameRef,
+            title: content.cssClass ? `HTML result (${content.cssClass})` : "HTML result",
+            srcDoc: doc,
+            onLoad,
+            sandbox: "allow-same-origin",
+            style: {
+              display: "block",
+              width: "100%",
+              border: 0,
+              height: height === 0 ? void 0 : limit === void 0 ? height : Math.min(height, limit),
+              ...limit === void 0 ? {} : { maxHeight: limit },
+              // Its height is the page's, as a flex basis: in a bounded flex
+              // column it shrinks to what is left (never below the floor) and the
+              // page scrolls inside the frame; anywhere else it is the page's.
+              // `minHeight` is explicit because a replaced element's automatic
+              // minimum is its own height, which would forbid the shrink.
+              ...filling && height > 0 ? { flex: "0 1 auto", minHeight: Math.min(height, FILL_MIN_HEIGHT) } : {}
+            }
           }
-        }
+        )
       )
     }
   );
@@ -4812,7 +5209,7 @@ function InlineToken({ token }) {
             href,
             target: "_blank",
             rel: "noreferrer noopener",
-            className: "underline underline-offset-2",
+            className: cn("rounded-sm underline underline-offset-2", focusOutlineClass),
             children: /* @__PURE__ */ jsx(Inline, { tokens: link.tokens })
           }
         ) })
@@ -4847,7 +5244,7 @@ function ProseImage({ token }) {
       href: src,
       target: "_blank",
       rel: "noreferrer noopener",
-      className: "underline underline-offset-2",
+      className: cn("rounded-sm underline underline-offset-2", focusOutlineClass),
       children: token.text || src
     }
   );
@@ -5036,7 +5433,8 @@ function CopyButton({
       ...title ? { title } : {},
       "aria-label": label,
       className: cn(
-        "shrink-0 rounded p-0.5 text-muted-foreground hover:bg-card hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1",
+        "shrink-0 rounded p-0.5 text-muted-foreground hover:bg-card hover:text-foreground",
+        focusOutlineClass,
         FILE_BUTTON_ON_A_PHONE
       ),
       children: copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "size-3.5" }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": true, className: "size-3.5" })
@@ -5076,7 +5474,10 @@ function FileRef({
         target: "_blank",
         rel: "noreferrer",
         title,
-        className: "min-w-0 truncate font-mono text-[12px] text-foreground underline underline-offset-2 max-sm:min-w-11 max-sm:leading-11",
+        className: cn(
+          "min-w-0 truncate rounded-sm font-mono text-[12px] text-foreground underline underline-offset-2 max-sm:min-w-11 max-sm:leading-11",
+          focusOutlineClass
+        ),
         children: label
       }
     ) : /* @__PURE__ */ jsx(
@@ -5157,7 +5558,8 @@ ${planned.url ?? planned.text}`;
         title: failed ? s.downloadFileFailed : label,
         ...failed ? { "aria-describedby": statusId } : {},
         className: cn(
-          "shrink-0 rounded p-0.5 hover:bg-card focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1 disabled:opacity-60",
+          "shrink-0 rounded p-0.5 hover:bg-card disabled:opacity-60",
+          focusOutlineClass,
           FILE_BUTTON_ON_A_PHONE,
           failed ? "text-destructive" : "text-muted-foreground hover:text-foreground"
         ),
@@ -5193,7 +5595,7 @@ function previewableUrl(content, resolve) {
 }
 function DocumentPreview({ url, name }) {
   return /* @__PURE__ */ jsx(
-    "iframe",
+    FocusFrame,
     {
       src: url,
       title: name,
@@ -5235,7 +5637,10 @@ function DocumentValue({ value }) {
           type: "button",
           onClick: () => setOpen((current) => !current),
           "aria-expanded": open,
-          className: "flex shrink-0 items-center gap-1.5 rounded-md border border-border px-2 py-1 text-[12px] text-muted-foreground hover:bg-card hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1 max-sm:min-h-11 max-sm:px-3",
+          className: cn(
+            "flex shrink-0 items-center gap-1.5 rounded-md border border-border px-2 py-1 text-[12px] text-muted-foreground hover:bg-card hover:text-foreground max-sm:min-h-11 max-sm:px-3",
+            focusOutlineClass
+          ),
           children: [
             open ? /* @__PURE__ */ jsx(EyeOff, { "aria-hidden": true, className: "size-3.5" }) : /* @__PURE__ */ jsx(Eye, { "aria-hidden": true, className: "size-3.5" }),
             s.preview
@@ -5271,7 +5676,10 @@ function ImageValue({
           target: "_blank",
           rel: "noreferrer",
           title: content.url,
-          className: inGallery || compact ? "inline-block" : "block w-full",
+          className: cn(
+            inGallery || compact ? "inline-block" : "block w-full",
+            focusOutlineInsetClass
+          ),
           children: /* @__PURE__ */ jsx(
             LoadingImage,
             {
@@ -5456,7 +5864,10 @@ function isInlineColumn(field) {
 var CELL_LENGTH_LIMIT = 80;
 var EXPAND_COLUMN = "var(--expand-column,2rem)";
 var EXPAND_COLUMN_WIDTH = "[--expand-column:2rem] max-sm:[--expand-column:3.25rem]";
-var TOGGLE = "mt-0.5 flex size-6 items-center justify-center rounded text-muted-foreground hover:bg-card hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1 max-sm:mt-0 max-sm:size-11";
+var TOGGLE = cn(
+  "mt-0.5 flex size-6 items-center justify-center rounded text-muted-foreground hover:bg-card hover:text-foreground max-sm:mt-0 max-sm:size-11",
+  focusOutlineClass
+);
 var STACK_NEVER_UP_TO = 3;
 var STACK_ALWAYS_BEYOND = 6;
 function stackingFor(columns) {
@@ -5600,6 +6011,7 @@ function ObjectTable({
         ...fits ? {} : { tabIndex: 0 },
         className: cn(
           "overflow-x-auto rounded-lg border border-border",
+          focusOutlineInsetClass,
           EXPAND_COLUMN_WIDTH,
           fits && "@container"
         ),
@@ -6027,7 +6439,10 @@ function JsonView({ value }) {
           void navigator.clipboard.writeText(text).then(() => setCopied(true));
         },
         "aria-label": s.copyJson,
-        className: "absolute right-2 top-2 rounded border border-border bg-card p-1 text-muted-foreground hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1",
+        className: cn(
+          "absolute right-2 top-2 rounded border border-border bg-card p-1 text-muted-foreground hover:text-foreground",
+          focusOutlineClass
+        ),
         children: copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "size-3.5" }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": true, className: "size-3.5" })
       }
     ),
@@ -6157,7 +6572,10 @@ function StuffPanel({
                 onClick: () => void handleDownload(),
                 disabled: savingShown,
                 "aria-label": page ? s.downloadHtml : s.download,
-                className: "inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-[12px] text-muted-foreground hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1 disabled:opacity-60",
+                className: cn(
+                  "inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-[12px] text-muted-foreground hover:text-foreground disabled:opacity-60",
+                  focusOutlineClass
+                ),
                 children: [
                   savingShown ? /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsx(Download, { className: "h-3.5 w-3.5" }),
                   savingShown ? s.downloading : page ? s.downloadHtml : s.download
@@ -6178,7 +6596,8 @@ function StuffPanel({
                     onClick: () => setView(id),
                     "aria-pressed": view === id,
                     className: cn(
-                      "rounded px-2 py-0.5 text-[12px] focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1",
+                      "rounded px-2 py-0.5 text-[12px]",
+                      focusOutlineClass,
                       view === id ? "bg-card font-medium text-foreground" : "text-muted-foreground hover:text-foreground"
                     ),
                     children: labels[id]
@@ -6216,6 +6635,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, 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
+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-NOSHTDID.js.map
+//# sourceMappingURL=chunk-NOSHTDID.js.map