torch-glare 2.4.1 → 2.4.2

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

@@ -0,0 +1,41 @@
+"use client";
+
+import { ReactNode } from "react";
+
+import { Button } from "../Button";
+import { useFormId, useLoading, useMode } from "./context";
+
+export interface SubmitButtonProps {
+  children?: ReactNode;
+  className?: string;
+  loadingText?: ReactNode;
+  /**
+   * The form to submit, by `id`. Defaults to the enclosing FormBuilder's own form id (via
+   * context), so a bare `<FormBuilder.Submit>` works even in a header / action bar rendered
+   * **outside** the `<form>` element. Set it explicitly only to target a different form.
+   */
+  form?: string;
+}
+
+/** `FormBuilder.Submit` — a loading-aware submit button, hidden in view mode. */
+export function SubmitButton({ children, className, loadingText, form }: SubmitButtonProps) {
+  const loading = useLoading();
+  const ctxFormId = useFormId();
+  const mode = useMode();
+
+  if (mode === "view") return null;
+
+  return (
+    <Button
+      type="submit"
+      // 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"
+      is_loading={loading}
+      className={className}
+    >
+      {loading ? (loadingText ?? children ?? "Saving…") : (children ?? "Save")}
+    </Button>
+  );
+}

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

@@ -0,0 +1,264 @@
+import { ReactNode } from "react";
+import type {
+  ControllerRenderProps,
+  ControllerFieldState,
+  DefaultValues,
+  FieldErrors,
+  FieldValues,
+  Resolver,
+  UseFormReturn,
+} from "react-hook-form";
+import type { FieldDirection, FormBuilderMode } from "./context";
+import type { SectionColor } from "../SectionBlock";
+
+/** Props shared by every `FormBuilder.*` field. `name` is the RHF path. */
+export interface BaseFieldProps {
+  name: string;
+  label?: ReactNode;
+  placeholder?: string;
+  description?: ReactNode;
+  required?: boolean;
+  disabled?: boolean;
+  hidden?: boolean;
+  /** Span the full section width. */
+  fullWidth?: boolean;
+}
+
+export interface OptionItem {
+  label: string;
+  value: string;
+  icon?: ReactNode;
+  /** Secondary row label — shown by `FormBuilder.RadioList` / `.CheckboxGroup`. */
+  description?: string;
+}
+
+/** `FormBuilder.Select` / `.SearchableSelect` — supports async option loading. */
+/** `FormBuilder.Select` — the plain `Select` dropdown. */
+export interface SelectFieldProps extends BaseFieldProps {
+  options: OptionItem[];
+}
+
+/**
+ * `FormBuilder.SearchableSelect` — the `SearchableSelect` combobox: a search box with
+ * client-side filtering, or server-side search + infinite scroll via the async props.
+ */
+export interface SearchableSelectFieldProps extends SelectFieldProps {
+  /** Filter `options` locally (default). Set false for server-side search. */
+  filterClientSide?: boolean;
+  /** Debounced as the user types — refetch your data here. */
+  onSearchChange?: (query: string) => void;
+  /** Called when the list bottom scrolls into view and `hasMore && !loading`. */
+  onLoadMore?: () => void;
+  hasMore?: boolean;
+  loading?: boolean;
+}
+
+/** `FormBuilder.MultiSelect` / `.Tags`, `.Radio`. */
+export interface OptionsFieldProps extends BaseFieldProps {
+  options: OptionItem[];
+}
+
+/** `FormBuilder.Currency`. */
+export interface CurrencyFieldProps extends BaseFieldProps {
+  currencySymbol?: ReactNode;
+}
+
+/** `FormBuilder.File` / `.Image`. */
+export interface FileFieldProps extends BaseFieldProps {
+  accept?: string;
+  multiple?: boolean;
+}
+
+/** `FormBuilder.Custom` — bring your own control + optional read-only render. */
+export interface CustomFieldProps extends BaseFieldProps {
+  render: (args: {
+    field: ControllerRenderProps<FieldValues, string>;
+    fieldState: ControllerFieldState;
+  }) => ReactNode;
+  formatView?: (value: unknown) => ReactNode;
+}
+
+/** `FormBuilder.Date` / `.DateRange` / `.DateMultiple` / `.DateTime`. */
+export interface DateFieldProps extends BaseFieldProps {
+  mode?: "single" | "multiple" | "range";
+  timePicker?: boolean;
+  /** Display format, e.g. "yyyy/MM/dd" (DatePicker default). */
+  dateFormat?: string;
+}
+
+/** `FormBuilder.Otp` — code input; value is a string of `length` digits. */
+export interface OtpFieldProps extends BaseFieldProps {
+  /** Number of digit slots (default 6). */
+  length?: number;
+}
+
+/** `FormBuilder.SwitchBox` — a switch inside a `#f9f9f9` field box. */
+export interface SwitchBoxFieldProps extends BaseFieldProps {
+  /** Text shown inside the box, left of the divider (the design's "Sub-Field-Header"). */
+  subLabel?: string;
+}
+
+/** `FormBuilder.Checkbox` — a single boolean checkbox with an optional inline label. */
+export interface CheckboxFieldProps extends BaseFieldProps {
+  /** Text shown inline next to the checkbox (in addition to the field `label`). */
+  subLabel?: string;
+}
+
+/** One option for `FormBuilder.RadioCards`. */
+export interface RadioCardOption {
+  label: ReactNode;
+  value: string;
+  description?: ReactNode;
+  disabled?: boolean;
+}
+
+/** `FormBuilder.RadioCards` — radio options rendered as cards. */
+export interface RadioCardsFieldProps extends BaseFieldProps {
+  options: RadioCardOption[];
+}
+
+/** `FormBuilder.TreeSelect` (SearchableTree) — hierarchical single-select; value = node id. */
+export interface TreeSelectFieldProps<T = unknown> extends BaseFieldProps {
+  nodes: T[];
+  getNodeId: (node: T) => string;
+  getNodeLabel: (node: T) => ReactNode;
+  /** Nested data: expose each node's children. */
+  getNodeChildren?: (node: T) => T[] | undefined;
+  /** Flat data: the key on each node pointing at its parent's id. */
+  parentIdKey?: string;
+  /** Allow selecting branch (folder) nodes too. */
+  selectableFolders?: boolean;
+}
+
+/** `FormBuilder.Password` — optionally show a strength meter. */
+export interface PasswordFieldProps extends BaseFieldProps {
+  strengthMeter?: boolean;
+}
+
+/** `FormBuilder.Slider` — numeric slider; value `number` (or `[number, number]` with `range`). */
+export interface SliderFieldProps extends BaseFieldProps {
+  min?: number;
+  max?: number;
+  step?: number;
+  /** Two thumbs — value becomes `[number, number]`. */
+  range?: boolean;
+  /** Appended to the value readout, e.g. `"%"` → `50%`. */
+  suffix?: string;
+}
+
+/** `FormBuilder.Color` — color picker; value hex `string`. */
+export interface ColorFieldProps extends BaseFieldProps {
+  presets?: string[];
+  /** Enable the opacity slider and `#rrggbbaa` output (default true). */
+  alpha?: boolean;
+}
+
+/** `FormBuilder.Phone` — country dial-code + number; value `string`. */
+export interface PhoneFieldProps extends BaseFieldProps {
+  defaultCountry?: string;
+}
+
+/** `FormBuilder.Signature` — freehand signature pad; value is a PNG data-URL `string`. */
+export interface SignatureFieldProps extends BaseFieldProps {
+  /** Stroke color (default `#111827`). */
+  penColor?: string;
+}
+
+/** `FormBuilder.FieldArray` — a repeating list of sub-fields (RHF `useFieldArray`). */
+export interface FieldArrayProps {
+  name: string;
+  label?: ReactNode;
+  description?: ReactNode;
+  hidden?: boolean;
+  addLabel?: ReactNode;
+  /** Value for a newly-added row. */
+  defaultItem?: Record<string, unknown>;
+  /** Render a row's sub-fields; use names like `${rowName}.field`. */
+  children: (rowName: string, index: number, remove: () => void) => ReactNode;
+}
+
+/** One column of `FormBuilder.Table`. `cell` renders any `FormBuilder.*` field for a row. */
+export interface TableColumn {
+  header: ReactNode;
+  /** Fixed column width in px (otherwise the column sizes to content). */
+  width?: number;
+  align?: "start" | "center" | "end";
+  /**
+   * The row-object key this column edits. Set it to make the column header **sortable** — a
+   * sort toggle appears and clicking it reorders the rows by this key (asc/desc). Omit for
+   * non-sortable columns.
+   */
+  sortKey?: string;
+  /**
+   * Render the cell's field. `rowName` is the array path for this row (e.g. `lines.0`), so name
+   * sub-fields `${rowName}.<key>`. The field renders "bare" (control only, error as a tooltip).
+   */
+  cell: (rowName: string, index: number) => ReactNode;
+}
+
+/**
+ * `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`).
+ */
+export interface TableFieldProps {
+  name: string;
+  /** SectionBlock title. */
+  title?: ReactNode;
+  /** SectionBlock color badge (default `"Blue"`). */
+  color?: SectionColor;
+  icon?: ReactNode;
+  description?: ReactNode;
+  hidden?: boolean;
+  columns: TableColumn[];
+  /** Value for a newly-added row. */
+  defaultItem?: Record<string, unknown>;
+  addLabel?: ReactNode;
+  /** Per-row checkboxes + select-all + bulk delete (default `true`). */
+  selectable?: boolean;
+  /** Drag-drop row reordering (default `true`). */
+  reorderable?: boolean;
+}
+
+/** Root `<FormBuilder>` props. */
+export interface FormBuilderRootProps<T extends FieldValues = FieldValues> {
+  children: ReactNode;
+  /** `id` on the underlying `<form>` — lets an outside button submit it via `form={id}`. */
+  id?: string;
+  /**
+   * An existing react-hook-form instance. Pass one when something **outside** the
+   * form needs the same values — e.g. a `FormSummary` rendered beside it:
+   *
+   * ```tsx
+   * const form = useForm({ resolver, defaultValues })
+   * <FormBuilder form={form} …>…</FormBuilder>
+   * <FormSummary form={form}>…</FormSummary>
+   * ```
+   *
+   * When omitted, FormBuilder creates its own from `resolver`/`defaultValues`/`values`.
+   */
+  form?: UseFormReturn<T>;
+  onSubmit: (values: T) => void | Promise<void>;
+  onInvalid?: (errors: FieldErrors<T>) => void;
+  /** RHF resolver — e.g. `zodResolver(schema)`. Library stays validation-agnostic. */
+  resolver?: Resolver<T>;
+  defaultValues?: DefaultValues<T>;
+  /** Controlled values for edit — the form re-syncs when this changes. */
+  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. */
+  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.
+   */
+  conclusion?: ReactNode;
+  className?: string;
+}

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

