@monkey-mini-app/dsh-mini-app 0.1.0 → 0.1.4

package/lib/client.js

@@ -56,295 +56,12 @@ function capabilitiesOf(host) {
   };
 }
 
-// ../panel/src/rest.ts
-function isRecord(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-async function readJson(url, init2) {
-  let res;
-  try {
-    res = await fetch(url, init2);
-  } 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, t2) => {
-        await fetch(`${origin()}/api/apps/${encodeURIComponent(appId)}/theme`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(t2) }).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, name2) => {
-        const raw = await readJson(`${origin()}/api/apps/${encodeURIComponent(appId)}/storage/${encodeURIComponent(name2)}`);
-        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;
-}
-
-// ../panel/src/store.ts
-var import_react = require("react");
-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 (0, import_react.useSyncExternalStore)(subscribePanel, getPanelState);
-}
-
 // ../panel/src/themes.ts
+var LOCAL_PALETTE_ID = "__local__";
+var GLOBAL_PALETTE_ID = "__global__";
+function selectedPalette(stored, hasLocalTheme) {
+  return stored ?? (hasLocalTheme ? LOCAL_PALETTE_ID : GLOBAL_PALETTE_ID);
+}
 var PALETTES = [
   { id: "default", label: "\u9ED8\u8BA4", swatch: "#2563eb" },
   { id: "tokyo", label: "\u4E1C\u4EAC\u591C", swatch: "#7aa2f7" },
@@ -464,312 +181,768 @@ var TOKENS = {
       ring: "#93b259",
       input: "#f7f1e0",
       radius: "12px",
-      shadow: "rgba(70, 90, 60, 0.12)"
+      shadow: "rgba(70, 90, 60, 0.12)"
+    },
+    dark: {
+      bg: "#2d353b",
+      fg: "#d3c6aa",
+      surface: "#333c43",
+      surfaceFg: "#d3c6aa",
+      border: "#414c52",
+      muted: "#3d484d",
+      mutedFg: "#859289",
+      primary: "#a7c080",
+      primaryFg: "#2d353b",
+      secondary: "#3d484d",
+      secondaryFg: "#d3c6aa",
+      accent: "#475258",
+      accentFg: "#d3c6aa",
+      destructive: "#e67e80",
+      destructiveFg: "#2d353b",
+      ring: "#a7c080",
+      input: "#272e33",
+      radius: "12px",
+      shadow: "rgba(0, 0, 0, 0.4)"
+    }
+  },
+  matcha: {
+    light: {
+      bg: "#faf5f3",
+      fg: "#4c4147",
+      surface: "#ffffff",
+      surfaceFg: "#4c4147",
+      border: "#eadcd8",
+      muted: "#f3eae6",
+      mutedFg: "#98857f",
+      primary: "#e08a9c",
+      primaryFg: "#ffffff",
+      secondary: "#f0e4df",
+      secondaryFg: "#4c4147",
+      accent: "#e8f0da",
+      accentFg: "#5a7a3f",
+      destructive: "#d95f7f",
+      destructiveFg: "#ffffff",
+      ring: "#e08a9c",
+      input: "#f8f1ee",
+      radius: "14px",
+      shadow: "rgba(180, 90, 110, 0.12)"
+    },
+    dark: {
+      bg: "#28242b",
+      fg: "#e9d8d2",
+      surface: "#302b33",
+      surfaceFg: "#e9d8d2",
+      border: "#443a44",
+      muted: "#38313a",
+      mutedFg: "#b3a09f",
+      primary: "#ee9aa6",
+      primaryFg: "#28242b",
+      secondary: "#38313a",
+      secondaryFg: "#e9d8d2",
+      accent: "#3f4a38",
+      accentFg: "#c8e3b2",
+      destructive: "#e06c8a",
+      destructiveFg: "#28242b",
+      ring: "#ee9aa6",
+      input: "#231f26",
+      radius: "14px",
+      shadow: "rgba(0, 0, 0, 0.45)"
+    }
+  },
+  yellow: {
+    light: {
+      bg: "#faf6ef",
+      fg: "#3d3326",
+      surface: "#ffffff",
+      surfaceFg: "#3d3326",
+      border: "#e8dfcd",
+      muted: "#f2ecdf",
+      mutedFg: "#9a8a6f",
+      primary: "#a37b16",
+      primaryFg: "#ffffff",
+      secondary: "#ede5d3",
+      secondaryFg: "#3d3326",
+      accent: "#f7edcb",
+      accentFg: "#6b4e0a",
+      destructive: "#dc2626",
+      destructiveFg: "#ffffff",
+      ring: "#a37b16",
+      input: "#f7f1e4",
+      radius: "12px",
+      shadow: "rgba(140, 110, 40, 0.12)"
+    },
+    dark: {
+      bg: "#1c1917",
+      fg: "#f5f0e6",
+      surface: "#242019",
+      surfaceFg: "#f5f0e6",
+      border: "#3a332a",
+      muted: "#2a2520",
+      mutedFg: "#b3a68f",
+      primary: "#facc15",
+      primaryFg: "#1c1917",
+      secondary: "#2a2520",
+      secondaryFg: "#f5f0e6",
+      accent: "#3f3518",
+      accentFg: "#fde68a",
+      destructive: "#f87171",
+      destructiveFg: "#1c1917",
+      ring: "#facc15",
+      input: "#211d18",
+      radius: "12px",
+      shadow: "rgba(0, 0, 0, 0.5)"
+    }
+  },
+  zoro: {
+    light: {
+      bg: "#f2f6f0",
+      fg: "#24302a",
+      surface: "#ffffff",
+      surfaceFg: "#24302a",
+      border: "#d8e4d6",
+      muted: "#e9efe6",
+      mutedFg: "#7d907e",
+      primary: "#15803d",
+      primaryFg: "#ffffff",
+      secondary: "#e3ecdf",
+      secondaryFg: "#24302a",
+      accent: "#dcf2e2",
+      accentFg: "#166534",
+      destructive: "#dc2626",
+      destructiveFg: "#ffffff",
+      ring: "#15803d",
+      input: "#f4f8f2",
+      radius: "12px",
+      shadow: "rgba(30, 80, 50, 0.1)"
+    },
+    dark: {
+      bg: "#101512",
+      fg: "#d8e0d4",
+      surface: "#18211b",
+      surfaceFg: "#d8e0d4",
+      border: "#2c3a30",
+      muted: "#1d2720",
+      mutedFg: "#93a393",
+      primary: "#4ade80",
+      primaryFg: "#101512",
+      secondary: "#1d2720",
+      secondaryFg: "#d8e0d4",
+      accent: "#14532d",
+      accentFg: "#bbf7d0",
+      destructive: "#f87171",
+      destructiveFg: "#101512",
+      ring: "#4ade80",
+      input: "#141b16",
+      radius: "12px",
+      shadow: "rgba(0, 0, 0, 0.5)"
+    }
+  },
+  hokage: {
+    light: {
+      bg: "#faf3ea",
+      fg: "#4a3a2c",
+      surface: "#ffffff",
+      surfaceFg: "#4a3a2c",
+      border: "#eadcc8",
+      muted: "#f3e9db",
+      mutedFg: "#a0886a",
+      primary: "#c2660f",
+      primaryFg: "#ffffff",
+      secondary: "#efe2d0",
+      secondaryFg: "#4a3a2c",
+      accent: "#fbe6c8",
+      accentFg: "#7c4a10",
+      destructive: "#dc2626",
+      destructiveFg: "#ffffff",
+      ring: "#c2660f",
+      input: "#f8f0e4",
+      radius: "12px",
+      shadow: "rgba(150, 90, 30, 0.12)"
     },
     dark: {
-      bg: "#2d353b",
-      fg: "#d3c6aa",
-      surface: "#333c43",
-      surfaceFg: "#d3c6aa",
-      border: "#414c52",
-      muted: "#3d484d",
-      mutedFg: "#859289",
-      primary: "#a7c080",
-      primaryFg: "#2d353b",
-      secondary: "#3d484d",
-      secondaryFg: "#d3c6aa",
-      accent: "#475258",
-      accentFg: "#d3c6aa",
-      destructive: "#e67e80",
-      destructiveFg: "#2d353b",
-      ring: "#a7c080",
-      input: "#272e33",
+      bg: "#241a17",
+      fg: "#f0e3d8",
+      surface: "#2e211c",
+      surfaceFg: "#f0e3d8",
+      border: "#45372e",
+      muted: "#33251f",
+      mutedFg: "#b59f8c",
+      primary: "#f59e0b",
+      primaryFg: "#241a17",
+      secondary: "#33251f",
+      secondaryFg: "#f0e3d8",
+      accent: "#4a3024",
+      accentFg: "#fcd9b6",
+      destructive: "#ef4444",
+      destructiveFg: "#241a17",
+      ring: "#f59e0b",
+      input: "#201612",
       radius: "12px",
-      shadow: "rgba(0, 0, 0, 0.4)"
+      shadow: "rgba(0, 0, 0, 0.5)"
     }
   },
-  matcha: {
+  slate: {
     light: {
-      bg: "#faf5f3",
-      fg: "#4c4147",
+      bg: "#ececee",
+      fg: "#09090b",
       surface: "#ffffff",
-      surfaceFg: "#4c4147",
-      border: "#eadcd8",
-      muted: "#f3eae6",
-      mutedFg: "#98857f",
-      primary: "#e08a9c",
-      primaryFg: "#ffffff",
-      secondary: "#f0e4df",
-      secondaryFg: "#4c4147",
-      accent: "#e8f0da",
-      accentFg: "#5a7a3f",
-      destructive: "#d95f7f",
+      surfaceFg: "#09090b",
+      border: "#c8c8ce",
+      muted: "#e0e0e5",
+      mutedFg: "#52525b",
+      primary: "#27272a",
+      primaryFg: "#fafafa",
+      secondary: "#e0e0e5",
+      secondaryFg: "#09090b",
+      accent: "#d4d4d8",
+      accentFg: "#18181b",
+      destructive: "#dc2626",
       destructiveFg: "#ffffff",
-      ring: "#e08a9c",
-      input: "#f8f1ee",
-      radius: "14px",
-      shadow: "rgba(180, 90, 110, 0.12)"
+      ring: "#27272a",
+      input: "#c8c8ce",
+      radius: "8px",
+      shadow: "rgba(24, 24, 27, 0.12)"
+    },
+    dark: {
+      bg: "#050506",
+      fg: "#fafafa",
+      surface: "#141416",
+      surfaceFg: "#fafafa",
+      border: "#3f3f46",
+      muted: "#1f1f23",
+      mutedFg: "#a1a1aa",
+      primary: "#e4e4e7",
+      primaryFg: "#09090b",
+      secondary: "#1f1f23",
+      secondaryFg: "#fafafa",
+      accent: "#27272a",
+      accentFg: "#f4f4f5",
+      destructive: "#f87171",
+      destructiveFg: "#09090b",
+      ring: "#e4e4e7",
+      input: "#3f3f46",
+      radius: "8px",
+      shadow: "rgba(0, 0, 0, 0.6)"
+    }
+  }
+};
+var THEME_VAR_KEYS = [
+  "bg",
+  "fg",
+  "surface",
+  "surface-fg",
+  "border",
+  "muted",
+  "muted-fg",
+  "primary",
+  "primary-fg",
+  "secondary",
+  "secondary-fg",
+  "accent",
+  "accent-fg",
+  "destructive",
+  "destructive-fg",
+  "ring",
+  "input",
+  "radius",
+  "shadow"
+];
+function kebabToCamel(k) {
+  return k.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+}
+function parseThemeCss(css2, _id) {
+  const out = {};
+  const blockRe = /:root\[data-mode="(light|dark)"\]\s*\{([^}]*)\}/g;
+  let m;
+  while (m = blockRe.exec(String(css2 || ""))) {
+    const mode = m[1];
+    const vars = {};
+    for (const key of THEME_VAR_KEYS) {
+      const vm = new RegExp(`--${key}\\s*:\\s*([^;\\n]+)`).exec(m[2]);
+      if (vm) vars[kebabToCamel(key)] = vm[1].trim();
+    }
+    if (vars.bg && vars.fg && vars.primary) out[mode] = vars;
+  }
+  if (!out.light || !out.dark) return null;
+  const base = {
+    surfaceFg: out.light.fg,
+    secondary: out.light.muted,
+    secondaryFg: out.light.fg,
+    destructiveFg: "#ffffff",
+    radius: "12px",
+    shadow: "rgba(15, 23, 42, 0.1)"
+  };
+  const fill = (v) => Object.assign({}, base, v);
+  return { light: fill(out.light), dark: fill(out.dark) };
+}
+function themeLabelFromCss(css2, fallback) {
+  const m = /\/\*\s*name\s*:\s*([^*]+)\*\//.exec(String(css2 || ""));
+  return m && m[1].trim() || fallback;
+}
+function clampPalette(value) {
+  if (value === "tokyo" || value === "forest" || value === "matcha" || value === "yellow" || value === "zoro" || value === "hokage" || value === "slate" || value === "default") {
+    return value;
+  }
+  if (value === "ocean" || value === "mist") return "tokyo";
+  if (value === "violet" || value === "ink") return "matcha";
+  if (value === "paper" || value === "noir") return "slate";
+  return "default";
+}
+function clampMode(value) {
+  return value === "dark" ? "dark" : "light";
+}
+function resolveMode(value) {
+  if (value === "system") {
+    try {
+      if (typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+        return "dark";
+      }
+    } catch {
+    }
+    return "light";
+  }
+  return clampMode(value);
+}
+function tokensOf(palette, mode) {
+  return TOKENS[clampPalette(palette)][clampMode(mode)];
+}
+function themeCssVars(theme, palette, custom) {
+  const mode = clampMode(theme);
+  const c = custom && palette ? custom[String(palette)] : void 0;
+  const pal = c ? String(palette) : clampPalette(palette);
+  const t2 = c && c.tokens && c.tokens[mode] || tokensOf(pal, mode);
+  return {
+    "--dsw-alias-bg": t2.bg,
+    "--dsw-alias-fg": t2.fg,
+    "--dsw-alias-surface": t2.surface,
+    "--dsw-alias-border": t2.border,
+    "--dsw-alias-muted": t2.muted,
+    "--dsw-alias-primary": t2.primary,
+    "--dsw-alias-primary-fg": t2.primaryFg,
+    "--dsw-alias-accent": t2.accent,
+    "--dsw-alias-shadow": t2.shadow,
+    "--background": t2.bg,
+    "--foreground": t2.fg,
+    "--card": t2.surface,
+    "--card-foreground": t2.surfaceFg,
+    "--primary": t2.primary,
+    "--primary-foreground": t2.primaryFg,
+    "--secondary": t2.secondary,
+    "--secondary-foreground": t2.secondaryFg,
+    "--muted": t2.muted,
+    "--muted-foreground": t2.mutedFg,
+    "--accent": t2.accent,
+    "--accent-foreground": t2.accentFg,
+    "--border": t2.border,
+    "--input": t2.input,
+    "--ring": t2.ring,
+    "--destructive": t2.destructive,
+    "--destructive-foreground": t2.destructiveFg,
+    "--radius": t2.radius,
+    "--shadow": t2.shadow
+  };
+}
+function applyThemeTo(el, theme, palette, custom) {
+  const mode = resolveMode(theme);
+  const c = custom && palette ? custom[String(palette)] : void 0;
+  const pal = c ? String(palette) : clampPalette(palette);
+  const t2 = c && c.tokens && c.tokens[mode] || tokensOf(pal, mode);
+  el.setAttribute("data-theme", mode);
+  if (theme === "system") el.setAttribute("data-theme-pref", "system");
+  else el.removeAttribute("data-theme-pref");
+  el.setAttribute("data-palette", pal);
+  const map = themeCssVars(mode, palette, custom);
+  for (const k of Object.keys(map)) el.style.setProperty(k, map[k]);
+  el.style.background = t2.bg;
+  el.style.color = t2.fg;
+  return { theme: mode, palette: pal };
+}
+
+// ../panel/src/rest.ts
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+async function readJson(url, init2) {
+  let res;
+  try {
+    res = await fetch(url, init2);
+  } 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) {
+  const params = new URLSearchParams();
+  for (const key of ["theme", "palette", "dock"]) {
+    const value = query[key];
+    if (value) params.set(key, value);
+  }
+  return `${origin}/app/${encodeURIComponent(appId)}?${params.toString()}`;
+}
+function relayViewEval(origin, frames, query) {
+  if (!query.requestId || !query.appId) return;
+  if (frames.postViewEval(query)) return;
+  const body = { appId: query.appId, requestId: query.requestId, view: "not-open" };
+  fetch(`${origin.replace(/\/$/, "")}/api/app/${encodeURIComponent(query.appId)}/view/eval`, {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify(body)
+  }).catch(() => {
+  });
+}
+function parseLocalPalette(css2) {
+  if (typeof css2 !== "string" || !css2.trim()) return null;
+  const tokens = parseThemeCss(css2, LOCAL_PALETTE_ID);
+  if (!tokens) return null;
+  return {
+    label: themeLabelFromCss(css2, LOCAL_PALETTE_ID),
+    swatch: tokens.dark.primary || tokens.light.primary,
+    tokens
+  };
+}
+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 parseAbout(raw) {
+  const rec = isRecord(raw) ? raw : {};
+  const packages = [];
+  if (Array.isArray(rec.packages)) {
+    for (const p of rec.packages) {
+      if (!isRecord(p) || typeof p.name !== "string" || typeof p.version !== "string") continue;
+      packages.push({ name: p.name, version: p.version });
+    }
+  }
+  return {
+    adapter: typeof rec.adapter === "string" ? rec.adapter : "host",
+    env: typeof rec.env === "string" ? rec.env : "unknown",
+    packages
+  };
+}
+function parseUpdateCheck(raw) {
+  const rec = isRecord(raw) ? raw : {};
+  return {
+    name: typeof rec.name === "string" ? rec.name : "",
+    current: typeof rec.current === "string" ? rec.current : "",
+    latest: typeof rec.latest === "string" ? rec.latest : null,
+    updateAvailable: rec.updateAvailable === true,
+    error: typeof rec.error === "string" ? rec.error : void 0
+  };
+}
+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),
+      localPalette: parseLocalPalette(item.localThemeCss)
+    });
+  }
+  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,
+      keys: typeof row.keys === "number" ? row.keys : void 0
+    });
+  }
+  return out;
+}
+function parseStorageNotices(raw, appId) {
+  const rec = isRecord(raw) ? raw : {};
+  const list = Array.isArray(rec.notices) ? rec.notices : [];
+  const out = [];
+  for (const row of list) {
+    if (!isRecord(row) || typeof row.table !== "string" || typeof row.prompt !== "string") continue;
+    const heavyRaw = Array.isArray(row.heavy) ? row.heavy : [];
+    const heavy = heavyRaw.flatMap((h) => {
+      if (!isRecord(h) || typeof h.key !== "string" || typeof h.bytes !== "number") return [];
+      const kind = h.kind === "list" || h.kind === "map" || h.kind === "value" ? h.kind : "value";
+      return [{
+        key: h.key,
+        bytes: h.bytes,
+        kind,
+        entries: typeof h.entries === "number" ? h.entries : void 0
+      }];
+    });
+    out.push({
+      appId: typeof row.appId === "string" ? row.appId : appId,
+      table: row.table,
+      bytes: typeof row.bytes === "number" ? row.bytes : 0,
+      keys: typeof row.keys === "number" ? row.keys : 0,
+      heavy,
+      prompt: row.prompt
+    });
+  }
+  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 [];
+      }
     },
