@monkey-mini-app/panel 0.1.0

package/dist/index.js

@@ -0,0 +1,1923 @@
+import { __publicField, applyThemeTo, clampPalette, PALETTES } from './chunk-X3QW77RD.js';
+export { PALETTES, applyThemeTo, clampMode, clampPalette, cssVars, parseThemeCss, runnerThemeCss, themeLabelFromCss, tokensOf } from './chunk-X3QW77RD.js';
+import * as React from 'react';
+import { useSyncExternalStore } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { RefreshCw, LayoutGrid, Clock, Database, Settings as Settings$1, PanelRight, X } from 'lucide-react';
+import { createRoot } from 'react-dom/client';
+import { createInstance } from 'i18next';
+
+// src/panel-host.ts
+function capabilitiesOf(host) {
+  return {
+    history: !!host.history,
+    storage: !!host.storage,
+    config: !!host.config,
+    appTheme: !!host.appTheme,
+    customPalettes: !!host.palettes,
+    deleteApp: !!host.deleteApp
+  };
+}
+
+// src/rest.ts
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+async function readJson(url, init) {
+  let res;
+  try {
+    res = await fetch(url, init);
+  } catch (cause) {
+    throw new HostUnreachableError(url, cause);
+  }
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  return res.json();
+}
+var HostUnreachableError = class extends Error {
+  constructor(url, cause) {
+    super(`Cannot reach apps host: ${url}`);
+    __publicField(this, "url");
+    this.name = "HostUnreachableError";
+    this.url = url;
+    if (cause !== void 0) {
+      Object.defineProperty(this, "cause", { value: cause, configurable: true, writable: true });
+    }
+  }
+};
+function isHostUnreachable(e) {
+  return e instanceof HostUnreachableError;
+}
+function appFrameUrl(origin, appId, query) {
+  return `${origin}/app/${encodeURIComponent(appId)}?${new URLSearchParams(query).toString()}`;
+}
+function parseAppTheme(raw) {
+  if (raw === null) return null;
+  if (!isRecord(raw)) return void 0;
+  const theme = typeof raw.theme === "string" ? raw.theme : "";
+  const palette = typeof raw.palette === "string" ? raw.palette : "";
+  if (!theme && !palette) return null;
+  return { theme, palette };
+}
+function parseAppsResponse(raw) {
+  if (!isRecord(raw) || !Array.isArray(raw.apps)) return [];
+  const out = [];
+  for (const item of raw.apps) {
+    if (!isRecord(item) || typeof item.id !== "string") continue;
+    out.push({
+      id: item.id,
+      name: typeof item.name === "string" ? item.name : item.id,
+      description: typeof item.description === "string" ? item.description : void 0,
+      acronym: typeof item.acronym === "string" ? item.acronym : void 0,
+      commits: typeof item.commits === "number" ? item.commits : void 0,
+      version: typeof item.version === "string" ? item.version : void 0,
+      theme: parseAppTheme(item.theme)
+    });
+  }
+  return out;
+}
+function hostConfigToForm(raw, cardStyle) {
+  const rec = isRecord(raw) ? raw : {};
+  const llm = isRecord(rec.llm) ? rec.llm : null;
+  const locale = typeof rec.locale === "string" ? rec.locale : "";
+  const chatLanguage = typeof rec.chatLanguage === "string" ? rec.chatLanguage : "";
+  return {
+    hostPort: rec.hostPort != null ? String(rec.hostPort) : "",
+    locale: locale || chatLanguage,
+    chatLanguage: chatLanguage || locale,
+    theme: typeof rec.theme === "string" ? rec.theme : "",
+    palette: typeof rec.palette === "string" ? rec.palette : "",
+    cardStyle,
+    provider: llm && typeof llm.provider === "string" ? llm.provider : "",
+    model: llm && typeof llm.model === "string" ? llm.model : ""
+  };
+}
+function formToHostConfigBody(form) {
+  const provider = (form.provider ?? "").trim();
+  const model = (form.model ?? "").trim();
+  const locale = form.locale || form.chatLanguage;
+  const body = { locale, chatLanguage: form.chatLanguage || locale, theme: form.theme, palette: form.palette };
+  const port = Number(form.hostPort);
+  if (Number.isInteger(port) && port >= 0 && port <= 65535) body.hostPort = port;
+  if (provider && model) body.llm = { provider, model };
+  else if (!provider && !model) body.llm = null;
+  return body;
+}
+function asCommit(raw) {
+  if (!isRecord(raw) || typeof raw.id !== "string") return null;
+  const files = Array.isArray(raw.files) ? raw.files.flatMap((f) => {
+    if (!isRecord(f) || typeof f.path !== "string") return [];
+    return [{ path: f.path, add: typeof f.add === "number" ? f.add : void 0, del: typeof f.del === "number" ? f.del : void 0, preview: typeof f.preview === "string" ? f.preview : void 0 }];
+  }) : void 0;
+  return { id: raw.id, message: typeof raw.message === "string" ? raw.message : "", time: typeof raw.time === "string" ? raw.time : "", files };
+}
+function parseCommitList(raw) {
+  const rec = isRecord(raw) ? raw : {};
+  const list = Array.isArray(rec.commits) ? rec.commits : Array.isArray(rec.nodes) ? rec.nodes : [];
+  return list.map((c) => asCommit(c)).filter((c) => c !== null);
+}
+function parseCommitDetail(raw, id) {
+  const rec = isRecord(raw) ? raw : {};
+  const inner = isRecord(rec.commit) ? rec.commit : rec;
+  return asCommit(inner) ?? { id, message: "", time: "", files: [] };
+}
+function parseStorageTables(raw) {
+  const rec = isRecord(raw) ? raw : {};
+  const list = Array.isArray(rec.tables) ? rec.tables : [];
+  const out = [];
+  for (const row of list) {
+    if (!isRecord(row) || typeof row.name !== "string") continue;
+    out.push({
+      name: row.name,
+      size: typeof row.size === "number" ? row.size : void 0,
+      updatedAt: typeof row.updatedAt === "string" ? row.updatedAt : void 0
+    });
+  }
+  return out;
+}
+function parsePalettes(raw) {
+  const rec = isRecord(raw) ? raw : {};
+  const list = Array.isArray(rec.palettes) ? rec.palettes : [];
+  const out = [];
+  for (const p of list) {
+    if (!isRecord(p) || typeof p.id !== "string") continue;
+    if (p.custom === false) continue;
+    out.push({
+      id: p.id,
+      label: typeof p.label === "string" ? p.label : p.id,
+      swatch: typeof p.swatch === "string" ? p.swatch : "#888",
+      tokens: isRecord(p.tokens) ? p.tokens : void 0
+    });
+  }
+  return out;
+}
+function createRestPanelHost(opts) {
+  const storage = opts.storage ?? (typeof window !== "undefined" ? window.localStorage : null);
+  function origin() {
+    return (opts.getHostUrl ? opts.getHostUrl() : opts.hostUrl).replace(/\/$/, "");
+  }
+  const host = {
+    locale: opts.locale,
+    emptyText: opts.emptyText,
+    fetchApps: async () => parseAppsResponse(await readJson(`${origin()}/api/apps`)),
+    palettes: async () => {
+      try {
+        return parsePalettes(await readJson(`${origin()}/api/palettes`));
+      } catch {
+        return [];
+      }
+    },
+    openPanel: () => opts.onOpen?.(),
+    closePanel: () => opts.onClose?.(),
+    persistTheme: (theme, palette) => {
+      try {
+        storage?.setItem("mma-theme-mode", theme);
+        storage?.setItem("mma-palette", palette);
+      } catch {
+      }
+      void fetch(`${origin()}/api/host-config`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ theme, palette }) }).catch(() => {
+      });
+    },
+    appTheme: {
+      save: async (appId, t) => {
+        await fetch(`${origin()}/api/apps/${encodeURIComponent(appId)}/theme`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(t) }).catch(() => {
+        });
+      },
+      clear: async (appId) => {
+        await fetch(`${origin()}/api/apps/${encodeURIComponent(appId)}/theme`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ reset: true }) }).catch(() => {
+        });
+      }
+    },
+    config: {
+      load: async () => hostConfigToForm(await readJson(`${origin()}/api/host-config`), opts.getCardStyle?.() ?? opts.cardStyle ?? "stamp"),
+      save: async (cfg) => {
+        const body = formToHostConfigBody(cfg);
+        const res = await fetch(`${origin()}/api/host-config`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(body) });
+        const raw = await res.json().catch(() => ({}));
+        if (!res.ok || isRecord(raw) && raw.ok === false) {
+          throw new Error(isRecord(raw) && typeof raw.error === "string" ? raw.error : `HTTP ${res.status}`);
+        }
+        const hostPort = isRecord(raw) ? raw.hostPort : void 0;
+        if (typeof hostPort === "number" && Number.isInteger(hostPort) && hostPort > 0) {
+          const next = `${new URL(origin()).protocol}//${new URL(origin()).hostname}:${hostPort}`;
+          if (next !== origin()) opts.onHostChange?.(next);
+        }
+        opts.onConfigSaved?.(cfg);
+      }
+    },
+    history: {
+      list: async (appId) => parseCommitList(await readJson(`${origin()}/api/apps/${encodeURIComponent(appId)}/history?limit=50`)),
+      detail: async (appId, id) => parseCommitDetail(await readJson(`${origin()}/api/apps/${encodeURIComponent(appId)}/history/${encodeURIComponent(id)}`), id)
+    },
+    storage: {
+      listTables: async (appId) => parseStorageTables(await readJson(`${origin()}/api/apps/${encodeURIComponent(appId)}/storage`)),
+      readTable: async (appId, name) => {
+        const raw = await readJson(`${origin()}/api/apps/${encodeURIComponent(appId)}/storage/${encodeURIComponent(name)}`);
+        return isRecord(raw) && "value" in raw ? raw.value : raw;
+      }
+    },
+    deleteApp: opts.deleteApp ?? (async (appId) => {
+      await fetch(`${origin()}/api/app/${encodeURIComponent(appId)}`, { method: "DELETE" }).catch(() => {
+      });
+    }),
+    frame: opts.frameController ?? {
+      url: (appId) => `${origin()}/app/${encodeURIComponent(appId)}`,
+      mount: () => void 0,
+      unmount: () => void 0,
+      reload: () => void 0,
+      syncEnv: () => void 0
+    }
+  };
+  return host;
+}
+var none = {
+  history: false,
+  storage: false,
+  config: false,
+  appTheme: false,
+  customPalettes: false,
+  deleteApp: false
+};
+var initial = {
+  tabs: [{ id: "all", title: "\u5168\u90E8", kind: "all" }],
+  active: "all",
+  apps: [],
+  error: null,
+  loading: false,
+  query: "",
+  dock: "fill",
+  theme: "light",
+  palette: "default",
+  themeScope: "global",
+  customPalettes: {},
+  cardStyle: "stamp",
+  visible: false,
+  pendingDelete: null,
+  themePopOpen: false,
+  settingsOpen: false,
+  cfgMsg: "",
+  cfgVersion: 0,
+  cfg: {},
+  emptyText: void 0,
+  capabilities: none,
+  locale: "zh-CN",
+  browseOpen: false,
+  browseKind: "history",
+  browseAppId: null,
+  browseAppName: "",
+  browseLoading: false,
+  browseError: null,
+  browseList: [],
+  browseDetail: null,
+  browseTable: null,
+  browseTableValue: null,
+  browseOpenFile: null
+};
+var state = { ...initial, capabilities: { ...none } };
+var listeners = /* @__PURE__ */ new Set();
+function getPanelState() {
+  return state;
+}
+function setPanelState(patch) {
+  state = { ...state, ...patch };
+  for (const fn of listeners) fn();
+  return state;
+}
+function subscribePanel(listener) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+function resetPanelState(seed) {
+  state = {
+    ...initial,
+    capabilities: { ...none },
+    customPalettes: {},
+    cfg: {},
+    tabs: [{ id: "all", title: "\u5168\u90E8", kind: "all" }],
+    ...seed || {}
+  };
+  for (const fn of listeners) fn();
+  return state;
+}
+function usePanelState() {
+  return useSyncExternalStore(subscribePanel, getPanelState);
+}
+
+// src/actions.ts
+function activeAppFrom(state2) {
+  const tab = state2.tabs.find((t) => t.kind === "app" && t.id === state2.active) || state2.tabs.find((t) => t.kind === "app");
+  return tab?.app ?? null;
+}
+function errorMessage(err) {
+  return err instanceof Error ? err.message : String(err);
+}
+function pushAppTab(app) {
+  const s = getPanelState();
+  const id = "app:" + app.id;
+  if (!s.tabs.some((t) => t.id === id)) {
+    setPanelState({ tabs: [...s.tabs, { id, title: app.name || app.id, kind: "app", app }] });
+  }
+  return id;
+}
+function asCustomPalettes(value) {
+  return value;
+}
+function createPanelActions(host, getRootEl, i18n) {
+  setPanelState({ capabilities: capabilitiesOf(host), locale: i18n.locale, emptyText: host.emptyText });
+  return {
+    openAppTab: (app) => {
+      const id = pushAppTab(app);
+      setPanelState({ active: id });
+      host.frame.mount(app.id);
+    },
+    closeTab: (id) => {
+      if (id === "all") return;
+      const s = getPanelState();
+      const tab = s.tabs.find((t) => t.id === id);
+      setPanelState({
+        tabs: s.tabs.filter((t) => t.id !== id),
+        active: s.active === id ? "all" : s.active
+      });
+      if (tab?.app) host.frame.unmount(tab.app.id);
+    },
+    switchTab: (id) => {
+      setPanelState({ active: id });
+      const s = getPanelState();
+      const tab = s.tabs.find((t) => t.id === id && t.kind === "app");
+      if (tab?.app) host.frame.mount(tab.app.id);
+    },
+    setDock: (next) => {
+      setPanelState({ dock: next });
+      try {
+        localStorage.setItem("mma-dock", next);
+      } catch {
+      }
+    },
+    setQuery: (q) => setPanelState({ query: q }),
+    toggleThemePop: () => setPanelState({ themePopOpen: !getPanelState().themePopOpen }),
+    setAppearance: (next, scope) => {
+      const s = getPanelState();
+      const theme = next.theme ? String(next.theme) : s.theme;
+      const palette = next.palette ? String(next.palette) : s.palette;
+      setPanelState({ theme, palette });
+      const root = getRootEl();
+      if (root) {
+        applyThemeTo(root, theme, palette, asCustomPalettes(s.customPalettes));
+      }
+      if (scope === "app") {
+        const app = activeAppFrom(getPanelState());
+        if (app && host.appTheme) {
+          const nextTheme = { theme, palette };
+          host.appTheme.save(app.id, nextTheme).catch(() => {
+          });
+          const cur = getPanelState();
+          setPanelState({
+            apps: cur.apps.some((a) => a.id === app.id) ? cur.apps.map((a) => a.id === app.id ? { ...a, theme: nextTheme } : a) : [...cur.apps, { ...app, theme: nextTheme }],
+            tabs: cur.tabs.map(
+              (t) => t.app?.id === app.id ? { ...t, app: { ...t.app, theme: nextTheme } } : t
+            )
+          });
+        }
+      } else {
+        host.persistTheme?.(theme, palette);
+      }
+      host.frame.syncEnv?.();
+    },
+    setThemeScope: (scope) => setPanelState({ themeScope: scope }),
+    clearAppTheme: () => {
+      const app = activeAppFrom(getPanelState());
+      if (app && host.appTheme) {
+        host.appTheme.clear(app.id).catch(() => {
+        });
+        const cur = getPanelState();
+        setPanelState({
+          apps: cur.apps.map((a) => a.id === app.id ? { ...a, theme: null } : a),
+          tabs: cur.tabs.map(
+            (t) => t.app?.id === app.id ? { ...t, app: { ...t.app, theme: null } } : t
+          )
+        });
+        host.frame.syncEnv?.();
+      }
+    },
+    getActiveApp: () => activeAppFrom(getPanelState()),
+    toggleSettings: (open) => {
+      setPanelState({ settingsOpen: open, cfgMsg: open ? "" : getPanelState().cfgMsg });
+      if (open && host.config) {
+        host.config.load().then((cfg) => {
+          setPanelState({ cfg, cfgVersion: getPanelState().cfgVersion + 1 });
+        }).catch(() => {
+        });
+      }
+    },
+    getCfg: () => getPanelState().cfg,
+    saveHostConfig: (form) => {
+      if (!host.config) return;
+      host.config.save(form).then(() => {
+        setPanelState({
+          cfg: { ...form },
+          cfgMsg: i18n.t("config.saved"),
+          cfgVersion: getPanelState().cfgVersion + 1
+        });
+      }).catch((e) => {
+        setPanelState({ cfgMsg: i18n.t("config.error", { message: errorMessage(e) }) });
+      });
+    },
+    toggleBrowse: (kind) => {
+      const s = getPanelState();
+      if (s.browseOpen) {
+        setPanelState({ browseOpen: false });
+        return;
+      }
+      const app = activeAppFrom(s);
+      if (!app) return;
+      const k = kind === "storage" ? "storage" : "history";
+      if (k === "history" && !host.history) return;
+      if (k === "storage" && !host.storage) return;
+      setPanelState({
+        browseOpen: true,
+        browseKind: k,
+        browseAppId: app.id,
+        browseAppName: app.name || app.id,
+        browseDetail: null,
+        browseTable: null,
+        browseTableValue: null,
+        browseOpenFile: null,
+        browseError: null,
+        browseList: [],
+        browseLoading: true
+      });
+      if (k === "history" && host.history) {
+        host.history.list(app.id).then((list) => {
+          setPanelState({ browseList: list, browseLoading: false });
+        }).catch((e) => setPanelState({ browseError: errorMessage(e), browseLoading: false }));
+      } else if (host.storage) {
+        host.storage.listTables(app.id).then((list) => {
+          setPanelState({ browseList: list, browseLoading: false });
+        }).catch((e) => setPanelState({ browseError: errorMessage(e), browseLoading: false }));
+      }
+    },
+    loadCommitDetail: (id) => {
+      const s = getPanelState();
+      if (!host.history || !s.browseAppId) return;
+      setPanelState({ browseDetail: { id, loading: true } });
+      host.history.detail(s.browseAppId, id).then((c) => {
+        setPanelState({ browseDetail: c });
+      }).catch((e) => setPanelState({ browseDetail: { id, error: errorMessage(e), files: [] } }));
+    },
+    loadTable: (name) => {
+      const s = getPanelState();
+      if (!host.storage || !s.browseAppId) return;
+      setPanelState({ browseTable: name, browseTableValue: null, browseLoading: true });
+      host.storage.readTable(s.browseAppId, name).then((v) => {
+        setPanelState({ browseTableValue: v, browseLoading: false });
+      }).catch(
+        (e) => setPanelState({ browseTableValue: { __error__: errorMessage(e) }, browseLoading: false })
+      );
+    },
+    browseBack: () => setPanelState({ browseDetail: null, browseTable: null, browseTableValue: null, browseOpenFile: null }),
+    browseFile: (path) => setPanelState({ browseOpenFile: getPanelState().browseOpenFile === path ? null : path }),
+    reloadActive: () => {
+      const app = activeAppFrom(getPanelState());
+      if (app) host.frame.reload(app.id);
+    },
+    askDelete: () => {
+      const app = activeAppFrom(getPanelState());
+      if (app) setPanelState({ pendingDelete: app.id });
+    },
+    hideModal: () => setPanelState({ pendingDelete: null }),
+    confirmDelete: async () => {
+      const s = getPanelState();
+      const id = s.pendingDelete;
+      if (!id) return;
+      setPanelState({ pendingDelete: null });
+      if (host.deleteApp) {
+        await host.deleteApp(id).catch(() => {
+        });
+      }
+      const tab = s.tabs.find((t) => t.id === "app:" + id);
+      setPanelState({
+        tabs: getPanelState().tabs.filter((t) => t.id !== "app:" + id),
+        active: getPanelState().active === "app:" + id ? "all" : getPanelState().active,
+        apps: getPanelState().apps.filter((a) => a.id !== id)
+      });
+      if (tab?.app) host.frame.unmount(tab.app.id);
+    },
+    closeDashboard: () => host.closePanel(),
+    fetchApps: () => {
+      setPanelState({ loading: true, error: null, emptyText: host.emptyText });
+      host.fetchApps().then((apps) => {
+        setPanelState({ apps, loading: false });
+      }).catch((e) => {
+        setPanelState({
+          error: isHostUnreachable(e) ? i18n.t("list.hostUnreachable", { url: e.url }) : errorMessage(e),
+          loading: false
+        });
+      });
+    },
+    setCardStyle: (v) => setPanelState({ cardStyle: v })
+  };
+}
+function defaultHideThemePop() {
+  if (!getPanelState().themePopOpen) return false;
+  setPanelState({ themePopOpen: false });
+  return true;
+}
+function clampPaletteId(v) {
+  return clampPalette(v);
+}
+var PanelActionsContext = React.createContext(null);
+var PanelI18nContext = React.createContext(null);
+function PanelProvider({
+  actions,
+  i18n,
+  children
+}) {
+  return /* @__PURE__ */ jsx(PanelI18nContext.Provider, { value: i18n, children: /* @__PURE__ */ jsx(PanelActionsContext.Provider, { value: actions, children }) });
+}
+function usePanelActions() {
+  const ctx = React.useContext(PanelActionsContext);
+  if (!ctx) throw new Error("usePanelActions must be used inside <PanelProvider>");
+  return ctx;
+}
+function usePanelI18n() {
+  const ctx = React.useContext(PanelI18nContext);
+  if (!ctx) throw new Error("usePanelI18n must be used inside <PanelProvider>");
+  return ctx;
+}
+
+// src/lib.ts
+function hue(id) {
+  let h = 0;
+  const s = String(id || "");
+  for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) % 360;
+  return h;
+}
+function appBlurb(a) {
+  return String(a.description || a.id || "");
+}
+function monoOf(a) {
+  return String(a.acronym || (a.name || "?").slice(0, 2) || "?");
+}
+function Loading() {
+  const { t } = usePanelI18n();
+  return /* @__PURE__ */ jsxs("div", { className: "mma-load", role: "status", "aria-label": t("load.label"), children: [
+    /* @__PURE__ */ jsx("div", { className: "mma-load-art", "aria-hidden": "true", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 88 64", fill: "none", children: [
+      /* @__PURE__ */ jsx("rect", { x: "10", y: "8", width: "68", height: "48", rx: "10", stroke: "currentColor", strokeWidth: "1.6", opacity: ".35" }),
+      /* @__PURE__ */ jsx("rect", { x: "10", y: "8", width: "68", height: "12", rx: "10", fill: "currentColor", opacity: ".08" }),
+      /* @__PURE__ */ jsx("circle", { cx: "20", cy: "14", r: "2.2", fill: "currentColor", opacity: ".35" }),
+      /* @__PURE__ */ jsx("rect", { x: "26", y: "12.2", width: "18", height: "3.6", rx: "1.8", fill: "currentColor", opacity: ".22" }),
+      /* @__PURE__ */ jsx("rect", { x: "20", y: "28", width: "28", height: "4", rx: "2", fill: "currentColor", opacity: ".16" }),
+      /* @__PURE__ */ jsx("rect", { x: "20", y: "36", width: "40", height: "4", rx: "2", fill: "currentColor", opacity: ".1" }),
+      /* @__PURE__ */ jsx("rect", { x: "20", y: "44", width: "22", height: "4", rx: "2", fill: "currentColor", opacity: ".08" }),
+      /* @__PURE__ */ jsx("path", { d: "M62 40c6 0 10 5 10 10", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", opacity: ".85" }),
+      /* @__PURE__ */ jsx("circle", { cx: "72", cy: "50", r: "3.2", fill: "currentColor", opacity: ".9" })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "mma-load-dots", children: [
+      /* @__PURE__ */ jsx("i", {}),
+      /* @__PURE__ */ jsx("i", {}),
+      /* @__PURE__ */ jsx("i", {})
+    ] })
+  ] });
+}
+function Mark({ app, style }) {
+  const mono = monoOf(app);
+  if (style === "etch") {
+    return /* @__PURE__ */ jsx("span", { className: "mma-etch", style: { "--h": hue(app.id) }, children: mono });
+  }
+  if (style === "stamp") {
+    return /* @__PURE__ */ jsx("span", { className: "mma-stamp", style: { "--h": hue(app.id) }, children: mono });
+  }
+  return /* @__PURE__ */ jsx("span", { className: "mma-mono", style: { "--h": hue(app.id) }, children: mono });
+}
+function AppCard({ app }) {
+  const s = usePanelState();
+  const actions = usePanelActions();
+  const { t } = usePanelI18n();
+  const open = s.tabs.some((tab) => tab.id === "app:" + app.id);
+  const commits = Number(app.commits || 0);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "mma-card",
+      style: { "--h": hue(app.id) },
+      onClick: () => actions.openAppTab(app),
+      children: [
+        /* @__PURE__ */ jsx(Mark, { app, style: s.cardStyle }),
+        /* @__PURE__ */ jsx("h3", { children: app.name || app.id }),
+        /* @__PURE__ */ jsx("p", { children: appBlurb(app) }),
+        commits > 0 || open ? /* @__PURE__ */ jsxs("span", { className: "mma-meta", children: [
+          commits > 0 ? /* @__PURE__ */ jsx("span", { className: "mma-ver", children: t("list.commits", { count: commits }) }) : null,
+          open ? /* @__PURE__ */ jsxs("span", { className: "mma-open", children: [
+            /* @__PURE__ */ jsx("i", {}),
+            t("list.open")
+          ] }) : null
+        ] }) : null
+      ]
+    }
+  );
+}
+function AppRow({ app }) {
+  const s = usePanelState();
+  const actions = usePanelActions();
+  const { t } = usePanelI18n();
+  const open = s.tabs.some((tab) => tab.id === "app:" + app.id);
+  const commits = Number(app.commits || 0);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "mma-row",
+      style: { "--h": hue(app.id) },
+      onClick: () => actions.openAppTab(app),
+      children: [
+        /* @__PURE__ */ jsx(Mark, { app, style: s.cardStyle }),
+        /* @__PURE__ */ jsxs("span", { className: "mma-twrap", children: [
+          /* @__PURE__ */ jsx("span", { className: "mma-t", children: app.name || app.id }),
+          /* @__PURE__ */ jsx("small", { children: appBlurb(app) })
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "mma-right", children: [
+          open ? /* @__PURE__ */ jsxs("span", { className: "mma-open", children: [
+            /* @__PURE__ */ jsx("i", {}),
+            t("list.open")
+          ] }) : commits > 0 ? /* @__PURE__ */ jsx("span", { className: "mma-ver", children: t("list.commits", { count: commits }) }) : null,
+          /* @__PURE__ */ jsx("svg", { className: "mma-chev", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M9.5 6l6 6-6 6" }) })
+        ] })
+      ]
+    }
+  );
+}
+function Search() {
+  const s = usePanelState();
+  const actions = usePanelActions();
+  const { t } = usePanelI18n();
+  return /* @__PURE__ */ jsxs("div", { className: "mma-search", children: [
+    /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+      /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
+      /* @__PURE__ */ jsx("path", { d: "M20 20l-3-3" })
+    ] }),
+    /* @__PURE__ */ jsx("input", { type: "search", placeholder: t("list.search"), value: s.query, onChange: (e) => actions.setQuery(e.target.value) })
+  ] });
+}
+function AppList() {
+  const s = usePanelState();
+  const actions = usePanelActions();
+  const { t } = usePanelI18n();
+  const q = String(s.query || "").trim().toLowerCase();
+  const apps = q ? s.apps.filter((a) => [a.name, a.id, a.description].join(" ").toLowerCase().includes(q)) : s.apps;
+  if (s.loading && !s.apps.length) return /* @__PURE__ */ jsx(Loading, {});
+  if (s.error) {
+    return /* @__PURE__ */ jsxs("div", { className: "mma-error", children: [
+      t("list.loadError", { message: s.error }),
+      " ",
+      /* @__PURE__ */ jsx("button", { type: "button", className: "mma-textbtn", onClick: () => actions.fetchApps(), children: t("list.retry") })
+    ] });
+  }
+  if (!s.apps.length) {
+    return /* @__PURE__ */ jsx("div", { className: "mma-empty", children: s.emptyText || t("list.empty") });
+  }
+  if (!apps.length) return /* @__PURE__ */ jsx("div", { className: "mma-empty", children: t("list.noMatch", { query: s.query }) });
+  const Item = s.dock === "side" ? AppRow : AppCard;
+  return /* @__PURE__ */ jsx("div", { className: "mma-grid", children: apps.map((app) => /* @__PURE__ */ jsx(Item, { app }, app.id)) });
+}
+function ListRegion() {
+  const s = usePanelState();
+  const { t } = usePanelI18n();
+  return /* @__PURE__ */ jsxs("div", { className: "mma-list", id: "mma-list", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mma-list-head", children: [
+      /* @__PURE__ */ jsx("h2", { children: t("list.title") }),
+      /* @__PURE__ */ jsx("span", { id: "mma-app-count", children: t("list.count", { count: s.apps.length }) })
+    ] }),
+    /* @__PURE__ */ jsx(Search, {}),
+    /* @__PURE__ */ jsx("div", { id: "mma-list-body", children: /* @__PURE__ */ jsx(AppList, {}) })
+  ] });
+}
+function isCommit(value) {
+  return typeof value === "object" && value !== null && "id" in value && "message" in value;
+}
+function isStorageTable(value) {
+  return typeof value === "object" && value !== null && "name" in value;
+}
+function DiffPreview({ text }) {
+  const lines = text.replace(/\n$/, "").split("\n");
+  return /* @__PURE__ */ jsx("pre", { className: "mma-preview mma-diff-preview", children: lines.map((line, i) => {
+    const kind = line.startsWith("+") ? "add" : line.startsWith("-") ? "del" : "ctx";
+    return /* @__PURE__ */ jsxs("span", { className: `mma-diff-line mma-diff-line--${kind}`, children: [
+      line || " ",
+      "\n"
+    ] }, i);
+  }) });
+}
+function CommitItem({ c }) {
+  const actions = usePanelActions();
+  const { t } = usePanelI18n();
+  const files = (c.files || []).length;
+  let add = 0;
+  let del = 0;
+  for (const f of c.files || []) {
+    if ((f.add || 0) > 0) add += f.add || 0;
+    if ((f.del || 0) > 0) del += f.del || 0;
+  }
+  return /* @__PURE__ */ jsxs("button", { type: "button", className: "mma-bitem", onClick: () => actions.loadCommitDetail(c.id), title: c.message, children: [
+    /* @__PURE__ */ jsx("b", { className: "mma-commit-msg mma-commit-msg--clamp2", children: c.message }),
+    /* @__PURE__ */ jsxs("span", { className: "meta", children: [
+      /* @__PURE__ */ jsx("code", { children: String(c.id).slice(0, 7) }),
+      /* @__PURE__ */ jsx("span", { children: c.time }),
+      /* @__PURE__ */ jsx("span", { children: t("browse.files", { count: files }) }),
+      add ? /* @__PURE__ */ jsxs("span", { className: "mma-plus", children: [
+        "+",
+        add
+      ] }) : null,
+      del ? /* @__PURE__ */ jsxs("span", { className: "mma-minus", children: [
+        "-",
+        del
+      ] }) : null
+    ] })
+  ] });
+}
+function StorageItem({ table }) {
+  const actions = usePanelActions();
+  return /* @__PURE__ */ jsxs("button", { type: "button", className: "mma-bitem", onClick: () => actions.loadTable(table.name), children: [
+    /* @__PURE__ */ jsx("b", { children: table.name }),
+    /* @__PURE__ */ jsxs("span", { className: "meta", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        table.size || 0,
+        " B"
+      ] }),
+      /* @__PURE__ */ jsx("span", { children: table.updatedAt || "" })
+    ] })
+  ] });
+}
+function CommitDetail() {
+  const s = usePanelState();
+  const actions = usePanelActions();
+  const { t } = usePanelI18n();
+  const [msgExpanded, setMsgExpanded] = React.useState(false);
+  const d = s.browseDetail;
+  React.useEffect(() => {
+    setMsgExpanded(false);
+  }, [d?.id]);
+  if (!d) return null;
+  if (d.loading) return /* @__PURE__ */ jsx("div", { className: "mma-bempty", children: t("browse.loading") });
+  if (d.error) return /* @__PURE__ */ jsx("div", { className: "mma-berr", children: d.error });
+  const longMsg = (d.message || "").length > 80 || (d.message || "").includes("\n");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "mma-browse-head mma-browse-head--tools", children: /* @__PURE__ */ jsx("div", { className: "mma-btns", children: /* @__PURE__ */ jsx("button", { type: "button", onClick: () => actions.browseBack(), children: t("browse.back") }) }) }),
+    /* @__PURE__ */ jsxs("div", { className: "mma-commit-meta", children: [
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: msgExpanded ? "mma-commit-msg" : "mma-commit-msg mma-commit-msg--clamp3",
+          title: d.message,
+          children: d.message
+        }
+      ),
+      longMsg ? /* @__PURE__ */ jsx("button", { type: "button", className: "mma-commit-msg-toggle", onClick: () => setMsgExpanded((v) => !v), children: msgExpanded ? t("browse.collapseMsg") : t("browse.expandMsg") }) : null,
+      /* @__PURE__ */ jsxs("div", { className: "meta mma-commit-ids", children: [
+        /* @__PURE__ */ jsx("code", { children: String(d.id || "").slice(0, 7) }),
+        /* @__PURE__ */ jsx("span", { children: d.time })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mma-files", children: [
+      (d.files || []).map((f) => {
+        const open = s.browseOpenFile === f.path;
+        const add = f.add || 0;
+        const del = f.del || 0;
+        return /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "mma-fitem",
+              "data-open": open ? "1" : void 0,
+              onClick: () => actions.browseFile(f.path),
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "mma-diff", children: [
+                  /* @__PURE__ */ jsx("span", { className: add > 0 ? "mma-plus" : "mma-diff-zero", children: add > 0 ? `+${add}` : "\xB7" }),
+                  /* @__PURE__ */ jsx("span", { className: del > 0 ? "mma-minus" : "mma-diff-zero", children: del > 0 ? `-${del}` : "\xB7" })
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "p", children: f.path }),
+                /* @__PURE__ */ jsx("svg", { className: "mma-chevron", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M9.5 6l6 6-6 6" }) })
+              ]
+            }
+          ),
+          open && f.preview ? /* @__PURE__ */ jsx(DiffPreview, { text: f.preview }) : null
+        ] }, f.path);
+      }),
+      !(d.files || []).length ? /* @__PURE__ */ jsx("div", { className: "mma-bempty", children: t("browse.noFiles") }) : null
+    ] })
+  ] });
+}
+function TableDetail() {
+  const s = usePanelState();
+  const actions = usePanelActions();
+  const { t } = usePanelI18n();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "mma-browse-head", children: [
+      /* @__PURE__ */ jsx("div", { className: "mma-btns", children: /* @__PURE__ */ jsx("button", { type: "button", onClick: () => actions.browseBack(), children: t("browse.back") }) }),
+      /* @__PURE__ */ jsx("h3", { children: s.browseTable })
+    ] }),
+    s.browseLoading ? /* @__PURE__ */ jsx("div", { className: "mma-bempty", children: t("browse.loading") }) : /* @__PURE__ */ jsx("pre", { className: "mma-preview", style: { maxHeight: "none", whiteSpace: "pre-wrap", wordBreak: "break-all" }, children: JSON.stringify(s.browseTableValue, null, 2) })
+  ] });
+}
+function Browse() {
+  const s = usePanelState();
+  const actions = usePanelActions();
+  const { t } = usePanelI18n();
+  if (!s.browseOpen) return null;
+  let content;
+  if (s.browseKind === "history" && s.browseDetail) content = /* @__PURE__ */ jsx(CommitDetail, {});
+  else if (s.browseKind === "storage" && s.browseTable !== null) content = /* @__PURE__ */ jsx(TableDetail, {});
+  else {
+    content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "mma-browse-head", children: [
+        /* @__PURE__ */ jsxs("h3", { children: [
+          s.browseKind === "history" ? t("browse.history") : t("browse.storage"),
+          /* @__PURE__ */ jsx("span", { className: "sub", children: s.browseAppName })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mma-btns", children: /* @__PURE__ */ jsx("button", { type: "button", onClick: () => actions.toggleBrowse(""), children: t("browse.close") }) })
+      ] }),
+      s.browseLoading && !s.browseList.length ? /* @__PURE__ */ jsx("div", { className: "mma-bempty", children: t("browse.loading") }) : s.browseError ? /* @__PURE__ */ jsx("div", { className: "mma-berr", children: s.browseError }) : !s.browseList.length ? /* @__PURE__ */ jsx("div", { className: "mma-bempty", children: s.browseKind === "history" ? t("browse.noCommits") : t("browse.noStorage") }) : /* @__PURE__ */ jsx("div", { className: "mma-blist", children: s.browseList.map(
+        (item, i) => s.browseKind === "history" && isCommit(item) ? /* @__PURE__ */ jsx(CommitItem, { c: item }, i) : isStorageTable(item) ? /* @__PURE__ */ jsx(StorageItem, { table: item }, i) : null
+      ) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "mma-browse", id: "mma-browse", "data-open": "1", children: /* @__PURE__ */ jsx("div", { className: "mma-browse-body", id: "mma-browse-body", children: content }) });
+}
+function Modal() {
+  const s = usePanelState();
+  const actions = usePanelActions();
+  const { t } = usePanelI18n();
+  if (!s.pendingDelete) return null;
+  const app = s.apps.find((a) => a.id === s.pendingDelete) || { id: s.pendingDelete, name: s.pendingDelete };
+  return /* @__PURE__ */ jsx("div", { className: "mma-modal", id: "mma-modal", children: /* @__PURE__ */ jsxs("div", { className: "mma-dialog", children: [
+    /* @__PURE__ */ jsx("h3", { children: t("modal.title") }),
+    /* @__PURE__ */ jsx("p", { children: t("modal.body", { name: app.name || app.id }) }),
+    /* @__PURE__ */ jsxs("div", { className: "mma-dialog-actions", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", id: "mma-dialog-cancel", onClick: () => actions.hideModal(), children: t("modal.cancel") }),
+      /* @__PURE__ */ jsx("button", { type: "button", id: "mma-dialog-ok", className: "go", onClick: () => void actions.confirmDelete(), children: t("modal.confirm") })
+    ] })
+  ] }) });
+}
+function Settings() {
+  const s = usePanelState();
+  const actions = usePanelActions();
+  const { t } = usePanelI18n();
+  const [form, setForm] = React.useState({});
+  React.useEffect(() => {
+    if (!s.settingsOpen) return;
+    setForm(s.cfg && Object.keys(s.cfg).length ? s.cfg : actions.getCfg());
+  }, [s.settingsOpen, s.cfgVersion, s.cfg, actions]);
+  if (!s.capabilities.config) return null;
+  const set = (k) => (e) => setForm((prev) => ({ ...prev, [k]: e.target.value }));
+  return /* @__PURE__ */ jsxs("div", { className: "mma-settings", id: "mma-settings", "data-open": s.settingsOpen ? "1" : "0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mma-settings-head", children: [
+      /* @__PURE__ */ jsx("h3", { children: t("settings.title") }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "mma-iconbtn", id: "mma-cfg-close", onClick: () => actions.toggleSettings(false), children: "\u2715" })
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      t("settings.hostPort"),
+      /* @__PURE__ */ jsx("input", { id: "mma-cfg-port", type: "number", value: form.hostPort || "", onChange: set("hostPort") })
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      t("settings.language"),
+      /* @__PURE__ */ jsxs("select", { id: "mma-cfg-lang", value: form.locale || form.chatLanguage || "zh-CN", onChange: set("locale"), children: [
+        /* @__PURE__ */ jsx("option", { value: "zh-CN", children: t("settings.langZh") }),
+        /* @__PURE__ */ jsx("option", { value: "en", children: t("settings.langEn") })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      t("settings.theme"),
+      /* @__PURE__ */ jsxs("select", { id: "mma-cfg-theme", value: form.theme || "light", onChange: set("theme"), children: [
+        /* @__PURE__ */ jsx("option", { value: "light", children: t("theme.light") }),
+        /* @__PURE__ */ jsx("option", { value: "dark", children: t("theme.dark") })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      t("settings.palette"),
+      /* @__PURE__ */ jsx("select", { id: "mma-cfg-palette", value: form.palette || "default", onChange: set("palette"), children: PALETTES.map((p) => /* @__PURE__ */ jsx("option", { value: p.id, children: t(`palette.${p.id}`) }, p.id)) })
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      t("settings.cardStyle"),
+      /* @__PURE__ */ jsxs("select", { id: "mma-cfg-cardstyle", value: form.cardStyle || "stamp", onChange: set("cardStyle"), children: [
+        /* @__PURE__ */ jsx("option", { value: "stamp", children: t("settings.cardStamp") }),
+        /* @__PURE__ */ jsx("option", { value: "etch", children: t("settings.cardEtch") }),
+        /* @__PURE__ */ jsx("option", { value: "hero", children: t("settings.cardHero") }),
+        /* @__PURE__ */ jsx("option", { value: "list", children: t("settings.cardList") })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      t("settings.llmProvider"),
+      /* @__PURE__ */ jsx("input", { id: "mma-cfg-provider", value: form.provider || "", onChange: set("provider") })
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      t("settings.llmModel"),
+      /* @__PURE__ */ jsx("input", { id: "mma-cfg-model", value: form.model || "", onChange: set("model") })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mma-settings-actions", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: "mma-textbtn", id: "mma-cfg-save", onClick: () => actions.saveHostConfig(form), children: t("settings.save") }),
+      /* @__PURE__ */ jsx("span", { className: "mma-settings-msg", id: "mma-cfg-msg", children: s.cfgMsg })
+    ] })
+  ] });
+}
+function Tabs() {
+  const s = usePanelState();
+  const actions = usePanelActions();
+  const { t } = usePanelI18n();
+  return /* @__PURE__ */ jsx("div", { className: "mma-tabs", id: "mma-tabs", children: s.tabs.map((tb) => {
+    const active = tb.id === s.active;
+    const close = tb.id === "all" ? null : /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "mma-tab-x",
+        role: "button",
+        "aria-label": t("tabs.close", { title: tb.title }),
+        onClick: (e) => {
+          e.stopPropagation();
+          actions.closeTab(tb.id);
+        },
+        children: "\xD7"
+      }
+    );
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "mma-tab",
+        "data-active": active ? "1" : "0",
+        title: tb.id === "all" ? t("tabs.allTitle") : tb.title,
+        onClick: () => actions.switchTab(tb.id),
+        children: [
+          /* @__PURE__ */ jsx("span", { children: tb.title }),
+          close
+        ]
+      },
+      tb.id
+    );
+  }) });
+}
+function ThemePop() {
+  const s = usePanelState();
+  const actions = usePanelActions();
+  const { t } = usePanelI18n();
+  const app = actions.getActiveApp();
+  const appTheme = app ? app.theme : null;
+  const customs = s.customPalettes || {};
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    s.themePopOpen ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "mma-pop-scrim",
+        "aria-hidden": "true",
+        onPointerDown: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          defaultHideThemePop();
+        }
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "mma-pop",
+        id: "mma-theme-pop",
+        role: "menu",
+        "data-open": s.themePopOpen ? "1" : "0",
+        onClick: (e) => e.stopPropagation(),
+        onPointerDown: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "mma-pop-seg", children: ["light", "dark"].map((mode) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-mode": mode,
+              "data-on": s.theme === mode ? "1" : "0",
+              onClick: () => actions.setAppearance({ theme: mode }, s.themeScope),
+              children: t(`theme.${mode}`)
+            },
+            mode
+          )) }),
+          /* @__PURE__ */ jsxs("div", { className: "mma-pop-list", children: [
+            PALETTES.map((p) => /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "mma-swatch",
+                "data-palette": p.id,
+                role: "menuitem",
+                "data-on": s.palette === p.id ? "1" : "0",
+                onClick: () => actions.setAppearance({ palette: p.id }, s.themeScope),
+                children: [
+                  /* @__PURE__ */ jsx("i", { className: "mma-dot", style: { background: p.swatch } }),
+                  /* @__PURE__ */ jsx("span", { children: t(`palette.${p.id}`) })
+                ]
+              },
+              p.id
+            )),
+            Object.keys(customs).map((id) => /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "mma-swatch",
+                "data-palette": id,
+                "data-custom": "1",
+                role: "menuitem",
+                "data-on": s.palette === id ? "1" : "0",
+                onClick: () => actions.setAppearance({ palette: id }, s.themeScope),
+                children: [
+                  /* @__PURE__ */ jsx("i", { className: "mma-dot", style: { background: customs[id].swatch || "#888" } }),
+                  /* @__PURE__ */ jsx("span", { children: customs[id].label || id }),
+                  /* @__PURE__ */ jsx("i", { className: "mma-custom-badge", children: t("theme.custom") })
+                ]
+              },
+              id
+            ))
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mma-pop-seg mma-scope-seg", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "data-scope": "global",
+                "data-on": s.themeScope === "global" ? "1" : "0",
+                onClick: () => actions.setThemeScope("global"),
+                children: t("theme.global")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "data-scope": "app",
+                id: "mma-scope-app",
+                title: app ? t("theme.saveTo", { name: app.name }) : t("theme.openAppFirst"),
+                "data-on": s.themeScope === "app" ? "1" : "0",
+                disabled: !app || !s.capabilities.appTheme,
+                onClick: () => actions.setThemeScope("app"),
+                children: app ? app.name : t("theme.currentApp")
+              }
+            )
+          ] }),
+          s.themeScope === "app" && appTheme ? /* @__PURE__ */ jsx("button", { type: "button", className: "mma-textbtn", id: "mma-clear-app-theme", onClick: () => actions.clearAppTheme(), children: t("theme.followGlobal") }) : null
+        ]
+      }
+    )
+  ] });
+}
+var iconProps = { size: 16, strokeWidth: 2, className: "mma-ico" };
+function Toolbar() {
+  const s = usePanelState();
+  const actions = usePanelActions();
+  const { t } = usePanelI18n();
+  const side = s.dock === "side";
+  const appTab = s.tabs.some((tab) => tab.id === s.active && tab.kind === "app");
+  const anyApp = s.tabs.some((tab) => tab.kind === "app");
+  return /* @__PURE__ */ jsxs("div", { className: "mma-toolbar", children: [
+    appTab && s.capabilities.deleteApp ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "mma-textbtn danger",
+        id: "mma-delete",
+        title: t("toolbar.delete"),
+        onClick: () => actions.askDelete(),
+        children: t("toolbar.delete")
+      }
+    ) : null,
+    appTab ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "mma-iconbtn",
+        id: "mma-reload",
+        title: t("toolbar.reload"),
+        "aria-label": t("toolbar.reload"),
+        onClick: () => actions.reloadActive(),
+        children: /* @__PURE__ */ jsx(RefreshCw, { ...iconProps })
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs("div", { className: "mma-theme-wrap", id: "mma-theme-wrap", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "mma-iconbtn",
+          id: "mma-theme-btn",
+          title: t("toolbar.theme"),
+          "aria-label": t("toolbar.theme"),
+          "aria-haspopup": "menu",
+          onClick: () => actions.toggleThemePop(),
+          children: /* @__PURE__ */ jsx(LayoutGrid, { ...iconProps })
+        }
+      ),
+      /* @__PURE__ */ jsx(ThemePop, {})
+    ] }),
+    anyApp && s.capabilities.history ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "mma-iconbtn",
+        id: "mma-history-btn",
+        title: t("toolbar.history"),
+        "aria-label": t("toolbar.history"),
+        onClick: () => actions.toggleBrowse("history"),
+        children: /* @__PURE__ */ jsx(Clock, { ...iconProps })
+      }
+    ) : null,
+    anyApp && s.capabilities.storage ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "mma-iconbtn",
+        id: "mma-storage-btn",
+        title: t("toolbar.storage"),
+        "aria-label": t("toolbar.storage"),
+        onClick: () => actions.toggleBrowse("storage"),
+        children: /* @__PURE__ */ jsx(Database, { ...iconProps })
+      }
+    ) : null,
+    s.capabilities.config ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "mma-iconbtn",
+        id: "mma-settings-btn",
+        title: t("toolbar.settings"),
+        "aria-label": t("toolbar.settings"),
+        onClick: () => actions.toggleSettings(true),
+        children: /* @__PURE__ */ jsx(Settings$1, { ...iconProps })
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "mma-iconbtn",
+        id: "mma-dock-host",
+        title: side ? t("toolbar.dockFill") : t("toolbar.dockSide"),
+        "aria-label": side ? t("toolbar.dockFill") : t("toolbar.dockSide"),
+        onClick: () => actions.setDock(side ? "fill" : "side"),
+        children: /* @__PURE__ */ jsx(PanelRight, { ...iconProps })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "mma-iconbtn",
+        id: "mma-close-host",
+        title: t("toolbar.close"),
+        "aria-label": t("toolbar.close"),
+        onClick: () => actions.closeDashboard(),
+        children: /* @__PURE__ */ jsx(X, { ...iconProps })
+      }
+    )
+  ] });
+}
+function MiniAppPanel() {
+  const s = usePanelState();
+  const listVisible = s.active === "all";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "mma-chrome", children: [
+      /* @__PURE__ */ jsx(Tabs, {}),
+      /* @__PURE__ */ jsx(Toolbar, {})
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mma-stage", children: [
+      listVisible ? /* @__PURE__ */ jsx(ListRegion, {}) : null,
+      /* @__PURE__ */ jsx("div", { id: "mma-frames", className: "mma-frames", style: { display: listVisible ? "none" : "block" } })
+    ] }),
+    /* @__PURE__ */ jsx(Settings, {}),
+    /* @__PURE__ */ jsx(Browse, {}),
+    /* @__PURE__ */ jsx(Modal, {})
+  ] });
+}
+
+// src/errors.ts
+var PanelError = class extends Error {
+  constructor(code, message, options) {
+    super(message, options?.cause !== void 0 ? { cause: options.cause } : void 0);
+    __publicField(this, "code");
+    this.name = new.target.name;
+    this.code = code;
+  }
+};
+
+// src/frame.ts
+function escapeHtml(s) {
+  return String(s == null ? "" : s).replace(/[&<>"']/g, (c) => {
+    switch (c) {
+      case "&":
+        return "&amp;";
+      case "<":
+        return "&lt;";
+      case ">":
+        return "&gt;";
+      case '"':
+        return "&quot;";
+      case "'":
+        return "&#39;";
+      default:
+        return c;
+    }
+  });
+}
+function loadingMarkup() {
+  return `<div class="mma-load" role="status" aria-label="\u52A0\u8F7D\u4E2D">
+<div class="mma-load-art" aria-hidden="true">
+<svg viewBox="0 0 88 64" fill="none">
+<rect x="10" y="8" width="68" height="48" rx="10" stroke="currentColor" stroke-width="1.6" opacity=".35"/>
+<rect x="10" y="8" width="68" height="12" rx="10" fill="currentColor" opacity=".08"/>
+<circle cx="20" cy="14" r="2.2" fill="currentColor" opacity=".35"/>
+<rect x="26" y="12.2" width="18" height="3.6" rx="1.8" fill="currentColor" opacity=".22"/>
+<rect x="20" y="28" width="28" height="4" rx="2" fill="currentColor" opacity=".16"/>
+<rect x="20" y="36" width="40" height="4" rx="2" fill="currentColor" opacity=".1"/>
+<rect x="20" y="44" width="22" height="4" rx="2" fill="currentColor" opacity=".08"/>
+<path d="M62 40c6 0 10 5 10 10" stroke="var(--primary,#3b82f6)" stroke-width="1.8" stroke-linecap="round" opacity=".85"/>
+<circle cx="72" cy="50" r="3.2" fill="var(--primary,#3b82f6)" opacity=".9"/>
+</svg>
+<div class="mma-load-dots"><i></i><i></i><i></i></div></div></div>`;
+}
+function createFrameController(opts) {
+  const { container: initial2, urlOf, envOf } = opts;
+  let container = initial2 ?? null;
+  const map = /* @__PURE__ */ new Map();
+  return {
+    map,
+    url: (appId) => urlOf(appId),
+    setContainer(el) {
+      container = el;
+    },
+    postEnv(appId) {
+      const rec = map.get(appId);
+      const w = rec?.iframe.contentWindow;
+      if (!w) return;
+      const env = envOf(appId);
+      try {
+        w.postMessage({ type: "mma-set-env", theme: env.theme, palette: env.palette, dock: env.dock }, "*");
+      } catch {
+      }
+    },
+    postEnvAll() {
+      for (const id of map.keys()) this.postEnv(id);
+    },
+    mount(appId, title) {
+      for (const rec2 of map.values()) rec2.wrap.style.display = "none";
+      let rec = map.get(appId);
+      if (!rec) {
+        const wrap = document.createElement("div");
+        wrap.className = "mma-frame";
+        wrap.setAttribute("data-app", appId);
+        wrap.innerHTML = `${loadingMarkup()}<iframe title="${escapeHtml(title || appId)}"></iframe>`;
+        if (!container) return;
+        container.appendChild(wrap);
+        const iframe = wrap.querySelector("iframe");
+        if (!iframe) return;
+        iframe.src = urlOf(appId);
+        iframe.addEventListener("load", () => {
+          const overlay = wrap.querySelector(".mma-load");
+          overlay?.parentNode?.removeChild(overlay);
+          this.postEnvAll();
+        });
+        rec = { wrap, iframe };
+        map.set(appId, rec);
+      }
+      rec.wrap.style.display = "flex";
+    },
+    unmount(appId) {
+      const rec = map.get(appId);
+      if (!rec) return;
+      rec.wrap.parentNode?.removeChild(rec.wrap);
+      map.delete(appId);
+    },
+    unmountAll() {
+      for (const id of [...map.keys()]) this.unmount(id);
+    },
+    reload(appId) {
+      const rec = map.get(appId);
+      if (!rec) return;
+      if (!rec.wrap.querySelector(".mma-load")) rec.wrap.insertAdjacentHTML("afterbegin", loadingMarkup());
+      rec.iframe.src = `${urlOf(appId)}&_=${Date.now()}`;
+    }
+  };
+}
+
+// src/locales/en.json
+var en_default = {
+  tabs: {
+    all: "All",
+    allTitle: "All mini apps",
+    close: "Close {{title}}"
+  },
+  toolbar: {
+    delete: "Delete",
+    reload: "Reload",
+    theme: "Theme",
+    history: "History",
+    storage: "Storage",
+    settings: "Settings",
+    dockFill: "Fill main area",
+    dockSide: "Pin to chat right",
+    close: "Close"
+  },
+  theme: {
+    light: "Light",
+    dark: "Dark",
+    custom: "Custom",
+    global: "Global",
+    currentApp: "Current app",
+    openAppFirst: "Open an app first",
+    saveTo: 'Save to "{{name}}"',
+    followGlobal: "Follow global (clear app theme)"
+  },
+  palette: {
+    default: "Default",
+    tokyo: "Tokyo Night",
+    forest: "Everforest",
+    matcha: "Strawberry Matcha",
+    yellow: "Yellow Pill",
+    zoro: "Three Swords",
+    hokage: "Hokage Dawn",
+    slate: "Slate"
+  },
+  list: {
+    title: "Mini apps",
+    count: "{{count}} apps",
+    search: "Search mini apps",
+    open: "Open",
+    commits: "{{count}} commits",
+    loadError: "Failed to load list: {{message}}",
+    hostUnreachable: "Cannot reach the mini-app host ({{url}}): the host is not running or the port is taken. Free the port, or set hostPort in runtime/host.json and restart.",
+    retry: "Retry",
+    empty: "No mini apps yet.",
+    noMatch: 'No mini apps matching "{{query}}".'
+  },
+  settings: {
+    title: "Settings",
+    hostPort: "Host port",
+    language: "Language",
+    langZh: "Chinese",
+    langEn: "English",
+    theme: "Theme",
+    palette: "Palette",
+    cardStyle: "Card style",
+    cardStamp: "Stamp",
+    cardEtch: "Etch",
+    cardHero: "Hero",
+    cardList: "List",
+    llmProvider: "LLM Provider",
+    llmModel: "LLM model",
+    save: "Save"
+  },
+  modal: {
+    title: "Delete mini app",
+    body: 'This will delete "{{name}}" and its local data. This cannot be undone.',
+    cancel: "Cancel",
+    confirm: "Delete"
+  },
+  browse: {
+    history: "History",
+    storage: "Storage",
+    close: "Close",
+    loading: "Loading\u2026",
+    files: "{{count}} files",
+    back: "\u2190 Back",
+    noFiles: "No file changes",
+    noCommits: "No commits yet",
+    noStorage: "No storage files",
+    expandMsg: "Show more",
+    collapseMsg: "Show less"
+  },
+  load: {
+    label: "Loading"
+  },
+  config: {
+    saved: "Saved",
+    error: "\u2717 {{message}}"
+  }
+};
+
+// src/locales/zh-CN.json
+var zh_CN_default = {
+  tabs: {
+    all: "\u5168\u90E8",
+    allTitle: "\u5168\u90E8\u5C0F\u7A0B\u5E8F",
+    close: "\u5173\u95ED {{title}}"
+  },
+  toolbar: {
+    delete: "\u5220\u9664",
+    reload: "\u91CD\u65B0\u52A0\u8F7D",
+    theme: "\u4E3B\u9898",
+    history: "\u63D0\u4EA4\u5386\u53F2",
+    storage: "\u5B58\u50A8",
+    settings: "\u8BBE\u7F6E",
+    dockFill: "\u94FA\u6EE1\u4E3B\u533A",
+    dockSide: "\u9489\u5230\u804A\u5929\u53F3\u4FA7",
+    close: "\u5173\u95ED"
+  },
+  theme: {
+    light: "\u6D45\u8272",
+    dark: "\u6DF1\u8272",
+    custom: "\u81EA\u5B9A\u4E49",
+    global: "\u5168\u5C40",
+    currentApp: "\u5F53\u524D\u5C0F\u7A0B\u5E8F",
+    openAppFirst: "\u6253\u5F00\u5C0F\u7A0B\u5E8F\u540E\u53EF\u7528",
+    saveTo: "\u4FDD\u5B58\u5230\u300C{{name}}\u300D",
+    followGlobal: "\u8DDF\u968F\u5168\u5C40\uFF08\u6E05\u9664\u672C\u5E94\u7528\u4E3B\u9898\uFF09"
+  },
+  palette: {
+    default: "\u9ED8\u8BA4",
+    tokyo: "\u4E1C\u4EAC\u591C",
+    forest: "\u82D4\u539F",
+    matcha: "\u8349\u8393\u62B9\u8336",
+    yellow: "\u836F\u4E38\u9EC4",
+    zoro: "\u4E09\u5200\u6D41",
+    hokage: "\u706B\u5F71\u9ECE\u660E",
+    slate: "\u77F3\u58A8"
+  },
+  list: {
+    title: "\u5C0F\u7A0B\u5E8F",
+    count: "{{count}} \u4E2A",
+    search: "\u641C\u7D22\u5C0F\u7A0B\u5E8F",
+    open: "\u5DF2\u6253\u5F00",
+    commits: "{{count}} commits",
+    loadError: "\u5217\u8868\u52A0\u8F7D\u5931\u8D25\uFF1A{{message}}",
+    hostUnreachable: "\u65E0\u6CD5\u8FDE\u63A5\u5C0F\u7A0B\u5E8F host\uFF08{{url}}\uFF09\uFF1Ahost \u672A\u542F\u52A8\u6216\u7AEF\u53E3\u88AB\u5360\u7528\u3002\u8BF7\u91CA\u653E\u7AEF\u53E3\uFF0C\u6216\u7F16\u8F91 runtime/host.json \u7684 hostPort \u540E\u91CD\u542F\u3002",
+    retry: "\u91CD\u8BD5",
+    empty: "\u8FD8\u6CA1\u6709\u5C0F\u7A0B\u5E8F\u3002",
+    noMatch: "\u6CA1\u6709\u5339\u914D\u300C{{query}}\u300D\u7684\u5C0F\u7A0B\u5E8F\u3002"
+  },
+  settings: {
+    title: "\u8BBE\u7F6E",
+    hostPort: "Host \u7AEF\u53E3",
+    language: "\u754C\u9762\u8BED\u8A00",
+    langZh: "\u4E2D\u6587",
+    langEn: "English",
+    theme: "\u4E3B\u9898",
+    palette: "\u8C03\u8272\u677F",
+    cardStyle: "\u5361\u7247\u6837\u5F0F",
+    cardStamp: "\u5370\u7AE0",
+    cardEtch: "\u8680\u523B",
+    cardHero: "\u6D77\u62A5",
+    cardList: "\u5217\u8868",
+    llmProvider: "LLM Provider",
+    llmModel: "LLM \u6A21\u578B",
+    save: "\u4FDD\u5B58"
+  },
+  modal: {
+    title: "\u5220\u9664\u5C0F\u7A0B\u5E8F",
+    body: "\u5C06\u5220\u9664\u300C{{name}}\u300D\u53CA\u5176\u672C\u5730\u6570\u636E\uFF0C\u65E0\u6CD5\u64A4\u9500\u3002",
+    cancel: "\u53D6\u6D88",
+    confirm: "\u5220\u9664"
+  },
+  browse: {
+    history: "\u63D0\u4EA4\u5386\u53F2",
+    storage: "\u5B58\u50A8",
+    close: "\u5173\u95ED",
+    loading: "\u52A0\u8F7D\u4E2D\u2026",
+    files: "{{count}} \u4E2A\u6587\u4EF6",
+    back: "\u2190 \u8FD4\u56DE",
+    noFiles: "\u65E0\u6587\u4EF6\u6539\u52A8",
+    noCommits: "\u6682\u65E0\u63D0\u4EA4\u8BB0\u5F55",
+    noStorage: "\u6682\u65E0\u5B58\u50A8\u6587\u4EF6",
+    expandMsg: "\u5C55\u5F00\u5168\u6587",
+    collapseMsg: "\u6536\u8D77"
+  },
+  load: {
+    label: "\u52A0\u8F7D\u4E2D"
+  },
+  config: {
+    saved: "\u5DF2\u4FDD\u5B58",
+    error: "\u2717 {{message}}"
+  }
+};
+
+// src/types.ts
+var LOCALE_IDS = ["zh-CN", "en"];
+
+// src/i18n.ts
+var resources = {
+  "zh-CN": { translation: zh_CN_default },
+  en: { translation: en_default }
+};
+function isLocaleId(value) {
+  return LOCALE_IDS.includes(value);
+}
+function nodeEnv() {
+  const g = globalThis;
+  return g.process?.env?.NODE_ENV;
+}
+function failOnMissingKey() {
+  return nodeEnv() !== "production";
+}
+function createPanelI18n(locale) {
+  if (!isLocaleId(locale)) {
+    throw new PanelError("I18N_INVALID_LOCALE", `unsupported locale: ${String(locale)}`);
+  }
+  const i18n = createInstance();
+  void i18n.init({
+    lng: locale,
+    fallbackLng: false,
+    supportedLngs: [...LOCALE_IDS],
+    nonExplicitSupportedLngs: false,
+    load: "currentOnly",
+    defaultNS: "translation",
+    ns: ["translation"],
+    resources,
+    interpolation: { escapeValue: false },
+    returnNull: false,
+    returnEmptyString: false,
+    initImmediate: false,
+    showSupportNotice: false
+  });
+  if (!i18n.isInitialized) {
+    throw new PanelError("I18N_INIT_FAILED", `i18n failed to initialize for locale: ${locale}`);
+  }
+  return {
+    locale,
+    t(key, params) {
+      if (!i18n.exists(key)) {
+        if (failOnMissingKey()) {
+          throw new PanelError("I18N_MISSING_KEY", `missing i18n key: ${key}`);
+        }
+        return key;
+      }
+      const value = i18n.t(key, params ?? {});
+      if (typeof value !== "string") {
+        throw new PanelError("I18N_INVALID_VALUE", `i18n key did not resolve to a string: ${key}`);
+      }
+      return value;
+    }
+  };
+}
+function resolvePanelLocale(value) {
+  if (value === void 0) return "zh-CN";
+  if (!isLocaleId(value)) {
+    throw new PanelError("I18N_INVALID_LOCALE", `unsupported locale: ${String(value)}`);
+  }
+  return value;
+}
+
+// src/styles.ts
+var PANEL_CSS_TAG = "panel";
+var CSS = [
+  "#mma-host{color:var(--dsw-alias-fg,#111);background:var(--dsw-alias-bg,#f7f7f8);overflow:hidden;}",
+  "#mma-host button,#mma-host input,#mma-host select{color:inherit;font:inherit;}",
+  "#mma-host .mma-chrome{display:flex;align-items:center;gap:8px;height:46px;padding:0 10px;border-bottom:1px solid var(--dsw-alias-border,#e5e7eb);background:var(--dsw-alias-surface,#fff);flex:0 0 auto;}",
+  "#mma-host .mma-tabs{display:flex;align-items:center;gap:2px;flex:1;min-width:0;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin;}",
+  "#mma-host .mma-tab{display:inline-flex;align-items:center;flex:0 0 auto;max-width:140px;height:32px;padding:0 10px;border:0;border-bottom:2px solid transparent;background:transparent;cursor:pointer;font-size:13px;font-weight:500;color:inherit;opacity:.7;white-space:nowrap;border-radius:8px 8px 0 0;}",
+  "#mma-host .mma-tab[data-active='1']{font-weight:600;opacity:1;border-bottom-color:var(--dsw-alias-primary,#3b82f6);color:var(--dsw-alias-primary,#3b82f6);}",
+  "#mma-host .mma-tab>span{display:inline-flex;align-items:center;gap:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}",
+  "#mma-host .mma-tab-x{margin-left:6px;border:0;background:transparent;cursor:pointer;opacity:.55;color:inherit;padding:0 2px;line-height:1;font-size:14px;flex:0 0 auto;}",
+  "#mma-host [hidden]{display:none !important;}",
+  "#mma-host .mma-iconbtn{width:32px;height:32px;border:0;border-radius:8px;background:transparent;cursor:pointer;color:inherit;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;}",
+  "#mma-host .mma-iconbtn:hover{background:var(--dsw-alias-muted,#f3f4f6);}",
+  "#mma-host .mma-toolbar{display:flex;align-items:center;gap:2px;flex:0 0 auto;}",
+  "#mma-host .mma-toolbar .mma-iconbtn{width:30px;height:30px;}",
+  "#mma-host .mma-toolbar .mma-ico{display:block;}",
+  "#mma-host .mma-theme-wrap{position:relative;flex:0 0 auto;}",
+  "#mma-host .mma-pop-scrim{position:fixed;inset:0;z-index:7;background:transparent;}",
+  "#mma-host .mma-pop{display:none;position:absolute;right:0;top:40px;z-index:8;width:232px;padding:12px 14px 14px;border-radius:12px;border:1px solid var(--dsw-alias-border,#e5e7eb);background:var(--dsw-alias-surface,#fff);box-shadow:0 12px 32px var(--dsw-alias-shadow,rgba(0,0,0,.14));}",
+  "#mma-host .mma-pop[data-open='1']{display:block;}",
+  "#mma-host .mma-pop-seg{display:flex;gap:4px;margin:0 0 12px;padding:3px;border-radius:9px;background:var(--dsw-alias-muted,#f3f4f6);}",
+  "#mma-host .mma-pop-seg button{flex:1;height:28px;padding:0;line-height:1;border:0;border-radius:7px;background:transparent;cursor:pointer;font-size:12px;color:inherit;display:flex;align-items:center;justify-content:center;}",
+  "#mma-host .mma-pop-seg button[data-on='1']{background:var(--dsw-alias-surface,#fff);font-weight:600;box-shadow:0 1px 2px var(--dsw-alias-shadow,rgba(0,0,0,.06));color:var(--dsw-alias-primary,#2563eb);}",
+  "#mma-host .mma-pop-list{margin:0 0 12px;display:flex;flex-direction:column;gap:6px!important;max-height:280px;overflow-y:auto;padding:4px 0;}",
+  "#mma-host .mma-swatch{display:flex;align-items:center;gap:10px;width:100%;min-height:34px;padding:0 10px;border:0;border-radius:8px;background:transparent;cursor:pointer;color:inherit;font-size:13px;text-align:left;white-space:nowrap;overflow:hidden;}",
+  "#mma-host .mma-swatch:hover{background:var(--dsw-alias-accent,var(--dsw-alias-muted,#f3f4f6));}",
+  "#mma-host .mma-swatch[data-on='1']{background:var(--dsw-alias-accent,var(--dsw-alias-muted,#f3f4f6));font-weight:600;}",
+  "#mma-host .mma-dot{display:inline-block;width:14px;height:14px;border-radius:99px;border:1px solid var(--dsw-alias-border,#e5e7eb);flex:0 0 14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);}",
+  "#mma-host .mma-custom-badge{margin-left:auto;font-size:10px;padding:1px 6px;border-radius:99px;background:var(--dsw-alias-muted,#f3f4f6);color:var(--dsw-alias-fg,#111);opacity:.7;flex:0 0 auto;}",
+  "#mma-host .mma-swatch span{overflow:hidden;text-overflow:ellipsis;}",
+  "#mma-host .mma-swatch{border-bottom:1px solid var(--dsw-alias-border,#e5e7eb);}",
+  "#mma-host .mma-swatch:last-child{border-bottom:none;}",
+  "#mma-host .mma-swatch + .mma-swatch{border-top:0;}",
+  "#mma-host .mma-swatch:hover{border-radius:8px;}",
+  "#mma-host .mma-scope-seg{margin-top:0;padding:4px 5px 5px;border-top:1px solid var(--dsw-alias-border,#e5e7eb);}",
+  "#mma-host .mma-scope-seg button:disabled{opacity:.45;cursor:not-allowed;}",
+  "#mma-host .mma-textbtn{height:28px;padding:0 8px;border:0;border-radius:6px;background:transparent;cursor:pointer;color:inherit;opacity:.7;font-size:12px;}",
+  "#mma-host .mma-textbtn:hover{opacity:1;background:var(--dsw-alias-muted,#f3f4f6);}",
+  "#mma-host .mma-toolbar .mma-delete-btn{font-size:13px;font-weight:400;color:inherit;opacity:.8;}",
+  "#mma-host .mma-toolbar .mma-delete-btn:hover{opacity:1;color:#dc2626;background:transparent;}",
+  "#mma-host .mma-textbtn.danger:hover{color:#dc2626;}",
+  "#mma-host .mma-stage{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;position:relative;}",
+  "#mma-host .mma-list,#mma-host .mma-frames{flex:1;min-height:0;overflow:auto;}",
+  "#mma-host .mma-frames{display:none;position:relative;}",
+  "#mma-host .mma-frame{position:absolute;inset:0;display:none;flex-direction:column;}",
+  "#mma-host .mma-frame>iframe{flex:1;height:100%;min-height:0;width:100%;border:0;background:transparent;display:block;}",
+  "#mma-host .mma-list-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:18px 18px 8px;}",
+  "#mma-host .mma-list-head h2{margin:0;font-size:16px;font-weight:650;}",
+  "#mma-host .mma-list-head span{font-size:12px;opacity:.5;}",
+  "#mma-host .mma-search{margin:0 18px 12px;position:relative;}",
+  "#mma-host .mma-search input{width:100%;height:34px;box-sizing:border-box;padding:0 12px 0 32px;border:1px solid var(--dsw-alias-border,#e5e7eb);border-radius:8px;background:var(--dsw-alias-surface,#fff);color:inherit;font-size:13px;outline:none;}",
+  "#mma-host .mma-search input:focus{border-color:var(--dsw-alias-primary,#3b82f6);}",
+  "#mma-host .mma-search svg{position:absolute;left:10px;top:9px;opacity:.45;pointer-events:none;}",
+  "#mma-host .mma-grid{padding:8px 16px 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;}",
+  "#mma-host[data-dock='side'] .mma-grid{grid-template-columns:minmax(0,1fr);}",
+  "#mma-host .mma-card,#mma-host .mma-row{text-align:left;border-radius:13px;border:1px solid var(--dsw-alias-border,#e5e7eb);background:var(--dsw-alias-surface,#fff);color:var(--dsw-alias-fg,#111);cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease,background-color .22s ease;}",
+  "#mma-host .mma-card{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:16px 15px 13px;position:relative;overflow:hidden;}",
+  "#mma-host .mma-row{display:flex;align-items:center;gap:12px;padding:10px 12px;position:relative;overflow:hidden;width:100%;}",
+  "#mma-host .mma-card h3,#mma-host .mma-row .mma-t{font-size:14px;font-weight:650;margin:0;letter-spacing:.1px;position:relative;z-index:1;}",
+  "#mma-host .mma-card p,#mma-host .mma-row small{font-size:12px;color:var(--muted-foreground,inherit);opacity:.85;line-height:1.45;}",
+  "#mma-host .mma-card p{margin:0;position:relative;z-index:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}",
+  "#mma-host .mma-row .mma-twrap{flex:1;min-width:0;position:relative;z-index:1;}",
+  "#mma-host .mma-row small{display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}",
+  "#mma-host .mma-row .mma-right{margin-left:auto;display:flex;align-items:center;gap:7px;flex:0 0 auto;position:relative;z-index:1;}",
+  "#mma-host .mma-chev{color:var(--muted-foreground,inherit);opacity:.5;width:14px;height:14px;}",
+  "#mma-host .mma-meta{display:flex;align-items:center;gap:10px;margin-top:9px;position:relative;z-index:1;}",
+  "#mma-host .mma-ver{font-size:10.5px;color:var(--muted-foreground,inherit);opacity:.8;letter-spacing:.2px;white-space:nowrap;}",
+  "#mma-host .mma-open{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--dsw-alias-primary,#3b82f6);white-space:nowrap;}",
+  "#mma-host .mma-open i{width:6px;height:6px;border-radius:99px;background:var(--dsw-alias-primary,#3b82f6);}",
+  "#mma-host[data-cardstyle='hero'] .mma-card::before,#mma-host[data-cardstyle='hero'] .mma-row::before{content:'';position:absolute;top:-28px;right:-20px;width:140px;height:120px;background:radial-gradient(62% 62% at 62% 40%,hsl(var(--h,215) 80% 60% / .20),transparent 72%);pointer-events:none;}",
+  "#mma-host[data-cardstyle='hero'] .mma-card:hover,#mma-host[data-cardstyle='hero'] .mma-row:hover{background:linear-gradient(hsl(var(--h,215) 82% 60% / .10),hsl(var(--h,215) 82% 60% / .10)),var(--dsw-alias-surface,#fff);border-color:hsl(var(--h,215) 70% 60% / .5);box-shadow:0 8px 22px var(--dsw-alias-shadow,rgba(0,0,0,.12));transform:translateY(-1px);}",
+  "#mma-host[data-cardstyle='hero'] .mma-mono{font-size:52px;font-weight:800;letter-spacing:2px;line-height:1.05;position:relative;z-index:1;margin-bottom:11px;color:hsl(var(--h,215) 60% 40%);}",
+  "@supports (-webkit-background-clip:text){#mma-host[data-cardstyle='hero'] .mma-mono{background:linear-gradient(135deg,hsl(var(--h,215) 72% 42%),hsl(var(--h,215) 72% 62%));-webkit-background-clip:text;background-clip:text;color:transparent;}}",
+  "#mma-host[data-cardstyle='etch'] .mma-etch{font-size:46px;font-weight:800;letter-spacing:2px;line-height:1.02;color:transparent;-webkit-text-stroke:1.5px hsl(var(--h,215) 65% 45%);margin-bottom:10px;position:relative;z-index:1;}",
+  "#mma-host[data-cardstyle='etch'] .mma-card:hover,#mma-host[data-cardstyle='etch'] .mma-row:hover{background:linear-gradient(hsl(var(--h,215) 80% 55% / .08),hsl(var(--h,215) 80% 55% / .08)),var(--dsw-alias-surface,#fff);border-color:hsl(var(--h,215) 65% 50% / .55);box-shadow:0 8px 22px var(--dsw-alias-shadow,rgba(0,0,0,.12));transform:translateY(-1px);}",
+  "#mma-host[data-cardstyle='etch'] .mma-card:hover .mma-etch,#mma-host[data-cardstyle='etch'] .mma-row:hover .mma-etch{background:linear-gradient(135deg,hsl(var(--h,215) 72% 42%),hsl(var(--h,215) 72% 62%));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:0;}",
+  "#mma-host[data-cardstyle='stamp'] .mma-stamp{position:absolute;top:13px;right:13px;width:44px;height:44px;border:1.5px solid var(--dsw-alias-fg,#111);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;letter-spacing:1px;color:var(--dsw-alias-fg,#111);background:transparent;transition:background-color .18s ease,color .18s ease,transform .18s ease;}",
+  "#mma-host[data-cardstyle='stamp'] .mma-card:hover .mma-stamp,#mma-host[data-cardstyle='stamp'] .mma-row:hover .mma-stamp{background:var(--dsw-alias-fg,#111);color:var(--dsw-alias-surface,#fff);transform:scale(1.05);}",
+  "#mma-host[data-cardstyle='stamp'] .mma-card:hover,#mma-host[data-cardstyle='stamp'] .mma-row:hover{background:linear-gradient(hsl(var(--h,215) 30% 55% / .07),hsl(var(--h,215) 30% 55% / .07)),var(--dsw-alias-surface,#fff);border-color:var(--dsw-alias-fg,#111);box-shadow:0 8px 22px var(--dsw-alias-shadow,rgba(0,0,0,.12));transform:translateY(-1px);}",
+  "#mma-host[data-cardstyle='stamp'] .mma-card h3,#mma-host[data-cardstyle='stamp'] .mma-card p{padding-right:52px;}",
+  "#mma-host[data-cardstyle='stamp'] .mma-row .mma-stamp{position:static;width:36px;height:36px;font-size:12px;border-radius:8px;flex:0 0 36px;}",
+  "#mma-host .mma-open-dot{width:7px;height:7px;border-radius:99px;background:var(--dsw-alias-primary,#3b82f6);display:inline-block;}",
+  "#mma-host .mma-empty{padding:24px;opacity:.75;line-height:1.6;}",
+  "#mma-host .mma-error{padding:24px;color:#b91c1c;}",
+  ".mma-load{flex:1;min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--dsw-alias-fg,#111);}",
+  ".mma-load-art{position:relative;width:88px;height:72px;}",
+  ".mma-load-art svg{display:block;width:88px;height:64px;}",
+  ".mma-load-dots{display:flex;gap:5px;justify-content:center;margin-top:2px;}",
+  ".mma-load-dots i{width:6px;height:6px;border-radius:50%;background:var(--dsw-alias-primary,#3b82f6);opacity:.35;animation:mma-dot 1s ease-in-out infinite;}",
+  ".mma-load-dots i:nth-child(2){animation-delay:.15s;}",
+  ".mma-load-dots i:nth-child(3){animation-delay:.3s;}",
+  "@keyframes mma-dot{0%,80%,100%{transform:translateY(0);opacity:.3}40%{transform:translateY(-5px);opacity:1}}",
+  ".mma-iframe-wrap{position:relative;flex:1 1 auto;min-height:0;height:100%;display:flex;flex-direction:column;}",
+  ".mma-iframe-wrap .mma-load,#mma-host .mma-frame .mma-load{position:absolute;inset:0;background:var(--dsw-alias-bg,#f7f7f8);z-index:1;}",
+  "#mma-host .mma-modal{position:absolute;inset:0;background:rgba(0,0,0,.35);z-index:5;display:flex;align-items:center;justify-content:center;padding:24px;}",
+  "#mma-host .mma-modal[hidden]{display:none;}",
+  "#mma-host .mma-dialog{width:min(360px,100%);background:var(--dsw-alias-surface,#fff);color:var(--dsw-alias-fg,#111);border:1px solid var(--dsw-alias-border,#e5e7eb);border-radius:var(--radius,12px);padding:18px;box-shadow:0 12px 40px var(--dsw-alias-shadow,rgba(0,0,0,.18));}",
+  "#mma-host .mma-dialog h3{margin:0 0 8px;font-size:15px;}",
+  "#mma-host .mma-dialog p{margin:0 0 16px;font-size:13px;opacity:.75;line-height:1.5;}",
+  "#mma-host .mma-dialog-actions{display:flex;justify-content:flex-end;gap:8px;}",
+  "#mma-host .mma-dialog-actions button{height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--dsw-alias-border,#e5e7eb);background:var(--dsw-alias-surface,#fff);cursor:pointer;}",
+  "#mma-host .mma-dialog-actions .go{background:#dc2626;color:#fff;border-color:#dc2626;}",
+  "#mma-host .mma-settings{position:absolute;inset:0;background:var(--dsw-alias-bg,#f7f7f8);z-index:4;overflow:auto;padding:20px 22px 32px;display:none;}",
+  "#mma-host .mma-settings[data-open='1']{display:block;}",
+  "#mma-host .mma-settings h3{margin:0 0 6px;font-size:16px;}",
+  "#mma-host .mma-settings-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}",
+  "#mma-host .mma-settings label{display:block;margin-bottom:12px;font-size:12px;opacity:.75;}",
+  "#mma-host .mma-settings input,#mma-host .mma-settings select{display:block;width:100%;margin-top:4px;height:32px;padding:0 10px;border:1px solid var(--dsw-alias-border,#e5e7eb);border-radius:8px;background:var(--dsw-alias-surface,#fff);color:inherit;font-size:13px;box-sizing:border-box;}",
+  "#mma-host .mma-settings-actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px;margin-top:18px;}",
+  "#mma-host .mma-settings-msg{font-size:12px;opacity:.75;line-height:1.4;text-align:right;width:100%;}",
+  "#mma-host .mma-settings-msg.err{color:#dc2626;}",
+  "#mma-host #mma-cfg-save{height:34px;padding:0 18px;border:1px solid var(--dsw-alias-border,#e5e7eb);border-radius:8px;background:var(--dsw-alias-surface,#fff);color:inherit;font-size:14px;font-weight:600;opacity:1;cursor:pointer;}",
+  "#mma-host #mma-cfg-save:hover{background:var(--dsw-alias-muted,#f3f4f6);border-color:var(--dsw-alias-primary,#2563eb);color:var(--dsw-alias-primary,#2563eb);}",
+  "#mma-host .mma-browse{position:absolute;inset:0;background:var(--dsw-alias-bg,#f7f7f8);z-index:3;overflow:auto;padding:16px 18px;display:none;}",
+  "#mma-host .mma-browse[data-open='1']{display:block;}",
+  "#mma-host .mma-browse-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}",
+  "#mma-host .mma-browse-head--tools{justify-content:flex-start;margin-bottom:8px;}",
+  "#mma-host .mma-browse-head h3{margin:0;font-size:15px;}",
+  "#mma-host .mma-browse-head .sub{margin-left:8px;font-size:12px;opacity:.55;font-weight:400;}",
+  "#mma-host .mma-btns button{border:0;background:transparent;cursor:pointer;color:inherit;opacity:.7;font-size:12px;padding:4px 6px;}",
+  "#mma-host .mma-commit-meta{margin:0 0 12px;}",
+  "#mma-host .mma-commit-msg{margin:0 0 6px;font-size:13px;font-weight:600;line-height:1.45;word-break:break-word;}",
+  "#mma-host .mma-commit-msg--clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}",
+  "#mma-host .mma-commit-msg--clamp3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}",
+  "#mma-host .mma-commit-msg-toggle{border:0;background:transparent;cursor:pointer;color:inherit;opacity:.65;font-size:12px;padding:0 0 6px;}",
+  "#mma-host .mma-commit-msg-toggle:hover{opacity:1;}",
+  "#mma-host .mma-commit-ids{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;opacity:.75;}",
+  "#mma-host .mma-blist{display:flex;flex-direction:column;gap:4px;}",
+  "#mma-host .mma-bitem{text-align:left;padding:10px 12px;border:1px solid var(--dsw-alias-border,#e5e7eb);border-radius:10px;background:var(--dsw-alias-surface,#fff);cursor:pointer;}",
+  "#mma-host .mma-bitem b,#mma-host .mma-bitem .mma-commit-msg{font-size:13px;display:block;margin-bottom:4px;font-weight:600;}",
+  "#mma-host .mma-bitem .meta{display:flex;gap:10px;font-size:11px;opacity:.65;flex-wrap:wrap;}",
+  "#mma-host .mma-plus{color:#16a34a;font-variant-numeric:tabular-nums;}",
+  "#mma-host .mma-minus{color:#dc2626;font-variant-numeric:tabular-nums;}",
+  "#mma-host .mma-diff-zero{opacity:.35;}",
+  "#mma-host .mma-files{display:flex;flex-direction:column;gap:6px;}",
+  "#mma-host .mma-fitem{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--dsw-alias-border,#e5e7eb);border-radius:10px;background:var(--dsw-alias-surface,#fff);cursor:pointer;font-size:12px;color:inherit;text-align:left;}",
+  "#mma-host .mma-fitem:hover{background:var(--dsw-alias-muted,#f3f4f6);border-color:var(--dsw-alias-border,#d1d5db);}",
+  "#mma-host .mma-fitem[data-open='1']{border-color:var(--dsw-alias-primary,#2563eb);background:var(--dsw-alias-muted,#f3f4f6);}",
+  "#mma-host .mma-fitem .mma-diff{display:inline-flex;gap:6px;flex:0 0 auto;min-width:4.5em;font-family:ui-monospace,monospace;font-size:11px;}",
+  "#mma-host .mma-fitem .p{flex:1;min-width:0;font-family:ui-monospace,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}",
+  "#mma-host .mma-fitem .mma-chevron{flex:0 0 12px;opacity:.45;transition:transform .15s ease;}",
+  "#mma-host .mma-fitem[data-open='1'] .mma-chevron{transform:rotate(90deg);opacity:.7;}",
+  "#mma-host .mma-preview{margin:0 0 2px;padding:8px 0;background:var(--dsw-alias-surface,#fff);border:1px solid var(--dsw-alias-border,#e5e7eb);border-radius:8px;font-size:11px;max-height:220px;overflow:auto;white-space:pre;line-height:1.55;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}",
+  "#mma-host .mma-diff-preview{padding:6px 0;}",
+  "#mma-host .mma-diff-line{display:block;padding:0 12px;}",
+  "#mma-host .mma-diff-line--add{color:#166534;background:rgba(22,163,74,.12);}",
+  "#mma-host .mma-diff-line--del{color:#991b1b;background:rgba(220,38,38,.10);}",
+  "#mma-host .mma-diff-line--ctx{color:inherit;opacity:.85;}",
+  "#mma-host .mma-bempty{padding:20px;opacity:.6;text-align:center;font-size:13px;}",
+  "#mma-host .mma-berr{padding:16px;color:#b91c1c;font-size:13px;}"
+];
+function injectPanelCss() {
+  if (typeof document === "undefined") return;
+  let tag = document.querySelector(`style[data-plugin-css="${PANEL_CSS_TAG}"]`);
+  if (!tag) {
+    tag = document.createElement("style");
+    tag.dataset.plugin = "panel";
+    tag.dataset.pluginCss = PANEL_CSS_TAG;
+    document.head.appendChild(tag);
+  }
+  tag.textContent = CSS.join("\n");
+}
+function loadCustomPalettes(host) {
+  if (!host.palettes) return;
+  host.palettes().then((list) => {
+    const custom = {};
+    for (const p of list) {
+      custom[p.id] = { label: p.label, swatch: p.swatch, tokens: p.tokens };
+    }
+    setPanelState({ customPalettes: custom });
+  }).catch(() => {
+  });
+}
+function createMiniAppPanel(host, options) {
+  const locale = resolvePanelLocale(options?.locale ?? host.locale);
+  const i18n = createPanelI18n(locale);
+  resetPanelState({
+    tabs: [{ id: "all", title: i18n.t("tabs.all"), kind: "all" }],
+    capabilities: capabilitiesOf(host),
+    locale,
+    emptyText: host.emptyText
+  });
+  let rootEl = null;
+  let root = null;
+  const actions = createPanelActions(host, () => rootEl, i18n);
+  return {
+    actions,
+    open: () => host.openPanel(),
+    close: () => host.closePanel(),
+    mount(el) {
+      rootEl = el;
+      injectPanelCss();
+      const s = getPanelState();
+      applyThemeTo(el, s.theme, s.palette, s.customPalettes);
+      loadCustomPalettes(host);
+      if (!root) root = createRoot(el);
+      root.render(
+        /* @__PURE__ */ jsx(PanelProvider, { actions, i18n, children: /* @__PURE__ */ jsx(MiniAppPanel, {}) })
+      );
+    },
+    unmount() {
+      if (root) {
+        root.unmount();
+        root = null;
+      }
+      rootEl = null;
+    }
+  };
+}
+
+// src/host-shell.ts
+function safeStorage(storage) {
+  if (storage) return storage;
+  try {
+    if (typeof window !== "undefined") return window.localStorage;
+  } catch {
+  }
+  return null;
+}
+function readThemePrefs(storage) {
+  const get = (k) => {
+    try {
+      return storage?.getItem(k) ?? null;
+    } catch {
+      return null;
+    }
+  };
+  return { theme: get("mma-theme-mode") || "light", palette: get("mma-palette") || "default" };
+}
+function createHostShell(opts) {
+  const storage = safeStorage(opts.storage);
+  const themePrefs = readThemePrefs(storage);
+  const frame = createFrameController({
+    urlOf: (appId) => appFrameUrl(opts.hostUrl, appId, envFor(appId)),
+    envOf: (appId) => envFor(appId)
+  });
+  function envFor(appId) {
+    const s = getPanelState();
+    const app = s.apps.find((a) => a.id === appId);
+    return { theme: app?.theme?.theme || s.theme, palette: app?.theme?.palette || s.palette, dock: s.dock };
+  }
+  const host = createRestPanelHost({
+    hostUrl: opts.hostUrl,
+    storage,
+    cardStyle: opts.cardStyle,
+    locale: opts.locale ?? void 0,
+    emptyText: opts.emptyText,
+    onOpen: () => optOnOpen(),
+    onClose: () => optOnClose(),
+    onHostChange: (next) => opts.onHostChange?.(next),
+    frameController: {
+      url: (appId) => frame.url(appId),
+      // Lazy-bind the frames container (React may not have rendered #mma-frames yet).
+      mount: (appId) => {
+        ensureFrameContainer();
+        frame.mount(appId);
+      },
+      unmount: (appId) => frame.unmount(appId),
+      reload: (appId) => {
+        ensureFrameContainer();
+        frame.reload(appId);
+      },
+      syncEnv: () => frame.postEnvAll()
+    }
+  });
+  let framesBound = false;
+  function ensureFrameContainer() {
+    if (framesBound) return;
+    const el = containerEl?.querySelector("#mma-frames") ?? document.getElementById("mma-frames");
+    if (el) {
+      frame.setContainer(el);
+      framesBound = true;
+    }
+  }
+  let panel = null;
+  let containerEl = null;
+  function optOnOpen() {
+    setPanelState({ visible: true });
+    opts.onOpen?.();
+  }
+  function optOnClose() {
+    setPanelState({ visible: false });
+    opts.onClose?.();
+  }
+  function persistTheme(theme, palette) {
+    setPanelState({ theme, palette });
+    try {
+      storage?.setItem("mma-theme-mode", theme);
+      storage?.setItem("mma-palette", palette);
+    } catch {
+    }
+    if (containerEl) applyThemeTo(containerEl, theme, palette);
+    frame.postEnvAll();
+  }
+  return {
+    host,
+    frames: frame,
+    get panel() {
+      if (!panel) panel = createMiniAppPanel(host);
+      return panel;
+    },
+    mount(el) {
+      containerEl = document.createElement("div");
+      containerEl.id = "mma-host";
+      containerEl.setAttribute("data-ready", "1");
+      containerEl.setAttribute("data-dock", getPanelState().dock);
+      containerEl.setAttribute("data-cardstyle", getPanelState().cardStyle);
+      Object.assign(containerEl.style, {
+        position: "fixed",
+        top: "0",
+        left: "0",
+        right: "0",
+        bottom: "0",
+        zIndex: "40",
+        display: "flex",
+        flexDirection: "column",
+        background: "var(--dsw-alias-bg, #f7f7f8)",
+        color: "var(--dsw-alias-fg, #111)",
+        fontFamily: "ui-sans-serif, system-ui, -apple-system, sans-serif"
+      });
+      const target = el ?? document.body;
+      target.appendChild(containerEl);
+      setPanelState({ theme: themePrefs.theme, palette: themePrefs.palette, visible: true });
+      applyThemeTo(containerEl, themePrefs.theme, themePrefs.palette);
+      this.panel.mount(containerEl);
+      const framesEl = containerEl.querySelector("#mma-frames");
+      if (framesEl) frame.setContainer(framesEl);
+      void this.panel.actions.fetchApps();
+    },
+    unmount() {
+      panel?.unmount();
+      panel = null;
+      frame.unmountAll();
+      containerEl?.parentNode?.removeChild(containerEl);
+      containerEl = null;
+    },
+    openPanel: optOnOpen,
+    closePanel: optOnClose,
+    toggle() {
+      if (getPanelState().visible) optOnClose();
+      else optOnOpen();
+    },
+    persistTheme,
+    setCardStyle(v) {
+      setPanelState({ cardStyle: v });
+      try {
+        storage?.setItem("mma-card-style", v);
+      } catch {
+      }
+      containerEl?.setAttribute("data-cardstyle", v);
+    },
+    setDock(v) {
+      setPanelState({ dock: v });
+      opts.layout?.setDock?.(v);
+    }
+  };
+}
+
+// src/index.ts
+var packageName = "@monkey-mini-app/panel";
+
+export { AppList, Browse, HostUnreachableError, LOCALE_IDS, ListRegion, Loading, MiniAppPanel, Modal, PANEL_CSS_TAG, PanelError, PanelProvider, Settings, Tabs, ThemePop, Toolbar, activeAppFrom, appBlurb, appFrameUrl, capabilitiesOf, clampPaletteId, createFrameController, createHostShell, createMiniAppPanel, createPanelActions, createPanelI18n, createRestPanelHost, defaultHideThemePop, formToHostConfigBody, getPanelState, hostConfigToForm, hue, injectPanelCss, isHostUnreachable, monoOf, packageName, parseAppsResponse, parseCommitDetail, parseCommitList, parsePalettes, parseStorageTables, readJson, resetPanelState, resolvePanelLocale, setPanelState, subscribePanel, usePanelActions, usePanelI18n, usePanelState };