diff --git a/.eslintrc.js b/.eslintrc.js
index 76f220db..deac7e89 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,6 +1,6 @@
 module.exports = {
   root: true,
-  extends: 'airbnb-base',
+  extends: ['airbnb-base', 'prettier'],
   env: {
     browser: true,
   },
@@ -11,11 +11,18 @@ module.exports = {
     requireConfigFile: false,
   },
   rules: {
+    'max-len': [2, 160, 2, { ignoreUrls: true }],
+    'import/no-unresolved': [2, { commonjs: true }],
+    'array-callback-return': 'off', // due to prettier
+    'class-methods-use-this': 'off', // due to prettier
     // allow reassigning param
     'no-param-reassign': [2, { props: false }],
     'linebreak-style': ['error', 'unix'],
-    'import/extensions': ['error', {
-      js: 'always',
-    }],
+    'import/extensions': [
+      'error',
+      {
+        js: 'always',
+      },
+    ],
   },
 };
diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100755
index 00000000..75fac8e1
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run lint
diff --git a/.stylelintrc.json b/.stylelintrc.json
index 17c74ed1..b70de4de 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -1,3 +1,6 @@
 {
-  "extends": ["stylelint-config-standard"]
+  "extends": ["stylelint-config-standard"],
+  "rules": {
+    "no-descending-specificity": null
+  }
 }
\ No newline at end of file
diff --git a/README.md b/README.md
index 80fdb9d9..903379e0 100644
--- a/README.md
+++ b/README.md
@@ -23,3 +23,7 @@ npm run lint:fix
 1. Install the [AEM CLI](https://github.com/adobe/helix-cli): `npm install -g @adobe/aem-cli`
 1. Start AEM EDS Proxy: `aem up` (opens your browser at `http://localhost:3000`)
 1. Open the `henkel-raqn-guide` directory in your favorite IDE and start coding :)
