Phase 0 MUSE alpha skeleton and SRS docs

.gitignore

@@ -0,0 +1,7 @@
+node_modules/
+dist/
+src-tauri/target/
+src-tauri/gen/
+.DS_Store
+*.log
+.env

README.md

@@ -0,0 +1,34 @@
+# MUSE Alpha
+
+Creative browser prototype: Tauri v2 + Rust + SolidJS.
+
+This repo currently contains:
+- `docs/MUSE_SRS_v3.md` — Master Software Requirements Specification v3.0
+- `docs/MUSE_SRS_v4.md` — Master SRS v4.0 implementation guide
+- Phase 0 implementation skeleton: custom titlebar, sidebar, onboarding, 8-theme system, home page, settings store, and SQLite migration setup.
+
+## Phase 0 status
+
+Implemented from current Tauri v2/SolidJS docs:
+- Tauri v2 app skeleton (`src-tauri/`)
+- SolidJS frontend (`src/`)
+- Custom undecorated window titlebar
+- Sidebar navigation shell
+- Home page with greeting and static URL/search bar
+- Theme token system with 8 presets
+- Onboarding flow using Tauri Store
+- SQLite plugin with Phase 0 migration
+- Capabilities configured for window controls, store, SQL, FS, clipboard, stronghold/global shortcut preparation
+
+## Dev
+
+```bash
+pnpm install
+pnpm tauri dev
+```
+
+Frontend-only build:
+
+```bash
+pnpm build
+```

docs/MUSE_SRS_v3.md

@@ -0,0 +1,205 @@
+# MUSE — Master Software Requirements Specification v3.0
+### Creative Browser · Tauri v2 + Rust · Complete Product Definition
+
+> Canonical v3 requirements document supplied by the product owner in the implementation prompt.
+
+This document defines the full Muse product vision, architecture, browser fundamentals, ad-block v3, creative modules, artist-exclusive features, UI/UX system, business model, roadmap, and non-goals.
+
+## Document map
+
+Incorporates and supersedes:
+- SRS v1.0 (original vision + market research)
+- SRS v2.0 (deep UX/UI + themes + ad-block)
+- 01-DATABASE-ARCHITECTURE.md
+- 02-ADBLOCK-INTEGRATION.md
+- 03-RUST-ARCHITECTURE.md
+- 04-USER-RESEARCH.md
+- 05-PLATFORM-SPECIFIC.md
+- 06-MOBILE-TABLET-UX.md
+- 07-ALGORITHMS-THIRDPARTY.md
+- 08-UI-UX-COMPLETE.md
+
+## Core mission
+
+Muse is the first browser designed specifically for the visual artist's creative loop:
+
+```text
+Discover → Collect → Organize → Reference → Create → Repeat
+```
+
+Muse replaces the fragmented five-app workflow:
+- Chrome/Firefox: full browser
+- PureRef: Board module / infinite reference canvas
+- Eagle App: Library module
+- Pinterest/Are.na: Boards + Library without algorithm/account/subscription
+- Standalone color picker: integrated extraction, picker, search, export
+
+## Locked non-goals
+
+- No AI image generation
+- No subscription model
+- No hosted cloud storage
+- No social feed or algorithm
+- No drawing tools
+- No real-time collaboration for v1 scope
+- No telemetry without explicit consent
+- No bundled Chromium
+- No mandatory account
+
+## Architecture summary
+
+Stack:
+- Tauri v2 + Rust core
+- SolidJS shell frontend
+- System WebViews for browser tabs
+- SQLite + WAL for local data
+- Stronghold for encrypted credentials
+- `tauri-plugin-store` for settings
+- `brave/adblock-rust` for filter-rule engine
+
+Rust module plan:
+- `browser/` tab lifecycle, navigation, injection, tab sleep, find
+- `adblock/` engine, filter lists, user rules, subscriptions, stats, cosmetic injection
+- `library/` SQLite CRUD, thumbnails, color extraction, dedupe, FTS5 search, smart folders
+- `board/` infinite canvas, autosave, items, export, annotations
+- `credentials/` vault, autofill, generator
+- `downloads/`, `cookies/`, `sessions/`, `permissions/`, `privacy/`, `color/`, `workspace/`
+
+## Database summary
+
+SQLite with startup PRAGMAs:
+
+```sql
+PRAGMA journal_mode = WAL;
+PRAGMA synchronous = NORMAL;
+PRAGMA mmap_size = 268435456;
+PRAGMA cache_size = -16384;
+PRAGMA temp_store = MEMORY;
+PRAGMA foreign_keys = ON;
+PRAGMA busy_timeout = 5000;
+PRAGMA auto_vacuum = INCREMENTAL;
+```
+
+New v3 tables include:
+- `sessions`, `session_tabs`
+- `credentials` pointers to Stronghold keys
+- `downloads`
+- `cookie_rules`
+- `site_permissions`
+- `site_zoom`
+- `adblock_subscriptions`
+- `adblock_user_rules`
+- `board_annotations`
+- `study_sessions`
+
+## Browser fundamentals covered
+
+- Cookie management
+- Password and credential manager
+- Download manager
+- Tab sleep
+- Session management
+- Find in page
+- Per-site zoom memory
+- Permission system
+- HTTPS-first and safe browsing without Google URL API
+- DNS over HTTPS
+- Print
+- Autofill
+- WebRTC and fingerprint protection
+- Offline/error pages
+- Media autoplay policy
+- Certificate/security info
+
+## Ad-block v3
+
+Hybrid design in v3:
+- Navigation blocking
+- Native network blocking where available
+- Cosmetic filtering
+- Built-in multi-list subscriptions
+- Custom uBlock-syntax rules
+- Statistics and transparency
+- Cookie consent auto-denial
+
+Built-in lists:
+- EasyList
+- EasyPrivacy
+- uBlock filters
+- uBlock Unbreak
+- Fanboy Annoyances
+- Peter Lowe
+- Malware Domains
+- AdGuard Base
+- AdGuard Social
+- IndianList
+
+## Core creative modules
+
+- Home Page
+- URL Bar System
+- Sidebar & Tab System
+- Library Module
+- Board Module / PureRef replacement
+- Split View System
+- Color Tools
+- Image Hover Overlay
+
+## Artist-exclusive v3 modules
+
+- Quick Study Mode
+- Board annotations/markup
+- Rotation, flip, light table, overlays
+- Proportion and grid overlays
+- Source site intelligence profiles
+- Library timeline view
+- Color export for artist apps
+- Reference sheet export
+- Workspace sessions for projects
+
+## UI/UX system
+
+Theme presets:
+- Dusk
+- Parchment
+- Midnight
+- Studio
+- Moss
+- Rose
+- Obsidian
+- Linen
+
+Typography:
+- Geist UI
+- Lora reader body
+- Geist Mono for code/dimensions
+
+Onboarding:
+1. Welcome
+2. Make it yours (name + theme)
+3. Name first workspace
+
+Keyboard/command palette includes standard browser shortcuts plus Muse creative shortcuts.
+
+## Business model
+
+- Free tier forever
+- Muse one-time purchase
+- Muse Pro one-time upgrade
+- Pay-What-You-Want launch window
+- No subscription
+
+## Roadmap
+
+- Phase 0: Foundation
+- Phase 1: Browser basics
+- Phase 2: Browser fundamentals complete
+- Phase 3: Creative core
+- Phase 4: Power features
+- Phase 5: Ship Windows
+- Phase 6: Cross-platform
+- Phase 7: Ecosystem
+
+## Note
+
+The original full v3 text was supplied in-chat and is treated as the requirements source for this repository. Phase 0 implementation begins from the v4 implementation guide while preserving these v3 product requirements.

