deepspace 0.10.1 → 0.10.2

package/features/{docs/src/DocsListPage.tsx → documents/src/DocumentsListPage.tsx}

@@ -1,6 +1,6 @@
 /**
- * DocsListPage — docs2-style library: sidebar, folders, favorites, grid/list.
- * New docs default to “Untitled Document”; rename in editor (no modal).
+ * DocumentsListPage — documents2-style library: sidebar, folders, favorites, grid/list.
+ * New documents default to “Untitled Document”; rename in editor (no modal).
  */
 
 import { useMemo, useState, useCallback, useEffect, useRef } from 'react'
@@ -26,12 +26,12 @@ import {
 } from 'lucide-react'
 import { LibrarySidebar, readSidebarCollapsed, writeSidebarCollapsed } from './LibrarySidebar'
 import {
-  parseDocsIdList,
+  parseDocumentsIdList,
   type DocFolderFields,
-  type DocsDocumentFields,
+  type DocumentsDocumentFields,
   type LibraryNavSelection,
-} from './docs-library-types'
-import './docs-ui.css'
+} from './documents-library-types'
+import './documents-ui.css'
 
 type SortOption = 'lastEdited' | 'titleAZ' | 'titleZA'
 type ViewMode = 'grid' | 'list'
@@ -43,12 +43,12 @@ const SORT_OPTIONS: { value: SortOption; label: string }[] = [
 ]
 
 const UNTITLED = 'Untitled Document'
-const FAVORITES_KEY = 'deepspace-docs-favorites'
+const FAVORITES_KEY = 'deepspace-documents-favorites'
 
 function readFavorites(): Set<string> {
   try {
     const stored = localStorage.getItem(FAVORITES_KEY)
-    return new Set(parseDocsIdList(stored ?? undefined))
+    return new Set(parseDocumentsIdList(stored ?? undefined))
   } catch {
     return new Set()
   }
@@ -77,7 +77,7 @@ function formatDate(iso: string): string {
   })
 }
 
