@forgedevstack/ink 1.0.0 → 1.0.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 1.0.1 — 2026-08-01
+
+### Added
+- Theme helper classes: `.ink-theme-snow`, `.ink-theme-bubble`, `.ink-theme-dark`, `.ink-theme-minimal`
+- Expanded README: full prop table, `ToolbarOption` list, CSS variables, Quill positioning, portal links, asset screenshots
+
+### Docs
+- Companion light Quill-inspired portal (docs + Format/Modules/Theme playground)
+
 ## 1.0.0 — 2026-08-01
 
 ### Added

package/README.md

@@ -1,9 +1,16 @@
 # Ink — `@forgedevstack/ink`
 
-**ForgeStack rich text editor** for React. WYSIWYG toolbar, heading styles, colors, lists, links, image paste, built-in typo auto-fix MVP, Angular usage stub, and a WordPress plugin stub.
+[![npm version](https://img.shields.io/npm/v/@forgedevstack/ink.svg)](https://www.npmjs.com/package/@forgedevstack/ink)
+[![license](https://img.shields.io/npm/l/@forgedevstack/ink.svg)](./LICENSE)
 
-> **Domain:** [inkforgejs.com](https://inkforgejs.com) — placeholder until registered at your registrar.  
-> Avoid conflating with unrelated brands (e.g. proseforge / forgequill).
+**ForgeStack rich text editor** for React. WYSIWYG toolbar, heading styles, colors, lists, links, image paste, built-in typo auto-fix MVP, CSS themes, Angular usage stub, and a WordPress plugin stub.
+
+<p align="center">
+  <img src="./assets/ink-logo.png" alt="Ink logo" width="120" />
+</p>
+
+> **Domain:** [inkforgejs.com](https://inkforgejs.com) — docs + playground.  
+> **Inspired by Quill** in UX (light paper UI, docs sidebar, Format/Modules/Theme playground) — not a Quill fork. Ink is a contenteditable React component with ForgeStack integrations.
 
 ## Install
 
@@ -29,21 +36,110 @@ export function App() {
 }
 ```
 
-## Features (1.0.0)
+## Playground & docs
 
-- Controlled `value` / `onChange` (HTML string)
-- Toolbar: bold / italic / underline / strike, headings, text + highlight colors, lists, links, image insert/paste
-- **Typo auto-fix MVP** — small bundled dictionary + heuristics (`applyTypoAutoFix`), runs on blur; no heavy proprietary spell engine
-- **AI agent stub** — `@forgedevstack/ink/plugins/ai` register/run interface; full agents coming in **1.x**
-- **Angular** — `@forgedevstack/ink/angular` thin usage helpers / docs entry
-- **WordPress** — `wordpress/ink-editor` classic meta box stub
+| | |
+|---|---|
+| Docs portal | [ink-portal](https://github.com/yaghobieh/ink-portal) · [inkforgejs.com](https://inkforgejs.com) |
+| Live playground | `/playground` — Formats, Modules, Theme + code export |
+| npm | https://www.npmjs.com/package/@forgedevstack/ink |
+| Repo | https://github.com/yaghobieh/ink |
+
+<p align="center">
+  <img src="./assets/ink-hero.png" alt="Ink hero" width="640" />
+</p>
+
+## Props (`InkEditorProps`)
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string` | — | Controlled HTML |
+| `defaultValue` | `string` | — | Uncontrolled initial HTML |
+| `onChange` | `(html: string) => void` | — | Fires when content changes |
+| `placeholder` | `string` | `"Start typing..."` | Empty-state placeholder |
+| `disabled` | `boolean` | `false` | Disables interaction |
+| `readOnly` | `boolean` | `false` | View-only content |
+| `minHeight` | `string \| number` | — | Content min height |
+| `maxHeight` | `string \| number` | — | Content max height |
+| `toolbar` | `ToolbarOption[]` | `INK_DEFAULT_TOOLBAR` | Toolbar buttons / controls |
+| `testId` | `string` | — | Testing id |
+| `allowImagePaste` | `boolean` | `true` | Paste images into the editor |
+| `showCharCount` | `boolean` | `false` | Footer character count |
+| `charCountMax` | `number` | — | Optional max for counter UI |
+| `typoAutoFix` | `boolean` | `false` | Blur-time typo MVP fixes |
+
+Also accepts standard `div` HTML attributes except `onChange`.
+
+## Toolbar options (`ToolbarOption`)
+
+```
+bold | italic | underline | strikethrough
+heading1 | heading2 | heading3 | heading4 | heading5 | heading6
+paragraph | headingDropdown
+bulletList | orderedList | blockquote | code
+link | image | textColor | highlightColor
+alignLeft | alignCenter | alignRight | alignJustify
+indent | outdent | clearFormat | divider
+```
+
+Presets exported from the package:
+
+- `INK_DEFAULT_TOOLBAR` — full editing set
+- `INK_SIMPLE_TOOLBAR` — bold / italic / underline + lists
+
+```tsx
+import { InkEditor, INK_SIMPLE_TOOLBAR } from '@forgedevstack/ink';
+
+<InkEditor toolbar={INK_SIMPLE_TOOLBAR} />
+```
+
+## CSS variables & themes
+
+Root class: `.Ink-Editor`. Override variables on a wrapper or the editor:
+
+| Variable | Role |
+|----------|------|
+| `--ink-border` | Borders |
+| `--ink-bg` | Editor background |
+| `--ink-toolbar` | Toolbar background |
+| `--ink-text` | Body text |
+| `--ink-muted` | Placeholder / footer |
+| `--ink-accent` | Active / accent |
+| `--ink-accent-soft` | Active button soft fill |
+
+Theme helper classes (wrap the editor or add to the root):
+
+| Class | Look |
+|-------|------|
+| `.ink-theme-snow` | Clean Quill-like paper toolbar |
+| `.ink-theme-bubble` | Soft floating card |
+| `.ink-theme-dark` | Dark zinc surfaces |
+| `.ink-theme-minimal` | Flat, dashed toolbar edge |
+
+```tsx
+<div className="ink-theme-snow">
+  <InkEditor value={html} onChange={setHtml} />
+</div>
+```
+
+## Modules
+
+- **Typo auto-fix** — `typoAutoFix` runs `applyTypoAutoFix` on blur (small bundled dictionary; not a full spell engine)
+- **Image paste** — `allowImagePaste`
+- **Char count** — `showCharCount` / `charCountMax`
+- **Read only** — `readOnly`
+
+```ts
+import { applyTypoAutoFix } from '@forgedevstack/ink';
+
+const { html, fixedCount } = applyTypoAutoFix(rawHtml);
+```
 
 ## AI plugin (stub)
 
 ```ts
 import { inkAi } from '@forgedevstack/ink/plugins/ai';
 
-// Register a real agent in 1.x — interface is stable now:
 inkAi.register({
   id: 'my-agent',
   name: 'My Agent',
@@ -54,6 +150,8 @@ inkAi.register({
 });
 ```
 
+Full agents land in **1.x**.
+
 ## Angular
 
 ```ts
@@ -69,14 +167,25 @@ Mount `InkEditor` via your preferred React↔Angular bridge. A dedicated Angular
 
 See [`wordpress/README.md`](./wordpress/README.md).
 
-## Links
+## Positioning vs Quill
 
-| | |
-|---|---|
-| npm | https://www.npmjs.com/package/@forgedevstack/ink |
-| Repo | https://github.com/yaghobieh/ink |
-| Portal | https://inkforgejs.com (register domain) |
-| Companion | https://github.com/yaghobieh/ink-portal |
+| | Quill | Ink |
+|---|---|---|
+| Core | Delta document model + Parchment | HTML string + contenteditable |
+| Framework | Framework-agnostic | React-first (ForgeStack) |
+| Themes | Snow / Bubble built-in | CSS variables + `ink-theme-*` classes |
+| Typo / AI | Ecosystem plugins | Built-in typo MVP + AI register stub |
+| License / lineage | Quill open source | Independent MIT package — **inspired by**, not a fork |
+
+## Features (1.0.1)
+
+- Controlled `value` / `onChange` (HTML string)
+- Toolbar: bold / italic / underline / strike, headings, text + highlight colors, lists, links, image insert/paste
+- **Typo auto-fix MVP** — bundled dictionary + heuristics
+- **Theme classes** — snow / bubble / dark / minimal
+- **AI agent stub** — `@forgedevstack/ink/plugins/ai`
+- **Angular** — `@forgedevstack/ink/angular` helpers
+- **WordPress** — `wordpress/ink-editor` stub
 
 ## License
 

package/dist/styles.css

@@ -147,3 +147,57 @@
     --ink-accent-soft: rgb(45 212 191 / 0.15);
   }
 }
+
+.ink-theme-snow .Ink-Editor,
+.Ink-Editor.ink-theme-snow {
+  --ink-border: #e5e7eb;
+  --ink-bg: #ffffff;
+  --ink-toolbar: #f9fafb;
+  --ink-text: #111827;
+  --ink-muted: #6b7280;
+  --ink-accent: #0f766e;
+  --ink-accent-soft: #ccfbf1;
+  border-radius: 0.25rem;
+}
+
+.ink-theme-bubble .Ink-Editor,
+.Ink-Editor.ink-theme-bubble {
+  --ink-border: transparent;
+  --ink-bg: #ffffff;
+  --ink-toolbar: #ffffff;
+  --ink-text: #111827;
+  --ink-muted: #6b7280;
+  --ink-accent: #0f766e;
+  --ink-accent-soft: #ccfbf1;
+  box-shadow: 0 4px 24px rgb(15 23 42 / 0.1);
+  border-radius: 1rem;
+}
+
+.ink-theme-dark .Ink-Editor,
+.Ink-Editor.ink-theme-dark {
+  --ink-border: #3f3f46;
+  --ink-bg: #18181b;
+  --ink-toolbar: #27272a;
+  --ink-text: #f4f4f5;
+  --ink-muted: #a1a1aa;
+  --ink-accent: #2dd4bf;
+  --ink-accent-soft: rgb(45 212 191 / 0.15);
+}
+
+.ink-theme-minimal .Ink-Editor,
+.Ink-Editor.ink-theme-minimal {
+  --ink-border: #e7e5e4;
+  --ink-bg: #ffffff;
+  --ink-toolbar: #ffffff;
+  --ink-text: #1c1917;
+  --ink-muted: #78716c;
+  --ink-accent: #0f766e;
+  --ink-accent-soft: #f0fdfa;
+  box-shadow: none;
+  border-radius: 0;
+}
+
+.ink-theme-minimal .Ink-Editor__toolbar,
+.Ink-Editor.ink-theme-minimal .Ink-Editor__toolbar {
+  border-bottom-style: dashed;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forgedevstack/ink",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "ForgeStack rich text editor for React — WYSIWYG toolbar, typo auto-fix, Angular adapter, and WordPress stub. The writing layer of ForgeStack.",
   "type": "module",
   "main": "./dist/index.cjs",