@zaclinley/dsh-mailharbor 0.0.0-stage → 0.1.0

package/lib/client.js

@@ -0,0 +1,1987 @@
+window.__ModuleLoader__.load({
+  id: "@zaclinley/dsh-mailharbor",
+  factory: (require) => {
+    var module = { exports: {} };
+    var exports = module.exports;
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/client/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  PANEL_ID: () => PANEL_ID,
+  VERSION: () => VERSION,
+  apply: () => apply,
+  inject: () => inject
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/client/styles.css
+var styles_default = "/* MailHarbor panel + settings. Colors come from the DSH shell tokens with\n   light-mode fallbacks so the plugin also renders in a bare host page. */\n\n.mailharbor {\n  --m-bg: var(--dsw-alias-bg-base, #ffffff);\n  --m-bg-1: var(--dsw-alias-bg-layer-1, #f6f7f9);\n  --m-bg-2: var(--dsw-alias-bg-layer-2, #eceef2);\n  --m-bg-3: var(--dsw-alias-bg-layer-3, #e4e7ec);\n  --m-line: var(--dsw-alias-border-l2, rgba(15, 23, 42, 0.1));\n  --m-line-soft: var(--dsw-alias-border-l1, rgba(15, 23, 42, 0.06));\n  --m-text: var(--dsw-alias-label-primary, #171a21);\n  --m-text-2: var(--dsw-alias-label-secondary, #565c67);\n  --m-text-3: var(--dsw-alias-label-tertiary, #8a909c);\n  --m-brand: var(--dsw-alias-brand-primary, #4d6bfe);\n  --m-brand-soft: color-mix(in srgb, var(--m-brand) 12%, transparent);\n  --m-hover: var(--dsw-alias-interactive-bg-hover, rgba(15, 23, 42, 0.05));\n  --m-danger: var(--dsw-alias-label-error, #d93025);\n  --m-ok: var(--dsw-alias-state-success-primary, #1a9e5c);\n  --m-warn: var(--dsw-alias-state-warn-primary, #d88a2a);\n\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  background: var(--m-bg);\n  color: var(--m-text);\n  font-size: 13px;\n  line-height: 1.5;\n}\n\n.mailharbor *,\n.mailharbor *::before,\n.mailharbor *::after {\n  box-sizing: border-box;\n}\n\n/* ---------- shell ---------- */\n\n.mailharbor-topbar {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border-bottom: 1px solid var(--m-line-soft);\n  flex: none;\n}\n\n.mailharbor-body {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n}\n\n.mailharbor-list {\n  display: flex;\n  flex-direction: column;\n  width: 340px;\n  flex: none;\n  border-right: 1px solid var(--m-line-soft);\n  min-height: 0;\n}\n\n.mailharbor-reader {\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n@media (max-width: 900px) {\n  .mailharbor-list {\n    width: 280px;\n  }\n}\n\n.mailharbor-narrow .mailharbor-body[data-mode='reader'] .mailharbor-list {\n  display: none;\n}\n\n.mailharbor-narrow .mailharbor-body[data-mode='list'] .mailharbor-reader {\n  display: none;\n}\n\n/* ---------- controls ---------- */\n\n.mailharbor button {\n  font: inherit;\n  color: inherit;\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: 7px;\n  padding: 5px 9px;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  white-space: nowrap;\n}\n\n.mailharbor button:hover:not(:disabled) {\n  background: var(--m-hover);\n}\n\n.mailharbor button:disabled {\n  opacity: 0.5;\n  cursor: default;\n}\n\n.mailharbor button.primary {\n  background: var(--m-brand);\n  color: #fff;\n}\n\n.mailharbor button.primary:hover:not(:disabled) {\n  filter: brightness(1.05);\n  background: var(--m-brand);\n}\n\n.mailharbor button.ghost {\n  border-color: var(--m-line);\n}\n\n.mailharbor button.subtle {\n  color: var(--m-text-2);\n}\n\n.mailharbor button.danger {\n  color: var(--m-danger);\n}\n\n.mailharbor input,\n.mailharbor select,\n.mailharbor textarea {\n  font: inherit;\n  color: inherit;\n  background: var(--m-bg-1);\n  border: 1px solid var(--m-line);\n  border-radius: 7px;\n  padding: 6px 8px;\n  min-width: 0;\n}\n\n.mailharbor input:focus,\n.mailharbor select:focus,\n.mailharbor textarea:focus,\n.mailharbor [contenteditable='true']:focus {\n  outline: 2px solid color-mix(in srgb, var(--m-brand) 45%, transparent);\n  outline-offset: -1px;\n}\n\n.mailharbor .spacer {\n  flex: 1;\n}\n\n.mailharbor .muted {\n  color: var(--m-text-3);\n}\n\n.mailharbor .small {\n  font-size: 12px;\n}\n\n.mailharbor .badge {\n  font-size: 11px;\n  padding: 1px 6px;\n  border-radius: 999px;\n  background: var(--m-bg-2);\n  color: var(--m-text-2);\n}\n\n.mailharbor .badge.ok {\n  background: color-mix(in srgb, var(--m-ok) 15%, transparent);\n  color: var(--m-ok);\n}\n\n.mailharbor .badge.warn {\n  background: color-mix(in srgb, var(--m-warn) 16%, transparent);\n  color: var(--m-warn);\n}\n\n.mailharbor .error {\n  color: var(--m-danger);\n  padding: 8px 12px;\n  border-bottom: 1px solid var(--m-line-soft);\n  background: color-mix(in srgb, var(--m-danger) 7%, transparent);\n}\n\n/* ---------- list ---------- */\n\n.mailharbor-filters {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  padding: 8px 12px;\n  border-bottom: 1px solid var(--m-line-soft);\n  flex: none;\n}\n\n.mailharbor-filters input[type='search'] {\n  flex: 1;\n}\n\n.mailharbor-segment {\n  display: inline-flex;\n  background: var(--m-bg-2);\n  border-radius: 8px;\n  padding: 2px;\n  gap: 2px;\n}\n\n.mailharbor-segment button {\n  padding: 3px 10px;\n  border-radius: 6px;\n  color: var(--m-text-2);\n}\n\n.mailharbor-segment button.active {\n  background: var(--m-bg);\n  color: var(--m-text);\n  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);\n}\n\n.mailharbor-rows {\n  flex: 1;\n  overflow: auto;\n  min-height: 0;\n}\n\n.mailharbor-row {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 9px 12px;\n  border-bottom: 1px solid var(--m-line-soft);\n  cursor: pointer;\n  text-align: left;\n  width: 100%;\n  border-radius: 0;\n  border-left: 2px solid transparent;\n}\n\n.mailharbor-row:hover {\n  background: var(--m-hover);\n}\n\n.mailharbor-row.selected {\n  background: var(--m-brand-soft);\n  border-left-color: var(--m-brand);\n}\n\n.mailharbor-row .line-1,\n.mailharbor-row .line-2 {\n  display: flex;\n  gap: 8px;\n  align-items: baseline;\n  min-width: 0;\n}\n\n.mailharbor-row .from {\n  font-weight: 600;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mailharbor-row .date {\n  margin-left: auto;\n  color: var(--m-text-3);\n  font-size: 11px;\n  flex: none;\n}\n\n.mailharbor-row .subject {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--m-text-2);\n}\n\n.mailharbor-row.unread .subject,\n.mailharbor-row.unread .from {\n  color: var(--m-text);\n}\n\n.mailharbor-row.unread .from::before {\n  content: '';\n  display: inline-block;\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--m-brand);\n  margin-right: 6px;\n  vertical-align: middle;\n}\n\n.mailharbor-row .snippet {\n  color: var(--m-text-3);\n  font-size: 12px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mailharbor-empty {\n  padding: 40px 20px;\n  text-align: center;\n  color: var(--m-text-3);\n}\n\n/* ---------- reader ---------- */\n\n.mailharbor-reader-head {\n  padding: 10px 14px;\n  border-bottom: 1px solid var(--m-line-soft);\n  flex: none;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.mailharbor-reader-head h2 {\n  margin: 0;\n  font-size: 15px;\n  line-height: 1.35;\n  word-break: break-word;\n}\n\n.mailharbor-reader-meta {\n  color: var(--m-text-2);\n  font-size: 12px;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px 12px;\n}\n\n.mailharbor-reader-actions {\n  display: flex;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.mailharbor-reader-body {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  background: var(--m-bg-1);\n}\n\n.mailharbor-reader-body iframe {\n  flex: 1;\n  width: 100%;\n  border: 0;\n  background: #fff;\n}\n\n.mailharbor-reader-body pre {\n  flex: 1;\n  overflow: auto;\n  margin: 0;\n  padding: 16px 18px;\n  white-space: pre-wrap;\n  word-break: break-word;\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: 12px;\n  line-height: 1.6;\n}\n\n.mailharbor-attachments {\n  padding: 8px 14px;\n  border-top: 1px solid var(--m-line-soft);\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  flex: none;\n  background: var(--m-bg);\n}\n\n.mailharbor-attachment {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  border: 1px solid var(--m-line);\n  border-radius: 8px;\n  padding: 4px 8px;\n  font-size: 12px;\n  text-decoration: none;\n  color: var(--m-text);\n  max-width: 260px;\n}\n\n.mailharbor-attachment:hover {\n  background: var(--m-hover);\n}\n\n.mailharbor-attachment span.name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* ---------- modal / form ---------- */\n\n.mailharbor-modal-mask {\n  position: fixed;\n  inset: 0;\n  background: rgba(15, 23, 42, 0.35);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 60;\n  padding: 24px;\n}\n\n.mailharbor-modal {\n  background: var(--m-bg);\n  color: var(--m-text);\n  border-radius: 12px;\n  box-shadow: 0 18px 60px rgba(15, 23, 42, 0.28);\n  width: min(760px, 100%);\n  max-height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.mailharbor-modal header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--m-line-soft);\n  font-weight: 600;\n}\n\n.mailharbor-modal .content {\n  padding: 16px;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.mailharbor-modal footer {\n  display: flex;\n  gap: 8px;\n  justify-content: flex-end;\n  padding: 12px 16px;\n  border-top: 1px solid var(--m-line-soft);\n}\n\n.mailharbor-field {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  min-width: 0;\n}\n\n.mailharbor-field > label {\n  font-size: 12px;\n  color: var(--m-text-2);\n}\n\n.mailharbor-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 10px;\n}\n\n.mailharbor-grid.three {\n  grid-template-columns: 2fr 1fr auto;\n}\n\n.mailharbor-toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  color: var(--m-text-2);\n  cursor: pointer;\n}\n\n/* ---------- composer ---------- */\n\n.mailharbor-editor {\n  min-height: 220px;\n  max-height: 46vh;\n  overflow: auto;\n  padding: 10px 12px;\n  border: 1px solid var(--m-line);\n  border-radius: 8px;\n  background: var(--m-bg);\n  outline: none;\n}\n\n.mailharbor-editor:empty::before {\n  content: attr(data-placeholder);\n  color: var(--m-text-3);\n}\n\n.mailharbor-toolbar {\n  display: flex;\n  gap: 2px;\n  flex-wrap: wrap;\n}\n\n.mailharbor-toolbar button {\n  padding: 3px 8px;\n  font-size: 12px;\n  border: 1px solid transparent;\n}\n\n.mailharbor-toolbar button:hover {\n  border-color: var(--m-line);\n}\n\n/* ---------- settings ---------- */\n\n.mailharbor-settings {\n  padding: 16px 20px 40px;\n  display: flex;\n  flex-direction: column;\n  gap: 18px;\n  max-width: 860px;\n}\n\n.mailharbor-settings h2 {\n  margin: 0 0 4px;\n  font-size: 15px;\n}\n\n.mailharbor-settings h3 {\n  margin: 0 0 8px;\n  font-size: 13px;\n  color: var(--m-text-2);\n  font-weight: 600;\n}\n\n.mailharbor-card {\n  border: 1px solid var(--m-line-soft);\n  border-radius: 10px;\n  padding: 14px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  background: var(--m-bg);\n}\n\n.mailharbor-account-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.mailharbor-account-row .avatar {\n  width: 30px;\n  height: 30px;\n  border-radius: 50%;\n  background: var(--m-brand-soft);\n  color: var(--m-brand);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: 600;\n  flex: none;\n}\n\n.mailharbor-log {\n  background: var(--m-bg-1);\n  border-radius: 8px;\n  padding: 8px 10px;\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: 11px;\n  line-height: 1.5;\n  max-height: 220px;\n  overflow: auto;\n  white-space: pre-wrap;\n}\n\n.mailharbor-kv {\n  display: grid;\n  grid-template-columns: minmax(120px, 180px) 1fr;\n  gap: 4px 12px;\n  font-size: 12px;\n}\n\n.mailharbor-kv dt {\n  color: var(--m-text-3);\n}\n\n.mailharbor-kv dd {\n  margin: 0;\n  word-break: break-all;\n}\n";
+
+// src/client/icon.tsx
+var import_react = require("react");
+
+// src/client/api.ts
+var BASE = new URL("mail-plugin/api/", document.baseURI).href;
+var ApiError = class extends Error {
+  status;
+  constructor(message, status) {
+    super(message);
+    this.status = status;
+    this.name = "ApiError";
+  }
+};
+async function request(path, init = {}) {
+  const response = await fetch(new URL(path, BASE), {
+    credentials: "same-origin",
+    ...init,
+    headers: {
+      accept: "application/json",
+      ...init.body === void 0 ? {} : { "content-type": "application/json" },
+      ...init.headers ?? {}
+    }
+  });
+  if (!response.ok) {
+    let message = response.statusText;
+    try {
+      const body = await response.json();
+      if (body !== null && typeof body === "object" && typeof body.error === "string") {
+        message = body.error;
+      }
+    } catch {
+    }
+    throw new ApiError(message, response.status);
+  }
+  return await response.json();
+}
+function query(params) {
+  const search = new URLSearchParams();
+  for (const [key, value] of Object.entries(params)) {
+    if (value !== void 0 && value !== null && value !== "") search.set(key, String(value));
+  }
+  const text = search.toString();
+  return text === "" ? "" : `?${text}`;
+}
+var api = {
+  state: () => request("state"),
+  folders: (params) => request(`folders${query(params)}`),
+  messages: (params) => request(`messages${query({ ...params })}`),
+  message: (params) => request(`messages/${encodeURIComponent(params.id)}${query({ ...params })}`),
+  setRead: (params) => request(
+    `messages/${encodeURIComponent(params.id)}/read${query({
+      accountId: params.accountId ?? null,
+      source: params.source,
+      mailbox: params.mailbox
+    })}`,
+    { method: "POST", body: JSON.stringify({ read: params.read }) }
+  ),
+  attachmentUrl: (params) => new URL(`attachment${query(params)}`, BASE).href,
+  drafts: (accountId) => request(`drafts${query({ accountId: accountId ?? null })}`),
+  saveDraft: (accountId, draft) => request(`drafts${query({ accountId: accountId ?? null })}`, {
+    method: "POST",
+    body: JSON.stringify(draft)
+  }),
+  deleteDraft: (id, accountId) => request(`drafts/${encodeURIComponent(id)}${query({ accountId: accountId ?? null })}`, {
+    method: "DELETE"
+  }),
+  send: (accountId, payload) => request(`send${query({ accountId: accountId ?? null })}`, {
+    method: "POST",
+    body: JSON.stringify(payload)
+  }),
+  unread: (accountId) => request(`unread${query({ accountId: accountId ?? null })}`),
+  addAccount: (input) => request("accounts", {
+    method: "POST",
+    body: JSON.stringify(input)
+  }),
+  updateAccount: (id, patch) => request(`accounts/${encodeURIComponent(id)}`, {
+    method: "PATCH",
+    body: JSON.stringify(patch)
+  }),
+  deleteAccount: (id) => request(`accounts/${encodeURIComponent(id)}`, { method: "DELETE" }),
+  activateAccount: (id) => request(`accounts/${encodeURIComponent(id)}/activate`, { method: "POST" }),
+  login: (id, password, remember) => request(`accounts/${encodeURIComponent(id)}/login`, {
+    method: "POST",
+    body: JSON.stringify({ password, remember })
+  }),
+  logout: (id) => request(`accounts/${encodeURIComponent(id)}/logout`, { method: "POST" }),
+  check: (id) => request(`accounts/${encodeURIComponent(id)}/check`, { method: "POST" }),
+  settings: () => request("settings"),
+  saveSettings: (patch) => request("settings", { method: "PATCH", body: JSON.stringify(patch) }),
+  backupStatus: (accountId) => request(`backup/status${query({ accountId: accountId ?? null })}`),
+  startBackup: (accountId) => request(`backup/start${query({ accountId: accountId ?? null })}`, {
+    method: "POST"
+  }),
+  stopBackup: (accountId) => request(`backup/stop${query({ accountId: accountId ?? null })}`, {
+    method: "POST"
+  })
+};
+
+// src/client/icon.tsx
+function MailIcon() {
+  const [unread, setUnread] = (0, import_react.useState)(0);
+  (0, import_react.useEffect)(() => {
+    let cancelled = false;
+    let timer;
+    const poll = async () => {
+      try {
+        const result = await api.unread();
+        if (!cancelled) setUnread(result.unread);
+      } catch {
+      }
+    };
+    void poll();
+    const schedule = () => {
+      if (cancelled) return;
+      timer = window.setTimeout(() => {
+        void poll().finally(schedule);
+      }, 6e4);
+    };
+    schedule();
+    return () => {
+      cancelled = true;
+      if (timer !== void 0) window.clearTimeout(timer);
+    };
+  }, []);
+  return (0, import_react.createElement)(
+    "span",
+    {
+      style: { position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center" }
+    },
+    (0, import_react.createElement)(
+      "svg",
+      { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" },
+      (0, import_react.createElement)("rect", { x: 2.5, y: 5, width: 19, height: 14, rx: 2.5, stroke: "currentColor", strokeWidth: 1.6 }),
+      (0, import_react.createElement)("path", {
+        d: "M3.5 7l7.6 5.4a1.6 1.6 0 0 0 1.8 0L20.5 7",
+        stroke: "currentColor",
+        strokeWidth: 1.6,
+        strokeLinecap: "round"
+      })
+    ),
+    unread > 0 ? (0, import_react.createElement)(
+      "span",
+      {
+        style: {
+          position: "absolute",
+          top: "-4px",
+          right: "-6px",
+          minWidth: "14px",
+          height: "14px",
+          padding: "0 3px",
+          borderRadius: "999px",
+          background: "var(--dsw-alias-brand-primary, #4d6bfe)",
+          color: "#fff",
+          fontSize: "9px",
+          lineHeight: "14px",
+          textAlign: "center",
+          fontWeight: 600
+        }
+      },
+      unread > 99 ? "99+" : String(unread)
+    ) : null
+  );
+}
+
+// src/client/panel.tsx
+var import_react6 = require("react");
+
+// src/client/account-form.tsx
+var import_react3 = require("react");
+
+// src/client/components.tsx
+var import_react2 = require("react");
+var import_react_dom = require("react-dom");
+function Avatar({ email, size = 26 }) {
+  const letter = (email.trim()[0] ?? "?").toUpperCase();
+  return (0, import_react2.createElement)(
+    "span",
+    {
+      className: "avatar",
+      style: {
+        width: `${String(size)}px`,
+        height: `${String(size)}px`,
+        fontSize: `${String(Math.round(size * 0.42))}px`
+      },
+      "aria-hidden": "true"
+    },
+    letter
+  );
+}
+function Field({
+  label,
+  children,
+  hint
+}) {
+  return (0, import_react2.createElement)(
+    "div",
+    { className: "mailharbor-field" },
+    (0, import_react2.createElement)("label", null, label),
+    children,
+    hint === void 0 ? null : (0, import_react2.createElement)("span", { className: "small muted" }, hint)
+  );
+}
+function Toggle({
+  checked,
+  onChange,
+  label
+}) {
+  return (0, import_react2.createElement)(
+    "label",
+    { className: "mailharbor-toggle" },
+    (0, import_react2.createElement)("input", {
+      type: "checkbox",
+      checked,
+      onChange: (event) => {
+        onChange(event.target.checked);
+      }
+    }),
+    label
+  );
+}
+function Modal({
+  title,
+  children,
+  footer,
+  onClose,
+  wide = false
+}) {
+  (0, import_react2.useEffect)(() => {
+    const onKey = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [onClose]);
+  return (0, import_react_dom.createPortal)(
+    (0, import_react2.createElement)(
+      "div",
+      {
+        className: "mailharbor-modal-mask",
+        onMouseDown: (event) => {
+          if (event.target === event.currentTarget) onClose();
+        }
+      },
+      (0, import_react2.createElement)(
+        "div",
+        {
+          className: "mailharbor-modal",
+          style: wide ? { width: "min(920px, 100%)" } : void 0,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": title
+        },
+        (0, import_react2.createElement)(
+          "header",
+          null,
+          title,
+          (0, import_react2.createElement)("span", { className: "spacer" }),
+          (0, import_react2.createElement)("button", { className: "subtle", onClick: onClose, "aria-label": "\u5173\u95ED" }, "\u2715")
+        ),
+        (0, import_react2.createElement)("div", { className: "content" }, children),
+        footer === void 0 ? null : (0, import_react2.createElement)("footer", null, footer)
+      )
+    ),
+    document.body
+  );
+}
+function ErrorBar({ message, onDismiss }) {
+  return (0, import_react2.createElement)(
+    "div",
+    { className: "error", role: "alert" },
+    (0, import_react2.createElement)("span", null, message),
+    (0, import_react2.createElement)("span", { className: "spacer" }),
+    (0, import_react2.createElement)("button", { className: "subtle", onClick: onDismiss }, "\u5173\u95ED")
+  );
+}
+function shortDate(iso) {
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return iso.slice(0, 16);
+  const now = /* @__PURE__ */ new Date();
+  const sameDay = date.getFullYear() === now.getFullYear() && date.getMonth() === now.getMonth() && date.getDate() === now.getDate();
+  const pad = (value) => String(value).padStart(2, "0");
+  if (sameDay) return `${pad(date.getHours())}:${pad(date.getMinutes())}`;
+  if (date.getFullYear() === now.getFullYear()) return `${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+  return `${String(date.getFullYear())}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+function longDate(iso) {
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return iso;
+  return date.toLocaleString(void 0, {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+}
+function formatBytes(size) {
+  if (!Number.isFinite(size) || size <= 0) return "";
+  if (size < 1024) return `${String(size)} B`;
+  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
+  return `${(size / 1024 / 1024).toFixed(1)} MB`;
+}
+
+// src/client/account-form.tsx
+function domainOf(email) {
+  return email.split("@")[1] ?? "example.com";
+}
+function errorText(error) {
+  return error instanceof ApiError || error instanceof Error ? error.message : String(error);
+}
+function AddAccountForm({
+  onDone,
+  onCancel
+}) {
+  const [email, setEmail] = (0, import_react3.useState)("");
+  const [password, setPassword] = (0, import_react3.useState)("");
+  const [label, setLabel] = (0, import_react3.useState)("");
+  const [remember, setRemember] = (0, import_react3.useState)(true);
+  const [advanced, setAdvanced] = (0, import_react3.useState)(false);
+  const [imapHost, setImapHost] = (0, import_react3.useState)("");
+  const [imapPort, setImapPort] = (0, import_react3.useState)("993");
+  const [imapSecure, setImapSecure] = (0, import_react3.useState)(true);
+  const [smtpHost, setSmtpHost] = (0, import_react3.useState)("");
+  const [smtpPort, setSmtpPort] = (0, import_react3.useState)("465");
+  const [smtpSecure, setSmtpSecure] = (0, import_react3.useState)(true);
+  const [fromName, setFromName] = (0, import_react3.useState)("");
+  const [busy, setBusy] = (0, import_react3.useState)(false);
+  const [error, setError] = (0, import_react3.useState)("");
+  const submit = async () => {
+    setBusy(true);
+    setError("");
+    try {
+      const domain = domainOf(email);
+      const { state } = await api.addAccount({
+        email: email.trim(),
+        password,
+        remember,
+        ...label.trim() === "" ? {} : { label: label.trim() },
+        ...advanced ? {
+          imap: {
+            host: imapHost.trim() === "" ? `imap.${domain}` : imapHost.trim(),
+            port: Number(imapPort) || 993,
+            secure: imapSecure
+          },
+          smtp: {
+            host: smtpHost.trim() === "" ? `smtp.${domain}` : smtpHost.trim(),
+            port: Number(smtpPort) || 465,
+            secure: smtpSecure,
+            ...fromName.trim() === "" ? {} : { fromName: fromName.trim() }
+          }
+        } : {}
+      });
+      onDone(state);
+    } catch (caught) {
+      setError(errorText(caught));
+    } finally {
+      setBusy(false);
+    }
+  };
+  return (0, import_react3.createElement)(
+    "div",
+    { className: "mailharbor-card" },
+    (0, import_react3.createElement)("h3", null, "\u6DFB\u52A0\u90AE\u7BB1\u8D26\u53F7"),
+    (0, import_react3.createElement)(
+      "div",
+      { className: "mailharbor-grid" },
+      (0, import_react3.createElement)(
+        Field,
+        { label: "\u90AE\u7BB1\u5730\u5740" },
+        (0, import_react3.createElement)("input", {
+          type: "email",
+          value: email,
+          placeholder: "you@example.com",
+          onChange: (event) => setEmail(event.target.value),
+          autoFocus: true
+        })
+      ),
+      (0, import_react3.createElement)(
+        Field,
+        { label: "\u5BC6\u7801 / \u5E94\u7528\u4E13\u7528\u5BC6\u7801" },
+        (0, import_react3.createElement)("input", {
+          type: "password",
+          value: password,
+          onChange: (event) => setPassword(event.target.value)
+        })
+      )
+    ),
+    (0, import_react3.createElement)(
+      Field,
+      { label: "\u663E\u793A\u540D\u79F0\uFF08\u53EF\u9009\uFF09" },
+      (0, import_react3.createElement)("input", {
+        value: label,
+        placeholder: "\u5DE5\u4F5C\u90AE\u7BB1",
+        onChange: (event) => setLabel(event.target.value)
+      })
+    ),
+    (0, import_react3.createElement)(Toggle, { checked: remember, onChange: setRemember, label: "\u8BB0\u4F4F\u5BC6\u7801\uFF08\u5199\u5165\u7CFB\u7EDF\u94A5\u5319\u4E32\uFF09" }),
+    (0, import_react3.createElement)(
+      "button",
+      { className: "ghost", onClick: () => setAdvanced(!advanced) },
+      advanced ? "\u9690\u85CF\u9AD8\u7EA7\u8BBE\u7F6E" : "\u9AD8\u7EA7\u8BBE\u7F6E\uFF08\u670D\u52A1\u5668\u4E0E\u7AEF\u53E3\uFF09"
+    ),
+    advanced ? (0, import_react3.createElement)(
+      "div",
+      { style: { display: "flex", flexDirection: "column", gap: "10px" } },
+      (0, import_react3.createElement)(
+        "div",
+        { className: "mailharbor-grid three" },
+        (0, import_react3.createElement)(
+          Field,
+          { label: "IMAP \u4E3B\u673A" },
+          (0, import_react3.createElement)("input", {
+            value: imapHost,
+            placeholder: `imap.${domainOf(email)}`,
+            onChange: (event) => setImapHost(event.target.value)
+          })
+        ),
+        (0, import_react3.createElement)(
+          Field,
+          { label: "\u7AEF\u53E3" },
+          (0, import_react3.createElement)("input", {
+            value: imapPort,
+            inputMode: "numeric",
+            onChange: (event) => setImapPort(event.target.value)
+          })
+        ),
+        (0, import_react3.createElement)(Toggle, { checked: imapSecure, onChange: setImapSecure, label: "TLS" })
+      ),
+      (0, import_react3.createElement)(
+        "div",
+        { className: "mailharbor-grid three" },
+        (0, import_react3.createElement)(
+          Field,
+          { label: "SMTP \u4E3B\u673A" },
+          (0, import_react3.createElement)("input", {
+            value: smtpHost,
+            placeholder: `smtp.${domainOf(email)}`,
+            onChange: (event) => setSmtpHost(event.target.value)
+          })
+        ),
+        (0, import_react3.createElement)(
+          Field,
+          { label: "\u7AEF\u53E3" },
+          (0, import_react3.createElement)("input", {
+            value: smtpPort,
+            inputMode: "numeric",
+            onChange: (event) => setSmtpPort(event.target.value)
+          })
+        ),
+        (0, import_react3.createElement)(Toggle, { checked: smtpSecure, onChange: setSmtpSecure, label: "TLS" })
+      ),
+      (0, import_react3.createElement)(
+        Field,
+        { label: "\u53D1\u4EF6\u4EBA\u540D\u79F0\uFF08\u53EF\u9009\uFF09" },
+        (0, import_react3.createElement)("input", {
+          value: fromName,
+          onChange: (event) => setFromName(event.target.value)
+        })
+      )
+    ) : null,
+    error === "" ? null : (0, import_react3.createElement)("div", { className: "small", style: { color: "var(--m-danger)" } }, error),
+    (0, import_react3.createElement)(
+      "div",
+      { style: { display: "flex", gap: "8px", justifyContent: "flex-end" } },
+      onCancel === void 0 ? null : (0, import_react3.createElement)("button", { className: "ghost", onClick: onCancel }, "\u53D6\u6D88"),
+      (0, import_react3.createElement)(
+        "button",
+        {
+          className: "primary",
+          onClick: () => void submit(),
+          disabled: busy || email.trim() === "" || password === ""
+        },
+        busy ? "\u8FDE\u63A5\u4E2D\u2026" : "\u6DFB\u52A0\u5E76\u8FDE\u63A5"
+      )
+    )
+  );
+}
+function LoginForm({ account, onDone }) {
+  const [password, setPassword] = (0, import_react3.useState)("");
+  const [remember, setRemember] = (0, import_react3.useState)(true);
+  const [busy, setBusy] = (0, import_react3.useState)(false);
+  const [error, setError] = (0, import_react3.useState)("");
+  const submit = async () => {
+    setBusy(true);
+    setError("");
+    try {
+      await api.login(account.id, password, remember);
+      onDone();
+    } catch (caught) {
+      setError(errorText(caught));
+    } finally {
+      setBusy(false);
+    }
+  };
+  return (0, import_react3.createElement)(
+    "div",
+    { className: "mailharbor-card" },
+    (0, import_react3.createElement)("h3", null, `\u767B\u5F55 ${account.email}`),
+    (0, import_react3.createElement)(
+      "p",
+      { className: "small muted" },
+      `${account.imap.host}:${String(account.imap.port)} \xB7 ${account.smtp.host}:${String(account.smtp.port)}`
+    ),
+    (0, import_react3.createElement)(
+      Field,
+      { label: "\u5BC6\u7801 / \u5E94\u7528\u4E13\u7528\u5BC6\u7801" },
+      (0, import_react3.createElement)("input", {
+        type: "password",
+        value: password,
+        onChange: (event) => setPassword(event.target.value),
+        onKeyDown: (event) => {
+          if (event.key === "Enter") void submit();
+        },
+        autoFocus: true
+      })
+    ),
+    (0, import_react3.createElement)(Toggle, { checked: remember, onChange: setRemember, label: "\u8BB0\u4F4F\u5BC6\u7801\uFF08\u5199\u5165\u7CFB\u7EDF\u94A5\u5319\u4E32\uFF09" }),
+    error === "" ? null : (0, import_react3.createElement)("div", { className: "small", style: { color: "var(--m-danger)" } }, error),
+    (0, import_react3.createElement)(
+      "button",
+      { className: "primary", onClick: () => void submit(), disabled: busy || password === "" },
+      busy ? "\u767B\u5F55\u4E2D\u2026" : "\u767B\u5F55"
+    )
+  );
+}
+function AddAccountModal({
+  onClose,
+  onDone
+}) {
+  return (0, import_react3.createElement)(
+    Modal,
+    { title: "\u6DFB\u52A0\u90AE\u7BB1\u8D26\u53F7", onClose },
+    (0, import_react3.createElement)(AddAccountForm, {
+      onDone: (state) => {
+        onDone(state);
+        onClose();
+      },
+      onCancel: onClose
+    })
+  );
+}
+
+// src/client/composer.tsx
+var import_react4 = require("react");
+function errorText2(error) {
+  return error instanceof ApiError || error instanceof Error ? error.message : String(error);
+}
+function readFileBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = String(reader.result ?? "");
+      resolve(result.slice(result.indexOf(",") + 1));
+    };
+    reader.onerror = () => reject(new Error(`\u8BFB\u53D6\u6587\u4EF6\u5931\u8D25: ${file.name}`));
+    reader.readAsDataURL(file);
+  });
+}
+function Composer({
+  account,
+  initial,
+  onClose,
+  onSent
+}) {
+  const [to, setTo] = (0, import_react4.useState)(initial.to);
+  const [cc, setCc] = (0, import_react4.useState)(initial.cc);
+  const [bcc, setBcc] = (0, import_react4.useState)(initial.bcc);
+  const [subject, setSubject] = (0, import_react4.useState)(initial.subject);
+  const [showCc, setShowCc] = (0, import_react4.useState)(initial.cc !== "" || initial.bcc !== "");
+  const [attachments, setAttachments] = (0, import_react4.useState)(initial.attachments ?? []);
+  const [busy, setBusy] = (0, import_react4.useState)(false);
+  const [error, setError] = (0, import_react4.useState)("");
+  const [confirming, setConfirming] = (0, import_react4.useState)(false);
+  const [draftId, setDraftId] = (0, import_react4.useState)(initial.draftId);
+  const editor = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
+    if (editor.current !== null) editor.current.innerHTML = initial.html;
+  }, []);
+  const html = () => editor.current?.innerHTML ?? "";
+  const text = () => editor.current?.innerText ?? "";
+  const exec = (command, value) => {
+    editor.current?.focus();
+    document.execCommand(command, false, value);
+  };
+  const addFiles = async (files) => {
+    if (files === null || files.length === 0) return;
+    setError("");
+    const next = [...attachments];
+    let total = next.reduce((sum, file) => sum + file.data.length, 0);
+    for (const file of Array.from(files)) {
+      if (total + file.size > 8 * 1024 * 1024) {
+        setError("\u9644\u4EF6\u5408\u8BA1\u4E0D\u80FD\u8D85\u8FC7 8 MB");
+        break;
+      }
+      const data = await readFileBase64(file);
+      next.push({ filename: file.name, contentType: file.type || "application/octet-stream", data });
+      total += file.size;
+    }
+    setAttachments(next);
+  };
+  const saveDraft = async () => {
+    setBusy(true);
+    setError("");
+    try {
+      const { draft } = await api.saveDraft(account.id, {
+        ...draftId === void 0 ? {} : { id: draftId },
+        to,
+        cc,
+        bcc,
+        subject,
+        html: html(),
+        attachments,
+        ...initial.inReplyTo === void 0 ? {} : { inReplyTo: initial.inReplyTo },
+        ...initial.references === void 0 ? {} : { references: initial.references }
+      });
+      setDraftId(draft.id);
+      onSent("\u8349\u7A3F\u5DF2\u4FDD\u5B58");
+    } catch (caught) {
+      setError(errorText2(caught));
+    } finally {
+      setBusy(false);
+    }
+  };
+  const send = async () => {
+    setBusy(true);
+    setError("");
+    try {
+      await api.send(account.id, {
+        to,
+        cc,
+        bcc,
+        subject,
+        html: html(),
+        text: text(),
+        attachments,
+        ...initial.inReplyTo === void 0 ? {} : { inReplyTo: initial.inReplyTo },
+        ...initial.references === void 0 ? {} : { references: initial.references }
+      });
+      if (draftId !== void 0) {
+        try {
+          await api.deleteDraft(draftId, account.id);
+        } catch {
+        }
+      }
+      onSent("\u90AE\u4EF6\u5DF2\u53D1\u9001");
+      onClose();
+    } catch (caught) {
+      setError(errorText2(caught));
+    } finally {
+      setBusy(false);
+      setConfirming(false);
+    }
+  };
+  return (0, import_react4.createElement)(
+    Modal,
+    {
+      title: initial.mode === "reply" ? "\u56DE\u590D" : initial.mode === "replyAll" ? "\u5168\u90E8\u56DE\u590D" : initial.mode === "forward" ? "\u8F6C\u53D1" : "\u5199\u90AE\u4EF6",
+      onClose,
+      wide: true,
+      footer: (0, import_react4.createElement)(
+        "div",
+        { style: { display: "flex", gap: "8px", alignItems: "center", width: "100%" } },
+        (0, import_react4.createElement)("span", { className: "small muted" }, `\u53D1\u4EF6\u4EBA ${account.email}`),
+        (0, import_react4.createElement)("span", { className: "spacer" }),
+        (0, import_react4.createElement)("button", { className: "ghost", onClick: () => void saveDraft(), disabled: busy }, "\u5B58\u8349\u7A3F"),
+        confirming ? (0, import_react4.createElement)(
+          "span",
+          { style: { display: "inline-flex", gap: "6px", alignItems: "center" } },
+          (0, import_react4.createElement)("span", { className: "small" }, "\u786E\u5B9A\u53D1\u9001\uFF1F"),
+          (0, import_react4.createElement)(
+            "button",
+            { className: "primary", onClick: () => void send(), disabled: busy },
+            busy ? "\u53D1\u9001\u4E2D\u2026" : "\u786E\u5B9A"
+          ),
+          (0, import_react4.createElement)("button", { className: "ghost", onClick: () => setConfirming(false) }, "\u53D6\u6D88")
+        ) : (0, import_react4.createElement)(
+          "button",
+          {
+            className: "primary",
+            onClick: () => setConfirming(true),
+            disabled: busy || to.trim() === ""
+          },
+          "\u53D1\u9001"
+        )
+      )
+    },
+    error === "" ? null : (0, import_react4.createElement)("div", { className: "small", style: { color: "var(--m-danger)" } }, error),
+    (0, import_react4.createElement)(
+      "div",
+      { className: "mailharbor-grid" },
+      (0, import_react4.createElement)(
+        Field,
+        { label: "\u6536\u4EF6\u4EBA" },
+        (0, import_react4.createElement)("input", {
+          value: to,
+          onChange: (event) => setTo(event.target.value),
+          placeholder: "a@example.com, b@example.com"
+        })
+      ),
+      (0, import_react4.createElement)(
+        Field,
+        { label: "\u4E3B\u9898" },
+        (0, import_react4.createElement)("input", {
+          value: subject,
+          onChange: (event) => setSubject(event.target.value)
+        })
+      )
+    ),
+    showCc ? (0, import_react4.createElement)(
+      "div",
+      { className: "mailharbor-grid" },
+      (0, import_react4.createElement)(
+        Field,
+        { label: "\u6284\u9001" },
+        (0, import_react4.createElement)("input", {
+          value: cc,
+          onChange: (event) => setCc(event.target.value)
+        })
+      ),
+      (0, import_react4.createElement)(
+        Field,
+        { label: "\u5BC6\u9001" },
+        (0, import_react4.createElement)("input", {
+          value: bcc,
+          onChange: (event) => setBcc(event.target.value)
+        })
+      )
+    ) : (0, import_react4.createElement)(
+      "button",
+      { className: "subtle small", style: { alignSelf: "flex-start" }, onClick: () => setShowCc(true) },
+      "\u6DFB\u52A0\u6284\u9001 / \u5BC6\u9001"
+    ),
+    (0, import_react4.createElement)(
+      "div",
+      { className: "mailharbor-toolbar" },
+      (0, import_react4.createElement)("button", { onClick: () => exec("bold"), title: "\u52A0\u7C97" }, "B"),
+      (0, import_react4.createElement)("button", { onClick: () => exec("italic"), title: "\u659C\u4F53" }, "I"),
+      (0, import_react4.createElement)("button", { onClick: () => exec("underline"), title: "\u4E0B\u5212\u7EBF" }, "U"),
+      (0, import_react4.createElement)("button", { onClick: () => exec("insertUnorderedList"), title: "\u65E0\u5E8F\u5217\u8868" }, "\u2022 \u5217\u8868"),
+      (0, import_react4.createElement)("button", { onClick: () => exec("insertOrderedList"), title: "\u6709\u5E8F\u5217\u8868" }, "1. \u5217\u8868"),
+      (0, import_react4.createElement)("button", { onClick: () => exec("formatBlock", "blockquote"), title: "\u5F15\u7528" }, "\u5F15\u7528"),
+      (0, import_react4.createElement)(
+        "button",
+        {
+          onClick: () => {
+            const url = window.prompt("\u94FE\u63A5\u5730\u5740\uFF08https://\u2026\uFF09");
+            if (url !== null && /^https?:\/\//i.test(url)) exec("createLink", url);
+          },
+          title: "\u94FE\u63A5"
+        },
+        "\u94FE\u63A5"
+      ),
+      (0, import_react4.createElement)("button", { onClick: () => exec("removeFormat"), title: "\u6E05\u9664\u683C\u5F0F" }, "\u6E05\u9664"),
+      (0, import_react4.createElement)("span", { className: "spacer" }),
+      (0, import_react4.createElement)(
+        "label",
+        { className: "mailharbor-toggle small" },
+        "\u9644\u4EF6",
+        (0, import_react4.createElement)("input", {
+          type: "file",
+          multiple: true,
+          style: { display: "none" },
+          onChange: (event) => {
+            void addFiles(event.target.files);
+            event.target.value = "";
+          }
+        })
+      )
+    ),
+    attachments.length === 0 ? null : (0, import_react4.createElement)(
+      "div",
+      { className: "mailharbor-attachments", style: { padding: 0, border: 0 } },
+      attachments.map(
+        (file, index) => (0, import_react4.createElement)(
+          "span",
+          { className: "mailharbor-attachment", key: `${file.filename}:${String(index)}` },
+          (0, import_react4.createElement)("span", { className: "name" }, file.filename),
+          (0, import_react4.createElement)(
+            "button",
+            {
+              className: "subtle",
+              onClick: () => setAttachments(attachments.filter((_item, position) => position !== index))
+            },
+            "\u2715"
+          )
+        )
+      )
+    ),
+    (0, import_react4.createElement)("div", {
+      className: "mailharbor-editor",
+      ref: editor,
+      contentEditable: true,
+      suppressContentEditableWarning: true,
+      "data-placeholder": "\u5199\u70B9\u4EC0\u4E48\u2026",
+      spellCheck: true
+    })
+  );
+}
+
+// src/client/reader.tsx
+var import_react5 = require("react");
+var IFRAME_STYLE = `
+  html, body { margin: 0; padding: 0; }
+  body {
+    font: 15px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+    color: #171a21; background: #fff; padding: 18px 20px;
+    overflow-wrap: anywhere;
+  }
+  img { max-width: 100%; height: auto; }
+  table { max-width: 100%; border-collapse: collapse; }
+  td, th { padding: 2px 6px; }
+  a { color: #2f5bd3; }
+  blockquote { margin: 0 0 0 12px; padding-left: 12px; border-left: 2px solid #d7dbe3; color: #565c67; }
+  pre { white-space: pre-wrap; }
+`;
+function csp(allowRemoteImages) {
+  return [
+    "default-src 'none'",
+    "style-src 'unsafe-inline'",
+    "font-src data:",
+    `img-src data:${allowRemoteImages ? " https: http:" : ""}`,
+    "form-action 'none'",
+    "base-uri 'none'"
+  ].join("; ");
+}
+function srcDoc(detail, allowRemoteImages) {
+  const html = detail.html !== null && detail.html !== "" ? detail.html : `<pre>${escapeHtml(detail.text)}</pre>`;
+  return `<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="Content-Security-Policy" content="${csp(allowRemoteImages)}"><style>${IFRAME_STYLE}</style></head><body>${html}</body></html>`;
+}
+function escapeHtml(value) {
+  return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+}
+function hasRemoteImages(detail) {
+  return detail.html !== null && /<img[^>]+src=["']https?:/i.test(detail.html);
+}
+function Reader({
+  detail,
+  account,
+  source,
+  mailbox,
+  onChanged,
+  onReply,
+  onClose
+}) {
+  const [plain, setPlain] = (0, import_react5.useState)(false);
+  const [loadImages, setLoadImages] = (0, import_react5.useState)(false);
+  const [busy, setBusy] = (0, import_react5.useState)(false);
+  const [error, setError] = (0, import_react5.useState)("");
+  const remoteImages = (0, import_react5.useMemo)(() => hasRemoteImages(detail), [detail]);
+  const html = detail.html !== null && detail.html !== "";
+  const toggleRead = async () => {
+    setBusy(true);
+    setError("");
+    try {
+      const result = await api.setRead({
+        id: detail.id,
+        accountId: account.id,
+        source,
+        mailbox,
+        read: detail.unread
+      });
+      onChanged({ unread: !result.read });
+    } catch (caught) {
+      setError(caught instanceof Error ? caught.message : String(caught));
+    } finally {
+      setBusy(false);
+    }
+  };
+  return (0, import_react5.createElement)(
+    "div",
+    { className: "mailharbor-reader" },
+    (0, import_react5.createElement)(
+      "div",
+      { className: "mailharbor-reader-head" },
+      (0, import_react5.createElement)(
+        "div",
+        { style: { display: "flex", alignItems: "center", gap: "8px" } },
+        (0, import_react5.createElement)("h2", { style: { flex: 1 } }, detail.subject),
+        onClose === void 0 ? null : (0, import_react5.createElement)("button", { className: "ghost", onClick: onClose }, "\u8FD4\u56DE\u5217\u8868")
+      ),
+      (0, import_react5.createElement)(
+        "div",
+        { className: "mailharbor-reader-meta" },
+        (0, import_react5.createElement)(
+          "span",
+          null,
+          `${detail.from.name !== "" ? detail.from.name : detail.from.address} <${detail.from.address}>`
+        ),
+        (0, import_react5.createElement)("span", null, longDate(detail.date)),
+        detail.backedUp === false ? (0, import_react5.createElement)("span", { className: "badge warn" }, "\u672A\u5907\u4EFD") : null
+      ),
+      (0, import_react5.createElement)(
+        "div",
+        { className: "mailharbor-reader-meta" },
+        (0, import_react5.createElement)(
+          "span",
+          null,
+          `\u6536\u4EF6\u4EBA: ${detail.to.map((item) => item.name !== "" ? `${item.name} <${item.address}>` : item.address).join(", ") || "\u2014"}`
+        ),
+        detail.cc.length === 0 ? null : (0, import_react5.createElement)("span", null, `\u6284\u9001: ${detail.cc.map((item) => item.address).join(", ")}`)
+      ),
+      (0, import_react5.createElement)(
+        "div",
+        { className: "mailharbor-reader-actions" },
+        (0, import_react5.createElement)(
+          "button",
+          {
+            className: "primary",
+            onClick: () => {
+              onReply("reply");
+            }
+          },
+          "\u56DE\u590D"
+        ),
+        (0, import_react5.createElement)(
+          "button",
+          {
+            className: "ghost",
+            onClick: () => {
+              onReply("replyAll");
+            }
+          },
+          "\u5168\u90E8\u56DE\u590D"
+        ),
+        (0, import_react5.createElement)(
+          "button",
+          {
+            className: "ghost",
+            onClick: () => {
+              onReply("forward");
+            }
+          },
+          "\u8F6C\u53D1"
+        ),
+        (0, import_react5.createElement)("span", { className: "spacer" }),
+        (0, import_react5.createElement)(
+          "button",
+          { className: "ghost", onClick: () => void toggleRead(), disabled: busy },
+          detail.unread ? "\u6807\u4E3A\u5DF2\u8BFB" : "\u6807\u4E3A\u672A\u8BFB"
+        ),
+        html ? (0, import_react5.createElement)(
+          "button",
+          { className: "ghost", onClick: () => setPlain(!plain) },
+          plain ? "\u663E\u793A HTML" : "\u663E\u793A\u7EAF\u6587\u672C"
+        ) : null,
+        remoteImages && !loadImages ? (0, import_react5.createElement)("button", { className: "ghost", onClick: () => setLoadImages(true) }, "\u663E\u793A\u8FDC\u7A0B\u56FE\u7247") : null
+      ),
+      error === "" ? null : (0, import_react5.createElement)("div", { className: "small", style: { color: "var(--m-danger)" } }, error)
+    ),
+    (0, import_react5.createElement)(
+      "div",
+      { className: "mailharbor-reader-body" },
+      html && !plain ? (0, import_react5.createElement)("iframe", {
+        title: "\u90AE\u4EF6\u6B63\u6587",
+        sandbox: "",
+        srcDoc: srcDoc(detail, loadImages),
+        referrerPolicy: "no-referrer"
+      }) : (0, import_react5.createElement)("pre", null, detail.text !== "" ? detail.text : "\uFF08\u65E0\u6B63\u6587\uFF09")
+    ),
+    detail.attachments.length === 0 ? null : (0, import_react5.createElement)(
+      "div",
+      { className: "mailharbor-attachments" },
+      detail.attachments.map(
+        (file) => (0, import_react5.createElement)(
+          "a",
+          {
+            className: "mailharbor-attachment",
+            key: file.id,
+            href: source === "server" ? api.attachmentUrl({
+              accountId: account.id,
+              source: "server",
+              mailbox,
+              uid: detail.uid ?? "",
+              part: file.id
+            }) : api.attachmentUrl({
+              accountId: account.id,
+              source: "local",
+              emailId: detail.id,
+              attachmentId: file.id
+            }),
+            download: file.filename
+          },
+          (0, import_react5.createElement)("span", { className: "name" }, file.filename),
+          (0, import_react5.createElement)("span", { className: "muted small" }, formatBytes(file.size))
+        )
+      )
+    )
+  );
+}
+
+// src/client/panel.tsx
+var EMPTY_PAGE = { items: [], total: 0, offset: 0, limit: 40 };
+function errorText3(error) {
+  return error instanceof ApiError || error instanceof Error ? error.message : String(error);
+}
+function quoteForReply(detail) {
+  const body = detail.html ?? `<pre>${detail.text.replaceAll("&", "&amp;").replaceAll("<", "&lt;")}</pre>`;
+  return `<p><br></p><p>------------------ \u539F\u59CB\u90AE\u4EF6 ------------------</p><blockquote style="margin:0 0 0 12px;padding-left:12px;border-left:2px solid #d7dbe3;color:#565c67">${body}</blockquote>`;
+}
+function MailPanel() {
+  const [state, setState] = (0, import_react6.useState)(null);
+  const [error, setError] = (0, import_react6.useState)("");
+  const [source, setSource] = (0, import_react6.useState)("local");
+  const [mailbox, setMailbox] = (0, import_react6.useState)("all");
+  const [folders, setFolders] = (0, import_react6.useState)([]);
+  const [query2, setQuery] = (0, import_react6.useState)("");
+  const [search, setSearch] = (0, import_react6.useState)("");
+  const [page, setPage] = (0, import_react6.useState)(EMPTY_PAGE);
+  const [limit, setLimit] = (0, import_react6.useState)(40);
+  const [loading, setLoading] = (0, import_react6.useState)(false);
+  const [selected, setSelected] = (0, import_react6.useState)(null);
+  const [compose, setCompose] = (0, import_react6.useState)(null);
+  const [showAdd, setShowAdd] = (0, import_react6.useState)(false);
+  const [showBackup, setShowBackup] = (0, import_react6.useState)(false);
+  const [backup, setBackup] = (0, import_react6.useState)(null);
+  const [toast, setToast] = (0, import_react6.useState)("");
+  const [narrow, setNarrow] = (0, import_react6.useState)(() => window.matchMedia("(max-width: 900px)").matches);
+  const [tick, setTick] = (0, import_react6.useState)(0);
+  const account = state?.accounts.find((item) => item.id === state.activeAccountId) ?? null;
+  const accountId = account?.id ?? null;
+  const refresh = (0, import_react6.useCallback)(() => {
+    setTick((value) => value + 1);
+  }, []);
+  const notice = (0, import_react6.useCallback)((message) => {
+    setToast(message);
+    window.setTimeout(() => {
+      setToast("");
+    }, 3200);
+  }, []);
+  (0, import_react6.useEffect)(() => {
+    let cancelled = false;
+    api.state().then((next) => {
+      if (!cancelled) setState(next);
+    }).catch((caught) => {
+      if (!cancelled) setError(errorText3(caught));
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [tick]);
+  (0, import_react6.useEffect)(() => {
+    if (accountId === null) return;
+    let cancelled = false;
+    api.folders({ accountId, source }).then((result) => {
+      if (cancelled) return;
+      const items = source === "local" ? [
+        {
+          name: "all",
+          label: "\u5168\u90E8\u90AE\u4EF6",
+          count: result.items.reduce((sum, item) => sum + item.count, 0)
+        },
+        ...result.items.map((item) => ({ ...item, label: item.label ?? item.name }))
+      ] : result.items.map((item) => ({ ...item, label: item.label ?? item.name }));
+      setFolders(items);
+    }).catch(() => {
+      if (!cancelled) setFolders([]);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [accountId, source, tick]);
+  (0, import_react6.useEffect)(() => {
+    setMailbox(source === "local" ? "all" : "INBOX");
+    setSelected(null);
+    setLimit(state?.settings.render.listLimit ?? 40);
+  }, [source]);
+  (0, import_react6.useEffect)(() => {
+    if (accountId === null) return;
+    let cancelled = false;
+    setLoading(true);
+    api.messages({ accountId, source, mailbox, query: search, limit }).then((result) => {
+      if (!cancelled) setPage(result);
+    }).catch((caught) => {
+      if (!cancelled) setError(errorText3(caught));
+    }).finally(() => {
+      if (!cancelled) setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [accountId, source, mailbox, search, limit, tick]);
+  (0, import_react6.useEffect)(() => {
+    const media = window.matchMedia("(max-width: 900px)");
+    const onChange = () => setNarrow(media.matches);
+    media.addEventListener("change", onChange);
+    return () => {
+      media.removeEventListener("change", onChange);
+    };
+  }, []);
+  (0, import_react6.useEffect)(() => {
+    if (!showBackup || accountId === null) return;
+    let cancelled = false;
+    const poll = async () => {
+      try {
+        const status = await api.backupStatus(accountId);
+        if (!cancelled) setBackup(status);
+      } catch {
+      }
+    };
+    void poll();
+    const timer = window.setInterval(() => {
+      void poll();
+    }, 1e3);
+    return () => {
+      cancelled = true;
+      window.clearInterval(timer);
+    };
+  }, [showBackup, accountId]);
+  const openMessage = async (item) => {
+    if (account === null) return;
+    setError("");
+    try {
+      const detail = await api.message({ id: item.id, accountId: account.id, source, mailbox });
+      setSelected(detail);
+      if (detail.unread && state?.settings.read.markOnOpen === true) {
+        try {
+          await api.setRead({ id: detail.id, accountId: account.id, source, mailbox, read: true });
+          setSelected({ ...detail, unread: false });
+          setPage((current) => ({
+            ...current,
+            items: current.items.map((row) => row.id === item.id ? { ...row, unread: false } : row)
+          }));
+        } catch {
+        }
+      }
+    } catch (caught) {
+      setError(errorText3(caught));
+    }
+  };
+  const startCompose = (mode) => {
+    if (account === null) return;
+    const detail = selected;
+    if (mode === "new" || detail === null) {
+      setCompose({ mode: "new", to: "", cc: "", bcc: "", subject: "", html: "" });
+      return;
+    }
+    const subjectPrefix = mode === "forward" ? "Fwd: " : "Re: ";
+    const subject = /^(re|fwd):/i.test(detail.subject) ? detail.subject : `${subjectPrefix}${detail.subject}`;
+    if (mode === "forward") {
+      setCompose({
+        mode,
+        to: "",
+        cc: "",
+        bcc: "",
+        subject,
+        html: quoteForReply(detail),
+        references: detail.references.join(" ")
+      });
+      return;
+    }
+    const to = detail.from.address;
+    const cc = mode === "replyAll" ? [...detail.to, ...detail.cc].map((item) => item.address).filter((address) => address !== account.email && address !== to).join(", ") : "";
+    setCompose({
+      mode,
+      to,
+      cc,
+      bcc: "",
+      subject,
+      html: quoteForReply(detail),
+      ...detail.messageId === "" ? {} : { inReplyTo: detail.messageId, references: [...detail.references, detail.messageId].join(" ") }
+    });
+  };
+  const switchAccount = async (id) => {
+    try {
+      await api.activateAccount(id);
+      setSelected(null);
+      refresh();
+    } catch (caught) {
+      setError(errorText3(caught));
+    }
+  };
+  const startBackup = async () => {
+    if (accountId === null) return;
+    try {
+      const result = await api.startBackup(accountId);
+      setBackup(result.status);
+      setShowBackup(true);
+    } catch (caught) {
+      setError(errorText3(caught));
+    }
+  };
+  const stopBackup = async () => {
+    if (accountId === null) return;
+    try {
+      const result = await api.stopBackup(accountId);
+      setBackup(result.status);
+    } catch (caught) {
+      setError(errorText3(caught));
+    }
+  };
+  const folderOptions = (0, import_react6.useMemo)(
+    () => folders.map((folder) => ({
+      value: folder.name,
+      label: `${folder.label ?? folder.name}${folder.count > 0 ? ` (${String(folder.count)})` : ""}`
+    })),
+    [folders]
+  );
+  const unreadCount = page.items.filter((item) => item.unread).length;
+  if (state === null) {
+    return (0, import_react6.createElement)("div", { className: "mailharbor mailharbor-empty" }, error === "" ? "\u6B63\u5728\u52A0\u8F7D\u90AE\u7BB1\u2026" : error);
+  }
+  if (account === null) {
+    return (0, import_react6.createElement)(
+      "div",
+      { className: "mailharbor" },
+      (0, import_react6.createElement)(
+        "div",
+        { className: "mailharbor-settings" },
+        (0, import_react6.createElement)("h2", null, "\u6B22\u8FCE\u4F7F\u7528 MailHarbor"),
+        (0, import_react6.createElement)(
+          "p",
+          { className: "muted small" },
+          "\u628A\u4EFB\u610F IMAP/SMTP \u90AE\u7BB1\u63A5\u8FDB DeepSeek Harness\uFF1A\u672C\u5730\u5907\u4EFD\u3001\u5B9E\u65F6\u8BFB\u4FE1\u3001\u5199\u90AE\u4EF6\u3001AI \u4E0E\u4EFB\u52A1\u3002"
+        ),
+        error === "" ? null : (0, import_react6.createElement)("div", { className: "small", style: { color: "var(--m-danger)" } }, error),
+        (0, import_react6.createElement)(AddAccountForm, {
+          onDone: (next) => {
+            setState(next);
+            setSource("local");
+          }
+        })
+      )
+    );
+  }
+  const needsLogin = source === "server" && state.loggedIn === false;
+  return (0, import_react6.createElement)(
+    "div",
+    { className: narrow ? "mailharbor mailharbor-narrow" : "mailharbor" },
+    (0, import_react6.createElement)(
+      "div",
+      { className: "mailharbor-topbar" },
+      (0, import_react6.createElement)(Avatar, { email: account.email, size: 26 }),
+      state.accounts.length > 1 ? (0, import_react6.createElement)(
+        "select",
+        {
+          value: account.id,
+          onChange: (event) => void switchAccount(event.target.value),
+          "aria-label": "\u8D26\u53F7"
+        },
+        state.accounts.map((item) => (0, import_react6.createElement)("option", { key: item.id, value: item.id }, item.label))
+      ) : (0, import_react6.createElement)("span", { className: "small" }, account.label),
+      (0, import_react6.createElement)(
+        "div",
+        { className: "mailharbor-segment", role: "tablist" },
+        (0, import_react6.createElement)(
+          "button",
+          { className: source === "local" ? "active" : "", onClick: () => setSource("local"), role: "tab" },
+          "\u672C\u5730\u5907\u4EFD"
+        ),
+        (0, import_react6.createElement)(
+          "button",
+          { className: source === "server" ? "active" : "", onClick: () => setSource("server"), role: "tab" },
+          "\u670D\u52A1\u5668\u5B9E\u65F6"
+        )
+      ),
+      (0, import_react6.createElement)("span", { className: "spacer" }),
+      state.loggedIn === false ? (0, import_react6.createElement)("span", { className: "badge warn" }, "\u672A\u767B\u5F55") : null,
+      (0, import_react6.createElement)("button", { className: "ghost", onClick: () => setShowAdd(true), title: "\u6DFB\u52A0\u8D26\u53F7" }, "+ \u8D26\u53F7"),
+      (0, import_react6.createElement)("button", { className: "primary", onClick: () => startCompose("new") }, "\u5199\u90AE\u4EF6"),
+      (0, import_react6.createElement)("button", { className: "ghost", onClick: () => void startBackup() }, "\u5907\u4EFD"),
+      (0, import_react6.createElement)(
+        "button",
+        {
+          className: "ghost",
+          onClick: () => {
+            refresh();
+          }
+        },
+        "\u5237\u65B0"
+      )
+    ),
+    toast === "" ? null : (0, import_react6.createElement)("div", { className: "small", style: { padding: "6px 12px", color: "var(--m-ok)" } }, toast),
+    error === "" ? null : (0, import_react6.createElement)(ErrorBar, { message: error, onDismiss: () => setError("") }),
+    needsLogin ? (0, import_react6.createElement)("div", { className: "mailharbor-settings" }, (0, import_react6.createElement)(LoginForm, { account, onDone: refresh })) : (0, import_react6.createElement)(
+      "div",
+      { className: "mailharbor-body", "data-mode": narrow && selected !== null ? "reader" : "list" },
+      (0, import_react6.createElement)(
+        "div",
+        { className: "mailharbor-list" },
+        (0, import_react6.createElement)(
+          "div",
+          { className: "mailharbor-filters" },
+          (0, import_react6.createElement)(
+            "select",
+            {
+              value: mailbox,
+              onChange: (event) => {
+                setMailbox(event.target.value);
+                setSelected(null);
+              },
+              "aria-label": "\u90AE\u7BB1\u6587\u4EF6\u5939"
+            },
+            folderOptions.map(
+              (option) => (0, import_react6.createElement)("option", { key: option.value, value: option.value }, option.label)
+            )
+          ),
+          (0, import_react6.createElement)("input", {
+            type: "search",
+            placeholder: "\u641C\u7D22\u90AE\u4EF6",
+            value: query2,
+            onChange: (event) => setQuery(event.target.value),
+            onKeyDown: (event) => {
+              if (event.key === "Enter") setSearch(query2);
+              if (event.key === "Escape") {
+                setQuery("");
+                setSearch("");
+              }
+            }
+          }),
+          query2 !== search || search !== "" ? (0, import_react6.createElement)(
+            "button",
+            {
+              className: "subtle small",
+              onClick: () => {
+                setQuery("");
+                setSearch("");
+              }
+            },
+            "\u6E05\u9664"
+          ) : null
+        ),
+        (0, import_react6.createElement)(
+          "div",
+          { className: "mailharbor-rows" },
+          loading && page.items.length === 0 ? (0, import_react6.createElement)("div", { className: "mailharbor-empty" }, "\u6B63\u5728\u8BFB\u53D6\u2026") : page.items.length === 0 ? (0, import_react6.createElement)(
+            "div",
+            { className: "mailharbor-empty" },
+            source === "local" ? "\u672C\u5730\u5907\u4EFD\u91CC\u8FD8\u6CA1\u6709\u90AE\u4EF6\u3002\u70B9\u9876\u90E8\u300C\u5907\u4EFD\u300D\u628A\u670D\u52A1\u5668\u90AE\u4EF6\u540C\u6B65\u4E0B\u6765\u3002" : "\u670D\u52A1\u5668\u4E0A\u6CA1\u6709\u90AE\u4EF6\u3002"
+          ) : page.items.map(
+            (item) => (0, import_react6.createElement)(
+              "button",
+              {
+                key: item.id,
+                className: `mailharbor-row${item.unread ? " unread" : ""}${selected?.id === item.id ? " selected" : ""}`,
+                onClick: () => void openMessage(item)
+              },
+              (0, import_react6.createElement)(
+                "span",
+                { className: "line-1" },
+                (0, import_react6.createElement)(
+                  "span",
+                  { className: "from" },
+                  item.from.name !== "" ? item.from.name : item.from.address
+                ),
+                item.backedUp === false ? (0, import_react6.createElement)("span", { className: "badge warn" }, "\u672A\u5907\u4EFD") : null,
+                (0, import_react6.createElement)("span", { className: "date" }, shortDate(item.date))
+              ),
+              (0, import_react6.createElement)("span", { className: "line-2" }, (0, import_react6.createElement)("span", { className: "subject" }, item.subject)),
+              item.snippet === "" ? null : (0, import_react6.createElement)("span", { className: "snippet" }, item.snippet)
+            )
+          ),
+          page.items.length > 0 ? (0, import_react6.createElement)(
+            "div",
+            { style: { padding: "10px 12px", display: "flex", gap: "8px", alignItems: "center" } },
+            (0, import_react6.createElement)(
+              "span",
+              { className: "small muted" },
+              `${String(page.items.length)} / ${String(page.total)} \u5C01${unreadCount > 0 ? ` \xB7 ${String(unreadCount)} \u672A\u8BFB` : ""}`
+            ),
+            (0, import_react6.createElement)("span", { className: "spacer" }),
+            page.total > page.items.length ? (0, import_react6.createElement)(
+              "button",
+              { className: "subtle small", onClick: () => setLimit((current) => current + 40) },
+              "\u52A0\u8F7D\u66F4\u591A"
+            ) : null
+          ) : null
+        )
+      ),
+      (0, import_react6.createElement)(
+        "div",
+        { className: "mailharbor-reader" },
+        selected === null ? (0, import_react6.createElement)(
+          "div",
+          { className: "mailharbor-empty" },
+          (0, import_react6.createElement)("p", null, "\u4ECE\u5DE6\u4FA7\u9009\u62E9\u4E00\u5C01\u90AE\u4EF6"),
+          (0, import_react6.createElement)(
+            "p",
+            { className: "small" },
+            state.loggedIn ? "\u5DF2\u767B\u5F55\uFF0C\u53EF\u5207\u6362\u300C\u670D\u52A1\u5668\u5B9E\u65F6\u300D\u67E5\u770B\u6700\u65B0\u90AE\u4EF6\u3002" : "\u6D4F\u89C8\u672C\u5730\u5907\u4EFD\u4E0D\u9700\u8981\u767B\u5F55\u3002"
+          )
+        ) : (0, import_react6.createElement)(Reader, {
+          detail: selected,
+          account,
+          source,
+          mailbox,
+          onChanged: (patch) => setSelected({ ...selected, ...patch }),
+          onReply: (mode) => startCompose(mode),
+          onClose: narrow ? () => setSelected(null) : void 0
+        })
+      )
+    ),
+    showBackup && backup !== null ? (0, import_react6.createElement)(
+      Modal,
+      {
+        title: "\u5907\u4EFD",
+        onClose: () => setShowBackup(false),
+        footer: (0, import_react6.createElement)(
+          "div",
+          { style: { display: "flex", gap: "8px", width: "100%", alignItems: "center" } },
+          (0, import_react6.createElement)("span", { className: "small muted" }, backup.running ? "\u5907\u4EFD\u8FDB\u884C\u4E2D\u2026" : backup.message),
+          (0, import_react6.createElement)("span", { className: "spacer" }),
+          backup.running ? (0, import_react6.createElement)("button", { className: "danger ghost", onClick: () => void stopBackup() }, "\u505C\u6B62\u5907\u4EFD") : (0, import_react6.createElement)("button", { className: "primary", onClick: () => void startBackup() }, "\u5F00\u59CB\u5907\u4EFD"),
+          (0, import_react6.createElement)("button", { className: "ghost", onClick: () => setShowBackup(false) }, "\u5173\u95ED")
+        )
+      },
+      (0, import_react6.createElement)(
+        "div",
+        { className: "mailharbor-kv" },
+        (0, import_react6.createElement)("dt", null, "\u5F00\u59CB\u65F6\u95F4"),
+        (0, import_react6.createElement)("dd", null, backup.startedAt ?? "\u2014"),
+        (0, import_react6.createElement)("dt", null, "\u4E0A\u6B21\u6210\u529F"),
+        (0, import_react6.createElement)("dd", null, backup.lastSuccessAt ?? "\u2014"),
+        (0, import_react6.createElement)("dt", null, "\u65B0\u589E"),
+        (0, import_react6.createElement)("dd", null, String(backup.added)),
+        (0, import_react6.createElement)("dt", null, "\u603B\u6570"),
+        (0, import_react6.createElement)("dd", null, String(backup.total))
+      ),
+      (0, import_react6.createElement)(
+        "div",
+        { className: "mailharbor-log" },
+        backup.output.length === 0 ? "\uFF08\u7B49\u5F85\u8F93\u51FA\u2026\uFF09" : backup.output.join("\n")
+      )
+    ) : null,
+    compose !== null ? (0, import_react6.createElement)(Composer, {
+      account,
+      initial: compose,
+      onClose: () => setCompose(null),
+      onSent: (message) => notice(message)
+    }) : null,
+    showAdd ? (0, import_react6.createElement)(AddAccountModal, {
+      onClose: () => setShowAdd(false),
+      onDone: (next) => {
+        setState(next);
+        refresh();
+      }
+    }) : null
+  );
+}
+
+// src/client/settings.tsx
+var import_react7 = require("react");
+function errorText4(error) {
+  return error instanceof ApiError || error instanceof Error ? error.message : String(error);
+}
+function MailSettings() {
+  const [state, setState] = (0, import_react7.useState)(null);
+  const [settings, setSettings] = (0, import_react7.useState)(null);
+  const [error, setError] = (0, import_react7.useState)("");
+  const [toast, setToast] = (0, import_react7.useState)("");
+  const [signature, setSignature] = (0, import_react7.useState)("");
+  const [markOnOpen, setMarkOnOpen] = (0, import_react7.useState)(true);
+  const [pollSeconds, setPollSeconds] = (0, import_react7.useState)(60);
+  const [listLimit, setListLimit] = (0, import_react7.useState)(40);
+  const [aiEnabled, setAiEnabled] = (0, import_react7.useState)(true);
+  const [aiProvider, setAiProvider] = (0, import_react7.useState)("deepseek-account");
+  const [aiModel, setAiModel] = (0, import_react7.useState)("deepseek-flash");
+  const [editing, setEditing] = (0, import_react7.useState)(null);
+  const [checkResult, setCheckResult] = (0, import_react7.useState)("");
+  const [adding, setAdding] = (0, import_react7.useState)(false);
+  const [tick, setTick] = (0, import_react7.useState)(0);
+  (0, import_react7.useEffect)(() => {
+    let cancelled = false;
+    Promise.all([api.state(), api.settings()]).then(([appState, view]) => {
+      if (cancelled) return;
+      setState(appState);
+      setSettings(view);
+      setSignature(appState.settings.signature);
+      setMarkOnOpen(view.read.markOnOpen);
+      setPollSeconds(view.read.pollSeconds);
+      setListLimit(view.render.listLimit);
+      setAiEnabled(view.ai.enabled);
+      setAiProvider(view.ai.provider);
+      setAiModel(view.ai.model);
+    }).catch((caught) => {
+      if (!cancelled) setError(errorText4(caught));
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [tick]);
+  const reload = () => setTick((value) => value + 1);
+  const notify = (message) => {
+    setToast(message);
+    window.setTimeout(() => {
+      setToast("");
+    }, 3e3);
+  };
+  const saveGeneral = async (patch) => {
+    try {
+      const result = await api.saveSettings(patch);
+      setSettings(result.settings);
+      notify("\u8BBE\u7F6E\u5DF2\u4FDD\u5B58");
+    } catch (caught) {
+      setError(errorText4(caught));
+    }
+  };
+  const account = settings?.accounts.find((item) => item.id === settings.activeAccountId) ?? null;
+  if (state === null || settings === null) {
+    return (0, import_react7.createElement)("div", { className: "mailharbor mailharbor-settings" }, error === "" ? "\u6B63\u5728\u52A0\u8F7D\u8BBE\u7F6E\u2026" : error);
+  }
+  return (0, import_react7.createElement)(
+    "div",
+    { className: "mailharbor" },
+    (0, import_react7.createElement)(
+      "div",
+      { className: "mailharbor-settings" },
+      (0, import_react7.createElement)("h2", null, "MailHarbor"),
+      (0, import_react7.createElement)("p", { className: "small muted" }, "\u591A\u8D26\u53F7 IMAP/SMTP \u90AE\u7BB1\u3001\u672C\u5730\u5907\u4EFD\u3001AI \u4E0E\u4EFB\u52A1\u3002\u8BBE\u7F6E\u4F1A\u7ACB\u5373\u751F\u6548\u3002"),
+      toast === "" ? null : (0, import_react7.createElement)("div", { className: "small", style: { color: "var(--m-ok)" } }, toast),
+      error === "" ? null : (0, import_react7.createElement)(ErrorBar, { message: error, onDismiss: () => setError("") }),
+      (0, import_react7.createElement)(
+        "div",
+        { className: "mailharbor-card" },
+        (0, import_react7.createElement)("h3", null, "\u8D26\u53F7"),
+        settings.accounts.length === 0 ? (0, import_react7.createElement)(AddAccountForm, { onDone: () => reload() }) : settings.accounts.map(
+          (item) => (0, import_react7.createElement)(AccountRow, {
+            key: item.id,
+            account: item,
+            active: item.id === settings.activeAccountId,
+            loggedIn: item.id === settings.activeAccountId ? state.loggedIn : void 0,
+            editing: editing === item.id,
+            checkResult: editing === item.id ? checkResult : "",
+            onToggleEdit: () => {
+              setEditing(editing === item.id ? null : item.id);
+              setCheckResult("");
+            },
+            onActivate: async () => {
+              await api.activateAccount(item.id);
+              reload();
+            },
+            onLogin: async (password, remember) => {
+              await api.login(item.id, password, remember);
+              reload();
+            },
+            onLogout: async () => {
+              await api.logout(item.id);
+              reload();
+            },
+            onCheck: async () => {
+              try {
+                const result = await api.check(item.id);
+                setCheckResult(
+                  `IMAP \u6B63\u5E38\uFF08${String(result.imap.mailboxes.length)} \u4E2A\u6587\u4EF6\u5939\uFF09\xB7 SMTP ${result.smtp.ok ? "\u6B63\u5E38" : `\u5931\u8D25: ${result.smtp.error ?? ""}`}`
+                );
+              } catch (caught) {
+                setCheckResult(`\u5931\u8D25: ${errorText4(caught)}`);
+              }
+            },
+            onSave: async (patch) => {
+              await api.updateAccount(item.id, patch);
+              reload();
+            },
+            onRemove: async () => {
+              if (!window.confirm(`\u79FB\u9664\u8D26\u53F7 ${item.email}\uFF1F\u672C\u5730\u6570\u636E\u76EE\u5F55\u4F1A\u4FDD\u7559\u3002`)) return;
+              await api.deleteAccount(item.id);
+              reload();
+            }
+          })
+        ),
+        adding ? (0, import_react7.createElement)(AddAccountForm, {
+          onDone: () => {
+            setAdding(false);
+            reload();
+          },
+          onCancel: () => setAdding(false)
+        }) : (0, import_react7.createElement)("button", { className: "ghost", onClick: () => setAdding(true) }, "+ \u6DFB\u52A0\u8D26\u53F7")
+      ),
+      (0, import_react7.createElement)(
+        "div",
+        { className: "mailharbor-card" },
+        (0, import_react7.createElement)("h3", null, "\u5199\u4FE1\u4E0E\u9605\u8BFB"),
+        (0, import_react7.createElement)(
+          Field,
+          { label: "\u7B7E\u540D\uFF08\u7EAF\u6587\u672C\uFF0C\u53D1\u9001\u65F6\u8FFD\u52A0\u5230\u6B63\u6587\u672B\u5C3E\uFF09" },
+          (0, import_react7.createElement)("textarea", {
+            rows: 4,
+            value: signature,
+            onChange: (event) => setSignature(event.target.value)
+          })
+        ),
+        (0, import_react7.createElement)(
+          "div",
+          { style: { display: "flex", gap: "10px", alignItems: "center", flexWrap: "wrap" } },
+          (0, import_react7.createElement)("button", { className: "ghost", onClick: () => void saveGeneral({ signature }) }, "\u4FDD\u5B58\u7B7E\u540D"),
+          (0, import_react7.createElement)(Toggle, {
+            checked: markOnOpen,
+            onChange: (value) => {
+              setMarkOnOpen(value);
+              void saveGeneral({ read: { markOnOpen: value } });
+            },
+            label: "\u6253\u5F00\u90AE\u4EF6\u65F6\u6807\u4E3A\u5DF2\u8BFB"
+          })
+        ),
+        (0, import_react7.createElement)(
+          "div",
+          { className: "mailharbor-grid" },
+          (0, import_react7.createElement)(
+            Field,
+            { label: "\u5217\u8868\u6BCF\u9875\u6570\u91CF" },
+            (0, import_react7.createElement)("input", {
+              type: "number",
+              min: 10,
+              max: 200,
+              value: listLimit,
+              onChange: (event) => setListLimit(Number(event.target.value)),
+              onBlur: () => void saveGeneral({ render: { listLimit } })
+            })
+          ),
+          (0, import_react7.createElement)(
+            Field,
+            { label: "\u672A\u8BFB\u89D2\u6807\u8F6E\u8BE2\uFF08\u79D2\uFF09" },
+            (0, import_react7.createElement)("input", {
+              type: "number",
+              min: 15,
+              max: 3600,
+              value: pollSeconds,
+              onChange: (event) => setPollSeconds(Number(event.target.value)),
+              onBlur: () => void saveGeneral({ read: { pollSeconds } })
+            })
+          )
+        )
+      ),
+      (0, import_react7.createElement)(
+        "div",
+        { className: "mailharbor-card" },
+        (0, import_react7.createElement)("h3", null, "AI"),
+        (0, import_react7.createElement)(Toggle, {
+          checked: aiEnabled,
+          onChange: (value) => {
+            setAiEnabled(value);
+            void saveGeneral({ ai: { enabled: value } });
+          },
+          label: "\u542F\u7528 AI\uFF08\u6458\u8981\u3001\u8D77\u8349\u3001\u6DA6\u8272\u3001\u81EA\u7136\u8BED\u8A00\u641C\u7D22\uFF09"
+        }),
+        (0, import_react7.createElement)(
+          "div",
+          { className: "mailharbor-grid" },
+          (0, import_react7.createElement)(
+            Field,
+            { label: "Provider" },
+            (0, import_react7.createElement)("input", {
+              value: aiProvider,
+              onChange: (event) => setAiProvider(event.target.value),
+              onBlur: () => void saveGeneral({ ai: { provider: aiProvider } })
+            })
+          ),
+          (0, import_react7.createElement)(
+            Field,
+            { label: "\u6A21\u578B" },
+            (0, import_react7.createElement)("input", {
+              value: aiModel,
+              onChange: (event) => setAiModel(event.target.value),
+              onBlur: () => void saveGeneral({ ai: { model: aiModel } })
+            })
+          )
+        ),
+        (0, import_react7.createElement)(
+          "p",
+          { className: "small muted" },
+          "AI \u8C03\u7528\u8D70 DSH \u81EA\u5DF1\u7684\u6A21\u578B\u670D\u52A1\uFF0C\u4E0D\u989D\u5916\u4FDD\u5B58\u5BC6\u94A5\u3002AI \u9762\u677F\u529F\u80FD\u5C06\u5728 v0.2 \u63D0\u4F9B\u3002"
+        )
+      ),
+      (0, import_react7.createElement)(
+        "div",
+        { className: "mailharbor-card" },
+        (0, import_react7.createElement)("h3", null, "\u6570\u636E"),
+        (0, import_react7.createElement)(
+          "dl",
+          { className: "mailharbor-kv" },
+          (0, import_react7.createElement)("dt", null, "\u6570\u636E\u76EE\u5F55"),
+          (0, import_react7.createElement)("dd", null, settings.dataDir),
+          (0, import_react7.createElement)("dt", null, "\u914D\u7F6E\u6587\u4EF6"),
+          (0, import_react7.createElement)("dd", null, settings.configFile),
+          (0, import_react7.createElement)("dt", null, "\u5F53\u524D\u8D26\u53F7\u6570\u636E\u5E93"),
+          (0, import_react7.createElement)("dd", null, account === null ? "\u2014" : `${settings.dataDir}/accounts/${account.id}/mail.db`),
+          (0, import_react7.createElement)("dt", null, "\u63D2\u4EF6\u7248\u672C"),
+          (0, import_react7.createElement)("dd", null, state.version)
+        ),
+        (0, import_react7.createElement)(
+          "div",
+          { style: { display: "flex", gap: "8px", flexWrap: "wrap" } },
+          account === null ? null : (0, import_react7.createElement)(
+            "button",
+            {
+              className: "ghost",
+              onClick: async () => {
+                try {
+                  const status = await api.startBackup(account.id);
+                  notify(status.status.message === "" ? "\u5907\u4EFD\u5DF2\u5F00\u59CB" : status.status.message);
+                  reload();
+                } catch (caught) {
+                  setError(errorText4(caught));
+                }
+              }
+            },
+            "\u7ACB\u5373\u5907\u4EFD\u5F53\u524D\u8D26\u53F7"
+          )
+        )
+      )
+    )
+  );
+}
+function AccountRow({
+  account,
+  active,
+  loggedIn,
+  editing,
+  checkResult,
+  onToggleEdit,
+  onActivate,
+  onLogin,
+  onLogout,
+  onCheck,
+  onSave,
+  onRemove
+}) {
+  const [password, setPassword] = (0, import_react7.useState)("");
+  const [remember, setRemember] = (0, import_react7.useState)(true);
+  const [label, setLabel] = (0, import_react7.useState)(account.label);
+  const [username, setUsername] = (0, import_react7.useState)(account.username);
+  const [imapHost, setImapHost] = (0, import_react7.useState)(account.imap.host);
+  const [imapPort, setImapPort] = (0, import_react7.useState)(String(account.imap.port));
+  const [imapSecure, setImapSecure] = (0, import_react7.useState)(account.imap.secure);
+  const [smtpHost, setSmtpHost] = (0, import_react7.useState)(account.smtp.host);
+  const [smtpPort, setSmtpPort] = (0, import_react7.useState)(String(account.smtp.port));
+  const [smtpSecure, setSmtpSecure] = (0, import_react7.useState)(account.smtp.secure);
+  const [fromName, setFromName] = (0, import_react7.useState)(account.smtp.fromName);
+  const [busy, setBusy] = (0, import_react7.useState)(false);
+  (0, import_react7.useEffect)(() => {
+    setLabel(account.label);
+    setUsername(account.username);
+    setImapHost(account.imap.host);
+    setImapPort(String(account.imap.port));
+    setImapSecure(account.imap.secure);
+    setSmtpHost(account.smtp.host);
+    setSmtpPort(String(account.smtp.port));
+    setSmtpSecure(account.smtp.secure);
+    setFromName(account.smtp.fromName);
+  }, [account]);
+  const wrap = async (operation) => {
+    setBusy(true);
+    try {
+      await operation();
+    } finally {
+      setBusy(false);
+    }
+  };
+  return (0, import_react7.createElement)(
+    "div",
+    { className: "mailharbor-card", style: { background: "var(--m-bg-1)" } },
+    (0, import_react7.createElement)(
+      "div",
+      { className: "mailharbor-account-row" },
+      (0, import_react7.createElement)(Avatar, { email: account.email, size: 30 }),
+      (0, import_react7.createElement)(
+        "div",
+        { style: { display: "flex", flexDirection: "column", minWidth: 0 } },
+        (0, import_react7.createElement)("strong", null, account.label),
+        (0, import_react7.createElement)("span", { className: "small muted" }, account.email)
+      ),
+      active ? (0, import_react7.createElement)("span", { className: "badge ok" }, "\u5F53\u524D\u8D26\u53F7") : null,
+      loggedIn === false ? (0, import_react7.createElement)("span", { className: "badge warn" }, "\u672A\u767B\u5F55") : null,
+      (0, import_react7.createElement)("span", { className: "spacer" }),
+      active ? null : (0, import_react7.createElement)("button", { className: "ghost small", onClick: () => void wrap(onActivate) }, "\u8BBE\u4E3A\u5F53\u524D"),
+      (0, import_react7.createElement)("button", { className: "ghost small", onClick: () => void wrap(onCheck) }, "\u68C0\u67E5\u8FDE\u63A5"),
+      (0, import_react7.createElement)("button", { className: "ghost small", onClick: onToggleEdit }, editing ? "\u6536\u8D77" : "\u7F16\u8F91")
+    ),
+    editing ? (0, import_react7.createElement)(
+      "div",
+      { style: { display: "flex", flexDirection: "column", gap: "10px" } },
+      (0, import_react7.createElement)(
+        "div",
+        { className: "mailharbor-grid" },
+        (0, import_react7.createElement)(
+          Field,
+          { label: "\u663E\u793A\u540D\u79F0" },
+          (0, import_react7.createElement)("input", {
+            value: label,
+            onChange: (event) => setLabel(event.target.value)
+          })
+        ),
+        (0, import_react7.createElement)(
+          Field,
+          { label: "\u767B\u5F55\u7528\u6237\u540D" },
+          (0, import_react7.createElement)("input", {
+            value: username,
+            onChange: (event) => setUsername(event.target.value)
+          })
+        )
+      ),
+      (0, import_react7.createElement)(
+        "div",
+        { className: "mailharbor-grid three" },
+        (0, import_react7.createElement)(
+          Field,
+          { label: "IMAP \u4E3B\u673A" },
+          (0, import_react7.createElement)("input", {
+            value: imapHost,
+            onChange: (event) => setImapHost(event.target.value)
+          })
+        ),
+        (0, import_react7.createElement)(
+          Field,
+          { label: "\u7AEF\u53E3" },
+          (0, import_react7.createElement)("input", {
+            value: imapPort,
+            onChange: (event) => setImapPort(event.target.value)
+          })
+        ),
+        (0, import_react7.createElement)(Toggle, { checked: imapSecure, onChange: setImapSecure, label: "TLS" })
+      ),
+      (0, import_react7.createElement)(
+        "div",
+        { className: "mailharbor-grid three" },
+        (0, import_react7.createElement)(
+          Field,
+          { label: "SMTP \u4E3B\u673A" },
+          (0, import_react7.createElement)("input", {
+            value: smtpHost,
+            onChange: (event) => setSmtpHost(event.target.value)
+          })
+        ),
+        (0, import_react7.createElement)(
+          Field,
+          { label: "\u7AEF\u53E3" },
+          (0, import_react7.createElement)("input", {
+            value: smtpPort,
+            onChange: (event) => setSmtpPort(event.target.value)
+          })
+        ),
+        (0, import_react7.createElement)(Toggle, { checked: smtpSecure, onChange: setSmtpSecure, label: "TLS" })
+      ),
+      (0, import_react7.createElement)(
+        Field,
+        { label: "\u53D1\u4EF6\u4EBA\u540D\u79F0" },
+        (0, import_react7.createElement)("input", {
+          value: fromName,
+          onChange: (event) => setFromName(event.target.value)
+        })
+      ),
+      (0, import_react7.createElement)(
+        "div",
+        { style: { display: "flex", gap: "8px", alignItems: "center", flexWrap: "wrap" } },
+        (0, import_react7.createElement)(
+          "button",
+          {
+            className: "primary small",
+            disabled: busy,
+            onClick: () => void wrap(async () => {
+              await onSave({
+                label,
+                username,
+                imap: { host: imapHost, port: Number(imapPort) || 993, secure: imapSecure },
+                smtp: { host: smtpHost, port: Number(smtpPort) || 465, secure: smtpSecure, fromName }
+              });
+            })
+          },
+          "\u4FDD\u5B58\u8D26\u53F7"
+        ),
+        (0, import_react7.createElement)(
+          "button",
+          {
+            className: "ghost small danger",
+            onClick: () => void wrap(onRemove)
+          },
+          "\u79FB\u9664\u8D26\u53F7"
+        )
+      ),
+      (0, import_react7.createElement)("hr", { style: { border: 0, borderTop: "1px solid var(--m-line)", width: "100%" } }),
+      (0, import_react7.createElement)(
+        Field,
+        { label: "\u5BC6\u7801 / \u5E94\u7528\u4E13\u7528\u5BC6\u7801\uFF08\u4E0D\u5199\u5165\u914D\u7F6E\u6587\u4EF6\uFF09" },
+        (0, import_react7.createElement)("input", {
+          type: "password",
+          value: password,
+          onChange: (event) => setPassword(event.target.value)
+        })
+      ),
+      (0, import_react7.createElement)(
+        "div",
+        { style: { display: "flex", gap: "8px", alignItems: "center" } },
+        (0, import_react7.createElement)(Toggle, { checked: remember, onChange: setRemember, label: "\u8BB0\u4F4F\u5BC6\u7801" }),
+        (0, import_react7.createElement)(
+          "button",
+          {
+            className: "primary small",
+            disabled: busy || password === "",
+            onClick: () => void wrap(async () => {
+              await onLogin(password, remember);
+              setPassword("");
+            })
+          },
+          "\u767B\u5F55"
+        ),
+        (0, import_react7.createElement)("button", { className: "ghost small", onClick: () => void wrap(onLogout) }, "\u9000\u51FA\u767B\u5F55")
+      ),
+      checkResult === "" ? null : (0, import_react7.createElement)("div", { className: "small muted" }, checkResult)
+    ) : null
+  );
+}
+
+// src/client/index.tsx
+var VERSION = "0.1.0";
+var inject = ["slots"];
+var PANEL_ID = "mailharbor";
+var STYLE_ID = "mailharbor-style";
+function ensureStyles() {
+  if (document.getElementById(STYLE_ID) !== null) return;
+  const element = document.createElement("style");
+  element.id = STYLE_ID;
+  element.textContent = styles_default;
+  document.head.append(element);
+}
+function apply(ctx) {
+  ensureStyles();
+  ctx.slots.inject("main", () => ctx.slots.register({ name: "main", key: PANEL_ID }, MailPanel));
+  ctx.slots.inject(
+    "settings.section",
+    () => ctx.slots.register(
+      {
+        name: "settings.section",
+        id: PANEL_ID,
+        order: 35,
+        label: () => "MailHarbor"
+      },
+      MailSettings
+    )
+  );
+  ctx.slots.inject(
+    "sidebar.panellist",
+    () => ctx.slots.register(
+      {
+        name: "sidebar.panellist",
+        id: PANEL_ID,
+        order: 20,
+        label: "MailHarbor"
+      },
+      MailIcon
+    )
+  );
+}
+
+    return module.exports;
+  },
+});
+
+//# sourceMappingURL=client.js.map