@kodaris/krubble-app-components 1.0.67 → 1.0.68

package/dist/krubble-app.bundled.js

@@ -356,18 +356,6 @@ let KRScaffold = class KRScaffold extends i$1 {
          * 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;
@@ -403,6 +391,18 @@ let KRScaffold = class KRScaffold extends i$1 {
          * 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);
     }
@@ -436,8 +436,9 @@ let KRScaffold = class KRScaffold extends i$1 {
      * 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);
@@ -488,17 +489,23 @@ let KRScaffold = class KRScaffold extends i$1 {
      * - 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
@@ -527,11 +534,15 @@ let KRScaffold = class KRScaffold extends i$1 {
             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,
                     });
                 });
             }
@@ -674,14 +685,18 @@ let KRScaffold = class KRScaffold extends i$1 {
     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');
             };
         }
@@ -691,7 +706,10 @@ let KRScaffold = class KRScaffold extends i$1 {
             groupEl.animate([
                 { height: '0px' },
                 { height: `${groupEl.scrollHeight}px` }
-            ], { duration: 300, easing: 'ease-in-out' });
+            ], {
+                duration: 300,
+                easing: 'ease-in-out'
+            });
         }
         this.requestUpdate();
     }
@@ -786,14 +804,18 @@ let KRScaffold = class KRScaffold extends i$1 {
         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';
+        }
         KRHttp.fetch({
             url,
-            method: this.pref.uuid ? 'PUT' : 'POST',
+            method,
             body: JSON.stringify({ nav: this.pref.nav }),
         })
             .then((response) => response.json())
