torch-glare 2.4.2 → 2.4.4

package/dist/src/shared/tailwindInit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tailwindInit.d.ts","sourceRoot":"","sources":["../../../cli/src/shared/tailwindInit.ts"],"names":[],"mappings":"AAIA,wBAAgB,YAAY,IAAI,IAAI,CAUnC"}
+{"version":3,"file":"tailwindInit.d.ts","sourceRoot":"","sources":["../../../cli/src/shared/tailwindInit.ts"],"names":[],"mappings":"AAIA,wBAAgB,YAAY,IAAI,IAAI,CAanC"}

package/dist/src/shared/tailwindInit.js

@@ -11,6 +11,9 @@ export function tailwindInit() {
         LessThanV4 ? "mapping-color-system" : "mapping-color-system-v4",
         "glare-torch-mode",
     ];
+    if (LessThanV4) {
+        dependencies.push("@tailwindcss/container-queries");
+    }
     installDependencies(dependencies);
 }
 /**

package/dist/src/shared/tailwindInit.js.map

@@ -1 +1 @@
-{"version":3,"file":"tailwindInit.js","sourceRoot":"","sources":["../../../cli/src/shared/tailwindInit.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tailwindInit.js","sourceRoot":"","sources":["../../../cli/src/shared/tailwindInit.ts"],"names":[],"mappings":"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"}

package/docs/components/form-builder.md

@@ -1,29 +1,17 @@
 ---
 title: FormBuilder
-description: A compound, composition-based form. Author forms as JSX children (FormBuilder.Text, FormBuilder.Select, …) with steps-as-components, a drawer wrapper, edit + read-only view modes, and any react-hook-form resolver.
+description: A compound, composition-based form. Author forms as JSX children (FormBuilder.Text, FormBuilder.Select, …) with steps-as-components, a drawer wrapper, and any react-hook-form resolver.
 component: true
 group: Forms
 keywords:
-  [
-    form-builder,
-    form,
-    compound,
-    composition,
-    react-hook-form,
-    resolver,
-    stepper,
-    drawer,
-    fields,
-    view-mode,
-  ]
+  [form-builder, form, compound, composition, react-hook-form, resolver, stepper, drawer, fields]
 ---
 
 # FormBuilder
 
 A **compound, composition-based** form. You author a form as JSX children — each
 field is a `FormBuilder.*` component wired to [react-hook-form](https://react-hook-form.com/)
-for you. Steps are components, the drawer is a wrapper, and the same markup renders
-editable or read-only.
+for you. Steps are components and the drawer is a wrapper.
 
 ```tsx
 <FormBuilder onSubmit={save} resolver={zodResolver(schema)} defaultValues={d}>
@@ -63,7 +51,6 @@ import { FormBuilder } from "@/components/FormBuilder";
 | `resolver`       | `Resolver`                          | Any react-hook-form resolver, e.g. `zodResolver(schema)`.                                                                  |
 | `defaultValues`  | `DefaultValues`                     | Initial values (create).                                                                                                   |
 | `values`         | `T`                                 | Controlled values (edit) — the form re-syncs when this changes.                                                            |
-| `mode`           | `'edit' \| 'view'`                  | `'view'` renders every field read-only.                                                                                    |
 | `loading`        | `boolean`                           | Submit shows a spinner; inputs disable.                                                                                    |
 | `fieldDirection` | `'horizontal' \| 'vertical'`        | Row layout (auto-vertical inside a drawer).                                                                                |
 | `resetOnSuccess` | `boolean`                           | Reset to defaults after a successful submit.                                                                               |
@@ -125,7 +112,7 @@ Each column pairs a `header` with a `cell(rowName, index)` renderer — name the
 `${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
 **checkbox selection** (+ select-all), **drag-drop reordering**, and — per column, via `sortKey` — a
-sort toggle in the header. Everything hides in `mode="view"`, where cells render read-only. Cells render
+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`,
@@ -172,7 +159,7 @@ renders like any other field — the `label` sits in the normal label column —
 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 (hidden in view mode). It
+`SectionBlock`. `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.
 
@@ -197,10 +184,9 @@ child of `<FormBuilder>`; the root then switches to the scroll-shell layout.
 ```
 
 - `title` — plain text (uppercased). `label` — badge text (defaults from `variant`).
-- `variant` — `"new" | "edit" | "detail"` (badge color); defaults from `mode`
-  (view → `detail`). `children` are the action buttons; `FormBuilder.Submit` submits
-  the form (it auto-associates with it, even though the header sits outside `<form>`)
-  and auto-hides in view mode.
+- `variant` — `"new" | "edit" | "detail"` (badge color; default `"new"`). `children` are
+  the action buttons; `FormBuilder.Submit` submits the form (it auto-associates with it, even
+  though the header sits outside `<form>`).
 
 ## Stepper (steps are components)
 
@@ -209,9 +195,15 @@ Wrap steps in `FormBuilder.Stepper`; each `FormBuilder.Step` holds a step's fiel
 regardless of which step is showing; the stepper only toggles _visibility_.
 **Navigation is the step buttons themselves**: click a step to go there. Backward is
 free; clicking forward validates the steps in between and stops at the first one with
-errors (shown with a red indicator). Put the **Submit** in the `FormBuilder.Header` (or the
+errors (shown with a red indicator). A step that **passes validation stays checked** even
+after you navigate back to it. Put the **Submit** in the `FormBuilder.Header` (or the
 `FormRenderer` `actions`) — it submits every step's fields at once, from any step.
 
+`FormBuilder.Back` / `FormBuilder.Next` are **chevron step-nav buttons** (previous / next,
+disabled at the ends; `Next` validates the current step first). Place them in a
+`FormBuilder.Header`, or use `FormRenderer` — it prepends them before your Submit for a stepper
+automatically.
+
 ```tsx
 <FormBuilder onSubmit={save} resolver={r} defaultValues={d}>
   <FormBuilder.Header title="Item" variant="new">
@@ -234,6 +226,9 @@ errors (shown with a red indicator). Put the **Submit** in the `FormBuilder.Head
 > [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)
@@ -251,15 +246,13 @@ const form = useForm({ resolver: r, defaultValues: d })
 `form` makes FormBuilder use an existing react-hook-form instance instead of creating its
 own — that's what lets something outside the form read the same live values.
 
-## Edit & view modes
+## Editing a record
 
-- **Edit**: pass `values` (not just `defaultValues`); the form repopulates when the
-  data loads. Use a remount `key` so initial-only inputs (date, rich text) re-seed.
-- **View**: `mode="view"` renders the same children read-only (label + formatted value)
-  with no submit — one markup drives both edit and detail views.
+Pass `values` (not just `defaultValues`); the form repopulates when the data loads. Use a
+remount `key` so initial-only inputs (date, rich text) re-seed.
 
 ```tsx
-<FormBuilder mode="view" values={entity} onSubmit={() => {}} defaultValues={d}>
+<FormBuilder key={entity.id} values={entity} onSubmit={save} resolver={r} defaultValues={d}>
   …the same fields…
 </FormBuilder>
 ```

package/docs/components/form-renderer.md

@@ -3,7 +3,7 @@ title: FormRenderer
 description: A thin wrapper around FormBuilder. Author fields as JSX children; FormRenderer owns page-vs-drawer display, the absolute title header, and drawer field layout. You compose the Save and pass it via the actions prop.
 component: true
 group: Forms
-keywords: [form-renderer, form, drawer, header, display, view-mode, react-hook-form]
+keywords: [form-renderer, form, drawer, header, display, actions, react-hook-form]
 ---
 
 # FormRenderer
@@ -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,10 +64,9 @@ 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).                                                                                                                                                                                                                              |
-| `mode`                                                         | `'edit' \| 'view'`            | `'view'` renders read-only, no Submit.                                                                                                                                                                                                                                           |
 | `loading` / `resetOnSuccess`                                   | `boolean`                     | Forwarded to `FormBuilder`.                                                                                                                                                                                                                                                      |
 | `fieldDirection`                                               | `'horizontal' \| 'vertical'`  | Defaults to vertical inside a drawer.                                                                                                                                                                                                                                            |
 | `form`                                                         | `UseFormReturn<T>`            | A hoisted `useForm` to bind to — pass when a sibling (e.g. a `summary` `FormSummary`) must read the same live values; the caller owns `resolver`/`defaultValues` on it. Omit to let FormRenderer create its own.                                                                 |
@@ -74,22 +77,23 @@ import { FormBuilder } from "@/components/FormBuilder";
 | `id`                                                           | `string`                      | `id` on the underlying `<form>`. Optional — FormRenderer generates and wires one otherwise.                                                                                                                                                                                      |
 | `open` / `onOpenChange` / `title` / `badge` / `onOpenInNewTab` | —                             | Drawer control (when `display="drawer"`). `title` / `badge` are strings that override `header.title` / `header.label`.                                                                                                                                                           |
 
-## Drawer & view
+## Drawer
 
 ```tsx
 // drawer — pass the Save via `actions`; it renders in the drawer header
 <FormRenderer
-  display="drawer" open={open} onOpenChange={setOpen} title="New item" badge="New"
-  onSubmit={save} resolver={r} defaultValues={d}
+  display="drawer"
+  open={open}
+  onOpenChange={setOpen}
+  title="New item"
+  badge="New"
+  onSubmit={save}
+  resolver={r}
+  defaultValues={d}
   actions={<FormBuilder.Submit>Save</FormBuilder.Submit>}
 >
   {fields}
 </FormRenderer>
-
-// read-only view — same children, omit `actions` (a view has no Save)
-<FormRenderer mode="view" values={entity} onSubmit={() => {}}>
-  {fields}
-</FormRenderer>
 ```
 
 ## Stepper
@@ -97,6 +101,12 @@ import { FormBuilder } from "@/components/FormBuilder";
 Drop a `FormBuilder.Stepper` in as the child. The Save lives in the header `actions` and
 submits every step's registered fields at once (steps stay mounted, so the whole form is live).
 
+For a stepper, FormRenderer **automatically prepends chevron Back/Next nav + a divider** before
+your Submit, so the action bar reads `[◀] [▶] │ Save`. Back is disabled on the first step; Next
+validates the current step, then advances (disabled on the last step). A step that passes
+validation **stays checked** in the rail — even after you navigate back — while a live validation
+error overrides it to red. You still pass just the Submit; the nav is wired for you:
+
 ```tsx
 <FormRenderer
   onSubmit={save}
@@ -113,6 +123,57 @@ submits every step's registered fields at once (steps stay mounted, so the whole
 </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/searchable-select.md

@@ -168,70 +168,73 @@ function ArabicPicker({ options, value, onValueChange }) {
 
 ### SearchableSelect
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `options` | `SearchableSelectOption[]` | Required | The list of selectable options. In server mode (`filterClientSide={false}`) these are rendered as-is. |
-| `value` | `string \| null` | - | Controlled selected value. The matching option's label is shown as solid text in the input. |
-| `onValueChange` | `(value: string, option: SearchableSelectOption) => void` | - | Called when an option is selected. Receives the value and the full option object. |
-| `placeholder` | `string` | `'Search…'` | Placeholder text for the search input. |
-| `size` | `'XS' \| 'S' \| 'M'` | `'M'` | Field size. |
-| `variant` | `'PresentationStyle'` | `'PresentationStyle'` | Visual style variant for the field and dropdown surface. |
-| `icon` | `ReactNode` | - | Optional leading icon rendered inside the field. |
-| `theme` | `'dark' \| 'light' \| 'default'` | - | Theme variant, applied via `data-theme`. |
-| `dir` | `string` | - | Text direction (e.g. `'rtl'`) for the field and dropdown. |
-| `className` | `string` | - | Additional CSS classes for the field group. |
-| `filterClientSide` | `boolean` | `true` | When `true`, filters `options` locally by label. Set `false` for server-side search — `options` are rendered as-is and refetched via `onSearchChange`. |
-| `onSearchChange` | `(query: string) => void` | - | Called (debounced) with the trimmed query as the user types. Refetch your data here for server-side search. |
-| `searchDebounceMs` | `number` | `300` | Debounce delay (ms) before `onSearchChange` fires. |
-| `hasMore` | `boolean` | `false` | Whether more pages are available; gates the infinite-scroll loader. |
-| `loading` | `boolean` | `false` | Whether a fetch is in flight; shows a loading row and blocks `onLoadMore`. |
-| `onLoadMore` | `() => void` | - | Called when the scroll viewport nears the bottom and `hasMore && !loading`. |
-| `maxVisibleItems` | `number` | `5` | Maximum rows visible before the list scrolls internally. |
+| Prop               | Type                                                      | Default               | Description                                                                                                                                            |
+| ------------------ | --------------------------------------------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `options`          | `SearchableSelectOption[]`                                | Required              | The list of selectable options. In server mode (`filterClientSide={false}`) these are rendered as-is.                                                  |
+| `value`            | `string \| null`                                          | -                     | Controlled selected value. The matching option's label is shown as solid text in the input.                                                            |
+| `onValueChange`    | `(value: string, option: SearchableSelectOption) => void` | -                     | Called when an option is selected. Receives the value and the full option object.                                                                      |
+| `placeholder`      | `string`                                                  | `'Search…'`           | Placeholder text for the search input.                                                                                                                 |
+| `size`             | `'XS' \| 'S' \| 'M'`                                      | `'M'`                 | Field size.                                                                                                                                            |
+| `variant`          | `'PresentationStyle'`                                     | `'PresentationStyle'` | Visual style variant for the field and dropdown surface.                                                                                               |
+| `icon`             | `ReactNode`                                               | -                     | Optional leading icon rendered inside the field.                                                                                                       |
+| `theme`            | `'dark' \| 'light' \| 'default'`                          | -                     | Theme variant, applied via `data-theme`.                                                                                                               |
+| `dir`              | `string`                                                  | -                     | Text direction (e.g. `'rtl'`) for the field and dropdown.                                                                                              |
+| `className`        | `string`                                                  | -                     | Additional CSS classes for the field group.                                                                                                            |
+| `filterClientSide` | `boolean`                                                 | `true`                | When `true`, filters `options` locally by label. Set `false` for server-side search — `options` are rendered as-is and refetched via `onSearchChange`. |
+| `onSearchChange`   | `(query: string) => void`                                 | -                     | Called (debounced) with the trimmed query as the user types. Refetch your data here for server-side search.                                            |
+| `searchDebounceMs` | `number`                                                  | `300`                 | Debounce delay (ms) before `onSearchChange` fires.                                                                                                     |
+| `hasMore`          | `boolean`                                                 | `false`               | Whether more pages are available; gates the infinite-scroll loader.                                                                                    |
+| `loading`          | `boolean`                                                 | `false`               | Whether a fetch is in flight; shows a loading row and blocks `onLoadMore`.                                                                             |
+| `onLoadMore`       | `() => void`                                              | -                     | Called when the scroll viewport nears the bottom and `hasMore && !loading`.                                                                            |
+| `maxVisibleItems`  | `number`                                                  | `5`                   | Maximum rows visible before the list scrolls internally.                                                                                               |
 
 ### SearchableSelectOption
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `string` | Required | Unique value for the option; matched against the `value` prop. |
-| `label` | `string` | Required | Display text; also used for client-side label filtering. |
-| `icon` | `ReactNode` | - | Optional leading icon rendered in the row. |
+| Prop         | Type        | Default  | Description                                                                                                                                                                      |
+| ------------ | ----------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `value`      | `string`    | Required | Unique value for the option; matched against the `value` prop.                                                                                                                   |
+| `label`      | `string`    | Required | Display text; also the default target for client-side filtering.                                                                                                                 |
+| `icon`       | `ReactNode` | -        | Optional leading icon rendered in the row.                                                                                                                                       |
+| `searchText` | `string`    | `label`  | Text used for client-side filtering. Set it to match on a **subset** of the label — e.g. a country name when the label also shows a dial code, so typing the dial doesn't match. |
 
 ## TypeScript
 
 ### Type Definitions
 
 ```typescript
-import { ReactNode } from 'react'
+import { ReactNode } from "react";
 
 export interface SearchableSelectOption {
-  value: string
-  label: string
-  icon?: ReactNode
+  value: string;
+  label: string;
+  icon?: ReactNode;
+  /** Text used for client-side filtering. Defaults to `label`. */
+  searchText?: string;
 }
 
 interface SearchableSelectProps {
-  options: SearchableSelectOption[]
-  value?: string | null
-  onValueChange?: (value: string, option: SearchableSelectOption) => void
-  placeholder?: string
-  size?: 'XS' | 'S' | 'M'
-  variant?: 'PresentationStyle'
-  icon?: ReactNode
-  theme?: 'dark' | 'light' | 'default'
-  dir?: string
-  className?: string
+  options: SearchableSelectOption[];
+  value?: string | null;
+  onValueChange?: (value: string, option: SearchableSelectOption) => void;
+  placeholder?: string;
+  size?: "XS" | "S" | "M";
+  variant?: "PresentationStyle";
+  icon?: ReactNode;
+  theme?: "dark" | "light" | "default";
+  dir?: string;
+  className?: string;
 
   // Async / backend pagination (all optional; static `options` still work)
-  filterClientSide?: boolean
-  onSearchChange?: (query: string) => void
-  searchDebounceMs?: number
-  hasMore?: boolean
-  loading?: boolean
-  onLoadMore?: () => void
-  maxVisibleItems?: number
+  filterClientSide?: boolean;
+  onSearchChange?: (query: string) => void;
+  searchDebounceMs?: number;
+  hasMore?: boolean;
+  loading?: boolean;
+  onLoadMore?: () => void;
+  maxVisibleItems?: number;
 }
 
