deepspace 0.10.1 → 0.10.3

package/features/{docs/src/DocsEditorPage.tsx → documents/src/DocumentsEditorPage.tsx}

@@ -1,5 +1,5 @@
 /**
- * DocsEditorPage — Tiptap + Yjs collaborative document editor.
+ * DocumentsEditorPage — Tiptap + Yjs collaborative document editor.
  *
  * Replaces the previous contenteditable + HTML-in-Y.Text approach with
  * ProseMirror-via-Tiptap bound to a Y.XmlFragment. Remote keystrokes are
@@ -7,7 +7,7 @@
  * caret is migrated through concurrent edits by PM's position mapping,
  * and remote cursors are painted by `@tiptap/extension-collaboration-caret`.
  *
- * Legacy docs created with the old editor stored HTML in Y.Text('content').
+ * Legacy documents created with the old editor stored HTML in Y.Text('content').
  * On first open by an editor/owner we migrate that into the new XmlFragment
  * via `editor.commands.setContent(html)` and clear the legacy field. The
  * migration is a single Yjs transaction so all peers converge.
@@ -21,20 +21,20 @@ import { Badge } from '@/components/ui'
 import { type Editor, useEditorState } from '@tiptap/react'
 import { useDocEditor } from './editor/useDocEditor'
 import { DocEditorSurface, PAGE_HEIGHT_PX, PAGE_WIDTH_PX } from './editor/DocEditorSurface'
-import { DocsTiptapToolbar } from './editor/DocsTiptapToolbar'
-import { DocsOutlinePanel, DOCUMENT_OUTLINE_WIDTH_PX, type OutlineEntry } from './DocsOutlinePanel'
-import { DocsPresence } from './DocsPresence'
+import { DocumentsTiptapToolbar } from './editor/DocumentsTiptapToolbar'
+import { DocumentsOutlinePanel, DOCUMENT_OUTLINE_WIDTH_PX, type OutlineEntry } from './DocumentsOutlinePanel'
+import { DocumentsPresence } from './DocumentsPresence'
 import { InviteDialog } from './InviteDialog'
-import type { DocsDocumentFields } from './docs-library-types'
+import type { DocumentsDocumentFields } from './documents-library-types'
 import {
-  useDocsEditorPresence,
-  useDocsPresenceAccess,
+  useDocumentsEditorPresence,
+  useDocumentsPresenceAccess,
   type AccessChangeKind,
-} from './use-docs-presence-access'
-import './docs-ui.css'
+} from './use-documents-presence-access'
+import './documents-ui.css'
 
-const CANVAS_ZOOM_KEY = 'deepspace-docs-editor-canvas-zoom'
-const OUTLINE_OPEN_KEY = 'deepspace-docs-editor-outline-open'
+const CANVAS_ZOOM_KEY = 'deepspace-documents-editor-canvas-zoom'
+const OUTLINE_OPEN_KEY = 'deepspace-documents-editor-outline-open'
 const KEYBOARD_ZOOM_STEP = 0.1
 const DOC_NOT_FOUND_GRACE_MS = 450
 
@@ -77,7 +77,7 @@ function InlineTitle({
     return (
       <h1
         className="min-w-0 flex-1 cursor-text truncate rounded px-1 text-lg font-semibold tracking-tight transition-colors hover:bg-black/[0.04] dark:hover:bg-white/[0.06]"
-        style={{ color: 'var(--docs-el-text)' }}
+        style={{ color: 'var(--documents-el-text)' }}
         onClick={() => canEdit && setEditing(true)}
         title={canEdit ? 'Click to rename' : undefined}
       >
@@ -101,9 +101,9 @@ function InlineTitle({
       }}
       className="min-w-0 flex-1 rounded border px-2 py-0.5 text-lg font-semibold outline-none focus-visible:ring-2 focus-visible:ring-ring/35"
       style={{
-        borderColor: 'var(--docs-el-line)',
-        backgroundColor: 'var(--docs-el-bg)',
-        color: 'var(--docs-el-text)',
+        borderColor: 'var(--documents-el-line)',
+        backgroundColor: 'var(--documents-el-bg)',
+        color: 'var(--documents-el-text)',
       }}
     />
   )
@@ -156,34 +156,34 @@ function AccessChangedOverlay({
     <div
       role="alertdialog"
       aria-modal="true"
-      aria-labelledby="docs-access-change-title"
+      aria-labelledby="documents-access-change-title"
       className="absolute inset-0 z-[80] flex items-center justify-center px-4"
-      style={{ backgroundColor: 'color-mix(in srgb, var(--docs-el-bg) 78%, transparent)' }}
+      style={{ backgroundColor: 'color-mix(in srgb, var(--documents-el-bg) 78%, transparent)' }}
     >
       <div
         className="w-full max-w-sm rounded-xl border p-6 shadow-xl backdrop-blur"
         style={{
-          borderColor: 'var(--docs-el-line)',
-          backgroundColor: 'var(--docs-el-surface)',
-          color: 'var(--docs-el-text)',
+          borderColor: 'var(--documents-el-line)',
+          backgroundColor: 'var(--documents-el-surface)',
+          color: 'var(--documents-el-text)',
         }}
       >
         <div className="flex items-start gap-3">
           <span
             className="mt-0.5 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full"
             style={{
-              backgroundColor: 'color-mix(in srgb, var(--docs-el-accent) 14%, transparent)',
-              color: 'var(--docs-el-accent)',
+              backgroundColor: 'color-mix(in srgb, var(--documents-el-accent) 14%, transparent)',
+              color: 'var(--documents-el-accent)',
             }}
             aria-hidden
           >
             <AlertTriangle className="h-4 w-4" strokeWidth={2} />
           </span>
           <div className="min-w-0 flex-1">
-            <h2 id="docs-access-change-title" className="text-base font-semibold tracking-tight">
+            <h2 id="documents-access-change-title" className="text-base font-semibold tracking-tight">
               {title}
             </h2>
-            <p className="mt-1.5 text-sm" style={{ color: 'var(--docs-el-muted)' }}>
+            <p className="mt-1.5 text-sm" style={{ color: 'var(--documents-el-muted)' }}>
               {body}
             </p>
           </div>
@@ -193,9 +193,9 @@ function AccessChangedOverlay({
             type="button"
             autoFocus
             onClick={onRefresh}
-            data-testid="docs-access-refresh"
+            data-testid="documents-access-refresh"
             className="inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-sm font-medium text-white transition-opacity hover:opacity-90"
-            style={{ backgroundColor: 'var(--docs-el-accent)' }}
+            style={{ backgroundColor: 'var(--documents-el-accent)' }}
           >
             <RefreshCw className="h-3.5 w-3.5" strokeWidth={2.25} />
             Refresh
@@ -214,21 +214,21 @@ function AccessChangedOverlay({
  * swap is invisible. No `animate-pulse` skeleton bars: those used to flash
  * for a single frame on fast loads, which read as a "flicker".
  */
