From c128609963df0aba508f239799ef8c52ea066c40 Mon Sep 17 00:00:00 2001
From: Ali Mihandoost <ali.mihandoost@gmail.com>
Date: Sun, 16 Jul 2023 12:38:35 +0330
Subject: [PATCH 1/3] feat(style): add new color h260

---
 ui/style/palettes/h260.css | 113 +++++++++++++++++++++++++++++++++++++
 1 file changed, 113 insertions(+)
 create mode 100644 ui/style/palettes/h260.css

diff --git a/ui/style/palettes/h260.css b/ui/style/palettes/h260.css
new file mode 100644
index 000000000..68081f0c7
--- /dev/null
+++ b/ui/style/palettes/h260.css
@@ -0,0 +1,113 @@
+@layer base {
+  :root {
+    /* HCT 260/48 */
+
+    /* primary */
+    --ref-palette-primary0: 0, 0, 0;
+    --ref-palette-primary10: 0, 28, 59;
+    --ref-palette-primary20: 0, 48, 96;
+    --ref-palette-primary25: 0, 59, 115;
+    --ref-palette-primary30: 0, 71, 135;
+    --ref-palette-primary35: 11, 83, 153;
+    --ref-palette-primary40: 34, 95, 166;
+    --ref-palette-primary50: 65, 120, 193;
+    --ref-palette-primary60: 93, 146, 221;
+    --ref-palette-primary70: 121, 173, 250;
+    --ref-palette-primary80: 167, 200, 255;
+    --ref-palette-primary90: 213, 227, 255;
+    --ref-palette-primary95: 235, 241, 255;
+    --ref-palette-primary98: 249, 249, 255;
+    --ref-palette-primary99: 253, 251, 255;
+    --ref-palette-primary100: 255, 255, 255;
+
+    /* secondary */
+    --ref-palette-secondary0: 0, 0, 0;
+    --ref-palette-secondary10: 18, 28, 43;
+    --ref-palette-secondary20: 39, 49, 65;
+    --ref-palette-secondary25: 50, 60, 77;
+    --ref-palette-secondary30: 61, 71, 88;
+    --ref-palette-secondary35: 73, 83, 100;
+    --ref-palette-secondary40: 85, 95, 113;
+    --ref-palette-secondary50: 109, 119, 138;
+    --ref-palette-secondary60: 135, 145, 165;
+    --ref-palette-secondary70: 161, 172, 192;
+    --ref-palette-secondary80: 189, 199, 220;
+    --ref-palette-secondary90: 217, 227, 248;
+    --ref-palette-secondary95: 235, 241, 255;
+    --ref-palette-secondary98: 249, 249, 255;
+    --ref-palette-secondary99: 253, 251, 255;
+    --ref-palette-secondary100: 255, 255, 255;
+
+    /* tertiary */
+    --ref-palette-tertiary0: 0, 0, 0;
+    --ref-palette-tertiary10: 39, 19, 47;
+    --ref-palette-tertiary20: 62, 40, 69;
+    --ref-palette-tertiary25: 73, 51, 81;
+    --ref-palette-tertiary30: 85, 63, 93;
+    --ref-palette-tertiary35: 98, 74, 105;
+    --ref-palette-tertiary40: 110, 86, 118;
+    --ref-palette-tertiary50: 136, 110, 144;
+    --ref-palette-tertiary60: 163, 135, 170;
+    --ref-palette-tertiary70: 190, 162, 198;
+    --ref-palette-tertiary80: 219, 189, 226;
+    --ref-palette-tertiary90: 248, 216, 254;
+    --ref-palette-tertiary95: 254, 235, 255;
+    --ref-palette-tertiary98: 255, 247, 251;
+    --ref-palette-tertiary99: 255, 251, 255;
+    --ref-palette-tertiary100: 255, 255, 255;
+
+    /* neutral */
+    --ref-palette-neutral0: 0, 0, 0;
+    --ref-palette-neutral10: 26, 28, 30;
+    --ref-palette-neutral20: 47, 48, 51;
+    --ref-palette-neutral25: 58, 59, 62;
+    --ref-palette-neutral30: 70, 71, 74;
+    --ref-palette-neutral35: 81, 82, 86;
+    --ref-palette-neutral40: 94, 94, 98;
+    --ref-palette-neutral50: 118, 119, 122;
+    --ref-palette-neutral60: 144, 144, 148;
+    --ref-palette-neutral70: 171, 171, 174;
+    --ref-palette-neutral80: 199, 198, 202;
+    --ref-palette-neutral90: 227, 226, 230;
+    --ref-palette-neutral95: 241, 240, 244;
+    --ref-palette-neutral98: 250, 249, 253;
+    --ref-palette-neutral99: 253, 251, 255;
+    --ref-palette-neutral100: 255, 255, 255;
+
+    /* neutral-variant */
+    --ref-palette-neutral-variant0: 0, 0, 0;
+    --ref-palette-neutral-variant10: 24, 28, 34;
+    --ref-palette-neutral-variant20: 45, 48, 56;
+    --ref-palette-neutral-variant25: 56, 59, 67;
+    --ref-palette-neutral-variant30: 67, 71, 78;
+    --ref-palette-neutral-variant35: 79, 82, 90;
+    --ref-palette-neutral-variant40: 91, 94, 102;
+    --ref-palette-neutral-variant50: 116, 119, 127;
+    --ref-palette-neutral-variant60: 141, 145, 153;
+    --ref-palette-neutral-variant70: 168, 171, 180;
+    --ref-palette-neutral-variant80: 196, 198, 207;
+    --ref-palette-neutral-variant90: 224, 226, 236;
+    --ref-palette-neutral-variant95: 238, 240, 250;
+    --ref-palette-neutral-variant98: 249, 249, 255;
+    --ref-palette-neutral-variant99: 253, 251, 255;
+    --ref-palette-neutral-variant100: 255, 255, 255;
+
+    /* error */
+    --ref-palette-error0: 0, 0, 0;
+    --ref-palette-error10: 65, 0, 2;
+    --ref-palette-error20: 105, 0, 5;
+    --ref-palette-error25: 126, 0, 7;
+    --ref-palette-error30: 147, 0, 10;
+    --ref-palette-error35: 168, 7, 16;
+    --ref-palette-error40: 186, 26, 26;
+    --ref-palette-error50: 222, 55, 48;
+    --ref-palette-error60: 255, 84, 73;
+    --ref-palette-error70: 255, 137, 125;
+    --ref-palette-error80: 255, 180, 171;
+    --ref-palette-error90: 255, 218, 214;
+    --ref-palette-error95: 255, 237, 234;
+    --ref-palette-error98: 255, 248, 247;
+    --ref-palette-error99: 255, 251, 255;
+    --ref-palette-error100: 255, 255, 255;
+  }
+}

