@pipelex/mthds-form 0.34.0 → 0.35.1

package/dist/{chunk-5RV3ASMO.js → chunk-TD62R3P6.js}

@@ -10,13 +10,13 @@ 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, gateRefusal, optionalStructureOpen, mustBeFilled } from './chunk-TF4RTKLH.js';
 import { ownProp } from './chunk-V3OV2XQT.js';
-import { toStoredDateValue, toDateInputValue } from './chunk-GKV77RAS.js';
+import { toDateInputValue, toStoredDateValue, asCalendarDate } from './chunk-GKV77RAS.js';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { ChevronDown, ChevronUp, Check, List, Braces, ListChecks, ToggleLeft, Hash, Image as Image$1, FileText, CalendarDays, Type, Folder, Search, X, ImageIcon, Loader2, ImageOff, Upload, Link2, EyeOff, Eye, Minus, Plus, Trash2, Sparkles, MoreHorizontal, TriangleAlert, FileDown, Copy, Download, ChevronRight, ExternalLink, ChevronLeft } 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, ClipboardPaste, MoreHorizontal, TriangleAlert, FileDown, Copy, Download, ChevronRight, ExternalLink, ChevronLeft } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React9 from 'react';
-import { createContext, use, useId, useMemo, useContext, useState, useEffect, useRef, useLayoutEffect, useCallback, Fragment as Fragment$1, useSyncExternalStore } from 'react';
+import { createContext, use, useMemo, useContext, useId, useState, useEffect, useRef, useLayoutEffect, useCallback, Fragment as Fragment$1, useSyncExternalStore } from 'react';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import { useDropzone } from 'react-dropzone';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -84,100 +84,94 @@ function fieldLabel(title, name, presentation) {
   if (title !== void 0) return title;
   return presentation === "app" ? humanizeFieldName(name) : name;
 }
