torch-glare 2.4.5 → 2.5.1

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

@@ -0,0 +1,79 @@
+---
+title: Migrating to the DataViews component
+description: The DataViewsLayout family was replaced by one compound DataViews component. What each old part maps to, and what was removed.
+group: migration
+keywords: [migration, data-views, dataviews-layout, kanban-view, table-view, inbox-view, tree-view, config-panel, upgrade, breaking]
+---
+
+# Migrating to the DataViews component
+
+The `DataViewsLayout` family — a layout component plus one standalone component per view, wired
+together with `useDataViewsState` — was replaced by a single compound component, `DataViews`.
+
+If you never used those, there is nothing to do here: they were **folder components that the
+registry never listed**, so `npx torch-glare add KanbanView` was never able to install one. The
+docs described them, the CLI could not deliver them. That mismatch is what this release fixes.
+
+## What maps to what
+
+| Old | New |
+| --- | --- |
+| `DataViewsLayout` | `DataViews` |
+| `TableView` | `DataViews.Table` |
+| `KanbanView` | `DataViews.Board` |
+| `InboxView` | `DataViews.Inbox` |
+| `TreeView` | `DataViews.Tree` |
+| `DataViewsConfigPanel` | `DataViews.Panel`, with `Panel.Tab` · `Panel.SavedViews` · `Panel.Columns` · `Panel.Sort` |
+| `useDataViewsState` | the `query` prop + `onQueryChange` |
+
+The shape of the change is that a view is no longer *configured*, it is *rendered*. There is no map
+of which views to enable: render `<DataViews.Board/>` and a Board tab appears; wrap it in a
+condition and it disappears, switching away from it if it was the open one.
+
+```tsx
+// before — composable mode, wired by hand
+const state = useDataViewsState();
+<DataViewsLayout state={state} views={{ table: true, kanban: true }}>
+  <TableView state={state} />
+  <KanbanView state={state} groups={groups} />
+</DataViewsLayout>
+
+// after
+<DataViews rows={rows} total={total} fields={fields} onQueryChange={setQuery}>
+  <DataViews.Header title="Orders">
+    <DataViews.ViewSwitch />
+  </DataViews.Header>
+  <DataViews.Table />
+  <DataViews.Board groups={groups} />
+</DataViews>
+```
+
+## Also removed
+
+Three parts of `DataViews` itself went in the same release.
+
+**`DataViews.Pagination`** — rows now load as you scroll. Pass `onLoadMore` and append each page to
+`rows`; whether there is more is derived from `rows.length < total`, so there is no `hasMore` prop.
+See the *Large datasets* section of the [DataViews doc](./index.md).
+
+**`DataViews.Empty`** — when there is nothing to show, the view shows nothing: the table keeps its
+header band and has no rows, the board keeps its columns and has no cards. A centred message in
+place of the view threw away the chrome, and it could not tell "no results" apart from "not fetched
+yet" — so the first load of every page announced that nothing matched before anything had been
+asked for.
+
+**`DataViews.Loading`** — each view now paints its own skeleton, in its own shape, driven by the
+`loading` prop. A custom view registered with `markView` gets the same thing: read `loading` from
+`useDataViewsData()` and lay out the exported `SkeletonBar` / `skeletonKeys`.
+
+## Upgrading a copied component
+
+`DataViews` is copy-in like everything else, so upgrading means re-running `add` and re-applying any
+local edits:
+
+```bash
+npx torch-glare@latest add DataViews
+```
+
+That copies the folder plus its dependencies — `Table`, `FormBuilder`, `TreeFolder`, the
+`useDragDrop` and `useInfiniteScroll` hooks, and the `dataViews` utilities.

package/docs/components/date-picker.md