From 25c2e33c94529432b3147261caa5c722eb11d50a Mon Sep 17 00:00:00 2001
From: Ali Mihandoost <ali.mihandoost@gmail.com>
Date: Sun, 16 Jul 2023 12:39:06 +0330
Subject: [PATCH 2/3] feat(demo-pwa): new render, build, styles

---
 ui/demo-pwa/esbuild.mjs          |  6 +--
 ui/demo-pwa/res/index.html       |  8 ++--
 ui/demo-pwa/res/play.html        | 67 ++++++++++++++++++++++++++++++++
 ui/demo-pwa/src/alwatr-pwa.css   |  2 -
 ui/demo-pwa/src/alwatr-pwa.ts    |  2 -
 ui/demo-pwa/src/main.css         |  2 +
 ui/demo-pwa/src/main.ts          | 12 ++++++
 ui/demo-pwa/src/ui/alwatr-pwa.ts | 60 ++++++++++++++++++++++++++++
 ui/demo-pwa/src/ui/app.ts        | 59 ----------------------------
 ui/demo-pwa/src/ui/button.ts     | 29 ++++++++++++++
 10 files changed, 177 insertions(+), 70 deletions(-)
 create mode 100644 ui/demo-pwa/res/play.html
 delete mode 100644 ui/demo-pwa/src/alwatr-pwa.css
 delete mode 100644 ui/demo-pwa/src/alwatr-pwa.ts
 create mode 100644 ui/demo-pwa/src/main.css
 create mode 100644 ui/demo-pwa/src/main.ts
 create mode 100644 ui/demo-pwa/src/ui/alwatr-pwa.ts
 delete mode 100644 ui/demo-pwa/src/ui/app.ts
 create mode 100644 ui/demo-pwa/src/ui/button.ts

