deepspace 0.4.3 → 0.4.5

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

@@ -13,7 +13,7 @@ import { useUser } from 'deepspace'
 import { useUsers } from 'deepspace'
 import { useQuery } from 'deepspace'
 import { useMutations } from 'deepspace'
-import { Button, Badge, Avatar, AvatarFallback, useToast } from 'deepspace'
+import { Button, Badge, Avatar, AvatarFallback, useToast } from '@/components/ui'
 import { ROLES, ROLE_CONFIG, type Role } from 'deepspace'
 
 // ============================================================================

package/features/canvas/src/CanvasListPage.tsx

@@ -12,7 +12,7 @@ import { useNavigate } from 'react-router-dom'
 import { useUser } from 'deepspace'
 import { useQuery } from 'deepspace'
 import { useMutations } from 'deepspace'
-import { Button, Modal, EmptyState } from 'deepspace'
+import { Button, Modal, EmptyState } from '@/components/ui'
 import { ROLES, type Role } from 'deepspace'
 
 // ============================================================================

package/features/canvas/src/components/CanvasView.tsx

@@ -6,7 +6,7 @@ import { useState, useRef, useCallback, useEffect } from 'react'
 import { useCanvas, type CanvasShapeClient } from 'deepspace'
 import { CanvasToolbar, type CanvasTool } from './CanvasToolbar'
 import { ShapeRenderer } from './ShapeRenderer'
-import { Badge } from 'deepspace'
+import { Badge } from '@/components/ui'
 
 interface CanvasViewProps {
   docId: string

package/features/docs/src/DocsEditorPage.tsx

@@ -24,7 +24,7 @@ import {
   type PresencePeerClient,
 } from 'deepspace'
 import { ArrowLeft, AlertTriangle, List as ListIcon, RefreshCw, Share2 } from 'lucide-react'
-import { Badge } from 'deepspace'
+import { Badge } from '@/components/ui'
 import { type Editor, useEditorState } from '@tiptap/react'
 import { useYjsRoomWithAwareness } from './use-yjs-room-with-awareness'
 import { useDocEditor } from './editor/useDocEditor'

package/features/docs/src/InviteDialog.tsx

@@ -2,14 +2,7 @@ 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'
+import { Modal, useToast } from '@/components/ui'
 
 export interface InviteDialogDocumentFields {
   title: string
@@ -187,150 +180,148 @@ export function InviteDialog({ open, onOpenChange, doc, isOwner, onAclChange }:
     '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>
+    <Modal open={open} onClose={() => onOpenChange(false)} size="lg" className="docs-feature-scope">
+      <Modal.Header onClose={() => onOpenChange(false)}>
+        <Modal.Title>Share document</Modal.Title>
+        <Modal.Description>
+          Invite DeepSpace users by the email address on their account.
+        </Modal.Description>
+      </Modal.Header>
 
-        <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"
+      <Modal.Body 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)' }}
-              >
-                <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>
+            <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>
+          <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 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>
-                <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>
+              <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>
+            {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>
-                    <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>
-                )
-              })}
+                  <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>
+            {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>
-      </DialogContent>
-    </Dialog>
+      </Modal.Body>
+    </Modal>
   )
 }

package/features/file-attachments/src/AttachmentsPage.tsx

@@ -16,14 +16,11 @@ import {
   useQuery,
   useMutations,
   useR2Files,
-  Button,
-  Modal,
-  EmptyState,
-  Badge,
   ROLES,
   formatFileSize,
   type Role,
 } from 'deepspace'
+import { Button, Modal, EmptyState, Badge } from '@/components/ui'
 import { useMimeTypeDetection, type FileCategory } from '../hooks/useMimeTypeDetection'
 import { useFilePreview } from '../hooks/useFilePreview'
 import { MAX_FILE_SIZE } from '../constants/attachments-constants'

package/features/file-manager/src/FileManagerPage.tsx

@@ -9,7 +9,8 @@
  */
 
 import { useState, useEffect, useCallback, useRef } from 'react'
-import { useUser, useR2Files, Button, EmptyState, Badge, Modal } from 'deepspace'
+import { useUser, useR2Files } from 'deepspace'
+import { Button, EmptyState, Badge, Modal } from '@/components/ui'
 import type { R2FileInfo } from 'deepspace'
 
 // ============================================================================

package/features/items/src/ItemsPage.tsx

@@ -12,7 +12,7 @@ import { useState, useMemo } from 'react'
 import { useUser } from 'deepspace'
 import { useQuery } from 'deepspace'
 import { useMutations } from 'deepspace'
-import { Button, Modal, EmptyState, Badge } from 'deepspace'
+import { Button, Modal, EmptyState, Badge } from '@/components/ui'
 import { ROLES, type Role } from 'deepspace'
 import { ITEM_STATUS } from '../components/items/items-constants'
 

