@kodaris/krubble-app-components 1.0.67 → 1.0.69

package/dist/krubble-app.umd.js

@@ -359,18 +359,6 @@
            * Default icon for nav items without an icon (shown at top level)
            */
           this.defaultNavItemIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="10"/></svg>';
-          this.navItemsExpanded = new Set();
-          this.navQuery = '';
-          this.activeNavItemId = null;
-          this.isNavScrolled = false;
-          this.isNavOpened = localStorage.getItem('kr-scaffold-nav-opened') !== 'false';
-          this.isEditing = false;
-          this.isUserMenuOpen = false;
-          this.pref = { nav: {} };
-          this.draggedNavItemId = null;
-          this.navItemDropTargetId = null;
-          this.navItemDropPosition = 'above';
-          this.pendingRequests = 0;
           this.originalFetch = null;
           this.originalXhrOpen = null;
           this.navItemDragPreview = null;
@@ -406,6 +394,18 @@
            * Breadcrumbs to display in the subbar
            */
           this.breadcrumbs = [];
+          this.navItemsExpanded = new Set();
+          this.navQuery = '';
+          this.activeNavItemId = null;
+          this.isNavScrolled = false;
+          this.isNavOpened = localStorage.getItem('kr-scaffold-nav-opened') !== 'false';
+          this.isEditing = false;
+          this.isUserMenuOpen = false;
+          this.pref = { nav: {} };
+          this.draggedNavItemId = null;
+          this.navItemDropTargetId = null;
+          this.navItemDropPosition = 'above';
+          this.pendingRequests = 0;
           this.boundHandleMouseMove = this.handleMouseMove.bind(this);
           this.boundHandleMouseUp = this.handleMouseUp.bind(this);
       }
@@ -439,8 +439,9 @@
        * Updates `pendingRequests` state when requests start/complete.
        */
       installFetchInterceptor() {
-          if (this.originalFetch)
+          if (this.originalFetch) {
               return;
+          }
           const scaffold = this;
           // Intercept fetch
           this.originalFetch = window.fetch.bind(window);
@@ -491,17 +492,23 @@
        * - resolveUrl(item) = "/operations/settings" (used for href and URL comparison)
        */
       resolveUrl(item) {
-          if (!item.url)
+          if (!item.url) {
               return '#';
+          }
           // External URLs - return as-is
           if (item.external) {
               return item.url;
           }
           // Remove leading slash from url if present, then combine with base
-          const path = item.url.startsWith('/') ? item.url.slice(1) : item.url;
+          let path = item.url;
+          if (item.url.startsWith('/')) {
+              path = item.url.slice(1);
+          }
           const baseHref = document.querySelector('base')?.getAttribute('href') || '/';
-          const base = baseHref.endsWith('/') ? baseHref : (baseHref + '/');
-          return base + path;
+          if (baseHref.endsWith('/')) {
+              return baseHref + path;
+          }
+          return baseHref + '/' + path;
       }
       // =========================================================================
       // Navigation Data
@@ -530,11 +537,15 @@
               if (item.type === 'group' && item.children) {
                   item.children.forEach((child, childIndex) => {
                       const childOverride = this.pref.nav[child.id];
+                      let parentId = item.id;
+                      if (childOverride?.parentId !== undefined) {
+                          parentId = childOverride.parentId;
+                      }
                       result.push({
                           ...child,
                           ...childOverride,
                           order: childOverride?.order ?? child.order ?? childIndex,
-                          parentId: childOverride?.parentId !== undefined ? childOverride.parentId : item.id,
+                          parentId,
                       });
                   });
               }
@@ -677,14 +688,18 @@
       toggleNavItem(itemId) {
           const navItem = this.shadowRoot?.querySelector(`.nav-item[data-id="${itemId}"]`);
           const groupEl = navItem?.nextElementSibling;
-          if (!groupEl)
+          if (!groupEl) {
               return;
+          }
           if (this.navItemsExpanded.has(itemId)) {
               this.navItemsExpanded.delete(itemId);
               groupEl.animate([
                   { height: `${groupEl.scrollHeight}px` },
                   { height: '0px' }
-              ], { duration: 300, easing: 'ease-in-out' }).onfinish = () => {
+              ], {
+                  duration: 300,
+                  easing: 'ease-in-out'
+              }).onfinish = () => {
                   groupEl.classList.remove('nav-group--expanded');
               };
           }
@@ -694,7 +709,10 @@
               groupEl.animate([
                   { height: '0px' },
                   { height: `${groupEl.scrollHeight}px` }
-              ], { duration: 300, easing: 'ease-in-out' });
+              ], {
+                  duration: 300,
+                  easing: 'ease-in-out'
+              });
           }
           this.requestUpdate();
       }