diff --git a/ui/demo-pwa/esbuild.mjs b/ui/demo-pwa/esbuild.mjs
index 25e789587..275032a5a 100755
--- a/ui/demo-pwa/esbuild.mjs
+++ b/ui/demo-pwa/esbuild.mjs
@@ -21,7 +21,7 @@ const banner = '/* ..:: Alwatr PWA ::.. */\n';
 const srcDir = 'src';
 const resDir = 'res';
 const outDir = 'dist';
-const srcFilename = 'alwatr-pwa';
+const srcFilename = 'main';
 
 const cleanMode = process.argv.includes('--clean');
 const watchMode = process.argv.includes('--watch');
@@ -132,8 +132,8 @@ async function makeHtml() {
   }
 
   htmlContent = htmlContent
-      .replaceAll('alwatr-pwa.css', cssFilename)
-      .replaceAll('alwatr-pwa.js', jsFilename);
+      .replaceAll(`${srcFilename}.css`, cssFilename)
+      .replaceAll(`${srcFilename}.js`, jsFilename);
 
   await copyPromise; // wait to cp done
   await fs.writeFile(`${outDir}/index.html`, htmlContent, {encoding: 'utf-8', flag: 'w'});
diff --git a/ui/demo-pwa/res/index.html b/ui/demo-pwa/res/index.html
index 37ea12b0b..1cf787fe1 100644
--- a/ui/demo-pwa/res/index.html
+++ b/ui/demo-pwa/res/index.html
@@ -13,12 +13,12 @@
   <meta charset="utf-8" />
   <title>Alwatr UI Demo</title>
 
-  <link rel="preload" as="style" href="alwatr-pwa.css" fetchpriority="high" />
-  <link rel="preload" as="script" href="alwatr-pwa.js" fetchpriority="high" crossorigin />
+  <link rel="preload" as="style" href="main.css" fetchpriority="high" />
+  <link rel="preload" as="script" href="main.js" fetchpriority="high" crossorigin />
   <link
     media="print"
     rel="stylesheet"
-    href="alwatr-pwa.css"
+    href="main.css"
     onload="this.media='all';this.onload=null;"
   />
 
@@ -98,7 +98,7 @@
   >
     درحال بارگذاری...
   </div>
-  <script type="module" src="alwatr-pwa.js"></script>
+  <script type="module" src="main.js"></script>
   <noscript>
     <div class="text-titleLarge text-center px-8 py-20">
       <p dir="ltr" class="mb-4">Please enable JavaScript to view this website.</p>
