torch-glare 2.5.2 → 2.5.4

package/apps/lib/components/ActionButton.tsx

@@ -4,12 +4,24 @@ import { Button } from "./Button";
 import { cn } from "../utils/cn";
 import { ButtonVariant, Themes } from "../utils/types";
 
-const buttonVariants = cva("!rounded-[4px]", {
+/**
+ * The button that sits at the end of an input field — Figma `ActionButton` (Type=DropDown).
+ *
+ * Sizes are Figma's exactly: Xs 18, S 22, M 32, with `radius/sm` on the two small ones and
+ * `radius/lg` on M.
+ *
+ * The `!` on the radius is load-bearing. `twMerge` does not dedupe `rounded-radius-*` — they are
+ * custom scale keys, not values it recognises — so this radius and the one coming from `Button`'s
+ * own `size` variant both survive, and CSS source order picks the winner. Tailwind emits the scale
+ * in config order (sm before md before lg), so without `!` size S would render Button M's 6px
+ * instead of its own 4px.
+ */
+const buttonVariants = cva("", {
   variants: {
     size: {
-      XS: "h-[18px] w-[18px] text-[12px]",
-      S: "h-[22px] w-[22px] text-[12px]",
-      M: "h-[32px] w-[32px] text-[18px]",
+      XS: "h-[18px] w-[18px] text-[12px] !rounded-radius-sm",
+      S: "h-[22px] w-[22px] text-[12px] !rounded-radius-sm",
+      M: "h-[32px] w-[32px] text-[18px] !rounded-radius-lg",
     },
   },
   defaultVariants: {
@@ -17,6 +29,23 @@ const buttonVariants = cva("!rounded-[4px]", {
   },
 });
 
+/**
+ * Default/hover/disabled colours as Figma binds them. Applied only when the caller passes no
+ * `variant`, so anything asking for a specific Button variant still gets it.
+ *
+ * `action-secondary` and `action-disabled` already match `Button`'s `PrimeStyle` equivalents; the
+ * real difference is hover, where `PrimeStyle` uses `button-hover` and the design uses
+ * `action-hover`.
+ */
+const actionTokens = [
+  "bg-background-presentation-action-secondary",
+  "text-content-presentation-action-light-primary",
+  "hover:bg-background-presentation-action-hover",
+  "hover:text-content-presentation-global-hover",
+  "disabled:bg-background-presentation-action-disabled",
+  "disabled:text-content-presentation-state-disabled",
+];
+
 interface Props
   extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
   is_loading?: boolean;
@@ -29,7 +58,6 @@ interface Props
 export const ActionButton = function ({
   size,
   asChild,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- excluded from {...props} spread
   as: Tag = "button",
   className,
   variant,
@@ -42,14 +70,19 @@ export const ActionButton = function ({
     <Button
       theme={theme}
       asChild={asChild}
+      // Forwarded, not swallowed: the chevron inside a field renders `as="span"` because it is
+      // nested in a clickable trigger, and a <button> cannot contain a <button>.
+      as={Tag}
       buttonType="icon"
-      type={type}
+      // `type` is only meaningful on a real button; on a span it would be an invalid attribute.
+      type={Tag === "button" ? type : undefined}
       size={size == "XS" ? "S" : size == "S" ? "M" : size == "M" ? "L" : "S"}
       variant={variant}
       className={cn(
         buttonVariants({
           size,
         }),
+        !variant && actionTokens,
         className,
       )}
       {...props}

package/apps/lib/components/Badge.tsx

@@ -118,7 +118,10 @@ const subtleCompoundVariants = [
 export const badgeStyles = cva(
   [
     "inline-flex items-center justify-center w-fit",
-    "rounded-[6px]",
+    // `radius/md` (6px), read off the Badge master component in Figma. Note the badge instances
+    // nested inside InnerLabelField render at `radius/lg` — that is an instance override, not the
+    // component's own value, and reading it as the spec is how this briefly shipped as 8px.
+    "rounded-radius-md",
     "transition-all duration-200 ease-in-out",
     "whitespace-nowrap",
     "[&_i]:!leading-none",
@@ -215,7 +218,7 @@ export const Badge: React.FC<BadgeProps> = ({
             }
           }}
           className={cn(
-            "rounded-[4px]",
+            "rounded-radius-sm",
             "flex items-center justify-center cursor-pointer",
             "hover:bg-background-presentation-action-secondary",
             "transition-colors duration-150",

package/apps/lib/components/BadgeField.tsx

@@ -222,7 +222,7 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
                           fill="black"
                         />
                       </svg>
-                      <p className="text-black-1000 text-right text-[12px] font-[510] leading-[148%]">
+                      <p className="text-black-1000 text-end text-[12px] font-[510] leading-[148%]">
                         {addLabel}
                       </p>
                     </div>

package/apps/lib/components/Button.tsx

@@ -248,10 +248,10 @@ export const buttonVariants = cva(
         ],
       },
       size: {
-        S: "h-[22px] py-[2px] px-[6px] typography-body-small-medium rounded-[4px] [&_i]:text-[12px]",
-        M: "h-[28px] py-[2px] px-[14px] typography-body-large-medium rounded-[6px] [&_i]:text-[18px]",
-        L: "h-[34px] py-[5px] px-[22px] typography-body-large-medium rounded-[8px] [&_i]:text-[20px]",
-        XL: "h-[40px] py-[8px] px-[30px] typography-headers-medium-medium rounded-[8px] [&_i]:text-[22px]",
+        S: "h-[22px] py-[2px] px-[6px] typography-body-small-medium rounded-radius-sm [&_i]:text-[12px]",
+        M: "h-[28px] py-[2px] px-[14px] typography-body-large-medium rounded-radius-md [&_i]:text-[18px]",
+        L: "h-[34px] py-[5px] px-[22px] typography-body-large-medium rounded-radius-lg [&_i]:text-[20px]",
+        XL: "h-[40px] py-[8px] px-[30px] typography-headers-medium-medium rounded-radius-lg [&_i]:text-[22px]",
       },
       is_loading: {
         true: "[&_i]:hidden",

package/apps/lib/components/Calendar.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { DayPicker } from "react-day-picker";
 import "react-day-picker/style.css";
 import { cn } from "../utils/cn";
-import { Button } from "./Button";
+import { ActionButton } from "./ActionButton";
 import { SimpleSelectValue, SimpleSelectItem } from "./SimpleSelect";
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
@@ -30,24 +30,14 @@ const Calendar = ({
         Nav: (e) => {
           return (
             <div className="w-full flex items-center justify-between absolute top-0 left-0 p-[6px]">
-              <Button
-                onClick={e.onPreviousClick}
-                buttonType="icon"
-                variant="PrimeStyle"
-                size="M"
-                className="w-[26px] h-[26px]"
-              >
+              {/* Popover navigation rather than an in-field button, so it keeps its own 26px box
+                  and only adopts the shared action colours and radius. */}
+              <ActionButton onClick={e.onPreviousClick} size="S" className="w-[26px] h-[26px]">
                 <i className="ri-arrow-left-s-line"></i>
-              </Button>
-              <Button
-                onClick={e.onNextClick}
-                buttonType="icon"
-                variant="PrimeStyle"
-                size="M"
-                className="w-[26px] h-[26px]"
-              >
+              </ActionButton>
+              <ActionButton onClick={e.onNextClick} size="S" className="w-[26px] h-[26px]">
                 <i className="ri-arrow-right-s-line"></i>
-              </Button>
+              </ActionButton>
             </div>
           );
         },

package/apps/lib/components/ColorPicker.tsx

@@ -404,7 +404,7 @@ export const ColorPicker = forwardRef<HTMLElement, ColorPickerProps>(
                       }}
                       className={NUM_INPUT_CLS}
                     />
-                    <span className="pr-1 typography-body-small-regular text-content-presentation-action-light-secondary">
+                    <span className="pe-1 typography-body-small-regular text-content-presentation-action-light-secondary">
                       %
                     </span>
                   </Group>

package/apps/lib/components/DataViews/data-views.tsx

@@ -311,7 +311,7 @@ function DataViewsRoot({
                       inherits it rather than landing on the black shell.
 
                       No border: Figma draws one, but every view already brings its own edge — the
-                      table its header rule, the split views their panel borders — so it only ever
+                      table and the split views each draw their own panel border — so it only ever
                       read as a second outline around the first. */}
                   <div className="bg-background-presentation-form-base flex flex-1 overflow-hidden rounded-[16px]">
                     {/* Clip the scrollable surface to the parent radius minus its 1px border

package/apps/lib/components/DataViews/filters/filters.tsx

@@ -95,7 +95,7 @@ function FiltersRoot({
               ) : (
                 // Reading the colour from a token rather than a `text-white` literal is what lets
                 // the same controls sit in the dark rail and in the light content area.
-                <h3 className="text-content-presentation-global-primary text-[18px] font-[510] leading-[1.32] tracking-[-0.01em]">
+                <h3 className="text-content-presentation-global-primary min-w-0 truncate text-[18px] font-[510] leading-[1.32] tracking-[-0.01em]">
                   {title}
                 </h3>
               ))}

package/apps/lib/components/DataViews/header.tsx

@@ -44,8 +44,11 @@ export function Header({ title, children, className }: HeaderProps) {
     >
       {title !== undefined && (
         <>
-          <div className="flex h-9 shrink-0 items-center gap-2 rounded-[12px] border border-[#434446] bg-[#252729] px-[10px]">
-            <span className="text-[28px] font-[510] uppercase leading-[1.19] text-white">
+          {/* `min-w-0`, not `shrink-0`: the pill has to be able to give up width, or a long title
+              pushes the view switch, actions and panel toggle off the end of the bar. It yields
+              first and the title ellipsises instead. */}
+          <div className="flex h-9 min-w-0 items-center gap-2 rounded-[12px] border border-[#434446] bg-[#252729] px-[10px]">
+            <span className="truncate text-[28px] font-[510] uppercase leading-[1.19] text-white">
               {title}
             </span>
           </div>

package/apps/lib/components/DataViews/panel/section.tsx

@@ -40,7 +40,9 @@ export function Section({
             aria-controls={bodyId}
           />
         ) : (
-          <h3 className="text-content-presentation-global-primary text-[18px] font-[510] leading-[1.32] tracking-[-0.01em]">
+          // No `min-w-0` needed here, unlike the other headings: the parent is `flex flex-col`,
+          // so this already stretches to the column's width rather than sizing to its text.
+          <h3 className="text-content-presentation-global-primary truncate text-[18px] font-[510] leading-[1.32] tracking-[-0.01em]">
             {title}
           </h3>
         ))}

package/apps/lib/components/DataViews/views/board-view.tsx

@@ -356,7 +356,9 @@ function ColumnHeader({
         COLUMN_BG[group.color ?? "gray"],
       )}
     >
-      <h3 className="typography-headers-small-medium text-content-presentation-global-primary-light">
+      {/* `min-w-0` because this is a flex item: without it the heading refuses to shrink below its
+          text and a long group name pushes the action button out of the column. */}
+      <h3 className="typography-headers-small-medium text-content-presentation-global-primary-light min-w-0 truncate">
         {group.label}
       </h3>
       {onAction && (

package/apps/lib/components/DataViews/views/inbox-view.tsx

@@ -67,9 +67,12 @@ function InboxViewImpl({
         )}
       >
         <li className="border-border-presentation-global-primary border-b px-3 py-2">
+          {/* `block` before `truncate`: the parent is a plain `<li>`, so this span would otherwise
+              be inline — and `overflow` has no effect on an inline box, which would leave the
+              ellipsis silently doing nothing. */}
           <span
             style={{ fontFeatureSettings: "'cv05' on" }}
-            className="typography-display-medium-medium text-content-presentation-global-primary uppercase"
+            className="typography-display-medium-medium text-content-presentation-global-primary block truncate uppercase"
           >
             {titleField?.label ?? "inbox"}
           </span>

package/apps/lib/components/DataViews/views/pane-views.tsx

@@ -134,7 +134,11 @@ function useIsActive(element: { value?: string }, defaultValue: string) {
 export const PaneTable = markPaneView(function PaneTable(props: TreePaneTableProps) {
   const active = useIsActive({ value: props.value }, "table");
   if (!active) return null;
-  return <TableView {...withoutTabProps(props)} />;
+  // Standalone, `TableView` draws its own border and radius so it reads as a separated surface.
+  // In here it is not standalone: the pane around it already draws exactly that border and radius
+  // (`tree-view.tsx`), so leaving the table's on nests one inside the other a pixel apart.
+  // `TreePaneTableProps` omits `className`, so there is no caller value to merge with.
+  return <TableView {...withoutTabProps(props)} className="rounded-none border-0" />;
 }, { defaultValue: "table", defaultLabel: "List", defaultIcon: <Table2 /> });
 
 /**

package/apps/lib/components/DataViews/views/table-view.tsx

@@ -115,7 +115,15 @@ function TableViewImpl({
 
   return (
     <DndContext {...contextProps}>
-      <div className={cn("bg-background-presentation-form-base flex h-full", className)}>
+      {/* Its own edge, matching the inbox and tree panels: this view is a surface on the shell,
+          not a fill of it. `overflow-hidden` keeps the rows clipped to the radius. */}
+      <div
+        className={cn(
+          "bg-background-presentation-form-base flex h-full overflow-hidden",
+          "border-border-presentation-global-primary rounded-[16px] border",
+          className,
+        )}
+      >
         <div className="flex flex-1 flex-col gap-4 overflow-hidden">
           <div
             ref={scrollRef}
@@ -124,13 +132,42 @@ function TableViewImpl({
             // pushes the whole component wide instead of scrolling within it.
             className="min-w-0 flex-1 overflow-auto rounded-lg"
           >
-            <Table ref={tableRef} className="w-full">
-              <TableHeader>
+            {/* One width for the table and the footer bar below it. Inside an `overflow-auto`
+                scroller a child's `w-full` resolves against the *visible* width, not the scrollable
+                width — so without this box the footer stopped at the fold whenever the columns
+                overflowed. `w-max` sizes to the table (the widest child); `min-w-full` keeps it
+                filling the scroller when the table is narrower. */}
+            <div className="w-max min-w-full">
+            {/* `overflow-visible` opts out of the primitive's `overflow-hidden` (tailwind-merge
+                lets ours win). It has to: a clipping table is its own scrollport, and the sticky
+                header would then resolve against a box that never scrolls. Safe here because the
+                scroller above is `min-w-0 overflow-auto`, so a wide table scrolls inside it rather
+                than pushing the layout. */}
+            <Table ref={tableRef} className="w-full overflow-visible">
+              {/* The header sticks to the scroller above by default — that lives on `TableHeader`
+                  in the primitive. Two things this view adds:
+
+                  Opacity. The primitive's header token is translucent, so scrolling rows read
+                  straight through it; the primitive can't fix that without naming a surface colour
+                  it doesn't know. Here the surface *is* known — the view root above sets
+                  `form-base` — so paint that as the background-color (tailwind-merge drops the
+                  primitive's translucent one, same `bg-color` group) and re-apply the tint as a
+                  background-image, which stacks above background-color. Composited that is the
+                  exact colour the header already had, just no longer see-through.
+
+                  And `shadow-none`, because the drop shadow reads as a seam now that the view
+                  carries its own border. */}
+              <TableHeader className="bg-background-presentation-form-base bg-[image:linear-gradient(var(--background-presentation-form-header),var(--background-presentation-form-header))] shadow-none">
                 <TableRow>
                   {onRowMove && <TableHead isDummy className="w-8" />}
                   {selectable && (
                     <TableHead isDummy className="w-12">
+                      {/* Size is stated on both this and the per-row checkbox rather than left to
+                          `Checkbox`'s default — they have to agree, and relying on the default on
+                          one side only is what previously made the select-all bigger than the
+                          column it heads. */}
                       <Checkbox
+                        size="M"
                         checked={allSelected ? true : someSelected ? "indeterminate" : false}
                         onCheckedChange={toggleAll}
                         aria-label="Select all rows"
@@ -149,7 +186,11 @@ function TableViewImpl({
                       // so a screen reader hears one identical button per column.
                       sortLabel={field.label ?? formatPathLabel(field.path)}
                     >
-                      {field.label ?? field.path}
+                      {/* Wrapped rather than handed to `Table` as bare text: `truncate` needs a box
+                          to clip, and the label's parent in the primitive is already `flex min-w-0`
+                          so this span shrinks and ellipsises instead of wrapping the header row
+                          onto a second line. */}
+                      <span className="truncate">{field.label ?? field.path}</span>
                     </TableHead>
                   ))}
                 </TableRow>
@@ -198,12 +239,12 @@ function TableViewImpl({
                       >
                         {onRowMove && <GripCell />}
                         {selectable && (
-                          <TableCell isDummy className="h-[40px] w-12" onClick={(e) => e.stopPropagation()}>
+                          <TableCell isDummy className="min-h-[40px] w-12" onClick={(e) => e.stopPropagation()}>
                             {/* What `TableCheckbox` renders, inlined: its props are typed as button
                             attributes, so it cannot express a controlled checkbox. */}
                             <div className="flex items-center justify-center">
                               <Checkbox
-                                size="S"
+                                size="M"
                                 checked={selected}
                                 onCheckedChange={() => toggleRow(id)}
                                 aria-label="Select row"
@@ -215,8 +256,20 @@ function TableViewImpl({
                           // `undefined` means "you paint it" — distinct from `null`, which is a
                           // deliberate blank.
                           const custom = renderCell?.({ field, row, id, index, fields: visibleFields });
+                          // `fade={false}` and clip instead. The fade is a `mask-image` on every
+                          // cell, close to free on its own but very expensive once a sticky header
+                          // repaints the region each scroll frame: measured on this page,
+                          // mask+sticky costs ~61ms/frame against ~29ms with the mask off and
+                          // ~17ms with neither. `overflow-hidden` is passed back because
+                          // `fade={false}` otherwise switches the cell to `overflow-visible`, and
+                          // the text would spill into the next column.
                           return (
-                            <TableCell key={`${field.path}-${i}`} className="h-[40px]">
+                            <TableCell
+                              key={`${field.path}-${i}`}
+                              className="min-h-[40px]"
+                              fade={false}
+                              childrenClassName="overflow-hidden"
+                            >
                               {/* `isolate` confines the Badge's mix-blend-luminosity to a local
                               stacking context and `transform-gpu` promotes it to its own layer, so
                               the table's post-mount column reflow repaints cleanly instead of
@@ -257,6 +310,7 @@ function TableViewImpl({
                 {addRowLabel}
               </TableEndAction>
             )}
+            </div>
           </div>
         </div>
       </div>
@@ -389,7 +443,12 @@ function SkeletonRows({
           {grip && <TableCell isDummy className="h-[40px] w-8" />}
           {selectable && <TableCell isDummy className="h-[40px] w-12" />}
           {fields.map((field, i) => (
-            <TableCell key={`${field.path}-${i}`} className="h-[40px]">
+            <TableCell
+              key={`${field.path}-${i}`}
+              className="min-h-[40px]"
+              fade={false}
+              childrenClassName="overflow-hidden"
+            >
               {/* Widths cycle rather than repeat, so a column of bars reads as text that has not
                   arrived instead of as a grid. */}
               <SkeletonBar className={["w-[70%]", "w-[45%]", "w-[85%]", "w-[60%]"][(row + i) % 4]} />

package/apps/lib/components/DataViews/views/tree-view.tsx

@@ -253,8 +253,8 @@ function TreeViewImpl({
 
   return (
     // A split view, so the gap between the rail and the pane is part of the design: it paints the
-    // shell's black over the Master Container's surface, and the two cards float on it. The table
-    // and board fill their container instead, which is why only these two do this.
+    // shell's black over the Master Container's surface, and the two cards float on it. The board
+    // fills its container instead — the table now carries its own border, like these panels.
     <div className={cn("flex h-full gap-2 bg-black", className)}>
       <div
         className={cn(
@@ -265,9 +265,11 @@ function TreeViewImpl({
         )}
       >
         <div className="border-border-presentation-global-primary border-b px-3 py-2">
+          {/* `block` before `truncate` — the parent is a plain div, so an inline span would clip
+              nothing. Same reason as the inbox's panel header. */}
           <span
             style={{ fontFeatureSettings: "'cv05' on" }}
-            className="typography-display-medium-medium text-content-presentation-global-primary uppercase"
+            className="typography-display-medium-medium text-content-presentation-global-primary block truncate uppercase"
           >
             {labelField?.label ?? "categories"}
           </span>

package/apps/lib/components/Drawer.tsx

@@ -37,6 +37,7 @@ DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
 interface DrawerContentProps extends React.ComponentPropsWithoutRef<
   typeof DrawerPrimitive.Content
 > {
+  /** @deprecated No effect here — the drag handle is `DrawerPanel`'s `showHandle`. */
   showHandle?: boolean;
   notch?: React.ReactNode;
   notchSide?: "left" | "right";
@@ -87,7 +88,17 @@ const DrawerPanel = React.forwardRef<HTMLDivElement, DrawerPanelProps>(
       // would render white-on-light = invisible).
       data-theme="light"
       className={cn(
-        "flex flex-1 gap-2 rounded-t-[16px] p-1 bg-[#F0F0F0] min-h-0",
+        // `flex-col` is load-bearing: this panel stacks header / body / footer, and its own
+        // `showHandle` centres the drag handle with `mx-auto`, which only centres in a column.
+        // It was dropped in 37fddd5 alongside the tray's — on the tray that was deliberate (FormDrawer
+        // puts the panel and its summary side by side), here it was not, and every consumer that puts
+        // a header/body/footer straight into a panel rendered them in a row.
+        //
+        // `min-w-0` for the same reason, one axis over: the tray is a row now, so width is its
+        // main axis, and a flex item's default `min-width: auto` pins it to its content — a wide
+        // form pushed the panel straight out past the tray. `min-h-0` alone covered the old
+        // column tray; the row needs both.
+        "flex flex-1 flex-col gap-2 rounded-t-[16px] p-1 bg-[#F0F0F0] min-h-0 min-w-0",
         framed && "border border-[#D4D4D4] shadow-[inset_0_-4px_16px_rgba(0,0,0,0.1)]",
         className,
       )}
@@ -113,6 +124,12 @@ const DrawerContent = React.forwardRef<
       framed: framedProp,
       wrapperClassName,
       trayClassName,
+      // Destructured only to keep it out of `...props`. The handle belongs to `DrawerPanel` now, so
+      // this does nothing here — but it was never pulled out either, so it was being spread onto the
+      // DOM node and React warned "does not recognize the `showHandle` prop on a DOM element" every
+      // time a drawer opened. Kept in the props type rather than removed: consumers still pass it.
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      showHandle,
       ...props
     },
     ref,

package/apps/lib/components/FormBuilder/context.ts

@@ -2,7 +2,15 @@
 
 import { createContext, useContext } from "react";
 
-export type FieldDirection = "horizontal" | "vertical";
+/**
+ * How a field row lays out its label against its control.
+ *
+ * `"flexible"` is the responsive one: stacked, then label-beside-control once the field row itself
+ * is past the container `md` breakpoint. It is what you get by leaving `fieldDirection` unset — and
+ * it is assignable so you can ask for it back where something else defaults you away from it, most
+ * notably a `FormRenderer` drawer, which pins `"vertical"`.
+ */
+export type FieldDirection = "horizontal" | "vertical" | "flexible";
 
 /** Loading flag — drives the Submit spinner and disables inputs. */
 export const LoadingContext = createContext<boolean>(false);

package/apps/lib/components/FormBuilder/submit.tsx

@@ -2,6 +2,7 @@
 
 import { ReactNode } from "react";
 
+import { cn } from "../../utils/cn";
 import { Button } from "../Button";
 import { useFormId, useLoading } from "./context";
 
@@ -28,9 +29,17 @@ export function SubmitButton({ children, className, loadingText, form }: SubmitB
       // Defaults to the enclosing form's id, so a Save in the header (outside the `<form>`)
       // still submits it via native form-association.
       form={form ?? ctxFormId}
-      variant="PrimeStyle"
+      // The blue fill, because Save is the form's primary action and a primary action is blue.
+      // Deliberately not a prop: a form has one primary action, and letting each caller pick a
+      // variant is how the rule stops being a rule.
+      variant="BluColStyle"
       is_loading={loading}
-      className={className}
+      // `w-fit` because the FormBuilder root is a flex COLUMN: a direct child with `width: auto`
+      // inherits `align-items: stretch` and spans the whole form. Sections want that (SectionBlock
+      // sets its own `w-full`); a Save button does not. `w-fit` rather than `self-start` so the
+      // header action bar — a row with `items-center` — is untouched at every button size.
+      // Merged through `cn` so a caller can still opt into `className="w-full"` in a narrow drawer.
+      className={cn("w-fit", className)}
     >
       {loading ? (loadingText ?? children ?? "Saving…") : (children ?? "Save")}
     </Button>

package/apps/lib/components/FormBuilder/types.ts

@@ -276,7 +276,11 @@ export interface FormBuilderRootProps<T extends FieldValues = FieldValues> {
   values?: T;
   /** Loading flag — Submit shows a spinner and inputs disable. */
   loading?: boolean;
-  /** Field row direction. Defaults to horizontal (vertical inside a drawer). */
+  /**
+   * Field row direction. Unset means `"flexible"` — stacked, then label-beside-control once the
+   * field row passes the container `md` breakpoint. `FormRenderer` pins `"vertical"` in a drawer;
+   * pass `"flexible"` there to get the responsive layout back.
+   */
   fieldDirection?: FieldDirection;
   /** Reset to defaults after a successful submit. */
   resetOnSuccess?: boolean;

package/apps/lib/components/FormRenderer/form-renderer.tsx

@@ -159,10 +159,22 @@ function FormRendererRoot<T extends FieldValues = FieldValues>({
   // inside it: a form embedded in a 260px rail has no room to give up 96px to gutters.
   const fieldsColumn = <div className="mx-auto w-full max-w-[1100px] px-[48px]">{formEl}</div>;
 
-  // Inside the form surface: the stepper rail beside the fields. Columns never wrap — the
-  // layout stays side-by-side at every screen size (the fields column shrinks instead).
+  // Inside the form surface: the stepper rail beside the fields. Columns never wrap — the layout
+  // stays side-by-side at every screen size; when space runs short the fields column shrinks and
+  // the rail's labels truncate.
+  //
+  // `minmax(180px,1fr)` and not a bare `1fr` on the side tracks. `1fr` means `minmax(auto,1fr)`,
+  // whose *auto* minimum stops a track shrinking below its content — so a long step label made the
+  // rail's track wider than the empty track opposite it, and the two side tracks being equal is the
+  // only thing centring the middle column. Hovering a step made it visibly worse: the label's
+  // padding grows 6px→9px on hover (FormStepper), so the centre jumped 3px every time.
+  //
+  // The minimum is a fixed 180px rather than `auto` precisely so it cannot depend on the labels:
+  // both side tracks size identically whatever the rail holds, so the middle column stays centred,
+  // and the rail still has room to be legible (a plain `minmax(0,…)` let it collapse to 0 in a
+  // narrow preview frame). Past that floor the labels truncate instead of pushing.
   const bodyInner = isStepper ? (
-    <div className="grid w-full grid-cols-[1fr_minmax(0,1100px)_1fr] gap-8">
+    <div className="grid w-full grid-cols-[minmax(180px,1fr)_minmax(0,1100px)_minmax(180px,1fr)] gap-8">
       <StepperNav control={formInstance.control as Control<FieldValues>} />
       {fieldsColumn}
       {/* Empty third column — balances the rail's gutter so the middle column is centred. */}

package/apps/lib/components/FormRenderer/stepper.tsx

@@ -10,7 +10,16 @@ import { Button } from "../Button";
 // stepper — the rail, the state, Back/Next — is chrome and lives here. The dependency only ever
 // points this way: FormRenderer → FormBuilder, never back.
 import { StepContext, type StepRegistry } from "../FormBuilder/context";
-import { FormStepper, FormStep, FormStepIndicator, FormStepLabel } from "../FormStepper";
+// Aliased: this module exports its own `Stepper` and `Step` (the wizard behaviour —
+// `FormRenderer.Stepper` / `.Step`), which would otherwise collide with the presentational
+// component of the same name.
+import {
+  Stepper as StepperRail,
+  Step as StepPill,
+  StepIndicator,
+  StepLabel,
+  StepConnector,
+} from "../Stepper";
 
 // ─── Stepper state context ───────────────────────────────────────────────────
 
@@ -113,7 +122,10 @@ function StepperNav({ control }: { control: Control<FieldValues> }) {
     [...(stepFields[index] ?? [])].some((name) => name in errors);
 
   return (
-    <FormStepper activeStep={currentStep} className="shrink-0 flex-col items-start gap-[4px]">
+    // `min-w-0` so the rail can be squeezed: its grid track no longer grows to fit a long label
+    // (see form-renderer.tsx), so the column has to be allowed to shrink and let the labels
+    // truncate instead of spilling over the fields column.
+    <StepperRail activeStep={currentStep} orientation="vertical" className="min-w-0 shrink-0">
       {titles.map((title, index) => {
         // The step buttons ARE the navigation: click to move. Backward is free;
         // clicking forward validates the steps in between (goToStep) and stops at
@@ -126,21 +138,30 @@ function StepperNav({ control }: { control: Control<FieldValues> }) {
             : "default";
         return (
           <React.Fragment key={title}>
-            <FormStep index={index} type={type} onClick={() => void goToStep(index)}>
-              <FormStepIndicator />
-              <FormStepLabel>{title}</FormStepLabel>
-            </FormStep>
-            {/* Connector between steps — a 3×16 rounded bar centred under the badge. */}
-            {index < titles.length - 1 && (
-              <div
-                aria-hidden
-                className="ms-[12.5px] mt-[2px] h-[16px] w-[3px] rounded-full bg-[#A0A0A0]"
-              />
-            )}
+            {/* The shrink/truncate pair is passed in rather than changed in `Stepper`, so its
+                other consumers keep sizing to their labels. `shrink` beats the pill's own
+                `shrink-0` and `truncate` beats the label's `whitespace-nowrap` — both via
+                tailwind-merge, which `Stepper` runs the caller's className through. */}
+            <StepPill
+              index={index}
+              type={type}
+              onClick={() => void goToStep(index)}
+              // `max-w-full` is what actually makes the label truncate: the rail is
+              // `items-start`, so without a cap the pill shrink-wraps its label and grows straight
+              // past the track instead of clipping inside it.
+              className="min-w-0 max-w-full shrink"
+            >
+              <StepIndicator />
+              {/* `max-w-none` opts out of the component's 106px cap: the rail sizes to its own
+                  grid track, so the label should truncate there rather than 106px early. */}
+              <StepLabel className="max-w-none truncate">{title}</StepLabel>
+            </StepPill>
+            {/* Connector between steps — the component centres it under the indicator per size. */}
+            {index < titles.length - 1 && <StepConnector />}
           </React.Fragment>
         );
       })}
-    </FormStepper>
+    </StepperRail>
   );
 }