deepspace 0.3.9 → 0.3.11

package/features/docs/src/DocsOutlinePanel.tsx

@@ -0,0 +1,68 @@
+/**
+ * Outline panel — renders a list of heading entries provided by the caller.
+ *
+ * In the Tiptap editor, headings are real ProseMirror nodes, so the page
+ * walks `editor.state.doc` once on every doc update and passes the result
+ * here. Clicking an entry jumps the caret to that node's position.
+ */
+
+/** Matches docs2 outline width + toggle positioning beside the panel */
+export const DOCUMENT_OUTLINE_WIDTH_PX = 220
+
+export interface OutlineEntry {
+  level: number
+  title: string
+  /** ProseMirror position to focus when the entry is clicked. */
+  pos: number
+}
+
+export interface DocsOutlinePanelProps {
+  entries: OutlineEntry[]
+  onJumpTo: (pos: number) => void
+}
+
+export function DocsOutlinePanel({ entries, onJumpTo }: DocsOutlinePanelProps) {
+  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)',
+      }}
+    >
+      <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)]">
+          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)]">
+            Headings you add to the document appear here. Use the H1 / H2 / H3 buttons in the
+            toolbar.
+          </p>
+        ) : (
+          <ul className="space-y-0.5">
+            {entries.map((e, i) => (
+              <li key={`${e.pos}-${i}`}>
+                <button
+                  type="button"
+                  onClick={() => onJumpTo(e.pos)}
+                  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)',
+                  }}
+                >
+                  {e.title}
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </nav>
+    </aside>
+  )
+}

package/features/docs/src/DocsPresence.tsx

