selfstore 1.3.0 → 1.5.0

package/dist/widgets.js

@@ -1,4 +1,4 @@
-import { connectFlow, shareFlow, joinFlow } from './chunk-3XR3GLR2.js';
+import { connectFlow, shareFlow, joinFlow } from './chunk-I243KZMZ.js';
 import './chunk-TEIAFKFS.js';
 import './chunk-SRKUHFRG.js';
 import './chunk-43BJDRPT.js';
@@ -2921,6 +2921,302 @@ var SelfstoreBackupsElement = class extends FlowWidget {
 };
 var pillStyle = "display:inline-block;font-size:0.72em;font-weight:600;line-height:1.6;padding:0 0.55em;border-radius:999px;border:1px solid var(--_border)";
 
+// src/widgets/gate.ts
+var EN6 = {
+  "gate.title": "Where should your data live?",
+  "gate.hint": "It is encrypted on this device. Choose where to keep it and it gets saved there for you from now on.",
+  "gate.fine": "",
+  "gate.defer": "Later - keep it in this browser only",
+  "gate.defer.note": "Data kept only in this browser is lost if its storage is cleared."
+};
+var GATE_STYLES = `
+:host { display: contents; }
+[part~='gate'] {
+	position: fixed;
+	inset: 0;
+	z-index: var(--selfstore-gate-z, 280);
+	overflow-y: auto;
+	background: var(--selfstore-gate-backdrop, Canvas);
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+[part~='gate-card'] {
+	width: 100%;
+	max-width: var(--selfstore-gate-width, 30rem);
+	box-sizing: border-box;
+	padding: calc(2rem + env(safe-area-inset-top)) 1.25rem 1.5rem;
+	display: flex;
+	flex-direction: column;
+	flex: 1 0 auto;
+	gap: var(--_gap);
+	container-type: inline-size;
+	outline: none;
+}
+[part~='gate-title'] {
+	margin: 0;
+	font-size: var(--selfstore-gate-title-size, 1.5rem);
+	font-weight: 700;
+	line-height: 1.25;
+}
+button[part~='gate-defer'] { align-self: flex-start; text-align: left; }
+[part~='gate-foot'] {
+	flex-shrink: 0;
+	width: 100%;
+	padding-bottom: env(safe-area-inset-bottom);
+}
+`;
+function connectTagFor(gateTag) {
+  return gateTag.endsWith("-gate") ? `${gateTag.slice(0, -"-gate".length)}-connect` : "selfstore-connect";
+}
+var SelfstoreGateElement = class extends FlowWidget {
+  static get observedAttributes() {
+    return ["armed", "deferrable"];
+  }
+  #store = null;
+  #targets = null;
+  #options = {};
+  #icons = {};
+  #recommended = null;
+  #advanced = [];
+  #presets = [];
+  #armed = true;
+  #deferrable = true;
+  #deferred = false;
+  #open = false;
+  #connect = null;
+  defaults() {
+    return EN6;
+  }
+  /** The simple store (anything exposing `flowHost`), or a hand-built FlowHost. */
+  get store() {
+    return this.#store;
+  }
+  set store(v) {
+    this.#store = v;
+    this.wire();
+  }
+  /** The destinations to offer, exactly as <selfstore-connect> takes them.
+   *  Read when the gate opens; a change while it is open waits for the next
+   *  opening rather than rebuilding a journey under the user. */
+  get targets() {
+    return this.#targets;
+  }
+  set targets(v) {
+    this.#targets = v;
+  }
+  /** Options for the connect flow (`defaultResolution`, `password`, ...).
+   *  Same timing as `targets`. */
+  get options() {
+    return this.#options;
+  }
+  set options(v) {
+    this.#options = v ?? {};
+  }
+  get icons() {
+    return this.#icons;
+  }
+  set icons(v) {
+    this.#icons = v ?? {};
+    this.rerender();
+  }
+  get recommended() {
+    return this.#recommended;
+  }
+  set recommended(v) {
+    this.#recommended = v;
+    this.rerender();
+  }
+  get advanced() {
+    return this.#advanced;
+  }
+  set advanced(v) {
+    this.#advanced = v ?? [];
+    this.rerender();
+  }
+  get webdavPresets() {
+    return this.#presets;
+  }
+  set webdavPresets(v) {
+    this.#presets = Array.isArray(v) ? v : [];
+    this.rerender();
+  }
+  /** Whether the app has finished booting. Leave it true for a plain drop-in;
+   *  an app that restores its destination asynchronously sets it false until
+   *  that settles, so a connected user never glimpses the gate on the way in.
+   *  Also the `armed` attribute (`armed="false"` to hold it shut). */
+  get armed() {
+    return this.#armed;
+  }
+  set armed(v) {
+    this.#armed = v;
+    this.sync();
+  }
+  /** Whether to offer the way out (device-only is a working mode, just a
+   *  fragile one). Also the `deferrable` attribute. Part of the frame, so it
+   *  follows the same timing as `targets`: read when the gate opens. */
+  get deferrable() {
+    return this.#deferrable;
+  }
+  set deferrable(v) {
+    this.#deferrable = v;
+  }
+  /** Set once the user chose to stay device-only; keeps the gate shut for the
+   *  rest of the session. Assign false to bring it back (a "choose a
+   *  destination" entry somewhere else in the app). */
+  get deferred() {
+    return this.#deferred;
+  }
+  set deferred(v) {
+    this.#deferred = v;
+    this.sync();
+  }
+  /** Whether the gate is currently on screen. */
+  get open() {
+    return this.#open;
+  }
+  /** The connect element the gate built, for programmatic control (its own
+   *  `flow` included). Null while the gate is shut. */
+  get connect() {
+    return this.#connect;
+  }
+  constructor() {
+    super();
+    this.root.append(h("style", {}, GATE_STYLES));
+  }
+  attributeChangedCallback(name, _old, value) {
+    if (name === "armed") this.armed = value !== "false";
+    if (name === "deferrable") this.deferrable = value !== "false";
+  }
+  connectedCallback() {
+    if (this.hasAttribute("armed")) this.armed = this.getAttribute("armed") !== "false";
+    if (this.hasAttribute("deferrable")) {
+      this.deferrable = this.getAttribute("deferrable") !== "false";
+    }
+    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.sync());
+    this.sync();
+  }
+  /** The library already derives "no durable home yet" - asking the target
+   *  kind by hand would miss the ranking and nag over a broken connection. */
+  shouldOpen() {
+    const host = this.host();
+    if (!host || !this.#armed || this.#deferred) return false;
+    return host.engine.state.status.action === "choose-destination";
+  }
+  sync() {
+    const open = this.shouldOpen();
+    if (open === this.#open) return;
+    this.#open = open;
+    if (!open) this.#connect = null;
+    super.rerender();
+    if (open) this.root.querySelector('[part~="gate-card"]')?.focus();
+  }
+  /** Rebuilding the frame would re-append the child connect element, and a
+   *  custom element that leaves the DOM and comes back rebuilds its flow: a
+   *  journey in progress would be dropped on the floor. So while the gate is
+   *  open the frame stands and late cosmetics are pushed into the child.
+   *  Set `labels` before `store` for them to reach the frame's own copy. */
+  rerender() {
+    const el = this.#connect;
+    if (!el) {
+      super.rerender();
+      return;
+    }
+    el.labels = this.childLabels();
+    el.icons = this.#icons;
+    el.recommended = this.#recommended;
+    el.advanced = this.#advanced;
+    el.webdavPresets = this.#presets;
+  }
+  /** The gate's title already asks the question; the child's heading would
+   *  repeat it. An empty label removes a heading, and a host that wants it
+   *  back just says so in its own map. */
+  childLabels() {
+    return { "connect.title": "", ...this.labels };
+  }
+  buildConnect() {
+    const el = document.createElement(
+      connectTagFor(this.tagName.toLowerCase())
+    );
+    el.labels = this.childLabels();
+    el.icons = this.#icons;
+    el.recommended = this.#recommended;
+    el.advanced = this.#advanced;
+    el.webdavPresets = this.#presets;
+    el.options = this.#options;
+    el.targets = this.#targets;
+    el.store = this.#store;
+    return el;
+  }
+  deferButton() {
+    if (!this.#deferrable) return null;
+    const note = this.t("gate.defer.note");
+    return h(
+      "div",
+      {},
+      h(
+        "button",
+        {
+          part: "link gate-defer",
+          type: "button",
+          onclick: () => {
+            this.deferred = true;
+            this.emit("selfstore-gate-deferred");
+          }
+        },
+        this.t("gate.defer")
+      ),
+      note ? h("div", { part: "hint gate-defer-note" }, note) : null
+    );
+  }
+  view(into) {
+    if (!this.#open) return;
+    this.#connect = this.buildConnect();
+    const title = h("h1", { part: "gate-title", id: "gate-title" }, this.t("gate.title"));
+    const card = h("div", {
+      part: "gate-card",
+      tabindex: "-1"
+    });
+    put(
+      card,
+      h("slot", { name: "brand" }),
+      title,
+      this.heading("sub gate-hint", "gate.hint"),
+      this.#connect,
+      h("slot", { name: "extra" }),
+      this.heading("hint gate-fine", "gate.fine"),
+      this.deferButton()
+    );
+    put(
+      into,
+      h(
+        "div",
+        {
+          part: "gate",
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": "gate-title"
+        },
+        card,
+        h("div", { part: "gate-foot" }, h("slot", { name: "footer" }))
+      )
+    );
+  }
+};
+
 // src/entries/widgets.ts
 function defineSelfstoreWidgets(prefix = "selfstore") {
   const define = (name, ctor) => {
@@ -2931,8 +3227,9 @@ function defineSelfstoreWidgets(prefix = "selfstore") {
   define(`${prefix}-join`, SelfstoreJoinElement);
   define(`${prefix}-status`, SelfstoreStatusElement);
   define(`${prefix}-backups`, SelfstoreBackupsElement);
+  define(`${prefix}-gate`, SelfstoreGateElement);
 }
 
-export { FlowWidget, SelfstoreBackupsElement, SelfstoreConnectElement, SelfstoreJoinElement, SelfstoreShareElement, SelfstoreStatusElement, defineSelfstoreWidgets };
+export { FlowWidget, SelfstoreBackupsElement, SelfstoreConnectElement, SelfstoreGateElement, SelfstoreJoinElement, SelfstoreShareElement, SelfstoreStatusElement, defineSelfstoreWidgets };
 //# sourceMappingURL=widgets.js.map
 //# sourceMappingURL=widgets.js.map