@zaclinley/dsh-mailharbor 0.1.0 → 0.2.1

package/lib/client.js

@@ -34,7 +34,7 @@ __export(index_exports, {
 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";
+var styles_default = "/* MailHarbor panel + settings.\n   Tokens come from the DSH shell (dark by default); fallbacks match the\n   default dark theme so the panel also renders in a bare host page.\n   Component rules are all scoped under `.mailharbor` and the generic element\n   reset lives in `:where()` so it cannot outrank a component class. */\n\n.mailharbor {\n  --m-bg: var(--dsw-alias-bg-base, #151517);\n  --m-bg-1: var(--dsw-alias-bg-layer-1, #232324);\n  --m-bg-2: var(--dsw-alias-bg-layer-2, #2c2c2e);\n  --m-bg-3: var(--dsw-alias-bg-layer-3, #353638);\n  --m-line: var(--dsw-alias-border-l2, #ffffff1f);\n  --m-line-soft: var(--dsw-alias-border-l1, #ffffff0f);\n  --m-line-strong: var(--dsw-alias-border-l3, #ffffff29);\n  --m-text: var(--dsw-alias-label-primary, #f9fafb);\n  --m-text-2: var(--dsw-alias-label-secondary, #cfd3d6);\n  --m-text-3: var(--dsw-alias-label-tertiary, #adb2b8);\n  --m-caption: var(--dsw-alias-label-caption, #81858c);\n  --m-accent: #5686fe;\n  --m-accent-soft: rgba(86, 134, 254, 0.14);\n  --m-primary-bg: var(--dsw-alias-brand-primary, #f9fafb);\n  --m-primary-fg: var(--dsw-alias-label-primary-foreground, #0f1115);\n  --m-hover: var(--dsw-alias-interactive-bg-hover, #ffffff14);\n  --m-danger: #f25a5a;\n  --m-ok: #3fbf7f;\n  --m-warn: var(--dsw-alias-state-warn-label, #dd8629);\n  --m-radius: 8px;\n  --m-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);\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  -webkit-font-smoothing: antialiased;\n}\n\n.mailharbor *,\n.mailharbor *::before,\n.mailharbor *::after {\n  box-sizing: border-box;\n}\n\n/* ---------- base controls ---------- */\n\n.mailharbor :where(button) {\n  font: inherit;\n  color: inherit;\n  background: transparent;\n  border: 0;\n  margin: 0;\n  cursor: pointer;\n}\n\n.mailharbor button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  height: 30px;\n  padding: 0 12px;\n  border-radius: var(--m-radius);\n  border: 1px solid transparent;\n  color: var(--m-text-2);\n  font-size: 12.5px;\n  font-weight: 500;\n  white-space: nowrap;\n  transition:\n    background 120ms ease,\n    color 120ms ease,\n    border-color 120ms ease;\n}\n\n.mailharbor button:hover:not(:disabled) {\n  background: var(--m-hover);\n  color: var(--m-text);\n}\n\n.mailharbor button:disabled {\n  opacity: 0.45;\n  cursor: default;\n}\n\n.mailharbor button.primary {\n  background: var(--m-primary-bg);\n  color: var(--m-primary-fg);\n  border-color: transparent;\n}\n\n.mailharbor button.primary:hover:not(:disabled) {\n  background: var(--m-primary-bg);\n  filter: brightness(0.94);\n  color: var(--m-primary-fg);\n}\n\n.mailharbor button.ghost {\n  border-color: var(--m-line);\n  color: var(--m-text-2);\n}\n\n.mailharbor button.ghost:hover:not(:disabled) {\n  border-color: var(--m-line-strong);\n  color: var(--m-text);\n}\n\n.mailharbor button.subtle {\n  color: var(--m-text-3);\n  padding: 0 8px;\n}\n\n.mailharbor button.icon {\n  width: 30px;\n  padding: 0;\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: var(--m-text);\n  background: var(--m-bg-1);\n  border: 1px solid var(--m-line);\n  border-radius: var(--m-radius);\n  padding: 0 10px;\n  height: 32px;\n  min-width: 0;\n}\n\n.mailharbor textarea {\n  height: auto;\n  padding: 8px 10px;\n  resize: vertical;\n  line-height: 1.6;\n}\n\n.mailharbor select {\n  padding-right: 26px;\n  appearance: none;\n  background-image:\n    linear-gradient(45deg, transparent 50%, var(--m-text-3) 50%),\n    linear-gradient(135deg, var(--m-text-3) 50%, transparent 50%);\n  background-position:\n    calc(100% - 15px) 14px,\n    calc(100% - 10px) 14px;\n  background-size:\n    5px 5px,\n    5px 5px;\n  background-repeat: no-repeat;\n}\n\n.mailharbor ::placeholder {\n  color: var(--m-caption);\n}\n\n.mailharbor input:focus-visible,\n.mailharbor select:focus-visible,\n.mailharbor textarea:focus-visible,\n.mailharbor button:focus-visible,\n.mailharbor [contenteditable='true']:focus-visible {\n  outline: 2px solid rgba(86, 134, 254, 0.55);\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  display: inline-flex;\n  align-items: center;\n  height: 18px;\n  padding: 0 6px;\n  border-radius: 999px;\n  font-size: 10.5px;\n  font-weight: 500;\n  background: var(--m-bg-3);\n  color: var(--m-text-2);\n}\n\n.mailharbor .badge.ok {\n  background: rgba(63, 191, 127, 0.16);\n  color: var(--m-ok);\n}\n\n.mailharbor .badge.warn {\n  background: rgba(221, 134, 41, 0.16);\n  color: var(--m-warn);\n}\n\n.mailharbor .error {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 14px;\n  color: var(--m-danger);\n  background: rgba(242, 90, 90, 0.1);\n  border-bottom: 1px solid rgba(242, 90, 90, 0.2);\n  font-size: 12.5px;\n}\n\n/* ---------- shell ---------- */\n\n.mailharbor-topbar {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  height: 52px;\n  padding: 0 14px;\n  border-bottom: 1px solid var(--m-line-soft);\n  flex: none;\n}\n\n.mailharbor-account {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  max-width: 220px;\n  padding: 4px 8px 4px 4px;\n  border-radius: 999px;\n  border: 1px solid transparent;\n  cursor: default;\n}\n\n.mailharbor-account:hover {\n  background: var(--m-hover);\n}\n\n.mailharbor-account .name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-weight: 500;\n}\n\n.mailharbor-account select {\n  height: 26px;\n  background: transparent;\n  border-color: transparent;\n  font-weight: 500;\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: 360px;\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: 1000px) {\n  .mailharbor-list {\n    width: 300px;\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/* ---------- segmented control ---------- */\n\n.mailharbor-segment {\n  display: inline-flex;\n  align-items: center;\n  gap: 2px;\n  padding: 2px;\n  border-radius: 9px;\n  background: var(--m-bg-2);\n}\n\n.mailharbor-segment button {\n  height: 26px;\n  padding: 0 12px;\n  border-radius: 7px;\n  color: var(--m-text-3);\n  font-size: 12px;\n}\n\n.mailharbor-segment button:hover:not(.active) {\n  color: var(--m-text-2);\n  background: transparent;\n}\n\n.mailharbor-segment button.active {\n  background: var(--m-bg-3);\n  color: var(--m-text);\n}\n\n/* ---------- list ---------- */\n\n.mailharbor-filters {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 12px;\n  border-bottom: 1px solid var(--m-line-soft);\n  flex: none;\n}\n\n.mailharbor-filters select {\n  width: 128px;\n  flex: none;\n  font-size: 12px;\n}\n\n.mailharbor-filters input[type='search'] {\n  flex: 1;\n  height: 30px;\n  font-size: 12.5px;\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: 3px;\n  width: 100%;\n  padding: 10px 14px;\n  border: 0;\n  border-bottom: 1px solid var(--m-line-soft);\n  border-left: 2px solid transparent;\n  border-radius: 0;\n  background: transparent;\n  color: inherit;\n  text-align: left;\n  cursor: pointer;\n  user-select: none;\n}\n\n.mailharbor-row:hover {\n  background: var(--m-hover);\n}\n\n.mailharbor-row.selected {\n  background: var(--m-accent-soft);\n  border-left-color: var(--m-accent);\n}\n\n.mailharbor-row .line-1,\n.mailharbor-row .line-2 {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  width: 100%;\n}\n\n.mailharbor-row .from {\n  font-weight: 600;\n  font-size: 12.5px;\n  color: var(--m-text-2);\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-caption);\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  font-size: 12.5px;\n}\n\n.mailharbor-row .snippet {\n  color: var(--m-caption);\n  font-size: 11.5px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n}\n\n.mailharbor-row.unread .from,\n.mailharbor-row.unread .subject {\n  color: var(--m-text);\n}\n\n.mailharbor-row .dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--m-accent);\n  flex: none;\n}\n\n.mailharbor-row .paperclip {\n  color: var(--m-caption);\n  flex: none;\n  display: inline-flex;\n}\n\n.mailharbor-list-foot {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border-top: 1px solid var(--m-line-soft);\n  color: var(--m-text-3);\n  font-size: 11.5px;\n  flex: none;\n}\n\n.mailharbor-empty {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  padding: 48px 24px;\n  color: var(--m-text-3);\n  text-align: center;\n}\n\n.mailharbor-empty svg {\n  opacity: 0.5;\n}\n\n.mailharbor-empty .title {\n  color: var(--m-text-2);\n  font-size: 13px;\n  font-weight: 500;\n}\n\n/* ---------- reader ---------- */\n\n.mailharbor-reader-head {\n  padding: 16px 20px 12px;\n  border-bottom: 1px solid var(--m-line-soft);\n  flex: none;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.mailharbor-reader-title {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n}\n\n.mailharbor-reader-title h2 {\n  margin: 0;\n  font-size: 17px;\n  line-height: 1.35;\n  font-weight: 600;\n  letter-spacing: -0.01em;\n  word-break: break-word;\n}\n\n.mailharbor-reader-meta {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 4px 10px;\n  color: var(--m-text-3);\n  font-size: 12px;\n}\n\n.mailharbor-reader-meta .who {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--m-text-2);\n}\n\n.mailharbor-reader-meta .who strong {\n  color: var(--m-text);\n  font-weight: 600;\n}\n\n.mailharbor-reader-actions {\n  display: flex;\n  align-items: center;\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  padding: 14px 18px 18px;\n  background: var(--m-bg-2);\n}\n\n.mailharbor-reader-body iframe {\n  flex: 1;\n  width: 100%;\n  border: 0;\n  border-radius: 10px;\n  background: #fff;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);\n}\n\n.mailharbor-reader-body pre {\n  flex: 1;\n  overflow: auto;\n  margin: 0;\n  padding: 20px 22px;\n  white-space: pre-wrap;\n  word-break: break-word;\n  background: #fff;\n  border-radius: 10px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);\n  color: #171a21;\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: 12.5px;\n  line-height: 1.7;\n}\n\n.mailharbor-attachments {\n  padding: 10px 18px;\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: 8px;\n  height: 30px;\n  padding: 0 10px;\n  border: 1px solid var(--m-line);\n  border-radius: var(--m-radius);\n  font-size: 12px;\n  text-decoration: none;\n  color: var(--m-text-2);\n  max-width: 260px;\n  background: var(--m-bg-1);\n}\n\n.mailharbor-attachment:hover {\n  border-color: var(--m-line-strong);\n  color: var(--m-text);\n}\n\n.mailharbor-attachment .name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* ---------- modal / forms ---------- */\n\n.mailharbor-portal {\n  position: fixed;\n  inset: 0;\n  z-index: 80;\n  height: auto;\n  background: transparent;\n  pointer-events: none;\n}\n\n.mailharbor-portal .mailharbor-modal-mask {\n  pointer-events: auto;\n}\n\n.mailharbor-modal-mask {\n  position: fixed;\n  inset: 0;\n  z-index: 60;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n  background: rgba(0, 0, 0, 0.55);\n  backdrop-filter: blur(2px);\n}\n\n.mailharbor-modal {\n  display: flex;\n  flex-direction: column;\n  width: min(720px, 100%);\n  max-height: 86vh;\n  overflow: hidden;\n  border: 1px solid var(--m-line);\n  border-radius: 14px;\n  background: var(--m-bg-1);\n  color: var(--m-text);\n  box-shadow: var(--m-shadow);\n}\n\n.mailharbor-modal > header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: 52px;\n  padding: 0 14px 0 18px;\n  border-bottom: 1px solid var(--m-line-soft);\n  font-size: 14px;\n  font-weight: 600;\n}\n\n.mailharbor-modal .content {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 18px;\n  overflow: auto;\n}\n\n.mailharbor-modal > footer {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 18px;\n  border-top: 1px solid var(--m-line-soft);\n}\n\n.mailharbor-field {\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  min-width: 0;\n}\n\n.mailharbor-field > label {\n  font-size: 11.5px;\n  color: var(--m-text-3);\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 90px auto;\n  align-items: end;\n}\n\n.mailharbor-toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  color: var(--m-text-2);\n  font-size: 12.5px;\n  cursor: pointer;\n  white-space: nowrap;\n}\n\n.mailharbor-toggle input[type='checkbox'] {\n  width: 14px;\n  height: 14px;\n  accent-color: var(--m-accent);\n}\n\n/* ---------- composer ---------- */\n\n.mailharbor-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  flex-wrap: wrap;\n  padding: 6px;\n  border: 1px solid var(--m-line-soft);\n  border-bottom: 0;\n  border-radius: 10px 10px 0 0;\n  background: var(--m-bg-2);\n}\n\n.mailharbor-toolbar button {\n  height: 26px;\n  padding: 0 9px;\n  border-radius: 6px;\n  color: var(--m-text-2);\n  font-size: 12px;\n}\n\n.mailharbor-toolbar button:hover {\n  background: var(--m-bg-3);\n  color: var(--m-text);\n}\n\n.mailharbor-editor {\n  min-height: 240px;\n  max-height: 44vh;\n  overflow: auto;\n  padding: 14px 16px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 0 0 10px 10px;\n  background: #fff;\n  color: #171a21;\n  outline: none;\n  font-size: 13.5px;\n  line-height: 1.7;\n}\n\n.mailharbor-editor:empty::before {\n  content: attr(data-placeholder);\n  color: #9aa0ab;\n}\n\n/* ---------- settings ---------- */\n\n.mailharbor-settings {\n  padding: 20px 24px 48px;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  max-width: 880px;\n}\n\n.mailharbor-settings h2 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  letter-spacing: -0.01em;\n}\n\n.mailharbor-settings h3 {\n  margin: 0;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--m-text-3);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n}\n\n.mailharbor-card {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 16px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 12px;\n  background: var(--m-bg-1);\n}\n\n.mailharbor-account-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.mailharbor-account-row .meta {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.mailharbor-account-row .meta strong {\n  font-weight: 600;\n}\n\n.mailharbor-account-row .meta span {\n  color: var(--m-text-3);\n  font-size: 11.5px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.mailharbor .avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  border-radius: 50%;\n  background: var(--m-accent-soft);\n  color: var(--m-accent);\n  font-weight: 600;\n}\n\n.mailharbor-log {\n  padding: 10px 12px;\n  border-radius: 8px;\n  background: var(--m-bg);\n  border: 1px solid var(--m-line-soft);\n  color: var(--m-text-2);\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: 11px;\n  line-height: 1.6;\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, 170px) 1fr;\n  gap: 6px 14px;\n  font-size: 12px;\n  margin: 0;\n}\n\n.mailharbor-kv dt {\n  color: var(--m-text-3);\n}\n\n.mailharbor-kv dd {\n  margin: 0;\n  color: var(--m-text-2);\n  word-break: break-all;\n}\n\n.mailharbor hr {\n  border: 0;\n  border-top: 1px solid var(--m-line-soft);\n  margin: 2px 0;\n}\n";
 
 // src/client/icon.tsx
 var import_react = require("react");
@@ -163,16 +163,24 @@ function MailIcon() {
   return (0, import_react.createElement)(
     "span",
     {
-      style: { position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center" }
+      style: {
+        position: "relative",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "18px",
+        height: "18px",
+        boxSizing: "border-box"
+      }
     },
     (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 }),
+      { width: 16, height: 16, 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.7 }),
       (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,
+        strokeWidth: 1.7,
         strokeLinecap: "round"
       })
     ),
@@ -181,18 +189,26 @@ function MailIcon() {
       {
         style: {
           position: "absolute",
-          top: "-4px",
-          right: "-6px",
-          minWidth: "14px",
-          height: "14px",
+          right: "-5px",
+          bottom: "-3px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          boxSizing: "border-box",
+          minWidth: "13px",
+          height: "13px",
           padding: "0 3px",
           borderRadius: "999px",
-          background: "var(--dsw-alias-brand-primary, #4d6bfe)",
+          background: "#5686fe",
           color: "#fff",
           fontSize: "9px",
-          lineHeight: "14px",
-          textAlign: "center",
-          fontWeight: 600
+          fontWeight: 600,
+          lineHeight: "13px",
+          zIndex: 1,
+          letterSpacing: "-0.01em",
+          fontVariantNumeric: "tabular-nums",
+          boxShadow: "0 0 0 2px var(--dsw-alias-bg-base, #151517)",
+          pointerEvents: "none"
         }
       },
       unread > 99 ? "99+" : String(unread)
@@ -201,7 +217,7 @@ function MailIcon() {
 }
 
 // src/client/panel.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/client/account-form.tsx
 var import_react3 = require("react");
@@ -256,6 +272,15 @@ function Toggle({
     label
   );
 }
+function portalRoot() {
+  const existing = document.getElementById("mailharbor-portal");
+  if (existing !== null) return existing;
+  const element = document.createElement("div");
+  element.id = "mailharbor-portal";
+  element.className = "mailharbor mailharbor-portal";
+  document.body.append(element);
+  return element;
+}
 function Modal({
   title,
   children,
@@ -301,7 +326,7 @@ function Modal({
         footer === void 0 ? null : (0, import_react2.createElement)("footer", null, footer)
       )
     ),
-    document.body
+    portalRoot()
   );
 }
 function ErrorBar({ message, onDismiss }) {
@@ -837,13 +862,68 @@ function Composer({
   );
 }
 
-// src/client/reader.tsx
+// src/client/icons.tsx
 var import_react5 = require("react");
+var PATHS = {
+  refresh: (0, import_react5.createElement)("path", { d: "M20 11a8 8 0 1 0-2.3 5.7M20 5v6h-6" }),
+  plus: (0, import_react5.createElement)("path", { d: "M12 5v14M5 12h14" }),
+  compose: (0, import_react5.createElement)("path", { d: "M4 20h4l10.5-10.5a2.1 2.1 0 0 0-3-3L5 17v3zM13.5 6.5l3 3" }),
+  archive: (0, import_react5.createElement)(
+    "g",
+    null,
+    (0, import_react5.createElement)("rect", { x: 3, y: 4, width: 18, height: 5, rx: 1.5 }),
+    (0, import_react5.createElement)("path", { d: "M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4" })
+  ),
+  paperclip: (0, import_react5.createElement)("path", {
+    d: "M20 11.5 12 19.5a5 5 0 0 1-7-7l8-8a3.3 3.3 0 0 1 4.7 4.7l-8 8a1.7 1.7 0 0 1-2.4-2.4l7.3-7.3"
+  }),
+  mail: (0, import_react5.createElement)(
+    "g",
+    null,
+    (0, import_react5.createElement)("rect", { x: 3, y: 5, width: 18, height: 14, rx: 2.5 }),
+    (0, import_react5.createElement)("path", { d: "m4 7 7.1 5a1.6 1.6 0 0 0 1.8 0L20 7" })
+  ),
+  search: (0, import_react5.createElement)("path", { d: "M11 18a7 7 0 1 0 0-14 7 7 0 0 0 0 14zM20 20l-4-4" }),
+  reply: (0, import_react5.createElement)("path", { d: "M9 7 4 12l5 5M4 12h9a6 6 0 0 1 6 6v1" }),
+  replyAll: (0, import_react5.createElement)("path", { d: "m9 7-5 5 5 5M14 7l-5 5 5 5M13 12h5a5 5 0 0 1 5 5" }),
+  forward: (0, import_react5.createElement)("path", { d: "m15 7 5 5-5 5M20 12h-9a6 6 0 0 0-6 6v1" }),
+  check: (0, import_react5.createElement)("path", { d: "m5 13 4 4L19 7" }),
+  image: (0, import_react5.createElement)(
+    "g",
+    null,
+    (0, import_react5.createElement)("rect", { x: 3, y: 4, width: 18, height: 16, rx: 2 }),
+    (0, import_react5.createElement)("circle", { cx: 8.5, cy: 9.5, r: 1.5 }),
+    (0, import_react5.createElement)("path", { d: "m4 18 5-5 4 4 3-3 4 4" })
+  ),
+  close: (0, import_react5.createElement)("path", { d: "M6 6l12 12M18 6 6 18" }),
+  chevronLeft: (0, import_react5.createElement)("path", { d: "m14 6-6 6 6 6" })
+};
+function Icon({ name, size = 16 }) {
+  return (0, import_react5.createElement)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.7,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false"
+    },
+    PATHS[name] ?? null
+  );
+}
+
+// src/client/reader.tsx
+var import_react6 = 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;
+    font: 15px/1.75 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+    color: #171a21; background: #fff; padding: 20px 22px;
     overflow-wrap: anywhere;
   }
   img { max-width: 100%; height: auto; }
