fluxplugin 1.0.2 → 1.0.4

package/dist/browser/manager-ui.js

@@ -1,26 +1,162 @@
 import {
+  Button,
+  Group,
   Icon,
+  Img,
   Markdown,
   PluginSlot,
+  Row,
+  Segmented,
+  Switch,
+  VideoPlayer,
+  navigate,
+  useParams,
+  usePlugin,
   usePluginFramework,
-  usePlugins
-} from "./chunks/chunk-VXQJIDXW.js";
-import "./chunks/chunk-TL63576R.js";
+  usePlugins,
+  useT
+} from "./chunks/chunk-AV4KI7LI.js";
+import {
+  parseVideo
+} from "./chunks/chunk-OAYWYU5O.js";
 
 // src/manager-ui/index.tsx
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var css = `.fluxm{font:14px system-ui;color:var(--flux-fg,#0f172a)}.fluxm h2{margin:0 0 12px}.fluxm-tabs{display:flex;gap:6px;margin-bottom:12px}
-.fluxm button{cursor:pointer;border:1px solid var(--flux-border,#e2e8f0);background:var(--flux-surface,#f8fafc);color:inherit;border-radius:8px;padding:5px 10px}
-.fluxm button.on{background:var(--flux-accent,#4f46e5);color:#fff;border-color:transparent}.fluxm button.danger{color:#dc2626}
-.fluxm-row{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--flux-border,#e2e8f0);border-radius:10px;margin-bottom:8px}
-.fluxm-grow{flex:1;min-width:0}.fluxm-muted{color:var(--flux-muted,#64748b);font-size:12px}
-.fluxm-badge{font-size:11px;padding:1px 8px;border-radius:99px;background:#e2e8f0;color:#334155}.fluxm-ready{background:#dcfce7;color:#166534}.fluxm-error{background:#fee2e2;color:#991b1b}.fluxm-disabled{background:#f1f5f9;color:#64748b}
-.fluxm-panel{border:1px solid var(--flux-border,#e2e8f0);border-radius:12px;padding:14px;margin-top:12px}.fluxm pre{max-height:180px;overflow:auto;font-size:11px;background:var(--flux-surface,#f8fafc);padding:8px;border-radius:8px}
-.fluxm label{display:flex;gap:8px;align-items:center;margin:6px 0}.fluxm input[type=text],.fluxm input[type=number]{padding:4px 8px;border:1px solid var(--flux-border,#e2e8f0);border-radius:6px}`;
-var badge = (p) => /* @__PURE__ */ jsx("span", { className: `fluxm-badge fluxm-${p.state === "ready" ? "ready" : p.state === "error" ? "error" : p.state === "disabled" ? "disabled" : ""}`, children: p.state });
+var RISKY = /* @__PURE__ */ new Set(["network", "filesystem.read", "filesystem.write", "shell", "database", "clipboard", "window"]);
+var PERMISSIONS = {
+  ipc: ["Talk to the app's background process", "Call and answer background tasks."],
+  services: ["Share and use services", "Offer features to other plugins and use theirs."],
+  events: ["Send and receive events", "React to what happens in the app."],
+  hooks: ["Change how the app behaves", "Intercept, validate or modify operations."],
+  commands: ["Add commands", "Appear in the command palette and menus, with shortcuts."],
+  routes: ["Add pages", "Create its own screens in the app."],
+  menus: ["Add menu entries", "Appear in the menu bar and sidebar."],
+  ui: ["Add interface elements", "Place widgets and buttons in the app."],
+  styles: ["Style the interface", "Add its own look."],
+  storage: ["Save its own data", "Keep settings and data on this device."],
+  notifications: ["Show notifications", "Alert you inside the app."],
+  network: ["Use the network", "Connect to the internet."],
+  "filesystem.read": ["Read files", "Open files on your computer."],
+  "filesystem.write": ["Write files", "Create or change files on your computer."],
+  database: ["Use the database", "Read and write the app's data."],
+  window: ["Control windows", "Open, move or resize windows."],
+  clipboard: ["Use the clipboard", "Copy and paste for you."],
+  shell: ["Run system commands", "Launch programs on your computer."]
+};
+var permInfo = (p) => PERMISSIONS[p] ?? (p.startsWith("x.") ? [`Custom access: ${p.slice(2)}`, "A capability defined by this app."] : [p, ""]);
+var fromDetails = (d, info, assetBase) => ({
+  id: d.id,
+  name: d.name,
+  version: d.version,
+  description: d.description,
+  author: d.author,
+  license: d.license,
+  iconUrl: d.iconUrl,
+  bannerUrl: d.bannerUrl,
+  screenshots: d.screenshotUrls,
+  video: d.video,
+  categories: d.categories,
+  keywords: d.keywords,
+  links: d.links,
+  readme: d.readme,
+  permissions: info.permissions.declared,
+  dependencies: info.dependencies,
+  assetBase,
+  homepage: d.homepage
+});
+var fromEntry = (e) => ({
+  id: e.id,
+  name: e.name,
+  version: e.version,
+  description: e.description,
+  author: e.author,
+  license: e.license,
+  iconUrl: e.iconUrl,
+  bannerUrl: e.bannerUrl,
+  screenshots: e.screenshots ?? [],
+  video: parseVideo(e.video) ?? void 0,
+  categories: e.categories ?? [],
+  keywords: e.keywords ?? [],
+  links: e.links ?? {},
+  readme: e.readme,
+  permissions: e.permissions,
+  dependencies: {},
+  assetBase: e.location,
+  homepage: e.homepage
+});
+var storeCache = [];
+var stateLabel = (p) => p.state === "ready" ? ["Active", "ok"] : p.state === "error" ? ["Error", "err"] : p.state === "disabled" ? ["Disabled", ""] : [p.state, ""];
+function Icon56({ url, base, large }) {
+  return /* @__PURE__ */ jsx(Img, { className: "flux-pm-icon" + (large ? " lg" : ""), src: url, base, alt: "", fallback: /* @__PURE__ */ jsx("span", { className: "flux-pm-icon" + (large ? " lg" : ""), style: { background: "var(--flux-accent)", color: "#fff", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(Icon, { name: "plug", size: large ? 44 : 24 }) }) });
+}
+function useDetails(id) {
+  const { client } = usePluginFramework();
+  const [d, setD] = useState();
+  const info = usePlugin(id);
+  useEffect(() => {
+    let live = true;
+    setD(void 0);
+    client.details(id).then((x) => live && setD(x)).catch(() => void 0);
+    return () => {
+      live = false;
+    };
+  }, [client, id, info?.version]);
+  return { d, info };
+}
+function Facts({ v, extra }) {
+  const items = [["Category", v.categories[0] ?? "Plugin"], ["Version", v.version], ["License", v.license ?? "\u2014"], ["Developer", v.author ?? "\u2014"], ["Access", `${v.permissions.length}`], ...extra ?? []];
+  return /* @__PURE__ */ jsx("div", { className: "flux-pm-facts", children: items.map(([k, val]) => /* @__PURE__ */ jsxs("div", { className: "flux-pm-fact", children: [
+    /* @__PURE__ */ jsx("small", { children: k }),
+    /* @__PURE__ */ jsx("b", { children: val })
+  ] }, k)) });
+}
+function Gallery({ v }) {
+  const [zoom, setZoom] = useState();
+  if (!v.screenshots.length) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("h3", { className: "sec", children: "Preview" }),
+    /* @__PURE__ */ jsx("div", { className: "flux-pm-shots", "data-testid": "plugin-shots", children: v.screenshots.map((u) => /* @__PURE__ */ jsx(Img, { src: u, base: v.assetBase, alt: "screenshot", onClick: () => setZoom(u) }, u)) }),
+    zoom && /* @__PURE__ */ jsx("div", { className: "flux-zoom", onClick: () => setZoom(void 0), children: /* @__PURE__ */ jsx(Img, { src: zoom, base: v.assetBase, alt: "" }) })
+  ] });
+}
+function Body({ v, permissionsSlot }) {
+  const t = useT();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    v.bannerUrl && /* @__PURE__ */ jsx(Img, { className: "flux-pm-banner", src: v.bannerUrl, base: v.assetBase, alt: "" }),
+    /* @__PURE__ */ jsx(Gallery, { v }),
+    v.video && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("h3", { className: "sec", children: t("plugins.video", "Video") }),
+      /* @__PURE__ */ jsx(VideoPlayer, { video: v.video, poster: void 0, title: `${v.name} video` })
+    ] }),
+    v.readme && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("h3", { className: "sec", children: t("plugins.about", "About") }),
+      /* @__PURE__ */ jsx("div", { "data-testid": "plugin-readme", children: /* @__PURE__ */ jsx(Markdown, { source: v.readme, baseUrl: v.assetBase }) })
+    ] }),
+    /* @__PURE__ */ jsx("h3", { className: "sec", children: t("plugins.permissions", "Permissions") }),
+    /* @__PURE__ */ jsxs(Group, { footer: t("plugins.permissionsFooter", "Plugins only get what they declare. Risky access is highlighted."), children: [
+      v.permissions.length === 0 && /* @__PURE__ */ jsx(Row, { title: t("plugins.noPermissions", "No special access") }),
+      v.permissions.map((p) => {
+        const [title, desc] = permInfo(p);
+        return /* @__PURE__ */ jsx(Row, { icon: RISKY.has(p) ? "shield" : "check", iconColor: RISKY.has(p) ? "var(--flux-warn)" : "var(--flux-ok)", title: t(`perm.${p}`, title), subtitle: desc, right: permissionsSlot?.(p) ?? (RISKY.has(p) ? /* @__PURE__ */ jsx("span", { className: "flux-pill warn", children: t("plugins.sensitive", "Sensitive") }) : void 0) }, p);
+      })
+    ] }),
+    /* @__PURE__ */ jsx("h3", { className: "sec", children: t("plugins.information", "Information") }),
+    /* @__PURE__ */ jsxs(Group, { children: [
+      /* @__PURE__ */ jsx(Row, { title: t("plugins.developer", "Developer"), right: v.author ?? "\u2014" }),
+      /* @__PURE__ */ jsx(Row, { title: t("plugins.version", "Version"), right: v.version }),
+      /* @__PURE__ */ jsx(Row, { title: t("plugins.license", "License"), right: v.license ?? "\u2014" }),
+      /* @__PURE__ */ jsx(Row, { title: "ID", right: /* @__PURE__ */ jsx("code", { children: v.id }) }),
+      Object.keys(v.dependencies).length > 0 && /* @__PURE__ */ jsx(Row, { title: t("plugins.dependencies", "Requires"), right: Object.entries(v.dependencies).map(([k, r]) => `${k} ${r}`).join(", ") }),
+      v.keywords.length > 0 && /* @__PURE__ */ jsx(Row, { title: t("plugins.keywords", "Keywords"), right: v.keywords.join(", ") }),
+      Object.entries(v.links).map(([k, u]) => /* @__PURE__ */ jsx(Row, { icon: "external", iconColor: "var(--flux-muted)", title: k[0].toUpperCase() + k.slice(1), right: /* @__PURE__ */ jsx("a", { href: u, target: "_blank", rel: "noopener noreferrer", children: new URL(u).hostname }) }, k)),
+      v.homepage && /* @__PURE__ */ jsx(Row, { icon: "external", iconColor: "var(--flux-muted)", title: "Source", right: /* @__PURE__ */ jsx("a", { href: v.homepage, target: "_blank", rel: "noopener noreferrer", children: new URL(v.homepage).hostname }) })
+    ] })
+  ] });
+}
 function ConfigForm({ id }) {
   const { client } = usePluginFramework();
+  const t = useT();
   const [schema, setSchema] = useState(null);
   const [values, setValues] = useState({});
   const [msg, setMsg] = useState("");
@@ -29,212 +165,277 @@ function ConfigForm({ id }) {
     client.configGet(id).then(setValues).catch(() => void 0);
   }, [client, id]);
   if (!schema?.properties) return null;
