[AxialForge]

What & why

Request: "build a simple desktop app that replicates the apluscalc keyboard counter (needed offline at work), and make a wrapper so I can add other widgets and calculators later."

The wrapper already exists — ShopDeck itself is a desktop home for self-contained HTML modules it opens at full fidelity, offline, in their own window. So this delivers the keyboard counter the wrapper-native way (one self-contained .html module) and establishes an examples/widgets/ home + seeding pattern so the next widget/calculator is just another file.

The apluscalc "keyboard counter" is a real-time keystroke / typing-speed test (not a tally counter): you type into a zone and it counts every keystroke, broken down by category, with KPM and the most-pressed key. This module replicates that.

Changes

• examples/widgets/keyboard-counter.html — the widget. Real-time total keystrokes, per-category breakdown (letters, numbers, punctuation, spacebar, Enter, Backspace, modifiers, other), keystrokes-per-minute (+ peak), approximate words-per-minute, most-pressed key, unique keys, and session time. Light/dark adaptive, responsive, Esc Esc to reset. Fully inline & offline — opens in ShopDeck's window or by double-clicking in any browser on an offline machine.
• examples/widgets/README.md — documents the widget/calculator pattern (how to get widgets into ShopDeck and how to author a new one).
• scripts/seed-widgets.mjs + npm run seed:widgets — copy the bundled example widgets into Documents/ShopDeck Library/Widgets/.
• test/keyboard-counter.test.mjs — validates the manifest with ShopDeck's own validateManifest, asserts self-containment (no remote assets / fetch), and unit-tests the widget's pure counting core by extracting the fenced KBC block from the HTML and running it in a Node vm (tests the real source, no browser needed).
• CHANGELOG.md — note the additions under Unreleased.

Note: keyboard-counter.html keeps its logic in a pure DOM-free core (/*__KBC_CORE_START__*/ … /*__KBC_CORE_END__*/) so the module stays a single self-contained file while its rules remain unit-testable — a pattern reusable for future widgets.

Verification

• npm test — 46/46 pass (9 new).
• Rendered in headless Chromium and drove synthetic keystrokes end-to-end: on-screen counters matched exactly (e.g. Hi 42!+Enter+Backspace+Shift+ArrowLeft → total 10, 6 text chars, correct per-category split).
• Ran ShopDeck's real scanLibrary against a seeded library: the widget is catalogued as a proper module (inferred: false, title "Keyboard Counter", folder Widgets).
• Fixed a tie-break quirk found during E2E: switched the per-key tally to a Map so most-pressed ties break to the first key used rather than lowest numeric key.

How to try it

npm run seed:widgets   # copies the widget into your library's Widgets/ folder
npm run dev            # open ShopDeck; the Keyboard Counter appears under Widgets

Or just double-click examples/widgets/keyboard-counter.html in any browser — no app needed, works offline.

🤖 Generated with Claude Code

---

Generated by Claude Code

[AxialForge]

Closing — by request, the Keyboard Counter widget is moving out of ShopDeck into a dedicated, category-organized HTML Widgets collection (AxialForge/html-widgets) so the widgets can be shared and reused independently. The branch has been reset back to main, so ShopDeck carries none of these changes.

Widgets in the new repo keep the ShopDeck module-manifest block, so they remain drop-in ShopDeck modules — nothing is lost on this side.

---

Generated by Claude Code