selfstore 1.0.0

package/dist/widgets.js

@@ -0,0 +1,2579 @@
+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 './chunk-QBCU7OOP.js';
+import './chunk-FDPAKHQS.js';
+import './chunk-VBFMMR7Q.js';
+
+// src/widgets/base.ts
+var baseStyles = `
+:host {
+	display: block;
+	font: inherit;
+	color: inherit;
+	--_accent: var(--selfstore-accent, #2563eb);
+	--_accent-ink: var(--selfstore-accent-contrast, #ffffff);
+	--_ink-dim: var(--selfstore-muted, color-mix(in srgb, currentColor 55%, transparent));
+	--_border: var(--selfstore-border, color-mix(in srgb, currentColor 16%, transparent));
+	--_radius: var(--selfstore-radius, 12px);
+	--_gap: var(--selfstore-gap, 0.6rem);
+	--_danger: var(--selfstore-danger, #dc2626);
+	--_ok: var(--selfstore-ok, #16a34a);
+	--_warn: var(--selfstore-warn, #d97706);
+}
+/* Status severity, as a text color the dot inherits (background: currentColor). */
+[part~='sev-ok'] { color: var(--_ok); }
+[part~='sev-info'] { color: var(--_accent); }
+[part~='sev-warn'] { color: var(--_warn); }
+[part~='sev-danger'] { color: var(--_danger); }
+span[part~='status-dot'] {
+	display: inline-block;
+	width: 0.6em;
+	height: 0.6em;
+	border-radius: 50%;
+	background: currentColor;
+	flex-shrink: 0;
+}
+button[part~='dot-button'] {
+	background: none;
+	border: none;
+	padding: 0.2em;
+	cursor: pointer;
+	line-height: 0;
+}
+[part~='status-row'] [part~='status-action'] { margin-left: auto; }
+[part~='card'] {
+	border: 1px solid var(--_border);
+	border-radius: var(--_radius);
+	padding: 0.8rem 0.9rem;
+	display: flex;
+	align-items: center;
+	gap: var(--_gap);
+	width: 100%;
+	box-sizing: border-box;
+	background: transparent;
+	text-align: left;
+}
+button[part~='card'] { cursor: pointer; font: inherit; color: inherit; }
+button[part~='card']:hover { border-color: var(--_accent); }
+img[part~='icon'] {
+	width: var(--selfstore-icon-size, 2.1em);
+	height: var(--selfstore-icon-size, 2.1em);
+	object-fit: contain;
+	flex-shrink: 0;
+}
+[part~='stack'] { display: flex; flex-direction: column; gap: var(--_gap); container-type: inline-size; }
+[part~='row'] { display: flex; align-items: center; gap: var(--_gap); flex-wrap: wrap; }
+[part~='title'] { font-weight: 600; }
+[part~='sub'], [part~='hint'] { color: var(--_ink-dim); font-size: 0.9em; }
+[part~='tag'] {
+	display: inline-block;
+	font-size: 0.72em;
+	font-weight: 600;
+	line-height: 1.5;
+	padding: 0 0.55em;
+	margin-left: 0.5em;
+	border-radius: 999px;
+	background: var(--_accent);
+	color: var(--_accent-ink);
+	vertical-align: middle;
+}
+[part~='status'] {
+	display: flex;
+	align-items: center;
+	gap: var(--_gap);
+	padding: 0.7rem 0.9rem;
+	border-radius: var(--_radius);
+	background: color-mix(in srgb, var(--_accent) 10%, transparent);
+}
+[part~='status-ok'] { background: color-mix(in srgb, var(--_ok) 12%, transparent); }
+[part~='status-error'] { background: color-mix(in srgb, var(--_danger) 12%, transparent); }
+[part='spinner'] {
+	width: 0.7em; height: 0.7em; flex-shrink: 0;
+	border-radius: 50%;
+	border: 2px solid var(--_accent);
+	border-top-color: transparent;
+	animation: ss-spin 0.8s linear infinite;
+}
+@keyframes ss-spin { to { transform: rotate(360deg); } }
+button[part~='button'] {
+	font: inherit;
+	padding: 0.45rem 0.9rem;
+	border-radius: calc(var(--_radius) * 0.75);
+	border: 1px solid var(--_border);
+	background: transparent;
+	color: inherit;
+	cursor: pointer;
+}
+button[part~='button']:disabled { opacity: 0.55; cursor: default; }
+button[part~='button-primary'] {
+	background: var(--_accent);
+	border-color: var(--_accent);
+	color: var(--_accent-ink);
+}
+button[part~='button-danger'] { color: var(--_danger); }
+button[part~='link'] {
+	font: inherit;
+	background: none;
+	border: none;
+	padding: 0;
+	color: var(--_ink-dim);
+	text-decoration: underline;
+	cursor: pointer;
+}
+button[part~='link']:disabled { opacity: 0.55; cursor: default; }
+button[part~='link-danger'] { color: var(--_danger); }
+button[part~='advanced-link'] {
+	width: fit-content;
+	font-size: 0.85em;
+	margin-top: 0.1rem;
+}
+[part~='card'] [part~='row'] { margin-top: 0.45rem; }
+input[part~='input'] {
+	font: inherit;
+	color: inherit;
+	background: transparent;
+	border: 1px solid var(--_border);
+	border-radius: calc(var(--_radius) * 0.75);
+	padding: 0.45rem 0.6rem;
+	width: 100%;
+	box-sizing: border-box;
+}
+input[part~='input']:focus { outline: 2px solid var(--_accent); outline-offset: 1px; }
+/* A text input with a trailing button (the password eye) tucked inside it. */
+[part~='field'] { position: relative; display: flex; align-items: center; width: 100%; }
+[part~='field'] input[part~='input'] { padding-right: 2.4rem; }
+button[part~='eye'] {
+	position: absolute;
+	right: 0.25rem;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 2rem;
+	height: 2rem;
+	background: none;
+	border: none;
+	padding: 0;
+	cursor: pointer;
+	color: var(--_ink-dim);
+}
+button[part~='eye']:hover { color: inherit; }
+button[part~='eye'] svg { width: 1.15em; height: 1.15em; display: block; }
+[part~='warn-note'] { color: var(--_warn); }
+button[part~='forgot-link'] { width: fit-content; font-size: 0.85em; margin-top: 0.15rem; }
+[part~='error-note'] { color: var(--_danger); font-size: 0.9em; }
+/* WebDAV/S3 segmented control: a rail with the inactive segments quiet and the
+   active one lifted onto the surface. Full-width segments, equal share. */
+[part~='tabs'] {
+	display: flex;
+	gap: 0.2rem;
+	padding: 0.25rem;
+	border-radius: calc(var(--_radius) * 0.7);
+	background: color-mix(in srgb, currentColor 8%, transparent);
+}
+button[part~='tab'] {
+	flex: 1 1 0;
+	font: inherit;
+	font-weight: 600;
+	padding: 0.4rem 0.7rem;
+	border: none;
+	border-radius: calc(var(--_radius) * 0.5);
+	background: transparent;
+	color: var(--_ink-dim);
+	cursor: pointer;
+}
+button[part~='tab']:hover { color: inherit; }
+button[part~='tab-on'] {
+	background: Canvas;
+	color: inherit;
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+/* WebDAV provider quick-pick chips. */
+[part~='presets'] { display: flex; flex-wrap: wrap; gap: 0.4rem; }
+button[part~='preset'] {
+	font: inherit;
+	font-size: 0.85em;
+	padding: 0.3rem 0.75rem;
+	border: 1px solid var(--_border);
+	border-radius: 999px;
+	background: transparent;
+	color: inherit;
+	cursor: pointer;
+}
+button[part~='preset']:hover { border-color: var(--_accent); }
+button[part~='preset-on'] {
+	border-color: var(--_accent);
+	background: color-mix(in srgb, var(--_accent) 12%, transparent);
+}
+ul[part~='list'] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--_gap); }
+img[part~='qr'] {
+	width: var(--selfstore-qr-size, 6.5em);
+	height: var(--selfstore-qr-size, 6.5em);
+	border-radius: calc(var(--_radius) * 0.5);
+	background: #ffffff;
+	flex-shrink: 0;
+}
+/* Overflow menu. The trigger is a quiet in-card button; the open menu is a
+   dropdown over the trigger's corner on wide screens and a bottom sheet on
+   phones. The backdrop catches every outside click or tap (the standard
+   dismiss), sitting above the sibling cards but under the panel. */
+button[part~='menu-button'] {
+	border: none;
+	background: none;
+	padding: 0.25rem 0.6rem;
+	font-size: 1.1em;
+	line-height: 1.3;
+	border-radius: calc(var(--_radius) * 0.5);
+	color: var(--_ink-dim);
+	cursor: pointer;
+}
+button[part~='menu-button']:hover,
+button[part~='menu-button'][aria-expanded='true'] {
+	background: color-mix(in srgb, currentColor 10%, transparent);
+	color: inherit;
+}
+[part~='card'] > button[part~='menu-button'] { align-self: flex-start; }
+[part~='menu-layer'] { display: contents; }
+[part~='menu-backdrop'] { position: fixed; inset: 0; z-index: 29; background: transparent; }
+[part~='menu'] {
+	position: absolute;
+	right: 0.4rem;
+	top: 0.4rem;
+	z-index: 30;
+	display: flex;
+	flex-direction: column;
+	min-width: 11rem;
+	padding: 0.3rem 0;
+	border: 1px solid var(--_border);
+	border-radius: calc(var(--_radius) * 0.75);
+	background: Canvas;
+	color: CanvasText;
+	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
+	outline: none;
+}
+button[part~='menu-item'] {
+	font: inherit;
+	text-align: left;
+	padding: 0.55rem 0.95rem;
+	border: none;
+	background: none;
+	color: inherit;
+	cursor: pointer;
+	white-space: nowrap;
+}
+button[part~='menu-item']:hover,
+button[part~='menu-item']:focus-visible {
+	background: color-mix(in srgb, var(--_accent) 10%, transparent);
+}
+button[part~='menu-item-danger'] { color: var(--_danger); }
+@media (pointer: coarse) {
+	button[part~='menu-item'] { padding: 0.8rem 1rem; }
+}
+@media (max-width: 500px) {
+	[part~='menu-backdrop'] { background: rgba(0, 0, 0, 0.35); }
+	[part~='menu'] {
+		position: fixed;
+		inset: auto 0 0 0;
+		border-radius: var(--_radius) var(--_radius) 0 0;
+		border-bottom: none;
+		min-width: 0;
+		padding: 0.4rem 0 max(0.5rem, env(safe-area-inset-bottom));
+		box-shadow: 0 -12px 34px rgba(0, 0, 0, 0.28);
+	}
+	button[part~='menu-item'] { padding: 0.95rem 1.2rem; }
+}
+/* Responsive by default. The stack div above is the query container, so a
+   widget reacts to ITS OWN width (a narrow column on a wide screen counts),
+   and the host element's own sizing stays untouched. When the widget is
+   narrow, a list card's row (QR + url + copy + revoke) would squeeze the
+   text into a sliver: stack the card and centre the QR instead. */
+@container (max-width: 480px) {
+	li[part~='card'] {
+		flex-direction: column;
+		align-items: stretch;
+	}
+	li[part~='card'] img[part~='qr'] { align-self: center; }
+	/* Stacked cards must not push the overflow trigger below the body: it
+	   stays a top-right kebab (the card is position:relative already). */
+	li[part~='card']:has(> button[part~='menu-button']) { padding-right: 2.4rem; }
+	li[part~='card'] > button[part~='menu-button'] {
+		position: absolute;
+		top: 0.4rem;
+		right: 0.4rem;
+	}
+}
+`;
+function put(el, ...children) {
+  for (const c of children) {
+    if (c == null) continue;
+    el.append(typeof c === "string" ? document.createTextNode(c) : c);
+  }
+}
+function h(tag, attrs = {}, ...children) {
+  const el = document.createElement(tag);
+  for (const [k, v] of Object.entries(attrs)) {
+    if (v == null || v === false) continue;
+    if (k.startsWith("on") && typeof v === "function") {
+      el.addEventListener(k.slice(2), v);
+    } else if (v === true) {
+      el.setAttribute(k, "");
+    } else {
+      el.setAttribute(k, String(v));
+    }
+  }
+  for (const c of children) {
+    if (c == null) continue;
+    el.append(typeof c === "string" ? document.createTextNode(c) : c);
+  }
+  return el;
+}
+var FlowWidget = class extends HTMLElement {
+  root;
+  styleEl;
+  body;
+  overrides = {};
+  unsub = null;
+  constructor() {
+    super();
+    this.root = this.attachShadow({ mode: "open" });
+    this.styleEl = document.createElement("style");
+    this.styleEl.textContent = baseStyles;
+    this.body = document.createElement("div");
+    this.body.setAttribute("part", "stack");
+    this.root.append(this.styleEl, this.body);
+  }
+  /** Partial override map, merged over the EN defaults (also the i18n hook). */
+  get labels() {
+    return this.overrides;
+  }
+  set labels(map) {
+    this.overrides = map ?? {};
+    this.rerender();
+  }
+  t(key) {
+    return this.overrides[key] ?? this.defaults()[key] ?? key;
+  }
+  /** 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. */
+  heading(part, key) {
+    const text = this.t(key);
+    return text ? h("div", { part }, text) : null;
+  }
+  /** Map a flow error to copy: labels can override per labelKey
+   *  ('error.targetUnavailable', ...), with a generic fallback. */
+  errorText(labelKey) {
+    if (labelKey) {
+      const specific = this.overrides[labelKey] ?? this.defaults()[labelKey];
+      if (specific) return specific;
+    }
+    return this.t("error.generic");
+  }
+  emit(name, detail) {
+    this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+  }
+  /** 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;
+    try {
+      active = this.root.activeElement;
+    } catch {
+      active = null;
+    }
+    const keep = active?.getAttribute?.("data-keep") ?? null;
+    const value = active?.value;
+    this.body.replaceChildren();
+    this.view(this.body);
+    if (keep != null) {
+      const again = this.body.querySelector(`[data-keep="${keep}"]`);
+      if (again) {
+        if (value != null) again.value = value;
+        again.focus();
+      }
+    }
+  }
+  disconnectedCallback() {
+    this.unsub?.();
+    this.unsub = null;
+  }
+};
+
+// src/widgets/connect.ts
+var EN = {
+  "connect.title": "Where should we save your data?",
+  "connect.recommended": "Recommended",
+  "connect.drive": "Google Drive",
+  "connect.drive.sub": "Available on all your devices",
+  "connect.file": "A file on this device",
+  "connect.file.sub": "Offline, you keep the file",
+  "connect.file.new": "New backup",
+  "connect.file.open": "Load an existing file",
+  "connect.webdav": "My own server (WebDAV)",
+  "connect.webdav.sub": "Nextcloud, ownCloud, yours",
+  "connect.s3": "My own bucket (S3)",
+  "connect.s3.sub": "Amazon S3, R2, B2, MinIO",
+  "connect.server": "My own server",
+  "connect.server.sub": "WebDAV or an S3 bucket you control",
+  "connect.tab.webdav": "WebDAV",
+  "connect.tab.s3": "S3",
+  "connect.s3.endpoint": "Endpoint URL",
+  "connect.s3.region": "Region",
+  "connect.s3.bucket": "Bucket",
+  "connect.s3.key": "Object key (path)",
+  "connect.s3.accessKeyId": "Access key ID",
+  "connect.s3.secret": "Secret access key",
+  "connect.s3.submit": "Connect",
+  "connect.connecting": "Connecting...",
+  "connect.connecting.drive": "Authorise access in the Google window.",
+  "connect.cancel": "Cancel",
+  "connect.retry": "Try again",
+  "connect.password.title": "This backup is protected",
+  "connect.password.hint": "Enter its password to open it.",
+  "connect.password.placeholder": "Password",
+  "connect.password.wrong": "Wrong password. Try again.",
+  "connect.password.submit": "Open",
+  "connect.password.show": "Show password",
+  "connect.password.hide": "Hide password",
+  "connect.password.forgot": "Forgot the password?",
+  "connect.password.forgot.warn": "Without the password, this backup cannot be opened. You can erase it and start from an empty one. The old backup is lost for good.",
+  "connect.password.forgot.confirm": "Overwrite the backup",
+  "connect.password.forgot.back": "Back",
+  "connect.conflict.title": "This destination already holds a backup",
+  "connect.conflict.merge": "Merge both",
+  "connect.conflict.merge.sub": "Keep everything from both sides",
+  "connect.conflict.resume": "Use the backup",
+  "connect.conflict.resume.sub": "This device adopts it",
+  "connect.conflict.replace": "Replace the backup",
+  "connect.conflict.replace.sub": "This device wins, the backup is overwritten",
+  "connect.webdav.url": "Server URL",
+  "connect.webdav.user": "Username",
+  "connect.webdav.password": "Password",
+  "connect.webdav.submit": "Connect",
+  "connect.webdav.signup": "Create an account",
+  "connect.webdav.help.more": "How?",
+  "connect.done": "Connected. Your data is saved.",
+  "connect.done.manual": "Download mode: save the file after each change.",
+  "error.generic": "That did not work. Check the connection and try again.",
+  "error.targetUnavailable": "The destination did not answer. Try again in a moment.",
+  "error.authExpired": "Access expired: reconnect to continue.",
+  "error.decryptFailed": "This backup could not be opened with that password.",
+  "error.badFormat": "This file does not look like a readable backup."
+};
+var EYE_SHOW = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12s3-8 10-8 10 8 10 8-3 8-10 8-10-8-10-8Z"/><circle cx="12" cy="12" r="3"/></svg>';
+var EYE_HIDE = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 10 8 10 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><path d="M6.61 6.61A18.45 18.45 0 0 0 2 12s3 8 10 8a9.12 9.12 0 0 0 5.39-1.61"/><line x1="2" y1="2" x2="22" y2="22"/></svg>';
+function eyeIcon(visible) {
+  const span = document.createElement("span");
+  span.innerHTML = visible ? EYE_HIDE : EYE_SHOW;
+  return span.firstElementChild;
+}
+var SelfstoreConnectElement = class extends FlowWidget {
+  static get observedAttributes() {
+    return ["recommended", "advanced"];
+  }
+  #store = null;
+  #targets = null;
+  #options = {};
+  #flow = null;
+  #recommended = null;
+  #icons = {};
+  #advanced = [];
+  #webdavPresets = [];
+  #webdavUrl = "";
+  #webdavUser = "";
+  #webdavPass = "";
+  #pickedPreset = null;
+  // S3 form fields (kept on the element, like the WebDAV ones, so switching the
+  // server tab never loses what was typed).
+  #s3Endpoint = "";
+  #s3Region = "";
+  #s3Bucket = "";
+  #s3Key = "";
+  #s3AccessKeyId = "";
+  #s3Secret = "";
+  // Password-step local UI state (never in the flow: purely how this element
+  // draws the step). Reset whenever the flow leaves 'password' (see wire()).
+  #pwVisible = false;
+  #confirmOverwrite = false;
+  defaults() {
+    return EN;
+  }
+  /** The simple store (anything exposing `flowHost`), or a hand-built FlowHost. */
+  get store() {
+    return this.#store;
+  }
+  set store(v) {
+    this.#store = v;
+    this.wire();
+  }
+  get targets() {
+    return this.#targets;
+  }
+  set targets(v) {
+    this.#targets = v;
+    this.wire();
+  }
+  get options() {
+    return this.#options;
+  }
+  set options(v) {
+    this.#options = v ?? {};
+    this.wire();
+  }
+  /** Badge one destination as the one to pick (part="tag", label
+   *  'connect.recommended'). Purely a highlight: the order still follows the
+   *  targets object. Also the `recommended` attribute. Default: none. */
+  get recommended() {
+    return this.#recommended;
+  }
+  set recommended(v) {
+    this.#recommended = v === "drive" || v === "file" || v === "webdav" || v === "s3" ? v : null;
+    this.rerender();
+  }
+  /** An optional icon per destination - an image URL or data URI, rendered as
+   *  part="icon" at the head of that card. Purely decorative and per-instance;
+   *  omit a kind for no icon. Size it with --selfstore-icon-size. */
+  get icons() {
+    return this.#icons;
+  }
+  set icons(v) {
+    this.#icons = v ?? {};
+    this.rerender();
+  }
+  /** Destinations to tuck behind a discreet link under the cards instead of a
+   *  full card - for power-user options (say, WebDAV) that must stay reachable
+   *  without weighing the everyday choice. Also the `advanced` attribute
+   *  (comma-separated). The journey after the click is exactly the same. */
+  get advanced() {
+    return this.#advanced;
+  }
+  set advanced(v) {
+    this.#advanced = (v ?? []).filter(
+      (k) => k === "drive" || k === "file" || k === "webdav" || k === "s3"
+    );
+    this.rerender();
+  }
+  /** Named WebDAV providers offered as a quick-pick row above the WebDAV form,
+   *  pre-filling the URL field. The app owns the list (its own host, sovereign
+   *  providers, ...); selfstore ships none. Purely additive - the blank form
+   *  still works. */
+  get webdavPresets() {
+    return this.#webdavPresets;
+  }
+  set webdavPresets(v) {
+    this.#webdavPresets = Array.isArray(v) ? v : [];
+    this.rerender();
+  }
+  /** The underlying flow, for programmatic control (may be null until wired). */
+  get flow() {
+    return this.#flow;
+  }
+  attributeChangedCallback(name, _old, value) {
+    if (name === "recommended") this.recommended = value;
+    if (name === "advanced") {
+      this.advanced = (value ?? "").split(",").map((s) => s.trim());
+    }
+  }
+  connectedCallback() {
+    if (this.#recommended === null && this.hasAttribute("recommended")) {
+      this.recommended = this.getAttribute("recommended");
+    }
+    if (this.#advanced.length === 0 && this.hasAttribute("advanced")) {
+      this.advanced = (this.getAttribute("advanced") ?? "").split(",").map((s) => s.trim());
+    }
+    this.wire();
+  }
+  wire() {
+    if (!this.isConnected || !this.#store || !this.#targets) return;
+    this.unsub?.();
+    this.#flow = connectFlow(this.#store, this.#targets, this.#options);
+    let last = null;
+    this.unsub = this.#flow.subscribe((snap) => {
+      const was = last;
+      last = snap;
+      if (snap.step === "connected" && was?.step !== "connected") {
+        this.emit("selfstore-connected", { outcome: snap.outcome });
+      }
+      if (snap.step === "error" && was?.step !== "error") {
+        this.emit("selfstore-error", { error: snap.error });
+      }
+      if (snap.step !== "password") {
+        this.#pwVisible = false;
+        this.#confirmOverwrite = false;
+      }
+      this.rerender();
+    });
+  }
+  view(into) {
+    const flow = this.#flow;
+    if (!flow) return;
+    const s = flow.snapshot;
+    if (s.step === "choose") {
+      put(into, this.heading("title", "connect.title"));
+      const serverKinds = ["webdav", "s3"].filter(
+        (k) => s.kinds.includes(k) && !this.#advanced.includes(k)
+      );
+      const groupServer = serverKinds.length >= 2;
+      for (const kind of s.kinds) {
+        if (this.#advanced.includes(kind)) continue;
+        if (groupServer && (kind === "webdav" || kind === "s3")) {
+          if (kind === serverKinds[0]) into.append(this.serverCard(serverKinds[0]));
+          continue;
+        }
+        into.append(this.destCard(kind));
+      }
+      for (const kind of s.kinds) {
+        if (this.#advanced.includes(kind)) {
+          into.append(
+            h(
+              "button",
+              { part: "link advanced-link", "data-kind": kind, onclick: () => this.#flow?.choose(kind) },
+              this.t(`connect.${kind}`)
+            )
+          );
+        }
+      }
+      return;
+    }
+    if (s.step === "form") {
+      const kind = s.kind === "s3" ? "s3" : "webdav";
+      const tabbed = ["webdav", "s3"].filter((k) => this.#targets?.[k] === true).length >= 2;
+      const children = [
+        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)
+      );
+      into.append(...children);
+      return;
+    }
+    if (s.step === "authorizing") {
+      into.append(
+        h(
+          "div",
+          { part: "status" },
+          h("span", { part: "spinner", "aria-hidden": "true" }),
+          h(
+            "div",
+            {},
+            h("div", { part: "title" }, this.t("connect.connecting")),
+            s.kind === "drive" ? h("div", { part: "sub" }, this.t("connect.connecting.drive")) : null
+          ),
+          h("button", { part: "button", onclick: () => this.cancel() }, this.t("connect.cancel"))
+        )
+      );
+      return;
+    }
+    if (s.step === "password") {
+      if (this.#confirmOverwrite) {
+        put(
+          into,
+          h("div", { part: "title" }, this.t("connect.password.title")),
+          h("div", { part: "hint warn-note" }, this.t("connect.password.forgot.warn")),
+          h(
+            "div",
+            { part: "row" },
+            h(
+              "button",
+              { part: "button button-danger", disabled: s.busy, onclick: () => this.doOverwrite() },
+              this.t("connect.password.forgot.confirm")
+            ),
+            h(
+              "button",
+              { part: "button", disabled: s.busy, onclick: () => this.setConfirmOverwrite(false) },
+              this.t("connect.password.forgot.back")
+            )
+          )
+        );
+        return;
+      }
+      const field = h(
+        "div",
+        { part: "field" },
+        h("input", {
+          part: "input",
+          type: this.#pwVisible ? "text" : "password",
+          placeholder: this.t("connect.password.placeholder"),
+          "data-keep": "password",
+          autocomplete: "current-password"
+        }),
+        h(
+          "button",
+          {
+            part: "eye",
+            type: "button",
+            "aria-label": this.t(this.#pwVisible ? "connect.password.hide" : "connect.password.show"),
+            "aria-pressed": this.#pwVisible ? "true" : "false",
+            onclick: () => this.togglePassword()
+          },
+          eyeIcon(this.#pwVisible)
+        )
+      );
+      put(
+        into,
+        h("div", { part: "title" }, this.t("connect.password.title")),
+        h("div", { part: "hint" }, this.t("connect.password.hint")),
+        field,
+        s.passwordError ? h("div", { part: "error-note" }, this.t("connect.password.wrong")) : null,
+        h(
+          "div",
+          { part: "row" },
+          h(
+            "button",
+            { 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
+          // always have a working way out. The generation counter makes a
+          // late resolution of the abandoned leg a no-op, so leaving is safe.
+          h("button", { part: "button", onclick: () => this.cancel() }, this.t("connect.cancel"))
+        ),
+        // The forgotten-password escape: a discreet link into the confirm
+        // sub-state above (erasing the backup is never one careless click).
+        h(
+          "button",
+          { part: "link forgot-link", onclick: () => this.setConfirmOverwrite(true) },
+          this.t("connect.password.forgot")
+        )
+      );
+      return;
+    }
+    if (s.step === "conflict") {
+      into.append(h("div", { part: "title" }, this.t("connect.conflict.title")));
+      for (const how of ["merge", "resume", "replace"]) {
+        into.append(
+          h(
+            "button",
+            { part: "card", disabled: s.busy, onclick: () => flow.resolveConflict(how) },
+            h(
+              "div",
+              {},
+              h("div", { part: "title" }, this.t(`connect.conflict.${how}`)),
+              h("div", { part: "sub" }, this.t(`connect.conflict.${how}.sub`))
+            )
+          )
+        );
+      }
+      into.append(h("button", { part: "link", onclick: () => this.cancel() }, this.t("connect.cancel")));
+      return;
+    }
+    if (s.step === "connected") {
+      into.append(
+        h(
+          "div",
+          { part: "status status-ok" },
+          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: "row" },
+        h("button", { part: "button button-primary", onclick: () => flow.retry() }, this.t("connect.retry")),
+        h("button", { part: "button", onclick: () => this.cancel() }, this.t("connect.cancel"))
+      )
+    );
+  }
+  destCard(kind) {
+    const icon = this.#icons[kind];
+    const head = icon ? h("img", { part: "icon", src: icon, alt: "" }) : null;
+    const title = h(
+      "div",
+      { part: "title" },
+      this.t(`connect.${kind}`),
+      this.#recommended === kind ? h("span", { part: "tag" }, this.t("connect.recommended")) : null
+    );
+    const sub = h("div", { part: "sub" }, this.t(`connect.${kind}.sub`));
+    const fileSpec = kind === "file" ? this.#targets?.file : null;
+    if (fileSpec && typeof fileSpec === "object") {
+      const openSupported = typeof window !== "undefined" && "showOpenFilePicker" in window;
+      const actions = h("div", { part: "row" });
+      if (fileSpec.create != null) {
+        actions.append(
+          h(
+            "button",
+            { part: "button button-primary", "data-action": "create", onclick: () => this.#flow?.choose("file", "create") },
+            this.t("connect.file.new")
+          )
+        );
+      }
+      if (fileSpec.open != null && (typeof fileSpec.open === "function" || openSupported)) {
+        actions.append(
+          h(
+            "button",
+            { part: "button", "data-action": "open", onclick: () => this.#flow?.choose("file", "open") },
+            this.t("connect.file.open")
+          )
+        );
+      }
+      const body = h("div", {}, title, sub);
+      if (actions.childElementCount > 0) body.append(actions);
+      return h("div", { part: "card", "data-kind": kind }, head, body);
+    }
+    return h(
+      "button",
+      { part: "card", "data-kind": kind, onclick: () => this.#flow?.choose(kind) },
+      head,
+      h("div", {}, title, sub)
+    );
+  }
+  /** The grouped "your own server" card shown when both WebDAV and S3 are
+   *  offered: one entry into the tabbed form, opening on the first server kind. */
+  serverCard(defaultKind) {
+    const recommended = this.#recommended === "webdav" || this.#recommended === "s3";
+    return h(
+      "button",
+      { part: "card", "data-kind": "server", onclick: () => this.#flow?.choose(defaultKind) },
+      h(
+        "div",
+        {},
+        h(
+          "div",
+          { part: "title" },
+          this.t("connect.server"),
+          recommended ? h("span", { part: "tag" }, this.t("connect.recommended")) : null
+        ),
+        h("div", { part: "sub" }, this.t("connect.server.sub"))
+      )
+    );
+  }
+  /** WebDAV/S3 segmented toggle. Switching leaves the form and re-enters it on
+   *  the other kind - no flow surgery - and the typed fields live on the element,
+   *  so nothing the user wrote is lost across the switch. */
+  serverTabs(active) {
+    const tab = (k) => h(
+      "button",
+      {
+        part: active === k ? "tab tab-on" : "tab",
+        type: "button",
+        "data-tab": k,
+        "aria-pressed": active === k ? "true" : "false",
+        onclick: () => {
+          if (active === k) return;
+          this.#flow?.cancel();
+          this.#flow?.choose(k);
+        }
+      },
+      this.t(`connect.tab.${k}`)
+    );
+    return h("div", { part: "tabs" }, tab("webdav"), tab("s3"));
+  }
+  webdavFormChildren(flow) {
+    const picked = this.#pickedPreset;
+    const out = [];
+    if (this.#webdavPresets.length > 0) {
+      out.push(
+        h(
+          "div",
+          { part: "presets" },
+          ...this.#webdavPresets.map(
+            (p) => h(
+              "button",
+              {
+                part: picked?.id === p.id ? "preset preset-on" : "preset",
+                type: "button",
+                "data-preset": p.id,
+                "aria-pressed": picked?.id === p.id ? "true" : "false",
+                title: p.help ?? "",
+                onclick: () => this.pickWebdavPreset(p)
+              },
+              p.label
+            )
+          )
+        )
+      );
+    }
+    out.push(
+      h("input", {
+        part: "input",
+        type: "url",
+        placeholder: this.t("connect.webdav.url"),
+        "data-keep": "wd-url",
+        value: this.#webdavUrl,
+        oninput: (e) => this.#webdavUrl = e.target.value
+      }),
+      h("input", {
+        part: "input",
+        type: "text",
+        placeholder: this.t("connect.webdav.user"),
+        "data-keep": "wd-user",
+        value: this.#webdavUser,
+        oninput: (e) => this.#webdavUser = e.target.value
+      }),
+      h("input", {
+        part: "input",
+        type: "password",
+        placeholder: this.t("connect.webdav.password"),
+        "data-keep": "wd-pass",
+        value: this.#webdavPass,
+        oninput: (e) => this.#webdavPass = e.target.value
+      })
+    );
+    if (picked?.help) {
+      out.push(
+        h(
+          "div",
+          { part: "hint webdav-note" },
+          picked.help,
+          picked.helpUrl ? h(
+            "a",
+            { part: "link webdav-help", href: picked.helpUrl, target: "_blank", rel: "noopener noreferrer" },
+            ` ${this.t("connect.webdav.help.more")}`
+          ) : null
+        )
+      );
+    }
+    out.push(
+      h(
+        "div",
+        { part: "row" },
+        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"))
+      )
+    );
+    if (picked?.signupUrl) {
+      out.push(
+        h(
+          "a",
+          { part: "link webdav-signup", href: picked.signupUrl, target: "_blank", rel: "noopener noreferrer" },
+          this.t("connect.webdav.signup")
+        )
+      );
+    }
+    return out;
+  }
+  s3FormChildren(flow) {
+    const field = (type, label, keep, get, set) => h("input", {
+      part: "input",
+      type,
+      placeholder: this.t(label),
+      "data-keep": keep,
+      value: get(),
+      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),
+      h(
+        "div",
+        { part: "row" },
+        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"))
+      )
+    ];
+  }
+  submitS3() {
+    const endpoint = this.#s3Endpoint.trim();
+    const region = this.#s3Region.trim();
+    const bucket = this.#s3Bucket.trim();
+    const key = this.#s3Key.trim();
+    if (!endpoint || !region || !bucket || !key) return;
+    const config = {
+      endpoint,
+      region,
+      bucket,
+      key,
+      accessKeyId: this.#s3AccessKeyId.trim(),
+      secretAccessKey: this.#s3Secret
+    };
+    this.#flow?.submitS3(config);
+  }
+  cancel() {
+    this.#flow?.cancel();
+    this.emit("selfstore-cancelled");
+  }
+  submitPassword() {
+    const input = this.root.querySelector('[data-keep="password"]');
+    if (input) this.#flow?.submitPassword(input.value);
+  }
+  /** Flip the password field between hidden and shown IN PLACE - swap the
+   *  input type and the eye glyph without a re-render, so what the user has
+   *  already typed survives the toggle. */
+  togglePassword() {
+    this.#pwVisible = !this.#pwVisible;
+    const input = this.root.querySelector('[data-keep="password"]');
+    if (input) {
+      input.type = this.#pwVisible ? "text" : "password";
+      input.focus();
+    }
+    const eye = this.root.querySelector('[part~="eye"]');
+    if (eye) {
+      eye.setAttribute(
+        "aria-label",
+        this.t(this.#pwVisible ? "connect.password.hide" : "connect.password.show")
+      );
+      eye.setAttribute("aria-pressed", this.#pwVisible ? "true" : "false");
+      eye.replaceChildren(eyeIcon(this.#pwVisible));
+    }
+  }
+  /** Enter or leave the forgotten-password confirmation sub-state. */
+  setConfirmOverwrite(on) {
+    this.#confirmOverwrite = on;
+    this.rerender();
+  }
+  /** Confirmed: abandon the forgotten password and start a fresh backup over
+   *  the protected one (the flow makes this device win). */
+  doOverwrite() {
+    this.#flow?.overwrite();
+  }
+  /** Fill the WebDAV URL field from a picked provider preset and move focus on to
+   *  the username, so the pick just seeds the form the user then completes. The
+   *  pick is remembered so its guidance / sign-up link render and its chip flags
+   *  as active; a re-render keeps the already-typed username and password. */
+  pickWebdavPreset(p) {
+    this.#pickedPreset = p;
+    this.#webdavUrl = p.url ?? "";
+    this.rerender();
+    this.root.querySelector('[data-keep="wd-user"]')?.focus();
+  }
+  submitWebdav() {
+    const url = this.#webdavUrl.trim();
+    if (!url) return;
+    const config = {
+      url,
+      username: this.#webdavUser.trim(),
+      password: this.#webdavPass
+    };
+    this.#flow?.submitWebdav(config);
+  }
+};
+
+// src/widgets/share.ts
+var EN2 = {
+  "share.title": "Sharing",
+  "share.create.read": "Create a view link",
+  "share.create.write": "Create an edit link",
+  "share.creating": "Creating...",
+  "share.level.read": "Can view",
+  "share.level.write": "Can edit",
+  "share.copy": "Copy",
+  "share.copied": "Copied",
+  "share.revoke": "Revoke",
+  "share.members": "People with access",
+  "share.member.you": "you",
+  "share.member.owner": "owner",
+  "share.remove": "Remove",
+  "share.stop": "Stop sharing",
+  "share.empty": "Nobody else has access yet.",
+  "share.stale": "Connection hiccup: this view may be behind.",
+  "error.generic": "That did not work. Check the connection and try again.",
+  "error.targetUnavailable": "The share service did not answer. Try again in a moment."
+};
+var isOff = (v) => v != null && ["off", "false", "no", "0"].includes(v.trim().toLowerCase());
+var SelfstoreShareElement = class extends FlowWidget {
+  static get observedAttributes() {
+    return ["levels", "with-create", "with-members"];
+  }
+  #engine = null;
+  #flow = null;
+  #options = {};
+  #levels = ["read", "write"];
+  #withCreate = true;
+  #withMembers = true;
+  #confirmAction = null;
+  #qrProvider = null;
+  #qr = /* @__PURE__ */ new Map();
+  #qrPending = /* @__PURE__ */ new Set();
+  #copiedId = null;
+  #creating = null;
+  defaults() {
+    return EN2;
+  }
+  /** The app-side transport of links and memberships (see ShareEngine). */
+  get engine() {
+    return this.#engine;
+  }
+  set engine(v) {
+    this.#engine = v;
+    this.wire();
+  }
+  /** Flow options (deadlineMs), for engines whose legs outgrow the default
+   *  30s guard (a large first upload, a slow relay). */
+  get options() {
+    return this.#options;
+  }
+  set options(v) {
+    this.#options = v ?? {};
+    this.wire();
+  }
+  /** Which levels the panel OFFERS to create (['read', 'write'] by default) -
+   *  one create button per level without a live link. Also the `levels`
+   *  attribute, comma-separated: levels="read". Links the engine lists
+   *  render whatever this says. */
+  get levels() {
+    return [...this.#levels];
+  }
+  set levels(v) {
+    const clean = [...new Set((v ?? []).filter((l) => l === "read" || l === "write"))];
+    this.#levels = clean.length > 0 ? clean : ["read", "write"];
+    this.rerender();
+  }
+  /** Render the create buttons (default). `with-create="off"` hides them: the
+   *  panel becomes list-and-revoke only. */
+  get withCreate() {
+    return this.#withCreate;
+  }
+  set withCreate(v) {
+    this.#withCreate = v !== false;
+    this.rerender();
+  }
+  /** Render the members section (default). `with-members="off"` hides it:
+   *  a links-only panel. */
+  get withMembers() {
+    return this.#withMembers;
+  }
+  set withMembers(v) {
+    this.#withMembers = v !== false;
+    this.rerender();
+  }
+  /** Host veto over the destructive actions: called before revoke, remove or
+   *  stop runs; answer (or resolve) false to keep things as they are -
+   *  window.confirm fits as-is. Default: everything proceeds. */
+  get confirmAction() {
+    return this.#confirmAction;
+  }
+  set confirmAction(v) {
+    this.#confirmAction = v ?? null;
+  }
+  /** Turn a link URL into an image source (a data URL fits): when set, each
+   *  link card renders it as an img part="qr". Injected so the element ships
+   *  no QR dependency. */
+  get qrProvider() {
+    return this.#qrProvider;
+  }
+  set qrProvider(v) {
+    this.#qrProvider = v ?? null;
+    this.#qr.clear();
+    this.#qrPending.clear();
+    this.rerender();
+  }
+  get flow() {
+    return this.#flow;
+  }
+  attributeChangedCallback(name, _old, value) {
+    if (name === "levels") {
+      this.levels = (value ?? "").split(",").map((s) => s.trim());
+    }
+    if (name === "with-create") this.withCreate = value == null || !isOff(value);
+    if (name === "with-members") this.withMembers = value == null || !isOff(value);
+  }
+  connectedCallback() {
+    this.wire();
+  }
+  wire() {
+    if (!this.isConnected || !this.#engine) return;
+    this.unsub?.();
+    this.#flow = shareFlow(this.#engine, this.#options);
+    this.unsub = this.#flow.subscribe(() => this.rerender());
+  }
+  view(into) {
+    const flow = this.#flow;
+    if (!flow) return;
+    const s = flow.snapshot;
+    put(into, this.heading("title", "share.title"));
+    if (s.stale) into.append(h("div", { part: "hint" }, this.t("share.stale")));
+    if (s.error && !s.stale) {
+      into.append(h("div", { part: "error-note" }, this.errorText(s.error.labelKey)));
+    }
+    if (this.#withCreate) {
+      const missing = this.#levels.filter((l) => !s.links.some((k) => k.level === l));
+      if (missing.length > 0) {
+        into.append(
+          h(
+            "div",
+            { part: "row" },
+            ...missing.map(
+              (level) => h(
+                "button",
+                {
+                  part: "button button-primary",
+                  "data-action": `create-${level}`,
+                  disabled: s.busy !== null,
+                  onclick: () => this.create(level)
+                },
+                this.t(
+                  s.busy === "create" && this.#creating === level ? "share.creating" : `share.create.${level}`
+                )
+              )
+            )
+          )
+        );
+      }
+    }
+    if (s.links.length > 0) {
+      const list = h("ul", { part: "list" });
+      for (const link of s.links) {
+        const qr = this.qrFor(link.url);
+        list.append(
+          h(
+            "li",
+            { part: "card", "data-link": link.id },
+            qr ? h("img", { part: "qr", src: qr, alt: "" }) : null,
+            h(
+              "div",
+              { style: "flex:1;min-width:0" },
+              h("div", { part: "title" }, this.t(`share.level.${link.level}`)),
+              h("div", { part: "sub", style: "word-break:break-all" }, link.url)
+            ),
+            h(
+              "button",
+              { 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) },
+              this.t("share.revoke")
+            )
+          )
+        );
+      }
+      into.append(list);
+    }
+    if (this.#withMembers) {
+      put(into, this.heading("sub", "share.members"));
+      if (s.members.length === 0) {
+        into.append(h("div", { part: "hint" }, this.t("share.empty")));
+      } else {
+        const members = h("ul", { part: "list" });
+        for (const m of s.members) {
+          const badges = [];
+          if (m.self) badges.push(this.t("share.member.you"));
+          if (m.owner) badges.push(this.t("share.member.owner"));
+          members.append(
+            h(
+              "li",
+              { part: "card", "data-member": m.id },
+              h(
+                "div",
+                { style: "flex:1" },
+                h("div", { part: "title" }, m.label || m.id),
+                badges.length ? h("div", { part: "sub" }, badges.join(" - ")) : null
+              ),
+              s.canRemoveMembers && !m.self ? h(
+                "button",
+                { part: "button button-danger", "data-action": "remove", disabled: s.busy !== null, onclick: () => this.removeRow(m.id) },
+                this.t("share.remove")
+              ) : null
+            )
+          );
+        }
+        into.append(members);
+      }
+    }
+    if (s.canRevokeAll && s.members.some((m) => !m.self)) {
+      into.append(
+        h(
+          "div",
+          { part: "footer", style: "text-align:right" },
+          h(
+            "button",
+            { part: "link link-danger", "data-action": "stop", disabled: s.busy !== null, onclick: () => this.stop() },
+            this.t("share.stop")
+          )
+        )
+      );
+    }
+  }
+  create(level) {
+    this.#creating = level;
+    void this.#flow?.createLink({ level }).then((link) => {
+      this.#creating = null;
+      if (link) this.emit("selfstore-link-created", { link });
+      this.rerender();
+    });
+  }
+  /** Run a destructive action through the host's veto (default: proceed).
+   *  A throwing hook reads as "no": destruction needs a clear yes. */
+  guarded(action, run) {
+    const gate = this.#confirmAction;
+    if (!gate) {
+      run();
+      return;
+    }
+    void Promise.resolve().then(() => gate(action)).then((ok) => {
+      if (ok) run();
+    }).catch(() => void 0);
+  }
+  revoke(id) {
+    this.guarded({ type: "revoke", id }, () => void this.#flow?.revokeLink(id));
+  }
+  removeRow(id) {
+    this.guarded({ type: "remove", id }, () => void this.#flow?.removeMember(id));
+  }
+  stop() {
+    this.guarded({ type: "stop" }, () => {
+      void this.#flow?.revokeAll().then((ok) => {
+        if (ok) this.emit("selfstore-share-stopped");
+      });
+    });
+  }
+  qrFor(url) {
+    const provider = this.#qrProvider;
+    if (!provider) return null;
+    const got = this.#qr.get(url);
+    if (got) return got;
+    if (!this.#qrPending.has(url)) {
+      this.#qrPending.add(url);
+      void provider(url).then((src) => {
+        if (this.#qrProvider !== provider) return;
+        this.#qr.set(url, src);
+        this.rerender();
+      }).catch(() => void 0).finally(() => this.#qrPending.delete(url));
+    }
+    return null;
+  }
+  copy(id, url) {
+    this.#copiedId = id;
+    this.emit("selfstore-link-copied", { url });
+    void navigator.clipboard?.writeText(url).catch(() => void 0);
+    this.rerender();
+    setTimeout(() => {
+      if (this.#copiedId !== id) return;
+      this.#copiedId = null;
+      this.rerender();
+    }, 1500);
+  }
+};
+
+// src/widgets/join.ts
+var EN3 = {
+  "join.previewing": "Reading the invitation...",
+  "join.title": "You are invited",
+  "join.from": "Shared by {from}",
+  "join.level.read": "You will be able to view it.",
+  "join.level.write": "You will be able to view and edit it.",
+  "join.accept": "Join",
+  "join.joining": "Joining...",
+  "join.joined": "You are in. The shared data now syncs on this device.",
+  "join.mismatch": "This device already follows another share. Leave it first, or use another profile.",
+  "join.noInvite": "This invitation is spent, or meant for another account.",
+  "join.switchAccount": "Use another account",
+  "join.retry": "Try again",
+  "error.generic": "That did not work. Check the connection and try again.",
+  "error.targetUnavailable": "The invitation could not be read. Try again in a moment."
+};
+var SelfstoreJoinElement = class extends FlowWidget {
+  static get observedAttributes() {
+    return ["link", "variant"];
+  }
+  #engine = null;
+  #link = null;
+  #flow = null;
+  #variant = "card";
+  #options = {};
+  defaults() {
+    return EN3;
+  }
+  get engine() {
+    return this.#engine;
+  }
+  set engine(v) {
+    this.#engine = v;
+    this.wire();
+  }
+  /** The invitation. Also settable as the `link` attribute. */
+  get link() {
+    return this.#link;
+  }
+  set link(v) {
+    this.#link = v;
+    this.wire();
+  }
+  /** Flow options (deadlineMs). Set it when the engine's join opens a popup:
+   *  a generous deadline keeps the network guard without timing out a human
+   *  who is reading an account chooser. */
+  get options() {
+    return this.#options;
+  }
+  set options(v) {
+    this.#options = v ?? {};
+    this.wire();
+  }
+  /** 'card' (default): the full invitation card - who shared, what level.
+   *  'banner': one line - label, join, account switch - for a host page that
+   *  renders its own preview around the widget. Also the `variant` attribute. */
+  get variant() {
+    return this.#variant;
+  }
+  set variant(v) {
+    this.#variant = v === "banner" ? "banner" : "card";
+    this.rerender();
+  }
+  get flow() {
+    return this.#flow;
+  }
+  attributeChangedCallback(name, _old, value) {
+    if (name === "link") this.link = value;
+    if (name === "variant") this.variant = value ?? "card";
+  }
+  connectedCallback() {
+    if (!this.#link && this.hasAttribute("link")) this.#link = this.getAttribute("link");
+    if (this.hasAttribute("variant")) {
+      this.#variant = this.getAttribute("variant") === "banner" ? "banner" : "card";
+    }
+    this.wire();
+  }
+  wire() {
+    if (!this.isConnected || !this.#engine || !this.#link) return;
+    this.unsub?.();
+    this.#flow = joinFlow(this.#link, this.#engine, this.#options);
+    let lastStep = null;
+    this.unsub = this.#flow.subscribe((snap) => {
+      if (snap.step !== lastStep) {
+        if (snap.step === "joined") this.emit("selfstore-joined", { outcome: "joined" });
+        if (snap.step === "mismatch" || snap.step === "no-invite") {
+          this.emit("selfstore-join-refused", { outcome: snap.step });
+        }
+        if (snap.step === "ready" && lastStep === "joining") {
+          this.emit("selfstore-cancelled");
+        }
+        lastStep = snap.step;
+      }
+      this.rerender();
+    });
+  }
+  view(into) {
+    const flow = this.#flow;
+    if (!flow) return;
+    const s = flow.snapshot;
+    if (s.step === "previewing" || s.step === "joining") {
+      into.append(
+        h(
+          "div",
+          { part: "status" },
+          h("span", { part: "spinner", "aria-hidden": "true" }),
+          h("div", { part: "title" }, this.t(s.step === "joining" ? "join.joining" : "join.previewing"))
+        )
+      );
+      return;
+    }
+    if (s.step === "ready") {
+      const p = s.preview;
+      if (this.#variant === "banner") {
+        put(
+          into,
+          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
+          )
+        );
+        return;
+      }
+      put(
+        into,
+        h("div", { part: "title" }, p?.label || this.t("join.title")),
+        p?.from ? h("div", { part: "sub" }, this.t("join.from").replace("{from}", p.from)) : null,
+        p?.level ? h("div", { part: "hint" }, this.t(`join.level.${p.level}`)) : null,
+        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
+        )
+      );
+      return;
+    }
+    if (s.step === "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")))
+      );
+      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")))
+        );
+      }
+      return;
+    }
+    into.append(
+      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
+      )
+    );
+  }
+};
+
+// src/widgets/status.ts
+var EN4 = {
+  "status.ephemeral": "Nothing is saved",
+  "status.cacheOnly": "Only on this device",
+  "status.saving": "Saving...",
+  "status.saved": "Saved",
+  "status.needsAttention": "Reconnect to continue",
+  "status.locked": "Locked",
+  "status.pendingDownload": "Changes to download",
+  "status.action.choose-destination": "Choose a destination",
+  "status.action.download": "Download",
+  "status.action.reconnect": "Reconnect",
+  "status.action.unlock": "Unlock"
+};
+var SelfstoreStatusElement = class extends FlowWidget {
+  static get observedAttributes() {
+    return ["variant"];
+  }
+  #store = null;
+  #variant = "row";
+  #icons = {};
+  defaults() {
+    return EN4;
+  }
+  /** The simple store (anything exposing `flowHost`), or a hand-built FlowHost. */
+  get store() {
+    return this.#store;
+  }
+  set store(v) {
+    this.#store = v;
+    this.wire();
+  }
+  /** 'row' (dot + text + action) or 'dot' (the dot alone). Also the attribute. */
+  get variant() {
+    return this.#variant;
+  }
+  set variant(v) {
+    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() {
+    if (this.hasAttribute("variant")) this.variant = this.getAttribute("variant");
+    this.wire();
+  }
+  host() {
+    const s = this.#store;
+    if (!s) return null;
+    return "flowHost" in s ? s.flowHost : s;
+  }
+  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();
+  }
+  view(into) {
+    const host = this.host();
+    if (!host) return;
+    const { status, targetKind, label } = host.engine.state;
+    const text = this.t(status.labelKey);
+    const dot = h("span", {
+      part: `status-dot sev-${status.severity}`,
+      "aria-hidden": "true"
+    });
+    if (this.#variant === "dot") {
+      into.append(
+        h(
+          "button",
+          {
+            part: "dot-button",
+            "aria-label": text,
+            title: text,
+            onclick: () => this.emit("selfstore-status-action", { action: status.action ?? null })
+          },
+          dot
+        )
+      );
+      return;
+    }
+    const icon = this.#icons[targetKind];
+    const where = this.t(`status.where.${targetKind}`);
+    const sub = where !== `status.where.${targetKind}` ? where : label ?? "";
+    put(
+      into,
+      h(
+        "div",
+        { part: "row status-row" },
+        dot,
+        icon ? h("img", { part: "icon", src: icon, alt: "" }) : null,
+        h(
+          "div",
+          {},
+          h("div", { part: "title" }, text),
+          sub ? h("div", { part: "sub" }, sub) : null
+        ),
+        status.actionable && status.action ? h(
+          "button",
+          {
+            part: "button status-action",
+            onclick: () => this.emit("selfstore-status-action", { action: status.action })
+          },
+          this.t(`status.action.${status.action}`)
+        ) : null
+      )
+    );
+  }
+};
+
+// src/widgets/backups.ts
+var EN5 = {
+  "backups.mine.heading": "My backups",
+  "backups.mine.personal": "Main backup",
+  "backups.active": "Active",
+  "backups.pill.encrypted": "Encrypted",
+  "backups.pill.plain": "Not encrypted",
+  "backups.pill.shared": "Shared",
+  "backups.pill.private": "Not shared",
+  "backups.modified": "modified {when}",
+  "backups.replaceHint": "Opening replaces the data on this device.",
+  "backups.loading": "Opening...",
+  "backups.menu": "Backup actions",
+  "backups.open": "Open",
+  "backups.encrypt": "Encrypt",
+  "backups.share": "Share",
+  "backups.rename": "Rename",
+  "backups.delete": "Delete",
+  "backups.new": "+ New backup",
+  "backups.newTitle": "New backup",
+  "backups.startsBlank": "It starts empty.",
+  "backups.namePh": "Its name",
+  "backups.willBe": "File: {file}",
+  "backups.taken": "This name is already taken.",
+  "backups.create": "Create",
+  "backups.renameTitle": "Rename this backup",
+  "backups.pwHint": "This backup is protected: enter its password.",
+  "backups.pwShow": "Show the password",
+  "backups.pwHide": "Hide the password",
+  "backups.cancel": "Cancel",
+  "backups.shared.heading": "Shared with me",
+  "backups.shared.by": "Shared by {who}",
+  "backups.shared.leave": "Leave",
+  "backups.replica.add": "Backup copy",
+  "backups.replica.title": "Backup copy",
+  "backups.replica.intro": "The same encrypted file, also written to a second destination. If one fails, the other remains.",
+  "backups.replica.dest.drive": "Google Drive",
+  "backups.replica.dest.file": "A file on this device",
+  "backups.replica.dest.webdav": "A WebDAV server",
+  "backups.replica.dest.s3": "An S3 bucket",
+  "backups.replica.card": "Backup copy - {label}",
+  "backups.replica.uptodate": "Up to date, {when}",
+  "backups.replica.pending": "First copy at the next save",
+  "backups.replica.error": "Unreachable - will retry at the next save",
+  "backups.replica.remove": "Remove",
+  "backups.replica.save": "Add the copy",
+  "backups.replica.webdav.url": "File URL on the server (https://host:8443/dav/file.zip)",
+  "backups.replica.webdav.help": "The full URL of the backup file, including a custom port if any. The server must allow this app to reach it (CORS) - some hosted drives do not, and will not connect from a browser.",
+  "backups.replica.webdav.user": "Username",
+  "backups.replica.webdav.password": "Password",
+  "backups.replica.s3.endpoint": "Endpoint URL",
+  "backups.replica.s3.region": "Region",
+  "backups.replica.s3.bucket": "Bucket",
+  "backups.replica.s3.key": "Object key (file name)",
+  "backups.replica.s3.accessKeyId": "Access key ID",
+  "backups.replica.s3.secret": "Secret access key",
+  "error.generic": "That did not work. Check the connection and try again."
+};
+var isOff2 = (v) => v != null && ["off", "false", "no", "0"].includes(v.trim().toLowerCase());
+var EYE_OPEN = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>';
+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"];
+  }
+  #manager = null;
+  #rows = null;
+  #lastActive = void 0;
+  #listing = false;
+  #busy = false;
+  #openBusy = null;
+  #menuFor = null;
+  #pwFor = null;
+  #pw = "";
+  #pwShown = false;
+  #renameFor = null;
+  #renameLabel = "";
+  #createOpen = false;
+  #createLabel = "";
+  #members = [];
+  #replicaFlow = null;
+  #replicaSnap = null;
+  #repWebdav = { url: "", username: "", password: "" };
+  #repS3 = { endpoint: "", region: "", bucket: "", key: "", accessKeyId: "", secretAccessKey: "" };
+  #activeEncrypted = null;
+  #activeShared = null;
+  #confirmAction = null;
+  #withCreate = true;
+  #withRename = true;
+  #withDelete = true;
+  #withOpen = true;
+  #withEncrypt = true;
+  #withShare = true;
+  #withShared = true;
+  defaults() {
+    return EN5;
+  }
+  /** The headless manager this panel drives (see 'selfstore/backups'). */
+  get manager() {
+    return this.#manager;
+  }
+  set manager(v) {
+    this.#manager = v;
+    this.wire();
+  }
+  /** The households this device is a member of (one entry per share, or a
+   *  single object for one): each renders in "Shared with me" labeled by who
+   *  shares it, removal = leaving (host performs it on
+   *  'selfstore-backups-leave', whose detail names the entry's fileId). With
+   *  `fileId` (the share's dedicated wallet), that registry row IS the
+   *  member row: active it wears the badge, inactive it opens like any
+   *  shared silo - and its one menu action is leaving, never a mere forget. */
+  get member() {
+    return this.#members.length > 0 ? this.#members : null;
+  }
+  set member(v) {
+    this.#members = v == null ? [] : Array.isArray(v) ? v : [v];
+    this.rerender();
+  }
+  /** Live state of the ATTACHED backup, from the host's store: the active
+   *  row's pills prefer these over the learned memories (which may lag). */
+  get activeEncrypted() {
+    return this.#activeEncrypted;
+  }
+  set activeEncrypted(v) {
+    this.#activeEncrypted = v;
+    this.rerender();
+  }
+  get activeShared() {
+    return this.#activeShared;
+  }
+  set activeShared(v) {
+    this.#activeShared = v;
+    this.rerender();
+  }
+  /** Host veto over the destructive gestures (delete / forget / leave):
+   *  answer (or resolve) false to keep things as they are - window.confirm
+   *  fits as-is. Default: everything proceeds. */
+  get confirmAction() {
+    return this.#confirmAction;
+  }
+  set confirmAction(v) {
+    this.#confirmAction = v ?? null;
+  }
+  get withCreate() {
+    return this.#withCreate;
+  }
+  set withCreate(v) {
+    this.#withCreate = v !== false;
+    this.rerender();
+  }
+  get withRename() {
+    return this.#withRename;
+  }
+  set withRename(v) {
+    this.#withRename = v !== false;
+    this.rerender();
+  }
+  get withDelete() {
+    return this.#withDelete;
+  }
+  set withDelete(v) {
+    this.#withDelete = v !== false;
+    this.rerender();
+  }
+  get withOpen() {
+    return this.#withOpen;
+  }
+  set withOpen(v) {
+    this.#withOpen = v !== false;
+    this.rerender();
+  }
+  get withEncrypt() {
+    return this.#withEncrypt;
+  }
+  set withEncrypt(v) {
+    this.#withEncrypt = v !== false;
+    this.rerender();
+  }
+  get withShare() {
+    return this.#withShare;
+  }
+  set withShare(v) {
+    this.#withShare = v !== false;
+    this.rerender();
+  }
+  get withShared() {
+    return this.#withShared;
+  }
+  set withShared(v) {
+    this.#withShared = v !== false;
+    this.rerender();
+  }
+  attributeChangedCallback(name, _old, value) {
+    const on = value == null || !isOff2(value);
+    if (name === "with-create") this.withCreate = on;
+    if (name === "with-rename") this.withRename = on;
+    if (name === "with-delete") this.withDelete = on;
+    if (name === "with-open") this.withOpen = on;
+    if (name === "with-encrypt") this.withEncrypt = on;
+    if (name === "with-share") this.withShare = on;
+    if (name === "with-shared") this.withShared = on;
+  }
+  connectedCallback() {
+    this.wire();
+  }
+  /** Re-list the rows from the destination (the host calls this after a
+   *  gesture of its own moved things - a leave, an external change). */
+  refresh() {
+    void this.loadRows();
+  }
+  wire() {
+    if (!this.isConnected || !this.#manager) return;
+    this.unsub?.();
+    const manager = this.#manager;
+    const unsubManager = manager.subscribe((snap) => {
+      if (snap.activeFileId !== this.#lastActive) {
+        this.#lastActive = snap.activeFileId;
+        void this.loadRows();
+      }
+      this.rerender();
+    });
+    const unsubReplica = this.#replicaFlow?.subscribe((snap) => {
+      this.#replicaSnap = snap;
+      this.rerender();
+    });
+    this.unsub = () => {
+      unsubManager();
+      unsubReplica?.();
+    };
+    void manager.hydrate().then(() => this.loadRows());
+  }
+  /** The backup-copy journey (see 'selfstore/flows' replicaFlow). Setting it
+   *  adds a menu entry on the active backup's card and renders the copy
+   *  cards under it; without it the panel is byte-identical to before. The
+   *  widget restores a recorded copy by itself. */
+  get replica() {
+    return this.#replicaFlow;
+  }
+  set replica(v) {
+    this.#replicaFlow = v;
+    this.#replicaSnap = v?.snapshot ?? null;
+    if (v) void v.restore();
+    this.wire();
+  }
+  /** One destination listing, then the lazy encryption probes (each learned
+   *  bit repaints its row). A transient failure keeps the last good list. */
+  async loadRows() {
+    const manager = this.#manager;
+    if (!manager || this.#listing) return;
+    this.#listing = true;
+    try {
+      this.#rows = await manager.list();
+      this.rerender();
+      for (const r of this.#rows ?? []) {
+        if (r.encrypted !== null) continue;
+        const enc = await manager.probeEncryption(r.fileId);
+        if (enc === null || this.#rows === null) continue;
+        this.#rows = this.#rows.map((x) => x.fileId === r.fileId ? { ...x, encrypted: enc } : x);
+        this.rerender();
+      }
+    } catch {
+      this.#rows = this.#rows ?? [];
+      this.rerender();
+    } finally {
+      this.#listing = false;
+    }
+  }
+  /** t() with {placeholders}. */
+  ts(key, params) {
+    return this.t(key).replace(/\{(\w+)\}/g, (_, k) => params[k] ?? "");
+  }
+  label(row) {
+    return row.label ?? this.t("backups.mine.personal");
+  }
+  view(into) {
+    const manager = this.#manager;
+    if (!manager) return;
+    const snap = manager.snapshot;
+    const rows = this.#rows ?? [];
+    const active = snap.activeFileId;
+    const mine = snap.joined ? rows.filter((r) => r.fileId !== active) : rows;
+    if (this.#rows !== null) put(into, this.heading("sub heading", "backups.mine.heading"));
+    const list = h("ul", { part: "list" });
+    for (const r of mine) {
+      const isActive = r.fileId === active;
+      if (this.#pwFor === r.fileId) list.append(this.passwordCard(r));
+      else if (this.#renameFor?.fileId === r.fileId) list.append(this.renameCard(r));
+      else list.append(this.rowCard(r, isActive, isActive ? this.replicaAttachedLine() : null));
+      if (isActive) for (const el of this.replicaSetup()) list.append(el);
+    }
+    if (list.childElementCount > 0) into.append(list);
+    if (this.#withCreate) {
+      if (this.#createOpen) into.append(this.createCard());
+      else {
+        into.append(
+          h(
+            "button",
+            {
+              part: "button new-button",
+              "data-action": "new",
+              disabled: this.#busy,
+              onclick: () => {
+                this.#createOpen = true;
+                this.#createLabel = "";
+                this.rerender();
+              }
+            },
+            this.t("backups.new")
+          )
+        );
+      }
+    }
+    if (!this.#withShared) return;
+    const members = this.#members;
+    const badge = members.find((m) => m.fileId != null ? m.fileId === active : true) ?? null;
+    const memberWhos = new Set(members.map((m) => m.by));
+    const others = [];
+    const seenForget = /* @__PURE__ */ new Set();
+    for (const s of snap.registry.shared) {
+      if (s.fileId === active && !snap.joined) continue;
+      const member = members.some((m) => m.fileId === s.fileId);
+      const who = s.ownerEmail ?? s.ownerName ?? "?";
+      if (!member) {
+        if (memberWhos.has(who) || seenForget.has(who)) continue;
+        seenForget.add(who);
+      }
+      others.push({ fileId: s.fileId, who, member });
+    }
+    if (members.length === 0 && others.length === 0) return;
+    put(into, this.heading("sub heading", "backups.shared.heading"));
+    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 };
+      shared.append(
+        h(
+          "li",
+          { part: "card card-active", style: "position:relative;border-color:var(--_ok)", "data-member": "" },
+          h(
+            "div",
+            { style: "flex:1;min-width:0" },
+            h(
+              "div",
+              { part: "title" },
+              badge.fileId != null || !activeRow ? this.ts("backups.shared.by", { who: badge.by }) : this.label(activeRow),
+              h("span", { part: "tag" }, this.t("backups.active"))
+            ),
+            badge.fileId == null && activeRow ? h("div", { part: "sub" }, this.ts("backups.shared.by", { who: badge.by })) : null
+          ),
+          this.menuButton("member"),
+          this.#menuFor === "member" ? this.menu(
+            this.#withDelete ? this.menuItem(
+              "leave",
+              this.t("backups.shared.leave"),
+              true,
+              () => this.guarded(
+                leaveAction,
+                () => this.emit("selfstore-backups-leave", { fileId: leaveAction.fileId })
+              )
+            ) : null
+          ) : null
+        )
+      );
+    }
+    for (const s of others) {
+      if (badge && s.fileId === active) continue;
+      const memberEntry = s.member;
+      shared.append(
+        h(
+          "li",
+          { 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) },
+            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",
+            { style: "flex:1;min-width:0" },
+            h("div", { part: "title" }, this.ts("backups.shared.by", { who: s.who })),
+            h("div", { part: "sub" }, this.t("backups.replaceHint"))
+          ),
+          this.menuButton(s.fileId),
+          this.#menuFor === s.fileId ? this.menu(
+            this.#withDelete ? memberEntry ? this.menuItem(
+              "leave",
+              this.t("backups.shared.leave"),
+              true,
+              () => this.guarded(
+                { type: "leave", fileId: s.fileId, who: s.who },
+                () => this.emit("selfstore-backups-leave", { fileId: s.fileId })
+              )
+            ) : this.menuItem(
+              "forget",
+              this.t("backups.delete"),
+              true,
+              () => this.guarded({ type: "forget", fileId: s.fileId, who: s.who }, () => void this.forget(s.fileId))
+            ) : null
+          ) : null
+        )
+      );
+    }
+    if (shared.childElementCount > 0) into.append(shared);
+  }
+  // --- Cards ----------------------------------------------------------------
+  pills(r, active) {
+    const enc = active && this.#activeEncrypted !== null ? this.#activeEncrypted : r.encrypted;
+    const shr = active && this.#activeShared !== null ? this.#activeShared : r.shared;
+    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"))
+      );
+    }
+    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"))
+      );
+    }
+    if (r.modifiedAt) {
+      bits.push(h("span", { part: "sub" }, this.ts("backups.modified", { when: new Date(r.modifiedAt).toLocaleDateString() })));
+    }
+    return bits;
+  }
+  rowCard(r, active, footer = null) {
+    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: "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) },
+      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 },
+      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.#withRename ? this.menuItem("rename", this.t("backups.rename"), false, () => {
+          this.#renameFor = r;
+          this.#renameLabel = r.label ?? "";
+          this.rerender();
+        }) : null,
+        this.#withDelete ? this.menuItem(
+          "delete",
+          this.t("backups.delete"),
+          true,
+          () => this.guarded({ type: "delete", fileId: r.fileId, name: r.name, active }, () => void this.deleteRow(r.fileId))
+        ) : null
+      ) : null
+    );
+  }
+  passwordCard(r) {
+    const submit = () => {
+      if (this.#pw.length > 0) void this.open(r.fileId, this.#pw);
+    };
+    return h(
+      "li",
+      { part: "card", "data-password": r.fileId },
+      h(
+        "div",
+        { style: "flex:1;min-width:0" },
+        h("div", { part: "title" }, this.label(r)),
+        h("div", { part: "sub" }, this.t("backups.pwHint")),
+        h(
+          "div",
+          { part: "row", style: "margin-top:0.45rem" },
+          h(
+            "span",
+            { part: "field", style: "flex:1;min-width:9rem" },
+            h("input", {
+              part: "input",
+              type: this.#pwShown ? "text" : "password",
+              autocomplete: "current-password",
+              "data-keep": "backup-pw",
+              disabled: this.#busy,
+              oninput: (e) => this.#pw = e.target.value,
+              onkeydown: (e) => {
+                if (e.key === "Enter") submit();
+              }
+            }),
+            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"))
+        )
+      )
+    );
+  }
+  renameCard(r) {
+    const taken = this.nameTaken(this.#renameLabel, r.fileId);
+    const clean = this.#renameLabel.trim();
+    return h(
+      "li",
+      { part: "card", "data-rename": r.fileId },
+      h(
+        "div",
+        { style: "flex:1;min-width:0" },
+        h("div", { part: "title" }, this.t("backups.renameTitle")),
+        h("input", {
+          part: "input",
+          style: "margin-top:0.45rem",
+          "data-keep": "rename-label",
+          maxlength: "40",
+          disabled: this.#busy,
+          value: this.#renameLabel,
+          oninput: (e) => {
+            this.#renameLabel = e.target.value;
+            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,
+        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();
+            } },
+            this.t("backups.cancel")
+          )
+        )
+      )
+    );
+  }
+  createCard() {
+    const taken = this.nameTaken(this.#createLabel, null);
+    const clean = this.#createLabel.trim();
+    return h(
+      "div",
+      { part: "card", "data-create": "" },
+      h(
+        "div",
+        { style: "flex:1;min-width:0" },
+        h("div", { part: "title" }, this.t("backups.newTitle")),
+        h("div", { part: "sub" }, this.t("backups.startsBlank")),
+        h("input", {
+          part: "input",
+          style: "margin-top:0.45rem",
+          placeholder: this.t("backups.namePh"),
+          "data-keep": "create-label",
+          maxlength: "40",
+          disabled: this.#busy,
+          oninput: (e) => {
+            this.#createLabel = e.target.value;
+            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,
+        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();
+            } },
+            this.t("backups.cancel")
+          )
+        )
+      )
+    );
+  }
+  // --- Backup copy (replica) -------------------------------------------------
+  /** The transient setup UI under the active card: the destination choice or a
+   *  config form. The ATTACHED copy is not here - it rides inside the active
+   *  card (replicaAttachedLine). Idle renders nothing - the entry point lives
+   *  in the active card's menu. */
+  replicaSetup() {
+    const snap = this.#replicaSnap;
+    if (!this.#replicaFlow || !snap || snap.replica) return [];
+    if (snap.step === "choose") return [this.replicaPicker(snap)];
+    if (snap.step === "form-webdav") return [this.replicaWebdavForm(snap)];
+    if (snap.step === "form-s3") return [this.replicaS3Form(snap)];
+    return [];
+  }
+  /** The attached copy is not a backup of its own: it renders as ONE line
+   *  INSIDE the active backup's card, under its pills (label, freshness, an
+   *  inline "remove") - never a card or a block of its own. Null when no copy
+   *  is attached. */
+  replicaAttachedLine() {
+    const snap = this.#replicaSnap;
+    if (!this.#replicaFlow || !snap || !snap.replica) return null;
+    const rep = snap.replica;
+    const label = rep.label;
+    const status = rep.lastError ? h("span", { part: "sub replica-error" }, this.t("backups.replica.error")) : rep.lastPublishAt ? h(
+      "span",
+      { part: "sub replica-ok" },
+      this.ts("backups.replica.uptodate", {
+        when: new Date(rep.lastPublishAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
+      })
+    ) : h("span", { part: "sub" }, this.t("backups.replica.pending"));
+    return h(
+      "div",
+      {
+        part: "sub replica-line",
+        "data-replica": "",
+        style: "display:flex;flex-wrap:wrap;align-items:baseline;gap:0.1rem 0.5rem;margin-top:0.35rem"
+      },
+      h("span", { part: "replica-label" }, this.ts("backups.replica.card", { label })),
+      status,
+      h(
+        "button",
+        {
+          part: "link replica-remove",
+          type: "button",
+          "data-action": "replica-remove",
+          onclick: () => this.guarded({ type: "replica-remove", label }, () => void this.#replicaFlow?.remove())
+        },
+        this.t("backups.replica.remove")
+      )
+    );
+  }
+  replicaPicker(snap) {
+    return h(
+      "li",
+      { part: "card replica-picker", style: "display:block" },
+      h("div", { part: "title" }, this.t("backups.replica.title")),
+      h("div", { part: "sub", style: "margin:0.2rem 0 0.6rem" }, this.t("backups.replica.intro")),
+      ...snap.kinds.map(
+        (kind) => h(
+          "button",
+          {
+            part: "button replica-dest",
+            style: "display:block;width:100%;text-align:left;margin-bottom:0.4rem",
+            "data-kind": kind,
+            disabled: snap.busy,
+            onclick: () => this.#replicaFlow?.pick(kind)
+          },
+          this.t(`backups.replica.dest.${kind}`)
+        )
+      ),
+      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() },
+        this.t("backups.cancel")
+      )
+    );
+  }
+  /** A config field: mutates state on input, no repaint (validated on submit). */
+  replicaField(key, type, value, oninput) {
+    return h("input", {
+      part: "input",
+      style: "display:block;width:100%;margin-bottom:0.4rem",
+      type,
+      placeholder: this.t(key),
+      "aria-label": this.t(key),
+      value,
+      oninput: (e) => oninput(e.target.value)
+    });
+  }
+  replicaWebdavForm(snap) {
+    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 });
+    };
+    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")),
+      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),
+      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"))
+      )
+    );
+  }
+  replicaS3Form(snap) {
+    const c = this.#repS3;
+    const submit = () => {
+      const config = {
+        endpoint: c.endpoint.trim(),
+        region: c.region.trim(),
+        bucket: c.bucket.trim(),
+        key: c.key.trim(),
+        accessKeyId: c.accessKeyId.trim(),
+        secretAccessKey: c.secretAccessKey
+      };
+      if (!config.endpoint || !config.region || !config.bucket || !config.key) return;
+      if (!config.accessKeyId || !config.secretAccessKey) return;
+      this.#replicaFlow?.submitS3(config);
+    };
+    return h(
+      "li",
+      { part: "card replica-form", style: "display:block" },
+      h("div", { part: "title", style: "margin-bottom:0.5rem" }, this.t("backups.replica.title")),
+      this.replicaField("backups.replica.s3.endpoint", "url", c.endpoint, (v) => c.endpoint = v),
+      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),
+      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"))
+      )
+    );
+  }
+  // --- Menu -----------------------------------------------------------------
+  menuButton(key) {
+    return h(
+      "button",
+      {
+        part: "button menu-button",
+        "aria-label": this.t("backups.menu"),
+        "aria-haspopup": "menu",
+        "aria-expanded": this.#menuFor === key ? "true" : "false",
+        "data-action": "menu",
+        "data-menu-key": key,
+        disabled: this.#busy,
+        onclick: () => {
+          this.#menuFor = this.#menuFor === key ? null : key;
+          this.rerender();
+          this.root.querySelector('[part~="menu"]')?.focus();
+        }
+      },
+      "\u22EF"
+    );
+  }
+  /** The open overflow menu: a backdrop closes it on any outside click or
+   *  tap, Escape closes it and hands focus back to its trigger. The panel is
+   *  a dropdown over the trigger's corner on wide screens and a bottom sheet
+   *  on phones - both styled in the base sheet. */
+  menu(...items) {
+    const key = this.#menuFor;
+    const close = () => {
+      this.#menuFor = null;
+      this.rerender();
+      this.root.querySelector(`[data-menu-key="${key}"]`)?.focus();
+    };
+    return h(
+      "div",
+      { part: "menu-layer" },
+      h("div", { part: "menu-backdrop", "data-action": "menu-close", onclick: close }),
+      h(
+        "div",
+        {
+          part: "menu",
+          role: "menu",
+          tabindex: "-1",
+          onkeydown: (e) => {
+            if (e.key === "Escape") close();
+          }
+        },
+        ...items.filter((i) => i !== null)
+      )
+    );
+  }
+  menuItem(action, text, danger, run) {
+    return h(
+      "button",
+      {
+        part: danger ? "menu-item menu-item-danger" : "menu-item",
+        type: "button",
+        role: "menuitem",
+        "data-action": action,
+        onclick: () => {
+          this.#menuFor = null;
+          run();
+        }
+      },
+      text
+    );
+  }
+  eye() {
+    const btn = h("button", {
+      part: "eye",
+      type: "button",
+      "aria-label": this.t(this.#pwShown ? "backups.pwHide" : "backups.pwShow"),
+      onclick: () => {
+        this.#pwShown = !this.#pwShown;
+        this.rerender();
+      }
+    });
+    btn.innerHTML = this.#pwShown ? EYE_SHUT : EYE_OPEN;
+    return btn;
+  }
+  // --- Gestures --------------------------------------------------------------
+  nameTaken(label, exceptFileId) {
+    const clean = label.trim().toLowerCase();
+    if (!clean || this.#busy) return false;
+    return (this.#rows ?? []).some(
+      (r) => r.fileId !== exceptFileId && r.label !== null && r.label.trim().toLowerCase() === clean
+    );
+  }
+  /** Run a destructive action through the host's veto (default: proceed).
+   *  A throwing hook reads as "no": destruction needs a clear yes. */
+  guarded(action, run) {
+    const gate = this.#confirmAction;
+    if (!gate) {
+      run();
+      return;
+    }
+    void Promise.resolve().then(() => gate(action)).then((ok) => {
+      if (ok) run();
+    }).catch(() => void 0);
+  }
+  /** Open a row programmatically - the same gesture as tapping it, password
+   *  card included. Lets a host chain "open this backup, then act on it"
+   *  (its own sub-views) without re-implementing the passphrase step. */
+  async open(fileId, passphrase) {
+    const manager = this.#manager;
+    if (!manager || this.#busy) return;
+    this.#busy = true;
+    this.#openBusy = fileId;
+    this.rerender();
+    try {
+      const r = await manager.openBackup(fileId, passphrase ?? null);
+      if (r === "encrypted") {
+        this.#pwFor = fileId;
+        if (passphrase) this.emit("selfstore-backups-wrong-password", { fileId });
+      } else if (r === "ok") {
+        this.closePw();
+        this.emit("selfstore-backups-opened", { fileId });
+        void this.loadRows();
+      } else {
+        this.emit("selfstore-backups-error", { code: manager.snapshot.lastError ?? "failed" });
+        void this.loadRows();
+      }
+    } finally {
+      this.#busy = false;
+      this.#openBusy = null;
+      this.rerender();
+    }
+  }
+  async create() {
+    const manager = this.#manager;
+    const label = this.#createLabel.trim();
+    if (!manager || !label || this.#busy) return;
+    this.#busy = true;
+    this.rerender();
+    try {
+      const r = await manager.createNamed(label);
+      if (r === "ok") {
+        this.#createOpen = false;
+        this.#createLabel = "";
+        this.emit("selfstore-backups-created", { label });
+        void this.loadRows();
+      } else {
+        this.emit("selfstore-backups-error", { code: manager.snapshot.lastError ?? "failed" });
+      }
+    } finally {
+      this.#busy = false;
+      this.rerender();
+    }
+  }
+  async rename(row) {
+    const manager = this.#manager;
+    const label = this.#renameLabel.trim();
+    if (!manager || !label || this.#busy) return;
+    this.#busy = true;
+    this.rerender();
+    try {
+      const r = await manager.renameBackup(row.fileId, label);
+      if (r === "ok") {
+        this.#renameFor = null;
+        this.emit("selfstore-backups-renamed", { fileId: row.fileId, label });
+        void this.loadRows();
+      } else {
+        this.emit("selfstore-backups-error", { code: manager.snapshot.lastError ?? "failed" });
+      }
+    } finally {
+      this.#busy = false;
+      this.rerender();
+    }
+  }
+  async deleteRow(fileId) {
+    const manager = this.#manager;
+    if (!manager || this.#busy) return;
+    this.#busy = true;
+    this.rerender();
+    try {
+      if (await manager.deleteBackup(fileId)) {
+        this.#rows = (this.#rows ?? []).filter((r) => r.fileId !== fileId);
+        this.emit("selfstore-backups-deleted", { fileId });
+      } else {
+        this.emit("selfstore-backups-error", { code: manager.snapshot.lastError ?? "failed" });
+      }
+    } finally {
+      this.#busy = false;
+      this.rerender();
+    }
+  }
+  async forget(fileId) {
+    const manager = this.#manager;
+    if (!manager) return;
+    await manager.forgetShared(fileId);
+    this.emit("selfstore-backups-forgotten", { fileId });
+    this.rerender();
+  }
+  closePw() {
+    this.#pwFor = null;
+    this.#pw = "";
+    this.#pwShown = false;
+  }
+};
+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/entries/widgets.ts
+function defineSelfstoreWidgets(prefix = "selfstore") {
+  const define = (name, ctor) => {
+    if (!customElements.get(name)) customElements.define(name, ctor);
+  };
+  define(`${prefix}-connect`, SelfstoreConnectElement);
+  define(`${prefix}-share`, SelfstoreShareElement);
+  define(`${prefix}-join`, SelfstoreJoinElement);
+  define(`${prefix}-status`, SelfstoreStatusElement);
+  define(`${prefix}-backups`, SelfstoreBackupsElement);
+}
+
+export { FlowWidget, SelfstoreBackupsElement, SelfstoreConnectElement, SelfstoreJoinElement, SelfstoreShareElement, SelfstoreStatusElement, defineSelfstoreWidgets };
+//# sourceMappingURL=widgets.js.map
+//# sourceMappingURL=widgets.js.map