torch-glare 2.5.2 → 2.5.3

package/docs/components/data-views/index.md

@@ -188,6 +188,13 @@ Each takes `id`, `label` and `icon` to control how it appears in the switcher, s
 be registered twice with different data. Full props are under
 [API Reference](#api-reference) — one heading per part.
 
+Two things `DataViews.Table` does for you that you would otherwise wire by hand: its column header
+**stays put while the rows scroll under it**, and the view draws **its own border and radius**, so it
+reads as a separated surface like the inbox and tree panels rather than filling the shell edge to
+edge. Long column labels truncate with an ellipsis instead of wrapping the header row onto a second
+line. Inside `DataViews.Tree`, the same table drops that border — the tree's pane already draws one,
+and two would nest a pixel apart.
+
 ### The tree's pane
 
 Pick a node and the pane beside it lists what that node holds. Its header names the selected node

package/docs/components/form-builder.md

@@ -55,7 +55,9 @@ Everything drawn *around* the fields lives in **[FormRenderer](./form-renderer.m
 > author the fields as `FormBuilder.*` children — FormRenderer just wraps them.
 
 `FormBuilder.Submit` is the one non-field part that stays here — see
-[Field components](#field-components) for what it does.
+[Field components](#field-components) for what it does. It renders the **primary action**: the blue
+filled button. There is deliberately no `variant` prop — a form has one primary action, and letting
+each call site pick a style is how that stops being true.
 
 ## Installation
 
@@ -82,7 +84,7 @@ import { FormBuilder } from "@/components/FormBuilder";
 | `defaultValues`  | `DefaultValues`                     | Initial values (create).                                                                                                   |
 | `values`         | `T`                                 | Controlled values (edit) — the form re-syncs when this changes.                                                            |
 | `loading`        | `boolean`                           | Submit shows a spinner; inputs disable.                                                                                    |
-| `fieldDirection` | `'horizontal' \| 'vertical'`        | Row layout (auto-vertical inside a drawer).                                                                                |
+| `fieldDirection` | `'horizontal' \| 'vertical' \| 'flexible'` | Row layout. Unset is responsive; a `FormRenderer` drawer pins `'vertical'`, and `'flexible'` asks for the responsive layout back.                                                                                |
 | `resetOnSuccess` | `boolean`                           | Reset to defaults after a successful submit.                                                                               |
 | `form`           | `UseFormReturn`                     | A hoisted `useForm` to bind to — pass when something outside the form must read the same values.                           |
 | `id`             | `string`                            | Sets the underlying `<form id>`, so a button outside the form can submit it via `form={id}` (e.g. a drawer header's Save). |

package/docs/components/form-renderer.md

@@ -100,7 +100,7 @@ import { FormBuilder } from "@/components/FormBuilder";
 | `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`.                                                                                                                                                                                                                                                      |
-| `fieldDirection`                                               | `'horizontal' \| 'vertical'`  | Defaults to vertical inside a drawer.                                                                                                                                                                                                                                            |
+| `fieldDirection`                                               | `'horizontal' \| 'vertical' \| 'flexible'`  | Unset means responsive: stacked, then label-beside-control once the field row passes the container `md` breakpoint. A drawer defaults to `'vertical'` — pass `'flexible'` there to get the responsive layout back.                                                                                                                                                                                                                                            |
 | `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.                                                                 |
 | `className`                                                    | `string`                      | Lands on FormRenderer's outermost element (page display) — e.g. `"min-h-0 flex-1"` to fill a flex column. Note this is the page frame, not the `<form>`; `FormBuilder`'s own `className` lands on the `<form>` element itself.                                                    |
 | `display`                                                      | `'page' \| 'drawer'`          | `'drawer'` wraps the form in `FormDrawer`.                                                                                                                                                                                                                                       |

package/docs/components/table.md

@@ -363,6 +363,39 @@ function ResizableTable() {
 | `className` | `string` | - | Additional CSS classes |
 | `children` | `React.ReactNode` | - | Header rows |
 
+#### Sticky header
+
+`TableHeader` carries `position: sticky; top: 0`, so a table inside a vertically scrolling container
+can keep its header in view while the rows move under it. Sticky keeps the element in normal flow,
+so it changes nothing in a table that does not scroll.
+
+It needs two things from you.
+
+**Pass `overflow-visible`.** Sticky resolves against the **nearest scrollport**, and `Table` defaults
+to `overflow-hidden` — which makes the table itself a scrollport, so the header pins to a box that
+never scrolls and appears not to stick. Turning that clipping off binds it to your scroller instead.
+
+Only do this when your scroller is `min-w-0` (or otherwise width-constrained). That default clipping
+is also what stops a `w-auto` table wider than its container from pushing the whole page wide, so
+opting out without a constrained scroller trades a sticky header for a horizontal scrollbar.
+
+**Give the header an opaque background** — see below.
+
+```tsx
+{/* `min-w-0` so a wide table scrolls in here rather than widening the layout */}
+<div className="min-w-0 max-h-[400px] overflow-auto">
+  <Table className="w-full overflow-visible">
+    <TableHeader className="bg-background-presentation-form-base">
+      ...
+```
+
+The default header background is translucent, which was fine when nothing ever passed beneath it.
+Once rows scroll under a stuck header they read through it, so give
+the header the opaque colour of whatever surface it sits on — `Table` cannot pick one for you,
+since forcing a surface would recolour every table not on it. `DataViews`' table view is the worked
+example: it paints the surface token as the background colour and re-applies the header tint as a
+`background-image`, which stacks above it, landing on the exact colour the header always had.
+
 ### TableBody Props
 
 | Prop | Type | Default | Description |

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

@@ -257,7 +257,9 @@ it renders in the drawer header, with no manual `id` / `form={id}` wiring:
 </FormRenderer>
 ```
 
-Inside a drawer the fields default to a vertical (narrow) layout automatically.
+Inside a drawer the fields default to a vertical (narrow) layout automatically. A drawer can be
+wide, though — pass `fieldDirection="flexible"` to hand the decision back to the container query,
+which goes label-beside-control once a field row passes the container `md` breakpoint.
 
 ---
 

package/package.json

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