-export function SearchableSelect(props: SearchableSelectProps): JSX.Element
+export function SearchableSelect(props: SearchableSelectProps): JSX.Element;
 ```
 
 ## Common Patterns
@@ -340,6 +343,7 @@ function UserPicker() {
 ## Best Practices
 
 1. **Always control `value`** — pass `value` and `onValueChange` so the input can display the selected label.
+
    ```typescript
    <SearchableSelect value={value} onValueChange={setValue} options={options} />
    ```

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

@@ -1,6 +1,6 @@
 ---
 title: Forms with FormBuilder, FormRenderer & FormSummary
-description: The canonical way to build forms in TORCH Glare. Author fields as JSX with FormBuilder, add page/drawer chrome with FormRenderer, and show live computed totals with FormSummary. Covers single, stepper, drawer, edit/view, and a full invoice example combining all three.
+description: The canonical way to build forms in TORCH Glare. Author fields as JSX with FormBuilder, add page/drawer chrome with FormRenderer, and show live computed totals with FormSummary. Covers single, stepper, drawer, editing a record, and a full invoice example combining all three.
 keywords:
   [
     form,
@@ -33,7 +33,7 @@ Three components, layered:
 
 | Component          | Use it for                                                                                                                             | When                                            |
 | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- |
-| **`FormBuilder`**  | The form itself — fields authored as JSX children. Owns react-hook-form, validation, edit/view, sections, steppers.                    | Always. This is the base.                       |
+| **`FormBuilder`**  | The form itself — fields authored as JSX children. Owns react-hook-form, validation, sections, steppers.                               | Always. This is the base.                       |
 | **`FormRenderer`** | Wraps `FormBuilder` to add **chrome**: page-vs-drawer display, the title header, an `actions` slot for the Save, and a `summary` slot. | Real forms — prefer it over raw `FormBuilder`.  |
 | **`FormSummary`**  | A read-only **calculation panel beside the form** — totals that recompute live as the user types.                                      | Invoices, orders, anything with a "conclusion". |
 
@@ -117,9 +117,8 @@ 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
-`FormBuilder.Submit`, which is loading-aware and auto-hides in view mode; it renders in the
-header action pill. (With raw `FormBuilder`, put the same `FormBuilder.Submit` in a
-`FormBuilder.Header`.)
+`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`.)
 
 ### Field types
 
@@ -180,6 +179,11 @@ themselves**: backward is free, clicking forward validates the steps in between
 the first one with errors. The Save is the header `actions` — it submits every step's fields at
 once, from any step.
 
+You pass just the Submit as `actions`; for a stepper, FormRenderer **auto-prepends chevron
+Back/Next controls + a divider** before it (`[◀] [▶] │ Save`). Back is disabled on the first
+step; Next validates then advances (disabled on the last). A step that **passes validation stays
+checked** in the rail even after you navigate back — a live error still shows it red.
+
 ```tsx
 <FormRenderer<Values>
   onSubmit={save}
