@feezal/feezal-element 0.6.0 → 3.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019-2026 Sebastian Raff
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,82 @@
+# @feezal/feezal-element
+
+Base classes for [feezal](https://github.com/feezal/feezal) dashboard elements.
+
+feezal is a browser-based MQTT dashboard editor and viewer. Dashboards are composed of web components (`feezal-element-*` packages); this package provides the base classes those elements extend:
+
+- **`FeezalElement`** — the Lit 3 base class. MQTT subscription lifecycle (`addSubscription`, automatic unsubscribe), payload path extraction (`getProperty` / `message-property`), payload casting, the reserved `<subscribe>/setattribute|setstyle|addclass|…` runtime-control channel, and the per-element conditions engine.
+- **`feezalBaseStyles`** — shared host styles every element composes into its `static styles`.
+- **`html`, `css`** — re-exported from Lit so element packages need a single import.
+- **`FeezalPolymerElement`** (`feezal-polymer-element.js`) — legacy Polymer 3 base used by the paper element family. New elements should extend `FeezalElement`.
+- **`feezal-conditions.js`** — the shared conditions engine (declaratively bind visibility, classes, styles or attributes to MQTT topics). Wired up by both base classes; element authors get it for free.
+
+## Installation
+
+```sh
+npm install @feezal/feezal-element
+```
+
+## Minimal element
+
+```js
+/* global feezal */
+import {FeezalElement, feezalBaseStyles, html, css} from '@feezal/feezal-element';
+
+class FeezalElementMyWidget extends FeezalElement {
+    static get feezal() {
+        return {
+            palette: {name: 'My Widget', category: 'Basic', color: '#4a6080'},
+            attributes: [
+                {name: 'subscribe', type: 'mqttTopic', help: 'State topic.'},
+                {name: 'message-property', type: 'string', default: 'payload',
+                    help: 'Dot-notation path to the value within the MQTT message.'},
+            ],
+            styles: ['top', 'left', 'width', 'height'],
+            defaultStyle: {width: '80px', height: '40px'},
+        };
+    }
+
+    static properties = {
+        _value: {state: true},
+    };
+
+    static styles = [feezalBaseStyles, css``];
+
+    constructor() {
+        super();
+        this._value = null; // reactive properties: constructor, never class fields
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.subscribe) {
+            this.addSubscription(this.subscribe, msg => {
+                this._value = this.getProperty(msg, this.messageProperty);
+            });
+        }
+    }
+
+    render() {
+        return html`<div>${this._value}</div>`;
+    }
+}
+
+customElements.define('feezal-element-my-widget', FeezalElementMyWidget);
+export {FeezalElementMyWidget};
+```
+
+## Authoring elements
+
+Read the full element authoring specification before building anything real — descriptor reference (`palette`, `attributes`, `styles`, `discovery`, custom inspectors), MQTT topic conventions, CSS custom property conventions, Lit 3 gotchas and the publishing checklist:
+
+**[docs/element-spec.md](https://github.com/feezal/feezal/blob/master/docs/element-spec.md)**
+
+Element packages are named `feezal-element-<category>-<name>` under an npm scope; the categories `basic` and `paper` are reserved for official feezal elements. Scaffolding: [`create-feezal-element`](https://github.com/feezal/feezal/tree/master/packages/create-feezal-element).
+
+## Versioning
+
+This package uses lockstep **major** versions with the feezal server and the official element packages; minor/patch versions are independent. Element packages should depend on the matching major, e.g. `"@feezal/feezal-element": "^3.0.0"`.
+
+## License
+
+MIT. The base class and the viewer runtime your element runs inside are MIT-licensed — subclassing does **not** place your element under feezal's AGPL (which covers only the server and editor). You may license and distribute your element packages under any terms you choose.

package/feezal-conditions.js

@@ -0,0 +1,262 @@
+/* global feezal */
+
+/**
+ * E50 — per-element conditions engine.
+ *
+ * Every element can carry a `conditions` attribute holding a JSON list of
+ * rows that declaratively bind visibility, CSS classes, styles or attributes
+ * to MQTT topics (or page-locally published ones, E49):
+ *
+ *   [{"subscribe": "home/alarm/state", "operator": "=", "value": "armed",
+ *     "action": "attribute", "attribute": "disabled", "attribute-value": ""}]
+ *
+ * Row schema:
+ *   subscribe        topic (exact or `${param}` placeholder inside components)
+ *   property         optional dot-path into the message (default "payload")
+ *   operator         = | != | > | < | >= | <= | matches   (default =)
+ *   value            compare value (regex source for `matches`)
+ *   action           show | hide | class | style | attribute
+ *   class            (action=class)  class name to add while matched
+ *   style            (action=style)  {prop: value, …} applied while matched
+ *   attribute        (action=attribute) attribute name
+ *   attribute-value  (action=attribute) value set while matched
+ *   keep-layout      (action=show/hide) use visibility:hidden instead of
+ *                    display:none so the element keeps its layout box
+ *
+ * Semantics (decided in the E50 roadmap entry):
+ *   - rows evaluate independently against the last value on their topic;
+ *   - visibility rows AND-combine — visible only if every `show` row matches
+ *     and no `hide` row matches;
+ *   - class/style/attribute rows apply while matched and revert when
+ *     unmatched; several matching rows targeting the same style property or
+ *     attribute: the later row wins;
+ *   - reverting restores the element's pristine value (captured before any
+ *     condition effect was applied);
+ *   - effects are never applied in the editor (a badge shows instead).
+ *
+ * The engine is host-agnostic so both element base classes (Lit
+ * FeezalElement and Polymer FeezalPolymerElement) share it.
+ */
+
+const OPERATORS = ['=', '!=', '>', '<', '>=', '<=', 'matches'];
+const ACTIONS   = ['show', 'hide', 'class', 'style', 'attribute'];
+
+/** Parse + validate a conditions attribute value. Garbage in → []. */
+export function parseConditions(raw) {
+    if (!raw || typeof raw !== 'string') return [];
+    let list;
+    try {
+        list = JSON.parse(raw);
+    } catch {
+        return [];
+    }
+
+    if (!Array.isArray(list)) return [];
+    return list.filter(row =>
+        row && typeof row === 'object' &&
+        typeof row.subscribe === 'string' && row.subscribe.length > 0 &&
+        ACTIONS.includes(row.action) &&
+        (row.operator === undefined || OPERATORS.includes(row.operator)));
+}
+
+/** Evaluate one condition against a payload value. Pure. */
+export function evalCondition(operator, compareValue, payload) {
+    const op = operator || '=';
+    switch (op) {
+        case '=':
+            return String(payload) === String(compareValue);
+        case '!=':
+            return String(payload) !== String(compareValue);
+        case '>':
+        case '<':
+        case '>=':
+        case '<=': {
+            const a = Number(payload);
+            const b = Number(compareValue);
+            if (isNaN(a) || isNaN(b)) return false;
+            if (op === '>')  return a > b;
+            if (op === '<')  return a < b;
+            if (op === '>=') return a >= b;
+            return a <= b;
+        }
+        case 'matches':
+            try {
+                return new RegExp(String(compareValue)).test(String(payload));
+            } catch {
+                return false;
+            }
+        default:
+            return false;
+    }
+}
+
+export class FeezalConditions {
+    /** @param {HTMLElement} host element the effects apply to (needs getProperty()) */
+    constructor(host) {
+        this.host = host;
+        this._subs = [];
+        this._rows = [];
+        this._matched = [];
+        this._pristine = null;
+        this._active = false;
+    }
+
+    /**
+     * (Re)start the engine from the host's current `conditions` attribute.
+     * No-ops in the editor (effects are editor-badged, never applied) and
+     * when the attribute is absent/empty/invalid.
+     */
+    connect() {
+        const raw = this.host.getAttribute('conditions');
+        // Idempotent for an unchanged attribute — connectedCallback and the
+        // first Lit update may both call connect() for the same value.
+        if (this._active && raw === this._lastRaw) return;
+
+        this.disconnect();
+        this._lastRaw = raw;
+        if (typeof feezal === 'undefined' || feezal.isEditor) return;
+
+        this._rows = parseConditions(raw);
+        if (this._rows.length === 0) return;
+
+        this._matched = this._rows.map(() => false);
+        this._capturePristine();
+        this._active = true;
+
+        this._rows.forEach((row, i) => {
+            this._subs.push(feezal.connection.sub(row.subscribe, msg => {
+                const payload = this.host.getProperty
+                    ? this.host.getProperty(msg, row.property || 'payload')
+                    : (msg && typeof msg === 'object' ? msg.payload : msg);
+                this._matched[i] = evalCondition(row.operator, row.value, payload);
+                this._apply();
+            }));
+        });
+    }
+
+    /** Stop: unsubscribe and revert every applied effect. */
+    disconnect() {
+        for (const sub of this._subs.splice(0)) {
+            feezal.connection.unsubscribe(sub);
+        }
+
+        if (this._active) {
+            // Revert to pristine so a re-connect (element moved in the DOM,
+            // conditions edited) starts from a clean slate.
+            this._matched = this._rows.map(() => false);
+            this._apply();
+        }
+
+        this._rows = [];
+        this._matched = [];
+        this._pristine = null;
+        this._active = false;
+        this._lastRaw = undefined;
+    }
+
+    /** Record the element's pre-condition values for everything rows may touch. */
+    _capturePristine() {
+        const host = this.host;
+        const p = {styles: {}, attrs: {}, display: null, visibility: null};
+
+        for (const row of this._rows) {
+            if (row.action === 'style' && row.style && typeof row.style === 'object') {
+                for (const prop of Object.keys(row.style)) {
+                    if (!(prop in p.styles)) p.styles[prop] = host.style.getPropertyValue(prop);
+                }
+            } else if (row.action === 'attribute' && row.attribute) {
+                if (!(row.attribute in p.attrs)) {
+                    p.attrs[row.attribute] = {
+                        had: host.hasAttribute(row.attribute),
+                        value: host.getAttribute(row.attribute),
+                    };
+                }
+            } else if (row.action === 'show' || row.action === 'hide') {
+                if (p.display === null) {
+                    p.display = host.style.getPropertyValue('display');
+                    p.visibility = host.style.getPropertyValue('visibility');
+                }
+            }
+        }
+
+        this._pristine = p;
+    }
+
+    /** Re-derive and apply the full effect state from the per-row match flags. */
+    _apply() {
+        const host = this.host;
+        const p = this._pristine;
+
+        // ── classes: add while matched, remove when unmatched (row order) ──
+        this._rows.forEach((row, i) => {
+            if (row.action === 'class' && row.class) {
+                if (this._matched[i]) host.classList.add(row.class);
+                else host.classList.remove(row.class);
+            }
+        });
+
+        // ── visibility: AND-combine show/hide rows ──
+        if (p.display !== null) {
+            const visible = this._rows.every((row, i) => {
+                if (row.action === 'show') return this._matched[i];
+                if (row.action === 'hide') return !this._matched[i];
+                return true;
+            });
+            const keepLayout = this._rows.some((row, i) =>
+                (row.action === 'show' || row.action === 'hide') && row['keep-layout'] &&
+                (row.action === 'show' ? !this._matched[i] : this._matched[i]));
+
+            if (visible) {
+                // Restore pristine inline values ('' removes the property).
+                this._setOrRemoveStyle('display', p.display);
+                this._setOrRemoveStyle('visibility', p.visibility);
+            } else if (keepLayout) {
+                this._setOrRemoveStyle('display', p.display);
+                host.style.setProperty('visibility', 'hidden');
+            } else {
+                this._setOrRemoveStyle('visibility', p.visibility);
+                host.style.setProperty('display', 'none');
+            }
+        }
+
+        // ── styles: desired map from matching rows in order (later wins) ──
+        const desiredStyles = {};
+        this._rows.forEach((row, i) => {
+            if (row.action === 'style' && this._matched[i] && row.style && typeof row.style === 'object') {
+                Object.assign(desiredStyles, row.style);
+            }
+        });
+        for (const [prop, pristineValue] of Object.entries(p.styles)) {
+            if (prop in desiredStyles) {
+                host.style.setProperty(prop, String(desiredStyles[prop]));
+            } else {
+                this._setOrRemoveStyle(prop, pristineValue);
+            }
+        }
+
+        // ── attributes: desired map from matching rows in order (later wins) ──
+        const desiredAttrs = {};
+        this._rows.forEach((row, i) => {
+            if (row.action === 'attribute' && this._matched[i] && row.attribute) {
+                desiredAttrs[row.attribute] = row['attribute-value'] ?? '';
+            }
+        });
+        for (const [name, pristine] of Object.entries(p.attrs)) {
+            if (name in desiredAttrs) {
+                host.setAttribute(name, String(desiredAttrs[name]));
+            } else if (pristine.had) {
+                host.setAttribute(name, pristine.value);
+            } else {
+                host.removeAttribute(name);
+            }
+        }
+    }
+
+    _setOrRemoveStyle(prop, value) {
+        if (value) {
+            this.host.style.setProperty(prop, value);
+        } else {
+            this.host.style.removeProperty(prop);
+        }
+    }
+}

package/feezal-element.js

@@ -1,113 +1,185 @@
-/* global window, feezal */
+/* global feezal */
+import {LitElement, html, css} from 'lit';
+import {FeezalConditions} from './feezal-conditions.js';
 
-import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';
+/**
+ * Shared base styles — identical to the Polymer dom-module 'feezal-style-element'.
+ * Exported so subclasses can compose via:
+ *   static styles = [FeezalElementLit.styles, css`...additional...`];
+ */
+export const feezalBaseStyles = css`
+    :host {
+        display: inline-block;
+        box-sizing: border-box;
+        overflow: hidden;
+    }
+    :host([hidden]) {
+        display: none;
+    }
+    :host(.feezal-editable) {
+        outline: 1px dashed rgba(var(--feezal-selection-rgb, 2,132,199), 0.8);
+    }
+    :host(.feezal-editable) * {
+        pointer-events: none;
+    }
+    :host(.feezal-editable.feezal-selected) {
+        outline: 2px dashed rgba(var(--feezal-selection-rgb, 2,132,199), 0.9);
+    }
+`;
 
-const styleElement = document.createElement('dom-module');
+/**
+ * FeezalElement — Lit base class for feezal elements.
+ *
+ * A faithful port of the Polymer-based FeezalPolymerElement to Lit 3.
+ * Paper elements keep importing the Polymer FeezalPolymerElement unchanged;
+ * only the basic-* elements use this class.
+ *
+ * Key differences from the Polymer base:
+ *   - Subclass CSS goes in static styles = [FeezalElement.styles, css`...`]
+ *   - Polymer observers become updated(changed) guards
+ *   - this.$.id becomes this.renderRoot.querySelector('#id')
+ *   - Lit needs explicit attribute: 'kebab-name' for camelCase properties
+ */
+export class FeezalElement extends LitElement {
+    static styles = feezalBaseStyles;
 
-styleElement.innerHTML =
-    `<template>
-       <style>
-        :host {
-            display: inline-block;
-            box-sizing: border-box;
-            overflow: hidden;
-        }
-        :host([hidden]) {
-            display: none;
-        }
-        :host(.feezal-editable) {
-            outline: 1px dashed rgba(250, 120, 0, 0.8);
-        }
-        :host(.feezal-editable.feezal-selected) {
-            outline: 2px dashed rgba(250, 120, 0, 0.8);
-        }
-        .feezal-blocker {
-            top: 0;
-            left: 0;
-            display: block;
-            width: 100%;
-            height: 100%;
-            position: absolute;
-            z-index: 10;
-        }
-       </style>
-     </template>`;
-
-styleElement.register('feezal-style-element');
-
-class FeezalElement extends PolymerElement {
-    static get properties() {
-        return {
-            'selected': {
-                type: Boolean,
-                value: false
-            },
-            'dynamicSubscriptions': {
-                type: Boolean,
-                value: false,
-                reflectToAttribute: true
-            },
-            'visible': {
-                type: Boolean,
-                value: false,
-                observer: '_visibleChanged'
-            }
-        }
-    }
     static get feezal() {
-        return {
-            attributes: [],
-            styles: []
+        return {attributes: [], styles: []};
+    }
+
+    static properties = {
+        // NOTE: Lit does NOT auto-convert camelCase to kebab-case for attribute
+        // names (unlike Polymer).  Each camelCase property needs an explicit
+        // attribute option so that saved views (which store kebab-case) are
+        // read back correctly.
+        subscribe:            {type: String,  reflect: true, attribute: 'subscribe'},
+        messageProperty:      {type: String,  reflect: true, attribute: 'message-property'},
+        dynamicSubscriptions: {type: Boolean, reflect: true, attribute: 'dynamic-subscriptions'},
+        visible:              {type: Boolean, reflect: true},
+        // E50: JSON list of condition rows (visibility/class/style/attribute
+        // bound to MQTT topics). Never reflected — the attribute is the
+        // source of truth; effects only apply in the viewer.
+        conditions:           {type: String,  attribute: 'conditions'},
+    };
+
+    constructor() {
+        super();
+        this._subscriptions = [];
+        this._subscribed = false;
+        this.messageProperty = 'payload';
+        this.dynamicSubscriptions = false;
+        this.visible = false;
+        this._conditions = new FeezalConditions(this);
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add('feezal-element');
+        if (this.visible || !this.dynamicSubscriptions) {
+            this._subscribe();
+            this._conditions.connect();
         }
     }
 
-    _payloadCast(type, payload) {
-        if (typeof payload === 'string') {
-            switch (type) {
-                case Boolean:
-                    return Number(payload) !== 0 && payload.toLowerCase() !== 'false';
-                default:
-                    return payload;
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._unsubscribe();
+        this._conditions.disconnect();
+    }
+
+    updated(changed) {
+        if (changed.has('visible') && this.dynamicSubscriptions) {
+            if (this.visible) {
+                this._subscribe();
+                this._conditions.connect();
+            } else {
+                this._unsubscribe();
+                this._conditions.disconnect();
             }
-        } else {
-            return payload;
+        }
+
+        // E50: conditions added/edited/removed at runtime → restart the
+        // engine. connect() is idempotent for an unchanged attribute, so the
+        // first update after mount is a no-op.
+        if (changed.has('conditions') && (this.visible || !this.dynamicSubscriptions)) {
+            this._conditions.connect();
         }
     }
 
-    subscribe(topic, callback) {
-        this._subscriptions.push(feezal.connection.subscribe(topic, callback));
+    // ── Subscription helpers ─────────────────────────────────────────────────
+
+    /** Subscribe to a single topic — convenience wrapper for subclasses. */
+    addSubscription(topic, callback) {
+        this._subscriptions.push(feezal.connection.sub(topic, callback));
     }
 
     _subscribe() {
-        if (!this.subscribeTopic) {
+        // The _subscribed guard makes this idempotent: an element that mounts
+        // with visible already set (the attribute reflects, so it can arrive
+        // from saved view HTML) hits _subscribe from both connectedCallback
+        // and the first updated() — without the guard every topic would be
+        // subscribed twice and each message processed twice.
+        if (!this.subscribe || this._subscribed) {
             return;
         }
 
+        // In the editor, runtime MQTT manipulation of elements is gated by a user
+        // setting (Editor settings → "Prevent MQTT element manipulation in editor",
+        // default ON) so live broker values never get written onto elements and
+        // serialized into the saved view.
+        if (feezal.isEditor && feezal.preventEditorMqtt !== false) {
+            return;
+        }
+
+        this._subscribed = true;
+
+        const base      = this.subscribe;
         const elemClass = window.customElements.get(this.localName);
 
-        this._subscriptions.push(feezal.connection.subscribe(this.subscribeTopic + '/#', msg => {
-            let key;
-            if (msg.topic === this.subscribeTopic && elemClass.feezal) {
-                key = elemClass.feezal.baseAttribute;
-            } else {
-                key = msg.topic.split('/').pop();
-            }
+        // Primary state topic → baseAttribute (exact topic, no wildcard).
+        const baseAttribute = elemClass?.feezal?.baseAttribute;
+        if (baseAttribute) {
+            this._subscriptions.push(feezal.connection.sub(base, msg => {
+                const type = (elemClass.properties?.[baseAttribute] || {}).type;
+                const val  = this._payloadCast(type, this.getProperty(msg, this.messageProperty));
+                if (type === Boolean && !val) {
+                    this.removeAttribute(baseAttribute);
+                } else {
+                    this.setAttribute(baseAttribute, val);
+                }
+            }));
+        }
 
-            const type = (elemClass.properties[key] || {}).type;
+        // Reserved runtime-control channel — distinct, exact topics so device
+        // telemetry sharing the base topic can never reach the element.
+        // Consistent with feezal-view / feezal-site addclass / removeclass.
+        this._subscribeControl(base);
+    }
 
-            const val = this._payloadCast(key === 'style' ? Object : type, msg.payload);
-   
-            if (key === 'style') {
-                Object.assign(this.style, msg.payload);
-            } else if (type === Boolean && !val) {
-                this.removeAttribute(key);
-            } else {
-                this.setAttribute(key, val);
+    /** Subscribe to the reserved <base>/{setattribute,removeattribute,setstyle,removestyle,addclass,removeclass} control topics. */
+    _subscribeControl(base) {
+        const sub  = (suffix, cb) => this._subscriptions.push(feezal.connection.sub(base + '/' + suffix, cb));
+        const val  = msg => this.getProperty(msg, this.messageProperty);
+        const list = p => (Array.isArray(p) ? p : String(p).split(/[,\s]+/)).filter(Boolean);
+
+        sub('setattribute', msg => {
+            const obj = val(msg);
+            if (obj && typeof obj === 'object') {
+                for (const [k, v] of Object.entries(obj)) this.setAttribute(k, String(v));
             }
-        }));
+        });
+        sub('removeattribute', msg => list(val(msg)).forEach(n => this.removeAttribute(n)));
+        sub('setstyle', msg => {
+            const obj = val(msg);
+            if (obj && typeof obj === 'object') Object.assign(this.style, obj);
+        });
+        sub('removestyle', msg => list(val(msg)).forEach(n => this.style.removeProperty(n)));
+        sub('addclass', msg => this.classList.add(val(msg)));
+        sub('removeclass', msg => this.classList.remove(val(msg)));
     }
 
     _unsubscribe() {
+        this._subscribed = false;
         const sub = this._subscriptions.shift();
         if (sub) {
             feezal.connection.unsubscribe(sub);
@@ -115,80 +187,80 @@ class FeezalElement extends PolymerElement {
         }
     }
 
-    constructor() {
-        super();
-        this._subscriptions = [];
-    }
+    // ── Utilities (ported 1:1 from the Polymer base) ─────────────────────────
 
-    connectedCallback() {
-        super.connectedCallback();
-        this.classList.add('feezal-element');
-        if (feezal.isEditor) {
-            const el = document.createElement('div');
-            el.className = 'feezal-blocker';
-            this.shadowRoot.prepend(el);
-            this.shadowRoot.querySelectorAll('*').forEach(el => {
-                if (el.hasAttribute('tabindex')) {
-                    el.addEventListener('focus', event => {
-                        event.preventDefault();
-                        if (event.relatedTarget) {
-                            event.relatedTarget.focus();
-                        } else {
-                            event.currentTarget.blur();
-                        }
-                    });
-                    el.setAttribute('tabindex', '-1');
-                }
-            });
-        } else {
-            if (this.visible || !this.dynamicSubscriptions) {
-                this._subscribe();
-            }
-        }
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this._unsubscribe();
-    }
-
-    _visibleChanged(visible) {
-        if (feezal.isEditor || !this.dynamicSubscriptions) {
-            return;
-        }
-        if (visible) {
-            this._subscribe();
-        } else {
-            this._unsubscribe();
+    _payloadCast(type, payload) {
+        if (typeof payload === 'string' && type === Boolean) {
+            return Number(payload) !== 0 && payload.toLowerCase() !== 'false';
         }
+        return payload;
     }
 
-    // Utils
     throttle(func, limit) {
         let lastFunc;
         let lastRan;
         return function () {
             const context = this;
-            const args = arguments;
-
+            const args    = arguments;
             if (!lastRan) {
                 func.apply(context, args);
                 lastRan = Date.now();
             } else {
                 clearTimeout(lastFunc);
-                this._inThrottle = true;
                 lastFunc = setTimeout(function () {
                     if ((Date.now() - lastRan) >= limit) {
                         func.apply(context, args);
                         lastRan = Date.now();
-                        this._inThrottle = false;
                     }
                 }, limit - (Date.now() - lastRan));
             }
+        };
+    }
+
+    split(str) {
+        str = String(str);
+        if (str.indexOf('\\') === -1) {
+            return str.split('.');
+        }
+        const res = [];
+        let pos = 0;
+        function chunk(start, end) {
+            res.push(str.slice(start, end).replace(/\\\\/g, '\\').replace(/\\\./g, '.'));
+            pos = end + 1;
+        }
+        let esc, j;
+        const l = str.length;
+        let i;
+        for (i = 0; i < l; i++) {
+            if (str[i] === '.') {
+                esc = false;
+                for (j = i - 1; str[j] === '\\'; j--) {
+                    esc = !esc;
+                }
+                if (!esc) {
+                    chunk(pos, i);
+                }
+            }
         }
+        chunk(pos, i);
+        return res;
     }
 
+    getProperty(obj, prop) {
+        const type = typeof obj;
+        if (type !== 'object' && type !== 'function') {
+            return typeof prop === 'undefined' ? obj : undefined;
+        }
+        const arr = this.split(String(prop));
+        let res = obj;
+        for (let i = 0, l = arr.length; i < l; i++) {
+            if (res) {
+                res = res[arr[i]];
+            }
+        }
+        return res;
+    }
 }
 
-window.customElements.define('feezal-element', FeezalElement);
-
-export {FeezalElement, html};
+// Re-export so element files can do a single import.
+export {html, css};

package/feezal-polymer-element.js

@@ -0,0 +1,326 @@
+/* global window, feezal */
+
+import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';
+import {FeezalConditions} from './feezal-conditions.js';
+
+const styleElement = document.createElement('dom-module');
+
+styleElement.innerHTML =
+    `<template>
+       <style>
+        :host {
+            display: inline-block;
+            box-sizing: border-box;
+            overflow: hidden;
+        }
+        :host([hidden]) {
+            display: none;
+        }
+        :host(.feezal-editable) {
+            outline: 1px dashed rgba(var(--feezal-selection-rgb, 2,132,199), 0.8);
+        }
+        :host(.feezal-editable) * {
+            pointer-events: none;
+        }
+        :host(.feezal-editable.feezal-selected) {
+            outline: 2px dashed rgba(var(--feezal-selection-rgb, 2,132,199), 0.9);
+        }
+        :host(.feezal-editable[locked]) {
+            outline: 1.5px dashed #f59e0b !important;
+        }
+        :host(.feezal-editable.feezal-selected[locked]) {
+            outline: 2px solid #f59e0b !important;
+        }
+       </style>
+     </template>`;
+
+styleElement.register('feezal-style-element');
+
+class FeezalPolymerElement extends PolymerElement {
+    static get properties() {
+        return {
+            name: {
+                type: String,
+                value: '',
+                reflectToAttribute: true,
+            },
+            'selected': {
+                type: Boolean,
+                value: false
+            },
+            subscribe: {
+                type: String,
+                value: '',
+                reflectToAttribute: true,
+            },
+            messageProperty: {
+                type: String,
+                value: 'payload',
+                reflectToAttribute: true,
+            },
+            'dynamicSubscriptions': {
+                type: Boolean,
+                value: false,
+                reflectToAttribute: true
+            },
+            'visible': {
+                type: Boolean,
+                value: false,
+                observer: '_visibleChanged'
+            },
+            // E50: JSON list of condition rows — shared engine, see
+            // feezal-conditions.js. The attribute is the source of truth.
+            conditions: {
+                type: String,
+                observer: '_conditionsChanged'
+            }
+        }
+    }
+    static get feezal() {
+        return {
+            attributes: [],
+            styles: []
+        }
+    }
+
+    _payloadCast(type, payload) {
+        if (typeof payload === 'string') {
+            switch (type) {
+                case Boolean:
+                    return Number(payload) !== 0 && payload.toLowerCase() !== 'false';
+                default:
+                    return payload;
+            }
+        } else {
+            return payload;
+        }
+    }
+
+    addSubscription(topic, callback) {
+        this._subscriptions.push(feezal.connection.sub(topic, callback));
+    }
+
+    _subscribe() {
+        if (!this.subscribe) {
+            return;
+        }
+
+        // In the editor, runtime MQTT manipulation of elements is gated by a user
+        // setting (Editor settings → "Prevent MQTT element manipulation in editor",
+        // default ON) so live broker values never get written onto elements and
+        // serialized into the saved view.
+        if (feezal.isEditor && feezal.preventEditorMqtt !== false) {
+            return;
+        }
+
+        const base      = this.subscribe;
+        const elemClass = window.customElements.get(this.localName);
+
+        // Primary state topic → baseAttribute (exact topic, no wildcard).
+        const baseAttribute = elemClass && elemClass.feezal && elemClass.feezal.baseAttribute;
+        if (baseAttribute) {
+            this._subscriptions.push(feezal.connection.sub(base, msg => {
+                const type = (elemClass.properties[baseAttribute] || {}).type;
+                const val  = this._payloadCast(type, this.getProperty(msg, this.messageProperty));
+                if (type === Boolean && !val) {
+                    this.removeAttribute(baseAttribute);
+                } else {
+                    this.setAttribute(baseAttribute, val);
+                }
+            }));
+        }
+
+        // Reserved runtime-control channel — distinct, exact topics so device
+        // telemetry sharing the base topic can never reach the element.
+        // Consistent with feezal-view / feezal-site addclass / removeclass.
+        this._subscribeControl(base);
+    }
+
+    /** Subscribe to the reserved <base>/{setattribute,removeattribute,setstyle,removestyle,addclass,removeclass} control topics. */
+    _subscribeControl(base) {
+        const sub  = (suffix, cb) => this._subscriptions.push(feezal.connection.sub(base + '/' + suffix, cb));
+        const val  = msg => this.getProperty(msg, this.messageProperty);
+        const list = p => (Array.isArray(p) ? p : String(p).split(/[,\s]+/)).filter(Boolean);
+
+        sub('setattribute', msg => {
+            const obj = val(msg);
+            if (obj && typeof obj === 'object') {
+                for (const [k, v] of Object.entries(obj)) this.setAttribute(k, String(v));
+            }
+        });
+        sub('removeattribute', msg => list(val(msg)).forEach(n => this.removeAttribute(n)));
+        sub('setstyle', msg => {
+            const obj = val(msg);
+            if (obj && typeof obj === 'object') Object.assign(this.style, obj);
+        });
+        sub('removestyle', msg => list(val(msg)).forEach(n => this.style.removeProperty(n)));
+        sub('addclass', msg => this.classList.add(val(msg)));
+        sub('removeclass', msg => this.classList.remove(val(msg)));
+    }
+
+    _unsubscribe() {
+        const sub = this._subscriptions.shift();
+        if (sub) {
+            feezal.connection.unsubscribe(sub);
+            this._unsubscribe();
+        }
+    }
+
+    constructor() {
+        super();
+        this._subscriptions = [];
+        this._conditions = new FeezalConditions(this);
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add('feezal-element');
+        // Prevent tab-focus on shadow DOM controls while in the editor.
+        if (feezal.isEditor && this.shadowRoot) {
+            this.shadowRoot.querySelectorAll('*').forEach(el => {
+                if (el.hasAttribute('tabindex')) {
+                    el.addEventListener('focus', event => {
+                        event.preventDefault();
+                        if (event.relatedTarget) {
+                            event.relatedTarget.focus();
+                        } else {
+                            event.currentTarget.blur();
+                        }
+                    });
+                    el.setAttribute('tabindex', '-1');
+                }
+            });
+        }
+        if (this.visible || !this.dynamicSubscriptions) {
+            this._subscribe();
+            this._conditions.connect();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._unsubscribe();
+        this._conditions.disconnect();
+    }
+
+    _visibleChanged(visible) {
+        if (!this.dynamicSubscriptions) {
+            return;
+        }
+        if (visible) {
+            this._subscribe();
+            this._conditions.connect();
+        } else {
+            this._unsubscribe();
+            this._conditions.disconnect();
+        }
+    }
+
+    // E50: conditions added/edited/removed at runtime → restart the engine
+    // (idempotent for an unchanged attribute value).
+    _conditionsChanged() {
+        if (this.isConnected && (this.visible || !this.dynamicSubscriptions)) {
+            this._conditions.connect();
+        }
+    }
+
+    // Utils
+    throttle(func, limit) {
+        let lastFunc;
+        let lastRan;
+        return function () {
+            const context = this;
+            const args = arguments;
+
+            if (!lastRan) {
+                func.apply(context, args);
+                lastRan = Date.now();
+            } else {
+                clearTimeout(lastFunc);
+                this._inThrottle = true;
+                lastFunc = setTimeout(function () {
+                    if ((Date.now() - lastRan) >= limit) {
+                        func.apply(context, args);
+                        lastRan = Date.now();
+                        this._inThrottle = false;
+                    }
+                }, limit - (Date.now() - lastRan));
+            }
+        }
+    }
+
+    /**
+     * @method split
+     * Split str by '.' - supports backslash escaped delimiters
+     * @param {string} str
+     * @returns {Array.<string>}
+     */
+    split(str) {
+        str = String(str);
+
+        // Use native split if possible
+        if (str.indexOf('\\') === -1) {
+            return str.split('.');
+        }
+
+        var res = []; // The result array
+        var pos = 0;  // Starting position of current chunk
+
+        function chunk(start, end) {
+            // Slice, unescape and push onto result array.
+            res.push(str.slice(start, end).replace(/\\\\/g, '\\').replace(/\\\./g, '.'));
+            // Set starting position of next chunk.
+            pos = end + 1;
+        }
+
+        var esc; // Boolean indicating if a dot is escaped
+        var j;
+        var i;
+        var l = str.length;
+        for (i = 0; i < l; i++) {
+            if (str[i] === '.') {
+                esc = false;
+                // Walk over preceding backslashes in reverse direction
+                for (j = i - 1; str[j] === '\\'; j--) {
+                    esc = !esc;
+                }
+                // Dot is escaped only if preceded by an odd number of backslashes
+                if (!esc) {
+                    chunk(pos, i);
+                }
+            }
+        }
+
+        chunk(pos, i);
+
+        return res;
+    }
+
+     /**
+     * @method getProperty
+     * get an objects property. supports nested properties through dot-notation, dots may be escaped by backslash
+     * @param {Object} obj
+     * @param {string} prop
+     * @returns {all} the properties value or undefined
+     */
+    getProperty(obj, prop) {
+        var type = typeof obj;
+        if (type !== 'object' && type !== 'function') {
+            if (typeof prop === 'undefined') {
+                return obj;
+            }
+            return undefined;
+        }
+        var arr = this.split(String(prop));
+        var res = obj;
+        for (let i = 0, l = arr.length; i < l; i++) {
+            if (res) {
+                res = res[arr[i]];
+            }
+        }
+        return res;
+    }
+}
+
+window.customElements.define('feezal-element', FeezalPolymerElement);
+
+export {FeezalPolymerElement, html};

package/package.json

@@ -1,28 +1,38 @@
 {
-  "author": {
-    "name": "Sebastian Raff",
-    "email": "hobbyquaker@gmail.com"
-  },
-  "bugs": {
-    "url": "https://github.com/feezal/node-red-contrib-feezal/issues"
-  },
-  "bundleDependencies": false,
-  "dependencies": {
-    "@polymer/polymer": "^3.0.0"
-  },
-  "deprecated": false,
-  "description": "",
-  "feezal": {},
-  "homepage": "https://github.com/feezal/node-red-contrib-feezal#readme",
-  "license": "MIT",
-  "main": "feezal-element.js",
-  "name": "@feezal/feezal-element",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/feezal/node-red-contrib-feezal.git"
-  },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "version": "0.6.0"
+    "author": {
+        "name": "Sebastian Raff",
+        "email": "hobbyquaker@gmail.com"
+    },
+    "bugs": {
+        "url": "https://github.com/feezal/feezal/issues"
+    },
+    "dependencies": {
+        "@polymer/polymer": "^3.0.0",
+        "lit": "^3.2.0"
+    },
+    "description": "Base classes for feezal dashboard elements — FeezalElement (Lit 3), FeezalPolymerElement (legacy paper elements) and the shared conditions engine",
+    "feezal": {},
+    "files": [
+        "feezal-element.js",
+        "feezal-conditions.js",
+        "feezal-polymer-element.js",
+        "LICENSE"
+    ],
+    "homepage": "https://github.com/feezal/feezal#readme",
+    "keywords": [
+        "feezal",
+        "feezal-element"
+    ],
+    "license": "MIT",
+    "main": "feezal-element.js",
+    "name": "@feezal/feezal-element",
+    "publishConfig": {
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/feezal/feezal.git",
+        "directory": "www/packages/@feezal/feezal-element"
+    },
+    "version": "3.0.0"
 }