docs/MUSE_SRS_v4.md

@@ -0,0 +1,170 @@
+# MUSE — Master SRS v4.0
+## Creative Browser · Tauri v2 + Rust · Complete Implementation Guide
+
+> One window. Multiple child webviews. One ad-block engine. All platforms.
+
+This implementation guide supersedes earlier architecture/code notes for v1.0 implementation sequencing.
+
+## Critical architecture decisions
+
+### 1. Single OS window + child webviews for tabs
+
+Muse is one OS window containing:
+- Shell WebView: SolidJS UI (titlebar, sidebar, URL bar, home, library, boards)
+- Child tab WebViews: one per browser tab
+
+Implemented later with `window.add_child()` behind Tauri's `unstable` feature. Phase 0 does **not** use child WebViews yet.
+
+### 2. Cross-platform ad-block = Rust engine + JS injection
+
+The v4 guide deliberately removes platform-native WebView2/WKContentRuleList/WebKitGTK-specific blocking from the v1 cross-platform plan.
+
+Ad-block layers:
+- Layer 0: Navigation handler in Rust
+- Layer 1: JS fetch/XHR override
+- Layer 2: DOM CSP injection
+- Layer 3: Cosmetic CSS injection
+- Layer 4: Scriptlet injection
+
+### 3. `unstable` feature is acceptable for desktop tabs
+
+`tauri = { version = "2", features = ["unstable"] }` is planned once Phase 1 implements child tab WebViews.
+
+### 4. Mobile tab model differs
+
+Mobile uses conceptual tab state plus `WebviewWindow` until Tauri supports child webviews on mobile. Desktop Windows remains v1 target.
+
+## Repository structure target
+
+```text
+muse/
+├── package.json
+├── vite.config.ts
+├── index.html
+├── src/
+│   ├── index.tsx
+│   ├── App.tsx
+│   ├── components/
+│   ├── store/
+│   └── styles/
+└── src-tauri/
+    ├── Cargo.toml
+    ├── build.rs
+    ├── tauri.conf.json
+    ├── capabilities/default.json
+    ├── migrations/
+    └── src/
+        ├── main.rs
+        ├── lib.rs
+        ├── state.rs
+        ├── settings.rs
+        ├── browser/
+        ├── adblock/
+        ├── library/
+        ├── board/
+        ├── credentials/
+        ├── downloads/
+        ├── sessions/
+        └── db/
+```
+
+## Phase 0 implementation scope
+
+Deliverable: running app with custom titlebar, theme, and sidebar navigation.
+
+User can:
+- Open Muse on Windows
+- See Dusk theme, custom titlebar, sidebar
+- Click sidebar icons (Library/Board placeholders)
+- See Home page with greeting and static URL bar
+- Switch all 8 themes
+- Complete onboarding in under 60 seconds
+
+Not included yet:
+- Real browser tabs
+- Ad-block
+- Library/Board functionality
+
+Phase 0 work items:
+- SolidJS Tauri app skeleton
+- Tauri v2 `Cargo.toml`
+- `tauri.conf.json` with undecorated window
+- Capabilities file
+- Custom titlebar with window controls
+- Sidebar shell
+- Home page shell
+- Theme token CSS for 8 themes
+- App state module
+- SQLite init and migration
+- Tauri Store settings
+- Onboarding flow
+
+## Phase 1 target
+
+Real multi-tab browser:
+- `TabManager`
+- `window.add_child()` child WebViews
+- tab create/close/switch/navigate
+- sidebar tab list
+- URL bar navigation
+- title/favicon observer
+- resize handling
+- per-site zoom
+
+## Phase 2 target
+
+Ad-block and privacy:
+- adblock-rust engine
+- 10 bundled lists
+- JS network-request interception
+- cookie consent scriptlet
+- WebRTC protection
+- canvas noise
+- navigation blocking
+- cosmetic injection
+- updater
+- allowlist
+- shield UI
+- tab sleep
+- HTTPS-first
+- Stronghold password vault basics
+
+## Phase 3 target
+
+Library + Board core:
+- image hover overlay
+- save-to-library
+- library search/grid/detail
+- board infinite canvas
+- board item CRUD/autosave
+- palette extraction
+- download manager
+- sessions auto-save
+
+## Phase 4 target
+
+Artist features and polish:
+- Quick Study Mode
+- annotations
+- rotate/flip/light table
+- overlays
+- timeline
+- source profiles
+- export formats
+- reference sheets
+- session manager UI
+- command palette
+- permissions/cert/offline/print/DoH
+
+## Phase 5 target
+
+Windows v1 shipping:
+- NSIS installer
+- updater
+- code signing
+- optional crash reporting
+- performance audit
+
+## Current implementation note
+
+The committed code implements the Phase 0 scope only. Phase 1+ modules are represented as directory placeholders and comments where useful, but no tab WebViews are created in Phase 0.

