@docx-editor.dev/core 2.9.1 → 2.10.0

package/dist/editor.css

@@ -1106,9 +1106,8 @@
   * via these token overrides (as below), never via a `dark:` utility placed
   * directly on the `.docx-editor` node.
   * ====================================================================== */
-/* Also targets nested `.docx-editor` elements (e.g. the paged-editor root, Radix
-  * portals) so the base `.docx-editor` light tokens don't shadow these inside a
-  * dark tree. */
+/* Also targets nested `.docx-editor` elements (e.g. Radix portals) so the base
+  * `.docx-editor` light tokens don't shadow these inside a dark tree. */
 .docx-editor.dark,
 .docx-editor.dark .docx-editor {
   /* Palette sampled from Microsoft Word Online dark mode (chrome + canvas).
@@ -1217,8 +1216,7 @@
   * invert(1) hue-rotate(180deg) flips lightness but preserves hue for ALL
   * authored colors, so nothing is unreadable. Media is double-inverted back so
   * photos/logos render normally. */
-.docx-editor.dark .layout-page,
-/* The paginated lane paints its content into `.docx-page-content`; inverting the page
+/* The painter paints its content into `.docx-page-content`; inverting the page
    FRAME as well would flip the paper itself, so the sheet keeps its own token background
    and only the content it holds is lightness-inverted. */
 /* Highlights are COUNTER-INVERTED, like images.
@@ -1227,8 +1225,7 @@
    where it clamps to zero, landing on a dark olive that reads as a redaction bar. Word keeps
    a highlight its authored colour, so the run is inverted back — the same treatment media
    already gets, for the same reason. */
-.docx-editor.dark .docx-page-content [data-highlight],
-.docx-editor.dark .layout-page [data-highlight] {
+.docx-editor.dark .docx-page-content [data-highlight] {
   filter: invert(1) hue-rotate(180deg);
 }
 
@@ -1245,23 +1242,10 @@
 .docx-editor.dark .docx-page-content {
   /* contrast(0.92) softens the pure black/white extremes a plain invert
     * produces, landing on Word's gentler off-white text / dark-grey fills
-    * rather than #fff on #000. */
+    * rather than #fff on #000. The page FRAME sits outside this filter, so
+    * its own shadow needs no counter-treatment. */
   filter: invert(1) hue-rotate(180deg) contrast(0.92);
-  /* Replace the painter's drop shadow (the filter would turn it into a weird
-    * light glow) with a 1px ring. Pre-invert dark → post-invert a subtle light
-    * border, matching Word's framed dark page. */
-}
-/* The ring replaces the page frame's drop shadow, so it belongs to the FRAME. Applied to
-   the content box as well it outlined the text area — a box Word never draws — while the
-   real page edge lost its separation from the workspace. */
-.docx-editor.dark .layout-page {
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18) !important;
-}
-.docx-editor.dark .layout-page img,
-.docx-editor.dark .layout-page svg,
-.docx-editor.dark .layout-page canvas,
-.docx-editor.dark .layout-page video,
-.docx-editor.dark .layout-page [data-no-color-invert],
+}
 .docx-editor.dark .docx-page-content img,
 .docx-editor.dark .docx-page-content svg,
 .docx-editor.dark .docx-page-content canvas,
@@ -1285,13 +1269,6 @@
      lands on near-white. */
     --doc-page-text: #000000;
   }
