@domternal/theme 0.6.2 → 0.7.0

package/dist/domternal-theme.expanded.css

@@ -12,8 +12,37 @@
   --dm-accent-surface: rgba(37, 99, 235, 0.1);
   --dm-focus-color: rgba(66, 133, 244, 0.3);
   --dm-selection: rgba(66, 133, 244, 0.2);
+  --dm-scrollbar-thumb: rgba(0, 0, 0, 0.18);
+  --dm-scrollbar-thumb-hover: rgba(0, 0, 0, 0.28);
+  --dm-z-handle: 25;
+  --dm-z-popover: 50;
+  --dm-block-handle-gutter: 3rem;
+  --dm-block-handle-left: -0.5rem;
+  --dm-block-inline-padding: 0.375rem;
+  --dm-block-children-indent: 1.5rem;
+  --dm-popover-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.04);
   --dm-code-surface: #f0f0f0;
   --dm-code-color: inherit;
+  --dm-block-bg-gray: #f1f1ef;
+  --dm-block-bg-brown: #f3eeee;
+  --dm-block-bg-orange: #f8ecdf;
+  --dm-block-bg-yellow: #faf3dd;
+  --dm-block-bg-green: #eef3ed;
+  --dm-block-bg-blue: #e9f3f7;
+  --dm-block-bg-purple: #f6f3f8;
+  --dm-block-bg-pink: #f9f2f5;
+  --dm-block-bg-red: #faecec;
+  --dm-block-text-gray: #787774;
+  --dm-block-text-brown: #976d57;
+  --dm-block-text-orange: #cc782f;
+  --dm-block-text-yellow: #c29343;
+  --dm-block-text-green: #548164;
+  --dm-block-text-blue: #487ca5;
+  --dm-block-text-purple: #8a67ab;
+  --dm-block-text-pink: #b35488;
+  --dm-block-text-red: #c4554d;
+  --dm-block-selected-halo: rgba(112, 207, 248, 0.25);
+  --dm-block-context-active-bg: rgba(55, 53, 47, 0.06);
   --dm-editor-bg: var(--dm-bg);
   --dm-editor-text: var(--dm-text);
   --dm-editor-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
@@ -58,6 +87,8 @@
   --dm-details-border: 1px solid var(--dm-border-color);
   --dm-details-bg: var(--dm-surface);
   --dm-details-summary-font-weight: 600;
+  --dm-task-checkbox-left: -1.15em;
+  --dm-task-checkbox-top: 0.45em;
 }
 
 .dm-toolbar {
@@ -77,6 +108,66 @@
   --dm-separator-margin: 0.375rem;
 }
 
+:root {
+  --dm-toc-tick-h1-width: 18px;
+  --dm-toc-tick-h2-width: 12px;
+  --dm-toc-tick-h3-width: 8px;
+  --dm-toc-tick-h4-width: 6px;
+  --dm-toc-tick-h5-width: 5px;
+  --dm-toc-tick-h6-width: 4px;
+  --dm-toc-tick-height: 2px;
+  --dm-toc-tick-radius: 1px;
+  --dm-toc-tick-gap: 10px;
+  --dm-toc-tick-color: rgba(55, 53, 47, 0.4);
+  --dm-toc-tick-hover-color: rgba(55, 53, 47, 0.7);
+  --dm-toc-tick-active-color: rgba(55, 53, 47, 0.95);
+  --dm-toc-padding-block: 12px;
+  --dm-toc-padding-inline: 8px;
+  --dm-toc-right-offset: 24px;
+  --dm-toc-z-index: 10;
+  --dm-toc-editor-top: 1rem;
+  --dm-toc-page-offset: 8px;
+  --dm-toc-card-viewport-margin: 16px;
+  --dm-toc-card-bg: rgba(255, 255, 255, 0.98);
+  --dm-toc-card-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+  --dm-toc-card-radius: 6px;
+  --dm-toc-card-border: 1px solid rgba(0, 0, 0, 0.06);
+  --dm-toc-card-min-width: 180px;
+  --dm-toc-card-max-width: 260px;
+  --dm-toc-card-padding-block: 6px;
+  --dm-toc-card-offset: 8px;
+  --dm-toc-card-transition: 180ms;
+  --dm-toc-row-padding-block: 4px;
+  --dm-toc-row-padding-inline-start: 12px;
+  --dm-toc-row-padding-inline-end: 16px;
+  --dm-toc-row-indent: 14px;
+  --dm-toc-row-color: rgba(55, 53, 47, 0.7);
+  --dm-toc-row-hover-bg: rgba(0, 0, 0, 0.04);
+  --dm-toc-row-active-color: rgba(55, 53, 47, 0.95);
+  --dm-toc-row-active-weight: 600;
+  --dm-toc-row-font-size: 13px;
+  --dm-toc-row-line-height: 1.4;
+  --dm-toc-block-bg: rgba(0, 0, 0, 0.02);
+  --dm-toc-block-border: 1px solid rgba(0, 0, 0, 0.08);
+  --dm-toc-block-radius: 6px;
+  --dm-toc-block-padding-block: 12px;
+  --dm-toc-block-padding-inline: 16px;
+  --dm-toc-block-margin-block: 1rem;
+  --dm-toc-block-empty-color: rgba(55, 53, 47, 0.5);
+  --dm-toc-block-empty-font-style: italic;
+  --dm-toc-block-link-color: rgba(55, 53, 47, 0.8);
+  --dm-toc-block-link-hover-color: rgba(55, 53, 47, 1);
+  --dm-toc-block-link-hover-bg: rgba(0, 0, 0, 0.04);
+  --dm-toc-block-link-active-color: rgba(55, 53, 47, 0.95);
+  --dm-toc-block-link-active-weight: 600;
+  --dm-toc-block-link-padding-block: 4px;
+  --dm-toc-block-link-padding-inline: 8px;
+  --dm-toc-block-link-indent: 16px;
+  --dm-toc-block-link-radius: 3px;
+  --dm-toc-block-link-font-size: 0.9375rem;
+  --dm-toc-block-link-line-height: 1.5;
+}
+
 .dm-editor .ProseMirror {
   position: relative;
   word-wrap: break-word;
@@ -265,6 +356,9 @@ img.ProseMirror-separator {
     opacity: 1;
   }
 }
+.dm-editor .ProseMirror :where(p, h1, h2, h3, h4, h5, h6) {
+  padding-inline: var(--dm-block-inline-padding);
+}
 .dm-editor .ProseMirror h1,
 .dm-editor .ProseMirror h2,
 .dm-editor .ProseMirror h3,
@@ -314,20 +408,27 @@ img.ProseMirror-separator {
   border-left: var(--dm-blockquote-border);
   color: var(--dm-blockquote-color);
   margin: 0.5em 0;
-  padding: 0.1em 0 0.1em 0.8em;
+  padding: 0.1em var(--dm-block-inline-padding) 0.1em 0.8em;
 }
 .dm-editor .ProseMirror ul,
 .dm-editor .ProseMirror ol {
   margin: 0.75em 0;
   padding-left: 1.5em;
+  padding-right: var(--dm-block-inline-padding);
 }
