torch-glare 2.4.2 → 2.4.3

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">
@@ -251,15 +243,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
@@ -63,7 +63,6 @@ import { FormBuilder } from "@/components/FormBuilder";
 | `onSubmit` / `onInvalid`                                       | fns                           | Submit / validation-fail callbacks.                                                                                                                                                                                                                                              |
 | `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 +73,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 +97,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}

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>

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.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.",

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

@@ -1,40 +0,0 @@
-import { ReactNode } from "react";
-
-import { cn } from "../../utils/cn";
-
-export interface DisplayFieldProps {
-  label?: ReactNode;
-  /** Plain string value — falls back to an em-dash when empty. */
-  value?: string | null;
-  /** Rich value (badges, chips, formatted nodes) — takes precedence over `value`. */
-  valueNode?: ReactNode;
-  className?: string;
-}
-
-/**
- * Read-only field: a label above its value. Used by FormBuilder's `mode: "view"`
- * so the same config renders as a detail view. Mirrors the products-services
- * `DisplayField` (label + value/valueNode, em-dash fallback).
- */
-export function DisplayField({ label, value, valueNode, className }: DisplayFieldProps) {
-  return (
-    <div className={cn("flex w-full flex-col gap-1.5", className)}>
-      {label != null && (
-        <p className="typography-body-small-regular text-content-presentation-global-secondary">
-          {label}
-        </p>
-      )}
-      {valueNode != null ? (
-        <div className="typography-body-medium-medium text-content-presentation-global-primary">
-          {valueNode}
-        </div>
-      ) : (
-        <span className="typography-body-medium-medium text-content-presentation-global-primary">
-          {value != null && value !== "" ? value : "—"}
-        </span>
-      )}
-    </div>
-  );
-}
-
-DisplayField.displayName = "DisplayField";

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

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