@@ -789,14 +807,18 @@
           this.pref.nav = {};
       }
       savePref() {
-          if (this.userType === 'customer')
+          if (this.userType === 'customer') {
               return;
-          const url = this.pref.uuid
-              ? `/api/system/preference/json/scaffold/${this.pref.uuid}?global=true`
-              : `/api/system/preference/json/scaffold?global=true`;
+          }
+          let url = '/api/system/preference/json/scaffold?global=true';
+          let method = 'POST';
+          if (this.pref.uuid) {
+              url = `/api/system/preference/json/scaffold/${this.pref.uuid}?global=true`;
+              method = 'PUT';
+          }
           krubbleHttp.Http.fetch({
               url,
-              method: this.pref.uuid ? 'PUT' : 'POST',
+              method,
               body: JSON.stringify({ nav: this.pref.nav }),
           })
               .then((response) => response.json())
@@ -809,8 +831,9 @@
           });
       }
       loadPref() {
-          if (this.userType === 'customer')
+          if (this.userType === 'customer') {
               return;
+          }
           krubbleHttp.Http.fetch({
               url: '/api/system/preference/json/scaffold?global=true',
               method: 'GET',
@@ -827,21 +850,36 @@
           });
       }
       handleNavItemContextMenu(e, item) {
-          if (!this.isEditing)
+          if (!this.isEditing) {
               return;
+          }
           e.preventDefault();
           krubbleComponents.ContextMenu.open({
               x: e.clientX,
               y: e.clientY,
               items: [
-                  { id: 'edit', label: 'Edit Item' },
-                  { id: 'divider-1', label: '', divider: true },
-                  { id: 'add-above', label: 'Add Item Above' },
-                  { id: 'add-below', label: 'Add Item Below' },
+                  {
+                      id: 'edit',
+                      label: 'Edit Item'
+                  },
+                  {
+                      id: 'divider-1',
+                      label: '',
+                      divider: true
+                  },
+                  {
+                      id: 'add-above',
+                      label: 'Add Item Above'
+                  },
+                  {
+                      id: 'add-below',
+                      label: 'Add Item Below'
+                  },
               ],
           }).then((result) => {
-              if (!result)
+              if (!result) {
                   return;
+              }
               switch (result.id) {
                   case 'edit':
                       this.openNavItemEdit(item);
@@ -867,8 +905,9 @@
       openNavItemEdit(item) {
           krubbleComponents.Dialog.open(KRNavItemEdit, { data: item }).afterClosed().then((res) => {
               const result = res;
-              if (!result)
+              if (!result) {
                   return;
+              }
               if (!this.pref.nav[item.id]) {
                   this.pref.nav[item.id] = {};
               }
@@ -895,7 +934,13 @@
               .filter(i => i.parentId === targetItem.parentId)
               .sort((a, b) => a.order - b.order);
           const targetIndex = siblings.findIndex(i => i.id === targetItem.id);
-          const newOrder = position === 'above' ? targetIndex : targetIndex + 1;
+          let newOrder;
+          if (position === 'above') {
+              newOrder = targetIndex;
+          }
+          else {
+              newOrder = targetIndex + 1;
+          }
           // Shift existing items to make room for the new item
           siblings.forEach((sibling, index) => {
               if (index >= newOrder) {
@@ -932,8 +977,9 @@
        * @param item - The nav item being pressed
        */
       handleNavItemMouseDown(e, item) {
-          if (!this.isEditing)
+          if (!this.isEditing) {
               return;
+          }
           e.preventDefault();
           this.draggedNavItemId = item.id;
           this.navItemDragStartY = e.clientY;
@@ -951,8 +997,9 @@
        * @param e - The mouse event
        */
       handleMouseMove(e) {
-          if (!this.draggedNavItemId)
+          if (!this.draggedNavItemId) {
               return;
+          }
           // Start dragging after moving a few pixels (to distinguish from clicks)
           if (!this.isNavItemDragging && Math.abs(e.clientY - this.navItemDragStartY) > 5) {
               this.isNavItemDragging = true;
@@ -968,8 +1015,9 @@
                   this.shadowRoot?.appendChild(this.navItemDragPreview);
               }
           }
-          if (!this.isNavItemDragging)
+          if (!this.isNavItemDragging) {
               return;
+          }
           // Update preview position
           if (this.navItemDragPreview) {
               this.navItemDragPreview.style.left = `${e.clientX + 10}px`;
@@ -1020,14 +1068,16 @@
       updateNavItemDropTarget(e) {
           // Get all nav items in shadow DOM
           const navItems = this.shadowRoot?.querySelectorAll('.nav-item[data-id]');
-          if (!navItems)
+          if (!navItems) {
               return;
+          }
           let foundTarget = false;
           navItems.forEach((el) => {
               const rect = el.getBoundingClientRect();
               const itemId = el.getAttribute('data-id');
-              if (!itemId || itemId === this.draggedNavItemId)
+              if (!itemId || itemId === this.draggedNavItemId) {
                   return;
+              }
               // Skip if mouse is outside this element
               if (e.clientX < rect.left || e.clientX > rect.right ||
                   e.clientY < rect.top || e.clientY > rect.bottom) {
@@ -1064,11 +1114,22 @@
               }
               else {
                   // Regular items only support above/below, not center
-                  position = y < rect.height / 2 ? 'above' : 'below';
+                  if (y < rect.height / 2) {
+                      position = 'above';
+                  }
+                  else {
+                      position = 'below';
+                  }
                   this.clearNavItemDragExpandTimeout();
               }
               // Determine what the new parent would be
-              const newParentId = position === 'center' ? item.id : item.parentId;
+              let newParentId;
+              if (position === 'center') {
+                  newParentId = item.id;
+              }
+              else {
+                  newParentId = item.parentId;
+              }
               const draggedItem = this.getComputedNav().find(i => i.id === this.draggedNavItemId);
               // Don't show drop indicator if invalid drop:
               // 1. Can't drop an item into itself (newParentId === draggedNavItemId)
@@ -1128,13 +1189,15 @@
        * with new order values for the dragged item and shifts siblings as needed.
        */
       executeNavItemDrop() {
-          if (!this.draggedNavItemId || !this.navItemDropTargetId)
+          if (!this.draggedNavItemId || !this.navItemDropTargetId) {
               return;
+          }
           const allItems = this.getComputedNav();
           const draggedItem = allItems.find(i => i.id === this.draggedNavItemId);
           const targetItem = allItems.find(i => i.id === this.navItemDropTargetId);
-          if (!draggedItem || !targetItem)
+          if (!draggedItem || !targetItem) {
               return;
+          }
           // Determine the new parentId for the dragged item
           let newParentId;
           if (this.navItemDropPosition === 'center' && targetItem.type === 'group') {
@@ -1146,8 +1209,9 @@
           else {
               newParentId = targetItem.parentId;
           }
-          if (newParentId === this.draggedNavItemId)
+          if (newParentId === this.draggedNavItemId) {
               return;
+          }
           // Get siblings in the destination parent
           const siblings = allItems
               .filter(i => i.parentId === newParentId && i.id !== this.draggedNavItemId)
@@ -1218,8 +1282,9 @@
       // Rendering
       // =========================================================================
       renderNormalFooter() {
-          if (!this.user)
+          if (!this.user) {
               return A;
+          }
           const initials = this.user.name
               .split(' ')
               .map((part) => part[0])
@@ -1316,7 +1381,11 @@
             stroke="currentColor"
             stroke-width="2"
           >
-            <path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round" />
+            <path
+              d="M6 9l6 6 6-6"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
           </svg>
         </button>
         <div class=${e({
@@ -1368,7 +1437,11 @@
       </div>
       
       ${this.subbar ? b `
-        <kr-subbar menu .breadcrumbs=${this.breadcrumbs} @menu-click=${this.handleMenuClick}>
+        <kr-subbar
+          menu
+          .breadcrumbs=${this.breadcrumbs}
+          @menu-click=${this.handleMenuClick}
+        >
           <slot name="subbar"></slot>
         </kr-subbar>
       ` : A}
@@ -1384,7 +1457,11 @@
               ${this.label
             ? b `<span class="nav-title">${this.label}</span>`
             : this.logo
-                ? b `<img class="nav-logo" src=${this.logo} alt="Logo" />`
+                ? b `<img
+                    class="nav-logo"
+                    src=${this.logo}
+                    alt="Logo"
+                  />`
                 : A}
             </div>
             <div class="nav-content" @scroll=${this.handleNavScroll}>
@@ -1392,7 +1469,11 @@
                 <div class="nav-search">
                   <div class="nav-search__wrapper">
                     <span class="nav-search__icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                      >
                         <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
                       </svg>
                     </span>
@@ -1405,7 +1486,11 @@
                     />
                     ${this.navQuery ? b `
                       <button class="nav-search__clear" @click=${this.handleNavQueryClear}>
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 24 24"
+                          fill="currentColor"
+                        >
                           <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
                         </svg>
                       </button>
@@ -1597,7 +1682,7 @@
     .nav-content {
       flex: 1;
       overflow-y: auto;
-      padding: 0 9px 0.75rem 8px;
+      padding: 0 9px 12px 8px;
     }
 
     .nav-footer {
@@ -1717,7 +1802,7 @@
 
     .breadcrumbs {
       height: 32px;
-      padding: 0 1rem;
+      padding: 0 16px;
       display: flex;
       align-items: center;
       gap: 6px;
@@ -1811,7 +1896,7 @@
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      letter-spacing: 0.01em;
+      letter-spacing: 0.14px;
     }
 
     .nav-item__chevron {
@@ -1866,7 +1951,7 @@
       font-size: 11px;
       font-weight: 600;
       text-transform: uppercase;
-      letter-spacing: 0.05em;
+      letter-spacing: 0.55px;
       color: var(--kr-scaffold-nav-text);
       opacity: 0.6;
     }
@@ -1989,7 +2074,7 @@
 
     .breadcrumbs {
       height: 32px;
-      padding: 0 1rem;
+      padding: 0 16px;
       display: flex;
       align-items: center;
       gap: 6px;
@@ -2157,6 +2242,61 @@
       }
     }
   `;
+  __decorate$5([
+      n({ type: String })
+  ], exports.Scaffold.prototype, "logo", void 0);
+  __decorate$5([
+      n({ type: String })
+  ], exports.Scaffold.prototype, "label", void 0);
+  __decorate$5([
+      n({
+          type: String,
+          attribute: 'home-url'
+      })
+  ], exports.Scaffold.prototype, "homeUrl", void 0);
+  __decorate$5([
+      n({
+          type: String,
+          reflect: true
+      })
+  ], exports.Scaffold.prototype, "scheme", void 0);
+  __decorate$5([
+      n({ type: Array })
+  ], exports.Scaffold.prototype, "nav", void 0);
+  __decorate$5([
+      n({
+          type: Boolean,
+          attribute: 'nav-icons-displayed',
+          reflect: true
+      })
+  ], exports.Scaffold.prototype, "navIconsDisplayed", void 0);
+  __decorate$5([
+      n({
+          type: Boolean,
+          attribute: 'nav-expanded'
+      })
+  ], exports.Scaffold.prototype, "navExpanded", void 0);
+  __decorate$5([
+      n({ type: Object })
+  ], exports.Scaffold.prototype, "user", void 0);
+  __decorate$5([
+      n({ type: Boolean })
+  ], exports.Scaffold.prototype, "subbar", void 0);
+  __decorate$5([
+      n({
+          type: Boolean,
+          attribute: 'nav-enabled'
+      })
+  ], exports.Scaffold.prototype, "navEnabled", void 0);
+  __decorate$5([
+      n({
+          type: String,
+          attribute: 'user-type'
+      })
+  ], exports.Scaffold.prototype, "userType", void 0);
+  __decorate$5([
+      n({ type: Array })
+  ], exports.Scaffold.prototype, "breadcrumbs", void 0);
   __decorate$5([
       r()
   ], exports.Scaffold.prototype, "navItemsExpanded", void 0);
@@ -2193,42 +2333,6 @@
   __decorate$5([
       r()
   ], exports.Scaffold.prototype, "pendingRequests", void 0);
-  __decorate$5([
-      n({ type: String })
-  ], exports.Scaffold.prototype, "logo", void 0);
-  __decorate$5([
-      n({ type: String })
-  ], exports.Scaffold.prototype, "label", void 0);
-  __decorate$5([
-      n({ type: String, attribute: 'home-url' })
-  ], exports.Scaffold.prototype, "homeUrl", void 0);
-  __decorate$5([
-      n({ type: String, reflect: true })
-  ], exports.Scaffold.prototype, "scheme", void 0);
-  __decorate$5([
-      n({ type: Array })
-  ], exports.Scaffold.prototype, "nav", void 0);
-  __decorate$5([
-      n({ type: Boolean, attribute: 'nav-icons-displayed', reflect: true })
-  ], exports.Scaffold.prototype, "navIconsDisplayed", void 0);
-  __decorate$5([
-      n({ type: Boolean, attribute: 'nav-expanded' })
-  ], exports.Scaffold.prototype, "navExpanded", void 0);
-  __decorate$5([
-      n({ type: Object })
-  ], exports.Scaffold.prototype, "user", void 0);
-  __decorate$5([
-      n({ type: Boolean })
-  ], exports.Scaffold.prototype, "subbar", void 0);
-  __decorate$5([
-      n({ type: Boolean, attribute: 'nav-enabled' })
-  ], exports.Scaffold.prototype, "navEnabled", void 0);
-  __decorate$5([
-      n({ type: String, attribute: 'user-type' })
-  ], exports.Scaffold.prototype, "userType", void 0);
-  __decorate$5([
-      n({ type: Array })
-  ], exports.Scaffold.prototype, "breadcrumbs", void 0);
   exports.Scaffold = __decorate$5([
       t$1('kr-scaffold')
   ], exports.Scaffold);
@@ -2249,7 +2353,7 @@
    * <kr-screen-nav
    *   label="Acme Corporation"
    *   subLabel="Company"
-   *   .navItems=${[
+   *   .items=${[
    *     { id: 'overview', label: 'Overview', url: '/companies/123/overview' },
    *     { id: 'contacts', label: 'Contacts', url: '/companies/123/contacts' },
    *     { id: 'activity', label: 'Activity', url: '/companies/123/activity' },
@@ -2264,7 +2368,7 @@
    *
    * @property {string} label - Main label (e.g., entity name like "Acme Corporation")
    * @property {string} subLabel - Sub label (e.g., entity type like "Company")
-   * @property {KRScreenNavItem[]} navItems - Navigation items as JSON array
+   * @property {KRScreenNavItem[]} items - Navigation items as JSON array
    * @property {string} activeId - Currently active item ID
    */
   exports.ScreenNav = class KRScreenNav extends i$1 {
@@ -2281,7 +2385,7 @@
           /**
            * Navigation items
            */
-          this.navItems = [];
+          this.items = [];
           /**
            * Currently active item ID. Auto-detected from the URL by default.
            * Can be set explicitly by the parent to override.
@@ -2293,7 +2397,7 @@
       }
       connectedCallback() {
           super.connectedCallback();
-          // Defer so property bindings (.navItems) have been applied
+          // Defer so property bindings (.items) have been applied
           requestAnimationFrame(() => this.syncActiveFromUrl());
           window.addEventListener('popstate', this.handlePopstate);
       }
@@ -2332,7 +2436,7 @@
       }
       syncActiveFromUrl() {
           const pathname = window.location.pathname;
-          const match = this.navItems.find((item) => {
+          const match = this.items.find((item) => {
               if (!item.url) {
                   return false;
               }
@@ -2360,9 +2464,12 @@
         ` : A}
         <div class="nav-content">
           <div class="nav-items">
-            ${this.navItems.map((item) => b `
+            ${this.items.map((item) => b `
                 <a
-                  class="nav-item ${item.id === this.activeId ? 'nav-item--active' : ''}"
+                  class=${e({
+            'nav-item': true,
+            'nav-item--active': item.id === this.activeId
+        })}
                   href=${item.url || '#'}
                   @click=${(e) => this.handleNavItemClick(e, item)}
                 >
@@ -2425,7 +2532,7 @@
     .nav-content {
       flex: 1;
       overflow-y: auto;
-      padding: 0 0 0.75rem;
+      padding: 0 0 12px;
     }
 
     .nav-items {
@@ -2439,7 +2546,7 @@
       padding: 0 12px;
       height: 32px;
       line-height: 32px;
-      letter-spacing: 0.01em;
+      letter-spacing: 0.13px;
       color: rgb(32, 33, 36);
       text-decoration: none;
       font-size: 13px;
@@ -2480,7 +2587,7 @@
   ], exports.ScreenNav.prototype, "subLabel", void 0);
   __decorate$4([
       n({ type: Array })
-  ], exports.ScreenNav.prototype, "navItems", void 0);
+  ], exports.ScreenNav.prototype, "items", void 0);
   __decorate$4([
       n({ type: String })
   ], exports.ScreenNav.prototype, "activeId", void 0);
@@ -2550,7 +2657,7 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 0 1.5rem;
+      padding: 0 24px;
       background: #ffffff;
       border-bottom: 1px solid #e5e7eb;
       flex-shrink: 0;
@@ -2572,7 +2679,7 @@
     .content {
       flex: 1;
       overflow-y: auto;
-      padding: 1.5rem;
+      padding: 24px;
       display: flex;
       justify-content: center;
     }
@@ -2613,7 +2720,10 @@
           this.menu = false;
       }
       _handleMenuClick() {
-          this.dispatchEvent(new CustomEvent('menu-click', { bubbles: true, composed: true }));
+          this.dispatchEvent(new CustomEvent('menu-click', {
+              bubbles: true,
+              composed: true
+          }));
       }
       /**
        * Resolves a breadcrumb URL by prepending the base href.
@@ -2630,13 +2740,19 @@
        * - resolveUrl(crumb) = "/operations/settings" (used for href)
        */
       resolveUrl(crumb) {
-          if (!crumb.url)
+          if (!crumb.url) {
               return '#';
+          }
           // Remove leading slash from url if present, then combine with base
-          const path = crumb.url.startsWith('/') ? crumb.url.slice(1) : crumb.url;
+          let path = crumb.url;
+          if (crumb.url.startsWith('/')) {
+              path = crumb.url.slice(1);
+          }
           const baseHref = document.querySelector('base')?.getAttribute('href') || '/';
-          const base = baseHref.endsWith('/') ? baseHref : (baseHref + '/');
-          return base + path;
+          if (baseHref.endsWith('/')) {
+              return baseHref + path;
+          }
+          return baseHref + '/' + path;
       }
       /**
        * Handles click on a breadcrumb link.
@@ -2668,10 +2784,31 @@
           return b `
       ${this.menu ? b `
         <div class="menu" @click=${this._handleMenuClick}>
-          <svg class="menu__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <line x1="3" y1="6" x2="21" y2="6"></line>
-            <line x1="3" y1="12" x2="21" y2="12"></line>
-            <line x1="3" y1="18" x2="21" y2="18"></line>
+          <svg
+            class="menu__icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <line
+              x1="3"
+              y1="6"
+              x2="21"
+              y2="6"
+            ></line>
+            <line
+              x1="3"
+              y1="12"
+              x2="21"
+              y2="12"
+            ></line>
+            <line
+              x1="3"
+              y1="18"
+              x2="21"
+              y2="18"
+            ></line>
           </svg>
         </div>
       ` : A}
@@ -2681,7 +2818,10 @@
             return b `
             ${index > 0 ? b `<span class="breadcrumb-separator">/</span>` : ''}
             <a
-              class=${e({ 'breadcrumb': true, 'breadcrumb--current': isCurrent })}
+              class=${e({
+                'breadcrumb': true,
+                'breadcrumb--current': isCurrent
+            })}
               href=${this.resolveUrl(crumb)}
               @click=${(e) => this._handleBreadcrumbClick(e, crumb, isCurrent)}
             >${crumb.label}</a>
@@ -2850,7 +2990,10 @@
           for (const route of routes) {
               const routeSegments = route.path.split('/').filter(s => s);
               if (routeSegments.length === 0 && segments.length === 0) {
-                  return [{ route, params: {} }];
+                  return [{
+                          route,
+                          params: {}
+                      }];
               }
               if (routeSegments.length === 0) {
                   continue;
@@ -2877,7 +3020,10 @@
               if (remaining.length > 0 && !route.children) {
                   continue;
               }
-              const result = [{ route, params }];
+              const result = [{
+                      route,
+                      params
+                  }];
               if (route.children && remaining.length > 0) {
                   const childMatches = KRRouter.matchRoutes(route.children, remaining);
                   if (childMatches.length > 0) {
@@ -2957,99 +3103,2530 @@
       t$1('kr-router-outlet')
   ], exports.RouterOutlet);
 
-  var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-      var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-      if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-      else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-      return c > 3 && r && Object.defineProperty(target, key, r), r;
+  /**
+   * marked v12.0.2 - a markdown parser
+   * Copyright (c) 2011-2024, Christopher Jeffrey. (MIT Licensed)
+   * https://github.com/markedjs/marked
+   */
+
+  /**
+   * DO NOT EDIT THIS FILE
+   * The code in this file is generated from files in ./src/
+   */
+
+  /**
+   * Gets the original marked default options.
+   */
+  function _getDefaults() {
+      return {
+          async: false,
+          breaks: false,
+          extensions: null,
+          gfm: true,
+          hooks: null,
+          pedantic: false,
+          renderer: null,
+          silent: false,
+          tokenizer: null,
+          walkTokens: null
+      };
+  }
+  let _defaults = _getDefaults();
+  function changeDefaults(newDefaults) {
+      _defaults = newDefaults;
+  }
+
+  /**
+   * Helpers
+   */
+  const escapeTest = /[&<>"']/;
+  const escapeReplace = new RegExp(escapeTest.source, 'g');
+  const escapeTestNoEncode = /[<>"']|&(?!(#\d{1,7}|#[Xx][a-fA-F0-9]{1,6}|\w+);)/;
+  const escapeReplaceNoEncode = new RegExp(escapeTestNoEncode.source, 'g');
+  const escapeReplacements = {
+      '&': '&amp;',
+      '<': '&lt;',
+      '>': '&gt;',
+      '"': '&quot;',
+      "'": '&#39;'
   };
+  const getEscapeReplacement = (ch) => escapeReplacements[ch];
+  function escape$1(html, encode) {
+      if (encode) {
+          if (escapeTest.test(html)) {
+              return html.replace(escapeReplace, getEscapeReplacement);
+          }
+      }
+      else {
+          if (escapeTestNoEncode.test(html)) {
+              return html.replace(escapeReplaceNoEncode, getEscapeReplacement);
+          }
+      }
+      return html;
+  }
+  const unescapeTest = /&(#(?:\d+)|(?:#x[0-9A-Fa-f]+)|(?:\w+));?/ig;
+  function unescape(html) {
+      // explicitly match decimal, hex, and named HTML entities
+      return html.replace(unescapeTest, (_, n) => {
+          n = n.toLowerCase();
+          if (n === 'colon')
+              return ':';
+          if (n.charAt(0) === '#') {
+              return n.charAt(1) === 'x'
+                  ? String.fromCharCode(parseInt(n.substring(2), 16))
+                  : String.fromCharCode(+n.substring(1));
+          }
+          return '';
+      });
+  }
+  const caret = /(^|[^\[])\^/g;
+  function edit(regex, opt) {
+      let source = typeof regex === 'string' ? regex : regex.source;
+      opt = opt || '';
+      const obj = {
+          replace: (name, val) => {
+              let valSource = typeof val === 'string' ? val : val.source;
+              valSource = valSource.replace(caret, '$1');
+              source = source.replace(name, valSource);
+              return obj;
+          },
+          getRegex: () => {
+              return new RegExp(source, opt);
+          }
+      };
+      return obj;
+  }
+  function cleanUrl(href) {
+      try {
+          href = encodeURI(href).replace(/%25/g, '%');
+      }
+      catch (e) {
+          return null;
+      }
+      return href;
+  }
+  const noopTest = { exec: () => null };
+  function splitCells(tableRow, count) {
+      // ensure that every cell-delimiting pipe has a space
+      // before it to distinguish it from an escaped pipe
+      const row = tableRow.replace(/\|/g, (match, offset, str) => {
+          let escaped = false;
+          let curr = offset;
+          while (--curr >= 0 && str[curr] === '\\')
+              escaped = !escaped;
+          if (escaped) {
+              // odd number of slashes means | is escaped
+              // so we leave it alone
+              return '|';
+          }
+          else {
+              // add space before unescaped |
+              return ' |';
+          }
+      }), cells = row.split(/ \|/);
+      let i = 0;
+      // First/last cell in a row cannot be empty if it has no leading/trailing pipe
+      if (!cells[0].trim()) {
+          cells.shift();
+      }
+      if (cells.length > 0 && !cells[cells.length - 1].trim()) {
+          cells.pop();
+      }
+      if (count) {
+          if (cells.length > count) {
+              cells.splice(count);
+          }
+          else {
+              while (cells.length < count)
+                  cells.push('');
+          }
+      }
+      for (; i < cells.length; i++) {
+          // leading or trailing whitespace is ignored per the gfm spec
+          cells[i] = cells[i].trim().replace(/\\\|/g, '|');
+      }
+      return cells;
+  }
   /**
-   * AI chatbot component with SSE streaming and native browser action execution.
-   *
-   * Accepts a `send` callback that returns a streaming Response (SSE format).
-   * Parses the stream for text tokens, status updates, errors, and frontend actions.
-   * When an ACTION event arrives, dispatches a cancelable `action` custom event.
-   * If not prevented, executes the native browser action (reload, navigate, etc.).
-   *
-   * ## SSE Stream Format
-   * The component expects `data:` lines with JSON payloads containing a `type` field:
-   * - `STATUS` — `{ type: "STATUS", message: "Thinking..." }`
-   * - `RESPONSE_PART` — `{ type: "RESPONSE_PART", message: "token text" }`
-   * - `ACTION` — `{ type: "ACTION", action: "RELOAD" }` (see KRChatbotAction)
-   * - `ERROR` — `{ type: "ERROR", message: "Something went wrong" }`
-   * - `HEARTBEAT` — `{ type: "HEARTBEAT" }` (ignored)
-   *
-   * The final event should include `finished: true` to signal stream completion.
-   *
-   * ## Usage
-   * ```html
-   * <kr-chatbot
-   *   title="AI Assistant"
-   *   .send=${(params) => {
-   *     return fetch('/api/ai/chat/stream', {
-   *       method: 'POST',
-   *       headers: { 'Content-Type': 'application/json', 'Accept': 'text/event-stream' },
-   *       credentials: 'include',
-   *       body: JSON.stringify({ userText: params.message })
-   *     });
-   *   }}
-   * ></kr-chatbot>
-   * ```
-   *
-   * @slot - Optional slot content displayed above the messages area
+   * Remove trailing 'c's. Equivalent to str.replace(/c*$/, '').
+   * /c*$/ is vulnerable to REDOS.
    *
-   * @fires message-submit - When the user sends a message. Cancelable. Detail: `{ message: string }`
-   * @fires action - When the AI requests a frontend action. Cancelable. Detail: `{ action: KRChatbotAction }`
+   * @param str
+   * @param c
+   * @param invert Remove suffix of non-c chars instead. Default falsey.
    */
-  exports.Chatbot = class KRChatbot extends i$1 {
-      constructor() {
-          super(...arguments);
-          // --- Private properties ---
-          this._reader = null;
-          this._decoder = new TextDecoder();
-          this._buffer = '';
-          this._userHasScrolledUp = false;
-          this._isDragging = false;
-          this._isResizing = false;
-          this._resizeDir = '';
-          this._dragStartX = 0;
-          this._dragStartY = 0;
-          this._dragStartLeft = 0;
-          this._dragStartTop = 0;
-          this._resizeStartW = 0;
-          this._resizeStartH = 0;
-          // --- @property (public API) ---
-          /**
-           * Callback function for sending messages. Receives the user's message and
-           * current conversation history. Must return a Response with a streaming SSE body.
-           */
-          this.send = null;
-          /**
-           * Callback function called when the user clears the conversation.
-           * Must return a Promise — messages are only cleared if it resolves.
-           */
-          this.clear = null;
-          /**
-           * Conversation messages. Can be set externally for initial messages.
-           * Updated internally as the conversation progresses.
-           */
-          this.messages = [];
-          /**
-           * Header title text.
-           */
-          this.title = 'AI Assistant';
-          /**
-           * Header subtitle text (shown below title with a green status dot).
-           */
-          this.subtitle = '';
-          /**
-           * Input placeholder text.
-           */
-          this.placeholder = 'Type a message...';
-          /**
-           * Whether the chat panel is open. Only relevant in floating mode.
-           */
-          this.opened = false;
+  function rtrim(str, c, invert) {
+      const l = str.length;
+      if (l === 0) {
+          return '';
+      }
+      // Length of suffix matching the invert condition.
+      let suffLen = 0;
+      // Step left until we fail to match the invert condition.
+      while (suffLen < l) {
+          const currChar = str.charAt(l - suffLen - 1);
+          if (currChar === c && true) {
+              suffLen++;
+          }
+          else {
+              break;
+          }
+      }
+      return str.slice(0, l - suffLen);
+  }
+  function findClosingBracket(str, b) {
+      if (str.indexOf(b[1]) === -1) {
+          return -1;
+      }
+      let level = 0;
+      for (let i = 0; i < str.length; i++) {
+          if (str[i] === '\\') {
+              i++;
+          }
+          else if (str[i] === b[0]) {
+              level++;
+          }
+          else if (str[i] === b[1]) {
+              level--;
+              if (level < 0) {
+                  return i;
+              }
+          }
+      }
+      return -1;
+  }
+
+  function outputLink(cap, link, raw, lexer) {
+      const href = link.href;
+      const title = link.title ? escape$1(link.title) : null;
+      const text = cap[1].replace(/\\([\[\]])/g, '$1');
+      if (cap[0].charAt(0) !== '!') {
+          lexer.state.inLink = true;
+          const token = {
+              type: 'link',
+              raw,
+              href,
+              title,
+              text,
+              tokens: lexer.inlineTokens(text)
+          };
+          lexer.state.inLink = false;
+          return token;
+      }
+      return {
+          type: 'image',
+          raw,
+          href,
+          title,
+          text: escape$1(text)
+      };
+  }
+  function indentCodeCompensation(raw, text) {
+      const matchIndentToCode = raw.match(/^(\s+)(?:```)/);
+      if (matchIndentToCode === null) {
+          return text;
+      }
+      const indentToCode = matchIndentToCode[1];
+      return text
+          .split('\n')
+          .map(node => {
+          const matchIndentInNode = node.match(/^\s+/);
+          if (matchIndentInNode === null) {
+              return node;
+          }
+          const [indentInNode] = matchIndentInNode;
+          if (indentInNode.length >= indentToCode.length) {
+              return node.slice(indentToCode.length);
+          }
+          return node;
+      })
+          .join('\n');
+  }
+  /**
+   * Tokenizer
+   */
+  class _Tokenizer {
+      options;
+      rules; // set by the lexer
+      lexer; // set by the lexer
+      constructor(options) {
+          this.options = options || _defaults;
+      }
+      space(src) {
+          const cap = this.rules.block.newline.exec(src);
+          if (cap && cap[0].length > 0) {
+              return {
+                  type: 'space',
+                  raw: cap[0]
+              };
+          }
+      }
+      code(src) {
+          const cap = this.rules.block.code.exec(src);
+          if (cap) {
+              const text = cap[0].replace(/^ {1,4}/gm, '');
+              return {
+                  type: 'code',
+                  raw: cap[0],
+                  codeBlockStyle: 'indented',
+                  text: !this.options.pedantic
+                      ? rtrim(text, '\n')
+                      : text
+              };
+          }
+      }
+      fences(src) {
+          const cap = this.rules.block.fences.exec(src);
+          if (cap) {
+              const raw = cap[0];
+              const text = indentCodeCompensation(raw, cap[3] || '');
+              return {
+                  type: 'code',
+                  raw,
+                  lang: cap[2] ? cap[2].trim().replace(this.rules.inline.anyPunctuation, '$1') : cap[2],
+                  text
+              };
+          }
+      }
+      heading(src) {
+          const cap = this.rules.block.heading.exec(src);
+          if (cap) {
+              let text = cap[2].trim();
+              // remove trailing #s
+              if (/#$/.test(text)) {
+                  const trimmed = rtrim(text, '#');
+                  if (this.options.pedantic) {
+                      text = trimmed.trim();
+                  }
+                  else if (!trimmed || / $/.test(trimmed)) {
+                      // CommonMark requires space before trailing #s
+                      text = trimmed.trim();
+                  }
+              }
+              return {
+                  type: 'heading',
+                  raw: cap[0],
+                  depth: cap[1].length,
+                  text,
+                  tokens: this.lexer.inline(text)
+              };
+          }
+      }
+      hr(src) {
+          const cap = this.rules.block.hr.exec(src);
+          if (cap) {
+              return {
+                  type: 'hr',
+                  raw: cap[0]
+              };
+          }
+      }
+      blockquote(src) {
+          const cap = this.rules.block.blockquote.exec(src);
+          if (cap) {
+              // precede setext continuation with 4 spaces so it isn't a setext
+              let text = cap[0].replace(/\n {0,3}((?:=+|-+) *)(?=\n|$)/g, '\n    $1');
+              text = rtrim(text.replace(/^ *>[ \t]?/gm, ''), '\n');
+              const top = this.lexer.state.top;
+              this.lexer.state.top = true;
+              const tokens = this.lexer.blockTokens(text);
+              this.lexer.state.top = top;
+              return {
+                  type: 'blockquote',
+                  raw: cap[0],
+                  tokens,
+                  text
+              };
+          }
+      }
+      list(src) {
+          let cap = this.rules.block.list.exec(src);
+          if (cap) {
+              let bull = cap[1].trim();
+              const isordered = bull.length > 1;
+              const list = {
+                  type: 'list',
+                  raw: '',
+                  ordered: isordered,
+                  start: isordered ? +bull.slice(0, -1) : '',
+                  loose: false,
+                  items: []
+              };
+              bull = isordered ? `\\d{1,9}\\${bull.slice(-1)}` : `\\${bull}`;
+              if (this.options.pedantic) {
+                  bull = isordered ? bull : '[*+-]';
+              }
+              // Get next list item
+              const itemRegex = new RegExp(`^( {0,3}${bull})((?:[\t ][^\\n]*)?(?:\\n|$))`);
+              let raw = '';
+              let itemContents = '';
+              let endsWithBlankLine = false;
+              // Check if current bullet point can start a new List Item
+              while (src) {
+                  let endEarly = false;
+                  if (!(cap = itemRegex.exec(src))) {
+                      break;
+                  }
+                  if (this.rules.block.hr.test(src)) { // End list if bullet was actually HR (possibly move into itemRegex?)
+                      break;
+                  }
+                  raw = cap[0];
+                  src = src.substring(raw.length);
+                  let line = cap[2].split('\n', 1)[0].replace(/^\t+/, (t) => ' '.repeat(3 * t.length));
+                  let nextLine = src.split('\n', 1)[0];
+                  let indent = 0;
+                  if (this.options.pedantic) {
+                      indent = 2;
+                      itemContents = line.trimStart();
+                  }
+                  else {
+                      indent = cap[2].search(/[^ ]/); // Find first non-space char
+                      indent = indent > 4 ? 1 : indent; // Treat indented code blocks (> 4 spaces) as having only 1 indent
+                      itemContents = line.slice(indent);
+                      indent += cap[1].length;
+                  }
+                  let blankLine = false;
+                  if (!line && /^ *$/.test(nextLine)) { // Items begin with at most one blank line
+                      raw += nextLine + '\n';
+                      src = src.substring(nextLine.length + 1);
+                      endEarly = true;
+                  }
+                  if (!endEarly) {
+                      const nextBulletRegex = new RegExp(`^ {0,${Math.min(3, indent - 1)}}(?:[*+-]|\\d{1,9}[.)])((?:[ \t][^\\n]*)?(?:\\n|$))`);
+                      const hrRegex = new RegExp(`^ {0,${Math.min(3, indent - 1)}}((?:- *){3,}|(?:_ *){3,}|(?:\\* *){3,})(?:\\n+|$)`);
+                      const fencesBeginRegex = new RegExp(`^ {0,${Math.min(3, indent - 1)}}(?:\`\`\`|~~~)`);
+                      const headingBeginRegex = new RegExp(`^ {0,${Math.min(3, indent - 1)}}#`);
+                      // Check if following lines should be included in List Item
+                      while (src) {
+                          const rawLine = src.split('\n', 1)[0];
+                          nextLine = rawLine;
+                          // Re-align to follow commonmark nesting rules
+                          if (this.options.pedantic) {
+                              nextLine = nextLine.replace(/^ {1,4}(?=( {4})*[^ ])/g, '  ');
+                          }
+                          // End list item if found code fences
+                          if (fencesBeginRegex.test(nextLine)) {
+                              break;
+                          }
+                          // End list item if found start of new heading
+                          if (headingBeginRegex.test(nextLine)) {
+                              break;
+                          }
+                          // End list item if found start of new bullet
+                          if (nextBulletRegex.test(nextLine)) {
+                              break;
+                          }
+                          // Horizontal rule found
+                          if (hrRegex.test(src)) {
+                              break;
+                          }
+                          if (nextLine.search(/[^ ]/) >= indent || !nextLine.trim()) { // Dedent if possible
+                              itemContents += '\n' + nextLine.slice(indent);
+                          }
+                          else {
+                              // not enough indentation
+                              if (blankLine) {
+                                  break;
+                              }
+                              // paragraph continuation unless last line was a different block level element
+                              if (line.search(/[^ ]/) >= 4) { // indented code block
+                                  break;
+                              }
+                              if (fencesBeginRegex.test(line)) {
+                                  break;
+                              }
+                              if (headingBeginRegex.test(line)) {
+                                  break;
+                              }
+                              if (hrRegex.test(line)) {
+                                  break;
+                              }
+                              itemContents += '\n' + nextLine;
+                          }
+                          if (!blankLine && !nextLine.trim()) { // Check if current line is blank
+                              blankLine = true;
+                          }
+                          raw += rawLine + '\n';
+                          src = src.substring(rawLine.length + 1);
+                          line = nextLine.slice(indent);
+                      }
+                  }
+                  if (!list.loose) {
+                      // If the previous item ended with a blank line, the list is loose
+                      if (endsWithBlankLine) {
+                          list.loose = true;
+                      }
+                      else if (/\n *\n *$/.test(raw)) {
+                          endsWithBlankLine = true;
+                      }
+                  }
+                  let istask = null;
+                  let ischecked;
+                  // Check for task list items
+                  if (this.options.gfm) {
+                      istask = /^\[[ xX]\] /.exec(itemContents);
+                      if (istask) {
+                          ischecked = istask[0] !== '[ ] ';
+                          itemContents = itemContents.replace(/^\[[ xX]\] +/, '');
+                      }
+                  }
+                  list.items.push({
+                      type: 'list_item',
+                      raw,
+                      task: !!istask,
+                      checked: ischecked,
+                      loose: false,
+                      text: itemContents,
+                      tokens: []
+                  });
+                  list.raw += raw;
+              }
+              // Do not consume newlines at end of final item. Alternatively, make itemRegex *start* with any newlines to simplify/speed up endsWithBlankLine logic
+              list.items[list.items.length - 1].raw = raw.trimEnd();
+              (list.items[list.items.length - 1]).text = itemContents.trimEnd();
+              list.raw = list.raw.trimEnd();
+              // Item child tokens handled here at end because we needed to have the final item to trim it first
+              for (let i = 0; i < list.items.length; i++) {
+                  this.lexer.state.top = false;
+                  list.items[i].tokens = this.lexer.blockTokens(list.items[i].text, []);
+                  if (!list.loose) {
+                      // Check if list should be loose
+                      const spacers = list.items[i].tokens.filter(t => t.type === 'space');
+                      const hasMultipleLineBreaks = spacers.length > 0 && spacers.some(t => /\n.*\n/.test(t.raw));
+                      list.loose = hasMultipleLineBreaks;
+                  }
+              }
+              // Set all items to loose if list is loose
+              if (list.loose) {
+                  for (let i = 0; i < list.items.length; i++) {
+                      list.items[i].loose = true;
+                  }
+              }
+              return list;
+          }
+      }
+      html(src) {
+          const cap = this.rules.block.html.exec(src);
+          if (cap) {
+              const token = {
+                  type: 'html',
+                  block: true,
+                  raw: cap[0],
+                  pre: cap[1] === 'pre' || cap[1] === 'script' || cap[1] === 'style',
+                  text: cap[0]
+              };
+              return token;
+          }
+      }
+      def(src) {
+          const cap = this.rules.block.def.exec(src);
+          if (cap) {
+              const tag = cap[1].toLowerCase().replace(/\s+/g, ' ');
+              const href = cap[2] ? cap[2].replace(/^<(.*)>$/, '$1').replace(this.rules.inline.anyPunctuation, '$1') : '';
+              const title = cap[3] ? cap[3].substring(1, cap[3].length - 1).replace(this.rules.inline.anyPunctuation, '$1') : cap[3];
+              return {
+                  type: 'def',
+                  tag,
+                  raw: cap[0],
+                  href,
+                  title
+              };
+          }
+      }
+      table(src) {
+          const cap = this.rules.block.table.exec(src);
+          if (!cap) {
+              return;
+          }
+          if (!/[:|]/.test(cap[2])) {
+              // delimiter row must have a pipe (|) or colon (:) otherwise it is a setext heading
+              return;
+          }
+          const headers = splitCells(cap[1]);
+          const aligns = cap[2].replace(/^\||\| *$/g, '').split('|');
+          const rows = cap[3] && cap[3].trim() ? cap[3].replace(/\n[ \t]*$/, '').split('\n') : [];
+          const item = {
+              type: 'table',
+              raw: cap[0],
+              header: [],
+              align: [],
+              rows: []
+          };
+          if (headers.length !== aligns.length) {
+              // header and align columns must be equal, rows can be different.
+              return;
+          }
+          for (const align of aligns) {
+              if (/^ *-+: *$/.test(align)) {
+                  item.align.push('right');
+              }
+              else if (/^ *:-+: *$/.test(align)) {
+                  item.align.push('center');
+              }
+              else if (/^ *:-+ *$/.test(align)) {
+                  item.align.push('left');
+              }
+              else {
+                  item.align.push(null);
+              }
+          }
+          for (const header of headers) {
+              item.header.push({
+                  text: header,
+                  tokens: this.lexer.inline(header)
+              });
+          }
+          for (const row of rows) {
+              item.rows.push(splitCells(row, item.header.length).map(cell => {
+                  return {
+                      text: cell,
+                      tokens: this.lexer.inline(cell)
+                  };
+              }));
+          }
+          return item;
+      }
+      lheading(src) {
+          const cap = this.rules.block.lheading.exec(src);
+          if (cap) {
+              return {
+                  type: 'heading',
+                  raw: cap[0],
+                  depth: cap[2].charAt(0) === '=' ? 1 : 2,
+                  text: cap[1],
+                  tokens: this.lexer.inline(cap[1])
+              };
+          }
+      }
+      paragraph(src) {
+          const cap = this.rules.block.paragraph.exec(src);
+          if (cap) {
+              const text = cap[1].charAt(cap[1].length - 1) === '\n'
+                  ? cap[1].slice(0, -1)
+                  : cap[1];
+              return {
+                  type: 'paragraph',
+                  raw: cap[0],
+                  text,
+                  tokens: this.lexer.inline(text)
+              };
+          }
+      }
+      text(src) {
+          const cap = this.rules.block.text.exec(src);
+          if (cap) {
+              return {
+                  type: 'text',
+                  raw: cap[0],
+                  text: cap[0],
+                  tokens: this.lexer.inline(cap[0])
+              };
+          }
+      }
+      escape(src) {
+          const cap = this.rules.inline.escape.exec(src);
+          if (cap) {
+              return {
+                  type: 'escape',
+                  raw: cap[0],
+                  text: escape$1(cap[1])
+              };
+          }
+      }
+      tag(src) {
+          const cap = this.rules.inline.tag.exec(src);
+          if (cap) {
+              if (!this.lexer.state.inLink && /^<a /i.test(cap[0])) {
+                  this.lexer.state.inLink = true;
+              }
+              else if (this.lexer.state.inLink && /^<\/a>/i.test(cap[0])) {
+                  this.lexer.state.inLink = false;
+              }
+              if (!this.lexer.state.inRawBlock && /^<(pre|code|kbd|script)(\s|>)/i.test(cap[0])) {
+                  this.lexer.state.inRawBlock = true;
+              }
+              else if (this.lexer.state.inRawBlock && /^<\/(pre|code|kbd|script)(\s|>)/i.test(cap[0])) {
+                  this.lexer.state.inRawBlock = false;
+              }
+              return {
+                  type: 'html',
+                  raw: cap[0],
+                  inLink: this.lexer.state.inLink,
+                  inRawBlock: this.lexer.state.inRawBlock,
+                  block: false,
+                  text: cap[0]
+              };
+          }
+      }
+      link(src) {
+          const cap = this.rules.inline.link.exec(src);
+          if (cap) {
+              const trimmedUrl = cap[2].trim();
+              if (!this.options.pedantic && /^</.test(trimmedUrl)) {
+                  // commonmark requires matching angle brackets
+                  if (!(/>$/.test(trimmedUrl))) {
+                      return;
+                  }
+                  // ending angle bracket cannot be escaped
+                  const rtrimSlash = rtrim(trimmedUrl.slice(0, -1), '\\');
+                  if ((trimmedUrl.length - rtrimSlash.length) % 2 === 0) {
+                      return;
+                  }
+              }
+              else {
+                  // find closing parenthesis
+                  const lastParenIndex = findClosingBracket(cap[2], '()');
+                  if (lastParenIndex > -1) {
+                      const start = cap[0].indexOf('!') === 0 ? 5 : 4;
+                      const linkLen = start + cap[1].length + lastParenIndex;
+                      cap[2] = cap[2].substring(0, lastParenIndex);
+                      cap[0] = cap[0].substring(0, linkLen).trim();
+                      cap[3] = '';
+                  }
+              }
+              let href = cap[2];
+              let title = '';
+              if (this.options.pedantic) {
+                  // split pedantic href and title
+                  const link = /^([^'"]*[^\s])\s+(['"])(.*)\2/.exec(href);
+                  if (link) {
+                      href = link[1];
+                      title = link[3];
+                  }
+              }
+              else {
+                  title = cap[3] ? cap[3].slice(1, -1) : '';
+              }
+              href = href.trim();
+              if (/^</.test(href)) {
+                  if (this.options.pedantic && !(/>$/.test(trimmedUrl))) {
+                      // pedantic allows starting angle bracket without ending angle bracket
+                      href = href.slice(1);
+                  }
+                  else {
+                      href = href.slice(1, -1);
+                  }
+              }
+              return outputLink(cap, {
+                  href: href ? href.replace(this.rules.inline.anyPunctuation, '$1') : href,
+                  title: title ? title.replace(this.rules.inline.anyPunctuation, '$1') : title
+              }, cap[0], this.lexer);
+          }
+      }
+      reflink(src, links) {
+          let cap;
+          if ((cap = this.rules.inline.reflink.exec(src))
+              || (cap = this.rules.inline.nolink.exec(src))) {
+              const linkString = (cap[2] || cap[1]).replace(/\s+/g, ' ');
+              const link = links[linkString.toLowerCase()];
+              if (!link) {
+                  const text = cap[0].charAt(0);
+                  return {
+                      type: 'text',
+                      raw: text,
+                      text
+                  };
+              }
+              return outputLink(cap, link, cap[0], this.lexer);
+          }
+      }
+      emStrong(src, maskedSrc, prevChar = '') {
+          let match = this.rules.inline.emStrongLDelim.exec(src);
+          if (!match)
+              return;
+          // _ can't be between two alphanumerics. \p{L}\p{N} includes non-english alphabet/numbers as well
+          if (match[3] && prevChar.match(/[\p{L}\p{N}]/u))
+              return;
+          const nextChar = match[1] || match[2] || '';
+          if (!nextChar || !prevChar || this.rules.inline.punctuation.exec(prevChar)) {
+              // unicode Regex counts emoji as 1 char; spread into array for proper count (used multiple times below)
+              const lLength = [...match[0]].length - 1;
+              let rDelim, rLength, delimTotal = lLength, midDelimTotal = 0;
+              const endReg = match[0][0] === '*' ? this.rules.inline.emStrongRDelimAst : this.rules.inline.emStrongRDelimUnd;
+              endReg.lastIndex = 0;
+              // Clip maskedSrc to same section of string as src (move to lexer?)
+              maskedSrc = maskedSrc.slice(-1 * src.length + lLength);
+              while ((match = endReg.exec(maskedSrc)) != null) {
+                  rDelim = match[1] || match[2] || match[3] || match[4] || match[5] || match[6];
+                  if (!rDelim)
+                      continue; // skip single * in __abc*abc__
+                  rLength = [...rDelim].length;
+                  if (match[3] || match[4]) { // found another Left Delim
+                      delimTotal += rLength;
+                      continue;
+                  }
+                  else if (match[5] || match[6]) { // either Left or Right Delim
+                      if (lLength % 3 && !((lLength + rLength) % 3)) {
+                          midDelimTotal += rLength;
+                          continue; // CommonMark Emphasis Rules 9-10
+                      }
+                  }
+                  delimTotal -= rLength;
+                  if (delimTotal > 0)
+                      continue; // Haven't found enough closing delimiters
+                  // Remove extra characters. *a*** -> *a*
+                  rLength = Math.min(rLength, rLength + delimTotal + midDelimTotal);
+                  // char length can be >1 for unicode characters;
+                  const lastCharLength = [...match[0]][0].length;
+                  const raw = src.slice(0, lLength + match.index + lastCharLength + rLength);
+                  // Create `em` if smallest delimiter has odd char count. *a***
+                  if (Math.min(lLength, rLength) % 2) {
+                      const text = raw.slice(1, -1);
+                      return {
+                          type: 'em',
+                          raw,
+                          text,
+                          tokens: this.lexer.inlineTokens(text)
+                      };
+                  }
+                  // Create 'strong' if smallest delimiter has even char count. **a***
+                  const text = raw.slice(2, -2);
+                  return {
+                      type: 'strong',
+                      raw,
+                      text,
+                      tokens: this.lexer.inlineTokens(text)
+                  };
+              }
+          }
+      }
+      codespan(src) {
+          const cap = this.rules.inline.code.exec(src);
+          if (cap) {
+              let text = cap[2].replace(/\n/g, ' ');
+              const hasNonSpaceChars = /[^ ]/.test(text);
+              const hasSpaceCharsOnBothEnds = /^ /.test(text) && / $/.test(text);
+              if (hasNonSpaceChars && hasSpaceCharsOnBothEnds) {
+                  text = text.substring(1, text.length - 1);
+              }
+              text = escape$1(text, true);
+              return {
+                  type: 'codespan',
+                  raw: cap[0],
+                  text
+              };
+          }
+      }
+      br(src) {
+          const cap = this.rules.inline.br.exec(src);
+          if (cap) {
+              return {
+                  type: 'br',
+                  raw: cap[0]
+              };
+          }
+      }
+      del(src) {
+          const cap = this.rules.inline.del.exec(src);
+          if (cap) {
+              return {
+                  type: 'del',
+                  raw: cap[0],
+                  text: cap[2],
+                  tokens: this.lexer.inlineTokens(cap[2])
+              };
+          }
+      }
+      autolink(src) {
+          const cap = this.rules.inline.autolink.exec(src);
+          if (cap) {
+              let text, href;
+              if (cap[2] === '@') {
+                  text = escape$1(cap[1]);
+                  href = 'mailto:' + text;
+              }
+              else {
+                  text = escape$1(cap[1]);
+                  href = text;
+              }
+              return {
+                  type: 'link',
+                  raw: cap[0],
+                  text,
+                  href,
+                  tokens: [
+                      {
+                          type: 'text',
+                          raw: text,
+                          text
+                      }
+                  ]
+              };
+          }
+      }
+      url(src) {
+          let cap;
+          if (cap = this.rules.inline.url.exec(src)) {
+              let text, href;
+              if (cap[2] === '@') {
+                  text = escape$1(cap[0]);
+                  href = 'mailto:' + text;
+              }
+              else {
+                  // do extended autolink path validation
+                  let prevCapZero;
+                  do {
+                      prevCapZero = cap[0];
+                      cap[0] = this.rules.inline._backpedal.exec(cap[0])?.[0] ?? '';
+                  } while (prevCapZero !== cap[0]);
+                  text = escape$1(cap[0]);
+                  if (cap[1] === 'www.') {
+                      href = 'http://' + cap[0];
+                  }
+                  else {
+                      href = cap[0];
+                  }
+              }
+              return {
+                  type: 'link',
+                  raw: cap[0],
+                  text,
+                  href,
+                  tokens: [
+                      {
+                          type: 'text',
+                          raw: text,
+                          text
+                      }
+                  ]
+              };
+          }
+      }
+      inlineText(src) {
+          const cap = this.rules.inline.text.exec(src);
+          if (cap) {
+              let text;
+              if (this.lexer.state.inRawBlock) {
+                  text = cap[0];
+              }
+              else {
+                  text = escape$1(cap[0]);
+              }
+              return {
+                  type: 'text',
+                  raw: cap[0],
+                  text
+              };
+          }
+      }
+  }
+
+  /**
+   * Block-Level Grammar
+   */
+  const newline = /^(?: *(?:\n|$))+/;
+  const blockCode = /^( {4}[^\n]+(?:\n(?: *(?:\n|$))*)?)+/;
+  const fences = /^ {0,3}(`{3,}(?=[^`\n]*(?:\n|$))|~{3,})([^\n]*)(?:\n|$)(?:|([\s\S]*?)(?:\n|$))(?: {0,3}\1[~`]* *(?=\n|$)|$)/;
+  const hr = /^ {0,3}((?:-[\t ]*){3,}|(?:_[ \t]*){3,}|(?:\*[ \t]*){3,})(?:\n+|$)/;
+  const heading = /^ {0,3}(#{1,6})(?=\s|$)(.*)(?:\n+|$)/;
+  const bullet = /(?:[*+-]|\d{1,9}[.)])/;
+  const lheading = edit(/^(?!bull |blockCode|fences|blockquote|heading|html)((?:.|\n(?!\s*?\n|bull |blockCode|fences|blockquote|heading|html))+?)\n {0,3}(=+|-+) *(?:\n+|$)/)
+      .replace(/bull/g, bullet) // lists can interrupt
+      .replace(/blockCode/g, / {4}/) // indented code blocks can interrupt
+      .replace(/fences/g, / {0,3}(?:`{3,}|~{3,})/) // fenced code blocks can interrupt
+      .replace(/blockquote/g, / {0,3}>/) // blockquote can interrupt
+      .replace(/heading/g, / {0,3}#{1,6}/) // ATX heading can interrupt
+      .replace(/html/g, / {0,3}<[^\n>]+>\n/) // block html can interrupt
+      .getRegex();
+  const _paragraph = /^([^\n]+(?:\n(?!hr|heading|lheading|blockquote|fences|list|html|table| +\n)[^\n]+)*)/;
+  const blockText = /^[^\n]+/;
+  const _blockLabel = /(?!\s*\])(?:\\.|[^\[\]\\])+/;
+  const def = edit(/^ {0,3}\[(label)\]: *(?:\n *)?([^<\s][^\s]*|<.*?>)(?:(?: +(?:\n *)?| *\n *)(title))? *(?:\n+|$)/)
+      .replace('label', _blockLabel)
+      .replace('title', /(?:"(?:\\"?|[^"\\])*"|'[^'\n]*(?:\n[^'\n]+)*\n?'|\([^()]*\))/)
+      .getRegex();
+  const list = edit(/^( {0,3}bull)([ \t][^\n]+?)?(?:\n|$)/)
+      .replace(/bull/g, bullet)
+      .getRegex();
+  const _tag = 'address|article|aside|base|basefont|blockquote|body|caption'
+      + '|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption'
+      + '|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe'
+      + '|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option'
+      + '|p|param|search|section|summary|table|tbody|td|tfoot|th|thead|title'
+      + '|tr|track|ul';
+  const _comment = /<!--(?:-?>|[\s\S]*?(?:-->|$))/;
+  const html = edit('^ {0,3}(?:' // optional indentation
+      + '<(script|pre|style|textarea)[\\s>][\\s\\S]*?(?:</\\1>[^\\n]*\\n+|$)' // (1)
+      + '|comment[^\\n]*(\\n+|$)' // (2)
+      + '|<\\?[\\s\\S]*?(?:\\?>\\n*|$)' // (3)
+      + '|<![A-Z][\\s\\S]*?(?:>\\n*|$)' // (4)
+      + '|<!\\[CDATA\\[[\\s\\S]*?(?:\\]\\]>\\n*|$)' // (5)
+      + '|</?(tag)(?: +|\\n|/?>)[\\s\\S]*?(?:(?:\\n *)+\\n|$)' // (6)
+      + '|<(?!script|pre|style|textarea)([a-z][\\w-]*)(?:attribute)*? */?>(?=[ \\t]*(?:\\n|$))[\\s\\S]*?(?:(?:\\n *)+\\n|$)' // (7) open tag
+      + '|</(?!script|pre|style|textarea)[a-z][\\w-]*\\s*>(?=[ \\t]*(?:\\n|$))[\\s\\S]*?(?:(?:\\n *)+\\n|$)' // (7) closing tag
+      + ')', 'i')
+      .replace('comment', _comment)
+      .replace('tag', _tag)
+      .replace('attribute', / +[a-zA-Z:_][\w.:-]*(?: *= *"[^"\n]*"| *= *'[^'\n]*'| *= *[^\s"'=<>`]+)?/)
+      .getRegex();
+  const paragraph = edit(_paragraph)
+      .replace('hr', hr)
+      .replace('heading', ' {0,3}#{1,6}(?:\\s|$)')
+      .replace('|lheading', '') // setext headings don't interrupt commonmark paragraphs
+      .replace('|table', '')
+      .replace('blockquote', ' {0,3}>')
+      .replace('fences', ' {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n')
+      .replace('list', ' {0,3}(?:[*+-]|1[.)]) ') // only lists starting from 1 can interrupt
+      .replace('html', '</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)')
+      .replace('tag', _tag) // pars can be interrupted by type (6) html blocks
+      .getRegex();
+  const blockquote = edit(/^( {0,3}> ?(paragraph|[^\n]*)(?:\n|$))+/)
+      .replace('paragraph', paragraph)
+      .getRegex();
+  /**
+   * Normal Block Grammar
+   */
+  const blockNormal = {
+      blockquote,
+      code: blockCode,
+      def,
+      fences,
+      heading,
+      hr,
+      html,
+      lheading,
+      list,
+      newline,
+      paragraph,
+      table: noopTest,
+      text: blockText
+  };
+  /**
+   * GFM Block Grammar
+   */
+  const gfmTable = edit('^ *([^\\n ].*)\\n' // Header
+      + ' {0,3}((?:\\| *)?:?-+:? *(?:\\| *:?-+:? *)*(?:\\| *)?)' // Align
+      + '(?:\\n((?:(?! *\\n|hr|heading|blockquote|code|fences|list|html).*(?:\\n|$))*)\\n*|$)') // Cells
+      .replace('hr', hr)
+      .replace('heading', ' {0,3}#{1,6}(?:\\s|$)')
+      .replace('blockquote', ' {0,3}>')
+      .replace('code', ' {4}[^\\n]')
+      .replace('fences', ' {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n')
+      .replace('list', ' {0,3}(?:[*+-]|1[.)]) ') // only lists starting from 1 can interrupt
+      .replace('html', '</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)')
+      .replace('tag', _tag) // tables can be interrupted by type (6) html blocks
+      .getRegex();
+  const blockGfm = {
+      ...blockNormal,
+      table: gfmTable,
+      paragraph: edit(_paragraph)
+          .replace('hr', hr)
+          .replace('heading', ' {0,3}#{1,6}(?:\\s|$)')
+          .replace('|lheading', '') // setext headings don't interrupt commonmark paragraphs
+          .replace('table', gfmTable) // interrupt paragraphs with table
+          .replace('blockquote', ' {0,3}>')
+          .replace('fences', ' {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n')
+          .replace('list', ' {0,3}(?:[*+-]|1[.)]) ') // only lists starting from 1 can interrupt
+          .replace('html', '</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)')
+          .replace('tag', _tag) // pars can be interrupted by type (6) html blocks
+          .getRegex()
+  };
+  /**
+   * Pedantic grammar (original John Gruber's loose markdown specification)
+   */
+  const blockPedantic = {
+      ...blockNormal,
+      html: edit('^ *(?:comment *(?:\\n|\\s*$)'
+          + '|<(tag)[\\s\\S]+?</\\1> *(?:\\n{2,}|\\s*$)' // closed tag
+          + '|<tag(?:"[^"]*"|\'[^\']*\'|\\s[^\'"/>\\s]*)*?/?> *(?:\\n{2,}|\\s*$))')
+          .replace('comment', _comment)
+          .replace(/tag/g, '(?!(?:'
+          + 'a|em|strong|small|s|cite|q|dfn|abbr|data|time|code|var|samp|kbd|sub'
+          + '|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo|span|br|wbr|ins|del|img)'
+          + '\\b)\\w+(?!:|[^\\w\\s@]*@)\\b')
+          .getRegex(),
+      def: /^ *\[([^\]]+)\]: *<?([^\s>]+)>?(?: +(["(][^\n]+[")]))? *(?:\n+|$)/,
+      heading: /^(#{1,6})(.*)(?:\n+|$)/,
+      fences: noopTest, // fences not supported
+      lheading: /^(.+?)\n {0,3}(=+|-+) *(?:\n+|$)/,
+      paragraph: edit(_paragraph)
+          .replace('hr', hr)
+          .replace('heading', ' *#{1,6} *[^\n]')
+          .replace('lheading', lheading)
+          .replace('|table', '')
+          .replace('blockquote', ' {0,3}>')
+          .replace('|fences', '')
+          .replace('|list', '')
+          .replace('|html', '')
+          .replace('|tag', '')
+          .getRegex()
+  };
+  /**
+   * Inline-Level Grammar
+   */
+  const escape = /^\\([!"#$%&'()*+,\-./:;<=>?@\[\]\\^_`{|}~])/;
+  const inlineCode = /^(`+)([^`]|[^`][\s\S]*?[^`])\1(?!`)/;
+  const br = /^( {2,}|\\)\n(?!\s*$)/;
+  const inlineText = /^(`+|[^`])(?:(?= {2,}\n)|[\s\S]*?(?:(?=[\\<!\[`*_]|\b_|$)|[^ ](?= {2,}\n)))/;
+  // list of unicode punctuation marks, plus any missing characters from CommonMark spec
+  const _punctuation = '\\p{P}\\p{S}';
+  const punctuation = edit(/^((?![*_])[\spunctuation])/, 'u')
+      .replace(/punctuation/g, _punctuation).getRegex();
+  // sequences em should skip over [title](link), `code`, <html>
+  const blockSkip = /\[[^[\]]*?\]\([^\(\)]*?\)|`[^`]*?`|<[^<>]*?>/g;
+  const emStrongLDelim = edit(/^(?:\*+(?:((?!\*)[punct])|[^\s*]))|^_+(?:((?!_)[punct])|([^\s_]))/, 'u')
+      .replace(/punct/g, _punctuation)
+      .getRegex();
+  const emStrongRDelimAst = edit('^[^_*]*?__[^_*]*?\\*[^_*]*?(?=__)' // Skip orphan inside strong
+      + '|[^*]+(?=[^*])' // Consume to delim
+      + '|(?!\\*)[punct](\\*+)(?=[\\s]|$)' // (1) #*** can only be a Right Delimiter
+      + '|[^punct\\s](\\*+)(?!\\*)(?=[punct\\s]|$)' // (2) a***#, a*** can only be a Right Delimiter
+      + '|(?!\\*)[punct\\s](\\*+)(?=[^punct\\s])' // (3) #***a, ***a can only be Left Delimiter
+      + '|[\\s](\\*+)(?!\\*)(?=[punct])' // (4) ***# can only be Left Delimiter
+      + '|(?!\\*)[punct](\\*+)(?!\\*)(?=[punct])' // (5) #***# can be either Left or Right Delimiter
+      + '|[^punct\\s](\\*+)(?=[^punct\\s])', 'gu') // (6) a***a can be either Left or Right Delimiter
+      .replace(/punct/g, _punctuation)
+      .getRegex();
+  // (6) Not allowed for _
+  const emStrongRDelimUnd = edit('^[^_*]*?\\*\\*[^_*]*?_[^_*]*?(?=\\*\\*)' // Skip orphan inside strong
+      + '|[^_]+(?=[^_])' // Consume to delim
+      + '|(?!_)[punct](_+)(?=[\\s]|$)' // (1) #___ can only be a Right Delimiter
+      + '|[^punct\\s](_+)(?!_)(?=[punct\\s]|$)' // (2) a___#, a___ can only be a Right Delimiter
+      + '|(?!_)[punct\\s](_+)(?=[^punct\\s])' // (3) #___a, ___a can only be Left Delimiter
+      + '|[\\s](_+)(?!_)(?=[punct])' // (4) ___# can only be Left Delimiter
+      + '|(?!_)[punct](_+)(?!_)(?=[punct])', 'gu') // (5) #___# can be either Left or Right Delimiter
+      .replace(/punct/g, _punctuation)
+      .getRegex();
+  const anyPunctuation = edit(/\\([punct])/, 'gu')
+      .replace(/punct/g, _punctuation)
+      .getRegex();
+  const autolink = edit(/^<(scheme:[^\s\x00-\x1f<>]*|email)>/)
+      .replace('scheme', /[a-zA-Z][a-zA-Z0-9+.-]{1,31}/)
+      .replace('email', /[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+(@)[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+(?![-_])/)
+      .getRegex();
+  const _inlineComment = edit(_comment).replace('(?:-->|$)', '-->').getRegex();
+  const tag = edit('^comment'
+      + '|^</[a-zA-Z][\\w:-]*\\s*>' // self-closing tag
+      + '|^<[a-zA-Z][\\w-]*(?:attribute)*?\\s*/?>' // open tag
+      + '|^<\\?[\\s\\S]*?\\?>' // processing instruction, e.g. <?php ?>
+      + '|^<![a-zA-Z]+\\s[\\s\\S]*?>' // declaration, e.g. <!DOCTYPE html>
+      + '|^<!\\[CDATA\\[[\\s\\S]*?\\]\\]>') // CDATA section
+      .replace('comment', _inlineComment)
+      .replace('attribute', /\s+[a-zA-Z:_][\w.:-]*(?:\s*=\s*"[^"]*"|\s*=\s*'[^']*'|\s*=\s*[^\s"'=<>`]+)?/)
+      .getRegex();
+  const _inlineLabel = /(?:\[(?:\\.|[^\[\]\\])*\]|\\.|`[^`]*`|[^\[\]\\`])*?/;
+  const link = edit(/^!?\[(label)\]\(\s*(href)(?:\s+(title))?\s*\)/)
+      .replace('label', _inlineLabel)
+      .replace('href', /<(?:\\.|[^\n<>\\])+>|[^\s\x00-\x1f]*/)
+      .replace('title', /"(?:\\"?|[^"\\])*"|'(?:\\'?|[^'\\])*'|\((?:\\\)?|[^)\\])*\)/)
+      .getRegex();
+  const reflink = edit(/^!?\[(label)\]\[(ref)\]/)
+      .replace('label', _inlineLabel)
+      .replace('ref', _blockLabel)
+      .getRegex();
+  const nolink = edit(/^!?\[(ref)\](?:\[\])?/)
+      .replace('ref', _blockLabel)
+      .getRegex();
+  const reflinkSearch = edit('reflink|nolink(?!\\()', 'g')
+      .replace('reflink', reflink)
+      .replace('nolink', nolink)
+      .getRegex();
+  /**
+   * Normal Inline Grammar
+   */
+  const inlineNormal = {
+      _backpedal: noopTest, // only used for GFM url
+      anyPunctuation,
+      autolink,
+      blockSkip,
+      br,
+      code: inlineCode,
+      del: noopTest,
+      emStrongLDelim,
+      emStrongRDelimAst,
+      emStrongRDelimUnd,
+      escape,
+      link,
+      nolink,
+      punctuation,
+      reflink,
+      reflinkSearch,
+      tag,
+      text: inlineText,
+      url: noopTest
+  };
+  /**
+   * Pedantic Inline Grammar
+   */
+  const inlinePedantic = {
+      ...inlineNormal,
+      link: edit(/^!?\[(label)\]\((.*?)\)/)
+          .replace('label', _inlineLabel)
+          .getRegex(),
+      reflink: edit(/^!?\[(label)\]\s*\[([^\]]*)\]/)
+          .replace('label', _inlineLabel)
+          .getRegex()
+  };
+  /**
+   * GFM Inline Grammar
+   */
+  const inlineGfm = {
+      ...inlineNormal,
+      escape: edit(escape).replace('])', '~|])').getRegex(),
+      url: edit(/^((?:ftp|https?):\/\/|www\.)(?:[a-zA-Z0-9\-]+\.?)+[^\s<]*|^email/, 'i')
+          .replace('email', /[A-Za-z0-9._+-]+(@)[a-zA-Z0-9-_]+(?:\.[a-zA-Z0-9-_]*[a-zA-Z0-9])+(?![-_])/)
+          .getRegex(),
+      _backpedal: /(?:[^?!.,:;*_'"~()&]+|\([^)]*\)|&(?![a-zA-Z0-9]+;$)|[?!.,:;*_'"~)]+(?!$))+/,
+      del: /^(~~?)(?=[^\s~])([\s\S]*?[^\s~])\1(?=[^~]|$)/,
+      text: /^([`~]+|[^`~])(?:(?= {2,}\n)|(?=[a-zA-Z0-9.!#$%&'*+\/=?_`{\|}~-]+@)|[\s\S]*?(?:(?=[\\<!\[`*~_]|\b_|https?:\/\/|ftp:\/\/|www\.|$)|[^ ](?= {2,}\n)|[^a-zA-Z0-9.!#$%&'*+\/=?_`{\|}~-](?=[a-zA-Z0-9.!#$%&'*+\/=?_`{\|}~-]+@)))/
+  };
+  /**
+   * GFM + Line Breaks Inline Grammar
+   */
+  const inlineBreaks = {
+      ...inlineGfm,
+      br: edit(br).replace('{2,}', '*').getRegex(),
+      text: edit(inlineGfm.text)
+          .replace('\\b_', '\\b_| {2,}\\n')
+          .replace(/\{2,\}/g, '*')
+          .getRegex()
+  };
+  /**
+   * exports
+   */
+  const block = {
+      normal: blockNormal,
+      gfm: blockGfm,
+      pedantic: blockPedantic
+  };
+  const inline = {
+      normal: inlineNormal,
+      gfm: inlineGfm,
+      breaks: inlineBreaks,
+      pedantic: inlinePedantic
+  };
+
+  /**
+   * Block Lexer
+   */
+  class _Lexer {
+      tokens;
+      options;
+      state;
+      tokenizer;
+      inlineQueue;
+      constructor(options) {
+          // TokenList cannot be created in one go
+          this.tokens = [];
+          this.tokens.links = Object.create(null);
+          this.options = options || _defaults;
+          this.options.tokenizer = this.options.tokenizer || new _Tokenizer();
+          this.tokenizer = this.options.tokenizer;
+          this.tokenizer.options = this.options;
+          this.tokenizer.lexer = this;
+          this.inlineQueue = [];
+          this.state = {
+              inLink: false,
+              inRawBlock: false,
+              top: true
+          };
+          const rules = {
+              block: block.normal,
+              inline: inline.normal
+          };
+          if (this.options.pedantic) {
+              rules.block = block.pedantic;
+              rules.inline = inline.pedantic;
+          }
+          else if (this.options.gfm) {
+              rules.block = block.gfm;
+              if (this.options.breaks) {
+                  rules.inline = inline.breaks;
+              }
+              else {
+                  rules.inline = inline.gfm;
+              }
+          }
+          this.tokenizer.rules = rules;
+      }
+      /**
+       * Expose Rules
+       */
+      static get rules() {
+          return {
+              block,
+              inline
+          };
+      }
+      /**
+       * Static Lex Method
+       */
+      static lex(src, options) {
+          const lexer = new _Lexer(options);
+          return lexer.lex(src);
+      }
+      /**
+       * Static Lex Inline Method
+       */
+      static lexInline(src, options) {
+          const lexer = new _Lexer(options);
+          return lexer.inlineTokens(src);
+      }
+      /**
+       * Preprocessing
+       */
+      lex(src) {
+          src = src
+              .replace(/\r\n|\r/g, '\n');
+          this.blockTokens(src, this.tokens);
+          for (let i = 0; i < this.inlineQueue.length; i++) {
+              const next = this.inlineQueue[i];
+              this.inlineTokens(next.src, next.tokens);
+          }
+          this.inlineQueue = [];
+          return this.tokens;
+      }
+      blockTokens(src, tokens = []) {
+          if (this.options.pedantic) {
+              src = src.replace(/\t/g, '    ').replace(/^ +$/gm, '');
+          }
+          else {
+              src = src.replace(/^( *)(\t+)/gm, (_, leading, tabs) => {
+                  return leading + '    '.repeat(tabs.length);
+              });
+          }
+          let token;
+          let lastToken;
+          let cutSrc;
+          let lastParagraphClipped;
+          while (src) {
+              if (this.options.extensions
+                  && this.options.extensions.block
+                  && this.options.extensions.block.some((extTokenizer) => {
+                      if (token = extTokenizer.call({ lexer: this }, src, tokens)) {
+                          src = src.substring(token.raw.length);
+                          tokens.push(token);
+                          return true;
+                      }
+                      return false;
+                  })) {
+                  continue;
+              }
+              // newline
+              if (token = this.tokenizer.space(src)) {
+                  src = src.substring(token.raw.length);
+                  if (token.raw.length === 1 && tokens.length > 0) {
+                      // if there's a single \n as a spacer, it's terminating the last line,
+                      // so move it there so that we don't get unnecessary paragraph tags
+                      tokens[tokens.length - 1].raw += '\n';
+                  }
+                  else {
+                      tokens.push(token);
+                  }
+                  continue;
+              }
+              // code
+              if (token = this.tokenizer.code(src)) {
+                  src = src.substring(token.raw.length);
+                  lastToken = tokens[tokens.length - 1];
+                  // An indented code block cannot interrupt a paragraph.
+                  if (lastToken && (lastToken.type === 'paragraph' || lastToken.type === 'text')) {
+                      lastToken.raw += '\n' + token.raw;
+                      lastToken.text += '\n' + token.text;
+                      this.inlineQueue[this.inlineQueue.length - 1].src = lastToken.text;
+                  }
+                  else {
+                      tokens.push(token);
+                  }
+                  continue;
+              }
+              // fences
+              if (token = this.tokenizer.fences(src)) {
+                  src = src.substring(token.raw.length);
+                  tokens.push(token);
+                  continue;
+              }
+              // heading
+              if (token = this.tokenizer.heading(src)) {
+                  src = src.substring(token.raw.length);
+                  tokens.push(token);
+                  continue;
+              }
+              // hr
+              if (token = this.tokenizer.hr(src)) {
+                  src = src.substring(token.raw.length);
+                  tokens.push(token);
+                  continue;
+              }
+              // blockquote
+              if (token = this.tokenizer.blockquote(src)) {
+                  src = src.substring(token.raw.length);
+                  tokens.push(token);
+                  continue;
+              }
+              // list
+              if (token = this.tokenizer.list(src)) {
+                  src = src.substring(token.raw.length);
+                  tokens.push(token);
+                  continue;
+              }
+              // html
+              if (token = this.tokenizer.html(src)) {
+                  src = src.substring(token.raw.length);
+                  tokens.push(token);
+                  continue;
+              }
+              // def
+              if (token = this.tokenizer.def(src)) {
+                  src = src.substring(token.raw.length);
+                  lastToken = tokens[tokens.length - 1];
+                  if (lastToken && (lastToken.type === 'paragraph' || lastToken.type === 'text')) {
+                      lastToken.raw += '\n' + token.raw;
+                      lastToken.text += '\n' + token.raw;
+                      this.inlineQueue[this.inlineQueue.length - 1].src = lastToken.text;
+                  }
+                  else if (!this.tokens.links[token.tag]) {
+                      this.tokens.links[token.tag] = {
+                          href: token.href,
+                          title: token.title
+                      };
+                  }
+                  continue;
+              }
+              // table (gfm)
+              if (token = this.tokenizer.table(src)) {
+                  src = src.substring(token.raw.length);
+                  tokens.push(token);
+                  continue;
+              }
+              // lheading
+              if (token = this.tokenizer.lheading(src)) {
+                  src = src.substring(token.raw.length);
+                  tokens.push(token);
+                  continue;
+              }
+              // top-level paragraph
+              // prevent paragraph consuming extensions by clipping 'src' to extension start
+              cutSrc = src;
+              if (this.options.extensions && this.options.extensions.startBlock) {
+                  let startIndex = Infinity;
+                  const tempSrc = src.slice(1);
+                  let tempStart;
+                  this.options.extensions.startBlock.forEach((getStartIndex) => {
+                      tempStart = getStartIndex.call({ lexer: this }, tempSrc);
+                      if (typeof tempStart === 'number' && tempStart >= 0) {
+                          startIndex = Math.min(startIndex, tempStart);
+                      }
+                  });
+                  if (startIndex < Infinity && startIndex >= 0) {
+                      cutSrc = src.substring(0, startIndex + 1);
+                  }
+              }
+              if (this.state.top && (token = this.tokenizer.paragraph(cutSrc))) {
+                  lastToken = tokens[tokens.length - 1];
+                  if (lastParagraphClipped && lastToken.type === 'paragraph') {
+                      lastToken.raw += '\n' + token.raw;
+                      lastToken.text += '\n' + token.text;
+                      this.inlineQueue.pop();
+                      this.inlineQueue[this.inlineQueue.length - 1].src = lastToken.text;
+                  }
+                  else {
+                      tokens.push(token);
+                  }
+                  lastParagraphClipped = (cutSrc.length !== src.length);
+                  src = src.substring(token.raw.length);
+                  continue;
+              }
+              // text
+              if (token = this.tokenizer.text(src)) {
+                  src = src.substring(token.raw.length);
+                  lastToken = tokens[tokens.length - 1];
+                  if (lastToken && lastToken.type === 'text') {
+                      lastToken.raw += '\n' + token.raw;
+                      lastToken.text += '\n' + token.text;
+                      this.inlineQueue.pop();
+                      this.inlineQueue[this.inlineQueue.length - 1].src = lastToken.text;
+                  }
+                  else {
+                      tokens.push(token);
+                  }
+                  continue;
+              }
+              if (src) {
+                  const errMsg = 'Infinite loop on byte: ' + src.charCodeAt(0);
+                  if (this.options.silent) {
+                      console.error(errMsg);
+                      break;
+                  }
+                  else {
+                      throw new Error(errMsg);
+                  }
+              }
+          }
+          this.state.top = true;
+          return tokens;
+      }
+      inline(src, tokens = []) {
+          this.inlineQueue.push({ src, tokens });
+          return tokens;
+      }
+      /**
+       * Lexing/Compiling
+       */
+      inlineTokens(src, tokens = []) {
+          let token, lastToken, cutSrc;
+          // String with links masked to avoid interference with em and strong
+          let maskedSrc = src;
+          let match;
+          let keepPrevChar, prevChar;
+          // Mask out reflinks
+          if (this.tokens.links) {
+              const links = Object.keys(this.tokens.links);
+              if (links.length > 0) {
+                  while ((match = this.tokenizer.rules.inline.reflinkSearch.exec(maskedSrc)) != null) {
+                      if (links.includes(match[0].slice(match[0].lastIndexOf('[') + 1, -1))) {
+                          maskedSrc = maskedSrc.slice(0, match.index) + '[' + 'a'.repeat(match[0].length - 2) + ']' + maskedSrc.slice(this.tokenizer.rules.inline.reflinkSearch.lastIndex);
+                      }
+                  }
+              }
+          }
+          // Mask out other blocks
+          while ((match = this.tokenizer.rules.inline.blockSkip.exec(maskedSrc)) != null) {
+              maskedSrc = maskedSrc.slice(0, match.index) + '[' + 'a'.repeat(match[0].length - 2) + ']' + maskedSrc.slice(this.tokenizer.rules.inline.blockSkip.lastIndex);
+          }
+          // Mask out escaped characters
+          while ((match = this.tokenizer.rules.inline.anyPunctuation.exec(maskedSrc)) != null) {
+              maskedSrc = maskedSrc.slice(0, match.index) + '++' + maskedSrc.slice(this.tokenizer.rules.inline.anyPunctuation.lastIndex);
+          }
+          while (src) {
+              if (!keepPrevChar) {
+                  prevChar = '';
+              }
+              keepPrevChar = false;
+              // extensions
+              if (this.options.extensions
+                  && this.options.extensions.inline
+                  && this.options.extensions.inline.some((extTokenizer) => {
+                      if (token = extTokenizer.call({ lexer: this }, src, tokens)) {
+                          src = src.substring(token.raw.length);
+                          tokens.push(token);
+                          return true;
+                      }
+                      return false;
+                  })) {
+                  continue;
+              }
+              // escape
+              if (token = this.tokenizer.escape(src)) {
+                  src = src.substring(token.raw.length);
+                  tokens.push(token);
+                  continue;
+              }
+              // tag
+              if (token = this.tokenizer.tag(src)) {
+                  src = src.substring(token.raw.length);
+                  lastToken = tokens[tokens.length - 1];
+                  if (lastToken && token.type === 'text' && lastToken.type === 'text') {
+                      lastToken.raw += token.raw;
+                      lastToken.text += token.text;
+                  }
+                  else {
+                      tokens.push(token);
+                  }
+                  continue;
+              }
+              // link
+              if (token = this.tokenizer.link(src)) {
+                  src = src.substring(token.raw.length);
+                  tokens.push(token);
+                  continue;
+              }
+              // reflink, nolink
+              if (token = this.tokenizer.reflink(src, this.tokens.links)) {
+                  src = src.substring(token.raw.length);
+                  lastToken = tokens[tokens.length - 1];
+                  if (lastToken && token.type === 'text' && lastToken.type === 'text') {
+                      lastToken.raw += token.raw;
+                      lastToken.text += token.text;
+                  }
+                  else {
+                      tokens.push(token);
+                  }
+                  continue;
+              }
+              // em & strong
+              if (token = this.tokenizer.emStrong(src, maskedSrc, prevChar)) {
+                  src = src.substring(token.raw.length);
+                  tokens.push(token);
+                  continue;
+              }
+              // code
+              if (token = this.tokenizer.codespan(src)) {
+                  src = src.substring(token.raw.length);
+                  tokens.push(token);
+                  continue;
+              }
+              // br
+              if (token = this.tokenizer.br(src)) {
+                  src = src.substring(token.raw.length);
+                  tokens.push(token);
+                  continue;
+              }
+              // del (gfm)
+              if (token = this.tokenizer.del(src)) {
+                  src = src.substring(token.raw.length);
+                  tokens.push(token);
+                  continue;
+              }
+              // autolink
+              if (token = this.tokenizer.autolink(src)) {
+                  src = src.substring(token.raw.length);
+                  tokens.push(token);
+                  continue;
+              }
+              // url (gfm)
+              if (!this.state.inLink && (token = this.tokenizer.url(src))) {
+                  src = src.substring(token.raw.length);
+                  tokens.push(token);
+                  continue;
+              }
+              // text
+              // prevent inlineText consuming extensions by clipping 'src' to extension start
+              cutSrc = src;
+              if (this.options.extensions && this.options.extensions.startInline) {
+                  let startIndex = Infinity;
+                  const tempSrc = src.slice(1);
+                  let tempStart;
+                  this.options.extensions.startInline.forEach((getStartIndex) => {
+                      tempStart = getStartIndex.call({ lexer: this }, tempSrc);
+                      if (typeof tempStart === 'number' && tempStart >= 0) {
+                          startIndex = Math.min(startIndex, tempStart);
+                      }
+                  });
+                  if (startIndex < Infinity && startIndex >= 0) {
+                      cutSrc = src.substring(0, startIndex + 1);
+                  }
+              }
+              if (token = this.tokenizer.inlineText(cutSrc)) {
+                  src = src.substring(token.raw.length);
+                  if (token.raw.slice(-1) !== '_') { // Track prevChar before string of ____ started
+                      prevChar = token.raw.slice(-1);
+                  }
+                  keepPrevChar = true;
+                  lastToken = tokens[tokens.length - 1];
+                  if (lastToken && lastToken.type === 'text') {
+                      lastToken.raw += token.raw;
+                      lastToken.text += token.text;
+                  }
+                  else {
+                      tokens.push(token);
+                  }
+                  continue;
+              }
+              if (src) {
+                  const errMsg = 'Infinite loop on byte: ' + src.charCodeAt(0);
+                  if (this.options.silent) {
+                      console.error(errMsg);
+                      break;
+                  }
+                  else {
+                      throw new Error(errMsg);
+                  }
+              }
+          }
+          return tokens;
+      }
+  }
+
+  /**
+   * Renderer
+   */
+  class _Renderer {
+      options;
+      constructor(options) {
+          this.options = options || _defaults;
+      }
+      code(code, infostring, escaped) {
+          const lang = (infostring || '').match(/^\S*/)?.[0];
+          code = code.replace(/\n$/, '') + '\n';
+          if (!lang) {
+              return '<pre><code>'
+                  + (escaped ? code : escape$1(code, true))
+                  + '</code></pre>\n';
+          }
+          return '<pre><code class="language-'
+              + escape$1(lang)
+              + '">'
+              + (escaped ? code : escape$1(code, true))
+              + '</code></pre>\n';
+      }
+      blockquote(quote) {
+          return `<blockquote>\n${quote}</blockquote>\n`;
+      }
+      html(html, block) {
+          return html;
+      }
+      heading(text, level, raw) {
+          // ignore IDs
+          return `<h${level}>${text}</h${level}>\n`;
+      }
+      hr() {
+          return '<hr>\n';
+      }
+      list(body, ordered, start) {
+          const type = ordered ? 'ol' : 'ul';
+          const startatt = (ordered && start !== 1) ? (' start="' + start + '"') : '';
+          return '<' + type + startatt + '>\n' + body + '</' + type + '>\n';
+      }
+      listitem(text, task, checked) {
+          return `<li>${text}</li>\n`;
+      }
+      checkbox(checked) {
+          return '<input '
+              + (checked ? 'checked="" ' : '')
+              + 'disabled="" type="checkbox">';
+      }
+      paragraph(text) {
+          return `<p>${text}</p>\n`;
+      }
+      table(header, body) {
+          if (body)
+              body = `<tbody>${body}</tbody>`;
+          return '<table>\n'
+              + '<thead>\n'
+              + header
+              + '</thead>\n'
+              + body
+              + '</table>\n';
+      }
+      tablerow(content) {
+          return `<tr>\n${content}</tr>\n`;
+      }
+      tablecell(content, flags) {
+          const type = flags.header ? 'th' : 'td';
+          const tag = flags.align
+              ? `<${type} align="${flags.align}">`
+              : `<${type}>`;
+          return tag + content + `</${type}>\n`;
+      }
+      /**
+       * span level renderer
+       */
+      strong(text) {
+          return `<strong>${text}</strong>`;
+      }
+      em(text) {
+          return `<em>${text}</em>`;
+      }
+      codespan(text) {
+          return `<code>${text}</code>`;
+      }
+      br() {
+          return '<br>';
+      }
+      del(text) {
+          return `<del>${text}</del>`;
+      }
+      link(href, title, text) {
+          const cleanHref = cleanUrl(href);
+          if (cleanHref === null) {
+              return text;
+          }
+          href = cleanHref;
+          let out = '<a href="' + href + '"';
+          if (title) {
+              out += ' title="' + title + '"';
+          }
+          out += '>' + text + '</a>';
+          return out;
+      }
+      image(href, title, text) {
+          const cleanHref = cleanUrl(href);
+          if (cleanHref === null) {
+              return text;
+          }
+          href = cleanHref;
+          let out = `<img src="${href}" alt="${text}"`;
+          if (title) {
+              out += ` title="${title}"`;
+          }
+          out += '>';
+          return out;
+      }
+      text(text) {
+          return text;
+      }
+  }
+
+  /**
+   * TextRenderer
+   * returns only the textual part of the token
+   */
+  class _TextRenderer {
+      // no need for block level renderers
+      strong(text) {
+          return text;
+      }
+      em(text) {
+          return text;
+      }
+      codespan(text) {
+          return text;
+      }
+      del(text) {
+          return text;
+      }
+      html(text) {
+          return text;
+      }
+      text(text) {
+          return text;
+      }
+      link(href, title, text) {
+          return '' + text;
+      }
+      image(href, title, text) {
+          return '' + text;
+      }
+      br() {
+          return '';
+      }
+  }
+
+  /**
+   * Parsing & Compiling
+   */
+  class _Parser {
+      options;
+      renderer;
+      textRenderer;
+      constructor(options) {
+          this.options = options || _defaults;
+          this.options.renderer = this.options.renderer || new _Renderer();
+          this.renderer = this.options.renderer;
+          this.renderer.options = this.options;
+          this.textRenderer = new _TextRenderer();
+      }
+      /**
+       * Static Parse Method
+       */
+      static parse(tokens, options) {
+          const parser = new _Parser(options);
+          return parser.parse(tokens);
+      }
+      /**
+       * Static Parse Inline Method
+       */
+      static parseInline(tokens, options) {
+          const parser = new _Parser(options);
+          return parser.parseInline(tokens);
+      }
+      /**
+       * Parse Loop
+       */
+      parse(tokens, top = true) {
+          let out = '';
+          for (let i = 0; i < tokens.length; i++) {
+              const token = tokens[i];
+              // Run any renderer extensions
+              if (this.options.extensions && this.options.extensions.renderers && this.options.extensions.renderers[token.type]) {
+                  const genericToken = token;
+                  const ret = this.options.extensions.renderers[genericToken.type].call({ parser: this }, genericToken);
+                  if (ret !== false || !['space', 'hr', 'heading', 'code', 'table', 'blockquote', 'list', 'html', 'paragraph', 'text'].includes(genericToken.type)) {
+                      out += ret || '';
+                      continue;
+                  }
+              }
+              switch (token.type) {
+                  case 'space': {
+                      continue;
+                  }
+                  case 'hr': {
+                      out += this.renderer.hr();
+                      continue;
+                  }
+                  case 'heading': {
+                      const headingToken = token;
+                      out += this.renderer.heading(this.parseInline(headingToken.tokens), headingToken.depth, unescape(this.parseInline(headingToken.tokens, this.textRenderer)));
+                      continue;
+                  }
+                  case 'code': {
+                      const codeToken = token;
+                      out += this.renderer.code(codeToken.text, codeToken.lang, !!codeToken.escaped);
+                      continue;
+                  }
+                  case 'table': {
+                      const tableToken = token;
+                      let header = '';
+                      // header
+                      let cell = '';
+                      for (let j = 0; j < tableToken.header.length; j++) {
+                          cell += this.renderer.tablecell(this.parseInline(tableToken.header[j].tokens), { header: true, align: tableToken.align[j] });
+                      }
+                      header += this.renderer.tablerow(cell);
+                      let body = '';
+                      for (let j = 0; j < tableToken.rows.length; j++) {
+                          const row = tableToken.rows[j];
+                          cell = '';
+                          for (let k = 0; k < row.length; k++) {
+                              cell += this.renderer.tablecell(this.parseInline(row[k].tokens), { header: false, align: tableToken.align[k] });
+                          }
+                          body += this.renderer.tablerow(cell);
+                      }
+                      out += this.renderer.table(header, body);
+                      continue;
+                  }
+                  case 'blockquote': {
+                      const blockquoteToken = token;
+                      const body = this.parse(blockquoteToken.tokens);
+                      out += this.renderer.blockquote(body);
+                      continue;
+                  }
+                  case 'list': {
+                      const listToken = token;
+                      const ordered = listToken.ordered;
+                      const start = listToken.start;
+                      const loose = listToken.loose;
+                      let body = '';
+                      for (let j = 0; j < listToken.items.length; j++) {
+                          const item = listToken.items[j];
+                          const checked = item.checked;
+                          const task = item.task;
+                          let itemBody = '';
+                          if (item.task) {
+                              const checkbox = this.renderer.checkbox(!!checked);
+                              if (loose) {
+                                  if (item.tokens.length > 0 && item.tokens[0].type === 'paragraph') {
+                                      item.tokens[0].text = checkbox + ' ' + item.tokens[0].text;
+                                      if (item.tokens[0].tokens && item.tokens[0].tokens.length > 0 && item.tokens[0].tokens[0].type === 'text') {
+                                          item.tokens[0].tokens[0].text = checkbox + ' ' + item.tokens[0].tokens[0].text;
+                                      }
+                                  }
+                                  else {
+                                      item.tokens.unshift({
+                                          type: 'text',
+                                          text: checkbox + ' '
+                                      });
+                                  }
+                              }
+                              else {
+                                  itemBody += checkbox + ' ';
+                              }
+                          }
+                          itemBody += this.parse(item.tokens, loose);
+                          body += this.renderer.listitem(itemBody, task, !!checked);
+                      }
+                      out += this.renderer.list(body, ordered, start);
+                      continue;
+                  }
+                  case 'html': {
+                      const htmlToken = token;
+                      out += this.renderer.html(htmlToken.text, htmlToken.block);
+                      continue;
+                  }
+                  case 'paragraph': {
+                      const paragraphToken = token;
+                      out += this.renderer.paragraph(this.parseInline(paragraphToken.tokens));
+                      continue;
+                  }
+                  case 'text': {
+                      let textToken = token;
+                      let body = textToken.tokens ? this.parseInline(textToken.tokens) : textToken.text;
+                      while (i + 1 < tokens.length && tokens[i + 1].type === 'text') {
+                          textToken = tokens[++i];
+                          body += '\n' + (textToken.tokens ? this.parseInline(textToken.tokens) : textToken.text);
+                      }
+                      out += top ? this.renderer.paragraph(body) : body;
+                      continue;
+                  }
+                  default: {
+                      const errMsg = 'Token with "' + token.type + '" type was not found.';
+                      if (this.options.silent) {
+                          console.error(errMsg);
+                          return '';
+                      }
+                      else {
+                          throw new Error(errMsg);
+                      }
+                  }
+              }
+          }
+          return out;
+      }
+      /**
+       * Parse Inline Tokens
+       */
+      parseInline(tokens, renderer) {
+          renderer = renderer || this.renderer;
+          let out = '';
+          for (let i = 0; i < tokens.length; i++) {
+              const token = tokens[i];
+              // Run any renderer extensions
+              if (this.options.extensions && this.options.extensions.renderers && this.options.extensions.renderers[token.type]) {
+                  const ret = this.options.extensions.renderers[token.type].call({ parser: this }, token);
+                  if (ret !== false || !['escape', 'html', 'link', 'image', 'strong', 'em', 'codespan', 'br', 'del', 'text'].includes(token.type)) {
+                      out += ret || '';
+                      continue;
+                  }
+              }
+              switch (token.type) {
+                  case 'escape': {
+                      const escapeToken = token;
+                      out += renderer.text(escapeToken.text);
+                      break;
+                  }
+                  case 'html': {
+                      const tagToken = token;
+                      out += renderer.html(tagToken.text);
+                      break;
+                  }
+                  case 'link': {
+                      const linkToken = token;
+                      out += renderer.link(linkToken.href, linkToken.title, this.parseInline(linkToken.tokens, renderer));
+                      break;
+                  }
+                  case 'image': {
+                      const imageToken = token;
+                      out += renderer.image(imageToken.href, imageToken.title, imageToken.text);
+                      break;
+                  }
+                  case 'strong': {
+                      const strongToken = token;
+                      out += renderer.strong(this.parseInline(strongToken.tokens, renderer));
+                      break;
+                  }
+                  case 'em': {
+                      const emToken = token;
+                      out += renderer.em(this.parseInline(emToken.tokens, renderer));
+                      break;
+                  }
+                  case 'codespan': {
+                      const codespanToken = token;
+                      out += renderer.codespan(codespanToken.text);
+                      break;
+                  }
+                  case 'br': {
+                      out += renderer.br();
+                      break;
+                  }
+                  case 'del': {
+                      const delToken = token;
+                      out += renderer.del(this.parseInline(delToken.tokens, renderer));
+                      break;
+                  }
+                  case 'text': {
+                      const textToken = token;
+                      out += renderer.text(textToken.text);
+                      break;
+                  }
+                  default: {
+                      const errMsg = 'Token with "' + token.type + '" type was not found.';
+                      if (this.options.silent) {
+                          console.error(errMsg);
+                          return '';
+                      }
+                      else {
+                          throw new Error(errMsg);
+                      }
+                  }
+              }
+          }
+          return out;
+      }
+  }
+
+  class _Hooks {
+      options;
+      constructor(options) {
+          this.options = options || _defaults;
+      }
+      static passThroughHooks = new Set([
+          'preprocess',
+          'postprocess',
+          'processAllTokens'
+      ]);
+      /**
+       * Process markdown before marked
+       */
+      preprocess(markdown) {
+          return markdown;
+      }
+      /**
+       * Process HTML after marked is finished
+       */
+      postprocess(html) {
+          return html;
+      }
+      /**
+       * Process all tokens before walk tokens
+       */
+      processAllTokens(tokens) {
+          return tokens;
+      }
+  }
+
+  class Marked {
+      defaults = _getDefaults();
+      options = this.setOptions;
+      parse = this.#parseMarkdown(_Lexer.lex, _Parser.parse);
+      parseInline = this.#parseMarkdown(_Lexer.lexInline, _Parser.parseInline);
+      Parser = _Parser;
+      Renderer = _Renderer;
+      TextRenderer = _TextRenderer;
+      Lexer = _Lexer;
+      Tokenizer = _Tokenizer;
+      Hooks = _Hooks;
+      constructor(...args) {
+          this.use(...args);
+      }
+      /**
+       * Run callback for every token
+       */
+      walkTokens(tokens, callback) {
+          let values = [];
+          for (const token of tokens) {
+              values = values.concat(callback.call(this, token));
+              switch (token.type) {
+                  case 'table': {
+                      const tableToken = token;
+                      for (const cell of tableToken.header) {
+                          values = values.concat(this.walkTokens(cell.tokens, callback));
+                      }
+                      for (const row of tableToken.rows) {
+                          for (const cell of row) {
+                              values = values.concat(this.walkTokens(cell.tokens, callback));
+                          }
+                      }
+                      break;
+                  }
+                  case 'list': {
+                      const listToken = token;
+                      values = values.concat(this.walkTokens(listToken.items, callback));
+                      break;
+                  }
+                  default: {
+                      const genericToken = token;
+                      if (this.defaults.extensions?.childTokens?.[genericToken.type]) {
+                          this.defaults.extensions.childTokens[genericToken.type].forEach((childTokens) => {
+                              const tokens = genericToken[childTokens].flat(Infinity);
+                              values = values.concat(this.walkTokens(tokens, callback));
+                          });
+                      }
+                      else if (genericToken.tokens) {
+                          values = values.concat(this.walkTokens(genericToken.tokens, callback));
+                      }
+                  }
+              }
+          }
+          return values;
+      }
+      use(...args) {
+          const extensions = this.defaults.extensions || { renderers: {}, childTokens: {} };
+          args.forEach((pack) => {
+              // copy options to new object
+              const opts = { ...pack };
+              // set async to true if it was set to true before
+              opts.async = this.defaults.async || opts.async || false;
+              // ==-- Parse "addon" extensions --== //
+              if (pack.extensions) {
+                  pack.extensions.forEach((ext) => {
+                      if (!ext.name) {
+                          throw new Error('extension name required');
+                      }
+                      if ('renderer' in ext) { // Renderer extensions
+                          const prevRenderer = extensions.renderers[ext.name];
+                          if (prevRenderer) {
+                              // Replace extension with func to run new extension but fall back if false
+                              extensions.renderers[ext.name] = function (...args) {
+                                  let ret = ext.renderer.apply(this, args);
+                                  if (ret === false) {
+                                      ret = prevRenderer.apply(this, args);
+                                  }
+                                  return ret;
+                              };
+                          }
+                          else {
+                              extensions.renderers[ext.name] = ext.renderer;
+                          }
+                      }
+                      if ('tokenizer' in ext) { // Tokenizer Extensions
+                          if (!ext.level || (ext.level !== 'block' && ext.level !== 'inline')) {
+                              throw new Error("extension level must be 'block' or 'inline'");
+                          }
+                          const extLevel = extensions[ext.level];
+                          if (extLevel) {
+                              extLevel.unshift(ext.tokenizer);
+                          }
+                          else {
+                              extensions[ext.level] = [ext.tokenizer];
+                          }
+                          if (ext.start) { // Function to check for start of token
+                              if (ext.level === 'block') {
+                                  if (extensions.startBlock) {
+                                      extensions.startBlock.push(ext.start);
+                                  }
+                                  else {
+                                      extensions.startBlock = [ext.start];
+                                  }
+                              }
+                              else if (ext.level === 'inline') {
+                                  if (extensions.startInline) {
+                                      extensions.startInline.push(ext.start);
+                                  }
+                                  else {
+                                      extensions.startInline = [ext.start];
+                                  }
+                              }
+                          }
+                      }
+                      if ('childTokens' in ext && ext.childTokens) { // Child tokens to be visited by walkTokens
+                          extensions.childTokens[ext.name] = ext.childTokens;
+                      }
+                  });
+                  opts.extensions = extensions;
+              }
+              // ==-- Parse "overwrite" extensions --== //
+              if (pack.renderer) {
+                  const renderer = this.defaults.renderer || new _Renderer(this.defaults);
+                  for (const prop in pack.renderer) {
+                      if (!(prop in renderer)) {
+                          throw new Error(`renderer '${prop}' does not exist`);
+                      }
+                      if (prop === 'options') {
+                          // ignore options property
+                          continue;
+                      }
+                      const rendererProp = prop;
+                      const rendererFunc = pack.renderer[rendererProp];
+                      const prevRenderer = renderer[rendererProp];
+                      // Replace renderer with func to run extension, but fall back if false
+                      renderer[rendererProp] = (...args) => {
+                          let ret = rendererFunc.apply(renderer, args);
+                          if (ret === false) {
+                              ret = prevRenderer.apply(renderer, args);
+                          }
+                          return ret || '';
+                      };
+                  }
+                  opts.renderer = renderer;
+              }
+              if (pack.tokenizer) {
+                  const tokenizer = this.defaults.tokenizer || new _Tokenizer(this.defaults);
+                  for (const prop in pack.tokenizer) {
+                      if (!(prop in tokenizer)) {
+                          throw new Error(`tokenizer '${prop}' does not exist`);
+                      }
+                      if (['options', 'rules', 'lexer'].includes(prop)) {
+                          // ignore options, rules, and lexer properties
+                          continue;
+                      }
+                      const tokenizerProp = prop;
+                      const tokenizerFunc = pack.tokenizer[tokenizerProp];
+                      const prevTokenizer = tokenizer[tokenizerProp];
+                      // Replace tokenizer with func to run extension, but fall back if false
+                      // @ts-expect-error cannot type tokenizer function dynamically
+                      tokenizer[tokenizerProp] = (...args) => {
+                          let ret = tokenizerFunc.apply(tokenizer, args);
+                          if (ret === false) {
+                              ret = prevTokenizer.apply(tokenizer, args);
+                          }
+                          return ret;
+                      };
+                  }
+                  opts.tokenizer = tokenizer;
+              }
+              // ==-- Parse Hooks extensions --== //
+              if (pack.hooks) {
+                  const hooks = this.defaults.hooks || new _Hooks();
+                  for (const prop in pack.hooks) {
+                      if (!(prop in hooks)) {
+                          throw new Error(`hook '${prop}' does not exist`);
+                      }
+                      if (prop === 'options') {
+                          // ignore options property
+                          continue;
+                      }
+                      const hooksProp = prop;
+                      const hooksFunc = pack.hooks[hooksProp];
+                      const prevHook = hooks[hooksProp];
+                      if (_Hooks.passThroughHooks.has(prop)) {
+                          // @ts-expect-error cannot type hook function dynamically
+                          hooks[hooksProp] = (arg) => {
+                              if (this.defaults.async) {
+                                  return Promise.resolve(hooksFunc.call(hooks, arg)).then(ret => {
+                                      return prevHook.call(hooks, ret);
+                                  });
+                              }
+                              const ret = hooksFunc.call(hooks, arg);
+                              return prevHook.call(hooks, ret);
+                          };
+                      }
+                      else {
+                          // @ts-expect-error cannot type hook function dynamically
+                          hooks[hooksProp] = (...args) => {
+                              let ret = hooksFunc.apply(hooks, args);
+                              if (ret === false) {
+                                  ret = prevHook.apply(hooks, args);
+                              }
+                              return ret;
+                          };
+                      }
+                  }
+                  opts.hooks = hooks;
+              }
+              // ==-- Parse WalkTokens extensions --== //
+              if (pack.walkTokens) {
+                  const walkTokens = this.defaults.walkTokens;
+                  const packWalktokens = pack.walkTokens;
+                  opts.walkTokens = function (token) {
+                      let values = [];
+                      values.push(packWalktokens.call(this, token));
+                      if (walkTokens) {
+                          values = values.concat(walkTokens.call(this, token));
+                      }
+                      return values;
+                  };
+              }
+              this.defaults = { ...this.defaults, ...opts };
+          });
+          return this;
+      }
+      setOptions(opt) {
+          this.defaults = { ...this.defaults, ...opt };
+          return this;
+      }
+      lexer(src, options) {
+          return _Lexer.lex(src, options ?? this.defaults);
+      }
+      parser(tokens, options) {
+          return _Parser.parse(tokens, options ?? this.defaults);
+      }
+      #parseMarkdown(lexer, parser) {
+          return (src, options) => {
+              const origOpt = { ...options };
+              const opt = { ...this.defaults, ...origOpt };
+              // Show warning if an extension set async to true but the parse was called with async: false
+              if (this.defaults.async === true && origOpt.async === false) {
+                  if (!opt.silent) {
+                      console.warn('marked(): The async option was set to true by an extension. The async: false option sent to parse will be ignored.');
+                  }
+                  opt.async = true;
+              }
+              const throwError = this.#onError(!!opt.silent, !!opt.async);
+              // throw error in case of non string input
+              if (typeof src === 'undefined' || src === null) {
+                  return throwError(new Error('marked(): input parameter is undefined or null'));
+              }
+              if (typeof src !== 'string') {
+                  return throwError(new Error('marked(): input parameter is of type '
+                      + Object.prototype.toString.call(src) + ', string expected'));
+              }
+              if (opt.hooks) {
+                  opt.hooks.options = opt;
+              }
+              if (opt.async) {
+                  return Promise.resolve(opt.hooks ? opt.hooks.preprocess(src) : src)
+                      .then(src => lexer(src, opt))
+                      .then(tokens => opt.hooks ? opt.hooks.processAllTokens(tokens) : tokens)
+                      .then(tokens => opt.walkTokens ? Promise.all(this.walkTokens(tokens, opt.walkTokens)).then(() => tokens) : tokens)
+                      .then(tokens => parser(tokens, opt))
+                      .then(html => opt.hooks ? opt.hooks.postprocess(html) : html)
+                      .catch(throwError);
+              }
+              try {
+                  if (opt.hooks) {
+                      src = opt.hooks.preprocess(src);
+                  }
+                  let tokens = lexer(src, opt);
+                  if (opt.hooks) {
+                      tokens = opt.hooks.processAllTokens(tokens);
+                  }
+                  if (opt.walkTokens) {
+                      this.walkTokens(tokens, opt.walkTokens);
+                  }
+                  let html = parser(tokens, opt);
+                  if (opt.hooks) {
+                      html = opt.hooks.postprocess(html);
+                  }
+                  return html;
+              }
+              catch (e) {
+                  return throwError(e);
+              }
+          };
+      }
+      #onError(silent, async) {
+          return (e) => {
+              e.message += '\nPlease report this to https://github.com/markedjs/marked.';
+              if (silent) {
+                  const msg = '<p>An error occurred:</p><pre>'
+                      + escape$1(e.message + '', true)
+                      + '</pre>';
+                  if (async) {
+                      return Promise.resolve(msg);
+                  }
+                  return msg;
+              }
+              if (async) {
+                  return Promise.reject(e);
+              }
+              throw e;
+          };
+      }
+  }
+
+  const markedInstance = new Marked();
+  function marked(src, opt) {
+      return markedInstance.parse(src, opt);
+  }
+  /**
+   * Sets the default options.
+   *
+   * @param options Hash of options
+   */
+  marked.options =
+      marked.setOptions = function (options) {
+          markedInstance.setOptions(options);
+          marked.defaults = markedInstance.defaults;
+          changeDefaults(marked.defaults);
+          return marked;
+      };
+  /**
+   * Gets the original marked default options.
+   */
+  marked.getDefaults = _getDefaults;
+  marked.defaults = _defaults;
+  /**
+   * Use Extension
+   */
+  marked.use = function (...args) {
+      markedInstance.use(...args);
+      marked.defaults = markedInstance.defaults;
+      changeDefaults(marked.defaults);
+      return marked;
+  };
+  /**
+   * Run callback for every token
+   */
+  marked.walkTokens = function (tokens, callback) {
+      return markedInstance.walkTokens(tokens, callback);
+  };
+  /**
+   * Compiles markdown to HTML without enclosing `p` tag.
+   *
+   * @param src String of markdown source to be compiled
+   * @param options Hash of options
+   * @return String of compiled HTML
+   */
+  marked.parseInline = markedInstance.parseInline;
+  /**
+   * Expose
+   */
+  marked.Parser = _Parser;
+  marked.parser = _Parser.parse;
+  marked.Renderer = _Renderer;
+  marked.TextRenderer = _TextRenderer;
+  marked.Lexer = _Lexer;
+  marked.lexer = _Lexer.lex;
+  marked.Tokenizer = _Tokenizer;
+  marked.Hooks = _Hooks;
+  marked.parse = marked;
+  marked.options;
+  marked.setOptions;
+  marked.use;
+  marked.walkTokens;
+  marked.parseInline;
+  _Parser.parse;
+  _Lexer.lex;
+
+  var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+      var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+      if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+      else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+      return c > 3 && r && Object.defineProperty(target, key, r), r;
+  };
+  /**
+   * AI chatbot component with SSE streaming.
+   *
+   * Accepts a `send` callback that returns a streaming Response (SSE format).
+   * Parses the stream for text tokens, status updates, and errors.
+   * Dispatches a `stream-event` custom event for every SSE message so consumers can react.
+   *
+   * ## SSE Stream Format
+   * The component expects `data:` lines with JSON payloads containing a `type` field:
+   * - `STATUS` — `{ type: "STATUS", message: "Thinking..." }`
+   * - `RESPONSE_PART` — `{ type: "RESPONSE_PART", message: "token text" }`
+   * - `TOOL_RESULT` — `{ type: "TOOL_RESULT", message: "tool_name", data: {...} }`
+   * - `ERROR` — `{ type: "ERROR", message: "Something went wrong" }`
+   * - `HEARTBEAT` — `{ type: "HEARTBEAT" }` (ignored)
+   *
+   * The final event should include `finished: true` to signal stream completion.
+   *
+   * ## Usage
+   * ```html
+   * <kr-chatbot
+   *   title="AI Assistant"
+   *   .send=${(params) => {
+   *     return fetch('/api/ai/chat/stream', {
+   *       method: 'POST',
+   *       headers: { 'Content-Type': 'application/json', 'Accept': 'text/event-stream' },
+   *       credentials: 'include',
+   *       body: JSON.stringify({ userText: params.message })
+   *     });
+   *   }}
+   * ></kr-chatbot>
+   * ```
+   *
+   * @slot - Optional slot content displayed above the messages area
+   *
+   * @fires message-submit - When the user sends a message. Cancelable. Detail: `{ message: string }`
+   * @fires stream-event - Dispatched for every SSE message received. Detail contains the parsed event data.
+   */
+  exports.Chatbot = class KRChatbot extends i$1 {
+      constructor() {
+          super(...arguments);
+          // --- Private properties ---
+          this._reader = null;
+          this._decoder = new TextDecoder();
+          this._buffer = '';
+          this._userHasScrolledUp = false;
+          this._isDragging = false;
+          this._isResizing = false;
+          this._overlay = null;
+          this._resizeDir = '';
+          this._dragStartX = 0;
+          this._dragStartY = 0;
+          this._dragStartLeft = 0;
+          this._dragStartTop = 0;
+          this._resizeStartW = 0;
+          this._resizeStartH = 0;
+          // --- @property (public API) ---
+          /**
+           * Callback function for sending messages. Receives the user's message and
+           * current conversation history. Must return a Response with a streaming SSE body.
+           */
+          this.send = null;
+          /**
+           * Callback function called when the user clears the conversation.
+           * Must return a Promise — messages are only cleared if it resolves.
+           */
+          this.clear = null;
+          /**
+           * Callback function called on init to load existing conversation messages.
+           * Must return a Promise that resolves with an array of KRChatbotMessage.
+           */
+          this.load = null;
+          /**
+           * Conversation messages. Can be set externally for initial messages.
+           * Updated internally as the conversation progresses.
+           */
+          this.messages = [];
+          /**
+           * Header title text.
+           */
+          this.title = 'Kat';
+          /**
+           * Header subtitle text (shown below title with a green status dot).
+           */
+          this.subtitle = '';
+          /**
+           * Input placeholder text.
+           */
+          this.placeholder = 'Type a message...';
+          /**
+           * Whether the chat panel is open. Only relevant in floating mode.
+           */
+          this.opened = false;
           // --- @state (internal) ---
           this._inputValue = '';
           this._isStreaming = false;
@@ -3060,9 +5637,8 @@
                   let newLeft = this._dragStartLeft + (e.clientX - this._dragStartX);
                   let newTop = this._dragStartTop + (e.clientY - this._dragStartY);
                   const w = this._panelEl.offsetWidth;
-                  const h = this._panelEl.offsetHeight;
                   newLeft = Math.max(-w + 48, Math.min(newLeft, window.innerWidth - 48));
-                  newTop = Math.max(-h + 48, Math.min(newTop, window.innerHeight - 48));
+                  newTop = Math.max(0, Math.min(newTop, window.innerHeight - 48));
                   this._panelEl.style.left = newLeft + 'px';
                   this._panelEl.style.top = newTop + 'px';
               }
@@ -3081,21 +5657,15 @@
                       newW = Math.max(minW, Math.min(this._resizeStartW + dx, maxW));
                   }
                   if (this._resizeDir.includes('w')) {
-                      const proposedW = this._resizeStartW - dx;
-                      if (proposedW >= minW && proposedW <= maxW) {
-                          newW = proposedW;
-                          newLeft = this._dragStartLeft + dx;
-                      }
+                      newW = Math.max(minW, Math.min(this._resizeStartW - dx, maxW));
+                      newLeft = this._dragStartLeft + (this._resizeStartW - newW);
                   }
                   if (this._resizeDir.includes('s')) {
                       newH = Math.max(minH, Math.min(this._resizeStartH + dy, maxH));
                   }
                   if (this._resizeDir.includes('n')) {
-                      const proposedH = this._resizeStartH - dy;
-                      if (proposedH >= minH && proposedH <= maxH) {
-                          newH = proposedH;
-                          newTop = this._dragStartTop + dy;
-                      }
+                      newH = Math.max(minH, Math.min(this._resizeStartH - dy, maxH));
+                      newTop = this._dragStartTop + (this._resizeStartH - newH);
                   }
                   newLeft = Math.max(0, newLeft);
                   newTop = Math.max(0, newTop);
@@ -3108,17 +5678,30 @@
           this._handleMouseUp = () => {
               if (this._isDragging) {
                   this._isDragging = false;
-                  this._panelEl.classList.remove('chatbot__panel--dragging');
+                  this._panelEl.classList.remove('panel--dragging');
               }
               if (this._isResizing) {
                   this._isResizing = false;
-                  this._panelEl.classList.remove('chatbot__panel--resizing');
+                  this._panelEl.classList.remove('panel--resizing');
               }
+              this._hideOverlay();
               document.removeEventListener('mousemove', this._handleMouseMove);
               document.removeEventListener('mouseup', this._handleMouseUp);
+              this._saveState();
           };
       }
       // --- Lifecycle ---
+      connectedCallback() {
+          super.connectedCallback();
+          if (this.load) {
+              this.load().then((messages) => {
+                  if (messages && messages.length) {
+                      this.messages = messages;
+                  }
+              }).catch(() => { });
+          }
+          this._restoreState();
+      }
       disconnectedCallback() {
           super.disconnectedCallback();
           if (this._reader) {
@@ -3130,7 +5713,7 @@
       }
       updated(changed) {
           if (changed.has('messages') || changed.has('_statusText')) {
-              if (!this._userHasScrolledUp && this._messagesEl) {
+              if (!this._userHasScrolledUp && !this._isStreaming && this._messagesEl) {
                   requestAnimationFrame(() => {
                       if (this._messagesEl) {
                           this._messagesEl.scrollTop = this._messagesEl.scrollHeight;
@@ -3154,6 +5737,38 @@
           this._handleStop();
       }
       // --- Private methods ---
+      /**
+       * Shows a full-viewport transparent overlay during drag/resize operations.
+       *
+       * This overlay solves a critical rendering issue when the chatbot is used inside
+       * a page that contains iframes (e.g., the AI editor shell where the page content
+       * is rendered in an iframe and the chatbot floats on top).
+       *
+       * Without the overlay, modifying the iframe's `pointer-events` style during drag
+       * (to prevent it from swallowing mousemove events) causes Chrome to recalculate
+       * compositing layers. This layer recalculation blocks the browser from repainting
+       * the chatbot panel's style changes (width/height/position) even though they are
+       * correctly applied to the DOM. The result is that the panel appears frozen while
+       * the user drags, despite the inline styles updating on every mousemove.
+       *
+       * The overlay approach avoids this entirely: instead of touching the iframe's styles,
+       * we place a transparent div (z-index 9999) above the iframe but below the chatbot
+       * (z-index 10000). This div intercepts all mouse events that would otherwise hit the
+       * iframe, without triggering any compositing layer changes on the iframe itself.
+       */
+      _showOverlay() {
+          if (!this._overlay) {
+              this._overlay = document.createElement('div');
+              this._overlay.style.cssText = 'position:fixed; inset:0; z-index:9999; display:none;';
+              document.body.appendChild(this._overlay);
+          }
+          this._overlay.style.display = 'block';
+      }
+      _hideOverlay() {
+          if (this._overlay) {
+              this._overlay.style.display = 'none';
+          }
+      }
       _handleHeaderMouseDown(e) {
           // Ignore clicks on buttons inside the header
           if (e.target.closest('button')) {
@@ -3163,7 +5778,8 @@
               return;
           }
           this._isDragging = true;
-          this._panelEl.classList.add('chatbot__panel--dragging');
+          this._panelEl.classList.add('panel--dragging');
+          this._showOverlay();
           const rect = this._panelEl.getBoundingClientRect();
           this._panelEl.style.left = rect.left + 'px';
           this._panelEl.style.top = rect.top + 'px';
@@ -3184,7 +5800,8 @@
           }
           this._isResizing = true;
           this._resizeDir = e.currentTarget.dataset.dir || '';
-          this._panelEl.classList.add('chatbot__panel--resizing');
+          this._panelEl.classList.add('panel--resizing');
+          this._showOverlay();
           const rect = this._panelEl.getBoundingClientRect();
           this._panelEl.style.left = rect.left + 'px';
           this._panelEl.style.top = rect.top + 'px';
@@ -3204,16 +5821,75 @@
       }
       _handleToggle() {
           this.opened = !this.opened;
-          // Reset position when opening so it returns to default bottom-right
           if (this.opened && this._panelEl) {
-              this._panelEl.style.left = '';
-              this._panelEl.style.top = '';
-              this._panelEl.style.right = '';
-              this._panelEl.style.bottom = '';
-              this._panelEl.style.width = '';
-              this._panelEl.style.height = '';
-              this._panelEl.style.position = '';
+              this._applyStoredLayout();
+          }
+          this._saveState();
+      }
+      _saveState() {
+          try {
+              const state = { opened: String(this.opened) };
+              if (this._panelEl) {
+                  const s = this._panelEl.style;
+                  if (s.left) {
+                      state.left = s.left;
+                  }
+                  if (s.top) {
+                      state.top = s.top;
+                  }
+                  if (s.width) {
+                      state.width = s.width;
+                  }
+                  if (s.height) {
+                      state.height = s.height;
+                  }
+                  if (s.position) {
+                      state.position = s.position;
+                  }
+              }
+              localStorage.setItem('kr-chatbot-state', JSON.stringify(state));
+          }
+          catch { /* localStorage not available */ }
+      }
+      _restoreState() {
+          try {
+              const raw = localStorage.getItem('kr-chatbot-state');
+              if (!raw) {
+                  return;
+              }
+              const state = JSON.parse(raw);
+              if (state.opened === 'true') {
+                  this.opened = true;
+                  // Apply layout after first render
+                  this.updateComplete.then(() => this._applyStoredLayout());
+              }
+          }
+          catch { /* localStorage not available */ }
+      }
+      _applyStoredLayout() {
+          try {
+              const raw = localStorage.getItem('kr-chatbot-state');
+              if (!raw || !this._panelEl) {
+                  return;
+              }
+              const state = JSON.parse(raw);
+              if (state.position) {
+                  this._panelEl.style.position = state.position;
+              }
+              if (state.left) {
+                  this._panelEl.style.left = state.left;
+              }
+              if (state.top) {
+                  this._panelEl.style.top = state.top;
+              }
+              if (state.width) {
+                  this._panelEl.style.width = state.width;
+              }
+              if (state.height) {
+                  this._panelEl.style.height = state.height;
+              }
           }
+          catch { /* localStorage not available */ }
       }
       _handleInputChange(e) {
           this._inputValue = e.target.value;
@@ -3263,6 +5939,27 @@
               }];
           this._isStreaming = true;
           this._statusText = '';
+          // Scroll user's message to the top (Gemini-style).
+          // Set min-height on the assistant message = container height so there's enough
+          // scroll room below the user message to push it to the top.
+          this.updateComplete.then(() => {
+              if (!this._messagesEl) {
+                  return;
+              }
+              // Clear min-height from previous responses
+              this._messagesEl.querySelectorAll('.message--assistant').forEach((el) => {
+                  el.style.minHeight = '';
+              });
+              const allMsgEls = this._messagesEl.querySelectorAll('.message');
+              const userMsgEl = allMsgEls[this.messages.length - 2];
+              const assistantMsgEl = allMsgEls[this.messages.length - 1];
+              if (assistantMsgEl) {
+                  assistantMsgEl.style.minHeight = this._messagesEl.clientHeight + 'px';
+              }
+              if (userMsgEl) {
+                  this._messagesEl.scrollTop = userMsgEl.offsetTop - this._messagesEl.offsetTop - 24;
+              }
+          });
           this.send({
               message: messageText,
               messages: this.messages.slice(0, -1),
@@ -3390,49 +6087,6 @@
                               }
                           }
                       }
-                      else if (data.type === 'ACTION') {
-                          const action = data;
-                          const actionEvent = new CustomEvent('action', {
-                              detail: {
-                                  action: action,
-                              },
-                              bubbles: true,
-                              composed: true,
-                              cancelable: true,
-                          });
-                          this.dispatchEvent(actionEvent);
-                          if (!actionEvent.defaultPrevented) {
-                              if (action.action === 'RELOAD') {
-                                  location.reload();
-                              }
-                              else if (action.action === 'NAVIGATE') {
-                                  if (action.data && action.data.url) {
-                                      window.location.href = action.data.url;
-                                  }
-                              }
-                              else if (action.action === 'OPEN_TAB') {
-                                  if (action.data && action.data.url) {
-                                      window.open(action.data.url, '_blank');
-                                  }
-                              }
-                              else if (action.action === 'UPDATE_HTML') {
-                                  if (action.data && action.data.selector && action.data.html) {
-                                      const el = document.querySelector(action.data.selector);
-                                      if (el) {
-                                          el.innerHTML = action.data.html;
-                                      }
-                                  }
-                              }
-                              else if (action.action === 'SCROLL_TO') {
-                                  if (action.data && action.data.selector) {
-                                      const el = document.querySelector(action.data.selector);
-                                      if (el) {
-                                          el.scrollIntoView({ behavior: 'smooth' });
-                                      }
-                                  }
-                              }
-                          }
-                      }
                       else if (data.type === 'ERROR') {
                           this._handleStreamError(String(data.message || 'Unknown error'));
                       }
@@ -3466,157 +6120,192 @@
               }
           }
       }
-      /**
-       * Lightweight text formatting for assistant messages.
-       * Handles code blocks, inline code, bold, and line breaks.
-       * Escapes HTML entities first to prevent XSS.
-       */
-      _formatAssistantContent(text) {
-          // Escape HTML entities
-          let escaped = text
-              .replace(/&/g, '&amp;')
-              .replace(/</g, '&lt;')
-              .replace(/>/g, '&gt;')
-              .replace(/"/g, '&quot;')
-              .replace(/'/g, '&#039;');
-          // Code blocks: ```...```
-          escaped = escaped.replace(/```(\w*)\n?([\s\S]*?)```/g, '<pre><code>$2</code></pre>');
-          // Inline code: `...`
-          escaped = escaped.replace(/`([^`]+)`/g, '<code>$1</code>');
-          // Bold: **...**
-          escaped = escaped.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
-          // Split on code blocks to only convert newlines outside of pre tags
-          const parts = escaped.split(/(<pre><code>[\s\S]*?<\/code><\/pre>)/g);
-          for (let i = 0; i < parts.length; i++) {
-              // Skip code blocks (odd indices from the split)
-              if (i % 2 === 0) {
-                  // Convert double newlines to paragraph breaks
-                  parts[i] = parts[i].replace(/\n\n/g, '</p><p>');
-                  // Convert single newlines to line breaks
-                  parts[i] = parts[i].replace(/\n/g, '<br>');
-              }
-          }
-          escaped = parts.join('');
-          // Wrap in paragraph if we inserted paragraph breaks
-          if (escaped.includes('</p><p>')) {
-              escaped = '<p>' + escaped + '</p>';
-          }
-          return escaped;
-      }
       // --- Render ---
       render() {
           return b `
       <button
         class=${e({
-            'chatbot__toggle': true,
-            'chatbot__toggle--hidden': this.opened,
+            'toggle': true,
+            'toggle--hidden': this.opened,
         })}
         @click=${this._handleToggle}
         title="Open chat"
       >
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" class="chatbot__toggle-icon">
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          class="toggle-icon"
+        >
           <path d="M12 2C6.48 2 2 6.03 2 11c0 2.61 1.19 4.94 3.05 6.55L4 22l4.8-2.4C9.82 19.85 10.88 20 12 20c5.52 0 10-4.03 10-9S17.52 2 12 2z"/>
           <path d="M8 11h.01M12 11h.01M16 11h.01" stroke-width="2.5"/>
         </svg>
       </button>
 
       <div class=${e({
-            'chatbot__panel': true,
-            'chatbot__panel--opened': this.opened,
+            'panel': true,
+            'panel--opened': this.opened,
         })}>
-        <div class="chatbot__resize chatbot__resize--n" data-dir="n" @mousedown=${this._handleResizeMouseDown}></div>
-        <div class="chatbot__resize chatbot__resize--s" data-dir="s" @mousedown=${this._handleResizeMouseDown}></div>
-        <div class="chatbot__resize chatbot__resize--w" data-dir="w" @mousedown=${this._handleResizeMouseDown}></div>
-        <div class="chatbot__resize chatbot__resize--e" data-dir="e" @mousedown=${this._handleResizeMouseDown}></div>
-        <div class="chatbot__resize chatbot__resize--nw" data-dir="nw" @mousedown=${this._handleResizeMouseDown}></div>
-        <div class="chatbot__resize chatbot__resize--ne" data-dir="ne" @mousedown=${this._handleResizeMouseDown}></div>
-        <div class="chatbot__resize chatbot__resize--sw" data-dir="sw" @mousedown=${this._handleResizeMouseDown}></div>
-        <div class="chatbot__resize chatbot__resize--se" data-dir="se" @mousedown=${this._handleResizeMouseDown}></div>
-        <div class="chatbot__header" @mousedown=${this._handleHeaderMouseDown}>
-          <div class="chatbot__header-left">
-            <div class="chatbot__header-drag-hint">
-              <span></span>
-              <span></span>
-              <span></span>
-            </div>
-            <div class="chatbot__header-info">
-              <span class="chatbot__header-title">${this.title}</span>
+        <div
+          class="resize resize--n"
+          data-dir="n"
+          @mousedown=${this._handleResizeMouseDown}
+        ></div>
+        <div
+          class="resize resize--s"
+          data-dir="s"
+          @mousedown=${this._handleResizeMouseDown}
+        ></div>
+        <div
+          class="resize resize--w"
+          data-dir="w"
+          @mousedown=${this._handleResizeMouseDown}
+        ></div>
+        <div
+          class="resize resize--e"
+          data-dir="e"
+          @mousedown=${this._handleResizeMouseDown}
+        ></div>
+        <div
+          class="resize resize--nw"
+          data-dir="nw"
+          @mousedown=${this._handleResizeMouseDown}
+        ></div>
+        <div
+          class="resize resize--ne"
+          data-dir="ne"
+          @mousedown=${this._handleResizeMouseDown}
+        ></div>
+        <div
+          class="resize resize--sw"
+          data-dir="sw"
+          @mousedown=${this._handleResizeMouseDown}
+        ></div>
+        <div
+          class="resize resize--se"
+          data-dir="se"
+          @mousedown=${this._handleResizeMouseDown}
+        ></div>
+        <div class="header" @mousedown=${this._handleHeaderMouseDown}>
+          <div class="header-left">
+            <div class="header-info">
+              <span class="header-title">${this.title}</span>
               ${this.subtitle ? b `
-                <span class="chatbot__header-subtitle">${this.subtitle}</span>
+                <span class="header-subtitle">${this.subtitle}</span>
               ` : A}
             </div>
           </div>
-          <div class="chatbot__header-actions">
+          <div class="header-actions">
             ${this.messages.length > 0 ? b `
-              <button class="chatbot__header-action" @click=${this._handleClear} title="Clear conversation">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="chatbot__header-action-icon">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+              <button
+                class="header-action"
+                @click=${this._handleClear}
+                title="Clear conversation"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  class="header-action-icon"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
+                  />
                 </svg>
               </button>
             ` : A}
-            <button class="chatbot__header-action" @click=${this._handleToggle} title="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="chatbot__header-action-icon">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+            <button
+              class="header-action"
+              @click=${this._handleToggle}
+              title="Close"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="2"
+                stroke="currentColor"
+                class="header-action-icon"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M6 18 18 6M6 6l12 12"
+                />
               </svg>
             </button>
           </div>
         </div>
 
-        <div class="chatbot__messages" @scroll=${this._handleMessagesScroll}>
+        <div class="messages" @scroll=${this._handleMessagesScroll}>
           ${this.messages.length === 0 ? b `
-            <div class="chatbot__empty">
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" class="chatbot__empty-icon">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.076-4.076a1.526 1.526 0 0 1 1.037-.443 48.282 48.282 0 0 0 5.68-.494c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z" />
-              </svg>
-              <span class="chatbot__empty-text">How can I help?</span>
+            <div class="empty">
+              <span class="empty-text">What can I help you with?</span>
             </div>
           ` : A}
           ${this.messages.map((msg) => b `
             <div class=${e({
-            'chatbot__message': true,
-            'chatbot__message--user': msg.role === 'user',
-            'chatbot__message--assistant': msg.role === 'assistant',
+            'message': true,
+            'message--user': msg.role === 'user',
+            'message--assistant': msg.role === 'assistant',
         })}>
               ${msg.reasoning ? b `
-                <details class="chatbot__reasoning">
+                <details class="reasoning">
                   <summary>Thinking</summary>
-                  <div class="chatbot__reasoning-content">${msg.reasoning}</div>
+                  <div class="reasoning-content">${msg.reasoning}</div>
                 </details>
               ` : A}
-              <div class="chatbot__message-content">
-                ${msg.role === 'user'
+              ${msg.content ? b `
+                <div class="message-content">
+                  ${msg.role === 'user'
             ? msg.content
-            : o(this._formatAssistantContent(msg.content))}
-              </div>
+            : o(marked.parse(msg.content, { breaks: true }))}
+                </div>
+              ` : A}
+              ${msg.role === 'assistant' && this._isStreaming && msg === this.messages[this.messages.length - 1] ? b `
+                <div class="typing">
+                  <span></span>
+                  <span></span>
+                  <span></span>
+                </div>
+              ` : A}
             </div>
           `)}
-          ${this._statusText ? b `
-            <div class="chatbot__message chatbot__message--assistant">
-              <div class="chatbot__typing">
-                <span></span>
-                <span></span>
-                <span></span>
-              </div>
-            </div>
-          ` : A}
         </div>
 
         ${this._error ? b `
-          <div class="chatbot__error">
+          <div class="error">
             <span>${this._error}</span>
-            <button class="chatbot__error-dismiss" @click=${this._handleErrorDismiss}>
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="chatbot__error-dismiss-icon">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+            <button class="error-dismiss" @click=${this._handleErrorDismiss}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="2"
+                stroke="currentColor"
+                class="error-dismiss-icon"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M6 18 18 6M6 6l12 12"
+                />
               </svg>
             </button>
           </div>
         ` : A}
 
-        <div class="chatbot__footer">
-          <div class="chatbot__input-wrapper">
-            <button class="chatbot__input-plus" title="Attach">+</button>
+        <div class="footer">
+          <div class="input-wrapper">
+            <button class="input-plus" title="Attach">+</button>
             <textarea
-              class="chatbot__input"
+              class="input"
               .value=${this._inputValue}
               placeholder=${this.placeholder}
               rows="1"
@@ -3624,21 +6313,45 @@
               @keydown=${this._handleKeyDown}
             ></textarea>
             ${this._isStreaming ? b `
-              <button class="chatbot__stop" @click=${this._handleStop} title="Stop generating">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="chatbot__stop-icon">
-                  <rect x="6" y="6" width="12" height="12" rx="2" />
+              <button
+                class="stop"
+                @click=${this._handleStop}
+                title="Stop generating"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="currentColor"
+                  viewBox="0 0 24 24"
+                  class="stop-icon"
+                >
+                  <rect
+                    x="6"
+                    y="6"
+                    width="12"
+                    height="12"
+                    rx="2"
+                  />
                 </svg>
               </button>
             ` : b `
               <button
                 class=${e({
-            'chatbot__send': true,
-            'chatbot__send--disabled': !this._inputValue.trim(),
+            'send': true,
+            'send--disabled': !this._inputValue.trim(),
         })}
                 @click=${this._handleSubmit}
                 title="Send message"
               >
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" class="chatbot__send-icon">
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2.5"
+                  stroke-linecap="round"
+                  class="send-icon"
+                >
                   <path d="M12 19V5M5 12l7-7 7 7"/>
                 </svg>
               </button>
@@ -3669,7 +6382,6 @@
       --kr-chatbot-text: #1a1a2e;
       --kr-chatbot-text-secondary: #64668b;
       --kr-chatbot-user-bg: #e9e9e980;
-      --kr-chatbot-user-text: #1a1a2e;
       --kr-chatbot-error-bg: #fef2f2;
       --kr-chatbot-error-text: #dc2626;
       --kr-chatbot-success: #00b894;
@@ -3686,7 +6398,7 @@
     }
 
     /* Toggle button */
-    .chatbot__toggle {
+    .toggle {
       width: var(--kr-chatbot-toggle-size);
       height: var(--kr-chatbot-toggle-size);
       border-radius: 18px;
@@ -3701,24 +6413,24 @@
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     }
 
-    .chatbot__toggle:hover {
+    .toggle:hover {
       transform: scale(1.05);
       box-shadow: 0 6px 32px rgba(22, 48, 82, 0.5);
     }
 
-    .chatbot__toggle--hidden {
+    .toggle--hidden {
       transform: scale(0);
       opacity: 0;
       pointer-events: none;
     }
 
-    .chatbot__toggle-icon {
+    .toggle-icon {
       width: 26px;
       height: 26px;
     }
 
     /* Panel */
-    .chatbot__panel {
+    .panel {
       display: none;
       flex-direction: column;
       background: var(--kr-chatbot-bg);
@@ -3736,7 +6448,7 @@
       transform-origin: bottom right;
     }
 
-    .chatbot__panel--opened {
+    .panel--opened {
       display: flex;
     }
 
@@ -3752,49 +6464,35 @@
     }
 
     /* Header */
-    .chatbot__header {
-      padding: 10px 16px;
-      background: var(--kr-chatbot-primary);
-      color: white;
+    .header {
+      padding: 0 16px 0 24px;
+      height: 64px;
+      background: #ffffff;
+      color: #000000;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
       display: flex;
       align-items: center;
       justify-content: space-between;
       flex-shrink: 0;
     }
 
-    .chatbot__header-left {
+    .header-left {
       display: flex;
       align-items: center;
       gap: 10px;
     }
 
-    .chatbot__header-drag-hint {
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-      opacity: 0.35;
-    }
-
-    .chatbot__header-drag-hint span {
-      display: block;
-      width: 14px;
-      height: 2px;
-      background: white;
-      border-radius: 1px;
-    }
-
-    .chatbot__header-info {
+.header-info {
       display: flex;
       flex-direction: column;
     }
 
-    .chatbot__header-title {
-      font-size: 13px;
+    .header-title {
+      font-size: 16px;
       font-weight: 600;
-      letter-spacing: -0.2px;
     }
 
-    .chatbot__header-subtitle {
+    .header-subtitle {
       color: rgba(255, 255, 255, 0.5);
       font-size: 11px;
       display: flex;
@@ -3802,7 +6500,7 @@
       gap: 4px;
     }
 
-    .chatbot__header-subtitle::before {
+    .header-subtitle::before {
       content: '';
       width: 5px;
       height: 5px;
@@ -3810,18 +6508,18 @@
       border-radius: 50%;
     }
 
-    .chatbot__header-actions {
+    .header-actions {
       display: flex;
       align-items: center;
       gap: 4px;
     }
 
-    .chatbot__header-action {
-      width: 28px;
-      height: 28px;
+    .header-action {
+      width: 32px;
+      height: 32px;
       background: transparent;
       border: none;
-      color: rgba(255, 255, 255, 0.6);
+      color: rgb(0 0 0 / 70%);
       border-radius: 8px;
       cursor: pointer;
       display: flex;
@@ -3830,18 +6528,18 @@
       transition: all 0.15s;
     }
 
-    .chatbot__header-action:hover {
-      background: rgba(255, 255, 255, 0.1);
-      color: white;
+    .header-action:hover {
+      background: rgba(0, 0, 0, 0.05);
+      color: #000000;
     }
 
-    .chatbot__header-action-icon {
-      width: 16px;
-      height: 16px;
+    .header-action-icon {
+      width: 20px;
+      height: 20px;
     }
 
     /* Messages */
-    .chatbot__messages {
+    .messages {
       flex: 1;
       overflow-y: auto;
       padding: 32px;
@@ -3852,20 +6550,20 @@
       background: white;
     }
 
-    .chatbot__messages::-webkit-scrollbar {
+    .messages::-webkit-scrollbar {
       width: 4px;
     }
 
-    .chatbot__messages::-webkit-scrollbar-track {
+    .messages::-webkit-scrollbar-track {
       background: transparent;
     }
 
-    .chatbot__messages::-webkit-scrollbar-thumb {
+    .messages::-webkit-scrollbar-thumb {
       background: rgba(0, 0, 0, 0.08);
       border-radius: 2px;
     }
 
-    .chatbot__empty {
+    .empty {
       flex: 1;
       display: flex;
       flex-direction: column;
@@ -3875,17 +6573,12 @@
       gap: 8px;
     }
 
-    .chatbot__empty-icon {
-      width: 40px;
-      height: 40px;
-      opacity: 0.4;
-    }
-
-    .chatbot__empty-text {
-      font-size: 13px;
+.empty-text {
+      font-size: 14px;
+      color: rgb(0 0 0 / 80%);
     }
 
-    .chatbot__message {
+    .message {
       display: flex;
       flex-direction: column;
       max-width: 100%;
@@ -3903,40 +6596,41 @@
       }
     }
 
-    .chatbot__message--user {
+    .message--user {
       align-self: flex-end;
       align-items: flex-end;
       max-width: 85%;
     }
 
-    .chatbot__message--assistant {
+    .message--assistant {
       align-self: flex-start;
+      gap: 24px;
     }
 
-    .chatbot__message-content {
+    .message-content {
       line-height: 1.7;
       word-wrap: break-word;
       overflow-wrap: break-word;
     }
 
-    .chatbot__message--user .chatbot__message-content {
+    .message--user .message-content {
       display: inline-block;
       background: var(--kr-chatbot-user-bg);
-      color: var(--kr-chatbot-user-text);
+      color: #000000;
       padding: 10px 16px;
       border-radius: 20px;
       border-bottom-right-radius: 6px;
       font-size: 14px;
     }
 
-    .chatbot__message--assistant .chatbot__message-content {
+    .message--assistant .message-content {
       background: transparent;
-      color: var(--kr-chatbot-text);
+      color: #000000;
       padding: 0;
       font-size: 14px;
     }
 
-    .chatbot__message--assistant .chatbot__message-content pre {
+    .message--assistant .message-content pre {
       background: #1e1e1e;
       color: #d4d4d4;
       padding: 12px;
@@ -3947,67 +6641,57 @@
       line-height: 1.4;
     }
 
-    .chatbot__message--assistant .chatbot__message-content code {
+    .message--assistant .message-content code {
       font-family: 'SF Mono', 'Fira Code', Monaco, monospace;
       font-size: 13px;
     }
 
-    .chatbot__message--assistant .chatbot__message-content :not(pre) > code {
+    .message--assistant .message-content :not(pre) > code {
       background: rgba(0, 0, 0, 0.06);
       padding: 2px 5px;
       border-radius: 3px;
     }
 
-    .chatbot__message--assistant .chatbot__message-content strong {
+    .message--assistant .message-content strong {
       font-weight: 600;
     }
 
-    .chatbot__message--assistant .chatbot__message-content p {
+    .message--assistant .message-content p {
       margin: 0 0 8px 0;
     }
 
-    .chatbot__message--assistant .chatbot__message-content p:last-child {
+    .message--assistant .message-content p:last-child {
       margin-bottom: 0;
     }
 
     /* Reasoning */
-    .chatbot__reasoning {
-      margin-bottom: 8px;
+    .reasoning {
       border-radius: 6px;
-      background: rgba(0, 0, 0, 0.03);
+      background: rgb(244 244 244 / 80%);
       font-size: 12px;
     }
 
-    .chatbot__reasoning summary {
+    .reasoning summary {
       cursor: pointer;
-      padding: 6px 10px;
-      color: var(--kr-chatbot-text-secondary);
-      font-style: italic;
+      padding: 6px 10px 6px 10px;
+      color: black;
       user-select: none;
     }
 
-    .chatbot__reasoning-content {
+    .reasoning-content {
       padding: 6px 10px 10px;
-      color: var(--kr-chatbot-text-secondary);
-      line-height: 1.5;
+      color: black;
       white-space: pre-wrap;
       word-wrap: break-word;
     }
 
-    /* Status */
-    .chatbot__status {
-      font-size: 13px;
-      color: var(--kr-chatbot-text-secondary);
-      font-style: italic;
-    }
-
-    .chatbot__typing {
+.typing {
       display: flex;
       gap: 4px;
       padding: 4px 0;
     }
 
-    .chatbot__typing span {
+    .typing span {
       width: 6px;
       height: 6px;
       background: var(--kr-chatbot-text-secondary);
@@ -4016,11 +6700,11 @@
       opacity: 0.4;
     }
 
-    .chatbot__typing span:nth-child(2) {
+    .typing span:nth-child(2) {
       animation-delay: 0.2s;
     }
 
-    .chatbot__typing span:nth-child(3) {
+    .typing span:nth-child(3) {
       animation-delay: 0.4s;
     }
 
@@ -4036,7 +6720,7 @@
     }
 
     /* Error */
-    .chatbot__error {
+    .error {
       padding: 8px 16px;
       background: var(--kr-chatbot-error-bg);
       color: var(--kr-chatbot-error-text);
@@ -4048,7 +6732,7 @@
       flex-shrink: 0;
     }
 
-    .chatbot__error-dismiss {
+    .error-dismiss {
       background: none;
       border: none;
       color: var(--kr-chatbot-error-text);
@@ -4059,19 +6743,19 @@
       flex-shrink: 0;
     }
 
-    .chatbot__error-dismiss-icon {
+    .error-dismiss-icon {
       width: 14px;
       height: 14px;
     }
 
     /* Footer / Input */
-    .chatbot__footer {
-      padding: 12px 16px 16px;
+    .footer {
+      padding: 16px 16px 16px;
       flex-shrink: 0;
       background: white;
     }
 
-    .chatbot__input-wrapper {
+    .input-wrapper {
       display: flex;
       align-items: center;
       gap: 4px;
@@ -4082,12 +6766,12 @@
       transition: border-color 0.2s, box-shadow 0.2s;
     }
 
-    .chatbot__input-wrapper:focus-within {
+    .input-wrapper:focus-within {
       border-color: #b0b0b0;
       box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
     }
 
-    .chatbot__input-plus {
+    .input-plus {
       width: 34px;
       height: 34px;
       border: none;
@@ -4104,11 +6788,11 @@
       transition: background 0.15s;
     }
 
-    .chatbot__input-plus:hover {
+    .input-plus:hover {
       background: #f8f9fc;
     }
 
-    .chatbot__input {
+    .input {
       flex: 1;
       border: none;
       outline: none;
@@ -4120,14 +6804,14 @@
       min-height: 26px;
       max-height: 120px;
       background: transparent;
-      color: var(--kr-chatbot-text);
+      color: black;
     }
 
-    .chatbot__input::placeholder {
+    .input::placeholder {
       color: #b0b0b0;
     }
 
-    .chatbot__send {
+    .send {
       width: 34px;
       height: 34px;
       border-radius: 50%;
@@ -4142,25 +6826,25 @@
       transition: all 0.15s;
     }
 
-    .chatbot__send:hover {
+    .send:hover {
       background: var(--kr-chatbot-primary-hover);
     }
 
-    .chatbot__send--disabled {
+    .send--disabled {
       opacity: 0.4;
       cursor: default;
     }
 
-    .chatbot__send--disabled:hover {
+    .send--disabled:hover {
       background: var(--kr-chatbot-primary);
     }
 
-    .chatbot__send-icon {
+    .send-icon {
       width: 16px;
       height: 16px;
     }
 
-    .chatbot__stop {
+    .stop {
       width: 34px;
       height: 34px;
       border-radius: 50%;
@@ -4175,62 +6859,51 @@
       transition: all 0.15s;
     }
 
-    .chatbot__stop:hover {
+    .stop:hover {
       background: #b91c1c;
     }
 
-    .chatbot__stop-icon {
+    .stop-icon {
       width: 14px;
       height: 14px;
     }
 
     /* Header drag cursor */
-    .chatbot__header {
+    .header {
       cursor: grab;
       user-select: none;
     }
 
-    .chatbot__header:active {
+    .header:active {
       cursor: grabbing;
     }
 
     /* Drag / Resize states */
-    .chatbot__panel--dragging,
-    .chatbot__panel--resizing {
+    .panel--dragging,
+    .panel--resizing {
       transition: none;
       user-select: none;
     }
 
-    .chatbot__panel--dragging {
+    .panel--dragging {
       box-shadow: 0 32px 96px rgba(0, 0, 0, 0.18), 0 12px 40px rgba(0, 0, 0, 0.1);
     }
 
     /* Resize handles */
-    .chatbot__resize {
+    .resize {
       position: absolute;
       z-index: 10;
     }
 
-    .chatbot__resize--n { top: -4px; left: 12px; right: 12px; height: 8px; cursor: n-resize; }
-    .chatbot__resize--s { bottom: -4px; left: 12px; right: 12px; height: 8px; cursor: s-resize; }
-    .chatbot__resize--w { left: -4px; top: 12px; bottom: 12px; width: 8px; cursor: w-resize; }
-    .chatbot__resize--e { right: -4px; top: 12px; bottom: 12px; width: 8px; cursor: e-resize; }
-    .chatbot__resize--nw { top: -4px; left: -4px; width: 16px; height: 16px; cursor: nw-resize; }
-    .chatbot__resize--ne { top: -4px; right: -4px; width: 16px; height: 16px; cursor: ne-resize; }
-    .chatbot__resize--sw { bottom: -4px; left: -4px; width: 16px; height: 16px; cursor: sw-resize; }
-    .chatbot__resize--se { bottom: -4px; right: -4px; width: 16px; height: 16px; cursor: se-resize; }
+    .resize--n { top: -4px; left: 12px; right: 12px; height: 8px; cursor: n-resize; }
+    .resize--s { bottom: -4px; left: 12px; right: 12px; height: 8px; cursor: s-resize; }
+    .resize--w { left: -4px; top: 12px; bottom: 12px; width: 8px; cursor: w-resize; }
+    .resize--e { right: -4px; top: 12px; bottom: 12px; width: 8px; cursor: e-resize; }
+    .resize--nw { top: -4px; left: -4px; width: 16px; height: 16px; cursor: nw-resize; }
+    .resize--ne { top: -4px; right: -4px; width: 16px; height: 16px; cursor: ne-resize; }
+    .resize--sw { bottom: -4px; left: -4px; width: 16px; height: 16px; cursor: sw-resize; }
+    .resize--se { bottom: -4px; right: -4px; width: 16px; height: 16px; cursor: se-resize; }
 
-    .chatbot__resize--se::after {
-      content: '';
-      position: absolute;
-      bottom: 7px;
-      right: 7px;
-      width: 10px;
-      height: 10px;
-      border-right: 2px solid rgba(0, 0, 0, 0.12);
-      border-bottom: 2px solid rgba(0, 0, 0, 0.12);
-      border-radius: 0 0 3px 0;
-    }
   `;
   __decorate([
       n({ attribute: false })
@@ -4238,6 +6911,9 @@
   __decorate([
       n({ attribute: false })
   ], exports.Chatbot.prototype, "clear", void 0);
+  __decorate([
+      n({ attribute: false })
+  ], exports.Chatbot.prototype, "load", void 0);
   __decorate([
       n({ attribute: false })
   ], exports.Chatbot.prototype, "messages", void 0);
@@ -4251,7 +6927,10 @@
       n({ type: String })
   ], exports.Chatbot.prototype, "placeholder", void 0);
   __decorate([
-      n({ type: Boolean, reflect: true })
+      n({
+          type: Boolean,
+          reflect: true
+      })
   ], exports.Chatbot.prototype, "opened", void 0);
   __decorate([
       r()
@@ -4266,13 +6945,13 @@
       r()
   ], exports.Chatbot.prototype, "_error", void 0);
   __decorate([
-      e$3('.chatbot__panel')
+      e$3('.panel')
   ], exports.Chatbot.prototype, "_panelEl", void 0);
   __decorate([
-      e$3('.chatbot__messages')
+      e$3('.messages')
   ], exports.Chatbot.prototype, "_messagesEl", void 0);
   __decorate([
-      e$3('.chatbot__input')
+      e$3('.input')
   ], exports.Chatbot.prototype, "_inputEl", void 0);
   exports.Chatbot = __decorate([
       t$1('kr-chatbot')