build: implement bundling system with Rollup

Phase 1-3 Complete:
- ✅ Installed Rollup with all required plugins
- ✅ Created rollup.config.js for UMD, ESM, CJS builds
- ✅ Created src/index.js entry point
- ✅ Created src/styles.css for CSS bundling
- ✅ Added ES6 exports to debug-system.js
- ✅ Excluded Node.js-only html-generator.js from bundle

Build outputs:
- dist/testdrive-jsui.js (217KB UMD)
- dist/testdrive-jsui.min.js (107KB minified!)
- dist/testdrive-jsui.esm.js (199KB ES Module)
- dist/testdrive-jsui.cjs.js (199KB CommonJS)
- dist/testdrive-jsui.css (minified, all styles inlined)

All builds include source maps for debugging.

js/core/debug-system.js

@@ -287,4 +287,7 @@ class MarkitectDebugSystem {
 }
 
 // Initialize and expose globally
-window.MarkitectDebugSystem = new MarkitectDebugSystem();
+window.MarkitectDebugSystem = new MarkitectDebugSystem();
+
+// ES6 export for bundler
+export { MarkitectDebugSystem };

package.json

@@ -37,12 +37,22 @@
   "devDependencies": {
     "@babel/core": "^7.23.0",
     "@babel/preset-env": "^7.23.0",
+    "@rollup/plugin-babel": "^6.1.0",
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "autoprefixer": "^10.4.23",
     "babel-jest": "^29.7.0",
+    "cssnano": "^7.1.2",
     "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"
+    "jest-environment-jsdom": "^29.7.0",
+    "postcss": "^8.5.6",
+    "postcss-import": "^16.1.1",
+    "rollup": "^4.53.5",
+    "rollup-plugin-postcss": "^4.0.2"
   },
   "dependencies": {
     "jsdom": "^23.0.0"

rollup.config.js

@@ -0,0 +1,123 @@
+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 postcssImport from 'postcss-import';
+import autoprefixer from 'autoprefixer';
+import cssnano from 'cssnano';
+
+const production = !process.env.ROLLUP_WATCH;
+
+// Shared Babel config
+const babelConfig = {
+  babelHelpers: 'bundled',
+  exclude: 'node_modules/**',
+  presets: [
+    ['@babel/preset-env', {
+      targets: {
+        browsers: ['> 0.5%', 'last 2 versions', 'not dead']
+      }
+    }]
+  ]
+};
+
+// Shared plugins (without CSS)
+const getPluginsWithoutCSS = () => [
+  resolve({ browser: true }),
+  commonjs(),
+  babel(babelConfig),
+  // PostCSS but don't extract (CSS already extracted in first build)
+  postcss({
+    inject: false,  // Don't inject or extract, just process
+    extract: false
+  })
+];
+
+export default [
+  // UMD build (browser-friendly, default) - EXTRACTS CSS
+  {
+    input: 'src/index.js',
+    output: {
+      name: 'TestDriveJSUI',
+      file: 'dist/testdrive-jsui.js',
+      format: 'umd',
+      sourcemap: true,
+      exports: 'named',  // Fix mixing named/default exports warning
+      globals: {
+        marked: 'marked'
+      },
+      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(babelConfig),
+      postcss({
+        extract: 'testdrive-jsui.css',  // Extract CSS to separate file
+        minimize: production,
+        plugins: [
+          postcssImport(),  // Resolve @import statements first
+          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,
+      exports: 'named',
+      globals: {
+        marked: 'marked'
+      }
+    },
+    external: ['marked'],
+    plugins: [
+      ...getPluginsWithoutCSS(),
+      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: getPluginsWithoutCSS()
+  },
+
+  // 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: getPluginsWithoutCSS()
+  }
+];

src/index.js

@@ -0,0 +1,59 @@
+/**
+ * TestDrive-JSUI - Main Entry Point
+ *
+ * This file bundles all components into a single distributable library.
+ *
+ * @version 1.0.0
+ * @license MIT
+ */
+
+// Import CSS (will be extracted by postcss plugin)
+import './styles.css';
+
+// 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/config-loader.js';
+// Note: html-generator.js is Node.js only (uses 'fs'), excluded from browser bundle
+
+// Widgets (if needed)
+import '../js/widgets/base/Widget.js';
+import '../js/widgets/base/UIWidget.js';
+import '../js/widgets/navigation/DocumentNavigator.js';
+
+// Plugins
+import '../js/plugins/document-navigator-plugin.js';
+
+// Main library class
+// Note: testdrive-jsui.js already exports in multiple formats
+// We'll import it and re-export
+
+// The main class is defined in testdrive-jsui.js
+// Since all dependencies are loaded above, we can now load the main class
+import '../js/testdrive-jsui.js';
+
+// Get the TestDriveJSUI from window (set by testdrive-jsui.js)
+// In UMD build, this will be available globally
+const TestDriveJSUI = (typeof window !== 'undefined' && window.TestDriveJSUI)
+  || (typeof global !== 'undefined' && global.TestDriveJSUI);
+
+// Export for ES modules and CommonJS
+export default TestDriveJSUI;
+export { TestDriveJSUI };
+
+// Export version
+export const version = '1.0.0';

src/styles.css

@@ -0,0 +1,38 @@
+/**
+ * TestDrive-JSUI Styles
+ * Combined stylesheet for the markdown editor
+ *
+ * @version 1.0.0
+ * @license MIT
+ */
+
+/* Base editor styles */
+@import '../static/css/editor.css';
+
+/* Control panels */
+@import '../static/css/controls.css';
+
+/* Default theme (GitHub) */
+@import '../static/css/themes/github.css';
+
+/* CSS Variables and Base Styles */
+:root {
+  --testdrive-primary-color: #0366d6;
+  --testdrive-border-color: #e1e4e8;
+  --testdrive-background: #ffffff;
+  --testdrive-text-color: #24292e;
+  --testdrive-hover-bg: #f6f8fa;
+  --testdrive-focus-shadow: rgba(3, 102, 214, 0.3);
+}
+
+.testdrive-container {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+  line-height: 1.6;
+  color: var(--testdrive-text-color);
+  background: var(--testdrive-background);
+}
+
+/* Ensure smooth transitions */
+* {
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+}