@puredesktop/platform-editor 1.0.0-beta.1 → 2.1.0

package/src/styled.ts

@@ -1,676 +1,697 @@
-import { styled } from 'styled-components'
-
-// ---- Wrapper ----
-//
-// Editor surface redesign (#237): the wrapper renders the gray
-// editor *field* behind the white writing column. No floating
-// page-card treatment — just a flat white column on a soft
-// neutral field, iA-Writer style.
-
-// ---- Content area (prose + column layout for DocumentEditor) ----
-
-export const ContentArea = styled.div`
-  --vs-column-width: 800px;
-  --h1-font-size: 2.2em;
-  --page-pad-inline: 88px;
-  --comments-lane-width: 320px;
-  --outer-lane-padding: 72px;
-  --paper-width: calc(var(--vs-column-width) + (var(--page-pad-inline) * 2));
-  background: var(--platform-colors-app-viewport);
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  overflow: auto;
-  padding: 0 calc(var(--outer-lane-padding) + var(--comments-lane-width)) 88px
-    var(--outer-lane-padding);
-  position: relative;
-
-  .tiptap {
-    background: var(--platform-colors-surface);
-    border-left: var(--vs-column-rule, none);
-    border-right: var(--vs-column-rule, none);
-    border-top: none;
-    border-bottom: none;
-    border-radius: 0;
-    box-shadow: none;
-    box-sizing: border-box;
-    caret-color: var(--platform-colors-accent);
-    color: var(--platform-colors-text);
-    flex-shrink: 0;
-    font-family: var(
-      --vs-body-font,
-      var(
-        --platform-typography-font-family-content,
-        var(--platform-typography-font-family)
-      )
-    );
-    font-size: var(--vs-font-size, 17px);
-    line-height: var(--vs-line-height, 1.7);
-    margin: 0 auto;
-    max-width: none;
-    min-height: calc(100vh - 88px);
-    min-width: var(--paper-width);
-    outline: none;
-    padding: 20px var(--page-pad-inline) 120px;
-    width: var(--paper-width);
-
-    > * + * {
-      margin-top: 0.7em;
-    }
-
-    p {
-      margin: 0;
-    }
-
-    h1 {
-      color: var(--platform-colors-text);
-      font-size: var(--h1-font-size);
-      font-weight: 400;
-      letter-spacing: -0.03em;
-      line-height: 1.08;
-      margin-top: 1.22em;
-    }
-
-    h2 {
-      color: var(--platform-colors-text);
-      font-size: 1.55em;
-      font-weight: 400;
-      letter-spacing: -0.02em;
-      line-height: 1.22;
-      margin-top: 1em;
-    }
-
-    h3 {
-      color: var(--platform-colors-text-secondary);
-      font-size: 1.08em;
-      font-weight: 500;
-      line-height: 1.35;
-      margin-top: 0.88em;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-    }
-
-    p {
-      margin: 0;
-      hanging-punctuation: first last;
-    }
-
-    ul,
-    ol {
-      padding-left: 1.9em;
-    }
-
-    ul[data-type='taskList'] {
-      list-style: none;
-      padding-left: 0;
-
-      li {
-        align-items: flex-start;
-        display: flex;
-        gap: 10px;
-
-        > label {
-          flex-shrink: 0;
-          margin-top: 4px;
-
-          input[type='checkbox'] {
-            accent-color: var(--platform-colors-accent);
-            cursor: pointer;
-            height: 14px;
-            width: 14px;
-          }
-        }
-      }
-    }
-
-    blockquote {
-      border-left: 1px solid rgb(from var(--platform-colors-text) r g b / 0.18);
-      color: var(--platform-colors-text-secondary);
-      font-style: italic;
-      margin: 0.9em 0;
-      padding: 4px 0 4px 16px;
-    }
-
-    code {
-      background: rgb(from var(--platform-colors-surface-hover) r g b / 0.9);
-      border: 1px solid rgb(from var(--platform-colors-border) r g b / 0.82);
-      border-radius: 4px;
-      font-family: var(--platform-typography-font-family-mono);
-      font-size: 0.9em;
-      padding: 0.1em 0.4em;
-    }
-
-    pre {
-      background: rgb(from var(--platform-colors-surface-hover) r g b / 0.94);
-      border: 1px solid rgb(from var(--platform-colors-border) r g b / 0.82);
-      border-radius: 8px;
-      font-family: var(--platform-typography-font-family-mono);
-      margin: 0.75em 0;
-      overflow-x: auto;
-      padding: 14px 18px;
-
-      code {
-        background: none;
-        border: none;
-        font-size: 0.875em;
-        padding: 0;
-      }
-
-      .hljs-comment,
-      .hljs-quote {
-        color: var(--platform-colors-text-secondary);
-      }
-
-      .hljs-keyword,
-      .hljs-selector-tag,
-      .hljs-literal,
-      .hljs-section,
-      .hljs-link {
-        color: #8f3f71;
-      }
-
-      .hljs-string,
-      .hljs-title,
-      .hljs-name,
-      .hljs-type,
-      .hljs-attribute,
-      .hljs-symbol,
-      .hljs-bullet,
-      .hljs-addition {
-        color: #1e6f5c;
-      }
-
-      .hljs-number,
-      .hljs-variable,
-      .hljs-template-variable,
-      .hljs-deletion {
-        color: #b35c1e;
-      }
-    }
-
-    .tiptap-mathematics-render {
-      display: inline-flex;
-      align-items: center;
-      min-height: 1.4em;
-      padding: 0.08em 0.22em;
-      border-radius: 4px;
-    }
-
-    .tiptap-mathematics-render[data-type='block-math'] {
-      display: flex;
-      justify-content: center;
-      margin: 1.1em 0;
-      padding: 1em 1.2em;
-      background: rgb(from var(--platform-colors-surface-hover) r g b / 0.72);
-      border: 1px solid rgb(from var(--platform-colors-border) r g b / 0.82);
-    }
-
-    .tiptap-mathematics-render--editable {
-      cursor: pointer;
-    }
-
-    .inline-math-error,
-    .block-math-error {
-      color: var(--platform-colors-text-danger);
-      font-family: var(--platform-typography-font-family-mono);
-    }
-
-    a {
-      color: var(--platform-colors-accent);
-      text-decoration: underline;
-      text-underline-offset: 2px;
-
-      &:hover {
-        opacity: 0.85;
-      }
-    }
-
-    a.ix {
-      color: inherit;
-      text-decoration: underline dotted var(--platform-colors-text-disabled);
-      text-underline-offset: 3px;
-    }
-
-    sup.footnote-ref {
-      color: var(--platform-colors-accent);
-      cursor: pointer;
-      font-weight: 600;
-      padding: 0 1px;
-    }
-
-    mark {
-      background: rgb(from var(--platform-colors-warning) r g b / 35%);
-      border-radius: 2px;
-      color: inherit;
-      padding: 0.05em 0.25em;
-    }
-
-    span.comment-mark {
-      background: rgb(from var(--platform-colors-accent) r g b / 12%);
-      border-bottom: 2px solid
-        rgb(from var(--platform-colors-accent) r g b / 52%);
-      border-radius: 2px;
-      box-decoration-break: clone;
-    }
-
-    table {
-      border-collapse: collapse;
-      margin: 1em 0;
-      overflow: hidden;
-      table-layout: fixed;
-      width: 100%;
-
-      td,
-      th {
-        border: 1px solid var(--platform-colors-border);
-        box-sizing: border-box;
-        min-width: 1em;
-        padding: 8px 12px;
-        position: relative;
-        vertical-align: top;
-
-        > * {
-          margin-bottom: 0;
-        }
-      }
-
-      th {
-        background: var(--platform-colors-surface-hover);
-        font-weight: 600;
-        text-align: left;
-      }
-
-      .selectedCell::after {
-        background: rgb(from var(--platform-colors-accent) r g b / 15%);
-        content: '';
-        inset: 0;
-        pointer-events: none;
-        position: absolute;
-        z-index: 2;
-      }
-    }
-
-    hr {
-      border: none;
-      border-top: 1px solid rgb(from var(--platform-colors-border) r g b / 0.95);
-      margin: 1.7em 0;
-    }
-
-    .is-editor-empty::before,
-    .is-empty::before {
-      color: var(--platform-colors-text-disabled);
-      content: attr(data-placeholder);
-      font-style: italic;
-      float: left;
-      height: 0;
-      pointer-events: none;
-    }
-  }
-
-  @media (max-width: 1560px) {
-    --comments-lane-width: 0px;
-  }
-
-  @media (max-width: 1200px) {
-    --outer-lane-padding: 24px;
-  }
-`
-
-// ---- DocumentEditor layout ----
-
-export const DocumentEditorRoot = styled.div<{ $pageMode?: boolean }>`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  min-width: 0;
-  background: ${({ $pageMode }) =>
-    $pageMode
-      ? 'var(--platform-colors-surface)'
-      : 'var(--platform-colors-bg)'};
-  overflow: visible;
-  position: relative;
-`
-
-export const DocumentEditorToolbarWrap = styled.div`
-  position: relative;
-  z-index: 40;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  gap: 12px;
-  background: var(--platform-colors-bg);
-  padding: 0 12px;
-
-  > div {
-    padding: 8px 10px;
-    overflow: visible;
-  }
-
-  > div:first-child {
-    width: auto;
-    margin: 0;
-  }
-`
-
-export const DocumentEditorToolbarActions = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  height: 100%;
-`
-
-/**
- * Writer scroll lane + paper column (ps-book `StyledEditorContent` layout).
- * Wraps plain `EditorContent` — do not `styled(EditorContent)` (TipTap v3 root is a fragment).
- */
-export const DocumentEditorViewport = styled.div<{ $pageMode?: boolean }>`
-  --vs-column-width: 800px;
-  --h1-font-size: 2.2em;
-  --page-pad-inline: 88px;
-  --comments-lane-width: 0px;
-  --outer-lane-padding: 72px;
-  --paper-width: calc(var(--vs-column-width) + (var(--page-pad-inline) * 2));
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  background: ${({ $pageMode }) =>
-    $pageMode
-      ? 'var(--platform-colors-surface)'
-      : 'var(--platform-colors-bg)'};
-  padding: ${({ $pageMode }) =>
-    $pageMode ? '0' : '0 var(--outer-lane-padding)'};
-  position: relative;
-  z-index: 1;
-  transition: padding-right 160ms ease;
-
-  &.document-editor-viewport--annotation-rail-open {
-    padding-right: calc(var(--outer-lane-padding) + 430px);
-  }
-
-  & > div {
-    min-height: 100%;
-  }
-
-  .tiptap,
-  .ProseMirror {
-    background: var(--platform-colors-surface);
-    border-left: var(--vs-column-rule, none);
-    border-right: var(--vs-column-rule, none);
-    box-sizing: border-box;
-    caret-color: var(--platform-colors-accent);
-
-    outline: none;
-  }
-
-  .tiptap > *:first-child {
-    margin-top: 0;
-  }
-
-  .tiptap h1 {
-    margin-top: 1.22em;
-    color: var(--platform-colors-text);
-    font-size: var(--h1-font-size);
-    font-weight: 400;
-    letter-spacing: -0.03em;
-    line-height: 1.08;
-  }
-
-  .tiptap > h1:first-child,
-  .tiptap > h2:first-child,
-  .tiptap > h3:first-child {
-    margin-top: 0;
-  }
-
-  .tiptap h2 {
-    margin-top: 1em;
-    color: var(--platform-colors-text);
-    font-size: 1.55em;
-    font-weight: 400;
-    letter-spacing: -0.02em;
-    line-height: 1.22;
-  }
-
-  .tiptap h3 {
-    margin-top: 0.88em;
-    color: var(--platform-colors-text-secondary);
-    font-size: 1.08em;
-    font-weight: 500;
-    letter-spacing: 0.08em;
-    line-height: 1.35;
-    text-transform: uppercase;
-  }
-
-  .tiptap p,
-  .tiptap ul,
-  .tiptap ol,
-  .tiptap blockquote,
-  .tiptap pre {
-    margin: 0;
-  }
-
-  .tiptap > * + * {
-    margin-top: 0.7em;
-  }
-
-  .tiptap h1 + *,
-  .tiptap h2 + * {
-    margin-top: 1.25em;
-  }
-
-  .tiptap p {
-    hanging-punctuation: first last;
-  }
-
-  .tiptap ul,
-  .tiptap ol {
-    padding-left: 1.9em;
-  }
-
-  .tiptap blockquote {
-    margin: 0.9em 0;
-    padding: 4px 0 4px 16px;
-    border-left: 1px solid rgb(from var(--platform-colors-text) r g b / 0.18);
-    color: var(--platform-colors-text-secondary);
-    font-style: italic;
-  }
-
-  .tiptap table {
-    width: 100%;
-    margin: 1em 0;
-    border-collapse: collapse;
-    table-layout: fixed;
-  }
-
-  .tiptap th,
-  .tiptap td {
-    padding: 8px 12px;
-    border: 1px solid var(--platform-colors-border);
-    vertical-align: top;
-  }
-
-  .tiptap th {
-    background: var(--platform-colors-surface);
-    font-weight: 600;
-  }
-
-  .tiptap img {
-    display: block;
-    max-width: 100%;
-    height: auto;
-    margin: 1em auto;
-  }
-
-  .tiptap figure {
-    margin: 1em 0;
-  }
-
-  .tiptap figcaption {
-    margin-top: 0.55em;
-    color: var(--platform-colors-text-secondary);
-    font-size: 0.84em;
-    text-align: center;
-  }
-
-  .tiptap span.comment-mark {
-    background: transparent;
-    border-bottom: 1px solid
-      var(
-        --comment-mark-border,
-        rgb(from var(--platform-colors-accent) r g b / 46%)
-      );
-    border-radius: 2px;
-    box-decoration-break: clone;
-    cursor: pointer;
-    padding: 0 1px;
-  }
-
-  .tiptap span.comment-mark:hover,
-  .tiptap span.comment-mark:focus,
-  .tiptap span.comment-mark--active,
-  .tiptap span.comment-mark--spotlight {
-    background: linear-gradient(
-      to bottom,
-      transparent 56%,
-      var(
-          --comment-mark-bg,
-          rgb(from var(--platform-colors-accent) r g b / 14%)
-        )
-        56%
-    );
-  }
-
-  .tiptap span.comment-mark--agent-review {
-    --comment-mark-bg: rgb(199 210 254 / 0.22);
-    --comment-mark-border: rgb(99 102 241 / 0.44);
-  }
-
-  .tiptap span.comment-mark--formatting {
-    --comment-mark-bg: rgb(221 214 254 / 0.22);
-    --comment-mark-border: rgb(124 58 237 / 0.44);
-  }
-
-  .tiptap span.comment-mark--copy-editing {
-    --comment-mark-bg: rgb(187 247 208 / 0.22);
-    --comment-mark-border: rgb(5 150 105 / 0.42);
-  }
-
-  .tiptap span.comment-mark--copyedit {
-    --comment-mark-bg: rgb(187 247 208 / 0.22);
-    --comment-mark-border: rgb(22 163 74 / 0.58);
-  }
-
-  .tiptap span.comment-mark--voice {
-    --comment-mark-bg: rgb(251 207 232 / 0.2);
-    --comment-mark-border: rgb(219 39 119 / 0.52);
-  }
-
-  .tiptap span.comment-mark--claim {
-    --comment-mark-bg: rgb(251 191 36 / 0.24);
-    --comment-mark-border: rgb(217 119 6 / 0.74);
-    background: linear-gradient(
-      to bottom,
-      transparent 58%,
-      rgb(251 191 36 / 0.18) 58%
-    );
-    border-bottom-width: 2px;
-  }
-
-  .tiptap span.comment-mark--fact-check {
-    --comment-mark-bg: rgb(254 202 202 / 0.28);
-    --comment-mark-border: rgb(220 38 38 / 0.78);
-    background: linear-gradient(
-      to bottom,
-      transparent 55%,
-      rgb(254 202 202 / 0.24) 55%
-    );
-    border-bottom-width: 2px;
-  }
-
-  .tiptap span.comment-mark--source {
-    --comment-mark-bg: rgb(191 219 254 / 0.22);
-    --comment-mark-border: rgb(37 99 235 / 0.58);
-  }
-
-  .tiptap span.comment-mark--thread {
-    --comment-mark-bg: rgb(221 214 254 / 0.22);
-    --comment-mark-border: rgb(124 58 237 / 0.5);
-  }
-
-  .tiptap span.comment-mark--conflict,
-  .tiptap span.comment-mark--logic {
-    --comment-mark-bg: rgb(226 232 240 / 0.34);
-    --comment-mark-border: rgb(71 85 105 / 0.52);
-  }
-
-  .tiptap span.comment-mark--question {
-    --comment-mark-bg: rgb(153 246 228 / 0.24);
-    --comment-mark-border: rgb(13 148 136 / 0.46);
-  }
-
-  .tiptap span.comment-mark--citation {
-    --comment-mark-bg: rgb(191 219 254 / 0.22);
-    --comment-mark-border: rgb(37 99 235 / 0.44);
-  }
-
-  .tiptap span.comment-mark--spotlight-muted {
-    background: transparent;
-    border-bottom-color: rgb(from var(--platform-colors-text) r g b / 9%);
-    color: rgb(from var(--platform-colors-text) r g b / 0.78);
-    transition:
-      background 160ms ease,
-      border-color 160ms ease,
-      color 160ms ease;
-  }
-
-  .tiptap span.comment-mark--resolved {
-    background: transparent;
-    border-bottom-color: rgb(
-      from var(--platform-colors-text-disabled) r g b / 32%
-    );
-    border-bottom-width: 1px;
-    color: rgb(from var(--platform-colors-text) r g b / 0.72);
-  }
-
-  .tiptap .is-empty::before {
-    float: left;
-    height: 0;
-    color: var(--platform-colors-text-disabled);
-    content: attr(data-placeholder);
-    pointer-events: none;
-  }
-
-  @media (max-width: 1200px) {
-    --outer-lane-padding: 24px;
-  }
-`
-
-export const EditorWrapper = styled.div<{ $pageMode?: boolean }>`
-  background: var(--platform-colors-surface);
-  border-left: var(--vs-column-rule, none);
-  border-right: var(--vs-column-rule, none);
-  box-sizing: border-box;
-  caret-color: var(--platform-colors-accent);
-  flex-shrink: 0;
-  min-height: calc(100vh - 88px);
-  min-width: var(--paper-width);
-  width: var(--paper-width);
-  max-width: none;
-  margin: 0 auto;
-  padding: 56px var(--page-pad-inline) 120px;
-  color: var(--platform-colors-text);
-  font-family: var(--vs-body-font, var(--platform-typography-font-family));
-  font-size: var(--vs-font-size, 17px);
-  line-height: var(--vs-line-height, 1.7);
-  outline: none;
-
-  ${({ $pageMode }) =>
-    $pageMode
-      ? `
-        min-width: min(100%, var(--paper-width));
-        width: min(100%, var(--paper-width));
-        min-height: 100vh;
-        padding-top: clamp(56px, 8vh, 104px);
-      `
-      : ''}
-`
+import { styled } from 'styled-components'
+
+// ---- Wrapper ----
+//
+// Editor surface redesign (#237): the wrapper renders the gray
+// editor *field* behind the white writing column. No floating
+// page-card treatment — just a flat white column on a soft
+// neutral field, iA-Writer style.
+
+// ---- Content area (prose + column layout for DocumentEditor) ----
+
+export const ContentArea = styled.div`
+  --vs-column-width: 800px;
+  --h1-font-size: 2.2em;
+  --page-pad-inline: 88px;
+  --comments-lane-width: 320px;
+  --outer-lane-padding: 72px;
+  --paper-width: calc(var(--vs-column-width) + (var(--page-pad-inline) * 2));
+  --editor-paper: var(--platform-colors-surface);
+  --editor-paper-text: var(--platform-colors-text);
+  --editor-paper-muted: var(--platform-colors-text-secondary);
+  --editor-paper-border: var(--platform-colors-border);
+  --editor-paper-subtle: var(--platform-colors-surface-hover);
+  background: var(--platform-colors-app-viewport);
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow: auto;
+  padding: 0 calc(var(--outer-lane-padding) + var(--comments-lane-width)) 88px
+    var(--outer-lane-padding);
+  position: relative;
+
+  .tiptap {
+    background: var(--editor-paper);
+    border-left: var(--vs-column-rule, none);
+    border-right: var(--vs-column-rule, none);
+    border-top: none;
+    border-bottom: none;
+    border-radius: 0;
+    box-shadow: none;
+    box-sizing: border-box;
+    caret-color: var(--platform-colors-accent);
+    color: var(--editor-paper-text);
+    flex-shrink: 0;
+    font-family: var(
+      --vs-body-font,
+      var(
+        --platform-typography-font-family-content,
+        var(--platform-typography-font-family)
+      )
+    );
+    font-size: var(--vs-font-size, 17px);
+    line-height: var(--vs-line-height, 1.7);
+    margin: 0 auto;
+    max-width: none;
+    min-height: calc(100vh - 88px);
+    min-width: var(--paper-width);
+    outline: none;
+    padding: 20px var(--page-pad-inline) 120px;
+    width: var(--paper-width);
+
+    > * + * {
+      margin-top: 0.7em;
+    }
+
+    p {
+      margin: 0;
+    }
+
+    h1 {
+      color: var(--editor-paper-text);
+      font-size: var(--h1-font-size);
+      font-weight: 400;
+      letter-spacing: -0.03em;
+      line-height: 1.08;
+      margin-top: 1.22em;
+    }
+
+    h2 {
+      color: var(--editor-paper-text);
+      font-size: 1.55em;
+      font-weight: 400;
+      letter-spacing: -0.02em;
+      line-height: 1.22;
+      margin-top: 1em;
+    }
+
+    h3 {
+      color: var(--editor-paper-muted);
+      font-size: 1.08em;
+      font-weight: 500;
+      line-height: 1.35;
+      margin-top: 0.88em;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+
+    p {
+      margin: 0;
+      hanging-punctuation: first last;
+    }
+
+    ul,
+    ol {
+      padding-left: 1.9em;
+    }
+
+    ul[data-type='taskList'] {
+      list-style: none;
+      padding-left: 0;
+
+      li {
+        align-items: flex-start;
+        display: flex;
+        gap: 10px;
+
+        > label {
+          flex-shrink: 0;
+          margin-top: 4px;
+
+          input[type='checkbox'] {
+            accent-color: var(--platform-colors-accent);
+            cursor: pointer;
+            height: 14px;
+            width: 14px;
+          }
+        }
+      }
+    }
+
+    blockquote {
+      border-left: 1px solid rgb(from var(--editor-paper-text) r g b / 0.18);
+      color: var(--editor-paper-muted);
+      font-style: italic;
+      margin: 0.9em 0;
+      padding: 4px 0 4px 16px;
+    }
+
+    code {
+      background: rgb(from var(--editor-paper-subtle) r g b / 0.9);
+      border: 1px solid rgb(from var(--editor-paper-border) r g b / 0.82);
+      border-radius: 4px;
+      font-family: var(--platform-typography-font-family-mono);
+      font-size: 0.9em;
+      padding: 0.1em 0.4em;
+    }
+
+    pre {
+      background: rgb(from var(--editor-paper-subtle) r g b / 0.94);
+      border: 1px solid rgb(from var(--editor-paper-border) r g b / 0.82);
+      border-radius: 8px;
+      font-family: var(--platform-typography-font-family-mono);
+      margin: 0.75em 0;
+      overflow-x: auto;
+      padding: 14px 18px;
+
+      code {
+        background: none;
+        border: none;
+        font-size: 0.875em;
+        padding: 0;
+      }
+
+      .hljs-comment,
+      .hljs-quote {
+        color: var(--editor-paper-muted);
+      }
+
+      .hljs-keyword,
+      .hljs-selector-tag,
+      .hljs-literal,
+      .hljs-section,
+      .hljs-link {
+        color: #8f3f71;
+      }
+
+      .hljs-string,
+      .hljs-title,
+      .hljs-name,
+      .hljs-type,
+      .hljs-attribute,
+      .hljs-symbol,
+      .hljs-bullet,
+      .hljs-addition {
+        color: #1e6f5c;
+      }
+
+      .hljs-number,
+      .hljs-variable,
+      .hljs-template-variable,
+      .hljs-deletion {
+        color: #b35c1e;
+      }
+    }
+
+    .tiptap-mathematics-render {
+      display: inline-flex;
+      align-items: center;
+      min-height: 1.4em;
+      padding: 0.08em 0.22em;
+      border-radius: 4px;
+    }
+
+    .tiptap-mathematics-render[data-type='block-math'] {
+      display: flex;
+      justify-content: center;
+      margin: 1.1em 0;
+      padding: 1em 1.2em;
+      background: rgb(from var(--editor-paper-subtle) r g b / 0.72);
+      border: 1px solid rgb(from var(--editor-paper-border) r g b / 0.82);
+    }
+
+    .tiptap-mathematics-render--editable {
+      cursor: pointer;
+    }
+
+    .inline-math-error,
+    .block-math-error {
+      color: var(--platform-colors-text-danger);
+      font-family: var(--platform-typography-font-family-mono);
+    }
+
+    a {
+      color: var(--platform-colors-accent);
+      text-decoration: underline;
+      text-underline-offset: 2px;
+
+      &:hover {
+        opacity: 0.85;
+      }
+    }
+
+    a.ix {
+      color: inherit;
+      text-decoration: underline dotted var(--platform-colors-text-disabled);
+      text-underline-offset: 3px;
+    }
+
+    sup.footnote-ref {
+      color: var(--platform-colors-accent);
+      cursor: pointer;
+      font-weight: 600;
+      padding: 0 1px;
+    }
+
+    mark {
+      background: rgb(from var(--platform-colors-warning) r g b / 35%);
+      border-radius: 2px;
+      color: inherit;
+      padding: 0.05em 0.25em;
+    }
+
+    span.comment-mark {
+      background: rgb(from var(--platform-colors-accent) r g b / 12%);
+      border-bottom: 2px solid
+        rgb(from var(--platform-colors-accent) r g b / 52%);
+      border-radius: 2px;
+      box-decoration-break: clone;
+    }
+
+    table {
+      border-collapse: collapse;
+      margin: 1em 0;
+      overflow: hidden;
+      table-layout: fixed;
+      width: 100%;
+
+      td,
+      th {
+        border: 1px solid var(--editor-paper-border);
+        box-sizing: border-box;
+        min-width: 1em;
+        padding: 8px 12px;
+        position: relative;
+        vertical-align: top;
+
+        > * {
+          margin-bottom: 0;
+        }
+      }
+
+      th {
+        background: var(--editor-paper-subtle);
+        font-weight: 600;
+        text-align: left;
+      }
+
+      .selectedCell::after {
+        background: rgb(from var(--platform-colors-accent) r g b / 15%);
+        content: '';
+        inset: 0;
+        pointer-events: none;
+        position: absolute;
+        z-index: 2;
+      }
+    }
+
+    hr {
+      border: none;
+      border-top: 1px solid rgb(from var(--editor-paper-border) r g b / 0.95);
+      margin: 1.7em 0;
+    }
+
+    .is-editor-empty::before,
+    .is-empty::before {
+      color: var(--editor-paper-muted);
+      content: attr(data-placeholder);
+      font-style: italic;
+      float: left;
+      height: 0;
+      pointer-events: none;
+    }
+  }
+
+  @media (max-width: 1560px) {
+    --comments-lane-width: 0px;
+  }
+
+  @media (max-width: 1200px) {
+    --outer-lane-padding: 24px;
+  }
+`
+
+// ---- DocumentEditor layout ----
+
+export const DocumentEditorRoot = styled.div<{ $pageMode?: boolean }>`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  background: ${({ $pageMode }) =>
+    $pageMode
+      ? 'var(--editor-content-bg, var(--platform-colors-surface))'
+      : 'var(--editor-content-bg, var(--platform-colors-bg))'};
+  overflow: visible;
+  position: relative;
+`
+
+export const DocumentEditorToolbarWrap = styled.div`
+  position: relative;
+  z-index: 40;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0;
+  min-width: 0;
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: visible;
+  background: var(
+    --editor-toolbar-bg,
+    var(--editor-paper-subtle, var(--platform-colors-surface-hover))
+  );
+  padding: 0;
+
+  > div {
+    padding: 4px 10px;
+    overflow: visible;
+    background: transparent;
+  }
+
+  > div:first-child {
+    flex: 0 0 auto;
+    margin: 0;
+    max-width: none;
+    min-width: 0;
+    width: auto;
+  }
+`
+
+export const DocumentEditorToolbarActions = styled.div`
+  display: flex;
+  flex: 0 0 auto;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 6px;
+  min-width: 0;
+  overflow: visible;
+  padding: 4px 10px;
+`
+
+/**
+ * Writer scroll lane + paper column (ps-book `StyledEditorContent` layout).
+ * Wraps plain `EditorContent` — do not `styled(EditorContent)` (TipTap v3 root is a fragment).
+ */
+export const DocumentEditorViewport = styled.div<{ $pageMode?: boolean }>`
+  --vs-column-width: 800px;
+  --h1-font-size: 2.2em;
+  --page-pad-inline: 88px;
+  --comments-lane-width: 0px;
+  --outer-lane-padding: 72px;
+  --paper-width: calc(var(--vs-column-width) + (var(--page-pad-inline) * 2));
+  --editor-paper: var(--platform-colors-surface);
+  --editor-paper-text: var(--platform-colors-text);
+  --editor-paper-muted: var(--platform-colors-text-secondary);
+  --editor-paper-border: var(--platform-colors-border);
+  --editor-paper-subtle: var(--platform-colors-surface-hover);
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  background: ${({ $pageMode }) =>
+    $pageMode ? 'var(--platform-colors-surface)' : 'var(--platform-colors-bg)'};
+  padding: ${({ $pageMode }) =>
+    $pageMode ? '0' : '0 var(--outer-lane-padding)'};
+  position: relative;
+  z-index: 1;
+  transition: padding-right 160ms ease;
+
+  &.document-editor-viewport--annotation-rail-open {
+    padding-right: calc(var(--outer-lane-padding) + 430px);
+  }
+
+  & > div {
+    min-height: 100%;
+  }
+
+  .tiptap,
+  .ProseMirror {
+    background: var(--editor-paper, var(--platform-colors-surface));
+    border-left: var(--vs-column-rule, none);
+    border-right: var(--vs-column-rule, none);
+    box-sizing: border-box;
+    caret-color: var(--platform-colors-accent);
+
+    outline: none;
+    color: var(--editor-paper-text);
+  }
+
+  .tiptap > *:first-child {
+    margin-top: 0;
+  }
+
+  .tiptap h1 {
+    margin-top: 1.22em;
+    color: var(--editor-paper-text);
+    font-size: var(--h1-font-size);
+    font-weight: 400;
+    letter-spacing: -0.03em;
+    line-height: 1.08;
+  }
+
+  .tiptap > h1:first-child,
+  .tiptap > h2:first-child,
+  .tiptap > h3:first-child {
+    margin-top: 0;
+  }
+
+  .tiptap h2 {
+    margin-top: 1em;
+    color: var(--editor-paper-text);
+    font-size: 1.55em;
+    font-weight: 400;
+    letter-spacing: -0.02em;
+    line-height: 1.22;
+  }
+
+  .tiptap h3 {
+    margin-top: 0.88em;
+    color: var(--editor-paper-muted);
+    font-size: 1.08em;
+    font-weight: 500;
+    letter-spacing: 0.08em;
+    line-height: 1.35;
+    text-transform: uppercase;
+  }
+
+  .tiptap p,
+  .tiptap ul,
+  .tiptap ol,
+  .tiptap blockquote,
+  .tiptap pre {
+    margin: 0;
+  }
+
+  .tiptap > * + * {
+    margin-top: 0.7em;
+  }
+
+  .tiptap h1 + *,
+  .tiptap h2 + * {
+    margin-top: 1.25em;
+  }
+
+  .tiptap p {
+    hanging-punctuation: first last;
+  }
+
+  .tiptap ul,
+  .tiptap ol {
+    padding-left: 1.9em;
+  }
+
+  .tiptap blockquote {
+    margin: 0.9em 0;
+    padding: 4px 0 4px 16px;
+    border-left: 1px solid rgb(from var(--editor-paper-text) r g b / 0.18);
+    color: var(--editor-paper-muted);
+    font-style: italic;
+  }
+
+  .tiptap table {
+    width: 100%;
+    margin: 1em 0;
+    border-collapse: collapse;
+    table-layout: fixed;
+  }
+
+  .tiptap th,
+  .tiptap td {
+    padding: 8px 12px;
+    border: 1px solid var(--editor-paper-border);
+    vertical-align: top;
+  }
+
+  .tiptap th {
+    background: var(--editor-paper-subtle);
+    font-weight: 600;
+  }
+
+  .tiptap img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    margin: 1em auto;
+  }
+
+  .tiptap figure {
+    margin: 1em 0;
+  }
+
+  .tiptap figcaption {
+    margin-top: 0.55em;
+    color: var(--editor-paper-muted);
+    font-size: 0.84em;
+    text-align: center;
+  }
+
+  .tiptap span.comment-mark {
+    background: transparent;
+    border-bottom: 1px solid
+      var(
+        --comment-mark-border,
+        rgb(from var(--platform-colors-accent) r g b / 46%)
+      );
+    border-radius: 2px;
+    box-decoration-break: clone;
+    cursor: pointer;
+    padding: 0 1px;
+  }
+
+  .tiptap span.comment-mark:hover,
+  .tiptap span.comment-mark:focus,
+  .tiptap span.comment-mark--active,
+  .tiptap span.comment-mark--spotlight {
+    background: linear-gradient(
+      to bottom,
+      transparent 56%,
+      var(
+          --comment-mark-bg,
+          rgb(from var(--platform-colors-accent) r g b / 14%)
+        )
+        56%
+    );
+  }
+
+  .tiptap span.comment-mark--agent-review {
+    --comment-mark-bg: rgb(199 210 254 / 0.22);
+    --comment-mark-border: rgb(99 102 241 / 0.44);
+  }
+
+  .tiptap span.comment-mark--formatting {
+    --comment-mark-bg: rgb(221 214 254 / 0.22);
+    --comment-mark-border: rgb(124 58 237 / 0.44);
+  }
+
+  .tiptap span.comment-mark--copy-editing {
+    --comment-mark-bg: rgb(187 247 208 / 0.22);
+    --comment-mark-border: rgb(5 150 105 / 0.42);
+  }
+
+  .tiptap span.comment-mark--copyedit {
+    --comment-mark-bg: rgb(187 247 208 / 0.22);
+    --comment-mark-border: rgb(22 163 74 / 0.58);
+  }
+
+  .tiptap span.comment-mark--voice {
+    --comment-mark-bg: rgb(251 207 232 / 0.2);
+    --comment-mark-border: rgb(219 39 119 / 0.52);
+  }
+
+  .tiptap span.comment-mark--claim {
+    --comment-mark-bg: rgb(251 191 36 / 0.24);
+    --comment-mark-border: rgb(217 119 6 / 0.74);
+    background: linear-gradient(
+      to bottom,
+      transparent 58%,
+      rgb(251 191 36 / 0.18) 58%
+    );
+    border-bottom-width: 2px;
+  }
+
+  .tiptap span.comment-mark--fact-check {
+    --comment-mark-bg: rgb(254 202 202 / 0.28);
+    --comment-mark-border: rgb(220 38 38 / 0.78);
+    background: linear-gradient(
+      to bottom,
+      transparent 55%,
+      rgb(254 202 202 / 0.24) 55%
+    );
+    border-bottom-width: 2px;
+  }
+
+  .tiptap span.comment-mark--source {
+    --comment-mark-bg: rgb(191 219 254 / 0.22);
+    --comment-mark-border: rgb(37 99 235 / 0.58);
+  }
+
+  .tiptap span.comment-mark--thread {
+    --comment-mark-bg: rgb(221 214 254 / 0.22);
+    --comment-mark-border: rgb(124 58 237 / 0.5);
+  }
+
+  .tiptap span.comment-mark--conflict,
+  .tiptap span.comment-mark--logic {
+    --comment-mark-bg: rgb(226 232 240 / 0.34);
+    --comment-mark-border: rgb(71 85 105 / 0.52);
+  }
+
+  .tiptap span.comment-mark--question {
+    --comment-mark-bg: rgb(153 246 228 / 0.24);
+    --comment-mark-border: rgb(13 148 136 / 0.46);
+  }
+
+  .tiptap span.comment-mark--citation {
+    --comment-mark-bg: rgb(191 219 254 / 0.22);
+    --comment-mark-border: rgb(37 99 235 / 0.44);
+  }
+
+  .tiptap span.comment-mark--spotlight-muted {
+    background: transparent;
+    border-bottom-color: rgb(from var(--editor-paper-text) r g b / 9%);
+    color: rgb(from var(--editor-paper-text) r g b / 0.78);
+    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
+  }
+
+  .tiptap span.comment-mark--resolved {
+    background: transparent;
+    border-bottom-color: rgb(from var(--editor-paper-muted) r g b / 32%);
+    border-bottom-width: 1px;
+    color: rgb(from var(--editor-paper-text) r g b / 0.72);
+  }
+
+  .tiptap .is-empty::before {
+    float: left;
+    height: 0;
+    color: var(--editor-paper-muted);
+    content: attr(data-placeholder);
+    pointer-events: none;
+  }
+
+  @media (max-width: 1200px) {
+    --outer-lane-padding: 24px;
+  }
+`
+
+export const EditorWrapper = styled.div<{ $pageMode?: boolean }>`
+  background: var(--editor-paper, var(--platform-colors-surface));
+  border-left: var(--vs-column-rule, none);
+  border-right: var(--vs-column-rule, none);
+  box-sizing: border-box;
+  caret-color: var(--platform-colors-accent);
+  flex-shrink: 0;
+  min-height: calc(100vh - 88px);
+  min-width: var(--paper-width);
+  width: var(--paper-width);
+  max-width: none;
+  margin: 0 auto;
+  padding: 56px var(--page-pad-inline) 120px;
+  color: var(--editor-paper-text, var(--platform-colors-text));
+  font-family: var(--vs-body-font, var(--platform-typography-font-family));
+  font-size: var(--vs-font-size, 17px);
+  line-height: var(--vs-line-height, 1.7);
+  outline: none;
+
+  ${({ $pageMode }) =>
+    $pageMode
+      ? `
+        min-width: min(100%, var(--paper-width));
+        width: min(100%, var(--paper-width));
+        min-height: 100vh;
+        padding-top: clamp(56px, 8vh, 104px);
+      `
+      : ''}
+`