torch-glare 2.4.2 → 2.4.4

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

@@ -7,7 +7,6 @@ import { InputField } from "../../InputField";
 import { Textarea } from "../../Textarea";
 import { PasswordLevel } from "../../PasswordLevel";
 import { useLoading, useCell } from "../context";
-import { formatFieldView } from "../viewFormat";
 import { formatNumber } from "../numberFormat";
 import type { BaseFieldProps, CurrencyFieldProps, PasswordFieldProps } from "../types";
 import { FieldShell } from "./FieldShell";
@@ -110,7 +109,7 @@ function TextLike({ props, type }: { props: BaseFieldProps; type: "text" | "emai
   const loading = useLoading();
   const cell = useCell();
   return (
-    <FieldShell {...props} view={(v) => formatFieldView({ kind: "text", value: v })}>
+    <FieldShell {...props}>
       {(field) => (
         <InputField
           {...field}
@@ -136,10 +135,7 @@ export function PasswordField(props: PasswordFieldProps) {
   const loading = useLoading();
   const cell = useCell();
   return (
-    <FieldShell
-      {...props}
-      view={(v) => formatFieldView({ kind: "text", value: v ? "••••••••" : "" })}
-    >
+    <FieldShell {...props}>
       {(field) => (
         <div className="flex w-full flex-col gap-2">
           <InputField
@@ -162,7 +158,7 @@ export function NumberField(props: BaseFieldProps) {
   const loading = useLoading();
   const cell = useCell();
   return (
-    <FieldShell {...props} view={(v) => formatFieldView({ kind: "number", value: v })}>
+    <FieldShell {...props}>
       {(field) => (
         <NumberInput
           field={field}
@@ -179,12 +175,7 @@ export function CurrencyField(props: CurrencyFieldProps) {
   const loading = useLoading();
   const cell = useCell();
   return (
-    <FieldShell
-      {...props}
-      view={(v) =>
-        formatFieldView({ kind: "currency", value: v, currencySymbol: props.currencySymbol })
-      }
-    >
+    <FieldShell {...props}>
       {(field) => (
         <NumberInput
           field={field}
@@ -205,7 +196,7 @@ export function CurrencyField(props: CurrencyFieldProps) {
 export function TextareaField(props: BaseFieldProps & { rows?: number }) {
   const loading = useLoading();
   return (
-    <FieldShell {...props} view={(v) => formatFieldView({ kind: "text", value: v })}>
+    <FieldShell {...props}>
       {(field, fieldState) => (
         <Textarea
           {...field}

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

@@ -25,13 +25,7 @@ export function TreeSelectField<T>(props: TreeSelectFieldProps<T>) {
   };
 
   return (
-    <FieldShell
-      {...props}
-      view={(v) => {
-        const node = findById(v);
-        return { value: node ? String(props.getNodeLabel(node)) : "" };
-      }}
-    >
+    <FieldShell {...props}>
       {(field) => (
         <SearchableTree
           nodes={props.nodes}

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

@@ -7,13 +7,7 @@ import { useForm, type FieldValues } from "react-hook-form";
 import { cn } from "../../utils/cn";
 import { Form } from "../Form";
 import { SectionBlock, type SectionColor } from "../SectionBlock";
-import {
-  LoadingContext,
-  ModeContext,
-  DirectionContext,
-  StepperContext,
-  FormIdContext,
-} from "./context";
+import { LoadingContext, DirectionContext, StepperContext, FormIdContext } from "./context";
 import { Header } from "./header";
 import type { FormBuilderRootProps } from "./types";
 import {
@@ -94,7 +88,6 @@ function FormBuilderRoot<T extends FieldValues = FieldValues>({
   defaultValues,
   values,
   loading = false,
-  mode = "edit",
   fieldDirection,
   resetOnSuccess,
   conclusion,
@@ -119,22 +112,21 @@ function FormBuilderRoot<T extends FieldValues = FieldValues>({
   const header = childArray.find(isHeaderElement);
   const rest = childArray.filter((n) => !isHeaderElement(n));
 
-  const isView = mode === "view";
   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 && !isView;
+  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 column beside the fields, inside the form surface.
+  // 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).
+  // 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) => (
@@ -151,12 +143,10 @@ function FormBuilderRoot<T extends FieldValues = FieldValues>({
   // The fields column caps at 1200px and centers — as the middle column of the grid, and
   // standalone.
   const fieldsInner = (
-    <div className="mx-auto flex w-full max-w-[1100px] flex-col gap-4">{fields}</div>
+    <div className="mx-auto flex w-full max-w-[1100px] flex-col gap-4 px-[48px]">{fields}</div>
   );
 
-  const formEl = isView ? (
-    <div className="w-full min-w-0">{fieldsInner}</div>
-  ) : (
+  const formEl = (
     <form id={id} className="w-full min-w-0" onSubmit={form.handleSubmit(handleValid, onInvalid)}>
       {fieldsInner}
     </form>
@@ -189,13 +179,12 @@ function FormBuilderRoot<T extends FieldValues = FieldValues>({
     bodyInner
   );
 
-  // The conclusion lives OUTSIDE the form surface — its own panel beside it, exactly like the
-  // drawer's tray (`FormDrawer` puts the conclusion next to the form panel with a 6px gutter).
-  // It never wraps below the form: the two stay side-by-side at every screen size.
+  // 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 gap-[6px]">
+    <div className="flex h-full flex-row items-stretch">
       <div className="min-h-0 min-w-0 flex-1">{surface}</div>
-      <div className="flex min-h-0">{conclusion}</div>
+      <div className="ml-[6px] flex min-h-0">{conclusion}</div>
     </div>
   ) : (
     surface
@@ -203,7 +192,7 @@ function FormBuilderRoot<T extends FieldValues = FieldValues>({
 
   // `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", className);
+  const outerClassName = cn("h-full w-full @container", className);
 
   const tree = (
     <Form {...form}>
@@ -214,15 +203,13 @@ function FormBuilderRoot<T extends FieldValues = FieldValues>({
   return (
     <FormIdContext.Provider value={id}>
       <LoadingContext.Provider value={loading}>
-        <ModeContext.Provider value={mode}>
-          <DirectionContext.Provider value={direction}>
-            {isStepper ? (
-              <StepperContext.Provider value={stepper}>{tree}</StepperContext.Provider>
-            ) : (
-              tree
-            )}
-          </DirectionContext.Provider>
-        </ModeContext.Provider>
+        <DirectionContext.Provider value={direction}>
+          {isStepper ? (
+            <StepperContext.Provider value={stepper}>{tree}</StepperContext.Provider>
+          ) : (
+            tree
+          )}
+        </DirectionContext.Provider>
       </LoadingContext.Provider>
     </FormIdContext.Provider>
   );
@@ -240,10 +227,9 @@ function FormBuilderRoot<T extends FieldValues = FieldValues>({
  * </FormBuilder>
  * ```
  *
- * Steps are components (`FormBuilder.Stepper` + `FormBuilder.Step`) and
- * `mode="view"` renders read-only. FormBuilder is drawer-unaware — to show a form
- * in a drawer, wrap it in `FormRenderer`'s `FormDrawer` (or use `FormRenderer`
- * with `display: "drawer"`).
+ * 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"`).
  */
 export const FormBuilder = Object.assign(FormBuilderRoot, {
   // fields

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

@@ -4,7 +4,6 @@ import { ReactNode } from "react";
 
 import { cn } from "../../utils/cn";
 import { HeaderBar } from "../HeaderBar";
-import { useMode } from "./context";
 
 export type HeaderVariant = "new" | "edit" | "detail";
 
@@ -90,12 +89,9 @@ export interface HeaderProps {
  * Place it as a direct child of `<FormBuilder>`; the root then switches to the
  * scroll-shell layout that reserves space beneath the floating header.
  */
-export function Header({ title, label, variant, children }: HeaderProps) {
-  const mode = useMode();
-  const v: HeaderVariant = variant ?? (mode === "view" ? "detail" : "new");
-
+export function Header({ title, label, variant = "new", children }: HeaderProps) {
   return (
-    <FormHeaderBar title={title} label={label} variant={v}>
+    <FormHeaderBar title={title} label={label} variant={variant}>
       {children}
     </FormHeaderBar>
   );

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

@@ -2,13 +2,9 @@ export { FormBuilder } from "./form-builder";
 export type { SectionProps } from "./form-builder";
 export { FormHeaderBar } from "./header";
 export type { HeaderProps, HeaderVariant, FormHeaderBarProps } from "./header";
-export { DisplayField } from "./DisplayField";
-export type { DisplayFieldProps } from "./DisplayField";
 export { RichTextField } from "../TextEditor/RichTextField";
-export { formatFieldView } from "./viewFormat";
-export type { FieldView, ViewKind, ViewFormatOptions } from "./viewFormat";
 export type { StepProps } from "./stepper";
-export type { FormBuilderMode, FieldDirection } from "./context";
+export type { FieldDirection } from "./context";
 export type {
   BaseFieldProps,
   OptionItem,

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

@@ -6,7 +6,13 @@ import { useFormState, type FieldPath, type FieldValues } from "react-hook-form"
 import { cn } from "../../utils/cn";
 import { Button } from "../Button";
 import { FormStepper, FormStep, FormStepIndicator, FormStepLabel } from "../FormStepper";
-import { StepContext, useStepper, type StepperContextValue, type StepRegistry } from "./context";
+import {
+  StepContext,
+  StepperContext,
+  useStepper,
+  type StepperContextValue,
+  type StepRegistry,
+} from "./context";
 
 // ─── Step (declaration only — the Stepper reads its props) ───────────────────
 
@@ -72,7 +78,7 @@ function StepSlot({
  * to bottom, joined by a short vertical connector between consecutive steps.
  */
 function StepperNav() {
-  const { titles, currentStep, goToStep, stepFields } = useStepper();
+  const { titles, currentStep, goToStep, stepFields, completedSteps } = useStepper();
   const { errors } = useFormState();
 
   const stepHasError = (index: number) =>
@@ -83,8 +89,13 @@ function StepperNav() {
       {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
-        // the first one with errors. Errored steps show a red indicator.
-        const type = stepHasError(index) ? "negative" : index < currentStep ? "success" : "default";
+        // the first one with errors. A live error shows red; a step that has passed
+        // validation stays checked (success) even after navigating back to it.
+        const type = stepHasError(index)
+          ? "negative"
+          : completedSteps.has(index)
+            ? "success"
+            : "default";
         return (
           <React.Fragment key={title}>
             <FormStep index={index} type={type} onClick={() => void goToStep(index)}>
@@ -105,24 +116,71 @@ function StepperNav() {
   );
 }
 
-// ─── Back / Next / default footer ────────────────────────────────────────────
+// ─── Back / Next chevron nav (the Figma header action bar) ───────────────────
 
-export function Back({ children }: { children?: React.ReactNode }) {
-  const { goToPrevious, isFirstStep } = useStepper();
+/**
+ * Shared chevron nav button, matching the Figma header action bar (Body-HeaderBar-1.0) — the
+ * Glare `Button` icon variant, the same control Select/SearchableSelect use for their chevrons.
+ */
+function StepNavButton({
+  dir,
+  onClick,
+  disabled,
+}: {
+  dir: "left" | "right";
+  onClick: () => void;
+  disabled: boolean;
+}) {
   return (
-    <Button type="button" variant="BorderStyle" disabled={isFirstStep} onClick={goToPrevious}>
-      {children ?? "Back"}
+    <Button
+      type="button"
+      buttonType="icon"
+      size="M"
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={dir === "left" ? "Previous step" : "Next step"}
+    >
+      <i
+        className={cn(
+          "text-[18px]",
+          dir === "left" ? "ri-arrow-left-s-line" : "ri-arrow-right-s-line",
+        )}
+      />
     </Button>
   );
 }
 
-export function Next({ children }: { children?: React.ReactNode }) {
+/** `FormBuilder.Back` — chevron to the previous step; disabled on the first. */
+export function Back() {
+  const { goToPrevious, isFirstStep } = useStepper();
+  return <StepNavButton dir="left" onClick={goToPrevious} disabled={isFirstStep} />;
+}
+
+/** `FormBuilder.Next` — chevron to the next step (validates first); disabled on the last. */
+export function Next() {
   const { goToNext, isLastStep } = useStepper();
-  if (isLastStep) return null;
+  return <StepNavButton dir="right" onClick={() => void goToNext()} disabled={isLastStep} />;
+}
+
+// ─── Stepper action bar (Back/Next + divider, then the Submit) ────────────────
+
+/**
+ * `FormRenderer` wraps its `actions` in this. When the form is a stepper it prepends the
+ * chevron `Back`/`Next` controls + a divider before the (user-provided) Submit — the Figma
+ * `Body-HeaderBar-1.0` layout. Outside a stepper there's no `StepperContext`, so it renders
+ * the actions untouched.
+ */
+export function StepperActions({ children }: { children?: React.ReactNode }) {
+  const stepper = React.useContext(StepperContext);
+  if (!stepper) return <>{children}</>;
   return (
-    <Button type="button" variant="PrimeStyle" onClick={() => void goToNext()}>
-      {children ?? "Next"}
-    </Button>
+    <div className="flex items-center gap-2">
+      <Back />
+      <Next />
+      {/* Divider — white-alpha hairline between the nav and the Submit. */}
+      <span aria-hidden className="mx-1 h-5 w-px rounded-[2px] bg-white-alpha-20" />
+      {children}
+    </div>
   );
 }
 
@@ -170,13 +228,27 @@ export function useStepperState(
   trigger: TriggerFn,
 ): StepperContextValue {
   const [currentStep, setCurrentStep] = React.useState(0);
+  // Steps that have passed their last validation — kept so their checkmark persists when the
+  // user navigates back to an earlier step.
+  const [completedSteps, setCompletedSteps] = React.useState<Set<number>>(new Set());
   const stepFieldsRef = React.useRef<Record<number, Set<string>>>({});
   const titles = steps.map((s) => s.props.title);
   const lastIndex = steps.length - 1;
 
+  const markStep = (step: number, passed: boolean) =>
+    setCompletedSteps((prev) => {
+      if (passed === prev.has(step)) return prev; // no change
+      const next = new Set(prev);
+      if (passed) next.add(step);
+      else next.delete(step);
+      return next;
+    });
+
   const validateStep = async (step: number) => {
     const names = [...(stepFieldsRef.current[step] ?? [])] as FieldPath<FieldValues>[];
-    return names.length === 0 ? true : trigger(names);
+    const passed = names.length === 0 ? true : await trigger(names);
+    markStep(step, passed);
+    return passed;
   };
 
   // Navigation runs through the step buttons. Backward is free; going forward
@@ -211,6 +283,7 @@ export function useStepperState(
     goToPrevious: () => setCurrentStep((s) => Math.max(s - 1, 0)),
     goToStep,
     stepFields: stepFieldsRef.current,
+    completedSteps,
   };
 }
 

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

@@ -3,7 +3,7 @@
 import { ReactNode } from "react";
 
 import { Button } from "../Button";
-import { useFormId, useLoading, useMode } from "./context";
+import { useFormId, useLoading } from "./context";
 
 export interface SubmitButtonProps {
   children?: ReactNode;
@@ -21,9 +21,6 @@ export interface SubmitButtonProps {
 export function SubmitButton({ children, className, loadingText, form }: SubmitButtonProps) {
   const loading = useLoading();
   const ctxFormId = useFormId();
-  const mode = useMode();
-
-  if (mode === "view") return null;
 
   return (
     <Button

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

@@ -8,7 +8,7 @@ import type {
   Resolver,
   UseFormReturn,
 } from "react-hook-form";
-import type { FieldDirection, FormBuilderMode } from "./context";
+import type { FieldDirection } from "./context";
 import type { SectionColor } from "../SectionBlock";
 
 /** Props shared by every `FormBuilder.*` field. `name` is the RHF path. */
@@ -69,13 +69,12 @@ export interface FileFieldProps extends BaseFieldProps {
   multiple?: boolean;
 }
 
-/** `FormBuilder.Custom` — bring your own control + optional read-only render. */
+/** `FormBuilder.Custom` — bring your own control, keeping the FieldSection + validation wiring. */
 export interface CustomFieldProps extends BaseFieldProps {
   render: (args: {
     field: ControllerRenderProps<FieldValues, string>;
     fieldState: ControllerFieldState;
   }) => ReactNode;
-  formatView?: (value: unknown) => ReactNode;
 }
 
 /** `FormBuilder.Date` / `.DateRange` / `.DateMultiple` / `.DateTime`. */
@@ -248,8 +247,6 @@ export interface FormBuilderRootProps<T extends FieldValues = FieldValues> {
   values?: T;
   /** Loading flag — Submit shows a spinner and inputs disable. */
   loading?: boolean;
-  /** `"edit"` (default) or read-only `"view"`. */
-  mode?: FormBuilderMode;
   /** Field row direction. Defaults to horizontal (vertical inside a drawer). */
   fieldDirection?: FieldDirection;
   /** Reset to defaults after a successful submit. */

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

@@ -106,8 +106,15 @@ export function FormDrawer({
               {actions}
             </FormHeaderBar>
 
-            {/* pt-[72px] clears the 44px header pill (inset 4px) — same as the page shell. */}
-            <div className="h-full overflow-y-auto px-3 pb-[20px] pt-[72px]">{children}</div>
+            {/* pt-[72px] clears the 44px header pill (inset 4px) — same as the page shell. The
+                48px bottom breathing-room goes on an inner wrapper, not the scroll container:
+                FormBuilder's outer element is `h-full`, which would pin it to the content box and
+                swallow the container's own `pb`. On a plain wrapper that `h-full` resolves to the
+                content height, so the padding actually lengthens the scroll. The conclusion panel
+                is a separate sibling, so it keeps its own spacing. */}
+            <div className="h-full overflow-y-auto px-3 pt-[72px]">
+              <div className="pb-[48px]">{children}</div>
+            </div>
           </div>
         </DrawerPanel>