torch-glare 2.4.3 → 2.4.5

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

@@ -37,12 +37,37 @@ function splitPhone(value: unknown, defaultDial: string): { dial: string; number
  * `FormBuilder.Phone` — country dial-code (every country) + number. The picker is a
  * `SearchableSelect` keyed by the unique ISO code (dial codes repeat) — type to filter by
  * country name or dial. The value is stored as a `"+<dial> <number>"` string.
+ *
+ * **Inside a `FormBuilder.Table` cell** this collapses to a single plain number input: the
+ * fixed-width picker imposed a ~155px floor on the column and left the number truncated,
+ * and two controls in one cell is not a table column. Add a separate column (e.g. a
+ * `FormBuilder.Select` of dial codes) when a table needs the country code.
  */
 export function PhoneField(props: PhoneFieldProps) {
   const loading = useLoading();
   const cell = useCell();
   const defaultDial = props.defaultCountry ?? "+964"; // Iraq
 
+  if (cell) {
+    return (
+      <FieldShell {...props}>
+        {(field) => (
+          <InputField
+            type="tel"
+            inputMode="tel"
+            value={typeof field.value === "string" ? field.value : ""}
+            onChange={(e) => field.onChange(e.target.value.replace(/[^\d\s+-]/g, ""))}
+            onBlur={field.onBlur}
+            placeholder={props.placeholder ?? "Phone number"}
+            disabled={props.disabled || loading}
+            onTable
+            className="w-full"
+          />
+        )}
+      </FieldShell>
+    );
+  }
+
   return (
     <FieldShell {...props}>
       {(field) => {

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

@@ -21,7 +21,16 @@ import {
 
 import { cn } from "../../../utils/cn";
 import { SectionBlock } from "../../SectionBlock";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../Table";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableEndAction,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableScroller,
+} from "../../Table";
 import { Checkbox } from "../../Checkbox";
 import { Button } from "../../Button";
 import { CellContext, useLoading } from "../context";
@@ -50,6 +59,8 @@ export function TableField(props: TableFieldProps) {
 
   const [selected, setSelected] = useState<Set<string>>(new Set());
   const [sort, setSort] = useState<{ key: string; dir: "asc" | "desc" } | null>(null);
+  // Drag-resized column widths, keyed by column index; falls back to `column.width`.
+  const [resized, setResized] = useState<Record<number, number>>({});
 
   const sensors = useSensors(
     useSensor(PointerSensor),
@@ -112,6 +123,25 @@ export function TableField(props: TableFieldProps) {
 
   const totalCols = columns.length + (showHandle ? 1 : 0) + (showSelect ? 1 : 0);
 
+  // Under the browser's default `table-layout: auto`, a column's `width` is only a hint —
+  // content (an input's intrinsic size, a currency prefix) silently widens it, which is why
+  // a `width: 110` column used to render at 200-odd px. When every column declares a width
+  // we can switch to fixed layout and have them honoured exactly. Mixed/absent widths keep
+  // auto layout, since under fixed layout an unsized column would collapse to nothing.
+  //
+  // Fixed layout also needs a *definite* table width — with `width: auto` the browser sizes
+  // the table from content and then redistributes, throwing the declared widths (and any
+  // drag-resize) away. So the widths are owned here and totalled onto the table, which is
+  // what lets a drag grow the table instead of stealing space from the next column.
+  const DUMMY_COL_WIDTH = 40; // the design's onset / selector columns
+  const colWidth = (col: TableColumn, ci: number) => resized[ci] ?? col.width;
+  const fixedLayout = columns.length > 0 && columns.every((col, ci) => !!colWidth(col, ci));
+  const tableWidth = fixedLayout
+    ? columns.reduce((sum, col, ci) => sum + (colWidth(col, ci) ?? 0), 0) +
+      (showHandle ? DUMMY_COL_WIDTH : 0) +
+      (showSelect ? DUMMY_COL_WIDTH : 0)
+    : undefined;
+
   const rowCells = (rowName: string, index: number) => (
     <>
       {showSelect && (
@@ -126,11 +156,14 @@ export function TableField(props: TableFieldProps) {
       {columns.map((col, ci) => (
         <TableCell
           key={ci}
-          style={col.width ? { width: col.width } : undefined}
-          childrenClassName={cn(
-            "min-w-0 w-full [&:has(input)]:bg-transparent",
-            col.align && ALIGN[col.align],
-          )}
+          style={colWidth(col, ci) ? { width: colWidth(col, ci) } : undefined}
+          // Column widths come from `col.width`, so opt out of TableCell's 200px floor —
+          // otherwise a narrow column (e.g. `width: 110`) silently renders at 200px.
+          minWidth={0}
+          // Every cell here holds a form control, and the right-edge fade washes out whatever
+          // sits at its end — a Select's chevron, a date picker's button.
+          fade={false}
+          childrenClassName={cn("min-w-0 w-full", col.align && ALIGN[col.align])}
         >
           <CellContext.Provider value={true}>{col.cell(rowName, index)}</CellContext.Provider>
         </TableCell>
@@ -139,12 +172,19 @@ export function TableField(props: TableFieldProps) {
   );
 
   const table = (
-    <Table>
+    // `min-w-full` so the grid still spans the card when the columns are narrower than it,
+    // while staying free to overflow (and scroll) when they aren't.
+    <Table
+      className={cn("min-w-full", fixedLayout && "[table-layout:fixed]")}
+      style={tableWidth ? { width: tableWidth } : undefined}
+    >
       <TableHeader>
         <TableRow>
-          {showHandle && <TableHead isDummy />}
+          {/* Fixed 40px, per the design — and so these unsized columns can't absorb the
+              table's slack width and push the data columns off-screen. */}
+          {showHandle && <TableHead isDummy style={{ width: DUMMY_COL_WIDTH }} />}
           {showSelect && (
-            <TableHead isDummy>
+            <TableHead isDummy style={{ width: DUMMY_COL_WIDTH }}>
               <Checkbox
                 size="S"
                 checked={allSelected ? true : someSelected ? "indeterminate" : false}
@@ -155,7 +195,11 @@ export function TableField(props: TableFieldProps) {
           {columns.map((col, ci) => (
             <TableHead
               key={ci}
+              // Width goes on the <th> too, so header and body columns agree.
+              style={colWidth(col, ci) ? { width: colWidth(col, ci) } : undefined}
+              onResize={(w) => setResized((prev) => ({ ...prev, [ci]: w }))}
               sortType={col.sortKey && sort?.key === col.sortKey ? sort.dir : undefined}
+              sortLabel={typeof col.header === "string" ? col.header : undefined}
               onSort={col.sortKey ? () => applySort(col.sortKey as string) : undefined}
             >
               {col.header}
@@ -183,58 +227,40 @@ export function TableField(props: TableFieldProps) {
 
         {fields.length === 0 && (
           <TableRow>
-            <TableCell colSpan={totalCols}>
+            <TableCell colSpan={totalCols} minWidth={0}>
               <span className="typography-body-small-regular text-content-presentation-global-secondary">
                 No rows yet.
               </span>
             </TableCell>
           </TableRow>
         )}
-
-        <TableRow className="h-[40px]">
-          <TableCell
-            colSpan={totalCols}
-            className="border-t-2 border-transparent hover:border-border-presentation-table-action-hover hover:bg-background-presentation-table-acton-hover"
-          >
-            <button
-              type="button"
-              disabled={loading}
-              onClick={() => append((props.defaultItem ?? {}) as never)}
-              className="flex w-full items-center justify-start gap-2 typography-body-medium-semibold text-content-presentation-action-light-primary [&_i]:text-[20px]"
-            >
-              <i className="ri-add-line" />
-              {props.addLabel ?? "Add New"}
-            </button>
-          </TableCell>
-        </TableRow>
       </TableBody>
     </Table>
   );
 
   // Header actions on the right of the SectionBlock title row: a "Delete Row" that's disabled
-  // until rows are selected, and a primary "Add New".
+  // until rows are selected, and a primary "Add New". They live outside the scroll container,
+  // so they stay put while the grid scrolls sideways.
   const headerActions = (
     <>
       {selectable && (
         <Button
           type="button"
-          size="S"
+          size="M"
           variant="BorderStyle"
           disabled={loading || selected.size === 0}
           onClick={deleteSelected}
         >
-          <i className="ri-delete-bin-line" />
           Delete Row
         </Button>
       )}
       <Button
         type="button"
-        size="S"
+        size="M"
         variant="BluColStyle"
         disabled={loading}
         onClick={() => append((props.defaultItem ?? {}) as never)}
       >
-        <i className="ri-add-line" />
         {props.addLabel ?? "Add New"}
       </Button>
     </>
@@ -242,32 +268,34 @@ export function TableField(props: TableFieldProps) {
 
   return (
     <SectionBlock
+      variant="Table"
       title={props.title}
       color={props.color}
       icon={props.icon}
       action={headerActions}
-      bodyClassName="px-[16px]"
-      // The bottom "Add New" footer is the last element, so drop SectionBlock's default
-      // bottom padding to keep the table flush with the card edge (matches the Figma).
-      containerClassName="pb-0"
     >
-      <div className="flex w-full flex-col gap-2">
-        {props.description && (
-          <p className="typography-body-small-regular text-content-presentation-global-secondary">
-            {props.description}
-          </p>
+      {props.description && (
+        <p className="px-[16px] pt-[12px] typography-body-small-regular text-content-presentation-global-secondary">
+          {props.description}
+        </p>
+      )}
+
+      {/* The table is the only horizontally scrolling element … */}
+      <TableScroller>
+        {showHandle ? (
+          <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
+            {table}
+          </DndContext>
+        ) : (
+          table
         )}
+      </TableScroller>
 
-        <div className="w-full overflow-x-auto">
-          {showHandle ? (
-            <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
-              {table}
-            </DndContext>
-          ) : (
-            table
-          )}
-        </div>
-      </div>
+      {/* … so this stays visible no matter how far right the columns are scrolled. */}
+      <TableEndAction disabled={loading} onClick={() => append((props.defaultItem ?? {}) as never)}>
+        <i className="ri-add-line" />
+        {props.addLabel ?? "Add New"}
+      </TableEndAction>
     </SectionBlock>
   );
 }

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

@@ -6,7 +6,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 { SectionBlock, type SectionColor, type SectionVariant } from "../SectionBlock";
 import { LoadingContext, DirectionContext, StepperContext, FormIdContext } from "./context";
 import { Header } from "./header";
 import type { FormBuilderRootProps } from "./types";
@@ -57,13 +57,21 @@ 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, children }: SectionProps) {
+function Section({ title, color, icon, variant, action, children }: SectionProps) {
   return (
-    <SectionBlock title={title} color={color} icon={icon}>
+    <SectionBlock title={title} color={color} icon={icon} variant={variant} action={action}>
       {children}
     </SectionBlock>
   );
@@ -122,11 +130,11 @@ function FormBuilderRoot<T extends FieldValues = FieldValues>({
   // `<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) => (
@@ -179,13 +187,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

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

@@ -0,0 +1,207 @@
+"use client";
+
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { cn } from "../../utils/cn";
+import { formBarItemStyles } from "../TabFormItem";
+import { FormHeaderBar, type HeaderVariant } from "../FormBuilder/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.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.
+ */
+
+export interface DetailSidebarProps {
+  children: React.ReactNode;
+}
+
+/**
+ * `FormRenderer.Sidebar` — the tab rail, sitting where a `FormBuilder.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.
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- children are read by the FormRenderer root
+function DetailSidebarRoot(_props: DetailSidebarProps) {
+  return null;
+}
+(DetailSidebarRoot as unknown as { __isDetailSidebar: boolean }).__isDetailSidebar = true;
+
+export interface DetailSidebarItemProps {
+  /** Ties this row to the `FormRenderer.Tab` of the same `value` — clicking it shows that panel. */
+  value: string;
+  /** Leading icon (e.g. a Remix `<i className="ri-…" />`). */
+  icon?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+/**
+ * `FormRenderer.Sidebar.Item` — a rail nav row, rendered as a Radix `Tabs.Trigger` styled with the
+ * `TabFormItem` `tree` look. Radix drives the active state (`data-state="active"` → black pill).
+ */
+function DetailSidebarItem({ value, icon, children }: DetailSidebarItemProps) {
+  return (
+    <TabsPrimitive.Trigger
+      value={value}
+      className={cn(
+        formBarItemStyles({ componentType: "tree" }),
+        "h-[32px] w-full justify-start gap-2 rounded-[10px] px-[6px] [&_i]:text-[16px]",
+        // Radix sets `data-state` on the trigger; the active tab is the filled (black) pill.
+        "data-[state=active]:bg-background-presentation-tab-topbar-selected data-[state=active]:text-content-presentation-tab-action-selected",
+        "data-[state=active]:hover:bg-background-presentation-tab-topbar-selected data-[state=active]:hover:px-[6px]",
+      )}
+    >
+      {icon}
+      <span className="flex-1 truncate text-left typography-body-medium-medium">{children}</span>
+    </TabsPrimitive.Trigger>
+  );
+}
+
+export const DetailSidebar = Object.assign(DetailSidebarRoot, {
+  Item: DetailSidebarItem,
+});
+
+export function isDetailSidebarElement(
+  node: React.ReactNode,
+): node is React.ReactElement<DetailSidebarProps> {
+  return (
+    React.isValidElement(node) &&
+    (node.type as { __isDetailSidebar?: boolean })?.__isDetailSidebar === true
+  );
+}
+
+export interface DetailRowProps {
+  label: React.ReactNode;
+  value: React.ReactNode;
+}
+
+/**
+ * `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`.
+ */
+export function DetailRow({ label, value }: DetailRowProps) {
+  return (
+    <div className="flex flex-col gap-1">
+      <span className="typography-body-small-regular text-content-presentation-global-secondary">
+        {label}
+      </span>
+      <span className="typography-body-medium-medium text-content-presentation-global-primary">
+        {value}
+      </span>
+    </div>
+  );
+}
+
+export interface DetailGridProps {
+  /** Column count (default 2). */
+  columns?: 1 | 2 | 3;
+  children: React.ReactNode;
+}
+
+const GRID_COLS: Record<NonNullable<DetailGridProps["columns"]>, string> = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+};
+
+/**
+ * `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).
+ */
+export function DetailGrid({ columns = 2, children }: DetailGridProps) {
+  return (
+    <div className={cn("grid w-full gap-x-12 gap-y-5 py-3", GRID_COLS[columns])}>{children}</div>
+  );
+}
+
+export interface DetailTabProps {
+  /** Ties this panel to the `Sidebar.Item` of the same `value`. */
+  value: string;
+  /** The panel body — typically `FormBuilder.Section` display blocks. */
+  children: React.ReactNode;
+}
+
+/**
+ * `FormRenderer.Tab` — a content panel shown when its `value` is the active tab. Renders
+ * **nothing itself**: the FormRenderer root detects it and mounts it as a Radix `Tabs.Content`
+ * (kept mounted, inactive ones hidden).
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- read by the FormRenderer root
+export function DetailTab(_props: DetailTabProps) {
+  return null;
+}
+(DetailTab as unknown as { __isDetailTab: boolean }).__isDetailTab = true;
+
+export function isDetailTabElement(
+  node: React.ReactNode,
+): node is React.ReactElement<DetailTabProps> {
+  return (
+    React.isValidElement(node) && (node.type as { __isDetailTab?: boolean })?.__isDetailTab === true
+  );
+}
+
+export interface DetailTabsViewProps {
+  header?: { title: string; label?: string; variant?: HeaderVariant };
+  /** Header action buttons (Print / Approve / …). */
+  actions?: React.ReactNode;
+  /** The `FormRenderer.Sidebar` element — its children are the tab triggers. */
+  sidebar: React.ReactElement<DetailSidebarProps>;
+  /** The `FormRenderer.Tab` elements — the content panels. */
+  tabs: React.ReactElement<DetailTabProps>[];
+  className?: string;
+}
+
+/**
+ * The detail-tabs surface: the floating header over a fixed left rail (the sidebar) + a scrolling
+ * content column showing the active tab. Radix `Tabs.Root` owns the state (uncontrolled, defaults to
+ * the first tab). The rail matches the stepper's rail position; only the content column scrolls.
+ */
+export function DetailTabsView({ header, actions, sidebar, tabs, className }: DetailTabsViewProps) {
+  const defaultValue = tabs[0]?.props.value;
+
+  return (
+    <TabsPrimitive.Root
+      orientation="vertical"
+      defaultValue={defaultValue}
+      className={cn("h-full w-full @container", className)}
+    >
+      {/* Scroll shell — mirrors FormBuilder's: the absolute header floats over the body. */}
+      <div className="relative isolate flex h-full w-full flex-col overflow-hidden rounded-2xl bg-background-presentation-body-primary">
+        {header && (
+          <FormHeaderBar title={header.title} label={header.label} variant={header.variant}>
+            {actions}
+          </FormHeaderBar>
+        )}
+
+        <div className="relative z-[1] flex min-h-0 w-full flex-1 flex-row">
+          {/* The fixed rail — the tab list. `pt-[72px]` clears the floating header. */}
+          <TabsPrimitive.List asChild>
+            <aside className="flex h-full w-[216px] shrink-0 flex-col gap-1 overflow-y-auto border-r border-border-presentation-global-primary bg-black-alpha-5 px-2 pb-6 pt-[72px] scrollbar-hide">
+              {sidebar.props.children}
+            </aside>
+          </TabsPrimitive.List>
+
+          {/* The only scrolling region — the active tab's Sections. */}
+          <div className="flex min-h-0 w-full flex-1 flex-col overflow-y-auto px-6 py-6 pt-[72px] scrollbar-hide">
+            <div className="mx-auto flex w-full max-w-[1100px] flex-col gap-4">
+              {tabs.map((panel) => (
+                <TabsPrimitive.Content
+                  key={panel.props.value}
+                  value={panel.props.value}
+                  forceMount
+                  className="flex flex-col gap-4 outline-none data-[state=inactive]:hidden"
+                >
+                  {panel.props.children}
+                </TabsPrimitive.Content>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </TabsPrimitive.Root>
+  );
+}

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

@@ -1,11 +1,20 @@
 "use client";
 
-import { useId } from "react";
+import { Children, useId } from "react";
 import { FieldValues } from "react-hook-form";
 
 import { FormBuilder } from "../FormBuilder";
 import { FormIdContext, LoadingContext } from "../FormBuilder/context";
 import { StepperActions } from "../FormBuilder/stepper";
+import {
+  DetailSidebar,
+  DetailTab,
+  DetailGrid,
+  DetailRow,
+  DetailTabsView,
+  isDetailSidebarElement,
+  isDetailTabElement,
+} from "./detail";
 import { FormDrawer } from "./FormDrawer";
 import type { FormRendererProps } from "./types";
 
@@ -17,8 +26,12 @@ import type { FormRendererProps } from "./types";
  * 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.
+ *
+ * Give it `FormRenderer.Sidebar` + `FormRenderer.Tab` children instead of fields and it switches to
+ * a **detail-tabs** view: a display-only page (no `<form>`) whose sidebar swaps `FormBuilder.Section`
+ * panels — the sidebar sits where a stepper's rail would.
  */
-export function FormRenderer<T extends FieldValues = FieldValues>({
+function FormRendererRoot<T extends FieldValues = FieldValues>({
   children,
   id,
   onSubmit,
@@ -52,11 +65,29 @@ export function FormRenderer<T extends FieldValues = FieldValues>({
   const autoId = useId();
   const formId = id ?? autoId;
 
+  // Detail-tabs mode: a `FormRenderer.Sidebar` + `FormRenderer.Tab` children mean a display-only
+  // detail page (no `<form>`) — the sidebar swaps Section panels via Radix Tabs. Detected here so
+  // the form props below are simply unused.
+  const childArray = Children.toArray(children);
+  const detailSidebar = childArray.find(isDetailSidebarElement);
+  const detailTabs = childArray.filter(isDetailTabElement);
+  if (detailSidebar && detailTabs.length > 0) {
+    return (
+      <DetailTabsView
+        header={header}
+        actions={actions}
+        sidebar={detailSidebar}
+        tabs={detailTabs}
+        className={className}
+      />
+    );
+  }
+
   const inner = (
     <FormBuilder
       id={formId}
       form={form}
-      onSubmit={onSubmit}
+      onSubmit={onSubmit ?? (() => {})}
       onInvalid={onInvalid}
       resolver={resolver}
       defaultValues={defaultValues}
@@ -109,3 +140,15 @@ export function FormRenderer<T extends FieldValues = FieldValues>({
   // Page display: FormBuilder already placed `summary` as the grid's conclusion column.
   return inner;
 }
+
+/**
+ * FormRenderer — see {@link FormRendererRoot}. The compound statics drive the display-only
+ * **detail-tabs** view: `FormRenderer.Sidebar` (the rail) + `FormRenderer.Sidebar.Item` (a tab) +
+ * `FormRenderer.Tab` (a `FormBuilder.Section` panel).
+ */
+export const FormRenderer = Object.assign(FormRendererRoot, {
+  Sidebar: DetailSidebar,
+  Tab: DetailTab,
+  Grid: DetailGrid,
+  Row: DetailRow,
+});

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

@@ -2,3 +2,10 @@ export { FormRenderer } from "./form-renderer";
 export { FormDrawer } from "./FormDrawer";
 export type { FormDrawerProps } from "./FormDrawer";
 export type { FormRendererProps, FormRendererDisplay, FieldDirection } from "./types";
+export type {
+  DetailSidebarProps,
+  DetailSidebarItemProps,
+  DetailTabProps,
+  DetailRowProps,
+  DetailGridProps,
+} from "./detail";

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

@@ -23,7 +23,8 @@ export interface FormRendererProps<T extends FieldValues = FieldValues> {
   children: ReactNode;
 
   // --- react-hook-form root (forwarded to FormBuilder) ---
-  onSubmit: (values: T) => void | Promise<void>;
+  /** Submit handler. Optional — a display-only detail-tabs view (`FormRenderer.Sidebar`) has no form. */
+  onSubmit?: (values: T) => void | Promise<void>;
   onInvalid?: (errors: FieldErrors<T>) => void;
   resolver?: Resolver<T>;
   defaultValues?: DefaultValues<T>;

package/apps/lib/components/Input.tsx

@@ -198,6 +198,9 @@ export const GroupStyles = cva(
           "hover:caret-border-presentation-state-negative",
         ],
       },
+      // Transparent border/background so the control blends into a table cell. The hover and
+      // focus shadows are deliberately left alone — a cell control lifts exactly like any
+      // other field.
       onTable: {
         true: ["border-transparent", "bg-transparent"],
       },