dsh-webdav-sync 1.0.5 → 1.0.6

package/lib/client.js

@@ -41,6 +41,10 @@ window.__ModuleLoader__.load({
 		const ROUTE_PREVIEW = `${ROUTE_PREFIX}/preview`;
 		/** POST: put back the copies a restore replaced. */
 		const ROUTE_UNDO = `${ROUTE_PREFIX}/undo`;
+		/** POST: write one passphrase-sealed backup file into a folder the person picked. */
+		const ROUTE_EXPORT = `${ROUTE_PREFIX}/export`;
+		/** POST: open a picked backup file and put what it holds on this computer. */
+		const ROUTE_IMPORT = `${ROUTE_PREFIX}/import`;
 		/** The intervals the card offers, in minutes. */
 		const AUTO_CHOICES = [
 			-1,
@@ -82,7 +86,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region \0webdav-sync-css:/home/runner/work/dsh-webdav/dsh-webdav/src/client/WebdavSyncCard.module.css?inline
-		const css = ".summary_318697645 {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  font-size: 13px;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.summaryText_318697645 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.page_318697645 {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  padding: 4px 0 8px;\n  font-size: 13px;\n  color: var(--dsw-alias-label-primary);\n}\n\n.legend_318697645 {\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n  margin: 0 0 8px;\n  font-size: 12px;\n  font-weight: 600;\n  letter-spacing: 0.02em;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.hint_318697645 {\n  margin: 0;\n  font-size: 12px;\n  line-height: 1.6;\n  color: var(--dsw-alias-label-tertiary);\n}\n\n/* The two stamps share one line: the check on the left, the sync on the right.\n   They wrap rather than overlap when the card is too narrow to hold both. */\n.times_318697645 {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 4px 10px;\n  flex-wrap: wrap;\n}\n\n.field_318697645 {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  margin-bottom: 10px;\n}\n\n.fieldLabel_318697645 {\n  font-size: 12px;\n  color: var(--dsw-alias-label-secondary);\n}\n\n/*\n * The line of explanation belonging to one field: it sits between that field's\n * label and its input, so a reader gets the rule before typing, and the gap\n * between two fields (10px) still reads as the bigger break.\n */\n.fieldHint_318697645 {\n  margin: 0;\n  font-size: 12px;\n  line-height: 1.5;\n  color: var(--dsw-alias-label-tertiary);\n}\n\n.grid_318697645 {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n  gap: 10px 14px;\n}\n\n/*\n * The extra-headers field is the card's only multi-line input, and there is no\n * multi-line primitive to reuse. It takes the one-line input's frame instead —\n * same border, radius and background — so it reads as a field of the same\n * family, and a monospace face because what goes in it is header syntax, where\n * the alignment of a name against its value is the thing being checked. It\n * starts three lines tall and may be dragged taller.\n */\n.headersArea_318697645 {\n  box-sizing: border-box;\n  width: 100%;\n  min-height: 66px;\n  padding: 6px 8px;\n  resize: vertical;\n  border: 0.5px solid var(--dsw-alias-border-l4);\n  border-radius: var(--dsw-radius-md);\n  background: var(--dsw-alias-bg-layer-1);\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: 12px;\n  line-height: 18px;\n  color: var(--dsw-alias-label-primary);\n}\n\n.headersArea_318697645::placeholder {\n  color: var(--dsw-alias-label-dimmed);\n}\n\n.headersArea_318697645:focus-visible {\n  outline: none;\n  border-color: var(--dsw-alias-state-business-primary);\n}\n\n/*\n * A field's label line when the field also carries an option of its own: the\n * label and the saved-password checkbox share the line, so the option reads as\n * part of the field it governs instead of as a setting of its own further down\n * the card. They sit at the two ends of that line (`space-between`): the label\n * keeps the field column's left edge, the checkbox lines up with its right edge\n * — packed together they read as one long word. The checkbox is brought down to\n * the field label's 12px and its colour for the same reason as the part rows\n * (see `.partRow_318697645 label`): a control inside a label line should not outrank the\n * line it sits in.\n */\n.labelRow_318697645 {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 10px;\n}\n\n.labelRow_318697645 label {\n  gap: 6px;\n  font-size: 12px;\n  line-height: 18px;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.labelRow_318697645 label input {\n  width: 14px;\n  height: 14px;\n}\n\n/*\n * The auto-sync choice: every tab in one row, all the same width, so six\n * options read as one strip instead of a dropdown hiding five of them.\n */\n/* Doubled class: the control's own rule also sets a display, and this wins. */\n.autoControl_318697645.autoControl_318697645 {\n  display: grid;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/* Six tabs have to share the row, so each keeps its padding modest. */\n.autoControl_318697645 button {\n  padding: 0 6px;\n  font-size: 12px;\n}\n\n.partRow_318697645 {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 7px 0;\n  border-bottom: 1px solid var(--dsw-alias-border-l2);\n}\n\n/* No trailing border when the rows stand alone (a host with no view yet). */\n.partRow_318697645:last-child {\n  border-bottom: none;\n}\n\n/* The checkbox with its one-line description under it. */\n.partText_318697645 {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n/*\n * The checkbox component sets its own label at 14px, which is bigger than this\n * card's section headings (12px) — the rows read as if they outranked the\n * heading above them. Its class name is internal to the component, so the\n * element selector is the way in; the box shrinks with the text to match.\n */\n.partRow_318697645 label {\n  gap: 6px;\n  font-size: 12px;\n  line-height: 18px;\n}\n\n.partRow_318697645 label input {\n  width: 14px;\n  height: 14px;\n}\n\n.partHint_318697645 {\n  font-size: 11px;\n  line-height: 1.4;\n  color: var(--dsw-alias-label-tertiary);\n}\n\n.partState_318697645 {\n  margin-left: auto;\n  flex: none;\n  padding-top: 2px;\n  font-size: 11px;\n  color: var(--dsw-alias-label-tertiary);\n}\n\n.partStateBoth_318697645 {\n  color: var(--dsw-alias-label-warning, var(--dsw-alias-label-secondary));\n}\n\n/*\n * The extra directories, laid out as one more part row — checkbox, name,\n * one-line description, state — exactly like the four above, with the picker on\n * the title line right after the name and the chosen paths listed under the row.\n * Each path is a small card of its own: a bordered row that reads as something\n * carried, not as another line of prose.\n */\n\n/*\n * The picker shares the title line with the switch. It is a text button, so it\n * has to stop borrowing a control's height and padding to sit level with a 12px\n * label — and it reads quieter than the label until it is pointed at.\n */\n.titleRow_318697645 {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.titleRow_318697645 button {\n  height: auto;\n  min-height: 0;\n  padding: 0 2px;\n  font-size: 12px;\n  line-height: 18px;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.titleRow_318697645 button:hover:not(:disabled) {\n  color: var(--dsw-alias-label-primary);\n}\n\n.dirList_318697645 {\n  padding: 0 0 4px;\n  border-bottom: 1px solid var(--dsw-alias-border-l2);\n}\n\n/* The group owns the separator; its heading row sits above the paths. */\n.dirList_318697645 .partRow_318697645 {\n  border-bottom: none;\n  align-items: center;\n}\n\n.dirRow_318697645 {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin: 0 0 4px 20px;\n  padding: 4px 6px 4px 8px;\n  border: 1px solid var(--dsw-alias-border-l2);\n  border-radius: 8px;\n  background: var(--dsw-alias-bg-layer-3);\n}\n\n/* Switched off, the paths stay on screen but read as dormant. */\n.dirOff_318697645 {\n  opacity: 0.6;\n}\n\n/* Mono, because a path is read character by character; a narrow box drops the\n * tail, and the whole path stays in the row's title attribute. */\n.dirPath_318697645 {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 11px;\n  line-height: 16px;\n  color: var(--dsw-alias-label-primary);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* The row a path is typed into, when no dialog could be reached. */\n.dirRow_318697645 input {\n  flex: 1;\n  min-width: 0;\n}\n\n/* A configured directory this computer could not read, one line per directory. */\n.problem_318697645 {\n  margin: 4px 0 0;\n  font-size: 11px;\n  line-height: 1.5;\n  color: var(--dsw-alias-label-error);\n}\n\n.notice_318697645 {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 10px 12px;\n  border: 1px solid var(--dsw-alias-border-l2);\n  border-radius: 10px;\n  background: var(--dsw-alias-bg-layer-2);\n  font-size: 12px;\n}\n\n.noticeTitle_318697645 {\n  font-weight: 600;\n  color: var(--dsw-alias-label-primary);\n}\n\n/*\n * The sync actions. Six short labels have to sit on one row, so the buttons\n * keep their own padding down; wrapping stays on only as a narrow-card escape.\n * With no frame to separate them, the spacing has to: each label carries 6px of\n * its own and the row adds 2px, so neighbouring labels sit 14px apart — roomy\n * enough to read as separate actions, tight enough not to break the row.\n */\n.footer_318697645 {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  flex-wrap: wrap;\n  padding-top: 4px;\n}\n\n/*\n * Every sync action is a text button: no frame, no fill, only a label. The\n * reason is the row itself — six framed buttons next to the settings above read\n * as a second form — and the risk a text button always carries: 「看不出是个\n * 按钮」. That is answered by colour and by the pointer, not by a box:\n *\n * - the label sits in the ordinary primary colour, so it reads as text that\n *   happens to be clickable;\n * - the hover fill comes from `ghost` and appears under the pointer, which is\n *   exactly when the question 「能点吗」 gets asked;\n * - the focus ring is drawn here because `ghost` has none of its own, and a\n *   keyboard user has no pointer to discover the button with.\n *\n * `height: auto` drops the control's 28px box so six labels fit one line; the\n * 24px `min-height` keeps the hover fill from collapsing onto the glyphs. The\n * 500 weight is what makes the whole row read as one band of controls rather\n * than as a sentence that happens to end the section: at 12px, ordinary body\n * weight next to ordinary body text is the one thing a text button cannot\n * recover from with colour alone.\n */\n.footer_318697645 button.textAction_318697645 {\n  height: auto;\n  min-height: 24px;\n  padding: 0 6px;\n  color: var(--dsw-alias-label-primary);\n  font-weight: 500;\n}\n\n.footer_318697645 button.textAction_318697645:hover:not(:disabled) {\n  background: var(--dsw-alias-interactive-bg-hover);\n  color: var(--dsw-alias-label-primary);\n}\n\n.footer_318697645 button.textAction_318697645:focus-visible {\n  outline: var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));\n  outline-offset: 1px;\n}\n\n/*\n * The one action this part of the card is for. It is the row's only accented\n * label, which is what makes 「立即同步」 findable without a filled box; the\n * colour carries it in both themes, where a 12px label is small enough that\n * hue alone would need a second signal — here that signal is being the only\n * coloured one in an otherwise grey row, so the weight stays the row's own.\n */\n.footer_318697645 button.textActionPrimary_318697645 {\n  color: var(--dsw-alias-state-business-primary);\n}\n\n.footer_318697645 button.textActionPrimary_318697645:hover:not(:disabled) {\n  color: var(--dsw-alias-state-business-primary);\n}\n\n/*\n * The two actions that replace one whole side with the other: 「服务器覆盖本机」\n * and 「本机覆盖服务器」. They are the only pair in the row that can throw away\n * work on the side it writes, so they carry the warning colour while staying\n * text buttons. Not the error colour: both are reversible (a restore has\n * `undo`, an upload keeps the old file in `sync/`), and red would say otherwise.\n *\n * `warn-label`, not `warn-primary`: the design system splits these two — the\n * primary amber (#f59e0b) paints dots and tag fills, while warning *text* uses\n * the darker `label` step (#dd8629), which is what `Toast` and\n * `ConnectionIndicator` put on 12px labels exactly like this one. At 12px the\n * primary amber on a light card is barely 2:1 against the surface; the label\n * step is the token that was picked for reading, so it is the one used here.\n */\n.footer_318697645 button.textActionReplace_318697645 {\n  color: var(--dsw-alias-state-warn-label);\n}\n\n.footer_318697645 button.textActionReplace_318697645:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--dsw-alias-state-warn-label) 10%, transparent);\n  color: var(--dsw-alias-state-warn-label);\n}\n\n.spacer_318697645 {\n  flex: 1;\n}\n\n/* The card's own actions: WebDAV settings, kept apart from the sync ones. */\n.cardFooter_318697645 {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n  margin-top: 4px;\n  padding-top: 12px;\n  border-top: 1px solid var(--dsw-alias-border-l2);\n}\n\n.failed_318697645 {\n  font-size: 12px;\n  color: var(--dsw-alias-label-error);\n}\n\n.note_318697645 {\n  font-size: 12px;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.confirm_318697645 {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n  padding: 10px 12px;\n  border: 1px solid var(--dsw-alias-border-l4);\n  border-radius: 10px;\n  font-size: 12px;\n  color: var(--dsw-alias-label-primary);\n}\n\n.previewList_318697645 {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  font-size: 12px;\n}\n\n.previewRow_318697645 {\n  display: flex;\n  gap: 8px;\n}\n\n.previewPart_318697645 {\n  min-width: 90px;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.output_318697645 {\n  max-height: 180px;\n  margin: 0;\n  overflow: auto;\n  padding: 8px 10px;\n  border-radius: 8px;\n  background: var(--dsw-alias-bg-layer-3);\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: 11px;\n  line-height: 1.5;\n  white-space: pre-wrap;\n  color: var(--dsw-alias-label-secondary);\n}\n\n/*\n * The install report: how it went, the log, and the way out.\n *\n * The button sits on the sentence's row rather than under the log, so closing it\n * is where the eye already is — and one button takes the whole report away, since\n * the log is there to be read once and then is only something to scroll past.\n */\n.outputBlock_318697645 {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.outputHead_318697645 {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.spin_318697645 {\n  animation: webdavSyncSpin 0.9s linear infinite;\n}\n\n@keyframes webdavSyncSpin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/*\n * The forwarder's switch and the two values it hands out.\n *\n * The switch is a checkbox like the ones that choose the parts, and it reads at\n * the size of the section titles rather than at the primitive's own 14px: one\n * line of body-sized text under a title is a control shouting over its heading.\n *\n * The address is what a reader copies, so it is plain text — monospace, because\n * a path is read character by character — with the copy icon right after it and\n * no frame: a field around a value nobody types only reads as something to fill\n * in. The account sits under it the same way: name, value, copy icon. All three\n * are named, because three copy buttons in a row are otherwise three buttons\n * that all say 「copy」.\n */\n.relaySwitch_318697645 {\n  margin-bottom: 6px;\n}\n\n.relaySwitch_318697645 label {\n  font-size: 12px;\n  line-height: 18px;\n}\n\n.relayAddressRow_318697645,\n.relayAccountRow_318697645 {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n  margin-bottom: 6px;\n}\n\n/* The two account values are two groups rather than four loose items: the wider\n * gap separates them, the narrow one binds each label to its value and icon. */\n.relayAccountRow_318697645 {\n  gap: 6px 14px;\n}\n\n/* One value with its copy icon. It stays on one line, so a wrapped card can\n * never leave an icon under a value it does not copy. */\n.relayPair_318697645 {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n/* Plain text rather than a field frame, but still the reader's to select: the\n * failure hint's fallback — select it and copy by hand — has to keep working.\n * It takes only the width it needs, so the copy icon sits at the end of the\n * address instead of being pushed out to the card's right edge: the icon\n * belongs to that string, and a gap would read as a separate action. */\n.relayAddress_318697645 {\n  flex: 0 1 auto;\n  min-width: 0;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 12px;\n  line-height: 18px;\n  color: var(--dsw-alias-label-primary);\n  overflow-wrap: anywhere;\n}\n\n/* An icon button: the primitive's frame drops away, and what is left is the\n * app's own pressable shape — the hover wash around a 16px glyph, at the 24px\n * the app's other icon actions take. */\nbutton.relayCopy_318697645 {\n  flex: none;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  color: var(--dsw-alias-label-secondary);\n}\n\nbutton.relayCopy_318697645:hover:not(:disabled) {\n  color: var(--dsw-alias-label-primary);\n}\n\n.relayLabel_318697645 {\n  font-size: 12px;\n  line-height: 18px;\n  color: var(--dsw-alias-label-tertiary);\n}\n\n/* A value with nothing around it: the three things a reader takes away — the\n * address and the two account strings — are all set the same way, because none\n * of them is a field. A frame here would say 「fill this in」 about a string that\n * is generated and read-only. */\n.relayValue_318697645 {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 12px;\n  line-height: 18px;\n  color: var(--dsw-alias-label-primary);\n}\n";
+		const css = ".summary_318697645 {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  font-size: 13px;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.summaryText_318697645 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.page_318697645 {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  padding: 4px 0 8px;\n  font-size: 13px;\n  color: var(--dsw-alias-label-primary);\n}\n\n.legend_318697645 {\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n  margin: 0 0 8px;\n  font-size: 12px;\n  font-weight: 600;\n  letter-spacing: 0.02em;\n  color: var(--dsw-alias-label-secondary);\n}\n\n/*\n * A heading that carries a button. `.legend_318697645` aligns on the baseline because its\n * other inline companion is a `Tag`; a 24px hit target cannot share a baseline\n * with 12px text — measured in Chromium, the glyph inside the button sat 3px\n * below the words' centre, low enough to look like it was falling off the line.\n * Centring the line fixes that and costs only the heading's own height (24px\n * instead of the 16.5px line box). Declared after `.legend_318697645` so it wins.\n */\n.legendAction_318697645 {\n  align-items: center;\n}\n\n/*\n * The one action belonging to the 「同步内容」 heading: reading the status again.\n *\n * It is an icon button in the heading's own colour, not a worded one: the\n * heading is 12px/600, and a 12px label next to it would read as a second\n * heading rather than as something to press. The hover wash and the focus ring\n * come from `ghost`; what is set here is only the 24px square the card's other\n * icon actions take (`button.relayCopy_318697645`) — the primitive's 28px `sm` box would\n * make the heading taller than the rows under it. Written as `button.…` so the\n * control's own size rule does not win on specificity, with `align-self` left\n * in for any future heading that still aligns on the baseline.\n */\n.legend_318697645 button.legendIcon_318697645 {\n  flex: none;\n  align-self: center;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.legend_318697645 button.legendIcon_318697645:hover:not(:disabled) {\n  color: var(--dsw-alias-label-primary);\n}\n\n.hint_318697645 {\n  margin: 0;\n  font-size: 12px;\n  line-height: 1.6;\n  color: var(--dsw-alias-label-tertiary);\n}\n\n/* The two stamps share one line: the check on the left, the sync on the right.\n   They wrap rather than overlap when the card is too narrow to hold both. */\n.times_318697645 {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 4px 10px;\n  flex-wrap: wrap;\n}\n\n.field_318697645 {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  margin-bottom: 10px;\n}\n\n.fieldLabel_318697645 {\n  font-size: 12px;\n  color: var(--dsw-alias-label-secondary);\n}\n\n/*\n * The line of explanation belonging to one field: it sits between that field's\n * label and its input, so a reader gets the rule before typing, and the gap\n * between two fields (10px) still reads as the bigger break.\n */\n.fieldHint_318697645 {\n  margin: 0;\n  font-size: 12px;\n  line-height: 1.5;\n  color: var(--dsw-alias-label-tertiary);\n}\n\n.grid_318697645 {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n  gap: 10px 14px;\n}\n\n/*\n * The extra-headers field is the card's only multi-line input, and there is no\n * multi-line primitive to reuse. It takes the one-line input's frame instead —\n * same border, radius and background — so it reads as a field of the same\n * family, and a monospace face because what goes in it is header syntax, where\n * the alignment of a name against its value is the thing being checked. It\n * starts three lines tall and may be dragged taller.\n */\n.headersArea_318697645 {\n  box-sizing: border-box;\n  width: 100%;\n  min-height: 66px;\n  padding: 6px 8px;\n  resize: vertical;\n  border: 0.5px solid var(--dsw-alias-border-l4);\n  border-radius: var(--dsw-radius-md);\n  background: var(--dsw-alias-bg-layer-1);\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: 12px;\n  line-height: 18px;\n  color: var(--dsw-alias-label-primary);\n}\n\n.headersArea_318697645::placeholder {\n  color: var(--dsw-alias-label-dimmed);\n}\n\n.headersArea_318697645:focus-visible {\n  outline: none;\n  border-color: var(--dsw-alias-state-business-primary);\n}\n\n/*\n * A field's label line when the field also carries an option of its own: the\n * label and the saved-password checkbox share the line, so the option reads as\n * part of the field it governs instead of as a setting of its own further down\n * the card. They sit at the two ends of that line (`space-between`): the label\n * keeps the field column's left edge, the checkbox lines up with its right edge\n * — packed together they read as one long word. The checkbox is brought down to\n * the field label's 12px and its colour for the same reason as the part rows\n * (see `.partRow_318697645 label`): a control inside a label line should not outrank the\n * line it sits in.\n */\n.labelRow_318697645 {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 10px;\n}\n\n.labelRow_318697645 label {\n  gap: 6px;\n  font-size: 12px;\n  line-height: 18px;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.labelRow_318697645 label input {\n  width: 14px;\n  height: 14px;\n}\n\n/*\n * The auto-sync choice: every tab in one row, all the same width, so six\n * options read as one strip instead of a dropdown hiding five of them.\n */\n/* Doubled class: the control's own rule also sets a display, and this wins. */\n.autoControl_318697645.autoControl_318697645 {\n  display: grid;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/* Six tabs have to share the row, so each keeps its padding modest. */\n.autoControl_318697645 button {\n  padding: 0 6px;\n  font-size: 12px;\n}\n\n.partRow_318697645 {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 7px 0;\n  border-bottom: 1px solid var(--dsw-alias-border-l2);\n}\n\n/* No trailing border when the rows stand alone (a host with no view yet). */\n.partRow_318697645:last-child {\n  border-bottom: none;\n}\n\n/* The checkbox with its one-line description under it. */\n.partText_318697645 {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n/*\n * The checkbox component sets its own label at 14px, which is bigger than this\n * card's section headings (12px) — the rows read as if they outranked the\n * heading above them. Its class name is internal to the component, so the\n * element selector is the way in; the box shrinks with the text to match.\n */\n.partRow_318697645 label {\n  gap: 6px;\n  font-size: 12px;\n  line-height: 18px;\n}\n\n.partRow_318697645 label input {\n  width: 14px;\n  height: 14px;\n}\n\n.partHint_318697645 {\n  font-size: 11px;\n  line-height: 1.4;\n  color: var(--dsw-alias-label-tertiary);\n}\n\n.partState_318697645 {\n  margin-left: auto;\n  flex: none;\n  padding-top: 2px;\n  font-size: 11px;\n  color: var(--dsw-alias-label-tertiary);\n}\n\n.partStateBoth_318697645 {\n  color: var(--dsw-alias-label-warning, var(--dsw-alias-label-secondary));\n}\n\n/*\n * The extra directories, laid out as one more part row — checkbox, name,\n * one-line description, state — exactly like the four above, with the picker on\n * the title line right after the name and the chosen paths listed under the row.\n * Each path is a small card of its own: a bordered row that reads as something\n * carried, not as another line of prose.\n */\n\n/*\n * The picker shares the title line with the switch. It is a text button, so it\n * has to stop borrowing a control's height and padding to sit level with a 12px\n * label — and it reads quieter than the label until it is pointed at.\n */\n.titleRow_318697645 {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.titleRow_318697645 button {\n  height: auto;\n  min-height: 0;\n  padding: 0 2px;\n  font-size: 12px;\n  line-height: 18px;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.titleRow_318697645 button:hover:not(:disabled) {\n  color: var(--dsw-alias-label-primary);\n}\n\n.dirList_318697645 {\n  padding: 0 0 4px;\n  border-bottom: 1px solid var(--dsw-alias-border-l2);\n}\n\n/* The group owns the separator; its heading row sits above the paths. */\n.dirList_318697645 .partRow_318697645 {\n  border-bottom: none;\n  align-items: center;\n}\n\n.dirRow_318697645 {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin: 0 0 4px 20px;\n  padding: 4px 6px 4px 8px;\n  border: 1px solid var(--dsw-alias-border-l2);\n  border-radius: 8px;\n  background: var(--dsw-alias-bg-layer-3);\n}\n\n/* Switched off, the paths stay on screen but read as dormant. */\n.dirOff_318697645 {\n  opacity: 0.6;\n}\n\n/* Mono, because a path is read character by character; a narrow box drops the\n * tail, and the whole path stays in the row's title attribute. */\n.dirPath_318697645 {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 11px;\n  line-height: 16px;\n  color: var(--dsw-alias-label-primary);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* The row a path is typed into, when no dialog could be reached. */\n.dirRow_318697645 input {\n  flex: 1;\n  min-width: 0;\n}\n\n/* A configured directory this computer could not read, one line per directory. */\n.problem_318697645 {\n  margin: 4px 0 0;\n  font-size: 11px;\n  line-height: 1.5;\n  color: var(--dsw-alias-label-error);\n}\n\n.notice_318697645 {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 10px 12px;\n  border: 1px solid var(--dsw-alias-border-l2);\n  border-radius: 10px;\n  background: var(--dsw-alias-bg-layer-2);\n  font-size: 12px;\n}\n\n.noticeTitle_318697645 {\n  font-weight: 600;\n  color: var(--dsw-alias-label-primary);\n}\n\n/*\n * The sync actions. Six short labels have to sit on one row, so the buttons\n * keep their own padding down; wrapping stays on only as a narrow-card escape.\n * With no frame to separate them, the spacing has to: each label carries 6px of\n * its own and the row adds 2px, so neighbouring labels sit 14px apart — roomy\n * enough to read as separate actions, tight enough not to break the row.\n */\n.footer_318697645 {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  flex-wrap: wrap;\n  padding-top: 4px;\n}\n\n/*\n * Every sync action is a text button: no frame, no fill, only a label. The\n * reason is the row itself — six framed buttons next to the settings above read\n * as a second form — and the risk a text button always carries: 「看不出是个\n * 按钮」. That is answered by colour and by the pointer, not by a box:\n *\n * - the label sits in the ordinary primary colour, so it reads as text that\n *   happens to be clickable;\n * - the hover fill comes from `ghost` and appears under the pointer, which is\n *   exactly when the question 「能点吗」 gets asked;\n * - the focus ring is drawn here because `ghost` has none of its own, and a\n *   keyboard user has no pointer to discover the button with.\n *\n * `height: auto` drops the control's 28px box so six labels fit one line; the\n * 24px `min-height` keeps the hover fill from collapsing onto the glyphs. The\n * 500 weight is what makes the whole row read as one band of controls rather\n * than as a sentence that happens to end the section: at 12px, ordinary body\n * weight next to ordinary body text is the one thing a text button cannot\n * recover from with colour alone.\n */\n.footer_318697645 button.textAction_318697645 {\n  height: auto;\n  min-height: 24px;\n  padding: 0 6px;\n  color: var(--dsw-alias-label-primary);\n  font-weight: 500;\n}\n\n.footer_318697645 button.textAction_318697645:hover:not(:disabled) {\n  background: var(--dsw-alias-interactive-bg-hover);\n  color: var(--dsw-alias-label-primary);\n}\n\n.footer_318697645 button.textAction_318697645:focus-visible {\n  outline: var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));\n  outline-offset: 1px;\n}\n\n/*\n * The one action this part of the card is for. It is the row's only accented\n * label, which is what makes 「立即同步」 findable without a filled box; the\n * colour carries it in both themes, where a 12px label is small enough that\n * hue alone would need a second signal — here that signal is being the only\n * coloured one in an otherwise grey row, so the weight stays the row's own.\n */\n.footer_318697645 button.textActionPrimary_318697645 {\n  color: var(--dsw-alias-state-business-primary);\n}\n\n.footer_318697645 button.textActionPrimary_318697645:hover:not(:disabled) {\n  color: var(--dsw-alias-state-business-primary);\n}\n\n/*\n * The two actions that replace one whole side with the other: 「服务器覆盖本机」\n * and 「本机覆盖服务器」. They are the only pair in the row that can throw away\n * work on the side it writes, so they carry the warning colour while staying\n * text buttons. Not the error colour: both are reversible (a restore has\n * `undo`, an upload keeps the old file in `sync/`), and red would say otherwise.\n *\n * `warn-label`, not `warn-primary`: the design system splits these two — the\n * primary amber (#f59e0b) paints dots and tag fills, while warning *text* uses\n * the darker `label` step (#dd8629), which is what `Toast` and\n * `ConnectionIndicator` put on 12px labels exactly like this one. At 12px the\n * primary amber on a light card is barely 2:1 against the surface; the label\n * step is the token that was picked for reading, so it is the one used here.\n */\n.footer_318697645 button.textActionReplace_318697645 {\n  color: var(--dsw-alias-state-warn-label);\n}\n\n.footer_318697645 button.textActionReplace_318697645:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--dsw-alias-state-warn-label) 10%, transparent);\n  color: var(--dsw-alias-state-warn-label);\n}\n\n.spacer_318697645 {\n  flex: 1;\n}\n\n/* The card's own actions: WebDAV settings, kept apart from the sync ones. */\n.cardFooter_318697645 {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n  margin-top: 4px;\n  padding-top: 12px;\n  border-top: 1px solid var(--dsw-alias-border-l2);\n}\n\n.failed_318697645 {\n  font-size: 12px;\n  color: var(--dsw-alias-label-error);\n}\n\n.note_318697645 {\n  font-size: 12px;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.confirm_318697645 {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n  padding: 10px 12px;\n  border: 1px solid var(--dsw-alias-border-l4);\n  border-radius: 10px;\n  font-size: 12px;\n  color: var(--dsw-alias-label-primary);\n}\n\n.previewList_318697645 {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  font-size: 12px;\n}\n\n.previewRow_318697645 {\n  display: flex;\n  gap: 8px;\n}\n\n.previewPart_318697645 {\n  min-width: 90px;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.output_318697645 {\n  max-height: 180px;\n  margin: 0;\n  overflow: auto;\n  padding: 8px 10px;\n  border-radius: 8px;\n  background: var(--dsw-alias-bg-layer-3);\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: 11px;\n  line-height: 1.5;\n  white-space: pre-wrap;\n  color: var(--dsw-alias-label-secondary);\n}\n\n/*\n * The install report: how it went, the log, and the way out.\n *\n * The button sits on the sentence's row rather than under the log, so closing it\n * is where the eye already is — and one button takes the whole report away, since\n * the log is there to be read once and then is only something to scroll past.\n */\n.outputBlock_318697645 {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.outputHead_318697645 {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.spin_318697645 {\n  animation: webdavSyncSpin 0.9s linear infinite;\n}\n\n@keyframes webdavSyncSpin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/*\n * The forwarder's switch and the two values it hands out.\n *\n * The switch is a checkbox like the ones that choose the parts, and it reads at\n * the size of the section titles rather than at the primitive's own 14px: one\n * line of body-sized text under a title is a control shouting over its heading.\n *\n * The address is what a reader copies, so it is plain text — monospace, because\n * a path is read character by character — with the copy icon right after it and\n * no frame: a field around a value nobody types only reads as something to fill\n * in. The account sits under it the same way: name, value, copy icon. All three\n * are named, because three copy buttons in a row are otherwise three buttons\n * that all say 「copy」.\n */\n.relaySwitch_318697645 {\n  margin-bottom: 6px;\n}\n\n.relaySwitch_318697645 label {\n  font-size: 12px;\n  line-height: 18px;\n}\n\n.relayAddressRow_318697645,\n.relayAccountRow_318697645 {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n  margin-bottom: 6px;\n}\n\n/* The two account values are two groups rather than four loose items: the wider\n * gap separates them, the narrow one binds each label to its value and icon. */\n.relayAccountRow_318697645 {\n  gap: 6px 14px;\n}\n\n/* One value with its copy icon. It stays on one line, so a wrapped card can\n * never leave an icon under a value it does not copy. */\n.relayPair_318697645 {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n/* Plain text rather than a field frame, but still the reader's to select: the\n * failure hint's fallback — select it and copy by hand — has to keep working.\n * It takes only the width it needs, so the copy icon sits at the end of the\n * address instead of being pushed out to the card's right edge: the icon\n * belongs to that string, and a gap would read as a separate action. */\n.relayAddress_318697645 {\n  flex: 0 1 auto;\n  min-width: 0;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 12px;\n  line-height: 18px;\n  color: var(--dsw-alias-label-primary);\n  overflow-wrap: anywhere;\n}\n\n/* An icon button: the primitive's frame drops away, and what is left is the\n * app's own pressable shape — the hover wash around a 16px glyph, at the 24px\n * the app's other icon actions take. */\nbutton.relayCopy_318697645 {\n  flex: none;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  color: var(--dsw-alias-label-secondary);\n}\n\nbutton.relayCopy_318697645:hover:not(:disabled) {\n  color: var(--dsw-alias-label-primary);\n}\n\n.relayLabel_318697645 {\n  font-size: 12px;\n  line-height: 18px;\n  color: var(--dsw-alias-label-tertiary);\n}\n\n/* A value with nothing around it: the three things a reader takes away — the\n * address and the two account strings — are all set the same way, because none\n * of them is a field. A frame here would say 「fill this in」 about a string that\n * is generated and read-only. */\n.relayValue_318697645 {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 12px;\n  line-height: 18px;\n  color: var(--dsw-alias-label-primary);\n}\n\n/* ---- manual backup ----\n *\n * Two rows, each one file, each opening into its own small form. The row is the\n * shape the screenshot asked for: what it does on the left over one line saying\n * what that means, and the action on the right, on the same baseline as the\n * title. The action is a text button rather than a framed one because it is the\n * same weight of decision as the six above it, and because a framed button on\n * both rows would read as the section's primary action twice over.\n */\n.backupRow_318697645 {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  padding: 9px 0;\n  border-bottom: 1px solid var(--dsw-alias-border-l2);\n}\n\n.backupRow_318697645:last-child {\n  border-bottom: none;\n}\n\n.backupText_318697645 {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 3px;\n  min-width: 0;\n}\n\n.backupTitle_318697645 {\n  font-size: 13px;\n  line-height: 20px;\n  color: var(--dsw-alias-label-primary);\n}\n\n.backupHint_318697645 {\n  font-size: 12px;\n  line-height: 1.5;\n  color: var(--dsw-alias-label-tertiary);\n}\n\n/* Sits on the title's line, not the row's top: the row grows downwards with the\n * hint under it, and the action belongs to the title it acts on. */\n.backupAction_318697645 {\n  flex: none;\n  height: 20px;\n  min-height: 0;\n  padding: 0 4px;\n  font-size: 12px;\n  line-height: 20px;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.backupAction_318697645:hover:not(:disabled) {\n  color: var(--dsw-alias-label-primary);\n}\n\n/* The open form hangs under its row and is set in from it, so the two questions\n * read as belonging to the row above rather than as the section's settings. */\n.backupForm_318697645 {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  margin: 0 0 4px;\n  padding: 10px 12px 12px;\n  border: 1px solid var(--dsw-alias-border-l2);\n  border-radius: 10px;\n  background: var(--dsw-alias-bg-layer-2);\n}\n\n.backupForm_318697645 .field_318697645 {\n  margin-bottom: 8px;\n}\n\n.backupForm_318697645 .field_318697645:last-of-type {\n  margin-bottom: 0;\n}\n\n.backupPathRow_318697645 {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n}\n\n.backupPathRow_318697645 > :first-child {\n  flex: 1;\n  min-width: 0;\n}\n\n.backupPathRow_318697645 > button {\n  flex: none;\n}\n\n/* The name of the file that was read, standing where a path field would: this\n * half cannot be given a path, only a file, so the row says which file it has. */\n.backupFileName_318697645 {\n  font-size: 12px;\n  line-height: 18px;\n  color: var(--dsw-alias-label-secondary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* The browser's picker is opened from the button beside it; a second visible\n * input would be the same choice offered twice. */\n.backupFileInput_318697645 {\n  display: none;\n}\n\n.backupFormFooter_318697645 {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding-top: 10px;\n}\n";
 		const tagId = "dsh-webdav-sync/WebdavSyncCard.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=\"" + tagId + "\"]") === null) {
 			const tag = document.createElement("style");
@@ -96,6 +100,9 @@ window.__ModuleLoader__.load({
 			"summaryText": "summaryText_318697645",
 			"page": "page_318697645",
 			"legend": "legend_318697645",
+			"legendAction": "legendAction_318697645",
+			"relayCopy": "relayCopy_318697645",
+			"legendIcon": "legendIcon_318697645",
 			"hint": "hint_318697645",
 			"times": "times_318697645",
 			"field": "field_318697645",
@@ -139,11 +146,296 @@ window.__ModuleLoader__.load({
 			"relayAccountRow": "relayAccountRow_318697645",
 			"relayPair": "relayPair_318697645",
 			"relayAddress": "relayAddress_318697645",
-			"relayCopy": "relayCopy_318697645",
 			"relayLabel": "relayLabel_318697645",
-			"relayValue": "relayValue_318697645"
+			"relayValue": "relayValue_318697645",
+			"backupRow": "backupRow_318697645",
+			"backupText": "backupText_318697645",
+			"backupTitle": "backupTitle_318697645",
+			"backupHint": "backupHint_318697645",
+			"backupAction": "backupAction_318697645",
+			"backupForm": "backupForm_318697645",
+			"backupPathRow": "backupPathRow_318697645",
+			"backupFileName": "backupFileName_318697645",
+			"backupFileInput": "backupFileInput_318697645",
+			"backupFormFooter": "backupFormFooter_318697645"
 		};
 		//#endregion
+		//#region src/client/ManualBackupPanel.tsx
+		/**
+		* The manual backup section of the card: export and import, one row each.
+		*
+		* It sits under 同步内容 and answers a question the sync itself cannot: how to
+		* move this setup to a computer that has no account, no address and no network.
+		* Both rows are one file each way, so both stay shut until they are asked for —
+		* a passphrase field on screen at all times would read as a setting to keep,
+		* when it is one file's one question.
+		*
+		* The file itself is the same sealed envelope the server holds, so a manual
+		* export can be imported by any other copy of this plugin and nothing new has to
+		* be trusted with the plaintext.
+		*
+		* The export is written by the host half: this half cannot save a file (the
+		* desktop shell cancels browser downloads), so it names a folder and the host
+		* writes there. The import travels the other way — this half reads the picked
+		* file, because only it can see one, and the host decrypts the text it is given.
+		*
+		* @module webdav-sync/client/ManualBackupPanel
+		*/
+		/**
+		* A byte count as something a reader can compare at a glance.
+		*
+		* @param bytes - the file's size.
+		* @returns e.g. 「812 B」 or 「1.4 KiB」.
+		*/
+		function sizeText(bytes) {
+			if (!Number.isFinite(bytes) || bytes < 0) return "—";
+			if (bytes < 1024) return `${Math.round(bytes)} B`;
+			if (bytes < 1048576) return `${(bytes / 1024).toFixed(1)} KiB`;
+			return `${(bytes / 1048576).toFixed(1)} MiB`;
+		}
+		/**
+		* The manual backup section.
+		*
+		* @param props - the card's snapshot, its actions and the dictionary.
+		* @returns the section.
+		*/
+		function ManualBackupPanel(props) {
+			const { t, state, busy, partName } = props;
+			const file = (0, react.useRef)(null);
+			const names = (parts) => parts.map((part) => partName(part)).join("、");
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
+					className: WebdavSyncCard_module_default.legend,
+					children: t("backupLegend")
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: WebdavSyncCard_module_default.backupRow,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: WebdavSyncCard_module_default.backupText,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: WebdavSyncCard_module_default.backupTitle,
+							children: t("exportTitle")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: WebdavSyncCard_module_default.backupHint,
+							children: t("exportHint")
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+						variant: "ghost",
+						size: "sm",
+						className: WebdavSyncCard_module_default.backupAction,
+						disabled: busy,
+						"aria-expanded": state.exportOpen,
+						onClick: () => state.exportOpen ? props.closeExport() : props.openExport(),
+						children: t("exportAction")
+					})]
+				}),
+				state.exportOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: WebdavSyncCard_module_default.backupForm,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: WebdavSyncCard_module_default.field,
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+									className: WebdavSyncCard_module_default.fieldLabel,
+									htmlFor: "webdav-sync-export-passphrase",
+									children: t("exportPassphraseLabel")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: WebdavSyncCard_module_default.fieldHint,
+									children: t("exportPassphraseHint")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Input, {
+									id: "webdav-sync-export-passphrase",
+									type: "password",
+									value: state.exportPassphrase,
+									autoComplete: "new-password",
+									onChange: (event) => props.editExport("passphrase", event.target.value)
+								})
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: WebdavSyncCard_module_default.field,
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+									className: WebdavSyncCard_module_default.fieldLabel,
+									htmlFor: "webdav-sync-export-dir",
+									children: t("exportDirLabel")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: WebdavSyncCard_module_default.fieldHint,
+									children: t("exportDirHint")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: WebdavSyncCard_module_default.backupPathRow,
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Input, {
+										id: "webdav-sync-export-dir",
+										value: state.exportDir,
+										placeholder: t("exportDirPlaceholder"),
+										onChange: (event) => props.editExport("dir", event.target.value)
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+										variant: "outline",
+										size: "sm",
+										disabled: busy,
+										onClick: () => props.pickExportDir(),
+										children: t("exportDirChoose")
+									})]
+								})
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: WebdavSyncCard_module_default.backupFormFooter,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+								variant: "primary",
+								size: "sm",
+								disabled: busy,
+								onClick: () => props.runExport(),
+								children: state.busy === "export" ? t("working") : t("exportConfirm")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+								variant: "outline",
+								size: "sm",
+								disabled: busy,
+								onClick: () => props.closeExport(),
+								children: t("exportCancel")
+							})]
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: WebdavSyncCard_module_default.backupRow,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: WebdavSyncCard_module_default.backupText,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: WebdavSyncCard_module_default.backupTitle,
+							children: t("importTitle")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: WebdavSyncCard_module_default.backupHint,
+							children: t("importHint")
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+						variant: "ghost",
+						size: "sm",
+						className: WebdavSyncCard_module_default.backupAction,
+						disabled: busy,
+						"aria-expanded": state.importOpen,
+						onClick: () => state.importOpen ? props.closeImport() : props.openImport(),
+						children: t("importAction")
+					})]
+				}),
+				state.importOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: WebdavSyncCard_module_default.backupForm,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: WebdavSyncCard_module_default.field,
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+									className: WebdavSyncCard_module_default.fieldLabel,
+									htmlFor: "webdav-sync-import-passphrase",
+									children: t("importPassphraseLabel")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: WebdavSyncCard_module_default.fieldHint,
+									children: t("importPassphraseHint")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Input, {
+									id: "webdav-sync-import-passphrase",
+									type: "password",
+									value: state.importPassphrase,
+									autoComplete: "new-password",
+									onChange: (event) => props.editImport("passphrase", event.target.value)
+								})
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: WebdavSyncCard_module_default.field,
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: WebdavSyncCard_module_default.fieldLabel,
+									children: t("importFileLabel")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: WebdavSyncCard_module_default.fieldHint,
+									children: t("importFileHint")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: WebdavSyncCard_module_default.backupPathRow,
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: WebdavSyncCard_module_default.backupFileName,
+											children: state.importName === "" ? t("importNoFile") : state.importName
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+											variant: "outline",
+											size: "sm",
+											disabled: busy,
+											onClick: () => file.current?.click(),
+											children: t("importFileChoose")
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+											ref: file,
+											type: "file",
+											accept: ".prop,application/json",
+											className: WebdavSyncCard_module_default.backupFileInput,
+											onChange: (event) => {
+												const picked = event.target.files?.[0];
+												event.target.value = "";
+												if (picked !== void 0) props.pickFile(picked);
+											}
+										})
+									]
+								})
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: WebdavSyncCard_module_default.backupFormFooter,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+								variant: "primary",
+								size: "sm",
+								disabled: busy,
+								onClick: () => props.runImport(),
+								children: state.busy === "import" ? t("working") : t("importConfirm")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+								variant: "outline",
+								size: "sm",
+								disabled: busy,
+								onClick: () => props.closeImport(),
+								children: t("importCancel")
+							})]
+						})
+					]
+				}),
+				state.exported !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: WebdavSyncCard_module_default.note,
+					role: "status",
+					children: t("exportDone", {
+						file: state.exported.file,
+						size: sizeText(state.exported.size),
+						parts: names(state.exported.parts)
+					})
+				}),
+				state.imported !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: WebdavSyncCard_module_default.note,
+					role: "status",
+					children: [
+						state.imported.here.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: WebdavSyncCard_module_default.note,
+							children: t("importDone", { parts: names(state.imported.here) })
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: WebdavSyncCard_module_default.note,
+							children: t("importSame", { parts: names(state.imported.same) })
+						}),
+						state.imported.pendingInstall && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: WebdavSyncCard_module_default.note,
+							children: t("importPending")
+						}),
+						state.imported.saved !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: WebdavSyncCard_module_default.note,
+							children: t("noticeSaved", { dir: state.imported.saved })
+						})
+					]
+				})
+			] });
+		}
+		//#endregion
 		//#region src/client/RelayPanel.tsx
 		/**
 		* The forwarder's section of the card.
@@ -315,6 +607,25 @@ window.__ModuleLoader__.load({
 			] });
 		}
 		//#endregion
+		//#region src/client/status-polling.ts
+		/** Re-read local status while the full card is mounted, never run a sync. */
+		function watchStatus(poll) {
+			const refresh = () => {
+				if (document.visibilityState !== "hidden") poll();
+			};
+			refresh();
+			const timer = setInterval(refresh, 15e3);
+			window.addEventListener("focus", refresh);
+			window.addEventListener("online", refresh);
+			document.addEventListener("visibilitychange", refresh);
+			return () => {
+				clearInterval(timer);
+				window.removeEventListener("focus", refresh);
+				window.removeEventListener("online", refresh);
+				document.removeEventListener("visibilitychange", refresh);
+			};
+		}
+		//#endregion
 		//#region src/client/WebdavSyncCard.tsx
 		/**
 		* The WebDAV sync card, rendered in two seats from one body:
@@ -361,15 +672,6 @@ window.__ModuleLoader__.load({
 		}
 		/** The value of the auto-sync control's first tab, which is not an interval. */
 		const AUTO_OFF = "off";
