@feezal/feezal-elements-wired

Wired — hand-drawn / sketchy element family for feezal: rough, pencil-sketch strokes and wobbly rectangles/ellipses, built directly on rough.js (see DECISION.md for why this family doesn't wrap the abandoned wired-elements package).

One npm package, one bundle, eight custom-element tags (feezal's N29 Phase B multi-element family shape — see element-families.md in the core repo).

Status: all 8 elements + the companion theme built (AGENT-TASK.md Phases 3 and 4 complete). 98 vitest + happy-dom unit tests passing; manual QA against a running feezal instance (see TESTING.md) is still open.

Elements

All eight live in the Wired palette category.

| Tag | What it is | Key attributes | |---|---|---| | feezal-element-wired-button | Sketchy rectangle, press feedback, E79 active-state publish contract | publish, payload, label, subscribe, payload-active, payload-inactive, disabled | | feezal-element-wired-toggle | Two-state sketch toggle (track + sliding thumb) | subscribe, publish, payload-on, payload-off, label, disabled | | feezal-element-wired-checkbox | Sketch checkbox with a rough checkmark stroke | subscribe, publish, payload-on, payload-off, label, disabled | | feezal-element-wired-slider | Sketch track + rough handle, drag to set, publish on release | subscribe, publish, min, max, step, label | | feezal-element-wired-gauge | Rough arc gauge — no wired-elements equivalent exists, pure rough.js | subscribe, min, max, unit, label, digits, thickness | | feezal-element-wired-card | Sketchy container frame with an optional caption — drop other elements inside | label | | feezal-element-wired-input | Text input inside a sketch frame; publish on Enter/blur, never steals focus mid-edit | subscribe, publish, label, placeholder, type, publish-on-input, disabled | | feezal-element-wired-select | Options dropdown — native <select> over a sketch frame | subscribe, publish, label, options, disabled |

Every element that subscribes also takes the standard message-property (and per-topic message-property-*) attributes described in element-spec.md §4.

Rendering approach

Elements render into an inline SVG via rough.svg()/rough.generator(), with the rough.js seed pinned once per instance in the constructor and redraw gated on a geometry key (host size + shape-affecting attributes) — an MQTT value update or unrelated attribute edit never re-scribbles the strokes. See src/wired-base.js and DECISION.md for the full rationale and the spike that validated it.

Palette & theming

Unlike LCARS, this family is theme-agnostic — it looks right on both light and dark stock themes without any overrides. Strokes take the theme's text colour (--feezal-wired-color, falling back to --primary-text-color/--feezal-color); fills stay transparent by default. Every element exposes --feezal-wired-* CSS custom properties in the Style inspector for further customisation. Pair it with @feezal/feezal-theme-wired for the full "sketchbook" look — a paper background with subtle grain and the self-hosted Gloria Hallelujah handwriting typeface.

Install

In a running feezal (≥ 3.3.x, N29 Phase B support): open the Packages sidebar, search wired → Install. The family shows as one "set" row; all eight tags appear in the Wired palette category after the reload prompt. Install @feezal/feezal-theme-wired the same way for the paired theme.

Development

See AGENT-TASK.md for the build plan, DECISION.md for the Phase 1 rendering-approach spike, TESTING.md for the manual QA checklist, and PUBLISHING.md for release steps.

A screenshot of the palette/live elements is still pending — it needs a real browser session against a running feezal instance (see the dev loop above) and isn't something this repo's automated tooling can produce.

npm install
npm test