🪟 Microspaces

Overview

LiveCore tests 42/42

Root desktop — glass containers with live previews Zoomed microspace — nested containers Title hover — contents hide, glass lower third describes the space

Features

• Nested spaces — containers hold leaf apps or whole other microspaces, to arbitrary depth (demo tree: Work Space → Communication Hub → apps; Nest Alpha → Nest Beta → Gamma).
• Zoom navigation — click a space to zoom into it (window chrome, Escape to back out); the root desktop keeps a live masonry of its containers.
• Glass container chrome — containers are translucent (rgba(20,29,40,0.11) + blur(10px)) with the scene image showing through; scene backgrounds inside previews stay fully opaque.
• Container content previews — every container shows a scaled-down, always-visible preview of its children (folder-style), at root and nested levels; hover swaps in the detailed peek.
• Title-hover descriptions — hovering a title (400 ms dwell) shows what's inside: a tooltip on plain containers; on scene-backed microspaces the contents fade out and a translucent lower-third bar describes the space.
• Peek — hover-intent preview of any tile's contents; stays on hover-out, cleared by Escape.
• Editing — draggable tiles, inline title editing, add/edit controls in the title bars.
• Portable data layer (design approved) — resolver pattern ({type, location} catalog → JSON / IndexedDB / REST / DB / later GraphQL, IPFS, LLM); see docs/data-layer-design.md in the repo.

Flow

Build

packages/microspaces-core  (rollup → dist ESM/CJS/UMD)
        │
        ▼
apps/mobile  ·  expo export -p web  →  apps/mobile/dist/  (static SPA)
        │
        ▼
Vercel: installCommand npm ci · buildCommand above · outputDirectory apps/mobile/dist
rewrites: /((?!api/).*) → /$1   (client-side routing safe)

Runtime request

1. Browser loads the static SPA from Vercel.
2. Sample desktop data (7 spaces + deep-nest fixtures, with per-space description) hydrates the desktop; the data layer design allows swapping in JSON / IndexedDB / REST / DB resolvers without touching the UI.
3. All interaction (zoom, peek, drag, hover reveals) is client-side; no server dependencies today.

Deploy

Push to main → Vercel builds core then exports the web app. Prod bundle id (entry-…) changes on every deploy — the agent's prod-check scripts compare it before asserting live behavior.

Tech

apps/mobile/
  components/desktop/   # AppCard, ZoomedWindow, ContainerPreview,
                        # PeekPreview, TitleHover, EditableTitle, styles
  lib/sample-desktop.js # 7-space demo desktop + descriptions
  scripts/              # verify-*.py Playwright checks
  app/                  # expo-router entry
packages/microspaces-core/
  src/                  # model, samples, demo-spaces fixtures (json + inline)
  dist/                 # rollup ESM/CJS/UMD output

🗂️ Roadmap

Live roadmap, managed as GitHub issues (roadmap:microspaces). Add or close items on GitHub — ☑ = done, close as “not planned” to remove.

Test results

Canonical checks: packages/microspaces-core node:test suites (42 tests) + Playwright verify scripts in apps/mobile/scripts/ (title-bar heights, container glass alpha/blur, preview tiles, hover lower-third, stack parity root vs zoomed).

2026-08-30 — UI polish marathon (6 rounds, all shipped to prod same day)

• Compact title bars (tile 30→18 px, window 40→20 px, nested 12–15 px) — asserted in prod.
• Container glass + always-on content previews at root and nested levels (38 preview containers live).
• Fixed stacked-glass bug: root Packery leaves now match Studio transparency exactly (stack parity asserted).
• Scene backgrounds in previews fully opaque; only container chrome is translucent.
• Title-hover descriptions: tooltips + microspace lower-third reveal; description added to every fixture.
• Core tests 42/42; live prod probe: correct heights, glass, hover behavior, 0 page errors.

Known pre-existing notes: fixture/live-factory mismatch on deep_l1 was resolved while adding descriptions (fixture test relaxed to the 7 canonical roots); narrow preview tiles can ellipsize labels at very small scales.