@@ -206,21 +210,20 @@ once, from any step.
 
 ---
 
-## 4. Edit and read-only view — one markup, both modes
+## 4. Editing a record
 
-- **Edit**: pass `values` (not just `defaultValues`) — the form repopulates when the data
-  loads. Add a remount `key` so initial-only inputs (date, rich text) re-seed.
-- **View**: `mode="view"` renders the same children read-only, with no Submit.
+Pass `values` (not just `defaultValues`) — the form repopulates when the data loads. Add a
+remount `key` so initial-only inputs (date, rich text) re-seed.
 
 ```tsx
 <FormRenderer<Values>
   key={record?.id ?? "new"}
-  mode={mode} // 'edit' | 'view'
   values={record} // arrives async
   onSubmit={save}
   resolver={zodResolver(schema)}
   defaultValues={DEFAULTS}
-  header={{ title: record?.name ?? "New", variant: mode === "view" ? "detail" : "edit" }}
+  header={{ title: record?.name ?? "New", variant: record ? "edit" : "new" }}
+  actions={<FormBuilder.Submit>Save</FormBuilder.Submit>}
 >
   …the same fields…
 </FormRenderer>
@@ -388,6 +391,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/docs/reference/tailwind-plugins.md

@@ -599,7 +599,16 @@ export default {
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      containers: {
+        xs: "320px",
+        sm: "600px",
+        md: "768px",
+        lg: "1024px",
+        xl: "1280px",
+        "2xl": "1536px",
+      },
+    },
   },
   plugins: [
     // Color system (required first)
@@ -612,6 +621,7 @@ export default {
     require('glare-typography'),
 
     // Additional Tailwind plugins
+    require('@tailwindcss/container-queries'),
     require('tailwindcss-animate'),
     require('tailwind-scrollbar-hide'),
   ],

package/docs/tutorials/getting-started.md

@@ -132,10 +132,19 @@ module.exports = {
     theme: {
         extend: {
             colors: mappingVars,
+            containers: {
+                xs: "320px",
+                sm: "600px",
+                md: "768px",
+                lg: "1024px",
+                xl: "1280px",
+                "2xl": "1536px",
+            },
         },
     },
     plugins: [
         plugin,
+        require('@tailwindcss/container-queries'),
         require('tailwindcss-animate'),
         require('tailwind-scrollbar-hide'),
         require('glare-typography'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "torch-glare",
-  "version": "2.4.2",
+  "version": "2.4.4",
   "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.",