diff --git a/docs/500.html b/docs/500.html
index 33e76bb..6e726b6 100644
--- a/docs/500.html
+++ b/docs/500.html
@@ -21,7 +21,7 @@
   <link rel="stylesheet" type="text/css" href="/temple/styles/theme.css" />
   <link rel="stylesheet" type="text/css" href="/temple/build/055f1a2f37d39d4fe92a.css" />
   
-  <script data-app="eyJwcm9wcyI6eyJlcnJvciI6ImV4YW1wbGVzIGlzIG5vdCBkZWZpbmVkIn0sImVudiI6eyJCVUlMRF9JRCI6IjA1NWYxYTJmMzdkMzlkNGZlOTJhIn19" src="/temple/build/055f1a2f37d39d4fe92a.js"></script>
+  <script data-app="eyJwcm9wcyI6eyJlcnJvciI6IkJ1aWxkIGZhaWxlZCB3aXRoIDEgZXJyb3I6XG4uLi90ZW1wbGUvZGlzdC9FeGNlcHRpb24uanM6ODoxNTogRVJST1I6IFtwbHVnaW46IHRlbXBsZS1kb2N1bWVudC1zZXJ2ZXItcGx1Z2luXSBNaXNtYXRjaGVkIGNsb3NpbmcgdGFnIGlkZS1jb2RlIn0sImVudiI6eyJCVUlMRF9JRCI6IjA1NWYxYTJmMzdkMzlkNGZlOTJhIn19" src="/temple/build/055f1a2f37d39d4fe92a.js"></script>
   
     <script src="/dev.js"></script>
   
@@ -54,7 +54,8 @@ <h1>Oops...</h1>
             Something went wrong. Please try again later.
           </i18n-translate>
         </p>
-        <div class="error"><pre>examples is not defined</pre></div>
+        <div class="error"><pre>Build failed with 1 error:
+../temple/dist/Exception.js:8:15: ERROR: [plugin: temple-document-server-plugin] Mismatched closing tag ide-code</pre></div>
       </div>
     </panel-main>
   </body>
diff --git a/docs/build/client/055f1a2f37d39d4fe92a.html b/docs/build/client/055f1a2f37d39d4fe92a.html
index 33e76bb..6e726b6 100644
--- a/docs/build/client/055f1a2f37d39d4fe92a.html
+++ b/docs/build/client/055f1a2f37d39d4fe92a.html
@@ -21,7 +21,7 @@
   <link rel="stylesheet" type="text/css" href="/temple/styles/theme.css" />
   <link rel="stylesheet" type="text/css" href="/temple/build/055f1a2f37d39d4fe92a.css" />
   
-  <script data-app="eyJwcm9wcyI6eyJlcnJvciI6ImV4YW1wbGVzIGlzIG5vdCBkZWZpbmVkIn0sImVudiI6eyJCVUlMRF9JRCI6IjA1NWYxYTJmMzdkMzlkNGZlOTJhIn19" src="/temple/build/055f1a2f37d39d4fe92a.js"></script>
+  <script data-app="eyJwcm9wcyI6eyJlcnJvciI6IkJ1aWxkIGZhaWxlZCB3aXRoIDEgZXJyb3I6XG4uLi90ZW1wbGUvZGlzdC9FeGNlcHRpb24uanM6ODoxNTogRVJST1I6IFtwbHVnaW46IHRlbXBsZS1kb2N1bWVudC1zZXJ2ZXItcGx1Z2luXSBNaXNtYXRjaGVkIGNsb3NpbmcgdGFnIGlkZS1jb2RlIn0sImVudiI6eyJCVUlMRF9JRCI6IjA1NWYxYTJmMzdkMzlkNGZlOTJhIn19" src="/temple/build/055f1a2f37d39d4fe92a.js"></script>
   
     <script src="/dev.js"></script>
   
@@ -54,7 +54,8 @@ <h1>Oops...</h1>
             Something went wrong. Please try again later.
           </i18n-translate>
         </p>
-        <div class="error"><pre>examples is not defined</pre></div>
+        <div class="error"><pre>Build failed with 1 error:
+../temple/dist/Exception.js:8:15: ERROR: [plugin: temple-document-server-plugin] Mismatched closing tag ide-code</pre></div>
       </div>
     </panel-main>
   </body>
diff --git a/docs/build/client/13781afd4fbd704a9789.html b/docs/build/client/13781afd4fbd704a9789.html
index 3416a5b..c216da7 100644
--- a/docs/build/client/13781afd4fbd704a9789.html
+++ b/docs/build/client/13781afd4fbd704a9789.html
@@ -83,6 +83,91 @@ <h6>Contributing</h6>
     <panel-main class="panel-main">
       <div class="docs container">
         <h1>Developer Tools</h1>
+
+        <i18n-translate p trim>
+          Temple provides a separate package for a better development 
+          experience when working with server frameworks that utilize 
+          the native http module. Start by installing adding 
+          <ide-code lang="js" inline>'@ossph/temple-dev'</ide-code>
+          to your project.
+        </i18n-translate>
+        <ide-app title="Terminal">
+          <ide-code lang="bash">
+            npm install --save-dev @ossph/temple-dev
+          </ide-code>
+        </ide-app>
+        <i18n-translate p trim>
+          Next, import the <ide-code lang="js" inline>dev()</ide-code> 
+          function from the package and use it in your existing 
+          <ide-code lang="js" inline>'src/index.ts'</ide-code> 
+          file to create a development server as shown in the example below.
+        </i18n-translate>
+        <ide-app title="src/index.ts">
+          <ide-code lang="js" numbers trim >
+            import http from 'http';
+            import temple from '@ossph/temple/compiler';
+            import { dev } from '@ossph/temple-dev';
+
+            //create temple compiler
+            const compiler = temple({ cwd: __dirname });
+            //1. create dev tools
+            const { router, refresh } = dev({ cwd: __dirname });
+
+            //create http server
+            const server = http.createServer(async (req, res) =&gt; {
+              //2. Add dev router
+              if (router(req, res)) return;
+              //if home page
+              if (req.url === '/') {
+                //3. sync builder with refresh server
+                refresh.sync(compiler.fromSource('./page.dtml'));
+                //compile the document
+                const html = await compiler.render('./page.dtml');
+                //... send response ...
+              }
+              //... other routes ...
+            });
+            //listen on port 3000
+            server.listen(3000);
+          </ide-code>
+        </ide-app>
+        <i18n-translate p trim>
+          Lastly, update the document file 
+          <ide-code lang="js" inline>'src/page.dtml'</ide-code> 
+          to include the development script 
+          <ide-code inline>&lt;script src="/dev.js"&gt;&lt;/script&gt;</ide-code> 
+          as shown below.
+        </i18n-translate>
+        <ide-app title="src/page.dtml">
+          <ide-code numbers trim >
+            &lt;script&gt;
+              //... 
+            &lt;/script&gt;
+            &lt;html&gt;
+              &lt;head&gt;
+                &lt;!-- ... --&gt;
+                &lt;!-- 4. include dev script --&gt;
+                &lt;script src="/dev.js"&gt;&lt;/script&gt;
+              &lt;/head&gt;
+              &lt;body&gt;
+                &lt;!-- ... --&gt;
+              &lt;/body&gt;
+            &lt;/html&gt;
+          </ide-code>
+        </ide-app>
+        <i18n-translate p trim>
+          Run the following command in terminal.
+        </i18n-translate>
+        <ide-app title="Terminal">
+          <ide-code lang="bash">
+            npx ts-node src/index.ts
+          </ide-code>
+        </ide-app>
+        <i18n-translate p trim>
+          Whenever <ide-code lang="js" inline>'src/page.dtml'</ide-code> 
+          is updated, the development server will automatically refresh 
+          the page. Components will also be updated in real-time.
+        </i18n-translate>
         
         <nav class="pager">
           <a class="prev" href="/temple/docs/component-publisher.html">
diff --git a/docs/build/client/13781afd4fbd704a9789.js b/docs/build/client/13781afd4fbd704a9789.js
index ecb4042..a19aa95 100644
--- a/docs/build/client/13781afd4fbd704a9789.js
+++ b/docs/build/client/13781afd4fbd704a9789.js
@@ -225,11 +225,11 @@ var TempleBundle = (() => {
       };
       Object.defineProperty(exports, "__esModule", { value: true });
       var TempleElement_1 = __importDefault(require_TempleElement());
-      var TempleRegistry5 = class {
+      var TempleRegistry7 = class {
         static get elements() {
           return this._elements;
         }
-        static createComponent(definition, attributes, children3 = []) {
+        static createComponent(definition, attributes, children5 = []) {
           const tagname = definition.component[0];
           const template = document.createElement("template");
           template.innerHTML = `<${tagname}></${tagname}>`;
@@ -247,11 +247,11 @@ var TempleBundle = (() => {
           }
           component._TempleAttributes = attributes;
           component.props = attributes;
-          children3.forEach((child) => component.appendChild(child));
+          children5.forEach((child) => component.appendChild(child));
           component.register();
           return this.register(component, attributes);
         }
-        static createElement(name, attributes, children3 = []) {
+        static createElement(name, attributes, children5 = []) {
           const element = document.createElement(name);
           for (const [key, value] of Object.entries(attributes)) {
             if (typeof value === "string") {
@@ -260,7 +260,7 @@ var TempleBundle = (() => {
               element.setAttribute(key, key);
             }
           }
-          children3.filter((child) => typeof child !== "undefined").forEach((child) => element.appendChild(child));
+          children5.filter((child) => typeof child !== "undefined").forEach((child) => element.appendChild(child));
           return this.register(element, attributes);
         }
         static createText(value, escape = false) {
@@ -297,8 +297,8 @@ var TempleBundle = (() => {
           return node;
         }
       };
-      TempleRegistry5._elements = /* @__PURE__ */ new Map();
-      exports.default = TempleRegistry5;
+      TempleRegistry7._elements = /* @__PURE__ */ new Map();
+      exports.default = TempleRegistry7;
     }
   });
 
@@ -362,7 +362,7 @@ var TempleBundle = (() => {
       var TempleRegistry_1 = __importDefault(require_TempleRegistry());
       var TempleEmitter_1 = __importDefault(require_TempleEmitter());
       var data_1 = __importDefault(require_data());
-      var TempleComponent4 = class _TempleComponent extends HTMLElement {
+      var TempleComponent6 = class _TempleComponent extends HTMLElement {
         constructor() {
           super(...arguments);
           this._initiated = false;
@@ -396,9 +396,9 @@ var TempleBundle = (() => {
         get props() {
           return this._props;
         }
-        set props(props2) {
-          this._props = Object.assign({}, props2);
-          this._attributes = Object.fromEntries(Object.entries(props2).filter((entry) => typeof entry[1] === "string" || entry[1] === true));
+        set props(props5) {
+          this._props = Object.assign({}, props5);
+          this._attributes = Object.fromEntries(Object.entries(props5).filter((entry) => typeof entry[1] === "string" || entry[1] === true));
         }
         adoptedCallback() {
           this.render();
@@ -437,10 +437,10 @@ var TempleBundle = (() => {
           } else {
             TempleEmitter_1.default.emit("unmounted", this);
           }
-          const children3 = this._template().filter(Boolean);
+          const children5 = this._template().filter(Boolean);
           if (styles.length === 0) {
             this.textContent = "";
-            children3.forEach((child) => this.appendChild(child));
+            children5.forEach((child) => this.appendChild(child));
           } else {
             if (!this.shadowRoot) {
               this.attachShadow({ mode: "open" });
@@ -451,7 +451,7 @@ var TempleBundle = (() => {
             const style = document.createElement("style");
             style.innerText = styles;
             shadowRoot.appendChild(style);
-            children3.forEach((child) => {
+            children5.forEach((child) => {
               var _a;
               return (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.appendChild(child);
             });
@@ -497,7 +497,7 @@ var TempleBundle = (() => {
           }
         }
       };
-      exports.default = TempleComponent4;
+      exports.default = TempleComponent6;
     }
   });
 
@@ -529,9 +529,9 @@ var TempleBundle = (() => {
         return mod && mod.__esModule ? mod : { "default": mod };
       };
       Object.defineProperty(exports, "__esModule", { value: true });
-      exports.default = props2;
+      exports.default = props5;
       var data_1 = __importDefault(require_data());
-      function props2(component = null) {
+      function props5(component = null) {
         if (!component) {
           component = data_1.default.get("current") || null;
         }
@@ -571,15 +571,15 @@ var TempleBundle = (() => {
       };
       Object.defineProperty(exports, "__esModule", { value: true });
       exports.innerHTML = innerHTML;
-      exports.default = children3;
+      exports.default = children5;
       var data_1 = __importDefault(require_data());
       function innerHTML(component = null) {
-        const inner = children3(component);
+        const inner = children5(component);
         const wrapper = document.createElement("template");
         wrapper.append(...inner);
         return wrapper.innerHTML;
       }
-      function children3(component = null) {
+      function children5(component = null) {
         if (!component) {
           component = data_1.default.get("current") || null;
         }
@@ -882,6 +882,1455 @@ var TempleBundle = (() => {
     }
   });
 
+  // ../../node_modules/prismjs/prism.js
+  var require_prism = __commonJS({
+    "../../node_modules/prismjs/prism.js"(exports, module) {
+      var _self = typeof window !== "undefined" ? window : typeof WorkerGlobalScope !== "undefined" && self instanceof WorkerGlobalScope ? self : {};
+      var Prism2 = function(_self2) {
+        var lang = /(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i;
+        var uniqueId = 0;
+        var plainTextGrammar = {};
+        var _2 = {
+          /**
+           * By default, Prism will attempt to highlight all code elements (by calling {@link Prism.highlightAll}) on the
+           * current page after the page finished loading. This might be a problem if e.g. you wanted to asynchronously load
+           * additional languages or plugins yourself.
+           *
+           * By setting this value to `true`, Prism will not automatically highlight all code elements on the page.
+           *
+           * You obviously have to change this value before the automatic highlighting started. To do this, you can add an
+           * empty Prism object into the global scope before loading the Prism script like this:
+           *
+           * ```js
+           * window.Prism = window.Prism || {};
+           * Prism.manual = true;
+           * // add a new <script> to load Prism's script
+           * ```
+           *
+           * @default false
+           * @type {boolean}
+           * @memberof Prism
+           * @public
+           */
+          manual: _self2.Prism && _self2.Prism.manual,
+          /**
+           * By default, if Prism is in a web worker, it assumes that it is in a worker it created itself, so it uses
+           * `addEventListener` to communicate with its parent instance. However, if you're using Prism manually in your
+           * own worker, you don't want it to do this.
+           *
+           * By setting this value to `true`, Prism will not add its own listeners to the worker.
+           *
+           * You obviously have to change this value before Prism executes. To do this, you can add an
+           * empty Prism object into the global scope before loading the Prism script like this:
+           *
+           * ```js
+           * window.Prism = window.Prism || {};
+           * Prism.disableWorkerMessageHandler = true;
+           * // Load Prism's script
+           * ```
+           *
+           * @default false
+           * @type {boolean}
+           * @memberof Prism
+           * @public
+           */
+          disableWorkerMessageHandler: _self2.Prism && _self2.Prism.disableWorkerMessageHandler,
+          /**
+           * A namespace for utility methods.
+           *
+           * All function in this namespace that are not explicitly marked as _public_ are for __internal use only__ and may
+           * change or disappear at any time.
+           *
+           * @namespace
+           * @memberof Prism
+           */
+          util: {
+            encode: function encode(tokens) {
+              if (tokens instanceof Token) {
+                return new Token(tokens.type, encode(tokens.content), tokens.alias);
+              } else if (Array.isArray(tokens)) {
+                return tokens.map(encode);
+              } else {
+                return tokens.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/\u00a0/g, " ");
+              }
+            },
+            /**
+             * Returns the name of the type of the given value.
+             *
+             * @param {any} o
+             * @returns {string}
+             * @example
+             * type(null)      === 'Null'
+             * type(undefined) === 'Undefined'
+             * type(123)       === 'Number'
+             * type('foo')     === 'String'
+             * type(true)      === 'Boolean'
+             * type([1, 2])    === 'Array'
+             * type({})        === 'Object'
+             * type(String)    === 'Function'
+             * type(/abc+/)    === 'RegExp'
+             */
+            type: function(o) {
+              return Object.prototype.toString.call(o).slice(8, -1);
+            },
+            /**
+             * Returns a unique number for the given object. Later calls will still return the same number.
+             *
+             * @param {Object} obj
+             * @returns {number}
+             */
+            objId: function(obj) {
+              if (!obj["__id"]) {
+                Object.defineProperty(obj, "__id", { value: ++uniqueId });
+              }
+              return obj["__id"];
+            },
+            /**
+             * Creates a deep clone of the given object.
+             *
+             * The main intended use of this function is to clone language definitions.
+             *
+             * @param {T} o
+             * @param {Record<number, any>} [visited]
+             * @returns {T}
+             * @template T
+             */
+            clone: function deepClone(o, visited) {
+              visited = visited || {};
+              var clone;
+              var id;
+              switch (_2.util.type(o)) {
+                case "Object":
+                  id = _2.util.objId(o);
+                  if (visited[id]) {
+                    return visited[id];
+                  }
+                  clone = /** @type {Record<string, any>} */
+                  {};
+                  visited[id] = clone;
+                  for (var key in o) {
+                    if (o.hasOwnProperty(key)) {
+                      clone[key] = deepClone(o[key], visited);
+                    }
+                  }
+                  return (
+                    /** @type {any} */
+                    clone
+                  );
+                case "Array":
+                  id = _2.util.objId(o);
+                  if (visited[id]) {
+                    return visited[id];
+                  }
+                  clone = [];
+                  visited[id] = clone;
+                  /** @type {Array} */
+                  /** @type {any} */
+                  o.forEach(function(v, i) {
+                    clone[i] = deepClone(v, visited);
+                  });
+                  return (
+                    /** @type {any} */
+                    clone
+                  );
+                default:
+                  return o;
+              }
+            },
+            /**
+             * Returns the Prism language of the given element set by a `language-xxxx` or `lang-xxxx` class.
+             *
+             * If no language is set for the element or the element is `null` or `undefined`, `none` will be returned.
+             *
+             * @param {Element} element
+             * @returns {string}
+             */
+            getLanguage: function(element) {
+              while (element) {
+                var m = lang.exec(element.className);
+                if (m) {
+                  return m[1].toLowerCase();
+                }
+                element = element.parentElement;
+              }
+              return "none";
+            },
+            /**
+             * Sets the Prism `language-xxxx` class of the given element.
+             *
+             * @param {Element} element
+             * @param {string} language
+             * @returns {void}
+             */
+            setLanguage: function(element, language) {
+              element.className = element.className.replace(RegExp(lang, "gi"), "");
+              element.classList.add("language-" + language);
+            },
+            /**
+             * Returns the script element that is currently executing.
+             *
+             * This does __not__ work for line script element.
+             *
+             * @returns {HTMLScriptElement | null}
+             */
+            currentScript: function() {
+              if (typeof document === "undefined") {
+                return null;
+              }
+              if ("currentScript" in document && 1 < 2) {
+                return (
+                  /** @type {any} */
+                  document.currentScript
+                );
+              }
+              try {
+                throw new Error();
+              } catch (err) {
+                var src = (/at [^(\r\n]*\((.*):[^:]+:[^:]+\)$/i.exec(err.stack) || [])[1];
+                if (src) {
+                  var scripts = document.getElementsByTagName("script");
+                  for (var i in scripts) {
+                    if (scripts[i].src == src) {
+                      return scripts[i];
+                    }
+                  }
+                }
+                return null;
+              }
+            },
+            /**
+             * Returns whether a given class is active for `element`.
+             *
+             * The class can be activated if `element` or one of its ancestors has the given class and it can be deactivated
+             * if `element` or one of its ancestors has the negated version of the given class. The _negated version_ of the
+             * given class is just the given class with a `no-` prefix.
+             *
+             * Whether the class is active is determined by the closest ancestor of `element` (where `element` itself is
+             * closest ancestor) that has the given class or the negated version of it. If neither `element` nor any of its
+             * ancestors have the given class or the negated version of it, then the default activation will be returned.
+             *
+             * In the paradoxical situation where the closest ancestor contains __both__ the given class and the negated
+             * version of it, the class is considered active.
+             *
+             * @param {Element} element
+             * @param {string} className
+             * @param {boolean} [defaultActivation=false]
+             * @returns {boolean}
+             */
+            isActive: function(element, className, defaultActivation) {
+              var no = "no-" + className;
+              while (element) {
+                var classList = element.classList;
+                if (classList.contains(className)) {
+                  return true;
+                }
+                if (classList.contains(no)) {
+                  return false;
+                }
+                element = element.parentElement;
+              }
+              return !!defaultActivation;
+            }
+          },
+          /**
+           * This namespace contains all currently loaded languages and the some helper functions to create and modify languages.
+           *
+           * @namespace
+           * @memberof Prism
+           * @public
+           */
+          languages: {
+            /**
+             * The grammar for plain, unformatted text.
+             */
+            plain: plainTextGrammar,
+            plaintext: plainTextGrammar,
+            text: plainTextGrammar,
+            txt: plainTextGrammar,
+            /**
+             * Creates a deep copy of the language with the given id and appends the given tokens.
+             *
+             * If a token in `redef` also appears in the copied language, then the existing token in the copied language
+             * will be overwritten at its original position.
+             *
+             * ## Best practices
+             *
+             * Since the position of overwriting tokens (token in `redef` that overwrite tokens in the copied language)
+             * doesn't matter, they can technically be in any order. However, this can be confusing to others that trying to
+             * understand the language definition because, normally, the order of tokens matters in Prism grammars.
+             *
+             * Therefore, it is encouraged to order overwriting tokens according to the positions of the overwritten tokens.
+             * Furthermore, all non-overwriting tokens should be placed after the overwriting ones.
+             *
+             * @param {string} id The id of the language to extend. This has to be a key in `Prism.languages`.
+             * @param {Grammar} redef The new tokens to append.
+             * @returns {Grammar} The new language created.
+             * @public
+             * @example
+             * Prism.languages['css-with-colors'] = Prism.languages.extend('css', {
+             *     // Prism.languages.css already has a 'comment' token, so this token will overwrite CSS' 'comment' token
+             *     // at its original position
+             *     'comment': { ... },
+             *     // CSS doesn't have a 'color' token, so this token will be appended
+             *     'color': /\b(?:red|green|blue)\b/
+             * });
+             */
+            extend: function(id, redef) {
+              var lang2 = _2.util.clone(_2.languages[id]);
+              for (var key in redef) {
+                lang2[key] = redef[key];
+              }
+              return lang2;
+            },
+            /**
+             * Inserts tokens _before_ another token in a language definition or any other grammar.
+             *
+             * ## Usage
+             *
+             * This helper method makes it easy to modify existing languages. For example, the CSS language definition
+             * not only defines CSS highlighting for CSS documents, but also needs to define highlighting for CSS embedded
+             * in HTML through `<style>` elements. To do this, it needs to modify `Prism.languages.markup` and add the
+             * appropriate tokens. However, `Prism.languages.markup` is a regular JavaScript object literal, so if you do
+             * this:
+             *
+             * ```js
+             * Prism.languages.markup.style = {
+             *     // token
+             * };
+             * ```
+             *
+             * then the `style` token will be added (and processed) at the end. `insertBefore` allows you to insert tokens
+             * before existing tokens. For the CSS example above, you would use it like this:
+             *
+             * ```js
+             * Prism.languages.insertBefore('markup', 'cdata', {
+             *     'style': {
+             *         // token
+             *     }
+             * });
+             * ```
+             *
+             * ## Special cases
+             *
+             * If the grammars of `inside` and `insert` have tokens with the same name, the tokens in `inside`'s grammar
+             * will be ignored.
+             *
+             * This behavior can be used to insert tokens after `before`:
+             *
+             * ```js
+             * Prism.languages.insertBefore('markup', 'comment', {
+             *     'comment': Prism.languages.markup.comment,
+             *     // tokens after 'comment'
+             * });
+             * ```
+             *
+             * ## Limitations
+             *
+             * The main problem `insertBefore` has to solve is iteration order. Since ES2015, the iteration order for object
+             * properties is guaranteed to be the insertion order (except for integer keys) but some browsers behave
+             * differently when keys are deleted and re-inserted. So `insertBefore` can't be implemented by temporarily
+             * deleting properties which is necessary to insert at arbitrary positions.
+             *
+             * To solve this problem, `insertBefore` doesn't actually insert the given tokens into the target object.
+             * Instead, it will create a new object and replace all references to the target object with the new one. This
+             * can be done without temporarily deleting properties, so the iteration order is well-defined.
+             *
+             * However, only references that can be reached from `Prism.languages` or `insert` will be replaced. I.e. if
+             * you hold the target object in a variable, then the value of the variable will not change.
+             *
+             * ```js
+             * var oldMarkup = Prism.languages.markup;
+             * var newMarkup = Prism.languages.insertBefore('markup', 'comment', { ... });
+             *
+             * assert(oldMarkup !== Prism.languages.markup);
+             * assert(newMarkup === Prism.languages.markup);
+             * ```
+             *
+             * @param {string} inside The property of `root` (e.g. a language id in `Prism.languages`) that contains the
+             * object to be modified.
+             * @param {string} before The key to insert before.
+             * @param {Grammar} insert An object containing the key-value pairs to be inserted.
+             * @param {Object<string, any>} [root] The object containing `inside`, i.e. the object that contains the
+             * object to be modified.
+             *
+             * Defaults to `Prism.languages`.
+             * @returns {Grammar} The new grammar object.
+             * @public
+             */
+            insertBefore: function(inside, before, insert, root) {
+              root = root || /** @type {any} */
+              _2.languages;
+              var grammar = root[inside];
+              var ret = {};
+              for (var token in grammar) {
+                if (grammar.hasOwnProperty(token)) {
+                  if (token == before) {
+                    for (var newToken in insert) {
+                      if (insert.hasOwnProperty(newToken)) {
+                        ret[newToken] = insert[newToken];
+                      }
+                    }
+                  }
+                  if (!insert.hasOwnProperty(token)) {
+                    ret[token] = grammar[token];
+                  }
+                }
+              }
+              var old = root[inside];
+              root[inside] = ret;
+              _2.languages.DFS(_2.languages, function(key, value) {
+                if (value === old && key != inside) {
+                  this[key] = ret;
+                }
+              });
+              return ret;
+            },
+            // Traverse a language definition with Depth First Search
+            DFS: function DFS(o, callback, type, visited) {
+              visited = visited || {};
+              var objId = _2.util.objId;
+              for (var i in o) {
+                if (o.hasOwnProperty(i)) {
+                  callback.call(o, i, o[i], type || i);
+                  var property = o[i];
+                  var propertyType = _2.util.type(property);
+                  if (propertyType === "Object" && !visited[objId(property)]) {
+                    visited[objId(property)] = true;
+                    DFS(property, callback, null, visited);
+                  } else if (propertyType === "Array" && !visited[objId(property)]) {
+                    visited[objId(property)] = true;
+                    DFS(property, callback, i, visited);
+                  }
+                }
+              }
+            }
+          },
+          plugins: {},
+          /**
+           * This is the most high-level function in Prism’s API.
+           * It fetches all the elements that have a `.language-xxxx` class and then calls {@link Prism.highlightElement} on
+           * each one of them.
+           *
+           * This is equivalent to `Prism.highlightAllUnder(document, async, callback)`.
+           *
+           * @param {boolean} [async=false] Same as in {@link Prism.highlightAllUnder}.
+           * @param {HighlightCallback} [callback] Same as in {@link Prism.highlightAllUnder}.
+           * @memberof Prism
+           * @public
+           */
+          highlightAll: function(async, callback) {
+            _2.highlightAllUnder(document, async, callback);
+          },
+          /**
+           * Fetches all the descendants of `container` that have a `.language-xxxx` class and then calls
+           * {@link Prism.highlightElement} on each one of them.
+           *
+           * The following hooks will be run:
+           * 1. `before-highlightall`
+           * 2. `before-all-elements-highlight`
+           * 3. All hooks of {@link Prism.highlightElement} for each element.
+           *
+           * @param {ParentNode} container The root element, whose descendants that have a `.language-xxxx` class will be highlighted.
+           * @param {boolean} [async=false] Whether each element is to be highlighted asynchronously using Web Workers.
+           * @param {HighlightCallback} [callback] An optional callback to be invoked on each element after its highlighting is done.
+           * @memberof Prism
+           * @public
+           */
+          highlightAllUnder: function(container, async, callback) {
+            var env = {
+              callback,
+              container,
+              selector: 'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'
+            };
+            _2.hooks.run("before-highlightall", env);
+            env.elements = Array.prototype.slice.apply(env.container.querySelectorAll(env.selector));
+            _2.hooks.run("before-all-elements-highlight", env);
+            for (var i = 0, element; element = env.elements[i++]; ) {
+              _2.highlightElement(element, async === true, env.callback);
+            }
+          },
+          /**
+           * Highlights the code inside a single element.
+           *
+           * The following hooks will be run:
+           * 1. `before-sanity-check`
+           * 2. `before-highlight`
+           * 3. All hooks of {@link Prism.highlight}. These hooks will be run by an asynchronous worker if `async` is `true`.
+           * 4. `before-insert`
+           * 5. `after-highlight`
+           * 6. `complete`
+           *
+           * Some the above hooks will be skipped if the element doesn't contain any text or there is no grammar loaded for
+           * the element's language.
+           *
+           * @param {Element} element The element containing the code.
+           * It must have a class of `language-xxxx` to be processed, where `xxxx` is a valid language identifier.
+           * @param {boolean} [async=false] Whether the element is to be highlighted asynchronously using Web Workers
+           * to improve performance and avoid blocking the UI when highlighting very large chunks of code. This option is
+           * [disabled by default](https://prismjs.com/faq.html#why-is-asynchronous-highlighting-disabled-by-default).
+           *
+           * Note: All language definitions required to highlight the code must be included in the main `prism.js` file for
+           * asynchronous highlighting to work. You can build your own bundle on the
+           * [Download page](https://prismjs.com/download.html).
+           * @param {HighlightCallback} [callback] An optional callback to be invoked after the highlighting is done.
+           * Mostly useful when `async` is `true`, since in that case, the highlighting is done asynchronously.
+           * @memberof Prism
+           * @public
+           */
+          highlightElement: function(element, async, callback) {
+            var language = _2.util.getLanguage(element);
+            var grammar = _2.languages[language];
+            _2.util.setLanguage(element, language);
+            var parent = element.parentElement;
+            if (parent && parent.nodeName.toLowerCase() === "pre") {
+              _2.util.setLanguage(parent, language);
+            }
+            var code = element.textContent;
+            var env = {
+              element,
+              language,
+              grammar,
+              code
+            };
+            function insertHighlightedCode(highlightedCode) {
+              env.highlightedCode = highlightedCode;
+              _2.hooks.run("before-insert", env);
+              env.element.innerHTML = env.highlightedCode;
+              _2.hooks.run("after-highlight", env);
+              _2.hooks.run("complete", env);
+              callback && callback.call(env.element);
+            }
+            _2.hooks.run("before-sanity-check", env);
+            parent = env.element.parentElement;
+            if (parent && parent.nodeName.toLowerCase() === "pre" && !parent.hasAttribute("tabindex")) {
+              parent.setAttribute("tabindex", "0");
+            }
+            if (!env.code) {
+              _2.hooks.run("complete", env);
+              callback && callback.call(env.element);
+              return;
+            }
+            _2.hooks.run("before-highlight", env);
+            if (!env.grammar) {
+              insertHighlightedCode(_2.util.encode(env.code));
+              return;
+            }
+            if (async && _self2.Worker) {
+              var worker = new Worker(_2.filename);
+              worker.onmessage = function(evt) {
+                insertHighlightedCode(evt.data);
+              };
+              worker.postMessage(JSON.stringify({
+                language: env.language,
+                code: env.code,
+                immediateClose: true
+              }));
+            } else {
+              insertHighlightedCode(_2.highlight(env.code, env.grammar, env.language));
+            }
+          },
+          /**
+           * Low-level function, only use if you know what you’re doing. It accepts a string of text as input
+           * and the language definitions to use, and returns a string with the HTML produced.
+           *
+           * The following hooks will be run:
+           * 1. `before-tokenize`
+           * 2. `after-tokenize`
+           * 3. `wrap`: On each {@link Token}.
+           *
+           * @param {string} text A string with the code to be highlighted.
+           * @param {Grammar} grammar An object containing the tokens to use.
+           *
+           * Usually a language definition like `Prism.languages.markup`.
+           * @param {string} language The name of the language definition passed to `grammar`.
+           * @returns {string} The highlighted HTML.
+           * @memberof Prism
+           * @public
+           * @example
+           * Prism.highlight('var foo = true;', Prism.languages.javascript, 'javascript');
+           */
+          highlight: function(text, grammar, language) {
+            var env = {
+              code: text,
+              grammar,
+              language
+            };
+            _2.hooks.run("before-tokenize", env);
+            if (!env.grammar) {
+              throw new Error('The language "' + env.language + '" has no grammar.');
+            }
+            env.tokens = _2.tokenize(env.code, env.grammar);
+            _2.hooks.run("after-tokenize", env);
+            return Token.stringify(_2.util.encode(env.tokens), env.language);
+          },
+          /**
+           * This is the heart of Prism, and the most low-level function you can use. It accepts a string of text as input
+           * and the language definitions to use, and returns an array with the tokenized code.
+           *
+           * When the language definition includes nested tokens, the function is called recursively on each of these tokens.
+           *
+           * This method could be useful in other contexts as well, as a very crude parser.
+           *
+           * @param {string} text A string with the code to be highlighted.
+           * @param {Grammar} grammar An object containing the tokens to use.
+           *
+           * Usually a language definition like `Prism.languages.markup`.
+           * @returns {TokenStream} An array of strings and tokens, a token stream.
+           * @memberof Prism
+           * @public
+           * @example
+           * let code = `var foo = 0;`;
+           * let tokens = Prism.tokenize(code, Prism.languages.javascript);
+           * tokens.forEach(token => {
+           *     if (token instanceof Prism.Token && token.type === 'number') {
+           *         console.log(`Found numeric literal: ${token.content}`);
+           *     }
+           * });
+           */
+          tokenize: function(text, grammar) {
+            var rest = grammar.rest;
+            if (rest) {
+              for (var token in rest) {
+                grammar[token] = rest[token];
+              }
+              delete grammar.rest;
+            }
+            var tokenList = new LinkedList();
+            addAfter(tokenList, tokenList.head, text);
+            matchGrammar(text, tokenList, grammar, tokenList.head, 0);
+            return toArray(tokenList);
+          },
+          /**
+           * @namespace
+           * @memberof Prism
+           * @public
+           */
+          hooks: {
+            all: {},
+            /**
+             * Adds the given callback to the list of callbacks for the given hook.
+             *
+             * The callback will be invoked when the hook it is registered for is run.
+             * Hooks are usually directly run by a highlight function but you can also run hooks yourself.
+             *
+             * One callback function can be registered to multiple hooks and the same hook multiple times.
+             *
+             * @param {string} name The name of the hook.
+             * @param {HookCallback} callback The callback function which is given environment variables.
+             * @public
+             */
+            add: function(name, callback) {
+              var hooks = _2.hooks.all;
+              hooks[name] = hooks[name] || [];
+              hooks[name].push(callback);
+            },
+            /**
+             * Runs a hook invoking all registered callbacks with the given environment variables.
+             *
+             * Callbacks will be invoked synchronously and in the order in which they were registered.
+             *
+             * @param {string} name The name of the hook.
+             * @param {Object<string, any>} env The environment variables of the hook passed to all callbacks registered.
+             * @public
+             */
+            run: function(name, env) {
+              var callbacks = _2.hooks.all[name];
+              if (!callbacks || !callbacks.length) {
+                return;
+              }
+              for (var i = 0, callback; callback = callbacks[i++]; ) {
+                callback(env);
+              }
+            }
+          },
+          Token
+        };
+        _self2.Prism = _2;
+        function Token(type, content, alias, matchedStr) {
+          this.type = type;
+          this.content = content;
+          this.alias = alias;
+          this.length = (matchedStr || "").length | 0;
+        }
+        Token.stringify = function stringify(o, language) {
+          if (typeof o == "string") {
+            return o;
+          }
+          if (Array.isArray(o)) {
+            var s = "";
+            o.forEach(function(e) {
+              s += stringify(e, language);
+            });
+            return s;
+          }
+          var env = {
+            type: o.type,
+            content: stringify(o.content, language),
+            tag: "span",
+            classes: ["token", o.type],
+            attributes: {},
+            language
+          };
+          var aliases = o.alias;
+          if (aliases) {
+            if (Array.isArray(aliases)) {
+              Array.prototype.push.apply(env.classes, aliases);
+            } else {
+              env.classes.push(aliases);
+            }
+          }
+          _2.hooks.run("wrap", env);
+          var attributes = "";
+          for (var name in env.attributes) {
+            attributes += " " + name + '="' + (env.attributes[name] || "").replace(/"/g, "&quot;") + '"';
+          }
+          return "<" + env.tag + ' class="' + env.classes.join(" ") + '"' + attributes + ">" + env.content + "</" + env.tag + ">";
+        };
+        function matchPattern(pattern, pos, text, lookbehind) {
+          pattern.lastIndex = pos;
+          var match = pattern.exec(text);
+          if (match && lookbehind && match[1]) {
+            var lookbehindLength = match[1].length;
+            match.index += lookbehindLength;
+            match[0] = match[0].slice(lookbehindLength);
+          }
+          return match;
+        }
+        function matchGrammar(text, tokenList, grammar, startNode, startPos, rematch) {
+          for (var token in grammar) {
+            if (!grammar.hasOwnProperty(token) || !grammar[token]) {
+              continue;
+            }
+            var patterns = grammar[token];
+            patterns = Array.isArray(patterns) ? patterns : [patterns];
+            for (var j = 0; j < patterns.length; ++j) {
+              if (rematch && rematch.cause == token + "," + j) {
+                return;
+              }
+              var patternObj = patterns[j];
+              var inside = patternObj.inside;
+              var lookbehind = !!patternObj.lookbehind;
+              var greedy = !!patternObj.greedy;
+              var alias = patternObj.alias;
+              if (greedy && !patternObj.pattern.global) {
+                var flags = patternObj.pattern.toString().match(/[imsuy]*$/)[0];
+                patternObj.pattern = RegExp(patternObj.pattern.source, flags + "g");
+              }
+              var pattern = patternObj.pattern || patternObj;
+              for (var currentNode = startNode.next, pos = startPos; currentNode !== tokenList.tail; pos += currentNode.value.length, currentNode = currentNode.next) {
+                if (rematch && pos >= rematch.reach) {
+                  break;
+                }
+                var str = currentNode.value;
+                if (tokenList.length > text.length) {
+                  return;
+                }
+                if (str instanceof Token) {
+                  continue;
+                }
+                var removeCount = 1;
+                var match;
+                if (greedy) {
+                  match = matchPattern(pattern, pos, text, lookbehind);
+                  if (!match || match.index >= text.length) {
+                    break;
+                  }
+                  var from = match.index;
+                  var to = match.index + match[0].length;
+                  var p = pos;
+                  p += currentNode.value.length;
+                  while (from >= p) {
+                    currentNode = currentNode.next;
+                    p += currentNode.value.length;
+                  }
+                  p -= currentNode.value.length;
+                  pos = p;
+                  if (currentNode.value instanceof Token) {
+                    continue;
+                  }
+                  for (var k = currentNode; k !== tokenList.tail && (p < to || typeof k.value === "string"); k = k.next) {
+                    removeCount++;
+                    p += k.value.length;
+                  }
+                  removeCount--;
+                  str = text.slice(pos, p);
+                  match.index -= pos;
+                } else {
+                  match = matchPattern(pattern, 0, str, lookbehind);
+                  if (!match) {
+                    continue;
+                  }
+                }
+                var from = match.index;
+                var matchStr = match[0];
+                var before = str.slice(0, from);
+                var after = str.slice(from + matchStr.length);
+                var reach = pos + str.length;
+                if (rematch && reach > rematch.reach) {
+                  rematch.reach = reach;
+                }
+                var removeFrom = currentNode.prev;
+                if (before) {
+                  removeFrom = addAfter(tokenList, removeFrom, before);
+                  pos += before.length;
+                }
+                removeRange(tokenList, removeFrom, removeCount);
+                var wrapped = new Token(token, inside ? _2.tokenize(matchStr, inside) : matchStr, alias, matchStr);
+                currentNode = addAfter(tokenList, removeFrom, wrapped);
+                if (after) {
+                  addAfter(tokenList, currentNode, after);
+                }
+                if (removeCount > 1) {
+                  var nestedRematch = {
+                    cause: token + "," + j,
+                    reach
+                  };
+                  matchGrammar(text, tokenList, grammar, currentNode.prev, pos, nestedRematch);
+                  if (rematch && nestedRematch.reach > rematch.reach) {
+                    rematch.reach = nestedRematch.reach;
+                  }
+                }
+              }
+            }
+          }
+        }
+        function LinkedList() {
+          var head = { value: null, prev: null, next: null };
+          var tail = { value: null, prev: head, next: null };
+          head.next = tail;
+          this.head = head;
+          this.tail = tail;
+          this.length = 0;
+        }
+        function addAfter(list, node, value) {
+          var next = node.next;
+          var newNode = { value, prev: node, next };
+          node.next = newNode;
+          next.prev = newNode;
+          list.length++;
+          return newNode;
+        }
+        function removeRange(list, node, count) {
+          var next = node.next;
+          for (var i = 0; i < count && next !== list.tail; i++) {
+            next = next.next;
+          }
+          node.next = next;
+          next.prev = node;
+          list.length -= i;
+        }
+        function toArray(list) {
+          var array = [];
+          var node = list.head.next;
+          while (node !== list.tail) {
+            array.push(node.value);
+            node = node.next;
+          }
+          return array;
+        }
+        if (!_self2.document) {
+          if (!_self2.addEventListener) {
+            return _2;
+          }
+          if (!_2.disableWorkerMessageHandler) {
+            _self2.addEventListener("message", function(evt) {
+              var message = JSON.parse(evt.data);
+              var lang2 = message.language;
+              var code = message.code;
+              var immediateClose = message.immediateClose;
+              _self2.postMessage(_2.highlight(code, _2.languages[lang2], lang2));
+              if (immediateClose) {
+                _self2.close();
+              }
+            }, false);
+          }
+          return _2;
+        }
+        var script = _2.util.currentScript();
+        if (script) {
+          _2.filename = script.src;
+          if (script.hasAttribute("data-manual")) {
+            _2.manual = true;
+          }
+        }
+        function highlightAutomaticallyCallback() {
+          if (!_2.manual) {
+            _2.highlightAll();
+          }
+        }
+        if (!_2.manual) {
+          var readyState = document.readyState;
+          if (readyState === "loading" || readyState === "interactive" && script && script.defer) {
+            document.addEventListener("DOMContentLoaded", highlightAutomaticallyCallback);
+          } else {
+            if (window.requestAnimationFrame) {
+              window.requestAnimationFrame(highlightAutomaticallyCallback);
+            } else {
+              window.setTimeout(highlightAutomaticallyCallback, 16);
+            }
+          }
+        }
+        return _2;
+      }(_self);
+      if (typeof module !== "undefined" && module.exports) {
+        module.exports = Prism2;
+      }
+      if (typeof global !== "undefined") {
+        global.Prism = Prism2;
+      }
+      Prism2.languages.markup = {
+        "comment": {
+          pattern: /<!--(?:(?!<!--)[\s\S])*?-->/,
+          greedy: true
+        },
+        "prolog": {
+          pattern: /<\?[\s\S]+?\?>/,
+          greedy: true
+        },
+        "doctype": {
+          // https://www.w3.org/TR/xml/#NT-doctypedecl
+          pattern: /<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,
+          greedy: true,
+          inside: {
+            "internal-subset": {
+              pattern: /(^[^\[]*\[)[\s\S]+(?=\]>$)/,
+              lookbehind: true,
+              greedy: true,
+              inside: null
+              // see below
+            },
+            "string": {
+              pattern: /"[^"]*"|'[^']*'/,
+              greedy: true
+            },
+            "punctuation": /^<!|>$|[[\]]/,
+            "doctype-tag": /^DOCTYPE/i,
+            "name": /[^\s<>'"]+/
+          }
+        },
+        "cdata": {
+          pattern: /<!\[CDATA\[[\s\S]*?\]\]>/i,
+          greedy: true
+        },
+        "tag": {
+          pattern: /<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,
+          greedy: true,
+          inside: {
+            "tag": {
+              pattern: /^<\/?[^\s>\/]+/,
+              inside: {
+                "punctuation": /^<\/?/,
+                "namespace": /^[^\s>\/:]+:/
+              }
+            },
+            "special-attr": [],
+            "attr-value": {
+              pattern: /=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,
+              inside: {
+                "punctuation": [
+                  {
+                    pattern: /^=/,
+                    alias: "attr-equals"
+                  },
+                  {
+                    pattern: /^(\s*)["']|["']$/,
+                    lookbehind: true
+                  }
+                ]
+              }
+            },
+            "punctuation": /\/?>/,
+            "attr-name": {
+              pattern: /[^\s>\/]+/,
+              inside: {
+                "namespace": /^[^\s>\/:]+:/
+              }
+            }
+          }
+        },
+        "entity": [
+          {
+            pattern: /&[\da-z]{1,8};/i,
+            alias: "named-entity"
+          },
+          /&#x?[\da-f]{1,8};/i
+        ]
+      };
+      Prism2.languages.markup["tag"].inside["attr-value"].inside["entity"] = Prism2.languages.markup["entity"];
+      Prism2.languages.markup["doctype"].inside["internal-subset"].inside = Prism2.languages.markup;
+      Prism2.hooks.add("wrap", function(env) {
+        if (env.type === "entity") {
+          env.attributes["title"] = env.content.replace(/&amp;/, "&");
+        }
+      });
+      Object.defineProperty(Prism2.languages.markup.tag, "addInlined", {
+        /**
+         * Adds an inlined language to markup.
+         *
+         * An example of an inlined language is CSS with `<style>` tags.
+         *
+         * @param {string} tagName The name of the tag that contains the inlined language. This name will be treated as
+         * case insensitive.
+         * @param {string} lang The language key.
+         * @example
+         * addInlined('style', 'css');
+         */
+        value: function addInlined(tagName, lang) {
+          var includedCdataInside = {};
+          includedCdataInside["language-" + lang] = {
+            pattern: /(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,
+            lookbehind: true,
+            inside: Prism2.languages[lang]
+          };
+          includedCdataInside["cdata"] = /^<!\[CDATA\[|\]\]>$/i;
+          var inside = {
+            "included-cdata": {
+              pattern: /<!\[CDATA\[[\s\S]*?\]\]>/i,
+              inside: includedCdataInside
+            }
+          };
+          inside["language-" + lang] = {
+            pattern: /[\s\S]+/,
+            inside: Prism2.languages[lang]
+          };
+          var def = {};
+          def[tagName] = {
+            pattern: RegExp(/(<__[^>]*>)(?:<!\[CDATA\[(?:[^\]]|\](?!\]>))*\]\]>|(?!<!\[CDATA\[)[\s\S])*?(?=<\/__>)/.source.replace(/__/g, function() {
+              return tagName;
+            }), "i"),
+            lookbehind: true,
+            greedy: true,
+            inside
+          };
+          Prism2.languages.insertBefore("markup", "cdata", def);
+        }
+      });
+      Object.defineProperty(Prism2.languages.markup.tag, "addAttribute", {
+        /**
+         * Adds an pattern to highlight languages embedded in HTML attributes.
+         *
+         * An example of an inlined language is CSS with `style` attributes.
+         *
+         * @param {string} attrName The name of the tag that contains the inlined language. This name will be treated as
+         * case insensitive.
+         * @param {string} lang The language key.
+         * @example
+         * addAttribute('style', 'css');
+         */
+        value: function(attrName, lang) {
+          Prism2.languages.markup.tag.inside["special-attr"].push({
+            pattern: RegExp(
+              /(^|["'\s])/.source + "(?:" + attrName + ")" + /\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,
+              "i"
+            ),
+            lookbehind: true,
+            inside: {
+              "attr-name": /^[^\s=]+/,
+              "attr-value": {
+                pattern: /=[\s\S]+/,
+                inside: {
+                  "value": {
+                    pattern: /(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,
+                    lookbehind: true,
+                    alias: [lang, "language-" + lang],
+                    inside: Prism2.languages[lang]
+                  },
+                  "punctuation": [
+                    {
+                      pattern: /^=/,
+                      alias: "attr-equals"
+                    },
+                    /"|'/
+                  ]
+                }
+              }
+            }
+          });
+        }
+      });
+      Prism2.languages.html = Prism2.languages.markup;
+      Prism2.languages.mathml = Prism2.languages.markup;
+      Prism2.languages.svg = Prism2.languages.markup;
+      Prism2.languages.xml = Prism2.languages.extend("markup", {});
+      Prism2.languages.ssml = Prism2.languages.xml;
+      Prism2.languages.atom = Prism2.languages.xml;
+      Prism2.languages.rss = Prism2.languages.xml;
+      (function(Prism3) {
+        var string = /(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;
+        Prism3.languages.css = {
+          "comment": /\/\*[\s\S]*?\*\//,
+          "atrule": {
+            pattern: RegExp("@[\\w-](?:" + /[^;{\s"']|\s+(?!\s)/.source + "|" + string.source + ")*?" + /(?:;|(?=\s*\{))/.source),
+            inside: {
+              "rule": /^@[\w-]+/,
+              "selector-function-argument": {
+                pattern: /(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,
+                lookbehind: true,
+                alias: "selector"
+              },
+              "keyword": {
+                pattern: /(^|[^\w-])(?:and|not|only|or)(?![\w-])/,
+                lookbehind: true
+              }
+              // See rest below
+            }
+          },
+          "url": {
+            // https://drafts.csswg.org/css-values-3/#urls
+            pattern: RegExp("\\burl\\((?:" + string.source + "|" + /(?:[^\\\r\n()"']|\\[\s\S])*/.source + ")\\)", "i"),
+            greedy: true,
+            inside: {
+              "function": /^url/i,
+              "punctuation": /^\(|\)$/,
+              "string": {
+                pattern: RegExp("^" + string.source + "$"),
+                alias: "url"
+              }
+            }
+          },
+          "selector": {
+            pattern: RegExp(`(^|[{}\\s])[^{}\\s](?:[^{};"'\\s]|\\s+(?![\\s{])|` + string.source + ")*(?=\\s*\\{)"),
+            lookbehind: true
+          },
+          "string": {
+            pattern: string,
+            greedy: true
+          },
+          "property": {
+            pattern: /(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,
+            lookbehind: true
+          },
+          "important": /!important\b/i,
+          "function": {
+            pattern: /(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,
+            lookbehind: true
+          },
+          "punctuation": /[(){};:,]/
+        };
+        Prism3.languages.css["atrule"].inside.rest = Prism3.languages.css;
+        var markup = Prism3.languages.markup;
+        if (markup) {
+          markup.tag.addInlined("style", "css");
+          markup.tag.addAttribute("style", "css");
+        }
+      })(Prism2);
+      Prism2.languages.clike = {
+        "comment": [
+          {
+            pattern: /(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,
+            lookbehind: true,
+            greedy: true
+          },
+          {
+            pattern: /(^|[^\\:])\/\/.*/,
+            lookbehind: true,
+            greedy: true
+          }
+        ],
+        "string": {
+          pattern: /(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
+          greedy: true
+        },
+        "class-name": {
+          pattern: /(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,
+          lookbehind: true,
+          inside: {
+            "punctuation": /[.\\]/
+          }
+        },
+        "keyword": /\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,
+        "boolean": /\b(?:false|true)\b/,
+        "function": /\b\w+(?=\()/,
+        "number": /\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,
+        "operator": /[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,
+        "punctuation": /[{}[\];(),.:]/
+      };
+      Prism2.languages.javascript = Prism2.languages.extend("clike", {
+        "class-name": [
+          Prism2.languages.clike["class-name"],
+          {
+            pattern: /(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,
+            lookbehind: true
+          }
+        ],
+        "keyword": [
+          {
+            pattern: /((?:^|\})\s*)catch\b/,
+            lookbehind: true
+          },
+          {
+            pattern: /(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,
+            lookbehind: true
+          }
+        ],
+        // Allow for all non-ASCII characters (See http://stackoverflow.com/a/2008444)
+        "function": /#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,
+        "number": {
+          pattern: RegExp(
+            /(^|[^\w$])/.source + "(?:" + // constant
+            (/NaN|Infinity/.source + "|" + // binary integer
+            /0[bB][01]+(?:_[01]+)*n?/.source + "|" + // octal integer
+            /0[oO][0-7]+(?:_[0-7]+)*n?/.source + "|" + // hexadecimal integer
+            /0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source + "|" + // decimal bigint
+            /\d+(?:_\d+)*n/.source + "|" + // decimal number (integer or float) but no bigint
+            /(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source) + ")" + /(?![\w$])/.source
+          ),
+          lookbehind: true
+        },
+        "operator": /--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/
+      });
+      Prism2.languages.javascript["class-name"][0].pattern = /(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/;
+      Prism2.languages.insertBefore("javascript", "keyword", {
+        "regex": {
+          pattern: RegExp(
+            // lookbehind
+            // eslint-disable-next-line regexp/no-dupe-characters-character-class
+            /((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)/.source + // Regex pattern:
+            // There are 2 regex patterns here. The RegExp set notation proposal added support for nested character
+            // classes if the `v` flag is present. Unfortunately, nested CCs are both context-free and incompatible
+            // with the only syntax, so we have to define 2 different regex patterns.
+            /\//.source + "(?:" + /(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}/.source + "|" + // `v` flag syntax. This supports 3 levels of nested character classes.
+            /(?:\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.)*\])*\])*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}v[dgimyus]{0,7}/.source + ")" + // lookahead
+            /(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/.source
+          ),
+          lookbehind: true,
+          greedy: true,
+          inside: {
+            "regex-source": {
+              pattern: /^(\/)[\s\S]+(?=\/[a-z]*$)/,
+              lookbehind: true,
+              alias: "language-regex",
+              inside: Prism2.languages.regex
+            },
+            "regex-delimiter": /^\/|\/$/,
+            "regex-flags": /^[a-z]+$/
+          }
+        },
+        // This must be declared before keyword because we use "function" inside the look-forward
+        "function-variable": {
+          pattern: /#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,
+          alias: "function"
+        },
+        "parameter": [
+          {
+            pattern: /(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,
+            lookbehind: true,
+            inside: Prism2.languages.javascript
+          },
+          {
+            pattern: /(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,
+            lookbehind: true,
+            inside: Prism2.languages.javascript
+          },
+          {
+            pattern: /(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,
+            lookbehind: true,
+            inside: Prism2.languages.javascript
+          },
+          {
+            pattern: /((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,
+            lookbehind: true,
+            inside: Prism2.languages.javascript
+          }
+        ],
+        "constant": /\b[A-Z](?:[A-Z_]|\dx?)*\b/
+      });
+      Prism2.languages.insertBefore("javascript", "string", {
+        "hashbang": {
+          pattern: /^#!.*/,
+          greedy: true,
+          alias: "comment"
+        },
+        "template-string": {
+          pattern: /`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,
+          greedy: true,
+          inside: {
+            "template-punctuation": {
+              pattern: /^`|`$/,
+              alias: "string"
+            },
+            "interpolation": {
+              pattern: /((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,
+              lookbehind: true,
+              inside: {
+                "interpolation-punctuation": {
+                  pattern: /^\$\{|\}$/,
+                  alias: "punctuation"
+                },
+                rest: Prism2.languages.javascript
+              }
+            },
+            "string": /[\s\S]+/
+          }
+        },
+        "string-property": {
+          pattern: /((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,
+          lookbehind: true,
+          greedy: true,
+          alias: "property"
+        }
+      });
+      Prism2.languages.insertBefore("javascript", "operator", {
+        "literal-property": {
+          pattern: /((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,
+          lookbehind: true,
+          alias: "property"
+        }
+      });
+      if (Prism2.languages.markup) {
+        Prism2.languages.markup.tag.addInlined("script", "javascript");
+        Prism2.languages.markup.tag.addAttribute(
+          /on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source,
+          "javascript"
+        );
+      }
+      Prism2.languages.js = Prism2.languages.javascript;
+      (function() {
+        if (typeof Prism2 === "undefined" || typeof document === "undefined") {
+          return;
+        }
+        if (!Element.prototype.matches) {
+          Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+        }
+        var LOADING_MESSAGE = "Loading\u2026";
+        var FAILURE_MESSAGE = function(status, message) {
+          return "\u2716 Error " + status + " while fetching file: " + message;
+        };
+        var FAILURE_EMPTY_MESSAGE = "\u2716 Error: File does not exist or is empty";
+        var EXTENSIONS = {
+          "js": "javascript",
+          "py": "python",
+          "rb": "ruby",
+          "ps1": "powershell",
+          "psm1": "powershell",
+          "sh": "bash",
+          "bat": "batch",
+          "h": "c",
+          "tex": "latex"
+        };
+        var STATUS_ATTR = "data-src-status";
+        var STATUS_LOADING = "loading";
+        var STATUS_LOADED = "loaded";
+        var STATUS_FAILED = "failed";
+        var SELECTOR = "pre[data-src]:not([" + STATUS_ATTR + '="' + STATUS_LOADED + '"]):not([' + STATUS_ATTR + '="' + STATUS_LOADING + '"])';
+        function loadFile(src, success, error) {
+          var xhr = new XMLHttpRequest();
+          xhr.open("GET", src, true);
+          xhr.onreadystatechange = function() {
+            if (xhr.readyState == 4) {
+              if (xhr.status < 400 && xhr.responseText) {
+                success(xhr.responseText);
+              } else {
+                if (xhr.status >= 400) {
+                  error(FAILURE_MESSAGE(xhr.status, xhr.statusText));
+                } else {
+                  error(FAILURE_EMPTY_MESSAGE);
+                }
+              }
+            }
+          };
+          xhr.send(null);
+        }
+        function parseRange(range) {
+          var m = /^\s*(\d+)\s*(?:(,)\s*(?:(\d+)\s*)?)?$/.exec(range || "");
+          if (m) {
+            var start = Number(m[1]);
+            var comma = m[2];
+            var end = m[3];
+            if (!comma) {
+              return [start, start];
+            }
+            if (!end) {
+              return [start, void 0];
+            }
+            return [start, Number(end)];
+          }
+          return void 0;
+        }
+        Prism2.hooks.add("before-highlightall", function(env) {
+          env.selector += ", " + SELECTOR;
+        });
+        Prism2.hooks.add("before-sanity-check", function(env) {
+          var pre = (
+            /** @type {HTMLPreElement} */
+            env.element
+          );
+          if (pre.matches(SELECTOR)) {
+            env.code = "";
+            pre.setAttribute(STATUS_ATTR, STATUS_LOADING);
+            var code = pre.appendChild(document.createElement("CODE"));
+            code.textContent = LOADING_MESSAGE;
+            var src = pre.getAttribute("data-src");
+            var language = env.language;
+            if (language === "none") {
+              var extension = (/\.(\w+)$/.exec(src) || [, "none"])[1];
+              language = EXTENSIONS[extension] || extension;
+            }
+            Prism2.util.setLanguage(code, language);
+            Prism2.util.setLanguage(pre, language);
+            var autoloader = Prism2.plugins.autoloader;
+            if (autoloader) {
+              autoloader.loadLanguages(language);
+            }
+            loadFile(
+              src,
+              function(text) {
+                pre.setAttribute(STATUS_ATTR, STATUS_LOADED);
+                var range = parseRange(pre.getAttribute("data-range"));
+                if (range) {
+                  var lines = text.split(/\r\n?|\n/g);
+                  var start = range[0];
+                  var end = range[1] == null ? lines.length : range[1];
+                  if (start < 0) {
+                    start += lines.length;
+                  }
+                  start = Math.max(0, Math.min(start - 1, lines.length));
+                  if (end < 0) {
+                    end += lines.length;
+                  }
+                  end = Math.max(0, Math.min(end, lines.length));
+                  text = lines.slice(start, end).join("\n");
+                  if (!pre.hasAttribute("data-start")) {
+                    pre.setAttribute("data-start", String(start + 1));
+                  }
+                }
+                code.textContent = text;
+                Prism2.highlightElement(code);
+              },
+              function(error) {
+                pre.setAttribute(STATUS_ATTR, STATUS_FAILED);
+                code.textContent = error;
+              }
+            );
+          }
+        });
+        Prism2.plugins.fileHighlight = {
+          /**
+           * Executes the File Highlight plugin for all matching `pre` elements under the given container.
+           *
+           * Note: Elements which are already loaded or currently loading will not be touched by this method.
+           *
+           * @param {ParentNode} [container=document]
+           */
+          highlight: function highlight(container) {
+            var elements = (container || document).querySelectorAll(SELECTOR);
+            for (var i = 0, element; element = elements[i++]; ) {
+              Prism2.highlightElement(element);
+            }
+          }
+        };
+        var logged = false;
+        Prism2.fileHighlight = function() {
+          if (!logged) {
+            console.warn("Prism.fileHighlight is deprecated. Use `Prism.plugins.fileHighlight.highlight` instead.");
+            logged = true;
+          }
+          Prism2.plugins.fileHighlight.highlight.apply(this, arguments);
+        };
+      })();
+    }
+  });
+
   // ../temple/index.js
   var require_temple = __commonJS({
     "../temple/index.js"(exports, module) {
@@ -893,19 +2342,19 @@ var TempleBundle = (() => {
   var developer_tools_exports = {};
   __export(developer_tools_exports, {
     BUILD_ID: () => BUILD_ID,
-    TempleComponent: () => import_client4.TempleComponent,
-    TempleElement: () => import_client4.TempleElement,
-    TempleEmitter: () => import_client4.TempleEmitter,
-    TempleException: () => import_client4.TempleException,
-    TempleRegistry: () => import_client4.TempleRegistry,
-    children: () => import_client4.children,
+    TempleComponent: () => import_client6.TempleComponent,
+    TempleElement: () => import_client6.TempleElement,
+    TempleEmitter: () => import_client6.TempleEmitter,
+    TempleException: () => import_client6.TempleException,
+    TempleRegistry: () => import_client6.TempleRegistry,
+    children: () => import_client6.children,
     components: () => components,
-    data: () => import_client4.data,
-    emitter: () => import_client4.emitter,
-    props: () => import_client4.props,
-    signal: () => import_client4.signal
+    data: () => import_client6.data,
+    emitter: () => import_client6.emitter,
+    props: () => import_client6.props,
+    signal: () => import_client6.signal
   });
-  var import_client3 = __toESM(require_client2());
+  var import_client5 = __toESM(require_client2());
 
   // temple-component-plugin:/Users/cblanquera/server/projects/ossph/temple/packages/temple-web/src/modules/panel/main.tml
   var import_client = __toESM(require_client2());
@@ -915,18 +2364,245 @@ var TempleBundle = (() => {
       return ``;
     }
     template() {
-      const props2 = this.props;
-      const children3 = () => this.originalChildren;
+      const props5 = this.props;
+      const children5 = () => this.originalChildren;
       return () => [
         import_client.TempleRegistry.createElement("main", {}, [
-          ...this._toNodeList(children3())
+          ...this._toNodeList(children5())
         ]).element
       ];
     }
   };
 
-  // temple-component-plugin:/Users/cblanquera/server/projects/ossph/temple/packages/temple-web/src/modules/i18n/translate.tml
+  // temple-component-plugin:/Users/cblanquera/server/projects/ossph/temple/packages/temple-web/src/modules/ide/code.tml
   var import_client2 = __toESM(require_client2());
+  var import_prismjs = __toESM(require_prism());
+  var import_temple = __toESM(require_temple());
+  var Code_6f36bc13bb6a166c7abc = class extends import_client2.TempleComponent {
+    static component = ["code", "Code_6f36bc13bb6a166c7abc"];
+    styles() {
+      return `:host {
+    display: block;
+    font-size: 14px;
+    line-height: 20px;
+  }
+  :host([inline]) {
+    display: inline;
+  }
+  :host([inline]),
+  :host([inline]) > pre,
+  :host([inline]) > pre > code {
+    display: inline;
+  }
+  .snippet {
+    background-color: #000000;
+    color: #ABB2BF;
+    margin: 0;
+    padding: 0;
+  }
+
+  .line-numbers {
+    position: relative;
+    padding-left: 3.8em;
+    counter-reset: linenumber;
+  }
+  :host([inline]) .line-numbers {
+    position: static;
+    padding-left: 0;
+  }
+
+  .line-numbers > code {
+    position: relative;
+    white-space: inherit;
+  }
+
+  .line-numbers .line-numbers-rows {
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    font-size: 100%;
+    left: -3.8em;
+    width: 3em; /* works for line-numbers below 1000 lines */
+    letter-spacing: -1px;
+    border-right: 1px solid #999;
+
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+  }
+
+  :host([inline]) .line-numbers .line-numbers-rows {
+    display: none;
+  }
+
+  .line-numbers-rows > span {
+    display: block;
+    counter-increment: linenumber;
+  }
+
+  .line-numbers-rows > span:before {
+    content: counter(linenumber);
+    color: #999;
+    display: block;
+    padding-right: 0.8em;
+    text-align: right;
+  }
+  .pad {
+    padding: 5px;
+  }
+
+  .terminal {
+    background-color: #000000;
+    font-size: 15px;
+    padding: 10px;
+  }
+  .terminal span {
+    color: #00FF00;
+  }`;
+    }
+    template() {
+      const config = this.props;
+      const {
+        lang = "markup",
+        numbers = false,
+        inline = false,
+        trim = false,
+        ltrim = false,
+        rtrim = false,
+        detab = 0
+      } = config;
+      const childlist = (0, import_temple.children)();
+      let snippet = childlist[0]?.textContent || "";
+      if (detab) {
+        snippet = snippet.replace(
+          new RegExp(`\\n {${detab}}`, "g"),
+          "\n"
+        );
+      }
+      if (trim) {
+        snippet = snippet.trim();
+      } else if (ltrim) {
+        snippet = snippet.replace(/^\s+/, "");
+      } else if (rtrim) {
+        snippet = snippet.replace(/\s+$/, "");
+      }
+      const highlight = (event) => {
+        if (!snippet) {
+          return;
+        }
+        const code = import_prismjs.default.highlight(snippet, import_prismjs.default.languages[lang], lang);
+        event.detail.target.innerHTML = code;
+        if (numbers) {
+          const match = code.match(/\n(?!$)/g);
+          const total = match ? match.length + 1 : 1;
+          const lines = new Array(total + 1).join("<span></span>");
+          const wrapper = document.createElement("span");
+          wrapper.setAttribute("aria-hidden", "true");
+          wrapper.className = "line-numbers-rows";
+          wrapper.innerHTML = lines;
+          event.detail.target.appendChild(wrapper);
+        }
+      };
+      return () => [
+        import_client2.TempleRegistry.createElement("link", { "rel": `stylesheet`, "href": `https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/themes/prism.min.css` }).element,
+        import_client2.TempleRegistry.createText(`
+`, false),
+        import_client2.TempleRegistry.createElement("link", { "rel": `stylesheet`, "href": `https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/themes/prism-tomorrow.min.css` }).element,
+        import_client2.TempleRegistry.createText(`
+`, false),
+        ...!!(lang === "bash") ? [
+          import_client2.TempleRegistry.createText(`
+  `, false),
+          import_client2.TempleRegistry.createElement("div", { "class": `terminal` }, [
+            import_client2.TempleRegistry.createElement("span", {}, [
+              import_client2.TempleRegistry.createText(`$`, false)
+            ]).element,
+            import_client2.TempleRegistry.createText(` `, false),
+            ...this._toNodeList(childlist)
+          ]).element,
+          import_client2.TempleRegistry.createText(`
+`, false)
+        ] : !!snippet ? [
+          ,
+          import_client2.TempleRegistry.createText(`
+  `, false),
+          ...!!numbers ? [
+            import_client2.TempleRegistry.createText(`
+    `, false),
+            import_client2.TempleRegistry.createElement("pre", { "class": `snippet line-numbers` }, [
+              import_client2.TempleRegistry.createElement("code", { "mount": highlight }, []).element
+            ]).element,
+            import_client2.TempleRegistry.createText(`
+  `, false)
+          ] : true ? [
+            ,
+            import_client2.TempleRegistry.createText(`
+    `, false),
+            import_client2.TempleRegistry.createElement("pre", { "class": `snippet pad` }, [
+              import_client2.TempleRegistry.createElement("code", { "mount": highlight }, []).element
+            ]).element,
+            import_client2.TempleRegistry.createText(`
+  `, false)
+          ] : [],
+          import_client2.TempleRegistry.createText(`
+`, false)
+        ] : []
+      ];
+    }
+  };
+
+  // temple-component-plugin:/Users/cblanquera/server/projects/ossph/temple/packages/temple-web/src/modules/ide/app.tml
+  var import_client3 = __toESM(require_client2());
+  var import_temple2 = __toESM(require_temple());
+  var App_05341fddbfd1fe4f273b = class extends import_client3.TempleComponent {
+    static component = ["app", "App_05341fddbfd1fe4f273b"];
+    styles() {
+      return ``;
+    }
+    template() {
+      const { title, panel } = (0, import_temple2.props)();
+      const classname = `body ${panel ? "panel" : ""}`;
+      const style = panel ? `height:${panel}px` : "";
+      return () => [
+        import_client3.TempleRegistry.createText(`
+`, false),
+        import_client3.TempleRegistry.createElement("div", { "class": `window` }, [
+          import_client3.TempleRegistry.createText(`
+  `, false),
+          import_client3.TempleRegistry.createElement("div", { "class": `head` }, [
+            import_client3.TempleRegistry.createText(`
+    `, false),
+            import_client3.TempleRegistry.createElement("span", { "class": `dot` }, []).element,
+            import_client3.TempleRegistry.createText(`
+    `, false),
+            import_client3.TempleRegistry.createElement("span", { "class": `dot` }, []).element,
+            import_client3.TempleRegistry.createText(`
+    `, false),
+            import_client3.TempleRegistry.createElement("span", { "class": `dot` }, []).element,
+            import_client3.TempleRegistry.createText(`
+    `, false),
+            import_client3.TempleRegistry.createElement("span", { "class": `title` }, [
+              ...this._toNodeList(title)
+            ]).element,
+            import_client3.TempleRegistry.createText(`
+  `, false)
+          ]).element,
+          import_client3.TempleRegistry.createText(`
+  `, false),
+          import_client3.TempleRegistry.createElement("div", { "class": classname, "style": style }, [
+            ...this._toNodeList((0, import_temple2.children)())
+          ]).element,
+          import_client3.TempleRegistry.createText(`
+`, false)
+        ]).element
+      ];
+    }
+  };
+
+  // temple-component-plugin:/Users/cblanquera/server/projects/ossph/temple/packages/temple-web/src/modules/i18n/translate.tml
+  var import_client4 = __toESM(require_client2());
 
   // src/modules/i18n/index.ts
   var _ = function(phrase, ...variables) {
@@ -941,17 +2617,18 @@ var TempleBundle = (() => {
   };
 
   // temple-component-plugin:/Users/cblanquera/server/projects/ossph/temple/packages/temple-web/src/modules/i18n/translate.tml
-  var import_temple = __toESM(require_temple());
-  var Translate_7d25e372f5ffb5e39dad = class extends import_client2.TempleComponent {
+  var import_temple3 = __toESM(require_temple());
+  var Translate_7d25e372f5ffb5e39dad = class extends import_client4.TempleComponent {
     static component = ["translate", "Translate_7d25e372f5ffb5e39dad"];
     styles() {
       return ``;
     }
     template() {
-      const childlist = (0, import_temple.children)();
+      const { trim = false, p = false, div = false } = (0, import_temple3.props)();
+      const childlist = (0, import_temple3.children)();
       const phrase = [];
       const variables = [];
-      for (const child of childlist.length) {
+      for (const child of childlist) {
         if (typeof child === "string") {
           phrase.push(child);
         } else if (child instanceof Node && child.textContent) {
@@ -961,7 +2638,11 @@ var TempleBundle = (() => {
           variables.push(child);
         }
       }
-      const chunks = translate(phrase.join("")).split("%s");
+      let words = phrase.join("");
+      if (trim) {
+        words = words.replace(/\s+/, " ").trim();
+      }
+      const chunks = translate(words).split("%s");
       const translations = [];
       for (let i = 0; i < chunks.length; i++) {
         translations.push(document.createTextNode(chunks[i]));
@@ -969,35 +2650,63 @@ var TempleBundle = (() => {
           translations.push(variables[i]);
         }
       }
-      return () => [];
+      return () => [
+        import_client4.TempleRegistry.createText(`
+    `, false),
+        ...!!p ? [
+          import_client4.TempleRegistry.createText(`
+      `, false),
+          import_client4.TempleRegistry.createElement("p", {}, [
+            ...this._toNodeList(translations)
+          ]).element,
+          import_client4.TempleRegistry.createText(`
+    `, false)
+        ] : !!div ? [
+          ,
+          import_client4.TempleRegistry.createText(`
+      `, false),
+          import_client4.TempleRegistry.createElement("div", {}, [
+            ...this._toNodeList(translations)
+          ]).element,
+          import_client4.TempleRegistry.createText(`
+    `, false)
+        ] : true ? [
+          ,
+          import_client4.TempleRegistry.createText(`
+      `, false),
+          ...this._toNodeList(translations),
+          import_client4.TempleRegistry.createText(`
+    `, false)
+        ] : []
+      ];
     }
   };
 
   // temple-document-client-plugin:/Users/cblanquera/server/projects/ossph/temple/packages/temple-web/src/pages/docs/developer-tools.dtml
-  var import_client4 = __toESM(require_client2());
-  import_client3.emitter.once("ready", () => {
+  var import_client6 = __toESM(require_client2());
+  import_client5.emitter.once("ready", () => {
     const script = document.querySelector("script[data-app]");
     if (!script) {
-      throw import_client3.TempleException.for("APP_DATA not found");
+      throw import_client5.TempleException.for("APP_DATA not found");
     }
     try {
       const data2 = atob(script.getAttribute("data-app"));
       window.__APP_DATA__ = JSON.parse(data2);
       Object.entries(window.__APP_DATA__).forEach(([key, value]) => {
-        import_client3.data.set(key, value);
+        import_client5.data.set(key, value);
       });
     } catch (error) {
-      throw import_client3.TempleException.for("APP_DATA is not a valid JSON");
+      throw import_client5.TempleException.for("APP_DATA is not a valid JSON");
     }
-    import_client3.data.set("current", "document");
+    import_client5.data.set("current", "document");
     const url = "/docs/developer-tools.html";
     const title = _("Developer Tools - Temple reactive web component template engine.");
     const description = _("Enable tools for a better developer experience and debugging.");
     const toggle = (_2) => {
       document.body.classList.toggle("panel-left-open");
     };
-    import_client3.data.delete("current");
-    const __BINDINGS__ = { "0": { "class": `head panel-head` }, "1": { "class": `menu fas fa-fw fa-bars`, "click": toggle }, "2": { "href": `/temple` }, "3": { "src": `/temple/temple-icon.png`, "alt": `Temple Logo` }, "5": { "class": `tx-white`, "href": `/temple` }, "7": { "href": `/temple/docs/index.html` }, "8": { "class": `github`, "href": `https://github.com/ossPhilippines/temple`, "target": `_blank` }, "9": { "class": `fab fa-github` }, "10": { "class": `npm`, "href": `https://www.npmjs.com/package/temple`, "target": `_blank` }, "11": { "class": `fab fa-npm text-white` }, "12": { "class": `discord`, "href": `https://discord.gg/open-source-software-ph-905496362982981723`, "target": `_blank` }, "13": { "class": `fab fa-discord text-white` }, "14": { "class": `left panel-left` }, "16": { "href": `/temple` }, "17": { "src": `/temple/temple-icon.png`, "alt": `Temple Logo` }, "19": { "class": `tx-white`, "href": `/temple` }, "20": { "class": `toggle fas fa-fw fa-chevron-left`, "click": toggle }, "23": { "href": `/temple/docs/index.html` }, "24": { "href": `/temple/docs/getting-started.html` }, "25": { "href": `/temple/docs/frequent-questions.html` }, "27": { "href": `/temple/docs/markup-syntax.html` }, "28": { "href": `/temple/docs/state-management.html` }, "29": { "href": `/temple/docs/component-strategy.html` }, "30": { "href": `/temple/docs/compiler-api.html` }, "31": { "href": `/temple/docs/client-api.html` }, "33": { "href": `/temple/docs/template-engine.html` }, "34": { "href": `/temple/docs/single-page.html` }, "35": { "href": `/temple/docs/static-site.html` }, "36": { "href": `/temple/docs/component-publisher.html` }, "37": { "href": `/temple/docs/developer-tools.html` }, "39": { "href": `/temple/docs/latest-updates.html` }, "40": { "href": `/temple/docs/contributing-guide.html` }, "41": { "href": `/temple/docs/known-issues.html` }, "42": { "class": `panel-main` }, "43": { "class": `docs container` }, "45": { "class": `pager` }, "46": { "class": `prev`, "href": `/temple/docs/component-publisher.html` }, "47": { "class": `fas fa-fw fa-chevron-left` }, "48": { "class": `next`, "href": `/temple/docs/latest-updates.html` }, "49": { "class": `fas fa-fw fa-chevron-right` }, "50": { "class": `foot` } };
+    import_client5.data.delete("current");
+    const __BINDINGS__ = { "0": { "class": `head panel-head` }, "1": { "class": `menu fas fa-fw fa-bars`, "click": toggle }, "2": { "href": `/temple` }, "3": { "src": `/temple/temple-icon.png`, "alt": `Temple Logo` }, "5": { "class": `tx-white`, "href": `/temple` }, "7": { "href": `/temple/docs/index.html` }, "8": { "class": `github`, "href": `https://github.com/ossPhilippines/temple`, "target": `_blank` }, "9": { "class": `fab fa-github` }, "10": { "class": `npm`, "href": `https://www.npmjs.com/package/temple`, "target": `_blank` }, "11": { "class": `fab fa-npm text-white` }, "12": { "class": `discord`, "href": `https://discord.gg/open-source-software-ph-905496362982981723`, "target": `_blank` }, "13": { "class": `fab fa-discord text-white` }, "14": { "class": `left panel-left` }, "16": { "href": `/temple` }, "17": { "src": `/temple/temple-icon.png`, "alt": `Temple Logo` }, "19": { "class": `tx-white`, "href": `/temple` }, "20": { "class": `toggle fas fa-fw fa-chevron-left`, "click": toggle }, "23": { "href": `/temple/docs/index.html` }, "24": { "href": `/temple/docs/getting-started.html` }, "25": { "href": `/temple/docs/frequent-questions.html` }, "27": { "href": `/temple/docs/markup-syntax.html` }, "28": { "href": `/temple/docs/state-management.html` }, "29": { "href": `/temple/docs/component-strategy.html` }, "30": { "href": `/temple/docs/compiler-api.html` }, "31": { "href": `/temple/docs/client-api.html` }, "33": { "href": `/temple/docs/template-engine.html` }, "34": { "href": `/temple/docs/single-page.html` }, "35": { "href": `/temple/docs/static-site.html` }, "36": { "href": `/temple/docs/component-publisher.html` }, "37": { "href": `/temple/docs/developer-tools.html` }, "39": { "href": `/temple/docs/latest-updates.html` }, "40": { "href": `/temple/docs/contributing-guide.html` }, "41": { "href": `/temple/docs/known-issues.html` }, "42": { "class": `panel-main` }, "43": { "class": `docs container` }, "45": { "p": true, "trim": true }, "46": { "lang": `js`, "inline": true }, "47": { "title": `Terminal` }, "48": { "lang": `bash` }, "49": { "p": true, "trim": true }, "50": { "lang": `js`, "inline": true }, "51": { "lang": `js`, "inline": true }, "52": { "title": `src/index.ts` }, "53": { "lang": `js`, "numbers": true, "trim": true, "detab": 12 }, "54": { "p": true, "trim": true }, "55": { "lang": `js`, "inline": true }, "56": { "inline": true }, "57": { "title": `src/page.dtml` }, "58": { "numbers": true, "trim": true, "detab": 12 }, "59": { "p": true, "trim": true }, "60": { "title": `Terminal` }, "61": { "lang": `bash` }, "62": { "p": true, "trim": true }, "63": { "lang": `js`, "inline": true }, "64": { "class": `pager` }, "65": { "class": `prev`, "href": `/temple/docs/component-publisher.html` }, "66": { "class": `fas fa-fw fa-chevron-left` }, "67": { "class": `next`, "href": `/temple/docs/latest-updates.html` }, "68": { "class": `fas fa-fw fa-chevron-right` }, "69": { "class": `foot` } };
     for (const element of document.body.querySelectorAll("*")) {
       const attributes = Object.fromEntries(
         Array.from(element.attributes).map((attribute) => [
@@ -1005,21 +2714,37 @@ var TempleBundle = (() => {
           attribute.nodeValue.length > 0 ? attribute.nodeValue : true
         ])
       );
-      const id = String(import_client3.TempleRegistry.elements.size);
+      const id = String(import_client5.TempleRegistry.elements.size);
       if (__BINDINGS__[id]) {
         Object.assign(attributes, __BINDINGS__[id]);
         element.TempleAttributes = __BINDINGS__[id];
       }
-      import_client3.TempleRegistry.register(element, attributes);
+      import_client5.TempleRegistry.register(element, attributes);
     }
     customElements.define("panel-main", Main_fd7f1af6410c5b5c8e1f);
+    customElements.define("ide-code", Code_6f36bc13bb6a166c7abc);
+    customElements.define("ide-app", App_05341fddbfd1fe4f273b);
     customElements.define("i18n-translate", Translate_7d25e372f5ffb5e39dad);
-    import_client3.emitter.emit("mounted", document.body);
+    import_client5.emitter.emit("mounted", document.body);
   });
   var components = {
     "PanelMain_fd7f1af6410c5b5c8e1f": Main_fd7f1af6410c5b5c8e1f,
+    "IdeCode_6f36bc13bb6a166c7abc": Code_6f36bc13bb6a166c7abc,
+    "IdeApp_05341fddbfd1fe4f273b": App_05341fddbfd1fe4f273b,
     "I18nTranslate_7d25e372f5ffb5e39dad": Translate_7d25e372f5ffb5e39dad
   };
   var BUILD_ID = "13781afd4fbd704a9789";
   return __toCommonJS(developer_tools_exports);
 })();
+/*! Bundled license information:
+
+prismjs/prism.js:
+  (**
+   * Prism: Lightweight, robust, elegant syntax highlighting
+   *
+   * @license MIT <https://opensource.org/licenses/MIT>
+   * @author Lea Verou <https://lea.verou.me>
+   * @namespace
+   * @public
+   *)
+*/
diff --git a/docs/build/client/2d721d6aed73f41f4e72.html b/docs/build/client/2d721d6aed73f41f4e72.html
index 4ddffae..9243196 100644
--- a/docs/build/client/2d721d6aed73f41f4e72.html
+++ b/docs/build/client/2d721d6aed73f41f4e72.html
@@ -83,6 +83,130 @@ <h6>Contributing</h6>
     <panel-main class="panel-main">
       <div class="docs container">
         <h1>Template Engine</h1>
+
+        <i18n-translate p trim>
+          Create a project with the following structure and files using 
+          Temple, TypeScript and the native Node.js HTTP server.
+        </i18n-translate>
+        <ide-app  title="My Project">
+          <div class="panel-head">
+            <div class="tabs">
+              <tui-tab class="tab active" group="project" selector="#index-ts">
+                src/index.ts
+              </tui-tab>
+              <tui-tab class="tab" group="project" selector="#page-dtml">
+                src/page.dtml
+              </tui-tab>
+              <tui-tab class="tab" group="project" selector="#package-json">
+                package.json
+              </tui-tab>
+            </div>
+          </div>
+          <div class="panel-left">
+            <h5 class="folder">
+              <i class="fas fa-fw fa-chevron-down"></i>
+              <span>src</span>
+            </h5>
+            <tui-tab class="shift-1 block active" group="project" selector="#index-ts">
+              <i class="fas fa-fw fa-file"></i>
+              index.ts
+            </tui-tab>
+            <tui-tab class="shift-1 block" group="project" selector="#page-dtml">
+              <i class="fas fa-fw fa-file"></i>
+              page.dtml
+            </tui-tab>
+            <tui-tab class="block" group="project" selector="#package-json">
+              <i class="fas fa-fw fa-file"></i>
+              package.json
+            </tui-tab>
+          </div>
+          <div class="panel-main">
+            <main>
+              <ide-code id="index-ts" lang="js" numbers trim >
+                import http from 'http';
+                import temple from '@ossph/temple/compiler';
+
+                //create temple compiler
+                const compiler = temple({ cwd: __dirname });
+                //create http server
+                const server = http.createServer(async (req, res) =&gt; {
+                  //if build asset...
+                  if (req.url?.startsWith('/build/')) {
+                    //get filename ie. abc123.js
+                    const filename = req.url.substring(7);
+                    //get asset
+                    const { type, content } = await compiler.asset(filename);
+                    //send response
+                    res.writeHead(200, { 'Content-Type': type });
+                    return res.end(content);
+                  //if home page
+                  } else if (req.url === '/') {
+                    res.writeHead(200, { 'Content-Type': 'text/html' });
+                    return res.end(await compiler.render('./index.dtml', {
+                      title: 'Hello World'
+                    }));
+                  }
+                });
+                //listen on port 3000
+                server.listen(3000);
+              </ide-code>
+              <ide-code id="page-dtml" style="display:none" numbers trim >
+                &lt;style&gt;
+                  .title { text-align: center; }
+                &lt;/style&gt;
+                &lt;script&gt;
+                  import { env, props } from '@ossph/temple';
+                  const { BUILD_ID, APP_DATA } = env();
+                  const { title } = props();
+                &lt;/script&gt;
+                &lt;html&gt;
+                  &lt;head&gt;
+                    &lt;title&gt;{title}&lt;/title&gt;
+                    &lt;link rel="stylesheet" type="text/css" href={`/build/${BUILD_ID}.css`} /&gt;
+                    &lt;script data-app={APP_DATA} src={`/build/${BUILD_ID}.js`}&gt;&lt;/script&gt;
+                  &lt;/head&gt;
+                  &lt;body&gt;
+                    &lt;h1 class="title"&gt;{title}&lt;/h1&gt;
+                  &lt;/body&gt;
+                &lt;/html&gt;
+              </ide-code>
+              <ide-code id="package-json" style="display:none" lang="js" numbers trim >
+                {
+                  "name": "my-project",
+                  "version": "1.0.0",
+                  "private": true,
+                  "scripts": {
+                    "dev": "ts-node ./src/index.ts"
+                  },
+                  "dependencies": {
+                    "@ossph/temple": "0.0.15"
+                  },
+                  "devDependencies": {
+                    "@ossph/temple-dev": "0.0.15",
+                    "@types/express": "4.17.21",
+                    "@types/node": "22.1.0",
+                    "ts-node": "10.9.2",
+                    "typescript": "5.5.4"
+                  }
+                }
+              </ide-code>
+            </main>
+          </div>
+        </ide-app>
+        <i18n-translate p trim>
+          The server file 
+          <ide-code inline>src/index.ts</ide-code> 
+          implements a simple server utilizing the Temple compiler in 
+          its most simplistic form. The document file
+          <ide-code inline>src/page.dtml</ide-code> 
+          is using the most basic Temple syntax. To test the script and 
+          see the results, run the following command in terminal.
+        </i18n-translate>
+        <ide-app title="Terminal">
+          <ide-code lang="bash">
+            npm i && npx ts-node src/index.ts
+          </ide-code>
+        </ide-app>
         
         <nav class="pager">
           <a class="prev" href="/temple/docs/client-api.html">
diff --git a/docs/build/client/2d721d6aed73f41f4e72.js b/docs/build/client/2d721d6aed73f41f4e72.js
index 3c10c26..d6e8e39 100644
--- a/docs/build/client/2d721d6aed73f41f4e72.js
+++ b/docs/build/client/2d721d6aed73f41f4e72.js
@@ -225,11 +225,11 @@ var TempleBundle = (() => {
       };
       Object.defineProperty(exports, "__esModule", { value: true });
       var TempleElement_1 = __importDefault(require_TempleElement());
-      var TempleRegistry5 = class {
+      var TempleRegistry8 = class {
         static get elements() {
           return this._elements;
         }
-        static createComponent(definition, attributes, children3 = []) {
+        static createComponent(definition, attributes, children6 = []) {
           const tagname = definition.component[0];
           const template = document.createElement("template");
           template.innerHTML = `<${tagname}></${tagname}>`;
@@ -247,11 +247,11 @@ var TempleBundle = (() => {
           }
           component._TempleAttributes = attributes;
           component.props = attributes;
-          children3.forEach((child) => component.appendChild(child));
+          children6.forEach((child) => component.appendChild(child));
           component.register();
           return this.register(component, attributes);
         }
-        static createElement(name, attributes, children3 = []) {
+        static createElement(name, attributes, children6 = []) {
           const element = document.createElement(name);
           for (const [key, value] of Object.entries(attributes)) {
             if (typeof value === "string") {
@@ -260,7 +260,7 @@ var TempleBundle = (() => {
               element.setAttribute(key, key);
             }
           }
-          children3.filter((child) => typeof child !== "undefined").forEach((child) => element.appendChild(child));
+          children6.filter((child) => typeof child !== "undefined").forEach((child) => element.appendChild(child));
           return this.register(element, attributes);
         }
         static createText(value, escape = false) {
@@ -297,8 +297,8 @@ var TempleBundle = (() => {
           return node;
         }
       };
-      TempleRegistry5._elements = /* @__PURE__ */ new Map();
-      exports.default = TempleRegistry5;
+      TempleRegistry8._elements = /* @__PURE__ */ new Map();
+      exports.default = TempleRegistry8;
     }
   });
 
@@ -362,7 +362,7 @@ var TempleBundle = (() => {
       var TempleRegistry_1 = __importDefault(require_TempleRegistry());
       var TempleEmitter_1 = __importDefault(require_TempleEmitter());
       var data_1 = __importDefault(require_data());
-      var TempleComponent4 = class _TempleComponent extends HTMLElement {
+      var TempleComponent7 = class _TempleComponent extends HTMLElement {
         constructor() {
           super(...arguments);
           this._initiated = false;
@@ -396,9 +396,9 @@ var TempleBundle = (() => {
         get props() {
           return this._props;
         }
-        set props(props2) {
-          this._props = Object.assign({}, props2);
-          this._attributes = Object.fromEntries(Object.entries(props2).filter((entry) => typeof entry[1] === "string" || entry[1] === true));
+        set props(props6) {
+          this._props = Object.assign({}, props6);
+          this._attributes = Object.fromEntries(Object.entries(props6).filter((entry) => typeof entry[1] === "string" || entry[1] === true));
         }
         adoptedCallback() {
           this.render();
@@ -437,10 +437,10 @@ var TempleBundle = (() => {
           } else {
             TempleEmitter_1.default.emit("unmounted", this);
           }
-          const children3 = this._template().filter(Boolean);
+          const children6 = this._template().filter(Boolean);
           if (styles.length === 0) {
             this.textContent = "";
-            children3.forEach((child) => this.appendChild(child));
+            children6.forEach((child) => this.appendChild(child));
           } else {
             if (!this.shadowRoot) {
               this.attachShadow({ mode: "open" });
@@ -451,7 +451,7 @@ var TempleBundle = (() => {
             const style = document.createElement("style");
             style.innerText = styles;
             shadowRoot.appendChild(style);
-            children3.forEach((child) => {
+            children6.forEach((child) => {
               var _a;
               return (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.appendChild(child);
             });
@@ -497,7 +497,7 @@ var TempleBundle = (() => {
           }
         }
       };
-      exports.default = TempleComponent4;
+      exports.default = TempleComponent7;
     }
   });
 
@@ -529,9 +529,9 @@ var TempleBundle = (() => {
         return mod && mod.__esModule ? mod : { "default": mod };
       };
       Object.defineProperty(exports, "__esModule", { value: true });
-      exports.default = props2;
+      exports.default = props6;
       var data_1 = __importDefault(require_data());
-      function props2(component = null) {
+      function props6(component = null) {
         if (!component) {
           component = data_1.default.get("current") || null;
         }
@@ -571,15 +571,15 @@ var TempleBundle = (() => {
       };
       Object.defineProperty(exports, "__esModule", { value: true });
       exports.innerHTML = innerHTML;
-      exports.default = children3;
+      exports.default = children6;
       var data_1 = __importDefault(require_data());
       function innerHTML(component = null) {
-        const inner = children3(component);
+        const inner = children6(component);
         const wrapper = document.createElement("template");
         wrapper.append(...inner);
         return wrapper.innerHTML;
       }
-      function children3(component = null) {
+      function children6(component = null) {
         if (!component) {
           component = data_1.default.get("current") || null;
         }
@@ -882,6 +882,1455 @@ var TempleBundle = (() => {
     }
   });
 
+  // ../../node_modules/prismjs/prism.js
+  var require_prism = __commonJS({
+    "../../node_modules/prismjs/prism.js"(exports, module) {
+      var _self = typeof window !== "undefined" ? window : typeof WorkerGlobalScope !== "undefined" && self instanceof WorkerGlobalScope ? self : {};
+      var Prism2 = function(_self2) {
+        var lang = /(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i;
+        var uniqueId = 0;
+        var plainTextGrammar = {};
+        var _2 = {
+          /**
+           * By default, Prism will attempt to highlight all code elements (by calling {@link Prism.highlightAll}) on the
+           * current page after the page finished loading. This might be a problem if e.g. you wanted to asynchronously load
+           * additional languages or plugins yourself.
+           *
+           * By setting this value to `true`, Prism will not automatically highlight all code elements on the page.
+           *
+           * You obviously have to change this value before the automatic highlighting started. To do this, you can add an
+           * empty Prism object into the global scope before loading the Prism script like this:
+           *
+           * ```js
+           * window.Prism = window.Prism || {};
+           * Prism.manual = true;
+           * // add a new <script> to load Prism's script
+           * ```
+           *
+           * @default false
+           * @type {boolean}
+           * @memberof Prism
+           * @public
+           */
+          manual: _self2.Prism && _self2.Prism.manual,
+          /**
+           * By default, if Prism is in a web worker, it assumes that it is in a worker it created itself, so it uses
+           * `addEventListener` to communicate with its parent instance. However, if you're using Prism manually in your
+           * own worker, you don't want it to do this.
+           *
+           * By setting this value to `true`, Prism will not add its own listeners to the worker.
+           *
+           * You obviously have to change this value before Prism executes. To do this, you can add an
+           * empty Prism object into the global scope before loading the Prism script like this:
+           *
+           * ```js
+           * window.Prism = window.Prism || {};
+           * Prism.disableWorkerMessageHandler = true;
+           * // Load Prism's script
+           * ```
+           *
+           * @default false
+           * @type {boolean}
+           * @memberof Prism
+           * @public
+           */
+          disableWorkerMessageHandler: _self2.Prism && _self2.Prism.disableWorkerMessageHandler,
+          /**
+           * A namespace for utility methods.
+           *
+           * All function in this namespace that are not explicitly marked as _public_ are for __internal use only__ and may
+           * change or disappear at any time.
+           *
+           * @namespace
+           * @memberof Prism
+           */
+          util: {
+            encode: function encode(tokens) {
+              if (tokens instanceof Token) {
+                return new Token(tokens.type, encode(tokens.content), tokens.alias);
+              } else if (Array.isArray(tokens)) {
+                return tokens.map(encode);
+              } else {
+                return tokens.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/\u00a0/g, " ");
+              }
+            },
+            /**
+             * Returns the name of the type of the given value.
+             *
+             * @param {any} o
+             * @returns {string}
+             * @example
+             * type(null)      === 'Null'
+             * type(undefined) === 'Undefined'
+             * type(123)       === 'Number'
+             * type('foo')     === 'String'
+             * type(true)      === 'Boolean'
+             * type([1, 2])    === 'Array'
+             * type({})        === 'Object'
+             * type(String)    === 'Function'
+             * type(/abc+/)    === 'RegExp'
+             */
+            type: function(o) {
+              return Object.prototype.toString.call(o).slice(8, -1);
+            },
+            /**
+             * Returns a unique number for the given object. Later calls will still return the same number.
+             *
+             * @param {Object} obj
+             * @returns {number}
+             */
+            objId: function(obj) {
+              if (!obj["__id"]) {
+                Object.defineProperty(obj, "__id", { value: ++uniqueId });
+              }
+              return obj["__id"];
+            },
+            /**
+             * Creates a deep clone of the given object.
+             *
+             * The main intended use of this function is to clone language definitions.
+             *
+             * @param {T} o
+             * @param {Record<number, any>} [visited]
+             * @returns {T}
+             * @template T
+             */
+            clone: function deepClone(o, visited) {
+              visited = visited || {};
+              var clone;
+              var id;
+              switch (_2.util.type(o)) {
+                case "Object":
+                  id = _2.util.objId(o);
+                  if (visited[id]) {
+                    return visited[id];
+                  }
+                  clone = /** @type {Record<string, any>} */
+                  {};
+                  visited[id] = clone;
+                  for (var key in o) {
+                    if (o.hasOwnProperty(key)) {
+                      clone[key] = deepClone(o[key], visited);
+                    }
+                  }
+                  return (
+                    /** @type {any} */
+                    clone
+                  );
+                case "Array":
+                  id = _2.util.objId(o);
+                  if (visited[id]) {
+                    return visited[id];
+                  }
+                  clone = [];
+                  visited[id] = clone;
+                  /** @type {Array} */
+                  /** @type {any} */
+                  o.forEach(function(v, i) {
+                    clone[i] = deepClone(v, visited);
+                  });
+                  return (
+                    /** @type {any} */
+                    clone
+                  );
+                default:
+                  return o;
+              }
+            },
+            /**
+             * Returns the Prism language of the given element set by a `language-xxxx` or `lang-xxxx` class.
+             *
+             * If no language is set for the element or the element is `null` or `undefined`, `none` will be returned.
+             *
+             * @param {Element} element
+             * @returns {string}
+             */
+            getLanguage: function(element) {
+              while (element) {
+                var m = lang.exec(element.className);
+                if (m) {
+                  return m[1].toLowerCase();
+                }
+                element = element.parentElement;
+              }
+              return "none";
+            },
+            /**
+             * Sets the Prism `language-xxxx` class of the given element.
+             *
+             * @param {Element} element
+             * @param {string} language
+             * @returns {void}
+             */
+            setLanguage: function(element, language) {
+              element.className = element.className.replace(RegExp(lang, "gi"), "");
+              element.classList.add("language-" + language);
+            },
+            /**
+             * Returns the script element that is currently executing.
+             *
+             * This does __not__ work for line script element.
+             *
+             * @returns {HTMLScriptElement | null}
+             */
+            currentScript: function() {
+              if (typeof document === "undefined") {
+                return null;
+              }
+              if ("currentScript" in document && 1 < 2) {
+                return (
+                  /** @type {any} */
+                  document.currentScript
+                );
+              }
+              try {
+                throw new Error();
+              } catch (err) {
+                var src = (/at [^(\r\n]*\((.*):[^:]+:[^:]+\)$/i.exec(err.stack) || [])[1];
+                if (src) {
+                  var scripts = document.getElementsByTagName("script");
+                  for (var i in scripts) {
+                    if (scripts[i].src == src) {
+                      return scripts[i];
+                    }
+                  }
+                }
+                return null;
+              }
+            },
+            /**
+             * Returns whether a given class is active for `element`.
+             *
+             * The class can be activated if `element` or one of its ancestors has the given class and it can be deactivated
+             * if `element` or one of its ancestors has the negated version of the given class. The _negated version_ of the
+             * given class is just the given class with a `no-` prefix.
+             *
+             * Whether the class is active is determined by the closest ancestor of `element` (where `element` itself is
+             * closest ancestor) that has the given class or the negated version of it. If neither `element` nor any of its
+             * ancestors have the given class or the negated version of it, then the default activation will be returned.
+             *
+             * In the paradoxical situation where the closest ancestor contains __both__ the given class and the negated
+             * version of it, the class is considered active.
+             *
+             * @param {Element} element
+             * @param {string} className
+             * @param {boolean} [defaultActivation=false]
+             * @returns {boolean}
+             */
+            isActive: function(element, className, defaultActivation) {
+              var no = "no-" + className;
+              while (element) {
+                var classList = element.classList;
+                if (classList.contains(className)) {
+                  return true;
+                }
+                if (classList.contains(no)) {
+                  return false;
+                }
+                element = element.parentElement;
+              }
+              return !!defaultActivation;
+            }
+          },
+          /**
+           * This namespace contains all currently loaded languages and the some helper functions to create and modify languages.
+           *
+           * @namespace
+           * @memberof Prism
+           * @public
+           */
+          languages: {
+            /**
+             * The grammar for plain, unformatted text.
+             */
+            plain: plainTextGrammar,
+            plaintext: plainTextGrammar,
+            text: plainTextGrammar,
+            txt: plainTextGrammar,
+            /**
+             * Creates a deep copy of the language with the given id and appends the given tokens.
+             *
+             * If a token in `redef` also appears in the copied language, then the existing token in the copied language
+             * will be overwritten at its original position.
+             *
+             * ## Best practices
+             *
+             * Since the position of overwriting tokens (token in `redef` that overwrite tokens in the copied language)
+             * doesn't matter, they can technically be in any order. However, this can be confusing to others that trying to
+             * understand the language definition because, normally, the order of tokens matters in Prism grammars.
+             *
+             * Therefore, it is encouraged to order overwriting tokens according to the positions of the overwritten tokens.
+             * Furthermore, all non-overwriting tokens should be placed after the overwriting ones.
+             *
+             * @param {string} id The id of the language to extend. This has to be a key in `Prism.languages`.
+             * @param {Grammar} redef The new tokens to append.
+             * @returns {Grammar} The new language created.
+             * @public
+             * @example
+             * Prism.languages['css-with-colors'] = Prism.languages.extend('css', {
+             *     // Prism.languages.css already has a 'comment' token, so this token will overwrite CSS' 'comment' token
+             *     // at its original position
+             *     'comment': { ... },
+             *     // CSS doesn't have a 'color' token, so this token will be appended
+             *     'color': /\b(?:red|green|blue)\b/
+             * });
+             */
+            extend: function(id, redef) {
+              var lang2 = _2.util.clone(_2.languages[id]);
+              for (var key in redef) {
+                lang2[key] = redef[key];
+              }
+              return lang2;
+            },
+            /**
+             * Inserts tokens _before_ another token in a language definition or any other grammar.
+             *
+             * ## Usage
+             *
+             * This helper method makes it easy to modify existing languages. For example, the CSS language definition
+             * not only defines CSS highlighting for CSS documents, but also needs to define highlighting for CSS embedded
+             * in HTML through `<style>` elements. To do this, it needs to modify `Prism.languages.markup` and add the
+             * appropriate tokens. However, `Prism.languages.markup` is a regular JavaScript object literal, so if you do
+             * this:
+             *
+             * ```js
+             * Prism.languages.markup.style = {
+             *     // token
+             * };
+             * ```
+             *
+             * then the `style` token will be added (and processed) at the end. `insertBefore` allows you to insert tokens
+             * before existing tokens. For the CSS example above, you would use it like this:
+             *
+             * ```js
+             * Prism.languages.insertBefore('markup', 'cdata', {
+             *     'style': {
+             *         // token
+             *     }
+             * });
+             * ```
+             *
+             * ## Special cases
+             *
+             * If the grammars of `inside` and `insert` have tokens with the same name, the tokens in `inside`'s grammar
+             * will be ignored.
+             *
+             * This behavior can be used to insert tokens after `before`:
+             *
+             * ```js
+             * Prism.languages.insertBefore('markup', 'comment', {
+             *     'comment': Prism.languages.markup.comment,
+             *     // tokens after 'comment'
+             * });
+             * ```
+             *
+             * ## Limitations
+             *
+             * The main problem `insertBefore` has to solve is iteration order. Since ES2015, the iteration order for object
+             * properties is guaranteed to be the insertion order (except for integer keys) but some browsers behave
+             * differently when keys are deleted and re-inserted. So `insertBefore` can't be implemented by temporarily
+             * deleting properties which is necessary to insert at arbitrary positions.
+             *
+             * To solve this problem, `insertBefore` doesn't actually insert the given tokens into the target object.
+             * Instead, it will create a new object and replace all references to the target object with the new one. This
+             * can be done without temporarily deleting properties, so the iteration order is well-defined.
+             *
+             * However, only references that can be reached from `Prism.languages` or `insert` will be replaced. I.e. if
+             * you hold the target object in a variable, then the value of the variable will not change.
+             *
+             * ```js
+             * var oldMarkup = Prism.languages.markup;
+             * var newMarkup = Prism.languages.insertBefore('markup', 'comment', { ... });
+             *
+             * assert(oldMarkup !== Prism.languages.markup);
+             * assert(newMarkup === Prism.languages.markup);
+             * ```
+             *
+             * @param {string} inside The property of `root` (e.g. a language id in `Prism.languages`) that contains the
+             * object to be modified.
+             * @param {string} before The key to insert before.
+             * @param {Grammar} insert An object containing the key-value pairs to be inserted.
+             * @param {Object<string, any>} [root] The object containing `inside`, i.e. the object that contains the
+             * object to be modified.
+             *
+             * Defaults to `Prism.languages`.
+             * @returns {Grammar} The new grammar object.
+             * @public
+             */
+            insertBefore: function(inside, before, insert, root) {
+              root = root || /** @type {any} */
+              _2.languages;
+              var grammar = root[inside];
+              var ret = {};
+              for (var token in grammar) {
+                if (grammar.hasOwnProperty(token)) {
+                  if (token == before) {
+                    for (var newToken in insert) {
+                      if (insert.hasOwnProperty(newToken)) {
+                        ret[newToken] = insert[newToken];
+                      }
+                    }
+                  }
+                  if (!insert.hasOwnProperty(token)) {
+                    ret[token] = grammar[token];
+                  }
+                }
+              }
+              var old = root[inside];
+              root[inside] = ret;
+              _2.languages.DFS(_2.languages, function(key, value) {
+                if (value === old && key != inside) {
+                  this[key] = ret;
+                }
+              });
+              return ret;
+            },
+            // Traverse a language definition with Depth First Search
+            DFS: function DFS(o, callback, type, visited) {
+              visited = visited || {};
+              var objId = _2.util.objId;
+              for (var i in o) {
+                if (o.hasOwnProperty(i)) {
+                  callback.call(o, i, o[i], type || i);
+                  var property = o[i];
+                  var propertyType = _2.util.type(property);
+                  if (propertyType === "Object" && !visited[objId(property)]) {
+                    visited[objId(property)] = true;
+                    DFS(property, callback, null, visited);
+                  } else if (propertyType === "Array" && !visited[objId(property)]) {
+                    visited[objId(property)] = true;
+                    DFS(property, callback, i, visited);
+                  }
+                }
+              }
+            }
+          },
+          plugins: {},
+          /**
+           * This is the most high-level function in Prism’s API.
+           * It fetches all the elements that have a `.language-xxxx` class and then calls {@link Prism.highlightElement} on
+           * each one of them.
+           *
+           * This is equivalent to `Prism.highlightAllUnder(document, async, callback)`.
+           *
+           * @param {boolean} [async=false] Same as in {@link Prism.highlightAllUnder}.
+           * @param {HighlightCallback} [callback] Same as in {@link Prism.highlightAllUnder}.
+           * @memberof Prism
+           * @public
+           */
+          highlightAll: function(async, callback) {
+            _2.highlightAllUnder(document, async, callback);
+          },
+          /**
+           * Fetches all the descendants of `container` that have a `.language-xxxx` class and then calls
+           * {@link Prism.highlightElement} on each one of them.
+           *
+           * The following hooks will be run:
+           * 1. `before-highlightall`
+           * 2. `before-all-elements-highlight`
+           * 3. All hooks of {@link Prism.highlightElement} for each element.
+           *
+           * @param {ParentNode} container The root element, whose descendants that have a `.language-xxxx` class will be highlighted.
+           * @param {boolean} [async=false] Whether each element is to be highlighted asynchronously using Web Workers.
+           * @param {HighlightCallback} [callback] An optional callback to be invoked on each element after its highlighting is done.
+           * @memberof Prism
+           * @public
+           */
+          highlightAllUnder: function(container, async, callback) {
+            var env = {
+              callback,
+              container,
+              selector: 'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'
+            };
+            _2.hooks.run("before-highlightall", env);
+            env.elements = Array.prototype.slice.apply(env.container.querySelectorAll(env.selector));
+            _2.hooks.run("before-all-elements-highlight", env);
+            for (var i = 0, element; element = env.elements[i++]; ) {
+              _2.highlightElement(element, async === true, env.callback);
+            }
+          },
+          /**
+           * Highlights the code inside a single element.
+           *
+           * The following hooks will be run:
+           * 1. `before-sanity-check`
+           * 2. `before-highlight`
+           * 3. All hooks of {@link Prism.highlight}. These hooks will be run by an asynchronous worker if `async` is `true`.
+           * 4. `before-insert`
+           * 5. `after-highlight`
+           * 6. `complete`
+           *
+           * Some the above hooks will be skipped if the element doesn't contain any text or there is no grammar loaded for
+           * the element's language.
+           *
+           * @param {Element} element The element containing the code.
+           * It must have a class of `language-xxxx` to be processed, where `xxxx` is a valid language identifier.
+           * @param {boolean} [async=false] Whether the element is to be highlighted asynchronously using Web Workers
+           * to improve performance and avoid blocking the UI when highlighting very large chunks of code. This option is
+           * [disabled by default](https://prismjs.com/faq.html#why-is-asynchronous-highlighting-disabled-by-default).
+           *
+           * Note: All language definitions required to highlight the code must be included in the main `prism.js` file for
+           * asynchronous highlighting to work. You can build your own bundle on the
+           * [Download page](https://prismjs.com/download.html).
+           * @param {HighlightCallback} [callback] An optional callback to be invoked after the highlighting is done.
+           * Mostly useful when `async` is `true`, since in that case, the highlighting is done asynchronously.
+           * @memberof Prism
+           * @public
+           */
+          highlightElement: function(element, async, callback) {
+            var language = _2.util.getLanguage(element);
+            var grammar = _2.languages[language];
+            _2.util.setLanguage(element, language);
+            var parent = element.parentElement;
+            if (parent && parent.nodeName.toLowerCase() === "pre") {
+              _2.util.setLanguage(parent, language);
+            }
+            var code = element.textContent;
+            var env = {
+              element,
+              language,
+              grammar,
+              code
+            };
+            function insertHighlightedCode(highlightedCode) {
+              env.highlightedCode = highlightedCode;
+              _2.hooks.run("before-insert", env);
+              env.element.innerHTML = env.highlightedCode;
+              _2.hooks.run("after-highlight", env);
+              _2.hooks.run("complete", env);
+              callback && callback.call(env.element);
+            }
+            _2.hooks.run("before-sanity-check", env);
+            parent = env.element.parentElement;
+            if (parent && parent.nodeName.toLowerCase() === "pre" && !parent.hasAttribute("tabindex")) {
+              parent.setAttribute("tabindex", "0");
+            }
+            if (!env.code) {
+              _2.hooks.run("complete", env);
+              callback && callback.call(env.element);
+              return;
+            }
+            _2.hooks.run("before-highlight", env);
+            if (!env.grammar) {
+              insertHighlightedCode(_2.util.encode(env.code));
+              return;
+            }
+            if (async && _self2.Worker) {
+              var worker = new Worker(_2.filename);
+              worker.onmessage = function(evt) {
+                insertHighlightedCode(evt.data);
+              };
+              worker.postMessage(JSON.stringify({
+                language: env.language,
+                code: env.code,
+                immediateClose: true
+              }));
+            } else {
+              insertHighlightedCode(_2.highlight(env.code, env.grammar, env.language));
+            }
+          },
+          /**
+           * Low-level function, only use if you know what you’re doing. It accepts a string of text as input
+           * and the language definitions to use, and returns a string with the HTML produced.
+           *
+           * The following hooks will be run:
+           * 1. `before-tokenize`
+           * 2. `after-tokenize`
+           * 3. `wrap`: On each {@link Token}.
+           *
+           * @param {string} text A string with the code to be highlighted.
+           * @param {Grammar} grammar An object containing the tokens to use.
+           *
+           * Usually a language definition like `Prism.languages.markup`.
+           * @param {string} language The name of the language definition passed to `grammar`.
+           * @returns {string} The highlighted HTML.
+           * @memberof Prism
+           * @public
+           * @example
+           * Prism.highlight('var foo = true;', Prism.languages.javascript, 'javascript');
+           */
+          highlight: function(text, grammar, language) {
+            var env = {
+              code: text,
+              grammar,
+              language
+            };
+            _2.hooks.run("before-tokenize", env);
+            if (!env.grammar) {
+              throw new Error('The language "' + env.language + '" has no grammar.');
+            }
+            env.tokens = _2.tokenize(env.code, env.grammar);
+            _2.hooks.run("after-tokenize", env);
+            return Token.stringify(_2.util.encode(env.tokens), env.language);
+          },
+          /**
+           * This is the heart of Prism, and the most low-level function you can use. It accepts a string of text as input
+           * and the language definitions to use, and returns an array with the tokenized code.
+           *
+           * When the language definition includes nested tokens, the function is called recursively on each of these tokens.
+           *
+           * This method could be useful in other contexts as well, as a very crude parser.
+           *
+           * @param {string} text A string with the code to be highlighted.
+           * @param {Grammar} grammar An object containing the tokens to use.
+           *
+           * Usually a language definition like `Prism.languages.markup`.
+           * @returns {TokenStream} An array of strings and tokens, a token stream.
+           * @memberof Prism
+           * @public
+           * @example
+           * let code = `var foo = 0;`;
+           * let tokens = Prism.tokenize(code, Prism.languages.javascript);
+           * tokens.forEach(token => {
+           *     if (token instanceof Prism.Token && token.type === 'number') {
+           *         console.log(`Found numeric literal: ${token.content}`);
+           *     }
+           * });
+           */
+          tokenize: function(text, grammar) {
+            var rest = grammar.rest;
+            if (rest) {
+              for (var token in rest) {
+                grammar[token] = rest[token];
+              }
+              delete grammar.rest;
+            }
+            var tokenList = new LinkedList();
+            addAfter(tokenList, tokenList.head, text);
+            matchGrammar(text, tokenList, grammar, tokenList.head, 0);
+            return toArray(tokenList);
+          },
+          /**
+           * @namespace
+           * @memberof Prism
+           * @public
+           */
+          hooks: {
+            all: {},
+            /**
+             * Adds the given callback to the list of callbacks for the given hook.
+             *
+             * The callback will be invoked when the hook it is registered for is run.
+             * Hooks are usually directly run by a highlight function but you can also run hooks yourself.
+             *
+             * One callback function can be registered to multiple hooks and the same hook multiple times.
+             *
+             * @param {string} name The name of the hook.
+             * @param {HookCallback} callback The callback function which is given environment variables.
+             * @public
+             */
+            add: function(name, callback) {
+              var hooks = _2.hooks.all;
+              hooks[name] = hooks[name] || [];
+              hooks[name].push(callback);
+            },
+            /**
+             * Runs a hook invoking all registered callbacks with the given environment variables.
+             *
+             * Callbacks will be invoked synchronously and in the order in which they were registered.
+             *
+             * @param {string} name The name of the hook.
+             * @param {Object<string, any>} env The environment variables of the hook passed to all callbacks registered.
+             * @public
+             */
+            run: function(name, env) {
+              var callbacks = _2.hooks.all[name];
+              if (!callbacks || !callbacks.length) {
+                return;
+              }
+              for (var i = 0, callback; callback = callbacks[i++]; ) {
+                callback(env);
+              }
+            }
+          },
+          Token
+        };
+        _self2.Prism = _2;
+        function Token(type, content, alias, matchedStr) {
+          this.type = type;
+          this.content = content;
+          this.alias = alias;
+          this.length = (matchedStr || "").length | 0;
+        }
+        Token.stringify = function stringify(o, language) {
+          if (typeof o == "string") {
+            return o;
+          }
+          if (Array.isArray(o)) {
+            var s = "";
+            o.forEach(function(e) {
+              s += stringify(e, language);
+            });
+            return s;
+          }
+          var env = {
+            type: o.type,
+            content: stringify(o.content, language),
+            tag: "span",
+            classes: ["token", o.type],
+            attributes: {},
+            language
+          };
+          var aliases = o.alias;
+          if (aliases) {
+            if (Array.isArray(aliases)) {
+              Array.prototype.push.apply(env.classes, aliases);
+            } else {
+              env.classes.push(aliases);
+            }
+          }
+          _2.hooks.run("wrap", env);
+          var attributes = "";
+          for (var name in env.attributes) {
+            attributes += " " + name + '="' + (env.attributes[name] || "").replace(/"/g, "&quot;") + '"';
+          }
+          return "<" + env.tag + ' class="' + env.classes.join(" ") + '"' + attributes + ">" + env.content + "</" + env.tag + ">";
+        };
+        function matchPattern(pattern, pos, text, lookbehind) {
+          pattern.lastIndex = pos;
+          var match = pattern.exec(text);
+          if (match && lookbehind && match[1]) {
+            var lookbehindLength = match[1].length;
+            match.index += lookbehindLength;
+            match[0] = match[0].slice(lookbehindLength);
+          }
+          return match;
+        }
+        function matchGrammar(text, tokenList, grammar, startNode, startPos, rematch) {
+          for (var token in grammar) {
+            if (!grammar.hasOwnProperty(token) || !grammar[token]) {
+              continue;
+            }
+            var patterns = grammar[token];
+            patterns = Array.isArray(patterns) ? patterns : [patterns];
+            for (var j = 0; j < patterns.length; ++j) {
+              if (rematch && rematch.cause == token + "," + j) {
+                return;
+              }
+              var patternObj = patterns[j];
+              var inside = patternObj.inside;
+              var lookbehind = !!patternObj.lookbehind;
+              var greedy = !!patternObj.greedy;
+              var alias = patternObj.alias;
+              if (greedy && !patternObj.pattern.global) {
+                var flags = patternObj.pattern.toString().match(/[imsuy]*$/)[0];
+                patternObj.pattern = RegExp(patternObj.pattern.source, flags + "g");
+              }
+              var pattern = patternObj.pattern || patternObj;
+              for (var currentNode = startNode.next, pos = startPos; currentNode !== tokenList.tail; pos += currentNode.value.length, currentNode = currentNode.next) {
+                if (rematch && pos >= rematch.reach) {
+                  break;
+                }
+                var str = currentNode.value;
+                if (tokenList.length > text.length) {
+                  return;
+                }
+                if (str instanceof Token) {
+                  continue;
+                }
+                var removeCount = 1;
+                var match;
+                if (greedy) {
+                  match = matchPattern(pattern, pos, text, lookbehind);
+                  if (!match || match.index >= text.length) {
+                    break;
+                  }
+                  var from = match.index;
+                  var to = match.index + match[0].length;
+                  var p = pos;
+                  p += currentNode.value.length;
+                  while (from >= p) {
+                    currentNode = currentNode.next;
+                    p += currentNode.value.length;
+                  }
+                  p -= currentNode.value.length;
+                  pos = p;
+                  if (currentNode.value instanceof Token) {
+                    continue;
+                  }
+                  for (var k = currentNode; k !== tokenList.tail && (p < to || typeof k.value === "string"); k = k.next) {
+                    removeCount++;
+                    p += k.value.length;
+                  }
+                  removeCount--;
+                  str = text.slice(pos, p);
+                  match.index -= pos;
+                } else {
+                  match = matchPattern(pattern, 0, str, lookbehind);
+                  if (!match) {
+                    continue;
+                  }
+                }
+                var from = match.index;
+                var matchStr = match[0];
+                var before = str.slice(0, from);
+                var after = str.slice(from + matchStr.length);
+                var reach = pos + str.length;
+                if (rematch && reach > rematch.reach) {
+                  rematch.reach = reach;
+                }
+                var removeFrom = currentNode.prev;
+                if (before) {
+                  removeFrom = addAfter(tokenList, removeFrom, before);
+                  pos += before.length;
+                }
+                removeRange(tokenList, removeFrom, removeCount);
+                var wrapped = new Token(token, inside ? _2.tokenize(matchStr, inside) : matchStr, alias, matchStr);
+                currentNode = addAfter(tokenList, removeFrom, wrapped);
+                if (after) {
+                  addAfter(tokenList, currentNode, after);
+                }
+                if (removeCount > 1) {
+                  var nestedRematch = {
+                    cause: token + "," + j,
+                    reach
+                  };
+                  matchGrammar(text, tokenList, grammar, currentNode.prev, pos, nestedRematch);
+                  if (rematch && nestedRematch.reach > rematch.reach) {
+                    rematch.reach = nestedRematch.reach;
+                  }
+                }
+              }
+            }
+          }
+        }
+        function LinkedList() {
+          var head = { value: null, prev: null, next: null };
+          var tail = { value: null, prev: head, next: null };
+          head.next = tail;
+          this.head = head;
+          this.tail = tail;
+          this.length = 0;
+        }
+        function addAfter(list, node, value) {
+          var next = node.next;
+          var newNode = { value, prev: node, next };
+          node.next = newNode;
+          next.prev = newNode;
+          list.length++;
+          return newNode;
+        }
+        function removeRange(list, node, count) {
+          var next = node.next;
+          for (var i = 0; i < count && next !== list.tail; i++) {
+            next = next.next;
+          }
+          node.next = next;
+          next.prev = node;
+          list.length -= i;
+        }
+        function toArray(list) {
+          var array = [];
+          var node = list.head.next;
+          while (node !== list.tail) {
+            array.push(node.value);
+            node = node.next;
+          }
+          return array;
+        }
+        if (!_self2.document) {
+          if (!_self2.addEventListener) {
+            return _2;
+          }
+          if (!_2.disableWorkerMessageHandler) {
+            _self2.addEventListener("message", function(evt) {
+              var message = JSON.parse(evt.data);
+              var lang2 = message.language;
+              var code = message.code;
+              var immediateClose = message.immediateClose;
+              _self2.postMessage(_2.highlight(code, _2.languages[lang2], lang2));
+              if (immediateClose) {
+                _self2.close();
+              }
+            }, false);
+          }
+          return _2;
+        }
+        var script = _2.util.currentScript();
+        if (script) {
+          _2.filename = script.src;
+          if (script.hasAttribute("data-manual")) {
+            _2.manual = true;
+          }
+        }
+        function highlightAutomaticallyCallback() {
+          if (!_2.manual) {
+            _2.highlightAll();
+          }
+        }
+        if (!_2.manual) {
+          var readyState = document.readyState;
+          if (readyState === "loading" || readyState === "interactive" && script && script.defer) {
+            document.addEventListener("DOMContentLoaded", highlightAutomaticallyCallback);
+          } else {
+            if (window.requestAnimationFrame) {
+              window.requestAnimationFrame(highlightAutomaticallyCallback);
+            } else {
+              window.setTimeout(highlightAutomaticallyCallback, 16);
+            }
+          }
+        }
+        return _2;
+      }(_self);
+      if (typeof module !== "undefined" && module.exports) {
+        module.exports = Prism2;
+      }
+      if (typeof global !== "undefined") {
+        global.Prism = Prism2;
+      }
+      Prism2.languages.markup = {
+        "comment": {
+          pattern: /<!--(?:(?!<!--)[\s\S])*?-->/,
+          greedy: true
+        },
+        "prolog": {
+          pattern: /<\?[\s\S]+?\?>/,
+          greedy: true
+        },
+        "doctype": {
+          // https://www.w3.org/TR/xml/#NT-doctypedecl
+          pattern: /<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,
+          greedy: true,
+          inside: {
+            "internal-subset": {
+              pattern: /(^[^\[]*\[)[\s\S]+(?=\]>$)/,
+              lookbehind: true,
+              greedy: true,
+              inside: null
+              // see below
+            },
+            "string": {
+              pattern: /"[^"]*"|'[^']*'/,
+              greedy: true
+            },
+            "punctuation": /^<!|>$|[[\]]/,
+            "doctype-tag": /^DOCTYPE/i,
+            "name": /[^\s<>'"]+/
+          }
+        },
+        "cdata": {
+          pattern: /<!\[CDATA\[[\s\S]*?\]\]>/i,
+          greedy: true
+        },
+        "tag": {
+          pattern: /<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,
+          greedy: true,
+          inside: {
+            "tag": {
+              pattern: /^<\/?[^\s>\/]+/,
+              inside: {
+                "punctuation": /^<\/?/,
+                "namespace": /^[^\s>\/:]+:/
+              }
+            },
+            "special-attr": [],
+            "attr-value": {
+              pattern: /=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,
+              inside: {
+                "punctuation": [
+                  {
+                    pattern: /^=/,
+                    alias: "attr-equals"
+                  },
+                  {
+                    pattern: /^(\s*)["']|["']$/,
+                    lookbehind: true
+                  }
+                ]
+              }
+            },
+            "punctuation": /\/?>/,
+            "attr-name": {
+              pattern: /[^\s>\/]+/,
+              inside: {
+                "namespace": /^[^\s>\/:]+:/
+              }
+            }
+          }
+        },
+        "entity": [
+          {
+            pattern: /&[\da-z]{1,8};/i,
+            alias: "named-entity"
+          },
+          /&#x?[\da-f]{1,8};/i
+        ]
+      };
+      Prism2.languages.markup["tag"].inside["attr-value"].inside["entity"] = Prism2.languages.markup["entity"];
+      Prism2.languages.markup["doctype"].inside["internal-subset"].inside = Prism2.languages.markup;
+      Prism2.hooks.add("wrap", function(env) {
+        if (env.type === "entity") {
+          env.attributes["title"] = env.content.replace(/&amp;/, "&");
+        }
+      });
+      Object.defineProperty(Prism2.languages.markup.tag, "addInlined", {
+        /**
+         * Adds an inlined language to markup.
+         *
+         * An example of an inlined language is CSS with `<style>` tags.
+         *
+         * @param {string} tagName The name of the tag that contains the inlined language. This name will be treated as
+         * case insensitive.
+         * @param {string} lang The language key.
+         * @example
+         * addInlined('style', 'css');
+         */
+        value: function addInlined(tagName, lang) {
+          var includedCdataInside = {};
+          includedCdataInside["language-" + lang] = {
+            pattern: /(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,
+            lookbehind: true,
+            inside: Prism2.languages[lang]
+          };
+          includedCdataInside["cdata"] = /^<!\[CDATA\[|\]\]>$/i;
+          var inside = {
+            "included-cdata": {
+              pattern: /<!\[CDATA\[[\s\S]*?\]\]>/i,
+              inside: includedCdataInside
+            }
+          };
+          inside["language-" + lang] = {
+            pattern: /[\s\S]+/,
+            inside: Prism2.languages[lang]
+          };
+          var def = {};
+          def[tagName] = {
+            pattern: RegExp(/(<__[^>]*>)(?:<!\[CDATA\[(?:[^\]]|\](?!\]>))*\]\]>|(?!<!\[CDATA\[)[\s\S])*?(?=<\/__>)/.source.replace(/__/g, function() {
+              return tagName;
+            }), "i"),
+            lookbehind: true,
+            greedy: true,
+            inside
+          };
+          Prism2.languages.insertBefore("markup", "cdata", def);
+        }
+      });
+      Object.defineProperty(Prism2.languages.markup.tag, "addAttribute", {
+        /**
+         * Adds an pattern to highlight languages embedded in HTML attributes.
+         *
+         * An example of an inlined language is CSS with `style` attributes.
+         *
+         * @param {string} attrName The name of the tag that contains the inlined language. This name will be treated as
+         * case insensitive.
+         * @param {string} lang The language key.
+         * @example
+         * addAttribute('style', 'css');
+         */
+        value: function(attrName, lang) {
+          Prism2.languages.markup.tag.inside["special-attr"].push({
+            pattern: RegExp(
+              /(^|["'\s])/.source + "(?:" + attrName + ")" + /\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,
+              "i"
+            ),
+            lookbehind: true,
+            inside: {
+              "attr-name": /^[^\s=]+/,
+              "attr-value": {
+                pattern: /=[\s\S]+/,
+                inside: {
+                  "value": {
+                    pattern: /(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,
+                    lookbehind: true,
+                    alias: [lang, "language-" + lang],
+                    inside: Prism2.languages[lang]
+                  },
+                  "punctuation": [
+                    {
+                      pattern: /^=/,
+                      alias: "attr-equals"
+                    },
+                    /"|'/
+                  ]
+                }
+              }
+            }
+          });
+        }
+      });
+      Prism2.languages.html = Prism2.languages.markup;
+      Prism2.languages.mathml = Prism2.languages.markup;
+      Prism2.languages.svg = Prism2.languages.markup;
+      Prism2.languages.xml = Prism2.languages.extend("markup", {});
+      Prism2.languages.ssml = Prism2.languages.xml;
+      Prism2.languages.atom = Prism2.languages.xml;
+      Prism2.languages.rss = Prism2.languages.xml;
+      (function(Prism3) {
+        var string = /(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;
+        Prism3.languages.css = {
+          "comment": /\/\*[\s\S]*?\*\//,
+          "atrule": {
+            pattern: RegExp("@[\\w-](?:" + /[^;{\s"']|\s+(?!\s)/.source + "|" + string.source + ")*?" + /(?:;|(?=\s*\{))/.source),
+            inside: {
+              "rule": /^@[\w-]+/,
+              "selector-function-argument": {
+                pattern: /(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,
+                lookbehind: true,
+                alias: "selector"
+              },
+              "keyword": {
+                pattern: /(^|[^\w-])(?:and|not|only|or)(?![\w-])/,
+                lookbehind: true
+              }
+              // See rest below
+            }
+          },
+          "url": {
+            // https://drafts.csswg.org/css-values-3/#urls
+            pattern: RegExp("\\burl\\((?:" + string.source + "|" + /(?:[^\\\r\n()"']|\\[\s\S])*/.source + ")\\)", "i"),
+            greedy: true,
+            inside: {
+              "function": /^url/i,
+              "punctuation": /^\(|\)$/,
+              "string": {
+                pattern: RegExp("^" + string.source + "$"),
+                alias: "url"
+              }
+            }
+          },
+          "selector": {
+            pattern: RegExp(`(^|[{}\\s])[^{}\\s](?:[^{};"'\\s]|\\s+(?![\\s{])|` + string.source + ")*(?=\\s*\\{)"),
+            lookbehind: true
+          },
+          "string": {
+            pattern: string,
+            greedy: true
+          },
+          "property": {
+            pattern: /(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,
+            lookbehind: true
+          },
+          "important": /!important\b/i,
+          "function": {
+            pattern: /(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,
+            lookbehind: true
+          },
+          "punctuation": /[(){};:,]/
+        };
+        Prism3.languages.css["atrule"].inside.rest = Prism3.languages.css;
+        var markup = Prism3.languages.markup;
+        if (markup) {
+          markup.tag.addInlined("style", "css");
+          markup.tag.addAttribute("style", "css");
+        }
+      })(Prism2);
+      Prism2.languages.clike = {
+        "comment": [
+          {
+            pattern: /(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,
+            lookbehind: true,
+            greedy: true
+          },
+          {
+            pattern: /(^|[^\\:])\/\/.*/,
+            lookbehind: true,
+            greedy: true
+          }
+        ],
+        "string": {
+          pattern: /(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
+          greedy: true
+        },
+        "class-name": {
+          pattern: /(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,
+          lookbehind: true,
+          inside: {
+            "punctuation": /[.\\]/
+          }
+        },
+        "keyword": /\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,
+        "boolean": /\b(?:false|true)\b/,
+        "function": /\b\w+(?=\()/,
+        "number": /\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,
+        "operator": /[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,
+        "punctuation": /[{}[\];(),.:]/
+      };
+      Prism2.languages.javascript = Prism2.languages.extend("clike", {
+        "class-name": [
+          Prism2.languages.clike["class-name"],
+          {
+            pattern: /(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,
+            lookbehind: true
+          }
+        ],
+        "keyword": [
+          {
+            pattern: /((?:^|\})\s*)catch\b/,
+            lookbehind: true
+          },
+          {
+            pattern: /(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,
+            lookbehind: true
+          }
+        ],
+        // Allow for all non-ASCII characters (See http://stackoverflow.com/a/2008444)
+        "function": /#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,
+        "number": {
+          pattern: RegExp(
+            /(^|[^\w$])/.source + "(?:" + // constant
+            (/NaN|Infinity/.source + "|" + // binary integer
+            /0[bB][01]+(?:_[01]+)*n?/.source + "|" + // octal integer
+            /0[oO][0-7]+(?:_[0-7]+)*n?/.source + "|" + // hexadecimal integer
+            /0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source + "|" + // decimal bigint
+            /\d+(?:_\d+)*n/.source + "|" + // decimal number (integer or float) but no bigint
+            /(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source) + ")" + /(?![\w$])/.source
+          ),
+          lookbehind: true
+        },
+        "operator": /--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/
+      });
+      Prism2.languages.javascript["class-name"][0].pattern = /(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/;
+      Prism2.languages.insertBefore("javascript", "keyword", {
+        "regex": {
+          pattern: RegExp(
+            // lookbehind
+            // eslint-disable-next-line regexp/no-dupe-characters-character-class
+            /((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)/.source + // Regex pattern:
+            // There are 2 regex patterns here. The RegExp set notation proposal added support for nested character
+            // classes if the `v` flag is present. Unfortunately, nested CCs are both context-free and incompatible
+            // with the only syntax, so we have to define 2 different regex patterns.
+            /\//.source + "(?:" + /(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}/.source + "|" + // `v` flag syntax. This supports 3 levels of nested character classes.
+            /(?:\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.)*\])*\])*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}v[dgimyus]{0,7}/.source + ")" + // lookahead
+            /(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/.source
+          ),
+          lookbehind: true,
+          greedy: true,
+          inside: {
+            "regex-source": {
+              pattern: /^(\/)[\s\S]+(?=\/[a-z]*$)/,
+              lookbehind: true,
+              alias: "language-regex",
+              inside: Prism2.languages.regex
+            },
+            "regex-delimiter": /^\/|\/$/,
+            "regex-flags": /^[a-z]+$/
+          }
+        },
+        // This must be declared before keyword because we use "function" inside the look-forward
+        "function-variable": {
+          pattern: /#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,
+          alias: "function"
+        },
+        "parameter": [
+          {
+            pattern: /(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,
+            lookbehind: true,
+            inside: Prism2.languages.javascript
+          },
+          {
+            pattern: /(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,
+            lookbehind: true,
+            inside: Prism2.languages.javascript
+          },
+          {
+            pattern: /(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,
+            lookbehind: true,
+            inside: Prism2.languages.javascript
+          },
+          {
+            pattern: /((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,
+            lookbehind: true,
+            inside: Prism2.languages.javascript
+          }
+        ],
+        "constant": /\b[A-Z](?:[A-Z_]|\dx?)*\b/
+      });
+      Prism2.languages.insertBefore("javascript", "string", {
+        "hashbang": {
+          pattern: /^#!.*/,
+          greedy: true,
+          alias: "comment"
+        },
+        "template-string": {
+          pattern: /`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,
+          greedy: true,
+          inside: {
+            "template-punctuation": {
+              pattern: /^`|`$/,
+              alias: "string"
+            },
+            "interpolation": {
+              pattern: /((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,
+              lookbehind: true,
+              inside: {
+                "interpolation-punctuation": {
+                  pattern: /^\$\{|\}$/,
+                  alias: "punctuation"
+                },
+                rest: Prism2.languages.javascript
+              }
+            },
+            "string": /[\s\S]+/
+          }
+        },
+        "string-property": {
+          pattern: /((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,
+          lookbehind: true,
+          greedy: true,
+          alias: "property"
+        }
+      });
+      Prism2.languages.insertBefore("javascript", "operator", {
+        "literal-property": {
+          pattern: /((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,
+          lookbehind: true,
+          alias: "property"
+        }
+      });
+      if (Prism2.languages.markup) {
+        Prism2.languages.markup.tag.addInlined("script", "javascript");
+        Prism2.languages.markup.tag.addAttribute(
+          /on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source,
+          "javascript"
+        );
+      }
+      Prism2.languages.js = Prism2.languages.javascript;
+      (function() {
+        if (typeof Prism2 === "undefined" || typeof document === "undefined") {
+          return;
+        }
+        if (!Element.prototype.matches) {
+          Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+        }
+        var LOADING_MESSAGE = "Loading\u2026";
+        var FAILURE_MESSAGE = function(status, message) {
+          return "\u2716 Error " + status + " while fetching file: " + message;
+        };
+        var FAILURE_EMPTY_MESSAGE = "\u2716 Error: File does not exist or is empty";
+        var EXTENSIONS = {
+          "js": "javascript",
+          "py": "python",
+          "rb": "ruby",
+          "ps1": "powershell",
+          "psm1": "powershell",
+          "sh": "bash",
+          "bat": "batch",
+          "h": "c",
+          "tex": "latex"
+        };
+        var STATUS_ATTR = "data-src-status";
+        var STATUS_LOADING = "loading";
+        var STATUS_LOADED = "loaded";
+        var STATUS_FAILED = "failed";
+        var SELECTOR = "pre[data-src]:not([" + STATUS_ATTR + '="' + STATUS_LOADED + '"]):not([' + STATUS_ATTR + '="' + STATUS_LOADING + '"])';
+        function loadFile(src, success, error) {
+          var xhr = new XMLHttpRequest();
+          xhr.open("GET", src, true);
+          xhr.onreadystatechange = function() {
+            if (xhr.readyState == 4) {
+              if (xhr.status < 400 && xhr.responseText) {
+                success(xhr.responseText);
+              } else {
+                if (xhr.status >= 400) {
+                  error(FAILURE_MESSAGE(xhr.status, xhr.statusText));
+                } else {
+                  error(FAILURE_EMPTY_MESSAGE);
+                }
+              }
+            }
+          };
+          xhr.send(null);
+        }
+        function parseRange(range) {
+          var m = /^\s*(\d+)\s*(?:(,)\s*(?:(\d+)\s*)?)?$/.exec(range || "");
+          if (m) {
+            var start = Number(m[1]);
+            var comma = m[2];
+            var end = m[3];
+            if (!comma) {
+              return [start, start];
+            }
+            if (!end) {
+              return [start, void 0];
+            }
+            return [start, Number(end)];
+          }
+          return void 0;
+        }
+        Prism2.hooks.add("before-highlightall", function(env) {
+          env.selector += ", " + SELECTOR;
+        });
+        Prism2.hooks.add("before-sanity-check", function(env) {
+          var pre = (
+            /** @type {HTMLPreElement} */
+            env.element
+          );
+          if (pre.matches(SELECTOR)) {
+            env.code = "";
+            pre.setAttribute(STATUS_ATTR, STATUS_LOADING);
+            var code = pre.appendChild(document.createElement("CODE"));
+            code.textContent = LOADING_MESSAGE;
+            var src = pre.getAttribute("data-src");
+            var language = env.language;
+            if (language === "none") {
+              var extension = (/\.(\w+)$/.exec(src) || [, "none"])[1];
+              language = EXTENSIONS[extension] || extension;
+            }
+            Prism2.util.setLanguage(code, language);
+            Prism2.util.setLanguage(pre, language);
+            var autoloader = Prism2.plugins.autoloader;
+            if (autoloader) {
+              autoloader.loadLanguages(language);
+            }
+            loadFile(
+              src,
+              function(text) {
+                pre.setAttribute(STATUS_ATTR, STATUS_LOADED);
+                var range = parseRange(pre.getAttribute("data-range"));
+                if (range) {
+                  var lines = text.split(/\r\n?|\n/g);
+                  var start = range[0];
+                  var end = range[1] == null ? lines.length : range[1];
+                  if (start < 0) {
+                    start += lines.length;
+                  }
+                  start = Math.max(0, Math.min(start - 1, lines.length));
+                  if (end < 0) {
+                    end += lines.length;
+                  }
+                  end = Math.max(0, Math.min(end, lines.length));
+                  text = lines.slice(start, end).join("\n");
+                  if (!pre.hasAttribute("data-start")) {
+                    pre.setAttribute("data-start", String(start + 1));
+                  }
+                }
+                code.textContent = text;
+                Prism2.highlightElement(code);
+              },
+              function(error) {
+                pre.setAttribute(STATUS_ATTR, STATUS_FAILED);
+                code.textContent = error;
+              }
+            );
+          }
+        });
+        Prism2.plugins.fileHighlight = {
+          /**
+           * Executes the File Highlight plugin for all matching `pre` elements under the given container.
+           *
+           * Note: Elements which are already loaded or currently loading will not be touched by this method.
+           *
+           * @param {ParentNode} [container=document]
+           */
+          highlight: function highlight(container) {
+            var elements = (container || document).querySelectorAll(SELECTOR);
+            for (var i = 0, element; element = elements[i++]; ) {
+              Prism2.highlightElement(element);
+            }
+          }
+        };
+        var logged = false;
+        Prism2.fileHighlight = function() {
+          if (!logged) {
+            console.warn("Prism.fileHighlight is deprecated. Use `Prism.plugins.fileHighlight.highlight` instead.");
+            logged = true;
+          }
+          Prism2.plugins.fileHighlight.highlight.apply(this, arguments);
+        };
+      })();
+    }
+  });
+
   // ../temple/index.js
   var require_temple = __commonJS({
     "../temple/index.js"(exports, module) {
@@ -893,19 +2342,19 @@ var TempleBundle = (() => {
   var template_engine_exports = {};
   __export(template_engine_exports, {
     BUILD_ID: () => BUILD_ID,
-    TempleComponent: () => import_client4.TempleComponent,
-    TempleElement: () => import_client4.TempleElement,
-    TempleEmitter: () => import_client4.TempleEmitter,
-    TempleException: () => import_client4.TempleException,
-    TempleRegistry: () => import_client4.TempleRegistry,
-    children: () => import_client4.children,
+    TempleComponent: () => import_client7.TempleComponent,
+    TempleElement: () => import_client7.TempleElement,
+    TempleEmitter: () => import_client7.TempleEmitter,
+    TempleException: () => import_client7.TempleException,
+    TempleRegistry: () => import_client7.TempleRegistry,
+    children: () => import_client7.children,
     components: () => components,
-    data: () => import_client4.data,
-    emitter: () => import_client4.emitter,
-    props: () => import_client4.props,
-    signal: () => import_client4.signal
+    data: () => import_client7.data,
+    emitter: () => import_client7.emitter,
+    props: () => import_client7.props,
+    signal: () => import_client7.signal
   });
-  var import_client3 = __toESM(require_client2());
+  var import_client6 = __toESM(require_client2());
 
   // temple-component-plugin:/Users/cblanquera/server/projects/ossph/temple/packages/temple-web/src/modules/panel/main.tml
   var import_client = __toESM(require_client2());
@@ -915,18 +2364,291 @@ var TempleBundle = (() => {
       return ``;
     }
     template() {
-      const props2 = this.props;
-      const children3 = () => this.originalChildren;
+      const props6 = this.props;
+      const children6 = () => this.originalChildren;
       return () => [
         import_client.TempleRegistry.createElement("main", {}, [
-          ...this._toNodeList(children3())
+          ...this._toNodeList(children6())
         ]).element
       ];
     }
   };
 
-  // temple-component-plugin:/Users/cblanquera/server/projects/ossph/temple/packages/temple-web/src/modules/i18n/translate.tml
+  // temple-component-plugin:/Users/cblanquera/server/projects/ossph/temple/packages/temple-web/src/modules/ide/code.tml
   var import_client2 = __toESM(require_client2());
+  var import_prismjs = __toESM(require_prism());
+  var import_temple = __toESM(require_temple());
+  var Code_6f36bc13bb6a166c7abc = class extends import_client2.TempleComponent {
+    static component = ["code", "Code_6f36bc13bb6a166c7abc"];
+    styles() {
+      return `:host {
+    display: block;
+    font-size: 14px;
+    line-height: 20px;
+  }
+  :host([inline]) {
+    display: inline;
+  }
+  :host([inline]),
+  :host([inline]) > pre,
+  :host([inline]) > pre > code {
+    display: inline;
+  }
+  .snippet {
+    background-color: #000000;
+    color: #ABB2BF;
+    margin: 0;
+    padding: 0;
+  }
+
+  .line-numbers {
+    position: relative;
+    padding-left: 3.8em;
+    counter-reset: linenumber;
+  }
+  :host([inline]) .line-numbers {
+    position: static;
+    padding-left: 0;
+  }
+
+  .line-numbers > code {
+    position: relative;
+    white-space: inherit;
+  }
+
+  .line-numbers .line-numbers-rows {
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    font-size: 100%;
+    left: -3.8em;
+    width: 3em; /* works for line-numbers below 1000 lines */
+    letter-spacing: -1px;
+    border-right: 1px solid #999;
+
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+  }
+
+  :host([inline]) .line-numbers .line-numbers-rows {
+    display: none;
+  }
+
+  .line-numbers-rows > span {
+    display: block;
+    counter-increment: linenumber;
+  }
+
+  .line-numbers-rows > span:before {
+    content: counter(linenumber);
+    color: #999;
+    display: block;
+    padding-right: 0.8em;
+    text-align: right;
+  }
+  .pad {
+    padding: 5px;
+  }
+
+  .terminal {
+    background-color: #000000;
+    font-size: 15px;
+    padding: 10px;
+  }
+  .terminal span {
+    color: #00FF00;
+  }`;
+    }
+    template() {
+      const config = this.props;
+      const {
+        lang = "markup",
+        numbers = false,
+        inline = false,
+        trim = false,
+        ltrim = false,
+        rtrim = false,
+        detab = 0
+      } = config;
+      const childlist = (0, import_temple.children)();
+      let snippet = childlist[0]?.textContent || "";
+      if (detab) {
+        snippet = snippet.replace(
+          new RegExp(`\\n {${detab}}`, "g"),
+          "\n"
+        );
+      }
+      if (trim) {
+        snippet = snippet.trim();
+      } else if (ltrim) {
+        snippet = snippet.replace(/^\s+/, "");
+      } else if (rtrim) {
+        snippet = snippet.replace(/\s+$/, "");
+      }
+      const highlight = (event) => {
+        if (!snippet) {
+          return;
+        }
+        const code = import_prismjs.default.highlight(snippet, import_prismjs.default.languages[lang], lang);
+        event.detail.target.innerHTML = code;
+        if (numbers) {
+          const match = code.match(/\n(?!$)/g);
+          const total = match ? match.length + 1 : 1;
+          const lines = new Array(total + 1).join("<span></span>");
+          const wrapper = document.createElement("span");
+          wrapper.setAttribute("aria-hidden", "true");
+          wrapper.className = "line-numbers-rows";
+          wrapper.innerHTML = lines;
+          event.detail.target.appendChild(wrapper);
+        }
+      };
+      return () => [
+        import_client2.TempleRegistry.createElement("link", { "rel": `stylesheet`, "href": `https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/themes/prism.min.css` }).element,
+        import_client2.TempleRegistry.createText(`
+`, false),
+        import_client2.TempleRegistry.createElement("link", { "rel": `stylesheet`, "href": `https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/themes/prism-tomorrow.min.css` }).element,
+        import_client2.TempleRegistry.createText(`
+`, false),
+        ...!!(lang === "bash") ? [
+          import_client2.TempleRegistry.createText(`
+  `, false),
+          import_client2.TempleRegistry.createElement("div", { "class": `terminal` }, [
+            import_client2.TempleRegistry.createElement("span", {}, [
+              import_client2.TempleRegistry.createText(`$`, false)
+            ]).element,
+            import_client2.TempleRegistry.createText(` `, false),
+            ...this._toNodeList(childlist)
+          ]).element,
+          import_client2.TempleRegistry.createText(`
+`, false)
+        ] : !!snippet ? [
+          ,
+          import_client2.TempleRegistry.createText(`
+  `, false),
+          ...!!numbers ? [
+            import_client2.TempleRegistry.createText(`
+    `, false),
+            import_client2.TempleRegistry.createElement("pre", { "class": `snippet line-numbers` }, [
+              import_client2.TempleRegistry.createElement("code", { "mount": highlight }, []).element
+            ]).element,
+            import_client2.TempleRegistry.createText(`
+  `, false)
+          ] : true ? [
+            ,
+            import_client2.TempleRegistry.createText(`
+    `, false),
+            import_client2.TempleRegistry.createElement("pre", { "class": `snippet pad` }, [
+              import_client2.TempleRegistry.createElement("code", { "mount": highlight }, []).element
+            ]).element,
+            import_client2.TempleRegistry.createText(`
+  `, false)
+          ] : [],
+          import_client2.TempleRegistry.createText(`
+`, false)
+        ] : []
+      ];
+    }
+  };
+
+  // temple-component-plugin:/Users/cblanquera/server/projects/ossph/temple/packages/temple-web/src/modules/ide/app.tml
+  var import_client3 = __toESM(require_client2());
+  var import_temple2 = __toESM(require_temple());
+  var App_05341fddbfd1fe4f273b = class extends import_client3.TempleComponent {
+    static component = ["app", "App_05341fddbfd1fe4f273b"];
+    styles() {
+      return ``;
+    }
+    template() {
+      const { title, panel } = (0, import_temple2.props)();
+      const classname = `body ${panel ? "panel" : ""}`;
+      const style = panel ? `height:${panel}px` : "";
+      return () => [
+        import_client3.TempleRegistry.createText(`
+`, false),
+        import_client3.TempleRegistry.createElement("div", { "class": `window` }, [
+          import_client3.TempleRegistry.createText(`
+  `, false),
+          import_client3.TempleRegistry.createElement("div", { "class": `head` }, [
+            import_client3.TempleRegistry.createText(`
+    `, false),
+            import_client3.TempleRegistry.createElement("span", { "class": `dot` }, []).element,
+            import_client3.TempleRegistry.createText(`
+    `, false),
+            import_client3.TempleRegistry.createElement("span", { "class": `dot` }, []).element,
+            import_client3.TempleRegistry.createText(`
+    `, false),
+            import_client3.TempleRegistry.createElement("span", { "class": `dot` }, []).element,
+            import_client3.TempleRegistry.createText(`
+    `, false),
+            import_client3.TempleRegistry.createElement("span", { "class": `title` }, [
+              ...this._toNodeList(title)
+            ]).element,
+            import_client3.TempleRegistry.createText(`
+  `, false)
+          ]).element,
+          import_client3.TempleRegistry.createText(`
+  `, false),
+          import_client3.TempleRegistry.createElement("div", { "class": classname, "style": style }, [
+            ...this._toNodeList((0, import_temple2.children)())
+          ]).element,
+          import_client3.TempleRegistry.createText(`
+`, false)
+        ]).element
+      ];
+    }
+  };
+
+  // temple-component-plugin:/Users/cblanquera/server/projects/ossph/temple/packages/temple-web/src/modules/tui/tab.tml
+  var import_client4 = __toESM(require_client2());
+  var import_temple3 = __toESM(require_temple());
+  var Tab_dd9d261e4f37efc3079c = class extends import_client4.TempleComponent {
+    static component = ["tab", "Tab_dd9d261e4f37efc3079c"];
+    styles() {
+      return ``;
+    }
+    template() {
+      const {
+        group,
+        selector,
+        "class": classlist,
+        ...attributes
+      } = (0, import_temple3.props)();
+      const init = () => {
+        Array.from(document.querySelectorAll(selector)).forEach((content) => {
+          content.style.display = classlist.indexOf("active") > -1 ? "block" : "none";
+        });
+      };
+      const show = () => {
+        Array.from(document.querySelectorAll(`[group="${group}"]`)).forEach((tab) => {
+          const subselector = tab.props.selector;
+          if (selector === subselector) {
+            tab.classList.add("active");
+            Array.from(document.querySelectorAll(selector)).forEach((content) => {
+              content.style.display = "block";
+            });
+          } else {
+            tab.classList.remove("active");
+            Array.from(document.querySelectorAll(subselector)).forEach((content) => {
+              content.style.display = "none";
+            });
+          }
+        });
+      };
+      return () => [
+        import_client4.TempleRegistry.createText(`
+`, false),
+        import_client4.TempleRegistry.createElement("a", { ...attributes, "click": show, "mount": init }, [
+          ...this._toNodeList((0, import_temple3.children)())
+        ]).element
+      ];
+    }
+  };
+
+  // temple-component-plugin:/Users/cblanquera/server/projects/ossph/temple/packages/temple-web/src/modules/i18n/translate.tml
+  var import_client5 = __toESM(require_client2());
 
   // src/modules/i18n/index.ts
   var _ = function(phrase, ...variables) {
@@ -941,17 +2663,18 @@ var TempleBundle = (() => {
   };
 
   // temple-component-plugin:/Users/cblanquera/server/projects/ossph/temple/packages/temple-web/src/modules/i18n/translate.tml
-  var import_temple = __toESM(require_temple());
-  var Translate_7d25e372f5ffb5e39dad = class extends import_client2.TempleComponent {
+  var import_temple4 = __toESM(require_temple());
+  var Translate_7d25e372f5ffb5e39dad = class extends import_client5.TempleComponent {
     static component = ["translate", "Translate_7d25e372f5ffb5e39dad"];
     styles() {
       return ``;
     }
     template() {
-      const childlist = (0, import_temple.children)();
+      const { trim = false, p = false, div = false } = (0, import_temple4.props)();
+      const childlist = (0, import_temple4.children)();
       const phrase = [];
       const variables = [];
-      for (const child of childlist.length) {
+      for (const child of childlist) {
         if (typeof child === "string") {
           phrase.push(child);
         } else if (child instanceof Node && child.textContent) {
@@ -961,7 +2684,11 @@ var TempleBundle = (() => {
           variables.push(child);
         }
       }
-      const chunks = translate(phrase.join("")).split("%s");
+      let words = phrase.join("");
+      if (trim) {
+        words = words.replace(/\s+/, " ").trim();
+      }
+      const chunks = translate(words).split("%s");
       const translations = [];
       for (let i = 0; i < chunks.length; i++) {
         translations.push(document.createTextNode(chunks[i]));
@@ -969,35 +2696,63 @@ var TempleBundle = (() => {
           translations.push(variables[i]);
         }
       }
-      return () => [];
+      return () => [
+        import_client5.TempleRegistry.createText(`
+    `, false),
+        ...!!p ? [
+          import_client5.TempleRegistry.createText(`
+      `, false),
+          import_client5.TempleRegistry.createElement("p", {}, [
+            ...this._toNodeList(translations)
+          ]).element,
+          import_client5.TempleRegistry.createText(`
+    `, false)
+        ] : !!div ? [
+          ,
+          import_client5.TempleRegistry.createText(`
+      `, false),
+          import_client5.TempleRegistry.createElement("div", {}, [
+            ...this._toNodeList(translations)
+          ]).element,
+          import_client5.TempleRegistry.createText(`
+    `, false)
+        ] : true ? [
+          ,
+          import_client5.TempleRegistry.createText(`
+      `, false),
+          ...this._toNodeList(translations),
+          import_client5.TempleRegistry.createText(`
+    `, false)
+        ] : []
+      ];
     }
   };
 
   // temple-document-client-plugin:/Users/cblanquera/server/projects/ossph/temple/packages/temple-web/src/pages/docs/template-engine.dtml
-  var import_client4 = __toESM(require_client2());
-  import_client3.emitter.once("ready", () => {
+  var import_client7 = __toESM(require_client2());
+  import_client6.emitter.once("ready", () => {
     const script = document.querySelector("script[data-app]");
     if (!script) {
-      throw import_client3.TempleException.for("APP_DATA not found");
+      throw import_client6.TempleException.for("APP_DATA not found");
     }
     try {
       const data2 = atob(script.getAttribute("data-app"));
       window.__APP_DATA__ = JSON.parse(data2);
       Object.entries(window.__APP_DATA__).forEach(([key, value]) => {
-        import_client3.data.set(key, value);
+        import_client6.data.set(key, value);
       });
     } catch (error) {
-      throw import_client3.TempleException.for("APP_DATA is not a valid JSON");
+      throw import_client6.TempleException.for("APP_DATA is not a valid JSON");
     }
-    import_client3.data.set("current", "document");
+    import_client6.data.set("current", "document");
     const url = "/docs/template-engine.html";
     const title = _("Template Engine - Temple reactive web component template engine.");
     const description = _("How to use Temple as a template engine.");
     const toggle = (_2) => {
       document.body.classList.toggle("panel-left-open");
     };
-    import_client3.data.delete("current");
-    const __BINDINGS__ = { "0": { "class": `head panel-head` }, "1": { "class": `menu fas fa-fw fa-bars`, "click": toggle }, "2": { "href": `/temple` }, "3": { "src": `/temple/temple-icon.png`, "alt": `Temple Logo` }, "5": { "class": `tx-white`, "href": `/temple` }, "7": { "href": `/temple/docs/index.html` }, "8": { "class": `github`, "href": `https://github.com/ossPhilippines/temple`, "target": `_blank` }, "9": { "class": `fab fa-github` }, "10": { "class": `npm`, "href": `https://www.npmjs.com/package/temple`, "target": `_blank` }, "11": { "class": `fab fa-npm text-white` }, "12": { "class": `discord`, "href": `https://discord.gg/open-source-software-ph-905496362982981723`, "target": `_blank` }, "13": { "class": `fab fa-discord text-white` }, "14": { "class": `left panel-left` }, "16": { "href": `/temple` }, "17": { "src": `/temple/temple-icon.png`, "alt": `Temple Logo` }, "19": { "class": `tx-white`, "href": `/temple` }, "20": { "class": `toggle fas fa-fw fa-chevron-left`, "click": toggle }, "23": { "href": `/temple/docs/index.html` }, "24": { "href": `/temple/docs/getting-started.html` }, "25": { "href": `/temple/docs/frequent-questions.html` }, "27": { "href": `/temple/docs/markup-syntax.html` }, "28": { "href": `/temple/docs/state-management.html` }, "29": { "href": `/temple/docs/component-strategy.html` }, "30": { "href": `/temple/docs/compiler-api.html` }, "31": { "href": `/temple/docs/client-api.html` }, "33": { "href": `/temple/docs/template-engine.html` }, "34": { "href": `/temple/docs/single-page.html` }, "35": { "href": `/temple/docs/static-site.html` }, "36": { "href": `/temple/docs/component-publisher.html` }, "37": { "href": `/temple/docs/developer-tools.html` }, "39": { "href": `/temple/docs/latest-updates.html` }, "40": { "href": `/temple/docs/contributing-guide.html` }, "41": { "href": `/temple/docs/known-issues.html` }, "42": { "class": `panel-main` }, "43": { "class": `docs container` }, "45": { "class": `pager` }, "46": { "class": `prev`, "href": `/temple/docs/client-api.html` }, "47": { "class": `fas fa-fw fa-chevron-left` }, "48": { "class": `next`, "href": `/temple/docs/single-page.html` }, "49": { "class": `fas fa-fw fa-chevron-right` }, "50": { "class": `foot` } };
+    import_client6.data.delete("current");
+    const __BINDINGS__ = { "0": { "class": `head panel-head` }, "1": { "class": `menu fas fa-fw fa-bars`, "click": toggle }, "2": { "href": `/temple` }, "3": { "src": `/temple/temple-icon.png`, "alt": `Temple Logo` }, "5": { "class": `tx-white`, "href": `/temple` }, "7": { "href": `/temple/docs/index.html` }, "8": { "class": `github`, "href": `https://github.com/ossPhilippines/temple`, "target": `_blank` }, "9": { "class": `fab fa-github` }, "10": { "class": `npm`, "href": `https://www.npmjs.com/package/temple`, "target": `_blank` }, "11": { "class": `fab fa-npm text-white` }, "12": { "class": `discord`, "href": `https://discord.gg/open-source-software-ph-905496362982981723`, "target": `_blank` }, "13": { "class": `fab fa-discord text-white` }, "14": { "class": `left panel-left` }, "16": { "href": `/temple` }, "17": { "src": `/temple/temple-icon.png`, "alt": `Temple Logo` }, "19": { "class": `tx-white`, "href": `/temple` }, "20": { "class": `toggle fas fa-fw fa-chevron-left`, "click": toggle }, "23": { "href": `/temple/docs/index.html` }, "24": { "href": `/temple/docs/getting-started.html` }, "25": { "href": `/temple/docs/frequent-questions.html` }, "27": { "href": `/temple/docs/markup-syntax.html` }, "28": { "href": `/temple/docs/state-management.html` }, "29": { "href": `/temple/docs/component-strategy.html` }, "30": { "href": `/temple/docs/compiler-api.html` }, "31": { "href": `/temple/docs/client-api.html` }, "33": { "href": `/temple/docs/template-engine.html` }, "34": { "href": `/temple/docs/single-page.html` }, "35": { "href": `/temple/docs/static-site.html` }, "36": { "href": `/temple/docs/component-publisher.html` }, "37": { "href": `/temple/docs/developer-tools.html` }, "39": { "href": `/temple/docs/latest-updates.html` }, "40": { "href": `/temple/docs/contributing-guide.html` }, "41": { "href": `/temple/docs/known-issues.html` }, "42": { "class": `panel-main` }, "43": { "class": `docs container` }, "45": { "p": true, "trim": true }, "46": { "panel": 410, "title": `My Project` }, "47": { "class": `panel-head` }, "48": { "class": `tabs` }, "49": { "class": `tab active`, "group": `project`, "selector": `#index-ts` }, "50": { "class": `tab`, "group": `project`, "selector": `#page-dtml` }, "51": { "class": `tab`, "group": `project`, "selector": `#package-json` }, "52": { "class": `panel-left` }, "53": { "class": `folder` }, "54": { "class": `fas fa-fw fa-chevron-down` }, "56": { "class": `shift-1 block active`, "group": `project`, "selector": `#index-ts` }, "57": { "class": `fas fa-fw fa-file` }, "58": { "class": `shift-1 block`, "group": `project`, "selector": `#page-dtml` }, "59": { "class": `fas fa-fw fa-file` }, "60": { "class": `block`, "group": `project`, "selector": `#package-json` }, "61": { "class": `fas fa-fw fa-file` }, "62": { "class": `panel-main` }, "64": { "id": `index-ts`, "lang": `js`, "numbers": true, "trim": true, "detab": 16 }, "65": { "id": `page-dtml`, "style": `display:none`, "numbers": true, "trim": true, "detab": 16 }, "66": { "id": `package-json`, "style": `display:none`, "lang": `js`, "numbers": true, "trim": true, "detab": 16 }, "67": { "p": true, "trim": true }, "68": { "inline": true }, "69": { "inline": true }, "70": { "title": `Terminal` }, "71": { "lang": `bash` }, "72": { "class": `pager` }, "73": { "class": `prev`, "href": `/temple/docs/client-api.html` }, "74": { "class": `fas fa-fw fa-chevron-left` }, "75": { "class": `next`, "href": `/temple/docs/single-page.html` }, "76": { "class": `fas fa-fw fa-chevron-right` }, "77": { "class": `foot` } };
     for (const element of document.body.querySelectorAll("*")) {
       const attributes = Object.fromEntries(
         Array.from(element.attributes).map((attribute) => [
@@ -1005,21 +2760,39 @@ var TempleBundle = (() => {
           attribute.nodeValue.length > 0 ? attribute.nodeValue : true
         ])
       );
-      const id = String(import_client3.TempleRegistry.elements.size);
+      const id = String(import_client6.TempleRegistry.elements.size);
       if (__BINDINGS__[id]) {
         Object.assign(attributes, __BINDINGS__[id]);
         element.TempleAttributes = __BINDINGS__[id];
       }
-      import_client3.TempleRegistry.register(element, attributes);
+      import_client6.TempleRegistry.register(element, attributes);
     }
     customElements.define("panel-main", Main_fd7f1af6410c5b5c8e1f);
+    customElements.define("ide-code", Code_6f36bc13bb6a166c7abc);
+    customElements.define("ide-app", App_05341fddbfd1fe4f273b);
+    customElements.define("tui-tab", Tab_dd9d261e4f37efc3079c);
     customElements.define("i18n-translate", Translate_7d25e372f5ffb5e39dad);
-    import_client3.emitter.emit("mounted", document.body);
+    import_client6.emitter.emit("mounted", document.body);
   });
   var components = {
     "PanelMain_fd7f1af6410c5b5c8e1f": Main_fd7f1af6410c5b5c8e1f,
+    "IdeCode_6f36bc13bb6a166c7abc": Code_6f36bc13bb6a166c7abc,
+    "IdeApp_05341fddbfd1fe4f273b": App_05341fddbfd1fe4f273b,
+    "TuiTab_dd9d261e4f37efc3079c": Tab_dd9d261e4f37efc3079c,
     "I18nTranslate_7d25e372f5ffb5e39dad": Translate_7d25e372f5ffb5e39dad
   };
   var BUILD_ID = "2d721d6aed73f41f4e72";
   return __toCommonJS(template_engine_exports);
 })();
+/*! Bundled license information:
+
+prismjs/prism.js:
+  (**
+   * Prism: Lightweight, robust, elegant syntax highlighting
+   *
+   * @license MIT <https://opensource.org/licenses/MIT>
+   * @author Lea Verou <https://lea.verou.me>
+   * @namespace
+   * @public
+   *)
+*/
diff --git a/docs/build/client/3ac3bd43a439129794ab.js b/docs/build/client/3ac3bd43a439129794ab.js
index 4e8d54e..54d373e 100644
--- a/docs/build/client/3ac3bd43a439129794ab.js
+++ b/docs/build/client/3ac3bd43a439129794ab.js
@@ -396,9 +396,9 @@ var TempleBundle = (() => {
         get props() {
           return this._props;
         }
-        set props(props2) {
-          this._props = Object.assign({}, props2);
-          this._attributes = Object.fromEntries(Object.entries(props2).filter((entry) => typeof entry[1] === "string" || entry[1] === true));
+        set props(props3) {
+          this._props = Object.assign({}, props3);
+          this._attributes = Object.fromEntries(Object.entries(props3).filter((entry) => typeof entry[1] === "string" || entry[1] === true));
         }
         adoptedCallback() {
           this.render();
@@ -529,9 +529,9 @@ var TempleBundle = (() => {
         return mod && mod.__esModule ? mod : { "default": mod };
       };
       Object.defineProperty(exports, "__esModule", { value: true });
-      exports.default = props2;
+      exports.default = props3;
       var data_1 = __importDefault(require_data());
-      function props2(component = null) {
+      function props3(component = null) {
         if (!component) {
           component = data_1.default.get("current") || null;
         }
@@ -915,7 +915,7 @@ var TempleBundle = (() => {
       return ``;
     }
     template() {
-      const props2 = this.props;
+      const props3 = this.props;
       const children3 = () => this.originalChildren;
       return () => [
         import_client.TempleRegistry.createElement("main", {}, [
@@ -948,10 +948,11 @@ var TempleBundle = (() => {
       return ``;
     }
     template() {
+      const { trim = false, p = false, div = false } = (0, import_temple.props)();
       const childlist = (0, import_temple.children)();
       const phrase = [];
       const variables = [];
-      for (const child of childlist.length) {
+      for (const child of childlist) {
         if (typeof child === "string") {
           phrase.push(child);
         } else if (child instanceof Node && child.textContent) {
@@ -961,7 +962,11 @@ var TempleBundle = (() => {
           variables.push(child);
         }
       }
-      const chunks = translate(phrase.join("")).split("%s");
+      let words = phrase.join("");
+      if (trim) {
+        words = words.replace(/\s+/, " ").trim();
+      }
+      const chunks = translate(words).split("%s");
       const translations = [];
       for (let i = 0; i < chunks.length; i++) {
         translations.push(document.createTextNode(chunks[i]));
@@ -969,7 +974,35 @@ var TempleBundle = (() => {
           translations.push(variables[i]);
         }
       }
-      return () => [];
+      return () => [
+        import_client2.TempleRegistry.createText(`
+    `, false),
+        ...!!p ? [
+          import_client2.TempleRegistry.createText(`
+      `, false),
+          import_client2.TempleRegistry.createElement("p", {}, [
+            ...this._toNodeList(translations)
+          ]).element,
+          import_client2.TempleRegistry.createText(`
+    `, false)
+        ] : !!div ? [
+          ,
+          import_client2.TempleRegistry.createText(`
+      `, false),
+          import_client2.TempleRegistry.createElement("div", {}, [
+            ...this._toNodeList(translations)
+          ]).element,
+          import_client2.TempleRegistry.createText(`
+    `, false)
+        ] : true ? [
+          ,
+          import_client2.TempleRegistry.createText(`
+      `, false),
+          ...this._toNodeList(translations),
+          import_client2.TempleRegistry.createText(`
+    `, false)
+        ] : []
+      ];
     }
   };
 
diff --git a/docs/build/client/57e37fa233b38c87fe71.html b/docs/build/client/57e37fa233b38c87fe71.html
index 2ff8390..6498ddb 100644
--- a/docs/build/client/57e37fa233b38c87fe71.html
+++ b/docs/build/client/57e37fa233b38c87fe71.html
@@ -83,7 +83,531 @@ <h6>Contributing</h6>
     <panel-main class="panel-main">
       <div class="docs container">
         <h1>Markup Syntax</h1>
+
+        <ide-app title="TL;DR">
+          <ide-code numbers >
+            &lt;link rel="import" type="component" href="@/modules/i18n/translate.tml" name="i18n-translate" /&gt;
+            
+            &lt;style&gt;
+              host: a {
+                color: #333;
+              }
+            &lt;/style&gt;
+
+            &lt;script&gt;
+              import { getTitle, getDetail, getLink } from '@/data/article';
+              const title = getTitle();
+              const href = getLink();
+              const attributes = { target: '_blank' };
+            &lt;/script&gt;
+
+            &lt;a title={title} {href} {...attributes}&gt;
+              {title}
+            &lt;/a&gt;
+
+            &lt;i18n-translate title=title&gt;
+              {getDetail()}
+            &lt;/i18n-translate&gt;
+          </ide-code>
+        </ide-app>
+
+        <i18n-translate p trim>
+          Components are the building blocks of Temple files. Documents 
+          and page level markup are written in 
+          <ide-code inline>.dtml</ide-code> files. Components 
+          and templates are written in 
+          <ide-code inline>.tml</ide-code> files. In both 
+          cases, the code is written in a superset of HTML.
+        </i18n-translate>
+        <i18n-translate p trim>
+          The four sections that make up a temple file — imports, 
+          script, styles and markup — are all optional and can be 
+          used in any order.
+        </i18n-translate>
+        <ide-app title="Code Structure">
+          <ide-code numbers >
+            &lt;!-- imports go here --&gt;
+
+            &lt;style&gt;
+              /* styles go here */
+            &lt;/style&gt;
+
+            &lt;script&gt;
+              // logic goes here
+            &lt;/script&gt;
+            
+            &lt;!-- HTML goes here --&gt;
+          </ide-code>
+        </ide-app>
+
+        <h2>Imports</h2>
+
+        <i18n-translate p trim>
+          Imports are used to include additional components, templates 
+          and stylesheets in the current component. Components can 
+          be imported as a <ide-code inline>template</ide-code> or 
+          <ide-code inline>component</ide-code> type.
+        </i18n-translate>
+
+        <ide-app title="Import Examples">
+          <ide-code numbers trim >
+            &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/prism.min.css" /&gt;
+            &lt;link rel="stylesheet" type="text/css" href="/styles/layout.css" /&gt;
+            &lt;link rel="import" type="template" href="@/modules/html-head.tml" /&gt;
+            &lt;link rel="import" type="component" href="@/modules/i18n/translate.tml" name="i18n-translate" /&gt;
+
+            &lt;style&gt;
+              /* styles go here */
+            &lt;/style&gt;
+
+            &lt;script&gt;
+              // logic goes here
+            &lt;/script&gt;
+            
+            &lt;!-- HTML goes here --&gt;
+          </ide-code>
+        </ide-app>
         
+        <i18n-translate p trim>
+          The <ide-code inline>rel</ide-code> attribute 
+          specifies the relationship between the current document and 
+          the linked resource. 
+          
+          <ide-code inline>rel="import"</ide-code> denotes
+          that the imported resource is a component or template.
+        </i18n-translate>
+        <i18n-translate p trim>
+          The <ide-code inline>type</ide-code> 
+          attribute specifies the type of the linked resource. 
+          
+          <ide-code inline>type="component"</ide-code> 
+          imports a web component that can be used as regular markup
+          with attributes and children. 
+          
+          <ide-code inline>type="template"</ide-code> 
+          imports a template partial that can be included in the current 
+          markup. Template partials do not process attributes or children
+          if given.
+        </i18n-translate>
+        <i18n-translate p trim>
+          The 
+          <ide-code inline>href</ide-code> attribute specifies
+          the URL of the linked resource. The 
+          <ide-code inline>name</ide-code>
+          attribute specifies the tag name of the imported component or template.
+        </i18n-translate>
+
+        <h2>Styles</h2>
+
+        <i18n-translate p trim>
+          CSS styles inside a <ide-code inline>&lt;style&gt;</ide-code> 
+          block enables the native <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM">shadow DOM</a> and will be scoped only to that component. 
+          Additionally styles defined outside of the component such as 
+          global styles will not affect the component.
+        </i18n-translate>
+
+        <i18n-translate p trim>
+          External stylesheets can be imported using the 
+          <ide-code inline>&lt;link&gt;</ide-code> tag or using 
+          <ide-code inline>@import()</ide-code> CSS directive. 
+        </i18n-translate>
+
+        <i18n-translate p trim>
+          You can use host selectors to style an element from within 
+          a component. The <ide-code inline>:host</ide-code> 
+          pseudo-class always applies styles to the root element of the 
+          web component.
+        </i18n-translate>
+
+        <ide-app title="Using :host">
+          <ide-code numbers trim >
+            &lt;style&gt;
+              :host {
+                display: block;
+              }
+            &lt;/style&gt;
+          </ide-code>
+        </ide-app>
+
+        <i18n-translate p trim>
+          You can also add conditional styles using the 
+          <ide-code inline>:host</ide-code> selector function. 
+          This can be used to style the host so long as it matches the 
+          given selector. For example, it can be used to select for 
+          hosts that have a given attribute or class.
+        </i18n-translate>
+
+        <ide-app title=":host Conditionals">
+          <ide-code numbers trim >
+            &lt;style&gt;
+              :host([active]) {
+                background-color: #333;
+                color: #FFF;
+              }
+              :host(.active) {
+                background-color: #333;
+                color: #FFF;
+              }
+            &lt;/style&gt;
+          </ide-code>
+        </ide-app>
+
+        <h2>Scripts</h2>
+
+        <i18n-translate p trim>
+          The <ide-code inline>&lt;script&gt;</ide-code> block is used 
+          to write TypeScript logic for the component. The script block 
+          can be used to define variables, functions, and event listeners.
+          Variables declared (or imported) at the top level are 
+          'visible' from the component's markup. 
+        </i18n-translate>
+
+        <ide-app title="Top-Level Variables">
+          <ide-code numbers trim >
+            &lt;script&gt;
+              const title = 'Hello World';
+            &lt;/script&gt;
+
+            &lt;h1&gt;{title}&lt;/h1&gt;
+          </ide-code>
+        </ide-app>
+
+        <i18n-translate p trim>
+          The <ide-code inline>&lt;script&gt;</ide-code> block can also 
+          be used to import variables from other components to be used
+          in the markup.
+        </i18n-translate>
+
+        <ide-app title="Importing Files">
+          <ide-code numbers trim >
+            &lt;script&gt;
+              import getTitle from './getTitle';
+              const title = getTitle();
+            &lt;/script&gt;
+
+            &lt;h1 title={title}&gt;{title}&lt;/h1&gt;
+          </ide-code>
+        </ide-app>
+
+        <i18n-translate p trim>
+          You can use <ide-code inline>@/</ide-code> to prefix the 
+          current working directory. This is useful when importing
+          files completely in a separate directory in your project
+        </i18n-translate>
+
+        <ide-app title="@ Imports">
+          <ide-code numbers trim >
+            &lt;script&gt;
+              import getTitle from '@/data/getTitle';
+              const title = getTitle();
+            &lt;/script&gt;
+
+            &lt;h1 title={title}&gt;{title}&lt;/h1&gt;
+          </ide-code>
+        </ide-app>
+
+        <h2>Markup</h2>
+
+        <i18n-translate p trim>
+          In order to be closer to the native, Temple follows the same 
+          standards and conventions as HTML5 web components. Temple 
+          components are compiled to native web components that possibly 
+          can be used in other projects any modern browser.
+        </i18n-translate>
+
+        <h3>Tag Names</h3>
+
+        <i18n-translate p trim>
+          Tag names must have at least one dash (-) in them. As such 
+          you probably want to name your element with two distinct words 
+          like <ide-code inline>i18n-translate</ide-code>. You can 
+          use as many dashes as you want, you're not limited to one. 
+          Some specific rules to follow in order to make a valid tag 
+          name:
+        </i18n-translate>
+
+        <ul>
+          <i18n-translate li trim>
+            It must use all lowercase characters of the alphabet (a-z).
+          </i18n-translate>
+          <i18n-translate li trim>
+            t must contain at least one dash (-).
+          </i18n-translate>
+          <i18n-translate li trim>
+            It must not be an already reserved tag name including 
+            <ide-code inline>annotation-xml</ide-code>,
+            <ide-code inline>color-profile</ide-code>,
+            <ide-code inline>font-face</ide-code>,
+            <ide-code inline>font-face-src</ide-code>,
+            <ide-code inline>font-face-uri</ide-code>,
+            <ide-code inline>font-face-format</ide-code>,
+            <ide-code inline>font-face-name</ide-code>, and 
+            <ide-code inline>missing-glyph</ide-code>.
+          </i18n-translate>
+          <i18n-translate li trim>
+            It must not contain symbols, like =, @, $.
+          </i18n-translate>
+          <i18n-translate li trim>
+            It can contain underscores, and numbers.
+          </i18n-translate>
+          <i18n-translate li trim>
+            It can contain characters from different alphabets, 
+            such as é, ð, ö, 爱.
+          </i18n-translate>
+        </ul>
+
+        <i18n-translate p trim>
+          Additionally, Temple works best with correct markup. The 
+          following standards should be followed:
+        </i18n-translate>
+
+        <ul>
+          <i18n-translate li trim>
+            Self closing tags like 
+            <ide-code inline>&lt;img /&gt;</ide-code>,
+            <ide-code inline>&lt;link /&gt;</ide-code>,
+            <ide-code inline>&lt;meta /&gt;</ide-code>,
+            <ide-code inline>&lt;input /&gt;</ide-code>
+            must have a slash before the closing.
+          </i18n-translate>
+          <i18n-translate li trim>
+            When using tables, rows should be wrapped in a 
+            <ide-code inline>&lt;tbody&gt;</ide-code> tag and cells
+            should be wrapped in a <ide-code inline>&lt;tr&gt;</ide-code> 
+            tag. ie. <ide-code inline>&lt;table&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;</ide-code>
+          </i18n-translate>
+          <i18n-translate li trim>
+            When using lists, items should be wrapped in a 
+            <ide-code inline>&lt;ul&gt;</ide-code> or 
+            <ide-code inline>&lt;ol&gt;</ide-code> tags.
+            ie. <ide-code inline>&lt;ul&gt;&lt;li&gt;</ide-code>
+          </i18n-translate>
+        </ul>
+
+        <tui-alert solid curved info>
+          <i class="fas fa-info-circle"></i>
+          &nbsp;
+          Any markup auto corrected by browser will cause data syncing 
+          issues with Temple.
+        </tui-alert>
+
+        <i18n-translate p trim>
+          Temple components can loosely be self closing
+          <ide-code inline>&lt;i18n-translate /&gt;</ide-code>
+          or expressed as a block
+          <ide-code inline>&lt;i18n-translate&gt;&lt;/i18n-translate&gt;</ide-code>.
+        </i18n-translate>
+
+        <h3>Attributes</h3>
+
+        <ide-app title="Markup Expressions">
+          <ide-code numbers trim >
+            &lt;a title={title} {href} {...attributes}&gt;
+              {title}
+            &lt;/a&gt;
+            &lt;i18n-translate title=title&gt;
+              {detail}
+            &lt;/i18n-translate&gt;
+          </ide-code>
+        </ide-app>
+
+        <i18n-translate p trim>
+          Attributes can be bound to expressions using the 
+          <ide-code inline>{}</ide-code> syntax. 
+          Expressions can be variables, functions, or any valid 
+          JavaScript expression. By default, attributes work exactly 
+          like their HTML counterparts.
+        </i18n-translate>
+
+        <ide-code trim >
+          &lt;button type="button" disabled&gt;Submit&lt;/button&gt;
+        </ide-code>
+        <i18n-translate p trim>
+          Traditional HTML attributes can be assigned string values or 
+          no value evaluates as <ide-code inline>true</ide-code>.
+        </i18n-translate>
+
+        <ide-code trim >
+          &lt;a title={title}&gt;Click&lt;/a&gt;
+        </ide-code>
+        <i18n-translate p trim>
+          Attributes can be assigned variable names.
+        </i18n-translate>
+
+        <ide-code trim >
+          &lt;a title=title&gt;Click&lt;/a&gt;
+        </ide-code>
+        <i18n-translate p trim>
+          Variable names do not need to be wrapped in curly braces
+          <ide-code inline>{}</ide-code>.
+        </i18n-translate>
+
+        <ide-code trim >
+          &lt;a {title}&gt;Click&lt;/a&gt;
+        </ide-code>
+        <i18n-translate p trim>
+          Attributes with the same name as a variable can be assigned
+          by just wrapping curly braces. ie. 
+          <ide-code inline>{title}</ide-code>.
+        </i18n-translate>
+
+        <ide-code trim >
+          &lt;script&gt;
+            const attributes = { target: '_blank' };
+          &lt;/script&gt;
+          &lt;a {...attributes}&gt;Click&lt;/a&gt;
+        </ide-code>
+        <i18n-translate p trim>
+          Spread operators can be used to assign multiple attributes.
+        </i18n-translate>
+
+        <ide-code numbers trim >
+          &lt;script&gt;
+            let count = 10
+            const metadata = { foo: 'bar', baz: 1, qux: true };
+            const data = () =&gt; metadata
+          &lt;/script&gt;
+          &lt;a {count} get={data} data-meta={metadata} disable={count &lt; 10}&gt;
+            Click
+          &lt;/a&gt;
+        </ide-code>
+        <i18n-translate p trim>
+          You can assign any valid JavaScript expression to an attribute.
+        </i18n-translate>
+
+        <h3>Conditionals</h3>
+
+        <ide-app title="Conditionals">
+          <ide-code numbers trim >
+            &lt;if true={count &gt; 10}&gt;
+              &lt;p&gt;Count is greater than 10&lt;/p&gt;
+            &lt;elif true={count &lt; 5} /&gt;
+              &lt;p&gt;Count is less than 5&lt;/p&gt;
+            &lt;else /&gt;
+              &lt;p&gt;Count is between 5 and 10&lt;/p&gt;
+            &lt;/if&gt;
+          </ide-code>
+        </ide-app>
+        <i18n-translate p trim>
+          Conditionals can be used to show or hide elements based on 
+          the value of a variable.
+        </i18n-translate>
+
+        <ide-code numbers trim >
+          &lt;if true={count &gt; 10}&gt;
+            &lt;p&gt;Count is greater than 10&lt;/p&gt;
+          &lt;/if&gt;
+        </ide-code>
+        <i18n-translate p trim>
+          The basic syntax for an if statement looks like this and can be 
+          <ide-code inline>truesy</ide-code> or 
+          <ide-code inline>falsey</ide-code>.
+        </i18n-translate>
+
+        <ide-code numbers trim >
+          &lt;if false={count &gt; 10}&gt;
+            &lt;p&gt;Count is not greater than 10&lt;/p&gt;
+          &lt;/if&gt;
+        </ide-code>
+        <i18n-translate p trim>
+          You can also use the <ide-code inline>false</ide-code>
+          attribute to negate the condition.
+        </i18n-translate>
+
+        <ide-code numbers trim >
+          &lt;if true={count &gt; 10}&gt;
+            &lt;p&gt;Count is greater than 10&lt;/p&gt;
+          &lt;else /&gt;
+            &lt;p&gt;Count is less than or equal to 10&lt;/p&gt;
+          &lt;/if&gt;
+        </ide-code>
+        <i18n-translate p trim>
+          You can use the <ide-code inline>else</ide-code> block to 
+          show content when the condition is false.
+        </i18n-translate>
+
+        <ide-code numbers trim >
+          &lt;if true={count &gt; 10}&gt;
+            &lt;p&gt;Count is greater than 10&lt;/p&gt;
+          &lt;elif true={count &lt; 5} /&gt;
+            &lt;p&gt;Count is less than 5&lt;/p&gt;
+          &lt;/if&gt;
+        </ide-code>
+        <i18n-translate p trim>
+          You can use the <ide-code inline>elif</ide-code> block to 
+          show content when the previous condition is false.
+        </i18n-translate>
+
+        <h3>Iterations</h3>
+
+        <ide-app title="Each">
+          <ide-code numbers trim >
+            &lt;each key=index value=article from=articles&gt;
+              &lt;h1&gt;#{index + 1} {article.title}&lt;/h1&gt;
+              &lt;p&gt;{article.body}&lt;/p&gt;
+            &lt;/each&gt;
+          </ide-code>
+        </ide-app>
+        <i18n-translate p trim>
+          The <ide-code inline>&lt;each&gt;</ide-code> block can be used 
+          to iterate over an array of items or objects.
+          The <ide-code inline>from</ide-code> attribute value is 
+          required and can be an array, object or JavaScript expression 
+          that evaluates to an array or object. Both the 
+          <ide-code inline>key</ide-code> and 
+          <ide-code inline>value</ide-code> attributes are optional.
+        </i18n-translate>
+
+        <ide-code numbers trim >
+          &lt;each value={article} from={articles}&gt;
+            &lt;h1&gt;{article.title}&lt;/h1&gt;
+            &lt;p&gt;{article.body}&lt;/p&gt;
+          &lt;/each&gt;
+        </ide-code>
+        <i18n-translate p trim>
+          The value of <ide-code inline>value</ide-code>, in this 
+          case <ide-code inline>article</ide-code> can be used 
+          only with in the block. This can be any valid JavaScript 
+          variable name.
+        </i18n-translate>
+
+        <ide-code numbers trim >
+          &lt;each key={index} from={[1, 2, 3]}&gt;
+            &lt;h1&gt;#{index} ???&lt;/h1&gt;
+          &lt;/each&gt;
+        </ide-code>
+        <i18n-translate p trim>
+          The value of <ide-code inline>key</ide-code>, in this 
+          case <ide-code inline>index</ide-code> can be used 
+          only with in the block. This can be any valid JavaScript 
+          variable name.
+        </i18n-translate>
+
+        <h3>Try/Catch</h3>
+
+        <ide-app title="Try/Catch Example">
+          <ide-code numbers trim >
+            &lt;try&gt;
+              &lt;p&gt;{mayCauseError()}&lt;/p&gt;
+            &lt;catch error={e} /&gt;
+              &lt;p&gt;Error: {e.message}&lt;/p&gt;
+            &lt;/try&gt;
+          </ide-code>
+        </ide-app>
+
+        <i18n-translate p trim>
+          The <ide-code inline>&lt;try&gt;&lt;catch&gt;</ide-code> block can 
+          be used to catch errors that occur in the block. The 
+          <ide-code inline>&lt;catch&gt;</ide-code> block is required and 
+          can be used to handle the error.
+
+          The value of <ide-code inline>error</ide-code>, in the  
+          <ide-code inline>&lt;catch&gt;</ide-code> block in this case
+          <ide-code inline>e</ide-code> is an 
+          <ide-code lang="js" inline>Error</ide-code> object
+          that can only be used with in the block. 
+        </i18n-translate>
+
         <nav class="pager">
           <a class="prev" href="/temple/docs/frequent-questions.html">
             <i class="fas fa-fw fa-chevron-left"></i>
diff --git a/docs/build/client/57e37fa233b38c87fe71.js b/docs/build/client/57e37fa233b38c87fe71.js
index 5c66554..ca8989d 100644
--- a/docs/build/client/57e37fa233b38c87fe71.js
+++ b/docs/build/client/57e37fa233b38c87fe71.js
@@ -225,11 +225,11 @@ var TempleBundle = (() => {
       };
       Object.defineProperty(exports, "__esModule", { value: true });
       var TempleElement_1 = __importDefault(require_TempleElement());
-      var TempleRegistry5 = class {
+      var TempleRegistry8 = class {
         static get elements() {
           return this._elements;
         }
-        static createComponent(definition, attributes, children3 = []) {
+        static createComponent(definition, attributes, children6 = []) {
           const tagname = definition.component[0];
           const template = document.createElement("template");
           template.innerHTML = `<${tagname}></${tagname}>`;
@@ -247,11 +247,11 @@ var TempleBundle = (() => {
           }
           component._TempleAttributes = attributes;
           component.props = attributes;
-          children3.forEach((child) => component.appendChild(child));
+          children6.forEach((child) => component.appendChild(child));
           component.register();
           return this.register(component, attributes);
         }
-        static createElement(name, attributes, children3 = []) {
+        static createElement(name, attributes, children6 = []) {
           const element = document.createElement(name);
           for (const [key, value] of Object.entries(attributes)) {
             if (typeof value === "string") {
@@ -260,7 +260,7 @@ var TempleBundle = (() => {
               element.setAttribute(key, key);
             }
           }
-          children3.filter((child) => typeof child !== "undefined").forEach((child) => element.appendChild(child));
+          children6.filter((child) => typeof child !== "undefined").forEach((child) => element.appendChild(child));
           return this.register(element, attributes);
         }
         static createText(value, escape = false) {
@@ -297,8 +297,8 @@ var TempleBundle = (() => {
           return node;
         }
       };
-      TempleRegistry5._elements = /* @__PURE__ */ new Map();
-      exports.default = TempleRegistry5;
+      TempleRegistry8._elements = /* @__PURE__ */ new Map();
+      exports.default = TempleRegistry8;
     }
   });
 
@@ -362,7 +362,7 @@ var TempleBundle = (() => {
       var TempleRegistry_1 = __importDefault(require_TempleRegistry());
       var TempleEmitter_1 = __importDefault(require_TempleEmitter());
       var data_1 = __importDefault(require_data());
-      var TempleComponent4 = class _TempleComponent extends HTMLElement {
+      var TempleComponent7 = class _TempleComponent extends HTMLElement {
         constructor() {
           super(...arguments);
           this._initiated = false;
@@ -396,9 +396,9 @@ var TempleBundle = (() => {
         get props() {
           return this._props;
         }
-        set props(props2) {
-          this._props = Object.assign({}, props2);
-          this._attributes = Object.fromEntries(Object.entries(props2).filter((entry) => typeof entry[1] === "string" || entry[1] === true));
+        set props(props6) {
+          this._props = Object.assign({}, props6);
+          this._attributes = Object.fromEntries(Object.entries(props6).filter((entry) => typeof entry[1] === "string" || entry[1] === true));
         }
         adoptedCallback() {
           this.render();
@@ -437,10 +437,10 @@ var TempleBundle = (() => {
           } else {
             TempleEmitter_1.default.emit("unmounted", this);
           }
-          const children3 = this._template().filter(Boolean);
+          const children6 = this._template().filter(Boolean);
           if (styles.length === 0) {
             this.textContent = "";
-            children3.forEach((child) => this.appendChild(child));
+            children6.forEach((child) => this.appendChild(child));
           } else {
             if (!this.shadowRoot) {
               this.attachShadow({ mode: "open" });
@@ -451,7 +451,7 @@ var TempleBundle = (() => {
             const style = document.createElement("style");
             style.innerText = styles;
             shadowRoot.appendChild(style);
-            children3.forEach((child) => {
+            children6.forEach((child) => {
               var _a;
               return (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.appendChild(child);
             });
@@ -497,7 +497,7 @@ var TempleBundle = (() => {
           }
         }
       };
-      exports.default = TempleComponent4;
+      exports.default = TempleComponent7;
     }
   });
 
@@ -529,9 +529,9 @@ var TempleBundle = (() => {
         return mod && mod.__esModule ? mod : { "default": mod };
       };
       Object.defineProperty(exports, "__esModule", { value: true });
-      exports.default = props2;
+      exports.default = props6;
       var data_1 = __importDefault(require_data());
-      function props2(component = null) {
+      function props6(component = null) {
         if (!component) {
           component = data_1.default.get("current") || null;
         }
@@ -554,9 +554,9 @@ var TempleBundle = (() => {
         return mod && mod.__esModule ? mod : { "default": mod };
       };
       Object.defineProperty(exports, "__esModule", { value: true });
-      exports.default = classnames;
+      exports.default = classnames2;
       var props_1 = __importDefault(require_props());
-      function classnames(component = null) {
+      function classnames2(component = null) {
         return (0, props_1.default)(component)["class"];
       }
     }
@@ -571,15 +571,15 @@ var TempleBundle = (() => {
       };
       Object.defineProperty(exports, "__esModule", { value: true });
       exports.innerHTML = innerHTML;
-      exports.default = children3;
+      exports.default = children6;
       var data_1 = __importDefault(require_data());
       function innerHTML(component = null) {
-        const inner = children3(component);
+        const inner = children6(component);
         const wrapper = document.createElement("template");
         wrapper.append(...inner);
         return wrapper.innerHTML;
       }
-      function children3(component = null) {
+      function children6(component = null) {
         if (!component) {
           component = data_1.default.get("current") || null;
         }
@@ -882,6 +882,1455 @@ var TempleBundle = (() => {
     }
   });
 
+  // ../../node_modules/prismjs/prism.js
+  var require_prism = __commonJS({
+    "../../node_modules/prismjs/prism.js"(exports, module) {
+      var _self = typeof window !== "undefined" ? window : typeof WorkerGlobalScope !== "undefined" && self instanceof WorkerGlobalScope ? self : {};
+      var Prism2 = function(_self2) {
+        var lang = /(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i;
+        var uniqueId = 0;
+        var plainTextGrammar = {};
+        var _2 = {
+          /**
+           * By default, Prism will attempt to highlight all code elements (by calling {@link Prism.highlightAll}) on the
+           * current page after the page finished loading. This might be a problem if e.g. you wanted to asynchronously load
+           * additional languages or plugins yourself.
+           *
+           * By setting this value to `true`, Prism will not automatically highlight all code elements on the page.
+           *
+           * You obviously have to change this value before the automatic highlighting started. To do this, you can add an
+           * empty Prism object into the global scope before loading the Prism script like this:
+           *
+           * ```js
+           * window.Prism = window.Prism || {};
+           * Prism.manual = true;
+           * // add a new <script> to load Prism's script
+           * ```
+           *
+           * @default false
+           * @type {boolean}
+           * @memberof Prism
+           * @public
+           */
+          manual: _self2.Prism && _self2.Prism.manual,
+          /**
+           * By default, if Prism is in a web worker, it assumes that it is in a worker it created itself, so it uses
+           * `addEventListener` to communicate with its parent instance. However, if you're using Prism manually in your
+           * own worker, you don't want it to do this.
+           *
+           * By setting this value to `true`, Prism will not add its own listeners to the worker.
+           *
+           * You obviously have to change this value before Prism executes. To do this, you can add an
+           * empty Prism object into the global scope before loading the Prism script like this:
+           *
+           * ```js
+           * window.Prism = window.Prism || {};
+           * Prism.disableWorkerMessageHandler = true;
+           * // Load Prism's script
+           * ```
+           *
+           * @default false
+           * @type {boolean}
+           * @memberof Prism
+           * @public
+           */
+          disableWorkerMessageHandler: _self2.Prism && _self2.Prism.disableWorkerMessageHandler,
+          /**
+           * A namespace for utility methods.
+           *
+           * All function in this namespace that are not explicitly marked as _public_ are for __internal use only__ and may
+           * change or disappear at any time.
+           *
+           * @namespace
+           * @memberof Prism
+           */
+          util: {
+            encode: function encode(tokens) {
+              if (tokens instanceof Token) {
+                return new Token(tokens.type, encode(tokens.content), tokens.alias);
+              } else if (Array.isArray(tokens)) {
+                return tokens.map(encode);
+              } else {
+                return tokens.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/\u00a0/g, " ");
+              }
+            },
+            /**
+             * Returns the name of the type of the given value.
+             *
+             * @param {any} o
+             * @returns {string}
+             * @example
+             * type(null)      === 'Null'
+             * type(undefined) === 'Undefined'
+             * type(123)       === 'Number'
+             * type('foo')     === 'String'
+             * type(true)      === 'Boolean'
+             * type([1, 2])    === 'Array'
+             * type({})        === 'Object'
+             * type(String)    === 'Function'
+             * type(/abc+/)    === 'RegExp'
+             */
+            type: function(o) {
+              return Object.prototype.toString.call(o).slice(8, -1);
+            },
+            /**
+             * Returns a unique number for the given object. Later calls will still return the same number.
+             *
+             * @param {Object} obj
+             * @returns {number}
+             */
+            objId: function(obj) {
+              if (!obj["__id"]) {
+                Object.defineProperty(obj, "__id", { value: ++uniqueId });
+              }
+              return obj["__id"];
+            },
+            /**
+             * Creates a deep clone of the given object.
+             *
+             * The main intended use of this function is to clone language definitions.
+             *
+             * @param {T} o
+             * @param {Record<number, any>} [visited]
+             * @returns {T}
+             * @template T
+             */
+            clone: function deepClone(o, visited) {
+              visited = visited || {};
+              var clone;
+              var id;
+              switch (_2.util.type(o)) {
+                case "Object":
+                  id = _2.util.objId(o);
+                  if (visited[id]) {
+                    return visited[id];
+                  }
+                  clone = /** @type {Record<string, any>} */
+                  {};
+                  visited[id] = clone;
+                  for (var key in o) {
+                    if (o.hasOwnProperty(key)) {
+                      clone[key] = deepClone(o[key], visited);
+                    }
+                  }
+                  return (
+                    /** @type {any} */
+                    clone
+                  );
+                case "Array":
+                  id = _2.util.objId(o);
+                  if (visited[id]) {
+                    return visited[id];
+                  }
+                  clone = [];
+                  visited[id] = clone;
+                  /** @type {Array} */
+                  /** @type {any} */
+                  o.forEach(function(v, i) {
+                    clone[i] = deepClone(v, visited);
+                  });
+                  return (
+                    /** @type {any} */
+                    clone
+                  );
+                default:
+                  return o;
+              }
+            },
+            /**
+             * Returns the Prism language of the given element set by a `language-xxxx` or `lang-xxxx` class.
+             *
+             * If no language is set for the element or the element is `null` or `undefined`, `none` will be returned.
+             *
+             * @param {Element} element
+             * @returns {string}
+             */
+            getLanguage: function(element) {
+              while (element) {
+                var m = lang.exec(element.className);
+                if (m) {
+                  return m[1].toLowerCase();
+                }
+                element = element.parentElement;
+              }
+              return "none";
+            },
+            /**
+             * Sets the Prism `language-xxxx` class of the given element.
+             *
+             * @param {Element} element
+             * @param {string} language
+             * @returns {void}
+             */
+            setLanguage: function(element, language) {
+              element.className = element.className.replace(RegExp(lang, "gi"), "");
+              element.classList.add("language-" + language);
+            },
+            /**
+             * Returns the script element that is currently executing.
+             *
+             * This does __not__ work for line script element.
+             *
+             * @returns {HTMLScriptElement | null}
+             */
+            currentScript: function() {
+              if (typeof document === "undefined") {
+                return null;
+              }
+              if ("currentScript" in document && 1 < 2) {
+                return (
+                  /** @type {any} */
+                  document.currentScript
+                );
+              }
+              try {
+                throw new Error();
+              } catch (err) {
+                var src = (/at [^(\r\n]*\((.*):[^:]+:[^:]+\)$/i.exec(err.stack) || [])[1];
+                if (src) {
+                  var scripts = document.getElementsByTagName("script");
+                  for (var i in scripts) {
+                    if (scripts[i].src == src) {
+                      return scripts[i];
+                    }
+                  }
+                }
+                return null;
+              }
+            },
+            /**
+             * Returns whether a given class is active for `element`.
+             *
+             * The class can be activated if `element` or one of its ancestors has the given class and it can be deactivated
+             * if `element` or one of its ancestors has the negated version of the given class. The _negated version_ of the
+             * given class is just the given class with a `no-` prefix.
+             *
+             * Whether the class is active is determined by the closest ancestor of `element` (where `element` itself is
+             * closest ancestor) that has the given class or the negated version of it. If neither `element` nor any of its
+             * ancestors have the given class or the negated version of it, then the default activation will be returned.
+             *
+             * In the paradoxical situation where the closest ancestor contains __both__ the given class and the negated
+             * version of it, the class is considered active.
+             *
+             * @param {Element} element
+             * @param {string} className
+             * @param {boolean} [defaultActivation=false]
+             * @returns {boolean}
+             */
+            isActive: function(element, className, defaultActivation) {
+              var no = "no-" + className;
+              while (element) {
+                var classList = element.classList;
+                if (classList.contains(className)) {
+                  return true;
+                }
+                if (classList.contains(no)) {
+                  return false;
+                }
+                element = element.parentElement;
+              }
+              return !!defaultActivation;
+            }
+          },
+          /**
+           * This namespace contains all currently loaded languages and the some helper functions to create and modify languages.
+           *
+           * @namespace
+           * @memberof Prism
+           * @public
+           */
+          languages: {
+            /**
+             * The grammar for plain, unformatted text.
+             */
+            plain: plainTextGrammar,
+            plaintext: plainTextGrammar,
+            text: plainTextGrammar,
+            txt: plainTextGrammar,
+            /**
+             * Creates a deep copy of the language with the given id and appends the given tokens.
+             *
+             * If a token in `redef` also appears in the copied language, then the existing token in the copied language
+             * will be overwritten at its original position.
+             *
+             * ## Best practices
+             *
+             * Since the position of overwriting tokens (token in `redef` that overwrite tokens in the copied language)
+             * doesn't matter, they can technically be in any order. However, this can be confusing to others that trying to
+             * understand the language definition because, normally, the order of tokens matters in Prism grammars.
+             *
+             * Therefore, it is encouraged to order overwriting tokens according to the positions of the overwritten tokens.
+             * Furthermore, all non-overwriting tokens should be placed after the overwriting ones.
+             *
+             * @param {string} id The id of the language to extend. This has to be a key in `Prism.languages`.
+             * @param {Grammar} redef The new tokens to append.
+             * @returns {Grammar} The new language created.
+             * @public
+             * @example
+             * Prism.languages['css-with-colors'] = Prism.languages.extend('css', {
+             *     // Prism.languages.css already has a 'comment' token, so this token will overwrite CSS' 'comment' token
+             *     // at its original position
+             *     'comment': { ... },
+             *     // CSS doesn't have a 'color' token, so this token will be appended
+             *     'color': /\b(?:red|green|blue)\b/
+             * });
+             */
+            extend: function(id, redef) {
+              var lang2 = _2.util.clone(_2.languages[id]);
+              for (var key in redef) {
+                lang2[key] = redef[key];
+              }
+              return lang2;
+            },
+            /**
+             * Inserts tokens _before_ another token in a language definition or any other grammar.
+             *
+             * ## Usage
+             *
+             * This helper method makes it easy to modify existing languages. For example, the CSS language definition
+             * not only defines CSS highlighting for CSS documents, but also needs to define highlighting for CSS embedded
+             * in HTML through `<style>` elements. To do this, it needs to modify `Prism.languages.markup` and add the
+             * appropriate tokens. However, `Prism.languages.markup` is a regular JavaScript object literal, so if you do
+             * this:
+             *
+             * ```js
+             * Prism.languages.markup.style = {
+             *     // token
+             * };
+             * ```
+             *
+             * then the `style` token will be added (and processed) at the end. `insertBefore` allows you to insert tokens
+             * before existing tokens. For the CSS example above, you would use it like this:
+             *
+             * ```js
+             * Prism.languages.insertBefore('markup', 'cdata', {
+             *     'style': {
+             *         // token
+             *     }
+             * });
+             * ```
+             *
+             * ## Special cases
+             *
+             * If the grammars of `inside` and `insert` have tokens with the same name, the tokens in `inside`'s grammar
+             * will be ignored.
+             *
+             * This behavior can be used to insert tokens after `before`:
+             *
+             * ```js
+             * Prism.languages.insertBefore('markup', 'comment', {
+             *     'comment': Prism.languages.markup.comment,
+             *     // tokens after 'comment'
+             * });
+             * ```
+             *
+             * ## Limitations
+             *
+             * The main problem `insertBefore` has to solve is iteration order. Since ES2015, the iteration order for object
+             * properties is guaranteed to be the insertion order (except for integer keys) but some browsers behave
+             * differently when keys are deleted and re-inserted. So `insertBefore` can't be implemented by temporarily
+             * deleting properties which is necessary to insert at arbitrary positions.
+             *
+             * To solve this problem, `insertBefore` doesn't actually insert the given tokens into the target object.
+             * Instead, it will create a new object and replace all references to the target object with the new one. This
+             * can be done without temporarily deleting properties, so the iteration order is well-defined.
+             *
+             * However, only references that can be reached from `Prism.languages` or `insert` will be replaced. I.e. if
+             * you hold the target object in a variable, then the value of the variable will not change.
+             *
+             * ```js
+             * var oldMarkup = Prism.languages.markup;
+             * var newMarkup = Prism.languages.insertBefore('markup', 'comment', { ... });
+             *
+             * assert(oldMarkup !== Prism.languages.markup);
+             * assert(newMarkup === Prism.languages.markup);
+             * ```
+             *
+             * @param {string} inside The property of `root` (e.g. a language id in `Prism.languages`) that contains the
+             * object to be modified.
+             * @param {string} before The key to insert before.
+             * @param {Grammar} insert An object containing the key-value pairs to be inserted.
+             * @param {Object<string, any>} [root] The object containing `inside`, i.e. the object that contains the
+             * object to be modified.
+             *
+             * Defaults to `Prism.languages`.
+             * @returns {Grammar} The new grammar object.
+             * @public
+             */
+            insertBefore: function(inside, before, insert, root) {
+              root = root || /** @type {any} */
+              _2.languages;
+              var grammar = root[inside];
+              var ret = {};
+              for (var token in grammar) {
+                if (grammar.hasOwnProperty(token)) {
+                  if (token == before) {
+                    for (var newToken in insert) {
+                      if (insert.hasOwnProperty(newToken)) {
+                        ret[newToken] = insert[newToken];
+                      }
+                    }
+                  }
+                  if (!insert.hasOwnProperty(token)) {
+                    ret[token] = grammar[token];
+                  }
+                }
+              }
+              var old = root[inside];
+              root[inside] = ret;
+              _2.languages.DFS(_2.languages, function(key, value) {
+                if (value === old && key != inside) {
+                  this[key] = ret;
+                }
+              });
+              return ret;
+            },
+            // Traverse a language definition with Depth First Search
+            DFS: function DFS(o, callback, type, visited) {
+              visited = visited || {};
+              var objId = _2.util.objId;
+              for (var i in o) {
+                if (o.hasOwnProperty(i)) {
+                  callback.call(o, i, o[i], type || i);
+                  var property = o[i];
+                  var propertyType = _2.util.type(property);
+                  if (propertyType === "Object" && !visited[objId(property)]) {
+                    visited[objId(property)] = true;
+                    DFS(property, callback, null, visited);
+                  } else if (propertyType === "Array" && !visited[objId(property)]) {
+                    visited[objId(property)] = true;
+                    DFS(property, callback, i, visited);
+                  }
+                }
+              }
+            }
+          },
+          plugins: {},
+          /**
+           * This is the most high-level function in Prism’s API.
+           * It fetches all the elements that have a `.language-xxxx` class and then calls {@link Prism.highlightElement} on
+           * each one of them.
+           *
+           * This is equivalent to `Prism.highlightAllUnder(document, async, callback)`.
+           *
+           * @param {boolean} [async=false] Same as in {@link Prism.highlightAllUnder}.
+           * @param {HighlightCallback} [callback] Same as in {@link Prism.highlightAllUnder}.
+           * @memberof Prism
+           * @public
+           */
+          highlightAll: function(async, callback) {
+            _2.highlightAllUnder(document, async, callback);
+          },
+          /**
+           * Fetches all the descendants of `container` that have a `.language-xxxx` class and then calls
+           * {@link Prism.highlightElement} on each one of them.
+           *
+           * The following hooks will be run:
+           * 1. `before-highlightall`
+           * 2. `before-all-elements-highlight`
+           * 3. All hooks of {@link Prism.highlightElement} for each element.
+           *
+           * @param {ParentNode} container The root element, whose descendants that have a `.language-xxxx` class will be highlighted.
+           * @param {boolean} [async=false] Whether each element is to be highlighted asynchronously using Web Workers.
+           * @param {HighlightCallback} [callback] An optional callback to be invoked on each element after its highlighting is done.
+           * @memberof Prism
+           * @public
+           */
+          highlightAllUnder: function(container, async, callback) {
+            var env = {
+              callback,
+              container,
+              selector: 'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'
+            };
+            _2.hooks.run("before-highlightall", env);
+            env.elements = Array.prototype.slice.apply(env.container.querySelectorAll(env.selector));
+            _2.hooks.run("before-all-elements-highlight", env);
+            for (var i = 0, element; element = env.elements[i++]; ) {
+              _2.highlightElement(element, async === true, env.callback);
+            }
+          },
+          /**
+           * Highlights the code inside a single element.
+           *
+           * The following hooks will be run:
+           * 1. `before-sanity-check`
+           * 2. `before-highlight`
+           * 3. All hooks of {@link Prism.highlight}. These hooks will be run by an asynchronous worker if `async` is `true`.
+           * 4. `before-insert`
+           * 5. `after-highlight`
+           * 6. `complete`
+           *
+           * Some the above hooks will be skipped if the element doesn't contain any text or there is no grammar loaded for
+           * the element's language.
+           *
+           * @param {Element} element The element containing the code.
+           * It must have a class of `language-xxxx` to be processed, where `xxxx` is a valid language identifier.
+           * @param {boolean} [async=false] Whether the element is to be highlighted asynchronously using Web Workers
+           * to improve performance and avoid blocking the UI when highlighting very large chunks of code. This option is
+           * [disabled by default](https://prismjs.com/faq.html#why-is-asynchronous-highlighting-disabled-by-default).
+           *
+           * Note: All language definitions required to highlight the code must be included in the main `prism.js` file for
+           * asynchronous highlighting to work. You can build your own bundle on the
+           * [Download page](https://prismjs.com/download.html).
+           * @param {HighlightCallback} [callback] An optional callback to be invoked after the highlighting is done.
+           * Mostly useful when `async` is `true`, since in that case, the highlighting is done asynchronously.
+           * @memberof Prism
+           * @public
+           */
+          highlightElement: function(element, async, callback) {
+            var language = _2.util.getLanguage(element);
+            var grammar = _2.languages[language];
+            _2.util.setLanguage(element, language);
+            var parent = element.parentElement;
+            if (parent && parent.nodeName.toLowerCase() === "pre") {
+              _2.util.setLanguage(parent, language);
+            }
+            var code = element.textContent;
+            var env = {
+              element,
+              language,
+              grammar,
+              code
+            };
+            function insertHighlightedCode(highlightedCode) {
+              env.highlightedCode = highlightedCode;
+              _2.hooks.run("before-insert", env);
+              env.element.innerHTML = env.highlightedCode;
+              _2.hooks.run("after-highlight", env);
+              _2.hooks.run("complete", env);
+              callback && callback.call(env.element);
+            }
+            _2.hooks.run("before-sanity-check", env);
+            parent = env.element.parentElement;
+            if (parent && parent.nodeName.toLowerCase() === "pre" && !parent.hasAttribute("tabindex")) {
+              parent.setAttribute("tabindex", "0");
+            }
+            if (!env.code) {
+              _2.hooks.run("complete", env);
+              callback && callback.call(env.element);
+              return;
+            }
+            _2.hooks.run("before-highlight", env);
+            if (!env.grammar) {
+              insertHighlightedCode(_2.util.encode(env.code));
+              return;
+            }
+            if (async && _self2.Worker) {
+              var worker = new Worker(_2.filename);
+              worker.onmessage = function(evt) {
+                insertHighlightedCode(evt.data);
+              };
+              worker.postMessage(JSON.stringify({
+                language: env.language,
+                code: env.code,
+                immediateClose: true
+              }));
+            } else {
+              insertHighlightedCode(_2.highlight(env.code, env.grammar, env.language));
+            }
+          },
+          /**
+           * Low-level function, only use if you know what you’re doing. It accepts a string of text as input
+           * and the language definitions to use, and returns a string with the HTML produced.
+           *
+           * The following hooks will be run:
+           * 1. `before-tokenize`
+           * 2. `after-tokenize`
+           * 3. `wrap`: On each {@link Token}.
+           *
+           * @param {string} text A string with the code to be highlighted.
+           * @param {Grammar} grammar An object containing the tokens to use.
+           *
+           * Usually a language definition like `Prism.languages.markup`.
+           * @param {string} language The name of the language definition passed to `grammar`.
+           * @returns {string} The highlighted HTML.
+           * @memberof Prism
+           * @public
+           * @example
+           * Prism.highlight('var foo = true;', Prism.languages.javascript, 'javascript');
+           */
+          highlight: function(text, grammar, language) {
+            var env = {
+              code: text,
+              grammar,
+              language
+            };
+            _2.hooks.run("before-tokenize", env);
+            if (!env.grammar) {
+              throw new Error('The language "' + env.language + '" has no grammar.');
+            }
+            env.tokens = _2.tokenize(env.code, env.grammar);
+            _2.hooks.run("after-tokenize", env);
+            return Token.stringify(_2.util.encode(env.tokens), env.language);
+          },
+          /**
+           * This is the heart of Prism, and the most low-level function you can use. It accepts a string of text as input
+           * and the language definitions to use, and returns an array with the tokenized code.
+           *
+           * When the language definition includes nested tokens, the function is called recursively on each of these tokens.
+           *
+           * This method could be useful in other contexts as well, as a very crude parser.
+           *
+           * @param {string} text A string with the code to be highlighted.
+           * @param {Grammar} grammar An object containing the tokens to use.
+           *
+           * Usually a language definition like `Prism.languages.markup`.
+           * @returns {TokenStream} An array of strings and tokens, a token stream.
+           * @memberof Prism
+           * @public
+           * @example
+           * let code = `var foo = 0;`;
+           * let tokens = Prism.tokenize(code, Prism.languages.javascript);
+           * tokens.forEach(token => {
+           *     if (token instanceof Prism.Token && token.type === 'number') {
+           *         console.log(`Found numeric literal: ${token.content}`);
+           *     }
+           * });
+           */
+          tokenize: function(text, grammar) {
+            var rest = grammar.rest;
+            if (rest) {
+              for (var token in rest) {
+                grammar[token] = rest[token];
+              }
+              delete grammar.rest;
+            }
+            var tokenList = new LinkedList();
+            addAfter(tokenList, tokenList.head, text);
+            matchGrammar(text, tokenList, grammar, tokenList.head, 0);
+            return toArray(tokenList);
+          },
+          /**
+           * @namespace
+           * @memberof Prism
+           * @public
+           */
+          hooks: {
+            all: {},
+            /**
+             * Adds the given callback to the list of callbacks for the given hook.
+             *
+             * The callback will be invoked when the hook it is registered for is run.
+             * Hooks are usually directly run by a highlight function but you can also run hooks yourself.
+             *
+             * One callback function can be registered to multiple hooks and the same hook multiple times.
+             *
+             * @param {string} name The name of the hook.
+             * @param {HookCallback} callback The callback function which is given environment variables.
+             * @public
+             */
+            add: function(name, callback) {
+              var hooks = _2.hooks.all;
+              hooks[name] = hooks[name] || [];
+              hooks[name].push(callback);
+            },
+            /**
+             * Runs a hook invoking all registered callbacks with the given environment variables.
+             *
+             * Callbacks will be invoked synchronously and in the order in which they were registered.
+             *
+             * @param {string} name The name of the hook.
+             * @param {Object<string, any>} env The environment variables of the hook passed to all callbacks registered.
+             * @public
+             */
+            run: function(name, env) {
+              var callbacks = _2.hooks.all[name];
+              if (!callbacks || !callbacks.length) {
+                return;
+              }
+              for (var i = 0, callback; callback = callbacks[i++]; ) {
+                callback(env);
+              }
+            }
+          },
+          Token
+        };
+        _self2.Prism = _2;
+        function Token(type, content, alias, matchedStr) {
+          this.type = type;
+          this.content = content;
+          this.alias = alias;
+          this.length = (matchedStr || "").length | 0;
+        }
+        Token.stringify = function stringify(o, language) {
+          if (typeof o == "string") {
+            return o;
+          }
+          if (Array.isArray(o)) {
+            var s = "";
+            o.forEach(function(e) {
+              s += stringify(e, language);
+            });
+            return s;
+          }
+          var env = {
+            type: o.type,
+            content: stringify(o.content, language),
+            tag: "span",
+            classes: ["token", o.type],
+            attributes: {},
+            language
+          };
+          var aliases = o.alias;
+          if (aliases) {
+            if (Array.isArray(aliases)) {
+              Array.prototype.push.apply(env.classes, aliases);
+            } else {
+              env.classes.push(aliases);
+            }
+          }
+          _2.hooks.run("wrap", env);
+          var attributes = "";
+          for (var name in env.attributes) {
+            attributes += " " + name + '="' + (env.attributes[name] || "").replace(/"/g, "&quot;") + '"';
+          }
+          return "<" + env.tag + ' class="' + env.classes.join(" ") + '"' + attributes + ">" + env.content + "</" + env.tag + ">";
+        };
+        function matchPattern(pattern, pos, text, lookbehind) {
+          pattern.lastIndex = pos;
+          var match = pattern.exec(text);
+          if (match && lookbehind && match[1]) {
+            var lookbehindLength = match[1].length;
+            match.index += lookbehindLength;
+            match[0] = match[0].slice(lookbehindLength);
+          }
+          return match;
+        }
+        function matchGrammar(text, tokenList, grammar, startNode, startPos, rematch) {
+          for (var token in grammar) {
+            if (!grammar.hasOwnProperty(token) || !grammar[token]) {
+              continue;
+            }
+            var patterns = grammar[token];
+            patterns = Array.isArray(patterns) ? patterns : [patterns];
+            for (var j = 0; j < patterns.length; ++j) {
+              if (rematch && rematch.cause == token + "," + j) {
+                return;
+              }
+              var patternObj = patterns[j];
+              var inside = patternObj.inside;
+              var lookbehind = !!patternObj.lookbehind;
+              var greedy = !!patternObj.greedy;
+              var alias = patternObj.alias;
+              if (greedy && !patternObj.pattern.global) {
+                var flags = patternObj.pattern.toString().match(/[imsuy]*$/)[0];
+                patternObj.pattern = RegExp(patternObj.pattern.source, flags + "g");
+              }
+              var pattern = patternObj.pattern || patternObj;
+              for (var currentNode = startNode.next, pos = startPos; currentNode !== tokenList.tail; pos += currentNode.value.length, currentNode = currentNode.next) {
+                if (rematch && pos >= rematch.reach) {
+                  break;
+                }
+                var str = currentNode.value;
+                if (tokenList.length > text.length) {
+                  return;
+                }
+                if (str instanceof Token) {
+                  continue;
+                }
+                var removeCount = 1;
+                var match;
+                if (greedy) {
+                  match = matchPattern(pattern, pos, text, lookbehind);
+                  if (!match || match.index >= text.length) {
+                    break;
+                  }
+                  var from = match.index;
+                  var to = match.index + match[0].length;
+                  var p = pos;
+                  p += currentNode.value.length;
+                  while (from >= p) {
+                    currentNode = currentNode.next;
+                    p += currentNode.value.length;
+                  }
+                  p -= currentNode.value.length;
+                  pos = p;
+                  if (currentNode.value instanceof Token) {
+                    continue;
+                  }
+                  for (var k = currentNode; k !== tokenList.tail && (p < to || typeof k.value === "string"); k = k.next) {
+                    removeCount++;
+                    p += k.value.length;
+                  }
+                  removeCount--;
+                  str = text.slice(pos, p);
+                  match.index -= pos;
+                } else {
+                  match = matchPattern(pattern, 0, str, lookbehind);
+                  if (!match) {
+                    continue;
+                  }
+                }
+                var from = match.index;
+                var matchStr = match[0];
+                var before = str.slice(0, from);
+                var after = str.slice(from + matchStr.length);
+                var reach = pos + str.length;
+                if (rematch && reach > rematch.reach) {
+                  rematch.reach = reach;
+                }
+                var removeFrom = currentNode.prev;
+                if (before) {
+                  removeFrom = addAfter(tokenList, removeFrom, before);
+                  pos += before.length;
+                }
+                removeRange(tokenList, removeFrom, removeCount);
+                var wrapped = new Token(token, inside ? _2.tokenize(matchStr, inside) : matchStr, alias, matchStr);
+                currentNode = addAfter(tokenList, removeFrom, wrapped);
+                if (after) {
+                  addAfter(tokenList, currentNode, after);
+                }
+                if (removeCount > 1) {
+                  var nestedRematch = {
+                    cause: token + "," + j,
+                    reach
+                  };
+                  matchGrammar(text, tokenList, grammar, currentNode.prev, pos, nestedRematch);
+                  if (rematch && nestedRematch.reach > rematch.reach) {
+                    rematch.reach = nestedRematch.reach;
+                  }
+                }
+              }
+            }
+          }
+        }
+        function LinkedList() {
+          var head = { value: null, prev: null, next: null };
+          var tail = { value: null, prev: head, next: null };
+          head.next = tail;
+          this.head = head;
+          this.tail = tail;
+          this.length = 0;
+        }
+        function addAfter(list, node, value) {
+          var next = node.next;
+          var newNode = { value, prev: node, next };
+          node.next = newNode;
+          next.prev = newNode;
+          list.length++;
+          return newNode;
+        }
+        function removeRange(list, node, count) {
+          var next = node.next;
+          for (var i = 0; i < count && next !== list.tail; i++) {
+            next = next.next;
+          }
+          node.next = next;
+          next.prev = node;
+          list.length -= i;
+        }
+        function toArray(list) {
+          var array = [];
+          var node = list.head.next;
+          while (node !== list.tail) {
+            array.push(node.value);
+            node = node.next;
+          }
+          return array;
+        }
+        if (!_self2.document) {
+          if (!_self2.addEventListener) {
+            return _2;
+          }
+          if (!_2.disableWorkerMessageHandler) {
+            _self2.addEventListener("message", function(evt) {
+              var message = JSON.parse(evt.data);
+              var lang2 = message.language;
+              var code = message.code;
+              var immediateClose = message.immediateClose;
+              _self2.postMessage(_2.highlight(code, _2.languages[lang2], lang2));
+              if (immediateClose) {
+                _self2.close();
+              }
+            }, false);
+          }
+          return _2;
+        }
+        var script = _2.util.currentScript();
+        if (script) {
+          _2.filename = script.src;
+          if (script.hasAttribute("data-manual")) {
+            _2.manual = true;
+          }
+        }
+        function highlightAutomaticallyCallback() {
+          if (!_2.manual) {
+            _2.highlightAll();
+          }
+        }
+        if (!_2.manual) {
+          var readyState = document.readyState;
+          if (readyState === "loading" || readyState === "interactive" && script && script.defer) {
+            document.addEventListener("DOMContentLoaded", highlightAutomaticallyCallback);
+          } else {
+            if (window.requestAnimationFrame) {
+              window.requestAnimationFrame(highlightAutomaticallyCallback);
+            } else {
+              window.setTimeout(highlightAutomaticallyCallback, 16);
+            }
+          }
+        }
+        return _2;
+      }(_self);
+      if (typeof module !== "undefined" && module.exports) {
+        module.exports = Prism2;
+      }
+      if (typeof global !== "undefined") {
+        global.Prism = Prism2;
+      }
+      Prism2.languages.markup = {
+        "comment": {
+          pattern: /<!--(?:(?!<!--)[\s\S])*?-->/,
+          greedy: true
+        },
+        "prolog": {
+          pattern: /<\?[\s\S]+?\?>/,
+          greedy: true
+        },
+        "doctype": {
+          // https://www.w3.org/TR/xml/#NT-doctypedecl
+          pattern: /<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,
+          greedy: true,
+          inside: {
+            "internal-subset": {
+              pattern: /(^[^\[]*\[)[\s\S]+(?=\]>$)/,
+              lookbehind: true,
+              greedy: true,
+              inside: null
+              // see below
+            },
+            "string": {
+              pattern: /"[^"]*"|'[^']*'/,
+              greedy: true
+            },
+            "punctuation": /^<!|>$|[[\]]/,
+            "doctype-tag": /^DOCTYPE/i,
+            "name": /[^\s<>'"]+/
+          }
+        },
+        "cdata": {
+          pattern: /<!\[CDATA\[[\s\S]*?\]\]>/i,
+          greedy: true
+        },
+        "tag": {
+          pattern: /<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,
+          greedy: true,
+          inside: {
+            "tag": {
+              pattern: /^<\/?[^\s>\/]+/,
+              inside: {
+                "punctuation": /^<\/?/,
+                "namespace": /^[^\s>\/:]+:/
+              }
+            },
+            "special-attr": [],
+            "attr-value": {
+              pattern: /=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,
+              inside: {
+                "punctuation": [
+                  {
+                    pattern: /^=/,
+                    alias: "attr-equals"
+                  },
+                  {
+                    pattern: /^(\s*)["']|["']$/,
+                    lookbehind: true
+                  }
+                ]
+              }
+            },
+            "punctuation": /\/?>/,
+            "attr-name": {
+              pattern: /[^\s>\/]+/,
+              inside: {
+                "namespace": /^[^\s>\/:]+:/
+              }
+            }
+          }
+        },
+        "entity": [
+          {
+            pattern: /&[\da-z]{1,8};/i,
+            alias: "named-entity"
+          },
+          /&#x?[\da-f]{1,8};/i
+        ]
+      };
+      Prism2.languages.markup["tag"].inside["attr-value"].inside["entity"] = Prism2.languages.markup["entity"];
+      Prism2.languages.markup["doctype"].inside["internal-subset"].inside = Prism2.languages.markup;
+      Prism2.hooks.add("wrap", function(env) {
+        if (env.type === "entity") {
+          env.attributes["title"] = env.content.replace(/&amp;/, "&");
+        }
+      });
+      Object.defineProperty(Prism2.languages.markup.tag, "addInlined", {
+        /**
+         * Adds an inlined language to markup.
+         *
+         * An example of an inlined language is CSS with `<style>` tags.
+         *
+         * @param {string} tagName The name of the tag that contains the inlined language. This name will be treated as
+         * case insensitive.
+         * @param {string} lang The language key.
+         * @example
+         * addInlined('style', 'css');
+         */
+        value: function addInlined(tagName, lang) {
+          var includedCdataInside = {};
+          includedCdataInside["language-" + lang] = {
+            pattern: /(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,
+            lookbehind: true,
+            inside: Prism2.languages[lang]
+          };
+          includedCdataInside["cdata"] = /^<!\[CDATA\[|\]\]>$/i;
+          var inside = {
+            "included-cdata": {
+              pattern: /<!\[CDATA\[[\s\S]*?\]\]>/i,
+              inside: includedCdataInside
+            }
+          };
+          inside["language-" + lang] = {
+            pattern: /[\s\S]+/,
+            inside: Prism2.languages[lang]
+          };
+          var def = {};
+          def[tagName] = {
+            pattern: RegExp(/(<__[^>]*>)(?:<!\[CDATA\[(?:[^\]]|\](?!\]>))*\]\]>|(?!<!\[CDATA\[)[\s\S])*?(?=<\/__>)/.source.replace(/__/g, function() {
+              return tagName;
+            }), "i"),
+            lookbehind: true,
+            greedy: true,
+            inside
+          };
+          Prism2.languages.insertBefore("markup", "cdata", def);
+        }
+      });
+      Object.defineProperty(Prism2.languages.markup.tag, "addAttribute", {
+        /**
+         * Adds an pattern to highlight languages embedded in HTML attributes.
+         *
+         * An example of an inlined language is CSS with `style` attributes.
+         *
+         * @param {string} attrName The name of the tag that contains the inlined language. This name will be treated as
+         * case insensitive.
+         * @param {string} lang The language key.
+         * @example
+         * addAttribute('style', 'css');
+         */
+        value: function(attrName, lang) {
+          Prism2.languages.markup.tag.inside["special-attr"].push({
+            pattern: RegExp(
+              /(^|["'\s])/.source + "(?:" + attrName + ")" + /\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,
+              "i"
+            ),
+            lookbehind: true,
+            inside: {
+              "attr-name": /^[^\s=]+/,
+              "attr-value": {
+                pattern: /=[\s\S]+/,
+                inside: {
+                  "value": {
+                    pattern: /(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,
+                    lookbehind: true,
+                    alias: [lang, "language-" + lang],
+                    inside: Prism2.languages[lang]
+                  },
+                  "punctuation": [
+                    {
+                      pattern: /^=/,
+                      alias: "attr-equals"
+                    },
+                    /"|'/
+                  ]
+                }
+              }
+            }
+          });
+        }
+      });
+      Prism2.languages.html = Prism2.languages.markup;
+      Prism2.languages.mathml = Prism2.languages.markup;
+      Prism2.languages.svg = Prism2.languages.markup;
+      Prism2.languages.xml = Prism2.languages.extend("markup", {});
+      Prism2.languages.ssml = Prism2.languages.xml;
+      Prism2.languages.atom = Prism2.languages.xml;
+      Prism2.languages.rss = Prism2.languages.xml;
+      (function(Prism3) {
+        var string = /(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;
+        Prism3.languages.css = {
+          "comment": /\/\*[\s\S]*?\*\//,
+          "atrule": {
+            pattern: RegExp("@[\\w-](?:" + /[^;{\s"']|\s+(?!\s)/.source + "|" + string.source + ")*?" + /(?:;|(?=\s*\{))/.source),
+            inside: {
+              "rule": /^@[\w-]+/,
+              "selector-function-argument": {
+                pattern: /(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,
+                lookbehind: true,
+                alias: "selector"
+              },
+              "keyword": {
+                pattern: /(^|[^\w-])(?:and|not|only|or)(?![\w-])/,
+                lookbehind: true
+              }
+              // See rest below
+            }
+          },
+          "url": {
+            // https://drafts.csswg.org/css-values-3/#urls
+            pattern: RegExp("\\burl\\((?:" + string.source + "|" + /(?:[^\\\r\n()"']|\\[\s\S])*/.source + ")\\)", "i"),
+            greedy: true,
+            inside: {
+              "function": /^url/i,
+              "punctuation": /^\(|\)$/,
+              "string": {
+                pattern: RegExp("^" + string.source + "$"),
+                alias: "url"
+              }
+            }
+          },
+          "selector": {
+            pattern: RegExp(`(^|[{}\\s])[^{}\\s](?:[^{};"'\\s]|\\s+(?![\\s{])|` + string.source + ")*(?=\\s*\\{)"),
+            lookbehind: true
+          },
+          "string": {
+            pattern: string,
+            greedy: true
+          },
+          "property": {
+            pattern: /(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,
+            lookbehind: true
+          },
+          "important": /!important\b/i,
+          "function": {
+            pattern: /(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,
+            lookbehind: true
+          },
+          "punctuation": /[(){};:,]/
+        };
+        Prism3.languages.css["atrule"].inside.rest = Prism3.languages.css;
+        var markup = Prism3.languages.markup;
+        if (markup) {
+          markup.tag.addInlined("style", "css");
+          markup.tag.addAttribute("style", "css");
+        }
+      })(Prism2);
+      Prism2.languages.clike = {
+        "comment": [
+          {
+            pattern: /(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,
+            lookbehind: true,
+            greedy: true
+          },
+          {
+            pattern: /(^|[^\\:])\/\/.*/,
+            lookbehind: true,
+            greedy: true
+          }
+        ],
+        "string": {
+          pattern: /(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
+          greedy: true
+        },
+        "class-name": {
+          pattern: /(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,
+          lookbehind: true,
+          inside: {
+            "punctuation": /[.\\]/
+          }
+        },
+        "keyword": /\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,
+        "boolean": /\b(?:false|true)\b/,
+        "function": /\b\w+(?=\()/,
+        "number": /\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,
+        "operator": /[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,
+        "punctuation": /[{}[\];(),.:]/
+      };
+      Prism2.languages.javascript = Prism2.languages.extend("clike", {
+        "class-name": [
+          Prism2.languages.clike["class-name"],
+          {
+            pattern: /(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,
+            lookbehind: true
+          }
+        ],
+        "keyword": [
+          {
+            pattern: /((?:^|\})\s*)catch\b/,
+            lookbehind: true
+          },
+          {
+            pattern: /(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,
+            lookbehind: true
+          }
+        ],
+        // Allow for all non-ASCII characters (See http://stackoverflow.com/a/2008444)
+        "function": /#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,
+        "number": {
+          pattern: RegExp(
+            /(^|[^\w$])/.source + "(?:" + // constant
+            (/NaN|Infinity/.source + "|" + // binary integer
+            /0[bB][01]+(?:_[01]+)*n?/.source + "|" + // octal integer
+            /0[oO][0-7]+(?:_[0-7]+)*n?/.source + "|" + // hexadecimal integer
+            /0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source + "|" + // decimal bigint
+            /\d+(?:_\d+)*n/.source + "|" + // decimal number (integer or float) but no bigint
+            /(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source) + ")" + /(?![\w$])/.source
+          ),
+          lookbehind: true
+        },
+        "operator": /--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/
+      });
+      Prism2.languages.javascript["class-name"][0].pattern = /(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/;
+      Prism2.languages.insertBefore("javascript", "keyword", {
+        "regex": {
+          pattern: RegExp(
+            // lookbehind
+            // eslint-disable-next-line regexp/no-dupe-characters-character-class
+            /((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)/.source + // Regex pattern:
+            // There are 2 regex patterns here. The RegExp set notation proposal added support for nested character
+            // classes if the `v` flag is present. Unfortunately, nested CCs are both context-free and incompatible
+            // with the only syntax, so we have to define 2 different regex patterns.
+            /\//.source + "(?:" + /(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}/.source + "|" + // `v` flag syntax. This supports 3 levels of nested character classes.
+            /(?:\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.)*\])*\])*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}v[dgimyus]{0,7}/.source + ")" + // lookahead
+            /(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/.source
+          ),
+          lookbehind: true,
+          greedy: true,
+          inside: {
+            "regex-source": {
+              pattern: /^(\/)[\s\S]+(?=\/[a-z]*$)/,
+              lookbehind: true,
+              alias: "language-regex",
+              inside: Prism2.languages.regex
+            },
+            "regex-delimiter": /^\/|\/$/,
+            "regex-flags": /^[a-z]+$/
+          }
+        },
+        // This must be declared before keyword because we use "function" inside the look-forward
+        "function-variable": {
+          pattern: /#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,
+          alias: "function"
+        },
+        "parameter": [
+          {
+            pattern: /(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,
+            lookbehind: true,
+            inside: Prism2.languages.javascript
+          },
+          {
+            pattern: /(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,
+            lookbehind: true,
+            inside: Prism2.languages.javascript
+          },
+          {
+            pattern: /(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,
+            lookbehind: true,
+            inside: Prism2.languages.javascript
+          },
+          {
+            pattern: /((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,
+            lookbehind: true,
+            inside: Prism2.languages.javascript
+          }
+        ],
+        "constant": /\b[A-Z](?:[A-Z_]|\dx?)*\b/
+      });
+      Prism2.languages.insertBefore("javascript", "string", {
+        "hashbang": {
+          pattern: /^#!.*/,
+          greedy: true,
+          alias: "comment"
+        },
+        "template-string": {
+          pattern: /`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,
+          greedy: true,
+          inside: {
+            "template-punctuation": {
+              pattern: /^`|`$/,
+              alias: "string"
+            },
+            "interpolation": {
+              pattern: /((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,
+              lookbehind: true,
+              inside: {
+                "interpolation-punctuation": {
+                  pattern: /^\$\{|\}$/,
+                  alias: "punctuation"
+                },
+                rest: Prism2.languages.javascript
+              }
+            },
+            "string": /[\s\S]+/
+          }
+        },
+        "string-property": {
+          pattern: /((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,
+          lookbehind: true,
+          greedy: true,
+          alias: "property"
+        }
+      });
+      Prism2.languages.insertBefore("javascript", "operator", {
+        "literal-property": {
+          pattern: /((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,
+          lookbehind: true,
+          alias: "property"
+        }
+      });
+      if (Prism2.languages.markup) {
+        Prism2.languages.markup.tag.addInlined("script", "javascript");
+        Prism2.languages.markup.tag.addAttribute(
+          /on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source,
+          "javascript"
+        );
+      }
+      Prism2.languages.js = Prism2.languages.javascript;
+      (function() {
+        if (typeof Prism2 === "undefined" || typeof document === "undefined") {
+          return;
+        }
+        if (!Element.prototype.matches) {
+          Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+        }
+        var LOADING_MESSAGE = "Loading\u2026";
+        var FAILURE_MESSAGE = function(status, message) {
+          return "\u2716 Error " + status + " while fetching file: " + message;
+        };
+        var FAILURE_EMPTY_MESSAGE = "\u2716 Error: File does not exist or is empty";
+        var EXTENSIONS = {
+          "js": "javascript",
+          "py": "python",
+          "rb": "ruby",
+          "ps1": "powershell",
+          "psm1": "powershell",
+          "sh": "bash",
+          "bat": "batch",
+          "h": "c",
+          "tex": "latex"
+        };
+        var STATUS_ATTR = "data-src-status";
+        var STATUS_LOADING = "loading";
+        var STATUS_LOADED = "loaded";
+        var STATUS_FAILED = "failed";
+        var SELECTOR = "pre[data-src]:not([" + STATUS_ATTR + '="' + STATUS_LOADED + '"]):not([' + STATUS_ATTR + '="' + STATUS_LOADING + '"])';
+        function loadFile(src, success, error) {
+          var xhr = new XMLHttpRequest();
+          xhr.open("GET", src, true);
+          xhr.onreadystatechange = function() {
+            if (xhr.readyState == 4) {
+              if (xhr.status < 400 && xhr.responseText) {
+                success(xhr.responseText);
+              } else {
+                if (xhr.status >= 400) {
+                  error(FAILURE_MESSAGE(xhr.status, xhr.statusText));
+                } else {
+                  error(FAILURE_EMPTY_MESSAGE);
+                }
+              }
+            }
+          };
+          xhr.send(null);
+        }
+        function parseRange(range) {
+          var m = /^\s*(\d+)\s*(?:(,)\s*(?:(\d+)\s*)?)?$/.exec(range || "");
+          if (m) {
+            var start = Number(m[1]);
+            var comma = m[2];
+            var end = m[3];
+            if (!comma) {
+              return [start, start];
+            }
+            if (!end) {
+              return [start, void 0];
+            }
+            return [start, Number(end)];
+          }
+          return void 0;
+        }
+        Prism2.hooks.add("before-highlightall", function(env) {
+          env.selector += ", " + SELECTOR;
+        });
+        Prism2.hooks.add("before-sanity-check", function(env) {
+          var pre = (
+            /** @type {HTMLPreElement} */
+            env.element
+          );
+          if (pre.matches(SELECTOR)) {
+            env.code = "";
+            pre.setAttribute(STATUS_ATTR, STATUS_LOADING);
+            var code = pre.appendChild(document.createElement("CODE"));
+            code.textContent = LOADING_MESSAGE;
+            var src = pre.getAttribute("data-src");
+            var language = env.language;
+            if (language === "none") {
+              var extension = (/\.(\w+)$/.exec(src) || [, "none"])[1];
+              language = EXTENSIONS[extension] || extension;
+            }
+            Prism2.util.setLanguage(code, language);
+            Prism2.util.setLanguage(pre, language);
+            var autoloader = Prism2.plugins.autoloader;
+            if (autoloader) {
+              autoloader.loadLanguages(language);
+            }
+            loadFile(
+              src,
+              function(text) {
+                pre.setAttribute(STATUS_ATTR, STATUS_LOADED);
+                var range = parseRange(pre.getAttribute("data-range"));
+                if (range) {
+                  var lines = text.split(/\r\n?|\n/g);
+                  var start = range[0];
+                  var end = range[1] == null ? lines.length : range[1];
+                  if (start < 0) {
+                    start += lines.length;
+                  }
+                  start = Math.max(0, Math.min(start - 1, lines.length));
+                  if (end < 0) {
+                    end += lines.length;
+                  }
+                  end = Math.max(0, Math.min(end, lines.length));
+                  text = lines.slice(start, end).join("\n");
+                  if (!pre.hasAttribute("data-start")) {
+                    pre.setAttribute("data-start", String(start + 1));
+                  }
+                }
+                code.textContent = text;
+                Prism2.highlightElement(code);
+              },
+              function(error) {
+                pre.setAttribute(STATUS_ATTR, STATUS_FAILED);
+                code.textContent = error;
+              }
+            );
+          }
+        });
+        Prism2.plugins.fileHighlight = {
+          /**
+           * Executes the File Highlight plugin for all matching `pre` elements under the given container.
+           *
+           * Note: Elements which are already loaded or currently loading will not be touched by this method.
+           *
+           * @param {ParentNode} [container=document]
+           */
+          highlight: function highlight(container) {
+            var elements = (container || document).querySelectorAll(SELECTOR);
+            for (var i = 0, element; element = elements[i++]; ) {
+              Prism2.highlightElement(element);
+            }
+          }
+        };
+        var logged = false;
+        Prism2.fileHighlight = function() {
+          if (!logged) {
+            console.warn("Prism.fileHighlight is deprecated. Use `Prism.plugins.fileHighlight.highlight` instead.");
+            logged = true;
+          }
+          Prism2.plugins.fileHighlight.highlight.apply(this, arguments);
+        };
+      })();
+    }
+  });
+
   // ../temple/index.js
   var require_temple = __commonJS({
     "../temple/index.js"(exports, module) {
@@ -893,19 +2342,19 @@ var TempleBundle = (() => {
   var markup_syntax_exports = {};
   __export(markup_syntax_exports, {
     BUILD_ID: () => BUILD_ID,
-    TempleComponent: () => import_client4.TempleComponent,
-    TempleElement: () => import_client4.TempleElement,
-    TempleEmitter: () => import_client4.TempleEmitter,
-    TempleException: () => import_client4.TempleException,
-    TempleRegistry: () => import_client4.TempleRegistry,
-    children: () => import_client4.children,
+    TempleComponent: () => import_client7.TempleComponent,
+    TempleElement: () => import_client7.TempleElement,
+    TempleEmitter: () => import_client7.TempleEmitter,
+    TempleException: () => import_client7.TempleException,
+    TempleRegistry: () => import_client7.TempleRegistry,
+    children: () => import_client7.children,
     components: () => components,
-    data: () => import_client4.data,
-    emitter: () => import_client4.emitter,
-    props: () => import_client4.props,
-    signal: () => import_client4.signal
+    data: () => import_client7.data,
+    emitter: () => import_client7.emitter,
+    props: () => import_client7.props,
+    signal: () => import_client7.signal
   });
-  var import_client3 = __toESM(require_client2());
+  var import_client6 = __toESM(require_client2());
 
   // temple-component-plugin:/Users/cblanquera/server/projects/ossph/temple/packages/temple-web/src/modules/panel/main.tml
   var import_client = __toESM(require_client2());
@@ -915,18 +2364,451 @@ var TempleBundle = (() => {
       return ``;
     }
     template() {
-      const props2 = this.props;
-      const children3 = () => this.originalChildren;
+      const props6 = this.props;
+      const children6 = () => this.originalChildren;
       return () => [
         import_client.TempleRegistry.createElement("main", {}, [
-          ...this._toNodeList(children3())
+          ...this._toNodeList(children6())
         ]).element
       ];
     }
   };
 
-  // temple-component-plugin:/Users/cblanquera/server/projects/ossph/temple/packages/temple-web/src/modules/i18n/translate.tml
+  // temple-component-plugin:/Users/cblanquera/server/projects/ossph/temple/packages/temple-web/src/modules/ide/code.tml
   var import_client2 = __toESM(require_client2());
+  var import_prismjs = __toESM(require_prism());
+  var import_temple = __toESM(require_temple());
+  var Code_6f36bc13bb6a166c7abc = class extends import_client2.TempleComponent {
+    static component = ["code", "Code_6f36bc13bb6a166c7abc"];
+    styles() {
+      return `:host {
+    display: block;
+    font-size: 14px;
+    line-height: 20px;
+  }
+  :host([inline]) {
+    display: inline;
+  }
+  :host([inline]),
+  :host([inline]) > pre,
+  :host([inline]) > pre > code {
+    display: inline;
+  }
+  .snippet {
+    background-color: #000000;
+    color: #ABB2BF;
+    margin: 0;
+    padding: 0;
+  }
+
+  .line-numbers {
+    position: relative;
+    padding-left: 3.8em;
+    counter-reset: linenumber;
+  }
+  :host([inline]) .line-numbers {
+    position: static;
+    padding-left: 0;
+  }
+
+  .line-numbers > code {
+    position: relative;
+    white-space: inherit;
+  }
+
+  .line-numbers .line-numbers-rows {
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    font-size: 100%;
+    left: -3.8em;
+    width: 3em; /* works for line-numbers below 1000 lines */
+    letter-spacing: -1px;
+    border-right: 1px solid #999;
+
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+  }
+
+  :host([inline]) .line-numbers .line-numbers-rows {
+    display: none;
+  }
+
+  .line-numbers-rows > span {
+    display: block;
+    counter-increment: linenumber;
+  }
+
+  .line-numbers-rows > span:before {
+    content: counter(linenumber);
+    color: #999;
+    display: block;
+    padding-right: 0.8em;
+    text-align: right;
+  }
+  .pad {
+    padding: 5px;
+  }
+
+  .terminal {
+    background-color: #000000;
+    font-size: 15px;
+    padding: 10px;
+  }
+  .terminal span {
+    color: #00FF00;
+  }`;
+    }
+    template() {
+      const config = this.props;
+      const {
+        lang = "markup",
+        numbers = false,
+        inline = false,
+        trim = false,
+        ltrim = false,
+        rtrim = false,
+        detab = 0
+      } = config;
+      const childlist = (0, import_temple.children)();
+      let snippet = childlist[0]?.textContent || "";
+      if (detab) {
+        snippet = snippet.replace(
+          new RegExp(`\\n {${detab}}`, "g"),
+          "\n"
+        );
+      }
+      if (trim) {
+        snippet = snippet.trim();
+      } else if (ltrim) {
+        snippet = snippet.replace(/^\s+/, "");
+      } else if (rtrim) {
+        snippet = snippet.replace(/\s+$/, "");
+      }
+      const highlight = (event) => {
+        if (!snippet) {
+          return;
+        }
+        const code = import_prismjs.default.highlight(snippet, import_prismjs.default.languages[lang], lang);
+        event.detail.target.innerHTML = code;
+        if (numbers) {
+          const match = code.match(/\n(?!$)/g);
+          const total = match ? match.length + 1 : 1;
+          const lines = new Array(total + 1).join("<span></span>");
+          const wrapper = document.createElement("span");
+          wrapper.setAttribute("aria-hidden", "true");
+          wrapper.className = "line-numbers-rows";
+          wrapper.innerHTML = lines;
+          event.detail.target.appendChild(wrapper);
+        }
+      };
+      return () => [
+        import_client2.TempleRegistry.createElement("link", { "rel": `stylesheet`, "href": `https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/themes/prism.min.css` }).element,
+        import_client2.TempleRegistry.createText(`
+`, false),
+        import_client2.TempleRegistry.createElement("link", { "rel": `stylesheet`, "href": `https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/themes/prism-tomorrow.min.css` }).element,
+        import_client2.TempleRegistry.createText(`
+`, false),
+        ...!!(lang === "bash") ? [
+          import_client2.TempleRegistry.createText(`
+  `, false),
+          import_client2.TempleRegistry.createElement("div", { "class": `terminal` }, [
+            import_client2.TempleRegistry.createElement("span", {}, [
+              import_client2.TempleRegistry.createText(`$`, false)
+            ]).element,
+            import_client2.TempleRegistry.createText(` `, false),
+            ...this._toNodeList(childlist)
+          ]).element,
+          import_client2.TempleRegistry.createText(`
+`, false)
+        ] : !!snippet ? [
+          ,
+          import_client2.TempleRegistry.createText(`
+  `, false),
+          ...!!numbers ? [
+            import_client2.TempleRegistry.createText(`
+    `, false),
+            import_client2.TempleRegistry.createElement("pre", { "class": `snippet line-numbers` }, [
+              import_client2.TempleRegistry.createElement("code", { "mount": highlight }, []).element
+            ]).element,
+            import_client2.TempleRegistry.createText(`
+  `, false)
+          ] : true ? [
+            ,
+            import_client2.TempleRegistry.createText(`
+    `, false),
+            import_client2.TempleRegistry.createElement("pre", { "class": `snippet pad` }, [
+              import_client2.TempleRegistry.createElement("code", { "mount": highlight }, []).element
+            ]).element,
+            import_client2.TempleRegistry.createText(`
+  `, false)
+          ] : [],
+          import_client2.TempleRegistry.createText(`
+`, false)
+        ] : []
+      ];
+    }
+  };
+
+  // temple-component-plugin:/Users/cblanquera/server/projects/ossph/temple/packages/temple-web/src/modules/ide/app.tml
+  var import_client3 = __toESM(require_client2());
+  var import_temple2 = __toESM(require_temple());
+  var App_05341fddbfd1fe4f273b = class extends import_client3.TempleComponent {
+    static component = ["app", "App_05341fddbfd1fe4f273b"];
+    styles() {
+      return ``;
+    }
+    template() {
+      const { title, panel } = (0, import_temple2.props)();
+      const classname = `body ${panel ? "panel" : ""}`;
+      const style = panel ? `height:${panel}px` : "";
+      return () => [
+        import_client3.TempleRegistry.createText(`
+`, false),
+        import_client3.TempleRegistry.createElement("div", { "class": `window` }, [
+          import_client3.TempleRegistry.createText(`
+  `, false),
+          import_client3.TempleRegistry.createElement("div", { "class": `head` }, [
+            import_client3.TempleRegistry.createText(`
+    `, false),
+            import_client3.TempleRegistry.createElement("span", { "class": `dot` }, []).element,
+            import_client3.TempleRegistry.createText(`
+    `, false),
+            import_client3.TempleRegistry.createElement("span", { "class": `dot` }, []).element,
+            import_client3.TempleRegistry.createText(`
+    `, false),
+            import_client3.TempleRegistry.createElement("span", { "class": `dot` }, []).element,
+            import_client3.TempleRegistry.createText(`
+    `, false),
+            import_client3.TempleRegistry.createElement("span", { "class": `title` }, [
+              ...this._toNodeList(title)
+            ]).element,
+            import_client3.TempleRegistry.createText(`
+  `, false)
+          ]).element,
+          import_client3.TempleRegistry.createText(`
+  `, false),
+          import_client3.TempleRegistry.createElement("div", { "class": classname, "style": style }, [
+            ...this._toNodeList((0, import_temple2.children)())
+          ]).element,
+          import_client3.TempleRegistry.createText(`
+`, false)
+        ]).element
+      ];
+    }
+  };
+
+  // temple-component-plugin:/Users/cblanquera/server/projects/ossph/temple/packages/temple-web/src/modules/tui/alert.tml
+  var import_client4 = __toESM(require_client2());
+  var import_temple3 = __toESM(require_temple());
+  var Alert_6b81bcb0566ce7f0cd2d = class extends import_client4.TempleComponent {
+    static component = ["alert", "Alert_6b81bcb0566ce7f0cd2d"];
+    styles() {
+      return `:host {
+    --black: #222222;
+    --white: #FCFCFC;
+    --info: #1474FC;
+    --error: #DC3545;
+    --warning: #FF7B07;
+    --success: #28A745;
+    --muted: #999999;
+    --primary: #E49F1A;
+    --secondary: #DA532C;
+  }
+
+  /* Text Colors
+  ---------------------------------*/
+  .tx-white, .tx-white a {
+    color: var(--info);
+  }
+  .tx-white, .tx-white a {
+    color: var(--white);
+  }
+  .tx-error, .tx-error a {
+    color: var(--error);
+  }
+  .tx-warning, .tx-warning a {
+    color: var(--warning);
+  }
+  .tx-success, .tx-success a {
+    color: var(--success);
+  }
+  .tx-muted, .tx-muted a {
+    color: var(--muted);
+  }
+  .tx-primary, .tx-primary a {
+    color: var(--primary);
+  }
+  .tx-secondary, .tx-secondary a {
+    color: var(--secondary);
+  }
+
+  /* Borders
+  ---------------------------------*/
+  .curved {
+    border-radius: 5px;
+  }
+  .rounded {
+    border-radius:12px;
+  }
+  .pill {
+    border-radius: 10000px;
+  }
+  .solid {
+    border-style: solid;
+  }
+  .thin {
+    border-width: 1px;
+  }
+
+  .bd-info {
+    border-color: var(--info);
+  }
+  .bd-error {
+    border-color: var(--error);
+  }
+  .bd-warning {
+    border-color: var(--warning);
+  }
+  .bd-success {
+    border-color: var(--success);
+  }
+  .bd-muted {
+    border-color: var(--muted);
+  }
+  .bd-primary {
+    border-color: var(--primary);
+  }
+  .bd-secondary {
+    border-color: var(--secondary);
+  }
+
+  /* Backgrounds
+  ---------------------------------*/
+  .bg-white {
+    background-color: var(--white);
+  }
+  .bg-info {
+    background-color: var(--info);
+  }
+  .bg-error {
+    background-color: var(--error);
+  }
+  .bg-warning {
+    background-color: var(--warning);
+  }
+  .bg-success {
+    background-color: var(--success);
+  }
+  .bg-muted {
+    background-color: var(--muted);
+  }
+  .bg-primary {
+    background-color: var(--primary);
+  }
+  .bg-secondary {
+    background-color: var(--secondary);
+  }
+
+  /* Alert
+  ---------------------------------*/
+  .alert {
+    padding: 16px;
+  }`;
+    }
+    template() {
+      const {
+        color,
+        info,
+        warning,
+        success,
+        error,
+        muted,
+        primary,
+        secondary,
+        solid,
+        outline,
+        curved,
+        rounded,
+        pill,
+        style
+      } = (0, import_temple3.props)();
+      const config = {
+        classes: ["alert"],
+        styles: ""
+      };
+      const layout = outline ? "outline" : solid ? "solid" : "solid";
+      if (curved) {
+        config.classes.push("curved");
+      } else if (rounded) {
+        config.classes.push("rounded");
+      } else if (pill) {
+        config.classes.push("pill");
+      }
+      if (layout === "outline") {
+        config.classes.push("solid", "thin");
+        if (color) {
+          config.styles += `border-color: ${color};`;
+          config.styles += `color: ${color};`;
+        } else if (info) {
+          config.classes.push("bd-info", "tx-info");
+        } else if (warning) {
+          config.classes.push("bd-warning", "tx-warning");
+        } else if (success) {
+          config.classes.push("bd-success", "tx-success");
+        } else if (error) {
+          config.classes.push("bd-error", "tx-error");
+        } else if (muted) {
+          config.classes.push("bd-muted", "tx-muted");
+        } else if (primary) {
+          config.classes.push("bd-primary", "tx-primary");
+        } else if (secondary) {
+          config.classes.push("bd-secondary", "tx-secondary");
+        }
+      } else {
+        config.classes.push("tx-white");
+        if (color) {
+          config.styles += `background-color: ${color};`;
+        } else if (info) {
+          config.classes.push("bg-info");
+        } else if (warning) {
+          config.classes.push("bg-warning");
+        } else if (success) {
+          config.classes.push("bg-success");
+        } else if (error) {
+          config.classes.push("bg-error");
+        } else if (muted) {
+          config.classes.push("bg-muted");
+        } else if (primary) {
+          config.classes.push("bg-primary");
+        } else if (secondary) {
+          config.classes.push("bg-secondary");
+        }
+      }
+      const map = {
+        classes: [...config.classes, (0, import_temple3.classnames)()].join(" "),
+        styles: { ...config.styles, ...style }
+      };
+      return () => [
+        import_client4.TempleRegistry.createElement("link", { "rel": `stylesheet`, "type": `text/css`, "href": `/temple/styles/fontawesome/all.css` }).element,
+        import_client4.TempleRegistry.createText(`
+`, false),
+        import_client4.TempleRegistry.createElement("div", { "class": map.classes, "style": map.styles }, [
+          import_client4.TempleRegistry.createText(`
+  `, false),
+          ...this._toNodeList((0, import_temple3.children)()),
+          import_client4.TempleRegistry.createText(`
+`, false)
+        ]).element
+      ];
+    }
+  };
+
+  // temple-component-plugin:/Users/cblanquera/server/projects/ossph/temple/packages/temple-web/src/modules/i18n/translate.tml
+  var import_client5 = __toESM(require_client2());
 
   // src/modules/i18n/index.ts
   var _ = function(phrase, ...variables) {
@@ -941,17 +2823,18 @@ var TempleBundle = (() => {
   };
 
   // temple-component-plugin:/Users/cblanquera/server/projects/ossph/temple/packages/temple-web/src/modules/i18n/translate.tml
-  var import_temple = __toESM(require_temple());
-  var Translate_7d25e372f5ffb5e39dad = class extends import_client2.TempleComponent {
+  var import_temple4 = __toESM(require_temple());
+  var Translate_7d25e372f5ffb5e39dad = class extends import_client5.TempleComponent {
     static component = ["translate", "Translate_7d25e372f5ffb5e39dad"];
     styles() {
       return ``;
     }
     template() {
-      const childlist = (0, import_temple.children)();
+      const { trim = false, p = false, li = false, div = false } = (0, import_temple4.props)();
+      const childlist = (0, import_temple4.children)();
       const phrase = [];
       const variables = [];
-      for (const child of childlist.length) {
+      for (const child of childlist) {
         if (typeof child === "string") {
           phrase.push(child);
         } else if (child instanceof Node && child.textContent) {
@@ -961,7 +2844,11 @@ var TempleBundle = (() => {
           variables.push(child);
         }
       }
-      const chunks = translate(phrase.join("")).split("%s");
+      let words = phrase.join("");
+      if (trim) {
+        words = words.replace(/\s+/, " ").trim();
+      }
+      const chunks = translate(words).split("%s");
       const translations = [];
       for (let i = 0; i < chunks.length; i++) {
         translations.push(document.createTextNode(chunks[i]));
@@ -969,35 +2856,72 @@ var TempleBundle = (() => {
           translations.push(variables[i]);
         }
       }
-      return () => [];
+      return () => [
+        import_client5.TempleRegistry.createText(`
+    `, false),
+        ...!!p ? [
+          import_client5.TempleRegistry.createText(`
+      `, false),
+          import_client5.TempleRegistry.createElement("p", {}, [
+            ...this._toNodeList(translations)
+          ]).element,
+          import_client5.TempleRegistry.createText(`
+    `, false)
+        ] : !!li ? [
+          ,
+          import_client5.TempleRegistry.createText(`
+      `, false),
+          import_client5.TempleRegistry.createElement("li", {}, [
+            ...this._toNodeList(translations)
+          ]).element,
+          import_client5.TempleRegistry.createText(`
+    `, false)
+        ] : !!div ? [
+          ,
+          import_client5.TempleRegistry.createText(`
+      `, false),
+          import_client5.TempleRegistry.createElement("div", {}, [
+            ...this._toNodeList(translations)
+          ]).element,
+          import_client5.TempleRegistry.createText(`
+    `, false)
+        ] : true ? [
+          ,
+          import_client5.TempleRegistry.createText(`
+      `, false),
+          ...this._toNodeList(translations),
+          import_client5.TempleRegistry.createText(`
+    `, false)
+        ] : []
+      ];
     }
   };
 
   // temple-document-client-plugin:/Users/cblanquera/server/projects/ossph/temple/packages/temple-web/src/pages/docs/markup-syntax.dtml
-  var import_client4 = __toESM(require_client2());
-  import_client3.emitter.once("ready", () => {
+  var import_client7 = __toESM(require_client2());
+  import_client6.emitter.once("ready", () => {
     const script = document.querySelector("script[data-app]");
     if (!script) {
-      throw import_client3.TempleException.for("APP_DATA not found");
+      throw import_client6.TempleException.for("APP_DATA not found");
     }
     try {
       const data2 = atob(script.getAttribute("data-app"));
       window.__APP_DATA__ = JSON.parse(data2);
       Object.entries(window.__APP_DATA__).forEach(([key, value]) => {
-        import_client3.data.set(key, value);
+        import_client6.data.set(key, value);
       });
     } catch (error) {
-      throw import_client3.TempleException.for("APP_DATA is not a valid JSON");
+      throw import_client6.TempleException.for("APP_DATA is not a valid JSON");
     }
-    import_client3.data.set("current", "document");
+    import_client6.data.set("current", "document");
     const url = "/docs/markup-syntax.html";
     const title = _("Markup Syntax - Temple reactive web component template engine.");
     const description = _("Learn how to write markup in Temple.");
     const toggle = (_2) => {
       document.body.classList.toggle("panel-left-open");
     };
-    import_client3.data.delete("current");
-    const __BINDINGS__ = { "0": { "class": `head panel-head` }, "1": { "class": `menu fas fa-fw fa-bars`, "click": toggle }, "2": { "href": `/temple` }, "3": { "src": `/temple/temple-icon.png`, "alt": `Temple Logo` }, "5": { "class": `tx-white`, "href": `/temple` }, "7": { "href": `/temple/docs/index.html` }, "8": { "class": `github`, "href": `https://github.com/ossPhilippines/temple`, "target": `_blank` }, "9": { "class": `fab fa-github` }, "10": { "class": `npm`, "href": `https://www.npmjs.com/package/temple`, "target": `_blank` }, "11": { "class": `fab fa-npm text-white` }, "12": { "class": `discord`, "href": `https://discord.gg/open-source-software-ph-905496362982981723`, "target": `_blank` }, "13": { "class": `fab fa-discord text-white` }, "14": { "class": `left panel-left` }, "16": { "href": `/temple` }, "17": { "src": `/temple/temple-icon.png`, "alt": `Temple Logo` }, "19": { "class": `tx-white`, "href": `/temple` }, "20": { "class": `toggle fas fa-fw fa-chevron-left`, "click": toggle }, "23": { "href": `/temple/docs/index.html` }, "24": { "href": `/temple/docs/getting-started.html` }, "25": { "href": `/temple/docs/frequent-questions.html` }, "27": { "href": `/temple/docs/markup-syntax.html` }, "28": { "href": `/temple/docs/state-management.html` }, "29": { "href": `/temple/docs/component-strategy.html` }, "30": { "href": `/temple/docs/compiler-api.html` }, "31": { "href": `/temple/docs/client-api.html` }, "33": { "href": `/temple/docs/template-engine.html` }, "34": { "href": `/temple/docs/single-page.html` }, "35": { "href": `/temple/docs/static-site.html` }, "36": { "href": `/temple/docs/component-publisher.html` }, "37": { "href": `/temple/docs/developer-tools.html` }, "39": { "href": `/temple/docs/latest-updates.html` }, "40": { "href": `/temple/docs/contributing-guide.html` }, "41": { "href": `/temple/docs/known-issues.html` }, "42": { "class": `panel-main` }, "43": { "class": `docs container` }, "45": { "class": `pager` }, "46": { "class": `prev`, "href": `/temple/docs/frequent-questions.html` }, "47": { "class": `fas fa-fw fa-chevron-left` }, "48": { "class": `next`, "href": `/temple/docs/state-management.html` }, "49": { "class": `fas fa-fw fa-chevron-right` }, "50": { "class": `foot` } };
+    import_client6.data.delete("current");
+    const __BINDINGS__ = { "0": { "class": `head panel-head` }, "1": { "class": `menu fas fa-fw fa-bars`, "click": toggle }, "2": { "href": `/temple` }, "3": { "src": `/temple/temple-icon.png`, "alt": `Temple Logo` }, "5": { "class": `tx-white`, "href": `/temple` }, "7": { "href": `/temple/docs/index.html` }, "8": { "class": `github`, "href": `https://github.com/ossPhilippines/temple`, "target": `_blank` }, "9": { "class": `fab fa-github` }, "10": { "class": `npm`, "href": `https://www.npmjs.com/package/temple`, "target": `_blank` }, "11": { "class": `fab fa-npm text-white` }, "12": { "class": `discord`, "href": `https://discord.gg/open-source-software-ph-905496362982981723`, "target": `_blank` }, "13": { "class": `fab fa-discord text-white` }, "14": { "class": `left panel-left` }, "16": { "href": `/temple` }, "17": { "src": `/temple/temple-icon.png`, "alt": `Temple Logo` }, "19": { "class": `tx-white`, "href": `/temple` }, "20": { "class": `toggle fas fa-fw fa-chevron-left`, "click": toggle }, "23": { "href": `/temple/docs/index.html` }, "24": { "href": `/temple/docs/getting-started.html` }, "25": { "href": `/temple/docs/frequent-questions.html` }, "27": { "href": `/temple/docs/markup-syntax.html` }, "28": { "href": `/temple/docs/state-management.html` }, "29": { "href": `/temple/docs/component-strategy.html` }, "30": { "href": `/temple/docs/compiler-api.html` }, "31": { "href": `/temple/docs/client-api.html` }, "33": { "href": `/temple/docs/template-engine.html` }, "34": { "href": `/temple/docs/single-page.html` }, "35": { "href": `/temple/docs/static-site.html` }, "36": { "href": `/temple/docs/component-publisher.html` }, "37": { "href": `/temple/docs/developer-tools.html` }, "39": { "href": `/temple/docs/latest-updates.html` }, "40": { "href": `/temple/docs/contributing-guide.html` }, "41": { "href": `/temple/docs/known-issues.html` }, "42": { "class": `panel-main` }, "43": { "class": `docs container` }, "45": { "title": `TL;DR` }, "46": { "numbers": true, "detab": 12 }, "47": { "p": true, "trim": true }, "48": { "inline": true }, "49": { "inline": true }, "50": { "p": true, "trim": true }, "51": { "title": `Code Structure` }, "52": { "numbers": true, "detab": 12 }, "54": { "p": true, "trim": true }, "55": { "inline": true }, "56": { "inline": true }, "57": { "title": `Import Examples` }, "58": { "numbers": true, "trim": true, "detab": 12 }, "59": { "p": true, "trim": true }, "60": { "inline": true }, "61": { "inline": true }, "62": { "p": true, "trim": true }, "63": { "inline": true }, "64": { "inline": true }, "65": { "inline": true }, "66": { "p": true, "trim": true }, "67": { "inline": true }, "68": { "inline": true }, "70": { "p": true, "trim": true }, "71": { "inline": true }, "72": { "target": `_blank`, "href": `https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM` }, "73": { "p": true, "trim": true }, "74": { "inline": true }, "75": { "inline": true }, "76": { "p": true, "trim": true }, "77": { "inline": true }, "78": { "title": `Using :host` }, "79": { "numbers": true, "trim": true, "detab": 12 }, "80": { "p": true, "trim": true }, "81": { "inline": true }, "82": { "title": `:host Conditionals` }, "83": { "numbers": true, "trim": true, "detab": 12 }, "85": { "p": true, "trim": true }, "86": { "inline": true }, "87": { "title": `Top-Level Variables` }, "88": { "numbers": true, "trim": true, "detab": 12 }, "89": { "p": true, "trim": true }, "90": { "inline": true }, "91": { "title": `Importing Files` }, "92": { "numbers": true, "trim": true, "detab": 12 }, "93": { "p": true, "trim": true }, "94": { "inline": true }, "95": { "title": `@ Imports` }, "96": { "numbers": true, "trim": true, "detab": 12 }, "98": { "p": true, "trim": true }, "100": { "p": true, "trim": true }, "101": { "inline": true }, "103": { "li": true, "trim": true }, "104": { "li": true, "trim": true }, "105": { "li": true, "trim": true }, "106": { "inline": true }, "107": { "inline": true }, "108": { "inline": true }, "109": { "inline": true }, "110": { "inline": true }, "111": { "inline": true }, "112": { "inline": true }, "113": { "inline": true }, "114": { "li": true, "trim": true }, "115": { "li": true, "trim": true }, "116": { "li": true, "trim": true }, "117": { "p": true, "trim": true }, "119": { "li": true, "trim": true }, "120": { "inline": true }, "121": { "inline": true }, "122": { "inline": true }, "123": { "inline": true }, "124": { "li": true, "trim": true }, "125": { "inline": true }, "126": { "inline": true }, "127": { "inline": true }, "128": { "li": true, "trim": true }, "129": { "inline": true }, "130": { "inline": true }, "131": { "inline": true }, "132": { "solid": true, "curved": true, "info": true }, "133": { "class": `fas fa-info-circle` }, "134": { "p": true, "trim": true }, "135": { "inline": true }, "136": { "inline": true }, "138": { "title": `Markup Expressions` }, "139": { "numbers": true, "trim": true, "detab": 12 }, "140": { "p": true, "trim": true }, "141": { "inline": true }, "142": { "trim": true, "detab": 10 }, "143": { "p": true, "trim": true }, "144": { "inline": true }, "145": { "trim": true, "detab": 10 }, "146": { "p": true, "trim": true }, "147": { "trim": true, "detab": 10 }, "148": { "p": true, "trim": true }, "149": { "inline": true }, "150": { "trim": true, "detab": 10 }, "151": { "p": true, "trim": true }, "152": { "inline": true }, "153": { "trim": true, "detab": 10 }, "154": { "p": true, "trim": true }, "155": { "numbers": true, "trim": true, "detab": 10 }, "156": { "p": true, "trim": true }, "158": { "title": `Conditionals` }, "159": { "numbers": true, "trim": true, "detab": 12 }, "160": { "p": true, "trim": true }, "161": { "numbers": true, "trim": true, "detab": 12 }, "162": { "p": true, "trim": true }, "163": { "inline": true }, "164": { "inline": true }, "165": { "numbers": true, "trim": true, "detab": 12 }, "166": { "p": true, "trim": true }, "167": { "inline": true }, "168": { "numbers": true, "trim": true, "detab": 12 }, "169": { "p": true, "trim": true }, "170": { "inline": true }, "171": { "numbers": true, "trim": true, "detab": 12 }, "172": { "p": true, "trim": true }, "173": { "inline": true }, "175": { "title": `Each` }, "176": { "numbers": true, "trim": true, "detab": 12 }, "177": { "p": true, "trim": true }, "178": { "inline": true }, "179": { "inline": true }, "180": { "inline": true }, "181": { "inline": true }, "182": { "numbers": true, "trim": true, "detab": 12 }, "183": { "p": true, "trim": true }, "184": { "inline": true }, "185": { "inline": true }, "186": { "numbers": true, "trim": true, "detab": 12 }, "187": { "p": true, "trim": true }, "188": { "inline": true }, "189": { "inline": true }, "191": { "title": `Try/Catch Example` }, "192": { "numbers": true, "trim": true, "detab": 12 }, "193": { "p": true, "trim": true }, "194": { "inline": true }, "195": { "inline": true }, "196": { "inline": true }, "197": { "inline": true }, "198": { "inline": true }, "199": { "lang": `js`, "inline": true }, "200": { "class": `pager` }, "201": { "class": `prev`, "href": `/temple/docs/frequent-questions.html` }, "202": { "class": `fas fa-fw fa-chevron-left` }, "203": { "class": `next`, "href": `/temple/docs/state-management.html` }, "204": { "class": `fas fa-fw fa-chevron-right` }, "205": { "class": `foot` } };
     for (const element of document.body.querySelectorAll("*")) {
       const attributes = Object.fromEntries(
         Array.from(element.attributes).map((attribute) => [
@@ -1005,21 +2929,39 @@ var TempleBundle = (() => {
           attribute.nodeValue.length > 0 ? attribute.nodeValue : true
         ])
       );
-      const id = String(import_client3.TempleRegistry.elements.size);
+      const id = String(import_client6.TempleRegistry.elements.size);
       if (__BINDINGS__[id]) {
         Object.assign(attributes, __BINDINGS__[id]);
         element.TempleAttributes = __BINDINGS__[id];
       }
-      import_client3.TempleRegistry.register(element, attributes);
+      import_client6.TempleRegistry.register(element, attributes);
     }
     customElements.define("panel-main", Main_fd7f1af6410c5b5c8e1f);
+    customElements.define("ide-code", Code_6f36bc13bb6a166c7abc);
+    customElements.define("ide-app", App_05341fddbfd1fe4f273b);
+    customElements.define("tui-alert", Alert_6b81bcb0566ce7f0cd2d);
     customElements.define("i18n-translate", Translate_7d25e372f5ffb5e39dad);
-    import_client3.emitter.emit("mounted", document.body);
+    import_client6.emitter.emit("mounted", document.body);
   });
   var components = {
     "PanelMain_fd7f1af6410c5b5c8e1f": Main_fd7f1af6410c5b5c8e1f,
+    "IdeCode_6f36bc13bb6a166c7abc": Code_6f36bc13bb6a166c7abc,
+    "IdeApp_05341fddbfd1fe4f273b": App_05341fddbfd1fe4f273b,
+    "TuiAlert_6b81bcb0566ce7f0cd2d": Alert_6b81bcb0566ce7f0cd2d,
     "I18nTranslate_7d25e372f5ffb5e39dad": Translate_7d25e372f5ffb5e39dad
   };
   var BUILD_ID = "57e37fa233b38c87fe71";
   return __toCommonJS(markup_syntax_exports);
 })();
+/*! Bundled license information:
+
+prismjs/prism.js:
+  (**
+   * Prism: Lightweight, robust, elegant syntax highlighting
+   *
+   * @license MIT <https://opensource.org/licenses/MIT>
+   * @author Lea Verou <https://lea.verou.me>
+   * @namespace
+   * @public
+   *)
+*/
diff --git a/docs/build/client/a67341498153885a2fc0.html b/docs/build/client/a67341498153885a2fc0.html
index c48406b..a3c9349 100644
--- a/docs/build/client/a67341498153885a2fc0.html
+++ b/docs/build/client/a67341498153885a2fc0.html
@@ -84,9 +84,9 @@ <h6>Contributing</h6>
       <div class="docs container">
         <h1>Getting Started</h1>
 
-        <p>
+        <i18n-translate p trim>
           To use Temple in a project, run the following commands in terminal: 
-        </p>
+        </i18n-translate>
         <ide-app title="Terminal">
           <ide-code lang="bash">
             npm install --save @ossph/temple && npm install --save-dev ts-node typescript
@@ -97,11 +97,11 @@ <h1>Getting Started</h1>
           &nbsp;
           Download the Temple editor plugin at the <a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=ossph.temple-language">Visual Studio Marketplace</a>.
         </tui-alert>
-        <p>
+        <i18n-translate p trim>
           Create a server file called
-          <ide-code lang="js" inline>'src/index.ts'</ide-code> 
+          <ide-code inline>src/index.ts</ide-code> 
           with the following code that uses the compiler.
-        </p>
+        </i18n-translate>
         <ide-app title="src/index.ts">
           <ide-code lang="js" numbers trim >
             //on server:
@@ -114,11 +114,11 @@ <h1>Getting Started</h1>
             console.log(results);
           </ide-code>
         </ide-app>
-        <p>
+        <i18n-translate p trim>
           Next, create a document file called
-          <ide-code lang="js" inline>'src/page.dtml'</ide-code> 
+          <ide-code inline>src/page.dtml</ide-code> 
           with the following template code.
-        </p>
+        </i18n-translate>
         <ide-app title="src/page.dtml">
           <ide-code numbers trim >
             &lt;style&gt;
@@ -137,19 +137,19 @@ <h1>Getting Started</h1>
             &lt;/html&gt;
           </ide-code>
         </ide-app>
-        <p>
+        <i18n-translate p trim>
           To test the script and see the results, run the following 
           command in terminal.
-        </p>
+        </i18n-translate>
         <ide-app title="Terminal">
           <ide-code lang="bash">
             npx ts-node src/index.ts
           </ide-code>
         </ide-app>
-        <p>
+        <i18n-translate p trim>
           To see other getting started examples with various frameworks,
           you can check out the following links.
-        </p>
+        </i18n-translate>
         <ul>
           <li>
             <a target="_blank" href="https://github.com/OSSPhilippines/temple/tree/main/examples/with-http">
@@ -192,28 +192,28 @@ <h1>Getting Started</h1>
             </a>
           </li>
         </ul> 
-        <p>
+        <i18n-translate p trim>
           Depending on how you plan to use Temple, you can also look at 
           the following project modes.
-        </p>
+        </i18n-translate>
         <ul>
           <li>
-            <a href="/temple/docs/engine.html">
+            <a href="/temple/docs/template-engine.html">
               Template Engine
             </a>
           </li>
           <li>
-            <a href="/temple/docs/spa.html">
+            <a href="/temple/docs/single-page.html">
               Single Page App
             </a>
           </li>
           <li>
-            <a href="/temple/docs/static-sites.html">
+            <a href="/temple/docs/static-site.html">
               Static Site Generator
             </a>
           </li>
           <li>
-            <a href="/temple/docs/publisher.html">
+            <a href="/temple/docs/component-publisher.html">
               Web Component Publisher
             </a>
           </li>
diff --git a/docs/build/client/a67341498153885a2fc0.js b/docs/build/client/a67341498153885a2fc0.js
index 86a214e..798f5b7 100644
--- a/docs/build/client/a67341498153885a2fc0.js
+++ b/docs/build/client/a67341498153885a2fc0.js
@@ -225,11 +225,11 @@ var TempleBundle = (() => {
       };
       Object.defineProperty(exports, "__esModule", { value: true });
       var TempleElement_1 = __importDefault(require_TempleElement());
-      var TempleRegistry9 = class {
+      var TempleRegistry8 = class {
         static get elements() {
           return this._elements;
         }
-        static createComponent(definition, attributes, children7 = []) {
+        static createComponent(definition, attributes, children6 = []) {
           const tagname = definition.component[0];
           const template = document.createElement("template");
           template.innerHTML = `<${tagname}></${tagname}>`;
@@ -247,11 +247,11 @@ var TempleBundle = (() => {
           }
           component._TempleAttributes = attributes;
           component.props = attributes;
-          children7.forEach((child) => component.appendChild(child));
+          children6.forEach((child) => component.appendChild(child));
           component.register();
           return this.register(component, attributes);
         }
-        static createElement(name, attributes, children7 = []) {
+        static createElement(name, attributes, children6 = []) {
           const element = document.createElement(name);
           for (const [key, value] of Object.entries(attributes)) {
             if (typeof value === "string") {
@@ -260,7 +260,7 @@ var TempleBundle = (() => {
               element.setAttribute(key, key);
             }
           }
-          children7.filter((child) => typeof child !== "undefined").forEach((child) => element.appendChild(child));
+          children6.filter((child) => typeof child !== "undefined").forEach((child) => element.appendChild(child));
           return this.register(element, attributes);
         }
         static createText(value, escape = false) {
@@ -297,8 +297,8 @@ var TempleBundle = (() => {
           return node;
         }
       };
-      TempleRegistry9._elements = /* @__PURE__ */ new Map();
-      exports.default = TempleRegistry9;
+      TempleRegistry8._elements = /* @__PURE__ */ new Map();
+      exports.default = TempleRegistry8;
     }
   });
 
@@ -362,7 +362,7 @@ var TempleBundle = (() => {
       var TempleRegistry_1 = __importDefault(require_TempleRegistry());
       var TempleEmitter_1 = __importDefault(require_TempleEmitter());
       var data_1 = __importDefault(require_data());
-      var TempleComponent8 = class _TempleComponent extends HTMLElement {
+      var TempleComponent7 = class _TempleComponent extends HTMLElement {
         constructor() {
           super(...arguments);
           this._initiated = false;
@@ -437,10 +437,10 @@ var TempleBundle = (() => {
           } else {
             TempleEmitter_1.default.emit("unmounted", this);
           }
-          const children7 = this._template().filter(Boolean);
+          const children6 = this._template().filter(Boolean);
           if (styles.length === 0) {
             this.textContent = "";
-            children7.forEach((child) => this.appendChild(child));
+            children6.forEach((child) => this.appendChild(child));
           } else {
             if (!this.shadowRoot) {
               this.attachShadow({ mode: "open" });
@@ -451,7 +451,7 @@ var TempleBundle = (() => {
             const style = document.createElement("style");
             style.innerText = styles;
             shadowRoot.appendChild(style);
-            children7.forEach((child) => {
+            children6.forEach((child) => {
               var _a;
               return (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.appendChild(child);
             });
@@ -497,7 +497,7 @@ var TempleBundle = (() => {
           }
         }
       };
-      exports.default = TempleComponent8;
+      exports.default = TempleComponent7;
     }
   });
 
@@ -571,15 +571,15 @@ var TempleBundle = (() => {
       };
       Object.defineProperty(exports, "__esModule", { value: true });
       exports.innerHTML = innerHTML;
-      exports.default = children7;
+      exports.default = children6;
       var data_1 = __importDefault(require_data());
       function innerHTML(component = null) {
-        const inner = children7(component);
+        const inner = children6(component);
         const wrapper = document.createElement("template");
         wrapper.append(...inner);
         return wrapper.innerHTML;
       }
-      function children7(component = null) {
+      function children6(component = null) {
         if (!component) {
           component = data_1.default.get("current") || null;
         }
@@ -2342,19 +2342,19 @@ var TempleBundle = (() => {
   var getting_started_exports = {};
   __export(getting_started_exports, {
     BUILD_ID: () => BUILD_ID,
-    TempleComponent: () => import_client8.TempleComponent,
-    TempleElement: () => import_client8.TempleElement,
-    TempleEmitter: () => import_client8.TempleEmitter,
-    TempleException: () => import_client8.TempleException,
-    TempleRegistry: () => import_client8.TempleRegistry,
-    children: () => import_client8.children,
+    TempleComponent: () => import_client7.TempleComponent,
+    TempleElement: () => import_client7.TempleElement,
+    TempleEmitter: () => import_client7.TempleEmitter,
+    TempleException: () => import_client7.TempleException,
+    TempleRegistry: () => import_client7.TempleRegistry,
+    children: () => import_client7.children,
     components: () => components,
-    data: () => import_client8.data,
-    emitter: () => import_client8.emitter,
-    props: () => import_client8.props,
-    signal: () => import_client8.signal
+    data: () => import_client7.data,
+    emitter: () => import_client7.emitter,
+    props: () => import_client7.props,
+    signal: () => import_client7.signal
   });
-  var import_client7 = __toESM(require_client2());
+  var import_client6 = __toESM(require_client2());
 
   // temple-component-plugin:/Users/cblanquera/server/projects/ossph/temple/packages/temple-web/src/modules/panel/main.tml
   var import_client = __toESM(require_client2());
@@ -2365,10 +2365,10 @@ var TempleBundle = (() => {
     }
     template() {
       const props6 = this.props;
-      const children7 = () => this.originalChildren;
+      const children6 = () => this.originalChildren;
       return () => [
         import_client.TempleRegistry.createElement("main", {}, [
-          ...this._toNodeList(children7())
+          ...this._toNodeList(children6())
         ]).element
       ];
     }
@@ -2553,77 +2553,48 @@ var TempleBundle = (() => {
     }
   };
 
-  // temple-component-plugin:/Users/cblanquera/server/projects/ossph/temple/packages/temple-web/src/modules/ide/preview.tml
+  // temple-component-plugin:/Users/cblanquera/server/projects/ossph/temple/packages/temple-web/src/modules/ide/app.tml
   var import_client3 = __toESM(require_client2());
   var import_temple2 = __toESM(require_temple());
-  var Preview_f99bb2771682cb0390ea = class extends import_client3.TempleComponent {
-    static component = ["preview", "Preview_f99bb2771682cb0390ea"];
-    styles() {
-      return `:host {
-    display: block;
-  }
-  .preview {
-    background-color: #EFEFEF;
-    color: #222222;
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 13px;
-    padding: 10px;
-  }`;
-    }
-    template() {
-      return () => [
-        import_client3.TempleRegistry.createElement("link", { "rel": `stylesheet`, "href": `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css` }).element,
-        import_client3.TempleRegistry.createText(`
-`, false),
-        import_client3.TempleRegistry.createElement("div", { "class": `preview` }, [
-          ...this._toNodeList((0, import_temple2.children)())
-        ]).element
-      ];
-    }
-  };
-
-  // temple-component-plugin:/Users/cblanquera/server/projects/ossph/temple/packages/temple-web/src/modules/ide/app.tml
-  var import_client4 = __toESM(require_client2());
-  var import_temple3 = __toESM(require_temple());
-  var App_05341fddbfd1fe4f273b = class extends import_client4.TempleComponent {
+  var App_05341fddbfd1fe4f273b = class extends import_client3.TempleComponent {
     static component = ["app", "App_05341fddbfd1fe4f273b"];
     styles() {
       return ``;
     }
     template() {
-      const { title, panel } = (0, import_temple3.props)();
+      const { title, panel } = (0, import_temple2.props)();
       const classname = `body ${panel ? "panel" : ""}`;
       const style = panel ? `height:${panel}px` : "";
       return () => [
-        import_client4.TempleRegistry.createText(`
+        import_client3.TempleRegistry.createText(`
 `, false),
-        import_client4.TempleRegistry.createElement("div", { "class": `window` }, [
-          import_client4.TempleRegistry.createText(`
+        import_client3.TempleRegistry.createElement("div", { "class": `window` }, [
+          import_client3.TempleRegistry.createText(`
   `, false),
-          import_client4.TempleRegistry.createElement("div", { "class": `head` }, [
-            import_client4.TempleRegistry.createText(`
+          import_client3.TempleRegistry.createElement("div", { "class": `head` }, [
+            import_client3.TempleRegistry.createText(`
     `, false),
-            import_client4.TempleRegistry.createElement("span", { "class": `dot` }, []).element,
-            import_client4.TempleRegistry.createText(`
+            import_client3.TempleRegistry.createElement("span", { "class": `dot` }, []).element,
+            import_client3.TempleRegistry.createText(`
     `, false),
-            import_client4.TempleRegistry.createElement("span", { "class": `dot` }, []).element,
-            import_client4.TempleRegistry.createText(`
+            import_client3.TempleRegistry.createElement("span", { "class": `dot` }, []).element,
+            import_client3.TempleRegistry.createText(`
     `, false),
-            import_client4.TempleRegistry.createElement("span", { "class": `dot` }, []).element,
-            import_client4.TempleRegistry.createText(`
+            import_client3.TempleRegistry.createElement("span", { "class": `dot` }, []).element,
+            import_client3.TempleRegistry.createText(`
     `, false),
-            import_client4.TempleRegistry.createElement("span", { "class": `title` }, [
+            import_client3.TempleRegistry.createElement("span", { "class": `title` }, [
               ...this._toNodeList(title)
             ]).element,
-            import_client4.TempleRegistry.createText(`
+            import_client3.TempleRegistry.createText(`
   `, false)
           ]).element,
-          import_client4.TempleRegistry.createText(`
+          import_client3.TempleRegistry.createText(`
   `, false),
-          import_client4.TempleRegistry.createElement("div", { "class": classname, "style": style }, [
-            ...this._toNodeList((0, import_temple3.children)())
+          import_client3.TempleRegistry.createElement("div", { "class": classname, "style": style }, [
+            ...this._toNodeList((0, import_temple2.children)())
           ]).element,
-          import_client4.TempleRegistry.createText(`
+          import_client3.TempleRegistry.createText(`
 `, false)
         ]).element
       ];
@@ -2631,9 +2602,9 @@ var TempleBundle = (() => {
   };
 
   // temple-component-plugin:/Users/cblanquera/server/projects/ossph/temple/packages/temple-web/src/modules/tui/alert.tml
-  var import_client5 = __toESM(require_client2());
-  var import_temple4 = __toESM(require_temple());
-  var Alert_6b81bcb0566ce7f0cd2d = class extends import_client5.TempleComponent {
+  var import_client4 = __toESM(require_client2());
+  var import_temple3 = __toESM(require_temple());
+  var Alert_6b81bcb0566ce7f0cd2d = class extends import_client4.TempleComponent {
     static component = ["alert", "Alert_6b81bcb0566ce7f0cd2d"];
     styles() {
       return `:host {
@@ -2764,7 +2735,7 @@ var TempleBundle = (() => {
         rounded,
         pill,
         style
-      } = (0, import_temple4.props)();
+      } = (0, import_temple3.props)();
       const config = {
         classes: ["alert"],
         styles: ""
@@ -2818,18 +2789,18 @@ var TempleBundle = (() => {
         }
       }
       const map = {
-        classes: [...config.classes, (0, import_temple4.classnames)()].join(" "),
+        classes: [...config.classes, (0, import_temple3.classnames)()].join(" "),
         styles: { ...config.styles, ...style }
       };
       return () => [
-        import_client5.TempleRegistry.createElement("link", { "rel": `stylesheet`, "type": `text/css`, "href": `/temple/styles/fontawesome/all.css` }).element,
-        import_client5.TempleRegistry.createText(`
+        import_client4.TempleRegistry.createElement("link", { "rel": `stylesheet`, "type": `text/css`, "href": `/temple/styles/fontawesome/all.css` }).element,
+        import_client4.TempleRegistry.createText(`
 `, false),
-        import_client5.TempleRegistry.createElement("div", { "class": map.classes, "style": map.styles }, [
-          import_client5.TempleRegistry.createText(`
+        import_client4.TempleRegistry.createElement("div", { "class": map.classes, "style": map.styles }, [
+          import_client4.TempleRegistry.createText(`
   `, false),
-          ...this._toNodeList((0, import_temple4.children)()),
-          import_client5.TempleRegistry.createText(`
+          ...this._toNodeList((0, import_temple3.children)()),
+          import_client4.TempleRegistry.createText(`
 `, false)
         ]).element
       ];
@@ -2837,7 +2808,7 @@ var TempleBundle = (() => {
   };
 
   // temple-component-plugin:/Users/cblanquera/server/projects/ossph/temple/packages/temple-web/src/modules/i18n/translate.tml
-  var import_client6 = __toESM(require_client2());
+  var import_client5 = __toESM(require_client2());
 
   // src/modules/i18n/index.ts
   var _ = function(phrase, ...variables) {
@@ -2852,15 +2823,15 @@ var TempleBundle = (() => {
   };
 
   // temple-component-plugin:/Users/cblanquera/server/projects/ossph/temple/packages/temple-web/src/modules/i18n/translate.tml
-  var import_temple5 = __toESM(require_temple());
-  var Translate_7d25e372f5ffb5e39dad = class extends import_client6.TempleComponent {
+  var import_temple4 = __toESM(require_temple());
+  var Translate_7d25e372f5ffb5e39dad = class extends import_client5.TempleComponent {
     static component = ["translate", "Translate_7d25e372f5ffb5e39dad"];
     styles() {
       return ``;
     }
     template() {
-      const { trim = false, p = false, div = false } = (0, import_temple5.props)();
-      const childlist = (0, import_temple5.children)();
+      const { trim = false, p = false, div = false } = (0, import_temple4.props)();
+      const childlist = (0, import_temple4.children)();
       const phrase = [];
       const variables = [];
       for (const child of childlist) {
@@ -2886,31 +2857,31 @@ var TempleBundle = (() => {
         }
       }
       return () => [
-        import_client6.TempleRegistry.createText(`
+        import_client5.TempleRegistry.createText(`
     `, false),
         ...!!p ? [
-          import_client6.TempleRegistry.createText(`
+          import_client5.TempleRegistry.createText(`
       `, false),
-          import_client6.TempleRegistry.createElement("p", {}, [
+          import_client5.TempleRegistry.createElement("p", {}, [
             ...this._toNodeList(translations)
           ]).element,
-          import_client6.TempleRegistry.createText(`
+          import_client5.TempleRegistry.createText(`
     `, false)
         ] : !!div ? [
           ,
-          import_client6.TempleRegistry.createText(`
+          import_client5.TempleRegistry.createText(`
       `, false),
-          import_client6.TempleRegistry.createElement("div", {}, [
+          import_client5.TempleRegistry.createElement("div", {}, [
             ...this._toNodeList(translations)
           ]).element,
-          import_client6.TempleRegistry.createText(`
+          import_client5.TempleRegistry.createText(`
     `, false)
         ] : true ? [
           ,
-          import_client6.TempleRegistry.createText(`
+          import_client5.TempleRegistry.createText(`
       `, false),
           ...this._toNodeList(translations),
-          import_client6.TempleRegistry.createText(`
+          import_client5.TempleRegistry.createText(`
     `, false)
         ] : []
       ];
@@ -2918,22 +2889,22 @@ var TempleBundle = (() => {
   };
 
   // temple-document-client-plugin:/Users/cblanquera/server/projects/ossph/temple/packages/temple-web/src/pages/docs/getting-started.dtml
-  var import_client8 = __toESM(require_client2());
-  import_client7.emitter.once("ready", () => {
+  var import_client7 = __toESM(require_client2());
+  import_client6.emitter.once("ready", () => {
     const script = document.querySelector("script[data-app]");
     if (!script) {
-      throw import_client7.TempleException.for("APP_DATA not found");
+      throw import_client6.TempleException.for("APP_DATA not found");
     }
     try {
       const data2 = atob(script.getAttribute("data-app"));
       window.__APP_DATA__ = JSON.parse(data2);
       Object.entries(window.__APP_DATA__).forEach(([key, value]) => {
-        import_client7.data.set(key, value);
+        import_client6.data.set(key, value);
       });
     } catch (error) {
-      throw import_client7.TempleException.for("APP_DATA is not a valid JSON");
+      throw import_client6.TempleException.for("APP_DATA is not a valid JSON");
     }
-    import_client7.data.set("current", "document");
+    import_client6.data.set("current", "document");
     const url = "/docs/getting-started.html";
     const title = _("Getting Started - Temple reactive web component template engine.");
     const description = _("How to install, setup and use Temple in a project.");
@@ -2941,8 +2912,8 @@ var TempleBundle = (() => {
       document.body.classList.toggle("panel-left-open");
     };
     const examples = "https://github.com/OSSPhilippines/temple/tree/main/examples";
-    import_client7.data.delete("current");
-    const __BINDINGS__ = { "0": { "class": `head panel-head` }, "1": { "class": `menu fas fa-fw fa-bars`, "click": toggle }, "2": { "href": `/temple` }, "3": { "src": `/temple/temple-icon.png`, "alt": `Temple Logo` }, "5": { "class": `tx-white`, "href": `/temple` }, "7": { "href": `/temple/docs/index.html` }, "8": { "class": `github`, "href": `https://github.com/ossPhilippines/temple`, "target": `_blank` }, "9": { "class": `fab fa-github` }, "10": { "class": `npm`, "href": `https://www.npmjs.com/package/temple`, "target": `_blank` }, "11": { "class": `fab fa-npm text-white` }, "12": { "class": `discord`, "href": `https://discord.gg/open-source-software-ph-905496362982981723`, "target": `_blank` }, "13": { "class": `fab fa-discord text-white` }, "14": { "class": `left panel-left` }, "16": { "href": `/temple` }, "17": { "src": `/temple/temple-icon.png`, "alt": `Temple Logo` }, "19": { "class": `tx-white`, "href": `/temple` }, "20": { "class": `toggle fas fa-fw fa-chevron-left`, "click": toggle }, "23": { "href": `/temple/docs/index.html` }, "24": { "href": `/temple/docs/getting-started.html` }, "25": { "href": `/temple/docs/frequent-questions.html` }, "27": { "href": `/temple/docs/markup-syntax.html` }, "28": { "href": `/temple/docs/state-management.html` }, "29": { "href": `/temple/docs/component-strategy.html` }, "30": { "href": `/temple/docs/compiler-api.html` }, "31": { "href": `/temple/docs/client-api.html` }, "33": { "href": `/temple/docs/template-engine.html` }, "34": { "href": `/temple/docs/single-page.html` }, "35": { "href": `/temple/docs/static-site.html` }, "36": { "href": `/temple/docs/component-publisher.html` }, "37": { "href": `/temple/docs/developer-tools.html` }, "39": { "href": `/temple/docs/latest-updates.html` }, "40": { "href": `/temple/docs/contributing-guide.html` }, "41": { "href": `/temple/docs/known-issues.html` }, "42": { "class": `panel-main` }, "43": { "class": `docs container` }, "46": { "title": `Terminal` }, "47": { "lang": `bash` }, "48": { "solid": true, "curved": true, "info": true }, "49": { "class": `fas fa-info-circle` }, "50": { "target": `_blank`, "href": `https://marketplace.visualstudio.com/items?itemName=ossph.temple-language` }, "52": { "lang": `js`, "inline": true }, "53": { "title": `src/index.ts` }, "54": { "lang": `js`, "numbers": true, "trim": true, "detab": 12 }, "56": { "lang": `js`, "inline": true }, "57": { "title": `src/page.dtml` }, "58": { "numbers": true, "trim": true, "detab": 12 }, "60": { "title": `Terminal` }, "61": { "lang": `bash` }, "65": { "target": `_blank`, "href": `${examples}/with-http` }, "67": { "target": `_blank`, "href": `${examples}/with-express` }, "69": { "target": `_blank`, "href": `${examples}/with-fastify` }, "71": { "target": `_blank`, "href": `${examples}/with-hapi` }, "73": { "target": `_blank`, "href": `${examples}/with-koa` }, "75": { "target": `_blank`, "href": `${examples}/with-nest` }, "77": { "target": `_blank`, "href": `${examples}/with-restify` }, "79": { "target": `_blank`, "href": `${examples}/with-webpack` }, "83": { "href": `/temple/docs/engine.html` }, "85": { "href": `/temple/docs/spa.html` }, "87": { "href": `/temple/docs/static-sites.html` }, "89": { "href": `/temple/docs/publisher.html` }, "90": { "class": `pager` }, "91": { "class": `prev`, "href": `/temple/docs/index.html` }, "92": { "class": `fas fa-fw fa-chevron-left` }, "93": { "class": `next`, "href": `/temple/docs/frequent-questions.html` }, "94": { "class": `fas fa-fw fa-chevron-right` }, "95": { "class": `foot` } };
+    import_client6.data.delete("current");
+    const __BINDINGS__ = { "0": { "class": `head panel-head` }, "1": { "class": `menu fas fa-fw fa-bars`, "click": toggle }, "2": { "href": `/temple` }, "3": { "src": `/temple/temple-icon.png`, "alt": `Temple Logo` }, "5": { "class": `tx-white`, "href": `/temple` }, "7": { "href": `/temple/docs/index.html` }, "8": { "class": `github`, "href": `https://github.com/ossPhilippines/temple`, "target": `_blank` }, "9": { "class": `fab fa-github` }, "10": { "class": `npm`, "href": `https://www.npmjs.com/package/temple`, "target": `_blank` }, "11": { "class": `fab fa-npm text-white` }, "12": { "class": `discord`, "href": `https://discord.gg/open-source-software-ph-905496362982981723`, "target": `_blank` }, "13": { "class": `fab fa-discord text-white` }, "14": { "class": `left panel-left` }, "16": { "href": `/temple` }, "17": { "src": `/temple/temple-icon.png`, "alt": `Temple Logo` }, "19": { "class": `tx-white`, "href": `/temple` }, "20": { "class": `toggle fas fa-fw fa-chevron-left`, "click": toggle }, "23": { "href": `/temple/docs/index.html` }, "24": { "href": `/temple/docs/getting-started.html` }, "25": { "href": `/temple/docs/frequent-questions.html` }, "27": { "href": `/temple/docs/markup-syntax.html` }, "28": { "href": `/temple/docs/state-management.html` }, "29": { "href": `/temple/docs/component-strategy.html` }, "30": { "href": `/temple/docs/compiler-api.html` }, "31": { "href": `/temple/docs/client-api.html` }, "33": { "href": `/temple/docs/template-engine.html` }, "34": { "href": `/temple/docs/single-page.html` }, "35": { "href": `/temple/docs/static-site.html` }, "36": { "href": `/temple/docs/component-publisher.html` }, "37": { "href": `/temple/docs/developer-tools.html` }, "39": { "href": `/temple/docs/latest-updates.html` }, "40": { "href": `/temple/docs/contributing-guide.html` }, "41": { "href": `/temple/docs/known-issues.html` }, "42": { "class": `panel-main` }, "43": { "class": `docs container` }, "45": { "p": true, "trim": true }, "46": { "title": `Terminal` }, "47": { "lang": `bash` }, "48": { "solid": true, "curved": true, "info": true }, "49": { "class": `fas fa-info-circle` }, "50": { "target": `_blank`, "href": `https://marketplace.visualstudio.com/items?itemName=ossph.temple-language` }, "51": { "p": true, "trim": true }, "52": { "inline": true }, "53": { "title": `src/index.ts` }, "54": { "lang": `js`, "numbers": true, "trim": true, "detab": 12 }, "55": { "p": true, "trim": true }, "56": { "inline": true }, "57": { "title": `src/page.dtml` }, "58": { "numbers": true, "trim": true, "detab": 12 }, "59": { "p": true, "trim": true }, "60": { "title": `Terminal` }, "61": { "lang": `bash` }, "62": { "p": true, "trim": true }, "65": { "target": `_blank`, "href": `${examples}/with-http` }, "67": { "target": `_blank`, "href": `${examples}/with-express` }, "69": { "target": `_blank`, "href": `${examples}/with-fastify` }, "71": { "target": `_blank`, "href": `${examples}/with-hapi` }, "73": { "target": `_blank`, "href": `${examples}/with-koa` }, "75": { "target": `_blank`, "href": `${examples}/with-nest` }, "77": { "target": `_blank`, "href": `${examples}/with-restify` }, "79": { "target": `_blank`, "href": `${examples}/with-webpack` }, "80": { "p": true, "trim": true }, "83": { "href": `/temple/docs/template-engine.html` }, "85": { "href": `/temple/docs/single-page.html` }, "87": { "href": `/temple/docs/static-site.html` }, "89": { "href": `/temple/docs/component-publisher.html` }, "90": { "class": `pager` }, "91": { "class": `prev`, "href": `/temple/docs/index.html` }, "92": { "class": `fas fa-fw fa-chevron-left` }, "93": { "class": `next`, "href": `/temple/docs/frequent-questions.html` }, "94": { "class": `fas fa-fw fa-chevron-right` }, "95": { "class": `foot` } };
     for (const element of document.body.querySelectorAll("*")) {
       const attributes = Object.fromEntries(
         Array.from(element.attributes).map((attribute) => [
@@ -2950,25 +2921,23 @@ var TempleBundle = (() => {
           attribute.nodeValue.length > 0 ? attribute.nodeValue : true
         ])
       );
-      const id = String(import_client7.TempleRegistry.elements.size);
+      const id = String(import_client6.TempleRegistry.elements.size);
       if (__BINDINGS__[id]) {
         Object.assign(attributes, __BINDINGS__[id]);
         element.TempleAttributes = __BINDINGS__[id];
       }
-      import_client7.TempleRegistry.register(element, attributes);
+      import_client6.TempleRegistry.register(element, attributes);
     }
     customElements.define("panel-main", Main_fd7f1af6410c5b5c8e1f);
     customElements.define("ide-code", Code_6f36bc13bb6a166c7abc);
-    customElements.define("ide-preview", Preview_f99bb2771682cb0390ea);
     customElements.define("ide-app", App_05341fddbfd1fe4f273b);
     customElements.define("tui-alert", Alert_6b81bcb0566ce7f0cd2d);
     customElements.define("i18n-translate", Translate_7d25e372f5ffb5e39dad);
-    import_client7.emitter.emit("mounted", document.body);
+    import_client6.emitter.emit("mounted", document.body);
   });
   var components = {
     "PanelMain_fd7f1af6410c5b5c8e1f": Main_fd7f1af6410c5b5c8e1f,
     "IdeCode_6f36bc13bb6a166c7abc": Code_6f36bc13bb6a166c7abc,
-    "IdePreview_f99bb2771682cb0390ea": Preview_f99bb2771682cb0390ea,
     "IdeApp_05341fddbfd1fe4f273b": App_05341fddbfd1fe4f273b,
     "TuiAlert_6b81bcb0566ce7f0cd2d": Alert_6b81bcb0566ce7f0cd2d,
     "I18nTranslate_7d25e372f5ffb5e39dad": Translate_7d25e372f5ffb5e39dad
diff --git a/docs/build/server/13781afd4fbd704a9789.js b/docs/build/server/13781afd4fbd704a9789.js
index 724907c..256c953 100644
--- a/docs/build/server/13781afd4fbd704a9789.js
+++ b/docs/build/server/13781afd4fbd704a9789.js
@@ -793,6 +793,167 @@ ${document2}`;
                   ...this._toNodeList(_("Developer Tools"))
                 ]),
                 import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          Temple provides a separate package for a better development 
+          experience when working with server frameworks that utilize 
+          the native http module. Start by installing adding 
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "lang": `js`, "inline": true }, [
+                    ...this._toNodeList(`'@ossph/temple-dev'`)
+                  ]),
+                  import_server.TempleRegistry.createText(`
+          to your project.
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+        `, false),
+                import_server.TempleRegistry.createElement("ide-app", { "title": `Terminal` }, [
+                  import_server.TempleRegistry.createText(`
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "lang": `bash` }, [
+                    import_server.TempleRegistry.createText(`
+            npm install --save-dev @ossph/temple-dev
+          `, false)
+                  ]),
+                  import_server.TempleRegistry.createText(`
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          Next, import the `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "lang": `js`, "inline": true }, [
+                    ...this._toNodeList(`dev()`)
+                  ]),
+                  import_server.TempleRegistry.createText(` 
+          function from the package and use it in your existing 
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "lang": `js`, "inline": true }, [
+                    ...this._toNodeList(`'src/index.ts'`)
+                  ]),
+                  import_server.TempleRegistry.createText(` 
+          file to create a development server as shown in the example below.
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+        `, false),
+                import_server.TempleRegistry.createElement("ide-app", { "title": `src/index.ts` }, [
+                  import_server.TempleRegistry.createText(`
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "lang": `js`, "numbers": true, "trim": true, "detab": 12 }, [
+                    ...this._toNodeList(`
+            import http from 'http';
+            import temple from '@ossph/temple/compiler';
+            import { dev } from '@ossph/temple-dev';
+
+            //create temple compiler
+            const compiler = temple({ cwd: __dirname });
+            //1. create dev tools
+            const { router, refresh } = dev({ cwd: __dirname });
+
+            //create http server
+            const server = http.createServer(async (req, res) => {
+              //2. Add dev router
+              if (router(req, res)) return;
+              //if home page
+              if (req.url === '/') {
+                //3. sync builder with refresh server
+                refresh.sync(compiler.fromSource('./page.dtml'));
+                //compile the document
+                const html = await compiler.render('./page.dtml');
+                //... send response ...
+              }
+              //... other routes ...
+            });
+            //listen on port 3000
+            server.listen(3000);
+          `)
+                  ]),
+                  import_server.TempleRegistry.createText(`
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          Lastly, update the document file 
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "lang": `js`, "inline": true }, [
+                    ...this._toNodeList(`'src/page.dtml'`)
+                  ]),
+                  import_server.TempleRegistry.createText(` 
+          to include the development script 
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    ...this._toNodeList(`<script src="/dev.js"></script>`)
+                  ]),
+                  import_server.TempleRegistry.createText(` 
+          as shown below.
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+        `, false),
+                import_server.TempleRegistry.createElement("ide-app", { "title": `src/page.dtml` }, [
+                  import_server.TempleRegistry.createText(`
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "numbers": true, "trim": true, "detab": 12 }, [
+                    ...this._toNodeList(`
+            <script>
+              //... 
+            </script>
+            <html>
+              <head>
+                <!-- ... -->
+                <!-- 4. include dev script -->
+                <script src="/dev.js"></script>
+              </head>
+              <body>
+                <!-- ... -->
+              </body>
+            </html>
+          `)
+                  ]),
+                  import_server.TempleRegistry.createText(`
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          Run the following command in terminal.
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+        `, false),
+                import_server.TempleRegistry.createElement("ide-app", { "title": `Terminal` }, [
+                  import_server.TempleRegistry.createText(`
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "lang": `bash` }, [
+                    import_server.TempleRegistry.createText(`
+            npx ts-node src/index.ts
+          `, false)
+                  ]),
+                  import_server.TempleRegistry.createText(`
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          Whenever `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "lang": `js`, "inline": true }, [
+                    ...this._toNodeList(`'src/page.dtml'`)
+                  ]),
+                  import_server.TempleRegistry.createText(` 
+          is updated, the development server will automatically refresh 
+          the page. Components will also be updated in real-time.
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
         
         `, false),
                 import_server.TempleRegistry.createElement("nav", { "class": `pager` }, [
diff --git a/docs/build/server/2d721d6aed73f41f4e72.js b/docs/build/server/2d721d6aed73f41f4e72.js
index 3cbe48a..6d4195b 100644
--- a/docs/build/server/2d721d6aed73f41f4e72.js
+++ b/docs/build/server/2d721d6aed73f41f4e72.js
@@ -793,6 +793,230 @@ ${document2}`;
                   ...this._toNodeList(_("Template Engine"))
                 ]),
                 import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          Create a project with the following structure and files using 
+          Temple, TypeScript and the native Node.js HTTP server.
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+        `, false),
+                import_server.TempleRegistry.createElement("ide-app", { "panel": 410, "title": `My Project` }, [
+                  import_server.TempleRegistry.createText(`
+          `, false),
+                  import_server.TempleRegistry.createElement("div", { "class": `panel-head` }, [
+                    import_server.TempleRegistry.createText(`
+            `, false),
+                    import_server.TempleRegistry.createElement("div", { "class": `tabs` }, [
+                      import_server.TempleRegistry.createText(`
+              `, false),
+                      import_server.TempleRegistry.createElement("tui-tab", { "class": `tab active`, "group": `project`, "selector": `#index-ts` }, [
+                        import_server.TempleRegistry.createText(`
+                src/index.ts
+              `, false)
+                      ]),
+                      import_server.TempleRegistry.createText(`
+              `, false),
+                      import_server.TempleRegistry.createElement("tui-tab", { "class": `tab`, "group": `project`, "selector": `#page-dtml` }, [
+                        import_server.TempleRegistry.createText(`
+                src/page.dtml
+              `, false)
+                      ]),
+                      import_server.TempleRegistry.createText(`
+              `, false),
+                      import_server.TempleRegistry.createElement("tui-tab", { "class": `tab`, "group": `project`, "selector": `#package-json` }, [
+                        import_server.TempleRegistry.createText(`
+                package.json
+              `, false)
+                      ]),
+                      import_server.TempleRegistry.createText(`
+            `, false)
+                    ]),
+                    import_server.TempleRegistry.createText(`
+          `, false)
+                  ]),
+                  import_server.TempleRegistry.createText(`
+          `, false),
+                  import_server.TempleRegistry.createElement("div", { "class": `panel-left` }, [
+                    import_server.TempleRegistry.createText(`
+            `, false),
+                    import_server.TempleRegistry.createElement("h5", { "class": `folder` }, [
+                      import_server.TempleRegistry.createText(`
+              `, false),
+                      import_server.TempleRegistry.createElement("i", { "class": `fas fa-fw fa-chevron-down` }, []),
+                      import_server.TempleRegistry.createText(`
+              `, false),
+                      import_server.TempleRegistry.createElement("span", {}, [
+                        import_server.TempleRegistry.createText(`src`, false)
+                      ]),
+                      import_server.TempleRegistry.createText(`
+            `, false)
+                    ]),
+                    import_server.TempleRegistry.createText(`
+            `, false),
+                    import_server.TempleRegistry.createElement("tui-tab", { "class": `shift-1 block active`, "group": `project`, "selector": `#index-ts` }, [
+                      import_server.TempleRegistry.createText(`
+              `, false),
+                      import_server.TempleRegistry.createElement("i", { "class": `fas fa-fw fa-file` }, []),
+                      import_server.TempleRegistry.createText(`
+              index.ts
+            `, false)
+                    ]),
+                    import_server.TempleRegistry.createText(`
+            `, false),
+                    import_server.TempleRegistry.createElement("tui-tab", { "class": `shift-1 block`, "group": `project`, "selector": `#page-dtml` }, [
+                      import_server.TempleRegistry.createText(`
+              `, false),
+                      import_server.TempleRegistry.createElement("i", { "class": `fas fa-fw fa-file` }, []),
+                      import_server.TempleRegistry.createText(`
+              page.dtml
+            `, false)
+                    ]),
+                    import_server.TempleRegistry.createText(`
+            `, false),
+                    import_server.TempleRegistry.createElement("tui-tab", { "class": `block`, "group": `project`, "selector": `#package-json` }, [
+                      import_server.TempleRegistry.createText(`
+              `, false),
+                      import_server.TempleRegistry.createElement("i", { "class": `fas fa-fw fa-file` }, []),
+                      import_server.TempleRegistry.createText(`
+              package.json
+            `, false)
+                    ]),
+                    import_server.TempleRegistry.createText(`
+          `, false)
+                  ]),
+                  import_server.TempleRegistry.createText(`
+          `, false),
+                  import_server.TempleRegistry.createElement("div", { "class": `panel-main` }, [
+                    import_server.TempleRegistry.createText(`
+            `, false),
+                    import_server.TempleRegistry.createElement("main", {}, [
+                      import_server.TempleRegistry.createText(`
+              `, false),
+                      import_server.TempleRegistry.createElement("ide-code", { "id": `index-ts`, "lang": `js`, "numbers": true, "trim": true, "detab": 16 }, [
+                        ...this._toNodeList(`
+                import http from 'http';
+                import temple from '@ossph/temple/compiler';
+
+                //create temple compiler
+                const compiler = temple({ cwd: __dirname });
+                //create http server
+                const server = http.createServer(async (req, res) => {
+                  //if build asset...
+                  if (req.url?.startsWith('/build/')) {
+                    //get filename ie. abc123.js
+                    const filename = req.url.substring(7);
+                    //get asset
+                    const { type, content } = await compiler.asset(filename);
+                    //send response
+                    res.writeHead(200, { 'Content-Type': type });
+                    return res.end(content);
+                  //if home page
+                  } else if (req.url === '/') {
+                    res.writeHead(200, { 'Content-Type': 'text/html' });
+                    return res.end(await compiler.render('./index.dtml', {
+                      title: 'Hello World'
+                    }));
+                  }
+                });
+                //listen on port 3000
+                server.listen(3000);
+              `)
+                      ]),
+                      import_server.TempleRegistry.createText(`
+              `, false),
+                      import_server.TempleRegistry.createElement("ide-code", { "id": `page-dtml`, "style": `display:none`, "numbers": true, "trim": true, "detab": 16 }, [
+                        ...this._toNodeList(`
+                <style>
+                  .title { text-align: center; }
+                </style>
+                <script>
+                  import { env, props } from '@ossph/temple';
+                  const { BUILD_ID, APP_DATA } = env();
+                  const { title } = props();
+                </script>
+                <html>
+                  <head>
+                    <title>{title}</title>
+                    <link rel="stylesheet" type="text/css" href={\`/build/\${BUILD_ID}.css\`} />
+                    <script data-app={APP_DATA} src={\`/build/\${BUILD_ID}.js\`}></script>
+                  </head>
+                  <body>
+                    <h1 class="title">{title}</h1>
+                  </body>
+                </html>
+              `)
+                      ]),
+                      import_server.TempleRegistry.createText(`
+              `, false),
+                      import_server.TempleRegistry.createElement("ide-code", { "id": `package-json`, "style": `display:none`, "lang": `js`, "numbers": true, "trim": true, "detab": 16 }, [
+                        ...this._toNodeList(`
+                {
+                  "name": "my-project",
+                  "version": "1.0.0",
+                  "private": true,
+                  "scripts": {
+                    "dev": "ts-node ./src/index.ts"
+                  },
+                  "dependencies": {
+                    "@ossph/temple": "0.0.15"
+                  },
+                  "devDependencies": {
+                    "@ossph/temple-dev": "0.0.15",
+                    "@types/express": "4.17.21",
+                    "@types/node": "22.1.0",
+                    "ts-node": "10.9.2",
+                    "typescript": "5.5.4"
+                  }
+                }
+              `)
+                      ]),
+                      import_server.TempleRegistry.createText(`
+            `, false)
+                    ]),
+                    import_server.TempleRegistry.createText(`
+          `, false)
+                  ]),
+                  import_server.TempleRegistry.createText(`
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          The server file 
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    import_server.TempleRegistry.createText(`src/index.ts`, false)
+                  ]),
+                  import_server.TempleRegistry.createText(` 
+          implements a simple server utilizing the Temple compiler in 
+          its most simplistic form. The document file
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    import_server.TempleRegistry.createText(`src/page.dtml`, false)
+                  ]),
+                  import_server.TempleRegistry.createText(` 
+          is using the most basic Temple syntax. To test the script and 
+          see the results, run the following command in terminal.
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+        `, false),
+                import_server.TempleRegistry.createElement("ide-app", { "title": `Terminal` }, [
+                  import_server.TempleRegistry.createText(`
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "lang": `bash` }, [
+                    import_server.TempleRegistry.createText(`
+            npm i && npx ts-node src/index.ts
+          `, false)
+                  ]),
+                  import_server.TempleRegistry.createText(`
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
         
         `, false),
                 import_server.TempleRegistry.createElement("nav", { "class": `pager` }, [
diff --git a/docs/build/server/57e37fa233b38c87fe71.js b/docs/build/server/57e37fa233b38c87fe71.js
index 0e9d0b7..e969fd8 100644
--- a/docs/build/server/57e37fa233b38c87fe71.js
+++ b/docs/build/server/57e37fa233b38c87fe71.js
@@ -793,7 +793,1149 @@ ${document2}`;
                   ...this._toNodeList(_("Markup Syntax"))
                 ]),
                 import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("ide-app", { "title": `TL;DR` }, [
+                  import_server.TempleRegistry.createText(`
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "numbers": true, "detab": 12 }, [
+                    ...this._toNodeList(`
+            <link rel="import" type="component" href="@/modules/i18n/translate.tml" name="i18n-translate" />
+            
+            <style>
+              host: a {
+                color: #333;
+              }
+            </style>
+
+            <script>
+              import { getTitle, getDetail, getLink } from '@/data/article';
+              const title = getTitle();
+              const href = getLink();
+              const attributes = { target: '_blank' };
+            </script>
+
+            <a title={title} {href} {...attributes}>
+              {title}
+            </a>
+
+            <i18n-translate title=title>
+              {getDetail()}
+            </i18n-translate>
+          `)
+                  ]),
+                  import_server.TempleRegistry.createText(`
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          Components are the building blocks of Temple files. Documents 
+          and page level markup are written in 
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    import_server.TempleRegistry.createText(`.dtml`, false)
+                  ]),
+                  import_server.TempleRegistry.createText(` files. Components 
+          and templates are written in 
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    import_server.TempleRegistry.createText(`.tml`, false)
+                  ]),
+                  import_server.TempleRegistry.createText(` files. In both 
+          cases, the code is written in a superset of HTML.
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          The four sections that make up a temple file \u2014 imports, 
+          script, styles and markup \u2014 are all optional and can be 
+          used in any order.
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+        `, false),
+                import_server.TempleRegistry.createElement("ide-app", { "title": `Code Structure` }, [
+                  import_server.TempleRegistry.createText(`
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "numbers": true, "detab": 12 }, [
+                    ...this._toNodeList(`
+            <!-- imports go here -->
+
+            <style>
+              /* styles go here */
+            </style>
+
+            <script>
+              // logic goes here
+            </script>
+            
+            <!-- HTML goes here -->
+          `)
+                  ]),
+                  import_server.TempleRegistry.createText(`
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("h2", {}, [
+                  ...this._toNodeList(_("Imports"))
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          Imports are used to include additional components, templates 
+          and stylesheets in the current component. Components can 
+          be imported as a `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    import_server.TempleRegistry.createText(`template`, false)
+                  ]),
+                  import_server.TempleRegistry.createText(` or 
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    import_server.TempleRegistry.createText(`component`, false)
+                  ]),
+                  import_server.TempleRegistry.createText(` type.
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("ide-app", { "title": `Import Examples` }, [
+                  import_server.TempleRegistry.createText(`
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "numbers": true, "trim": true, "detab": 12 }, [
+                    ...this._toNodeList(`
+            <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/prism.min.css" />
+            <link rel="stylesheet" type="text/css" href="/styles/layout.css" />
+            <link rel="import" type="template" href="@/modules/html-head.tml" />
+            <link rel="import" type="component" href="@/modules/i18n/translate.tml" name="i18n-translate" />
+
+            <style>
+              /* styles go here */
+            </style>
+
+            <script>
+              // logic goes here
+            </script>
+            
+            <!-- HTML goes here -->
+          `)
+                  ]),
+                  import_server.TempleRegistry.createText(`
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
         
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          The `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    import_server.TempleRegistry.createText(`rel`, false)
+                  ]),
+                  import_server.TempleRegistry.createText(` attribute 
+          specifies the relationship between the current document and 
+          the linked resource. 
+          
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    import_server.TempleRegistry.createText(`rel="import"`, false)
+                  ]),
+                  import_server.TempleRegistry.createText(` denotes
+          that the imported resource is a component or template.
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          The `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    import_server.TempleRegistry.createText(`type`, false)
+                  ]),
+                  import_server.TempleRegistry.createText(` 
+          attribute specifies the type of the linked resource. 
+          
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    import_server.TempleRegistry.createText(`type="component"`, false)
+                  ]),
+                  import_server.TempleRegistry.createText(` 
+          imports a web component that can be used as regular markup
+          with attributes and children. 
+          
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    import_server.TempleRegistry.createText(`type="template"`, false)
+                  ]),
+                  import_server.TempleRegistry.createText(` 
+          imports a template partial that can be included in the current 
+          markup. Template partials do not process attributes or children
+          if given.
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          The 
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    import_server.TempleRegistry.createText(`href`, false)
+                  ]),
+                  import_server.TempleRegistry.createText(` attribute specifies
+          the URL of the linked resource. The 
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    import_server.TempleRegistry.createText(`name`, false)
+                  ]),
+                  import_server.TempleRegistry.createText(`
+          attribute specifies the tag name of the imported component or template.
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("h2", {}, [
+                  ...this._toNodeList(_("Styles"))
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          CSS styles inside a `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    ...this._toNodeList(`<style>`)
+                  ]),
+                  import_server.TempleRegistry.createText(` 
+          block enables the native `, false),
+                  import_server.TempleRegistry.createElement("a", { "target": `_blank`, "href": `https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM` }, [
+                    import_server.TempleRegistry.createText(`shadow DOM`, false)
+                  ]),
+                  import_server.TempleRegistry.createText(` and will be scoped only to that component. 
+          Additionally styles defined outside of the component such as 
+          global styles will not affect the component.
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          External stylesheets can be imported using the 
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    ...this._toNodeList(`<link>`)
+                  ]),
+                  import_server.TempleRegistry.createText(` tag or using 
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    ...this._toNodeList(`@import()`)
+                  ]),
+                  import_server.TempleRegistry.createText(` CSS directive. 
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          You can use host selectors to style an element from within 
+          a component. The `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    ...this._toNodeList(`:host`)
+                  ]),
+                  import_server.TempleRegistry.createText(` 
+          pseudo-class always applies styles to the root element of the 
+          web component.
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("ide-app", { "title": `Using :host` }, [
+                  import_server.TempleRegistry.createText(`
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "numbers": true, "trim": true, "detab": 12 }, [
+                    ...this._toNodeList(`
+            <style>
+              :host {
+                display: block;
+              }
+            </style>
+          `)
+                  ]),
+                  import_server.TempleRegistry.createText(`
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          You can also add conditional styles using the 
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    ...this._toNodeList(`:host`)
+                  ]),
+                  import_server.TempleRegistry.createText(` selector function. 
+          This can be used to style the host so long as it matches the 
+          given selector. For example, it can be used to select for 
+          hosts that have a given attribute or class.
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("ide-app", { "title": `:host Conditionals` }, [
+                  import_server.TempleRegistry.createText(`
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "numbers": true, "trim": true, "detab": 12 }, [
+                    ...this._toNodeList(`
+            <style>
+              :host([active]) {
+                background-color: #333;
+                color: #FFF;
+              }
+              :host(.active) {
+                background-color: #333;
+                color: #FFF;
+              }
+            </style>
+          `)
+                  ]),
+                  import_server.TempleRegistry.createText(`
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("h2", {}, [
+                  ...this._toNodeList(_("Scripts"))
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          The `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    ...this._toNodeList(`<script>`)
+                  ]),
+                  import_server.TempleRegistry.createText(` block is used 
+          to write TypeScript logic for the component. The script block 
+          can be used to define variables, functions, and event listeners.
+          Variables declared (or imported) at the top level are 
+          'visible' from the component's markup. 
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("ide-app", { "title": `Top-Level Variables` }, [
+                  import_server.TempleRegistry.createText(`
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "numbers": true, "trim": true, "detab": 12 }, [
+                    ...this._toNodeList(`
+            <script>
+              const title = 'Hello World';
+            </script>
+
+            <h1>{title}</h1>
+          `)
+                  ]),
+                  import_server.TempleRegistry.createText(`
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          The `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    ...this._toNodeList(`<script>`)
+                  ]),
+                  import_server.TempleRegistry.createText(` block can also 
+          be used to import variables from other components to be used
+          in the markup.
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("ide-app", { "title": `Importing Files` }, [
+                  import_server.TempleRegistry.createText(`
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "numbers": true, "trim": true, "detab": 12 }, [
+                    ...this._toNodeList(`
+            <script>
+              import getTitle from './getTitle';
+              const title = getTitle();
+            </script>
+
+            <h1 title={title}>{title}</h1>
+          `)
+                  ]),
+                  import_server.TempleRegistry.createText(`
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          You can use `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    ...this._toNodeList(`@/`)
+                  ]),
+                  import_server.TempleRegistry.createText(` to prefix the 
+          current working directory. This is useful when importing
+          files completely in a separate directory in your project
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("ide-app", { "title": `@ Imports` }, [
+                  import_server.TempleRegistry.createText(`
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "numbers": true, "trim": true, "detab": 12 }, [
+                    ...this._toNodeList(`
+            <script>
+              import getTitle from '@/data/getTitle';
+              const title = getTitle();
+            </script>
+
+            <h1 title={title}>{title}</h1>
+          `)
+                  ]),
+                  import_server.TempleRegistry.createText(`
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("h2", {}, [
+                  ...this._toNodeList(_("Markup"))
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          In order to be closer to the native, Temple follows the same 
+          standards and conventions as HTML5 web components. Temple 
+          components are compiled to native web components that possibly 
+          can be used in other projects any modern browser.
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("h3", {}, [
+                  ...this._toNodeList(_("Tag Names"))
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          Tag names must have at least one dash (-) in them. As such 
+          you probably want to name your element with two distinct words 
+          like `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    ...this._toNodeList(`i18n-translate`)
+                  ]),
+                  import_server.TempleRegistry.createText(`. You can 
+          use as many dashes as you want, you're not limited to one. 
+          Some specific rules to follow in order to make a valid tag 
+          name:
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("ul", {}, [
+                  import_server.TempleRegistry.createText(`
+          `, false),
+                  import_server.TempleRegistry.createElement("i18n-translate", { "li": true, "trim": true }, [
+                    import_server.TempleRegistry.createText(`
+            It must use all lowercase characters of the alphabet (a-z).
+          `, false)
+                  ]),
+                  import_server.TempleRegistry.createText(`
+          `, false),
+                  import_server.TempleRegistry.createElement("i18n-translate", { "li": true, "trim": true }, [
+                    import_server.TempleRegistry.createText(`
+            t must contain at least one dash (-).
+          `, false)
+                  ]),
+                  import_server.TempleRegistry.createText(`
+          `, false),
+                  import_server.TempleRegistry.createElement("i18n-translate", { "li": true, "trim": true }, [
+                    import_server.TempleRegistry.createText(`
+            It must not be an already reserved tag name including 
+            `, false),
+                    import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                      import_server.TempleRegistry.createText(`annotation-xml`, false)
+                    ]),
+                    import_server.TempleRegistry.createText(`,
+            `, false),
+                    import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                      import_server.TempleRegistry.createText(`color-profile`, false)
+                    ]),
+                    import_server.TempleRegistry.createText(`,
+            `, false),
+                    import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                      import_server.TempleRegistry.createText(`font-face`, false)
+                    ]),
+                    import_server.TempleRegistry.createText(`,
+            `, false),
+                    import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                      import_server.TempleRegistry.createText(`font-face-src`, false)
+                    ]),
+                    import_server.TempleRegistry.createText(`,
+            `, false),
+                    import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                      import_server.TempleRegistry.createText(`font-face-uri`, false)
+                    ]),
+                    import_server.TempleRegistry.createText(`,
+            `, false),
+                    import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                      import_server.TempleRegistry.createText(`font-face-format`, false)
+                    ]),
+                    import_server.TempleRegistry.createText(`,
+            `, false),
+                    import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                      import_server.TempleRegistry.createText(`font-face-name`, false)
+                    ]),
+                    import_server.TempleRegistry.createText(`, and 
+            `, false),
+                    import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                      import_server.TempleRegistry.createText(`missing-glyph`, false)
+                    ]),
+                    import_server.TempleRegistry.createText(`.
+          `, false)
+                  ]),
+                  import_server.TempleRegistry.createText(`
+          `, false),
+                  import_server.TempleRegistry.createElement("i18n-translate", { "li": true, "trim": true }, [
+                    import_server.TempleRegistry.createText(`
+            It must not contain symbols, like =, @, $.
+          `, false)
+                  ]),
+                  import_server.TempleRegistry.createText(`
+          `, false),
+                  import_server.TempleRegistry.createElement("i18n-translate", { "li": true, "trim": true }, [
+                    import_server.TempleRegistry.createText(`
+            It can contain underscores, and numbers.
+          `, false)
+                  ]),
+                  import_server.TempleRegistry.createText(`
+          `, false),
+                  import_server.TempleRegistry.createElement("i18n-translate", { "li": true, "trim": true }, [
+                    import_server.TempleRegistry.createText(`
+            It can contain characters from different alphabets, 
+            such as \xE9, \xF0, \xF6, \u7231.
+          `, false)
+                  ]),
+                  import_server.TempleRegistry.createText(`
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          Additionally, Temple works best with correct markup. The 
+          following standards should be followed:
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("ul", {}, [
+                  import_server.TempleRegistry.createText(`
+          `, false),
+                  import_server.TempleRegistry.createElement("i18n-translate", { "li": true, "trim": true }, [
+                    import_server.TempleRegistry.createText(`
+            Self closing tags like 
+            `, false),
+                    import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                      ...this._toNodeList(`<img />`)
+                    ]),
+                    import_server.TempleRegistry.createText(`,
+            `, false),
+                    import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                      ...this._toNodeList(`<link />`)
+                    ]),
+                    import_server.TempleRegistry.createText(`,
+            `, false),
+                    import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                      ...this._toNodeList(`<meta />`)
+                    ]),
+                    import_server.TempleRegistry.createText(`,
+            `, false),
+                    import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                      ...this._toNodeList(`<input />`)
+                    ]),
+                    import_server.TempleRegistry.createText(`
+            must have a slash before the closing.
+          `, false)
+                  ]),
+                  import_server.TempleRegistry.createText(`
+          `, false),
+                  import_server.TempleRegistry.createElement("i18n-translate", { "li": true, "trim": true }, [
+                    import_server.TempleRegistry.createText(`
+            When using tables, rows should be wrapped in a 
+            `, false),
+                    import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                      ...this._toNodeList(`<tbody>`)
+                    ]),
+                    import_server.TempleRegistry.createText(` tag and cells
+            should be wrapped in a `, false),
+                    import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                      ...this._toNodeList(`<tr>`)
+                    ]),
+                    import_server.TempleRegistry.createText(` 
+            tag. ie. `, false),
+                    import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                      ...this._toNodeList(`<table><tbody><tr><td>`)
+                    ]),
+                    import_server.TempleRegistry.createText(`
+          `, false)
+                  ]),
+                  import_server.TempleRegistry.createText(`
+          `, false),
+                  import_server.TempleRegistry.createElement("i18n-translate", { "li": true, "trim": true }, [
+                    import_server.TempleRegistry.createText(`
+            When using lists, items should be wrapped in a 
+            `, false),
+                    import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                      ...this._toNodeList(`<ul>`)
+                    ]),
+                    import_server.TempleRegistry.createText(` or 
+            `, false),
+                    import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                      ...this._toNodeList(`<ol>`)
+                    ]),
+                    import_server.TempleRegistry.createText(` tags.
+            ie. `, false),
+                    import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                      ...this._toNodeList(`<ul><li>`)
+                    ]),
+                    import_server.TempleRegistry.createText(`
+          `, false)
+                  ]),
+                  import_server.TempleRegistry.createText(`
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("tui-alert", { "solid": true, "curved": true, "info": true }, [
+                  import_server.TempleRegistry.createText(`
+          `, false),
+                  import_server.TempleRegistry.createElement("i", { "class": `fas fa-info-circle` }, []),
+                  import_server.TempleRegistry.createText(`
+          &nbsp;
+          Any markup auto corrected by browser will cause data syncing 
+          issues with Temple.
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          Temple components can loosely be self closing
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    ...this._toNodeList(`<i18n-translate />`)
+                  ]),
+                  import_server.TempleRegistry.createText(`
+          or expressed as a block
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    ...this._toNodeList(`<i18n-translate></i18n-translate>`)
+                  ]),
+                  import_server.TempleRegistry.createText(`.
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("h3", {}, [
+                  ...this._toNodeList(_("Attributes"))
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("ide-app", { "title": `Markup Expressions` }, [
+                  import_server.TempleRegistry.createText(`
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "numbers": true, "trim": true, "detab": 12 }, [
+                    ...this._toNodeList(`
+            <a title={title} {href} {...attributes}>
+              {title}
+            </a>
+            <i18n-translate title=title>
+              {detail}
+            </i18n-translate>
+          `)
+                  ]),
+                  import_server.TempleRegistry.createText(`
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          Attributes can be bound to expressions using the 
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    ...this._toNodeList(`{}`)
+                  ]),
+                  import_server.TempleRegistry.createText(` syntax. 
+          Expressions can be variables, functions, or any valid 
+          JavaScript expression. By default, attributes work exactly 
+          like their HTML counterparts.
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("ide-code", { "trim": true, "detab": 10 }, [
+                  ...this._toNodeList(`
+          <button type="button" disabled>Submit</button>
+        `)
+                ]),
+                import_server.TempleRegistry.createText(`
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          Traditional HTML attributes can be assigned string values or 
+          no value evaluates as `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    ...this._toNodeList(`true`)
+                  ]),
+                  import_server.TempleRegistry.createText(`.
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("ide-code", { "trim": true, "detab": 10 }, [
+                  ...this._toNodeList(`
+          <a title={title}>Click</a>
+        `)
+                ]),
+                import_server.TempleRegistry.createText(`
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          Attributes can be assigned variable names.
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("ide-code", { "trim": true, "detab": 10 }, [
+                  ...this._toNodeList(`
+          <a title=title>Click</a>
+        `)
+                ]),
+                import_server.TempleRegistry.createText(`
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          Variable names do not need to be wrapped in curly braces
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    ...this._toNodeList(`{}`)
+                  ]),
+                  import_server.TempleRegistry.createText(`.
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("ide-code", { "trim": true, "detab": 10 }, [
+                  ...this._toNodeList(`
+          <a {title}>Click</a>
+        `)
+                ]),
+                import_server.TempleRegistry.createText(`
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          Attributes with the same name as a variable can be assigned
+          by just wrapping curly braces. ie. 
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    ...this._toNodeList(`{title}`)
+                  ]),
+                  import_server.TempleRegistry.createText(`.
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("ide-code", { "trim": true, "detab": 10 }, [
+                  ...this._toNodeList(`
+          <script>
+            const attributes = { target: '_blank' };
+          </script>
+          <a {...attributes}>Click</a>
+        `)
+                ]),
+                import_server.TempleRegistry.createText(`
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          Spread operators can be used to assign multiple attributes.
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("ide-code", { "numbers": true, "trim": true, "detab": 10 }, [
+                  ...this._toNodeList(`
+          <script>
+            let count = 10
+            const metadata = { foo: 'bar', baz: 1, qux: true };
+            const data = () => metadata
+          </script>
+          <a {count} get={data} data-meta={metadata} disable={count < 10}>
+            Click
+          </a>
+        `)
+                ]),
+                import_server.TempleRegistry.createText(`
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          You can assign any valid JavaScript expression to an attribute.
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("h3", {}, [
+                  ...this._toNodeList(_("Conditionals"))
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("ide-app", { "title": `Conditionals` }, [
+                  import_server.TempleRegistry.createText(`
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "numbers": true, "trim": true, "detab": 12 }, [
+                    ...this._toNodeList(`
+            <if true={count > 10}>
+              <p>Count is greater than 10</p>
+            <elif true={count < 5} />
+              <p>Count is less than 5</p>
+            <else />
+              <p>Count is between 5 and 10</p>
+            </if>
+          `)
+                  ]),
+                  import_server.TempleRegistry.createText(`
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          Conditionals can be used to show or hide elements based on 
+          the value of a variable.
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("ide-code", { "numbers": true, "trim": true, "detab": 12 }, [
+                  ...this._toNodeList(`
+          <if true={count > 10}>
+            <p>Count is greater than 10</p>
+          </if>
+        `)
+                ]),
+                import_server.TempleRegistry.createText(`
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          The basic syntax for an if statement looks like this and can be 
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    ...this._toNodeList(`truesy`)
+                  ]),
+                  import_server.TempleRegistry.createText(` or 
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    ...this._toNodeList(`falsey`)
+                  ]),
+                  import_server.TempleRegistry.createText(`.
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("ide-code", { "numbers": true, "trim": true, "detab": 12 }, [
+                  ...this._toNodeList(`
+          <if false={count > 10}>
+            <p>Count is not greater than 10</p>
+          </if>
+        `)
+                ]),
+                import_server.TempleRegistry.createText(`
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          You can also use the `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    ...this._toNodeList(`false`)
+                  ]),
+                  import_server.TempleRegistry.createText(`
+          attribute to negate the condition.
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("ide-code", { "numbers": true, "trim": true, "detab": 12 }, [
+                  ...this._toNodeList(`
+          <if true={count > 10}>
+            <p>Count is greater than 10</p>
+          <else />
+            <p>Count is less than or equal to 10</p>
+          </if>
+        `)
+                ]),
+                import_server.TempleRegistry.createText(`
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          You can use the `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    ...this._toNodeList(`else`)
+                  ]),
+                  import_server.TempleRegistry.createText(` block to 
+          show content when the condition is false.
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("ide-code", { "numbers": true, "trim": true, "detab": 12 }, [
+                  ...this._toNodeList(`
+          <if true={count > 10}>
+            <p>Count is greater than 10</p>
+          <elif true={count < 5} />
+            <p>Count is less than 5</p>
+          </if>
+        `)
+                ]),
+                import_server.TempleRegistry.createText(`
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          You can use the `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    ...this._toNodeList(`elif`)
+                  ]),
+                  import_server.TempleRegistry.createText(` block to 
+          show content when the previous condition is false.
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("h3", {}, [
+                  ...this._toNodeList(_("Iterations"))
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("ide-app", { "title": `Each` }, [
+                  import_server.TempleRegistry.createText(`
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "numbers": true, "trim": true, "detab": 12 }, [
+                    ...this._toNodeList(`
+            <each key=index value=article from=articles>
+              <h1>#{index + 1} {article.title}</h1>
+              <p>{article.body}</p>
+            </each>
+          `)
+                  ]),
+                  import_server.TempleRegistry.createText(`
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          The `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    ...this._toNodeList(`<each>`)
+                  ]),
+                  import_server.TempleRegistry.createText(` block can be used 
+          to iterate over an array of items or objects.
+          The `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    ...this._toNodeList(`from`)
+                  ]),
+                  import_server.TempleRegistry.createText(` attribute value is 
+          required and can be an array, object or JavaScript expression 
+          that evaluates to an array or object. Both the 
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    ...this._toNodeList(`key`)
+                  ]),
+                  import_server.TempleRegistry.createText(` and 
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    ...this._toNodeList(`value`)
+                  ]),
+                  import_server.TempleRegistry.createText(` attributes are optional.
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("ide-code", { "numbers": true, "trim": true, "detab": 12 }, [
+                  ...this._toNodeList(`
+          <each value={article} from={articles}>
+            <h1>{article.title}</h1>
+            <p>{article.body}</p>
+          </each>
+        `)
+                ]),
+                import_server.TempleRegistry.createText(`
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          The value of `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    ...this._toNodeList(`value`)
+                  ]),
+                  import_server.TempleRegistry.createText(`, in this 
+          case `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    ...this._toNodeList(`article`)
+                  ]),
+                  import_server.TempleRegistry.createText(` can be used 
+          only with in the block. This can be any valid JavaScript 
+          variable name.
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("ide-code", { "numbers": true, "trim": true, "detab": 12 }, [
+                  ...this._toNodeList(`
+          <each key={index} from={[1, 2, 3]}>
+            <h1>#{index} ???</h1>
+          </each>
+        `)
+                ]),
+                import_server.TempleRegistry.createText(`
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          The value of `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    ...this._toNodeList(`key`)
+                  ]),
+                  import_server.TempleRegistry.createText(`, in this 
+          case `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    ...this._toNodeList(`index`)
+                  ]),
+                  import_server.TempleRegistry.createText(` can be used 
+          only with in the block. This can be any valid JavaScript 
+          variable name.
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("h3", {}, [
+                  ...this._toNodeList(_("Try/Catch"))
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("ide-app", { "title": `Try/Catch Example` }, [
+                  import_server.TempleRegistry.createText(`
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "numbers": true, "trim": true, "detab": 12 }, [
+                    ...this._toNodeList(`
+            <try>
+              <p>{mayCauseError()}</p>
+            <catch error={e} />
+              <p>Error: {e.message}</p>
+            </try>
+          `)
+                  ]),
+                  import_server.TempleRegistry.createText(`
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
+        `, false),
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
+                  import_server.TempleRegistry.createText(`
+          The `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    ...this._toNodeList(`<try><catch>`)
+                  ]),
+                  import_server.TempleRegistry.createText(` block can 
+          be used to catch errors that occur in the block. The 
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    ...this._toNodeList(`<catch>`)
+                  ]),
+                  import_server.TempleRegistry.createText(` block is required and 
+          can be used to handle the error.
+
+          The value of `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    ...this._toNodeList(`error`)
+                  ]),
+                  import_server.TempleRegistry.createText(`, in the  
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    ...this._toNodeList(`<catch>`)
+                  ]),
+                  import_server.TempleRegistry.createText(` block in this case
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    ...this._toNodeList(`e`)
+                  ]),
+                  import_server.TempleRegistry.createText(` is an 
+          `, false),
+                  import_server.TempleRegistry.createElement("ide-code", { "lang": `js`, "inline": true }, [
+                    ...this._toNodeList(`Error`)
+                  ]),
+                  import_server.TempleRegistry.createText(` object
+          that can only be used with in the block. 
+        `, false)
+                ]),
+                import_server.TempleRegistry.createText(`
+
         `, false),
                 import_server.TempleRegistry.createElement("nav", { "class": `pager` }, [
                   import_server.TempleRegistry.createText(`
diff --git a/docs/build/server/a67341498153885a2fc0.js b/docs/build/server/a67341498153885a2fc0.js
index a9d3700..1630b20 100644
--- a/docs/build/server/a67341498153885a2fc0.js
+++ b/docs/build/server/a67341498153885a2fc0.js
@@ -796,7 +796,7 @@ ${document2}`;
                 import_server.TempleRegistry.createText(`
 
         `, false),
-                import_server.TempleRegistry.createElement("p", {}, [
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
                   import_server.TempleRegistry.createText(`
           To use Temple in a project, run the following commands in terminal: 
         `, false)
@@ -831,12 +831,12 @@ ${document2}`;
                 ]),
                 import_server.TempleRegistry.createText(`
         `, false),
-                import_server.TempleRegistry.createElement("p", {}, [
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
                   import_server.TempleRegistry.createText(`
           Create a server file called
           `, false),
-                  import_server.TempleRegistry.createElement("ide-code", { "lang": `js`, "inline": true }, [
-                    import_server.TempleRegistry.createText(`'src/index.ts'`, false)
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    import_server.TempleRegistry.createText(`src/index.ts`, false)
                   ]),
                   import_server.TempleRegistry.createText(` 
           with the following code that uses the compiler.
@@ -864,12 +864,12 @@ ${document2}`;
                 ]),
                 import_server.TempleRegistry.createText(`
         `, false),
-                import_server.TempleRegistry.createElement("p", {}, [
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
                   import_server.TempleRegistry.createText(`
           Next, create a document file called
           `, false),
-                  import_server.TempleRegistry.createElement("ide-code", { "lang": `js`, "inline": true }, [
-                    import_server.TempleRegistry.createText(`'src/page.dtml'`, false)
+                  import_server.TempleRegistry.createElement("ide-code", { "inline": true }, [
+                    import_server.TempleRegistry.createText(`src/page.dtml`, false)
                   ]),
                   import_server.TempleRegistry.createText(` 
           with the following template code.
@@ -903,7 +903,7 @@ ${document2}`;
                 ]),
                 import_server.TempleRegistry.createText(`
         `, false),
-                import_server.TempleRegistry.createElement("p", {}, [
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
                   import_server.TempleRegistry.createText(`
           To test the script and see the results, run the following 
           command in terminal.
@@ -924,7 +924,7 @@ ${document2}`;
                 ]),
                 import_server.TempleRegistry.createText(`
         `, false),
-                import_server.TempleRegistry.createElement("p", {}, [
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
                   import_server.TempleRegistry.createText(`
           To see other getting started examples with various frameworks,
           you can check out the following links.
@@ -1042,7 +1042,7 @@ ${document2}`;
                 ]),
                 import_server.TempleRegistry.createText(` 
         `, false),
-                import_server.TempleRegistry.createElement("p", {}, [
+                import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, [
                   import_server.TempleRegistry.createText(`
           Depending on how you plan to use Temple, you can also look at 
           the following project modes.
@@ -1056,7 +1056,7 @@ ${document2}`;
                   import_server.TempleRegistry.createElement("li", {}, [
                     import_server.TempleRegistry.createText(`
             `, false),
-                    import_server.TempleRegistry.createElement("a", { "href": `/temple/docs/engine.html` }, [
+                    import_server.TempleRegistry.createElement("a", { "href": `/temple/docs/template-engine.html` }, [
                       import_server.TempleRegistry.createText(`
               Template Engine
             `, false)
@@ -1069,7 +1069,7 @@ ${document2}`;
                   import_server.TempleRegistry.createElement("li", {}, [
                     import_server.TempleRegistry.createText(`
             `, false),
-                    import_server.TempleRegistry.createElement("a", { "href": `/temple/docs/spa.html` }, [
+                    import_server.TempleRegistry.createElement("a", { "href": `/temple/docs/single-page.html` }, [
                       import_server.TempleRegistry.createText(`
               Single Page App
             `, false)
@@ -1082,7 +1082,7 @@ ${document2}`;
                   import_server.TempleRegistry.createElement("li", {}, [
                     import_server.TempleRegistry.createText(`
             `, false),
-                    import_server.TempleRegistry.createElement("a", { "href": `/temple/docs/static-sites.html` }, [
+                    import_server.TempleRegistry.createElement("a", { "href": `/temple/docs/static-site.html` }, [
                       import_server.TempleRegistry.createText(`
               Static Site Generator
             `, false)
@@ -1095,7 +1095,7 @@ ${document2}`;
                   import_server.TempleRegistry.createElement("li", {}, [
                     import_server.TempleRegistry.createText(`
             `, false),
-                    import_server.TempleRegistry.createElement("a", { "href": `/temple/docs/publisher.html` }, [
+                    import_server.TempleRegistry.createElement("a", { "href": `/temple/docs/component-publisher.html` }, [
                       import_server.TempleRegistry.createText(`
               Web Component Publisher
             `, false)
diff --git a/docs/docs/developer-tools.html b/docs/docs/developer-tools.html
index 3416a5b..c216da7 100644
--- a/docs/docs/developer-tools.html
+++ b/docs/docs/developer-tools.html
@@ -83,6 +83,91 @@ <h6>Contributing</h6>
     <panel-main class="panel-main">
       <div class="docs container">
         <h1>Developer Tools</h1>
+
+        <i18n-translate p trim>
+          Temple provides a separate package for a better development 
+          experience when working with server frameworks that utilize 
+          the native http module. Start by installing adding 
+          <ide-code lang="js" inline>'@ossph/temple-dev'</ide-code>
+          to your project.
+        </i18n-translate>
+        <ide-app title="Terminal">
+          <ide-code lang="bash">
+            npm install --save-dev @ossph/temple-dev
+          </ide-code>
+        </ide-app>
+        <i18n-translate p trim>
+          Next, import the <ide-code lang="js" inline>dev()</ide-code> 
+          function from the package and use it in your existing 
+          <ide-code lang="js" inline>'src/index.ts'</ide-code> 
+          file to create a development server as shown in the example below.
+        </i18n-translate>
+        <ide-app title="src/index.ts">
+          <ide-code lang="js" numbers trim >
+            import http from 'http';
+            import temple from '@ossph/temple/compiler';
+            import { dev } from '@ossph/temple-dev';
+
+            //create temple compiler
+            const compiler = temple({ cwd: __dirname });
+            //1. create dev tools
+            const { router, refresh } = dev({ cwd: __dirname });
+
+            //create http server
+            const server = http.createServer(async (req, res) =&gt; {
+              //2. Add dev router
+              if (router(req, res)) return;
+              //if home page
+              if (req.url === '/') {
+                //3. sync builder with refresh server
+                refresh.sync(compiler.fromSource('./page.dtml'));
+                //compile the document
+                const html = await compiler.render('./page.dtml');
+                //... send response ...
+              }
+              //... other routes ...
+            });
+            //listen on port 3000
+            server.listen(3000);
+          </ide-code>
+        </ide-app>
+        <i18n-translate p trim>
+          Lastly, update the document file 
+          <ide-code lang="js" inline>'src/page.dtml'</ide-code> 
+          to include the development script 
+          <ide-code inline>&lt;script src="/dev.js"&gt;&lt;/script&gt;</ide-code> 
+          as shown below.
+        </i18n-translate>
+        <ide-app title="src/page.dtml">
+          <ide-code numbers trim >
+            &lt;script&gt;
+              //... 
+            &lt;/script&gt;
+            &lt;html&gt;
+              &lt;head&gt;
+                &lt;!-- ... --&gt;
+                &lt;!-- 4. include dev script --&gt;
+                &lt;script src="/dev.js"&gt;&lt;/script&gt;
+              &lt;/head&gt;
+              &lt;body&gt;
+                &lt;!-- ... --&gt;
+              &lt;/body&gt;
+            &lt;/html&gt;
+          </ide-code>
+        </ide-app>
+        <i18n-translate p trim>
+          Run the following command in terminal.
+        </i18n-translate>
+        <ide-app title="Terminal">
+          <ide-code lang="bash">
+            npx ts-node src/index.ts
+          </ide-code>
+        </ide-app>
+        <i18n-translate p trim>
+          Whenever <ide-code lang="js" inline>'src/page.dtml'</ide-code> 
+          is updated, the development server will automatically refresh 
+          the page. Components will also be updated in real-time.
+        </i18n-translate>
         
         <nav class="pager">
           <a class="prev" href="/temple/docs/component-publisher.html">
diff --git a/docs/docs/getting-started.html b/docs/docs/getting-started.html
index c48406b..a3c9349 100644
--- a/docs/docs/getting-started.html
+++ b/docs/docs/getting-started.html
@@ -84,9 +84,9 @@ <h6>Contributing</h6>
       <div class="docs container">
         <h1>Getting Started</h1>
 
-        <p>
+        <i18n-translate p trim>
           To use Temple in a project, run the following commands in terminal: 
-        </p>
+        </i18n-translate>
         <ide-app title="Terminal">
           <ide-code lang="bash">
             npm install --save @ossph/temple && npm install --save-dev ts-node typescript
@@ -97,11 +97,11 @@ <h1>Getting Started</h1>
           &nbsp;
           Download the Temple editor plugin at the <a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=ossph.temple-language">Visual Studio Marketplace</a>.
         </tui-alert>
-        <p>
+        <i18n-translate p trim>
           Create a server file called
-          <ide-code lang="js" inline>'src/index.ts'</ide-code> 
+          <ide-code inline>src/index.ts</ide-code> 
           with the following code that uses the compiler.
-        </p>
+        </i18n-translate>
         <ide-app title="src/index.ts">
           <ide-code lang="js" numbers trim >
             //on server:
@@ -114,11 +114,11 @@ <h1>Getting Started</h1>
             console.log(results);
           </ide-code>
         </ide-app>
-        <p>
+        <i18n-translate p trim>
           Next, create a document file called
-          <ide-code lang="js" inline>'src/page.dtml'</ide-code> 
+          <ide-code inline>src/page.dtml</ide-code> 
           with the following template code.
-        </p>
+        </i18n-translate>
         <ide-app title="src/page.dtml">
           <ide-code numbers trim >
             &lt;style&gt;
@@ -137,19 +137,19 @@ <h1>Getting Started</h1>
             &lt;/html&gt;
           </ide-code>
         </ide-app>
-        <p>
+        <i18n-translate p trim>
           To test the script and see the results, run the following 
           command in terminal.
-        </p>
+        </i18n-translate>
         <ide-app title="Terminal">
           <ide-code lang="bash">
             npx ts-node src/index.ts
           </ide-code>
         </ide-app>
-        <p>
+        <i18n-translate p trim>
           To see other getting started examples with various frameworks,
           you can check out the following links.
-        </p>
+        </i18n-translate>
         <ul>
           <li>
             <a target="_blank" href="https://github.com/OSSPhilippines/temple/tree/main/examples/with-http">
@@ -192,28 +192,28 @@ <h1>Getting Started</h1>
             </a>
           </li>
         </ul> 
-        <p>
+        <i18n-translate p trim>
           Depending on how you plan to use Temple, you can also look at 
           the following project modes.
-        </p>
+        </i18n-translate>
         <ul>
           <li>
-            <a href="/temple/docs/engine.html">
+            <a href="/temple/docs/template-engine.html">
               Template Engine
             </a>
           </li>
           <li>
-            <a href="/temple/docs/spa.html">
+            <a href="/temple/docs/single-page.html">
               Single Page App
             </a>
           </li>
           <li>
-            <a href="/temple/docs/static-sites.html">
+            <a href="/temple/docs/static-site.html">
               Static Site Generator
             </a>
           </li>
           <li>
-            <a href="/temple/docs/publisher.html">
+            <a href="/temple/docs/component-publisher.html">
               Web Component Publisher
             </a>
           </li>
diff --git a/docs/docs/markup-syntax.html b/docs/docs/markup-syntax.html
index 2ff8390..6498ddb 100644
--- a/docs/docs/markup-syntax.html
+++ b/docs/docs/markup-syntax.html
@@ -83,7 +83,531 @@ <h6>Contributing</h6>
     <panel-main class="panel-main">
       <div class="docs container">
         <h1>Markup Syntax</h1>
+
+        <ide-app title="TL;DR">
+          <ide-code numbers >
+            &lt;link rel="import" type="component" href="@/modules/i18n/translate.tml" name="i18n-translate" /&gt;
+            
+            &lt;style&gt;
+              host: a {
+                color: #333;
+              }
+            &lt;/style&gt;
+
+            &lt;script&gt;
+              import { getTitle, getDetail, getLink } from '@/data/article';
+              const title = getTitle();
+              const href = getLink();
+              const attributes = { target: '_blank' };
+            &lt;/script&gt;
+
+            &lt;a title={title} {href} {...attributes}&gt;
+              {title}
+            &lt;/a&gt;
+
+            &lt;i18n-translate title=title&gt;
+              {getDetail()}
+            &lt;/i18n-translate&gt;
+          </ide-code>
+        </ide-app>
+
+        <i18n-translate p trim>
+          Components are the building blocks of Temple files. Documents 
+          and page level markup are written in 
+          <ide-code inline>.dtml</ide-code> files. Components 
+          and templates are written in 
+          <ide-code inline>.tml</ide-code> files. In both 
+          cases, the code is written in a superset of HTML.
+        </i18n-translate>
+        <i18n-translate p trim>
+          The four sections that make up a temple file — imports, 
+          script, styles and markup — are all optional and can be 
+          used in any order.
+        </i18n-translate>
+        <ide-app title="Code Structure">
+          <ide-code numbers >
+            &lt;!-- imports go here --&gt;
+
+            &lt;style&gt;
+              /* styles go here */
+            &lt;/style&gt;
+
+            &lt;script&gt;
+              // logic goes here
+            &lt;/script&gt;
+            
+            &lt;!-- HTML goes here --&gt;
+          </ide-code>
+        </ide-app>
+
+        <h2>Imports</h2>
+
+        <i18n-translate p trim>
+          Imports are used to include additional components, templates 
+          and stylesheets in the current component. Components can 
+          be imported as a <ide-code inline>template</ide-code> or 
+          <ide-code inline>component</ide-code> type.
+        </i18n-translate>
+
+        <ide-app title="Import Examples">
+          <ide-code numbers trim >
+            &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/prism.min.css" /&gt;
+            &lt;link rel="stylesheet" type="text/css" href="/styles/layout.css" /&gt;
+            &lt;link rel="import" type="template" href="@/modules/html-head.tml" /&gt;
+            &lt;link rel="import" type="component" href="@/modules/i18n/translate.tml" name="i18n-translate" /&gt;
+
+            &lt;style&gt;
+              /* styles go here */
+            &lt;/style&gt;
+
+            &lt;script&gt;
+              // logic goes here
+            &lt;/script&gt;
+            
+            &lt;!-- HTML goes here --&gt;
+          </ide-code>
+        </ide-app>
         
+        <i18n-translate p trim>
+          The <ide-code inline>rel</ide-code> attribute 
+          specifies the relationship between the current document and 
+          the linked resource. 
+          
+          <ide-code inline>rel="import"</ide-code> denotes
+          that the imported resource is a component or template.
+        </i18n-translate>
+        <i18n-translate p trim>
+          The <ide-code inline>type</ide-code> 
+          attribute specifies the type of the linked resource. 
+          
+          <ide-code inline>type="component"</ide-code> 
+          imports a web component that can be used as regular markup
+          with attributes and children. 
+          
+          <ide-code inline>type="template"</ide-code> 
+          imports a template partial that can be included in the current 
+          markup. Template partials do not process attributes or children
+          if given.
+        </i18n-translate>
+        <i18n-translate p trim>
+          The 
+          <ide-code inline>href</ide-code> attribute specifies
+          the URL of the linked resource. The 
+          <ide-code inline>name</ide-code>
+          attribute specifies the tag name of the imported component or template.
+        </i18n-translate>
+
+        <h2>Styles</h2>
+
+        <i18n-translate p trim>
+          CSS styles inside a <ide-code inline>&lt;style&gt;</ide-code> 
+          block enables the native <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM">shadow DOM</a> and will be scoped only to that component. 
+          Additionally styles defined outside of the component such as 
+          global styles will not affect the component.
+        </i18n-translate>
+
+        <i18n-translate p trim>
+          External stylesheets can be imported using the 
+          <ide-code inline>&lt;link&gt;</ide-code> tag or using 
+          <ide-code inline>@import()</ide-code> CSS directive. 
+        </i18n-translate>
+
+        <i18n-translate p trim>
+          You can use host selectors to style an element from within 
+          a component. The <ide-code inline>:host</ide-code> 
+          pseudo-class always applies styles to the root element of the 
+          web component.
+        </i18n-translate>
+
+        <ide-app title="Using :host">
+          <ide-code numbers trim >
+            &lt;style&gt;
+              :host {
+                display: block;
+              }
+            &lt;/style&gt;
+          </ide-code>
+        </ide-app>
+
+        <i18n-translate p trim>
+          You can also add conditional styles using the 
+          <ide-code inline>:host</ide-code> selector function. 
+          This can be used to style the host so long as it matches the 
+          given selector. For example, it can be used to select for 
+          hosts that have a given attribute or class.
+        </i18n-translate>
+
+        <ide-app title=":host Conditionals">
+          <ide-code numbers trim >
+            &lt;style&gt;
+              :host([active]) {
+                background-color: #333;
+                color: #FFF;
+              }
+              :host(.active) {
+                background-color: #333;
+                color: #FFF;
+              }
+            &lt;/style&gt;
+          </ide-code>
+        </ide-app>
+
+        <h2>Scripts</h2>
+
+        <i18n-translate p trim>
+          The <ide-code inline>&lt;script&gt;</ide-code> block is used 
+          to write TypeScript logic for the component. The script block 
+          can be used to define variables, functions, and event listeners.
+          Variables declared (or imported) at the top level are 
+          'visible' from the component's markup. 
+        </i18n-translate>
+
+        <ide-app title="Top-Level Variables">
+          <ide-code numbers trim >
+            &lt;script&gt;
+              const title = 'Hello World';
+            &lt;/script&gt;
+
+            &lt;h1&gt;{title}&lt;/h1&gt;
+          </ide-code>
+        </ide-app>
+
+        <i18n-translate p trim>
+          The <ide-code inline>&lt;script&gt;</ide-code> block can also 
+          be used to import variables from other components to be used
+          in the markup.
+        </i18n-translate>
+
+        <ide-app title="Importing Files">
+          <ide-code numbers trim >
+            &lt;script&gt;
+              import getTitle from './getTitle';
+              const title = getTitle();
+            &lt;/script&gt;
+
+            &lt;h1 title={title}&gt;{title}&lt;/h1&gt;
+          </ide-code>
+        </ide-app>
+
+        <i18n-translate p trim>
+          You can use <ide-code inline>@/</ide-code> to prefix the 
+          current working directory. This is useful when importing
+          files completely in a separate directory in your project
+        </i18n-translate>
+
+        <ide-app title="@ Imports">
+          <ide-code numbers trim >
+            &lt;script&gt;
+              import getTitle from '@/data/getTitle';
+              const title = getTitle();
+            &lt;/script&gt;
+
+            &lt;h1 title={title}&gt;{title}&lt;/h1&gt;
+          </ide-code>
+        </ide-app>
+
+        <h2>Markup</h2>
+
+        <i18n-translate p trim>
+          In order to be closer to the native, Temple follows the same 
+          standards and conventions as HTML5 web components. Temple 
+          components are compiled to native web components that possibly 
+          can be used in other projects any modern browser.
+        </i18n-translate>
+
+        <h3>Tag Names</h3>
+
+        <i18n-translate p trim>
+          Tag names must have at least one dash (-) in them. As such 
+          you probably want to name your element with two distinct words 
+          like <ide-code inline>i18n-translate</ide-code>. You can 
+          use as many dashes as you want, you're not limited to one. 
+          Some specific rules to follow in order to make a valid tag 
+          name:
+        </i18n-translate>
+
+        <ul>
+          <i18n-translate li trim>
+            It must use all lowercase characters of the alphabet (a-z).
+          </i18n-translate>
+          <i18n-translate li trim>
+            t must contain at least one dash (-).
+          </i18n-translate>
+          <i18n-translate li trim>
+            It must not be an already reserved tag name including 
+            <ide-code inline>annotation-xml</ide-code>,
+            <ide-code inline>color-profile</ide-code>,
+            <ide-code inline>font-face</ide-code>,
+            <ide-code inline>font-face-src</ide-code>,
+            <ide-code inline>font-face-uri</ide-code>,
+            <ide-code inline>font-face-format</ide-code>,
+            <ide-code inline>font-face-name</ide-code>, and 
+            <ide-code inline>missing-glyph</ide-code>.
+          </i18n-translate>
+          <i18n-translate li trim>
+            It must not contain symbols, like =, @, $.
+          </i18n-translate>
+          <i18n-translate li trim>
+            It can contain underscores, and numbers.
+          </i18n-translate>
+          <i18n-translate li trim>
+            It can contain characters from different alphabets, 
+            such as é, ð, ö, 爱.
+          </i18n-translate>
+        </ul>
+
+        <i18n-translate p trim>
+          Additionally, Temple works best with correct markup. The 
+          following standards should be followed:
+        </i18n-translate>
+
+        <ul>
+          <i18n-translate li trim>
+            Self closing tags like 
+            <ide-code inline>&lt;img /&gt;</ide-code>,
+            <ide-code inline>&lt;link /&gt;</ide-code>,
+            <ide-code inline>&lt;meta /&gt;</ide-code>,
+            <ide-code inline>&lt;input /&gt;</ide-code>
+            must have a slash before the closing.
+          </i18n-translate>
+          <i18n-translate li trim>
+            When using tables, rows should be wrapped in a 
+            <ide-code inline>&lt;tbody&gt;</ide-code> tag and cells
+            should be wrapped in a <ide-code inline>&lt;tr&gt;</ide-code> 
+            tag. ie. <ide-code inline>&lt;table&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;</ide-code>
+          </i18n-translate>
+          <i18n-translate li trim>
+            When using lists, items should be wrapped in a 
+            <ide-code inline>&lt;ul&gt;</ide-code> or 
+            <ide-code inline>&lt;ol&gt;</ide-code> tags.
+            ie. <ide-code inline>&lt;ul&gt;&lt;li&gt;</ide-code>
+          </i18n-translate>
+        </ul>
+
+        <tui-alert solid curved info>
+          <i class="fas fa-info-circle"></i>
+          &nbsp;
+          Any markup auto corrected by browser will cause data syncing 
+          issues with Temple.
+        </tui-alert>
+
+        <i18n-translate p trim>
+          Temple components can loosely be self closing
+          <ide-code inline>&lt;i18n-translate /&gt;</ide-code>
+          or expressed as a block
+          <ide-code inline>&lt;i18n-translate&gt;&lt;/i18n-translate&gt;</ide-code>.
+        </i18n-translate>
+
+        <h3>Attributes</h3>
+
+        <ide-app title="Markup Expressions">
+          <ide-code numbers trim >
+            &lt;a title={title} {href} {...attributes}&gt;
+              {title}
+            &lt;/a&gt;
+            &lt;i18n-translate title=title&gt;
+              {detail}
+            &lt;/i18n-translate&gt;
+          </ide-code>
+        </ide-app>
+
+        <i18n-translate p trim>
+          Attributes can be bound to expressions using the 
+          <ide-code inline>{}</ide-code> syntax. 
+          Expressions can be variables, functions, or any valid 
+          JavaScript expression. By default, attributes work exactly 
+          like their HTML counterparts.
+        </i18n-translate>
+
+        <ide-code trim >
+          &lt;button type="button" disabled&gt;Submit&lt;/button&gt;
+        </ide-code>
+        <i18n-translate p trim>
+          Traditional HTML attributes can be assigned string values or 
+          no value evaluates as <ide-code inline>true</ide-code>.
+        </i18n-translate>
+
+        <ide-code trim >
+          &lt;a title={title}&gt;Click&lt;/a&gt;
+        </ide-code>
+        <i18n-translate p trim>
+          Attributes can be assigned variable names.
+        </i18n-translate>
+
+        <ide-code trim >
+          &lt;a title=title&gt;Click&lt;/a&gt;
+        </ide-code>
+        <i18n-translate p trim>
+          Variable names do not need to be wrapped in curly braces
+          <ide-code inline>{}</ide-code>.
+        </i18n-translate>
+
+        <ide-code trim >
+          &lt;a {title}&gt;Click&lt;/a&gt;
+        </ide-code>
+        <i18n-translate p trim>
+          Attributes with the same name as a variable can be assigned
+          by just wrapping curly braces. ie. 
+          <ide-code inline>{title}</ide-code>.
+        </i18n-translate>
+
+        <ide-code trim >
+          &lt;script&gt;
+            const attributes = { target: '_blank' };
+          &lt;/script&gt;
+          &lt;a {...attributes}&gt;Click&lt;/a&gt;
+        </ide-code>
+        <i18n-translate p trim>
+          Spread operators can be used to assign multiple attributes.
+        </i18n-translate>
+
+        <ide-code numbers trim >
+          &lt;script&gt;
+            let count = 10
+            const metadata = { foo: 'bar', baz: 1, qux: true };
+            const data = () =&gt; metadata
+          &lt;/script&gt;
+          &lt;a {count} get={data} data-meta={metadata} disable={count &lt; 10}&gt;
+            Click
+          &lt;/a&gt;
+        </ide-code>
+        <i18n-translate p trim>
+          You can assign any valid JavaScript expression to an attribute.
+        </i18n-translate>
+
+        <h3>Conditionals</h3>
+
+        <ide-app title="Conditionals">
+          <ide-code numbers trim >
+            &lt;if true={count &gt; 10}&gt;
+              &lt;p&gt;Count is greater than 10&lt;/p&gt;
+            &lt;elif true={count &lt; 5} /&gt;
+              &lt;p&gt;Count is less than 5&lt;/p&gt;
+            &lt;else /&gt;
+              &lt;p&gt;Count is between 5 and 10&lt;/p&gt;
+            &lt;/if&gt;
+          </ide-code>
+        </ide-app>
+        <i18n-translate p trim>
+          Conditionals can be used to show or hide elements based on 
+          the value of a variable.
+        </i18n-translate>
+
+        <ide-code numbers trim >
+          &lt;if true={count &gt; 10}&gt;
+            &lt;p&gt;Count is greater than 10&lt;/p&gt;
+          &lt;/if&gt;
+        </ide-code>
+        <i18n-translate p trim>
+          The basic syntax for an if statement looks like this and can be 
+          <ide-code inline>truesy</ide-code> or 
+          <ide-code inline>falsey</ide-code>.
+        </i18n-translate>
+
+        <ide-code numbers trim >
+          &lt;if false={count &gt; 10}&gt;
+            &lt;p&gt;Count is not greater than 10&lt;/p&gt;
+          &lt;/if&gt;
+        </ide-code>
+        <i18n-translate p trim>
+          You can also use the <ide-code inline>false</ide-code>
+          attribute to negate the condition.
+        </i18n-translate>
+
+        <ide-code numbers trim >
+          &lt;if true={count &gt; 10}&gt;
+            &lt;p&gt;Count is greater than 10&lt;/p&gt;
+          &lt;else /&gt;
+            &lt;p&gt;Count is less than or equal to 10&lt;/p&gt;
+          &lt;/if&gt;
+        </ide-code>
+        <i18n-translate p trim>
+          You can use the <ide-code inline>else</ide-code> block to 
+          show content when the condition is false.
+        </i18n-translate>
+
+        <ide-code numbers trim >
+          &lt;if true={count &gt; 10}&gt;
+            &lt;p&gt;Count is greater than 10&lt;/p&gt;
+          &lt;elif true={count &lt; 5} /&gt;
+            &lt;p&gt;Count is less than 5&lt;/p&gt;
+          &lt;/if&gt;
+        </ide-code>
+        <i18n-translate p trim>
+          You can use the <ide-code inline>elif</ide-code> block to 
+          show content when the previous condition is false.
+        </i18n-translate>
+
+        <h3>Iterations</h3>
+
+        <ide-app title="Each">
+          <ide-code numbers trim >
+            &lt;each key=index value=article from=articles&gt;
+              &lt;h1&gt;#{index + 1} {article.title}&lt;/h1&gt;
+              &lt;p&gt;{article.body}&lt;/p&gt;
+            &lt;/each&gt;
+          </ide-code>
+        </ide-app>
+        <i18n-translate p trim>
+          The <ide-code inline>&lt;each&gt;</ide-code> block can be used 
+          to iterate over an array of items or objects.
+          The <ide-code inline>from</ide-code> attribute value is 
+          required and can be an array, object or JavaScript expression 
+          that evaluates to an array or object. Both the 
+          <ide-code inline>key</ide-code> and 
+          <ide-code inline>value</ide-code> attributes are optional.
+        </i18n-translate>
+
+        <ide-code numbers trim >
+          &lt;each value={article} from={articles}&gt;
+            &lt;h1&gt;{article.title}&lt;/h1&gt;
+            &lt;p&gt;{article.body}&lt;/p&gt;
+          &lt;/each&gt;
+        </ide-code>
+        <i18n-translate p trim>
+          The value of <ide-code inline>value</ide-code>, in this 
+          case <ide-code inline>article</ide-code> can be used 
+          only with in the block. This can be any valid JavaScript 
+          variable name.
+        </i18n-translate>
+
+        <ide-code numbers trim >
+          &lt;each key={index} from={[1, 2, 3]}&gt;
+            &lt;h1&gt;#{index} ???&lt;/h1&gt;
+          &lt;/each&gt;
+        </ide-code>
+        <i18n-translate p trim>
+          The value of <ide-code inline>key</ide-code>, in this 
+          case <ide-code inline>index</ide-code> can be used 
+          only with in the block. This can be any valid JavaScript 
+          variable name.
+        </i18n-translate>
+
+        <h3>Try/Catch</h3>
+
+        <ide-app title="Try/Catch Example">
+          <ide-code numbers trim >
+            &lt;try&gt;
+              &lt;p&gt;{mayCauseError()}&lt;/p&gt;
+            &lt;catch error={e} /&gt;
+              &lt;p&gt;Error: {e.message}&lt;/p&gt;
+            &lt;/try&gt;
+          </ide-code>
+        </ide-app>
+
+        <i18n-translate p trim>
+          The <ide-code inline>&lt;try&gt;&lt;catch&gt;</ide-code> block can 
+          be used to catch errors that occur in the block. The 
+          <ide-code inline>&lt;catch&gt;</ide-code> block is required and 
+          can be used to handle the error.
+
+          The value of <ide-code inline>error</ide-code>, in the  
+          <ide-code inline>&lt;catch&gt;</ide-code> block in this case
+          <ide-code inline>e</ide-code> is an 
+          <ide-code lang="js" inline>Error</ide-code> object
+          that can only be used with in the block. 
+        </i18n-translate>
+
         <nav class="pager">
           <a class="prev" href="/temple/docs/frequent-questions.html">
             <i class="fas fa-fw fa-chevron-left"></i>
diff --git a/docs/docs/template-engine.html b/docs/docs/template-engine.html
index 4ddffae..9243196 100644
--- a/docs/docs/template-engine.html
+++ b/docs/docs/template-engine.html
@@ -83,6 +83,130 @@ <h6>Contributing</h6>
     <panel-main class="panel-main">
       <div class="docs container">
         <h1>Template Engine</h1>
+
+        <i18n-translate p trim>
+          Create a project with the following structure and files using 
+          Temple, TypeScript and the native Node.js HTTP server.
+        </i18n-translate>
+        <ide-app  title="My Project">
+          <div class="panel-head">
+            <div class="tabs">
+              <tui-tab class="tab active" group="project" selector="#index-ts">
+                src/index.ts
+              </tui-tab>
+              <tui-tab class="tab" group="project" selector="#page-dtml">
+                src/page.dtml
+              </tui-tab>
+              <tui-tab class="tab" group="project" selector="#package-json">
+                package.json
+              </tui-tab>
+            </div>
+          </div>
+          <div class="panel-left">
+            <h5 class="folder">
+              <i class="fas fa-fw fa-chevron-down"></i>
+              <span>src</span>
+            </h5>
+            <tui-tab class="shift-1 block active" group="project" selector="#index-ts">
+              <i class="fas fa-fw fa-file"></i>
+              index.ts
+            </tui-tab>
+            <tui-tab class="shift-1 block" group="project" selector="#page-dtml">
+              <i class="fas fa-fw fa-file"></i>
+              page.dtml
+            </tui-tab>
+            <tui-tab class="block" group="project" selector="#package-json">
+              <i class="fas fa-fw fa-file"></i>
+              package.json
+            </tui-tab>
+          </div>
+          <div class="panel-main">
+            <main>
+              <ide-code id="index-ts" lang="js" numbers trim >
+                import http from 'http';
+                import temple from '@ossph/temple/compiler';
+
+                //create temple compiler
+                const compiler = temple({ cwd: __dirname });
+                //create http server
+                const server = http.createServer(async (req, res) =&gt; {
+                  //if build asset...
+                  if (req.url?.startsWith('/build/')) {
+                    //get filename ie. abc123.js
+                    const filename = req.url.substring(7);
+                    //get asset
+                    const { type, content } = await compiler.asset(filename);
+                    //send response
+                    res.writeHead(200, { 'Content-Type': type });
+                    return res.end(content);
+                  //if home page
+                  } else if (req.url === '/') {
+                    res.writeHead(200, { 'Content-Type': 'text/html' });
+                    return res.end(await compiler.render('./index.dtml', {
+                      title: 'Hello World'
+                    }));
+                  }
+                });
+                //listen on port 3000
+                server.listen(3000);
+              </ide-code>
+              <ide-code id="page-dtml" style="display:none" numbers trim >
+                &lt;style&gt;
+                  .title { text-align: center; }
+                &lt;/style&gt;
+                &lt;script&gt;
+                  import { env, props } from '@ossph/temple';
+                  const { BUILD_ID, APP_DATA } = env();
+                  const { title } = props();
+                &lt;/script&gt;
+                &lt;html&gt;
+                  &lt;head&gt;
+                    &lt;title&gt;{title}&lt;/title&gt;
+                    &lt;link rel="stylesheet" type="text/css" href={`/build/${BUILD_ID}.css`} /&gt;
+                    &lt;script data-app={APP_DATA} src={`/build/${BUILD_ID}.js`}&gt;&lt;/script&gt;
+                  &lt;/head&gt;
+                  &lt;body&gt;
+                    &lt;h1 class="title"&gt;{title}&lt;/h1&gt;
+                  &lt;/body&gt;
+                &lt;/html&gt;
+              </ide-code>
+              <ide-code id="package-json" style="display:none" lang="js" numbers trim >
+                {
+                  "name": "my-project",
+                  "version": "1.0.0",
+                  "private": true,
+                  "scripts": {
+                    "dev": "ts-node ./src/index.ts"
+                  },
+                  "dependencies": {
+                    "@ossph/temple": "0.0.15"
+                  },
+                  "devDependencies": {
+                    "@ossph/temple-dev": "0.0.15",
+                    "@types/express": "4.17.21",
+                    "@types/node": "22.1.0",
+                    "ts-node": "10.9.2",
+                    "typescript": "5.5.4"
+                  }
+                }
+              </ide-code>
+            </main>
+          </div>
+        </ide-app>
+        <i18n-translate p trim>
+          The server file 
+          <ide-code inline>src/index.ts</ide-code> 
+          implements a simple server utilizing the Temple compiler in 
+          its most simplistic form. The document file
+          <ide-code inline>src/page.dtml</ide-code> 
+          is using the most basic Temple syntax. To test the script and 
+          see the results, run the following command in terminal.
+        </i18n-translate>
+        <ide-app title="Terminal">
+          <ide-code lang="bash">
+            npm i && npx ts-node src/index.ts
+          </ide-code>
+        </ide-app>
         
         <nav class="pager">
           <a class="prev" href="/temple/docs/client-api.html">
diff --git a/docs/styles/theme.css b/docs/styles/theme.css
index 781afef..7c31f19 100644
--- a/docs/styles/theme.css
+++ b/docs/styles/theme.css
@@ -562,13 +562,19 @@ a, a:link a:hover, a:active, a:visited {
 }
 .docs h1 {
   color: var(--fg-primary);
-  margin: 20px 0;
+  margin: 40px 0;
   text-transform: uppercase; 
 }
 .docs h2 { 
+  border-bottom: 1px solid #333333;
   color: var(--fg-primary);
+  margin: 40px 0 20px;
+  padding-bottom: 10px;
   text-transform: uppercase; 
 }
+.docs h3 { 
+  margin: 20px 0;
+}
 .docs a, 
 .docs a:link, 
 .docs a:hover, 
@@ -708,17 +714,17 @@ ide-app .window .head .title {
 }
 
 ide-app .window .body {
-  background-color: #101113;
+  background-color: #000000;
   color: #ABB2BF;
   margin: 0;
   padding: 0;
   position: relative;
+  overflow: auto;
 }
 
 ide-app .split-view {
   background-color: #000000;
   display: flex;
-  overflow: auto;
 }
 ide-app .split-view ide-code {
   flex-basis: 50%;
diff --git a/packages/temple-web/src/modules/i18n/translate.tml b/packages/temple-web/src/modules/i18n/translate.tml
index 0300e78..1894f37 100644
--- a/packages/temple-web/src/modules/i18n/translate.tml
+++ b/packages/temple-web/src/modules/i18n/translate.tml
@@ -2,7 +2,7 @@
   import { translate } from './index';
   import { props, children } from '@ossph/temple';
 
-  const { trim = false, p = false, div = false } = props();
+  const { trim = false, p = false, li = false, div = false } = props();
   const childlist = children();
   const phrase: string = [];
   const variables: Node = [];
@@ -31,6 +31,8 @@
 </script>
 <if true={p}>
   <p>{translations}</p>
+<elif true={li} />
+  <li>{translations}</li>
 <elif true={div} />
   <div>{translations}</div>
 <else />
diff --git a/packages/temple-web/src/pages/docs/developer-tools.dtml b/packages/temple-web/src/pages/docs/developer-tools.dtml
index 6f21b11..ac7fd44 100644
--- a/packages/temple-web/src/pages/docs/developer-tools.dtml
+++ b/packages/temple-web/src/pages/docs/developer-tools.dtml
@@ -2,6 +2,8 @@
 <link rel="import" type="template" href="@/modules/panel/head.tml" name="panel-head" />
 <link rel="import" type="template" href="@/modules/panel/left.tml" name="panel-left" />
 <link rel="import" type="component" href="@/modules/panel/main.tml" name="panel-main" />
+<link rel="import" type="component" href="@/modules/ide/code.tml" name="ide-code" />
+<link rel="import" type="component" href="@/modules/ide/app.tml" name="ide-app" />
 <link rel="import" type="component" href="@/modules/i18n/translate.tml" name="i18n-translate" />
 <script>
   import { env } from '@ossph/temple';
@@ -22,6 +24,91 @@
     <panel-main class="panel-main">
       <div class="docs container">
         <h1>{_('Developer Tools')}</h1>
+
+        <i18n-translate p trim>
+          Temple provides a separate package for a better development 
+          experience when working with server frameworks that utilize 
+          the native http module. Start by installing adding 
+          <ide-code lang="js" inline>{`'@ossph/temple-dev'`}</ide-code>
+          to your project.
+        </i18n-translate>
+        <ide-app title="Terminal">
+          <ide-code lang="bash">
+            npm install --save-dev @ossph/temple-dev
+          </ide-code>
+        </ide-app>
+        <i18n-translate p trim>
+          Next, import the <ide-code lang="js" inline>{`dev()`}</ide-code> 
+          function from the package and use it in your existing 
+          <ide-code lang="js" inline>{`'src/index.ts'`}</ide-code> 
+          file to create a development server as shown in the example below.
+        </i18n-translate>
+        <ide-app title="src/index.ts">
+          <ide-code lang="js" numbers trim detab={12}>{`
+            import http from 'http';
+            import temple from '@ossph/temple/compiler';
+            import { dev } from '@ossph/temple-dev';
+
+            //create temple compiler
+            const compiler = temple({ cwd: __dirname });
+            //1. create dev tools
+            const { router, refresh } = dev({ cwd: __dirname });
+
+            //create http server
+            const server = http.createServer(async (req, res) => {
+              //2. Add dev router
+              if (router(req, res)) return;
+              //if home page
+              if (req.url === '/') {
+                //3. sync builder with refresh server
+                refresh.sync(compiler.fromSource('./page.dtml'));
+                //compile the document
+                const html = await compiler.render('./page.dtml');
+                //... send response ...
+              }
+              //... other routes ...
+            });
+            //listen on port 3000
+            server.listen(3000);
+          `}</ide-code>
+        </ide-app>
+        <i18n-translate p trim>
+          Lastly, update the document file 
+          <ide-code lang="js" inline>{`'src/page.dtml'`}</ide-code> 
+          to include the development script 
+          <ide-code inline>{`<script src="/dev.js"></script>`}</ide-code> 
+          as shown below.
+        </i18n-translate>
+        <ide-app title="src/page.dtml">
+          <ide-code numbers trim detab={12}>{`
+            <script>
+              //... 
+            </script>
+            <html>
+              <head>
+                <!-- ... -->
+                <!-- 4. include dev script -->
+                <script src="/dev.js"></script>
+              </head>
+              <body>
+                <!-- ... -->
+              </body>
+            </html>
+          `}</ide-code>
+        </ide-app>
+        <i18n-translate p trim>
+          Run the following command in terminal.
+        </i18n-translate>
+        <ide-app title="Terminal">
+          <ide-code lang="bash">
+            npx ts-node src/index.ts
+          </ide-code>
+        </ide-app>
+        <i18n-translate p trim>
+          Whenever <ide-code lang="js" inline>{`'src/page.dtml'`}</ide-code> 
+          is updated, the development server will automatically refresh 
+          the page. Components will also be updated in real-time.
+        </i18n-translate>
         
         <nav class="pager">
           <a class="prev" href="/temple/docs/component-publisher.html">
diff --git a/packages/temple-web/src/pages/docs/getting-started.dtml b/packages/temple-web/src/pages/docs/getting-started.dtml
index b6f1c65..f0b323f 100644
--- a/packages/temple-web/src/pages/docs/getting-started.dtml
+++ b/packages/temple-web/src/pages/docs/getting-started.dtml
@@ -3,7 +3,6 @@
 <link rel="import" type="template" href="@/modules/panel/left.tml" name="panel-left" />
 <link rel="import" type="component" href="@/modules/panel/main.tml" name="panel-main" />
 <link rel="import" type="component" href="@/modules/ide/code.tml" name="ide-code" />
-<link rel="import" type="component" href="@/modules/ide/preview.tml" name="ide-preview" />
 <link rel="import" type="component" href="@/modules/ide/app.tml" name="ide-app" />
 <link rel="import" type="component" href="@/modules/tui/alert.tml" name="tui-alert" />
 <link rel="import" type="component" href="@/modules/i18n/translate.tml" name="i18n-translate" />
@@ -28,9 +27,9 @@
       <div class="docs container">
         <h1>{_('Getting Started')}</h1>
 
-        <p>
+        <i18n-translate p trim>
           To use Temple in a project, run the following commands in terminal: 
-        </p>
+        </i18n-translate>
         <ide-app title="Terminal">
           <ide-code lang="bash">
             npm install --save @ossph/temple && npm install --save-dev ts-node typescript
@@ -44,11 +43,11 @@
             href="https://marketplace.visualstudio.com/items?itemName=ossph.temple-language"
           >Visual Studio Marketplace</a>.
         </tui-alert>
-        <p>
+        <i18n-translate p trim>
           Create a server file called
-          <ide-code lang="js" inline>'src/index.ts'</ide-code> 
+          <ide-code inline>src/index.ts</ide-code> 
           with the following code that uses the compiler.
-        </p>
+        </i18n-translate>
         <ide-app title="src/index.ts">
           <ide-code lang="js" numbers trim detab={12}>{`
             //on server:
@@ -61,11 +60,11 @@
             console.log(results);
           `}</ide-code>
         </ide-app>
-        <p>
+        <i18n-translate p trim>
           Next, create a document file called
-          <ide-code lang="js" inline>'src/page.dtml'</ide-code> 
+          <ide-code inline>src/page.dtml</ide-code> 
           with the following template code.
-        </p>
+        </i18n-translate>
         <ide-app title="src/page.dtml">
           <ide-code numbers trim detab={12}>{`
             <style>
@@ -84,19 +83,19 @@
             </html>
           `}</ide-code>
         </ide-app>
-        <p>
+        <i18n-translate p trim>
           To test the script and see the results, run the following 
           command in terminal.
-        </p>
+        </i18n-translate>
         <ide-app title="Terminal">
           <ide-code lang="bash">
             npx ts-node src/index.ts
           </ide-code>
         </ide-app>
-        <p>
+        <i18n-translate p trim>
           To see other getting started examples with various frameworks,
           you can check out the following links.
-        </p>
+        </i18n-translate>
         <ul>
           <li>
             <a target="_blank" href={`${examples}/with-http`}>
@@ -139,28 +138,28 @@
             </a>
           </li>
         </ul> 
-        <p>
+        <i18n-translate p trim>
           Depending on how you plan to use Temple, you can also look at 
           the following project modes.
-        </p>
+        </i18n-translate>
         <ul>
           <li>
-            <a href="/temple/docs/engine.html">
+            <a href="/temple/docs/template-engine.html">
               Template Engine
             </a>
           </li>
           <li>
-            <a href="/temple/docs/spa.html">
+            <a href="/temple/docs/single-page.html">
               Single Page App
             </a>
           </li>
           <li>
-            <a href="/temple/docs/static-sites.html">
+            <a href="/temple/docs/static-site.html">
               Static Site Generator
             </a>
           </li>
           <li>
-            <a href="/temple/docs/publisher.html">
+            <a href="/temple/docs/component-publisher.html">
               Web Component Publisher
             </a>
           </li>
diff --git a/packages/temple-web/src/pages/docs/markup-syntax.dtml b/packages/temple-web/src/pages/docs/markup-syntax.dtml
index 1a25c7b..b117895 100644
--- a/packages/temple-web/src/pages/docs/markup-syntax.dtml
+++ b/packages/temple-web/src/pages/docs/markup-syntax.dtml
@@ -2,6 +2,9 @@
 <link rel="import" type="template" href="@/modules/panel/head.tml" name="panel-head" />
 <link rel="import" type="template" href="@/modules/panel/left.tml" name="panel-left" />
 <link rel="import" type="component" href="@/modules/panel/main.tml" name="panel-main" />
+<link rel="import" type="component" href="@/modules/ide/code.tml" name="ide-code" />
+<link rel="import" type="component" href="@/modules/ide/app.tml" name="ide-app" />
+<link rel="import" type="component" href="@/modules/tui/alert.tml" name="tui-alert" />
 <link rel="import" type="component" href="@/modules/i18n/translate.tml" name="i18n-translate" />
 <script>
   import { env } from '@ossph/temple';
@@ -22,7 +25,534 @@
     <panel-main class="panel-main">
       <div class="docs container">
         <h1>{_('Markup Syntax')}</h1>
+
+        <ide-app title="TL;DR">
+          <ide-code numbers detab={12}>{`
+            <link rel="import" type="component" href="@/modules/i18n/translate.tml" name="i18n-translate" />
+            
+            <style>
+              host: a {
+                color: #333;
+              }
+            </style>
+
+            <script>
+              import { getTitle, getDetail, getLink } from '@/data/article';
+              const title = getTitle();
+              const href = getLink();
+              const attributes = { target: '_blank' };
+            </script>
+
+            <a title={title} {href} {...attributes}>
+              {title}
+            </a>
+
+            <i18n-translate title=title>
+              {getDetail()}
+            </i18n-translate>
+          `}</ide-code>
+        </ide-app>
+
+        <i18n-translate p trim>
+          Components are the building blocks of Temple files. Documents 
+          and page level markup are written in 
+          <ide-code inline>.dtml</ide-code> files. Components 
+          and templates are written in 
+          <ide-code inline>.tml</ide-code> files. In both 
+          cases, the code is written in a superset of HTML.
+        </i18n-translate>
+        <i18n-translate p trim>
+          The four sections that make up a temple file — imports, 
+          script, styles and markup — are all optional and can be 
+          used in any order.
+        </i18n-translate>
+        <ide-app title="Code Structure">
+          <ide-code numbers detab={12}>{`
+            <!-- imports go here -->
+
+            <style>
+              /* styles go here */
+            </style>
+
+            <script>
+              // logic goes here
+            </script>
+            
+            <!-- HTML goes here -->
+          `}</ide-code>
+        </ide-app>
+
+        <h2>{_('Imports')}</h2>
+
+        <i18n-translate p trim>
+          Imports are used to include additional components, templates 
+          and stylesheets in the current component. Components can 
+          be imported as a <ide-code inline>template</ide-code> or 
+          <ide-code inline>component</ide-code> type.
+        </i18n-translate>
+
+        <ide-app title="Import Examples">
+          <ide-code numbers trim detab={12}>{`
+            <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/prism.min.css" />
+            <link rel="stylesheet" type="text/css" href="/styles/layout.css" />
+            <link rel="import" type="template" href="@/modules/html-head.tml" />
+            <link rel="import" type="component" href="@/modules/i18n/translate.tml" name="i18n-translate" />
+
+            <style>
+              /* styles go here */
+            </style>
+
+            <script>
+              // logic goes here
+            </script>
+            
+            <!-- HTML goes here -->
+          `}</ide-code>
+        </ide-app>
         
+        <i18n-translate p trim>
+          The <ide-code inline>rel</ide-code> attribute 
+          specifies the relationship between the current document and 
+          the linked resource. 
+          
+          <ide-code inline>rel="import"</ide-code> denotes
+          that the imported resource is a component or template.
+        </i18n-translate>
+        <i18n-translate p trim>
+          The <ide-code inline>type</ide-code> 
+          attribute specifies the type of the linked resource. 
+          
+          <ide-code inline>type="component"</ide-code> 
+          imports a web component that can be used as regular markup
+          with attributes and children. 
+          
+          <ide-code inline>type="template"</ide-code> 
+          imports a template partial that can be included in the current 
+          markup. Template partials do not process attributes or children
+          if given.
+        </i18n-translate>
+        <i18n-translate p trim>
+          The 
+          <ide-code inline>href</ide-code> attribute specifies
+          the URL of the linked resource. The 
+          <ide-code inline>name</ide-code>
+          attribute specifies the tag name of the imported component or template.
+        </i18n-translate>
+
+        <h2>{_('Styles')}</h2>
+
+        <i18n-translate p trim>
+          CSS styles inside a <ide-code inline>{`<style>`}</ide-code> 
+          block enables the native <a 
+            target="_blank" 
+            href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM"
+          >shadow DOM</a> and will be scoped only to that component. 
+          Additionally styles defined outside of the component such as 
+          global styles will not affect the component.
+        </i18n-translate>
+
+        <i18n-translate p trim>
+          External stylesheets can be imported using the 
+          <ide-code inline>{`<link>`}</ide-code> tag or using 
+          <ide-code inline>{`@import()`}</ide-code> CSS directive. 
+        </i18n-translate>
+
+        <i18n-translate p trim>
+          You can use host selectors to style an element from within 
+          a component. The <ide-code inline>{`:host`}</ide-code> 
+          pseudo-class always applies styles to the root element of the 
+          web component.
+        </i18n-translate>
+
+        <ide-app title="Using :host">
+          <ide-code numbers trim detab={12}>{`
+            <style>
+              :host {
+                display: block;
+              }
+            </style>
+          `}</ide-code>
+        </ide-app>
+
+        <i18n-translate p trim>
+          You can also add conditional styles using the 
+          <ide-code inline>{`:host`}</ide-code> selector function. 
+          This can be used to style the host so long as it matches the 
+          given selector. For example, it can be used to select for 
+          hosts that have a given attribute or class.
+        </i18n-translate>
+
+        <ide-app title=":host Conditionals">
+          <ide-code numbers trim detab={12}>{`
+            <style>
+              :host([active]) {
+                background-color: #333;
+                color: #FFF;
+              }
+              :host(.active) {
+                background-color: #333;
+                color: #FFF;
+              }
+            </style>
+          `}</ide-code>
+        </ide-app>
+
+        <h2>{_('Scripts')}</h2>
+
+        <i18n-translate p trim>
+          The <ide-code inline>{`<script>`}</ide-code> block is used 
+          to write TypeScript logic for the component. The script block 
+          can be used to define variables, functions, and event listeners.
+          Variables declared (or imported) at the top level are 
+          'visible' from the component's markup. 
+        </i18n-translate>
+
+        <ide-app title="Top-Level Variables">
+          <ide-code numbers trim detab={12}>{`
+            <script>
+              const title = 'Hello World';
+            </script>
+
+            <h1>{title}</h1>
+          `}</ide-code>
+        </ide-app>
+
+        <i18n-translate p trim>
+          The <ide-code inline>{`<script>`}</ide-code> block can also 
+          be used to import variables from other components to be used
+          in the markup.
+        </i18n-translate>
+
+        <ide-app title="Importing Files">
+          <ide-code numbers trim detab={12}>{`
+            <script>
+              import getTitle from './getTitle';
+              const title = getTitle();
+            </script>
+
+            <h1 title={title}>{title}</h1>
+          `}</ide-code>
+        </ide-app>
+
+        <i18n-translate p trim>
+          You can use <ide-code inline>{`@/`}</ide-code> to prefix the 
+          current working directory. This is useful when importing
+          files completely in a separate directory in your project
+        </i18n-translate>
+
+        <ide-app title="@ Imports">
+          <ide-code numbers trim detab={12}>{`
+            <script>
+              import getTitle from '@/data/getTitle';
+              const title = getTitle();
+            </script>
+
+            <h1 title={title}>{title}</h1>
+          `}</ide-code>
+        </ide-app>
+
+        <h2>{_('Markup')}</h2>
+
+        <i18n-translate p trim>
+          In order to be closer to the native, Temple follows the same 
+          standards and conventions as HTML5 web components. Temple 
+          components are compiled to native web components that possibly 
+          can be used in other projects any modern browser.
+        </i18n-translate>
+
+        <h3>{_('Tag Names')}</h3>
+
+        <i18n-translate p trim>
+          Tag names must have at least one dash (-) in them. As such 
+          you probably want to name your element with two distinct words 
+          like <ide-code inline>{`i18n-translate`}</ide-code>. You can 
+          use as many dashes as you want, you're not limited to one. 
+          Some specific rules to follow in order to make a valid tag 
+          name:
+        </i18n-translate>
+
+        <ul>
+          <i18n-translate li trim>
+            It must use all lowercase characters of the alphabet (a-z).
+          </i18n-translate>
+          <i18n-translate li trim>
+            t must contain at least one dash (-).
+          </i18n-translate>
+          <i18n-translate li trim>
+            It must not be an already reserved tag name including 
+            <ide-code inline>annotation-xml</ide-code>,
+            <ide-code inline>color-profile</ide-code>,
+            <ide-code inline>font-face</ide-code>,
+            <ide-code inline>font-face-src</ide-code>,
+            <ide-code inline>font-face-uri</ide-code>,
+            <ide-code inline>font-face-format</ide-code>,
+            <ide-code inline>font-face-name</ide-code>, and 
+            <ide-code inline>missing-glyph</ide-code>.
+          </i18n-translate>
+          <i18n-translate li trim>
+            It must not contain symbols, like =, @, $.
+          </i18n-translate>
+          <i18n-translate li trim>
+            It can contain underscores, and numbers.
+          </i18n-translate>
+          <i18n-translate li trim>
+            It can contain characters from different alphabets, 
+            such as é, ð, ö, 爱.
+          </i18n-translate>
+        </ul>
+
+        <i18n-translate p trim>
+          Additionally, Temple works best with correct markup. The 
+          following standards should be followed:
+        </i18n-translate>
+
+        <ul>
+          <i18n-translate li trim>
+            Self closing tags like 
+            <ide-code inline>{`<img />`}</ide-code>,
+            <ide-code inline>{`<link />`}</ide-code>,
+            <ide-code inline>{`<meta />`}</ide-code>,
+            <ide-code inline>{`<input />`}</ide-code>
+            must have a slash before the closing.
+          </i18n-translate>
+          <i18n-translate li trim>
+            When using tables, rows should be wrapped in a 
+            <ide-code inline>{`<tbody>`}</ide-code> tag and cells
+            should be wrapped in a <ide-code inline>{`<tr>`}</ide-code> 
+            tag. ie. <ide-code inline>{`<table><tbody><tr><td>`}</ide-code>
+          </i18n-translate>
+          <i18n-translate li trim>
+            When using lists, items should be wrapped in a 
+            <ide-code inline>{`<ul>`}</ide-code> or 
+            <ide-code inline>{`<ol>`}</ide-code> tags.
+            ie. <ide-code inline>{`<ul><li>`}</ide-code>
+          </i18n-translate>
+        </ul>
+
+        <tui-alert solid curved info>
+          <i class="fas fa-info-circle"></i>
+          &nbsp;
+          Any markup auto corrected by browser will cause data syncing 
+          issues with Temple.
+        </tui-alert>
+
+        <i18n-translate p trim>
+          Temple components can loosely be self closing
+          <ide-code inline>{`<i18n-translate />`}</ide-code>
+          or expressed as a block
+          <ide-code inline>{`<i18n-translate></i18n-translate>`}</ide-code>.
+        </i18n-translate>
+
+        <h3>{_('Attributes')}</h3>
+
+        <ide-app title="Markup Expressions">
+          <ide-code numbers trim detab={12}>{`
+            <a title={title} {href} {...attributes}>
+              {title}
+            </a>
+            <i18n-translate title=title>
+              {detail}
+            </i18n-translate>
+          `}</ide-code>
+        </ide-app>
+
+        <i18n-translate p trim>
+          Attributes can be bound to expressions using the 
+          <ide-code inline>{`{}`}</ide-code> syntax. 
+          Expressions can be variables, functions, or any valid 
+          JavaScript expression. By default, attributes work exactly 
+          like their HTML counterparts.
+        </i18n-translate>
+
+        <ide-code trim detab={10}>{`
+          <button type="button" disabled>Submit</button>
+        `}</ide-code>
+        <i18n-translate p trim>
+          Traditional HTML attributes can be assigned string values or 
+          no value evaluates as <ide-code inline>{`true`}</ide-code>.
+        </i18n-translate>
+
+        <ide-code trim detab={10}>{`
+          <a title={title}>Click</a>
+        `}</ide-code>
+        <i18n-translate p trim>
+          Attributes can be assigned variable names.
+        </i18n-translate>
+
+        <ide-code trim detab={10}>{`
+          <a title=title>Click</a>
+        `}</ide-code>
+        <i18n-translate p trim>
+          Variable names do not need to be wrapped in curly braces
+          <ide-code inline>{`{}`}</ide-code>.
+        </i18n-translate>
+
+        <ide-code trim detab={10}>{`
+          <a {title}>Click</a>
+        `}</ide-code>
+        <i18n-translate p trim>
+          Attributes with the same name as a variable can be assigned
+          by just wrapping curly braces. ie. 
+          <ide-code inline>{`{title}`}</ide-code>.
+        </i18n-translate>
+
+        <ide-code trim detab={10}>{`
+          <script>
+            const attributes = { target: '_blank' };
+          </script>
+          <a {...attributes}>Click</a>
+        `}</ide-code>
+        <i18n-translate p trim>
+          Spread operators can be used to assign multiple attributes.
+        </i18n-translate>
+
+        <ide-code numbers trim detab={10}>{`
+          <script>
+            let count = 10
+            const metadata = { foo: 'bar', baz: 1, qux: true };
+            const data = () => metadata
+          </script>
+          <a {count} get={data} data-meta={metadata} disable={count < 10}>
+            Click
+          </a>
+        `}</ide-code>
+        <i18n-translate p trim>
+          You can assign any valid JavaScript expression to an attribute.
+        </i18n-translate>
+
+        <h3>{_('Conditionals')}</h3>
+
+        <ide-app title="Conditionals">
+          <ide-code numbers trim detab={12}>{`
+            <if true={count > 10}>
+              <p>Count is greater than 10</p>
+            <elif true={count < 5} />
+              <p>Count is less than 5</p>
+            <else />
+              <p>Count is between 5 and 10</p>
+            </if>
+          `}</ide-code>
+        </ide-app>
+        <i18n-translate p trim>
+          Conditionals can be used to show or hide elements based on 
+          the value of a variable.
+        </i18n-translate>
+
+        <ide-code numbers trim detab={12}>{`
+          <if true={count > 10}>
+            <p>Count is greater than 10</p>
+          </if>
+        `}</ide-code>
+        <i18n-translate p trim>
+          The basic syntax for an if statement looks like this and can be 
+          <ide-code inline>{`truesy`}</ide-code> or 
+          <ide-code inline>{`falsey`}</ide-code>.
+        </i18n-translate>
+
+        <ide-code numbers trim detab={12}>{`
+          <if false={count > 10}>
+            <p>Count is not greater than 10</p>
+          </if>
+        `}</ide-code>
+        <i18n-translate p trim>
+          You can also use the <ide-code inline>{`false`}</ide-code>
+          attribute to negate the condition.
+        </i18n-translate>
+
+        <ide-code numbers trim detab={12}>{`
+          <if true={count > 10}>
+            <p>Count is greater than 10</p>
+          <else />
+            <p>Count is less than or equal to 10</p>
+          </if>
+        `}</ide-code>
+        <i18n-translate p trim>
+          You can use the <ide-code inline>{`else`}</ide-code> block to 
+          show content when the condition is false.
+        </i18n-translate>
+
+        <ide-code numbers trim detab={12}>{`
+          <if true={count > 10}>
+            <p>Count is greater than 10</p>
+          <elif true={count < 5} />
+            <p>Count is less than 5</p>
+          </if>
+        `}</ide-code>
+        <i18n-translate p trim>
+          You can use the <ide-code inline>{`elif`}</ide-code> block to 
+          show content when the previous condition is false.
+        </i18n-translate>
+
+        <h3>{_('Iterations')}</h3>
+
+        <ide-app title="Each">
+          <ide-code numbers trim detab={12}>{`
+            <each key=index value=article from=articles>
+              <h1>#{index + 1} {article.title}</h1>
+              <p>{article.body}</p>
+            </each>
+          `}</ide-code>
+        </ide-app>
+        <i18n-translate p trim>
+          The <ide-code inline>{`<each>`}</ide-code> block can be used 
+          to iterate over an array of items or objects.
+          The <ide-code inline>{`from`}</ide-code> attribute value is 
+          required and can be an array, object or JavaScript expression 
+          that evaluates to an array or object. Both the 
+          <ide-code inline>{`key`}</ide-code> and 
+          <ide-code inline>{`value`}</ide-code> attributes are optional.
+        </i18n-translate>
+
+        <ide-code numbers trim detab={12}>{`
+          <each value={article} from={articles}>
+            <h1>{article.title}</h1>
+            <p>{article.body}</p>
+          </each>
+        `}</ide-code>
+        <i18n-translate p trim>
+          The value of <ide-code inline>{`value`}</ide-code>, in this 
+          case <ide-code inline>{`article`}</ide-code> can be used 
+          only with in the block. This can be any valid JavaScript 
+          variable name.
+        </i18n-translate>
+
+        <ide-code numbers trim detab={12}>{`
+          <each key={index} from={[1, 2, 3]}>
+            <h1>#{index} ???</h1>
+          </each>
+        `}</ide-code>
+        <i18n-translate p trim>
+          The value of <ide-code inline>{`key`}</ide-code>, in this 
+          case <ide-code inline>{`index`}</ide-code> can be used 
+          only with in the block. This can be any valid JavaScript 
+          variable name.
+        </i18n-translate>
+
+        <h3>{_('Try/Catch')}</h3>
+
+        <ide-app title="Try/Catch Example">
+          <ide-code numbers trim detab={12}>{`
+            <try>
+              <p>{mayCauseError()}</p>
+            <catch error={e} />
+              <p>Error: {e.message}</p>
+            </try>
+          `}</ide-code>
+        </ide-app>
+
+        <i18n-translate p trim>
+          The <ide-code inline>{`<try><catch>`}</ide-code> block can 
+          be used to catch errors that occur in the block. The 
+          <ide-code inline>{`<catch>`}</ide-code> block is required and 
+          can be used to handle the error.
+
+          The value of <ide-code inline>{`error`}</ide-code>, in the  
+          <ide-code inline>{`<catch>`}</ide-code> block in this case
+          <ide-code inline>{`e`}</ide-code> is an 
+          <ide-code lang="js" inline>{`Error`}</ide-code> object
+          that can only be used with in the block. 
+        </i18n-translate>
+
         <nav class="pager">
           <a class="prev" href="/temple/docs/frequent-questions.html">
             <i class="fas fa-fw fa-chevron-left"></i>
diff --git a/packages/temple-web/src/pages/docs/template-engine.dtml b/packages/temple-web/src/pages/docs/template-engine.dtml
index 275459f..b9de80e 100644
--- a/packages/temple-web/src/pages/docs/template-engine.dtml
+++ b/packages/temple-web/src/pages/docs/template-engine.dtml
@@ -2,6 +2,9 @@
 <link rel="import" type="template" href="@/modules/panel/head.tml" name="panel-head" />
 <link rel="import" type="template" href="@/modules/panel/left.tml" name="panel-left" />
 <link rel="import" type="component" href="@/modules/panel/main.tml" name="panel-main" />
+<link rel="import" type="component" href="@/modules/ide/code.tml" name="ide-code" />
+<link rel="import" type="component" href="@/modules/ide/app.tml" name="ide-app" />
+<link rel="import" type="component" href="@/modules/tui/tab.tml" name="tui-tab" />
 <link rel="import" type="component" href="@/modules/i18n/translate.tml" name="i18n-translate" />
 <script>
   import { env } from '@ossph/temple';
@@ -22,6 +25,130 @@
     <panel-main class="panel-main">
       <div class="docs container">
         <h1>{_('Template Engine')}</h1>
+
+        <i18n-translate p trim>
+          Create a project with the following structure and files using 
+          Temple, TypeScript and the native Node.js HTTP server.
+        </i18n-translate>
+        <ide-app panel={410} title="My Project">
+          <div class="panel-head">
+            <div class="tabs">
+              <tui-tab class="tab active" group="project" selector="#index-ts">
+                src/index.ts
+              </tui-tab>
+              <tui-tab class="tab" group="project" selector="#page-dtml">
+                src/page.dtml
+              </tui-tab>
+              <tui-tab class="tab" group="project" selector="#package-json">
+                package.json
+              </tui-tab>
+            </div>
+          </div>
+          <div class="panel-left">
+            <h5 class="folder">
+              <i class="fas fa-fw fa-chevron-down"></i>
+              <span>src</span>
+            </h5>
+            <tui-tab class="shift-1 block active" group="project" selector="#index-ts">
+              <i class="fas fa-fw fa-file"></i>
+              index.ts
+            </tui-tab>
+            <tui-tab class="shift-1 block" group="project" selector="#page-dtml">
+              <i class="fas fa-fw fa-file"></i>
+              page.dtml
+            </tui-tab>
+            <tui-tab class="block" group="project" selector="#package-json">
+              <i class="fas fa-fw fa-file"></i>
+              package.json
+            </tui-tab>
+          </div>
+          <div class="panel-main">
+            <main>
+              <ide-code id="index-ts" lang="js" numbers trim detab={16}>{`
+                import http from 'http';
+                import temple from '@ossph/temple/compiler';
+
+                //create temple compiler
+                const compiler = temple({ cwd: __dirname });
+                //create http server
+                const server = http.createServer(async (req, res) => {
+                  //if build asset...
+                  if (req.url?.startsWith('/build/')) {
+                    //get filename ie. abc123.js
+                    const filename = req.url.substring(7);
+                    //get asset
+                    const { type, content } = await compiler.asset(filename);
+                    //send response
+                    res.writeHead(200, { 'Content-Type': type });
+                    return res.end(content);
+                  //if home page
+                  } else if (req.url === '/') {
+                    res.writeHead(200, { 'Content-Type': 'text/html' });
+                    return res.end(await compiler.render('./index.dtml', {
+                      title: 'Hello World'
+                    }));
+                  }
+                });
+                //listen on port 3000
+                server.listen(3000);
+              `}</ide-code>
+              <ide-code id="page-dtml" style="display:none" numbers trim detab={16}>{`
+                <style>
+                  .title { text-align: center; }
+                </style>
+                <script>
+                  import { env, props } from '@ossph/temple';
+                  const { BUILD_ID, APP_DATA } = env();
+                  const { title } = props();
+                </script>
+                <html>
+                  <head>
+                    <title>{title}</title>
+                    <link rel="stylesheet" type="text/css" href={\`/build/\${BUILD_ID}.css\`} />
+                    <script data-app={APP_DATA} src={\`/build/\${BUILD_ID}.js\`}></script>
+                  </head>
+                  <body>
+                    <h1 class="title">{title}</h1>
+                  </body>
+                </html>
+              `}</ide-code>
+              <ide-code id="package-json" style="display:none" lang="js" numbers trim detab={16}>{`
+                {
+                  "name": "my-project",
+                  "version": "1.0.0",
+                  "private": true,
+                  "scripts": {
+                    "dev": "ts-node ./src/index.ts"
+                  },
+                  "dependencies": {
+                    "@ossph/temple": "0.0.15"
+                  },
+                  "devDependencies": {
+                    "@ossph/temple-dev": "0.0.15",
+                    "@types/express": "4.17.21",
+                    "@types/node": "22.1.0",
+                    "ts-node": "10.9.2",
+                    "typescript": "5.5.4"
+                  }
+                }
+              `}</ide-code>
+            </main>
+          </div>
+        </ide-app>
+        <i18n-translate p trim>
+          The server file 
+          <ide-code inline>src/index.ts</ide-code> 
+          implements a simple server utilizing the Temple compiler in 
+          its most simplistic form. The document file
+          <ide-code inline>src/page.dtml</ide-code> 
+          is using the most basic Temple syntax. To test the script and 
+          see the results, run the following command in terminal.
+        </i18n-translate>
+        <ide-app title="Terminal">
+          <ide-code lang="bash">
+            npm i && npx ts-node src/index.ts
+          </ide-code>
+        </ide-app>
         
         <nav class="pager">
           <a class="prev" href="/temple/docs/client-api.html">