@feezal/feezal-eink-base

Shared base class for the feezal e-ink / mono element family (@feezal/feezal-elements-eink). This is not an element package — it defines no custom-element tag and is deliberately named without the feezal-element- prefix so feezal's package manager never treats it as installable on its own. Member elements depend on it and it gets inlined into their bundles at install time.

Why it exists

E-paper partial refresh is expensive: re-rendering an unchanged value once per second ghosts the panel. The family rule is that the DOM changes only when the rendered text actually differs — and that dedup lives here, once, instead of in every element.

API

import {
    FeezalEinkBase,            // base class, extends FeezalElement
    feezalEinkStyles,          // 1-bit tokens + inverted swap + .eink-numeral
    einkAttributeDescriptors,  // spread into feezal().attributes  → 'inverted'
    einkStyleDescriptors,      // spread into feezal().styles      → --feezal-eink-fg/-bg
    feezalBaseStyles, FeezalElement, html, css   // re-exports for single-import
} from '@feezal/feezal-eink-base';

FeezalEinkBase (extends FeezalElement)

| Member | Purpose | |---|---| | setDisplayed(key, value, format?) → boolean | The dedup write path. Formats value (raw → string), compares against what slot key currently renders; only when different stores it and schedules one Lit update (synchronous calls batch). Returns false when deduped — DOM untouched. null/undefined display as ''. | | displayed(key, fallback = '') → string | Read a slot in render(). fallback shows only while the slot was never set — use for the unconfigured-state hint. | | clearDisplayed(key?) | Forget one slot (or all) — fallback shows again, next setDisplayed is never deduped. Call when a value goes stale (e.g. subscribe changed). | | inverted | Reactive Boolean, reflected — swaps the ink/paper tokens (white-on-black). |

Rule for members: never assign a displayed value to reactive state directly — always route it through setDisplayed.

class FeezalElementEinkValue extends FeezalEinkBase {
    static styles = [feezalBaseStyles, feezalEinkStyles, css`/* … */`];

    connectedCallback() {
        super.connectedCallback();
        if (this.subscribe) {
            this.addSubscription(this.subscribe, msg => {
                this.setDisplayed('value',
                    this.getProperty(msg, this.messageProperty),
                    v => Number(v).toFixed(1));
            });
        }
    }

    render() {
        return html`<div class="eink-numeral">${this.displayed('value', '--')}</div>`;
    }
}

CSS tokens (feezalEinkStyles)

| Token | Default | Inverted | |---|---|---| | --feezal-eink-fg (ink) | #000 | #fff | | --feezal-eink-bg (paper) | #fff | #000 |

Hard mono defaults on :host so elements survive any theme; a mono type stack and the .eink-numeral helper class (bold, tabular numerals, tight leading) come along. feezal-theme-eink is companion polish, not a requirement.

License

MIT