@pipelex/mthds-form 0.29.0 → 0.30.0

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

@@ -821,6 +821,27 @@ function MoreFooter({ pages }) {
   if (!pages.hasMore) return null;
   return /* @__PURE__ */ jsx("div", { className: "flex justify-center px-4 py-4", children: /* @__PURE__ */ jsx(ListAction, { onClick: pages.loadMore, children: s.showMore }) });
 }
+
+// src/react/style-tokens.ts
+var headingFaceClass = "[font-family:var(--font-heading,revert-layer)]";
+var headingTrackingClass = "[letter-spacing:var(--heading-tracking,revert-layer)]";
+var headingTrackingTightClass = "[letter-spacing:var(--heading-tracking,-0.025em)]";
+var headingWeightClass = {
+  500: "[font-weight:var(--heading-weight,500)]",
+  600: "[font-weight:var(--heading-weight,600)]",
+  700: "[font-weight:var(--heading-weight,700)]"
+};
+function headingClass(weight, tight = false) {
+  return [
+    headingFaceClass,
+    headingWeightClass[weight],
+    tight ? headingTrackingTightClass : headingTrackingClass
+  ].join(" ");
+}
+var panelSurfaceClass = "[border-style:solid] [border-width:var(--panel-edge-width,1px)] [border-color:var(--panel-edge,var(--border,hsl(240_5.9%_90%)))] [background-color:var(--panel-fill,var(--card,hsl(0_0%_100%)))]";
+var panelRaisedShadowClass = "[box-shadow:var(--panel-shadow,0_20px_25px_-5px_rgb(0_0_0/0.1),0_8px_10px_-6px_rgb(0_0_0/0.1))]";
+var panelFlatShadowClass = "[box-shadow:var(--panel-shadow,none)]";
+var actionShadowClass = "[box-shadow:var(--action-shadow,0_0_28px_color-mix(in_oklab,var(--primary,hsl(240_5.9%_10%))_35%,transparent))] hover:[box-shadow:var(--action-shadow,0_0_44px_color-mix(in_oklab,var(--primary,hsl(240_5.9%_10%))_50%,transparent))]";
 var Dialog = DialogPrimitive.Root;
 var DialogClose = DialogPrimitive.Close;
 function closeAutoFocus(onCloseAutoFocus, returnFocus) {
@@ -871,7 +892,7 @@ var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE
   DialogPrimitive.Title,
   {
     ref,
-    className: cn("text-[16px] font-semibold text-foreground", className),
+    className: cn("text-[16px] text-foreground", headingClass(600), className),
     ...props
   }
 ));
@@ -1041,7 +1062,7 @@ function FilePickerBody({
     return next;
   });
   const choices = [...chosen.values()];
-  const use8 = () => {
+  const use9 = () => {
     if (choices.length === 0) return;
     onUse(choices);
     onClose();
@@ -1146,7 +1167,7 @@ function FilePickerBody({
       "button",
       {
         type: "button",
-        onClick: use8,
+        onClick: use9,
         disabled: choices.length === 0,
         className: cn(
           "flex h-12 w-full items-center justify-center rounded-md bg-primary px-4 text-[16px] font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50",
@@ -1978,7 +1999,7 @@ 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]:font-medium",
+                  "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 max-sm:h-11 max-sm:min-w-11",
                   selectedStateBorderClass
                 ),
                 children: [
@@ -2170,11 +2191,27 @@ function OptionalToggle({ count, expanded, onToggle, noun = "field" }) {
     }
   );
 }
+var StructureDepthContext = createContext(0);
+function structureGrouping(depth, labelled) {
+  if (!labelled) return "none";
+  return depth === 0 ? "box" : "rule";
+}
+function structureNameClass(isApp, depth) {
+  if (!isApp) return "font-mono text-[13px] font-medium leading-none";
+  return cn(
+    depth === 0 ? "text-[16px] font-semibold leading-snug" : "text-[14.5px] font-semibold leading-snug",
+    headingFaceClass
+  );
+}
 function ObjectField({ field, value, onChange, id, error, env }) {
   const [showOptional, setShowOptional] = useState(false);
   const presentation = useFieldPresentation();
   const isApp = presentation === "app";
+  const depth = use(StructureDepthContext);
   const data = value ?? {};
+  const label = fieldLabel(field.title, field.name, presentation);
+  const grouping = structureGrouping(depth, label.trim() !== "");
+  const domId = useFieldDomId(id);
   const setChild = (name, childValue) => onChange({ ...data, [name]: childValue });
   const folded = field.fields.filter((f) => isFoldedOptional(f, ownProp(data, f.name)));
   const structureOpen = anyOptionalStructureOpen(field.fields, data);
@@ -2189,30 +2226,31 @@ function ObjectField({ field, value, onChange, id, error, env }) {
       );
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+  const nameId = `${domId}--name`;
+  const descriptionId = `${domId}--description`;
+  const group = grouping === "none" ? {} : {
+    role: "group",
+    "aria-labelledby": nameId,
+    "aria-describedby": field.description ? descriptionId : void 0
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", ...group, children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: cn(
-            "text-[13px] font-medium leading-none text-foreground",
-            isApp ? "text-[13.5px]" : "font-mono"
-          ),
-          children: fieldLabel(field.title, field.name, presentation)
-        }
-      ),
+      /* @__PURE__ */ jsx("span", { id: nameId, className: cn("text-foreground", structureNameClass(isApp, depth)), children: label }),
       !isApp && /* @__PURE__ */ jsx(ConceptPill, { conceptRef: field.conceptRef, category: "structured" })
     ] }),
