@effect.healthcare/messenger 0.5.0 → 0.6.0

package/README.md

@@ -8,6 +8,8 @@ It renders nothing — no template, no styles. You configure it, bind an event,
 
 > This foundation is **receive‑only**; outbound collaboration messaging is a future capability.
 
+The messenger is built on `@scalable.software/component` `^0.5.0`. The API, the events and their `detail` are unchanged. A host that serves the base component through an import map must serve `^0.5.0`.
+
 ## Overview
 
 ```js

package/dist/messenger.d.ts

@@ -169,12 +169,19 @@ export declare class Messenger extends Component {
      */
     protected _addEventListeners: () => void;
     /**
-     * Called by the disconnectedCallback prototypical method. Closes the live
-     * connection so a removed element does not keep a socket open.
+     * Called by the disconnectedCallback prototypical method
      * @category Configuration
      * @hidden
      */
     protected _removeEventListeners: () => void;
+    /**
+     * Called by the disconnectedCallback prototypical method, after
+     * `_removeEventListeners`. Closes the live connection so a removed element
+     * does not keep a socket open.
+     * @category Configuration
+     * @hidden
+     */
+    protected _dispose: () => void;
     /**
      * Negotiates a short-lived Web PubSub client access URL from the path,
      * authenticating the request with the session token.

package/dist/messenger.js

@@ -88,13 +88,13 @@ export class Messenger extends Component {
         this._connection = connection;
         this.setAttribute(Attributes.CONNECTION, connection);
         // Dispatch
-        const event = { detail: { connection } };
+        const detail = { connection };
         connection === Connection.CONNECTING &&
-            this._dispatchEvent(Event.ON_CONNECTING, event);
+            this._dispatch(Event.ON_CONNECTING, detail);
         connection === Connection.CONNECTED &&
-            this._dispatchEvent(Event.ON_CONNECTED, event);
+            this._dispatch(Event.ON_CONNECTED, detail);
         connection === Connection.DISCONNECTED &&
-            this._dispatchEvent(Event.ON_DISCONNECTED, event);
+            this._dispatch(Event.ON_DISCONNECTED, detail);
     }
     /**
      * The negotiate request path. When absent the messenger stays disconnected.
@@ -117,7 +117,7 @@ export class Messenger extends Component {
             ? this.removeAttribute(Attributes.PATH)
             : this.setAttribute(Attributes.PATH, path);
         // Dispatch
-        this._dispatchEvent(Event.ON_PATH_CHANGE, { detail: { path } });
+        this._dispatch(Event.ON_PATH_CHANGE, { path });
     }
     /**
      * The session token, read fresh from local storage on every access — never
@@ -285,12 +285,19 @@ export class Messenger extends Component {
      */
     _addEventListeners = () => { };
     /**
-     * Called by the disconnectedCallback prototypical method. Closes the live
-     * connection so a removed element does not keep a socket open.
+     * Called by the disconnectedCallback prototypical method
      * @category Configuration
      * @hidden
      */
-    _removeEventListeners = () => this.disconnect();
+    _removeEventListeners = () => { };
+    /**
+     * Called by the disconnectedCallback prototypical method, after
+     * `_removeEventListeners`. Closes the live connection so a removed element
+     * does not keep a socket open.
+     * @category Configuration
+     * @hidden
+     */
+    _dispose = () => this.disconnect();
     /**
      * Negotiates a short-lived Web PubSub client access URL from the path,
      * authenticating the request with the session token.
@@ -328,8 +335,8 @@ export class Messenger extends Component {
     _handleMessage = (event) => {
         const message = JSON.parse(event.data);
         message.data?.type === Message.MASTER_DATA_CHANGED &&
-            this._dispatchEvent(Event.ON_MASTERDATACHANGE, {
-                detail: { datetime: new Date().toISOString() },
+            this._dispatch(Event.ON_MASTERDATACHANGE, {
+                datetime: new Date().toISOString(),
             });
     };
 }

package/package.json

@@ -1,12 +1,17 @@
 {
   "name": "@effect.healthcare/messenger",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Azure Pub Sub Messenger Web Component",
   "keywords": [
     "web component"
   ],
+  "files": [
+    "dist",
+    "!dist/.gitkeep"
+  ],
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     }
   },
@@ -50,6 +55,6 @@
     "typescript": "^6.0.3"
   },
   "dependencies": {
-    "@scalable.software/component": "^0.3.0"
+    "@scalable.software/component": "^0.5.0"
   }
 }

package/.claude/CLAUDE.md

@@ -1,88 +0,0 @@
-# Web Component
-
-A web component built on the `@scalable.software/component` framework. The policies in `.claude/context/` govern how component specifications are transformed into solid implementations.
-
-## How This Project Works
-
-Every component is developed through a specification-driven, test-first pipeline. The specification declares the public contract; the implementation honors it; the tests verify it; the commit history records the transformation.
-
-When working on a component, translate the specification into an implementation that conforms to all applicable policies — without inventing structure, behavior, or vocabulary the specification does not declare.
-
-## Translation Pipeline
-
-```
-<component>.specifications.json     ← source of truth
-        │
-        ├─→ <component>.meta.ts            vocabulary + value-domain types
-        ├─→ <component>.validation.ts      Validate class — runtime enforcement
-        ├─→ <component>.ts                 state, operations, events, gestures
-        ├─→ <component>.template.html      realized composition
-        └─→ <component>.style.css          realized presentation
-
-verified by:
-        test/unit/<component>.meta.test.ts        — vocabulary tests
-        test/unit/<component>.validation.test.ts  — validator tests
-        test/unit/<component>.test.ts             — component behavioral tests
-
-recorded by:
-        FAIL/PASS commit pairs, policy-ordered, one prefix per commit
-        DOCUMENTATION → FEATURE closes each feature branch
-```
-
-Names predictably transform across layers. A state named `visibility` in the specification becomes `Attributes.VISIBILITY` + `State.VISIBILITY` in metadata, `Validate.visibility` in validation, `get visibility()`/`set visibility(...)` on the class, `state(State.VISIBILITY, ...)` in tests, and `STATE: ...` in commits.
-
-## Implementation Order
-
-Within any behavioral feature, work proceeds top-down through the policy hierarchy:
-
-```
-COMPOSITION → STATE → VALIDATION → OPERATION → EVENT → STYLE → GESTURE → DOCUMENTATION → FEATURE
-```
-
-Each layer depends on the layers above. CSS-only features collapse to `STYLE → FEATURE`. See `@context/workflow.md` for the full sequence and per-layer commit format.
-
-## Implementation Policies
-
-Each policy file opens with a **How to Read This Policy** rubric that classifies its rules as one of three strengths:
-
-- **Principles** — non-negotiable; derived from framework correctness or TDD discipline.
-- **Templates** — invariant skeletons with explicit variation points based on declared classification (e.g., attribute-backed vs non-attribute, readonly vs writable, payload-bearing vs payload-free).
-- **Conventions** — canonical defaults that keep implementations readable across components.
-
-When a new component's shape conflicts with a rule, classify the rule before reconciling: a principle conflict is a defect; a template conflict means a variation point needs to be made explicit; a convention conflict is a documented deviation.
-
-### Specification-driven (per component)
-
-@context/composition.md — structural parts and cached references
-@context/data.md — canonical component-owned content
-@context/state.md — runtime mode, visibility, status, persistence
-@context/operation.md — public imperative actions
-@context/event.md — observable semantic outcomes
-@context/gesture.md — interaction inputs
-@context/validation.md — runtime enforcement of declared value domains
-
-### Cross-cutting (every component)
-
-@context/testing.md — test file structure, BDD vocabulary, coverage contracts
-@context/workflow.md — branching, commit sequencing, TDD discipline
-
-## Working Principles
-
-- **Test first.** Every behavioral change starts with a failing test. The FAIL commit precedes the PASS commit. No exceptions.
-- **One feature per branch.** Behavioral work is never committed directly to main.
-- **One concern per commit.** Every commit message begins with a canonical prefix.
-- **Trace names across layers.** A specification name reappears unchanged — modulo standard transformations — in metadata, validation, class API, tests, and commits.
-- **Specification is authoritative.** Implementations do not invent structure, behavior, or vocabulary the specification does not declare. If a component's shape does not fit a policy rule, examine the policy's variation points — do not bypass them.
-
-## Running the Demo in a Browser (chrome-devtools MCP)
-
-For advanced testing or debugging, the live web component can be served and driven through the `chrome-devtools` MCP. This gives access to the rendered component, its shadow DOM, the console, and DOM manipulation.
-
-1. **Start the dev server** — `npm run serve`. The `preserve` hook builds first (`src/` → `dist/`), and `web-dev-server.config.mjs` is auto-loaded (`rootDir: "."`, `port: 3000`, `watch: true`). Run it in the background. The server serves the repo root because the demo loads `../importmap` and `./dist` via the import map. Port 3000 is the origin the backend CORS-whitelists, so do not change it.
-2. **Navigate the controlled browser** — `mcp__chrome-devtools__navigate_page` to `http://localhost:3000/demo/index.html`. Always use the explicit `/demo/index.html` path; the demo uses relative asset paths and will not resolve at `/`.
-3. **Verify** — `mcp__chrome-devtools__evaluate_script` to inspect the component (e.g. `customElements.get("app-messenger")` is defined; the base framework exposes the shadow root as `el.root`); `mcp__chrome-devtools__list_console_messages` to check for errors.
-4. **Clean up when done** — navigate the page to `about:blank` (the MCP keeps one page alive, so the last page cannot be closed), then stop the dev server process on port 3000.
-
-Notes:
-- MCP tool schemas must be loaded via `ToolSearch` (`select:<name>`) before first use each session.
-- If a stale server already holds port 3000, the new one fails to bind — kill the straggler rather than letting it drift to another port.