+
+## Documentation
+
+[Documentation](docs/readme.md)
\ No newline at end of file
diff --git a/blocks/accordion/accordion.css b/blocks/accordion/accordion.css
new file mode 100644
index 00000000..9774cf74
--- /dev/null
+++ b/blocks/accordion/accordion.css
@@ -0,0 +1,78 @@
+raqn-accordion {
+  --scope-icon-size: 1em;
+  --accordion-background: var(--scope-background, black);
+  --accordion-color: var(--scope-color, white);
+
+  background: var(--accordion-background);
+  color: var(--accordion-color);
+  margin: var(--scope-margin, 0);
+  padding: var(--scope-padding, 0);
+  display: grid;
+}
+
+raqn-accordion raqn-icon {
+  align-self: end;
+  transform: rotate(90deg);
+  transition: transform 0.2s ease-in-out;
+}
+
+raqn-accordion accordion-control.active raqn-icon {
+  transform: rotate(270deg);
+}
+
+.accordion-control {
+  border-block-start: var(--scope-border-block-start, none);
+  border-inline-start: var(--scope-border-inline-start, none);
+  border-inline-end: var(--scope-border-inline-end, none);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  width: 100%;
+}
+
+.accordion-control:first-child {
+  border-block-start: none;
+}
+
+.accordion-control > * {
+  --scope-headings-color: var(--scope-color, black);
+  --scope-hover-color: var(--scope-accent-color, gray);
+
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  min-width: 100%;
+}
+
+.accordion-control:hover {
+  --scope-color: var(--scope-headings-color);
+}
+
+.accordion-content {
+  display: grid;
+  max-height: 0;
+  overflow: hidden;
+  opacity: 0;
+  border-block-end: var(--scope-border-block-end, none);
+  border-block-start: var(--scope-border-block-start, none);
+  margin-block-end: -1px;
+  transition:
+    max-height 0.5s ease-in-out,
+    opacity 0.5s ease-in-out;
+}
+
+.accordion-content:last-child {
+  border-block-end: none;
+}
+
+.accordion-content.active {
+  opacity: 1;
+  grid-template-rows: 1fr;
+  max-height: 100vw;
+}
+
+.accordion-content-wrapper {
+  margin-block: 1em;
+  display: grid;
+}
diff --git a/blocks/accordion/accordion.js b/blocks/accordion/accordion.js
new file mode 100644
index 00000000..f3b0b0eb
--- /dev/null
+++ b/blocks/accordion/accordion.js
@@ -0,0 +1,81 @@
+import Column from '../column/column.js';
+
+export default class Accordion extends Column {
+  dependencies = ['icon'];
+
+  ready() {
+    this.setAttribute('role', 'navigation');
+    let children = Array.from(this.children);
+    children = children.map((child) => {
+      if (child.tagName !== 'DIV') {
+        const div = document.createElement('div');
+        div.append(child);
+        this.append(div);
+        return div;
+      }
+      return child;
+    });
+    // console.log(children)
+    this.setupControls(children.filter((_, ind) => ind % 2 === 0));
+    this.setupContent(children.filter((_, ind) => ind % 2 === 1));
+  }
+
+  setupControls(controls) {
+    controls.forEach((control, index) => {
+      const icon = document.createElement('raqn-icon');
+      icon.setAttribute('icon', 'chevron-right');
+      const children = Array.from(control.children);
+      if (children.length === 0) {
+        const child = document.createElement('span');
+        child.textContent = control.textContent;
+        control.innerHTML = '';
+        control.append(child);
+      }
+      control.children[0].append(icon);
+      control.setAttribute('role', 'button');
+      control.setAttribute('aria-expanded', 'false');
+      control.setAttribute('tabindex', '0');
+      control.classList.add('accordion-control');
+      control.id = `accordion-${this.id}-${index}`;
+      control.addEventListener('click', () => this.toggleControl(control));
+      control.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          this.toggleControl(control);
+        }
+      });
+    });
+  }
+
+  toggleControl(control) {
+    const content = control.nextElementSibling;
+    if (content) {
+      content.classList.toggle('active');
+      control.classList.toggle('active');
+      control.setAttribute(
+        'aria-expanded',
+        content.classList.contains('active'),
+      );
+      content.setAttribute(
+        'aria-hidden',
+        !content.classList.contains('active'),
+      );
+    }
+  }
+
+  setupContent(contents) {
+    contents.forEach((content) => {
+      const internal = content.children;
+      const wrapper = document.createElement('div');
+      wrapper.classList.add('accordion-content-wrapper');
+      wrapper.append(...internal);
+      content.append(wrapper);
+      content.setAttribute('role', 'region');
+      content.setAttribute('aria-hidden', true);
+      content.classList.add('accordion-content');
+      content.setAttribute(
+        'aria-labelledby',
+        content.previousElementSibling.id,
+      );
+    });
+  }
+}
diff --git a/blocks/breadcrumbs/breadcrumbs.css b/blocks/breadcrumbs/breadcrumbs.css
new file mode 100644
index 00000000..f53ea6f9
--- /dev/null
+++ b/blocks/breadcrumbs/breadcrumbs.css
@@ -0,0 +1,40 @@
+raqn-breadcrumbs {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 10px;
+  align-items: center;
+  padding: 10px 0;
+  background: var(--scope-background, transparent);
+  color: var(--scope-color, #000);
+}
+
+raqn-breadcrumbs ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+}
+
+raqn-breadcrumbs ul li {
+  margin-inline-end: 1em;
+  font-weight: bold;
+}
+
+raqn-breadcrumbs ul li a {
+  color: var(--scope-color);
+  font-weight: normal;
+}
+
+@media screen and (max-width: 768px) {
+  raqn-breadcrumbs ul li {
+    display: none;
+  }
+
+  raqn-breadcrumbs ul li.separator:has(+ li:last-child) {
+    display: block;
+  }
+
+  raqn-breadcrumbs ul li:last-child {
+    display: block;
+  }
+}
diff --git a/blocks/breadcrumbs/breadcrumbs.js b/blocks/breadcrumbs/breadcrumbs.js
new file mode 100644
index 00000000..fe3b3083
--- /dev/null
+++ b/blocks/breadcrumbs/breadcrumbs.js
@@ -0,0 +1,31 @@
+import ComponentBase from '../../scripts/component-base.js';
+
+export default class BreadCrumbs extends ComponentBase {
+  capitalize(string) {
+    return string
+      .split('-')
+      .map((str) => str.charAt(0).toUpperCase() + str.slice(1))
+      .join(' ');
+  }
+
+  ready() {
+    this.classList.add('full-width');
+    this.classList.add('breadcrumbs');
+    this.path = window.location.pathname.split('/');
+    this.innerHTML = `
+    <ul>
+        ${this.path
+          .map((path, index) => {
+            if (path === '') {
+              return `<li><a href="/${path}">Home</a></li>`;
+            }
+            if (index === this.path.length - 1) {
+              return `<li>${this.capitalize(path)}</li>`;
+            }
+            const href = this.path.slice(0, index + 1).join('/');
+            return `<li><a href="${href}">${this.capitalize(path)}</a></li>`;
+          })
+          .join('<li class="separator">›</li>')}
+    </ul>`;
+  }
+}
diff --git a/blocks/button/button.css b/blocks/button/button.css
new file mode 100644
index 00000000..b3b31b2d
--- /dev/null
+++ b/blocks/button/button.css
@@ -0,0 +1,38 @@
+raqn-button {
+  width: 100%;
+  display: grid;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+  justify-items: var(--scope-justify, start);
+}
+
+raqn-button > * {
+  background: var(--scope-accent-background, #000);
+  color: var(--scope-accent-color, #fff);
+  text-transform: none;
+  border-radius: var(--scope-border-radius, 0);
+  border-block-start: var(--scope-border-block-start, 1px solid transparent);
+  border-block-end: var(--scope-border-block-end, 1px solid transparent);
+  border-inline-start: var(--scope-border-inline-start, 1px solid transparent);
+  border-inline-end: var(--scope-border-inline-end, 1px solid transparent);
+  overflow: hidden;
+}
+
+raqn-button > *:hover {
+  background: var(--scope-accent-background-hover, #fff);
+  color: var(--scope-accent-color-hover, #fff);
+  border-color: currentcolor;
+}
+
+raqn-button a {
+  color: var(--scope-accent-color, currentcolor);
+  padding: 10px 20px;
+  text-decoration: none;
+}
+
+raqn-button a:hover,
+raqn-button a:visited,
+raqn-button a:active {
+  text-decoration: none;
+}
diff --git a/blocks/button/button.js b/blocks/button/button.js
new file mode 100644
index 00000000..227717d3
--- /dev/null
+++ b/blocks/button/button.js
@@ -0,0 +1,8 @@
+import Column from '../column/column.js';
+
+export default class Button extends Column {
+  render() {
+    this.setAttribute('role', 'button');
+    this.setAttribute('tabindex', '0');
+  }
+}
diff --git a/blocks/card/card.css b/blocks/card/card.css
new file mode 100644
index 00000000..b3f2c32f
--- /dev/null
+++ b/blocks/card/card.css
@@ -0,0 +1,63 @@
+raqn-card {
+  background: var(--scope-background, transparent);
+  color: var(--scope-color, #fff);
+  display: grid;
+  position: relative;
+  grid-template-columns: var(--card-columns, 1fr);
+  gap: var(--scope-gap, 20px);
+  padding: var(--scope-padding, 20px 0);
+}
+
+raqn-card a {
+  font-size: var(--raqn-font-size-3, 1.2em);
+  font-weight: bold;
+}
+
+raqn-card p a {
+  margin-block: 0;
+}
+
+raqn-card > picture {
+  grid-column: span var(--card-columns, 1fr);
+}
+
+raqn-card > div {
+  position: relative;
+  background: var(--scope-inner-background, transparent);
+  padding: var(--scope-inner-padding, 20px);
+  border-block-start: var(--scope-border-block-start, none);
+  border-block-end: var(--scope-border-block-end, none);
+  border-inline-start: var(--scope-border-inline-start, none);
+  border-inline-end: var(--scope-border-inline-end, none);
+}
+
+raqn-card > div div:last-child > a {
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-start: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  text-indent: -10000px;
+  margin: 0;
+  padding: 0;
+}
+
+raqn-card > div:has(raqn-icon) {
+  padding-block-end: 0;
+  padding-block-end: var(--scope-icon-size, 20px);
+}
+
+raqn-card p:has(raqn-icon) {
+  display: inline-grid;
+}
+
+raqn-card raqn-icon {
+  width: 100%;
+  display: flex;
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-end: 0;
+  box-sizing: border-box;
+  padding: var(--scope-inner-padding, 20px);
+}
diff --git a/blocks/card/card.js b/blocks/card/card.js
new file mode 100644
index 00000000..1933582d
--- /dev/null
+++ b/blocks/card/card.js
@@ -0,0 +1,42 @@
+import ComponentBase from '../../scripts/component-base.js';
+import { eagerImage } from '../../scripts/libs.js';
+
+export default class Card extends ComponentBase {
+  static get observedAttributes() {
+    return ['columns', 'ratio', 'eager', 'background', 'button'];
+  }
+
+  ready() {
+    if (this.getAttribute('button') === 'true') {
+      Array.from(this.querySelectorAll('a')).forEach((a) =>
+        this.convertLink(a),
+      );
+    }
+    this.eager = parseInt(this.getAttribute('eager') || 0, 10);
+    this.ratio = this.getAttribute('ratio') || '4/3';
+    this.style.setProperty('--card-ratio', this.ratio);
+    this.classList.add('inner');
+    this.setupColumns(this.getAttribute('columns'));
+    if (this.eager) {
+      eagerImage(this, this.eager);
+    }
+  }
+
+  convertLink(a) {
+    const button = document.createElement('raqn-button');
+    const content = a.outerHTML;
+    button.innerHTML = content;
+    a.replaceWith(button);
+  }
+
+  setupColumns(columns) {
+    if (!columns) {
+      return;
+    }
+    this.columns = parseInt(columns, 10);
+    this.area = Array.from(Array(parseInt(this.columns, 10)))
+      .map(() => '1fr')
+      .join(' ');
+    this.style.setProperty('--card-columns', this.area);
+  }
+}
diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css
deleted file mode 100644
index a0315ede..00000000
--- a/blocks/cards/cards.css
+++ /dev/null
@@ -1,31 +0,0 @@
-.cards > ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  grid-gap: 16px;
-}
-
-.cards > ul > li {
-  border: 1px solid var(--highlight-background-color);
-  background-color: var(--background-color)
-}
-
-.cards .cards-card-body {
-  margin: 16px;
-}
-
-.cards .cards-card-image {
-  line-height: 0;
-}
-
-.cards .cards-card-body > *:first-child {
-  margin-top: 0;
-}
-
-.cards > ul > li img {
-  width: 100%;
-  aspect-ratio: 4 / 3;
-  object-fit: cover;
-}
diff --git a/blocks/cards/cards.js b/blocks/cards/cards.js
deleted file mode 100644
index 717ec302..00000000
--- a/blocks/cards/cards.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { createOptimizedPicture } from '../../scripts/lib-franklin.js';
-
-export default function decorate(block) {
-  /* change to ul, li */
-  const ul = document.createElement('ul');
-  [...block.children].forEach((row) => {
-    const li = document.createElement('li');
-    while (row.firstElementChild) li.append(row.firstElementChild);
-    [...li.children].forEach((div) => {
-      if (div.children.length === 1 && div.querySelector('picture')) div.className = 'cards-card-image';
-      else div.className = 'cards-card-body';
-    });
-    ul.append(li);
-  });
-  ul.querySelectorAll('img').forEach((img) => img.closest('picture').replaceWith(createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }])));
-  block.textContent = '';
-  block.append(ul);
-}
diff --git a/blocks/column/column.css b/blocks/column/column.css
new file mode 100644
index 00000000..1879b40e
--- /dev/null
+++ b/blocks/column/column.css
@@ -0,0 +1,3 @@
+raqn-column {
+  margin: var(--scope-margin, 0);
+}
diff --git a/blocks/column/column.js b/blocks/column/column.js
new file mode 100644
index 00000000..d4a72505
--- /dev/null
+++ b/blocks/column/column.js
@@ -0,0 +1,84 @@
+import ComponentBase from '../../scripts/component-base.js';
+
+export default class Column extends ComponentBase {
+  static observedAttributes() {
+    return ['position', 'size'];
+  }
+
+  connected() {
+    const content = this.querySelectorAll('div > div');
+    // clean up dom structure (div div div div div div) and save the content
+    this.contentChildren = Array.from(content).map((child) => {
+      const {children} = child;
+      const parent = child.parentNode;
+      if (children.length > 0) {
+        child.replaceWith(...children);
+      }
+      return parent;
+    })
+    this.calculateGridTemplateColumns();
+  }
+
+  calculateGridTemplateColumns() {
+    this.position = parseInt(this.getAttribute('position'), 10);
+    this.size = this.getAttribute('size');
+    this.justify = this.getAttribute('justify') || 'stretch';
+    if (this.justify) {
+      this.style.justifyContent = this.justify;
+    }
+    if (this.position) {
+      const parent = this.parentElement;
+      const children = Array.from(parent.children);
+      this.parentElement.classList.add('raqn-grid');
+      let parentGridTemplateColumns = parent.style.getPropertyValue(
+        '--grid-template-columns',
+      );
+      if (!parentGridTemplateColumns) {
+        // we have no grid template columns yet
+        parentGridTemplateColumns = children
+          .map((child, index) => {
+            if (this.position === index + 1) {
+              return this.size || 'auto';
+            }
+            return 'auto';
+          })
+          .join(' ');
+        // set the new grid template columns
+        parent.style.setProperty(
+          '--grid-template-columns',
+          parentGridTemplateColumns,
+        );
+      } else {
+        const { position } = this;
+        const prio = children.indexOf(this) + 1;
+        parentGridTemplateColumns = parentGridTemplateColumns
+          .split(' ')
+          .map((size, i) => {
+            // we have a non standard value for this position
+            const hasValue = size !== 'auto';
+            // we are at the position
+            const isPosition = i + 1 === position;
+            // we are at a position before the prio
+            const isBeforePrio = i + 1 <= prio;
+            // we have a non standard value for this position and we are at the position
+            if (!hasValue && isPosition) {
+              return this.size || 'auto';
+            }
+            // we have a non standard value for this position and we are at a position before the prio
+            if (hasValue && isPosition && isBeforePrio) {
+              return this.size || size;
+            }
+            return size;
+          })
+          .join(' ');
+        // set the new grid template columns
+        parent.style.setProperty(
+          '--grid-template-columns',
+          parentGridTemplateColumns,
+        );
+      }
+      this.style.gridColumn = this.position;
+      this.style.gridRow = 1;
+    }
+  }
+}
diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css
deleted file mode 100644
index 4b09aeea..00000000
--- a/blocks/columns/columns.css
+++ /dev/null
@@ -1,65 +0,0 @@
-.columns > div {
-  display: flex;
-  flex-direction: column;
-}
-
-.columns img {
-  width: 100%;
-}
-
-@media (min-width: 900px) {
-  .columns > div {
-    align-items: center;
-    flex-direction: unset;
-    gap: var(--padding-vertical) var(--padding-horizontal);
-    padding: var(--padding-vertical) var(--padding-horizontal);
-  }
-
-  .columns > div > div:nth-child(1) {
-    flex: var(--column0-flex, 0);
-  }
-
-  .columns > div > div:nth-child(2) {
-    flex: var(--column1-flex, 0);
-  }
-
-  .columns > div > div:nth-child(3) {
-    flex: var(--column2-flex, 0);
-  }
-
-  .columns > div > div:nth-child(4) {
-    flex: var(--column3-flex, 0);
-  }
-
-  .columns > div > div:nth-child(5) {
-    flex: var(--column4-flex, 0);
-  }
-
-  .columns > div > div:nth-child(6) {
-    flex: var(--column5-flex, 0);
-  }
-
-  .columns > div > div:nth-child(7) {
-    flex: var(--column6-flex, 0);
-  }
-
-  .columns > div > div:nth-child(8) {
-    flex: var(--column7-flex, 0);
-  }
-
-  .columns > div > div:nth-child(9) {
-    flex: var(--column8-flex, 0);
-  }
-
-  .columns > div > div:nth-child(10) {
-    flex: var(--column9-flex, 0);
-  }
-
-  .columns > div > div:nth-child(11) {
-    flex: var(--column10-flex, 0);
-  }
-
-  .columns > div > div:nth-child(12) {
-    flex: var(--column11-flex, 0);
-  }
-}
diff --git a/blocks/columns/columns.js b/blocks/columns/columns.js
deleted file mode 100644
index 823c6c18..00000000
--- a/blocks/columns/columns.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import {
-  addCssVariables,
-} from '../../scripts/lib-franklin.js';
-
-export default function decorate(block) {
-  const columns = block.querySelectorAll(':scope > div > div');
-  const columnCount = columns.length;
-  // following line regex matches partition sizes separated by dashes like 1-2-3
-  const columnPartionRegex = /^\d{1,}(?:-\d{1,})*$/;
-  const columnPartions = [...block.classList].find((c) => columnPartionRegex.test(c))?.split('-') || [];
-
-  const variables = {};
-  for (let i = 0; i < columnCount; i += 1) {
-    const partition = columnPartions.length > i ? columnPartions[i] : 1;
-    variables[`column${i}-flex`] = partition;
-  }
-  addCssVariables(block, variables);
-}
diff --git a/blocks/external/external.css b/blocks/external/external.css
new file mode 100644
index 00000000..cfa763db
--- /dev/null
+++ b/blocks/external/external.css
@@ -0,0 +1,7 @@
+raqn-external {
+  display: none;
+}
+
+raqn-external[initialized='true'] {
+  display: block;
+}
diff --git a/blocks/external/external.js b/blocks/external/external.js
new file mode 100644
index 00000000..d7f24168
--- /dev/null
+++ b/blocks/external/external.js
@@ -0,0 +1,23 @@
+import ComponentBase from '../../scripts/component-base.js';
+
+export default class External extends ComponentBase {
+  static get observedAttributes() {
+    return ['external', 'folder'];
+  }
+
+  link = false;
+
+  get external() {
+    const link = this.querySelector('a');
+    if (link) {
+      this.link = link.href;
+    }
+    return this.link;
+  }
+
+  set external(value) {
+    if (value !== '') {
+      this.link = value;
+    }
+  }
+}
diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css
index 19fc5607..7aa0fb17 100644
--- a/blocks/footer/footer.css
+++ b/blocks/footer/footer.css
@@ -1,14 +1,51 @@
 footer {
-  padding: 2rem;
-  background-color: var(--overlay-background-color);
-  font-size: var(--body-font-size-s);
+  background: var(--scope-background-color);
+  width: var(--scope-max-width);
+  margin: 0 auto;
 }
 
-footer .footer {
-  max-width: 1200px;
-  margin: auto;
+raqn-footer {
+  background: var(--scope-background-color);
+  border-top: 1px solid var(--scope-color);
 }
 
-footer .footer p {
-  margin: 0;
-}
\ No newline at end of file
+raqn-footer ul {
+  list-style: none;
+  padding: 0;
+  margin: 20px 0;
+  min-width: 100%;
+}
+
+raqn-footer ul li a {
+  color: var(--scope-color);
+}
+
+@media screen and (min-width: 1024px) {
+  raqn-footer {
+    display: grid;
+    grid-template-columns: auto 20vw;
+  }
+
+  raqn-footer ul li a {
+    padding: 10px 1.2em;
+    border-inline-end: 1px solid var(--scope-color);
+  }
+
+  raqn-footer ul {
+    display: flex;
+    margin: 0;
+  }
+
+  raqn-footer ul li {
+    margin: 2em 0;
+  }
+
+  raqn-footer > *:last-child {
+    justify-self: end;
+    align-self: center;
+  }
+}
+
+raqn-footer ul li:last-child a {
+  border-inline-end: none;
+}
diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js
index ca8c7a68..bedb5839 100644
--- a/blocks/footer/footer.js
+++ b/blocks/footer/footer.js
@@ -1,25 +1,17 @@
-import { readBlockConfig, decorateIcons } from '../../scripts/lib-franklin.js';
+import ComponentBase from '../../scripts/component-base.js';
 
-/**
- * loads and decorates the footer
- * @param {Element} block The footer block element
- */
-export default async function decorate(block) {
-  const cfg = readBlockConfig(block);
-  block.textContent = '';
-
-  // fetch footer content
-  const footerPath = cfg.footer || '/footer';
-  const resp = await fetch(`${footerPath}.plain.html`, window.location.pathname.endsWith('/footer') ? { cache: 'reload' } : {});
-
-  if (resp.ok) {
-    const html = await resp.text();
-
-    // decorate footer DOM
-    const footer = document.createElement('div');
-    footer.innerHTML = html;
+export default class Footer extends ComponentBase {
+  constructor() {
+    super();
+    this.external = '/footer.plain.html';
+  }
 
-    decorateIcons(footer);
-    block.append(footer);
+  ready() {
+    const child = this.children[0];
+    child.replaceWith(...child.children);
+    this.nav = this.querySelector('ul');
+    this.nav.setAttribute('role', 'navigation');
+    this.classList.add('full-width');
+    this.classList.add('horizontal');
   }
 }
diff --git a/blocks/grid/grid.css b/blocks/grid/grid.css
deleted file mode 100644
index ba453ff5..00000000
--- a/blocks/grid/grid.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.section.grid {
-  display: grid;
-  grid-template-columns: var(--grid-template-columns, unset);
-  grid-template-rows: var(--grid-template-rows, unset);
-}
-
-.section.grid .element {
-  grid-column: var(--grid-column-start-position, auto) / var(--grid-column-end-position, auto);
-  grid-row: var(--grid-row-start-position, auto) / var(--grid-row-end-position, auto);
-  width: 100%;
-  max-width: unset;
-  background-color: var(--background-color, transparent);
-  color: var(--text-color);
-  margin: auto;
-}
-
-.section.grid .element .image-wrapper {
-  margin: 0;
-  padding: 0;
-}
-
-.section.grid .element img {
-  width: 100%;
-  height: auto;
-}
-
-.section.grid .element p {
-  margin: 0;
-  padding: var(--padding-vertical) var(--padding-horizontal);
-}
diff --git a/blocks/grid/grid.js b/blocks/grid/grid.js
deleted file mode 100644
index 5a9fc3f8..00000000
--- a/blocks/grid/grid.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import {
-  addCssVariables,
-} from '../../scripts/lib-franklin.js';
-
-export default function decorate(block) {
-  const elements = [...block.querySelectorAll(':scope > div')];
-
-  const columnTemplate = elements.find((e) => e.dataset.gridColumns)?.dataset.gridColumns;
-  const rowTemplate = elements.find((e) => e.dataset.gridRows)?.dataset.gridRows;
-  if (columnTemplate || rowTemplate) {
-    addCssVariables(block, {
-      'grid-template-columns': columnTemplate,
-      'grid-template-rows': rowTemplate,
-    });
-  }
-
-  elements.forEach((e) => {
-    e.classList.add('element');
-
-    const [[startColumnPosition, startRowPosition], [endColumnPosition, endRowPosition]] = e.dataset.gridPosition.split(/\s*\/\s*/).map((p) => p.split(/\s*-\s*/));
-
-    addCssVariables(e, {
-      'grid-column-start-position': startColumnPosition,
-      'grid-row-start-position': startRowPosition,
-      'grid-column-end-position': endColumnPosition,
-      'grid-row-end-position': endRowPosition,
-    });
-  });
-}
diff --git a/blocks/header/header.css b/blocks/header/header.css
index 09581712..689a4775 100644
--- a/blocks/header/header.css
+++ b/blocks/header/header.css
@@ -1,19 +1,12 @@
-header a:any-link {
-  color: inherit;
-}
-
-header p,
-header .section.grid .element p {
-  margin: 0;
-  padding: 0;
-}
-
-a.button:any-link {
-  background-color: transparent;
-  color: inherit;
-  font-weight: normal;
-}
+raqn-header {
+  --scope-background: var(--scope-header-background, #fff);
+  --scope-color: var(--scope-header-color, #000);
 
-a.button:any-link .icon {
-  vertical-align: middle;
+  position: fixed;
+  width: 100%;
+  min-height: var(--scope-header-height, 64px);
+  display: grid;
+  background: var(--scope-header-background, #fff);
+  align-items: center;
+  z-index: 100;
 }
diff --git a/blocks/header/header.js b/blocks/header/header.js
index c8512c3f..185e8f60 100644
--- a/blocks/header/header.js
+++ b/blocks/header/header.js
@@ -1,11 +1,13 @@
-import {
-  loadBlocks,
-} from '../../scripts/lib-franklin.js';
-import {
-  decorateMain,
-} from '../../scripts/scripts.js';
+import ComponentBase from '../../scripts/component-base.js';
+import { eagerImage } from '../../scripts/libs.js';
 
-export default async function decorate(block) {
-  decorateMain(block);
-  loadBlocks(block);
+export default class Header extends ComponentBase {
+  external = '/header.plain.html';
+
+  dependencies = ['navigation'];
+
+  async processExternal(response) {
+    await super.processExternal(response);
+    eagerImage(this, 1);
+  }
 }
diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css
index cc5f4fa5..822306c0 100644
--- a/blocks/hero/hero.css
+++ b/blocks/hero/hero.css
@@ -1,39 +1,25 @@
 /* block specific CSS goes here */
 
-main .hero-container > div {
-  max-width: unset;
-}
-  
-main .hero-container {
-  padding: 0;
-}
-  
-main .hero {
-  position: relative;
-  padding: 32px;
-  min-height: 300px;
-}
+raqn-hero {
+  --hero-background: var(--scope-background, black);
+  --hero-color: var(--scope-color, white);
+  --hero-grid-template-columns: var(--scope-hero-columns, 1fr);
+  --hero-hero-order: 0;
+  --hero-padding-block: var(--scope-hero-padding-block, 40px);
 
-main .hero h1 {
-  max-width: 1200px;
-  margin-left: auto;
-  margin-right: auto;
-  color: white;
+  background: var(--hero-background);
+  color: var(--hero-color);
+  align-items: center;
+  grid-template-columns: var(--hero-grid-template-columns, 1fr);
+  padding-block: var(--hero-padding-block);
 }
 
-main .hero picture {
-  position: absolute;
-  z-index: -1;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  object-fit: cover;
-  box-sizing: border-box;
+@media screen and (min-width: 767px) {
+  raqn-hero {
+    --hero-grid-template-columns: 0.6fr 0.4fr;
+  }
 }
 
-main .hero img {
-  object-fit: cover;
-  width: 100%;
-  height: 100%;
+raqn-hero > div:first-child {
+  order: var(--hero-hero-order);
 }
diff --git a/blocks/hero/hero.js b/blocks/hero/hero.js
index e69de29b..ce998437 100644
--- a/blocks/hero/hero.js
+++ b/blocks/hero/hero.js
@@ -0,0 +1,16 @@
+import ComponentBase from '../../scripts/component-base.js';
+
+export default class Hero extends ComponentBase {
+  get observedAttributes() {
+    return ['order'];
+  }
+
+  ready() {
+    const child = this.children[0];
+    child.replaceWith(...child.children);
+    this.classList.add('full-width');
+    this.setAttribute('role', 'banner');
+    this.setAttribute('aria-label', 'hero');
+    this.style.setProperty('--hero-hero-order', this.getAttribute('order'));
+  }
+}
diff --git a/blocks/icon/icon.css b/blocks/icon/icon.css
new file mode 100644
index 00000000..b34e808b
--- /dev/null
+++ b/blocks/icon/icon.css
@@ -0,0 +1,22 @@
+raqn-icon {
+  display: inline-flex;
+  font-size: 1em;
+  line-height: 1em;
+  text-align: center;
+  min-width: var(--scope-icon-size, 1em);
+  min-height: var(--scope-icon-size, 1em);
+  justify-content: var(--scope-icon-align, start);
+  text-transform: none;
+  vertical-align: middle;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+raqn-icon svg {
+  display: inline-block;
+  width: var(--scope-icon-size, 1em);
+  height: var(--scope-icon-size, 1em);
+  fill: currentcolor;
+  overflow: hidden;
+  vertical-align: middle;
+}
diff --git a/blocks/icon/icon.js b/blocks/icon/icon.js
new file mode 100644
index 00000000..08e6e075
--- /dev/null
+++ b/blocks/icon/icon.js
@@ -0,0 +1,104 @@
+import ComponentBase from '../../scripts/component-base.js';
+
+export default class Icon extends ComponentBase {
+  constructor() {
+    super();
+    this.setupSprite();
+  }
+
+  setupSprite() {
+    this.svgSprite = document.getElementById('franklin-svg-sprite');
+    if (!this.svgSprite) {
+      this.svgSprite = document.createElement('div');
+      this.svgSprite.id = 'franklin-svg-sprite';
+      document.body.append(this.svgSprite);
+    }
+  }
+
+  get iconUrl() {
+    return `/assets/icons/${this.iconName}.svg`;
+  }
+
+  get cache() {
+    window.ICONS_CACHE = window.ICONS_CACHE || {};
+    return window.ICONS_CACHE;
+  }
+
+  async connected() {
+    this.iconName = this.getAttribute('icon');
+    if (!this.cache[this.iconName]) {
+      this.cache[this.iconName] = {
+        loading: new Promise((resolve) => {
+          resolve(this.load(this.iconUrl));
+        }),
+      };
+    } else {
+      await this.cache[this.iconName].loading;
+      this.innerHTML = this.template();
+    }
+    this.classList.add('loaded');
+  }
+
+  template() {
+    const { viewBox } = this.cache[this.iconName];
+    const attributes = Object.keys({ viewBox })
+      .map((k) => {
+        if (this.cache[this.iconName][k]) {
+          return `${k}="${this.cache[this.iconName][k]}"`;
+        }
+        return '';
+      })
+      .join(' ');
+    return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ${attributes}><use xlink:href="#icons-sprite-${this.iconName}"/></svg>`;
+  }
+
+  iconTemplate(iconName, svg, viewBox, width, height) {
+    return `<defs><g id="icons-sprite-${iconName}" viewBox="${viewBox}" width="${width}" height="${height}">${svg.innerHTML}</g></defs>`;
+  }
+
+  async processExternal(response) {
+    if (response.ok) {
+      const { iconName } = this;
+      this.svg = await response.text();
+
+      if (this.svg.match(/(<style | class=|url\(#| xlink:href="#)/)) {
+        this.cache[iconName] = {
+          styled: true,
+          html: this.svg
+            // rescope ids and references to avoid clashes across icons;
+            .replaceAll(/ id="([^"]+)"/g, (_, id) => ` id="${iconName}-${id}"`)
+            .replaceAll(
+              /="url\(#([^)]+)\)"/g,
+              (_, id) => `="url(#${iconName}-${id})"`,
+            )
+            .replaceAll(
+              / xlink:href="#([^"]+)"/g,
+              (_, id) => ` xlink:href="#${iconName}-${id}"`,
+            ),
+        };
+      } else {
+        const dummy = document.createElement('div');
+        dummy.innerHTML = this.svg;
+        const svg = dummy.querySelector('svg');
+        const width = svg.getAttribute('width');
+        const height = svg.getAttribute('height');
+        const viewBox = svg.getAttribute('viewBox');
+        svg.innerHTML = this.iconTemplate(
+          iconName,
+          svg,
+          viewBox,
+          width,
+          height,
+        );
+        this.cache[iconName].width = width;
+        this.cache[iconName].height = height;
+        this.cache[iconName].viewBox = viewBox;
+        this.cache[iconName].svg = svg;
+      }
+      this.svgSprite.append(this.cache[iconName].svg);
+      this.innerHTML = this.template();
+    } else {
+      this.cache[this.iconName] = false;
+    }
+  }
+}
diff --git a/blocks/navigation/navigation.css b/blocks/navigation/navigation.css
index 132aa196..22220ea7 100644
--- a/blocks/navigation/navigation.css
+++ b/blocks/navigation/navigation.css
@@ -1,5 +1,183 @@
-.navigation ul {
-    list-style: none;
-    display: flex;
-    gap: var(--padding-horizontal);
-}
\ No newline at end of file
+/* stylelint-disable CssSyntaxError */
+raqn-navigation {
+  --raqn-navigation-background: var(--scope-background, #fff);
+  --raqn-navigation-color: var(--scope-color, #000);
+  --raqn-navigation-level-1: var(--raqn-font-size-4, 1.25rem);
+  --raqn-navigation-level-2: var(--raqn-font-size-5, 1rem);
+
+  margin: var(--scope-margin);
+  width: 100%;
+  display: grid;
+  justify-content: center;
+}
+
+raqn-navigation > nav ul,
+raqn-navigation > nav p {
+  display: none;
+  padding: 0;
+}
+
+raqn-navigation .level-1 a:not(:hover) {
+  color: var(--scope-accent-background, #000);
+}
+
+raqn-navigation > nav > ul {
+  overflow-y: auto;
+  max-height: calc(100vh - var(--scope-header-height));
+}
+
+raqn-navigation.active > nav ul,
+raqn-navigation.active > nav p {
+  display: block;
+}
+
+raqn-navigation.active > nav a {
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  color: var(--raqn-navigation-color, #000);
+  border-radius: var(--border-radius);
+  transition: background 0.2s ease-in-out;
+  font-size: var(--raqn-navigation-level-1);
+}
+
+raqn-navigation.active > nav .level-2 a {
+  font-size: var(--raqn-navigation-level-2);
+}
+
+raqn-navigation.active > nav > div {
+  display: flex;
+}
+
+raqn-navigation > nav button {
+  display: inline-flex;
+  justify-self: end;
+  align-items: center;
+  justify-content: center;
+  background: var(--scope-background, #fff);
+  color: var(--scope-color, #000);
+  border: none;
+  border-radius: var(--border-radius);
+  padding: var(--padding-vertical, 10px) var(--padding-horizontal, 10px);
+  transition: background 0.2s ease-in-out;
+}
+
+raqn-navigation.active button {
+  background: var(--scope-background-hover, #000);
+  color: var(--scope-color-hover, #fff);
+}
+
+raqn-navigation.active > nav > ul {
+  position: fixed;
+  display: block;
+  list-style: none;
+  max-width: 0;
+  background: var(--scope-background, #fff);
+  min-width: 100%;
+  inset-inline-start: 0;
+  inset-block-start: var(--scope-header-height, 64px);
+  height: 100%;
+  max-height: calc(100vh - var(--scope-header-height, 64px));
+  margin: 0 auto;
+  padding: 0;
+}
+
+raqn-navigation.active > nav > ul li {
+  max-width: var(--scope-max-width, 100%);
+  margin: 0 auto;
+}
+
+raqn-navigation.active > nav > ul li a {
+  padding-block: 1.2em;
+}
+
+raqn-navigation .accordion-content-wrapper {
+  margin: 0;
+}
+
+raqn-navigation:not([compact='true']) > nav a {
+  line-height: var(--scope-icon-size, 24px);
+}
+
+raqn-navigation:not([compact='true']) > nav ul {
+  list-style: none;
+  display: flex;
+}
+
+raqn-navigation:not([compact='true']) > nav > ul {
+  inset-inline-start: calc((100vw - var(--scope-max-width)) / 2);
+  inset-block-start: var(--scope-header-height, 64px);
+}
+
+raqn-navigation:not([compact='true']) > nav > p {
+  display: inline-flex;
+}
+
+raqn-navigation:not([compact='true']) > nav [icon='chevron-right'] {
+  transform: rotate(90deg);
+}
+
+raqn-navigation:not([compact='true']) > nav .level-1 a {
+  padding: var(--scope-padding-vertical, 10px)
+    var(--scope-padding-horizontal, 20px);
+}
+
+raqn-navigation:not([compact='true']) > nav .level-2 > a {
+  color: var(--scope-link-color-hover);
+  font-size: 1.2em;
+}
+
+raqn-navigation:not([compact='true']) > nav .level-2 > a:hover {
+  color: var(--scope-color, #fff);
+}
+
+raqn-navigation:not([compact='true']) > nav .level-2,
+raqn-navigation:not([compact='true']) > nav .level-2 > ul {
+  display: inline-flex;
+  flex-direction: column;
+}
+
+raqn-navigation:not([compact='true']) > nav .level-2 > ul {
+  list-style: none;
+  padding: 0;
+}
+
+raqn-navigation:not([compact='true']) > nav .level-1 > ul {
+  display: flex;
+  clip-path: inset(0% -100vw 100% -100vw);
+  position: absolute;
+  padding: 0;
+  inset-block-start: var(--scope-header-height, 64px);
+  inset-inline-start: calc((100vw - var(--scope-max-width)) / 2);
+  transition: clip-path 0.4s ease-in-out;
+  overflow: visible;
+}
+
+raqn-navigation:not([compact='true']) > nav .level-1 > ul .level-2 {
+  padding-block: 1.2em;
+  opacity: 0;
+  transition: opacity 0.4s ease;
+  z-index: 2;
+}
+
+raqn-navigation:not([compact='true']) > nav .level-1 > ul::after {
+  content: ' ';
+  margin-inline: calc(-1 * ((100vw - var(--scope-max-width)) / 2));
+  position: absolute;
+  height: 100%;
+  width: 100vw;
+  inset-inline-start: 0;
+  background: var(--scope-background, #fff);
+  border-block-start: 1px solid var(--scope-color, #000);
+  box-shadow: 0 0 30px #000;
+  z-index: 1;
+}
+
+raqn-navigation:not([compact='true']) > nav .level-1:hover > ul {
+  display: flex;
+  clip-path: inset(0 -100vw -100% -100vw);
+}
+
+raqn-navigation:not([compact='true']) > nav .level-1:hover > ul > li {
+  opacity: 1;
+}
diff --git a/blocks/navigation/navigation.js b/blocks/navigation/navigation.js
index 46969a3c..a349cc07 100644
--- a/blocks/navigation/navigation.js
+++ b/blocks/navigation/navigation.js
@@ -1,3 +1,86 @@
-export default async function decorate(/* block */) {
-  // nop
+import { start } from '../../scripts/init.js';
+import Column from '../column/column.js';
+
+export default class Navigation extends Column {
+  createButton() {
+    const button = document.createElement('button');
+    button.setAttribute('aria-label', 'Menu');
+    button.setAttribute('aria-expanded', 'false');
+    button.setAttribute('aria-controls', 'navigation');
+    button.setAttribute('aria-haspopup', 'true');
+    button.setAttribute('type', 'button');
+    button.setAttribute('tabindex', '0');
+    button.innerHTML = `<raqn-icon icon=menu></raqn-icon>`;
+    button.addEventListener('click', () => {
+      this.classList.toggle('active');
+      button.setAttribute('aria-expanded', this.classList.contains('active'));
+    });
+    return button;
+  }
+
+  ready() {
+    this.active = {};
+    this.list = this.querySelector('ul');
+    this.nav = document.createElement('nav');
+    this.nav.append(this.list);
+    this.setAttribute('role', 'navigation');
+    this.compact = this.getAttribute('compact') === 'true' || false;
+    this.icon = this.getAttribute('icon') || 'menu';
+    if (this.compact) {
+      this.nav.append(this.createButton());
+      start({ name: 'accordion' });
+    }
+    this.append(this.nav);
+    this.setupClasses(this.list);
+    if (this.compact) {
+      this.addEventListener('click', (e) => this.activate(e));
+    }
+  }
+
+  createIcon(name = this.icon) {
+    const icon = document.createElement('raqn-icon');
+    icon.setAttribute('icon', name);
+    return icon;
+  }
+
+  creaeteAccordion(replaceChildrenElement) {
+    const accordion = document.createElement('raqn-accordion');
+    const children = Array.from(replaceChildrenElement.children);
+    accordion.append(...children);
+    replaceChildrenElement.append(accordion);
+  }
+
+  setupClasses(ul, level = 1) {
+    const children = Array.from(ul.children);
+    children.forEach((child) => {
+      const hasChildren = child.querySelector('ul');
+      child.classList.add(`level-${level}`);
+      child.dataset.level = level;
+
+      if (hasChildren) {
+        const anchor = child.querySelector('a');
+        if (this.compact) {
+          this.creaeteAccordion(child);
+        } else if (level === 1) {
+          anchor.append(this.createIcon('chevron-right'));
+        }
+        child.classList.add('has-children');
+        this.setupClasses(hasChildren, level + 1);
+      }
+    });
+  }
+
+  activate(e) {
+    e.preventDefault();
+    if (e.target.tagName.toLowerCase() === 'a') {
+      const current = e.target.closest('li');
+      const { level } = current.dataset;
+      if (this.active[level] && this.active[level] !== current) {
+        this.active[level].classList.remove('active');
+      }
+      this.active[level] = current;
+      this.setAttribute('active', level);
+      this.active[level].classList.toggle('active');
+    }
+  }
 }
diff --git a/blocks/navigation/navigation.md b/blocks/navigation/navigation.md
new file mode 100644
index 00000000..e69de29b
diff --git a/blocks/router/router.css b/blocks/router/router.css
new file mode 100644
index 00000000..1aca89f2
--- /dev/null
+++ b/blocks/router/router.css
@@ -0,0 +1,3 @@
+raqn-router {
+  background-color: var(--scope-background, transparent);
+}
diff --git a/blocks/router/router.js b/blocks/router/router.js
new file mode 100644
index 00000000..21a0dc0f
--- /dev/null
+++ b/blocks/router/router.js
@@ -0,0 +1,53 @@
+import ComponentBase from '../../scripts/component-base.js';
+
+export default class Router extends ComponentBase {
+  static get observedAttributes() {
+    return ['external'];
+  }
+
+  getPlainUrl(url) {
+    if (url.indexOf('.html') >= 0) {
+      return url.replace(/\.html$/, '.plain.html');
+    }
+    if (url.endsWith(`${window.location.host}/`) || url === '') {
+      return '/index.plain.html';
+    }
+    return `${url}.plain.html`;
+  }
+
+  ready() {
+    document.addEventListener(
+      'click',
+      (event) => {
+        if (
+          event.target.tagName === 'A' &&
+          event.target.href.startsWith(window.location.origin)
+        ) {
+          event.preventDefault();
+          this.setAttribute('external', event.target.href);
+        }
+      },
+      true,
+    );
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === 'external' && oldValue !== newValue) {
+      this.external = newValue;
+      window.history.pushState(this.external, '', this.external);
+      this.load(this.getPlainUrl(this.external));
+    }
+  }
+
+  async processExternal(response) {
+    if (response.ok) {
+      const html = await response.text();
+      const main = document.body.querySelector('main');
+      if (main) {
+        document.body.querySelector('main').innerHTML = html;
+      }
+      return this.refresh(main);
+    }
+    return response;
+  }
+}
diff --git a/blocks/theme/theme.css b/blocks/theme/theme.css
new file mode 100644
index 00000000..bad16572
--- /dev/null
+++ b/blocks/theme/theme.css
@@ -0,0 +1,3 @@
+raqn-theme {
+  display: none;
+}
diff --git a/blocks/theme/theme.js b/blocks/theme/theme.js
new file mode 100644
index 00000000..60fbf990
--- /dev/null
+++ b/blocks/theme/theme.js
@@ -0,0 +1,155 @@
+import ComponentBase from '../../scripts/component-base.js';
+import { config } from '../../scripts/libs.js';
+// minify alias
+const k = Object.keys;
+
+export default class Theme extends ComponentBase {
+  constructor() {
+    super();
+    this.scapeDiv = document.createElement('div');
+    this.external = '/theme.json';
+    this.skip = ['tags'];
+    this.toTags = [
+      'font-size',
+      'font-weight',
+      'font-family',
+      'line-height',
+      'font-style',
+      'font-margin-block',
+    ];
+    this.transform = { 'font-margin-block': 'margin-block' };
+    this.tags = '';
+    this.fontFace = '';
+    this.atomic = '';
+  }
+
+  fontFaceTemplate(fontFace) {
+    if (fontFace.indexOf('-') > -1) {
+      const [name, ...rest] = fontFace.split('-');
+      const params = rest.pop().split('.');
+      const format = params.pop();
+      const lastBit = params.pop();
+      const fontWeight = config.fontWeights[lastBit] || 'regular';
+      const fontStyle = lastBit === 'italic' ? lastBit : 'normal';
+      // eslint-disable-next-line max-len
+      return `@font-face {font-family: ${name};font-weight: ${fontWeight};font-display: swap;font-style: ${fontStyle};src: url('/fonts/${fontFace}') format(${format});}`;
+    }
+    return '';
+  }
+
+  fontTags(t, index) {
+    const tag = t.tags[index];
+    const values = this.toTags.reduce((acc, key) => {
+      if (t[key][index]) {
+        if (acc[tag]) {
+          acc[tag][key] = t[key][index];
+        } else {
+          acc[tag] = { [key]: t[key][index] };
+        }
+      }
+      return acc;
+    }, {});
+    return k(values).map((value) => {
+      const val = values[value];
+      return `${tag} {${k(val)
+        .map(
+          (v) =>
+            `${this.getKey(v)}: var(--scope-${this.getKey(v)}, ${val[v]});`,
+        )
+        .join('')}}`;
+    });
+  }
+
+  getKey(key) {
+    return this.transform[key] ? this.transform[key] : key;
+  }
+
+  escapeHtml(unsafe) {
+    this.scapeDiv.textContent = unsafe;
+    return this.scapeDiv.innerHTML;
+  }
+
+  renderVariables(key, row, t) {
+    const value = t[key][row];
+    let variable = '';
+    if (value) {
+      if (key === 'font-face') {
+        this.fontFace += this.fontFaceTemplate(value);
+      } else {
+        variable = `\n--raqn-${this.getKey(key)}-${row}: ${this.escapeHtml(
+          value,
+        ).trim()};`;
+        this.atomic += `body .${this.getKey(key)}-${row} {--scope-${this.getKey(
+          key,
+        )}: var(--raqn-${this.getKey(key)}-${row});}\n`;
+      }
+    }
+    return variable;
+  }
+
+  readValue() {
+    const { data } = this.themeJson;
+    const keys = data.map((item) => item.key);
+    const t = data.reduce(
+      (ac, item, i) =>
+        keys.reduce((acc, key) => {
+          delete item.key;
+          if (!this.themesKeys) {
+            this.themesKeys = k(item);
+          }
+          const ind = keys.indexOf(key);
+          if (i === ind) {
+            acc[key] = item;
+          }
+          return acc;
+        }, ac),
+      {},
+    );
+    // font tags
+    if (t.tags) {
+      this.tags = k(t.tags)
+        .map((index) => this.fontTags(t, index))
+        .join('\n');
+    }
+    // full scoped theme classes
+    this.themes = this.themesKeys
+      .map(
+        (theme) => `.theme-${theme} {${k(t)
+          .filter((key) => ![...this.skip, ...this.toTags].includes(key))
+          .map((key) =>
+            t[key][theme] ? `--scope-${key}: var(--raqn-${key}-${theme});` : '',
+          )
+          .filter((v) => v !== '')
+          .join('')}
+        }`,
+      )
+      .join('');
+
+    this.variables = `body{${k(t)
+      .filter((key) => ![...this.skip].includes(key))
+      .map((key) => {
+        const rows = k(t[key]);
+        return rows.map((row) => this.renderVariables(key, row, t)).join('');
+      })
+      .join('')}}`;
+  }
+
+  styles() {
+    ['variables', 'tags', 'atomic', 'themes'].forEach((cssSegment) => {
+      const style = document.createElement('style');
+      style.innerHTML = this[cssSegment];
+      style.classList.add(cssSegment);
+      document.head.appendChild(style);
+    });
+    document.body.classList.add('theme-default');
+    document.body.style.display = 'block';
+  }
+
+  async processExternal(response) {
+    if (response.ok) {
+      this.themeJson = await response.json();
+      this.readValue();
+      this.styles();
+    }
+  }
+}
diff --git a/docs/assets/adobelive-slow3g.png b/docs/assets/adobelive-slow3g.png
new file mode 100644
index 00000000..05889ad7
Binary files /dev/null and b/docs/assets/adobelive-slow3g.png differ
diff --git a/docs/assets/aemlive1.png b/docs/assets/aemlive1.png
new file mode 100644
index 00000000..654b4d0e
Binary files /dev/null and b/docs/assets/aemlive1.png differ
diff --git a/docs/assets/aemlive2.png b/docs/assets/aemlive2.png
new file mode 100644
index 00000000..c678cd9c
Binary files /dev/null and b/docs/assets/aemlive2.png differ
diff --git a/docs/assets/atomic-example.png b/docs/assets/atomic-example.png
new file mode 100644
index 00000000..7e75e1f8
Binary files /dev/null and b/docs/assets/atomic-example.png differ
diff --git a/docs/assets/doc-example.png b/docs/assets/doc-example.png
new file mode 100644
index 00000000..b71b6863
Binary files /dev/null and b/docs/assets/doc-example.png differ
diff --git a/docs/assets/eager-image-doc.png b/docs/assets/eager-image-doc.png
new file mode 100644
index 00000000..1e488597
Binary files /dev/null and b/docs/assets/eager-image-doc.png differ
diff --git a/docs/assets/eager-image-preview.png b/docs/assets/eager-image-preview.png
new file mode 100644
index 00000000..1c3fbfb7
Binary files /dev/null and b/docs/assets/eager-image-preview.png differ
diff --git a/docs/assets/eager-lcp.png b/docs/assets/eager-lcp.png
new file mode 100644
index 00000000..84c52ace
Binary files /dev/null and b/docs/assets/eager-lcp.png differ
diff --git a/docs/assets/font-example.png b/docs/assets/font-example.png
new file mode 100644
index 00000000..5734b8b3
Binary files /dev/null and b/docs/assets/font-example.png differ
diff --git a/docs/assets/font-limitation.png b/docs/assets/font-limitation.png
new file mode 100644
index 00000000..be96aa5c
Binary files /dev/null and b/docs/assets/font-limitation.png differ
diff --git a/docs/assets/franklin-regular-network.png b/docs/assets/franklin-regular-network.png
new file mode 100644
index 00000000..e1883b91
Binary files /dev/null and b/docs/assets/franklin-regular-network.png differ
diff --git a/docs/assets/franklin-slow3g-network.png b/docs/assets/franklin-slow3g-network.png
new file mode 100644
index 00000000..1e16e152
Binary files /dev/null and b/docs/assets/franklin-slow3g-network.png differ
diff --git a/docs/assets/hero-atomic-1-doc.png b/docs/assets/hero-atomic-1-doc.png
new file mode 100644
index 00000000..ab752396
Binary files /dev/null and b/docs/assets/hero-atomic-1-doc.png differ
diff --git a/docs/assets/hero-atomic-1.png b/docs/assets/hero-atomic-1.png
new file mode 100644
index 00000000..1b8c1b9d
Binary files /dev/null and b/docs/assets/hero-atomic-1.png differ
diff --git a/docs/assets/hero-example.png b/docs/assets/hero-example.png
new file mode 100644
index 00000000..b7a25459
Binary files /dev/null and b/docs/assets/hero-example.png differ
diff --git a/docs/assets/hero-mobile-param-preview.png b/docs/assets/hero-mobile-param-preview.png
new file mode 100644
index 00000000..9887fbbe
Binary files /dev/null and b/docs/assets/hero-mobile-param-preview.png differ
diff --git a/docs/assets/hero-mobile-param.png b/docs/assets/hero-mobile-param.png
new file mode 100644
index 00000000..bda56951
Binary files /dev/null and b/docs/assets/hero-mobile-param.png differ
diff --git a/docs/assets/hero-order-param-0.png b/docs/assets/hero-order-param-0.png
new file mode 100644
index 00000000..ce82d1fc
Binary files /dev/null and b/docs/assets/hero-order-param-0.png differ
diff --git a/docs/assets/hero-param-1.png b/docs/assets/hero-param-1.png
new file mode 100644
index 00000000..cdb95768
Binary files /dev/null and b/docs/assets/hero-param-1.png differ
diff --git a/docs/assets/hero-param.png b/docs/assets/hero-param.png
new file mode 100644
index 00000000..c5441453
Binary files /dev/null and b/docs/assets/hero-param.png differ
diff --git a/docs/assets/hero-theme-1-preview.png b/docs/assets/hero-theme-1-preview.png
new file mode 100644
index 00000000..3b4ad29d
Binary files /dev/null and b/docs/assets/hero-theme-1-preview.png differ
diff --git a/docs/assets/hero-theme-1.png b/docs/assets/hero-theme-1.png
new file mode 100644
index 00000000..9a20f99a
Binary files /dev/null and b/docs/assets/hero-theme-1.png differ
diff --git a/docs/assets/hero-theme-default-preview.png b/docs/assets/hero-theme-default-preview.png
new file mode 100644
index 00000000..c758aef0
Binary files /dev/null and b/docs/assets/hero-theme-default-preview.png differ
diff --git a/docs/assets/hero-theme-default.png b/docs/assets/hero-theme-default.png
new file mode 100644
index 00000000..fd09fec2
Binary files /dev/null and b/docs/assets/hero-theme-default.png differ
diff --git a/docs/assets/hero.png b/docs/assets/hero.png
new file mode 100644
index 00000000..da4fd4bc
Binary files /dev/null and b/docs/assets/hero.png differ
diff --git a/docs/assets/lcp-setup-1.png b/docs/assets/lcp-setup-1.png
new file mode 100644
index 00000000..a474f02c
Binary files /dev/null and b/docs/assets/lcp-setup-1.png differ
diff --git a/docs/assets/lcp-setup-order.png b/docs/assets/lcp-setup-order.png
new file mode 100644
index 00000000..cb5373c3
Binary files /dev/null and b/docs/assets/lcp-setup-order.png differ
diff --git a/docs/assets/lcp-setup-preview-1.png b/docs/assets/lcp-setup-preview-1.png
new file mode 100644
index 00000000..8dcf375e
Binary files /dev/null and b/docs/assets/lcp-setup-preview-1.png differ
diff --git a/docs/assets/netcentricbiz.png b/docs/assets/netcentricbiz.png
new file mode 100644
index 00000000..e2559bd4
Binary files /dev/null and b/docs/assets/netcentricbiz.png differ
diff --git a/docs/assets/no-lcp-loading.png b/docs/assets/no-lcp-loading.png
new file mode 100644
index 00000000..943aa0bd
Binary files /dev/null and b/docs/assets/no-lcp-loading.png differ
diff --git a/docs/assets/raqn-slow3g-await.png b/docs/assets/raqn-slow3g-await.png
new file mode 100644
index 00000000..87fa6d1f
Binary files /dev/null and b/docs/assets/raqn-slow3g-await.png differ
diff --git a/docs/assets/raqn-slow3g-regular.png b/docs/assets/raqn-slow3g-regular.png
new file mode 100644
index 00000000..217bc647
Binary files /dev/null and b/docs/assets/raqn-slow3g-regular.png differ
diff --git a/docs/assets/raqn-wifi-await.png b/docs/assets/raqn-wifi-await.png
new file mode 100644
index 00000000..745b16b7
Binary files /dev/null and b/docs/assets/raqn-wifi-await.png differ
diff --git a/docs/assets/raqn-wifi-regular-draw.png b/docs/assets/raqn-wifi-regular-draw.png
new file mode 100644
index 00000000..fb98ec76
Binary files /dev/null and b/docs/assets/raqn-wifi-regular-draw.png differ
diff --git a/docs/assets/raqn-wifi-regular.png b/docs/assets/raqn-wifi-regular.png
new file mode 100644
index 00000000..fb98ec76
Binary files /dev/null and b/docs/assets/raqn-wifi-regular.png differ
diff --git a/docs/assets/sheet-example.png b/docs/assets/sheet-example.png
new file mode 100644
index 00000000..93ca0e0f
Binary files /dev/null and b/docs/assets/sheet-example.png differ
diff --git a/docs/assets/simple-doc.png b/docs/assets/simple-doc.png
new file mode 100644
index 00000000..1bcaa843
Binary files /dev/null and b/docs/assets/simple-doc.png differ
diff --git a/docs/assets/style-example.png b/docs/assets/style-example.png
new file mode 100644
index 00000000..9b139ed9
Binary files /dev/null and b/docs/assets/style-example.png differ
diff --git a/docs/assets/theme-concept-excel.png b/docs/assets/theme-concept-excel.png
new file mode 100644
index 00000000..6533a9a6
Binary files /dev/null and b/docs/assets/theme-concept-excel.png differ
diff --git a/docs/assets/theme-example-apply.png b/docs/assets/theme-example-apply.png
new file mode 100644
index 00000000..ecb35374
Binary files /dev/null and b/docs/assets/theme-example-apply.png differ
diff --git a/docs/assets/theme-fonts.png b/docs/assets/theme-fonts.png
new file mode 100644
index 00000000..6e765765
Binary files /dev/null and b/docs/assets/theme-fonts.png differ
diff --git a/docs/assets/theme.xlsx b/docs/assets/theme.xlsx
new file mode 100644
index 00000000..5cfa7e6d
Binary files /dev/null and b/docs/assets/theme.xlsx differ
diff --git a/docs/edge/client.md b/docs/edge/client.md
new file mode 100644
index 00000000..c1284bf1
--- /dev/null
+++ b/docs/edge/client.md
@@ -0,0 +1,83 @@
+# Everything as Client-Side JavaScript
+
+As mentioned and for what is rendered at the server-side.
+
+Things that can be done without JavaScript:
+
+1. Style basic HTML set on the page.
+2. Predefine sizes on LCP (although even the header is not available SSR).
+3. Set the scripts to and things to preload.
+
+Most features depend on JavaScript to transform the DOM and hydrate it.
+
+1. Load and prioritize resources that are not in head.html.
+2. Initially hide the body.
+3. Parse DOM.
+4. Compile rendering blocking styles and JavaScript.
+5. Load header.plain.html.
+6. Load other non-eager components.
+
+The only server-side injection available is by head.html.
+
+## Requirements
+
+- Client-side Hydration DOM transformation "decoration."
+- Manual focus on FCP and LCP.
+- Queue and block each resource before loading and rendering next.
+
+## Boilerplate Approach
+
+1. Performance by avoiding visible rendering before loading required.
+2. Decoration by feature.
+3. Manually defining priority of required.
+4. Eager and deferred.
+5. Semantical content used as component functional content (metadata) among others.
+
+## Defining Blocks and Features
+
+### Default Script Behavior - Non-block Features
+
+1. Setup SampleRun.
+2. Eager loading
+   1. decorateTemplateAndTheme (Required once, add classes to body).
+   2. Load external header, add CSS variables using metadata (required to avoid CLS and must be defined used styles.css).
+   3. decorateMain (Required once, but need to run always that a new DOM is loaded or added) includes:
+      1. decorate buttons, icons, blocks, Section, Images, grid.
+   4. If desktop loads fonts.
+3. Lazy and delayed
+4. Load blocks (by order of appearance)
+5. Load footer and decorate it manually
+6. Load fonts
+7. Load lazy styles
+8. Observe for delayed, etc.
+
+### Block Features
+
+An example of a block
+
+```javascript
+export default async function decorate(block) {
+  // add feature to a element (block)
+  // Eg add events transform it etc.
+}
+```
+
+Here are some examples:
+[Example HEADER](https://github.com/adobe/aem-boilerplate/blob/main/blocks/header/header.js)
+
+## Advantages:
+
+1. Simple
+2. Functional approach good for testing
+3. JavaScript modules
+4. Enforce LCP
+5. Performance monitoring using RUM
+
+## Disadvantages:
+
+1. Blocks need to be executed manually in every element
+2. Any new DOM needs to be decorated manually
+3. Limited reusability of a "component"
+4. Low opinionated allows free-style coding / no code best practices enforcing
+5. No clear life cycle of a block
+6. Uses semantical data as parameters and passing options
diff --git a/docs/edge/perfomance.md b/docs/edge/perfomance.md
new file mode 100644
index 00000000..62213d85
--- /dev/null
+++ b/docs/edge/perfomance.md
@@ -0,0 +1,113 @@
+# Edge Performance
+
+As it states
+
+```markdown
+If you start your project with the Boilerplate as in the Developer Tutorial, you will get a very stable Lighthouse score that is 100. On every component of the lighthouse score there is some buffer for the project code to use and still be within the boundaries of a perfect 100 score.
+```
+
+Main point to focus here is
+Please check
+[Three-Phase Loading](https://www.aem.live/developer/keeping-it-100#three-phase-loading-e-l-d)
+
+Edge defines as 3 phases
+
+- **Phase E (Eager):** This contains everything that's needed to get to the largest contentful paint (LCP).
+- **Phase L (Lazy):** This contains everything that is controlled by the project and largely served from the same origin.
+- **Phase D (Delayed):** This contains everything else such as third-party tags or assets that are not material to experience.
+
+The good:
+
+1. **Good Backend Performance**
+2. **LCP Blocks**
+3. **Proper Eager first LCP image.**
+4. **Deliver minimal for LCP**
+5. **Font fallback plugin**
+
+Could improve:
+
+1. **Header**
+2. **No mention of preloading**
+3. **Fixed code required to configure LCP_BLOCKS**
+
+Problems:
+
+1. **Queue / Prioritization with async-await code**
+2. **Icons as initial decoration script**
+
+# Good
+
+## Good Backend Performance
+
+Very good backend performance OOB and very small footprint under CDN.
+This seems the most impacting performance, at CDN in several sites, content and assets can reach amazing speed.
+
+### Production sites with server response under 40ms
+
+Examples
+
+- [Netcentric.biz](https://www.netcentric.biz/)
+- [AEM Live](https://www.aem.live/home)
+
+## LCP Blocks
+
+One great point is to be able to configure what blocks represent LCP
+
+```javascript
+// at their script they allow a LCP_BLOCKS
+const LCP_BLOCKS = ['hero', 'logo-wall'];
+```
+
+## Eager first LCP image
+
+Although backend renders the first image as `loading="lazy"`, they transform it to `loading="eager"` at the blocking level, keeping it as good as it were preloaded.
+
+## Fonts
+
+They offer a plugin to properly check and set up custom fonts to avoid CLS [font fallback plugin](https://www.aem.live/developer/font-fallback)
+
+# Could Improve
+
+## Header
+
+Although they enforce that the header is not LCP, that definitely is the case in several Henkel sites where the logo is the main LCP, or header impacts CLS. So a non-prioritized header can easily impact CLS and, in some cases, even LCP.
+
+## Some Assets Could Be Preloaded.
+
+In some cases, preloading some assets would offer advantages on LCP and FP.
+
+## Fixed Code Required to Configure LCP_BLOCKS
+
+That also can be an issue if you have different blocks on different pages.
+
+# Problems
+
+Well, although it's actually a well-performing script, it relies a lot on queue and async-await.
+
+- Chaining of Async function, that actually await, endup beeing basically synchronous/queue code.
+
+Queue will always offer a step-by-step loading and reduce the concurrency, increasing the time to load overall and can lead to longer load times.
+
+## This Repo on OOB Script on Regular WiFi Network No CDN
+
+![OOB script on regular WiFi network no CDN](../assets/franklin-regular-network.png)
+
+## This Repo on OOB Script on Slow 3G
+
+![OOB script on slow 3G](../assets/franklin-slow3g-network.png)
+
+Get's clear the async-await/queue impact.
+
+## At Netcentric.biz
+
+![Netcentric.biz](../assets/netcentricbiz.png)
+
+## At AEM.live
+
+![AEM.live](../assets/aemlive1.png)
+
+## Here another issue due to icons loaded before since they are defined at the initial script
+
+Concern of icons should not be at the main script.
+
+![AEM.live](../assets/aemlive2.png)
\ No newline at end of file
diff --git a/docs/edge/server.md b/docs/edge/server.md
new file mode 100644
index 00000000..6661b044
--- /dev/null
+++ b/docs/edge/server.md
@@ -0,0 +1,134 @@
+# Edge Delivery Server Rendering
+
+In this section, we will briefly discuss the current Edge Delivery Boilerplate/Out of the Box (OOB) methods and rationale for improvement.
+
+## Advantages
+
+- Simple document-based authoring
+- Fast server-side delivery
+
+## Simple Document-based Authoring
+
+This can be summarized into two key aspects:
+
+- Converting documents into HTML
+- Transforming Excel/spreadsheets into JSON
+
+This approach provides a clean and straightforward method for generating HTML and JSON based on documents and document trees.
+
+### Docs into HTML - Server-side Render
+
+A sample doc file with an example text will be rendered into the following HTML:
+
+```HTML
+<!doctype html>
+<html>
+  <head>
+    <title>Name of the document</title>
+      <!--
+        content of meta tags and open graph tags
+       -->
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script src="/scripts/lib-franklin.js" type="module"></script>
+    <script src="/scripts/scripts.js" type="module"></script>
+    <link rel="stylesheet" href="/styles/styles.css" />
+  </head>
+  <body>
+    <header></header>
+    <main>
+      <!--
+        content of the document
+       -->
+    </main>
+    <footer></footer>
+  </body>
+</html>
+```
+
+The document content will be transformed into the corresponding HTML structure as shown below:
+
+Example document:
+![Alt text](../assets/doc-example.png)
+
+Output:
+
+```HTML
+<div>
+  <p>Normal text</p>
+  <h1 id="title">Title</h1>
+  <h3 id="sub-title">Sub title</h3>
+  <h2 id="heading-2-more-content-to-example">
+    Heading 2 more content to example
+  </h2>
+  <h3 id="heading-3">Heading 3</h3>
+  <h4 id="heading-4">Heading 4</h4>
+  <h5 id="heading-5">Heading 5</h5>
+  <h6 id="heading-6">Heading 6</h6>
+  <div class="table-heading-1">
+    <div>
+      <div>Table row 1 col 1</div>
+      <div>Table row 1 col 2</div>
+      <div>Table row 1 col3</div>
+    </div>
+    <div>
+      <div>Table row 2 col 1</div>
+      <div>Table row 2 col 2-3</div>
+    </div>
+  </div>
+  <p>
+    <a href="https://www.w3schools.com/html/html_links.asp">This is a link example</a>
+  </p>
+</div>
+```
+
+Server-side rendering follows these rules:
+
+1. Titles are formatted as H1.
+2. Subtitles are formatted as H3.
+3. All other headings follow the proper name-element correlation.
+4. Headings are assigned an ID based on their content.
+5. Tables will render with only one header as a class name in lowercase, dash-separated.
+6. Table rows will create one div per column.
+7. Tables will be rendered as `<table>` only when inside another table.
+8. A div can be wrapped by adding `---` into the document.
+9. Break lines are represented as `<p>`.
+10. Links are generally wrapped in `<p>` tags and then enclosed within an `<a>`.
+
+### Spreadsheets into JSON
+
+Spreadsheet content is rendered into a simple JSON format as shown in the example:
+![Alt text](../assets/sheet-example.png)
+
+```json
+{
+  "total": 3,
+  "offset": 0,
+  "limit": 3,
+  "data": [
+    {
+      "propertyName1": "value 2A",
+      "propertyName2": "value 2B",
+      "propertyName3": "value 2C"
+    },
+    {
+      "propertyName1": "value 3A",
+      "propertyName2": "value 3B",
+      "propertyName3": "value 3C"
+    },
+    {
+      "propertyName1": "value 4A",
+      "propertyName2": "",
+      "propertyName3": "value 4C"
+    }
+  ],
+  ":type": "sheet"
+}
+```
+
+### OOB Exceptions
+
+### Metadata and robots.txt
+
+A spreadsheet named `metadata` will be rendered as HTML `<meta>` and define `robots.txt`.
+
+For more details, refer to [Adobe Experience Manager Cloud Service Documentation](https://experienceleague.adobe.com/docs/experience-manager-cloud-service/content/edge-delivery/publish/authoring.html?lang=en).
diff --git a/docs/raqn/components.md b/docs/raqn/components.md
new file mode 100644
index 00000000..071ec1d4
--- /dev/null
+++ b/docs/raqn/components.md
@@ -0,0 +1,205 @@
+# Component-Based Development with Custom Elements
+
+We aim to add features as reusable components instead of a composition of functions.
+
+This approach allows us to:
+
+1. Have a clear component life cycle.
+2. Enforce good code practices.
+3. Facilitate easy reusability.
+
+## Defining Concerns and Features in Component-Based Architecture
+
+For better separation of concerns, we should define features as components.
+
+Let's consider an example by examining some concerns defined in the main OOB script for EDS:
+
+1. Decorate buttons.
+2. Placeholders.
+3. Load icons.
+4. Restructure headings.
+
+These concerns should not be part of the general initial script:
+
+- A button should be the concern of its component, not a convention based on being inside a div.
+- Placeholders should be the concern of sites that require them.
+- Icons should only be loaded for pages that need them.
+- Headings can be defined by authors, and semantic meaning should also be the concern of authors or a specific component.
+
+We should be able to set components and features on the fly without obligations as components.
+
+## Simple Component Loader
+
+Instead of using several decoration functions, we can set up a simple component loader to "decorate and prepare."
+
+This approach allows:
+
+1. Keeping the "blocks" as functional scripts.
+2. Using custom elements instead.
+3. Properly setting up data and params from the class instead of semantic content data.
+4. Setting params per breakpoint.
+
+## Component Loader
+
+### Setup Params and Custom Elements
+
+Document example:
+
+![Hero](../assets/hero-example.png)
+
+With the example, our component loader will:
+
+1. Attempt to load a hero component or block.
+2. Check if the loaded default has a name and not a function named "decorate."
+3. Read and create element attributes based on class names.
+4. If not, it will create a custom element based on the name of the component.
+5. If it is a decorate function, keep it as EDS.
+
+## Base Custom Element Component
+
+A standard custom element is our definition of a component:
+
+1. Extends HTMLElement.
+2. Predefines some extra life cycle methods:
+   1. `connectedCallback`
+   2. Load external content if the `external` property exists.
+   3. Run the component loader on its content if external.
+   4. Add a life cycle for processing external HTML as `processExternal`.
+   5. Add a `connected` callback after previous setup and externals are loaded.
+   6. Add a `ready` life cycle to set up things when everything is ready.
+3. Keeps all other custom element features.
+
+See [component-base](../../scripts/component-base.js)
+
+With the component loader, it will be rendered as:
+
+```html
+<raqn-hero id="gen629e56de">
+  <div>
+    <picture>
+      <!-- ... -->
+    </picture>
+  </div>
+  <div>
+    <h2 id="get-started-1">Get started</h2>
+    <p>
+      Learn the basics: how to best get started and create a page. And how to
+      transfer your brand theme to the new capabilities of RAQN web.
+    </p>
+  </div>
+</raqn-hero>
+```
+
+## Custom Element Example
+
+Let's bring that custom element to life:
+
+```javascript
+import ComponentBase from '../../scripts/component-base.js';
+
+export default class Hero extends ComponentBase {
+  static observedAttributes = ['order'];
+
+  ready() {
+    this.order = this.getAttribute('order');
+    // Add some extra classes
+    this.classList.add('full-width');
+    this.setAttribute('role', 'banner');
+    // Set up a CSS variable
+    this.style.setProperty('--hero-hero-order', this.getAttribute('order'));
+  }
+}
+```
+
+This example:
+
+1. Uses the `ready` callback when the custom element is defined and added to the page.
+2. Sets up some classes, attributes, and sets a CSS variable.
+
+### Passing Attributes to Your Component
+
+Let's use the document to pass the param:
+
+![Order](../assets/hero-order-param-0.png)
+
+With this change, you will pass a param to your component:
+
+```html
+<raqn-hero order="0" id="gen58aa7c0c" class="full-width" role="banner">
+  <div>
+    <picture>
+      <!-- ... -->
+    </picture>
+  </div>
+  <div>
+    <!-- ... -->
+  </div>
+</raqn-hero>
+```
+
+Now, let's add a little style at `hero.css`:
+
+```css
+/* Block-specific CSS goes here */
+raqn-hero {
+  --hero-background-color: var(--scope-background, black);
+  --hero-color: var(--scope-color, white);
+  --hero-grid-template-columns: 0.6fr 0.4fr;
+  --hero-hero-order: 0;
+
+  background-color: var(--hero-background-color);
+  color: var(--hero-color);
+  align-items: center;
+  grid-template-columns: var(--hero-grid-template-columns, 1fr);
+
+  @media screen and (max-width: 768px) {
+    --hero-grid-template-columns: 1fr;
+  }
+
+  & > div:first-child {
+    order: var(--hero-hero-order);
+  }
+}
+```
+
+Now, we should have something like (apart from theme definitions, see [theme](theme.md)):
+
+![Hero](../assets/hero.png)
+
+### Changing Params by Document
+
+![Hero Param](../assets/hero-param.png)
+
+These changes will:
+
+1. Set the param to 1.
+2. Set the variable order to CSS.
+
+Then we'll see changes like:
+
+![Hero Applied](../assets/hero-param-1.png)
+
+A param is set to all viewports.
+
+## Setting Param Only to a Viewport
+
+To set a param only to a specific viewport, prefix it with the viewport key:
+
+1. **s**: 0 to 767,
+2. **m**: 768 to 1023,
+3. **l**: 1024 to 1279,
+4. **xl**: 1280 to 1919,
+5. **xxl**: 1920.
+
+Let's set the order param to apply only on the S (0 to 767) viewport:
+
+![Mobile Param](../assets/hero-mobile-param.png)
+
+Now, the param is only set on S viewports:
+
+![Mobile Param Preview](../assets/hero-mobile-param-preview.png)
+
+Where:
+
+1. Regular params will be set to all viewports.
+2. Prefixed params will be applied only to the specific viewport, overriding the general one.
\ No newline at end of file
diff --git a/docs/raqn/perfomance.md b/docs/raqn/perfomance.md
new file mode 100644
index 00000000..fa36e938
--- /dev/null
+++ b/docs/raqn/perfomance.md
@@ -0,0 +1,111 @@
+# Performance Optimization for EDS
+
+## Edge Delivery
+
+In our pursuit of enhancing overall performance on EDS, we focus on optimizing Edge Delivery scripts. The guiding principles are as follows:
+
+1. **Eager Loading:** Prioritize critical files such as `main files`, `style.css`, and `script.js`.
+2. **Lazy Loading:** Queue secondary priority items.
+3. **Delay Loading:** Postpone non-essential code execution.
+
+Explore more details [here](../edge/performance.md).
+
+## Assumptions
+
+As highlighted in [Keeping It 100, Web Performance](https://www.aem.live/developer/keeping-it-100#three-phase-loading-e-l-d):
+
+> "It is a good rule of thumb to keep the aggregate payload before the LCP below 100kb, resulting in an LCP event quicker than 1560ms (LCP scoring at 100 in PSI). Especially on mobile, the network tends to be bandwidth constrained, so changing the loading sequence before LCP has minimal to no impact."
+
+This underscores the significance of adhering to a performance budget and how queuing influences it.
+
+# OOB Implementation Queue
+
+In line with the performance budget, we default to minimizing assets and scripts in the main priority. However, indiscriminate queuing can negate the benefits of concurrency and other optimizations.
+
+### Default Bootstrap Script
+
+![EDS](../assets/franklin-regular-network.png)
+
+The impact of queuing during page load is evident here, where multiple assets queue before FCP and LCP, leading to conflicts, delays, and potential CLS issues.
+
+![Slow Network](../assets/franklin-slow3g-network.png)
+
+Queuing's impact becomes more pronounced on a slow network.
+
+## Checking Concurrency and Delaying
+
+Examining three key hypotheses:
+
+1. Concurrency yields better results.
+2. Resolving Load and DOMContentLoaded conflicts is beneficial.
+3. Concurrency with the three-phase approach improves performance.
+
+Explore additional examples in [EDS performance](../edge/performance.md).
+
+## Concurrency, Load, and Keeping Three Phases
+
+Improving performance by leveraging concurrency, optimizing load, and retaining the three-phase structure.
+
+![Regular Network](../assets/raqn-wifi-await.png)
+![Slow Network](../assets/raqn-slow3g-await.png)
+
+Notable improvements include reduced overall load times and LCP, especially on slow networks.
+
+## Concurrency, Load, and Removing Three Phases
+
+Prioritizing loading without enforcing delays, focusing on LCP components, and allowing other items to load concurrently.
+
+![Regular Network](../assets/raqn-wifi-regular.png)
+![Slow Network](../assets/raqn-slow3g-regular.png)
+
+Significant performance gains, particularly with enhanced concurrency and correct firing of DOMContentLoaded and Load events.
+
+# Conclusion
+
+Opting for regular prioritization and concurrency loading yields superior gains, aligning with the established performance budget guideline.
+
+## Further Improvements
+
+- **Editorial Control Over LCP (Largest Contentful Paint):** Empowering editors to specify components for LCP on each page.
+- **Selective Eager Loading of Images:** Providing the ability to load images eagerly based on editorial preferences and performance considerations.
+
+# Editorial Control Over LCP
+
+Given the diverse templates and components on pages, editorial control over LCP becomes crucial.
+
+1. Select the number of images to prioritize.
+2. Define components to prioritize for LCP.
+
+## Metadata for LCP and Eager Images
+
+Define LCP components and eager-loading images in metadata.
+
+![Metadata Example](../assets/eager-lcp.png)
+
+1. **lcp:** Comma-separated component/block names.
+2. **eager-images:** Number of images for eager loading.
+
+## Defining LCP Components
+
+Without defining LCP, components load in order of appearance.
+
+![No LCP](../assets/no-lcp-loading.png)
+
+After setting up LCP order (`theme, header, navigation`):
+
+![LCP Setup Preview](../assets/lcp-setup-preview-1.png)
+
+Now you can:
+
+1. Establish the order of loading.
+2. Prioritize components for loading as priority 1.
+
+## Defining Eager Images
+
+Introducing eager loading for the first hero image using metadata.
+
+![Eager Image Setup](../assets/eager-image-doc.png)
+
+Preview of the result:
+
+![Eager Image Preview](../assets/eager-image-preview.png)
\ No newline at end of file
diff --git a/docs/raqn/reasoning.md b/docs/raqn/reasoning.md
new file mode 100644
index 00000000..2679aa24
--- /dev/null
+++ b/docs/raqn/reasoning.md
@@ -0,0 +1,24 @@
+# Reasoning for Edge Delivery Server (EDS) Implementation
+
+We aim to leverage Edge Delivery capabilities while enhancing key features integral to RAQN web:
+
+1. **Component-Based Development:**
+   We are adopting a component-based architecture to facilitate the addition of features as reusable components, moving away from the conventional composition of functions. This approach provides several advantages:
+   - **Clear Component Life Cycle:** Components will have well-defined life cycles, making it easier to manage their behavior and interactions.
+   - **Enforced Code Practices:** By structuring development around components, we enforce good coding practices, leading to cleaner and more maintainable code.
+   - **Easy Reusability:** Components can be easily reused across various parts of the application, promoting a modular and scalable development approach.
+
+2. **Authoring Theming Capabilities:**
+   Our goal is to empower authors to create efficient and visually appealing websites without requiring a dedicated development team. This entails allowing the same code to be dynamically customized in terms of:
+   - **Color Schemes:** Authors can easily change the color palette to match the branding or design preferences.
+   - **Layout Composition:** Authors have the flexibility to adjust grid structures, margins, and borders to achieve the desired layout.
+   - **Icon Customization:** The ability to change icons provides authors with creative control over visual elements.
+   - **Font Selection:** Authors can choose different fonts to enhance the overall aesthetic.
+   - **Specific Style Applications:** Authors can apply specific styles to components or elements, ensuring a tailored appearance.
+
+3. **Fine-Grained Performance:**
+   Similar to the theming concept, we aim to provide fine-grained control over the performance characteristics of the website. This involves tailoring the same codebase to accommodate variations in performance requirements without requiring additional development effort. The key requirements for achieving fine-grained performance include:
+   - **Editorial Control Over LCP (Largest Contentful Paint):** Allowing editors to specify which components serve as the largest contentful paint on each page.
+   - **Selective Eager Loading of Images:** Providing the capability to selectively load images eagerly based on editorial preferences and performance considerations.
+
+In essence, our approach to EDS implementation revolves around empowering both developers and authors, ensuring a balance between flexibility and control. By embracing component-based development, authoring theming capabilities, and fine-grained performance tuning, we aim to create a platform that is not only powerful but also user-friendly and adaptable to diverse web development needs. As a proof of concept, we are recreating the [RAQN Guide](https://guide.raqn.io/) within the EDS framework.
\ No newline at end of file
diff --git a/docs/raqn/theming.md b/docs/raqn/theming.md
new file mode 100644
index 00000000..43b5744f
--- /dev/null
+++ b/docs/raqn/theming.md
@@ -0,0 +1,223 @@
+# Theming
+
+To enhance future developments, we aim to introduce theme capabilities within the EDS environment. This empowers authors to:
+
+1. **Change layout**
+2. **Adjust colors**
+3. **Modify icons**
+4. **Define font styles**
+
+## CSS variables for theme
+
+ Leveraging EDS capabilities for delivering a spreadsheet as JSON, we'll employ a `theme.xls` as a theme storage. The following example illustrates the structure:
+
+![Theme concept](../assets/theme-concept-excel.png)
+
+- The first row defines the name of the theme, which can be expressed as strings (e.g., primary, secondary) or numbers for simplicity. *(Note: The A1 cell is illustrative, and its value is ignored.)*
+- The first column outlines the property/variable names.
+
+For effective theme application, we require:
+
+- Global CSS variables
+- Atomic classes for styling components or blocks
+- Full theme classes to apply all properties
+
+The basic rule for rendering these is:
+
+```javascript
+${property}-${columnName}: ${value};
+```
+
+```css
+/* Global CSS variables */
+body {
+    --raqn-color-1: red;
+    --raqn-color-2: blue;
+    --raqn-color-default: black;
+    --raqn-background-1: #eee;
+    --raqn-background-2: #ddd;
+    --raqn-background-default: #fff;
+}
+/* Atomic classes with specificity of 2 */
+body .color-1 {
+    --scope-color: var(--raqn-color-1);
+}
+body .color-2 {
+    --scope-color: var(--raqn-color-2);
+}
+body .color-default {
+    --scope-color: var(--raqn-color-default);
+}
+body .background-1 {
+    --scope-background: var(--raqn-background-1);
+}
+body .background-2 {
+    --scope-background: var(--raqn-background-2);
+}
+body .background-default {
+    --scope-background: var(--raqn-background-default);
+}
+/* Theme classes to apply all scopes */
+.theme-1 {
+    --scope-color: var(--raqn-color-1);
+    --scope-background: var(--raqn-background-1);
+}
+.theme-2 {
+    --scope-color: var(--raqn-color-2);
+    --scope-background: var(--raqn-background-2);
+}
+.theme-default {
+    --scope-color: var(--raqn-color-default);
+    --scope-background: var(--raqn-background-default);
+}
+```
+
+## Font tags
+
+To define default font sizes and other properties, a second column is introduced. The key difference is that fonts need to be defined independently of the theme. The rule is:
+
+```javascript
+${tags} {
+    // allowed properties: 'font-size', 'font-weight', 'font-family', 'line-height', 'font-style'
+    ${property}: ${value};
+}
+```
+
+CSS output:
+
+```css
+h1, .heading1 {
+    font-size: 40px;
+    font-weight: bold;
+    line-height: 1.4em;
+}
+h2, .heading2 {
+    font-size: 30px;
+    font-weight: 600;
+    line-height: 1em;
+    font-style: italic;
+}
+h3, .heading3 {
+    font-size: 25px;
+    font-weight: bold;
+}
+h4, .heading4 {
+    font-size: 20px;
+    font-weight: bold;
+}
+h5, .heading5 {
+    font-size: 18px;
+    font-weight: bold;
+}
+p,body,pre,input {
+    font-size: 12px;
+    font-weight: normal;
+    font-family: Roboto,Arial, sans-serif;
+    line-height: 1.2em;
+    font-style: normal;
+}
+```
+
+## Fonts example
+
+With the theme defined above, let's examine the application:
+
+Document:
+![Document](../assets/simple-doc.png)
+
+Output:
+![Output](../assets/font-example.png)
+
+## Default theme
+
+The theme and fonts are applied by default to the site:
+
+```HTML
+<body class="theme-default">
+<!-- ... -->
+</body>
+```
+
+## Additional variables
+
+You can set up additional variables for general purposes. Here are some examples:
+
+1. **Colors Variables**
+    - `background`: Change general background
+    - `inner-background`: Change a child element background, e.g., card backgrounds
+    - `link-color`: Link colors
+    - `link-color-hover`: Link hover and active color
+    - `accent-color`: Buttons and CTAs color
+    - `accent-background`: Buttons and CTAs background
+    - `accent-color-hover`: Buttons and CTAs hover and active color
+    - `accent-background-hover`: Buttons and CTAs hover and active background
+    - `header-background`: Header background
+    - `header-color`: Header text color
+    - `headings-color`: Headings color (h1 to h3)
+    - `footer-background`: Footer background color
+2. **Block Model**
+    - `max-width`: Full width / max container (preferably using vw unit)
+    - `padding`: Padding of an element
+    - `inner-padding`: Padding of a child element, e.g., cards
+    - `gap`: Grid gap between columns
+    - `margin`: Margin of an element
+    - `icon-size`: Icon size (square)
+3. **Alignment**
+    - `align`: Vertical alignment of elements
+    - `justify`: Horizontal alignment of elements
+
+## Example of Theme spreadsheet
+
+Here's an example file: [Theme Example](../assets/theme.xlsx)
+
+## Applying theme
+
+As mentioned earlier, the default theme is applied. Using the provided file as an example:
+
+![Applying Theme](../assets/theme-example-apply.png)
+
+Comparing the default and the C column (1), a classname of `.theme-1` would apply changes on top of the `.theme-default`. Thus, a component example using the default hero would take the default theme column:
+
+![Hero Default Theme](../assets/hero-theme-default.png)
+
+It would look like:
+
+![Hero Default Preview](../assets/hero-theme-default-preview.png)
+
+Moving it to the second theme is achieved by setting a class:
+
+![Hero Theme 1](../assets/hero-theme-1.png)
+
+And the resulting preview:
+
+![Hero Theme 1 Preview](../assets/hero-theme-1-preview.png)
+
+## Atomic theming class
+
+Individual styles of the theme can be changed by combining the key row with the first-row columns. For example:
+
+![Atomic Theming Example](../assets/atomic-example.png)
+
+At row 13, the key name is `headings-color`, and the theme column is `1`. Applying the value is done using the classname `headings-color-1`:
+
+![Hero Atomic 1](../assets/hero-atomic-1.png)
+
+And its corresponding documentation:
+
+![Hero Atomic 1 Documentation](../assets/hero-atomic-1-doc.png)
+
+## Applying theme without block
+
+A special block named **Style** allows the use of only theme and atomic classes, without loading additional features. Here's an example:
+
+Wherer:
+1 - You don't need to add `class=` just the classname 
+2 - No other feature or block is loaded
+
+![Style Example](../assets/style-example.png)
+
+## Limitations
+
+Although we have developed a font-face theme definition, the current EDGE delivery lacks the capability to maintain fonts in drive or serve them:
+
+![Font Limitation](../assets/font-limitation.png)
\ No newline at end of file
diff --git a/docs/readme.md b/docs/readme.md
new file mode 100644
index 00000000..b3ac892b
--- /dev/null
+++ b/docs/readme.md
@@ -0,0 +1,17 @@
+# RAQN - Edge Delivery
+
+This project is a RAQN option for using edge deliver.
+
+Summary
+
+1. Edge Delivery OOB
+
+   1. [Server rendering](edge/server.md)
+   2. [Client side features](edge/client.md)
+   3. [Perfomance](edge/perfomance.md)
+
+2. RAQN POC
+   1. [Reasoning](raqn/reasoning.md)
+   2. [Component base development](raqn/components.md)
+   3. [Theming and authoring](./raqn/theming.md)
+   4. [Perfomance](./raqn/perfomance.md)
diff --git a/fonts/segoe-ui-bold.woff b/fonts/segoe-ui-bold.woff
new file mode 100644
index 00000000..a6b0a974
Binary files /dev/null and b/fonts/segoe-ui-bold.woff differ
diff --git a/fonts/segoe-ui-italic.woff b/fonts/segoe-ui-italic.woff
new file mode 100644
index 00000000..1649115c
Binary files /dev/null and b/fonts/segoe-ui-italic.woff differ
diff --git a/fonts/segoe-ui-regular.woff b/fonts/segoe-ui-regular.woff
new file mode 100644
index 00000000..a45efa32
Binary files /dev/null and b/fonts/segoe-ui-regular.woff differ
diff --git a/fstab.yaml b/fstab.yaml
index 29d2b711..cc064e73 100644
--- a/fstab.yaml
+++ b/fstab.yaml
@@ -1,2 +1,2 @@
 mountpoints:
-  /: https://drive.google.com/drive/u/0/folders/1asM8P6PhF3XaWng6t7AET_0gN1NAkAI3
+  /:  https://drive.google.com/drive/u/0/folders/1asM8P6PhF3XaWng6t7AET_0gN1NAkAI3
diff --git a/head.html b/head.html
index 290a57f0..6f07eff5 100644
--- a/head.html
+++ b/head.html
@@ -1,4 +1,14 @@
-<meta name="viewport" content="width=device-width, initial-scale=1"/>
-<script src="/scripts/lib-franklin.js" type="module"></script>
-<script src="/scripts/scripts.js" type="module"></script>
-<link rel="stylesheet" href="/styles/styles.css"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+<link
+  rel="preload"
+  href="/header.plain.html"
+  as="fetch"
+  crossorigin="anonymous"
+/>
+<link rel="stylesheet" href="/styles/styles.css" />
+<script src="/scripts/init.js" type="module"></script>
+<script src="/scripts/libs.js" type="module"></script>
+<script src="/scripts/component-loader.js" type="module"></script>
+<script src="/scripts/component-base.js" type="module"></script>
+<style class="theme"></style>
diff --git a/icons/search.svg b/icons/search.svg
deleted file mode 100644
index 637c677b..00000000
--- a/icons/search.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-  <path d="M16.9,15.5c2.4-3.2,2.2-7.7-0.7-10.6c-3.1-3.1-8.1-3.1-11.3,0c-3.1,3.2-3.1,8.3,0,11.4
-    c2.9,2.9,7.5,3.1,10.6,0.6c0,0.1,0,0.1,0,0.1l4.2,4.2c0.5,0.4,1.1,0.4,1.5,0c0.4-0.4,0.4-1,0-1.4L16.9,15.5
-    C16.9,15.5,16.9,15.5,16.9,15.5L16.9,15.5z M14.8,6.3c2.3,2.3,2.3,6.1,0,8.5c-2.3,2.3-6.1,2.3-8.5,0C4,12.5,4,8.7,6.3,6.3
-    C8.7,4,12.5,4,14.8,6.3z"/>
-</svg>
diff --git a/package-lock.json b/package-lock.json
index c23bc9b6..365f926a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,10 @@
         "chai": "4.3.7",
         "eslint": "8.35.0",
         "eslint-config-airbnb-base": "15.0.0",
+        "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-import": "2.27.5",
+        "husky": "^8.0.0",
+        "prettier-eslint": "^16.2.0",
         "semantic-release": "21.0.5",
         "sinon": "15.0.1",
         "stylelint": "15.2.0",
@@ -539,6 +542,18 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "node_modules/@jest/schemas": {
+      "version": "29.6.3",
+      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
+      "integrity": "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==",
+      "dev": true,
+      "dependencies": {
+        "@sinclair/typebox": "^0.27.8"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
@@ -1623,6 +1638,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@sinclair/typebox": {
+      "version": "0.27.8",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
+      "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
+      "dev": true
+    },
     "node_modules/@sinonjs/commons": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-2.0.0.tgz",
@@ -1932,6 +1953,160 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "6.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.16.0.tgz",
+      "integrity": "sha512-H2GM3eUo12HpKZU9njig3DF5zJ58ja6ahj1GoHEHOgQvYxzoFJJEvC1MQ7T2l9Ha+69ZSOn7RTxOdpC/y3ikMw==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "6.16.0",
+        "@typescript-eslint/types": "6.16.0",
+        "@typescript-eslint/typescript-estree": "6.16.0",
+        "@typescript-eslint/visitor-keys": "6.16.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "6.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.16.0.tgz",
+      "integrity": "sha512-0N7Y9DSPdaBQ3sqSCwlrm9zJwkpOuc6HYm7LpzLAPqBL7dmzAUimr4M29dMkOP/tEwvOCC/Cxo//yOfJD3HUiw==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "6.16.0",
+        "@typescript-eslint/visitor-keys": "6.16.0"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "6.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.16.0.tgz",
+      "integrity": "sha512-hvDFpLEvTJoHutVl87+MG/c5C8I6LOgEx05zExTSJDEVU7hhR3jhV8M5zuggbdFCw98+HhZWPHZeKS97kS3JoQ==",
+      "dev": true,
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "6.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.16.0.tgz",
+      "integrity": "sha512-VTWZuixh/vr7nih6CfrdpmFNLEnoVBF1skfjdyGnNwXOH1SLeHItGdZDHhhAIzd3ACazyY2Fg76zuzOVTaknGA==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "6.16.0",
+        "@typescript-eslint/visitor-keys": "6.16.0",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "minimatch": "9.0.3",
+        "semver": "^7.5.4",
+        "ts-api-utils": "^1.0.1"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
+      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "6.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.16.0.tgz",
+      "integrity": "sha512-QSFQLruk7fhs91a/Ep/LqRdbJCZ1Rq03rqBdKT5Ky17Sz8zRLUksqIe9DW0pKtg/Z35/ztbLQ6qpOCN6rOC11A==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "6.16.0",
+        "eslint-visitor-keys": "^3.4.1"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
     "node_modules/@web/browser-logs": {
       "version": "0.2.5",
       "resolved": "https://registry.npmjs.org/@web/browser-logs/-/browser-logs-0.2.5.tgz",
@@ -3027,6 +3202,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/common-tags": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.2.tgz",
+      "integrity": "sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/compare-func": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/compare-func/-/compare-func-2.0.0.tgz",
@@ -3574,6 +3758,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true
+    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -4016,6 +4206,18 @@
         "eslint-plugin-import": "^2.25.2"
       }
     },
+    "node_modules/eslint-config-prettier": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
+      "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==",
+      "dev": true,
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
     "node_modules/eslint-import-resolver-node": {
       "version": "0.3.7",
       "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz",
@@ -5057,6 +5259,27 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/has-ansi": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
+      "integrity": "sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/has-ansi/node_modules/ansi-regex": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/has-bigints": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
@@ -5281,6 +5504,21 @@
         "node": ">=10.17.0"
       }
     },
+    "node_modules/husky": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-8.0.3.tgz",
+      "integrity": "sha512-+dQSyqPh4x1hlO1swXBiNb2HzTDN1I2IGLQx1GrBuiqFJfoMrnZWwVmatvSiO+Iz8fBUnf+lekwNo4c2LlXItg==",
+      "dev": true,
+      "bin": {
+        "husky": "lib/bin.js"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -6449,6 +6687,84 @@
         "node": ">=8"
       }
     },
+    "node_modules/loglevel": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.8.1.tgz",
+      "integrity": "sha512-tCRIJM51SHjAayKwC+QAg8hT8vg6z7GSgLJKGvzuPb1Wc+hLzqtuVLxp6/HzSPOozuK+8ErAhy7U/sVzw8Dgfg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6.0"
+      },
+      "funding": {
+        "type": "tidelift",
+        "url": "https://tidelift.com/funding/github/npm/loglevel"
+      }
+    },
+    "node_modules/loglevel-colored-level-prefix": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/loglevel-colored-level-prefix/-/loglevel-colored-level-prefix-1.0.0.tgz",
+      "integrity": "sha512-u45Wcxxc+SdAlh4yeF/uKlC1SPUPCy0gullSNKXod5I4bmifzk+Q4lSLExNEVn19tGaJipbZ4V4jbFn79/6mVA==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^1.1.3",
+        "loglevel": "^1.4.1"
+      }
+    },
+    "node_modules/loglevel-colored-level-prefix/node_modules/ansi-regex": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/loglevel-colored-level-prefix/node_modules/ansi-styles": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+      "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/loglevel-colored-level-prefix/node_modules/chalk": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+      "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^2.2.1",
+        "escape-string-regexp": "^1.0.2",
+        "has-ansi": "^2.0.0",
+        "strip-ansi": "^3.0.0",
+        "supports-color": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/loglevel-colored-level-prefix/node_modules/strip-ansi": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+      "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/loglevel-colored-level-prefix/node_modules/supports-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+      "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/loupe": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.3.tgz",
@@ -10766,6 +11082,70 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.1.1.tgz",
+      "integrity": "sha512-22UbSzg8luF4UuZtzgiUOfcGM8s4tjBv6dJRT7j275NXsy2jb4aJa4NNveul5x4eqlF1wuhuR2RElK71RvmVaw==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-eslint": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/prettier-eslint/-/prettier-eslint-16.2.0.tgz",
+      "integrity": "sha512-GDTSKc62VaLceiaI/qMaKo2oco2CIWtbj4Zr6ckhbTgcBL/uR0d9jkMzh9OtBIT/Z7iBoCB4OHj/aJ5YuNgAuA==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/parser": "^6.7.5",
+        "common-tags": "^1.4.0",
+        "dlv": "^1.1.0",
+        "eslint": "^8.7.0",
+        "indent-string": "^4.0.0",
+        "lodash.merge": "^4.6.0",
+        "loglevel-colored-level-prefix": "^1.0.0",
+        "prettier": "^3.0.1",
+        "pretty-format": "^29.7.0",
+        "require-relative": "^0.8.7",
+        "typescript": "^5.2.2",
+        "vue-eslint-parser": "^9.1.0"
+      },
+      "engines": {
+        "node": ">=16.10.0"
+      }
+    },
+    "node_modules/pretty-format": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+      "dev": true,
+      "dependencies": {
+        "@jest/schemas": "^29.6.3",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^18.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -10912,6 +11292,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+      "dev": true
+    },
     "node_modules/read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -11166,6 +11552,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/require-relative": {
+      "version": "0.8.7",
+      "resolved": "https://registry.npmjs.org/require-relative/-/require-relative-0.8.7.tgz",
+      "integrity": "sha512-AKGr4qvHiryxRb19m3PsLRGuKVAbJLUD7E6eOaHkfKhwc+vSgVOCY5xNvm9EkolBKTOf0GrQAZKLimOCz81Khg==",
+      "dev": true
+    },
     "node_modules/resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -12658,6 +13050,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/ts-api-utils": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.0.3.tgz",
+      "integrity": "sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==",
+      "dev": true,
+      "engines": {
+        "node": ">=16.13.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.2.0"
+      }
+    },
     "node_modules/tsconfig-paths": {
       "version": "3.14.1",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz",
@@ -12751,6 +13155,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/typescript": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
+      "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "node_modules/typical": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/typical/-/typical-4.0.0.tgz",
@@ -12926,6 +13343,82 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/vue-eslint-parser": {
+      "version": "9.3.2",
+      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.3.2.tgz",
+      "integrity": "sha512-q7tWyCVaV9f8iQyIA5Mkj/S6AoJ9KBN8IeUSf3XEmBrOtxOZnfTg5s4KClbZBCK3GtnT/+RyCLZyDHuZwTuBjg==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^4.3.4",
+        "eslint-scope": "^7.1.1",
+        "eslint-visitor-keys": "^3.3.0",
+        "espree": "^9.3.1",
+        "esquery": "^1.4.0",
+        "lodash": "^4.17.21",
+        "semver": "^7.3.6"
+      },
+      "engines": {
+        "node": "^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mysticatea"
+      },
+      "peerDependencies": {
+        "eslint": ">=6.0.0"
+      }
+    },
+    "node_modules/vue-eslint-parser/node_modules/eslint-scope": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+      "dev": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/vue-eslint-parser/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/vue-eslint-parser/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/vue-eslint-parser/node_modules/semver": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/webidl-conversions": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
@@ -13587,6 +14080,15 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "@jest/schemas": {
+      "version": "29.6.3",
+      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
+      "integrity": "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==",
+      "dev": true,
+      "requires": {
+        "@sinclair/typebox": "^0.27.8"
+      }
+    },
     "@jridgewell/gen-mapping": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
@@ -14341,6 +14843,12 @@
         }
       }
     },
+    "@sinclair/typebox": {
+      "version": "0.27.8",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
+      "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
+      "dev": true
+    },
     "@sinonjs/commons": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-2.0.0.tgz",
@@ -14650,6 +15158,98 @@
         "@types/node": "*"
       }
     },
+    "@typescript-eslint/parser": {
+      "version": "6.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.16.0.tgz",
+      "integrity": "sha512-H2GM3eUo12HpKZU9njig3DF5zJ58ja6ahj1GoHEHOgQvYxzoFJJEvC1MQ7T2l9Ha+69ZSOn7RTxOdpC/y3ikMw==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/scope-manager": "6.16.0",
+        "@typescript-eslint/types": "6.16.0",
+        "@typescript-eslint/typescript-estree": "6.16.0",
+        "@typescript-eslint/visitor-keys": "6.16.0",
+        "debug": "^4.3.4"
+      }
+    },
+    "@typescript-eslint/scope-manager": {
+      "version": "6.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.16.0.tgz",
+      "integrity": "sha512-0N7Y9DSPdaBQ3sqSCwlrm9zJwkpOuc6HYm7LpzLAPqBL7dmzAUimr4M29dMkOP/tEwvOCC/Cxo//yOfJD3HUiw==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/types": "6.16.0",
+        "@typescript-eslint/visitor-keys": "6.16.0"
+      }
+    },
+    "@typescript-eslint/types": {
+      "version": "6.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.16.0.tgz",
+      "integrity": "sha512-hvDFpLEvTJoHutVl87+MG/c5C8I6LOgEx05zExTSJDEVU7hhR3jhV8M5zuggbdFCw98+HhZWPHZeKS97kS3JoQ==",
+      "dev": true
+    },
+    "@typescript-eslint/typescript-estree": {
+      "version": "6.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.16.0.tgz",
+      "integrity": "sha512-VTWZuixh/vr7nih6CfrdpmFNLEnoVBF1skfjdyGnNwXOH1SLeHItGdZDHhhAIzd3ACazyY2Fg76zuzOVTaknGA==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/types": "6.16.0",
+        "@typescript-eslint/visitor-keys": "6.16.0",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "minimatch": "9.0.3",
+        "semver": "^7.5.4",
+        "ts-api-utils": "^1.0.1"
+      },
+      "dependencies": {
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "dev": true,
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "minimatch": {
+          "version": "9.0.3",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
+          "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "^2.0.1"
+          }
+        },
+        "semver": {
+          "version": "7.5.4",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+          "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        }
+      }
+    },
+    "@typescript-eslint/visitor-keys": {
+      "version": "6.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.16.0.tgz",
+      "integrity": "sha512-QSFQLruk7fhs91a/Ep/LqRdbJCZ1Rq03rqBdKT5Ky17Sz8zRLUksqIe9DW0pKtg/Z35/ztbLQ6qpOCN6rOC11A==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/types": "6.16.0",
+        "eslint-visitor-keys": "^3.4.1"
+      },
+      "dependencies": {
+        "eslint-visitor-keys": {
+          "version": "3.4.3",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+          "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+          "dev": true
+        }
+      }
+    },
     "@web/browser-logs": {
       "version": "0.2.5",
       "resolved": "https://registry.npmjs.org/@web/browser-logs/-/browser-logs-0.2.5.tgz",
@@ -15441,6 +16041,12 @@
         }
       }
     },
+    "common-tags": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.2.tgz",
+      "integrity": "sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==",
+      "dev": true
+    },
     "compare-func": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/compare-func/-/compare-func-2.0.0.tgz",
@@ -15845,6 +16451,12 @@
         "path-type": "^4.0.0"
       }
     },
+    "dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true
+    },
     "doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -16279,6 +16891,13 @@
         "semver": "^6.3.0"
       }
     },
+    "eslint-config-prettier": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
+      "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==",
+      "dev": true,
+      "requires": {}
+    },
     "eslint-import-resolver-node": {
       "version": "0.3.7",
       "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz",
@@ -16985,6 +17604,23 @@
         "function-bind": "^1.1.1"
       }
     },
+    "has-ansi": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
+      "integrity": "sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+          "dev": true
+        }
+      }
+    },
     "has-bigints": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
@@ -17149,6 +17785,12 @@
       "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
       "dev": true
     },
+    "husky": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-8.0.3.tgz",
+      "integrity": "sha512-+dQSyqPh4x1hlO1swXBiNb2HzTDN1I2IGLQx1GrBuiqFJfoMrnZWwVmatvSiO+Iz8fBUnf+lekwNo4c2LlXItg==",
+      "dev": true
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -18030,6 +18672,64 @@
         }
       }
     },
+    "loglevel": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.8.1.tgz",
+      "integrity": "sha512-tCRIJM51SHjAayKwC+QAg8hT8vg6z7GSgLJKGvzuPb1Wc+hLzqtuVLxp6/HzSPOozuK+8ErAhy7U/sVzw8Dgfg==",
+      "dev": true
+    },
+    "loglevel-colored-level-prefix": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/loglevel-colored-level-prefix/-/loglevel-colored-level-prefix-1.0.0.tgz",
+      "integrity": "sha512-u45Wcxxc+SdAlh4yeF/uKlC1SPUPCy0gullSNKXod5I4bmifzk+Q4lSLExNEVn19tGaJipbZ4V4jbFn79/6mVA==",
+      "dev": true,
+      "requires": {
+        "chalk": "^1.1.3",
+        "loglevel": "^1.4.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^2.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
+          "dev": true
+        }
+      }
+    },
     "loupe": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.3.tgz",
@@ -20970,6 +21670,51 @@
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
       "dev": true
     },
+    "prettier": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.1.1.tgz",
+      "integrity": "sha512-22UbSzg8luF4UuZtzgiUOfcGM8s4tjBv6dJRT7j275NXsy2jb4aJa4NNveul5x4eqlF1wuhuR2RElK71RvmVaw==",
+      "dev": true
+    },
+    "prettier-eslint": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/prettier-eslint/-/prettier-eslint-16.2.0.tgz",
+      "integrity": "sha512-GDTSKc62VaLceiaI/qMaKo2oco2CIWtbj4Zr6ckhbTgcBL/uR0d9jkMzh9OtBIT/Z7iBoCB4OHj/aJ5YuNgAuA==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/parser": "^6.7.5",
+        "common-tags": "^1.4.0",
+        "dlv": "^1.1.0",
+        "eslint": "^8.7.0",
+        "indent-string": "^4.0.0",
+        "lodash.merge": "^4.6.0",
+        "loglevel-colored-level-prefix": "^1.0.0",
+        "prettier": "^3.0.1",
+        "pretty-format": "^29.7.0",
+        "require-relative": "^0.8.7",
+        "typescript": "^5.2.2",
+        "vue-eslint-parser": "^9.1.0"
+      }
+    },
+    "pretty-format": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+      "dev": true,
+      "requires": {
+        "@jest/schemas": "^29.6.3",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^18.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+          "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+          "dev": true
+        }
+      }
+    },
     "process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -21080,6 +21825,12 @@
         }
       }
     },
+    "react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+      "dev": true
+    },
     "read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -21269,6 +22020,12 @@
       "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
       "dev": true
     },
+    "require-relative": {
+      "version": "0.8.7",
+      "resolved": "https://registry.npmjs.org/require-relative/-/require-relative-0.8.7.tgz",
+      "integrity": "sha512-AKGr4qvHiryxRb19m3PsLRGuKVAbJLUD7E6eOaHkfKhwc+vSgVOCY5xNvm9EkolBKTOf0GrQAZKLimOCz81Khg==",
+      "dev": true
+    },
     "resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -22370,6 +23127,13 @@
       "integrity": "sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==",
       "dev": true
     },
+    "ts-api-utils": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.0.3.tgz",
+      "integrity": "sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==",
+      "dev": true,
+      "requires": {}
+    },
     "tsconfig-paths": {
       "version": "3.14.1",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz",
@@ -22441,6 +23205,12 @@
         "is-typed-array": "^1.1.9"
       }
     },
+    "typescript": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
+      "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
+      "dev": true
+    },
     "typical": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/typical/-/typical-4.0.0.tgz",
@@ -22567,6 +23337,54 @@
       "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
       "dev": true
     },
+    "vue-eslint-parser": {
+      "version": "9.3.2",
+      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.3.2.tgz",
+      "integrity": "sha512-q7tWyCVaV9f8iQyIA5Mkj/S6AoJ9KBN8IeUSf3XEmBrOtxOZnfTg5s4KClbZBCK3GtnT/+RyCLZyDHuZwTuBjg==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.3.4",
+        "eslint-scope": "^7.1.1",
+        "eslint-visitor-keys": "^3.3.0",
+        "espree": "^9.3.1",
+        "esquery": "^1.4.0",
+        "lodash": "^4.17.21",
+        "semver": "^7.3.6"
+      },
+      "dependencies": {
+        "eslint-scope": {
+          "version": "7.2.2",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+          "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+          "dev": true,
+          "requires": {
+            "esrecurse": "^4.3.0",
+            "estraverse": "^5.2.0"
+          }
+        },
+        "eslint-visitor-keys": {
+          "version": "3.4.3",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+          "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+          "dev": true
+        },
+        "estraverse": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+          "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+          "dev": true
+        },
+        "semver": {
+          "version": "7.5.4",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+          "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        }
+      }
+    },
     "webidl-conversions": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
diff --git a/package.json b/package.json
index 4587406e..589812c2 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,8 @@
     "lint:css": "stylelint blocks/**/*.css styles/*.css",
     "lint": "npm run lint:js && npm run lint:css",
     "lint:fix": "npm run lint:js -- --fix && npm run lint:css -- --fix",
-    "semantic-release": "semantic-release --debug"
+    "semantic-release": "semantic-release --debug",
+    "prepare": "husky install"
   },
   "repository": {
     "type": "git",
@@ -21,21 +22,24 @@
   },
   "homepage": "https://github.com/adobe/helix-project-boilerplate#readme",
   "devDependencies": {
+    "@babel/core": "7.21.0",
+    "@babel/eslint-parser": "7.19.1",
+    "@esm-bundle/chai": "4.3.4-fix.0",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",
-    "semantic-release": "21.0.5",
-    "@babel/core": "7.21.0",
-    "@babel/eslint-parser": "7.19.1",
+    "@web/test-runner": "0.15.1",
+    "@web/test-runner-commands": "0.6.5",
     "chai": "4.3.7",
     "eslint": "8.35.0",
     "eslint-config-airbnb-base": "15.0.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "2.27.5",
-    "@esm-bundle/chai": "4.3.4-fix.0",
-    "@web/test-runner": "0.15.1",
-    "@web/test-runner-commands": "0.6.5",
+    "semantic-release": "21.0.5",
+    "prettier-eslint": "^16.2.0",
     "sinon": "15.0.1",
     "stylelint": "15.2.0",
-    "stylelint-config-standard": "30.0.1"
+    "stylelint-config-standard": "30.0.1",
+    "husky": "^8.0.0"
   }
 }
diff --git a/scripts/component-base.js b/scripts/component-base.js
new file mode 100644
index 00000000..b64156b5
--- /dev/null
+++ b/scripts/component-base.js
@@ -0,0 +1,51 @@
+import { init, start } from './init.js';
+
+export default class ComponentBase extends HTMLElement {
+  constructor() {
+    super();
+    this.external = false;
+    this.dependencies = [];
+    this.uuid = `gen${crypto.randomUUID().split('-')[0]}`;
+  }
+
+  async connectedCallback() {
+    const initialized = this.getAttribute('initialized');
+    if (!initialized) {
+      this.setAttribute('id', this.uuid);
+      if (this.external) {
+        await this.load(this.external);
+      }
+      if (this.dependencies.length > 0) {
+        await Promise.all(this.dependencies.map((dep) => start({ name: dep })));
+      }
+      this.connected();
+      this.ready();
+      this.setAttribute('initialized', true);
+    }
+  }
+
+  async load(block) {
+    const response = await fetch(
+      `${block}`,
+      window.location.pathname.endsWith(block) ? { cache: 'reload' } : {},
+    );
+    return this.processExternal(response);
+  }
+
+  async processExternal(response) {
+    if (response.ok) {
+      const html = await response.text();
+      this.innerHTML = html;
+      return this.refresh(this);
+    }
+    return response;
+  }
+
+  refresh(el = this) {
+    init(el);
+  }
+
+  connected() {}
+
+  ready() {}
+}
diff --git a/scripts/component-loader.js b/scripts/component-loader.js
new file mode 100644
index 00000000..512a8b9c
--- /dev/null
+++ b/scripts/component-loader.js
@@ -0,0 +1,131 @@
+import { config, getBreakPoint } from './libs.js';
+
+export default class ComponentLoader {
+  constructor(blockName, element) {
+    window.raqnComponents = window.raqnComponents || {};
+    this.blockName = blockName;
+    this.setBlockPaths();
+    this.block = element;
+    if (this.block) {
+      this.setParams();
+      this.content = this.block.children;
+    }
+  }
+
+  async loadCSS(href) {
+    return new Promise((resolve, reject) => {
+      if (!document.querySelector(`head > link[href="${href}"]`)) {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = href;
+        link.onload = resolve;
+        link.onerror = reject;
+        document.head.append(link);
+      } else {
+        resolve();
+      }
+    });
+  }
+
+  setParams() {
+    const mediaParams = {};
+    this.params = {
+      ...Array.from(this.block.classList)
+        .filter((c) => c !== this.blockName && c !== 'block')
+        .reduce((acc, c) => {
+          const values = c.split('-');
+          let key = values.shift();
+          const breakpoint = getBreakPoint();
+          if (breakpoint === key) {
+            key = values.shift();
+            mediaParams[key] = values.join('-');
+            return acc;
+          }
+
+          if (config.breakpoints[key] !== undefined) {
+            return acc;
+          }
+
+          if (acc[key] && Array.isArray(acc[key])) {
+            acc[key].push(values.join('-'));
+          } else if (acc[key]) {
+            acc[key] = [acc[key], values.join('-')];
+          } else {
+            acc[key] = values.join('-');
+          }
+          return acc;
+        }, {}),
+      ...mediaParams,
+    };
+  }
+
+  setBlockPaths() {
+    this.cssPath = `/blocks/${this.blockName}/${this.blockName}.css`;
+    this.jsPath = `/blocks/${this.blockName}/${this.blockName}.js`;
+  }
+
+  setupElement() {
+    const elementName = `raqn-${this.blockName.toLowerCase()}`;
+    const element = document.createElement(elementName);
+    element.append(...this.block.children);
+    Object.keys(this.params).forEach((key) => {
+      const value = Array.isArray(this.params[key])
+        ? this.params[key].join(' ')
+        : this.params[key];
+      element.setAttribute(key, value);
+    });
+    this.block.replaceWith(element);
+  }
+
+  async loadWebComponent() {
+    return new Promise((resolve, reject) => {
+      (async () => {
+        try {
+          const mod = await import(this.jsPath);
+          if (
+            mod.default &&
+            mod.default.name &&
+            mod.default.name !== 'decorate'
+          ) {
+            const { name } = mod.default;
+            const elementName = `raqn-${name.toLowerCase()}`;
+            // define the custom element if it doesn't exist
+            if (!window.raqnComponents[name]) {
+              const Contructor = mod.default;
+              customElements.define(elementName, Contructor);
+              window.raqnComponents[name] = Contructor;
+            }
+            if (this.block) {
+              this.setupElement();
+            }
+          } else if (mod.default) {
+            await mod.default(this.block);
+          }
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.log(`failed to load module for ${this.blockName}`, error);
+          return reject(error);
+        }
+        return resolve();
+      })();
+    });
+  }
+
+  async decorate() {
+    if (window.raqnComponents[this.blockName]) {
+      return this.setupElement();
+    }
+    try {
+      const cssLoaded = this.loadCSS(this.cssPath).catch(() =>
+        // eslint-disable-next-line no-console
+        console.log(`${this.cssPath} does not exist`),
+      );
+      const decorationComplete = this.loadWebComponent();
+      return Promise.all([decorationComplete, cssLoaded]);
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(`failed to load module for ${this.blockName}`, error);
+      return Promise.resolve();
+    }
+  }
+}
diff --git a/scripts/delayed.js b/scripts/delayed.js
deleted file mode 100644
index 920b4ad8..00000000
--- a/scripts/delayed.js
+++ /dev/null
@@ -1,7 +0,0 @@
-// eslint-disable-next-line import/no-cycle
-import { sampleRUM } from './lib-franklin.js';
-
-// Core Web Vitals RUM collection
-sampleRUM('cwv');
-
-// add more delayed functionality here
diff --git a/scripts/init.js b/scripts/init.js
new file mode 100644
index 00000000..e0a607ae
--- /dev/null
+++ b/scripts/init.js
@@ -0,0 +1,86 @@
+import ComponentLoader from './component-loader.js';
+import { config, debounce, eagerImage, getBreakPoint } from './libs.js';
+
+export function getInfos(blocks) {
+  return blocks.map((block) => {
+    let el = block;
+    const tagName = el.tagName.toLowerCase();
+    let name = tagName;
+    if (!config.elementBlocks.includes(tagName)) {
+      [name] = Array.from(el.classList);
+    } else {
+      // allow original way of defining blocks
+      el = document.createElement('div');
+      block.append(el);
+    }
+    return {
+      name,
+      el,
+    };
+  });
+}
+
+function getMeta(name) {
+  const meta = document.querySelector(`meta[name="${name}"]`);
+  if (!meta) {
+    return null;
+  }
+  return meta.content;
+}
+
+function lcpPriority() {
+  const eagerImages = getMeta('eager-images');
+  if (eagerImages) {
+    const length = parseInt(eagerImages, 10);
+    eagerImage(document.body, length);
+  }
+  const lcp = getMeta('lcp');
+  window.raqnLCP = lcp ? lcp.split(',').map((name) => ({ name })) : [];
+}
+
+export async function start({ name, el }) {
+  const loader = new ComponentLoader(name, el);
+  return loader.decorate();
+}
+
+export async function init(node = document) {
+  let blocks = Array.from(node.querySelectorAll('[class]:not([class^=style]'));
+
+  if (node === document) {
+    const header = node.querySelector('header');
+    const footer = node.querySelector('footer');
+    blocks = [header, ...blocks, footer];
+  }
+
+  const data = getInfos(blocks);
+  const lcp = window.raqnLCP;
+  const delay = window.raqnLCPDelay || [];
+  const priority = data.filter(({ name }) => lcp.includes(name));
+  const rest = data.filter(
+    ({ name }) => !lcp.includes(name) && !delay.includes(name),
+  );
+
+  // start with lcp and priority
+  Promise.all([
+    ...lcp.map(({ name, el }) => start({ name, el })),
+    ...priority.map(({ name, el }) => start({ name, el })),
+  ]);
+  // timeout for the rest to proper prioritize in case of stalled loading
+  rest.map(({ name, el }) => setTimeout(() => start({ name, el })));
+
+  // reload on breakpoint change to reset params and variables
+  window.raqnBreakpoint = getBreakPoint();
+  window.addEventListener(
+    'resize',
+    debounce(() => {
+      // only on width / breakpoint changes
+      if (window.raqnBreakpoint !== getBreakPoint()) {
+        window.location.reload();
+      }
+    }, 100),
+  );
+}
+// mechanism of retrieving lang to be used in the app
+document.documentElement.lang = document.documentElement.lang || 'en';
+lcpPriority();
+init();
diff --git a/scripts/lib-franklin.js b/scripts/lib-franklin.js
deleted file mode 100644
index 7b6cf0cf..00000000
--- a/scripts/lib-franklin.js
+++ /dev/null
@@ -1,737 +0,0 @@
-/*
- * Copyright 2022 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-/**
- * log RUM if part of the sample.
- * @param {string} checkpoint identifies the checkpoint in funnel
- * @param {Object} data additional data for RUM sample
- */
-export function sampleRUM(checkpoint, data = {}) {
-  sampleRUM.defer = sampleRUM.defer || [];
-  const defer = (fnname) => {
-    sampleRUM[fnname] = sampleRUM[fnname]
-      || ((...args) => sampleRUM.defer.push({ fnname, args }));
-  };
-  sampleRUM.drain = sampleRUM.drain
-    || ((dfnname, fn) => {
-      sampleRUM[dfnname] = fn;
-      sampleRUM.defer
-        .filter(({ fnname }) => dfnname === fnname)
-        .forEach(({ fnname, args }) => sampleRUM[fnname](...args));
-    });
-  sampleRUM.always = sampleRUM.always || [];
-  sampleRUM.always.on = (chkpnt, fn) => { sampleRUM.always[chkpnt] = fn; };
-  sampleRUM.on = (chkpnt, fn) => { sampleRUM.cases[chkpnt] = fn; };
-  defer('observe');
-  defer('cwv');
-  try {
-    window.hlx = window.hlx || {};
-    if (!window.hlx.rum) {
-      const usp = new URLSearchParams(window.location.search);
-      const weight = (usp.get('rum') === 'on') ? 1 : 100; // with parameter, weight is 1. Defaults to 100.
-      // eslint-disable-next-line no-bitwise
-      const hashCode = (s) => s.split('').reduce((a, b) => (((a << 5) - a) + b.charCodeAt(0)) | 0, 0);
-      const id = `${hashCode(window.location.href)}-${new Date().getTime()}-${Math.random().toString(16).substr(2, 14)}`;
-      const random = Math.random();
-      const isSelected = (random * weight < 1);
-      const urlSanitizers = {
-        full: () => window.location.href,
-        origin: () => window.location.origin,
-        path: () => window.location.href.replace(/\?.*$/, ''),
-      };
-      // eslint-disable-next-line object-curly-newline, max-len
-      window.hlx.rum = { weight, id, random, isSelected, sampleRUM, sanitizeURL: urlSanitizers[window.hlx.RUM_MASK_URL || 'path'] };
-    }
-    const { weight, id } = window.hlx.rum;
-    if (window.hlx && window.hlx.rum && window.hlx.rum.isSelected) {
-      const sendPing = (pdata = data) => {
-        // eslint-disable-next-line object-curly-newline, max-len, no-use-before-define
-        const body = JSON.stringify({ weight, id, referer: window.hlx.rum.sanitizeURL(), checkpoint, ...data });
-        const url = `https://rum.hlx.page/.rum/${weight}`;
-        // eslint-disable-next-line no-unused-expressions
-        navigator.sendBeacon(url, body);
-        // eslint-disable-next-line no-console
-        console.debug(`ping:${checkpoint}`, pdata);
-      };
-      sampleRUM.cases = sampleRUM.cases || {
-        cwv: () => sampleRUM.cwv(data) || true,
-        lazy: () => {
-          // use classic script to avoid CORS issues
-          const script = document.createElement('script');
-          script.src = 'https://rum.hlx.page/.rum/@adobe/helix-rum-enhancer@^1/src/index.js';
-          document.head.appendChild(script);
-          return true;
-        },
-      };
-      sendPing(data);
-      if (sampleRUM.cases[checkpoint]) { sampleRUM.cases[checkpoint](); }
-    }
-    if (sampleRUM.always[checkpoint]) { sampleRUM.always[checkpoint](data); }
-  } catch (error) {
-    // something went wrong
-  }
-}
-
-/**
- * Loads a CSS file.
- * @param {string} href URL to the CSS file
- */
-export async function loadCSS(href) {
-  return new Promise((resolve, reject) => {
-    if (!document.querySelector(`head > link[href="${href}"]`)) {
-      const link = document.createElement('link');
-      link.rel = 'stylesheet';
-      link.href = href;
-      link.onload = resolve;
-      link.onerror = reject;
-      document.head.append(link);
-    } else {
-      resolve();
-    }
-  });
-}
-
-/**
- * Loads a non module JS file.
- * @param {string} src URL to the JS file
- * @param {Object} attrs additional optional attributes
- */
-
-export async function loadScript(src, attrs) {
-  return new Promise((resolve, reject) => {
-    if (!document.querySelector(`head > script[src="${src}"]`)) {
-      const script = document.createElement('script');
-      script.src = src;
-      if (attrs) {
-      // eslint-disable-next-line no-restricted-syntax, guard-for-in
-        for (const attr in attrs) {
-          script.setAttribute(attr, attrs[attr]);
-        }
-      }
-      script.onload = resolve;
-      script.onerror = reject;
-      document.head.append(script);
-    } else {
-      resolve();
-    }
-  });
-}
-
-/**
- * Retrieves the content of metadata tags.
- * @param {string} name The metadata name (or property)
- * @returns {string} The metadata value(s)
- */
-export function getMetadata(name) {
-  const attr = name && name.includes(':') ? 'property' : 'name';
-  const meta = [...document.head.querySelectorAll(`meta[${attr}="${name}"]`)].map((m) => m.content).join(', ');
-  return meta || '';
-}
-
-/**
- * Sanitizes a string for use as class name.
- * @param {string} name The unsanitized string
- * @returns {string} The class name
- */
-export function toClassName(name) {
-  return typeof name === 'string'
-    ? name.toLowerCase().replace(/[^0-9a-z]/gi, '-').replace(/-+/g, '-').replace(/^-|-$/g, '')
-    : '';
-}
-
-/**
- * Sanitizes a string for use as a js property name.
- * @param {string} name The unsanitized string
- * @returns {string} The camelCased name
- */
-export function toCamelCase(name) {
-  return toClassName(name).replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-}
-
-const ICONS_CACHE = {};
-/**
- * Replace icons with inline SVG and prefix with codeBasePath.
- * @param {Element} [element] Element containing icons
- */
-export async function decorateIcons(element) {
-  // Prepare the inline sprite
-  let svgSprite = document.getElementById('franklin-svg-sprite');
-  if (!svgSprite) {
-    const div = document.createElement('div');
-    div.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" id="franklin-svg-sprite" style="display: none"></svg>';
-    svgSprite = div.firstElementChild;
-    document.body.append(div.firstElementChild);
-  }
-
-  // Download all new icons
-  const icons = [...element.querySelectorAll('span.icon')];
-  await Promise.all(icons.map(async (span) => {
-    const iconName = Array.from(span.classList).find((c) => c.startsWith('icon-')).substring(5);
-    if (!ICONS_CACHE[iconName]) {
-      ICONS_CACHE[iconName] = true;
-      try {
-        const response = await fetch(`${window.hlx.iconsPath}/${iconName}.svg`);
-        if (!response.ok) {
-          ICONS_CACHE[iconName] = false;
-          return;
-        }
-        // Styled icons don't play nice with the sprite approach because of shadow dom isolation
-        // and same for internal references
-        const svg = await response.text();
-        if (svg.match(/(<style | class=|url\(#| xlink:href="#)/)) {
-          ICONS_CACHE[iconName] = {
-            styled: true,
-            html: svg
-              // rescope ids and references to avoid clashes across icons;
-              .replaceAll(/ id="([^"]+)"/g, (_, id) => ` id="${iconName}-${id}"`)
-              .replaceAll(/="url\(#([^)]+)\)"/g, (_, id) => `="url(#${iconName}-${id})"`)
-              .replaceAll(/ xlink:href="#([^"]+)"/g, (_, id) => ` xlink:href="#${iconName}-${id}"`),
-          };
-        } else {
-          ICONS_CACHE[iconName] = {
-            html: svg
-              .replace('<svg', `<symbol id="icons-sprite-${iconName}"`)
-              .replace(/ width=".*?"/, '')
-              .replace(/ height=".*?"/, '')
-              .replace('</svg>', '</symbol>'),
-          };
-        }
-      } catch (error) {
-        ICONS_CACHE[iconName] = false;
-        // eslint-disable-next-line no-console
-        console.error(error);
-      }
-    }
-  }));
-
-  const symbols = Object
-    .keys(ICONS_CACHE).filter((k) => !svgSprite.querySelector(`#icons-sprite-${k}`))
-    .map((k) => ICONS_CACHE[k])
-    .filter((v) => !v.styled)
-    .map((v) => v.html)
-    .join('\n');
-  svgSprite.innerHTML += symbols;
-
-  icons.forEach((span) => {
-    const iconName = Array.from(span.classList).find((c) => c.startsWith('icon-')).substring(5);
-    const parent = span.firstElementChild?.tagName === 'A' ? span.firstElementChild : span;
-    // Styled icons need to be inlined as-is, while unstyled ones can leverage the sprite
-    if (ICONS_CACHE[iconName].styled) {
-      parent.innerHTML = ICONS_CACHE[iconName].html;
-    } else {
-      parent.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg"><use href="#icons-sprite-${iconName}"/></svg>`;
-    }
-  });
-}
-
-/**
- * Gets placeholders object.
- * @param {string} [prefix] Location of placeholders
- * @returns {object} Window placeholders object
- */
-export async function fetchPlaceholders(prefix = 'default') {
-  window.placeholders = window.placeholders || {};
-  const loaded = window.placeholders[`${prefix}-loaded`];
-  if (!loaded) {
-    window.placeholders[`${prefix}-loaded`] = new Promise((resolve, reject) => {
-      fetch(`${prefix === 'default' ? '' : prefix}/placeholders.json`)
-        .then((resp) => {
-          if (resp.ok) {
-            return resp.json();
-          }
-          throw new Error(`${resp.status}: ${resp.statusText}`);
-        }).then((json) => {
-          const placeholders = {};
-          json.data
-            .filter((placeholder) => placeholder.Key)
-            .forEach((placeholder) => {
-              placeholders[toCamelCase(placeholder.Key)] = placeholder.Text;
-            });
-          window.placeholders[prefix] = placeholders;
-          resolve();
-        }).catch((error) => {
-          // error loading placeholders
-          window.placeholders[prefix] = {};
-          reject(error);
-        });
-    });
-  }
-  await window.placeholders[`${prefix}-loaded`];
-  return window.placeholders[prefix];
-}
-
-/**
- * Decorates a block.
- * @param {Element} block The block element
- */
-export function decorateBlock(block) {
-  const shortBlockName = block.classList[0];
-  if (shortBlockName) {
-    block.classList.add('block');
-    block.dataset.blockName = shortBlockName;
-    block.dataset.blockStatus = 'initialized';
-    const blockWrapper = block.parentElement;
-    blockWrapper.classList.add(`${shortBlockName}-wrapper`);
-    const section = block.closest('.section');
-    if (section) section.classList.add(`${shortBlockName}-container`);
-  }
-}
-
-/**
- * Extracts the config from a block.
- * @param {Element} block The block element
- * @returns {object} The block config
- */
-export function readBlockConfig(block) {
-  const config = {};
-  block.querySelectorAll(':scope > div').forEach((row) => {
-    if (row.children) {
-      const cols = [...row.children];
-      if (cols[1]) {
-        const col = cols[1];
-        const name = toClassName(cols[0].textContent);
-        let value = '';
-        if (col.querySelector('a')) {
-          const as = [...col.querySelectorAll('a')];
-          if (as.length === 1) {
-            value = as[0].href;
-          } else {
-            value = as.map((a) => a.href);
-          }
-        } else if (col.querySelector('img')) {
-          const imgs = [...col.querySelectorAll('img')];
-          if (imgs.length === 1) {
-            value = imgs[0].src;
-          } else {
-            value = imgs.map((img) => img.src);
-          }
-        } else if (col.querySelector('p')) {
-          const ps = [...col.querySelectorAll('p')];
-          if (ps.length === 1) {
-            value = ps[0].textContent;
-          } else {
-            value = ps.map((p) => p.textContent);
-          }
-        } else value = row.children[1].textContent;
-        config[name] = value;
-      }
-    }
-  });
-  return config;
-}
-
-export function addCssVariables(element, variables) {
-  if (!element.id) {
-    const id = `gen${crypto.randomUUID().split('-')[0]}`;
-    element.id = id;
-  }
-
-  const style = document.createElement('style');
-  style.textContent = `#${element.id} {
-    ${Object.keys(variables).map((k) => variables[k] && `--${k}: ${variables[k]};`).join(' ')}
-  }`;
-
-  element.parentNode.insertBefore(style, element);
-}
-
-export function decorateSection(section) {
-  const wrappers = [];
-  let defaultContent = false;
-  [...section.children].forEach((e) => {
-    if (e.tagName === 'DIV' || !defaultContent) {
-      const wrapper = document.createElement('div');
-      wrappers.push(wrapper);
-      defaultContent = e.tagName !== 'DIV';
-      if (defaultContent) wrapper.classList.add('default-content-wrapper');
-    }
-    wrappers[wrappers.length - 1].append(e);
-  });
-  wrappers.forEach((wrapper) => section.append(wrapper));
-  section.classList.add('section');
-  section.dataset.sectionStatus = 'initialized';
-  section.style.display = 'none';
-
-  /* process section metadata */
-  const sectionMeta = section.querySelector('div.section-metadata');
-  if (sectionMeta) {
-    const meta = readBlockConfig(sectionMeta);
-    Object.keys(meta).forEach((key) => {
-      if (key === 'style') {
-        const styles = meta.style.split(',').map((style) => toClassName(style.trim()));
-        styles.forEach((style) => section.classList.add(style));
-      } else {
-        section.dataset[toCamelCase(key)] = meta[key];
-      }
-    });
-    sectionMeta.parentNode.remove();
-  }
-
-  if (section.dataset.textColor || section.dataset.background) {
-    addCssVariables(section, {
-      'text-color': section.dataset.textColor,
-      'background-color': section.dataset.background,
-    });
-  }
-}
-
-/**
- * Decorates all sections in a container element.
- * @param {Element} main The container element
- */
-export function decorateSections(main) {
-  main.querySelectorAll(':scope > div').forEach((section) => decorateSection(section));
-}
-
-/**
- * Updates all section status in a container element.
- * @param {Element} main The container element
- */
-export function updateSectionsStatus(main) {
-  const sections = [...main.querySelectorAll(':scope > div.section')];
-  for (let i = 0; i < sections.length; i += 1) {
-    const section = sections[i];
-    const status = section.dataset.sectionStatus;
-    if (status !== 'loaded') {
-      const loadingBlock = section.querySelector('.block[data-block-status="initialized"], .block[data-block-status="loading"]');
-      if (loadingBlock) {
-        section.dataset.sectionStatus = 'loading';
-        break;
-      } else {
-        section.dataset.sectionStatus = 'loaded';
-        section.style.display = null;
-      }
-    }
-  }
-}
-
-/**
- * Decorates all blocks in a container element.
- * @param {Element} main The container element
- */
-export function decorateBlocks(main) {
-  main
-    .querySelectorAll('div.section > div > div')
-    .forEach(decorateBlock);
-}
-
-/**
- * Builds a block DOM Element from a two dimensional array, string, or object
- * @param {string} blockName name of the block
- * @param {*} content two dimensional array or string or object of content
- */
-export function buildBlock(blockName, content) {
-  const table = Array.isArray(content) ? content : [[content]];
-  const blockEl = document.createElement('div');
-  // build image block nested div structure
-  blockEl.classList.add(blockName);
-  table.forEach((row) => {
-    const rowEl = document.createElement('div');
-    row.forEach((col) => {
-      const colEl = document.createElement('div');
-      const vals = col.elems ? col.elems : [col];
-      vals.forEach((val) => {
-        if (val) {
-          if (typeof val === 'string') {
-            colEl.innerHTML += val;
-          } else {
-            colEl.appendChild(val);
-          }
-        }
-      });
-      rowEl.appendChild(colEl);
-    });
-    blockEl.appendChild(rowEl);
-  });
-  return (blockEl);
-}
-
-/**
- * Gets the configuration for the given block, and also passes
- * the config through all custom patching helpers added to the project.
- *
- * @param {Element} block The block element
- * @returns {Object} The block config (blockName, cssPath and jsPath)
- */
-function getBlockConfig(block) {
-  const { blockName } = block.dataset;
-  const cssPath = `${window.hlx.codeBasePath}/blocks/${blockName}/${blockName}.css`;
-  const jsPath = `${window.hlx.codeBasePath}/blocks/${blockName}/${blockName}.js`;
-  const original = { blockName, cssPath, jsPath };
-  return window.hlx.patchBlockConfig
-    .filter((fn) => typeof fn === 'function')
-    .reduce(
-      (config, fn) => fn(config, original),
-      { blockName, cssPath, jsPath },
-    );
-}
-
-/**
- * Loads JS and CSS for a block.
- * @param {Element} block The block element
- */
-export async function loadBlock(block) {
-  const status = block.dataset.blockStatus;
-  if (status !== 'loading' && status !== 'loaded') {
-    block.dataset.blockStatus = 'loading';
-    const { blockName, cssPath, jsPath } = getBlockConfig(block);
-    try {
-      const cssLoaded = loadCSS(cssPath);
-      const decorationComplete = new Promise((resolve) => {
-        (async () => {
-          try {
-            const mod = await import(jsPath);
-            if (mod.default) {
-              await mod.default(block);
-            }
-          } catch (error) {
-            // eslint-disable-next-line no-console
-            console.log(`failed to load module for ${blockName}`, error);
-          }
-          resolve();
-        })();
-      });
-      await Promise.all([cssLoaded, decorationComplete]);
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.log(`failed to load block ${blockName}`, error);
-    }
-    block.dataset.blockStatus = 'loaded';
-  }
-}
-
-/**
- * Loads JS and CSS for all blocks in a container element.
- * @param {Element} main The container element
- */
-export async function loadBlocks(main) {
-  updateSectionsStatus(main);
-  const blocks = [...main.querySelectorAll('div.block')];
-  for (let i = 0; i < blocks.length; i += 1) {
-    // eslint-disable-next-line no-await-in-loop
-    await loadBlock(blocks[i]);
-    updateSectionsStatus(main);
-  }
-}
-
-/**
- * Returns a picture element with webp and fallbacks
- * @param {string} src The image URL
- * @param {string} [alt] The image alternative text
- * @param {boolean} [eager] Set loading attribute to eager
- * @param {Array} [breakpoints] Breakpoints and corresponding params (eg. width)
- * @returns {Element} The picture element
- */
-export function createOptimizedPicture(src, alt = '', eager = false, breakpoints = [{ media: '(min-width: 600px)', width: '2000' }, { width: '750' }]) {
-  const url = new URL(src, window.location.href);
-  const picture = document.createElement('picture');
-  const { pathname } = url;
-  const ext = pathname.substring(pathname.lastIndexOf('.') + 1);
-
-  // webp
-  breakpoints.forEach((br) => {
-    const source = document.createElement('source');
-    if (br.media) source.setAttribute('media', br.media);
-    source.setAttribute('type', 'image/webp');
-    source.setAttribute('srcset', `${pathname}?width=${br.width}&format=webply&optimize=medium`);
-    picture.appendChild(source);
-  });
-
-  // fallback
-  breakpoints.forEach((br, i) => {
-    if (i < breakpoints.length - 1) {
-      const source = document.createElement('source');
-      if (br.media) source.setAttribute('media', br.media);
-      source.setAttribute('srcset', `${pathname}?width=${br.width}&format=${ext}&optimize=medium`);
-      picture.appendChild(source);
-    } else {
-      const img = document.createElement('img');
-      img.setAttribute('loading', eager ? 'eager' : 'lazy');
-      img.setAttribute('alt', alt);
-      picture.appendChild(img);
-      img.setAttribute('src', `${pathname}?width=${br.width}&format=${ext}&optimize=medium`);
-    }
-  });
-
-  return picture;
-}
-
-/**
- * Normalizes all headings within a container element.
- * @param {Element} el The container element
- * @param {string} allowedHeadings The list of allowed headings (h1 ... h6)
- */
-export function normalizeHeadings(el, allowedHeadings) {
-  const allowed = allowedHeadings.map((h) => h.toLowerCase());
-  el.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach((tag) => {
-    const h = tag.tagName.toLowerCase();
-    if (allowed.indexOf(h) === -1) {
-      // current heading is not in the allowed list -> try first to "promote" the heading
-      let level = parseInt(h.charAt(1), 10) - 1;
-      while (allowed.indexOf(`h${level}`) === -1 && level > 0) {
-        level -= 1;
-      }
-      if (level === 0) {
-        // did not find a match -> try to "downgrade" the heading
-        while (allowed.indexOf(`h${level}`) === -1 && level < 7) {
-          level += 1;
-        }
-      }
-      if (level !== 7) {
-        tag.outerHTML = `<h${level} id="${tag.id}">${tag.textContent}</h${level}>`;
-      }
-    }
-  });
-}
-
-/**
- * Set template (page structure) and theme (page styles).
- */
-export function decorateTemplateAndTheme() {
-  const addClasses = (element, classes) => {
-    classes.split(',').forEach((c) => {
-      element.classList.add(toClassName(c.trim()));
-    });
-  };
-  const template = getMetadata('template');
-  if (template) addClasses(document.body, template);
-  const theme = getMetadata('theme');
-  if (theme) addClasses(document.body, theme);
-}
-
-/**
- * Decorates paragraphs containing a single link as buttons.
- * @param {Element} element container element
- */
-export function decorateButtons(element) {
-  element.querySelectorAll('a').forEach((a) => {
-    a.title = a.title || a.textContent;
-    if (a.href !== a.textContent) {
-      const up = a.parentElement;
-      const twoup = a.parentElement.parentElement;
-      if (!a.querySelector('img')) {
-        if (up.childNodes.length === 1 && (up.tagName === 'P' || up.tagName === 'DIV')) {
-          a.className = 'button primary'; // default
-          up.classList.add('button-container');
-        }
-        if (up.childNodes.length === 1 && up.tagName === 'STRONG'
-          && twoup.childNodes.length === 1 && twoup.tagName === 'P') {
-          a.className = 'button primary';
-          twoup.classList.add('button-container');
-        }
-        if (up.childNodes.length === 1 && up.tagName === 'EM'
-          && twoup.childNodes.length === 1 && twoup.tagName === 'P') {
-          a.className = 'button secondary';
-          twoup.classList.add('button-container');
-        }
-      }
-    }
-  });
-}
-
-/**
- * Load LCP block and/or wait for LCP in default content.
- */
-export async function waitForLCP(lcpBlocks) {
-  const block = document.querySelector('.block');
-  const hasLCPBlock = (block && lcpBlocks.includes(block.dataset.blockName));
-  if (hasLCPBlock) await loadBlock(block);
-
-  document.body.style.display = null;
-  const lcpCandidate = document.querySelector('main img');
-  await new Promise((resolve) => {
-    if (lcpCandidate && !lcpCandidate.complete) {
-      lcpCandidate.setAttribute('loading', 'eager');
-      lcpCandidate.addEventListener('load', resolve);
-      lcpCandidate.addEventListener('error', resolve);
-    } else {
-      resolve();
-    }
-  });
-}
-
-/**
- * Loads a block named 'header' into header
- * @param {Element} header header element
- * @returns {Promise}
- */
-export async function loadHeader(header) {
-  const navMeta = getMetadata('header');
-  const navPath = navMeta ? new URL(navMeta).pathname : '/header';
-  const resp = await fetch(`${navPath}.plain.html`);
-
-  addCssVariables(header, {
-    'background-color': getMetadata('header-background'),
-    'header-height': getMetadata('header-height'),
-    'text-color': getMetadata('header-text-color'),
-  });
-
-  if (resp.ok) {
-    const html = await resp.text();
-    header.innerHTML = html;
-    header.dataset.blockName = 'header';
-    await loadBlock(header);
-  }
-}
-
-/**
- * Loads a block named 'footer' into footer
- * @param footer footer element
- * @returns {Promise}
- */
-export function loadFooter(footer) {
-  const footerBlock = buildBlock('footer', '');
-  footer.append(footerBlock);
-  decorateBlock(footerBlock);
-  return loadBlock(footerBlock);
-}
-
-/**
- * Setup block utils.
- */
-export function setup() {
-  window.hlx = window.hlx || {};
-  window.hlx.RUM_MASK_URL = 'full';
-  window.hlx.codeBasePath = '';
-  window.hlx.lighthouse = new URLSearchParams(window.location.search).get('lighthouse') === 'on';
-  window.hlx.patchBlockConfig = [];
-  window.hlx.iconsPath = '/assets/icons';
-
-  const scriptEl = document.querySelector('script[src$="/scripts/scripts.js"]');
-  if (scriptEl) {
-    try {
-      [window.hlx.codeBasePath] = new URL(scriptEl.src).pathname.split('/scripts/scripts.js');
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.log(error);
-    }
-  }
-}
-
-/**
- * Auto initializiation.
- */
-function init() {
-  setup();
-  sampleRUM('top');
-
-  window.addEventListener('load', () => sampleRUM('load'));
-
-  window.addEventListener('unhandledrejection', (event) => {
-    sampleRUM('error', { source: event.reason.sourceURL, target: event.reason.line });
-  });
-
-  window.addEventListener('error', (event) => {
-    sampleRUM('error', { source: event.filename, target: event.lineno });
-  });
-}
-
-init();
diff --git a/scripts/libs.js b/scripts/libs.js
new file mode 100644
index 00000000..3dc49ec2
--- /dev/null
+++ b/scripts/libs.js
@@ -0,0 +1,59 @@
+export const config = {
+  elementBlocks: ['header', 'footer'],
+  breakpoints: {
+    s: 0,
+    m: 768,
+    l: 1024,
+    xl: 1280,
+    xxl: 1920,
+  },
+  joinParams: ['class'],
+  fontWeights: {
+    regular: 400,
+    medium: 500,
+    bold: 700,
+  },
+};
+
+export function getBreakPoints() {
+  window.raqnBreakpoints = window.raqnBreakpoints || {};
+  const breakpoints = Object.keys(config.breakpoints);
+  window.raqnBreakpoints = breakpoints.filter(
+    (bp) => matchMedia(`(min-width: ${config.breakpoints[bp]}px)`).matches,
+  );
+  return window.raqnBreakpoints;
+}
+
+export function getBreakPoint() {
+  const b = getBreakPoints();
+  return b[b.length - 1];
+}
+
+export const debounce = (func, wait, immediate) => {
+  let timeout;
+  return (...args) => {
+    const later = () => {
+      timeout = null;
+      if (!immediate) {
+        func(...args);
+      }
+    };
+    const callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) {
+      func(...args);
+    }
+  };
+};
+
+export const eagerImage = (block, length = 1) => {
+  const imgs = Array.from(block.querySelectorAll('img')).slice(0, length);
+  imgs.forEach((img) => {
+    const width = img.getAttribute('width');
+    const height = img.getAttribute('height');
+    const ratio = Math.floor((width / height) * 100) / 100;
+    img.style.aspectRatio = ratio;
+    img.setAttribute('loading', 'eager');
+  });
+};
diff --git a/scripts/scripts.js b/scripts/scripts.js
deleted file mode 100644
index 05fd988d..00000000
--- a/scripts/scripts.js
+++ /dev/null
@@ -1,164 +0,0 @@
-import {
-  sampleRUM,
-  buildBlock,
-  loadHeader,
-  loadFooter,
-  decorateButtons,
-  decorateIcons,
-  decorateSection,
-  decorateSections,
-  decorateBlocks,
-  decorateTemplateAndTheme,
-  waitForLCP,
-  loadBlocks,
-  loadCSS,
-} from './lib-franklin.js';
-
-const LCP_BLOCKS = []; // add your LCP blocks to the list
-
-/**
- * Builds hero block and prepends to main in a new section.
- * @param {Element} main The container element
- */
-function buildHeroBlock(main) {
-  const h1 = main.querySelector('h1');
-  const picture = main.querySelector('picture');
-  // eslint-disable-next-line no-bitwise
-  if (h1 && picture && (h1.compareDocumentPosition(picture) & Node.DOCUMENT_POSITION_PRECEDING)) {
-    const section = document.createElement('div');
-    section.append(buildBlock('hero', { elems: [picture, h1] }));
-    main.prepend(section);
-  }
-}
-
-function buildGrid(main) {
-  const gridElements = main.querySelectorAll('.section[data-grid-position]');
-  gridElements.forEach((e) => {
-    e.classList.remove('section');
-    delete e.dataset.sectionStatus;
-    e.removeAttribute('style');
-  });
-  const grid = document.createElement('div');
-  grid.classList.add('block', 'grid');
-  grid.dataset.blockName = 'grid';
-  grid.dataset.blockStatus = 'initialized';
-  main.insertBefore(grid, gridElements[0]);
-  decorateSection(grid);
-  grid.replaceChildren(...gridElements);
-}
-
-/**
- * load fonts.css and set a session storage flag
- */
-async function loadFonts() {
-  await loadCSS(`${window.hlx.codeBasePath}/styles/fonts.css`);
-  try {
-    if (!window.location.hostname.includes('localhost')) sessionStorage.setItem('fonts-loaded', 'true');
-  } catch (e) {
-    // do nothing
-  }
-}
-
-/**
- * Builds all synthetic blocks in a container element.
- * @param {Element} main The container element
- */
-function buildAutoBlocks(main) {
-  try {
-    buildHeroBlock(main);
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error('Auto Blocking failed', error);
-  }
-}
-
-function decorateImages(main) {
-  main.querySelectorAll('picture').forEach((i) => {
-    if (i.parentElement.tagName === 'P' && i.parentElement.children.length === 1) {
-      i.parentElement.classList.add('image-wrapper');
-    }
-  });
-}
-
-/**
- * Decorates the main element.
- * @param {Element} main The main element
- */
-// eslint-disable-next-line import/prefer-default-export
-export function decorateMain(main) {
-  // hopefully forward compatible button decoration
-  decorateButtons(main);
-  decorateIcons(main);
-  buildAutoBlocks(main);
-  decorateSections(main);
-  decorateBlocks(main);
-  decorateImages(main);
-  buildGrid(main);
-}
-
-/**
- * Loads everything needed to get to LCP.
- * @param {Element} doc The container element
- */
-async function loadEager(doc) {
-  document.documentElement.lang = 'en';
-  decorateTemplateAndTheme();
-
-  loadHeader(doc.querySelector('header'));
-
-  const main = doc.querySelector('main');
-  if (main) {
-    decorateMain(main);
-    document.body.classList.add('appear');
-    await waitForLCP(LCP_BLOCKS);
-  }
-
-  try {
-    /* if desktop (proxy for fast connection) or fonts already loaded, load fonts.css */
-    if (window.innerWidth >= 900 || sessionStorage.getItem('fonts-loaded')) {
-      loadFonts();
-    }
-  } catch (e) {
-    // do nothing
-  }
-}
-
-/**
- * Loads everything that doesn't need to be delayed.
- * @param {Element} doc The container element
- */
-async function loadLazy(doc) {
-  const main = doc.querySelector('main');
-  await loadBlocks(main);
-
-  const { hash } = window.location;
-  const element = hash ? doc.getElementById(hash.substring(1)) : false;
-  if (hash && element) element.scrollIntoView();
-
-  loadFooter(doc.querySelector('footer'));
-
-  loadCSS(`${window.hlx.codeBasePath}/styles/lazy-styles.css`);
-  loadFonts();
-
-  sampleRUM('lazy');
-  sampleRUM.observe(main.querySelectorAll('div[data-block-name]'));
-  sampleRUM.observe(main.querySelectorAll('picture > img'));
-}
-
-/**
- * Loads everything that happens a lot later,
- * without impacting the user experience.
- */
-function loadDelayed() {
-  // eslint-disable-next-line import/no-cycle
-  window.setTimeout(() => import('./delayed.js'), 3000);
-  // load anything that can be postponed to the latest here
-}
-
-async function loadPage() {
-  await loadEager(document);
-  await loadLazy(document);
-  loadDelayed();
-}
-
-loadPage();
diff --git a/styles/styles.css b/styles/styles.css
index 8c3f54a5..231ac034 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -1,240 +1,189 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
- :root {
-  /* colors */
-  --link-color: #035fe6;
-  --link-hover-color: #136ff6;
-  --background-color: #fff;
-  --overlay-background-color: #eee;
-  --highlight-background-color: #ccc;
-  --text-color: #000;
-
-  /* fonts */
-  --body-font-family: roboto, roboto-fallback;
-  --heading-font-family: var(--body-font-family);
-  --fixed-font-family: 'Roboto Mono', menlo, consolas, 'Liberation Mono', monospace;
-
-  /* body sizes */
-  --body-font-size-m: 22px;
-  --body-font-size-s: 18px;
-  --body-font-size-xs: 16px;
-
-  /* heading sizes */
-  --heading-font-size-xxl: 48px;
-  --heading-font-size-xl: 40px;
-  --heading-font-size-l: 32px;
-  --heading-font-size-m: 24px;
-  --heading-font-size-s: 20px;
-  --heading-font-size-xs: 18px;
-
-  /* mind the gaps */
-  --padding-horizontal: 32px;
-  --padding-vertical: 16px;
-
-}
-
-@font-face {
-  font-family: roboto-fallback;
-  size-adjust: 100.06%;
-  ascent-override: 95%;
-  src: local('Arial');
-}
-
-
-@media (min-width: 900px) {
-  :root {
-    --heading-font-size-xxl: 60px;
-    --heading-font-size-xl: 48px;
-    --heading-font-size-l: 36px;
-    --heading-font-size-m: 30px;
-    --heading-font-size-s: 24px;
-    --heading-font-size-xs: 22px;
+@media screen and (max-width: 768px) {
+  body {
+    --scope-max-width: 100vw;
   }
 }
 
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+html,
 body {
-  font-size: var(--body-font-size-m);
+  width: 100%;
+  height: 100%;
   margin: 0;
-  font-family: var(--body-font-family);
-  line-height: 1.6;
-  color: var(--text-color);
-  background-color: var(--background-color);
+  padding: 0;
+}
+
+body {
   display: none;
+  background: var(--scope-background, #fff);
+  padding: 0;
+  margin: 0;
+  width: 100%;
 }
 
-body.appear {
-  display: block;
+html,
+body,
+div,
+span,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+img,
+small,
+strong,
+sub,
+sup,
+tt,
+b,
+u,
+i,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+label,
+legend,
+caption {
+  font-size: 100%;
+  vertical-align: baseline;
+  color: currentcolor;
 }
 
 header {
-  height: var(--header-height, 120px);
-  background-color: var(--background-color);
-  color: var(--text-color);
-}
+  --scope-background: var(--scope-header-background, #fff);
+  --scope-color: var(--scope-header-color, #000);
 
-header svg {
-  fill: var(--text-color);
+  min-height: var(--scope-header-height, 64px);
+  display: grid;
+  background: var(--scope-header-background, #fff);
 }
 
-h1, h2, h3,
-h4, h5, h6 {
-  font-family: var(--heading-font-family);
-  font-weight: 600;
-  line-height: 1.25;
-  margin-top: 1em;
-  margin-bottom: .5em;
+main > div {
+  max-width: var(--scope-max-width, 100%);
+  margin: 0 auto;
 }
 
-h1 { font-size: var(--heading-font-size-xxl) }
-h2 { font-size: var(--heading-font-size-xl) }
-h3 { font-size: var(--heading-font-size-l) }
-h4 { font-size: var(--heading-font-size-m) }
-h5 { font-size: var(--heading-font-size-s) }
-h6 { font-size: var(--heading-font-size-xs) }
-
-p, dl, ol, ul, pre, blockquote {
-  margin-top: 1em;
-  margin-bottom: 1em;
+main > div > * {
+  max-width: var(--scope-max-width, 100%);
+  min-width: var(--scope-max-width, 100%);
+  margin-inline: auto;
+  box-sizing: border-box;
 }
 
-hr {
-  margin-top: 1.5em;
-  margin-bottom: 1.5em;
-  border: 0;
-  border-bottom: 1px solid var(--overlay-background-color);
-}
+.full-width {
+  --scope-outer-gap: calc((var(--raqn-max-width-default) - 100vw) / 2);
+  --scope-inner-gap: calc((100vw - var(--scope-max-width)) / 2);
 
-code, pre, samp {
-  font-family: var(--fixed-font-family);
-  font-size: var(--body-font-size-s);
+  display: grid;
+  min-width: 100vw;
+  max-width: none;
+  margin-inline-start: var(--scope-outer-gap);
+  padding-inline: var(--scope-inner-gap);
+  box-sizing: border-box;
 }
 
-code, samp {
-  padding: .125em;
+main > div > div {
+  background: var(--scope-background, #fff);
+  color: var(--scope-color, #000);
+  padding: var(--scope-padding, 0);
 }
 
-pre {
-  overflow: scroll;
+main > div > div > div {
+  max-width: var(--scope-max-width, 100%);
+  margin: var(--scope-margin, 0 auto);
+  width: 100%;
 }
 
-main pre {
-  background-color: var(--overlay-background-color);
-  padding: 1em;
-  border-radius: .25em;
-  overflow-x: auto;
-  white-space: pre;
+.breadcrumbs {
+  display: grid;
+  grid-template-columns: var(--scope-grid-template-columns, 1fr);
+  gap: var(--scope-gap, 20px);
+  align-items: center;
+  justify-items: start;
+  min-height: var(--scope-font-size, 1.2em);
 }
 
-a:any-link {
-  color: var(--link-color);
+a {
+  display: inline-flex;
+  line-height: 1em;
+  align-items: center;
+  color: var(--scope-link-color, inherit);
   text-decoration: none;
+  font-size: var(--scope-font-size, 1em);
 }
 
 a:hover {
-  text-decoration: underline;
-  color: var(--link-hover-color);
-}
-
-/* buttons */
-a.button:any-link, button {
-  font-family: var(--body-font-family);
-  display: inline-block;
-  box-sizing: border-box;
-  text-decoration: none;
-  border: 2px solid transparent;
-  padding: 5px 30px;
-  text-align: center;
-  font-style: normal;
-  font-weight: 600;
-  cursor: pointer;
-  color: var(--background-color);
-  background-color: var(--link-color);
-  margin: 16px 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  border-radius: 30px;
+  color: var(--scope-link-color-hover, inherit);
 }
 
-a.button:hover, a.button:focus, button:hover, button:focus  {
-  background-color: var(--link-hover-color);
-  cursor: pointer;
+.raqn-grid {
+  width: var(--scope-max-width, 100%);
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: var(--grid-template-columns, 1fr);
+  align-items: center;
+  justify-items: start;
 }
 
-button:disabled, button:disabled:hover {
-  background-color: var(--overlay-background-color);
-  cursor: unset;
-}
-
-a.button.secondary, button.secondary {
-  background-color: unset;
-  border: 2px solid currentcolor;
-  color: var(--text-color)
-}
-
-main input {
-  font-size: 1.25rem;
-  width: 100%;
-  max-width: 50rem;
+picture,
+img {
   display: block;
-  margin-bottom: 1rem;
-  padding: 0.75rem 0.6rem;
-  border-radius: 0.25rem;
-  box-sizing: border-box;
-  border: 1px solid var(--text-color);
-  color: var(--text-color);
-  background-color: var(--background-color);
-}
-
-main input:hover {
-  border: 1px solid var(--text-color);
-}
-
-main blockquote {
-  font-style: italic;
-  margin: 3rem;
-  text-indent: -1rem;
-  hanging-punctuation: first;
-}
-
-main blockquote p::before {
-  content: "“";
-  line-height: 0;
-}
-
-main blockquote p::after {
-  content: "”";
-  line-height: 0;
-}
-
-main img {
   max-width: 100%;
-  width: auto;
   height: auto;
 }
 
-.icon {
-  display: inline-block;
-  height: 24px;
-  width: 24px;
+.hide {
+  display: none;
+  pointer-events: none;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-block: var(--scope-margin-block, 1em);
+}
+
+@media screen and (min-width: 1024px) {
+  p,
+  ul,
+  ol,
+  pre,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    max-width: 50vw;
+  }
 }
 
-.icon svg {
-  height: 100%;
-  width: 100%;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: var(--scope-headings-color, var(--scope-color, currentColor));
 }
 
-main .section {
-  background-color: var(--background-color, transparent);
-  color: var(--text-color);
+#franklin-svg-sprite {
+  display: none;
 }