package/features/landing/src/LandingPage.tsx

@@ -14,7 +14,7 @@ import {
   Github, Twitter, Linkedin, Mail, Sparkles, ChevronRight, Plus, Minus,
 } from 'lucide-react'
 import { useUser } from 'deepspace'
-import { Button, cn } from 'deepspace'
+import { Button, cn } from '@/components/ui'
 import {
   Typewriter,
   ScrollReveal,

package/features/landing/src/primitives.tsx

@@ -8,7 +8,7 @@
 import { useEffect, useState, useRef, type ReactNode } from 'react'
 import { motion, AnimatePresence, useInView } from 'framer-motion'
 import { ImageIcon, ChevronDown } from 'lucide-react'
-import { cn } from 'deepspace'
+import { cn } from '@/components/ui'
 
 // ============================================================================
 // Smooth Typewriter

package/features/leaderboard/src/LeaderboardPage.tsx

@@ -12,7 +12,7 @@ import { useState } from 'react'
 import { useUser } from 'deepspace'
 import { useQuery } from 'deepspace'
 import { useMutations } from 'deepspace'
-import { Button, Modal, EmptyState, Badge } from 'deepspace'
+import { Button, Modal, EmptyState, Badge } from '@/components/ui'
 import { ROLES, type Role } from 'deepspace'
 import { LEADERBOARD_CATEGORY, CATEGORY_CONFIG, type LeaderboardCategory } from '../components/leaderboard/leaderboard-constants'
 

package/features/leaderboard/src/leaderboard-constants.ts

@@ -2,7 +2,7 @@
  * Leaderboard Feature - Constants
  */
 
-import type { BadgeProps } from 'deepspace'
+import type { BadgeProps } from '@/components/ui'
 
 export type BadgeVariant = BadgeProps['variant']
 

package/features/search-bar/src/SearchOverlay.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
-import { Badge, Button, EmptyState, SearchInput, cn } from 'deepspace'
+import { Badge, Button, EmptyState, SearchInput, cn } from '@/components/ui'
 import { Loader2 } from 'lucide-react'
 
 export interface SearchItem {

package/features/tasks/src/TasksPage.tsx

@@ -13,7 +13,7 @@ import { useUser } from 'deepspace'
 import { useUsers } from 'deepspace'
 import { useQuery } from 'deepspace'
 import { useMutations } from 'deepspace'
-import { Button, Modal, Badge, EmptyState, type BadgeProps } from 'deepspace'
+import { Button, Modal, Badge, EmptyState, type BadgeProps } from '@/components/ui'
 import { ROLES, type Role } from 'deepspace'
 import { DIFFICULTY, DIFFICULTY_CONFIG, GRADE, GRADE_CONFIG, type Difficulty, type Grade, type BadgeVariant } from '../components/tasks/tasks-constants'
 

package/features/tasks/src/tasks-constants.ts

@@ -2,7 +2,7 @@
  * Tasks/Challenges Feature - Constants
  */
 
-import type { BadgeProps } from 'deepspace'
+import type { BadgeProps } from '@/components/ui'
 
 export type BadgeVariant = BadgeProps['variant']
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deepspace",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "description": "DeepSpace SDK — build real-time collaborative apps on Cloudflare Workers",
   "type": "module",
   "main": "./dist/index.js",
@@ -56,7 +56,6 @@
     "@ai-sdk/openai-compatible": "^1.0.0",
     "@playwright/test": ">=1.40.0",
     "ai": "^5.0.0",
-    "class-variance-authority": ">=0.7.0",
     "clsx": ">=2.0.0",
     "lucide-react": ">=0.400.0",
     "react": "^18.0.0 || ^19.0.0",
@@ -85,9 +84,6 @@
     "react-dom": {
       "optional": true
     },
-    "class-variance-authority": {
-      "optional": true
-    },
     "clsx": {
       "optional": true
     },
@@ -104,24 +100,11 @@
     "@ai-sdk/openai-compatible": "^1.0.0",
     "@cloudflare/workers-types": "^4.20241205.0",
     "@playwright/test": "^1.59.1",
-    "@radix-ui/react-avatar": "^1.1.11",
-    "@radix-ui/react-checkbox": "^1.3.3",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-label": "^2.1.8",
-    "@radix-ui/react-progress": "^1.1.8",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-separator": "^1.1.8",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-switch": "^1.2.6",
-    "@radix-ui/react-tabs": "^1.1.13",
-    "@radix-ui/react-tooltip": "^1.2.8",
     "@types/better-sqlite3": "^7.6.12",
     "@types/cross-spawn": "^6.0.6",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "better-sqlite3": "^12.0.0",
-    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^12.38.0",
     "lucide-react": "^1.7.0",