-
-// 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 focusWithinOutlineClass = "focus-within:outline-solid focus-within:outline-2 focus-within:outline-offset-1 focus-within: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";
-var Switch = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  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 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted-foreground",
-      focusOutlineClass,
-      "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
-    ),
-    ...props,
-    ref,
-    children: /* @__PURE__ */ jsx(
-      SwitchPrimitives.Thumb,
-      {
-        className: cn(
-          "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
-        )
-      }
-    )
-  }
-));
-Switch.displayName = SwitchPrimitives.Root.displayName;
-var FieldDomIdContext = createContext(null);
-function FieldDomIdProvider({
-  prefix,
-  children
-}) {
-  const generated = useId();
-  return /* @__PURE__ */ jsx(FieldDomIdContext, { value: prefix ?? generated, children });
-}
-function useFieldDomId(path) {
-  const scoped = use(FieldDomIdContext);
-  const local = useId();
-  const prefix = scoped ?? local;
-  return prefix === "" ? path : `${prefix}-${path}`;
-}
-function BooleanField({ field, value, onChange, id, disabled }) {
-  const presentation = useFieldPresentation();
-  const isApp = presentation === "app";
-  const domId = useFieldDomId(id);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "flex items-center justify-between gap-4 rounded-md border border-border bg-input px-3.5 py-3",
-        disabled && "opacity-50"
-      ),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [
-            /* @__PURE__ */ jsx(
-              "label",
-              {
-                htmlFor: domId,
-                className: cn(
-                  "text-[13px] font-medium leading-none text-foreground",
-                  isApp ? "text-[13.5px]" : "font-mono"
-                ),
-                children: fieldLabel(field.title, field.name, presentation)
-              }
-            ),
-            !isApp && /* @__PURE__ */ jsx(ConceptPill, { conceptRef: field.conceptRef, category: "boolean" })
-          ] }),
-          field.description && /* @__PURE__ */ jsx("p", { className: "text-[12px] leading-relaxed text-muted-foreground", children: field.description })
-        ] }),
-        /* @__PURE__ */ jsx(
-          Switch,
-          {
-            id: domId,
-            checked: value ?? false,
-            onCheckedChange: onChange,
-            disabled,
-            className: "shrink-0"
-          }
-        )
-      ]
+function shownDescription(description, label, kinds, presentation) {
+  if (!description || presentation !== "app") return description || void 0;
+  if (label.trim() === "") return void 0;
+  return descriptionAddsToLabel(description, label, kinds) ? description : void 0;
+}
+function shownItemDescription(itemDescription, listLabel, listDescription, kinds, presentation) {
+  if (!itemDescription || presentation !== "app") return void 0;
+  if (itemDescription === listDescription) return void 0;
+  const said = listDescription ? `${listLabel} ${listDescription}` : listLabel;
+  return descriptionAddsToLabel(itemDescription, said, kinds) ? itemDescription : void 0;
+}
+function descriptionAddsToLabel(description, label, kinds) {
+  if (label.trim() === "") return true;
+  const words = contentStems(description);
+  if (words.length === 0) return true;
+  const said = new Set(contentStems(label));
+  for (const kind of kinds) for (const word of KIND_WORDS[kind]) said.add(stem(word));
+  return words.some((word) => !said.has(word));
+}
+var KIND_WORDS = {
+  text: ["text"],
+  date: ["date", "day"],
+  document: ["document", "file"],
+  image: ["image", "picture", "photo"],
+  number: ["number"],
+  boolean: [],
+  choice: [],
+  structured: [],
+  list: ["list"]
+};
+var FILLER = /* @__PURE__ */ new Set([
+  "a",
+  "an",
+  "the",
+  "of",
+  "for",
+  "to",
+  "in",
+  "on",
+  "at",
+  "by",
+  "with",
+  "and",
+  "or",
+  "is",
+  "are",
+  "be",
+  "it",
+  "its",
+  "this",
+  "that",
+  "these",
+  "those",
+  "their",
+  "they",
+  "them",
+  "his",
+  "her",
+  "your",
+  "you",
+  "our",
+  "we",
+  "if",
+  "any",
+  "as",
+  "from",
+  "some",
+  "one"
+]);
+function contentStems(text) {
+  return (text.normalize("NFC").toLowerCase().replace(/['’]s\b/gu, "").match(WORD) ?? []).filter((word) => !FILLER.has(word)).map(stem);
+}
+var WORD = /[\p{L}\p{M}\p{N}]+|[\p{S}%‰#@]/gu;
+function stem(word) {
+  for (const [suffix, floor] of SUFFIXES) {
+    if (word.endsWith(suffix) && word.length - suffix.length >= floor) {
+      return word.slice(0, -suffix.length);
     }
-  );
-}
+  }
+  return word;
+}
+var SUFFIXES = [
+  ["ing", 4],
+  ["ed", 4],
+  ["es", 4],
+  ["s", 3],
+  ["e", 4]
+];
 
 // src/react/locales/calendar.ts
 function dayNumber(date) {
@@ -216,7 +210,7 @@ function someNames(names, more) {
   return AND.format(more > 0 ? [...names, `${more} more`] : names);
 }
 var EN_FIELD_STRINGS = {
-  optionalBadge: "optional",
+  optionalBadge: "Optional",
   selectPlaceholder: "Select\u2026",
   typeValuePlaceholder: "Type a value\u2026",
   writeHerePlaceholder: "Write here\u2026",
@@ -231,8 +225,8 @@ var EN_FIELD_STRINGS = {
   fieldsCount: (count) => count === 1 ? "1 field" : `${count} fields`,
   uploading: "Uploading\u2026",
   dropToUpload: "Drop to upload",
-  dropOrBrowse: "Drop a file or click to browse",
-  pasteUrlInstead: "paste a URL instead",
+  dropOrBrowse: "Choose a file or drop it here",
+  pasteUrlInstead: "Paste a link instead",
   uploadUnavailable: "Files cannot be uploaded here. Paste a link to the file instead.",
   urlPlaceholder: "https://\u2026",
   fileUrlAria: (label) => label ? `Link to the file for ${label}` : "Link to the file",
@@ -282,7 +276,7 @@ var EN_FIELD_STRINGS = {
   nextImage: "Next picture",
   openOriginal: "Open the original",
   unsupportedFileType: (formats) => `That file type is not supported. Accepted formats: ${formats}.`,
-  dropFilesOrBrowse: "Drop files or click to browse",
+  dropFilesOrBrowse: "Choose files or drop them here",
   dropFilesToAdd: "Drop to add the files",
   addFilesAria: (label) => label ? `Add files to ${label}` : "Add files",
   filesAdded: (count) => count === 1 ? "1 file added" : `${count} files added`,
@@ -402,7 +396,7 @@ function someNames2(names, more) {
   return AND2.format(more > 0 ? [...names, `${more} ${plural(more, "autre", "autres")}`] : names);
 }
 var FR_FIELD_STRINGS = {
-  optionalBadge: "facultatif",
+  optionalBadge: "Facultatif",
   selectPlaceholder: "Choisir\u2026",
   typeValuePlaceholder: "Saisissez une valeur\u2026",
   writeHerePlaceholder: "\xC9crivez ici\u2026",
@@ -417,8 +411,8 @@ var FR_FIELD_STRINGS = {
   fieldsCount: (count) => `${count} ${plural(count, "champ", "champs")}`,
   uploading: "Envoi en cours\u2026",
   dropToUpload: "D\xE9posez pour envoyer",
-  dropOrBrowse: "D\xE9posez un fichier ou cliquez pour parcourir",
-  pasteUrlInstead: "coller un lien \xE0 la place",
+  dropOrBrowse: "Choisissez un fichier ou d\xE9posez-le ici",
+  pasteUrlInstead: "Collez plut\xF4t un lien",
   uploadUnavailable: "Impossible d\u2019envoyer un fichier ici. Collez plut\xF4t un lien vers le fichier.",
   urlPlaceholder: "https://\u2026",
   fileUrlAria: (label) => label ? `Lien vers le fichier pour ${label}` : "Lien vers le fichier",
@@ -468,7 +462,7 @@ var FR_FIELD_STRINGS = {
   nextImage: "Image suivante",
   openOriginal: "Ouvrir l\u2019original",
   unsupportedFileType: (formats) => `Ce type de fichier n\u2019est pas pris en charge. Formats accept\xE9s\xA0: ${formats}.`,
-  dropFilesOrBrowse: "D\xE9posez des fichiers ou cliquez pour parcourir",
+  dropFilesOrBrowse: "Choisissez des fichiers ou d\xE9posez-les ici",
   dropFilesToAdd: "D\xE9posez pour ajouter les fichiers",
   addFilesAria: (label) => label ? `Ajouter des fichiers \xE0 ${label}` : "Ajouter des fichiers",
   filesAdded: (count) => `${count} ${plural(count, "fichier ajout\xE9", "fichiers ajout\xE9s")}`,
@@ -568,6 +562,23 @@ function FieldStringsProvider({
 function useFieldStrings() {
   return useContext(FieldStringsContext);
 }
+
+// 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",
+  "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"
+);
+var rowActionClass = 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",
+  "enabled:hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50 sm:min-h-9"
+);
+function smallPrintClass(isApp) {
+  return isApp ? "text-[12px] text-muted-foreground tabular-nums" : "font-mono text-[10.5px] text-muted-foreground";
+}
 var ERROR_OUTLINE = "rounded-lg outline-solid outline-1 outline-offset-4 outline-destructive";
 function FieldShell({
   name,
@@ -575,18 +586,19 @@ function FieldShell({
   conceptRef,
   category,
   description,
+  hint,
   required,
   error,
   htmlFor,
   children,
   className
 }) {
-  const s = useFieldStrings();
   const presentation = useFieldPresentation();
   const isApp = presentation === "app";
   const Label3 = htmlFor ? "label" : "div";
   const labelText = fieldLabel(title, name, presentation);
   const showLabel = labelText.trim() !== "";
+  const shownText = shownDescription(description, labelText, [category], presentation) ?? hint;
   const outlined = isApp && !!error;
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [
@@ -602,20 +614,9 @@ function FieldShell({
         }
       ),
       !isApp && /* @__PURE__ */ jsx(ConceptPill, { conceptRef, category }),
-      !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
-        }
-      )
+      !required && /* @__PURE__ */ jsx(OptionalMark, {})
     ] }),
-    description && /* @__PURE__ */ jsx("p", { className: "text-[12px] leading-relaxed text-muted-foreground", children: description }),
+    shownText && /* @__PURE__ */ jsx(FieldDescription, { children: shownText }),
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -627,18 +628,123 @@ function FieldShell({
     error && /* @__PURE__ */ jsx("p", { className: "flex items-center gap-1 text-[11px] text-destructive", role: "alert", children: error })
   ] });
 }
+function OptionalMark() {
+  const s = useFieldStrings();
+  const isApp = useFieldPresentation() === "app";
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "ml-auto",
+        isApp ? smallPrintClass(true) : "font-mono text-[10px] uppercase tracking-wider text-muted-foreground"
+      ),
+      children: s.optionalBadge
+    }
+  );
+}
+function FieldDescription({ id, children }) {
+  return /* @__PURE__ */ jsx("p", { id, className: "text-[12px] leading-relaxed text-muted-foreground", children });
+}
 
-// 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",
-  "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"
-);
+// 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 focusWithinOutlineClass = "focus-within:outline-solid focus-within:outline-2 focus-within:outline-offset-1 focus-within: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";
+var Switch = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  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 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted-foreground",
+      focusOutlineClass,
+      "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
+    ),
+    ...props,
+    ref,
+    children: /* @__PURE__ */ jsx(
+      SwitchPrimitives.Thumb,
+      {
+        className: cn(
+          "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+        )
+      }
+    )
+  }
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+var FieldDomIdContext = createContext(null);
+function FieldDomIdProvider({
+  prefix,
+  children
+}) {
+  const generated = useId();
+  return /* @__PURE__ */ jsx(FieldDomIdContext, { value: prefix ?? generated, children });
+}
+function useFieldDomId(path) {
+  const scoped = use(FieldDomIdContext);
+  const local = useId();
+  const prefix = scoped ?? local;
+  return prefix === "" ? path : `${prefix}-${path}`;
+}
+function BooleanField({ field, value, onChange, id, disabled }) {
+  const presentation = useFieldPresentation();
+  const isApp = presentation === "app";
+  const domId = useFieldDomId(id);
+  const label = fieldLabel(field.title, field.name, presentation);
+  const description = shownDescription(field.description, label, ["boolean"], presentation);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-between gap-4 rounded-md border border-border bg-input px-3.5 py-3",
+        disabled && "opacity-50"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: domId,
+                className: cn(
+                  "text-[13px] font-medium leading-none text-foreground",
+                  isApp ? "text-[13.5px]" : "font-mono"
+                ),
+                children: label
+              }
+            ),
+            !isApp && /* @__PURE__ */ jsx(ConceptPill, { conceptRef: field.conceptRef, category: "boolean" })
+          ] }),
+          description && /* @__PURE__ */ jsx(FieldDescription, { children: description })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            id: domId,
+            checked: value ?? false,
+            onCheckedChange: onChange,
+            disabled,
+            className: "shrink-0"
+          }
+        )
+      ]
+    }
+  );
+}
 function DateField({ field, value, onChange, id, error, disabled }) {
   const domId = useFieldDomId(id);
+  const isApp = useFieldPresentation() === "app";
+  const shown = toDateInputValue(value);
   return /* @__PURE__ */ jsx(
     FieldShell,
     {
@@ -655,11 +761,17 @@ function DateField({ field, value, onChange, id, error, disabled }) {
         {
           id: domId,
           type: "date",
-          value: toDateInputValue(value),
+          value: shown,
           disabled,
           "aria-invalid": !!error,
+          "data-empty": asCalendarDate(shown) === null ? "" : void 0,
           onChange: (e) => onChange(toStoredDateValue(e.target.value, field.datetime)),
-          className: cn(fieldControlClass, "h-11 px-3 font-mono tabular-nums")
+          className: cn(
+            fieldControlClass,
+            "h-11 px-3 tabular-nums data-empty:text-muted-foreground dark:scheme-dark",
+            "[&::-webkit-calendar-picker-indicator]:cursor-pointer",
+            !isApp && "font-mono"
+          )
         }
       )
     }
@@ -1001,10 +1113,7 @@ function FilePickerEntry({ onOpen, label, disabled, ref, id }) {
       disabled,
       "aria-haspopup": "dialog",
       "aria-label": s.chooseFromSourceAria(label),
-      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
-      ),
+      className: cn(rowActionClass, focusOutlineClass),
       children: [
         /* @__PURE__ */ jsx(Folder, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }),
         s.chooseFromSource
@@ -1390,6 +1499,7 @@ function FileField({
 }) {
   const s = useFieldStrings();
   const presentation = useFieldPresentation();
+  const isApp = presentation === "app";
   const domId = useFieldDomId(id);
   const [showUrl, setShowUrl] = useState(false);
   const [typedUrl, setTypedUrl] = useState(null);
@@ -1651,7 +1761,7 @@ function FileField({
             s.uploading
           ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
             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 })
+            hint && /* @__PURE__ */ jsx("p", { className: smallPrintClass(isApp), children: hint })
           ] }) })
         ) : (
           // `role="presentation"` and no tab stop: this div is the drop TARGET and
@@ -1689,7 +1799,7 @@ function FileField({
                   /* @__PURE__ */ jsx(Upload, { className: "h-5 w-5 text-muted-foreground", strokeWidth: 1.75 }),
                   /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
                     /* @__PURE__ */ jsx("p", { className: "text-[13px] text-foreground", children: isDragActive ? s.dropToUpload : s.dropOrBrowse }),
-                    hint && /* @__PURE__ */ jsx("p", { className: "font-mono text-[10.5px] text-muted-foreground", children: hint })
+                    hint && /* @__PURE__ */ jsx("p", { className: smallPrintClass(isApp), children: hint })
                   ] })
                 ] })
               ]