-function DocsEditorLoadingSurface({ label = 'Opening document...' }: { label?: string }) {
+function DocumentsEditorLoadingSurface({ label = 'Opening document...' }: { label?: string }) {
   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_WIDTH_PX / 96}in`, maxWidth: '100%' }}
           aria-busy="true"
           aria-label={label}
         >
           <div
-            className="docs-paged-page-stack relative"
+            className="documents-paged-page-stack relative"
             style={{ minHeight: `${PAGE_HEIGHT_PX}px` }}
           >
-            <div 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" />
+            <div 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" />
           </div>
         </div>
       </div>
@@ -269,12 +269,12 @@ function useOutlineEntries(editor: Editor | null): OutlineEntry[] {
   )
 }
 
-export default function DocsEditorPage() {
+export default function DocumentsEditorPage() {
   const { docId } = useParams<{ docId: string }>()
   const navigate = useNavigate()
   const { user } = useUser()
 
-  const { records: documents, status } = useQuery<DocsDocumentFields>('documents', {
+  const { records: documents, status } = useQuery<DocumentsDocumentFields>('documents', {
     orderBy: 'createdAt',
     orderDir: 'desc',
   })
@@ -284,7 +284,7 @@ export default function DocsEditorPage() {
     [documents, docId],
   )
 
-  const { put } = useMutations<DocsDocumentFields>('documents')
+  const { put } = useMutations<DocumentsDocumentFields>('documents')
 
   /**
    * `'content'` is kept as the field name only so legacy-doc migration can
@@ -301,7 +301,7 @@ export default function DocsEditorPage() {
     awareness,
   } = useYjsRoom(docId ?? 'noop', 'content')
 
-  const presenceAccess = useDocsPresenceAccess({
+  const presenceAccess = useDocumentsPresenceAccess({
     docId,
     document: selectedDoc,
     user,
@@ -419,7 +419,7 @@ export default function DocsEditorPage() {
     })
   }, [editor, synced, effectiveCanWrite, doc, legacyText])
 
-  const { participants: presenceParticipants, typingNames } = useDocsEditorPresence({
+  const { participants: presenceParticipants, typingNames } = useDocumentsEditorPresence({
     editor,
     document: selectedDoc,
     user,
@@ -474,21 +474,21 @@ export default function DocsEditorPage() {
 
   return (
     <div
-      className="docs-feature-scope flex h-full flex-col overflow-hidden print:h-auto print:overflow-visible"
-      style={{ backgroundColor: 'var(--docs-el-bg)', color: 'var(--docs-el-text)' }}
+      className="documents-feature-scope flex h-full flex-col overflow-hidden print:h-auto print:overflow-visible"
+      style={{ backgroundColor: 'var(--documents-el-bg)', color: 'var(--documents-el-text)' }}
     >
       <header
         className="relative z-10 flex shrink-0 flex-wrap items-center gap-2 border-b px-3 py-3 backdrop-blur-sm print:hidden sm:gap-3 sm:px-4"
         style={{
-          borderColor: 'var(--docs-el-line)',
-          backgroundColor: 'color-mix(in srgb, var(--docs-el-surface) 92%, transparent)',
+          borderColor: 'var(--documents-el-line)',
+          backgroundColor: 'color-mix(in srgb, var(--documents-el-surface) 92%, transparent)',
         }}
       >
         <button
           type="button"
-          onClick={() => navigate('/docs')}
+          onClick={() => navigate('/documents')}
           className="rounded-lg p-1.5 transition-colors hover:bg-black/[0.04] dark:hover:bg-white/[0.06]"
-          style={{ color: 'var(--docs-el-muted)' }}
+          style={{ color: 'var(--documents-el-muted)' }}
           title="Back to documents"
         >
           <ArrowLeft className="h-4 w-4" strokeWidth={2} />
@@ -496,7 +496,7 @@ export default function DocsEditorPage() {
 
         <InlineTitle title={docTitle} canEdit={isOwner ?? false} onSave={handleTitleSave} />
 
-        <DocsPresence participants={presenceParticipants} typingNames={typingNames} />
+        <DocumentsPresence participants={presenceParticipants} typingNames={typingNames} />
 
         <div className="flex shrink-0 items-center gap-3">
           {isOwner ? (
@@ -505,8 +505,8 @@ export default function DocsEditorPage() {
               onClick={() => setInviteOpen(true)}
               className="inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition-colors hover:bg-black/[0.04] dark:hover:bg-white/[0.06]"
               style={{
-                borderColor: 'var(--docs-el-line)',
-                color: 'var(--docs-el-muted)',
+                borderColor: 'var(--documents-el-line)',
+                color: 'var(--documents-el-muted)',
                 backgroundColor: 'transparent',
               }}
               title="Share this document"
@@ -517,7 +517,7 @@ export default function DocsEditorPage() {
           ) : effectiveRole === 'editor' || effectiveRole === 'viewer' ? (
             <span
               className="inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium"
-              style={{ borderColor: 'var(--docs-el-line)', color: 'var(--docs-el-muted)' }}
+              style={{ borderColor: 'var(--documents-el-line)', color: 'var(--documents-el-muted)' }}
             >
               {effectiveRole === 'editor' ? 'Shared editor' : 'Shared viewer'}
             </span>
@@ -525,7 +525,7 @@ export default function DocsEditorPage() {
           {synced ? (
             <span
               className="flex items-center gap-1.5 text-xs tabular-nums"
-              style={{ color: 'var(--docs-el-muted)' }}
+              style={{ color: 'var(--documents-el-muted)' }}
             >
               <span className="h-1.5 w-1.5 rounded-full bg-emerald-500" aria-hidden />
               Synced
@@ -533,7 +533,7 @@ export default function DocsEditorPage() {
           ) : (
             <span
               className="flex items-center gap-1.5 text-xs tabular-nums"
-              style={{ color: 'var(--docs-el-muted)' }}
+              style={{ color: 'var(--documents-el-muted)' }}
             >
               <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-amber-500" aria-hidden />
               Connecting…
@@ -557,9 +557,9 @@ export default function DocsEditorPage() {
         <div
           className="relative z-10 flex shrink-0 items-center gap-2 border-b px-4 py-2 text-sm print:hidden"
           style={{
-            borderColor: 'var(--docs-el-line)',
-            backgroundColor: 'color-mix(in srgb, var(--docs-el-muted) 12%, transparent)',
-            color: 'var(--docs-el-muted)',
+            borderColor: 'var(--documents-el-line)',
+            backgroundColor: 'color-mix(in srgb, var(--documents-el-muted) 12%, transparent)',
+            color: 'var(--documents-el-muted)',
           }}
         >
           {effectiveRole === 'viewer'
@@ -568,7 +568,7 @@ export default function DocsEditorPage() {
         </div>
       ) : null}
 
-      <DocsTiptapToolbar
+      <DocumentsTiptapToolbar
         editor={editor}
         disabled={!synced || !effectiveCanWrite}
         canvasZoom={canvasZoom}
@@ -577,7 +577,7 @@ export default function DocsEditorPage() {
 
       <div className="relative flex min-h-0 flex-1 flex-col print:block">
         {outlineOpen ? (
-          <DocsOutlinePanel entries={outlineEntries} onJumpTo={jumpToHeading} />
+          <DocumentsOutlinePanel entries={outlineEntries} onJumpTo={jumpToHeading} />
         ) : null}
 
         <button
@@ -588,11 +588,11 @@ export default function DocsEditorPage() {
           style={{
             top: 12,
             left: outlineOpen ? DOCUMENT_OUTLINE_WIDTH_PX + 10 : 12,
-            borderColor: 'color-mix(in srgb, var(--docs-el-line) 85%, transparent)',
-            backgroundColor: 'color-mix(in srgb, var(--docs-el-surface) 92%, transparent)',
-            color: 'var(--docs-el-muted)',
+            borderColor: 'color-mix(in srgb, var(--documents-el-line) 85%, transparent)',
+            backgroundColor: 'color-mix(in srgb, var(--documents-el-surface) 92%, transparent)',
+            color: 'var(--documents-el-muted)',
           }}
-          className={`absolute z-[36] flex h-9 w-9 items-center justify-center rounded-full border shadow-md backdrop-blur-md transition-[left,box-shadow,color] duration-200 ease-out hover:bg-black/[0.06] hover:text-[color:var(--docs-el-text)] hover:shadow-lg print:hidden dark:border-white/12 dark:hover:bg-white/[0.08] ${outlineOpen ? 'text-[color:var(--docs-el-text)]' : ''}`}
+          className={`absolute z-[36] flex h-9 w-9 items-center justify-center rounded-full border shadow-md backdrop-blur-md transition-[left,box-shadow,color] duration-200 ease-out hover:bg-black/[0.06] hover:text-[color:var(--documents-el-text)] hover:shadow-lg print:hidden dark:border-white/12 dark:hover:bg-white/[0.08] ${outlineOpen ? 'text-[color:var(--documents-el-text)]' : ''}`}
         >
           <ListIcon className="h-4 w-4" strokeWidth={2} />
         </button>
@@ -606,15 +606,15 @@ export default function DocsEditorPage() {
           }}
         >
           {docMissing ? (
-            <div className="docs-paged-editor-canvas flex h-full min-h-0 w-full flex-1 flex-col items-center justify-center gap-4 px-6">
-              <p className="text-sm" style={{ color: 'var(--docs-el-muted)' }}>
+            <div className="documents-paged-editor-canvas flex h-full min-h-0 w-full flex-1 flex-col items-center justify-center gap-4 px-6">
+              <p className="text-sm" style={{ color: 'var(--documents-el-muted)' }}>
                 This document is private. Ask the owner for an invite.
               </p>
               <button
                 type="button"
-                onClick={() => navigate('/docs')}
+                onClick={() => navigate('/documents')}
                 className="rounded-lg px-4 py-2 text-sm font-medium text-white transition-opacity hover:opacity-90"
-                style={{ backgroundColor: 'var(--docs-el-accent)' }}
+                style={{ backgroundColor: 'var(--documents-el-accent)' }}
               >
                 Back to documents
               </button>
@@ -622,7 +622,7 @@ export default function DocsEditorPage() {
           ) : editor && !docResolutionPending ? (
             <DocEditorSurface editor={editor} />
           ) : (
-            <DocsEditorLoadingSurface
+            <DocumentsEditorLoadingSurface
               label={isLoading ? 'Opening document...' : 'Resolving document...'}
             />
           )}
@@ -669,20 +669,20 @@ export function ErrorBoundary() {
 
   return (
     <div
-      data-testid="docs-route-error"
-      className="docs-feature-scope flex h-full flex-col items-center justify-center px-6 text-center"
-      style={{ backgroundColor: 'var(--docs-el-bg)', color: 'var(--docs-el-text)' }}
+      data-testid="documents-route-error"
+      className="documents-feature-scope flex h-full flex-col items-center justify-center px-6 text-center"
+      style={{ backgroundColor: 'var(--documents-el-bg)', color: 'var(--documents-el-text)' }}
     >
       <div
         className="w-full max-w-md rounded-xl border p-6 shadow-md"
-        style={{ borderColor: 'var(--docs-el-line)', backgroundColor: 'var(--docs-el-surface)' }}
+        style={{ borderColor: 'var(--documents-el-line)', backgroundColor: 'var(--documents-el-surface)' }}
       >
         <div className="mb-3 flex items-center justify-center">
           <span
             className="inline-flex h-10 w-10 items-center justify-center rounded-full"
             style={{
-              backgroundColor: 'color-mix(in srgb, var(--docs-el-accent) 14%, transparent)',
-              color: 'var(--docs-el-accent)',
+              backgroundColor: 'color-mix(in srgb, var(--documents-el-accent) 14%, transparent)',
+              color: 'var(--documents-el-accent)',
             }}
             aria-hidden
           >
@@ -690,12 +690,12 @@ export function ErrorBoundary() {
           </span>
         </div>
         <h1 className="text-base font-semibold tracking-tight">This document needs to reload</h1>
-        <p className="mx-auto mt-1.5 max-w-xs text-sm" style={{ color: 'var(--docs-el-muted)' }}>
+        <p className="mx-auto mt-1.5 max-w-xs text-sm" style={{ color: 'var(--documents-el-muted)' }}>
           Your access to this document just changed. Refresh to load the latest version.
         </p>
         <p
           className="mx-auto mt-3 max-w-xs truncate text-xs"
-          style={{ color: 'var(--docs-el-muted)' }}
+          style={{ color: 'var(--documents-el-muted)' }}
           title={message}
         >
           {message}
@@ -705,9 +705,9 @@ export function ErrorBoundary() {
             type="button"
             autoFocus
             onClick={() => window.location.reload()}
-            data-testid="docs-route-error-refresh"
+            data-testid="documents-route-error-refresh"
             className="inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-sm font-medium text-white transition-opacity hover:opacity-90"
-            style={{ backgroundColor: 'var(--docs-el-accent)' }}
+            style={{ backgroundColor: 'var(--documents-el-accent)' }}
           >
             <RefreshCw className="h-3.5 w-3.5" strokeWidth={2.25} />
             Refresh