-    dark: {
-      bg: "#28242b",
-      fg: "#e9d8d2",
-      surface: "#302b33",
-      surfaceFg: "#e9d8d2",
-      border: "#443a44",
-      muted: "#38313a",
-      mutedFg: "#b3a09f",
-      primary: "#ee9aa6",
-      primaryFg: "#28242b",
-      secondary: "#38313a",
-      secondaryFg: "#e9d8d2",
-      accent: "#3f4a38",
-      accentFg: "#c8e3b2",
-      destructive: "#e06c8a",
-      destructiveFg: "#28242b",
-      ring: "#ee9aa6",
-      input: "#231f26",
-      radius: "14px",
-      shadow: "rgba(0, 0, 0, 0.45)"
-    }
-  },
-  yellow: {
-    light: {
-      bg: "#faf6ef",
-      fg: "#3d3326",
-      surface: "#ffffff",
-      surfaceFg: "#3d3326",
-      border: "#e8dfcd",
-      muted: "#f2ecdf",
-      mutedFg: "#9a8a6f",
-      primary: "#a37b16",
-      primaryFg: "#ffffff",
-      secondary: "#ede5d3",
-      secondaryFg: "#3d3326",
-      accent: "#f7edcb",
-      accentFg: "#6b4e0a",
-      destructive: "#dc2626",
-      destructiveFg: "#ffffff",
-      ring: "#a37b16",
-      input: "#f7f1e4",
-      radius: "12px",
-      shadow: "rgba(140, 110, 40, 0.12)"
+    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(() => {
+      });
     },
-    dark: {
-      bg: "#1c1917",
-      fg: "#f5f0e6",
-      surface: "#242019",
-      surfaceFg: "#f5f0e6",
-      border: "#3a332a",
-      muted: "#2a2520",
-      mutedFg: "#b3a68f",
-      primary: "#facc15",
-      primaryFg: "#1c1917",
-      secondary: "#2a2520",
-      secondaryFg: "#f5f0e6",
-      accent: "#3f3518",
-      accentFg: "#fde68a",
-      destructive: "#f87171",
-      destructiveFg: "#1c1917",
-      ring: "#facc15",
-      input: "#211d18",
-      radius: "12px",
-      shadow: "rgba(0, 0, 0, 0.5)"
-    }
-  },
-  zoro: {
-    light: {
-      bg: "#f2f6f0",
-      fg: "#24302a",
-      surface: "#ffffff",
-      surfaceFg: "#24302a",
-      border: "#d8e4d6",
-      muted: "#e9efe6",
-      mutedFg: "#7d907e",
-      primary: "#15803d",
-      primaryFg: "#ffffff",
-      secondary: "#e3ecdf",
-      secondaryFg: "#24302a",
-      accent: "#dcf2e2",
-      accentFg: "#166534",
-      destructive: "#dc2626",
-      destructiveFg: "#ffffff",
-      ring: "#15803d",
-      input: "#f4f8f2",
-      radius: "12px",
-      shadow: "rgba(30, 80, 50, 0.1)"
+    appTheme: {
+      save: async (appId, t2) => {
+        await fetch(`${origin()}/api/apps/${encodeURIComponent(appId)}/theme`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(t2) }).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(() => {
+        });
+      }
     },
-    dark: {
-      bg: "#101512",
-      fg: "#d8e0d4",
-      surface: "#18211b",
-      surfaceFg: "#d8e0d4",
-      border: "#2c3a30",
-      muted: "#1d2720",
-      mutedFg: "#93a393",
-      primary: "#4ade80",
-      primaryFg: "#101512",
-      secondary: "#1d2720",
-      secondaryFg: "#d8e0d4",
-      accent: "#14532d",
-      accentFg: "#bbf7d0",
-      destructive: "#f87171",
-      destructiveFg: "#101512",
-      ring: "#4ade80",
-      input: "#141b16",
-      radius: "12px",
-      shadow: "rgba(0, 0, 0, 0.5)"
-    }
-  },
-  hokage: {
-    light: {
-      bg: "#faf3ea",
-      fg: "#4a3a2c",
-      surface: "#ffffff",
-      surfaceFg: "#4a3a2c",
-      border: "#eadcc8",
-      muted: "#f3e9db",
-      mutedFg: "#a0886a",
-      primary: "#c2660f",
-      primaryFg: "#ffffff",
-      secondary: "#efe2d0",
-      secondaryFg: "#4a3a2c",
-      accent: "#fbe6c8",
-      accentFg: "#7c4a10",
-      destructive: "#dc2626",
-      destructiveFg: "#ffffff",
-      ring: "#c2660f",
-      input: "#f8f0e4",
-      radius: "12px",
-      shadow: "rgba(150, 90, 30, 0.12)"
+    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);
+      }
     },
