deepspace 0.3.10 → 0.4.0

package/features/ai-chat/src/ai-chat-schema.ts

@@ -0,0 +1,11 @@
+/**
+ * AI Chat Feature — Schema
+ *
+ * Re-exports the SDK's pre-built AI chat collection schemas.
+ * Spread into the app's schemas array: ...aiChatSchemas
+ */
+
+import type { CollectionSchema } from 'deepspace/worker'
+import { AI_CHATS_SCHEMA, AI_MESSAGES_SCHEMA } from 'deepspace/worker'
+
+export const aiChatSchemas: CollectionSchema[] = [AI_CHATS_SCHEMA, AI_MESSAGES_SCHEMA]

package/features/canvas/feature.json

@@ -0,0 +1,45 @@
+{
+  "id": "canvas",
+  "name": "Canvas",
+  "category": "display",
+  "description": "Collaborative spatial canvas with shapes, zoom/pan, and multi-user cursors",
+  "details": "SVG-based canvas with shape tools (rect, ellipse, line, text), color picker, zoom/pan, keyboard shortcuts, and real-time multi-user cursor display. Document metadata stored in RecordRoom, shape data via useCanvas hook.",
+  "files": [
+    {
+      "src": "src/CanvasListPage.tsx",
+      "dest": "src/pages/canvas/index.tsx"
+    },
+    {
+      "src": "src/CanvasEditorPage.tsx",
+      "dest": "src/pages/canvas/[docId].tsx"
+    },
+    {
+      "src": "src/canvas-schema.ts",
+      "dest": "src/schemas/canvas-schema.ts"
+    },
+    {
+      "src": "src/components/CanvasView.tsx",
+      "dest": "src/components/canvas/CanvasView.tsx"
+    },
+    {
+      "src": "src/components/CanvasToolbar.tsx",
+      "dest": "src/components/canvas/CanvasToolbar.tsx"
+    },
+    {
+      "src": "src/components/ShapeRenderer.tsx",
+      "dest": "src/components/canvas/ShapeRenderer.tsx"
+    }
+  ],
+  "schema": {
+    "exportName": "canvasSchema",
+    "importPath": "./schemas/canvas-schema",
+    "spreadOperator": false
+  },
+  "route": {
+    "path": "/canvas",
+    "protected": true
+  },
+  "requires": [],
+  "instructions": [],
+  "patterns": []
+}

package/features/canvas/src/CanvasEditorPage.tsx

