@api-client/ui 0.5.31 → 0.5.32

package/build/src/core/renderer/ApplicationRenderer.d.ts

@@ -1,10 +1,11 @@
 import type { Application } from '../Application.js';
 import type { Activity } from '../Activity.js';
-import { Renderer, renderFn } from './Renderer.js';
+import { Renderer } from './Renderer.js';
 export declare class ApplicationRenderer extends Renderer {
     protected app: Application;
     renderedFirst: WeakMap<Application | Activity, boolean>;
     constructor(app: Application);
-    [renderFn](): void;
+    private _handleFirstRender;
+    protected renderer(): void;
 }
 //# sourceMappingURL=ApplicationRenderer.d.ts.map

package/build/src/core/renderer/ApplicationRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ApplicationRenderer.d.ts","sourceRoot":"","sources":["../../../../src/core/renderer/ApplicationRenderer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AACpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAC9C,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAGlD,qBAAa,mBAAoB,SAAQ,QAAQ;IAGnC,SAAS,CAAC,GAAG,EAAE,WAAW;IAFtC,aAAa,EAAE,OAAO,CAAC,WAAW,GAAG,QAAQ,EAAE,OAAO,CAAC,CAAA;gBAEjC,GAAG,EAAE,WAAW;IAKtC,CAAC,QAAQ,CAAC,IAAI,IAAI;CA0CnB"}
+{"version":3,"file":"ApplicationRenderer.d.ts","sourceRoot":"","sources":["../../../../src/core/renderer/ApplicationRenderer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AACpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAGxC,qBAAa,mBAAoB,SAAQ,QAAQ;IAGnC,SAAS,CAAC,GAAG,EAAE,WAAW;IAFtC,aAAa,EAAE,OAAO,CAAC,WAAW,GAAG,QAAQ,EAAE,OAAO,CAAC,CAAA;gBAEjC,GAAG,EAAE,WAAW;IAKtC,OAAO,CAAC,kBAAkB;IAU1B,SAAS,CAAC,QAAQ,IAAI,IAAI;CA4B3B"}

package/build/src/core/renderer/ApplicationRenderer.js

@@ -1,5 +1,4 @@
-import { render } from 'lit';
-import { Renderer, renderFn } from './Renderer.js';
+import { Renderer } from './Renderer.js';
 import { ModalActivity } from '../ModalActivity.js';
 export class ApplicationRenderer extends Renderer {
     app;
@@ -9,48 +8,40 @@ export class ApplicationRenderer extends Renderer {
         this.app = app;
         this.renderedFirst = new WeakMap();
     }
-    [renderFn]() {
-        const { app, renderRoot } = this;
-        let host;
-        let root = renderRoot;
-        let content;
-        const activity = app.manager.getTopActivity();
-        if (activity) {
-            host = activity;
-            if (activity.renderRoot) {
-                root = activity.renderRoot;
-            }
-            if (activity instanceof ModalActivity) {
-                content = activity.renderDialog();
-            }
-            else {
-                content = activity.render();
+    _handleFirstRender(target, clearRoot, root) {
+        if (!this.renderedFirst.has(target)) {
+            this.renderedFirst.set(target, true);
+            if (clearRoot) {
+                this._clearRoot(root);
             }
+            queueMicrotask(() => target.onFirstRender());
+        }
+    }
+    renderer() {
+        const { app, renderRoot: defaultRenderRoot } = this;
+        const activity = app.manager.getTopActivity();
+        const host = activity || app;
+        const root = activity?.renderRoot || defaultRenderRoot;
+        let content;
+        if (activity instanceof ModalActivity) {
+            content = activity.renderDialog();
         }
         else {
-            host = app;
-            content = app.render();
+            content = host.render();
         }
         if (!root) {
             // eslint-disable-next-line no-console
             console.warn(`The "renderRoot" is not set up.`);
             return;
         }
-        if (!this.renderedFirst.has(app)) {
-            this.renderedFirst.set(app, true);
-            Array.from(root.childNodes).forEach((node) => root.parentNode?.removeChild(node));
-            setTimeout(() => app.onFirstRender());
-        }
-        // host might !== app
-        if (!this.renderedFirst.has(host)) {
-            setTimeout(() => host.onFirstRender());
+        this._handleFirstRender(app, true, root);
+        if (!this.firstRendered) {
+            this.firstRenderedFlag = true;
         }
-        const litPart = root;
-        if (litPart._$litPart$ && litPart._$litPart$.options) {
-            litPart._$litPart$.options.host = host;
+        if (host !== app) {
+            this._handleFirstRender(host, false, root);
         }
-        render(content, root, { host });
-        this.resolveUpdatePromise();
+        this._render(content, root, host);
         this.app.onRendered();
     }
 }

package/build/src/core/renderer/ApplicationRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApplicationRenderer.js","sourceRoot":"","sources":["../../../../src/core/renderer/ApplicationRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,MAAM,EAAsC,MAAM,KAAK,CAAA;AAGzE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAEnD,MAAM,OAAO,mBAAoB,SAAQ,QAAQ;IAGzB;IAFtB,aAAa,CAA0C;IAEvD,YAAsB,GAAgB;QACpC,KAAK,EAAE,CAAA;QADa,QAAG,GAAH,GAAG,CAAa;QAEpC,IAAI,CAAC,aAAa,GAAG,IAAI,OAAO,EAAE,CAAA;IACpC,CAAC;IAED,CAAC,QAAQ,CAAC;QACR,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,IAAI,CAAA;QAChC,IAAI,IAA4B,CAAA;QAChC,IAAI,IAAI,GAAuB,UAAU,CAAA;QACzC,IAAI,OAAwC,CAAA;QAC5C,MAAM,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAC,cAAc,EAAE,CAAA;QAC7C,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,GAAG,QAAQ,CAAA;YACf,IAAI,QAAQ,CAAC,UAAU,EAAE,CAAC;gBACxB,IAAI,GAAG,QAAQ,CAAC,UAAU,CAAA;YAC5B,CAAC;YACD,IAAI,QAAQ,YAAY,aAAa,EAAE,CAAC;gBACtC,OAAO,GAAG,QAAQ,CAAC,YAAY,EAAE,CAAA;YACnC,CAAC;iBAAM,CAAC;gBACN,OAAO,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAA;YAC7B,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAI,GAAG,GAAG,CAAA;YACV,OAAO,GAAG,GAAG,CAAC,MAAM,EAAE,CAAA;QACxB,CAAC;QACD,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,sCAAsC;YACtC,OAAO,CAAC,IAAI,CAAC,iCAAiC,CAAC,CAAA;YAC/C,OAAM;QACR,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;YACjC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,CAAA;YACjC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC,CAAA;YACjF,UAAU,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC,CAAA;QACvC,CAAC;QACD,qBAAqB;QACrB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;YAClC,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAA;QACxC,CAAC;QACD,MAAM,OAAO,GAAG,IAA+C,CAAA;QAC/D,IAAI,OAAO,CAAC,UAAU,IAAI,OAAO,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC;YACrD,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,GAAG,IAAI,CAAA;QACxC,CAAC;QACD,MAAM,CAAC,OAAO,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,CAAA;QAC/B,IAAI,CAAC,oBAAoB,EAAE,CAAA;QAC3B,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,CAAA;IACvB,CAAC;CACF","sourcesContent":["import { nothing, render, type RootPart, type TemplateResult } from 'lit'\nimport type { Application } from '../Application.js'\nimport type { Activity } from '../Activity.js'\nimport { Renderer, renderFn } from './Renderer.js'\nimport { ModalActivity } from '../ModalActivity.js'\n\nexport class ApplicationRenderer extends Renderer {\n  renderedFirst: WeakMap<Application | Activity, boolean>\n\n  constructor(protected app: Application) {\n    super()\n    this.renderedFirst = new WeakMap()\n  }\n\n  [renderFn](): void {\n    const { app, renderRoot } = this\n    let host: Application | Activity\n    let root: HTMLElement | null = renderRoot\n    let content: TemplateResult | typeof nothing\n    const activity = app.manager.getTopActivity()\n    if (activity) {\n      host = activity\n      if (activity.renderRoot) {\n        root = activity.renderRoot\n      }\n      if (activity instanceof ModalActivity) {\n        content = activity.renderDialog()\n      } else {\n        content = activity.render()\n      }\n    } else {\n      host = app\n      content = app.render()\n    }\n    if (!root) {\n      // eslint-disable-next-line no-console\n      console.warn(`The \"renderRoot\" is not set up.`)\n      return\n    }\n    if (!this.renderedFirst.has(app)) {\n      this.renderedFirst.set(app, true)\n      Array.from(root.childNodes).forEach((node) => root.parentNode?.removeChild(node))\n      setTimeout(() => app.onFirstRender())\n    }\n    // host might !== app\n    if (!this.renderedFirst.has(host)) {\n      setTimeout(() => host.onFirstRender())\n    }\n    const litPart = root as HTMLElement & { _$litPart$?: RootPart }\n    if (litPart._$litPart$ && litPart._$litPart$.options) {\n      litPart._$litPart$.options.host = host\n    }\n    render(content, root, { host })\n    this.resolveUpdatePromise()\n    this.app.onRendered()\n  }\n}\n"]}
+{"version":3,"file":"ApplicationRenderer.js","sourceRoot":"","sources":["../../../../src/core/renderer/ApplicationRenderer.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAEnD,MAAM,OAAO,mBAAoB,SAAQ,QAAQ;IAGzB;IAFtB,aAAa,CAA0C;IAEvD,YAAsB,GAAgB;QACpC,KAAK,EAAE,CAAA;QADa,QAAG,GAAH,GAAG,CAAa;QAEpC,IAAI,CAAC,aAAa,GAAG,IAAI,OAAO,EAAE,CAAA;IACpC,CAAC;IAEO,kBAAkB,CAAC,MAA8B,EAAE,SAAkB,EAAE,IAAiB;QAC9F,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACpC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA;YACpC,IAAI,SAAS,EAAE,CAAC;gBACd,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;YACvB,CAAC;YACD,cAAc,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC,CAAA;QAC9C,CAAC;IACH,CAAC;IAES,QAAQ;QAChB,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,iBAAiB,EAAE,GAAG,IAAI,CAAA;QACnD,MAAM,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAC,cAAc,EAAE,CAAA;QAE7C,MAAM,IAAI,GAA2B,QAAQ,IAAI,GAAG,CAAA;QACpD,MAAM,IAAI,GAAuB,QAAQ,EAAE,UAAU,IAAI,iBAAiB,CAAA;QAE1E,IAAI,OAAwC,CAAA;QAC5C,IAAI,QAAQ,YAAY,aAAa,EAAE,CAAC;YACtC,OAAO,GAAG,QAAQ,CAAC,YAAY,EAAE,CAAA;QACnC,CAAC;aAAM,CAAC;YACN,OAAO,GAAG,IAAI,CAAC,MAAM,EAAE,CAAA;QACzB,CAAC;QACD,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,sCAAsC;YACtC,OAAO,CAAC,IAAI,CAAC,iCAAiC,CAAC,CAAA;YAC/C,OAAM;QACR,CAAC;QACD,IAAI,CAAC,kBAAkB,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,CAAA;QACxC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;YACxB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAA;QAC/B,CAAC;QACD,IAAI,IAAI,KAAK,GAAG,EAAE,CAAC;YACjB,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,CAAA;QAC5C,CAAC;QACD,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,CAAA;QACjC,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,CAAA;IACvB,CAAC;CACF","sourcesContent":["import { nothing, type TemplateResult } from 'lit'\nimport type { Application } from '../Application.js'\nimport type { Activity } from '../Activity.js'\nimport { Renderer } from './Renderer.js'\nimport { ModalActivity } from '../ModalActivity.js'\n\nexport class ApplicationRenderer extends Renderer {\n  renderedFirst: WeakMap<Application | Activity, boolean>\n\n  constructor(protected app: Application) {\n    super()\n    this.renderedFirst = new WeakMap()\n  }\n\n  private _handleFirstRender(target: Application | Activity, clearRoot: boolean, root: HTMLElement): void {\n    if (!this.renderedFirst.has(target)) {\n      this.renderedFirst.set(target, true)\n      if (clearRoot) {\n        this._clearRoot(root)\n      }\n      queueMicrotask(() => target.onFirstRender())\n    }\n  }\n\n  protected renderer(): void {\n    const { app, renderRoot: defaultRenderRoot } = this\n    const activity = app.manager.getTopActivity()\n\n    const host: Application | Activity = activity || app\n    const root: HTMLElement | null = activity?.renderRoot || defaultRenderRoot\n\n    let content: TemplateResult | typeof nothing\n    if (activity instanceof ModalActivity) {\n      content = activity.renderDialog()\n    } else {\n      content = host.render()\n    }\n    if (!root) {\n      // eslint-disable-next-line no-console\n      console.warn(`The \"renderRoot\" is not set up.`)\n      return\n    }\n    this._handleFirstRender(app, true, root)\n    if (!this.firstRendered) {\n      this.firstRenderedFlag = true\n    }\n    if (host !== app) {\n      this._handleFirstRender(host, false, root)\n    }\n    this._render(content, root, host)\n    this.app.onRendered()\n  }\n}\n"]}

package/build/src/core/renderer/FragmentRenderer.d.ts

@@ -1,8 +1,8 @@
 import type { Fragment } from '../Fragment.js';
-import { Renderer, renderFn } from './Renderer.js';
+import { Renderer } from './Renderer.js';
 export declare class FragmentRenderer extends Renderer {
     protected fragment: Fragment;
     constructor(fragment: Fragment);
-    [renderFn](): void;
+    protected renderer(): void;
 }
 //# sourceMappingURL=FragmentRenderer.d.ts.map

package/build/src/core/renderer/FragmentRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FragmentRenderer.d.ts","sourceRoot":"","sources":["../../../../src/core/renderer/FragmentRenderer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAC9C,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAElD,qBAAa,gBAAiB,SAAQ,QAAQ;IAChC,SAAS,CAAC,QAAQ,EAAE,QAAQ;gBAAlB,QAAQ,EAAE,QAAQ;IAIxC,CAAC,QAAQ,CAAC,IAAI,IAAI;CAuBnB"}
+{"version":3,"file":"FragmentRenderer.d.ts","sourceRoot":"","sources":["../../../../src/core/renderer/FragmentRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExC,qBAAa,gBAAiB,SAAQ,QAAQ;IAChC,SAAS,CAAC,QAAQ,EAAE,QAAQ;gBAAlB,QAAQ,EAAE,QAAQ;IAIxC,SAAS,CAAC,QAAQ,IAAI,IAAI;CAe3B"}

package/build/src/core/renderer/FragmentRenderer.js

@@ -1,34 +1,24 @@
-import { render } from 'lit';
-import { Renderer, renderFn } from './Renderer.js';
+import { Renderer } from './Renderer.js';
 export class FragmentRenderer extends Renderer {
     fragment;
     constructor(fragment) {
         super();
         this.fragment = fragment;
     }
-    [renderFn]() {
+    renderer() {
         const root = this.renderRoot;
         if (!root) {
             // return quietly. Fragments can be rendered directly.
             return;
         }
-        const fragment = this.fragment;
-        const host = fragment.getSingleVisibleFragment() || fragment;
+        const host = this.fragment.getSingleVisibleFragment() ?? this.fragment;
         if (!this.firstRendered) {
             this.firstRenderedFlag = true;
             // cleanup any pre-existing content.
-            Array.from(root.childNodes).forEach((node) => root.parentNode?.removeChild(node));
-            setTimeout(() => host.onFirstRender());
+            this._clearRoot(root);
+            queueMicrotask(() => host.onFirstRender());
         }
-        const litPart = root;
-        if (litPart._$litPart$) {
-            ;
-            litPart._$litPart$.options.host = host;
-        }
-        // console.log(host, root)
-        render(host.render(), root, { host });
-        this.resolveUpdatePromise();
-        // this.app.onRendered()
+        this._render(host.render(), root, host);
     }
 }
 //# sourceMappingURL=FragmentRenderer.js.map

package/build/src/core/renderer/FragmentRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"FragmentRenderer.js","sourceRoot":"","sources":["../../../../src/core/renderer/FragmentRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAA2B,MAAM,KAAK,CAAA;AAErD,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAElD,MAAM,OAAO,gBAAiB,SAAQ,QAAQ;IACtB;IAAtB,YAAsB,QAAkB;QACtC,KAAK,EAAE,CAAA;QADa,aAAQ,GAAR,QAAQ,CAAU;IAExC,CAAC;IAED,CAAC,QAAQ,CAAC;QACR,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAA;QAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,sDAAsD;YACtD,OAAM;QACR,CAAC;QACD,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAA;QAC9B,MAAM,IAAI,GAAG,QAAQ,CAAC,wBAAwB,EAAE,IAAI,QAAQ,CAAA;QAC5D,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;YACxB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAA;YAC7B,oCAAoC;YACpC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC,CAAA;YACjF,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAA;QACxC,CAAC;QACD,MAAM,OAAO,GAAG,IAA0D,CAAA;QAC1E,IAAI,OAAO,CAAC,UAAU,EAAE,CAAC;YACvB,CAAC;YAAC,OAAO,CAAC,UAAU,CAAC,OAAyB,CAAC,IAAI,GAAG,IAAI,CAAA;QAC5D,CAAC;QACD,0BAA0B;QAC1B,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,CAAA;QACrC,IAAI,CAAC,oBAAoB,EAAE,CAAA;QAC3B,wBAAwB;IAC1B,CAAC;CACF","sourcesContent":["import { render, RenderOptions, RootPart } from 'lit'\nimport type { Fragment } from '../Fragment.js'\nimport { Renderer, renderFn } from './Renderer.js'\n\nexport class FragmentRenderer extends Renderer {\n  constructor(protected fragment: Fragment) {\n    super()\n  }\n\n  [renderFn](): void {\n    const root = this.renderRoot\n    if (!root) {\n      // return quietly. Fragments can be rendered directly.\n      return\n    }\n    const fragment = this.fragment\n    const host = fragment.getSingleVisibleFragment() || fragment\n    if (!this.firstRendered) {\n      this.firstRenderedFlag = true\n      // cleanup any pre-existing content.\n      Array.from(root.childNodes).forEach((node) => root.parentNode?.removeChild(node))\n      setTimeout(() => host.onFirstRender())\n    }\n    const litPart = root as unknown as HTMLElement & { _$litPart$?: RootPart }\n    if (litPart._$litPart$) {\n      ;(litPart._$litPart$.options as RenderOptions).host = host\n    }\n    // console.log(host, root)\n    render(host.render(), root, { host })\n    this.resolveUpdatePromise()\n    // this.app.onRendered()\n  }\n}\n"]}
+{"version":3,"file":"FragmentRenderer.js","sourceRoot":"","sources":["../../../../src/core/renderer/FragmentRenderer.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExC,MAAM,OAAO,gBAAiB,SAAQ,QAAQ;IACtB;IAAtB,YAAsB,QAAkB;QACtC,KAAK,EAAE,CAAA;QADa,aAAQ,GAAR,QAAQ,CAAU;IAExC,CAAC;IAES,QAAQ;QAChB,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAA;QAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,sDAAsD;YACtD,OAAM;QACR,CAAC;QACD,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,wBAAwB,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAA;QACtE,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;YACxB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAA;YAC7B,oCAAoC;YACpC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;YACrB,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAA;QAC5C,CAAC;QACD,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,CAAA;IACzC,CAAC;CACF","sourcesContent":["import type { Fragment } from '../Fragment.js'\nimport { Renderer } from './Renderer.js'\n\nexport class FragmentRenderer extends Renderer {\n  constructor(protected fragment: Fragment) {\n    super()\n  }\n\n  protected renderer(): void {\n    const root = this.renderRoot\n    if (!root) {\n      // return quietly. Fragments can be rendered directly.\n      return\n    }\n    const host = this.fragment.getSingleVisibleFragment() ?? this.fragment\n    if (!this.firstRendered) {\n      this.firstRenderedFlag = true\n      // cleanup any pre-existing content.\n      this._clearRoot(root)\n      queueMicrotask(() => host.onFirstRender())\n    }\n    this._render(host.render(), root, host)\n  }\n}\n"]}

package/build/src/core/renderer/Renderer.d.ts

@@ -1,8 +1,8 @@
+import { type TemplateResult, type nothing } from 'lit';
 export declare enum RenderingState {
     Idle = 0,
     Rendering = 1
 }
-export declare const renderFn: unique symbol;
 /**
  * A class that manages rendering of the application screen.
  */
@@ -17,25 +17,54 @@ export declare abstract class Renderer {
      */
     get updateComplete(): Promise<void> | undefined;
     /**
-     * Sets the root element where the application will be rendered.
-     * @param renderRoot The root element or its selector.
+     * Sets the root element where the application or activity will be rendered.
+     *
+     * @param renderRoot - The root element or a CSS selector string for the element.
+     * If a string is provided, it will be queried from the document.
      */
     setRenderRoot(renderRoot: HTMLElement | string): void;
     /**
-     * Requests an update of the application UI. This will call the `render()` method
-     * and update the DOM.
+     * Requests an update of the UI. Schedules a render if one is not already pending.
+     *
+     * This will call the `renderer()` method and update the DOM in the next animation frame.
+     * Ensures only one render is scheduled at a time.
      */
     requestUpdate(): void;
     protected firstRenderedFlag: boolean;
     /**
-     * Determines whether the initial render had run and the `onFirstRender()`
-     * function was called.
+     * Indicates whether the initial render has occurred and `onFirstRender()` was called.
      */
     get firstRendered(): boolean;
     /**
-     * Manages the rendering of the UI.
+     * Returns the current rendering state.
+     *
+     * @returns The current rendering state.
+     */
+    get state(): RenderingState;
+    /**
+     * Abstract method that must be implemented by subclasses to perform the actual rendering logic.
+     *
+     * Called by `requestUpdate()` when a render is scheduled.
+     */
+    protected abstract renderer(): void;
+    /**
+     * Resolves the update promise if one is pending, indicating that rendering has finished.
      */
-    abstract [renderFn](): void;
     protected resolveUpdatePromise(): void;
+    /**
+     * Renders the given Lit template into the specified root element, setting the host context.
+     *
+     * @param content - The Lit template or `nothing` to render.
+     * @param root - The root HTMLElement to render into.
+     * @param host - The host object for Lit's context (usually the Application or Activity).
+     */
+    protected _render(content: TemplateResult | typeof nothing, root: HTMLElement, host: object): void;
+    /**
+     * Removes all child nodes from the given root element.
+     *
+     * Uses `replaceChildren()` for efficient DOM cleanup.
+     * @param root - The root HTMLElement to clear.
+     */
+    protected _clearRoot(root: HTMLElement): void;
 }
 //# sourceMappingURL=Renderer.d.ts.map

package/build/src/core/renderer/Renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Renderer.d.ts","sourceRoot":"","sources":["../../../../src/core/renderer/Renderer.ts"],"names":[],"mappings":"AAAA,oBAAY,cAAc;IACxB,IAAI,IAAA;IACJ,SAAS,IAAA;CACV;AAED,eAAO,MAAM,QAAQ,eAAqB,CAAA;AAE1C;;GAEG;AACH,8BAAsB,QAAQ;;IAC5B;;OAEG;IACH,UAAU,EAAE,WAAW,GAAG,IAAI,CAAO;IAErC;;OAEG;IACH,IAAI,cAAc,IAAI,OAAO,CAAC,IAAI,CAAC,GAAG,SAAS,CAE9C;IAED;;;OAGG;IACH,aAAa,CAAC,UAAU,EAAE,WAAW,GAAG,MAAM,GAAG,IAAI;IAQrD;;;OAGG;IACH,aAAa,IAAI,IAAI;IAerB,SAAS,CAAC,iBAAiB,UAAQ;IAEnC;;;OAGG;IACH,IAAI,aAAa,IAAI,OAAO,CAE3B;IAsBD;;OAEG;IACH,QAAQ,CAAC,CAAC,QAAQ,CAAC,IAAI,IAAI;IAS3B,SAAS,CAAC,oBAAoB,IAAI,IAAI;CAUvC"}
+{"version":3,"file":"Renderer.d.ts","sourceRoot":"","sources":["../../../../src/core/renderer/Renderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,cAAc,EAAE,KAAK,OAAO,EAAE,MAAM,KAAK,CAAA;AAE9E,oBAAY,cAAc;IACxB,IAAI,IAAA;IACJ,SAAS,IAAA;CACV;AAED;;GAEG;AACH,8BAAsB,QAAQ;;IAC5B;;OAEG;IACH,UAAU,EAAE,WAAW,GAAG,IAAI,CAAO;IAErC;;OAEG;IACH,IAAI,cAAc,IAAI,OAAO,CAAC,IAAI,CAAC,GAAG,SAAS,CAE9C;IAED;;;;;OAKG;IACH,aAAa,CAAC,UAAU,EAAE,WAAW,GAAG,MAAM,GAAG,IAAI;IAQrD;;;;;OAKG;IACH,aAAa,IAAI,IAAI;IAerB,SAAS,CAAC,iBAAiB,UAAQ;IAEnC;;OAEG;IACH,IAAI,aAAa,IAAI,OAAO,CAE3B;IAOD;;;;OAIG;IACH,IAAI,KAAK,IAAI,cAAc,CAE1B;IAiBD;;;;OAIG;IACH,SAAS,CAAC,QAAQ,CAAC,QAAQ,IAAI,IAAI;IAanC;;OAEG;IACH,SAAS,CAAC,oBAAoB,IAAI,IAAI;IAWtC;;;;;;OAMG;IACH,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,OAAO,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI;IASlG;;;;;OAKG;IACH,SAAS,CAAC,UAAU,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;CAI9C"}

package/build/src/core/renderer/Renderer.js

@@ -1,9 +1,9 @@
+import { render } from 'lit';
 export var RenderingState;
 (function (RenderingState) {
     RenderingState[RenderingState["Idle"] = 0] = "Idle";
     RenderingState[RenderingState["Rendering"] = 1] = "Rendering";
 })(RenderingState || (RenderingState = {}));
-export const renderFn = Symbol('renderFn');
 /**
  * A class that manages rendering of the application screen.
  */
@@ -19,8 +19,10 @@ export class Renderer {
         return this.#updateComplete;
     }
     /**
-     * Sets the root element where the application will be rendered.
-     * @param renderRoot The root element or its selector.
+     * Sets the root element where the application or activity will be rendered.
+     *
+     * @param renderRoot - The root element or a CSS selector string for the element.
+     * If a string is provided, it will be queried from the document.
      */
     setRenderRoot(renderRoot) {
         if (typeof renderRoot === 'string') {
@@ -31,8 +33,10 @@ export class Renderer {
         }
     }
     /**
-     * Requests an update of the application UI. This will call the `render()` method
-     * and update the DOM.
+     * Requests an update of the UI. Schedules a render if one is not already pending.
+     *
+     * This will call the `renderer()` method and update the DOM in the next animation frame.
+     * Ensures only one render is scheduled at a time.
      */
     requestUpdate() {
         if (this.#renderingState !== RenderingState.Idle) {
@@ -44,14 +48,13 @@ export class Renderer {
             this.#setUpdatePromise();
         }
         requestAnimationFrame(() => {
-            this[renderFn]();
+            this.renderer();
             this.#renderingState = RenderingState.Idle;
         });
     }
     firstRenderedFlag = false;
     /**
-     * Determines whether the initial render had run and the `onFirstRender()`
-     * function was called.
+     * Indicates whether the initial render has occurred and `onFirstRender()` was called.
      */
     get firstRendered() {
         return this.firstRenderedFlag;
@@ -60,6 +63,14 @@ export class Renderer {
      * A flag used to determine in which rendering state the UI is.
      */
     #renderingState = RenderingState.Idle;
+    /**
+     * Returns the current rendering state.
+     *
+     * @returns The current rendering state.
+     */
+    get state() {
+        return this.#renderingState;
+    }
     /**
      * A flag that helps to determine whether the `updateComplete` is setup.
      */
@@ -72,12 +83,19 @@ export class Renderer {
      * The resolver to call when the update completes.
      */
     #updateResolver;
+    /**
+     * Sets up the promise that will be resolved when the next render completes.
+     * Used for tracking asynchronous rendering.
+     */
     #setUpdatePromise() {
         this.#updateComplete = new Promise((resolve) => {
             this.#updateResolver = resolve;
             this.#hasPendingUpdatePromise = true;
         });
     }
+    /**
+     * Resolves the update promise if one is pending, indicating that rendering has finished.
+     */
     resolveUpdatePromise() {
         if (!this.#hasPendingUpdatePromise) {
             return;
@@ -88,5 +106,30 @@ export class Renderer {
             resolver();
         }
     }
+    /**
+     * Renders the given Lit template into the specified root element, setting the host context.
+     *
+     * @param content - The Lit template or `nothing` to render.
+     * @param root - The root HTMLElement to render into.
+     * @param host - The host object for Lit's context (usually the Application or Activity).
+     */
+    _render(content, root, host) {
+        const litPart = root;
+        if (litPart._$litPart$ && litPart._$litPart$.options) {
+            litPart._$litPart$.options.host = host;
+        }
+        render(content, root, { host });
+        this.resolveUpdatePromise();
+    }
+    /**
+     * Removes all child nodes from the given root element.
+     *
+     * Uses `replaceChildren()` for efficient DOM cleanup.
+     * @param root - The root HTMLElement to clear.
+     */
+    _clearRoot(root) {
+        // Using replaceChildren() is a modern and clean way to clear a node's children.
+        root.replaceChildren();
+    }
 }
 //# sourceMappingURL=Renderer.js.map

package/build/src/core/renderer/Renderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Renderer.js","sourceRoot":"","sources":["../../../../src/core/renderer/Renderer.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,cAGX;AAHD,WAAY,cAAc;IACxB,mDAAI,CAAA;IACJ,6DAAS,CAAA;AACX,CAAC,EAHW,cAAc,KAAd,cAAc,QAGzB;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA;AAE1C;;GAEG;AACH,MAAM,OAAgB,QAAQ;IAC5B;;OAEG;IACH,UAAU,GAAuB,IAAI,CAAA;IAErC;;OAEG;IACH,IAAI,cAAc;QAChB,OAAO,IAAI,CAAC,eAAe,CAAA;IAC7B,CAAC;IAED;;;OAGG;IACH,aAAa,CAAC,UAAgC;QAC5C,IAAI,OAAO,UAAU,KAAK,QAAQ,EAAE,CAAC;YACnC,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAc,UAAU,CAAC,CAAA;QACnE,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,UAAU,GAAG,UAAU,CAAA;QAC9B,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,aAAa;QACX,IAAI,IAAI,CAAC,eAAe,KAAK,cAAc,CAAC,IAAI,EAAE,CAAC;YACjD,kCAAkC;YAClC,OAAM;QACR,CAAC;QACD,IAAI,CAAC,eAAe,GAAG,cAAc,CAAC,SAAS,CAAA;QAC/C,IAAI,CAAC,IAAI,CAAC,wBAAwB,EAAE,CAAC;YACnC,IAAI,CAAC,iBAAiB,EAAE,CAAA;QAC1B,CAAC;QACD,qBAAqB,CAAC,GAAG,EAAE;YACzB,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAA;YAChB,IAAI,CAAC,eAAe,GAAG,cAAc,CAAC,IAAI,CAAA;QAC5C,CAAC,CAAC,CAAA;IACJ,CAAC;IAES,iBAAiB,GAAG,KAAK,CAAA;IAEnC;;;OAGG;IACH,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,iBAAiB,CAAA;IAC/B,CAAC;IAED;;OAEG;IACH,eAAe,GAAG,cAAc,CAAC,IAAI,CAAA;IAErC;;OAEG;IACH,wBAAwB,GAAG,KAAK,CAAA;IAEhC;;OAEG;IACH,eAAe,CAAgB;IAE/B;;OAEG;IACH,eAAe,CAAc;IAO7B,iBAAiB;QACf,IAAI,CAAC,eAAe,GAAG,IAAI,OAAO,CAAO,CAAC,OAAO,EAAE,EAAE;YACnD,IAAI,CAAC,eAAe,GAAG,OAAO,CAAA;YAC9B,IAAI,CAAC,wBAAwB,GAAG,IAAI,CAAA;QACtC,CAAC,CAAC,CAAA;IACJ,CAAC;IAES,oBAAoB;QAC5B,IAAI,CAAC,IAAI,CAAC,wBAAwB,EAAE,CAAC;YACnC,OAAM;QACR,CAAC;QACD,IAAI,CAAC,wBAAwB,GAAG,KAAK,CAAA;QACrC,MAAM,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAA;QACrC,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,EAAE,CAAA;QACZ,CAAC;IACH,CAAC;CACF","sourcesContent":["export enum RenderingState {\n  Idle,\n  Rendering,\n}\n\nexport const renderFn = Symbol('renderFn')\n\n/**\n * A class that manages rendering of the application screen.\n */\nexport abstract class Renderer {\n  /**\n   * The root element where the activity or fragment will be rendered.\n   */\n  renderRoot: HTMLElement | null = null\n\n  /**\n   * @type A promise resolved when the render finished.\n   */\n  get updateComplete(): Promise<void> | undefined {\n    return this.#updateComplete\n  }\n\n  /**\n   * Sets the root element where the application will be rendered.\n   * @param renderRoot The root element or its selector.\n   */\n  setRenderRoot(renderRoot: HTMLElement | string): void {\n    if (typeof renderRoot === 'string') {\n      this.renderRoot = document.querySelector<HTMLElement>(renderRoot)\n    } else {\n      this.renderRoot = renderRoot\n    }\n  }\n\n  /**\n   * Requests an update of the application UI. This will call the `render()` method\n   * and update the DOM.\n   */\n  requestUpdate(): void {\n    if (this.#renderingState !== RenderingState.Idle) {\n      // An update is already scheduled.\n      return\n    }\n    this.#renderingState = RenderingState.Rendering\n    if (!this.#hasPendingUpdatePromise) {\n      this.#setUpdatePromise()\n    }\n    requestAnimationFrame(() => {\n      this[renderFn]()\n      this.#renderingState = RenderingState.Idle\n    })\n  }\n\n  protected firstRenderedFlag = false\n\n  /**\n   * Determines whether the initial render had run and the `onFirstRender()`\n   * function was called.\n   */\n  get firstRendered(): boolean {\n    return this.firstRenderedFlag\n  }\n\n  /**\n   * A flag used to determine in which rendering state the UI is.\n   */\n  #renderingState = RenderingState.Idle\n\n  /**\n   * A flag that helps to determine whether the `updateComplete` is setup.\n   */\n  #hasPendingUpdatePromise = false\n\n  /**\n   * A hidden value for the `updateComplete` getter.\n   */\n  #updateComplete?: Promise<void>\n\n  /**\n   * The resolver to call when the update completes.\n   */\n  #updateResolver?: () => void;\n\n  /**\n   * Manages the rendering of the UI.\n   */\n  abstract [renderFn](): void\n\n  #setUpdatePromise(): void {\n    this.#updateComplete = new Promise<void>((resolve) => {\n      this.#updateResolver = resolve\n      this.#hasPendingUpdatePromise = true\n    })\n  }\n\n  protected resolveUpdatePromise(): void {\n    if (!this.#hasPendingUpdatePromise) {\n      return\n    }\n    this.#hasPendingUpdatePromise = false\n    const resolver = this.#updateResolver\n    if (resolver) {\n      resolver()\n    }\n  }\n}\n"]}
+{"version":3,"file":"Renderer.js","sourceRoot":"","sources":["../../../../src/core/renderer/Renderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAoD,MAAM,KAAK,CAAA;AAE9E,MAAM,CAAN,IAAY,cAGX;AAHD,WAAY,cAAc;IACxB,mDAAI,CAAA;IACJ,6DAAS,CAAA;AACX,CAAC,EAHW,cAAc,KAAd,cAAc,QAGzB;AAED;;GAEG;AACH,MAAM,OAAgB,QAAQ;IAC5B;;OAEG;IACH,UAAU,GAAuB,IAAI,CAAA;IAErC;;OAEG;IACH,IAAI,cAAc;QAChB,OAAO,IAAI,CAAC,eAAe,CAAA;IAC7B,CAAC;IAED;;;;;OAKG;IACH,aAAa,CAAC,UAAgC;QAC5C,IAAI,OAAO,UAAU,KAAK,QAAQ,EAAE,CAAC;YACnC,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAc,UAAU,CAAC,CAAA;QACnE,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,UAAU,GAAG,UAAU,CAAA;QAC9B,CAAC;IACH,CAAC;IAED;;;;;OAKG;IACH,aAAa;QACX,IAAI,IAAI,CAAC,eAAe,KAAK,cAAc,CAAC,IAAI,EAAE,CAAC;YACjD,kCAAkC;YAClC,OAAM;QACR,CAAC;QACD,IAAI,CAAC,eAAe,GAAG,cAAc,CAAC,SAAS,CAAA;QAC/C,IAAI,CAAC,IAAI,CAAC,wBAAwB,EAAE,CAAC;YACnC,IAAI,CAAC,iBAAiB,EAAE,CAAA;QAC1B,CAAC;QACD,qBAAqB,CAAC,GAAG,EAAE;YACzB,IAAI,CAAC,QAAQ,EAAE,CAAA;YACf,IAAI,CAAC,eAAe,GAAG,cAAc,CAAC,IAAI,CAAA;QAC5C,CAAC,CAAC,CAAA;IACJ,CAAC;IAES,iBAAiB,GAAG,KAAK,CAAA;IAEnC;;OAEG;IACH,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,iBAAiB,CAAA;IAC/B,CAAC;IAED;;OAEG;IACH,eAAe,GAAG,cAAc,CAAC,IAAI,CAAA;IAErC;;;;OAIG;IACH,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,eAAe,CAAA;IAC7B,CAAC;IAED;;OAEG;IACH,wBAAwB,GAAG,KAAK,CAAA;IAEhC;;OAEG;IACH,eAAe,CAAgB;IAE/B;;OAEG;IACH,eAAe,CAAa;IAS5B;;;OAGG;IACH,iBAAiB;QACf,IAAI,CAAC,eAAe,GAAG,IAAI,OAAO,CAAO,CAAC,OAAO,EAAE,EAAE;YACnD,IAAI,CAAC,eAAe,GAAG,OAAO,CAAA;YAC9B,IAAI,CAAC,wBAAwB,GAAG,IAAI,CAAA;QACtC,CAAC,CAAC,CAAA;IACJ,CAAC;IAED;;OAEG;IACO,oBAAoB;QAC5B,IAAI,CAAC,IAAI,CAAC,wBAAwB,EAAE,CAAC;YACnC,OAAM;QACR,CAAC;QACD,IAAI,CAAC,wBAAwB,GAAG,KAAK,CAAA;QACrC,MAAM,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAA;QACrC,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,EAAE,CAAA;QACZ,CAAC;IACH,CAAC;IAED;;;;;;OAMG;IACO,OAAO,CAAC,OAAwC,EAAE,IAAiB,EAAE,IAAY;QACzF,MAAM,OAAO,GAAG,IAA+C,CAAA;QAC/D,IAAI,OAAO,CAAC,UAAU,IAAI,OAAO,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC;YACrD,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,GAAG,IAAI,CAAA;QACxC,CAAC;QACD,MAAM,CAAC,OAAO,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,CAAA;QAC/B,IAAI,CAAC,oBAAoB,EAAE,CAAA;IAC7B,CAAC;IAED;;;;;OAKG;IACO,UAAU,CAAC,IAAiB;QACpC,gFAAgF;QAChF,IAAI,CAAC,eAAe,EAAE,CAAA;IACxB,CAAC;CACF","sourcesContent":["import { render, type RootPart, type TemplateResult, type nothing } from 'lit'\n\nexport enum RenderingState {\n  Idle,\n  Rendering,\n}\n\n/**\n * A class that manages rendering of the application screen.\n */\nexport abstract class Renderer {\n  /**\n   * The root element where the activity or fragment will be rendered.\n   */\n  renderRoot: HTMLElement | null = null\n\n  /**\n   * @type A promise resolved when the render finished.\n   */\n  get updateComplete(): Promise<void> | undefined {\n    return this.#updateComplete\n  }\n\n  /**\n   * Sets the root element where the application or activity will be rendered.\n   *\n   * @param renderRoot - The root element or a CSS selector string for the element.\n   * If a string is provided, it will be queried from the document.\n   */\n  setRenderRoot(renderRoot: HTMLElement | string): void {\n    if (typeof renderRoot === 'string') {\n      this.renderRoot = document.querySelector<HTMLElement>(renderRoot)\n    } else {\n      this.renderRoot = renderRoot\n    }\n  }\n\n  /**\n   * Requests an update of the UI. Schedules a render if one is not already pending.\n   *\n   * This will call the `renderer()` method and update the DOM in the next animation frame.\n   * Ensures only one render is scheduled at a time.\n   */\n  requestUpdate(): void {\n    if (this.#renderingState !== RenderingState.Idle) {\n      // An update is already scheduled.\n      return\n    }\n    this.#renderingState = RenderingState.Rendering\n    if (!this.#hasPendingUpdatePromise) {\n      this.#setUpdatePromise()\n    }\n    requestAnimationFrame(() => {\n      this.renderer()\n      this.#renderingState = RenderingState.Idle\n    })\n  }\n\n  protected firstRenderedFlag = false\n\n  /**\n   * Indicates whether the initial render has occurred and `onFirstRender()` was called.\n   */\n  get firstRendered(): boolean {\n    return this.firstRenderedFlag\n  }\n\n  /**\n   * A flag used to determine in which rendering state the UI is.\n   */\n  #renderingState = RenderingState.Idle\n\n  /**\n   * Returns the current rendering state.\n   *\n   * @returns The current rendering state.\n   */\n  get state(): RenderingState {\n    return this.#renderingState\n  }\n\n  /**\n   * A flag that helps to determine whether the `updateComplete` is setup.\n   */\n  #hasPendingUpdatePromise = false\n\n  /**\n   * A hidden value for the `updateComplete` getter.\n   */\n  #updateComplete?: Promise<void>\n\n  /**\n   * The resolver to call when the update completes.\n   */\n  #updateResolver?: () => void\n\n  /**\n   * Abstract method that must be implemented by subclasses to perform the actual rendering logic.\n   *\n   * Called by `requestUpdate()` when a render is scheduled.\n   */\n  protected abstract renderer(): void\n\n  /**\n   * Sets up the promise that will be resolved when the next render completes.\n   * Used for tracking asynchronous rendering.\n   */\n  #setUpdatePromise(): void {\n    this.#updateComplete = new Promise<void>((resolve) => {\n      this.#updateResolver = resolve\n      this.#hasPendingUpdatePromise = true\n    })\n  }\n\n  /**\n   * Resolves the update promise if one is pending, indicating that rendering has finished.\n   */\n  protected resolveUpdatePromise(): void {\n    if (!this.#hasPendingUpdatePromise) {\n      return\n    }\n    this.#hasPendingUpdatePromise = false\n    const resolver = this.#updateResolver\n    if (resolver) {\n      resolver()\n    }\n  }\n\n  /**\n   * Renders the given Lit template into the specified root element, setting the host context.\n   *\n   * @param content - The Lit template or `nothing` to render.\n   * @param root - The root HTMLElement to render into.\n   * @param host - The host object for Lit's context (usually the Application or Activity).\n   */\n  protected _render(content: TemplateResult | typeof nothing, root: HTMLElement, host: object): void {\n    const litPart = root as HTMLElement & { _$litPart$?: RootPart }\n    if (litPart._$litPart$ && litPart._$litPart$.options) {\n      litPart._$litPart$.options.host = host\n    }\n    render(content, root, { host })\n    this.resolveUpdatePromise()\n  }\n\n  /**\n   * Removes all child nodes from the given root element.\n   *\n   * Uses `replaceChildren()` for efficient DOM cleanup.\n   * @param root - The root HTMLElement to clear.\n   */\n  protected _clearRoot(root: HTMLElement): void {\n    // Using replaceChildren() is a modern and clean way to clear a node's children.\n    root.replaceChildren()\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.5.31",
+  "version": "0.5.32",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",

package/src/core/renderer/ApplicationRenderer.ts

@@ -1,7 +1,7 @@
-import { nothing, render, type RootPart, type TemplateResult } from 'lit'
+import { nothing, type TemplateResult } from 'lit'
 import type { Application } from '../Application.js'
 import type { Activity } from '../Activity.js'
-import { Renderer, renderFn } from './Renderer.js'
+import { Renderer } from './Renderer.js'
 import { ModalActivity } from '../ModalActivity.js'
 
 export class ApplicationRenderer extends Renderer {
@@ -12,46 +12,42 @@ export class ApplicationRenderer extends Renderer {
     this.renderedFirst = new WeakMap()
   }
 
-  [renderFn](): void {
-    const { app, renderRoot } = this
-    let host: Application | Activity
-    let root: HTMLElement | null = renderRoot
-    let content: TemplateResult | typeof nothing
-    const activity = app.manager.getTopActivity()
-    if (activity) {
-      host = activity
-      if (activity.renderRoot) {
-        root = activity.renderRoot
-      }
-      if (activity instanceof ModalActivity) {
-        content = activity.renderDialog()
-      } else {
-        content = activity.render()
+  private _handleFirstRender(target: Application | Activity, clearRoot: boolean, root: HTMLElement): void {
+    if (!this.renderedFirst.has(target)) {
+      this.renderedFirst.set(target, true)
+      if (clearRoot) {
+        this._clearRoot(root)
       }
+      queueMicrotask(() => target.onFirstRender())
+    }
+  }
+
+  protected renderer(): void {
+    const { app, renderRoot: defaultRenderRoot } = this
+    const activity = app.manager.getTopActivity()
+
+    const host: Application | Activity = activity || app
+    const root: HTMLElement | null = activity?.renderRoot || defaultRenderRoot
+
+    let content: TemplateResult | typeof nothing
+    if (activity instanceof ModalActivity) {
+      content = activity.renderDialog()
     } else {
-      host = app
-      content = app.render()
+      content = host.render()
     }
     if (!root) {
       // eslint-disable-next-line no-console
       console.warn(`The "renderRoot" is not set up.`)
       return
     }
-    if (!this.renderedFirst.has(app)) {
-      this.renderedFirst.set(app, true)
-      Array.from(root.childNodes).forEach((node) => root.parentNode?.removeChild(node))
-      setTimeout(() => app.onFirstRender())
-    }
-    // host might !== app
-    if (!this.renderedFirst.has(host)) {
-      setTimeout(() => host.onFirstRender())
+    this._handleFirstRender(app, true, root)
+    if (!this.firstRendered) {
+      this.firstRenderedFlag = true
     }
-    const litPart = root as HTMLElement & { _$litPart$?: RootPart }
-    if (litPart._$litPart$ && litPart._$litPart$.options) {
-      litPart._$litPart$.options.host = host
+    if (host !== app) {
+      this._handleFirstRender(host, false, root)
     }
-    render(content, root, { host })
-    this.resolveUpdatePromise()
+    this._render(content, root, host)
     this.app.onRendered()
   }
 }

package/src/core/renderer/FragmentRenderer.ts

@@ -1,33 +1,24 @@
-import { render, RenderOptions, RootPart } from 'lit'
 import type { Fragment } from '../Fragment.js'
-import { Renderer, renderFn } from './Renderer.js'
+import { Renderer } from './Renderer.js'
 
 export class FragmentRenderer extends Renderer {
   constructor(protected fragment: Fragment) {
     super()
   }
 
-  [renderFn](): void {
+  protected renderer(): void {
     const root = this.renderRoot
     if (!root) {
       // return quietly. Fragments can be rendered directly.
       return
     }
-    const fragment = this.fragment
-    const host = fragment.getSingleVisibleFragment() || fragment
+    const host = this.fragment.getSingleVisibleFragment() ?? this.fragment
     if (!this.firstRendered) {
       this.firstRenderedFlag = true
       // cleanup any pre-existing content.
-      Array.from(root.childNodes).forEach((node) => root.parentNode?.removeChild(node))
-      setTimeout(() => host.onFirstRender())
+      this._clearRoot(root)
+      queueMicrotask(() => host.onFirstRender())
     }
-    const litPart = root as unknown as HTMLElement & { _$litPart$?: RootPart }
-    if (litPart._$litPart$) {
-      ;(litPart._$litPart$.options as RenderOptions).host = host
-    }
-    // console.log(host, root)
-    render(host.render(), root, { host })
-    this.resolveUpdatePromise()
-    // this.app.onRendered()
+    this._render(host.render(), root, host)
   }
 }

package/src/core/renderer/Renderer.ts

@@ -1,10 +1,10 @@
+import { render, type RootPart, type TemplateResult, type nothing } from 'lit'
+
 export enum RenderingState {
   Idle,
   Rendering,
 }
 
-export const renderFn = Symbol('renderFn')
-
 /**
  * A class that manages rendering of the application screen.
  */
@@ -22,8 +22,10 @@ export abstract class Renderer {
   }
 
   /**
-   * Sets the root element where the application will be rendered.
-   * @param renderRoot The root element or its selector.
+   * Sets the root element where the application or activity will be rendered.
+   *
+   * @param renderRoot - The root element or a CSS selector string for the element.
+   * If a string is provided, it will be queried from the document.
    */
   setRenderRoot(renderRoot: HTMLElement | string): void {
     if (typeof renderRoot === 'string') {
@@ -34,8 +36,10 @@ export abstract class Renderer {
   }
 
   /**
-   * Requests an update of the application UI. This will call the `render()` method
-   * and update the DOM.
+   * Requests an update of the UI. Schedules a render if one is not already pending.
+   *
+   * This will call the `renderer()` method and update the DOM in the next animation frame.
+   * Ensures only one render is scheduled at a time.
    */
   requestUpdate(): void {
     if (this.#renderingState !== RenderingState.Idle) {
@@ -47,7 +51,7 @@ export abstract class Renderer {
       this.#setUpdatePromise()
     }
     requestAnimationFrame(() => {
-      this[renderFn]()
+      this.renderer()
       this.#renderingState = RenderingState.Idle
     })
   }
@@ -55,8 +59,7 @@ export abstract class Renderer {
   protected firstRenderedFlag = false
 
   /**
-   * Determines whether the initial render had run and the `onFirstRender()`
-   * function was called.
+   * Indicates whether the initial render has occurred and `onFirstRender()` was called.
    */
   get firstRendered(): boolean {
     return this.firstRenderedFlag
@@ -67,6 +70,15 @@ export abstract class Renderer {
    */
   #renderingState = RenderingState.Idle
 
+  /**
+   * Returns the current rendering state.
+   *
+   * @returns The current rendering state.
+   */
+  get state(): RenderingState {
+    return this.#renderingState
+  }
+
   /**
    * A flag that helps to determine whether the `updateComplete` is setup.
    */
@@ -80,13 +92,19 @@ export abstract class Renderer {
   /**
    * The resolver to call when the update completes.
    */
-  #updateResolver?: () => void;
+  #updateResolver?: () => void
 
   /**
-   * Manages the rendering of the UI.
+   * Abstract method that must be implemented by subclasses to perform the actual rendering logic.
+   *
+   * Called by `requestUpdate()` when a render is scheduled.
    */
-  abstract [renderFn](): void
+  protected abstract renderer(): void
 
+  /**
+   * Sets up the promise that will be resolved when the next render completes.
+   * Used for tracking asynchronous rendering.
+   */
   #setUpdatePromise(): void {
     this.#updateComplete = new Promise<void>((resolve) => {
       this.#updateResolver = resolve
@@ -94,6 +112,9 @@ export abstract class Renderer {
     })
   }
 
+  /**
+   * Resolves the update promise if one is pending, indicating that rendering has finished.
+   */
   protected resolveUpdatePromise(): void {
     if (!this.#hasPendingUpdatePromise) {
       return
@@ -104,4 +125,31 @@ export abstract class Renderer {
       resolver()
     }
   }
+
+  /**
+   * Renders the given Lit template into the specified root element, setting the host context.
+   *
+   * @param content - The Lit template or `nothing` to render.
+   * @param root - The root HTMLElement to render into.
+   * @param host - The host object for Lit's context (usually the Application or Activity).
+   */
+  protected _render(content: TemplateResult | typeof nothing, root: HTMLElement, host: object): void {
+    const litPart = root as HTMLElement & { _$litPart$?: RootPart }
+    if (litPart._$litPart$ && litPart._$litPart$.options) {
+      litPart._$litPart$.options.host = host
+    }
+    render(content, root, { host })
+    this.resolveUpdatePromise()
+  }
+
+  /**
+   * Removes all child nodes from the given root element.
+   *
+   * Uses `replaceChildren()` for efficient DOM cleanup.
+   * @param root - The root HTMLElement to clear.
+   */
+  protected _clearRoot(root: HTMLElement): void {
+    // Using replaceChildren() is a modern and clean way to clear a node's children.
+    root.replaceChildren()
+  }
 }

package/test/core/renderer.spec.ts

@@ -0,0 +1,113 @@
+import { html } from 'lit'
+import { assert, nextFrame } from '@open-wc/testing'
+import sinon from 'sinon'
+import { ApplicationRenderer } from '../../src/core/renderer/ApplicationRenderer.js'
+import { type Application } from '../../src/core/Application.js'
+import { FragmentRenderer } from '../../src/core/renderer/FragmentRenderer.js'
+import { Renderer } from '../../src/core/renderer/Renderer.js'
+import { type Fragment } from '../../src/core/Fragment.js'
+
+describe('Renderer', () => {
+  class TestRenderer extends Renderer {
+    public renderCalled = false
+    public renderArgs: unknown[] = []
+    protected renderer(): void {
+      this.renderCalled = true
+      // eslint-disable-next-line prefer-rest-params
+      this.renderArgs = [...arguments]
+      this.resolveUpdatePromise()
+    }
+  }
+
+  it('should set renderRoot from HTMLElement', () => {
+    const el = document.createElement('div')
+    const renderer = new TestRenderer()
+    renderer.setRenderRoot(el)
+    assert.strictEqual(renderer.renderRoot, el)
+  })
+
+  it('should set renderRoot from selector', () => {
+    const el = document.createElement('div')
+    el.id = 'test-root'
+    document.body.appendChild(el)
+    const renderer = new TestRenderer()
+    renderer.setRenderRoot('#test-root')
+    assert.strictEqual(renderer.renderRoot, el)
+    document.body.removeChild(el)
+  })
+
+  it('should call renderer() on requestUpdate()', () => {
+    const renderer = new TestRenderer()
+    const spy = sinon.spy(renderer as unknown as { renderer: () => void }, 'renderer')
+    renderer.requestUpdate()
+    // Wait for animation frame
+    return new Promise<void>((resolve) => {
+      requestAnimationFrame(() => {
+        assert.isTrue(spy.calledOnce)
+        resolve()
+      })
+    })
+  })
+
+  it('should not schedule multiple renders if already rendering', async () => {
+    const renderer = new TestRenderer()
+    renderer.requestUpdate()
+    const spy = sinon.spy(renderer as unknown as { renderer: () => void }, 'renderer')
+    renderer.requestUpdate()
+    assert.isTrue(spy.notCalled)
+  })
+
+  it('should clear root with _clearRoot()', () => {
+    const el = document.createElement('div')
+    el.appendChild(document.createElement('span'))
+    const renderer = new TestRenderer()
+    renderer['_clearRoot'](el)
+    assert.strictEqual(el.childNodes.length, 0)
+  })
+
+  it('should resolve updateComplete after _render()', async () => {
+    const el = document.createElement('div')
+    const renderer = new TestRenderer()
+    renderer.setRenderRoot(el)
+    renderer.requestUpdate()
+    await renderer.updateComplete
+    assert.isFalse(renderer.firstRendered) // firstRenderedFlag is not set in TestRenderer
+  })
+})
+
+describe('ApplicationRenderer', () => {
+  it('should call _handleFirstRender and _render', async () => {
+    const app = {
+      onFirstRender: sinon.spy(),
+      onRendered: sinon.spy(),
+      manager: { getTopActivity: () => null },
+      render: () => html`<div>app</div>`,
+    }
+    const renderer = new ApplicationRenderer(app as unknown as Application)
+    const root = document.createElement('div')
+    renderer.setRenderRoot(root)
+    const spyRender = sinon.spy(renderer as unknown as { _render: () => void }, '_render')
+    renderer['renderer']()
+    await nextFrame()
+    assert.isTrue(app.onFirstRender.called, 'onFirstRender should be called')
+    assert.isTrue(app.onRendered.called, 'onRendered should be called')
+    assert.isTrue(spyRender.called, '_render should be called')
+  })
+})
+
+describe('FragmentRenderer', () => {
+  it('should call _clearRoot and _render on first render', async () => {
+    const fragment = {
+      getSingleVisibleFragment: () => null,
+      render: () => html`<div>fragment</div>`,
+      onFirstRender: sinon.spy(),
+    }
+    const renderer = new FragmentRenderer(fragment as unknown as Fragment)
+    const root = document.createElement('div')
+    renderer.setRenderRoot(root)
+    renderer['renderer']()
+    await nextFrame()
+    assert.isTrue(fragment.onFirstRender.called, 'onFirstRender should be called')
+    assert.strictEqual(root.childElementCount, 1, 'Root should have one child after rendering')
+  })
+})