fluxplugin 1.0.3 → 1.0.4

package/dist/node/cli-api.js

@@ -3,6 +3,7 @@ import {
   DEFAULT_TOPIC,
   JsonStateFile,
   LocalRegistry,
+  MainFramework,
   PluginInstaller,
   computeIntegrity,
   copyDir,
@@ -14,10 +15,10 @@ import {
   readTarGz,
   signManifest,
   verifyPlugin
-} from "./chunks/chunk-C7VWZZOX.js";
+} from "./chunks/chunk-ZLA5XUXN.js";
 import {
   validateManifest
-} from "./chunks/chunk-EVX2O65A.js";
+} from "./chunks/chunk-SDCGUBEW.js";
 import {
   compileTailwind
 } from "./chunks/chunk-3FH6NAJG.js";
@@ -25,11 +26,11 @@ import "./chunks/chunk-WSFCRVEQ.js";
 
 // src/cli/cli.ts
 import { parseArgs } from "node:util";
-import { promises as fs7 } from "node:fs";
-import path8 from "node:path";
+import { promises as fs8 } from "node:fs";
+import path9 from "node:path";
 
 // src/cli/build.ts
-import { promises as fs } from "node:fs";
+import { existsSync, promises as fs, watch as fsWatch } from "node:fs";
 import path2 from "node:path";
 import { build, context } from "esbuild";
 
@@ -73,7 +74,19 @@ async function buildOptions(root, dev = false) {
     logLevel: "warning",
     plugins: [sharedModulesPlugin()],
     jsx: "automatic",
-    loader: { ".module.css": "local-css" }
+    loader: {
+      ".module.css": "local-css",
+      // Images and fonts imported by the plugin (or its libraries) are inlined, so dist/ stays self-contained.
+      ".png": "dataurl",
+      ".jpg": "dataurl",
+      ".jpeg": "dataurl",
+      ".gif": "dataurl",
+      ".webp": "dataurl",
+      ".svg": "dataurl",
+      ".woff": "dataurl",
+      ".woff2": "dataurl",
+      ".ttf": "dataurl"
+    }
   };
   if (m.main) {
     const entry = await firstExisting(root, ["src/main.ts", "src/main.js"]);
@@ -99,18 +112,69 @@ async function buildPlugin(root, watch = false, log2 = console.log) {
   };
   if (!watch) {
     for (const o of opts) await build(o);
+    await ensureRendererCss(root);
+    await hintMissingDeps(root, log2);
     log2(`built ${opts.length} bundle(s) in ${root}`);
     return async () => stopTw();
   }
   const ctxs = await Promise.all(opts.map((o) => context(o)));
+  await Promise.all(ctxs.map((c) => c.rebuild()));
+  await ensureRendererCss(root);
   await Promise.all(ctxs.map((c) => c.watch()));
   log2(`watching ${root} (${ctxs.length} bundles)`);
   return async () => (stopTw(), void await Promise.all(ctxs.map((c) => c.dispose())));
 }
