fluxplugin 1.0.1 → 1.0.3

package/dist/node/cli-api.js

@@ -1,24 +1,32 @@
 import {
+  DEFAULT_STORE,
+  DEFAULT_TOPIC,
   JsonStateFile,
   LocalRegistry,
   PluginInstaller,
   computeIntegrity,
   copyDir,
+  copyPluginRuntime,
+  createRegistries,
   createTarGz,
   extractTarGz,
   generateSigningKeyPair,
+  readTarGz,
   signManifest,
   verifyPlugin
-} from "./chunks/chunk-BZ7NZF7I.js";
+} from "./chunks/chunk-C7VWZZOX.js";
 import {
   validateManifest
-} from "./chunks/chunk-XPLGAEBH.js";
+} from "./chunks/chunk-EVX2O65A.js";
+import {
+  compileTailwind
+} from "./chunks/chunk-3FH6NAJG.js";
+import "./chunks/chunk-WSFCRVEQ.js";
 
 // src/cli/cli.ts
 import { parseArgs } from "node:util";
-import { promises as fs4 } from "node:fs";
-import path5 from "node:path";
-import crypto from "node:crypto";
+import { promises as fs7 } from "node:fs";
+import path8 from "node:path";
 
 // src/cli/build.ts
 import { promises as fs } from "node:fs";
@@ -53,12 +61,20 @@ var exists = (f) => fs.access(f).then(() => true, () => false);
 async function firstExisting(root, names) {
   for (const n of names) if (await exists(path2.join(root, n))) return path2.join(root, n);
 }
