@pipelex/mthds-form 0.6.0 → 0.7.0

package/dist/react/index.d.ts

@@ -247,6 +247,26 @@ type StuffViewerView = 'rendered' | 'json';
 interface StuffViewerProps {
     field: RunField;
     value: unknown;
+    /**
+     * The STUFF's name, for the header — `report_pages`, not `output`.
+     *
+     * A result descriptor's root node is named by the engine that built it, and
+     * `build_output_form` calls it `output` for every pipe there has ever been.
+     * That is correct in the artifact: the descriptor describes a pipe's output
+     * slot, which has no name of its own. It is wrong on screen, where the reader
+     * is looking at ONE data item and every other surface — the graph node they
+     * clicked, the input panel beside it, the method's own code — calls that item
+     * by the name the author gave it.
+     *
+     * So the name comes from the caller, because only the caller knows it: the
+     * graph knows which node was opened, a run page knows which variable it is
+     * showing. Absent, the descriptor's own name stands, which keeps a host that
+     * has nothing better to say honest rather than blank.
+     *
+     * It also supplies `downloadBaseName`'s default, so the file a reader saves
+     * is named after the thing they were reading rather than `output.json`.
+     */
+    name?: string;
     /** Which view opens first. Rendered, unless a host has a reason. */
     defaultView?: StuffViewerView;
     /**
@@ -276,7 +296,7 @@ interface StuffViewerProps {
 declare function JsonView({ value }: {
     value: unknown;
 }): react.JSX.Element;
-declare function StuffViewer({ field, value, defaultView, downloadBaseName, hideDownload, className, }: StuffViewerProps): react.JSX.Element;
+declare function StuffViewer({ field, value, name, defaultView, downloadBaseName, hideDownload, className, }: StuffViewerProps): react.JSX.Element;
 
 /** How a host turns a stored reference into something fetchable. */
 type ResolveForDownload = (url: string) => string | undefined;

package/dist/react/index.js

@@ -2062,14 +2062,22 @@ function LoadingImage({ src, alt, className }) {
   ] });
 }
 function ScalarChips({ field, items }) {
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: items.map((item, index) => /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: "rounded-md border border-border bg-card/40 px-2 py-0.5 text-[12.5px] text-foreground",
-      children: /* @__PURE__ */ jsx(LeafValue, { field, value: item })
-    },
-    index
-  )) });
+  return (
+    // `data-chips` is the hook the definition grid's value cell reaches through:
+    // `text-right` has no effect on flex children, so a row of tags would keep
+    // starting under its label while every value beside it ended at the right
+    // edge. The attribute keeps that one selector out of this component's own
+    // class list - chips are laid out the same way everywhere, and only the
+    // caller knows which edge they should end on.
+    /* @__PURE__ */ jsx("div", { "data-chips": true, className: "flex flex-wrap gap-1.5", children: items.map((item, index) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "rounded-md border border-border bg-card/40 px-2 py-0.5 text-[12.5px] text-foreground",
+        children: /* @__PURE__ */ jsx(LeafValue, { field, value: item })
+      },
+      index
+    )) })
+  );
 }
 function ItemCount({ count }) {
   const s = useFieldStrings();
@@ -2080,6 +2088,7 @@ function isInlineColumn(field) {
   return TABULAR_KINDS.has(field.kind);
 }
 var CELL_LENGTH_LIMIT = 80;
+var EXPAND_COLUMN = "2rem";
 function fitsACellWhole(field) {
   switch (field.kind) {
     case "boolean":
@@ -2148,9 +2157,9 @@ function ObjectTable({
         "aria-label": label,
         tabIndex: 0,
         className: "overflow-x-auto rounded-lg border border-border",
-        children: /* @__PURE__ */ jsxs("table", { className: "min-w-full border-collapse text-[13px]", children: [
-          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-b border-border bg-card/40 text-left", children: [
-            canExpand && /* @__PURE__ */ jsx("th", { scope: "col", className: "w-8 px-1", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: s.rowDetailsColumn }) }),
+        children: /* @__PURE__ */ jsxs("table", { className: "w-full min-w-full border-collapse text-[13px]", children: [
+          /* @__PURE__ */ jsx("thead", { 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 }) }),
             columns.map((column) => /* @__PURE__ */ jsx(
               "th",
               {
@@ -2182,7 +2191,15 @@ function ObjectTable({
                 "div",
                 {
                   className: "sticky left-0 px-3.5 py-3",
-                  ...viewportWidth ? { style: { width: viewportWidth } } : {},
+                  ...viewportWidth ? {
+                    style: {
+                      // Minus the chevron column: this cell starts
+                      // after it, so pinning it to the FULL visible
+                      // width pushes its right edge that far past the
+                      // scroller. See `EXPAND_COLUMN`.
+                      width: canExpand ? `calc(${viewportWidth}px - ${EXPAND_COLUMN})` : viewportWidth
+                    }
+                  } : {},
                   children: /* @__PURE__ */ jsx(ResultField, { field: element, value: item, hideLabel: true })
                 }
               ) }) : columns.map((column) => {
@@ -2326,7 +2343,7 @@ function ResultField({ field, value, depth = 0, hideLabel = false }) {
                 // longest label left over.
                 isInlineColumn(child) ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
                   /* @__PURE__ */ jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsx(Label2, { field: child, describe: true }) }),
-                  /* @__PURE__ */ jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsx(LeafValue, { field: child, value: memberValue(child) }) })
+                  /* @__PURE__ */ jsx("div", { className: "min-w-0 text-right [&_[data-chips]]:justify-end", children: /* @__PURE__ */ jsx(LeafValue, { field: child, value: memberValue(child) }) })
                 ] }, child.name) : /* @__PURE__ */ jsx("div", { className: "col-span-2 min-w-0", children: /* @__PURE__ */ jsx(ResultField, { field: child, value: memberValue(child), depth: depth + 1 }) }, child.name)
               )
             )
@@ -2521,12 +2538,14 @@ function JsonView({ value }) {
 function StuffViewer({
   field,
   value,
+  name,
   defaultView = "rendered",
   downloadBaseName,
   hideDownload = false,
   className
 }) {
   const s = useFieldStrings();
+  const named = name ? { ...field, name } : field;
   const [view, setView] = useState(defaultView);
   const [saving, setSaving] = useState(false);
   const resolveUrl = useResolveUrl();
@@ -2536,20 +2555,20 @@ function StuffViewer({
       await downloadStuff({
         field,
         value,
-        baseName: downloadBaseName ?? field.name ?? "result",
+        baseName: downloadBaseName ?? named.name ?? "result",
         resolveUrl
       });
     } finally {
       setSaving(false);
     }
-  }, [field, value, downloadBaseName, resolveUrl]);
+  }, [field, named.name, value, downloadBaseName, resolveUrl]);
   const views = [
     { id: "rendered", label: s.viewRendered },
     { id: "json", label: s.viewJson }
   ];
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-x-4 gap-y-1", children: [
-      /* @__PURE__ */ jsx("div", { className: "min-w-0 space-y-1", children: /* @__PURE__ */ jsx(ResultHeader, { field }) }),
+      /* @__PURE__ */ jsx("div", { className: "min-w-0 space-y-1", children: /* @__PURE__ */ jsx(ResultHeader, { field: named }) }),
       /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
         !hideDownload && /* @__PURE__ */ jsxs(
           "button",