torch-glare 2.5.5 → 2.6.0

package/docs/BLOCKS.md

@@ -1,129 +0,0 @@
-# TORCH-Glare Blocks System
-
-## Overview
-
-Blocks are complete, pre-built page templates that combine multiple components. Unlike components which are installed and used via props, blocks are copied into your project for direct customization.
-
-| Aspect | Components | Blocks |
-|--------|------------|--------|
-| Installation | Installed to `components/` | Copied to `blocks/` |
-| Customization | Use via props | Edit source directly |
-| Dependencies | Standalone | Requires other components + npm packages |
-| Scope | Single UI element | Full page/section template |
-
----
-
-## Block Directory Structure
-
-Each block is a folder containing multiple related files:
-
-```
-apps/lib/blocks/
-└── BlockName/
-    ├── index.tsx           # Main export (compound component)
-    ├── types.ts            # TypeScript interfaces
-    ├── Provider.tsx        # Context for shared state
-    └── SubComponent.tsx    # Individual sub-components
-```
-
----
-
-## Block Architecture
-
-### 1. Compound Component Pattern
-
-The main `index.tsx` exports a root component with sub-components attached as properties. This allows usage like `Block.Toolbar`, `Block.Content`, etc.
-
-The root component wraps children in a context provider so all sub-components can access shared state.
-
-### 2. Context Provider
-
-A React context manages all block state (current view, filters, search, pagination, selection, etc.). Sub-components consume this context via a custom hook.
-
-### 3. Types File
-
-Defines all TypeScript interfaces for the block's data structures, props, and state.
-
-### 4. Sub-Components
-
-Each sub-component:
-- Consumes the context via the custom hook
-- Handles its specific UI/logic
-- Uses CVA for styling variants
-- Follows the standard component patterns from CLAUDE.md
-
----
-
-## CLI Block Command
-
-### Location
-`cli/src/commands/block.ts`
-
-### What It Does
-
-1. **Copies block files** - Copies the entire block folder from the package to user's `blocks/` directory
-
-2. **Installs component dependencies** - Each block declares what components it needs. The CLI runs `torch-glare add <component>` for each.
-
-3. **Installs utility dependencies** - Copies required utils (cn, types) to user's `utils/` directory
-
-4. **Installs npm packages** - Detects package manager (npm/yarn/pnpm) and installs required packages that aren't already installed
-
-5. **Updates import paths** - Rewrites imports in copied files from `@/` aliases to relative paths (`../../components/`, `../../utils/`)
-
-### Dependency Registry
-
-The CLI maintains a registry of what each block requires:
-
-```
-BLOCK_DEPENDENCIES = {
-  BlockName: {
-    components: [...],    // Component files to install
-    utils: [...],         // Utility files to copy
-    npmPackages: [...],   // npm packages to install
-  }
-}
-```
-
-### Import Path Transformation
-
-Since users may not have the same tsconfig path aliases, the CLI transforms:
-- `@/components/X` → `../../components/X`
-- `@/utils/X` → `../../utils/X`
-- `../components/X` → `../../components/X`
-- `../utils/X` → `../../utils/X`
-
-### Package Manager Detection
-
-The CLI checks for lock files to detect the package manager:
-- `pnpm-lock.yaml` → pnpm
-- `yarn.lock` → yarn
-- Otherwise → npm
-
----
-
-## CLI Registration
-
-The block command is registered in `cli/bin/index.ts` alongside other commands (like `add` for components).
-
----
-
-## Adding a New Block
-
-1. Create the block folder in `apps/lib/blocks/`
-2. Implement using compound component + context pattern
-3. Add entry to `BLOCK_DEPENDENCIES` in `cli/src/commands/block.ts`
-4. Export from `apps/lib/blocks/index.ts`
-
----
-
-## Final Directory Structure After Installation
-
-```
-user-project/
-├── blocks/
-│   └── BlockName/         # Copied block files
-├── components/            # Auto-installed components
-├── utils/                 # Auto-installed utilities
-└── package.json           # Updated with npm dependencies
-```

package/docs/CHANGELOG-1.1.16.md

