@feezal/feezal-element 3.0.0 → 3.0.2

package/feezal-element.js

@@ -60,6 +60,28 @@ export class FeezalElement extends LitElement {
         // bound to MQTT topics). Never reflected — the attribute is the
         // source of truth; effects only apply in the viewer.
         conditions:           {type: String,  attribute: 'conditions'},
+        // ── N31: availability — universal base-class machinery ───────────
+        // subscribe-availability accepts a single topic string (back-compat)
+        // OR a JSON array of topics / {topic, property} entries (the modern
+        // HA discovery form: bridge state + device availability). The base
+        // subscribes, tracks per-topic status and combines it per
+        // availability-mode into the reactive `_available` flag; rendering
+        // (badges, dimming) stays element business. Elements that want the
+        // fields in their inspector declare the attributes in their own
+        // descriptor — the machinery works regardless.
+        // Deliberately NOT reflected: Lit reflects constructor defaults on
+        // first update, which would stamp subscribe-availability="" /
+        // payload-available="online" / … onto EVERY element and serialize
+        // that junk into every saved dashboard (and it broke the U32
+        // create-component attribute table). The inspector and discovery
+        // write the attributes directly; attribute → property sync is all
+        // the machinery needs.
+        subscribeAvailability: {type: String, attribute: 'subscribe-availability'},
+        availabilityMode:      {type: String, attribute: 'availability-mode'},
+        payloadAvailable:      {type: String, attribute: 'payload-available'},
+        payloadUnavailable:    {type: String, attribute: 'payload-unavailable'},
+        msgPropAvailability:   {type: String, attribute: 'message-property-availability'},
+        _available:            {state: true},
     };
 
     constructor() {
@@ -70,6 +92,15 @@ export class FeezalElement extends LitElement {
         this.dynamicSubscriptions = false;
         this.visible = false;
         this._conditions = new FeezalConditions(this);
+        // N31 availability defaults (payload values = HA defaults)
+        this.subscribeAvailability = '';
+        this.availabilityMode = 'all';
+        this.payloadAvailable = 'online';
+        this.payloadUnavailable = 'offline';
+        this.msgPropAvailability = '';
+        this._available = true;
+        this._availabilitySubs = [];
+        this._availabilityStatus = {};
     }
 
     connectedCallback() {
@@ -79,11 +110,17 @@ export class FeezalElement extends LitElement {
             this._subscribe();
             this._conditions.connect();
         }
+        // N31: availability is independent of the primary-subscription
+        // machinery (elements overriding _subscribe with an empty body still
+        // get it) and not editor-gated — it only feeds internal state, never
+        // writes serializable attributes in the editor.
+        this._subscribeAvailability();
     }
 
     disconnectedCallback() {
         super.disconnectedCallback();
         this._unsubscribe();
+        this._unsubscribeAvailability();
         this._conditions.disconnect();
     }
 
@@ -104,6 +141,98 @@ export class FeezalElement extends LitElement {
         if (changed.has('conditions') && (this.visible || !this.dynamicSubscriptions)) {
             this._conditions.connect();
         }
+
+        // N31: availability wiring changed at runtime (inspector edits on the
+        // live canvas) → rewire. Signature-guarded so the first update after
+        // connect is a no-op.
+        if (this.isConnected && this.__availSig !== undefined &&
+            this._availabilitySignature() !== this.__availSig) {
+            this._unsubscribeAvailability();
+            this._subscribeAvailability();
+        }
+    }
+
+    // ── N31: availability ────────────────────────────────────────────────────
+
+    _availabilitySignature() {
+        return [this.subscribeAvailability, this.availabilityMode,
+            this.payloadAvailable, this.payloadUnavailable, this.msgPropAvailability].join('|');
+    }
+
+    /** Parse subscribe-availability: '' → [], plain topic string → one entry,
+     * JSON array of strings / {topic, property} objects → many entries. */
+    _availabilityEntries() {
+        const raw = (this.subscribeAvailability || '').trim();
+        if (!raw) return [];
+        if (raw.startsWith('[')) {
+            try {
+                const arr = JSON.parse(raw);
+                return (Array.isArray(arr) ? arr : [])
+                    .map(entry => (typeof entry === 'string' ? {topic: entry} : entry))
+                    .filter(entry => entry && typeof entry.topic === 'string' && entry.topic);
+            } catch {
+                return [];
+            }
+        }
+        return [{topic: raw}];
+    }
+
+    _subscribeAvailability() {
+        this.__availSig = this._availabilitySignature();
+        this._availabilityStatus = {};
+        const entries = this._availabilityEntries();
+        if (entries.length === 0) {
+            this._setAvailable(true);
+            return;
+        }
+        entries.forEach((entry, index) => {
+            const key = index + ':' + entry.topic;
+            this._availabilityStatus[key] = null; // unknown until the first message
+            this._availabilitySubs.push(feezal.connection.sub(entry.topic, msg => {
+                let v = this.getProperty(msg, entry.property || this.msgPropAvailability || this.messageProperty);
+                // Unwrap JSON {"state": "online"} payloads (zigbee2mqtt availability)
+                if (typeof v === 'string') {
+                    try {
+                        const parsed = JSON.parse(v);
+                        if (parsed && typeof parsed === 'object' && 'state' in parsed) v = parsed.state;
+                    } catch { /* not JSON — use the raw string */ }
+                } else if (v && typeof v === 'object' && 'state' in v) {
+                    v = v.state;
+                }
+                const s = String(v).toLowerCase();
+                this._availabilityStatus[key] = String(v) === this.payloadAvailable ||
+                    (s !== String(this.payloadUnavailable).toLowerCase() &&
+                     s !== 'offline' && s !== 'false' && s !== '0' && s !== 'unavailable');
+                this._recomputeAvailability();
+            }));
+        });
+        this._recomputeAvailability();
+    }
+
+    _unsubscribeAvailability() {
+        this._availabilitySubs.forEach(sub => feezal.connection.unsubscribe(sub));
+        this._availabilitySubs = [];
+    }
+
+    /** Combine per-topic status per availability-mode into `_available`.
+     * Topics without a message yet count as available (matches the previous
+     * per-element behaviour — an element never starts out badged). */
+    _recomputeAvailability() {
+        const statuses = Object.values(this._availabilityStatus);
+        const known = statuses.filter(v => v !== null);
+        this._setAvailable(this.availabilityMode === 'any'
+            ? (known.length === 0 || known.some(Boolean))
+            : statuses.every(v => v !== false));
+    }
+
+    _setAvailable(available) {
+        this._available = available;
+        // Styling hook for themes/zero-effort elements — viewer only: a
+        // reflected attribute in the editor would be serialized into the
+        // saved views.html.
+        if (!feezal.isEditor) {
+            this.toggleAttribute('unavailable', !available);
+        }
     }
 
     // ── Subscription helpers ─────────────────────────────────────────────────
@@ -262,5 +391,28 @@ export class FeezalElement extends LitElement {
     }
 }
 