@@ -873,6 +953,9 @@ function escapeHtml(value) {
 function hasRemoteImages(detail) {
   return detail.html !== null && /<img[^>]+src=["']https?:/i.test(detail.html);
 }
+function addressLine(list) {
+  return list.map((item) => item.name !== "" ? `${item.name} <${item.address}>` : item.address).join("\u3001");
+}
 function Reader({
   detail,
   account,
@@ -882,11 +965,11 @@ function Reader({
   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 [plain, setPlain] = (0, import_react6.useState)(false);
+  const [loadImages, setLoadImages] = (0, import_react6.useState)(false);
+  const [busy, setBusy] = (0, import_react6.useState)(false);
+  const [error, setError] = (0, import_react6.useState)("");
+  const remoteImages = (0, import_react6.useMemo)(() => hasRemoteImages(detail), [detail]);
   const html = detail.html !== null && detail.html !== "";
   const toggleRead = async () => {
     setBusy(true);
@@ -906,102 +989,103 @@ function Reader({
       setBusy(false);
     }
   };
-  return (0, import_react5.createElement)(
+  return (0, import_react6.createElement)(
     "div",
     { className: "mailharbor-reader" },
-    (0, import_react5.createElement)(
+    (0, import_react6.createElement)(
       "div",
       { className: "mailharbor-reader-head" },
-      (0, import_react5.createElement)(
+      (0, import_react6.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")
+        { className: "mailharbor-reader-title" },
+        onClose === void 0 ? null : (0, import_react6.createElement)(
+          "button",
+          { className: "ghost icon", onClick: onClose, "aria-label": "\u8FD4\u56DE\u5217\u8868", title: "\u8FD4\u56DE\u5217\u8868" },
+          (0, import_react6.createElement)(Icon, { name: "chevronLeft" })
+        ),
+        (0, import_react6.createElement)("h2", { style: { flex: 1 } }, detail.subject),
+        (0, import_react6.createElement)(
+          "button",
+          {
+            className: "ghost icon",
+            onClick: () => void toggleRead(),
+            disabled: busy,
+            title: detail.unread ? "\u6807\u4E3A\u5DF2\u8BFB" : "\u6807\u4E3A\u672A\u8BFB",
+            "aria-label": detail.unread ? "\u6807\u4E3A\u5DF2\u8BFB" : "\u6807\u4E3A\u672A\u8BFB"
+          },
+          (0, import_react6.createElement)(Icon, { name: "check" })
+        )
       ),
-      (0, import_react5.createElement)(
+      (0, import_react6.createElement)(
         "div",
         { className: "mailharbor-reader-meta" },
-        (0, import_react5.createElement)(
+        (0, import_react6.createElement)(
           "span",
-          null,
-          `${detail.from.name !== "" ? detail.from.name : detail.from.address} <${detail.from.address}>`
+          { className: "who" },
+          (0, import_react6.createElement)(Avatar, { email: detail.from.address, size: 22 }),
+          (0, import_react6.createElement)("strong", null, detail.from.name !== "" ? detail.from.name : detail.from.address),
+          detail.from.name !== "" ? (0, import_react6.createElement)("span", null, `<${detail.from.address}>`) : null
         ),
-        (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_react6.createElement)("span", null, longDate(detail.date)),
+        detail.backedUp === false ? (0, import_react6.createElement)("span", { className: "badge warn" }, "\u672A\u5907\u4EFD") : null
       ),
-      (0, import_react5.createElement)(
+      (0, import_react6.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_react6.createElement)("span", null, `\u6536\u4EF6\u4EBA: ${addressLine(detail.to) || "\u2014"}`),
+        detail.cc.length === 0 ? null : (0, import_react6.createElement)("span", null, `\u6284\u9001: ${addressLine(detail.cc)}`)
       ),
-      (0, import_react5.createElement)(
+      (0, import_react6.createElement)(
         "div",
         { className: "mailharbor-reader-actions" },
-        (0, import_react5.createElement)(
+        (0, import_react6.createElement)(
           "button",
-          {
-            className: "primary",
-            onClick: () => {
-              onReply("reply");
-            }
-          },
+          { className: "ghost", onClick: () => onReply("reply") },
+          (0, import_react6.createElement)(Icon, { name: "reply" }),
           "\u56DE\u590D"
         ),
-        (0, import_react5.createElement)(
+        (0, import_react6.createElement)(
           "button",
-          {
-            className: "ghost",
-            onClick: () => {
-              onReply("replyAll");
-            }
-          },
+          { className: "ghost", onClick: () => onReply("replyAll") },
+          (0, import_react6.createElement)(Icon, { name: "replyAll" }),
           "\u5168\u90E8\u56DE\u590D"
         ),
-        (0, import_react5.createElement)(
+        (0, import_react6.createElement)(
           "button",
-          {
-            className: "ghost",
-            onClick: () => {
-              onReply("forward");
-            }
-          },
+          { className: "ghost", onClick: () => onReply("forward") },
+          (0, import_react6.createElement)(Icon, { name: "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)(
+        (0, import_react6.createElement)("span", { className: "spacer" }),
+        html ? (0, import_react6.createElement)(
           "button",
-          { className: "ghost", onClick: () => setPlain(!plain) },
-          plain ? "\u663E\u793A HTML" : "\u663E\u793A\u7EAF\u6587\u672C"
+          { className: "subtle", onClick: () => setPlain(!plain) },
+          plain ? "\u663E\u793A HTML" : "\u7EAF\u6587\u672C"
         ) : null,
-        remoteImages && !loadImages ? (0, import_react5.createElement)("button", { className: "ghost", onClick: () => setLoadImages(true) }, "\u663E\u793A\u8FDC\u7A0B\u56FE\u7247") : null
+        remoteImages && !loadImages ? (0, import_react6.createElement)(
+          "button",
+          { className: "subtle", onClick: () => setLoadImages(true) },
+          (0, import_react6.createElement)(Icon, { name: "image", size: 14 }),
+          "\u663E\u793A\u56FE\u7247"
+        ) : null
       ),
-      error === "" ? null : (0, import_react5.createElement)("div", { className: "small", style: { color: "var(--m-danger)" } }, error)
+      error === "" ? null : (0, import_react6.createElement)("div", { className: "small", style: { color: "var(--m-danger)" } }, error)
     ),
-    (0, import_react5.createElement)(
+    (0, import_react6.createElement)(
       "div",
       { className: "mailharbor-reader-body" },
-      html && !plain ? (0, import_react5.createElement)("iframe", {
+      html && !plain ? (0, import_react6.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")
+      }) : (0, import_react6.createElement)("pre", null, detail.text !== "" ? detail.text : "\uFF08\u65E0\u6B63\u6587\uFF09")
     ),
-    detail.attachments.length === 0 ? null : (0, import_react5.createElement)(
+    detail.attachments.length === 0 ? null : (0, import_react6.createElement)(
       "div",
       { className: "mailharbor-attachments" },
       detail.attachments.map(
-        (file) => (0, import_react5.createElement)(
+        (file) => (0, import_react6.createElement)(
           "a",
           {
             className: "mailharbor-attachment",
@@ -1018,10 +1102,12 @@ function Reader({
               emailId: detail.id,
               attachmentId: file.id
             }),
-            download: file.filename
+            download: file.filename,
+            title: file.filename
           },
-          (0, import_react5.createElement)("span", { className: "name" }, file.filename),
-          (0, import_react5.createElement)("span", { className: "muted small" }, formatBytes(file.size))
+          (0, import_react6.createElement)(Icon, { name: "paperclip", size: 14 }),
+          (0, import_react6.createElement)("span", { className: "name" }, file.filename),
+          (0, import_react6.createElement)("span", { className: "muted small" }, formatBytes(file.size))
         )
       )
     )
@@ -1033,44 +1119,50 @@ 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 matchesNarrow() {
+  return typeof window.matchMedia === "function" ? window.matchMedia("(max-width: 900px)").matches : false;
+}
 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 [state, setState] = (0, import_react7.useState)(null);
+  const [error, setError] = (0, import_react7.useState)("");
+  const [source, setSource] = (0, import_react7.useState)("local");
+  const [mailbox, setMailbox] = (0, import_react7.useState)("all");
+  const [folders, setFolders] = (0, import_react7.useState)([]);
+  const [query2, setQuery] = (0, import_react7.useState)("");
+  const [search, setSearch] = (0, import_react7.useState)("");
+  const [page, setPage] = (0, import_react7.useState)(EMPTY_PAGE);
+  const [limit, setLimit] = (0, import_react7.useState)(40);
+  const [loading, setLoading] = (0, import_react7.useState)(false);
+  const [selected, setSelected] = (0, import_react7.useState)(null);
+  const [compose, setCompose] = (0, import_react7.useState)(null);
+  const [showAdd, setShowAdd] = (0, import_react7.useState)(false);
+  const [showBackup, setShowBackup] = (0, import_react7.useState)(false);
+  const [backup, setBackup] = (0, import_react7.useState)(null);
+  const [toast, setToast] = (0, import_react7.useState)("");
+  const [narrow, setNarrow] = (0, import_react7.useState)(() => matchesNarrow());
+  const [tick, setTick] = (0, import_react7.useState)(0);
   const account = state?.accounts.find((item) => item.id === state.activeAccountId) ?? null;
   const accountId = account?.id ?? null;
-  const refresh = (0, import_react6.useCallback)(() => {
+  const refresh = (0, import_react7.useCallback)(() => {
     setTick((value) => value + 1);
   }, []);
-  const notice = (0, import_react6.useCallback)((message) => {
+  const notice = (0, import_react7.useCallback)((message) => {
     setToast(message);
     window.setTimeout(() => {
       setToast("");
     }, 3200);
   }, []);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     let cancelled = false;
     api.state().then((next) => {
-      if (!cancelled) setState(next);
+      if (!cancelled) {
+        setState(next);
+        if (next.settings.render.listLimit > 0) setLimit(next.settings.render.listLimit);
+      }
     }).catch((caught) => {
       if (!cancelled) setError(errorText3(caught));
     });
@@ -1078,12 +1170,12 @@ function MailPanel() {
       cancelled = true;
     };
   }, [tick]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (accountId === null) return;
     let cancelled = false;
     api.folders({ accountId, source }).then((result) => {
       if (cancelled) return;
-      const items = source === "local" ? [
+      const items2 = source === "local" ? [
         {
           name: "all",
           label: "\u5168\u90E8\u90AE\u4EF6",
@@ -1091,7 +1183,7 @@ function MailPanel() {
         },
         ...result.items.map((item) => ({ ...item, label: item.label ?? item.name }))
       ] : result.items.map((item) => ({ ...item, label: item.label ?? item.name }));
-      setFolders(items);
+      setFolders(items2);
     }).catch(() => {
       if (!cancelled) setFolders([]);
     });
@@ -1099,12 +1191,11 @@ function MailPanel() {
       cancelled = true;
     };
   }, [accountId, source, tick]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     setMailbox(source === "local" ? "all" : "INBOX");
     setSelected(null);
-    setLimit(state?.settings.render.listLimit ?? 40);
   }, [source]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (accountId === null) return;
     let cancelled = false;
     setLoading(true);
@@ -1119,7 +1210,8 @@ function MailPanel() {
       cancelled = true;
     };
   }, [accountId, source, mailbox, search, limit, tick]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
+    if (typeof window.matchMedia !== "function") return;
     const media = window.matchMedia("(max-width: 900px)");
     const onChange = () => setNarrow(media.matches);
     media.addEventListener("change", onChange);
@@ -1127,7 +1219,7 @@ function MailPanel() {
       media.removeEventListener("change", onChange);
     };
   }, []);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!showBackup || accountId === null) return;
     let cancelled = false;
     const poll = async () => {
@@ -1228,32 +1320,35 @@ function MailPanel() {
       setError(errorText3(caught));
     }
   };
-  const folderOptions = (0, import_react6.useMemo)(
+  const folderOptions = (0, import_react7.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);
+    return (0, import_react7.createElement)(
+      "div",
+      { className: "mailharbor" },
+      (0, import_react7.createElement)("div", { className: "mailharbor-empty" }, error === "" ? "\u6B63\u5728\u52A0\u8F7D\u90AE\u7BB1\u2026" : error)
+    );
   }
   if (account === null) {
-    return (0, import_react6.createElement)(
+    return (0, import_react7.createElement)(
       "div",
       { className: "mailharbor" },
-      (0, import_react6.createElement)(
+      (0, import_react7.createElement)(
         "div",
         { className: "mailharbor-settings" },
-        (0, import_react6.createElement)("h2", null, "\u6B22\u8FCE\u4F7F\u7528 MailHarbor"),
-        (0, import_react6.createElement)(
+        (0, import_react7.createElement)("h2", null, "\u6B22\u8FCE\u4F7F\u7528 MailHarbor"),
+        (0, import_react7.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"
+          "\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\u4E0E Agent \u5DE5\u5177\u3002"
         ),
-        error === "" ? null : (0, import_react6.createElement)("div", { className: "small", style: { color: "var(--m-danger)" } }, error),
-        (0, import_react6.createElement)(AddAccountForm, {
+        error === "" ? null : (0, import_react7.createElement)("div", { className: "small", style: { color: "var(--m-danger)" } }, error),
+        (0, import_react7.createElement)(AddAccountForm, {
           onDone: (next) => {
             setState(next);
             setSource("local");
@@ -1263,64 +1358,83 @@ function MailPanel() {
     );
   }
   const needsLogin = source === "server" && state.loggedIn === false;
-  return (0, import_react6.createElement)(
+  const items = page.items;
+  return (0, import_react7.createElement)(
     "div",
     { className: narrow ? "mailharbor mailharbor-narrow" : "mailharbor" },
-    (0, import_react6.createElement)(
+    (0, import_react7.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)(
+      (0, import_react7.createElement)(
+        "div",
+        { className: "mailharbor-account" },
+        (0, import_react7.createElement)(Avatar, { email: account.email, size: 26 }),
+        state.accounts.length > 1 ? (0, import_react7.createElement)(
+          "select",
+          {
+            value: account.id,
+            onChange: (event) => void switchAccount(event.target.value),
+            "aria-label": "\u8D26\u53F7"
+          },
+          state.accounts.map((item) => (0, import_react7.createElement)("option", { key: item.id, value: item.id }, item.label))
+        ) : (0, import_react7.createElement)("span", { className: "name" }, account.label),
+        state.loggedIn === false ? (0, import_react7.createElement)("span", { className: "badge warn" }, "\u672A\u767B\u5F55") : null
+      ),
+      (0, import_react7.createElement)(
         "div",
         { className: "mailharbor-segment", role: "tablist" },
-        (0, import_react6.createElement)(
+        (0, import_react7.createElement)(
           "button",
           { className: source === "local" ? "active" : "", onClick: () => setSource("local"), role: "tab" },
           "\u672C\u5730\u5907\u4EFD"
         ),
-        (0, import_react6.createElement)(
+        (0, import_react7.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)(
+      (0, import_react7.createElement)("span", { className: "spacer" }),
+      (0, import_react7.createElement)(
         "button",
         {
-          className: "ghost",
-          onClick: () => {
-            refresh();
-          }
+          className: "ghost icon",
+          title: "\u6DFB\u52A0\u8D26\u53F7",
+          "aria-label": "\u6DFB\u52A0\u8D26\u53F7",
+          onClick: () => setShowAdd(true)
         },
-        "\u5237\u65B0"
+        (0, import_react7.createElement)(Icon, { name: "plus" })
+      ),
+      (0, import_react7.createElement)(
+        "button",
+        { className: "ghost icon", title: "\u5237\u65B0\u5217\u8868", "aria-label": "\u5237\u65B0\u5217\u8868", onClick: refresh },
+        (0, import_react7.createElement)(Icon, { name: "refresh" })
+      ),
+      (0, import_react7.createElement)(
+        "button",
+        { className: "ghost", onClick: () => void startBackup() },
+        (0, import_react7.createElement)(Icon, { name: "archive" }),
+        "\u5907\u4EFD"
+      ),
+      (0, import_react7.createElement)(
+        "button",
+        { className: "primary", onClick: () => startCompose("new") },
+        (0, import_react7.createElement)(Icon, { name: "compose" }),
+        "\u5199\u90AE\u4EF6"
       )
     ),
-    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)(
+    toast === "" ? null : (0, import_react7.createElement)("div", { className: "small", style: { padding: "6px 14px", color: "var(--m-ok)" } }, toast),
+    error === "" ? null : (0, import_react7.createElement)(ErrorBar, { message: error, onDismiss: () => setError("") }),
+    needsLogin ? (0, import_react7.createElement)("div", { className: "mailharbor-settings" }, (0, import_react7.createElement)(LoginForm, { account, onDone: refresh })) : (0, import_react7.createElement)(
       "div",
       { className: "mailharbor-body", "data-mode": narrow && selected !== null ? "reader" : "list" },
-      (0, import_react6.createElement)(
+      (0, import_react7.createElement)(
         "div",
         { className: "mailharbor-list" },
-        (0, import_react6.createElement)(
+        (0, import_react7.createElement)(
           "div",
           { className: "mailharbor-filters" },
-          (0, import_react6.createElement)(
+          (0, import_react7.createElement)(
             "select",
             {
               value: mailbox,
@@ -1331,12 +1445,13 @@ function MailPanel() {
               "aria-label": "\u90AE\u7BB1\u6587\u4EF6\u5939"
             },
             folderOptions.map(
-              (option) => (0, import_react6.createElement)("option", { key: option.value, value: option.value }, option.label)
+              (option) => (0, import_react7.createElement)("option", { key: option.value, value: option.value }, option.label)
             )
           ),
-          (0, import_react6.createElement)("input", {
+          (0, import_react7.createElement)("input", {
             type: "search",
             placeholder: "\u641C\u7D22\u90AE\u4EF6",
+            "aria-label": "\u641C\u7D22\u90AE\u4EF6",
             value: query2,
             onChange: (event) => setQuery(event.target.value),
             onKeyDown: (event) => {
@@ -1347,78 +1462,96 @@ function MailPanel() {
               }
             }
           }),
-          query2 !== search || search !== "" ? (0, import_react6.createElement)(
+          query2 !== search || search !== "" ? (0, import_react7.createElement)(
             "button",
             {
-              className: "subtle small",
+              className: "subtle",
+              title: "\u6E05\u9664\u641C\u7D22",
               onClick: () => {
                 setQuery("");
                 setSearch("");
               }
             },
-            "\u6E05\u9664"
+            (0, import_react7.createElement)(Icon, { name: "close", size: 14 })
           ) : null
         ),
-        (0, import_react6.createElement)(
+        (0, import_react7.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)(
+          loading && items.length === 0 ? (0, import_react7.createElement)("div", { className: "mailharbor-empty" }, "\u6B63\u5728\u8BFB\u53D6\u2026") : items.length === 0 ? (0, import_react7.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",
+            (0, import_react7.createElement)(Icon, { name: "mail", size: 28 }),
+            (0, import_react7.createElement)(
+              "div",
+              { className: "title" },
+              source === "local" ? "\u672C\u5730\u5907\u4EFD\u91CC\u8FD8\u6CA1\u6709\u90AE\u4EF6" : "\u670D\u52A1\u5668\u4E0A\u6CA1\u6709\u90AE\u4EF6"
+            ),
+            (0, import_react7.createElement)(
+              "div",
+              { className: "small" },
+              source === "local" ? "\u70B9\u9876\u90E8\u300C\u5907\u4EFD\u300D\u628A\u670D\u52A1\u5668\u90AE\u4EF6\u540C\u6B65\u4E0B\u6765\u3002" : "\u6362\u4E00\u4E2A\u6587\u4EF6\u5939\u6216\u7A0D\u540E\u5237\u65B0\u3002"
+            )
+          ) : items.map(
+            (item) => (0, import_react7.createElement)(
+              "div",
               {
                 key: item.id,
                 className: `mailharbor-row${item.unread ? " unread" : ""}${selected?.id === item.id ? " selected" : ""}`,
-                onClick: () => void openMessage(item)
+                role: "button",
+                tabIndex: 0,
+                onClick: () => void openMessage(item),
+                onKeyDown: (event) => {
+                  if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    void openMessage(item);
+                  }
+                }
               },
-              (0, import_react6.createElement)(
+              (0, import_react7.createElement)(
                 "span",
                 { className: "line-1" },
-                (0, import_react6.createElement)(
+                item.unread ? (0, import_react7.createElement)("span", { className: "dot" }) : null,
+                (0, import_react7.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))
+                item.hasAttachments ? (0, import_react7.createElement)(Icon, { name: "paperclip", size: 13 }) : null,
+                item.backedUp === false ? (0, import_react7.createElement)("span", { className: "badge warn" }, "\u672A\u5907\u4EFD") : null,
+                (0, import_react7.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)
+              (0, import_react7.createElement)("span", { className: "line-2" }, (0, import_react7.createElement)("span", { className: "subject" }, item.subject)),
+              item.snippet === "" ? null : (0, import_react7.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
+          )
+        ),
+        items.length > 0 ? (0, import_react7.createElement)(
+          "div",
+          { className: "mailharbor-list-foot" },
+          (0, import_react7.createElement)("span", null, `${String(items.length)} / ${String(page.total)} \u5C01`),
+          (0, import_react7.createElement)("span", { className: "spacer" }),
+          page.total > items.length ? (0, import_react7.createElement)(
+            "button",
+            { className: "subtle", onClick: () => setLimit((current) => current + 40) },
+            "\u52A0\u8F7D\u66F4\u591A"
           ) : null
-        )
+        ) : null
       ),
-      (0, import_react6.createElement)(
+      (0, import_react7.createElement)(
         "div",
         { className: "mailharbor-reader" },
-        selected === null ? (0, import_react6.createElement)(
+        selected === null ? (0, import_react7.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",
+          (0, import_react7.createElement)(Icon, { name: "mail", size: 34 }),
+          (0, import_react7.createElement)("div", { className: "title" }, "\u9009\u62E9\u4E00\u5C01\u90AE\u4EF6\u5F00\u59CB\u9605\u8BFB"),
+          (0, import_react7.createElement)(
+            "div",
             { 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, {
+        ) : (0, import_react7.createElement)(Reader, {
           detail: selected,
           account,
           source,
@@ -1429,45 +1562,45 @@ function MailPanel() {
         })
       )
     ),
-    showBackup && backup !== null ? (0, import_react6.createElement)(
+    showBackup && backup !== null ? (0, import_react7.createElement)(
       Modal,
       {
         title: "\u5907\u4EFD",
         onClose: () => setShowBackup(false),
-        footer: (0, import_react6.createElement)(
+        footer: (0, import_react7.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_react7.createElement)("span", { className: "small muted" }, backup.running ? "\u5907\u4EFD\u8FDB\u884C\u4E2D\u2026" : backup.message),
+          (0, import_react7.createElement)("span", { className: "spacer" }),
+          backup.running ? (0, import_react7.createElement)("button", { className: "ghost danger", onClick: () => void stopBackup() }, "\u505C\u6B62\u5907\u4EFD") : (0, import_react7.createElement)("button", { className: "primary", onClick: () => void startBackup() }, "\u5F00\u59CB\u5907\u4EFD"),
+          (0, import_react7.createElement)("button", { className: "ghost", onClick: () => setShowBackup(false) }, "\u5173\u95ED")
         )
       },
-      (0, import_react6.createElement)(
+      (0, import_react7.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_react7.createElement)("dt", null, "\u5F00\u59CB\u65F6\u95F4"),
+        (0, import_react7.createElement)("dd", null, backup.startedAt ?? "\u2014"),
+        (0, import_react7.createElement)("dt", null, "\u4E0A\u6B21\u6210\u529F"),
+        (0, import_react7.createElement)("dd", null, backup.lastSuccessAt ?? "\u2014"),
+        (0, import_react7.createElement)("dt", null, "\u65B0\u589E"),
+        (0, import_react7.createElement)("dd", null, String(backup.added)),
+        (0, import_react7.createElement)("dt", null, "\u603B\u6570"),
+        (0, import_react7.createElement)("dd", null, String(backup.total))
       ),
-      (0, import_react6.createElement)(
+      (0, import_react7.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, {
+    compose !== null ? (0, import_react7.createElement)(Composer, {
       account,
       initial: compose,
       onClose: () => setCompose(null),
       onSent: (message) => notice(message)
     }) : null,
-    showAdd ? (0, import_react6.createElement)(AddAccountModal, {
+    showAdd ? (0, import_react7.createElement)(AddAccountModal, {
       onClose: () => setShowAdd(false),
       onDone: (next) => {
         setState(next);
@@ -1478,27 +1611,27 @@ function MailPanel() {
 }
 
 // src/client/settings.tsx
-var import_react7 = require("react");
+var import_react8 = 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)(() => {
+  const [state, setState] = (0, import_react8.useState)(null);
+  const [settings, setSettings] = (0, import_react8.useState)(null);
+  const [error, setError] = (0, import_react8.useState)("");
+  const [toast, setToast] = (0, import_react8.useState)("");
+  const [signature, setSignature] = (0, import_react8.useState)("");
+  const [markOnOpen, setMarkOnOpen] = (0, import_react8.useState)(true);
+  const [pollSeconds, setPollSeconds] = (0, import_react8.useState)(60);
+  const [listLimit, setListLimit] = (0, import_react8.useState)(40);
+  const [aiEnabled, setAiEnabled] = (0, import_react8.useState)(true);
+  const [aiProvider, setAiProvider] = (0, import_react8.useState)("deepseek-account");
+  const [aiModel, setAiModel] = (0, import_react8.useState)("deepseek-flash");
+  const [editing, setEditing] = (0, import_react8.useState)(null);
+  const [checkResult, setCheckResult] = (0, import_react8.useState)("");
+  const [adding, setAdding] = (0, import_react8.useState)(false);
+  const [tick, setTick] = (0, import_react8.useState)(0);
+  (0, import_react8.useEffect)(() => {
     let cancelled = false;
     Promise.all([api.state(), api.settings()]).then(([appState, view]) => {
       if (cancelled) return;
@@ -1536,24 +1669,24 @@ function MailSettings() {
   };
   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_react8.createElement)("div", { className: "mailharbor mailharbor-settings" }, error === "" ? "\u6B63\u5728\u52A0\u8F7D\u8BBE\u7F6E\u2026" : error);
   }
-  return (0, import_react7.createElement)(
+  return (0, import_react8.createElement)(
     "div",
     { className: "mailharbor" },
-    (0, import_react7.createElement)(
+    (0, import_react8.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)(
+      (0, import_react8.createElement)("h2", null, "MailHarbor"),
+      (0, import_react8.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_react8.createElement)("div", { className: "small", style: { color: "var(--m-ok)" } }, toast),
+      error === "" ? null : (0, import_react8.createElement)(ErrorBar, { message: error, onDismiss: () => setError("") }),
+      (0, import_react8.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, {
+        (0, import_react8.createElement)("h3", null, "\u8D26\u53F7"),
+        settings.accounts.length === 0 ? (0, import_react8.createElement)(AddAccountForm, { onDone: () => reload() }) : settings.accounts.map(
+          (item) => (0, import_react8.createElement)(AccountRow, {
             key: item.id,
             account: item,
             active: item.id === settings.activeAccountId,
@@ -1597,32 +1730,32 @@ function MailSettings() {
             }
           })
         ),
-        adding ? (0, import_react7.createElement)(AddAccountForm, {
+        adding ? (0, import_react8.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_react8.createElement)("button", { className: "ghost", onClick: () => setAdding(true) }, "+ \u6DFB\u52A0\u8D26\u53F7")
       ),
-      (0, import_react7.createElement)(
+      (0, import_react8.createElement)(
         "div",
         { className: "mailharbor-card" },
-        (0, import_react7.createElement)("h3", null, "\u5199\u4FE1\u4E0E\u9605\u8BFB"),
-        (0, import_react7.createElement)(
+        (0, import_react8.createElement)("h3", null, "\u5199\u4FE1\u4E0E\u9605\u8BFB"),
+        (0, import_react8.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", {
+          (0, import_react8.createElement)("textarea", {
             rows: 4,
             value: signature,
             onChange: (event) => setSignature(event.target.value)
           })
         ),
-        (0, import_react7.createElement)(
+        (0, import_react8.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, {
+          (0, import_react8.createElement)("button", { className: "ghost", onClick: () => void saveGeneral({ signature }) }, "\u4FDD\u5B58\u7B7E\u540D"),
+          (0, import_react8.createElement)(Toggle, {
             checked: markOnOpen,
             onChange: (value) => {
               setMarkOnOpen(value);
@@ -1631,13 +1764,13 @@ function MailSettings() {
             label: "\u6253\u5F00\u90AE\u4EF6\u65F6\u6807\u4E3A\u5DF2\u8BFB"
           })
         ),
-        (0, import_react7.createElement)(
+        (0, import_react8.createElement)(
           "div",
           { className: "mailharbor-grid" },
-          (0, import_react7.createElement)(
+          (0, import_react8.createElement)(
             Field,
             { label: "\u5217\u8868\u6BCF\u9875\u6570\u91CF" },
-            (0, import_react7.createElement)("input", {
+            (0, import_react8.createElement)("input", {
               type: "number",
               min: 10,
               max: 200,
@@ -1646,10 +1779,10 @@ function MailSettings() {
               onBlur: () => void saveGeneral({ render: { listLimit } })
             })
           ),
-          (0, import_react7.createElement)(
+          (0, import_react8.createElement)(
             Field,
             { label: "\u672A\u8BFB\u89D2\u6807\u8F6E\u8BE2\uFF08\u79D2\uFF09" },
-            (0, import_react7.createElement)("input", {
+            (0, import_react8.createElement)("input", {
               type: "number",
               min: 15,
               max: 3600,
@@ -1660,11 +1793,11 @@ function MailSettings() {
           )
         )
       ),
-      (0, import_react7.createElement)(
+      (0, import_react8.createElement)(
         "div",
         { className: "mailharbor-card" },
-        (0, import_react7.createElement)("h3", null, "AI"),
-        (0, import_react7.createElement)(Toggle, {
+        (0, import_react8.createElement)("h3", null, "AI"),
+        (0, import_react8.createElement)(Toggle, {
           checked: aiEnabled,
           onChange: (value) => {
             setAiEnabled(value);
@@ -1672,54 +1805,54 @@ function MailSettings() {
           },
           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)(
+        (0, import_react8.createElement)(
           "div",
           { className: "mailharbor-grid" },
-          (0, import_react7.createElement)(
+          (0, import_react8.createElement)(
             Field,
             { label: "Provider" },
-            (0, import_react7.createElement)("input", {
+            (0, import_react8.createElement)("input", {
               value: aiProvider,
               onChange: (event) => setAiProvider(event.target.value),
               onBlur: () => void saveGeneral({ ai: { provider: aiProvider } })
             })
           ),
-          (0, import_react7.createElement)(
+          (0, import_react8.createElement)(
             Field,
             { label: "\u6A21\u578B" },
-            (0, import_react7.createElement)("input", {
+            (0, import_react8.createElement)("input", {
               value: aiModel,
               onChange: (event) => setAiModel(event.target.value),
               onBlur: () => void saveGeneral({ ai: { model: aiModel } })
             })
           )
         ),
-        (0, import_react7.createElement)(
+        (0, import_react8.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)(
+      (0, import_react8.createElement)(
         "div",
         { className: "mailharbor-card" },
-        (0, import_react7.createElement)("h3", null, "\u6570\u636E"),
-        (0, import_react7.createElement)(
+        (0, import_react8.createElement)("h3", null, "\u6570\u636E"),
+        (0, import_react8.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_react8.createElement)("dt", null, "\u6570\u636E\u76EE\u5F55"),
+          (0, import_react8.createElement)("dd", null, settings.dataDir),
+          (0, import_react8.createElement)("dt", null, "\u914D\u7F6E\u6587\u4EF6"),
+          (0, import_react8.createElement)("dd", null, settings.configFile),
+          (0, import_react8.createElement)("dt", null, "\u5F53\u524D\u8D26\u53F7\u6570\u636E\u5E93"),
+          (0, import_react8.createElement)("dd", null, account === null ? "\u2014" : `${settings.dataDir}/accounts/${account.id}/mail.db`),
+          (0, import_react8.createElement)("dt", null, "\u63D2\u4EF6\u7248\u672C"),
+          (0, import_react8.createElement)("dd", null, state.version)
         ),
-        (0, import_react7.createElement)(
+        (0, import_react8.createElement)(
           "div",
           { style: { display: "flex", gap: "8px", flexWrap: "wrap" } },
-          account === null ? null : (0, import_react7.createElement)(
+          account === null ? null : (0, import_react8.createElement)(
             "button",
             {
               className: "ghost",
@@ -1754,19 +1887,19 @@ function AccountRow({
   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)(() => {
+  const [password, setPassword] = (0, import_react8.useState)("");
+  const [remember, setRemember] = (0, import_react8.useState)(true);
+  const [label, setLabel] = (0, import_react8.useState)(account.label);
+  const [username, setUsername] = (0, import_react8.useState)(account.username);
+  const [imapHost, setImapHost] = (0, import_react8.useState)(account.imap.host);
+  const [imapPort, setImapPort] = (0, import_react8.useState)(String(account.imap.port));
+  const [imapSecure, setImapSecure] = (0, import_react8.useState)(account.imap.secure);
+  const [smtpHost, setSmtpHost] = (0, import_react8.useState)(account.smtp.host);
+  const [smtpPort, setSmtpPort] = (0, import_react8.useState)(String(account.smtp.port));
+  const [smtpSecure, setSmtpSecure] = (0, import_react8.useState)(account.smtp.secure);
+  const [fromName, setFromName] = (0, import_react8.useState)(account.smtp.fromName);
+  const [busy, setBusy] = (0, import_react8.useState)(false);
+  (0, import_react8.useEffect)(() => {
     setLabel(account.label);
     setUsername(account.username);
     setImapHost(account.imap.host);
@@ -1785,103 +1918,103 @@ function AccountRow({
       setBusy(false);
     }
   };
-  return (0, import_react7.createElement)(
+  return (0, import_react8.createElement)(
     "div",
     { className: "mailharbor-card", style: { background: "var(--m-bg-1)" } },
-    (0, import_react7.createElement)(
+    (0, import_react8.createElement)(
       "div",
       { className: "mailharbor-account-row" },
-      (0, import_react7.createElement)(Avatar, { email: account.email, size: 30 }),
-      (0, import_react7.createElement)(
+      (0, import_react8.createElement)(Avatar, { email: account.email, size: 30 }),
+      (0, import_react8.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)
+        (0, import_react8.createElement)("strong", null, account.label),
+        (0, import_react8.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")
+      active ? (0, import_react8.createElement)("span", { className: "badge ok" }, "\u5F53\u524D\u8D26\u53F7") : null,
+      loggedIn === false ? (0, import_react8.createElement)("span", { className: "badge warn" }, "\u672A\u767B\u5F55") : null,
+      (0, import_react8.createElement)("span", { className: "spacer" }),
+      active ? null : (0, import_react8.createElement)("button", { className: "ghost small", onClick: () => void wrap(onActivate) }, "\u8BBE\u4E3A\u5F53\u524D"),
+      (0, import_react8.createElement)("button", { className: "ghost small", onClick: () => void wrap(onCheck) }, "\u68C0\u67E5\u8FDE\u63A5"),
+      (0, import_react8.createElement)("button", { className: "ghost small", onClick: onToggleEdit }, editing ? "\u6536\u8D77" : "\u7F16\u8F91")
     ),
-    editing ? (0, import_react7.createElement)(
+    editing ? (0, import_react8.createElement)(
       "div",
       { style: { display: "flex", flexDirection: "column", gap: "10px" } },
-      (0, import_react7.createElement)(
+      (0, import_react8.createElement)(
         "div",
         { className: "mailharbor-grid" },
-        (0, import_react7.createElement)(
+        (0, import_react8.createElement)(
           Field,
           { label: "\u663E\u793A\u540D\u79F0" },
-          (0, import_react7.createElement)("input", {
+          (0, import_react8.createElement)("input", {
             value: label,
             onChange: (event) => setLabel(event.target.value)
           })
         ),
-        (0, import_react7.createElement)(
+        (0, import_react8.createElement)(
           Field,
           { label: "\u767B\u5F55\u7528\u6237\u540D" },
-          (0, import_react7.createElement)("input", {
+          (0, import_react8.createElement)("input", {
             value: username,
             onChange: (event) => setUsername(event.target.value)
           })
         )
       ),
-      (0, import_react7.createElement)(
+      (0, import_react8.createElement)(
         "div",
         { className: "mailharbor-grid three" },
-        (0, import_react7.createElement)(
+        (0, import_react8.createElement)(
           Field,
           { label: "IMAP \u4E3B\u673A" },
-          (0, import_react7.createElement)("input", {
+          (0, import_react8.createElement)("input", {
             value: imapHost,
             onChange: (event) => setImapHost(event.target.value)
           })
         ),
-        (0, import_react7.createElement)(
+        (0, import_react8.createElement)(
           Field,
           { label: "\u7AEF\u53E3" },
-          (0, import_react7.createElement)("input", {
+          (0, import_react8.createElement)("input", {
             value: imapPort,
             onChange: (event) => setImapPort(event.target.value)
           })
         ),
-        (0, import_react7.createElement)(Toggle, { checked: imapSecure, onChange: setImapSecure, label: "TLS" })
+        (0, import_react8.createElement)(Toggle, { checked: imapSecure, onChange: setImapSecure, label: "TLS" })
       ),
-      (0, import_react7.createElement)(
+      (0, import_react8.createElement)(
         "div",
         { className: "mailharbor-grid three" },
-        (0, import_react7.createElement)(
+        (0, import_react8.createElement)(
           Field,
           { label: "SMTP \u4E3B\u673A" },
-          (0, import_react7.createElement)("input", {
+          (0, import_react8.createElement)("input", {
             value: smtpHost,
             onChange: (event) => setSmtpHost(event.target.value)
           })
         ),
-        (0, import_react7.createElement)(
+        (0, import_react8.createElement)(
           Field,
           { label: "\u7AEF\u53E3" },
-          (0, import_react7.createElement)("input", {
+          (0, import_react8.createElement)("input", {
             value: smtpPort,
             onChange: (event) => setSmtpPort(event.target.value)
           })
         ),
-        (0, import_react7.createElement)(Toggle, { checked: smtpSecure, onChange: setSmtpSecure, label: "TLS" })
+        (0, import_react8.createElement)(Toggle, { checked: smtpSecure, onChange: setSmtpSecure, label: "TLS" })
       ),
-      (0, import_react7.createElement)(
+      (0, import_react8.createElement)(
         Field,
         { label: "\u53D1\u4EF6\u4EBA\u540D\u79F0" },
-        (0, import_react7.createElement)("input", {
+        (0, import_react8.createElement)("input", {
           value: fromName,
           onChange: (event) => setFromName(event.target.value)
         })
       ),
-      (0, import_react7.createElement)(
+      (0, import_react8.createElement)(
         "div",
         { style: { display: "flex", gap: "8px", alignItems: "center", flexWrap: "wrap" } },
-        (0, import_react7.createElement)(
+        (0, import_react8.createElement)(
           "button",
           {
             className: "primary small",
@@ -1897,7 +2030,7 @@ function AccountRow({
           },
           "\u4FDD\u5B58\u8D26\u53F7"
         ),
-        (0, import_react7.createElement)(
+        (0, import_react8.createElement)(
           "button",
           {
             className: "ghost small danger",
@@ -1906,21 +2039,21 @@ function AccountRow({
           "\u79FB\u9664\u8D26\u53F7"
         )
       ),
-      (0, import_react7.createElement)("hr", { style: { border: 0, borderTop: "1px solid var(--m-line)", width: "100%" } }),
-      (0, import_react7.createElement)(
+      (0, import_react8.createElement)("hr", { style: { border: 0, borderTop: "1px solid var(--m-line)", width: "100%" } }),
+      (0, import_react8.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", {
+        (0, import_react8.createElement)("input", {
           type: "password",
           value: password,
           onChange: (event) => setPassword(event.target.value)
         })
       ),
-      (0, import_react7.createElement)(
+      (0, import_react8.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)(
+        (0, import_react8.createElement)(Toggle, { checked: remember, onChange: setRemember, label: "\u8BB0\u4F4F\u5BC6\u7801" }),
+        (0, import_react8.createElement)(
           "button",
           {
             className: "primary small",
@@ -1932,15 +2065,15 @@ function AccountRow({
           },
           "\u767B\u5F55"
         ),
-        (0, import_react7.createElement)("button", { className: "ghost small", onClick: () => void wrap(onLogout) }, "\u9000\u51FA\u767B\u5F55")
+        (0, import_react8.createElement)("button", { className: "ghost small", onClick: () => void wrap(onLogout) }, "\u9000\u51FA\u767B\u5F55")
       ),
-      checkResult === "" ? null : (0, import_react7.createElement)("div", { className: "small muted" }, checkResult)
+      checkResult === "" ? null : (0, import_react8.createElement)("div", { className: "small muted" }, checkResult)
     ) : null
   );
 }
 
 // src/client/index.tsx
-var VERSION = "0.1.0";
+var VERSION = "0.2.1";
 var inject = ["slots"];
 var PANEL_ID = "mailharbor";
 var STYLE_ID = "mailharbor-style";