index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>MUSE Alpha</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,27 @@
+{
+  "name": "musealpha",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "tauri": "tauri"
+  },
+  "dependencies": {
+    "@tauri-apps/api": "^2.0.0",
+    "@tauri-apps/plugin-store": "^2.0.0",
+    "@tauri-apps/plugin-sql": "^2.0.0",
+    "@tauri-apps/plugin-opener": "^2.0.0",
+    "@tauri-apps/plugin-clipboard-manager": "^2.0.0",
+    "@tauri-apps/plugin-fs": "^2.0.0",
+    "solid-js": "^1.9.0"
+  },
+  "devDependencies": {
+    "@tauri-apps/cli": "^2.0.0",
+    "typescript": "~5.6.0",
+    "vite": "^6.0.0",
+    "vite-plugin-solid": "^2.11.0"
+  }
+}

src-tauri/Cargo.toml

@@ -0,0 +1,34 @@
+[package]
+name = "muse"
+version = "0.1.0"
+description = "MUSE Alpha"
+authors = ["asdf98"]
+edition = "2021"
+
+[lib]
+name = "muse_lib"
+crate-type = ["staticlib", "cdylib", "rlib"]
+
+[build-dependencies]
+tauri-build = { version = "2", features = [] }
+
+[dependencies]
+tauri = { version = "2", features = [] }
+tauri-plugin-opener = "2"
+tauri-plugin-store = "2"
+tauri-plugin-fs = "2"
+tauri-plugin-sql = { version = "2", features = ["sqlite"] }
+tauri-plugin-clipboard-manager = "2"
+tauri-plugin-stronghold = "2"
+serde = { version = "1", features = ["derive"] }
+serde_json = "1"
+
+[target."cfg(not(any(target_os = \"android\", target_os = \"ios\")))".dependencies]
+tauri-plugin-global-shortcut = "2"
+
+[profile.dev.package.scrypt]
+opt-level = 3
+
+[features]
+default = ["custom-protocol"]
+custom-protocol = ["tauri/custom-protocol"]

src-tauri/build.rs

@@ -0,0 +1,3 @@
+fn main() {
+    tauri_build::build()
+}

src-tauri/capabilities/default.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "../gen/schemas/desktop-schema.json",
+  "identifier": "default",
+  "description": "MUSE Alpha Phase 0 default capability set",
+  "windows": ["main"],
+  "permissions": [
+    "core:default",
+    "opener:default",
+    "core:window:allow-start-dragging",
+    "core:window:allow-minimize",
+    "core:window:allow-toggle-maximize",
+    "core:window:allow-close",
+    "store:default",
+    "sql:default",
+    "sql:allow-execute",
+    "fs:default",
+    "clipboard-manager:allow-read-text",
+    "clipboard-manager:allow-write-text",
+    "global-shortcut:allow-register",
+    "global-shortcut:allow-unregister",
+    "global-shortcut:allow-unregister-all",
+    "global-shortcut:allow-is-registered",
+    "stronghold:default"
+  ]
+}

src-tauri/icons/README.md

@@ -0,0 +1 @@
+Add generated Tauri icon assets here before packaging (`pnpm tauri icon`).

src-tauri/migrations/001_phase0_init.sql

