Fix Shield popover airspace and add Phase 3 library board core

README.md

@@ -1,7 +1,3 @@
----
-tags:
-- ml-intern
----
 # MUSE Alpha
 
 Creative browser prototype: Tauri v2 + Rust + SolidJS.
@@ -36,23 +32,3 @@ Frontend-only build:
 ```bash
 pnpm build
 ```
-
-<!-- ml-intern-provenance -->
-## Generated by ML Intern
-
-This model repository was generated by [ML Intern](https://github.com/huggingface/ml-intern), an agent for machine learning research and development on the Hugging Face Hub.
-
-- Try ML Intern: https://smolagents-ml-intern.hf.space
-- Source code: https://github.com/huggingface/ml-intern
-
-## Usage
-
-```python
-from transformers import AutoModelForCausalLM, AutoTokenizer
-
-model_id = 'asdf98/musealpha'
-tokenizer = AutoTokenizer.from_pretrained(model_id)
-model = AutoModelForCausalLM.from_pretrained(model_id)
-```
-
-For non-causal architectures, replace `AutoModelForCausalLM` with the appropriate `AutoModel` class.

src-tauri/Cargo.toml

@@ -36,6 +36,10 @@ tokio = { version = "1", features = ["time", "sync"] }
 
 # Utilities
 once_cell = "1"
+image = { version = "0.25", default-features = false, features = ["jpeg", "png", "gif", "webp", "bmp"] }
+blake3 = "1"
+base64 = "0.22"
+uuid = { version = "1", features = ["v4", "serde"] }
 chrono = { version = "0.4", features = ["serde"] }
 
 [target."cfg(not(any(target_os = \"android\", target_os = \"ios\")))".dependencies]

src-tauri/resources/scripts/hover_overlay.js

@@ -0,0 +1,61 @@
+(function() {
+'use strict';
+let overlay = null;
+let currentImg = null;
+let timer = null;
+const MIN = 90;
+
+function invoke(cmd, args) {
+  try {
+    if (window.__TAURI_INTERNALS__?.invoke) return window.__TAURI_INTERNALS__.invoke(cmd, args);
+    if (window.__TAURI__?.core?.invoke) return window.__TAURI__.core.invoke(cmd, args);
+  } catch (_) {}
+  console.warn('[Muse] Tauri IPC unavailable in this page');
+  return Promise.reject(new Error('Muse IPC unavailable'));
+}
+
+function button(label) {
+  const b = document.createElement('button');
+  b.textContent = label;
+  b.style.cssText = 'height:26px;border:1px solid rgba(255,255,255,.25);border-radius:8px;background:rgba(20,18,14,.86);color:white;padding:0 10px;font:12px system-ui;cursor:pointer';
+  return b;
+}
+function ensureOverlay() {
+  if (overlay) return overlay;
+  overlay = document.createElement('div');
+  overlay.id = '__muse_image_overlay';
+  overlay.style.cssText = 'position:fixed;z-index:2147483647;display:none;align-items:center;gap:8px;padding:6px 8px;border-radius:12px;background:rgba(10,8,6,.78);backdrop-filter:blur(12px);box-shadow:0 8px 30px rgba(0,0,0,.35);pointer-events:auto';
+  const meta = document.createElement('span'); meta.id='__muse_meta'; meta.style.cssText='color:white;font:12px ui-monospace,monospace;opacity:.9';
+  const save = button('+ Library');
+  save.onclick = async () => {
+    if (!currentImg) return;
+    save.textContent = 'Saving…';
+    try { await invoke('library_add_item', { url: currentImg.src, sourceUrl: location.href, title: document.title || currentImg.alt || 'Reference' }); save.textContent = '✓ Saved'; }
+    catch { save.textContent = 'Save failed'; }
+    setTimeout(()=>save.textContent='+ Library', 1500);
+  };
+  const palette = button('🎨');
+  palette.onclick = async () => { if (currentImg) save.click(); };
+  overlay.append(meta, save, palette);
+  document.documentElement.appendChild(overlay);
+  return overlay;
+}
+function show(img) {
+  currentImg = img;
+  const o = ensureOverlay();
+  const r = img.getBoundingClientRect();
+  o.querySelector('#__muse_meta').textContent = `${img.naturalWidth || Math.round(r.width)}×${img.naturalHeight || Math.round(r.height)}`;
+  o.style.left = `${Math.min(r.left + 10, window.innerWidth - 260)}px`;
+  o.style.top = `${Math.max(10, r.top + 10)}px`;
+  o.style.display = 'flex';
+}
+function hide() { if (overlay) overlay.style.display = 'none'; currentImg = null; }
+function eligible(el) { return el && el.tagName === 'IMG' && el.src && el.getBoundingClientRect().width >= MIN && el.getBoundingClientRect().height >= MIN; }
+document.addEventListener('mousemove', e => {
+  clearTimeout(timer);
+  const target = e.target;
+  if (!eligible(target)) { if (!overlay?.contains(target)) hide(); return; }
+  timer = setTimeout(() => show(target), 350);
+}, true);
+document.addEventListener('scroll', hide, true);
+})();

src-tauri/src/adblock/scripts.rs

@@ -5,6 +5,7 @@ pub fn build_init_script(blocked_domains_json: &str) -> String {
     let cookie_consent = include_str!("../../resources/scripts/cookie_consent.js");
     let webrtc_protect = include_str!("../../resources/scripts/webrtc_protect.js");
     let canvas_noise = include_str!("../../resources/scripts/canvas_noise.js");
+    let hover_overlay = include_str!("../../resources/scripts/hover_overlay.js");
 
     format!(
         r#"(function() {{
@@ -14,7 +15,8 @@ window.__MUSE_BLOCKED_DOMAINS__ = {blocked_domains_json};
 {adblock_layer1}
 {cookie_consent}
 {webrtc_protect}
-{canvas_noise}"#
+{canvas_noise}
+{hover_overlay}"#
     )
 }
 

src-tauri/src/adblock/updater.rs

@@ -41,8 +41,9 @@ pub async fn update_now(app: &AppHandle) -> Result<(), String> {
             Ok(resp) => {
                 if let Ok(text) = resp.text().await {
                     let _meta = filter_set.add_filter_list(&text, ParseOptions::default());
-                    total_rules += 1;
-                    println!("[muse-shield] Updated {name}");
+                    let rule_count = text.lines().filter(|l| !l.trim().is_empty() && !l.starts_with('!')).count();
+                    total_rules += rule_count;
+                    println!("[muse-shield] Updated {name}: {rule_count} candidate rules");
                 }
             }
             Err(e) => {

src-tauri/src/board.rs

@@ -0,0 +1,64 @@
+use serde::{Deserialize, Serialize};
+use std::sync::Mutex;
+use tauri::{AppHandle, Manager};
+use uuid::Uuid;
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct BoardItem {
+    pub id: String,
+    pub kind: String,
+    pub library_id: Option<String>,
+    pub data_url: Option<String>,
+    pub text: Option<String>,
+    pub colors: Vec<String>,
+    pub x: f64,
+    pub y: f64,
+    pub w: f64,
+    pub h: f64,
+    pub z: i64,
+}
+
+#[derive(Default)]
+pub struct BoardState {
+    pub items: Mutex<Vec<BoardItem>>,
+}
+
+#[tauri::command]
+pub fn board_items(app: AppHandle) -> Result<Vec<BoardItem>, String> {
+    Ok(app.state::<BoardState>().items.lock().map_err(|_| "board lock poisoned".to_string())?.clone())
+}
+
+#[tauri::command]
+pub fn board_add_image(app: AppHandle, library_id: String, data_url: String, x: f64, y: f64, w: f64, h: f64) -> Result<BoardItem, String> {
+    let item = BoardItem { id: Uuid::new_v4().to_string(), kind: "image".into(), library_id: Some(library_id), data_url: Some(data_url), text: None, colors: vec![], x, y, w, h, z: chrono::Utc::now().timestamp_millis() };
+    app.state::<BoardState>().items.lock().map_err(|_| "board lock poisoned".to_string())?.push(item.clone());
+    Ok(item)
+}
+
+#[tauri::command]
+pub fn board_add_note(app: AppHandle, text: String, x: f64, y: f64) -> Result<BoardItem, String> {
+    let item = BoardItem { id: Uuid::new_v4().to_string(), kind: "note".into(), library_id: None, data_url: None, text: Some(text), colors: vec![], x, y, w: 220.0, h: 140.0, z: chrono::Utc::now().timestamp_millis() };
+    app.state::<BoardState>().items.lock().map_err(|_| "board lock poisoned".to_string())?.push(item.clone());
+    Ok(item)
+}
+
+#[tauri::command]
+pub fn board_add_palette(app: AppHandle, colors: Vec<String>, x: f64, y: f64) -> Result<BoardItem, String> {
+    let item = BoardItem { id: Uuid::new_v4().to_string(), kind: "palette".into(), library_id: None, data_url: None, text: None, colors, x, y, w: 260.0, h: 90.0, z: chrono::Utc::now().timestamp_millis() };
+    app.state::<BoardState>().items.lock().map_err(|_| "board lock poisoned".to_string())?.push(item.clone());
+    Ok(item)
+}
+
+#[tauri::command]
+pub fn board_update_item(app: AppHandle, item: BoardItem) -> Result<(), String> {
+    let state = app.state::<BoardState>();
+    let mut items = state.items.lock().map_err(|_| "board lock poisoned".to_string())?;
+    if let Some(slot) = items.iter_mut().find(|i| i.id == item.id) { *slot = item; }
+    Ok(())
+}
+
+#[tauri::command]
+pub fn board_delete_item(app: AppHandle, id: String) -> Result<(), String> {
+    app.state::<BoardState>().items.lock().map_err(|_| "board lock poisoned".to_string())?.retain(|i| i.id != id);
+    Ok(())
+}

src-tauri/src/lib.rs

@@ -1,5 +1,7 @@
 mod adblock;
 mod browser;
+mod library;
+mod board;
 mod settings;
 mod state;
 
@@ -19,6 +21,8 @@ pub fn run() {
         )
         .manage(state::AppState::default())
         .manage(adblock::engine::AdBlockState::new())
+        .manage(library::LibraryState::default())
+        .manage(board::BoardState::default())
         .invoke_handler(tauri::generate_handler![
             settings::phase0_status,
             browser::browser_init,
@@ -39,6 +43,15 @@ pub fn run() {
             adblock::commands::shield_toggle_domain,
             adblock::commands::shield_is_allowed,
             adblock::commands::shield_update_lists,
+            library::library_add_item,
+            library::library_items,
+            library::library_search,
+            board::board_items,
+            board::board_add_image,
+            board::board_add_note,
+            board::board_add_palette,
+            board::board_update_item,
+            board::board_delete_item,
         ])
         .setup(|app| {
             #[cfg(desktop)]

src-tauri/src/library.rs

@@ -0,0 +1,100 @@
+use base64::{engine::general_purpose, Engine as _};
+use image::{GenericImageView, Pixel};
+use serde::{Deserialize, Serialize};
+use std::sync::Mutex;
+use tauri::{AppHandle, Manager};
+use uuid::Uuid;
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct LibraryItem {
+    pub id: String,
+    pub url: String,
+    pub source_url: String,
+    pub title: String,
+    pub data_url: String,
+    pub hash: String,
+    pub width: u32,
+    pub height: u32,
+    pub colors: Vec<String>,
+    pub tags: Vec<String>,
+    pub created_at: i64,
+}
+
+#[derive(Default)]
+pub struct LibraryState {
+    pub items: Mutex<Vec<LibraryItem>>,
+}
+
+#[tauri::command]
+pub async fn library_add_item(app: AppHandle, url: String, source_url: Option<String>, title: Option<String>) -> Result<LibraryItem, String> {
+    let bytes = reqwest::get(&url).await.map_err(|e| e.to_string())?.bytes().await.map_err(|e| e.to_string())?;
+    let hash = blake3::hash(&bytes).to_hex().to_string();
+    let img = image::load_from_memory(&bytes).map_err(|e| format!("unsupported image: {e}"))?;
+    let (width, height) = img.dimensions();
+    let colors = extract_palette(&img, 6);
+    let mime = if url.to_lowercase().ends_with(".png") { "image/png" } else if url.to_lowercase().ends_with(".webp") { "image/webp" } else if url.to_lowercase().ends_with(".gif") { "image/gif" } else { "image/jpeg" };
+    let data_url = format!("data:{mime};base64,{}", general_purpose::STANDARD.encode(&bytes));
+    let item = LibraryItem {
+        id: Uuid::new_v4().to_string(),
+        url,
+        source_url: source_url.unwrap_or_default(),
+        title: title.unwrap_or_else(|| "Untitled reference".to_string()),
+        data_url,
+        hash,
+        width,
+        height,
+        colors,
+        tags: vec![],
+        created_at: chrono::Utc::now().timestamp(),
+    };
+    let state = app.state::<LibraryState>();
+    let mut items = state.items.lock().map_err(|_| "library lock poisoned".to_string())?;
+    if let Some(existing) = items.iter().find(|i| i.hash == item.hash) {
+        return Ok(existing.clone());
+    }
+    items.push(item.clone());
+    Ok(item)
+}
+
+#[tauri::command]
+pub fn library_items(app: AppHandle) -> Result<Vec<LibraryItem>, String> {
+    let state = app.state::<LibraryState>();
+    Ok(state.items.lock().map_err(|_| "library lock poisoned".to_string())?.clone())
+}
+
+#[tauri::command]
+pub fn library_search(app: AppHandle, query: String) -> Result<Vec<LibraryItem>, String> {
+    let q = query.to_lowercase();
+    let state = app.state::<LibraryState>();
+    let items = state.items.lock().map_err(|_| "library lock poisoned".to_string())?;
+    Ok(items.iter().filter(|item| {
+        item.title.to_lowercase().contains(&q)
+        || item.url.to_lowercase().contains(&q)
+        || item.tags.iter().any(|t| t.to_lowercase().contains(&q))
+    }).cloned().collect())
+}
+
+fn extract_palette(img: &image::DynamicImage, count: usize) -> Vec<String> {
+    let thumb = img.thumbnail(96, 96).to_rgb8();
+    let mut buckets: Vec<Vec<[u8;3]>> = vec![thumb.pixels().map(|p| [p[0], p[1], p[2]]).collect()];
+    while buckets.len() < count {
+        let Some((idx, axis)) = buckets.iter().enumerate().filter(|(_, b)| b.len() > 1).map(|(i,b)| {
+            let ranges = (0..3).map(|c| {
+                let min = b.iter().map(|p| p[c]).min().unwrap_or(0);
+                let max = b.iter().map(|p| p[c]).max().unwrap_or(0);
+                max - min
+            }).collect::<Vec<_>>();
+            let axis = ranges.iter().enumerate().max_by_key(|(_, r)| *r).map(|(a,_)| a).unwrap_or(0);
+            (i, axis)
+        }).next() else { break; };
+        let mut b = buckets.remove(idx);
+        b.sort_by_key(|p| p[axis]);
+        let right = b.split_off(b.len()/2);
+        buckets.push(b); buckets.push(right);
+    }
+    buckets.into_iter().filter(|b| !b.is_empty()).map(|b| {
+        let n=b.len() as u32;
+        let (r,g,bl)=b.iter().fold((0u32,0u32,0u32), |a,p| (a.0+p[0] as u32,a.1+p[1] as u32,a.2+p[2] as u32));
+        format!("#{:02X}{:02X}{:02X}", r/n, g/n, bl/n)
+    }).collect()
+}

src/App.tsx

@@ -5,6 +5,8 @@ import Titlebar from "./components/Titlebar";
 import HomePage from "./components/HomePage";
 import Onboarding from "./components/Onboarding";
 import PlaceholderPanel from "./components/PlaceholderPanel";
+import LibraryPanel from "./components/LibraryPanel";
+import BoardPanel from "./components/BoardPanel";
 import ThemeSwitcher from "./components/ThemeSwitcher";
 import BrowserChrome from "./components/browser/BrowserChrome";
 
@@ -43,10 +45,10 @@ function App() {
           <main classList={{ "content-shell": true, visible: settings().activeSection !== "home" }}>
             <Switch>
               <Match when={settings().activeSection === "library"}>
-                <PlaceholderPanel title="Library" subtitle="Phase 3 will add image import, grid, tags, search, and color metadata." />
+                <LibraryPanel />
               </Match>
               <Match when={settings().activeSection === "board"}>
-                <PlaceholderPanel title="Board" subtitle="Phase 3 will add the PureRef-style infinite canvas." />
+                <BoardPanel />
               </Match>
               <Match when={settings().activeSection === "settings"}>
                 <section class="panel settings-panel">

src/components/BoardPanel.tsx

@@ -0,0 +1,103 @@
+import { createSignal, For, onMount } from "solid-js";
+import { invoke } from "@tauri-apps/api/core";
+import Plus from "lucide-solid/icons/plus";
+import StickyNote from "lucide-solid/icons/sticky-note";
+import Palette from "lucide-solid/icons/palette";
+import Trash2 from "lucide-solid/icons/trash-2";
+import type { LibraryItem } from "./LibraryPanel";
+
+interface BoardItem {
+  id: string;
+  kind: string;
+  library_id?: string | null;
+  data_url?: string | null;
+  text?: string | null;
+  colors: string[];
+  x: number; y: number; w: number; h: number; z: number;
+}
+
+export default function BoardPanel() {
+  const [items, setItems] = createSignal<BoardItem[]>([]);
+  const [viewport, setViewport] = createSignal({ x: 40, y: 40, scale: 1 });
+  let boardEl!: HTMLDivElement;
+
+  const load = async () => setItems(await invoke<BoardItem[]>("board_items"));
+  onMount(load);
+
+  const screenToWorld = (clientX: number, clientY: number) => {
+    const r = boardEl.getBoundingClientRect();
+    const v = viewport();
+    return { x: (clientX - r.left - v.x) / v.scale, y: (clientY - r.top - v.y) / v.scale };
+  };
+
+  const addNote = async () => { await invoke("board_add_note", { text: "Observation note…", x: 120, y: 120 }); await load(); };
+  const addPalette = async () => { await invoke("board_add_palette", { colors: ["#C49A3C", "#100E0B", "#F0EDE6", "#4CAF6E"], x: 180, y: 180 }); await load(); };
+  const del = async (id: string) => { await invoke("board_delete_item", { id }); await load(); };
+
+  const update = async (item: BoardItem) => { await invoke("board_update_item", { item }); };
+
+  const startDrag = (e: PointerEvent, item: BoardItem) => {
+    e.stopPropagation();
+    const start = screenToWorld(e.clientX, e.clientY);
+    const ox = item.x, oy = item.y;
+    const move = (ev: PointerEvent) => {
+      const p = screenToWorld(ev.clientX, ev.clientY);
+      item.x = ox + p.x - start.x; item.y = oy + p.y - start.y;
+      setItems([...items()]);
+    };
+    const up = () => { window.removeEventListener("pointermove", move); void update(item); };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up, { once: true });
+  };
+
+  const startPan = (e: PointerEvent) => {
+    if ((e.target as HTMLElement).closest(".board-card")) return;
+    const startClient = { x: e.clientX, y: e.clientY };
+    const startView = viewport();
+    const move = (ev: PointerEvent) => setViewport({ ...startView, x: startView.x + ev.clientX - startClient.x, y: startView.y + ev.clientY - startClient.y });
+    const up = () => window.removeEventListener("pointermove", move);
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up, { once: true });
+  };
+
+  const onWheel = (e: WheelEvent) => {
+    e.preventDefault();
+    const v = viewport();
+    const next = Math.min(3, Math.max(.25, v.scale * Math.exp(-e.deltaY * .001)));
+    setViewport({ ...v, scale: next });
+  };
+
+  const drop = async (e: DragEvent) => {
+    e.preventDefault();
+    const raw = e.dataTransfer?.getData("application/x-muse-library-item");
+    if (!raw) return;
+    const item = JSON.parse(raw) as LibraryItem;
+    const p = screenToWorld(e.clientX, e.clientY);
+    await invoke("board_add_image", { libraryId: item.id, dataUrl: item.data_url, x: p.x, y: p.y, w: Math.min(420, item.width / 2), h: Math.min(320, item.height / 2) });
+    await load();
+  };
+
+  return (
+    <section class="board-module">
+      <header class="board-toolbar-panel">
+        <div><p class="eyebrow">Board</p><h1>Reference Board</h1></div>
+        <button class="secondary" onClick={() => void addNote()}><StickyNote size={16}/> Note</button>
+        <button class="secondary" onClick={() => void addPalette()}><Palette size={16}/> Palette</button>
+        <button class="secondary" onClick={() => setViewport({ x: 40, y: 40, scale: 1 })}>Reset view</button>
+      </header>
+      <div class="board-canvas" ref={boardEl} onPointerDown={startPan} onWheel={onWheel} onDragOver={(e) => e.preventDefault()} onDrop={(e) => void drop(e)}>
+        <div class="board-grid-bg" style={{ transform: `translate(${viewport().x}px, ${viewport().y}px) scale(${viewport().scale})` }} />
+        <div class="board-world" style={{ transform: `translate(${viewport().x}px, ${viewport().y}px) scale(${viewport().scale})`, "transform-origin": "0 0" }}>
+          <For each={items()}>{(item) => (
+            <article class={`board-card ${item.kind}`} style={{ left: `${item.x}px`, top: `${item.y}px`, width: `${item.w}px`, height: `${item.h}px`, "z-index": item.z }} onPointerDown={(e) => startDrag(e, item)}>
+              {item.kind === "image" && <img src={item.data_url || ""} draggable={false}/>} 
+              {item.kind === "note" && <textarea value={item.text || ""} onInput={(e) => { item.text = e.currentTarget.value; void update(item); }} />}
+              {item.kind === "palette" && <div class="board-palette">{item.colors.map(c => <span class="palette-chip" style={{"background-color": c}} title={c} />)}</div>}
+              <button class="board-delete" onClick={(e) => { e.stopPropagation(); void del(item.id); }}><Trash2 size={14}/></button>
+            </article>
+          )}</For>
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/LibraryPanel.tsx

@@ -0,0 +1,96 @@
+import { createSignal, For, onMount, Show } from "solid-js";
+import { invoke } from "@tauri-apps/api/core";
+import Search from "lucide-solid/icons/search";
+import Plus from "lucide-solid/icons/plus";
+import ImageIcon from "lucide-solid/icons/image";
+import Palette from "lucide-solid/icons/palette";
+
+export interface LibraryItem {
+  id: string;
+  url: string;
+  source_url: string;
+  title: string;
+  data_url: string;
+  hash: string;
+  width: number;
+  height: number;
+  colors: string[];
+  tags: string[];
+  created_at: number;
+}
+
+export default function LibraryPanel() {
+  const [items, setItems] = createSignal<LibraryItem[]>([]);
+  const [selected, setSelected] = createSignal<LibraryItem | null>(null);
+  const [url, setUrl] = createSignal("");
+  const [query, setQuery] = createSignal("");
+  const [busy, setBusy] = createSignal(false);
+
+  const load = async () => setItems(await invoke<LibraryItem[]>("library_items"));
+  onMount(load);
+
+  const addUrl = async () => {
+    const value = url().trim();
+    if (!value) return;
+    setBusy(true);
+    try {
+      const item = await invoke<LibraryItem>("library_add_item", { url: value, sourceUrl: value, title: value.split('/').pop() || "Reference" });
+      setItems(await invoke<LibraryItem[]>("library_items"));
+      setSelected(item);
+      setUrl("");
+    } finally { setBusy(false); }
+  };
+
+  const search = async (q: string) => {
+    setQuery(q);
+    setItems(q.trim() ? await invoke<LibraryItem[]>("library_search", { query: q }) : await invoke<LibraryItem[]>("library_items"));
+  };
+
+  const badgeClass = (item: LibraryItem) => item.width >= 1800 || item.height >= 1800 ? "good" : item.width >= 900 || item.height >= 900 ? "warn" : "bad";
+
+  return (
+    <section class="library-module">
+      <header class="module-header">
+        <div>
+          <p class="eyebrow">Library</p>
+          <h1>Reference Library</h1>
+          <p class="muted">Local-first visual archive with colors, dimensions, source URL and board drag-out.</p>
+        </div>
+        <div class="library-addbar">
+          <input value={url()} onInput={(e) => setUrl(e.currentTarget.value)} placeholder="Paste image URL to save…" />
+          <button class="primary small" disabled={busy()} onClick={() => void addUrl()}><Plus size={16}/> Add</button>
+        </div>
+      </header>
+
+      <div class="library-layout">
+        <main class="library-main">
+          <div class="library-search"><Search size={16}/><input value={query()} onInput={(e) => void search(e.currentTarget.value)} placeholder="Search references, tags, source…" /></div>
+          <div class="library-grid">
+            <For each={items()}>{(item) => (
+              <article class="library-tile" draggable onDragStart={(e) => {
+                e.dataTransfer?.setData("application/x-muse-library-item", JSON.stringify(item));
+                e.dataTransfer!.effectAllowed = "copy";
+              }} onClick={() => setSelected(item)}>
+                <img src={item.data_url} draggable={false}/>
+                <span class={`resolution-badge ${badgeClass(item)}`}>{item.width}×{item.height}</span>
+                <div class="tile-caption"><ImageIcon size={14}/><span>{item.title}</span></div>
+              </article>
+            )}</For>
+          </div>
+        </main>
+        <aside class="library-detail">
+          <Show when={selected()} fallback={<div class="empty-detail"><ImageIcon size={42}/><p>Select a reference for details.</p></div>}>
+            {(item) => <>
+              <img class="detail-preview" src={item().data_url}/>
+              <h2>{item().title}</h2>
+              <p class="muted">{item().width} × {item().height}</p>
+              <p class="detail-source">{item().url}</p>
+              <div class="palette-row"><Palette size={16}/>{item().colors.map(c => <button title={c} class="swatch" style={{"background-color": c}} />)}</div>
+              <button class="secondary-wide" onClick={() => void invoke("board_add_palette", { colors: item().colors, x: 80, y: 80 })}>Send palette to Board</button>
+            </>}
+          </Show>
+        </aside>
+      </div>
+    </section>
+  );
+}

src/components/browser/BrowserChrome.tsx

@@ -139,10 +139,38 @@ export default function BrowserChrome(props: { active: boolean }) {
             </button>
           )}</For>
         </div>
-        <div class="sidebar-shield-summary">
-          <ShieldCheck size={16} />
+        <button type="button" class="sidebar-shield-summary clickable" onClick={() => setShieldOpen(!shieldOpen())}>
+          {domainAllowed() ? <ShieldOff size={16} /> : <ShieldCheck size={16} />}
           <span>{totalBlocked()} blocked · {shield().engine_rules} rules</span>
-        </div>
+        </button>
+        <Show when={shieldOpen()}>
+          <div class="shield-sidebar-panel">
+            <div class="shield-popover-header">
+              <strong>Muse Shield</strong>
+              <button type="button" class="shield-close" onClick={() => setShieldOpen(false)}><X size={14} /></button>
+            </div>
+            <div class="shield-stats-grid">
+              <div class="shield-stat"><span class="shield-stat-value">{shield().blocked_requests}</span><span class="shield-stat-label">Requests</span></div>
+              <div class="shield-stat"><span class="shield-stat-value">{shield().blocked_cosmetic}</span><span class="shield-stat-label">Hidden</span></div>
+              <div class="shield-stat"><span class="shield-stat-value">{shield().https_upgrades}</span><span class="shield-stat-label">HTTPS</span></div>
+              <div class="shield-stat"><span class="shield-stat-value">{shield().engine_rules}</span><span class="shield-stat-label">Rules</span></div>
+            </div>
+            <Show when={activeTab()}>
+              <div class="shield-domain-toggle compact">
+                <span><strong>{hostLabel(activeTab()!.url)}</strong></span>
+                <button type="button" classList={{ "toggle-btn": true, off: domainAllowed() }} onClick={() => void toggleDomainShield()}>
+                  {domainAllowed() ? "Paused" : "Active"}
+                </button>
+              </div>
+            </Show>
+            <button type="button" class="shield-action-btn" onClick={() => void updateLists()}>
+              <RefreshCw size={14} /> Update lists
+            </button>
+            <div class="shield-footer sidebar-safe">
+              <span>HTTPS-first</span><span>WebRTC</span><span>Canvas noise</span><span>Cookie reject</span>
+            </div>
+          </div>
+        </Show>
       </aside>
 
       <div classList={{ "browser-toolbar": true, inactive: !props.active }}>
@@ -165,26 +193,7 @@ export default function BrowserChrome(props: { active: boolean }) {
             {totalBlocked()}
           </button>
         </div>
-        <Show when={shieldOpen()}>
-          <div class="shield-popover">
-            <div class="shield-popover-header">
-              <strong>Muse Shield</strong>
-              <button type="button" class="shield-close" onClick={() => setShieldOpen(false)}><X size={14} /></button>
-            </div>
-            <div class="shield-stats-grid">
-              <div class="shield-stat"><span class="shield-stat-value">{shield().blocked_requests}</span><span class="shield-stat-label">Requests blocked</span></div>
-              <div class="shield-stat"><span class="shield-stat-value">{shield().blocked_cosmetic}</span><span class="shield-stat-label">Elements hidden</span></div>
-              <div class="shield-stat"><span class="shield-stat-value">{shield().https_upgrades}</span><span class="shield-stat-label">HTTPS upgrades</span></div>
-              <div class="shield-stat"><span class="shield-stat-value">{shield().engine_rules}</span><span class="shield-stat-label">Filter rules</span></div>
-            </div>
-            <Show when={activeTab()}>
-              <div class="shield-domain-toggle">
-                <span>Shield for <strong>{hostLabel(activeTab()!.url)}</strong></span>
-                <button type="button" classList={{ "toggle-btn": true, off: domainAllowed() }} onClick={() => void toggleDomainShield()}>
-                  {domainAllowed() ? "Paused" : "Active"}
-                </button>
-              </div>
-            </Show>
+
             <div class="shield-actions">
               <button type="button" class="shield-action-btn" onClick={() => void updateLists()}>
                 <RefreshCw size={14} /> Update filter lists

src/styles/app.css

@@ -113,3 +113,53 @@ h2 { margin: 4px 0 8px; font-size: 18px; }
 
 @keyframes pulse { 0%,100% { opacity: .45; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.1); } }
 @media (max-width: 980px) { .app-shell { grid-template-columns: 248px minmax(0,1fr); } .browser-toolbar { grid-template-columns: auto 1fr; } .traffic-group.right { display:none; } .dashboard-grid.mature { grid-template-columns: 1fr; } }
+
+/* Sidebar-safe shield panel: never overlaps native child WebView */
+.sidebar-shield-summary.clickable { width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left; }
+.sidebar-shield-summary.clickable:hover { background: var(--bg-raised); color: var(--text-primary); }
+.shield-sidebar-panel { margin: 0 10px 10px; padding: 14px; background: var(--bg-surface); border: 1px solid var(--glass-border); border-radius: 16px; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
+.shield-domain-toggle.compact { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); margin-bottom: 10px; font-size: 12px; }
+.shield-domain-toggle.compact span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.shield-footer.sidebar-safe { margin-top: 10px; }
+
+/* Phase 3 Library */
+.library-module, .board-module { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 18px; }
+.module-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
+.module-header h1, .board-toolbar-panel h1 { margin: 0; font-size: 36px; letter-spacing: -0.04em; }
+.library-addbar { display: flex; gap: 10px; min-width: 420px; }
+.library-addbar input, .library-search input { flex: 1; height: 38px; border: 1px solid var(--glass-border); border-radius: 12px; background: var(--bg-surface); color: var(--text-primary); padding: 0 12px; outline: none; }
+.primary.small { height: 38px; margin: 0; display: flex; align-items: center; gap: 6px; }
+.library-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 18px; }
+.library-main, .library-detail { min-height: 0; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 20px; padding: 16px; overflow: auto; }
+.library-search { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
+.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
+.library-tile { position: relative; border: 1px solid var(--glass-border); border-radius: 16px; overflow: hidden; background: var(--bg-surface); cursor: pointer; min-height: 150px; }
+.library-tile:hover { border-color: var(--accent); transform: translateY(-1px); }
+.library-tile img { width: 100%; height: 130px; object-fit: cover; display: block; }
+.tile-caption { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 10px; font-size: 12px; color: var(--text-secondary); }
+.tile-caption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.resolution-badge { position: absolute; right: 8px; top: 8px; padding: 3px 7px; border-radius: 999px; background: rgba(0,0,0,.7); color: white; font-size: 11px; }
+.resolution-badge.good { color: #7CFFB2; } .resolution-badge.warn { color: #FFD36A; } .resolution-badge.bad { color: #FF8A8A; }
+.detail-preview { width: 100%; max-height: 260px; object-fit: contain; border-radius: 14px; background: #111; }
+.detail-source { font-size: 12px; color: var(--text-muted); word-break: break-all; }
+.palette-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
+.swatch { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--glass-border); }
+.secondary-wide { width: 100%; height: 36px; border: 1px solid var(--glass-border); border-radius: 10px; background: var(--bg-raised); color: var(--text-primary); cursor: pointer; }
+.empty-detail { height: 100%; display: grid; place-items: center; color: var(--text-muted); text-align: center; }
+
+/* Phase 3 Board */
+.board-toolbar-panel { display: flex; align-items: center; gap: 12px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 18px; padding: 14px 16px; }
+.board-toolbar-panel > div { margin-right: auto; }
+.secondary { height: 34px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--glass-border); border-radius: 10px; background: var(--bg-surface); color: var(--text-secondary); cursor: pointer; padding: 0 12px; }
+.secondary:hover { color: var(--text-primary); background: var(--bg-raised); }
+.board-canvas { flex: 1; min-height: 0; position: relative; overflow: hidden; background: #11100e; border: 1px solid var(--glass-border); border-radius: 20px; touch-action: none; }
+.board-grid-bg { position: absolute; inset: -200%; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; }
+.board-world { position: absolute; inset: 0; }
+.board-card { position: absolute; border: 1px solid rgba(255,255,255,.16); border-radius: 14px; background: var(--bg-surface); overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,.35); cursor: grab; }
+.board-card:active { cursor: grabbing; }
+.board-card.image img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.board-card.note textarea { width: 100%; height: 100%; resize: none; border: 0; outline: 0; padding: 14px; background: #F7E8B4; color: #2b2118; font: inherit; }
+.board-palette { display: flex; width: 100%; height: 100%; padding: 12px; gap: 8px; align-items: stretch; }
+.palette-chip { flex: 1; border-radius: 10px; border: 1px solid rgba(0,0,0,.25); }
+.board-delete { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 8px; background: rgba(0,0,0,.55); color: white; display: grid; place-items: center; opacity: 0; cursor: pointer; }
+.board-card:hover .board-delete { opacity: 1; }