-  const save = (patch) => client.configSet(id, patch).then((v) => (setValues(v), setMsg("Saved"))).catch((e) => setMsg(String(e.message)));
-  return /* @__PURE__ */ jsxs("div", { className: "fluxm-panel", children: [
-    /* @__PURE__ */ jsx("strong", { children: "Settings" }),
-    Object.entries(schema.properties).map(([k, d]) => /* @__PURE__ */ jsxs("label", { children: [
-      /* @__PURE__ */ jsx("span", { style: { minWidth: 120 }, children: d.title ?? k }),
-      d.type === "boolean" ? /* @__PURE__ */ jsx("input", { type: "checkbox", checked: !!values[k], onChange: (e) => save({ [k]: e.target.checked }) }) : d.type === "enum" ? /* @__PURE__ */ jsx("select", { value: values[k] ?? "", onChange: (e) => save({ [k]: e.target.value }), children: d.enum?.map((o) => /* @__PURE__ */ jsx("option", { children: String(o) }, String(o))) }) : /* @__PURE__ */ jsx("input", { type: d.type === "number" ? "number" : "text", value: values[k] ?? "", onChange: (e) => setValues({ ...values, [k]: d.type === "number" ? Number(e.target.value) : e.target.value }), onBlur: () => save({ [k]: values[k] }) })
-    ] }, k)),
-    /* @__PURE__ */ jsx("div", { className: "fluxm-muted", children: msg }),
-    /* @__PURE__ */ jsx("button", { onClick: () => client.configReset(id).then(setValues), children: "Reset to defaults" })
+  const save = (patch) => client.configSet(id, patch).then((v) => (setValues(v), setMsg(t("plugins.saved", "Saved")))).catch((e) => setMsg(e.message));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("h3", { className: "sec", children: t("plugins.settings", "Settings") }),
+    /* @__PURE__ */ jsxs(Group, { footer: msg || void 0, children: [
+      Object.entries(schema.properties).map(([k, d]) => /* @__PURE__ */ jsx(Row, { title: d.title ?? k, subtitle: d.description, right: d.type === "boolean" ? /* @__PURE__ */ jsx(Switch, { checked: !!values[k], onChange: (v) => void save({ [k]: v }), label: d.title ?? k }) : d.type === "enum" ? /* @__PURE__ */ jsx("select", { className: "flux-select", value: values[k] ?? "", onChange: (e) => void save({ [k]: e.target.value }), children: d.enum?.map((o) => /* @__PURE__ */ jsx("option", { children: String(o) }, String(o))) }) : /* @__PURE__ */ jsx("input", { className: "flux-input", style: { width: 160 }, type: d.type === "number" ? "number" : "text", value: values[k] ?? "", onChange: (e) => setValues({ ...values, [k]: d.type === "number" ? Number(e.target.value) : e.target.value }), onBlur: () => void save({ [k]: values[k] }) }) }, k)),
+      /* @__PURE__ */ jsx(Row, { title: t("plugins.reset", "Reset to defaults"), onClick: () => void client.configReset(id).then(setValues) })
+    ] })
   ] });
 }