-.dm-editor .ProseMirror ul li,
+.dm-editor .ProseMirror ul:not([data-type=taskList]) li,
 .dm-editor .ProseMirror ol li {
   margin: 0.25em 0;
 }
-.dm-editor .ProseMirror ul li > p,
+.dm-editor .ProseMirror ul:not([data-type=taskList]) li > p,
 .dm-editor .ProseMirror ol li > p {
   margin: 0.1em 0;
+  padding-inline: 0.3em 0;
+}
+.dm-editor .ProseMirror ul:not([data-type=taskList]) li > :not(p:first-child):not(ul):not(ol),
+.dm-editor .ProseMirror ol li > :not(p:first-child):not(ul):not(ol) {
+  margin-inline-start: var(--dm-block-children-indent, 1.5rem);
+  margin-top: 0.25rem;
 }
 .dm-editor .ProseMirror hr {
   border: none;
@@ -717,7 +818,7 @@ img.ProseMirror-separator {
   --dm-button-active-color: var(--dm-accent, #2563eb);
   --dm-button-disabled-opacity: 0.4;
 }
-.dm-bubble-menu .dm-toolbar-button svg {
+.dm-bubble-menu .dm-toolbar-button svg:not(.dm-dropdown-caret) {
   width: 1rem;
   height: 1rem;
 }
@@ -752,21 +853,121 @@ img.ProseMirror-separator {
   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);
+  gap: 0.25rem;
+  min-width: 16rem;
+  max-height: 22rem;
+  overflow-y: auto;
+  padding: 0.375rem;
+  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));
   visibility: hidden;
   opacity: 0;
-  transition: opacity 0.2s ease, visibility 0.2s;
-  z-index: 50;
+  transition: opacity 0.15s ease, visibility 0.15s;
+  z-index: var(--dm-z-popover, 50);
+  scrollbar-width: thin;
+  scrollbar-color: var(--dm-scrollbar-thumb, rgba(0, 0, 0, 0.18)) transparent;
+}
+.dm-floating-menu::-webkit-scrollbar {
+  width: 6px;
+}
+.dm-floating-menu::-webkit-scrollbar-track {
+  background: transparent;
+  margin: 0.375rem 0;
+}
+.dm-floating-menu::-webkit-scrollbar-thumb {
+  background: var(--dm-scrollbar-thumb, rgba(0, 0, 0, 0.18));
+  border-radius: 3px;
+  transition: background-color 0.15s;
+}
+.dm-floating-menu::-webkit-scrollbar-thumb:hover {
+  background: var(--dm-scrollbar-thumb-hover, rgba(0, 0, 0, 0.28));
 }
 .dm-floating-menu[data-show] {
   visibility: visible;
   opacity: 1;
 }