diff --git a/ui/demo-pwa/res/play.html b/ui/demo-pwa/res/play.html
new file mode 100644
index 000000000..58771701d
--- /dev/null
+++ b/ui/demo-pwa/res/play.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="fa-IR" dir="rtl" class="h-full w-full [overscroll-behavior:none]">
+<head>
+  <base href="/" />
+
+  <meta charset="utf-8" />
+  <title>Alwatr UI Playground</title>
+
+  <link rel="stylesheet" href="main.css" />
+
+  <meta name="color-scheme" content="light dark" />
+  <meta name="theme-color" media="(prefers-color-scheme: light)" content="#673ab7" />
+  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#673ab7" />
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=2, user-scalable=yes, viewport-fit=cover"
+  />
+
+  <link rel="shortcut icon" href="image/favicon.ico" />
+  <link rel="manifest" href="manifest.webmanifest" />
+  <!-- Add to home screen for Chrome on Android. Fallback for manifest.json -->
+  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="application-name" content="Alwatr PWA Starter" />
+  <!-- Add to home screen for Safari on iOS -->
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+  <meta name="apple-mobile-web-app-title" content="Alwatr PWA Starter" />
+  <link rel="apple-touch-startup-image" href="image/icon-192.png" />
+  <!-- Home screen icons -->
+  <link rel="apple-touch-icon" href="image/icon-180.png" />
+  <!-- Tile icon for Windows 8 (144x144 + tile color) -->
+  <meta name="msapplication-TileImage" content="image/icon-512.png" />
+  <meta name="msapplication-TileColor" content="#673ab7" />
+  <meta name="msapplication-tap-highlight" content="no" />
+
+  <meta name="description" content="Alwatr Progressive Web Application Demo." />
+  <meta name="twitter:card" content="summary" />
+  <meta name="twitter:site" content="@alidotmd" />
+  <meta property="og:title" content="Alwatr UI Demo" />
+  <meta property="og:type" content="website" />
+  <meta
+    property="og:image"
+    content="https://repository-images.githubusercontent.com/441522257/86c54c14-edda-44cd-a9af-6430ef14a000"
+  />
+  <meta
+    property="og:image:secure_url"
+    content="https://repository-images.githubusercontent.com/441522257/86c54c14-edda-44cd-a9af-6430ef14a000"
+  />
+  <meta property="og:image:type" content="image/png" />
+  <meta property="og:image:width" content="500" />
+  <meta property="og:image:height" content="500" />
+  <meta property="og:image:alt" content="The Alwatr, Made with love for him." />
+  <meta name="og:description" content="Alwatr Progressive Web Application Demo." />
+
+  <link rel="canonical" href="https://demo.alwatr.ir" />
+</head>
+<body
+  class="h-full w-full max-w-full max-h-full m-0 p-0 overflow-clip transform-gpu break-words touch-pan-x touch-pan-y touch-pinch-zoom bg-background font-vazirmatn text-onBackground text-bodyMedium [contain:size_layout_paint_style] [overscroll-behavior:none]"
+>
+  <div
+    id="alwatr_pwa"
+    class="!flex h-full w-full max-w-full max-h-full flex-col flex-nowrap items-stretch overflow-clip [contain:size_layout_paint_style]"
+  >
+    درحال بارگذاری...
+  </div>
+</body>
+</html>
diff --git a/ui/demo-pwa/src/alwatr-pwa.css b/ui/demo-pwa/src/alwatr-pwa.css
deleted file mode 100644
index 6d0ad8dd6..000000000
--- a/ui/demo-pwa/src/alwatr-pwa.css
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '@alwatr/style/main.css';
-@import '@alwatr/style/palettes/h300.css';
diff --git a/ui/demo-pwa/src/alwatr-pwa.ts b/ui/demo-pwa/src/alwatr-pwa.ts
deleted file mode 100644
index 1bf0eab88..000000000
--- a/ui/demo-pwa/src/alwatr-pwa.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import './alwatr-pwa.css';
-import './ui/app.js';
diff --git a/ui/demo-pwa/src/main.css b/ui/demo-pwa/src/main.css
new file mode 100644
index 000000000..d7f2a92bf
--- /dev/null
+++ b/ui/demo-pwa/src/main.css
@@ -0,0 +1,2 @@
+@import '@alwatr/style/main.css';
+@import '@alwatr/style/palettes/h260.css';
diff --git a/ui/demo-pwa/src/main.ts b/ui/demo-pwa/src/main.ts
new file mode 100644
index 000000000..93cdf44a3
--- /dev/null
+++ b/ui/demo-pwa/src/main.ts
@@ -0,0 +1,12 @@
+import {render} from '@alwatr/fract';
+
+import './main.css';
+import {appLogger} from './share/logger.js';
+import {alwatrPwa} from './ui/alwatr-pwa.js';
+import {rootElement} from './ui/root-element.js';
+
+appLogger.logModule?.('main');
+
+rootElement.replaceChildren(); // clean content
+render(alwatrPwa(), rootElement);
+rootElement.removeAttribute('unresolved');
diff --git a/ui/demo-pwa/src/ui/alwatr-pwa.ts b/ui/demo-pwa/src/ui/alwatr-pwa.ts
new file mode 100644
index 000000000..419c361fd
--- /dev/null
+++ b/ui/demo-pwa/src/ui/alwatr-pwa.ts
@@ -0,0 +1,60 @@
+// TODO: rename me to index
+import {AlwatrDynamicDirective, directive, html, type PartInfo} from '@alwatr/fract';
+
+import {alwatrButton} from './button.js';
+import {appLogger} from '../share/logger.js';
+
+export type PageName = 'home' | 'favorites' | 'contact' | 'other' | '_404';
+
+appLogger.logModule?.('app');
+
+// function* renderApp(): unknown {
+//   yield html`${alwatrTopAppBar({
+//     headline: 'Alwatr PWA Demo',
+//   })}`;
+
+//   const main = alwatrObserve(router, (route: RouteContext) => {
+//     const page = <PageName>route.sectionList[0] ?? 'home';
+//     return cache(renderState(page, {
+//       home: () => html`<h1>home2...</h1>`,
+//       favorites: () => html`${alwatrPageTest(page)}`,
+//       other: () => html`${alwatrPageTest(page)}`,
+//       contact: () => html`<h1>call...</h1>`,
+//       _404: () => html`<h1>404!</h1>`,
+//       _default: '_404',
+//     }));
+//   });
+
+//   yield html`<main class="scroll-area">${main}</main>`;
+
+//   yield html`${alwatrNavigationBar({
+//     itemList: [
+//       {icon: icons.home, href: '/home'},
+//       {icon: icons.star, href: '/favorites'},
+//       {icon: icons.triangle, href: '/other'},
+//       {icon: icons.call, href: '/contact'},
+//     ],
+//   })}`;
+// }
+
+export class AlwatrPwaDirective extends AlwatrDynamicDirective {
+  constructor(partInfo: PartInfo) {
+    super(partInfo, '<alwatr-pwa>');
+  }
+
+  render(): unknown {
+    this._logger.logMethod?.('render');
+    return html`
+      <div class="p-10">
+        <h1 class="text-titleMedium text-center">سلام ...</h1>
+        <h1 class="text-titleMedium text-center">سلام ...</h1>
+        ${alwatrButton({label: 'کلید ۱', extendClass: 'text-red-50'})}
+        ${alwatrButton({label: 'پریز ۲', disabled: true})}
+      </div>
+    `;
+  }
+}
+
+// TODO: send app rendered signal
+
+export const alwatrPwa = directive(AlwatrPwaDirective);
diff --git a/ui/demo-pwa/src/ui/app.ts b/ui/demo-pwa/src/ui/app.ts
deleted file mode 100644
index 04edc8aa1..000000000
--- a/ui/demo-pwa/src/ui/app.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-// TODO: rename me to index
-import {alwatrObserve, html, render, cache} from '@alwatr/fract';
-import {router} from '@alwatr/router2';
-import {alwatrNavigationBar} from '@alwatr/ui-kit/navigation-bar2/navigation-bar.js';
-import {alwatrTopAppBar} from '@alwatr/ui-kit/top-app-bar2/top-app-bar.js';
-import {renderState} from '@alwatr/util';
-
-// import './lit-debug.js';
-import {alwatrPageTest} from './page-test.js';
-import {rootElement} from './root-element.js';
-// import '../../../ui-kit/style/theme/color.css';
-// import '../../../ui-kit/style/theme/palette-300.css';
-import {icons} from '../icons.js';
-import {appLogger} from '../share/logger.js';
-
-import type {RouteContext} from '@alwatr/router2';
-
-appLogger.logModule?.('app');
-
-export type PageName = 'home' | 'favorites' | 'contact' | 'other' | '_404';
-
-appLogger.logModule?.('app');
-
-function* alwatrPwa(): unknown {
-  yield html`${alwatrTopAppBar({
-    headline: 'Alwatr PWA Demo',
-  })}`;
-
-  const main = alwatrObserve(router, (route: RouteContext) => {
-    const page = <PageName>route.sectionList[0] ?? 'home';
-    return cache(renderState(page, {
-      home: () => html`<h1>home2...</h1>`,
-      favorites: () => html`${alwatrPageTest(page)}`,
-      other: () => html`${alwatrPageTest(page)}`,
-      contact: () => html`<h1>call...</h1>`,
-      _404: () => html`<h1>404!</h1>`,
-      _default: '_404',
-    }));
-  });
-
-  yield html`<main class="scroll-area">${main}</main>`;
-
-  yield html`${alwatrNavigationBar({
-    itemList: [
-      {icon: icons.home, href: '/home'},
-      {icon: icons.star, href: '/favorites'},
-      {icon: icons.triangle, href: '/other'},
-      {icon: icons.call, href: '/contact'},
-    ],
-  })}`;
-}
-
-rootElement.replaceChildren();
-
-render(alwatrPwa(), rootElement);
-
-rootElement.removeAttribute('unresolved');
-
-// TODO: send app rendered signal
diff --git a/ui/demo-pwa/src/ui/button.ts b/ui/demo-pwa/src/ui/button.ts
new file mode 100644
index 000000000..09b9252a4
--- /dev/null
+++ b/ui/demo-pwa/src/ui/button.ts
@@ -0,0 +1,29 @@
+import {AlwatrDynamicDirective, classMap, directive, html, type PartInfo} from '@alwatr/fract';
+
+export type ButtonOptions = {
+   /**
+   * Label.
+   */
+   label: string,
+
+   disabled?: boolean;
+
+   extendClass?: string
+}
+
+export class AlwatrButtonDirective extends AlwatrDynamicDirective {
+  constructor(partInfo: PartInfo) {
+    super(partInfo, '<alwatr-button>');
+  }
+
+  render(options: ButtonOptions): unknown {
+    this._logger.logMethodArgs?.('render', options);
+    return html`<button
+      class="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-onPrimary
+        rounded-lg bg-primary bg-opacity-90 hover:bg-opacity-100 active:bg-opacity-95 select-none
+        ${classMap({'opacity-25 pointer-events-none': options.disabled === true})}"
+    >${options.label}</button>`;
+  }
+}
+
+export const alwatrButton = directive(AlwatrButtonDirective);

