diff --git a/bun.lock b/bun.lock
index 58bd80b4..946fd2f5 100644
--- a/bun.lock
+++ b/bun.lock
@@ -17,6 +17,7 @@
         "@typescript-eslint/eslint-plugin": "^8.54.0",
         "@typescript-eslint/parser": "^8.54.0",
         "@vitejs/plugin-react": "^5.1.2",
+        "@vitejs/plugin-vue": "^6.0.4",
         "autoprefixer": "^10.4.17",
         "class-variance-authority": "^0.7.0",
         "eslint": "^10.0.3",
@@ -34,11 +35,12 @@
         "tsup": "^8.0.1",
         "typescript": "^5.3.3",
         "vite": "^7.3.1",
+        "vue": "^3.5.29",
       },
     },
     "packages/agent-use": {
       "name": "@eigenpal/docx-editor-agents",
-      "version": "0.0.31",
+      "version": "0.0.32",
       "dependencies": {
         "docxtemplater": "^3.50.0",
         "jszip": "^3.10.1",
@@ -70,7 +72,7 @@
     },
     "packages/react": {
       "name": "@eigenpal/docx-js-editor",
-      "version": "0.0.31",
+      "version": "0.0.32",
       "dependencies": {
         "@radix-ui/react-select": "^2.2.6",
         "clsx": "^2.1.0",
@@ -101,6 +103,7 @@
         "@eigenpal/docx-core": "workspace:*",
       },
       "devDependencies": {
+        "prosemirror-state": "^1.4.3",
         "prosemirror-view": "^1.41.6",
       },
       "peerDependencies": {
@@ -465,6 +468,8 @@
 
     "@vitejs/plugin-react": ["@vitejs/plugin-react@5.2.0", "", { "dependencies": { "@babel/core": "^7.29.0", "@babel/plugin-transform-react-jsx-self": "^7.27.1", "@babel/plugin-transform-react-jsx-source": "^7.27.1", "@rolldown/pluginutils": "1.0.0-rc.3", "@types/babel__core": "^7.20.5", "react-refresh": "^0.18.0" }, "peerDependencies": { "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0" } }, "sha512-YmKkfhOAi3wsB1PhJq5Scj3GXMn3WvtQ/JC0xoopuHoXSdmtdStOpFrYaT1kie2YgFBcIe64ROzMYRjCrYOdYw=="],
 
+    "@vitejs/plugin-vue": ["@vitejs/plugin-vue@6.0.5", "", { "dependencies": { "@rolldown/pluginutils": "1.0.0-rc.2" }, "peerDependencies": { "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0", "vue": "^3.2.25" } }, "sha512-bL3AxKuQySfk1iGcBsQnoRVexTPJq0Z/ixFVM8OhVJAP6ZXXXLtM7NFKWhLl30Kg7uTBqIaPXbh+nuQCuBDedg=="],
+
     "@vue/compiler-core": ["@vue/compiler-core@3.5.30", "", { "dependencies": { "@babel/parser": "^7.29.0", "@vue/shared": "3.5.30", "entities": "^7.0.1", "estree-walker": "^2.0.2", "source-map-js": "^1.2.1" } }, "sha512-s3DfdZkcu/qExZ+td75015ljzHc6vE+30cFMGRPROYjqkroYI5NV2X1yAMX9UeyBNWB9MxCfPcsjpLS11nzkkw=="],
 
     "@vue/compiler-dom": ["@vue/compiler-dom@3.5.30", "", { "dependencies": { "@vue/compiler-core": "3.5.30", "@vue/shared": "3.5.30" } }, "sha512-eCFYESUEVYHhiMuK4SQTldO3RYxyMR/UQL4KdGD1Yrkfdx4m/HYuZ9jSfPdA+nWJY34VWndiYdW/wZXyiPEB9g=="],
@@ -1297,6 +1302,8 @@
 
     "@manypkg/get-packages/fs-extra": ["fs-extra@8.1.0", "", { "dependencies": { "graceful-fs": "^4.2.0", "jsonfile": "^4.0.0", "universalify": "^0.1.0" } }, "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g=="],
 
+    "@vitejs/plugin-vue/@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-rc.2", "", {}, "sha512-izyXV/v+cHiRfozX62W9htOAvwMo4/bXKDrQ+vom1L1qRuexPock/7VZDAhnpHCLNejd3NJ6hiab+tO0D44Rgw=="],
+
     "anymatch/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
 
     "chokidar/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
diff --git a/examples/vue/public/sample.docx b/examples/vue/public/sample.docx
new file mode 100644
index 00000000..a18bf186
Binary files /dev/null and b/examples/vue/public/sample.docx differ
diff --git a/examples/vue/src/App.vue b/examples/vue/src/App.vue
index 0eedf409..ac0c2da9 100644
--- a/examples/vue/src/App.vue
+++ b/examples/vue/src/App.vue
@@ -1,59 +1,226 @@
 <template>
   <div class="app">
     <header class="header">
-      <h1>DOCX Editor — Vue Example</h1>
-      <p class="subtitle">
-        This is a scaffold for the Vue.js integration of <code>@eigenpal/docx-core</code>.
-        The editor component is not yet implemented.
-      </p>
-    </header>
-    <main class="content">
-      <div class="placeholder">
-        <p>Vue editor component coming soon.</p>
-        <p>
-          See
-          <a href="https://github.com/eigenpal/docx-editor" target="_blank" rel="noopener">
-            the repository
-          </a>
-          for contribution guidelines.
-        </p>
+      <div class="header-left">
+        <h1 class="title">DOCX Editor — Vue</h1>
+      </div>
+      <div class="header-center">
+        <span v-if="fileName" class="file-name">{{ fileName }}</span>
+      </div>
+      <div class="header-right">
+        <label class="btn btn-primary">
+          <input
+            type="file"
+            accept=".docx"
+            @change="handleFileSelect"
+            class="file-input"
+          />
+          Open DOCX
+        </label>
+        <button class="btn" @click="handleNew">New</button>
+        <button class="btn" @click="handleSave">Save</button>
+        <span v-if="status" class="status">{{ status }}</span>
       </div>
+    </header>
+
+    <main class="main">
+      <DocxEditorVue
+        ref="editorRef"
+        :document-buffer="documentBuffer"
+        :document="currentDocument"
+        :show-toolbar="true"
+        @change="handleDocumentChange"
+        @error="handleError"
+        @ready="handleReady"
+      />
     </main>
   </div>
 </template>
 
 <script setup lang="ts">
-// Future: import { DocxEditor } from '@eigenpal/docx-editor-vue';
+import { ref, onMounted } from 'vue';
+import { DocxEditorVue } from '@eigenpal/docx-editor-vue';
+import { createEmptyDocument } from '@eigenpal/docx-core';
+import type { Document } from '@eigenpal/docx-core/types/document';
+
+const editorRef = ref<InstanceType<typeof DocxEditorVue> | null>(null);
+const documentBuffer = ref<ArrayBuffer | null>(null);
+const currentDocument = ref<Document | null>(null);
+const fileName = ref('sample.docx');
+const status = ref('');
+
+// Load sample document on mount
+onMounted(async () => {
+  try {
+    const res = await fetch('/sample.docx');
+    const buffer = await res.arrayBuffer();
+    documentBuffer.value = buffer;
+    fileName.value = 'sample.docx';
+  } catch {
+    currentDocument.value = createEmptyDocument();
+    fileName.value = 'Untitled.docx';
+  }
+});
+
+function handleFileSelect(event: Event) {
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
+  if (!file) return;
+
+  status.value = 'Loading...';
+  file.arrayBuffer().then((buffer) => {
+    currentDocument.value = null;
+    documentBuffer.value = buffer;
+    fileName.value = file.name;
+    status.value = '';
+  }).catch(() => {
+    status.value = 'Error loading file';
+  });
+}
+
+function handleNew() {
+  documentBuffer.value = null;
+  currentDocument.value = createEmptyDocument();
+  fileName.value = 'Untitled.docx';
+  status.value = '';
+}
+
+async function handleSave() {
+  if (!editorRef.value) return;
+
+  try {
+    status.value = 'Saving...';
+    const blob = await editorRef.value.save();
+    if (blob) {
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = fileName.value || 'document.docx';
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+      status.value = 'Saved!';
+      setTimeout(() => { status.value = ''; }, 2000);
+    }
+  } catch {
+    status.value = 'Save failed';
+  }
+}
+
+function handleDocumentChange(_doc: Document) {
+  // no-op — could track dirty state here
+}
+
+function handleError(error: Error) {
+  console.error('Editor error:', error);
+  status.value = `Error: ${error.message}`;
+}
+
+function handleReady() {
+  console.log('Editor ready');
+}
 </script>
 
-<style scoped>
+<style>
 .app {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+  background: #f8fafc;
 }
+
 .header {
-  margin-bottom: 2rem;
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  gap: 12px;
+  background: #fff;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
 }
-.header h1 {
-  font-size: 1.5rem;
-  margin-bottom: 0.5rem;
+
+.title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #0f172a;
+  margin: 0;
+}
+
+.header-center {
+  flex: 1;
+  display: flex;
+  justify-content: center;
 }
-.subtitle {
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.file-name {
+  font-size: 13px;
   color: #64748b;
-  font-size: 0.875rem;
+  padding: 4px 10px;
+  background: #f1f5f9;
+  border-radius: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 200px;
 }
-.content {
-  background: white;
-  border-radius: 8px;
-  padding: 3rem;
-  text-align: center;
+
+.btn {
+  padding: 6px 12px;
+  background: #fff;
   border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  color: #334155;
+  white-space: nowrap;
 }
-.placeholder {
-  color: #94a3b8;
+
+.btn:hover {
+  background: #f1f5f9;
 }
-.placeholder a {
-  color: #3b82f6;
+
+.btn-primary {
+  background: #0f172a;
+  color: #fff;
+  border-color: #0f172a;
+  cursor: pointer;
+}
+
+.btn-primary:hover {
+  background: #1e293b;
+}
+
+.file-input {
+  display: none;
+}
+
+.status {
+  font-size: 12px;
+  color: #64748b;
+  padding: 4px 8px;
+  background: #f1f5f9;
+  border-radius: 4px;
+}
+
+.main {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
 }
 </style>
diff --git a/package.json b/package.json
index 6d4b70f3..30aa4f63 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "dev:nextjs": "cd examples/nextjs && npm run dev",
     "dev:remix": "cd examples/remix && npm run dev",
     "dev:astro": "cd examples/astro && npm run dev",
+    "dev:vue": "cd examples/vue && bun run dev",
     "dev:demo": "bash examples/dev-all.sh",
     "build": "bun run --filter '@eigenpal/docx-core' build && bun run --filter '@eigenpal/docx-js-editor' build",
     "build:demo": "vite build --config examples/vite/vite.config.ts",
@@ -47,6 +48,7 @@
     "@typescript-eslint/eslint-plugin": "^8.54.0",
     "@typescript-eslint/parser": "^8.54.0",
     "@vitejs/plugin-react": "^5.1.2",
+    "@vitejs/plugin-vue": "^6.0.4",
     "autoprefixer": "^10.4.17",
     "class-variance-authority": "^0.7.0",
     "eslint": "^10.0.3",
@@ -63,7 +65,8 @@
     "tailwindcss-animate": "^1.0.7",
     "tsup": "^8.0.1",
     "typescript": "^5.3.3",
-    "vite": "^7.3.1"
+    "vite": "^7.3.1",
+    "vue": "^3.5.29"
   },
   "keywords": [
     "docx",
diff --git a/packages/vue/i18n/en.json b/packages/vue/i18n/en.json
new file mode 100644
index 00000000..0c8e38fe
--- /dev/null
+++ b/packages/vue/i18n/en.json
@@ -0,0 +1,745 @@
+{
+  "_lang": "en",
+  "common": {
+    "cancel": "Cancel",
+    "insert": "Insert",
+    "apply": "Apply",
+    "close": "Close",
+    "delete": "Delete",
+    "update": "Update",
+    "save": "Save",
+    "retry": "Retry",
+    "send": "Send",
+    "edit": "Edit",
+    "comment": "Comment",
+    "reply": "Reply",
+    "accept": "Accept",
+    "reject": "Reject",
+    "dismiss": "Dismiss",
+    "change": "Change",
+    "px": "px",
+    "closeDialog": "Close dialog"
+  },
+  "toolbar": {
+    "ariaLabel": "Formatting toolbar",
+    "file": "File",
+    "format": "Format",
+    "insert": "Insert",
+    "print": "Print",
+    "printShortcut": "Ctrl+P",
+    "pageSetup": "Page setup",
+    "leftToRight": "Left-to-right text",
+    "rightToLeft": "Right-to-left text",
+    "image": "Image",
+    "table": "Table",
+    "pageBreak": "Page break",
+    "tableOfContents": "Table of contents",
+    "symbol": "Symbol"
+  },
+  "formattingBar": {
+    "groups": {
+      "history": "History",
+      "zoom": "Zoom",
+      "styles": "Styles",
+      "font": "Font",
+      "textFormatting": "Text formatting",
+      "script": "Script",
+      "alignment": "Alignment",
+      "listFormatting": "List formatting",
+      "image": "Image",
+      "table": "Table"
+    },
+    "undo": "Undo",
+    "undoShortcut": "Undo (Ctrl+Z)",
+    "redo": "Redo",
+    "redoShortcut": "Redo (Ctrl+Y)",
+    "bold": "Bold",
+    "boldShortcut": "Bold (Ctrl+B)",
+    "italic": "Italic",
+    "italicShortcut": "Italic (Ctrl+I)",
+    "underline": "Underline",
+    "underlineShortcut": "Underline (Ctrl+U)",
+    "strikethrough": "Strikethrough",
+    "fontColor": "Font Color",
+    "highlightColor": "Text Highlight Color",
+    "insertLink": "Insert link",
+    "insertLinkShortcut": "Insert link (Ctrl+K)",
+    "superscript": "Superscript",
+    "superscriptShortcut": "Superscript (Ctrl+Shift+=)",
+    "subscript": "Subscript",
+    "subscriptShortcut": "Subscript (Ctrl+=)",
+    "imageProperties": "Image properties",
+    "imagePropertiesShortcut": "Image properties (alt text, border)...",
+    "clearFormatting": "Clear formatting"
+  },
+  "alignment": {
+    "alignLeft": "Align Left",
+    "alignLeftShortcut": "Ctrl+L",
+    "center": "Center",
+    "centerShortcut": "Ctrl+E",
+    "alignRight": "Align Right",
+    "alignRightShortcut": "Ctrl+R",
+    "justify": "Justify",
+    "justifyShortcut": "Ctrl+J"
+  },
+  "lists": {
+    "ariaLabel": "List formatting",
+    "typeAriaLabel": "List type",
+    "indentationAriaLabel": "List indentation",
+    "bulletList": "Bullet List",
+    "numberedList": "Numbered List",
+    "decreaseIndent": "Decrease Indent",
+    "increaseIndent": "Increase Indent"
+  },
+  "lineSpacing": {
+    "single": "Single",
+    "double": "Double",
+    "lineSpacingTitle": "Line spacing: {label}",
+    "paragraphSpacing": "Paragraph spacing"
+  },
+  "styles": {
+    "selectAriaLabel": "Select paragraph style",
+    "normalText": "Normal text",
+    "title": "Title",
+    "subtitle": "Subtitle",
+    "heading1": "Heading 1",
+    "heading2": "Heading 2",
+    "heading3": "Heading 3"
+  },
+  "font": {
+    "selectAriaLabel": "Select font family",
+    "sansSerif": "Sans Serif",
+    "serif": "Serif",
+    "monospace": "Monospace"
+  },
+  "fontSize": {
+    "decrease": "Decrease font size",
+    "increase": "Increase font size",
+    "label": "Font size",
+    "listLabel": "Font sizes"
+  },
+  "zoom": {
+    "ariaLabel": "Zoom: {label}"
+  },
+  "colorPicker": {
+    "ariaLabel": "{type} color picker",
+    "highlightColors": "Highlight Colors",
+    "customColor": "Custom Color",
+    "noColor": "No Color",
+    "automatic": "Automatic",
+    "themeColors": "Theme Colors",
+    "standardColors": "Standard Colors",
+    "colors": {
+      "black": "Black",
+      "darkRed": "Dark Red",
+      "red": "Red",
+      "orange": "Orange",
+      "yellow": "Yellow",
+      "darkYellow": "Dark Yellow",
+      "green": "Green",
+      "darkGreen": "Dark Green",
+      "teal": "Teal",
+      "darkTeal": "Dark Teal",
+      "blue": "Blue",
+      "darkBlue": "Dark Blue",
+      "purple": "Purple",
+      "darkPurple": "Dark Purple",
+      "brown": "Brown",
+      "grey50": "Grey 50%",
+      "grey25": "Grey 25%",
+      "grey10": "Grey 10%",
+      "white": "White",
+      "lightRed": "Light Red",
+      "lightOrange": "Light Orange",
+      "lightYellow": "Light Yellow",
+      "lightGreen": "Light Green",
+      "lightBlue": "Light Blue",
+      "lightPurple": "Light Purple",
+      "pink": "Pink",
+      "rose": "Rose",
+      "gold": "Gold",
+      "aqua": "Aqua",
+      "lavender": "Lavender",
+      "silver": "Silver",
+      "darkOrange": "Dark Orange",
+      "darkGray": "Dark Gray",
+      "gray": "Gray",
+      "cyan": "Cyan",
+      "magenta": "Magenta",
+      "paleGreen": "Pale Green",
+      "lightCyan": "Light Cyan",
+      "skyBlue": "Sky Blue",
+      "lightBlue2": "Light Blue 2",
+      "lightMagenta": "Light Magenta",
+      "brightGreen": "Bright Green",
+      "violet": "Violet"
+    }
+  },
+  "dialogs": {
+    "findReplace": {
+      "titleFind": "Find",
+      "titleFindReplace": "Find and Replace",
+      "findLabel": "Find:",
+      "findPlaceholder": "Enter text to find...",
+      "findAriaLabel": "Find text",
+      "findPrevious": "Find previous",
+      "findPreviousTitle": "Find Previous (Shift+Enter)",
+      "findNext": "Find next",
+      "findNextTitle": "Find Next (Enter)",
+      "matchCount": "{current} of {total} matches",
+      "noResults": "No results found",
+      "replaceLabel": "Replace:",
+      "replacePlaceholder": "Enter replacement text...",
+      "replaceAriaLabel": "Replace text",
+      "replaceButton": "Replace",
+      "replaceCurrentTitle": "Replace current match",
+      "replaceAllButton": "Replace All",
+      "replaceAllTitle": "Replace all matches",
+      "matchCase": "Match case",
+      "wholeWords": "Whole words",
+      "toggleReplace": "+ Replace"
+    },
+    "hyperlink": {
+      "titleEdit": "Edit Hyperlink",
+      "titleInsert": "Insert Hyperlink",
+      "tabWebAddress": "Web Address",
+      "tabBookmark": "Bookmark",
+      "urlLabel": "URL",
+      "urlPlaceholder": "https://example.com",
+      "urlHint": "Enter a web address, email (mailto:), or phone (tel:)",
+      "bookmarkLabel": "Bookmark",
+      "bookmarkPlaceholder": "Select a bookmark...",
+      "displayTextLabel": "Display Text",
+      "displayTextPlaceholder": "Text to display (optional)",
+      "displayTextHint": "Leave empty to use the selected text",
+      "tooltipLabel": "Tooltip (optional)",
+      "tooltipPlaceholder": "Text shown on hover",
+      "removeLink": "Remove Link",
+      "invalidUrl": "Please enter a valid URL",
+      "urlRequired": "URL is required"
+    },
+    "insertTable": {
+      "title": "Insert Table",
+      "hoverToSelect": "Hover to select size",
+      "tableSize": "{cols} x {rows} Table",
+      "orSpecifySize": "or specify size",
+      "rowsLabel": "Rows:",
+      "columnsLabel": "Columns:",
+      "insertButton": "Insert Table",
+      "sizeSelector": "Table size selector"
+    },
+    "insertImage": {
+      "title": "Insert Image",
+      "uploadAriaLabel": "Click or drag to upload image",
+      "uploadText": "Click to select or drag and drop an image",
+      "uploadSubtext": "PNG, JPG, GIF up to 10MB",
+      "dimensions": "Dimensions",
+      "widthLabel": "Width:",
+      "heightLabel": "Height:",
+      "aspectRatioLocked": "Aspect ratio locked",
+      "aspectRatioUnlocked": "Aspect ratio unlocked",
+      "altTextLabel": "Alt Text (optional)",
+      "altTextPlaceholder": "Describe the image for accessibility",
+      "insertButton": "Insert Image",
+      "invalidFile": "Please select a valid image file",
+      "fileTooLarge": "Image file is too large (max 10MB)",
+      "readFailed": "Failed to read image file",
+      "loadFailed": "Failed to load image",
+      "preview": "Preview"
+    },
+    "insertSymbol": {
+      "title": "Insert Symbol",
+      "searchPlaceholder": "Search symbols (character or Unicode)...",
+      "noResults": "No symbols found for \"{query}\"",
+      "decimal": "Decimal: {value}",
+      "categories": {
+        "common": "Common",
+        "arrows": "Arrows",
+        "math": "Math",
+        "greek": "Greek",
+        "shapes": "Shapes",
+        "punctuation": "Punctuation",
+        "currency": "Currency",
+        "music": "Music",
+        "emoji": "Emoji"
+      }
+    },
+    "imageProperties": {
+      "title": "Image Properties",
+      "altText": "Alt Text",
+      "altTextPlaceholder": "Describe this image for accessibility...",
+      "border": "Border",
+      "width": "Width",
+      "style": "Style",
+      "color": "Color",
+      "preview": "Preview",
+      "borderStyles": {
+        "solid": "Solid",
+        "dashed": "Dashed",
+        "dotted": "Dotted",
+        "double": "Double",
+        "groove": "Groove",
+        "ridge": "Ridge",
+        "inset": "Inset",
+        "outset": "Outset"
+      }
+    },
+    "imagePosition": {
+      "title": "Image Position",
+      "horizontal": "Horizontal",
+      "vertical": "Vertical",
+      "position": "Position",
+      "alignment": "Alignment",
+      "offset": "Offset",
+      "offsetPx": "Offset (px)",
+      "align": "Align",
+      "relativeTo": "Relative to",
+      "alignOptions": {
+        "left": "Left",
+        "center": "Center",
+        "right": "Right",
+        "top": "Top",
+        "bottom": "Bottom"
+      },
+      "relativeOptions": {
+        "page": "Page",
+        "column": "Column",
+        "margin": "Margin",
+        "character": "Character",
+        "paragraph": "Paragraph",
+        "line": "Line"
+      }
+    },
+    "pageSetup": {
+      "title": "Page Setup",
+      "pageSize": "PAGE SIZE",
+      "sizeLabel": "Size",
+      "custom": "Custom",
+      "orientation": "Orientation",
+      "portrait": "Portrait",
+      "landscape": "Landscape",
+      "margins": "MARGINS",
+      "top": "Top",
+      "bottom": "Bottom",
+      "left": "Left",
+      "right": "Right",
+      "pageSizes": {
+        "letter": "Letter (8.5\" × 11\")",
+        "a4": "A4 (8.27\" × 11.69\")",
+        "legal": "Legal (8.5\" × 14\")",
+        "a3": "A3 (11.69\" × 16.54\")",
+        "a5": "A5 (5.83\" × 8.27\")",
+        "b5": "B5 (6.93\" × 9.84\")",
+        "executive": "Executive (7.25\" × 10.5\")"
+      }
+    },
+    "tableProperties": {
+      "title": "Table Properties",
+      "widthType": "Width type",
+      "widthLabel": "Width",
+      "alignmentLabel": "Alignment",
+      "widthTypes": {
+        "auto": "Auto",
+        "fixed": "Fixed (twips)",
+        "percentage": "Percentage"
+      },
+      "units": {
+        "fiftiethsPercent": "(50ths of %)",
+        "twips": "tw"
+      },
+      "alignOptions": {
+        "left": "Left",
+        "center": "Center",
+        "right": "Right"
+      }
+    },
+    "pasteSpecial": {
+      "title": "Paste Special",
+      "keepFormatting": "Keep Source Formatting",
+      "keepFormattingDescription": "Paste with original formatting",
+      "keepFormattingShortcut": "Ctrl+V",
+      "plainText": "Paste as Plain Text",
+      "plainTextDescription": "Paste without any formatting",
+      "plainTextShortcut": "Ctrl+Shift+V",
+      "readingClipboard": "Reading clipboard...",
+      "preview": "Preview:",
+      "noContent": "No content available to paste",
+      "clipboardError": "Unable to read clipboard. Please use Ctrl+V to paste."
+    },
+    "footnoteProperties": {
+      "title": "Footnote & Endnote Properties",
+      "footnotes": "Footnotes",
+      "endnotes": "Endnotes",
+      "position": "Position",
+      "numberFormat": "Number format",
+      "startAt": "Start at",
+      "numbering": "Numbering",
+      "footnotePositions": {
+        "bottomOfPage": "Bottom of page",
+        "belowText": "Below text"
+      },
+      "endnotePositions": {
+        "endOfDocument": "End of document",
+        "endOfSection": "End of section"
+      },
+      "numberingOptions": {
+        "continuous": "Continuous",
+        "restartSection": "Restart each section",
+        "restartPage": "Restart each page"
+      },
+      "formats": {
+        "decimal": "1, 2, 3, ...",
+        "lowerRoman": "i, ii, iii, ...",
+        "upperRoman": "I, II, III, ...",
+        "lowerAlpha": "a, b, c, ...",
+        "upperAlpha": "A, B, C, ...",
+        "symbols": "*, †, ‡, ..."
+      }
+    },
+    "keyboardShortcuts": {
+      "ariaLabel": "Keyboard Shortcuts",
+      "searchPlaceholder": "Search shortcuts...",
+      "categories": {
+        "editing": "Editing",
+        "formatting": "Formatting",
+        "navigation": "Navigation",
+        "clipboard": "Clipboard",
+        "selection": "Selection",
+        "view": "View",
+        "file": "File",
+        "other": "Other"
+      },
+      "shortcuts": {
+        "save": "Save",
+        "saveDescription": "Save document",
+        "print": "Print",
+        "printDescription": "Print document",
+        "undo": "Undo",
+        "undoDescription": "Undo last action",
+        "redo": "Redo",
+        "redoDescription": "Redo last action",
+        "delete": "Delete",
+        "deleteDescription": "Delete selected text",
+        "find": "Find",
+        "findDescription": "Find text in document",
+        "findReplace": "Find & Replace",
+        "findReplaceDescription": "Find and replace text",
+        "cut": "Cut",
+        "cutDescription": "Cut selected text",
+        "copy": "Copy",
+        "copyDescription": "Copy selected text",
+        "paste": "Paste",
+        "pasteDescription": "Paste from clipboard",
+        "pastePlainText": "Paste as Plain Text",
+        "pastePlainTextDescription": "Paste without formatting",
+        "bold": "Bold",
+        "boldDescription": "Toggle bold formatting",
+        "italic": "Italic",
+        "italicDescription": "Toggle italic formatting",
+        "underline": "Underline",
+        "underlineDescription": "Toggle underline formatting",
+        "strikethrough": "Strikethrough",
+        "strikethroughDescription": "Toggle strikethrough",
+        "subscript": "Subscript",
+        "subscriptDescription": "Toggle subscript",
+        "superscript": "Superscript",
+        "superscriptDescription": "Toggle superscript",
+        "alignLeft": "Align Left",
+        "alignLeftDescription": "Left align paragraph",
+        "alignCenter": "Align Center",
+        "alignCenterDescription": "Center align paragraph",
+        "alignRight": "Align Right",
+        "alignRightDescription": "Right align paragraph",
+        "justify": "Justify",
+        "justifyDescription": "Justify paragraph",
+        "increaseIndent": "Increase Indent",
+        "increaseIndentDescription": "Increase paragraph indent",
+        "decreaseIndent": "Decrease Indent",
+        "decreaseIndentDescription": "Decrease paragraph indent",
+        "selectAll": "Select All",
+        "selectAllDescription": "Select all content",
+        "selectWord": "Select Word",
+        "selectWordDescription": "Select current word",
+        "selectParagraph": "Select Paragraph",
+        "selectParagraphDescription": "Select current paragraph",
+        "extendSelectionByWord": "Extend Selection by Word",
+        "extendSelectionByWordDescription": "Extend selection to next/previous word",
+        "extendSelectionToLineEdge": "Extend Selection to Line Edge",
+        "extendSelectionToLineEdgeDescription": "Extend selection to line start/end",
+        "moveByWord": "Move by Word",
+        "moveByWordDescription": "Move cursor to next/previous word",
+        "moveToLineStart": "Move to Line Start",
+        "moveToLineStartDescription": "Move cursor to start of line",
+        "moveToLineEnd": "Move to Line End",
+        "moveToLineEndDescription": "Move cursor to end of line",
+        "moveToDocumentStart": "Move to Document Start",
+        "moveToDocumentStartDescription": "Move cursor to start of document",
+        "moveToDocumentEnd": "Move to Document End",
+        "moveToDocumentEndDescription": "Move cursor to end of document",
+        "pageUp": "Page Up",
+        "pageUpDescription": "Scroll up one page",
+        "pageDown": "Page Down",
+        "pageDownDescription": "Scroll down one page",
+        "zoomIn": "Zoom In",
+        "zoomInDescription": "Increase zoom level",
+        "zoomOut": "Zoom Out",
+        "zoomOutDescription": "Decrease zoom level",
+        "resetZoom": "Reset Zoom",
+        "resetZoomDescription": "Reset zoom to 100%",
+        "keyboardShortcuts": "Keyboard Shortcuts",
+        "keyboardShortcutsDescription": "Show this help dialog"
+      },
+      "noResults": "No shortcuts found matching \"{query}\"",
+      "pressEscToClose": "Press {key} to close",
+      "or": "or"
+    }
+  },
+  "comments": {
+    "resolved": "Resolved",
+    "resolve": "Resolve",
+    "reopen": "Reopen",
+    "moreOptions": "More options",
+    "unknown": "Unknown",
+    "addComment": "Add a comment...",
+    "replyPlaceholder": "Reply or add others with @",
+    "replyCount": "{count, plural, one {# reply} other {# replies}}"
+  },
+  "trackedChanges": {
+    "unknown": "Unknown",
+    "replaced": "Replaced",
+    "with": "with",
+    "added": "Added",
+    "deleted": "Deleted"
+  },
+  "contextMenu": {
+    "ariaLabel": "AI actions menu",
+    "textMenuAriaLabel": "Text editing menu",
+    "customPromptPlaceholder": "Enter custom prompt...",
+    "cut": "Cut",
+    "cutShortcut": "Ctrl+X",
+    "copy": "Copy",
+    "copyShortcut": "Ctrl+C",
+    "paste": "Paste",
+    "pasteShortcut": "Ctrl+V",
+    "pastePlainText": "Paste as Plain Text",
+    "pastePlainTextShortcut": "Ctrl+Shift+V",
+    "delete": "Delete",
+    "deleteShortcut": "Del",
+    "selectAll": "Select All",
+    "selectAllShortcut": "Ctrl+A",
+    "selected": "Selected:",
+    "aiActions": {
+      "askAi": "Ask AI",
+      "rewrite": "Rewrite",
+      "expand": "Expand",
+      "summarize": "Summarize",
+      "translate": "Translate",
+      "explain": "Explain",
+      "fixGrammar": "Fix Grammar",
+      "makeFormal": "Make Formal",
+      "makeCasual": "Make Casual",
+      "custom": "Custom"
+    }
+  },
+  "documentOutline": {
+    "ariaLabel": "Document outline",
+    "closeAriaLabel": "Close outline",
+    "closeTitle": "Close outline",
+    "title": "Outline",
+    "noHeadings": "No headings found. Add headings to your document to see them here."
+  },
+  "sidebar": {
+    "ariaLabel": "Annotations sidebar"
+  },
+  "titleBar": {
+    "untitled": "Untitled",
+    "documentNameAriaLabel": "Document name",
+    "menuBarAriaLabel": "Menu bar"
+  },
+  "errors": {
+    "loadingDocument": "Loading document...",
+    "noDocumentLoaded": "No document loaded",
+    "failedToLoad": "Failed to Load Document",
+    "unableToParse": "Unable to Parse Document",
+    "somethingWentWrong": "Something went wrong",
+    "errorDescription": "An error occurred while rendering this component. Please try again or contact support if the problem persists.",
+    "errorLabel": "Error:",
+    "componentStack": "Component Stack:",
+    "tryAgain": "Try Again",
+    "showDetails": "Show details",
+    "hideDetails": "Hide details",
+    "unsavedChanges": "You have unsaved changes. Are you sure you want to leave?"
+  },
+  "table": {
+    "insertRowAbove": "Insert row above",
+    "insertRowBelow": "Insert row below",
+    "insertColumnLeft": "Insert column left",
+    "insertColumnRight": "Insert column right",
+    "deleteRow": "Delete row",
+    "deleteColumn": "Delete column",
+    "deleteTable": "Delete table",
+    "mergeCells": "Merge cells",
+    "splitCell": "Split cell",
+    "editingTools": "Table editing tools",
+    "label": "Table:",
+    "cellFillColor": "Cell Fill Color",
+    "borderColor": "Border Color",
+    "borderWidth": "Border width",
+    "unknownAction": "Unknown Action",
+    "borders": {
+      "all": "All borders",
+      "outside": "Outside borders",
+      "inside": "Inside borders",
+      "none": "No borders",
+      "remove": "Remove borders",
+      "top": "Top border",
+      "bottom": "Bottom border",
+      "left": "Left border",
+      "right": "Right border",
+      "styleAriaLabel": "Border style",
+      "tooltip": "Borders"
+    },
+    "moreOptions": "More table options",
+    "styles": {
+      "title": "Table Styles",
+      "label": "Styles",
+      "normalTable": "Normal Table",
+      "tableGrid": "Table Grid",
+      "gridTableLight": "Grid Table Light",
+      "plainTable1": "Plain Table 1",
+      "plainTable2": "Plain Table 2",
+      "plainTable3": "Plain Table 3",
+      "plainTable4": "Plain Table 4",
+      "gridTable1Light": "Grid Table 1 Light",
+      "gridTable4Accent1": "Grid Table 4 Accent 1",
+      "gridTable5Dark": "Grid Table 5 Dark",
+      "listTable3Accent2": "List Table 3 Accent 2",
+      "listTable4Accent3": "List Table 4 Accent 3",
+      "gridTable4Accent5": "Grid Table 4 Accent 5",
+      "gridTable4Accent6": "Grid Table 4 Accent 6"
+    }
+  },
+  "tableAdvanced": {
+    "verticalAlignment": "Vertical alignment",
+    "top": "Top",
+    "middle": "Middle",
+    "bottom": "Bottom",
+    "cellMargins": "Cell margins",
+    "textDirection": "Text direction",
+    "textDirections": {
+      "horizontal": "Horizontal (LR)",
+      "verticalRL": "Vertical (top-bottom, RL)",
+      "verticalLR": "Vertical (bottom-top, LR)"
+    },
+    "toggleNoWrap": "Toggle no-wrap",
+    "rowHeight": "Row height",
+    "heightRules": {
+      "auto": "Auto",
+      "atLeast": "At least",
+      "exact": "Exact"
+    },
+    "rule": "Rule",
+    "height": "Height",
+    "toggleHeaderRow": "Toggle header row",
+    "distributeColumns": "Distribute columns evenly",
+    "autoFit": "Auto-fit to contents",
+    "tableProperties": "Table properties...",
+    "tableAlignment": "Table alignment",
+    "alignTableLeft": "Align table left",
+    "alignTableCenter": "Align table center",
+    "alignTableRight": "Align table right",
+    "tableOptionsMenu": "Table options menu",
+    "tableOptions": "Table options"
+  },
+  "imageTransform": {
+    "tooltip": "Transform",
+    "rotateClockwise": "Rotate clockwise",
+    "rotateCounterClockwise": "Rotate counter-clockwise",
+    "flipHorizontal": "Flip horizontal",
+    "flipVertical": "Flip vertical"
+  },
+  "imageWrap": {
+    "inline": "Inline with text",
+    "floatLeft": "Float left (wrap right)",
+    "floatRight": "Float right (wrap left)",
+    "topAndBottom": "Top and bottom",
+    "behindText": "Behind text",
+    "inFrontOfText": "In front of text",
+    "tooltipPrefix": "Wrap: {label}"
+  },
+  "responsePreview": {
+    "loading": "{action}...",
+    "result": "{action} Result",
+    "closeEsc": "Close (Esc)",
+    "editPrompt": "Edit the result before accepting:",
+    "changes": "Changes:",
+    "original": "Original:",
+    "new": "New:",
+    "cancelEdit": "Cancel Edit"
+  },
+  "commentMarkers": {
+    "resolvedComment": "Resolved comment",
+    "comment": "Comment"
+  },
+  "editor": {
+    "toggleCommentsSidebar": "Toggle comments sidebar",
+    "showDocumentOutline": "Show document outline",
+    "editing": "Editing",
+    "editingDescription": "Edit document directly",
+    "suggesting": "Suggesting",
+    "suggestingDescription": "Edits become suggestions",
+    "viewing": "Viewing",
+    "viewingDescription": "Read-only, no edits",
+    "failedToParse": "Failed to parse document",
+    "linkRemoved": "Link removed",
+    "linkCopied": "Link copied to clipboard",
+    "failedToSave": "Failed to save document"
+  },
+  "hyperlinkPopup": {
+    "displayTextPlaceholder": "Display text",
+    "urlPlaceholder": "https://example.com",
+    "copyLink": "Copy link",
+    "editLink": "Edit link",
+    "removeLink": "Remove link"
+  },
+  "headerFooter": {
+    "header": "Header",
+    "footer": "Footer",
+    "options": "Options",
+    "insertPageNumber": "Insert current page number",
+    "insertTotalPages": "Insert total page count",
+    "remove": "Remove {label}",
+    "closeEditing": "Close {label} editing"
+  },
+  "image": {
+    "placeholder": "Image placeholder",
+    "placeholderText": "[Image]",
+    "editableAriaLabel": "Editable image"
+  },
+  "ruler": {
+    "horizontal": "Horizontal ruler",
+    "vertical": "Vertical ruler",
+    "firstLineIndent": "First line indent",
+    "leftIndent": "Left indent",
+    "rightIndent": "Right indent",
+    "topMargin": "Top margin",
+    "bottomMargin": "Bottom margin"
+  },
+  "print": {
+    "label": "Print",
+    "allPages": "All ({totalPages} pages)",
+    "singlePage": "Page {start}",
+    "pageRange": "Pages {start}-{end}"
+  },
+  "unsaved": {
+    "unsaved": "Unsaved",
+    "saved": "Saved",
+    "unsavedTitle": "Document has unsaved changes",
+    "savedTitle": "All changes saved",
+    "unsavedAriaLabel": "Unsaved changes",
+    "savedAriaLabel": "All changes saved"
+  },
+  "loading": {
+    "label": "Loading"
+  }
+}
diff --git a/packages/vue/package.json b/packages/vue/package.json
index 867142a2..c4f929ae 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -45,6 +45,7 @@
     "access": "public"
   },
   "devDependencies": {
+    "prosemirror-state": "^1.4.3",
     "prosemirror-view": "^1.41.6"
   }
 }
diff --git a/packages/vue/src/components/AIContextMenu.vue b/packages/vue/src/components/AIContextMenu.vue
new file mode 100644
index 00000000..2f518b04
--- /dev/null
+++ b/packages/vue/src/components/AIContextMenu.vue
@@ -0,0 +1,133 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="isOpen"
+      class="ai-ctx-backdrop"
+      @mousedown="$emit('close')"
+      @contextmenu.prevent="$emit('close')"
+    />
+    <div
+      v-if="isOpen"
+      class="ai-ctx-menu"
+      :style="menuStyle"
+      @contextmenu.prevent
+    >
+      <div class="ai-ctx-menu__header">AI Actions</div>
+      <button
+        v-for="action in actions"
+        :key="action.id"
+        class="ai-ctx-menu__item"
+        @mousedown.prevent="handleAction(action.id)"
+      >
+        <span class="ai-ctx-menu__icon">{{ action.icon }}</span>
+        <span class="ai-ctx-menu__label">{{ action.label }}</span>
+      </button>
+      <div class="ai-ctx-menu__divider" />
+      <div v-if="showCustomPrompt" class="ai-ctx-menu__custom">
+        <input
+          v-model="customPrompt"
+          class="ai-ctx-menu__input"
+          placeholder="Custom prompt..."
+          @keydown.enter.prevent="handleAction('custom')"
+        />
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    isOpen: boolean;
+    position: { x: number; y: number };
+    selectedText: string;
+    showCustomPrompt?: boolean;
+  }>(),
+  { showCustomPrompt: true }
+);
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'action', action: string, customPrompt?: string): void;
+}>();
+
+const customPrompt = ref('');
+
+const actions = [
+  { id: 'rewrite', label: 'Rewrite', icon: '&#x270D;' },
+  { id: 'expand', label: 'Expand', icon: '&#x2194;' },
+  { id: 'summarize', label: 'Summarize', icon: '&#x1F4DD;' },
+  { id: 'fixGrammar', label: 'Fix grammar', icon: '&#x2714;' },
+  { id: 'makeFormal', label: 'Make formal', icon: '&#x1F454;' },
+  { id: 'makeCasual', label: 'Make casual', icon: '&#x1F60A;' },
+  { id: 'translate', label: 'Translate', icon: '&#x1F310;' },
+  { id: 'explain', label: 'Explain', icon: '&#x1F4A1;' },
+];
+
+const menuStyle = computed(() => {
+  let x = props.position.x;
+  let y = props.position.y;
+  const MENU_W = 220;
+  const MENU_H = 360;
+  if (typeof window !== 'undefined') {
+    if (x + MENU_W + 10 > window.innerWidth) x = window.innerWidth - MENU_W - 10;
+    if (y + MENU_H + 10 > window.innerHeight) y = window.innerHeight - MENU_H - 10;
+  }
+  return { position: 'fixed' as const, left: `${x}px`, top: `${y}px`, zIndex: 500 };
+});
+
+function handleAction(action: string) {
+  emit('action', action, action === 'custom' ? customPrompt.value : undefined);
+  customPrompt.value = '';
+  emit('close');
+}
+</script>
+
+<style scoped>
+.ai-ctx-backdrop { position: fixed; inset: 0; z-index: 499; }
+.ai-ctx-menu {
+  background: #fff;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.14);
+  min-width: 200px;
+  padding: 4px 0;
+}
+.ai-ctx-menu__header {
+  padding: 6px 14px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.ai-ctx-menu__item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 7px 14px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 13px;
+  color: #1f2937;
+  text-align: left;
+}
+.ai-ctx-menu__item:hover { background: #f3f4f6; }
+.ai-ctx-menu__icon { font-size: 14px; width: 18px; text-align: center; }
+.ai-ctx-menu__label { flex: 1; }
+.ai-ctx-menu__divider { height: 1px; background: #e5e7eb; margin: 4px 10px; }
+.ai-ctx-menu__custom { padding: 6px 10px; }
+.ai-ctx-menu__input {
+  width: 100%;
+  padding: 6px 8px;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  font-size: 12px;
+  outline: none;
+}
+.ai-ctx-menu__input:focus { border-color: #3b82f6; }
+</style>
diff --git a/packages/vue/src/components/AIResponsePreview.vue b/packages/vue/src/components/AIResponsePreview.vue
new file mode 100644
index 00000000..f3f0aaa9
--- /dev/null
+++ b/packages/vue/src/components/AIResponsePreview.vue
@@ -0,0 +1,196 @@
+<template>
+  <div v-if="isVisible" class="ai-preview">
+    <div class="ai-preview__header">
+      <span class="ai-preview__title">{{ actionLabel }}</span>
+      <button class="ai-preview__close" @click="$emit('reject')">&#x2715;</button>
+    </div>
+
+    <!-- Loading state -->
+    <div v-if="isLoading" class="ai-preview__loading">
+      <span class="ai-preview__spinner" />
+      <span>Processing...</span>
+    </div>
+
+    <!-- Error state -->
+    <div v-else-if="error" class="ai-preview__error">
+      <span>{{ error }}</span>
+      <button v-if="showRetry" class="ai-preview__retry" @mousedown.prevent="$emit('retry')">Retry</button>
+    </div>
+
+    <!-- Diff view -->
+    <div v-else class="ai-preview__content">
+      <div v-if="showDiff" class="ai-preview__diff">
+        <div class="ai-preview__diff-label">Original:</div>
+        <div class="ai-preview__diff-text ai-preview__diff-text--old">{{ originalText }}</div>
+        <div class="ai-preview__diff-label">Suggested:</div>
+        <div class="ai-preview__diff-text ai-preview__diff-text--new">{{ responseText }}</div>
+      </div>
+      <div v-else class="ai-preview__result">
+        {{ responseText }}
+      </div>
+
+      <!-- Edit mode -->
+      <textarea
+        v-if="allowEdit && isEditing"
+        v-model="editedText"
+        class="ai-preview__textarea"
+        rows="4"
+      />
+    </div>
+
+    <!-- Footer actions -->
+    <div v-if="!isLoading && !error" class="ai-preview__footer">
+      <button v-if="allowEdit && !isEditing" class="ai-preview__btn" @mousedown.prevent="isEditing = true">Edit</button>
+      <button class="ai-preview__btn" @mousedown.prevent="$emit('reject')">Discard</button>
+      <button class="ai-preview__btn ai-preview__btn--primary" @mousedown.prevent="handleAccept">Accept</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    isVisible: boolean;
+    originalText: string;
+    responseText: string;
+    action: string;
+    isLoading: boolean;
+    error?: string;
+    allowEdit?: boolean;
+    showDiff?: boolean;
+    showRetry?: boolean;
+  }>(),
+  {
+    allowEdit: true,
+    showDiff: true,
+    showRetry: true,
+  }
+);
+
+const emit = defineEmits<{
+  (e: 'accept', text: string): void;
+  (e: 'reject'): void;
+  (e: 'retry'): void;
+}>();
+
+const isEditing = ref(false);
+const editedText = ref('');
+
+const actionLabels: Record<string, string> = {
+  rewrite: 'Rewrite',
+  expand: 'Expand',
+  summarize: 'Summary',
+  translate: 'Translation',
+  explain: 'Explanation',
+  fixGrammar: 'Grammar Fix',
+  makeFormal: 'Formal Version',
+  makeCasual: 'Casual Version',
+  custom: 'AI Response',
+  askAI: 'AI Response',
+};
+
+const actionLabel = computed(() => actionLabels[props.action] || 'AI Response');
+
+watch(() => props.responseText, (text) => {
+  editedText.value = text;
+  isEditing.value = false;
+});
+
+function handleAccept() {
+  emit('accept', isEditing.value ? editedText.value : props.responseText);
+}
+</script>
+
+<style scoped>
+.ai-preview {
+  background: #fff;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
+  width: 420px;
+  max-width: 90vw;
+  overflow: hidden;
+}
+.ai-preview__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  background: #f0f4ff;
+  border-bottom: 1px solid #d0daf0;
+}
+.ai-preview__title { font-size: 13px; font-weight: 600; color: #1a73e8; }
+.ai-preview__close { border: none; background: transparent; cursor: pointer; font-size: 14px; color: #6b7280; }
+.ai-preview__loading {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 24px 14px;
+  color: #6b7280;
+  font-size: 13px;
+}
+.ai-preview__spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid #e5e7eb;
+  border-top-color: #3b82f6;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+.ai-preview__error {
+  padding: 16px 14px;
+  color: #dc2626;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.ai-preview__retry {
+  padding: 4px 10px;
+  border: 1px solid #d1d5db;
+  border-radius: 3px;
+  background: #fff;
+  cursor: pointer;
+  font-size: 12px;
+}
+.ai-preview__content { padding: 12px 14px; }
+.ai-preview__diff-label { font-size: 11px; font-weight: 600; color: #6b7280; margin-bottom: 4px; text-transform: uppercase; }
+.ai-preview__diff-text { font-size: 13px; line-height: 1.5; padding: 8px 10px; border-radius: 4px; margin-bottom: 10px; }
+.ai-preview__diff-text--old { background: #fef2f2; color: #991b1b; }
+.ai-preview__diff-text--new { background: #f0fdf4; color: #166534; }
+.ai-preview__result { font-size: 13px; line-height: 1.5; color: #1f2937; }
+.ai-preview__textarea {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  font-size: 13px;
+  font-family: inherit;
+  resize: vertical;
+  margin-top: 8px;
+  outline: none;
+}
+.ai-preview__textarea:focus { border-color: #3b82f6; }
+.ai-preview__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+  padding: 10px 14px;
+  border-top: 1px solid #e5e7eb;
+}
+.ai-preview__btn {
+  padding: 5px 14px;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  background: #fff;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 500;
+}
+.ai-preview__btn:hover { background: #f3f4f6; }
+.ai-preview__btn--primary { background: #1a73e8; color: #fff; border-color: #1a73e8; }
+.ai-preview__btn--primary:hover { background: #1557b0; }
+</style>
diff --git a/packages/vue/src/components/BasicToolbar.vue b/packages/vue/src/components/BasicToolbar.vue
new file mode 100644
index 00000000..8eb7a27f
--- /dev/null
+++ b/packages/vue/src/components/BasicToolbar.vue
@@ -0,0 +1,777 @@
+<template>
+  <div class="basic-toolbar" v-if="view">
+    <!-- Paragraph Style Picker -->
+    <div class="toolbar-dropdown" ref="styleDropdownRef">
+      <button
+        class="toolbar-dropdown__trigger style-trigger"
+        @mousedown.prevent="toggleDropdown('style')"
+        :title="'Paragraph style'"
+      >
+        {{ currentStyleLabel }}
+        <span class="chevron">▾</span>
+      </button>
+      <div v-if="openDropdown === 'style'" class="toolbar-dropdown__menu style-menu">
+        <button
+          v-for="s in paragraphStyles"
+          :key="s.id"
+          class="toolbar-dropdown__item"
+          :class="{ active: ctx.paragraphFormatting.styleId === s.id }"
+          :style="s.previewStyle"
+          @mousedown.prevent="handleApplyStyle(s.id)"
+        >{{ s.label }}</button>
+      </div>
+    </div>
+
+    <span class="divider" />
+
+    <!-- Font Family Picker -->
+    <div class="toolbar-dropdown" ref="fontDropdownRef">
+      <button
+        class="toolbar-dropdown__trigger font-trigger"
+        @mousedown.prevent="toggleDropdown('font')"
+        title="Font family"
+      >
+        {{ currentFontFamily }}
+        <span class="chevron">▾</span>
+      </button>
+      <div v-if="openDropdown === 'font'" class="toolbar-dropdown__menu font-menu">
+        <div class="toolbar-dropdown__group-label">Sans-serif</div>
+        <button v-for="f in fontsSansSerif" :key="f" class="toolbar-dropdown__item" :style="{ fontFamily: f }" @mousedown.prevent="setFont(f)">{{ f }}</button>
+        <div class="toolbar-dropdown__group-label">Serif</div>
+        <button v-for="f in fontsSerif" :key="f" class="toolbar-dropdown__item" :style="{ fontFamily: f }" @mousedown.prevent="setFont(f)">{{ f }}</button>
+        <div class="toolbar-dropdown__group-label">Monospace</div>
+        <button v-for="f in fontsMono" :key="f" class="toolbar-dropdown__item" :style="{ fontFamily: f }" @mousedown.prevent="setFont(f)">{{ f }}</button>
+      </div>
+    </div>
+
+    <!-- Font Size Picker -->
+    <div class="toolbar-dropdown font-size-group" ref="sizeDropdownRef">
+      <button class="size-btn" @mousedown.prevent="decreaseFontSize" title="Decrease font size">−</button>
+      <button
+        class="toolbar-dropdown__trigger size-trigger"
+        @mousedown.prevent="toggleDropdown('size')"
+        title="Font size"
+      >{{ currentFontSize }}</button>
+      <button class="size-btn" @mousedown.prevent="increaseFontSize" title="Increase font size">+</button>
+      <div v-if="openDropdown === 'size'" class="toolbar-dropdown__menu size-menu">
+        <button
+          v-for="s in fontSizePresets"
+          :key="s"
+          class="toolbar-dropdown__item"
+          :class="{ active: currentFontSize === s }"
+          @mousedown.prevent="setFontSize(s)"
+        >{{ s }}</button>
+      </div>
+    </div>
+
+    <span class="divider" />
+
+    <!-- Text Formatting -->
+    <button title="Bold (Ctrl+B)" :class="{ active: ctx.textFormatting.bold }" @mousedown.prevent="execCommand('toggleBold')"><b>B</b></button>
+    <button title="Italic (Ctrl+I)" :class="{ active: ctx.textFormatting.italic }" @mousedown.prevent="execCommand('toggleItalic')"><i>I</i></button>
+    <button title="Underline (Ctrl+U)" :class="{ active: !!ctx.textFormatting.underline }" @mousedown.prevent="execCommand('toggleUnderline')"><u>U</u></button>
+    <button title="Strikethrough" :class="{ active: ctx.textFormatting.strike }" @mousedown.prevent="execCommand('toggleStrike')"><s>S</s></button>
+    <button title="Superscript (Ctrl+Shift+=)" :class="{ active: ctx.textFormatting.vertAlign === 'superscript' }" @mousedown.prevent="execCommand('toggleSuperscript')">X²</button>
+    <button title="Subscript (Ctrl+=)" :class="{ active: ctx.textFormatting.vertAlign === 'subscript' }" @mousedown.prevent="execCommand('toggleSubscript')">X₂</button>
+
+    <span class="divider" />
+
+    <!-- Text Color -->
+    <div class="toolbar-dropdown" ref="colorDropdownRef">
+      <button
+        class="color-btn"
+        @mousedown.prevent="toggleDropdown('color')"
+        title="Text color"
+      >
+        A
+        <span class="color-bar" :style="{ background: currentTextColor }"></span>
+      </button>
+      <div v-if="openDropdown === 'color'" class="toolbar-dropdown__menu color-menu">
+        <button class="toolbar-dropdown__item" @mousedown.prevent="setTextColor('')">Automatic</button>
+        <div class="color-grid">
+          <button
+            v-for="c in standardColors"
+            :key="c.hex"
+            class="color-swatch"
+            :style="{ background: '#' + c.hex }"
+            :title="c.name"
+            @mousedown.prevent="setTextColor(c.hex)"
+          ></button>
+        </div>
+        <div class="color-custom">
+          <input
+            v-model="customColor"
+            class="color-input"
+            placeholder="Hex (e.g. FF0000)"
+            @keydown.enter.prevent="setTextColor(customColor)"
+          />
+          <button class="color-apply" @mousedown.prevent="setTextColor(customColor)">Apply</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Highlight Color -->
+    <div class="toolbar-dropdown" ref="highlightDropdownRef">
+      <button
+        class="color-btn"
+        @mousedown.prevent="toggleDropdown('highlight')"
+        title="Highlight color"
+      >
+        <span class="highlight-icon" :style="{ background: currentHighlightColor }">A</span>
+      </button>
+      <div v-if="openDropdown === 'highlight'" class="toolbar-dropdown__menu color-menu">
+        <button class="toolbar-dropdown__item" @mousedown.prevent="setHighlight('none')">No Color</button>
+        <div class="color-grid">
+          <button
+            v-for="c in highlightColors"
+            :key="c.hex"
+            class="color-swatch"
+            :style="{ background: '#' + c.hex }"
+            :title="c.name"
+            @mousedown.prevent="setHighlight(c.hex)"
+          ></button>
+        </div>
+      </div>
+    </div>
+
+    <span class="divider" />
+
+    <!-- Alignment -->
+    <button title="Align Left (Ctrl+L)" :class="{ active: currentAlignment === 'left' }" @mousedown.prevent="execCommand('alignLeft')">⇤</button>
+    <button title="Align Center (Ctrl+E)" :class="{ active: currentAlignment === 'center' }" @mousedown.prevent="execCommand('alignCenter')">⇔</button>
+    <button title="Align Right (Ctrl+R)" :class="{ active: currentAlignment === 'right' }" @mousedown.prevent="execCommand('alignRight')">⇥</button>
+    <button title="Justify (Ctrl+J)" :class="{ active: currentAlignment === 'both' }" @mousedown.prevent="execCommand('alignJustify')">☰</button>
+
+    <span class="divider" />
+
+    <!-- Lists -->
+    <button title="Bullet List" :class="{ active: ctx.inList && ctx.listType === 'bullet' }" @mousedown.prevent="execCommand('toggleBulletList')">•≡</button>
+    <button title="Numbered List" :class="{ active: ctx.inList && ctx.listType === 'numbered' }" @mousedown.prevent="execCommand('toggleNumberedList')">1≡</button>
+    <button title="Decrease Indent (Shift+Tab)" @mousedown.prevent="execCommand('outdent')">⇤≡</button>
+    <button title="Increase Indent (Tab)" @mousedown.prevent="execCommand('indent')">≡⇥</button>
+
+    <span class="divider" />
+
+    <!-- Line Spacing -->
+    <div class="toolbar-dropdown" ref="spacingDropdownRef">
+      <button
+        class="toolbar-dropdown__trigger"
+        @mousedown.prevent="toggleDropdown('spacing')"
+        title="Line spacing"
+        style="width: auto; padding: 0 6px;"
+      >
+        ↕
+        <span class="chevron">▾</span>
+      </button>
+      <div v-if="openDropdown === 'spacing'" class="toolbar-dropdown__menu">
+        <button
+          v-for="sp in lineSpacingOptions"
+          :key="sp.value"
+          class="toolbar-dropdown__item"
+          :class="{ active: isCurrentLineSpacing(sp.value) }"
+          @mousedown.prevent="setLineSpacing(sp.value)"
+        >{{ sp.label }}</button>
+      </div>
+    </div>
+
+    <span class="divider" />
+
+    <!-- Clear Formatting -->
+    <button title="Clear formatting" @mousedown.prevent="handleClearFormatting">Tₓ</button>
+
+    <!-- Undo / Redo -->
+    <span class="divider" />
+    <button title="Undo (Ctrl+Z)" @mousedown.prevent="execCommand('undo')">↶</button>
+    <button title="Redo (Ctrl+Y)" @mousedown.prevent="execCommand('redo')">↷</button>
+
+    <!-- Find & Replace -->
+    <span class="divider" />
+    <button title="Find & Replace (Ctrl+H)" @mousedown.prevent="$emit('find-replace')">🔍</button>
+
+    <!-- Insert menu -->
+    <span class="divider" />
+    <div class="toolbar-dropdown" ref="insertDropdownRef">
+      <button
+        class="toolbar-dropdown__trigger"
+        @mousedown.prevent="toggleDropdown('insert')"
+        title="Insert"
+        style="width: auto; padding: 0 8px; font-weight: 500;"
+      >
+        Insert
+        <span class="chevron">▾</span>
+      </button>
+      <div v-if="openDropdown === 'insert'" class="toolbar-dropdown__menu" style="min-width: 160px;">
+        <button class="toolbar-dropdown__item" @mousedown.prevent="$emit('insert-table')">📊 Table...</button>
+        <button class="toolbar-dropdown__item" @mousedown.prevent="$emit('insert-image')">🖼️ Image...</button>
+        <button class="toolbar-dropdown__item" @mousedown.prevent="$emit('insert-link')">🔗 Link... (Ctrl+K)</button>
+        <button class="toolbar-dropdown__item" @mousedown.prevent="$emit('insert-symbol')">Ω Symbol...</button>
+        <div style="height:1px; background:#e5e7eb; margin:4px 0;"></div>
+        <button class="toolbar-dropdown__item" @mousedown.prevent="$emit('insert-page-break')">⏎ Page break</button>
+        <button class="toolbar-dropdown__item" @mousedown.prevent="$emit('insert-toc')">📑 Table of Contents</button>
+        <div style="height:1px; background:#e5e7eb; margin:4px 0;"></div>
+        <button class="toolbar-dropdown__item" @mousedown.prevent="$emit('page-setup')">⚙ Page setup...</button>
+      </div>
+    </div>
+
+    <!-- Document Outline toggle -->
+    <span class="divider" />
+    <button title="Document Outline" @mousedown.prevent="$emit('toggle-outline')">≡</button>
+
+    <!-- Comments / Changes sidebar toggle -->
+    <button title="Comments & Changes" @mousedown.prevent="$emit('toggle-sidebar')">💬</button>
+
+    <!-- Zoom Control -->
+    <span class="divider" />
+    <div class="toolbar-dropdown zoom-group" ref="zoomDropdownRef">
+      <button class="size-btn" @mousedown.prevent="$emit('zoom-out')" :disabled="isMinZoom" title="Zoom out">−</button>
+      <button
+        class="toolbar-dropdown__trigger zoom-trigger"
+        @mousedown.prevent="toggleDropdown('zoom')"
+        title="Zoom level"
+      >{{ zoomPercent }}%</button>
+      <button class="size-btn" @mousedown.prevent="$emit('zoom-in')" :disabled="isMaxZoom" title="Zoom in">+</button>
+      <div v-if="openDropdown === 'zoom'" class="toolbar-dropdown__menu zoom-menu">
+        <button
+          v-for="p in zoomPresets"
+          :key="p"
+          class="toolbar-dropdown__item"
+          :class="{ active: zoomPercent === Math.round(p * 100) }"
+          @mousedown.prevent="$emit('zoom-set', p)"
+        >{{ Math.round(p * 100) }}%</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue';
+import type { EditorView } from 'prosemirror-view';
+import { extractSelectionContext } from '@eigenpal/docx-core/prosemirror/plugins/selectionTracker';
+import { clearFormatting } from '@eigenpal/docx-core/prosemirror/commands/formatting';
+import type { SelectionContext } from '@eigenpal/docx-core/prosemirror/plugins/selectionTracker';
+
+const props = defineProps<{
+  view: EditorView | null;
+  getCommands: () => Record<string, (...args: any[]) => any>;
+  stateTick: number;
+  cursorMarks: { name: string; attrs: Record<string, any> }[];
+  zoomPercent?: number;
+  isMinZoom?: boolean;
+  isMaxZoom?: boolean;
+  zoomPresets?: number[];
+}>();
+
+const emit = defineEmits<{
+  (e: 'find-replace'): void;
+  (e: 'insert-table'): void;
+  (e: 'insert-image'): void;
+  (e: 'insert-link'): void;
+  (e: 'insert-symbol'): void;
+  (e: 'insert-page-break'): void;
+  (e: 'insert-toc'): void;
+  (e: 'page-setup'): void;
+  (e: 'toggle-outline'): void;
+  (e: 'zoom-in'): void;
+  (e: 'zoom-out'): void;
+  (e: 'zoom-set', level: number): void;
+  (e: 'toggle-sidebar'): void;
+  (e: 'apply-style', styleId: string): void;
+}>();
+
+// =========================================================================
+// Dropdown state
+// =========================================================================
+
+const zoomPercent = computed(() => props.zoomPercent ?? 100);
+const isMinZoom = computed(() => props.isMinZoom ?? false);
+const isMaxZoom = computed(() => props.isMaxZoom ?? false);
+const zoomPresets = computed(() => props.zoomPresets ?? [0.5, 0.75, 1.0, 1.25, 1.5, 2.0]);
+
+const openDropdown = ref<string | null>(null);
+const styleDropdownRef = ref<HTMLElement | null>(null);
+const fontDropdownRef = ref<HTMLElement | null>(null);
+const sizeDropdownRef = ref<HTMLElement | null>(null);
+const colorDropdownRef = ref<HTMLElement | null>(null);
+const highlightDropdownRef = ref<HTMLElement | null>(null);
+const spacingDropdownRef = ref<HTMLElement | null>(null);
+const insertDropdownRef = ref<HTMLElement | null>(null);
+const zoomDropdownRef = ref<HTMLElement | null>(null);
+const customColor = ref('');
+
+function toggleDropdown(name: string) {
+  openDropdown.value = openDropdown.value === name ? null : name;
+}
+
+function closeDropdowns(e: MouseEvent) {
+  const refs = [styleDropdownRef, fontDropdownRef, sizeDropdownRef, colorDropdownRef, highlightDropdownRef, spacingDropdownRef, insertDropdownRef, zoomDropdownRef];
+  const target = e.target as Node;
+  if (!refs.some(r => r.value?.contains(target))) {
+    openDropdown.value = null;
+  }
+}
+
+onMounted(() => document.addEventListener('mousedown', closeDropdowns));
+onBeforeUnmount(() => document.removeEventListener('mousedown', closeDropdowns));
+
+// =========================================================================
+// Selection context (reactive via stateTick)
+// =========================================================================
+
+const ctx = computed<SelectionContext>(() => {
+  void props.stateTick;
+  const v = props.view;
+  if (!v) {
+    return {
+      hasSelection: false,
+      isMultiParagraph: false,
+      textFormatting: {},
+      paragraphFormatting: {},
+      startParagraphIndex: 0,
+      endParagraphIndex: 0,
+      inList: false,
+      activeCommentIds: [],
+      inInsertion: false,
+      inDeletion: false,
+    };
+  }
+  return extractSelectionContext(v.state);
+});
+
+// =========================================================================
+// Derived state for toolbar display
+// =========================================================================
+
+/**
+ * Local snapshot of marks at cursor/selection start.
+ * Updated via two paths:
+ *  1. watch on stateTick (for selection changes by user interaction)
+ *  2. snapshotMarks() called directly in execCommand (for toolbar-driven commands)
+ */
+const marksTick = ref(0);
+
+/** Read marks directly from the EditorView state */
+function snapshotMarks() {
+  marksTick.value++;
+}
+
+/** Read a mark attribute from the current ProseMirror state */
+function readMarkAttr(markName: string, attr: string): unknown {
+  const v = props.view;
+  if (!v) return undefined;
+  const { state } = v;
+  const marks = getMarksFromState(state);
+  for (const mark of marks) {
+    if (mark.type.name === markName) return mark.attrs[attr];
+  }
+  return undefined;
+}
+
+/** Get marks at the cursor/selection start, handling text node boundaries correctly */
+function getMarksFromState(state: any): readonly any[] {
+  if (state.storedMarks) return state.storedMarks;
+  const { from, to, empty } = state.selection;
+  if (empty) return state.selection.$from.marks();
+  // For non-empty selection, read marks from the first text node in the range
+  // ($from.marks() at a boundary can return marks from the node BEFORE the selection)
+  let marks: readonly any[] = [];
+  state.doc.nodesBetween(from, Math.min(from + 1, to), (node: any) => {
+    if (node.isText) {
+      marks = node.marks;
+      return false;
+    }
+  });
+  return marks.length ? marks : state.selection.$from.marks();
+}
+
+// When the parent signals a state change, bump our local tick too
+watch(() => props.stateTick, () => { marksTick.value++; });
+
+const currentFontFamily = computed(() => {
+  void marksTick.value;
+  const ascii = readMarkAttr('fontFamily', 'ascii') as string | undefined;
+  const hAnsi = readMarkAttr('fontFamily', 'hAnsi') as string | undefined;
+  return ascii || hAnsi || 'Arial';
+});
+
+const currentFontSize = computed(() => {
+  void marksTick.value;
+  const sz = readMarkAttr('fontSize', 'size') as number | undefined;
+  return sz ? sz / 2 : 11; // half-points to points
+});
+
+const currentTextColor = computed(() => {
+  void marksTick.value;
+  const rgb = readMarkAttr('textColor', 'rgb') as string | undefined;
+  return rgb ? '#' + rgb : '#000000';
+});
+
+const currentHighlightColor = computed(() => {
+  void marksTick.value;
+  const h = readMarkAttr('highlight', 'color') as string | undefined;
+  return h && h !== 'none' ? '#' + h : 'transparent';
+});
+
+const currentAlignment = computed(() => {
+  return ctx.value.paragraphFormatting.alignment || 'left';
+});
+
+const currentStyleLabel = computed(() => {
+  const id = ctx.value.paragraphFormatting.styleId || 'Normal';
+  const s = paragraphStyles.find(ps => ps.id === id);
+  return s?.label || id;
+});
+
+// =========================================================================
+// Constants
+// =========================================================================
+
+const fontsSansSerif = ['Arial', 'Calibri', 'Helvetica', 'Verdana', 'Open Sans', 'Roboto'];
+const fontsSerif = ['Times New Roman', 'Georgia', 'Cambria', 'Garamond'];
+const fontsMono = ['Courier New', 'Consolas'];
+
+const fontSizePresets = [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 36, 48, 72];
+
+const standardColors = [
+  { name: 'Dark Red', hex: 'C00000' },
+  { name: 'Red', hex: 'FF0000' },
+  { name: 'Orange', hex: 'FFC000' },
+  { name: 'Yellow', hex: 'FFFF00' },
+  { name: 'Light Green', hex: '92D050' },
+  { name: 'Green', hex: '00B050' },
+  { name: 'Light Blue', hex: '00B0F0' },
+  { name: 'Blue', hex: '0070C0' },
+  { name: 'Dark Blue', hex: '002060' },
+  { name: 'Purple', hex: '7030A0' },
+];
+
+const highlightColors = [
+  { name: 'Yellow', hex: 'FFFF00' },
+  { name: 'Bright Green', hex: '00FF00' },
+  { name: 'Cyan', hex: '00FFFF' },
+  { name: 'Magenta', hex: 'FF00FF' },
+  { name: 'Blue', hex: '0000FF' },
+  { name: 'Red', hex: 'FF0000' },
+  { name: 'Dark Blue', hex: '000080' },
+  { name: 'Teal', hex: '008080' },
+  { name: 'Green', hex: '008000' },
+  { name: 'Violet', hex: '800080' },
+  { name: 'Dark Red', hex: '800000' },
+  { name: 'Dark Yellow', hex: '808000' },
+  { name: 'Gray 50%', hex: '808080' },
+  { name: 'Gray 25%', hex: 'C0C0C0' },
+  { name: 'Black', hex: '000000' },
+];
+
+const paragraphStyles = [
+  { id: 'Normal', label: 'Normal', previewStyle: { fontSize: '13px' } },
+  { id: 'Title', label: 'Title', previewStyle: { fontSize: '20px', fontWeight: 'bold' } },
+  { id: 'Subtitle', label: 'Subtitle', previewStyle: { fontSize: '15px', color: '#6b7280' } },
+  { id: 'Heading1', label: 'Heading 1', previewStyle: { fontSize: '18px', fontWeight: 'bold', color: '#4a6c8c' } },
+  { id: 'Heading2', label: 'Heading 2', previewStyle: { fontSize: '16px', fontWeight: 'bold', color: '#4a6c8c' } },
+  { id: 'Heading3', label: 'Heading 3', previewStyle: { fontSize: '14px', fontWeight: 'bold', color: '#4a6c8c' } },
+];
+
+const lineSpacingOptions = [
+  { label: 'Single', value: 240 },
+  { label: '1.15', value: 276 },
+  { label: '1.5', value: 360 },
+  { label: 'Double', value: 480 },
+];
+
+// =========================================================================
+// Command helpers
+// =========================================================================
+
+function execCommand(name: string, ...args: any[]) {
+  const v = props.view;
+  if (!v) return;
+  const cmds = props.getCommands();
+  const cmdFactory = cmds[name];
+  if (!cmdFactory) { console.warn('[Toolbar] command not found:', name); return; }
+  const command = cmdFactory(...args);
+  command(v.state, (tr: any) => v.dispatch(tr), v);
+  // Immediately snapshot marks from the updated state so the toolbar
+  // reflects the change before the next Vue render cycle.
+  snapshotMarks();
+  // Only refocus if PM lost focus — unconditional focus() can dispatch
+  // a selection-syncing transaction that clears stored marks.
+  if (!v.hasFocus()) v.focus();
+  openDropdown.value = null;
+}
+
+function setFont(fontName: string) {
+  execCommand('setFontFamily', fontName);
+}
+
+function setFontSize(size: number) {
+  // Commands expect half-points
+  execCommand('setFontSize', size * 2);
+}
+
+function increaseFontSize() {
+  const current = currentFontSize.value;
+  const next = fontSizePresets.find(s => s > current) || current + 2;
+  setFontSize(next);
+}
+
+function decreaseFontSize() {
+  const current = currentFontSize.value;
+  const prev = [...fontSizePresets].reverse().find(s => s < current) || Math.max(1, current - 2);
+  setFontSize(prev);
+}
+
+function setTextColor(hex: string) {
+  if (!hex) {
+    execCommand('clearTextColor');
+  } else {
+    execCommand('setTextColor', { rgb: hex });
+  }
+}
+
+function handleClearFormatting() {
+  const v = props.view;
+  if (!v) return;
+  clearFormatting(v.state, (tr: any) => v.dispatch(tr), v);
+  snapshotMarks();
+  if (!v.hasFocus()) v.focus();
+}
+
+function setHighlight(value: string) {
+  execCommand('setHighlight', value);
+}
+
+function handleApplyStyle(styleId: string) {
+  emit('apply-style', styleId);
+  openDropdown.value = null;
+}
+
+function setLineSpacing(value: number) {
+  execCommand('setLineSpacing', value);
+}
+
+function isCurrentLineSpacing(twips: number): boolean {
+  const current = ctx.value.paragraphFormatting.lineSpacing;
+  if (!current) return twips === 240; // default is single
+  return Math.abs(current - twips) < 10;
+}
+</script>
+
+<style scoped>
+.basic-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px 8px;
+  background: #fff;
+  border-bottom: 1px solid #e2e8f0;
+  flex-wrap: wrap;
+  min-height: 40px;
+}
+.basic-toolbar button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 600;
+  color: #334155;
+  padding: 0 4px;
+  white-space: nowrap;
+}
+.basic-toolbar button:hover { background: #f1f5f9; }
+.basic-toolbar button.active { background: #e2e8f0; color: #0f172a; }
+.divider {
+  width: 1px;
+  height: 20px;
+  background: #e2e8f0;
+  margin: 0 2px;
+  flex-shrink: 0;
+}
+
+/* Dropdown system */
+.toolbar-dropdown {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.toolbar-dropdown__trigger {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  height: 28px;
+  padding: 0 6px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: transparent;
+  cursor: pointer;
+  font-size: 12px;
+  color: #334155;
+  white-space: nowrap;
+}
+.toolbar-dropdown__trigger:hover {
+  background: #f1f5f9;
+  border-color: #e2e8f0;
+}
+.chevron {
+  font-size: 10px;
+  color: #94a3b8;
+}
+.toolbar-dropdown__menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 200;
+  background: #fff;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
+  max-height: 320px;
+  overflow-y: auto;
+  min-width: 120px;
+  padding: 4px 0;
+}
+.toolbar-dropdown__item {
+  display: block;
+  width: 100%;
+  padding: 6px 12px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+  font-size: 13px;
+  color: #1f2937;
+  white-space: nowrap;
+}
+.toolbar-dropdown__item:hover { background: #f3f4f6; }
+.toolbar-dropdown__item.active { background: #e0e7ff; color: #3730a3; }
+.toolbar-dropdown__group-label {
+  padding: 4px 12px 2px;
+  font-size: 10px;
+  font-weight: 600;
+  color: #9ca3af;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* Style picker */
+.style-trigger { min-width: 90px; }
+.style-menu { min-width: 160px; }
+
+/* Font picker */
+.font-trigger { min-width: 100px; }
+.font-menu { min-width: 180px; }
+
+/* Font size */
+.font-size-group {
+  display: flex;
+  align-items: center;
+  gap: 0;
+}
+.size-btn {
+  width: 22px !important;
+  height: 22px !important;
+  min-width: 22px !important;
+  font-size: 14px !important;
+  border: 1px solid #e2e8f0 !important;
+  border-radius: 3px !important;
+  padding: 0 !important;
+  line-height: 1;
+}
+.size-trigger {
+  width: 36px;
+  text-align: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 600;
+  border: 1px solid transparent;
+}
+.size-menu { min-width: 60px; }
+.size-menu .toolbar-dropdown__item { text-align: center; }
+
+/* Color picker */
+.color-btn {
+  position: relative;
+  width: 32px !important;
+  font-size: 14px !important;
+  font-weight: 700 !important;
+}
+.color-bar {
+  position: absolute;
+  bottom: 2px;
+  left: 6px;
+  right: 6px;
+  height: 3px;
+  border-radius: 1px;
+}
+.highlight-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 16px;
+  font-size: 12px;
+  font-weight: 700;
+  border-radius: 2px;
+  color: #000;
+}
+.color-menu { min-width: 200px; padding: 8px; }
+.color-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 4px;
+  padding: 6px 0;
+}
+.color-swatch {
+  width: 28px !important;
+  height: 28px !important;
+  min-width: 28px !important;
+  border: 1px solid #d1d5db !important;
+  border-radius: 4px !important;
+  cursor: pointer;
+  padding: 0 !important;
+}
+.color-swatch:hover { border-color: #3b82f6 !important; box-shadow: 0 0 0 1px #3b82f6; }
+.color-custom {
+  display: flex;
+  gap: 4px;
+  padding-top: 6px;
+  border-top: 1px solid #e5e7eb;
+  margin-top: 4px;
+}
+.color-input {
+  flex: 1;
+  padding: 4px 6px;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  font-size: 12px;
+}
+.color-apply {
+  padding: 4px 8px !important;
+  font-size: 11px !important;
+  border: 1px solid #d1d5db !important;
+  border-radius: 4px !important;
+  min-width: auto !important;
+}
+
+/* Zoom control */
+.zoom-group {
+  display: flex;
+  align-items: center;
+  gap: 0;
+}
+.zoom-trigger {
+  width: 48px;
+  text-align: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 600;
+  border: 1px solid transparent;
+}
+.zoom-menu { min-width: 80px; }
+.zoom-menu .toolbar-dropdown__item { text-align: center; }
+</style>
diff --git a/packages/vue/src/components/DocumentName.vue b/packages/vue/src/components/DocumentName.vue
new file mode 100644
index 00000000..4609dca5
--- /dev/null
+++ b/packages/vue/src/components/DocumentName.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="doc-name">
+    <input
+      v-if="editable"
+      class="doc-name__input"
+      :value="displayName"
+      @input="handleInput"
+      @blur="handleBlur"
+      placeholder="Untitled document"
+    />
+    <span v-else class="doc-name__text">{{ displayName || 'Untitled document' }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string;
+    editable?: boolean;
+  }>(),
+  { editable: true }
+);
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+}>();
+
+const displayName = computed(() => {
+  const name = props.modelValue || '';
+  return name.replace(/\.docx$/i, '');
+});
+
+function handleInput(event: Event) {
+  const raw = (event.target as HTMLInputElement).value;
+  emit('update:modelValue', raw.endsWith('.docx') ? raw : raw + '.docx');
+}
+
+function handleBlur(event: FocusEvent) {
+  const raw = (event.target as HTMLInputElement).value.trim();
+  if (!raw) {
+    emit('update:modelValue', 'Untitled document.docx');
+  }
+}
+</script>
+
+<style scoped>
+.doc-name { display: inline-flex; align-items: center; }
+.doc-name__input {
+  border: 1px solid transparent;
+  border-radius: 4px;
+  padding: 4px 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #1f2937;
+  background: transparent;
+  min-width: 120px;
+  max-width: 300px;
+  outline: none;
+}
+.doc-name__input:hover { border-color: #e5e7eb; }
+.doc-name__input:focus { border-color: #3b82f6; background: #fff; }
+.doc-name__text {
+  font-size: 14px;
+  font-weight: 500;
+  color: #1f2937;
+  padding: 4px 8px;
+}
+</style>
diff --git a/packages/vue/src/components/DocumentOutline.vue b/packages/vue/src/components/DocumentOutline.vue
new file mode 100644
index 00000000..45d3fa4b
--- /dev/null
+++ b/packages/vue/src/components/DocumentOutline.vue
@@ -0,0 +1,94 @@
+<template>
+  <div v-if="isOpen" class="doc-outline">
+    <div class="doc-outline__header">
+      <button class="doc-outline__back" @click="$emit('close')">←</button>
+      <span class="doc-outline__title">Document Outline</span>
+    </div>
+    <div class="doc-outline__body">
+      <div v-if="headings.length === 0" class="doc-outline__empty">
+        No headings found
+      </div>
+      <button
+        v-for="(h, i) in headings"
+        :key="i"
+        class="doc-outline__item"
+        :style="{ paddingLeft: (12 + h.level * 16) + 'px' }"
+        @mousedown.prevent="$emit('navigate', h.pmPos)"
+      >{{ h.text || '(untitled)' }}</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { HeadingInfo } from '@eigenpal/docx-core/utils/headingCollector';
+
+defineProps<{
+  isOpen: boolean;
+  headings: HeadingInfo[];
+}>();
+
+defineEmits<{
+  (e: 'close'): void;
+  (e: 'navigate', pmPos: number): void;
+}>();
+</script>
+
+<style scoped>
+.doc-outline {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 240px;
+  background: #fff;
+  border-right: 1px solid #e2e8f0;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 2px 0 8px rgba(0,0,0,0.08);
+  animation: slideIn 0.15s ease-out;
+}
+@keyframes slideIn {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(0); }
+}
+.doc-outline__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border-bottom: 1px solid #e5e7eb;
+}
+.doc-outline__back {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 16px;
+  color: #6b7280;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+}
+.doc-outline__back:hover { background: #f3f4f6; }
+.doc-outline__title { font-weight: 600; font-size: 13px; color: #1f2937; }
+.doc-outline__body { flex: 1; overflow-y: auto; padding: 4px 0; }
+.doc-outline__empty { padding: 24px 16px; text-align: center; color: #9ca3af; font-size: 13px; }
+.doc-outline__item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 6px 12px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 13px;
+  color: #374151;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.doc-outline__item:hover { background: #f3f4f6; }
+</style>
diff --git a/packages/vue/src/components/DocxEditorVue.vue b/packages/vue/src/components/DocxEditorVue.vue
new file mode 100644
index 00000000..f079b78e
--- /dev/null
+++ b/packages/vue/src/components/DocxEditorVue.vue
@@ -0,0 +1,1293 @@
+<template>
+  <div class="docx-editor-vue">
+    <BasicToolbar
+      v-if="showToolbar"
+      :view="editorView"
+      :get-commands="getCommands"
+      :state-tick="stateTick"
+      :cursor-marks="cursorMarks"
+      :zoom-percent="zoomPercent"
+      :is-min-zoom="isMinZoom"
+      :is-max-zoom="isMaxZoom"
+      :zoom-presets="ZOOM_PRESETS"
+      @find-replace="showFindReplace = true"
+      @insert-table="showInsertTable = true"
+      @insert-image="showInsertImage = true"
+      @insert-link="showHyperlink = true"
+      @insert-symbol="showInsertSymbol = true"
+      @insert-page-break="handleInsertPageBreak"
+      @apply-style="handleApplyStyle"
+      @insert-toc="execSimpleCommand('generateTOC')"
+      @page-setup="showPageSetup = true"
+      @toggle-outline="handleToggleOutline"
+      @zoom-in="zoomIn"
+      @zoom-out="zoomOut"
+      @zoom-set="setZoom"
+      @toggle-sidebar="handleToggleSidebar"
+    />
+
+    <TableToolbar
+      v-if="showToolbar"
+      :view="editorView"
+      :get-commands="getCommands"
+      :state-tick="stateTick"
+    />
+
+    <FindReplaceDialog
+      :is-open="showFindReplace"
+      :view="editorView"
+      @close="showFindReplace = false"
+    />
+
+    <InsertTableDialog
+      :is-open="showInsertTable"
+      @close="showInsertTable = false"
+      @insert="handleInsertTable"
+    />
+
+    <InsertImageDialog
+      :is-open="showInsertImage"
+      @close="showInsertImage = false"
+      @insert="handleInsertImage"
+    />
+
+    <HyperlinkDialog
+      :is-open="showHyperlink"
+      :view="editorView"
+      @close="showHyperlink = false"
+      @submit="handleHyperlinkSubmit"
+      @remove="handleHyperlinkRemove"
+    />
+
+    <InsertSymbolDialog
+      :is-open="showInsertSymbol"
+      @close="showInsertSymbol = false"
+      @insert="handleInsertSymbol"
+    />
+
+    <div v-if="parseError" class="docx-editor-vue__error">
+      {{ parseError }}
+    </div>
+
+    <div v-if="!isReady && !parseError" class="docx-editor-vue__loading">
+      Loading...
+    </div>
+
+    <!-- Hidden ProseMirror (off-screen, receives keyboard input) -->
+    <div ref="hiddenPmRef" class="docx-editor-vue__hidden-pm" />
+
+    <!-- Visible pages (rendered by layout-painter) -->
+    <div
+      ref="pagesViewportRef"
+      class="docx-editor-vue__pages-viewport"
+      :style="{ transform: `scale(${zoom})`, transformOrigin: 'top center' }"
+      @mousedown="handlePagesMouseDown"
+      @contextmenu.prevent="handleContextMenu"
+      @wheel="handleZoomWheel"
+    >
+      <div ref="pagesRef" class="docx-editor-vue__pages" />
+
+      <ImageEditOverlay
+        :image-info="selectedImage"
+        :zoom="zoom"
+        :view="editorView"
+        @open-properties="showImageProperties = true"
+        @deselect="selectedImage = null"
+      />
+    </div>
+
+    <ImagePropertiesDialog
+      :is-open="showImageProperties"
+      :view="editorView"
+      :pm-pos="selectedImage?.pmPos ?? null"
+      @close="showImageProperties = false"
+    />
+
+    <PageSetupDialog
+      :is-open="showPageSetup"
+      :section-properties="currentSectionProperties"
+      @close="showPageSetup = false"
+      @apply="handlePageSetupApply"
+    />
+
+    <DocumentOutline
+      :is-open="showOutline"
+      :headings="outlineHeadings"
+      @close="showOutline = false"
+      @navigate="handleOutlineNavigate"
+    />
+
+    <KeyboardShortcutsDialog
+      :is-open="showKeyboardShortcuts"
+      @close="showKeyboardShortcuts = false"
+    />
+
+    <TextContextMenu
+      :is-open="contextMenu.isOpen"
+      :position="contextMenu.position"
+      :has-selection="contextMenu.hasSelection"
+      :is-editable="!readOnly"
+      :in-table="contextMenu.inTable"
+      :on-image="contextMenu.onImage"
+      @action="handleContextMenuAction"
+      @close="contextMenu.isOpen = false"
+    />
+
+    <UnifiedSidebar
+      :is-open="showSidebar"
+      :comments="comments"
+      :tracked-changes="trackedChanges"
+      :is-adding-comment="isAddingComment"
+      :show-resolved="true"
+      @close="showSidebar = false"
+      @add-comment="handleAddComment"
+      @cancel-add-comment="isAddingComment = false"
+      @comment-reply="handleCommentReply"
+      @comment-resolve="handleCommentResolve"
+      @comment-unresolve="handleCommentUnresolve"
+      @comment-delete="handleCommentDelete"
+      @accept-change="handleAcceptChange"
+      @reject-change="handleRejectChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import BasicToolbar from './BasicToolbar.vue';
+import FindReplaceDialog from './FindReplaceDialog.vue';
+import TableToolbar from './TableToolbar.vue';
+import InsertTableDialog from './InsertTableDialog.vue';
+import InsertImageDialog from './InsertImageDialog.vue';
+import HyperlinkDialog from './HyperlinkDialog.vue';
+import InsertSymbolDialog from './InsertSymbolDialog.vue';
+import ImageEditOverlay from './ImageEditOverlay.vue';
+import type { ImageSelectionInfo } from './ImageEditOverlay.vue';
+import ImagePropertiesDialog from './ImagePropertiesDialog.vue';
+import PageSetupDialog from './PageSetupDialog.vue';
+import DocumentOutline from './DocumentOutline.vue';
+import KeyboardShortcutsDialog from './KeyboardShortcutsDialog.vue';
+import TextContextMenu from './TextContextMenu.vue';
+import UnifiedSidebar from './sidebar/UnifiedSidebar.vue';
+import type { TrackedChangeEntry } from './sidebar/sidebarUtils';
+import { useDocxEditor } from '../composables/useDocxEditor';
+import { useZoom } from '../composables/useZoom';
+import { TextSelection, NodeSelection } from 'prosemirror-state';
+import type { EditorView } from 'prosemirror-view';
+import type { Document, SectionProperties } from '@eigenpal/docx-core/types/document';
+import type { Comment } from '@eigenpal/docx-core/types/content';
+import { collectHeadings } from '@eigenpal/docx-core/utils/headingCollector';
+import type { HeadingInfo } from '@eigenpal/docx-core/utils/headingCollector';
+import { clickToPositionDom } from '@eigenpal/docx-core/layout-bridge/clickToPositionDom';
+import {
+  getSelectionRectsFromDom,
+  getCaretPositionFromDom,
+} from '@eigenpal/docx-core/layout-bridge/clickToPositionDom';
+import { findWordBoundaries } from '@eigenpal/docx-core/utils/textSelection';
+import { insertPageBreak } from '@eigenpal/docx-core/prosemirror/commands/pageBreak';
+import { applyStyle } from '@eigenpal/docx-core/prosemirror/commands/paragraph';
+import { createStyleResolver } from '@eigenpal/docx-core/prosemirror/styles';
+
+const props = withDefaults(
+  defineProps<{
+    documentBuffer?: ArrayBuffer | null;
+    document?: Document | null;
+    showToolbar?: boolean;
+    readOnly?: boolean;
+  }>(),
+  {
+    documentBuffer: null,
+    document: null,
+    showToolbar: true,
+    readOnly: false,
+  }
+);
+
+const emit = defineEmits<{
+  (e: 'change', doc: Document): void;
+  (e: 'error', error: Error): void;
+  (e: 'ready'): void;
+}>();
+
+const hiddenPmRef = ref<HTMLElement | null>(null);
+const pagesRef = ref<HTMLElement | null>(null);
+const pagesViewportRef = ref<HTMLElement | null>(null);
+const stateTick = ref(0);
+const showFindReplace = ref(false);
+const showInsertTable = ref(false);
+const showInsertImage = ref(false);
+const showHyperlink = ref(false);
+const showInsertSymbol = ref(false);
+const showImageProperties = ref(false);
+const showPageSetup = ref(false);
+const showOutline = ref(false);
+const showKeyboardShortcuts = ref(false);
+const showSidebar = ref(false);
+const isAddingComment = ref(false);
+const comments = ref<Comment[]>([]);
+const trackedChanges = ref<TrackedChangeEntry[]>([]);
+const contextMenu = ref({
+  isOpen: false,
+  position: { x: 0, y: 0 },
+  hasSelection: false,
+  inTable: false,
+  onImage: false,
+});
+const outlineHeadings = ref<HeadingInfo[]>([]);
+const selectedImage = ref<ImageSelectionInfo | null>(null);
+
+const {
+  zoom,
+  zoomPercent,
+  isMinZoom,
+  isMaxZoom,
+  setZoom,
+  zoomIn,
+  zoomOut,
+  handleWheel: handleZoomWheel,
+  handleKeyDown: handleZoomKeyDown,
+  ZOOM_PRESETS,
+} = useZoom();
+
+const {
+  editorView,
+  isReady,
+  parseError,
+  cursorMarks,
+  loadBuffer,
+  loadDocument,
+  save,
+  focus,
+  destroy,
+  getDocument,
+  getCommands,
+  reLayout,
+} = useDocxEditor({
+  hiddenContainer: hiddenPmRef,
+  pagesContainer: pagesRef,
+  readOnly: props.readOnly,
+  onChange: (doc) => emit('change', doc),
+  onError: (err) => emit('error', err),
+  onSelectionUpdate: () => {
+    stateTick.value++;
+    updateSelectionOverlay();
+  },
+});
+
+watch(
+  () => props.documentBuffer,
+  async (buf) => {
+    if (buf) {
+      await loadBuffer(buf);
+      nextTick(() => extractCommentsAndChanges());
+      emit('ready');
+    }
+  }
+);
+
+watch(
+  () => props.document,
+  (doc) => {
+    if (doc) {
+      loadDocument(doc);
+      nextTick(() => extractCommentsAndChanges());
+      emit('ready');
+    }
+  }
+);
+
+onMounted(async () => {
+  await nextTick();
+  if (props.documentBuffer) {
+    await loadBuffer(props.documentBuffer);
+    nextTick(() => extractCommentsAndChanges());
+    emit('ready');
+  } else if (props.document) {
+    loadDocument(props.document);
+    emit('ready');
+  }
+});
+
+// =========================================================================
+// Selection & caret overlay
+// =========================================================================
+
+let caretBlinkInterval: ReturnType<typeof setInterval> | null = null;
+let caretEl: HTMLElement | null = null;
+
+function clearOverlay() {
+  const container = pagesRef.value;
+  if (!container) return;
+  container.querySelectorAll('.vue-sel-rect, .vue-caret').forEach((el) => el.remove());
+  if (caretBlinkInterval !== null) {
+    clearInterval(caretBlinkInterval);
+    caretBlinkInterval = null;
+  }
+  caretEl = null;
+}
+
+function updateSelectionOverlay() {
+  const container = pagesRef.value;
+  const view = editorView.value;
+  if (!container || !view) return;
+
+  clearOverlay();
+
+  // Skip text/caret overlay when an image is selected — ImageEditOverlay handles it
+  if (selectedImage.value) return;
+
+  const { from, to, empty } = view.state.selection;
+
+  // Account for scroll offset: overlays are position:absolute inside the
+  // scrollable container, so we need to add scrollTop/scrollLeft to convert
+  // viewport-relative coordinates from getBoundingClientRect to container-relative.
+  const scrollTop = container.scrollTop;
+  const scrollLeft = container.scrollLeft;
+
+  if (empty) {
+    // Draw blinking caret
+    const overlayRect = container.getBoundingClientRect();
+    const caret = getCaretPositionFromDom(container, from, overlayRect);
+    if (caret) {
+      const el = document.createElement('div');
+      el.className = 'vue-caret';
+      el.style.cssText = `
+        position: absolute;
+        left: ${caret.x + scrollLeft}px;
+        top: ${caret.y + scrollTop}px;
+        width: 1.5px;
+        height: ${caret.height}px;
+        background: #000;
+        pointer-events: none;
+        z-index: 2;
+      `;
+      container.appendChild(el);
+      caretEl = el;
+
+      // Blink
+      let visible = true;
+      caretBlinkInterval = setInterval(() => {
+        visible = !visible;
+        if (caretEl) caretEl.style.opacity = visible ? '1' : '0';
+      }, 530);
+    }
+    return;
+  }
+
+  // Draw selection highlight rects (character-level)
+  const overlayRect = container.getBoundingClientRect();
+  const rects = getSelectionRectsFromDom(container, from, to, overlayRect);
+
+  for (const rect of rects) {
+    const el = document.createElement('div');
+    el.className = 'vue-sel-rect';
+    el.style.cssText = `
+      position: absolute;
+      left: ${rect.x + scrollLeft}px;
+      top: ${rect.y + scrollTop}px;
+      width: ${rect.width}px;
+      height: ${rect.height}px;
+      background: rgba(66, 133, 244, 0.3);
+      pointer-events: none;
+      z-index: 1;
+    `;
+    container.appendChild(el);
+  }
+}
+
+// =========================================================================
+// Multi-click detection (double-click = word, triple-click = paragraph)
+// =========================================================================
+
+const MULTI_CLICK_DELAY = 500;
+let lastClickTime = 0;
+let lastClickPos: number | null = null;
+let clickCount = 0;
+
+function findElementAtPosition(container: HTMLElement, pmPos: number): HTMLElement | null {
+  // dataset.pmStart in JS maps to data-pm-start in HTML
+  const els = container.querySelectorAll<HTMLElement>('[data-pm-start]');
+  for (const el of els) {
+    const start = Number(el.dataset.pmStart);
+    const end = Number(el.dataset.pmEnd);
+    if (!isNaN(start) && !isNaN(end) && pmPos >= start && pmPos <= end) {
+      return el;
+    }
+  }
+  return null;
+}
+
+function selectWord(pos: number) {
+  const container = pagesRef.value;
+  if (!container) return;
+  const el = findElementAtPosition(container, pos);
+  if (!el) return;
+  const text = el.textContent || '';
+  const pmStart = Number(el.dataset.pmStart) || 0;
+  const offset = pos - pmStart;
+  const [start, end] = findWordBoundaries(text, offset);
+  const from = pmStart + start;
+  const to = pmStart + end;
+  if (from < to) {
+    setPmSelection(from, to);
+  }
+}
+
+function selectParagraph(pos: number) {
+  const container = pagesRef.value;
+  if (!container) return;
+  const el = findElementAtPosition(container, pos);
+  if (!el) return;
+  const paragraph = el.closest('.layout-paragraph') as HTMLElement | null;
+  if (!paragraph) return;
+  const pmStart = Number(paragraph.dataset.pmStart);
+  const pmEnd = Number(paragraph.dataset.pmEnd);
+  if (!isNaN(pmStart) && !isNaN(pmEnd) && pmStart < pmEnd) {
+    setPmSelection(pmStart, pmEnd);
+  }
+}
+
+// =========================================================================
+// Drag-to-select support
+// =========================================================================
+
+let isDragging = false;
+let dragAnchor: number | null = null;
+
+function resolvePos(clientX: number, clientY: number): number | null {
+  const container = pagesRef.value;
+  if (!container) return null;
+  const pos = clickToPositionDom(container, clientX, clientY, 1);
+  if (pos === null || pos < 0) return null;
+  const view = editorView.value;
+  if (!view) return null;
+  return Math.min(pos, view.state.doc.content.size);
+}
+
+function setPmSelection(anchor: number, head?: number) {
+  const view = editorView.value;
+  if (!view) return;
+  const $anchor = view.state.doc.resolve(anchor);
+  const $head = head !== undefined ? view.state.doc.resolve(head) : $anchor;
+  const sel = TextSelection.between($anchor, $head);
+  view.dispatch(view.state.tr.setSelection(sel));
+}
+
+const IMAGE_CONTAINER_CLASSES = [
+  'layout-block-image',
+  'layout-image',
+  'layout-page-floating-image',
+];
+
+function findImageElement(target: HTMLElement): HTMLElement | null {
+  const isImageContainer = (el: HTMLElement) =>
+    !!el.dataset.pmStart && IMAGE_CONTAINER_CLASSES.some((c) => el.classList.contains(c));
+
+  // Inline images: <img class="layout-run layout-run-image" data-pm-start="X">
+  if (target.tagName === 'IMG' && target.classList.contains('layout-run-image')) {
+    return target;
+  }
+  // Click on <img> or <a> inside a container div — walk up to find it
+  const container = target.closest(
+    IMAGE_CONTAINER_CLASSES.map((c) => `.${c}`).join(',')
+  ) as HTMLElement | null;
+  if (container && isImageContainer(container)) {
+    return container;
+  }
+  return null;
+}
+
+function handlePagesMouseDown(event: MouseEvent) {
+  if (event.button !== 0) return;
+  const view = editorView.value;
+  if (!view) return;
+
+  // Check if user clicked on an image
+  const target = event.target as HTMLElement;
+  const imageEl = findImageElement(target);
+  if (imageEl) {
+    event.preventDefault();
+    event.stopPropagation();
+    const pmStart = Number(imageEl.dataset.pmStart);
+    if (!isNaN(pmStart)) {
+      // Set ProseMirror node selection on the image
+      try {
+        const sel = NodeSelection.create(view.state.doc, pmStart);
+        view.dispatch(view.state.tr.setSelection(sel));
+      } catch {
+        // Position may be invalid
+      }
+      selectedImage.value = {
+        element: imageEl,
+        pmPos: pmStart,
+        width: imageEl.offsetWidth,
+        height: imageEl.offsetHeight,
+      };
+      // Clear text caret overlay so it doesn't show alongside the image selection
+      clearOverlay();
+    }
+    view.focus();
+    return;
+  }
+
+  // Clicked outside image — deselect
+  selectedImage.value = null;
+
+  // Prevent browser from moving focus to the pages div — PM must keep focus
+  event.preventDefault();
+
+  const pos = resolvePos(event.clientX, event.clientY);
+  if (pos === null) {
+    view.focus();
+    return;
+  }
+
+  // Multi-click detection
+  const now = Date.now();
+  if (now - lastClickTime < MULTI_CLICK_DELAY && lastClickPos === pos) {
+    clickCount++;
+  } else {
+    clickCount = 1;
+  }
+  lastClickTime = now;
+  lastClickPos = pos;
+
+  if (clickCount === 2) {
+    selectWord(pos);
+  } else if (clickCount >= 3) {
+    selectParagraph(pos);
+    clickCount = 0;
+  } else {
+    // Single click
+    if (event.shiftKey) {
+      const { from } = view.state.selection;
+      setPmSelection(from, pos);
+    } else {
+      setPmSelection(pos);
+    }
+    dragAnchor = pos;
+    isDragging = true;
+  }
+
+  view.focus();
+}
+
+function handleMouseMove(event: MouseEvent) {
+  if (!isDragging || dragAnchor === null) return;
+  const pos = resolvePos(event.clientX, event.clientY);
+  if (pos !== null && pos !== dragAnchor) {
+    setPmSelection(dragAnchor, pos);
+  }
+}
+
+function handleMouseUp() {
+  isDragging = false;
+}
+
+// =========================================================================
+// Insert operation handlers
+// =========================================================================
+
+function execSimpleCommand(name: string) {
+  const view = editorView.value;
+  if (!view) return;
+  const cmds = getCommands();
+  const cmdFactory = cmds[name];
+  if (!cmdFactory) return;
+  const command = cmdFactory();
+  command(view.state, (tr: any) => view.dispatch(tr), view);
+  view.focus();
+}
+
+function handleInsertTable(rows: number, cols: number) {
+  const view = editorView.value;
+  if (!view) return;
+  const cmds = getCommands();
+  const cmd = cmds['insertTable'];
+  if (!cmd) return;
+  const command = cmd(rows, cols);
+  command(view.state, (tr: any) => view.dispatch(tr), view);
+  view.focus();
+}
+
+function handleInsertImage(data: { src: string; width: number; height: number; alt: string }) {
+  const view = editorView.value;
+  if (!view) return;
+  const imageNodeType = view.state.schema.nodes.image;
+  if (!imageNodeType) return;
+  const node = imageNodeType.create({
+    src: data.src,
+    alt: data.alt,
+    width: data.width,
+    height: data.height,
+  });
+  const { from } = view.state.selection;
+  const tr = view.state.tr.insert(from, node);
+  view.dispatch(tr.scrollIntoView());
+  view.focus();
+}
+
+function handleHyperlinkSubmit(data: { url: string; displayText: string; tooltip: string }) {
+  const view = editorView.value;
+  if (!view) return;
+  const cmds = getCommands();
+  const { empty } = view.state.selection;
+
+  if (empty && data.displayText) {
+    // Insert new link with text
+    const cmd = cmds['insertHyperlink'];
+    if (cmd) {
+      const command = cmd(data.displayText, data.url, data.tooltip || undefined);
+      command(view.state, (tr: any) => view.dispatch(tr), view);
+    }
+  } else {
+    // Apply link to selection
+    const cmd = cmds['setHyperlink'];
+    if (cmd) {
+      const command = cmd(data.url, data.tooltip || undefined);
+      command(view.state, (tr: any) => view.dispatch(tr), view);
+    }
+  }
+  view.focus();
+}
+
+function handleHyperlinkRemove() {
+  const view = editorView.value;
+  if (!view) return;
+  const cmds = getCommands();
+  const cmd = cmds['removeHyperlink'];
+  if (cmd) {
+    const command = cmd();
+    command(view.state, (tr: any) => view.dispatch(tr), view);
+  }
+  view.focus();
+}
+
+function handleApplyStyle(styleId: string) {
+  const view = editorView.value;
+  if (!view) return;
+  const doc = getDocument();
+  const styles = doc?.package?.styles;
+  if (styles) {
+    const resolver = createStyleResolver(styles);
+    const resolved = resolver.resolveParagraphStyle(styleId);
+    applyStyle(styleId, {
+      paragraphFormatting: resolved.paragraphFormatting,
+      runFormatting: resolved.runFormatting,
+    })(view.state, (tr: any) => view.dispatch(tr));
+  } else {
+    applyStyle(styleId)(view.state, (tr: any) => view.dispatch(tr));
+  }
+  view.focus();
+}
+
+function handleInsertPageBreak() {
+  const view = editorView.value;
+  if (!view) return;
+  insertPageBreak(view.state, (tr: any) => view.dispatch(tr), view);
+  view.focus();
+}
+
+function handleInsertSymbol(symbol: string) {
+  const view = editorView.value;
+  if (!view) return;
+  const { from } = view.state.selection;
+  const tr = view.state.tr.insertText(symbol, from);
+  view.dispatch(tr.scrollIntoView());
+  view.focus();
+}
+
+// =========================================================================
+// Page setup
+// =========================================================================
+
+const currentSectionProperties = computed(() => {
+  const doc = getDocument();
+  return doc?.package?.document?.finalSectionProperties ?? null;
+});
+
+function handlePageSetupApply(sp: Partial<SectionProperties>) {
+  const doc = getDocument();
+  if (!doc?.package?.document) return;
+  const existing = doc.package.document.finalSectionProperties ?? {};
+  doc.package.document.finalSectionProperties = { ...existing, ...sp };
+  // Re-render with new page dimensions (empty tr won't trigger docChanged)
+  reLayout();
+  emit('change', doc);
+}
+
+// =========================================================================
+// Document outline
+// =========================================================================
+
+function handleToggleOutline() {
+  if (!showOutline.value) {
+    // Opening: collect headings
+    const view = editorView.value;
+    if (view) {
+      outlineHeadings.value = collectHeadings(view.state.doc);
+    }
+  }
+  showOutline.value = !showOutline.value;
+}
+
+function handleOutlineNavigate(pmPos: number) {
+  const view = editorView.value;
+  if (!view) return;
+  // Set selection to heading position and scroll into view
+  const $pos = view.state.doc.resolve(Math.min(pmPos + 1, view.state.doc.content.size));
+  const sel = TextSelection.near($pos);
+  view.dispatch(view.state.tr.setSelection(sel).scrollIntoView());
+  view.focus();
+}
+
+function handleToggleSidebar() {
+  if (!showSidebar.value) {
+    extractCommentsAndChanges();
+  }
+  showSidebar.value = !showSidebar.value;
+}
+
+// =========================================================================
+// Image clipboard & replace helpers
+// =========================================================================
+
+function copyImageToClipboard(view: EditorView, pmPos: number) {
+  const node = view.state.doc.nodeAt(pmPos);
+  if (!node || node.type.name !== 'image') return;
+
+  const src = node.attrs.src as string;
+  // Write both HTML (for pasting back as image node) and the image blob if possible
+  const imgHtml = `<img src="${src}" data-pm-image="true" data-width="${node.attrs.width ?? ''}" data-height="${node.attrs.height ?? ''}" data-wrap-type="${node.attrs.wrapType ?? ''}" data-display-mode="${node.attrs.displayMode ?? ''}" data-rid="${node.attrs.rId ?? ''}" />`;
+
+  const clipboardItem = new ClipboardItem({
+    'text/html': new Blob([imgHtml], { type: 'text/html' }),
+    'text/plain': new Blob(['[image]'], { type: 'text/plain' }),
+  });
+  navigator.clipboard.write([clipboardItem]).catch(() => {
+    // Fallback: at least copy as HTML
+    const ta = document.createElement('textarea');
+    ta.value = imgHtml;
+    document.body.appendChild(ta);
+    ta.select();
+    document.execCommand('copy');
+    document.body.removeChild(ta);
+  });
+}
+
+async function pasteFromClipboard(view: EditorView) {
+  try {
+    const items = await navigator.clipboard.read();
+    for (const item of items) {
+      // Check for image types first
+      const imageType = item.types.find(t => t.startsWith('image/'));
+      if (imageType) {
+        const blob = await item.getBlob(imageType);
+        const dataUrl = await blobToDataUrl(blob);
+        const dims = await loadImageDimensions(dataUrl);
+        const maxW = 612;
+        let w = dims.width, h = dims.height;
+        if (w > maxW) { h = Math.round(h * (maxW / w)); w = maxW; }
+        const imageNode = view.state.schema.nodes.image.create({
+          src: dataUrl,
+          width: w,
+          height: h,
+          rId: `rId_img_${Date.now()}`,
+          wrapType: 'inline',
+          displayMode: 'inline',
+        });
+        const { from } = view.state.selection;
+        view.dispatch(view.state.tr.replaceSelectionWith(imageNode));
+        return;
+      }
+
+      // Check for HTML with image
+      if (item.types.includes('text/html')) {
+        const htmlBlob = await item.getBlob('text/html');
+        const html = await htmlBlob.text();
+        const match = html.match(/<img[^>]+src="([^"]+)"[^>]*>/i);
+        if (match && match[1]) {
+          const src = match[1];
+          const widthMatch = html.match(/data-width="(\d+)"/);
+          const heightMatch = html.match(/data-height="(\d+)"/);
+          const w = widthMatch ? Number(widthMatch[1]) : 200;
+          const h = heightMatch ? Number(heightMatch[1]) : 200;
+          const imageNode = view.state.schema.nodes.image.create({
+            src,
+            width: w || 200,
+            height: h || 200,
+            rId: `rId_img_${Date.now()}`,
+            wrapType: 'inline',
+            displayMode: 'inline',
+          });
+          view.dispatch(view.state.tr.replaceSelectionWith(imageNode));
+          return;
+        }
+      }
+
+      // Fall back to text paste
+      if (item.types.includes('text/plain')) {
+        const textBlob = await item.getBlob('text/plain');
+        const text = await textBlob.text();
+        if (text && text !== '[image]') {
+          const { from } = view.state.selection;
+          view.dispatch(view.state.tr.insertText(text, from));
+        }
+        return;
+      }
+    }
+  } catch {
+    // Fallback for browsers without clipboard API
+    const text = await navigator.clipboard?.readText();
+    if (text) {
+      const { from } = view.state.selection;
+      view.dispatch(view.state.tr.insertText(text, from));
+    }
+  }
+}
+
+function blobToDataUrl(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+}
+
+function loadImageDimensions(src: string): Promise<{ width: number; height: number }> {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.onload = () => resolve({ width: img.naturalWidth, height: img.naturalHeight });
+    img.onerror = () => resolve({ width: 200, height: 200 });
+    img.src = src;
+  });
+}
+
+function triggerReplaceImage(view: EditorView, pmPos: number) {
+  const node = view.state.doc.nodeAt(pmPos);
+  if (!node || node.type.name !== 'image') return;
+
+  const input = document.createElement('input');
+  input.type = 'file';
+  input.accept = 'image/*';
+  input.onchange = async () => {
+    const file = input.files?.[0];
+    if (!file) return;
+    const dataUrl = await blobToDataUrl(file);
+    const dims = await loadImageDimensions(dataUrl);
+
+    // Keep existing dimensions unless the aspect ratio is wildly different;
+    // scale the new image to fit within the old bounding box.
+    const oldW = (node.attrs.width as number) || dims.width;
+    const oldH = (node.attrs.height as number) || dims.height;
+    const scale = Math.min(oldW / dims.width, oldH / dims.height);
+    const newW = Math.round(dims.width * scale);
+    const newH = Math.round(dims.height * scale);
+
+    try {
+      const tr = view.state.tr.setNodeMarkup(pmPos, undefined, {
+        ...node.attrs,
+        src: dataUrl,
+        width: newW,
+        height: newH,
+        rId: `rId_img_${Date.now()}`,
+      });
+      view.dispatch(tr);
+    } catch {
+      // position may have changed
+    }
+  };
+  input.click();
+}
+
+// =========================================================================
+// Context menu
+// =========================================================================
+
+function handleContextMenu(event: MouseEvent) {
+  const view = editorView.value;
+  if (!view) return;
+  const target = event.target as HTMLElement;
+  const inTable = !!target.closest('.layout-table, table');
+
+  // Check if right-click is on an image
+  const imageEl = findImageElement(target);
+  if (imageEl) {
+    const pmStart = Number(imageEl.dataset.pmStart);
+    if (!isNaN(pmStart)) {
+      try {
+        const sel = NodeSelection.create(view.state.doc, pmStart);
+        view.dispatch(view.state.tr.setSelection(sel));
+      } catch { /* ignore */ }
+      selectedImage.value = {
+        element: imageEl,
+        pmPos: pmStart,
+        width: imageEl.offsetWidth,
+        height: imageEl.offsetHeight,
+      };
+      clearOverlay();
+    }
+  }
+
+  const { empty } = view.state.selection;
+
+  contextMenu.value = {
+    isOpen: true,
+    position: { x: event.clientX, y: event.clientY },
+    hasSelection: !empty,
+    inTable,
+    onImage: !!imageEl,
+  };
+}
+
+function handleContextMenuAction(action: string) {
+  const view = editorView.value;
+  if (!view) return;
+  const cmds = getCommands();
+
+  switch (action) {
+    case 'cut':
+      if (selectedImage.value) {
+        copyImageToClipboard(view, selectedImage.value.pmPos);
+        const pos = selectedImage.value.pmPos;
+        const node = view.state.doc.nodeAt(pos);
+        if (node) {
+          view.dispatch(view.state.tr.delete(pos, pos + node.nodeSize));
+          selectedImage.value = null;
+        }
+      } else {
+        document.execCommand('cut');
+      }
+      break;
+    case 'copy':
+      if (selectedImage.value) {
+        copyImageToClipboard(view, selectedImage.value.pmPos);
+      } else {
+        document.execCommand('copy');
+      }
+      break;
+    case 'paste':
+      pasteFromClipboard(view);
+      break;
+    case 'delete': {
+      const { from, to } = view.state.selection;
+      if (from !== to) view.dispatch(view.state.tr.delete(from, to));
+      break;
+    }
+    case 'selectAll': {
+      const sel = TextSelection.create(view.state.doc, 0, view.state.doc.content.size);
+      view.dispatch(view.state.tr.setSelection(sel));
+      break;
+    }
+    case 'imageProperties':
+      if (selectedImage.value) {
+        showImageProperties.value = true;
+      }
+      break;
+    case 'replaceImage':
+      if (selectedImage.value) {
+        triggerReplaceImage(view, selectedImage.value.pmPos);
+      }
+      break;
+    case 'deleteImage': {
+      if (selectedImage.value) {
+        const pos = selectedImage.value.pmPos;
+        const node = view.state.doc.nodeAt(pos);
+        if (node) {
+          view.dispatch(view.state.tr.delete(pos, pos + node.nodeSize));
+          selectedImage.value = null;
+        }
+      }
+      break;
+    }
+    case 'addRowAbove':
+    case 'addRowBelow':
+    case 'deleteRow':
+    case 'addColumnLeft':
+    case 'addColumnRight':
+    case 'deleteColumn': {
+      const cmd = cmds[action];
+      if (cmd) {
+        const command = cmd();
+        command(view.state, (tr: any) => view.dispatch(tr), view);
+      }
+      break;
+    }
+  }
+  view.focus();
+}
+
+// =========================================================================
+// Comments & tracked changes sidebar
+// =========================================================================
+
+function extractCommentsAndChanges() {
+  const doc = getDocument();
+  const view = editorView.value;
+  if (!doc || !view) return;
+
+  // Extract comments from document model
+  comments.value = doc.package?.comments ?? [];
+
+  // Extract tracked changes from ProseMirror marks
+  const { doc: pmDoc, schema } = view.state;
+  const insertionType = schema.marks.insertion;
+  const deletionType = schema.marks.deletion;
+  if (!insertionType && !deletionType) {
+    trackedChanges.value = [];
+    return;
+  }
+
+  const entries: TrackedChangeEntry[] = [];
+
+  pmDoc.descendants((node, pos) => {
+    if (!node.isText) return;
+    for (const mark of node.marks) {
+      if (mark.type === insertionType) {
+        entries.push({
+          type: 'insertion',
+          text: node.text || '',
+          author: mark.attrs.author || 'Unknown',
+          date: mark.attrs.date,
+          from: pos,
+          to: pos + node.nodeSize,
+          revisionId: mark.attrs.revisionId || 0,
+        });
+      } else if (mark.type === deletionType) {
+        entries.push({
+          type: 'deletion',
+          text: node.text || '',
+          author: mark.attrs.author || 'Unknown',
+          date: mark.attrs.date,
+          from: pos,
+          to: pos + node.nodeSize,
+          revisionId: mark.attrs.revisionId || 0,
+        });
+      }
+    }
+  });
+
+  // Merge adjacent entries with same revisionId
+  const merged: TrackedChangeEntry[] = [];
+  for (const entry of entries) {
+    const last = merged[merged.length - 1];
+    if (last && last.revisionId === entry.revisionId && last.type === entry.type && last.to === entry.from) {
+      last.text += entry.text;
+      last.to = entry.to;
+    } else {
+      merged.push({ ...entry });
+    }
+  }
+
+  // Detect replacements (adjacent deletion + insertion, same author)
+  const final: TrackedChangeEntry[] = [];
+  for (let i = 0; i < merged.length; i++) {
+    const curr = merged[i];
+    const next = merged[i + 1];
+    if (curr.type === 'deletion' && next?.type === 'insertion' && curr.author === next.author && curr.to === next.from) {
+      final.push({
+        type: 'replacement',
+        text: next.text,
+        deletedText: curr.text,
+        author: curr.author,
+        date: curr.date,
+        from: curr.from,
+        to: next.to,
+        revisionId: curr.revisionId,
+        insertionRevisionId: next.revisionId,
+      });
+      i++; // skip next
+    } else {
+      final.push(curr);
+    }
+  }
+
+  trackedChanges.value = final;
+}
+
+function handleAddComment(text: string) {
+  // For now, add comment to document model
+  const doc = getDocument();
+  if (!doc?.package) return;
+  if (!doc.package.comments) doc.package.comments = [];
+
+  const maxId = doc.package.comments.reduce((max, c) => Math.max(max, c.id), 0);
+  const newComment: Comment = {
+    id: maxId + 1,
+    author: 'User',
+    date: new Date().toISOString(),
+    content: [{ type: 'paragraph', properties: {}, content: [{ type: 'run', properties: {}, content: [{ type: 'text', text }] }] }] as any,
+  };
+  doc.package.comments.push(newComment);
+  comments.value = [...doc.package.comments];
+  isAddingComment.value = false;
+  emit('change', doc);
+}
+
+function handleCommentReply(commentId: number, text: string) {
+  const doc = getDocument();
+  if (!doc?.package?.comments) return;
+
+  const maxId = doc.package.comments.reduce((max, c) => Math.max(max, c.id), 0);
+  const reply: Comment = {
+    id: maxId + 1,
+    author: 'User',
+    date: new Date().toISOString(),
+    content: [{ type: 'paragraph', properties: {}, content: [{ type: 'run', properties: {}, content: [{ type: 'text', text }] }] }] as any,
+    parentId: commentId,
+  };
+  doc.package.comments.push(reply);
+  comments.value = [...doc.package.comments];
+  emit('change', doc);
+}
+
+function handleCommentResolve(commentId: number) {
+  const doc = getDocument();
+  if (!doc?.package?.comments) return;
+  const c = doc.package.comments.find(c => c.id === commentId);
+  if (c) c.done = true;
+  comments.value = [...doc.package.comments];
+  emit('change', doc);
+}
+
+function handleCommentUnresolve(commentId: number) {
+  const doc = getDocument();
+  if (!doc?.package?.comments) return;
+  const c = doc.package.comments.find(c => c.id === commentId);
+  if (c) c.done = false;
+  comments.value = [...doc.package.comments];
+  emit('change', doc);
+}
+
+function handleCommentDelete(commentId: number) {
+  const doc = getDocument();
+  if (!doc?.package?.comments) return;
+  // Remove comment and its replies
+  doc.package.comments = doc.package.comments.filter(c => c.id !== commentId && c.parentId !== commentId);
+  comments.value = [...doc.package.comments];
+  emit('change', doc);
+}
+
+function handleAcceptChange(from: number, to: number) {
+  const view = editorView.value;
+  if (!view) return;
+  const { schema } = view.state;
+  let tr = view.state.tr;
+
+  // Accept: remove deletion marks (delete the deleted text), keep insertion text (remove mark)
+  const deletionType = schema.marks.deletion;
+  const insertionType = schema.marks.insertion;
+
+  if (deletionType) tr = tr.removeMark(from, to, deletionType);
+  if (insertionType) tr = tr.removeMark(from, to, insertionType);
+
+  view.dispatch(tr);
+  extractCommentsAndChanges();
+  view.focus();
+}
+
+function handleRejectChange(from: number, to: number) {
+  const view = editorView.value;
+  if (!view) return;
+  const { schema } = view.state;
+  let tr = view.state.tr;
+
+  const deletionType = schema.marks.deletion;
+  const insertionType = schema.marks.insertion;
+
+  if (deletionType) tr = tr.removeMark(from, to, deletionType);
+  if (insertionType) tr = tr.removeMark(from, to, insertionType);
+
+  view.dispatch(tr);
+  extractCommentsAndChanges();
+  view.focus();
+}
+
+// =========================================================================
+// Keyboard shortcuts
+// =========================================================================
+
+function handleKeyDown(e: KeyboardEvent) {
+  // F1 opens keyboard shortcuts
+  if (e.key === 'F1') {
+    e.preventDefault();
+    showKeyboardShortcuts.value = true;
+    return;
+  }
+
+  // Zoom shortcuts (Ctrl+=/Ctrl+-/Ctrl+0)
+  handleZoomKeyDown(e);
+
+  if (!(e.ctrlKey || e.metaKey)) return;
+  if (e.key === 'f' || e.key === 'h') {
+    e.preventDefault();
+    showFindReplace.value = true;
+  } else if (e.key === 'k') {
+    e.preventDefault();
+    showHyperlink.value = true;
+  } else if (e.key === '/') {
+    e.preventDefault();
+    showKeyboardShortcuts.value = !showKeyboardShortcuts.value;
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('mousemove', handleMouseMove);
+  window.addEventListener('mouseup', handleMouseUp);
+  window.addEventListener('keydown', handleKeyDown);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('mousemove', handleMouseMove);
+  window.removeEventListener('mouseup', handleMouseUp);
+  window.removeEventListener('keydown', handleKeyDown);
+  clearOverlay();
+});
+
+defineExpose({ save, focus, destroy, getDocument });
+</script>
+
+<style>
+.docx-editor-vue {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+.docx-editor-vue__hidden-pm {
+  position: fixed;
+  left: -9999px;
+  top: 0;
+  opacity: 0;
+  z-index: -1;
+  pointer-events: none;
+  user-select: none;
+  overflow-anchor: none;
+}
+.docx-editor-vue__pages-viewport {
+  flex: 1;
+  overflow-y: auto;
+  background: var(--doc-bg, #f8f9fa);
+  cursor: text;
+  position: relative;
+}
+.docx-editor-vue__pages {
+  position: relative;
+}
+.docx-editor-vue__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  color: #64748b;
+  font-size: 14px;
+}
+.docx-editor-vue__error {
+  padding: 1rem;
+  background: #fef2f2;
+  color: #dc2626;
+  font-size: 13px;
+  border-bottom: 1px solid #fecaca;
+}
+</style>
diff --git a/packages/vue/src/components/ErrorBoundary.vue b/packages/vue/src/components/ErrorBoundary.vue
new file mode 100644
index 00000000..f7eae2ed
--- /dev/null
+++ b/packages/vue/src/components/ErrorBoundary.vue
@@ -0,0 +1,145 @@
+<template>
+  <div class="error-boundary">
+    <slot />
+
+    <!-- Toast notification container -->
+    <Teleport to="body">
+      <div class="error-toasts">
+        <TransitionGroup name="toast">
+          <div
+            v-for="toast in toasts"
+            :key="toast.id"
+            :class="['error-toast', `error-toast--${toast.severity}`]"
+          >
+            <span class="error-toast__icon">{{ severityIcon(toast.severity) }}</span>
+            <span class="error-toast__message">{{ toast.message }}</span>
+            <button class="error-toast__close" @click="dismissToast(toast.id)">&#x2715;</button>
+          </div>
+        </TransitionGroup>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onErrorCaptured, onMounted, onBeforeUnmount } from 'vue';
+
+export type ErrorSeverity = 'error' | 'warning' | 'info';
+
+interface Toast {
+  id: number;
+  message: string;
+  severity: ErrorSeverity;
+}
+
+const props = withDefaults(
+  defineProps<{
+    /** Auto-dismiss timeout in ms (0 = no auto-dismiss) */
+    autoDismiss?: number;
+  }>(),
+  { autoDismiss: 5000 }
+);
+
+const emit = defineEmits<{
+  (e: 'error', error: Error, severity: ErrorSeverity): void;
+}>();
+
+const toasts = ref<Toast[]>([]);
+let nextId = 0;
+
+function addToast(message: string, severity: ErrorSeverity = 'error') {
+  const id = nextId++;
+  toasts.value.push({ id, message, severity });
+
+  if (props.autoDismiss > 0) {
+    setTimeout(() => dismissToast(id), props.autoDismiss);
+  }
+}
+
+function dismissToast(id: number) {
+  toasts.value = toasts.value.filter(t => t.id !== id);
+}
+
+function severityIcon(severity: ErrorSeverity): string {
+  switch (severity) {
+    case 'error': return '\u26D4';
+    case 'warning': return '\u26A0';
+    case 'info': return '\u2139';
+  }
+}
+
+// Capture Vue component errors
+onErrorCaptured((err, instance, info) => {
+  const message = err instanceof Error ? err.message : String(err);
+  addToast(message, 'error');
+  emit('error', err instanceof Error ? err : new Error(message), 'error');
+  return false; // prevent propagation
+});
+
+// Global unhandled errors
+function handleGlobalError(event: ErrorEvent) {
+  addToast(event.message || 'An unexpected error occurred', 'error');
+}
+
+function handleUnhandledRejection(event: PromiseRejectionEvent) {
+  const msg = event.reason?.message || String(event.reason) || 'Unhandled promise rejection';
+  addToast(msg, 'warning');
+}
+
+onMounted(() => {
+  window.addEventListener('error', handleGlobalError);
+  window.addEventListener('unhandledrejection', handleUnhandledRejection);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('error', handleGlobalError);
+  window.removeEventListener('unhandledrejection', handleUnhandledRejection);
+});
+
+defineExpose({ addToast, dismissToast });
+</script>
+
+<style scoped>
+.error-boundary { position: relative; }
+.error-toasts {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  z-index: 50000;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-width: 400px;
+}
+.error-toast {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 10px 14px;
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  font-size: 13px;
+  line-height: 1.4;
+}
+.error-toast--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
+.error-toast--warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
+.error-toast--info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
+.error-toast__icon { flex-shrink: 0; font-size: 14px; }
+.error-toast__message { flex: 1; }
+.error-toast__close {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 12px;
+  opacity: 0.5;
+  padding: 0;
+  line-height: 1;
+}
+.error-toast__close:hover { opacity: 1; }
+
+/* Transition animations */
+.toast-enter-active { transition: all 0.3s ease-out; }
+.toast-leave-active { transition: all 0.2s ease-in; }
+.toast-enter-from { opacity: 0; transform: translateX(30px); }
+.toast-leave-to { opacity: 0; transform: translateX(30px); }
+</style>
diff --git a/packages/vue/src/components/FindReplaceDialog.vue b/packages/vue/src/components/FindReplaceDialog.vue
new file mode 100644
index 00000000..af7a96f7
--- /dev/null
+++ b/packages/vue/src/components/FindReplaceDialog.vue
@@ -0,0 +1,382 @@
+<template>
+  <div v-if="isOpen" class="find-replace-dialog" @mousedown.stop @keydown.stop>
+    <div class="find-replace-dialog__header">
+      <span class="find-replace-dialog__title">{{ replaceMode ? 'Find & Replace' : 'Find' }}</span>
+      <button class="find-replace-dialog__close" @click="close" title="Close (Escape)">✕</button>
+    </div>
+
+    <div class="find-replace-dialog__body">
+      <!-- Search row -->
+      <div class="find-replace-dialog__row">
+        <input
+          ref="searchInputRef"
+          v-model="searchText"
+          class="find-replace-dialog__input"
+          placeholder="Find..."
+          @keydown="handleSearchKeyDown"
+          @input="performSearch"
+        />
+        <span class="find-replace-dialog__count">{{ matchCountText }}</span>
+        <button title="Previous (Shift+Enter)" @mousedown.prevent="findPrevious">▲</button>
+        <button title="Next (Enter)" @mousedown.prevent="findNext">▼</button>
+      </div>
+
+      <!-- Options row -->
+      <div class="find-replace-dialog__options">
+        <label>
+          <input type="checkbox" v-model="matchCase" @change="performSearch" />
+          Match case
+        </label>
+        <label>
+          <input type="checkbox" v-model="matchWholeWord" @change="performSearch" />
+          Whole word
+        </label>
+        <button
+          class="find-replace-dialog__toggle"
+          :class="{ active: replaceMode }"
+          @mousedown.prevent="replaceMode = !replaceMode"
+          title="Toggle replace"
+        >↔ Replace</button>
+      </div>
+
+      <!-- Replace row -->
+      <div v-if="replaceMode" class="find-replace-dialog__row">
+        <input
+          v-model="replaceText"
+          class="find-replace-dialog__input"
+          placeholder="Replace with..."
+          @keydown.enter.prevent="handleReplace"
+        />
+        <button title="Replace" @mousedown.prevent="handleReplace">Replace</button>
+        <button title="Replace All" @mousedown.prevent="handleReplaceAll">All</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, nextTick, computed } from 'vue';
+import type { EditorView } from 'prosemirror-view';
+import { TextSelection } from 'prosemirror-state';
+
+const props = defineProps<{
+  isOpen: boolean;
+  view: EditorView | null;
+}>();
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+}>();
+
+const searchInputRef = ref<HTMLInputElement | null>(null);
+const searchText = ref('');
+const replaceText = ref('');
+const matchCase = ref(false);
+const matchWholeWord = ref(false);
+const replaceMode = ref(false);
+
+// Match state
+const matches = ref<Array<{ from: number; to: number }>>([]);
+const currentIndex = ref(-1);
+
+const matchCountText = computed(() => {
+  if (!searchText.value.trim()) return '';
+  if (matches.value.length === 0) return 'No results';
+  if (currentIndex.value < 0) return `${matches.value.length} matches`;
+  return `${currentIndex.value + 1} of ${matches.value.length}`;
+});
+
+// Focus search input when dialog opens
+watch(() => props.isOpen, async (open) => {
+  if (open) {
+    await nextTick();
+    searchInputRef.value?.focus();
+    searchInputRef.value?.select();
+    performSearch();
+  } else {
+    clearHighlights();
+  }
+});
+
+function close() {
+  clearHighlights();
+  emit('close');
+}
+
+/**
+ * Search through PM doc using textBetween to get accurate positions.
+ * We walk each text block and find matches within it.
+ */
+function performSearch() {
+  matches.value = [];
+  currentIndex.value = -1;
+
+  const view = props.view;
+  if (!view || !searchText.value.trim()) {
+    clearHighlights();
+    return;
+  }
+
+  const doc = view.state.doc;
+  const search = searchText.value;
+  const caseInsensitive = !matchCase.value;
+
+  // Collect all text blocks with their PM positions
+  const found: Array<{ from: number; to: number }> = [];
+
+  doc.descendants((node, pos) => {
+    if (!node.isTextblock) return true;
+
+    // Get the full text of this text block
+    const blockText = doc.textBetween(pos + 1, pos + node.nodeSize - 1, '', '');
+    if (!blockText) return false;
+
+    const searchStr = caseInsensitive ? search.toLowerCase() : search;
+    const haystack = caseInsensitive ? blockText.toLowerCase() : blockText;
+
+    let searchFrom = 0;
+    while (searchFrom < haystack.length) {
+      let idx: number;
+
+      if (matchWholeWord.value) {
+        // Whole word matching with regex
+        const escaped = searchStr.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        const flags = caseInsensitive ? 'gi' : 'g';
+        const regex = new RegExp(`\\b${escaped}\\b`, flags);
+        regex.lastIndex = searchFrom;
+        const m = regex.exec(haystack);
+        if (!m) break;
+        idx = m.index;
+      } else {
+        idx = haystack.indexOf(searchStr, searchFrom);
+        if (idx === -1) break;
+      }
+
+      // pos+1 is the start of text content inside the text block node
+      const from = pos + 1 + idx;
+      const to = from + search.length;
+      found.push({ from, to });
+      searchFrom = idx + Math.max(1, search.length);
+    }
+
+    return false; // Don't descend into inline nodes
+  });
+
+  matches.value = found;
+  if (found.length > 0) {
+    currentIndex.value = 0;
+    goToMatch(0);
+  }
+}
+
+function goToMatch(index: number) {
+  const view = props.view;
+  if (!view || matches.value.length === 0) return;
+
+  const match = matches.value[index];
+  if (!match) return;
+
+  currentIndex.value = index;
+
+  // Set PM selection to the match
+  const { from, to } = match;
+  try {
+    const $from = view.state.doc.resolve(from);
+    const $to = view.state.doc.resolve(to);
+    const sel = TextSelection.between($from, $to);
+    view.dispatch(view.state.tr.setSelection(sel).scrollIntoView());
+  } catch {
+    // Position might be invalid after edits
+  }
+}
+
+function findNext() {
+  if (matches.value.length === 0) {
+    performSearch();
+    return;
+  }
+  const next = (currentIndex.value + 1) % matches.value.length;
+  goToMatch(next);
+}
+
+function findPrevious() {
+  if (matches.value.length === 0) return;
+  const prev = (currentIndex.value - 1 + matches.value.length) % matches.value.length;
+  goToMatch(prev);
+}
+
+function handleReplace() {
+  const view = props.view;
+  if (!view || currentIndex.value < 0 || matches.value.length === 0) return;
+
+  const match = matches.value[currentIndex.value];
+  if (!match) return;
+
+  try {
+    let tr;
+    if (replaceText.value) {
+      tr = view.state.tr.replaceWith(match.from, match.to, view.state.schema.text(replaceText.value));
+    } else {
+      tr = view.state.tr.delete(match.from, match.to);
+    }
+    view.dispatch(tr);
+  } catch {
+    // Position might be invalid
+  }
+
+  // Re-search and advance
+  performSearch();
+}
+
+function handleReplaceAll() {
+  const view = props.view;
+  if (!view || matches.value.length === 0) return;
+
+  // Replace in reverse order to preserve positions
+  const sorted = [...matches.value].sort((a, b) => b.from - a.from);
+  let tr = view.state.tr;
+
+  for (const match of sorted) {
+    try {
+      if (replaceText.value) {
+        tr = tr.replaceWith(match.from, match.to, view.state.schema.text(replaceText.value));
+      } else {
+        tr = tr.delete(match.from, match.to);
+      }
+    } catch {
+      // Skip invalid positions
+    }
+  }
+
+  view.dispatch(tr);
+  performSearch();
+}
+
+function clearHighlights() {
+  matches.value = [];
+  currentIndex.value = -1;
+}
+
+function handleSearchKeyDown(e: KeyboardEvent) {
+  if (e.key === 'Enter') {
+    e.preventDefault();
+    if (e.shiftKey) {
+      findPrevious();
+    } else {
+      findNext();
+    }
+  } else if (e.key === 'Escape') {
+    close();
+  }
+}
+</script>
+
+<style scoped>
+.find-replace-dialog {
+  position: absolute;
+  top: 8px;
+  right: 16px;
+  z-index: 100;
+  background: #fff;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  min-width: 360px;
+  font-size: 13px;
+}
+.find-replace-dialog__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid #e5e7eb;
+}
+.find-replace-dialog__title {
+  font-weight: 600;
+  color: #1f2937;
+}
+.find-replace-dialog__close {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: #6b7280;
+  font-size: 14px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+}
+.find-replace-dialog__close:hover { background: #f3f4f6; }
+.find-replace-dialog__body {
+  padding: 8px 12px 12px;
+}
+.find-replace-dialog__row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 6px;
+}
+.find-replace-dialog__input {
+  flex: 1;
+  padding: 5px 8px;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  font-size: 13px;
+  outline: none;
+}
+.find-replace-dialog__input:focus {
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
+}
+.find-replace-dialog__count {
+  font-size: 11px;
+  color: #6b7280;
+  white-space: nowrap;
+  min-width: 60px;
+  text-align: center;
+}
+.find-replace-dialog__options {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 6px;
+  font-size: 12px;
+  color: #4b5563;
+}
+.find-replace-dialog__options label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+}
+.find-replace-dialog__options input[type="checkbox"] {
+  margin: 0;
+}
+.find-replace-dialog__toggle {
+  margin-left: auto;
+  font-size: 11px;
+  padding: 2px 8px;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  background: transparent;
+  cursor: pointer;
+  color: #4b5563;
+}
+.find-replace-dialog__toggle.active {
+  background: #e0e7ff;
+  border-color: #818cf8;
+  color: #3730a3;
+}
+.find-replace-dialog__row button {
+  padding: 4px 8px;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  background: #fff;
+  cursor: pointer;
+  font-size: 12px;
+  color: #374151;
+}
+.find-replace-dialog__row button:hover { background: #f3f4f6; }
+</style>
diff --git a/packages/vue/src/components/FootnotePropertiesDialog.vue b/packages/vue/src/components/FootnotePropertiesDialog.vue
new file mode 100644
index 00000000..bbb68be4
--- /dev/null
+++ b/packages/vue/src/components/FootnotePropertiesDialog.vue
@@ -0,0 +1,143 @@
+<template>
+  <div v-if="isOpen" class="fnpd-overlay" @mousedown.self="$emit('close')">
+    <div class="fnpd-dialog" @keydown.escape="$emit('close')">
+      <div class="fnpd-dialog__header">Footnote & Endnote Properties</div>
+
+      <div class="fnpd-dialog__body">
+        <!-- Footnotes -->
+        <fieldset class="fnpd-fieldset">
+          <legend class="fnpd-legend">Footnotes</legend>
+          <div class="fnpd-row">
+            <label class="fnpd-label">Position</label>
+            <select v-model="fnPosition" class="fnpd-select">
+              <option value="pageBottom">Bottom of page</option>
+              <option value="beneathText">Below text</option>
+            </select>
+          </div>
+          <div class="fnpd-row">
+            <label class="fnpd-label">Number format</label>
+            <select v-model="fnNumFmt" class="fnpd-select">
+              <option v-for="fmt in numberFormats" :key="fmt.value" :value="fmt.value">{{ fmt.label }}</option>
+            </select>
+          </div>
+          <div class="fnpd-row">
+            <label class="fnpd-label">Start at</label>
+            <input v-model.number="fnStart" type="number" class="fnpd-input" min="1" />
+          </div>
+          <div class="fnpd-row">
+            <label class="fnpd-label">Numbering</label>
+            <select v-model="fnRestart" class="fnpd-select">
+              <option value="continuous">Continuous</option>
+              <option value="eachSect">Restart each section</option>
+              <option value="eachPage">Restart each page</option>
+            </select>
+          </div>
+        </fieldset>
+
+        <!-- Endnotes -->
+        <fieldset class="fnpd-fieldset">
+          <legend class="fnpd-legend">Endnotes</legend>
+          <div class="fnpd-row">
+            <label class="fnpd-label">Position</label>
+            <select v-model="enPosition" class="fnpd-select">
+              <option value="docEnd">End of document</option>
+              <option value="sectEnd">End of section</option>
+            </select>
+          </div>
+          <div class="fnpd-row">
+            <label class="fnpd-label">Number format</label>
+            <select v-model="enNumFmt" class="fnpd-select">
+              <option v-for="fmt in numberFormats" :key="fmt.value" :value="fmt.value">{{ fmt.label }}</option>
+            </select>
+          </div>
+          <div class="fnpd-row">
+            <label class="fnpd-label">Start at</label>
+            <input v-model.number="enStart" type="number" class="fnpd-input" min="1" />
+          </div>
+          <div class="fnpd-row">
+            <label class="fnpd-label">Numbering</label>
+            <select v-model="enRestart" class="fnpd-select">
+              <option value="continuous">Continuous</option>
+              <option value="eachSect">Restart each section</option>
+            </select>
+          </div>
+        </fieldset>
+      </div>
+
+      <div class="fnpd-dialog__footer">
+        <button class="fnpd-btn" @click="$emit('close')">Cancel</button>
+        <button class="fnpd-btn fnpd-btn--primary" @click="apply">Apply</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import type { FootnoteProperties, EndnoteProperties } from '@eigenpal/docx-core/types/content';
+
+const props = defineProps<{
+  isOpen: boolean;
+  footnotePr?: FootnoteProperties;
+  endnotePr?: EndnoteProperties;
+}>();
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'apply', footnotePr: FootnoteProperties, endnotePr: EndnoteProperties): void;
+}>();
+
+const numberFormats = [
+  { value: 'decimal', label: '1, 2, 3...' },
+  { value: 'lowerLetter', label: 'a, b, c...' },
+  { value: 'upperLetter', label: 'A, B, C...' },
+  { value: 'lowerRoman', label: 'i, ii, iii...' },
+  { value: 'upperRoman', label: 'I, II, III...' },
+  { value: 'chicago', label: '*, \u2020, \u2021...' },
+];
+
+const fnPosition = ref('pageBottom');
+const fnNumFmt = ref('decimal');
+const fnStart = ref(1);
+const fnRestart = ref('continuous');
+const enPosition = ref('docEnd');
+const enNumFmt = ref('lowerRoman');
+const enStart = ref(1);
+const enRestart = ref('continuous');
+
+watch(() => props.isOpen, (open) => {
+  if (!open) return;
+  fnPosition.value = props.footnotePr?.position ?? 'pageBottom';
+  fnNumFmt.value = props.footnotePr?.numFmt ?? 'decimal';
+  fnStart.value = props.footnotePr?.numStart ?? 1;
+  fnRestart.value = props.footnotePr?.numRestart ?? 'continuous';
+  enPosition.value = props.endnotePr?.position ?? 'docEnd';
+  enNumFmt.value = props.endnotePr?.numFmt ?? 'lowerRoman';
+  enStart.value = props.endnotePr?.numStart ?? 1;
+  enRestart.value = props.endnotePr?.numRestart ?? 'continuous';
+});
+
+function apply() {
+  emit('apply',
+    { position: fnPosition.value as any, numFmt: fnNumFmt.value as any, numStart: fnStart.value, numRestart: fnRestart.value as any },
+    { position: enPosition.value as any, numFmt: enNumFmt.value as any, numStart: enStart.value, numRestart: enRestart.value as any },
+  );
+  emit('close');
+}
+</script>
+
+<style scoped>
+.fnpd-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 10000; }
+.fnpd-dialog { background: #fff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); width: 440px; max-width: 90vw; }
+.fnpd-dialog__header { padding: 16px 20px 12px; border-bottom: 1px solid #e5e7eb; font-size: 16px; font-weight: 600; color: #1f2937; }
+.fnpd-dialog__body { padding: 12px 20px; display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow-y: auto; }
+.fnpd-dialog__footer { padding: 12px 20px 16px; border-top: 1px solid #e5e7eb; display: flex; justify-content: flex-end; gap: 8px; }
+.fnpd-fieldset { border: 1px solid #e5e7eb; border-radius: 6px; padding: 10px 12px; margin: 0; }
+.fnpd-legend { font-size: 12px; font-weight: 600; color: #4b5563; padding: 0 4px; }
+.fnpd-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
+.fnpd-row:last-child { margin-bottom: 0; }
+.fnpd-label { width: 100px; font-size: 13px; color: #6b7280; flex-shrink: 0; }
+.fnpd-input, .fnpd-select { flex: 1; padding: 5px 8px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; }
+.fnpd-btn { padding: 6px 16px; font-size: 13px; border: 1px solid #d1d5db; border-radius: 4px; cursor: pointer; background: #fff; }
+.fnpd-btn--primary { background: #1a73e8; color: #fff; border-color: #1a73e8; }
+</style>
diff --git a/packages/vue/src/components/HorizontalRuler.vue b/packages/vue/src/components/HorizontalRuler.vue
new file mode 100644
index 00000000..0316a236
--- /dev/null
+++ b/packages/vue/src/components/HorizontalRuler.vue
@@ -0,0 +1,280 @@
+<template>
+  <div class="hruler" :style="{ height: `${RULER_H}px` }">
+    <div class="hruler__track" ref="trackRef" :style="trackStyle">
+      <!-- Left margin zone -->
+      <div class="hruler__margin" :style="{ left: 0, width: `${leftMarginPx}px` }" />
+      <!-- Right margin zone -->
+      <div class="hruler__margin" :style="{ right: 0, width: `${rightMarginPx}px` }" />
+
+      <!-- Tick marks -->
+      <svg class="hruler__ticks" :viewBox="`0 0 ${pageWidthPx} ${RULER_H}`" preserveAspectRatio="none">
+        <template v-for="tick in ticks" :key="tick.x">
+          <line :x1="tick.x" :y1="tick.major ? 2 : 6" :x2="tick.x" :y2="RULER_H - 2" stroke="#9ca3af" :stroke-width="tick.major ? 0.8 : 0.5" />
+          <text v-if="tick.label" :x="tick.x + 3" :y="10" font-size="8" fill="#9ca3af">{{ tick.label }}</text>
+        </template>
+      </svg>
+
+      <!-- Left indent handle (▲) -->
+      <div
+        v-if="editable"
+        class="hruler__handle hruler__handle--left-indent"
+        :style="{ left: `${leftMarginPx + leftIndentPx}px` }"
+        title="Left indent"
+        @mousedown.prevent="startDrag('leftIndent', $event)"
+      >&#x25B2;</div>
+
+      <!-- First-line indent handle (▼) -->
+      <div
+        v-if="editable && showFirstLineIndent"
+        class="hruler__handle hruler__handle--first-line"
+        :style="{ left: `${leftMarginPx + firstLineIndentPx}px` }"
+        title="First-line indent"
+        @mousedown.prevent="startDrag('firstLineIndent', $event)"
+      >&#x25BC;</div>
+
+      <!-- Right indent handle (▼) -->
+      <div
+        v-if="editable"
+        class="hruler__handle hruler__handle--right-indent"
+        :style="{ right: `${rightMarginPx + rightIndentPx}px` }"
+        title="Right indent"
+        @mousedown.prevent="startDrag('rightIndent', $event)"
+      >&#x25BC;</div>
+
+      <!-- Tab stops -->
+      <div
+        v-for="(tab, i) in tabStopPositions"
+        :key="i"
+        class="hruler__tab"
+        :style="{ left: `${tab.px}px` }"
+        :title="`Tab stop: ${tab.label}`"
+        @dblclick.prevent="$emit('tab-stop-remove', tab.twips)"
+      >&#x2514;</div>
+
+      <!-- Drag tooltip -->
+      <div v-if="dragging" class="hruler__tooltip" :style="{ left: `${tooltipX}px` }">
+        {{ tooltipText }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+import type { SectionProperties, TabStop } from '@eigenpal/docx-core/types/document';
+
+const props = withDefaults(
+  defineProps<{
+    sectionProps?: SectionProperties | null;
+    zoom?: number;
+    editable?: boolean;
+    showFirstLineIndent?: boolean;
+    firstLineIndent?: number;
+    indentLeft?: number;
+    indentRight?: number;
+    unit?: 'inch' | 'cm';
+    tabStops?: TabStop[] | null;
+  }>(),
+  {
+    zoom: 1,
+    editable: true,
+    showFirstLineIndent: true,
+    firstLineIndent: 0,
+    indentLeft: 0,
+    indentRight: 0,
+    unit: 'inch',
+  }
+);
+
+const emit = defineEmits<{
+  (e: 'left-margin-change', twips: number): void;
+  (e: 'right-margin-change', twips: number): void;
+  (e: 'first-line-indent-change', twips: number): void;
+  (e: 'indent-left-change', twips: number): void;
+  (e: 'indent-right-change', twips: number): void;
+  (e: 'tab-stop-remove', twips: number): void;
+}>();
+
+const RULER_H = 22;
+const TWIPS_PER_INCH = 1440;
+const TWIPS_PER_CM = 567;
+const DEFAULT_PAGE_WIDTH = 12240;
+const DEFAULT_MARGIN = 1440;
+
+const trackRef = ref<HTMLElement | null>(null);
+const dragging = ref(false);
+const dragType = ref<string | null>(null);
+const dragStartX = ref(0);
+const dragStartValue = ref(0);
+const tooltipX = ref(0);
+const tooltipText = ref('');
+
+function tw2px(twips: number): number {
+  return Math.round((twips / TWIPS_PER_INCH) * 96 * props.zoom);
+}
+function px2tw(px: number): number {
+  return Math.round((px / (96 * props.zoom)) * TWIPS_PER_INCH);
+}
+
+const pageWidthTw = computed(() => props.sectionProps?.pageWidth ?? DEFAULT_PAGE_WIDTH);
+const leftMarginTw = computed(() => props.sectionProps?.marginLeft ?? DEFAULT_MARGIN);
+const rightMarginTw = computed(() => props.sectionProps?.marginRight ?? DEFAULT_MARGIN);
+
+const pageWidthPx = computed(() => tw2px(pageWidthTw.value));
+const leftMarginPx = computed(() => tw2px(leftMarginTw.value));
+const rightMarginPx = computed(() => tw2px(rightMarginTw.value));
+const leftIndentPx = computed(() => tw2px(props.indentLeft ?? 0));
+const rightIndentPx = computed(() => tw2px(props.indentRight ?? 0));
+const firstLineIndentPx = computed(() => tw2px(props.firstLineIndent ?? 0));
+
+const trackStyle = computed(() => ({
+  width: `${pageWidthPx.value}px`,
+  height: `${RULER_H}px`,
+}));
+
+const ticks = computed(() => {
+  const result: { x: number; major: boolean; label?: string }[] = [];
+  const perUnit = props.unit === 'cm' ? TWIPS_PER_CM : TWIPS_PER_INCH;
+  const steps = Math.ceil(pageWidthTw.value / perUnit) + 1;
+  for (let i = 0; i <= steps; i++) {
+    const tw = i * perUnit;
+    if (tw > pageWidthTw.value) break;
+    result.push({ x: tw2px(tw), major: true, label: i > 0 ? String(i) : undefined });
+    // Half-unit tick
+    const halfTw = tw + perUnit / 2;
+    if (halfTw < pageWidthTw.value) {
+      result.push({ x: tw2px(halfTw), major: false });
+    }
+  }
+  return result;
+});
+
+const tabStopPositions = computed(() => {
+  if (!props.tabStops?.length) return [];
+  return props.tabStops.map(ts => ({
+    px: tw2px((ts as any).position ?? ts.pos ?? 0) + leftMarginPx.value,
+    twips: (ts as any).position ?? ts.pos ?? 0,
+    label: formatValue((ts as any).position ?? ts.pos ?? 0),
+  }));
+});
+
+function formatValue(twips: number): string {
+  if (props.unit === 'cm') return (twips / TWIPS_PER_CM).toFixed(1) + ' cm';
+  return (twips / TWIPS_PER_INCH).toFixed(2) + '"';
+}
+
+function startDrag(type: string, event: MouseEvent) {
+  if (!props.editable) return;
+  dragging.value = true;
+  dragType.value = type;
+  dragStartX.value = event.clientX;
+
+  if (type === 'leftIndent') dragStartValue.value = props.indentLeft ?? 0;
+  else if (type === 'rightIndent') dragStartValue.value = props.indentRight ?? 0;
+  else if (type === 'firstLineIndent') dragStartValue.value = props.firstLineIndent ?? 0;
+
+  tooltipX.value = event.clientX - (trackRef.value?.getBoundingClientRect().left ?? 0);
+  tooltipText.value = formatValue(dragStartValue.value);
+}
+
+function handleMouseMove(event: MouseEvent) {
+  if (!dragging.value || !dragType.value) return;
+  const dx = event.clientX - dragStartX.value;
+  const dTwips = px2tw(dx);
+  const newValue = Math.max(0, dragStartValue.value + dTwips);
+
+  tooltipX.value = event.clientX - (trackRef.value?.getBoundingClientRect().left ?? 0);
+  tooltipText.value = formatValue(newValue);
+}
+
+function handleMouseUp(event: MouseEvent) {
+  if (!dragging.value || !dragType.value) return;
+  const dx = event.clientX - dragStartX.value;
+  const dTwips = px2tw(dx);
+  const newValue = Math.max(0, dragStartValue.value + dTwips);
+
+  switch (dragType.value) {
+    case 'leftIndent': emit('indent-left-change', newValue); break;
+    case 'rightIndent': emit('indent-right-change', newValue); break;
+    case 'firstLineIndent': emit('first-line-indent-change', newValue); break;
+  }
+
+  dragging.value = false;
+  dragType.value = null;
+}
+
+onMounted(() => {
+  window.addEventListener('mousemove', handleMouseMove);
+  window.addEventListener('mouseup', handleMouseUp);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener('mousemove', handleMouseMove);
+  window.removeEventListener('mouseup', handleMouseUp);
+});
+</script>
+
+<style scoped>
+.hruler {
+  display: flex;
+  justify-content: center;
+  background: #f9fafb;
+  border-bottom: 1px solid #e5e7eb;
+  user-select: none;
+  overflow: hidden;
+}
+.hruler__track {
+  position: relative;
+  background: #fff;
+  border-left: 1px solid #d1d5db;
+  border-right: 1px solid #d1d5db;
+}
+.hruler__margin {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background: rgba(0,0,0,0.03);
+}
+.hruler__ticks {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.hruler__handle {
+  position: absolute;
+  cursor: col-resize;
+  font-size: 8px;
+  color: #4285f4;
+  width: 10px;
+  text-align: center;
+  z-index: 2;
+}
+.hruler__handle:hover { color: #2a56c6; }
+.hruler__handle--left-indent { bottom: 0; transform: translateX(-5px); }
+.hruler__handle--first-line { top: 0; transform: translateX(-5px); }
+.hruler__handle--right-indent { top: 0; }
+.hruler__tab {
+  position: absolute;
+  bottom: 2px;
+  font-size: 8px;
+  color: #6b7280;
+  cursor: pointer;
+  transform: translateX(-4px);
+  z-index: 1;
+}
+.hruler__tab:hover { color: #374151; }
+.hruler__tooltip {
+  position: absolute;
+  top: -22px;
+  transform: translateX(-50%);
+  background: #1f2937;
+  color: #fff;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 10px;
+  white-space: nowrap;
+  z-index: 10;
+  pointer-events: none;
+}
+</style>
diff --git a/packages/vue/src/components/HyperlinkDialog.vue b/packages/vue/src/components/HyperlinkDialog.vue
new file mode 100644
index 00000000..ce5f0f87
--- /dev/null
+++ b/packages/vue/src/components/HyperlinkDialog.vue
@@ -0,0 +1,140 @@
+<template>
+  <div v-if="isOpen" class="dialog-overlay" @mousedown.self="close">
+    <div class="dialog" @mousedown.stop @keydown.stop>
+      <div class="dialog__header">
+        <span class="dialog__title">{{ isEditing ? 'Edit Link' : 'Insert Link' }}</span>
+        <button class="dialog__close" @click="close">✕</button>
+      </div>
+      <div class="dialog__body">
+        <div class="field">
+          <label class="field__label">URL</label>
+          <input
+            ref="urlInputRef"
+            v-model="url"
+            class="field__input"
+            placeholder="https://example.com"
+            @keydown.enter.prevent="submit"
+          />
+        </div>
+        <div class="field">
+          <label class="field__label">Display text</label>
+          <input
+            v-model="displayText"
+            class="field__input"
+            placeholder="Link text"
+          />
+        </div>
+        <div class="field">
+          <label class="field__label">Tooltip (optional)</label>
+          <input
+            v-model="tooltip"
+            class="field__input"
+            placeholder="Hover text"
+          />
+        </div>
+        <div class="dialog__actions">
+          <button v-if="isEditing" class="dialog__btn dialog__btn--danger" @mousedown.prevent="removeLink">Remove link</button>
+          <div style="flex:1"></div>
+          <button class="dialog__btn" @click="close">Cancel</button>
+          <button class="dialog__btn dialog__btn--primary" @mousedown.prevent="submit" :disabled="!url.trim()">
+            {{ isEditing ? 'Update' : 'Insert' }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, nextTick } from 'vue';
+import type { EditorView } from 'prosemirror-view';
+
+const props = defineProps<{
+  isOpen: boolean;
+  view: EditorView | null;
+}>();
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'submit', data: { url: string; displayText: string; tooltip: string }): void;
+  (e: 'remove'): void;
+}>();
+
+const urlInputRef = ref<HTMLInputElement | null>(null);
+const url = ref('');
+const displayText = ref('');
+const tooltip = ref('');
+const isEditing = ref(false);
+
+watch(() => props.isOpen, async (open) => {
+  if (open) {
+    // Check if there's an existing hyperlink at cursor
+    const v = props.view;
+    if (v) {
+      const { $from, empty, from, to } = v.state.selection;
+      const marks = v.state.storedMarks || $from.marks();
+      const linkMark = marks.find(m => m.type.name === 'hyperlink');
+
+      if (linkMark) {
+        url.value = linkMark.attrs.href || '';
+        tooltip.value = linkMark.attrs.tooltip || '';
+        isEditing.value = true;
+      } else {
+        url.value = '';
+        tooltip.value = '';
+        isEditing.value = false;
+      }
+
+      // Get selected text as display text
+      if (!empty) {
+        displayText.value = v.state.doc.textBetween(from, to);
+      } else {
+        displayText.value = '';
+      }
+    }
+
+    await nextTick();
+    urlInputRef.value?.focus();
+  }
+});
+
+function close() { emit('close'); }
+
+function submit() {
+  if (!url.value.trim()) return;
+  let href = url.value.trim();
+  // Auto-add https:// if no protocol
+  if (!/^(https?:\/\/|mailto:|tel:|ftp:)/i.test(href)) {
+    href = 'https://' + href;
+  }
+  emit('submit', { url: href, displayText: displayText.value, tooltip: tooltip.value });
+  close();
+}
+
+function removeLink() {
+  emit('remove');
+  close();
+}
+</script>
+
+<style scoped>
+.dialog-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 300; display: flex; align-items: center; justify-content: center; }
+.dialog { background: #fff; border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,0.2); min-width: 400px; max-width: 90vw; }
+.dialog__header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; }
+.dialog__title { font-weight: 600; font-size: 14px; color: #1f2937; }
+.dialog__close { border: none; background: transparent; cursor: pointer; font-size: 14px; color: #6b7280; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 4px; }
+.dialog__close:hover { background: #f3f4f6; }
+.dialog__body { padding: 16px; }
+.dialog__actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
+.dialog__btn { padding: 6px 16px; border: 1px solid #d1d5db; border-radius: 4px; cursor: pointer; font-size: 13px; background: #fff; }
+.dialog__btn--primary { background: #3b82f6; color: #fff; border-color: #3b82f6; }
+.dialog__btn--primary:hover { background: #2563eb; }
+.dialog__btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
+.dialog__btn--danger { color: #dc2626; border-color: #fca5a5; }
+.dialog__btn--danger:hover { background: #fef2f2; }
+
+.field { margin-bottom: 12px; }
+.field__label { display: block; font-size: 12px; font-weight: 500; color: #374151; margin-bottom: 4px; }
+.field__input { width: 100%; padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; outline: none; box-sizing: border-box; }
+.field__input:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }
+</style>
diff --git a/packages/vue/src/components/ImageEditOverlay.vue b/packages/vue/src/components/ImageEditOverlay.vue
new file mode 100644
index 00000000..11b2a57d
--- /dev/null
+++ b/packages/vue/src/components/ImageEditOverlay.vue
@@ -0,0 +1,331 @@
+<template>
+  <div ref="overlayRootRef" v-if="imageInfo" class="image-overlay" :style="overlayStyle" @mousedown.stop>
+    <!-- Selection border -->
+    <div class="image-overlay__border"></div>
+
+    <!-- Resize handles (4 corners) -->
+    <div
+      v-for="h in handles"
+      :key="h.pos"
+      class="image-overlay__handle"
+      :style="h.style"
+      @mousedown.prevent.stop="startResize($event, h.pos)"
+    ></div>
+
+    <!-- Dimension label during resize -->
+    <div v-if="isResizing" class="image-overlay__dim">
+      {{ Math.round(currentWidth) }} &times; {{ Math.round(currentHeight) }}
+    </div>
+
+    <!-- Action buttons -->
+    <div class="image-overlay__actions" v-if="!isResizing">
+      <button title="Image properties" @mousedown.prevent.stop="$emit('open-properties')">&#9881;</button>
+      <button title="Delete image" @mousedown.prevent.stop="deleteImage">&#128465;</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onBeforeUnmount, nextTick } from 'vue';
+import type { EditorView } from 'prosemirror-view';
+
+export interface ImageSelectionInfo {
+  element: HTMLElement;
+  pmPos: number;
+  width: number;
+  height: number;
+}
+
+type ResizeHandle = 'nw' | 'ne' | 'se' | 'sw';
+
+const props = defineProps<{
+  imageInfo: ImageSelectionInfo | null;
+  zoom: number;
+  view: EditorView | null;
+}>();
+
+const emit = defineEmits<{
+  (e: 'open-properties'): void;
+  (e: 'deselect'): void;
+}>();
+
+const overlayRootRef = ref<HTMLElement | null>(null);
+const isResizing = ref(false);
+const currentWidth = ref(0);
+const currentHeight = ref(0);
+
+// Tracked overlay rect (updated from element position)
+const overlayRect = ref<{ left: number; top: number; width: number; height: number } | null>(null);
+
+let resizeHandle: ResizeHandle = 'se';
+let startX = 0;
+let startY = 0;
+let startWidth = 0;
+let startHeight = 0;
+let rafId: number | null = null;
+
+// ---- Position calculation (matches React's approach) ----
+
+function updatePosition() {
+  if (!props.imageInfo || !overlayRootRef.value) {
+    overlayRect.value = null;
+    return;
+  }
+
+  const parent = overlayRootRef.value.offsetParent as HTMLElement | null;
+  if (!parent) {
+    overlayRect.value = null;
+    return;
+  }
+
+  const parentRect = parent.getBoundingClientRect();
+  const imageRect = props.imageInfo.element.getBoundingClientRect();
+  const z = props.zoom;
+
+  overlayRect.value = {
+    left: (imageRect.left - parentRect.left) / z,
+    top: (imageRect.top - parentRect.top) / z,
+    width: imageRect.width / z,
+    height: imageRect.height / z,
+  };
+}
+
+// Update when imageInfo changes
+watch(
+  () => props.imageInfo,
+  async () => {
+    await nextTick();
+    updatePosition();
+  },
+  { immediate: true }
+);
+
+// Update on scroll/resize
+watch(
+  () => props.imageInfo,
+  (_newVal, _oldVal, onCleanup) => {
+    if (!props.imageInfo) return;
+
+    const handleScrollOrResize = () => {
+      if (rafId) cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(updatePosition);
+    };
+
+    const viewport = overlayRootRef.value?.closest('.docx-editor-vue__pages-viewport');
+    const scrollParent = viewport?.parentElement;
+
+    scrollParent?.addEventListener('scroll', handleScrollOrResize, { passive: true });
+    window.addEventListener('resize', handleScrollOrResize, { passive: true });
+
+    onCleanup(() => {
+      scrollParent?.removeEventListener('scroll', handleScrollOrResize);
+      window.removeEventListener('resize', handleScrollOrResize);
+      if (rafId) cancelAnimationFrame(rafId);
+    });
+  },
+  { immediate: true }
+);
+
+// ---- Computed styles ----
+
+const overlayStyle = computed(() => {
+  const r = overlayRect.value;
+  if (!r) {
+    // Use visibility:hidden instead of display:none so offsetParent remains
+    // available for position calculation on the next tick.
+    return {
+      position: 'absolute' as const,
+      top: '0px',
+      left: '0px',
+      visibility: 'hidden' as const,
+      pointerEvents: 'none' as const,
+    };
+  }
+
+  const w = isResizing.value ? currentWidth.value : r.width;
+  const h = isResizing.value ? currentHeight.value : r.height;
+
+  return {
+    position: 'absolute' as const,
+    left: `${r.left}px`,
+    top: `${r.top}px`,
+    width: `${w}px`,
+    height: `${h}px`,
+    zIndex: 15,
+    pointerEvents: 'auto' as const,
+  };
+});
+
+const handles = computed(() => {
+  const half = 5;
+  const w = isResizing.value ? currentWidth.value : (overlayRect.value?.width || 0);
+  const h = isResizing.value ? currentHeight.value : (overlayRect.value?.height || 0);
+  return [
+    { pos: 'nw' as ResizeHandle, style: { left: `-${half}px`, top: `-${half}px`, cursor: 'nw-resize' } },
+    { pos: 'ne' as ResizeHandle, style: { left: `${w - half}px`, top: `-${half}px`, cursor: 'ne-resize' } },
+    { pos: 'se' as ResizeHandle, style: { left: `${w - half}px`, top: `${h - half}px`, cursor: 'se-resize' } },
+    { pos: 'sw' as ResizeHandle, style: { left: `-${half}px`, top: `${h - half}px`, cursor: 'sw-resize' } },
+  ];
+});
+
+// ---- Resize logic ----
+
+function calculateNewDimensions(
+  handle: ResizeHandle,
+  deltaX: number,
+  deltaY: number,
+  sw: number,
+  sh: number,
+  lockAspect: boolean
+): { width: number; height: number } {
+  const signX = handle.includes('w') ? -1 : 1;
+  const signY = handle.includes('n') ? -1 : 1;
+
+  let newW = sw + deltaX * signX;
+  let newH = sh + deltaY * signY;
+
+  if (lockAspect) {
+    const scale = Math.max(newW / sw, newH / sh);
+    newW = sw * scale;
+    newH = sh * scale;
+  }
+
+  return {
+    width: Math.max(20, Math.min(2000, newW)),
+    height: Math.max(20, Math.min(2000, newH)),
+  };
+}
+
+function startResize(e: MouseEvent, handle: string) {
+  if (!props.imageInfo || !overlayRect.value) return;
+  resizeHandle = handle as ResizeHandle;
+  startX = e.clientX;
+  startY = e.clientY;
+  startWidth = overlayRect.value.width;
+  startHeight = overlayRect.value.height;
+  currentWidth.value = Math.round(startWidth);
+  currentHeight.value = Math.round(startHeight);
+  isResizing.value = true;
+
+  document.addEventListener('mousemove', onResizeMove);
+  document.addEventListener('mouseup', onResizeEnd);
+}
+
+function onResizeMove(e: MouseEvent) {
+  const z = props.zoom;
+  const deltaX = (e.clientX - startX) / z;
+  const deltaY = (e.clientY - startY) / z;
+  const lockAspect = !e.shiftKey;
+
+  const dims = calculateNewDimensions(resizeHandle, deltaX, deltaY, startWidth, startHeight, lockAspect);
+  currentWidth.value = Math.round(dims.width);
+  currentHeight.value = Math.round(dims.height);
+}
+
+function onResizeEnd() {
+  document.removeEventListener('mousemove', onResizeMove);
+  document.removeEventListener('mouseup', onResizeEnd);
+  isResizing.value = false;
+
+  const v = props.view;
+  const info = props.imageInfo;
+  if (!v || !info) return;
+
+  try {
+    const node = v.state.doc.nodeAt(info.pmPos);
+    if (node && node.type.name === 'image') {
+      const tr = v.state.tr.setNodeMarkup(info.pmPos, undefined, {
+        ...node.attrs,
+        width: currentWidth.value,
+        height: currentHeight.value,
+      });
+      v.dispatch(tr);
+    }
+  } catch {
+    // Position might be invalid after concurrent edits
+  }
+}
+
+function deleteImage() {
+  const v = props.view;
+  const info = props.imageInfo;
+  if (!v || !info) return;
+  try {
+    const node = v.state.doc.nodeAt(info.pmPos);
+    if (node) {
+      const tr = v.state.tr.delete(info.pmPos, info.pmPos + node.nodeSize);
+      v.dispatch(tr);
+      emit('deselect');
+    }
+  } catch {
+    // ignore
+  }
+}
+
+onBeforeUnmount(() => {
+  document.removeEventListener('mousemove', onResizeMove);
+  document.removeEventListener('mouseup', onResizeEnd);
+  if (rafId) cancelAnimationFrame(rafId);
+});
+</script>
+
+<style scoped>
+.image-overlay {
+  overflow: visible;
+}
+.image-overlay__border {
+  position: absolute;
+  inset: -2px;
+  border: 2px solid #2563eb;
+  border-radius: 2px;
+  pointer-events: none;
+}
+.image-overlay__handle {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: #2563eb;
+  border: 1px solid white;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  border-radius: 2px;
+  z-index: 16;
+}
+.image-overlay__dim {
+  position: absolute;
+  bottom: -24px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(0,0,0,0.75);
+  color: #fff;
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  white-space: nowrap;
+  pointer-events: none;
+}
+.image-overlay__actions {
+  position: absolute;
+  top: -32px;
+  right: 0;
+  display: flex;
+  gap: 2px;
+  background: #fff;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  padding: 2px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+.image-overlay__actions button {
+  width: 26px;
+  height: 26px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 4px;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.image-overlay__actions button:hover { background: #f3f4f6; }
+</style>
diff --git a/packages/vue/src/components/ImagePositionDialog.vue b/packages/vue/src/components/ImagePositionDialog.vue
new file mode 100644
index 00000000..f4ca4974
--- /dev/null
+++ b/packages/vue/src/components/ImagePositionDialog.vue
@@ -0,0 +1,183 @@
+<template>
+  <div v-if="isOpen" class="ipd-overlay" @mousedown.self="$emit('close')">
+    <div class="ipd-dialog" @keydown.escape="$emit('close')">
+      <div class="ipd-dialog__header">Image Position</div>
+
+      <div class="ipd-dialog__body">
+        <!-- Horizontal -->
+        <fieldset class="ipd-fieldset">
+          <legend class="ipd-legend">Horizontal</legend>
+          <div class="ipd-row">
+            <label class="ipd-label">Mode</label>
+            <select v-model="hMode" class="ipd-select">
+              <option value="align">Alignment</option>
+              <option value="offset">Offset</option>
+            </select>
+          </div>
+          <div v-if="hMode === 'align'" class="ipd-row">
+            <label class="ipd-label">Align</label>
+            <select v-model="hAlign" class="ipd-select">
+              <option value="left">Left</option>
+              <option value="center">Center</option>
+              <option value="right">Right</option>
+            </select>
+          </div>
+          <div v-else class="ipd-row">
+            <label class="ipd-label">Offset (px)</label>
+            <input v-model.number="hOffset" type="number" class="ipd-input" />
+          </div>
+          <div class="ipd-row">
+            <label class="ipd-label">Relative to</label>
+            <select v-model="hRelativeTo" class="ipd-select">
+              <option value="page">Page</option>
+              <option value="column">Column</option>
+              <option value="margin">Margin</option>
+              <option value="character">Character</option>
+            </select>
+          </div>
+        </fieldset>
+
+        <!-- Vertical -->
+        <fieldset class="ipd-fieldset">
+          <legend class="ipd-legend">Vertical</legend>
+          <div class="ipd-row">
+            <label class="ipd-label">Mode</label>
+            <select v-model="vMode" class="ipd-select">
+              <option value="align">Alignment</option>
+              <option value="offset">Offset</option>
+            </select>
+          </div>
+          <div v-if="vMode === 'align'" class="ipd-row">
+            <label class="ipd-label">Align</label>
+            <select v-model="vAlign" class="ipd-select">
+              <option value="top">Top</option>
+              <option value="center">Center</option>
+              <option value="bottom">Bottom</option>
+            </select>
+          </div>
+          <div v-else class="ipd-row">
+            <label class="ipd-label">Offset (px)</label>
+            <input v-model.number="vOffset" type="number" class="ipd-input" />
+          </div>
+          <div class="ipd-row">
+            <label class="ipd-label">Relative to</label>
+            <select v-model="vRelativeTo" class="ipd-select">
+              <option value="page">Page</option>
+              <option value="margin">Margin</option>
+              <option value="paragraph">Paragraph</option>
+              <option value="line">Line</option>
+            </select>
+          </div>
+        </fieldset>
+
+        <!-- Distance from text -->
+        <fieldset class="ipd-fieldset">
+          <legend class="ipd-legend">Distance from text (px)</legend>
+          <div class="ipd-row">
+            <label class="ipd-label">Top</label>
+            <input v-model.number="distTop" type="number" class="ipd-input" min="0" />
+            <label class="ipd-label" style="width:60px">Bottom</label>
+            <input v-model.number="distBottom" type="number" class="ipd-input" min="0" />
+          </div>
+          <div class="ipd-row">
+            <label class="ipd-label">Left</label>
+            <input v-model.number="distLeft" type="number" class="ipd-input" min="0" />
+            <label class="ipd-label" style="width:60px">Right</label>
+            <input v-model.number="distRight" type="number" class="ipd-input" min="0" />
+          </div>
+        </fieldset>
+      </div>
+
+      <div class="ipd-dialog__footer">
+        <button class="ipd-btn" @click="$emit('close')">Cancel</button>
+        <button class="ipd-btn ipd-btn--primary" @click="apply">Apply</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+export interface ImagePositionData {
+  horizontal?: { relativeTo?: string; posOffset?: number; align?: string };
+  vertical?: { relativeTo?: string; posOffset?: number; align?: string };
+  distTop?: number;
+  distBottom?: number;
+  distLeft?: number;
+  distRight?: number;
+}
+
+const props = defineProps<{
+  isOpen: boolean;
+  currentData?: ImagePositionData;
+}>();
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'apply', data: ImagePositionData): void;
+}>();
+
+const hMode = ref<'align' | 'offset'>('align');
+const hAlign = ref('left');
+const hOffset = ref(0);
+const hRelativeTo = ref('column');
+const vMode = ref<'align' | 'offset'>('align');
+const vAlign = ref('top');
+const vOffset = ref(0);
+const vRelativeTo = ref('paragraph');
+const distTop = ref(0);
+const distBottom = ref(0);
+const distLeft = ref(0);
+const distRight = ref(0);
+
+watch(() => props.isOpen, (open) => {
+  if (!open) return;
+  const d = props.currentData;
+  if (d?.horizontal?.align) { hMode.value = 'align'; hAlign.value = d.horizontal.align; }
+  else if (d?.horizontal?.posOffset != null) { hMode.value = 'offset'; hOffset.value = d.horizontal.posOffset; }
+  hRelativeTo.value = d?.horizontal?.relativeTo ?? 'column';
+  if (d?.vertical?.align) { vMode.value = 'align'; vAlign.value = d.vertical.align; }
+  else if (d?.vertical?.posOffset != null) { vMode.value = 'offset'; vOffset.value = d.vertical.posOffset; }
+  vRelativeTo.value = d?.vertical?.relativeTo ?? 'paragraph';
+  distTop.value = d?.distTop ?? 0;
+  distBottom.value = d?.distBottom ?? 0;
+  distLeft.value = d?.distLeft ?? 0;
+  distRight.value = d?.distRight ?? 0;
+});
+
+function apply() {
+  const data: ImagePositionData = {
+    horizontal: {
+      relativeTo: hRelativeTo.value,
+      ...(hMode.value === 'align' ? { align: hAlign.value } : { posOffset: hOffset.value }),
+    },
+    vertical: {
+      relativeTo: vRelativeTo.value,
+      ...(vMode.value === 'align' ? { align: vAlign.value } : { posOffset: vOffset.value }),
+    },
+    distTop: distTop.value,
+    distBottom: distBottom.value,
+    distLeft: distLeft.value,
+    distRight: distRight.value,
+  };
+  emit('apply', data);
+  emit('close');
+}
+</script>
+
+<style scoped>
+.ipd-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 10000; }
+.ipd-dialog { background: #fff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); width: 420px; max-width: 90vw; }
+.ipd-dialog__header { padding: 16px 20px 12px; border-bottom: 1px solid #e5e7eb; font-size: 16px; font-weight: 600; color: #1f2937; }
+.ipd-dialog__body { padding: 12px 20px; display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow-y: auto; }
+.ipd-dialog__footer { padding: 12px 20px 16px; border-top: 1px solid #e5e7eb; display: flex; justify-content: flex-end; gap: 8px; }
+.ipd-fieldset { border: 1px solid #e5e7eb; border-radius: 6px; padding: 10px 12px; margin: 0; }
+.ipd-legend { font-size: 12px; font-weight: 600; color: #4b5563; padding: 0 4px; }
+.ipd-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
+.ipd-row:last-child { margin-bottom: 0; }
+.ipd-label { width: 70px; font-size: 13px; color: #6b7280; flex-shrink: 0; }
+.ipd-input, .ipd-select { flex: 1; padding: 5px 8px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; }
+.ipd-btn { padding: 6px 16px; font-size: 13px; border: 1px solid #d1d5db; border-radius: 4px; cursor: pointer; background: #fff; }
+.ipd-btn--primary { background: #1a73e8; color: #fff; border-color: #1a73e8; }
+</style>
diff --git a/packages/vue/src/components/ImagePropertiesDialog.vue b/packages/vue/src/components/ImagePropertiesDialog.vue
new file mode 100644
index 00000000..879a4f90
--- /dev/null
+++ b/packages/vue/src/components/ImagePropertiesDialog.vue
@@ -0,0 +1,208 @@
+<template>
+  <div v-if="isOpen" class="dialog-overlay" @mousedown.self="close">
+    <div class="dialog" @mousedown.stop @keydown.stop>
+      <div class="dialog__header">
+        <span class="dialog__title">Image Properties</span>
+        <button class="dialog__close" @click="close">✕</button>
+      </div>
+      <div class="dialog__body">
+        <!-- Alt text -->
+        <div class="field">
+          <label class="field__label">Alt text</label>
+          <textarea v-model="altText" class="field__textarea" placeholder="Describe this image for accessibility" rows="2"></textarea>
+        </div>
+
+        <!-- Wrap type -->
+        <div class="field">
+          <label class="field__label">Text wrapping</label>
+          <select v-model="wrapType" class="field__select">
+            <option value="inline">Inline with text</option>
+            <option value="wrapRight">Wrap text (float left)</option>
+            <option value="wrapLeft">Wrap text (float right)</option>
+            <option value="topAndBottom">Top and bottom</option>
+            <option value="behind">Behind text</option>
+            <option value="inFront">In front of text</option>
+          </select>
+        </div>
+
+        <!-- Border -->
+        <div class="field">
+          <label class="field__label">Border</label>
+          <div class="field-row">
+            <label>Width:
+              <input v-model.number="borderWidth" type="number" min="0" max="20" step="0.5" class="field__input--small" />px
+            </label>
+            <label>Style:
+              <select v-model="borderStyle" class="field__select--small">
+                <option value="solid">Solid</option>
+                <option value="dashed">Dashed</option>
+                <option value="dotted">Dotted</option>
+                <option value="double">Double</option>
+              </select>
+            </label>
+            <label>Color:
+              <input v-model="borderColor" type="color" class="field__color" />
+            </label>
+          </div>
+        </div>
+
+        <!-- Dimensions -->
+        <div class="field">
+          <label class="field__label">Dimensions</label>
+          <div class="field-row">
+            <label>Width: <input :value="width" type="number" min="1" max="2000" class="field__input--small" @input="onWidthInput" />px</label>
+            <label>Height: <input :value="height" type="number" min="1" max="2000" class="field__input--small" @input="onHeightInput" />px</label>
+          </div>
+          <label class="field__checkbox">
+            <input v-model="lockRatio" type="checkbox" />
+            Lock aspect ratio
+          </label>
+        </div>
+
+        <div class="dialog__actions">
+          <button class="dialog__btn" @click="close">Cancel</button>
+          <button class="dialog__btn dialog__btn--primary" @mousedown.prevent="apply">Apply</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import type { EditorView } from 'prosemirror-view';
+
+const props = defineProps<{
+  isOpen: boolean;
+  view: EditorView | null;
+  pmPos: number | null;
+}>();
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+}>();
+
+const altText = ref('');
+const wrapType = ref('inline');
+const borderWidth = ref(0);
+const borderStyle = ref('solid');
+const borderColor = ref('#000000');
+const width = ref(200);
+const height = ref(150);
+const lockRatio = ref(true);
+let aspectRatio = 1;
+
+// Load current image attrs when dialog opens
+watch(() => props.isOpen, (open) => {
+  if (!open || !props.view || props.pmPos === null) return;
+  try {
+    const node = props.view.state.doc.nodeAt(props.pmPos);
+    if (node && node.type.name === 'image') {
+      altText.value = node.attrs.alt || '';
+      borderWidth.value = node.attrs.borderWidth || 0;
+      borderStyle.value = node.attrs.borderStyle || 'solid';
+      borderColor.value = node.attrs.borderColor || '#000000';
+      width.value = node.attrs.width || 200;
+      height.value = node.attrs.height || 150;
+      aspectRatio = width.value / (height.value || 1);
+      lockRatio.value = true;
+
+      // Derive wrap type from attrs
+      const dm = node.attrs.displayMode;
+      const cf = node.attrs.cssFloat;
+      const wt = node.attrs.wrapType;
+      if (dm === 'float' && cf === 'left') wrapType.value = 'wrapRight';
+      else if (dm === 'float' && cf === 'right') wrapType.value = 'wrapLeft';
+      else if (dm === 'block') wrapType.value = 'topAndBottom';
+      else if (wt === 'behind') wrapType.value = 'behind';
+      else if (wt === 'inFront') wrapType.value = 'inFront';
+      else wrapType.value = 'inline';
+    }
+  } catch { /* ignore */ }
+});
+
+function onWidthInput(e: Event) {
+  const val = Number((e.target as HTMLInputElement).value);
+  if (isNaN(val) || val < 1) return;
+  width.value = val;
+  if (lockRatio.value && aspectRatio > 0) {
+    height.value = Math.round(val / aspectRatio);
+  }
+}
+
+function onHeightInput(e: Event) {
+  const val = Number((e.target as HTMLInputElement).value);
+  if (isNaN(val) || val < 1) return;
+  height.value = val;
+  if (lockRatio.value && aspectRatio > 0) {
+    width.value = Math.round(val * aspectRatio);
+  }
+}
+
+function close() { emit('close'); }
+
+function apply() {
+  const v = props.view;
+  if (!v || props.pmPos === null) return;
+
+  try {
+    const node = v.state.doc.nodeAt(props.pmPos);
+    if (!node || node.type.name !== 'image') return;
+
+    // Map wrap type to PM attributes
+    let displayMode = 'inline';
+    let cssFloat: string | null = null;
+    let wrapTypeAttr = 'inline';
+
+    switch (wrapType.value) {
+      case 'wrapRight': displayMode = 'float'; cssFloat = 'left'; wrapTypeAttr = 'square'; break;
+      case 'wrapLeft': displayMode = 'float'; cssFloat = 'right'; wrapTypeAttr = 'square'; break;
+      case 'topAndBottom': displayMode = 'block'; wrapTypeAttr = 'topAndBottom'; break;
+      case 'behind': displayMode = 'float'; cssFloat = 'none'; wrapTypeAttr = 'behind'; break;
+      case 'inFront': displayMode = 'float'; cssFloat = 'none'; wrapTypeAttr = 'inFront'; break;
+      default: displayMode = 'inline'; wrapTypeAttr = 'inline'; break;
+    }
+
+    const tr = v.state.tr.setNodeMarkup(props.pmPos, undefined, {
+      ...node.attrs,
+      alt: altText.value,
+      width: width.value,
+      height: height.value,
+      borderWidth: borderWidth.value || undefined,
+      borderStyle: borderWidth.value > 0 ? borderStyle.value : undefined,
+      borderColor: borderWidth.value > 0 ? borderColor.value : undefined,
+      displayMode,
+      cssFloat,
+      wrapType: wrapTypeAttr,
+    });
+    v.dispatch(tr);
+  } catch { /* ignore */ }
+
+  close();
+}
+</script>
+
+<style scoped>
+.dialog-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 300; display: flex; align-items: center; justify-content: center; }
+.dialog { background: #fff; border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,0.2); min-width: 400px; max-width: 90vw; }
+.dialog__header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; }
+.dialog__title { font-weight: 600; font-size: 14px; color: #1f2937; }
+.dialog__close { border: none; background: transparent; cursor: pointer; font-size: 14px; color: #6b7280; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 4px; }
+.dialog__close:hover { background: #f3f4f6; }
+.dialog__body { padding: 16px; }
+.dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
+.dialog__btn { padding: 6px 16px; border: 1px solid #d1d5db; border-radius: 4px; cursor: pointer; font-size: 13px; background: #fff; }
+.dialog__btn--primary { background: #3b82f6; color: #fff; border-color: #3b82f6; }
+.dialog__btn--primary:hover { background: #2563eb; }
+
+.field { margin-bottom: 14px; }
+.field__label { display: block; font-size: 12px; font-weight: 500; color: #374151; margin-bottom: 4px; }
+.field__textarea { width: 100%; padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; outline: none; resize: vertical; box-sizing: border-box; font-family: inherit; }
+.field__textarea:focus { border-color: #3b82f6; }
+.field__select { width: 100%; padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; outline: none; background: #fff; }
+.field__select--small { padding: 4px 6px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 12px; background: #fff; }
+.field__input--small { width: 60px; padding: 4px 6px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 12px; }
+.field__color { width: 32px; height: 26px; border: 1px solid #d1d5db; border-radius: 4px; padding: 1px; cursor: pointer; }
+.field-row { display: flex; align-items: center; gap: 12px; font-size: 12px; color: #4b5563; flex-wrap: wrap; }
+.field__checkbox { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #4b5563; margin-top: 6px; cursor: pointer; }
+</style>
diff --git a/packages/vue/src/components/InlineHeaderFooterEditor.vue b/packages/vue/src/components/InlineHeaderFooterEditor.vue
new file mode 100644
index 00000000..cb740a57
--- /dev/null
+++ b/packages/vue/src/components/InlineHeaderFooterEditor.vue
@@ -0,0 +1,164 @@
+<template>
+  <div
+    v-if="isOpen"
+    class="hf-editor"
+    :style="overlayStyle"
+    @mousedown.stop
+  >
+    <div class="hf-editor__toolbar">
+      <span class="hf-editor__label">{{ position === 'header' ? 'Header' : 'Footer' }}</span>
+      <div class="hf-editor__actions">
+        <button class="hf-editor__btn" title="Remove" @mousedown.prevent="$emit('remove')">&#x1F5D1;</button>
+        <button class="hf-editor__btn hf-editor__btn--primary" title="Save" @mousedown.prevent="handleSave">Save</button>
+        <button class="hf-editor__btn" title="Cancel" @mousedown.prevent="$emit('close')">Cancel</button>
+      </div>
+    </div>
+    <div ref="editorRef" class="hf-editor__content" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onBeforeUnmount, nextTick } from 'vue';
+import { EditorState } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import { singletonManager } from '@eigenpal/docx-core/prosemirror/schema';
+import { toProseDoc, createEmptyDoc } from '@eigenpal/docx-core/prosemirror/conversion';
+import { fromProseDoc } from '@eigenpal/docx-core/prosemirror/conversion/fromProseDoc';
+import type { Document } from '@eigenpal/docx-core/types/document';
+
+import 'prosemirror-view/style/prosemirror.css';
+
+const props = defineProps<{
+  isOpen: boolean;
+  position: 'header' | 'footer';
+  /** The header/footer content as a Document-like structure */
+  content?: Document | null;
+  /** Target element to overlay */
+  targetRect?: { top: number; left: number; width: number; height: number } | null;
+}>();
+
+const emit = defineEmits<{
+  (e: 'save', doc: Document): void;
+  (e: 'close'): void;
+  (e: 'remove'): void;
+}>();
+
+const editorRef = ref<HTMLElement | null>(null);
+let view: EditorView | null = null;
+
+const overlayStyle = ref<Record<string, string>>({});
+
+function updatePosition() {
+  const rect = props.targetRect;
+  if (!rect) return;
+  overlayStyle.value = {
+    position: 'absolute',
+    top: `${rect.top}px`,
+    left: `${rect.left}px`,
+    width: `${rect.width}px`,
+    minHeight: `${Math.max(rect.height, 60)}px`,
+    zIndex: '100',
+  };
+}
+
+watch(() => props.isOpen, async (open) => {
+  if (open) {
+    updatePosition();
+    await nextTick();
+    createEditor();
+  } else {
+    destroyEditor();
+  }
+});
+
+watch(() => props.targetRect, () => {
+  if (props.isOpen) updatePosition();
+}, { deep: true });
+
+function createEditor() {
+  const host = editorRef.value;
+  if (!host || view) return;
+
+  const mgr = singletonManager;
+  const doc = props.content
+    ? toProseDoc(props.content, { styles: props.content.package?.styles ?? undefined })
+    : createEmptyDoc();
+
+  const state = EditorState.create({
+    doc,
+    schema: mgr.getSchema(),
+    plugins: mgr.getPlugins() ?? [],
+  });
+
+  view = new EditorView(host, {
+    state,
+    editable: () => true,
+  });
+
+  view.focus();
+}
+
+function destroyEditor() {
+  if (view) {
+    view.destroy();
+    view = null;
+  }
+}
+
+function handleSave() {
+  if (!view || !props.content) return;
+  const updatedDoc = fromProseDoc(view.state.doc, props.content);
+  emit('save', updatedDoc);
+  emit('close');
+}
+
+onBeforeUnmount(() => {
+  destroyEditor();
+});
+</script>
+
+<style scoped>
+.hf-editor {
+  background: #fff;
+  border: 2px solid #4285f4;
+  border-radius: 4px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
+}
+.hf-editor__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 8px;
+  background: #f0f4ff;
+  border-bottom: 1px solid #d0daf0;
+}
+.hf-editor__label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #1a73e8;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+.hf-editor__actions { display: flex; gap: 4px; }
+.hf-editor__btn {
+  padding: 3px 10px;
+  border: 1px solid #d1d5db;
+  border-radius: 3px;
+  background: #fff;
+  cursor: pointer;
+  font-size: 12px;
+  color: #374151;
+}
+.hf-editor__btn:hover { background: #f3f4f6; }
+.hf-editor__btn--primary { background: #1a73e8; color: #fff; border-color: #1a73e8; }
+.hf-editor__btn--primary:hover { background: #1557b0; }
+.hf-editor__content {
+  padding: 8px 12px;
+  min-height: 40px;
+  outline: none;
+}
+.hf-editor__content :deep(.ProseMirror) {
+  outline: none;
+  min-height: 30px;
+}
+</style>
diff --git a/packages/vue/src/components/InsertImageDialog.vue b/packages/vue/src/components/InsertImageDialog.vue
new file mode 100644
index 00000000..33e07993
--- /dev/null
+++ b/packages/vue/src/components/InsertImageDialog.vue
@@ -0,0 +1,173 @@
+<template>
+  <div v-if="isOpen" class="dialog-overlay" @mousedown.self="close">
+    <div class="dialog" @mousedown.stop @keydown.stop>
+      <div class="dialog__header">
+        <span class="dialog__title">Insert Image</span>
+        <button class="dialog__close" @click="close">✕</button>
+      </div>
+      <div class="dialog__body">
+        <!-- Drop zone / file input -->
+        <div
+          class="drop-zone"
+          :class="{ 'drop-zone--active': isDragOver }"
+          @dragover.prevent="isDragOver = true"
+          @dragleave="isDragOver = false"
+          @drop.prevent="handleDrop"
+          @click="fileInput?.click()"
+        >
+          <template v-if="!preview">
+            <div class="drop-zone__icon">🖼️</div>
+            <div class="drop-zone__text">Drop image here or click to browse</div>
+            <div class="drop-zone__hint">PNG, JPG, GIF, SVG (max 10MB)</div>
+          </template>
+          <img v-else :src="preview" class="drop-zone__preview" alt="Preview" />
+        </div>
+        <input ref="fileInput" type="file" accept="image/*" style="display:none" @change="handleFileChange" />
+
+        <div v-if="error" class="drop-zone__error">{{ error }}</div>
+
+        <!-- Dimensions -->
+        <div v-if="preview" class="image-controls">
+          <label>Width: <input v-model.number="imgWidth" type="number" min="1" max="2000" class="dim-input" @input="onWidthChange" /></label>
+          <label>Height: <input v-model.number="imgHeight" type="number" min="1" max="2000" class="dim-input" @input="onHeightChange" /></label>
+          <label class="lock-label"><input type="checkbox" v-model="lockAspect" /> Lock ratio</label>
+        </div>
+
+        <!-- Alt text -->
+        <div v-if="preview" class="image-controls">
+          <label style="flex:1">Alt text: <input v-model="altText" class="alt-input" placeholder="Describe this image" /></label>
+        </div>
+
+        <!-- Actions -->
+        <div v-if="preview" class="dialog__actions">
+          <button class="dialog__btn" @click="reset">Clear</button>
+          <button class="dialog__btn dialog__btn--primary" @mousedown.prevent="insertImage">Insert</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+defineProps<{ isOpen: boolean }>();
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'insert', data: { src: string; width: number; height: number; alt: string }): void;
+}>();
+
+const fileInput = ref<HTMLInputElement | null>(null);
+const preview = ref('');
+const imgWidth = ref(400);
+const imgHeight = ref(300);
+const lockAspect = ref(true);
+const altText = ref('');
+const error = ref('');
+const isDragOver = ref(false);
+let aspectRatio = 1;
+
+function close() { emit('close'); }
+
+function reset() {
+  preview.value = '';
+  error.value = '';
+  altText.value = '';
+  imgWidth.value = 400;
+  imgHeight.value = 300;
+}
+
+function handleDrop(e: DragEvent) {
+  isDragOver.value = false;
+  const file = e.dataTransfer?.files?.[0];
+  if (file) loadFile(file);
+}
+
+function handleFileChange(e: Event) {
+  const file = (e.target as HTMLInputElement).files?.[0];
+  if (file) loadFile(file);
+}
+
+function loadFile(file: File) {
+  error.value = '';
+  if (!file.type.startsWith('image/')) {
+    error.value = 'Please select an image file.';
+    return;
+  }
+  if (file.size > 10 * 1024 * 1024) {
+    error.value = 'File too large (max 10MB).';
+    return;
+  }
+
+  altText.value = file.name.replace(/\.[^.]+$/, '');
+  const reader = new FileReader();
+  reader.onload = () => {
+    const dataUrl = reader.result as string;
+    const img = new Image();
+    img.onload = () => {
+      let w = img.naturalWidth;
+      let h = img.naturalHeight;
+      // Constrain to max 800x600
+      if (w > 800) { h = Math.round(h * (800 / w)); w = 800; }
+      if (h > 600) { w = Math.round(w * (600 / h)); h = 600; }
+      imgWidth.value = w;
+      imgHeight.value = h;
+      aspectRatio = w / h;
+      preview.value = dataUrl;
+    };
+    img.src = dataUrl;
+  };
+  reader.readAsDataURL(file);
+}
+
+function onWidthChange() {
+  if (lockAspect.value && aspectRatio) {
+    imgHeight.value = Math.round(imgWidth.value / aspectRatio);
+  }
+}
+
+function onHeightChange() {
+  if (lockAspect.value && aspectRatio) {
+    imgWidth.value = Math.round(imgHeight.value * aspectRatio);
+  }
+}
+
+function insertImage() {
+  if (!preview.value) return;
+  emit('insert', {
+    src: preview.value,
+    width: imgWidth.value,
+    height: imgHeight.value,
+    alt: altText.value,
+  });
+  reset();
+  close();
+}
+</script>
+
+<style scoped>
+.dialog-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 300; display: flex; align-items: center; justify-content: center; }
+.dialog { background: #fff; border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,0.2); min-width: 400px; max-width: 90vw; }
+.dialog__header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; }
+.dialog__title { font-weight: 600; font-size: 14px; color: #1f2937; }
+.dialog__close { border: none; background: transparent; cursor: pointer; font-size: 14px; color: #6b7280; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 4px; }
+.dialog__close:hover { background: #f3f4f6; }
+.dialog__body { padding: 16px; }
+.dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
+.dialog__btn { padding: 6px 16px; border: 1px solid #d1d5db; border-radius: 4px; cursor: pointer; font-size: 13px; background: #fff; }
+.dialog__btn--primary { background: #3b82f6; color: #fff; border-color: #3b82f6; }
+.dialog__btn--primary:hover { background: #2563eb; }
+
+.drop-zone { border: 2px dashed #d1d5db; border-radius: 8px; padding: 24px; text-align: center; cursor: pointer; transition: border-color 0.2s; min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
+.drop-zone:hover, .drop-zone--active { border-color: #3b82f6; background: #eff6ff; }
+.drop-zone__icon { font-size: 32px; margin-bottom: 8px; }
+.drop-zone__text { font-size: 13px; color: #374151; }
+.drop-zone__hint { font-size: 11px; color: #9ca3af; margin-top: 4px; }
+.drop-zone__preview { max-width: 100%; max-height: 200px; border-radius: 4px; }
+.drop-zone__error { color: #dc2626; font-size: 12px; margin-top: 8px; }
+
+.image-controls { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 13px; }
+.dim-input { width: 70px; padding: 4px 6px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; }
+.alt-input { width: 100%; padding: 4px 8px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; margin-top: 4px; }
+.lock-label { display: flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; }
+</style>
diff --git a/packages/vue/src/components/InsertSymbolDialog.vue b/packages/vue/src/components/InsertSymbolDialog.vue
new file mode 100644
index 00000000..991b858c
--- /dev/null
+++ b/packages/vue/src/components/InsertSymbolDialog.vue
@@ -0,0 +1,214 @@
+<template>
+  <div v-if="isOpen" class="dialog-overlay" @mousedown.self="close">
+    <div class="dialog symbol-dialog" @mousedown.stop @keydown.stop>
+      <div class="dialog__header">
+        <span class="dialog__title">Insert Symbol</span>
+        <button class="dialog__close" @click="close">✕</button>
+      </div>
+      <div class="dialog__body">
+        <!-- Search -->
+        <input
+          ref="searchRef"
+          v-model="search"
+          class="symbol-search"
+          placeholder="Search symbols..."
+          @keydown.escape="close"
+        />
+
+        <!-- Category tabs -->
+        <div v-if="!search" class="symbol-tabs">
+          <button
+            v-for="cat in categories"
+            :key="cat.name"
+            class="symbol-tab"
+            :class="{ active: activeCategory === cat.name }"
+            @mousedown.prevent="activeCategory = cat.name"
+          >{{ cat.name }}</button>
+        </div>
+
+        <!-- Symbol grid -->
+        <div class="symbol-grid">
+          <button
+            v-for="sym in displayedSymbols"
+            :key="sym.char"
+            class="symbol-cell"
+            :class="{ selected: selectedSymbol === sym.char }"
+            :title="sym.name"
+            @click="selectedSymbol = sym.char"
+            @dblclick="insertSymbol(sym.char)"
+          >{{ sym.char }}</button>
+          <div v-if="displayedSymbols.length === 0" class="symbol-empty">No symbols found</div>
+        </div>
+
+        <!-- Preview & info -->
+        <div v-if="selectedSymbol" class="symbol-preview">
+          <span class="symbol-preview__char">{{ selectedSymbol }}</span>
+          <span class="symbol-preview__info">U+{{ selectedSymbol.codePointAt(0)?.toString(16).toUpperCase().padStart(4, '0') }}</span>
+        </div>
+
+        <!-- Recent -->
+        <div v-if="recentSymbols.length > 0 && !search" class="symbol-recent">
+          <div class="symbol-recent__label">Recent:</div>
+          <button
+            v-for="s in recentSymbols"
+            :key="s"
+            class="symbol-cell symbol-cell--small"
+            @dblclick="insertSymbol(s)"
+            @click="selectedSymbol = s"
+          >{{ s }}</button>
+        </div>
+
+        <div class="dialog__actions">
+          <button class="dialog__btn" @click="close">Cancel</button>
+          <button class="dialog__btn dialog__btn--primary" @mousedown.prevent="insertSymbol(selectedSymbol)" :disabled="!selectedSymbol">Insert</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, nextTick } from 'vue';
+
+const props = defineProps<{ isOpen: boolean }>();
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'insert', symbol: string): void;
+}>();
+
+const searchRef = ref<HTMLInputElement | null>(null);
+const search = ref('');
+const activeCategory = ref('Common');
+const selectedSymbol = ref('');
+const recentSymbols = ref<string[]>([]);
+
+interface SymbolEntry { char: string; name: string; category: string; }
+
+const categories = [
+  { name: 'Common', symbols: [
+    { char: '©', name: 'Copyright' }, { char: '®', name: 'Registered' }, { char: '™', name: 'Trademark' },
+    { char: '•', name: 'Bullet' }, { char: '…', name: 'Ellipsis' }, { char: '—', name: 'Em dash' },
+    { char: '–', name: 'En dash' }, { char: '±', name: 'Plus-minus' }, { char: '×', name: 'Multiply' },
+    { char: '÷', name: 'Divide' }, { char: '≠', name: 'Not equal' }, { char: '≈', name: 'Approximately' },
+    { char: '≤', name: 'Less or equal' }, { char: '≥', name: 'Greater or equal' }, { char: '°', name: 'Degree' },
+    { char: 'µ', name: 'Micro' }, { char: '¶', name: 'Pilcrow' }, { char: '§', name: 'Section' },
+    { char: '†', name: 'Dagger' }, { char: '‡', name: 'Double dagger' }, { char: '¿', name: 'Inverted question' },
+    { char: '¡', name: 'Inverted exclamation' }, { char: '‰', name: 'Per mille' }, { char: '∞', name: 'Infinity' },
+  ]},
+  { name: 'Arrows', symbols: [
+    { char: '←', name: 'Left' }, { char: '→', name: 'Right' }, { char: '↑', name: 'Up' }, { char: '↓', name: 'Down' },
+    { char: '↔', name: 'Left-right' }, { char: '↕', name: 'Up-down' }, { char: '⇐', name: 'Double left' },
+    { char: '⇒', name: 'Double right' }, { char: '⇑', name: 'Double up' }, { char: '⇓', name: 'Double down' },
+    { char: '⇔', name: 'Double left-right' }, { char: '➡', name: 'Heavy right' }, { char: '↩', name: 'Return' },
+    { char: '↪', name: 'Curved right' }, { char: '↻', name: 'Clockwise' }, { char: '↺', name: 'Counter-clockwise' },
+  ]},
+  { name: 'Math', symbols: [
+    { char: '∑', name: 'Summation' }, { char: '∏', name: 'Product' }, { char: '∫', name: 'Integral' },
+    { char: '√', name: 'Square root' }, { char: '∂', name: 'Partial diff' }, { char: '∇', name: 'Nabla' },
+    { char: '∈', name: 'Element of' }, { char: '∉', name: 'Not element' }, { char: '⊂', name: 'Subset' },
+    { char: '⊃', name: 'Superset' }, { char: '∪', name: 'Union' }, { char: '∩', name: 'Intersection' },
+    { char: '∧', name: 'And' }, { char: '∨', name: 'Or' }, { char: '¬', name: 'Not' },
+    { char: '∀', name: 'For all' }, { char: '∃', name: 'Exists' }, { char: '∅', name: 'Empty set' },
+    { char: '∝', name: 'Proportional' }, { char: '∠', name: 'Angle' },
+  ]},
+  { name: 'Greek', symbols: [
+    { char: 'α', name: 'alpha' }, { char: 'β', name: 'beta' }, { char: 'γ', name: 'gamma' },
+    { char: 'δ', name: 'delta' }, { char: 'ε', name: 'epsilon' }, { char: 'ζ', name: 'zeta' },
+    { char: 'η', name: 'eta' }, { char: 'θ', name: 'theta' }, { char: 'λ', name: 'lambda' },
+    { char: 'μ', name: 'mu' }, { char: 'π', name: 'pi' }, { char: 'ρ', name: 'rho' },
+    { char: 'σ', name: 'sigma' }, { char: 'τ', name: 'tau' }, { char: 'φ', name: 'phi' },
+    { char: 'ψ', name: 'psi' }, { char: 'ω', name: 'omega' }, { char: 'Δ', name: 'Delta' },
+    { char: 'Σ', name: 'Sigma' }, { char: 'Ω', name: 'Omega' }, { char: 'Π', name: 'Pi' },
+    { char: 'Φ', name: 'Phi' }, { char: 'Ψ', name: 'Psi' }, { char: 'Θ', name: 'Theta' },
+  ]},
+  { name: 'Currency', symbols: [
+    { char: '$', name: 'Dollar' }, { char: '€', name: 'Euro' }, { char: '£', name: 'Pound' },
+    { char: '¥', name: 'Yen' }, { char: '₹', name: 'Rupee' }, { char: '₽', name: 'Ruble' },
+    { char: '₩', name: 'Won' }, { char: '₿', name: 'Bitcoin' }, { char: '¢', name: 'Cent' },
+    { char: '₫', name: 'Dong' }, { char: '₺', name: 'Lira' }, { char: '₴', name: 'Hryvnia' },
+  ]},
+  { name: 'Shapes', symbols: [
+    { char: '■', name: 'Black square' }, { char: '□', name: 'White square' }, { char: '▲', name: 'Up triangle' },
+    { char: '▼', name: 'Down triangle' }, { char: '●', name: 'Black circle' }, { char: '○', name: 'White circle' },
+    { char: '◆', name: 'Black diamond' }, { char: '◇', name: 'White diamond' }, { char: '★', name: 'Black star' },
+    { char: '☆', name: 'White star' }, { char: '♠', name: 'Spade' }, { char: '♥', name: 'Heart' },
+    { char: '♦', name: 'Diamond' }, { char: '♣', name: 'Club' }, { char: '✓', name: 'Check mark' },
+    { char: '✗', name: 'Ballot X' }, { char: '✦', name: 'Four pointed star' }, { char: '◌', name: 'Dotted circle' },
+  ]},
+];
+
+const allSymbols = computed<SymbolEntry[]>(() => {
+  const result: SymbolEntry[] = [];
+  for (const cat of categories) {
+    for (const sym of cat.symbols) {
+      result.push({ ...sym, category: cat.name });
+    }
+  }
+  return result;
+});
+
+const displayedSymbols = computed(() => {
+  if (search.value) {
+    const q = search.value.toLowerCase();
+    return allSymbols.value.filter(s =>
+      s.name.toLowerCase().includes(q) || s.char === q
+    );
+  }
+  const cat = categories.find(c => c.name === activeCategory.value);
+  return cat ? cat.symbols.map(s => ({ ...s, category: cat.name })) : [];
+});
+
+watch(() => props.isOpen, async (open) => {
+  if (open) {
+    await nextTick();
+    searchRef.value?.focus();
+  }
+});
+
+function close() { emit('close'); }
+
+function insertSymbol(sym: string) {
+  if (!sym) return;
+  // Track recent
+  recentSymbols.value = [sym, ...recentSymbols.value.filter(s => s !== sym)].slice(0, 10);
+  emit('insert', sym);
+}
+</script>
+
+<style scoped>
+.dialog-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 300; display: flex; align-items: center; justify-content: center; }
+.dialog { background: #fff; border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,0.2); max-width: 90vw; }
+.symbol-dialog { width: 480px; }
+.dialog__header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; }
+.dialog__title { font-weight: 600; font-size: 14px; color: #1f2937; }
+.dialog__close { border: none; background: transparent; cursor: pointer; font-size: 14px; color: #6b7280; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 4px; }
+.dialog__close:hover { background: #f3f4f6; }
+.dialog__body { padding: 16px; }
+.dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
+.dialog__btn { padding: 6px 16px; border: 1px solid #d1d5db; border-radius: 4px; cursor: pointer; font-size: 13px; background: #fff; }
+.dialog__btn--primary { background: #3b82f6; color: #fff; border-color: #3b82f6; }
+.dialog__btn--primary:hover { background: #2563eb; }
+.dialog__btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.symbol-search { width: 100%; padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; outline: none; box-sizing: border-box; margin-bottom: 8px; }
+.symbol-search:focus { border-color: #3b82f6; }
+
+.symbol-tabs { display: flex; gap: 2px; margin-bottom: 8px; flex-wrap: wrap; }
+.symbol-tab { padding: 4px 8px; border: none; border-radius: 4px; background: transparent; cursor: pointer; font-size: 11px; color: #6b7280; }
+.symbol-tab:hover { background: #f3f4f6; }
+.symbol-tab.active { background: #e0e7ff; color: #3730a3; font-weight: 600; }
+
+.symbol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 2px; max-height: 240px; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 4px; padding: 4px; }
+.symbol-cell { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 4px; cursor: pointer; font-size: 18px; background: transparent; }
+.symbol-cell:hover { background: #f3f4f6; border-color: #d1d5db; }
+.symbol-cell.selected { background: #dbeafe; border-color: #3b82f6; }
+.symbol-cell--small { width: 28px; height: 28px; font-size: 14px; }
+.symbol-empty { grid-column: 1/-1; text-align: center; padding: 24px; color: #9ca3af; font-size: 13px; }
+
+.symbol-preview { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 8px 12px; background: #f9fafb; border-radius: 4px; }
+.symbol-preview__char { font-size: 28px; }
+.symbol-preview__info { font-size: 12px; color: #6b7280; font-family: monospace; }
+
+.symbol-recent { display: flex; align-items: center; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
+.symbol-recent__label { font-size: 11px; color: #9ca3af; margin-right: 4px; }
+</style>
diff --git a/packages/vue/src/components/InsertTableDialog.vue b/packages/vue/src/components/InsertTableDialog.vue
new file mode 100644
index 00000000..6cb1b3ca
--- /dev/null
+++ b/packages/vue/src/components/InsertTableDialog.vue
@@ -0,0 +1,76 @@
+<template>
+  <div v-if="isOpen" class="dialog-overlay" @mousedown.self="close">
+    <div class="dialog" @mousedown.stop @keydown.stop>
+      <div class="dialog__header">
+        <span class="dialog__title">Insert Table</span>
+        <button class="dialog__close" @click="close">✕</button>
+      </div>
+      <div class="dialog__body">
+        <!-- Visual grid picker -->
+        <div class="table-grid" @mouseleave="hoverRow = 0; hoverCol = 0">
+          <div v-for="r in 8" :key="r" class="table-grid__row">
+            <div
+              v-for="c in 10" :key="c"
+              class="table-grid__cell"
+              :class="{ highlight: r <= hoverRow && c <= hoverCol }"
+              @mouseenter="hoverRow = r; hoverCol = c"
+              @mousedown.prevent="insert(hoverRow, hoverCol)"
+            ></div>
+          </div>
+        </div>
+        <div class="table-grid__label">{{ hoverRow > 0 ? `${hoverRow} × ${hoverCol}` : 'Select size' }}</div>
+
+        <!-- Manual input -->
+        <div class="table-manual">
+          <label>Rows: <input v-model.number="manualRows" type="number" min="1" max="100" class="table-manual__input" /></label>
+          <label>Columns: <input v-model.number="manualCols" type="number" min="1" max="20" class="table-manual__input" /></label>
+          <button class="dialog__btn dialog__btn--primary" @mousedown.prevent="insert(manualRows, manualCols)">Insert</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+defineProps<{ isOpen: boolean }>();
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'insert', rows: number, cols: number): void;
+}>();
+
+const hoverRow = ref(0);
+const hoverCol = ref(0);
+const manualRows = ref(3);
+const manualCols = ref(3);
+
+function close() { emit('close'); }
+function insert(rows: number, cols: number) {
+  if (rows > 0 && cols > 0) {
+    emit('insert', Math.min(rows, 100), Math.min(cols, 20));
+    close();
+  }
+}
+</script>
+
+<style scoped>
+.dialog-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 300; display: flex; align-items: center; justify-content: center; }
+.dialog { background: #fff; border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,0.2); min-width: 300px; max-width: 90vw; }
+.dialog__header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; }
+.dialog__title { font-weight: 600; font-size: 14px; color: #1f2937; }
+.dialog__close { border: none; background: transparent; cursor: pointer; font-size: 14px; color: #6b7280; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 4px; }
+.dialog__close:hover { background: #f3f4f6; }
+.dialog__body { padding: 16px; }
+.dialog__btn { padding: 6px 16px; border: 1px solid #d1d5db; border-radius: 4px; cursor: pointer; font-size: 13px; background: #fff; }
+.dialog__btn--primary { background: #3b82f6; color: #fff; border-color: #3b82f6; }
+.dialog__btn--primary:hover { background: #2563eb; }
+
+.table-grid { display: inline-flex; flex-direction: column; gap: 2px; padding: 4px; border: 1px solid #e5e7eb; border-radius: 4px; }
+.table-grid__row { display: flex; gap: 2px; }
+.table-grid__cell { width: 20px; height: 20px; border: 1px solid #d1d5db; border-radius: 2px; cursor: pointer; background: #fff; }
+.table-grid__cell.highlight { background: #dbeafe; border-color: #93c5fd; }
+.table-grid__label { text-align: center; margin-top: 6px; font-size: 12px; color: #6b7280; }
+.table-manual { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e5e7eb; font-size: 13px; }
+.table-manual__input { width: 50px; padding: 4px 6px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; }
+</style>
diff --git a/packages/vue/src/components/KeyboardShortcutsDialog.vue b/packages/vue/src/components/KeyboardShortcutsDialog.vue
new file mode 100644
index 00000000..e45b74a2
--- /dev/null
+++ b/packages/vue/src/components/KeyboardShortcutsDialog.vue
@@ -0,0 +1,198 @@
+<template>
+  <div v-if="isOpen" class="kbd-overlay" @mousedown.self="close">
+    <div class="kbd-dialog" @mousedown.stop @keydown.stop>
+      <div class="kbd-dialog__header">
+        <span class="kbd-dialog__title">Keyboard Shortcuts</span>
+        <button class="kbd-dialog__close" @click="close">&#x2715;</button>
+      </div>
+
+      <div class="kbd-dialog__search" v-if="showSearch">
+        <input
+          ref="searchInput"
+          v-model="searchQuery"
+          class="kbd-dialog__search-input"
+          placeholder="Search shortcuts..."
+          type="text"
+        />
+      </div>
+
+      <div class="kbd-dialog__body">
+        <template v-for="cat in filteredCategories" :key="cat.name">
+          <div class="kbd-category">{{ cat.label }}</div>
+          <div
+            v-for="s in cat.shortcuts"
+            :key="s.id"
+            class="kbd-item"
+          >
+            <div class="kbd-item__info">
+              <span class="kbd-item__name">{{ s.name }}</span>
+              <span class="kbd-item__desc">{{ s.description }}</span>
+            </div>
+            <div class="kbd-item__keys">
+              <kbd class="kbd-badge">{{ formatKeys(s.keys) }}</kbd>
+              <template v-if="s.altKeys">
+                <span class="kbd-or">or</span>
+                <kbd class="kbd-badge">{{ formatKeys(s.altKeys) }}</kbd>
+              </template>
+            </div>
+          </div>
+        </template>
+        <div v-if="filteredCategories.length === 0" class="kbd-dialog__empty">
+          No shortcuts match your search
+        </div>
+      </div>
+
+      <div class="kbd-dialog__footer">
+        Press <kbd class="kbd-badge kbd-badge--small">Esc</kbd> to close
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, nextTick } from 'vue';
+
+interface KeyboardShortcut {
+  id: string;
+  name: string;
+  description: string;
+  keys: string;
+  altKeys?: string;
+  category: string;
+}
+
+const props = withDefaults(
+  defineProps<{
+    isOpen: boolean;
+    showSearch?: boolean;
+  }>(),
+  { showSearch: true }
+);
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+}>();
+
+const searchInput = ref<HTMLInputElement | null>(null);
+const searchQuery = ref('');
+
+const isMac = typeof navigator !== 'undefined' && /Mac/.test(navigator.platform);
+
+function formatKeys(keys: string): string {
+  if (isMac) {
+    return keys
+      .replace(/Ctrl/g, '\u2318')
+      .replace(/Alt/g, '\u2325')
+      .replace(/Shift/g, '\u21E7');
+  }
+  return keys;
+}
+
+function close() {
+  searchQuery.value = '';
+  emit('close');
+}
+
+// Focus search input when opened
+watch(() => props.isOpen, (open) => {
+  if (open) {
+    nextTick(() => searchInput.value?.focus());
+  }
+});
+
+const defaultShortcuts: KeyboardShortcut[] = [
+  // Editing
+  { id: 'undo', name: 'Undo', description: 'Undo last action', keys: 'Ctrl+Z', category: 'Editing' },
+  { id: 'redo', name: 'Redo', description: 'Redo last action', keys: 'Ctrl+Y', altKeys: 'Ctrl+Shift+Z', category: 'Editing' },
+  { id: 'find', name: 'Find', description: 'Open find dialog', keys: 'Ctrl+F', category: 'Editing' },
+  { id: 'replace', name: 'Find & Replace', description: 'Open find and replace', keys: 'Ctrl+H', category: 'Editing' },
+  { id: 'delete', name: 'Delete', description: 'Delete selected content', keys: 'Del', altKeys: 'Backspace', category: 'Editing' },
+
+  // Clipboard
+  { id: 'cut', name: 'Cut', description: 'Cut selection', keys: 'Ctrl+X', category: 'Clipboard' },
+  { id: 'copy', name: 'Copy', description: 'Copy selection', keys: 'Ctrl+C', category: 'Clipboard' },
+  { id: 'paste', name: 'Paste', description: 'Paste content', keys: 'Ctrl+V', category: 'Clipboard' },
+
+  // Formatting
+  { id: 'bold', name: 'Bold', description: 'Toggle bold', keys: 'Ctrl+B', category: 'Formatting' },
+  { id: 'italic', name: 'Italic', description: 'Toggle italic', keys: 'Ctrl+I', category: 'Formatting' },
+  { id: 'underline', name: 'Underline', description: 'Toggle underline', keys: 'Ctrl+U', category: 'Formatting' },
+  { id: 'strike', name: 'Strikethrough', description: 'Toggle strikethrough', keys: 'Ctrl+Shift+X', category: 'Formatting' },
+  { id: 'subscript', name: 'Subscript', description: 'Toggle subscript', keys: 'Ctrl+=', category: 'Formatting' },
+  { id: 'superscript', name: 'Superscript', description: 'Toggle superscript', keys: 'Ctrl+Shift+=', category: 'Formatting' },
+  { id: 'alignLeft', name: 'Align Left', description: 'Left alignment', keys: 'Ctrl+L', category: 'Formatting' },
+  { id: 'alignCenter', name: 'Align Center', description: 'Center alignment', keys: 'Ctrl+E', category: 'Formatting' },
+  { id: 'alignRight', name: 'Align Right', description: 'Right alignment', keys: 'Ctrl+R', category: 'Formatting' },
+  { id: 'justify', name: 'Justify', description: 'Justify alignment', keys: 'Ctrl+J', category: 'Formatting' },
+  { id: 'indent', name: 'Increase Indent', description: 'Increase indent level', keys: 'Tab', category: 'Formatting' },
+  { id: 'outdent', name: 'Decrease Indent', description: 'Decrease indent level', keys: 'Shift+Tab', category: 'Formatting' },
+  { id: 'link', name: 'Insert Link', description: 'Insert or edit hyperlink', keys: 'Ctrl+K', category: 'Formatting' },
+
+  // Selection
+  { id: 'selectAll', name: 'Select All', description: 'Select all content', keys: 'Ctrl+A', category: 'Selection' },
+  { id: 'selectWord', name: 'Select Word', description: 'Select current word', keys: 'Double-click', category: 'Selection' },
+  { id: 'selectPara', name: 'Select Paragraph', description: 'Select current paragraph', keys: 'Triple-click', category: 'Selection' },
+
+  // Navigation
+  { id: 'moveWord', name: 'Move by Word', description: 'Jump to next/previous word', keys: 'Ctrl+Arrow', category: 'Navigation' },
+  { id: 'lineStart', name: 'Line Start', description: 'Move to start of line', keys: 'Home', category: 'Navigation' },
+  { id: 'lineEnd', name: 'Line End', description: 'Move to end of line', keys: 'End', category: 'Navigation' },
+  { id: 'docStart', name: 'Document Start', description: 'Move to start of document', keys: 'Ctrl+Home', category: 'Navigation' },
+  { id: 'docEnd', name: 'Document End', description: 'Move to end of document', keys: 'Ctrl+End', category: 'Navigation' },
+
+  // View
+  { id: 'zoomIn', name: 'Zoom In', description: 'Increase zoom level', keys: 'Ctrl++', altKeys: 'Ctrl+=', category: 'View' },
+  { id: 'zoomOut', name: 'Zoom Out', description: 'Decrease zoom level', keys: 'Ctrl+-', category: 'View' },
+  { id: 'zoomReset', name: 'Reset Zoom', description: 'Reset to 100% zoom', keys: 'Ctrl+0', category: 'View' },
+  { id: 'shortcuts', name: 'Keyboard Shortcuts', description: 'Show this dialog', keys: 'Ctrl+/', altKeys: 'F1', category: 'View' },
+];
+
+const categoryOrder = ['Editing', 'Clipboard', 'Formatting', 'Selection', 'Navigation', 'View'];
+
+const filteredCategories = computed(() => {
+  const q = searchQuery.value.toLowerCase().trim();
+  const groups: { name: string; label: string; shortcuts: KeyboardShortcut[] }[] = [];
+
+  for (const cat of categoryOrder) {
+    let shortcuts = defaultShortcuts.filter(s => s.category === cat);
+    if (q) {
+      shortcuts = shortcuts.filter(s =>
+        s.name.toLowerCase().includes(q) ||
+        s.description.toLowerCase().includes(q) ||
+        s.keys.toLowerCase().includes(q) ||
+        (s.altKeys && s.altKeys.toLowerCase().includes(q))
+      );
+    }
+    if (shortcuts.length > 0) {
+      groups.push({ name: cat, label: cat.toUpperCase(), shortcuts });
+    }
+  }
+  return groups;
+});
+</script>
+
+<style scoped>
+.kbd-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 300; display: flex; align-items: center; justify-content: center; }
+.kbd-dialog { background: #fff; border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,0.2); width: 520px; max-width: 90vw; max-height: 80vh; display: flex; flex-direction: column; }
+.kbd-dialog__header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; }
+.kbd-dialog__title { font-weight: 600; font-size: 14px; color: #1f2937; }
+.kbd-dialog__close { border: none; background: transparent; cursor: pointer; font-size: 14px; color: #6b7280; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 4px; }
+.kbd-dialog__close:hover { background: #f3f4f6; }
+.kbd-dialog__search { padding: 8px 16px; border-bottom: 1px solid #e5e7eb; }
+.kbd-dialog__search-input { width: 100%; padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; outline: none; }
+.kbd-dialog__search-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }
+.kbd-dialog__body { flex: 1; overflow-y: auto; padding: 8px 0; }
+.kbd-dialog__empty { padding: 24px 16px; text-align: center; color: #9ca3af; font-size: 13px; }
+.kbd-dialog__footer { padding: 8px 16px; border-top: 1px solid #e5e7eb; text-align: center; font-size: 12px; color: #9ca3af; }
+
+.kbd-category { padding: 8px 16px 4px; font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; }
+.kbd-item { display: flex; align-items: center; justify-content: space-between; padding: 5px 16px; }
+.kbd-item:hover { background: #f9fafb; }
+.kbd-item__info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
+.kbd-item__name { font-size: 13px; color: #1f2937; font-weight: 500; }
+.kbd-item__desc { font-size: 11px; color: #9ca3af; }
+.kbd-item__keys { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
+.kbd-or { font-size: 11px; color: #9ca3af; }
+.kbd-badge { display: inline-block; padding: 2px 6px; background: #f3f4f6; border: 1px solid #d1d5db; border-radius: 4px; font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #374151; white-space: nowrap; }
+.kbd-badge--small { padding: 1px 4px; font-size: 10px; }
+</style>
diff --git a/packages/vue/src/components/MenuBar.vue b/packages/vue/src/components/MenuBar.vue
new file mode 100644
index 00000000..f79d5667
--- /dev/null
+++ b/packages/vue/src/components/MenuBar.vue
@@ -0,0 +1,122 @@
+<template>
+  <div class="menu-bar">
+    <!-- File menu -->
+    <div class="menu-bar__dropdown" ref="fileRef">
+      <button class="menu-bar__trigger" @mousedown.prevent="toggle('file')">File</button>
+      <div v-if="openMenu === 'file'" class="menu-bar__menu">
+        <button class="menu-bar__item" @mousedown.prevent="act('print')">Print</button>
+        <button class="menu-bar__item" @mousedown.prevent="act('pageSetup')">Page setup</button>
+      </div>
+    </div>
+
+    <!-- Format menu -->
+    <div class="menu-bar__dropdown" ref="formatRef">
+      <button class="menu-bar__trigger" @mousedown.prevent="toggle('format')">Format</button>
+      <div v-if="openMenu === 'format'" class="menu-bar__menu">
+        <button class="menu-bar__item" @mousedown.prevent="act('clearFormatting')">Clear formatting</button>
+        <div class="menu-bar__divider" />
+        <button class="menu-bar__item" @mousedown.prevent="act('dirLTR')">Left to Right</button>
+        <button class="menu-bar__item" @mousedown.prevent="act('dirRTL')">Right to Left</button>
+      </div>
+    </div>
+
+    <!-- Insert menu -->
+    <div class="menu-bar__dropdown" ref="insertRef">
+      <button class="menu-bar__trigger" @mousedown.prevent="toggle('insert')">Insert</button>
+      <div v-if="openMenu === 'insert'" class="menu-bar__menu">
+        <button class="menu-bar__item" @mousedown.prevent="act('insertImage')">Image</button>
+        <button class="menu-bar__item" @mousedown.prevent="act('insertTable')">Table</button>
+        <button class="menu-bar__item" @mousedown.prevent="act('insertLink')">Link</button>
+        <button class="menu-bar__item" @mousedown.prevent="act('insertSymbol')">Symbol</button>
+        <div class="menu-bar__divider" />
+        <button class="menu-bar__item" @mousedown.prevent="act('insertPageBreak')">Page break</button>
+        <button class="menu-bar__item" @mousedown.prevent="act('insertTOC')">Table of Contents</button>
+      </div>
+    </div>
+
+    <!-- View menu -->
+    <div class="menu-bar__dropdown" ref="viewRef">
+      <button class="menu-bar__trigger" @mousedown.prevent="toggle('view')">View</button>
+      <div v-if="openMenu === 'view'" class="menu-bar__menu">
+        <button class="menu-bar__item" @mousedown.prevent="act('outline')">Document outline</button>
+        <button class="menu-bar__item" @mousedown.prevent="act('sidebar')">Comments & Changes</button>
+        <div class="menu-bar__divider" />
+        <button class="menu-bar__item" @mousedown.prevent="act('shortcuts')">Keyboard shortcuts</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+
+const emit = defineEmits<{
+  (e: 'action', action: string): void;
+}>();
+
+const openMenu = ref<string | null>(null);
+const fileRef = ref<HTMLElement | null>(null);
+const formatRef = ref<HTMLElement | null>(null);
+const insertRef = ref<HTMLElement | null>(null);
+const viewRef = ref<HTMLElement | null>(null);
+
+function toggle(name: string) {
+  openMenu.value = openMenu.value === name ? null : name;
+}
+
+function act(action: string) {
+  openMenu.value = null;
+  emit('action', action);
+}
+
+function handleClickOutside(e: MouseEvent) {
+  const target = e.target as Node;
+  const refs = [fileRef, formatRef, insertRef, viewRef];
+  if (!refs.some(r => r.value?.contains(target))) {
+    openMenu.value = null;
+  }
+}
+
+onMounted(() => document.addEventListener('mousedown', handleClickOutside));
+onBeforeUnmount(() => document.removeEventListener('mousedown', handleClickOutside));
+</script>
+
+<style scoped>
+.menu-bar { display: flex; align-items: center; gap: 0; padding: 0 4px; }
+.menu-bar__dropdown { position: relative; }
+.menu-bar__trigger {
+  padding: 4px 10px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 13px;
+  color: #374151;
+  border-radius: 4px;
+}
+.menu-bar__trigger:hover { background: #f1f5f9; }
+.menu-bar__menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 200;
+  background: #fff;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
+  min-width: 180px;
+  padding: 4px 0;
+}
+.menu-bar__item {
+  display: block;
+  width: 100%;
+  padding: 6px 14px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+  font-size: 13px;
+  color: #1f2937;
+}
+.menu-bar__item:hover { background: #f3f4f6; }
+.menu-bar__divider { height: 1px; background: #e5e7eb; margin: 4px 8px; }
+</style>
diff --git a/packages/vue/src/components/PageSetupDialog.vue b/packages/vue/src/components/PageSetupDialog.vue
new file mode 100644
index 00000000..7e49615d
--- /dev/null
+++ b/packages/vue/src/components/PageSetupDialog.vue
@@ -0,0 +1,183 @@
+<template>
+  <div v-if="isOpen" class="dialog-overlay" @mousedown.self="close">
+    <div class="dialog" @mousedown.stop @keydown.stop>
+      <div class="dialog__header">
+        <span class="dialog__title">Page Setup</span>
+        <button class="dialog__close" @click="close">✕</button>
+      </div>
+      <div class="dialog__body">
+        <!-- Page size -->
+        <div class="field">
+          <label class="field__label">Page size</label>
+          <select v-model="selectedSize" class="field__select" @change="onSizeChange">
+            <option v-for="s in pageSizes" :key="s.label" :value="s.label">{{ s.label }}</option>
+            <option value="custom">Custom</option>
+          </select>
+        </div>
+
+        <!-- Custom dimensions -->
+        <div class="field field-row" v-if="selectedSize === 'custom'">
+          <label>Width: <input v-model.number="widthInches" type="number" min="1" max="22" step="0.1" class="field__input--small" /> in</label>
+          <label>Height: <input v-model.number="heightInches" type="number" min="1" max="22" step="0.1" class="field__input--small" /> in</label>
+        </div>
+
+        <!-- Orientation -->
+        <div class="field">
+          <label class="field__label">Orientation</label>
+          <div class="orientation-group">
+            <button
+              class="orientation-btn"
+              :class="{ active: orientation === 'portrait' }"
+              @mousedown.prevent="setOrientation('portrait')"
+            >📄 Portrait</button>
+            <button
+              class="orientation-btn"
+              :class="{ active: orientation === 'landscape' }"
+              @mousedown.prevent="setOrientation('landscape')"
+            >📄 Landscape</button>
+          </div>
+        </div>
+
+        <!-- Margins -->
+        <div class="field">
+          <label class="field__label">Margins (inches)</label>
+          <div class="margins-grid">
+            <label>Top: <input v-model.number="marginTop" type="number" min="0" max="5" step="0.1" class="field__input--small" /></label>
+            <label>Bottom: <input v-model.number="marginBottom" type="number" min="0" max="5" step="0.1" class="field__input--small" /></label>
+            <label>Left: <input v-model.number="marginLeft" type="number" min="0" max="5" step="0.1" class="field__input--small" /></label>
+            <label>Right: <input v-model.number="marginRight" type="number" min="0" max="5" step="0.1" class="field__input--small" /></label>
+          </div>
+        </div>
+
+        <div class="dialog__actions">
+          <button class="dialog__btn" @click="close">Cancel</button>
+          <button class="dialog__btn dialog__btn--primary" @mousedown.prevent="apply">Apply</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import type { SectionProperties } from '@eigenpal/docx-core/types/document';
+
+const TWIPS_PER_INCH = 1440;
+
+const props = defineProps<{
+  isOpen: boolean;
+  sectionProperties?: SectionProperties | null;
+}>();
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'apply', props: Partial<SectionProperties>): void;
+}>();
+
+const pageSizes = [
+  { label: 'Letter (8.5" × 11")', width: 12240, height: 15840 },
+  { label: 'A4 (210mm × 297mm)', width: 11906, height: 16838 },
+  { label: 'Legal (8.5" × 14")', width: 12240, height: 20160 },
+  { label: 'A3', width: 16838, height: 23811 },
+  { label: 'A5', width: 8391, height: 11906 },
+];
+
+const selectedSize = ref('Letter (8.5" × 11")');
+const orientation = ref<'portrait' | 'landscape'>('portrait');
+const widthInches = ref(8.5);
+const heightInches = ref(11);
+const marginTop = ref(1.0);
+const marginBottom = ref(1.0);
+const marginLeft = ref(1.0);
+const marginRight = ref(1.0);
+
+function twipsToInches(twips: number): number {
+  return Math.round((twips / TWIPS_PER_INCH) * 10) / 10;
+}
+
+function inchesToTwips(inches: number): number {
+  return Math.round(inches * TWIPS_PER_INCH);
+}
+
+watch(() => props.isOpen, (open) => {
+  if (!open) return;
+  const sp = props.sectionProperties;
+  if (sp) {
+    const w = sp.pageWidth || 12240;
+    const h = sp.pageHeight || 15840;
+    widthInches.value = twipsToInches(w);
+    heightInches.value = twipsToInches(h);
+    orientation.value = w > h ? 'landscape' : 'portrait';
+    marginTop.value = twipsToInches(sp.marginTop || 1440);
+    marginBottom.value = twipsToInches(sp.marginBottom || 1440);
+    marginLeft.value = twipsToInches(sp.marginLeft || 1440);
+    marginRight.value = twipsToInches(sp.marginRight || 1440);
+
+    // Try to match a preset
+    const match = pageSizes.find(s =>
+      (s.width === w && s.height === h) || (s.width === h && s.height === w)
+    );
+    selectedSize.value = match?.label || 'custom';
+  }
+});
+
+function onSizeChange() {
+  const preset = pageSizes.find(s => s.label === selectedSize.value);
+  if (preset) {
+    if (orientation.value === 'landscape') {
+      widthInches.value = twipsToInches(preset.height);
+      heightInches.value = twipsToInches(preset.width);
+    } else {
+      widthInches.value = twipsToInches(preset.width);
+      heightInches.value = twipsToInches(preset.height);
+    }
+  }
+}
+
+function setOrientation(o: 'portrait' | 'landscape') {
+  if (o === orientation.value) return;
+  orientation.value = o;
+  // Swap width and height
+  const tmp = widthInches.value;
+  widthInches.value = heightInches.value;
+  heightInches.value = tmp;
+}
+
+function close() { emit('close'); }
+
+function apply() {
+  emit('apply', {
+    pageWidth: inchesToTwips(widthInches.value),
+    pageHeight: inchesToTwips(heightInches.value),
+    marginTop: inchesToTwips(marginTop.value),
+    marginBottom: inchesToTwips(marginBottom.value),
+    marginLeft: inchesToTwips(marginLeft.value),
+    marginRight: inchesToTwips(marginRight.value),
+  });
+  close();
+}
+</script>
+
+<style scoped>
+.dialog-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 300; display: flex; align-items: center; justify-content: center; }
+.dialog { background: #fff; border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,0.2); min-width: 380px; max-width: 90vw; }
+.dialog__header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; }
+.dialog__title { font-weight: 600; font-size: 14px; color: #1f2937; }
+.dialog__close { border: none; background: transparent; cursor: pointer; font-size: 14px; color: #6b7280; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 4px; }
+.dialog__close:hover { background: #f3f4f6; }
+.dialog__body { padding: 16px; }
+.dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
+.dialog__btn { padding: 6px 16px; border: 1px solid #d1d5db; border-radius: 4px; cursor: pointer; font-size: 13px; background: #fff; }
+.dialog__btn--primary { background: #3b82f6; color: #fff; border-color: #3b82f6; }
+.dialog__btn--primary:hover { background: #2563eb; }
+
+.field { margin-bottom: 14px; }
+.field__label { display: block; font-size: 12px; font-weight: 500; color: #374151; margin-bottom: 4px; }
+.field__select { width: 100%; padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; background: #fff; }
+.field__input--small { width: 60px; padding: 4px 6px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 12px; }
+.field-row { display: flex; gap: 12px; font-size: 12px; color: #4b5563; }
+.orientation-group { display: flex; gap: 8px; }
+.orientation-btn { padding: 8px 16px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; cursor: pointer; font-size: 13px; }
+.orientation-btn.active { background: #e0e7ff; border-color: #818cf8; color: #3730a3; }
+.margins-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 12px; color: #4b5563; }
+</style>
diff --git a/packages/vue/src/components/PasteSpecialDialog.vue b/packages/vue/src/components/PasteSpecialDialog.vue
new file mode 100644
index 00000000..9fce8966
--- /dev/null
+++ b/packages/vue/src/components/PasteSpecialDialog.vue
@@ -0,0 +1,98 @@
+<template>
+  <div v-if="isOpen" class="psd-overlay" @mousedown.self="$emit('close')">
+    <div class="psd-dialog" @keydown.escape="$emit('close')" @keydown.enter="apply">
+      <div class="psd-dialog__header">Paste Special</div>
+
+      <div class="psd-dialog__body">
+        <div class="psd-preview" v-if="clipboardPreview">
+          <span class="psd-preview__label">Clipboard content:</span>
+          <span class="psd-preview__text">{{ clipboardPreview }}</span>
+        </div>
+
+        <div class="psd-options">
+          <label class="psd-option" :class="{ 'psd-option--selected': pasteMode === 'formatted' }">
+            <input type="radio" v-model="pasteMode" value="formatted" />
+            <div class="psd-option__info">
+              <span class="psd-option__name">Formatted text</span>
+              <span class="psd-option__desc">Keep original formatting from source</span>
+            </div>
+          </label>
+          <label class="psd-option" :class="{ 'psd-option--selected': pasteMode === 'plain' }">
+            <input type="radio" v-model="pasteMode" value="plain" />
+            <div class="psd-option__info">
+              <span class="psd-option__name">Plain text</span>
+              <span class="psd-option__desc">Strip all formatting</span>
+            </div>
+          </label>
+        </div>
+      </div>
+
+      <div class="psd-dialog__footer">
+        <button class="psd-btn" @click="$emit('close')">Cancel</button>
+        <button class="psd-btn psd-btn--primary" @click="apply">Paste</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue';
+
+const props = defineProps<{
+  isOpen: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'paste', mode: 'formatted' | 'plain'): void;
+}>();
+
+const pasteMode = ref<'formatted' | 'plain'>('formatted');
+const clipboardPreview = ref('');
+
+watch(() => props.isOpen, async (open) => {
+  if (!open) return;
+  pasteMode.value = 'formatted';
+  try {
+    const text = await navigator.clipboard.readText();
+    clipboardPreview.value = text.length > 80 ? text.slice(0, 80) + '...' : text;
+  } catch {
+    clipboardPreview.value = '';
+  }
+});
+
+function apply() {
+  emit('paste', pasteMode.value);
+  emit('close');
+}
+</script>
+
+<style scoped>
+.psd-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 10000; }
+.psd-dialog { background: #fff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); width: 380px; max-width: 90vw; }
+.psd-dialog__header { padding: 16px 20px 12px; border-bottom: 1px solid #e5e7eb; font-size: 16px; font-weight: 600; color: #1f2937; }
+.psd-dialog__body { padding: 16px 20px; }
+.psd-dialog__footer { padding: 12px 20px 16px; border-top: 1px solid #e5e7eb; display: flex; justify-content: flex-end; gap: 8px; }
+.psd-preview { padding: 8px 10px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 4px; margin-bottom: 12px; }
+.psd-preview__label { display: block; font-size: 11px; color: #9ca3af; margin-bottom: 4px; }
+.psd-preview__text { font-size: 12px; color: #374151; font-family: ui-monospace, monospace; word-break: break-all; }
+.psd-options { display: flex; flex-direction: column; gap: 6px; }
+.psd-option {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 10px 12px;
+  border: 2px solid #e5e7eb;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: border-color 0.15s;
+}
+.psd-option:hover { border-color: #d1d5db; }
+.psd-option--selected { border-color: #3b82f6; background: #eff6ff; }
+.psd-option input { margin-top: 2px; }
+.psd-option__info { display: flex; flex-direction: column; }
+.psd-option__name { font-size: 13px; font-weight: 500; color: #1f2937; }
+.psd-option__desc { font-size: 11px; color: #9ca3af; }
+.psd-btn { padding: 6px 16px; font-size: 13px; border: 1px solid #d1d5db; border-radius: 4px; cursor: pointer; background: #fff; }
+.psd-btn--primary { background: #1a73e8; color: #fff; border-color: #1a73e8; }
+</style>
diff --git a/packages/vue/src/components/PrintButton.vue b/packages/vue/src/components/PrintButton.vue
new file mode 100644
index 00000000..31e2ff20
--- /dev/null
+++ b/packages/vue/src/components/PrintButton.vue
@@ -0,0 +1,54 @@
+<template>
+  <button
+    class="print-btn"
+    :disabled="disabled"
+    :title="label"
+    @mousedown.prevent="handlePrint"
+  >
+    {{ compact ? '' : label }}
+    <span v-if="compact" class="print-btn__icon">&#x1F5A8;</span>
+  </button>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean;
+    label?: string;
+    compact?: boolean;
+  }>(),
+  {
+    disabled: false,
+    label: 'Print',
+    compact: false,
+  }
+);
+
+const emit = defineEmits<{
+  (e: 'print'): void;
+}>();
+
+function handlePrint() {
+  if (props.disabled) return;
+  emit('print');
+  window.print();
+}
+</script>
+
+<style scoped>
+.print-btn {
+  padding: 4px 12px;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  background: #fff;
+  cursor: pointer;
+  font-size: 13px;
+  color: #374151;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.print-btn:hover:not(:disabled) { background: #f3f4f6; }
+.print-btn:disabled { opacity: 0.5; cursor: default; }
+.print-btn__icon { font-size: 14px; }
+</style>
diff --git a/packages/vue/src/components/ResponsiveToolbar.vue b/packages/vue/src/components/ResponsiveToolbar.vue
new file mode 100644
index 00000000..8d08dd91
--- /dev/null
+++ b/packages/vue/src/components/ResponsiveToolbar.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="responsive-toolbar" ref="containerRef">
+    <div class="responsive-toolbar__items" ref="itemsRef">
+      <slot />
+    </div>
+    <div v-if="overflowCount > 0" class="responsive-toolbar__overflow" ref="overflowRef">
+      <button
+        class="responsive-toolbar__overflow-btn"
+        @mousedown.prevent="showOverflow = !showOverflow"
+        :title="`${overflowCount} more items`"
+      >
+        &#x22EF;
+      </button>
+      <div v-if="showOverflow" class="responsive-toolbar__overflow-menu">
+        <slot name="overflow" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
+
+const containerRef = ref<HTMLElement | null>(null);
+const itemsRef = ref<HTMLElement | null>(null);
+const overflowRef = ref<HTMLElement | null>(null);
+const overflowCount = ref(0);
+const showOverflow = ref(false);
+
+let observer: ResizeObserver | null = null;
+
+function updateOverflow() {
+  const container = containerRef.value;
+  const items = itemsRef.value;
+  if (!container || !items) return;
+
+  const containerWidth = container.clientWidth - 40; // reserve space for overflow button
+  const children = Array.from(items.children) as HTMLElement[];
+  let visibleCount = 0;
+
+  for (const child of children) {
+    child.style.display = '';
+  }
+
+  let usedWidth = 0;
+  for (const child of children) {
+    usedWidth += child.offsetWidth + 2; // 2px gap
+    if (usedWidth > containerWidth) {
+      child.style.display = 'none';
+    } else {
+      visibleCount++;
+    }
+  }
+
+  overflowCount.value = children.length - visibleCount;
+}
+
+function handleClickOutside(e: MouseEvent) {
+  const target = e.target as Node;
+  if (!overflowRef.value?.contains(target)) {
+    showOverflow.value = false;
+  }
+}
+
+onMounted(() => {
+  observer = new ResizeObserver(() => {
+    nextTick(updateOverflow);
+  });
+  if (containerRef.value) {
+    observer.observe(containerRef.value);
+  }
+  nextTick(updateOverflow);
+  document.addEventListener('mousedown', handleClickOutside);
+});
+
+onBeforeUnmount(() => {
+  observer?.disconnect();
+  document.removeEventListener('mousedown', handleClickOutside);
+});
+</script>
+
+<style scoped>
+.responsive-toolbar {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  min-height: 40px;
+}
+.responsive-toolbar__items {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex: 1;
+  overflow: hidden;
+}
+.responsive-toolbar__overflow {
+  position: relative;
+  flex-shrink: 0;
+}
+.responsive-toolbar__overflow-btn {
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 16px;
+  color: #6b7280;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.responsive-toolbar__overflow-btn:hover { background: #f1f5f9; }
+.responsive-toolbar__overflow-menu {
+  position: absolute;
+  right: 0;
+  top: 100%;
+  z-index: 200;
+  background: #fff;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
+  padding: 8px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  min-width: 200px;
+  max-width: 400px;
+}
+</style>
diff --git a/packages/vue/src/components/TablePropertiesDialog.vue b/packages/vue/src/components/TablePropertiesDialog.vue
new file mode 100644
index 00000000..e14b6b2b
--- /dev/null
+++ b/packages/vue/src/components/TablePropertiesDialog.vue
@@ -0,0 +1,95 @@
+<template>
+  <div v-if="isOpen" class="tpd-overlay" @mousedown.self="$emit('close')">
+    <div class="tpd-dialog" @keydown.escape="$emit('close')" @keydown.enter="apply">
+      <div class="tpd-dialog__header">Table Properties</div>
+      <div class="tpd-dialog__body">
+        <div class="tpd-row">
+          <label class="tpd-label">Width type</label>
+          <select v-model="widthType" class="tpd-select">
+            <option value="auto">Auto</option>
+            <option value="dxa">Fixed (twips)</option>
+            <option value="pct">Percentage</option>
+          </select>
+        </div>
+        <div v-if="widthType !== 'auto'" class="tpd-row">
+          <label class="tpd-label">Width</label>
+          <input v-model.number="width" type="number" class="tpd-input" :min="0" :step="widthType === 'pct' ? 5 : 100" />
+          <span class="tpd-unit">{{ widthType === 'pct' ? '50ths of %' : 'twips' }}</span>
+        </div>
+        <div class="tpd-row">
+          <label class="tpd-label">Alignment</label>
+          <select v-model="justification" class="tpd-select">
+            <option value="left">Left</option>
+            <option value="center">Center</option>
+            <option value="right">Right</option>
+          </select>
+        </div>
+      </div>
+      <div class="tpd-dialog__footer">
+        <button class="tpd-btn" @click="$emit('close')">Cancel</button>
+        <button class="tpd-btn tpd-btn--primary" @click="apply">Apply</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+export interface TableProperties {
+  width?: number | null;
+  widthType?: string | null;
+  justification?: 'left' | 'center' | 'right' | null;
+}
+
+const props = defineProps<{
+  isOpen: boolean;
+  currentProps?: { width?: number; widthType?: string; justification?: string };
+}>();
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'apply', props: TableProperties): void;
+}>();
+
+const width = ref(0);
+const widthType = ref('auto');
+const justification = ref('left');
+
+watch(() => props.isOpen, (open) => {
+  if (open) {
+    width.value = props.currentProps?.width ?? 0;
+    widthType.value = props.currentProps?.widthType ?? 'auto';
+    justification.value = props.currentProps?.justification ?? 'left';
+  }
+});
+
+function apply() {
+  const result: TableProperties = {
+    justification: justification.value as 'left' | 'center' | 'right',
+  };
+  if (widthType.value === 'auto') {
+    result.width = null;
+    result.widthType = 'auto';
+  } else {
+    result.width = width.value;
+    result.widthType = widthType.value;
+  }
+  emit('apply', result);
+  emit('close');
+}
+</script>
+
+<style scoped>
+.tpd-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 10000; }
+.tpd-dialog { background: #fff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); min-width: 360px; max-width: 440px; width: 100%; }
+.tpd-dialog__header { padding: 16px 20px 12px; border-bottom: 1px solid #e5e7eb; font-size: 16px; font-weight: 600; color: #1f2937; }
+.tpd-dialog__body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
+.tpd-dialog__footer { padding: 12px 20px 16px; border-top: 1px solid #e5e7eb; display: flex; justify-content: flex-end; gap: 8px; }
+.tpd-row { display: flex; align-items: center; gap: 12px; }
+.tpd-label { width: 80px; font-size: 13px; color: #6b7280; }
+.tpd-input, .tpd-select { flex: 1; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; }
+.tpd-unit { font-size: 11px; color: #9ca3af; }
+.tpd-btn { padding: 6px 16px; font-size: 13px; border: 1px solid #d1d5db; border-radius: 4px; cursor: pointer; background: #fff; }
+.tpd-btn--primary { background: #1a73e8; color: #fff; border-color: #1a73e8; }
+</style>
diff --git a/packages/vue/src/components/TableStyleGallery.vue b/packages/vue/src/components/TableStyleGallery.vue
new file mode 100644
index 00000000..9a06e4d9
--- /dev/null
+++ b/packages/vue/src/components/TableStyleGallery.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="tsg">
+    <div class="tsg__grid">
+      <button
+        v-for="preset in BUILTIN_STYLES"
+        :key="preset.id"
+        :class="['tsg__item', { 'tsg__item--selected': currentStyleId === preset.id }]"
+        :title="preset.name"
+        @mousedown.prevent="$emit('apply', preset.id)"
+      >
+        <div class="tsg__preview">
+          <div
+            v-for="(cell, idx) in getPreviewCells(preset)"
+            :key="idx"
+            class="tsg__cell"
+            :style="cell"
+          />
+        </div>
+        <span class="tsg__name">{{ preset.name }}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { CSSProperties } from 'vue';
+
+interface TableStylePreset {
+  id: string;
+  name: string;
+  tableBorders?: Record<string, { style: string; size?: number; color?: { rgb: string } } | undefined>;
+  conditionals?: Record<string, { backgroundColor?: string; bold?: boolean; color?: string; borders?: Record<string, { style: string; size?: number; color?: { rgb: string } } | null | undefined> }>;
+  look?: { firstRow?: boolean; lastRow?: boolean; firstCol?: boolean; lastCol?: boolean; noHBand?: boolean; noVBand?: boolean };
+}
+
+defineProps<{
+  currentStyleId?: string | null;
+}>();
+
+defineEmits<{
+  (e: 'apply', styleId: string): void;
+}>();
+
+const border1 = (rgb: string) => ({ style: 'single' as const, size: 4, color: { rgb } });
+
+const BUILTIN_STYLES: TableStylePreset[] = [
+  { id: 'TableNormal', name: 'Normal Table', look: { firstRow: false, noHBand: true, noVBand: true } },
+  { id: 'TableGrid', name: 'Table Grid', tableBorders: { top: border1('000000'), bottom: border1('000000'), left: border1('000000'), right: border1('000000'), insideH: border1('000000'), insideV: border1('000000') }, look: { firstRow: false, noHBand: true, noVBand: true } },
+  { id: 'TableGridLight', name: 'Grid Table Light', tableBorders: { top: border1('BFBFBF'), bottom: border1('BFBFBF'), left: border1('BFBFBF'), right: border1('BFBFBF'), insideH: border1('BFBFBF'), insideV: border1('BFBFBF') }, look: { firstRow: true, noHBand: true }, conditionals: { firstRow: { bold: true, borders: { bottom: border1('000000') } } } },
+  { id: 'PlainTable1', name: 'Plain Table 1', tableBorders: { top: border1('BFBFBF'), bottom: border1('BFBFBF'), insideH: border1('BFBFBF') }, look: { firstRow: true, noHBand: true }, conditionals: { firstRow: { bold: true } } },
+  { id: 'PlainTable2', name: 'Plain Table 2', look: { firstRow: true, noHBand: false }, conditionals: { firstRow: { bold: true, borders: { bottom: border1('7F7F7F') } }, band1Horz: { backgroundColor: '#F2F2F2' } } },
+  { id: 'PlainTable3', name: 'Plain Table 3', look: { firstRow: true, noHBand: false }, conditionals: { firstRow: { bold: true, color: '#FFFFFF', backgroundColor: '#A5A5A5' }, band1Horz: { backgroundColor: '#E7E7E7' } } },
+  { id: 'PlainTable4', name: 'Plain Table 4', look: { firstRow: true, noHBand: false }, conditionals: { firstRow: { bold: true, color: '#FFFFFF', backgroundColor: '#000000' }, band1Horz: { backgroundColor: '#F2F2F2' } } },
+  { id: 'GridTable1Light-Accent1', name: 'Grid Table 1 Light', tableBorders: { top: border1('B4C6E7'), bottom: border1('B4C6E7'), left: border1('B4C6E7'), right: border1('B4C6E7'), insideH: border1('B4C6E7'), insideV: border1('B4C6E7') }, look: { firstRow: true, noHBand: true }, conditionals: { firstRow: { bold: true, borders: { bottom: border1('4472C4') } } } },
+  { id: 'GridTable4-Accent1', name: 'Grid Table 4 Blue', tableBorders: { top: border1('4472C4'), bottom: border1('4472C4'), left: border1('4472C4'), right: border1('4472C4'), insideH: border1('4472C4'), insideV: border1('4472C4') }, look: { firstRow: true, noHBand: false }, conditionals: { firstRow: { bold: true, color: '#FFFFFF', backgroundColor: '#4472C4' }, band1Horz: { backgroundColor: '#D6E4F0' } } },
+  { id: 'GridTable5Dark-Accent1', name: 'Grid Table 5 Dark', tableBorders: { top: border1('FFFFFF'), bottom: border1('FFFFFF'), left: border1('FFFFFF'), right: border1('FFFFFF'), insideH: border1('FFFFFF'), insideV: border1('FFFFFF') }, look: { firstRow: true, noHBand: false }, conditionals: { firstRow: { bold: true, color: '#FFFFFF', backgroundColor: '#4472C4' }, band1Horz: { backgroundColor: '#D6E4F0' }, band2Horz: { backgroundColor: '#B4C6E7' } } },
+  { id: 'ListTable3-Accent2', name: 'List Table 3 Orange', tableBorders: { top: border1('ED7D31'), bottom: border1('ED7D31') }, look: { firstRow: true, noHBand: false }, conditionals: { firstRow: { bold: true, color: '#FFFFFF', backgroundColor: '#ED7D31' }, band1Horz: { backgroundColor: '#FBE4D5' } } },
+  { id: 'GridTable4-Accent5', name: 'Grid Table 4 Teal', tableBorders: { top: border1('5B9BD5'), bottom: border1('5B9BD5'), left: border1('5B9BD5'), right: border1('5B9BD5'), insideH: border1('5B9BD5'), insideV: border1('5B9BD5') }, look: { firstRow: true, noHBand: false }, conditionals: { firstRow: { bold: true, color: '#FFFFFF', backgroundColor: '#5B9BD5' }, band1Horz: { backgroundColor: '#DEEAF6' } } },
+  { id: 'GridTable4-Accent6', name: 'Grid Table 4 Green', tableBorders: { top: border1('70AD47'), bottom: border1('70AD47'), left: border1('70AD47'), right: border1('70AD47'), insideH: border1('70AD47'), insideV: border1('70AD47') }, look: { firstRow: true, noHBand: false }, conditionals: { firstRow: { bold: true, color: '#FFFFFF', backgroundColor: '#70AD47' }, band1Horz: { backgroundColor: '#E2EFDA' } } },
+  { id: 'ListTable4-Accent3', name: 'List Table 4 Gray', tableBorders: { top: border1('A5A5A5'), bottom: border1('A5A5A5'), insideH: border1('A5A5A5') }, look: { firstRow: true, noHBand: false }, conditionals: { firstRow: { bold: true, color: '#FFFFFF', backgroundColor: '#A5A5A5' }, band1Horz: { backgroundColor: '#EDEDED' } } },
+];
+
+const ROWS = 4;
+const COLS = 3;
+
+function borderToCSS(border?: { style: string; size?: number; color?: { rgb: string } } | null): string {
+  if (!border || border.style === 'none') return 'none';
+  const w = border.size ? Math.max(1, Math.round(border.size / 8)) : 1;
+  const c = border.color?.rgb ? `#${border.color.rgb}` : '#000';
+  return `${w}px solid ${c}`;
+}
+
+function getPreviewCells(preset: TableStylePreset): CSSProperties[] {
+  const look = preset.look ?? {};
+  const conds = preset.conditionals ?? {};
+  const tb = preset.tableBorders;
+  const cells: CSSProperties[] = [];
+  let dataRowIdx = 0;
+
+  for (let r = 0; r < ROWS; r++) {
+    const isFirstRow = r === 0 && !!look.firstRow;
+    const bandingOn = look.noHBand !== true;
+    let condType: string | undefined;
+
+    if (isFirstRow) condType = 'firstRow';
+    else if (bandingOn) { condType = dataRowIdx % 2 === 0 ? 'band1Horz' : 'band2Horz'; dataRowIdx++; }
+    else dataRowIdx++;
+
+    for (let c = 0; c < COLS; c++) {
+      const cond = condType ? conds[condType] : undefined;
+      const condBorders = cond?.borders;
+
+      const style: CSSProperties = {
+        width: '20px',
+        height: '10px',
+        backgroundColor: cond?.backgroundColor ?? 'transparent',
+        borderTop: r === 0 ? borderToCSS(tb?.top) : (condBorders?.top !== undefined ? borderToCSS(condBorders.top) : borderToCSS(tb?.insideH)),
+        borderBottom: r === ROWS - 1 ? borderToCSS(tb?.bottom) : (condBorders?.bottom !== undefined ? borderToCSS(condBorders.bottom) : borderToCSS(tb?.insideH)),
+        borderLeft: c === 0 ? borderToCSS(tb?.left) : borderToCSS(tb?.insideV),
+        borderRight: c === COLS - 1 ? borderToCSS(tb?.right) : borderToCSS(tb?.insideV),
+      };
+      cells.push(style);
+    }
+  }
+  return cells;
+}
+</script>
+
+<style scoped>
+.tsg__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+  gap: 6px;
+  padding: 8px;
+}
+.tsg__item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 6px;
+  border: 2px solid transparent;
+  border-radius: 6px;
+  background: #fff;
+  cursor: pointer;
+}
+.tsg__item:hover { border-color: #d1d5db; }
+.tsg__item--selected { border-color: #3b82f6; background: #eff6ff; }
+.tsg__preview {
+  display: grid;
+  grid-template-columns: repeat(3, 20px);
+  grid-template-rows: repeat(4, 10px);
+  gap: 0;
+}
+.tsg__cell { box-sizing: border-box; }
+.tsg__name { font-size: 9px; color: #6b7280; text-align: center; line-height: 1.2; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+</style>
diff --git a/packages/vue/src/components/TableToolbar.vue b/packages/vue/src/components/TableToolbar.vue
new file mode 100644
index 00000000..ebbd3a04
--- /dev/null
+++ b/packages/vue/src/components/TableToolbar.vue
@@ -0,0 +1,106 @@
+<template>
+  <div v-if="isInTable" class="table-toolbar">
+    <span class="table-toolbar__label">Table</span>
+
+    <!-- Row operations -->
+    <button title="Add row above" @mousedown.prevent="exec('addRowAbove')">↑+</button>
+    <button title="Add row below" @mousedown.prevent="exec('addRowBelow')">↓+</button>
+    <button title="Delete row" @mousedown.prevent="exec('deleteRow')">↑✕</button>
+
+    <span class="divider" />
+
+    <!-- Column operations -->
+    <button title="Add column left" @mousedown.prevent="exec('addColumnLeft')">←+</button>
+    <button title="Add column right" @mousedown.prevent="exec('addColumnRight')">→+</button>
+    <button title="Delete column" @mousedown.prevent="exec('deleteColumn')">→✕</button>
+
+    <span class="divider" />
+
+    <!-- Merge/Split -->
+    <button title="Merge cells" @mousedown.prevent="exec('mergeCells')">⊞</button>
+    <button title="Split cell" @mousedown.prevent="exec('splitCell')">⊟</button>
+
+    <span class="divider" />
+
+    <!-- Delete table -->
+    <button title="Delete table" class="danger" @mousedown.prevent="exec('deleteTable')">🗑 Table</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { EditorView } from 'prosemirror-view';
+
+const props = defineProps<{
+  view: EditorView | null;
+  getCommands: () => Record<string, (...args: any[]) => any>;
+  stateTick: number;
+}>();
+
+const isInTable = computed(() => {
+  void props.stateTick;
+  const v = props.view;
+  if (!v) return false;
+  const { $from } = v.state.selection;
+  // Walk up from cursor to check if we're inside a table node
+  for (let depth = $from.depth; depth > 0; depth--) {
+    if ($from.node(depth).type.name === 'table') return true;
+  }
+  return false;
+});
+
+function exec(name: string) {
+  const v = props.view;
+  if (!v) return;
+  const cmds = props.getCommands();
+  const cmdFactory = cmds[name];
+  if (!cmdFactory) return;
+  const command = cmdFactory();
+  command(v.state, (tr: any) => v.dispatch(tr), v);
+  v.focus();
+}
+</script>
+
+<style scoped>
+.table-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px 8px;
+  background: #f0f9ff;
+  border-bottom: 1px solid #bae6fd;
+  font-size: 12px;
+}
+.table-toolbar__label {
+  font-weight: 600;
+  color: #0369a1;
+  font-size: 11px;
+  margin-right: 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.table-toolbar button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  height: 26px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  cursor: pointer;
+  font-size: 12px;
+  color: #334155;
+  padding: 0 6px;
+  white-space: nowrap;
+}
+.table-toolbar button:hover { background: #e0f2fe; }
+.table-toolbar button.danger { color: #dc2626; }
+.table-toolbar button.danger:hover { background: #fef2f2; }
+.divider {
+  width: 1px;
+  height: 18px;
+  background: #bae6fd;
+  margin: 0 2px;
+}
+</style>
diff --git a/packages/vue/src/components/TextContextMenu.vue b/packages/vue/src/components/TextContextMenu.vue
new file mode 100644
index 00000000..c0bf98fd
--- /dev/null
+++ b/packages/vue/src/components/TextContextMenu.vue
@@ -0,0 +1,187 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="isOpen"
+      class="ctx-menu-backdrop"
+      @mousedown="$emit('close')"
+      @contextmenu.prevent="$emit('close')"
+    />
+    <div
+      v-if="isOpen"
+      ref="menuRef"
+      class="ctx-menu"
+      :style="menuStyle"
+      @contextmenu.prevent
+      @keydown="handleKeyDown"
+    >
+      <button
+        v-for="(item, i) in visibleItems"
+        :key="item.id || i"
+        :class="['ctx-menu__item', { 'ctx-menu__item--disabled': item.disabled, 'ctx-menu__item--divider': item.divider }]"
+        :disabled="item.disabled"
+        @mousedown.prevent="onAction(item.action)"
+      >
+        <span class="ctx-menu__label">{{ item.label }}</span>
+        <span v-if="item.shortcut" class="ctx-menu__shortcut">{{ item.shortcut }}</span>
+      </button>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, nextTick } from 'vue';
+
+export interface ContextMenuItem {
+  id: string;
+  label: string;
+  action: string;
+  shortcut?: string;
+  disabled?: boolean;
+  divider?: boolean;
+}
+
+const props = defineProps<{
+  isOpen: boolean;
+  position: { x: number; y: number };
+  hasSelection: boolean;
+  isEditable: boolean;
+  inTable?: boolean;
+  onImage?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'action', action: string): void;
+}>();
+
+const menuRef = ref<HTMLElement | null>(null);
+
+const MENU_WIDTH = 220;
+const MENU_ITEM_HEIGHT = 32;
+const MARGIN = 10;
+
+const visibleItems = computed<ContextMenuItem[]>(() => {
+  const items: ContextMenuItem[] = [
+    { id: 'cut', label: 'Cut', action: 'cut', shortcut: 'Ctrl+X', disabled: !props.hasSelection || !props.isEditable },
+    { id: 'copy', label: 'Copy', action: 'copy', shortcut: 'Ctrl+C', disabled: !props.hasSelection },
+    { id: 'paste', label: 'Paste', action: 'paste', shortcut: 'Ctrl+V', disabled: !props.isEditable },
+    { id: 'div1', label: '', action: '', divider: true },
+    { id: 'delete', label: 'Delete', action: 'delete', shortcut: 'Del', disabled: !props.hasSelection || !props.isEditable },
+    { id: 'selectAll', label: 'Select All', action: 'selectAll', shortcut: 'Ctrl+A' },
+  ];
+
+  if (props.onImage && props.isEditable) {
+    items.push(
+      { id: 'div-img', label: '', action: '', divider: true },
+      { id: 'replaceImage', label: 'Replace image\u2026', action: 'replaceImage' },
+      { id: 'imageProperties', label: 'Image properties\u2026', action: 'imageProperties' },
+      { id: 'deleteImage', label: 'Delete image', action: 'deleteImage', shortcut: 'Del' },
+    );
+  }
+
+  if (props.inTable && props.isEditable) {
+    items.push(
+      { id: 'div2', label: '', action: '', divider: true },
+      { id: 'addRowAbove', label: 'Insert row above', action: 'addRowAbove' },
+      { id: 'addRowBelow', label: 'Insert row below', action: 'addRowBelow' },
+      { id: 'deleteRow', label: 'Delete row', action: 'deleteRow' },
+      { id: 'div3', label: '', action: '', divider: true },
+      { id: 'addColLeft', label: 'Insert column left', action: 'addColumnLeft' },
+      { id: 'addColRight', label: 'Insert column right', action: 'addColumnRight' },
+      { id: 'deleteCol', label: 'Delete column', action: 'deleteColumn' },
+    );
+  }
+
+  return items;
+});
+
+const menuStyle = computed(() => {
+  let x = props.position.x;
+  let y = props.position.y;
+  const itemCount = visibleItems.value.filter(i => !i.divider).length;
+  const dividerCount = visibleItems.value.filter(i => i.divider).length;
+  const menuHeight = itemCount * MENU_ITEM_HEIGHT + dividerCount * 9;
+
+  if (typeof window !== 'undefined') {
+    if (x + MENU_WIDTH + MARGIN > window.innerWidth) {
+      x = window.innerWidth - MENU_WIDTH - MARGIN;
+    }
+    if (y + menuHeight + MARGIN > window.innerHeight) {
+      y = window.innerHeight - menuHeight - MARGIN;
+    }
+  }
+
+  return {
+    position: 'fixed' as const,
+    left: `${x}px`,
+    top: `${y}px`,
+    zIndex: 400,
+  };
+});
+
+function onAction(action: string) {
+  if (!action) return;
+  emit('action', action);
+  emit('close');
+}
+
+function handleKeyDown(e: KeyboardEvent) {
+  if (e.key === 'Escape') {
+    emit('close');
+  }
+}
+
+watch(() => props.isOpen, (open) => {
+  if (open) {
+    nextTick(() => menuRef.value?.focus());
+  }
+});
+</script>
+
+<style scoped>
+.ctx-menu-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 399;
+}
+.ctx-menu {
+  background: #fff;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.14);
+  min-width: 220px;
+  padding: 4px 0;
+  outline: none;
+}
+.ctx-menu__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 6px 14px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 13px;
+  color: #1f2937;
+  text-align: left;
+  height: 32px;
+}
+.ctx-menu__item:hover:not(.ctx-menu__item--disabled):not(.ctx-menu__item--divider) {
+  background: #f3f4f6;
+}
+.ctx-menu__item--disabled {
+  color: #9ca3af;
+  cursor: default;
+}
+.ctx-menu__item--divider {
+  height: 1px;
+  padding: 0;
+  margin: 4px 8px;
+  background: #e5e7eb;
+  cursor: default;
+  pointer-events: none;
+}
+.ctx-menu__label { flex: 1; }
+.ctx-menu__shortcut { font-size: 11px; color: #9ca3af; margin-left: 16px; }
+</style>
diff --git a/packages/vue/src/components/UnsavedIndicator.vue b/packages/vue/src/components/UnsavedIndicator.vue
new file mode 100644
index 00000000..f9fb2d47
--- /dev/null
+++ b/packages/vue/src/components/UnsavedIndicator.vue
@@ -0,0 +1,104 @@
+<template>
+  <span v-if="hasUnsavedChanges" :class="['unsaved-indicator', `unsaved-indicator--${variant}`]" :title="title">
+    <span v-if="variant === 'dot'" class="unsaved-indicator__dot" />
+    <span v-else-if="variant === 'badge'" class="unsaved-indicator__badge">{{ changeCount }}</span>
+    <span v-else class="unsaved-indicator__text">{{ label }}</span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    /** Current document state (JSON string or hash) for change detection */
+    currentState?: string;
+    /** Whether to warn on page unload */
+    warnOnUnload?: boolean;
+    /** Display variant */
+    variant?: 'dot' | 'badge' | 'text';
+    /** Label for text variant */
+    label?: string;
+    /** Title tooltip */
+    title?: string;
+  }>(),
+  {
+    warnOnUnload: true,
+    variant: 'dot',
+    label: 'Unsaved changes',
+    title: 'You have unsaved changes',
+  }
+);
+
+const hasUnsavedChanges = ref(false);
+const changeCount = ref(0);
+let savedState: string | null = null;
+
+watch(() => props.currentState, (newState) => {
+  if (newState === undefined) return;
+  if (savedState === null) {
+    savedState = newState;
+    return;
+  }
+  if (newState !== savedState) {
+    hasUnsavedChanges.value = true;
+    changeCount.value++;
+  }
+});
+
+function markAsSaved() {
+  savedState = props.currentState ?? null;
+  hasUnsavedChanges.value = false;
+  changeCount.value = 0;
+}
+
+function handleBeforeUnload(e: BeforeUnloadEvent) {
+  if (hasUnsavedChanges.value && props.warnOnUnload) {
+    e.preventDefault();
+    e.returnValue = '';
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('beforeunload', handleBeforeUnload);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('beforeunload', handleBeforeUnload);
+});
+
+defineExpose({ hasUnsavedChanges, changeCount, markAsSaved });
+</script>
+
+<style scoped>
+.unsaved-indicator { display: inline-flex; align-items: center; }
+.unsaved-indicator__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #f59e0b;
+  animation: pulse 2s infinite;
+}
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+.unsaved-indicator__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 4px;
+  background: #f59e0b;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 600;
+  border-radius: 9px;
+}
+.unsaved-indicator__text {
+  font-size: 12px;
+  color: #f59e0b;
+  font-weight: 500;
+}
+</style>
diff --git a/packages/vue/src/components/VerticalRuler.vue b/packages/vue/src/components/VerticalRuler.vue
new file mode 100644
index 00000000..36ad080d
--- /dev/null
+++ b/packages/vue/src/components/VerticalRuler.vue
@@ -0,0 +1,211 @@
+<template>
+  <div class="vruler" :style="{ width: `${RULER_W}px` }">
+    <div class="vruler__track" ref="trackRef" :style="trackStyle">
+      <!-- Top margin zone -->
+      <div class="vruler__margin" :style="{ top: 0, height: `${topMarginPx}px` }" />
+      <!-- Bottom margin zone -->
+      <div class="vruler__margin" :style="{ bottom: 0, height: `${bottomMarginPx}px` }" />
+
+      <!-- Tick marks -->
+      <svg class="vruler__ticks" :viewBox="`0 0 ${RULER_W} ${pageHeightPx}`" preserveAspectRatio="none">
+        <template v-for="tick in ticks" :key="tick.y">
+          <line :x1="tick.major ? 2 : 6" :y1="tick.y" :x2="RULER_W - 2" :y2="tick.y" stroke="#9ca3af" :stroke-width="tick.major ? 0.8 : 0.5" />
+          <text v-if="tick.label" :x="3" :y="tick.y + 10" font-size="8" fill="#9ca3af">{{ tick.label }}</text>
+        </template>
+      </svg>
+
+      <!-- Top margin drag handle -->
+      <div
+        v-if="editable"
+        class="vruler__handle"
+        :style="{ top: `${topMarginPx - 3}px` }"
+        title="Top margin"
+        @mousedown.prevent="startDrag('topMargin', $event)"
+      />
+
+      <!-- Bottom margin drag handle -->
+      <div
+        v-if="editable"
+        class="vruler__handle"
+        :style="{ top: `${pageHeightPx - bottomMarginPx - 3}px` }"
+        title="Bottom margin"
+        @mousedown.prevent="startDrag('bottomMargin', $event)"
+      />
+
+      <!-- Drag tooltip -->
+      <div v-if="dragging" class="vruler__tooltip" :style="{ top: `${tooltipY}px` }">
+        {{ tooltipText }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+import type { SectionProperties } from '@eigenpal/docx-core/types/document';
+
+const props = withDefaults(
+  defineProps<{
+    sectionProps?: SectionProperties | null;
+    zoom?: number;
+    editable?: boolean;
+    unit?: 'inch' | 'cm';
+  }>(),
+  { zoom: 1, editable: true, unit: 'inch' }
+);
+
+const emit = defineEmits<{
+  (e: 'top-margin-change', twips: number): void;
+  (e: 'bottom-margin-change', twips: number): void;
+}>();
+
+const RULER_W = 22;
+const TWIPS_PER_INCH = 1440;
+const TWIPS_PER_CM = 567;
+const DEFAULT_PAGE_HEIGHT = 15840; // 11 inches
+const DEFAULT_MARGIN = 1440;
+
+const trackRef = ref<HTMLElement | null>(null);
+const dragging = ref(false);
+const dragType = ref<string | null>(null);
+const dragStartY = ref(0);
+const dragStartValue = ref(0);
+const tooltipY = ref(0);
+const tooltipText = ref('');
+
+function tw2px(twips: number): number {
+  return Math.round((twips / TWIPS_PER_INCH) * 96 * props.zoom);
+}
+function px2tw(px: number): number {
+  return Math.round((px / (96 * props.zoom)) * TWIPS_PER_INCH);
+}
+
+const pageHeightTw = computed(() => props.sectionProps?.pageHeight ?? DEFAULT_PAGE_HEIGHT);
+const topMarginTw = computed(() => props.sectionProps?.marginTop ?? DEFAULT_MARGIN);
+const bottomMarginTw = computed(() => props.sectionProps?.marginBottom ?? DEFAULT_MARGIN);
+
+const pageHeightPx = computed(() => tw2px(pageHeightTw.value));
+const topMarginPx = computed(() => tw2px(topMarginTw.value));
+const bottomMarginPx = computed(() => tw2px(bottomMarginTw.value));
+
+const trackStyle = computed(() => ({
+  width: `${RULER_W}px`,
+  height: `${pageHeightPx.value}px`,
+}));
+
+const ticks = computed(() => {
+  const result: { y: number; major: boolean; label?: string }[] = [];
+  const perUnit = props.unit === 'cm' ? TWIPS_PER_CM : TWIPS_PER_INCH;
+  const steps = Math.ceil(pageHeightTw.value / perUnit) + 1;
+  for (let i = 0; i <= steps; i++) {
+    const tw = i * perUnit;
+    if (tw > pageHeightTw.value) break;
+    result.push({ y: tw2px(tw), major: true, label: i > 0 ? String(i) : undefined });
+    const halfTw = tw + perUnit / 2;
+    if (halfTw < pageHeightTw.value) {
+      result.push({ y: tw2px(halfTw), major: false });
+    }
+  }
+  return result;
+});
+
+function formatValue(twips: number): string {
+  if (props.unit === 'cm') return (twips / TWIPS_PER_CM).toFixed(1) + ' cm';
+  return (twips / TWIPS_PER_INCH).toFixed(2) + '"';
+}
+
+function startDrag(type: string, event: MouseEvent) {
+  if (!props.editable) return;
+  dragging.value = true;
+  dragType.value = type;
+  dragStartY.value = event.clientY;
+  dragStartValue.value = type === 'topMargin' ? topMarginTw.value : bottomMarginTw.value;
+  tooltipY.value = event.clientY - (trackRef.value?.getBoundingClientRect().top ?? 0);
+  tooltipText.value = formatValue(dragStartValue.value);
+}
+
+function handleMouseMove(event: MouseEvent) {
+  if (!dragging.value || !dragType.value) return;
+  const dy = event.clientY - dragStartY.value;
+  const dTwips = px2tw(dragType.value === 'topMargin' ? dy : -dy);
+  const newValue = Math.max(0, dragStartValue.value + dTwips);
+  tooltipY.value = event.clientY - (trackRef.value?.getBoundingClientRect().top ?? 0);
+  tooltipText.value = formatValue(newValue);
+}
+
+function handleMouseUp(event: MouseEvent) {
+  if (!dragging.value || !dragType.value) return;
+  const dy = event.clientY - dragStartY.value;
+  const dTwips = px2tw(dragType.value === 'topMargin' ? dy : -dy);
+  const newValue = Math.max(0, dragStartValue.value + dTwips);
+
+  if (dragType.value === 'topMargin') emit('top-margin-change', newValue);
+  else emit('bottom-margin-change', newValue);
+
+  dragging.value = false;
+  dragType.value = null;
+}
+
+onMounted(() => {
+  window.addEventListener('mousemove', handleMouseMove);
+  window.addEventListener('mouseup', handleMouseUp);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener('mousemove', handleMouseMove);
+  window.removeEventListener('mouseup', handleMouseUp);
+});
+</script>
+
+<style scoped>
+.vruler {
+  background: #f9fafb;
+  border-right: 1px solid #e5e7eb;
+  user-select: none;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.vruler__track {
+  position: relative;
+  background: #fff;
+  border-top: 1px solid #d1d5db;
+  border-bottom: 1px solid #d1d5db;
+}
+.vruler__margin {
+  position: absolute;
+  left: 0;
+  right: 0;
+  background: rgba(0,0,0,0.03);
+}
+.vruler__ticks {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.vruler__handle {
+  position: absolute;
+  left: 2px;
+  right: 2px;
+  height: 6px;
+  cursor: row-resize;
+  background: #4285f4;
+  border-radius: 2px;
+  opacity: 0.5;
+  z-index: 2;
+}
+.vruler__handle:hover { opacity: 1; }
+.vruler__tooltip {
+  position: absolute;
+  left: 24px;
+  transform: translateY(-50%);
+  background: #1f2937;
+  color: #fff;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 10px;
+  white-space: nowrap;
+  z-index: 10;
+  pointer-events: none;
+}
+</style>
diff --git a/packages/vue/src/components/sidebar/AddCommentCard.vue b/packages/vue/src/components/sidebar/AddCommentCard.vue
new file mode 100644
index 00000000..b9ad390a
--- /dev/null
+++ b/packages/vue/src/components/sidebar/AddCommentCard.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="add-comment-card" @mousedown.stop>
+    <textarea
+      ref="inputRef"
+      v-model="text"
+      class="add-comment-card__input"
+      placeholder="Add a comment..."
+      rows="2"
+      @keydown.enter.exact.prevent="submit"
+      @keydown.escape="$emit('cancel')"
+    />
+    <div class="add-comment-card__footer">
+      <button class="add-comment-card__cancel" @mousedown.prevent="$emit('cancel')">Cancel</button>
+      <button
+        class="add-comment-card__submit"
+        :disabled="!text.trim()"
+        @mousedown.prevent="submit"
+      >Comment</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+const emit = defineEmits<{
+  (e: 'submit', text: string): void;
+  (e: 'cancel'): void;
+}>();
+
+const inputRef = ref<HTMLTextAreaElement | null>(null);
+const text = ref('');
+
+function submit() {
+  const t = text.value.trim();
+  if (!t) return;
+  emit('submit', t);
+  text.value = '';
+}
+
+onMounted(() => {
+  inputRef.value?.focus();
+});
+</script>
+
+<style scoped>
+.add-comment-card {
+  background: #fff;
+  border: 2px solid #1a73e8;
+  border-radius: 8px;
+  padding: 10px 12px;
+  margin-bottom: 6px;
+}
+.add-comment-card__input {
+  width: 100%;
+  border: none;
+  outline: none;
+  font-size: 13px;
+  font-family: inherit;
+  resize: none;
+  color: #1f2937;
+}
+.add-comment-card__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+  margin-top: 8px;
+}
+.add-comment-card__cancel {
+  padding: 5px 14px;
+  border: none;
+  background: transparent;
+  color: #1a73e8;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  border-radius: 4px;
+}
+.add-comment-card__cancel:hover { background: #f0f4ff; }
+.add-comment-card__submit {
+  padding: 5px 14px;
+  border: none;
+  border-radius: 16px;
+  background: #1a73e8;
+  color: #fff;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+}
+.add-comment-card__submit:disabled {
+  background: #e5e7eb;
+  color: #9ca3af;
+  cursor: default;
+}
+</style>
diff --git a/packages/vue/src/components/sidebar/CommentCard.vue b/packages/vue/src/components/sidebar/CommentCard.vue
new file mode 100644
index 00000000..caef9a65
--- /dev/null
+++ b/packages/vue/src/components/sidebar/CommentCard.vue
@@ -0,0 +1,218 @@
+<template>
+  <div :class="['comment-card', { 'comment-card--expanded': expanded, 'comment-card--resolved': comment.done }]" @mousedown.stop>
+    <!-- Resolved badge -->
+    <div v-if="comment.done" class="comment-card__resolved-badge">
+      <span class="comment-card__resolved-icon">&#x2713;</span> Resolved
+    </div>
+
+    <!-- Header -->
+    <div class="comment-card__header">
+      <div class="comment-card__avatar" :style="{ backgroundColor: avatarColor }">
+        {{ initials }}
+      </div>
+      <div class="comment-card__meta">
+        <span class="comment-card__author">{{ comment.author }}</span>
+        <span class="comment-card__date">{{ formattedDate }}</span>
+      </div>
+      <div v-if="expanded" class="comment-card__actions">
+        <button
+          v-if="comment.done"
+          class="comment-card__action-btn"
+          title="Unresolve"
+          @mousedown.prevent="$emit('unresolve', comment.id)"
+        >&#x21B6;</button>
+        <button
+          v-else
+          class="comment-card__action-btn"
+          title="Resolve"
+          @mousedown.prevent="$emit('resolve', comment.id)"
+        >&#x2713;</button>
+        <button
+          class="comment-card__action-btn"
+          title="Delete"
+          @mousedown.prevent="$emit('delete', comment.id)"
+        >&#x2715;</button>
+      </div>
+    </div>
+
+    <!-- Comment text -->
+    <div class="comment-card__text">{{ commentText }}</div>
+
+    <!-- Replies -->
+    <template v-if="replies.length > 0">
+      <div v-if="!expanded && replies.length > 0" class="comment-card__reply-count">
+        {{ replies.length }} {{ replies.length === 1 ? 'reply' : 'replies' }}
+      </div>
+      <div v-if="expanded" class="comment-card__replies">
+        <div v-for="reply in replies" :key="reply.id" class="comment-card__reply">
+          <div class="comment-card__reply-header">
+            <div class="comment-card__avatar comment-card__avatar--small" :style="{ backgroundColor: getAvatarColor(reply.author) }">
+              {{ getInitials(reply.author) }}
+            </div>
+            <span class="comment-card__author">{{ reply.author }}</span>
+            <span class="comment-card__date">{{ formatDate(reply.date) }}</span>
+          </div>
+          <div class="comment-card__reply-text">{{ getCommentText(reply.content) }}</div>
+        </div>
+      </div>
+    </template>
+
+    <!-- Reply input -->
+    <div v-if="expanded && !comment.done" class="comment-card__reply-input">
+      <input
+        v-model="replyText"
+        class="comment-card__input"
+        placeholder="Reply..."
+        @keydown.enter.prevent="submitReply"
+      />
+      <button
+        class="comment-card__submit"
+        :disabled="!replyText.trim()"
+        @mousedown.prevent="submitReply"
+      >&#x27A4;</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import type { Comment } from '@eigenpal/docx-core/types/content';
+import { getCommentText, formatDate, getInitials, getAvatarColor } from './sidebarUtils';
+
+const props = defineProps<{
+  comment: Comment;
+  replies: Comment[];
+  expanded: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'reply', commentId: number, text: string): void;
+  (e: 'resolve', commentId: number): void;
+  (e: 'unresolve', commentId: number): void;
+  (e: 'delete', commentId: number): void;
+}>();
+
+const replyText = ref('');
+
+const initials = computed(() => getInitials(props.comment.author));
+const avatarColor = computed(() => getAvatarColor(props.comment.author));
+const formattedDate = computed(() => formatDate(props.comment.date));
+const commentText = computed(() => getCommentText(props.comment.content));
+
+function submitReply() {
+  const text = replyText.value.trim();
+  if (!text) return;
+  emit('reply', props.comment.id, text);
+  replyText.value = '';
+}
+</script>
+
+<style scoped>
+.comment-card {
+  background: #f8fbff;
+  border: 1px solid #e3eaf3;
+  border-radius: 8px;
+  padding: 10px 12px;
+  margin-bottom: 6px;
+  cursor: pointer;
+  transition: box-shadow 0.15s, background 0.15s;
+}
+.comment-card--expanded {
+  background: #fff;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  cursor: default;
+}
+.comment-card--resolved {
+  opacity: 0.7;
+}
+.comment-card__resolved-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: #e6f4ea;
+  color: #137333;
+  font-size: 11px;
+  font-weight: 500;
+  padding: 2px 8px;
+  border-radius: 10px;
+  margin-bottom: 6px;
+}
+.comment-card__resolved-icon { font-size: 10px; }
+.comment-card__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+.comment-card__avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 500;
+  flex-shrink: 0;
+}
+.comment-card__avatar--small {
+  width: 22px;
+  height: 22px;
+  font-size: 9px;
+}
+.comment-card__meta { flex: 1; min-width: 0; }
+.comment-card__author { font-size: 12px; font-weight: 600; color: #1f2937; display: block; }
+.comment-card__date { font-size: 11px; color: #9ca3af; }
+.comment-card__actions { display: flex; gap: 2px; }
+.comment-card__action-btn {
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: #6b7280;
+}
+.comment-card__action-btn:hover { background: #f3f4f6; }
+.comment-card__text { font-size: 13px; color: #374151; line-height: 1.4; }
+.comment-card__reply-count { font-size: 11px; color: #6b7280; margin-top: 6px; }
+.comment-card__replies { margin-top: 8px; border-top: 1px solid #e5e7eb; padding-top: 8px; }
+.comment-card__reply { margin-bottom: 8px; }
+.comment-card__reply-header { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
+.comment-card__reply-text { font-size: 12px; color: #4b5563; margin-left: 28px; }
+.comment-card__reply-input {
+  display: flex;
+  gap: 4px;
+  margin-top: 8px;
+  border-top: 1px solid #e5e7eb;
+  padding-top: 8px;
+}
+.comment-card__input {
+  flex: 1;
+  padding: 6px 8px;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  font-size: 12px;
+  outline: none;
+}
+.comment-card__input:focus { border-color: #3b82f6; }
+.comment-card__submit {
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: #1a73e8;
+  color: #fff;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.comment-card__submit:disabled { background: #e5e7eb; color: #9ca3af; cursor: default; }
+</style>
diff --git a/packages/vue/src/components/sidebar/TrackedChangeCard.vue b/packages/vue/src/components/sidebar/TrackedChangeCard.vue
new file mode 100644
index 00000000..f0244dfe
--- /dev/null
+++ b/packages/vue/src/components/sidebar/TrackedChangeCard.vue
@@ -0,0 +1,127 @@
+<template>
+  <div :class="['tc-card', { 'tc-card--expanded': expanded }]" @mousedown.stop>
+    <!-- Header -->
+    <div class="tc-card__header">
+      <div class="tc-card__avatar" :style="{ backgroundColor: avatarColor }">
+        {{ initials }}
+      </div>
+      <div class="tc-card__meta">
+        <span class="tc-card__author">{{ change.author }}</span>
+        <span class="tc-card__date">{{ formattedDate }}</span>
+      </div>
+    </div>
+
+    <!-- Change description -->
+    <div class="tc-card__body">
+      <template v-if="change.type === 'replacement'">
+        <span class="tc-card__label">Replaced </span>
+        <span class="tc-card__deleted">{{ truncatedDeletedText }}</span>
+        <span class="tc-card__label"> with </span>
+        <span class="tc-card__inserted">{{ truncatedText }}</span>
+      </template>
+      <template v-else-if="change.type === 'insertion'">
+        <span class="tc-card__label">Added </span>
+        <span class="tc-card__inserted">{{ truncatedText }}</span>
+      </template>
+      <template v-else>
+        <span class="tc-card__label">Deleted </span>
+        <span class="tc-card__deleted">{{ truncatedText }}</span>
+      </template>
+    </div>
+
+    <!-- Accept / Reject buttons -->
+    <div v-if="expanded" class="tc-card__actions">
+      <button class="tc-card__btn tc-card__btn--accept" @mousedown.prevent="$emit('accept', change.from, change.to)">
+        &#x2713; Accept
+      </button>
+      <button class="tc-card__btn tc-card__btn--reject" @mousedown.prevent="$emit('reject', change.from, change.to)">
+        &#x2715; Reject
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { TrackedChangeEntry } from './sidebarUtils';
+import { formatDate, getInitials, getAvatarColor, truncateText } from './sidebarUtils';
+
+const props = defineProps<{
+  change: TrackedChangeEntry;
+  expanded: boolean;
+}>();
+
+defineEmits<{
+  (e: 'accept', from: number, to: number): void;
+  (e: 'reject', from: number, to: number): void;
+}>();
+
+const initials = computed(() => getInitials(props.change.author));
+const avatarColor = computed(() => getAvatarColor(props.change.author));
+const formattedDate = computed(() => formatDate(props.change.date));
+const truncatedText = computed(() => truncateText(props.change.text));
+const truncatedDeletedText = computed(() => truncateText(props.change.deletedText || ''));
+</script>
+
+<style scoped>
+.tc-card {
+  background: #fffbf0;
+  border: 1px solid #f0e6d2;
+  border-radius: 8px;
+  padding: 10px 12px;
+  margin-bottom: 6px;
+  cursor: pointer;
+  transition: box-shadow 0.15s, background 0.15s;
+}
+.tc-card--expanded {
+  background: #fff;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  cursor: default;
+}
+.tc-card__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+.tc-card__avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 500;
+  flex-shrink: 0;
+}
+.tc-card__meta { flex: 1; min-width: 0; }
+.tc-card__author { font-size: 12px; font-weight: 600; color: #1f2937; display: block; }
+.tc-card__date { font-size: 11px; color: #9ca3af; }
+.tc-card__body { font-size: 13px; color: #374151; line-height: 1.4; }
+.tc-card__label { color: #6b7280; }
+.tc-card__inserted { color: #2e7d32; font-weight: 500; }
+.tc-card__deleted { color: #c62828; text-decoration: line-through; font-weight: 500; }
+.tc-card__actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 10px;
+  padding-top: 8px;
+  border-top: 1px solid #e5e7eb;
+}
+.tc-card__btn {
+  flex: 1;
+  padding: 5px 12px;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 500;
+  background: #fff;
+}
+.tc-card__btn--accept { color: #2e7d32; border-color: #a5d6a7; }
+.tc-card__btn--accept:hover { background: #e8f5e9; }
+.tc-card__btn--reject { color: #c62828; border-color: #ef9a9a; }
+.tc-card__btn--reject:hover { background: #ffebee; }
+</style>
diff --git a/packages/vue/src/components/sidebar/UnifiedSidebar.vue b/packages/vue/src/components/sidebar/UnifiedSidebar.vue
new file mode 100644
index 00000000..e4993acb
--- /dev/null
+++ b/packages/vue/src/components/sidebar/UnifiedSidebar.vue
@@ -0,0 +1,184 @@
+<template>
+  <div v-if="isOpen" class="unified-sidebar">
+    <div class="unified-sidebar__header">
+      <span class="unified-sidebar__title">Comments & Changes</span>
+      <button class="unified-sidebar__close" @click="$emit('close')">&#x2715;</button>
+    </div>
+    <div class="unified-sidebar__body">
+      <!-- Add comment card -->
+      <AddCommentCard
+        v-if="isAddingComment"
+        @submit="(text: string) => $emit('add-comment', text)"
+        @cancel="$emit('cancel-add-comment')"
+      />
+
+      <!-- No items -->
+      <div v-if="sortedItems.length === 0 && !isAddingComment" class="unified-sidebar__empty">
+        No comments or changes
+      </div>
+
+      <!-- Comment cards -->
+      <template v-for="item in sortedItems" :key="item.id">
+        <CommentCard
+          v-if="item.kind === 'comment'"
+          :comment="item.comment!"
+          :replies="item.replies!"
+          :expanded="expandedId === item.id"
+          @click="toggleExpanded(item.id)"
+          @reply="(id: number, text: string) => $emit('comment-reply', id, text)"
+          @resolve="(id: number) => $emit('comment-resolve', id)"
+          @unresolve="(id: number) => $emit('comment-unresolve', id)"
+          @delete="(id: number) => $emit('comment-delete', id)"
+        />
+        <TrackedChangeCard
+          v-else-if="item.kind === 'tracked-change'"
+          :change="item.change!"
+          :expanded="expandedId === item.id"
+          @click="toggleExpanded(item.id)"
+          @accept="(from: number, to: number) => $emit('accept-change', from, to)"
+          @reject="(from: number, to: number) => $emit('reject-change', from, to)"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import type { Comment } from '@eigenpal/docx-core/types/content';
+import type { TrackedChangeEntry } from './sidebarUtils';
+import CommentCard from './CommentCard.vue';
+import TrackedChangeCard from './TrackedChangeCard.vue';
+import AddCommentCard from './AddCommentCard.vue';
+
+interface SidebarItem {
+  id: string;
+  kind: 'comment' | 'tracked-change';
+  anchorPos: number;
+  comment?: Comment;
+  replies?: Comment[];
+  change?: TrackedChangeEntry;
+}
+
+const props = defineProps<{
+  isOpen: boolean;
+  comments: Comment[];
+  trackedChanges: TrackedChangeEntry[];
+  isAddingComment?: boolean;
+  showResolved?: boolean;
+}>();
+
+defineEmits<{
+  (e: 'close'): void;
+  (e: 'add-comment', text: string): void;
+  (e: 'cancel-add-comment'): void;
+  (e: 'comment-reply', commentId: number, text: string): void;
+  (e: 'comment-resolve', commentId: number): void;
+  (e: 'comment-unresolve', commentId: number): void;
+  (e: 'comment-delete', commentId: number): void;
+  (e: 'accept-change', from: number, to: number): void;
+  (e: 'reject-change', from: number, to: number): void;
+}>();
+
+const expandedId = ref<string | null>(null);
+
+function toggleExpanded(id: string) {
+  expandedId.value = expandedId.value === id ? null : id;
+}
+
+const sortedItems = computed<SidebarItem[]>(() => {
+  const items: SidebarItem[] = [];
+
+  // Build comment threads (top-level only, with replies grouped)
+  const topLevelComments = props.comments.filter(c => !c.parentId);
+  const replyMap = new Map<number, Comment[]>();
+  for (const c of props.comments) {
+    if (c.parentId != null) {
+      const arr = replyMap.get(c.parentId) || [];
+      arr.push(c);
+      replyMap.set(c.parentId, arr);
+    }
+  }
+
+  for (const comment of topLevelComments) {
+    if (comment.done && !props.showResolved) continue;
+    items.push({
+      id: `comment-${comment.id}`,
+      kind: 'comment',
+      anchorPos: comment.id, // approximate sort order
+      comment,
+      replies: replyMap.get(comment.id) || [],
+    });
+  }
+
+  // Tracked changes
+  for (let i = 0; i < props.trackedChanges.length; i++) {
+    const change = props.trackedChanges[i];
+    items.push({
+      id: `tc-${change.revisionId}-${i}`,
+      kind: 'tracked-change',
+      anchorPos: change.from,
+      change,
+    });
+  }
+
+  // Sort by document position
+  items.sort((a, b) => a.anchorPos - b.anchorPos);
+  return items;
+});
+</script>
+
+<style scoped>
+.unified-sidebar {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 320px;
+  background: #f9fafb;
+  border-left: 1px solid #e2e8f0;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  box-shadow: -2px 0 8px rgba(0,0,0,0.08);
+  animation: slideInRight 0.15s ease-out;
+}
+@keyframes slideInRight {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+.unified-sidebar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  border-bottom: 1px solid #e5e7eb;
+  background: #fff;
+}
+.unified-sidebar__title { font-weight: 600; font-size: 13px; color: #1f2937; }
+.unified-sidebar__close {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 14px;
+  color: #6b7280;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+}
+.unified-sidebar__close:hover { background: #f3f4f6; }
+.unified-sidebar__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+}
+.unified-sidebar__empty {
+  padding: 24px 16px;
+  text-align: center;
+  color: #9ca3af;
+  font-size: 13px;
+}
+</style>
diff --git a/packages/vue/src/components/sidebar/sidebarUtils.ts b/packages/vue/src/components/sidebar/sidebarUtils.ts
new file mode 100644
index 00000000..5ca894a4
--- /dev/null
+++ b/packages/vue/src/components/sidebar/sidebarUtils.ts
@@ -0,0 +1,64 @@
+import type { Paragraph } from '@eigenpal/docx-core/types/content';
+
+/** Extract plain text from a Comment's paragraph content. */
+export function getCommentText(paragraphs?: Paragraph[]): string {
+  if (!paragraphs?.length) return '';
+  return paragraphs
+    .flatMap((p) =>
+      p.content
+        .filter((c) => c.type === 'run')
+        .flatMap((r) => ('content' in r ? r.content : []))
+        .filter((c) => c.type === 'text')
+        .map((t) => ('text' in t ? t.text : ''))
+    )
+    .join('');
+}
+
+export function formatDate(dateStr?: string): string {
+  if (!dateStr) return '';
+  const d = new Date(dateStr);
+  return d.toLocaleString(undefined, {
+    hour: 'numeric',
+    minute: '2-digit',
+    month: 'short',
+    day: 'numeric',
+  });
+}
+
+export function getInitials(name: string): string {
+  return name
+    .split(/\s+/)
+    .map((w) => w[0])
+    .join('')
+    .toUpperCase()
+    .slice(0, 2);
+}
+
+const AVATAR_COLORS = [
+  '#6DCCB1', '#79AAD9', '#EE789D', '#A987D1', '#E6A85F', '#F2CC8F',
+  '#68B3A2', '#B07AA1', '#59A14F', '#FF9DA7', '#E15759', '#76B7B2',
+];
+
+export function getAvatarColor(name: string): string {
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
+}
+
+export function truncateText(text: string, maxLength = 50): string {
+  return text.length > maxLength ? text.slice(0, maxLength) + '...' : text;
+}
+
+export interface TrackedChangeEntry {
+  type: 'insertion' | 'deletion' | 'replacement';
+  text: string;
+  deletedText?: string;
+  author: string;
+  date?: string;
+  from: number;
+  to: number;
+  revisionId: number;
+  insertionRevisionId?: number;
+}
diff --git a/packages/vue/src/composables/useAutoSave.ts b/packages/vue/src/composables/useAutoSave.ts
new file mode 100644
index 00000000..8f27dd57
--- /dev/null
+++ b/packages/vue/src/composables/useAutoSave.ts
@@ -0,0 +1,101 @@
+/**
+ * useAutoSave — Vue composable wrapping AutoSaveManager from core.
+ *
+ * Persists document to localStorage with configurable interval.
+ * Supports recovery detection for crash recovery.
+ */
+
+import { ref, onBeforeUnmount } from 'vue';
+import {
+  AutoSaveManager,
+  isAutoSaveSupported,
+} from '@eigenpal/docx-core/managers/AutoSaveManager';
+import type { AutoSaveStatus } from '@eigenpal/docx-core/managers/types';
+
+export interface UseAutoSaveOptions {
+  /** localStorage key (default: 'docx-editor-autosave') */
+  storageKey?: string;
+  /** Auto-save interval in ms (default: 30000) */
+  interval?: number;
+  /** Whether auto-save is enabled (default: true) */
+  enabled?: boolean;
+}
+
+export function useAutoSave(options: UseAutoSaveOptions = {}) {
+  const {
+    storageKey = 'docx-editor-autosave',
+    interval = 30000,
+    enabled = true,
+  } = options;
+
+  const status = ref<AutoSaveStatus>('idle');
+  const lastSaveTime = ref<number | null>(null);
+  const hasRecoveryData = ref(false);
+  const isEnabled = ref(enabled);
+
+  if (!isAutoSaveSupported()) {
+    return {
+      status,
+      lastSaveTime,
+      hasRecoveryData,
+      isEnabled,
+      save: () => {},
+      clearAutoSave: () => {},
+      acceptRecovery: () => null as string | null,
+      dismissRecovery: () => {},
+    };
+  }
+
+  const manager = new AutoSaveManager({
+    storageKey,
+    intervalMs: interval,
+    enabled,
+  });
+
+  // Subscribe to state changes
+  const unsubscribe = manager.subscribe((snapshot) => {
+    status.value = snapshot.status;
+    lastSaveTime.value = snapshot.lastSaveTime;
+    hasRecoveryData.value = snapshot.hasRecoveryData;
+  });
+
+  // Sync initial state
+  const initial = manager.getSnapshot();
+  status.value = initial.status;
+  lastSaveTime.value = initial.lastSaveTime;
+  hasRecoveryData.value = initial.hasRecoveryData;
+
+  function save(data?: string) {
+    if (data !== undefined) {
+      manager.saveNow(data);
+    }
+  }
+
+  function clearAutoSave() {
+    manager.clear();
+  }
+
+  function acceptRecovery(): string | null {
+    return manager.getRecoveryData();
+  }
+
+  function dismissRecovery() {
+    manager.dismissRecovery();
+  }
+
+  onBeforeUnmount(() => {
+    unsubscribe();
+    manager.destroy();
+  });
+
+  return {
+    status,
+    lastSaveTime,
+    hasRecoveryData,
+    isEnabled,
+    save,
+    clearAutoSave,
+    acceptRecovery,
+    dismissRecovery,
+  };
+}
diff --git a/packages/vue/src/composables/useDocxEditor.ts b/packages/vue/src/composables/useDocxEditor.ts
new file mode 100644
index 00000000..a4a5a14c
--- /dev/null
+++ b/packages/vue/src/composables/useDocxEditor.ts
@@ -0,0 +1,437 @@
+/**
+ * useDocxEditor — Vue composable for the DOCX editor lifecycle.
+ *
+ * Manages: DOCX parsing → ProseMirror state → layout pipeline → DOM painting.
+ * This is the Vue equivalent of PagedEditor + HiddenProseMirror from the React package.
+ */
+
+import { ref, onBeforeUnmount, shallowRef, type Ref } from 'vue';
+import { EditorState, type Transaction, type Plugin } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+
+// Core imports — these all resolve through Vite aliases to packages/core/src/
+import { parseDocx } from '@eigenpal/docx-core/docx/parser';
+import { toProseDoc, createEmptyDoc } from '@eigenpal/docx-core/prosemirror/conversion';
+import { fromProseDoc } from '@eigenpal/docx-core/prosemirror/conversion/fromProseDoc';
+import { singletonManager } from '@eigenpal/docx-core/prosemirror/schema';
+import { toFlowBlocks } from '@eigenpal/docx-core/layout-bridge/toFlowBlocks';
+import { measureParagraph } from '@eigenpal/docx-core/layout-bridge/measuring';
+import { layoutDocument } from '@eigenpal/docx-core/layout-engine';
+import { renderPages } from '@eigenpal/docx-core/layout-painter/renderPage';
+import type {
+  FlowBlock,
+  Measure,
+  ParagraphBlock,
+  TableBlock,
+  TableMeasure,
+  ImageBlock,
+  PageMargins,
+} from '@eigenpal/docx-core/layout-engine/types';
+import type { BlockLookup } from '@eigenpal/docx-core/layout-painter';
+import type { Document, SectionProperties } from '@eigenpal/docx-core/types/document';
+
+// ProseMirror CSS — must be imported for the hidden editor to work
+import 'prosemirror-view/style/prosemirror.css';
+import '@eigenpal/docx-core/prosemirror/editor.css';
+
+// ============================================================================
+// CONSTANTS
+// ============================================================================
+
+const DEFAULT_PAGE_WIDTH = 816; // 8.5in at 96dpi
+const DEFAULT_PAGE_HEIGHT = 1056; // 11in at 96dpi
+const DEFAULT_MARGINS: PageMargins = { top: 96, right: 96, bottom: 96, left: 96 };
+const DEFAULT_PAGE_GAP = 24;
+
+// ============================================================================
+// HELPERS
+// ============================================================================
+
+function twipsToPixels(twips: number): number {
+  return Math.round((twips / 1440) * 96);
+}
+
+function getPageSize(sp: SectionProperties | null | undefined) {
+  return {
+    w: sp?.pageWidth ? twipsToPixels(sp.pageWidth) : DEFAULT_PAGE_WIDTH,
+    h: sp?.pageHeight ? twipsToPixels(sp.pageHeight) : DEFAULT_PAGE_HEIGHT,
+  };
+}
+
+function getMargins(sp: SectionProperties | null | undefined): PageMargins {
+  return {
+    top: sp?.marginTop ? twipsToPixels(sp.marginTop) : DEFAULT_MARGINS.top,
+    right: sp?.marginRight ? twipsToPixels(sp.marginRight) : DEFAULT_MARGINS.right,
+    bottom: sp?.marginBottom ? twipsToPixels(sp.marginBottom) : DEFAULT_MARGINS.bottom,
+    left: sp?.marginLeft ? twipsToPixels(sp.marginLeft) : DEFAULT_MARGINS.left,
+  };
+}
+
+/**
+ * Simplified block measurement (no floating zone support for the minimal harness).
+ * Contributors can port the full measureBlocks from PagedEditor later.
+ */
+function measureBlock(block: FlowBlock, contentWidth: number): Measure {
+  switch (block.kind) {
+    case 'paragraph':
+      return measureParagraph(block as ParagraphBlock, contentWidth);
+
+    case 'table': {
+      const tb = block as TableBlock;
+      let columnWidths = tb.columnWidths ?? [];
+      if (columnWidths.length === 0 && tb.rows.length > 0) {
+        const colCount = tb.rows[0].cells.reduce((sum, cell) => sum + (cell.colSpan ?? 1), 0);
+        const equalWidth = contentWidth / Math.max(1, colCount);
+        columnWidths = Array(colCount).fill(equalWidth);
+      }
+
+      const rows = tb.rows.map((row) => {
+        let colIdx = 0;
+        const cells = row.cells.map((cell) => {
+          const colSpan = cell.colSpan ?? 1;
+          let cellWidth = 0;
+          for (let c = 0; c < colSpan && colIdx + c < columnWidths.length; c++) {
+            cellWidth += columnWidths[colIdx + c] ?? 0;
+          }
+          if (cellWidth === 0) cellWidth = cell.width ?? 100;
+          colIdx += colSpan;
+
+          const cellContentWidth = Math.max(1, cellWidth - 14); // ~7px padding each side
+          const blocks = cell.blocks.map((b) => measureBlock(b, cellContentWidth));
+          const height =
+            blocks.reduce(
+              (h, m) => h + ('totalHeight' in m ? (m as { totalHeight: number }).totalHeight : 0),
+              0
+            ) + 2; // padding
+
+          return { blocks, width: cellWidth, height, colSpan: cell.colSpan, rowSpan: cell.rowSpan };
+        });
+
+        const maxHeight = Math.max(24, ...cells.map((c) => c.height));
+        return { cells, height: maxHeight };
+      });
+
+      const totalWidth = columnWidths.reduce((s, w) => s + w, 0) || contentWidth;
+      const totalHeight = rows.reduce((h, r) => h + r.height, 0);
+      return { kind: 'table', rows, columnWidths, totalWidth, totalHeight } as TableMeasure;
+    }
+
+    case 'image': {
+      const ib = block as ImageBlock;
+      return { kind: 'image', width: ib.width ?? 100, height: ib.height ?? 100 };
+    }
+
+    case 'pageBreak':
+      return { kind: 'pageBreak' };
+
+    case 'columnBreak':
+      return { kind: 'columnBreak' };
+
+    case 'sectionBreak':
+      return { kind: 'sectionBreak' };
+
+    default:
+      return { kind: 'paragraph', lines: [], totalHeight: 0 };
+  }
+}
+
+function measureBlocks(blocks: FlowBlock[], contentWidth: number): Measure[] {
+  return blocks.map((b) => measureBlock(b, contentWidth));
+}
+
+// ============================================================================
+// COMPOSABLE
+// ============================================================================
+
+export interface UseDocxEditorOptions {
+  /** Container element for the hidden ProseMirror editor */
+  hiddenContainer: Ref<HTMLElement | null>;
+  /** Container element for the visible pages */
+  pagesContainer: Ref<HTMLElement | null>;
+  /** Whether the editor is read-only */
+  readOnly?: boolean;
+  /** Page gap in pixels */
+  pageGap?: number;
+  /** Callback on document change */
+  onChange?: (doc: Document) => void;
+  /** Callback on error */
+  onError?: (error: Error) => void;
+  /** Callback on selection change */
+  onSelectionUpdate?: () => void;
+}
+
+export function useDocxEditor(options: UseDocxEditorOptions) {
+  const {
+    hiddenContainer,
+    pagesContainer,
+    readOnly = false,
+    pageGap = DEFAULT_PAGE_GAP,
+    onChange,
+    onError,
+    onSelectionUpdate,
+  } = options;
+
+  // State
+  const document = shallowRef<Document | null>(null);
+  const editorView = shallowRef<EditorView | null>(null);
+  const isReady = ref(false);
+  const parseError = ref<string | null>(null);
+  /** Reactive snapshot of marks at cursor/selection-start, updated on every transaction */
+  const cursorMarks = ref<{ name: string; attrs: Record<string, any> }[]>([]);
+
+  // Use the singleton extension manager — same schema used by toProseDoc/commands
+  const mgr = singletonManager;
+
+  // ========================================================================
+  // Layout pipeline
+  // ========================================================================
+
+  function runLayoutPipeline(state: EditorState) {
+    const container = pagesContainer.value;
+    if (!container || !document.value) return;
+
+    const sp = document.value.package?.document?.finalSectionProperties ?? null;
+    const pageSize = getPageSize(sp);
+    const margins = getMargins(sp);
+    const contentWidth = pageSize.w - margins.left - margins.right;
+    const pageContentHeight = pageSize.h - margins.top - margins.bottom;
+    const theme = document.value.package?.theme ?? null;
+
+    try {
+      // Step 1: PM doc → flow blocks
+      const blocks = toFlowBlocks(state.doc, { theme, pageContentHeight });
+
+      // Step 2: Measure blocks
+      const measures = measureBlocks(blocks, contentWidth);
+
+      // Step 3: Layout
+      const newLayout = layoutDocument(blocks, measures, { pageSize, margins });
+
+      // Step 4: Build block lookup and paint
+      const blockLookup: BlockLookup = new Map();
+      for (let i = 0; i < blocks.length; i++) {
+        const block = blocks[i];
+        const measure = measures[i];
+        if (block && measure) {
+          blockLookup.set(String(block.id), { block, measure });
+        }
+      }
+
+      renderPages(newLayout.pages, container, {
+        pageGap,
+        showShadow: true,
+        pageBackground: '#fff',
+        blockLookup,
+        theme,
+      } as Parameters<typeof renderPages>[2]);
+
+      // renderPages sets display:flex on the container — fix scrolling
+      container.style.overflowY = 'auto';
+      container.style.minHeight = '0';
+      // Prevent page elements from stretching to fill the flex container
+      for (const child of Array.from(container.children)) {
+        (child as HTMLElement).style.flexShrink = '0';
+      }
+    } catch (err) {
+      console.error('[useDocxEditor] Layout pipeline error:', err);
+      onError?.(err instanceof Error ? err : new Error(String(err)));
+    }
+  }
+
+  // ========================================================================
+  // ProseMirror setup
+  // ========================================================================
+
+  function createEditorView() {
+    const host = hiddenContainer.value;
+    if (!host) return;
+
+    const doc = document.value
+      ? toProseDoc(document.value, {
+          styles: document.value.package?.styles ?? undefined,
+        })
+      : createEmptyDoc();
+
+    const plugins: Plugin[] = [...(mgr.getPlugins() ?? [])];
+
+    const state = EditorState.create({
+      doc,
+      schema: mgr.getSchema(),
+      plugins,
+    });
+
+    const view = new EditorView(host, {
+      state,
+      editable: () => !readOnly,
+      dispatchTransaction(transaction: Transaction) {
+        if (!view) return;
+        const newState = view.state.apply(transaction);
+        view.updateState(newState);
+
+        // Snapshot marks at cursor for reactive toolbar state.
+        // Must happen before any code that could throw.
+        // NOTE: $from.marks() at a text node boundary can return marks from the
+        // node BEFORE the selection start. For non-empty selections, read marks
+        // from the first text node inside the selection range instead.
+        let marks: readonly import('prosemirror-model').Mark[] = [];
+        if (newState.storedMarks) {
+          marks = newState.storedMarks;
+        } else {
+          const { from, to, empty } = newState.selection;
+          if (empty) {
+            marks = newState.selection.$from.marks();
+          } else {
+            // Read marks from first text node in selection range
+            newState.doc.nodesBetween(from, Math.min(from + 1, to), (node) => {
+              if (node.isText) {
+                marks = node.marks;
+                return false; // stop
+              }
+            });
+            if (!marks.length) marks = newState.selection.$from.marks();
+          }
+        }
+        cursorMarks.value = marks.map(m => ({ name: m.type.name, attrs: { ...m.attrs } }));
+
+        // Re-layout on doc changes
+        if (transaction.docChanged) {
+          runLayoutPipeline(newState);
+          // Notify parent about document change
+          try {
+            if (document.value) {
+              const updatedDoc = fromProseDoc(newState.doc, document.value);
+              onChange?.(updatedDoc);
+            }
+          } catch (err) {
+            console.error('[useDocxEditor] fromProseDoc error:', err);
+          }
+        }
+
+        // Notify about selection changes (for highlight overlay)
+        onSelectionUpdate?.();
+      },
+    });
+
+    editorView.value = view;
+    isReady.value = true;
+
+    // Initial layout
+    runLayoutPipeline(state);
+  }
+
+  function destroyEditorView() {
+    if (editorView.value) {
+      editorView.value.destroy();
+      editorView.value = null;
+    }
+    isReady.value = false;
+  }
+
+  // ========================================================================
+  // Document loading
+  // ========================================================================
+
+  async function loadBuffer(buffer: ArrayBuffer | Uint8Array | Blob | File) {
+    parseError.value = null;
+    isReady.value = false;
+
+    try {
+      let arrayBuf: ArrayBuffer;
+      if (buffer instanceof Blob || buffer instanceof File) {
+        arrayBuf = await buffer.arrayBuffer();
+      } else if (buffer instanceof Uint8Array) {
+        arrayBuf = buffer.buffer.slice(
+          buffer.byteOffset,
+          buffer.byteOffset + buffer.byteLength
+        ) as ArrayBuffer;
+      } else {
+        arrayBuf = buffer;
+      }
+
+      const doc = await parseDocx(arrayBuf);
+      document.value = doc;
+
+      // Recreate PM view with new document
+      destroyEditorView();
+      createEditorView();
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      parseError.value = error.message;
+      onError?.(error);
+    }
+  }
+
+  function loadDocument(doc: Document) {
+    parseError.value = null;
+    document.value = doc;
+    destroyEditorView();
+    createEditorView();
+  }
+
+  // ========================================================================
+  // Public API
+  // ========================================================================
+
+  async function save(): Promise<Blob | null> {
+    if (!editorView.value || !document.value) return null;
+
+    const { repackDocx, createDocx } = await import('@eigenpal/docx-core/docx/rezip');
+
+    const updatedDoc = fromProseDoc(editorView.value.state.doc, document.value);
+    let buffer: ArrayBuffer;
+    if (updatedDoc.originalBuffer) {
+      buffer = await repackDocx(updatedDoc);
+    } else {
+      buffer = await createDocx(updatedDoc);
+    }
+    return new Blob([buffer], {
+      type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    });
+  }
+
+  function focus() {
+    editorView.value?.focus();
+  }
+
+  function destroy() {
+    destroyEditorView();
+    document.value = null;
+  }
+
+  function getDocument(): Document | null {
+    return document.value;
+  }
+
+  // ========================================================================
+  // Lifecycle
+  // ========================================================================
+
+  onBeforeUnmount(() => {
+    destroy();
+  });
+
+  function getCommands() {
+    return mgr.getCommands();
+  }
+
+  return {
+    // State
+    editorView,
+    isReady,
+    parseError,
+    cursorMarks,
+
+    // Actions
+    loadBuffer,
+    loadDocument,
+    save,
+    focus,
+    destroy,
+    getDocument,
+    getCommands,
+    /** Force a re-layout without a doc change (e.g. after page-setup changes). */
+    reLayout() {
+      if (editorView.value) runLayoutPipeline(editorView.value.state);
+    },
+  };
+}
diff --git a/packages/vue/src/composables/useTableSelection.ts b/packages/vue/src/composables/useTableSelection.ts
new file mode 100644
index 00000000..fceb8bf5
--- /dev/null
+++ b/packages/vue/src/composables/useTableSelection.ts
@@ -0,0 +1,56 @@
+/**
+ * useTableSelection — Vue composable wrapping TableSelectionManager from core.
+ *
+ * Tracks selected table cell and provides table operations.
+ */
+
+import { ref, onBeforeUnmount } from 'vue';
+import {
+  TableSelectionManager,
+  findTableFromClick,
+} from '@eigenpal/docx-core/managers/TableSelectionManager';
+import type { CellCoordinates } from '@eigenpal/docx-core/managers/types';
+
+export function useTableSelection() {
+  const manager = new TableSelectionManager();
+  const selectedCell = ref<CellCoordinates | null>(null);
+
+  // Subscribe to manager changes
+  const unsubscribe = manager.subscribe((snapshot) => {
+    selectedCell.value = snapshot.selectedCell;
+  });
+
+  onBeforeUnmount(() => {
+    unsubscribe();
+  });
+
+  function handleCellClick(tableIndex: number, rowIndex: number, columnIndex: number) {
+    manager.selectCell({ tableIndex, rowIndex, columnIndex });
+  }
+
+  function handleClickTarget(target: EventTarget | null, container?: HTMLElement | null) {
+    const coords = findTableFromClick(target, container);
+    if (coords) {
+      manager.selectCell(coords);
+    } else {
+      manager.clearSelection();
+    }
+  }
+
+  function clearSelection() {
+    manager.clearSelection();
+  }
+
+  function isCellSelected(tableIndex: number, rowIndex: number, columnIndex: number): boolean {
+    return manager.isCellSelected(tableIndex, rowIndex, columnIndex);
+  }
+
+  return {
+    selectedCell,
+    handleCellClick,
+    handleClickTarget,
+    clearSelection,
+    isCellSelected,
+    manager,
+  };
+}
diff --git a/packages/vue/src/composables/useZoom.ts b/packages/vue/src/composables/useZoom.ts
new file mode 100644
index 00000000..25273365
--- /dev/null
+++ b/packages/vue/src/composables/useZoom.ts
@@ -0,0 +1,71 @@
+/**
+ * useZoom — Vue composable for document zoom control.
+ *
+ * Provides zoom state, keyboard/wheel handlers, and presets.
+ */
+
+import { ref, computed } from 'vue';
+
+const MIN_ZOOM = 0.25;
+const MAX_ZOOM = 4.0;
+const ZOOM_STEP = 0.1;
+const ZOOM_PRESETS = [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 2.0, 3.0, 4.0];
+
+export function useZoom(initialZoom = 1.0) {
+  const zoom = ref(Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, initialZoom)));
+
+  const zoomPercent = computed(() => Math.round(zoom.value * 100));
+  const isMinZoom = computed(() => zoom.value <= MIN_ZOOM);
+  const isMaxZoom = computed(() => zoom.value >= MAX_ZOOM);
+
+  function setZoom(level: number) {
+    zoom.value = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, Math.round(level * 100) / 100));
+  }
+
+  function zoomIn() {
+    setZoom(zoom.value + ZOOM_STEP);
+  }
+
+  function zoomOut() {
+    setZoom(zoom.value - ZOOM_STEP);
+  }
+
+  function resetZoom() {
+    setZoom(1.0);
+  }
+
+  function handleWheel(e: WheelEvent) {
+    if (!(e.ctrlKey || e.metaKey)) return;
+    e.preventDefault();
+    if (e.deltaY < 0) zoomIn();
+    else zoomOut();
+  }
+
+  function handleKeyDown(e: KeyboardEvent) {
+    if (!(e.ctrlKey || e.metaKey)) return;
+    if (e.key === '=' || e.key === '+') {
+      e.preventDefault();
+      zoomIn();
+    } else if (e.key === '-') {
+      e.preventDefault();
+      zoomOut();
+    } else if (e.key === '0') {
+      e.preventDefault();
+      resetZoom();
+    }
+  }
+
+  return {
+    zoom,
+    zoomPercent,
+    isMinZoom,
+    isMaxZoom,
+    setZoom,
+    zoomIn,
+    zoomOut,
+    resetZoom,
+    handleWheel,
+    handleKeyDown,
+    ZOOM_PRESETS,
+  };
+}
diff --git a/packages/vue/src/i18n/index.ts b/packages/vue/src/i18n/index.ts
new file mode 100644
index 00000000..2f1af7dd
--- /dev/null
+++ b/packages/vue/src/i18n/index.ts
@@ -0,0 +1,160 @@
+/**
+ * i18n system for Vue DOCX Editor
+ *
+ * Provides locale context and t() translation function with:
+ * - Deep merge of partial translations over English defaults
+ * - {variable} interpolation
+ * - ICU MessageFormat plurals
+ */
+
+import { inject, provide, computed, type InjectionKey, type App } from 'vue';
+import en from '../../i18n/en.json';
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+type AnyRecord = Record<string, unknown>;
+
+/** The full locale strings type, derived from en.json */
+export type LocaleStrings = typeof en;
+
+/** Partial translations (null = fall back to English) */
+export type Translations = {
+  [K in keyof LocaleStrings]?: LocaleStrings[K] extends Record<string, unknown>
+    ? { [J in keyof LocaleStrings[K]]?: LocaleStrings[K][J] | null }
+    : LocaleStrings[K] | null;
+} & { _lang?: string };
+
+// ============================================================================
+// HELPERS
+// ============================================================================
+
+function isRecord(v: unknown): v is AnyRecord {
+  return v !== null && typeof v === 'object' && !Array.isArray(v);
+}
+
+function deepMerge(base: AnyRecord, override: AnyRecord | undefined): AnyRecord {
+  if (!override) return base;
+  const result: AnyRecord = { ...base };
+  for (const key of Object.keys(override)) {
+    const overVal = override[key];
+    if (overVal === null) continue;
+    if (isRecord(base[key]) && isRecord(overVal)) {
+      result[key] = deepMerge(base[key], overVal);
+    } else if (overVal !== undefined) {
+      result[key] = overVal;
+    }
+  }
+  return result;
+}
+
+function getNestedValue(obj: AnyRecord, path: string): string | undefined {
+  let current: unknown = obj;
+  for (const part of path.split('.')) {
+    if (!isRecord(current)) return undefined;
+    current = current[part];
+  }
+  return typeof current === 'string' ? current : undefined;
+}
+
+function parseBranches(branchStr: string): Record<string, string> {
+  const parsed: Record<string, string> = {};
+  const regex = /(=\d+|\w+)\s*\{([^}]*)\}/g;
+  let match;
+  while ((match = regex.exec(branchStr)) !== null) {
+    parsed[match[1]] = match[2];
+  }
+  return parsed;
+}
+
+function formatMessage(
+  template: string,
+  vars?: Record<string, string | number>,
+  lang?: string
+): string {
+  if (!vars) return template;
+
+  const result = template.replace(
+    /\{(\w+),\s*plural,\s*((?:[^{}]|\{[^{}]*\})*)\}/g,
+    (full, varName, branchStr) => {
+      const count = Number(vars[varName]);
+      if (isNaN(count)) return full;
+
+      const parsed = parseBranches(branchStr);
+      const exact = parsed[`=${count}`];
+      if (exact !== undefined) return exact.replace(/#/g, String(count));
+
+      let category: string;
+      try {
+        category = new Intl.PluralRules(lang || 'en').select(count);
+      } catch {
+        category = count === 1 ? 'one' : 'other';
+      }
+
+      const text = parsed[category] ?? parsed['other'] ?? '';
+      return text.replace(/#/g, String(count));
+    }
+  );
+
+  return result.replace(/\{(\w+)\}/g, (_, key) => {
+    const val = vars[key];
+    return val !== undefined ? String(val) : `{${key}}`;
+  });
+}
+
+// ============================================================================
+// PROVIDE / INJECT
+// ============================================================================
+
+const LOCALE_KEY: InjectionKey<AnyRecord> = Symbol('docx-locale');
+const LANG_KEY: InjectionKey<string> = Symbol('docx-lang');
+
+/**
+ * Provide locale strings to descendant components.
+ * Call this in a parent component's setup():
+ *
+ *   provideLocale(myTranslations);
+ */
+export function provideLocale(i18n?: Translations) {
+  const i18nRecord = i18n as AnyRecord | undefined;
+  const lang = typeof i18nRecord?._lang === 'string' ? i18nRecord._lang : 'en';
+  const merged = deepMerge(en as AnyRecord, i18nRecord);
+  provide(LOCALE_KEY, merged);
+  provide(LANG_KEY, lang);
+}
+
+/**
+ * useTranslation composable — returns t(key, vars?) function.
+ *
+ * Usage:
+ *   const { t } = useTranslation();
+ *   t('toolbar.bold')
+ *   t('dialogs.findReplace.matchCount', { current: 3, total: 15 })
+ */
+export function useTranslation() {
+  const strings = inject(LOCALE_KEY, en as AnyRecord);
+  const lang = inject(LANG_KEY, 'en');
+
+  function t(key: string, vars?: Record<string, string | number>): string {
+    const value = getNestedValue(strings, key);
+    return formatMessage(value ?? key, vars, lang);
+  }
+
+  return { t };
+}
+
+/**
+ * Vue plugin for i18n — install via app.use(i18nPlugin, translations)
+ */
+export const i18nPlugin = {
+  install(app: App, i18n?: Translations) {
+    const i18nRecord = i18n as AnyRecord | undefined;
+    const lang = typeof i18nRecord?._lang === 'string' ? i18nRecord._lang : 'en';
+    const merged = deepMerge(en as AnyRecord, i18nRecord);
+    app.provide(LOCALE_KEY, merged);
+    app.provide(LANG_KEY, lang);
+  },
+};
+
+export { en as defaultLocale };
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index 65bb80bc..2702c79c 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -4,7 +4,57 @@
 // This package provides Vue 3 components wrapping @eigenpal/docx-core.
 // Contributions welcome! See the repository README for guidelines.
 
-// renderAsync stub
+// Components
+export { default as DocxEditorVue } from './components/DocxEditorVue.vue';
+export { default as BasicToolbar } from './components/BasicToolbar.vue';
+export { default as FindReplaceDialog } from './components/FindReplaceDialog.vue';
+export { default as TableToolbar } from './components/TableToolbar.vue';
+export { default as InsertTableDialog } from './components/InsertTableDialog.vue';
+export { default as InsertImageDialog } from './components/InsertImageDialog.vue';
+export { default as HyperlinkDialog } from './components/HyperlinkDialog.vue';
+export { default as InsertSymbolDialog } from './components/InsertSymbolDialog.vue';
+export { default as ImageEditOverlay } from './components/ImageEditOverlay.vue';
+export { default as ImagePropertiesDialog } from './components/ImagePropertiesDialog.vue';
+export { default as PageSetupDialog } from './components/PageSetupDialog.vue';
+export { default as DocumentOutline } from './components/DocumentOutline.vue';
+export { default as KeyboardShortcutsDialog } from './components/KeyboardShortcutsDialog.vue';
+export { default as TextContextMenu } from './components/TextContextMenu.vue';
+export { default as UnifiedSidebar } from './components/sidebar/UnifiedSidebar.vue';
+export { default as CommentCard } from './components/sidebar/CommentCard.vue';
+export { default as TrackedChangeCard } from './components/sidebar/TrackedChangeCard.vue';
+export { default as AddCommentCard } from './components/sidebar/AddCommentCard.vue';
+export { default as TablePropertiesDialog } from './components/TablePropertiesDialog.vue';
+export { default as TableStyleGallery } from './components/TableStyleGallery.vue';
+export { default as ImagePositionDialog } from './components/ImagePositionDialog.vue';
+export { default as DocumentName } from './components/DocumentName.vue';
+export { default as MenuBar } from './components/MenuBar.vue';
+export { default as PrintButton } from './components/PrintButton.vue';
+export { default as HorizontalRuler } from './components/HorizontalRuler.vue';
+export { default as VerticalRuler } from './components/VerticalRuler.vue';
+export { default as ResponsiveToolbar } from './components/ResponsiveToolbar.vue';
+
+// Tier 8 — Advanced Features
+export { default as FootnotePropertiesDialog } from './components/FootnotePropertiesDialog.vue';
+export { default as UnsavedIndicator } from './components/UnsavedIndicator.vue';
+export { default as ErrorBoundary } from './components/ErrorBoundary.vue';
+export { default as PasteSpecialDialog } from './components/PasteSpecialDialog.vue';
+export { default as InlineHeaderFooterEditor } from './components/InlineHeaderFooterEditor.vue';
+export { default as AIContextMenu } from './components/AIContextMenu.vue';
+export { default as AIResponsePreview } from './components/AIResponsePreview.vue';
+
+// Composables
+export { useDocxEditor } from './composables/useDocxEditor';
+export { useZoom } from './composables/useZoom';
+export { useTableSelection } from './composables/useTableSelection';
+export { useAutoSave } from './composables/useAutoSave';
+export type { UseDocxEditorOptions } from './composables/useDocxEditor';
+export type { UseAutoSaveOptions } from './composables/useAutoSave';
+
+// i18n
+export { useTranslation, provideLocale, i18nPlugin, defaultLocale } from './i18n';
+export type { LocaleStrings, Translations } from './i18n';
+
+// renderAsync
 export { renderAsync } from './renderAsync';
 export type { VueRenderAsyncOptions } from './renderAsync';
 
diff --git a/packages/vue/src/renderAsync.ts b/packages/vue/src/renderAsync.ts
index 02a0376e..92ec9417 100644
--- a/packages/vue/src/renderAsync.ts
+++ b/packages/vue/src/renderAsync.ts
@@ -1,13 +1,12 @@
 /**
- * Vue renderAsync — scaffold for community implementation.
- *
- * This is a placeholder that defines the expected API.
- * A Vue contributor can implement this using `createApp().mount()`.
+ * Vue renderAsync — mounts a DocxEditorVue into a container element.
  */
 
+import { createApp, h, type App } from 'vue';
+import DocxEditorVue from './components/DocxEditorVue.vue';
 import type { EditorHandle } from '@eigenpal/docx-core';
 
-/** Options for the Vue renderAsync (to be defined by implementor). */
+/** Options for the Vue renderAsync. */
 export interface VueRenderAsyncOptions {
   readOnly?: boolean;
   showToolbar?: boolean;
@@ -21,13 +20,59 @@ export interface VueRenderAsyncOptions {
  * @param options - Editor configuration
  * @returns A handle implementing the framework-agnostic EditorHandle interface
  */
-export function renderAsync(
-  _input: ArrayBuffer | Uint8Array | Blob | File,
-  _container: HTMLElement,
-  _options: VueRenderAsyncOptions = {}
+export async function renderAsync(
+  input: ArrayBuffer | Uint8Array | Blob | File,
+  container: HTMLElement,
+  options: VueRenderAsyncOptions = {}
 ): Promise<EditorHandle> {
-  throw new Error(
-    '@eigenpal/docx-editor-vue renderAsync is not yet implemented. ' +
-      'Community contributions welcome!'
-  );
+  // Convert to ArrayBuffer upfront — loadBuffer also handles this,
+  // but we need a stable value for the prop.
+  let buffer: ArrayBuffer;
+  if (input instanceof Blob || input instanceof File) {
+    buffer = await input.arrayBuffer();
+  } else if (input instanceof Uint8Array) {
+    buffer = input.buffer.slice(
+      input.byteOffset,
+      input.byteOffset + input.byteLength
+    ) as ArrayBuffer;
+  } else {
+    buffer = input;
+  }
+
+  let editorRef: any = null;
+
+  const app: App = createApp({
+    setup() {
+      return () =>
+        h(DocxEditorVue, {
+          documentBuffer: buffer,
+          showToolbar: options.showToolbar ?? true,
+          readOnly: options.readOnly ?? false,
+          ref: (el: any) => {
+            editorRef = el;
+          },
+        });
+    },
+  });
+
+  app.mount(container);
+
+  // Wait a tick for mount to complete
+  await new Promise((resolve) => setTimeout(resolve, 0));
+
+  return {
+    save: async () => {
+      return editorRef?.save() ?? null;
+    },
+    getDocument: () => {
+      return editorRef?.getDocument() ?? null;
+    },
+    focus: () => {
+      editorRef?.focus();
+    },
+    destroy: () => {
+      editorRef?.destroy();
+      app.unmount();
+    },
+  };
 }
diff --git a/packages/vue/src/shims-vue.d.ts b/packages/vue/src/shims-vue.d.ts
new file mode 100644
index 00000000..0c729c99
--- /dev/null
+++ b/packages/vue/src/shims-vue.d.ts
@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}