fluxplugin 1.0.1 → 1.0.3

package/dist/browser/chunks/{chunk-ZZ25CRMR.js → chunk-VXQJIDXW.js}

@@ -4,8 +4,9 @@ import {
   PluginManager,
   errorMessage,
   normalizePath,
+  s,
   scopeCss
-} from "./chunk-Q75AOCXD.js";
+} from "./chunk-TL63576R.js";
 
 // src/react/runtime.ts
 var RemoteError = class extends Error {
@@ -44,6 +45,7 @@ var PluginsClient = class {
   configReset = (id) => this.call(MGMT.configReset, { id });
   configSchema = (id) => this.call(MGMT.configSchema, { id });
   logs = (id) => this.call(MGMT.logs, { id });
+  details = (id) => this.call(MGMT.details, { id });
   diagnostics = (id) => this.call(MGMT.diagnostics, { id });
 };
 var asDefinition = (mod) => {
@@ -107,6 +109,7 @@ var RendererFramework = class {
       this.bridge.on(MGMT.changed, () => {
         void this.sync().catch((e) => console.error("[fluxplugin] sync failed", e));
       }),
+      this.bridge.on("flux.notification", (n) => void this.manager.notifications.push(n, n?.owner ?? "main")),
       this.bridge.on("flux.event.plugin.hotreload", ({ id } = {}) => void this.hotReload(id))
     );
   }
@@ -422,8 +425,8 @@ function PluginSlot({ name, children, props = {} }) {
 }
 function useExtensionItems(point, key) {
   const fw = usePluginFramework();
-  useRegistryVersion(fw.manager.extensionPoints.subscribe, () => fw.manager.extensionPoints.version);
-  return fw.manager.extensionPoints.items(point, key);
+  const version = useRegistryVersion(fw.manager.extensionPoints.subscribe, () => fw.manager.extensionPoints.version);
+  return useMemo2(() => fw.manager.extensionPoints.items(point, key), [fw, point, key, version]);
 }
 function usePlugin(id) {
   const fw = usePluginFramework();
@@ -459,7 +462,7 @@ function usePluginEvent(name, onEvent) {
     };
     const subs = [fw.manager.events.on(name, (p) => handle(p)), fw.bridge.on(name, handle), fw.bridge.on(`flux.event.${name}`, handle)];
     return () => {
-      subs.forEach((s) => typeof s === "function" ? s() : s.dispose());
+      subs.forEach((s2) => typeof s2 === "function" ? s2() : s2.dispose());
     };
   }, [fw, name]);
   return last;