From a1384b5977c326bc9585fce69de1a2232072ecbf Mon Sep 17 00:00:00 2001
From: Ali Mihandoost <ali.mihandoost@gmail.com>
Date: Sun, 16 Jul 2023 12:46:55 +0330
Subject: [PATCH 3/3] refactor(demo-pwa): better handle root element

---
 ui/demo-pwa/src/main.ts            |  9 ++++-----
 ui/demo-pwa/src/ui/alwatr-pwa.ts   |  7 ++++++-
 ui/demo-pwa/src/ui/root-element.ts | 10 ----------
 3 files changed, 10 insertions(+), 16 deletions(-)
 delete mode 100644 ui/demo-pwa/src/ui/root-element.ts

diff --git a/ui/demo-pwa/src/main.ts b/ui/demo-pwa/src/main.ts
index 93cdf44a3..4228faf2e 100644
--- a/ui/demo-pwa/src/main.ts
+++ b/ui/demo-pwa/src/main.ts
@@ -2,11 +2,10 @@ import {render} from '@alwatr/fract';
 
 import './main.css';
 import {appLogger} from './share/logger.js';
-import {alwatrPwa} from './ui/alwatr-pwa.js';
-import {rootElement} from './ui/root-element.js';
+import {alwatrPwa, alwatrPwaContainer} from './ui/alwatr-pwa.js';
 
 appLogger.logModule?.('main');
 
