@pipelex/mthds-form 0.30.0 → 0.31.0

package/dist/{chunk-JCFALTTY.js → chunk-ENK5QTUK.js}

@@ -1,15 +1,15 @@
+import { apiInputsFromRunValues, sameRunValues, runValuesFromInputs, setValueAtPath } from './chunk-2UCH4AAO.js';
 import { planFileSave, planStuffSave, splitFileName, typedFileStem } from './chunk-4VAO6BDE.js';
 import { seedInputs, closeOptionalStructures, openOptionalStructures } from './chunk-VH5CDQDR.js';
 import { sourceFileValue, roomForChosenFiles, roomForDroppedFiles, addChosenFiles, placeDroppedFiles, chosenFilesAdded } from './chunk-L23R3JNQ.js';
 import { readStuffFile } from './chunk-56WECFBD.js';
-import { apiInputsFromRunValues, sameRunValues, runValuesFromInputs, setValueAtPath } from './chunk-ZX52CQJ4.js';
+import { shownAsOptional, isFoldedOptional, anyOptionalStructureOpen, isOptionalStructure, computeReadiness, optionalStructureOpen, mustBeFilled, fieldFilled, isFilled } from './chunk-XO5OENNF.js';
 import { enumValueLabeler, humanizeFieldName, humanizeEnumValue } from './chunk-GHVVULHY.js';
 import { TYPED_SCALAR_MARKERS, viewableUrl, splitCitations, webHref, isNativeDateNode, isNativeHtmlNode, readHtmlContent, isNativeCompositeNode, readCompositeContent, isNativePageNode, nativeVerdictOf, isNativeSearchResultNode, readSearchResultContent, isNativeValueNode, readDateContent, formatDateContent, readPageContent, readYesNoContent, readRatingContent, readChoiceContent, readDocumentContent, readImageContent, readDataUrl, citedSource } from './chunk-QQK6Y55E.js';
-import { buildRunFields } from './chunk-ZB4RYUKV.js';
+import { buildRunFields } from './chunk-HVWE3TTC.js';
+import { ownProp } from './chunk-V3OV2XQT.js';
 import { conceptCategory } from './chunk-FABY3DEY.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';
@@ -88,7 +88,7 @@ var Switch = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   SwitchPrimitives.Root,
   {
     className: cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted-foreground",
       "max-sm:relative max-sm:after:absolute max-sm:after:-inset-x-0.5 max-sm:after:-inset-y-3 max-sm:after:content-['']",
       className
     ),
@@ -582,7 +582,18 @@ function FieldShell({
         }
       ),
       !isApp && /* @__PURE__ */ jsx(ConceptPill, { conceptRef, category }),
