@zeke-02/docx-editor-core 0.1.0

package/dist/prosemirror/editor.css

@@ -0,0 +1,823 @@
+/**
+ * ProseMirror Editor Styles
+ *
+ * Provides page-like layout similar to Word/Google Docs
+ */
+
+/* Outer wrapper - handles scrolling and background */
+.prosemirror-editor-wrapper {
+  min-height: 100%;
+  /* overflow, background, and padding set via inline styles */
+}
+
+/* Zoom container - sized to match scaled content for proper scrolling */
+.prosemirror-zoom-container {
+  /* Width, height, margin set via inline styles based on zoom */
+}
+
+/* Editor container - the transform target */
+.prosemirror-editor {
+  /* Transform applied via inline styles for zoom */
+  /* CSS variables (--page-width, etc.) set via inline styles */
+  /* Width is set to page width so transform scales correctly */
+  width: var(--page-width, 8.5in);
+}
+
+/* Editor content area (the actual editable content) */
+.prosemirror-editor .ProseMirror {
+  background: white;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  /* Use CSS variables for page layout, with fallbacks */
+  width: var(--page-width, 8.5in);
+  /* min-height creates a single page appearance */
+  min-height: var(--page-height, 11in);
+  padding-top: var(--margin-top, 72px);
+  padding-bottom: var(--margin-bottom, 72px);
+  padding-left: var(--margin-left, 72px);
+  padding-right: var(--margin-right, 72px);
+  /* Remove max-width constraint - let the page be its natural size */
+  outline: none;
+  /* Default font - will be overridden by inline styles from DOCX */
+  font-family: 'Calibri', 'Arial', sans-serif;
+  font-size: 11pt;
+  /* DO NOT set line-height here - it overrides inline paragraph styles */
+  /* line-height is set per-paragraph via inline styles from paragraphAttrsToDOMStyle */
+  color: #000;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  /* Tab size for proper tab character rendering (0.5 inch = 48px at 96dpi) */
+  tab-size: 48;
+  -moz-tab-size: 48;
+  /* Ensure box-sizing includes padding in width calculation */
+  box-sizing: border-box;
+  /* Page break behavior - show page breaks visually */
+  position: relative;
+}
+
+/* ============================================================================
+   PAGE BREAK STYLES - Visual page boundaries like Word/Google Docs
+   ============================================================================ */
+
+/* Page break indicator - inserted by PageBreakPlugin */
+.prosemirror-editor .ProseMirror .docx-page-break {
+  display: block;
+  position: relative;
+  height: 40px;
+  margin: 0 calc(-1 * var(--margin-left, 72px));
+  margin-right: calc(-1 * var(--margin-right, 72px));
+  background: var(--doc-bg);
+  border: none;
+  pointer-events: none;
+}
+
+/* Top shadow of next page */
+.prosemirror-editor .ProseMirror .docx-page-break::before {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 8px;
+  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.08));
+}
+
+/* Bottom shadow of previous page */
+.prosemirror-editor .ProseMirror .docx-page-break::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 8px;
+  background: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.08));
+}
+
+/* Explicit page break (from DOCX pageBreakBefore) */
+.prosemirror-editor .ProseMirror [data-page-break-before='true'] {
+  break-before: page;
+}
+
+/* Page break dashed line indicator (alternative style) */
+.prosemirror-editor .ProseMirror .docx-page-break-line {
+  display: block;
+  position: relative;
+  height: 1px;
+  margin: 20px calc(-1 * var(--margin-left, 72px));
+  margin-right: calc(-1 * var(--margin-right, 72px));
+  border-top: 1px dashed var(--doc-border);
+}
+
+.prosemirror-editor .ProseMirror .docx-page-break-line::before {
+  content: 'Page Break';
+  position: absolute;
+  top: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--doc-bg);
+  padding: 0 8px;
+  font-size: 10px;
+  color: var(--doc-text-muted);
+  white-space: nowrap;
+}
+
+/* Focus state */
+.prosemirror-editor .ProseMirror:focus {
+  outline: none;
+}
+
+/* Paragraphs - ensure they display as blocks with proper spacing */
+/* IMPORTANT: Do NOT set margin, line-height, or font here - use inline styles from DOCX */
+.prosemirror-editor .ProseMirror p {
+  display: block;
+  /* Default margin only when no inline style is set */
+  margin: 0;
+  padding: 0;
+  min-height: 1em;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  /* Default line height - can be overridden by inline styles */
+  line-height: normal;
+}
+
+/* Empty paragraph placeholder */
+.prosemirror-editor .ProseMirror p:empty::before {
+  content: '\00a0';
+}
+
+/* Inline spans for formatting - ensure they don't break layout */
+.prosemirror-editor .ProseMirror span {
+  display: inline;
+  white-space: pre-wrap;
+}
+
+/* List styles */
+.prosemirror-editor .ProseMirror .docx-list-bullet,
+.prosemirror-editor .ProseMirror .docx-list-numbered {
+  position: relative;
+  /* Increased padding to accommodate longer markers like "1.1.1." */
+  padding-left: 48px;
+}
+
+/* Use the computed marker from DOCX when available */
+.prosemirror-editor .ProseMirror [data-list-marker]::before {
+  content: attr(data-list-marker);
+  position: absolute;
+  /* Position marker at right edge of the marker area so it aligns with content */
+  left: 0;
+  width: 44px;
+  text-align: right;
+  white-space: nowrap;
+}
+
+/* Fallback for bullet lists without marker */
+.prosemirror-editor .ProseMirror .docx-list-bullet:not([data-list-marker])::before {
+  content: '•';
+  position: absolute;
+  left: 0;
+  width: 44px;
+  text-align: right;
+}
+
+/* Fallback for numbered lists without marker - use CSS counters */
+.prosemirror-editor .ProseMirror .docx-list-numbered:not([data-list-marker]) {
+  counter-increment: list-counter;
+}
+
+.prosemirror-editor .ProseMirror .docx-list-decimal:not([data-list-marker])::before {
+  content: counter(list-counter) '.';
+  position: absolute;
+  left: 0;
+  width: 44px;
+  text-align: right;
+}
+
+.prosemirror-editor .ProseMirror .docx-list-lower-roman:not([data-list-marker])::before {
+  content: counter(list-counter, lower-roman) '.';
+  position: absolute;
+  left: 0;
+  width: 44px;
+  text-align: right;
+}
+
+.prosemirror-editor .ProseMirror .docx-list-upper-roman:not([data-list-marker])::before {
+  content: counter(list-counter, upper-roman) '.';
+  position: absolute;
+  left: 0;
+  width: 44px;
+  text-align: right;
+}
+
+.prosemirror-editor .ProseMirror .docx-list-lower-alpha:not([data-list-marker])::before {
+  content: counter(list-counter, lower-alpha) '.';
+  position: absolute;
+  left: 0;
+  width: 44px;
+  text-align: right;
+}
+
+.prosemirror-editor .ProseMirror .docx-list-upper-alpha:not([data-list-marker])::before {
+  content: counter(list-counter, upper-alpha) '.';
+  position: absolute;
+  left: 0;
+  width: 44px;
+  text-align: right;
+}
+
+/* Reset counter at level 0 for fallback */
+.prosemirror-editor .ProseMirror .docx-list-level-0:not([data-list-marker]):first-of-type {
+  counter-reset: list-counter;
+}
+
+/* Indent levels */
+.prosemirror-editor .ProseMirror .docx-list-level-1 {
+  margin-left: 0.5in;
+}
+.prosemirror-editor .ProseMirror .docx-list-level-2 {
+  margin-left: 1in;
+}
+.prosemirror-editor .ProseMirror .docx-list-level-3 {
+  margin-left: 1.5in;
+}
+.prosemirror-editor .ProseMirror .docx-list-level-4 {
+  margin-left: 2in;
+}
+.prosemirror-editor .ProseMirror .docx-list-level-5 {
+  margin-left: 2.5in;
+}
+.prosemirror-editor .ProseMirror .docx-list-level-6 {
+  margin-left: 3in;
+}
+.prosemirror-editor .ProseMirror .docx-list-level-7 {
+  margin-left: 3.5in;
+}
+.prosemirror-editor .ProseMirror .docx-list-level-8 {
+  margin-left: 4in;
+}
+
+/* Selection styling */
+.prosemirror-editor .ProseMirror ::selection {
+  background: rgba(66, 133, 244, 0.3);
+}
+
+/* Placeholder styling */
+.prosemirror-editor[data-placeholder]::before {
+  content: attr(data-placeholder);
+  color: #aaa;
+  position: absolute;
+  pointer-events: none;
+}
+
+/* ============================================================================
+   IMAGE STYLES - Word-like image rendering
+   ============================================================================
+
+   DOCX images have three main display modes:
+   1. Inline - flows with text like a character (displayMode='inline')
+   2. Float - text wraps around image (displayMode='float', cssFloat='left'|'right')
+   3. Block - centered on its own line (displayMode='block')
+*/
+
+/* Base image styling - all images */
+.prosemirror-editor .ProseMirror img.docx-image {
+  /* IMPORTANT: Override global CSS reset that sets img { display: block } */
+  /* Default to inline for inline images - block/float set via inline style */
+  display: inline;
+  /* Dimensions set via inline styles, but constrain to page */
+  max-width: 100%;
+  /* Maintain aspect ratio when width-constrained */
+  object-fit: contain;
+  /* Vertical alignment for inline images - aligns bottom of image with text baseline */
+  vertical-align: baseline;
+  /* Prevent selection outline issues */
+  outline: none;
+}
+
+/* Floating images - text wraps around */
+.prosemirror-editor .ProseMirror img.docx-image-float {
+  /* Float direction set via inline style */
+  /* Margins set via inline style based on wrap distances */
+}
+
+/* Left-floated images - text wraps on right side */
+.prosemirror-editor .ProseMirror img.docx-image-float-left {
+  clear: left;
+}
+
+/* Right-floated images - text wraps on left side */
+.prosemirror-editor .ProseMirror img.docx-image-float-right {
+  clear: right;
+}
+
+/* Block images - centered on their own line */
+.prosemirror-editor .ProseMirror img.docx-image-block {
+  /* display:block and margin:auto set via inline style */
+  clear: both;
+}
+
+/* Paragraphs containing only a block image: remove text-indent and center */
+.prosemirror-editor .ProseMirror p:has(> img.docx-image-block:only-child) {
+  text-indent: 0 !important;
+  text-align: center;
+}
+
+/* Clear floats after paragraphs containing floated images */
+.prosemirror-editor .ProseMirror p:has(img.docx-image-float)::after {
+  content: '';
+  display: table;
+  clear: both;
+}
+
+/* Selected image indicator */
+.prosemirror-editor .ProseMirror img.docx-image.ProseMirror-selectednode {
+  outline: 2px solid var(--doc-primary, #4285f4);
+  outline-offset: 2px;
+  cursor: grab;
+}
+
+/* Image dragging state */
+.prosemirror-editor .ProseMirror.pm-image-dragging img.docx-image.ProseMirror-selectednode {
+  opacity: 0.4;
+  outline: 2px dashed var(--doc-primary, #4285f4);
+  cursor: grabbing;
+}
+
+/* Fallback for images without docx-image class */
+.prosemirror-editor .ProseMirror img:not(.docx-image) {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Shapes */
+.prosemirror-editor .ProseMirror .docx-shape {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 0;
+  cursor: pointer;
+}
+
+.prosemirror-editor .ProseMirror .docx-shape.ProseMirror-selectednode {
+  outline: 2px solid var(--doc-primary, #4285f4);
+  outline-offset: 2px;
+}
+
+/* Text boxes */
+.prosemirror-editor .ProseMirror .docx-textbox {
+  border-radius: 2px;
+  margin: 4px 0;
+  cursor: text;
+}
+
+.prosemirror-editor .ProseMirror .docx-textbox.ProseMirror-selectednode {
+  outline: 2px solid var(--doc-primary, #4285f4);
+  outline-offset: 2px;
+}
+
+/* Links */
+.prosemirror-editor .ProseMirror a {
+  color: var(--doc-link);
+  text-decoration: underline;
+}
+
+.prosemirror-editor .ProseMirror a:hover {
+  color: var(--doc-primary-hover);
+}
+
+/* Footnote/Endnote references */
+.prosemirror-editor .ProseMirror .docx-footnote-ref,
+.prosemirror-editor .ProseMirror .docx-endnote-ref {
+  color: var(--doc-link, #0066cc);
+  cursor: pointer;
+  vertical-align: super;
+  font-size: smaller;
+}
+
+.prosemirror-editor .ProseMirror .docx-footnote-ref:hover,
+.prosemirror-editor .ProseMirror .docx-endnote-ref:hover {
+  text-decoration: underline;
+}
+
+/* Horizontal rule */
+.prosemirror-editor .ProseMirror hr {
+  border: none;
+  border-top: 1px solid #000;
+  margin: 12pt 0;
+  height: 0;
+}
+
+/* ============================================================================
+   TABLE STYLES
+   ============================================================================ */
+
+/* Table container */
+.prosemirror-editor .ProseMirror table.docx-table {
+  border-collapse: collapse;
+  margin: 12pt 0;
+  /* Constrain table to fit within the page - prevent overflow */
+  max-width: 100%;
+}
+
+/* Table cells */
+.prosemirror-editor .ProseMirror td.docx-table-cell,
+.prosemirror-editor .ProseMirror th.docx-table-header {
+  /* Borders are set via inline styles from DOCX - no default border here */
+  /* to avoid conflicting with per-side border styling */
+  padding: 4px 8px;
+  vertical-align: top;
+  min-width: 30px;
+  /* Text wrapping handled via inline styles based on noWrap attribute */
+}
+
+/* Table header cells are structural; DOCX text formatting comes from marks/styles. */
+.prosemirror-editor .ProseMirror th.docx-table-header {
+  font-weight: inherit;
+  text-align: inherit;
+}
+
+/* Cell content - paragraphs inside cells */
+.prosemirror-editor .ProseMirror td p,
+.prosemirror-editor .ProseMirror th p {
+  margin: 0;
+  padding: 0;
+  min-height: auto;
+}
+
+/* First paragraph in cell shouldn't have top margin */
+.prosemirror-editor .ProseMirror td p:first-child,
+.prosemirror-editor .ProseMirror th p:first-child {
+  margin-top: 0;
+}
+
+/* Last paragraph in cell shouldn't have bottom margin */
+.prosemirror-editor .ProseMirror td p:last-child,
+.prosemirror-editor .ProseMirror th p:last-child {
+  margin-bottom: 0;
+}
+
+/* Active cell (cursor is inside this cell) — subtle outline so user knows which cell will be affected */
+.prosemirror-editor .ProseMirror .activeCell {
+  outline: 2px solid rgba(66, 133, 244, 0.5);
+  outline-offset: -2px;
+}
+
+/* Selected cell highlight (multi-cell CellSelection) */
+.prosemirror-editor .ProseMirror .selectedCell {
+  background-color: rgba(66, 133, 244, 0.15);
+}
+
+/* Table selection */
+.prosemirror-editor .ProseMirror .selectedCell::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: rgba(66, 133, 244, 0.1);
+  pointer-events: none;
+}
+
+/* Nested tables */
+.prosemirror-editor .ProseMirror table table {
+  margin: 4px 0;
+}
+
+/* ============================================================================
+   TABLE COLUMN RESIZE
+   ============================================================================ */
+
+/* Column resize handle - visible on hover */
+.prosemirror-editor .ProseMirror .column-resize-handle {
+  position: absolute;
+  right: -2px;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  background-color: rgba(66, 133, 244, 0.5);
+  cursor: col-resize;
+  z-index: 20;
+}
+
+/* Make cells position relative for resize handle positioning */
+.prosemirror-editor .ProseMirror td.docx-table-cell,
+.prosemirror-editor .ProseMirror th.docx-table-header {
+  position: relative;
+}
+
+/* Cursor change when resizing */
+.prosemirror-editor .ProseMirror.resize-cursor {
+  cursor: col-resize;
+}
+
+/* Hide resize handle when not hovering the table, show on hover */
+.prosemirror-editor .ProseMirror table:not(:hover) .column-resize-handle {
+  background-color: transparent;
+}
+
+.prosemirror-editor .ProseMirror table:hover .column-resize-handle {
+  background-color: rgba(66, 133, 244, 0.3);
+}
+
+/* Highlight resize handle on direct hover */
+.prosemirror-editor .ProseMirror .column-resize-handle:hover {
+  background-color: rgba(66, 133, 244, 0.7);
+}
+
+/* ============================================================================
+   TAB STYLES
+   ============================================================================ */
+
+/* Tab character - renders as inline block with minimum width */
+.prosemirror-editor .ProseMirror span.docx-tab {
+  display: inline-block;
+  min-width: 48px; /* 0.5 inch default tab stop */
+  white-space: pre;
+  /* Align to tab grid using CSS */
+  background: transparent;
+}
+
+/* Tab leader styles (for future enhancement) */
+.prosemirror-editor .ProseMirror span.docx-tab[data-leader='dot']::before {
+  content: '...........';
+  position: absolute;
+  color: inherit;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.prosemirror-editor .ProseMirror span.docx-tab[data-leader='hyphen']::before {
+  content: '-----------';
+  position: absolute;
+  color: inherit;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.prosemirror-editor .ProseMirror span.docx-tab[data-leader='underscore']::before {
+  content: '___________';
+  position: absolute;
+  color: inherit;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+/* ============================================================================
+   TEXT TRANSFORM STYLES - All caps, small caps
+   ============================================================================ */
+
+/* All caps (w:caps) - transforms text to uppercase */
+.prosemirror-editor .ProseMirror .docx-run-all-caps {
+  text-transform: uppercase;
+}
+
+/* Small caps (w:smallCaps) - displays lowercase as smaller capitals */
+.prosemirror-editor .ProseMirror .docx-run-small-caps {
+  font-variant: small-caps;
+}
+
+/* Section break indicator */
+.docx-section-break {
+  position: relative;
+}
+.docx-section-break::after {
+  content: 'Section Break (' attr(data-section-break) ')';
+  display: block;
+  text-align: center;
+  font-size: 9px;
+  color: var(--doc-text-muted, #9ca3af);
+  border-top: 1px dashed var(--doc-border, #d1d5db);
+  margin-top: 4px;
+  padding-top: 2px;
+  pointer-events: none;
+}
+
+/* ============================================================================
+   IMAGE DROP INDICATOR - Shows where a dragged image will land
+   ============================================================================ */
+
+/* Custom drop indicator (from ImageDragExtension) */
+.prosemirror-editor .ProseMirror .pm-drop-indicator {
+  position: absolute;
+  width: 2px;
+  background: var(--doc-primary, #4285f4);
+  pointer-events: none;
+  z-index: 50;
+}
+
+/* prosemirror-dropcursor styling */
+.prosemirror-editor .ProseMirror .ProseMirror-dropcursor {
+  z-index: 50;
+}
+
+/* Page content area — show text cursor when hovering over editable content */
+.layout-page-content {
+  cursor: text;
+}
+
+/* Header/footer areas — double-click hint */
+.layout-page-header,
+.layout-page-footer {
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+.layout-page-header:hover,
+.layout-page-footer:hover {
+  background-color: rgba(37, 99, 235, 0.06);
+}
+/* Show "Double-click to edit" hint on hover when area is empty */
+.layout-page-header:empty:hover::after {
+  content: 'Double-click to add header';
+  display: block;
+  text-align: center;
+  color: #9ca3af;
+  font-size: 11px;
+  padding: 4px 0;
+}
+.layout-page-footer:empty:hover::after {
+  content: 'Double-click to add footer';
+  display: block;
+  text-align: center;
+  color: #9ca3af;
+  font-size: 11px;
+  padding: 4px 0;
+}
+
+/*
+ * Phase 5 of HF editing unification (openspec/changes/unify-hf-editing/):
+ * the inline overlay no longer mounts its own EditorView — the painter is
+ * the visible HF renderer and the persistent hidden HF PM is the sole
+ * editor. The entire `.hf-editor-pm` rule block that lived here existed
+ * only to make PM's `toDOM` table match the painter's flex layout; with
+ * the renderer unified, those workarounds (font-strut zeroing, `top:
+ * 0.4em` shim, table-layout overrides, line-height resets) are deleted
+ * by construction. Issue #468's class of bug is gone.
+ */
+
+/* ============================================================================
+   INLINE HEADER/FOOTER EDITING — Dim body, separator bar, dotted borders
+   ============================================================================ */
+
+/* Dim body content when editing header/footer */
+.paged-editor--hf-editing .layout-page-content {
+  opacity: 0.4;
+  pointer-events: none;
+  transition: opacity 0.15s ease;
+}
+
+/* Dotted border on active header area */
+.paged-editor--editing-header .layout-page-header {
+  border-bottom: 1px dotted #4285f4;
+}
+
+/* Dotted border on active footer area */
+.paged-editor--editing-footer .layout-page-footer {
+  border-top: 1px dotted #4285f4;
+}
+
+/*
+ * HF editing unification phase 2 (openspec/changes/unify-hf-editing/):
+ * we used to hide the painter's HF region during edit and show the inline
+ * overlay's PM-rendered `<table>` on top. Now the painter is the sole
+ * visible renderer in both modes — the overlay's PM container moves
+ * off-screen instead (see InlineHeaderFooterEditor.tsx). Keeping the
+ * dotted-border affordance above; everything painter-related stays visible.
+ */
+
+/* Remove hover effect on header/footer when in editing mode */
+.paged-editor--hf-editing .layout-page-header:hover,
+.paged-editor--hf-editing .layout-page-footer:hover {
+  background-color: transparent;
+}
+
+/* =============================================================================
+ * Tracked structural revisions — painter + ProseMirror DOM cues
+ *
+ * Lives in core because both React and Vue painters/PM trees emit the same
+ * class set via toDOM and renderParagraph. Color palette matches the
+ * insertion/deletion mark colors (#2e7d32 green, #c62828 red) used by
+ * InsertionExtension / DeletionExtension.
+ * ============================================================================= */
+
+/* Paragraph mark — painter fragment (renderParagraph.ts) */
+.layout-revision-pmark {
+  position: relative;
+}
+.layout-revision-pmark::before {
+  content: '';
+  position: absolute;
+  left: -10px;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  pointer-events: none;
+}
+.layout-revision-ins.layout-revision-pmark::before {
+  background-color: #2e7d32;
+}
+.layout-revision-del.layout-revision-pmark::before {
+  background-color: #c62828;
+}
+/* Pilcrow glyph — appended into the last line element by the painter so it
+   sits inline with the text instead of as a ::after pseudo on the fragment
+   (which would render as its own block row below the line). */
+.layout-revision-pmark-glyph {
+  display: inline;
+  margin-left: 2px;
+  font-weight: normal;
+  opacity: 0.75;
+  pointer-events: none;
+}
+.layout-revision-pmark-glyph.layout-revision-ins {
+  color: #2e7d32;
+}
+.layout-revision-pmark-glyph.layout-revision-del {
+  color: #c62828;
+  text-decoration: line-through;
+}
+
+/* Paragraph mark — hidden ProseMirror DOM (ParagraphExtension toDOM) */
+.ep-revision-pmark {
+  padding-left: 6px;
+  box-shadow: inset 2px 0 0 currentColor;
+}
+.ep-revision-pmark.ep-revision-ins {
+  color: #2e7d32;
+}
+.ep-revision-pmark.ep-revision-del {
+  color: #c62828;
+}
+
+/* Tracked row — colored left margin bar. Hidden ProseMirror table uses
+   normal block flow so we paint on the per-cell child (one bar per row).
+   The painted layout uses absolutely-positioned cells inside a relative
+   `.layout-table-row`, so a single ::before pseudo on the row draws one
+   continuous bar on the left edge — much cleaner than stamping a bar on
+   every cell child. */
+.ep-revision-row {
+  position: relative;
+}
+.layout-table-row.ep-revision-row::before {
+  content: '';
+  position: absolute;
+  left: -10px;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  pointer-events: none;
+}
+.layout-table-row.ep-revision-row.ep-revision-ins::before {
+  background-color: #2e7d32;
+}
+.layout-table-row.ep-revision-row.ep-revision-del::before {
+  background-color: #c62828;
+}
+
+/* Whole-table tracked insertion / deletion — one tall bar in the page
+   margin to the LEFT of the table. Matches the paragraph change-bar
+   visual (`.layout-revision-pmark::before`) so the user sees a
+   consistent margin indicator for any tracked block. The painter sets
+   `overflow: visible` on tracked tables so this pseudo can extend
+   beyond the table's own bounds into the page padding area. */
+.layout-table.ep-revision-table::before {
+  content: '';
+  position: absolute;
+  left: -10px;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  pointer-events: none;
+}
+.layout-table.ep-revision-table.ep-revision-ins::before {
+  background-color: #2e7d32;
+}
+.layout-table.ep-revision-table.ep-revision-del::before {
+  background-color: #c62828;
+}
+/* Hidden PM DOM path — kept for the off-screen editing surface. */
+.ep-revision-row:not(.layout-table-row).ep-revision-ins > * {
+  box-shadow: inset 3px 0 0 #2e7d32;
+}
+.ep-revision-row:not(.layout-table-row).ep-revision-del > * {
+  box-shadow: inset 3px 0 0 #c62828;
+  text-decoration: line-through;
+  text-decoration-color: rgba(198, 40, 40, 0.6);
+}
+
+/* Tracked cell — colored top border + faint background tint */
+.ep-revision-cell.ep-revision-ins {
+  box-shadow: inset 0 3px 0 #2e7d32;
+  background-color: rgba(46, 125, 50, 0.05);
+}
+.ep-revision-cell.ep-revision-del {
+  box-shadow: inset 0 3px 0 #c62828;
+  background-color: rgba(198, 40, 40, 0.05);
+  text-decoration: line-through;
+  text-decoration-color: rgba(198, 40, 40, 0.6);
+}
+.ep-revision-cell.ep-revision-merge {
+  box-shadow: inset 0 3px 0 #5f6368;
+  background-color: rgba(95, 99, 104, 0.05);
+}
+
+/* Property-change paragraphs/blocks — quiet left margin bar in a neutral
+   color so the change is visible without being loud. */
+.ep-revision-prop-change {
+  box-shadow: inset 2px 0 0 #5f6368;
+  padding-left: 6px;
+}