From 7234a8db38e5f327b3d6588e2d3747bf747ca18d Mon Sep 17 00:00:00 2001 From: Jeff Emmett Date: Sun, 22 Mar 2026 20:41:00 -0700 Subject: [PATCH] feat(rspace): add rich landing page for the canvas module MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace the generic "🎨 rSpace — Real-time collaborative canvas" fallback with a full landing page following the rl-* CSS system used by other rApps. Sections: hero, principles (local-first/interoperable/AI-native/multiplayer), canvas features, 16-shape library grid, AI capabilities, how it works steps, ecosystem integrations, open source stack, data protection, and final CTA. Co-Authored-By: Claude Opus 4.6 --- modules/rspace/landing.ts | 413 ++++++++++++++++++++++++++++++++++++++ modules/rspace/mod.ts | 2 + 2 files changed, 415 insertions(+) create mode 100644 modules/rspace/landing.ts diff --git a/modules/rspace/landing.ts b/modules/rspace/landing.ts new file mode 100644 index 0000000..a761b2e --- /dev/null +++ b/modules/rspace/landing.ts @@ -0,0 +1,413 @@ +/** + * rSpace Canvas landing page — the infinite collaborative canvas. + */ +export function renderLanding(): string { + return ` + +
+ + Infinite Collaborative Canvas + +

(You)rSpace, your commons made visible.

+

25+ Interoperable Tools on an Infinite Canvas — Real-Time, Local-First, AI-Native

+

+ rSpace is a collaborative infinite canvas where notes, maps, calendars, AI prompts, votes, + budgets, and two dozen other tools live side by side — connected by arrows, synced in real time, + and owned by the people who use them. No cloud lock-in. No passwords. No middlemen. +

+
+ Open the Canvas + See All Shapes + AI Features +
+

+ + Try the demo — no account needed → + +

+
+ + +
+
+
+
+
+ ♾ +
+

Local-First

+

Your data lives on your device first. Automerge CRDTs sync when you’re online and work when you’re not. No server dependency.

+
+
+
+ 🔗 +
+

Interoperable

+

Shapes connect with arrows, share data through ports, and compose into workflows. Every tool talks to every other tool.

+
+
+
+ 🤖 +
+

AI-Native

+

AI prompts that create shapes on the canvas. Image generation, video generation, zine layout, and multi-model chat — built in.

+
+
+
+ 👥 +
+

Multiplayer

+

Real-time cursors, live presence, and conflict-free collaboration. See who’s on the canvas and what they’re working on.

+
+
+
+
+ + +
+
+ + Canvas Features + +

+ Not a whiteboard. A living workspace. +

+

+ Most canvas tools give you sticky notes and arrows. rSpace gives you a full operating environment + where 25+ specialized tools compose, connect, and collaborate in real time. +

+
+
+
🔌
+

Infinite Pan & Zoom

+

Scroll to zoom, drag to pan, pinch on mobile. The canvas is boundless — lay out as much as you need with snap guides for alignment.

+
+
+
🔁
+

Feed Mode

+

Toggle between freeform canvas and a curated scroll feed. Feed mode shows shapes as a timeline — sorted by recent, alphabetical, or type.

+
+
+
📌
+

Comment Pins

+

Figma-style comment pins anywhere on the canvas. Click to drop a pin, type a note, and link it to a full rNotes card for threaded discussion.

+
+
+
🔄
+

Arrow Connections

+

Connect any two shapes with arrows. Add governance gates, data transforms, and labels to build visual workflows and dependency graphs.

+
+
+
📅
+

Shape Scheduling

+

Tag any shape to a calendar date. Drag shapes onto the mini-calendar or click the schedule icon — reminders sync to rSchedule with email notifications.

+
+
+
🔒
+

Lock & Protect

+

Lock shapes in place to prevent accidental moves. Locked shapes show a persistent badge and resist drag, resize, and deletion.

+
+
+
+
+ + +
+
+ + Shape Library + +

+ 25+ shapes, one canvas +

+

+ Every shape is a full application. Drop it on the canvas, connect it to others, and watch your workspace come alive. +

+
+
+
📝
+

Markdown

+

Rich text with TipTap — formatting, checklists, code blocks, and live collaboration.

+
+
+
🤖
+

AI Prompt

+

Chat with Gemini or Ollama models. Tool mode spawns maps, notes, and embeds on the canvas.

+
+
+
🎨
+

Image Gen

+

Generate images with Flux Pro via fal.ai or Gemini — drag results onto the canvas.

+
+
+
🎥
+

Video Gen

+

Text-to-video and image-to-video with Kling and WAN 2.1 via fal.ai.

+
+
+
🗺
+

Map

+

Interactive OpenStreetMap with routing, privacy controls, meeting points, and GPS sharing.

+
+
+
📅
+

Calendar

+

Spatiotemporal calendar with lunar overlays, multi-source sync, and ten zoom levels.

+
+
+
💬
+

Chat

+

Real-time group chat with presence, typing indicators, and message history.

+
+
+
🌐
+

Embed

+

Embed any URL — videos, documents, dashboards, web apps — live inside the canvas.

+
+
+
📸
+

Image

+

Drag-and-drop images with zoom, caption, and full-size preview.

+
+
+
🔖
+

Bookmark

+

Rich link previews with auto-fetched title, description, and favicon.

+
+
+
🗳
+

Vote & Rank

+

Polls, ranked choice, conviction voting, and spider diagrams for group decisions.

+
+
+
📚
+

Zine Gen

+

AI-generated 8-page zines with editable text, per-section regeneration, and PDF export.

+
+
+
🎬
+

Slides

+

Presentation slides with themes, transitions, and fullscreen mode.

+
+
+
💰
+

Wallet

+

CRDT token ledger, Gnosis Safe integration, and cUSDC balance viewer.

+
+
+
🎤
+

Transcription

+

Live voice transcription and audio file processing — entirely in-browser.

+
+
+
✍
+

Drawfast

+

Freehand drawing with AI sketch-to-image generation via tldraw.

+
+
+

+ Plus: Social Posts, 3D Splat Viewer, Blender Viewer, Video Chat, Obs Notes, Workflow Blocks, Wrappers, and more. +

+
+
+ + +
+
+ + AI-Native Canvas + +

+ AI that creates, not just chats +

+

+ AI in rSpace isn’t a sidebar — it’s a first-class canvas citizen. Prompts spawn shapes, + generate images and videos, and compose entire visual layouts. +

+
+
+
🧩
+

Tool Use — Shapes from Chat

+

Toggle Tools mode and ask the AI to “show me Tokyo on a map and find flights.” Gemini calls create_map, create_embed, and other tools to spawn shapes directly on the canvas.

+
+
+
🎨
+

Image & Video Generation

+

Flux Pro, Kling 2.1, and WAN 2.1 via fal.ai. Gemini Imagen for text-to-image. Generated media drops onto the canvas as draggable, connectable shapes.

+
+
+
📚
+

MycroZine Generator

+

Describe a topic and get an AI-generated 8-page zine with custom illustrations, editable text, per-section regeneration, and PDF/flipbook export.

+
+
+
💻
+

Multi-Model Support

+

Switch between Gemini Flash, Gemini Pro, and local Ollama models (Llama, Mistral, Qwen) per prompt. Run AI fully offline with self-hosted models.

+
+
+
+
+ + +
+
+

How It Works

+
+
+
1
+

Create a Space

+

Sign in with a passkey (no passwords) and create a space for your group, project, or community.

+
+
+
2
+

Drop Shapes

+

Add notes, maps, calendars, AI prompts, embeds, and more from the toolbar. Drag to position, resize to fit.

+
+
+
3
+

Connect & Compose

+

Draw arrows between shapes to build flows. Add governance gates and data transforms. Everything is linked.

+
+
+
4
+

Collaborate Live

+

Share the space URL. Collaborators see real-time cursors, live edits, and shape changes — no refresh needed.

+
+
+
+
+ + +
+
+ + Ecosystem + +

+ Every rApp, one canvas +

+

+ The canvas is the hub. Each of 25+ rApps can be dropped as a shape, embedded, or connected through the shared context API. +

+
+
+
📝
+
+

rNotes

+

Rich text notes with voice transcription, tagging, and Logseq-compatible memory cards.

+
+
+
+
📅
+
+

rCal

+

Spatiotemporal calendar with lunar phases, multi-source sync, and canvas shape scheduling.

+
+
+
+
🗺
+
+

rMaps

+

Interactive maps with routing, privacy controls, meeting points, and real-time GPS sharing.

+
+
+
+
🗳
+
+

rVote

+

Polls, ranked choice, conviction voting, and multi-criteria spider diagrams.

+
+
+
+
💰
+
+

rWallet

+

CRDT token ledger, Gnosis Safe smart wallets, and x402 micropayments.

+
+
+
+
✈
+
+

rTrips

+

Collaborative trip planning with itineraries, destinations, budgets, and packing lists.

+
+
+
+
+
+ + +
+
+

Built on Open Source

+

The libraries and protocols that power rSpace.

+
+
+

Automerge

+

Local-first CRDT for conflict-free real-time sync. Your canvas works offline and merges seamlessly when you reconnect.

+
+
+

Hono

+

Ultra-fast web framework on Bun runtime. API routes, SSR, and WebSocket sync in under 50ms.

+
+
+

Web Components

+

Every shape is a native custom element with shadow DOM. No framework lock-in — standard HTML all the way down.

+
+
+

WebAuthn

+

Passwordless authentication via passkeys and the FIDO2 standard. Your identity is a cryptographic key, not a password.

+
+
+
+
+ + +
+
+

Your Data, Protected

+

How rSpace keeps your workspace safe.

+
+
+
🔒
+

End-to-End Encryption

+ Coming Soon +

Per-document encryption before data leaves your device. Not even the server can read your canvas.

+
+
+
🕵
+

Zero-Knowledge Architecture

+ Coming Soon +

The server syncs encrypted blobs without ever seeing your content in the clear.

+
+
+
🏠
+

Self-Hosted

+

Docker Compose, Traefik, and your own domain. Your server, your rules, your data.

+
+
+
+
+ + +
+
+

+ Your commons, made visible. +

+

+ Try the collaborative canvas with 25+ tools, AI generation, real-time sync, and local-first architecture. + No account needed for the demo. +

+
+ Open the Canvas + Create a Space +
+
+
+ +
+ ← Back to rSpace +
`; +} diff --git a/modules/rspace/mod.ts b/modules/rspace/mod.ts index 045d354..9e82633 100644 --- a/modules/rspace/mod.ts +++ b/modules/rspace/mod.ts @@ -12,6 +12,7 @@ import { renderShell } from "../../server/shell"; import { getModuleInfoList } from "../../shared/module"; import type { RSpaceModule } from "../../shared/module"; import { loadCommunity, getDocumentData } from "../../server/community-store"; +import { renderLanding } from "./landing"; const DIST_DIR = resolve(import.meta.dir, "../../dist"); @@ -125,6 +126,7 @@ export const canvasModule: RSpaceModule = { icon: "🎨", description: "Real-time collaborative canvas", scoping: { defaultScope: 'space', userConfigurable: false }, + landingPage: renderLanding, routes, feeds: [ {