-export default function DocsListPage() {
+export default function DocumentsListPage() {
   const { user } = useUser()
   const navigate = useNavigate()
   const userRole = (user?.role ?? ROLES.VIEWER) as Role
@@ -97,11 +97,11 @@ export default function DocsListPage() {
   const [moveMenuId, setMoveMenuId] = useState<string | null>(null)
   const [actionsMenuId, setActionsMenuId] = useState<string | null>(null)
 
-  const { records: documents, status } = useQuery<DocsDocumentFields>('documents', {
+  const { records: documents, status } = useQuery<DocumentsDocumentFields>('documents', {
     orderBy: 'createdAt',
     orderDir: 'desc',
   })
-  const { create, remove, put } = useMutations<DocsDocumentFields>('documents')
+  const { create, remove, put } = useMutations<DocumentsDocumentFields>('documents')
 
   const { records: folderRecords } = useQuery<DocFolderFields>('doc_folders', {
     orderBy: 'createdAt',
@@ -132,16 +132,16 @@ export default function DocsListPage() {
   const displayFirstName = user?.name?.trim().split(/\s+/)[0] ?? 'there'
 
   const isOwnedDocument = useCallback(
-    (d: RecordData<DocsDocumentFields>) => d.data.ownerId === user?.id,
+    (d: RecordData<DocumentsDocumentFields>) => d.data.ownerId === user?.id,
     [user?.id],
   )
 
   const isSharedWithCurrentUser = useCallback(
-    (d: RecordData<DocsDocumentFields>) =>
+    (d: RecordData<DocumentsDocumentFields>) =>
       Boolean(
         user?.id &&
         d.data.ownerId !== user.id &&
-        parseDocsIdList(d.data.collaborators).includes(user.id),
+        parseDocumentsIdList(d.data.collaborators).includes(user.id),
       ),
     [user?.id],
   )
@@ -164,7 +164,7 @@ export default function DocsListPage() {
   }, [libraryNav, sortedFolders])
 
   const matchesNav = useCallback(
-    (d: RecordData<DocsDocumentFields>) => {
+    (d: RecordData<DocumentsDocumentFields>) => {
       const fid = d.data.folderId ?? ''
       if (libraryNav.kind === 'all') return isOwnedDocument(d)
       if (libraryNav.kind === 'shared') return isSharedWithCurrentUser(d)
@@ -225,7 +225,7 @@ export default function DocsListPage() {
       editors: '[]',
       folderId: folderIdForNew,
     })
-    navigate(`/docs/${id}`)
+    navigate(`/documents/${id}`)
   }, [canCreate, create, folderIdForNew, navigate, user])
 
   const handleDelete = useCallback(
@@ -308,8 +308,8 @@ export default function DocsListPage() {
 
   return (
     <div
-      className="docs-feature-scope flex min-h-full overflow-hidden"
-      style={{ backgroundColor: 'var(--docs-el-bg)', color: 'var(--docs-el-text)' }}
+      className="documents-feature-scope flex min-h-full overflow-hidden"
+      style={{ backgroundColor: 'var(--documents-el-bg)', color: 'var(--documents-el-text)' }}
     >
       {user ? (
         <LibrarySidebar
@@ -337,12 +337,12 @@ export default function DocsListPage() {
           <div className="mb-1 flex min-w-0 items-center justify-between gap-4">
             <h1
               className="min-w-0 text-3xl font-bold leading-tight tracking-tight sm:text-4xl"
-              style={{ color: 'var(--docs-el-text)' }}
+              style={{ color: 'var(--documents-el-text)' }}
             >
               {greetingForTime()}, {displayFirstName}
             </h1>
           </div>
-          <p className="mb-8 text-[13px] font-medium" style={{ color: 'var(--docs-el-muted)' }}>
+          <p className="mb-8 text-[13px] font-medium" style={{ color: 'var(--documents-el-muted)' }}>
             {ownedDocumentCount} {ownedDocumentCount === 1 ? 'document' : 'documents'} in your
             documents.
           </p>
@@ -351,7 +351,7 @@ export default function DocsListPage() {
             <div className="relative min-w-0 max-w-md flex-1">
               <Search
                 className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2"
-                style={{ color: 'var(--docs-el-muted)' }}
+                style={{ color: 'var(--documents-el-muted)' }}
                 strokeWidth={2}
                 aria-hidden
               />
@@ -362,18 +362,18 @@ export default function DocsListPage() {
                 placeholder="Search your library..."
                 className="h-auto w-full rounded-lg py-2 pl-10 pr-10 text-[13px] shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/25"
                 style={{
-                  backgroundColor: 'var(--docs-el-surface)',
+                  backgroundColor: 'var(--documents-el-surface)',
                   borderWidth: 1,
                   borderStyle: 'solid',
-                  borderColor: 'var(--docs-el-line)',
-                  color: 'var(--docs-el-text)',
+                  borderColor: 'var(--documents-el-line)',
+                  color: 'var(--documents-el-text)',
                 }}
               />
               {searchQuery ? (
                 <button
                   type="button"
                   className="absolute right-2 top-1/2 -translate-y-1/2 rounded-md px-2 py-1 text-[11px] font-medium"
-                  style={{ color: 'var(--docs-el-muted)' }}
+                  style={{ color: 'var(--documents-el-muted)' }}
                   onClick={() => setSearchQuery('')}
                 >
                   Clear
@@ -386,7 +386,7 @@ export default function DocsListPage() {
                   type="button"
                   onClick={() => void handleNewDocument()}
                   className={accentBtn}
-                  style={{ backgroundColor: 'var(--docs-el-accent)' }}
+                  style={{ backgroundColor: 'var(--documents-el-accent)' }}
                 >
                   <Plus className="h-4 w-4" strokeWidth={2.5} />
                   New Document
@@ -408,19 +408,19 @@ export default function DocsListPage() {
                     className="group flex min-w-0 items-center rounded-xl border p-3.5 text-left shadow-sm transition-all"
                     style={{
                       borderColor: selected
-                        ? 'color-mix(in srgb, var(--docs-el-accent) 50%, transparent)'
-                        : 'var(--docs-el-line)',
-                      backgroundColor: 'var(--docs-el-surface)',
+                        ? 'color-mix(in srgb, var(--documents-el-accent) 50%, transparent)'
+                        : 'var(--documents-el-line)',
+                      backgroundColor: 'var(--documents-el-surface)',
                       boxShadow: selected
-                        ? '0 0 0 2px color-mix(in srgb, var(--docs-el-accent) 15%, transparent)'
+                        ? '0 0 0 2px color-mix(in srgb, var(--documents-el-accent) 15%, transparent)'
                         : undefined,
                     }}
                   >
                     <div
-                      className="rounded-lg p-2 transition-all group-hover:bg-[color-mix(in_srgb,var(--docs-el-accent)_5%,transparent)]"
+                      className="rounded-lg p-2 transition-all group-hover:bg-[color-mix(in_srgb,var(--documents-el-accent)_5%,transparent)]"
                       style={{
-                        backgroundColor: 'var(--docs-el-bg)',
-                        color: 'var(--docs-el-muted)',
+                        backgroundColor: 'var(--documents-el-bg)',
+                        color: 'var(--documents-el-muted)',
                       }}
                     >
                       <Folder className="h-4 w-4" />
@@ -438,7 +438,7 @@ export default function DocsListPage() {
           <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
             <h2
               className="text-[11px] font-bold uppercase tracking-widest"
-              style={{ color: 'var(--docs-el-muted)' }}
+              style={{ color: 'var(--documents-el-muted)' }}
             >
               {listHeading}
             </h2>
@@ -449,9 +449,9 @@ export default function DocsListPage() {
                   onClick={() => setSortOpen(!sortOpen)}
                   className={ghostBtn}
                   style={{
-                    borderColor: 'var(--docs-el-line)',
-                    backgroundColor: 'var(--docs-el-surface)',
-                    color: 'var(--docs-el-muted)',
+                    borderColor: 'var(--documents-el-line)',
+                    backgroundColor: 'var(--documents-el-surface)',
+                    color: 'var(--documents-el-muted)',
                   }}
                 >
                   <SortAsc className="h-3.5 w-3.5" />
@@ -468,8 +468,8 @@ export default function DocsListPage() {
                     <div
                       className="absolute right-0 top-full z-50 mt-1 min-w-[168px] 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)',
                       }}
                     >
                       {SORT_OPTIONS.map((opt) => (
@@ -484,8 +484,8 @@ export default function DocsListPage() {
                           style={{
                             color:
                               sortBy === opt.value
-                                ? 'var(--docs-el-accent)'
-                                : 'var(--docs-el-text)',
+                                ? 'var(--documents-el-accent)'
+                                : 'var(--documents-el-text)',
                             fontWeight: sortBy === opt.value ? 600 : 400,
                           }}
                         >
@@ -502,8 +502,8 @@ export default function DocsListPage() {
                 style={{
                   borderWidth: 1,
                   borderStyle: 'solid',
-                  borderColor: 'var(--docs-el-line)',
-                  backgroundColor: 'color-mix(in srgb, var(--docs-el-text) 5%, transparent)',
+                  borderColor: 'var(--documents-el-line)',
+                  backgroundColor: 'color-mix(in srgb, var(--documents-el-text) 5%, transparent)',
                 }}
               >
                 <button
@@ -513,11 +513,11 @@ export default function DocsListPage() {
                   style={
                     viewMode === 'grid'
                       ? {
-                          backgroundColor: 'var(--docs-el-surface)',
-                          color: 'var(--docs-el-text)',
+                          backgroundColor: 'var(--documents-el-surface)',
+                          color: 'var(--documents-el-text)',
                           boxShadow: '0 1px 2px rgba(0,0,0,0.06)',
                         }
-                      : { color: 'var(--docs-el-muted)' }
+                      : { color: 'var(--documents-el-muted)' }
                   }
                   title="Grid view"
                 >
@@ -530,11 +530,11 @@ export default function DocsListPage() {
                   style={
                     viewMode === 'list'
                       ? {
-                          backgroundColor: 'var(--docs-el-surface)',
-                          color: 'var(--docs-el-text)',
+                          backgroundColor: 'var(--documents-el-surface)',
+                          color: 'var(--documents-el-text)',
                           boxShadow: '0 1px 2px rgba(0,0,0,0.06)',
                         }
-                      : { color: 'var(--docs-el-muted)' }
+                      : { color: 'var(--documents-el-muted)' }
                   }
                   title="List view"
                 >
@@ -549,8 +549,8 @@ export default function DocsListPage() {
               <div
                 className="h-10 w-10 animate-spin rounded-full border-2"
                 style={{
-                  borderColor: 'var(--docs-el-line)',
-                  borderTopColor: 'var(--docs-el-accent)',
+                  borderColor: 'var(--documents-el-line)',
+                  borderTopColor: 'var(--documents-el-accent)',
                 }}
               />
             </div>
@@ -559,22 +559,22 @@ export default function DocsListPage() {
               <div
                 className="mb-5 flex h-16 w-16 items-center justify-center rounded-2xl"
                 style={{
-                  backgroundColor: 'var(--docs-el-surface)',
+                  backgroundColor: 'var(--documents-el-surface)',
                   boxShadow:
-                    '0 0 0 1px var(--docs-el-line), 0 1px 2px color-mix(in srgb, var(--docs-el-text) 8%, transparent)',
+                    '0 0 0 1px var(--documents-el-line), 0 1px 2px color-mix(in srgb, var(--documents-el-text) 8%, transparent)',
                 }}
               >
                 <FileText
                   className="h-8 w-8"
                   strokeWidth={1.5}
-                  style={{ color: 'var(--docs-el-muted)' }}
+                  style={{ color: 'var(--documents-el-muted)' }}
                   aria-hidden
                 />
               </div>
-              <h3 className="mb-2 text-lg font-semibold" style={{ color: 'var(--docs-el-text)' }}>
+              <h3 className="mb-2 text-lg font-semibold" style={{ color: 'var(--documents-el-text)' }}>
                 {searchQuery ? 'No matches' : 'No documents yet'}
               </h3>
-              <p className="mb-6 max-w-sm text-sm" style={{ color: 'var(--docs-el-muted)' }}>
+              <p className="mb-6 max-w-sm text-sm" style={{ color: 'var(--documents-el-muted)' }}>
                 {canCreate && !searchQuery
                   ? 'Create your first document with New Document above'
                   : searchQuery
@@ -590,24 +590,24 @@ export default function DocsListPage() {
                   onClick={() => void handleNewDocument()}
                   className="group w-full cursor-pointer rounded-xl border-2 border-dashed p-4 text-left shadow-sm transition-all hover:shadow-md"
                   style={{
-                    borderColor: 'var(--docs-el-line)',
-                    backgroundColor: 'color-mix(in srgb, var(--docs-el-surface) 20%, transparent)',
+                    borderColor: 'var(--documents-el-line)',
+                    backgroundColor: 'color-mix(in srgb, var(--documents-el-surface) 20%, transparent)',
                   }}
                 >
                   <div
                     className="relative mb-4 aspect-[3/4] w-full overflow-hidden rounded-lg border shadow-sm"
                     style={{
-                      borderColor: 'var(--docs-el-line)',
-                      backgroundColor: 'var(--docs-el-bg)',
+                      borderColor: 'var(--documents-el-line)',
+                      backgroundColor: 'var(--documents-el-bg)',
                     }}
                   >
                     <div className="flex h-full w-full items-center justify-center">
                       <div
-                        className="flex h-10 w-10 items-center justify-center rounded-full ring-1 transition-colors group-hover:text-[color:var(--docs-el-accent)]"
+                        className="flex h-10 w-10 items-center justify-center rounded-full ring-1 transition-colors group-hover:text-[color:var(--documents-el-accent)]"
                         style={{
-                          backgroundColor: 'var(--docs-el-surface)',
-                          color: 'var(--docs-el-muted)',
-                          boxShadow: '0 0 0 1px var(--docs-el-line)',
+                          backgroundColor: 'var(--documents-el-surface)',
+                          color: 'var(--documents-el-muted)',
+                          boxShadow: '0 0 0 1px var(--documents-el-line)',
                         }}
                       >
                         <Plus className="h-5 w-5" strokeWidth={2.5} />
@@ -615,14 +615,14 @@ export default function DocsListPage() {
                     </div>
                   </div>
                   <h3
-                    className="truncate text-[13px] font-semibold leading-snug transition-colors group-hover:text-[color:var(--docs-el-accent)]"
-                    style={{ color: 'var(--docs-el-text)' }}
+                    className="truncate text-[13px] font-semibold leading-snug transition-colors group-hover:text-[color:var(--documents-el-accent)]"
+                    style={{ color: 'var(--documents-el-text)' }}
                   >
                     Blank doc
                   </h3>
                   <p
                     className="mt-0.5 text-[10px] font-medium"
-                    style={{ color: 'var(--docs-el-muted)' }}
+                    style={{ color: 'var(--documents-el-muted)' }}
                   >
                     Creates “{UNTITLED}” — rename in editor
                   </p>
@@ -642,22 +642,22 @@ export default function DocsListPage() {
                     tabIndex={0}
                     className="group relative cursor-pointer rounded-xl border p-4 shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-md"
                     style={{
-                      borderColor: 'var(--docs-el-line)',
-                      backgroundColor: 'var(--docs-el-surface)',
+                      borderColor: 'var(--documents-el-line)',
+                      backgroundColor: 'var(--documents-el-surface)',
                     }}
-                    onClick={() => navigate(`/docs/${doc.recordId}`)}
+                    onClick={() => navigate(`/documents/${doc.recordId}`)}
                     onKeyDown={(e) => {
                       if (e.key === 'Enter' || e.key === ' ') {
                         e.preventDefault()
-                        navigate(`/docs/${doc.recordId}`)
+                        navigate(`/documents/${doc.recordId}`)
                       }
                     }}
                   >
                     <div
                       className="relative mb-4 aspect-[3/4] w-full overflow-hidden rounded-lg border shadow-sm"
                       style={{
-                        borderColor: 'var(--docs-el-line)',
-                        backgroundColor: 'var(--docs-el-bg)',
+                        borderColor: 'var(--documents-el-line)',
+                        backgroundColor: 'var(--documents-el-bg)',
                       }}
                     >
                       <div className="flex h-full w-full items-center justify-center">
@@ -678,23 +678,23 @@ export default function DocsListPage() {
                             onClick={(e) => e.stopPropagation()}
                             className="mb-0.5 w-full rounded-md border px-2 py-1 text-[13px] font-semibold outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
                             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)',
                             }}
                             autoFocus
                           />
                         ) : (
                           <h3
-                            className="truncate text-[13px] font-semibold leading-snug transition-colors group-hover:text-[color:var(--docs-el-accent)]"
-                            style={{ color: 'var(--docs-el-text)' }}
+                            className="truncate text-[13px] font-semibold leading-snug transition-colors group-hover:text-[color:var(--documents-el-accent)]"
+                            style={{ color: 'var(--documents-el-text)' }}
                           >
                             {doc.data.title}
                           </h3>
                         )}
                         <p
                           className="mt-0.5 text-[10px] font-medium leading-4 tracking-tight"
-                          style={{ color: 'var(--docs-el-muted)' }}
+                          style={{ color: 'var(--documents-el-muted)' }}
                         >
                           {dateLabel}
                           {isOwner ? ' · You' : ''}
@@ -714,7 +714,7 @@ export default function DocsListPage() {
                               toggleFavorite(doc.recordId)
                             }}
                             className="rounded-lg p-1.5 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)' }}
                           >
                             <Star
                               className={`h-4 w-4 ${isFav ? 'fill-yellow-500 text-yellow-500' : ''}`}
@@ -732,7 +732,7 @@ export default function DocsListPage() {
                                 setMoveMenuId(null)
                               }}
                               className="rounded-lg p-1.5"
-                              style={{ color: 'var(--docs-el-muted)' }}
+                              style={{ color: 'var(--documents-el-muted)' }}
                             >
                               <MoreVertical className="h-4 w-4" />
                             </button>
@@ -750,9 +750,9 @@ export default function DocsListPage() {
                                 <div
                                   className="absolute right-0 top-full z-50 mt-1 min-w-[160px] rounded-lg border py-1 shadow-lg"
                                   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)',
                                   }}
                                   onClick={(e) => e.stopPropagation()}
                                 >
@@ -781,7 +781,7 @@ export default function DocsListPage() {
                                   {moveMenuId === doc.recordId ? (
                                     <div
                                       className="border-t px-2 py-1"
-                                      style={{ borderColor: 'var(--docs-el-line)' }}
+                                      style={{ borderColor: 'var(--documents-el-line)' }}
                                     >
                                       <button
                                         type="button"
@@ -831,16 +831,16 @@ export default function DocsListPage() {
             <div
               className="overflow-hidden rounded-xl border shadow-sm"
               style={{
-                borderColor: 'var(--docs-el-line)',
-                backgroundColor: 'var(--docs-el-surface)',
+                borderColor: 'var(--documents-el-line)',
+                backgroundColor: 'var(--documents-el-surface)',
               }}
             >
               <div
                 className="flex items-center gap-4 border-b px-4 py-2 text-[10px] font-bold uppercase tracking-widest"
                 style={{
-                  borderColor: 'var(--docs-el-line)',
-                  backgroundColor: 'color-mix(in srgb, var(--docs-el-text) 3%, transparent)',
-                  color: 'var(--docs-el-muted)',
+                  borderColor: 'var(--documents-el-line)',
+                  backgroundColor: 'color-mix(in srgb, var(--documents-el-text) 3%, transparent)',
+                  color: 'var(--documents-el-muted)',
                 }}
               >
                 <div className="min-w-0 flex-1">Name</div>
@@ -863,12 +863,12 @@ export default function DocsListPage() {
                     role="button"
                     tabIndex={0}
                     className="group flex cursor-pointer items-center gap-4 border-b px-4 py-3 transition-colors last:border-b-0 hover:bg-black/[0.02] dark:hover:bg-white/[0.03]"
-                    style={{ borderColor: 'var(--docs-el-line)' }}
-                    onClick={() => navigate(`/docs/${doc.recordId}`)}
+                    style={{ borderColor: 'var(--documents-el-line)' }}
+                    onClick={() => navigate(`/documents/${doc.recordId}`)}
                     onKeyDown={(e) => {
                       if (e.key === 'Enter' || e.key === ' ') {
                         e.preventDefault()
-                        navigate(`/docs/${doc.recordId}`)
+                        navigate(`/documents/${doc.recordId}`)
                       }
                     }}
                   >
@@ -876,8 +876,8 @@ export default function DocsListPage() {
                       <div
                         className="hidden h-14 w-11 shrink-0 overflow-hidden rounded-md border sm:block"
                         style={{
-                          borderColor: 'var(--docs-el-line)',
-                          backgroundColor: 'var(--docs-el-bg)',
+                          borderColor: 'var(--documents-el-line)',
+                          backgroundColor: 'var(--documents-el-bg)',
                         }}
                       >
                         <div className="flex h-full w-full items-center justify-center">
@@ -886,14 +886,14 @@ export default function DocsListPage() {
                       </div>
                       <div className="min-w-0 flex-1">
                         <h4
-                          className="line-clamp-2 text-[13px] font-semibold leading-snug transition-colors group-hover:text-[color:var(--docs-el-accent)]"
-                          style={{ color: 'var(--docs-el-text)' }}
+                          className="line-clamp-2 text-[13px] font-semibold leading-snug transition-colors group-hover:text-[color:var(--documents-el-accent)]"
+                          style={{ color: 'var(--documents-el-text)' }}
                         >
                           {doc.data.title}
                         </h4>
                         <p
                           className="mt-0.5 text-[10px] font-medium md:hidden"
-                          style={{ color: 'var(--docs-el-muted)' }}
+                          style={{ color: 'var(--documents-el-muted)' }}
                         >
                           {dateLabel}
                           {isOwner ? ' · You' : ' · Shared with you'}
@@ -903,13 +903,13 @@ export default function DocsListPage() {
                     </div>
                     <div
                       className="hidden w-28 shrink-0 truncate text-[12px] md:block"
-                      style={{ color: 'var(--docs-el-muted)' }}
+                      style={{ color: 'var(--documents-el-muted)' }}
                     >
                       {folderLabel}
                     </div>
                     <div
                       className="hidden w-36 shrink-0 text-right text-[12px] md:block"
-                      style={{ color: 'var(--docs-el-muted)' }}
+                      style={{ color: 'var(--documents-el-muted)' }}
                     >
                       {dateLabel}
                     </div>
@@ -923,7 +923,7 @@ export default function DocsListPage() {
                               toggleFavorite(doc.recordId)
                             }}
                             className="rounded-lg p-1.5"
-                            style={{ color: 'var(--docs-el-muted)' }}
+                            style={{ color: 'var(--documents-el-muted)' }}
                           >
                             <Star
                               className={`h-4 w-4 ${isFav ? 'fill-yellow-500 text-yellow-500' : ''}`}
@@ -936,7 +936,7 @@ export default function DocsListPage() {
                               void handleDelete(doc.recordId)
                             }}
                             className="rounded-lg p-1.5 opacity-0 transition-opacity group-hover:opacity-100"
-                            style={{ color: 'var(--docs-el-muted)' }}
+                            style={{ color: 'var(--documents-el-muted)' }}
                           >
                             <Trash2 className="h-4 w-4" />
                           </button>

package/features/{docs/src/DocsOutlinePanel.tsx → documents/src/DocumentsOutlinePanel.tsx}

@@ -6,7 +6,7 @@
  * here. Clicking an entry jumps the caret to that node's position.
  */
 
-/** Matches docs2 outline width + toggle positioning beside the panel */
+/** Matches documents2 outline width + toggle positioning beside the panel */
 export const DOCUMENT_OUTLINE_WIDTH_PX = 220
 
 export interface OutlineEntry {
@@ -16,30 +16,30 @@ export interface OutlineEntry {
   pos: number
 }
 
-export interface DocsOutlinePanelProps {
+export interface DocumentsOutlinePanelProps {
   entries: OutlineEntry[]
   onJumpTo: (pos: number) => void
 }
 
-export function DocsOutlinePanel({ entries, onJumpTo }: DocsOutlinePanelProps) {
+export function DocumentsOutlinePanel({ entries, onJumpTo }: DocumentsOutlinePanelProps) {
   return (
     <aside
       data-testid="document-outline-panel"
       className="absolute bottom-0 left-0 top-0 z-[34] flex flex-col overflow-hidden border-r print:hidden"
       style={{
         width: DOCUMENT_OUTLINE_WIDTH_PX,
-        borderColor: 'var(--docs-el-line)',
-        backgroundColor: 'color-mix(in srgb, var(--docs-el-surface) 95%, transparent)',
+        borderColor: 'var(--documents-el-line)',
+        backgroundColor: 'color-mix(in srgb, var(--documents-el-surface) 95%, transparent)',
       }}
     >
-      <div className="shrink-0 border-b px-3 py-3" style={{ borderColor: 'var(--docs-el-line)' }}>
-        <h2 className="truncate pl-1 text-left text-sm font-normal leading-5 text-[color:var(--docs-el-muted)]">
+      <div className="shrink-0 border-b px-3 py-3" style={{ borderColor: 'var(--documents-el-line)' }}>
+        <h2 className="truncate pl-1 text-left text-sm font-normal leading-5 text-[color:var(--documents-el-muted)]">
           Document outline
         </h2>
       </div>
       <nav className="flex-1 overflow-y-auto px-2 py-2">
         {entries.length === 0 ? (
-          <p className="px-2 py-4 text-[12px] leading-snug text-[color:var(--docs-el-muted)]">
+          <p className="px-2 py-4 text-[12px] leading-snug text-[color:var(--documents-el-muted)]">
             Headings you add to the document appear here. Use the H1 / H2 / H3 buttons in the
             toolbar.
           </p>
@@ -53,7 +53,7 @@ export function DocsOutlinePanel({ entries, onJumpTo }: DocsOutlinePanelProps) {
                   className="w-full rounded-md px-2 py-1.5 text-left text-[12px] leading-snug transition-colors hover:bg-black/[0.05] dark:hover:bg-white/[0.06]"
                   style={{
                     paddingLeft: 8 + (e.level - 1) * 10,
-                    color: 'var(--docs-el-text)',
+                    color: 'var(--documents-el-text)',
                   }}
                 >
                   {e.title}