@@ -806,8 +828,9 @@ let KRScaffold = class KRScaffold extends i$1 {
         });
     }
     loadPref() {
-        if (this.userType === 'customer')
+        if (this.userType === 'customer') {
             return;
+        }
         KRHttp.fetch({
             url: '/api/system/preference/json/scaffold?global=true',
             method: 'GET',
@@ -824,21 +847,36 @@ let KRScaffold = class KRScaffold extends i$1 {
         });
     }
     handleNavItemContextMenu(e, item) {
-        if (!this.isEditing)
+        if (!this.isEditing) {
             return;
+        }
         e.preventDefault();
         KRContextMenu.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);
@@ -864,8 +902,9 @@ let KRScaffold = class KRScaffold extends i$1 {
     openNavItemEdit(item) {
         KRDialog.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] = {};
             }
@@ -892,7 +931,13 @@ let KRScaffold = class KRScaffold extends i$1 {
             .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) {
@@ -929,8 +974,9 @@ let KRScaffold = class KRScaffold extends i$1 {
      * @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;
@@ -948,8 +994,9 @@ let KRScaffold = class KRScaffold extends i$1 {
      * @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;
@@ -965,8 +1012,9 @@ let KRScaffold = class KRScaffold extends i$1 {
                 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`;
@@ -1017,14 +1065,16 @@ let KRScaffold = class KRScaffold extends i$1 {
     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) {
@@ -1061,11 +1111,22 @@ let KRScaffold = class KRScaffold extends i$1 {
             }
             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)
@@ -1125,13 +1186,15 @@ let KRScaffold = class KRScaffold extends i$1 {
      * 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') {
@@ -1143,8 +1206,9 @@ let KRScaffold = class KRScaffold extends i$1 {
         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)
@@ -1215,8 +1279,9 @@ let KRScaffold = class KRScaffold extends i$1 {
     // Rendering
     // =========================================================================
     renderNormalFooter() {
-        if (!this.user)
+        if (!this.user) {
             return A;
+        }
         const initials = this.user.name
             .split(' ')
             .map((part) => part[0])
@@ -1313,7 +1378,11 @@ let KRScaffold = class KRScaffold extends i$1 {
             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({
@@ -1365,7 +1434,11 @@ let KRScaffold = class KRScaffold extends i$1 {
       </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}
@@ -1381,7 +1454,11 @@ let KRScaffold = class KRScaffold extends i$1 {
               ${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}>
@@ -1389,7 +1466,11 @@ let KRScaffold = class KRScaffold extends i$1 {
                 <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>
@@ -1402,7 +1483,11 @@ let KRScaffold = class KRScaffold extends i$1 {
                     />
                     ${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>
@@ -1594,7 +1679,7 @@ KRScaffold.styles = i$4 `
     .nav-content {
       flex: 1;
       overflow-y: auto;
-      padding: 0 9px 0.75rem 8px;
+      padding: 0 9px 12px 8px;
     }
 
     .nav-footer {
@@ -1714,7 +1799,7 @@ KRScaffold.styles = i$4 `
 
     .breadcrumbs {
       height: 32px;
-      padding: 0 1rem;
+      padding: 0 16px;
       display: flex;
       align-items: center;
       gap: 6px;
@@ -1808,7 +1893,7 @@ KRScaffold.styles = i$4 `
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      letter-spacing: 0.01em;
+      letter-spacing: 0.14px;
     }
 
     .nav-item__chevron {
@@ -1863,7 +1948,7 @@ KRScaffold.styles = i$4 `
       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;
     }
@@ -1986,7 +2071,7 @@ KRScaffold.styles = i$4 `
 
     .breadcrumbs {
       height: 32px;
-      padding: 0 1rem;
+      padding: 0 16px;
       display: flex;
       align-items: center;
       gap: 6px;
@@ -2154,6 +2239,61 @@ KRScaffold.styles = i$4 `
       }
     }
   `;
+__decorate$5([
+    n({ type: String })
+], KRScaffold.prototype, "logo", void 0);
+__decorate$5([
+    n({ type: String })
+], KRScaffold.prototype, "label", void 0);
+__decorate$5([
+    n({
+        type: String,
+        attribute: 'home-url'
+    })
+], KRScaffold.prototype, "homeUrl", void 0);
+__decorate$5([
+    n({
+        type: String,
+        reflect: true
+    })
+], KRScaffold.prototype, "scheme", void 0);
+__decorate$5([
+    n({ type: Array })
+], KRScaffold.prototype, "nav", void 0);
+__decorate$5([
+    n({
+        type: Boolean,
+        attribute: 'nav-icons-displayed',
+        reflect: true
+    })
+], KRScaffold.prototype, "navIconsDisplayed", void 0);
+__decorate$5([
+    n({
+        type: Boolean,
+        attribute: 'nav-expanded'
+    })
+], KRScaffold.prototype, "navExpanded", void 0);
+__decorate$5([
+    n({ type: Object })
+], KRScaffold.prototype, "user", void 0);
+__decorate$5([
+    n({ type: Boolean })
+], KRScaffold.prototype, "subbar", void 0);
+__decorate$5([
+    n({
+        type: Boolean,
+        attribute: 'nav-enabled'
+    })
+], KRScaffold.prototype, "navEnabled", void 0);
+__decorate$5([
+    n({
+        type: String,
+        attribute: 'user-type'
+    })
+], KRScaffold.prototype, "userType", void 0);
+__decorate$5([
+    n({ type: Array })
+], KRScaffold.prototype, "breadcrumbs", void 0);
 __decorate$5([
     r()
 ], KRScaffold.prototype, "navItemsExpanded", void 0);
@@ -2190,42 +2330,6 @@ __decorate$5([
 __decorate$5([
     r()
 ], KRScaffold.prototype, "pendingRequests", void 0);
-__decorate$5([
-    n({ type: String })
-], KRScaffold.prototype, "logo", void 0);
-__decorate$5([
-    n({ type: String })
-], KRScaffold.prototype, "label", void 0);
-__decorate$5([
-    n({ type: String, attribute: 'home-url' })
-], KRScaffold.prototype, "homeUrl", void 0);
-__decorate$5([
-    n({ type: String, reflect: true })
-], KRScaffold.prototype, "scheme", void 0);
-__decorate$5([
-    n({ type: Array })
-], KRScaffold.prototype, "nav", void 0);
-__decorate$5([
-    n({ type: Boolean, attribute: 'nav-icons-displayed', reflect: true })
-], KRScaffold.prototype, "navIconsDisplayed", void 0);
-__decorate$5([
-    n({ type: Boolean, attribute: 'nav-expanded' })
-], KRScaffold.prototype, "navExpanded", void 0);
-__decorate$5([
-    n({ type: Object })
-], KRScaffold.prototype, "user", void 0);
-__decorate$5([
-    n({ type: Boolean })
-], KRScaffold.prototype, "subbar", void 0);
-__decorate$5([
-    n({ type: Boolean, attribute: 'nav-enabled' })
-], KRScaffold.prototype, "navEnabled", void 0);
-__decorate$5([
-    n({ type: String, attribute: 'user-type' })
-], KRScaffold.prototype, "userType", void 0);
-__decorate$5([
-    n({ type: Array })
-], KRScaffold.prototype, "breadcrumbs", void 0);
 KRScaffold = __decorate$5([
     t$1('kr-scaffold')
 ], KRScaffold);
@@ -2246,7 +2350,7 @@ var __decorate$4 = (undefined && undefined.__decorate) || function (decorators,
  * <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' },
@@ -2261,7 +2365,7 @@ var __decorate$4 = (undefined && undefined.__decorate) || function (decorators,
  *
  * @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
  */
 let KRScreenNav = class KRScreenNav extends i$1 {
@@ -2278,7 +2382,7 @@ let KRScreenNav = class KRScreenNav extends i$1 {
         /**
          * 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.
@@ -2290,7 +2394,7 @@ let KRScreenNav = class KRScreenNav extends i$1 {
     }
     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);
     }
@@ -2329,7 +2433,7 @@ let KRScreenNav = class KRScreenNav extends i$1 {
     }
     syncActiveFromUrl() {
         const pathname = window.location.pathname;
-        const match = this.navItems.find((item) => {
+        const match = this.items.find((item) => {
             if (!item.url) {
                 return false;
             }
@@ -2357,9 +2461,12 @@ let KRScreenNav = class KRScreenNav extends i$1 {
         ` : 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)}
                 >
@@ -2422,7 +2529,7 @@ KRScreenNav.styles = i$4 `
     .nav-content {
       flex: 1;
       overflow-y: auto;
-      padding: 0 0 0.75rem;
+      padding: 0 0 12px;
     }
 
     .nav-items {
@@ -2436,7 +2543,7 @@ KRScreenNav.styles = i$4 `
       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;
@@ -2477,7 +2584,7 @@ __decorate$4([
 ], KRScreenNav.prototype, "subLabel", void 0);
 __decorate$4([
     n({ type: Array })
-], KRScreenNav.prototype, "navItems", void 0);
+], KRScreenNav.prototype, "items", void 0);
 __decorate$4([
     n({ type: String })
 ], KRScreenNav.prototype, "activeId", void 0);
@@ -2547,7 +2654,7 @@ KRScreenDetail.styles = i$4 `
       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;
@@ -2569,7 +2676,7 @@ KRScreenDetail.styles = i$4 `
     .content {
       flex: 1;
       overflow-y: auto;
-      padding: 1.5rem;
+      padding: 24px;
       display: flex;
       justify-content: center;
     }
@@ -2610,7 +2717,10 @@ let KRSubbar = class KRSubbar extends i$1 {
         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.
@@ -2627,13 +2737,19 @@ let KRSubbar = class KRSubbar extends i$1 {
      * - 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.
@@ -2665,10 +2781,31 @@ let KRSubbar = class KRSubbar extends i$1 {
         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}
@@ -2678,7 +2815,10 @@ let KRSubbar = class KRSubbar extends i$1 {
             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>
@@ -2847,7 +2987,10 @@ class KRRouter {
         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;
@@ -2874,7 +3017,10 @@ class KRRouter {
             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) {
@@ -2954,101 +3100,2532 @@ KRRouterOutlet = __decorate$1([
     t$1('kr-router-outlet')
 ], KRRouterOutlet);
 
-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.
  */
-let KRChatbot = 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;
-        // --- @state (internal) ---
-        this._inputValue = '';
+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.
+ */
+let KRChatbot = 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;
         this._statusText = '';
         this._error = '';
@@ -3057,9 +5634,8 @@ let KRChatbot = class KRChatbot extends i$1 {
                 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';
             }
@@ -3078,21 +5654,15 @@ let KRChatbot = class KRChatbot extends i$1 {
                     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);
@@ -3105,17 +5675,30 @@ let KRChatbot = class KRChatbot extends i$1 {
         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) {
@@ -3127,7 +5710,7 @@ let KRChatbot = class KRChatbot extends i$1 {
     }
     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;
@@ -3151,6 +5734,38 @@ let KRChatbot = class KRChatbot extends i$1 {
         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')) {
@@ -3160,7 +5775,8 @@ let KRChatbot = class KRChatbot extends i$1 {
             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';
@@ -3181,7 +5797,8 @@ let KRChatbot = class KRChatbot extends i$1 {
         }
         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';
@@ -3201,16 +5818,75 @@ let KRChatbot = class KRChatbot extends i$1 {
     }
     _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;
@@ -3260,6 +5936,27 @@ let KRChatbot = class KRChatbot extends i$1 {
             }];
         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),
@@ -3387,49 +6084,6 @@ let KRChatbot = class KRChatbot extends i$1 {
                             }
                         }
                     }
-                    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'));
                     }
@@ -3463,157 +6117,192 @@ let KRChatbot = class KRChatbot extends i$1 {
             }
         }
     }
-    /**
-     * 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"
@@ -3621,21 +6310,45 @@ let KRChatbot = class KRChatbot extends i$1 {
               @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>
@@ -3666,7 +6379,6 @@ KRChatbot.styles = i$4 `
       --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;
@@ -3683,7 +6395,7 @@ KRChatbot.styles = i$4 `
     }
 
     /* Toggle button */
-    .chatbot__toggle {
+    .toggle {
       width: var(--kr-chatbot-toggle-size);
       height: var(--kr-chatbot-toggle-size);
       border-radius: 18px;
@@ -3698,24 +6410,24 @@ KRChatbot.styles = i$4 `
       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);
@@ -3733,7 +6445,7 @@ KRChatbot.styles = i$4 `
       transform-origin: bottom right;
     }
 
-    .chatbot__panel--opened {
+    .panel--opened {
       display: flex;
     }
 
@@ -3749,49 +6461,35 @@ KRChatbot.styles = i$4 `
     }
 
     /* 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;
@@ -3799,7 +6497,7 @@ KRChatbot.styles = i$4 `
       gap: 4px;
     }
 
-    .chatbot__header-subtitle::before {
+    .header-subtitle::before {
       content: '';
       width: 5px;
       height: 5px;
@@ -3807,18 +6505,18 @@ KRChatbot.styles = i$4 `
       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;
@@ -3827,18 +6525,18 @@ KRChatbot.styles = i$4 `
       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;
@@ -3849,20 +6547,20 @@ KRChatbot.styles = i$4 `
       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;
@@ -3872,17 +6570,12 @@ KRChatbot.styles = i$4 `
       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%;
@@ -3900,40 +6593,41 @@ KRChatbot.styles = i$4 `
       }
     }
 
-    .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;
@@ -3944,67 +6638,57 @@ KRChatbot.styles = i$4 `
       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);
@@ -4013,11 +6697,11 @@ KRChatbot.styles = i$4 `
       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;
     }
 
@@ -4033,7 +6717,7 @@ KRChatbot.styles = i$4 `
     }
 
     /* Error */
-    .chatbot__error {
+    .error {
       padding: 8px 16px;
       background: var(--kr-chatbot-error-bg);
       color: var(--kr-chatbot-error-text);
@@ -4045,7 +6729,7 @@ KRChatbot.styles = i$4 `
       flex-shrink: 0;
     }
 
-    .chatbot__error-dismiss {
+    .error-dismiss {
       background: none;
       border: none;
       color: var(--kr-chatbot-error-text);
@@ -4056,19 +6740,19 @@ KRChatbot.styles = i$4 `
       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;
@@ -4079,12 +6763,12 @@ KRChatbot.styles = i$4 `
       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;
@@ -4101,11 +6785,11 @@ KRChatbot.styles = i$4 `
       transition: background 0.15s;
     }
 
-    .chatbot__input-plus:hover {
+    .input-plus:hover {
       background: #f8f9fc;
     }
 
-    .chatbot__input {
+    .input {
       flex: 1;
       border: none;
       outline: none;
@@ -4117,14 +6801,14 @@ KRChatbot.styles = i$4 `
       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%;
@@ -4139,25 +6823,25 @@ KRChatbot.styles = i$4 `
       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%;
@@ -4172,62 +6856,51 @@ KRChatbot.styles = i$4 `
       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 })
@@ -4235,6 +6908,9 @@ __decorate([
 __decorate([
     n({ attribute: false })
 ], KRChatbot.prototype, "clear", void 0);
+__decorate([
+    n({ attribute: false })
+], KRChatbot.prototype, "load", void 0);
 __decorate([
     n({ attribute: false })
 ], KRChatbot.prototype, "messages", void 0);
@@ -4248,7 +6924,10 @@ __decorate([
     n({ type: String })
 ], KRChatbot.prototype, "placeholder", void 0);
 __decorate([
-    n({ type: Boolean, reflect: true })
+    n({
+        type: Boolean,
+        reflect: true
+    })
 ], KRChatbot.prototype, "opened", void 0);
 __decorate([
     r()
@@ -4263,13 +6942,13 @@ __decorate([
     r()
 ], KRChatbot.prototype, "_error", void 0);
 __decorate([
-    e$3('.chatbot__panel')
+    e$3('.panel')
 ], KRChatbot.prototype, "_panelEl", void 0);
 __decorate([
-    e$3('.chatbot__messages')
+    e$3('.messages')
 ], KRChatbot.prototype, "_messagesEl", void 0);
 __decorate([
-    e$3('.chatbot__input')
+    e$3('.input')
 ], KRChatbot.prototype, "_inputEl", void 0);
 KRChatbot = __decorate([
     t$1('kr-chatbot')