selfstore 1.8.10 → 1.8.12

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%;
@@ -354,6 +370,10 @@ button[part~='menu-item-danger'] { color: var(--_danger); }
 	}
 }
 `;
+function siblingTag(own, self, name) {
+  const suffix = `-${self}`;
+  return own.endsWith(suffix) ? `${own.slice(0, -suffix.length)}-${name}` : `selfstore-${name}`;
+}
 function put(el, ...children) {
   for (const c of children) {
     if (c == null) continue;
@@ -381,12 +401,15 @@ function h(tag, attrs = {}, ...children) {
 function upgradeOwnProperties(el) {
   const proto = Object.getPrototypeOf(el);
   const bag = el;
+  const claimed = /* @__PURE__ */ new Set();
   for (const name of Object.getOwnPropertyNames(el)) {
     if (!(name in proto)) continue;
     const value = bag[name];
     delete bag[name];
     bag[name] = value;
+    claimed.add(name);
   }
+  return claimed;
 }
 var FlowWidget = class extends HTMLElement {
   root;
@@ -399,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. */
@@ -426,13 +485,17 @@ var FlowWidget = class extends HTMLElement {
     this.overrides = map ?? {};
     this.rerender();
   }
-  /** The shipped translation for the page's language, if the widget has one.
-   *  An explicit `lang` on the element (or on any ancestor) wins over the
-   *  document's, which wins over the browser's, so a host that already sets
-   *  `<html lang>` gets translated copy without writing a single label. */
+  /** The language this widget speaks. An explicit `lang` on the element (or on
+   *  any ancestor) wins over the document's, which wins over the browser's, so
+   *  a host that already sets `<html lang>` gets translated copy without
+   *  writing a single label. Also what to hand `Intl` when a widget formats a
+   *  date or a duration itself. */
+  langTag() {
+    return this.closest("[lang]")?.getAttribute("lang") || document.documentElement.lang || navigator.language || "en";
+  }
+  /** The shipped translation for the page's language, if the widget has one. */
   localized() {
-    const tag = this.closest("[lang]")?.getAttribute("lang") || document.documentElement.lang || navigator.language || "";
-    return this.packs()[tag.slice(0, 2).toLowerCase()] ?? {};
+    return this.packs()[this.langTag().slice(0, 2).toLowerCase()] ?? {};
   }
   /**
    * The copy for a key, with `{placeholders}` filled in.
@@ -449,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. */
@@ -468,8 +546,40 @@ var FlowWidget = class extends HTMLElement {
   /** Hands back whatever the host set before this class existed, then the
    *  subclass reads its attributes and wires itself. Subclasses override this
    *  and call `super.connectedCallback()` FIRST, for that reason. */
+  /**
+   * What the HOST decided before this element could hear it.
+   *
+   * Assigning a property to an element that has not upgraded yet is what every
+   * framework does - the widget bundle is loaded lazily, the assignment is
+   * not - and `upgradeOwnProperties` replays those assignments through the
+   * real setters. Then reading the same knob back from the markup would undo
+   * them: an attribute is a DEFAULT written by the page, a property is a
+   * decision taken by the app, and the decision has to win. A widget reads its
+   * attributes through this set.
+   */
+  assigned = /* @__PURE__ */ new Set();
   connectedCallback() {
-    upgradeOwnProperties(this);
+    for (const name of upgradeOwnProperties(this)) this.assigned.add(name);
+  }
+  /**
+   * An attribute the host has NOT already decided in code, or null.
+   *
+   * Two ways it can have decided, and both have to be caught. It replayed
+   * through `assigned` on connect - or it has not been replayed yet, and its
+   * value is sitting on the element as an own property shadowing this very
+   * accessor. That second case is the one that bit: on upgrade the browser
+   * fires attributeChangedCallback BEFORE connectedCallback, so a widget
+   * writing the attribute through its own setter wrote into the shadowing own
+   * property instead - overwriting the decision it was about to replay.
+   */
+  attr(name) {
+    if (this.assigned.has(name) || Object.hasOwn(this, name)) return null;
+    return this.getAttribute(name);
+  }
+  /** The same, as a boolean: absent is null, anything but "false" is true. */
+  flag(name) {
+    const value = this.attr(name);
+    return value === null ? null : value !== "false";
   }
   emit(name, detail) {
     this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
@@ -1950,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...",
@@ -1965,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...",
@@ -1983,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() {
@@ -2009,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) => {
@@ -2041,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}`,
@@ -2061,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(
@@ -2091,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",
@@ -2148,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",
@@ -2257,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() {
@@ -3275,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": "",
@@ -3346,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() {
@@ -3448,16 +3568,18 @@ var SelfstoreGateElement = class extends FlowWidget {
     super();
     this.root.append(h("style", {}, GATE_STYLES));
   }
-  attributeChangedCallback(name, _old, value) {
-    if (name === "armed") this.armed = value !== "false";
-    if (name === "deferrable") this.deferrable = value !== "false";
+  attributeChangedCallback(name) {
+    const value = this.flag(name);
+    if (value === null) return;
+    if (name === "armed") this.armed = value;
+    if (name === "deferrable") this.deferrable = value;
   }
   connectedCallback() {
     super.connectedCallback();
-    if (this.hasAttribute("armed")) this.armed = this.getAttribute("armed") !== "false";
-    if (this.hasAttribute("deferrable")) {
-      this.deferrable = this.getAttribute("deferrable") !== "false";
-    }
+    const armed = this.flag("armed");
+    if (armed !== null) this.armed = armed;
+    const deferrable = this.flag("deferrable");
+    if (deferrable !== null) this.deferrable = deferrable;
     this.wire();
   }
   host() {
@@ -3584,14 +3706,13 @@ var SelfstoreGateElement = class extends FlowWidget {
 };
 
 // src/widgets/destination.ts
-var EN7 = {
+var EN8 = {
+  ...EN4,
   "destination.heading": "Where your data is kept",
-  "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",
   "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.",
@@ -3602,13 +3723,13 @@ var EN7 = {
   "destination.back": "Back",
   "error.generic": "Something went wrong."
 };
-var FR7 = {
+var FR8 = {
+  ...FR4,
   "destination.heading": "O\xF9 vos donn\xE9es sont enregistr\xE9es",
-  "destination.kind.file": "Un fichier sur cet appareil",
-  "destination.kind.webdav": "Votre serveur",
-  "destination.kind.s3": "Votre bucket",
-  "destination.kind.device": "Cet appareil seulement",
   "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.",
@@ -3635,38 +3756,23 @@ var DESTINATION_STYLES = `
 	font-weight: 600;
 }
 `;
-function siblingTag(own, name) {
-  const suffix = "-destination";
-  return own.endsWith(suffix) ? `${own.slice(0, -suffix.length)}-${name}` : `selfstore-${name}`;
-}
 var SelfstoreDestinationElement = class extends FlowWidget {
-  #store = null;
   #targets = null;
   #account = null;
-  #icons = {};
   #confirm = null;
   #changing = false;
   #busy = false;
   #message = null;
   defaults() {
-    return EN7;
+    return EN8;
   }
   packs() {
-    return { fr: FR7 };
+    return { fr: FR8 };
   }
   constructor() {
     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. */
@@ -3687,14 +3793,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. */
@@ -3706,13 +3804,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) {
@@ -3732,7 +3824,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();
@@ -3745,7 +3837,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 {
@@ -3763,11 +3855,11 @@ var SelfstoreDestinationElement = class extends FlowWidget {
    *  tested ones rather than a second implementation. */
   connectView(into) {
     const el = document.createElement(
-      siblingTag(this.localName, "connect")
+      siblingTag(this.localName, "destination", "connect")
     );
-    el.store = this.#store;
+    el.store = this.store;
     el.targets = this.#targets;
-    el.icons = this.#icons;
+    el.icons = this.icons;
     el.labels = this.labels;
     const done = () => {
       this.#changing = false;
@@ -3786,19 +3878,21 @@ var SelfstoreDestinationElement = class extends FlowWidget {
     );
   }
   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 status = document.createElement(siblingTag(this.localName, "status"));
+    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;
@@ -3808,8 +3902,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",
@@ -3818,12 +3918,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" },
@@ -3847,10 +3953,6 @@ var SelfstoreDestinationElement = class extends FlowWidget {
 };
 
 // src/widgets/storage.ts
-function siblingTag2(own, name) {
-  const suffix = "-storage";
-  return own.endsWith(suffix) ? `${own.slice(0, -suffix.length)}-${name}` : `selfstore-${name}`;
-}
 var SelfstoreStorageElement = class extends FlowWidget {
   static get observedAttributes() {
     return ["deferrable", "recommended"];
@@ -3928,16 +4030,22 @@ var SelfstoreStorageElement = class extends FlowWidget {
     this.#recommended = v;
     this.rerender();
   }
-  attributeChangedCallback(name, _old, value) {
-    if (name === "deferrable") this.deferrable = value !== "false";
-    if (name === "recommended") this.recommended = value;
+  attributeChangedCallback(name) {
+    if (name === "deferrable") {
+      const value = this.flag(name);
+      if (value !== null) this.deferrable = value;
+    }
+    if (name === "recommended") {
+      const value = this.attr(name);
+      if (value !== null) this.recommended = value;
+    }
   }
   connectedCallback() {
     super.connectedCallback();
-    if (this.hasAttribute("deferrable"))
-      this.deferrable = this.getAttribute("deferrable") !== "false";
-    if (this.hasAttribute("recommended"))
-      this.recommended = this.getAttribute("recommended");
+    const deferrable = this.flag("deferrable");
+    if (deferrable !== null) this.deferrable = deferrable;
+    const recommended = this.attr("recommended");
+    if (recommended !== null) this.recommended = recommended;
     this.follow(hostOf(this.#store));
   }
   host() {
@@ -3955,7 +4063,7 @@ var SelfstoreStorageElement = class extends FlowWidget {
     const { ready, status } = host.engine.state;
     const wanted = !ready || status.action === "choose-destination" ? "gate" : "destination";
     if (this.#childKind !== wanted || !this.#child) {
-      this.#child = document.createElement(siblingTag2(this.localName, wanted));
+      this.#child = document.createElement(siblingTag(this.localName, "storage", wanted));
       this.#childKind = wanted;
     }
     const el = this.#child;
@@ -3973,7 +4081,7 @@ var SelfstoreStorageElement = class extends FlowWidget {
       el.confirmAction = this.#confirm;
     }
     el.store = this.#store;
-    const list = wanted === "destination" && this.#manager ? Object.assign(document.createElement(siblingTag2(this.localName, "backups")), {
+    const list = wanted === "destination" && this.#manager ? Object.assign(document.createElement(siblingTag(this.localName, "storage", "backups")), {
       labels: this.labels,
       manager: this.#manager
     }) : null;
@@ -3981,6 +4089,341 @@ var SelfstoreStorageElement = class extends FlowWidget {
   }
 };
 
+// src/widgets/account.ts
+var EN9 = {
+  ...EN4,
+  "account.open": "Storage",
+  "account.settings": "Settings",
+  "account.change": "Change backup",
+  "account.saved": "Saved {when}",
+  "account.justNow": "just now"
+};
+var FR9 = {
+  ...FR4,
+  "account.open": "Sauvegarde",
+  "account.settings": "Param\xE8tres",
+  "account.change": "Changer de sauvegarde",
+  "account.saved": "Enregistr\xE9 {when}",
+  "account.justNow": "\xE0 l'instant"
+};
+var ACCOUNT_STYLES = `
+:host { position: relative; display: inline-block; }
+/* Every other widget fills the width it is given, so the shared stack declares
+   itself a size container (that is what lets a card lay out against ITS width
+   and not the page's). This one is a control in a header: it must be as wide as
+   its own label. Inline-size containment makes a box report an intrinsic width
+   of ZERO - the pill collapsed to its dot in a flex header, with the label
+   overflowing off screen. Nothing here queries its own width. */
+[part~='stack'] { container-type: normal; display: block; }
+[part~='account-trigger'] {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.4rem;
+	max-width: 22rem;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	font: inherit;
+	color: inherit;
+	background: transparent;
+	border: 1px solid var(--_border);
+	border-radius: 999px;
+	padding: 0.3rem 0.7rem;
+	cursor: pointer;
+}
+[part~='account-dot'] {
+	width: 0.5rem;
+	height: 0.5rem;
+	border-radius: 50%;
+	background: currentColor;
+	flex: none;
+}
+[part~='account-menu'] {
+	position: absolute;
+	right: 0;
+	top: calc(100% + 0.4rem);
+	z-index: 20;
+	min-width: min(17rem, calc(100vw - 2rem));
+	max-width: min(24rem, calc(100vw - 2rem));
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	gap: 0.25rem;
+	text-align: start;
+	padding: 0.4rem;
+	background: var(--selfstore-surface, Canvas);
+	box-shadow: var(--selfstore-shadow, 0 10px 30px rgb(0 0 0 / 0.14));
+}
+[part~='account-card'] {
+	display: flex;
+	align-items: flex-start;
+	gap: 0.6rem;
+	width: 100%;
+	font: inherit;
+	color: inherit;
+	text-align: start;
+	background: transparent;
+	border: none;
+	border-radius: calc(var(--_radius) * 0.75);
+	padding: 0.5rem 0.6rem;
+	cursor: pointer;
+}
+[part~='account-card']:hover { background: color-mix(in srgb, currentColor 7%, transparent); }
+[part~='account-logo'] { width: 1.4rem; height: 1.4rem; object-fit: contain; flex: none; }
+[part~='account-text'] {
+	display: flex;
+	flex-direction: column;
+	gap: 0.15rem;
+	min-width: 0;
+	line-height: 1.35;
+}
+[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.8125rem;
+	color: var(--_ink-dim);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+[part~='account-item'] {
+	text-align: start;
+	padding: 0.4rem 0.6rem;
+	border-radius: calc(var(--_radius) * 0.75);
+	text-decoration: none;
+	color: inherit;
+}
+[part~='account-item']:hover { background: color-mix(in srgb, currentColor 7%, transparent); }
+[part~='account-sep'] { height: 1px; background: var(--_border); margin: 0.2rem 0.3rem; }
+`;
+var TICK_MS = 3e4;
+var SelfstoreAccountElement = class extends FlowWidget {
+  #confirm = null;
+  #open = false;
+  #timer = null;
+  #away = null;
+  defaults() {
+    return EN9;
+  }
+  packs() {
+    return { fr: FR9 };
+  }
+  constructor() {
+    super();
+    this.root.append(h("style", {}, ACCOUNT_STYLES));
+  }
+  /** 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;
+  }
+  set account(v) {
+    this.#account = v || null;
+    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() {
+    return this.#confirm;
+  }
+  set confirmAction(fn) {
+    this.#confirm = fn;
+  }
+  /** Whether the menu is on screen. Settable, so a host can close it from its
+   *  own router after the settings item navigated away. */
+  get open() {
+    return this.#open;
+  }
+  set open(v) {
+    if (v === this.#open) return;
+    this.#open = v;
+    this.watch();
+    this.rerender();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.follow(this.hostOf());
+  }
+  disconnectedCallback() {
+    this.unsub?.();
+    this.unsub = null;
+    this.#open = false;
+    this.watch();
+  }
+  /** While the menu is open: a clock for the relative time, and the two ways
+   *  out that make it a menu rather than a page - a click anywhere else, and
+   *  Escape. `pointerdown` and not `click`, so the gesture that closes it does
+   *  not also land on whatever was under the menu. Shadow DOM retargets the
+   *  event, so what is asked is the composed path, never `e.target`. */
+  watch() {
+    if (this.#timer) clearInterval(this.#timer);
+    this.#timer = null;
+    if (this.#away) {
+      document.removeEventListener("pointerdown", this.#away, true);
+      document.removeEventListener("keydown", this.#away, true);
+      this.#away = null;
+    }
+    if (!this.#open || !this.isConnected) return;
+    this.#timer = setInterval(() => this.rerender(), TICK_MS);
+    this.#away = (e) => {
+      if (e instanceof KeyboardEvent) {
+        if (e.key === "Escape") this.open = false;
+        return;
+      }
+      if (!e.composedPath().includes(this)) this.open = false;
+    };
+    document.addEventListener("pointerdown", this.#away, true);
+    document.addEventListener("keydown", this.#away, true);
+  }
+  /** The destination's name. An unknown kind (a host's own target) has no
+   *  shipped name: its own label is a better answer than the raw key. */
+  named(host) {
+    const { targetKind, label } = host.engine.state;
+    const kind = this.t(`destination.kind.${targetKind}`);
+    return kind === `destination.kind.${targetKind}` ? label ?? targetKind : kind;
+  }
+  /**
+   * 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
+   * it - and the only one where WHEN is the whole information. Everything else
+   * (reconnect, unlock, changes to download) belongs to <selfstore-status>,
+   * which owns both the wording and the button that resolves it.
+   */
+  line(host) {
+    const { status, lastSavedAt } = host.engine.state;
+    if (status.state === "saved" && lastSavedAt && !("status.saved" in this.labels))
+      return h(
+        "span",
+        { part: "account-line" },
+        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;
+    return el;
+  }
+  /** Ask for the settings. The host owns the route, so this only says that it
+   *  was asked - and closes, because a menu that stays open behind a page
+   *  transition reads as a failed click. */
+  settings() {
+    this.open = false;
+    this.emit("selfstore-account-settings");
+  }
+  /** 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 = this.hostOf();
+    if (!host) return;
+    this.open = false;
+    const label = host.engine.state.label;
+    try {
+      if (this.#confirm && !await this.#confirm({ type: "detach", label })) return;
+    } catch {
+      return;
+    }
+    await host.engine.detachTarget();
+  }
+  card(host) {
+    const { targetKind } = host.engine.state;
+    const icon = this.icons[targetKind];
+    const mail = this.account;
+    return h(
+      "button",
+      {
+        part: "account-card",
+        type: "button",
+        role: "menuitem",
+        title: this.t("account.settings"),
+        onclick: () => this.settings()
+      },
+      icon ? h("img", { part: "account-logo", src: icon, alt: "" }) : null,
+      h(
+        "span",
+        { part: "account-text" },
+        h("span", { part: "account-title" }, this.named(host)),
+        mail ? h("span", { part: "account-mail" }, mail) : null,
+        this.line(host)
+      )
+    );
+  }
+  view(into) {
+    const host = this.hostOf();
+    if (!host) return;
+    const { status } = host.engine.state;
+    const trigger = h(
+      "button",
+      {
+        part: `account-trigger ${status.severity}`,
+        type: "button",
+        "aria-haspopup": "menu",
+        "aria-expanded": String(this.#open),
+        "aria-label": this.t("account.open"),
+        onclick: () => this.open = !this.#open
+      },
+      // The severity colors the DOT, never the label: a whole line turning
+      // amber reads as a warning about the destination's name.
+      h("span", { part: `account-dot sev-${status.severity}` }),
+      h("span", {}, this.named(host))
+    );
+    const menu = this.#open ? h(
+      "div",
+      { part: "card account-menu", role: "menu" },
+      this.card(host),
+      h("div", { part: "account-sep" }),
+      h(
+        "button",
+        {
+          part: "link account-item",
+          type: "button",
+          role: "menuitem",
+          onclick: () => this.settings()
+        },
+        this.t("account.settings")
+      ),
+      h(
+        "button",
+        {
+          part: "link account-item account-change",
+          type: "button",
+          role: "menuitem",
+          onclick: () => void this.change()
+        },
+        this.t("account.change")
+      )
+    ) : null;
+    put(into, trigger, menu);
+    if (menu) this.anchor(menu);
+  }
+  /**
+   * Which side the menu hangs from.
+   *
+   * A header control is usually at the right edge, so the menu hangs right -
+   * and the moment the header wraps on a narrow window, that same control sits
+   * at the LEFT edge and the menu hangs off the screen. Measured rather than
+   * assumed: it hangs left when there is room to the right, and right
+   * otherwise, which lands correctly at both edges without the host declaring
+   * where it put the control.
+   */
+  anchor(menu) {
+    const here = this.getBoundingClientRect();
+    const fits = here.left + menu.getBoundingClientRect().width <= window.innerWidth - 8;
+    menu.style.left = fits ? "0" : "auto";
+    menu.style.right = fits ? "auto" : "0";
+  }
+};
+
 // src/entries/widgets.ts
 function defineSelfstoreWidgets(prefix = "selfstore") {
   const define = (name, ctor) => {
@@ -3994,8 +4437,9 @@ function defineSelfstoreWidgets(prefix = "selfstore") {
   define(`${prefix}-gate`, SelfstoreGateElement);
   define(`${prefix}-destination`, SelfstoreDestinationElement);
   define(`${prefix}-storage`, SelfstoreStorageElement);
+  define(`${prefix}-account`, SelfstoreAccountElement);
 }
 
-export { FlowWidget, SelfstoreBackupsElement, SelfstoreConnectElement, SelfstoreDestinationElement, SelfstoreGateElement, SelfstoreJoinElement, SelfstoreShareElement, SelfstoreStatusElement, SelfstoreStorageElement, defineSelfstoreWidgets };
+export { FlowWidget, SelfstoreAccountElement, SelfstoreBackupsElement, SelfstoreConnectElement, SelfstoreDestinationElement, SelfstoreGateElement, SelfstoreJoinElement, SelfstoreShareElement, SelfstoreStatusElement, SelfstoreStorageElement, defineSelfstoreWidgets };
 //# sourceMappingURL=widgets.js.map
 //# sourceMappingURL=widgets.js.map