@@ -0,0 +1,87 @@
+/**
+ * CanvasEditorPage — Canvas editor for a single document.
+ *
+ * Gets docId from URL params and renders the CanvasView editor
+ * connected to the CanvasRoom DO via useCanvas.
+ *
+ * Installed at: src/pages/canvas/[docId].tsx
+ */
+
+import { useMemo } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import { useUser } from 'deepspace'
+import { useQuery } from 'deepspace'
+import { CanvasView } from '../../components/canvas/CanvasView'
+
+// ============================================================================
+// Types
+// ============================================================================
+
+interface CanvasDocument {
+  title: string
+  ownerId: string
+}
+
+// ============================================================================
+// Main Page
+// ============================================================================
+
+export default function CanvasEditorPage() {
+  const { docId } = useParams<{ docId: string }>()
+  const navigate = useNavigate()
+  const { user } = useUser()
+
+  const { records: canvases, status } = useQuery<CanvasDocument>('canvases', {
+    orderBy: 'createdAt',
+    orderDir: 'desc',
+  })
+
+  const selectedCanvas = useMemo(
+    () => docId ? canvases.find((c) => c.recordId === docId) : null,
+    [canvases, docId],
+  )
+
+  const isLoading = status === 'loading'
+
+  if (isLoading) {
+    return (
+      <div data-testid="canvas-page" className="h-full flex items-center justify-center bg-background">
+        <div className="w-8 h-8 border-2 border-primary/20 border-t-primary rounded-full animate-spin" />
+      </div>
+    )
+  }
+
+  if (!selectedCanvas) {
+    return (
+      <div data-testid="canvas-page" className="h-full flex flex-col items-center justify-center bg-background gap-4">
+        <p className="text-muted-foreground">Canvas not found</p>
+        <button
+          onClick={() => navigate('/canvas')}
+          className="text-primary hover:underline"
+        >
+          Back to canvas list
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div data-testid="canvas-page" className="h-full flex flex-col bg-background">
+      {/* Back header */}
+      <div className="px-4 py-3 border-b border-border flex items-center gap-4 bg-card/60 backdrop-blur-md">
+        <button
+          data-testid="canvas-back"
+          onClick={() => navigate('/canvas')}
+          className="p-2 hover:bg-muted/60 rounded-lg transition-colors"
+        >
+          <svg className="w-5 h-5 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+        </button>
+        <h2 className="text-lg font-semibold text-foreground">{selectedCanvas.data.title}</h2>
+      </div>
+
+      <CanvasView key={selectedCanvas.recordId} docId={selectedCanvas.recordId} className="flex-1" />
+    </div>
+  )
+}

package/features/canvas/src/CanvasListPage.tsx

@@ -0,0 +1,202 @@
+/**
+ * CanvasListPage — List of canvas documents.
+ *
+ * Shows all canvas documents (stored in RecordRoom) with
+ * create and delete functionality.
+ *
+ * Navigates to /canvas/:docId when a canvas is selected.
+ */
+
+import { useState } from 'react'
+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 { ROLES, type Role } from 'deepspace'
+
+// ============================================================================
+// Types
+// ============================================================================
+
+interface CanvasDocument {
+  title: string
+  ownerId: string
+}
+
+// ============================================================================
+// Create Canvas Modal
+// ============================================================================
+
+interface CreateCanvasModalProps {
+  isOpen: boolean
+  onClose: () => void
+  onCreate: (title: string) => void
+}
+
+function CreateCanvasModal({ isOpen, onClose, onCreate }: CreateCanvasModalProps) {
+  const [title, setTitle] = useState('')
+
+  const handleSubmit = () => {
+    if (title.trim()) {
+      onCreate(title.trim())
+      setTitle('')
+      onClose()
+    }
+  }
+
+  return (
+    <Modal open={isOpen} onClose={onClose} size="sm">
+      <Modal.Header onClose={onClose}>
+        <Modal.Title>New Canvas</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <div>
+          <label className="block text-sm font-medium text-muted-foreground mb-2">Title</label>
+          <input
+            data-testid="canvas-title-input"
+            type="text"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            placeholder="e.g., Wireframe Draft"
+            className="w-full px-3 py-2 bg-transparent border border-border rounded-lg text-foreground placeholder-muted-foreground focus:outline-none focus:ring-ring"
+            autoFocus
+            onKeyDown={(e) => e.key === 'Enter' && handleSubmit()}
+          />
+        </div>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant="secondary" onClick={onClose}>Cancel</Button>
+        <Button data-testid="canvas-create-submit" onClick={handleSubmit} disabled={!title.trim()}>Create</Button>
+      </Modal.Footer>
+    </Modal>
+  )
+}
+
+// ============================================================================
+// Main Page
+// ============================================================================
+
+export default function CanvasListPage() {
+  const { user } = useUser()
+  const navigate = useNavigate()
+  const userRole = (user?.role ?? ROLES.VIEWER) as Role
+  const canCreate = userRole === ROLES.MEMBER || userRole === ROLES.ADMIN
+
+  const [showCreateModal, setShowCreateModal] = useState(false)
+
+  const { records: canvases, status } = useQuery<CanvasDocument>('canvases', {
+    orderBy: 'createdAt',
+    orderDir: 'desc',
+  })
+  const { create, remove } = useMutations<CanvasDocument>('canvases')
+
+  const handleCreate = async (title: string) => {
+    await create({ title, ownerId: user!.id })
+  }
+
+  const handleDelete = async (canvasId: string) => {
+    if (confirm('Delete this canvas?')) {
+      await remove(canvasId)
+    }
+  }
+
+  const isLoading = status === 'loading'
+
+  return (
+    <div data-testid="canvas-page" className="h-full bg-background overflow-y-auto">
+      {/* Header */}
+      <div className="bg-card/60 backdrop-blur-md border-b border-border sticky top-0 z-10">
+        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="text-2xl font-bold text-foreground">Canvas</h1>
+              <p className="text-muted-foreground mt-1">Collaborative spatial editing</p>
+            </div>
+            {canCreate && (
+              <Button data-testid="canvas-create-btn" onClick={() => setShowCreateModal(true)}>
+                <svg className="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+                </svg>
+                New Canvas
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Canvas list */}
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {isLoading ? (
+          <div className="flex items-center justify-center py-16">
+            <div className="w-8 h-8 border-2 border-primary/20 border-t-primary rounded-full animate-spin" />
+          </div>
+        ) : canvases.length === 0 ? (
+          <EmptyState
+            title="No canvases yet"
+            description={canCreate ? 'Create your first canvas to start collaborating' : 'No canvases have been created yet'}
+            icon={
+              <svg className="w-12 h-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+              </svg>
+            }
+          />
+        ) : (
+          <div className="grid gap-4 sm:grid-cols-2">
+            {canvases.map((canvas) => {
+              const isOwner = canvas.data.ownerId === user?.id
+              return (
+                <div
+                  key={canvas.recordId}
+                  data-testid={`canvas-card-${canvas.recordId}`}
+                  className="group p-4 bg-card/60 rounded-xl border border-border hover:border-primary/30 hover:bg-muted/40 transition-all cursor-pointer"
+                  onClick={() => navigate(`/canvas/${canvas.recordId}`)}
+                >
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 mb-1">
+                        <svg className="w-4 h-4 text-primary shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                        </svg>
+                        <h3 className="font-medium text-foreground truncate">{canvas.data.title}</h3>
+                      </div>
+                      <p className="text-xs text-muted-foreground">
+                        {new Date(canvas.createdAt).toLocaleDateString()}
+                        {isOwner && ' · You'}
+                      </p>
+                    </div>
+                    <div className="flex items-center gap-1 shrink-0">
+                      {isOwner && (
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation()
+                            handleDelete(canvas.recordId)
+                          }}
+                          className="p-2 text-muted-foreground hover:text-destructive hover:bg-destructive/20 rounded-lg transition-colors opacity-0 group-hover:opacity-100"
+                          title="Delete"
+                        >
+                          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                          </svg>
+                        </button>
+                      )}
+                      <svg className="w-5 h-5 text-muted-foreground group-hover:text-primary transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </div>
+
+      <CreateCanvasModal
+        isOpen={showCreateModal}
+        onClose={() => setShowCreateModal(false)}
+        onCreate={handleCreate}
+      />
+    </div>
+  )
+}

package/features/canvas/src/canvas-schema.ts

@@ -0,0 +1,33 @@
+/**
+ * Canvas Feature - Schema
+ *
+ * A canvas document collection for listing/managing canvas documents.
+ * The actual shape data lives in the CanvasRoom DO (Yjs-backed),
+ * not in RecordRoom. This schema is just for document metadata.
+ */
+
+import type { CollectionSchema } from 'deepspace/worker'
+
+export const canvasSchema: CollectionSchema = {
+  name: 'canvases',
+  columns: [
+    { name: 'title', storage: 'text', interpretation: 'plain', required: true },
+    { name: 'ownerId', storage: 'text', interpretation: 'plain', required: true, userBound: true, immutable: true },
+  ],
+  ownerField: 'ownerId',
+  permissions: {
+    viewer: {
+      read: true,
+      create: false,
+      update: false,
+      delete: false,
+    },
+    member: {
+      read: true,
+      create: true,
+      update: 'own',
+      delete: 'own',
+    },
+    admin: { read: true, create: true, update: true, delete: true },
+  },
+}

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

@@ -0,0 +1,170 @@
+/**
+ * CanvasToolbar — Shape creation tools, selection, delete, color picker.
+ */
+
+export type CanvasTool = 'select' | 'rect' | 'ellipse' | 'line' | 'text'
+
+const PRESET_COLORS = [
+  '#6366f1', // indigo
+  '#ef4444', // red
+  '#22c55e', // green
+  '#3b82f6', // blue
+  '#f59e0b', // amber
+  '#8b5cf6', // violet
+  '#ec4899', // pink
+  '#14b8a6', // teal
+  '#64748b', // slate
+  '#000000', // black
+]
+
+interface CanvasToolbarProps {
+  activeTool: CanvasTool
+  activeColor: string
+  hasSelection: boolean
+  onToolChange: (tool: CanvasTool) => void
+  onColorChange: (color: string) => void
+  onDelete: () => void
+  onUndo: () => void
+  onRedo: () => void
+}
+
+const tools: { id: CanvasTool; label: string; icon: React.ReactNode }[] = [
+  {
+    id: 'select',
+    label: 'Select',
+    icon: (
+      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
+      </svg>
+    ),
+  },
+  {
+    id: 'rect',
+    label: 'Rectangle',
+    icon: (
+      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <rect x="3" y="3" width="18" height="18" rx="2" strokeWidth={2} />
+      </svg>
+    ),
+  },
+  {
+    id: 'ellipse',
+    label: 'Ellipse',
+    icon: (
+      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <ellipse cx="12" cy="12" rx="9" ry="7" strokeWidth={2} />
+      </svg>
+    ),
+  },
+  {
+    id: 'line',
+    label: 'Line',
+    icon: (
+      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <line x1="5" y1="19" x2="19" y2="5" strokeWidth={2} strokeLinecap="round" />
+      </svg>
+    ),
+  },
+  {
+    id: 'text',
+    label: 'Text',
+    icon: (
+      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M8 6v12m0 0h8" />
+      </svg>
+    ),
+  },
+]
+
+export function CanvasToolbar({
+  activeTool,
+  activeColor,
+  hasSelection,
+  onToolChange,
+  onColorChange,
+  onDelete,
+  onUndo,
+  onRedo,
+}: CanvasToolbarProps) {
+  return (
+    <div
+      data-testid="canvas-toolbar"
+      className="flex items-center gap-3 px-4 py-2 bg-card/80 backdrop-blur-md border-b border-border"
+    >
+      {/* Shape tools */}
+      <div className="flex items-center gap-1">
+        {tools.map((tool) => (
+          <button
+            key={tool.id}
+            data-testid={`tool-${tool.id}`}
+            onClick={() => onToolChange(tool.id)}
+            title={tool.label}
+            className={`p-2 rounded-lg transition-colors ${
+              activeTool === tool.id
+                ? 'bg-primary text-primary-foreground'
+                : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground'
+            }`}
+          >
+            {tool.icon}
+          </button>
+        ))}
+      </div>
+
+      <div className="w-px h-6 bg-border" />
+
+      {/* Color picker */}
+      <div className="flex items-center gap-1">
+        {PRESET_COLORS.map((color) => (
+          <button
+            key={color}
+            data-testid={`color-${color}`}
+            onClick={() => onColorChange(color)}
+            title={color}
+            className={`w-5 h-5 rounded-full border-2 transition-transform ${
+              activeColor === color ? 'border-foreground scale-125' : 'border-transparent hover:scale-110'
+            }`}
+            style={{ backgroundColor: color }}
+          />
+        ))}
+      </div>
+
+      <div className="w-px h-6 bg-border" />
+
+      {/* Actions */}
+      <div className="flex items-center gap-1">
+        <button
+          data-testid="canvas-undo"
+          onClick={onUndo}
+          title="Undo"
+          className="p-2 rounded-lg text-muted-foreground hover:bg-muted/60 hover:text-foreground transition-colors"
+        >
+          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h10a5 5 0 015 5v2M3 10l4-4m-4 4l4 4" />
+          </svg>
+        </button>
+        <button
+          data-testid="canvas-redo"
+          onClick={onRedo}
+          title="Redo"
+          className="p-2 rounded-lg text-muted-foreground hover:bg-muted/60 hover:text-foreground transition-colors"
+        >
+          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 10H11a5 5 0 00-5 5v2m15-7l-4-4m4 4l-4 4" />
+          </svg>
+        </button>
+
+        <button
+          data-testid="canvas-delete"
+          onClick={onDelete}
+          disabled={!hasSelection}
+          title="Delete selected"
+          className="p-2 rounded-lg text-muted-foreground hover:bg-destructive/20 hover:text-destructive transition-colors disabled:opacity-30 disabled:pointer-events-none"
+        >
+          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  )
+}