Vision

Interactive Svelte prototype hub. Adapts pal-e-playground's CSS-first philosophy with Svelte reactivity for features that need interactivity — kanban boards, drag-and-drop, real-time filters, form wizards. No SvelteKit, no SSR. Svelte + Vite compiles to static files. Each subdirectory is a project prototype. The board tracks which prototypes need building across all projects. Playground-approved designs promote directly to production repos — .svelte files ARE HTML.

User Stories

Who uses this prototype hub, what they need, and how we measure success.

Role	Key	Story	Success Metric
Superuser (Lucas)	story:prototype-iterate	I can see and interact with feature prototypes on my phone, iterate visually, and approve designs before they go to production.	Every production feature was playground-approved first. Zero "agent built it but I hate it" moments.
Superuser (Lucas)	story:client-demo	I can share a prototype URL with clients to demo upcoming features before they're production-ready.	Client can view prototype on their own device.
Agent (Dev)	story:agent-promote	I can copy .svelte source from the playground directly into a production repo with minimal changes.	Promotion is copy-paste + data bindings, not a rewrite.

Plan

No plan yet — this is board-driven work. Prototypes are scoped as tickets on the board.

Board

board-svelte-playground

Status

Project created 2026-03-24. Forgejo repo initialized. Hub scaffolded with shared CSS + pal-e-app kanban prototype (issues #1, #2). Deployed to playground Tailscale funnel at /svelte/ via pal-e-deployments PR #48 (issue #3). Live at https://playground.tail5b443a.ts.net/svelte/.

Milestones

None yet.

Architecture

Lightweight — no backend, no database. Svelte + Vite compiles .svelte files to static HTML/JS/CSS. Served by nginx via hostPath volume on k3s (same pattern as pal-e-playground) or dedicated Tailscale funnel.

svelte-playground/
├── shared.css              ← unified CSS design system (source of truth)
├── index.html              ← hub landing page
├── package.json            ← svelte + vite
├── vite.config.js          ← multi-page entry points
├── pal-e-app/
│   ├── index.html          ← entry point
│   └── board.svelte        ← kanban board prototype
├── westside/               ← future
├── mcd-tracker/            ← future
└── minio/                  ← future

Key decisions:

• Svelte 5 (runes), not SvelteKit — no routing, no SSR, no adapter
• Vite multi-page mode — each HTML file is an entry point
• shared.css is the same design tokens as pal-e-playground (Atkinson Hyperlegible, light theme, CSS custom properties)
• npm run dev for iteration, npm run build for static deployment
• Each project subdirectory follows: index.html (entry) + *.svelte (components)

Repos

Repo	Platform	Role	Status
svelte-playground	Forgejo	Svelte + Vite prototype hub	active

Backlog

Query: list_board_items(board_slug="board-svelte-playground", column="backlog")