-    dark: {
-      bg: "#241a17",
-      fg: "#f0e3d8",
-      surface: "#2e211c",
-      surfaceFg: "#f0e3d8",
-      border: "#45372e",
-      muted: "#33251f",
-      mutedFg: "#b59f8c",
-      primary: "#f59e0b",
-      primaryFg: "#241a17",
-      secondary: "#33251f",
-      secondaryFg: "#f0e3d8",
-      accent: "#4a3024",
-      accentFg: "#fcd9b6",
-      destructive: "#ef4444",
-      destructiveFg: "#241a17",
-      ring: "#f59e0b",
-      input: "#201612",
-      radius: "12px",
-      shadow: "rgba(0, 0, 0, 0.5)"
-    }
-  },
-  slate: {
-    light: {
-      bg: "#ececee",
-      fg: "#09090b",
-      surface: "#ffffff",
-      surfaceFg: "#09090b",
-      border: "#c8c8ce",
-      muted: "#e0e0e5",
-      mutedFg: "#52525b",
-      primary: "#27272a",
-      primaryFg: "#fafafa",
-      secondary: "#e0e0e5",
-      secondaryFg: "#09090b",
-      accent: "#d4d4d8",
-      accentFg: "#18181b",
-      destructive: "#dc2626",
-      destructiveFg: "#ffffff",
-      ring: "#27272a",
-      input: "#c8c8ce",
-      radius: "8px",
-      shadow: "rgba(24, 24, 27, 0.12)"
+    about: {
+      load: async () => parseAbout(await readJson(`${origin()}/api/about`)),
+      checkUpdates: async () => parseUpdateCheck(await readJson(`${origin()}/api/updates`))
     },
-    dark: {
-      bg: "#050506",
-      fg: "#fafafa",
-      surface: "#141416",
-      surfaceFg: "#fafafa",
-      border: "#3f3f46",
-      muted: "#1f1f23",
-      mutedFg: "#a1a1aa",
-      primary: "#e4e4e7",
-      primaryFg: "#09090b",
-      secondary: "#1f1f23",
-      secondaryFg: "#fafafa",
-      accent: "#27272a",
-      accentFg: "#f4f4f5",
-      destructive: "#f87171",
-      destructiveFg: "#09090b",
-      ring: "#e4e4e7",
-      input: "#3f3f46",
-      radius: "8px",
-      shadow: "rgba(0, 0, 0, 0.6)"
+    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) => {
+        const raw = await readJson(`${origin()}/api/apps/${encodeURIComponent(appId)}/storage`);
+        return {
+          tables: parseStorageTables(raw),
+          notices: parseStorageNotices(raw, appId)
+        };
+      },
+      readTable: async (appId, name2) => {
+        const raw = await readJson(`${origin()}/api/apps/${encodeURIComponent(appId)}/storage/${encodeURIComponent(name2)}`);
+        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;
+}
+
+// ../panel/src/store.ts
+var import_react = require("react");
+var none = {
+  history: false,
+  storage: false,
+  config: false,
+  appTheme: false,
+  customPalettes: false,
+  deleteApp: false
 };
-function clampPalette(value) {
-  if (value === "tokyo" || value === "forest" || value === "matcha" || value === "yellow" || value === "zoro" || value === "hokage" || value === "slate" || value === "default") {
-    return value;
-  }
-  if (value === "ocean" || value === "mist") return "tokyo";
-  if (value === "violet" || value === "ink") return "matcha";
-  if (value === "paper" || value === "noir") return "slate";
-  return "default";
+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: {},
+  about: null,
+  updateCheck: null,
+  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,
+  storageNotice: null
+};
+var state = { ...initial, capabilities: { ...none } };
+var listeners = /* @__PURE__ */ new Set();
+function getPanelState() {
+  return state;
 }
-function clampMode(value) {
-  return value === "dark" ? "dark" : "light";
+function setPanelState(patch) {
+  state = { ...state, ...patch };
+  for (const fn of listeners) fn();
+  return state;
 }
-function tokensOf(palette, mode) {
-  return TOKENS[clampPalette(palette)][clampMode(mode)];
+function subscribePanel(listener) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
 }
-function applyThemeTo(el, theme, palette, custom) {
-  const mode = clampMode(theme);
-  const c = custom && palette ? custom[String(palette)] : void 0;
-  const pal = c ? String(palette) : clampPalette(palette);
-  const t2 = c && c.tokens && c.tokens[mode] || tokensOf(pal, mode);
-  el.setAttribute("data-theme", mode);
-  el.setAttribute("data-palette", pal);
-  const map = {
-    "--dsw-alias-bg": t2.bg,
-    "--dsw-alias-fg": t2.fg,
-    "--dsw-alias-surface": t2.surface,
-    "--dsw-alias-border": t2.border,
-    "--dsw-alias-muted": t2.muted,
-    "--dsw-alias-primary": t2.primary,
-    "--dsw-alias-primary-fg": t2.primaryFg,
-    "--dsw-alias-accent": t2.accent,
-    "--dsw-alias-shadow": t2.shadow,
-    "--background": t2.bg,
-    "--foreground": t2.fg,
-    "--card": t2.surface,
-    "--card-foreground": t2.surfaceFg,
-    "--primary": t2.primary,
-    "--primary-foreground": t2.primaryFg,
-    "--secondary": t2.secondary,
-    "--secondary-foreground": t2.secondaryFg,
-    "--muted": t2.muted,
-    "--muted-foreground": t2.mutedFg,
-    "--accent": t2.accent,
-    "--accent-foreground": t2.accentFg,
-    "--border": t2.border,
-    "--input": t2.input,
-    "--ring": t2.ring,
-    "--destructive": t2.destructive,
-    "--destructive-foreground": t2.destructiveFg,
-    "--radius": t2.radius,
-    "--shadow": t2.shadow
+function resetPanelState(seed) {
+  state = {
+    ...initial,
+    capabilities: { ...none },
+    customPalettes: {},
+    cfg: {},
+    tabs: [{ id: "all", title: "\u5168\u90E8", kind: "all" }],
+    ...seed || {}
   };
-  for (const k of Object.keys(map)) el.style.setProperty(k, map[k]);
-  el.style.background = t2.bg;
-  el.style.color = t2.fg;
-  return { theme: mode, palette: pal };
+  for (const fn of listeners) fn();
+  return state;
+}
+function usePanelState() {
+  return (0, import_react.useSyncExternalStore)(subscribePanel, getPanelState);
 }
 
 // ../panel/src/actions.ts
 function activeAppFrom(state2) {
-  const tab = state2.tabs.find((t2) => t2.kind === "app" && t2.id === state2.active) || state2.tabs.find((t2) => t2.kind === "app");
+  const tab = state2.tabs.find((t2) => t2.kind === "app" && t2.id === state2.active);
   return tab?.app ?? null;
 }
 function errorMessage(err) {
@@ -786,6 +959,17 @@ function pushAppTab(app) {
 function asCustomPalettes(value) {
   return value;
 }
+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 createPanelActions(host, getRootEl, i18n) {
   setPanelState({ capabilities: capabilitiesOf(host), locale: i18n.locale, emptyText: host.emptyText });
   return {
@@ -800,14 +984,18 @@ function createPanelActions(host, getRootEl, i18n) {
       const tab = s.tabs.find((t2) => t2.id === id);
       setPanelState({
         tabs: s.tabs.filter((t2) => t2.id !== id),
-        active: s.active === id ? "all" : s.active
+        active: s.active === id ? "all" : s.active,
+        ...s.active === id ? { themeScope: "global" } : {}
       });
       if (tab?.app) host.frame.unmount(tab.app.id);
     },
     switchTab: (id) => {
-      setPanelState({ active: id });
       const s = getPanelState();
       const tab = s.tabs.find((t2) => t2.id === id && t2.kind === "app");
+      setPanelState({
+        active: id,
+        ...!tab?.app ? { themeScope: "global" } : {}
+      });
       if (tab?.app) host.frame.mount(tab.app.id);
     },
     setDock: (next) => {
@@ -818,31 +1006,38 @@ function createPanelActions(host, getRootEl, i18n) {
       }
     },
     setQuery: (q) => setPanelState({ query: q }),
-    toggleThemePop: () => setPanelState({ themePopOpen: !getPanelState().themePopOpen }),
+    toggleThemePop: () => {
+      const next = !getPanelState().themePopOpen;
+      setPanelState({ themePopOpen: next });
+      if (next) loadCustomPalettes(host);
+    },
     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());
+        const app = activeAppFrom(s);
         if (app && host.appTheme) {
-          const nextTheme = { theme, palette };
+          const base = app.theme ?? { theme: s.theme, palette: s.palette };
+          const nextTheme = {
+            theme: next.theme ? String(next.theme) : base.theme,
+            palette: next.palette ? String(next.palette) : base.palette
+          };
           host.appTheme.save(app.id, nextTheme).catch(() => {
           });
           const cur = getPanelState();
+          const patchApp = (a) => a.id === app.id ? { ...a, theme: nextTheme } : a;
           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(
-              (t2) => t2.app?.id === app.id ? { ...t2, app: { ...t2.app, theme: nextTheme } } : t2
-            )
+            apps: cur.apps.some((a) => a.id === app.id) ? cur.apps.map(patchApp) : [...cur.apps, { ...app, theme: nextTheme }],
+            tabs: cur.tabs.map((t2) => t2.app?.id === app.id ? { ...t2, app: { ...t2.app, theme: nextTheme } } : t2)
           });
         }
       } else {
+        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));
+        }
         host.persistTheme?.(theme, palette);
       }
       host.frame.syncEnv?.();
@@ -865,23 +1060,71 @@ function createPanelActions(host, getRootEl, i18n) {
     },
     getActiveApp: () => activeAppFrom(getPanelState()),
     toggleSettings: (open) => {
-      setPanelState({ settingsOpen: open, cfgMsg: open ? "" : getPanelState().cfgMsg });
+      setPanelState({
+        settingsOpen: open,
+        cfgMsg: open ? "" : getPanelState().cfgMsg,
+        updateCheck: open ? null : getPanelState().updateCheck
+      });
       if (open && host.config) {
         host.config.load().then((cfg) => {
           setPanelState({ cfg, cfgVersion: getPanelState().cfgVersion + 1 });
         }).catch(() => {
         });
       }
+      if (open && host.about) {
+        host.about.load().then((about) => setPanelState({ about })).catch(() => setPanelState({ about: null }));
+      }
     },
     getCfg: () => getPanelState().cfg,
+    checkUpdates: () => {
+      if (!host.about) return;
+      setPanelState({
+        updateCheck: {
+          name: "",
+          current: "",
+          latest: null,
+          updateAvailable: false,
+          status: "loading"
+        }
+      });
+      host.about.checkUpdates().then((check) => setPanelState({ updateCheck: { ...check, status: "done" } })).catch(
+        (err) => setPanelState({
+          updateCheck: {
+            name: "",
+            current: "",
+            latest: null,
+            updateAvailable: false,
+            status: "done",
+            error: errorMessage(err)
+          }
+        })
+      );
+    },
     saveHostConfig: (form) => {
       if (!host.config) return;
       host.config.save(form).then(() => {
+        const style = form.cardStyle || getPanelState().cardStyle;
+        const theme = form.theme || getPanelState().theme;
+        const palette = form.palette || getPanelState().palette;
         setPanelState({
           cfg: { ...form },
           cfgMsg: i18n.t("config.saved"),
-          cfgVersion: getPanelState().cfgVersion + 1
+          cfgVersion: getPanelState().cfgVersion + 1,
+          cardStyle: style,
+          theme,
+          palette
         });
+        const root = getRootEl();
+        if (root) {
+          applyThemeTo(root, theme, palette, asCustomPalettes(getPanelState().customPalettes));
+          root.setAttribute("data-cardstyle", style);
+        }
+        host.persistTheme?.(theme, palette);
+        host.frame.syncEnv?.();
+        try {
+          localStorage.setItem("mma-card-style", style);
+        } catch {
+        }
       }).catch((e) => {
         setPanelState({ cfgMsg: i18n.t("config.error", { message: errorMessage(e) }) });
       });
@@ -915,11 +1158,22 @@ function createPanelActions(host, getRootEl, i18n) {
           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 });
+        host.storage.listTables(app.id).then(({ tables, notices }) => {
+          const notice = notices[0] ?? null;
+          setPanelState({
+            browseList: tables,
+            browseLoading: false,
+            ...notice ? { storageNotice: notice } : {}
+          });
         }).catch((e) => setPanelState({ browseError: errorMessage(e), browseLoading: false }));
       }
     },
+    dismissStorageNotice: () => {
+      setPanelState({ storageNotice: null });
+    },
+    applyStorageNotice: (notice) => {
+      setPanelState({ storageNotice: notice });
+    },
     loadCommitDetail: (id) => {
       const s = getPanelState();
       if (!host.history || !s.browseAppId) return;
@@ -978,7 +1232,14 @@ function createPanelActions(host, getRootEl, i18n) {
         });
       });
     },
-    setCardStyle: (v) => setPanelState({ cardStyle: v })
+    setCardStyle: (v) => {
+      setPanelState({ cardStyle: v });
+      getRootEl()?.setAttribute("data-cardstyle", v);
+      try {
+        localStorage.setItem("mma-card-style", v);
+      } catch {
+      }
+    }
   };
 }
 function defaultHideThemePop() {
@@ -1071,6 +1332,7 @@ function AppCard({ app }) {
     {
       type: "button",
       className: "mma-card",
+      "data-app-id": app.id,
       style: { "--h": hue(app.id) },
       onClick: () => actions.openAppTab(app),
       children: [
@@ -1099,6 +1361,7 @@ function AppRow({ app }) {
     {
       type: "button",
       className: "mma-row",
+      "data-app-id": app.id,
       style: { "--h": hue(app.id) },
       onClick: () => actions.openAppTab(app),
       children: [
@@ -1210,19 +1473,53 @@ function CommitItem({ c }) {
     ] })
   ] });
 }
+function humanBytes(n, t2) {
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return t2("browse.sizeKb", { value: (n / 1024).toFixed(1) });
+  return t2("browse.sizeMb", { value: (n / (1024 * 1024)).toFixed(1) });
+}
 function StorageItem({ table }) {
   const actions = usePanelActions();
+  const { t: t2 } = usePanelI18n();
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("button", { type: "button", className: "mma-bitem", onClick: () => actions.loadTable(table.name), children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("b", { children: table.name }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "meta", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { children: [
-        table.size || 0,
-        " B"
-      ] }),
+      typeof table.keys === "number" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: t2("browse.entries", { count: table.keys }) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: humanBytes(table.size || 0, t2) }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: table.updatedAt || "" })
     ] })
   ] });
 }
+function StorageNoticeBanner() {
+  const s = usePanelState();
+  const actions = usePanelActions();
+  const { t: t2 } = usePanelI18n();
+  const notice = s.storageNotice;
+  const [copied, setCopied] = React2.useState(false);
+  if (!notice) return null;
+  if (s.browseAppId && notice.appId !== s.browseAppId) return null;
+  const top = notice.heavy[0];
+  const summary = top ? t2("browse.noticeTop", { key: top.key, size: humanBytes(top.bytes, t2) }) : "";
+  const copyPrompt = async () => {
+    try {
+      await navigator.clipboard.writeText(notice.prompt);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1500);
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mma-storage-notice", role: "status", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mma-storage-notice-body", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("b", { children: t2("browse.noticeTitle", { table: notice.table, size: humanBytes(notice.bytes, t2) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: t2("browse.noticeBody") }),
+      summary ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "mma-storage-notice-top", children: summary }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mma-storage-notice-actions", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: "mma-storage-notice-copy", onClick: () => void copyPrompt(), children: copied ? t2("browse.noticeCopied") : t2("browse.noticeCopy") }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", onClick: () => actions.dismissStorageNotice(), children: t2("browse.noticeDismiss") })
+    ] })
+  ] });
+}
 function CommitDetail() {
   const s = usePanelState();
   const actions = usePanelActions();
@@ -1317,7 +1614,10 @@ function Browse() {
       ) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mma-browse", id: "mma-browse", "data-open": "1", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mma-browse-body", id: "mma-browse-body", children: content }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mma-browse", id: "mma-browse", "data-open": "1", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mma-browse-body", id: "mma-browse-body", children: [
+    s.browseKind === "storage" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StorageNoticeBanner, {}) : null,
+    content
+  ] }) });
 }
 
 // ../panel/src/components/Modal.tsx
@@ -1339,79 +1639,695 @@ function Modal() {
 }
 
 // ../panel/src/components/Settings.tsx
+var React4 = __toESM(require("react"), 1);
+
+// ../panel/src/components/OptionCardGrid.tsx
 var React3 = __toESM(require("react"), 1);
 var import_jsx_runtime6 = require("react/jsx-runtime");