-rootElement.replaceChildren(); // clean content
-render(alwatrPwa(), rootElement);
-rootElement.removeAttribute('unresolved');
+alwatrPwaContainer.replaceChildren(); // clean content
+render(alwatrPwa(), alwatrPwaContainer);
+alwatrPwaContainer.removeAttribute('unresolved');
diff --git a/ui/demo-pwa/src/ui/alwatr-pwa.ts b/ui/demo-pwa/src/ui/alwatr-pwa.ts
index 419c361fd..96c8d684d 100644
--- a/ui/demo-pwa/src/ui/alwatr-pwa.ts
+++ b/ui/demo-pwa/src/ui/alwatr-pwa.ts
@@ -46,7 +46,6 @@ export class AlwatrPwaDirective extends AlwatrDynamicDirective {
     this._logger.logMethod?.('render');
     return html`
       <div class="p-10">
-        <h1 class="text-titleMedium text-center">سلام ...</h1>
         <h1 class="text-titleMedium text-center">سلام ...</h1>
         ${alwatrButton({label: 'کلید ۱', extendClass: 'text-red-50'})}
         ${alwatrButton({label: 'پریز ۲', disabled: true})}
@@ -58,3 +57,9 @@ export class AlwatrPwaDirective extends AlwatrDynamicDirective {
 // TODO: send app rendered signal
 
 export const alwatrPwa = directive(AlwatrPwaDirective);
+
+export const alwatrPwaContainer = document.getElementById('alwatr_pwa')!;
+
+if (alwatrPwaContainer === null) {
+  throw new Error('Cannot find `<div id="alwatr_pwa">` element!');
+}
diff --git a/ui/demo-pwa/src/ui/root-element.ts b/ui/demo-pwa/src/ui/root-element.ts
deleted file mode 100644
index b412fd3a6..000000000
--- a/ui/demo-pwa/src/ui/root-element.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-const rootId = 'alwatr_pwa';
-
-const _makeRootElement = (): HTMLDivElement => {
-  const el = document.createElement('div');
-  el.id = rootId;
-  document.body.append(el);
-  return el;
-};
-
-export const rootElement = document.getElementById(rootId) ?? _makeRootElement();