fix(webui-framework): @attr property reflection (#304)

* Fix @attr property reflection

The bug was that `@attr` looked reactive from the component template, but it was not fully the same reactive primitive as `@observable`.

Property writes updated the backing field and could refresh template bindings, but they did not reflect back to the host DOM attribute. `@attr` also was not registered in the observable-name registry, so targeted updates, SSR state seeding, and `setState()` treated it differently from `@observable`.

```ts
host.label = "bob";
```

Before this fix, that assignment left the host markup stale:

```html
<test-attr label="Status"></test-attr>
```

This broke attribute selectors, external DOM reads, serialization, and parent code that expects `@attr` to be observable state plus DOM attribute synchronization.

The fix makes `@attr` reuse the observable registration path and adds guarded property-to-attribute reflection. The reflection guard prevents a DOM write from re-entering `attributeChangedCallback` and converting non-string backing values into strings.

```ts
host.count = 5;
// stays number-backed while reflecting count="5"
```

It also syncs pre-connect `@attr` property values after mount so client-created elements preserve values assigned before `appendChild()`.

Tests now cover default and custom attr names, boolean attr reflection, DOM-to-property updates, `setState()`, type-preserving reflection, and pre-connect assignment.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* Fix inherited decorator metadata

The review found that subclassed WebUI elements did not inherit decorator metadata from their base classes. That meant inherited `@attr` properties could appear in `observedAttributes` while `attributeChangedCallback`, `setState()`, SSR state seeding, targeted updates, and mount-time attribute sync only saw metadata registered directly on the subclass.

```ts
class BaseCard extends WebUIElement {
  @attr baseLabel = "";
}

class ProductCard extends BaseCard {
  @attr label = "";
}
```

Before this fix, `base-label` changes on `<product-card>` were not routed to `baseLabel`, and inherited observable names were missing from the subclass registry.

The fix resolves observable and attr metadata through the constructor chain and copies inherited maps when a subclass registers its own decorators. That keeps lookup cost bounded to subclass setup or rare inheritance fallback, while direct classes still use the same WeakMap-backed hot path.

Tests now cover inherited `@observable` names and inherited `@attr` metadata for DOM-to-property and property-to-attribute synchronization.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* base class

---------

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: mohamedmansour

packages/webui-framework/src/decorators.test.ts

@@ -4,7 +4,46 @@
 import { strict as assert } from 'node:assert';
 import { describe, test } from 'node:test';
 
-import { toKebabCase } from './decorators.js';
+import {
+  attr,
+  getObservableNames,
+  isAttributeProperty,
+  observable,
+  toKebabCase,
+} from './decorators.js';
+
+class FakeElement {
+  $ready = true;
+  isConnected = false;
+  private readonly attrs = new Map<string, string>();
+
+  getAttribute(name: string): string | null {
+    return this.attrs.get(name) ?? null;
+  }
+
+  hasAttribute(name: string): boolean {
+    return this.attrs.has(name);
+  }
+
+  setAttribute(name: string, value: string): void {
+    const oldValue = this.getAttribute(name);
+    const newValue = String(value);
+    this.attrs.set(name, newValue);
+    this.attributeChangedCallback?.(name, oldValue, newValue);
+  }
+
+  removeAttribute(name: string): void {
+    const oldValue = this.getAttribute(name);
+    this.attrs.delete(name);
+    this.attributeChangedCallback?.(name, oldValue, null);
+  }
+
+  attributeChangedCallback?(
+    name: string,
+    oldValue: string | null,
+    newValue: string | null,
+  ): void;
+}
 
 describe('toKebabCase', () => {
   test('converts multi-word ARIA properties to correct attribute names', () => {
@@ -79,3 +118,98 @@ describe('toKebabCase', () => {
     assert.equal(toKebabCase('dataTitle'), 'data-title');
   });
 });
+
+describe('observable decorators', () => {
+  test('@observable registers reactive property names', () => {
+    class TestElement {}
+    observable(TestElement.prototype, 'count');
+
+    assert.equal(getObservableNames(TestElement).has('count'), true);
+  });
+
+  test('@observable names inherit through subclasses', () => {
+    class BaseElement {}
+    observable(BaseElement.prototype, 'baseCount');
+    class TestElement extends BaseElement {}
+    observable(TestElement.prototype, 'count');
+
+    const names = getObservableNames(TestElement);
+    assert.equal(names.has('baseCount'), true);
+    assert.equal(names.has('count'), true);
+  });
+
+  test('@attr registers reactive property names', () => {
+    class TestElement {}
+    attr(TestElement.prototype, 'label');
+
+    assert.equal(getObservableNames(TestElement).has('label'), true);
+  });
+
+  test('@attr reflects property values without stringifying backing state', () => {
+    class TestElement extends FakeElement {}
+    attr(TestElement.prototype, 'count');
+
+    const element = new TestElement() as TestElement & { count: number };
+    element.count = 5;
+
+    assert.equal(element.getAttribute('count'), '5');
+    assert.equal(element.count, 5);
+  });
+
+  test('@attr reacts to string attribute changes', () => {
+    class TestElement extends FakeElement {}
+    attr({ attribute: 'display-value' })(TestElement.prototype, 'displayValue');
+
+    const element = new TestElement() as TestElement & { displayValue: string | null };
+    element.setAttribute('display-value', 'Ready');
+
+    assert.equal(element.displayValue, 'Ready');
+  });
+
+  test('@attr boolean mode reflects presence and removal', () => {
+    class TestElement extends FakeElement {}
+    attr({ mode: 'boolean', attribute: 'is-active' })(TestElement.prototype, 'isActive');
+
+    const element = new TestElement() as TestElement & { isActive: boolean };
+    element.isActive = true;
+    assert.equal(element.hasAttribute('is-active'), true);
+
+    element.isActive = false;
+    assert.equal(element.hasAttribute('is-active'), false);
+
+    element.setAttribute('is-active', '');
+    assert.equal(element.isActive, true);
+
+    element.removeAttribute('is-active');
+    assert.equal(element.isActive, false);
+  });
+
+  test('@attr metadata inherits through subclasses', () => {
+    class BaseElement extends FakeElement {}
+    attr(BaseElement.prototype, 'baseLabel');
+    class TestElement extends BaseElement {}
+    attr(TestElement.prototype, 'label');
+
+    const names = getObservableNames(TestElement);
+    assert.equal(names.has('baseLabel'), true);
+    assert.equal(names.has('label'), true);
+    assert.equal(isAttributeProperty(TestElement, 'baseLabel'), true);
+    assert.equal(isAttributeProperty(TestElement, 'label'), true);
+    assert.equal(isAttributeProperty(TestElement, 'missing'), false);
+
+    const element = new TestElement() as TestElement & {
+      baseLabel: string;
+      label: string;
+    };
+    element.setAttribute('base-label', 'Base');
+    element.setAttribute('label', 'Child');
+
+    assert.equal(element.baseLabel, 'Base');
+    assert.equal(element.label, 'Child');
+
+    element.baseLabel = 'Updated Base';
+    element.label = 'Updated Child';
+    assert.equal(element.getAttribute('base-label'), 'Updated Base');
+    assert.equal(element.getAttribute('label'), 'Updated Child');
+  });
+});