@@ -0,0 +1,137 @@
+import { ReactNode } from "react";
+import type { OutputData } from "@editorjs/editorjs";
+
+import { Badge } from "../Badge";
+import { RichTextField } from "../TextEditor/RichTextField";
+import { formatNumber } from "./numberFormat";
+
+/** A read-only value for `DisplayField`: a plain string, or a rich node. */
+export interface FieldView {
+  value?: string;
+  valueNode?: ReactNode;
+}
+
+export interface OptionItem {
+  label: string;
+  value: string;
+  icon?: ReactNode;
+}
+
+/** The read-only "kind" a field formats as (a superset grouping of field types). */
+export type ViewKind =
+  | "text"
+  | "number"
+  | "currency"
+  | "option"
+  | "boolean"
+  | "date"
+  | "daterange"
+  | "dates"
+  | "multi"
+  | "richtext"
+  | "file";
+
+export interface ViewFormatOptions {
+  kind: ViewKind;
+  value: unknown;
+  options?: OptionItem[];
+  currencySymbol?: ReactNode;
+}
+
+function optionLabel(options: OptionItem[] | undefined, value: unknown): string {
+  const found = options?.find((o) => o.value === value);
+  return found ? found.label : value == null ? "" : String(value);
+}
+
+function formatDate(value: unknown): string {
+  if (!(value instanceof Date) || Number.isNaN(value.getTime())) return "";
+  const y = value.getFullYear();
+  const m = String(value.getMonth() + 1).padStart(2, "0");
+  const d = String(value.getDate()).padStart(2, "0");
+  return `${y}/${m}/${d}`;
+}
+
+function multiLabels(options: OptionItem[] | undefined, value: unknown): string[] {
+  if (!Array.isArray(value)) return [];
+  return value.map((v) => {
+    if (v != null && typeof v === "object") {
+      const o = v as { name?: string; label?: string; value?: string };
+      return o.name ?? o.label ?? optionLabel(options, o.value);
+    }
+    return optionLabel(options, v);
+  });
+}
+
+/** Formats a field value as read-only content for `mode: "view"`. */
+export function formatFieldView({
+  kind,
+  value,
+  options,
+  currencySymbol,
+}: ViewFormatOptions): FieldView {
+  switch (kind) {
+    case "number":
+      return { value: formatNumber(value) };
+
+    case "currency":
+      return {
+        value:
+          value == null || value === ""
+            ? ""
+            : `${currencySymbol ? `${currencySymbol} ` : ""}${formatNumber(value)}`,
+      };
+
+    case "option":
+      return { value: optionLabel(options, value) };
+
+    case "boolean":
+      return {
+        valueNode: <Badge size="S" color={value ? "green" : "gray"} label={value ? "Yes" : "No"} />,
+      };
+
+    case "date":
+      return { value: formatDate(value) };
+
+    case "daterange": {
+      const r = value as { from?: unknown; to?: unknown } | null | undefined;
+      if (!r || (!r.from && !r.to)) return { value: "" };
+      return { value: `${formatDate(r.from)} – ${formatDate(r.to)}` };
+    }
+
+    case "dates": {
+      const arr = Array.isArray(value) ? value : [];
+      return { value: arr.map(formatDate).filter(Boolean).join(", ") };
+    }
+
+    case "multi": {
+      const labels = multiLabels(options, value);
+      if (labels.length === 0) return { value: "" };
+      return {
+        valueNode: (
+          <div className="flex flex-wrap gap-1">
+            {labels.map((label, i) => (
+              <Badge key={`${label}-${i}`} size="S" color="ocean" label={label} />
+            ))}
+          </div>
+        ),
+      };
+    }
+
+    case "richtext":
+      if (!value) return { value: "" };
+      return { valueNode: <RichTextField readOnly data={value as OutputData} /> };
+
+    case "file": {
+      const files = Array.isArray(value) ? value : value ? [value] : [];
+      if (files.length === 0) return { value: "" };
+      const names = files.map((f) =>
+        f instanceof File ? f.name : typeof f === "string" ? f : "file",
+      );
+      return { value: names.join(", ") };
+    }
+
+    case "text":
+    default:
+      return { value: value == null ? "" : String(value) };
+  }
+}

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