@@ -487,7 +490,7 @@ function usePluginIPC(endpoint, opts = {}) {
   useEffect2(() => () => void (alive.current = false), []);
   const call = useCallback2(
     async (input) => {
-      setState((s) => ({ ...s, loading: true, error: void 0 }));
+      setState((s2) => ({ ...s2, loading: true, error: void 0 }));
       try {
         const data = await fw.bridge.invoke(name, input, opts.caller);
         if (alive.current) setState({ data, error: void 0, loading: false });
@@ -572,6 +575,7 @@ function useKeybindings(opts = {}) {
   useEffect3(() => {
     if (opts.enabled === false) return;
     const onKey = (e) => {
+      if (e.defaultPrevented) return;
       const target = e.target;
       if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) && !(e.ctrlKey || e.metaKey)) return;
       const parts = [];
@@ -673,6 +677,38 @@ var baseCss = `
 .flux-palette-item.is-active{background:var(--flux-accent);color:var(--flux-accent-fg)}
 .flux-palette-cat{opacity:.65}.flux-palette-empty{padding:14px;color:var(--flux-muted);font-size:14px}
 .flux-palette kbd{font:11px ui-monospace,monospace;padding:2px 6px;border:1px solid currentColor;border-radius:5px;opacity:.7}
+
+:root[data-theme="dark"]{--flux-bg:#0b1020;--flux-fg:#e5e7eb;--flux-muted:#94a3b8;--flux-border:#1f2a44;--flux-surface:#111936}
+:root[data-theme="light"]{--flux-bg:#fff;--flux-fg:#0f172a;--flux-muted:#64748b;--flux-border:#e2e8f0;--flux-surface:#f8fafc}
+.flux-icon{flex:none;vertical-align:middle}
+.flux-titlebar{--flux-titlebar-h:40px;height:var(--flux-titlebar-h);box-sizing:border-box;display:grid;grid-template-columns:1fr minmax(160px,400px) 1fr;align-items:center;gap:8px;padding:0 8px;background:var(--flux-surface);border-bottom:1px solid var(--flux-border);color:var(--flux-fg);-webkit-app-region:drag;user-select:none;position:relative;z-index:50}
+.flux-titlebar[data-electron][data-os="mac"]{padding-left:82px}
+.flux-titlebar[data-electron][data-os="windows"],.flux-titlebar[data-electron][data-os="linux"]{padding-right:calc(100vw - env(titlebar-area-x,0px) - env(titlebar-area-width,100vw) + 8px)}
+.flux-titlebar button,.flux-titlebar input,.flux-titlebar select,.flux-titlebar .flux-dropdown{-webkit-app-region:no-drag}
+.flux-tb-left,.flux-tb-right{display:flex;align-items:center;gap:4px;min-width:0}.flux-tb-right{justify-content:flex-end}
+.flux-brand{display:flex;align-items:center;gap:8px;font-weight:600;margin-right:8px;white-space:nowrap}
+.flux-tb-btn{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:inherit;border-radius:6px;padding:5px 9px;font:inherit;cursor:pointer;position:relative}
+.flux-tb-btn:hover,.flux-tb-btn.is-open{background:var(--flux-border)}
+.flux-menubar{display:flex}.flux-menu{position:relative}
+.flux-dropdown{position:absolute;top:calc(100% + 4px);left:0;min-width:220px;max-width:360px;margin:0;padding:6px;list-style:none;background:var(--flux-bg);color:var(--flux-fg);border:1px solid var(--flux-border);border-radius:10px;box-shadow:0 14px 36px rgba(0,0,0,.28);z-index:60}
+.flux-dd-item{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;border:0;background:transparent;color:inherit;font:inherit;text-align:left;padding:7px 10px;border-radius:7px;cursor:pointer}
+.flux-dd-item:hover,.flux-dd-item.is-active{background:var(--flux-accent);color:var(--flux-accent-fg)}
+.flux-dd-item kbd,.flux-dd-item small{opacity:.65;font:11px ui-monospace,monospace}.flux-sep{height:1px;background:var(--flux-border);margin:5px 4px}
+.flux-search{position:relative;display:flex;align-items:center;gap:8px;background:var(--flux-bg);border:1px solid var(--flux-border);border-radius:8px;padding:0 10px;height:28px;color:var(--flux-muted)}
+.flux-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--flux-fg);font:inherit;outline:none}
+.flux-search-results{left:0;right:0;max-width:none;top:calc(100% + 6px)}.flux-group{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--flux-muted);padding:6px 10px 2px}
+.flux-empty{padding:12px;color:var(--flux-muted);font-size:13px}.flux-select{margin-left:4px;background:var(--flux-bg);color:inherit;border:1px solid var(--flux-border);border-radius:6px;padding:3px 4px;font:inherit}
+.flux-bell{position:relative}.flux-badge{position:absolute;top:0;right:0;min-width:15px;height:15px;border-radius:99px;background:var(--flux-danger);color:#fff;font-size:10px;line-height:15px;text-align:center}
+.flux-notif-panel{left:auto;right:0;width:340px;max-height:420px;overflow:auto;padding:0}.flux-notif-head{display:flex;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--flux-border)}
+.flux-notif{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid var(--flux-border);border-left:3px solid var(--flux-accent)}
+.flux-notif.flux-success{border-left-color:var(--flux-ok)}.flux-notif.flux-warning{border-left-color:var(--flux-warn)}.flux-notif.flux-error{border-left-color:var(--flux-danger)}
+.flux-notif p{margin:2px 0 4px;font-size:13px}.flux-notif small{color:var(--flux-muted)}.flux-notif-actions{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
+.flux-link{background:none;border:0;color:var(--flux-accent);cursor:pointer;font:inherit;font-size:12px;padding:0}
+.flux-toasts{position:fixed;top:48px;right:12px;display:flex;flex-direction:column;gap:8px;z-index:40;pointer-events:none}
+.flux-toast{pointer-events:auto;background:var(--flux-bg);color:var(--flux-fg);border:1px solid var(--flux-border);border-left:4px solid var(--flux-accent);border-radius:10px;padding:10px 14px;box-shadow:0 10px 28px rgba(0,0,0,.25);max-width:340px;font-size:13px}
+.flux-toast.flux-success{border-left-color:var(--flux-ok)}.flux-toast.flux-warning{border-left-color:var(--flux-warn)}.flux-toast.flux-error{border-left-color:var(--flux-danger)}
+.flux-md{line-height:1.6}.flux-md h2,.flux-md h3,.flux-md h4,.flux-md h5{margin:1.1em 0 .4em}.flux-md pre{background:var(--flux-surface);padding:10px;border-radius:8px;overflow:auto}
+.flux-md code{background:var(--flux-surface);padding:1px 5px;border-radius:4px;font-size:.92em}.flux-md pre code{padding:0;background:none}.flux-md table{border-collapse:collapse;margin:8px 0;font-size:13px}.flux-md th,.flux-md td{border:1px solid var(--flux-border);padding:5px 10px;text-align:left}.flux-md th{background:var(--flux-surface)}.flux-md blockquote{margin:8px 0;padding:2px 12px;border-left:3px solid var(--flux-border);color:var(--flux-muted)}
 `;
 
 // src/react/http-bridge.ts
@@ -721,6 +757,428 @@ function createHttpBridge(baseUrl = "") {
   };
 }
 
+// src/react/os.ts
+import { useMemo as useMemo4 } from "react";
+function detectOS(ua = typeof navigator === "undefined" ? "" : navigator.userAgent) {
+  if (/Mac|iPhone|iPad/i.test(ua)) return "mac";
+  if (/Windows/i.test(ua)) return "windows";
+  if (/Linux|X11|CrOS/i.test(ua)) return "linux";
+  return "other";
+}
+var useOS = () => useMemo4(() => detectOS(), []);
+function formatShortcut(binding, os = detectOS()) {
+  const mac = os === "mac";
+  const map = mac ? { mod: "\u2318", ctrl: "\u2303", shift: "\u21E7", alt: "\u2325" } : { mod: "Ctrl", ctrl: "Ctrl", shift: "Shift", alt: "Alt" };
+  const parts = binding.split("+").map((p) => map[p.toLowerCase()] ?? (p.length === 1 ? p.toUpperCase() : p));
+  return mac ? parts.join("") : parts.join("+");
+}
+
+// src/react/icons.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var PATHS = {
+  search: "M11 4a7 7 0 105.2 11.7l3.5 3.5 1.4-1.4-3.5-3.5A7 7 0 0011 4zm0 2a5 5 0 110 10 5 5 0 010-10z",
+  bell: "M12 3a6 6 0 00-6 6v3.6L4.3 15.3A1 1 0 005 17h14a1 1 0 00.7-1.7L18 12.6V9a6 6 0 00-6-6zm-2 16a2 2 0 004 0h-4z",
+  sun: "M12 7a5 5 0 100 10 5 5 0 000-10zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM1 11h3v2H1v-2zm19 0h3v2h-3v-2zM4.2 5.6l1.4-1.4 2.1 2.1-1.4 1.4-2.1-2.1zm12.1 12.1l1.4-1.4 2.1 2.1-1.4 1.4-2.1-2.1zM5.6 19.8l-1.4-1.4 2.1-2.1 1.4 1.4-2.1 2.1zM18.4 7.7l-1.4-1.4 2.1-2.1 1.4 1.4-2.1 2.1z",
+  moon: "M20 14.5A8.5 8.5 0 019.5 4a8.5 8.5 0 1010.5 10.5z",
+  plug: "M9 2v5H7v3a5 5 0 004 4.9V19H8v2h8v-2h-3v-4.1A5 5 0 0017 10V7h-2V2h-2v5h-2V2H9z",
+  settings: "M12 8a4 4 0 100 8 4 4 0 000-8zm8.9 5l1.7 1.3-2 3.4-2-.8a7.6 7.6 0 01-1.7 1l-.3 2.1h-4l-.3-2.1a7.6 7.6 0 01-1.7-1l-2 .8-2-3.4L5.3 13a7 7 0 010-2L3.6 9.7l2-3.4 2 .8a7.6 7.6 0 011.7-1L9.6 4h4l.3 2.1a7.6 7.6 0 011.7 1l2-.8 2 3.4L17.9 11a7 7 0 010 2z",
+  check: "M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5L9 16.2z",
+  close: "M6.4 5l-1.4 1.4L10.6 12 5 17.6 6.4 19l5.6-5.6 5.6 5.6 1.4-1.4-5.6-5.6L19 6.4 17.6 5 12 10.6 6.4 5z",
+  chevron: "M7 10l5 5 5-5H7z",
+  play: "M8 5v14l11-7L8 5z",
+  image: "M4 5h16a1 1 0 011 1v12a1 1 0 01-1 1H4a1 1 0 01-1-1V6a1 1 0 011-1zm3 3a2 2 0 100 4 2 2 0 000-4zm-3 9h16v-3l-4-4-5 5-3-3-4 4v1z",
+  command: "M7 3a4 4 0 00-1 7.9v2.2A4 4 0 107 21a4 4 0 004-4h2a4 4 0 104-4 4 4 0 00-1-.1V10.9A4 4 0 1017 3a4 4 0 00-4 4h-2a4 4 0 00-4-4zm4 9H9V10h2v2zm4 0h-2V10h2v2z"
+};
+function Icon({ name, d, size = 16, title }) {
+  const path = d ?? (name ? PATHS[name] : void 0) ?? PATHS["plug"];
+  return /* @__PURE__ */ jsxs4("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": title ? void 0 : true, role: title ? "img" : void 0, className: "flux-icon", children: [
+    title && /* @__PURE__ */ jsx4("title", { children: title }),
+    /* @__PURE__ */ jsx4("path", { d: path })
+  ] });
+}
+var iconNames = Object.keys(PATHS);
+
+// src/react/markdown.tsx
+import React4 from "react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var safeHref = (h) => /^https:\/\/[^\s]+$/i.test(h) || h.startsWith("#") ? h : void 0;
+function inline(src, key = 0) {
+  const out = [];
+  const re = /(`[^`]+`)|(\*\*[^*]+\*\*)|(\*[^*\s][^*]*\*)|(\[[^\]]+\]\([^)\s]+\))/g;
+  let last = 0;
+  let m;
+  let i = 0;
+  while (m = re.exec(src)) {
+    if (m.index > last) out.push(src.slice(last, m.index));
+    const tok = m[0];
+    const k = `${key}-${i++}`;
+    if (tok.startsWith("`")) out.push(/* @__PURE__ */ jsx5("code", { children: tok.slice(1, -1) }, k));
+    else if (tok.startsWith("**")) out.push(/* @__PURE__ */ jsx5("strong", { children: tok.slice(2, -2) }, k));
+    else if (tok.startsWith("*")) out.push(/* @__PURE__ */ jsx5("em", { children: tok.slice(1, -1) }, k));
+    else {
+      const mm = /^\[([^\]]+)\]\(([^)\s]+)\)$/.exec(tok);
+      const href = safeHref(mm[2]);
+      out.push(href ? /* @__PURE__ */ jsx5("a", { href, target: "_blank", rel: "noopener noreferrer", children: mm[1] }, k) : mm[1]);
+    }
+    last = m.index + tok.length;
+  }
+  if (last < src.length) out.push(src.slice(last));
+  return out;
+}
+function Markdown({ source }) {
+  const lines = source.replace(/\r\n/g, "\n").split("\n");
+  const blocks = [];
+  let i = 0;
+  let k = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+    if (!line.trim()) {
+      i++;
+      continue;
+    }
+    if (line.startsWith("```")) {
+      const buf2 = [];
+      i++;
+      while (i < lines.length && !lines[i].startsWith("```")) buf2.push(lines[i++]);
+      i++;
+      blocks.push(/* @__PURE__ */ jsx5("pre", { children: /* @__PURE__ */ jsx5("code", { children: buf2.join("\n") }) }, k++));
+      continue;
+    }
+    const h = /^(#{1,4})\s+(.*)$/.exec(line);
+    if (h) {
+      const L = `h${h[1].length + 1}`;
+      blocks.push(React4.createElement(L, { key: k++ }, inline(h[2])));
+      i++;
+      continue;
+    }
+    if (/^(-{3,}|\*{3,})$/.test(line.trim())) {
+      blocks.push(/* @__PURE__ */ jsx5("hr", {}, k++));
+      i++;
+      continue;
+    }
+    if (line.startsWith(">")) {
+      const buf2 = [];
+      while (i < lines.length && lines[i].startsWith(">")) buf2.push(lines[i++].replace(/^>\s?/, ""));
+      blocks.push(/* @__PURE__ */ jsx5("blockquote", { children: inline(buf2.join(" ")) }, k++));
+      continue;
+    }
+    if (line.includes("|") && /^\s*\|?\s*:?-{2,}:?\s*(\|\s*:?-{2,}:?\s*)*\|?\s*$/.test(lines[i + 1] ?? "")) {
+      const cells = (l) => l.trim().replace(/^\|/, "").replace(/\|$/, "").split("|").map((c) => c.trim());
+      const head = cells(line);
+      i += 2;
+      const rows = [];
+      while (i < lines.length && lines[i].includes("|") && lines[i].trim()) rows.push(cells(lines[i++]));
+      blocks.push(
+        /* @__PURE__ */ jsxs5("table", { children: [
+          /* @__PURE__ */ jsx5("thead", { children: /* @__PURE__ */ jsx5("tr", { children: head.map((c, j) => /* @__PURE__ */ jsx5("th", { children: inline(c) }, j)) }) }),
+          /* @__PURE__ */ jsx5("tbody", { children: rows.map((r, ri) => /* @__PURE__ */ jsx5("tr", { children: r.map((c, j) => /* @__PURE__ */ jsx5("td", { children: inline(c) }, j)) }, ri)) })
+        ] }, k++)
+      );
+      continue;
+    }
+    const li = /^(\s*)([-*]|\d+\.)\s+/;
+    if (li.test(line)) {
+      const ordered = /^\s*\d+\./.test(line);
+      const items = [];
+      while (i < lines.length && li.test(lines[i])) items.push(/* @__PURE__ */ jsx5("li", { children: inline(lines[i++].replace(li, "")) }, items.length));
+      blocks.push(ordered ? /* @__PURE__ */ jsx5("ol", { children: items }, k++) : /* @__PURE__ */ jsx5("ul", { children: items }, k++));
+      continue;
+    }
+    const buf = [];
+    while (i < lines.length && lines[i].trim() && !/^(#{1,4}\s|```|>|\s*([-*]|\d+\.)\s)/.test(lines[i]) && !(lines[i].includes("|") && /^\s*\|?\s*:?-{2,}/.test(lines[i + 1] ?? ""))) buf.push(lines[i++]);
+    blocks.push(/* @__PURE__ */ jsx5("p", { children: inline(buf.join(" ")) }, k++));
+  }
+  return /* @__PURE__ */ jsx5("div", { className: "flux-md", children: blocks });
+}
+
+// src/react/theme.tsx
+import { createContext as createContext2, useCallback as useCallback3, useContext as useContext2, useEffect as useEffect4, useMemo as useMemo5, useState as useState4 } from "react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function declareHostPoints(framework) {
+  const ep = framework.manager.extensionPoints;
+  if (!ep.definition("theme")) {
+    ep.declare({ name: "theme", contributions: { themes: s.object({ id: s.string(), label: s.string(), dark: s.boolean().optional(), tokens: s.record(s.string()) }) } });
+  }
+  if (!ep.definition("titlebar")) {
+    ep.declare({ name: "titlebar", contributions: { searchProviders: s.object({ id: s.string(), label: s.string(), search: s.fn() }) } });
+  }
+}
+var Ctx = createContext2(null);
+var read = (k) => {
+  try {
+    return localStorage.getItem(k);
+  } catch {
+    return null;
+  }
+};
+var write = (k, v) => {
+  try {
+    v === void 0 ? localStorage.removeItem(k) : localStorage.setItem(k, v);
+  } catch {
+  }
+};
+function ThemeProvider({ children, storageKey = "fluxplugin.theme", onResolved }) {
+  const themes = useExtensionItems("theme", "themes");
+  const [mode, setModeState] = useState4(() => read(storageKey + ".mode") || "system");
+  const [themeId, setThemeIdState] = useState4(() => read(storageKey + ".id") ?? void 0);
+  const [systemDark, setSystemDark] = useState4(() => typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)").matches);
+  useEffect4(() => {
+    if (typeof matchMedia === "undefined") return;
+    const mq = matchMedia("(prefers-color-scheme: dark)");
+    const l = (e) => setSystemDark(e.matches);
+    mq.addEventListener("change", l);
+    return () => mq.removeEventListener("change", l);
+  }, []);
+  const theme = themes.find((t) => t.id === themeId);
+  const resolved = theme ? theme.dark ? "dark" : "light" : mode === "system" ? systemDark ? "dark" : "light" : mode;
+  useEffect4(() => {
+    const root = document.documentElement;
+    root.setAttribute("data-theme", resolved);
+    const applied = Object.entries(theme?.tokens ?? {}).filter(([k]) => /^--[\w-]+$/.test(k));
+    for (const [k, v] of applied) root.style.setProperty(k, v);
+    const cs = getComputedStyle(root);
+    onResolved?.({ dark: resolved === "dark", bg: cs.getPropertyValue("--flux-bg").trim(), fg: cs.getPropertyValue("--flux-fg").trim(), surface: cs.getPropertyValue("--flux-surface").trim() });
+    return () => applied.forEach(([k]) => root.style.removeProperty(k));
+  }, [resolved, theme]);
+  const setMode = useCallback3((m) => (setModeState(m), setThemeIdState(void 0), write(storageKey + ".mode", m), write(storageKey + ".id", void 0)), [storageKey]);
+  const setThemeId = useCallback3((id) => (setThemeIdState(id), write(storageKey + ".id", id)), [storageKey]);
+  const value = useMemo5(() => ({ mode, setMode, themeId, setThemeId, resolved, themes, toggle: () => setMode(resolved === "dark" ? "light" : "dark") }), [mode, setMode, themeId, setThemeId, resolved, themes]);
+  return /* @__PURE__ */ jsx6(Ctx.Provider, { value, children });
+}
+function useTheme() {
+  const c = useContext2(Ctx);
+  if (!c) throw new Error("useTheme must be used inside <ThemeProvider>");
+  return c;
+}
+function ThemeSwitcher() {
+  const { resolved, toggle, themes, themeId, setThemeId, mode, setMode } = useTheme();
+  usePluginFramework();
+  return /* @__PURE__ */ jsxs6("span", { className: "flux-theme-switch", children: [
+    /* @__PURE__ */ jsx6("button", { type: "button", className: "flux-tb-btn", onClick: toggle, title: `Theme: ${resolved} (click to switch)`, "aria-label": "Toggle theme", "data-testid": "theme-toggle", children: /* @__PURE__ */ jsx6(Icon, { name: resolved === "dark" ? "moon" : "sun" }) }),
+    themes.length > 0 && /* @__PURE__ */ jsxs6("select", { className: "flux-select", "aria-label": "Theme", value: themeId ?? `mode:${mode}`, onChange: (e) => e.target.value.startsWith("mode:") ? setMode(e.target.value.slice(5)) : setThemeId(e.target.value), children: [
+      /* @__PURE__ */ jsx6("option", { value: "mode:system", children: "System" }),
+      /* @__PURE__ */ jsx6("option", { value: "mode:light", children: "Light" }),
+      /* @__PURE__ */ jsx6("option", { value: "mode:dark", children: "Dark" }),
+      themes.map((t) => /* @__PURE__ */ jsx6("option", { value: t.id, children: t.label }, t.id))
+    ] })
+  ] });
+}
+
+// src/react/titlebar.tsx
+import { useEffect as useEffect5, useMemo as useMemo6, useRef as useRef3, useState as useState5, useSyncExternalStore as useSyncExternalStore4 } from "react";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function AppMenuBar() {
+  const fw = usePluginFramework();
+  const os = useOS();
+  const menus = fw.manager.menus;
+  useSyncExternalStore4(menus.subscribe, () => menus.version, () => menus.version);
+  const [open, setOpen] = useState5(null);
+  const ref = useRef3(null);
+  useEffect5(() => {
+    const off = (e) => ref.current && !ref.current.contains(e.target) && setOpen(null);
+    const key = (e) => e.key === "Escape" && setOpen(null);
+    window.addEventListener("mousedown", off);
+    window.addEventListener("keydown", key);
+    return () => (window.removeEventListener("mousedown", off), window.removeEventListener("keydown", key));
+  }, []);
+  const top = menus.items("application");
+  if (!top.length) return null;
+  const run = (item) => {
+    setOpen(null);
+    if (item.command) void fw.manager.commands.execute(item.command, ...item.args ?? []).catch((e) => fw.manager.logs.logger("host").error(String(e)));
+    else if (item.path) navigate(item.path);
+  };
+  const shortcut = (item) => {
+    const k = item.command ? fw.manager.commands.get(item.command)?.keybinding : void 0;
+    return k ? formatShortcut(k, os) : "";
+  };
+  return /* @__PURE__ */ jsx7("div", { className: "flux-menubar", role: "menubar", ref, children: top.map((m) => /* @__PURE__ */ jsxs7("div", { className: "flux-menu", children: [
+    /* @__PURE__ */ jsx7(
+      "button",
+      {
+        type: "button",
+        role: "menuitem",
+        className: "flux-tb-btn" + (open === m.id ? " is-open" : ""),
+        "aria-haspopup": !!m.children?.length,
+        "aria-expanded": open === m.id,
+        onClick: () => m.children?.length ? setOpen(open === m.id ? null : m.id) : run(m),
+        onMouseEnter: () => open && m.children?.length && setOpen(m.id),
+        children: m.label
+      }
+    ),
+    open === m.id && m.children && /* @__PURE__ */ jsx7("ul", { className: "flux-dropdown", role: "menu", children: m.children.map(
+      (c) => c.separator ? /* @__PURE__ */ jsx7("li", { className: "flux-sep", role: "separator" }, c.id) : /* @__PURE__ */ jsx7("li", { role: "none", children: /* @__PURE__ */ jsxs7("button", { type: "button", role: "menuitem", className: "flux-dd-item", onClick: () => run(c), children: [
+        /* @__PURE__ */ jsx7("span", { children: c.label }),
+        /* @__PURE__ */ jsx7("kbd", { children: shortcut(c) })
+      ] }) }, c.id)
+    ) })
+  ] }, m.id)) });
+}
+function SearchBox({ placeholder = "Search\u2026" }) {
+  const fw = usePluginFramework();
+  const providers = useExtensionItems("titlebar", "searchProviders");
+  const [q, setQ] = useState5("");
+  const [results, setResults] = useState5([]);
+  const [idx, setIdx] = useState5(0);
+  const [focus, setFocus] = useState5(false);
+  const input = useRef3(null);
+  useEffect5(() => {
+    const k = (e) => (e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "f" && !e.shiftKey && (e.preventDefault(), input.current?.focus());
+    window.addEventListener("keydown", k);
+    return () => window.removeEventListener("keydown", k);
+  }, []);
+  useEffect5(() => {
+    const query = q.trim();
+    if (!query) return setResults((prev) => prev.length ? [] : prev);
+    let live = true;
+    (async () => {
+      const lower = query.toLowerCase();
+      const own = [
+        ...fw.manager.commands.palette(query).slice(0, 5).map((c) => ({ id: "cmd:" + c.id, title: c.title, subtitle: c.category, group: "Commands", run: () => void fw.manager.commands.execute(c.id) })),
+        ...fw.manager.menus.items("sidebar").filter((m) => m.path && m.label.toLowerCase().includes(lower)).map((m) => ({ id: "page:" + m.id, title: m.label, group: "Pages", run: () => navigate(m.path) }))
+      ];
+      const extra = await Promise.all(providers.map(async (p) => {
+        try {
+          return (await p.search(query) ?? []).map((r) => ({ ...r, group: r.group ?? p.label }));
+        } catch {
+          return [];
+        }
+      }));
+      if (live) setResults([...own, ...extra.flat()].slice(0, 12)), setIdx(0);
+    })();
+    return () => {
+      live = false;
+    };
+  }, [q, fw, providers]);
+  const go = (r) => {
+    if (!r) return;
+    setQ("");
+    input.current?.blur();
+    void r.run();
+  };
+  return /* @__PURE__ */ jsxs7("div", { className: "flux-search", "data-testid": "searchbox", children: [
+    /* @__PURE__ */ jsx7(Icon, { name: "search" }),
+    /* @__PURE__ */ jsx7(
+      "input",
+      {
+        ref: input,
+        value: q,
+        placeholder,
+        "aria-label": "Search",
+        onChange: (e) => setQ(e.target.value),
+        onFocus: () => setFocus(true),
+        onBlur: () => setTimeout(() => setFocus(false), 120),
+        onKeyDown: (e) => {
+          if (e.key === "ArrowDown") e.preventDefault(), setIdx((i) => Math.min(i + 1, results.length - 1));
+          else if (e.key === "ArrowUp") e.preventDefault(), setIdx((i) => Math.max(i - 1, 0));
+          else if (e.key === "Enter") go(results[idx]);
+          else if (e.key === "Escape") setQ(""), input.current?.blur();
+        }
+      }
+    ),
+    focus && q.trim() && /* @__PURE__ */ jsxs7("ul", { className: "flux-dropdown flux-search-results", role: "listbox", children: [
+      results.length === 0 && /* @__PURE__ */ jsx7("li", { className: "flux-empty", children: "No results" }),
+      results.map((r, i) => /* @__PURE__ */ jsxs7("li", { role: "option", "aria-selected": i === idx, children: [
+        (i === 0 || results[i - 1].group !== r.group) && /* @__PURE__ */ jsx7("div", { className: "flux-group", children: r.group }),
+        /* @__PURE__ */ jsxs7("button", { type: "button", className: "flux-dd-item" + (i === idx ? " is-active" : ""), onMouseDown: (e) => (e.preventDefault(), go(r)), children: [
+          /* @__PURE__ */ jsx7("span", { children: r.title }),
+          r.subtitle && /* @__PURE__ */ jsx7("small", { children: r.subtitle })
+        ] })
+      ] }, r.id))
+    ] })
+  ] });
+}
+function useNotifications() {
+  const { manager } = usePluginFramework();
+  const n = manager.notifications;
+  useSyncExternalStore4(n.subscribe, () => n.version, () => n.version);
+  return n;
+}
+function NotificationBell() {
+  const fw = usePluginFramework();
+  const center = useNotifications();
+  const [open, setOpen] = useState5(false);
+  const ref = useRef3(null);
+  useEffect5(() => {
+    const off = (e) => ref.current && !ref.current.contains(e.target) && setOpen(false);
+    window.addEventListener("mousedown", off);
+    return () => window.removeEventListener("mousedown", off);
+  }, []);
+  const unread = center.unread;
+  return /* @__PURE__ */ jsxs7("div", { className: "flux-bell", ref, children: [
+    /* @__PURE__ */ jsxs7("button", { type: "button", className: "flux-tb-btn", "aria-label": "Notifications", "data-testid": "bell", onClick: () => (setOpen(!open), !open && center.markRead()), children: [
+      /* @__PURE__ */ jsx7(Icon, { name: "bell" }),
+      unread > 0 && /* @__PURE__ */ jsx7("span", { className: "flux-badge", "data-testid": "bell-count", children: unread })
+    ] }),
+    open && /* @__PURE__ */ jsxs7("div", { className: "flux-dropdown flux-notif-panel", role: "dialog", "aria-label": "Notifications", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "flux-notif-head", children: [
+        /* @__PURE__ */ jsx7("strong", { children: "Notifications" }),
+        /* @__PURE__ */ jsx7("button", { type: "button", className: "flux-link", onClick: () => center.clear(), children: "Clear all" })
+      ] }),
+      center.list().length === 0 && /* @__PURE__ */ jsx7("div", { className: "flux-empty", children: "You're all caught up" }),
+      center.list().map((n) => /* @__PURE__ */ jsxs7("div", { className: "flux-notif flux-" + n.level, children: [
+        /* @__PURE__ */ jsxs7("div", { className: "flux-notif-main", children: [
+          /* @__PURE__ */ jsx7("strong", { children: n.title }),
+          n.body && /* @__PURE__ */ jsx7("p", { children: n.body }),
+          /* @__PURE__ */ jsxs7("small", { children: [
+            n.owner,
+            " \xB7 ",
+            new Date(n.time).toLocaleTimeString()
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs7("div", { className: "flux-notif-actions", children: [
+          n.actions.map((a) => /* @__PURE__ */ jsx7("button", { type: "button", className: "flux-link", onClick: () => void fw.manager.commands.execute(a.command, ...a.args ?? []), children: a.label }, a.label)),
+          /* @__PURE__ */ jsx7("button", { type: "button", className: "flux-link", "aria-label": "Dismiss", onClick: () => center.dismiss(n.id), children: /* @__PURE__ */ jsx7(Icon, { name: "close", size: 12 }) })
+        ] })
+      ] }, n.id))
+    ] })
+  ] });
+}
+function ToastHost() {
+  const { manager } = usePluginFramework();
+  const [toasts, setToasts] = useState5([]);
+  useEffect5(() => {
+    const timers = [];
+    const show = (n, remaining = n.timeoutMs) => {
+      if (n.timeoutMs <= 0 || remaining <= 0) return;
+      setToasts((t) => [n, ...t.filter((x) => x.id !== n.id)].slice(0, 4));
+      timers.push(setTimeout(() => setToasts((t) => t.filter((x) => x.id !== n.id)), remaining));
+    };
+    for (const n of [...manager.notifications.list()].reverse()) if (!n.read) show(n, n.timeoutMs - (Date.now() - n.time));
+    const sub = manager.notifications.onPush((n) => show(n));
+    return () => (sub.dispose(), timers.forEach(clearTimeout));
+  }, [manager]);
+  return /* @__PURE__ */ jsx7("div", { className: "flux-toasts", "aria-live": "polite", "data-testid": "toasts", children: toasts.map((n) => /* @__PURE__ */ jsxs7("div", { className: "flux-toast flux-" + n.level, role: "status", children: [
+    /* @__PURE__ */ jsx7("strong", { children: n.title }),
+    n.body && /* @__PURE__ */ jsxs7("span", { children: [
+      " ",
+      n.body
+    ] })
+  ] }, n.id)) });
+}
+function TitleBar({ title, logo, searchPlaceholder, show }) {
+  const os = useOS();
+  const electron = typeof window !== "undefined" && !!window.__fluxplugin;
+  const s2 = { menu: true, search: true, notifications: true, theme: true, ...show };
+  const brand = useMemo6(() => /* @__PURE__ */ jsxs7("div", { className: "flux-brand", children: [
+    logo,
+    title && /* @__PURE__ */ jsx7("span", { children: title })
+  ] }), [logo, title]);
+  return /* @__PURE__ */ jsxs7("header", { className: "flux-titlebar", "data-os": os, "data-electron": electron || void 0, "data-testid": "titlebar", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "flux-tb-left", children: [
+      brand,
+      s2.menu && /* @__PURE__ */ jsx7(AppMenuBar, {}),
+      /* @__PURE__ */ jsx7(PluginSlot, { name: "titlebar.left" })
+    ] }),
+    /* @__PURE__ */ jsx7("div", { className: "flux-tb-center", children: s2.search && /* @__PURE__ */ jsx7(SearchBox, { placeholder: searchPlaceholder }) }),
+    /* @__PURE__ */ jsxs7("div", { className: "flux-tb-right", children: [
+      /* @__PURE__ */ jsx7(PluginSlot, { name: "titlebar.right" }),
+      s2.theme && /* @__PURE__ */ jsx7(ThemeSwitcher, {}),
+      s2.notifications && /* @__PURE__ */ jsx7(NotificationBell, {})
+    ] })
+  ] });
+}
+
 export {
   RemoteError,
   PluginsClient,
@@ -755,5 +1213,20 @@ export {
   CommandPalette,
   baseCss,
   HttpBridgeError,
-  createHttpBridge
+  createHttpBridge,
+  detectOS,
+  useOS,
+  formatShortcut,
+  Icon,
+  iconNames,
+  Markdown,
+  declareHostPoints,
+  ThemeProvider,
+  useTheme,
+  ThemeSwitcher,
+  AppMenuBar,
+  SearchBox,
+  NotificationBell,
+  ToastHost,
+  TitleBar
 };

package/dist/browser/index.js

@@ -17,6 +17,7 @@ import {
   MGMT,
   MemoryStorageBackend,
   MenuRegistry,
+  NotificationCenter,
   PermissionDeniedError,
   PermissionManager,
   PluginManager,
@@ -65,8 +66,9 @@ import {
   serializeError,
   toDisposable,
   validateManifest,
+  videoEmbedUrl,
   withTimeout
-} from "./chunks/chunk-Q75AOCXD.js";
+} from "./chunks/chunk-TL63576R.js";
 export {
   BUILTIN_PERMISSIONS,
   CHANNELS,
@@ -86,6 +88,7 @@ export {
   MGMT,
   MemoryStorageBackend,
   MenuRegistry,
+  NotificationCenter,
   PermissionDeniedError,
   PermissionManager,
   PluginManager,
@@ -134,5 +137,6 @@ export {
   serializeError,
   toDisposable,
   validateManifest,
+  videoEmbedUrl,
   withTimeout
 };