-var css2 = `.fluxm-icon{width:40px;height:40px;border-radius:10px;object-fit:cover;background:var(--flux-border);display:inline-flex;align-items:center;justify-content:center;flex:none}
-.fluxm-banner{width:100%;max-height:180px;object-fit:cover;border-radius:10px;margin:8px 0}.fluxm-shots{display:flex;gap:8px;overflow:auto;padding:4px 0}.fluxm-shots img{height:110px;border-radius:8px;border:1px solid var(--flux-border);cursor:zoom-in}
-.fluxm-video{aspect-ratio:16/9;width:100%;max-width:560px;border:0;border-radius:10px;background:#000}.fluxm-chip{display:inline-block;font-size:11px;padding:1px 8px;border-radius:99px;background:var(--flux-surface);border:1px solid var(--flux-border);margin:0 4px 4px 0}
-.fluxm-zoom{position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:9999;cursor:zoom-out}.fluxm-zoom img{max-width:92vw;max-height:90vh;border-radius:10px}
-.fluxm h3{margin:16px 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--flux-muted)}`;
-function PluginIcon({ id, url }) {
-  const [broken, setBroken] = useState(false);
-  return url && !broken ? /* @__PURE__ */ jsx("img", { className: "fluxm-icon", src: url, alt: "", "data-testid": "icon-" + id, onError: () => setBroken(true) }) : /* @__PURE__ */ jsx("span", { className: "fluxm-icon", children: /* @__PURE__ */ jsx(Icon, { name: "plug", size: 20 }) });
-}
-function Details({ p, onClose }) {
+function Logs({ id, state }) {
   const { client } = usePluginFramework();
+  const t = useT();
   const [logs, setLogs] = useState([]);
-  const [d, setD] = useState();
-  const [zoom, setZoom] = useState();
-  useEffect(() => {
-    client.logs(p.id).then(setLogs).catch(() => void 0);
-  }, [client, p.id, p.state]);
   useEffect(() => {
-    setD(void 0);
-    client.details(p.id).then(setD).catch(() => void 0);
-  }, [client, p.id, p.version]);
-  return /* @__PURE__ */ jsxs("div", { className: "fluxm-panel", "data-testid": "plugin-details", children: [
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 12, alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx(PluginIcon, { id: p.id, url: d?.iconUrl }),
-      /* @__PURE__ */ jsxs("div", { className: "fluxm-grow", children: [
-        /* @__PURE__ */ jsx("strong", { children: p.name }),
-        " ",
-        /* @__PURE__ */ jsxs("span", { className: "fluxm-muted", children: [
-          p.id,
-          "@",
-          p.version
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "fluxm-muted", children: [d?.author, d?.license].filter(Boolean).join(" \xB7 ") })
-      ] }),
-      /* @__PURE__ */ jsx("button", { onClick: onClose, children: "Close" })
+    client.logs(id).then(setLogs).catch(() => void 0);
+  }, [client, id, state]);
+  return /* @__PURE__ */ jsxs("details", { style: { marginTop: 26 }, children: [
+    /* @__PURE__ */ jsxs("summary", { style: { cursor: "pointer", fontWeight: 600 }, children: [
+      t("plugins.logs", "Logs"),
+      " (",
+      logs.length,
+      ")"
     ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      d?.categories.map((c) => /* @__PURE__ */ jsx("span", { className: "fluxm-chip", children: c }, c)),
-      d?.keywords.map((c) => /* @__PURE__ */ jsxs("span", { className: "fluxm-chip", children: [
-        "#",
-        c
-      ] }, c))
+    /* @__PURE__ */ jsx("pre", { className: "flux-pre", children: logs.map((l) => `${new Date(l.time).toLocaleTimeString()} ${l.level.toUpperCase()} ${l.message}`).join("\n") || t("plugins.noLogs", "No logs") })
+  ] });
+}
+var back = () => history.length > 1 ? history.back() : navigate("/plugins");
+function PluginDetailsPage() {
+  const t = useT();
+  const { client } = usePluginFramework();
+  const { id = "" } = useParams();
+  const { d, info } = useDetails(id);
+  const [busy, setBusy] = useState("");
+  const run = async (label, fn, after) => {
+    setBusy(label);
+    try {
+      await fn();
+      after?.();
+    } catch (e) {
+      alert(e.message);
+    } finally {
+      setBusy("");
+    }
+  };
+  if (!info) return /* @__PURE__ */ jsxs("div", { className: "flux-pm", children: [
+    /* @__PURE__ */ jsxs("button", { className: "flux-pm-back", onClick: back, children: [
+      /* @__PURE__ */ jsx(Icon, { name: "back", size: 20 }),
+      t("plugins.back", "Plugins")
     ] }),
-    d?.bannerUrl && /* @__PURE__ */ jsx("img", { className: "fluxm-banner", src: d.bannerUrl, alt: "" }),
-    /* @__PURE__ */ jsx("p", { children: p.description }),
-    p.error && /* @__PURE__ */ jsxs("p", { className: "fluxm-error fluxm-badge", children: [
-      p.error.phase,
-      ": ",
-      p.error.message
+    /* @__PURE__ */ jsx("div", { className: "flux-empty", children: t("plugins.notFound", "This plugin is not installed.") })
+  ] });
+  const view = d ? fromDetails(d, info, d.assetBase) : void 0;
+  const [stateText, cls] = stateLabel(info);
+  return /* @__PURE__ */ jsxs("div", { className: "flux-pm", "data-testid": "plugin-details", children: [
+    /* @__PURE__ */ jsxs("button", { className: "flux-pm-back", onClick: back, "data-testid": "plugin-back", children: [
+      /* @__PURE__ */ jsx(Icon, { name: "back", size: 20 }),
+      t("plugins.back", "Plugins")
     ] }),
-    d?.video && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("h3", { children: "Video" }),
-      d.video.embedUrl ? /* @__PURE__ */ jsx("iframe", { className: "fluxm-video", "data-testid": "plugin-video", src: d.video.embedUrl, title: "Plugin video", allow: "encrypted-media; picture-in-picture; fullscreen", sandbox: "allow-scripts allow-same-origin allow-presentation", referrerPolicy: "strict-origin-when-cross-origin", allowFullScreen: true }) : /* @__PURE__ */ jsxs("a", { href: d.video.url, target: "_blank", rel: "noopener noreferrer", children: [
-        /* @__PURE__ */ jsx(Icon, { name: "play" }),
-        " Watch the video"
+    /* @__PURE__ */ jsxs("div", { className: "flux-pm-hero", children: [
+      /* @__PURE__ */ jsx(Icon56, { url: d?.iconUrl, large: true }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h1", { children: info.name }),
+        /* @__PURE__ */ jsxs("div", { className: "by", children: [
+          info.author ?? info.id,
+          " \xB7 ",
+          /* @__PURE__ */ jsx("span", { className: "flux-pill " + cls, children: t(`state.${info.state}`, stateText) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flux-pm-actions", children: [
+          /* @__PURE__ */ jsx(Switch, { checked: info.enabled, label: t("plugins.enable", "Enable"), disabled: !!busy, onChange: (on) => void run(on ? "enabling" : "disabling", () => on ? client.enable(info.id) : client.disable(info.id)) }),
+          /* @__PURE__ */ jsx("span", { style: { color: "var(--flux-muted)" }, children: info.enabled ? t("plugins.enabled", "Enabled") : t("plugins.disabled", "Disabled") }),
+          /* @__PURE__ */ jsx(Button, { size: "sm", onClick: () => void run("reloading", () => client.reload(info.id)), children: t("plugins.reload", "Reload") }),
+          /* @__PURE__ */ jsx(Button, { size: "sm", variant: "destructive", onClick: () => confirm(`${t("plugins.uninstall", "Uninstall")} ${info.name}?`) && void run("uninstalling", () => client.uninstall(info.id), () => navigate("/plugins")), children: t("plugins.uninstall", "Uninstall") }),
+          /* @__PURE__ */ jsx(PluginSlot, { name: "manager.plugin.actions", props: { plugin: info } })
+        ] })
       ] })
     ] }),
-    !!d?.screenshotUrls.length && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("h3", { children: "Screenshots" }),
-      /* @__PURE__ */ jsx("div", { className: "fluxm-shots", "data-testid": "plugin-shots", children: d.screenshotUrls.map((u) => /* @__PURE__ */ jsx("img", { src: u, alt: "screenshot", onClick: () => setZoom(u) }, u)) })
-    ] }),
-    d?.readme && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("h3", { children: "About" }),
-      /* @__PURE__ */ jsx("div", { "data-testid": "plugin-readme", children: /* @__PURE__ */ jsx(Markdown, { source: d.readme }) })
-    ] }),
-    d && Object.keys(d.links).length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("h3", { children: "Links" }),
-      Object.entries(d.links).map(([k, u]) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("a", { href: u, target: "_blank", rel: "noopener noreferrer", children: k }) }, k))
-    ] }),
-    /* @__PURE__ */ jsx("h3", { children: "Permissions" }),
-    p.permissions.declared.length === 0 && /* @__PURE__ */ jsx("div", { className: "fluxm-muted", children: "none requested" }),
-    p.permissions.declared.map((perm) => {
-      const on = p.permissions.granted.includes(perm);
-      return /* @__PURE__ */ jsxs("label", { children: [
-        /* @__PURE__ */ jsx("input", { type: "checkbox", checked: on, onChange: () => on ? client.revoke(p.id, perm) : client.grant(p.id, perm) }),
-        perm
-      ] }, perm);
-    }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("strong", { children: "Dependencies" }),
-      " ",
-      /* @__PURE__ */ jsx("span", { className: "fluxm-muted", children: Object.entries(p.dependencies).map(([k, v]) => `${k} ${v}`).join(", ") || "none" })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("strong", { children: "Required by" }),
-      " ",
-      /* @__PURE__ */ jsx("span", { className: "fluxm-muted", children: p.dependents.join(", ") || "nobody" })
+    info.error && /* @__PURE__ */ jsxs("div", { className: "flux-plugin-error", role: "alert", children: [
+      info.error.phase,
+      ": ",
+      info.error.message
     ] }),
-    /* @__PURE__ */ jsx(ConfigForm, { id: p.id }),
-    /* @__PURE__ */ jsx(PluginSlot, { name: "manager.plugin.details", props: { plugin: p } }),
-    /* @__PURE__ */ jsx("h3", { children: "Logs" }),
-    /* @__PURE__ */ jsx("pre", { children: logs.map((l) => `${new Date(l.time).toLocaleTimeString()} ${l.level.toUpperCase()} ${l.message}`).join("\n") || "no logs" }),
-    zoom && /* @__PURE__ */ jsx("div", { className: "fluxm-zoom", onClick: () => setZoom(void 0), children: /* @__PURE__ */ jsx("img", { src: zoom, alt: "" }) })
+    view && /* @__PURE__ */ jsx(Facts, { v: view, extra: [["Runtime", info.state]] }),
+    /* @__PURE__ */ jsx("p", { style: { fontSize: "1.1em" }, children: info.description }),
+    view ? /* @__PURE__ */ jsx(Body, { v: view, permissionsSlot: (perm) => /* @__PURE__ */ jsx(Switch, { checked: info.permissions.granted.includes(perm), label: perm, onChange: (on) => void (on ? client.grant(info.id, perm) : client.revoke(info.id, perm)) }) }) : /* @__PURE__ */ jsx("div", { className: "flux-loading", children: "\u2026" }),
+    /* @__PURE__ */ jsx(ConfigForm, { id: info.id }),
+    /* @__PURE__ */ jsx(PluginSlot, { name: "manager.plugin.details", props: { plugin: info } }),
+    /* @__PURE__ */ jsx(Logs, { id: info.id, state: info.state })
   ] });
 }
-function PluginIconLazy({ id }) {
+function StorePluginPage() {
+  const t = useT();
   const { client } = usePluginFramework();
-  const [url, setUrl] = useState();
+  const { id = "" } = useParams();
+  const [entry, setEntry] = useState(() => storeCache.find((e) => e.id === id));
+  const [err, setErr] = useState("");
+  const [busy, setBusy] = useState(false);
   useEffect(() => {
-    client.details(id).then((d) => setUrl(d.iconUrl)).catch(() => void 0);
-  }, [client, id]);
-  return /* @__PURE__ */ jsx(PluginIcon, { id, url });
-}
-function PluginManagerUI() {
-  const { client } = usePluginFramework();
-  const plugins = usePlugins();
-  const [tab, setTab] = useState("installed");
-  const [sel, setSel] = useState();
-  const [avail, setAvail] = useState([]);
-  const [storeError, setStoreError] = useState("");
-  const [loadingStore, setLoadingStore] = useState(false);
-  const [busy, setBusy] = useState("");
-  const wrap = useCallback(async (label, fn) => {
-    setBusy(label);
+    if (entry) return;
+    client.search(id).then((r) => setEntry(r.find((e) => e.id === id))).catch((e) => setErr(e.message));
+  }, [client, id, entry]);
+  const install = async () => {
+    if (!entry) return;
+    setBusy(true);
     try {
-      await fn();
+      await (entry.installedVersion ? client.update(entry) : client.install(entry));
+      navigate("/plugins/" + entry.id);
     } catch (e) {
       alert(e.message);
     } finally {
-      setBusy("");
+      setBusy(false);
     }
-  }, []);
+  };
+  if (!entry) return /* @__PURE__ */ jsxs("div", { className: "flux-pm", children: [
+    /* @__PURE__ */ jsxs("button", { className: "flux-pm-back", onClick: back, children: [
+      /* @__PURE__ */ jsx(Icon, { name: "back", size: 20 }),
+      t("plugins.discover", "Discover")
+    ] }),
+    err ? /* @__PURE__ */ jsx("div", { className: "flux-plugin-error", children: err }) : /* @__PURE__ */ jsx("div", { className: "flux-loading", children: "\u2026" })
+  ] });
+  const v = fromEntry(entry);
+  const needsUpdate = !!entry.installedVersion && entry.installedVersion !== entry.version;
+  return /* @__PURE__ */ jsxs("div", { className: "flux-pm", "data-testid": "store-details", children: [
+    /* @__PURE__ */ jsxs("button", { className: "flux-pm-back", onClick: back, "data-testid": "plugin-back", children: [
+      /* @__PURE__ */ jsx(Icon, { name: "back", size: 20 }),
+      t("plugins.discover", "Discover")
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flux-pm-hero", children: [
+      /* @__PURE__ */ jsx(Icon56, { url: v.iconUrl, base: v.assetBase, large: true }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h1", { children: v.name }),
+        /* @__PURE__ */ jsxs("div", { className: "by", children: [
+          v.author ?? v.id,
+          entry.stars ? ` \xB7 \u2605 ${entry.stars}` : "",
+          " \xB7 ",
+          entry.source
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flux-pm-actions", children: [
+          entry.installedVersion && !needsUpdate ? /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: () => navigate("/plugins/" + entry.id), children: t("plugins.open", "Open") }) : /* @__PURE__ */ jsx(Button, { variant: "primary", disabled: busy, onClick: () => void install(), "data-testid": "store-install", children: busy ? "\u2026" : needsUpdate ? t("plugins.update", "Update") : t("plugins.get", "Get") }),
+          entry.installedVersion && /* @__PURE__ */ jsx("span", { style: { color: "var(--flux-muted)" }, children: t("plugins.installedVersion", "Installed: {v}", { v: entry.installedVersion }) })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Facts, { v }),
+    /* @__PURE__ */ jsx("p", { style: { fontSize: "1.1em" }, children: v.description }),
+    /* @__PURE__ */ jsx(Body, { v })
+  ] });
+}
+function PluginsPage() {
+  const t = useT();
+  const { client } = usePluginFramework();
+  const plugins = usePlugins();
+  const [tab, setTab] = useState("installed");
+  const [q, setQ] = useState("");
+  const [entries, setEntries] = useState([]);
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [busy, setBusy] = useState("");
+  const timer = useRef(void 0);
   useEffect(() => {
     if (tab === "installed") return;
     let live = true;
-    setLoadingStore(true);
-    setStoreError("");
-    (tab === "available" ? client.search() : client.updates()).then((e) => live && setAvail(e)).catch((e) => live && (setAvail([]), setStoreError(e.message))).finally(() => live && setLoadingStore(false));
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => {
+      setLoading(true);
+      setError("");
+      (tab === "discover" ? client.search(q || void 0) : client.updates()).then((e) => {
+        if (live) {
+          setEntries(e);
+          if (tab === "discover") storeCache = e;
+        }
+      }).catch((e) => live && (setEntries([]), setError(e.message))).finally(() => live && setLoading(false));
+    }, tab === "discover" && q ? 350 : 0);
     return () => {
       live = false;
     };
-  }, [client, tab]);
-  const selected = plugins.find((p) => p.id === sel);
-  return /* @__PURE__ */ jsxs("div", { className: "fluxm", children: [
-    /* @__PURE__ */ jsxs("style", { children: [
-      css,
-      css2
+  }, [client, tab, q]);
+  const installed = useMemo(() => plugins.filter((p) => !q || `${p.name} ${p.id} ${p.description ?? ""}`.toLowerCase().includes(q.toLowerCase())), [plugins, q]);
+  const act = useCallback(async (e) => {
+    setBusy(e.id);
+    try {
+      await (e.installedVersion ? client.update(e) : client.install(e));
+      setEntries((l) => l.map((x) => x.id === e.id ? { ...x, installedVersion: e.version } : x));
+    } catch (err) {
+      alert(err.message);
+    } finally {
+      setBusy("");
+    }
+  }, [client]);
+  return /* @__PURE__ */ jsxs("div", { className: "flux-pm", "data-testid": "plugins-page", children: [
+    /* @__PURE__ */ jsx("h1", { className: "flux-large-title", children: t("plugins.title", "Plugins") }),
+    /* @__PURE__ */ jsxs("div", { className: "flux-pm-top", children: [
+      /* @__PURE__ */ jsx(Segmented, { value: tab, onChange: setTab, label: "Plugins", options: [{ value: "installed", label: t("plugins.installed", "Installed") }, { value: "discover", label: t("plugins.discover", "Discover") }, { value: "updates", label: t("plugins.updates", "Updates") }] }),
+      /* @__PURE__ */ jsx("input", { className: "flux-input", style: { maxWidth: 260 }, placeholder: t("plugins.search", "Search plugins"), value: q, onChange: (e) => setQ(e.target.value), "aria-label": "Search plugins" })
     ] }),
-    /* @__PURE__ */ jsxs("h2", { children: [
-      "Plugins ",
-      busy && /* @__PURE__ */ jsxs("span", { className: "fluxm-muted", children: [
-        busy,
-        "\u2026"
-      ] })
+    tab === "installed" && /* @__PURE__ */ jsxs(Group, { children: [
+      installed.length === 0 && /* @__PURE__ */ jsx(Row, { title: t("plugins.none", "No plugins installed") }),
+      installed.map((p) => {
+        const [label, cls] = stateLabel(p);
+        return /* @__PURE__ */ jsx("div", { "data-plugin": p.id, children: /* @__PURE__ */ jsx(PluginRow, { p, label, cls }) }, p.id);
+      })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "fluxm-tabs", children: ["installed", "available", "updates"].map((t) => /* @__PURE__ */ jsx("button", { className: tab === t ? "on" : "", onClick: () => setTab(t), children: t[0].toUpperCase() + t.slice(1) }, t)) }),
-    tab === "installed" && plugins.map((p) => /* @__PURE__ */ jsxs("div", { className: "fluxm-row", "data-plugin": p.id, children: [
-      /* @__PURE__ */ jsx(PluginIconLazy, { id: p.id }),
-      /* @__PURE__ */ jsxs("div", { className: "fluxm-grow", children: [
-        /* @__PURE__ */ jsx("strong", { children: p.name }),
+    tab !== "installed" && loading && /* @__PURE__ */ jsx("div", { className: "flux-loading", children: t("plugins.searching", "Searching the plugin stores\u2026") }),
+    tab !== "installed" && error && /* @__PURE__ */ jsx("div", { className: "flux-plugin-error", role: "alert", "data-testid": "store-error", children: error }),
+    tab !== "installed" && !loading && !error && entries.length === 0 && /* @__PURE__ */ jsx("div", { className: "flux-empty", "data-testid": "store-empty", children: tab === "updates" ? t("plugins.upToDate", "Everything is up to date.") : t("plugins.storeEmpty", "No plugins found in your stores.") }),
+    tab !== "installed" && entries.length > 0 && /* @__PURE__ */ jsx(Group, { children: entries.map((e) => {
+      const update = !!e.installedVersion && e.installedVersion !== e.version;
+      return /* @__PURE__ */ jsx("div", { "data-store-entry": e.id, children: /* @__PURE__ */ jsx(
+        Row,
+        {
+          onClick: () => navigate("/plugins/store/" + e.id),
+          chevron: true,
+          icon: /* @__PURE__ */ jsx(Img, { src: e.iconUrl, base: e.location, alt: "", fallback: /* @__PURE__ */ jsx(Icon, { name: "plug", size: 16 }), style: { width: 28, height: 28 } }),
+          iconColor: e.iconUrl ? "transparent" : void 0,
+          title: /* @__PURE__ */ jsxs(Fragment, { children: [
+            e.name,
+            " ",
+            /* @__PURE__ */ jsxs("span", { style: { color: "var(--flux-muted)", fontWeight: 400 }, children: [
+              "v",
+              e.version
+            ] })
+          ] }),
+          subtitle: e.description ?? e.id,
+          right: e.installedVersion && !update ? /* @__PURE__ */ jsx("span", { className: "flux-pill ok", children: t("plugins.installedTag", "Installed") }) : /* @__PURE__ */ jsx(Button, { size: "sm", variant: "primary", disabled: busy === e.id, onClick: () => void act(e), children: busy === e.id ? "\u2026" : update || tab === "updates" ? t("plugins.update", "Update") : t("plugins.get", "Get") })
+        }
+      ) }, e.id + e.version);
+    }) })
+  ] });
+}
+function PluginRow({ p, label, cls }) {
+  const { client } = usePluginFramework();
+  const t = useT();
+  const [url, setUrl] = useState();
+  useEffect(() => {
+    client.details(p.id).then((d) => setUrl(d.iconUrl)).catch(() => void 0);
+  }, [client, p.id, p.version]);
+  return /* @__PURE__ */ jsx(
+    Row,
+    {
+      onClick: () => navigate("/plugins/" + p.id),
+      chevron: true,
+      "data-testid": "row-" + p.id,
+      icon: /* @__PURE__ */ jsx(Img, { src: url, alt: "", fallback: /* @__PURE__ */ jsx(Icon, { name: "plug", size: 16 }), style: { width: 28, height: 28 } }),
+      iconColor: url ? "transparent" : void 0,
+      title: /* @__PURE__ */ jsxs(Fragment, { children: [
+        p.name,
         " ",
-        /* @__PURE__ */ jsxs("span", { className: "fluxm-muted", children: [
+        /* @__PURE__ */ jsxs("span", { style: { color: "var(--flux-muted)", fontWeight: 400 }, children: [
           "v",
           p.version
-        ] }),
-        " ",
-        badge(p),
-        /* @__PURE__ */ jsx("div", { className: "fluxm-muted", children: p.description })
-      ] }),
-      /* @__PURE__ */ jsx(PluginSlot, { name: "manager.plugin.actions", props: { plugin: p } }),
-      /* @__PURE__ */ jsx("button", { onClick: () => setSel(p.id), children: "Details" }),
-      /* @__PURE__ */ jsx("button", { onClick: () => wrap("reloading", () => client.reload(p.id)), children: "Reload" }),
-      p.enabled ? /* @__PURE__ */ jsx("button", { onClick: () => wrap("disabling", () => client.disable(p.id)), children: "Disable" }) : /* @__PURE__ */ jsx("button", { className: "on", onClick: () => wrap("enabling", () => client.enable(p.id)), children: "Enable" }),
-      /* @__PURE__ */ jsx("button", { className: "danger", onClick: () => confirm(`Uninstall ${p.name}?`) && wrap("uninstalling", () => client.uninstall(p.id)), children: "Uninstall" })
-    ] }, p.id)),
-    tab !== "installed" && loadingStore && /* @__PURE__ */ jsx("div", { className: "fluxm-muted", children: "Searching the plugin stores\u2026" }),
-    tab !== "installed" && storeError && /* @__PURE__ */ jsx("div", { className: "fluxm-error fluxm-badge", role: "alert", "data-testid": "store-error", children: storeError }),
-    tab !== "installed" && !loadingStore && !storeError && avail.length === 0 && /* @__PURE__ */ jsx("div", { className: "fluxm-muted", "data-testid": "store-empty", children: tab === "updates" ? "Everything is up to date." : "No plugins found. Plugins published with `fluxplugin publish` appear here; you can add your own store in fluxplugin.config.json." }),
-    tab !== "installed" && avail.map((e) => /* @__PURE__ */ jsxs("div", { className: "fluxm-row", "data-store-entry": e.id, children: [
-      /* @__PURE__ */ jsxs("div", { className: "fluxm-grow", children: [
-        /* @__PURE__ */ jsx("strong", { children: e.name }),
-        " ",
-        /* @__PURE__ */ jsxs("span", { className: "fluxm-muted", children: [
-          "v",
-          e.version,
-          e.stars ? ` \xB7 \u2605 ${e.stars}` : "",
-          " \xB7 ",
-          e.source
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "fluxm-muted", children: e.description }),
-        /* @__PURE__ */ jsxs("div", { className: "fluxm-muted", children: [
-          "asks for: ",
-          e.permissions.join(", ") || "no permissions",
-          e.homepage ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            " \xB7 ",
-            /* @__PURE__ */ jsx("a", { href: e.homepage, target: "_blank", rel: "noopener noreferrer", children: "source" })
-          ] }) : null
         ] })
       ] }),
-      /* @__PURE__ */ jsx("button", { className: "on", onClick: () => wrap("installing", () => tab === "updates" ? client.update(e) : client.install(e)), children: tab === "updates" ? "Update" : "Install" })
-    ] }, e.id + e.version)),
-    selected && /* @__PURE__ */ jsx(Details, { p: selected, onClose: () => setSel(void 0) })
-  ] });
+      subtitle: p.description ?? p.id,
+      right: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "flux-pill " + cls, children: t(`state.${p.state}`, label) }),
+        /* @__PURE__ */ jsx(Switch, { checked: p.enabled, label: p.name, onChange: (on) => void (on ? client.enable(p.id) : client.disable(p.id)) })
+      ] })
+    }
+  );
+}
+function registerPluginManagerRoutes(framework) {
+  const r = framework.manager.routes;
+  r.register({ path: "/plugins", component: PluginsPage, meta: { title: "Plugins", breadcrumb: "Plugins" } }, "host");
+  r.register({ path: "/plugins/:id", component: PluginDetailsPage, meta: { breadcrumb: (p) => p["id"] ?? "" } }, "host");
+  r.register({ path: "/plugins/store/:id", component: StorePluginPage, meta: { breadcrumb: (p) => p["id"] ?? "" } }, "host");
 }
+var PluginManagerUI = PluginsPage;
 export {
   ConfigForm,
-  PluginManagerUI
+  PluginDetailsPage,
+  PluginManagerUI,
+  PluginsPage,
+  StorePluginPage,
+  registerPluginManagerRoutes
 };