+async function ensureRendererCss(root) {
+  if (!await exists(path2.join(root, "dist/renderer.css"))) return;
+  const file = path2.join(root, "plugin.json");
+  const raw = JSON.parse(await fs.readFile(file, "utf8"));
+  const styles2 = raw.styles ?? [];
+  if (styles2.some((s) => s.replace(/^\.\//, "") === "dist/renderer.css")) return;
+  raw.styles = [...styles2, "./dist/renderer.css"];
+  await fs.writeFile(file, JSON.stringify(raw, null, 2));
+}
+async function hintMissingDeps(root, log2) {
+  try {
+    const pkg2 = JSON.parse(await fs.readFile(path2.join(root, "package.json"), "utf8"));
+    if (Object.keys(pkg2.dependencies ?? {}).length && !await exists(path2.join(root, "node_modules"))) log2(`! ${path2.basename(root)} lists dependencies but has no node_modules: run "npm install" in ${root}`);
+  } catch {
+  }
+}
+async function linkPluginToHost(root, hostDir, log2 = console.log) {
+  const manifest = JSON.parse(await fs.readFile(path2.join(root, "plugin.json"), "utf8"));
+  const target = path2.join(path2.resolve(hostDir), "plugins", manifest.id);
+  const sync = async () => {
+    try {
+      const copied = await copyPluginRuntime(root, target);
+      const keep = new Set(copied);
+      const walk = async (rel) => {
+        for (const e of await fs.readdir(path2.join(target, rel), { withFileTypes: true })) {
+          const r = rel ? `${rel}/${e.name}` : e.name;
+          if (e.isDirectory()) await walk(r);
+          else if (!keep.has(r)) await fs.rm(path2.join(target, r), { force: true });
+        }
+      };
+      await walk("");
+      log2(`\u21AA synced ${copied.length} files to ${path2.relative(process.cwd(), target) || target}`);
+    } catch (e) {
+      log2(`! sync failed: ${e.message}`);
+    }
+  };
+  await sync();
+  let timer;
+  const watchers = [path2.join(root, "dist"), path2.join(root, "assets"), root].filter((d) => existsSync(d)).map(
+    (d) => fsWatch(d, { recursive: d !== root }, (_e, name) => {
+      if (d === root && name !== "plugin.json" && name !== "README.md") return;
+      clearTimeout(timer);
+      timer = setTimeout(() => void sync(), 250);
+    })
+  );
+  return () => watchers.forEach((w) => w.close());
+}
 
 // src/cli/host.ts
 import { spawn, spawnSync } from "node:child_process";
-import { existsSync, promises as fs3, statSync } from "node:fs";
+import { existsSync as existsSync2, promises as fs3, statSync } from "node:fs";
 import { createRequire } from "node:module";
 import path4 from "node:path";
 import { build as build2, context as context2 } from "esbuild";
@@ -139,7 +203,7 @@ async function isHostProject(cwd) {
 }
 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(path4.join(cwd, r))) return path4.join(cwd, r);
+  for (const r of rels) if (existsSync2(path4.join(cwd, r))) return path4.join(cwd, r);
   return path4.join(cwd, rels[0]);
 };
 function hostBuilds(cwd, outDir, dev) {
@@ -195,7 +259,7 @@ async function buildHost(cwd, opts = {}) {
 function electronBinary(cwd) {
   try {
     const p = createRequire(path4.join(cwd, "package.json"))("electron");
-    if (typeof p === "string" && existsSync(p)) return { bin: p };
+    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] };
@@ -211,7 +275,7 @@ function ensureElectron(cwd, log2 = console.log) {
     return { error: "Electron is not installed in this project" };
   }
   const installJs = path4.join(pkgDir, "install.js");
-  if (!existsSync(installJs)) return first;
+  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 = 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" };
@@ -250,10 +314,398 @@ function startApp(cwd, opts = {}) {
 
 // src/cli/host-files.generated.ts
 var HOST_APP_FILES = {
-  "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',
+  "electron-builder.yml": '# Produces the installer/executable: `npm run dist` (current OS) or `npm run dist -- --win --mac --linux`.\nappId: com.example.__APP_ID__\nproductName: __APP_NAME__\ndirectories:\n  output: release\nfiles:\n  - dist/**/*\n  - package.json\n  - "!**/*.map"\n# Plugins are copied by `fluxplugin dist` into .flux-build/plugins with runtime files only (no src, no .ts, no sourcemaps).\nextraResources:\n  - from: .flux-build/plugins\n    to: plugins\nasar: true\nwin:\n  target: [nsis]\nnsis:\n  oneClick: false\n  allowToChangeInstallationDirectory: true\n  # Plugins the user installed live in the app\'s data folder; this removes them with the app when it is uninstalled.\n  deleteAppDataOnUninstall: true\nmac:\n  target: [dmg, zip]\n  category: public.app-category.productivity\nlinux:\n  target: [AppImage, deb]\n  category: Utility\n',
+  "plugins/appearance/README.md": "# Appearance\n\nMake the app yours. This plugin adds an **Appearance** page to *Settings* and four extra themes.\n\n## What you can change\n\n- **Mode** \u2014 System, Light or Dark.\n- **Theme** \u2014 Midnight, Sunset, Forest or high-contrast Graphite.\n- **Accent color** \u2014 seven colors, or the theme's own.\n- **Text** \u2014 font family, any font installed on your computer, size and line spacing.\n- **Layout** \u2014 compact or comfortable spacing, corner roundness, translucency and reduced motion.\n\n> [!TIP]\n> Type the name of any font installed on your computer in *Your own font*. If it is missing, the next font in the list is used.\n\n## How it works\n\n| Setting | Stored as |\n| --- | --- |\n| Theme and mode | the app's theme variables |\n| Fonts, size, spacing | CSS variables on the page |\n\nYour choices are saved on this device and apply to every plugin, because plugins use the same variables.\n\n## For developers\n\nPlugins can add their own **themes** and **fonts** to the same lists \u2014 see the `theme` and `font` extension points in the documentation.\n",
+  "plugins/appearance/assets/icon.svg": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><rect width="96" height="96" rx="22" fill="hsl(280 72% 50%)"/><text x="48" y="64" font-family="system-ui,sans-serif" font-size="52" font-weight="700" text-anchor="middle" fill="#fff">A</text></svg>\n',
+  "plugins/appearance/plugin.json": '{\n  "id": "com.fluxplugin.appearance",\n  "name": "Appearance",\n  "version": "1.0.0",\n  "description": "Themes, accent colors, fonts, text size, density and more \\u2014 everything about how the app looks.",\n  "author": "fluxplugin",\n  "license": "MIT",\n  "icon": "./assets/icon.svg",\n  "readme": "./README.md",\n  "categories": [\n    "Personalization"\n  ],\n  "keywords": [\n    "theme",\n    "font",\n    "accent",\n    "dark mode"\n  ],\n  "links": {},\n  "renderer": "./dist/renderer.js",\n  "activationEvents": [\n    "onStartup"\n  ],\n  "permissions": [\n    "ui"\n  ],\n  "engines": {\n    "fluxplugin": "^1.0.0"\n  }\n}',
+  "plugins/appearance/src/renderer.tsx": `import { definePlugin } from "fluxplugin";
+import { Button, Group, Row, Segmented, Switch, useAppearance, useT, useTheme, type ThemeMode } from "fluxplugin/react";
+import { useState } from "react";
+
+const ACCENTS = ["#007aff", "#34c759", "#ff9f0a", "#af52de", "#ff375f", "#5ac8fa", "#8e8e93"];
+
+function AppearanceSection() {
+  const t = useT();
+  const { mode, setMode, themeId, setThemeId, themes } = useTheme();
+  const { appearance: a, setAppearance, resetAppearance, fonts } = useAppearance();
+  const [custom, setCustom] = useState(a.customFont);
+  return (
+    <>
+      <Group title={t("appearance.mode", "Mode")}>
+        <Row title={t("appearance.mode", "Mode")} right={
+          <Segmented<ThemeMode> value={(themeId ? "" : mode) as ThemeMode} onChange={setMode} label="Mode"
+            options={[{ value: "system", label: t("theme.system", "System") }, { value: "light", label: t("theme.light", "Light") }, { value: "dark", label: t("theme.dark", "Dark") }]} />} />
+      </Group>
+
+      <Group title={t("appearance.theme", "Theme")}>
+        <div style={{ display: "flex", gap: 12, flexWrap: "wrap", padding: 14 }}>
+          {[{ id: "", label: t("appearance.themeDefault", "Default"), tokens: { "--flux-bg": "#ffffff", "--flux-surface": "#f5f5f7", "--flux-accent": "#007aff" } }, ...themes].map((th) => (
+            <button key={th.id || "default"} type="button" className="flux-theme-card" data-on={(themeId ?? "") === th.id || undefined} data-testid={"theme-" + (th.id || "default")} onClick={() => (th.id ? setThemeId(th.id) : setMode(mode))}>
+              <span className="flux-theme-prev" style={{ display: "flex" }}>
+                <i style={{ flex: 2, background: th.tokens["--flux-bg"] }} /><i style={{ flex: 1, background: th.tokens["--flux-surface"] }} /><i style={{ flex: 1, background: th.tokens["--flux-accent"] }} />
+              </span>
+              <span className="cap">{th.label}</span>
+            </button>
+          ))}
+        </div>
+      </Group>
+
+      <Group title={t("appearance.accent", "Accent color")}>
+        <div className="flux-swatches" style={{ padding: 14 }}>
+          <button type="button" className="flux-swatch" title={t("appearance.accentDefault", "Theme default")} style={{ background: "conic-gradient(#ff3b30,#ff9f0a,#34c759,#0a84ff,#af52de,#ff3b30)" }} data-on={!a.accent || undefined} onClick={() => setAppearance({ accent: undefined })} />
+          {ACCENTS.map((c) => <button key={c} type="button" aria-label={c} className="flux-swatch" style={{ background: c }} data-on={a.accent === c || undefined} data-testid={"accent-" + c.slice(1)} onClick={() => setAppearance({ accent: c })} />)}
+        </div>
+      </Group>
+
+      <Group title={t("appearance.text", "Text")}>
+        <Row title={t("appearance.font", "Font")} right={
+          <select className="flux-select" value={a.fontId} data-testid="font-select" onChange={(e) => setAppearance({ fontId: e.target.value })}>{fonts.map((f) => <option key={f.id} value={f.id}>{f.label}</option>)}</select>} />
+        <Row title={t("appearance.customFont", "Your own font")} subtitle={t("appearance.customFontHint", "Any font installed on your computer")} right={
+          <input className="flux-input" style={{ width: 170 }} placeholder="e.g. Avenir Next" value={custom} data-testid="custom-font" onChange={(e) => setCustom(e.target.value)} onBlur={() => setAppearance({ customFont: custom })} onKeyDown={(e) => e.key === "Enter" && setAppearance({ customFont: custom })} />} />
+        <Row title={t("appearance.fontSize", "Text size")} right={<><input className="flux-range" type="range" min={12} max={20} step={1} value={a.fontSize} data-testid="font-size" onChange={(e) => setAppearance({ fontSize: Number(e.target.value) })} /><span style={{ width: 34, textAlign: "right" }}>{a.fontSize}px</span></>} />
+        <Row title={t("appearance.lineHeight", "Line spacing")} right={<input className="flux-range" type="range" min={1.2} max={2} step={0.05} value={a.lineHeight} onChange={(e) => setAppearance({ lineHeight: Number(e.target.value) })} />} />
+        <div style={{ padding: "4px 14px 14px" }}><p style={{ margin: 0 }}>{t("appearance.preview", "The quick brown fox jumps over the lazy dog.")}</p></div>
+      </Group>
+
+      <Group title={t("appearance.layout", "Layout")}>
+        <Row title={t("appearance.density", "Spacing")} right={
+          <Segmented value={a.density} onChange={(density) => setAppearance({ density })} label="Spacing" options={[{ value: "comfortable", label: t("appearance.comfortable", "Comfortable") }, { value: "compact", label: t("appearance.compact", "Compact") }]} />} />
+        <Row title={t("appearance.radius", "Corners")} right={
+          <Segmented value={a.radius} onChange={(radius) => setAppearance({ radius })} label="Corners" options={[{ value: "sharp", label: t("appearance.sharp", "Sharp") }, { value: "default", label: t("appearance.default", "Default") }, { value: "round", label: t("appearance.round", "Round") }]} />} />
+        <Row title={t("appearance.translucency", "Translucency")} right={<Switch checked={a.translucency} onChange={(translucency) => setAppearance({ translucency })} label="Translucency" />} />
+        <Row title={t("appearance.motion", "Reduce motion")} right={<Switch checked={a.reduceMotion} onChange={(reduceMotion) => setAppearance({ reduceMotion })} label="Reduce motion" />} />
+      </Group>
+      <Button variant="destructive" onClick={() => (resetAppearance(), setCustom(""))}>{t("appearance.reset", "Reset appearance")}</Button>
+    </>
+  );
+}
+
+export default definePlugin({
+  extensions: [
+    { point: "settings", contribution: { sections: [{ id: "appearance", title: "Appearance", icon: "palette", order: 10, component: AppearanceSection }] } },
+    { point: "theme", contribution: { themes: [
+      { id: "midnight", label: "Midnight", dark: true, tokens: { "--flux-bg": "#0b1020", "--flux-surface": "#111936", "--flux-surface-2": "#1a2447", "--flux-fg": "#e6ebff", "--flux-muted": "#8f9bc7", "--flux-border": "rgba(150,170,255,.18)", "--flux-accent": "#7c9cff", "--flux-material": "rgba(17,25,54,.72)" } },
+      { id: "sunset", label: "Sunset", tokens: { "--flux-bg": "#fff8f1", "--flux-surface": "#ffefe0", "--flux-surface-2": "#ffe0c7", "--flux-fg": "#3b1f12", "--flux-muted": "#9a6b53", "--flux-border": "rgba(120,60,20,.16)", "--flux-accent": "#ff6a3d", "--flux-material": "rgba(255,239,224,.8)" } },
+      { id: "forest", label: "Forest", dark: true, tokens: { "--flux-bg": "#0f1a14", "--flux-surface": "#162720", "--flux-surface-2": "#1f3a2e", "--flux-fg": "#e4f3ea", "--flux-muted": "#8fb3a0", "--flux-border": "rgba(150,230,190,.16)", "--flux-accent": "#34d399", "--flux-material": "rgba(22,39,32,.74)" } },
+      { id: "graphite", label: "Graphite (high contrast)", tokens: { "--flux-bg": "#ffffff", "--flux-surface": "#f0f0f0", "--flux-surface-2": "#dcdcdc", "--flux-fg": "#000000", "--flux-muted": "#3a3a3a", "--flux-border": "#000000", "--flux-accent": "#0040dd", "--flux-material": "rgba(240,240,240,.95)" } },
+    ] } },
+    { point: "font", contribution: { fonts: [
+      { id: "editorial", label: "Editorial", stack: '"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif' },
+      { id: "geometric", label: "Geometric", stack: '"Avenir Next", Avenir, "Century Gothic", Futura, "Trebuchet MS", sans-serif' },
+      { id: "readable", label: "Easy reading", stack: '"Atkinson Hyperlegible", Verdana, Tahoma, sans-serif' },
+    ] } },
+  ],
+});
+`,
+  "plugins/language/README.md": "# Language\n\nChoose the language of the whole interface: menus, search, notifications, settings and the plugin manager.\n\n## Languages included\n\n| Language | Code |\n| --- | --- |\n| English | `en` |\n| Fran\xE7ais | `fr` |\n| Espa\xF1ol | `es` |\n| Deutsch | `de` |\n\nOpen **Settings \u2192 Language** and pick one. The change is instant and remembered.\n\n## Add your own language\n\n1. Copy `src/messages.ts` and translate the values.\n2. Add the language to the list in `src/renderer.tsx`.\n3. Build with `fluxplugin build`.\n\n> [!NOTE]\n> Any plugin can ship translations \u2014 the app merges them. Missing words fall back to English, so a partial translation is fine.\n\n## Right-to-left languages\n\nSet `rtl: true` on a language (Arabic, Hebrew\u2026) and the whole interface mirrors automatically.\n",
+  "plugins/language/assets/icon.svg": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><rect width="96" height="96" rx="22" fill="hsl(205 72% 50%)"/><text x="48" y="64" font-family="system-ui,sans-serif" font-size="52" font-weight="700" text-anchor="middle" fill="#fff">L</text></svg>\n',
+  "plugins/language/plugin.json": '{\n  "id": "com.fluxplugin.language",\n  "name": "Language",\n  "version": "1.0.0",\n  "description": "Use the app in English, French, Spanish or German \\u2014 and add your own language.",\n  "author": "fluxplugin",\n  "license": "MIT",\n  "icon": "./assets/icon.svg",\n  "readme": "./README.md",\n  "categories": [\n    "Personalization"\n  ],\n  "keywords": [\n    "language",\n    "translation",\n    "i18n",\n    "fran\\u00e7ais",\n    "espa\\u00f1ol",\n    "deutsch"\n  ],\n  "links": {},\n  "renderer": "./dist/renderer.js",\n  "activationEvents": [\n    "onStartup"\n  ],\n  "permissions": [\n    "ui"\n  ],\n  "engines": {\n    "fluxplugin": "^1.0.0"\n  }\n}',
+  "plugins/language/src/messages.ts": `/** Translations. Keys are the ones the app and its plugins pass to useT(); English is the built-in fallback. */
+export const messages: Record<string, Record<string, string>> = {
+  "fr": {
+    "menu.dashboard": "Tableau de bord",
+    "menu.plugins": "Extensions",
+    "menu.settings": "R\xE9glages",
+    "theme.toggle": "Changer d'apparence",
+    "theme.system": "Syst\xE8me",
+    "theme.light": "Clair",
+    "theme.dark": "Sombre",
+    "search.placeholder": "Rechercher commandes, pages\u2026",
+    "search.label": "Rechercher",
+    "search.commands": "Commandes",
+    "search.pages": "Pages",
+    "search.noResults": "Aucun r\xE9sultat",
+    "notifications.title": "Notifications",
+    "notifications.clear": "Tout effacer",
+    "notifications.empty": "Tout est \xE0 jour",
+    "palette.placeholder": "Saisir une commande\u2026",
+    "palette.empty": "Aucune commande correspondante",
+    "sidebar.expand": "D\xE9velopper la barre lat\xE9rale",
+    "sidebar.collapse": "R\xE9duire la barre lat\xE9rale",
+    "settings.title": "R\xE9glages",
+    "settings.empty": "Aucun r\xE9glage",
+    "settings.general": "G\xE9n\xE9ral",
+    "settings.shortcuts": "Raccourcis",
+    "settings.appearance": "Apparence",
+    "settings.language": "Langue",
+    "settings.about": "\xC0 propos",
+    "settings.app": "Application",
+    "settings.plugins": "Extensions",
+    "settings.engine": "Moteur",
+    "settings.sidebar": "Barre lat\xE9rale",
+    "settings.sidebarHint": "R\xE9duit la barre lat\xE9rale en ic\xF4nes. Raccourci : Ctrl/Cmd+B.",
+    "settings.compactSidebar": "Barre lat\xE9rale compacte",
+    "plugins.title": "Extensions",
+    "plugins.installed": "Install\xE9es",
+    "plugins.discover": "D\xE9couvrir",
+    "plugins.updates": "Mises \xE0 jour",
+    "plugins.search": "Rechercher des extensions",
+    "plugins.none": "Aucune extension install\xE9e",
+    "plugins.searching": "Recherche dans les catalogues\u2026",
+    "plugins.upToDate": "Tout est \xE0 jour.",
+    "plugins.storeEmpty": "Aucune extension trouv\xE9e dans vos catalogues.",
+    "plugins.installedTag": "Install\xE9e",
+    "plugins.get": "Obtenir",
+    "plugins.update": "Mettre \xE0 jour",
+    "plugins.open": "Ouvrir",
+    "plugins.back": "Extensions",
+    "plugins.notFound": "Cette extension n'est pas install\xE9e.",
+    "plugins.enable": "Activer",
+    "plugins.enabled": "Activ\xE9e",
+    "plugins.disabled": "D\xE9sactiv\xE9e",
+    "plugins.reload": "Recharger",
+    "plugins.uninstall": "D\xE9sinstaller",
+    "plugins.video": "Vid\xE9o",
+    "plugins.about": "\xC0 propos",
+    "plugins.permissions": "Autorisations",
+    "plugins.permissionsFooter": "Une extension n'obtient que ce qu'elle d\xE9clare. Les acc\xE8s sensibles sont signal\xE9s.",
+    "plugins.noPermissions": "Aucun acc\xE8s particulier",
+    "plugins.sensitive": "Sensible",
+    "plugins.information": "Informations",
+    "plugins.developer": "D\xE9veloppeur",
+    "plugins.version": "Version",
+    "plugins.license": "Licence",
+    "plugins.dependencies": "N\xE9cessite",
+    "plugins.keywords": "Mots-cl\xE9s",
+    "plugins.settings": "R\xE9glages",
+    "plugins.saved": "Enregistr\xE9",
+    "plugins.reset": "R\xE9tablir les valeurs par d\xE9faut",
+    "plugins.logs": "Journal",
+    "plugins.noLogs": "Aucun journal",
+    "plugins.installedVersion": "Install\xE9e : {v}",
+    "state.ready": "Active",
+    "state.error": "Erreur",
+    "state.disabled": "D\xE9sactiv\xE9e",
+    "appearance.mode": "Mode",
+    "appearance.theme": "Th\xE8me",
+    "appearance.themeDefault": "Par d\xE9faut",
+    "appearance.accent": "Couleur d'accentuation",
+    "appearance.accentDefault": "Selon le th\xE8me",
+    "appearance.text": "Texte",
+    "appearance.font": "Police",
+    "appearance.customFont": "Votre propre police",
+    "appearance.customFontHint": "Toute police install\xE9e sur votre ordinateur",
+    "appearance.fontSize": "Taille du texte",
+    "appearance.lineHeight": "Interligne",
+    "appearance.preview": "Portez ce vieux whisky au juge blond qui fume.",
+    "appearance.layout": "Disposition",
+    "appearance.density": "Espacement",
+    "appearance.comfortable": "Confortable",
+    "appearance.compact": "Compact",
+    "appearance.radius": "Coins",
+    "appearance.sharp": "Droits",
+    "appearance.default": "Par d\xE9faut",
+    "appearance.round": "Arrondis",
+    "appearance.translucency": "Transparence",
+    "appearance.motion": "R\xE9duire les animations",
+    "appearance.reset": "R\xE9initialiser l'apparence",
+    "language.follow": "Suivre la langue du syst\xE8me"
+  },
+  "es": {
+    "menu.dashboard": "Panel",
+    "menu.plugins": "Extensiones",
+    "menu.settings": "Ajustes",
+    "theme.toggle": "Cambiar apariencia",
+    "theme.system": "Sistema",
+    "theme.light": "Claro",
+    "theme.dark": "Oscuro",
+    "search.placeholder": "Buscar comandos, p\xE1ginas\u2026",
+    "search.label": "Buscar",
+    "search.commands": "Comandos",
+    "search.pages": "P\xE1ginas",
+    "search.noResults": "Sin resultados",
+    "notifications.title": "Notificaciones",
+    "notifications.clear": "Borrar todo",
+    "notifications.empty": "Todo al d\xEDa",
+    "palette.placeholder": "Escribe un comando\u2026",
+    "palette.empty": "Ning\xFAn comando coincide",
+    "sidebar.expand": "Expandir barra lateral",
+    "sidebar.collapse": "Contraer barra lateral",
+    "settings.title": "Ajustes",
+    "settings.empty": "Sin ajustes",
+    "settings.general": "General",
+    "settings.shortcuts": "Atajos",
+    "settings.appearance": "Apariencia",
+    "settings.language": "Idioma",
+    "settings.about": "Acerca de",
+    "settings.app": "Aplicaci\xF3n",
+    "settings.plugins": "Extensiones",
+    "settings.engine": "Motor",
+    "settings.sidebar": "Barra lateral",
+    "settings.sidebarHint": "Reduce la barra lateral a iconos. Atajo: Ctrl/Cmd+B.",
+    "settings.compactSidebar": "Barra lateral compacta",
+    "plugins.title": "Extensiones",
+    "plugins.installed": "Instaladas",
+    "plugins.discover": "Descubrir",
+    "plugins.updates": "Actualizaciones",
+    "plugins.search": "Buscar extensiones",
+    "plugins.none": "No hay extensiones instaladas",
+    "plugins.searching": "Buscando en los cat\xE1logos\u2026",
+    "plugins.upToDate": "Todo est\xE1 actualizado.",
+    "plugins.storeEmpty": "No se encontraron extensiones en tus cat\xE1logos.",
+    "plugins.installedTag": "Instalada",
+    "plugins.get": "Obtener",
+    "plugins.update": "Actualizar",
+    "plugins.open": "Abrir",
+    "plugins.back": "Extensiones",
+    "plugins.notFound": "Esta extensi\xF3n no est\xE1 instalada.",
+    "plugins.enable": "Activar",
+    "plugins.enabled": "Activada",
+    "plugins.disabled": "Desactivada",
+    "plugins.reload": "Recargar",
+    "plugins.uninstall": "Desinstalar",
+    "plugins.video": "V\xEDdeo",
+    "plugins.about": "Descripci\xF3n",
+    "plugins.permissions": "Permisos",
+    "plugins.permissionsFooter": "Las extensiones solo obtienen lo que declaran. Los accesos sensibles se destacan.",
+    "plugins.noPermissions": "Sin accesos especiales",
+    "plugins.sensitive": "Sensible",
+    "plugins.information": "Informaci\xF3n",
+    "plugins.developer": "Desarrollador",
+    "plugins.version": "Versi\xF3n",
+    "plugins.license": "Licencia",
+    "plugins.dependencies": "Requiere",
+    "plugins.keywords": "Palabras clave",
+    "plugins.settings": "Ajustes",
+    "plugins.saved": "Guardado",
+    "plugins.reset": "Restablecer valores",
+    "plugins.logs": "Registro",
+    "plugins.noLogs": "Sin registros",
+    "plugins.installedVersion": "Instalada: {v}",
+    "state.ready": "Activa",
+    "state.error": "Error",
+    "state.disabled": "Desactivada",
+    "appearance.mode": "Modo",
+    "appearance.theme": "Tema",
+    "appearance.themeDefault": "Predeterminado",
+    "appearance.accent": "Color de \xE9nfasis",
+    "appearance.accentDefault": "Seg\xFAn el tema",
+    "appearance.text": "Texto",
+    "appearance.font": "Fuente",
+    "appearance.customFont": "Tu propia fuente",
+    "appearance.customFontHint": "Cualquier fuente instalada en tu equipo",
+    "appearance.fontSize": "Tama\xF1o del texto",
+    "appearance.lineHeight": "Interlineado",
+    "appearance.preview": "El veloz murci\xE9lago hind\xFA com\xEDa feliz cardillo y kiwi.",
+    "appearance.layout": "Disposici\xF3n",
+    "appearance.density": "Espaciado",
+    "appearance.comfortable": "C\xF3modo",
+    "appearance.compact": "Compacto",
+    "appearance.radius": "Esquinas",
+    "appearance.sharp": "Rectas",
+    "appearance.default": "Predeterminadas",
+    "appearance.round": "Redondeadas",
+    "appearance.translucency": "Transparencia",
+    "appearance.motion": "Reducir movimiento",
+    "appearance.reset": "Restablecer apariencia",
+    "language.follow": "Seguir el idioma del sistema"
+  },
+  "de": {
+    "menu.dashboard": "\xDCbersicht",
+    "menu.plugins": "Erweiterungen",
+    "menu.settings": "Einstellungen",
+    "theme.toggle": "Darstellung wechseln",
+    "theme.system": "System",
+    "theme.light": "Hell",
+    "theme.dark": "Dunkel",
+    "search.placeholder": "Befehle, Seiten suchen\u2026",
+    "search.label": "Suchen",
+    "search.commands": "Befehle",
+    "search.pages": "Seiten",
+    "search.noResults": "Keine Ergebnisse",
+    "notifications.title": "Mitteilungen",
+    "notifications.clear": "Alle l\xF6schen",
+    "notifications.empty": "Alles erledigt",
+    "palette.placeholder": "Befehl eingeben\u2026",
+    "palette.empty": "Kein passender Befehl",
+    "sidebar.expand": "Seitenleiste erweitern",
+    "sidebar.collapse": "Seitenleiste einklappen",
+    "settings.title": "Einstellungen",
+    "settings.empty": "Keine Einstellungen",
+    "settings.general": "Allgemein",
+    "settings.shortcuts": "Tastenk\xFCrzel",
+    "settings.appearance": "Darstellung",
+    "settings.language": "Sprache",
+    "settings.about": "Info",
+    "settings.app": "Anwendung",
+    "settings.plugins": "Erweiterungen",
+    "settings.engine": "Engine",
+    "settings.sidebar": "Seitenleiste",
+    "settings.sidebarHint": "Reduziert die Seitenleiste auf Symbole. K\xFCrzel: Strg/Cmd+B.",
+    "settings.compactSidebar": "Kompakte Seitenleiste",
+    "plugins.title": "Erweiterungen",
+    "plugins.installed": "Installiert",
+    "plugins.discover": "Entdecken",
+    "plugins.updates": "Updates",
+    "plugins.search": "Erweiterungen suchen",
+    "plugins.none": "Keine Erweiterungen installiert",
+    "plugins.searching": "Kataloge werden durchsucht\u2026",
+    "plugins.upToDate": "Alles ist aktuell.",
+    "plugins.storeEmpty": "Keine Erweiterungen in Ihren Katalogen gefunden.",
+    "plugins.installedTag": "Installiert",
+    "plugins.get": "Laden",
+    "plugins.update": "Aktualisieren",
+    "plugins.open": "\xD6ffnen",
+    "plugins.back": "Erweiterungen",
+    "plugins.notFound": "Diese Erweiterung ist nicht installiert.",
+    "plugins.enable": "Aktivieren",
+    "plugins.enabled": "Aktiviert",
+    "plugins.disabled": "Deaktiviert",
+    "plugins.reload": "Neu laden",
+    "plugins.uninstall": "Deinstallieren",
+    "plugins.video": "Video",
+    "plugins.about": "Beschreibung",
+    "plugins.permissions": "Berechtigungen",
+    "plugins.permissionsFooter": "Erweiterungen erhalten nur, was sie angeben. Sensible Zugriffe sind markiert.",
+    "plugins.noPermissions": "Keine besonderen Zugriffe",
+    "plugins.sensitive": "Sensibel",
+    "plugins.information": "Informationen",
+    "plugins.developer": "Entwickler",
+    "plugins.version": "Version",
+    "plugins.license": "Lizenz",
+    "plugins.dependencies": "Ben\xF6tigt",
+    "plugins.keywords": "Stichw\xF6rter",
+    "plugins.settings": "Einstellungen",
+    "plugins.saved": "Gespeichert",
+    "plugins.reset": "Auf Standard zur\xFCcksetzen",
+    "plugins.logs": "Protokoll",
+    "plugins.noLogs": "Kein Protokoll",
+    "plugins.installedVersion": "Installiert: {v}",
+    "state.ready": "Aktiv",
+    "state.error": "Fehler",
+    "state.disabled": "Deaktiviert",
+    "appearance.mode": "Modus",
+    "appearance.theme": "Thema",
+    "appearance.themeDefault": "Standard",
+    "appearance.accent": "Akzentfarbe",
+    "appearance.accentDefault": "Vom Thema",
+    "appearance.text": "Text",
+    "appearance.font": "Schrift",
+    "appearance.customFont": "Eigene Schrift",
+    "appearance.customFontHint": "Jede auf Ihrem Computer installierte Schrift",
+    "appearance.fontSize": "Textgr\xF6\xDFe",
+    "appearance.lineHeight": "Zeilenabstand",
+    "appearance.preview": "Zw\xF6lf Boxk\xE4mpfer jagen Viktor quer \xFCber den gro\xDFen Sylter Deich.",
+    "appearance.layout": "Layout",
+    "appearance.density": "Abst\xE4nde",
+    "appearance.comfortable": "Komfortabel",
+    "appearance.compact": "Kompakt",
+    "appearance.radius": "Ecken",
+    "appearance.sharp": "Eckig",
+    "appearance.default": "Standard",
+    "appearance.round": "Rund",
+    "appearance.translucency": "Transparenz",
+    "appearance.motion": "Bewegung reduzieren",
+    "appearance.reset": "Darstellung zur\xFCcksetzen",
+    "language.follow": "Systemsprache verwenden"
+  }
+};
+`,
+  "plugins/language/src/renderer.tsx": 'import { definePlugin } from "fluxplugin";\nimport { Group, Icon, Row, useI18n } from "fluxplugin/react";\nimport { messages } from "./messages";\n\n// To add a language: translate src/messages.ts, then add it here.\nconst languages = [\n  { code: "fr", label: "French", nativeLabel: "Fran\xE7ais" },\n  { code: "es", label: "Spanish", nativeLabel: "Espa\xF1ol" },\n  { code: "de", label: "German", nativeLabel: "Deutsch" },\n];\n\nfunction LanguageSection() {\n  const { locale, setLocale, languages: all, t } = useI18n();\n  return (\n    <>\n      <Group title={t("settings.language", "Language")}>\n        {all.map((l) => (\n          <Row key={l.code} data-testid={"lang-" + l.code} title={l.nativeLabel ?? l.label} subtitle={l.label} onClick={() => setLocale(l.code)} right={locale === l.code ? <Icon name="check" size={18} /> : undefined} />\n        ))}\n      </Group>\n      <Group>\n        <Row title={t("language.follow", "Follow the system language")} onClick={() => setLocale(navigator.language)} />\n      </Group>\n    </>\n  );\n}\n\nexport default definePlugin({\n  extensions: [\n    { point: "settings", contribution: { sections: [{ id: "language", title: "Language", icon: "language", order: 20, component: LanguageSection }] } },\n    { point: "i18n", contribution: { languages } },\n    ...Object.entries(messages).map(([locale, m]) => ({ point: "i18n", contribution: { messages: [{ locale, messages: m }] } })),\n  ],\n});\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  /** Where "Get" installs plugins (default: the last of pluginDirs). */\n  installDir?: 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    installDir: opts.installDir ?? opts.pluginDirs[opts.pluginDirs.length - 1],\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 { pluginPaths, 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 paths = pluginPaths(projectRoot(__dirname), app.getPath("userData"), app.isPackaged, process.resourcesPath);\n  const fw = createFramework({\n    pluginDirs: [paths.bundled, paths.user],\n    installDir: paths.user,\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/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\nexport interface PluginPaths {\n  /** Plugins shipped with the app: <project>/plugins in dev, <resources>/plugins in the packaged app (read-only). */\n  bundled: string;\n  /** Plugins installed by the user (writable): inside the app\'s data folder, removed with it when the app is uninstalled. */\n  user: string;\n}\n\nexport function pluginPaths(root: string, userData: string, packaged: boolean, resourcesPath: string): PluginPaths {\n  return { bundled: packaged ? path.join(resourcesPath, "plugins") : path.join(root, "plugins"), user: 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-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";
@@ -295,7 +747,7 @@ export function createMainWindow(distDir: string): BrowserWindow {
 `,
   "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, 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/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, createStaticBridge, declareHostPoints, installSharedModules } from "fluxplugin/react";\nimport { declareExtensionPoints } from "./extension-points";\nimport { registerHostMenus } from "./menus";\nimport { registerHostSettings } from "./settings";\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  const bridge = await pickBridge();\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  registerHostSettings(framework);\n  await framework.start();\n  return { framework, bridge };\n}\n\n/** Electron: the preload bridge. Browser dev mode: HTTP bridge to `fluxplugin dev --web`. Static website export: bootstrap.json only. */\nasync function pickBridge(): Promise<FluxBridge> {\n  const injected = (window as unknown as { __fluxplugin?: FluxBridge }).__fluxplugin;\n  if (injected) return injected;\n  try {\n    const r = await fetch("/flux/bootstrap");\n    if (r.ok && (r.headers.get("content-type") ?? "").includes("json")) return createHttpBridge();\n  } catch {\n    /* no server behind this page */\n  }\n  return createStaticBridge("./bootstrap.json");\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>
@@ -303,7 +755,7 @@ export function createMainWindow(distDir: string): BrowserWindow {
   <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" />
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self' fluxplugin:; script-src 'self' fluxplugin:; style-src 'self' 'unsafe-inline' fluxplugin:; font-src 'self' data: https: fluxplugin:; connect-src 'self'; img-src 'self' data: blob: https: http: file: fluxplugin:; media-src 'self' blob: data: https: file: fluxplugin:; frame-src https://www.youtube-nocookie.com https://player.vimeo.com https://www.dailymotion.com https://www.loom.com https://streamable.com" />
     <link rel="stylesheet" href="./renderer.css" />
   </head>
   <body>
@@ -325,14 +777,18 @@ export function registerHostMenus(framework: RendererFramework): void {
   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.sidebar", title: "Toggle sidebar", category: "View", keybinding: "Mod+B", execute: () => window.dispatchEvent(new Event("flux:toggle-sidebar")) }, "host");
+  commands.register({ id: "host.goSettings", title: "Settings", category: "Go", keybinding: "Mod+,", execute: () => (location.hash = "#/settings") }, "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" },
+    { id: "app.go.settings", label: "Settings", command: "host.goSettings" },
   ] }, "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.sidebar", label: "Toggle sidebar", command: "host.sidebar" },
     { id: "app.view.sep", label: "", separator: true },
     { id: "app.view.reload", label: "Reload", command: "host.reload" },
   ] }, "host");
@@ -340,23 +796,28 @@ export function registerHostMenus(framework: RendererFramework): void {
 }
 `,
   "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, 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";
+  "src/app/renderer/providers/AppProviders.tsx": 'import { createContext, useCallback, useContext, type ReactNode } from "react";\nimport type { FluxBridge } from "fluxplugin";\nimport { I18nProvider, PluginProvider, SidebarProvider, 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        <I18nProvider>\n          <ThemeProvider onResolved={onResolved}>\n            <SidebarProvider>\n              {children}\n              <ToastHost />\n            </SidebarProvider>\n          </ThemeProvider>\n        </I18nProvider>\n      </BridgeContext.Provider>\n    </PluginProvider>\n  );\n}\n',
+  "src/app/renderer/routes.ts": `import { SettingsPage, type RendererFramework } from "fluxplugin/react";
+import { registerPluginManagerRoutes } from "fluxplugin/manager-ui";
 import { DashboardPage } from "./pages/DashboardPage";
-import { PluginsPage } from "./pages/PluginsPage";
 
 /** The host's own pages (owner "host"). Plugins add theirs at runtime through the same registry. */
 export function registerHostRoutes(framework: RendererFramework): void {
-  framework.manager.routes.register({ path: "/", component: DashboardPage, meta: { title: "Dashboard" } }, "host");
-  framework.manager.routes.register({ path: "/plugins", component: PluginsPage, meta: { title: "Plugins", breadcrumb: "Plugins" } }, "host");
+  const routes = framework.manager.routes;
+  routes.register({ path: "/", component: DashboardPage, meta: { title: "Dashboard" } }, "host");
+  // Plugin manager: list \u2192 /plugins/:id (installed) \u2192 /plugins/store/:id (store listing). Each opens in its own screen.
+  registerPluginManagerRoutes(framework);
+  // Settings: sections come from the host and from plugins (Appearance, Language\u2026).
+  routes.register({ path: "/settings", component: SettingsPage, meta: { title: "Settings", breadcrumb: "Settings" } }, "host");
+  routes.register({ path: "/settings/:section", component: SettingsPage, meta: { breadcrumb: (p) => p["section"] ?? "" } }, "host");
 }
 `,
   "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/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/renderer/settings/index.tsx": 'import type { ComponentType } from "react";\nimport { Group, Row, Switch, useSidebar, useT, usePluginFramework, usePlugins, formatShortcut, useOS, type RendererFramework } from "fluxplugin/react";\nimport { APP_NAME } from "../../shared/constants";\n\nfunction GeneralSection() {\n  const t = useT();\n  const { collapsed, setCollapsed } = useSidebar();\n  const plugins = usePlugins();\n  return (\n    <>\n      <Group title={t("settings.about", "About")}>\n        <Row title={t("settings.app", "Application")} right={APP_NAME} />\n        <Row title={t("settings.plugins", "Plugins")} right={`${plugins.filter((p) => p.state === "ready").length} / ${plugins.length}`} />\n        <Row title={t("settings.engine", "Engine")} right={navigator.userAgent.match(/(Electron|Chrome|Firefox|Safari)\\/[\\d.]+/)?.[0] ?? "\u2014"} />\n      </Group>\n      <Group title={t("settings.sidebar", "Sidebar")} footer={t("settings.sidebarHint", "Collapse the sidebar to icons. Shortcut: Ctrl/Cmd+B.")}>\n        <Row title={t("settings.compactSidebar", "Compact sidebar")} right={<Switch checked={collapsed} onChange={setCollapsed} label="Compact sidebar" />} />\n      </Group>\n    </>\n  );\n}\n\nfunction ShortcutsSection() {\n  const fw = usePluginFramework();\n  const os = useOS();\n  const t = useT();\n  const cmds = fw.manager.commands.list().filter((c) => c.keybinding);\n  return (\n    <Group title={t("settings.shortcuts", "Keyboard shortcuts")}>\n      {cmds.length === 0 && <Row title="\u2014" />}\n      {cmds.map((c) => <Row key={c.id} title={c.title} subtitle={c.category} right={<kbd>{formatShortcut(c.keybinding!, os)}</kbd>} />)}\n    </Group>\n  );\n}\n\n/** Host settings sections. Plugins contribute theirs to the same "settings" extension point. */\nexport function registerHostSettings(framework: RendererFramework): void {\n  framework.manager.extensionPoints.contribute(\n    "settings",\n    { sections: [\n      { id: "general", title: "General", icon: "settings", order: 0, component: GeneralSection as ComponentType },\n      { id: "shortcuts", title: "Shortcuts", icon: "command", order: 90, component: ShortcutsSection as ComponentType },\n    ] },\n    "host",\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/** App shell with a fixed sidebar and independently scrollable content. */\nexport function AppShell() {\n  useKeybindings();\n\n  return (\n    <div className="app">\n      {/* Title bar */}\n      <header className="app-titlebar">\n        <TitleBar title={APP_NAME} logo={<PluginSlot name={SLOTS.brandBadges} />} searchPlaceholder="Search commands, pages\u2026" />\n      </header>\n\n      {/* Application body */}\n      <div className="body">\n        {/* Fixed sidebar: never scrolls with the main content (collapses to an icon rail) */}\n        <aside className="app-side">\n          <Sidebar />\n        </aside>\n\n        {/* Only this area scrolls */}\n        <main className="main">\n          <div className="main-inner">\n            <Breadcrumbs />\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 { SidebarNav, type SidebarEntry } from "fluxplugin/react";\n\n// Host entries. Plugins add theirs between the two groups (routes with meta.menu, or menus.register({ location: "sidebar" })),\n// including sub-menus: `meta.menu.parent` or `children`. Labels are translated through `menu.<id>`.\nconst top: SidebarEntry[] = [{ id: "dashboard", label: "Dashboard", path: "/", icon: "home" }];\nconst bottom: SidebarEntry[] = [\n  { id: "plugins", label: "Plugins", path: "/plugins", icon: "plug" },\n  { id: "settings", label: "Settings", path: "/settings", icon: "settings" },\n];\n\nexport function Sidebar() {\n  return <SidebarNav top={top} bottom={bottom} footer={<span>Ctrl/Cmd+K: commands</span>} />;\n}\n',
+  "src/app/renderer/styles/app.css": "body { margin: 0; }\n.app { display: grid; height: 100vh; grid-template-rows: 40px minmax(0, 1fr); overflow: hidden; }\n.app-titlebar { z-index: 50; min-width: 0; }\n.body { display: grid; min-height: 0; min-width: 0; grid-template-columns: var(--flux-sidebar-w, 232px) minmax(0, 1fr); overflow: hidden; transition: grid-template-columns .18s ease; }\n.app-side { height: 100%; min-height: 0; overflow: hidden; }\n.main { min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 24px 28px; }\n.main-inner { max-width: 900px; margin: 0 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 14px; cursor: pointer; font-weight: 500; }\n.btn:hover { background: var(--flux-surface); }\n.hint { color: var(--flux-muted); font-size: .86em; }\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'
 };
@@ -366,7 +827,7 @@ var HOST_TAILWIND_FILES = {
   <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" />
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self' fluxplugin:; script-src 'self' fluxplugin:; style-src 'self' 'unsafe-inline' fluxplugin:; font-src 'self' data: https: fluxplugin:; connect-src 'self'; img-src 'self' data: blob: https: http: file: fluxplugin:; media-src 'self' blob: data: https: file: fluxplugin:; frame-src https://www.youtube-nocookie.com https://player.vimeo.com https://www.dailymotion.com https://www.loom.com https://streamable.com" />
     <link rel="stylesheet" href="./renderer.css" />
     <link rel="stylesheet" href="./tailwind.css" />
   </head>
@@ -377,9 +838,8 @@ var HOST_TAILWIND_FILES = {
 </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/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..."\n        />\n      </header>\n\n      {/* Application body (the sidebar width follows --flux-sidebar-w: it collapses to an icon rail) */}\n      <div className="body grid min-h-0 min-w-0 grid-cols-[var(--flux-sidebar-w,232px)_minmax(0,1fr)] overflow-hidden transition-[grid-template-columns] duration-200">\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/styles/app.css": "body { margin: 0; }\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'
 };
 
@@ -390,7 +850,16 @@ 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", release: "fluxplugin publish" },
+    scripts: {
+      dev: "fluxplugin dev",
+      "dev:host": "fluxplugin dev --host ../my-app   # run it inside your app while you work (edit the path)",
+      build: "fluxplugin build",
+      package: "fluxplugin package",
+      validate: "fluxplugin validate",
+      release: "fluxplugin publish"
+    },
+    // Add any library here (react-markdown, chart.js, a UI kit…): it is bundled into dist/, the host app does not need it.
+    dependencies: {},
     devDependencies: { fluxplugin: "^1.0.0", "@types/react": "^19.0.0", react: "^19.0.0", typescript: "^5.6.0" }
   },
   null,
@@ -658,6 +1127,28 @@ function withTailwind(files, v) {
   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;
 }
+function standaloneExtras(v) {
+  return {
+    ".gitignore": "node_modules\ndist\n*.tgz\n.DS_Store\n",
+    "CONTRIBUTING.md": `# Developing ${v.name}
+
+This is a normal React + TypeScript project. It has its own \`package.json\` and its own libraries.
+
+\`\`\`bash
+npm install                       # your libraries + fluxplugin tooling
+npm install chart.js              # add anything you need: it is bundled into dist/, the app never needs it
+npm run dev                       # rebuilds on save
+npm run dev:host                  # same, and copies the result into a host app (edit the path) which hot-reloads it
+npm run build                     # dist/ \u2014 this is all that ships (no src/, no .ts, no sourcemaps)
+npm run package                   # ${v.id}-1.0.0.tgz
+npm run release                   # publish to the plugin store (GitHub)
+\`\`\`
+
+**Shared with the host** (never bundled twice): \`react\`, \`react-dom\`, \`fluxplugin\`, \`fluxplugin/react\`. Everything else you import is yours.
+CSS imported in the renderer (including from libraries) is emitted as \`dist/renderer.css\` and loaded automatically; images and fonts are inlined.
+`
+  };
+}
 
 // src/cli/host-templates.ts
 function hostFiles(v, withSample = true) {
@@ -669,16 +1160,21 @@ function hostFiles(v, withSample = true) {
         private: true,
         type: "module",
         main: "dist/main.cjs",
+        description: `${v.name} \u2014 built with fluxplugin`,
+        author: "Your name",
         scripts: {
           dev: "fluxplugin dev",
           "dev:web": "fluxplugin dev --web",
           build: "fluxplugin build",
           start: "fluxplugin start",
+          dist: "fluxplugin dist",
+          "export:web": "fluxplugin export",
+          "plugins:package": "fluxplugin package --all",
           "plugin:new": "fluxplugin plugin new",
           typecheck: "tsc --noEmit"
         },
         dependencies: { fluxplugin: v.fluxSpec, react: "^19.0.0", "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" } : {} },
+        devDependencies: { electron: v.electron ?? "^44.5.1", "electron-builder": "^26.0.0", 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"] }
@@ -687,7 +1183,7 @@ function hostFiles(v, withSample = true) {
       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),
+    "fluxplugin.config.json": JSON.stringify({ pluginsDir: "plugins", outDir: "dist", stores: v.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, resolveJsonModule: true, lib: ["ES2022", "DOM", "DOM.Iterable"], types: ["node"] }, include: ["src"] },
       null,
@@ -696,7 +1192,7 @@ function hostFiles(v, withSample = true) {
     ".gitignore": "node_modules\ndist\n.flux-data\n*.tgz\n",
     "README.md": readme2(v.name)
   };
-  for (const [rel, content] of Object.entries(HOST_APP_FILES)) files[rel] = content.split("__APP_NAME__").join(v.name);
+  for (const [rel, content] of Object.entries(HOST_APP_FILES)) files[rel] = content.split("__APP_NAME__").join(v.name).split("__APP_ID__").join(v.name.replace(/[^a-z0-9]/gi, ""));
   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"));
@@ -914,6 +1410,136 @@ async function storeAdd(pkgFile, dir, baseUrl) {
   await fs6.writeFile(idxFile, JSON.stringify(idx, null, 2));
   return { id: m.id, version: m.version, sha256 };
 }
+async function storeBuild(dir, opts = {}) {
+  const log2 = opts.log ?? console.log;
+  const root = path7.resolve(dir);
+  const pluginsRel = opts.pluginsDir ?? (await fs6.stat(path7.join(root, "plugins")).catch(() => null) ? "plugins" : ".");
+  const base = path7.join(root, pluginsRel);
+  const out = path7.resolve(opts.out ?? path7.join(root, INDEX));
+  const plugins = [];
+  const tmpRoot = await fs6.mkdtemp(path7.join((await import("node:os")).tmpdir(), "flux-store-"));
+  try {
+    for (const name of (await fs6.readdir(base)).sort()) {
+      const folder = path7.join(base, name);
+      let raw;
+      try {
+        raw = JSON.parse(await fs6.readFile(path7.join(folder, "plugin.json"), "utf8"));
+      } catch {
+        continue;
+      }
+      const v = validateManifest(raw);
+      if (!v.manifest) {
+        log2(`! skipped ${name}: ${v.issues.map((i) => `${i.path}: ${i.message}`).join("; ")}`);
+        continue;
+      }
+      const m = v.manifest;
+      const stage = path7.join(tmpRoot, name);
+      const files = (await copyPluginRuntime(folder, stage)).sort();
+      const hashes = {};
+      for (const f of files) hashes[f] = crypto2.createHash("sha256").update(await fs6.readFile(path7.join(stage, f))).digest("hex");
+      const rel = (p) => p ? p.replace(/^\.\//, "") : void 0;
+      const relFolder = path7.relative(root, folder).split(path7.sep).join("/") + "/";
+      const readme3 = await fs6.readFile(path7.join(folder, rel(m.readme) ?? "README.md"), "utf8").then((s) => s.slice(0, 2e4), () => void 0);
+      plugins.push({
+        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 ?? [],
+        folder: relFolder,
+        files,
+        hashes,
+        homepage: m.homepage,
+        license: m.license,
+        icon: m.icon ? relFolder + rel(m.icon) : void 0,
+        banner: m.banner ? relFolder + rel(m.banner) : void 0,
+        screenshots: (m.screenshots ?? []).map((s) => relFolder + rel(s)),
+        video: m.video?.startsWith("./") ? relFolder + rel(m.video) : m.video,
+        categories: m.categories,
+        keywords: m.keywords,
+        links: m.links,
+        readme: readme3
+      });
+      log2(`  ${m.id}@${m.version}  (${files.length} files)`);
+    }
+  } finally {
+    await fs6.rm(tmpRoot, { recursive: true, force: true });
+  }
+  await fs6.writeFile(out, JSON.stringify({ plugins }, null, 2));
+  return { count: plugins.length, file: out };
+}
+
+// src/cli/dist.ts
+import { spawn as spawn2 } from "node:child_process";
+import { existsSync as existsSync3, promises as fs7 } from "node:fs";
+import { createRequire as createRequire2 } from "node:module";
+import path8 from "node:path";
+async function pluginFolders(dir) {
+  const out = [];
+  for (const n of (await fs7.readdir(dir).catch(() => [])).sort()) if (existsSync3(path8.join(dir, n, "plugin.json"))) out.push(path8.join(dir, n));
+  return out;
+}
+async function stagePlugins(cwd, outDir, log2 = console.log) {
+  const cfg = await loadConfig({}, cwd);
+  await fs7.rm(outDir, { recursive: true, force: true });
+  const dirs = await pluginFolders(cfg.pluginsDir);
+  for (const d of dirs) {
+    const files = await copyPluginRuntime(d, path8.join(outDir, path8.basename(d)));
+    log2(`  ${path8.basename(d)}: ${files.length} runtime files`);
+  }
+  await fs7.mkdir(outDir, { recursive: true });
+  return dirs.length;
+}
+async function distApp(cwd, opts = {}) {
+  const log2 = opts.log ?? console.log;
+  log2("1/3 building the app\u2026");
+  await buildHost(cwd, { log: log2 });
+  log2("2/3 staging plugins (runtime files only)\u2026");
+  const n = await stagePlugins(cwd, path8.join(cwd, ".flux-build/plugins"), log2);
+  log2(`3/3 packaging (${n} plugin(s) bundled)\u2026`);
+  let cli;
+  try {
+    const pj = createRequire2(path8.join(cwd, "package.json")).resolve("electron-builder/package.json");
+    const bin = JSON.parse(await fs7.readFile(pj, "utf8")).bin;
+    cli = path8.join(path8.dirname(pj), typeof bin === "string" ? bin : bin?.["electron-builder"] ?? "cli.js");
+  } catch {
+    throw new Error('electron-builder is not installed: run "npm install -D electron-builder"');
+  }
+  const args = [cli, "--config", existsSync3(path8.join(cwd, "electron-builder.yml")) ? "electron-builder.yml" : "package.json"];
+  if (opts.dir) args.push("--dir");
+  for (const t of ["win", "mac", "linux"]) if (opts[t]) args.push(`--${t}`);
+  return await new Promise((resolve) => {
+    const child = spawn2(process.execPath, args, { cwd, stdio: "inherit", env: { ...process.env, CSC_IDENTITY_AUTO_DISCOVERY: process.env["CSC_IDENTITY_AUTO_DISCOVERY"] ?? "false" } });
+    child.on("exit", (c) => resolve(c ?? 1));
+  });
+}
+async function exportWebsite(cwd, outDir, log2 = console.log) {
+  await buildHost(cwd, { log: log2 });
+  const out = path8.resolve(outDir);
+  await fs7.rm(out, { recursive: true, force: true });
+  await fs7.mkdir(out, { recursive: true });
+  for (const f of ["index.html", "renderer.js", "renderer.css", "tailwind.css"]) if (existsSync3(path8.join(cwd, "dist", f))) await fs7.copyFile(path8.join(cwd, "dist", f), path8.join(out, f));
+  const cfg = await loadConfig({}, cwd);
+  let count = 0;
+  for (const d of await pluginFolders(cfg.pluginsDir)) {
+    const id = JSON.parse(await fs7.readFile(path8.join(d, "plugin.json"), "utf8")).id;
+    await copyPluginRuntime(d, path8.join(out, "plugins", id));
+    count++;
+  }
+  const tmp = await fs7.mkdtemp(path8.join((await import("node:os")).tmpdir(), "flux-export-"));
+  try {
+    const fw = new MainFramework({ pluginDirs: [path8.join(out, "plugins")], dataDir: tmp, assetUrl: (id, rel) => `./plugins/${id}/${rel.replace(/^\.\//, "")}` });
+    await fw.manager.init();
+    await fw.scan();
+    await fs7.writeFile(path8.join(out, "bootstrap.json"), JSON.stringify(fw.bootstrap(), null, 2));
+  } finally {
+    await fs7.rm(tmp, { recursive: true, force: true });
+  }
+  await fs7.writeFile(path8.join(out, "README.txt"), "Static export. Serve this folder over HTTP(S) (e.g. `npx serve .`); opening index.html from disk will not work.\nOnly the browser side runs here: plugins that need main-process code are listed but their IPC calls fail.\n");
+  log2(`exported ${count} plugin(s) \u2192 ${out}`);
+  return { plugins: count, out };
+}
 
 // src/cli/cli.ts
 var HELP = `fluxplugin <command>
@@ -923,26 +1549,31 @@ var HELP = `fluxplugin <command>
   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] [--tailwindcss]   scaffold a plugin (alias: create)
+  dist [--win|--mac|--linux] [--unpacked]   build the app into an installer/executable (electron-builder)
+  export [--out website]          extract the app as a static website
+  plugin new <name> [-t basic|dashboard|backend] [--tailwindcss] [--standalone]   scaffold a plugin (its own project when outside an app)
+  dev --host <app>                (in a plugin project) rebuild on save and sync into a host app that hot-reloads it
   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
+  store build [dir] [--out index.json]            build the catalog JSON from plugin folders (repo layout)
+  package --all [--out release/plugins]           package every plugin of the app
   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 fs7.readFile(path8.join(root, "plugin.json"), "utf8"));
+  return JSON.parse(await fs8.readFile(path9.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" }, tailwindcss: { type: "boolean" }, repo: { type: "string" }, token: { type: "string" }, "dry-run": { type: "boolean" }, "base-url": { type: "string" } }
+    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" }, all: { type: "boolean" }, win: { type: "boolean" }, mac: { type: "boolean" }, linux: { type: "boolean" }, unpacked: { type: "boolean" }, store: { type: "string" }, host: { type: "string" }, standalone: { type: "boolean" } }
   });
   let [cmd, arg] = pos;
   if (cmd === "store") {
@@ -956,20 +1587,20 @@ async function run(argv) {
     arg = pos[2];
   }
   if (!cmd || f.help) return log(HELP), cmd ? 0 : 1;
-  const root = path8.resolve(arg ?? ".");
+  const root = path9.resolve(arg ?? ".");
   try {
     switch (cmd) {
       case "init": {
-        const target = path8.resolve(arg ?? ".");
-        const entries = await fs7.readdir(target).catch(() => []);
+        const target = path9.resolve(arg ?? ".");
+        const entries = await fs8.readdir(target).catch(() => []);
         if (entries.length) throw new Error(`${target} is not empty`);
-        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"]);
+        const name = (f.name ?? path9.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, stores: parseStoreSpec(f.store) }, !f["no-sample"]);
         for (const [rel2, content] of Object.entries(files)) {
-          await fs7.mkdir(path8.dirname(path8.join(target, rel2)), { recursive: true });
-          await fs7.writeFile(path8.join(target, rel2), content);
+          await fs8.mkdir(path9.dirname(path9.join(target, rel2)), { recursive: true });
+          await fs8.writeFile(path9.join(target, rel2), content);
         }
-        const rel = path8.relative(process.cwd(), target) || ".";
+        const rel = path9.relative(process.cwd(), target) || ".";
         log(`\u2714 created ${name} in ${target}
 
 Next steps:
@@ -985,17 +1616,19 @@ 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()) && !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));
+        const inHost = await isHostProject(process.cwd());
+        const standalone = !!f.standalone || !inHost;
+        const base = inHost && !f.standalone && !path9.isAbsolute(arg) && !arg.includes("/") && !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 vars = varsFromName(path9.basename(base));
         let files = TEMPLATES[tpl](vars);
         if (f.tailwindcss) files = withTailwind(files, vars);
+        if (standalone) files = { ...files, ...standaloneExtras(vars) };
         for (const [rel, content] of Object.entries(files)) {
-          await fs7.mkdir(path8.dirname(path8.join(base, rel)), { recursive: true });
-          await fs7.writeFile(path8.join(base, rel), content);
+          await fs8.mkdir(path9.dirname(path9.join(base, rel)), { recursive: true });
+          await fs8.writeFile(path9.join(base, rel), content);
         }
-        log(`\u2714 created ${tpl} plugin in ${base}
-  next: fluxplugin build ${path8.relative(process.cwd(), base)}`);
+        log(`\u2714 created ${tpl} plugin in ${base}${standalone ? "\n\n  cd " + path9.relative(process.cwd(), base) + "\n  npm install\n  npm run dev:host    # run it inside your app while you work (edit the path in package.json)" : "\n  next: fluxplugin build " + path9.relative(process.cwd(), base)}`);
         return 0;
       }
       case "build": {
@@ -1010,6 +1643,7 @@ Add a plugin:  npm run plugin:new my-plugin -- -t backend`);
         const cwd = process.cwd();
         if (arg || !await isHostProject(cwd)) {
           await buildPlugin(root, true);
+          if (f.host) await linkPluginToHost(root, path9.resolve(f.host));
           await new Promise(() => {
           });
         }
@@ -1027,7 +1661,7 @@ Add a plugin:  npm run plugin:new my-plugin -- -t backend`);
       }
       case "start": {
         const cwd = process.cwd();
-        if (!await fs7.stat(path8.join(cwd, "dist/index.html")).catch(() => null)) throw new Error("nothing built yet: run `fluxplugin build` first");
+        if (!await fs8.stat(path9.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)));
       }
@@ -1035,8 +1669,32 @@ Add a plugin:  npm run plugin:new my-plugin -- -t backend`);
         return await doctor(process.cwd());
       case "validate":
         return await validate(root);
-      case "package":
-        return await packagePlugin(root, { out: f.out, signKey: f["sign-key"] }), 0;
+      case "package": {
+        if (f.all) {
+          const cfg = await loadConfig(f);
+          let n = 0;
+          for (const d of (await fs8.readdir(cfg.pluginsDir).catch(() => [])).sort()) {
+            if (!await fs8.stat(path9.join(cfg.pluginsDir, d, "plugin.json")).catch(() => null)) continue;
+            await packagePlugin(path9.join(cfg.pluginsDir, d), { out: f.out ?? "release/plugins", signKey: f["sign-key"] });
+            n++;
+          }
+          log(`\u2714 packaged ${n} plugin(s) in ${f.out ?? "release/plugins"}`);
+          return 0;
+        }
+        await packagePlugin(root, { out: f.out, signKey: f["sign-key"] });
+        return 0;
+      }
+      case "dist":
+        return await distApp(process.cwd(), { win: f.win, mac: f.mac, linux: f.linux, dir: f.unpacked });
+      case "export":
+        await exportWebsite(process.cwd(), f.out ?? "website");
+        return 0;
+      case "store:build": {
+        const r = await storeBuild(path9.resolve(arg ?? "."), { out: f.out });
+        log(`\u2714 catalog with ${r.count} plugin(s) written to ${r.file}
+  commit it with the plugin folders; point a store at the repo: { "type": "github", "repo": "owner/name" }`);
+        return 0;
+      }
       case "publish":
         await publishPlugin(root, { repo: f.repo, token: f.token, signKey: f["sign-key"], dryRun: f["dry-run"] });
         return 0;
@@ -1053,31 +1711,31 @@ Add a plugin:  npm run plugin:new my-plugin -- -t backend`);
         return 0;
       }
       case "store:init":
-        await storeInit(path8.resolve(arg ?? "store"));
-        log(`\u2714 store created in ${path8.resolve(arg ?? "store")} (see its README.md)`);
+        await storeInit(path9.resolve(arg ?? "store"));
+        log(`\u2714 store created in ${path9.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`);
+        const r = await storeAdd(path9.resolve(arg), path9.resolve(f.dir ?? "store"), f["base-url"]);
+        log(`\u2714 added ${r.id}@${r.version} to ${path9.resolve(f.dir ?? "store")}/index.json`);
         return 0;
       }
       case "keygen": {
         const k = generateSigningKeyPair();
         const base = f.out ?? "flux-signing";
-        await fs7.writeFile(`${base}.private.key`, k.privateKey, { mode: 384 });
-        await fs7.writeFile(`${base}.public.key`, k.publicKey);
+        await fs8.writeFile(`${base}.private.key`, k.privateKey, { mode: 384 });
+        await fs8.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 fs7.readdir(cfg.pluginsDir).catch(() => [])).sort();
-        const lines = names.map((n) => `@source "${path8.join(cfg.pluginsDir, n, "src").replace(/\\/g, "/")}";`);
+        const names = (await fs8.readdir(cfg.pluginsDir).catch(() => [])).sort();
+        const lines = names.map((n) => `@source "${path9.join(cfg.pluginsDir, n, "src").replace(/\\/g, "/")}";`);
         const css = `/* generated by fluxplugin tailwind */
 ${lines.join("\n")}
 `;
-        if (f.out) await fs7.writeFile(f.out, css);
+        if (f.out) await fs8.writeFile(f.out, css);
         else log(css);
         return 0;
       }
@@ -1104,7 +1762,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 fs7.stat(path8.join(root, rel)).catch(() => null)) log(`\u2716 missing file ${rel} (run build)`), bad = true;
+      if (!await fs8.stat(path9.join(root, rel)).catch(() => null)) log(`\u2716 missing file ${rel} (run build)`), bad = true;
     try {
       await verifyPlugin(root, raw, v.manifest);
     } catch (e) {
@@ -1117,17 +1775,17 @@ async function validate(root) {
 }
 async function manage(cmd, arg, f) {
   const cfg = await loadConfig(f);
-  const state = new JsonStateFile(path8.join(cfg.dataDir, "plugins-state.json"));
-  const inst = new PluginInstaller(cfg.pluginsDir, path8.join(cfg.dataDir, "backups"));
+  const state = new JsonStateFile(path9.join(cfg.dataDir, "plugins-state.json"));
+  const inst = new PluginInstaller(cfg.pluginsDir, path9.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)) {
+  if (cmd === "install" && arg && !arg.endsWith(".tgz") && !await fs8.stat(arg).catch(() => null)) {
     const [id, version] = arg.split("@");
-    const store = new PluginInstaller(cfg.pluginsDir, path8.join(cfg.dataDir, "backups"), createRegistries(cfg.stores));
+    const store = new PluginInstaller(cfg.pluginsDir, path9.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];
@@ -1137,16 +1795,16 @@ async function manage(cmd, arg, f) {
     return 0;
   }
   if (cmd === "install") {
-    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 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 readManifest(tmp));
     if (!v.manifest) throw new Error("invalid plugin: " + v.issues.map((i) => i.message).join("; "));
-    const reg = new LocalRegistry(path8.dirname(tmp), "cli");
+    const reg = new LocalRegistry(path9.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 fs7.rm(tmp, { recursive: true, force: true });
+    await fs8.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);
@@ -1160,7 +1818,7 @@ async function manage(cmd, arg, f) {
 async function ownVersion() {
   for (const rel of ["../package.json", "../../package.json"]) {
     try {
-      const j = JSON.parse(await fs7.readFile(new URL(rel, import.meta.url), "utf8"));
+      const j = JSON.parse(await fs8.readFile(new URL(rel, import.meta.url), "utf8"));
       if (j.name === "fluxplugin" && j.version) return j.version;
     } catch {
     }
@@ -1186,23 +1844,30 @@ async function doctor(cwd) {
     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}
+  e.bin ? ok(`Electron binary: ${path9.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);
+  const hasTw = await fs8.stat(path9.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(() => "{}"));
+  const pkg2 = JSON.parse(await fs8.readFile(path9.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;
 }
+function parseStoreSpec(spec) {
+  if (!spec) return void 0;
+  const gh = /^github:([\w.-]+\/[\w.-]+)$/.exec(spec);
+  if (gh) return [{ type: "github", repo: gh[1] }];
+  if (/^https:\/\/\S+$/.test(spec)) return [spec.toLowerCase().split("?")[0].endsWith(".json") ? { type: "json", url: spec } : { type: "http", url: spec }];
+  throw new Error('--store must be "github:owner/repo" or an https URL (a .json link, or a folder URL ending with /)');
+}
 export {
   SHARED_MODULES,
   TEMPLATES,
@@ -1212,6 +1877,7 @@ export {
   isHostProject,
   run,
   sharedModulesPlugin,
+  standaloneExtras,
   startApp,
   varsFromName,
   withTailwind