@pipelex/mthds-form 0.32.0 → 0.34.0

package/README.md

@@ -4,7 +4,7 @@ The input form for MTHDS methods, as a library: a headless kernel that maps the
 
 It exists because "the form" is one problem that keeps being solved separately. A method declares its inputs; something has to decide what widget each input deserves, whether the Run button may light up, what shape the values take on the wire, and what a validation failure says to a person. That logic belongs in one place with tests around it, not copied into each surface that happens to need a form.
 
-## Five entry points
+## Entry points
 
 ```ts
 import { buildRunFields, computeReadiness } from '@pipelex/mthds-form'; // headless

package/dist/brand/index.js

@@ -1,7 +1,7 @@
 import { httpUrl, brandManifestSchema } from '../chunk-QGFR57OH.js';
 export { brandManifestSchema } from '../chunk-QGFR57OH.js';
-import { BRAND_CONTRACT, resolveColor, colorIsHex, colorHex, COLOR_TOKEN_NAMES, modeValue, aliasTarget, asWritten, isControlCharacter, validateBrandTokens } from '../chunk-3GO65HWP.js';
-export { APP_STYLES, APP_STYLE_IDS, BRAND_CONTRACT, COLOR_TOKEN_NAMES, CONTRAST_PAIRS, MIN_CONTRAST, MIN_CONTROL_CONTRAST, TYPEFACES, colorHex, colorIsHex, contractVariable, contrastRatio, deriveBrandRoles, deriveStyleRoles, isAccentAdjusted, isActionFaint, isAppStyle, isColorTokenName, isTypeface, readableTextOn, resolveColor, resolveDarkSeeds, resolveRoleColor, srgbColorSchema, validateBrandTokens } from '../chunk-3GO65HWP.js';
+import { BRAND_CONTRACT, resolveColor, colorIsHex, colorHex, COLOR_TOKEN_NAMES, modeValue, aliasTarget, asWritten, isControlCharacter, validateBrandTokens } from '../chunk-PNNWNRPG.js';
+export { APP_STYLES, APP_STYLE_IDS, BRAND_CONTRACT, COLOR_TOKEN_NAMES, CONTRAST_PAIRS, MIN_CONTRAST, MIN_CONTROL_CONTRAST, TYPEFACES, colorHex, colorIsHex, contractVariable, contrastRatio, deriveBrandRoles, deriveStyleRoles, isAccentAdjusted, isActionFaint, isAppStyle, isColorTokenName, isTypeface, readableTextOn, resolveColor, resolveDarkSeeds, resolveRoleColor, srgbColorSchema, validateBrandTokens } from '../chunk-PNNWNRPG.js';
 import { z } from 'zod';
 
 var statedHex = z.string().regex(/^#[0-9a-f]{6}$/i, "a stated accent is #rrggbb");

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

@@ -1,14 +1,14 @@
 import { planFileSave, planStuffSave, splitFileName, typedFileStem } from './chunk-4VAO6BDE.js';
-import { seedInputs, closeOptionalStructures, openOptionalStructures } from './chunk-VH5CDQDR.js';
+import { seedInputs, closeOptionalStructures, openOptionalStructures } from './chunk-AURDKAIC.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 { apiInputsFromRunValues, sameRunValues, runValuesFromInputs, setValueAtPath } from './chunk-CFBK7NO7.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 { 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 { 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 { clsx } from 'clsx';
@@ -84,11 +84,27 @@ 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 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",
+      "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
     ),
@@ -284,6 +300,7 @@ var EN_FIELD_STRINGS = {
   optionalInputsCount: (count) => count === 1 ? "1 optional input" : `${count} optional inputs`,
   requiredField: "Required",
   incompleteField: "Incomplete: fill in its required fields",
+  runWaitsFor: (names, more) => `Fill in ${someNames(names, more)} to run`,
   uploadFailed: "This file could not be uploaded. Try again.",
   chooseFromSource: "Choose from your team's files",
   chooseFromSourceAria: (label) => label ? `Choose from your team's files for ${label}` : "Choose from your team's files",