-      !required && /* @__PURE__ */ jsx("span", { className: "ml-auto font-mono text-[10px] uppercase tracking-wider text-muted-foreground", children: s.optionalBadge })
+      !required && // In `app` the mark is in the body face, as the label beside it is:
+      // a monospace tag was a third face on a host's page.
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "ml-auto text-[10px] uppercase tracking-wider text-muted-foreground",
+            !isApp && "font-mono"
+          ),
+          children: s.optionalBadge
+        }
+      )
     ] }),
     description && /* @__PURE__ */ jsx("p", { className: "text-[12px] leading-relaxed text-muted-foreground", children: description }),
     /* @__PURE__ */ jsx(
@@ -1715,7 +1726,8 @@ function FileField({
             disabled: busy,
             onClick: () => setShowUrl(true),
             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",
+              "flex w-fit items-center gap-1 rounded-sm text-[11px] text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50 max-sm:min-h-11",
+              presentation !== "app" && "font-mono",
               focusOutlineClass,
               "focus-visible:outline-offset-2"
             ),
@@ -2192,10 +2204,13 @@ function OptionalToggle({ count, expanded, onToggle, noun = "field" }) {
   );
 }
 var StructureDepthContext = createContext(0);
-function structureGrouping(depth, labelled) {
+var FramedFormContext = createContext(false);
+function structureGrouping(depth, labelled, framed) {
   if (!labelled) return "none";
-  return depth === 0 ? "box" : "rule";
+  if (depth > 0) return "rule";
+  return framed ? "section" : "box";
 }
+var SECTION_ERROR_EDGE = "pointer-events-none absolute inset-y-0 -start-[7px] m-0 w-[3px] rounded-full bg-destructive";
 function structureNameClass(isApp, depth) {
   if (!isApp) return "font-mono text-[13px] font-medium leading-none";
   return cn(
@@ -2210,7 +2225,7 @@ function ObjectField({ field, value, onChange, id, error, env }) {
   const depth = use(StructureDepthContext);
   const data = value ?? {};
   const label = fieldLabel(field.title, field.name, presentation);
-  const grouping = structureGrouping(depth, label.trim() !== "");
+  const grouping = structureGrouping(depth, label.trim() !== "", use(FramedFormContext));
   const domId = useFieldDomId(id);
   const setChild = (name, childValue) => onChange({ ...data, [name]: childValue });
   const folded = field.fields.filter((f) => isFoldedOptional(f, ownProp(data, f.name)));
@@ -2233,10 +2248,13 @@ function ObjectField({ field, value, onChange, id, error, env }) {
     "aria-labelledby": nameId,
     "aria-describedby": field.description ? descriptionId : void 0
   };
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", ...group, children: [
+  const section = grouping === "section";
+  const caption = error && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-destructive", role: "alert", children: error });
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [
       /* @__PURE__ */ jsx("span", { id: nameId, className: cn("text-foreground", structureNameClass(isApp, depth)), children: label }),
-      !isApp && /* @__PURE__ */ jsx(ConceptPill, { conceptRef: field.conceptRef, category: "structured" })
+      !isApp && /* @__PURE__ */ jsx(ConceptPill, { conceptRef: field.conceptRef, category: "structured" }),
+      section && caption
     ] }),
     field.description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "text-[12px] leading-relaxed text-muted-foreground", children: field.description }),
     /* @__PURE__ */ jsxs(
@@ -2246,8 +2264,9 @@ function ObjectField({ field, value, onChange, id, error, env }) {
         className: cn(
           "space-y-4",
           grouping === "box" && "rounded-lg border bg-card/40 p-4 max-sm:p-3",
+          grouping === "section" && "pt-2",
           grouping === "rule" && "border-l-2 pl-4 max-sm:pl-3",
-          grouping !== "none" && (error ? "border-destructive/50" : "border-border")
+          (grouping === "box" || grouping === "rule") && (error ? "border-destructive/50" : "border-border")
         ),
         children: [
           /* @__PURE__ */ jsx(StructureDepthContext, { value: depth + 1, children: visible.map((child) => /* @__PURE__ */ jsx(
@@ -2273,8 +2292,26 @@ function ObjectField({ field, value, onChange, id, error, env }) {
         ]
       }
     ),
-    error && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-destructive", role: "alert", children: error })
+    !section && caption
   ] });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: section ? void 0 : "space-y-2",
+      "data-form-section": section ? "" : void 0,
+      ...group,
+      children: section ? (
+        // The section's content, without the padding `MethodForm`'s
+        // hairlines give the section's own box: what the error edge runs
+        // beside. Positioned whether or not it is in error, so an error
+        // changes nothing a descendant is placed against.
+        /* @__PURE__ */ jsxs("div", { className: "relative space-y-2", children: [
+          error && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-error-edge": "", className: SECTION_ERROR_EDGE }),
+          content
+        ] })
+      ) : content
+    }
+  );
 }
 
 // src/react/focus.ts
@@ -2416,6 +2453,7 @@ function ListField({ field, value, onChange, id, error, env }) {
     onChange(items.filter((_, i) => i !== index));
   };
   const addItem = () => onChange([...items, emptyValue(field.item)]);
