deepspace 0.19.0 → 0.19.1

package/features/admin-page/src/AdminPage.tsx

@@ -118,11 +118,11 @@ export default function AdminPage() {
 interface UsersPanelProps {
   users: Array<{
     id: string
-    email: string
+    email?: string
     name: string
     imageUrl?: string
     role: string
-    lastSeenAt: string
+    lastSeenAt?: string
   }>
   currentUserId?: string
   onSetRole: (userId: string, role: string) => void
@@ -132,7 +132,7 @@ function UsersPanel({ users, currentUserId, onSetRole }: UsersPanelProps) {
   // Sort users by last seen
   const sortedUsers = useMemo(() => {
     return [...users].sort((a, b) =>
-      new Date(b.lastSeenAt).getTime() - new Date(a.lastSeenAt).getTime()
+      new Date(b.lastSeenAt ?? '').getTime() - new Date(a.lastSeenAt ?? '').getTime()
     )
   }, [users])
 
@@ -163,7 +163,7 @@ function UsersPanel({ users, currentUserId, onSetRole }: UsersPanelProps) {
 
                 <div className="flex items-center gap-3">
                   <p className="text-xs text-muted-foreground">
-                    Last seen: {new Date(user.lastSeenAt).toLocaleDateString()}
+                    Last seen: {user.lastSeenAt ? new Date(user.lastSeenAt).toLocaleDateString() : '—'}
                   </p>
 
                   <div className="flex items-center gap-2">

package/features/documents/feature.json

@@ -86,7 +86,8 @@
     "@tiptap/extension-task-item": "^3.22.0"
   },
   "instructions": [
-    "Run `npm install` (or your package manager) to install the Tiptap dependencies that were just added to package.json — the editor imports @tiptap/react and friends, so the dev server will fail to resolve them otherwise."
+    "Run `npm install` (or your package manager) to install the Tiptap dependencies that were just added to package.json — the editor imports @tiptap/react and friends, so the dev server will fail to resolve them otherwise.",
+    "Before sharing a document by email, ask that person to sign in to the deployed app once. The privacy-preserving invite lookup uses the app-local users collection, not a global user directory."
   ],
   "patterns": []
 }

package/features/documents/src/DocumentsEditorPage.tsx

@@ -17,10 +17,14 @@ import { type Editor, useEditorState } from '@tiptap/react'
 import { useDocEditor } from './editor/useDocEditor'
 import { DocEditorSurface, PAGE_HEIGHT_PX, PAGE_WIDTH_PX } from './editor/DocEditorSurface'
 import { DocumentsTiptapToolbar } from './editor/DocumentsTiptapToolbar'
-import { DocumentsOutlinePanel, DOCUMENT_OUTLINE_WIDTH_PX, type OutlineEntry } from './DocumentsOutlinePanel'
+import {
+  DocumentsOutlinePanel,
+  DOCUMENT_OUTLINE_WIDTH_PX,
+  type OutlineEntry,
+} from './DocumentsOutlinePanel'
 import { DocumentsPresence } from './DocumentsPresence'
 import { InviteDialog } from './InviteDialog'
-import type { DocumentsDocumentFields } from './documents-library-types'
+import { recordsReadyForMutation, type DocumentsDocumentFields } from './documents-library-types'
 import {
   useDocumentsEditorPresence,
   useDocumentsPresenceAccess,
@@ -175,7 +179,10 @@ function AccessChangedOverlay({
             <AlertTriangle className="h-4 w-4" strokeWidth={2} />
           </span>
           <div className="min-w-0 flex-1">
-            <h2 id="documents-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(--documents-el-muted)' }}>
@@ -279,7 +286,8 @@ export default function DocumentsEditorPage() {
     [documents, docId],
   )
 
-  const { put } = useMutations<DocumentsDocumentFields>('documents')
+  const { put, ready: documentsMutationsReady } = useMutations<DocumentsDocumentFields>('documents')
+  const documentWritesReady = recordsReadyForMutation(status, documentsMutationsReady)
 
   // The text helper remains available to consumers of useYjsRoom; this editor
   // binds Tiptap directly to Y.XmlFragment('default') on the returned document.
@@ -397,10 +405,10 @@ export default function DocumentsEditorPage() {
   const docTitle = selectedDoc?.data.title?.trim() || 'Untitled Document'
   const handleTitleSave = useCallback(
     async (next: string) => {
-      if (!selectedDoc) return
+      if (!documentWritesReady || !selectedDoc) return
       await put(selectedDoc.recordId, { ...selectedDoc.data, title: next }).catch(() => {})
     },
-    [put, selectedDoc],
+    [documentWritesReady, put, selectedDoc],
   )
 
   /**
@@ -450,7 +458,11 @@ export default function DocumentsEditorPage() {
           <ArrowLeft className="h-4 w-4" strokeWidth={2} />
         </button>
 
-        <InlineTitle title={docTitle} canEdit={isOwner ?? false} onSave={handleTitleSave} />
+        <InlineTitle
+          title={docTitle}
+          canEdit={Boolean(isOwner && documentWritesReady)}
+          onSave={handleTitleSave}
+        />
 
         <DocumentsPresence participants={presenceParticipants} typingNames={typingNames} />
 
@@ -473,7 +485,10 @@ export default function DocumentsEditorPage() {
           ) : 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(--documents-el-line)', color: 'var(--documents-el-muted)' }}
+              style={{
+                borderColor: 'var(--documents-el-line)',
+                color: 'var(--documents-el-muted)',
+              }}
             >
               {effectiveRole === 'editor' ? 'Shared editor' : 'Shared viewer'}
             </span>
@@ -639,7 +654,10 @@ export function ErrorBoundary() {
     >
       <div
         className="w-full max-w-md rounded-xl border p-6 shadow-md"
-        style={{ borderColor: 'var(--documents-el-line)', backgroundColor: 'var(--documents-el-surface)' }}
+        style={{
+          borderColor: 'var(--documents-el-line)',
+          backgroundColor: 'var(--documents-el-surface)',
+        }}
       >
         <div className="mb-3 flex items-center justify-center">
           <span
@@ -654,7 +672,10 @@ 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(--documents-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

package/features/documents/src/DocumentsListPage.tsx

@@ -27,6 +27,7 @@ import {
 import { LibrarySidebar, readSidebarCollapsed, writeSidebarCollapsed } from './LibrarySidebar'
 import {
   parseDocumentsIdList,
+  recordsReadyForMutation,
   type DocFolderFields,
   type DocumentsDocumentFields,
   type LibraryNavSelection,
@@ -81,7 +82,7 @@ export default function DocumentsListPage() {
   const { user } = useUser()
   const navigate = useNavigate()
   const userRole = (user?.role ?? ROLES.VIEWER) as Role
-  const canCreate = userRole === ROLES.MEMBER || userRole === ROLES.ADMIN
+  const roleCanCreate = userRole === ROLES.MEMBER || userRole === ROLES.ADMIN
 
   const [searchQuery, setSearchQuery] = useState('')
   const [sortBy, setSortBy] = useState<SortOption>('lastEdited')
@@ -101,17 +102,31 @@ export default function DocumentsListPage() {
     orderBy: 'createdAt',
     orderDir: 'desc',
   })
-  const { create, remove, put } = useMutations<DocumentsDocumentFields>('documents')
-
-  const { records: folderRecords } = useQuery<DocFolderFields>('doc_folders', {
-    orderBy: 'createdAt',
-    orderDir: 'asc',
-  })
+  const {
+    createConfirmed,
+    remove,
+    put,
+    ready: documentsMutationsReady,
+  } = useMutations<DocumentsDocumentFields>('documents')
+
+  const { records: folderRecords, status: foldersStatus } = useQuery<DocFolderFields>(
+    'doc_folders',
+    {
+      orderBy: 'createdAt',
+      orderDir: 'asc',
+    },
+  )
   const {
     create: createFolder,
     put: putFolder,
     remove: removeFolder,
+    ready: folderMutationsReady,
   } = useMutations<DocFolderFields>('doc_folders')
+  const documentWritesReady = recordsReadyForMutation(status, documentsMutationsReady)
+  const folderWritesReady = recordsReadyForMutation(foldersStatus, folderMutationsReady)
+  const canCreate = roleCanCreate && documentWritesReady
+  const canManageFolders = canCreate && folderWritesReady
+  const canMoveDocuments = canCreate && foldersStatus === 'ready'
 
   const myFolders = useMemo(
     () => (folderRecords ?? []).filter((f) => f.data.ownerId === user?.id),
@@ -218,7 +233,7 @@ export default function DocumentsListPage() {
 
   const handleNewDocument = useCallback(async () => {
     if (!user || !canCreate) return
-    const id = await create({
+    const id = await createConfirmed({
       title: UNTITLED,
       ownerId: user.id,
       collaborators: '[]',
@@ -226,36 +241,42 @@ export default function DocumentsListPage() {
       folderId: folderIdForNew,
     })
     navigate(`/documents/${id}`)
-  }, [canCreate, create, folderIdForNew, navigate, user])
+  }, [canCreate, createConfirmed, folderIdForNew, navigate, user])
 
   const handleDelete = useCallback(
     async (docId: string) => {
+      if (!canCreate) return
       if (confirm('Delete this document?')) await remove(docId)
     },
-    [remove],
+    [canCreate, remove],
   )
 
   const handleRenameCommit = useCallback(
     async (docId: string) => {
+      if (!canCreate) {
+        setRenamingId(null)
+        return
+      }
       const rec = documents.find((d) => d.recordId === docId)
       const t = renameValue.trim()
       setRenamingId(null)
       if (!rec || !t || t === rec.data.title) return
       await put(docId, { ...rec.data, title: t }).catch(() => {})
     },
-    [documents, put, renameValue],
+    [canCreate, documents, put, renameValue],
   )
 
   const handleCreateFolder = useCallback(
     async (name: string) => {
-      if (!user) return
+      if (!user || !canManageFolders) return
       await createFolder({ name, ownerId: user.id })
     },
-    [createFolder, user],
+    [canManageFolders, createFolder, user],
   )
 
   const handleDeleteFolder = useCallback(
     async (folderId: string) => {
+      if (!canManageFolders) return
       const owned = (documents ?? []).filter(
         (d) => d.data.ownerId === user?.id && (d.data.folderId ?? '') === folderId,
       )
@@ -266,7 +287,7 @@ export default function DocumentsListPage() {
         nav.kind === 'folder' && nav.folderId === folderId ? { kind: 'all' } : nav,
       )
     },
-    [documents, put, removeFolder, user?.id],
+    [canManageFolders, documents, put, removeFolder, user?.id],
   )
 
   const commitRenameFolderRef = useRef<() => Promise<void>>(async () => {})
@@ -274,22 +295,23 @@ export default function DocumentsListPage() {
     const id = folderRenamingId
     const trimmed = folderRenameValue.trim()
     setFolderRenamingId(null)
-    if (!id || !trimmed) return
+    if (!canManageFolders || !id || !trimmed) return
     const folder = sortedFolders.find((f) => f.recordId === id)
     if (!folder || trimmed === (folder.data.name ?? '').trim()) return
     await putFolder(id, { ...folder.data, name: trimmed }).catch(() => {})
-  }, [folderRenameValue, folderRenamingId, putFolder, sortedFolders])
+  }, [canManageFolders, folderRenameValue, folderRenamingId, putFolder, sortedFolders])
 
   commitRenameFolderRef.current = commitRenameFolder
 
   const handleMoveDoc = useCallback(
     async (docId: string, folderId: string) => {
+      if (!canMoveDocuments) return
       const rec = documents.find((d) => d.recordId === docId)
       if (!rec) return
       await put(docId, { ...rec.data, folderId })
       setMoveMenuId(null)
     },
-    [documents, put],
+    [canMoveDocuments, documents, put],
   )
 
   const isLoading = status === 'loading'
@@ -316,6 +338,7 @@ export default function DocumentsListPage() {
           selection={libraryNav}
           onSelect={setLibraryNav}
           folders={myFolders}
+          canManageFolders={canManageFolders}
           collapsed={sidebarCollapsed}
           onToggleCollapsed={toggleSidebar}
           onCreateFolder={handleCreateFolder}
@@ -342,7 +365,10 @@ export default function DocumentsListPage() {
               {greetingForTime()}, {displayFirstName}
             </h1>
           </div>
-          <p className="mb-8 text-[13px] font-medium" style={{ color: 'var(--documents-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>
@@ -571,7 +597,10 @@ export default function DocumentsListPage() {
                   aria-hidden
                 />
               </div>
-              <h3 className="mb-2 text-lg font-semibold" style={{ color: 'var(--documents-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(--documents-el-muted)' }}>
@@ -591,7 +620,8 @@ export default function DocumentsListPage() {
                   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(--documents-el-line)',
-                    backgroundColor: 'color-mix(in srgb, var(--documents-el-surface) 20%, transparent)',
+                    backgroundColor:
+                      'color-mix(in srgb, var(--documents-el-surface) 20%, transparent)',
                   }}
                 >
                   <div
@@ -668,6 +698,7 @@ export default function DocumentsListPage() {
                       <div className="min-w-0 flex-1">
                         {renamingId === doc.recordId ? (
                           <input
+                            disabled={!canCreate}
                             value={renameValue}
                             onChange={(e) => setRenameValue(e.target.value)}
                             onBlur={() => void handleRenameCommit(doc.recordId)}
@@ -676,7 +707,7 @@ export default function DocumentsListPage() {
                               if (e.key === 'Escape') setRenamingId(null)
                             }}
                             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"
+                            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 disabled:cursor-not-allowed disabled:opacity-50"
                             style={{
                               borderColor: 'var(--documents-el-line)',
                               backgroundColor: 'var(--documents-el-bg)',
@@ -724,6 +755,7 @@ export default function DocumentsListPage() {
                             <button
                               type="button"
                               title="More"
+                              disabled={!canCreate}
                               onClick={(e) => {
                                 e.stopPropagation()
                                 setActionsMenuId((id) =>
@@ -731,12 +763,12 @@ export default function DocumentsListPage() {
                                 )
                                 setMoveMenuId(null)
                               }}
-                              className="rounded-lg p-1.5"
+                              className="rounded-lg p-1.5 disabled:cursor-not-allowed disabled:opacity-40"
                               style={{ color: 'var(--documents-el-muted)' }}
                             >
                               <MoreVertical className="h-4 w-4" />
                             </button>
-                            {actionsMenuId === doc.recordId ? (
+                            {canCreate && actionsMenuId === doc.recordId ? (
                               <>
                                 <button
                                   type="button"
@@ -786,7 +818,7 @@ export default function DocumentsListPage() {
                                       <button
                                         type="button"
                                         className="block w-full rounded px-2 py-1 text-left text-xs hover:bg-black/[0.04]"
-                                        disabled={fid === ''}
+                                        disabled={!canMoveDocuments || fid === ''}
                                         onClick={() => void handleMoveDoc(doc.recordId, '')}
                                       >
                                         Uncategorized
@@ -795,7 +827,7 @@ export default function DocumentsListPage() {
                                         <button
                                           key={f.recordId}
                                           type="button"
-                                          disabled={fid === f.recordId}
+                                          disabled={!canMoveDocuments || fid === f.recordId}
                                           className="block w-full rounded px-2 py-1 text-left text-xs hover:bg-black/[0.04] disabled:opacity-40"
                                           onClick={() =>
                                             void handleMoveDoc(doc.recordId, f.recordId)
@@ -931,11 +963,12 @@ export default function DocumentsListPage() {
                           </button>
                           <button
                             type="button"
+                            disabled={!canCreate}
                             onClick={(e) => {
                               e.stopPropagation()
                               void handleDelete(doc.recordId)
                             }}
-                            className="rounded-lg p-1.5 opacity-0 transition-opacity group-hover:opacity-100"
+                            className="rounded-lg p-1.5 opacity-0 transition-opacity group-hover:opacity-100 disabled:cursor-not-allowed disabled:opacity-0"
                             style={{ color: 'var(--documents-el-muted)' }}
                           >
                             <Trash2 className="h-4 w-4" />

package/features/documents/src/InviteDialog.tsx

@@ -3,7 +3,11 @@ import type { RecordData } from 'deepspace'
 import { useMutations, useQuery, useUser } from 'deepspace'
 import { Mail, ShieldCheck, UserMinus, Users } from 'lucide-react'
 import { Modal, useToast } from '@/components/ui'
-import { parseDocumentsIdList, type DocumentsDocumentFields, type InviteAclDiff } from './documents-library-types'
+import {
+  parseDocumentsIdList,
+  type DocumentsDocumentFields,
+  type InviteAclDiff,
+} from './documents-library-types'
 
 interface UserFields {
   email?: string
@@ -42,12 +46,14 @@ function initialsFor(name: string): string {
 
 export function InviteDialog({ open, onOpenChange, doc, isOwner, onAclChange }: InviteDialogProps) {
   const { user } = useUser()
-  const { records: users } = useQuery<UserFields>('users')
-  const { put } = useMutations<DocumentsDocumentFields>('documents')
+  const { records: users, status: usersStatus } = useQuery<UserFields>('users')
+  const { putConfirmed, ready: documentsMutationsReady } =
+    useMutations<DocumentsDocumentFields>('documents')
   const toast = useToast()
   const [email, setEmail] = useState('')
   const [role, setRole] = useState<InviteRole>('editor')
   const [saving, setSaving] = useState(false)
+  const ready = usersStatus === 'ready' && documentsMutationsReady
 
   const collaborators = useMemo(
     () => parseDocumentsIdList(doc.data.collaborators),
@@ -70,7 +76,11 @@ export function InviteDialog({ open, onOpenChange, doc, isOwner, onAclChange }:
 
   if (!isOwner) return null
 
-  const saveAccess = async (nextCollaborators: string[], nextEditors: string[]) => {
+  const saveAccess = async (
+    nextCollaborators: string[],
+    nextEditors: string[],
+  ): Promise<boolean> => {
+    if (!ready) return false
     const prevCollaborators = parseDocumentsIdList(doc.data.collaborators)
     const prevEditors = parseDocumentsIdList(doc.data.editors)
     const nextCollabList = uniqueIds(nextCollaborators)
@@ -80,7 +90,7 @@ export function InviteDialog({ open, onOpenChange, doc, isOwner, onAclChange }:
 
     setSaving(true)
     try {
-      await put(doc.recordId, {
+      await putConfirmed(doc.recordId, {
         ...doc.data,
         collaborators: JSON.stringify(nextCollabList),
         editors: JSON.stringify(nextEditorList),
@@ -98,6 +108,13 @@ export function InviteDialog({ open, onOpenChange, doc, isOwner, onAclChange }:
           onAclChange({ removedUserIds, demotedUserIds, promotedUserIds })
         }
       }
+      return true
+    } catch {
+      toast.error(
+        'Access not saved',
+        'DeepSpace did not confirm the change. Reconnect and try again.',
+      )
+      return false
     } finally {
       setSaving(false)
     }
@@ -109,7 +126,10 @@ export function InviteDialog({ open, onOpenChange, doc, isOwner, onAclChange }:
 
     const target = users.find((u) => u.data.email?.trim().toLowerCase() === normalized)
     if (!target) {
-      toast.error('User not found', 'No DeepSpace user with that email has used this app yet.')
+      toast.error(
+        'User not found',
+        'Ask them to sign in to this app once, then invite the same email again.',
+      )
       return
     }
     if (target.recordId === doc.data.ownerId || target.recordId === user?.id) {
@@ -123,7 +143,7 @@ export function InviteDialog({ open, onOpenChange, doc, isOwner, onAclChange }:
 
     const nextCollaborators = [...collaborators, target.recordId]
     const nextEditors = role === 'editor' ? [...editors, target.recordId] : editors
-    await saveAccess(nextCollaborators, nextEditors)
+    if (!(await saveAccess(nextCollaborators, nextEditors))) return
     setEmail('')
     toast.success('Invite added', `${target.data.email ?? normalized} now has ${role} access.`)
   }
@@ -151,7 +171,12 @@ export function InviteDialog({ open, onOpenChange, doc, isOwner, onAclChange }:
     'Owner'
 
   return (
-    <Modal open={open} onClose={() => onOpenChange(false)} size="lg" className="documents-feature-scope">
+    <Modal
+      open={open}
+      onClose={() => onOpenChange(false)}
+      size="lg"
+      className="documents-feature-scope"
+    >
       <Modal.Header>
         <Modal.Title>Share document</Modal.Title>
         <Modal.Description>
@@ -174,6 +199,7 @@ export function InviteDialog({ open, onOpenChange, doc, isOwner, onAclChange }:
                 style={{ color: 'var(--documents-el-muted)' }}
               />
               <input
+                disabled={!ready || saving}
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 onKeyDown={(e) => {
@@ -181,7 +207,10 @@ export function InviteDialog({ open, onOpenChange, doc, isOwner, onAclChange }:
                 }}
                 placeholder="person@gmail.com"
                 className="h-10 w-full rounded-lg border bg-transparent pl-9 pr-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
-                style={{ borderColor: 'var(--documents-el-line)', color: 'var(--documents-el-text)' }}
+                style={{
+                  borderColor: 'var(--documents-el-line)',
+                  color: 'var(--documents-el-text)',
+                }}
               />
             </div>
             <select
@@ -196,7 +225,7 @@ export function InviteDialog({ open, onOpenChange, doc, isOwner, onAclChange }:
             <button
               type="button"
               onClick={() => void addInvite()}
-              disabled={saving || !email.trim()}
+              disabled={!ready || saving || !email.trim()}
               className="h-10 rounded-lg px-4 text-sm font-semibold text-white transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
               style={{ backgroundColor: 'var(--documents-el-accent)' }}
             >
@@ -253,7 +282,10 @@ export function InviteDialog({ open, onOpenChange, doc, isOwner, onAclChange }:
                   )}
                   <div className="min-w-0 flex-1">
                     <div className="truncate text-sm font-medium">{name}</div>
-                    <div className="truncate text-xs" style={{ color: 'var(--documents-el-muted)' }}>
+                    <div
+                      className="truncate text-xs"
+                      style={{ color: 'var(--documents-el-muted)' }}
+                    >
                       {u.data.email ?? 'No email'}
                     </div>
                   </div>
@@ -262,9 +294,12 @@ export function InviteDialog({ open, onOpenChange, doc, isOwner, onAclChange }:
                     onChange={(e) =>
                       void setCollaboratorRole(u.recordId, e.target.value as InviteRole)
                     }
-                    disabled={saving}
+                    disabled={!ready || saving}
                     className="h-8 rounded-lg border bg-transparent px-2 text-xs font-medium outline-none"
-                    style={{ borderColor: 'var(--documents-el-line)', color: 'var(--documents-el-text)' }}
+                    style={{
+                      borderColor: 'var(--documents-el-line)',
+                      color: 'var(--documents-el-text)',
+                    }}
                   >
                     <option value="editor">Editor</option>
                     <option value="viewer">Viewer</option>
@@ -272,7 +307,7 @@ export function InviteDialog({ open, onOpenChange, doc, isOwner, onAclChange }:
                   <button
                     type="button"
                     onClick={() => void removeCollaborator(u.recordId)}
-                    disabled={saving}
+                    disabled={!ready || saving}
                     className="rounded-lg p-1.5 text-red-600 transition-colors hover:bg-red-500/10 disabled:opacity-50"
                     title="Remove access"
                   >