@@ -855,4 +855,3 @@ function DatePickerWithStore() {
 - [SlideDatePicker](./slide-date-picker.md) - Mobile-optimized slide picker
 - [InputField](./input-field.md) - Input field used as default trigger
 - [Popover](./popover.md) - Dropdown container
-- [TimePicker](./time-picker.md) - Standalone time picker

package/docs/components/form-builder.md

@@ -81,7 +81,8 @@ Each is a JSX child taking at least `name`, plus `label`, `placeholder`,
 | `FormBuilder.Slider` (`min,max,step,range`)                                 | `@radix-ui/react-slider`                                                              | `number` / `[number,number]`                                 |
 | `FormBuilder.Color` (`presets`, `alpha`)                                    | `ColorPicker` (full palette: SV area, hue, opacity, eyedropper, HEX/RGB/HSL, presets) | hex `string` (`#rrggbb`, or `#rrggbbaa` when opacity < 100%) |
 | `FormBuilder.Phone` (`defaultCountry`)                                      | `SearchableSelect` + `InputField`                                                     | `string`                                                     |
-| `FormBuilder.Select` / `.SearchableSelect` (`options`, async props)         | `SearchableSelect`                                                                    | `string`                                                     |
+| `FormBuilder.Select` (`options`)                                            | `Select`                                                                              | `string`                                                     |
+| `FormBuilder.SearchableSelect` (`options`, async: `onSearchChange`/`onLoadMore`/`hasMore`) | `SearchableSelect`                                                      | `string`                                                     |
 | `FormBuilder.MultiSelect` / `.Tags` (`options`)                             | `BadgeField`                                                                          | `string[]`                                                   |
 | `FormBuilder.RadioList` (`options`, each with optional `description`)       | boxed radio list                                                                      | `string`                                                     |
 | `FormBuilder.CheckboxGroup` (`options`, each with optional `description`)   | boxed checkbox list                                                                   | `string[]`                                                   |
@@ -99,7 +100,7 @@ Each is a JSX child taking at least `name`, plus `label`, `placeholder`,
 | `FormBuilder.Signature` (`penColor`)                                        | canvas pad                                                                            | PNG data-URL `string`                                        |
 | `FormBuilder.FieldArray` (`children` render fn, `defaultItem`)              | RHF `useFieldArray`                                                                   | `object[]`                                                   |
 | `FormBuilder.Table` (`columns`, `selectable`, `reorderable`, `defaultItem`) | editable grid in a `SectionBlock`                                                     | `object[]`                                                   |
-| `FormBuilder.Custom` (`render`, `formatView`)                               | your control                                                                          | anything                                                     |
+| `FormBuilder.Custom` (`render`)                                             | your control                                                                          | anything                                                     |
 
 `FormBuilder.Password` accepts `strengthMeter` (shows a `PasswordLevel` meter). `FormBuilder.FieldArray`
 renders a repeating list — its `children` is a render fn `(rowName, index, remove) => …` and sub-fields

package/docs/components/form-renderer.md

@@ -286,4 +286,5 @@ const form = useForm({ resolver, defaultValues })
 
 > `childrenOutside` is the deprecated former name for `summary`. It still works.
 
-`FormRenderer` does **not** forward `summary` — use `FormDrawer` directly when you need one.
+`FormRenderer` forwards `summary` straight into the drawer tray, so you rarely need
+`FormDrawer` directly — reach for it only when you want the drawer without a form.

package/docs/components/form.md

@@ -1,6 +1,6 @@
 ---
 name: Form
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/forms
 tags: [form, validation, react-hook-form, accessible, compound]

package/docs/components/input-field.md

@@ -1,6 +1,6 @@
 ---
 name: InputField
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/forms
 tags: [form, input, field, popover, tooltip, compound, accessible]

package/docs/components/input-otp.md

@@ -1,6 +1,6 @@
 ---
 name: InputOTP
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/forms
 tags: [form, otp, input, verification, authentication, accessible]

package/docs/components/input.md

@@ -1,6 +1,6 @@
 ---
 name: Input
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/forms
 tags: [form, input, text, field, accessible, compound]

package/docs/components/labeled-check-box.md

@@ -1,6 +1,6 @@
 ---
 name: LabeledCheckBox
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/forms
 tags: [form, checkbox, label, selection, accessible, compound]

package/docs/components/labeled-radio.md

@@ -1,6 +1,6 @@
 ---
 name: LabeledRadio
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/forms
 tags: [form, radio, label, selection, accessible, compound]

package/docs/components/radio-card.md

@@ -1,6 +1,6 @@
 ---
 name: RadioCard
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/forms
 tags: [form, radio, card, selection, compound, accessible]

package/docs/components/radio.md

@@ -1,6 +1,6 @@
 ---
 name: Radio
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/forms
 tags: [form, radio, selection, radix-ui, accessible, group, controlled]

package/docs/components/search-field.md

@@ -1,6 +1,6 @@
 ---
 name: SearchField
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/forms
 tags: [form, search, input, field, system-style, glassmorphism]

package/docs/components/section-block.md

@@ -6,7 +6,7 @@ category: layout
 group: Layout & Containers
 tags: [layout, card, section, container, form, group]
 status: stable
-version: 2.4.0
+version: 2.4.5
 dependencies:
   - "class-variance-authority": "^0.7.0"
 ---

package/docs/components/select.md

@@ -1,6 +1,6 @@
 ---
 name: Select
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/forms
 tags: [form, select, dropdown, accessible, radix-ui]

package/docs/components/simple-select.md

@@ -1,6 +1,6 @@
 ---
 name: SimpleSelect
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/forms
 tags: [form, select, dropdown, custom, system-style, accessible]

package/docs/components/switch.md

@@ -1,6 +1,6 @@
 ---
 name: Switch
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/forms
 tags: [form, switch, toggle, radix-ui, accessible, controlled]

package/docs/components/tab-switch.md

@@ -1,6 +1,6 @@
 ---
 name: TabSwitch
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/navigation
 tags: [tab-switch, segmented-control, view-switcher, toggle, list-cards, pills]

package/docs/components/table.md

@@ -1,6 +1,6 @@
 ---
 name: Table
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/data-display
 tags: [table, data, grid, sortable, resizable, accessible, compound]

package/docs/components/text-editor.md

@@ -1,6 +1,6 @@
 ---
 name: TextEditor
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/editors
 tags: [editor, rich-text, block-editor, editorjs, markdown, rtl, accessible]

package/docs/components/textarea.md

@@ -1,6 +1,6 @@
 ---
 name: Textarea
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/forms
 tags: [form, textarea, multiline, input, field, accessible, auto-resize]

package/docs/components/toggle-button.md

@@ -1,6 +1,6 @@
 ---
 name: ToggleButton
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/buttons
 tags: [toggle, button, pressed, radix-ui, accessible, variants]

package/docs/components/toggle.md

@@ -1,6 +1,6 @@
 ---
 name: Toggle
-version: 2.4.0
+version: 2.4.5
 status: stable
 category: components/forms
 tags: [form, toggle, button, radix-ui, accessible, variants]

package/docs/components/tree-folder.md

@@ -0,0 +1,110 @@
+---
+title: TreeFolder
+description: Hierarchical tree with connector lines, multi-level expand/collapse, breadcrumb, keyboard navigation and touch-capable drag-and-drop reparenting.
+group: Data Display
+keywords: [tree, folder, hierarchy, file-explorer, expand, collapse, breadcrumb, drag-drop, reparent, nested, navigation]
+---
+
+# TreeFolder
+
+> A file-explorer style tree: nested nodes with connector lines, selection that highlights the
+> whole subtree, a breadcrumb of the current path, and drag-and-drop that can reparent a node.
+
+## Installation
+
+TORCH Glare is a copy-in library: the CLI copies this component's source into your project
+(you do **not** install it from the npm package). Run `init` once, then `add`:
+
+```bash
+npx torch-glare@latest init
+npx torch-glare@latest add TreeFolder
+```
+
+`TreeFolder` is a folder component — the CLI copies the whole directory, plus the `useDragDrop`
+hook and the `cn` utility it depends on.
+
+## Import
+
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { TreeFolder } from "@/components/TreeFolder";
+```
+
+## Usage
+
+```tsx
+const data = [
+  {
+    id: "src",
+    name: "src",
+    children: [
+      { id: "app", name: "app", children: [{ id: "page", name: "page.tsx", children: [] }] },
+      { id: "lib", name: "lib", children: [] },
+    ],
+  },
+];
+
+<TreeFolder
+  data={data}
+  defaultExpanded="roots"
+  onSelectionChange={(id) => setSelected(id)}
+/>
+```
+
+## Nodes
+
+A node is `{ id, name, children }` plus optional presentation and permission flags:
+
+| Field | Meaning |
+| --- | --- |
+| `id` | stable identity — selection, expansion and drag all key off it |
+| `name` | the label, as text (the row owns its own layout) |
+| `children` | nested nodes; a node with a non-empty array is *internal* (a folder) |
+| `icon` | overrides the resolved icon for this node |
+| `meta` | trailing content on the row — a count, a badge |
+| `disabled` | greyed out and non-interactive |
+| `draggable` / `droppable` | opt this node out of being picked up, or dropped into |
+| `data` | anything of yours; the component never reads it |
+
+## Props
+
+| Prop | Type | Notes |
+| --- | --- | --- |
+| `data` | `TreeFolderNode[]` | the hierarchy |
+| `selectedId` / `defaultSelectedId` | `string \| null` | controlled or uncontrolled selection |
+| `onSelectionChange` | `(id: string \| null) => void` | |
+| `expandedIds` / `defaultExpanded` | `string[]` · `"all" \| "roots" \| "none"` | |
+| `onExpandedChange` | `(ids: string[]) => void` | |
+| `dndEnabled` | `boolean` | turns dragging on |
+| `onMove` | `(args: { dragIds, parentId, index }) => void` | reports the drop; moves nothing |
+| `onDataChange` | `(next: TreeFolderNode[]) => void` | the tree applied the move for you |
+| `iconFor` | resolver | per-node icon from `{ isOpen, isInternal, isSelected }` |
+| `title` · `showHeader` · `showBreadcrumb` · `headerAccessory` | | the chrome above the rows |
+| `highlightAncestors` · `highlightSubtree` | `boolean` | how far a selection tints |
+| `rowHeight` · `indent` · `contentMinWidth` | `number` | 28 and 14 by default |
+| `emptyState` | `ReactNode` | |
+
+An imperative handle exposes `selectId`, `expandAll`, `collapseAll` and `scrollToId`.
+
+## Dragging
+
+Set `dndEnabled` and handle `onMove`. A drop is reported as **which nodes, into which parent, at
+which index** — the tree does not rearrange itself unless you also pass `onDataChange`, which hands
+back an already-moved copy for the uncontrolled case.
+
+Where a drop lands depends on where in the row it happens: the top and bottom quarters mean
+*beside* the target (reordering among its siblings), the middle means *inside* it (reparenting). A
+leaf has no inside, so its whole row reads as before-or-after. A node can never be dropped into its
+own descendant — that would detach the branch from the root — and the guard is enforced before
+`onMove` fires.
+
+It works with a finger and with the keyboard: hold to pick up and swipe to scroll, or Space, arrows,
+Space. Auto-scroll near the edges is handled for you.
+
+## Notes
+
+`DataViews.Tree` composes this component — the row height, indent, connector lines, selection band
+and drag grip all come from here, which is why a tree inside DataViews looks like every other tree
+in the product. `renderNode` there returns `{ name, icon, meta }` rather than markup, because this
+component owns the row.

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

@@ -153,7 +153,7 @@ Every field, its underlying control, and the value your `onSubmit` receives:
 | `.Signature` (`penColor`)                                        | PNG data-URL `string`                                          |
 | `.FieldArray` (`children` render fn, `defaultItem`)              | `object[]`                                                     |
 | `.Table` (`columns`, `selectable`, `reorderable`, `defaultItem`) | `object[]` — editable grid; top-level child (not in a Section) |
-| `.Custom` (`render`, `formatView`)                               | anything                                                       |
+| `.Custom` (`render`)                                             | anything                                                       |
 
 See the [FormBuilder](../components/form-builder.md) doc for the full prop tables.
 
@@ -375,7 +375,7 @@ drawer's tray, beside the form:
   onOpenChange={setOpen}
   form={form}
   onSubmit={save}
-  header={{ title: "New item", badge: "New", variant: "new" }}
+  header={{ title: "New item", label: "New", variant: "new" }}
   summary={
     <FormSummary form={form} title="Item" subtitle="Summary">
       <FormSummary.Group title="Pricing">

package/docs/reference/cli.md

@@ -23,7 +23,7 @@ Run a command **without** a name to pick from an interactive list.
 
 | Command | Description |
 | --- | --- |
-| `init` | Create `glare.json` and set up Tailwind. Run once per project. |
+| `init` | Create `glare.json`, install the Tailwind packages, **and wire your stylesheet**. Run once per project. |
 | `add [Component]` | Copy a component **and its dependencies** into your project. |
 | `hook [hook]` | Copy a hook (usually pulled in automatically as a dependency). |
 | `util [util]` | Copy a utility (e.g. `cn`, usually pulled in automatically). |
@@ -32,6 +32,8 @@ Run a command **without** a name to pick from an interactive list.
 | `update` | Re-sync everything already installed with the latest templates. |
 
 Component names are **case-sensitive PascalCase** — `add DatePicker`, not `add datepicker`.
+Every command takes a **bare name** — `hook useDragDrop`, not `hook useDragDrop.tsx` — and every one
+accepts `-f, --force`.
 
 ## `init`
 
@@ -39,7 +41,23 @@ Component names are **case-sensitive PascalCase** — `add DatePicker`, not `add
 npx torch-glare@latest init
 ```
 
-Creates `glare.json` and configures Tailwind. `glare.json` controls where files are copied:
+Three things, in order:
+
+1. Creates `glare.json`.
+2. Installs the Tailwind packages the design system needs, using your detected package manager.
+3. **Wires your entry stylesheet** — `app/globals.css`, `src/app/globals.css`, `src/index.css`,
+   `styles/globals.css` — with the `@import`/`@plugin` block. Re-running is safe: if the block is
+   already there it says so and changes nothing.
+
+On Tailwind v3 the plugins belong in `tailwind.config.*` instead. `init` prints the snippet rather
+than editing that file, since its shape is yours.
+
+> Without step 3 the project builds cleanly and renders every component **unstyled** — the design
+> tokens simply resolve to nothing. If that happens, check that `@import "tailwindcss"` is the
+> first line: CSS requires imports to precede other at-rules, so an import placed after a `@plugin`
+> is silently dropped.
+
+`glare.json` controls where files are copied:
 
 ```json
 {
@@ -68,7 +86,14 @@ export function Example() {
 }
 ```
 
-Existing files are never overwritten; use `update` to re-sync.
+It ends with a summary — `✅ DataViews → ./: 56 installed (56 items).` — so a partial install is
+visible rather than something you discover at build time.
+
+Dependencies come from the generated `registry.json`, resolved in one pass, so each item is copied
+exactly once however many things import it.
+
+Existing files are never overwritten. Use `--force` to re-copy — it applies to **the whole
+dependency closure**, not just the component you named — or `update` to re-sync everything.
 
 ## `update`
 

package/docs/reference/components.md

@@ -14,7 +14,7 @@ Complete reference index of all 53 components in the TORCH Glare Components Libr
 - [Forms & Inputs (17)](#forms--inputs)
 - [Buttons & Actions (3)](#buttons--actions)
 - [Layout & Containers (7)](#layout--containers)
-- [Data Display (8)](#data-display)
+- [Data Display (9)](#data-display)
 - [Overlays & Dialogs (7)](#overlays--dialogs)
 - [Date & Time (3)](#date--time)
 - [Feedback & Status (4)](#feedback--status)
@@ -68,7 +68,7 @@ Selectable checkbox component with multiple states.
 ### LabeledCheckBox
 Checkbox with integrated label and description.
 
-- **File**: [labeled-checkbox.md](../components/labeled-checkbox.md)
+- **File**: [labeled-check-box.md](../components/labeled-check-box.md)
 - **Props**: `label`, `description`, `checked`, `onChange`
 - **Features**: Built-in label, optional description
 - **Use Cases**: Terms acceptance, preferences, options
@@ -253,6 +253,16 @@ Grouped action buttons.
 
 ## Data Display
 
+### DataViews
+One dataset shown as a table, kanban board, inbox or tree, behind a shared header, filters and settings rail.
+
+- **File**: [data-views.md](../components/data-views/index.md)
+- **Guide**: [Build a screen with DataViews](../components/data-views/guide.md)
+- **Parts**: `Header` · `ViewSwitch` · `Search` · `Actions` · `PanelToggle` · `Table` · `Board` · `Inbox` · `Tree` (+ `Tree.Table`, `Tree.Cards`, `Tree.Tab`) · `Detail` · `Panel` (+ `Tab`, `Section`, `Columns`, `Sort`, `SavedViews`) · `Filters` (+ `Presets`, `Custom`, `Summary`)
+- **Props**: `rows`, `fields`, `total`, `loading`, `onQueryChange`, `onLoadMore`, `getRowId`, `defaultView`
+- **Features**: Scroll loading, table virtualization past 300 rows, drag and drop on four surfaces (touch + keyboard), filters authored as FormBuilder fields, saved views
+- **Use Cases**: Any list screen where the server owns the query
+
 ### Badge
 Small status or label indicator.
 
@@ -305,7 +315,7 @@ Advanced table with features.
 ### TreeDropDown
 Hierarchical dropdown menu.
 
-- **File**: [tree-dropdown.md](../components/tree-dropdown.md)
+- **File**: [tree-drop-down.md](../components/tree-drop-down.md)
 - **Props**: `tree`, `value`, `onChange`
 - **Features**: Nested items, expand/collapse
 - **Use Cases**: Category selection, file trees
@@ -537,9 +547,9 @@ All components are fully typed with TypeScript. Import types from the library:
 
 ```typescript
 import type { ButtonProps } from "@/components/Button";
-import type { InputProps } from "@/components/InputProps";
-import type { ButtonProps } from "@/components/LoginButton";
-import type { SelectProps } from "@/components/SelectProps";
+import type { InputProps } from "@/components/Input";
+import type { LoginButtonProps } from "@/components/LoginButton";
+import type { SelectProps } from "@/components/Select";
 ```
 
 ---

package/docs/tutorials/component-composition.md

@@ -391,8 +391,7 @@ import { useState } from 'react';
 import { Button } from "@/components/Button";
 import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/Dialog";
 import { LabelField } from "@/components/LabelField";
-import { Select } from "@/components/Select";
-import { SimpleOption } from "@/components/SimpleOption";
+import { Select, SelectItem } from "@/components/Select";
 import { TextArea } from "@/components/TextArea";
 import { toast } from "@/components/Toast";
 
@@ -460,10 +459,10 @@ export default function CreateProjectModal() {
               value={formData.category}
               onValueChange={(value) => setFormData({...formData, category: value})}
             >
-              <SimpleOption value="web">Web Development</SimpleOption>
-              <SimpleOption value="mobile">Mobile App</SimpleOption>
-              <SimpleOption value="design">Design</SimpleOption>
-              <SimpleOption value="other">Other</SimpleOption>
+              <SelectItem value="web">Web Development</SelectItem>
+              <SelectItem value="mobile">Mobile App</SelectItem>
+              <SelectItem value="design">Design</SelectItem>
+              <SelectItem value="other">Other</SelectItem>
             </Select>
           </div>
 
@@ -500,8 +499,7 @@ import { useState } from 'react';
 import { Badge } from "@/components/Badge";
 import { Button } from "@/components/Button";
 import { InputField } from "@/components/InputField";
-import { Select } from "@/components/Select";
-import { SimpleOption } from "@/components/SimpleOption";
+import { Select, SelectItem } from "@/components/Select";
 import { Table } from "@/components/Table";
 
 interface TableRow {
@@ -560,10 +558,10 @@ export default function DataTableWithFilters() {
               value={statusFilter}
               onValueChange={setStatusFilter}
             >
-              <SimpleOption value="all">All Status</SimpleOption>
-              <SimpleOption value="active">Active</SimpleOption>
-              <SimpleOption value="pending">Pending</SimpleOption>
-              <SimpleOption value="inactive">Inactive</SimpleOption>
+              <SelectItem value="all">All Status</SelectItem>
+              <SelectItem value="active">Active</SelectItem>
+              <SelectItem value="pending">Pending</SelectItem>
+              <SelectItem value="inactive">Inactive</SelectItem>
             </Select>
           </div>
         </div>
@@ -876,7 +874,7 @@ You now understand component composition! Continue learning:
 
 1. **[Component Documentation](../components/)** - Explore all components
 2. **[Hooks Reference](../reference/hooks.md)** - Custom hooks for common patterns
-3. **[Best Practices Guide](../how-to/best-practices.md)** - Advanced patterns
+3. **[Best Practices Guide](../how-to/guides.md)** - Advanced patterns
 
 ## Additional Resources
 

package/docs/tutorials/getting-started.md

@@ -32,6 +32,13 @@ Before you begin, make sure you have:
 
 ---
 
+> **If you plan to build forms**, add the validation packages the guides use — no component
+> imports them, so the CLI does not install them for you:
+>
+> ```bash
+> npm install zod @hookform/resolvers
+> ```
+
 ## Step 1: Initialize TORCH Glare
 
 Run the following command to initialize your project:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "torch-glare",
-  "version": "2.4.5",
+  "version": "2.5.1",
   "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.",
@@ -37,6 +37,7 @@
   "scripts": {
     "build": "tsc -b",
     "registry": "node scripts/bin/generateRegistry/index.js",
+    "examples": "node scripts/bin/generateExampleDocs/index.js",
     "docs:fix": "node scripts/bin/fixDocs/index.js",
     "check:ai-docs": "node scripts/bin/checkAiDocs/index.js",
     "typecheck": "pnpm -C apps run typecheck",
@@ -46,7 +47,7 @@
     "test": "pnpm -C apps run test",
     "mcp:build": "pnpm -C mcp install && pnpm -C mcp run build",
     "prepare": "pnpm -C mcp install && pnpm -C mcp run build",
-    "deploy": "pnpm run registry && npx tsc --build --force && npm publish --access public"
+    "deploy": "pnpm run registry && pnpm run examples && pnpm run check:ai-docs && npx tsc --build --force && npm publish --access public"
   },
   "dependencies": {
     "commander": "^13.1.0",