deepspace 0.10.1 → 0.10.3

package/features/{docs/src/docs-ui.css → documents/src/documents-ui.css}

@@ -1,37 +1,37 @@
 /**
- * Docs feature UI — derives palette from the host app's design tokens (--color-* on
+ * Documents feature UI — derives palette from the host app's design tokens (--color-* on
  * shadcn/Tailwind starters, --theme-* / --ui-* when DeepSpaceThemeProvider applies a theme).
  * No separate light/dark block: inherits whatever the root provides (e.g. [data-theme] changes).
  */
 
-.docs-feature-scope {
-  --docs-el-bg: var(--color-background, var(--theme-background, #fafafa));
-  --docs-el-surface: var(
+.documents-feature-scope {
+  --documents-el-bg: var(--color-background, var(--theme-background, #fafafa));
+  --documents-el-surface: var(
     --color-card,
     var(--theme-library-card-bg, var(--theme-panel-bg, #ffffff))
   );
-  --docs-el-text: var(--color-foreground, var(--theme-text, #1d1d1f));
-  --docs-el-muted: var(
+  --documents-el-text: var(--color-foreground, var(--theme-text, #1d1d1f));
+  --documents-el-muted: var(
     --color-muted-foreground,
     var(--theme-text-secondary, var(--theme-text-tertiary, #86868b))
   );
-  --docs-el-accent: var(--color-primary, var(--theme-accent, var(--ui-accent, #3b82f6)));
-  --docs-el-line: var(--color-border, var(--theme-border, rgba(15, 23, 42, 0.12)));
+  --documents-el-accent: var(--color-primary, var(--theme-accent, var(--ui-accent, #3b82f6)));
+  --documents-el-line: var(--color-border, var(--theme-border, rgba(15, 23, 42, 0.12)));
 
-  --docs-el-selection: color-mix(in srgb, var(--docs-el-accent) 22%, transparent);
+  --documents-el-selection: color-mix(in srgb, var(--documents-el-accent) 22%, transparent);
 
-  --docs-editor-desk: var(
+  --documents-editor-desk: var(
     --color-muted,
     var(
       --theme-library-surface,
-      var(--theme-surface-solid, var(--theme-surface, var(--docs-el-bg)))
+      var(--theme-surface-solid, var(--theme-surface, var(--documents-el-bg)))
     )
   );
-  --docs-editor-paper: #ffffff;
-  --docs-editor-paper-text: #111111;
-  --docs-editor-paper-muted: #6b7280;
-  --docs-editor-paper-border: var(--docs-el-line);
-  --docs-editor-paper-shadow: var(
+  --documents-editor-paper: #ffffff;
+  --documents-editor-paper-text: #111111;
+  --documents-editor-paper-muted: #6b7280;
+  --documents-editor-paper-border: var(--documents-el-line);
+  --documents-editor-paper-shadow: var(
     --shadow-card,
     var(--ui-shadow-md, 0 4px 12px rgba(15, 23, 42, 0.08))
   );
@@ -52,30 +52,30 @@
  *   - `-webkit-text-fill-color: inherit` is the same fix for Safari, which
  *     would otherwise still override `color` inside `::selection`.
  */
-.docs-paged-editor .ProseMirror ::selection,
-.docs-paged-editor .ProseMirror::selection {
+.documents-paged-editor .ProseMirror ::selection,
+.documents-paged-editor .ProseMirror::selection {
   background-color: #6aa8f3;
   color: inherit;
   -webkit-text-fill-color: inherit;
 }
 
-.docs-editor-paper {
-  background-color: var(--docs-editor-paper);
-  border: 1px solid var(--docs-editor-paper-border);
-  box-shadow: var(--docs-editor-paper-shadow);
+.documents-editor-paper {
+  background-color: var(--documents-editor-paper);
+  border: 1px solid var(--documents-editor-paper-border);
+  box-shadow: var(--documents-editor-paper-shadow);
 }
 
-.docs-paged-editor-canvas {
-  background-color: var(--docs-editor-desk);
+.documents-paged-editor-canvas {
+  background-color: var(--documents-editor-desk);
 }
 
-.docs-presence-avatar,
-.docs-presence-more {
+.documents-presence-avatar,
+.documents-presence-more {
   align-items: center;
-  background-color: color-mix(in srgb, var(--docs-el-accent) 14%, var(--docs-el-surface));
-  border: 2px solid var(--docs-el-surface);
+  background-color: color-mix(in srgb, var(--documents-el-accent) 14%, var(--documents-el-surface));
+  border: 2px solid var(--documents-el-surface);
   border-radius: 9999px;
-  color: var(--docs-el-text);
+  color: var(--documents-el-text);
   display: inline-flex;
   flex: none;
   font-size: 11px;
@@ -87,153 +87,153 @@
   width: 30px;
 }
 
-.docs-presence-more {
+.documents-presence-more {
   cursor: pointer;
   transition:
     background-color 160ms ease,
     color 160ms ease;
 }
 
-.docs-presence-more:hover {
-  background-color: color-mix(in srgb, var(--docs-el-accent) 22%, var(--docs-el-surface));
-  color: var(--docs-el-accent);
+.documents-presence-more:hover {
+  background-color: color-mix(in srgb, var(--documents-el-accent) 22%, var(--documents-el-surface));
+  color: var(--documents-el-accent);
 }
 
-.docs-paged-page-padding {
-  --docs-pad-v: 0.42in;
-  --docs-pad-h: 0.38in;
-  padding: var(--docs-pad-v) var(--docs-pad-h);
+.documents-paged-page-padding {
+  --documents-pad-v: 0.42in;
+  --documents-pad-h: 0.38in;
+  padding: var(--documents-pad-v) var(--documents-pad-h);
 }
 
 @media (min-width: 640px) {
-  .docs-paged-page-padding {
-    --docs-pad-v: 0.55in;
-    --docs-pad-h: 0.65in;
+  .documents-paged-page-padding {
+    --documents-pad-v: 0.55in;
+    --documents-pad-h: 0.65in;
   }
 }
 
 @media (min-width: 1024px) {
-  .docs-paged-page-padding {
-    --docs-pad-v: 0.62in;
-    --docs-pad-h: 0.75in;
+  .documents-paged-page-padding {
+    --documents-pad-v: 0.62in;
+    --documents-pad-h: 0.75in;
   }
 }
 
-.docs-paged-editor-font {
+.documents-paged-editor-font {
   font-size: 11pt;
   line-height: 1.4;
-  color: var(--docs-editor-paper-text);
+  color: var(--documents-editor-paper-text);
 }
 
 @media (max-width: 640px) {
-  .docs-paged-editor-font {
+  .documents-paged-editor-font {
     font-size: 16px;
     line-height: 1.6;
   }
 }
 
 /* Tiptap ProseMirror canvas */
-.docs-paged-editor .ProseMirror,
-.docs-paged-editor .tiptap.ProseMirror,
-.docs-paged-editor .docs-tiptap-editor {
+.documents-paged-editor .ProseMirror,
+.documents-paged-editor .tiptap.ProseMirror,
+.documents-paged-editor .documents-tiptap-editor {
   outline: none;
   min-height: 1.6em;
   caret-color: #000;
-  color: var(--docs-editor-paper-text);
+  color: var(--documents-editor-paper-text);
 }
 
-.docs-paged-editor .ProseMirror p,
-.docs-paged-editor .ProseMirror li,
-.docs-paged-editor .ProseMirror h1,
-.docs-paged-editor .ProseMirror h2,
-.docs-paged-editor .ProseMirror h3,
-.docs-paged-editor .ProseMirror h4,
-.docs-paged-editor .ProseMirror h5,
-.docs-paged-editor .ProseMirror h6 {
+.documents-paged-editor .ProseMirror p,
+.documents-paged-editor .ProseMirror li,
+.documents-paged-editor .ProseMirror h1,
+.documents-paged-editor .ProseMirror h2,
+.documents-paged-editor .ProseMirror h3,
+.documents-paged-editor .ProseMirror h4,
+.documents-paged-editor .ProseMirror h5,
+.documents-paged-editor .ProseMirror h6 {
   margin: 0 0 0.45em;
 }
 
-.docs-paged-editor .ProseMirror h1 {
+.documents-paged-editor .ProseMirror h1 {
   font-size: 1.9em;
   font-weight: 700;
   line-height: 1.2;
   margin-top: 0.2em;
 }
-.docs-paged-editor .ProseMirror h2 {
+.documents-paged-editor .ProseMirror h2 {
   font-size: 1.5em;
   font-weight: 700;
   line-height: 1.25;
   margin-top: 0.15em;
 }
-.docs-paged-editor .ProseMirror h3 {
+.documents-paged-editor .ProseMirror h3 {
   font-size: 1.25em;
   font-weight: 600;
   line-height: 1.3;
 }
 
-.docs-paged-editor .ProseMirror blockquote {
-  border-left: 3px solid var(--docs-el-line);
+.documents-paged-editor .ProseMirror blockquote {
+  border-left: 3px solid var(--documents-el-line);
   margin: 0.5em 0;
   padding: 0.1em 0.85em;
-  color: var(--docs-editor-paper-muted);
+  color: var(--documents-editor-paper-muted);
 }
 
-.docs-paged-editor .ProseMirror ul,
-.docs-paged-editor .ProseMirror ol {
+.documents-paged-editor .ProseMirror ul,
+.documents-paged-editor .ProseMirror ol {
   padding-left: 1.4em;
   margin: 0 0 0.45em;
 }
 
-.docs-paged-editor .ProseMirror ul[data-type='taskList'] {
+.documents-paged-editor .ProseMirror ul[data-type='taskList'] {
   list-style: none;
   padding: 0;
 }
 
-.docs-paged-editor .ProseMirror ul[data-type='taskList'] li {
+.documents-paged-editor .ProseMirror ul[data-type='taskList'] li {
   align-items: flex-start;
   display: flex;
   gap: 0.5em;
 }
 
-.docs-paged-editor .ProseMirror ul[data-type='taskList'] li > label {
+.documents-paged-editor .ProseMirror ul[data-type='taskList'] li > label {
   flex: none;
   margin-top: 0.25em;
 }
 
-.docs-paged-editor .ProseMirror hr {
+.documents-paged-editor .ProseMirror hr {
   border: none;
-  border-top: 1px solid var(--docs-el-line);
+  border-top: 1px solid var(--documents-el-line);
   margin: 1em 0;
 }
 
-.docs-paged-editor .ProseMirror a {
-  color: var(--docs-el-accent);
+.documents-paged-editor .ProseMirror a {
+  color: var(--documents-el-accent);
   text-decoration: underline;
   text-underline-offset: 2px;
 }
 
-.docs-paged-editor .ProseMirror code {
-  background-color: color-mix(in srgb, var(--docs-el-muted) 14%, transparent);
+.documents-paged-editor .ProseMirror code {
+  background-color: color-mix(in srgb, var(--documents-el-muted) 14%, transparent);
   border-radius: 3px;
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   font-size: 0.9em;
   padding: 0.1em 0.3em;
 }
 
-.docs-paged-editor .ProseMirror mark,
-.docs-paged-editor .ProseMirror .docs-text-highlight {
+.documents-paged-editor .ProseMirror mark,
+.documents-paged-editor .ProseMirror .documents-text-highlight {
   background-color: #bfdbfe;
-  color: var(--docs-editor-paper-text);
+  color: var(--documents-editor-paper-text);
 }
 
-.docs-paged-editor .ProseMirror mark *,
-.docs-paged-editor .ProseMirror .docs-text-highlight * {
-  color: var(--docs-editor-paper-text) !important;
+.documents-paged-editor .ProseMirror mark *,
+.documents-paged-editor .ProseMirror .documents-text-highlight * {
+  color: var(--documents-editor-paper-text) !important;
 }
 
 /* Placeholder (from @tiptap/extension-placeholder) — applied to the first empty paragraph. */
-.docs-paged-editor .ProseMirror p.is-editor-empty:first-child::before {
-  color: var(--docs-editor-paper-muted);
+.documents-paged-editor .ProseMirror p.is-editor-empty:first-child::before {
+  color: var(--documents-editor-paper-muted);
   content: attr(data-placeholder);
   float: left;
   height: 0;
@@ -241,7 +241,7 @@
 }
 
 /* Soft page break: decoration spacer that fills the rest of the current page. */
-.docs-soft-page-break {
+.documents-soft-page-break {
   display: block;
   flex: none;
   width: 100%;
@@ -250,7 +250,7 @@
 }
 
 @media print {
-  .docs-soft-page-break {
+  .documents-soft-page-break {
     display: none !important;
   }
 }
@@ -289,15 +289,15 @@
 
 /*
  * Print: the on-screen editor inherits the host theme's foreground color via
- * --docs-el-text (often a light gray on dark themes), but the print canvas is
+ * --documents-el-text (often a light gray on dark themes), but the print canvas is
  * forced to white. Without this override, the printed page comes out blank.
  */
 @media print {
-  .docs-paged-page-face {
+  .documents-paged-page-face {
     background-color: #ffffff !important;
   }
-  .docs-paged-editor {
-    color: var(--docs-editor-paper-text) !important;
+  .documents-paged-editor {
+    color: var(--documents-editor-paper-text) !important;
   }
   .collaboration-carets__caret,
   .collaboration-carets__label {

package/features/{docs → documents}/src/editor/DocEditorSurface.tsx

@@ -53,14 +53,14 @@ function makeSoftPageBreakDecorations(editor: Editor, breaks: SoftPageBreak[]) {
         Math.min(pageBreak.pos, docSize),
         () => {
           const spacer = document.createElement('span')
-          spacer.className = 'docs-soft-page-break'
+          spacer.className = 'documents-soft-page-break'
           spacer.style.height = `${pageBreak.height}px`
           spacer.contentEditable = 'false'
           spacer.setAttribute('aria-hidden', 'true')
           return spacer
         },
         {
-          key: `docs-page-break-${index}-${pageBreak.pos}-${Math.round(pageBreak.height)}`,
+          key: `documents-page-break-${index}-${pageBreak.pos}-${Math.round(pageBreak.height)}`,
           side: 1,
           ignoreSelection: true,
         },
@@ -112,7 +112,7 @@ export function DocEditorSurface({ editor, onPageCountChange }: DocEditorSurface
     const refreshDecorations = () => {
       if (!viewIsAlive()) return
       view.dispatch(
-        view.state.tr.setMeta('addToHistory', false).setMeta('docsPagination', true),
+        view.state.tr.setMeta('addToHistory', false).setMeta('documentsPagination', true),
       )
     }
 
@@ -145,7 +145,7 @@ export function DocEditorSurface({ editor, onPageCountChange }: DocEditorSurface
       rafRef.current = requestAnimationFrame(() => {
         rafRef.current = undefined
         if (!viewIsAlive()) return
-        const shell = dom.closest<HTMLElement>('.docs-paged-content')
+        const shell = dom.closest<HTMLElement>('.documents-paged-content')
         if (!shell) return
 
         const shellStyle = window.getComputedStyle(shell)
@@ -225,27 +225,27 @@ export function DocEditorSurface({ editor, onPageCountChange }: DocEditorSurface
   const stackHeight = pageCount * PAGE_HEIGHT_PX + Math.max(0, pageCount - 1) * GAP_PX
 
   return (
-    <div className="docs-paged-editor-canvas h-full min-h-0 w-full flex-1 overflow-y-auto overflow-x-hidden overscroll-y-contain print:block print:!h-auto print:!overflow-visible print:!bg-white">
-      <div className="docs-paged-inner pointer-events-auto mx-auto w-full max-w-full px-2 py-3 sm:px-3 sm:py-4 md:py-5">
+    <div className="documents-paged-editor-canvas h-full min-h-0 w-full flex-1 overflow-y-auto overflow-x-hidden overscroll-y-contain print:block print:!h-auto print:!overflow-visible print:!bg-white">
+      <div className="documents-paged-inner pointer-events-auto mx-auto w-full max-w-full px-2 py-3 sm:px-3 sm:py-4 md:py-5">
         <div
-          className="docs-paged-page-frame relative mx-auto"
+          className="documents-paged-page-frame relative mx-auto"
           style={{ width: `${PAGE_W_IN}in`, maxWidth: '100%' }}
         >
-          <div className="docs-paged-page-stack relative" style={{ minHeight: `${stackHeight}px` }}>
+          <div className="documents-paged-page-stack relative" style={{ minHeight: `${stackHeight}px` }}>
             {Array.from({ length: pageCount }, (_, index) => (
               <div
                 key={index}
-                className="docs-paged-page-face docs-editor-paper pointer-events-none absolute left-0 top-0 h-[11in] w-full rounded-sm print:static print:h-auto print:shadow-none print:border-0"
+                className="documents-paged-page-face documents-editor-paper pointer-events-none absolute left-0 top-0 h-[11in] w-full rounded-sm print:static print:h-auto print:shadow-none print:border-0"
                 style={{ transform: `translateY(${index * PAGE_STRIDE_PX}px)` }}
               />
             ))}
             <div
-              className="docs-paged-content docs-paged-page-padding relative z-10 box-border"
+              className="documents-paged-content documents-paged-page-padding relative z-10 box-border"
               style={{ maxWidth: '100%', minHeight: `${stackHeight}px` }}
             >
               <EditorContent
                 editor={editor}
-                className="docs-paged-editor docs-paged-editor-font tiptap"
+                className="documents-paged-editor documents-paged-editor-font tiptap"
                 data-testid="editor-content"
               />
             </div>

package/features/{docs/src/editor/DocsTiptapToolbar.tsx → documents/src/editor/DocumentsTiptapToolbar.tsx}

@@ -60,7 +60,7 @@ const HIGHLIGHT_OPTIONS = [
 
 function Divider() {
   return (
-    <div className="mx-1 h-6 w-px self-center" style={{ backgroundColor: 'var(--docs-el-line)' }} />
+    <div className="mx-1 h-6 w-px self-center" style={{ backgroundColor: 'var(--documents-el-line)' }} />
   )
 }
 
@@ -90,9 +90,9 @@ function ToolbarButton({
           : 'hover:bg-black/[0.06] dark:hover:bg-white/[0.08]'
       }`}
       style={{
-        color: active ? 'var(--docs-el-accent)' : 'var(--docs-el-muted)',
+        color: active ? 'var(--documents-el-accent)' : 'var(--documents-el-muted)',
         backgroundColor: active
-          ? 'color-mix(in srgb, var(--docs-el-accent) 14%, transparent)'
+          ? 'color-mix(in srgb, var(--documents-el-accent) 14%, transparent)'
           : undefined,
       }}
     >
@@ -101,7 +101,7 @@ function ToolbarButton({
   )
 }
 
-export interface DocsTiptapToolbarProps {
+export interface DocumentsTiptapToolbarProps {
   editor: Editor | null
   disabled?: boolean
   canvasZoom: number
@@ -126,12 +126,12 @@ const EMPTY_TOOLBAR_STATE = {
   alignRight: false,
 }
 
-export function DocsTiptapToolbar({
+export function DocumentsTiptapToolbar({
   editor,
   disabled,
   canvasZoom,
   onCanvasZoomChange,
-}: DocsTiptapToolbarProps) {
+}: DocumentsTiptapToolbarProps) {
   const [zoomOpen, setZoomOpen] = useState(false)
   const [colorOpen, setColorOpen] = useState(false)
   const [highlightOpen, setHighlightOpen] = useState(false)
@@ -194,8 +194,8 @@ export function DocsTiptapToolbar({
       data-testid="editor-toolbar"
       className="sticky top-0 z-10 flex flex-wrap items-center gap-0.5 border-b px-3 py-1.5 print:hidden"
       style={{
-        borderColor: 'var(--docs-el-line)',
-        backgroundColor: 'color-mix(in srgb, var(--docs-el-surface) 96%, transparent)',
+        borderColor: 'var(--documents-el-line)',
+        backgroundColor: 'color-mix(in srgb, var(--documents-el-surface) 96%, transparent)',
       }}
     >
       <ToolbarButton
@@ -288,7 +288,7 @@ export function DocsTiptapToolbar({
           }}
           disabled={formattingLocked}
           className="flex items-center gap-1 rounded px-2 py-1 text-sm transition-colors hover:bg-black/[0.05] disabled:cursor-not-allowed disabled:opacity-40 dark:hover:bg-white/[0.06]"
-          style={{ color: 'var(--docs-el-muted)' }}
+          style={{ color: 'var(--documents-el-muted)' }}
           title="Text color"
         >
           <Palette className="h-3.5 w-3.5" />
@@ -307,8 +307,8 @@ export function DocsTiptapToolbar({
             <div
               className="absolute left-0 top-full z-50 mt-1 grid w-[9.5rem] grid-cols-4 gap-1 rounded-lg border p-2 shadow-lg"
               style={{
-                borderColor: 'var(--docs-el-line)',
-                backgroundColor: 'var(--docs-el-surface)',
+                borderColor: 'var(--documents-el-line)',
+                backgroundColor: 'var(--documents-el-surface)',
               }}
             >
               {TEXT_COLOR_OPTIONS.map(({ label, value }) => (
@@ -326,7 +326,7 @@ export function DocsTiptapToolbar({
                   className="h-7 w-7 rounded-full border transition-transform hover:scale-105"
                   style={{
                     backgroundColor: value || 'transparent',
-                    borderColor: 'var(--docs-el-line)',
+                    borderColor: 'var(--documents-el-line)',
                   }}
                 />
               ))}
@@ -346,7 +346,7 @@ export function DocsTiptapToolbar({
           }}
           disabled={formattingLocked}
           className="flex items-center gap-1 rounded px-2 py-1 text-sm transition-colors hover:bg-black/[0.05] disabled:cursor-not-allowed disabled:opacity-40 dark:hover:bg-white/[0.06]"
-          style={{ color: 'var(--docs-el-muted)' }}
+          style={{ color: 'var(--documents-el-muted)' }}
           title="Highlight"
         >
           <Highlighter className="h-3.5 w-3.5" />
@@ -365,8 +365,8 @@ export function DocsTiptapToolbar({
             <div
               className="absolute left-0 top-full z-50 mt-1 grid w-[9.5rem] grid-cols-4 gap-1 rounded-lg border p-2 shadow-lg"
               style={{
-                borderColor: 'var(--docs-el-line)',
-                backgroundColor: 'var(--docs-el-surface)',
+                borderColor: 'var(--documents-el-line)',
+                backgroundColor: 'var(--documents-el-surface)',
               }}
             >
               {HIGHLIGHT_OPTIONS.map(({ label, value }) => (
@@ -384,7 +384,7 @@ export function DocsTiptapToolbar({
                   className="h-7 w-7 rounded-full border transition-transform hover:scale-105"
                   style={{
                     backgroundColor: value || 'transparent',
-                    borderColor: 'var(--docs-el-line)',
+                    borderColor: 'var(--documents-el-line)',
                   }}
                 />
               ))}
@@ -509,7 +509,7 @@ export function DocsTiptapToolbar({
           type="button"
           onClick={() => setZoomOpen(!zoomOpen)}
           className="flex min-w-[3.25rem] items-center gap-1 rounded px-2 py-1 text-sm tabular-nums transition-colors hover:bg-black/[0.05] dark:hover:bg-white/[0.06]"
-          style={{ color: 'var(--docs-el-muted)' }}
+          style={{ color: 'var(--documents-el-muted)' }}
         >
           {normalizedZoom}
           <svg className="h-3 w-3 shrink-0" viewBox="0 0 12 12" fill="currentColor" aria-hidden>
@@ -527,8 +527,8 @@ export function DocsTiptapToolbar({
             <div
               className="absolute right-0 top-full z-50 mt-1 min-w-[7rem] overflow-y-auto rounded-lg border py-1 shadow-lg"
               style={{
-                borderColor: 'var(--docs-el-line)',
-                backgroundColor: 'var(--docs-el-surface)',
+                borderColor: 'var(--documents-el-line)',
+                backgroundColor: 'var(--documents-el-surface)',
               }}
             >
               {ZOOM_PRESETS.map(({ label, value }) => (
@@ -543,8 +543,8 @@ export function DocsTiptapToolbar({
                   style={{
                     color:
                       Math.abs(canvasZoom - value) < 0.001
-                        ? 'var(--docs-el-accent)'
-                        : 'var(--docs-el-text)',
+                        ? 'var(--documents-el-accent)'
+                        : 'var(--documents-el-text)',
                     fontWeight: Math.abs(canvasZoom - value) < 0.001 ? 600 : 400,
                   }}
                 >

package/features/{docs → documents}/src/editor/useDocEditor.ts

@@ -75,7 +75,7 @@ function renderCollaborationCaret(user: CollaborationUser): HTMLElement {
 
   const label = document.createElement('span')
   label.classList.add('collaboration-carets__label')
-  label.style.backgroundColor = `color-mix(in srgb, ${color} 16%, var(--docs-editor-paper))`
+  label.style.backgroundColor = `color-mix(in srgb, ${color} 16%, var(--documents-editor-paper))`
   label.style.color = color
   label.textContent = user.name || 'Collaborator'
   cursor.appendChild(label)
@@ -144,7 +144,7 @@ export function useDocEditor({
       Color,
       Highlight.configure({
         multicolor: true,
-        HTMLAttributes: { class: 'docs-text-highlight' },
+        HTMLAttributes: { class: 'documents-text-highlight' },
       }),
       Subscript,
       Superscript,
@@ -184,8 +184,8 @@ export function useDocEditor({
       editorProps: {
         transformPastedHTML: stripCollaborationArtifactsFromHTML,
         attributes: {
-          class: 'docs-tiptap-editor',
-          'data-testid': 'docs-tiptap-editor',
+          class: 'documents-tiptap-editor',
+          'data-testid': 'documents-tiptap-editor',
         },
       },
     },