@pipelex/mthds-form 0.6.0 → 0.8.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

@@ -75,7 +75,7 @@ var Switch = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   SwitchPrimitives.Root,
   {
     className: cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
       className
     ),
     ...props,
@@ -247,9 +247,9 @@ function FieldShell({
 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-none focus-visible:border-primary focus-visible:ring-1 focus-visible:ring-primary/40",
+  "focus-visible:outline-hidden focus-visible:border-primary focus-visible:ring-1 focus-visible:ring-primary/40",
   "disabled:cursor-not-allowed disabled:opacity-50",
-  "aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/30"
+  "aria-invalid:border-destructive aria-invalid:ring-destructive/30"
 );
 function DateField({ field, value, onChange, id, error, disabled }) {
   const domId = useFieldDomId(id);
@@ -478,7 +478,7 @@ function FileField({
             type: "button",
             disabled: busy,
             onClick: () => setShowUrl(true),
-            className: "inline-flex items-center gap-1 font-mono text-[11px] text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50",
+            className: "flex w-fit items-center gap-1 font-mono text-[11px] text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50",
             children: [
               /* @__PURE__ */ jsx(Link2, { className: "h-3 w-3" }),
               s.pasteUrlInstead
@@ -588,7 +588,7 @@ var SelectTrigger = React2.forwardRef(({ className, children, ...props }, ref) =
       // Adapted from the registry to DESIGN.md ("Inputs"): the `--input` surface,
       // a hairline `--border`, and a border-color focus signal instead of the
       // upstream 2px focus ring ("No focus glow by default").
-      "flex h-10 w-full items-center justify-between rounded-md border border-border bg-input px-3 py-2 text-sm transition-colors data-[placeholder]:text-muted-foreground focus:border-ring focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-destructive [&>span]:line-clamp-1",
+      "flex h-10 w-full items-center justify-between rounded-md border border-border bg-input px-3 py-2 text-sm transition-colors data-placeholder:text-muted-foreground focus:border-ring focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive [&>span]:line-clamp-1",
       className
     ),
     ...props,
@@ -624,7 +624,7 @@ var SelectContent = React2.forwardRef(({ className, children, position = "popper
   {
     ref,
     className: cn(
-      "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+      "relative z-50 max-h-(--radix-select-content-available-height) min-w-32 overflow-y-auto overflow-x-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-select-content-transform-origin)",
       position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
       className
     ),
@@ -637,7 +637,7 @@ var SelectContent = React2.forwardRef(({ className, children, position = "popper
         {
           className: cn(
             "p-1",
-            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            position === "popper" && "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
           ),
           children
         }
@@ -661,7 +661,7 @@ var SelectItem = React2.forwardRef(({ className, children, ...props }, ref) => /
   {
     ref,
     className: cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       className
     ),
     ...props,
@@ -682,7 +682,7 @@ var SelectSeparator = React2.forwardRef(({ className, ...props }, ref) => /* @__
 ));
 SelectSeparator.displayName = SelectPrimitive.Separator.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-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-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 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]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
   {
     variants: {
       variant: {
@@ -932,7 +932,7 @@ function ProseField({ field, value, onChange, id, error, disabled }) {
           onChange: (e) => onChange(e.target.value === "" ? void 0 : e.target.value),
           className: cn(
             fieldControlClass,
-            "min-h-[88px] resize-y px-3 py-2.5 leading-relaxed [field-sizing:content]"
+            "min-h-[88px] resize-y px-3 py-2.5 leading-relaxed field-sizing-content"
           )
         }
       )
@@ -946,7 +946,7 @@ function OptionalToggle({ count, expanded, onToggle, noun = "field" }) {
     {
       type: "button",
       onClick: onToggle,
-      className: "inline-flex items-center gap-1.5 text-[11px] text-muted-foreground transition-colors hover:text-foreground",
+      className: "flex w-fit items-center gap-1.5 text-[11px] text-muted-foreground transition-colors hover:text-foreground",
       children: [
         expanded ? /* @__PURE__ */ jsx(Minus, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Plus, { className: "h-3 w-3" }),
         expanded ? noun === "field" ? s.hideOptionalFields : s.hideOptionalInputs : noun === "field" ? s.optionalFieldsCount(count) : s.optionalInputsCount(count)
@@ -1533,7 +1533,7 @@ function Block({ token }) {
         // for no gain — the lines are prose, and prose wraps. Real code loses
         // its column alignment and keeps every character, which is the better
         // half of that trade at this width.
-        /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap break-words rounded-md border border-border bg-card/40 p-2.5 text-[12px]", children: /* @__PURE__ */ jsx("code", { children: code.text }) })
+        /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap wrap-break-word rounded-md border border-border bg-card/40 p-2.5 text-[12px]", children: /* @__PURE__ */ jsx("code", { children: code.text }) })
       );
     }
     case "blockquote":
@@ -1659,7 +1659,7 @@ function Described({ description, children }) {
       "span",
       {
         tabIndex: 0,
-        className: "-mx-1 cursor-help rounded px-1 outline-none transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring",
+        className: "-mx-1 cursor-help rounded px-1 outline-hidden transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring",
         children
       }
     ) }),
@@ -1713,7 +1713,7 @@ function stringifyValue(value) {
 function RawValue({ value, compact }) {
   const text = stringifyValue(value);
   if (text === void 0) return /* @__PURE__ */ jsx(Absent, {});
-  return compact ? /* @__PURE__ */ jsx("span", { title: text, className: "truncate font-mono text-[12px] text-foreground", children: text }) : /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto whitespace-pre-wrap break-words rounded-md border border-border bg-card/40 px-2.5 py-1.5 font-mono text-[12px] leading-relaxed text-foreground", children: text });
+  return compact ? /* @__PURE__ */ jsx("span", { title: text, className: "truncate font-mono text-[12px] text-foreground", children: text }) : /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto whitespace-pre-wrap wrap-break-word rounded-md border border-border bg-card/40 px-2.5 py-1.5 font-mono text-[12px] leading-relaxed text-foreground", children: text });
 }
 function Scalar({ value, compact = false }) {
   if (value === null || value === void 0 || value === "") return /* @__PURE__ */ jsx(Absent, {});
@@ -1780,7 +1780,7 @@ function CopyButton({
       },
       ...title ? { title } : {},
       "aria-label": label,
-      className: "shrink-0 rounded p-0.5 text-muted-foreground hover:bg-card hover:text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1",
+      className: "shrink-0 rounded p-0.5 text-muted-foreground hover:bg-card hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1",
       children: copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "size-3.5" }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": true, className: "size-3.5" })
     }
   );
@@ -1854,7 +1854,7 @@ function DocumentPreview({ url, name }) {
       title: name,
       loading: "lazy",
       referrerPolicy: "no-referrer",
-      className: "h-[28rem] w-full rounded-lg border border-border bg-card/40"
+      className: "h-112 w-full rounded-lg border border-border bg-card/40"
     }
   );
 }
@@ -1888,7 +1888,7 @@ function DocumentValue({ value }) {
           type: "button",
           onClick: () => setOpen((current) => !current),
           "aria-expanded": open,
-          className: "flex shrink-0 items-center gap-1.5 rounded-md border border-border px-2 py-1 text-[12px] text-muted-foreground hover:bg-card hover:text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1",
+          className: "flex shrink-0 items-center gap-1.5 rounded-md border border-border px-2 py-1 text-[12px] text-muted-foreground hover:bg-card hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1",
           children: [
             open ? /* @__PURE__ */ jsx(EyeOff, { "aria-hidden": true, className: "size-3.5" }) : /* @__PURE__ */ jsx(Eye, { "aria-hidden": true, className: "size-3.5" }),
             s.preview
@@ -1941,7 +1941,7 @@ function ImageValue({
                 // times that tall — a generated report image is the RESULT here,
                 // not a decoration beside one, and it was unreadable at that size.
                 // `object-contain` keeps the aspect ratio when the cap bites.
-                !inGallery && !compact && "max-h-[44rem] w-full rounded-lg border border-border object-contain"
+                !inGallery && !compact && "max-h-176 w-full rounded-lg border border-border object-contain"
               )
             }
           )
@@ -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",
               {
@@ -2167,14 +2176,14 @@ function ObjectTable({
           /* @__PURE__ */ jsx("tbody", { children: items.map((item, index) => {
             const isOpen = expanded.has(index);
             return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("tr", { className: "border-b border-border/60 last:border-b-0", children: [
-              canExpand && /* @__PURE__ */ jsx("td", { className: "px-1 align-top", children: /* @__PURE__ */ jsx(
+              canExpand && /* @__PURE__ */ jsx("td", { className: "px-1 pt-px align-top", children: /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
                   onClick: () => toggle(index),
                   "aria-expanded": isOpen,
                   "aria-label": s.toggleRowDetails(index + 1),
-                  className: "mt-0.5 flex size-6 items-center justify-center rounded text-muted-foreground hover:bg-card hover:text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1",
+                  className: "mt-0.5 flex size-6 items-center justify-center rounded text-muted-foreground hover:bg-card hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1",
                   children: isOpen ? /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": true, className: "size-3.5" }) : /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true, className: "size-3.5" })
                 }
               ) }),
@@ -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)
               )
             )
@@ -2511,7 +2528,7 @@ function JsonView({ value }) {
           });
         },
         "aria-label": s.copyJson,
-        className: "absolute right-2 top-2 rounded border border-border bg-card p-1 text-muted-foreground hover:text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1",
+        className: "absolute right-2 top-2 rounded border border-border bg-card p-1 text-muted-foreground hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1",
         children: copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "size-3.5" }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": true, className: "size-3.5" })
       }
     ),
@@ -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",
@@ -2558,7 +2577,7 @@ function StuffViewer({
             onClick: () => void handleDownload(),
             disabled: saving,
             "aria-label": s.download,
-            className: "inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-[12px] text-muted-foreground hover:text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 disabled:opacity-60",
+            className: "inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-[12px] text-muted-foreground hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1 disabled:opacity-60",
             children: [
               saving ? /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsx(Download, { className: "h-3.5 w-3.5" }),
               saving ? s.downloading : s.download
@@ -2578,7 +2597,7 @@ function StuffViewer({
                 onClick: () => setView(id),
                 "aria-pressed": view === id,
                 className: cn(
-                  "rounded px-2 py-0.5 text-[12px] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1",
+                  "rounded px-2 py-0.5 text-[12px] focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1",
                   view === id ? "bg-card font-medium text-foreground" : "text-muted-foreground hover:text-foreground"
                 ),
                 children: label