torch-glare 2.5.0 → 2.5.2

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

@@ -100,7 +100,12 @@ function FiltersRoot({
                 </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/FormBuilder/context.ts

@@ -48,9 +48,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 +63,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/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;
@@ -278,24 +278,14 @@ export interface FormBuilderRootProps<T extends FieldValues = FieldValues> {
   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.
-   */
-  layout?: "page" | "bare";
   /** 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;
 }

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

@@ -12,7 +12,7 @@ import {
   DrawerNotchDivider,
   DrawerNotchPill,
 } from "../Drawer";
-import { FormHeaderBar, type HeaderVariant } from "../FormBuilder/header";
+import { FormHeaderBar, type HeaderVariant } from "./header";
 
 export interface FormDrawerProps {
   open: boolean;
@@ -108,7 +108,7 @@ export function FormDrawer({
 
             {/* 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
+                FormRenderer'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. */}

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

@@ -5,11 +5,11 @@ import * as TabsPrimitive from "@radix-ui/react-tabs";
 
 import { cn } from "../../utils/cn";
 import { formBarItemStyles } from "../TabFormItem";
-import { FormHeaderBar, type HeaderVariant } from "../FormBuilder/header";
+import { FormHeaderBar, type HeaderVariant } from "./header";
 
 /**
  * Detail-tabs — a display-only view where a left **sidebar** switches the main area between
- * **`FormBuilder.Section` panels** (a detail page, not a form). It lives on `FormRenderer`
+ * **`FormRenderer.Section` panels** (a detail page, not a form). It lives on `FormRenderer`
  * (`FormRenderer.Sidebar` / `.Sidebar.Item` / `.Tab`) so `FormBuilder` stays form-only. Built on
  * the same Radix Tabs primitive shadcn uses: the sidebar is the `Tabs.List`, each `Sidebar.Item` a
  * `Tabs.Trigger`, each `Tab` a `Tabs.Content` — so the fixed rail and the panels share tab state.
@@ -20,7 +20,7 @@ export interface DetailSidebarProps {
 }
 
 /**
- * `FormRenderer.Sidebar` — the tab rail, sitting where a `FormBuilder.Stepper`'s nav would.
+ * `FormRenderer.Sidebar` — the tab rail, sitting where a `FormRenderer.Stepper`'s nav would.
  * Renders **nothing itself**: the FormRenderer root detects it and places its `Sidebar.Item`
  * children (the tab triggers) into the fixed rail.
  */
@@ -80,7 +80,7 @@ export interface DetailRowProps {
 
 /**
  * `FormRenderer.Row` — a read-only label/value cell for detail content (the display counterpart of a
- * form field). Drop several inside a `FormRenderer.Grid` within a `FormBuilder.Section`.
+ * form field). Drop several inside a `FormRenderer.Grid` within a `FormRenderer.Section`.
  */
 export function DetailRow({ label, value }: DetailRowProps) {
   return (
@@ -110,7 +110,7 @@ const GRID_COLS: Record<NonNullable<DetailGridProps["columns"]>, string> = {
 /**
  * `FormRenderer.Grid` — arranges `FormRenderer.Row`s in an equal-column grid spanning the **full
  * section width** (default 2 columns, so cells split in half). Padded so the rows breathe inside a
- * `FormBuilder.Section` (clear of the title badge, roomy row + column spacing).
+ * `FormRenderer.Section` (clear of the title badge, roomy row + column spacing).
  */
 export function DetailGrid({ columns = 2, children }: DetailGridProps) {
   return (
@@ -121,7 +121,7 @@ export function DetailGrid({ columns = 2, children }: DetailGridProps) {
 export interface DetailTabProps {
   /** Ties this panel to the `Sidebar.Item` of the same `value`. */
   value: string;
-  /** The panel body — typically `FormBuilder.Section` display blocks. */
+  /** The panel body — typically `FormRenderer.Section` display blocks. */
   children: React.ReactNode;
 }