torch-glare 2.4.3 → 2.4.5

package/docs/components/form-builder.md

@@ -106,17 +106,26 @@ renders a repeating list — its `children` is a render fn `(rowName, index, rem
 are named `${rowName}.field`.
 
 `FormBuilder.Table` is the **table-shaped** counterpart of `FieldArray` (value `object[]`): an editable
-grid where each row is a record and each column cell is any `FormBuilder.*` field. It renders **inside a
-`SectionBlock`**, so place it as a **top-level child** of the form (not inside a `FormBuilder.Section`).
+grid where each row is a record and each column cell is any `FormBuilder.*` field. It renders its own
+`SectionBlock` (`variant="Table"` — the full-bleed table shell), so place it as a **top-level child** of
+the form, **not** inside a `FormBuilder.Section` — nesting produces a card inside a card. When you need a
+table that isn't a form field, compose the shell yourself with `SectionBlock variant="Table"` (see
+[SectionBlock → Table Variant](./section-block.md#table-variant)).
+
 Each column pairs a `header` with a `cell(rowName, index)` renderer — name the cell's field
-`${rowName}.<key>`. The section header carries the actions: a **Add New** button (also repeated as the
-bottom footer) and a **Delete Row** button that's disabled until rows are checkbox-selected. Rows support
+`${rowName}.<key>`. Set `width` to size a column; it is applied to both the header and the body cells.
+The section header carries the actions: an **Add New** button and a **Delete Row** button that's disabled
+until rows are checkbox-selected. A second **＋ Add New** sits below the grid. Both live *outside* the
+horizontal scroll container, so they stay put when a wide table is scrolled sideways. Rows support
 **checkbox selection** (+ select-all), **drag-drop reordering**, and — per column, via `sortKey` — a
 sort toggle in the header. Cells render
 "bare" (control only) with validation errors shown as a tooltip on the control, so a row stays one line
 tall, and each field passes `onTable` so it's borderless and blends into the grid. Practical cell fields
 are the compact ones — `Text`, `Number`, `Currency`, `Select`, `SearchableSelect`, `Date`, `Phone`,
 `Checkbox`, `SwitchBox`; wide fields (`RichText`, `Signature`, `File`) work but aren't suited to a cell.
+`FormBuilder.Phone` collapses to a **plain number input** in a cell — two controls in one cell is not a
+table column, so add a separate column (e.g. a `FormBuilder.Select` of dial codes) if you need the
+country code.
 
 ```tsx
 <FormBuilder.Table
