selfstore 1.0.0 → 1.1.0

package/dist/widgets.js

@@ -1,10 +1,10 @@
-import { connectFlow, shareFlow, joinFlow } from './chunk-ATUPHVLG.js';
-import './chunk-CUWB5EWF.js';
-import './chunk-JB4JHM7V.js';
-import './chunk-SGISYMT5.js';
-import './chunk-OWLX6PNT.js';
+import { connectFlow, shareFlow, joinFlow } from './chunk-CUFKME4S.js';
+import './chunk-TEIAFKFS.js';
+import './chunk-SRKUHFRG.js';
+import './chunk-43BJDRPT.js';
+import './chunk-KHER6MWR.js';
 import './chunk-QBCU7OOP.js';
-import './chunk-FDPAKHQS.js';
+import './chunk-6746AL4I.js';
 import './chunk-VBFMMR7Q.js';
 
 // src/widgets/base.ts
@@ -377,7 +377,7 @@ var FlowWidget = class extends HTMLElement {
   /** Rebuild the body, keeping the focused input's value and focus across the
    *  rebuild (inputs carry data-keep so typing survives a snapshot change). */
   rerender() {
-    let active = null;
+    let active;
     try {
       active = this.root.activeElement;
     } catch {
@@ -629,7 +629,11 @@ var SelfstoreConnectElement = class extends FlowWidget {
           into.append(
             h(
               "button",
-              { part: "link advanced-link", "data-kind": kind, onclick: () => this.#flow?.choose(kind) },
+              {
+                part: "link advanced-link",
+                "data-kind": kind,
+                onclick: () => this.#flow?.choose(kind)
+              },
               this.t(`connect.${kind}`)
             )
           );
@@ -644,9 +648,7 @@ var SelfstoreConnectElement = class extends FlowWidget {
         h("div", { part: "title" }, this.t(tabbed ? "connect.server" : `connect.${kind}`))
       ];
       if (tabbed) children.push(this.serverTabs(kind));
-      children.push(
-        ...kind === "s3" ? this.s3FormChildren(flow) : this.webdavFormChildren(flow)
-      );
+      children.push(...kind === "s3" ? this.s3FormChildren(flow) : this.webdavFormChildren(flow));
       into.append(...children);
       return;
     }
@@ -705,7 +707,9 @@ var SelfstoreConnectElement = class extends FlowWidget {
           {
             part: "eye",
             type: "button",
-            "aria-label": this.t(this.#pwVisible ? "connect.password.hide" : "connect.password.show"),
+            "aria-label": this.t(
+              this.#pwVisible ? "connect.password.hide" : "connect.password.show"
+            ),
             "aria-pressed": this.#pwVisible ? "true" : "false",
             onclick: () => this.togglePassword()
           },
@@ -723,7 +727,11 @@ var SelfstoreConnectElement = class extends FlowWidget {
           { part: "row" },
           h(
             "button",
-            { part: "button button-primary", disabled: s.busy, onclick: () => this.submitPassword() },
+            {
+              part: "button button-primary",
+              disabled: s.busy,
+              onclick: () => this.submitPassword()
+            },
             this.t("connect.password.submit")
           ),
           // Cancel is never disabled, even mid-trial-read: a hung leg must
@@ -757,7 +765,9 @@ var SelfstoreConnectElement = class extends FlowWidget {
           )
         );
       }
-      into.append(h("button", { part: "link", onclick: () => this.cancel() }, this.t("connect.cancel")));
+      into.append(
+        h("button", { part: "link", onclick: () => this.cancel() }, this.t("connect.cancel"))
+      );
       return;
     }
     if (s.step === "connected") {
@@ -765,17 +775,29 @@ var SelfstoreConnectElement = class extends FlowWidget {
         h(
           "div",
           { part: "status status-ok" },
-          h("div", { part: "title" }, this.t(s.outcome === "manual" ? "connect.done.manual" : "connect.done"))
+          h(
+            "div",
+            { part: "title" },
+            this.t(s.outcome === "manual" ? "connect.done.manual" : "connect.done")
+          )
         )
       );
       return;
     }
     into.append(
-      h("div", { part: "status status-error" }, h("div", { part: "title" }, this.errorText(s.error?.labelKey))),
+      h(
+        "div",
+        { part: "status status-error" },
+        h("div", { part: "title" }, this.errorText(s.error?.labelKey))
+      ),
       h(
         "div",
         { part: "row" },
-        h("button", { part: "button button-primary", onclick: () => flow.retry() }, this.t("connect.retry")),
+        h(
+          "button",
+          { part: "button button-primary", onclick: () => flow.retry() },
+          this.t("connect.retry")
+        ),
         h("button", { part: "button", onclick: () => this.cancel() }, this.t("connect.cancel"))
       )
     );
@@ -798,7 +820,11 @@ var SelfstoreConnectElement = class extends FlowWidget {
         actions.append(
           h(
             "button",
-            { part: "button button-primary", "data-action": "create", onclick: () => this.#flow?.choose("file", "create") },
+            {
+              part: "button button-primary",
+              "data-action": "create",
+              onclick: () => this.#flow?.choose("file", "create")
+            },
             this.t("connect.file.new")
           )
         );
@@ -807,7 +833,11 @@ var SelfstoreConnectElement = class extends FlowWidget {
         actions.append(
           h(
             "button",
-            { part: "button", "data-action": "open", onclick: () => this.#flow?.choose("file", "open") },
+            {
+              part: "button",
+              "data-action": "open",
+              onclick: () => this.#flow?.choose("file", "open")
+            },
             this.t("connect.file.open")
           )
         );
@@ -923,7 +953,12 @@ var SelfstoreConnectElement = class extends FlowWidget {
           picked.help,
           picked.helpUrl ? h(
             "a",
-            { part: "link webdav-help", href: picked.helpUrl, target: "_blank", rel: "noopener noreferrer" },
+            {
+              part: "link webdav-help",
+              href: picked.helpUrl,
+              target: "_blank",
+              rel: "noopener noreferrer"
+            },
             ` ${this.t("connect.webdav.help.more")}`
           ) : null
         )
@@ -933,7 +968,11 @@ var SelfstoreConnectElement = class extends FlowWidget {
       h(
         "div",
         { part: "row" },
-        h("button", { part: "button button-primary", onclick: () => this.submitWebdav() }, this.t("connect.webdav.submit")),
+        h(
+          "button",
+          { part: "button button-primary", onclick: () => this.submitWebdav() },
+          this.t("connect.webdav.submit")
+        ),
         h("button", { part: "button", onclick: () => flow.cancel() }, this.t("connect.cancel"))
       )
     );
@@ -941,7 +980,12 @@ var SelfstoreConnectElement = class extends FlowWidget {
       out.push(
         h(
           "a",
-          { part: "link webdav-signup", href: picked.signupUrl, target: "_blank", rel: "noopener noreferrer" },
+          {
+            part: "link webdav-signup",
+            href: picked.signupUrl,
+            target: "_blank",
+            rel: "noopener noreferrer"
+          },
           this.t("connect.webdav.signup")
         )
       );
@@ -958,16 +1002,56 @@ var SelfstoreConnectElement = class extends FlowWidget {
       oninput: (e) => set(e.target.value)
     });
     return [
-      field("url", "connect.s3.endpoint", "s3-endpoint", () => this.#s3Endpoint, (v) => this.#s3Endpoint = v),
-      field("text", "connect.s3.region", "s3-region", () => this.#s3Region, (v) => this.#s3Region = v),
-      field("text", "connect.s3.bucket", "s3-bucket", () => this.#s3Bucket, (v) => this.#s3Bucket = v),
-      field("text", "connect.s3.key", "s3-key", () => this.#s3Key, (v) => this.#s3Key = v),
-      field("text", "connect.s3.accessKeyId", "s3-akid", () => this.#s3AccessKeyId, (v) => this.#s3AccessKeyId = v),
-      field("password", "connect.s3.secret", "s3-secret", () => this.#s3Secret, (v) => this.#s3Secret = v),
+      field(
+        "url",
+        "connect.s3.endpoint",
+        "s3-endpoint",
+        () => this.#s3Endpoint,
+        (v) => this.#s3Endpoint = v
+      ),
+      field(
+        "text",
+        "connect.s3.region",
+        "s3-region",
+        () => this.#s3Region,
+        (v) => this.#s3Region = v
+      ),
+      field(
+        "text",
+        "connect.s3.bucket",
+        "s3-bucket",
+        () => this.#s3Bucket,
+        (v) => this.#s3Bucket = v
+      ),
+      field(
+        "text",
+        "connect.s3.key",
+        "s3-key",
+        () => this.#s3Key,
+        (v) => this.#s3Key = v
+      ),
+      field(
+        "text",
+        "connect.s3.accessKeyId",
+        "s3-akid",
+        () => this.#s3AccessKeyId,
+        (v) => this.#s3AccessKeyId = v
+      ),
+      field(
+        "password",
+        "connect.s3.secret",
+        "s3-secret",
+        () => this.#s3Secret,
+        (v) => this.#s3Secret = v
+      ),
       h(
         "div",
         { part: "row" },
-        h("button", { part: "button button-primary", onclick: () => this.submitS3() }, this.t("connect.s3.submit")),
+        h(
+          "button",
+          { part: "button button-primary", onclick: () => this.submitS3() },
+          this.t("connect.s3.submit")
+        ),
         h("button", { part: "button", onclick: () => flow.cancel() }, this.t("connect.cancel"))
       )
     ];
@@ -1227,12 +1311,21 @@ var SelfstoreShareElement = class extends FlowWidget {
             ),
             h(
               "button",
-              { part: "button", "data-action": "copy", onclick: () => this.copy(link.id, link.url) },
+              {
+                part: "button",
+                "data-action": "copy",
+                onclick: () => this.copy(link.id, link.url)
+              },
               this.t(this.#copiedId === link.id ? "share.copied" : "share.copy")
             ),
             h(
               "button",
-              { part: "button button-danger", "data-action": "revoke", disabled: s.busy !== null, onclick: () => this.revoke(link.id) },
+              {
+                part: "button button-danger",
+                "data-action": "revoke",
+                disabled: s.busy !== null,
+                onclick: () => this.revoke(link.id)
+              },
               this.t("share.revoke")
             )
           )
@@ -1262,7 +1355,12 @@ var SelfstoreShareElement = class extends FlowWidget {
               ),
               s.canRemoveMembers && !m.self ? h(
                 "button",
-                { part: "button button-danger", "data-action": "remove", disabled: s.busy !== null, onclick: () => this.removeRow(m.id) },
+                {
+                  part: "button button-danger",
+                  "data-action": "remove",
+                  disabled: s.busy !== null,
+                  onclick: () => this.removeRow(m.id)
+                },
                 this.t("share.remove")
               ) : null
             )
@@ -1278,7 +1376,12 @@ var SelfstoreShareElement = class extends FlowWidget {
           { part: "footer", style: "text-align:right" },
           h(
             "button",
-            { part: "link link-danger", "data-action": "stop", disabled: s.busy !== null, onclick: () => this.stop() },
+            {
+              part: "link link-danger",
+              "data-action": "stop",
+              disabled: s.busy !== null,
+              onclick: () => this.stop()
+            },
             this.t("share.stop")
           )
         )
@@ -1453,7 +1556,11 @@ var SelfstoreJoinElement = class extends FlowWidget {
           "div",
           { part: "status" },
           h("span", { part: "spinner", "aria-hidden": "true" }),
-          h("div", { part: "title" }, this.t(s.step === "joining" ? "join.joining" : "join.previewing"))
+          h(
+            "div",
+            { part: "title" },
+            this.t(s.step === "joining" ? "join.joining" : "join.previewing")
+          )
         )
       );
       return;
@@ -1466,9 +1573,25 @@ var SelfstoreJoinElement = class extends FlowWidget {
           h(
             "div",
             { part: "row banner" },
-            h("div", { part: "title", style: "flex:1;min-width:0" }, p?.label || this.t("join.title")),
-            h("button", { part: "button button-primary", "data-action": "accept", onclick: () => flow.accept() }, this.t("join.accept")),
-            s.canSwitchAccount ? h("button", { part: "link", "data-action": "switch", onclick: () => flow.switchAccount() }, this.t("join.switchAccount")) : null
+            h(
+              "div",
+              { part: "title", style: "flex:1;min-width:0" },
+              p?.label || this.t("join.title")
+            ),
+            h(
+              "button",
+              {
+                part: "button button-primary",
+                "data-action": "accept",
+                onclick: () => flow.accept()
+              },
+              this.t("join.accept")
+            ),
+            s.canSwitchAccount ? h(
+              "button",
+              { part: "link", "data-action": "switch", onclick: () => flow.switchAccount() },
+              this.t("join.switchAccount")
+            ) : null
           )
         );
         return;
@@ -1481,34 +1604,72 @@ var SelfstoreJoinElement = class extends FlowWidget {
         h(
           "div",
           { part: "row" },
-          h("button", { part: "button button-primary", "data-action": "accept", onclick: () => flow.accept() }, this.t("join.accept")),
-          s.canSwitchAccount ? h("button", { part: "link", "data-action": "switch", onclick: () => flow.switchAccount() }, this.t("join.switchAccount")) : null
+          h(
+            "button",
+            {
+              part: "button button-primary",
+              "data-action": "accept",
+              onclick: () => flow.accept()
+            },
+            this.t("join.accept")
+          ),
+          s.canSwitchAccount ? h(
+            "button",
+            { part: "link", "data-action": "switch", onclick: () => flow.switchAccount() },
+            this.t("join.switchAccount")
+          ) : null
         )
       );
       return;
     }
     if (s.step === "joined") {
-      into.append(h("div", { part: "status status-ok" }, h("div", { part: "title" }, this.t("join.joined"))));
+      into.append(
+        h("div", { part: "status status-ok" }, h("div", { part: "title" }, this.t("join.joined")))
+      );
       return;
     }
     if (s.step === "mismatch" || s.step === "no-invite") {
       into.append(
-        h("div", { part: "status" }, h("div", { part: "title" }, this.t(s.step === "mismatch" ? "join.mismatch" : "join.noInvite")))
+        h(
+          "div",
+          { part: "status" },
+          h(
+            "div",
+            { part: "title" },
+            this.t(s.step === "mismatch" ? "join.mismatch" : "join.noInvite")
+          )
+        )
       );
       if (s.step === "no-invite" && s.canSwitchAccount) {
         into.append(
-          h("div", { part: "row" }, h("button", { part: "button", "data-action": "switch", onclick: () => flow.switchAccount() }, this.t("join.switchAccount")))
+          h(
+            "div",
+            { part: "row" },
+            h(
+              "button",
+              { part: "button", "data-action": "switch", onclick: () => flow.switchAccount() },
+              this.t("join.switchAccount")
+            )
+          )
         );
       }
       return;
     }
     into.append(
-      h("div", { part: "status status-error" }, h("div", { part: "title" }, this.errorText(s.error?.labelKey))),
+      h(
+        "div",
+        { part: "status status-error" },
+        h("div", { part: "title" }, this.errorText(s.error?.labelKey))
+      ),
       h(
         "div",
         { part: "row" },
         h("button", { part: "button", onclick: () => flow.retry() }, this.t("join.retry")),
-        s.canSwitchAccount ? h("button", { part: "link", "data-action": "switch", onclick: () => flow.switchAccount() }, this.t("join.switchAccount")) : null
+        s.canSwitchAccount ? h(
+          "button",
+          { part: "link", "data-action": "switch", onclick: () => flow.switchAccount() },
+          this.t("join.switchAccount")
+        ) : null
       )
     );
   }
@@ -1700,7 +1861,15 @@ var EYE_OPEN = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strok
 var EYE_SHUT = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 3 18 18"/><path d="M10.6 5.1A10.9 10.9 0 0 1 12 5c6.5 0 10 7 10 7a17.4 17.4 0 0 1-3.4 4.4M6.6 6.6A17 17 0 0 0 2 12s3.5 7 10 7a10.7 10.7 0 0 0 5.4-1.4"/></svg>';
 var SelfstoreBackupsElement = class extends FlowWidget {
   static get observedAttributes() {
-    return ["with-create", "with-rename", "with-delete", "with-open", "with-encrypt", "with-share", "with-shared"];
+    return [
+      "with-create",
+      "with-rename",
+      "with-delete",
+      "with-open",
+      "with-encrypt",
+      "with-share",
+      "with-shared"
+    ];
   }
   #manager = null;
   #rows = null;
@@ -1720,7 +1889,14 @@ var SelfstoreBackupsElement = class extends FlowWidget {
   #replicaFlow = null;
   #replicaSnap = null;
   #repWebdav = { url: "", username: "", password: "" };
-  #repS3 = { endpoint: "", region: "", bucket: "", key: "", accessKeyId: "", secretAccessKey: "" };
+  #repS3 = {
+    endpoint: "",
+    region: "",
+    bucket: "",
+    key: "",
+    accessKeyId: "",
+    secretAccessKey: ""
+  };
   #activeEncrypted = null;
   #activeShared = null;
   #confirmAction = null;
@@ -1971,11 +2147,19 @@ var SelfstoreBackupsElement = class extends FlowWidget {
     const shared = h("ul", { part: "list" });
     if (badge) {
       const activeRow = rows.find((r) => r.fileId === active) ?? null;
-      const leaveAction = { type: "leave", fileId: badge.fileId ?? null, who: badge.by };
+      const leaveAction = {
+        type: "leave",
+        fileId: badge.fileId ?? null,
+        who: badge.by
+      };
       shared.append(
         h(
           "li",
-          { part: "card card-active", style: "position:relative;border-color:var(--_ok)", "data-member": "" },
+          {
+            part: "card card-active",
+            style: "position:relative;border-color:var(--_ok)",
+            "data-member": ""
+          },
           h(
             "div",
             { style: "flex:1;min-width:0" },
@@ -2011,9 +2195,19 @@ var SelfstoreBackupsElement = class extends FlowWidget {
           { part: "card", style: "position:relative", "data-shared": s.fileId },
           this.#withOpen ? h(
             "button",
-            { part: "link open-shared", style: "flex:1;min-width:0;text-align:left;text-decoration:none", "data-action": "open-shared", disabled: this.#busy, onclick: () => this.open(s.fileId) },
+            {
+              part: "link open-shared",
+              style: "flex:1;min-width:0;text-align:left;text-decoration:none",
+              "data-action": "open-shared",
+              disabled: this.#busy,
+              onclick: () => this.open(s.fileId)
+            },
             h("div", { part: "title" }, this.ts("backups.shared.by", { who: s.who })),
-            h("div", { part: "sub" }, this.#openBusy === s.fileId ? this.t("backups.loading") : this.t("backups.replaceHint"))
+            h(
+              "div",
+              { part: "sub" },
+              this.#openBusy === s.fileId ? this.t("backups.loading") : this.t("backups.replaceHint")
+            )
           ) : h(
             "div",
             { style: "flex:1;min-width:0" },
@@ -2034,7 +2228,10 @@ var SelfstoreBackupsElement = class extends FlowWidget {
               "forget",
               this.t("backups.delete"),
               true,
-              () => this.guarded({ type: "forget", fileId: s.fileId, who: s.who }, () => void this.forget(s.fileId))
+              () => this.guarded(
+                { type: "forget", fileId: s.fileId, who: s.who },
+                () => void this.forget(s.fileId)
+              )
             ) : null
           ) : null
         )
@@ -2049,16 +2246,30 @@ var SelfstoreBackupsElement = class extends FlowWidget {
     const bits = [];
     if (enc !== null) {
       bits.push(
-        h("span", { part: enc ? "pill pill-encrypted sev-ok" : "pill pill-plain", style: pillStyle }, this.t(enc ? "backups.pill.encrypted" : "backups.pill.plain"))
+        h(
+          "span",
+          { part: enc ? "pill pill-encrypted sev-ok" : "pill pill-plain", style: pillStyle },
+          this.t(enc ? "backups.pill.encrypted" : "backups.pill.plain")
+        )
       );
     }
     if (shr !== null) {
       bits.push(
-        h("span", { part: shr ? "pill pill-shared sev-warn" : "pill pill-private", style: pillStyle }, this.t(shr ? "backups.pill.shared" : "backups.pill.private"))
+        h(
+          "span",
+          { part: shr ? "pill pill-shared sev-warn" : "pill pill-private", style: pillStyle },
+          this.t(shr ? "backups.pill.shared" : "backups.pill.private")
+        )
       );
     }
     if (r.modifiedAt) {
-      bits.push(h("span", { part: "sub" }, this.ts("backups.modified", { when: new Date(r.modifiedAt).toLocaleDateString() })));
+      bits.push(
+        h(
+          "span",
+          { part: "sub" },
+          this.ts("backups.modified", { when: new Date(r.modifiedAt).toLocaleDateString() })
+        )
+      );
     }
     return bits;
   }
@@ -2066,26 +2277,60 @@ var SelfstoreBackupsElement = class extends FlowWidget {
     const body = h(
       "div",
       { style: "flex:1;min-width:0" },
-      h("div", { part: "title" }, this.label(r), active ? h("span", { part: "tag" }, this.t("backups.active")) : null),
+      h(
+        "div",
+        { part: "title" },
+        this.label(r),
+        active ? h("span", { part: "tag" }, this.t("backups.active")) : null
+      ),
       h("div", { part: "row", style: "margin-top:0.2rem" }, ...this.pills(r, active)),
       footer
     );
     const opens = this.#withOpen && !active;
     const face = opens ? h(
       "button",
-      { part: "link open-row", style: "flex:1;min-width:0;text-align:left;text-decoration:none", "data-action": "open", disabled: this.#busy, onclick: () => this.open(r.fileId) },
+      {
+        part: "link open-row",
+        style: "flex:1;min-width:0;text-align:left;text-decoration:none",
+        "data-action": "open",
+        disabled: this.#busy,
+        onclick: () => this.open(r.fileId)
+      },
       this.#openBusy === r.fileId ? h("div", { part: "sub" }, this.t("backups.loading")) : body
     ) : body;
     return h(
       "li",
-      { part: active ? "card card-active" : "card", style: active ? "position:relative;border-color:var(--_ok)" : "position:relative", "data-row": r.fileId },
+      {
+        part: active ? "card card-active" : "card",
+        style: active ? "position:relative;border-color:var(--_ok)" : "position:relative",
+        "data-row": r.fileId
+      },
       face,
       this.menuButton(r.fileId),
       this.#menuFor === r.fileId ? this.menu(
         opens ? this.menuItem("open", this.t("backups.open"), false, () => this.open(r.fileId)) : null,
-        this.#withEncrypt ? this.menuItem("encrypt", this.t("backups.encrypt"), false, () => this.emit("selfstore-backups-encrypt", { fileId: r.fileId, label: r.label, active })) : null,
-        this.#withShare ? this.menuItem("share", this.t("backups.share"), false, () => this.emit("selfstore-backups-share", { fileId: r.fileId, label: r.label, active })) : null,
-        active && this.#replicaFlow && this.#replicaSnap?.step === "idle" && !this.#replicaSnap.replica ? this.menuItem("replica-add", this.t("backups.replica.add"), false, () => this.#replicaFlow?.open()) : null,
+        this.#withEncrypt ? this.menuItem(
+          "encrypt",
+          this.t("backups.encrypt"),
+          false,
+          () => this.emit("selfstore-backups-encrypt", {
+            fileId: r.fileId,
+            label: r.label,
+            active
+          })
+        ) : null,
+        this.#withShare ? this.menuItem(
+          "share",
+          this.t("backups.share"),
+          false,
+          () => this.emit("selfstore-backups-share", { fileId: r.fileId, label: r.label, active })
+        ) : null,
+        active && this.#replicaFlow && this.#replicaSnap?.step === "idle" && !this.#replicaSnap.replica ? this.menuItem(
+          "replica-add",
+          this.t("backups.replica.add"),
+          false,
+          () => this.#replicaFlow?.open()
+        ) : null,
         this.#withRename ? this.menuItem("rename", this.t("backups.rename"), false, () => {
           this.#renameFor = r;
           this.#renameLabel = r.label ?? "";
@@ -2095,7 +2340,10 @@ var SelfstoreBackupsElement = class extends FlowWidget {
           "delete",
           this.t("backups.delete"),
           true,
-          () => this.guarded({ type: "delete", fileId: r.fileId, name: r.name, active }, () => void this.deleteRow(r.fileId))
+          () => this.guarded(
+            { type: "delete", fileId: r.fileId, name: r.name, active },
+            () => void this.deleteRow(r.fileId)
+          )
         ) : null
       ) : null
     );
@@ -2131,8 +2379,26 @@ var SelfstoreBackupsElement = class extends FlowWidget {
             }),
             this.eye()
           ),
-          h("button", { part: "button button-primary", "data-action": "pw-open", disabled: this.#busy, onclick: submit }, this.t("backups.open")),
-          h("button", { part: "button", "data-action": "pw-cancel", disabled: this.#busy, onclick: () => this.closePw() }, this.t("backups.cancel"))
+          h(
+            "button",
+            {
+              part: "button button-primary",
+              "data-action": "pw-open",
+              disabled: this.#busy,
+              onclick: submit
+            },
+            this.t("backups.open")
+          ),
+          h(
+            "button",
+            {
+              part: "button",
+              "data-action": "pw-cancel",
+              disabled: this.#busy,
+              onclick: () => this.closePw()
+            },
+            this.t("backups.cancel")
+          )
         )
       )
     );
@@ -2159,17 +2425,35 @@ var SelfstoreBackupsElement = class extends FlowWidget {
             this.rerender();
           }
         }),
-        taken ? h("div", { part: "error-note" }, this.t("backups.taken")) : clean ? h("div", { part: "sub" }, this.ts("backups.willBe", { file: this.#manager?.fileNameFor(clean) ?? "" })) : null,
+        taken ? h("div", { part: "error-note" }, this.t("backups.taken")) : clean ? h(
+          "div",
+          { part: "sub" },
+          this.ts("backups.willBe", { file: this.#manager?.fileNameFor(clean) ?? "" })
+        ) : null,
         h(
           "div",
           { part: "row", style: "margin-top:0.45rem" },
-          h("button", { part: "button button-primary", "data-action": "rename-save", disabled: this.#busy || !clean || taken, onclick: () => void this.rename(r) }, this.t("backups.rename")),
           h(
             "button",
-            { part: "button", "data-action": "rename-cancel", disabled: this.#busy, onclick: () => {
-              this.#renameFor = null;
-              this.rerender();
-            } },
+            {
+              part: "button button-primary",
+              "data-action": "rename-save",
+              disabled: this.#busy || !clean || taken,
+              onclick: () => void this.rename(r)
+            },
+            this.t("backups.rename")
+          ),
+          h(
+            "button",
+            {
+              part: "button",
+              "data-action": "rename-cancel",
+              disabled: this.#busy,
+              onclick: () => {
+                this.#renameFor = null;
+                this.rerender();
+              }
+            },
             this.t("backups.cancel")
           )
         )
@@ -2199,17 +2483,35 @@ var SelfstoreBackupsElement = class extends FlowWidget {
             this.rerender();
           }
         }),
-        taken ? h("div", { part: "error-note" }, this.t("backups.taken")) : clean ? h("div", { part: "sub" }, this.ts("backups.willBe", { file: this.#manager?.fileNameFor(clean) ?? "" })) : null,
+        taken ? h("div", { part: "error-note" }, this.t("backups.taken")) : clean ? h(
+          "div",
+          { part: "sub" },
+          this.ts("backups.willBe", { file: this.#manager?.fileNameFor(clean) ?? "" })
+        ) : null,
         h(
           "div",
           { part: "row", style: "margin-top:0.45rem" },
-          h("button", { part: "button button-primary", "data-action": "create", disabled: this.#busy || !clean || taken, onclick: () => void this.create() }, this.t("backups.create")),
           h(
             "button",
-            { part: "button", "data-action": "create-cancel", disabled: this.#busy, onclick: () => {
-              this.#createOpen = false;
-              this.rerender();
-            } },
+            {
+              part: "button button-primary",
+              "data-action": "create",
+              disabled: this.#busy || !clean || taken,
+              onclick: () => void this.create()
+            },
+            this.t("backups.create")
+          ),
+          h(
+            "button",
+            {
+              part: "button",
+              "data-action": "create-cancel",
+              disabled: this.#busy,
+              onclick: () => {
+                this.#createOpen = false;
+                this.rerender();
+              }
+            },
             this.t("backups.cancel")
           )
         )
@@ -2242,7 +2544,10 @@ var SelfstoreBackupsElement = class extends FlowWidget {
       "span",
       { part: "sub replica-ok" },
       this.ts("backups.replica.uptodate", {
-        when: new Date(rep.lastPublishAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
+        when: new Date(rep.lastPublishAt).toLocaleTimeString([], {
+          hour: "2-digit",
+          minute: "2-digit"
+        })
       })
     ) : h("span", { part: "sub" }, this.t("backups.replica.pending"));
     return h(
@@ -2288,7 +2593,12 @@ var SelfstoreBackupsElement = class extends FlowWidget {
       snap.error ? h("div", { part: "error-note" }, this.t("error.generic")) : null,
       h(
         "button",
-        { part: "button", "data-action": "replica-cancel", disabled: snap.busy, onclick: () => this.#replicaFlow?.cancel() },
+        {
+          part: "button",
+          "data-action": "replica-cancel",
+          disabled: snap.busy,
+          onclick: () => this.#replicaFlow?.cancel()
+        },
         this.t("backups.cancel")
       )
     );
@@ -2309,22 +2619,48 @@ var SelfstoreBackupsElement = class extends FlowWidget {
     const c = this.#repWebdav;
     const submit = () => {
       if (!c.url.trim()) return;
-      this.#replicaFlow?.submitWebdav({ url: c.url.trim(), username: c.username.trim(), password: c.password });
+      this.#replicaFlow?.submitWebdav({
+        url: c.url.trim(),
+        username: c.username.trim(),
+        password: c.password
+      });
     };
     return h(
       "li",
       { part: "card replica-form", style: "display:block" },
       h("div", { part: "title", style: "margin-bottom:0.3rem" }, this.t("backups.replica.title")),
-      h("div", { part: "sub", style: "margin-bottom:0.6rem" }, this.t("backups.replica.webdav.help")),
+      h(
+        "div",
+        { part: "sub", style: "margin-bottom:0.6rem" },
+        this.t("backups.replica.webdav.help")
+      ),
       this.replicaField("backups.replica.webdav.url", "url", c.url, (v) => c.url = v),
       this.replicaField("backups.replica.webdav.user", "text", c.username, (v) => c.username = v),
-      this.replicaField("backups.replica.webdav.password", "password", c.password, (v) => c.password = v),
+      this.replicaField(
+        "backups.replica.webdav.password",
+        "password",
+        c.password,
+        (v) => c.password = v
+      ),
       snap.error ? h("div", { part: "error-note" }, this.t("error.generic")) : null,
       h(
         "div",
         { part: "row", style: "margin-top:0.45rem" },
-        h("button", { part: "button button-primary", "data-action": "replica-webdav", disabled: snap.busy, onclick: submit }, this.t("backups.replica.save")),
-        h("button", { part: "button", disabled: snap.busy, onclick: () => this.#replicaFlow?.cancel() }, this.t("backups.cancel"))
+        h(
+          "button",
+          {
+            part: "button button-primary",
+            "data-action": "replica-webdav",
+            disabled: snap.busy,
+            onclick: submit
+          },
+          this.t("backups.replica.save")
+        ),
+        h(
+          "button",
+          { part: "button", disabled: snap.busy, onclick: () => this.#replicaFlow?.cancel() },
+          this.t("backups.cancel")
+        )
       )
     );
   }
@@ -2351,14 +2687,37 @@ var SelfstoreBackupsElement = class extends FlowWidget {
       this.replicaField("backups.replica.s3.region", "text", c.region, (v) => c.region = v),
       this.replicaField("backups.replica.s3.bucket", "text", c.bucket, (v) => c.bucket = v),
       this.replicaField("backups.replica.s3.key", "text", c.key, (v) => c.key = v),
-      this.replicaField("backups.replica.s3.accessKeyId", "text", c.accessKeyId, (v) => c.accessKeyId = v),
-      this.replicaField("backups.replica.s3.secret", "password", c.secretAccessKey, (v) => c.secretAccessKey = v),
+      this.replicaField(
+        "backups.replica.s3.accessKeyId",
+        "text",
+        c.accessKeyId,
+        (v) => c.accessKeyId = v
+      ),
+      this.replicaField(
+        "backups.replica.s3.secret",
+        "password",
+        c.secretAccessKey,
+        (v) => c.secretAccessKey = v
+      ),
       snap.error ? h("div", { part: "error-note" }, this.t("error.generic")) : null,
       h(
         "div",
         { part: "row", style: "margin-top:0.45rem" },
-        h("button", { part: "button button-primary", "data-action": "replica-s3", disabled: snap.busy, onclick: submit }, this.t("backups.replica.save")),
-        h("button", { part: "button", disabled: snap.busy, onclick: () => this.#replicaFlow?.cancel() }, this.t("backups.cancel"))
+        h(
+          "button",
+          {
+            part: "button button-primary",
+            "data-action": "replica-s3",
+            disabled: snap.busy,
+            onclick: submit
+          },
+          this.t("backups.replica.save")
+        ),
+        h(
+          "button",
+          { part: "button", disabled: snap.busy, onclick: () => this.#replicaFlow?.cancel() },
+          this.t("backups.cancel")
+        )
       )
     );
   }