fluxplugin 1.0.1 → 1.0.3

package/dist/browser/manager-ui.js

@@ -1,13 +1,15 @@
 import {
+  Icon,
+  Markdown,
   PluginSlot,
   usePluginFramework,
   usePlugins
-} from "./chunks/chunk-ZZ25CRMR.js";
-import "./chunks/chunk-Q75AOCXD.js";
+} from "./chunks/chunk-VXQJIDXW.js";
+import "./chunks/chunk-TL63576R.js";
 
 // src/manager-ui/index.tsx
 import { useCallback, useEffect, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+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}
@@ -38,32 +40,76 @@ function ConfigForm({ id }) {
     /* @__PURE__ */ jsx("button", { onClick: () => client.configReset(id).then(setValues), children: "Reset to defaults" })
   ] });
 }
+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 }) {
   const { client } = usePluginFramework();
   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", justifyContent: "space-between" }, children: [
-      /* @__PURE__ */ jsxs("strong", { children: [
-        p.name,
+    /* @__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" })
     ] }),
+    /* @__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))
+    ] }),
+    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("strong", { children: "Permissions" }),
+    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"
+      ] })
+    ] }),
+    !!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);
@@ -84,16 +130,27 @@ function Details({ p, onClose }) {
     ] }),
     /* @__PURE__ */ jsx(ConfigForm, { id: p.id }),
     /* @__PURE__ */ jsx(PluginSlot, { name: "manager.plugin.details", props: { plugin: p } }),
-    /* @__PURE__ */ jsx("strong", { children: "Logs" }),
-    /* @__PURE__ */ jsx("pre", { children: logs.map((l) => `${new Date(l.time).toLocaleTimeString()} ${l.level.toUpperCase()} ${l.message}`).join("\n") || "no logs" })
+    /* @__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: "" }) })
   ] });
 }
+function PluginIconLazy({ id }) {
+  const { client } = usePluginFramework();
+  const [url, setUrl] = useState();
+  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);
@@ -106,12 +163,21 @@ function PluginManagerUI() {
     }
   }, []);
   useEffect(() => {
-    if (tab === "available") client.search().then(setAvail).catch(() => setAvail([]));
-    if (tab === "updates") client.updates().then(setAvail).catch(() => setAvail([]));
+    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));
+    return () => {
+      live = false;
+    };
   }, [client, tab]);
   const selected = plugins.find((p) => p.id === sel);
   return /* @__PURE__ */ jsxs("div", { className: "fluxm", children: [
-    /* @__PURE__ */ jsx("style", { children: css }),
+    /* @__PURE__ */ jsxs("style", { children: [
+      css,
+      css2
+    ] }),
     /* @__PURE__ */ jsxs("h2", { children: [
       "Plugins ",
       busy && /* @__PURE__ */ jsxs("span", { className: "fluxm-muted", children: [
@@ -121,6 +187,7 @@ function PluginManagerUI() {
     ] }),
     /* @__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 }),
         " ",
@@ -138,24 +205,32 @@ function PluginManagerUI() {
       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" && (avail.length === 0 ? /* @__PURE__ */ jsx("div", { className: "fluxm-muted", children: "Nothing here. Configure a registry in the host." }) : avail.map((e) => /* @__PURE__ */ jsxs("div", { className: "fluxm-row", children: [
+    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: [
-          e.description,
-          " \xB7 permissions: ",
-          e.permissions.join(", ") || "none"
+          "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))),
+    ] }, e.id + e.version)),
     selected && /* @__PURE__ */ jsx(Details, { p: selected, onClose: () => setSel(void 0) })
   ] });
 }

package/dist/browser/react.js

@@ -1,8 +1,12 @@
 import {
+  AppMenuBar,
   Breadcrumbs,
   CommandPalette,
   HttpBridgeError,
+  Icon,
   Link,
+  Markdown,
+  NotificationBell,
   PluginBoundary,
   PluginErrorBoundary,
   PluginProvider,
@@ -11,10 +15,19 @@ import {
   PluginsClient,
   RemoteError,
   RendererFramework,
+  SearchBox,
   StyleHost,
+  ThemeProvider,
+  ThemeSwitcher,
+  TitleBar,
+  ToastHost,
   baseCss,
   buildPluginApis,
   createHttpBridge,
+  declareHostPoints,
+  detectOS,
+  formatShortcut,
+  iconNames,
   installSharedModules,
   navigate,
   useExtensionItems,
@@ -22,6 +35,7 @@ import {
   useLocation,
   useMenu,
   useNavigate,
+  useOS,
   useParams,
   usePlugin,
   usePluginCommand,
@@ -32,14 +46,19 @@ import {
   usePluginRoute,
   usePluginService,
   usePluginState,
-  usePlugins
-} from "./chunks/chunk-ZZ25CRMR.js";
-import "./chunks/chunk-Q75AOCXD.js";
+  usePlugins,
+  useTheme
+} from "./chunks/chunk-VXQJIDXW.js";
+import "./chunks/chunk-TL63576R.js";
 export {
+  AppMenuBar,
   Breadcrumbs,
   CommandPalette,
   HttpBridgeError,
+  Icon,
   Link,
+  Markdown,
+  NotificationBell,
   PluginBoundary,
   PluginErrorBoundary,
   PluginProvider,
@@ -48,10 +67,19 @@ export {
   PluginsClient,
   RemoteError,
   RendererFramework,
+  SearchBox,
   StyleHost,
+  ThemeProvider,
+  ThemeSwitcher,
+  TitleBar,
+  ToastHost,
   baseCss,
   buildPluginApis,
   createHttpBridge,
+  declareHostPoints,
+  detectOS,
+  formatShortcut,
+  iconNames,
   installSharedModules,
   navigate,
   useExtensionItems,
@@ -59,6 +87,7 @@ export {
   useLocation,
   useMenu,
   useNavigate,
+  useOS,
   useParams,
   usePlugin,
   usePluginCommand,
@@ -69,5 +98,6 @@ export {
   usePluginRoute,
   usePluginService,
   usePluginState,
-  usePlugins
+  usePlugins,
+  useTheme
 };