selfstore 1.7.3 → 1.7.5

package/dist/widgets.d.ts

@@ -8,8 +8,6 @@ import './machine-ALMkT3mk.js';
 
 /** Flat key -> string map; widgets merge a partial override over EN defaults. */
 type WidgetLabels = Record<string, string>;
-/** The common shell: shadow root + styles, label merging, focus-preserving
- *  re-render, event emission, subscription cleanup. */
 declare abstract class FlowWidget extends HTMLElement {
     protected root: ShadowRoot;
     private styleEl;
@@ -50,6 +48,10 @@ declare abstract class FlowWidget extends HTMLElement {
     /** Map a flow error to copy: labels can override per labelKey
      *  ('error.targetUnavailable', ...), with a generic fallback. */
     protected errorText(labelKey: string | undefined): string;
+    /** Hands back whatever the host set before this class existed, then the
+     *  subclass reads its attributes and wires itself. Subclasses override this
+     *  and call `super.connectedCallback()` FIRST, for that reason. */
+    connectedCallback(): void;
     protected emit(name: string, detail?: unknown): void;
     /** Rebuild the body, keeping the focused input's value and focus across the
      *  rebuild (inputs carry data-keep so typing survives a snapshot change). */
@@ -57,22 +59,6 @@ declare abstract class FlowWidget extends HTMLElement {
     disconnectedCallback(): void;
 }
 
-/**
- * <selfstore-connect>: the "where does my data live" journey, ready to drop
- * in. A thin skin over connectFlow - every ordering and failure rule lives in
- * the flow (and its tests); this element only renders the snapshot and calls
- * the actions. Theme it with --selfstore-* custom properties and ::part()
- * selectors; reword or localize it through the `labels` property.
- *
- *   import { defineSelfstoreWidgets } from 'selfstore/widgets';
- *   defineSelfstoreWidgets();
- *
- *   const el = document.querySelector('selfstore-connect');
- *   el.store = store;                                  // simple store (or a FlowHost)
- *   el.targets = { drive: gisDriveAuth({ clientId }), file: true };
- *   el.addEventListener('selfstore-connected', (e) => ...e.detail.outcome...);
- */
-
 /** A named WebDAV provider offered in the connect form's quick-pick row, so a
  *  user can start from their host instead of a blank URL field. selfstore ships
  *  no list - the app supplies whichever providers it wants to surface (its own

package/dist/widgets.js

@@ -7,6 +7,24 @@ import './chunk-QBCU7OOP.js';
 import './chunk-CM3HSBCE.js';
 import './chunk-SFF7KKM4.js';
 
+// src/widgets/icons.ts
+var INK = "#8a8f98";
+var svg = (body) => `data:image/svg+xml,${encodeURIComponent(
+  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="${INK}" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">${body}</svg>`
+)}`;
+var defaultIcons = {
+  drive: svg('<path d="M7 18h10a4 4 0 0 0 .6-7.96A6 6 0 0 0 6.2 9.2 3.9 3.9 0 0 0 7 18Z"/>'),
+  file: svg(
+    '<path d="M14 3H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7Z"/><path d="M14 3v4h4"/>'
+  ),
+  webdav: svg(
+    '<rect x="3" y="4" width="18" height="7" rx="2"/><rect x="3" y="13" width="18" height="7" rx="2"/><path d="M7 7.5h.01M7 16.5h.01"/>'
+  ),
+  s3: svg(
+    '<path d="M4.5 6h15l-1.4 13a2 2 0 0 1-2 1.8H7.9a2 2 0 0 1-2-1.8Z"/><path d="M4.5 6c0-1.1 3.4-2 7.5-2s7.5.9 7.5 2"/>'
+  )
+};
+
 // src/widgets/base.ts
 var baseStyles = `
 :host {
@@ -337,6 +355,16 @@ function h(tag, attrs = {}, ...children) {
   }
   return el;
 }
+function upgradeOwnProperties(el) {
+  const proto = Object.getPrototypeOf(el);
+  const bag = el;
+  for (const name of Object.getOwnPropertyNames(el)) {
+    if (!(name in proto)) continue;
+    const value = bag[name];
+    delete bag[name];
+    bag[name] = value;
+  }
+}
 var FlowWidget = class extends HTMLElement {
   root;
   styleEl;
@@ -404,6 +432,12 @@ var FlowWidget = class extends HTMLElement {
     }
     return this.t("error.generic");
   }
+  /** Hands back whatever the host set before this class existed, then the
+   *  subclass reads its attributes and wires itself. Subclasses override this
+   *  and call `super.connectedCallback()` FIRST, for that reason. */
+  connectedCallback() {
+    upgradeOwnProperties(this);
+  }
   emit(name, detail) {
     this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
   }
@@ -674,6 +708,7 @@ var SelfstoreConnectElement = class extends FlowWidget {
     }
   }
   connectedCallback() {
+    super.connectedCallback();
     if (this.#recommended === null && this.hasAttribute("recommended")) {
       this.recommended = this.getAttribute("recommended");
     }
@@ -911,7 +946,7 @@ var SelfstoreConnectElement = class extends FlowWidget {
     return h("label", { part: "labelled" }, h("span", { part: "label" }, this.t(labelKey)), input);
   }
   destCard(kind) {
-    const icon = this.#icons[kind];
+    const icon = this.#icons[kind] ?? defaultIcons[kind];
     const head = icon ? h("img", { part: "icon", src: icon, alt: "" }) : null;
     const title = h(
       "div",
@@ -1391,6 +1426,7 @@ var SelfstoreShareElement = class extends FlowWidget {
     if (name === "with-members") this.withMembers = value == null || !isOff(value);
   }
   connectedCallback() {
+    super.connectedCallback();
     this.wire();
   }
   wire() {
@@ -1679,6 +1715,7 @@ var SelfstoreJoinElement = class extends FlowWidget {
     if (name === "variant") this.variant = value ?? "card";
   }
   connectedCallback() {
+    super.connectedCallback();
     if (!this.#link && this.hasAttribute("link")) this.#link = this.getAttribute("link");
     if (this.hasAttribute("variant")) {
       this.#variant = this.getAttribute("variant") === "banner" ? "banner" : "card";
@@ -1905,6 +1942,7 @@ var SelfstoreStatusElement = class extends FlowWidget {
     if (name === "variant") this.variant = value;
   }
   connectedCallback() {
+    super.connectedCallback();
     if (this.hasAttribute("variant")) this.variant = this.getAttribute("variant");
     this.wire();
   }
@@ -2259,6 +2297,7 @@ var SelfstoreBackupsElement = class extends FlowWidget {
     if (name === "with-shared") this.withShared = on;
   }
   connectedCallback() {
+    super.connectedCallback();
     this.wire();
   }
   /** Re-list the rows from the destination (the host calls this after a
@@ -3342,6 +3381,7 @@ var SelfstoreGateElement = class extends FlowWidget {
     if (name === "deferrable") this.deferrable = value !== "false";
   }
   connectedCallback() {
+    super.connectedCallback();
     if (this.hasAttribute("armed")) this.armed = this.getAttribute("armed") !== "false";
     if (this.hasAttribute("deferrable")) {
       this.deferrable = this.getAttribute("deferrable") !== "false";