@@ -0,0 +1,21 @@
+CREATE TABLE IF NOT EXISTS app_meta (
+  key TEXT PRIMARY KEY NOT NULL,
+  value TEXT NOT NULL,
+  updated_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE TABLE IF NOT EXISTS settings (
+  key TEXT PRIMARY KEY NOT NULL,
+  value_json TEXT NOT NULL,
+  updated_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE TABLE IF NOT EXISTS workspaces (
+  id TEXT PRIMARY KEY NOT NULL,
+  name TEXT NOT NULL,
+  accent TEXT NOT NULL DEFAULT '#C49A3C',
+  created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  updated_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP
+);
+
+INSERT OR IGNORE INTO app_meta (key, value) VALUES ('schema_version', '1');

src-tauri/src/lib.rs

@@ -0,0 +1,38 @@
+mod settings;
+mod state;
+
+use tauri_plugin_sql::{Migration, MigrationKind};
+
+#[cfg_attr(mobile, tauri::mobile_entry_point)]
+pub fn run() {
+    tauri::Builder::default()
+        .plugin(tauri_plugin_opener::init())
+        .plugin(tauri_plugin_store::Builder::default().build())
+        .plugin(tauri_plugin_fs::init())
+        .plugin(tauri_plugin_clipboard_manager::init())
+        .plugin(
+            tauri_plugin_sql::Builder::default()
+                .add_migrations("sqlite:muse.db", migrations())
+                .build(),
+        )
+        .manage(state::AppState::default())
+        .invoke_handler(tauri::generate_handler![
+            settings::phase0_status,
+        ])
+        .setup(|app| {
+            #[cfg(desktop)]
+            app.handle().plugin(tauri_plugin_global_shortcut::Builder::new().build())?;
+            Ok(())
+        })
+        .run(tauri::generate_context!())
+        .expect("error while running Muse Alpha");
+}
+
+fn migrations() -> Vec<Migration> {
+    vec![Migration {
+        version: 1,
+        description: "phase0_init",
+        sql: include_str!("../migrations/001_phase0_init.sql"),
+        kind: MigrationKind::Up,
+    }]
+}

src-tauri/src/main.rs

@@ -0,0 +1,5 @@
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
+
+fn main() {
+    muse_lib::run()
+}

src-tauri/src/settings.rs

@@ -0,0 +1,4 @@
+#[tauri::command]
+pub fn phase0_status() -> &'static str {
+    "MUSE Alpha Phase 0 shell is installed"
+}

src-tauri/src/state.rs

@@ -0,0 +1,4 @@
+#[derive(Default)]
+pub struct AppState {
+    pub phase: &'static str,
+}

src-tauri/tauri.conf.json

@@ -0,0 +1,52 @@
+{
+  "$schema": "https://schema.tauri.app/config/2",
+  "productName": "MUSE Alpha",
+  "version": "0.1.0",
+  "identifier": "app.muse.alpha",
+  "build": {
+    "beforeDevCommand": "pnpm dev",
+    "devUrl": "http://localhost:1420",
+    "beforeBuildCommand": "pnpm build",
+    "frontendDist": "../dist"
+  },
+  "app": {
+    "withGlobalTauri": false,
+    "windows": [
+      {
+        "label": "main",
+        "title": "MUSE Alpha",
+        "width": 1280,
+        "height": 800,
+        "minWidth": 960,
+        "minHeight": 640,
+        "resizable": true,
+        "fullscreen": false,
+        "decorations": false,
+        "transparent": false,
+        "shadow": true,
+        "center": true,
+        "visible": true,
+        "zoomHotkeys": false
+      }
+    ],
+    "security": {
+      "csp": null
+    }
+  },
+  "plugins": {
+    "sql": {
+      "preload": ["sqlite:muse.db"]
+    }
+  },
+  "bundle": {
+    "active": true,
+    "targets": "all",
+    "icon": [
+      "icons/32x32.png",
+      "icons/128x128.png",
+      "icons/128x128@2x.png",
+      "icons/icon.icns",
+      "icons/icon.ico"
+    ]
+  }
+}

src/App.tsx

@@ -0,0 +1,72 @@
+import { createEffect, createResource, createSignal, Match, Switch } from "solid-js";
+import { loadSettings, saveSettings, DEFAULT_SETTINGS } from "./store/settings";
+import type { MuseSettings, ThemeName } from "./types";
+import Titlebar from "./components/Titlebar";
+import Sidebar from "./components/Sidebar";
+import HomePage from "./components/HomePage";
+import Onboarding from "./components/Onboarding";
+import PlaceholderPanel from "./components/PlaceholderPanel";
+import ThemeSwitcher from "./components/ThemeSwitcher";
+
+function App() {
+  const [initial] = createResource(loadSettings);
+  const [settings, setSettings] = createSignal<MuseSettings>(DEFAULT_SETTINGS);
+
+  createEffect(() => {
+    const loaded = initial();
+    if (loaded) setSettings(loaded);
+  });
+
+  createEffect(() => {
+    document.documentElement.dataset.theme = settings().theme;
+  });
+
+  const updateSettings = (patch: Partial<MuseSettings>) => {
+    const next = { ...settings(), ...patch };
+    setSettings(next);
+    void saveSettings(next);
+  };
+
+  const completeOnboarding = (userName: string, workspaceName: string, theme: ThemeName) => {
+    updateSettings({ userName, workspaceName, theme, onboardingComplete: true, activeSection: "home" });
+  };
+
+  return (
+    <Switch>
+      <Match when={!settings().onboardingComplete}>
+        <Onboarding onComplete={completeOnboarding} />
+      </Match>
+      <Match when={settings().onboardingComplete}>
+        <div class="app-shell">
+          <Titlebar workspaceName={settings().workspaceName} />
+          <Sidebar active={settings().activeSection} onNavigate={(activeSection) => updateSettings({ activeSection })} />
+          <main class="content-shell">
+            <Switch>
+              <Match when={settings().activeSection === "home"}>
+                <HomePage name={settings().userName} workspaceName={settings().workspaceName} />
+              </Match>
+              <Match when={settings().activeSection === "library"}>
+                <PlaceholderPanel title="Library" subtitle="Phase 3 will add image import, grid, tags, search, and color metadata." />
+              </Match>
+              <Match when={settings().activeSection === "board"}>
+                <PlaceholderPanel title="Board" subtitle="Phase 3 will add the PureRef-style infinite canvas." />
+              </Match>
+              <Match when={settings().activeSection === "settings"}>
+                <section class="panel settings-panel">
+                  <div>
+                    <p class="eyebrow">Settings</p>
+                    <h1>Appearance</h1>
+                    <p class="muted">Phase 0 settings persist locally with Tauri Store.</p>
+                  </div>
+                  <ThemeSwitcher selected={settings().theme} onSelect={(theme) => updateSettings({ theme })} />
+                </section>
+              </Match>
+            </Switch>
+          </main>
+        </div>
+      </Match>
+    </Switch>
+  );
+}
+
+export default App;

src/components/HomePage.tsx

@@ -0,0 +1,37 @@
+export default function HomePage(props: { name: string; workspaceName: string }) {
+  const hour = new Date().getHours();
+  const greeting = hour < 12 ? "Good morning" : hour < 18 ? "Good afternoon" : "Good evening";
+
+  return (
+    <section class="home-page">
+      <div class="hero-card">
+        <p class="eyebrow">{props.workspaceName}</p>
+        <h1>{greeting}, {props.name}.</h1>
+        <p class="muted">Muse Phase 0 is ready: shell, themes, onboarding, settings, and local database foundation.</p>
+        <div class="url-shell" aria-label="Static phase 0 URL bar">
+          <span>⌕</span>
+          <input disabled value="Search or enter a URL — enabled in Phase 1" />
+          <span class="kbd">Ctrl L</span>
+        </div>
+      </div>
+
+      <div class="dashboard-grid">
+        <article class="mini-card">
+          <p class="eyebrow">Recent boards</p>
+          <h2>Empty studio</h2>
+          <p>Boards arrive in Phase 3.</p>
+        </article>
+        <article class="mini-card">
+          <p class="eyebrow">Recently saved</p>
+          <h2>No library items yet</h2>
+          <p>The Library module lands after browser/ad-block foundations.</p>
+        </article>
+        <article class="mini-card">
+          <p class="eyebrow">Continue browsing</p>
+          <h2>Tabs next</h2>
+          <p>Phase 1 adds real WebView tabs and URL navigation.</p>
+        </article>
+      </div>
+    </section>
+  );
+}

src/components/Onboarding.tsx

@@ -0,0 +1,38 @@
+import { createSignal, Match, Switch } from "solid-js";
+import type { ThemeName } from "../types";
+import ThemeSwitcher from "./ThemeSwitcher";
+
+export default function Onboarding(props: { onComplete: (name: string, workspace: string, theme: ThemeName) => void }) {
+  const [step, setStep] = createSignal(0);
+  const [name, setName] = createSignal("Artist");
+  const [workspace, setWorkspace] = createSignal("First Workspace");
+  const [theme, setTheme] = createSignal<ThemeName>("dusk");
+
+  return (
+    <main class="onboarding" data-theme={theme()}>
+      <div class="onboarding-card">
+        <Switch>
+          <Match when={step() === 0}>
+            <p class="eyebrow">Welcome to Muse</p>
+            <h1>One quiet studio for visual research.</h1>
+            <p class="muted">No account. No feed. Local-first by design.</p>
+            <button class="primary" onClick={() => setStep(1)}>Begin</button>
+          </Match>
+          <Match when={step() === 1}>
+            <p class="eyebrow">Make it yours</p>
+            <h1>Choose your name and atmosphere.</h1>
+            <label>Name<input value={name()} onInput={(e) => setName(e.currentTarget.value)} /></label>
+            <ThemeSwitcher selected={theme()} onSelect={setTheme} />
+            <button class="primary" onClick={() => setStep(2)}>Next</button>
+          </Match>
+          <Match when={step() === 2}>
+            <p class="eyebrow">First workspace</p>
+            <h1>Name the project room.</h1>
+            <label>Workspace<input value={workspace()} onInput={(e) => setWorkspace(e.currentTarget.value)} /></label>
+            <button class="primary" onClick={() => props.onComplete(name(), workspace(), theme())}>Enter Muse</button>
+          </Match>
+        </Switch>
+      </div>
+    </main>
+  );
+}

src/components/PlaceholderPanel.tsx

@@ -0,0 +1,9 @@
+export default function PlaceholderPanel(props: { title: string; subtitle: string }) {
+  return (
+    <section class="panel placeholder-panel">
+      <p class="eyebrow">Phase placeholder</p>
+      <h1>{props.title}</h1>
+      <p class="muted">{props.subtitle}</p>
+    </section>
+  );
+}

src/components/Sidebar.tsx

@@ -0,0 +1,34 @@
+import type { MuseSettings } from "../types";
+
+type Section = MuseSettings["activeSection"];
+
+const items: Array<{ id: Section; icon: string; label: string }> = [
+  { id: "home", icon: "⌂", label: "Home" },
+  { id: "library", icon: "▦", label: "Library" },
+  { id: "board", icon: "✣", label: "Board" },
+  { id: "settings", icon: "⚙", label: "Settings" }
+];
+
+export default function Sidebar(props: { active: Section; onNavigate: (section: Section) => void }) {
+  return (
+    <aside class="sidebar">
+      <nav>
+        {items.map((item) => (
+          <button
+            type="button"
+            classList={{ "nav-item": true, active: props.active === item.id }}
+            onClick={() => props.onNavigate(item.id)}
+            title={item.label}
+          >
+            <span class="nav-icon">{item.icon}</span>
+            <span class="nav-label">{item.label}</span>
+          </button>
+        ))}
+      </nav>
+      <div class="sidebar-footer">
+        <span class="shield-dot" />
+        <span class="footer-label">Shield ready</span>
+      </div>
+    </aside>
+  );
+}

src/components/ThemeSwitcher.tsx

@@ -0,0 +1,30 @@
+import type { ThemeName } from "../types";
+
+const themes: Array<{ id: ThemeName; label: string }> = [
+  { id: "dusk", label: "Dusk" },
+  { id: "parchment", label: "Parchment" },
+  { id: "midnight", label: "Midnight" },
+  { id: "studio", label: "Studio" },
+  { id: "moss", label: "Moss" },
+  { id: "rose", label: "Rose" },
+  { id: "obsidian", label: "Obsidian" },
+  { id: "linen", label: "Linen" }
+];
+
+export default function ThemeSwitcher(props: { selected: ThemeName; onSelect: (theme: ThemeName) => void }) {
+  return (
+    <div class="theme-grid">
+      {themes.map((theme) => (
+        <button
+          type="button"
+          classList={{ "theme-tile": true, selected: props.selected === theme.id }}
+          data-preview-theme={theme.id}
+          onClick={() => props.onSelect(theme.id)}
+        >
+          <span class="theme-swatch" />
+          {theme.label}
+        </button>
+      ))}
+    </div>
+  );
+}

src/components/Titlebar.tsx

@@ -0,0 +1,24 @@
+import { getCurrentWindow } from "@tauri-apps/api/window";
+
+const appWindow = getCurrentWindow();
+
+export default function Titlebar(props: { workspaceName: string }) {
+  return (
+    <header class="titlebar" data-tauri-drag-region>
+      <div class="workspace-dots" data-tauri-drag-region>
+        <span class="dot active" />
+        <span class="dot" />
+        <span class="dot" />
+      </div>
+      <div class="titlebar-copy" data-tauri-drag-region>
+        <strong>MUSE</strong>
+        <span>{props.workspaceName}</span>
+      </div>
+      <div class="window-controls" data-tauri-drag-region="false">
+        <button type="button" aria-label="Minimize" onClick={() => appWindow.minimize()}>—</button>
+        <button type="button" aria-label="Maximize" onClick={() => appWindow.toggleMaximize()}>□</button>
+        <button type="button" class="close" aria-label="Close" onClick={() => appWindow.close()}>×</button>
+      </div>
+    </header>
+  );
+}

src/index.tsx

@@ -0,0 +1,7 @@
+/* @refresh reload */
+import { render } from "solid-js/web";
+import App from "./App";
+import "./styles/tokens.css";
+import "./styles/app.css";
+
+render(() => <App />, document.getElementById("root") as HTMLElement);

src/store/settings.ts

@@ -0,0 +1,45 @@
+import { Store } from "@tauri-apps/plugin-store";
+import type { MuseSettings, ThemeName } from "../types";
+
+export const DEFAULT_SETTINGS: MuseSettings = {
+  onboardingComplete: false,
+  userName: "Artist",
+  workspaceName: "First Workspace",
+  theme: "dusk",
+  activeSection: "home"
+};
+
+let storePromise: Promise<Store> | undefined;
+
+export function settingsStore() {
+  if (!storePromise) {
+    storePromise = Store.load("settings.json", {
+      defaults: DEFAULT_SETTINGS,
+      autoSave: 250
+    });
+  }
+  return storePromise;
+}
+
+export async function loadSettings(): Promise<MuseSettings> {
+  const store = await settingsStore();
+  return {
+    onboardingComplete: (await store.get<boolean>("onboardingComplete")) ?? DEFAULT_SETTINGS.onboardingComplete,
+    userName: (await store.get<string>("userName")) ?? DEFAULT_SETTINGS.userName,
+    workspaceName: (await store.get<string>("workspaceName")) ?? DEFAULT_SETTINGS.workspaceName,
+    theme: ((await store.get<ThemeName>("theme")) ?? DEFAULT_SETTINGS.theme),
+    activeSection: ((await store.get<MuseSettings["activeSection"]>("activeSection")) ?? DEFAULT_SETTINGS.activeSection)
+  };
+}
+
+export async function saveSettings(settings: MuseSettings) {
+  const store = await settingsStore();
+  await Promise.all([
+    store.set("onboardingComplete", settings.onboardingComplete),
+    store.set("userName", settings.userName),
+    store.set("workspaceName", settings.workspaceName),
+    store.set("theme", settings.theme),
+    store.set("activeSection", settings.activeSection)
+  ]);
+  await store.save();
+}

src/styles/app.css

@@ -0,0 +1,66 @@
+* { box-sizing: border-box; }
+html, body, #root { width: 100%; height: 100%; margin: 0; overflow: hidden; }
+body { background: var(--bg-base); color: var(--text-primary); }
+button, input { font: inherit; }
+button { color: inherit; }
+
+.app-shell {
+  width: 100vw; height: 100vh;
+  display: grid;
+  grid-template-rows: var(--titlebar-h) 1fr;
+  grid-template-columns: var(--sidebar-w) 1fr;
+  background: radial-gradient(circle at 70% 10%, var(--accent-glow), transparent 34%), var(--bg-base);
+}
+
+.titlebar { grid-column: 1 / -1; height: var(--titlebar-h); display: flex; align-items: center; gap: 14px; padding: 0 10px; background: var(--bg-overlay); border-bottom: 1px solid var(--border); user-select: none; app-region: drag; }
+[data-tauri-drag-region] { app-region: drag; }
+[data-tauri-drag-region="false"], button, input { app-region: no-drag; }
+.workspace-dots { display: flex; gap: 7px; }
+.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); display: inline-block; }
+.dot.active { background: var(--accent); box-shadow: 0 0 16px var(--accent-glow); }
+.titlebar-copy { display: flex; align-items: center; gap: 10px; flex: 1; color: var(--text-secondary); font-size: 12px; }
+.titlebar-copy strong { color: var(--text-primary); letter-spacing: .18em; }
+.window-controls { display: flex; gap: 2px; }
+.window-controls button { width: 34px; height: 26px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
+.window-controls button:hover { background: var(--bg-raised); }
+.window-controls .close:hover { background: var(--error); color: white; }
+
+.sidebar { grid-column: 1; grid-row: 2; width: var(--sidebar-w); background: color-mix(in srgb, var(--bg-surface) 88%, transparent); border-right: 1px solid var(--border); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; transition: width var(--transition-slow); z-index: 10; }
+.sidebar:hover { width: var(--sidebar-w-expanded); }
+.sidebar nav { display: flex; flex-direction: column; gap: 8px; padding: 12px 8px; }
+.nav-item { height: 40px; display: flex; align-items: center; gap: 12px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; padding: 0 12px; white-space: nowrap; }
+.nav-item:hover, .nav-item.active { background: var(--bg-raised); }
+.nav-item.active { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-glow); }
+.nav-icon { min-width: 16px; text-align: center; }
+.nav-label, .footer-label { opacity: 0; transition: opacity var(--transition); }
+.sidebar:hover .nav-label, .sidebar:hover .footer-label { opacity: 1; }
+.sidebar-footer { display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: var(--text-muted); font-size: 12px; }
+.shield-dot { width: 9px; height: 9px; background: var(--success); border-radius: 999px; box-shadow: 0 0 10px color-mix(in srgb, var(--success) 60%, transparent); }
+
+.content-shell { grid-column: 2; grid-row: 2; min-width: 0; overflow: auto; padding: 40px; }
+.home-page { max-width: 1120px; margin: 0 auto; }
+.hero-card, .panel, .mini-card, .onboarding-card { background: var(--bg-overlay); border: 1px solid var(--border); border-radius: 24px; box-shadow: 0 24px 80px rgba(0,0,0,.22); backdrop-filter: blur(20px); }
+.hero-card { padding: 48px; }
+.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 700; margin: 0 0 12px; }
+h1 { font-size: clamp(34px, 5vw, 68px); line-height: .96; margin: 0 0 18px; letter-spacing: -0.055em; }
+h2 { margin: 4px 0 8px; }
+.muted, .mini-card p, .placeholder-panel p { color: var(--text-secondary); }
+.url-shell { margin-top: 34px; height: 54px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-surface); }
+.url-shell input { flex: 1; border: 0; background: transparent; color: var(--text-secondary); outline: 0; }
+.kbd { border: 1px solid var(--border); border-radius: 7px; padding: 3px 7px; color: var(--text-muted); font-size: 12px; }
+.dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
+.mini-card { padding: 24px; }
+.panel { padding: 40px; min-height: calc(100vh - 116px); }
+.settings-panel { display: flex; flex-direction: column; gap: 28px; }
+
+.onboarding { width: 100vw; height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at top right, var(--accent-glow), transparent 36%), var(--bg-base); color: var(--text-primary); }
+.onboarding-card { width: min(720px, 100%); padding: 48px; }
+.onboarding label { display: grid; gap: 8px; margin: 20px 0; color: var(--text-secondary); }
+.onboarding input { width: 100%; height: 46px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-primary); padding: 0 14px; }
+.primary { margin-top: 24px; height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--accent); color: var(--bg-base); font-weight: 800; cursor: pointer; }
+.theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
+.theme-tile { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-surface); cursor: pointer; text-align: left; }
+.theme-tile.selected { outline: 2px solid var(--accent); }
+.theme-swatch { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--bg-raised)); border: 1px solid var(--border); }
+
+@media (max-width: 860px) { .content-shell { padding: 20px; } .dashboard-grid { grid-template-columns: 1fr; } .hero-card { padding: 30px; } }

