@domternal/theme 0.6.1 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@domternal/theme",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "Default themes and styles for Domternal editor",
   "author": "https://github.com/ThomasNowHere",
   "license": "MIT",

package/src/_base.scss

@@ -48,10 +48,10 @@
 // Shared floating element fade-in animation
 // =============================================================================
 // Used by elements conditionally inserted into the DOM (emoji picker,
-// suggestion dropdown, toolbar dropdowns). Uses scale instead of translateY —
+// suggestion dropdown, toolbar dropdowns). Uses scale instead of translateY:
 // scale doesn't shift position so it won't conflict with floating-ui.
 // Elements using data-show (bubble menu, floating menu, popovers) use CSS
-// opacity transitions instead — see their respective stylesheets.
+// opacity transitions instead - see their respective stylesheets.
 // =============================================================================
 
 @keyframes dm-fade-in {

package/src/_block-colors.scss

@@ -0,0 +1,178 @@
+// =============================================================================
+// Block Colors
+// Notion-style block-level backgrounds and text colors. Applied when the
+// BlockColor extension (@domternal/core) sets `data-bg-color` /
+// `data-text-color` attributes on block elements. Token definitions live
+// in `_variables.scss` (light) and `themes/_dark.scss` (dark).
+// =============================================================================
+
+// -----------------------------------------------------------------------------
+// Background
+// Tint the whole block. Scoped under `.dm-editor .ProseMirror` so it only
+// applies inside a Domternal editor instance - won't leak to host content.
+// Small inline padding so the tint visually "hugs" the text instead of
+// bleeding edge-to-edge on narrow blocks.
+// -----------------------------------------------------------------------------
+.dm-editor .ProseMirror {
+  [data-bg-color="gray"]   { background-color: var(--dm-block-bg-gray); }
+  [data-bg-color="brown"]  { background-color: var(--dm-block-bg-brown); }
+  [data-bg-color="orange"] { background-color: var(--dm-block-bg-orange); }
+  [data-bg-color="yellow"] { background-color: var(--dm-block-bg-yellow); }
+  [data-bg-color="green"]  { background-color: var(--dm-block-bg-green); }
+  [data-bg-color="blue"]   { background-color: var(--dm-block-bg-blue); }
+  [data-bg-color="purple"] { background-color: var(--dm-block-bg-purple); }
+  [data-bg-color="pink"]   { background-color: var(--dm-block-bg-pink); }
+  [data-bg-color="red"]    { background-color: var(--dm-block-bg-red); }
+
+  // Inline padding is pre-applied to colorable blocks in `_content.scss`
+  // (and to the editor itself for lists/blockquotes) so toggling a color
+  // does NOT shift text - the tint paints into existing padding. This
+  // rule is therefore minimal: only the rounded corners + a hair of
+  // vertical padding so the tint reads as a "pill" around short text
+  // instead of an edge-to-edge band.
+  [data-bg-color] {
+    padding-block: 0.125rem;
+    border-radius: 0.25rem;
+  }
+
+  [data-text-color="gray"]   { color: var(--dm-block-text-gray); }
+  [data-text-color="brown"]  { color: var(--dm-block-text-brown); }
+  [data-text-color="orange"] { color: var(--dm-block-text-orange); }
+  [data-text-color="yellow"] { color: var(--dm-block-text-yellow); }
+  [data-text-color="green"]  { color: var(--dm-block-text-green); }
+  [data-text-color="blue"]   { color: var(--dm-block-text-blue); }
+  [data-text-color="purple"] { color: var(--dm-block-text-purple); }
+  [data-text-color="pink"]   { color: var(--dm-block-text-pink); }
+  [data-text-color="red"]    { color: var(--dm-block-text-red); }
+}
+
+// -----------------------------------------------------------------------------
+// Swatch row - horizontal strip of color swatches, one per row in the
+// BlockContextMenu Colors section (one for text, one for background).
+// -----------------------------------------------------------------------------
+.dm-block-color-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+}
+
+.dm-block-color-row-label {
+  // Visually hidden but readable by screen readers. The visible row label
+  // comes from `.dm-block-context-menu-group-label` ("Colors") above.
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+// -----------------------------------------------------------------------------
+// Color swatches - used by BlockContextMenu's color picker and available
+// for host apps that render their own pickers. One ring per palette entry
+// plus a neutral "clear" swatch.
+// -----------------------------------------------------------------------------
+.dm-block-color-swatch {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: 1px solid var(--dm-border-color, #e5e7eb);
+  border-radius: 50%;
+  background: transparent;
+  cursor: pointer;
+  transition: transform 0.08s ease, box-shadow 0.08s ease;
+
+  &:hover {
+    transform: scale(1.1);
+    box-shadow: 0 0 0 2px var(--dm-accent-surface, rgba(37, 99, 235, 0.15));
+  }
+
+  &:focus-visible,
+  // Currently-applied color for the targeted block. BlockContextMenu writes
+  // `aria-pressed="true"` on the swatch whose value matches the block's
+  // current text/bg color (`null` for "Default"); mirror the inline picker's
+  // `.dm-ncp-active` treatment so the active state reads the same in both UIs.
+  &[aria-pressed="true"] {
+    // OUTSET ring (offset > 0): swatch dot fills almost the entire button
+    // surface, so an inset outline would render UNDER the dot. Pulling the
+    // ring outward keeps it visible against any palette tint.
+    outline: 2px solid var(--dm-accent, #2563eb);
+    outline-offset: 1px;
+  }
+
+  // Inner tint dot - used for both bg and text variants so rows look uniform.
+  &::before {
+    content: '';
+    display: block;
+    width: 1rem;
+    height: 1rem;
+    border-radius: 50%;
+  }
+
+  // "No color" swatch - strike-through slash rendered via gradient.
+  &[data-color="null"]::before {
+    background:
+      linear-gradient(
+        to top right,
+        transparent calc(50% - 1px),
+        var(--dm-muted, #999) calc(50% - 1px),
+        var(--dm-muted, #999) calc(50% + 1px),
+        transparent calc(50% + 1px)
+      );
+    border: 1px solid var(--dm-border-color, #e5e7eb);
+  }
+}
+
+// Background swatches render the tint as the dot interior.
+.dm-block-color-swatch--bg {
+  &[data-color="gray"]::before   { background: var(--dm-block-bg-gray); }
+  &[data-color="brown"]::before  { background: var(--dm-block-bg-brown); }
+  &[data-color="orange"]::before { background: var(--dm-block-bg-orange); }
+  &[data-color="yellow"]::before { background: var(--dm-block-bg-yellow); }
+  &[data-color="green"]::before  { background: var(--dm-block-bg-green); }
+  &[data-color="blue"]::before   { background: var(--dm-block-bg-blue); }
+  &[data-color="purple"]::before { background: var(--dm-block-bg-purple); }
+  &[data-color="pink"]::before   { background: var(--dm-block-bg-pink); }
+  &[data-color="red"]::before    { background: var(--dm-block-bg-red); }
+}
+
+// Text swatches render a capital "A" in the named color on a neutral dot
+// background, mirroring Notion's convention so users can tell at a glance
+// which row sets text vs background. The "A" comes from the `content`
+// pseudo-element; the dot background stays neutral (var(--dm-surface)) so
+// the colored glyph is readable regardless of palette tint.
+.dm-block-color-swatch--text {
+  &::before {
+    content: 'A';
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--dm-editor-font-family, system-ui, sans-serif);
+    font-size: 0.75rem;
+    font-weight: 600;
+    background: var(--dm-surface, #f8f9fa);
+    color: var(--dm-editor-text, #333);
+  }
+
+  // "Default" text swatch keeps its "A" and gets the diagonal slash from the
+  // base `[data-color="null"]::before` rule painted as the dot's background.
+  // The "A" glyph sits on top of the slash so users see "letterform crossed
+  // out" rather than an empty stroke (mirrors the inline-picker treatment).
+
+  &[data-color="gray"]::before   { color: var(--dm-block-text-gray); }
+  &[data-color="brown"]::before  { color: var(--dm-block-text-brown); }
+  &[data-color="orange"]::before { color: var(--dm-block-text-orange); }
+  &[data-color="yellow"]::before { color: var(--dm-block-text-yellow); }
+  &[data-color="green"]::before  { color: var(--dm-block-text-green); }
+  &[data-color="blue"]::before   { color: var(--dm-block-text-blue); }
+  &[data-color="purple"]::before { color: var(--dm-block-text-purple); }
+  &[data-color="pink"]::before   { color: var(--dm-block-text-pink); }
+  &[data-color="red"]::before    { color: var(--dm-block-text-red); }
+}

package/src/_block-handle.scss

@@ -0,0 +1,189 @@
+// =============================================================================
+// Block Handle
+// Left-gutter handle (⋮⋮ drag + + insert) rendered on hover over each
+// top-level block when BlockHandle extension is enabled.
+// =============================================================================
+
+// When the extension mounts it adds `dm-editor--has-block-handle` to the
+// editor wrapper. Two things happen:
+//
+// 1) ProseMirror reserves gutter space with `padding-left` so text does
+//    not flow under the handle.
+// 2) The editor opens its horizontal overflow so the handle - positioned
+//    with a negative `left` - can render in the page margin rather than
+//    eating into the content column.
+//
+// Gutter default is 4rem (64px). Handle is 8px OUTSIDE the editor's
+// left edge (see `.dm-block-handle { left: -0.5rem }`) and ~46px wide,
+// so it ends ~38px inside the editor; the remaining ~26px of gutter is
+// breathing room before text, matching Notion's feel.
+.dm-editor--has-block-handle {
+  overflow: visible;
+
+  .ProseMirror {
+    padding-left: var(--dm-block-handle-gutter, 4rem);
+  }
+}
+
+// Selected-node visual indicator: the base theme's `outline: 2px solid`
+// (see `_prosemirror.scss`) paints OUTSIDE the block's border-box and
+// bleeds over anything adjacent - including the `.notion-page` right
+// border in the Notion demo, making it look like the border is missing.
+// When BlockHandle is active, suppress the outline and replace it with a
+// subtle `::before` halo that sits BEHIND the block content (`z-index: -1`)
+// and therefore never overlaps surrounding chrome.
+.dm-editor--has-block-handle .ProseMirror-selectednode,
+.dm-editor--has-block-handle .ProseMirror-selectednoderange {
+  position: relative;
+  outline: none;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -0.25rem;
+    background-color: var(--dm-block-selected-halo, rgba(112, 207, 248, 0.25));
+    border-radius: 0.25rem;
+    pointer-events: none;
+    z-index: -1;
+  }
+}
+
+.dm-block-handle {
+  position: absolute;
+  // Tokenised so demos with a centered narrower content column can move
+  // the handle further out (e.g., `--dm-block-handle-left: -3.5rem`) to
+  // place it fully in the surrounding whitespace. Default `-0.5rem` keeps
+  // the handle just outside the editor's left border for full-width
+  // editors with the standard `--dm-block-handle-gutter` reservation on
+  // ProseMirror. Requires `overflow: visible` (set above on
+  // `.dm-editor--has-block-handle`) so it isn't clipped.
+  left: var(--dm-block-handle-left, -0.5rem);
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 0.12s ease, visibility 0.12s;
+  z-index: var(--dm-z-handle, 25);
+
+  &[data-show] {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+  }
+
+  // Individual buttons (⋮⋮ drag, + insert)
+  &-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.5rem;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: var(--dm-muted, #999);
+    cursor: pointer;
+    border-radius: 3px;
+    transition: background-color 0.1s, color 0.1s;
+    // Defensive: stop text selection / touch pan from hijacking the
+    // pointer during mousedown-to-drag. Not strictly required on
+    // Chrome/Firefox but avoids edge cases on Safari + touch devices.
+    user-select: none;
+    -webkit-user-select: none;
+    touch-action: none;
+
+    &:hover {
+      background: var(--dm-button-hover-bg, rgba(0, 0, 0, 0.04));
+      color: var(--dm-editor-text, inherit);
+    }
+
+    &:focus-visible {
+      // INSET ring (-1px): block handle buttons sit in the gutter; an outset
+      // ring would extend into adjacent content / next sibling block.
+      outline: 2px solid var(--dm-accent, #2563eb);
+      outline-offset: -1px;
+    }
+
+    svg {
+      width: 1rem;
+      height: 1rem;
+      pointer-events: none;
+    }
+  }
+
+  // Drag handle - grab cursor + slight nudge active state
+  &-drag {
+    cursor: grab;
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+
+  // Insert (+) button - subtle accent on hover
+  &-plus {
+    &:hover {
+      color: var(--dm-accent, #2563eb);
+    }
+  }
+}
+
+// =============================================================================
+// Drop indicator
+// Custom horizontal drop line drawn during drag-from-handle. Positioned
+// absolutely inside `.dm-editor` (which is `position: relative`) by JS,
+// only made visible via the `data-show` attribute. Spans the resolved
+// drop-target block's width so the user sees exactly which block (and
+// which side) the drop will land at - including the difference between
+// "into the list" and "as a sibling block" outcomes when dragging in
+// the gap between a list and the next block.
+// =============================================================================
+.dm-block-drop-indicator {
+  position: absolute;
+  height: 2px;
+  background: var(--dm-accent, #2563eb);
+  border-radius: 1px;
+  pointer-events: none;
+  z-index: 5;
+  // Hidden by default; JS adds `data-show` to reveal.
+  display: none;
+  // Slight glow so the line reads on top of any background colour.
+  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.15);
+  // Nudge the line a few pixels DOWN from the upper block's bottom edge so
+  // it visually sits in the gap between blocks rather than glued to the
+  // block above. Visual-only (transform doesn't shift layout) so the
+  // computed `top` from JS still reflects the true anchor - the indicator
+  // and the actual drop position stay in sync.
+  transform: translateY(3px);
+  // Smooth glide when the indicator moves between targets or flips
+  // between sibling and nested mode mid-drag. Only position properties
+  // animate; the categorical style swap (filled bar ↔ dashed border)
+  // intentionally stays instant to keep the mode boundary readable.
+  // Short duration so the line never feels laggy on fast drags.
+  transition: left 80ms ease-out, width 80ms ease-out, top 80ms ease-out, transform 80ms ease-out;
+
+  &[data-show] {
+    display: block;
+  }
+
+  // Nested-mode visual: dashed line indented to the children-zone start
+  // of the target list item. Communicates "this drop becomes a nested
+  // child appended at the end" rather than "a sibling between blocks".
+  // JS positions `top` at the rect's BOTTOM edge and `left` indented by
+  // 24px (mirrors `--dm-block-children-indent`), so the dashed line
+  // visually sits where a child block would render inside the item.
+  &[data-mode='nested'] {
+    height: 0;
+    background: transparent;
+    border-radius: 0;
+    border-top: 2px dashed var(--dm-accent, #2563eb);
+    box-shadow: none;
+    // Lift slightly so the line sits INSIDE the listItem's bottom edge
+    // rather than in the gap below - cancels the global +3px nudge and
+    // pulls the line 2px above rect.bottom.
+    transform: translateY(-2px);
+  }
+}

package/src/_bubble-menu.scss

@@ -14,8 +14,11 @@
   --dm-button-active-color: var(--dm-accent, #2563eb);
   --dm-button-disabled-opacity: 0.4;
 
-  // Smaller icons to match compact buttons
-  .dm-toolbar-button svg {
+  // Smaller icons to match compact buttons. `:not(.dm-dropdown-caret)`
+  // preserves the dropdown caret's own 0.625rem sizing from `_toolbar.scss`
+  // - without this exclusion the bubble menu's selector wins on specificity
+  // and the caret renders the same size as a normal toolbar icon.
+  .dm-toolbar-button svg:not(.dm-dropdown-caret) {
     width: 1rem;
     height: 1rem;
   }

package/src/_color-palette.scss

@@ -11,7 +11,7 @@
   width: max-content;
 }
 
-// "Default" reset button — spans the full width of the grid
+// "Default" reset button - spans the full width of the grid
 .dm-color-palette-reset {
   grid-column: 1 / -1;
   display: flex;
@@ -70,7 +70,7 @@
                 0 0 0 3px var(--dm-accent, #2563eb);
   }
 
-  // Active state — checkmark indicator
+  // Active state - checkmark indicator
   &--active {
     box-shadow: 0 0 0 2px var(--dm-toolbar-bg, #f8f9fa),
                 0 0 0 3px var(--dm-accent, #2563eb);
@@ -86,7 +86,7 @@
   }
 }
 
-// Dark theme — adjust swatch border for dark backgrounds
+// Dark theme - adjust swatch border for dark backgrounds
 .dm-theme-dark .dm-color-swatch,
 .dm-theme-auto .dm-color-swatch {
   border-color: rgba(255, 255, 255, 0.15);

package/src/_content.scss

@@ -6,6 +6,19 @@
 // =============================================================================
 
 .dm-editor .ProseMirror {
+  // ---------------------------------------------------------------------------
+  // Block inline padding
+  // ---------------------------------------------------------------------------
+  // Pre-applied so that toggling `data-bg-color` on a block does NOT shift
+  // text - the colored background paints into existing padding instead of
+  // adding new padding (`_block-colors.scss` only sets `background-color`
+  // + `border-radius`, no padding). Mirrors Notion's layout. Wrapped in
+  // `:where()` so specificity stays at 0 and host apps can override per
+  // tag without selector wars.
+  :where(p, h1, h2, h3, h4, h5, h6) {
+    padding-inline: var(--dm-block-inline-padding);
+  }
+
   // ---------------------------------------------------------------------------
   // Headings
   // ---------------------------------------------------------------------------
@@ -78,7 +91,11 @@
     border-left: var(--dm-blockquote-border);
     color: var(--dm-blockquote-color);
     margin: 0.5em 0;
-    padding: 0.1em 0 0.1em 0.8em;
+    // Right padding picks up the same `--dm-block-inline-padding` token
+    // so colored blockquotes get breathing room from the right edge.
+    // Left stays at 0.8em - that gap is for the border-left bar, not
+    // text inset.
+    padding: 0.1em var(--dm-block-inline-padding) 0.1em 0.8em;
   }
 
   // ---------------------------------------------------------------------------
@@ -89,12 +106,45 @@
   ol {
     margin: 0.75em 0;
     padding-left: 1.5em;
+    // Right padding so colored lists get breathing room on the right edge,
+    // matching the inline padding paragraphs and headings get above.
+    padding-right: var(--dm-block-inline-padding);
+  }
 
+  // Notion-style "children zone" indent for plain bullet/ordered lists ONLY.
+  // Scoped to `ul:not([data-type="taskList"]), ol` so it does NOT match the
+  // taskList wrapper - taskItems render via `<li><label/><div/></li>` and the
+  // generic rule would mistakenly apply margin-inline-start to that wrapper
+  // div, pushing the entire taskItem content (and the absolutely-positioned
+  // checkbox's containing block) one indent step to the right. Task list
+  // children-zone styling lives in `_task-list.scss` and is rooted on the
+  // inner `<div>` instead.
+  ul:not([data-type="taskList"]),
+  ol {
     li {
       margin: 0.25em 0;
 
       > p {
+        // List item paragraphs reset inline-end padding (bullet indentation
+        // is owned by the list container; doubling up shifts text under the
+        // bullet's hanging indent), and add a small inline-start padding
+        // (~5px at the editor's default font size) so the text breathes
+        // away from the bullet glyph instead of butting against it.
         margin: 0.1em 0;
+        padding-inline: 0.3em 0;
+      }
+
+      // Post-label blocks (heading, codeBlock, blockquote, etc.) sit
+      // indented one level below the label paragraph aligned with the
+      // bullet. ALL nested `<ul>` and `<ol>` (plain and taskList) are
+      // excluded because each already gains the same visual indent
+      // through its own `padding-left: 1.5em`, so adding this margin
+      // would push nested taskLists further right than nested plain
+      // bullet lists. `margin-inline-start` flips the indent to the
+      // right edge in RTL.
+      > :not(p:first-child):not(ul):not(ol) {
+        margin-inline-start: var(--dm-block-children-indent, 1.5rem);
+        margin-top: 0.25rem;
       }
     }
   }

package/src/_context-menu.scss

@@ -0,0 +1,141 @@
+// =============================================================================
+// Block Context Menu
+// Compact popup shown when the user clicks the ⋮⋮ BlockHandle drag button
+// without dragging. Offers Delete / Duplicate / Turn into options for the
+// targeted top-level block.
+// =============================================================================
+
+.dm-block-context-menu {
+  position: absolute;
+  display: none;
+  flex-direction: column;
+  min-width: 12rem;
+  max-height: 20rem;
+  overflow-y: auto;
+  // Stop wheel-delta chaining to the page once the menu hits its
+  // own scroll edges. The plugin's JS gate handles the no-overflow
+  // case where this property doesn't apply.
+  overscroll-behavior: contain;
+  padding: 0.25rem;
+  background: var(--dm-toolbar-bg, var(--dm-bg, #ffffff));
+  border: 1px solid var(--dm-border-color, #e5e7eb);
+  border-radius: var(--dm-toolbar-border-radius, 0.5rem);
+  box-shadow: var(--dm-popover-shadow,
+    0 10px 25px rgba(0, 0, 0, 0.08),
+    0 4px 10px rgba(0, 0, 0, 0.04));
+  z-index: var(--dm-z-popover, 50);
+
+  &[data-show] {
+    display: flex;
+  }
+
+  // Slim scrollbar (matches slash-command + floating-menu).
+  scrollbar-width: thin;
+  scrollbar-color: var(--dm-scrollbar-thumb, rgba(0, 0, 0, 0.18)) transparent;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: var(--dm-scrollbar-thumb, rgba(0, 0, 0, 0.18));
+    border-radius: 3px;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background: var(--dm-scrollbar-thumb-hover, rgba(0, 0, 0, 0.28));
+  }
+
+  &-group {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+  }
+
+  // Label doubles as the visual separator above its group.
+  // `.dm-block-context-menu-group-label` is only emitted by the plugin for
+  // the "Turn into" section, so it naturally appears above the second
+  // group. Using the label as the divider (instead of styling the group
+  // itself) avoids the "double border" case where a labeled group follows
+  // another labeled group.
+  &-group-label {
+    padding: 0.5rem 0.5rem 0.125rem;
+    margin-top: 0.25rem;
+    border-top: 1px solid var(--dm-border-color, #e5e7eb);
+    font-size: 0.6875rem;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--dm-muted, #999);
+    user-select: none;
+  }
+
+  &-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    padding: 0.3125rem 0.5rem;
+    border: none;
+    border-radius: var(--dm-button-border-radius, 0.375rem);
+    background: transparent;
+    color: var(--dm-editor-text, inherit);
+    text-align: left;
+    font: inherit;
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: background-color 0.1s;
+
+    &:hover,
+    &:focus-visible {
+      background: var(--dm-button-hover-bg, rgba(0, 0, 0, 0.04));
+    }
+
+    &:focus-visible {
+      // INSET ring (-2px): menu items are tightly packed; an outset ring
+      // would overlap the neighbour. -2px keeps the ring fully inside the
+      // hover background fill.
+      outline: 2px solid var(--dm-accent, #2563eb);
+      outline-offset: -2px;
+    }
+  }
+
+  &-item-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.125rem;
+    height: 1.125rem;
+    flex-shrink: 0;
+    color: var(--dm-muted, #999);
+
+    svg {
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+
+  &-item-label {
+    flex: 1;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+// =============================================================================
+// Active block highlight
+// Class applied via PM Decoration on the block whose BlockContextMenu is open.
+// =============================================================================
+
+.ProseMirror .dm-block-context-active {
+  background-color: var(--dm-block-context-active-bg, rgba(55, 53, 47, 0.06));
+  border-radius: 0.25rem;
+  // box-shadow expands the tint past the block's content box without
+  // affecting layout (negative margins would shift neighbours).
+  box-shadow: 0 0 0 4px var(--dm-block-context-active-bg, rgba(55, 53, 47, 0.06));
+  transition: background-color 0.12s ease, box-shadow 0.12s ease;
+}
+