+function OptionCardGrid({
+  options,
+  value,
+  onChange,
+  columns = 3,
+  "aria-label": ariaLabel,
+  className,
+  trailing
+}) {
+  const refs = React3.useRef([]);
+  const values = options.map((o) => o.value);
+  const focusAt = (index) => {
+    const el = refs.current[index];
+    el?.focus();
+  };
+  const onKeyDown = (e, index) => {
+    const enabled = options.map((o, i) => ({ o, i })).filter((x) => !x.o.disabled);
+    if (!enabled.length) return;
+    const pos = enabled.findIndex((x) => x.i === index);
+    if (pos < 0) return;
+    let nextPos = pos;
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+      e.preventDefault();
+      nextPos = (pos + 1) % enabled.length;
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+      e.preventDefault();
+      nextPos = (pos - 1 + enabled.length) % enabled.length;
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      nextPos = 0;
+    } else if (e.key === "End") {
+      e.preventDefault();
+      nextPos = enabled.length - 1;
+    } else {
+      return;
+    }
+    const next = enabled[nextPos];
+    if (!next) return;
+    focusAt(next.i);
+    if (!next.o.disabled) onChange(next.o.value);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      className: `mma-optgrid mma-optgrid--${columns}${className ? ` ${className}` : ""}`,
+      role: "radiogroup",
+      "aria-label": ariaLabel,
+      children: [
+        options.map((opt, index) => {
+          const checked = value === opt.value;
+          return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": checked,
+              "aria-label": opt.hint ? `${opt.label}. ${opt.hint}` : opt.label,
+              disabled: opt.disabled,
+              tabIndex: checked || !value && index === 0 ? 0 : -1,
+              className: "mma-optcard",
+              "data-on": checked ? "1" : "0",
+              ref: (el) => {
+                refs.current[index] = el;
+              },
+              onClick: () => {
+                if (!opt.disabled) onChange(opt.value);
+              },
+              onKeyDown: (e) => onKeyDown(e, index),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mma-optcard-preview", "aria-hidden": "true", children: opt.preview }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mma-optcard-label", children: opt.label }),
+                checked ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mma-optcard-check", "aria-hidden": "true", children: "\u2713" }) : null
+              ]
+            },
+            opt.value
+          );
+        }),
+        trailing ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          "button",
+          {
+            type: "button",
+            className: "mma-optcard mma-optcard--ghost",
+            disabled: trailing.disabled !== false,
+            title: trailing.hint,
+            onClick: () => trailing.onClick?.(),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mma-optcard-preview mma-optcard-preview--plus", "aria-hidden": "true", children: "+" }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mma-optcard-label", children: trailing.label })
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { hidden: true, children: values.join(",") })
+      ]
+    }
+  );
+}
+
+// ../panel/src/components/Settings.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var SECTIONS = ["appearance", "network", "model", "about"];
+var DEFAULTS = {
+  hostPort: "17880",
+  provider: "",
+  model: "",
+  locale: "zh-CN",
+  theme: "light",
+  palette: "default",
+  cardStyle: "stamp"
+};
+function shortPkg(name2) {
+  return name2.replace(/^@monkey-mini-app\//, "");
+}
+function validatePort(raw) {
+  const trimmed = raw.trim();
+  if (!trimmed) return "empty";
+  if (!/^\d+$/.test(trimmed)) return "nan";
+  const n = Number(trimmed);
+  if (!Number.isInteger(n) || n < 1024 || n > 65535) return "range";
+  return null;
+}
+function ThemePreview({ mode }) {
+  if (mode === "system") {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "mma-preview-theme mma-preview-theme--system", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mma-preview-theme-half mma-preview-theme-half--light" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mma-preview-theme-half mma-preview-theme-half--dark" })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: `mma-preview-theme mma-preview-theme--${mode}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mma-preview-bar" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mma-preview-bar" })
+  ] });
+}
+function PalettePreview({ id, mode }) {
+  const t2 = tokensOf(id, mode);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "mma-preview-swatches", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { background: t2.primary } }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { background: t2.secondary } }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { background: t2.bg } })
+  ] });
+}
+function CardStylePreview({ style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: `mma-preview-cardstyle mma-preview-cardstyle--${style}` });
+}
 function Settings() {
   const s = usePanelState();
   const actions = usePanelActions();
   const { t: t2 } = usePanelI18n();
-  const [form, setForm] = React3.useState({});
-  React3.useEffect(() => {
+  const [form, setForm] = React4.useState({});
+  const [snapshot, setSnapshot] = React4.useState(null);
+  const [section, setSection] = React4.useState("appearance");
+  const [portTouched, setPortTouched] = React4.useState(false);
+  const [confirm, setConfirm] = React4.useState(null);
+  const [lastSavedAt, setLastSavedAt] = React4.useState(null);
+  const rootRef = React4.useRef(null);
+  const contentRef = React4.useRef(null);
+  const sectionRefs = React4.useRef({});
+  const dirtyCountRef = React4.useRef(0);
+  const confirmRef = React4.useRef(confirm);
+  confirmRef.current = confirm;
+  const [wide, setWide] = React4.useState(false);
+  React4.useEffect(() => {
     if (!s.settingsOpen) return;
-    setForm(s.cfg && Object.keys(s.cfg).length ? s.cfg : actions.getCfg());
-  }, [s.settingsOpen, s.cfgVersion, s.cfg, actions]);
+    const next = s.cfg && Object.keys(s.cfg).length ? { ...s.cfg } : { ...actions.getCfg() };
+    const snap = {
+      hostPort: next.hostPort || "",
+      provider: next.provider || "",
+      model: next.model || "",
+      theme: next.theme || s.theme || "light",
+      palette: next.palette || s.palette || "default",
+      cardStyle: next.cardStyle || s.cardStyle || "stamp",
+      locale: next.locale || next.chatLanguage || "zh-CN"
+    };
+    setForm({ ...next, ...snap, chatLanguage: snap.locale });
+    setSnapshot(snap);
+    setPortTouched(false);
+    setConfirm(null);
+    setSection("appearance");
+  }, [s.settingsOpen, s.cfgVersion, s.cfg, actions, s.theme, s.palette, s.cardStyle]);
+  React4.useEffect(() => {
+    if (!s.settingsOpen) return;
+    const host = rootRef.current?.closest("#mma-host") ?? rootRef.current;
+    if (!host || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver((entries) => {
+      const w = entries[0]?.contentRect.width ?? 0;
+      setWide(w >= 720);
+    });
+    ro.observe(host);
+    return () => ro.disconnect();
+  }, [s.settingsOpen]);
+  React4.useEffect(() => {
+    if (!s.settingsOpen) return;
+    const root = contentRef.current;
+    if (!root) return;
+    const nodes = SECTIONS.map((id) => sectionRefs.current[id]).filter(Boolean);
+    if (!nodes.length) return;
+    const obs = new IntersectionObserver(
+      (entries) => {
+        const visible = entries.filter((e) => e.isIntersecting).sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
+        const id = visible?.target.getAttribute("data-section");
+        if (id) setSection(id);
+      },
+      { root, threshold: [0.25, 0.5, 0.75], rootMargin: "-20% 0px -55% 0px" }
+    );
+    for (const n of nodes) obs.observe(n);
+    return () => obs.disconnect();
+  }, [s.settingsOpen, form]);
+  React4.useEffect(() => {
+    if (!s.settingsOpen) return;
+    const onKey = (e) => {
+      if (e.key !== "Escape") return;
+      e.preventDefault();
+      if (confirmRef.current) {
+        setConfirm(null);
+        return;
+      }
+      if (dirtyCountRef.current > 0) setConfirm("close");
+      else actions.toggleSettings(false);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [s.settingsOpen, actions]);
   if (!s.capabilities.config) return null;
-  const set = (k) => (e) => setForm((prev) => ({ ...prev, [k]: e.target.value }));
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mma-settings", id: "mma-settings", "data-open": s.settingsOpen ? "1" : "0", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mma-settings-head", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { children: t2("settings.title") }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "mma-iconbtn", id: "mma-cfg-close", onClick: () => actions.toggleSettings(false), children: "\u2715" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { children: [
-      t2("settings.hostPort"),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { id: "mma-cfg-port", type: "number", value: form.hostPort || "", onChange: set("hostPort") })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { children: [
-      t2("settings.language"),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("select", { id: "mma-cfg-lang", value: form.locale || form.chatLanguage || "zh-CN", onChange: set("locale"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "zh-CN", children: t2("settings.langZh") }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "en", children: t2("settings.langEn") })
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { children: [
-      t2("settings.theme"),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("select", { id: "mma-cfg-theme", value: form.theme || "light", onChange: set("theme"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "light", children: t2("theme.light") }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "dark", children: t2("theme.dark") })
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { children: [
-      t2("settings.palette"),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("select", { id: "mma-cfg-palette", value: form.palette || "default", onChange: set("palette"), children: PALETTES.map((p) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: p.id, children: t2(`palette.${p.id}`) }, p.id)) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { children: [
-      t2("settings.cardStyle"),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("select", { id: "mma-cfg-cardstyle", value: form.cardStyle || "stamp", onChange: set("cardStyle"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "stamp", children: t2("settings.cardStamp") }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "etch", children: t2("settings.cardEtch") }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "hero", children: t2("settings.cardHero") }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "list", children: t2("settings.cardList") })
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { children: [
-      t2("settings.llmProvider"),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { id: "mma-cfg-provider", value: form.provider || "", onChange: set("provider") })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { children: [
-      t2("settings.llmModel"),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { id: "mma-cfg-model", value: form.model || "", onChange: set("model") })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mma-settings-actions", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "mma-textbtn", id: "mma-cfg-save", onClick: () => actions.saveHostConfig(form), children: t2("settings.save") }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mma-settings-msg", id: "mma-cfg-msg", children: s.cfgMsg })
-    ] })
-  ] });
+  const themeMode = form.theme === "system" || form.theme === "dark" || form.theme === "light" ? form.theme : s.theme === "system" || s.theme === "dark" || s.theme === "light" ? s.theme : "light";
+  const resolvedMode = resolveMode(themeMode === "system" ? "system" : themeMode);
+  const palette = form.palette || s.palette || "default";
+  const cardStyle = form.cardStyle || s.cardStyle || "stamp";
+  const locale = form.locale || form.chatLanguage || "zh-CN";
+  const dirty = {
+    hostPort: form.hostPort || "",
+    provider: form.provider || "",
+    model: form.model || "",
+    theme: themeMode,
+    palette,
+    cardStyle,
+    locale
+  };
+  const dirtyKeys = ["hostPort", "provider", "model", "theme", "palette", "cardStyle", "locale"].filter((k) => snapshot != null && dirty[k] !== snapshot[k]);
+  const dirtyCount = dirtyKeys.length;
+  dirtyCountRef.current = dirtyCount;
+  const portDirty = snapshot != null && dirty.hostPort !== snapshot.hostPort;
+  const portErrorKey = portTouched || portDirty ? validatePort(form.hostPort || "") : null;
+  const portError = portErrorKey === "empty" ? t2("settings.portEmpty") : portErrorKey === "nan" ? t2("settings.portNan") : portErrorKey === "range" ? t2("settings.portRange") : null;
+  const canSave = dirtyCount > 0 && !portError;
+  const hostUrl = `http://127.0.0.1:${(form.hostPort || "").trim() || "\u2014"}`;
+  const paletteLabel = t2(`palette.${clampPalette(palette)}`);
+  const versionLabel = s.about?.packages?.[0]?.version ?? s.about?.packages?.find((p) => p.name.includes("dsh"))?.version ?? "\u2014";
+  const patch = (partial) => setForm((prev) => ({ ...prev, ...partial }));
+  const paintPreview = (next) => {
+    const host = document.getElementById("mma-host");
+    if (!host) return;
+    const theme = next.theme ?? themeMode;
+    const pal = next.palette ?? palette;
+    const style = next.cardStyle ?? cardStyle;
+    applyThemeTo(host, theme, pal, s.customPalettes);
+    host.setAttribute("data-cardstyle", style);
+  };
+  const previewAppearance = (partial) => {
+    const nextTheme = partial.theme ?? themeMode;
+    const nextPalette = partial.palette ?? palette;
+    const nextCard = partial.cardStyle ?? cardStyle;
+    paintPreview({ theme: nextTheme, palette: nextPalette, cardStyle: nextCard });
+    patch({
+      ...partial.theme != null ? { theme: partial.theme } : {},
+      ...partial.palette != null ? { palette: partial.palette } : {},
+      ...partial.cardStyle != null ? { cardStyle: partial.cardStyle } : {},
+      ...partial.locale != null ? { locale: partial.locale, chatLanguage: partial.locale } : {}
+    });
+  };
+  const scrollTo = (id) => {
+    setSection(id);
+    sectionRefs.current[id]?.scrollIntoView({ behavior: "smooth", block: "start" });
+  };
+  const discard = () => {
+    if (!snapshot) return;
+    patch({ ...snapshot, chatLanguage: snapshot.locale });
+    paintPreview({
+      theme: snapshot.theme,
+      palette: snapshot.palette,
+      cardStyle: snapshot.cardStyle
+    });
+    setPortTouched(false);
+  };
+  const requestClose = () => {
+    if (dirtyCount > 0) setConfirm("close");
+    else actions.toggleSettings(false);
+  };
+  const restoreDefaults = () => {
+    previewAppearance({
+      theme: DEFAULTS.theme,
+      palette: DEFAULTS.palette,
+      cardStyle: DEFAULTS.cardStyle,
+      locale: DEFAULTS.locale
+    });
+    patch({
+      hostPort: DEFAULTS.hostPort,
+      provider: DEFAULTS.provider,
+      model: DEFAULTS.model,
+      locale: DEFAULTS.locale,
+      chatLanguage: DEFAULTS.locale,
+      theme: DEFAULTS.theme,
+      palette: DEFAULTS.palette,
+      cardStyle: DEFAULTS.cardStyle
+    });
+    setPortTouched(true);
+    setConfirm(null);
+  };
+  const save = () => {
+    if (!canSave) return;
+    const committed = { ...dirty };
+    actions.saveHostConfig({
+      ...form,
+      theme: committed.theme,
+      palette: committed.palette,
+      cardStyle: committed.cardStyle,
+      locale: committed.locale,
+      chatLanguage: committed.locale
+    });
+    actions.setAppearance(
+      { theme: committed.theme, palette: committed.palette },
+      "global"
+    );
+    actions.setCardStyle(committed.cardStyle);
+    setSnapshot(committed);
+    const now = /* @__PURE__ */ new Date();
+    setLastSavedAt(
+      `${String(now.getHours()).padStart(2, "0")}:${String(now.getMinutes()).padStart(2, "0")}`
+    );
+  };
+  const copyUrl = async () => {
+    try {
+      await navigator.clipboard.writeText(hostUrl);
+    } catch {
+    }
+  };
+  const sectionLabel = (id) => id === "appearance" ? t2("settings.sectionAppearance") : id === "network" ? t2("settings.sectionNetwork") : id === "model" ? t2("settings.sectionModel") : t2("settings.sectionAbout");
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      ref: rootRef,
+      className: "mma-settings",
+      id: "mma-settings",
+      "data-open": s.settingsOpen ? "1" : "0",
+      "data-wide": wide ? "1" : "0",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("header", { className: "mma-settings-head", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mma-settings-head-left", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mma-settings-head-icon", "aria-hidden": "true", children: "\u2699" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { children: t2("settings.title") })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mma-settings-head-right", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "mma-settings-meta", children: [
+              versionLabel,
+              " \xB7 ",
+              paletteLabel
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "mma-iconbtn",
+                id: "mma-cfg-close",
+                "aria-label": t2("settings.close"),
+                onClick: requestClose,
+                children: "\u2715"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mma-settings-body", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("nav", { className: "mma-settings-rail", role: "tablist", "aria-label": t2("settings.sectionsAria"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mma-settings-rail-title", children: t2("settings.sectionNav") }),
+            SECTIONS.map((id) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "button",
+              {
+                type: "button",
+                role: "tab",
+                "aria-current": section === id ? "page" : void 0,
+                "data-on": section === id ? "1" : "0",
+                className: "mma-settings-rail-item",
+                onClick: () => scrollTo(id),
+                children: sectionLabel(id)
+              },
+              id
+            ))
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mma-settings-content", ref: contentRef, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+              "section",
+              {
+                className: "mma-settings-section",
+                "data-section": "appearance",
+                ref: (el) => {
+                  sectionRefs.current.appearance = el;
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h4", { children: t2("settings.sectionAppearance") }),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mma-settings-field", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { className: "mma-settings-label", htmlFor: "mma-cfg-lang-seg", children: t2("settings.language") }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mma-seg", id: "mma-cfg-lang-seg", role: "group", "aria-label": t2("settings.language"), children: [
+                      ["zh-CN", t2("settings.langZh")],
+                      ["en", t2("settings.langEn")]
+                    ].map(([id, label]) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        "data-on": locale === id ? "1" : "0",
+                        onClick: () => previewAppearance({ locale: id }),
+                        children: label
+                      },
+                      id
+                    )) })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mma-settings-field", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mma-settings-label", children: t2("settings.theme") }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                      OptionCardGrid,
+                      {
+                        "aria-label": t2("settings.theme"),
+                        columns: 3,
+                        value: themeMode,
+                        onChange: (v) => previewAppearance({ theme: v }),
+                        options: ["system", "light", "dark"].map((mode) => ({
+                          value: mode,
+                          label: t2(`theme.${mode}`),
+                          preview: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ThemePreview, { mode })
+                        }))
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mma-settings-field", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mma-settings-label", children: t2("settings.palette") }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                      OptionCardGrid,
+                      {
+                        "aria-label": t2("settings.palette"),
+                        columns: 4,
+                        value: palette,
+                        onChange: (v) => previewAppearance({ palette: v }),
+                        options: PALETTES.map((p) => ({
+                          value: p.id,
+                          label: t2(`palette.${p.id}`),
+                          preview: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PalettePreview, { id: p.id, mode: resolvedMode })
+                        }))
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mma-settings-field", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mma-settings-label", children: t2("settings.cardStyle") }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                      OptionCardGrid,
+                      {
+                        "aria-label": t2("settings.cardStyle"),
+                        columns: 3,
+                        value: cardStyle,
+                        onChange: (v) => previewAppearance({ cardStyle: v }),
+                        options: [
+                          ["stamp", t2("settings.cardStamp")],
+                          ["etch", t2("settings.cardEtch")],
+                          ["hero", t2("settings.cardHero")],
+                          ["list", t2("settings.cardList")]
+                        ].map(([value, label]) => ({
+                          value,
+                          label,
+                          preview: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardStylePreview, { style: value })
+                        }))
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "mma-settings-hint", children: t2("settings.appearanceHint") })
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("hr", { className: "mma-settings-rule" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+              "section",
+              {
+                className: "mma-settings-section",
+                "data-section": "network",
+                ref: (el) => {
+                  sectionRefs.current.network = el;
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h4", { children: t2("settings.sectionNetwork") }),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `mma-settings-field mma-settings-field--row${portError ? " is-error" : ""}`, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { className: "mma-settings-label", htmlFor: "mma-cfg-port", children: t2("settings.hostPort") }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mma-settings-control", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mma-port-row", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mma-port-addon", "aria-hidden": "true", children: ":" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                          "input",
+                          {
+                            id: "mma-cfg-port",
+                            type: "text",
+                            inputMode: "numeric",
+                            autoComplete: "off",
+                            value: form.hostPort || "",
+                            "aria-invalid": !!portError,
+                            "aria-describedby": "mma-cfg-port-hint",
+                            onChange: (e) => {
+                              setPortTouched(true);
+                              patch({ hostPort: e.target.value });
+                            },
+                            onBlur: () => setPortTouched(true)
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("code", { className: "mma-port-url", children: hostUrl }),
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "mma-ghostbtn", onClick: () => void copyUrl(), children: t2("settings.copyUrl") }),
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("a", { className: "mma-ghostbtn", href: hostUrl, target: "_blank", rel: "noreferrer", children: t2("settings.openUrl") })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "mma-settings-hint", id: "mma-cfg-port-hint", role: portError ? "alert" : void 0, children: portError ?? t2("settings.portHint") })
+                    ] })
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("hr", { className: "mma-settings-rule" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+              "section",
+              {
+                className: "mma-settings-section",
+                "data-section": "model",
+                ref: (el) => {
+                  sectionRefs.current.model = el;
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h4", { children: t2("settings.sectionModel") }),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mma-settings-field mma-settings-field--row", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { className: "mma-settings-label", htmlFor: "mma-cfg-provider", children: t2("settings.llmProvider") }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mma-settings-control mma-settings-control--model", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        "input",
+                        {
+                          id: "mma-cfg-provider",
+                          list: "mma-cfg-provider-list",
+                          placeholder: t2("settings.providerPlaceholder"),
+                          value: form.provider || "",
+                          onChange: (e) => patch({ provider: e.target.value, model: "" })
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("datalist", { id: "mma-cfg-provider-list", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "openai" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "anthropic" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "deepseek" })
+                      ] })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mma-settings-field mma-settings-field--row", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { className: "mma-settings-label", htmlFor: "mma-cfg-model", children: t2("settings.llmModel") }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mma-settings-control mma-settings-control--model", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mma-model-row", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        "input",
+                        {
+                          id: "mma-cfg-model",
+                          placeholder: form.provider ? t2("settings.modelPlaceholder") : t2("settings.modelNeedsProvider"),
+                          value: form.model || "",
+                          disabled: !form.provider,
+                          onChange: (e) => patch({ model: e.target.value })
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mma-status-pill", "data-state": "idle", children: t2("settings.llmProbeIdle") })
+                    ] }) })
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("hr", { className: "mma-settings-rule" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+              "section",
+              {
+                className: "mma-settings-section",
+                "data-section": "about",
+                ref: (el) => {
+                  sectionRefs.current.about = el;
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h4", { children: t2("settings.sectionAbout") }),
+                  s.about ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mma-about-meta", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mma-settings-label", children: t2("settings.env") }),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("code", { children: [
+                        s.about.adapter,
+                        " \xB7 ",
+                        s.about.env
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { className: "mma-about-pkgs", children: s.about.packages.map((pkg) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("li", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { title: pkg.name, children: shortPkg(pkg.name) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("code", { children: pkg.version })
+                    ] }, pkg.name)) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mma-about-actions", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        "button",
+                        {
+                          type: "button",
+                          className: "mma-ghostbtn",
+                          id: "mma-cfg-check-update",
+                          disabled: s.updateCheck?.status === "loading",
+                          onClick: () => actions.checkUpdates(),
+                          children: s.updateCheck?.status === "loading" ? t2("settings.checkingUpdate") : t2("settings.checkUpdate")
+                        }
+                      ),
+                      s.updateCheck?.status === "done" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mma-settings-hint", children: s.updateCheck.error ? t2("settings.updateError", { message: s.updateCheck.error }) : s.updateCheck.updateAvailable ? t2("settings.updateAvailable", {
+                        latest: s.updateCheck.latest ?? "",
+                        current: s.updateCheck.current
+                      }) : t2("settings.upToDate", {
+                        version: s.updateCheck.latest ?? s.updateCheck.current
+                      }) }) : null
+                    ] })
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "mma-settings-hint", children: t2("settings.aboutLoading") })
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("footer", { className: "mma-settings-foot", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mma-settings-foot-left", "aria-live": "polite", children: [
+            lastSavedAt ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "mma-settings-hint", children: [
+              t2("settings.lastSaved", { time: lastSavedAt }),
+              dirtyCount > 0 ? " \xB7 " : ""
+            ] }) : null,
+            dirtyCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mma-settings-dirty", children: t2("settings.dirtyCount", { count: dirtyCount }) }) : null
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mma-settings-foot-right", children: [
+            dirtyCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "mma-ghostbtn", onClick: discard, children: t2("settings.discard") }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "mma-ghostbtn", onClick: () => setConfirm("restore"), children: t2("settings.restore") }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "mma-primarybtn",
+                id: "mma-cfg-save",
+                disabled: !canSave,
+                onClick: save,
+                children: t2("settings.save")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mma-settings-msg", id: "mma-cfg-msg", children: s.cfgMsg })
+        ] }),
+        confirm ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mma-settings-confirm", role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          "div",
+          {
+            className: "mma-dialog",
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": "mma-settings-confirm-title",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { id: "mma-settings-confirm-title", children: confirm === "close" ? t2("settings.confirmCloseTitle") : t2("settings.confirmRestoreTitle") }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: confirm === "close" ? t2("settings.confirmCloseBody") : t2("settings.confirmRestoreBody") }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mma-dialog-actions", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", onClick: () => setConfirm(null), children: t2("modal.cancel") }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "go",
+                    onClick: () => {
+                      if (confirm === "close") {
+                        discard();
+                        actions.toggleSettings(false);
+                      } else restoreDefaults();
+                      setConfirm(null);
+                    },
+                    children: confirm === "close" ? t2("settings.confirmDiscard") : t2("settings.confirmRestoreAction")
+                  }
+                )
+              ] })
+            ]
+          }
+        ) }) : null
+      ]
+    }
+  );
 }
 
 // ../panel/src/components/Tabs.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function Tabs() {
   const s = usePanelState();
   const actions = usePanelActions();
   const { t: t2 } = usePanelI18n();
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mma-tabs", id: "mma-tabs", children: s.tabs.map((tb) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.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__ */ (0, import_jsx_runtime7.jsx)(
+    const close = tb.id === "all" ? null : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "span",
       {
         className: "mma-tab-x",
@@ -1424,7 +2340,7 @@ function Tabs() {
         children: "\xD7"
       }
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "button",
       {
         type: "button",
@@ -1433,7 +2349,7 @@ function Tabs() {
         title: tb.id === "all" ? t2("tabs.allTitle") : tb.title,
         onClick: () => actions.switchTab(tb.id),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: tb.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: tb.title }),
           close
         ]
       },