-    field.description && /* @__PURE__ */ jsx("p", { className: "text-[12px] leading-relaxed text-muted-foreground", children: field.description }),
+    field.description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "text-[12px] leading-relaxed text-muted-foreground", children: field.description }),
     /* @__PURE__ */ jsxs(
       "div",
       {
+        "data-structure-group": grouping,
         className: cn(
-          "space-y-4 rounded-lg border bg-card/40 p-4",
-          error ? "border-destructive/50" : "border-border"
+          "space-y-4",
+          grouping === "box" && "rounded-lg border bg-card/40 p-4 max-sm:p-3",
+          grouping === "rule" && "border-l-2 pl-4 max-sm:pl-3",
+          grouping !== "none" && (error ? "border-destructive/50" : "border-border")
         ),
         children: [
-          visible.map((child) => /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(StructureDepthContext, { value: depth + 1, children: visible.map((child) => /* @__PURE__ */ jsx(
             FieldRenderer,
             {
               field: child,
@@ -2222,7 +2260,7 @@ function ObjectField({ field, value, onChange, id, error, env }) {
               env
             },
             child.name
-          )),
+          )) }),
           (folded.length > 0 || structureOpen) && /* @__PURE__ */ jsx(
             OptionalToggle,
             {
@@ -2921,7 +2959,7 @@ var AlertDialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @_
   AlertDialogPrimitive.Title,
   {
     ref,
-    className: cn("text-[16px] font-semibold text-foreground", className),
+    className: cn("text-[16px] text-foreground", headingClass(600), className),
     ...props
   }
 ));
@@ -4525,7 +4563,7 @@ function FileNameDialog({ stem: stem2, extension, onConfirm, onCancel }) {
           onKeyDown,
           className: "w-full max-w-sm space-y-3 rounded-lg border border-border bg-popover p-4 text-popover-foreground shadow-lg",
           children: [
-            /* @__PURE__ */ jsx("h2", { id: titleId, className: "text-[14px] font-medium", children: s.fileNameTitle }),
+            /* @__PURE__ */ jsx("h2", { id: titleId, className: cn("text-[14px]", headingClass(500)), children: s.fileNameTitle }),
             /* @__PURE__ */ jsxs("div", { className: "flex items-center rounded-md border border-border bg-input focus-within:outline-solid focus-within:outline-2 focus-within:outline-offset-1 focus-within:outline-ring", children: [
               /* @__PURE__ */ jsx(
                 "input",
@@ -5204,7 +5242,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 disabled:opacity-70",
+          // 44 pixels tall below `sm`, as every control a finger hits is.
+          "inline-flex shrink-0 items-center gap-1.5 rounded-md px-2 py-1 text-[12px] font-medium disabled:opacity-70 max-sm:min-h-11 max-sm:px-3",
           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"),
@@ -5477,7 +5516,7 @@ function ImageViewer({
           children: [
             /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2 border-b border-border py-1.5 pr-1.5 pl-4", children: [
               /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx(DialogTitle, { className: "truncate text-[14px] font-medium", children: picture.name }),
+                /* @__PURE__ */ jsx(DialogTitle, { className: cn("truncate text-[14px]", headingWeightClass[500]), children: picture.name }),
                 several && // A live region from the moment the viewer opens, so each move
                 // is announced: one inserted with its text already in it is not.
                 /* @__PURE__ */ jsx(
@@ -5638,15 +5677,24 @@ function Markdown({ text, className, proseImages, citations }) {
   const mode = proseImages ?? fromEnv;
   return /* @__PURE__ */ jsx(ProseImagesContext, { value: mode, children: /* @__PURE__ */ jsx(CitationsContext, { value: citations, children: /* @__PURE__ */ jsx("div", { className: cn("space-y-2 text-[13px] leading-relaxed text-foreground", className), children: /* @__PURE__ */ jsx(Blocks, { tokens }) }) }) });
 }
+function opensWithHeading(text) {
+  const body = text.slice(LEADING_BLANK_LINES.exec(text)?.[0].length ?? 0);
+  const end = body.search(BLANK_LINE);
+  const opening = end === -1 ? body : body.slice(0, end);
+  const first = marked.lexer(opening, LEX_OPTIONS).find((token) => token.type !== "space");
+  return first?.type === "heading";
+}
+var LEADING_BLANK_LINES = /^(?:[ \t]*\r?\n)*/;
+var BLANK_LINE = /\r?\n[ \t]*\r?\n/;
 var ProseImagesContext = React9.createContext("link");
 var CitationsContext = React9.createContext(void 0);
 var HEADING_CLASS = {
-  1: "text-[16px] font-semibold",
-  2: "text-[14.5px] font-semibold",
-  3: "text-[13.5px] font-semibold",
-  4: "text-[13px] font-semibold",
-  5: "text-[13px] font-semibold",
-  6: "text-[13px] font-semibold"
+  1: cn("text-[16px]", headingClass(600)),
+  2: cn("text-[14.5px]", headingClass(600)),
+  3: cn("text-[13.5px]", headingClass(600)),
+  4: cn("text-[13px]", headingClass(600)),
+  5: cn("text-[13px]", headingClass(600)),
+  6: cn("text-[13px]", headingClass(600))
 };
 function Blocks({ tokens }) {
   return /* @__PURE__ */ jsx(Fragment, { children: tokens.map((token, index) => /* @__PURE__ */ jsx(Block, { token }, index)) });
@@ -6350,11 +6398,11 @@ function fencedBlockEnd(text, start) {
   }
   return text.length;
 }
-var BLANK_LINE = /\n[ \t]*\n/g;
+var BLANK_LINE2 = /\n[ \t]*\n/g;
 function codeSpanEnd(text, start) {
   const open = backtickRun(text, start);
-  BLANK_LINE.lastIndex = start;
-  const blank = BLANK_LINE.exec(text);
+  BLANK_LINE2.lastIndex = start;
+  const blank = BLANK_LINE2.exec(text);
   const limit = blank ? blank.index : text.length;
   let cursor = start + open;
   for (; ; ) {
@@ -6603,13 +6651,21 @@ function Described({ description, children }) {
     /* @__PURE__ */ jsx(TooltipContent, { children: description })
   ] }) });
 }
-function ResultHeader({ field }) {
-  return /* @__PURE__ */ jsx(Label2, { field, describe: true });
+function ResultHeader({ field, unseen = false }) {
+  return /* @__PURE__ */ jsx(Label2, { field, describe: true, unseen });
 }
-function Label2({ field, describe = false }) {
+function Label2({
+  field,
+  describe = false,
+  unseen = false
+}) {
   const presentation = useFieldPresentation();
   const isApp = presentation === "app";
   const labelText = fieldLabel(field.title, field.name, presentation);
+  if (unseen) {
+    if (labelText.trim() === "") return null;
+    return /* @__PURE__ */ jsx("span", { className: "sr-only", children: describe && field.description ? `${labelText}: ${field.description}` : labelText });
+  }
   if (labelText.trim() === "") {
     return /* @__PURE__ */ jsx(ConceptPill, { conceptRef: field.conceptRef, category: conceptCategory(field) });
   }
@@ -7336,11 +7392,25 @@ var TOGGLE = cn(
 );
 var STACK_NEVER_UP_TO = 3;
 var STACK_ALWAYS_BEYOND = 6;
-function stackingFor(columns) {
-  if (columns <= STACK_NEVER_UP_TO) return "never";
+function stackingFor(columns, rowsOpen) {
+  if (columns <= STACK_NEVER_UP_TO) {
+    return columns === STACK_NEVER_UP_TO && rowsOpen ? "phone" : "never";
+  }
   return columns > STACK_ALWAYS_BEYOND ? "always" : "narrow";
 }
 var STACKED = {
+  phone: {
+    table: "max-sm:block",
+    head: "max-sm:hidden",
+    body: "max-sm:block",
+    row: "max-sm:relative max-sm:block max-sm:px-3 max-sm:py-2",
+    rowWithToggle: "max-sm:pl-12",
+    toggle: "max-sm:absolute max-sm:top-0 max-sm:left-0 max-sm:p-0",
+    cell: "max-sm:grid max-sm:grid-cols-[minmax(0,min(40%,10rem))_minmax(0,1fr)] max-sm:items-baseline max-sm:gap-x-3 max-sm:px-0 max-sm:py-0.5 max-sm:after:hidden",
+    label: "max-sm:block",
+    detail: "max-sm:block",
+    detailInner: "max-sm:px-0 max-sm:py-1"
+  },
   narrow: {
     table: "@max-[640px]:block",
     head: "@max-[640px]:hidden",
@@ -7369,21 +7439,34 @@ var STACKED = {
 var FIT_CELL = "min-w-[min(8ch,14cqw)] wrap-anywhere [&>span]:whitespace-normal";
 var FIT_NAME = "min-w-[min(16ch,28cqw)] wrap-anywhere [&>span]:whitespace-normal";
 var WORD_FLOOR = "after:block after:h-0 after:max-w-[var(--fit-share,0px)] after:overflow-hidden after:invisible after:wrap-normal after:content-[attr(data-fit)]";
+var FIT_CHEVRON = "[--fit-chevron:var(--expand-column,2rem)]";
+var FIT_NO_CHEVRON = "[--fit-chevron:0px]";
 var FIT_SHARE_BESIDE_NAME = {
-  2: "[--fit-share:calc(72cqw_-_3rem_-_var(--expand-column,2rem))]",
-  3: "[--fit-share:calc((72cqw_-_4.5rem_-_var(--expand-column,2rem))/2)]",
-  4: "[--fit-share:calc((72cqw_-_6rem_-_var(--expand-column,2rem))/3)]",
-  5: "[--fit-share:calc((72cqw_-_7.5rem_-_var(--expand-column,2rem))/4)]",
-  6: "[--fit-share:calc((72cqw_-_9rem_-_var(--expand-column,2rem))/5)]"
+  2: "[--fit-share:calc(72cqw_-_3rem_-_var(--fit-chevron,0px))]",
+  3: "[--fit-share:calc((72cqw_-_4.5rem_-_var(--fit-chevron,0px))/2)]",
+  4: "[--fit-share:calc((72cqw_-_6rem_-_var(--fit-chevron,0px))/3)]",
+  5: "[--fit-share:calc((72cqw_-_7.5rem_-_var(--fit-chevron,0px))/4)]",
+  6: "[--fit-share:calc((72cqw_-_9rem_-_var(--fit-chevron,0px))/5)]"
 };
 var FIT_SHARE_WITHOUT_NAME = {
-  1: "[--fit-share:calc(100cqw_-_1.5rem_-_var(--expand-column,2rem))]",
-  2: "[--fit-share:calc((100cqw_-_3rem_-_var(--expand-column,2rem))/2)]",
-  3: "[--fit-share:calc((100cqw_-_4.5rem_-_var(--expand-column,2rem))/3)]",
-  4: "[--fit-share:calc((100cqw_-_6rem_-_var(--expand-column,2rem))/4)]",
-  5: "[--fit-share:calc((100cqw_-_7.5rem_-_var(--expand-column,2rem))/5)]",
-  6: "[--fit-share:calc((100cqw_-_9rem_-_var(--expand-column,2rem))/6)]"
+  1: "[--fit-share:calc(100cqw_-_1.5rem_-_var(--fit-chevron,0px))]",
+  2: "[--fit-share:calc((100cqw_-_3rem_-_var(--fit-chevron,0px))/2)]",
+  3: "[--fit-share:calc((100cqw_-_4.5rem_-_var(--fit-chevron,0px))/3)]",
+  4: "[--fit-share:calc((100cqw_-_6rem_-_var(--fit-chevron,0px))/4)]",
+  5: "[--fit-share:calc((100cqw_-_7.5rem_-_var(--fit-chevron,0px))/5)]",
+  6: "[--fit-share:calc((100cqw_-_9rem_-_var(--fit-chevron,0px))/6)]"
 };
+function identifierWords(label) {
+  const words = label.split("_");
+  if (words.length === 1) return label;
+  return words.map(
+    (word, index) => index === words.length - 1 ? word : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      word,
+      "_",
+      /* @__PURE__ */ jsx("wbr", {})
+    ] }, index)
+  );
+}
 function cellWords(column, cell, presentation) {
   return typeof cell === "string" || typeof cell === "number" ? cellTitle(column, cell, presentation) : void 0;
 }
@@ -7424,7 +7507,7 @@ function ObjectTable({
   const { shown, hidden, name } = chooseColumns(columns, budget);
   const canExpand = hidden > 0 || shown.some((column) => column !== name && !fitsACellWhole(column));
   const fits = layout === "stack";
-  const stacking = fits ? stackingFor(shown.length) : "never";
+  const stacking = fits ? stackingFor(shown.length, canExpand) : "never";
   const stacked = stacking === "never" ? void 0 : STACKED[stacking];
   const nameShown = name !== void 0 && shown.includes(name);
   const fitShare = fits ? (nameShown ? FIT_SHARE_BESIDE_NAME : FIT_SHARE_WITHOUT_NAME)[shown.length] : void 0;
@@ -7439,6 +7522,19 @@ function ObjectTable({
     observer.observe(scroller);
     return () => observer.disconnect();
   }, [fits]);
+  const [overflows, setOverflows] = useState(false);
+  useEffect(() => {
+    const scroller = scrollerRef.current;
+    if (!scroller || !fits) return;
+    const measure = () => setOverflows(scroller.scrollWidth > scroller.clientWidth);
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(scroller);
+    const content = scroller.firstElementChild;
+    if (content) observer.observe(content);
+    return () => observer.disconnect();
+  }, [fits]);
   const toggle = (index) => setExpanded((current) => {
     const next = new Set(current);
     if (!next.delete(index)) next.add(index);
@@ -7465,16 +7561,16 @@ function ObjectTable({
     //
     // Under `tableLayout="stack"` the box is the SIZE CONTAINER its stacking
     // rules query, so the table answers to its own width rather than the
-    // viewport's, and it takes no focus: nothing scrolls, so the stop would have
-    // nothing to do. It still clips to its rounded border, and should anything
-    // ever overflow it, the a11y gate names the scroll a keyboard cannot reach.
+    // viewport's, and it takes no focus while nothing scrolls, since the stop
+    // would have nothing to do. It still clips to its rounded border, and takes
+    // focus again only while its headers' words make it overflow (`overflows`).
     /* @__PURE__ */ jsx(
       "div",
       {
         ref: scrollerRef,
         role: "group",
         "aria-label": label,
-        ...fits ? {} : { tabIndex: 0 },
+        ...fits && !overflows ? {} : { tabIndex: 0 },
         className: cn(
           "overflow-x-auto rounded-lg border border-border",
           focusOutlineInsetClass,
@@ -7484,7 +7580,12 @@ function ObjectTable({
         children: /* @__PURE__ */ jsxs(
           "table",
           {
-            className: cn("w-full min-w-full border-collapse text-[13px]", stacked?.table, fitShare),
+            className: cn(
+              "w-full min-w-full border-collapse text-[13px]",
+              stacked?.table,
+              fitShare,
+              fitShare !== void 0 && (canExpand ? FIT_CHEVRON : FIT_NO_CHEVRON)
+            ),
             children: [
               /* @__PURE__ */ jsx("thead", { className: stacked?.head, children: /* @__PURE__ */ jsxs("tr", { className: "border-b border-border bg-muted text-left", children: [
                 canExpand && /* @__PURE__ */ jsx("th", { scope: "col", style: { width: EXPAND_COLUMN }, className: "px-1", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: s.rowDetailsColumn }) }),
@@ -7492,16 +7593,20 @@ function ObjectTable({
                   "th",
                   {
                     scope: "col",
-                    ...floorsWords(column) ? { "data-fit": fieldLabel(column.title, column.name, presentation) } : {},
                     className: cn(
-                      // One line, or wrapped anywhere so a header is never what
-                      // widens a table that has to fit its box. See `FIT_CELL`.
-                      fits ? "wrap-anywhere" : "whitespace-nowrap",
+                      // One line, or, in a table that fits its box, wrapped between
+                      // words and never inside one: "Quantity" over three digits is
+                      // a header, "Quantit" over "y" is damage. So a header's
+                      // longest word is its column's floor, with no share capping
+                      // it, as a value's is capped: a header's words are the label
+                      // the descriptor states, not a payload's token of any length.
+                      // Where the box cannot hold every header's longest word, the
+                      // table scrolls inside it (see `overflows`).
+                      fits ? "wrap-normal" : "whitespace-nowrap",
                       "px-3 py-2 text-[12px] font-semibold text-foreground",
-                      presentation === "app" ? void 0 : "font-mono",
-                      floorsWords(column) && WORD_FLOOR
+                      presentation === "app" ? void 0 : "font-mono"
                     ),
-                    children: /* @__PURE__ */ jsx(Described, { description: column.description, children: fieldLabel(column.title, column.name, presentation) })
+                    children: /* @__PURE__ */ jsx(Described, { description: column.description, children: presentation === "studio" ? identifierWords(fieldLabel(column.title, column.name, presentation)) : fieldLabel(column.title, column.name, presentation) })
                   },
                   column.name
                 ))
@@ -7604,13 +7709,16 @@ function CompositeValue({ members }) {
   const isApp = presentation === "app";
   return /* @__PURE__ */ jsx("div", { className: "space-y-3", children: members.map((member) => {
     const label = isApp ? humanizeFieldName(member.name) : member.name;
+    const text = memberText(member.value);
+    const headed = isApp && text !== void 0 && opensWithHeading(text);
     return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
       /* @__PURE__ */ jsx(
         "span",
         {
           className: cn(
             "font-semibold text-foreground",
-            isApp ? "text-[13.5px]" : "font-mono text-[12px]"
+            isApp ? "text-[13.5px]" : "font-mono text-[12px]",
+            headed && "sr-only"
           ),
           children: label
         }
@@ -7649,6 +7757,12 @@ function NativeValue({ value, label }) {
       return /* @__PURE__ */ jsx(RawValue, { value, compact: false });
   }
 }
+function memberText(value) {
+  if (typeof value === "string") return value === "" ? void 0 : value;
+  if (!isRecord(value)) return void 0;
+  const content = readMemberContent(value);
+  return content?.model === "text" && content.text !== "" ? content.text : void 0;
+}
 function NativeList({ items, label }) {
   if (items.length === 0) return /* @__PURE__ */ jsx(Absent, {});
   if (items.every(isPlainRecord)) return /* @__PURE__ */ jsx(RecordsTable, { items, label });
@@ -7981,6 +8095,18 @@ function SearchSource({ source }) {
 function isLongText(value) {
   return typeof value === "string" && (value.includes("\n") || value.length > CELL_LENGTH_LIMIT);
 }
+function typesetText(field, value, isApp) {
+  if (typeof value !== "string" || value === "") return void 0;
+  if (field.kind === "prose") return value;
+  return isApp && field.kind === "text" && isLongText(value) ? value : void 0;
+}
+function namesItself(field, value, isApp) {
+  const typeset = typesetText(field, value, isApp);
+  return isApp && typeset !== void 0 && opensWithHeading(typeset);
+}
+function resultHeadsItself(field, value, presentation) {
+  return namesItself(field, unwrap(field, value), presentation === "app");
+}
 var PanelResultContext = createContext(null);
 var TITLED_PANEL = { hostHeaded: false };
 var HOST_HEADED_PANEL = { hostHeaded: true };
@@ -8210,14 +8336,35 @@ function ResultNode({
     case "prose":
     case "number":
     case "enum":
-    case "unknown":
-      return /* @__PURE__ */ jsxs("div", { className: field.kind === "image" ? "space-y-1.5" : "space-y-0.5", children: [
-        copyText === void 0 ? header : /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: header }),
-          /* @__PURE__ */ jsx(CopyButton, { value: copyText, label: s.copyText })
-        ] }),
-        isApp && field.kind === "text" && isLongText(unwrapped) ? /* @__PURE__ */ jsx(Markdown, { text: unwrapped }) : field.kind === "document" && whole ? /* @__PURE__ */ jsx(DocumentValue, { value: unwrapped, whole: true }) : /* @__PURE__ */ jsx(LeafValue, { field, value })
-      ] });
+    case "unknown": {
+      const typeset = typesetText(field, unwrapped, isApp);
+      const headed = !hideLabel && namesItself(field, unwrapped, isApp);
+      const labelDrawn = !hideLabel && !headed;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            field.kind === "image" ? "space-y-1.5" : "space-y-0.5",
+            // Holds the copy control's float, when it floats.
+            copyText !== void 0 && !labelDrawn && "flow-root"
+          ),
+          children: [
+            copyText === void 0 ? (
+              // A text that heads itself always has something to copy, so this
+              // arm draws the label exactly when it is not hidden.
+              header
+            ) : labelDrawn ? /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: header }),
+              /* @__PURE__ */ jsx(CopyButton, { value: copyText, label: s.copyText })
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              headed && /* @__PURE__ */ jsx(Label2, { field, describe: true, unseen: true }),
+              /* @__PURE__ */ jsx("div", { className: "float-right ml-2", children: /* @__PURE__ */ jsx(CopyButton, { value: copyText, label: s.copyText }) })
+            ] }),
+            typeset !== void 0 ? /* @__PURE__ */ jsx(Markdown, { text: typeset }) : field.kind === "document" && whole ? /* @__PURE__ */ jsx(DocumentValue, { value: unwrapped, whole: true }) : /* @__PURE__ */ jsx(LeafValue, { field, value })
+          ]
+        }
+      );
+    }
   }
   return null;
 }
@@ -8257,9 +8404,13 @@ function highlight(json) {
   }
   return out;
 }
+var noSubscription = () => () => {
+};
+var hasClipboard = () => typeof navigator !== "undefined" && Boolean(navigator.clipboard);
 function JsonView({ value }) {
   const s = useFieldStrings();
   const [copied, setCopied] = useState(false);
+  const canCopy = useSyncExternalStore(noSubscription, hasClipboard, () => false);
   useEffect(() => {
     if (!copied) return;
     const timer = window.setTimeout(() => setCopied(false), 1500);
@@ -8270,7 +8421,7 @@ function JsonView({ value }) {
     return /* @__PURE__ */ jsx(Absent, {});
   }
   return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-    typeof navigator !== "undefined" && navigator.clipboard && /* @__PURE__ */ jsx(
+    canCopy && /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
@@ -8279,13 +8430,27 @@ function JsonView({ value }) {
         },
         "aria-label": s.copyJson,
         className: cn(
-          "absolute right-2 top-2 rounded border border-border bg-card p-1 text-muted-foreground hover:text-foreground",
+          // 44 by 44 on a phone, like every control a finger taps.
+          "absolute right-2 top-2 inline-flex items-center justify-center rounded border border-border bg-card p-1 text-muted-foreground hover:text-foreground max-sm:size-11",
           focusOutlineClass
         ),
         children: copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "size-3.5" }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": true, className: "size-3.5" })
       }
     ),
-    /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto rounded-lg border border-border bg-card/40 px-3.5 py-3 pr-12 font-mono text-[12px] leading-relaxed", children: highlight(text) })
+    /* @__PURE__ */ jsx(
+      "pre",
+      {
+        role: "group",
+        "aria-label": s.viewJson,
+        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",
+          focusOutlineClass
+        ),
+        children: highlight(text)
+      }
+    )
   ] });
 }
 function isShownResult(attempt, field, baseName, value) {
@@ -8378,9 +8543,38 @@ function StuffPanel({
   const labels = { rendered: s.viewRendered, json: s.viewJson };
   const pdfName = page && pdfShown ? pdfFileName(field, value, baseName) : void 0;
   const pageView = page !== void 0 && view !== "json";
-  const titled = presentation !== "app" || name !== void 0 && name !== "" && !page;
+  const headsItself = !page && resultHeadsItself(field, value, presentation);
+  const hostNamed = name !== void 0 && name !== "";
+  const titled = presentation !== "app" || hostNamed && !page && !headsItself;
   const switchShown = offered.length > 1;
-  const headerShown = titled || downloadShown || switchShown || page && pdfName !== void 0;
+  const downloadAtFoot = downloadShown && !titled && !switchShown && !page;
+  const headerShown = titled || downloadShown && !downloadAtFoot || switchShown || page && pdfName !== void 0;
+  const downloadButton = downloadShown && /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => void handleDownload(),
+      disabled: savingShown,
+      "aria-label": page ? s.downloadHtml : s.download,
+      className: cn(
+        // 44 pixels tall below `sm`, as every control a finger hits is.
+        "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 max-sm:min-h-11 max-sm:px-3",
+        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
+      ]
+    }
+  );
+  const missedStatus = downloadShown && /* @__PURE__ */ jsx(
+    "p",
+    {
+      role: "status",
+      className: cn("shrink-0 text-[12px] text-destructive", missedShown.length === 0 && "sr-only"),
+      children: missedShown.length > 0 ? s.downloadIncomplete(missedShown) : ""
+    }
+  );
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -8396,6 +8590,7 @@ function StuffPanel({
       ),
       children: [
         dialog,
+        hostNamed && headsItself && /* @__PURE__ */ jsx(ResultHeader, { field: named, unseen: true }),
         headerShown && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-wrap items-center justify-between gap-x-4 gap-y-1", children: [
           titled ? /* @__PURE__ */ jsx("div", { className: "min-w-0 space-y-1", children: /* @__PURE__ */ jsx(ResultHeader, { field: named }) }) : /* @__PURE__ */ jsx("div", {}),
           /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
@@ -8408,23 +8603,7 @@ function StuffPanel({
                 ...pdfName ? { fileName: pdfName } : {}
               }
             ),
-            downloadShown && /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "button",
-                onClick: () => void handleDownload(),
-                disabled: savingShown,
-                "aria-label": page ? s.downloadHtml : s.download,
-                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
-                ]
-              }
-            ),
+            !downloadAtFoot && downloadButton,
             switchShown && /* @__PURE__ */ jsx(
               "div",
               {
@@ -8438,7 +8617,8 @@ function StuffPanel({
                     onClick: () => setView(id),
                     "aria-pressed": view === id,
                     className: cn(
-                      "rounded px-2 py-0.5 text-[12px]",
+                      // 44 by 44 below `sm`, as every control a finger hits is.
+                      "rounded px-2 py-0.5 text-[12px] max-sm:min-h-11 max-sm:min-w-11 max-sm:px-3",
                       focusOutlineClass,
                       view === id ? "bg-card font-medium text-foreground" : "text-muted-foreground hover:text-foreground"
                     ),
@@ -8450,23 +8630,17 @@ function StuffPanel({
             )
           ] })
         ] }),
-        downloadShown && /* @__PURE__ */ jsx(
-          "p",
-          {
-            role: "status",
-            className: cn(
-              "shrink-0 text-[12px] text-destructive",
-              missedShown.length === 0 && "sr-only"
-            ),
-            children: missedShown.length > 0 ? s.downloadIncomplete(missedShown) : ""
-          }
-        ),
+        !downloadAtFoot && missedStatus,
         view === "json" ? /* @__PURE__ */ jsx(JsonView, { value }) : page ? (
           // The page is the panel's main view: drawn here rather than through
           // `ResultField`, whose page arm would add a second control row saving
           // the same file, and with no box around it.
           /* @__PURE__ */ jsx(HtmlPreview, { content: page, downloadPdf: false, bare: true, fill: true })
-        ) : /* @__PURE__ */ jsx(ResultRoot, { baseName, path: [field.name], children: /* @__PURE__ */ jsx(PanelResult, { hostHeaded: !titled, children: /* @__PURE__ */ jsx(ResultField, { field, value, hideLabel: true }) }) })
+        ) : /* @__PURE__ */ jsx(ResultRoot, { baseName, path: [field.name], children: /* @__PURE__ */ jsx(PanelResult, { hostHeaded: !titled, children: /* @__PURE__ */ jsx(ResultField, { field, value, hideLabel: true }) }) }),
+        downloadAtFoot && /* @__PURE__ */ jsxs("div", { className: "space-y-1 pt-2", children: [
+          downloadButton,
+          missedStatus
+        ] })
       ]
     }
   );
@@ -8477,6 +8651,6 @@ function pdfFileName(field, value, baseName) {
   return name === void 0 ? "" : name.replace(/\.[^.]+$/, "");
 }
 
-export { BooleanField, ConceptPill, DEFAULT_FIELD_STRINGS, DateField, DocumentField, EN_FIELD_STRINGS, EnumField, FIELD_STRINGS_BY_LOCALE, FR_FIELD_STRINGS, FieldDomIdProvider, FieldPresentationProvider, FieldRenderer, FieldShell, FieldStringsProvider, FilePicker, FilePickerEntry, FillWithExample, HtmlPreview, ImageField, JsonView, ListField, Markdown, MethodForm, NumberField, ObjectField, OptionalToggle, PdfDownloadButton, ProseField, ResultEnvProvider, ResultField, ResultRoot, SUPPORTED_LOCALES, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, StuffViewer, Switch, TextField, ToggleGroup, ToggleGroupItem, UnknownField, checkedAccentClass, cn, enumLabeler, fieldControlClass, fieldStringsFor, focusOutlineClass, linkTextClass, renderHtmlPdf, resolveHtmlStorageUrls, saveInBrowser, selectedBorderClass, selectedFillClass, selectedFillStrongClass, useFieldDomId, useFieldPresentation, useFieldStrings, useMethodForm, useProseImages, useResolveRendition, useResolveShareUrl, useResolveUrl, useResolvedUrl };
-//# sourceMappingURL=chunk-RHX7LQRL.js.map
-//# sourceMappingURL=chunk-RHX7LQRL.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, 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