From fd12bbd34a5ab47c5482b8ddc7f5e89d8c7c7982 Mon Sep 17 00:00:00 2001
From: tegwick <bernd.worsch@gmail.com>
Date: Tue, 16 Dec 2025 22:26:31 +0100
Subject: [PATCH] docs: add npm publication workplan and update TODO

- Created comprehensive NPM_PUBLICATION_PLAN.md with 9 phases
- Covers bundling, testing, and npm publication process
- Uses Rollup with marked.js as peer dependency
- Targets 3-5 day implementation timeline
- Updated TODO.md with current active tasks
---
 NPM_PUBLICATION_PLAN.md | 1564 +++++++++++++++++++++++++++++++++++++++
 TODO.md                 |   23 +
 2 files changed, 1587 insertions(+)
 create mode 100644 NPM_PUBLICATION_PLAN.md
 create mode 100644 TODO.md

diff --git a/NPM_PUBLICATION_PLAN.md b/NPM_PUBLICATION_PLAN.md
new file mode 100644
index 0000000..186a65a
--- /dev/null
+++ b/NPM_PUBLICATION_PLAN.md
@@ -0,0 +1,1564 @@
+# TestDrive-JSUI npm Publication Workplan
+
+**Goal**: Bundle and publish testdrive-jsui as a production-ready npm package
+**Strategy**: Single-file bundle with marked.js as peer dependency
+**Timeline**: 3-5 days for polished implementation
+**Target Version**: 1.0.0
+
+---
+
+## Overview
+
+Transform testdrive-jsui from a multi-file development library into a professionally bundled npm package available via:
+- `npm install testdrive-jsui`
+- CDN: jsdelivr.net, unpkg.com
+- Direct download from GitHub releases
+
+---
+
+## Phase 1: Build System Setup (Day 1, Morning)
+
+### Objective
+Install and configure Rollup bundler with all necessary plugins.
+
+### Tasks
+
+#### 1.1: Install Build Dependencies
+
+```bash
+cd /home/worsch/markitect_project/capabilities/testdrive-jsui
+
+npm install --save-dev rollup \
+  @rollup/plugin-node-resolve \
+  @rollup/plugin-commonjs \
+  @rollup/plugin-terser \
+  @rollup/plugin-babel \
+  @babel/core \
+  @babel/preset-env \
+  rollup-plugin-postcss \
+  postcss \
+  autoprefixer \
+  cssnano
+```
+
+**Why each plugin:**
+- `rollup`: Main bundler
+- `@rollup/plugin-node-resolve`: Resolves node_modules
+- `@rollup/plugin-commonjs`: Converts CommonJS to ES6
+- `@rollup/plugin-terser`: Minification
+- `@rollup/plugin-babel`: Transpile for older browsers
+- `rollup-plugin-postcss`: Bundle CSS
+- `cssnano`: Minify CSS
+
+#### 1.2: Create Rollup Configuration
+
+**Create**: `rollup.config.js`
+
+```javascript
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import babel from '@rollup/plugin-babel';
+import terser from '@rollup/plugin-terser';
+import postcss from 'rollup-plugin-postcss';
+import autoprefixer from 'autoprefixer';
+import cssnano from 'cssnano';
+
+const production = !process.env.ROLLUP_WATCH;
+
+export default [
+  // UMD build (browser-friendly, default)
+  {
+    input: 'src/index.js',
+    output: {
+      name: 'TestDriveJSUI',
+      file: 'dist/testdrive-jsui.js',
+      format: 'umd',
+      sourcemap: true,
+      banner: `/*!
+ * TestDrive-JSUI v1.0.0
+ * JavaScript-first markdown editor library
+ * (c) 2025 MarkiTect Team
+ * Released under MIT License
+ */`
+    },
+    external: ['marked'], // Peer dependency
+    plugins: [
+      resolve({
+        browser: true
+      }),
+      commonjs(),
+      babel({
+        babelHelpers: 'bundled',
+        exclude: 'node_modules/**',
+        presets: [
+          ['@babel/preset-env', {
+            targets: {
+              browsers: ['> 0.5%', 'last 2 versions', 'not dead']
+            }
+          }]
+        ]
+      }),
+      postcss({
+        extract: 'testdrive-jsui.css',
+        minimize: production,
+        plugins: [
+          autoprefixer(),
+          production && cssnano()
+        ].filter(Boolean),
+        sourceMap: true
+      })
+    ]
+  },
+
+  // UMD minified build
+  {
+    input: 'src/index.js',
+    output: {
+      name: 'TestDriveJSUI',
+      file: 'dist/testdrive-jsui.min.js',
+      format: 'umd',
+      sourcemap: true
+    },
+    external: ['marked'],
+    plugins: [
+      resolve({ browser: true }),
+      commonjs(),
+      babel({
+        babelHelpers: 'bundled',
+        exclude: 'node_modules/**',
+        presets: [
+          ['@babel/preset-env', {
+            targets: {
+              browsers: ['> 0.5%', 'last 2 versions', 'not dead']
+            }
+          }]
+        ]
+      }),
+      terser({
+        format: {
+          comments: /^!/
+        }
+      })
+    ]
+  },
+
+  // ESM build (for modern bundlers)
+  {
+    input: 'src/index.js',
+    output: {
+      file: 'dist/testdrive-jsui.esm.js',
+      format: 'esm',
+      sourcemap: true
+    },
+    external: ['marked'],
+    plugins: [
+      resolve(),
+      commonjs(),
+      babel({
+        babelHelpers: 'bundled',
+        exclude: 'node_modules/**',
+        presets: [
+          ['@babel/preset-env', {
+            targets: {
+              esmodules: true
+            }
+          }]
+        ]
+      })
+    ]
+  },
+
+  // CommonJS build (for Node.js)
+  {
+    input: 'src/index.js',
+    output: {
+      file: 'dist/testdrive-jsui.cjs.js',
+      format: 'cjs',
+      sourcemap: true,
+      exports: 'named'
+    },
+    external: ['marked'],
+    plugins: [
+      resolve(),
+      commonjs(),
+      babel({
+        babelHelpers: 'bundled',
+        exclude: 'node_modules/**',
+        presets: [
+          ['@babel/preset-env', {
+            targets: {
+              node: '14'
+            }
+          }]
+        ]
+      })
+    ]
+  }
+];
+```
+
+#### 1.3: Verify Configuration
+
+```bash
+# Test build (shouldn't work yet - missing src/index.js)
+npm run build
+```
+
+**Expected**: Error about missing `src/index.js` (we'll create it in Phase 2)
+
+### Success Criteria
+- ✅ All npm packages installed
+- ✅ `rollup.config.js` created
+- ✅ No syntax errors in config
+
+---
+
+## Phase 2: Create Bundle Entry Point (Day 1, Afternoon)
+
+### Objective
+Create a unified entry point that imports all components and exports the main API.
+
+### Tasks
+
+#### 2.1: Reorganize Source Files
+
+**Create**: `src/` directory structure
+
+```bash
+mkdir -p src/core src/components src/controls src/utils src/widgets
+```
+
+**Strategy**: Keep original `js/` for development, create `src/` for bundling
+
+#### 2.2: Create Main Entry Point
+
+**Create**: `src/index.js`
+
+```javascript
+/**
+ * TestDrive-JSUI - Main Entry Point
+ *
+ * This file bundles all components into a single distributable library.
+ */
+
+// Core components (must be loaded first)
+import '../js/core/debug-system.js';
+import '../js/core/section-manager.js';
+
+// UI Components
+import '../js/components/dom-renderer.js';
+import '../js/components/document-controls.js';
+import '../js/components/debug-panel.js';
+
+// Control panels
+import '../js/controls/control-base.js';
+import '../js/controls/edit-control.js';
+import '../js/controls/debug-control.js';
+import '../js/controls/status-control.js';
+import '../js/controls/contents-control.js';
+
+// Utilities
+import '../js/utils/markdown-utils.js';
+
+// Main library class
+import { TestDriveJSUI } from '../js/testdrive-jsui.js';
+
+// Import CSS
+import '../static/css/editor.css';
+import '../static/css/controls.css';
+import '../static/css/themes/github.css';
+
+// Export main API
+export default TestDriveJSUI;
+export { TestDriveJSUI };
+
+// Export version
+export const version = '1.0.0';
+```
+
+#### 2.3: Ensure Proper Exports in Source Files
+
+**Update**: `js/testdrive-jsui.js` (already has exports, verify)
+
+```javascript
+// At end of file, ensure both export formats:
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = { TestDriveJSUI };
+}
+
+if (typeof window !== 'undefined') {
+    window.TestDriveJSUI = TestDriveJSUI;
+}
+
+// Add ES6 export for bundler
+export { TestDriveJSUI };
+```
+
+**Action**: Check all component files have proper exports
+
+```bash
+# Find files without exports
+grep -L "export" js/core/*.js js/components/*.js js/controls/*.js
+```
+
+**For each file without exports**, add at the end:
+
+```javascript
+// Example: js/core/section-manager.js
+export { SectionManager };
+```
+
+#### 2.4: Handle marked.js Peer Dependency
+
+**Update**: `src/index.js` to check for marked.js
+
+```javascript
+// At top of src/index.js
+if (typeof marked === 'undefined') {
+  console.warn(
+    'TestDrive-JSUI: marked.js is required but not found. ' +
+    'Please install: npm install marked'
+  );
+}
+```
+
+### Success Criteria
+- ✅ `src/index.js` created
+- ✅ All component files have proper exports
+- ✅ Build runs without errors: `npm run build`
+
+---
+
+## Phase 3: CSS Bundling (Day 2, Morning)
+
+### Objective
+Combine all CSS into a single distributable file with proper namespacing.
+
+### Tasks
+
+#### 3.1: Create CSS Entry Point
+
+**Create**: `src/styles.css`
+
+```css
+/**
+ * TestDrive-JSUI Styles
+ * Combined stylesheet for the markdown editor
+ */
+
+/* Base editor styles */
+@import '../static/css/editor.css';
+
+/* Control panels */
+@import '../static/css/controls.css';
+
+/* Default theme (GitHub) */
+@import '../static/css/themes/github.css';
+
+/* Reset and base styles */
+:root {
+  --testdrive-primary-color: #0366d6;
+  --testdrive-border-color: #e1e4e8;
+  --testdrive-background: #ffffff;
+  --testdrive-text-color: #24292e;
+}
+
+.testdrive-container {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+  line-height: 1.6;
+  color: var(--testdrive-text-color);
+}
+```
+
+#### 3.2: Update Rollup Config to Include CSS
+
+Already done in Phase 1 (postcss plugin). Verify it's working:
+
+```bash
+npm run build
+ls -lh dist/testdrive-jsui.css
+```
+
+#### 3.3: Create Minified CSS Version
+
+The postcss plugin with cssnano will create minified version automatically in production mode.
+
+### Success Criteria
+- ✅ `dist/testdrive-jsui.css` created
+- ✅ CSS is properly minified in production
+- ✅ Source maps generated
+
+---
+
+## Phase 4: Package Configuration (Day 2, Afternoon)
+
+### Objective
+Configure package.json for proper npm distribution.
+
+### Tasks
+
+#### 4.1: Update package.json
+
+**Update**: `package.json`
+
+```json
+{
+  "name": "testdrive-jsui",
+  "version": "1.0.0",
+  "description": "JavaScript-first markdown editor library with interactive UI",
+  "main": "dist/testdrive-jsui.cjs.js",
+  "module": "dist/testdrive-jsui.esm.js",
+  "browser": "dist/testdrive-jsui.min.js",
+  "style": "dist/testdrive-jsui.css",
+  "unpkg": "dist/testdrive-jsui.min.js",
+  "jsdelivr": "dist/testdrive-jsui.min.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "build:watch": "rollup -c -w",
+    "build:prod": "NODE_ENV=production rollup -c",
+    "dev": "npm run build:watch",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "prepublishOnly": "npm run build:prod && npm test",
+    "lint": "eslint js/**/*.js src/**/*.js",
+    "lint:fix": "eslint js/**/*.js src/**/*.js --fix",
+    "clean": "rm -rf dist/ coverage/",
+    "size": "npm run build:prod && du -h dist/*"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/markitect/testdrive-jsui.git"
+  },
+  "keywords": [
+    "markdown",
+    "editor",
+    "javascript",
+    "ui",
+    "wysiwyg",
+    "contenteditable",
+    "section-editing",
+    "interactive",
+    "browser",
+    "frontend",
+    "marked",
+    "markdown-editor"
+  ],
+  "author": "MarkiTect Team <team@markitect.dev>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/markitect/testdrive-jsui/issues"
+  },
+  "homepage": "https://github.com/markitect/testdrive-jsui#readme",
+  "peerDependencies": {
+    "marked": "^11.0.0 || ^12.0.0"
+  },
+  "peerDependenciesMeta": {
+    "marked": {
+      "optional": false
+    }
+  },
+  "devDependencies": {
+    "@babel/core": "^7.23.0",
+    "@babel/preset-env": "^7.23.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "autoprefixer": "^10.4.16",
+    "babel-jest": "^29.7.0",
+    "cssnano": "^6.0.1",
+    "eslint": "^8.57.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-jest": "^27.6.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "postcss": "^8.4.32",
+    "rollup": "^4.9.0",
+    "rollup-plugin-postcss": "^4.0.2"
+  },
+  "dependencies": {
+    "jsdom": "^23.0.0"
+  },
+  "engines": {
+    "node": ">=14.0.0",
+    "npm": ">=6.0.0"
+  }
+}
+```
+
+#### 4.2: Create .npmignore
+
+**Create**: `.npmignore`
+
+```
+# Development files
+js/tests/
+tests/
+examples/
+docs/
+node_modules/
+coverage/
+.nyc_output/
+
+# Source files (we ship dist/ only)
+js/
+src/
+static/
+
+# Build config
+rollup.config.js
+.eslintrc
+.babelrc
+jest.config.js
+tsconfig.json
+
+# Documentation (except README)
+CLAUDE.md
+MIGRATION_STATUS.md
+CLEANUP_REPORT.md
+STANDALONE_PLAN.md
+NPM_PUBLICATION_PLAN.md
+
+# VCS
+.git/
+.gitignore
+.gitattributes
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Python stuff
+__pycache__/
+*.py[cod]
+*.egg-info/
+venv/
+.pytest_cache/
+
+# Misc
+*.log
+.env
+```
+
+#### 4.3: Verify Files Included in Package
+
+```bash
+# See what will be published
+npm pack --dry-run
+
+# Should only include:
+# - dist/
+# - README.md
+# - LICENSE
+# - package.json
+```
+
+### Success Criteria
+- ✅ package.json properly configured
+- ✅ .npmignore excludes development files
+- ✅ `npm pack --dry-run` shows correct files
+- ✅ Bundle size reasonable (<100KB minified)
+
+---
+
+## Phase 5: Documentation Updates (Day 3, Morning)
+
+### Objective
+Update README and create usage documentation for npm users.
+
+### Tasks
+
+#### 5.1: Update Main README
+
+**Update**: `README.md` - Add prominent npm usage section
+
+```markdown
+# TestDrive-JSUI
+
+**A JavaScript-first markdown editor library.**
+
+[![npm version](https://img.shields.io/npm/v/testdrive-jsui.svg)](https://www.npmjs.com/package/testdrive-jsui)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+[![Bundle Size](https://img.shields.io/bundlephobia/minzip/testdrive-jsui)](https://bundlephobia.com/package/testdrive-jsui)
+
+TestDrive-JSUI is a pure JavaScript library for interactive markdown editing with section-based management. Works standalone in any browser with zero backend requirements.
+
+## Quick Start
+
+### CDN Usage (Fastest)
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/testdrive-jsui@1/dist/testdrive-jsui.css">
+</head>
+<body>
+  <div id="editor"></div>
+
+  <!-- Peer dependency -->
+  <script src="https://cdn.jsdelivr.net/npm/marked@11/marked.min.js"></script>
+
+  <!-- TestDrive-JSUI -->
+  <script src="https://cdn.jsdelivr.net/npm/testdrive-jsui@1/dist/testdrive-jsui.min.js"></script>
+
+  <script>
+    const editor = new TestDriveJSUI({
+      container: '#editor',
+      markdown: '# Hello World\n\nEdit me!',
+      mode: 'edit'
+    });
+  </script>
+</body>
+</html>
+```
+
+### npm Installation
+
+```bash
+npm install testdrive-jsui marked
+```
+
+#### ES6 Modules
+
+```javascript
+import TestDriveJSUI from 'testdrive-jsui';
+import 'testdrive-jsui/dist/testdrive-jsui.css';
+
+const editor = new TestDriveJSUI({
+  container: '#editor',
+  markdown: '# Hello World',
+  mode: 'edit'
+});
+
+// Listen to events
+editor.on('save', (data) => {
+  console.log('Saved:', data.markdown);
+});
+```
+
+#### CommonJS
+
+```javascript
+const TestDriveJSUI = require('testdrive-jsui');
+require('testdrive-jsui/dist/testdrive-jsui.css');
+
+const editor = new TestDriveJSUI({...});
+```
+
+### Browser (UMD)
+
+```html
+<script src="node_modules/marked/marked.min.js"></script>
+<script src="node_modules/testdrive-jsui/dist/testdrive-jsui.min.js"></script>
+<script>
+  const editor = new TestDriveJSUI({...});
+</script>
+```
+
+## Installation
+
+### Via npm
+
+```bash
+npm install testdrive-jsui marked
+```
+
+### Via CDN
+
+```html
+<!-- Production (minified) -->
+<script src="https://cdn.jsdelivr.net/npm/testdrive-jsui@1/dist/testdrive-jsui.min.js"></script>
+
+<!-- Development (with source maps) -->
+<script src="https://cdn.jsdelivr.net/npm/testdrive-jsui@1/dist/testdrive-jsui.js"></script>
+
+<!-- Alternative CDN -->
+<script src="https://unpkg.com/testdrive-jsui@1/dist/testdrive-jsui.min.js"></script>
+```
+
+### Download
+
+Download from [GitHub Releases](https://github.com/markitect/testdrive-jsui/releases)
+
+## Requirements
+
+- **marked.js** v11.0.0+ (peer dependency)
+- Modern browser with ES6 support (Chrome 60+, Firefox 60+, Safari 12+, Edge 79+)
+
+[... rest of existing README ...]
+```
+
+#### 5.2: Create CHANGELOG.md
+
+**Create**: `CHANGELOG.md`
+
+```markdown
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.0.0] - 2025-12-16
+
+### Added
+- Initial public release
+- JavaScript-first markdown editor library
+- Section-based editing with independent section management
+- Interactive UI with compass-positioned control panels
+- Support for edit and view modes
+- Event-driven API for integration
+- Auto-save functionality
+- Keyboard shortcuts
+- LocalStorage integration
+- Download markdown as .md file
+- Table of contents generation
+- Debug panel with logging
+- Status control showing document statistics
+- Comprehensive test suite (Jest + pytest)
+- Full documentation
+
+### Features
+- **Core Library**: Pure JavaScript with marked.js as only dependency
+- **Bundled Distribution**: Single-file UMD, ESM, and CJS builds
+- **CSS Included**: Complete styling with GitHub theme
+- **Peer Dependency**: Uses marked.js for markdown parsing
+- **Multiple Installation Methods**: npm, CDN, direct download
+- **Source Maps**: Available for debugging
+
+### Technical
+- Built with Rollup
+- Transpiled with Babel for broad browser support
+- Minified with Terser
+- CSS processed with PostCSS and autoprefixer
+- 68 JavaScript tests passing (Jest)
+- 15 Python integration tests passing (pytest)
+
+## [Unreleased]
+
+Nothing yet.
+```
+
+#### 5.3: Create LICENSE file
+
+**Create**: `LICENSE`
+
+```
+MIT License
+
+Copyright (c) 2025 MarkiTect Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```
+
+### Success Criteria
+- ✅ README has clear npm installation instructions
+- ✅ CHANGELOG.md created following standard format
+- ✅ LICENSE file present
+- ✅ Documentation covers all installation methods
+
+---
+
+## Phase 6: Testing and Validation (Day 3, Afternoon)
+
+### Objective
+Verify the built package works correctly in all environments.
+
+### Tasks
+
+#### 6.1: Test Build Output
+
+```bash
+# Clean and rebuild
+npm run clean
+npm run build:prod
+
+# Check output
+ls -lh dist/
+
+# Expected files:
+# - testdrive-jsui.js (UMD, ~120KB)
+# - testdrive-jsui.js.map
+# - testdrive-jsui.min.js (~50KB)
+# - testdrive-jsui.min.js.map
+# - testdrive-jsui.esm.js (~110KB)
+# - testdrive-jsui.esm.js.map
+# - testdrive-jsui.cjs.js (~110KB)
+# - testdrive-jsui.cjs.js.map
+# - testdrive-jsui.css (~15KB)
+# - testdrive-jsui.css.map
+```
+
+#### 6.2: Create Test HTML Files
+
+**Create**: `test/cdn-test.html`
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TestDrive-JSUI - CDN Test</title>
+    <link rel="stylesheet" href="../dist/testdrive-jsui.css">
+    <style>
+        body {
+            font-family: system-ui, -apple-system, sans-serif;
+            max-width: 1200px;
+            margin: 40px auto;
+            padding: 20px;
+            background: #f5f5f5;
+        }
+        #editor {
+            background: white;
+            min-height: 400px;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        }
+        h1 { color: #333; }
+        .status {
+            background: #e3f2fd;
+            padding: 10px;
+            border-radius: 4px;
+            margin-bottom: 20px;
+        }
+    </style>
+</head>
+<body>
+    <h1>TestDrive-JSUI Bundle Test</h1>
+    <div class="status">
+        <strong>Status:</strong> <span id="status">Loading...</span>
+    </div>
+    <div id="editor"></div>
+
+    <!-- Peer dependency -->
+    <script src="https://cdn.jsdelivr.net/npm/marked@11/marked.min.js"></script>
+
+    <!-- TestDrive-JSUI from dist -->
+    <script src="../dist/testdrive-jsui.js"></script>
+
+    <script>
+        document.getElementById('status').textContent = 'Initializing...';
+
+        try {
+            const editor = new TestDriveJSUI({
+                container: '#editor',
+                markdown: `# Bundle Test
+
+## Success! 🎉
+
+This page is using the **bundled distribution** of TestDrive-JSUI.
+
+### What's being tested:
+- ✅ UMD bundle loading
+- ✅ CSS bundle loading
+- ✅ Peer dependency (marked.js)
+- ✅ All components initialized
+- ✅ Event system working
+
+Try editing this content!`,
+                mode: 'edit',
+                theme: 'github'
+            });
+
+            editor.on('initialized', () => {
+                document.getElementById('status').textContent = '✅ Successfully initialized!';
+                console.log('Editor initialized:', editor.getStatus());
+            });
+
+            editor.on('save', (data) => {
+                console.log('Save event:', data);
+                alert('Save triggered! Check console for data.');
+            });
+
+        } catch (error) {
+            document.getElementById('status').textContent = '❌ Error: ' + error.message;
+            console.error('Initialization error:', error);
+        }
+    </script>
+</body>
+</html>
+```
+
+**Create**: `test/esm-test.html`
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TestDrive-JSUI - ESM Test</title>
+    <link rel="stylesheet" href="../dist/testdrive-jsui.css">
+</head>
+<body>
+    <h1>ESM Bundle Test</h1>
+    <div id="editor"></div>
+
+    <script type="module">
+        import TestDriveJSUI from '../dist/testdrive-jsui.esm.js';
+
+        // Note: marked.js would need to be imported as ESM too
+        // For this test, we'll load it from CDN in a regular script tag
+
+        window.addEventListener('DOMContentLoaded', () => {
+            const editor = new TestDriveJSUI({
+                container: '#editor',
+                markdown: '# ESM Test\n\nThis uses the ES Module build.',
+                mode: 'edit'
+            });
+
+            console.log('ESM editor initialized:', editor);
+        });
+    </script>
+
+    <script src="https://cdn.jsdelivr.net/npm/marked@11/marked.min.js"></script>
+</body>
+</html>
+```
+
+#### 6.3: Test in Different Environments
+
+**Test 1: Browser (UMD)**
+```bash
+# Open in browser
+open test/cdn-test.html
+# Or: python -m http.server 8000
+```
+
+**Test 2: Node.js (CommonJS)**
+
+**Create**: `test/node-test.js`
+
+```javascript
+// test/node-test.js
+const { TestDriveJSUI } = require('../dist/testdrive-jsui.cjs.js');
+
+console.log('Testing TestDrive-JSUI in Node.js...');
+
+try {
+    const editor = new TestDriveJSUI({
+        container: '#test',
+        markdown: '# Node Test'
+    });
+    console.log('✅ Module loads in Node.js');
+    console.log('✅ TestDriveJSUI class available');
+    console.log('Status:', editor.getStatus());
+} catch (error) {
+    console.error('❌ Error:', error.message);
+    process.exit(1);
+}
+```
+
+```bash
+node test/node-test.js
+```
+
+**Test 3: Local npm install**
+
+```bash
+# Create test project
+mkdir -p /tmp/testdrive-test
+cd /tmp/testdrive-test
+npm init -y
+
+# Install from local build
+npm install /home/worsch/markitect_project/capabilities/testdrive-jsui/testdrive-jsui-1.0.0.tgz
+
+# Test import
+node -e "const TD = require('testdrive-jsui'); console.log('✅ Package installed:', TD)"
+```
+
+#### 6.4: Verify Package Contents
+
+```bash
+# Create tarball
+npm pack
+
+# Extract and inspect
+tar -tzf testdrive-jsui-1.0.0.tgz | head -30
+
+# Should see:
+# package/package.json
+# package/README.md
+# package/LICENSE
+# package/CHANGELOG.md
+# package/dist/testdrive-jsui.js
+# package/dist/testdrive-jsui.min.js
+# package/dist/testdrive-jsui.esm.js
+# package/dist/testdrive-jsui.cjs.js
+# package/dist/testdrive-jsui.css
+# package/dist/*.map
+```
+
+#### 6.5: Run All Tests
+
+```bash
+# JavaScript tests
+npm test
+
+# Build
+npm run build:prod
+
+# Check sizes
+npm run size
+```
+
+### Success Criteria
+- ✅ All test HTML files load without errors
+- ✅ Node.js can require the CJS build
+- ✅ Package tarball contains only necessary files
+- ✅ All tests pass (68 Jest tests)
+- ✅ Bundle size < 100KB minified
+- ✅ CSS loads correctly
+- ✅ No console errors in browser
+
+---
+
+## Phase 7: Pre-Publication Setup (Day 4, Morning)
+
+### Objective
+Prepare npm account and repository for publication.
+
+### Tasks
+
+#### 7.1: Setup npm Account
+
+```bash
+# Login to npm (or create account)
+npm login
+
+# Verify login
+npm whoami
+
+# Check package name availability
+npm view testdrive-jsui
+
+# Expected: "npm ERR! 404 'testdrive-jsui' is not in the npm registry"
+# (Good - name is available!)
+```
+
+#### 7.2: Setup GitHub Repository
+
+**Option A: Separate Repository (Recommended for standalone)**
+
+```bash
+# Create new repo on GitHub: testdrive-jsui
+# Then:
+cd /home/worsch/markitect_project/capabilities/testdrive-jsui
+
+# Initialize git (if not already)
+git init
+git add .
+git commit -m "feat: initial release v1.0.0"
+
+# Add remote
+git remote add origin https://github.com/YOUR-USERNAME/testdrive-jsui.git
+git branch -M main
+git push -u origin main
+```
+
+**Option B: Keep in MarkiTect monorepo**
+
+Update package.json URLs to point to subdirectory:
+
+```json
+"repository": {
+  "type": "git",
+  "url": "https://github.com/markitect/markitect.git",
+  "directory": "capabilities/testdrive-jsui"
+}
+```
+
+#### 7.3: Create GitHub Release
+
+```bash
+# Tag the release
+git tag -a v1.0.0 -m "Release v1.0.0 - Initial public release"
+git push origin v1.0.0
+
+# On GitHub, create release from tag
+# - Title: "v1.0.0 - Initial Release"
+# - Description: Copy from CHANGELOG.md
+# - Attach: dist/ folder as zip
+```
+
+#### 7.4: Final Pre-Publication Checklist
+
+```bash
+# Run all checks
+npm run lint           # No lint errors
+npm test              # All tests pass
+npm run build:prod    # Clean build
+npm pack --dry-run    # Verify contents
+npm publish --dry-run # Simulate publish
+```
+
+### Success Criteria
+- ✅ npm account setup and verified
+- ✅ GitHub repository created/configured
+- ✅ Git tags created
+- ✅ All pre-publish checks pass
+- ✅ Package name available on npm
+
+---
+
+## Phase 8: Publication (Day 4, Afternoon)
+
+### Objective
+Publish to npm and verify availability.
+
+### Tasks
+
+#### 8.1: Publish to npm
+
+```bash
+cd /home/worsch/markitect_project/capabilities/testdrive-jsui
+
+# Final check
+npm run prepublishOnly
+
+# Publish!
+npm publish
+
+# Expected output:
+# + testdrive-jsui@1.0.0
+```
+
+#### 8.2: Verify Publication
+
+```bash
+# Wait 2-3 minutes for npm to propagate
+
+# Check package page
+open https://www.npmjs.com/package/testdrive-jsui
+
+# Test installation
+mkdir -p /tmp/verify-npm
+cd /tmp/verify-npm
+npm init -y
+npm install testdrive-jsui marked
+
+# Test it works
+node -e "const TD = require('testdrive-jsui'); console.log('✅ Works!', TD)"
+```
+
+#### 8.3: Verify CDN Access
+
+```bash
+# Wait 5-10 minutes for CDN propagation
+
+# Check jsdelivr
+curl -I https://cdn.jsdelivr.net/npm/testdrive-jsui@1.0.0/dist/testdrive-jsui.min.js
+
+# Check unpkg
+curl -I https://unpkg.com/testdrive-jsui@1.0.0/dist/testdrive-jsui.min.js
+
+# Both should return 200 OK
+```
+
+#### 8.4: Create CDN Demo Page
+
+**Create**: `docs/cdn-demo.html` (commit to repo for GitHub Pages)
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TestDrive-JSUI - Live Demo</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/testdrive-jsui@1/dist/testdrive-jsui.css">
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+        }
+        .container {
+            background: white;
+            border-radius: 12px;
+            padding: 40px;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+        }
+        h1 {
+            color: #667eea;
+            margin-top: 0;
+        }
+        .badge {
+            display: inline-block;
+            background: #667eea;
+            color: white;
+            padding: 4px 12px;
+            border-radius: 4px;
+            font-size: 14px;
+            margin-right: 10px;
+        }
+        #editor {
+            margin-top: 20px;
+            min-height: 500px;
+        }
+        .footer {
+            margin-top: 20px;
+            text-align: center;
+            color: #666;
+            font-size: 14px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🚀 TestDrive-JSUI Live Demo</h1>
+        <p>
+            <span class="badge">v1.0.0</span>
+            <span class="badge">Pure JavaScript</span>
+            <span class="badge">Zero Backend</span>
+        </p>
+
+        <div id="editor"></div>
+
+        <div class="footer">
+            <p>
+                <strong>TestDrive-JSUI</strong> •
+                <a href="https://github.com/markitect/testdrive-jsui">GitHub</a> •
+                <a href="https://www.npmjs.com/package/testdrive-jsui">npm</a>
+            </p>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/marked@11/marked.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/testdrive-jsui@1/dist/testdrive-jsui.min.js"></script>
+
+    <script>
+        const editor = new TestDriveJSUI({
+            container: '#editor',
+            markdown: `# Welcome to TestDrive-JSUI! 🎉
+
+This is a **live demo** running directly from npm CDN. No build step, no backend, just pure JavaScript!
+
+## Try It Out
+
+This editor is fully interactive. Try:
+- Clicking any section to edit it
+- Using **Ctrl+S** to save (stores in localStorage)
+- Using the control panels (positioned around the edges)
+
+## What Makes This Special?
+
+### 🎯 Pure JavaScript
+- Zero backend required
+- Works from \`file://\` URLs
+- Only dependency: marked.js
+
+### 📦 Easy Installation
+\`\`\`bash
+npm install testdrive-jsui marked
+\`\`\`
+
+### 🌐 CDN Ready
+\`\`\`html
+<script src="https://cdn.jsdelivr.net/npm/testdrive-jsui@1/dist/testdrive-jsui.min.js"></script>
+\`\`\`
+
+### ⚡ Section-Based Editing
+Each section (separated by headers) can be edited independently. Click on any section to try it!
+
+## Features
+
+- ✅ Interactive markdown editing
+- ✅ Section management
+- ✅ Auto-save to localStorage
+- ✅ Keyboard shortcuts
+- ✅ Download as .md file
+- ✅ Table of contents
+- ✅ Status indicators
+- ✅ Debug panel (for developers)
+- ✅ Event-driven API
+
+## Code Example
+
+\`\`\`javascript
+const editor = new TestDriveJSUI({
+  container: '#editor',
+  markdown: '# Hello World',
+  mode: 'edit',
+  autosave: true
+});
+
+editor.on('save', (data) => {
+  console.log('Saved:', data.markdown);
+});
+\`\`\`
+
+---
+
+**Built with ❤️ by the MarkiTect Team**`,
+            mode: 'edit',
+            autosave: true,
+            controls: {
+                editControl: true,
+                statusControl: true,
+                contentsControl: true
+            }
+        });
+
+        editor.on('initialized', () => {
+            console.log('✅ TestDrive-JSUI initialized from CDN!');
+        });
+    </script>
+</body>
+</html>
+```
+
+**Commit and enable GitHub Pages:**
+
+```bash
+git add docs/cdn-demo.html
+git commit -m "docs: add live CDN demo page"
+git push
+
+# On GitHub: Settings → Pages → Source: main branch → /docs folder
+```
+
+### Success Criteria
+- ✅ Package visible on npmjs.com
+- ✅ Can install via `npm install testdrive-jsui`
+- ✅ CDN links work (jsdelivr, unpkg)
+- ✅ Demo page works from GitHub Pages
+- ✅ Package appears in npm search results
+
+---
+
+## Phase 9: Post-Publication (Day 5)
+
+### Objective
+Announce release and monitor feedback.
+
+### Tasks
+
+#### 9.1: Update Repository README Badge
+
+**Add to top of README.md:**
+
+```markdown
+[![npm version](https://img.shields.io/npm/v/testdrive-jsui.svg?style=flat-square)](https://www.npmjs.com/package/testdrive-jsui)
+[![npm downloads](https://img.shields.io/npm/dm/testdrive-jsui.svg?style=flat-square)](https://www.npmjs.com/package/testdrive-jsui)
+[![Bundle Size](https://img.shields.io/bundlephobia/minzip/testdrive-jsui?style=flat-square)](https://bundlephobia.com/package/testdrive-jsui)
+[![License](https://img.shields.io/npm/l/testdrive-jsui.svg?style=flat-square)](LICENSE)
+[![GitHub Stars](https://img.shields.io/github/stars/markitect/testdrive-jsui?style=flat-square)](https://github.com/markitect/testdrive-jsui)
+```
+
+#### 9.2: Create Announcement
+
+**Post on:**
+- GitHub Discussions (if enabled)
+- Twitter/X
+- Reddit (r/javascript, r/webdev)
+- Dev.to
+- Hacker News (Show HN)
+
+**Example announcement:**
+
+```markdown
+🚀 Introducing TestDrive-JSUI v1.0.0
+
+A JavaScript-first markdown editor library that works standalone in any browser.
+
+✨ Features:
+- Pure JS (only dependency: marked.js)
+- Section-based editing
+- Zero backend required
+- Works from file:// URLs
+- Event-driven API
+- 50KB minified
+
+📦 Installation:
+npm install testdrive-jsui marked
+
+🔗 Links:
+- npm: https://npmjs.com/package/testdrive-jsui
+- GitHub: https://github.com/markitect/testdrive-jsui
+- Demo: https://markitect.github.io/testdrive-jsui/demo
+
+Try it with just a CDN link - no build step required!
+```
+
+#### 9.3: Monitor Initial Feedback
+
+```bash
+# Watch npm downloads
+npm info testdrive-jsui
+
+# Monitor GitHub
+# - Watch for issues
+# - Check stars/forks
+# - Review any PRs
+
+# Check npm stats
+open https://npm-stat.com/charts.html?package=testdrive-jsui
+```
+
+#### 9.4: Create Example Projects
+
+**Create example repos:**
+
+1. **testdrive-jsui-react-example**
+2. **testdrive-jsui-vue-example**
+3. **testdrive-jsui-vanilla-example**
+
+Each showing integration with popular frameworks.
+
+### Success Criteria
+- ✅ Badges added to README
+- ✅ Announcement posted
+- ✅ Monitoring setup for feedback
+- ✅ Example projects created (optional)
+
+---
+
+## Troubleshooting Common Issues
+
+### Build Fails
+
+```bash
+# Clear cache and rebuild
+rm -rf node_modules package-lock.json dist/
+npm install
+npm run build:prod
+```
+
+### Publish Fails
+
+```bash
+# Check npm login
+npm whoami
+
+# Check package name
+npm view testdrive-jsui
+
+# Try with verbose logging
+npm publish --verbose
+```
+
+### CDN Not Working
+
+```bash
+# CDNs take 5-30 minutes to propagate
+# Try purging cache:
+curl -X PURGE https://cdn.jsdelivr.net/npm/testdrive-jsui@1/dist/testdrive-jsui.min.js
+```
+
+### Package Too Large
+
+```bash
+# Check what's included
+npm pack
+tar -tzf testdrive-jsui-1.0.0.tgz
+
+# Check .npmignore is excluding properly
+npm pack --dry-run
+```
+
+---
+
+## Final Checklist
+
+### Before Publishing
+- [ ] All tests passing (`npm test`)
+- [ ] Build successful (`npm run build:prod`)
+- [ ] Package size acceptable (<100KB minified)
+- [ ] README updated with installation instructions
+- [ ] CHANGELOG.md created
+- [ ] LICENSE file present
+- [ ] .npmignore properly configured
+- [ ] package.json metadata complete
+- [ ] Git repository tagged
+- [ ] Test HTML files work
+- [ ] Verified in clean npm install
+
+### After Publishing
+- [ ] Package visible on npmjs.com
+- [ ] CDN links working (jsdelivr, unpkg)
+- [ ] GitHub release created
+- [ ] Demo page live
+- [ ] Badges added to README
+- [ ] Announcement posted
+- [ ] Monitoring setup
+
+---
+
+## Timeline Summary
+
+| Day | Phase | Duration | Tasks |
+|-----|-------|----------|-------|
+| 1 AM | Phase 1 | 3h | Build system setup |
+| 1 PM | Phase 2 | 4h | Create entry point |
+| 2 AM | Phase 3 | 2h | CSS bundling |
+| 2 PM | Phase 4 | 3h | Package configuration |
+| 3 AM | Phase 5 | 3h | Documentation |
+| 3 PM | Phase 6 | 4h | Testing & validation |
+| 4 AM | Phase 7 | 2h | Pre-publication setup |
+| 4 PM | Phase 8 | 2h | Publication |
+| 5 | Phase 9 | 3h | Post-publication |
+
+**Total**: ~26 hours (~3-4 working days)
+
+---
+
+## Success Metrics
+
+### Week 1
+- [ ] 10+ npm downloads
+- [ ] 0 critical issues reported
+- [ ] CDN availability 100%
+
+### Month 1
+- [ ] 100+ npm downloads
+- [ ] 10+ GitHub stars
+- [ ] 1+ community contribution
+
+### Quarter 1
+- [ ] 1000+ npm downloads
+- [ ] Featured in a blog post
+- [ ] Used in at least 3 external projects
+
+---
+
+**End of NPM Publication Workplan**
diff --git a/TODO.md b/TODO.md
new file mode 100644
index 0000000..4f04e15
--- /dev/null
+++ b/TODO.md
@@ -0,0 +1,23 @@
+# Todofile
+
+This is a "to do next" file, particularly useful to keep the human and a coding assistant in sync.
+
+The format is based on [Keep a Todofile V0.0.1](https://coulomb.social/open/KeepaTodofile).
+
+The structure organizes **future tasks** by their impact, just as a changelog organizes past changes by their impact.
+
+***
+
+## [Unreleased] - *Active Vibe-Coding State* 💡
+
+This section is for tasks currently being discussed with or worked on by the coding assistant. These are the ephemeral, flow-of-thought tasks.
+
+1) Implement the  NPM_PUBLICATION_PLAN.md
+2) Make sure that Markitect integration still works fine
+3) Update STANDALONE_PLAN.md and decide if it should be implemented
+
+***
+
+## Completed Tasks
+
+*Recent completed tasks have been documented in CHANGELOG.md following Keep a Changelog format.*