-async function buildOptions(root) {
+async function buildOptions(root, dev = false) {
   const raw = JSON.parse(await fs.readFile(path2.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");
@@ -70,27 +86,30 @@ async function buildOptions(root) {
     out.push({ ...common, entryPoints: [entry], outfile: path2.join(root, m.renderer), platform: "browser", format: "esm", target: "chrome120" });
   }
   for (const css of m.styles ?? []) {
+    if (path2.basename(css) === "tailwind.css") continue;
     const entry = path2.join(root, "src/styles", path2.basename(css));
     if (await exists(entry)) out.push({ ...common, plugins: [], entryPoints: [entry], outfile: path2.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 = path2.join(root, "src/styles/tailwind.css");
+  const stopTw = await exists(twIn) ? compileTailwind({ cwd: root, input: twIn, output: path2.join(root, "dist/tailwind.css"), watch, searchFrom: [process.cwd(), path2.dirname(path2.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 { spawn, spawnSync } from "node:child_process";
 import { existsSync, promises as fs3, statSync } from "node:fs";
 import { createRequire } from "node:module";
 import path4 from "node:path";
@@ -107,7 +126,8 @@ async function loadConfig(flags, cwd = process.cwd()) {
   }
   return {
     pluginsDir: path3.resolve(cwd, flags.dir ?? file.pluginsDir ?? "plugins"),
-    dataDir: path3.resolve(cwd, flags.data ?? file.dataDir ?? ".flux-data")
+    dataDir: path3.resolve(cwd, flags.data ?? file.dataDir ?? ".flux-data"),
+    stores: Array.isArray(file.stores) && file.stores.length ? file.stores : [DEFAULT_STORE]
   };
 }
 
@@ -150,6 +170,11 @@ async function buildHost(cwd, opts = {}) {
   await fs3.mkdir(outDir, { recursive: true });
   await fs3.copyFile(pick(cwd, "src/app/renderer/index.html", "src/index.html"), path4.join(outDir, "index.html"));
   const disposers = [];
+  const twIn = path4.join(cwd, "src/app/renderer/styles/tailwind.css");
+  if (await exists2(twIn)) {
+    const stop = compileTailwind({ cwd, input: twIn, output: path4.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)));
@@ -176,6 +201,22 @@ function electronBinary(cwd) {
     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 = path4.dirname(createRequire(path4.join(cwd, "package.json")).resolve("electron/package.json"));
+  } catch {
+    return { error: "Electron is not installed in this project" };
+  }
+  const installJs = path4.join(pkgDir, "install.js");
+  if (!existsSync(installJs)) return first;
+  log2("Electron's binary is missing (your package manager blocked its install script) \u2192 downloading it now\u2026");
+  const r = spawnSync(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;
@@ -190,10 +231,10 @@ 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, [path4.join(cwd, "dist/web.mjs")], { cwd, env, stdio: "inherit" }), mode: "web" };
-  const { bin, error } = electronBinary(cwd);
+  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`);
+  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) ?? [], path4.join(cwd, "dist/main.cjs")];
   if (needsNoSandbox(bin)) {
     args.unshift("--no-sandbox");
@@ -209,39 +250,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>
@@ -249,7 +303,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>
@@ -259,9 +313,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";
@@ -273,12 +353,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 {\n  Breadcrumbs,\n  CommandPalette,\n  PluginRoutes,\n  PluginSlot,\n  TitleBar,\n  useKeybindings,\n} from "fluxplugin/react";\n\nimport { APP_NAME, SLOTS } from "../../shared/constants";\nimport { Sidebar } from "./Sidebar";\n\n/** App shell with a fixed sidebar and independently scrollable content. */\nexport function AppShell() {\n  useKeybindings();\n\n  return (\n    <div className="app grid h-screen grid-rows-[40px_minmax(0,1fr)] overflow-hidden">\n      {/* Title bar */}\n      <header className="z-50 min-w-0">\n        <TitleBar\n          title={APP_NAME}\n          logo={<PluginSlot name={SLOTS.brandBadges} />}\n          searchPlaceholder="Search commands, pages\u2026"\n        />\n      </header>\n\n      {/* Application body */}\n      <div className="body grid min-h-0 min-w-0 grid-cols-[220px_minmax(0,1fr)] overflow-hidden">\n        {/* Fixed sidebar: never scrolls with the main content */}\n        <aside className="h-full min-h-0 overflow-hidden border-r border-transparent">\n          <Sidebar />\n        </aside>\n\n        {/* Only this area scrolls */}\n        <main className="main min-h-0 min-w-0 overflow-y-auto overflow-x-hidden p-6">\n          <div className="mx-auto max-w-3xl">\n            <Breadcrumbs />\n\n            <PluginRoutes />\n          </div>\n        </main>\n      </div>\n\n      {/* Command palette */}\n      <CommandPalette />\n    </div>\n  );\n}\n',
+  "src/app/renderer/shell/Sidebar.tsx": 'import { Link, useMenu } from "fluxplugin/react";\nimport { useEffect, useState } from "react";\n\nconst link =\n  "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  const [activePath, setActivePath] = useState(() => {\n    const hash = window.location.hash.slice(1);\n    return hash || window.location.pathname;\n  });\n\n  useEffect(() => {\n    const updateActivePath = () => {\n      setActivePath(window.location.hash.slice(1) || window.location.pathname);\n    };\n\n    window.addEventListener("hashchange", updateActivePath);\n    window.addEventListener("popstate", updateActivePath);\n\n    return () => {\n      window.removeEventListener("hashchange", updateActivePath);\n      window.removeEventListener("popstate", updateActivePath);\n    };\n  }, []);\n\n  const isActive = (path: string) => {\n    const normalize = (value: string) =>\n      value.replace(/^#/, "").replace(/\\/+$/, "") || "/";\n\n    return normalize(activePath) === normalize(path);\n  };\n\n  return (\n    <aside className="side h-full overflow-hidden border-r border-border bg-surface p-4">\n      <nav className="flex flex-col gap-1">\n        <Link\n          to="/"\n          data-active={isActive("/") ? "" : undefined}\n          aria-current={isActive("/") ? "page" : undefined}\n          className={link}\n        >\n          Dashboard\n        </Link>\n\n        {items.map((i) => (\n          <a\n            key={i.id}\n            className={link}\n            data-active={isActive(i.path!) ? "" : undefined}\n            aria-current={isActive(i.path!) ? "page" : undefined}\n            href={"#" + i.path}\n            onClick={(e) => {\n              e.preventDefault();\n              setActivePath(i.path!);\n              run(i);\n            }}\n          >\n            {i.label}\n          </a>\n        ))}\n\n        <Link\n          to="/plugins"\n          data-active={isActive("/plugins") ? "" : undefined}\n          aria-current={isActive("/plugins") ? "page" : undefined}\n          className={link}\n        >\n          Plugins\n        </Link>\n      </nav>\n\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(
@@ -287,7 +390,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,
@@ -323,6 +426,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"],
@@ -373,17 +484,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) {
@@ -391,7 +493,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";
@@ -414,9 +516,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;
@@ -475,6 +589,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) {
@@ -495,31 +678,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).
 
@@ -549,30 +737,218 @@ plugins/       plugins loaded at startup (users can also install .tgz from the P
 \`\`\`
 `;
 
+// src/cli/package.ts
+import crypto from "node:crypto";
+import { promises as fs4 } from "node:fs";
+import os from "node:os";
+import path5 from "node:path";
+async function packagePlugin(root, opts = {}) {
+  const log2 = opts.log ?? console.log;
+  await buildPlugin(root, false, log2);
+  let raw = JSON.parse(await fs4.readFile(path5.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 fs4.readFile(opts.signKey, "utf8")).trim());
+  const stage = await fs4.mkdtemp(path5.join(os.tmpdir(), "flux-pack-"));
+  try {
+    const shipped = await copyPluginRuntime(root, stage);
+    await fs4.writeFile(path5.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 = path5.resolve(opts.out ?? ".");
+    await fs4.mkdir(out, { recursive: true });
+    const file = path5.join(out, `${m.id}-${m.version}.tgz`);
+    await fs4.writeFile(file, buf);
+    const sha256 = crypto.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: path5.basename(file),
+      sha256
+    };
+    const descriptorFile = path5.join(out, `${m.id}-${m.version}.fluxplugin.json`);
+    await fs4.writeFile(descriptorFile, JSON.stringify(descriptor, null, 2));
+    log2(`packaged ${path5.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 fs4.rm(stage, { recursive: true, force: true });
+  }
+}
+
+// src/cli/publish.ts
+import { promises as fs5 } from "node:fs";
+import os2 from "node:os";
+import path6 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 fs5.readFile(path6.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 fs5.mkdtemp(path6.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:
+  - ${path6.basename(pkg2.file)}
+  - ${path6.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(path6.basename(file))}`, void 0, { "content-type": type }, new Uint8Array(await fs5.readFile(file)));
+      if (up.status >= 300) throw new Error(`upload of ${path6.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 fs5.rm(out, { recursive: true, force: true });
+  }
+}
+
+// src/cli/store.ts
+import crypto2 from "node:crypto";
+import { promises as fs6 } from "node:fs";
+import path7 from "node:path";
+var INDEX = "index.json";
+async function storeInit(dir) {
+  await fs6.mkdir(dir, { recursive: true });
+  const idx = path7.join(dir, INDEX);
+  if (await fs6.stat(idx).catch(() => null)) throw new Error(`${idx} already exists`);
+  await fs6.writeFile(idx, JSON.stringify({ plugins: [] }, null, 2));
+  await fs6.writeFile(path7.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 fs6.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 = crypto2.createHash("sha256").update(buf).digest("hex");
+  await fs6.mkdir(dir, { recursive: true });
+  const fileName = path7.basename(pkgFile);
+  if (path7.resolve(pkgFile) !== path7.resolve(dir, fileName)) await fs6.copyFile(pkgFile, path7.join(dir, fileName));
+  const idxFile = path7.join(dir, INDEX);
+  const idx = JSON.parse(await fs6.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 fs6.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 readManifest(root) {
-  return JSON.parse(await fs4.readFile(path5.join(root, "plugin.json"), "utf8"));
+  return JSON.parse(await fs7.readFile(path8.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>");
@@ -580,20 +956,20 @@ async function run(argv) {
     arg = pos[2];
   }
   if (!cmd || f.help) return log(HELP), cmd ? 0 : 1;
-  const root = path5.resolve(arg ?? ".");
+  const root = path8.resolve(arg ?? ".");
   try {
     switch (cmd) {
       case "init": {
-        const target = path5.resolve(arg ?? ".");
-        const entries = await fs4.readdir(target).catch(() => []);
+        const target = path8.resolve(arg ?? ".");
+        const entries = await fs7.readdir(target).catch(() => []);
         if (entries.length) throw new Error(`${target} is not empty`);
-        const name = (f.name ?? path5.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 ?? path8.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 fs4.mkdir(path5.dirname(path5.join(target, rel2)), { recursive: true });
-          await fs4.writeFile(path5.join(target, rel2), content);
+          await fs7.mkdir(path8.dirname(path8.join(target, rel2)), { recursive: true });
+          await fs7.writeFile(path8.join(target, rel2), content);
         }
-        const rel = path5.relative(process.cwd(), target) || ".";
+        const rel = path8.relative(process.cwd(), target) || ".";
         log(`\u2714 created ${name} in ${target}
 
 Next steps:
@@ -609,15 +985,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()) && !path5.isAbsolute(arg) && !arg.includes("/") ? path5.join((await loadConfig({}, process.cwd())).pluginsDir, arg) : path5.resolve(arg);
-        if (await fs4.stat(base).catch(() => null)) throw new Error(`${base} already exists`);
-        const files = TEMPLATES[tpl](varsFromName(path5.basename(base)));
+        const base = await isHostProject(process.cwd()) && !path8.isAbsolute(arg) && !arg.includes("/") ? path8.join((await loadConfig({}, process.cwd())).pluginsDir, arg) : path8.resolve(arg);
+        if (await fs7.stat(base).catch(() => null)) throw new Error(`${base} already exists`);
+        const vars = varsFromName(path8.basename(base));
+        let files = TEMPLATES[tpl](vars);
+        if (f.tailwindcss) files = withTailwind(files, vars);
         for (const [rel, content] of Object.entries(files)) {
-          await fs4.mkdir(path5.dirname(path5.join(base, rel)), { recursive: true });
-          await fs4.writeFile(path5.join(base, rel), content);
+          await fs7.mkdir(path8.dirname(path8.join(base, rel)), { recursive: true });
+          await fs7.writeFile(path8.join(base, rel), content);
         }
         log(`\u2714 created ${tpl} plugin in ${base}
-  next: fluxplugin build ${path5.relative(process.cwd(), base)}`);
+  next: fluxplugin build ${path8.relative(process.cwd(), base)}`);
         return 0;
       }
       case "build": {
@@ -649,30 +1027,57 @@ Add a plugin:  npm run plugin:new my-plugin -- -t backend`);
       }
       case "start": {
         const cwd = process.cwd();
-        if (!await fs4.stat(path5.join(cwd, "dist/index.html")).catch(() => null)) throw new Error("nothing built yet: run `fluxplugin build` first");
+        if (!await fs7.stat(path8.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(path8.resolve(arg ?? "store"));
+        log(`\u2714 store created in ${path8.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(path8.resolve(arg), path8.resolve(f.dir ?? "store"), f["base-url"]);
+        log(`\u2714 added ${r.id}@${r.version} to ${path8.resolve(f.dir ?? "store")}/index.json`);
+        return 0;
+      }
       case "keygen": {
         const k = generateSigningKeyPair();
         const base = f.out ?? "flux-signing";
-        await fs4.writeFile(`${base}.private.key`, k.privateKey, { mode: 384 });
-        await fs4.writeFile(`${base}.public.key`, k.publicKey);
+        await fs7.writeFile(`${base}.private.key`, k.privateKey, { mode: 384 });
+        await fs7.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 fs4.readdir(cfg.pluginsDir).catch(() => [])).sort();
-        const lines = names.map((n) => `@source "${path5.join(cfg.pluginsDir, n, "src").replace(/\\/g, "/")}";`);
+        const names = (await fs7.readdir(cfg.pluginsDir).catch(() => [])).sort();
+        const lines = names.map((n) => `@source "${path8.join(cfg.pluginsDir, n, "src").replace(/\\/g, "/")}";`);
         const css = `/* generated by fluxplugin tailwind */
 ${lines.join("\n")}
 `;
-        if (f.out) await fs4.writeFile(f.out, css);
+        if (f.out) await fs7.writeFile(f.out, css);
         else log(css);
         return 0;
       }
@@ -681,7 +1086,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;
@@ -699,7 +1104,7 @@ async function validate(root) {
   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 fs4.stat(path5.join(root, rel)).catch(() => null)) log(`\u2716 missing file ${rel} (run build)`), bad = true;
+      if (!await fs7.stat(path8.join(root, rel)).catch(() => null)) log(`\u2716 missing file ${rel} (run build)`), bad = true;
     try {
       await verifyPlugin(root, raw, v.manifest);
     } catch (e) {
@@ -710,47 +1115,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 readManifest(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 fs4.readFile(keyFile, "utf8")).trim());
-  const stage = await fs4.mkdtemp(path5.join((await import("node:os")).tmpdir(), "flux-pack-"));
-  await copyDir(root, stage);
-  await fs4.rm(path5.join(stage, "src"), { recursive: true, force: true });
-  await fs4.writeFile(path5.join(stage, "plugin.json"), JSON.stringify(raw, null, 2));
-  const buf = await createTarGz(stage);
-  await fs4.rm(stage, { recursive: true, force: true });
-  await fs4.mkdir(out, { recursive: true });
-  const file = path5.join(out, `${m.id}-${m.version}.tgz`);
-  await fs4.writeFile(file, buf);
-  log(`packaged ${file}
-  sha256 ${crypto.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(path5.join(cfg.dataDir, "plugins-state.json"));
-  const inst = new PluginInstaller(cfg.pluginsDir, path5.join(cfg.dataDir, "backups"));
+  const state = new JsonStateFile(path8.join(cfg.dataDir, "plugins-state.json"));
+  const inst = new PluginInstaller(cfg.pluginsDir, path8.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 fs7.stat(arg).catch(() => null)) {
+    const [id, version] = arg.split("@");
+    const store = new PluginInstaller(cfg.pluginsDir, path8.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((s) => s.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 = path5.join(cfg.dataDir, ".install", String(Date.now()));
-    if (arg.endsWith(".tgz")) await extractTarGz(await fs4.readFile(arg), tmp);
-    else await copyDir(path5.resolve(arg), tmp);
+    const tmp = path8.join(cfg.dataDir, ".install", String(Date.now()));
+    if (arg.endsWith(".tgz")) await extractTarGz(await fs7.readFile(arg), tmp);
+    else await copyDir(path8.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(path5.dirname(tmp), "cli");
+    const reg = new LocalRegistry(path8.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 fs4.rm(tmp, { recursive: true, force: true });
+    await fs7.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);
@@ -764,13 +1160,49 @@ async function manage(cmd, arg, f) {
 async function ownVersion() {
   for (const rel of ["../package.json", "../../package.json"]) {
     try {
-      const j = JSON.parse(await fs4.readFile(new URL(rel, import.meta.url), "utf8"));
+      const j = JSON.parse(await fs7.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 ok = (m) => log(`\u2714 ${m}`);
+  const ko = (m) => (log(`\u2716 ${m}`), bad = true);
+  Number(process.versions.node.split(".")[0]) >= 20 ? ok(`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 ? ok(`Electron binary: ${path8.relative(cwd, e.bin) || e.bin}`) : ko(`Electron: ${e.error}
+    fix: npm install -D electron`);
+  try {
+    (await import("esbuild")).version ? ok("esbuild") : ko("esbuild");
+  } catch {
+    ko("esbuild is not available");
+  }
+  const hasTw = await fs7.stat(path8.join(cwd, "src/app/renderer/styles/tailwind.css")).then(() => true, () => false);
+  if (hasTw) {
+    const { resolveTailwindCli } = await import("./chunks/tailwind-TJQVTBG5.js");
+    resolveTailwindCli([cwd]) ? ok("Tailwind CLI") : ko("Tailwind CLI missing: npm install -D tailwindcss @tailwindcss/cli");
+  }
+  const pkg2 = JSON.parse(await fs7.readFile(path8.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;
+}
 export {
   SHARED_MODULES,
   TEMPLATES,
@@ -781,5 +1213,6 @@ export {
   run,
   sharedModulesPlugin,
   startApp,
-  varsFromName
+  varsFromName,
+  withTailwind
 };