+// ── N31: shared availability badge (optional consistency helper) ─────────────
+// Elements MAY compose these into their render/styles instead of hand-rolling
+// a badge — the base class itself renders nothing. Themable via the
+// --feezal-unavailable-* custom properties.
+export const feezalAvailabilityStyles = css`
+    .feezal-unavail-badge {
+        position: absolute;
+        top: var(--feezal-unavailable-top, 4px);
+        right: var(--feezal-unavailable-right, 4px);
+        font-size: var(--feezal-unavailable-size, 14px);
+        line-height: 1;
+        color: var(--feezal-unavailable-color, var(--error-color, #b00020));
+        opacity: 0.85;
+        pointer-events: none;
+        z-index: 2;
+    }
+`;
+
+/** Badge template partial: renders nothing while available. */
+export function availabilityBadge(available) {
+    return available ? '' : html`<span class="feezal-unavail-badge" title="Device unavailable">⚠</span>`;
+}
+
 // Re-export so element files can do a single import.
 export {html, css};

package/feezal-topic-input.js

@@ -0,0 +1,173 @@
+/**
+ * feezal-topic-input — shared MQTT-topic input with server-backed
+ * autocompletion (B28).
+ *
+ * Drop-in replacement for the plain `sl-input` topic fields in custom (N6)
+ * inspectors: wraps an sl-input and adds the same completion dropdown as the
+ * generic attribute inspector (debounced fetch of /api/topics/completions,
+ * arrow-key navigation, Enter to pick, descend on `topic/` intermediate
+ * completions, Escape/Tab to dismiss).
+ *
+ * The inner sl-input's `sl-input`/`sl-change` events bubble composed out of
+ * the shadow root retargeted to this element, and `value` is kept in sync —
+ * existing inspector handlers keep working unchanged with
+ * `@sl-change="${e => ...e.target.value...}"`. Picking a completion fires a
+ * synthetic `sl-change`; descending an intermediate `…/` completion fires
+ * `sl-input` only.
+ *
+ * Only usable inside the editor (needs the Shoelace bundle and the feezal
+ * server API); dashboards never render it.
+ */
+import {LitElement, html, css} from 'lit';
+
+class FeezalTopicInput extends LitElement {
+    static properties = {
+        label:       {type: String},
+        value:       {type: String},
+        placeholder: {type: String},
+        size:        {type: String},
+        _completions: {state: true},
+        _cursor:      {state: true},
+    };
+
+    static styles = css`
+        :host { display: block; }
+        .topic-wrap { position: relative; }
+        sl-input { width: 100%; }
+        sl-input::part(form-control-label) { color: var(--sl-input-label-color, inherit); font-size: 12px; }
+        sl-input::part(base) {
+            background: var(--feezal-bg, #fff);
+            border-color: var(--feezal-border, #ccc);
+            color: var(--feezal-color, #333);
+        }
+        sl-input::part(input) { background: var(--feezal-bg, #fff); color: var(--sl-input-color, #333); }
+        .completions {
+            position: absolute; top: 100%; left: 0; right: 0; z-index: 500;
+            list-style: none; margin: 2px 0 0; padding: 4px 0;
+            background: var(--feezal-bg, #fff); border: 1px solid var(--feezal-border, #ccc);
+            border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,0.18);
+            max-height: 180px; overflow-y: auto; font-size: 12px;
+        }
+        .completions li {
+            padding: 4px 10px; cursor: pointer;
+            color: var(--feezal-color, #333);
+            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+        }
+        .completions li:hover, .completions li.active { background: var(--feezal-bg-sub, #f0f0f0); }
+    `;
+
+    constructor() {
+        super();
+        this.label = '';
+        this.value = '';
+        this.placeholder = 'mqtt/topic';
+        this.size = 'small';
+        this._completions = [];
+        this._cursor = -1;
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        clearTimeout(this._fetchTimer);
+        clearTimeout(this._closeTimer);
+    }
+
+    _emit(name) {
+        this.dispatchEvent(new CustomEvent(name, {bubbles: true, composed: true}));
+    }
+
+    _debounceFetch(prefix) {
+        clearTimeout(this._fetchTimer);
+        this._fetchTimer = setTimeout(() => this._fetchCompletions(prefix), 150);
+    }
+
+    async _fetchCompletions(prefix) {
+        try {
+            const r = await fetch(`/api/topics/completions?prefix=${encodeURIComponent(prefix)}`);
+            if (!r.ok) { this._completions = []; return; }
+            const {completions} = await r.json();
+            this._cursor = -1;
+            this._completions = completions || [];
+        } catch {
+            this._completions = [];
+        }
+    }
+
+    _close() {
+        this._completions = [];
+        this._cursor = -1;
+    }
+
+    _onInput(e) {
+        this.value = e.target.value;
+        this._debounceFetch(this.value);
+    }
+
+    _onKeydown(e) {
+        if (!this._completions.length) return;
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            this._cursor = Math.min(this._cursor + 1, this._completions.length - 1);
+        } else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            this._cursor = Math.max(this._cursor - 1, -1);
+        } else if (e.key === 'Enter' && this._cursor >= 0) {
+            e.preventDefault();
+            e.stopPropagation();
+            this._select(this._completions[this._cursor]);
+        } else if (e.key === 'Escape' || e.key === 'Tab') {
+            this._close();
+        }
+    }
+
+    _select(val) {
+        this.value = val;
+        if (val.endsWith('/')) {
+            // Intermediate level — descend and keep the dropdown open.
+            this._emit('sl-input');
+            this._fetchCompletions(val);
+        } else {
+            this._emit('sl-input');
+            this._emit('sl-change');
+            this._close();
+        }
+    }
+
+    _scheduleClose() {
+        clearTimeout(this._closeTimer);
+        this._closeTimer = setTimeout(() => this._close(), 200);
+    }
+
+    render() {
+        return html`
+            <div class="topic-wrap">
+                <sl-input size="${this.size}" autocomplete="off"
+                    label="${this.label || ''}"
+                    placeholder="${this.placeholder}"
+                    .value="${this.value ?? ''}"
+                    @sl-focus="${() => this._debounceFetch(this.value ?? '')}"
+                    @sl-input="${this._onInput}"
+                    @sl-change="${e => { this.value = e.target.value; }}"
+                    @sl-blur="${this._scheduleClose}"
+                    @keydown="${this._onKeydown}"></sl-input>
+                ${this._completions.length ? html`
+                    <ul class="completions">
+                        ${this._completions.map((c, ci) => html`
+                            <li class="${ci === this._cursor ? 'active' : ''}"
+                                @mousedown="${e => { e.preventDefault(); this._select(c); }}">
+                                ${c}
+                            </li>
+                        `)}
+                    </ul>
+                ` : ''}
+            </div>
+        `;
+    }
+}
+
+// Multiple element bundles may carry a copy (static exports) — guard the define.
+if (!customElements.get('feezal-topic-input')) {
+    customElements.define('feezal-topic-input', FeezalTopicInput);
+}
+
+export {FeezalTopicInput};

package/package.json

@@ -16,6 +16,7 @@
         "feezal-element.js",
         "feezal-conditions.js",
         "feezal-polymer-element.js",
+        "feezal-topic-input.js",
         "LICENSE"
     ],
     "homepage": "https://github.com/feezal/feezal#readme",
@@ -34,5 +35,5 @@
         "url": "git+https://github.com/feezal/feezal.git",
         "directory": "www/packages/@feezal/feezal-element"
     },
-    "version": "3.0.0"
+    "version": "3.0.2"
 }