@@ -1592,16 +2508,19 @@ var __iconNode7 = [
 var X = createLucideIcon("x", __iconNode7);
 
 // ../panel/src/components/ThemePop.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function ThemePop() {
   const s = usePanelState();
   const actions = usePanelActions();
   const { t: t2 } = usePanelI18n();
   const app = actions.getActiveApp();
-  const appTheme = app ? app.theme : null;
+  const appScope = Boolean(app) && s.themeScope === "app";
+  const viewTheme = appScope ? app?.theme?.theme ?? s.theme : s.theme;
+  const viewPalette = appScope ? selectedPalette(app?.theme?.palette, Boolean(app?.localPalette)) : s.palette;
   const customs = s.customPalettes || {};
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    s.themePopOpen ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  const canApp = Boolean(app && s.capabilities.appTheme);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    s.themePopOpen ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "div",
       {
         className: "mma-pop-scrim",
@@ -1613,7 +2532,7 @@ function ThemePop() {
         }
       }
     ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       "div",
       {
         className: "mma-pop",
@@ -1623,35 +2542,79 @@ function ThemePop() {
         onClick: (e) => e.stopPropagation(),
         onPointerDown: (e) => e.stopPropagation(),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "mma-pop-seg", children: ["light", "dark"].map((mode) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mma-pop-lab", children: t2("theme.apply") }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mma-pop-seg", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "button",
+              {
+                type: "button",
+                "data-scope": "global",
+                "data-on": s.themeScope === "global" ? "1" : "0",
+                onClick: () => actions.setThemeScope("global"),
+                children: t2("theme.global")
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "button",
+              {
+                type: "button",
+                "data-scope": "app",
+                id: "mma-scope-app",
+                title: app ? t2("theme.saveTo", { name: app.name }) : t2("theme.openAppFirst"),
+                "data-on": appScope ? "1" : "0",
+                disabled: !canApp,
+                onClick: () => actions.setThemeScope("app"),
+                children: app ? app.name : t2("theme.currentApp")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mma-pop-lab", children: t2("theme.appearance") }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mma-pop-seg", children: ["system", "light", "dark"].map((mode) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "button",
             {
               type: "button",
               "data-mode": mode,
-              "data-on": s.theme === mode ? "1" : "0",
+              "data-on": viewTheme === mode ? "1" : "0",
               onClick: () => actions.setAppearance({ theme: mode }, s.themeScope),
               children: t2(`theme.${mode}`)
             },
             mode
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "mma-pop-list", children: [
-            PALETTES.map((p) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mma-pop-lab", children: t2("theme.palettes") }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mma-pop-list", children: [
+            appScope ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+              "button",
+              {
+                type: "button",
+                className: "mma-swatch",
+                id: "mma-follow-global",
+                "data-on": viewPalette === GLOBAL_PALETTE_ID ? "1" : "0",
+                role: "menuitem",
+                onClick: () => actions.setAppearance({ palette: GLOBAL_PALETTE_ID }, "app"),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("i", { className: "mma-dot", style: { background: "linear-gradient(135deg,#888,#ddd)" } }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: t2("theme.followGlobal") })
+                ]
+              }
+            ) : null,
+            PALETTES.map((p) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
               "button",
               {
                 type: "button",
                 className: "mma-swatch",
                 "data-palette": p.id,
                 role: "menuitem",
-                "data-on": s.palette === p.id ? "1" : "0",
+                "data-on": viewPalette === p.id ? "1" : "0",
                 onClick: () => actions.setAppearance({ palette: p.id }, s.themeScope),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("i", { className: "mma-dot", style: { background: p.swatch } }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: t2(`palette.${p.id}`) })
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("i", { className: "mma-dot", style: { background: p.swatch } }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: t2(`palette.${p.id}`) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("i", { className: "mma-custom-badge", children: t2("theme.chipSystem") })
                 ]
               },
               p.id
             )),
-            Object.keys(customs).map((id) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            Object.keys(customs).map((id) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
               "button",
               {
                 type: "button",
@@ -1659,43 +2622,43 @@ function ThemePop() {
                 "data-palette": id,
                 "data-custom": "1",
                 role: "menuitem",
-                "data-on": s.palette === id ? "1" : "0",
+                "data-on": viewPalette === id ? "1" : "0",
                 onClick: () => actions.setAppearance({ palette: id }, s.themeScope),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("i", { className: "mma-dot", style: { background: customs[id].swatch || "#888" } }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: customs[id].label || id }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("i", { className: "mma-custom-badge", children: t2("theme.custom") })
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("i", { className: "mma-dot", style: { background: customs[id].swatch || "#888" } }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: customs[id].label || id }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("i", { className: "mma-custom-badge", children: t2("theme.custom") })
                 ]
               },
               id
-            ))
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "mma-pop-seg mma-scope-seg", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              "button",
-              {
-                type: "button",
-                "data-scope": "global",
-                "data-on": s.themeScope === "global" ? "1" : "0",
-                onClick: () => actions.setThemeScope("global"),
-                children: t2("theme.global")
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            )),
+            appScope && app?.localPalette ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
               "button",
               {
                 type: "button",
-                "data-scope": "app",
-                id: "mma-scope-app",
-                title: app ? t2("theme.saveTo", { name: app.name }) : t2("theme.openAppFirst"),
-                "data-on": s.themeScope === "app" ? "1" : "0",
-                disabled: !app || !s.capabilities.appTheme,
-                onClick: () => actions.setThemeScope("app"),
-                children: app ? app.name : t2("theme.currentApp")
+                className: "mma-swatch",
+                "data-palette": LOCAL_PALETTE_ID,
+                role: "menuitem",
+                "data-on": viewPalette === LOCAL_PALETTE_ID ? "1" : "0",
+                onClick: () => actions.setAppearance({ palette: LOCAL_PALETTE_ID }, "app"),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("i", { className: "mma-dot", style: { background: app.localPalette.swatch } }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: app.localPalette.label }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("i", { className: "mma-custom-badge", children: t2("theme.chipApp") })
+                ]
               }
-            )
+            ) : null
           ] }),
