@kodaris/krubble-app-components 1.0.37 → 1.0.38

package/dist/shell.js

@@ -1,961 +0,0 @@
-var __decorate = (this && this.__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;
-};
-import { LitElement, html, css, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-/**
- * Global shell component with app bar for app switching.
- *
- * The shell provides a horizontal app bar across the top of the viewport containing:
- * - Logo/home link on the left
- * - App switcher icons in the middle
- * - User avatar/menu on the right
- *
- * This allows individual apps (using kr-scaffold) to utilize the full width
- * of the browser window while maintaining consistent global navigation.
- *
- * @slot - The main content (typically kr-scaffold with the app)
- *
- * @property {string} logo - URL for the logo image
- * @property {KRApp[]} apps - Available applications for the switcher
- * @property {string} activeAppId - ID of the currently active app
- * @property {KRShellUser} user - User profile data
- * @property {KRShellMenuItem[]} menuItems - Custom menu items for user menu
- *
- * @fires app-click - When an app icon is clicked. Detail: { app: KRApp }
- * @fires menu-item-click - When a menu item is clicked. Detail: { item: KRShellMenuItem }
- * @fires logout - When logout is clicked
- */
-let KRShell = class KRShell extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.logo = 'https://s3.amazonaws.com/kodariscom/kodariscom/content/website/kodaris-logo-icon-light-53.png';
-        this.apps = [];
-        this.activeAppId = '';
-        this.user = null;
-        this.menuItems = [];
-        this.isUserMenuOpen = false;
-        this.isAppsMenuOpen = false;
-        this.pendingRequests = 0;
-        this.originalFetch = null;
-        this.originalXhrOpen = null;
-        // Default icons
-        this.defaultLogoutIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"/></svg>';
-        this.appsGridIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>';
-        this.closeIcon = '<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>';
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.installFetchInterceptor();
-        // Hide the default Chatlio close button (we use our own custom button)
-        if (!document.getElementById('chatlio-widget-styles')) {
-            const style = document.createElement('style');
-            style.id = 'chatlio-widget-styles';
-            style.textContent = `
-        .chatlio-title-bar {
-          display: none !important;
-        }
-        
-        .chatlio-widget-body {
-          bottom: 36px !important;
-        }
-      `;
-            document.head.appendChild(style);
-        }
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.uninstallFetchInterceptor();
-    }
-    /**
-     * Installs global interceptors for fetch and XMLHttpRequest to track pending HTTP requests.
-     * Updates `pendingRequests` state when requests start/complete.
-     */
-    installFetchInterceptor() {
-        if (this.originalFetch)
-            return;
-        const shell = this;
-        // Intercept fetch
-        this.originalFetch = window.fetch.bind(window);
-        const originalFetch = this.originalFetch;
-        window.fetch = function (...args) {
-            shell.pendingRequests++;
-            return originalFetch(...args).finally(() => {
-                shell.pendingRequests--;
-            });
-        };
-        // Intercept XMLHttpRequest
-        this.originalXhrOpen = XMLHttpRequest.prototype.open;
-        const originalXhrOpen = this.originalXhrOpen;
-        XMLHttpRequest.prototype.open = function (method, url, async = true, username, password) {
-            shell.pendingRequests++;
-            this.addEventListener('loadend', () => {
-                shell.pendingRequests--;
-            }, { once: true });
-            return originalXhrOpen.call(this, method, url, async, username, password);
-        };
-    }
-    /**
-     * Restores the original fetch and XMLHttpRequest functions.
-     */
-    uninstallFetchInterceptor() {
-        if (this.originalFetch) {
-            window.fetch = this.originalFetch;
-            this.originalFetch = null;
-        }
-        if (this.originalXhrOpen) {
-            XMLHttpRequest.prototype.open = this.originalXhrOpen;
-            this.originalXhrOpen = null;
-        }
-    }
-    handleLogoClick() {
-        this.dispatchEvent(new CustomEvent('logo-click', {
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    toggleUserMenu() {
-        this.isUserMenuOpen = !this.isUserMenuOpen;
-        this.isAppsMenuOpen = false;
-    }
-    closeUserMenu() {
-        this.isUserMenuOpen = false;
-    }
-    toggleAppsMenu() {
-        this.isAppsMenuOpen = !this.isAppsMenuOpen;
-        this.isUserMenuOpen = false;
-    }
-    closeAppsMenu() {
-        this.isAppsMenuOpen = false;
-    }
-    handleMenuItemClick(item) {
-        this.closeUserMenu();
-        this.dispatchEvent(new CustomEvent('menu-item-click', {
-            detail: { item },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    handleLogout() {
-        this.closeUserMenu();
-        this.dispatchEvent(new CustomEvent('logout', {
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    handleChatClick() {
-        // Toggle Chatlio widget
-        if (typeof window._chatlio !== 'undefined') {
-            window._chatlio.showOrHide();
-        }
-    }
-    renderAppsMenu() {
-        return html `
-      <div class="appbar-apps">
-        ${this.isAppsMenuOpen ? html `
-          <div class="menu-backdrop" @click=${this.closeAppsMenu}></div>
-        ` : nothing}
-
-        <button
-          class=${classMap({
-            'appbar-apps-btn': true,
-            'appbar-apps-btn--open': this.isAppsMenuOpen,
-        })}
-          @click=${this.toggleAppsMenu}
-        >
-          <span class="appbar-apps-btn__icon">${unsafeHTML(this.appsGridIcon)}</span>
-        </button>
-
-        <div class=${classMap({
-            'appbar-apps-menu': true,
-            'appbar-apps-menu--open': this.isAppsMenuOpen,
-        })}>
-          <div class="appbar-apps-menu__header">
-            <h2 class="appbar-apps-menu__title">Applications</h2>
-            <button class="appbar-apps-menu__close" @click=${this.closeAppsMenu}>
-              ${unsafeHTML(this.closeIcon)}
-            </button>
-          </div>
-          <div class="appbar-apps-menu__content">
-            <div class="appbar-apps-menu__list">
-              ${this.apps.map((app) => html `
-                <a
-                  class="appbar-apps-menu__item"
-                  href=${app.url}
-                  @click=${(e) => {
-            this.closeAppsMenu();
-            const event = new CustomEvent('app-click', {
-                detail: { app },
-                bubbles: true,
-                composed: true,
-                cancelable: true,
-            });
-            this.dispatchEvent(event);
-            if (event.defaultPrevented) {
-                e.preventDefault();
-            }
-        }}
-                >
-                  ${app.name}
-                </a>
-              `)}
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-    }
-    renderUserMenu() {
-        if (!this.user)
-            return nothing;
-        const initials = this.user.name
-            .split(' ')
-            .map((part) => part[0])
-            .join('')
-            .toUpperCase()
-            .slice(0, 2);
-        return html `
-      <div class="appbar-user">
-        ${this.isUserMenuOpen ? html `
-          <div class="menu-backdrop" @click=${this.closeUserMenu}></div>
-        ` : nothing}
-
-        <div
-          class="appbar-user__avatar"
-          @click=${this.toggleUserMenu}
-        >
-          ${this.user.avatar
-            ? html `<img src=${this.user.avatar} alt=${this.user.name} />`
-            : initials}
-        </div>
-
-        <div class=${classMap({
-            'appbar-user__menu': true,
-            'appbar-user__menu--open': this.isUserMenuOpen,
-        })}>
-          <div class="appbar-user__header">
-            <p class="appbar-user__name">${this.user.name}</p>
-            ${this.user.email ? html `
-              <p class="appbar-user__email">${this.user.email}</p>
-            ` : nothing}
-          </div>
-
-          ${this.menuItems.map((item) => item.divider
-            ? html `<div class="appbar-user__menu-divider"></div>`
-            : html `
-                <button
-                  class="appbar-user__menu-item"
-                  @click=${() => this.handleMenuItemClick(item)}
-                >
-                  ${item.icon ? html `
-                    <span class="appbar-user__menu-item__icon">${unsafeHTML(item.icon)}</span>
-                  ` : nothing}
-                  ${item.label}
-                </button>
-              `)}
-
-          ${this.menuItems.length > 0 ? html `
-            <div class="appbar-user__menu-divider"></div>
-          ` : nothing}
-
-          <button
-            class="appbar-user__menu-item appbar-user__menu-item--danger"
-            @click=${this.handleLogout}
-          >
-            <span class="appbar-user__menu-item__icon">${unsafeHTML(this.defaultLogoutIcon)}</span>
-            Sign Out
-          </button>
-        </div>
-      </div>
-    `;
-    }
-    render() {
-        return html `
-      <div class=${classMap({
-            'progress': true,
-            'progress--loading': this.pendingRequests > 0,
-        })}>
-        <div class="progress__track"></div>
-        <div class="progress__bar progress__bar--primary">
-          <span class="progress__bar-inner"></span>
-        </div>
-        <div class="progress__bar progress__bar--secondary">
-          <span class="progress__bar-inner"></span>
-        </div>
-      </div>
-
-      <header class="appbar">
-        <!-- Logo -->
-        ${this.logo ? html `
-          <div class="appbar-logo" @click=${this.handleLogoClick}>
-            <img src=${this.logo} alt="Home" />
-          </div>
-          <div class="appbar-divider"></div>
-        ` : nothing}
-
-        <!-- App Switcher -->
-        ${this.renderAppsMenu()}
-
-        <div class="appbar-spacer"></div>
-
-        <!-- User -->
-        ${this.renderUserMenu()}
-      </header>
-
-<!--      <div class="subbar">-->
-<!--        <nav class="breadcrumbs">-->
-<!--          <a href="#">Home</a>-->
-<!--          <span class="breadcrumbs__separator">/</span>-->
-<!--          <a href="#">Companies</a>-->
-<!--          <span class="breadcrumbs__separator">/</span>-->
-<!--          <span>Acme Corp</span>-->
-<!--        </nav>-->
-<!--      </div>-->
-
-      <main class="main">
-        <slot></slot>
-      </main>
-      
-      <footer class="footer">
-        <div class="footer-content">
-          <div class="footer-info">
-            <span>© ${new Date().getFullYear()} Kodaris. All Rights Reserved.</span>
-          </div>
-          <a class="footer-link" target="_blank" href="https://www.kodaris.com/content/privacy-policy">Privacy</a>
-          <a class="footer-link" target="_blank" href="https://www.kodaris.com/content/terms-use">Terms</a>
-          <button class="footer-chat" data-chatlio-widget-button @click=${this.handleChatClick}>
-            <span class="footer-chat__icon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-messages-square-icon lucide-messages-square">
-                    <path d="M16 10a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 14.286V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/><path d="M20 9a2 2 0 0 1 2 2v10.286a.71.71 0 0 1-1.212.502l-2.202-2.202A2 2 0 0 0 17.172 19H10a2 2 0 0 1-2-2v-1"/>
-                </svg>
-            </span>
-            Chat with us
-          </button>
-        </div>
-      </footer>
-    `;
-    }
-};
-KRShell.styles = css `
-    :host {
-      display: flex;
-      flex-direction: column;
-      height: 100vh;
-      width: 100vw;
-      --kr-shell-bar-height: 48px;
-      --kr-shell-bar-bg: #10172a; /* matches scaffold nav-bg */
-      /* --kr-shell-bar-bg: #0a0f1a; */ /* original darker bg */
-      --kr-shell-bar-border: rgba(255, 255, 255, 0.08);
-      --kr-shell-icon-size: 36px;
-      --kr-shell-icon-color: rgba(255, 255, 255, 0.7);
-      --kr-shell-icon-color-hover: rgba(255, 255, 255, 1);
-      --kr-shell-icon-color-active: #beea4e;
-      --kr-shell-icon-bg-hover: rgba(255, 255, 255, 0.08);
-      --kr-shell-icon-bg-active: rgba(190, 234, 78, 0.15);
-      --kr-shell-tooltip-bg: #1a2332;
-      --kr-shell-tooltip-color: #ffffff;
-      --kr-shell-menu-bg: #1a2332;
-      --kr-shell-menu-border: rgba(255, 255, 255, 0.1);
-      --kr-shell-menu-hover: rgba(255, 255, 255, 0.08);
-    }
-
-    *,
-    *::before,
-    *::after {
-      box-sizing: border-box;
-    }
-
-    /* App Bar */
-    .appbar {
-      height: var(--kr-shell-bar-height);
-      background: var(--kr-shell-bar-bg);
-      border-bottom: 1px solid var(--kr-shell-bar-border);
-      display: flex;
-      align-items: center;
-      padding: 0 16px;
-      flex-shrink: 0;
-      z-index: 100;
-    }
-
-    /* Logo */
-    .appbar-logo {
-      cursor: pointer;
-      margin-right: 8px;
-    }
-
-    .appbar-logo img {
-      display: block;
-      max-width: 24px;
-      max-height: 24px;
-      object-fit: contain;
-    }
-
-    /* Divider */
-    .appbar-divider {
-      width: 1px;
-      height: 24px;
-      background: #ffffff4f;
-      margin: 0 10px;
-    }
-
-    /* Apps Button */
-    .appbar-apps {
-      position: relative;
-    }
-
-    .appbar-apps-btn {
-      width: var(--kr-shell-icon-size);
-      height: var(--kr-shell-icon-size);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 6px;
-      cursor: pointer;
-      color: var(--kr-shell-icon-color);
-      background: transparent;
-      border: none;
-      padding: 0;
-      transition: all 0.15s ease;
-    }
-
-    .appbar-apps-btn:hover {
-      color: var(--kr-shell-icon-color-hover);
-      background: var(--kr-shell-icon-bg-hover);
-    }
-
-    .appbar-apps-btn--open {
-      color: var(--kr-shell-icon-color-hover);
-      background: var(--kr-shell-icon-bg-hover);
-    }
-
-    .appbar-apps-btn__icon {
-      width: 24px;
-      height: 24px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: #ffffff;
-    }
-
-    .appbar-apps-btn__icon svg {
-      width: 100%;
-      height: 100%;
-      fill: currentColor;
-    }
-
-    /* Apps Megamenu */
-    .appbar-apps-menu {
-      position: absolute;
-      left: 0;
-      top: 100%;
-      margin-top: 6px;
-      min-width: 320px;
-      min-height: 90vh;
-      max-height: calc(100vh - var(--kr-shell-bar-height));
-      background: #10172a;
-      border: 1px solid var(--kr-shell-menu-border);
-      border-top: none;
-      border-radius: 0 0 8px 8px;
-      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
-      z-index: 1000;
-      opacity: 0;
-      visibility: hidden;
-      transform: translateY(-10px);
-      transition: all 0.15s ease;
-      overflow-y: auto;
-    }
-
-    .appbar-apps-menu--open {
-      opacity: 1;
-      visibility: visible;
-      transform: translateY(0);
-    }
-
-    .appbar-apps-menu__header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 16px 16px 16px 24px;
-      border-bottom: 1px solid var(--kr-shell-menu-border);
-    }
-
-    .appbar-apps-menu__title {
-      font-size: 16px;
-      font-weight: 500;
-      color: #ffffff;
-      margin: 0;
-    }
-
-    .appbar-apps-menu__close {
-      width: 32px;
-      height: 32px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: none;
-      border: none;
-      color: rgba(255, 255, 255, 0.6);
-      cursor: pointer;
-      border-radius: 6px;
-      transition: all 0.15s ease;
-    }
-
-    .appbar-apps-menu__close:hover {
-      background: var(--kr-shell-menu-hover);
-      color: #ffffff;
-    }
-
-    .appbar-apps-menu__close svg {
-      width: 24px;
-      height: 24px;
-      fill: #ffffff;
-    }
-
-    .appbar-apps-menu__content {
-      padding: 16px 8px;
-    }
-
-    .appbar-apps-menu__list {
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-      max-width: 320px;
-    }
-
-    .appbar-apps-menu__item {
-      display: block;
-      width: 100%;
-      padding: 12px 16px;
-      background: none;
-      border: none;
-      color: #ffffff;
-      font-size: 14px;
-      font-family: inherit;
-      text-align: left;
-      text-decoration: none;
-      cursor: pointer;
-      border-radius: 6px;
-      transition: all 0.15s ease;
-    }
-
-    .appbar-apps-menu__item:hover {
-      background: var(--kr-shell-menu-hover);
-    }
-
-    .appbar-apps-menu__item--active,
-    .appbar-apps-menu__item--active:hover {
-      color: var(--kr-shell-icon-color-active);
-    }
-
-    /* Spacer to push user to the right */
-    .appbar-spacer {
-      flex: 1;
-    }
-
-    /* User Section */
-    .appbar-user {
-      position: relative;
-      margin-left: 8px;
-    }
-
-    .appbar-user__avatar {
-      width: 32px;
-      height: 32px;
-      border-radius: 50%;
-      background: #beea4e;
-      color: #0a0f1a;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 12px;
-      font-weight: 600;
-      cursor: pointer;
-      overflow: hidden;
-      border: 2px solid transparent;
-      transition: border-color 0.15s ease;
-    }
-
-    .appbar-user__avatar:hover {
-      border-color: rgba(255, 255, 255, 0.3);
-    }
-
-    .appbar-user__avatar img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-
-    /* User Menu */
-    .appbar-user__menu {
-      position: absolute;
-      right: 0;
-      top: calc(100% + 8px);
-      min-width: 200px;
-      background: var(--kr-shell-menu-bg);
-      border: 1px solid var(--kr-shell-menu-border);
-      border-radius: 8px;
-      padding: 8px;
-      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
-      z-index: 1000;
-      opacity: 0;
-      visibility: hidden;
-      transform: translateY(-8px);
-      transition: all 0.15s ease;
-    }
-
-    .appbar-user__menu--open {
-      opacity: 1;
-      visibility: visible;
-      transform: translateY(0);
-    }
-
-    .appbar-user__header {
-      padding: 8px 12px 12px;
-      border-bottom: 1px solid var(--kr-shell-menu-border);
-      margin-bottom: 8px;
-    }
-
-    .appbar-user__name {
-      font-size: 14px;
-      font-weight: 600;
-      color: #ffffff;
-      margin: 0 0 2px;
-    }
-
-    .appbar-user__email {
-      font-size: 12px;
-      color: rgba(255, 255, 255, 0.6);
-      margin: 0;
-    }
-
-    .appbar-user__menu-item {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      width: 100%;
-      padding: 10px 12px;
-      background: none;
-      border: none;
-      color: rgba(255, 255, 255, 0.8);
-      font-size: 13px;
-      font-family: inherit;
-      text-align: left;
-      cursor: pointer;
-      border-radius: 6px;
-      transition: all 0.15s ease;
-    }
-
-    .appbar-user__menu-item:hover {
-      background: var(--kr-shell-menu-hover);
-      color: #ffffff;
-    }
-
-    .appbar-user__menu-item--danger {
-      color: #f87171;
-    }
-
-    .appbar-user__menu-item--danger:hover {
-      background: rgba(248, 113, 113, 0.1);
-      color: #f87171;
-    }
-
-    .appbar-user__menu-item__icon {
-      width: 16px;
-      height: 16px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-    }
-
-    .appbar-user__menu-item__icon svg {
-      width: 100%;
-      height: 100%;
-      fill: currentColor;
-    }
-
-    .appbar-user__menu-divider {
-      height: 1px;
-      background: var(--kr-shell-menu-border);
-      margin: 8px 0;
-    }
-
-    /* Secondary App Bar */
-    .subbar {
-      height: 30px;
-      background: #364365;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-      display: flex;
-      align-items: center;
-      padding: 0 16px;
-      flex-shrink: 0;
-    }
-
-    .breadcrumbs {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      font-size: 12px;
-      color: #ffffff;
-    }
-
-    .breadcrumbs a {
-      color: #ffffff;
-      text-decoration: none;
-    }
-
-    .breadcrumbs a:hover {
-      text-decoration: underline;
-    }
-
-    .breadcrumbs__separator {
-      color: #ffffff;
-    }
-
-    /* Main Content */
-    .main {
-      flex: 1;
-      min-height: 0;
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      position: relative;
-    }
-
-    /* Click outside overlay */
-    .menu-backdrop {
-      position: fixed;
-      inset: 0;
-      z-index: 999;
-    }
-
-    /* Progress bar */
-    .progress {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 4px;
-      overflow-x: hidden;
-      z-index: 1000;
-      display: none;
-    }
-
-    .progress--loading {
-      display: block;
-    }
-
-    .progress__track {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      width: 100%;
-      background: rgb(190 234 78 / 50%); // rgba(190, 234, 78, 0.3);
-    }
-
-    .progress__bar {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      width: 100%;
-      transform-origin: left center;
-    }
-
-    .progress__bar-inner {
-      display: inline-block;
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      background: #beea4e;
-    }
-
-    .progress__bar--primary {
-      left: -145.166611%;
-    }
-
-    .progress--loading .progress__bar--primary {
-      animation: progress-primary-translate 2s infinite linear;
-    }
-
-    .progress--loading .progress__bar--primary .progress__bar-inner {
-      animation: progress-primary-scale 2s infinite linear;
-    }
-
-    .progress__bar--secondary {
-      left: -54.888891%;
-    }
-
-    .progress--loading .progress__bar--secondary {
-      animation: progress-secondary-translate 2s infinite linear;
-    }
-
-    .progress--loading .progress__bar--secondary .progress__bar-inner {
-      animation: progress-secondary-scale 2s infinite linear;
-    }
-
-    @keyframes progress-primary-translate {
-      0% {
-        transform: translateX(0);
-      }
-      20% {
-        animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
-        transform: translateX(0);
-      }
-      59.15% {
-        animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
-        transform: translateX(83.67142%);
-      }
-      100% {
-        transform: translateX(200.611057%);
-      }
-    }
-
-    @keyframes progress-primary-scale {
-      0% {
-        transform: scaleX(0.08);
-      }
-      36.65% {
-        animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1);
-        transform: scaleX(0.08);
-      }
-      69.15% {
-        animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1);
-        transform: scaleX(0.661479);
-      }
-      100% {
-        transform: scaleX(0.08);
-      }
-    }
-
-    @keyframes progress-secondary-translate {
-      0% {
-        animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
-        transform: translateX(0);
-      }
-      25% {
-        animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
-        transform: translateX(37.651913%);
-      }
-      48.35% {
-        animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
-        transform: translateX(84.386165%);
-      }
-      100% {
-        transform: translateX(160.277782%);
-      }
-    }
-
-    @keyframes progress-secondary-scale {
-      0% {
-        animation-timing-function: cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);
-        transform: scaleX(0.08);
-      }
-      19.15% {
-        animation-timing-function: cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315);
-        transform: scaleX(0.457104);
-      }
-      44.15% {
-        animation-timing-function: cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);
-        transform: scaleX(0.72796);
-      }
-      100% {
-        transform: scaleX(0.08);
-      }
-    }
-
-    .footer {
-      background: var(--kr-shell-bar-bg);
-      border-top: 1px solid var(--kr-shell-bar-border);
-      padding: 8px 16px;
-      flex-shrink: 0;
-    }
-
-    .footer-content {
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-      gap: 36px;
-    }
-
-    .footer-info {
-        font-size: 12px;
-        color: rgba(255, 255, 255, 0.7);
-    }
-    
-    .footer-link {
-      color: rgba(255, 255, 255, 0.7);
-      text-decoration: none;
-      font-size: 12px;
-    }
-
-    .footer-link:hover {
-      color: #ffffff;
-      text-decoration: underline;
-    }
-
-    .footer-chat {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      font-size: 14px;
-      color: #beea4e;
-      cursor: pointer;
-      background: none;
-      border: none;
-      border-radius: 4px;
-      font-family: inherit;
-      transition: background 0.15s ease;
-    }
-
-    .footer-chat:hover {
-      background: rgba(255, 255, 255, 0.08);
-    }
-
-    .footer-chat__icon {
-      width: 16px;
-      height: 16px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .footer-chat__icon svg {
-      width: 100%;
-      height: 100%;
-      stroke: currentColor;
-    }
-  `;
-__decorate([
-    property({ type: String })
-], KRShell.prototype, "logo", void 0);
-__decorate([
-    property({ type: Array })
-], KRShell.prototype, "apps", void 0);
-__decorate([
-    property({ type: String, attribute: 'active-app-id' })
-], KRShell.prototype, "activeAppId", void 0);
-__decorate([
-    property({ type: Object })
-], KRShell.prototype, "user", void 0);
-__decorate([
-    property({ type: Array, attribute: 'menu-items' })
-], KRShell.prototype, "menuItems", void 0);
-__decorate([
-    state()
-], KRShell.prototype, "isUserMenuOpen", void 0);
-__decorate([
-    state()
-], KRShell.prototype, "isAppsMenuOpen", void 0);
-__decorate([
-    state()
-], KRShell.prototype, "pendingRequests", void 0);
-KRShell = __decorate([
-    customElement('kr-shell')
-], KRShell);
-export { KRShell };
-//# sourceMappingURL=shell.js.map