@@ -1697,8 +1807,9 @@ function FileField({
           )
         ),
         !busy && (refusal ? /* @__PURE__ */ jsx("p", { role: "alert", className: "text-[12px] text-destructive", children: refusal.kind === "type" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { className: "font-mono", children: refusal.name }),
-          " \u2014 ",
+          /* @__PURE__ */ jsx("span", { className: isApp ? "font-medium" : "font-mono", children: refusal.name }),
+          " \u2014",
+          " ",
           s.unsupportedFileType(hint)
         ] }) : dropArea?.open ? (
           // Pointed to only while it takes files: a full list's area is
@@ -1723,7 +1834,12 @@ function FileField({
               setTypedUrl(e.target.value);
               onChange(e.target.value ? { url: e.target.value } : void 0);
             },
-            className: cn(fieldControlClass, "h-9 px-3 font-mono text-[12px]")
+            className: cn(
+              fieldControlClass,
+              // In an app, a control of the field family like any other; in a
+              // studio, a reference set as code, under the field's mono name.
+              isApp ? "h-11 px-3" : "h-9 px-3 font-mono text-[12px]"
+            )
           }
         ) : allowUrl && /* @__PURE__ */ jsxs(
           "button",
@@ -1732,13 +1848,21 @@ function FileField({
             disabled: busy,
             onClick: () => setShowUrl(true),
             className: cn(
-              "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",
+              "flex w-fit items-center rounded-sm text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50 max-sm:min-h-11",
+              // A studio's aside is a mono footnote; an app's is a quiet text
+              // action in the page's face, underlined under the pointer.
+              isApp ? "gap-1.5 text-[13px] underline-offset-4 hover:underline" : "gap-1 font-mono text-[11px]",
               focusOutlineClass,
               "focus-visible:outline-offset-2"
             ),
             children: [
-              /* @__PURE__ */ jsx(Link2, { className: "h-3 w-3" }),
+              /* @__PURE__ */ jsx(
+                Link2,
+                {
+                  className: cn("shrink-0", isApp ? "h-3.5 w-3.5" : "h-3 w-3"),
+                  "aria-hidden": "true"
+                }
+              ),
               s.pasteUrlInstead
             ]
           }
@@ -1838,7 +1962,16 @@ function FileChip({
     /* @__PURE__ */ jsx("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted", children: /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4 text-muted-foreground" }) }),
     /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 basis-32 [contain:inline-size]", children: [
       /* @__PURE__ */ jsx("p", { className: "truncate text-[13px] font-medium text-foreground", children: value?.filename ?? s.uploadedFile }),
-      subtitle && /* @__PURE__ */ jsx("p", { className: "truncate font-mono text-[10.5px] text-muted-foreground", children: subtitle })
+      subtitle && /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: cn(
+            "truncate text-muted-foreground",
+            presentation === "app" ? "text-[12px]" : "font-mono text-[10.5px]"
+          ),
+          children: subtitle
+        }
+      )
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-3", children: [
       canPreview && /* @__PURE__ */ jsxs(
@@ -1847,12 +1980,12 @@ function FileChip({
           type: "button",
           onClick: onTogglePreview,
           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",
+            "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:size-11 max-sm:justify-center max-sm:px-0",
             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
+            /* @__PURE__ */ jsx("span", { className: "max-sm:sr-only", children: s.preview })
           ]
         }
       ),
@@ -2057,6 +2190,7 @@ function EnumField({ field, value, onChange, id, error, disabled }) {
 function NumberField({ field, value, onChange, id, error, disabled }) {
   const s = useFieldStrings();
   const domId = useFieldDomId(id);
+  const isApp = useFieldPresentation() === "app";
   const step = field.integer ? 1 : 0.1;
   const clamp = (n) => {
     let next = n;
@@ -2073,7 +2207,8 @@ function NumberField({ field, value, onChange, id, error, disabled }) {
       title: field.title,
       conceptRef: field.conceptRef,
       category: "number",
-      description: field.description ?? rangeHint,
+      description: field.description,
+      hint: rangeHint,
       required: !shownAsOptional(field),
       error,
       htmlFor: domId,
@@ -2094,7 +2229,10 @@ function NumberField({ field, value, onChange, id, error, disabled }) {
             onChange: (e) => onChange(e.target.value === "" ? void 0 : Number(e.target.value)),
             className: cn(
               fieldControlClass,
-              "h-11 px-3 font-mono tabular-nums [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
+              "h-11 px-3 tabular-nums [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none",
+              // A number is a value, not an identifier: mono in a studio, beside
+              // the field's mono name, and the page's own face in an app.
+              !isApp && "font-mono"
             )
           }
         ),
@@ -2232,6 +2370,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 description = shownDescription(field.description, label, ["structured"], presentation);
   const grouping = structureGrouping(depth, label.trim() !== "", use(FramedFormContext));
   const domId = useFieldDomId(id);
   const refused = use(RefusedStructureContext) === id;
@@ -2261,7 +2400,7 @@ function ObjectField({ field, value, onChange, id, error, env }) {
   const group = grouping === "none" ? {} : {
     role: "group",
     "aria-labelledby": nameId,
-    "aria-describedby": field.description ? descriptionId : void 0
+    "aria-describedby": description ? descriptionId : void 0
   };
   const section = grouping === "section";
   const caption = error && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-destructive", role: "alert", children: error });
@@ -2271,7 +2410,7 @@ function ObjectField({ field, value, onChange, id, error, env }) {
       !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 }),
+    description && /* @__PURE__ */ jsx(FieldDescription, { id: descriptionId, children: description }),
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -2361,6 +2500,7 @@ function firstFocusable(within2) {
 var NAMED = 3;
 function ListFileDrop({ label, formats, shut, onPlace }) {
   const s = useFieldStrings();
+  const isApp = useFieldPresentation() === "app";
   const hint = acceptLabel(formats);
   const accept = useMemo(() => acceptMap(formats), [formats]);
   const [notice, setNotice] = useState(null);
@@ -2409,7 +2549,7 @@ function ListFileDrop({ label, formats, shut, onPlace }) {
           ),
           /* @__PURE__ */ jsx(Upload, { className: "h-4 w-4 text-muted-foreground", strokeWidth: 1.75 }),
           /* @__PURE__ */ jsx("p", { className: "text-[13px] text-foreground", children: isDragActive ? s.dropFilesToAdd : s.dropFilesOrBrowse }),
-          hint && /* @__PURE__ */ jsx("p", { className: "font-mono text-[10.5px] text-muted-foreground", children: hint })
+          hint && /* @__PURE__ */ jsx("p", { className: smallPrintClass(isApp), children: hint })
         ]
       }
     ),
@@ -2569,6 +2709,18 @@ function ListField({ field, value, onChange, id, error, env }) {
     }
     return count;
   };
+  const label = fieldLabel(field.title, field.name, presentation);
+  const exactCount = field.itemCount !== void 0 && field.maxItemCount === field.itemCount ? field.itemCount : void 0;
+  const countShown = !isApp || items.length > 0 || exactCount !== void 0;
+  const kinds = ["list", conceptCategory(field.item)];
+  const description = shownDescription(field.description, label, kinds, presentation);
+  const itemDescription = shownItemDescription(
+    field.item.description,
+    label,
+    field.description,
+    kinds,
+    presentation
+  );
   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(
@@ -2578,25 +2730,17 @@ function ListField({ field, value, onChange, id, error, env }) {
             "text-[13px] font-medium leading-none text-foreground",
             isApp ? "text-[13.5px]" : "font-mono"
           ),
-          children: fieldLabel(field.title, field.name, presentation)
+          children: label
         }
       ),
       !isApp && /* @__PURE__ */ jsx(ConceptPill, { conceptRef: field.conceptRef, category: "list" }),
-      /* @__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
-        }
-      )
+      countShown && /* @__PURE__ */ jsx("span", { className: smallPrintClass(isApp), children: exactCount !== void 0 ? s.itemsCountOf(items.length, exactCount) : s.itemsCount(items.length) }),
+      shownAsOptional(field) && /* @__PURE__ */ jsx(OptionalMark, {})
     ] }),