src/styles/tokens.css

@@ -0,0 +1,18 @@
+:root {
+  font-family: Geist, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  color: var(--text-primary);
+  background: var(--bg-base);
+  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
+  --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px;
+  --titlebar-h: 36px; --sidebar-w: 56px; --sidebar-w-expanded: 240px;
+  --transition-fast: 80ms ease-out; --transition: 150ms ease-out; --transition-slow: 250ms ease-out;
+}
+
+:root[data-theme="dusk"], [data-theme="dusk"] { --bg-base:#100E0B; --bg-surface:#1A1712; --bg-raised:#232019; --bg-overlay:rgba(10,8,6,.82); --border:#3A3628; --text-primary:#F0EDE6; --text-secondary:#9A9488; --text-muted:#5A5450; --accent:#C49A3C; --accent-glow:rgba(196,154,60,.18); --success:#4CAF6E; --error:#E05252; }
+:root[data-theme="parchment"], [data-theme="parchment"] { --bg-base:#F4EBDD; --bg-surface:#FFF8EA; --bg-raised:#F9F0DF; --bg-overlay:rgba(255,248,234,.86); --border:#D9C7A8; --text-primary:#2A2118; --text-secondary:#695A48; --text-muted:#9D8C76; --accent:#A36B2C; --accent-glow:rgba(163,107,44,.18); --success:#477A4A; --error:#B64C45; }
+:root[data-theme="midnight"], [data-theme="midnight"] { --bg-base:#090D18; --bg-surface:#111827; --bg-raised:#172033; --bg-overlay:rgba(9,13,24,.84); --border:#27334D; --text-primary:#EEF3FF; --text-secondary:#9CA9C7; --text-muted:#586176; --accent:#8C7CF6; --accent-glow:rgba(140,124,246,.22); --success:#56C28B; --error:#F07178; }
+:root[data-theme="studio"], [data-theme="studio"] { --bg-base:#F7F8FA; --bg-surface:#FFFFFF; --bg-raised:#EEF1F5; --bg-overlay:rgba(255,255,255,.88); --border:#D7DDE5; --text-primary:#151922; --text-secondary:#5E6978; --text-muted:#98A1AD; --accent:#2F6FED; --accent-glow:rgba(47,111,237,.18); --success:#1E8E5A; --error:#C83E3E; }
+:root[data-theme="moss"], [data-theme="moss"] { --bg-base:#0D1410; --bg-surface:#162018; --bg-raised:#1E2A20; --bg-overlay:rgba(13,20,16,.84); --border:#304134; --text-primary:#EAF2E8; --text-secondary:#A3B39E; --text-muted:#60705D; --accent:#87A96B; --accent-glow:rgba(135,169,107,.2); --success:#82C785; --error:#D85E5E; }
+:root[data-theme="rose"], [data-theme="rose"] { --bg-base:#FFF4F6; --bg-surface:#FFFFFF; --bg-raised:#FBE5EA; --bg-overlay:rgba(255,244,246,.88); --border:#EAC3CC; --text-primary:#2B1820; --text-secondary:#785B65; --text-muted:#AC8994; --accent:#C86B85; --accent-glow:rgba(200,107,133,.18); --success:#4F936A; --error:#C64D62; }
+:root[data-theme="obsidian"], [data-theme="obsidian"] { --bg-base:#050606; --bg-surface:#0B1010; --bg-raised:#111818; --bg-overlay:rgba(5,6,6,.88); --border:#1D2A2A; --text-primary:#EAFDFC; --text-secondary:#8DA5A4; --text-muted:#4A5A5A; --accent:#2ED3C6; --accent-glow:rgba(46,211,198,.18); --success:#42C985; --error:#EF5555; }
+:root[data-theme="linen"], [data-theme="linen"] { --bg-base:#F8EFE4; --bg-surface:#FFF9F0; --bg-raised:#F1DFCC; --bg-overlay:rgba(255,249,240,.88); --border:#D9BFA2; --text-primary:#2D2119; --text-secondary:#6F5A49; --text-muted:#A58D78; --accent:#C46F45; --accent-glow:rgba(196,111,69,.18); --success:#548B5C; --error:#BC4F45; }

src/types.ts

@@ -0,0 +1,17 @@
+export type ThemeName =
+  | "dusk"
+  | "parchment"
+  | "midnight"
+  | "studio"
+  | "moss"
+  | "rose"
+  | "obsidian"
+  | "linen";
+
+export interface MuseSettings {
+  onboardingComplete: boolean;
+  userName: string;
+  workspaceName: string;
+  theme: ThemeName;
+  activeSection: "home" | "library" | "board" | "settings";
+}

tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js"
+  },
+  "include": ["src"],
+  "references": []
+}

vite.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from "vite";
+import solid from "vite-plugin-solid";
+// @ts-expect-error process is available in Vite config runtime
+import process from "node:process";
+
+const host = process.env.TAURI_DEV_HOST;
+
+export default defineConfig(() => ({
+  plugins: [solid()],
+  clearScreen: false,
+  server: {
+    port: 1420,
+    strictPort: true,
+    host: host || false,
+    hmr: host ? { protocol: "ws", host, port: 1421 } : undefined,
+    watch: { ignored: ["**/src-tauri/**"] }
+  }
+}));