2 files changed, 167 insertions, 0 deletions
diff --git a/.demo/EDITOR-README.md b/.demo/EDITOR-README.md
new file mode 100644
index 0000000..9195fe2
--- /dev/null
+++ b/.demo/EDITOR-README.md
@@ -0,0 +1,109 @@
+# Adelie Editor - Standalone Usage
+
+The Adelie Editor is a vim-enabled CodeMirror editor with a retro aesthetic, syntax highlighting, and theme support.
+
+## Quick Start
+
+### 1. Include the files
+
+```html
+<!-- CSS (required for styling) -->
+<link rel="stylesheet" href="https://beta.adelie.liz.coffee/bundle.css" />
+
+<!-- Editor JS -->
+<script src="https://beta.adelie.liz.coffee/adelie-editor.js"></script>
+```
+
+### 2. Add a container element
+
+```html
+<div id="my-editor"></div>
+```
+
+### 3. Initialize the editor
+
+```html
+<script>
+  adelieEditor.init('#my-editor', {
+    language: 'javascript',
+    initialCode: '// Your code here'
+  });
+</script>
+```
+
+## API Reference
+
+### `adelieEditor.init(element, options)`
+
+Initialize an editor in the specified element.
+
+**Parameters:**
+- `element` (string | HTMLElement) - Container element or CSS selector
+- `options` (optional):
+  - `language` ('javascript' | 'css' | 'html') - Programming language (default: 'javascript')
+  - `initialCode` (string) - Initial code content (default: '')
+  - `theme` ('light' | 'dark') - Color theme (default: auto-detected from `data-theme` attribute)
+
+**Returns:** EditorView instance
+
+**Example:**
+```javascript
+const editor = adelieEditor.init('#my-editor', {
+  language: 'css',
+  initialCode: '.my-class { color: red; }'
+});
+```
+
+### Theme Switching
+
+The editor automatically detects theme changes on the `<html>` element:
+
+```javascript
+// Switch to dark mode
+document.documentElement.setAttribute('data-theme', 'dark');
+
+// Switch to light mode
+document.documentElement.removeAttribute('data-theme');
+```
+
+The editor will automatically update its theme when the `data-theme` attribute changes.
+
+## Features
+
+- **Vim Mode**: Full vim keybindings (enabled by default)
+- **Relative Line Numbers**: Vim-style relative numbering
+- **Auto-closing Brackets**: Automatically closes `()`, `{}`, `[]`, `""`, `''`
+- **Whitespace Indicators**: Shows dots for spaces/tabs when text is selected
+- **Syntax Highlighting**: Matches Prism.js colors for consistency
+- **Theme Support**: Light and dark themes with retro styling
+
+## Complete Example
+
+See `example-editor.html` for a working example:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link rel="stylesheet" href="dist/bundle.css" />
+</head>
+<body>
+    <div id="my-editor"></div>
+
+    <script src="dist/adelie-editor.js"></script>
+    <script>
+        adelieEditor.init('#my-editor', {
+            language: 'javascript',
+            initialCode: 'console.log("Hello World!");'
+        });
+    </script>
+</body>
+</html>
+```
+
+## File Size
+
+- **bundle.css**: ~23 KB (minified)
+- **adelie-editor.js**: ~596 KB (minified, includes CodeMirror + vim mode)
+
+The editor bundle is self-contained and includes all dependencies.
diff --git a/.demo/example-editor.html b/.demo/example-editor.html
new file mode 100644
index 0000000..f6505bc
--- /dev/null
+++ b/.demo/example-editor.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Adelie Editor - Standalone Example</title>
+    <link rel="stylesheet" href="dist/bundle.css" />
+</head>
+<body>
+    <header>
+        <h1>Adelie Editor Standalone Example</h1>
+        <input type="checkbox" id="theme-toggle" class="toggle" aria-label="Toggle dark mode" />
+    </header>
+
+    <main style="max-width: 1000px; margin: 0 auto; padding: 2rem;">
+        <article>
+            <h2>Simple Usage</h2>
+            <div id="my-editor"></div>
+        </article>
+
+        <article style="margin-top: 3rem;">
+            <h2>With Options</h2>
+            <div id="css-editor"></div>
+        </article>
+    </main>
+
+    <!-- Load the standalone editor bundle -->
+    <script src="dist/adelie-editor.js"></script>
+
+    <script>
+        // Simple initialization
+        const editor1 = adelieEditor.init('#my-editor', {
+            language: 'javascript',
+            initialCode: `// Type your code here
+function hello() {
+  console.log("Hello from Adelie Editor!");
+}`
+        });
+
+        // With custom options
+        const editor2 = adelieEditor.init('#css-editor', {
+            language: 'css',
+            initialCode: `/* Adelie Editor with CSS */
+.my-class {
+  color: var(--primary);
+  background: var(--surface);
+}`
+        });
+
+        // Theme toggle
+        const toggle = document.getElementById('theme-toggle');
+        toggle.addEventListener('change', () => {
+            const theme = toggle.checked ? 'dark' : 'light';
+            document.documentElement.setAttribute('data-theme', theme);
+        });
+    </script>
+</body>
+</html>