feat: scrollable categorized rApp dropdown, rSpaces rename, overlap prevention

- rApp dropdown now scrollable (max-height: 70vh) with apps grouped into
  5 categories: Creating, Planning, Discussing & Deciding, Funding &
  Commerce, Sharing & Media
- Renamed canvas object terminology from "shapes" to "rSpaces" in UI labels
- New shapes placed on canvas automatically find free positions using
  spiral search to avoid overlapping existing shapes

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

shared/components/rstack-app-switcher.ts

@@ -16,6 +16,40 @@ export interface AppSwitcherModule {
 	standaloneDomain?: string;
 }
 
+// Category definitions for the rApp dropdown (display-only grouping)
+const MODULE_CATEGORIES: Record<string, string> = {
+	canvas: "Creating",
+	notes: "Creating",
+	pubs: "Creating",
+	swag: "Creating",
+	splat: "Creating",
+	cal: "Planning",
+	trips: "Planning",
+	work: "Planning",
+	forum: "Discussing & Deciding",
+	inbox: "Discussing & Deciding",
+	choices: "Discussing & Deciding",
+	vote: "Discussing & Deciding",
+	funds: "Funding & Commerce",
+	wallet: "Funding & Commerce",
+	cart: "Funding & Commerce",
+	providers: "Funding & Commerce",
+	books: "Sharing & Media",
+	files: "Sharing & Media",
+	tube: "Sharing & Media",
+	data: "Sharing & Media",
+	maps: "Sharing & Media",
+	network: "Sharing & Media",
+};
+
+const CATEGORY_ORDER = [
+	"Creating",
+	"Planning",
+	"Discussing & Deciding",
+	"Funding & Commerce",
+	"Sharing & Media",
+];
+
 export class RStackAppSwitcher extends HTMLElement {
 	#shadow: ShadowRoot;
 	#modules: AppSwitcherModule[] = [];
@@ -46,6 +80,52 @@ export class RStackAppSwitcher extends HTMLElement {
 		this.#render();
 	}
 
+	#renderGroupedModules(current: string): string {
+		// Group modules by category
+		const groups = new Map<string, AppSwitcherModule[]>();
+		const uncategorized: AppSwitcherModule[] = [];
+
+		for (const m of this.#modules) {
+			const cat = MODULE_CATEGORIES[m.id];
+			if (cat) {
+				if (!groups.has(cat)) groups.set(cat, []);
+				groups.get(cat)!.push(m);
+			} else {
+				uncategorized.push(m);
+			}
+		}
+
+		let html = "";
+		for (const cat of CATEGORY_ORDER) {
+			const items = groups.get(cat);
+			if (!items || items.length === 0) continue;
+			html += `<div class="category-header">${cat}</div>`;
+			html += items.map((m) => this.#renderItem(m, current)).join("");
+		}
+		if (uncategorized.length > 0) {
+			html += `<div class="category-header">Other</div>`;
+			html += uncategorized.map((m) => this.#renderItem(m, current)).join("");
+		}
+		return html;
+	}
+
+	#renderItem(m: AppSwitcherModule, current: string): string {
+		return `
+			<div class="item-row ${m.id === current ? "active" : ""}">
+				<a class="item"
+				   href="/${this.#getSpaceSlug()}/${m.id}"
+				   data-id="${m.id}">
+					<span class="item-icon">${m.icon}</span>
+					<div class="item-text">
+						<span class="item-name">${m.name}</span>
+						<span class="item-desc">${m.description}</span>
+					</div>
+				</a>
+				${m.standaloneDomain ? `<a class="item-ext" href="https://${m.standaloneDomain}" target="_blank" rel="noopener" title="${m.standaloneDomain}">↗</a>` : ""}
+			</div>
+		`;
+	}
+
 	#render() {
 		const current = this.current;
 		const currentMod = this.#modules.find((m) => m.id === current);
@@ -56,24 +136,7 @@ export class RStackAppSwitcher extends HTMLElement {
 			<div class="switcher">
 				<button class="trigger" id="trigger">${label} <span class="caret">▾</span></button>
 				<div class="menu" id="menu">
-					${this.#modules
+					${this.#renderGroupedModules(current)}
-						.map(
-							(m) => `
-						<div class="item-row ${m.id === current ? "active" : ""}">
-							<a class="item"
-							   href="/${this.#getSpaceSlug()}/${m.id}"
-							   data-id="${m.id}">
-								<span class="item-icon">${m.icon}</span>
-								<div class="item-text">
-									<span class="item-name">${m.name}</span>
-									<span class="item-desc">${m.description}</span>
-								</div>
-							</a>
-							${m.standaloneDomain ? `<a class="item-ext" href="https://${m.standaloneDomain}" target="_blank" rel="noopener" title="${m.standaloneDomain}">↗</a>` : ""}
-						</div>
-					`
-						)
-						.join("")}
 				</div>
 			</div>
 		`;
@@ -134,6 +197,7 @@ const STYLES = `
 .menu {
   position: absolute; top: 100%; left: 0; margin-top: 6px;
   min-width: 260px; border-radius: 12px; overflow: hidden;
+  overflow-y: auto; max-height: 70vh;
   box-shadow: 0 8px 30px rgba(0,0,0,0.25); display: none; z-index: 200;
 }
 .menu.open { display: block; }
@@ -176,4 +240,14 @@ const STYLES = `
 .item-text { display: flex; flex-direction: column; min-width: 0; }
 .item-name { font-size: 0.875rem; font-weight: 600; }
 .item-desc { font-size: 0.75rem; opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+.category-header {
+  padding: 8px 14px 4px; font-size: 0.7rem; font-weight: 700;
+  text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.5;
+  user-select: none;
+}
+.category-header:not(:first-child) {
+  border-top: 1px solid rgba(128,128,128,0.15);
+  margin-top: 4px; padding-top: 10px;
+}
 `;

website/canvas.html

@@ -487,8 +487,8 @@
 			<button id="new-choice-rank" title="New Ranking">📊 Rank</button>
 			<button id="new-choice-spider" title="New Scoring">🕸 Spider</button>
 			<button id="new-social-post" title="New Post">📱 Post</button>
-			<button id="new-arrow" title="Connect Shapes">↗️ Connect</button>
+			<button id="new-arrow" title="Connect rSpaces">↗️ Connect</button>
-			<button id="toggle-memory" title="Forgotten shapes">💭 Memory</button>
+			<button id="toggle-memory" title="Forgotten rSpaces">💭 Memory</button>
 			<button id="zoom-in" title="Zoom In">+</button>
 			<button id="zoom-out" title="Zoom Out">-</button>
 			<button id="reset-view" title="Reset View">Reset</button>
@@ -1022,14 +1022,76 @@
 				// Reverse the canvas transform to get canvas coordinates
 				const canvasX = (viewCenterX - panX) / scale;
 				const canvasY = (viewCenterY - panY) / scale;
-				// Add jitter so shapes don't stack perfectly
+				return { x: canvasX, y: canvasY };
+			}
+
+			// Check if two rectangles overlap (with padding gap)
+			function rectsOverlap(a, b, gap = 20) {
+				return !(a.x + a.width + gap <= b.x ||
+						 b.x + b.width + gap <= a.x ||
+						 a.y + a.height + gap <= b.y ||
+						 b.y + b.height + gap <= a.y);
+			}
+
+			// Collect bounding boxes of all visible shapes on the canvas
+			function getExistingShapeRects() {
+				return [...canvasContent.children]
+					.filter(el => el.tagName && el.tagName.includes('-') &&
+								  !el.tagName.toLowerCase().includes('arrow') &&
+								  typeof el.x === 'number' && typeof el.width === 'number' &&
+								  el.width > 0)
+					.map(el => ({ x: el.x, y: el.y, width: el.width, height: el.height }));
+			}
+
+			// Find a free position near the viewport center that doesn't overlap existing shapes
+			function findFreePosition(width, height) {
+				const center = getViewportCenter();
+				const candidateX = center.x - width / 2;
+				const candidateY = center.y - height / 2;
+				const gap = 20;
+				const existing = getExistingShapeRects();
+
+				if (existing.length === 0) {
+					return { x: candidateX, y: candidateY };
+				}
+
+				const candidate = { x: candidateX, y: candidateY, width, height };
+				const hasOverlap = (rect) => existing.some(e => rectsOverlap(rect, e, gap));
+
+				if (!hasOverlap(candidate)) {
+					return { x: candidateX, y: candidateY };
+				}
+
+				// Spiral search: try right, below, left, above with increasing steps
+				const stepX = width + gap;
+				const stepY = height + gap;
+				for (let ring = 1; ring <= 20; ring++) {
+					const offsets = [
+						{ x: ring * stepX, y: 0 },             // right
+						{ x: 0, y: ring * stepY },             // below
+						{ x: -ring * stepX, y: 0 },            // left
+						{ x: 0, y: -ring * stepY },            // above
+						{ x: ring * stepX, y: ring * stepY },   // bottom-right
+						{ x: -ring * stepX, y: ring * stepY },  // bottom-left
+						{ x: ring * stepX, y: -ring * stepY },  // top-right
+						{ x: -ring * stepX, y: -ring * stepY }, // top-left
+					];
+					for (const off of offsets) {
+						const test = { x: candidateX + off.x, y: candidateY + off.y, width, height };
+						if (!hasOverlap(test)) {
+							return { x: test.x, y: test.y };
+						}
+					}
+				}
+
+				// Fallback: place with jitter if everything is occupied
 				return {
-					x: canvasX + (Math.random() - 0.5) * 40,
+					x: candidateX + (Math.random() - 0.5) * 100,
-					y: canvasY + (Math.random() - 0.5) * 40
+					y: candidateY + (Math.random() - 0.5) * 100
 				};
 			}
 
-			// Create a shape, position it at viewport center, add to canvas, and register for sync
+			// Create a shape, position it without overlapping others, add to canvas, and register for sync
 			function newShape(tagName, props = {}) {
 				const id = `shape-${Date.now()}-${++shapeCounter}`;
 				const defaults = SHAPE_DEFAULTS[tagName] || { width: 300, height: 200 };
@@ -1037,9 +1099,9 @@
 				const shape = document.createElement(tagName);
 				shape.id = id;
 
-				const center = getViewportCenter();
+				const pos = findFreePosition(defaults.width, defaults.height);
-				shape.x = center.x - defaults.width / 2;
+				shape.x = pos.x;
-				shape.y = center.y - defaults.height / 2;
+				shape.y = pos.y;
 				shape.width = defaults.width;
 				shape.height = defaults.height;