-		/**
-		* How often the card re-reads the status while it is open, in milliseconds.
-		*
-		* The host's own timer works in minutes, so anything in that range would do;
-		* this is small enough that a page left open shows a sync as soon as it happens
-		* and large enough that the host is not being asked constantly. Nothing here
-		* reaches the server: `status` reads the profile and the state file.
-		*/
-		const STATUS_EVERY_MS = 15e3;
 		/** Which dictionary key names the action in flight. */
 		const BUSY_TEXT = {
 			check: "check",
@@ -437,12 +739,11 @@ window.__ModuleLoader__.load({
 			const state = props.useWebdavSync((snapshot) => snapshot);
 			(0, react.useEffect)(() => {
 				if (onPage) props.ensure();
-			}, [onPage]);
+			}, [onPage, props.ensure]);
 			(0, react.useEffect)(() => {
 				if (!onPage) return void 0;
-				const timer = setInterval(() => props.poll(), STATUS_EVERY_MS);
-				return () => clearInterval(timer);
-			}, [onPage]);
+				return watchStatus(props.poll);
+			}, [onPage, props.poll]);
 			if (state.phase === "loading") return onPage ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				className: WebdavSyncCard_module_default.note,
 				role: "status",
@@ -472,7 +773,7 @@ window.__ModuleLoader__.load({
 						size: "sm",
 						className: `${WebdavSyncCard_module_default.textAction} ${WebdavSyncCard_module_default.textActionPrimary}`,
 						onClick: () => props.refresh(),
-						children: t("check")
+						children: t("refreshStatus")
 					})
 				})]
 			});
