fluxplugin 1.0.1 → 1.0.2

package/dist/cli.js

@@ -1,20 +1,77 @@
 #!/usr/bin/env node
 import { createRequire as __cr } from 'node:module'; const require = __cr(import.meta.url);
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res, err) => function __init() {
+  if (err) throw err[0];
+  try {
+    return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+  } catch (e) {
+    throw err = [e], e;
+  }
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/cli/tailwind.ts
+var tailwind_exports = {};
+__export(tailwind_exports, {
+  compileTailwind: () => compileTailwind,
+  resolveTailwindCli: () => resolveTailwindCli
+});
+import { spawn, spawnSync } from "node:child_process";
+import { existsSync, readFileSync } from "node:fs";
+import { createRequire } from "node:module";
+import path7 from "node:path";
+function resolveTailwindCli(startDirs) {
+  for (const dir of startDirs) {
+    try {
+      const pj = createRequire(path7.join(dir, "package.json")).resolve("@tailwindcss/cli/package.json");
+      const pkg2 = JSON.parse(readFileSync(pj, "utf8"));
+      const rel = typeof pkg2.bin === "string" ? pkg2.bin : Object.values(pkg2.bin ?? {})[0];
+      if (rel) return path7.join(path7.dirname(pj), rel);
+    } catch {
+    }
+  }
+  return void 0;
+}
+function compileTailwind(opts, log2 = console.log) {
+  const cli = resolveTailwindCli([opts.cwd, ...opts.searchFrom ?? [], process.cwd()]);
+  if (!cli || !existsSync(cli)) throw new Error('Tailwind is not installed: run "npm install -D tailwindcss @tailwindcss/cli"');
+  const args = [cli, "-i", opts.input, "-o", opts.output];
+  if (!opts.watch) {
+    const r = spawnSync(process.execPath, args, { cwd: opts.cwd, encoding: "utf8" });
+    if (r.status !== 0) throw new Error(`tailwind failed: ${(r.stderr || r.stdout || "").trim().split("\n").slice(-3).join(" ")}`);
+    log2(`tailwind \u2192 ${path7.relative(opts.cwd, opts.output)}`);
+    return () => {
+    };
+  }
+  const child = spawn(process.execPath, [...args, "--watch=always"], { cwd: opts.cwd, stdio: ["ignore", "ignore", "pipe"] });
+  child.stderr?.on("data", (d) => /error/i.test(String(d)) && log2("tailwind: " + String(d).trim()));
+  log2(`tailwind watching ${path7.relative(opts.cwd, opts.input)}`);
+  return () => void child.kill();
+}
+var init_tailwind = __esm({
+  "src/cli/tailwind.ts"() {
+    "use strict";
+  }
+});
 
 // src/cli/cli.ts
 import { parseArgs } from "node:util";
-import { promises as fs8 } from "node:fs";
-import path9 from "node:path";
-import crypto2 from "node:crypto";
+import { promises as fs11 } from "node:fs";
+import path14 from "node:path";
 
 // src/core/schema.ts
 var ok = (value) => ({ ok: true, value });
-var fail = (path10, message) => ({ ok: false, issues: [{ path: path10, message }] });
+var fail = (path15, message) => ({ ok: false, issues: [{ path: path15, message }] });
 var join = (p, k) => p ? typeof k === "number" ? `${p}[${k}]` : `${p}.${k}` : String(k);
 function make(kind, parse, describe) {
   const self = {
     kind,
-    parse: (input, path10 = "") => parse(input, path10),
+    parse: (input, path15 = "") => parse(input, path15),
     describe,
     optional() {
       return make(
@@ -390,6 +447,18 @@ var manifestSchema = s.object({
   repository: s.union(s.string(), s.object({ type: s.string().optional(), url: s.string() })).optional(),
   license: s.string().optional(),
   icon: s.string().optional(),
+  /** Wide image shown at the top of the plugin page (png/jpg/webp/svg inside the plugin). */
+  banner: s.string().optional(),
+  /** Screenshots shown in a gallery (paths inside the plugin). */
+  screenshots: s.array(s.string()).default([]),
+  /** Detailed description as Markdown (default: ./README.md). Rendered safely: no raw HTML. */
+  readme: s.string().optional(),
+  /** Explanation video (https URL; YouTube and Vimeo are embedded, other hosts become a link). */
+  video: s.string({ pattern: /^https:\/\/\S+$/ }).optional(),
+  categories: s.array(s.string()).default([]),
+  keywords: s.array(s.string()).default([]),
+  /** Extra links: docs, support, changelog, funding... */
+  links: s.record(s.string({ pattern: /^https:\/\/\S+$/ })).default({}),
   /** Entry executed in the Electron main process. */
   main: s.string().optional(),
   /** Entry executed in the preload context (sandbox-compatible, no Node). */
@@ -580,6 +649,7 @@ var JsonStateFile = class {
 // src/main/registry.ts
 import { promises as fs4 } from "node:fs";
 import path4 from "node:path";
+import crypto2 from "node:crypto";
 
 // src/main/tar.ts
 import { promises as fs3 } from "node:fs";
@@ -669,7 +739,7 @@ async function extractTarGz(buf, dest) {
 }
 
 // src/main/registry.ts
-async function readManifest(dir) {
+async function readPluginManifest(dir) {
   const raw = JSON.parse(await fs4.readFile(path4.join(dir, MANIFEST_FILE), "utf8"));
   const v = validateManifest(raw);
   if (!v.manifest) throw new Error(`invalid manifest: ${v.issues.map((i) => `${i.path}: ${i.message}`).join("; ")}`);
@@ -686,6 +756,34 @@ var toEntry = (m, location, source, sha256) => ({
   source,
   sha256
 });
+var RUNTIME_DIRS = /* @__PURE__ */ new Set(["dist", "assets", "images", "docs"]);
+var RUNTIME_FILES = /^(plugin\.json|readme(\.[a-z]+)?|license(\.[a-z]+)?|changelog(\.[a-z]+)?|icon\.(png|svg|jpg|webp))$/i;
+var SOURCE_FILE = /\.(tsx?|jsx|map|scss|sass|less)$/i;
+async function copyPluginRuntime(src, dest) {
+  const copied = [];
+  const manifest = JSON.parse(await fs4.readFile(path4.join(src, MANIFEST_FILE), "utf8"));
+  const referenced = new Set(
+    [manifest["main"], manifest["preload"], manifest["renderer"], manifest["icon"], manifest["banner"], manifest["readme"], ...manifest["styles"] ?? [], ...manifest["screenshots"] ?? []].filter((x) => typeof x === "string").map((x) => path4.normalize(x).replace(/^(\.\/|\.\\)/, ""))
+  );
+  const walk2 = async (rel) => {
+    for (const e of await fs4.readdir(path4.join(src, rel), { withFileTypes: true })) {
+      const r = rel ? path4.join(rel, e.name) : e.name;
+      if (e.isDirectory()) {
+        if (rel === "" ? RUNTIME_DIRS.has(e.name) : true) await walk2(r);
+      } else if (e.isFile()) {
+        const top = r.split(path4.sep)[0];
+        const ok2 = referenced.has(r) || (rel === "" ? RUNTIME_FILES.test(e.name) : RUNTIME_DIRS.has(top) && !SOURCE_FILE.test(e.name));
+        if (!ok2 || SOURCE_FILE.test(e.name) && !referenced.has(r)) continue;
+        await fs4.mkdir(path4.dirname(path4.join(dest, r)), { recursive: true });
+        await fs4.copyFile(path4.join(src, r), path4.join(dest, r));
+        copied.push(r.split(path4.sep).join("/"));
+      }
+    }
+  };
+  await fs4.mkdir(dest, { recursive: true });
+  await walk2("");
+  return copied;
+}
 async function copyDir(src, dest) {
   await fs4.mkdir(dest, { recursive: true });
   for (const e of await fs4.readdir(src, { withFileTypes: true })) {
@@ -696,6 +794,37 @@ async function copyDir(src, dest) {
     else if (e.isFile()) await fs4.copyFile(s2, d);
   }
 }
+function entriesFromIndex(index, baseUrl, source, query = "") {
+  const q = query.toLowerCase();
+  return (index.plugins ?? []).filter((p) => p && typeof p.id === "string" && typeof p.version === "string" && typeof p.url === "string").filter((p) => !q || `${p.id} ${p.name ?? ""} ${p.description ?? ""}`.toLowerCase().includes(q)).map((p) => ({
+    id: p.id,
+    name: p.name ?? p.id,
+    version: p.version,
+    description: p.description,
+    author: p.author,
+    permissions: p.permissions ?? [],
+    location: new URL(p.url, baseUrl).href,
+    source,
+    sha256: p.sha256,
+    homepage: p.homepage,
+    icon: p.icon
+  }));
+}
+async function pruneNonRuntime(dir) {
+  const removed = [];
+  const walk2 = async (rel) => {
+    for (const e of await fs4.readdir(path4.join(dir, rel), { withFileTypes: true })) {
+      const r = rel ? path4.join(rel, e.name) : e.name;
+      const abs = path4.join(dir, r);
+      if (e.isDirectory()) {
+        if (e.name === "node_modules" || rel === "" && (e.name === "src" || e.name === ".git")) await fs4.rm(abs, { recursive: true, force: true }), removed.push(r + "/");
+        else await walk2(r);
+      } else if (/\.(map|tsx?|scss|sass|less)$/i.test(e.name) && !/\.d\.ts$/i.test(e.name)) await fs4.rm(abs, { force: true }), removed.push(r);
+    }
+  };
+  await walk2("");
+  return removed;
+}
 var LocalRegistry = class {
   constructor(dir, name = `local:${dir}`) {
     this.dir = dir;
@@ -715,7 +844,7 @@ var LocalRegistry = class {
     for (const n of names.sort()) {
       const root = path4.join(this.dir, n);
       try {
-        const { manifest } = await readManifest(root);
+        const { manifest } = await readPluginManifest(root);
         if (!q || `${manifest.id} ${manifest.name} ${manifest.description ?? ""}`.toLowerCase().includes(q)) out.push(toEntry(manifest, root, this.name));
       } catch {
       }
@@ -723,8 +852,34 @@ var LocalRegistry = class {
     return out;
   }
   async fetch(entry, dest) {
-    await copyDir(entry.location, dest);
-    return (await readManifest(dest)).manifest;
+    await copyPluginRuntime(entry.location, dest);
+    return (await readPluginManifest(dest)).manifest;
+  }
+};
+var HttpRegistry = class {
+  constructor(baseUrl, fetchImpl = fetch) {
+    this.baseUrl = baseUrl;
+    this.fetchImpl = fetchImpl;
+    this.name = `http:${baseUrl}`;
+  }
+  baseUrl;
+  fetchImpl;
+  name;
+  async search(query = "") {
+    const base = this.baseUrl.endsWith("/") ? this.baseUrl : this.baseUrl + "/";
+    const res = await this.fetchImpl(new URL("index.json", base));
+    if (!res.ok) throw new Error(`store responded ${res.status}`);
+    return entriesFromIndex(await res.json(), base, this.name, query);
+  }
+  async fetch(entry, dest) {
+    const res = await this.fetchImpl(entry.location);
+    if (!res.ok) throw new Error(`download failed: ${res.status}`);
+    const buf = Buffer.from(await res.arrayBuffer());
+    if (entry.sha256 && crypto2.createHash("sha256").update(buf).digest("hex") !== entry.sha256.replace(/^sha256-/, "")) {
+      throw new Error("downloaded archive does not match the registry checksum");
+    }
+    await extractTarGz(buf, dest);
+    return (await readPluginManifest(dest)).manifest;
   }
 };
 var PluginInstaller = class {
@@ -747,7 +902,7 @@ var PluginInstaller = class {
     const out = [];
     for (const n of await fs4.readdir(this.pluginsDir).catch(() => [])) {
       try {
-        out.push((await readManifest(path4.join(this.pluginsDir, n))).manifest);
+        out.push((await readPluginManifest(path4.join(this.pluginsDir, n))).manifest);
       } catch {
       }
     }
@@ -764,11 +919,12 @@ var PluginInstaller = class {
     await fs4.mkdir(path4.dirname(stage), { recursive: true });
     try {
       const manifest = await registry.fetch(entry, stage);
+      await pruneNonRuntime(stage);
       if (manifest.id !== entry.id) throw new Error(`registry entry "${entry.id}" contains plugin "${manifest.id}"`);
       const target = this.dirOf(entry.id);
       let previousVersion;
       try {
-        previousVersion = (await readManifest(target)).manifest.version;
+        previousVersion = (await readPluginManifest(target)).manifest.version;
         const bk = path4.join(this.backupDir, entry.id, previousVersion);
         await fs4.rm(bk, { recursive: true, force: true });
         await fs4.mkdir(path4.dirname(bk), { recursive: true });
@@ -786,7 +942,7 @@ var PluginInstaller = class {
   /** Removes the plugin directory (backups are kept so the user can still roll back/reinstall). */
   async uninstall(id) {
     const dir = this.dirOf(id);
-    const { manifest } = await readManifest(dir);
+    const { manifest } = await readPluginManifest(dir);
     const bk = path4.join(this.backupDir, id, manifest.version);
     await fs4.rm(bk, { recursive: true, force: true });
     await fs4.mkdir(path4.dirname(bk), { recursive: true });
@@ -804,7 +960,7 @@ var PluginInstaller = class {
     const dir = this.dirOf(id);
     let current;
     try {
-      current = (await readManifest(dir)).manifest.version;
+      current = (await readPluginManifest(dir)).manifest.version;
       const bk = path4.join(this.backupDir, id, current);
       await fs4.rm(bk, { recursive: true, force: true });
       await fs4.rename(dir, bk);
@@ -821,13 +977,126 @@ var PluginInstaller = class {
   }
 };
 
+// src/main/stores.ts
+import path5 from "node:path";
+
+// src/main/github-registry.ts
+import crypto3 from "node:crypto";
+var DEFAULT_TOPIC = "fluxplugin-plugin";
+var MAX_PACKAGE_BYTES = 100 * 1024 * 1024;
+var isLoopback = (h) => h === "127.0.0.1" || h === "localhost" || h === "[::1]";
+function assertSafeUrl(u) {
+  const url = new URL(u);
+  if (url.protocol !== "https:" && !(url.protocol === "http:" && isLoopback(url.hostname))) throw new Error(`refusing non-https URL: ${u}`);
+  return url;
+}
+var GitHubRegistry = class {
+  constructor(o = {}) {
+    this.o = o;
+    this.name = o.name ?? (o.repo ? `github:${o.repo}` : `github:topic/${o.topic ?? DEFAULT_TOPIC}`);
+  }
+  o;
+  name;
+  cache = /* @__PURE__ */ new Map();
+  get api() {
+    return (this.o.apiBase ?? "https://api.github.com").replace(/\/$/, "");
+  }
+  get raw() {
+    return (this.o.rawBase ?? "https://raw.githubusercontent.com").replace(/\/$/, "");
+  }
+  trusted(url) {
+    const hosts = /* @__PURE__ */ new Set(["api.github.com", "github.com", "raw.githubusercontent.com", new URL(this.api).hostname, new URL(this.raw).hostname]);
+    return hosts.has(url.hostname);
+  }
+  async get(u, accept = "application/vnd.github+json") {
+    const url = assertSafeUrl(u);
+    const headers = { accept, "user-agent": "fluxplugin" };
+    if (this.o.token && this.trusted(url)) headers["authorization"] = `Bearer ${this.o.token}`;
+    const res = await (this.o.fetchImpl ?? fetch)(url, { headers, redirect: "follow", signal: AbortSignal.timeout(2e4) });
+    if (res.status === 403 || res.status === 429) {
+      if (res.headers.get("x-ratelimit-remaining") === "0" || res.status === 429) throw new Error("GitHub rate limit reached. Set GITHUB_TOKEN (any token, no scopes needed) to raise it, or retry later.");
+    }
+    if (!res.ok) throw new Error(`GitHub responded ${res.status} for ${url.pathname}`);
+    return res;
+  }
+  async json(u) {
+    return await (await this.get(u)).json();
+  }
+  async search(query = "") {
+    const hit = this.cache.get(query);
+    if (hit && Date.now() - hit.at < 6e4) return hit.entries;
+    const entries = this.o.repo ? await this.catalog(query) : await this.discover(query);
+    this.cache.set(query, { at: Date.now(), entries });
+    return entries;
+  }
+  async catalog(query) {
+    const ref = this.o.ref ?? "HEAD";
+    const base = `${this.raw}/${this.o.repo}/${ref}/`;
+    const index = await this.json(new URL(this.o.indexPath ?? "index.json", base).href);
+    return entriesFromIndex(index, base, this.name, query);
+  }
+  async discover(query) {
+    const q = `topic:${this.o.topic ?? DEFAULT_TOPIC}${query ? ` ${query} in:name,description,readme` : ""}`;
+    const found = await this.json(`${this.api}/search/repositories?q=${encodeURIComponent(q)}&per_page=30&sort=updated`);
+    const out = [];
+    const queue = [...found.items ?? []];
+    const worker = async () => {
+      for (let repo = queue.shift(); repo; repo = queue.shift()) {
+        try {
+          const rel = await this.json(`${this.api}/repos/${repo.full_name}/releases/latest`);
+          const descAsset = rel.assets?.find((a) => a.name.endsWith(".fluxplugin.json"));
+          if (!descAsset) continue;
+          const d = await (await this.get(descAsset.browser_download_url, "application/json")).json();
+          const pkg2 = rel.assets?.find((a) => a.name === d.file);
+          if (!d || typeof d.id !== "string" || typeof d.version !== "string" || !pkg2 || !/^[0-9a-f]{64}$/.test(d.sha256 ?? "")) continue;
+          out.push({ id: d.id, name: d.name ?? d.id, version: d.version, description: d.description, author: d.author, permissions: d.permissions ?? [], location: pkg2.browser_download_url, source: this.name, sha256: d.sha256, homepage: repo.html_url, stars: repo.stargazers_count });
+        } catch (e) {
+          if (/rate limit/i.test(e.message)) throw e;
+        }
+      }
+    };
+    await Promise.all(Array.from({ length: 5 }, worker));
+    return out.sort((a, b) => (b.stars ?? 0) - (a.stars ?? 0) || a.id.localeCompare(b.id));
+  }
+  async fetch(entry, dest) {
+    const res = await this.get(entry.location, "application/octet-stream");
+    const len = Number(res.headers.get("content-length") ?? 0);
+    if (len > MAX_PACKAGE_BYTES) throw new Error("package is too large");
+    const buf = Buffer.from(await res.arrayBuffer());
+    if (buf.length > MAX_PACKAGE_BYTES) throw new Error("package is too large");
+    if (!entry.sha256) throw new Error("this store entry has no checksum; refusing to install an unverifiable package");
+    if (crypto3.createHash("sha256").update(buf).digest("hex") !== entry.sha256.replace(/^sha256-/, "")) throw new Error("downloaded package does not match the published checksum");
+    await extractTarGz(buf, dest);
+    return (await readPluginManifest(dest)).manifest;
+  }
+};
+
+// src/main/stores.ts
+var DEFAULT_STORE = { type: "github", topic: DEFAULT_TOPIC };
+function createRegistries(specs = [DEFAULT_STORE], opts = {}) {
+  const env = opts.env ?? process.env;
+  const token = env["GITHUB_TOKEN"] ?? env["GH_TOKEN"];
+  return specs.map((s2) => {
+    switch (s2.type) {
+      case "github":
+        return new GitHubRegistry({ ...s2, token, fetchImpl: opts.fetchImpl });
+      case "http":
+        return new HttpRegistry(s2.url, opts.fetchImpl);
+      case "local":
+        return new LocalRegistry(path5.resolve(opts.baseDir ?? process.cwd(), s2.path));
+      default:
+        throw new Error(`unknown store type: ${JSON.stringify(s2)}`);
+    }
+  });
+}
+
 // src/cli/build.ts
 import { promises as fs5 } from "node:fs";
-import path6 from "node:path";
+import path8 from "node:path";
 import { build, context } from "esbuild";
 
 // src/cli/shared-modules.ts
-import path5 from "node:path";
+import path6 from "node:path";
 var SHARED_MODULES = ["react", "react/jsx-runtime", "react/jsx-dev-runtime", "react-dom", "react-dom/client", "fluxplugin", "fluxplugin/react", "fluxplugin/manager-ui"];
 function sharedModulesPlugin(shared = SHARED_MODULES) {
   const set = new Set(shared);
@@ -843,85 +1112,99 @@ function sharedModulesPlugin(shared = SHARED_MODULES) {
 if (!m) throw new Error("Shared module ${args.path} is not provided by the host application (see installSharedModules).");
 module.exports = m;`,
         loader: "js",
-        resolveDir: path5.resolve(".")
+        resolveDir: path6.resolve(".")
       }));
     }
   };
 }
 
 // src/cli/build.ts
+init_tailwind();
 var exists = (f) => fs5.access(f).then(() => true, () => false);
 async function firstExisting(root, names) {
-  for (const n of names) if (await exists(path6.join(root, n))) return path6.join(root, n);
+  for (const n of names) if (await exists(path8.join(root, n))) return path8.join(root, n);
 }
-async function buildOptions(root) {
-  const raw = JSON.parse(await fs5.readFile(path6.join(root, "plugin.json"), "utf8"));
+async function buildOptions(root, dev = false) {
+  const raw = JSON.parse(await fs5.readFile(path8.join(root, "plugin.json"), "utf8"));
   const m = validateManifest(raw).manifest;
   if (!m) throw new Error("invalid plugin.json (run `fluxplugin validate`)");
   const out = [];
-  const common = { bundle: true, sourcemap: true, logLevel: "warning", plugins: [sharedModulesPlugin()], jsx: "automatic", loader: { ".module.css": "local-css" } };
+  const common = {
+    bundle: true,
+    sourcemap: dev,
+    // sourcemaps only while developing; a built/published plugin never has them
+    logLevel: "warning",
+    plugins: [sharedModulesPlugin()],
+    jsx: "automatic",
+    loader: { ".module.css": "local-css" }
+  };
   if (m.main) {
     const entry = await firstExisting(root, ["src/main.ts", "src/main.js"]);
     if (!entry) throw new Error("manifest declares `main` but src/main.ts was not found");
-    out.push({ ...common, entryPoints: [entry], outfile: path6.join(root, m.main), platform: "node", format: "esm", target: "node20", external: ["node:*", "electron"] });
+    out.push({ ...common, entryPoints: [entry], outfile: path8.join(root, m.main), platform: "node", format: "esm", target: "node20", external: ["node:*", "electron"] });
   }
   if (m.renderer) {
     const entry = await firstExisting(root, ["src/renderer.tsx", "src/renderer.ts", "src/renderer.jsx", "src/renderer.js"]);
     if (!entry) throw new Error("manifest declares `renderer` but src/renderer.tsx was not found");
-    out.push({ ...common, entryPoints: [entry], outfile: path6.join(root, m.renderer), platform: "browser", format: "esm", target: "chrome120" });
+    out.push({ ...common, entryPoints: [entry], outfile: path8.join(root, m.renderer), platform: "browser", format: "esm", target: "chrome120" });
   }
   for (const css of m.styles ?? []) {
-    const entry = path6.join(root, "src/styles", path6.basename(css));
-    if (await exists(entry)) out.push({ ...common, plugins: [], entryPoints: [entry], outfile: path6.join(root, css) });
+    if (path8.basename(css) === "tailwind.css") continue;
+    const entry = path8.join(root, "src/styles", path8.basename(css));
+    if (await exists(entry)) out.push({ ...common, plugins: [], entryPoints: [entry], outfile: path8.join(root, css) });
   }
   return out;
 }
 async function buildPlugin(root, watch = false, log2 = console.log) {
-  const opts = await buildOptions(root);
+  const opts = await buildOptions(root, watch);
+  const twIn = path8.join(root, "src/styles/tailwind.css");
+  const stopTw = await exists(twIn) ? compileTailwind({ cwd: root, input: twIn, output: path8.join(root, "dist/tailwind.css"), watch, searchFrom: [process.cwd(), path8.dirname(path8.dirname(root))] }, log2) : () => {
+  };
   if (!watch) {
     for (const o of opts) await build(o);
     log2(`built ${opts.length} bundle(s) in ${root}`);
-    return async () => {
-    };
+    return async () => stopTw();
   }
   const ctxs = await Promise.all(opts.map((o) => context(o)));
   await Promise.all(ctxs.map((c) => c.watch()));
   log2(`watching ${root} (${ctxs.length} bundles)`);
-  return async () => void await Promise.all(ctxs.map((c) => c.dispose()));
+  return async () => (stopTw(), void await Promise.all(ctxs.map((c) => c.dispose())));
 }
 
 // src/cli/host.ts
-import { spawn } from "node:child_process";
-import { existsSync, promises as fs7, statSync } from "node:fs";
-import { createRequire } from "node:module";
-import path8 from "node:path";
+import { spawn as spawn2, spawnSync as spawnSync2 } from "node:child_process";
+import { existsSync as existsSync2, promises as fs7, statSync } from "node:fs";
+import { createRequire as createRequire2 } from "node:module";
+import path10 from "node:path";
 import { build as build2, context as context2 } from "esbuild";
+init_tailwind();
 
 // src/cli/config.ts
 import { promises as fs6 } from "node:fs";
-import path7 from "node:path";
+import path9 from "node:path";
 async function loadConfig(flags, cwd = process.cwd()) {
   let file = {};
   try {
-    file = JSON.parse(await fs6.readFile(path7.join(cwd, "fluxplugin.config.json"), "utf8"));
+    file = JSON.parse(await fs6.readFile(path9.join(cwd, "fluxplugin.config.json"), "utf8"));
   } catch {
   }
   return {
-    pluginsDir: path7.resolve(cwd, flags.dir ?? file.pluginsDir ?? "plugins"),
-    dataDir: path7.resolve(cwd, flags.data ?? file.dataDir ?? ".flux-data")
+    pluginsDir: path9.resolve(cwd, flags.dir ?? file.pluginsDir ?? "plugins"),
+    dataDir: path9.resolve(cwd, flags.data ?? file.dataDir ?? ".flux-data"),
+    stores: Array.isArray(file.stores) && file.stores.length ? file.stores : [DEFAULT_STORE]
   };
 }
 
 // src/cli/host.ts
 var exists2 = (f) => fs7.access(f).then(() => true, () => false);
 async function isHostProject(cwd) {
-  if (await exists2(path8.join(cwd, "fluxplugin.config.json"))) return true;
-  return await exists2(path8.join(cwd, "src/app/renderer/index.tsx")) || await exists2(path8.join(cwd, "src/renderer.tsx"));
+  if (await exists2(path10.join(cwd, "fluxplugin.config.json"))) return true;
+  return await exists2(path10.join(cwd, "src/app/renderer/index.tsx")) || await exists2(path10.join(cwd, "src/renderer.tsx"));
 }
 var nodeBanner = { js: "import { createRequire as __r } from 'node:module'; const require = __r(import.meta.url);" };
 var pick = (cwd, ...rels) => {
-  for (const r of rels) if (existsSync(path8.join(cwd, r))) return path8.join(cwd, r);
-  return path8.join(cwd, rels[0]);
+  for (const r of rels) if (existsSync2(path10.join(cwd, r))) return path10.join(cwd, r);
+  return path10.join(cwd, rels[0]);
 };
 function hostBuilds(cwd, outDir, dev) {
   const common = { absWorkingDir: cwd, bundle: true, sourcemap: dev, logLevel: "warning", jsx: "automatic", define: { "process.env.NODE_ENV": JSON.stringify(dev ? "development" : "production") } };
@@ -930,27 +1213,32 @@ function hostBuilds(cwd, outDir, dev) {
   const preload = pick(cwd, "src/app/preload/index.ts", "src/preload.ts");
   const web = pick(cwd, "src/app/main/web.ts", "src/web.ts");
   return [
-    { ...common, entryPoints: [renderer], outfile: path8.join(outDir, "renderer.js"), platform: "browser", format: "esm", target: "chrome120" },
-    { ...common, entryPoints: [main], outfile: path8.join(outDir, "main.cjs"), platform: "node", format: "cjs", target: "node20", external: ["electron"] },
-    { ...common, entryPoints: [preload], outfile: path8.join(outDir, "preload.cjs"), platform: "node", format: "cjs", target: "node20", external: ["electron"] },
-    { ...common, entryPoints: [web], outfile: path8.join(outDir, "web.mjs"), platform: "node", format: "esm", target: "node20", external: ["electron"], banner: nodeBanner }
+    { ...common, entryPoints: [renderer], outfile: path10.join(outDir, "renderer.js"), platform: "browser", format: "esm", target: "chrome120" },
+    { ...common, entryPoints: [main], outfile: path10.join(outDir, "main.cjs"), platform: "node", format: "cjs", target: "node20", external: ["electron"] },
+    { ...common, entryPoints: [preload], outfile: path10.join(outDir, "preload.cjs"), platform: "node", format: "cjs", target: "node20", external: ["electron"] },
+    { ...common, entryPoints: [web], outfile: path10.join(outDir, "web.mjs"), platform: "node", format: "esm", target: "node20", external: ["electron"], banner: nodeBanner }
   ];
 }
 async function pluginDirs(cwd, pluginsDir) {
   const names = await fs7.readdir(pluginsDir).catch(() => []);
   const out = [];
-  for (const n of names.sort()) if (await exists2(path8.join(pluginsDir, n, "plugin.json"))) out.push(path8.join(pluginsDir, n));
+  for (const n of names.sort()) if (await exists2(path10.join(pluginsDir, n, "plugin.json"))) out.push(path10.join(pluginsDir, n));
   void cwd;
   return out;
 }
 async function buildHost(cwd, opts = {}) {
   const log2 = opts.log ?? console.log;
-  const cfgFile = JSON.parse(await fs7.readFile(path8.join(cwd, "fluxplugin.config.json"), "utf8").catch(() => "{}"));
+  const cfgFile = JSON.parse(await fs7.readFile(path10.join(cwd, "fluxplugin.config.json"), "utf8").catch(() => "{}"));
   const cfg = await loadConfig({}, cwd);
-  const outDir = path8.resolve(cwd, cfgFile.outDir ?? "dist");
+  const outDir = path10.resolve(cwd, cfgFile.outDir ?? "dist");
   await fs7.mkdir(outDir, { recursive: true });
-  await fs7.copyFile(pick(cwd, "src/app/renderer/index.html", "src/index.html"), path8.join(outDir, "index.html"));
+  await fs7.copyFile(pick(cwd, "src/app/renderer/index.html", "src/index.html"), path10.join(outDir, "index.html"));
   const disposers = [];
+  const twIn = path10.join(cwd, "src/app/renderer/styles/tailwind.css");
+  if (await exists2(twIn)) {
+    const stop = compileTailwind({ cwd, input: twIn, output: path10.join(outDir, "tailwind.css"), watch: opts.watch }, log2);
+    disposers.push(async () => stop());
+  }
   const opts2 = hostBuilds(cwd, outDir, !!opts.watch);
   if (opts.watch) {
     const ctxs = await Promise.all(opts2.map((o) => context2(o)));
@@ -962,26 +1250,42 @@ async function buildHost(cwd, opts = {}) {
     try {
       disposers.push(await buildPlugin(dir, !!opts.watch, log2));
     } catch (e) {
-      log2(`! plugin ${path8.basename(dir)} not built: ${e.message}`);
+      log2(`! plugin ${path10.basename(dir)} not built: ${e.message}`);
     }
   }
-  log2(`host built \u2192 ${path8.relative(cwd, outDir) || "."}`);
+  log2(`host built \u2192 ${path10.relative(cwd, outDir) || "."}`);
   return async () => void await Promise.all(disposers.map((d) => d()));
 }
 function electronBinary(cwd) {
   try {
-    const p = createRequire(path8.join(cwd, "package.json"))("electron");
-    if (typeof p === "string" && existsSync(p)) return { bin: p };
+    const p = createRequire2(path10.join(cwd, "package.json"))("electron");
+    if (typeof p === "string" && existsSync2(p)) return { bin: p };
     return { error: "the Electron binary was not found" };
   } catch (e) {
     return { error: e.message.split("\n")[0] };
   }
 }
+function ensureElectron(cwd, log2 = console.log) {
+  const first = electronBinary(cwd);
+  if (first.bin) return first;
+  let pkgDir;
+  try {
+    pkgDir = path10.dirname(createRequire2(path10.join(cwd, "package.json")).resolve("electron/package.json"));
+  } catch {
+    return { error: "Electron is not installed in this project" };
+  }
+  const installJs = path10.join(pkgDir, "install.js");
+  if (!existsSync2(installJs)) return first;
+  log2("Electron's binary is missing (your package manager blocked its install script) \u2192 downloading it now\u2026");
+  const r = spawnSync2(process.execPath, [installJs], { cwd: pkgDir, stdio: "inherit" });
+  if (r.status !== 0) return { error: "the Electron download failed (network or proxy?). Retry, or set ELECTRON_MIRROR" };
+  return electronBinary(cwd);
+}
 function needsNoSandbox(bin) {
   if (process.platform !== "linux") return false;
   if (process.getuid?.() === 0) return true;
   try {
-    const st = statSync(path8.join(path8.dirname(bin), "chrome-sandbox"));
+    const st = statSync(path10.join(path10.dirname(bin), "chrome-sandbox"));
     return !(st.uid === 0 && (st.mode & 2048) !== 0);
   } catch {
     return false;
@@ -990,18 +1294,18 @@ function needsNoSandbox(bin) {
 function startApp(cwd, opts = {}) {
   const log2 = opts.log ?? console.log;
   const env = { ...process.env, FLUXPLUGIN_PROJECT: cwd, ...opts.dev ? { FLUXPLUGIN_DEV: "1" } : {}, ...opts.port ? { PORT: String(opts.port) } : {} };
-  if (opts.web) return { child: spawn(process.execPath, [path8.join(cwd, "dist/web.mjs")], { cwd, env, stdio: "inherit" }), mode: "web" };
-  const { bin, error } = electronBinary(cwd);
+  if (opts.web) return { child: spawn2(process.execPath, [path10.join(cwd, "dist/web.mjs")], { cwd, env, stdio: "inherit" }), mode: "web" };
+  const { bin, error } = ensureElectron(cwd, log2);
   if (!bin) throw new Error(`cannot start Electron: ${error}.
-  Install it with:  npm install -D electron   (then re-run)
-  or run in a browser:  fluxplugin ${opts.dev ? "dev" : "start"} --web`);
-  const args = [...process.env["FLUXPLUGIN_ELECTRON_ARGS"]?.split(" ").filter(Boolean) ?? [], path8.join(cwd, "dist/main.cjs")];
+  Try:  npm install -D electron   then   fluxplugin doctor
+  Or run in a browser:  fluxplugin ${opts.dev ? "dev" : "start"} --web`);
+  const args = [...process.env["FLUXPLUGIN_ELECTRON_ARGS"]?.split(" ").filter(Boolean) ?? [], path10.join(cwd, "dist/main.cjs")];
   if (needsNoSandbox(bin)) {
     args.unshift("--no-sandbox");
     log2("! Linux: Electron's sandbox helper is not configured (or you run as root) \u2192 starting with --no-sandbox.\n  To fix permanently: sudo chown root node_modules/electron/dist/chrome-sandbox && sudo chmod 4755 node_modules/electron/dist/chrome-sandbox");
   }
   const started = Date.now();
-  const child = spawn(bin, args, { cwd, env, stdio: "inherit" });
+  const child = spawn2(bin, args, { cwd, env, stdio: "inherit" });
   child.on("exit", (code) => {
     if (code && Date.now() - started < 5e3) log2(`Electron exited with code ${code} right after starting. Scroll up for its error, or try:  fluxplugin dev --web`);
   });
@@ -1010,39 +1314,52 @@ function startApp(cwd, opts = {}) {
 
 // src/cli/host-files.generated.ts
 var HOST_APP_FILES = {
-  "src/app/main/framework.ts": `import { MainFramework } from "fluxplugin/main";
-import { CHANNELS } from "../shared/constants";
-import { registerOperations } from "./operations";
-
-export interface FrameworkOptions {
-  pluginDirs: string[];
-  dataDir: string;
-  dev?: boolean;
-  assetUrl?: (id: string, rel: string) => string;
-}
-
-/** Creates the plugin framework. Shared by the Electron entry (index.ts) and the browser entry (web.ts). */
-export function createFramework(opts: FrameworkOptions): MainFramework {
-  const fw = new MainFramework({
-    pluginDirs: opts.pluginDirs,
-    dataDir: opts.dataDir,
-    hotReload: opts.dev,
-    assetUrl: opts.assetUrl,
-    requireApproval: false, // true \u2192 users must approve each plugin's permissions
-    allowedRendererChannels: [CHANNELS.createItem],
-  });
-  registerOperations(fw);
-  return fw;
-}
-`,
-  "src/app/main/index.ts": '// Electron entry (main process). Keep it thin: wiring only, logic lives in the other files of this folder.\nimport { app, ipcMain, protocol, webContents } from "electron";\nimport path from "node:path";\nimport { PLUGIN_SCHEME, attachElectron, registerPluginProtocol } from "fluxplugin/main";\nimport { createFramework } from "./framework";\nimport { pluginDirs, projectRoot } from "./paths";\nimport { createMainWindow } from "./window";\n\nprotocol.registerSchemesAsPrivileged([PLUGIN_SCHEME]); // must run before the app is ready\n\napp.whenReady().then(async () => {\n  const fw = createFramework({\n    pluginDirs: pluginDirs(projectRoot(__dirname), app.getPath("userData")),\n    dataDir: path.join(app.getPath("userData"), "plugins-data"),\n    dev: !!process.env["FLUXPLUGIN_DEV"],\n  });\n  registerPluginProtocol(fw, protocol);\n  attachElectron(fw, { ipcMain: ipcMain as never, webContents: webContents as never });\n  await fw.start();\n  createMainWindow(__dirname);\n  app.on("before-quit", () => void fw.stop());\n});\n\napp.on("window-all-closed", () => app.quit());\n',
+  "src/app/main/framework.ts": 'import { MainFramework, type StoreSpec } from "fluxplugin/main";\nimport config from "../../../fluxplugin.config.json"; // bundled into the app at build time\nimport { CHANNELS } from "../shared/constants";\nimport { registerOperations } from "./operations";\n\nexport interface FrameworkOptions {\n  pluginDirs: string[];\n  dataDir: string;\n  dev?: boolean;\n  assetUrl?: (id: string, rel: string) => string;\n}\n\n/** Creates the plugin framework. Shared by the Electron entry (index.ts) and the browser entry (web.ts). */\nexport function createFramework(opts: FrameworkOptions): MainFramework {\n  const fw = new MainFramework({\n    pluginDirs: opts.pluginDirs,\n    dataDir: opts.dataDir,\n    hotReload: opts.dev,\n    assetUrl: opts.assetUrl,\n    // Where "Plugins \u2192 Available" looks. Default: GitHub (every repo that published with `fluxplugin publish`).\n    // Edit "stores" in fluxplugin.config.json to add your own store (github catalog, http, local) \u2014 see docs/STORE.md.\n    stores: config.stores as StoreSpec[],\n    requireApproval: false, // true \u2192 users must approve each plugin\'s permissions\n    allowedRendererChannels: [CHANNELS.createItem, CHANNELS.setTitleBarOverlay],\n  });\n  registerOperations(fw);\n  return fw;\n}\n',
+  "src/app/main/index.ts": '// Electron entry (main process). Keep it thin: wiring only, logic lives in the other files of this folder.\nimport { app, ipcMain, Menu, protocol, webContents } from "electron";\nimport path from "node:path";\nimport { PLUGIN_SCHEME, attachElectron, registerPluginProtocol } from "fluxplugin/main";\nimport { APP_NAME } from "../shared/constants";\nimport { createFramework } from "./framework";\nimport { pluginDirs, projectRoot } from "./paths";\nimport { createMainWindow } from "./window";\nimport { registerWindowApi } from "./window-api";\n\n// Own data folder per app. In dev Electron is started as `electron dist/main.cjs` and would otherwise be called "Electron",\n// sharing plugin state (enabled/disabled, permissions, settings) with every other app run that way.\napp.setName(APP_NAME);\n\nprotocol.registerSchemesAsPrivileged([PLUGIN_SCHEME]); // must run before the app is ready\n\napp.whenReady().then(async () => {\n  const dev = !!process.env["FLUXPLUGIN_DEV"];\n  // The menu bar is drawn by the renderer (<TitleBar />). Windows/Linux: no native menu. macOS keeps a minimal one\n  // so the system shortcuts (copy/paste/quit/hide) keep working.\n  Menu.setApplicationMenu(process.platform === "darwin" ? Menu.buildFromTemplate([{ role: "appMenu" }, { role: "editMenu" }, { role: "windowMenu" }]) : null);\n\n  const fw = createFramework({\n    pluginDirs: pluginDirs(projectRoot(__dirname), app.getPath("userData")),\n    dataDir: path.join(app.getPath("userData"), "plugins-data"),\n    dev,\n  });\n  registerPluginProtocol(fw, protocol);\n  attachElectron(fw, { ipcMain: ipcMain as never, webContents: webContents as never });\n  await fw.start();\n\n  const win = createMainWindow(__dirname);\n  registerWindowApi(fw, win);\n  if (dev) win.webContents.on("before-input-event", (_e, input) => input.key === "F12" && input.type === "keyDown" && win.webContents.toggleDevTools());\n  app.on("before-quit", () => void fw.stop());\n});\n\napp.on("window-all-closed", () => app.quit());\n',
   "src/app/main/operations.ts": 'import { s } from "fluxplugin";\nimport type { MainFramework } from "fluxplugin/main";\nimport { CHANNELS, OPERATIONS } from "../shared/constants";\nimport type { Item } from "../shared/types";\n\n/**\n * Host operations. Each one runs through the hook pipeline, so plugins can validate, normalize or veto it\n * (before.item.create, transform.item.create, ...) without touching this file.\n */\nexport function registerOperations(fw: MainFramework): void {\n  fw.manager.ipc.handle(\n    CHANNELS.createItem,\n    (input: { name: string }) =>\n      fw.manager.hooks.run(OPERATIONS.createItem, input, (i) => {\n        const item: Item = { id: Math.random().toString(36).slice(2, 8), name: i.name };\n        fw.manager.events.emit("item.created", item, "host");\n        return item as unknown as Record<string, unknown>;\n      }),\n    "host",\n    { input: s.object({ name: s.string() }) },\n  );\n}\n',
   "src/app/main/paths.ts": 'import path from "node:path";\n\n/** Project root: set by `fluxplugin dev|start`; falls back to the folder above dist/ (packaged app). */\nexport function projectRoot(distDir: string): string {\n  return process.env["FLUXPLUGIN_PROJECT"] ?? path.resolve(distDir, "..");\n}\n\n/** Plugins bundled with the app (read-only) and plugins installed by the user (writable). */\nexport function pluginDirs(root: string, userData: string): string[] {\n  return [path.join(root, "plugins"), path.join(userData, "plugins")];\n}\n',
   "src/app/main/web.ts": '// Browser entry: `fluxplugin dev --web` (no Electron needed).\nimport path from "node:path";\nimport { serveWeb } from "fluxplugin/main";\nimport { APP_NAME } from "../shared/constants";\nimport { createFramework } from "./framework";\n\nconst root = process.env["FLUXPLUGIN_PROJECT"] ?? process.cwd();\nconst fw = createFramework({\n  pluginDirs: [path.join(root, "plugins")],\n  dataDir: path.join(root, ".flux-data"),\n  dev: true,\n  assetUrl: (id, rel) => "/@plugins/" + id + "/" + rel.replace("./", ""),\n});\nawait fw.start();\nconst srv = await serveWeb(fw, { distDir: path.join(root, "dist"), port: Number(process.env["PORT"] ?? 5173) });\nconsole.log(APP_NAME + " -> http://127.0.0.1:" + srv.port);\n',
-  "src/app/main/window.ts": 'import { BrowserWindow } from "electron";\nimport path from "node:path";\n\nexport function createMainWindow(distDir: string): BrowserWindow {\n  const win = new BrowserWindow({\n    width: 1100,\n    height: 760,\n    show: false,\n    webPreferences: {\n      preload: path.join(distDir, "preload.cjs"),\n      contextIsolation: true,\n      sandbox: true,\n      nodeIntegration: false,\n    },\n  });\n  win.once("ready-to-show", () => win.show());\n  // The app never navigates away and never opens new windows.\n  win.webContents.setWindowOpenHandler(() => ({ action: "deny" }));\n  win.webContents.on("will-navigate", (e) => e.preventDefault());\n  void win.loadFile(path.join(distDir, "index.html"));\n  return win;\n}\n',
+  "src/app/main/window-api.ts": 'import type { BrowserWindow } from "electron";\nimport { s } from "fluxplugin";\nimport type { MainFramework } from "fluxplugin/main";\nimport { CHANNELS, TITLEBAR_HEIGHT } from "../shared/constants";\n\n/** Host operations that need the BrowserWindow. Add your own (maximize, always-on-top, \u2026) the same way. */\nexport function registerWindowApi(fw: MainFramework, win: BrowserWindow): void {\n  fw.manager.ipc.handle(\n    CHANNELS.setTitleBarOverlay,\n    (i: { color: string; symbolColor: string }) => {\n      // Only Windows/Linux have the native-controls overlay; on macOS the traffic lights need no colouring.\n      if (process.platform !== "darwin" && !win.isDestroyed()) {\n        try {\n          win.setTitleBarOverlay({ color: i.color, symbolColor: i.symbolColor, height: TITLEBAR_HEIGHT });\n        } catch {\n          /* colour not parseable: keep the previous one */\n        }\n      }\n      return true;\n    },\n    "host",\n    { input: s.object({ color: s.string(), symbolColor: s.string() }) },\n  );\n}\n',
+  "src/app/main/window.ts": `import { BrowserWindow, shell } from "electron";
+import path from "node:path";
+import { TITLEBAR_HEIGHT } from "../shared/constants";
+
+/**
+ * Frameless window with a custom title bar drawn by the renderer (<TitleBar />).
+ *  - macOS: "hiddenInset" keeps the native traffic-light buttons (the bar reserves space for them).
+ *  - Windows/Linux: "hidden" + titleBarOverlay keeps the native minimize/maximize/close buttons on the right.
+ */
+export function createMainWindow(distDir: string): BrowserWindow {
+  const mac = process.platform === "darwin";
+  const win = new BrowserWindow({
+    width: 1180,
+    height: 780,
+    minWidth: 760,
+    minHeight: 480,
+    show: false,
+    titleBarStyle: mac ? "hiddenInset" : "hidden",
+    ...(mac ? {} : { titleBarOverlay: { color: "#f8fafc", symbolColor: "#0f172a", height: TITLEBAR_HEIGHT } }),
+    webPreferences: {
+      preload: path.join(distDir, "preload.cjs"),
+      contextIsolation: true,
+      sandbox: true,
+      nodeIntegration: false,
+    },
+  });
+  win.once("ready-to-show", () => win.show());
+  // The app never navigates away; https links open in the user's browser, everything else is blocked.
+  win.webContents.setWindowOpenHandler(({ url }) => {
+    if (/^https:\\/\\//.test(url)) void shell.openExternal(url);
+    return { action: "deny" };
+  });
+  win.webContents.on("will-navigate", (e) => e.preventDefault());
+  void win.loadFile(path.join(distDir, "index.html"));
+  return win;
+}
+`,
   "src/app/preload/index.ts": 'import { contextBridge, ipcRenderer } from "electron";\nimport { exposeFluxBridge } from "fluxplugin/preload";\n\n// The only thing renderer code receives from the preload: window.__fluxplugin\nexposeFluxBridge(contextBridge, ipcRenderer);\n',
   "src/app/renderer/App.tsx": 'import type { FluxBridge } from "fluxplugin";\nimport type { RendererFramework } from "fluxplugin/react";\nimport { AppProviders } from "./providers/AppProviders";\nimport { AppShell } from "./shell/AppShell";\n\nexport function App({ framework, bridge }: { framework: RendererFramework; bridge: FluxBridge }) {\n  return (\n    <AppProviders framework={framework} bridge={bridge}>\n      <AppShell />\n    </AppProviders>\n  );\n}\n',
-  "src/app/renderer/bootstrap.ts": 'import React from "react";\nimport * as jsxRuntime from "react/jsx-runtime";\nimport * as ReactDOMClient from "react-dom/client";\nimport * as flux from "fluxplugin";\nimport * as fluxReact from "fluxplugin/react";\nimport type { FluxBridge } from "fluxplugin";\nimport { RendererFramework, createHttpBridge, installSharedModules } from "fluxplugin/react";\nimport { declareExtensionPoints } from "./extension-points";\nimport { registerHostRoutes } from "./routes";\n\n/**\n * Infrastructure layer: connects to the main process, shares singletons with plugin bundles,\n * declares what plugins may extend, registers the host\'s own routes, then starts the plugins.\n */\nexport async function bootstrap(): Promise<{ framework: RendererFramework; bridge: FluxBridge }> {\n  // One copy of React and of the runtime: plugin bundles import these from globalThis.\n  installSharedModules({\n    react: React,\n    "react/jsx-runtime": jsxRuntime,\n    "react/jsx-dev-runtime": jsxRuntime,\n    "react-dom/client": ReactDOMClient,\n    fluxplugin: flux,\n    "fluxplugin/react": fluxReact,\n  });\n\n  // Electron: the preload bridge. Browser mode: HTTP bridge to `fluxplugin dev --web`.\n  const bridge: FluxBridge = (window as unknown as { __fluxplugin?: FluxBridge }).__fluxplugin ?? createHttpBridge();\n  const framework = new RendererFramework({ bridge });\n\n  declareExtensionPoints(framework); // BEFORE plugins start\n  registerHostRoutes(framework);\n  await framework.start();\n  return { framework, bridge };\n}\n',
+  "src/app/renderer/bootstrap.ts": 'import React from "react";\nimport * as jsxRuntime from "react/jsx-runtime";\nimport * as ReactDOMClient from "react-dom/client";\nimport * as flux from "fluxplugin";\nimport * as fluxReact from "fluxplugin/react";\nimport type { FluxBridge } from "fluxplugin";\nimport { RendererFramework, createHttpBridge, declareHostPoints, installSharedModules } from "fluxplugin/react";\nimport { declareExtensionPoints } from "./extension-points";\nimport { registerHostMenus } from "./menus";\nimport { registerHostRoutes } from "./routes";\n\n/**\n * Infrastructure layer: connects to the main process, shares singletons with plugin bundles,\n * declares what plugins may extend, registers the host\'s own routes, then starts the plugins.\n */\nexport async function bootstrap(): Promise<{ framework: RendererFramework; bridge: FluxBridge }> {\n  // One copy of React and of the runtime: plugin bundles import these from globalThis.\n  installSharedModules({\n    react: React,\n    "react/jsx-runtime": jsxRuntime,\n    "react/jsx-dev-runtime": jsxRuntime,\n    "react-dom/client": ReactDOMClient,\n    fluxplugin: flux,\n    "fluxplugin/react": fluxReact,\n  });\n\n  // Electron: the preload bridge. Browser mode: HTTP bridge to `fluxplugin dev --web`.\n  const bridge: FluxBridge = (window as unknown as { __fluxplugin?: FluxBridge }).__fluxplugin ?? createHttpBridge();\n  const framework = new RendererFramework({ bridge });\n\n  declareHostPoints(framework); // built-in "theme" and "titlebar" (search providers) extension points\n  declareExtensionPoints(framework); // BEFORE plugins start\n  registerHostRoutes(framework);\n  registerHostMenus(framework);\n  await framework.start();\n  return { framework, bridge };\n}\n',
   "src/app/renderer/extension-points.ts": 'import { s } from "fluxplugin";\nimport type { RendererFramework } from "fluxplugin/react";\nimport { EXTENSION_POINTS } from "../shared/constants";\n\n/** Declare what plugins may contribute. Contributions are validated against these schemas. */\nexport function declareExtensionPoints(framework: RendererFramework): void {\n  framework.manager.extensionPoints.declare({\n    name: EXTENSION_POINTS.dashboard,\n    contributions: {\n      toolbar: s.object({ id: s.string(), label: s.string(), command: s.string().optional() }),\n    },\n  });\n}\n',
   "src/app/renderer/hooks/useCreateItem.ts": 'import { useState } from "react";\nimport { useBridge } from "../providers/AppProviders";\nimport { itemsApi } from "../services/items";\n\n/** Calls the host operation (which plugins may rewrite or veto through hooks) and exposes the outcome. */\nexport function useCreateItem() {\n  const bridge = useBridge();\n  const [result, setResult] = useState("");\n  const create = async (name: string) => {\n    try {\n      setResult(JSON.stringify(await itemsApi.create(bridge, name)));\n    } catch (e) {\n      setResult("blocked: " + (e as Error).message);\n    }\n  };\n  return { create, result };\n}\n',
   "src/app/renderer/index.html": `<!doctype html>
@@ -1050,7 +1367,7 @@ export function createFramework(opts: FrameworkOptions): MainFramework {
   <head>
     <meta charset="utf-8" />
     <title>__APP_NAME__</title>
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self' fluxplugin:; script-src 'self' fluxplugin:; style-src 'self' 'unsafe-inline' fluxplugin:; connect-src 'self'; img-src 'self' data:" />
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self' fluxplugin:; script-src 'self' fluxplugin:; style-src 'self' 'unsafe-inline' fluxplugin:; connect-src 'self'; img-src 'self' data: fluxplugin:; frame-src https://www.youtube-nocookie.com https://player.vimeo.com" />
     <link rel="stylesheet" href="./renderer.css" />
   </head>
   <body>
@@ -1060,9 +1377,35 @@ export function createFramework(opts: FrameworkOptions): MainFramework {
 </html>
 `,
   "src/app/renderer/index.tsx": '// Renderer entry. Order matters: styles \u2192 bootstrap (infrastructure) \u2192 mount (UI).\nimport "./styles/app.css";\nimport { createRoot } from "react-dom/client";\nimport { bootstrap } from "./bootstrap";\nimport { App } from "./App";\n\nconst { framework, bridge } = await bootstrap();\ncreateRoot(document.getElementById("root")!).render(<App framework={framework} bridge={bridge} />);\n',
-  "src/app/renderer/pages/DashboardPage.tsx": 'import { PluginSlot, useExtensionItems, usePluginFramework } from "fluxplugin/react";\nimport { EXTENSION_POINTS, SLOTS } from "../../shared/constants";\nimport type { ToolbarAction } from "../../shared/types";\nimport { useCreateItem } from "../hooks/useCreateItem";\n\nexport function DashboardPage() {\n  const framework = usePluginFramework();\n  const actions = useExtensionItems<ToolbarAction>(EXTENSION_POINTS.dashboard, "toolbar");\n  const { create, result } = useCreateItem();\n  return (\n    <div>\n      <h2>Dashboard</h2>\n      <PluginSlot name={SLOTS.dashboardBefore} />\n      <p className="hint">These buttons are contributed by plugins through a host-declared extension point.</p>\n      <div className="row" data-testid="toolbar">\n        {actions.map((a) => (\n          <button key={a.id} className="btn" onClick={() => a.command && void framework.manager.commands.execute(a.command)}>\n            {a.label}\n          </button>\n        ))}\n      </div>\n      <div className="row">\n        <button className="btn" onClick={() => void create("  Ada  ")}>Create item \u201C  Ada  \u201D (plugin hooks may rewrite it)</button>\n        <button className="btn" onClick={() => void create("   ")}>Create empty item (a plugin may veto)</button>\n      </div>\n      <pre data-testid="hook-result" className="hint">{result}</pre>\n      <PluginSlot name={SLOTS.dashboardAfter} />\n    </div>\n  );\n}\n',
+  "src/app/renderer/menus.ts": `import type { RendererFramework } from "fluxplugin/react";
+
+/**
+ * The host's own application menu (the bar in the title bar). Plugins add entries to the same registry, either as
+ * new top-level menus or as extra children \u2014 see docs/CUSTOMIZING.md. Shortcuts shown come from the commands' keybinding.
+ */
+export function registerHostMenus(framework: RendererFramework): void {
+  const { menus, commands } = framework.manager;
+  commands.register({ id: "host.palette", title: "Command palette", category: "View", keybinding: "Mod+K", execute: () => window.dispatchEvent(new KeyboardEvent("keydown", { key: "k", ctrlKey: true })) }, "host");
+  commands.register({ id: "host.reload", title: "Reload window", category: "View", keybinding: "Mod+R", execute: () => location.reload() }, "host");
+  commands.register({ id: "host.goHome", title: "Go to dashboard", category: "Go", execute: () => (location.hash = "#/") }, "host");
+  commands.register({ id: "host.goPlugins", title: "Manage plugins", category: "Go", execute: () => (location.hash = "#/plugins") }, "host");
+  commands.register({ id: "host.docs", title: "Documentation", category: "Help", execute: () => void window.open("https://www.npmjs.com/package/fluxplugin", "_blank") }, "host");
+
+  menus.register({ id: "app.go", location: "application", label: "Go", order: 10, children: [
+    { id: "app.go.home", label: "Dashboard", command: "host.goHome" },
+    { id: "app.go.plugins", label: "Plugins", command: "host.goPlugins" },
+  ] }, "host");
+  menus.register({ id: "app.view", location: "application", label: "View", order: 20, children: [
+    { id: "app.view.palette", label: "Command palette", command: "host.palette" },
+    { id: "app.view.sep", label: "", separator: true },
+    { id: "app.view.reload", label: "Reload", command: "host.reload" },
+  ] }, "host");
+  menus.register({ id: "app.help", location: "application", label: "Help", order: 90, children: [{ id: "app.help.docs", label: "Documentation", command: "host.docs" }] }, "host");
+}
+`,
+  "src/app/renderer/pages/DashboardPage.tsx": 'import { PluginSlot, useExtensionItems, usePluginFramework } from "fluxplugin/react";\nimport { EXTENSION_POINTS, SLOTS } from "../../shared/constants";\nimport type { ToolbarAction } from "../../shared/types";\nimport { useCreateItem } from "../hooks/useCreateItem";\n\nexport function DashboardPage() {\n  const framework = usePluginFramework();\n  const actions = useExtensionItems<ToolbarAction>(EXTENSION_POINTS.dashboard, "toolbar");\n  const { create, result } = useCreateItem();\n  return (\n    <div>\n      <h2>Dashboard</h2>\n      <PluginSlot name={SLOTS.dashboardBefore} />\n      <p className="hint">These buttons are contributed by plugins through a host-declared extension point.</p>\n      <div className="row" data-testid="toolbar">\n        {actions.map((a) => (\n          <button key={a.id} className="btn" onClick={() => a.command && void framework.manager.commands.execute(a.command)}>\n            {a.label}\n          </button>\n        ))}\n      </div>\n      <div className="row">\n        <button className="btn" onClick={() => void create("  Ada  ")}>Create item \u201C  Ada  \u201D (plugin hooks may rewrite it)</button>\n        <button className="btn" onClick={() => void create("   ")}>Create empty item (a plugin may veto)</button>\n      </div>\n      <div className="row">\n        <button className="btn" data-testid="notify" onClick={() => framework.manager.notifications.push({ title: "Hello from the host", body: "Plugins can do this too.", level: "success" })}>Show a notification</button>\n      </div>\n      <pre data-testid="hook-result" className="hint">{result}</pre>\n      <PluginSlot name={SLOTS.dashboardAfter} />\n    </div>\n  );\n}\n',
   "src/app/renderer/pages/PluginsPage.tsx": 'import { PluginManagerUI } from "fluxplugin/manager-ui";\n\n/** Ready-made plugin manager (enable/disable, permissions, settings, logs, install). Replace with your own UI if you like. */\nexport function PluginsPage() {\n  return <PluginManagerUI />;\n}\n',
-  "src/app/renderer/providers/AppProviders.tsx": 'import { createContext, useContext, type ReactNode } from "react";\nimport type { FluxBridge } from "fluxplugin";\nimport { PluginProvider, StyleHost, baseCss, type RendererFramework } from "fluxplugin/react";\n\nconst BridgeContext = createContext<FluxBridge | null>(null);\n\n/** Gives pages access to the main-process bridge without importing globals. */\nexport function useBridge(): FluxBridge {\n  const b = useContext(BridgeContext);\n  if (!b) throw new Error("useBridge must be used inside <AppProviders>");\n  return b;\n}\n\nexport function AppProviders({ framework, bridge, children }: { framework: RendererFramework; bridge: FluxBridge; children: ReactNode }) {\n  return (\n    <PluginProvider framework={framework}>\n      <BridgeContext.Provider value={bridge}>\n        <style>{baseCss}</style>\n        <StyleHost />\n        {children}\n      </BridgeContext.Provider>\n    </PluginProvider>\n  );\n}\n',
+  "src/app/renderer/providers/AppProviders.tsx": 'import { createContext, useCallback, useContext, type ReactNode } from "react";\nimport type { FluxBridge } from "fluxplugin";\nimport { PluginProvider, StyleHost, ThemeProvider, ToastHost, baseCss, type RendererFramework } from "fluxplugin/react";\nimport { setTitleBarOverlay } from "../services/window";\n\nconst BridgeContext = createContext<FluxBridge | null>(null);\n\n/** Gives pages access to the main-process bridge without importing globals. */\nexport function useBridge(): FluxBridge {\n  const b = useContext(BridgeContext);\n  if (!b) throw new Error("useBridge must be used inside <AppProviders>");\n  return b;\n}\n\nexport function AppProviders({ framework, bridge, children }: { framework: RendererFramework; bridge: FluxBridge; children: ReactNode }) {\n  // Keep the native window buttons in sync with the theme (light / dark / plugin themes).\n  const onResolved = useCallback((r: { surface: string; fg: string }) => r.surface && setTitleBarOverlay(bridge, r.surface, r.fg), [bridge]);\n  return (\n    <PluginProvider framework={framework}>\n      <BridgeContext.Provider value={bridge}>\n        <style>{baseCss}</style>\n        <StyleHost />\n        <ThemeProvider onResolved={onResolved}>\n          {children}\n          <ToastHost />\n        </ThemeProvider>\n      </BridgeContext.Provider>\n    </PluginProvider>\n  );\n}\n',
   "src/app/renderer/routes.ts": `import type { RendererFramework } from "fluxplugin/react";
 import { DashboardPage } from "./pages/DashboardPage";
 import { PluginsPage } from "./pages/PluginsPage";
@@ -1074,12 +1417,35 @@ export function registerHostRoutes(framework: RendererFramework): void {
 }
 `,
   "src/app/renderer/services/items.ts": 'import type { FluxBridge } from "fluxplugin";\nimport { CHANNELS } from "../../shared/constants";\nimport type { Item } from "../../shared/types";\n\n/** Service layer: the only place that knows the IPC channel names. UI code calls these functions. */\nexport const itemsApi = {\n  create: (bridge: FluxBridge, name: string) => bridge.invoke(CHANNELS.createItem, { name }) as Promise<Item>,\n};\n',
-  "src/app/renderer/shell/AppShell.tsx": 'import { Breadcrumbs, CommandPalette, PluginRoutes, useKeybindings } from "fluxplugin/react";\nimport { Sidebar } from "./Sidebar";\n\n/** Layout of the whole window: sidebar + routed content + command palette. */\nexport function AppShell() {\n  useKeybindings(); // runs commands bound to keyboard shortcuts (Mod+Shift+R, ...)\n  return (\n    <div className="app">\n      <Sidebar />\n      <main className="main">\n        <Breadcrumbs />\n        <PluginRoutes />\n      </main>\n      <CommandPalette />\n    </div>\n  );\n}\n',
-  "src/app/renderer/shell/Sidebar.tsx": 'import { Link, PluginSlot, useMenu } from "fluxplugin/react";\nimport { APP_NAME, SLOTS } from "../../shared/constants";\n\nexport function Sidebar() {\n  const { items, run } = useMenu("sidebar"); // entries added by plugins (routes with meta.menu, or menus.register)\n  return (\n    <aside className="side">\n      <h1>\n        {APP_NAME} <PluginSlot name={SLOTS.sidebarHeader} />\n      </h1>\n      <Link to="/">Dashboard</Link>\n      {items.map((i) => (\n        <a key={i.id} href={"#" + i.path} onClick={(e) => (e.preventDefault(), run(i))}>\n          {i.label}\n        </a>\n      ))}\n      <Link to="/plugins">Plugins</Link>\n      <p className="hint">Ctrl/Cmd+K: commands</p>\n    </aside>\n  );\n}\n',
-  "src/app/renderer/styles/app.css": "body { margin: 0; font: 14px system-ui; background: var(--flux-bg); color: var(--flux-fg); }\n.app { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }\n.side { border-right: 1px solid var(--flux-border); padding: 16px; background: var(--flux-surface); }\n.side h1 { font-size: 16px; margin: 0 0 14px; }\n.side a { display: block; padding: 7px 10px; border-radius: 8px; color: inherit; text-decoration: none; margin: 2px 0; }\n.side a[data-active] { background: var(--flux-accent); color: #fff; }\n.main { padding: 24px; max-width: 860px; }\n.row { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }\n.btn { border: 1px solid var(--flux-border); background: var(--flux-bg); color: inherit; border-radius: 8px; padding: 6px 12px; cursor: pointer; }\n.hint { color: var(--flux-muted); font-size: 12px; }\n",
-  "src/app/shared/constants.ts": '/** Names shared by the main process and the renderer. No imports here: this layer depends on nothing. */\nexport const APP_NAME = "__APP_NAME__";\n\n/** IPC channels the host exposes to the renderer (also allow-listed in main/framework.ts). */\nexport const CHANNELS = {\n  createItem: "host.item.create",\n} as const;\n\n/** Declarative extension points the host offers to plugins (see renderer/extension-points.ts). */\nexport const EXTENSION_POINTS = {\n  dashboard: "dashboard",\n} as const;\n\n/** UI slots where plugins can inject components (see <PluginSlot name=... />). */\nexport const SLOTS = {\n  sidebarHeader: "header.badges",\n  dashboardBefore: "dashboard.before",\n  dashboardAfter: "dashboard.after",\n} as const;\n\n/** Hook pipeline operations plugins can intercept: before./after./transform./validate.<operation>. */\nexport const OPERATIONS = {\n  createItem: "item.create",\n} as const;\n',
+  "src/app/renderer/services/window.ts": 'import type { FluxBridge } from "fluxplugin";\nimport { CHANNELS } from "../../shared/constants";\n\n/** Colours the native window buttons (Windows/Linux). A no-op error in browser mode is ignored on purpose. */\nexport function setTitleBarOverlay(bridge: FluxBridge, color: string, symbolColor: string): void {\n  void bridge.invoke(CHANNELS.setTitleBarOverlay, { color, symbolColor }).catch(() => undefined);\n}\n',
+  "src/app/renderer/shell/AppShell.tsx": 'import { Breadcrumbs, CommandPalette, PluginRoutes, PluginSlot, TitleBar, useKeybindings } from "fluxplugin/react";\nimport { APP_NAME, SLOTS } from "../../shared/constants";\nimport { Sidebar } from "./Sidebar";\n\n/** Whole window: custom title bar (menus, search, theme, notifications) \u2192 sidebar + routed content. */\nexport function AppShell() {\n  useKeybindings(); // runs commands bound to keyboard shortcuts (Mod+Shift+R, ...)\n  return (\n    <div className="app">\n      <TitleBar title={APP_NAME} logo={<PluginSlot name={SLOTS.brandBadges} />} searchPlaceholder="Search commands, pages\u2026" />\n      <div className="body">\n        <Sidebar />\n        <main className="main">\n          <Breadcrumbs />\n          <PluginRoutes />\n        </main>\n      </div>\n      <CommandPalette />\n    </div>\n  );\n}\n',
+  "src/app/renderer/shell/Sidebar.tsx": 'import { Link, useMenu } from "fluxplugin/react";\n\nexport function Sidebar() {\n  const { items, run } = useMenu("sidebar"); // entries added by plugins (routes with meta.menu, or menus.register)\n  return (\n    <aside className="side">\n      <Link to="/">Dashboard</Link>\n      {items.map((i) => (\n        <a key={i.id} href={"#" + i.path} onClick={(e) => (e.preventDefault(), run(i))}>\n          {i.label}\n        </a>\n      ))}\n      <Link to="/plugins">Plugins</Link>\n      <p className="hint">Ctrl/Cmd+K: commands</p>\n    </aside>\n  );\n}\n',
+  "src/app/renderer/styles/app.css": "body { margin: 0; font: 14px system-ui; background: var(--flux-bg); color: var(--flux-fg); }\n.app { display: grid; grid-template-rows: var(--flux-titlebar-h, 40px) 1fr; min-height: 100vh; }\n.body { display: grid; grid-template-columns: 220px 1fr; min-height: 0; }\n.side { border-right: 1px solid var(--flux-border); padding: 16px; background: var(--flux-surface); }\n.side a { display: block; padding: 7px 10px; border-radius: 8px; color: inherit; text-decoration: none; margin: 2px 0; }\n.side a[data-active] { background: var(--flux-accent); color: #fff; }\n.main { padding: 24px; max-width: 860px; overflow: auto; }\n.row { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }\n.btn { border: 1px solid var(--flux-border); background: var(--flux-bg); color: inherit; border-radius: 8px; padding: 6px 12px; cursor: pointer; }\n.hint { color: var(--flux-muted); font-size: 12px; }\n",
+  "src/app/shared/constants.ts": '/** Names shared by the main process and the renderer. No imports here: this layer depends on nothing. */\nexport const APP_NAME = "__APP_NAME__";\n\n/** Height of the custom title bar in px (must match --flux-titlebar-h in CSS). */\nexport const TITLEBAR_HEIGHT = 40;\n\n/** IPC channels the host exposes to the renderer (also allow-listed in main/framework.ts). */\nexport const CHANNELS = {\n  createItem: "host.item.create",\n  /** Colours the native window buttons (Windows/Linux overlay) to match the current theme. */\n  setTitleBarOverlay: "host.window.setTitleBarOverlay",\n} as const;\n\n/** Declarative extension points the host offers to plugins (see renderer/extension-points.ts).\n *  The built-in "theme" and "titlebar" points are declared by declareHostPoints(). */\nexport const EXTENSION_POINTS = {\n  dashboard: "dashboard",\n} as const;\n\n/** UI slots where plugins can inject components (see <PluginSlot name=... />). */\nexport const SLOTS = {\n  brandBadges: "header.badges",\n  titlebarLeft: "titlebar.left",\n  titlebarRight: "titlebar.right",\n  dashboardBefore: "dashboard.before",\n  dashboardAfter: "dashboard.after",\n} as const;\n\n/** Hook pipeline operations plugins can intercept: before./after./transform./validate.<operation>. */\nexport const OPERATIONS = {\n  createItem: "item.create",\n} as const;\n',
   "src/app/shared/types.ts": 'export interface Item {\n  id: string;\n  name: string;\n}\n\n/** Shape of a contribution to the "dashboard" extension point (validated in renderer/extension-points.ts). */\nexport interface ToolbarAction {\n  id: string;\n  label: string;\n  command?: string;\n}\n'
 };
+var HOST_TAILWIND_FILES = {
+  "src/app/renderer/index.html": `<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>__APP_NAME__</title>
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self' fluxplugin:; script-src 'self' fluxplugin:; style-src 'self' 'unsafe-inline' fluxplugin:; connect-src 'self'; img-src 'self' data: fluxplugin:; frame-src https://www.youtube-nocookie.com https://player.vimeo.com" />
+    <link rel="stylesheet" href="./renderer.css" />
+    <link rel="stylesheet" href="./tailwind.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./renderer.js"></script>
+  </body>
+</html>
+`,
+  "src/app/renderer/pages/DashboardPage.tsx": 'import { PluginSlot, useExtensionItems, usePluginFramework } from "fluxplugin/react";\nimport { EXTENSION_POINTS, SLOTS } from "../../shared/constants";\nimport type { ToolbarAction } from "../../shared/types";\nimport { useCreateItem } from "../hooks/useCreateItem";\n\nexport function DashboardPage() {\n  const framework = usePluginFramework();\n  const actions = useExtensionItems<ToolbarAction>(EXTENSION_POINTS.dashboard, "toolbar");\n  const { create, result } = useCreateItem();\n  return (\n    <div>\n      <h2>Dashboard</h2>\n      <PluginSlot name={SLOTS.dashboardBefore} />\n      <p className="text-xs text-muted">These buttons are contributed by plugins through a host-declared extension point.</p>\n      <div className="my-3 flex flex-wrap gap-2" data-testid="toolbar">\n        {actions.map((a) => (\n          <button key={a.id} className="cursor-pointer rounded-lg border border-border bg-bg px-3 py-1.5 hover:bg-surface" onClick={() => a.command && void framework.manager.commands.execute(a.command)}>\n            {a.label}\n          </button>\n        ))}\n      </div>\n      <div className="my-3 flex flex-wrap gap-2">\n        <button className="cursor-pointer rounded-lg border border-border bg-bg px-3 py-1.5 hover:bg-surface" onClick={() => void create("  Ada  ")}>Create item \u201C  Ada  \u201D (plugin hooks may rewrite it)</button>\n        <button className="cursor-pointer rounded-lg border border-border bg-bg px-3 py-1.5 hover:bg-surface" onClick={() => void create("   ")}>Create empty item (a plugin may veto)</button>\n      </div>\n      <div className="my-3 flex flex-wrap gap-2">\n        <button className="cursor-pointer rounded-lg border border-border bg-bg px-3 py-1.5 hover:bg-surface" data-testid="notify" onClick={() => framework.manager.notifications.push({ title: "Hello from the host", body: "Plugins can do this too.", level: "success" })}>Show a notification</button>\n      </div>\n      <pre data-testid="hook-result" className="text-xs text-muted">{result}</pre>\n      <PluginSlot name={SLOTS.dashboardAfter} />\n    </div>\n  );\n}\n',
+  "src/app/renderer/shell/AppShell.tsx": 'import { Breadcrumbs, CommandPalette, PluginRoutes, PluginSlot, TitleBar, useKeybindings } from "fluxplugin/react";\nimport { APP_NAME, SLOTS } from "../../shared/constants";\nimport { Sidebar } from "./Sidebar";\n\n/** Same structure as the default template, styled with Tailwind utilities. */\nexport function AppShell() {\n  useKeybindings();\n  return (\n    <div className="app grid min-h-screen grid-rows-[40px_1fr]">\n      <TitleBar title={APP_NAME} logo={<PluginSlot name={SLOTS.brandBadges} />} searchPlaceholder="Search commands, pages\u2026" />\n      <div className="body grid min-h-0 grid-cols-[220px_1fr]">\n        <Sidebar />\n        <main className="main max-w-3xl overflow-auto p-6">\n          <Breadcrumbs />\n          <PluginRoutes />\n        </main>\n      </div>\n      <CommandPalette />\n    </div>\n  );\n}\n',
+  "src/app/renderer/shell/Sidebar.tsx": 'import { Link, useMenu } from "fluxplugin/react";\n\nconst link = "block rounded-lg px-2.5 py-1.5 no-underline text-fg data-[active]:bg-accent data-[active]:text-white";\n\nexport function Sidebar() {\n  const { items, run } = useMenu("sidebar");\n  return (\n    <aside className="side border-r border-border bg-surface p-4">\n      <Link to="/" className={link}>Dashboard</Link>\n      {items.map((i) => (\n        <a key={i.id} className={link} href={"#" + i.path} onClick={(e) => (e.preventDefault(), run(i))}>{i.label}</a>\n      ))}\n      <Link to="/plugins" className={link}>Plugins</Link>\n      <p className="mt-3 text-xs text-muted">Ctrl/Cmd+K: commands</p>\n    </aside>\n  );\n}\n',
+  "src/app/renderer/styles/app.css": "body { margin: 0; font: 14px system-ui; background: var(--flux-bg); color: var(--flux-fg); }\n",
+  "src/app/renderer/styles/tailwind.css": '/* Tailwind v4, compiled by `fluxplugin dev|build` to dist/tailwind.css.\n   Colors come from the theme variables, so Tailwind utilities follow light / dark / plugin themes automatically:\n   use bg-surface, text-fg, border-border, text-muted, bg-accent \u2026 */\n@import "tailwindcss";\n\n/* Plugins are shipped as built JS: scan their dist so the classes they use are generated. Plugins that users install later\n   should ship their own precompiled CSS (fluxplugin plugin new my-plugin --tailwindcss). */\n@source "../../../../plugins/*/dist";\n\n@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));\n\n@theme inline {\n  --color-bg: var(--flux-bg);\n  --color-fg: var(--flux-fg);\n  --color-surface: var(--flux-surface);\n  --color-border: var(--flux-border);\n  --color-accent: var(--flux-accent);\n  --color-muted: var(--flux-muted);\n}\n'
+};
 
 // src/cli/templates.ts
 var pkg = (v) => JSON.stringify(
@@ -1088,7 +1454,7 @@ var pkg = (v) => JSON.stringify(
     version: "1.0.0",
     private: true,
     type: "module",
-    scripts: { dev: "fluxplugin dev", build: "fluxplugin build", package: "fluxplugin package", validate: "fluxplugin validate" },
+    scripts: { dev: "fluxplugin dev", build: "fluxplugin build", package: "fluxplugin package", validate: "fluxplugin validate", release: "fluxplugin publish" },
     devDependencies: { fluxplugin: "^1.0.0", "@types/react": "^19.0.0", react: "^19.0.0", typescript: "^5.6.0" }
   },
   null,
@@ -1124,6 +1490,14 @@ function basic(v) {
         version: "1.0.0",
         description: `${v.name} plugin`,
         author: "Your name",
+        license: "MIT",
+        repository: "https://github.com/YOUR_NAME/${v.slug}",
+        // fluxplugin publish releases here (replace YOUR_NAME)
+        icon: "./assets/icon.svg",
+        readme: "./README.md",
+        categories: ["Productivity"],
+        keywords: ["${v.slug}"],
+        links: {},
         main: "./dist/main.mjs",
         renderer: "./dist/renderer.js",
         styles: ["./dist/index.css"],
@@ -1174,17 +1548,8 @@ export default definePlugin({
 });
 `,
     "src/styles/index.css": styles(v),
-    "README.md": `# ${v.name}
-
-Created with \`fluxplugin create\`.
-
-\`\`\`bash
-pnpm install
-pnpm dev       # rebuild on change (the host hot-reloads it)
-pnpm build
-pnpm package   # produces ${v.id}-1.0.0.tgz
-\`\`\`
-`
+    "assets/icon.svg": iconSvg(v),
+    "README.md": readme(v)
   };
 }
 function dashboard(v) {
@@ -1192,7 +1557,7 @@ function dashboard(v) {
   const m = JSON.parse(files["plugin.json"]);
   m.activationEvents = ["onStartup"];
   m.contributes = {};
-  m.permissions = ["commands", "routes", "menus", "ui", "styles"];
+  m.permissions = ["commands", "routes", "menus", "ui", "styles", "notifications"];
   files["plugin.json"] = JSON.stringify(m, null, 2);
   files["src/renderer.tsx"] = `import { definePlugin } from "fluxplugin";
 import { usePluginState } from "fluxplugin/react";
@@ -1215,9 +1580,21 @@ function ${v.Pascal}Page() {
 export default definePlugin({
   routes: [{ path: "/${v.slug}", lazy: async () => ({ default: ${v.Pascal}Page }), meta: { title: "${v.name}", breadcrumb: "${v.name}", menu: { label: "${v.name}" } } }],
   components: [{ slot: "dashboard.after", component: ${v.Pascal}Widget, priority: 10 }],
-  // Data contribution to the host's "dashboard" extension point (validated by the host's schema).
-  extensions: [{ point: "dashboard", contribution: { toolbar: [{ id: "${v.slug}-hello", label: "${v.name}: hello", command: "${v.slug}.hello" }] } }],
   commands: [{ id: "${v.slug}.hello", title: "${v.name}: say hello", category: "${v.name}", execute: () => console.log("Hello from ${v.name}!") }],
+  // Application menu: adds a top-level "${v.name}" menu to the title bar (File/Edit-style). Shortcuts come from the command's keybinding.
+  menus: [{ id: "${v.slug}.menu", location: "application", label: "${v.name}", order: 50,
+    children: [{ id: "${v.slug}.menu.open", label: "Open ${v.name}", path: "/${v.slug}" }, { id: "${v.slug}.menu.hello", label: "Say hello", command: "${v.slug}.hello" }] }],
+  // Title-bar search: your results appear next to commands and pages.
+  extensions: [
+    { point: "dashboard", contribution: { toolbar: [{ id: "${v.slug}-hello", label: "${v.name}: hello", command: "${v.slug}.hello" }] } },
+    { point: "titlebar", contribution: { searchProviders: [{ id: "${v.slug}.search", label: "${v.name}",
+      search: (q: string) => ("${v.slug}".includes(q.toLowerCase()) ? [{ id: "${v.slug}.r1", title: "Open ${v.name}", subtitle: "page", run: () => { location.hash = "#/${v.slug}"; } }] : []) }] } },
+  ],
+  // A theme: tokens are CSS variables; the user picks it in the title bar.
+  // { point: "theme", contribution: { themes: [{ id: "${v.slug}.ocean", label: "Ocean", dark: true, tokens: { "--flux-bg": "#06202b", "--flux-surface": "#0a2c3a", "--flux-fg": "#e6f6ff", "--flux-border": "#14465a", "--flux-accent": "#22d3ee" } }] } },
+  onActivate(ctx) {
+    ctx.notifications.push({ title: "${v.name} is ready", body: "Open the title-bar bell to see this notification.", level: "success" });
+  },
 });
 `;
   return files;
@@ -1276,6 +1653,75 @@ function varsFromName(name) {
   const Pascal = short.split(/[^a-z0-9]+/i).filter(Boolean).map((p) => p[0].toUpperCase() + p.slice(1)).join("");
   return { id, name: short.split("-").map((p) => p[0].toUpperCase() + p.slice(1)).join(" "), slug: short.replace(/-/g, "_"), Pascal };
 }
+function iconSvg(v) {
+  let h = 0;
+  for (const c of v.id) h = (h * 31 + c.charCodeAt(0)) % 360;
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><rect width="96" height="96" rx="22" fill="hsl(${h} 70% 48%)"/><text x="48" y="64" font-family="system-ui,sans-serif" font-size="52" font-weight="700" text-anchor="middle" fill="#fff">${v.name[0].toUpperCase()}</text></svg>
+`;
+}
+function readme(v) {
+  return `# ${v.name}
+
+One or two sentences that say what this plugin does and who it is for.
+
+## What you get
+
+- A **page** at \`/${v.slug}\` in the sidebar
+- A **widget** on the dashboard
+- A **command** you can run from the command palette (Ctrl/Cmd+K)
+
+## How to use it
+
+1. Enable the plugin in **Plugins**.
+2. Open **${v.name}** in the sidebar.
+3. Configure it in the plugin's *Settings* section.
+
+## Permissions
+
+| Permission | Why |
+| --- | --- |
+| \`routes\`, \`menus\` | adds its page and sidebar entry |
+| \`ui\` | adds a dashboard widget |
+| \`commands\` | registers its commands |
+
+## Video & screenshots
+
+Add them in \`plugin.json\` and they appear on this page:
+
+\`\`\`json
+"video": "https://www.youtube.com/watch?v=YOUR_VIDEO_ID",
+"banner": "./assets/banner.png",
+"screenshots": ["./assets/shot-1.png", "./assets/shot-2.png"],
+"links": { "docs": "https://example.com/docs", "support": "https://example.com/support" }
+\`\`\`
+
+## Changelog
+
+- **1.0.0** \u2014 first release
+`;
+}
+function withTailwind(files, v) {
+  const m = JSON.parse(files["plugin.json"]);
+  m.styles = ["./dist/index.css", "./dist/tailwind.css"];
+  files["plugin.json"] = JSON.stringify(m, null, 2);
+  const pkg2 = JSON.parse(files["package.json"]);
+  pkg2.devDependencies = { ...pkg2.devDependencies, tailwindcss: "^4.0.0", "@tailwindcss/cli": "^4.0.0" };
+  files["package.json"] = JSON.stringify(pkg2, null, 2);
+  files["src/styles/tailwind.css"] = `/* Utilities only: the host owns the preflight/reset. Colors follow the host theme. */
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+
+@theme inline {
+  --color-surface: var(--flux-surface);
+  --color-border: var(--flux-border);
+  --color-accent: var(--flux-accent);
+  --color-muted: var(--flux-muted);
+  --color-fg: var(--flux-fg);
+}
+`;
+  files["src/renderer.tsx"] = files["src/renderer.tsx"].split(`className="${v.slug}-card"`).join('className="rounded-xl border border-border bg-surface p-4"');
+  return files;
+}
 
 // src/cli/host-templates.ts
 function hostFiles(v, withSample = true) {
@@ -1296,31 +1742,36 @@ function hostFiles(v, withSample = true) {
           typecheck: "tsc --noEmit"
         },
         dependencies: { fluxplugin: v.fluxSpec, react: "^19.0.0", "react-dom": "^19.0.0" },
-        devDependencies: { electron: "^33.0.0", typescript: "~5.9.3", "@types/node": "^22.10.0", "@types/react": "^19.0.0", "@types/react-dom": "^19.0.0" }
+        devDependencies: { electron: v.electron ?? "^44.5.1", typescript: "~5.9.3", "@types/node": "^22.10.0", "@types/react": "^19.0.0", "@types/react-dom": "^19.0.0", ...v.tailwind ? { tailwindcss: "^4.0.0", "@tailwindcss/cli": "^4.0.0" } : {} },
+        // npm 11.16+/12 and pnpm 10 block dependency install scripts unless allowed; Electron needs its postinstall to download the binary.
+        allowScripts: { electron: true, esbuild: true },
+        pnpm: { onlyBuiltDependencies: ["electron", "esbuild"] }
       },
       null,
       2
     ),
-    "fluxplugin.config.json": JSON.stringify({ pluginsDir: "plugins", outDir: "dist" }, null, 2),
+    // "stores" is used by the CLI (fluxplugin search/install) AND by your app (Plugins → Available). Add your own store here.
+    "fluxplugin.config.json": JSON.stringify({ pluginsDir: "plugins", outDir: "dist", stores: [{ type: "github", topic: "fluxplugin-plugin" }] }, null, 2),
     "tsconfig.json": JSON.stringify(
-      { compilerOptions: { target: "ES2022", module: "ESNext", moduleResolution: "Bundler", jsx: "react-jsx", strict: true, noEmit: true, skipLibCheck: true, lib: ["ES2022", "DOM", "DOM.Iterable"], types: ["node"] }, include: ["src"] },
+      { compilerOptions: { target: "ES2022", module: "ESNext", moduleResolution: "Bundler", jsx: "react-jsx", strict: true, noEmit: true, skipLibCheck: true, resolveJsonModule: true, lib: ["ES2022", "DOM", "DOM.Iterable"], types: ["node"] }, include: ["src"] },
       null,
       2
     ),
     ".gitignore": "node_modules\ndist\n.flux-data\n*.tgz\n",
-    "README.md": readme(v.name)
+    "README.md": readme2(v.name)
   };
   for (const [rel, content] of Object.entries(HOST_APP_FILES)) files[rel] = content.split("__APP_NAME__").join(v.name);
+  if (v.tailwind) for (const [rel, content] of Object.entries(HOST_TAILWIND_FILES)) files[rel] = content.split("__APP_NAME__").join(v.name);
   if (withSample) {
     const sample = TEMPLATES.dashboard(varsFromName("hello"));
     for (const [rel, content] of Object.entries(sample)) {
-      if (rel === "package.json" || rel === "tsconfig.json" || rel === "README.md") continue;
+      if (rel === "package.json" || rel === "tsconfig.json") continue;
       files[`plugins/hello/${rel}`] = content;
     }
   }
   return files;
 }
-var readme = (name) => `# ${name}
+var readme2 = (name) => `# ${name}
 
 Created with [fluxplugin](https://www.npmjs.com/package/fluxplugin).
 
@@ -1350,30 +1801,218 @@ plugins/       plugins loaded at startup (users can also install .tgz from the P
 \`\`\`
 `;
 
+// src/cli/package.ts
+import crypto4 from "node:crypto";
+import { promises as fs8 } from "node:fs";
+import os from "node:os";
+import path11 from "node:path";
+async function packagePlugin(root, opts = {}) {
+  const log2 = opts.log ?? console.log;
+  await buildPlugin(root, false, log2);
+  let raw = JSON.parse(await fs8.readFile(path11.join(root, "plugin.json"), "utf8"));
+  const v = validateManifest(raw);
+  if (!v.manifest) throw new Error("invalid plugin.json: " + v.issues.map((i) => `${i.path}: ${i.message}`).join("; "));
+  const m = v.manifest;
+  raw["integrity"] = await computeIntegrity(root, m);
+  if (opts.signKey) raw = signManifest(raw, (await fs8.readFile(opts.signKey, "utf8")).trim());
+  const stage = await fs8.mkdtemp(path11.join(os.tmpdir(), "flux-pack-"));
+  try {
+    const shipped = await copyPluginRuntime(root, stage);
+    await fs8.writeFile(path11.join(stage, "plugin.json"), JSON.stringify(raw, null, 2));
+    const bad = shipped.filter((f) => /\.(map|tsx?)$/i.test(f) || f.startsWith("src/"));
+    if (bad.length) throw new Error(`refusing to package sources/sourcemaps: ${bad.join(", ")}`);
+    const buf = await createTarGz(stage);
+    const out = path11.resolve(opts.out ?? ".");
+    await fs8.mkdir(out, { recursive: true });
+    const file = path11.join(out, `${m.id}-${m.version}.tgz`);
+    await fs8.writeFile(file, buf);
+    const sha256 = crypto4.createHash("sha256").update(buf).digest("hex");
+    const descriptor = {
+      id: m.id,
+      name: m.name,
+      version: m.version,
+      description: m.description,
+      author: typeof m.author === "string" ? m.author : m.author?.name,
+      permissions: m.permissions ?? [],
+      file: path11.basename(file),
+      sha256
+    };
+    const descriptorFile = path11.join(out, `${m.id}-${m.version}.fluxplugin.json`);
+    await fs8.writeFile(descriptorFile, JSON.stringify(descriptor, null, 2));
+    log2(`packaged ${path11.relative(process.cwd(), file) || file}  (${shipped.length} files: ${shipped.filter((x) => x !== "plugin.json").slice(0, 6).join(", ")}${shipped.length > 7 ? ", \u2026" : ""})
+  sha256 ${sha256}${opts.signKey ? "\n  signed" : ""}`);
+    return { file, descriptorFile, sha256, manifest: m, shipped, signed: !!opts.signKey };
+  } finally {
+    await fs8.rm(stage, { recursive: true, force: true });
+  }
+}
+
+// src/cli/publish.ts
+import { promises as fs9 } from "node:fs";
+import os2 from "node:os";
+import path12 from "node:path";
+function parseGitHubRepo(input) {
+  if (!input) return void 0;
+  const m = /^(?:https?:\/\/github\.com\/|git@github\.com:|github:)?([\w.-]+)\/([\w.-]+?)(?:\.git)?\/?$/.exec(input.trim());
+  return m ? `${m[1]}/${m[2]}` : void 0;
+}
+async function publishPlugin(root, o = {}) {
+  const log2 = o.log ?? console.log;
+  const manifest = JSON.parse(await fs9.readFile(path12.join(root, "plugin.json"), "utf8"));
+  const repo = parseGitHubRepo(o.repo) ?? parseGitHubRepo(typeof manifest["repository"] === "string" ? manifest["repository"] : manifest["repository"]?.url);
+  if (!repo || /YOUR_NAME/i.test(JSON.stringify(manifest["repository"] ?? ""))) {
+    throw new Error('no GitHub repository: set "repository": "https://github.com/<you>/<repo>" in plugin.json (or pass --repo owner/name)');
+  }
+  const problems = [];
+  if (!manifest["description"]) problems.push("description is missing");
+  if (!manifest["icon"]) problems.push('"icon" is missing');
+  if (!manifest["license"]) problems.push('"license" is missing');
+  if (problems.length) throw new Error("not ready for the store: " + problems.join("; "));
+  for (const rec of ["screenshots", "video", "banner"]) if (!manifest[rec] || Array.isArray(manifest[rec]) && !manifest[rec].length) log2(`  tip: add "${rec}" to plugin.json for a better store page`);
+  const out = await fs9.mkdtemp(path12.join(os2.tmpdir(), "flux-publish-"));
+  try {
+    const pkg2 = await packagePlugin(root, { out, signKey: o.signKey, log: log2 });
+    const tag = `v${pkg2.manifest.version}`;
+    if (o.dryRun) {
+      log2(`
+[dry run] would create release ${tag} in github.com/${repo} with:
+  - ${path12.basename(pkg2.file)}
+  - ${path12.basename(pkg2.descriptorFile)}
+  and add the topic "${o.topic ?? DEFAULT_TOPIC}"`);
+      return { repo, version: pkg2.manifest.version, id: pkg2.manifest.id };
+    }
+    const token = o.token ?? process.env["GITHUB_TOKEN"] ?? process.env["GH_TOKEN"];
+    if (!token) throw new Error("no GitHub token. Create one at https://github.com/settings/tokens (repo scope, or fine-grained: Contents + Administration read/write) and set GITHUB_TOKEN, or pass --token");
+    const api = (o.apiBase ?? "https://api.github.com").replace(/\/$/, "");
+    const f = o.fetchImpl ?? fetch;
+    const gh = async (method, url, body, extra = {}, raw) => {
+      const res = await f(url, { method, headers: { accept: "application/vnd.github+json", authorization: `Bearer ${token}`, "user-agent": "fluxplugin", ...body ? { "content-type": "application/json" } : {}, ...extra }, body: raw ?? (body ? JSON.stringify(body) : void 0) });
+      let json = null;
+      try {
+        json = await res.json();
+      } catch {
+      }
+      return { status: res.status, json };
+    };
+    const info = await gh("GET", `${api}/repos/${repo}`);
+    if (info.status === 404) throw new Error(`repository github.com/${repo} was not found (or your token cannot see it)`);
+    if (info.status === 401) throw new Error("GitHub rejected the token (401)");
+    if (info.json?.permissions && !info.json.permissions.push) throw new Error(`your token cannot write to ${repo}`);
+    const notes = `${pkg2.manifest.name} ${pkg2.manifest.version}
+
+${pkg2.manifest.description ?? ""}
+
+Permissions: ${(pkg2.manifest.permissions ?? []).join(", ") || "none"}
+
+Install: \`fluxplugin install ${pkg2.manifest.id}\` or from the Plugins page of any app using the fluxplugin store.`;
+    const rel = await gh("POST", `${api}/repos/${repo}/releases`, { tag_name: tag, name: `${pkg2.manifest.name} ${pkg2.manifest.version}`, body: notes, draft: false, prerelease: /-/.test(pkg2.manifest.version) });
+    if (rel.status === 422) throw new Error(`version ${pkg2.manifest.version} is already published (release ${tag} exists). Bump "version" in plugin.json and publish again.`);
+    if (rel.status >= 300) throw new Error(`could not create the release (${rel.status}): ${rel.json?.message ?? "unknown error"}`);
+    const upload = String(rel.json.upload_url).replace(/\{\?[^}]*\}$/, "");
+    for (const [file, type] of [[pkg2.file, "application/gzip"], [pkg2.descriptorFile, "application/json"]]) {
+      const up = await gh("POST", `${upload}?name=${encodeURIComponent(path12.basename(file))}`, void 0, { "content-type": type }, new Uint8Array(await fs9.readFile(file)));
+      if (up.status >= 300) throw new Error(`upload of ${path12.basename(file)} failed (${up.status}): ${up.json?.message ?? ""}`);
+    }
+    const topics = await gh("GET", `${api}/repos/${repo}/topics`);
+    const names = topics.json?.names ?? [];
+    const topic = o.topic ?? DEFAULT_TOPIC;
+    if (!names.includes(topic)) {
+      const put = await gh("PUT", `${api}/repos/${repo}/topics`, { names: [...names, topic] });
+      if (put.status >= 300) log2(`  ! could not add the topic "${topic}" (${put.status}): add it yourself in the repository settings (About \u2192 Topics) so the store can find your plugin.`);
+    }
+    log2(`
+\u2714 published ${pkg2.manifest.id}@${pkg2.manifest.version}
+  release: ${rel.json.html_url ?? `https://github.com/${repo}/releases/tag/${tag}`}
+  users install it with:  fluxplugin install ${pkg2.manifest.id}
+  (new GitHub topics can take a few minutes to show up in search)`);
+    return { release: rel.json.html_url, repo, version: pkg2.manifest.version, id: pkg2.manifest.id };
+  } finally {
+    await fs9.rm(out, { recursive: true, force: true });
+  }
+}
+
+// src/cli/store.ts
+import crypto5 from "node:crypto";
+import { promises as fs10 } from "node:fs";
+import path13 from "node:path";
+var INDEX = "index.json";
+async function storeInit(dir) {
+  await fs10.mkdir(dir, { recursive: true });
+  const idx = path13.join(dir, INDEX);
+  if (await fs10.stat(idx).catch(() => null)) throw new Error(`${idx} already exists`);
+  await fs10.writeFile(idx, JSON.stringify({ plugins: [] }, null, 2));
+  await fs10.writeFile(path13.join(dir, "README.md"), `# My plugin store
+
+A store is a folder with \`index.json\` and the plugin packages (\`.tgz\`).
+
+\`\`\`bash
+fluxplugin package ./my-plugin --out .          # build a package
+fluxplugin store add com.acme.my-plugin-1.0.0.tgz --dir . --base-url https://plugins.acme.com/
+\`\`\`
+
+Host this folder anywhere that serves static files:
+- **GitHub Pages** (or a repo's raw files): add \`{ "type": "github", "repo": "acme/plugin-store" }\` to your app's stores
+- **Any web server / S3 / CDN**: add \`{ "type": "http", "url": "https://plugins.acme.com/" }\`
+- **A shared folder**: \`{ "type": "local", "path": "./my-store" }\`
+`);
+}
+async function storeAdd(pkgFile, dir, baseUrl) {
+  const buf = await fs10.readFile(pkgFile);
+  const entries = await readTarGz(buf);
+  const pj = entries.find((e) => e.type === "file" && /^[^/]+\/plugin\.json$/.test(e.name));
+  if (!pj) throw new Error("not a fluxplugin package (no plugin.json)");
+  const v = validateManifest(JSON.parse(pj.data.toString("utf8")));
+  if (!v.manifest) throw new Error("invalid plugin.json in the package: " + v.issues.map((i) => i.message).join("; "));
+  const bad = entries.filter((e) => e.type === "file" && /\.(map|tsx?)$/i.test(e.name));
+  if (bad.length) throw new Error(`the package contains sources/sourcemaps (${bad[0].name}); rebuild it with "fluxplugin package"`);
+  const m = v.manifest;
+  const sha256 = crypto5.createHash("sha256").update(buf).digest("hex");
+  await fs10.mkdir(dir, { recursive: true });
+  const fileName = path13.basename(pkgFile);
+  if (path13.resolve(pkgFile) !== path13.resolve(dir, fileName)) await fs10.copyFile(pkgFile, path13.join(dir, fileName));
+  const idxFile = path13.join(dir, INDEX);
+  const idx = JSON.parse(await fs10.readFile(idxFile, "utf8").catch(() => '{"plugins":[]}'));
+  const url = baseUrl ? new URL(fileName, baseUrl.endsWith("/") ? baseUrl : baseUrl + "/").href : fileName;
+  const entry = { id: m.id, name: m.name, version: m.version, description: m.description, author: typeof m.author === "string" ? m.author : m.author?.name, permissions: m.permissions ?? [], url, sha256, homepage: m.homepage };
+  idx.plugins = [...idx.plugins.filter((p) => !(p.id === m.id && p.version === m.version)), entry].sort((a, b) => a.id.localeCompare(b.id) || a.version.localeCompare(b.version, void 0, { numeric: true }));
+  await fs10.writeFile(idxFile, JSON.stringify(idx, null, 2));
+  return { id: m.id, version: m.version, sha256 };
+}
+
 // src/cli/cli.ts
 var HELP = `fluxplugin <command>
 
-  init [dir]                      create a new app (Electron + React) that supports plugins
+  init [dir] [--tailwindcss]      create a new app (Electron + React) that supports plugins
+  doctor                          check Node, Electron, esbuild, Tailwind and fix what it can
   dev [--web]                     run your app with plugin hot reload (Electron, or a browser with --web)
   build                           bundle your app (in an app folder) or a plugin (in a plugin folder)
   start [--web]                   run the built app
-  plugin new <name> [-t basic|dashboard|backend]   scaffold a plugin (alias: create)
+  plugin new <name> [-t basic|dashboard|backend] [--tailwindcss]   scaffold a plugin (alias: create)
   validate [dir]                  check a plugin manifest, entries and integrity
+  publish [dir] [--repo o/r] [--dry-run]   publish a plugin to the store (GitHub release + topic)
+  search [query]                  search the configured stores
+  install <id[@version]|dir|.tgz> install a plugin from a store, a folder or a package
+  store init <dir>                create your own store (index.json) \u2014 host it anywhere
+  store add <pkg.tgz> [--dir d] [--base-url url]   add a package to your store
   package [dir] [--out d] [--sign-key file]   build + integrity (+ signature) + .tgz
   install <dir|.tgz> [--dir plugins]   uninstall <id>   enable <id>   disable <id>   list
   keygen [--out name]    create an ed25519 signing key pair
   tailwind [--dir plugins] [--out file]   generate @source lines for Tailwind v4`;
 var log = (...a) => console.log(...a);
-async function readManifest2(root) {
-  return JSON.parse(await fs8.readFile(path9.join(root, "plugin.json"), "utf8"));
+async function readManifest(root) {
+  return JSON.parse(await fs11.readFile(path14.join(root, "plugin.json"), "utf8"));
 }
 async function run(argv) {
   const { values: f, positionals: pos } = parseArgs({
     args: argv,
     allowPositionals: true,
-    options: { template: { type: "string", short: "t" }, out: { type: "string" }, dir: { type: "string" }, data: { type: "string" }, "sign-key": { type: "string" }, help: { type: "boolean", short: "h" }, web: { type: "boolean" }, port: { type: "string" }, name: { type: "string" }, "no-sample": { type: "boolean" } }
+    options: { template: { type: "string", short: "t" }, out: { type: "string" }, dir: { type: "string" }, data: { type: "string" }, "sign-key": { type: "string" }, help: { type: "boolean", short: "h" }, web: { type: "boolean" }, port: { type: "string" }, name: { type: "string" }, "no-sample": { type: "boolean" }, tailwindcss: { type: "boolean" }, repo: { type: "string" }, token: { type: "string" }, "dry-run": { type: "boolean" }, "base-url": { type: "string" } }
   });
   let [cmd, arg] = pos;
+  if (cmd === "store") {
+    cmd = "store:" + (pos[1] ?? "");
+    arg = pos[2];
+  }
   if (cmd === "plugin") {
     const sub = pos[1];
     if (sub !== "new") throw new Error("usage: fluxplugin plugin new <name>");
@@ -1381,20 +2020,20 @@ async function run(argv) {
     arg = pos[2];
   }
   if (!cmd || f.help) return log(HELP), cmd ? 0 : 1;
-  const root = path9.resolve(arg ?? ".");
+  const root = path14.resolve(arg ?? ".");
   try {
     switch (cmd) {
       case "init": {
-        const target = path9.resolve(arg ?? ".");
-        const entries = await fs8.readdir(target).catch(() => []);
+        const target = path14.resolve(arg ?? ".");
+        const entries = await fs11.readdir(target).catch(() => []);
         if (entries.length) throw new Error(`${target} is not empty`);
-        const name = (f.name ?? path9.basename(target)).toLowerCase().replace(/[^a-z0-9-_.]+/g, "-");
-        const files = hostFiles({ name, fluxSpec: process.env["FLUXPLUGIN_SPEC"] ?? `^${await ownVersion()}` }, !f["no-sample"]);
+        const name = (f.name ?? path14.basename(target)).toLowerCase().replace(/[^a-z0-9-_.]+/g, "-");
+        const files = hostFiles({ name, fluxSpec: process.env["FLUXPLUGIN_SPEC"] ?? `^${await ownVersion()}`, electron: await latestElectron(), tailwind: !!f.tailwindcss }, !f["no-sample"]);
         for (const [rel2, content] of Object.entries(files)) {
-          await fs8.mkdir(path9.dirname(path9.join(target, rel2)), { recursive: true });
-          await fs8.writeFile(path9.join(target, rel2), content);
+          await fs11.mkdir(path14.dirname(path14.join(target, rel2)), { recursive: true });
+          await fs11.writeFile(path14.join(target, rel2), content);
         }
-        const rel = path9.relative(process.cwd(), target) || ".";
+        const rel = path14.relative(process.cwd(), target) || ".";
         log(`\u2714 created ${name} in ${target}
 
 Next steps:
@@ -1410,15 +2049,17 @@ Add a plugin:  npm run plugin:new my-plugin -- -t backend`);
         if (!arg) throw new Error("usage: fluxplugin plugin new <name> [-t basic|dashboard|backend]");
         const tpl = f.template ?? "basic";
         if (!(tpl in TEMPLATES)) throw new Error(`unknown template "${tpl}"`);
-        const base = await isHostProject(process.cwd()) && !path9.isAbsolute(arg) && !arg.includes("/") ? path9.join((await loadConfig({}, process.cwd())).pluginsDir, arg) : path9.resolve(arg);
-        if (await fs8.stat(base).catch(() => null)) throw new Error(`${base} already exists`);
-        const files = TEMPLATES[tpl](varsFromName(path9.basename(base)));
+        const base = await isHostProject(process.cwd()) && !path14.isAbsolute(arg) && !arg.includes("/") ? path14.join((await loadConfig({}, process.cwd())).pluginsDir, arg) : path14.resolve(arg);
+        if (await fs11.stat(base).catch(() => null)) throw new Error(`${base} already exists`);
+        const vars = varsFromName(path14.basename(base));
+        let files = TEMPLATES[tpl](vars);
+        if (f.tailwindcss) files = withTailwind(files, vars);
         for (const [rel, content] of Object.entries(files)) {
-          await fs8.mkdir(path9.dirname(path9.join(base, rel)), { recursive: true });
-          await fs8.writeFile(path9.join(base, rel), content);
+          await fs11.mkdir(path14.dirname(path14.join(base, rel)), { recursive: true });
+          await fs11.writeFile(path14.join(base, rel), content);
         }
         log(`\u2714 created ${tpl} plugin in ${base}
-  next: fluxplugin build ${path9.relative(process.cwd(), base)}`);
+  next: fluxplugin build ${path14.relative(process.cwd(), base)}`);
         return 0;
       }
       case "build": {
@@ -1450,30 +2091,57 @@ Add a plugin:  npm run plugin:new my-plugin -- -t backend`);
       }
       case "start": {
         const cwd = process.cwd();
-        if (!await fs8.stat(path9.join(cwd, "dist/index.html")).catch(() => null)) throw new Error("nothing built yet: run `fluxplugin build` first");
+        if (!await fs11.stat(path14.join(cwd, "dist/index.html")).catch(() => null)) throw new Error("nothing built yet: run `fluxplugin build` first");
         const { child } = startApp(cwd, { web: f.web, port: f.port ? Number(f.port) : void 0 });
         return await new Promise((r) => child.on("exit", (c) => r(c ?? 0)));
       }
+      case "doctor":
+        return await doctor(process.cwd());
       case "validate":
-        return validate(root);
+        return await validate(root);
       case "package":
-        return pack(root, f.out, f["sign-key"]);
+        return await packagePlugin(root, { out: f.out, signKey: f["sign-key"] }), 0;
+      case "publish":
+        await publishPlugin(root, { repo: f.repo, token: f.token, signKey: f["sign-key"], dryRun: f["dry-run"] });
+        return 0;
+      case "search": {
+        const cfg = await loadConfig(f);
+        const regs = createRegistries(cfg.stores);
+        const res = await Promise.allSettled(regs.map((r) => r.search(arg)));
+        let n = 0;
+        res.forEach((r, i) => {
+          if (r.status === "rejected") return void log(`! ${regs[i].name}: ${r.reason.message}`);
+          for (const e of r.value) n++, log(`${e.id}@${e.version}  ${e.name}${e.description ? " \u2014 " + e.description : ""}  [${e.source}]`);
+        });
+        if (!n) log("no plugins found");
+        return 0;
+      }
+      case "store:init":
+        await storeInit(path14.resolve(arg ?? "store"));
+        log(`\u2714 store created in ${path14.resolve(arg ?? "store")} (see its README.md)`);
+        return 0;
+      case "store:add": {
+        if (!arg) throw new Error("usage: store add <package.tgz> [--dir store] [--base-url https://\u2026]");
+        const r = await storeAdd(path14.resolve(arg), path14.resolve(f.dir ?? "store"), f["base-url"]);
+        log(`\u2714 added ${r.id}@${r.version} to ${path14.resolve(f.dir ?? "store")}/index.json`);
+        return 0;
+      }
       case "keygen": {
         const k = generateSigningKeyPair();
         const base = f.out ?? "flux-signing";
-        await fs8.writeFile(`${base}.private.key`, k.privateKey, { mode: 384 });
-        await fs8.writeFile(`${base}.public.key`, k.publicKey);
+        await fs11.writeFile(`${base}.private.key`, k.privateKey, { mode: 384 });
+        await fs11.writeFile(`${base}.public.key`, k.publicKey);
         log(`wrote ${base}.private.key (keep secret) and ${base}.public.key (distribute to hosts as a trusted key)`);
         return 0;
       }
       case "tailwind": {
         const cfg = await loadConfig(f);
-        const names = (await fs8.readdir(cfg.pluginsDir).catch(() => [])).sort();
-        const lines = names.map((n) => `@source "${path9.join(cfg.pluginsDir, n, "src").replace(/\\/g, "/")}";`);
+        const names = (await fs11.readdir(cfg.pluginsDir).catch(() => [])).sort();
+        const lines = names.map((n) => `@source "${path14.join(cfg.pluginsDir, n, "src").replace(/\\/g, "/")}";`);
         const css = `/* generated by fluxplugin tailwind */
 ${lines.join("\n")}
 `;
-        if (f.out) await fs8.writeFile(f.out, css);
+        if (f.out) await fs11.writeFile(f.out, css);
         else log(css);
         return 0;
       }
@@ -1482,7 +2150,7 @@ ${lines.join("\n")}
       case "enable":
       case "disable":
       case "list":
-        return manage(cmd, arg, f);
+        return await manage(cmd, arg, f);
       default:
         log(HELP);
         return 1;
@@ -1493,14 +2161,14 @@ ${lines.join("\n")}
   }
 }
 async function validate(root) {
-  const raw = await readManifest2(root);
+  const raw = await readManifest(root);
   const v = validateManifest(raw);
   let bad = !v.ok;
   v.issues.forEach((i) => log(`\u2716 ${i.path || "<root>"}: ${i.message}`));
   v.warnings.forEach((w) => log(`! ${w}`));
   if (v.manifest) {
     for (const rel of [v.manifest.main, v.manifest.renderer, ...v.manifest.styles ?? []].filter(Boolean))
-      if (!await fs8.stat(path9.join(root, rel)).catch(() => null)) log(`\u2716 missing file ${rel} (run build)`), bad = true;
+      if (!await fs11.stat(path14.join(root, rel)).catch(() => null)) log(`\u2716 missing file ${rel} (run build)`), bad = true;
     try {
       await verifyPlugin(root, raw, v.manifest);
     } catch (e) {
@@ -1511,47 +2179,38 @@ async function validate(root) {
   log(bad ? "invalid" : `\u2714 ${v.manifest?.id}@${v.manifest?.version} is valid`);
   return bad ? 1 : 0;
 }
-async function pack(root, out = ".", keyFile) {
-  await buildPlugin(root);
-  let raw = await readManifest2(root);
-  const m = validateManifest(raw).manifest;
-  if (!m) throw new Error("invalid manifest");
-  raw["integrity"] = await computeIntegrity(root, m);
-  if (keyFile) raw = signManifest(raw, (await fs8.readFile(keyFile, "utf8")).trim());
-  const stage = await fs8.mkdtemp(path9.join((await import("node:os")).tmpdir(), "flux-pack-"));
-  await copyDir(root, stage);
-  await fs8.rm(path9.join(stage, "src"), { recursive: true, force: true });
-  await fs8.writeFile(path9.join(stage, "plugin.json"), JSON.stringify(raw, null, 2));
-  const buf = await createTarGz(stage);
-  await fs8.rm(stage, { recursive: true, force: true });
-  await fs8.mkdir(out, { recursive: true });
-  const file = path9.join(out, `${m.id}-${m.version}.tgz`);
-  await fs8.writeFile(file, buf);
-  log(`packaged ${file}
-  sha256 ${crypto2.createHash("sha256").update(buf).digest("hex")}${keyFile ? "\n  signed" : ""}`);
-  return 0;
-}
 async function manage(cmd, arg, f) {
   const cfg = await loadConfig(f);
-  const state = new JsonStateFile(path9.join(cfg.dataDir, "plugins-state.json"));
-  const inst = new PluginInstaller(cfg.pluginsDir, path9.join(cfg.dataDir, "backups"));
+  const state = new JsonStateFile(path14.join(cfg.dataDir, "plugins-state.json"));
+  const inst = new PluginInstaller(cfg.pluginsDir, path14.join(cfg.dataDir, "backups"));
   if (cmd === "list") {
     const { disabled } = await state.readAll();
     for (const m of await inst.installed()) log(`${disabled.includes(m.id) ? "\u25CB" : "\u25CF"} ${m.id}@${m.version}  ${m.name}`);
     return 0;
   }
   if (!arg) throw new Error(`usage: ${cmd} <${cmd === "install" ? "dir|.tgz" : "id"}>`);
+  if (cmd === "install" && arg && !arg.endsWith(".tgz") && !await fs11.stat(arg).catch(() => null)) {
+    const [id, version] = arg.split("@");
+    const store = new PluginInstaller(cfg.pluginsDir, path14.join(cfg.dataDir, "backups"), createRegistries(cfg.stores));
+    const found = (await store.search(id)).filter((e) => e.id === id && (!version || e.version === version));
+    if (!found.length) throw new Error(`"${arg}" was not found in your stores (${cfg.stores.map((s2) => s2.type).join(", ")}). Try: fluxplugin search ${id}`);
+    const best = found.sort((a, b) => b.version.localeCompare(a.version, void 0, { numeric: true }))[0];
+    const r = await store.install(best);
+    log(`\u2714 installed ${r.id}@${r.version} from ${best.source}${r.previousVersion ? ` (was ${r.previousVersion}; rollback available)` : ""}
+  permissions it asks for: ${best.permissions.join(", ") || "none"}`);
+    return 0;
+  }
   if (cmd === "install") {
-    const tmp = path9.join(cfg.dataDir, ".install", String(Date.now()));
-    if (arg.endsWith(".tgz")) await extractTarGz(await fs8.readFile(arg), tmp);
-    else await copyDir(path9.resolve(arg), tmp);
-    const v = validateManifest(await readManifest2(tmp));
+    const tmp = path14.join(cfg.dataDir, ".install", String(Date.now()));
+    if (arg.endsWith(".tgz")) await extractTarGz(await fs11.readFile(arg), tmp);
+    else await copyDir(path14.resolve(arg), tmp);
+    const v = validateManifest(await readManifest(tmp));
     if (!v.manifest) throw new Error("invalid plugin: " + v.issues.map((i) => i.message).join("; "));
-    const reg = new LocalRegistry(path9.dirname(tmp), "cli");
+    const reg = new LocalRegistry(path14.dirname(tmp), "cli");
     inst.addRegistry(reg);
     const [entry] = (await reg.search(v.manifest.id)).filter((e) => e.id === v.manifest.id);
     const r = await inst.install({ ...entry, location: tmp });
-    await fs8.rm(tmp, { recursive: true, force: true });
+    await fs11.rm(tmp, { recursive: true, force: true });
     log(`installed ${r.id}@${r.version}${r.previousVersion ? ` (was ${r.previousVersion}; rollback available)` : ""}`);
   } else if (cmd === "uninstall") {
     await inst.uninstall(arg);
@@ -1565,13 +2224,49 @@ async function manage(cmd, arg, f) {
 async function ownVersion() {
   for (const rel of ["../package.json", "../../package.json"]) {
     try {
-      const j = JSON.parse(await fs8.readFile(new URL(rel, import.meta.url), "utf8"));
+      const j = JSON.parse(await fs11.readFile(new URL(rel, import.meta.url), "utf8"));
       if (j.name === "fluxplugin" && j.version) return j.version;
     } catch {
     }
   }
   return "1.0.0";
 }
+async function latestElectron() {
+  try {
+    const r = await fetch("https://registry.npmjs.org/electron/latest", { signal: AbortSignal.timeout(4e3) });
+    const j = await r.json();
+    if (j.version && /^\d+\.\d+\.\d+$/.test(j.version)) return `^${j.version}`;
+  } catch {
+  }
+  return "^44.5.1";
+}
+async function doctor(cwd) {
+  let bad = false;
+  const ok2 = (m) => log(`\u2714 ${m}`);
+  const ko = (m) => (log(`\u2716 ${m}`), bad = true);
+  Number(process.versions.node.split(".")[0]) >= 20 ? ok2(`Node ${process.versions.node}`) : ko(`Node ${process.versions.node} (need >= 20)`);
+  if (!await isHostProject(cwd)) {
+    log("! not inside a fluxplugin app folder (run this where package.json and src/app are)");
+    return bad ? 1 : 0;
+  }
+  const e = ensureElectron(cwd, log);
+  e.bin ? ok2(`Electron binary: ${path14.relative(cwd, e.bin) || e.bin}`) : ko(`Electron: ${e.error}
+    fix: npm install -D electron`);
+  try {
+    (await import("esbuild")).version ? ok2("esbuild") : ko("esbuild");
+  } catch {
+    ko("esbuild is not available");
+  }
+  const hasTw = await fs11.stat(path14.join(cwd, "src/app/renderer/styles/tailwind.css")).then(() => true, () => false);
+  if (hasTw) {
+    const { resolveTailwindCli: resolveTailwindCli2 } = await Promise.resolve().then(() => (init_tailwind(), tailwind_exports));
+    resolveTailwindCli2([cwd]) ? ok2("Tailwind CLI") : ko("Tailwind CLI missing: npm install -D tailwindcss @tailwindcss/cli");
+  }
+  const pkg2 = JSON.parse(await fs11.readFile(path14.join(cwd, "package.json"), "utf8").catch(() => "{}"));
+  if (!pkg2.allowScripts?.["electron"]) log(`! package.json has no "allowScripts": {"electron": true}. npm 12 blocks Electron's postinstall without it (fluxplugin downloads the binary for you, but add it for clean installs).`);
+  log(bad ? "\nSome checks failed." : "\nAll good.");
+  return bad ? 1 : 0;
+}
 
 // src/cli/bin.ts
 process.exit(await run(process.argv.slice(2)));