selfstore 1.8.10 → 1.8.11

package/dist/widgets.js

@@ -354,6 +354,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 +385,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;
@@ -426,13 +433,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.
@@ -468,8 +479,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 }));
@@ -3448,16 +3491,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() {
@@ -3583,14 +3628,25 @@ var SelfstoreGateElement = class extends FlowWidget {
   }
 };
 
-// src/widgets/destination.ts
+// src/widgets/kinds.ts
 var EN7 = {
-  "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.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,
+  "destination.heading": "Where your data is kept",
   "destination.encrypted": "Password-protected",
   "destination.export": "Export a copy",
   "destination.exported": "The copy is written.",
@@ -3602,12 +3658,9 @@ var EN7 = {
   "destination.back": "Back",
   "error.generic": "Something went wrong."
 };
-var FR7 = {
+var FR8 = {
+  ...FR7,
   "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.export": "Exporter une copie",
   "destination.exported": "La copie est \xE9crite.",
@@ -3635,10 +3688,6 @@ 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;
@@ -3649,10 +3698,10 @@ var SelfstoreDestinationElement = class extends FlowWidget {
   #busy = false;
   #message = null;
   defaults() {
-    return EN7;
+    return EN8;
   }
   packs() {
-    return { fr: FR7 };
+    return { fr: FR8 };
   }
   constructor() {
     super();
@@ -3763,7 +3812,7 @@ 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.targets = this.#targets;
@@ -3794,7 +3843,9 @@ var SelfstoreDestinationElement = class extends FlowWidget {
     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 status = document.createElement(
+      siblingTag(this.localName, "destination", "status")
+    );
     status.setAttribute("variant", "row");
     status.labels = this.labels;
     status.icons = this.#icons;
@@ -3847,10 +3898,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 +3975,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 +4008,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 +4026,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 +4034,362 @@ var SelfstoreStorageElement = class extends FlowWidget {
   }
 };
 
+// src/widgets/account.ts
+var EN9 = {
+  ...EN7,
+  "account.open": "Storage",
+  "account.settings": "Settings",
+  "account.change": "Change backup",
+  "account.saved": "Saved {when}",
+  "account.justNow": "just now"
+};
+var FR9 = {
+  ...FR7,
+  "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(20rem, 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.5rem; height: 1.5rem; 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; }
+[part~='account-mail'], [part~='account-line'] {
+	font-size: 0.875rem;
+	color: var(--_ink-dim);
+	overflow-wrap: anywhere;
+}
+[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 {
+  #store = null;
+  #icons = {};
+  #confirm = null;
+  #open = false;
+  #timer = null;
+  #away = null;
+  defaults() {
+    return EN9;
+  }
+  packs() {
+    return { fr: FR9 };
+  }
+  constructor() {
+    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;
+  }
+  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() {
+    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(hostOf(this.#store));
+  }
+  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;
+  }
+  /** "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
+   * 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.when(lastSavedAt) })
+      );
+    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 = hostOf(this.#store);
+    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 = hostOf(this.#store);
+    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 +4403,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