-    field.description && /* @__PURE__ */ jsx("p", { className: "text-[12px] leading-relaxed text-muted-foreground", children: field.description }),
+    description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
+    itemDescription && /* @__PURE__ */ jsx(FieldDescription, { children: itemDescription }),
     /* @__PURE__ */ jsxs("div", { ref: rowsRef, className: "space-y-2", children: [
-      items.length === 0 && !dropOffered && /* @__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.length === 0 && !dropOffered && !isApp && /* @__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 }),
       /* @__PURE__ */ jsx(ListDropAreaContext.Provider, { value: dropArea, children: items.map((item, index) => /* @__PURE__ */ jsxs(
         "div",
         {
@@ -2614,7 +2758,8 @@ function ListField({ field, value, onChange, id, error, env }) {
               "span",
               {
                 className: cn(
-                  "shrink-0 font-mono text-[11px] text-muted-foreground",
+                  "shrink-0 text-muted-foreground",
+                  isApp ? "text-[12px] tabular-nums" : "font-mono text-[11px]",
                   structuredRows ? "col-start-1 row-start-1" : "mt-1 w-5 text-center"
                 ),
                 children: index + 1
@@ -2657,7 +2802,7 @@ function ListField({ field, value, onChange, id, error, env }) {
       dropOffered && fileItem && /* @__PURE__ */ jsx("div", { ref: dropRef, children: /* @__PURE__ */ jsx(
         ListFileDrop,
         {
-          label: fieldLabel(field.title, field.name, presentation),
+          label,
           formats: fileItem.formats,
           shut: !dropOpen,
           onPlace: placeFiles
@@ -2670,15 +2815,27 @@ function ListField({ field, value, onChange, id, error, env }) {
           onClick: addItem,
           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",
-            // 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,
+            isApp ? (
+              // A secondary action of the same family as the team's files
+              // row under it, and the field above it.
+              rowActionClass
+            ) : [
+              "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",
+              // 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" }),
+            /* @__PURE__ */ jsx(
+              Plus,
+              {
+                className: cn("h-4 w-4", isApp && "shrink-0 text-muted-foreground"),
+                "aria-hidden": "true"
+              }
+            ),
             s.addItem
           ]
         }
@@ -2688,7 +2845,7 @@ function ListField({ field, value, onChange, id, error, env }) {
           FilePickerEntry,
           {
             ref: pickerEntryRef,
-            label: fieldLabel(field.title, field.name, presentation),
+            label,
             disabled: env?.disabled || busy || room === 0,
             onOpen: () => setPickerOpen(true)
           }
@@ -2854,7 +3011,8 @@ function UnknownField({ field, value, onChange, id, error, disabled }) {
       title: field.title,
       conceptRef: field.conceptRef,
       category: "structured",
-      description: field.description ?? s.jsonHint,
+      description: field.description,
+      hint: s.jsonHint,
       required: !shownAsOptional(field),
       error,
       htmlFor: domId,
@@ -3208,7 +3366,7 @@ function FillWithExample({
         },
         className: cn(secondaryClass, className),
         children: [
-          /* @__PURE__ */ jsx(Sparkles, { className: "size-4 text-muted-foreground", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx(ClipboardPaste, { className: "size-4 text-muted-foreground", "aria-hidden": "true" }),
           s.fillWithExample
         ]
       }
@@ -4583,11 +4741,11 @@ function useFileNamePrompt() {
   const asking = useAskFileName();
   const [pending, setPending] = useState(null);
   const ask = useCallback(
-    (stem2, extension) => {
-      if (!asking) return Promise.resolve(`${stem2}${extension}`);
+    (stem3, extension) => {
+      if (!asking) return Promise.resolve(`${stem3}${extension}`);
       return new Promise((resolve) => {
         setPending({
-          stem: stem2,
+          stem: stem3,
           extension,
           settle: (name) => {
             setPending(null);
@@ -4611,11 +4769,11 @@ function useFileNamePrompt() {
   ) : null;
   return { ask, dialog };
 }
-function FileNameDialog({ stem: stem2, extension, onConfirm, onCancel }) {
+function FileNameDialog({ stem: stem3, extension, onConfirm, onCancel }) {
   const s = useFieldStrings();
   const titleId = useId();
   const extensionId = useId();
-  const [value, setValue] = useState(stem2);
+  const [value, setValue] = useState(stem3);
   const panel = useRef(null);
   const field = useRef(null);
   const pressedBackdrop = useRef(false);
@@ -7016,8 +7174,8 @@ ${planned.url ?? planned.text}`;
       {
         type: "button",
         onClick: async () => {
-          const { stem: stem2, extension } = splitFileName(planned.name);
-          const name = await ask(stem2, extension);
+          const { stem: stem3, extension } = splitFileName(planned.name);
+          const name = await ask(stem3, extension);
           if (name === null) return;
           const started = { identity, state: "saving" };
           setAttempt(started);
@@ -8288,7 +8446,7 @@ function ResultNode({
     const pagePath = location?.path.join(".");
     const pageFile = pagePath === void 0 ? void 0 : readStuffFile("markup", unwrapped, pagePath);
     const page = pageDownloadShown ? pageFile : void 0;
-    const pdfName = pdfShown && content && pageFile && location ? stem(planFileSave(pageFile, { baseName: location.baseName })?.name) : void 0;
+    const pdfName = pdfShown && content && pageFile && location ? stem2(planFileSave(pageFile, { baseName: location.baseName })?.name) : void 0;
     return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
       page || pdfName !== void 0 ? /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
         /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: header }),
@@ -8506,7 +8664,7 @@ function ResultNode({
   }
   return null;
 }
-function stem(name) {
+function stem2(name) {
   return name === void 0 ? "" : name.replace(/\.[^.]+$/, "");
 }
 var ALL_VIEWS = ["rendered", "json"];
@@ -8667,15 +8825,15 @@ function StuffPanel({
     const only = plan.files.length === 1 ? plan.files[0] : void 0;
     const json = plan.files.length > 1 ? plan.files[plan.files.length - 1] : void 0;
     if (only) {
-      const { stem: stem2, extension } = splitFileName(only.name);
-      const name2 = await ask(stem2, extension);
+      const { stem: stem3, extension } = splitFileName(only.name);
+      const name2 = await ask(stem3, extension);
       if (name2 === null) return;
       if (name2 !== only.name) plan = { ...plan, files: [{ ...only, name: name2 }] };
     } else if (json) {
-      const { stem: stem2 } = splitFileName(json.name);
-      const name2 = await ask(stem2, "");
+      const { stem: stem3 } = splitFileName(json.name);
+      const name2 = await ask(stem3, "");
       if (name2 === null) return;
-      if (name2 !== stem2) plan = planStuffSave(field, value, { baseName: name2, ...options });
+      if (name2 !== stem3) plan = planStuffSave(field, value, { baseName: name2, ...options });
     }
     const attempt = {
       field,
@@ -8812,5 +8970,5 @@ function pdfFileName(field, value, baseName) {
 }
 
 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, fieldLabel, 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-5RV3ASMO.js.map
-//# sourceMappingURL=chunk-5RV3ASMO.js.map
+//# sourceMappingURL=chunk-TD62R3P6.js.map
+//# sourceMappingURL=chunk-TD62R3P6.js.map