@@ -158,8 +167,9 @@ clickable. Multi-select is also available as `.MultiSelect` / `.Tags` (a tag-chi
 renders like any other field — the `label` sits in the normal label column — and the box holds
 an optional inline `subLabel`, a vertical divider, and the switch.
 
-`FormBuilder.Section` (props `title`, `color`, `icon`) groups fields in a Glare
-`SectionBlock`. `FormBuilder.Submit` is a loading-aware submit button. It
+`FormBuilder.Section` (props `title`, `color`, `icon`, `action`, `variant`) groups fields in a Glare
+`SectionBlock`. `action` puts buttons on the title row; `variant="Table"` switches to the
+full-bleed table shell (what `FormBuilder.Table` uses internally). `FormBuilder.Submit` is a loading-aware submit button. It
 **auto-associates with the enclosing form** (via context), so it submits even when placed in a
 header / action bar that renders _outside_ the `<form>` — no manual `form={id}` wiring.
 
@@ -226,6 +236,9 @@ automatically.
 > [FormRenderer](./form-renderer.md) (pass `fieldDirection="vertical"` to the
 > form), or use `FormRenderer` with `display="drawer"`.
 
+> Building a **detail page** with a sidebar of tabs (not a form)? That lives on `FormRenderer`
+> (`FormRenderer.Sidebar` / `.Tab`) — see the FormRenderer docs. `FormBuilder` itself stays form-only.
+
 ## Calculation panel
 
 To show computed totals **beside** the form, render a [FormSummary](./form-summary.md)

package/docs/components/form-renderer.md

@@ -16,6 +16,10 @@ takes care of the surrounding concerns:
 - the **absolute title header** + action bar (page display),
 - **vertical field layout** inside a drawer.
 
+FormRenderer has **two modes**: a **form** (author fields as children, as below), or a display-only
+**detail page** — give it `FormRenderer.Sidebar` + `FormRenderer.Tab` children instead of fields and the
+sidebar swaps `FormBuilder.Section` panels (no `<form>`, no submit — see [Detail tabs](#detail-tabs-sidebar)).
+
 FormRenderer never manufactures a Submit — **you compose the Save and hand it to `actions`**.
 It renders in the form's header action pill (page) or the drawer header (drawer), and a bare
 `<FormBuilder.Submit>` auto-targets this form (even though the header sits outside the `<form>`).
@@ -60,7 +64,7 @@ import { FormBuilder } from "@/components/FormBuilder";
 | Prop                                                           | Type                          | Notes                                                                                                                                                                                                                                                                            |
 | -------------------------------------------------------------- | ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `children`                                                     | `ReactNode`                   | The form body — `FormBuilder.Section` / field / `FormBuilder.Stepper` JSX.                                                                                                                                                                                                       |
-| `onSubmit` / `onInvalid`                                       | fns                           | Submit / validation-fail callbacks.                                                                                                                                                                                                                                              |
+| `onSubmit?` / `onInvalid?`                                     | fns                           | Submit / validation-fail callbacks. Optional — a detail-tabs view has no form, so omit them there.                                                                                                                                                                               |
 | `resolver`                                                     | `Resolver`                    | Any react-hook-form resolver, e.g. `zodResolver(schema)`.                                                                                                                                                                                                                        |
 | `defaultValues` / `values`                                     | `DefaultValues` / `T`         | Initial values; `values` re-syncs on change (edit).                                                                                                                                                                                                                              |
 | `loading` / `resetOnSuccess`                                   | `boolean`                     | Forwarded to `FormBuilder`.                                                                                                                                                                                                                                                      |
@@ -119,6 +123,57 @@ error overrides it to red. You still pass just the Submit; the nav is wired for
 </FormRenderer>
 ```
 
+## Detail tabs (sidebar)
+
+Give FormRenderer `FormRenderer.Sidebar` + `FormRenderer.Tab` children (instead of fields) and it
+switches to a **display-only detail page**: a left **sidebar** where each item swaps in its matching
+tab panel — no `<form>`, no submit. The sidebar sits **where a stepper's rail would**, and only the
+active panel shows (built on the same Radix Tabs primitive shadcn uses, so it's keyboard-accessible).
+Pair it with `header` (`variant="detail"` → a "View" badge) + `actions` (Print / Approve / …).
+
+Each `Tab` holds read-only `FormBuilder.Section` blocks; `FormRenderer.Grid` + `FormRenderer.Row` lay
+out the label/value display cells (the display counterpart of form fields).
+
+```tsx
+<FormRenderer
+  header={{ title: "Order DE-344", variant: "detail" }}
+  actions={<Button variant="BorderStyle">Print</Button>}
+>
+  {/* The rail — one Item per tab, tied to a Tab by `value`. */}
+  <FormRenderer.Sidebar>
+    <FormRenderer.Sidebar.Item value="overview" icon={<i className="ri-layout-grid-line" />}>
+      Overview
+    </FormRenderer.Sidebar.Item>
+    <FormRenderer.Sidebar.Item value="items" icon={<i className="ri-table-line" />}>
+      Items Table
+    </FormRenderer.Sidebar.Item>
+  </FormRenderer.Sidebar>
+
+  {/* One panel per tab — read-only Section blocks. */}
+  <FormRenderer.Tab value="overview">
+    <FormBuilder.Section title="Main Information" color="Blue">
+      <FormRenderer.Grid>
+        <FormRenderer.Row label="PO Number" value="PO-000123" />
+        <FormRenderer.Row label="Status" value={<Badge label="Submitted" color="yellow" />} />
+      </FormRenderer.Grid>
+    </FormBuilder.Section>
+  </FormRenderer.Tab>
+
+  <FormRenderer.Tab value="items">…</FormRenderer.Tab>
+</FormRenderer>
+```
+
+| Component      | Props                      | Renders                                                            |
+| -------------- | -------------------------- | ------------------------------------------------------------------ |
+| `Sidebar`      | `children`                 | The tab rail (a Radix `Tabs.List`), fixed at the stepper's place.  |
+| `Sidebar.Item` | `value`, `icon?`, children | A rail nav row (a `Tabs.Trigger`); the active one is a black pill. |
+| `Tab`          | `value`, children          | A content panel (a `Tabs.Content`) shown when its tab is active.   |
+| `Grid`         | `columns?` (1–3), children | A padded grid of display `Row`s (default 2 columns).               |
+| `Row`          | `label`, `value`           | A read-only label/value display cell.                              |
+
+The first `Tab` is active by default. Only the active panel is visible; the rail stays fixed while the
+content column scrolls.
+
 ## Summary panel
 
 Pass a hoisted `useForm` as `form` and a `FormSummary` as `summary` — FormRenderer binds

package/docs/components/section-block.md

@@ -59,6 +59,9 @@ export function Example() {
 |------|------|---------|-------------|
 | `color` | `SectionColor` | `"Blue"` | Color of the title badge. One of `Blue`, `Yellow`, `Green`, `Red`, `Orange`, `Purple`, `Pink`, `Gray`. |
 | `title` | `ReactNode` | — | Title rendered inside the colored badge. Optional — when omitted, the header is hidden entirely. Accepts any ReactNode (string, JSX with icons, links, etc.). |
+| `icon` | `ReactNode` | — | Rendered inside the badge, to the left of `title`. |
+| `action` | `ReactNode` | — | Right-aligned content on the title row — typically action buttons. |
+| `variant` | `SectionVariant` | `"Default"` | `"Default"` is the padded form card. `"Table"` is the full-bleed table shell: no body padding, a rule under the header, no bottom padding, and the card clipped to its radius. See [Table Variant](#table-variant). |
 | `containerClassName` | `string` | — | Class name applied to the outer container (alongside `className`). |
 | `headerClassName` | `string` | — | Class name applied to the header wrapper around the title badge. |
 | `bodyClassName` | `string` | — | Class name applied to the body wrapper holding `children`. |
@@ -79,10 +82,15 @@ export type SectionColor =
   | "Pink"
   | "Gray";
 
+export type SectionVariant = "Default" | "Table";
+
 export interface SectionBlockProps
   extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
   color?: SectionColor;
+  variant?: SectionVariant;
   title?: ReactNode;
+  icon?: ReactNode;
+  action?: ReactNode;
   containerClassName?: string;
   headerClassName?: string;
   bodyClassName?: string;
@@ -362,6 +370,74 @@ function RowDivider() {
 }
 ```
 
+### Table Variant
+
+`variant="Table"` swaps the padded form body for the full-bleed table shell: the body loses
+its `px-[42px]` gutter, gains a rule under the header, and the card is clipped to its 16px
+radius with no bottom padding — so an end-action row meets the card edge.
+
+The layout has three stacked parts, and the order matters. Only the **scroller** scrolls
+horizontally; the header actions above it and the end-action below it stay put, which is
+what keeps `Add New` reachable on a wide table.
+
+```tsx
+import { SectionBlock } from "@/components/SectionBlock";
+import { Button } from "@/components/Button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableEndAction,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableScroller,
+} from "@/components/Table";
+
+<SectionBlock
+  variant="Table"
+  color="Purple"
+  title="Items Table"
+  icon={<i className="ri-box-3-line text-[18px]" />}
+  action={
+    <>
+      <Button type="button" size="M" variant="BorderStyle" disabled>
+        Delete Row
+      </Button>
+      <Button type="button" size="M" variant="BluColStyle">
+        Add New
+      </Button>
+    </>
+  }
+>
+  <TableScroller>
+    <Table className="min-w-full">
+      <TableHeader>
+        <TableRow>
+          <TableHead style={{ width: 200 }}>Items</TableHead>
+          <TableHead style={{ width: 200 }}>Label</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell minWidth={0}>Product name</TableCell>
+          <TableCell minWidth={0}>Label</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  </TableScroller>
+
+  <TableEndAction>
+    <i className="ri-add-line" />
+    Add New
+  </TableEndAction>
+</SectionBlock>
+```
+
+For a table that edits form values, don't hand-compose this — use
+[`FormBuilder.Table`](./form-builder.md#formbuildertable), which renders exactly this shell
+and wires rows to `react-hook-form`.
+
 ### Custom Layout (override defaults)
 
 Use `containerClassName`, `headerClassName`, and `bodyClassName` to override the built-in spacing and width without losing the title/body structure.
@@ -384,7 +460,7 @@ Use `containerClassName`, `headerClassName`, and `bodyClassName` to override the
 - **Color coding**: Use distinct colors to help users scan a page of multiple sections (e.g., Blue for primary forms, Yellow for warnings, Red for destructive zones).
 - **No-title sections**: Drop the `title` prop entirely when the section's purpose is obvious from context — keeps the body padding without the visual weight of a header.
 - **Composing with form fields**: `SectionBlock` does not impose any inner layout — pair it with helpers like the `FieldRow` pattern above, or with `InputField`, `Form`, or `FieldSection` for more structured forms.
-- **Default width**: The component ships with `w-[1100px]`. Override via `containerClassName="w-full"` (or any specific width) for narrower containers.
+- **Width**: The component is `w-full` — it fills its parent. Constrain it from the outside, or with `containerClassName="max-w-[1100px]"`.
 
 ## Accessibility
 
@@ -395,7 +471,7 @@ Use `containerClassName`, `headerClassName`, and `bodyClassName` to override the
 
 | Issue | Fix |
 |-------|-----|
-| Card overflows on small screens | Default width is `w-[1100px]`. Override with `containerClassName="w-full"` or a smaller fixed width. |
+| Card overflows on small screens | The card is `w-full`; the overflow is coming from its content. Give the content `min-w-0`, or cap the card with `containerClassName="max-w-[…]"`. |
 | Title not showing | The `title` prop is optional — omitting it hides the entire header. Pass any non-null `ReactNode` to render it. |
 | Badge color looks wrong | `color` only accepts the predefined `SectionColor` values. For custom badge colors, override via `headerClassName` and a custom child node. |
 | Need a different background | The body uses `bg-background-presentation-form-base`. Override via `containerClassName` (your class wins via `cn()` merging). |

package/docs/components/table.md

@@ -386,18 +386,41 @@ function ResizableTable() {
 | `disabled` | `boolean` | `false` | Disables interactions |
 | `sortType` | `'asc' \| 'desc' \| undefined` | - | Sort indicator |
 | `onSort` | `() => void` | - | Sort handler |
+| `sortLabel` | `string` | - | Column name for the sort button's accessible label |
+| `onResize` | `(width: number) => void` | - | Fires while the column is drag-resized. Passing it makes the width **controlled** — you own the value and feed it back via `style.width`. Required whenever the table needs a definite width (`table-layout: fixed`), since only the owner of every column width can total them. Omit for uncontrolled resizing. |
 | `isDummy` | `boolean` | `false` | Non-interactive header |
-| `className` | `string` | - | Additional CSS classes |
+| `className` / `style` | `string` / `CSSProperties` | - | Applied to the `<th>` — this is how you size a column (`style={{ width: 200 }}`) |
+| `contentClassName` | `string` | - | Classes for the inner layout box (the flex row holding the label and sort toggle). Use it for typography or colour; `className` styles the `<th>` itself. |
+
+**Every** prop you pass — `className`, `style`, `aria-*`, `role`, `tabIndex` and event
+handlers alike — lands on the `<th>`. They deliberately share one element: libraries like
+dnd-kit hand back accessibility attributes and event listeners as a matched pair, and
+splitting them across two nodes leaves the focusable element without its handlers. Reach the
+inner layout box with `contentClassName`.
 
 ### TableCell Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `isDummy` | `boolean` | `false` | Non-interactive cell |
+| `minWidth` | `number` | `200` | Minimum width of the content box, in px. Pass `0` when the column width is driven by the caller — otherwise this floor silently overrides any narrower column. |
+| `fade` | `boolean` | `true` | Whether the cell **crops** its content and fades the last 25% of it, signalling text clipped by the column width. Set `false` for cells holding a **control**: the fade washes out whatever sits at the right edge (a Select's chevron, a date button), and the crop — the content box hugs the control exactly — would clip every side of the control's hover/focus drop shadow. `isDummy` cells never fade. |
 | `childrenClassName` | `string` | - | Classes for content wrapper |
 | `className` | `string` | - | Additional CSS classes |
 | `children` | `React.ReactNode` | - | Cell content |
 
+### TableScroller Props
+
+Horizontal scroll container for a table, with the thin design-system scrollbar (4px track
+that thickens and turns blue on hover). Accepts any `div` props. Keep header actions and
+`TableEndAction` **outside** it so they don't scroll away on a wide table.
+
+### TableEndAction Props
+
+The full-width action bar that sits **below** a table — e.g. `＋ Add New`. A `<button>`, not
+a `<tr>`, so it is a sibling of `TableScroller` and stays put while the columns scroll. Accepts
+any `button` props. Use `TableFooterButton` instead when the action should scroll with the grid.
+
 ### TableCheckbox Props
 
 | Prop | Type | Default | Description |
@@ -434,15 +457,24 @@ interface TableHeadProps extends ThHTMLAttributes<HTMLTableCellElement> {
   disabled?: boolean
   sortType?: 'asc' | 'desc' | undefined
   onSort?: () => void
+  sortLabel?: string
+  onResize?: (width: number) => void
+  contentClassName?: string
   isDummy?: boolean
 }
 
 // TableCell types
 interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
   isDummy?: boolean
+  minWidth?: number
+  fade?: boolean
   childrenClassName?: string
 }
 
+// TableScroller / TableEndAction types
+type TableScrollerProps = HTMLAttributes<HTMLDivElement>
+type TableEndActionProps = ButtonHTMLAttributes<HTMLButtonElement>
+
 // TableCheckbox types
 interface TableCheckboxProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   id: string
@@ -795,7 +827,7 @@ Dates and amounts wrap awkwardly when the column is narrow. Add `whitespace-nowr
 
 ### `TableCell` force-wraps children — use `childrenClassName` to override
 
-`TableCell` unconditionally wraps children in an inner `<div>` with `flex justify-start items-center gap-1 min-w-[200px] overflow-hidden` plus a fade-out gradient mask. Three common breakages:
+`TableCell` unconditionally wraps children in an inner `<div>` with `flex justify-start items-center gap-1`, a `min-width` of 200px, `overflow-hidden`, and a fade-out gradient mask. Three common breakages:
 
 1. **Empty-state rows don't center.** A `flex flex-col items-center` empty state ends up flush left because the outer wrapper's `justify-start` already decided alignment.
 2. **Multi-line content is clipped** by `overflow-hidden` + the gradient mask.
@@ -807,7 +839,9 @@ Dates and amounts wrap awkwardly when the column is narrow. Add `whitespace-nowr
 <TableRow>
   <TableCell
     colSpan={7}
-    childrenClassName="flex flex-col items-center justify-center gap-3 py-12 w-full min-w-0 text-content-presentation-global-secondary"
+    minWidth={0}
+    fade={false}
+    childrenClassName="flex flex-col items-center justify-center gap-3 py-12 w-full text-content-presentation-global-secondary"
   >
     <i className="ri-inbox-line text-4xl opacity-60" />
     <p className="typography-body-medium-regular">No data</p>
@@ -816,11 +850,14 @@ Dates and amounts wrap awkwardly when the column is narrow. Add `whitespace-nowr
 </TableRow>
 ```
 
-Key overrides on `childrenClassName`:
+Key overrides:
 
-- `flex flex-col` overrides the default `flex-row`
-- `items-center justify-center` overrides `justify-start`
-- `w-full min-w-0` overrides the hardcoded `min-w-[200px]`
+- `flex flex-col` on `childrenClassName` overrides the default `flex-row`
+- `items-center justify-center` on `childrenClassName` overrides `justify-start`
+- **`minWidth={0}`** clears the 200px floor. It is an inline style, so a class such as
+  `min-w-0` on `childrenClassName` cannot beat it — use the prop.
+- **`fade={false}`** drops both the gradient mask and the `overflow-hidden` that clips
+  multi-line content.
 
 ## Accessibility
 

package/docs/how-to/forms-with-form-builder.md

@@ -116,7 +116,9 @@ export function ItemForm({
 ```
 
 `FormBuilder.Section` groups fields in a `SectionBlock` (`color` is one of `Blue`, `Yellow`,
-`Green`, `Red`, `Orange`, `Purple`, `Pink`, `Gray`). Pass the Save via `actions` — a
+`Green`, `Red`, `Orange`, `Purple`, `Pink`, `Gray`). It also takes `icon`, `action`
+(right-aligned buttons on the title row) and `variant` — `variant="Table"` switches to the
+full-bleed table shell that `FormBuilder.Table` uses internally. Pass the Save via `actions` — a
 `FormBuilder.Submit`, which is loading-aware; it renders in the header action pill. (With raw
 `FormBuilder`, put the same `FormBuilder.Submit` in a `FormBuilder.Header`.)
 
@@ -140,7 +142,7 @@ Every field, its underlying control, and the value your `onSubmit` receives:
 | `.Otp` (`length`)                                                | `string`                                                       |
 | `.Slider` (`min`, `max`, `step`, `range`, `suffix`)              | `number` (or `[number, number]` with `range`)                  |
 | `.Color` (`presets`, `alpha`)                                    | hex `string`                                                   |
-| `.Phone` (`defaultCountry`, defaults to `+964`)                  | `string` (`"+<dial> <number>"`)                                |
+| `.Phone` (`defaultCountry`, defaults to `+964`)                  | `string` (`"+<dial> <number>"`) — collapses to a plain number input inside a `.Table` cell, where `defaultCountry` does not apply |
 | `.Date`                                                          | `Date`                                                         |
 | `.DateRange`                                                     | `{ from, to }`                                                 |
 | `.DateMultiple`                                                  | `Date[]`                                                       |
@@ -391,6 +393,60 @@ drawer's tray, beside the form:
 
 ---
 
+## 8. A detail (view) page — sidebar tabs, not a form
+
+Sometimes you want to **display** a record, not edit it. Give `FormRenderer` `FormRenderer.Sidebar`
+
+- `FormRenderer.Tab` children (instead of fields) and it switches to a display-only detail page: a
+  left **sidebar** where each item swaps in its matching tab panel — no `<form>`, no submit. The
+  sidebar sits where a stepper's rail would; only the active panel shows.
+
+**Every tab's content is `FormBuilder.Section` blocks.** Inside a Section, use the default
+`FormRenderer.Grid` + `FormRenderer.Row` display cells (the read-only counterpart of form fields), or
+render **your own component** — anything goes inside a Section.
+
+```tsx
+<FormRenderer
+  header={{ title: "Order DE-344", variant: "detail" }} // "View" badge
+  actions={<Button variant="BorderStyle">Print</Button>}
+>
+  {/* Rail — each Item's `value` ties to a Tab. */}
+  <FormRenderer.Sidebar>
+    <FormRenderer.Sidebar.Item value="overview" icon={<i className="ri-layout-grid-line" />}>
+      Overview
+    </FormRenderer.Sidebar.Item>
+    <FormRenderer.Sidebar.Item value="activity" icon={<i className="ri-pulse-line" />}>
+      Activity log
+    </FormRenderer.Sidebar.Item>
+  </FormRenderer.Sidebar>
+
+  {/* Default display cells */}
+  <FormRenderer.Tab value="overview">
+    <FormBuilder.Section title="Main Information" color="Blue">
+      <FormRenderer.Grid columns={2}>
+        <FormRenderer.Row label="PO Number" value={record.poNumber} />
+        <FormRenderer.Row label="Status" value={<Badge label="Submitted" color="yellow" />} />
+      </FormRenderer.Grid>
+    </FormBuilder.Section>
+  </FormRenderer.Tab>
+
+  {/* Or bring your own component — still inside a Section */}
+  <FormRenderer.Tab value="activity">
+    <FormBuilder.Section title="Activity log" color="Green">
+      <YourTimeline items={record.activity} />
+    </FormBuilder.Section>
+  </FormRenderer.Tab>
+</FormRenderer>
+```
+
+`FormRenderer.Grid` takes `columns` (1–3, default 2) and spans the full section width; `FormRenderer.Row`
+takes `label` + `value` (any node). The first `Tab` is active by default.
+
+> Generating one? Call the `create-form` tool with `layout="detail"` — it returns this exact wiring
+> with your fields pre-filled as display rows.
+
+---
+
 ## Gotchas
 
 - **Hoisting `useForm` disables the remount-`key` reset.** Once the form instance lives in

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "torch-glare",
-  "version": "2.4.3",
+  "version": "2.4.5",
   "type": "module",
   "license": "MIT",
   "description": "A copy-in React component library (TypeScript + Radix UI + Tailwind CSS). Its CLI copies component source directly into your project — you own the code.",