@@ -469,6 +486,7 @@ var FR_FIELD_STRINGS = {
   optionalInputsCount: (count) => `${count} ${plural(count, "entr\xE9e facultative", "entr\xE9es facultatives")}`,
   requiredField: "Obligatoire",
   incompleteField: "Incomplet\xA0: remplissez ses champs obligatoires",
+  runWaitsFor: (names, more) => `Remplissez ${someNames2(names, more)} pour lancer`,
   uploadFailed: "Ce fichier n\u2019a pas pu \xEAtre envoy\xE9. R\xE9essayez.",
   chooseFromSource: "Choisir parmi les fichiers de l\u2019\xE9quipe",
   chooseFromSourceAria: (label) => label ? `Choisir parmi les fichiers de l\u2019\xE9quipe pour ${label}` : "Choisir parmi les fichiers de l\u2019\xE9quipe",
@@ -550,6 +568,7 @@ function FieldStringsProvider({
 function useFieldStrings() {
   return useContext(FieldStringsContext);
 }
+var ERROR_OUTLINE = "rounded-lg outline-solid outline-1 outline-offset-4 outline-destructive";
 function FieldShell({
   name,
   title,
@@ -568,6 +587,7 @@ function FieldShell({
   const Label3 = htmlFor ? "label" : "div";
   const labelText = fieldLabel(title, name, presentation);
   const showLabel = labelText.trim() !== "";
+  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: [
       showLabel && /* @__PURE__ */ jsx(
@@ -599,10 +619,8 @@ function FieldShell({
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: cn(
-          "space-y-2",
-          isApp && error && "rounded-lg ring-1 ring-destructive/70 ring-offset-4 ring-offset-background"
-        ),
+        "data-error-outline": outlined ? "" : void 0,
+        className: cn("space-y-2", outlined && ERROR_OUTLINE),
         children
       }
     ),
@@ -648,20 +666,6 @@ function DateField({ field, value, onChange, id, error, disabled }) {
   );
 }
 
-// src/react/role-tokens.ts
-var linkTextClass = "text-[color:var(--link,var(--primary,hsl(240_5.9%_10%)))]";
-var selectedFillClass = "bg-[color:var(--selected,color-mix(in_oklab,var(--primary,hsl(240_5.9%_10%))_10%,transparent))]";
-var selectedStateFillClass = "data-[state=on]:bg-[color:var(--selected,color-mix(in_oklab,var(--primary,hsl(240_5.9%_10%))_10%,transparent))]";
-var selectedCheckedFillClass = "aria-checked:bg-[color:var(--selected,color-mix(in_oklab,var(--primary,hsl(240_5.9%_10%))_10%,transparent))]";
-var selectedFillStrongClass = "bg-[color:var(--selected,color-mix(in_oklab,var(--primary,hsl(240_5.9%_10%))_15%,transparent))]";
-var selectedBorderClass = "border-[color:color-mix(in_oklab,var(--link,var(--primary,hsl(240_5.9%_10%)))_40%,transparent)]";
-var selectedStateBorderClass = "data-[state=on]:border-[color:color-mix(in_oklab,var(--link,var(--primary,hsl(240_5.9%_10%)))_40%,transparent)]";
-var selectedHoverBorderClass = "hover:border-[color:color-mix(in_oklab,var(--link,var(--primary,hsl(240_5.9%_10%)))_40%,transparent)]";
-var checkedAccentClass = "accent-[color:var(--link,var(--primary,hsl(240_5.9%_10%)))]";
-var focusOutlineClass = "focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring";
-var focusOutlineInsetClass = "focus-visible:outline-solid focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring";
-var frameFocusOutlineClass = "data-focus-visible:outline-solid data-focus-visible:outline-2 data-focus-visible:-outline-offset-2 data-focus-visible:outline-ring";
-
 // src/react/encoded-file.ts
 function encodedFileSummary(url, strings) {
   const view = readDataUrl(url);
@@ -919,7 +923,8 @@ var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 var toggleVariants = cva(
   [
-    "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:text-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
+    "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:text-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
+    focusOutlineClass,
     selectedStateFillClass
   ],
   {
@@ -1653,8 +1658,9 @@ function FileField({
           // the visual affordance, and the control inside it is a real
           // `<input type="file">`, which already has the right role and now has a
           // name. Giving the div a `role="button"` of its own would put a second
-          // named control in the accessibility tree for one value. The focus ring
-          // is `focus-within` because the element that takes focus is clip-hidden.
+          // named control in the accessibility tree for one value. The focus
+          // outline is `focus-within` because the element that takes focus is
+          // clip-hidden.
           /* @__PURE__ */ jsxs(
             "div",
             {
@@ -1662,7 +1668,7 @@ function FileField({
               className: cn(
                 "flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed px-4 py-6 text-center",
                 "cursor-pointer select-none transition-colors",
-                "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background",
+                focusWithinOutlineClass,
                 isDragActive ? "border-primary/60 bg-primary/5" : "border-border bg-input hover:border-border hover:bg-muted",
                 busy && "cursor-not-allowed opacity-60"
               ),
@@ -2205,6 +2211,7 @@ function OptionalToggle({ count, expanded, onToggle, noun = "field" }) {
 }
 var StructureDepthContext = createContext(0);
 var FramedFormContext = createContext(false);
+var RefusedStructureContext = createContext(null);
 function structureGrouping(depth, labelled, framed) {
   if (!labelled) return "none";
   if (depth > 0) return "rule";
@@ -2227,6 +2234,14 @@ function ObjectField({ field, value, onChange, id, error, env }) {
   const label = fieldLabel(field.title, field.name, presentation);
   const grouping = structureGrouping(depth, label.trim() !== "", use(FramedFormContext));
   const domId = useFieldDomId(id);
+  const refused = use(RefusedStructureContext) === id;
+  const s = useFieldStrings();
+  const markOf = (child) => {
+    if (!refused) return void 0;
+    const refusal = gateRefusal(child, ownProp(data, child.name), child.required);
+    if (refusal === "required") return s.requiredField;
+    return refusal === "incomplete" ? s.incompleteField : void 0;
+  };
   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);
@@ -2266,20 +2281,27 @@ function ObjectField({ field, value, onChange, id, error, env }) {
           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 === "box" || grouping === "rule") && (error ? "border-destructive/50" : "border-border")
+          // In error, a card's outline and a rule turn the error colour
+          // itself, which the brand contract holds at 3:1 on the page and on
+          // a card: at half of it they read under that bar in every palette.
+          (grouping === "box" || grouping === "rule") && (error ? "border-destructive" : "border-border")
         ),
         children: [
-          /* @__PURE__ */ jsx(StructureDepthContext, { value: depth + 1, children: visible.map((child) => /* @__PURE__ */ jsx(
-            FieldRenderer,
-            {
-              field: child,
-              value: ownProp(data, child.name),
-              onChange: (v) => setChild(child.name, v),
-              id: `${id}.${child.name}`,
-              env
-            },
-            child.name
-          )) }),
+          /* @__PURE__ */ jsx(StructureDepthContext, { value: depth + 1, children: visible.map((child) => {
+            const childId = `${id}.${child.name}`;
+            const mark = markOf(child);
+            return /* @__PURE__ */ jsx(RefusedStructureContext, { value: mark ? childId : null, children: /* @__PURE__ */ jsx(
+              FieldRenderer,
+              {
+                field: child,
+                value: ownProp(data, child.name),
+                onChange: (v) => setChild(child.name, v),
+                id: childId,
+                error: mark,
+                env
+              }
+            ) }, child.name);
+          }) }),
           (folded.length > 0 || structureOpen) && /* @__PURE__ */ jsx(
             OptionalToggle,
             {
@@ -2372,7 +2394,7 @@ function ListFileDrop({ label, formats, shut, onPlace }) {
         className: cn(
           "flex flex-col items-center justify-center gap-1 rounded-md border border-dashed px-4 py-4 text-center max-sm:min-h-11",
           "cursor-pointer select-none transition-colors",
-          "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background",
+          focusWithinOutlineClass,
           isDragActive ? "border-primary/60 bg-primary/5" : "border-border bg-input hover:border-border hover:bg-muted",
           shut && "cursor-not-allowed opacity-60"
         ),
@@ -3871,13 +3893,12 @@ function MethodFormFields({
       );
     }
   };
-  const errorFor = (field) => {
+  const refusalOf = (field) => attempted ? gateRefusal(field, ownProp(values, field.name), mustBeFilled(field)) : void 0;
+  const errorFor = (field, refusal) => {
     const hostError = errors ? ownProp(errors, field.name) : void 0;
     if (hostError) return hostError;
-    if (!attempted) return void 0;
-    const value = ownProp(values, field.name);
-    if (mustBeFilled(field)) return fieldFilled(field, value) ? void 0 : s.requiredField;
-    return isFilled(value) && !fieldFilled(field, value) ? s.incompleteField : void 0;
+    if (refusal === "required") return s.requiredField;
+    return refusal === "incomplete" ? s.incompleteField : void 0;
   };
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-6", framed && SECTION_RULES, className), children: [
     exampleSource && /* @__PURE__ */ jsx(
@@ -3890,18 +3911,33 @@ function MethodFormFields({
         disabled
       }
     ),
-    visible.map((field) => /* @__PURE__ */ jsx(
-      FieldRenderer,
-      {
-        field,
-        id: field.name,
-        value: ownProp(values, field.name),
-        error: errorFor(field),
-        env,
-        onChange: (next) => setValues((previous) => ({ ...previous, [field.name]: next }))
-      },
-      `${field.name}:${resets}`
-    )),
+    visible.map((field) => {
+      const refusal = refusalOf(field);
+      return (
+        // Remounted on each reset, so no control keeps what it held for the
+        // values the reset replaced (a file still arriving, a failed drop). A
+        // structure the gate refuses marks the members it refuses, whatever
+        // a host's message says of the structure.
+        /* @__PURE__ */ jsx(
+          RefusedStructureContext,
+          {
+            value: refusal ? field.name : null,
+            children: /* @__PURE__ */ jsx(
+              FieldRenderer,
+              {
+                field,
+                id: field.name,
+                value: ownProp(values, field.name),
+                error: errorFor(field, refusal),
+                env,
+                onChange: (next) => setValues((previous) => ({ ...previous, [field.name]: next }))
+              }
+            )
+          },
+          `${field.name}:${resets}`
+        )
+      );
+    }),
     (folded.length > 0 || structureOpen) && /* @__PURE__ */ jsx(OptionalToggle, { count: folded.length, expanded, onToggle: toggle, noun: "input" })
   ] });
 }
@@ -4254,6 +4290,7 @@ function ResultEnvProvider({
   saveFiles,
   downloads,
   renderPdf,
+  framed,
   children
 }) {
   const env = useMemo(
@@ -4267,7 +4304,8 @@ function ResultEnvProvider({
       tableLayout,
       saveFiles,
       downloads,
-      renderPdf
+      renderPdf,
+      framed
     }),
     [
       resolveUrl,
@@ -4279,7 +4317,8 @@ function ResultEnvProvider({
       tableLayout,
       saveFiles,
       downloads,
-      renderPdf
+      renderPdf,
+      framed
     ]
   );
   return /* @__PURE__ */ jsx(ResultEnvContext, { value: env, children });
@@ -4287,6 +4326,7 @@ function ResultEnvProvider({
 function PanelEnvOverride({
   downloads,
   tableLayout,
+  framed,
   children
 }) {
   const env = use(ResultEnvContext);
@@ -4296,10 +4336,11 @@ function PanelEnvOverride({
   const askFileName = downloads?.askFileName;
   const merged = useMemo(() => {
     const ownDownloads = result !== void 0 || files !== void 0 || pdf !== void 0 || askFileName !== void 0;
-    if (!ownDownloads && tableLayout === void 0) return env;
+    if (!ownDownloads && tableLayout === void 0 && framed === void 0) return env;
     return {
       ...env,
       ...tableLayout === void 0 ? {} : { tableLayout },
+      ...framed === void 0 ? {} : { framed },
       ...ownDownloads ? {
         downloads: {
           result: result ?? env.downloads?.result,
@@ -4309,7 +4350,7 @@ function PanelEnvOverride({
         }
       } : {}
     };
-  }, [env, result, files, pdf, askFileName, tableLayout]);
+  }, [env, result, files, pdf, askFileName, tableLayout, framed]);
   return /* @__PURE__ */ jsx(ResultEnvContext, { value: merged, children });
 }
 function useResolvedUrl(url) {
@@ -4380,6 +4421,9 @@ function useTableColumns() {
 function useTableLayout() {
   return use(ResultEnvContext).tableLayout ?? "scroll";
 }
+function useResultFramed() {
+  return use(ResultEnvContext).framed ?? false;
+}
 var OverlayLayerContext = createContext(null);
 function OverlayLayer({ children }) {
   const outer = use(OverlayLayerContext);
@@ -7464,6 +7508,9 @@ function stackingFor(columns, rowsOpen) {
   }
   return columns > STACK_ALWAYS_BEYOND ? "always" : "narrow";
 }
+function useTableBox() {
+  return useResultFramed() ? { name: "framed", className: "rounded-md" } : { name: "box", className: "rounded-lg border border-border" };
+}
 var STACKED = {
   phone: {
     table: "max-sm:block",
@@ -7567,6 +7614,7 @@ function ObjectTable({
   const presentation = useFieldPresentation();
   const budget = useTableColumns();
   const layout = useTableLayout();
+  const box = useTableBox();
   const scrollerRef = useRef(null);
   const [expanded, setExpanded] = useState(() => /* @__PURE__ */ new Set());
   const [viewportWidth, setViewportWidth] = useState();
@@ -7637,8 +7685,10 @@ function ObjectTable({
         role: "group",
         "aria-label": label,
         ...fits && !overflows ? {} : { tabIndex: 0 },
+        "data-table-box": box.name,
         className: cn(
-          "overflow-x-auto rounded-lg border border-border",
+          "overflow-x-auto",
+          box.className,
           focusOutlineInsetClass,
           EXPAND_COLUMN_WIDTH,
           fits && "@container"
@@ -7716,7 +7766,15 @@ function ObjectTable({
                               width: canExpand ? `calc(${viewportWidth}px - ${EXPAND_COLUMN})` : viewportWidth
                             }
                           } : {},
-                          children: /* @__PURE__ */ jsx(ResultField, { field: element, value: item, hideLabel: true })
+                          children: /* @__PURE__ */ jsx(
+                            PanelEnvOverride,
+                            {
+                              downloads: void 0,
+                              tableLayout: void 0,
+                              framed: false,
+                              children: /* @__PURE__ */ jsx(ResultField, { field: element, value: item, hideLabel: true })
+                            }
+                          )
                         }
                       ) }) : shown.map((column) => {
                         const cell = typeof item === "object" && item !== null ? ownProp(item, column.name) : void 0;
@@ -7899,6 +7957,7 @@ function RecordsTable({
 }) {
   const presentation = useFieldPresentation();
   const isApp = presentation === "app";
+  const box = useTableBox();
   const columns = [];
   for (const item of items) {
     for (const key of Object.keys(item)) if (!columns.includes(key)) columns.push(key);
@@ -7910,7 +7969,8 @@ function RecordsTable({
       role: "group",
       "aria-label": label,
       tabIndex: 0,
-      className: cn("overflow-x-auto rounded-lg border border-border", focusOutlineClass),
+      "data-table-box": box.name,
+      className: cn("overflow-x-auto", box.className, focusOutlineClass),
       children: /* @__PURE__ */ jsxs("table", { className: "min-w-full border-collapse text-[12.5px] text-foreground", children: [
         /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "border-b border-border bg-card/40", children: columns.map((column) => /* @__PURE__ */ jsx(
           "th",
@@ -7926,7 +7986,19 @@ function RecordsTable({
         )) }) }),
         /* @__PURE__ */ jsx("tbody", { children: items.map((item, index) => /* @__PURE__ */ jsx("tr", { className: "border-b border-border/60 last:border-b-0", children: columns.map((column) => {
           const cell = ownProp(item, column);
-          return /* @__PURE__ */ jsx("td", { className: "px-2.5 py-1.5 align-top", children: typeof cell === "boolean" ? /* @__PURE__ */ jsx(Bool, { value: cell }) : typeof cell === "object" && cell !== null ? /* @__PURE__ */ jsx(NativeValue, { value: cell, label: columnLabel(column) }) : /* @__PURE__ */ jsx(Scalar, { value: cell }) }, column);
+          return /* @__PURE__ */ jsx("td", { className: "px-2.5 py-1.5 align-top", children: typeof cell === "boolean" ? /* @__PURE__ */ jsx(Bool, { value: cell }) : typeof cell === "object" && cell !== null ? (
+            // Out of the host's panel, as far as a table in the
+            // cell knows, since this table is what frames it.
+            /* @__PURE__ */ jsx(
+              PanelEnvOverride,
+              {
+                downloads: void 0,
+                tableLayout: void 0,
+                framed: false,
+                children: /* @__PURE__ */ jsx(NativeValue, { value: cell, label: columnLabel(column) })
+              }
+            )
+          ) : /* @__PURE__ */ jsx(Scalar, { value: cell }) }, column);
         }) }, index)) })
       ] })
     }
@@ -8557,8 +8629,8 @@ function resultKey(field, baseName, value) {
     return void 0;
   }
 }
-function StuffViewer({ downloads, tableLayout, ...props }) {
-  return /* @__PURE__ */ jsx(PanelEnvOverride, { downloads, tableLayout, children: /* @__PURE__ */ jsx(StuffPanel, { ...props }) });
+function StuffViewer({ downloads, tableLayout, framed, ...props }) {
+  return /* @__PURE__ */ jsx(PanelEnvOverride, { downloads, tableLayout, framed, children: /* @__PURE__ */ jsx(StuffPanel, { ...props }) });
 }
 function StuffPanel({
   field,
@@ -8739,6 +8811,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, isThenable, linkTextClass, panelFlatShadowClass, panelRaisedShadowClass, panelSurfaceClass, renderHtmlPdf, resolveHtmlStorageUrls, saveInBrowser, selectedBorderClass, selectedFillClass, selectedFillStrongClass, useFieldDomId, useFieldPresentation, useFieldStrings, useMethodForm, useProseImages, useResolveRendition, useResolveShareUrl, useResolveUrl, useResolvedUrl };
-//# sourceMappingURL=chunk-PCNFELNT.js.map
-//# sourceMappingURL=chunk-PCNFELNT.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, 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