+.dm-floating-menu-group-label {
+  padding: 0.375rem 0.5rem 0.125rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--dm-muted, #999);
+  user-select: none;
+}
+.dm-floating-menu-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+.dm-floating-menu-group + .dm-floating-menu-group:not(:has(+ .dm-floating-menu-group-label)) {
+  margin-top: 0.25rem;
+}
+.dm-floating-menu-group-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+.dm-floating-menu-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-button-color, inherit);
+  text-align: left;
+  font: inherit;
+  cursor: pointer;
+  transition: background-color 0.12s;
+}
+.dm-floating-menu-item:hover:not([aria-disabled=true]), .dm-floating-menu-item:focus:not([aria-disabled=true]) {
+  background: var(--dm-button-hover-bg, rgba(0, 0, 0, 0.04));
+}
+.dm-floating-menu-item:focus-visible {
+  outline: 2px solid var(--dm-accent, #2563eb);
+  outline-offset: -2px;
+}
+.dm-floating-menu-item[aria-disabled=true], .dm-floating-menu-item:disabled {
+  opacity: var(--dm-button-disabled-opacity, 0.45);
+  cursor: not-allowed;
+}
+.dm-floating-menu-item-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+  color: var(--dm-editor-text, inherit);
+}
+.dm-floating-menu-item-icon svg {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+.dm-floating-menu-item-label {
+  flex: 1;
+  min-width: 0;
+  font-size: 0.875rem;
+  color: var(--dm-editor-text, inherit);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.dm-floating-menu-item-shortcut {
+  flex-shrink: 0;
+  padding: 0.0625rem 0.375rem;
+  font-family: var(--dm-code-font, ui-monospace, monospace);
+  font-size: 0.6875rem;
+  color: var(--dm-muted, #999);
+  background: var(--dm-surface, #f8f9fa);
+  border: 1px solid var(--dm-border-color, #e5e7eb);
+  border-radius: 0.25rem;
+  user-select: none;
+}
 
 .dm-link-popover {
   position: fixed;
@@ -894,134 +1095,476 @@ img.ProseMirror-separator {
     color: #3b82f6;
   }
 }
-.dm-editor .ProseMirror .is-empty::before {
-  content: attr(data-placeholder);
-  float: left;
-  color: var(--dm-placeholder-color);
-  pointer-events: none;
-  height: 0;
+.dm-editor--has-block-handle {
+  overflow: visible;
+}
+.dm-editor--has-block-handle .ProseMirror {
+  padding-left: var(--dm-block-handle-gutter, 4rem);
 }
 
-.dm-editor .ProseMirror ul[data-type=taskList] {
-  list-style: none;
-  padding-left: 0;
+.dm-editor--has-block-handle .ProseMirror-selectednode,
+.dm-editor--has-block-handle .ProseMirror-selectednoderange {
+  position: relative;
+  outline: none;
 }
-.dm-editor .ProseMirror ul[data-type=taskList] li[data-type=taskItem] {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.5em;
+.dm-editor--has-block-handle .ProseMirror-selectednode::before,
+.dm-editor--has-block-handle .ProseMirror-selectednoderange::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-editor .ProseMirror ul[data-type=taskList] li[data-type=taskItem] > label {
+
+.dm-block-handle {
+  position: absolute;
+  left: var(--dm-block-handle-left, -0.5rem);
   display: flex;
   align-items: center;
-  flex-shrink: 0;
-  margin-top: 0.4em;
-  user-select: none;
+  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);
 }
-.dm-editor .ProseMirror ul[data-type=taskList] li[data-type=taskItem] > label input[type=checkbox] {
-  width: 1em;
-  height: 1em;
-  margin: 0;
+.dm-block-handle[data-show] {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+.dm-block-handle-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;
-  accent-color: var(--dm-accent, #2563eb);
+  border-radius: 3px;
+  transition: background-color 0.1s, color 0.1s;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: none;
 }
-.dm-editor .ProseMirror ul[data-type=taskList] li[data-type=taskItem] > div {
-  flex: 1;
-  min-width: 0;
+.dm-block-handle-btn:hover {
+  background: var(--dm-button-hover-bg, rgba(0, 0, 0, 0.04));
+  color: var(--dm-editor-text, inherit);
 }
-.dm-editor .ProseMirror ul[data-type=taskList] li[data-type=taskItem] > div > p {
-  margin: 0;
+.dm-block-handle-btn:focus-visible {
+  outline: 2px solid var(--dm-accent, #2563eb);
+  outline-offset: -1px;
 }
-.dm-editor .ProseMirror ul[data-type=taskList] li[data-type=taskItem][data-checked=true] > div {
-  text-decoration: line-through;
-  opacity: 0.6;
+.dm-block-handle-btn svg {
+  width: 1rem;
+  height: 1rem;
+  pointer-events: none;
+}
+.dm-block-handle-drag {
+  cursor: grab;
+}
+.dm-block-handle-drag:active {
+  cursor: grabbing;
+}
+.dm-block-handle-plus:hover {
+  color: var(--dm-accent, #2563eb);
 }
 
-.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;
+.dm-block-drop-indicator {
+  position: absolute;
+  height: 2px;
+  background: var(--dm-accent, #2563eb);
+  border-radius: 1px;
+  pointer-events: none;
+  z-index: 5;
+  display: none;
+  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.15);
+  transform: translateY(3px);
+  transition: left 80ms ease-out, width 80ms ease-out, top 80ms ease-out, transform 80ms ease-out;
 }
-.dm-editor .ProseMirror .mention-suggestion {
-  text-decoration: underline;
-  text-decoration-color: var(--dm-accent, #2563eb);
-  text-underline-offset: 2px;
+.dm-block-drop-indicator[data-show] {
+  display: block;
+}
+.dm-block-drop-indicator[data-mode=nested] {
+  height: 0;
+  background: transparent;
+  border-radius: 0;
+  border-top: 2px dashed var(--dm-accent, #2563eb);
+  box-shadow: none;
+  transform: translateY(-2px);
 }
 
-.dm-mention-suggestion {
+.dm-slash-command-menu {
   position: absolute;
-  z-index: 100;
-  min-width: 12rem;
-  max-width: 20rem;
-  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;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 17rem;
+  max-height: 22rem;
+  overflow-y: auto;
+  padding: 0.375rem;
+  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);
+  scrollbar-width: thin;
+  scrollbar-color: var(--dm-scrollbar-thumb, rgba(0, 0, 0, 0.18)) transparent;
+}
+.dm-slash-command-menu::-webkit-scrollbar {
+  width: 6px;
+}
+.dm-slash-command-menu::-webkit-scrollbar-track {
+  background: transparent;
+  margin: 0.375rem 0;
+}
+.dm-slash-command-menu::-webkit-scrollbar-thumb {
+  background: var(--dm-scrollbar-thumb, rgba(0, 0, 0, 0.18));
+  border-radius: 3px;
+  transition: background-color 0.15s;
+}
+.dm-slash-command-menu::-webkit-scrollbar-thumb:hover {
+  background: var(--dm-scrollbar-thumb-hover, rgba(0, 0, 0, 0.28));
 }
 
-.dm-mention-suggestion-item {
+.dm-slash-command-query {
+  color: var(--dm-accent, #2563eb);
+}
+
+.dm-slash-command-group-label {
+  padding: 0.375rem 0.5rem 0.125rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--dm-muted, #999);
+  user-select: none;
+}
+
+.dm-slash-command-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.dm-slash-command-item {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   width: 100%;
   padding: 0.375rem 0.5rem;
   border: none;
-  border-radius: 0.25rem;
+  border-radius: var(--dm-button-border-radius, 0.375rem);
   background: transparent;
-  color: var(--dm-text, #1a1a1a);
-  cursor: pointer;
-  font-size: 0.8125rem;
-  line-height: 1.4;
+  color: var(--dm-editor-text, inherit);
   text-align: left;
+  font: inherit;
+  cursor: pointer;
   transition: background-color 0.1s;
 }
-.dm-mention-suggestion-item:hover, .dm-mention-suggestion-item--selected {
-  background: var(--dm-hover, rgba(0, 0, 0, 0.06));
+.dm-slash-command-item[data-selected] {
+  background: var(--dm-button-hover-bg, rgba(0, 0, 0, 0.04));
 }
-.dm-mention-suggestion-item:focus-visible {
+.dm-slash-command-item:focus-visible {
   outline: 2px solid var(--dm-accent, #2563eb);
-  outline-offset: 1px;
+  outline-offset: -2px;
 }
 
-.dm-mention-suggestion-label {
+.dm-slash-command-item-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+  color: var(--dm-editor-text, inherit);
+}
+.dm-slash-command-item-icon svg {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.dm-slash-command-item-text {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  line-height: 1.25;
+}
+
+.dm-slash-command-item-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--dm-editor-text, inherit);
+  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
-.dm-mention-suggestion-empty {
-  padding: 0.5rem;
-  text-align: center;
-  color: var(--dm-text, #1a1a1a);
-  opacity: 0.5;
-  font-size: 0.8125rem;
+.dm-slash-command-item-description {
+  font-size: 0.75rem;
+  color: var(--dm-muted, #999);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.dm-editor .ProseMirror img[style*="float: left"], .dm-editor .ProseMirror img[style*="float: right"] {
-  max-width: 60%;
+.dm-slash-command-item-shortcut {
+  flex-shrink: 0;
+  padding: 0.0625rem 0.375rem;
+  font-family: var(--dm-code-font, ui-monospace, monospace);
+  font-size: 0.6875rem;
+  color: var(--dm-muted, #999);
+  background: var(--dm-surface, #f8f9fa);
+  border: 1px solid var(--dm-border-color, #e5e7eb);
+  border-radius: 0.25rem;
+  user-select: none;
 }
 
-.dm-editor .ProseMirror .dm-image-resizable {
-  position: relative;
-  display: inline-block;
-  max-width: 100%;
-  margin: 0.75em 0;
-  line-height: 0;
-}
-.dm-editor .ProseMirror .dm-image-resizable img {
-  display: block;
-  max-width: 100%;
-  height: auto;
+.dm-slash-command-empty {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8125rem;
+  color: var(--dm-muted, #999);
+  user-select: none;
 }
-.dm-editor .ProseMirror .dm-image-resizable[data-float=left] {
+
+.dm-block-context-menu {
+  position: absolute;
+  display: none;
+  flex-direction: column;
+  min-width: 12rem;
+  max-height: 20rem;
+  overflow-y: auto;
+  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);
+}
+.dm-block-context-menu[data-show] {
+  display: flex;
+}
+.dm-block-context-menu {
+  scrollbar-width: thin;
+  scrollbar-color: var(--dm-scrollbar-thumb, rgba(0, 0, 0, 0.18)) transparent;
+}
+.dm-block-context-menu::-webkit-scrollbar {
+  width: 6px;
+}
+.dm-block-context-menu::-webkit-scrollbar-track {
+  background: transparent;
+}
+.dm-block-context-menu::-webkit-scrollbar-thumb {
+  background: var(--dm-scrollbar-thumb, rgba(0, 0, 0, 0.18));
+  border-radius: 3px;
+}
+.dm-block-context-menu::-webkit-scrollbar-thumb:hover {
+  background: var(--dm-scrollbar-thumb-hover, rgba(0, 0, 0, 0.28));
+}
+.dm-block-context-menu-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.dm-block-context-menu-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;
+}
+.dm-block-context-menu-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;
+}
+.dm-block-context-menu-item:hover, .dm-block-context-menu-item:focus-visible {
+  background: var(--dm-button-hover-bg, rgba(0, 0, 0, 0.04));
+}
+.dm-block-context-menu-item:focus-visible {
+  outline: 2px solid var(--dm-accent, #2563eb);
+  outline-offset: -2px;
+}
+.dm-block-context-menu-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);
+}
+.dm-block-context-menu-item-icon svg {
+  width: 1rem;
+  height: 1rem;
+}
+.dm-block-context-menu-item-label {
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.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: 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;
+}
+
+.dm-editor .ProseMirror .is-empty::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: var(--dm-placeholder-color);
+  pointer-events: none;
+  height: 0;
+}
+
+.dm-editor .ProseMirror ul[data-type=taskList] {
+  list-style: none;
+  padding-left: 1.5em;
+}
+.dm-editor .ProseMirror ul[data-type=taskList] li[data-type=taskItem] {
+  position: relative;
+  margin: 0.25em 0;
+}
+.dm-editor .ProseMirror ul[data-type=taskList] li[data-type=taskItem] > label {
+  position: absolute;
+  left: var(--dm-task-checkbox-left, -1.15em);
+  top: var(--dm-task-checkbox-top, 0.45em);
+  display: flex;
+  align-items: center;
+  user-select: none;
+}
+.dm-editor .ProseMirror ul[data-type=taskList] li[data-type=taskItem] > label input[type=checkbox] {
+  width: 1em;
+  height: 1em;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  accent-color: var(--dm-accent, #2563eb);
+}
+.dm-editor .ProseMirror ul[data-type=taskList] li[data-type=taskItem] > div > p {
+  margin: 0.1em 0;
+  padding-inline: 0.3em 0;
+}
+.dm-editor .ProseMirror ul[data-type=taskList] li[data-type=taskItem] > div > :not(p:first-child):not(ul):not(ol) {
+  margin-inline-start: var(--dm-block-children-indent, 1.5rem);
+  margin-top: 0.25rem;
+}
+.dm-editor .ProseMirror ul[data-type=taskList] li[data-type=taskItem][data-checked=true] > div > p:first-child {
+  text-decoration: line-through;
+  opacity: 0.6;
+}
+
+.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;
+}
+.dm-editor .ProseMirror .mention-suggestion {
+  text-decoration: underline;
+  text-decoration-color: var(--dm-accent, #2563eb);
+  text-underline-offset: 2px;
+}
+
+.dm-mention-suggestion {
+  position: absolute;
+  z-index: 100;
+  min-width: 12rem;
+  max-width: 20rem;
+  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-mention-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;
+}
+.dm-mention-suggestion-item:hover, .dm-mention-suggestion-item--selected {
+  background: var(--dm-hover, rgba(0, 0, 0, 0.06));
+}
+.dm-mention-suggestion-item:focus-visible {
+  outline: 2px solid var(--dm-accent, #2563eb);
+  outline-offset: 1px;
+}
+
+.dm-mention-suggestion-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dm-mention-suggestion-empty {
+  padding: 0.5rem;
+  text-align: center;
+  color: var(--dm-text, #1a1a1a);
+  opacity: 0.5;
+  font-size: 0.8125rem;
+}
+
+.dm-editor .ProseMirror img[style*="float: left"], .dm-editor .ProseMirror img[style*="float: right"] {
+  max-width: 60%;
+}
+
+.dm-editor .ProseMirror .dm-image-resizable {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  margin: 0.75em 0;
+  line-height: 0;
+}
+.dm-editor .ProseMirror .dm-image-resizable img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+.dm-editor .ProseMirror .dm-image-resizable[data-float=left] {
   float: left;
   margin: 0 1em 1em 0;
 }
@@ -1783,6 +2326,693 @@ img.ProseMirror-separator {
   margin: 0.25rem 0;
 }
 
+.dm-editor .ProseMirror [data-bg-color=gray] {
+  background-color: var(--dm-block-bg-gray);
+}
+.dm-editor .ProseMirror [data-bg-color=brown] {
+  background-color: var(--dm-block-bg-brown);
+}
+.dm-editor .ProseMirror [data-bg-color=orange] {
+  background-color: var(--dm-block-bg-orange);
+}
+.dm-editor .ProseMirror [data-bg-color=yellow] {
+  background-color: var(--dm-block-bg-yellow);
+}
+.dm-editor .ProseMirror [data-bg-color=green] {
+  background-color: var(--dm-block-bg-green);
+}
+.dm-editor .ProseMirror [data-bg-color=blue] {
+  background-color: var(--dm-block-bg-blue);
+}
+.dm-editor .ProseMirror [data-bg-color=purple] {
+  background-color: var(--dm-block-bg-purple);
+}
+.dm-editor .ProseMirror [data-bg-color=pink] {
+  background-color: var(--dm-block-bg-pink);
+}
+.dm-editor .ProseMirror [data-bg-color=red] {
+  background-color: var(--dm-block-bg-red);
+}
+.dm-editor .ProseMirror [data-bg-color] {
+  padding-block: 0.125rem;
+  border-radius: 0.25rem;
+}
+.dm-editor .ProseMirror [data-text-color=gray] {
+  color: var(--dm-block-text-gray);
+}
+.dm-editor .ProseMirror [data-text-color=brown] {
+  color: var(--dm-block-text-brown);
+}
+.dm-editor .ProseMirror [data-text-color=orange] {
+  color: var(--dm-block-text-orange);
+}
+.dm-editor .ProseMirror [data-text-color=yellow] {
+  color: var(--dm-block-text-yellow);
+}
+.dm-editor .ProseMirror [data-text-color=green] {
+  color: var(--dm-block-text-green);
+}
+.dm-editor .ProseMirror [data-text-color=blue] {
+  color: var(--dm-block-text-blue);
+}
+.dm-editor .ProseMirror [data-text-color=purple] {
+  color: var(--dm-block-text-purple);
+}
+.dm-editor .ProseMirror [data-text-color=pink] {
+  color: var(--dm-block-text-pink);
+}
+.dm-editor .ProseMirror [data-text-color=red] {
+  color: var(--dm-block-text-red);
+}
+
+.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 {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.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;
+}
+.dm-block-color-swatch:hover {
+  transform: scale(1.1);
+  box-shadow: 0 0 0 2px var(--dm-accent-surface, rgba(37, 99, 235, 0.15));
+}
+.dm-block-color-swatch:focus-visible, .dm-block-color-swatch[aria-pressed=true] {
+  outline: 2px solid var(--dm-accent, #2563eb);
+  outline-offset: 1px;
+}
+.dm-block-color-swatch::before {
+  content: "";
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+}
+.dm-block-color-swatch[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);
+}
+
+.dm-block-color-swatch--bg[data-color=gray]::before {
+  background: var(--dm-block-bg-gray);
+}
+.dm-block-color-swatch--bg[data-color=brown]::before {
+  background: var(--dm-block-bg-brown);
+}
+.dm-block-color-swatch--bg[data-color=orange]::before {
+  background: var(--dm-block-bg-orange);
+}
+.dm-block-color-swatch--bg[data-color=yellow]::before {
+  background: var(--dm-block-bg-yellow);
+}
+.dm-block-color-swatch--bg[data-color=green]::before {
+  background: var(--dm-block-bg-green);
+}
+.dm-block-color-swatch--bg[data-color=blue]::before {
+  background: var(--dm-block-bg-blue);
+}
+.dm-block-color-swatch--bg[data-color=purple]::before {
+  background: var(--dm-block-bg-purple);
+}
+.dm-block-color-swatch--bg[data-color=pink]::before {
+  background: var(--dm-block-bg-pink);
+}
+.dm-block-color-swatch--bg[data-color=red]::before {
+  background: var(--dm-block-bg-red);
+}
+
+.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);
+}
+.dm-block-color-swatch--text[data-color=gray]::before {
+  color: var(--dm-block-text-gray);
+}
+.dm-block-color-swatch--text[data-color=brown]::before {
+  color: var(--dm-block-text-brown);
+}
+.dm-block-color-swatch--text[data-color=orange]::before {
+  color: var(--dm-block-text-orange);
+}
+.dm-block-color-swatch--text[data-color=yellow]::before {
+  color: var(--dm-block-text-yellow);
+}
+.dm-block-color-swatch--text[data-color=green]::before {
+  color: var(--dm-block-text-green);
+}
+.dm-block-color-swatch--text[data-color=blue]::before {
+  color: var(--dm-block-text-blue);
+}
+.dm-block-color-swatch--text[data-color=purple]::before {
+  color: var(--dm-block-text-purple);
+}
+.dm-block-color-swatch--text[data-color=pink]::before {
+  color: var(--dm-block-text-pink);
+}
+.dm-block-color-swatch--text[data-color=red]::before {
+  color: var(--dm-block-text-red);
+}
+
+.dm-editor .ProseMirror span[data-bg-color] {
+  padding-block: 0;
+  padding-inline: 0.2rem;
+  border-radius: 0.25rem;
+}
+
+.dm-ncp-trigger {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.125rem;
+}
+
+.dm-ncp-trigger-glyph {
+  font-family: var(--dm-editor-font-family, system-ui, sans-serif);
+  font-size: 0.95rem;
+  font-weight: 600;
+  line-height: 1;
+  transform: translateY(2px);
+}
+
+.dm-ncp-trigger-underline {
+  width: 0.875rem;
+  height: 0.125rem;
+  border-radius: 0.0625rem;
+  background-color: transparent;
+}
+
+.dm-notion-color-picker {
+  position: absolute;
+  z-index: 60;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  background: var(--dm-surface-elevated, var(--dm-surface, #ffffff));
+  color: var(--dm-editor-text, inherit);
+  border: 1px solid var(--dm-border-color, #e5e7eb);
+  border-radius: 0.5rem;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+}
+.dm-notion-color-picker:not([data-show]) {
+  display: none;
+}
+
+.dm-ncp-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.dm-ncp-label {
+  font-size: 0.75rem;
+  line-height: 1;
+  font-weight: 500;
+  color: var(--dm-muted, #6b7280);
+  padding: 0.125rem 0.25rem;
+}
+
+.dm-ncp-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1.5rem);
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  justify-content: start;
+}
+
+.dm-ncp-swatch {
+  position: relative;
+  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;
+  color: var(--dm-editor-text, #333);
+  font-family: var(--dm-editor-font-family, system-ui, sans-serif);
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1;
+  cursor: pointer;
+  transition: transform 0.08s ease, box-shadow 0.08s ease;
+}
+.dm-ncp-swatch:hover {
+  transform: scale(1.1);
+  box-shadow: 0 0 0 2px var(--dm-accent-surface, rgba(37, 99, 235, 0.15));
+}
+.dm-ncp-swatch:focus-visible, .dm-ncp-swatch.dm-ncp-active {
+  outline: 2px solid var(--dm-accent, #2563eb);
+  outline-offset: 1px;
+}
+
+.dm-ncp-swatch--text {
+  background-color: var(--dm-surface, #f8f9fa);
+}
+.dm-ncp-swatch--text::before {
+  content: "A";
+}
+.dm-ncp-swatch--text[data-color=null]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  background-image: 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));
+}
+.dm-ncp-swatch--text[data-color=gray]::before {
+  color: var(--dm-block-text-gray);
+}
+.dm-ncp-swatch--text[data-color=brown]::before {
+  color: var(--dm-block-text-brown);
+}
+.dm-ncp-swatch--text[data-color=orange]::before {
+  color: var(--dm-block-text-orange);
+}
+.dm-ncp-swatch--text[data-color=yellow]::before {
+  color: var(--dm-block-text-yellow);
+}
+.dm-ncp-swatch--text[data-color=green]::before {
+  color: var(--dm-block-text-green);
+}
+.dm-ncp-swatch--text[data-color=blue]::before {
+  color: var(--dm-block-text-blue);
+}
+.dm-ncp-swatch--text[data-color=purple]::before {
+  color: var(--dm-block-text-purple);
+}
+.dm-ncp-swatch--text[data-color=pink]::before {
+  color: var(--dm-block-text-pink);
+}
+.dm-ncp-swatch--text[data-color=red]::before {
+  color: var(--dm-block-text-red);
+}
+
+.dm-ncp-swatch--bg[data-color=null]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  background-image: 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));
+}
+.dm-ncp-swatch--bg[data-color=gray] {
+  background-color: var(--dm-block-bg-gray);
+}
+.dm-ncp-swatch--bg[data-color=brown] {
+  background-color: var(--dm-block-bg-brown);
+}
+.dm-ncp-swatch--bg[data-color=orange] {
+  background-color: var(--dm-block-bg-orange);
+}
+.dm-ncp-swatch--bg[data-color=yellow] {
+  background-color: var(--dm-block-bg-yellow);
+}
+.dm-ncp-swatch--bg[data-color=green] {
+  background-color: var(--dm-block-bg-green);
+}
+.dm-ncp-swatch--bg[data-color=blue] {
+  background-color: var(--dm-block-bg-blue);
+}
+.dm-ncp-swatch--bg[data-color=purple] {
+  background-color: var(--dm-block-bg-purple);
+}
+.dm-ncp-swatch--bg[data-color=pink] {
+  background-color: var(--dm-block-bg-pink);
+}
+.dm-ncp-swatch--bg[data-color=red] {
+  background-color: var(--dm-block-bg-red);
+}
+
+@media (max-width: 480px) {
+  .dm-notion-color-picker {
+    max-width: calc(100vw - 1rem);
+  }
+}
+.dm-toc-outline {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--dm-toc-tick-gap, 10px);
+  padding: var(--dm-toc-padding-block, 12px) var(--dm-toc-padding-inline, 8px);
+  z-index: var(--dm-toc-z-index, 10);
+  background: transparent;
+  border: 0;
+  margin: 0;
+  pointer-events: auto;
+}
+.dm-toc-outline[data-anchor=editor] {
+  position: sticky;
+  top: var(--dm-toc-mid-top, 50vh);
+}
+.dm-toc-outline[data-anchor=editor][data-bottom-visible=true] {
+  top: var(--dm-toc-editor-top, 1rem);
+}
+.dm-toc-outline[data-anchor=viewport] {
+  position: fixed;
+  top: 50%;
+  right: var(--dm-toc-right-offset, 24px);
+  transform: translateY(-50%);
+}
+.dm-toc-outline[data-state=hidden], .dm-toc-outline[data-viewport=mobile] {
+  display: none;
+}
+
+.dm-toc-outline-shell[data-anchor=editor] {
+  position: absolute;
+  top: 25px;
+  bottom: 25px;
+  right: var(--dm-toc-page-offset, 8px);
+  z-index: var(--dm-toc-z-index, 10);
+  pointer-events: none;
+}
+.dm-toc-outline-shell[data-anchor=editor]:has(.dm-toc-outline[data-state=hidden]), .dm-toc-outline-shell[data-anchor=editor]:has(.dm-toc-outline[data-viewport=mobile]) {
+  display: none;
+}
+
+.dm-toc-outline-shell[data-anchor=editor][data-mode=center] {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.dm-toc-outline-tick {
+  appearance: none;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  background: var(--dm-toc-tick-color, rgba(55, 53, 47, 0.4));
+  height: var(--dm-toc-tick-height, 2px);
+  border-radius: var(--dm-toc-tick-radius, 1px);
+  width: var(--dm-toc-tick-h3-width, 8px);
+  transition: background-color 120ms ease-out, width 120ms ease-out;
+}
+.dm-toc-outline-tick:hover {
+  background: var(--dm-toc-tick-hover-color, rgba(55, 53, 47, 0.7));
+}
+.dm-toc-outline-tick:focus-visible {
+  background: var(--dm-toc-tick-hover-color, rgba(55, 53, 47, 0.7));
+  outline: 2px solid var(--dm-accent, #2563eb);
+  outline-offset: 3px;
+}
+.dm-toc-outline-tick.dm-toc--active, .dm-toc-outline-tick[aria-current=location] {
+  background: var(--dm-toc-tick-active-color, rgba(55, 53, 47, 0.95));
+}
+.dm-toc-outline-tick[data-level="1"] {
+  width: var(--dm-toc-tick-h1-width, 18px);
+}
+.dm-toc-outline-tick[data-level="2"] {
+  width: var(--dm-toc-tick-h2-width, 12px);
+}
+.dm-toc-outline-tick[data-level="3"] {
+  width: var(--dm-toc-tick-h3-width, 8px);
+}
+.dm-toc-outline-tick[data-level="4"] {
+  width: var(--dm-toc-tick-h4-width, 6px);
+}
+.dm-toc-outline-tick[data-level="5"] {
+  width: var(--dm-toc-tick-h5-width, 5px);
+}
+.dm-toc-outline-tick[data-level="6"] {
+  width: var(--dm-toc-tick-h6-width, 4px);
+}
+
+.dm-toc-outline[data-state=expanded] .dm-toc-outline-tick {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.dm-toc-outline-card {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(calc(-50% + var(--dm-toc-card-shift-y, 0px))) translateX(var(--dm-toc-card-offset, 8px));
+  min-width: var(--dm-toc-card-min-width, 180px);
+  max-width: var(--dm-toc-card-max-width, 260px);
+  max-height: calc(100vh - 2 * var(--dm-toc-card-viewport-margin, 16px));
+  overflow-y: auto;
+  padding: var(--dm-toc-card-padding-block, 6px) 0;
+  background: var(--dm-toc-card-bg, rgba(255, 255, 255, 0.98));
+  border: var(--dm-toc-card-border, 1px solid rgba(0, 0, 0, 0.06));
+  border-radius: var(--dm-toc-card-radius, 6px);
+  box-shadow: var(--dm-toc-card-shadow, 0 8px 24px rgba(0, 0, 0, 0.08));
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--dm-toc-card-transition, 180ms) ease-out, transform var(--dm-toc-card-transition, 180ms) ease-out;
+}
+
+.dm-toc-outline[data-state=expanded] .dm-toc-outline-card {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(calc(-50% + var(--dm-toc-card-shift-y, 0px))) translateX(0);
+}
+
+.dm-toc-outline-row {
+  appearance: none;
+  border: 0;
+  margin: 0;
+  background: transparent;
+  cursor: pointer;
+  text-align: start;
+  font: inherit;
+  font-size: var(--dm-toc-row-font-size, 13px);
+  line-height: var(--dm-toc-row-line-height, 1.4);
+  color: var(--dm-toc-row-color, rgba(55, 53, 47, 0.7));
+  padding: var(--dm-toc-row-padding-block, 4px) var(--dm-toc-row-padding-inline-end, 16px) var(--dm-toc-row-padding-block, 4px) var(--dm-toc-row-padding-inline-start, 12px);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border-radius: 3px;
+  transition: background-color 120ms ease-out, color 120ms ease-out;
+}
+.dm-toc-outline-row:hover {
+  background: var(--dm-toc-row-hover-bg, rgba(0, 0, 0, 0.04));
+}
+.dm-toc-outline-row:focus-visible {
+  outline: 2px solid var(--dm-accent, #2563eb);
+  outline-offset: -2px;
+}
+.dm-toc-outline-row.dm-toc--active, .dm-toc-outline-row[aria-current=location] {
+  color: var(--dm-toc-row-active-color, rgba(55, 53, 47, 0.95));
+  font-weight: var(--dm-toc-row-active-weight, 600);
+}
+.dm-toc-outline-row[data-level="1"] {
+  padding-inline-start: var(--dm-toc-row-padding-inline-start, 12px);
+}
+.dm-toc-outline-row[data-level="2"] {
+  padding-inline-start: calc(var(--dm-toc-row-padding-inline-start, 12px) + var(--dm-toc-row-indent, 14px));
+}
+.dm-toc-outline-row[data-level="3"] {
+  padding-inline-start: calc(var(--dm-toc-row-padding-inline-start, 12px) + var(--dm-toc-row-indent, 14px) * 2);
+}
+.dm-toc-outline-row[data-level="4"] {
+  padding-inline-start: calc(var(--dm-toc-row-padding-inline-start, 12px) + var(--dm-toc-row-indent, 14px) * 3);
+}
+.dm-toc-outline-row[data-level="5"] {
+  padding-inline-start: calc(var(--dm-toc-row-padding-inline-start, 12px) + var(--dm-toc-row-indent, 14px) * 4);
+}
+.dm-toc-outline-row[data-level="6"] {
+  padding-inline-start: calc(var(--dm-toc-row-padding-inline-start, 12px) + var(--dm-toc-row-indent, 14px) * 5);
+}
+
+.dm-toc-block {
+  display: block;
+  margin-block: var(--dm-toc-block-margin-block, 1rem);
+  padding: var(--dm-toc-block-padding-block, 12px) var(--dm-toc-block-padding-inline, 16px);
+  background: var(--dm-toc-block-bg, rgba(0, 0, 0, 0.02));
+  border: var(--dm-toc-block-border, 1px solid rgba(0, 0, 0, 0.08));
+  border-radius: var(--dm-toc-block-radius, 6px);
+}
+.dm-toc-block.ProseMirror-selectednode {
+  outline: 2px solid var(--dm-accent, #2563eb);
+  outline-offset: 2px;
+}
+
+.dm-toc-block-empty {
+  margin: 0;
+  color: var(--dm-toc-block-empty-color, rgba(55, 53, 47, 0.5));
+  font-style: var(--dm-toc-block-empty-font-style, italic);
+}
+
+.dm-toc-block-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.dm-toc-block-item {
+  margin: 0;
+}
+
+.dm-toc-block-link {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--dm-toc-block-link-font-size, 0.9375rem);
+  line-height: var(--dm-toc-block-link-line-height, 1.5);
+  color: var(--dm-toc-block-link-color, rgba(55, 53, 47, 0.8));
+  text-align: start;
+  width: 100%;
+  display: block;
+  padding: var(--dm-toc-block-link-padding-block, 4px) var(--dm-toc-block-link-padding-inline, 8px);
+  border-radius: var(--dm-toc-block-link-radius, 3px);
+  transition: background-color 120ms ease-out, color 120ms ease-out;
+}
+.dm-toc-block-link:hover {
+  color: var(--dm-toc-block-link-hover-color, rgb(55, 53, 47));
+  background: var(--dm-toc-block-link-hover-bg, rgba(0, 0, 0, 0.04));
+}
+.dm-toc-block-link:focus-visible {
+  outline: 2px solid var(--dm-accent, #2563eb);
+  outline-offset: -2px;
+}
+.dm-toc-block-link.dm-toc-block-link--active, .dm-toc-block-link[aria-current=location] {
+  color: var(--dm-toc-block-link-active-color, rgba(55, 53, 47, 0.95));
+  font-weight: var(--dm-toc-block-link-active-weight, 600);
+}
+.dm-toc-block-link[data-level="1"] {
+  padding-inline-start: var(--dm-toc-block-link-padding-inline, 8px);
+}
+.dm-toc-block-link[data-level="2"] {
+  padding-inline-start: calc(var(--dm-toc-block-link-padding-inline, 8px) + var(--dm-toc-block-link-indent, 16px));
+}
+.dm-toc-block-link[data-level="3"] {
+  padding-inline-start: calc(var(--dm-toc-block-link-padding-inline, 8px) + var(--dm-toc-block-link-indent, 16px) * 2);
+}
+.dm-toc-block-link[data-level="4"] {
+  padding-inline-start: calc(var(--dm-toc-block-link-padding-inline, 8px) + var(--dm-toc-block-link-indent, 16px) * 3);
+}
+.dm-toc-block-link[data-level="5"] {
+  padding-inline-start: calc(var(--dm-toc-block-link-padding-inline, 8px) + var(--dm-toc-block-link-indent, 16px) * 4);
+}
+.dm-toc-block-link[data-level="6"] {
+  padding-inline-start: calc(var(--dm-toc-block-link-padding-inline, 8px) + var(--dm-toc-block-link-indent, 16px) * 5);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dm-toc-outline-tick,
+  .dm-toc-outline-card,
+  .dm-toc-outline-row,
+  .dm-toc-block-link {
+    transition: none;
+  }
+  .dm-toc-outline-card {
+    transform: translateY(calc(-50% + var(--dm-toc-card-shift-y, 0px))) translateX(0);
+  }
+}
+@media print {
+  .dm-toc-outline {
+    display: none;
+  }
+  .dm-toc-block {
+    background: transparent;
+    border-color: rgba(0, 0, 0, 0.2);
+  }
+}
+@media (forced-colors: active) {
+  .dm-toc-outline-tick {
+    background: ButtonText;
+    border: 1px solid ButtonText;
+  }
+  .dm-toc-outline-tick.dm-toc--active, .dm-toc-outline-tick[aria-current=location] {
+    background: Highlight;
+    border-color: Highlight;
+  }
+  .dm-toc-outline-card {
+    border: 1px solid ButtonText;
+  }
+  .dm-toc-outline-row.dm-toc--active, .dm-toc-outline-row.dm-toc-block-link--active, .dm-toc-outline-row[aria-current=location],
+  .dm-toc-block-link.dm-toc--active,
+  .dm-toc-block-link.dm-toc-block-link--active,
+  .dm-toc-block-link[aria-current=location] {
+    color: Highlight;
+  }
+  .dm-toc-block {
+    border: 1px solid ButtonText;
+  }
+}
+.dm-editor.dm-notion-mode {
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  background: transparent;
+  max-width: 38rem;
+  margin: 0 auto;
+  --dm-editor-font-size: 1.0625rem;
+  --dm-editor-line-height: 1.7;
+  --dm-editor-padding: 0;
+  --dm-block-handle-gutter: 0;
+  --dm-block-handle-left: -3.5rem;
+  --dm-task-checkbox-top: 0.45em;
+}
+.dm-editor.dm-notion-mode .ProseMirror {
+  min-height: 60vh;
+  outline: none;
+}
+.dm-editor.dm-notion-mode .ProseMirror h1 {
+  font-size: 2.25rem;
+  font-weight: 700;
+  margin-top: 1.5rem;
+  margin-bottom: 0.75rem;
+}
+.dm-editor.dm-notion-mode .ProseMirror h2 {
+  font-size: 1.625rem;
+  font-weight: 600;
+  margin-top: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+.dm-editor.dm-notion-mode .ProseMirror h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-top: 1.25rem;
+  margin-bottom: 0.375rem;
+}
+.dm-editor.dm-notion-mode .ProseMirror p {
+  margin: 0.25rem 0;
+}
+
 .dm-theme-light,
 .dm-theme-light .dm-editor,
 .dm-theme-light .dm-toolbar,
@@ -1819,10 +3049,13 @@ img.ProseMirror-separator {
 .dm-theme-dark .dm-editor,
 .dm-theme-dark .dm-toolbar,
 .dm-theme-dark .dm-bubble-menu,
+.dm-theme-dark .dm-floating-menu,
 .dm-theme-dark .dm-emoji-picker,
 .dm-theme-dark .dm-emoji-suggestion,
 .dm-theme-dark .dm-mention-suggestion,
-.dm-theme-dark .dm-table-controls-dropdown {
+.dm-theme-dark .dm-table-controls-dropdown,
+.dm-theme-dark .dm-slash-command-menu,
+.dm-theme-dark .dm-block-context-menu {
   --dm-color-scheme: dark;
   --dm-bg: #1e1e1e;
   --dm-text: #e0e0e0;
@@ -1839,8 +3072,12 @@ img.ProseMirror-separator {
   --dm-code-surface: #2d2d2d;
   --dm-code-color: inherit;
   --dm-highlight-bg: rgba(255, 243, 205, 0.2);
+  --dm-scrollbar-thumb: rgba(255, 255, 255, 0.18);
+  --dm-scrollbar-thumb-hover: rgba(255, 255, 255, 0.32);
+  --dm-popover-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.25);
   --dm-blockquote-border: 3px solid #555555;
   --dm-blockquote-color: #a0a0a0;
+  --dm-block-context-active-bg: rgba(255, 255, 255, 0.05);
   --dm-syntax-keyword: #ff7b72;
   --dm-syntax-entity: #d2a8ff;
   --dm-syntax-constant: #79c0ff;
@@ -1852,6 +3089,25 @@ img.ProseMirror-separator {
   --dm-syntax-addition-bg: #033a16;
   --dm-syntax-deletion: #ffdcd7;
   --dm-syntax-deletion-bg: #67060c;
+  --dm-block-bg-gray: #2f2f2f;
+  --dm-block-bg-brown: #4a3228;
+  --dm-block-bg-orange: #5c3b1e;
+  --dm-block-bg-yellow: #564328;
+  --dm-block-bg-green: #243d30;
+  --dm-block-bg-blue: #143a4e;
+  --dm-block-bg-purple: #3c2d49;
+  --dm-block-bg-pink: #4e2c3c;
+  --dm-block-bg-red: #5c1e1e;
+  --dm-block-text-gray: #9b9a97;
+  --dm-block-text-brown: #ba856f;
+  --dm-block-text-orange: #d68a52;
+  --dm-block-text-yellow: #ca9849;
+  --dm-block-text-green: #6db285;
+  --dm-block-text-blue: #7a9bd6;
+  --dm-block-text-purple: #a877d8;
+  --dm-block-text-pink: #dc6da4;
+  --dm-block-text-red: #df5452;
+  --dm-block-selected-halo: rgba(112, 207, 248, 0.35);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -1859,10 +3115,13 @@ img.ProseMirror-separator {
   .dm-theme-auto .dm-editor,
   .dm-theme-auto .dm-toolbar,
   .dm-theme-auto .dm-bubble-menu,
+  .dm-theme-auto .dm-floating-menu,
   .dm-theme-auto .dm-emoji-picker,
   .dm-theme-auto .dm-emoji-suggestion,
   .dm-theme-auto .dm-mention-suggestion,
-  .dm-theme-auto .dm-table-controls-dropdown {
+  .dm-theme-auto .dm-table-controls-dropdown,
+  .dm-theme-auto .dm-slash-command-menu,
+  .dm-theme-auto .dm-block-context-menu {
     --dm-color-scheme: dark;
     --dm-bg: #1e1e1e;
     --dm-text: #e0e0e0;
@@ -1879,8 +3138,12 @@ img.ProseMirror-separator {
     --dm-code-surface: #2d2d2d;
     --dm-code-color: inherit;
     --dm-highlight-bg: rgba(255, 243, 205, 0.2);
+    --dm-scrollbar-thumb: rgba(255, 255, 255, 0.18);
+    --dm-scrollbar-thumb-hover: rgba(255, 255, 255, 0.32);
+    --dm-popover-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.25);
     --dm-blockquote-border: 3px solid #555555;
     --dm-blockquote-color: #a0a0a0;
+    --dm-block-context-active-bg: rgba(255, 255, 255, 0.05);
     --dm-syntax-keyword: #ff7b72;
     --dm-syntax-entity: #d2a8ff;
     --dm-syntax-constant: #79c0ff;
@@ -1892,6 +3155,75 @@ img.ProseMirror-separator {
     --dm-syntax-addition-bg: #033a16;
     --dm-syntax-deletion: #ffdcd7;
     --dm-syntax-deletion-bg: #67060c;
+    --dm-block-bg-gray: #2f2f2f;
+    --dm-block-bg-brown: #4a3228;
+    --dm-block-bg-orange: #5c3b1e;
+    --dm-block-bg-yellow: #564328;
+    --dm-block-bg-green: #243d30;
+    --dm-block-bg-blue: #143a4e;
+    --dm-block-bg-purple: #3c2d49;
+    --dm-block-bg-pink: #4e2c3c;
+    --dm-block-bg-red: #5c1e1e;
+    --dm-block-text-gray: #9b9a97;
+    --dm-block-text-brown: #ba856f;
+    --dm-block-text-orange: #d68a52;
+    --dm-block-text-yellow: #ca9849;
+    --dm-block-text-green: #6db285;
+    --dm-block-text-blue: #7a9bd6;
+    --dm-block-text-purple: #a877d8;
+    --dm-block-text-pink: #dc6da4;
+    --dm-block-text-red: #df5452;
+    --dm-block-selected-halo: rgba(112, 207, 248, 0.35);
+  }
+}
+.dm-theme-dark .dm-toc-outline,
+.dm-theme-dark.dm-toc-outline {
+  --dm-toc-tick-color: rgba(255, 255, 255, 0.3);
+  --dm-toc-tick-hover-color: rgba(255, 255, 255, 0.6);
+  --dm-toc-tick-active-color: rgba(255, 255, 255, 0.95);
+  --dm-toc-card-bg: rgba(45, 50, 56, 0.98);
+  --dm-toc-card-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  --dm-toc-card-border: 1px solid rgba(255, 255, 255, 0.08);
+  --dm-toc-row-color: rgba(255, 255, 255, 0.7);
+  --dm-toc-row-hover-bg: rgba(255, 255, 255, 0.06);
+  --dm-toc-row-active-color: rgba(255, 255, 255, 0.95);
+}
+
+.dm-theme-dark .dm-toc-block,
+.dm-theme-dark.dm-toc-block {
+  --dm-toc-block-bg: rgba(255, 255, 255, 0.04);
+  --dm-toc-block-border: 1px solid rgba(255, 255, 255, 0.08);
+  --dm-toc-block-empty-color: rgba(255, 255, 255, 0.4);
+  --dm-toc-block-link-color: rgba(255, 255, 255, 0.7);
+  --dm-toc-block-link-hover-color: rgba(255, 255, 255, 0.95);
+  --dm-toc-block-link-hover-bg: rgba(255, 255, 255, 0.06);
+  --dm-toc-block-link-active-color: rgba(255, 255, 255, 0.95);
+}
+
+@media (prefers-color-scheme: dark) {
+  .dm-theme-auto .dm-toc-block,
+  .dm-theme-auto.dm-toc-block {
+    --dm-toc-block-bg: rgba(255, 255, 255, 0.04);
+    --dm-toc-block-border: 1px solid rgba(255, 255, 255, 0.08);
+    --dm-toc-block-empty-color: rgba(255, 255, 255, 0.4);
+    --dm-toc-block-link-color: rgba(255, 255, 255, 0.7);
+    --dm-toc-block-link-hover-color: rgba(255, 255, 255, 0.95);
+    --dm-toc-block-link-hover-bg: rgba(255, 255, 255, 0.06);
+    --dm-toc-block-link-active-color: rgba(255, 255, 255, 0.95);
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .dm-theme-auto .dm-toc-outline,
+  .dm-theme-auto.dm-toc-outline {
+    --dm-toc-tick-color: rgba(255, 255, 255, 0.3);
+    --dm-toc-tick-hover-color: rgba(255, 255, 255, 0.6);
+    --dm-toc-tick-active-color: rgba(255, 255, 255, 0.95);
+    --dm-toc-card-bg: rgba(45, 50, 56, 0.98);
+    --dm-toc-card-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+    --dm-toc-card-border: 1px solid rgba(255, 255, 255, 0.08);
+    --dm-toc-row-color: rgba(255, 255, 255, 0.7);
+    --dm-toc-row-hover-bg: rgba(255, 255, 255, 0.06);
+    --dm-toc-row-active-color: rgba(255, 255, 255, 0.95);
   }
 }
 @media (prefers-reduced-motion: reduce) {
@@ -1926,7 +3258,13 @@ img.ProseMirror-separator {
   .dm-table-align-item,
   .dm-image-popover-btn,
   .dm-link-popover-btn,
+  .dm-block-handle,
+  .dm-block-handle-btn,
+  .dm-block-color-swatch,
+  .dm-slash-command-item,
+  .dm-block-context-menu-item,
   .dm-editor .ProseMirror div[data-type=details] > button[type=button]::before {
     transition: none;
+    transform: none;
   }
 }