@@ -1,108 +0,0 @@
-# TORCH Glare v1.1.16 — Changelog
-
-## New Components
-
-### TextEditor
-Full-featured block-style text editor built on Editor.js.
-
-**Features:**
-- 17 built-in block tools (header, list, nested list, checklist, quote, warning, code, delimiter, embed, table, link, image, raw HTML, chart, marker, inline code, underline)
-- Auto RTL/LTR direction detection per block — Arabic text becomes RTL, English stays LTR in the same editor
-- Markdown paste support — detects markdown in clipboard, parses to Editor.js blocks, renders in a single pass
-- Idle-scheduled saves via `requestIdleCallback` with 500ms debounce
-- RAF-batched input direction checks (non-blocking)
-- O(1) MutationObserver for new block direction detection
-- Dark mode support via `data-theme="dark"`
-- Heading level styles restored (Tailwind preflight strips defaults)
-- Table dark mode overrides, popover dark mode, inline toolbar dark mode
-- Scrollbar styling for popovers
-
-**Props:**
-- `size` — `S | M | L | XL` (optional, no default — use `className` for custom sizing)
-- `variant` — `PresentationStyle` (default)
-- `data` — Initial `OutputData` for the editor
-- `onChange` — Callback with `OutputData` on content change
-- `onReady` — Callback when editor is ready
-- `readOnly` — Toggle read-only mode (can change without recreating editor)
-- `disabled` — Disable the editor
-- `placeholder` — Placeholder text
-- `autofocus` — Auto-focus on mount
-- `tools` — Custom Editor.js tools config (overrides defaults)
-- `minHeight` — Custom min-height in pixels
-- `theme` — `dark | light | default`
-
-**Ref methods:** `save()`, `clear()`, `render(data)`, `focus(atEnd?)`, `getInstance()`
-
-**Files:** `components/TextEditor.tsx`, `utils/markdownParser.ts`, `types/editorjs.d.ts`
-
----
-
-### ChartBlockTool
-Editor.js block tool for rendering interactive charts via Chart.js.
-
-**Supported chart types:** bar, line, pie, doughnut, radar, polarArea
-
-**Features:**
-- Inline data table editor with add/remove rows and columns
-- Color pickers per dataset
-- Chart type selector with visual buttons
-- Title input
-- Toggle between editor panel and chart preview
-- Dark mode support
-
-**File:** `components/ChartBlockTool.ts`
-
----
-
-### Breadcrumb
-Navigation breadcrumb component with separator support.
-
-**Exports:** `Breadcrumb`, `BreadcrumbList`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbPage`, `BreadcrumbSeparator`, `BreadcrumbEllipsis`
-
-**File:** `components/Breadcrumb.tsx`
-
----
-
-### ButtonGroup
-Container component for grouping buttons together.
-
-**File:** `components/ButtonGroup.tsx`
-
----
-
-### ToggleButton
-Toggle button with active/inactive states.
-
-**File:** `components/ToggleButton.tsx`
-
----
-
-## New Utilities
-
-### markdownParser
-Utility for detecting and parsing markdown text into Editor.js block format.
-
-**Exports:**
-- `isMarkdown(text)` — Heuristic detection scoring (returns `true` if text is likely markdown)
-- `parseMarkdownToBlocks(text)` — State-machine line parser converting markdown to Editor.js blocks
-
-**Supported markdown elements:** headings, bullet/numbered lists, checklists, code blocks (with language), blockquotes, horizontal rules, tables, inline formatting (bold, italic, code, links, strikethrough)
-
-**File:** `utils/markdownParser.ts`
-
----
-
-## Changes to Existing Components
-
-### TextEditor (from previous commits in this branch)
-- Removed border styles (no focus, hover, or error borders)
-- Removed `SystemStyle` variant — only `PresentationStyle` remains
-- Removed `error` prop and variant
-- Size is now optional — omit `size` and use `className` for fully custom sizing
-- `spellCheck={false}` and `translate="no"` on holder div for reduced browser overhead
-
----
-
-## Documentation
-- Added `CLAUDE.md` — Development guide for component patterns, CVA conventions, file structure, and styling tokens
-- Added `docs/BLOCKS.md` — Documentation for the TORCH Glare blocks system

package/docs/README.md

@@ -1,215 +0,0 @@
-# TORCH Glare Components Library
-
-Welcome to the **TORCH Glare Components Library**! This library provides a collection of reusable React components to help you build user interfaces efficiently. Additionally, a CLI tool (**torch-glare CLI**) is available to streamline component management.
-
-## Table of Contents
-
-1. [Installation](#installation)
-2. [Usage](#usage)
-3. [CLI Commands](#cli-commands)
-4. [Theming](#theming)
-5. [Contributing](#contributing)
-6. [License](#license)
-
-## Installation
-
-
-## 1. Initialize Your Project
-
-To install the TORCH Glare Components Library, run the following command:
-
-```sh
-npx torch-glare@latest init
-```
-
-This command will:
-- Create or modify the `tailwind.config.js` file to support Tailwind CSS for Tailwind versions less then 4.
-- Generate a `glare.json` file where you can customize the installation path for components.
-
-### Tailwind CSS Requirement
-Ensure that Tailwind CSS is installed in your project before running the initialization command.
-
-## 2. Add Essential Plugins for Tailwind CSS
-
-If you're using Tailwind CSS version 4 or above, add the following plugins to your global CSS file:
-
-```css
-@import "tailwindcss";
-/* Essential plugins */
-@plugin 'glare-typography';
-@plugin 'mapping-color-system';
-@plugin 'glare-torch-mode';
-@plugin 'tailwind-scrollbar-hide';
-@plugin 'tailwindcss-animate';
-```
-
-
-### 2. Add Remix Icon Library
-Include the following in `index.html` or nextjs `layout.tsx` or meta data for icon support:
-
-```html
-<html>
-<head>
-  <link
-    href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css"
-    rel="stylesheet"
-  />
-</head>
-<body></body>
-</html>
-
-```
-
-## 3. Configure Installation Path
-
-Adjust the `glare.json` file to specify where you want to install components:
-
-```json
-{
-  "path": "./src" // The directory where components will be installed
-}
-```
-
-### 4. Add Components
-To add a specific component, run:
-
-```sh
-npx torch-glare@latest add [component-name]
-```
-
-Or, to add components interactively:
-
-```sh
-npx torch-glare@latest add
-```
-
-## Usage
-
-Once installed, import and use the components as needed:
-
-```tsx
-import React from "react";
-import { Button } from "./components";
-
-const App = () => {
-  return (
-    <div>
-      <Button >Hello.</Button>
-    </div>
-  );
-};
-
-export default App;
-```
-
-## CLI Commands
-
-### Initialize Configuration
-```sh
-npx torch-glare@latest init
-```
-- Creates a `glare.json` configuration file.
-- Create or modify `tailwind.config.ts` file for tailwind support.
-
-### Add Components
-```sh
-npx torch-glare@latest add [component]
-```
-Adds a specific component or runs an interactive prompt if no name is provided.
-
-### Add Hooks
-```sh
-npx torch-glare@latest hook [hook]
-```
-Adds a specific hook or runs an interactive prompt if no name is provided.
-
-### Add Utilities
-```sh
-npx torch-glare@latest util [util]
-```
-Adds a specific utility or runs an interactive prompt if no name is provided.
-
-### Providers
-```sh
-npx torch-glare@latest provider [provider]
-```
-Adds a specific provider or runs an interactive prompt if no name is provided.
-
-### Add Layouts
-```sh
-npx torch-glare@latest layout [layout]
-```
-Adds a specific layout or runs an interactive prompt if no name is provided.
-
-> Component names are case-sensitive and PascalCase (e.g. `add DatePicker`).
-
-### Update Installed Resources
-
-```sh
-npx torch-glare@latest update
-```
-Updates all installed components, hooks, utilities, and providers.
-
-
-## Theming
-
-The TORCH Glare Components Library supports both light and dark themes. You can set a fixed theme for your components using the `theme` attribute.
-
-### Setting a Fixed Theme
-
-To apply a fixed theme (dark or light) to a component, add the `theme `attribute with the desired theme value:
-
-```tsx
-import React from "react";
-import { Button } from "./components";
-
-const App = () => {
-  return (
-    <div>
-      <Button theme="dark">Dark Theme Button</Button>
-      <Button theme="light">Light Theme Button</Button>
-    </div>
-  );
-};
-
-export default App;
-```
-
-### Global Theme
-
-To apply a theme globally, wrap your application with the `ThemeProvider` and set the optional `defaultTheme` props:
-
-
-```tsx
-import { ThemeProvider } from "./components";
-
-const App = () => {
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <ThemeProvider defaultTheme="light" defaultThemeMode="TORCH">
-    <App />
-  </ThemeProvider>
-);
-};
-
-export default App;
-```
-
-## Contributing
-
-We welcome contributions! Follow these steps:
-
-1. Fork the repository.
-2. Create a new branch.
-3. Implement your changes.
-4. Commit with a clear message.
-5. Push your changes and open a pull request.
-
-### Contribution Guidelines
-- Follow existing code style.
-- Update documentation if necessary.
-
-## License
-
-This project is licensed under the **MIT License**.
-
-