selfstore 1.8.11 → 1.8.13

package/dist/widgets.js

@@ -130,7 +130,23 @@ img[part~='icon'] {
 	background: color-mix(in srgb, var(--_accent) 10%, transparent);
 }
 [part~='status-ok'] { background: color-mix(in srgb, var(--_ok) 12%, transparent); }
+[part~='status-warn'] { background: color-mix(in srgb, var(--_warn) 12%, transparent); }
 [part~='status-error'] { background: color-mix(in srgb, var(--_danger) 12%, transparent); }
+/* The state, said in one glyph before the sentence is read: a saved backup is a
+   tick, anything asking for a gesture is a mark. It carries the severity color
+   the dot would have carried, and reads at a glance from across the page. */
+span[part~='status-glyph'] {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 1.5em;
+	height: 1.5em;
+	border-radius: 50%;
+	flex-shrink: 0;
+	font-size: 0.85em;
+	font-weight: 700;
+	background: color-mix(in srgb, currentColor 15%, transparent);
+}
 [part='spinner'] {
 	width: 0.7em; height: 0.7em; flex-shrink: 0;
 	border-radius: 50%;
@@ -406,6 +422,42 @@ var FlowWidget = class extends HTMLElement {
   packs() {
     return {};
   }
+  #store = null;
+  #icons = {};
+  /**
+   * The store this widget reads: the simple facade (anything exposing
+   * `flowHost`) or a hand-built FlowHost. Idempotent, so a host may assign it
+   * from a reactive effect that runs more than once.
+   *
+   * Every widget over a store had written this same pair, plus the host lookup
+   * and the glyph map beside it - the same fifteen lines in six files, each one
+   * a place where a fix could land in five.
+   */
+  get store() {
+    return this.#store;
+  }
+  set store(v) {
+    if (v === this.#store) return;
+    this.#store = v;
+    this.storeChanged();
+    this.follow(this.hostOf());
+  }
+  /** Called before the widget follows a newly assigned store, for one that has
+   *  its own view state to drop (a journey in progress belongs to the old one). */
+  storeChanged() {
+  }
+  /** The ports behind the current store, or null while it is unwired. */
+  hostOf() {
+    return hostOf(this.#store);
+  }
+  /** Optional glyph per destination kind, same contract in every widget. */
+  get icons() {
+    return this.#icons;
+  }
+  set icons(v) {
+    this.#icons = v ?? {};
+    this.rerender();
+  }
   /** Follow an engine: rerender on every notification, replacing any previous
    *  subscription. A no-op before connection and on a null host, so a host may
    *  assign the store from a reactive effect that runs more than once. */
@@ -460,6 +512,21 @@ var FlowWidget = class extends HTMLElement {
     if (!vars) return copy;
     return copy.replace(/\{(\w+)\}/g, (whole, name) => vars[name] ?? whole);
   }
+  /**
+   * "just now", "3 minutes ago", "yesterday" - in the widget's language, from
+   * Intl rather than from five label keys per language. The word for the first
+   * minute is passed in: it is the one part Intl says badly ("this minute"),
+   * and each widget words it in its own register.
+   */
+  since(ts, justNow) {
+    const mins = Math.floor((Date.now() - ts) / 6e4);
+    if (mins < 1) return justNow;
+    const rtf = new Intl.RelativeTimeFormat(this.langTag(), { numeric: "auto" });
+    if (mins < 60) return rtf.format(-mins, "minute");
+    const hours = Math.floor(mins / 60);
+    if (hours < 24) return rtf.format(-hours, "hour");
+    return new Date(ts).toLocaleDateString(this.langTag());
+  }
   /** A heading an empty-string label removes: labels = { 'share.title': '' }
    *  hides that heading (the host page already says it) without a fork.
    *  Append through put(), which skips the null. */
@@ -1993,8 +2060,25 @@ var SelfstoreJoinElement = class extends FlowWidget {
   }
 };
 
-// src/widgets/status.ts
+// src/widgets/kinds.ts
 var EN4 = {
+  "destination.kind.drive": "Google Drive",
+  "destination.kind.file": "A file on this device",
+  "destination.kind.webdav": "Your own server",
+  "destination.kind.s3": "Your own bucket",
+  "destination.kind.device": "This device only"
+};
+var FR4 = {
+  "destination.kind.file": "Un fichier sur cet appareil",
+  "destination.kind.webdav": "Votre serveur",
+  "destination.kind.s3": "Votre bucket",
+  "destination.kind.device": "Cet appareil seulement"
+};
+
+// src/widgets/status.ts
+var EN5 = {
+  ...EN4,
+  "status.justNow": "just now",
   "status.ephemeral": "Nothing is saved",
   "status.cacheOnly": "Never saved anywhere yet",
   "status.saving": "Saving...",
@@ -2008,7 +2092,9 @@ var EN4 = {
   "status.action.reconnect": "Reconnect",
   "status.action.unlock": "Unlock"
 };
-var FR4 = {
+var FR5 = {
+  ...FR4,
+  "status.justNow": "a l'instant",
   "status.ephemeral": "Rien n'est enregistr\xE9",
   "status.cacheOnly": "Vos donn\xE9es n'ont jamais \xE9t\xE9 enregistr\xE9es ailleurs",
   "status.saving": "Enregistrement...",
@@ -2026,23 +2112,12 @@ var SelfstoreStatusElement = class extends FlowWidget {
   static get observedAttributes() {
     return ["variant"];
   }
-  #store = null;
   #variant = "row";
-  #icons = {};
   defaults() {
-    return EN4;
+    return EN5;
   }
   packs() {
-    return { fr: FR4 };
-  }
-  /** The simple store (anything exposing `flowHost`), or a hand-built FlowHost. */
-  get store() {
-    return this.#store;
-  }
-  set store(v) {
-    if (v === this.#store) return;
-    this.#store = v;
-    this.wire();
+    return { fr: FR5 };
   }
   /** 'row' (dot + text + action) or 'dot' (the dot alone). Also the attribute. */
   get variant() {
@@ -2052,31 +2127,16 @@ var SelfstoreStatusElement = class extends FlowWidget {
     this.#variant = v === "dot" ? "dot" : "row";
     this.rerender();
   }
-  /** Optional icon per target kind (e.g. { drive: url, file: url }), shown
-   *  before the text in the row variant. Same contract as the connect cards. */
-  get icons() {
-    return this.#icons;
-  }
-  set icons(v) {
-    this.#icons = v ?? {};
-    this.rerender();
-  }
   attributeChangedCallback(name, _old, value) {
     if (name === "variant") this.variant = value;
   }
   connectedCallback() {
     super.connectedCallback();
     if (this.hasAttribute("variant")) this.variant = this.getAttribute("variant");
-    this.wire();
-  }
-  host() {
-    return hostOf(this.#store);
-  }
-  wire() {
-    this.follow(this.host());
+    this.follow(this.hostOf());
   }
   view(into) {
-    const host = this.host();
+    const host = this.hostOf();
     if (!host) return;
     const { status, targetKind, label } = host.engine.state;
     const sansLieu = (cle) => {
@@ -2084,6 +2144,7 @@ var SelfstoreStatusElement = class extends FlowWidget {
       const copie = this.t(jumelle);
       return copie === jumelle ? this.t(cle) : copie;
     };
+    const { lastSavedAt } = host.engine.state;
     const text = label ? this.t(status.labelKey, { label }) : sansLieu(status.labelKey);
     const dot = h("span", {
       part: `status-dot sev-${status.severity}`,
@@ -2104,20 +2165,36 @@ var SelfstoreStatusElement = class extends FlowWidget {
       );
       return;
     }
-    const icon = this.#icons[targetKind];
+    const TINT = {
+      ok: "status-ok",
+      warn: "status-warn",
+      danger: "status-error",
+      info: ""
+    };
+    const GLYPH = { ok: "\u2713", warn: "!", danger: "!", info: "" };
+    const glyph = GLYPH[status.severity];
+    const icon = this.icons[targetKind];
     const where = this.t(`status.where.${targetKind}`);
-    const sub = where !== `status.where.${targetKind}` ? where : label ?? "";
+    const kindName = this.t(`destination.kind.${targetKind}`);
+    const named = kindName === `destination.kind.${targetKind}` ? null : kindName;
+    const own = targetKind === "drive" ? null : label;
+    const place = where !== `status.where.${targetKind}` ? where : own ?? named ?? label ?? "";
+    const when = lastSavedAt ? this.since(lastSavedAt, this.t("status.justNow")) : "";
+    const sub = [place, status.state === "saved" ? when : ""].filter(Boolean).join(", ");
+    const title = sub ? sansLieu(status.labelKey) : text;
     put(
       into,
       h(
         "div",
-        { part: "row status-row" },
-        dot,
+        { part: `status row status-row ${TINT[status.severity] ?? ""}` },
+        // The severity colors the glyph, not the box: tinting the whole line
+        // turns a title into a warning about itself.
+        glyph ? h("span", { part: `status-glyph sev-${status.severity}`, "aria-hidden": "true" }, glyph) : dot,
         icon ? h("img", { part: "icon", src: icon, alt: "" }) : null,
         h(
           "div",
           {},
-          h("div", { part: "title" }, text),
+          h("div", { part: "title" }, title),
           sub ? h("div", { part: "sub" }, sub) : null
         ),
         status.actionable && status.action ? h(
@@ -2134,7 +2211,7 @@ var SelfstoreStatusElement = class extends FlowWidget {
 };
 
 // src/widgets/backups.ts
-var EN5 = {
+var EN6 = {
   "backups.mine.heading": "My backups",
   "backups.mine.personal": "Main backup",
   "backups.active": "Active",
@@ -2191,7 +2268,7 @@ var EN5 = {
   "backups.replica.s3.secret": "Secret access key",
   "error.generic": "That did not work. Check the connection and try again."
 };
-var FR5 = {
+var FR6 = {
   "backups.mine.heading": "Sauvegardes",
   "backups.mine.personal": "Sauvegarde principale",
   "backups.active": "Active",
@@ -2300,10 +2377,10 @@ var SelfstoreBackupsElement = class extends FlowWidget {
   #withShare = true;
   #withShared = true;
   defaults() {
-    return EN5;
+    return EN6;
   }
   packs() {
-    return { fr: FR5 };
+    return { fr: FR6 };
   }
   /** The headless manager this panel drives (see 'selfstore/backups'). */
   get manager() {
@@ -3318,14 +3395,14 @@ var SelfstoreBackupsElement = class extends FlowWidget {
 var pillStyle = "display:inline-block;font-size:0.72em;font-weight:600;line-height:1.6;padding:0 0.55em;border-radius:999px;border:1px solid var(--_border)";
 
 // src/widgets/gate.ts
-var EN6 = {
+var EN7 = {
   "gate.title": "Where should your data live?",
   "gate.hint": "It is encrypted on this device. Choose where to keep it and it gets saved there for you from now on.",
   "gate.fine": "",
   "gate.defer": "Later - keep it in this browser only",
   "gate.defer.note": "Data kept only in this browser is lost if its storage is cleared."
 };
-var FR6 = {
+var FR7 = {
   "gate.title": "O\xF9 enregistrer vos donn\xE9es ?",
   "gate.hint": "Elles sont chiffr\xE9es sur cet appareil. Choisissez une sauvegarde : tout y sera enregistr\xE9 automatiquement.",
   "gate.fine": "",
@@ -3389,10 +3466,10 @@ var SelfstoreGateElement = class extends FlowWidget {
   #open = false;
   #connect = null;
   defaults() {
-    return EN6;
+    return EN7;
   }
   packs() {
-    return { fr: FR6 };
+    return { fr: FR7 };
   }
   /** The simple store (anything exposing `flowHost`), or a hand-built FlowHost. */
   get store() {
@@ -3628,40 +3705,31 @@ var SelfstoreGateElement = class extends FlowWidget {
   }
 };
 
-// src/widgets/kinds.ts
-var EN7 = {
-  "destination.kind.drive": "Google Drive",
-  "destination.kind.file": "A file on this device",
-  "destination.kind.webdav": "Your own server",
-  "destination.kind.s3": "Your own bucket",
-  "destination.kind.device": "This device only"
-};
-var FR7 = {
-  "destination.kind.file": "Un fichier sur cet appareil",
-  "destination.kind.webdav": "Votre serveur",
-  "destination.kind.s3": "Votre bucket",
-  "destination.kind.device": "Cet appareil seulement"
-};
-
 // src/widgets/destination.ts
 var EN8 = {
-  ...EN7,
+  ...EN4,
   "destination.heading": "Where your data is kept",
   "destination.encrypted": "Password-protected",
+  "destination.active": "Active",
+  "destination.reach.drive": "On all your devices",
+  "destination.reach.file": "",
   "destination.export": "Export a copy",
   "destination.exported": "The copy is written.",
   "destination.exportCancelled": "Nothing was written.",
   "destination.restore": "Restore a copy",
-  "destination.change": "Change destination",
+  "destination.change": "Change backup",
   "destination.detach": "Stop saving here",
   "destination.detached": "Stopped. Your data stays on this device.",
   "destination.back": "Back",
   "error.generic": "Something went wrong."
 };
 var FR8 = {
-  ...FR7,
+  ...FR4,
   "destination.heading": "O\xF9 vos donn\xE9es sont enregistr\xE9es",
   "destination.encrypted": "Prot\xE9g\xE9e par un mot de passe",
+  "destination.active": "Active",
+  "destination.reach.drive": "Sur tous vos appareils",
+  "destination.reach.file": "",
   "destination.export": "Exporter une copie",
   "destination.exported": "La copie est \xE9crite.",
   "destination.exportCancelled": "Rien n'a \xE9t\xE9 \xE9crit.",
@@ -3689,12 +3757,9 @@ var DESTINATION_STYLES = `
 }
 `;
 var SelfstoreDestinationElement = class extends FlowWidget {
-  #store = null;
   #targets = null;
   #account = null;
-  #icons = {};
   #confirm = null;
-  #changing = false;
   #busy = false;
   #message = null;
   defaults() {
@@ -3707,15 +3772,6 @@ var SelfstoreDestinationElement = class extends FlowWidget {
     super();
     this.root.append(h("style", {}, DESTINATION_STYLES));
   }
-  /** The simple store (anything exposing `flowHost`), or a hand-built FlowHost. */
-  get store() {
-    return this.#store;
-  }
-  set store(v) {
-    if (v === this.#store) return;
-    this.#store = v;
-    this.wire();
-  }
   /** The destinations offered when the user changes their mind. Given them, the
    *  panel runs the connect journey in place; without them the button is absent
    *  rather than dead - a host that cannot offer a choice should not show one. */
@@ -3736,14 +3792,6 @@ var SelfstoreDestinationElement = class extends FlowWidget {
     this.#account = v || null;
     this.rerender();
   }
-  /** Optional glyph per destination kind, same contract as the connect cards. */
-  get icons() {
-    return this.#icons;
-  }
-  set icons(v) {
-    this.#icons = v ?? {};
-    this.rerender();
-  }
   /** Veto on what is destructive. Returns false (or throws) to stop; absent
    *  means proceed. The panel never invents its own confirm dialog: an app has
    *  its own words and its own modal. */
@@ -3755,13 +3803,7 @@ var SelfstoreDestinationElement = class extends FlowWidget {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.wire();
-  }
-  host() {
-    return hostOf(this.#store);
-  }
-  wire() {
-    this.follow(this.host());
+    this.follow(this.hostOf());
   }
   /** Run a gesture, keeping the panel honest while it is in flight. */
   async run(job) {
@@ -3781,7 +3823,7 @@ var SelfstoreDestinationElement = class extends FlowWidget {
    *  nothing, so it must not clear the pending-export nudge nor claim success -
    *  that is the download that lies about itself. */
   exportCopy() {
-    const host = this.host();
+    const host = this.hostOf();
     if (!host) return Promise.resolve();
     return this.run(async () => {
       const blob = await host.engine.exportBlob();
@@ -3794,7 +3836,7 @@ var SelfstoreDestinationElement = class extends FlowWidget {
   /** Stop saving to this destination. The local data stays, and so does the
    *  backup already written: this detaches, it never deletes. */
   detach(label) {
-    const host = this.host();
+    const host = this.hostOf();
     if (!host) return Promise.resolve();
     return this.run(async () => {
       try {
@@ -3807,49 +3849,21 @@ var SelfstoreDestinationElement = class extends FlowWidget {
       return this.t("destination.detached");
     });
   }
-  /** The connect journey, in place. Built like the gate builds it, so the
-   *  destinations, the password step and the cancel path are the library's
-   *  tested ones rather than a second implementation. */
-  connectView(into) {
-    const el = document.createElement(
-      siblingTag(this.localName, "destination", "connect")
-    );
-    el.store = this.#store;
-    el.targets = this.#targets;
-    el.icons = this.#icons;
-    el.labels = this.labels;
-    const done = () => {
-      this.#changing = false;
-      this.rerender();
-    };
-    el.addEventListener("selfstore-connected", done);
-    el.addEventListener("selfstore-cancelled", done);
-    put(
-      into,
-      h(
-        "button",
-        { part: "link destination-back", type: "button", onclick: done },
-        this.t("destination.back")
-      ),
-      el
-    );
-  }
   view(into) {
-    const host = this.host();
+    const host = this.hostOf();
     if (!host) return;
-    if (this.#changing && this.#targets) return this.connectView(into);
     const { targetKind, label, encrypted } = host.engine.state;
     const kind = this.t(`destination.kind.${targetKind}`);
     const title = kind === `destination.kind.${targetKind}` ? label ?? targetKind : kind;
-    const sub = [this.#account, label && label !== title ? label : null].filter(Boolean).join(" \xB7 ");
-    const icon = this.#icons[targetKind];
+    const sub = this.#account || (label && label !== title ? label : null);
+    const icon = this.icons[targetKind];
     const status = document.createElement(
       siblingTag(this.localName, "destination", "status")
     );
     status.setAttribute("variant", "row");
     status.labels = this.labels;
-    status.icons = this.#icons;
-    status.store = this.#store;
+    status.icons = this.icons;
+    status.store = this.store;
     const act = (key, part, onclick) => {
       const label2 = this.t(key);
       if (!label2) return null;
@@ -3859,8 +3873,14 @@ var SelfstoreDestinationElement = class extends FlowWidget {
         label2
       );
     };
+    const durable = targetKind !== "device" && targetKind !== "ephemeral";
+    const reach = this.t(`destination.reach.${targetKind}`);
+    const line = [sub, reach === `destination.reach.${targetKind}` ? null : reach].filter(Boolean).join(" \xB7 ");
     put(
       into,
+      // The situation first, then what holds it: a panel that opens on a card
+      // makes the reader work out from the name whether anything is wrong.
+      status,
       this.heading("destination-heading", "destination.heading"),
       h(
         "div",
@@ -3869,12 +3889,18 @@ var SelfstoreDestinationElement = class extends FlowWidget {
         h(
           "div",
           {},
-          h("div", { part: "title" }, title),
-          sub ? h("div", { part: "sub" }, sub) : null,
-          encrypted ? h("div", { part: "sub" }, this.t("destination.encrypted")) : null
+          h(
+            "div",
+            { part: "title" },
+            title,
+            // Only where there IS a backup: "Active" over the device-only
+            // state would badge the absence of one as a live destination.
+            durable ? h("span", { part: "tag destination-active" }, this.t("destination.active")) : null,
+            encrypted ? h("span", { part: "tag destination-encrypted" }, this.t("destination.encrypted")) : null
+          ),
+          line ? h("div", { part: "sub" }, line) : null
         )
       ),
-      status,
       h(
         "div",
         { part: "destination-actions" },
@@ -3886,10 +3912,12 @@ var SelfstoreDestinationElement = class extends FlowWidget {
           "destination-restore",
           () => this.emit("selfstore-destination-action", { action: "restore" })
         ),
-        this.#targets ? act("destination.change", "destination-change", () => {
-          this.#changing = true;
-          this.rerender();
-        }) : null,
+        // Changing backup lets the destination go and stops there: the
+        // first-run screen the app already mounts is what asks where to go
+        // next. A second connect journey inside this panel gave the same
+        // decision two mechanics depending on which control was pressed, and
+        // only one of them could be reached from anywhere in the app.
+        this.#targets ? act("destination.change", "destination-change", () => void this.detach(label)) : null,
         act("destination.detach", "destination-detach", () => void this.detach(label))
       ),
       this.#message ? h("div", { part: "sub destination-message", role: "status" }, this.#message) : null
@@ -4036,7 +4064,7 @@ var SelfstoreStorageElement = class extends FlowWidget {
 
 // src/widgets/account.ts
 var EN9 = {
-  ...EN7,
+  ...EN4,
   "account.open": "Storage",
   "account.settings": "Settings",
   "account.change": "Change backup",
@@ -4044,7 +4072,7 @@ var EN9 = {
   "account.justNow": "just now"
 };
 var FR9 = {
-  ...FR7,
+  ...FR4,
   "account.open": "Sauvegarde",
   "account.settings": "Param\xE8tres",
   "account.change": "Changer de sauvegarde",
@@ -4088,7 +4116,8 @@ var ACCOUNT_STYLES = `
 	right: 0;
 	top: calc(100% + 0.4rem);
 	z-index: 20;
-	min-width: min(20rem, calc(100vw - 2rem));
+	min-width: min(17rem, calc(100vw - 2rem));
+	max-width: min(24rem, calc(100vw - 2rem));
 	display: flex;
 	flex-direction: column;
 	align-items: stretch;
@@ -4113,7 +4142,7 @@ var ACCOUNT_STYLES = `
 	cursor: pointer;
 }
 [part~='account-card']:hover { background: color-mix(in srgb, currentColor 7%, transparent); }
-[part~='account-logo'] { width: 1.5rem; height: 1.5rem; flex: none; }
+[part~='account-logo'] { width: 1.4rem; height: 1.4rem; object-fit: contain; flex: none; }
 [part~='account-text'] {
 	display: flex;
 	flex-direction: column;
@@ -4121,26 +4150,47 @@ var ACCOUNT_STYLES = `
 	min-width: 0;
 	line-height: 1.35;
 }
-[part~='account-title'] { font-weight: 600; }
+[part~='account-title'] {
+	font-weight: 600;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+/* An address is long and its END is the part that identifies it, so it gets a
+   line of its own and an ellipsis rather than a wrap that pushes the status
+   line out of the card. */
 [part~='account-mail'], [part~='account-line'] {
-	font-size: 0.875rem;
+	font-size: 0.8125rem;
 	color: var(--_ink-dim);
-	overflow-wrap: anywhere;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
+/* A menu item is a plain line of text, not a link: underlined blue links in a
+   menu read as four different destinations to weigh, which is exactly the
+   feeling this menu exists to remove. */
 [part~='account-item'] {
 	text-align: start;
-	padding: 0.4rem 0.6rem;
+	padding: 0.5rem 0.55rem;
+	border: none;
+	background: none;
 	border-radius: calc(var(--_radius) * 0.75);
+	font: inherit;
+	font-size: 0.8125rem;
 	text-decoration: none;
 	color: inherit;
+	cursor: pointer;
+	white-space: nowrap;
 }
 [part~='account-item']:hover { background: color-mix(in srgb, currentColor 7%, transparent); }
+/* Letting a destination go is the one gesture here that takes something away:
+   it wears the colour every other screen uses for that, and nothing else does. */
+[part~='account-change'] { color: var(--_danger); }
+[part~='account-change']:hover { background: color-mix(in srgb, var(--_danger) 10%, transparent); }
 [part~='account-sep'] { height: 1px; background: var(--_border); margin: 0.2rem 0.3rem; }
 `;
 var TICK_MS = 3e4;
 var SelfstoreAccountElement = class extends FlowWidget {
-  #store = null;
-  #icons = {};
   #confirm = null;
   #open = false;
   #timer = null;
@@ -4155,35 +4205,16 @@ var SelfstoreAccountElement = class extends FlowWidget {
     super();
     this.root.append(h("style", {}, ACCOUNT_STYLES));
   }
-  /** The simple store (anything exposing `flowHost`), or a hand-built FlowHost.
-   *  A simple store also answers `account` on its own, so nothing else is
-   *  needed to name who holds the backup. */
-  get store() {
-    return this.#store;
-  }
-  set store(v) {
-    if (v === this.#store) return;
-    this.#store = v;
-    this.follow(hostOf(v));
-  }
   /** Who holds the backup ("someone@example.com"). Absent: whatever the store
    *  knows. A brand name is not an address, and several accounts look alike. */
   #account = null;
   get account() {
-    return this.#account ?? this.#store?.account ?? null;
+    return this.#account ?? this.store?.account ?? null;
   }
   set account(v) {
     this.#account = v || null;
     this.rerender();
   }
-  /** Optional glyph per destination kind, same contract as the connect cards. */
-  get icons() {
-    return this.#icons;
-  }
-  set icons(v) {
-    this.#icons = v ?? {};
-    this.rerender();
-  }
   /** Veto on changing backup, which leaves the app with no destination until
    *  the user picks one. Returns false (or throws) to stop. */
   get confirmAction() {
@@ -4205,7 +4236,7 @@ var SelfstoreAccountElement = class extends FlowWidget {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.follow(hostOf(this.#store));
+    this.follow(this.hostOf());
   }
   disconnectedCallback() {
     this.unsub?.();
@@ -4245,17 +4276,6 @@ var SelfstoreAccountElement = class extends FlowWidget {
     const kind = this.t(`destination.kind.${targetKind}`);
     return kind === `destination.kind.${targetKind}` ? label ?? targetKind : kind;
   }
-  /** "just now", "3 minutes ago", "yesterday" - in the page's language, from
-   *  Intl rather than from five label keys per language. */
-  when(ts) {
-    const mins = Math.floor((Date.now() - ts) / 6e4);
-    if (mins < 1) return this.t("account.justNow");
-    const rtf = new Intl.RelativeTimeFormat(this.langTag(), { numeric: "auto" });
-    if (mins < 60) return rtf.format(-mins, "minute");
-    const hours = Math.floor(mins / 60);
-    if (hours < 24) return rtf.format(-hours, "hour");
-    return new Date(ts).toLocaleDateString(this.langTag());
-  }
   /**
    * The one line under the account. A plain "saved" is the only state this
    * element words itself, because it is the only one with nothing to do about
@@ -4269,15 +4289,15 @@ var SelfstoreAccountElement = class extends FlowWidget {
       return h(
         "span",
         { part: "account-line" },
-        this.t("account.saved", { when: this.when(lastSavedAt) })
+        this.t("account.saved", { when: this.since(lastSavedAt, this.t("account.justNow")) })
       );
     const el = document.createElement(
       siblingTag(this.localName, "account", "status")
     );
     el.setAttribute("variant", "row");
     el.labels = this.labels;
-    el.icons = this.#icons;
-    el.store = this.#store;
+    el.icons = this.icons;
+    el.store = this.store;
     return el;
   }
   /** Ask for the settings. The host owns the route, so this only says that it
@@ -4290,7 +4310,7 @@ var SelfstoreAccountElement = class extends FlowWidget {
   /** Change backup: detach, and let the first-run screen take it from there.
    *  The data stays; only the destination is let go. */
   async change() {
-    const host = hostOf(this.#store);
+    const host = this.hostOf();
     if (!host) return;
     this.open = false;
     const label = host.engine.state.label;
@@ -4303,7 +4323,7 @@ var SelfstoreAccountElement = class extends FlowWidget {
   }
   card(host) {
     const { targetKind } = host.engine.state;
-    const icon = this.#icons[targetKind];
+    const icon = this.icons[targetKind];
     const mail = this.account;
     return h(
       "button",
@@ -4325,7 +4345,7 @@ var SelfstoreAccountElement = class extends FlowWidget {
     );
   }
   view(into) {
-    const host = hostOf(this.#store);
+    const host = this.hostOf();
     if (!host) return;
     const { status } = host.engine.state;
     const trigger = h(
@@ -4351,7 +4371,7 @@ var SelfstoreAccountElement = class extends FlowWidget {
       h(
         "button",
         {
-          part: "link account-item",
+          part: "account-item",
           type: "button",
           role: "menuitem",
           onclick: () => this.settings()
@@ -4361,7 +4381,7 @@ var SelfstoreAccountElement = class extends FlowWidget {
       h(
         "button",
         {
-          part: "link account-item account-change",
+          part: "account-item account-change",
           type: "button",
           role: "menuitem",
           onclick: () => void this.change()