@domternal/theme 0.2.0

package/src/_emoji-picker.scss

@@ -0,0 +1,219 @@
+// =============================================================================
+// Emoji Picker & Suggestion Styles
+// =============================================================================
+// Both components live outside .dm-toolbar, so we use .dm-editor base variables
+// (--dm-surface, --dm-border-color, --dm-text, --dm-hover, --dm-active, --dm-accent)
+// with hardcoded fallbacks for standalone usage.
+// =============================================================================
+
+// ─── Toolbar Emoji Picker Panel ─────────────────────────────────────────────
+
+.dm-emoji-picker {
+  position: absolute;
+  z-index: 100;
+  width: 20rem;
+  max-height: 22rem;
+  display: flex;
+  flex-direction: column;
+  background: var(--dm-surface, #f8f9fa);
+  border: 1px solid var(--dm-border-color, #e0e0e0);
+  border-radius: 0.25rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+  animation: dm-fade-in 0.2s ease;
+}
+
+// Search input
+.dm-emoji-picker-search {
+  flex-shrink: 0;
+  padding: 0.5rem;
+  border-bottom: 1px solid var(--dm-border-color, #e0e0e0);
+
+  input {
+    width: 100%;
+    padding: 0.375rem 0.5rem;
+    border: 1px solid var(--dm-border-color, #e0e0e0);
+    border-radius: 0.25rem;
+    background: var(--dm-bg, #ffffff);
+    color: var(--dm-text, #1a1a1a);
+    font-size: 0.8125rem;
+    outline: none;
+    box-sizing: border-box;
+
+    &:focus {
+      border-color: var(--dm-accent, #2563eb);
+    }
+
+    &::placeholder {
+      color: var(--dm-muted, #999999);
+    }
+  }
+}
+
+// Category tabs
+.dm-emoji-picker-tabs {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding: 0.375rem 0.5rem;
+  gap: 0.1rem;
+  border-bottom: 1px solid var(--dm-border-color, #e0e0e0);
+  overflow-x: auto;
+
+  // Hide scrollbar
+  scrollbar-width: none;
+  &::-webkit-scrollbar { display: none; }
+}
+
+.dm-emoji-picker-tab {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  flex-shrink: 0;
+  padding: 0;
+  border: none;
+  border-radius: 0.375rem;
+  background: transparent;
+  cursor: pointer;
+  font-size: 1.25rem;
+  line-height: 1;
+  opacity: 0.5;
+  transition: opacity 0.15s, background-color 0.15s;
+
+  &:hover {
+    opacity: 1;
+    background: var(--dm-hover, rgba(0, 0, 0, 0.06));
+  }
+
+  &--active {
+    opacity: 1;
+    background: var(--dm-active, rgba(0, 0, 0, 0.12));
+  }
+}
+
+// Scrollable grid
+.dm-emoji-picker-grid {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.25rem 0.5rem 0.5rem;
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 0.125rem;
+  align-content: start;
+}
+
+// Category heading in grid
+.dm-emoji-picker-category-label {
+  grid-column: 1 / -1;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--dm-text, #1a1a1a);
+  opacity: 0.6;
+  padding: 0.375rem 0 0.125rem;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+// Individual emoji button in grid
+.dm-emoji-swatch {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: none;
+  border-radius: 0.25rem;
+  background: transparent;
+  cursor: pointer;
+  font-size: 1.25rem;
+  line-height: 1;
+  transition: background-color 0.1s, transform 0.1s;
+
+  &:hover {
+    background: var(--dm-hover, rgba(0, 0, 0, 0.06));
+    transform: scale(1.15);
+  }
+}
+
+// "No emoji found" message
+.dm-emoji-picker-empty {
+  grid-column: 1 / -1;
+  padding: 1rem;
+  text-align: center;
+  color: var(--dm-text, #1a1a1a);
+  opacity: 0.5;
+  font-size: 0.8125rem;
+}
+
+// ─── Inline Suggestion Dropdown ─────────────────────────────────────────────
+
+.dm-emoji-suggestion {
+  position: absolute;
+  z-index: 100;
+  min-width: 12rem;
+  max-width: 18rem;
+  padding: 0.25rem;
+  background: var(--dm-surface, #f8f9fa);
+  border: 1px solid var(--dm-border-color, #e0e0e0);
+  border-radius: 0.25rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  animation: dm-fade-in 0.2s ease;
+}
+
+.dm-emoji-suggestion-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.375rem 0.5rem;
+  border: none;
+  border-radius: 0.25rem;
+  background: transparent;
+  color: var(--dm-text, #1a1a1a);
+  cursor: pointer;
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  text-align: left;
+  transition: background-color 0.1s;
+
+  &:hover,
+  &--selected {
+    background: var(--dm-hover, rgba(0, 0, 0, 0.06));
+  }
+}
+
+.dm-emoji-suggestion-emoji {
+  font-size: 1.125rem;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.dm-emoji-suggestion-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dm-emoji-suggestion-empty {
+  padding: 0.5rem;
+  text-align: center;
+  color: var(--dm-text, #1a1a1a);
+  opacity: 0.5;
+  font-size: 0.8125rem;
+}
+
+// ─── Inline Emoji Node ──────────────────────────────────────────────────────
+
+.dm-editor .ProseMirror span.emoji {
+  cursor: default;
+  font-style: normal;
+  padding: 0 0.05em;
+
+  &.ProseMirror-selectednode {
+    outline: 2px solid var(--dm-accent, #2563eb);
+    border-radius: 0.15em;
+  }
+}

package/src/_floating-menu.scss

@@ -0,0 +1,24 @@
+// =============================================================================
+// Floating Menu Styles
+// =============================================================================
+
+.dm-floating-menu {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  gap: var(--dm-toolbar-gap);
+  padding: var(--dm-toolbar-padding);
+  background: var(--dm-toolbar-bg);
+  border: var(--dm-toolbar-border);
+  border-radius: var(--dm-button-border-radius);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.2s ease, visibility 0.2s;
+  z-index: 50;
+
+  &[data-show] {
+    visibility: visible;
+    opacity: 1;
+  }
+}

package/src/_image.scss

@@ -0,0 +1,224 @@
+// =============================================================================
+// Image Styles
+// =============================================================================
+// Image extension renders as <img> with optional float inline styles.
+// Base img styles are in _content.scss — this file adds float constraints.
+// =============================================================================
+
+.dm-editor .ProseMirror {
+  img {
+    // Floated images shouldn't exceed 60% width
+    &[style*="float: left"],
+    &[style*="float: right"] {
+      max-width: 60%;
+    }
+  }
+}
+
+// Resizable image wrapper (NodeView)
+.dm-editor .ProseMirror {
+  .dm-image-resizable {
+    position: relative;
+    display: inline-block;
+    max-width: 100%;
+    margin: 0.75em 0;
+    line-height: 0;
+
+    img {
+      display: block;
+      max-width: 100%;
+      height: auto;
+    }
+
+    // Float variants via data attribute
+    &[data-float="left"]  { float: left; margin: 0 1em 1em 0; }
+    &[data-float="right"] { float: right; margin: 0 0 1em 1em; }
+    &[data-float="center"] {
+      display: block;
+      width: fit-content;
+      margin-left: auto;
+      margin-right: auto;
+    }
+    &[data-float="left"],
+    &[data-float="right"] {
+      max-width: 60%;
+      z-index: 1; // above inline text so clicks always hit the image, not the paragraph behind
+    }
+
+    // Selected state — accent outline + visible handles
+    &.ProseMirror-selectednode {
+      outline: 2px solid var(--dm-accent, #2563eb);
+
+      .dm-image-handle {
+        display: block;
+      }
+    }
+  }
+
+  // Resize handles — hidden by default, shown on selection
+  .dm-image-handle {
+    display: none;
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: var(--dm-accent, #2563eb);
+    border: 1px solid #fff;
+    border-radius: 1px;
+    z-index: 5;
+
+    &-nw { top: -4px; left: -4px; cursor: nw-resize; }
+    &-ne { top: -4px; right: -4px; cursor: ne-resize; }
+    &-sw { bottom: -4px; left: -4px; cursor: sw-resize; }
+    &-se { bottom: -4px; right: -4px; cursor: se-resize; }
+  }
+}
+
+// =============================================================================
+// Image Insert Popover (appended to document.body — same pattern as link popover)
+// =============================================================================
+
+.dm-image-popover {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  background: #f8f9fa;
+  border: 1px solid #e0e0e0;
+  border-radius: 0.25rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.2s ease, visibility 0.2s;
+  z-index: 60;
+
+  &[data-show] {
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
+.dm-image-popover-input {
+  border: 1px solid #e0e0e0;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.8125rem;
+  font-family: inherit;
+  min-width: 14rem;
+  outline: none;
+  background: #fff;
+  color: #1a1a1a;
+
+  &:focus {
+    border-color: #2563eb;
+  }
+}
+
+.dm-image-popover-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: none;
+  border-radius: 0.25rem;
+  background: transparent;
+  color: #1a1a1a;
+  cursor: pointer;
+  transition: background-color 0.15s, color 0.15s;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.06);
+  }
+
+  svg {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+}
+
+.dm-image-popover-apply:hover {
+  color: #2563eb;
+}
+
+.dm-image-popover-browse:hover {
+  color: #2563eb;
+}
+
+// Dark theme override
+[data-theme="dark"] .dm-image-popover,
+.dm-theme-dark .dm-image-popover {
+  background: #2a2a2a;
+  border-color: #404040;
+
+  .dm-image-popover-input {
+    background: #1a1a1a;
+    border-color: #404040;
+    color: #e0e0e0;
+
+    &:focus {
+      border-color: #3b82f6;
+    }
+  }
+
+  .dm-image-popover-btn {
+    color: #e0e0e0;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  .dm-image-popover-apply:hover {
+    color: #3b82f6;
+  }
+}
+
+// Auto dark mode — follows system preference
+@media (prefers-color-scheme: dark) {
+  .dm-theme-auto .dm-image-popover {
+    background: #2a2a2a;
+    border-color: #404040;
+
+    .dm-image-popover-input {
+      background: #1a1a1a;
+      border-color: #404040;
+      color: #e0e0e0;
+
+      &:focus {
+        border-color: #3b82f6;
+      }
+    }
+
+    .dm-image-popover-btn {
+      color: #e0e0e0;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.1);
+      }
+    }
+
+    .dm-image-popover-apply:hover {
+      color: #3b82f6;
+    }
+  }
+}
+
+// Drag-and-drop overlay — shown when dragging image files over the editor
+.dm-editor.dm-dragover {
+  outline: 2px dashed var(--dm-accent);
+  outline-offset: -2px;
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--dm-accent);
+    opacity: 0.05;
+    pointer-events: none;
+    z-index: 10;
+  }
+}

package/src/_invisible-chars.scss

@@ -0,0 +1,44 @@
+// =============================================================================
+// Invisible Characters
+// =============================================================================
+// Styles for the InvisibleChars extension decorations.
+// Widget decorations (¶, ↵) use .invisible-char with type modifiers.
+// Inline decorations (spaces, nbsp) use [data-char] attributes.
+// =============================================================================
+
+.dm-editor .ProseMirror {
+  // Widget decorations (paragraph marks, hard breaks)
+  .invisible-char {
+    color: var(--dm-invisible-char-color, var(--dm-muted, #999));
+    pointer-events: none;
+    user-select: none;
+  }
+
+  // Inline space decorations — overlay · on the invisible space character
+  [data-char="space"] {
+    position: relative;
+
+    &::after {
+      content: '·';
+      position: absolute;
+      inset: 0;
+      text-align: center;
+      color: var(--dm-invisible-char-color, var(--dm-muted, #999));
+      pointer-events: none;
+    }
+  }
+
+  // Inline non-breaking space decorations — overlay ° on the nbsp character
+  [data-char="nbsp"] {
+    position: relative;
+
+    &::after {
+      content: '°';
+      position: absolute;
+      inset: 0;
+      text-align: center;
+      color: var(--dm-invisible-char-color, var(--dm-muted, #999));
+      pointer-events: none;
+    }
+  }
+}

package/src/_link-popover.scss

@@ -0,0 +1,144 @@
+// =============================================================================
+// Link Popover Styles
+// =============================================================================
+// The popover is appended to document.body (to escape overflow:hidden on
+// .dm-editor), so it can't inherit CSS variables from .dm-editor / .dm-toolbar.
+// We hardcode fallback values that match the light theme defaults.
+// =============================================================================
+
+.dm-link-popover {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  background: #f8f9fa;
+  border: 1px solid #e0e0e0;
+  border-radius: 0.25rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.2s ease, visibility 0.2s;
+  z-index: 60;
+
+  &[data-show] {
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
+.dm-link-popover-input {
+  border: 1px solid #e0e0e0;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.8125rem;
+  font-family: inherit;
+  min-width: 14rem;
+  outline: none;
+  background: #fff;
+  color: #1a1a1a;
+
+  &:focus {
+    border-color: #2563eb;
+  }
+}
+
+.dm-link-popover-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: none;
+  border-radius: 0.25rem;
+  background: transparent;
+  color: #1a1a1a;
+  cursor: pointer;
+  transition: background-color 0.15s, color 0.15s;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.06);
+  }
+
+  svg {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+}
+
+.dm-link-popover-apply:hover {
+  color: #2563eb;
+}
+
+.dm-link-popover-remove:hover {
+  color: #dc2626;
+}
+
+// Pending-link decoration — highlights the text range while the popover
+// input has focus (browser hides native selection on editor blur).
+.dm-link-pending {
+  background-color: rgba(37, 99, 235, 0.12);
+  border-radius: 1px;
+}
+
+// Dark theme override
+[data-theme="dark"] .dm-link-popover,
+.dm-theme-dark .dm-link-popover {
+  background: #2a2a2a;
+  border-color: #404040;
+
+  .dm-link-popover-input {
+    background: #1a1a1a;
+    border-color: #404040;
+    color: #e0e0e0;
+
+    &:focus {
+      border-color: #3b82f6;
+    }
+  }
+
+  .dm-link-popover-btn {
+    color: #e0e0e0;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  .dm-link-popover-apply:hover {
+    color: #3b82f6;
+  }
+}
+
+// Auto dark mode — follows system preference
+@media (prefers-color-scheme: dark) {
+  .dm-theme-auto .dm-link-popover {
+    background: #2a2a2a;
+    border-color: #404040;
+
+    .dm-link-popover-input {
+      background: #1a1a1a;
+      border-color: #404040;
+      color: #e0e0e0;
+
+      &:focus {
+        border-color: #3b82f6;
+      }
+    }
+
+    .dm-link-popover-btn {
+      color: #e0e0e0;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.1);
+      }
+    }
+
+    .dm-link-popover-apply:hover {
+      color: #3b82f6;
+    }
+  }
+}

package/src/_mention.scss

@@ -0,0 +1,25 @@
+// =============================================================================
+// Mention Styles
+// =============================================================================
+// Mention renders as span.mention[data-type="mention"]
+// =============================================================================
+
+.dm-editor .ProseMirror {
+  .mention {
+    display: inline;
+    background: var(--dm-mention-bg);
+    color: var(--dm-mention-color);
+    border-radius: var(--dm-mention-border-radius);
+    padding: 0.1em 0.3em;
+    font-weight: 500;
+    font-size: 0.95em;
+    white-space: nowrap;
+  }
+
+  // In-progress mention suggestion (typing @name)
+  .mention-suggestion {
+    text-decoration: underline;
+    text-decoration-color: var(--dm-accent, #2563eb);
+    text-underline-offset: 2px;
+  }
+}

package/src/_placeholder.scss

@@ -0,0 +1,16 @@
+// =============================================================================
+// Placeholder Extension Styles
+// =============================================================================
+// Works with the Placeholder extension which adds data-placeholder attribute
+// and .is-empty / .is-editor-empty classes via decorations.
+// =============================================================================
+
+.dm-editor .ProseMirror {
+  .is-empty::before {
+    content: attr(data-placeholder);
+    float: left;
+    color: var(--dm-placeholder-color);
+    pointer-events: none;
+    height: 0;
+  }
+}