Desktop App

The desktop app (apps/app) is a Tauri shell around a Solid frontend. The frontend owns the editor UI and all Tailwind/source-editing logic; the Rust backend owns filesystem, process, and PTY access via Tauri commands.

Editor UI

The workspace (src/components/Workspace.tsx) is organized around a live preview with panels on both sides:

• Left rail + flyout — Pages, Assets (Files/Fonts tabs), CMS, Config (Docs — user markdown for the AI under .plyy/rules|docs — plus Theme and Env tabs), History, Audit, and AI Chat panels
• Left sidebar — Elements (navigator tree), Insert (element presets, project components, and the component Library backed by packages/agent-skills), and Files tabs
• Preview — iframe running the project’s astro dev, with element selection via the editor bridge, a toolbar, and mobile/breakpoint preview
• Right sidebar — the Inspector: style panel (layout, spacing, size, position, typography, background, borders, effects, flex/grid controls), attributes, component section, page settings, and theme panel
• Bottom panel — tabs for Terminal (integrated PTY), Logs (dev-server output), and Mobile (mobile preview)
• Quick Insert palette — ⌘E opens insert mode (add an element next to the selection); ⌘F opens find mode (jump to any element on the page by tag name)
• Code editor — CodeMirror-based editor in a separate window (editor-window/) with a file tree (includes project docs under .plyy/), tabs, and unsaved-changes handling; Project docs panel can open a file here via BroadcastChannel

Frontend libraries (src/lib)

The visual style editing is implemented as a family of tailwind*.ts modules (size, flex, grid, position, typography, background, borders, effects, classes) that translate inspector controls to Tailwind class changes. Around them:

• selection.ts, domTree.ts — preview element selection and tree modeling
• history.ts, pendingEdits.ts, buffers.ts — undo/redo and edit batching
• structuralEdit.ts, textEdit.ts, extractComponent.ts, detachComponent.ts — source-level operations
• themeVars.ts, baseStyles.ts, breakpoints.ts — theme variables and responsive editing
• pages.ts, file-tree.ts, cms.ts, assetMeta.ts, projectDocs.ts — pages, files, CMS, asset metadata, and project AI docs (.plyy/rules|docs)

Most of these modules have colocated bun test suites (*.test.ts).

Tauri commands (src-tauri/src/commands)

Module	Responsibilities
project.rs	List/create projects, scaffold from template, bun install, sync editor bridge, deploy Sanity schema
edit.rs	Read/apply element edits (via the edit engine), read/write/list project files (including `.plyy/rules
pages.rs	List, create, rename, move, duplicate, and delete pages and page folders
assets.rs	List, import, rename, replace, and delete assets; asset folders; find asset usage
process.rs	Start/stop the project’s astro dev process and track its URL/state
pty.rs	Create, write to, and resize the integrated terminal
window.rs	Window close handling and dirty-state tracking

The frontend calls these through the typed wrappers in src/lib/tauri.ts.

Runtime model

Bun is the project runtime: in development the app uses the local Bun install, and production builds bundle Bun as a Tauri sidecar (pnpm --filter app prepare:sidecar). Projects are scaffolded from @plyy/astro-template and run their own Astro dev server, which the preview iframe loads.