selfstore 1.8.14 → 1.8.16

package/dist/widgets.d.ts

@@ -356,9 +356,13 @@ declare class SelfstoreStatusElement extends FlowWidget {
     static get observedAttributes(): string[];
     protected defaults(): WidgetLabels;
     protected packs(): Record<string, WidgetLabels>;
-    /** 'row' (dot + text + action) or 'dot' (the dot alone). Also the attribute. */
-    get variant(): 'row' | 'dot';
-    set variant(v: 'row' | 'dot' | null);
+    /**
+     * 'row' (a tinted box: dot, text, action button - for a settings page),
+     * 'line' (one line and a link - for a menu, where a box eats the surface),
+     * or 'dot' (the dot alone, for a header corner). Also the attribute.
+     */
+    get variant(): 'row' | 'line' | 'dot';
+    set variant(v: 'row' | 'line' | 'dot' | null);
     attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
     connectedCallback(): void;
     protected view(into: HTMLElement): void;
@@ -767,13 +771,19 @@ declare class SelfstoreAccountElement extends FlowWidget {
      *  shipped name: its own label is a better answer than the raw key. */
     private named;
     /**
-     * The one line under the account. A plain "saved" is the only state this
-     * element words itself, because it is the only one with nothing to do about
-     * it - and the only one where WHEN is the whole information. Everything else
-     * (reconnect, unlock, changes to download) belongs to <selfstore-status>,
-     * which owns both the wording and the button that resolves it.
+     * The one line this element words itself: a plain "saved", the only state
+     * with nothing to do about it and the only one where WHEN is the whole
+     * information. Null in every other state.
      */
-    private line;
+    private saved;
+    /**
+     * Anything that is NOT a plain "saved" - reconnect, unlock, changes to
+     * export - belongs to <selfstore-status>, which owns both the wording and
+     * the gesture. It goes under the card and across the whole menu, never
+     * inside the card's text column: that column is sized for an address, and a
+     * sentence wrapping in 167 px turned a three-word notice into 247 px of box.
+     */
+    private attention;
     /** Ask for the settings. The host owns the route, so this only says that it
      *  was asked - and closes, because a menu that stays open behind a page
      *  transition reads as a failed click. */
@@ -796,10 +806,14 @@ declare class SelfstoreAccountElement extends FlowWidget {
     private anchor;
 }
 
+/** A glyph per destination kind: a cloud for a hosted drive, a document for a
+ *  file on the device, a server for WebDAV, a bucket for object storage. */
+declare const defaultIcons: Record<ConnectKind, string>;
+
 /** Register the elements as <PREFIX-connect>, <PREFIX-share>, <PREFIX-join>,
  *  <PREFIX-status>, <PREFIX-backups>, <PREFIX-gate> and
  *  <PREFIX-destination> (default prefix 'selfstore'). Safe to call twice;
  *  throws in environments without custom elements (browser code only). */
 declare function defineSelfstoreWidgets(prefix?: string): void;
 
-export { type BackupsAction, type DestinationAction, FlowWidget, SelfstoreAccountElement, SelfstoreBackupsElement, SelfstoreConnectElement, SelfstoreDestinationElement, SelfstoreGateElement, SelfstoreJoinElement, SelfstoreShareElement, SelfstoreStatusElement, SelfstoreStorageElement, type ShareAction, type WebdavPreset, type WidgetLabels, defineSelfstoreWidgets };
+export { type BackupsAction, type DestinationAction, FlowWidget, SelfstoreAccountElement, SelfstoreBackupsElement, SelfstoreConnectElement, SelfstoreDestinationElement, SelfstoreGateElement, SelfstoreJoinElement, SelfstoreShareElement, SelfstoreStatusElement, SelfstoreStorageElement, type ShareAction, type WebdavPreset, type WidgetLabels, defaultIcons, defineSelfstoreWidgets };

package/dist/widgets.js

@@ -2071,14 +2071,14 @@ var EN4 = {
   // and a backup is written only when the user asks for one. It is a mode the
   // STORE itself falls back to, so the library owes it a name - without one, a
   // panel showed the raw key to the user.
-  "destination.kind.file-manual": "A file you download"
+  "destination.kind.file-manual": "A file"
 };
 var FR4 = {
   "destination.kind.file": "Un fichier sur cet appareil",
   "destination.kind.webdav": "Votre serveur",
   "destination.kind.s3": "Votre bucket",
   "destination.kind.device": "Cet appareil seulement",
-  "destination.kind.file-manual": "Un fichier, par t\xE9l\xE9chargement"
+  "destination.kind.file-manual": "Un fichier"
 };
 
 // src/widgets/status.ts
@@ -2125,12 +2125,16 @@ var SelfstoreStatusElement = class extends FlowWidget {
   packs() {
     return { fr: FR5 };
   }
-  /** 'row' (dot + text + action) or 'dot' (the dot alone). Also the attribute. */
+  /**
+   * 'row' (a tinted box: dot, text, action button - for a settings page),
+   * 'line' (one line and a link - for a menu, where a box eats the surface),
+   * or 'dot' (the dot alone, for a header corner). Also the attribute.
+   */
   get variant() {
     return this.#variant;
   }
   set variant(v) {
-    this.#variant = v === "dot" ? "dot" : "row";
+    this.#variant = v === "dot" || v === "line" ? v : "row";
     this.rerender();
   }
   attributeChangedCallback(name, _old, value) {
@@ -2138,7 +2142,8 @@ var SelfstoreStatusElement = class extends FlowWidget {
   }
   connectedCallback() {
     super.connectedCallback();
-    if (this.hasAttribute("variant")) this.variant = this.getAttribute("variant");
+    if (this.hasAttribute("variant"))
+      this.variant = this.getAttribute("variant");
     this.follow(this.hostOf());
   }
   view(into) {
@@ -2156,6 +2161,9 @@ var SelfstoreStatusElement = class extends FlowWidget {
       part: `status-dot sev-${status.severity}`,
       "aria-hidden": "true"
     });
+    const GLYPH = { ok: "\u2713", warn: "!", danger: "!", info: "" };
+    const glyph = GLYPH[status.severity];
+    const sign = glyph ? h("span", { part: `status-glyph sev-${status.severity}`, "aria-hidden": "true" }, glyph) : dot;
     if (this.#variant === "dot") {
       into.append(
         h(
@@ -2171,14 +2179,33 @@ var SelfstoreStatusElement = class extends FlowWidget {
       );
       return;
     }
+    if (this.#variant === "line") {
+      put(
+        into,
+        h(
+          "div",
+          { part: "row status-line" },
+          sign,
+          h("span", { part: "status-line-text" }, text),
+          status.actionable && status.action ? h(
+            "button",
+            {
+              part: "link status-action",
+              type: "button",
+              onclick: () => this.emit("selfstore-status-action", { action: status.action })
+            },
+            this.t(`status.action.${status.action}`)
+          ) : null
+        )
+      );
+      return;
+    }
     const TINT = {
       ok: "status-ok",
       warn: "status-warn",
       danger: "status-error",
       info: ""
     };
-    const GLYPH = { ok: "\u2713", warn: "!", danger: "!", info: "" };
-    const glyph = GLYPH[status.severity];
     const icon = this.icons[targetKind];
     const where = this.t(`status.where.${targetKind}`);
     const kindName = this.t(`destination.kind.${targetKind}`);
@@ -2193,9 +2220,9 @@ var SelfstoreStatusElement = class extends FlowWidget {
       h(
         "div",
         { part: `status row status-row ${TINT[status.severity] ?? ""}` },
-        // The severity colors the glyph, not the box: tinting the whole line
+        // The severity colors the sign, not the box: tinting the whole line
         // turns a title into a warning about itself.
-        glyph ? h("span", { part: `status-glyph sev-${status.severity}`, "aria-hidden": "true" }, glyph) : dot,
+        sign,
         icon ? h("img", { part: "icon", src: icon, alt: "" }) : null,
         h(
           "div",
@@ -4196,6 +4223,7 @@ var ACCOUNT_STYLES = `
 [part~='account-change'] { color: var(--_danger); }
 [part~='account-change']:hover { background: color-mix(in srgb, var(--_danger) 10%, transparent); }
 [part~='account-sep'] { height: 1px; background: var(--_border); margin: 0.2rem 0.3rem; }
+[part~='account-status'] { display: block; padding: 0 0.6rem 0.2rem; font-size: 0.8125rem; }
 [part~='account-error'] { margin: 0.15rem 0.55rem 0.3rem; font-size: 0.8125rem; color: var(--_danger); }
 `;
 var TICK_MS = 3e4;
@@ -4287,24 +4315,33 @@ var SelfstoreAccountElement = class extends FlowWidget {
     return kind === `destination.kind.${targetKind}` ? label ?? targetKind : kind;
   }
   /**
-   * The one line under the account. A plain "saved" is the only state this
-   * element words itself, because it is the only one with nothing to do about
-   * it - and the only one where WHEN is the whole information. Everything else
-   * (reconnect, unlock, changes to download) belongs to <selfstore-status>,
-   * which owns both the wording and the button that resolves it.
+   * The one line this element words itself: a plain "saved", the only state
+   * with nothing to do about it and the only one where WHEN is the whole
+   * information. Null in every other state.
    */
-  line(host) {
+  saved(host) {
     const { status, lastSavedAt } = host.engine.state;
-    if (status.state === "saved" && lastSavedAt && !("status.saved" in this.labels))
-      return h(
-        "span",
-        { part: "account-line" },
-        this.t("account.saved", { when: this.since(lastSavedAt, this.t("account.justNow")) })
-      );
+    if (status.state !== "saved" || !lastSavedAt || "status.saved" in this.labels) return null;
+    return h(
+      "span",
+      { part: "account-line" },
+      this.t("account.saved", { when: this.since(lastSavedAt, this.t("account.justNow")) })
+    );
+  }
+  /**
+   * Anything that is NOT a plain "saved" - reconnect, unlock, changes to
+   * export - belongs to <selfstore-status>, which owns both the wording and
+   * the gesture. It goes under the card and across the whole menu, never
+   * inside the card's text column: that column is sized for an address, and a
+   * sentence wrapping in 167 px turned a three-word notice into 247 px of box.
+   */
+  attention(host) {
+    if (this.saved(host)) return null;
     const el = document.createElement(
       siblingTag(this.localName, "account", "status")
     );
-    el.setAttribute("variant", "row");
+    el.setAttribute("variant", "line");
+    el.setAttribute("part", "account-status");
     el.labels = this.labels;
     el.icons = this.icons;
     el.store = this.store;
@@ -4357,7 +4394,7 @@ var SelfstoreAccountElement = class extends FlowWidget {
         { part: "account-text" },
         h("span", { part: "account-title" }, this.named(host)),
         mail ? h("span", { part: "account-mail" }, mail) : null,
-        this.line(host)
+        this.saved(host)
       )
     );
   }
@@ -4384,6 +4421,7 @@ var SelfstoreAccountElement = class extends FlowWidget {
       "div",
       { part: "card account-menu", role: "menu" },
       this.card(host),
+      this.attention(host),
       h("div", { part: "account-sep" }),
       h(
         "button",
@@ -4444,6 +4482,6 @@ function defineSelfstoreWidgets(prefix = "selfstore") {
   define(`${prefix}-account`, SelfstoreAccountElement);
 }
 
-export { FlowWidget, SelfstoreAccountElement, SelfstoreBackupsElement, SelfstoreConnectElement, SelfstoreDestinationElement, SelfstoreGateElement, SelfstoreJoinElement, SelfstoreShareElement, SelfstoreStatusElement, SelfstoreStorageElement, defineSelfstoreWidgets };
+export { FlowWidget, SelfstoreAccountElement, SelfstoreBackupsElement, SelfstoreConnectElement, SelfstoreDestinationElement, SelfstoreGateElement, SelfstoreJoinElement, SelfstoreShareElement, SelfstoreStatusElement, SelfstoreStorageElement, defaultIcons, defineSelfstoreWidgets };
 //# sourceMappingURL=widgets.js.map
 //# sourceMappingURL=widgets.js.map