-          s.themeScope === "app" && appTheme ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "mma-textbtn", id: "mma-clear-app-theme", onClick: () => actions.clearAppTheme(), children: t2("theme.followGlobal") }) : null
+          appScope && app?.theme ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "mma-textbtn",
+              id: "mma-reset-app-theme",
+              onClick: () => actions.clearAppTheme(),
+              children: t2("theme.resetApp")
+            }
+          ) : null
         ]
       }
     )
@@ -1703,7 +2666,7 @@ function ThemePop() {
 }
 
 // ../panel/src/components/Toolbar.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var iconProps = { size: 16, strokeWidth: 2, className: "mma-ico" };
 function Toolbar() {
   const s = usePanelState();
@@ -1712,8 +2675,8 @@ function Toolbar() {
   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__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mma-toolbar", children: [
-    appTab && s.capabilities.deleteApp ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mma-toolbar", children: [
+    appTab && s.capabilities.deleteApp ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "button",
       {
         type: "button",
@@ -1724,7 +2687,7 @@ function Toolbar() {
         children: t2("toolbar.delete")
       }
     ) : null,
-    appTab ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    appTab ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "button",
       {
         type: "button",
@@ -1733,11 +2696,11 @@ function Toolbar() {
         title: t2("toolbar.reload"),
         "aria-label": t2("toolbar.reload"),
         onClick: () => actions.reloadActive(),
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RefreshCw, { ...iconProps })
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RefreshCw, { ...iconProps })
       }
     ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mma-theme-wrap", id: "mma-theme-wrap", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mma-theme-wrap", id: "mma-theme-wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "button",
         {
           type: "button",
@@ -1747,12 +2710,12 @@ function Toolbar() {
           "aria-label": t2("toolbar.theme"),
           "aria-haspopup": "menu",
           onClick: () => actions.toggleThemePop(),
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LayoutGrid, { ...iconProps })
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LayoutGrid, { ...iconProps })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ThemePop, {})
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ThemePop, {})
     ] }),
-    anyApp && s.capabilities.history ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    anyApp && s.capabilities.history ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "button",
       {
         type: "button",
@@ -1761,10 +2724,10 @@ function Toolbar() {
         title: t2("toolbar.history"),
         "aria-label": t2("toolbar.history"),
         onClick: () => actions.toggleBrowse("history"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Clock, { ...iconProps })
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Clock, { ...iconProps })
       }
     ) : null,
-    anyApp && s.capabilities.storage ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    anyApp && s.capabilities.storage ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "button",
       {
         type: "button",
@@ -1773,10 +2736,10 @@ function Toolbar() {
         title: t2("toolbar.storage"),
         "aria-label": t2("toolbar.storage"),
         onClick: () => actions.toggleBrowse("storage"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Database, { ...iconProps })
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Database, { ...iconProps })
       }
     ) : null,
-    s.capabilities.config ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    s.capabilities.config ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "button",
       {
         type: "button",
@@ -1785,10 +2748,10 @@ function Toolbar() {
         title: t2("toolbar.settings"),
         "aria-label": t2("toolbar.settings"),
         onClick: () => actions.toggleSettings(true),
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Settings2, { ...iconProps })
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Settings2, { ...iconProps })
       }
     ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "button",
       {
         type: "button",
@@ -1797,10 +2760,10 @@ function Toolbar() {
         title: side ? t2("toolbar.dockFill") : t2("toolbar.dockSide"),
         "aria-label": side ? t2("toolbar.dockFill") : t2("toolbar.dockSide"),
         onClick: () => actions.setDock(side ? "fill" : "side"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PanelRight, { ...iconProps })
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PanelRight, { ...iconProps })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "button",
       {
         type: "button",
@@ -1809,29 +2772,29 @@ function Toolbar() {
         title: t2("toolbar.close"),
         "aria-label": t2("toolbar.close"),
         onClick: () => actions.closeDashboard(),
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(X, { ...iconProps })
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(X, { ...iconProps })
       }
     )
   ] });
 }
 
 // ../panel/src/components/MiniAppPanel.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function MiniAppPanel() {
   const s = usePanelState();
   const listVisible = s.active === "all";
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mma-chrome", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Tabs, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Toolbar, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "mma-chrome", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Tabs, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Toolbar, {})
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mma-stage", children: [
-      listVisible ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ListRegion, {}) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { id: "mma-frames", className: "mma-frames", style: { display: listVisible ? "none" : "block" } })
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "mma-stage", children: [
+      listVisible ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ListRegion, {}) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { id: "mma-frames", className: "mma-frames", style: { display: listVisible ? "none" : "block" } })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Settings, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Browse, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Modal, {})
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Settings, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Browse, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Modal, {})
   ] });
 }
 
