selfstore 1.8.2 → 1.8.4

package/dist/widgets.js

@@ -1,11 +1,12 @@
-import { connectFlow, shareFlow, joinFlow } from './chunk-JMJZIZKY.js';
-import { isOpenSupported } from './chunk-5NS7YQNP.js';
-import './chunk-BNDFMU3J.js';
-import './chunk-U5F4GI7C.js';
-import './chunk-453KRCMM.js';
+import { saveToDisk, datedName } from './chunk-DCEXWSM6.js';
+import { connectFlow, shareFlow, joinFlow } from './chunk-PNX7AJYO.js';
+import { isOpenSupported } from './chunk-TKWU52LK.js';
+import './chunk-W22V5CRM.js';
+import './chunk-J5MFXJU6.js';
+import './chunk-MGDXR3RB.js';
 import './chunk-QBCU7OOP.js';
-import './chunk-HK4VPO65.js';
-import './chunk-CPN2KUD5.js';
+import './chunk-O3Y6FORN.js';
+import './chunk-3OBJOMQ2.js';
 
 // src/widgets/icons.ts
 var INK = "#8a8f98";
@@ -26,6 +27,10 @@ var defaultIcons = {
 };
 
 // src/widgets/base.ts
+function hostOf(store) {
+  if (!store) return null;
+  return "flowHost" in store ? store.flowHost : store;
+}
 var baseStyles = `
 :host {
 	display: block;
@@ -376,6 +381,16 @@ var FlowWidget = class extends HTMLElement {
   packs() {
     return {};
   }
+  /** 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. */
+  follow(host) {
+    this.unsub?.();
+    this.unsub = null;
+    if (!this.isConnected || !host) return;
+    this.unsub = host.engine.subscribe(() => this.rerender());
+    this.rerender();
+  }
   constructor() {
     super();
     this.root = this.attachShadow({ mode: "open" });
@@ -1949,18 +1964,10 @@ var SelfstoreStatusElement = class extends FlowWidget {
     this.wire();
   }
   host() {
-    const s = this.#store;
-    if (!s) return null;
-    return "flowHost" in s ? s.flowHost : s;
+    return hostOf(this.#store);
   }
   wire() {
-    if (!this.isConnected) return;
-    this.unsub?.();
-    this.unsub = null;
-    const host = this.host();
-    if (!host) return;
-    this.unsub = host.engine.subscribe(() => this.rerender());
-    this.rerender();
+    this.follow(this.host());
   }
   view(into) {
     const host = this.host();
@@ -3512,6 +3519,261 @@ var SelfstoreGateElement = class extends FlowWidget {
   }
 };
 
+// src/widgets/destination.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.encrypted": "Password-protected",
+  "destination.export": "Export a copy",
+  "destination.exported": "The copy is written.",
+  "destination.exportCancelled": "Nothing was written.",
+  "destination.restore": "Load a copy",
+  "destination.change": "Change destination",
+  "destination.detach": "Stop saving here",
+  "destination.detached": "Stopped. Your data stays on this device.",
+  "destination.back": "Back",
+  "error.generic": "Something went wrong."
+};
+var 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.",
+  "destination.exportCancelled": "Rien n'a \xE9t\xE9 \xE9crit.",
+  "destination.restore": "Charger une copie",
+  "destination.change": "Changer de destination",
+  "destination.detach": "Ne plus enregistrer ici",
+  "destination.detached": "Arr\xEAt\xE9. Vos donn\xE9es restent sur cet appareil.",
+  "destination.back": "Retour",
+  "error.generic": "Quelque chose n'a pas fonctionn\xE9."
+};
+var DESTINATION_STYLES = `
+[part~='destination-card'] { align-items: flex-start; }
+[part~='destination-actions'] {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--_gap);
+}
+[part~='destination-heading'] {
+	margin: 0;
+	font-size: 1rem;
+	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;
+  }
+  packs() {
+    return { fr: FR7 };
+  }
+  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. */
+  get targets() {
+    return this.#targets;
+  }
+  set targets(v) {
+    this.#targets = v;
+    this.rerender();
+  }
+  /** Who holds the destination ("someone@example.com"), when the host knows.
+   *  For Drive that is `driveTarget.account()`: a brand name is not an address,
+   *  and several accounts look alike. */
+  get account() {
+    return this.#account;
+  }
+  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 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. */
+  get confirmAction() {
+    return this.#confirm;
+  }
+  set confirmAction(fn) {
+    this.#confirm = fn;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.wire();
+  }
+  host() {
+    return hostOf(this.#store);
+  }
+  wire() {
+    this.follow(this.host());
+  }
+  /** Run a gesture, keeping the panel honest while it is in flight. */
+  async run(job) {
+    this.#busy = true;
+    this.#message = null;
+    this.rerender();
+    try {
+      this.#message = await job();
+    } catch {
+      this.#message = this.t("error.generic");
+    } finally {
+      this.#busy = false;
+      this.rerender();
+    }
+  }
+  /** A portable copy, on the user's own terms. A closed save dialog wrote
+   *  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();
+    if (!host) return Promise.resolve();
+    return this.run(async () => {
+      const blob = await host.engine.exportBlob();
+      const written = await saveToDisk(blob, datedName(host.backupName));
+      if (!written) return this.t("destination.exportCancelled");
+      host.engine.markDownloaded();
+      return this.t("destination.exported");
+    });
+  }
+  /** 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();
+    if (!host) return Promise.resolve();
+    return this.run(async () => {
+      try {
+        if (this.#confirm && !await this.#confirm({ type: "detach", label })) return null;
+      } catch {
+        return null;
+      }
+      await host.engine.detachTarget();
+      this.emit("selfstore-destination-detached");
+      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, "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();
+    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"));
+    status.setAttribute("variant", "row");
+    status.labels = this.labels;
+    status.icons = this.#icons;
+    status.store = this.#store;
+    const act = (key, onclick) => h(
+      "button",
+      { part: "button", type: "button", disabled: this.#busy ? "" : null, onclick },
+      this.t(key)
+    );
+    put(
+      into,
+      this.heading("destination-heading", "destination.heading"),
+      h(
+        "div",
+        { part: "card destination-card" },
+        icon ? h("img", { part: "icon", src: icon, alt: "" }) : null,
+        h(
+          "div",
+          {},
+          h("div", { part: "title" }, title),
+          sub ? h("div", { part: "sub" }, sub) : null,
+          encrypted ? h("div", { part: "sub" }, this.t("destination.encrypted")) : null
+        )
+      ),
+      status,
+      h(
+        "div",
+        { part: "destination-actions" },
+        act("destination.export", () => void this.exportCopy()),
+        // The library holds no records, so loading a copy back is the host's
+        // own gesture - see the note at the top of this file.
+        act(
+          "destination.restore",
+          () => this.emit("selfstore-destination-action", { action: "restore" })
+        ),
+        this.#targets ? act("destination.change", () => {
+          this.#changing = true;
+          this.rerender();
+        }) : null,
+        act("destination.detach", () => void this.detach(label))
+      ),
+      this.#message ? h("div", { part: "sub destination-message", role: "status" }, this.#message) : null
+    );
+  }
+};
+
 // src/entries/widgets.ts
 function defineSelfstoreWidgets(prefix = "selfstore") {
   const define = (name, ctor) => {
@@ -3523,8 +3785,9 @@ function defineSelfstoreWidgets(prefix = "selfstore") {
   define(`${prefix}-status`, SelfstoreStatusElement);
   define(`${prefix}-backups`, SelfstoreBackupsElement);
   define(`${prefix}-gate`, SelfstoreGateElement);
+  define(`${prefix}-destination`, SelfstoreDestinationElement);
 }
 
-export { FlowWidget, SelfstoreBackupsElement, SelfstoreConnectElement, SelfstoreGateElement, SelfstoreJoinElement, SelfstoreShareElement, SelfstoreStatusElement, defineSelfstoreWidgets };
+export { FlowWidget, SelfstoreBackupsElement, SelfstoreConnectElement, SelfstoreDestinationElement, SelfstoreGateElement, SelfstoreJoinElement, SelfstoreShareElement, SelfstoreStatusElement, defineSelfstoreWidgets };
 //# sourceMappingURL=widgets.js.map
 //# sourceMappingURL=widgets.js.map