-  .docx-editor.dark .layout-page,
-  .docx-editor.dark .layout-page img,
-  .docx-editor.dark .layout-page svg,
-  .docx-editor.dark .layout-page canvas,
-  .docx-editor.dark .layout-page video {
-    filter: none;
-  }
 }
 
 /* ============================================================================
@@ -1609,22 +1586,6 @@ a.docx-hyperlink:focus-visible {
   border-bottom: 2px dashed rgba(156, 39, 176, 0.6);
 }
 
-/* Transient paragraph flash used by scrollToParaId({ highlight }). */
-.docx-editor .layout-paragraph.docx-paragraph-flash {
-  animation: docx-paragraph-flash-fade var(--docx-paragraph-flash-duration, 1200ms) ease-out both;
-}
-
-@keyframes docx-paragraph-flash-fade {
-  0%,
-  70% {
-    box-shadow: inset 0 0 0 9999px var(--docx-paragraph-flash-color, rgba(255, 235, 59, 0.55));
-  }
-
-  100% {
-    box-shadow: inset 0 0 0 9999px transparent;
-  }
-}
-
 /* ============================================================================
   * SELECTION OVERLAY (for programmatic highlighting)
   * ============================================================================ */
@@ -2025,6 +1986,14 @@ a.docx-hyperlink:focus-visible {
 
 .docx-drawing {
   pointer-events: auto;
+  /* An arrow over pictures, as Word shows. Inline drawings paint INSIDE the line, so
+   * without this they inherit the content box's I-beam. */
+  cursor: default;
+}
+
+/* Text boxes carry rendered text, so they keep the I-beam the arrow above would cover. */
+.docx-drawing-textbox {
+  cursor: text;
 }
 
 .docx-drawing-layer {
@@ -2125,10 +2094,6 @@ a.docx-hyperlink:focus-visible {
   cursor: pointer;
 }
 
-.docx-editor .paged-editor--readonly .docx-table-furniture {
-  display: none !important;
-}
-
 /* Table chrome — contextual border/fill controls (Task 9). */
 .docx-table-chrome {
   display: inline-flex;
@@ -2311,24 +2276,6 @@ a.docx-hyperlink:focus-visible {
   * LAYOUT TABLE COLUMN RESIZE
   * ============================================================================ */
 
-/* ============================================================================
-  * TABLE CELL SELECTION (visible layout table cells)
-  * ============================================================================ */
-
-.docx-editor .layout-table-cell-selected {
-  position: relative;
-  outline: 2px solid var(--doc-selection);
-  outline-offset: -2px;
-}
-
-.docx-editor .layout-table-cell-selected::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background-color: rgba(66, 133, 244, 0.15);
-  pointer-events: none;
-}
-
 .docx-editor .layout-table-resize-handle {
   background-color: transparent;
   transition: background-color 0.15s;
@@ -2363,8 +2310,7 @@ a.docx-hyperlink:focus-visible {
 }
 
 /* Row resize handles */
-.docx-editor .layout-table-row-resize-handle,
-.docx-editor .layout-table-edge-handle-bottom {
+.docx-editor .layout-table-row-resize-handle {
   background-color: transparent;
   transition: background-color 0.15s;
 }
@@ -2383,9 +2329,7 @@ a.docx-hyperlink:focus-visible {
 }
 
 .docx-editor .layout-table-row-resize-handle:hover,
-.docx-editor .layout-table-row-resize-handle.dragging,
-.docx-editor .layout-table-edge-handle-bottom:hover,
-.docx-editor .layout-table-edge-handle-bottom.dragging {
+.docx-editor .layout-table-row-resize-handle.dragging {
   background-color: transparent;
 }
 
@@ -2414,30 +2358,6 @@ a.docx-hyperlink:focus-visible {
   opacity: 1;
 }
 
-/* ============================================================================
-  * READONLY MODE — suppress interactive editing cues
-  * ============================================================================ */
-
-/* Hide table resize handles */
-.docx-editor .paged-editor--readonly .layout-table-resize-handle,
-.docx-editor .paged-editor--readonly .layout-table-row-resize-handle,
-.docx-editor .paged-editor--readonly .layout-table-edge-handle-bottom,
-.docx-editor .paged-editor--readonly .layout-table-edge-handle-right {
-  display: none !important;
-}
-
-/* Remove header/footer hover effects and edit hints */
-.docx-editor .paged-editor--readonly .layout-page-header,
-.docx-editor .paged-editor--readonly .layout-page-footer {
-  cursor: default;
-  pointer-events: none;
-}
-
-/* Remove text cursor from page content */
-.docx-editor .paged-editor--readonly .layout-page-content {
-  cursor: default;
-}
-
 /* Outline heading hover */
 .docx-outline-heading-btn:hover {
   background-color: var(--doc-bg-hover);
@@ -2488,158 +2408,6 @@ a.docx-hyperlink:focus-visible {
   outline-offset: 2px;
 }
 
-/* ============================================================================
-  * HEADER / FOOTER EDITING
-  *
-  * These styles are needed when editing headers/footers inline (Google Docs style).
-  * They must be in dist/styles.css since the runtime CSS import in
-  * OffscreenEditorHost.tsx is stripped by tsup (injectStyle: false).
-  * ============================================================================ */
-
-/* Page content area — show text cursor when hovering over editable content */
-.docx-editor .layout-page-content {
-  cursor: text;
-}
-
-/* Block-level Structured Document Tag (content control) boundary.
-    The painter lays body fragments as flat absolutely-positioned siblings, so
-    the boundary is a single overlay box per control (see renderSdtBoundaryBoxes)
-    spanning its fragments at content width — drawn as one rounded rectangle
-    like Word, with a corner label chip revealed on hover/focus. The box is
-    non-interactive so it never steals clicks from the editable content under it.
-    Nested controls each draw their own (slightly inset) box. */
-.docx-editor .layout-block-sdt-box {
-  pointer-events: none;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  box-sizing: border-box;
-  transition: border-color 0.1s ease;
-  z-index: 1;
-}
-.docx-editor .layout-block-sdt-box.is-active,
-.docx-editor .layout-block-sdt-box.is-focused {
-  border-color: rgba(25, 103, 210, 0.5);
-}
-/* Corner label chip — hidden until its control is hovered/active. */
-.docx-editor .layout-block-sdt-label {
-  position: absolute;
-  left: -1px;
-  bottom: 100%;
-  max-width: 160px;
-  height: 16px;
-  padding: 0 6px;
-  font-size: 10px;
-  line-height: 16px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: #fff;
-  background-color: rgba(25, 103, 210, 0.92);
-  border-radius: 4px 4px 0 0;
-  display: none;
-}
-.docx-editor .layout-block-sdt-box.is-active .layout-block-sdt-label,
-.docx-editor .layout-block-sdt-box.is-focused .layout-block-sdt-label {
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-}
-
-/* Header/footer CONTENT is non-interactive in normal mode: a single click on a
-    header/footer is already a no-op (Word parity), and — crucially — a page- or
-    margin-anchored shape (e.g. a full-page letterhead in a header) overflows the
-    band and would otherwise sit on top of the body and swallow clicks meant for
-    the document text (#856). The band element itself keeps pointer events so it
-    stays the double-click-to-edit target; only its content is passed through.
-    Kept here (not only in prosemirror/editor.css) so the React adapter's
-    styles.css build — which compiles this file — ships the rule. */
-.docx-editor .layout-page-header > *,
-.docx-editor .layout-page-footer > * {
-  pointer-events: none;
-}
-
-/* While editing a region, its content must be hittable again so clicks map to
-    header/footer caret positions. */
-.docx-editor .paged-editor--editing-header .layout-page-header > *,
-.docx-editor .paged-editor--editing-footer .layout-page-footer > * {
-  pointer-events: auto;
-}
-
-/* Header/footer areas — double-click hint */
-.docx-editor .layout-page-header,
-.docx-editor .layout-page-footer {
-  cursor: pointer;
-  transition: background-color 0.15s ease;
-}
-.docx-editor .layout-page-header:hover,
-.docx-editor .layout-page-footer:hover {
-  background-color: rgba(37, 99, 235, 0.06);
-}
-/* Show "Double-click to edit" hint on hover when area is empty */
-.docx-editor .layout-page-header:empty:hover::after {
-  content: 'Double-click to add header';
-  display: block;
-  text-align: center;
-  color: var(--doc-text-subtle);
-  font-size: 11px;
-  padding: 4px 0;
-}
-.docx-editor .layout-page-footer:empty:hover::after {
-  content: 'Double-click to add footer';
-  display: block;
-  text-align: center;
-  color: var(--doc-text-subtle);
-  font-size: 11px;
-  padding: 4px 0;
-}
-
-/*
-  * Phase 5 of HF editing unification (openspec/changes/unify-hf-editing/):
-  * the inline overlay no longer mounts a PM EditorView, so the entire
-  * `.hf-editor-pm` rule block (font-strut zeroing, table-layout overrides,
-  * `top: 0.4em` shim, line-height resets) is gone. Painter + persistent
-  * hidden PM are the only HF rendering paths now.
-  */
-
-/* Dim body content when editing header/footer */
-.docx-editor .paged-editor--hf-editing .layout-page-content {
-  opacity: 0.4;
-  pointer-events: none;
-  transition: opacity 0.15s ease;
-}
-
-/* While editing one HF region, the sibling region (and the non-edited area)
-    shows a normal arrow, not the double-click "pointer" hint. The active
-    region's `cursor: text` below wins via later source order. */
-.docx-editor .paged-editor--hf-editing .layout-page-header,
-.docx-editor .paged-editor--hf-editing .layout-page-footer {
-  cursor: default;
-}
-
-/* Dotted border on active header area; text caret since it's being edited */
-.docx-editor .paged-editor--editing-header .layout-page-header {
-  border-bottom: 1px dotted var(--doc-primary);
-  cursor: text;
-}
-
-/* Dotted border on active footer area; text caret since it's being edited */
-.docx-editor .paged-editor--editing-footer .layout-page-footer {
-  border-top: 1px dotted var(--doc-primary);
-  cursor: text;
-}
-
-/*
-  * HF editing unification phase 2 (openspec/changes/unify-hf-editing/):
-  * removed; the painter is now the sole visible HF renderer in both modes
-  * and the inline overlay's PM container moves off-screen instead.
-  */
-
-/* Remove hover effect on header/footer when in editing mode */
-.docx-editor .paged-editor--hf-editing .layout-page-header:hover,
-.docx-editor .paged-editor--hf-editing .layout-page-footer:hover {
-  background-color: transparent;
-}
-
 /* Body caret blink for the Vue adapter's painted caret (useSelectionSync sets
     `animation: docx-editor-caret-blink ...` inline). React drives its caret's blink from a
     JS timer instead; both land on the same 530ms half-period, which is the
@@ -2669,6 +2437,21 @@ a.docx-hyperlink:focus-visible {
   }
 }
 
+/* Error notification toast entrance (the React adapter's NotificationToast sets
+    `animation: docx-notification-slide-in ...` inline; the rest of its styling is
+    inline too). Keyframes names are document-global, so it lives here where the
+    build's namespace guard (scripts/core-css-assertions.mjs) covers it. */
+@keyframes docx-notification-slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
 /* Section break indicator */
 .docx-section-break {
   position: relative;
@@ -2690,25 +2473,6 @@ a.docx-hyperlink:focus-visible {
   background: var(--doc-bg-hover);
 }
 
-/* =============================================================================
-  * ProseMirror decoration forwarding overlay
-  *
-  * Generic surface for decorations published via PM plugins' `props.decorations`
-  * (the painter doesn't render them itself — see `DecorationLayer.tsx`).
-  * Children are absolutely-positioned inside this container; pointer-events
-  * are off by default so editing isn't blocked. Plugins that need hover/click
-  * on a decoration (e.g. cursor name labels) opt in via inline styles.
-  *
-  * z-index: 11 — one above SelectionOverlay (10) so cursor name labels render
-  * above the local caret.
-  * ============================================================================= */
-.docx-editor .paged-editor__decoration-overlay {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  z-index: 11;
-}
-
 /* Default styles for y-prosemirror remote cursor decorations. Consumers can
   * override by providing their own `.ProseMirror-yjs-cursor` rules.
   *
@@ -2741,155 +2505,11 @@ a.docx-hyperlink:focus-visible {
   pointer-events: none;
 }
 
-/* Tracked-revision styles live in core (prosemirror/editor.css), shared
-    by React + Vue adapters. Do not duplicate here. */
-
-/* Interactive trigger for typed controls (checkbox/dropdown/date). The box is
-    pointer-events:none; the trigger re-enables them so it is clickable. Sits at
-    the top-right corner of the control box. */
-.docx-editor .layout-sdt-widget {
-  position: absolute;
-  top: 1px;
-  right: 1px;
-  min-width: 18px;
-  height: 18px;
-  padding: 0 3px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  line-height: 1;
-  color: var(--doc-primary);
-  background: rgba(255, 255, 255, 0.9);
-  border: 1px solid rgba(25, 103, 210, 0.5);
-  border-radius: 3px;
-  cursor: pointer;
-  pointer-events: auto;
-  opacity: 0.55;
-  transition: opacity 0.1s ease;
-}
-.docx-editor .layout-block-sdt-box.is-active .layout-sdt-widget,
-.docx-editor .layout-block-sdt-box.is-focused .layout-sdt-widget,
-.docx-editor .layout-sdt-widget:focus {
-  opacity: 1;
-}
-.docx-editor .layout-sdt-widget:hover {
-  background: var(--doc-primary-light);
-}
-
-.docx-editor .layout-inline-sdt-widget {
-  cursor: pointer;
-  pointer-events: auto;
-  border-radius: 2px;
-  outline-offset: 1px;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-}
-.docx-editor .layout-inline-sdt-widget:hover,
-.docx-editor .layout-inline-sdt-widget:focus {
-  background: var(--doc-primary-light);
-  outline: 1px solid rgba(25, 103, 210, 0.55);
-}
-
-/* Popup for dropdown/date content-control widgets (rendered by the adapter). */
-.docx-editor .layout-sdt-widget-popup {
-  min-width: 120px;
-  max-height: 240px;
-  overflow-y: auto;
-  background: var(--doc-surface);
-  border: 1px solid var(--doc-border-light);
-  border-radius: 6px;
-  box-shadow: 0 2px 10px var(--doc-shadow);
-  padding: 4px;
-  font-size: 13px;
-}
-.docx-editor .layout-sdt-widget-option {
-  display: block;
-  width: 100%;
-  text-align: left;
-  padding: 6px 10px;
-  border: 0;
-  background: transparent;
-  border-radius: 4px;
-  cursor: pointer;
-  color: var(--doc-text);
-}
-.docx-editor .layout-sdt-widget-option:hover {
-  background: var(--doc-primary-light);
-}
-.docx-editor .layout-sdt-widget-empty {
-  padding: 6px 10px;
-  color: var(--doc-text-muted);
-}
-.docx-editor .layout-sdt-widget-date {
-  font: inherit;
-  padding: 4px 6px;
-  border: 1px solid var(--doc-border-light);
-  border-radius: 4px;
-}
-.docx-editor .layout-sdt-widget-option.is-selected {
-  font-weight: 600;
-  background: var(--doc-bg-hover);
-}
-
-/* Repeating-section item add/remove affordances (bottom-right of the item box). */
-.docx-editor .layout-sdt-repeat-controls {
-  position: absolute;
-  bottom: 1px;
-  right: 1px;
-  display: flex;
-  gap: 2px;
-  opacity: 0.55;
-  pointer-events: none;
-}
-.docx-editor .layout-block-sdt-box.is-active .layout-sdt-repeat-controls,
-.docx-editor .layout-block-sdt-box.is-focused .layout-sdt-repeat-controls {
-  opacity: 1;
-}
-.docx-editor .layout-sdt-repeat-btn {
-  min-width: 16px;
-  height: 16px;
-  padding: 0 3px;
-  font-size: 11px;
-  line-height: 1;
-  color: var(--doc-primary);
-  background: rgba(255, 255, 255, 0.9);
-  border: 1px solid rgba(25, 103, 210, 0.5);
-  border-radius: 3px;
-  cursor: pointer;
-  pointer-events: auto;
-}
-.docx-editor .layout-sdt-repeat-btn:hover {
-  background: var(--doc-primary-light);
-}
-
 /* ============================================================================
   * Revision indicators shared by both adapters.
   * Visible painter cues live here so React and Vue stay in lockstep.
   * ========================================================================== */
 
-.docx-editor .layout-revision-bars {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-}
-
-.docx-editor .layout-revision-change-bar {
-  position: absolute;
-  left: -10px;
-  width: 2px;
-  pointer-events: none;
-}
-
-.docx-editor .layout-revision-change-bar.layout-revision-ins {
-  background-color: var(--doc-revision-insertion);
-}
-
-.docx-editor .layout-revision-change-bar.layout-revision-del {
-  background-color: var(--doc-revision-deletion);
-}
-
 .docx-table-row--revision::before {
   content: '';
   position: absolute;
@@ -2929,6 +2549,23 @@ a.docx-hyperlink:focus-visible {
   background-color: var(--doc-revision-deletion-wash);
 }
 
+/* A DRAWING inside a tracked change. The outline is the box's underline/strike: there is no
+   text to decorate, so the frame carries the claim, in the same kind tokens the text rules
+   use. Drawn INSIDE the box (negative offset) because pages, cells and clipped paint bounds
+   crop at the box edge and would shave an outer ring off. Under author colouring the painter
+   overrides `outline-color` inline, exactly as span ink follows the author. */
+.docx-drawing--revision-insertion {
+  outline: 2px solid var(--doc-revision-insertion);
+  outline-offset: -2px;
+}
+
+.docx-drawing--revision-deletion {
+  outline: 2px solid var(--doc-revision-deletion);
+  outline-offset: -2px;
+  /* Pending removal reads as on its way out — the box twin of the strike-through. */
+  opacity: 0.6;
+}
+
 /* FIELD SHADING — the grey block Word draws behind computed text (a page number, a
    cross-reference, the blank in a form). It marks where text came from, not what it says.
 
@@ -2968,27 +2605,6 @@ a.docx-hyperlink:focus-visible {
   text-decoration-color: var(--doc-revision-format);
 }
 
-.docx-editor .layout-revision-pmark {
-  position: relative;
-}
-
-.docx-editor .layout-revision-pmark-glyph {
-  display: inline;
-  margin-left: 2px;
-  font-weight: normal;
-  opacity: 0.75;
-  pointer-events: none;
-}
-
-.docx-editor .layout-revision-pmark-glyph.layout-revision-ins {
-  color: var(--doc-revision-insertion);
-}
-
-.docx-editor .layout-revision-pmark-glyph.layout-revision-del {
-  color: var(--doc-revision-deletion);
-  text-decoration: line-through;
-}
-
 .docx-editor-revision-cell.docx-editor-revision-ins {
   box-shadow: inset 0 3px 0 var(--doc-revision-insertion);
   background-color: var(--doc-revision-insertion-tint);
@@ -3006,29 +2622,6 @@ a.docx-hyperlink:focus-visible {
   background-color: color-mix(in srgb, var(--doc-text-muted) 8%, transparent);
 }
 
-.docx-editor .layout-run-image.docx-insertion,
-.docx-editor .layout-run-image-wrapper.docx-insertion > .layout-run-image,
-.docx-editor .layout-block-image.docx-insertion,
-.docx-editor .layout-image.docx-insertion,
-.docx-editor .layout-page-floating-image.docx-insertion > img,
-.docx-editor .layout-cell-floating-image.docx-insertion > img,
-.docx-editor .layout-header-footer-floating-image.docx-insertion > img {
-  outline: 2px solid var(--doc-revision-insertion);
-  outline-offset: 1px;
-}
-
-.docx-editor .layout-run-image.docx-deletion,
-.docx-editor .layout-run-image-wrapper.docx-deletion > .layout-run-image,
-.docx-editor .layout-block-image.docx-deletion,
-.docx-editor .layout-image.docx-deletion,
-.docx-editor .layout-page-floating-image.docx-deletion > img,
-.docx-editor .layout-cell-floating-image.docx-deletion > img,
-.docx-editor .layout-header-footer-floating-image.docx-deletion > img {
-  outline: 2px solid var(--doc-revision-deletion);
-  outline-offset: 1px;
-  opacity: 0.6;
-}
-
 /* ========================================================================
  * ONE-SURFACE PAINT LAYER — restored after the legacy stylesheet swap dropped
  * it. NOT legacy chrome: these belong to the greenfield painter, which owns the
@@ -3141,10 +2734,11 @@ a.docx-hyperlink:focus-visible {
 
 .docx-editor-one-surface__caret {
   position: absolute;
-  /* 2px, not 1: a hairline caret disappears against body text at 100% zoom on a
+  /* 1.5px, not 1: a hairline caret disappears against body text at 100% zoom on a
    * high-DPI screen, and reads as a rendering artefact rather than a cursor.
-   * Every desktop word processor draws a two-pixel insertion point. */
-  width: 2px;
+   * Not 2 either: with the contrast ring below, a 2px core read as a 4px slab that
+   * overlapped the neighbouring glyphs — Word's insertion bar is thinner. */
+  width: 1.5px;
   background: var(--doc-caret);
   /* A CONTRASTING 1px ring, because a caret position is not always beside text: the offset
    * before an inline image puts the insertion point exactly on the picture's leading edge,
@@ -3153,7 +2747,10 @@ a.docx-hyperlink:focus-visible {
    *
    * The ring and the core are a complementary pair, so whichever one the backdrop hides,
    * the other reads. On an ordinary white page the ring is white on white and the caret
-   * looks exactly as it did before.
+   * looks exactly as it did before. The ring is TRANSLUCENT: at full strength it drew a
+   * hard outline on mid-tone backdrops (highlights, table shading) where both colours are
+   * visible at once, and the caret read as a boxed slab instead of a bar. Half strength
+   * still lifts the bar off a dark photo without outlining it on a pink highlight.
    *
    * NOT `mix-blend-mode: difference`, which is the textbook XOR caret and is wrong here:
    * blending resolves against the nearest ISOLATED GROUP, and this stylesheet puts two of
@@ -3162,7 +2759,7 @@ a.docx-hyperlink:focus-visible {
    * editing. Inside either, the backdrop is transparent rather than the sheet's paper, so
    * the caret would blend to white and the dark page's inversion would then paint it black
    * on black: the very bug this ring exists to fix. The pair needs no backdrop at all. */
-  box-shadow: 0 0 0 1px var(--doc-caret-contrast);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--doc-caret-contrast) 50%, transparent);
   animation: docx-editor-caret-blink 1.06s steps(1) infinite;
 }
 
@@ -4063,6 +3660,14 @@ a.docx-hyperlink:focus-visible {
   outline: none;
 }
 
+/* The text column shows an I-beam over its whole box, as Word does — over the gaps
+ * between paragraphs and below the last one, not only over glyphs (where selectable
+ * text already produces one). Anchored drawings live in sibling layers; inline
+ * drawings opt back to the arrow on `.docx-drawing`. */
+.docx-paginated-surface .docx-page-content {
+  cursor: text;
+}
+
 /* Inactive furniture: Word-like affordance that the band is enterable. Active band and
  * open-scope dimming live under `.docx-pages--hf-editing` so screen chrome never mutates
  * painted ink for print (print media resets opacity). */