@@ -0,0 +1,138 @@
+import { useMemo, useState } from 'react'
+
+export interface DocsPresenceParticipant {
+  clientId: number
+  userId: string
+  name: string
+  email?: string
+  imageUrl?: string
+  mode: 'edit' | 'view'
+  typing?: boolean
+  lastTypedAt?: number
+  isSelf?: boolean
+}
+
+export interface DocsPresenceProps {
+  participants: DocsPresenceParticipant[]
+  typingNames: string[]
+}
+
+const MAX_VISIBLE_AVATARS = 3
+
+/** Stable React keys (Yjs clientId is not used for PresenceRoom peers). */
+function participantKey(p: DocsPresenceParticipant) {
+  return `${p.userId}:${p.isSelf ? 'self' : 'peer'}`
+}
+
+function initialsFor(name: string) {
+  const parts = name.trim().split(/\s+/).filter(Boolean)
+  if (parts.length >= 2) return `${parts[0][0]}${parts[1][0]}`.toUpperCase()
+  return (parts[0]?.slice(0, 2) || '?').toUpperCase()
+}
+
+function typingText(names: string[]) {
+  if (names.length === 0) return null
+  if (names.length === 1) return `${names[0]} is typing...`
+  if (names.length === 2) return `${names[0]} and ${names[1]} are typing...`
+  return `${names[0]}, ${names[1]}, and ${names.length - 2} more are typing...`
+}
+
+function ParticipantAvatar({ participant, index }: { participant: DocsPresenceParticipant; index: number }) {
+  const label = `${participant.name}${participant.isSelf ? ' (you)' : ''} - ${
+    participant.mode === 'edit' ? 'Editing' : 'Viewing'
+  }`
+
+  return (
+    <span
+      className="docs-presence-avatar"
+      style={{ zIndex: 20 - index }}
+      title={label}
+      aria-label={label}
+    >
+      {participant.imageUrl ? (
+        <img src={participant.imageUrl} alt="" className="h-full w-full object-cover" />
+      ) : (
+        <span aria-hidden>{initialsFor(participant.name)}</span>
+      )}
+    </span>
+  )
+}
+
+export function DocsPresence({ participants, typingNames }: DocsPresenceProps) {
+  const [open, setOpen] = useState(false)
+  const visibleParticipants = participants.slice(0, MAX_VISIBLE_AVATARS)
+  const hiddenCount = Math.max(0, participants.length - MAX_VISIBLE_AVATARS)
+  const message = typingText(typingNames)
+
+  const heading = useMemo(() => {
+    const count = participants.length
+    if (count === 0) return 'No active viewers'
+    if (count === 1) return '1 person here'
+    return `${count} people here`
+  }, [participants.length])
+
+  return (
+    <div className="relative flex shrink-0 items-center gap-2" data-testid="docs-presence">
+      {message ? (
+        <span
+          className="hidden max-w-[220px] truncate text-xs sm:inline"
+          style={{ color: 'var(--docs-el-muted)' }}
+          data-testid="docs-typing-indicator"
+        >
+          {message}
+        </span>
+      ) : null}
+
+      <div className="flex items-center -space-x-2" aria-label={heading}>
+        {visibleParticipants.map((participant, index) => (
+          <ParticipantAvatar key={participantKey(participant)} participant={participant} index={index} />
+        ))}
+        {hiddenCount > 0 ? (
+          <button
+            type="button"
+            className="docs-presence-more"
+            onClick={() => setOpen((value) => !value)}
+            aria-expanded={open}
+            aria-label={`View ${hiddenCount} more collaborator${hiddenCount === 1 ? '' : 's'}`}
+            data-testid="docs-presence-more"
+          >
+            +{hiddenCount}
+          </button>
+        ) : null}
+      </div>
+
+      {open ? (
+        <div
+          className="absolute right-0 top-9 z-50 w-64 rounded-xl border p-2 shadow-xl"
+          style={{
+            borderColor: 'var(--docs-el-line)',
+            backgroundColor: 'var(--docs-el-surface)',
+            color: 'var(--docs-el-text)',
+          }}
+          data-testid="docs-presence-popover"
+        >
+          <p className="px-2 pb-2 text-xs font-medium" style={{ color: 'var(--docs-el-muted)' }}>
+            {heading}
+          </p>
+          <ul className="max-h-72 overflow-y-auto">
+            {participants.map((participant) => (
+              <li key={participantKey(participant)} className="flex items-center gap-2 rounded-lg px-2 py-2">
+                <ParticipantAvatar participant={participant} index={0} />
+                <div className="min-w-0 flex-1">
+                  <p className="truncate text-sm font-medium">
+                    {participant.name}
+                    {participant.isSelf ? ' (you)' : ''}
+                  </p>
+                  <p className="truncate text-xs" style={{ color: 'var(--docs-el-muted)' }}>
+                    {participant.mode === 'edit' ? 'Editing' : 'Viewing'}
+                    {participant.typing ? ' - typing' : ''}
+                  </p>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/features/docs/src/InviteDialog.tsx

@@ -0,0 +1,336 @@
+import { useMemo, useState } from 'react'
+import type { RecordData } from 'deepspace'
+import { useMutations, useQuery, useUser } from 'deepspace'
+import { Mail, ShieldCheck, UserMinus, Users } from 'lucide-react'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  useToast,
+} from '../../components/ui'
+
+export interface InviteDialogDocumentFields {
+  title: string
+  ownerId: string
+  collaborators?: string
+  editors?: string
+  folderId?: string
+}
+
+interface UserFields {
+  email?: string
+  name?: string
+  imageUrl?: string
+}
+
+type InviteRole = 'viewer' | 'editor'
+
+/**
+ * Diff that resulted from an InviteDialog save. The editor page rebroadcasts
+ * this over the doc's presence channel so the affected peer gets the change
+ * even when the docs schema's `read: 'collaborator'` rule prevents the
+ * `documents` record update from reaching a now-removed user.
+ */
+export interface InviteAclDiff {
+  /** Users dropped from `collaborators` entirely. */
+  removedUserIds: string[]
+  /** Users who lost the editor role but remain collaborators (now viewers). */
+  demotedUserIds: string[]
+  /** Existing collaborators who gained the editor role. */
+  promotedUserIds: string[]
+}
+
+interface InviteDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  doc: RecordData<InviteDialogDocumentFields>
+  isOwner: boolean
+  /**
+   * Called after a save mutation that changed the ACL. The parent uses it to
+   * publish a one-shot permission-change signal over the doc's presence room
+   * so peers (including ones who just lost read access to the doc record)
+   * can react immediately instead of waiting for the next refresh.
+   */
+  onAclChange?: (diff: InviteAclDiff) => void
+}
+
+function parseIds(raw: string | undefined): string[] {
+  if (!raw) return []
+  try {
+    const parsed = JSON.parse(raw)
+    return Array.isArray(parsed) ? parsed.filter((id): id is string => typeof id === 'string') : []
+  } catch {
+    return []
+  }
+}
+
+function uniqueIds(ids: string[]): string[] {
+  return [...new Set(ids.filter(Boolean))]
+}
+
+function initialsFor(name: string): string {
+  const parts = name.trim().split(/\s+/).filter(Boolean)
+  if (parts.length === 0) return '?'
+  return parts
+    .slice(0, 2)
+    .map((p) => p[0]?.toUpperCase() ?? '')
+    .join('')
+}
+
+export function InviteDialog({ open, onOpenChange, doc, isOwner, onAclChange }: InviteDialogProps) {
+  const { user } = useUser()
+  const { records: users } = useQuery<UserFields>('users')
+  const { put } = useMutations<InviteDialogDocumentFields>('documents')
+  const toast = useToast()
+  const [email, setEmail] = useState('')
+  const [role, setRole] = useState<InviteRole>('editor')
+  const [saving, setSaving] = useState(false)
+
+  const collaborators = useMemo(() => parseIds(doc.data.collaborators), [doc.data.collaborators])
+  const editors = useMemo(() => parseIds(doc.data.editors), [doc.data.editors])
+
+  const ownerRecord = useMemo(
+    () => users.find((u) => u.recordId === doc.data.ownerId),
+    [doc.data.ownerId, users],
+  )
+
+  const collaboratorRecords = useMemo(
+    () =>
+      collaborators
+        .map((id) => users.find((u) => u.recordId === id))
+        .filter((u): u is RecordData<UserFields> => Boolean(u)),
+    [collaborators, users],
+  )
+
+  if (!isOwner) return null
+
+  const saveAccess = async (nextCollaborators: string[], nextEditors: string[]) => {
+    const prevCollaborators = parseIds(doc.data.collaborators)
+    const prevEditors = parseIds(doc.data.editors)
+    const nextCollabList = uniqueIds(nextCollaborators)
+    const nextCollabSet = new Set(nextCollabList)
+    const nextEditorList = uniqueIds(nextEditors).filter((id) => nextCollabSet.has(id))
+    const nextEditorSet = new Set(nextEditorList)
+
+    setSaving(true)
+    try {
+      await put(doc.recordId, {
+        ...doc.data,
+        collaborators: JSON.stringify(nextCollabList),
+        editors: JSON.stringify(nextEditorList),
+      })
+
+      if (onAclChange) {
+        const removedUserIds = prevCollaborators.filter((id) => !nextCollabSet.has(id))
+        const demotedUserIds = prevEditors.filter(
+          (id) => nextCollabSet.has(id) && !nextEditorSet.has(id),
+        )
+        const promotedUserIds = nextEditorList.filter(
+          (id) => prevCollaborators.includes(id) && !prevEditors.includes(id),
+        )
+        if (removedUserIds.length || demotedUserIds.length || promotedUserIds.length) {
+          onAclChange({ removedUserIds, demotedUserIds, promotedUserIds })
+        }
+      }
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const addInvite = async () => {
+    const normalized = email.trim().toLowerCase()
+    if (!normalized) return
+
+    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.')
+      return
+    }
+    if (target.recordId === doc.data.ownerId || target.recordId === user?.id) {
+      toast.info('Already has access', 'That user is the document owner.')
+      return
+    }
+    if (collaborators.includes(target.recordId)) {
+      toast.info('Already invited', `${target.data.email ?? normalized} already has access.`)
+      return
+    }
+
+    const nextCollaborators = [...collaborators, target.recordId]
+    const nextEditors = role === 'editor' ? [...editors, target.recordId] : editors
+    await saveAccess(nextCollaborators, nextEditors)
+    setEmail('')
+    toast.success('Invite added', `${target.data.email ?? normalized} now has ${role} access.`)
+  }
+
+  const setCollaboratorRole = async (userId: string, nextRole: InviteRole) => {
+    const nextEditors =
+      nextRole === 'editor'
+        ? uniqueIds([...editors, userId])
+        : editors.filter((id) => id !== userId)
+    await saveAccess(collaborators, nextEditors)
+  }
+
+  const removeCollaborator = async (userId: string) => {
+    await saveAccess(
+      collaborators.filter((id) => id !== userId),
+      editors.filter((id) => id !== userId),
+    )
+  }
+
+  const ownerName =
+    ownerRecord?.data.name?.trim() ||
+    ownerRecord?.data.email?.trim() ||
+    user?.name ||
+    user?.email ||
+    'Owner'
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="docs-feature-scope max-w-xl">
+        <DialogHeader>
+          <DialogTitle>Share document</DialogTitle>
+          <DialogDescription>
+            Invite DeepSpace users by the email address on their account.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-5">
+          <div className="rounded-xl border p-3" style={{ borderColor: 'var(--docs-el-line)' }}>
+            <label
+              className="mb-2 block text-xs font-semibold uppercase tracking-wide"
+              style={{ color: 'var(--docs-el-muted)' }}
+            >
+              Add people
+            </label>
+            <div className="flex flex-col gap-2 sm:flex-row">
+              <div className="relative min-w-0 flex-1">
+                <Mail
+                  className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2"
+                  style={{ color: 'var(--docs-el-muted)' }}
+                />
+                <input
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') void addInvite()
+                  }}
+                  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(--docs-el-line)', color: 'var(--docs-el-text)' }}
+                />
+              </div>
+              <select
+                value={role}
+                onChange={(e) => setRole(e.target.value as InviteRole)}
+                className="h-10 rounded-lg border bg-transparent px-3 text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
+                style={{ borderColor: 'var(--docs-el-line)', color: 'var(--docs-el-text)' }}
+              >
+                <option value="editor">Editor</option>
+                <option value="viewer">Viewer</option>
+              </select>
+              <button
+                type="button"
+                onClick={() => void addInvite()}
+                disabled={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(--docs-el-accent)' }}
+              >
+                Add
+              </button>
+            </div>
+          </div>
+
+          <div>
+            <div className="mb-3 flex items-center gap-2">
+              <Users className="h-4 w-4" style={{ color: 'var(--docs-el-muted)' }} />
+              <h3 className="text-sm font-semibold">People with access</h3>
+            </div>
+
+            <div className="space-y-2">
+              <div
+                className="flex items-center gap-3 rounded-xl border p-3"
+                style={{ borderColor: 'var(--docs-el-line)' }}
+              >
+                <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-black/5 text-xs font-bold dark:bg-white/10">
+                  {initialsFor(ownerName)}
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className="truncate text-sm font-medium">{ownerName}</div>
+                  <div className="truncate text-xs" style={{ color: 'var(--docs-el-muted)' }}>
+                    {ownerRecord?.data.email ?? user?.email ?? 'Owner'}
+                  </div>
+                </div>
+                <span className="inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-xs font-medium">
+                  <ShieldCheck className="h-3.5 w-3.5" />
+                  Owner
+                </span>
+              </div>
+
+              {collaboratorRecords.map((u) => {
+                const name = u.data.name?.trim() || u.data.email?.trim() || 'Collaborator'
+                const userRole: InviteRole = editors.includes(u.recordId) ? 'editor' : 'viewer'
+                return (
+                  <div
+                    key={u.recordId}
+                    className="flex items-center gap-3 rounded-xl border p-3"
+                    style={{ borderColor: 'var(--docs-el-line)' }}
+                  >
+                    {u.data.imageUrl ? (
+                      <img
+                        src={u.data.imageUrl}
+                        alt=""
+                        className="h-9 w-9 shrink-0 rounded-full object-cover"
+                      />
+                    ) : (
+                      <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-black/5 text-xs font-bold dark:bg-white/10">
+                        {initialsFor(name)}
+                      </div>
+                    )}
+                    <div className="min-w-0 flex-1">
+                      <div className="truncate text-sm font-medium">{name}</div>
+                      <div className="truncate text-xs" style={{ color: 'var(--docs-el-muted)' }}>
+                        {u.data.email ?? 'No email'}
+                      </div>
+                    </div>
+                    <select
+                      value={userRole}
+                      onChange={(e) =>
+                        void setCollaboratorRole(u.recordId, e.target.value as InviteRole)
+                      }
+                      disabled={saving}
+                      className="h-8 rounded-lg border bg-transparent px-2 text-xs font-medium outline-none"
+                      style={{ borderColor: 'var(--docs-el-line)', color: 'var(--docs-el-text)' }}
+                    >
+                      <option value="editor">Editor</option>
+                      <option value="viewer">Viewer</option>
+                    </select>
+                    <button
+                      type="button"
+                      onClick={() => void removeCollaborator(u.recordId)}
+                      disabled={saving}
+                      className="rounded-lg p-1.5 text-red-600 transition-colors hover:bg-red-500/10 disabled:opacity-50"
+                      title="Remove access"
+                    >
+                      <UserMinus className="h-4 w-4" />
+                    </button>
+                  </div>
+                )
+              })}
+
+              {collaboratorRecords.length === 0 ? (
+                <p
+                  className="rounded-xl border p-3 text-sm"
+                  style={{ color: 'var(--docs-el-muted)' }}
+                >
+                  Only the owner can access this document.
+                </p>
+              ) : null}
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}