+  const structuredRows = field.item.kind === "object";
   const busy = listIsBusy(id, env?.uploadingIds) || arriving.size > 0;
   const hostErrors = env?.uploadErrors;
   useEffect(() => {
@@ -2522,8 +2560,17 @@ function ListField({ field, value, onChange, id, error, env }) {
         }
       ),
       !isApp && /* @__PURE__ */ jsx(ConceptPill, { conceptRef: field.conceptRef, category: "list" }),
-      /* @__PURE__ */ jsx("span", { className: "font-mono text-[10.5px] text-muted-foreground", children: field.itemCount !== void 0 && field.maxItemCount === field.itemCount ? s.itemsCountOf(items.length, field.itemCount) : s.itemsCount(items.length) }),
-      shownAsOptional(field) && /* @__PURE__ */ jsx("span", { className: "ml-auto font-mono text-[10px] uppercase tracking-wider text-muted-foreground", children: s.optionalBadge })
+      /* @__PURE__ */ jsx("span", { className: cn("text-[10.5px] text-muted-foreground", !isApp && "font-mono"), children: field.itemCount !== void 0 && field.maxItemCount === field.itemCount ? s.itemsCountOf(items.length, field.itemCount) : s.itemsCount(items.length) }),
+      shownAsOptional(field) && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "ml-auto text-[10px] uppercase tracking-wider text-muted-foreground",
+            !isApp && "font-mono"
+          ),
+          children: s.optionalBadge
+        }
+      )
     ] }),
     field.description && /* @__PURE__ */ jsx("p", { className: "text-[12px] leading-relaxed text-muted-foreground", children: field.description }),
     /* @__PURE__ */ jsxs("div", { ref: rowsRef, className: "space-y-2", children: [
@@ -2532,10 +2579,26 @@ function ListField({ field, value, onChange, id, error, env }) {
         "div",
         {
           "data-list-row": true,
-          className: "flex items-start gap-2 rounded-md border border-border bg-card/40 p-3",
+          className: cn(
+            "rounded-md border border-border bg-card/40 p-3",
+            // A row holding a structure puts its number and its remove
+            // button on a line of their own, so its fields take the row's
+            // whole width: beside the button every input in the row ended
+            // a button short of the edge, a third of a phone's row.
+            structuredRows ? "grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-2 gap-y-1" : "flex items-start gap-2"
+          ),
           children: [
-            /* @__PURE__ */ jsx("span", { className: "mt-1 w-5 shrink-0 text-center font-mono text-[11px] text-muted-foreground", children: index + 1 }),
-            /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "shrink-0 font-mono text-[11px] text-muted-foreground",
+                  structuredRows ? "col-start-1 row-start-1" : "mt-1 w-5 text-center"
+                ),
+                children: index + 1
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: structuredRows ? "col-span-3 row-start-2 min-w-0" : "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
               FieldRenderer,
               {
                 field: {
@@ -2558,7 +2621,8 @@ function ListField({ field, value, onChange, id, error, env }) {
                 disabled: env?.disabled || busy,
                 "aria-label": s.removeItemAria(index + 1),
                 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",
+                  "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:size-11",
+                  structuredRows ? "col-start-3 row-start-1" : "mt-0.5 max-sm:mt-0",
                   focusOutlineClass
                 ),
                 children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" })
@@ -3719,8 +3783,8 @@ function useMethodForm({
     exampleSource
   };
 }
-function MethodForm({ locale, strings, presentation, ...props }) {
-  let body = /* @__PURE__ */ jsx(MethodFormFields, { ...props });
+function MethodForm({ locale, strings, presentation, framed, ...props }) {
+  let body = /* @__PURE__ */ jsx(FramedFormContext, { value: framed ?? false, children: /* @__PURE__ */ jsx(MethodFormFields, { ...props, framed }) });
   if (presentation) {
     body = /* @__PURE__ */ jsx(FieldPresentationProvider, { presentation, children: body });
   }
@@ -3729,6 +3793,7 @@ function MethodForm({ locale, strings, presentation, ...props }) {
   }
   return body;
 }
+var SECTION_RULES = "[&>[data-form-section]:not(:last-child)]:border-b [&>[data-form-section]:not(:last-child)]:border-border [&>[data-form-section]:not(:last-child)]:pb-6 [&>:not([data-form-section])+[data-form-section]]:border-t [&>:not([data-form-section])+[data-form-section]]:border-border [&>:not([data-form-section])+[data-form-section]]:pt-6";
 function MethodFormFields({
   form,
   disabled,
@@ -3736,6 +3801,7 @@ function MethodFormFields({
   resolveUrl,
   foldOptional = true,
   errors,
+  framed,
   className
 }) {
   const s = useFieldStrings();
@@ -3813,7 +3879,7 @@ function MethodFormFields({
     if (mustBeFilled(field)) return fieldFilled(field, value) ? void 0 : s.requiredField;
     return isFilled(value) && !fieldFilled(field, value) ? s.incompleteField : void 0;
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-6", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-6", framed && SECTION_RULES, className), children: [
     exampleSource && /* @__PURE__ */ jsx(
       FillWithExample,
       {
@@ -8417,6 +8483,22 @@ function JsonView({ value }) {
     return () => window.clearTimeout(timer);
   }, [copied]);
   const text = value === null || value === void 0 ? void 0 : typeof value === "object" ? stringifyValue(value) : JSON.stringify(value);
+  const block = useRef(null);
+  const [overflows, setOverflows] = useState(false);
+  useEffect(() => {
+    const pre = block.current;
+    if (!pre) return;
+    const measure = () => setOverflows(pre.scrollWidth > pre.clientWidth);
+    measure();
+    const fonts = typeof document === "undefined" ? void 0 : document.fonts;
+    fonts?.addEventListener("loadingdone", measure);
+    const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(measure);
+    observer?.observe(pre);
+    return () => {
+      fonts?.removeEventListener("loadingdone", measure);
+      observer?.disconnect();
+    };
+  }, [text]);
   if (text === void 0) {
     return /* @__PURE__ */ jsx(Absent, {});
   }
@@ -8440,9 +8522,10 @@ function JsonView({ value }) {
     /* @__PURE__ */ jsx(
       "pre",
       {
+        ref: block,
         role: "group",
         "aria-label": s.viewJson,
-        tabIndex: 0,
+        ...overflows ? { tabIndex: 0 } : {},
         className: cn(
           "overflow-x-auto rounded-lg border border-border bg-card/40 px-3.5 py-3 pr-12 font-mono text-[12px] leading-relaxed",
           canCopy && "max-sm:min-h-[60px] max-sm:pr-14",
@@ -8453,6 +8536,11 @@ function JsonView({ value }) {
     )
   ] });
 }
+function underHostName(field, name) {
+  const renamed = { ...field, name };
+  delete renamed.title;
+  return renamed;
+}
 function isShownResult(attempt, field, baseName, value) {
   if (attempt.field === field && attempt.baseName === baseName && attempt.value === value) {
     return true;
@@ -8484,7 +8572,7 @@ function StuffPanel({
   const s = useFieldStrings();
   const presentation = useFieldPresentation();
   const offered = viewsProp && viewsProp.length > 0 ? viewsProp : viewsProp || presentation === "app" ? RESULT_ONLY : ALL_VIEWS;
-  const named = name ? { ...field, name } : field;
+  const named = name ? underHostName(field, name) : field;
   const baseName = downloadBaseName ?? named.name ?? "result";
   const [chosen, setView] = useState(defaultView);
   const view = offered.includes(chosen) ? chosen : offered[0] ?? "rendered";
@@ -8651,6 +8739,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, actionShadowClass, checkedAccentClass, cn, enumLabeler, fieldControlClass, fieldStringsFor, focusOutlineClass, headingClass, linkTextClass, panelFlatShadowClass, panelRaisedShadowClass, panelSurfaceClass, renderHtmlPdf, resolveHtmlStorageUrls, saveInBrowser, selectedBorderClass, selectedFillClass, selectedFillStrongClass, useFieldDomId, useFieldPresentation, useFieldStrings, useMethodForm, useProseImages, useResolveRendition, useResolveShareUrl, useResolveUrl, useResolvedUrl };
-//# sourceMappingURL=chunk-JCFALTTY.js.map
-//# sourceMappingURL=chunk-JCFALTTY.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, actionShadowClass, checkedAccentClass, cn, enumLabeler, fieldControlClass, fieldStringsFor, focusOutlineClass, headingClass, isThenable, linkTextClass, panelFlatShadowClass, panelRaisedShadowClass, panelSurfaceClass, renderHtmlPdf, resolveHtmlStorageUrls, saveInBrowser, selectedBorderClass, selectedFillClass, selectedFillStrongClass, useFieldDomId, useFieldPresentation, useFieldStrings, useMethodForm, useProseImages, useResolveRendition, useResolveShareUrl, useResolveUrl, useResolvedUrl };
+//# sourceMappingURL=chunk-ENK5QTUK.js.map
+//# sourceMappingURL=chunk-ENK5QTUK.js.map