torch-glare 2.4.0 → 2.4.2

package/docs/components/switch.md

@@ -1,6 +1,6 @@
 ---
 name: Switch
-version: 1.1.15
+version: 2.4.0
 status: stable
 category: components/forms
 tags: [form, switch, toggle, radix-ui, accessible, controlled]
@@ -16,14 +16,22 @@ dependencies:
 
 ## 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
-npm install torch-glare
+npx torch-glare@latest init
+npx torch-glare@latest add Switch
 ```
 
+`add` also copies any components, hooks, and utilities that `Switch` depends on.
+
 ## Import
 
-```typescript
-import { Switch } from 'torch-glare/lib/components/Switch'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { Switch } from "@/components/Switch";
 ```
 
 ## Quick Examples
@@ -31,7 +39,7 @@ import { Switch } from 'torch-glare/lib/components/Switch'
 ### Basic Usage
 
 ```typescript
-import { Switch } from 'torch-glare/lib/components/Switch'
+import { Switch } from '@/components/Switch'
 
 function Example() {
   const [enabled, setEnabled] = useState(false)
@@ -488,7 +496,7 @@ function SyncSettings() {
 
 ```typescript
 import { render, screen, fireEvent } from '@testing-library/react'
-import { Switch } from 'torch-glare/lib/components/Switch'
+import { Switch } from '@/components/Switch'
 
 describe('Switch', () => {
   it('toggles state on click', () => {

package/docs/components/tab-form-item.md

@@ -12,10 +12,16 @@ A flexible tab navigation component designed for forms and multi-step workflows.
 
 ## 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-cli add tab-form-item
+npx torch-glare@latest init
+npx torch-glare@latest add TabFormItem
 ```
 
+`add` also copies any components, hooks, and utilities that `TabFormItem` depends on.
+
 ## Imports
 
 ```typescript

package/docs/components/tab-switch.md

@@ -1,6 +1,6 @@
 ---
 name: TabSwitch
-version: 1.0.0
+version: 2.4.0
 status: stable
 category: components/navigation
 tags: [tab-switch, segmented-control, view-switcher, toggle, list-cards, pills]
@@ -16,15 +16,22 @@ dependencies:
 
 ## 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
-npm install torch-glare
+npx torch-glare@latest init
+npx torch-glare@latest add TabSwitch
 ```
 
+`add` also copies any components, hooks, and utilities that `TabSwitch` depends on.
+
 ## Import
 
-```typescript
-import { TabSwitch } from 'torch-glare/lib/components/TabSwitch'
-import type { TabSwitchOption } from 'torch-glare/lib/components/TabSwitch'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { TabSwitch } from "@/components/TabSwitch";
 ```
 
 ## Quick Examples
@@ -32,7 +39,7 @@ import type { TabSwitchOption } from 'torch-glare/lib/components/TabSwitch'
 ### Basic Usage (List / Cards)
 
 ```typescript
-import { TabSwitch } from 'torch-glare/lib/components/TabSwitch'
+import { TabSwitch } from "@/components/TabSwitch";
 import { useState } from 'react'
 
 function Example() {

package/docs/components/table-dnd-wrapper.md

@@ -0,0 +1,107 @@
+---
+title: TableDnDWrapper
+description: A factory that wraps the Editor.js table tool to add drag-and-drop reordering of rows and columns, used by the TORCH Glare TextEditor
+group: Advanced
+keywords: [table-dnd-wrapper, editorjs, table, drag-and-drop, reorder, text-editor, advanced]
+---
+
+# TableDnDWrapper
+
+> An advanced, non-visual module: a factory that **wraps `@editorjs/table`** and adds
+> drag-and-drop reordering of rows and columns. It is not a React component — its default
+> export, `createTableDnDClass(OriginalTable)`, returns a subclass of the Editor.js table tool
+> that you register in an Editor.js `tools` config. The TORCH Glare [TextEditor](./text-editor.md)
+> uses it internally; add it directly only when building a custom Editor.js instance.
+
+## How it works
+
+It reuses the table plugin's existing `.tc-toolbox` toggler elements — no extra UI is injected:
+
+- **Click** the toggler → opens the original popover menu (unchanged).
+- **Drag** the toggler → reorders that row or column (new behavior).
+
+## Installation
+
+TORCH Glare is a copy-in library: the CLI copies this module'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 TextEditor
+```
+
+`createTableDnDClass` ships as part of the `TextEditor` folder, so `add TextEditor` copies it in.
+
+## Import
+
+```typescript
+import { createTableDnDClass } from "@/components/TextEditor";
+```
+
+## Quick Examples
+
+### Register a drag-enabled table in Editor.js
+
+```typescript
+import EditorJS from "@editorjs/editorjs";
+import Table from "@editorjs/table";
+import { createTableDnDClass } from "@/components/TextEditor";
+
+// Wrap the original table tool to add row/column drag-and-drop.
+const TableWithDnD = createTableDnDClass(Table);
+
+const editor = new EditorJS({
+  holder: "editor",
+  tools: {
+    table: {
+      class: TableWithDnD,
+      inlineToolbar: true,
+    },
+  },
+});
+```
+
+The returned class behaves exactly like `@editorjs/table` (same config, same saved data), with
+drag reordering added on top.
+
+## API Reference
+
+### Props
+
+| Member | Type | Description |
+|--------|------|-------------|
+| `default export` | `createTableDnDClass(OriginalTable) => TableClass` | Factory. Pass the Editor.js table tool class; returns a subclass that adds row/column drag-and-drop. |
+| `OriginalTable` | `TableClass` | The Editor.js table tool class to wrap (e.g. `@editorjs/table`). |
+| returns | `TableClass` | A `TableDnD` subclass to register under a `tools` key. |
+
+The returned class extends the original tool, so it inherits all of the wrapped table's config,
+props, and saved-data shape — the wrapper only augments pointer handling on the existing
+row/column togglers.
+
+### TypeScript
+
+```typescript
+// The wrapped table tool is typed loosely because it extends a third-party class.
+type TableClass = any;
+
+/**
+ * Wrap an Editor.js table tool class and return a subclass that adds
+ * drag-and-drop reordering of rows and columns.
+ */
+export default function createTableDnDClass(OriginalTable: TableClass): TableClass;
+```
+
+## Common Patterns
+
+- **Use via TextEditor:** most apps should use [TextEditor](./text-editor.md), which applies
+  this wrapper for you — you rarely call the factory directly.
+- **Custom Editor.js:** wrap the table class once (`createTableDnDClass(Table)`) and register
+  the result; the rest of your Editor.js config is unchanged.
+- **Drag threshold:** a pointer must move a few pixels before a click becomes a drag, so normal
+  toggler clicks still open the table menu.
+
+## Related Components
+
+- [TextEditor](./text-editor.md) — the rich-text editor that uses this wrapper.
+- [ChartBlockTool](./chart-block-tool.md) — another internal Editor.js tool module.
+- [DataTable](./data-table.md) — a standalone React data table (unrelated to the Editor.js table block).

package/docs/components/table-view.md

@@ -11,13 +11,22 @@ keywords: [data-views, table-view, table, sortable, columns, selection, filter,
 
 ## Installation
 
-Part of `torch-glare`. Ships with the `DataViews` folder when you run `npx torch-glare add DataViews` — no separate install. It depends on the shared `Card`, `Checkbox`, and `Table` components plus the colocated `FilterPanel`.
+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 TableView
+```
+
+`add` also copies any components, hooks, and utilities that `TableView` depends on.
 
 ## Import
 
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
 ```tsx
-import { TableView, useDataViewsState } from "torch-glare"
-import type { TableViewProps, FieldConfig } from "torch-glare"
+import { TableView } from "@/components/TableView";
 ```
 
 ## When to use it directly
@@ -33,8 +42,9 @@ import type { TableViewProps, FieldConfig } from "torch-glare"
 `TableView` is controlled — it does not own field detection or config. Pull those from `useDataViewsState` (which auto-detects fields and columns from your data) and pass them down.
 
 ```tsx
-import { TableView, useDataViewsState } from "torch-glare"
-import type { FieldConfig } from "torch-glare"
+import { TableView } from "@/components/TableView";
+import { useDataViewsState } from "@/hooks/useDataViewsState";
+import type { FieldConfig } from "@/components/FieldConfig";
 
 const employees = [
   { id: 1, name: "Ada Lovelace", role: "Engineer", salary: 120000, joinDate: "2024-04-12" },

package/docs/components/table.md

@@ -1,6 +1,6 @@
 ---
 name: Table
-version: 1.1.15
+version: 2.4.0
 status: stable
 category: components/data-display
 tags: [table, data, grid, sortable, resizable, accessible, compound]
@@ -19,26 +19,22 @@ dependencies:
 
 ## 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
-npm install torch-glare
+npx torch-glare@latest init
+npx torch-glare@latest add Table
 ```
 
+`add` also copies any components, hooks, and utilities that `Table` depends on.
+
 ## Import
 
-```typescript
-import {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-  TableCheckbox,
-  TableFooterButton,
-  SubTableButton
-} from 'torch-glare/lib/components/Table'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { Table } from "@/components/Table";
 ```
 
 ## Quick Examples
@@ -46,7 +42,7 @@ import {
 ### Basic Table
 
 ```typescript
-import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell } from 'torch-glare/lib/components/Table'
+import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell } from '@/components/Table'
 
 function BasicTable() {
   return (
@@ -210,9 +206,14 @@ function SelectableTable() {
           <TableHead size="S">
             <TableCheckbox
               id="select-all"
-              checked={selectedRows.size === data.length}
-              indeterminate={selectedRows.size > 0 && selectedRows.size < data.length}
-              onChange={toggleAll}
+              checked={
+                selectedRows.size === data.length
+                  ? true
+                  : selectedRows.size > 0
+                    ? 'indeterminate'
+                    : false
+              }
+              onCheckedChange={toggleAll}
             />
           </TableHead>
           <TableHead>Name</TableHead>
@@ -229,7 +230,7 @@ function SelectableTable() {
               <TableCheckbox
                 id={`select-${item.id}`}
                 checked={selectedRows.has(item.id)}
-                onChange={() => toggleRow(item.id)}
+                onCheckedChange={() => toggleRow(item.id)}
               />
             </TableCell>
             <TableCell>{item.name}</TableCell>
@@ -402,9 +403,8 @@ function ResizableTable() {
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `id` | `string` | - | Required checkbox ID |
-| `checked` | `boolean` | - | Checked state |
-| `indeterminate` | `boolean` | - | Indeterminate state |
-| `onChange` | `() => void` | - | Change handler |
+| `checked` | `boolean \| 'indeterminate'` | - | Checked state; pass `'indeterminate'` for the mixed state |
+| `onCheckedChange` | `(checked: boolean \| 'indeterminate') => void` | - | Change handler (Radix Checkbox) |
 
 ### TableFooterButton Props
 
@@ -446,8 +446,8 @@ interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
 // TableCheckbox types
 interface TableCheckboxProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   id: string
-  checked?: boolean
-  indeterminate?: boolean
+  checked?: boolean | 'indeterminate'
+  onCheckedChange?: (checked: boolean | 'indeterminate') => void
 }
 
 // Export structure
@@ -659,7 +659,7 @@ function EditableTable() {
 
 ```typescript
 import { render, screen, fireEvent } from '@testing-library/react'
-import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell } from 'torch-glare/lib/components/Table'
+import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell } from '@/components/Table'
 
 describe('Table', () => {
   it('renders table with data', () => {
@@ -922,7 +922,7 @@ Key overrides on `childrenClassName`:
 ```diff
 // Import path changed
 - import Table from 'torch-glare/Table'
-+ import { Table, TableHeader, TableBody } from 'torch-glare/lib/components/Table'
++ import { Table, TableHeader, TableBody } from '@/components/Table'
 
 // Component structure
 - <Table headers={headers} data={data} />

package/docs/components/text-editor.md

@@ -1,6 +1,6 @@
 ---
 name: TextEditor
-version: 1.1.15
+version: 2.4.0
 status: stable
 category: components/editors
 tags: [editor, rich-text, block-editor, editorjs, markdown, rtl, accessible]
@@ -34,16 +34,22 @@ dependencies:
 
 ## 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
-npm install torch-glare
+npx torch-glare@latest init
+npx torch-glare@latest add TextEditor
 ```
 
+`add` also copies any components, hooks, and utilities that `TextEditor` depends on.
+
 ## Import
 
-```typescript
-import { TextEditor } from 'torch-glare/lib/components/TextEditor'
-// or
-import { TextEditor } from 'torch-glare/lib/components'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { TextEditor } from "@/components/TextEditor";
 ```
 
 ## Quick Examples
@@ -51,7 +57,7 @@ import { TextEditor } from 'torch-glare/lib/components'
 ### Basic Usage
 
 ```typescript
-import { TextEditor } from 'torch-glare/lib/components/TextEditor'
+import { TextEditor } from "@/components/TextEditor";
 
 function Example() {
   return (
@@ -66,7 +72,7 @@ function Example() {
 ### With Initial Data
 
 ```typescript
-import { TextEditor } from 'torch-glare/lib/components/TextEditor'
+import { TextEditor } from "@/components/TextEditor";
 import type { OutputData } from '@editorjs/editorjs'
 
 function Example() {
@@ -97,7 +103,7 @@ function Example() {
 
 ```typescript
 import { useRef } from 'react'
-import { TextEditor, TextEditorRef } from 'torch-glare/lib/components/TextEditor'
+import { TextEditor, TextEditorRef } from "@/components/TextEditor";
 
 function EditorWithControls() {
   const editorRef = useRef<TextEditorRef>(null)
@@ -254,8 +260,26 @@ function MarkdownEditor() {
 | `tools` | `Record<string, any>` | Default 18+ tools | Override the Editor.js tools configuration |
 | `minHeight` | `number` | - | Custom min-height in pixels (overrides size) |
 | `disabled` | `boolean` | `false` | Disables interaction with reduced opacity |
+| `toolbar` | `boolean` | `true` | Show the fixed formatting toolbar. Auto-hidden when `readOnly`/`disabled`. |
 | `className` | `string` | - | Additional CSS classes |
 
+### Formatting toolbar
+
+A fixed, sticky toolbar sits at the top of the editor (shown by default; pass `toolbar={false}`
+to hide it, and it is automatically hidden in `readOnly`/`disabled` editors). It drives the
+underlying Editor.js instance and offers:
+
+- **History** — undo / redo (via `editorjs-undo`; also bound to `Ctrl/⌘+Z` / `Ctrl/⌘+Y`).
+- **Block type** — a dropdown to switch between Normal text and Heading 1–3 (`blocks.convert`).
+- **Alignment** — left / center / right (a block tune persisted on each block).
+- **Text color** — a swatch palette.
+- **Inline** — bold, italic, underline, strikethrough, clear formatting.
+- **Lists** — bullet and ordered.
+- **Insert image** — from a local file (inserted as an `image` block).
+
+Strikethrough and color are backed by small custom inline tools whose `sanitize` allowlists let
+that markup survive `save()`; alignment persists as a block tune.
+
 ### Ref Methods (TextEditorRef)
 
 | Method | Signature | Description |
@@ -342,8 +366,8 @@ export type { TextEditorProps, OutputData }
 
 ```typescript
 import { useRef, useState } from 'react'
-import { TextEditor, TextEditorRef } from 'torch-glare/lib/components/TextEditor'
-import { Button } from 'torch-glare/lib/components/Button'
+import { TextEditor, TextEditorRef } from "@/components/TextEditor";
+import { Button } from "@/components/Button";
 import type { OutputData } from '@editorjs/editorjs'
 
 function BlogPostEditor() {
@@ -478,7 +502,7 @@ function ArticleForm() {
 
 ```typescript
 import { render, screen, waitFor } from '@testing-library/react'
-import { TextEditor, TextEditorRef } from 'torch-glare/lib/components/TextEditor'
+import { TextEditor, TextEditorRef } from "@/components/TextEditor";
 
 describe('TextEditor', () => {
   it('renders the editor container', () => {
@@ -652,7 +676,7 @@ The PresentationStyle variant maps to the following design tokens:
 ```typescript
 "use client"
 
-import { TextEditor } from 'torch-glare/lib/components/TextEditor'
+import { TextEditor } from "@/components/TextEditor";
 
 export default function Page() {
   return <TextEditor />

package/docs/components/textarea.md

@@ -1,6 +1,6 @@
 ---
 name: Textarea
-version: 1.1.15
+version: 2.4.0
 status: stable
 category: components/forms
 tags: [form, textarea, multiline, input, field, accessible, auto-resize]
@@ -17,14 +17,22 @@ dependencies:
 
 ## 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
-npm install torch-glare
+npx torch-glare@latest init
+npx torch-glare@latest add Textarea
 ```
 
+`add` also copies any components, hooks, and utilities that `Textarea` depends on.
+
 ## Import
 
-```typescript
-import { Textarea } from 'torch-glare/lib/components/Textarea'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { Textarea } from "@/components/Textarea";
 ```
 
 ## Quick Examples
@@ -32,7 +40,7 @@ import { Textarea } from 'torch-glare/lib/components/Textarea'
 ### Basic Usage
 
 ```typescript
-import { Textarea } from 'torch-glare/lib/components/Textarea'
+import { Textarea } from '@/components/Textarea'
 
 function Example() {
   const [value, setValue] = useState('')
@@ -346,7 +354,7 @@ function AutoSaveTextarea() {
 
 ```typescript
 import { render, screen, fireEvent } from '@testing-library/react'
-import { Textarea } from 'torch-glare/lib/components/Textarea'
+import { Textarea } from '@/components/Textarea'
 
 describe('Textarea', () => {
   it('handles user input', () => {
@@ -580,7 +588,7 @@ This gives you the TORCH look-and-feel without `field-sizing-content`. Switch ba
 ```diff
 // Import path changed
 - import Textarea from 'torch-glare/Textarea'
-+ import { Textarea } from 'torch-glare/lib/components/Textarea'
++ import { Textarea } from '@/components/Textarea'
 
 // Label integration
 - <div>

package/docs/components/timeline.md

@@ -14,10 +14,16 @@ The component is composed of `Timeline`, `TimelineItem`, `TimelineIndicator`, `T
 
 ## 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 Timeline
 ```
 
+`add` also copies any components, hooks, and utilities that `Timeline` depends on.
+
 ## Imports
 
 ```typescript