{"_id":"@barocss/editor-view-dom","_rev":"3-89bdedf07c514c17aa0deefe47b6f3b7","name":"@barocss/editor-view-dom","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"@barocss/editor-view-dom","version":"0.1.0","keywords":["editor","view","dom","wysiwyg"],"author":{"name":"Barocss Team"},"license":"MIT","_id":"@barocss/editor-view-dom@0.1.0","maintainers":[{"name":"easylogic","email":"cyberuls@gmail.com"}],"dist":{"shasum":"968786caf0ddd537481ef1cd4a982c620a79ccba","tarball":"https://registry.npmjs.org/@barocss/editor-view-dom/-/editor-view-dom-0.1.0.tgz","fileCount":5,"integrity":"sha512-yswYDkaAfiXmwrxD0JTwfKcQTzMfZfiP0EBjt7vE6OG6VGRspkQH9qguxMNvKCVjHajyP1D1hWmKQrlA8Tn3IQ==","signatures":[{"sig":"MEQCIBlcEipWY43TL73y0goqh4jIDFYhYwuqW78jRCDSevlSAiAZ6Iac0j134DRSg9zEDS5al2hP14nsCcOgPF5o8FntjQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":331888},"main":"./dist/index.js","_from":"file:barocss-editor-view-dom-0.1.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"dev":"vite build --watch","test":"vitest","build":"vite build","test:ui":"vitest --ui","test:run":"vitest run","test:core":"vitest run test/core","type-check":"tsc --noEmit","test:events":"vitest run test/events","test:coverage":"vitest run --coverage","test:integration":"vitest run test/integration","test:text-analysis":"vitest run test/text-analysis","test:decorator-system":"vitest run test/decorator-system"},"_npmUser":{"name":"easylogic","email":"cyberuls@gmail.com"},"_resolved":"/tmp/43484a3aba71dfc802aef8c2bf3f134b/barocss-editor-view-dom-0.1.0.tgz","_integrity":"sha512-yswYDkaAfiXmwrxD0JTwfKcQTzMfZfiP0EBjt7vE6OG6VGRspkQH9qguxMNvKCVjHajyP1D1hWmKQrlA8Tn3IQ==","_npmVersion":"10.8.2","description":"DOM view layer for Barocss Editor","directories":{},"_nodeVersion":"20.20.0","dependencies":{"@barocss/dsl":"1.0.0","@barocss/schema":"1.0.0","@barocss/shared":"1.0.0","@barocss/datastore":"0.1.0","@barocss/editor-core":"1.0.0","@barocss/dom-observer":"0.1.0","@barocss/renderer-dom":"1.0.0","@barocss/text-analyzer":"0.1.0"},"publishConfig":{"files":["dist"],"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.21","jsdom":"^24.1.3","vitest":"^1.6.1","typescript":"^5.9.3"},"_npmOperationalInternal":{"tmp":"tmp/editor-view-dom_0.1.0_1770043574328_0.7544908626490956","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@barocss/editor-view-dom","version":"0.1.1","keywords":["editor","view","dom","wysiwyg"],"author":{"name":"Barocss Team"},"license":"MIT","_id":"@barocss/editor-view-dom@0.1.1","maintainers":[{"name":"easylogic","email":"cyberuls@gmail.com"}],"dist":{"shasum":"e07600ba7e5698ef5128ca06ee3e60ff644984d7","tarball":"https://registry.npmjs.org/@barocss/editor-view-dom/-/editor-view-dom-0.1.1.tgz","fileCount":5,"integrity":"sha512-+WOOsjiOBjEU9HEiw+BomrdyxCi8DgSNNCYpXgq7cwui5A9g1Uxo/Laj/69EplL5Iyh+3+AjuExQO3hKPZEZnA==","signatures":[{"sig":"MEQCIHpeaxPkBAAfRPx5ivdjHskE8NCu9hghGD6iScOSWO5vAiBbfBtbXj4oJ/CMJ9H4wjPdFPAwB07pXccGL0+cwDXL+Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":352365},"main":"./dist/index.js","_from":"file:barocss-editor-view-dom-0.1.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"dev":"vite build --watch","test":"vitest","build":"vite build","test:ui":"vitest --ui","test:run":"vitest run","test:core":"vitest run test/core","type-check":"tsc --noEmit","test:events":"vitest run test/events","test:coverage":"vitest run --coverage","test:integration":"vitest run test/integration","test:text-analysis":"vitest run test/text-analysis","test:decorator-system":"vitest run test/decorator-system"},"_npmUser":{"name":"easylogic","email":"cyberuls@gmail.com"},"_resolved":"/tmp/1df58b1c9134eba085faa3685f898164/barocss-editor-view-dom-0.1.1.tgz","_integrity":"sha512-+WOOsjiOBjEU9HEiw+BomrdyxCi8DgSNNCYpXgq7cwui5A9g1Uxo/Laj/69EplL5Iyh+3+AjuExQO3hKPZEZnA==","_npmVersion":"10.8.2","description":"DOM view layer for Barocss Editor","directories":{},"_nodeVersion":"20.20.0","dependencies":{"@barocss/dsl":"1.0.1","@barocss/schema":"1.0.0","@barocss/shared":"1.0.0","@barocss/datastore":"0.1.1","@barocss/editor-core":"1.0.1","@barocss/dom-observer":"0.1.0","@barocss/renderer-dom":"1.0.1","@barocss/text-analyzer":"0.1.0"},"publishConfig":{"files":["dist"],"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.21","jsdom":"^24.1.3","vitest":"^1.6.1","typescript":"^5.9.3"},"_npmOperationalInternal":{"tmp":"tmp/editor-view-dom_0.1.1_1771600455336_0.6076751516844883","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@barocss/editor-view-dom","version":"0.1.2","description":"DOM view layer for Barocss Editor","main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"}},"dependencies":{"@barocss/dsl":"1.1.0","@barocss/datastore":"0.1.2","@barocss/dom-observer":"0.1.0","@barocss/editor-core":"1.0.2","@barocss/renderer-dom":"1.0.2","@barocss/schema":"1.0.0","@barocss/shared":"1.0.0","@barocss/text-analyzer":"0.1.0"},"devDependencies":{"jsdom":"^24.1.3","typescript":"^5.9.3","vite":"^5.4.21","vitest":"^1.6.1"},"keywords":["editor","view","dom","wysiwyg"],"author":{"name":"Barocss Team"},"license":"MIT","publishConfig":{"access":"public","files":["dist"]},"scripts":{"build":"vite build","dev":"vite build --watch","type-check":"tsc --noEmit","test":"vitest","test:run":"vitest run","test:core":"vitest run test/core","test:events":"vitest run test/events","test:text-analysis":"vitest run test/text-analysis","test:decorator-system":"vitest run test/decorator-system","test:integration":"vitest run test/integration","test:coverage":"vitest run --coverage","test:ui":"vitest --ui"},"module":"./dist/index.js","_id":"@barocss/editor-view-dom@0.1.2","_integrity":"sha512-fPgPYOAoNPoXtAYd6jodhJ+j8JEvsFv+HUbVGkvxrYSAFHKV9lYlJ+aDkoTBqSwDK0agCLgaktYyKFhCqv+Hxw==","_resolved":"/tmp/44bef913483b77b012048c6605236c26/barocss-editor-view-dom-0.1.2.tgz","_from":"file:barocss-editor-view-dom-0.1.2.tgz","_nodeVersion":"20.20.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-fPgPYOAoNPoXtAYd6jodhJ+j8JEvsFv+HUbVGkvxrYSAFHKV9lYlJ+aDkoTBqSwDK0agCLgaktYyKFhCqv+Hxw==","shasum":"c95bb8e770ab6ba4f6648e6ebaee4ce14fd118fd","tarball":"https://registry.npmjs.org/@barocss/editor-view-dom/-/editor-view-dom-0.1.2.tgz","fileCount":5,"unpackedSize":356321,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCFauiZRg8DTfDKubd1phRyzrJNJ1QSfRf8eeJg7VSKDgIgDr/IkdS7HZ/5qpFj6lvnm/jxbupAUswjz3xdx7cBD/k="}]},"_npmUser":{"name":"easylogic","email":"cyberuls@gmail.com"},"directories":{},"maintainers":[{"name":"easylogic","email":"cyberuls@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/editor-view-dom_0.1.2_1771692410321_0.5125550592560149"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-02T14:46:14.152Z","modified":"2026-02-21T16:46:50.627Z","0.1.0":"2026-02-02T14:46:14.527Z","0.1.1":"2026-02-20T15:14:15.475Z","0.1.2":"2026-02-21T16:46:50.500Z"},"author":{"name":"Barocss Team"},"license":"MIT","keywords":["editor","view","dom","wysiwyg"],"description":"DOM view layer for Barocss Editor","maintainers":[{"name":"easylogic","email":"cyberuls@gmail.com"}],"readme":"# @barocss/editor-view-dom\n\nDOM view layer for Barocss Editor - bridges `editor-core` with browser DOM functionality.\n\n## Architecture\n\n```mermaid\ngraph TB\n    A[\"EditorViewDOM\"] --> B[\"Editor Core\"]\n    A --> C[\"DOM Events\"]\n    A --> D[\"MutationObserver\"]\n    A --> E[\"Selection Sync\"]\n    A --> F[\"Input Handler\"]\n    \n    C --> G[\"beforeinput\"]\n    C --> H[\"input\"]\n    C --> I[\"keydown\"]\n    \n    F --> J[\"Command Dispatch\"]\n    J --> B\n    \n    D --> K[\"DOM Changes\"]\n    K --> L[\"Model Sync\"]\n    L --> B\n    \n    E --> M[\"DOM Selection\"]\n    E --> N[\"Model Selection\"]\n    N --> B\n    \n    O[\"Renderer-DOM\"] --> A\n    A --> P[\"ContentEditable\"]\n    \n    style A fill:#e1f5ff\n    style B fill:#fff4e1\n    style C fill:#e8f5e9\n    style D fill:#f3e5f5\n    style E fill:#fce4ec\n    style F fill:#fff9c4\n    style O fill:#e0f2f1\n```\n\n## Features\n\n### 🎯 Core DOM Integration\n- **DOM Event Handling**: Complete browser `contentEditable` event processing\n- **MutationObserver**: Real-time DOM change detection and synchronization\n- **Smart Text Analysis**: Advanced text change detection with LCP/LCS algorithms\n- **Selection Management**: Accurate selection tracking and DOM ↔ Model mapping\n- **Keymap System**: Customizable keyboard shortcuts and command binding\n- **Native Commands**: Browser-native editing operations (insertText, deleteSelection, etc.)\n\n### 🎨 Advanced Decorator System\n- **Layer Decorators**: CSS/overlay-only representation (included in diff)\n- **Inline Decorators**: Actual DOM widgets inserted within text (excluded from diff)\n- **Block Decorators**: Actual DOM widgets inserted at block level (excluded from diff)\n- **Custom Types**: Flexible type system for external developers\n\n### 🔧 Developer Experience\n- **DSL Integration**: Re-exports `@barocss/renderer-dom` DSL for unified rendering\n- **TypeScript**: Full type safety with comprehensive interfaces\n- **Event System**: Rich event handling for all DOM interactions\n- **Performance**: Optimized with debouncing and partial updates\n\n## Installation\n\n```bash\npnpm add @barocss/editor-view-dom\n```\n\n## Basic Usage\n\n### Current API (Simple)\n```typescript\nimport { Editor } from '@barocss/editor-core';\nimport { EditorViewDOM } from '@barocss/editor-view-dom';\n\n// Create editor-core instance\nconst editor = new Editor({\n  dataStore: dataStore,\n  schema: schema\n});\n\n// Simple approach: provide existing contentEditable\nconst view = new EditorViewDOM(editor, {\n  contentEditableElement: document.getElementById('editor')\n});\n```\n\n### Container-based API\n```typescript\nimport { Editor } from '@barocss/editor-core';\nimport { EditorViewDOM } from '@barocss/editor-view-dom';\n\n// Create editor-core instance\nconst editor = new Editor({\n  dataStore: dataStore,\n  schema: schema\n});\n\n// Provide container element - EditorViewDOM creates 5 layers automatically\nconst view = new EditorViewDOM(editor, {\n  container: document.getElementById('editor-container'),  // Required\n  // Optional: customize layer configuration\n  layers: {\n    contentEditable: { \n      className: 'editor-content',\n      attributes: { 'data-testid': 'editor' }\n    },\n    decorator: { className: 'editor-decorators' },\n    selection: { className: 'editor-selection' },\n    context: { className: 'editor-context' },\n    custom: { className: 'editor-custom' }\n  }\n});\n\n// Now users can type, use keyboard shortcuts, paste, etc.\n// All DOM events are automatically handled and synchronized with editor-core\n\n// Access individual layers\nview.layers.content      // contentEditable element\nview.layers.decorator    // Decorator overlay\nview.layers.selection    // Selection UI\nview.layers.context      // Context menus, tooltips\nview.layers.custom       // User-defined overlays\n```\n\n### Generated DOM Structure\n```html\n<div id=\"editor-container\" style=\"position: relative; overflow: hidden;\">\n  <!-- Layer 1: ContentEditable (z-index: 1) -->\n  <div class=\"editor-content\" contenteditable=\"true\" \n       style=\"position: relative; z-index: 1;\"\n       data-bc-layer=\"content\" data-testid=\"editor\">\n    <!-- Core document content rendered by renderer-dom -->\n  </div>\n  \n  <!-- Layer 2: Decorator (z-index: 10) -->\n  <div class=\"editor-decorators\" \n       style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 10;\"\n       data-bc-layer=\"decorator\">\n    <!-- Layer decorators (CSS overlays) -->\n    <div class=\"decorator-layer\" data-bc-decorator=\"layer\"></div>\n    <!-- Inline decorators (DOM widgets) -->\n    <div class=\"decorator-inline\" data-bc-decorator=\"inline\"></div>\n    <!-- Block decorators (DOM widgets) -->\n    <div class=\"decorator-block\" data-bc-decorator=\"block\"></div>\n  </div>\n  \n  <!-- Layer 3: Selection (z-index: 100) -->\n  <div class=\"editor-selection\" \n       style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 100;\"\n       data-bc-layer=\"selection\">\n    <!-- Selection highlights, cursor, range markers -->\n  </div>\n  \n  <!-- Layer 4: Context (z-index: 200) -->\n  <div class=\"editor-context\" \n       style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 200;\"\n       data-bc-layer=\"context\">\n    <!-- Tooltips, context menus, hover effects -->\n  </div>\n  \n  <!-- Layer 5: Custom (z-index: 1000) -->\n  <div class=\"editor-custom\" \n       style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 1000;\"\n       data-bc-layer=\"custom\">\n    <!-- User-defined overlays, debug info -->\n  </div>\n</div>\n```\n\n\n## Core DOM Features\n\n### 1. Event Handling\n\nAll browser events are automatically processed:\n\n```typescript\n// Input events (typing, IME, composition)\nview.on('editor:input.detected', (data) => {\n  console.log('Input detected:', data.inputType, data.data);\n});\n\n// Selection changes\nview.on('editor:selection.change', (data) => {\n  console.log('Selection changed:', data.selection);\n});\n\n// Content changes (via MutationObserver)\neditor.on('editor:content.change', (data) => {\n  console.log('Content changed:', data.changes);\n});\n```\n\n### 2. Keyboard Shortcuts\n\n```typescript\n// Built-in shortcuts\n// Ctrl+B (Bold), Ctrl+I (Italic), Ctrl+Z (Undo), etc.\n\n// Custom shortcuts\nview.keymapManager.register('Ctrl+Shift+h', () => {\n  editor.executeCommand('heading.insert', { level: 2 });\n});\n\nview.keymapManager.register('Ctrl+/', () => {\n  editor.executeCommand('comment.toggle');\n});\n```\n\n### 3. Native Commands\n\n```typescript\n// Browser-native operations\nview.insertText('Hello world');\nview.insertParagraph();\nview.deleteSelection();\nview.historyUndo();\nview.historyRedo();\n\n// Formatting commands\nview.toggleBold();\nview.toggleItalic();\nview.toggleUnderline();\n```\n\n### 4. Smart Text Analysis\n\nAccurate text change detection with advanced algorithms:\n\n```typescript\nimport { analyzeTextChanges } from '@barocss/editor-view-dom';\n\nconst changes = analyzeTextChanges({\n  oldText: 'Hello world',\n  newText: 'Hello beautiful world',\n  selectionOffset: 6,\n  selectionLength: 0\n});\n\nconsole.log(changes);\n// [{\n//   type: 'insert',\n//   start: 6,\n//   end: 6,\n//   text: 'beautiful ',\n//   confidence: 1.0\n// }]\n```\n\n### 5. MutationObserver Integration\n\nReal-time DOM change detection:\n\n```typescript\n// Automatically detects:\n// - Text content changes\n// - DOM structure changes\n// - Attribute changes\n// - IME composition events\n\n// All changes are analyzed and converted to precise TextChange objects\n// then synchronized with editor-core model\n```\n\n## Decorator System\n\nModel-independent supplementary information display system:\n\n```typescript\nimport { \n  EditorViewDOM,\n  renderer, element, data  // DSL re-export\n} from '@barocss/editor-view-dom';\n\n// Layer Decorator (CSS only, included in diff)\nview.decoratorManager.add({\n  id: 'highlight-1',\n  category: 'layer',\n  type: 'highlight',\n  target: { nodeId: 'text-1', startOffset: 0, endOffset: 5 },\n  data: { backgroundColor: 'yellow' }\n});\n\n// Inline Decorator (DOM widget, excluded from diff)\nview.decoratorRegistry.registerRenderer('action-button',\n  renderer('action-button', element('button', {\n    className: 'inline-btn',\n    'data-bc-decorator': 'inline'\n  }, [data('data.text', 'Action')]))\n);\n\nview.decoratorManager.add({\n  id: 'button-1',\n  category: 'inline',\n  type: 'action-button',\n  target: { nodeId: 'text-1', startOffset: 10, endOffset: 10 },\n  data: { text: 'Edit' }\n});\n\n// Block Decorator (Block-level widget)\nview.decoratorManager.add({\n  id: 'toolbar-1',\n  category: 'block',\n  type: 'toolbar',\n  target: { nodeId: 'para-1', position: 'before' },\n  data: { items: ['bold', 'italic', 'underline'] }\n});\n```\n\n## Advanced Features\n\n### 1. Input Type Handling\n\nDifferent `beforeInput` event types are handled strategically:\n\n```typescript\n// Format commands (prevented and converted to editor commands)\n// formatBold, formatItalic → editor.executeCommand('bold.toggle')\n// insertParagraph → editor.executeCommand('paragraph.insert')\n\n// Text commands (allowed, then synchronized via MutationObserver)\n// insertText, deleteContentBackward → DOM change → model sync\n\n// Composition events (IME support)\n// compositionstart, compositionupdate, compositionend\n```\n\n### 2. Selection Management\n\nAccurate DOM ↔ Model selection mapping:\n\n```typescript\n// DOM selection changes are automatically converted to model selection\nview.on('editor:selection.change', (data) => {\n  console.log('Model selection:', data.selection);\n  // { nodeId: 'text-1', startOffset: 5, endOffset: 10 }\n});\n\n// Model selection changes update DOM selection\neditor.setSelection({ nodeId: 'text-1', startOffset: 0, endOffset: 5 });\n```\n\n### 3. Unicode & Complex Text Support\n\n- **NFC Normalization**: All text normalized to NFC form\n- **Complex Characters**: Emojis, combining characters, RTL/LTR text\n- **IME Support**: Korean, Japanese, Chinese input methods\n- **Selection Bias**: Accurate cursor positioning during text analysis\n\n### 4. Performance Optimizations\n\n- **Debounced Events**: Input events are debounced for performance\n- **Partial Updates**: Only changed parts are re-rendered\n- **Memory Efficient**: Minimal object creation and GC pressure\n- **O(min(m,n)) Text Analysis**: Efficient LCP/LCS algorithms\n\n## Event System\n\n```typescript\n// Core DOM events\nview.on('editor:input.detected', (data) => {\n  console.log('Input:', data.inputType, data.data);\n});\n\nview.on('editor:selection.change', (data) => {\n  console.log('Selection:', data.selection);\n});\n\n// Content changes (via MutationObserver)\neditor.on('editor:content.change', (data) => {\n  console.log('Changes:', data.changes);\n});\n\n// Decorator events\nview.decoratorManager.on('decorator:added', (decorator) => {\n  console.log('Decorator added:', decorator.sid);\n});\n```\n\n## DSL Integration\n\nRe-exports all `@barocss/renderer-dom` DSL functions:\n\n```typescript\nimport { \n  EditorViewDOM,\n  // All DSL functions available\n  renderer, element, data, when, attr,\n  layerStyles, inlineWidget, blockWidget\n} from '@barocss/editor-view-dom';\n\n// No need to import @barocss/renderer-dom separately\n```\n\n## Browser Compatibility\n\n- **Modern Browsers**: Chrome 90+, Firefox 88+, Safari 14+\n- **contentEditable**: Full support for contentEditable behavior\n- **MutationObserver**: Native MutationObserver API\n- **InputEvent**: Modern InputEvent with inputType support\n- **Selection API**: Native Selection and Range APIs\n\n## Testing\n\nComprehensive test coverage with 73+ tests:\n\n```bash\n# Run all tests\npnpm test\n\n# Run specific test suites\npnpm test:run smart-text-analyzer.test.ts\npnpm test:run decorator-system.test.ts\npnpm test:run editor-view-dom.test.ts\n```\n\nTest categories:\n- **Text Analysis**: LCP/LCS algorithms, Unicode handling, Selection bias\n- **Event Integration**: Input events, MutationObserver, Selection changes\n- **Decorator System**: Registry, Manager, Renderer functionality\n- **DOM Integration**: Event handlers, Keymap system, Native commands\n\n## API Reference\n\n### Core Classes\n\n- **`EditorViewDOM`**: Main class bridging editor-core with DOM\n- **`DecoratorManager`**: CRUD operations for decorators\n- **`DecoratorRegistry`**: Type and renderer registration\n- **`KeymapManager`**: Keyboard shortcut management\n- **`MutationObserverManager`**: DOM change detection\n- **`SmartTextAnalyzer`**: Advanced text change analysis\n\n### Key Interfaces\n\n- **`TextChange`**: Precise text modification description\n- **`LayerDecorator`**: CSS-only decoration interface\n- **`InlineDecorator`**: Inline widget decoration interface\n- **`BlockDecorator`**: Block-level widget decoration interface\n\n## Flow Diagrams\n\n### 1. Event Flow Diagram\n\n```mermaid\ngraph TD\n    A[User Action] --> B{Event Type}\n    \n    B -->|keydown| C[KeymapManager]\n    B -->|beforeInput| D[InputHandler]\n    B -->|input| E[InputHandler]\n    B -->|paste| F[InputHandler]\n    B -->|selectionchange| G[SelectionHandler]\n    B -->|composition*| H[CompositionHandler]\n    \n    C --> I[Keymap Lookup]\n    I --> J{Command Found?}\n    J -->|Yes| K[Execute Command]\n    J -->|No| L[Default Behavior]\n    \n    D --> M{InputType Check}\n    M -->|Format Commands| N[preventDefault]\n    M -->|Text Commands| O[Allow DOM Change]\n    \n    N --> P[editor.executeCommand]\n    O --> Q[DOM Mutation]\n    \n    E --> R[Emit Input Event]\n    F --> S[Extract Clipboard Data]\n    S --> T[insertText]\n    \n    G --> U[Convert DOM Selection]\n    U --> V[Update Model Selection]\n    \n    H --> W[IME State Management]\n    \n    Q --> X[MutationObserver]\n    X --> Y[Smart Text Analyzer]\n    Y --> Z[Generate TextChange]\n    Z --> AA[Sync with Model]\n    \n    K --> BB[Model Update]\n    P --> BB\n    AA --> BB\n    V --> BB\n    \n    BB --> CC[Emit Model Events]\n    CC --> DD[Update DOM/Decorators]\n    \n    style A fill:#e1f5fe\n    style BB fill:#f3e5f5\n    style CC fill:#e8f5e8\n    style DD fill:#fff3e0\n```\n\n### 2. Layered Rendering Architecture\n\n`editor-view-dom` uses a hierarchical rendering system with 5 distinct layers:\n\n```mermaid\ngraph TD\n    A[DOM Container] --> B[Layer 1: ContentEditable]\n    B --> C[Layer 2: Decorator]\n    C --> D[Layer 3: Selection]\n    D --> E[Layer 4: Context]\n    E --> F[Layer 5: Custom]\n    \n    B --> B1[Core Content]\n    B1 --> B2[Text Nodes]\n    B1 --> B3[Block Elements]\n    B1 --> B4[Inline Elements]\n    \n    C --> C1[Layer Decorators]\n    C --> C2[Inline Decorators]\n    C --> C3[Block Decorators]\n    \n    C1 --> C11[CSS Overlays]\n    C1 --> C12[Background Highlights]\n    C1 --> C13[Border Annotations]\n    \n    C2 --> C21[Inline Widgets]\n    C2 --> C22[Interactive Buttons]\n    C2 --> C23[Input Elements]\n    \n    C3 --> C31[Toolbars]\n    C3 --> C32[Context Menus]\n    C3 --> C33[Modal Dialogs]\n    \n    D --> D1[Selection Highlights]\n    D --> D2[Cursor Indicators]\n    D --> D3[Range Markers]\n    \n    E --> E1[Tooltips]\n    E --> E2[Hover Effects]\n    E --> E3[Focus Indicators]\n    \n    F --> F1[Custom Overlays]\n    F --> F2[Debug Information]\n    F --> F3[Developer Tools]\n    \n    style A fill:#f5f5f5\n    style B fill:#e3f2fd\n    style C fill:#f3e5f5\n    style D fill:#e8f5e8\n    style E fill:#fff3e0\n    style F fill:#fce4ec\n```\n\n#### Layer Characteristics\n\n| Layer | Z-Index | Purpose | Diff Included | Event Handling |\n|-------|---------|---------|---------------|----------------|\n| **1. ContentEditable** | 1 | Core document content | ✅ Yes | Full interaction |\n| **2. Decorator** | 10-50 | Supplementary information | Layer: ✅ / Widget: ❌ | Widget interaction |\n| **3. Selection** | 100 | Visual selection indicators | ❌ No | Read-only display |\n| **4. Context** | 200 | Contextual UI elements | ❌ No | Event-driven |\n| **5. Custom** | 1000+ | User-defined overlays | ❌ No | Custom handling |\n\n### 3. Rendering Flow Diagram\n\n```mermaid\ngraph TD\n    A[Model Change] --> B[editor-core Event]\n    B --> C{Change Type}\n    \n    C -->|Content| D[Layer 1: ContentEditable]\n    C -->|Decorator| E[Layer 2: Decorator]\n    C -->|Selection| F[Layer 3: Selection]\n    C -->|Context| G[Layer 4: Context]\n    C -->|Custom| H[Layer 5: Custom]\n    \n    D --> D1[renderer-dom]\n    D1 --> D2[VNode Diff]\n    D2 --> D3[Core DOM Update]\n    D3 --> D4[z-index: 1]\n    \n    E --> E1{Decorator Category}\n    E1 -->|Layer| E2[CSS Styles]\n    E1 -->|Inline| E3[DOM Widgets]\n    E1 -->|Block| E4[Block Widgets]\n    \n    E2 --> E21[Style Elements]\n    E21 --> E22[z-index: 10-20]\n    \n    E3 --> E31[data-bc-decorator=inline]\n    E31 --> E32[z-index: 30-40]\n    \n    E4 --> E41[data-bc-decorator=block]\n    E41 --> E42[z-index: 40-50]\n    \n    F --> F1[DOM Selection API]\n    F1 --> F2[Selection Ranges]\n    F2 --> F3[Visual Indicators]\n    F3 --> F4[z-index: 100]\n    \n    G --> G1[Event-based Rendering]\n    G1 --> G2[Hover/Focus States]\n    G2 --> G3[Contextual UI]\n    G3 --> G4[z-index: 200]\n    \n    H --> H1[User-defined Renderers]\n    H1 --> H2[Custom Components]\n    H2 --> H3[Debug Overlays]\n    H3 --> H4[z-index: 1000+]\n    \n    D4 --> I[Layer Composition]\n    E22 --> I\n    E32 --> I\n    E42 --> I\n    F4 --> I\n    G4 --> I\n    H4 --> I\n    \n    I --> J[Final Layered DOM]\n    J --> K[User Sees Changes]\n    \n    style A fill:#e1f5fe\n    style D fill:#e3f2fd\n    style E fill:#f3e5f5\n    style F fill:#e8f5e8\n    style G fill:#fff3e0\n    style H fill:#fce4ec\n    style I fill:#f5f5f5\n    style J fill:#e0e0e0\n    style K fill:#ffebee\n```\n\n#### Layer Implementation Examples\n\n```typescript\n// Layer 1: ContentEditable (Core Content)\nconst contentLayer = {\n  zIndex: 1,\n  element: contentEditableElement,\n  renderer: 'renderer-dom',\n  diffIncluded: true\n};\n\n// Layer 2: Decorator (Supplementary Information)\nconst decoratorLayer = {\n  layer: {\n    zIndex: 10-20,\n    type: 'css-overlay',\n    diffIncluded: true,\n    example: 'background highlights, underlines'\n  },\n  inline: {\n    zIndex: 30-40,\n    type: 'dom-widget',\n    diffIncluded: false,\n    attribute: 'data-bc-decorator=inline',\n    example: 'buttons, inputs, charts'\n  },\n  block: {\n    zIndex: 40-50,\n    type: 'dom-widget',\n    diffIncluded: false,\n    attribute: 'data-bc-decorator=block',\n    example: 'toolbars, panels, modals'\n  }\n};\n\n// Layer 3: Selection (Visual Indicators)\nconst selectionLayer = {\n  zIndex: 100,\n  type: 'visual-only',\n  diffIncluded: false,\n  elements: ['selection-highlight', 'cursor', 'range-markers'],\n  eventHandling: 'read-only'\n};\n\n// Layer 4: Context (Event-driven UI)\nconst contextLayer = {\n  zIndex: 200,\n  type: 'contextual',\n  diffIncluded: false,\n  triggers: ['hover', 'focus', 'selection'],\n  elements: ['tooltips', 'context-menus', 'quick-actions']\n};\n\n// Layer 5: Custom (User-defined)\nconst customLayer = {\n  zIndex: 1000,\n  type: 'user-defined',\n  diffIncluded: false,\n  purpose: ['debugging', 'development', 'custom-overlays'],\n  control: 'full-user-control'\n};\n```\n\n#### Layer Interaction Rules\n\n1. **Event Bubbling**: Events bubble up through layers (Custom → Context → Selection → Decorator → ContentEditable)\n2. **Z-Index Management**: Each layer has reserved z-index ranges to prevent conflicts\n3. **Diff Exclusion**: Layers 3-5 are excluded from `renderer-dom` diffing via `data-bc-*` attributes\n4. **Performance**: Higher layers are rendered less frequently (event-driven vs continuous)\n5. **Isolation**: Each layer can be independently updated without affecting others\n\n#### Practical Layer Usage\n\n```typescript\nimport { EditorViewDOM } from '@barocss/editor-view-dom';\n\nconst view = new EditorViewDOM(editor, { contentEditableElement });\n\n// Layer 1: ContentEditable (handled automatically)\n// Core content is managed by renderer-dom\n\n// Layer 2: Decorator - Add highlights and widgets\nview.decoratorManager.add({\n  id: 'highlight-1',\n  category: 'layer',  // CSS overlay, z-index: 10-20\n  type: 'highlight',\n  target: { nodeId: 'text-1', startOffset: 0, endOffset: 5 },\n  data: { backgroundColor: 'yellow' }\n});\n\nview.decoratorManager.add({\n  id: 'edit-button',\n  category: 'inline',  // DOM widget, z-index: 30-40\n  type: 'action-button',\n  target: { nodeId: 'text-1', startOffset: 10, endOffset: 10 },\n  data: { text: 'Edit', action: 'edit' }\n});\n\n// Layer 3: Selection (handled automatically)\n// Selection highlights are managed by SelectionHandler\n\n// Layer 4: Context - Add contextual UI\nview.contextManager.add({\n  id: 'tooltip-1',\n  type: 'tooltip',\n  trigger: 'hover',\n  target: { nodeId: 'text-1' },\n  content: 'This is important text',\n  zIndex: 200\n});\n\n// Layer 5: Custom - Add debug overlay\nview.customLayer.add({\n  id: 'debug-info',\n  type: 'debug-overlay',\n  position: 'top-right',\n  content: () => ({\n    nodeCount: editor.getNodeCount(),\n    selectionInfo: editor.getSelection(),\n    decoratorCount: view.decoratorManager.size()\n  }),\n  zIndex: 1000\n});\n```\n\n#### Layer Rendering Performance\n\n- **Layer 1 (ContentEditable)**: Rendered on every model change (~60fps)\n- **Layer 2 (Decorator)**: Rendered on decorator changes (~30fps)\n- **Layer 3 (Selection)**: Rendered on selection changes (~120fps)\n- **Layer 4 (Context)**: Rendered on events (hover, focus) (~10fps)\n- **Layer 5 (Custom)**: Rendered on demand (user-controlled)\n\n### 4. Text Change Analysis Flow\n\n```mermaid\ngraph TD\n    A[DOM Text Change] --> B[MutationObserver]\n    B --> C[Extract oldValue/newValue]\n    C --> D[Unicode Normalization]\n    D --> E[NFC Normalization]\n    \n    E --> F[Smart Text Analyzer]\n    F --> G[Calculate LCP/LCS]\n    G --> H[Find Common Prefix]\n    H --> I[Find Common Suffix]\n    I --> J[Identify Changed Region]\n    \n    J --> K[Get Current Selection]\n    K --> L[Apply Selection Bias]\n    L --> M{Change Type}\n    \n    M -->|Insert| N[Create Insert TextChange]\n    M -->|Delete| O[Create Delete TextChange]\n    M -->|Replace| P[Create Replace TextChange]\n    \n    N --> Q[TextChange Object]\n    O --> Q\n    P --> Q\n    \n    Q --> R[Validate Change]\n    R --> S[Calculate Confidence]\n    S --> T[Emit editor:content.change]\n    \n    T --> U[Model Synchronization]\n    U --> V[Update Data Store]\n    V --> W[Trigger Re-render]\n    \n    style A fill:#e1f5fe\n    style F fill:#f3e5f5\n    style G fill:#e8f5e8\n    style Q fill:#fff3e0\n    style U fill:#ffebee\n```\n\n### 5. Decorator Lifecycle Flow\n\n```mermaid\ngraph TD\n    A[Add Decorator] --> B[DecoratorManager.add]\n    B --> C[Validate Schema]\n    C --> D{Valid?}\n    D -->|No| E[Throw Error]\n    D -->|Yes| F[Apply Defaults]\n    \n    F --> G[Store in Map]\n    G --> H[Emit decorator:added]\n    H --> I[DecoratorRenderer.render]\n    \n    I --> J{Category}\n    J -->|Layer| K[Layer Renderer]\n    J -->|Inline| L[Inline Renderer]\n    J -->|Block| M[Block Renderer]\n    \n    K --> N[Get Renderer Function]\n    N --> O[Execute Renderer]\n    O --> P[Apply CSS Styles]\n    P --> Q[Create Style Element]\n    Q --> R[Add to Document]\n    \n    L --> S[Get Renderer Function]\n    S --> T[Execute Renderer]\n    T --> U[Create DOM Widget]\n    U --> V[Set data-bc-decorator=inline]\n    V --> W[Insert at Text Position]\n    \n    M --> X[Get Renderer Function]\n    X --> Y[Execute Renderer]\n    Y --> Z[Create DOM Widget]\n    Z --> AA[Set data-bc-decorator=block]\n    AA --> BB[Insert at Block Position]\n    \n    R --> CC[Emit decorator:rendered]\n    W --> CC\n    BB --> CC\n    \n    CC --> DD[Update Complete]\n    \n    style A fill:#e1f5fe\n    style I fill:#f3e5f5\n    style CC fill:#e8f5e8\n    style DD fill:#fff3e0\n```\n\n## Layer Management\n\n### Internal Layer System\n\n`EditorViewDOM` automatically creates and manages 5 distinct layers within the provided container:\n\n#### Layer Access\n\n```typescript\nconst view = new EditorViewDOM(editor, {\n  container: document.getElementById('editor-container')\n});\n\n// Direct access to each layer\nview.layers.content      // HTMLElement - contentEditable layer\nview.layers.decorator    // HTMLElement - decorator overlay layer\nview.layers.selection    // HTMLElement - selection UI layer\nview.layers.context      // HTMLElement - context UI layer (menus, tooltips)\nview.layers.custom       // HTMLElement - custom overlay layer\n```\n\n#### Layer Properties\n\n| Layer | Z-Index | Position | Pointer Events | Purpose |\n|-------|---------|----------|----------------|---------|\n| **Content** | 1 | `relative` | ✅ Enabled | Editable content, text input |\n| **Decorator** | 10 | `absolute` | ❌ Disabled* | Highlights, annotations, widgets |\n| **Selection** | 100 | `absolute` | ❌ Disabled | Selection indicators, cursor |\n| **Context** | 200 | `absolute` | ❌ Disabled | Context menus, tooltips |\n| **Custom** | 1000 | `absolute` | ❌ Disabled | User-defined overlays |\n\n*Some decorator elements (inline/block widgets) may enable pointer events\n\n#### Layer Coordinate System\n\nAll overlay layers use the same coordinate system as the content layer:\n\n```typescript\n// Get text position in content layer\nconst textRect = getTextNodeRect(textNode, offset);\n\n// Create overlay element in decorator layer\nconst highlight = document.createElement('div');\nhighlight.style.position = 'absolute';\nhighlight.style.left = `${textRect.left}px`;\nhighlight.style.top = `${textRect.top}px`;\nhighlight.style.width = `${textRect.width}px`;\nhighlight.style.height = `${textRect.height}px`;\nhighlight.style.backgroundColor = 'yellow';\n\n// Add to decorator layer\nview.layers.decorator.appendChild(highlight);\n```\n\n#### Layer Customization\n\nCustomize layer appearance and attributes during initialization:\n\n```typescript\nconst view = new EditorViewDOM(editor, {\n  container: document.getElementById('editor-container'),\n  layers: {\n    contentEditable: {\n      className: 'my-editor-content',\n      attributes: {\n        'data-testid': 'editor-content',\n        'aria-label': 'Rich text editor',\n        'role': 'textbox'\n      }\n    },\n    decorator: {\n      className: 'my-decorators',\n      attributes: {\n        'data-layer': 'decorations'\n      }\n    },\n    selection: {\n      className: 'my-selection-ui'\n    },\n    context: {\n      className: 'my-context-ui'\n    },\n    custom: {\n      className: 'my-custom-overlays'\n    }\n  }\n});\n```\n\n#### Layer Lifecycle\n\n```typescript\n// Clear specific layer\nview.layers.decorator.innerHTML = '';\n\n// Add elements to layers\nconst tooltip = document.createElement('div');\ntooltip.textContent = 'Tooltip content';\nview.layers.context.appendChild(tooltip);\n\n// Layer cleanup on destroy\nview.destroy(); // Automatically cleans up all layers\n```\n\n#### Layer Event Handling\n\n```typescript\n// Layer-specific event handling\nview.layers.context.addEventListener('click', (event) => {\n  if (event.target.classList.contains('context-menu-item')) {\n    handleContextMenuClick(event);\n  }\n});\n\n// Coordinate with content layer events\nview.layers.content.addEventListener('selectionchange', () => {\n  updateSelectionLayer();\n});\n```\n\n## Architecture\n\n```\n┌─────────────────┐    ┌──────────────────────────┐    ┌─────────────────┐\n│   editor-core   │    │    editor-view-dom       │    │  renderer-dom   │\n│                 │    │                          │    │                 │\n│ • Commands      │◄──►│ • DOM Events             │◄──►│ • DSL System    │\n│ • Selection     │    │ • MutationObserver       │    │ • VNode Diff    │\n│ • Data Store    │    │ • Keymap System          │    │ • Element API   │\n│ • Extensions    │    │ • Native Commands        │    │ • Renderer      │\n│ • Events        │    │ • Smart Text Analyzer    │    │   Registry      │\n│                 │    │ • Decorator System       │    └─────────────────┘\n│                 │    │   - Layer Decorators     │              │\n│                 │    │   - Inline Decorators    │              │\n│                 │    │   - Block Decorators     │              │\n│                 │    │ • DSL Re-export          │              │\n└─────────────────┘    └──────────────────────────┘              │\n         │                           │                           │\n         │                           │                           │\n    ┌────▼────┐                 ┌────▼────┐                 ┌────▼────┐\n    │ Headless│                 │ DOM UI  │                 │ DSL     │\n    │ Logic   │                 │ Layer   │                 │ Render  │\n    └─────────┘                 └─────────┘                 └─────────┘\n```\n\n## Performance Metrics\n\n- **Text Analysis**: < 5ms for 1000+ character texts\n- **Event Processing**: < 1ms for typical input events\n- **Memory Usage**: Minimal object allocation, efficient GC\n- **Bundle Size**: ~50KB (minified), ~12KB (gzipped)\n- **Browser Support**: Modern browsers with contentEditable support\n\n## License\n\nMIT\n","readmeFilename":"README.md"}