@@ -483,10 +784,14 @@ window.__ModuleLoader__.load({
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: WebdavSyncCard_module_default.page,
 				children: [
-					state.error !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					state.error !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
 						className: WebdavSyncCard_module_default.failed,
 						role: "alert",
-						children: state.error
+						children: [
+							t("statusStale"),
+							" ",
+							state.error
+						]
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", { children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
@@ -601,9 +906,21 @@ window.__ModuleLoader__.load({
 						}
 					})] }),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", { children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
-							className: WebdavSyncCard_module_default.legend,
-							children: t("partsLegend")
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("h4", {
+							className: `${WebdavSyncCard_module_default.legend} ${WebdavSyncCard_module_default.legendAction}`,
+							children: [t("partsLegend"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Tooltip, {
+								label: t("refreshStatus"),
+								side: "top",
+								portal: true,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+									variant: "ghost",
+									size: "sm",
+									className: WebdavSyncCard_module_default.legendIcon,
+									icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconRefreshOutlineRegular, {}),
+									"aria-label": t("refreshStatus"),
+									onClick: () => props.refresh()
+								})
+							})]
 						}),
 						(state.view?.parts ?? []).filter(isToggledPart).map((part) => {
 							const on = state[part.part];
@@ -766,6 +1083,13 @@ window.__ModuleLoader__.load({
 							]
 						})
 					] }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ManualBackupPanel, {
+						...props,
+						t,
+						state,
+						busy,
+						partName: (part) => t(PART_NAME[part])
+					}),
 					state.view?.notice !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: WebdavSyncCard_module_default.notice,
 						children: [
@@ -939,12 +1263,13 @@ window.__ModuleLoader__.load({
 		//#endregion
 		//#region src/client/api.ts
 		/** Send one JSON request and fold every failure into a message. */
-		async function send(method, url, body) {
+		async function send(method, url, body, signal) {
 			let response;
 			try {
 				response = await fetch(url, {
 					method,
 					cache: "no-store",
+					...signal === void 0 ? {} : { signal },
 					headers: { "content-type": "application/json" },
 					...body === void 0 ? {} : { body: JSON.stringify(body) }
 				});
@@ -975,9 +1300,24 @@ window.__ModuleLoader__.load({
 				data: payload
 			};
 		}
-		/** Everything the card draws from, including which parts disagree. */
-		function requestStatus() {
-			return send("GET", ROUTE_STATUS);
+		/** Bound status reads (including the body), without timing out long sync writes. */
+		async function requestStatus() {
+			const controller = new AbortController();
+			let timer;
+			const timeout = new Promise((resolve) => {
+				timer = setTimeout(() => {
+					resolve({
+						ok: false,
+						error: "读取同步状态超时（10 秒）"
+					});
+					controller.abort();
+				}, 1e4);
+			});
+			try {
+				return await Promise.race([send("GET", ROUTE_STATUS, void 0, controller.signal), timeout]);
+			} finally {
+				clearTimeout(timer);
+			}
 		}
 		/** Store the address, account, passphrase and part switches. */
 		function requestConfigure(body) {
@@ -1019,6 +1359,14 @@ window.__ModuleLoader__.load({
 		function requestOff() {
 			return send("POST", ROUTE_OFF, {});
 		}
+		/** Write one sealed backup file into a folder this computer can reach. */
+		function requestExport(body) {
+			return send("POST", ROUTE_EXPORT, body);
+		}
+		/** Open a picked backup file's text and put what it holds on this computer. */
+		function requestImport(body) {
+			return send("POST", ROUTE_IMPORT, body);
+		}
 		//#endregion
 		//#region src/client/card-store.ts
 		/**
@@ -1060,13 +1408,24 @@ window.__ModuleLoader__.load({
 			installFailed: false,
 			keysProblems: [],
 			reloadNeeded: false,
-			confirm: ""
+			confirm: "",
+			exportOpen: false,
+			exportPassphrase: "",
+			exportDir: "",
+			importOpen: false,
+			importPassphrase: "",
+			importName: "",
+			importText: "",
+			exported: void 0,
+			imported: void 0
 		};
 		/** The card: an observable snapshot, the staged draft, and every write. */
 		var WebdavSyncCard = class {
 			state = EMPTY;
 			listeners = /* @__PURE__ */ new Set();
 			started = false;
+			statusSequence = 0;
+			statusReads = 0;
 			/** The directory dialog of this deployment, when it has one. */
 			choose;
 			/**
@@ -1151,48 +1510,63 @@ window.__ModuleLoader__.load({
 				this.load();
 			}
 			async load() {
+				this.statusReads += 1;
+				const sequence = ++this.statusSequence;
 				this.set({
 					phase: this.state.view === void 0 ? "loading" : this.state.phase,
 					error: ""
 				});
-				const answer = await requestStatus();
-				if (!answer.ok) {
-					this.set({
-						phase: "ready",
-						error: answer.error,
-						view: void 0
-					});
-					return;
+				try {
+					const answer = await requestStatus();
+					if (sequence !== this.statusSequence) return;
+					if (!answer.ok) {
+						this.set({
+							phase: "ready",
+							error: answer.error
+						});
+						return;
+					}
+					this.adopt(answer.data);
+				} finally {
+					this.statusReads -= 1;
 				}
-				this.adopt(answer.data);
 			}
+			/** A manual status refresh, not a sync and not a reset of the draft. */
 			refresh() {
-				this.load();
+				this.poll();
 			}
-			/**
-			* A read the person did not ask for, for a timer. A first read already in
-			* flight is allowed to land rather than asked for twice, and nothing here ever
-			* reports a failure: the buttons are the paths that say what went wrong, and a
-			* read that quietly could not be answered leaves the card showing the last
-			* thing the host did say.
-			*/
+			/** Periodic and foreground reads share one bounded request per card. */
 			poll() {
-				if (this.state.phase === "loading") return;
+				if (this.state.phase === "loading" || this.statusReads > 0) return;
 				this.reloadStatus();
 			}
 			/** Re-read the status and fold it in without disturbing what is being typed. */
 			async reloadStatus() {
-				const answer = await requestStatus();
-				if (!answer.ok) return;
-				if (this.state.dirty) {
-					this.set({
-						view: answer.data,
-						error: ""
-					});
-					return;
+				this.statusReads += 1;
+				const sequence = ++this.statusSequence;
+				try {
+					const answer = await requestStatus();
+					if (sequence !== this.statusSequence) return;
+					if (!answer.ok) {
+						this.set({
+							phase: "ready",
+							error: answer.error
+						});
+						return;
+					}
+					if (this.state.dirty) {
+						this.set({
+							phase: "ready",
+							view: answer.data,
+							error: ""
+						});
+						return;
+					}
+					this.set({ error: "" });
+					this.adopt(answer.data);
+				} finally {
+					this.statusReads -= 1;
 				}
-				this.set({ error: "" });
-				this.adopt(answer.data);
 			}
 			edit(field, value) {
 				this.set({
@@ -1357,6 +1731,126 @@ window.__ModuleLoader__.load({
 					installFailed: false
 				});
 			}
+			openExport() {
+				this.set({
+					exportOpen: true,
+					importOpen: false,
+					message: "",
+					messageFailed: false
+				});
+			}
+			closeExport() {
+				this.set({
+					exportOpen: false,
+					exportPassphrase: "",
+					exportDir: ""
+				});
+			}
+			editExport(field, value) {
+				if (field === "passphrase") {
+					this.set({ exportPassphrase: value });
+					return;
+				}
+				this.set({ exportDir: value });
+			}
+			pickExportDir() {
+				const choose = this.choose;
+				if (choose === void 0) return;
+				choose().then((chosen) => {
+					const path = (chosen ?? "").trim();
+					if (path !== "") this.set({ exportDir: path });
+				}, () => void 0);
+			}
+			runExport() {
+				const passphrase = this.state.exportPassphrase.trim();
+				if (passphrase === "") {
+					this.set({
+						message: "导出需要一个口令来加密这个文件",
+						messageFailed: true
+					});
+					return;
+				}
+				this.run("export", () => requestExport({
+					passphrase,
+					dir: this.state.exportDir.trim()
+				}), (result) => ({
+					exportOpen: false,
+					exportPassphrase: "",
+					exportDir: "",
+					exported: result,
+					imported: void 0,
+					message: "",
+					messageFailed: false
+				}));
+			}
+			openImport() {
+				this.set({
+					importOpen: true,
+					exportOpen: false,
+					message: "",
+					messageFailed: false
+				});
+			}
+			closeImport() {
+				this.set({
+					importOpen: false,
+					importPassphrase: "",
+					importName: "",
+					importText: ""
+				});
+			}
+			editImport(field, value) {
+				if (field === "passphrase") this.set({ importPassphrase: value });
+			}
+			pickFile(file) {
+				file.text().then((text) => {
+					this.set({
+						importName: file.name,
+						importText: text,
+						message: "",
+						messageFailed: false
+					});
+				}, (cause) => {
+					this.set({
+						importName: "",
+						importText: "",
+						message: `读不了这个文件：${cause instanceof Error ? cause.message : String(cause)}`,
+						messageFailed: true
+					});
+				});
+			}
+			runImport() {
+				const passphrase = this.state.importPassphrase.trim();
+				if (passphrase === "") {
+					this.set({
+						message: "导入需要这个文件的口令",
+						messageFailed: true
+					});
+					return;
+				}
+				if (this.state.importText === "") {
+					this.set({
+						message: "还没有选择文件",
+						messageFailed: true
+					});
+					return;
+				}
+				this.run("import", () => requestImport({
+					passphrase,
+					text: this.state.importText
+				}), (result) => ({
+					importOpen: false,
+					importPassphrase: "",
+					importName: "",
+					importText: "",
+					exported: void 0,
+					imported: result,
+					reloadNeeded: result.reloadNeeded === true,
+					keysProblems: keyProblemsOf(result),
+					message: "",
+					messageFailed: false
+				})).then(() => this.load());
+			}
 			answer(yes) {
 				const kind = this.state.confirm;
 				this.set({ confirm: "" });
@@ -1405,7 +1899,17 @@ window.__ModuleLoader__.load({
 					answer: (yes) => this.answer(yes),
 					install: () => this.install(),
 					dismiss: () => this.dismiss(),
-					closeOutput: () => this.closeOutput()
+					closeOutput: () => this.closeOutput(),
+					openExport: () => this.openExport(),
+					closeExport: () => this.closeExport(),
+					editExport: (field, value) => this.editExport(field, value),
+					pickExportDir: () => this.pickExportDir(),
+					runExport: () => this.runExport(),
+					openImport: () => this.openImport(),
+					closeImport: () => this.closeImport(),
+					editImport: (field, value) => this.editImport(field, value),
+					pickFile: (file) => this.pickFile(file),
+					runImport: () => this.runImport()
 				};
 			}
 		};
@@ -1470,6 +1974,8 @@ window.__ModuleLoader__.load({
 			neverChecked: "尚未检查过",
 			lastSync: "上次同步：{at}",
 			neverSynced: "尚未同步过",
+			refreshStatus: "刷新状态",
+			statusStale: "状态刷新失败，显示的时间可能已过期；将自动重试。",
 			noticeTitle: "上次同步替换了内容",
 			noticeHere: "服务器覆盖了本机：{parts}",
 			noticeThere: "本机覆盖了服务器：{parts}",
@@ -1514,6 +2020,33 @@ window.__ModuleLoader__.load({
 			dirProblem: "「{path}」这个目录没读成：{message}",
 			keyProblem: "「{ref}」这个 API 密钥没读成：{message}",
 			keyStoreProblem: "本机存的 API 密钥没读成：{message}",
+			backupLegend: "手动备份",
+			exportTitle: "导出",
+			exportHint: "把上面这些打包成一个用口令加密的文件，带到另一台电脑",
+			exportAction: "导出…",
+			importTitle: "导入",
+			importHint: "导入从本插件导出的文件，用它替换上面这些内容",
+			importAction: "导入…",
+			exportPassphraseLabel: "这个文件的口令",
+			exportPassphraseHint: "这个口令只用来加密这份文件，与上面的同步口令无关；带到另一台电脑时要一起记住它。",
+			exportDirLabel: "保存到",
+			exportDirHint: "一个目录，或者一个以 .prop 结尾的文件名；留空保存到用户主目录。",
+			exportDirPlaceholder: "留空保存到用户主目录",
+			exportDirChoose: "选择目录",
+			exportConfirm: "导出",
+			exportCancel: "取消",
+			importPassphraseLabel: "文件的口令",
+			importPassphraseHint: "输入导出这份文件时用的那个口令。",
+			importFileLabel: "要导入的文件",
+			importFileHint: "选一个从本插件导出的 .prop 文件。",
+			importFileChoose: "选择文件",
+			importConfirm: "导入",
+			importCancel: "取消",
+			exportDone: "已导出到 {file}（{size}，含{parts}）。",
+			importDone: "已导入：{parts}。",
+			importSame: "已是最新：{parts} 和文件里的一样，没有改动。",
+			importPending: "文件里的插件还没安装，请在下面点「安装缺少的插件」。",
+			importNoFile: "还没有选择文件。",
 			relayLegend: "本机转发",
 			relayEnable: "启用本机转发",
 			relayListening: "正在转发",
@@ -1570,6 +2103,8 @@ window.__ModuleLoader__.load({
 			neverChecked: "Never checked yet",
 			lastSync: "Last sync: {at}",
 			neverSynced: "Never synced yet",
+			refreshStatus: "Refresh status",
+			statusStale: "Status refresh failed; the displayed times may be stale. Retrying automatically.",
 			noticeTitle: "The last sync replaced something",
 			noticeHere: "The server replaced this computer: {parts}",
 			noticeThere: "This computer replaced the server: {parts}",
@@ -1614,6 +2149,33 @@ window.__ModuleLoader__.load({
 			dirProblem: "Could not read the directory {path}: {message}",
 			keyProblem: "Could not read the API key {ref}: {message}",
 			keyStoreProblem: "Could not read the stored API keys: {message}",
+			backupLegend: "Manual backup",
+			exportTitle: "Export",
+			exportHint: "Pack everything above into one passphrase-encrypted file to carry to another computer",
+			exportAction: "Export…",
+			importTitle: "Import",
+			importHint: "Import a file this plugin exported, replacing what is above",
+			importAction: "Import…",
+			exportPassphraseLabel: "Passphrase for this file",
+			exportPassphraseHint: "It seals this file only, not the sync above; you will need it again on the other computer.",
+			exportDirLabel: "Save to",
+			exportDirHint: "A directory, or a file name ending in .prop; blank saves to your home directory.",
+			exportDirPlaceholder: "Blank saves to your home directory",
+			exportDirChoose: "Choose directory",
+			exportConfirm: "Export",
+			exportCancel: "Cancel",
+			importPassphraseLabel: "Passphrase for the file",
+			importPassphraseHint: "The one used when this file was exported.",
+			importFileLabel: "File to import",
+			importFileHint: "Pick a .prop file this plugin exported.",
+			importFileChoose: "Choose file",
+			importConfirm: "Import",
+			importCancel: "Cancel",
+			exportDone: "Exported to {file} ({size}, with {parts}).",
+			importDone: "Imported: {parts}.",
+			importSame: "Already up to date: {parts} match the file, so nothing changed.",
+			importPending: "The file declares plugins that are not installed; use Install below.",
+			importNoFile: "No file chosen yet.",
 			relayLegend: "Forwarding on this computer",
 			relayEnable: "Forward for other programs on this computer",
 			relayListening: "Forwarding",