@@ -1884,6 +2847,13 @@ function createFrameController(opts) {
   const { container: initial2, urlOf, envOf } = opts;
   let container = initial2 ?? null;
   const map = /* @__PURE__ */ new Map();
+  function targetOrigin(appId, rec) {
+    try {
+      return new URL(rec?.iframe.src || urlOf(appId)).origin;
+    } catch {
+      return "";
+    }
+  }
   return {
     map,
     url: (appId) => urlOf(appId),
@@ -1895,8 +2865,13 @@ function createFrameController(opts) {
       const w = rec?.iframe.contentWindow;
       if (!w) return;
       const env = envOf(appId);
+      const target = targetOrigin(appId, rec);
+      if (!target) return;
       try {
-        w.postMessage({ type: "mma-set-env", theme: env.theme, palette: env.palette, dock: env.dock }, "*");
+        w.postMessage(
+          { type: "mma-set-env", theme: env.theme, palette: env.palette, dock: env.dock, vars: env.vars },
+          target
+        );
       } catch {
       }
     },
@@ -1910,7 +2885,7 @@ function createFrameController(opts) {
         const wrap = document.createElement("div");
         wrap.className = "mma-frame";
         wrap.setAttribute("data-app", appId);
-        wrap.innerHTML = `${loadingMarkup()}<iframe title="${escapeHtml(title || appId)}"></iframe>`;
+        wrap.innerHTML = `${loadingMarkup()}<iframe title="${escapeHtml(title || appId)}" allow="clipboard-write"></iframe>`;
         if (!container) return;
         container.appendChild(wrap);
         const iframe = wrap.querySelector("iframe");
@@ -1940,6 +2915,27 @@ function createFrameController(opts) {
       if (!rec) return;
       if (!rec.wrap.querySelector(".mma-load")) rec.wrap.insertAdjacentHTML("afterbegin", loadingMarkup());
       rec.iframe.src = `${urlOf(appId)}&_=${Date.now()}`;
+    },
+    postViewEval(query) {
+      const rec = map.get(query.appId);
+      const w = rec?.iframe.contentWindow;
+      const target = rec ? targetOrigin(query.appId, rec) : "";
+      if (!w || !target) return false;
+      try {
+        w.postMessage(
+          {
+            type: "mma-view-eval",
+            requestId: query.requestId,
+            appId: query.appId,
+            code: query.code ?? "",
+            maxBytes: query.maxBytes ?? 0
+          },
+          target
+        );
+        return true;
+      } catch {
+        return false;
+      }
     }
   };
 }
@@ -4217,6 +5213,7 @@ var en_default = {
     close: "Close"
   },
   theme: {
+    system: "System",
     light: "Light",
     dark: "Dark",
     custom: "Custom",
@@ -4224,7 +5221,13 @@ var en_default = {
     currentApp: "Current app",
     openAppFirst: "Open an app first",
     saveTo: 'Save to "{{name}}"',
-    followGlobal: "Follow global (clear app theme)"
+    followGlobal: "Follow global",
+    apply: "Apply to",
+    appearance: "Appearance",
+    palettes: "Palette",
+    chipSystem: "System",
+    chipApp: "This app",
+    resetApp: "Restore this app default"
   },
   palette: {
     default: "Default",
@@ -4250,20 +5253,59 @@ var en_default = {
   },
   settings: {
     title: "Settings",
+    close: "Close settings",
+    sectionNav: "Sections",
+    sectionsAria: "Settings sections",
+    sectionAppearance: "Appearance",
+    sectionNetwork: "Network",
+    sectionModel: "Model",
+    sectionAbout: "About",
+    sectionHost: "Host",
     hostPort: "Host port",
     language: "Language",
     langZh: "Chinese",
     langEn: "English",
     theme: "Theme",
     palette: "Palette",
+    dock: "Dock",
+    dockFill: "Fill",
+    dockSide: "Side",
     cardStyle: "Card style",
     cardStamp: "Stamp",
     cardEtch: "Etch",
     cardHero: "Hero",
     cardList: "List",
+    appearanceHint: "Preview only. Click Save to persist; closing discards unsaved changes.",
+    portHint: "Range 1024\u201365535. Restart the app after changing.",
+    portEmpty: "Enter a port.",
+    portNan: "Port must be a number.",
+    portRange: "Port must be between 1024 and 65535.",
+    copyUrl: "Copy",
+    openUrl: "Open",
     llmProvider: "LLM Provider",
     llmModel: "LLM model",
-    save: "Save"
+    providerPlaceholder: "Select a provider",
+    modelPlaceholder: "Enter a model",
+    modelNeedsProvider: "Select a provider first",
+    llmProbeIdle: "Probe not wired",
+    save: "Save",
+    discard: "Discard",
+    restore: "Restore defaults",
+    lastSaved: "Saved {{time}}",
+    dirtyCount: "{{count}} unsaved",
+    confirmCloseTitle: "Discard unsaved changes?",
+    confirmCloseBody: "Unsaved appearance, network, and model changes will be discarded and restored.",
+    confirmDiscard: "Discard",
+    confirmRestoreTitle: "Restore defaults?",
+    confirmRestoreBody: "Resets appearance, port, and model fields (port/model still need Save).",
+    confirmRestoreAction: "Restore",
+    env: "Environment",
+    aboutLoading: "Loading version info\u2026",
+    checkUpdate: "Check for updates",
+    checkingUpdate: "Checking\u2026",
+    upToDate: "Up to date ({{version}})",
+    updateAvailable: "Update available: {{latest}} (current {{current}})",
+    updateError: "Check failed: {{message}}"
   },
   modal: {
     title: "Delete mini app",
@@ -4282,7 +5324,16 @@ var en_default = {
     noCommits: "No commits yet",
     noStorage: "No storage files",
     expandMsg: "Show more",
-    collapseMsg: "Show less"
+    collapseMsg: "Show less",
+    entries: "{{count}} entries",
+    sizeKb: "{{value}} KB",
+    sizeMb: "{{value}} MB",
+    noticeTitle: '"{{table}}" is already {{size}}',
+    noticeBody: "The bigger this file gets, the slower every save becomes. Move anything that keeps growing into its own table \u2014 copy the prompt below and paste it to an AI to do the split for you.",
+    noticeTop: 'The heaviest piece right now is "{{key}}" (about {{size}}).',
+    noticeCopy: "Copy split prompt",
+    noticeCopied: "Copied",
+    noticeDismiss: "Got it"
   },
   load: {
     label: "Loading"
@@ -4312,6 +5363,7 @@ var zh_CN_default = {
     close: "\u5173\u95ED"
   },
   theme: {
+    system: "\u8DDF\u968F\u7CFB\u7EDF",
     light: "\u6D45\u8272",
     dark: "\u6DF1\u8272",
     custom: "\u81EA\u5B9A\u4E49",
@@ -4319,7 +5371,13 @@ var zh_CN_default = {
     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"
+    followGlobal: "\u8DDF\u968F\u5168\u5C40",
+    apply: "\u5E94\u7528\u5230",
+    appearance: "\u5916\u89C2",
+    palettes: "\u8272\u677F",
+    chipSystem: "\u7CFB\u7EDF",
+    chipApp: "\u672C\u5E94\u7528",
+    resetApp: "\u6062\u590D\u8BE5\u5E94\u7528\u9ED8\u8BA4"
   },
   palette: {
     default: "\u9ED8\u8BA4",
@@ -4345,20 +5403,59 @@ var zh_CN_default = {
   },
   settings: {
     title: "\u8BBE\u7F6E",
+    close: "\u5173\u95ED\u8BBE\u7F6E",
+    sectionNav: "\u5206\u7EC4",
+    sectionsAria: "\u8BBE\u7F6E\u5206\u7EC4",
+    sectionAppearance: "\u5916\u89C2",
+    sectionNetwork: "\u7F51\u7EDC",
+    sectionModel: "\u6A21\u578B",
+    sectionAbout: "\u5173\u4E8E",
+    sectionHost: "\u5BBF\u4E3B",
     hostPort: "Host \u7AEF\u53E3",
     language: "\u754C\u9762\u8BED\u8A00",
     langZh: "\u4E2D\u6587",
     langEn: "English",
     theme: "\u4E3B\u9898",
     palette: "\u8C03\u8272\u677F",
+    dock: "\u505C\u9760",
+    dockFill: "\u94FA\u6EE1",
+    dockSide: "\u4FA7\u680F",
     cardStyle: "\u5361\u7247\u6837\u5F0F",
     cardStamp: "\u5370\u7AE0",
     cardEtch: "\u8680\u523B",
     cardHero: "\u6D77\u62A5",
     cardList: "\u5217\u8868",
+    appearanceHint: "\u4EC5\u9884\u89C8\uFF0C\u70B9\u4FDD\u5B58\u540E\u624D\u4F1A\u5199\u5165\uFF1B\u5173\u95ED\u672A\u4FDD\u5B58\u5C06\u6062\u590D\u539F\u6837\u3002",
+    portHint: "\u8303\u56F4 1024\u201365535\uFF0C\u4FEE\u6539\u540E\u9700\u91CD\u542F\u5E94\u7528\u3002",
+    portEmpty: "\u8BF7\u8F93\u5165\u7AEF\u53E3\u3002",
+    portNan: "\u7AEF\u53E3\u5FC5\u987B\u662F\u6570\u5B57\u3002",
+    portRange: "\u7AEF\u53E3\u9700\u5728 1024\u201365535 \u4E4B\u95F4\u3002",
+    copyUrl: "\u590D\u5236",
+    openUrl: "\u6253\u5F00",
     llmProvider: "LLM Provider",
     llmModel: "LLM \u6A21\u578B",
-    save: "\u4FDD\u5B58"
+    providerPlaceholder: "\u9009\u62E9 Provider",
+    modelPlaceholder: "\u8F93\u5165\u6A21\u578B\u540D",
+    modelNeedsProvider: "\u5148\u9009\u62E9 Provider",
+    llmProbeIdle: "\u672A\u63A5\u5165\u68C0\u6D4B",
+    save: "\u4FDD\u5B58",
+    discard: "\u653E\u5F03\u4FEE\u6539",
+    restore: "\u6062\u590D\u9ED8\u8BA4",
+    lastSaved: "\u4E0A\u6B21\u4FDD\u5B58 {{time}}",
+    dirtyCount: "{{count}} \u9879\u672A\u4FDD\u5B58",
+    confirmCloseTitle: "\u653E\u5F03\u672A\u4FDD\u5B58\u7684\u4FEE\u6539\uFF1F",
+    confirmCloseBody: "\u5173\u95ED\u540E\uFF0C\u672A\u4FDD\u5B58\u7684\u5916\u89C2 / \u7F51\u7EDC / \u6A21\u578B\u6539\u52A8\u90FD\u4F1A\u4E22\u5F03\u5E76\u6062\u590D\u539F\u6837\u3002",
+    confirmDiscard: "\u653E\u5F03",
+    confirmRestoreTitle: "\u6062\u590D\u9ED8\u8BA4\u8BBE\u7F6E\uFF1F",
+    confirmRestoreBody: "\u5C06\u91CD\u7F6E\u5916\u89C2\u3001\u7AEF\u53E3\u4E0E\u6A21\u578B\u5B57\u6BB5\u4E3A\u9ED8\u8BA4\u503C\uFF08\u4ECD\u9700\u4FDD\u5B58\u7AEF\u53E3/\u6A21\u578B\uFF09\u3002",
+    confirmRestoreAction: "\u6062\u590D",
+    env: "\u73AF\u5883",
+    aboutLoading: "\u6B63\u5728\u8BFB\u53D6\u7248\u672C\u4FE1\u606F\u2026",
+    checkUpdate: "\u68C0\u67E5\u66F4\u65B0",
+    checkingUpdate: "\u68C0\u67E5\u4E2D\u2026",
+    upToDate: "\u5DF2\u662F\u6700\u65B0\uFF08{{version}}\uFF09",
+    updateAvailable: "\u6709\u65B0\u7248\u672C {{latest}}\uFF08\u5F53\u524D {{current}}\uFF09",
+    updateError: "\u68C0\u67E5\u5931\u8D25\uFF1A{{message}}"
   },
   modal: {
     title: "\u5220\u9664\u5C0F\u7A0B\u5E8F",
@@ -4377,7 +5474,16 @@ var zh_CN_default = {
     noCommits: "\u6682\u65E0\u63D0\u4EA4\u8BB0\u5F55",
     noStorage: "\u6682\u65E0\u5B58\u50A8\u6587\u4EF6",
     expandMsg: "\u5C55\u5F00\u5168\u6587",
-    collapseMsg: "\u6536\u8D77"
+    collapseMsg: "\u6536\u8D77",
+    entries: "{{count}} \u6761",
+    sizeKb: "{{value}} KB",
+    sizeMb: "{{value}} MB",
+    noticeTitle: "\u300C{{table}}\u300D\u5DF2\u7ECF\u6709 {{size}} \u4E86",
+    noticeBody: "\u8FD9\u4E2A\u6587\u4EF6\u8D8A\u5927\uFF0C\u6BCF\u6B21\u4FDD\u5B58\u90FD\u4F1A\u8D8A\u6162\u3002\u5EFA\u8BAE\u628A\u4F1A\u4E0D\u65AD\u53D8\u591A\u7684\u6570\u636E\u62C6\u5230\u5355\u72EC\u7684\u8868\u91CC\u2014\u2014\u4F60\u53EF\u4EE5\u628A\u4E0B\u9762\u7684\u63D0\u793A\u8BCD\u590D\u5236\u7ED9 AI\uFF0C\u8BA9\u5B83\u5E2E\u4F60\u6539\u3002",
+    noticeTop: "\u773C\u4E0B\u6700\u5927\u7684\u4E00\u5757\u662F\u300C{{key}}\u300D\uFF08\u7EA6 {{size}}\uFF09\u3002",
+    noticeCopy: "\u590D\u5236\u62C6\u5206\u63D0\u793A\u8BCD",
+    noticeCopied: "\u5DF2\u590D\u5236",
+    noticeDismiss: "\u77E5\u9053\u4E86"
   },
   load: {
     label: "\u52A0\u8F7D\u4E2D"
@@ -4457,7 +5563,7 @@ function resolvePanelLocale(value) {
 // ../panel/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{color:var(--dsw-alias-fg,#111);background:var(--dsw-alias-bg,#f7f7f8);overflow:hidden;container-type:inline-size;container-name:mma-host;}",
   "#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;}",
@@ -4473,12 +5579,18 @@ var CSS = [
   "#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{display:none;position:absolute;right:0;top:40px;z-index:8;width:260px;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-pop-seg button:disabled{opacity:.45;cursor:not-allowed;}",
+  "#mma-host .mma-pop-lab{font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.55;margin:10px 2px 6px;}",
+  "#mma-host .mma-pop-lab:first-child{margin-top:0;}",
+  "#mma-host .mma-pop-list{margin:0;display:flex;flex-direction:column;gap:6px!important;max-height:280px;overflow-y:auto;padding:4px 0;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--dsw-alias-fg,#111) 35%,transparent) transparent;}",
+  "#mma-host .mma-pop-list::-webkit-scrollbar{width:8px;}",
+  "#mma-host .mma-pop-list::-webkit-scrollbar-track{background:transparent;}",
+  "#mma-host .mma-pop-list::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--dsw-alias-fg,#111) 35%,transparent);border-radius:99px;}",
   "#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;}",
@@ -4557,17 +5669,106 @@ var CSS = [
   "#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-settings{position:absolute;inset:0;z-index:4;display:none;flex-direction:column;background:var(--dsw-alias-bg,#f7f7f8);color:inherit;overflow:hidden;}",
+  "#mma-host .mma-settings[data-open='1']{display:flex;}",
+  "#mma-host .mma-settings-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--dsw-alias-border,#e5e7eb);background:var(--dsw-alias-surface,#fff);}",
+  "#mma-host .mma-settings-head-left{display:flex;align-items:center;gap:8px;min-width:0;}",
+  "#mma-host .mma-settings-head-icon{opacity:.7;font-size:14px;}",
+  "#mma-host .mma-settings-head h3{margin:0;font-size:15px;font-weight:650;letter-spacing:-.01em;}",
+  "#mma-host .mma-settings-head-right{display:flex;align-items:center;gap:8px;}",
+  "#mma-host .mma-settings-meta{font-size:11px;opacity:.55;white-space:nowrap;}",
+  "#mma-host .mma-settings-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}",
+  "#mma-host .mma-settings-rail{flex:0 0 auto;display:flex;gap:4px;padding:8px 10px;border-bottom:1px solid var(--dsw-alias-border,#e5e7eb);background:var(--dsw-alias-surface,#fff);overflow-x:auto;}",
+  "#mma-host .mma-settings-rail-title{display:none;}",
+  "#mma-host .mma-settings-rail-item{flex:0 0 auto;height:30px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:inherit;opacity:.7;font-size:12.5px;cursor:pointer;}",
+  "#mma-host .mma-settings-rail-item:hover{background:var(--dsw-alias-muted,#f3f4f6);opacity:1;}",
+  "#mma-host .mma-settings-rail-item[data-on='1']{background:var(--dsw-alias-muted,#f3f4f6);opacity:1;font-weight:600;color:var(--dsw-alias-primary,#2563eb);box-shadow:inset 0 -2px 0 var(--dsw-alias-primary,#2563eb);}",
+  "#mma-host .mma-settings-content{flex:1 1 auto;min-height:0;overflow:auto;padding:18px 16px 24px;scroll-behavior:smooth;}",
+  "#mma-host .mma-settings-section{scroll-margin-top:12px;}",
+  "#mma-host .mma-settings-section h4{margin:0 0 14px;font-size:12.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;opacity:.55;}",
+  "#mma-host .mma-settings-field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}",
+  "#mma-host .mma-settings-label{font-size:12.5px;opacity:.75;}",
+  "#mma-host .mma-settings-control{min-width:0;}",
+  "#mma-host .mma-settings-control--model{max-width:520px;}",
+  "#mma-host .mma-settings input{display:block;width:100%;height:34px;padding:0 10px;border:1px solid var(--dsw-alias-border,#e5e7eb);border-radius:9px;background:var(--dsw-alias-surface,#fff);color:inherit;font-size:13px;box-sizing:border-box;}",
+  "#mma-host .mma-settings input:focus{outline:none;border-color:var(--dsw-alias-primary,#2563eb);box-shadow:0 0 0 2px color-mix(in srgb, var(--dsw-alias-primary,#2563eb) 20%, transparent);}",
+  "#mma-host .mma-settings input:disabled{opacity:.55;}",
+  "#mma-host .mma-settings-field.is-error input{border-color:var(--dsw-alias-destructive,#dc2626);}",
+  "#mma-host .mma-seg{display:flex;gap:4px;padding:3px;border-radius:10px;background:var(--dsw-alias-muted,#f3f4f6);max-width:280px;}",
+  "#mma-host .mma-seg button{flex:1;height:30px;padding:0 8px;border:0;border-radius:8px;background:transparent;cursor:pointer;font-size:12.5px;color:inherit;}",
+  "#mma-host .mma-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-optgrid{display:grid;gap:10px;}",
+  "#mma-host .mma-optgrid--2{grid-template-columns:repeat(2,minmax(0,1fr));}",
+  "#mma-host .mma-optgrid--3{grid-template-columns:repeat(2,minmax(0,1fr));}",
+  "#mma-host .mma-optgrid--4{grid-template-columns:repeat(2,minmax(0,1fr));}",
+  "#mma-host .mma-optcard{position:relative;display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid var(--dsw-alias-border,#e5e7eb);border-radius:10px;background:var(--dsw-alias-surface,#fff);color:inherit;cursor:pointer;text-align:left;}",
+  "#mma-host .mma-optcard:hover{border-color:color-mix(in srgb, var(--dsw-alias-fg,#111) 28%, var(--dsw-alias-border,#e5e7eb));}",
+  "#mma-host .mma-optcard:focus-visible{outline:2px solid var(--dsw-alias-primary,#2563eb);outline-offset:2px;}",
+  "#mma-host .mma-optcard[data-on='1']{border-color:var(--dsw-alias-primary,#2563eb);background:color-mix(in srgb, var(--dsw-alias-primary,#2563eb) 8%, var(--dsw-alias-surface,#fff));}",
+  "#mma-host .mma-optcard:disabled,.mma-optcard--ghost{opacity:.55;cursor:default;border-style:dashed;}",
+  "#mma-host .mma-optcard-preview{display:block;height:42px;border-radius:8px;overflow:hidden;background:var(--dsw-alias-muted,#f3f4f6);}",
+  "#mma-host .mma-optcard-preview--plus{display:flex;align-items:center;justify-content:center;font-size:20px;opacity:.7;}",
+  "#mma-host .mma-optcard-label{font-size:12px;line-height:1.2;}",
+  "#mma-host .mma-optcard-check{position:absolute;top:8px;right:8px;width:18px;height:18px;border-radius:999px;background:var(--dsw-alias-primary,#2563eb);color:var(--dsw-alias-primary-fg,#fff);font-size:11px;display:flex;align-items:center;justify-content:center;}",
+  "#mma-host .mma-preview-theme{display:flex;flex-direction:column;justify-content:center;gap:6px;height:100%;padding:8px;box-sizing:border-box;}",
+  "#mma-host .mma-preview-theme--light{background:var(--dsw-alias-bg,#f7f7f8);}",
+  "#mma-host .mma-preview-theme--dark{background:color-mix(in srgb, var(--dsw-alias-fg,#111) 88%, transparent);}",
+  "#mma-host .mma-preview-theme--system{display:flex;flex-direction:row;padding:0;}",
+  "#mma-host .mma-preview-theme-half{flex:1;height:100%;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:8px;box-sizing:border-box;}",
+  "#mma-host .mma-preview-theme-half--light{background:var(--dsw-alias-bg,#f7f7f8);}",
+  "#mma-host .mma-preview-theme-half--dark{background:color-mix(in srgb, var(--dsw-alias-fg,#111) 88%, transparent);}",
+  "#mma-host .mma-preview-bar{display:block;height:4px;border-radius:999px;background:color-mix(in srgb, var(--dsw-alias-fg,#111) 25%, transparent);}",
+  "#mma-host .mma-preview-theme--dark .mma-preview-bar,#mma-host .mma-preview-theme-half--dark .mma-preview-bar{background:color-mix(in srgb, #fff 45%, transparent);}",
+  "#mma-host .mma-preview-swatches{display:flex;align-items:center;justify-content:center;gap:8px;height:100%;}",
+  "#mma-host .mma-preview-swatches > span{width:14px;height:14px;border-radius:999px;border:1px solid color-mix(in srgb, var(--dsw-alias-fg,#111) 12%, transparent);}",
+  "#mma-host .mma-preview-cardstyle{display:block;height:100%;margin:8px;border-radius:6px;border:1px solid var(--dsw-alias-border,#e5e7eb);background:var(--dsw-alias-surface,#fff);box-sizing:border-box;}",
+  "#mma-host .mma-preview-cardstyle--stamp{box-shadow:inset 0 0 0 1px var(--dsw-alias-border,#e5e7eb);position:relative;}",
+  "#mma-host .mma-preview-cardstyle--stamp::after{content:'';position:absolute;top:4px;right:4px;width:18px;height:8px;border-radius:3px;background:var(--dsw-alias-muted,#f3f4f6);}",
+  "#mma-host .mma-preview-cardstyle--etch{background:transparent;}",
+  "#mma-host .mma-preview-cardstyle--hero{box-shadow:3px 3px 0 var(--dsw-alias-border,#e5e7eb);}",
+  "#mma-host .mma-preview-cardstyle--list{border:0;border-bottom:1px solid var(--dsw-alias-border,#e5e7eb);border-radius:0;margin:14px 8px;}",
+  "#mma-host .mma-port-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}",
+  "#mma-host .mma-port-addon{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 8px;border:1px solid var(--dsw-alias-border,#e5e7eb);border-right:0;border-radius:9px 0 0 9px;background:var(--dsw-alias-muted,#f3f4f6);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;}",
+  "#mma-host .mma-port-row input{width:120px;border-radius:0 9px 9px 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}",
+  "#mma-host .mma-port-url{font-size:11px;opacity:.65;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}",
+  "#mma-host .mma-model-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}",
+  "#mma-host .mma-model-row input{flex:1 1 180px;min-width:0;}",
+  "#mma-host .mma-status-pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:20px;border:1px solid var(--dsw-alias-border,#e5e7eb);font-size:11px;opacity:.75;white-space:nowrap;}",
+  "#mma-host .mma-ghostbtn{height:30px;padding:0 10px;border:1px solid var(--dsw-alias-border,#e5e7eb);border-radius:8px;background:var(--dsw-alias-surface,#fff);color:inherit;font-size:12px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;}",
+  "#mma-host .mma-ghostbtn:hover{background:var(--dsw-alias-muted,#f3f4f6);}",
+  "#mma-host .mma-ghostbtn:disabled{opacity:.55;cursor:default;}",
+  "#mma-host .mma-primarybtn{height:34px;padding:0 16px;border:0;border-radius:8px;background:var(--dsw-alias-primary,#2563eb);color:var(--dsw-alias-primary-fg,#fff);font-size:13px;font-weight:600;cursor:pointer;}",
+  "#mma-host .mma-primarybtn:disabled{opacity:.45;cursor:default;}",
+  "#mma-host .mma-settings-hint{margin:0;font-size:11.5px;opacity:.6;line-height:1.45;}",
+  "#mma-host .mma-settings-field.is-error .mma-settings-hint{color:var(--dsw-alias-destructive,#dc2626);opacity:1;}",
+  "#mma-host .mma-settings-rule{border:0;border-top:1px solid var(--dsw-alias-border,#e5e7eb);margin:20px 0;}",
+  "#mma-host .mma-about-meta{margin-bottom:10px;display:flex;flex-direction:column;gap:6px;}",
+  "#mma-host .mma-about-meta code{display:inline-block;width:fit-content;font-size:12px;padding:3px 8px;border-radius:6px;background:var(--dsw-alias-muted,#f3f4f6);}",
+  "#mma-host .mma-about-pkgs{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:6px;}",
+  "#mma-host .mma-about-pkgs li{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;padding:8px 10px;border-radius:9px;background:var(--dsw-alias-surface,#fff);border:1px solid var(--dsw-alias-border,#e5e7eb);}",
+  "#mma-host .mma-about-pkgs li span{opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}",
+  "#mma-host .mma-about-pkgs li code{font-size:11px;font-variant-numeric:tabular-nums;opacity:.9;}",
+  "#mma-host .mma-about-actions{display:flex;flex-direction:column;align-items:flex-start;gap:8px;}",
+  "#mma-host .mma-settings-foot{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-top:1px solid var(--dsw-alias-border,#e5e7eb);background:var(--dsw-alias-surface,#fff);}",
+  "#mma-host .mma-settings-foot-left{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-width:0;}",
+  "#mma-host .mma-settings-foot-right{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto;}",
+  "#mma-host .mma-settings-dirty{font-size:11.5px;color:var(--dsw-alias-primary,#2563eb);}",
+  "#mma-host .mma-settings-msg{flex-basis:100%;font-size:12px;opacity:.75;line-height:1.4;}",
+  "#mma-host .mma-settings-msg.err{color:var(--dsw-alias-destructive,#dc2626);}",
+  "#mma-host .mma-settings-confirm{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:16px;background:color-mix(in srgb, var(--dsw-alias-fg,#111) 35%, transparent);}",
+  /* Wide layout: data-wide from ResizeObserver (reliable on fixed #mma-host) + container query fallback. */
+  "#mma-host .mma-settings[data-wide='1'] .mma-settings-body{flex-direction:row;}",
+  "#mma-host .mma-settings[data-wide='1'] .mma-settings-rail{flex:0 0 148px;flex-direction:column;align-items:stretch;gap:2px;border-bottom:0;border-right:1px solid var(--dsw-alias-border,#e5e7eb);padding:14px 10px;overflow:visible;}",
+  "#mma-host .mma-settings[data-wide='1'] .mma-settings-rail-title{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.45;margin:0 8px 8px;}",
+  "#mma-host .mma-settings[data-wide='1'] .mma-settings-rail-item{width:100%;justify-content:flex-start;text-align:left;box-shadow:none;border-radius:8px;position:relative;}",
+  "#mma-host .mma-settings[data-wide='1'] .mma-settings-rail-item[data-on='1']{box-shadow:none;background:var(--dsw-alias-muted,#f3f4f6);}",
+  "#mma-host .mma-settings[data-wide='1'] .mma-settings-rail-item[data-on='1']::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--dsw-alias-primary,#2563eb);}",
+  "#mma-host .mma-settings[data-wide='1'] .mma-settings-content{padding:22px 26px 28px;}",
+  "#mma-host .mma-settings[data-wide='1'] .mma-optgrid--3{grid-template-columns:repeat(3,minmax(0,1fr));}",
+  "#mma-host .mma-settings[data-wide='1'] .mma-optgrid--4{grid-template-columns:repeat(4,minmax(0,1fr));}",
+  "#mma-host .mma-settings[data-wide='1'] .mma-settings-field--row{flex-direction:row;align-items:flex-start;gap:16px;}",
+  "#mma-host .mma-settings[data-wide='1'] .mma-settings-field--row > .mma-settings-label{flex:0 0 112px;padding-top:8px;}",
+  "#mma-host .mma-settings[data-wide='1'] .mma-settings-field--row > .mma-settings-control{flex:1 1 auto;}",
   "#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;}",
@@ -4604,7 +5805,15 @@ var CSS = [
   "#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;}"
+  "#mma-host .mma-berr{padding:16px;color:#b91c1c;font-size:13px;}",
+  "#mma-host .mma-storage-notice{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:12px 14px;margin:0 0 12px;border-radius:10px;background:color-mix(in srgb, var(--dsw-alias-warning, #f59e0b) 14%, var(--dsw-alias-bg, #f7f7f8));border:1px solid color-mix(in srgb, var(--dsw-alias-warning, #f59e0b) 35%, transparent);}",
+  "#mma-host .mma-storage-notice-body{min-width:0;flex:1;}",
+  "#mma-host .mma-storage-notice-body b{display:block;font-size:13px;margin:0 0 4px;}",
+  "#mma-host .mma-storage-notice-body p{margin:0;font-size:12px;line-height:1.45;opacity:.85;}",
+  "#mma-host .mma-storage-notice-top{margin-top:6px !important;}",
+  "#mma-host .mma-storage-notice-actions{display:flex;flex-direction:column;gap:6px;flex-shrink:0;}",
+  "#mma-host .mma-storage-notice-actions button{font-size:12px;padding:6px 10px;border-radius:8px;border:1px solid color-mix(in srgb, currentColor 18%, transparent);background:var(--dsw-alias-bg, #fff);cursor:pointer;}",
+  "#mma-host .mma-storage-notice-copy{font-weight:600;}"
 ];
 function injectPanelCss() {
   if (typeof document === "undefined") return;
@@ -4619,26 +5828,21 @@ function injectPanelCss() {
 }
 
 // ../panel/src/panel.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-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(() => {
-  });
-}
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function createMiniAppPanel(host, options) {
   const locale = resolvePanelLocale(options?.locale ?? host.locale);
   const i18n = createPanelI18n(locale);
+  const prev = getPanelState();
   resetPanelState({
     tabs: [{ id: "all", title: i18n.t("tabs.all"), kind: "all" }],
     capabilities: capabilitiesOf(host),
     locale,
-    emptyText: host.emptyText
+    emptyText: host.emptyText,
+    theme: prev.theme,
+    palette: prev.palette,
+    dock: prev.dock,
+    cardStyle: prev.cardStyle,
+    visible: prev.visible
   });
   let rootEl = null;
   let root = null;
@@ -4655,7 +5859,7 @@ function createMiniAppPanel(host, options) {
       loadCustomPalettes(host);
       if (!root) root = (0, import_client.createRoot)(el);
       root.render(
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PanelProvider, { actions, i18n, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MiniAppPanel, {}) })
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PanelProvider, { actions, i18n, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MiniAppPanel, {}) })
       );
     },
     unmount() {
@@ -4795,7 +5999,7 @@ function readStoredMode(storage) {
   if (!storage) return null;
   try {
     const m = storage.getItem("mma-theme-mode");
-    return m === "light" || m === "dark" ? m : null;
+    return m === "light" || m === "dark" || m === "system" ? m : null;
   } catch {
     return null;
   }
@@ -5023,7 +6227,9 @@ var DshShell = class {
       emptyText: "\u8FD8\u6CA1\u6709\u5C0F\u7A0B\u5E8F\u3002\n\u5728\u5BF9\u8BDD\u91CC\u7528 skill \u751F\u6210\uFF0C\u6216\u628A\u793A\u4F8B\u653E\u5230 runtime/apps/",
       onOpen: () => this.openPanel(),
       onClose: () => this.closePanel(),
-      onHostChange: (next) => this.migrateOrigin(next),
+      onHostChange: (next) => {
+        void this.migrateOrigin(next);
+      },
       onConfigSaved: (form) => this.afterConfigSaved(form),
       frameController: {
         url: (appId) => this.frames.url(appId),
@@ -5043,11 +6249,13 @@ var DshShell = class {
   envFor(appId) {
     const s = getPanelState();
     const app = s.apps.find((a) => a.id === appId);
-    const t2 = app?.theme;
+    const theme = resolveMode(app?.theme?.theme || s.theme);
+    const palette = app?.theme?.palette || s.palette;
     return {
-      theme: t2?.theme || s.theme,
-      palette: t2?.palette || s.palette,
-      dock: s.dock
+      theme,
+      palette,
+      dock: s.dock,
+      vars: themeCssVars(theme, palette, s.customPalettes)
     };
   }
   ensureFrameContainer() {
@@ -5077,11 +6285,20 @@ var DshShell = class {
     if (host) applyThemeTo(host, theme, palette);
     this.frames.postEnvAll();
   }
-  migrateOrigin(next) {
-    if (next === this.origin) return;
-    this.origin = next;
-    writeStoredAppsOrigin(safeStorage(), next);
-    this.frames.unmountAll();
+  async migrateOrigin(next) {
+    const origin = next.replace(/\/$/, "");
+    if (origin === this.origin) return;
+    for (let i = 0; i < 30; i++) {
+      try {
+        const res = await fetch(`${origin}/health`);
+        if (res.ok) break;
+      } catch {
+      }
+      await new Promise((r) => setTimeout(r, 100));
+    }
+    this.origin = origin;
+    writeStoredAppsOrigin(safeStorage(), origin);
+    for (const id of [...this.frames.map.keys()]) this.frames.reload(id);
   }
   afterConfigSaved(form) {
     if (typeof form.theme === "string" && typeof form.palette === "string") {
@@ -5334,15 +6551,7 @@ function subscribeAppOpen(current) {
     const es = new EventSource(`${current.origin}/api/events`);
     sse = es;
     es.addEventListener("app:open", (e) => {
-      let appId = "";
-      try {
-        const d = JSON.parse(e.data || "{}");
-        if (d && typeof d === "object" && "appId" in d && typeof d.appId === "string") {
-          appId = d.appId;
-        }
-      } catch {
-        return;
-      }
+      const appId = readAppId(e.data);
       if (!appId) return;
       current.openPanel();
       void current.host.fetchApps().then((apps) => {
@@ -5350,10 +6559,42 @@ function subscribeAppOpen(current) {
         if (app) current.bindPanel().actions.openAppTab(app);
       });
     });
+    es.addEventListener("app:reload", (e) => {
+      const appId = readAppId(e.data);
+      if (appId && current.frames.map.has(appId)) current.frames.reload(appId);
+    });
+    es.addEventListener("app:eval", (e) => {
+      const query = readEvalQuery(e.data);
+      if (query) relayViewEval(current.origin, current.frames, query);
+    });
   } catch (err) {
     console.warn("[monkey-mini-app-client] sse subscribe failed", err);
   }
 }
+function readAppId(raw) {
+  try {
+    const d = JSON.parse(raw || "{}");
+    return d && typeof d === "object" && typeof d.appId === "string" ? d.appId : "";
+  } catch {
+    return "";
+  }
+}
+function readEvalQuery(raw) {
+  try {
+    const d = JSON.parse(raw || "{}");
+    if (!d || typeof d !== "object") return null;
+    const q = d;
+    if (typeof q.requestId !== "string" || typeof q.appId !== "string") return null;
+    return {
+      requestId: q.requestId,
+      appId: q.appId,
+      code: typeof q.code === "string" ? q.code : "",
+      maxBytes: typeof q.maxBytes === "number" ? q.maxBytes : 0
+    };
+  } catch {
+    return null;
+  }
+}
 function bindUiEvents(current) {
   if (window.__mmaOpenBound) return;
   window.__mmaOpenBound = true;