@@ -0,0 +1,121 @@
+"use client";
+
+import { ReactNode } from "react";
+
+import {
+  Drawer,
+  DrawerContent,
+  DrawerPanel,
+  DrawerTitle,
+  DrawerNotch,
+  DrawerNotchClose,
+  DrawerNotchDivider,
+  DrawerNotchPill,
+} from "../Drawer";
+import { FormHeaderBar, type HeaderVariant } from "../FormBuilder/header";
+
+export interface FormDrawerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** The `<FormBuilder>` (or any content) to host inside the drawer. */
+  children: ReactNode;
+  /**
+   * The conclusion panel rendered **beside** the form, outside the drawer's scrollable
+   * body — typically a `<FormSummary>` reading the same hoisted `form`. `FormDrawer` owns
+   * the box around it (full height, shrinkable), which is what lets the panel's own
+   * `h-full` and internal scrolling work. The panel sizes itself — a `FormSummary` is
+   * 228px wide by default — and brings its own (dark) background.
+   */
+  summary?: ReactNode;
+  /** @deprecated Renamed to `summary`. */
+  childrenOutside?: ReactNode;
+  /**
+   * Plain title text (uppercased) in the header's title pill — also the a11y title.
+   * A string, because it renders through the same `HeaderBar` as the page form.
+   */
+  title?: string;
+  /** Badge text in the title pill. Defaults from `variant` (New / Edit / View). */
+  badge?: string;
+  /** Colored badge variant, matching the page form's header. Default `"new"`. */
+  variant?: HeaderVariant;
+  /** Action buttons shown on the right of the drawer header (e.g. a Save submit). */
+  actions?: ReactNode;
+  /** Shows an "Open in new tab" pill in the notch when provided. */
+  onOpenInNewTab?: () => void;
+}
+
+/**
+ * A right-anchored Glare drawer for hosting a form. This is a **FormRenderer**
+ * concern — `FormBuilder` itself is drawer-unaware (it only displays inputs).
+ * Wrap a `<FormBuilder>` in `<FormDrawer>` (and pass `fieldDirection="vertical"`
+ * to the form) to show it in a drawer, or let `FormRenderer` do it via
+ * `display: "drawer"`.
+ *
+ * The `wrapperClassName` includes `mt-0 h-auto` to cancel `DrawerContent`'s base
+ * bottom-sheet offset (the Glare right-side form-drawer recipe).
+ *
+ * It owns the arrangement of its two slots: the form goes in a `DrawerPanel` (the light
+ * surface), and `summary` sits beside it in the tray with a 6px gutter. The tray itself
+ * paints nothing, so each panel brings its own background.
+ */
+export function FormDrawer({
+  open,
+  onOpenChange,
+  children,
+  summary,
+  childrenOutside,
+  title = "Form",
+  badge,
+  variant,
+  actions,
+  onOpenInNewTab,
+}: FormDrawerProps) {
+  const conclusion = summary ?? childrenOutside;
+
+  return (
+    <Drawer open={open} onOpenChange={onOpenChange} direction="right">
+      {/* The panel fills the available width (minus the 8px insets), capped at 1048px.
+          `gap-[6px]` is the gutter between the form panel and the conclusion beside it. */}
+      <DrawerContent
+        wrapperClassName="top-2 right-2 bottom-2 left-auto mt-0 h-auto w-[calc(100vw-1rem)] max-w-[1048px]"
+        className="gap-[6px]"
+        notch={
+          <DrawerNotch>
+            <DrawerNotchClose onClick={() => onOpenChange(false)} />
+            {onOpenInNewTab && (
+              <>
+                <DrawerNotchDivider />
+                <DrawerNotchPill color="Yellow" onClick={onOpenInNewTab}>
+                  Open in new tab
+                  <i className="ri-arrow-right-up-line text-[12px]" />
+                </DrawerNotchPill>
+              </>
+            )}
+          </DrawerNotch>
+        }
+      >
+        <DrawerPanel className="rounded-tr-[16px] rounded-b-[16px] p-0">
+          <div className="relative flex min-h-0 flex-1 flex-col">
+            {/* Vaul requires a Drawer.Title for the a11y name; the visible title is the
+                HeaderBar below, so this one is for screen readers only. */}
+            <DrawerTitle className="sr-only">{title}</DrawerTitle>
+
+            {/* The SAME floating header the page form uses, so a form's title looks
+                identical in either surface. */}
+            <FormHeaderBar title={title} label={badge} variant={variant}>
+              {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>
+          </div>
+        </DrawerPanel>
+
+        {/* `flex min-h-0` so the conclusion stretches to the tray's full height and can
+            still shrink — without `min-h-0` it would grow past the tray instead of
+            scrolling inside it. No `flex-1`: the panel sizes itself. */}
+        {conclusion && <div className="flex min-h-0">{conclusion}</div>}
+      </DrawerContent>
+    </Drawer>
+  );
+}

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

@@ -0,0 +1,113 @@
+"use client";
+
+import { useId } from "react";
+import { FieldValues } from "react-hook-form";
+
+import { FormBuilder } from "../FormBuilder";
+import { FormIdContext, LoadingContext, ModeContext } from "../FormBuilder/context";
+import { FormDrawer } from "./FormDrawer";
+import type { FormRendererProps } from "./types";
+
+/**
+ * FormRenderer — a thin wrapper around the compound `FormBuilder`. Author the
+ * fields as JSX children; FormRenderer owns page-vs-drawer display, the absolute
+ * title header, and drawer field direction.
+ *
+ * FormRenderer never manufactures a Submit — you compose it and hand it to `actions`
+ * (`actions={<FormBuilder.Submit>Save</FormBuilder.Submit>}`). It renders in the form's
+ * header action pill (page) or the drawer header (drawer), and auto-targets this form.
+ */
+export function FormRenderer<T extends FieldValues = FieldValues>({
+  children,
+  id,
+  onSubmit,
+  onInvalid,
+  resolver,
+  defaultValues,
+  values,
+  mode = "edit",
+  loading,
+  resetOnSuccess,
+  fieldDirection,
+  form,
+  display = "page",
+  header,
+  summary,
+  className,
+  actions,
+  open = false,
+  onOpenChange,
+  title,
+  badge,
+  onOpenInNewTab,
+}: FormRendererProps<T>) {
+  const isDrawer = display === "drawer";
+
+  // FormRenderer owns the display decision: a drawer form lays out vertically.
+  const effectiveDirection = fieldDirection ?? (isDrawer ? "vertical" : undefined);
+  // The absolute title header is a page concern — the drawer has its own header.
+  const useHeader = !!header && !isDrawer;
+  // A stable `id` lets a button OUTSIDE the form submit it via `form={id}` (the header action
+  // pill / drawer header). Falls back to a generated id, provided to the Submit via context.
+  const autoId = useId();
+  const formId = id ?? autoId;
+
+  const inner = (
+    <FormBuilder
+      id={formId}
+      form={form}
+      onSubmit={onSubmit}
+      onInvalid={onInvalid}
+      resolver={resolver}
+      defaultValues={defaultValues}
+      values={values}
+      mode={mode}
+      loading={loading}
+      fieldDirection={effectiveDirection}
+      resetOnSuccess={resetOnSuccess}
+      // Page display only — in a drawer the panel owns the sizing.
+      className={!isDrawer ? className : undefined}
+      // Page display: FormBuilder lays the conclusion as the grid's right column (a stepper adds
+      // the left nav column too). In a drawer the summary goes to FormDrawer's tray instead.
+      conclusion={!isDrawer ? summary : undefined}
+    >
+      {useHeader && (
+        <FormBuilder.Header title={header!.title} label={header!.label} variant={header!.variant}>
+          {actions}
+        </FormBuilder.Header>
+      )}
+
+      {children}
+    </FormBuilder>
+  );
+
+  if (isDrawer) {
+    return (
+      <FormDrawer
+        open={open}
+        onOpenChange={onOpenChange ?? (() => {})}
+        title={title ?? header?.title}
+        badge={badge ?? header?.label}
+        variant={header?.variant}
+        summary={summary}
+        // The drawer header sits outside the `<form>`, so re-supply the form/loading/mode context
+        // a bare `FormBuilder.Submit` reads (on the page it gets these from the FormBuilder tree).
+        actions={
+          actions ? (
+            <ModeContext.Provider value={mode}>
+              <LoadingContext.Provider value={!!loading}>
+                <FormIdContext.Provider value={formId}>{actions}</FormIdContext.Provider>
+              </LoadingContext.Provider>
+            </ModeContext.Provider>
+          ) : undefined
+        }
+        onOpenInNewTab={onOpenInNewTab}
+      >
+        {inner}
+      </FormDrawer>
+    );
+  }
+
+  // Page display: FormBuilder already placed `summary` as the grid's conclusion column.
+  return inner;
+}

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

@@ -0,0 +1,9 @@
+export { FormRenderer } from "./form-renderer";
+export { FormDrawer } from "./FormDrawer";
+export type { FormDrawerProps } from "./FormDrawer";
+export type {
+  FormRendererProps,
+  FormRendererMode,
+  FormRendererDisplay,
+  FieldDirection,
+} from "./types";