torch-glare 2.5.1 → 2.5.3

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,12 +95,17 @@ 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>
               ))}
             {active && (
-              <Button size="S" variant="BorderStyle" className="ms-auto" onClick={() => setFilters({})}>
+              <Button
+                size="S"
+                variant="BorderStyle"
+                className="ms-auto"
+                onClick={() => setFilters({})}
+              >
                 {clearLabel}
               </Button>
             )}
@@ -117,15 +122,7 @@ function FiltersRoot({
 
         {/* `onSubmit` is required by FormBuilder but never reached — there is no submit button and
             no Enter target. Filters emit as you touch them. */}
-        {/* `layout="bare"` because this form is embedded, not a page: FormBuilder's default
-            centres the fields at 1100px behind 48px gutters, which in a 260px rail leaves the
-            controls less room than their own minimum width and overflows them. */}
-        <FormBuilder
-          onSubmit={() => {}}
-          values={values}
-          fieldDirection="vertical"
-          layout="bare"
-        >
+        <FormBuilder onSubmit={() => {}} values={values} fieldDirection="vertical">
           <Sync fields={fields} />
           <CellContext.Provider value="bare">
             {/* Same fold as `Panel.Section`: a 0fr→1fr grid row, and `inert` so a collapsed
@@ -151,7 +148,6 @@ function FiltersRoot({
   );
 }
 
-
 /**
  * The filter surface, assembled in one place. `Presets` and `Custom` are ours because FormBuilder
  * has no field for them; everything else you write is a FormBuilder field.

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}
@@ -125,12 +133,30 @@ function TableViewImpl({
             className="min-w-0 flex-1 overflow-auto rounded-lg"
           >
             <Table ref={tableRef} className="w-full">
-              <TableHeader>
+              {/* 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 +175,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>
@@ -203,7 +233,7 @@ function TableViewImpl({
                             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"

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/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);
@@ -48,9 +56,14 @@ export const useBare = () => useContext(CellContext) !== false;
 export const useOnTable = () => useContext(CellContext) === "table";
 
 /**
- * Step registry — a `FormBuilder.Step` provides this so the fields rendered
- * inside it can register their `name`. `FormBuilder.Next` then validates just
- * those names before advancing. `null` when not inside a stepper.
+ * Step registry — a `FormRenderer.Step` provides this so the fields rendered inside it can
+ * register their `name`, and the stepper validates just those names before advancing. `null`
+ * when not inside a stepper.
+ *
+ * The stepper itself lives in `FormRenderer` — it is chrome. This registry stays here because
+ * the *fields* are what register into it (see `fields/FieldShell.tsx`), and FormBuilder must
+ * stand alone without FormRenderer installed. FormRenderer's `StepSlot` imports it from here;
+ * the dependency never points the other way.
  */
 export interface StepRegistry {
   register: (name: string) => void;
@@ -58,25 +71,3 @@ export interface StepRegistry {
 }
 export const StepContext = createContext<StepRegistry | null>(null);
 export const useStepRegistry = () => useContext(StepContext);
-
-/** Stepper state shared by the nav + Back/Next/Submit buttons. */
-export interface StepperContextValue {
-  currentStep: number;
-  totalSteps: number;
-  titles: string[];
-  isFirstStep: boolean;
-  isLastStep: boolean;
-  goToNext: () => void | Promise<void>;
-  goToPrevious: () => void;
-  goToStep: (index: number) => void;
-  /** Field names registered per step, for per-step validation. */
-  stepFields: Record<number, Set<string>>;
-  /** Steps that have passed validation — stay checked even after navigating back. */
-  completedSteps: Set<number>;
-}
-export const StepperContext = createContext<StepperContextValue | null>(null);
-export const useStepper = () => {
-  const ctx = useContext(StepperContext);
-  if (!ctx) throw new Error("FormBuilder.Step/Back/Next must be used within FormBuilder.Stepper");
-  return ctx;
-};

package/apps/lib/components/FormBuilder/fields/FieldShell.tsx

@@ -36,7 +36,7 @@ export interface FieldShellProps {
 /**
  * Shared wrapper for every `FormBuilder.*` field: the FieldSection row + the RHF
  * `FormField`/`FormItem`/`FormControl`/`FormMessage` scaffolding. Also registers the
- * field name into the enclosing `FormBuilder.Step` (if any) so the stepper can
+ * field name into the enclosing `FormRenderer.Step` (if any) so the stepper can
  * validate per step.
  */
 export function FieldShell({

package/apps/lib/components/FormBuilder/form-builder.tsx

@@ -1,15 +1,11 @@
 "use client";
 
-import * as React from "react";
-import { ReactNode } from "react";
 import { useForm, type FieldValues } from "react-hook-form";
 
 import { cn } from "../../utils/cn";
 import { Form } from "../Form";
-import { SectionBlock, type SectionColor, type SectionVariant } from "../SectionBlock";
-import { LoadingContext, DirectionContext, StepperContext, FormIdContext } from "./context";
+import { LoadingContext, DirectionContext, FormIdContext } from "./context";
 import { markFieldKind } from "./field-kind";
-import { Header } from "./header";
 import type { FormBuilderRootProps } from "./types";
 import {
   TextField,
@@ -39,52 +35,8 @@ import {
   RichTextField,
   CustomField,
 } from "./fields";
-import {
-  Stepper,
-  Step,
-  Back,
-  Next,
-  StepperNav,
-  StepSlot,
-  useStepperState,
-  isStepElement,
-  isStepperElement,
-} from "./stepper";
 import { SubmitButton } from "./submit";
 
-// ─── Section ─────────────────────────────────────────────────────────────────
-
-export interface SectionProps {
-  title?: ReactNode;
-  color?: SectionColor;
-  icon?: ReactNode;
-  /**
-   * `"Table"` switches to the full-bleed table shell — no body padding, a rule under
-   * the header, and the card clipped to its radius. `FormBuilder.Table` uses it; pass
-   * it here only when hand-composing a table inside a section.
-   */
-  variant?: SectionVariant;
-  /** Right-aligned content on the title row — e.g. action buttons. */
-  action?: ReactNode;
-  children: ReactNode;
-}
-
-/** `FormBuilder.Section` — a titled Glare SectionBlock grouping fields. */
-function Section({ title, color, icon, variant, action, children }: SectionProps) {
-  return (
-    <SectionBlock title={title} color={color} icon={icon} variant={variant} action={action}>
-      {children}
-    </SectionBlock>
-  );
-}
-
-function isHeaderElement(node: React.ReactNode): node is React.ReactElement {
-  return (
-    React.isValidElement(node) &&
-    (node.type as { __isFormHeader?: boolean })?.__isFormHeader === true
-  );
-}
-
 // ─── Root ────────────────────────────────────────────────────────────────────
 
 function FormBuilderRoot<T extends FieldValues = FieldValues>({
@@ -98,9 +50,7 @@ function FormBuilderRoot<T extends FieldValues = FieldValues>({
   values,
   loading = false,
   fieldDirection,
-  layout = "page",
   resetOnSuccess,
-  conclusion,
   className,
 }: FormBuilderRootProps<T>) {
   // Hooks can't be conditional, so always create one; `formProp` wins when given
@@ -117,116 +67,25 @@ function FormBuilderRoot<T extends FieldValues = FieldValues>({
     if (resetOnSuccess) form.reset();
   };
 
-  // Split out a FormBuilder.Header (renders absolutely) and detect a Stepper child.
-  const childArray = React.Children.toArray(children);
-  const header = childArray.find(isHeaderElement);
-  const rest = childArray.filter((n) => !isHeaderElement(n));
-
-  const stepperEl = rest.find(isStepperElement);
-  const stepChildren = stepperEl ? React.Children.toArray(stepperEl.props.children) : [];
-  const steps = stepChildren.filter(isStepElement);
-  const stepExtras = stepChildren.filter((n) => !isStepElement(n));
-  const isStepper = !!stepperEl;
-
-  // Stepper state is lifted HERE so the nav can live in its own grid column, outside the
-  // `<form>`. Called unconditionally (inert when there are no steps) to keep hooks order stable.
-  const stepper = useStepperState(steps, form.trigger as Parameters<typeof useStepperState>[1]);
-
-  // The stepper nav is its own grid column beside the fields, inside the scrolling body.
-  const nav = isStepper ? <StepperNav /> : null;
-
-  // The fields the `<form>` wraps: the stepper's steps (+ any custom footer extras like Back/Next),
-  // or the plain children. The Submit itself lives outside the form (see FormRenderer).
-  const fields = isStepper ? (
-    <>
-      {steps.map((step, i) => (
-        <StepSlot key={i} index={i} active={i === stepper.currentStep}>
-          {step.props.children}
-        </StepSlot>
-      ))}
-      {stepExtras}
-    </>
-  ) : (
-    rest
-  );
-
-  // The fields column caps at 1100px and centers — as the middle column of the grid, and
-  // standalone. `layout="bare"` drops the cap and the gutters so an embedded form fills its
-  // container instead: 48px of padding a side is most of a settings rail.
-  const fieldsInner = (
-    <div
-      className={cn(
-        "flex w-full flex-col gap-4",
-        layout === "page" && "mx-auto max-w-[1100px] px-[48px]",
-      )}
-    >
-      {fields}
-    </div>
-  );
-
-  const formEl = (
-    <form id={id} className="w-full min-w-0" onSubmit={form.handleSubmit(handleValid, onInvalid)}>
-      {fieldsInner}
-    </form>
-  );
-
-  // 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).
-  const bodyInner = nav ? (
-    <div className="grid w-full grid-cols-[1fr_minmax(0,1100px)_1fr] gap-8">
-      {nav}
-      {formEl}
-      {/* Empty third column — balances the rail's gutter so the middle column is centred. */}
-      <div />
-    </div>
-  ) : (
-    formEl
-  );
-
-  const surface = header ? (
-    // Scroll shell: the absolute header floats over the scrollable body. No fixed height — it
-    // fills whatever the parent gives it (like the drawer's panel fills its tray) and the body
-    // scrolls internally.
-    <div className="relative isolate flex h-full w-full flex-col overflow-hidden rounded-2xl bg-background-presentation-body-primary">
-      {header}
-      <div className="relative z-[1] flex min-h-0 w-full flex-1 flex-col overflow-y-auto px-6 py-6 pt-[72px] scrollbar-hide">
-        {bodyInner}
-      </div>
-    </div>
-  ) : (
-    bodyInner
-  );
-
-  // The conclusion (right) lives OUTSIDE the scroll surface — its own panel beside it (mirroring the
-  // drawer's tray, a 6px gutter). Only the surface's body scrolls; the conclusion stays put.
-  const body = conclusion ? (
-    <div className="flex h-full flex-row items-stretch">
-      <div className="min-h-0 min-w-0 flex-1">{surface}</div>
-      <div className="ml-[6px] flex min-h-0">{conclusion}</div>
-    </div>
-  ) : (
-    surface
-  );
-
-  // `className` lands on the OUTERMOST element — the one a parent lays out (e.g. `flex-1 min-h-0`
-  // to fill a flex column). `h-full` fills a parent that has a definite height.
-  const outerClassName = cn("h-full w-full @container", className);
-
-  const tree = (
-    <Form {...form}>
-      <div className={outerClassName}>{body}</div>
-    </Form>
-  );
-
+  // The `<form>` IS the outermost element — FormBuilder draws no frame of its own. `gap-4` is the
+  // spacing between sections, which is field structure; `@container` scopes any container query a
+  // field wants to the form's own width. Everything that used to wrap this — the page gutters, the
+  // scroll shell, the header, the stepper rail, the summary column — belongs to `FormRenderer`.
+  //
+  // `className` lands here, so a parent still lays the form out (e.g. `flex-1 min-h-0`).
   return (
     <FormIdContext.Provider value={id}>
       <LoadingContext.Provider value={loading}>
         <DirectionContext.Provider value={direction}>
-          {isStepper ? (
-            <StepperContext.Provider value={stepper}>{tree}</StepperContext.Provider>
-          ) : (
-            tree
-          )}
+          <Form {...form}>
+            <form
+              id={id}
+              className={cn("flex w-full min-w-0 flex-col gap-4 @container", className)}
+              onSubmit={form.handleSubmit(handleValid, onInvalid)}
+            >
+              {children}
+            </form>
+          </Form>
         </DirectionContext.Provider>
       </LoadingContext.Provider>
     </FormIdContext.Provider>
@@ -238,16 +97,24 @@ function FormBuilderRoot<T extends FieldValues = FieldValues>({
  *
  * ```tsx
  * <FormBuilder onSubmit={fn} resolver={r} defaultValues={d}>
- *   <FormBuilder.Section title="Identity" color="Blue">
- *     <FormBuilder.Text name="name" label="Name" required />
- *   </FormBuilder.Section>
- *   <FormBuilder.Submit>Save</FormBuilder.Submit>
+ *   <FormBuilder.Text name="name" label="Name" required />
+ *   <FormBuilder.Select name="category" label="Category" options={CATEGORY} />
  * </FormBuilder>
  * ```
  *
- * Steps are components (`FormBuilder.Stepper` + `FormBuilder.Step`). FormBuilder is
- * drawer-unaware — to show a form in a drawer, wrap it in `FormRenderer`'s `FormDrawer`
- * (or use `FormRenderer` with `display: "drawer"`).
+ * **FormBuilder is the fields and nothing else** — the `<form>`, its react-hook-form context and
+ * the field components. Each field draws its own `FieldSection` row (label, required marker,
+ * hint); beyond that FormBuilder draws no frame at all: no titled section cards, no page gutters,
+ * no scroll shell, no title header, no stepper rail, no summary column. Rendered bare it fills
+ * whatever you put it in, which is what an embedded form — a settings rail, a `DataViews` filter
+ * panel — wants.
+ *
+ * For a real page or drawer form, wrap it in `FormRenderer`, which owns all of that chrome:
+ * `display` (page vs drawer), `header`, `actions`, `summary`, `FormRenderer.Section` and the
+ * wizard (`FormRenderer.Stepper` + `FormRenderer.Step`).
+ *
+ * `FormBuilder.Submit` stays here — it is the form's own submit button, wired to the `<form>` by
+ * id so it works even when the chrome renders it outside the element.
  */
 export const FormBuilder = Object.assign(FormBuilderRoot, {
   // fields
@@ -284,15 +151,8 @@ export const FormBuilder = Object.assign(FormBuilderRoot, {
   Image: (props: Parameters<typeof FileField>[0]) => <FileField {...props} image />,
   RichText: RichTextField,
   Custom: CustomField,
-  // layout
-  Section,
-  Header,
+  // the form's own submit button
   Submit: SubmitButton,
-  // stepper
-  Stepper,
-  Step,
-  Back,
-  Next,
 });
 
 /**

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

@@ -1,10 +1,6 @@
 export { FormBuilder } from "./form-builder";
-export type { SectionProps } from "./form-builder";
 export { fieldKindOf, markFieldKind } from "./field-kind";
-export { FormHeaderBar } from "./header";
-export type { HeaderProps, HeaderVariant, FormHeaderBarProps } from "./header";
 export { RichTextField } from "../TextEditor/RichTextField";
-export type { StepProps } from "./stepper";
 export type { FieldDirection, CellMode } from "./context";
 export type {
   BaseFieldProps,

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

@@ -228,7 +228,7 @@ export interface TableColumn {
  * `FormBuilder.Table` — an editable table field (built on RHF `useFieldArray`). Each row is a
  * record; each column cell is any `FormBuilder.*` field. Supports per-row checkbox selection
  * (+ select-all + bulk delete), drag-drop reordering, and add/remove rows. Renders inside a
- * `SectionBlock`, so place it as a top-level child (not inside a `FormBuilder.Section`).
+ * `SectionBlock`, so place it as a top-level child (not inside a `FormRenderer.Section`).
  */
 export interface TableFieldProps {
   name: string;
@@ -276,26 +276,20 @@ 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). */
-  fieldDirection?: FieldDirection;
   /**
-   * How the fields column is framed.
-   *
-   * `"page"` (the default) is the full-page form: centred, capped at 1100px, and held off the
-   * edges by 48px gutters.
-   *
-   * `"bare"` drops all three so the fields fill whatever they are placed inside. Use it when the
-   * form is embedded in something narrow — a 260px settings rail has no room to give up 96px to
-   * gutters, and its controls would overflow the panel rather than fill it.
+   * 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.
    */
-  layout?: "page" | "bare";
+  fieldDirection?: FieldDirection;
   /** Reset to defaults after a successful submit. */
   resetOnSuccess?: boolean;
   /**
-   * A live panel (e.g. `FormSummary`) rendered **outside** the `<form>`, as the right column of the
-   * adaptive grid — with a stepper it makes a 3-column layout (nav · fields · conclusion), otherwise
-   * 2 columns (fields · conclusion). It reads the shared values via its own `form` prop.
+   * Lands on the `<form>` element itself — FormBuilder renders nothing around it. Use it to let
+   * the form fill its parent (e.g. `"flex-1 min-h-0"` inside a flex column that has a height).
+   *
+   * There is no `layout` prop: the fields always fill their container. The page framing that
+   * used to live here — the 1100px cap and 48px gutters — belongs to `FormRenderer`.
    */
-  conclusion?: ReactNode;
   className?: string;
 }