var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
    var _, done = false;
    for (var i = decorators.length - 1; i >= 0; i--) {
        var context = {};
        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
        if (kind === "accessor") {
            if (result === void 0) continue;
            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
            if (_ = accept(result.get)) descriptor.get = _;
            if (_ = accept(result.set)) descriptor.set = _;
            if (_ = accept(result.init)) initializers.unshift(_);
        }
        else if (_ = accept(result)) {
            if (kind === "field") initializers.unshift(_);
            else descriptor[key] = _;
        }
    }
    if (target) Object.defineProperty(target, contextIn.name, descriptor);
    done = true;
};
var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
    var useValue = arguments.length > 2;
    for (var i = 0; i < initializers.length; i++) {
        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
    }
    return useValue ? value : void 0;
};
import { LitElement, html, css } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import * as plugins from './typedserver_web.plugins.js';
/**
 * Modern status pill component that displays connection and service worker status
 * - Shows at center-bottom on connectivity changes
 * - Stays visible during error states
 * - Expands on hover to show detailed status
 */
let TypedserverStatusPill = (() => {
    let _classDecorators = [customElement('typedserver-statuspill')];
    let _classDescriptor;
    let _classExtraInitializers = [];
    let _classThis;
    let _classSuper = LitElement;
    let _backendStatus_decorators;
    let _backendStatus_initializers = [];
    let _backendStatus_extraInitializers = [];
    let _swStatus_decorators;
    let _swStatus_initializers = [];
    let _swStatus_extraInitializers = [];
    let _networkStatus_decorators;
    let _networkStatus_initializers = [];
    let _networkStatus_extraInitializers = [];
    let _visible_decorators;
    let _visible_initializers = [];
    let _visible_extraInitializers = [];
    let _expanded_decorators;
    let _expanded_initializers = [];
    let _expanded_extraInitializers = [];
    let _hasError_decorators;
    let _hasError_initializers = [];
    let _hasError_extraInitializers = [];
    var TypedserverStatusPill = class extends _classSuper {
        static { _classThis = this; }
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _backendStatus_decorators = [state()];
            _swStatus_decorators = [state()];
            _networkStatus_decorators = [state()];
            _visible_decorators = [state()];
            _expanded_decorators = [state()];
            _hasError_decorators = [state()];
            __esDecorate(this, null, _backendStatus_decorators, { kind: "accessor", name: "backendStatus", static: false, private: false, access: { has: obj => "backendStatus" in obj, get: obj => obj.backendStatus, set: (obj, value) => { obj.backendStatus = value; } }, metadata: _metadata }, _backendStatus_initializers, _backendStatus_extraInitializers);
            __esDecorate(this, null, _swStatus_decorators, { kind: "accessor", name: "swStatus", static: false, private: false, access: { has: obj => "swStatus" in obj, get: obj => obj.swStatus, set: (obj, value) => { obj.swStatus = value; } }, metadata: _metadata }, _swStatus_initializers, _swStatus_extraInitializers);
            __esDecorate(this, null, _networkStatus_decorators, { kind: "accessor", name: "networkStatus", static: false, private: false, access: { has: obj => "networkStatus" in obj, get: obj => obj.networkStatus, set: (obj, value) => { obj.networkStatus = value; } }, metadata: _metadata }, _networkStatus_initializers, _networkStatus_extraInitializers);
            __esDecorate(this, null, _visible_decorators, { kind: "accessor", name: "visible", static: false, private: false, access: { has: obj => "visible" in obj, get: obj => obj.visible, set: (obj, value) => { obj.visible = value; } }, metadata: _metadata }, _visible_initializers, _visible_extraInitializers);
            __esDecorate(this, null, _expanded_decorators, { kind: "accessor", name: "expanded", static: false, private: false, access: { has: obj => "expanded" in obj, get: obj => obj.expanded, set: (obj, value) => { obj.expanded = value; } }, metadata: _metadata }, _expanded_initializers, _expanded_extraInitializers);
            __esDecorate(this, null, _hasError_decorators, { kind: "accessor", name: "hasError", static: false, private: false, access: { has: obj => "hasError" in obj, get: obj => obj.hasError, set: (obj, value) => { obj.hasError = value; } }, metadata: _metadata }, _hasError_initializers, _hasError_extraInitializers);
            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
            TypedserverStatusPill = _classThis = _classDescriptor.value;
            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        #backendStatus_accessor_storage = __runInitializers(this, _backendStatus_initializers, null);
        // Current status items by source
        get backendStatus() { return this.#backendStatus_accessor_storage; }
        set backendStatus(value) { this.#backendStatus_accessor_storage = value; }
        #swStatus_accessor_storage = (__runInitializers(this, _backendStatus_extraInitializers), __runInitializers(this, _swStatus_initializers, null));
        get swStatus() { return this.#swStatus_accessor_storage; }
        set swStatus(value) { this.#swStatus_accessor_storage = value; }
        #networkStatus_accessor_storage = (__runInitializers(this, _swStatus_extraInitializers), __runInitializers(this, _networkStatus_initializers, null));
        get networkStatus() { return this.#networkStatus_accessor_storage; }
        set networkStatus(value) { this.#networkStatus_accessor_storage = value; }
        #visible_accessor_storage = (__runInitializers(this, _networkStatus_extraInitializers), __runInitializers(this, _visible_initializers, false));
        // UI state
        get visible() { return this.#visible_accessor_storage; }
        set visible(value) { this.#visible_accessor_storage = value; }
        #expanded_accessor_storage = (__runInitializers(this, _visible_extraInitializers), __runInitializers(this, _expanded_initializers, false));
        get expanded() { return this.#expanded_accessor_storage; }
        set expanded(value) { this.#expanded_accessor_storage = value; }
        #hasError_accessor_storage = (__runInitializers(this, _expanded_extraInitializers), __runInitializers(this, _hasError_initializers, false));
        get hasError() { return this.#hasError_accessor_storage; }
        set hasError(value) { this.#hasError_accessor_storage = value; }
        // Hide timeout
        hideTimeout = (__runInitializers(this, _hasError_extraInitializers), null);
        appended = false;
        static styles = css `
    * {
      box-sizing: border-box;
    }

    :host {
      --pill-bg: rgba(20, 20, 20, 0.9);
      --pill-bg-error: rgba(180, 40, 40, 0.95);
      --pill-bg-success: rgba(40, 140, 60, 0.95);
      --pill-text: #fff;
      --pill-text-muted: rgba(255, 255, 255, 0.7);
      --pill-border: rgba(255, 255, 255, 0.1);
      --pill-accent: #4af;
      --pill-success: #4f8;
      --pill-warning: #fa4;
      --pill-error: #f44;
    }

    .pill {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%) translateY(100px);
      background: var(--pill-bg);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 24px;
      padding: 10px 20px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 13px;
      color: var(--pill-text);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      opacity: 0;
      pointer-events: none;
      z-index: 10000;
      max-width: 90vw;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
      border: 1px solid var(--pill-border);
    }

    .pill.visible {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
      pointer-events: auto;
    }

    .pill.error {
      background: var(--pill-bg-error);
    }

    .pill.success {
      background: var(--pill-bg-success);
    }

    .pill-main {
      display: flex;
      align-items: center;
      gap: 12px;
      white-space: nowrap;
    }

    .status-indicator {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--pill-text-muted);
      transition: background 0.3s;
    }

    .status-dot.connected {
      background: var(--pill-success);
      box-shadow: 0 0 6px var(--pill-success);
    }

    .status-dot.disconnected,
    .status-dot.offline,
    .status-dot.error {
      background: var(--pill-error);
      box-shadow: 0 0 6px var(--pill-error);
    }

    .status-dot.reconnecting,
    .status-dot.update {
      background: var(--pill-warning);
      animation: pulse 1s infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }

    .status-label {
      font-size: 12px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .status-message {
      color: var(--pill-text);
      font-weight: 400;
    }

    .separator {
      width: 1px;
      height: 16px;
      background: var(--pill-border);
    }

    .pill-expanded {
      display: none;
      width: 100%;
      padding-top: 8px;
      border-top: 1px solid var(--pill-border);
      flex-direction: column;
      gap: 6px;
    }

    .pill.expanded .pill-expanded {
      display: flex;
    }

    .detail-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      gap: 20px;
    }

    .detail-label {
      color: var(--pill-text-muted);
    }

    .detail-value {
      color: var(--pill-text);
      font-weight: 500;
    }

    .detail-value.success {
      color: var(--pill-success);
    }

    .detail-value.error {
      color: var(--pill-error);
    }

    .detail-value.warning {
      color: var(--pill-warning);
    }

    /* Click hint */
    .pill::after {
      content: '';
      position: absolute;
      bottom: 4px;
      left: 50%;
      transform: translateX(-50%);
      width: 32px;
      height: 3px;
      background: var(--pill-border);
      border-radius: 2px;
      transition: background 0.2s;
    }

    .pill:hover::after {
      background: var(--pill-text-muted);
    }
  `;
        /**
         * Update status from a specific source
         */
        updateStatus(status) {
            // Store by source
            switch (status.source) {
                case 'backend':
                    this.backendStatus = status;
                    break;
                case 'serviceworker':
                    this.swStatus = status;
                    break;
                case 'network':
                    this.networkStatus = status;
                    break;
            }
            // Determine if we have any errors (should persist)
            this.hasError = this.hasAnyError();
            // Show the pill
            this.show();
            // Auto-hide after delay if not persistent
            if (!status.persist && !this.hasError) {
                this.scheduleHide(2500);
            }
            else {
                this.cancelHide();
            }
        }
        /**
         * Check if any status is an error state
         */
        hasAnyError() {
            const errorTypes = ['disconnected', 'error', 'offline'];
            return ((this.backendStatus && errorTypes.includes(this.backendStatus.type)) ||
                (this.networkStatus && errorTypes.includes(this.networkStatus.type)) ||
                false);
        }
        /**
         * Get overall status class
         */
        getStatusClass() {
            if (this.hasError)
                return 'error';
            const latestStatus = this.getLatestStatus();
            if (latestStatus?.type === 'connected' || latestStatus?.type === 'online') {
                return 'success';
            }
            return '';
        }
        /**
         * Get the most recent status
         */
        getLatestStatus() {
            const statuses = [this.backendStatus, this.swStatus, this.networkStatus].filter(Boolean);
            if (statuses.length === 0)
                return null;
            return statuses.reduce((latest, current) => current.timestamp > latest.timestamp ? current : latest);
        }
        /**
         * Show the pill
         */
        show() {
            if (!this.appended) {
                if (!document.body) {
                    // Script loaded before <body> was parsed (async module) — wait for DOM
                    if (document.readyState === 'loading') {
                        document.addEventListener('DOMContentLoaded', () => this.show(), { once: true });
                    }
                    else {
                        requestAnimationFrame(() => this.show());
                    }
                    return;
                }
                document.body.appendChild(this);
                this.appended = true;
            }
            // Small delay to ensure DOM update
            requestAnimationFrame(() => {
                this.visible = true;
            });
        }
        /**
         * Hide the pill
         */
        hide() {
            this.visible = false;
            this.expanded = false;
        }
        /**
         * Schedule auto-hide
         */
        scheduleHide(delayMs) {
            this.cancelHide();
            this.hideTimeout = window.setTimeout(() => {
                if (!this.hasError) {
                    this.hide();
                }
            }, delayMs);
        }
        /**
         * Cancel scheduled hide
         */
        cancelHide() {
            if (this.hideTimeout) {
                clearTimeout(this.hideTimeout);
                this.hideTimeout = null;
            }
        }
        /**
         * Toggle expanded state
         */
        toggleExpanded() {
            this.expanded = !this.expanded;
            if (this.expanded) {
                this.cancelHide();
            }
        }
        /**
         * Clear all status and hide
         */
        clearStatus() {
            this.backendStatus = null;
            this.swStatus = null;
            this.networkStatus = null;
            this.hasError = false;
            this.hide();
        }
        /**
         * Set success message (auto-hides)
         */
        setSuccess(message, source = 'backend') {
            this.updateStatus({
                source,
                type: 'connected',
                message,
                persist: false,
                timestamp: Date.now(),
            });
        }
        /**
         * Set error message (persists)
         */
        setError(message, source = 'backend') {
            this.updateStatus({
                source,
                type: 'error',
                message,
                persist: true,
                timestamp: Date.now(),
            });
        }
        /**
         * Set transitional message (auto-hides)
         */
        setText(message, source = 'backend') {
            this.updateStatus({
                source,
                type: 'reconnecting',
                message,
                persist: false,
                timestamp: Date.now(),
            });
        }
        /**
         * Render status indicators
         */
        renderStatusIndicators() {
            const indicators = [];
            if (this.networkStatus) {
                indicators.push(html `
        <div class="status-indicator">
          <span class="status-dot ${this.networkStatus.type}"></span>
          <span class="status-label">Net</span>
        </div>
      `);
            }
            if (this.backendStatus) {
                indicators.push(html `
        <div class="status-indicator">
          <span class="status-dot ${this.backendStatus.type}"></span>
          <span class="status-label">API</span>
        </div>
      `);
            }
            if (this.swStatus) {
                indicators.push(html `
        <div class="status-indicator">
          <span class="status-dot ${this.swStatus.type}"></span>
          <span class="status-label">SW</span>
        </div>
      `);
            }
            return indicators;
        }
        /**
         * Render expanded details
         */
        renderDetails() {
            const details = [];
            if (this.networkStatus) {
                details.push(html `
        <div class="detail-row">
          <span class="detail-label">Network</span>
          <span class="detail-value ${this.networkStatus.type === 'online' ? 'success' : 'error'}">
            ${this.networkStatus.message}
            ${this.networkStatus.details?.connectionType ? ` (${this.networkStatus.details.connectionType})` : ''}
          </span>
        </div>
      `);
            }
            if (this.backendStatus) {
                details.push(html `
        <div class="detail-row">
          <span class="detail-label">Backend</span>
          <span class="detail-value ${this.backendStatus.type === 'connected' ? 'success' : this.backendStatus.type === 'reconnecting' ? 'warning' : 'error'}">
            ${this.backendStatus.message}
          </span>
        </div>
      `);
            }
            if (this.swStatus) {
                details.push(html `
        <div class="detail-row">
          <span class="detail-label">Service Worker</span>
          <span class="detail-value ${this.swStatus.type === 'connected' ? 'success' : this.swStatus.type === 'update' ? 'warning' : ''}">
            ${this.swStatus.message}
            ${this.swStatus.details?.version ? ` v${this.swStatus.details.version}` : ''}
          </span>
        </div>
      `);
                if (this.swStatus.details?.cacheHitRate !== undefined) {
                    details.push(html `
          <div class="detail-row">
            <span class="detail-label">Cache Hit Rate</span>
            <span class="detail-value">${this.swStatus.details.cacheHitRate.toFixed(1)}%</span>
          </div>
        `);
                }
                if (this.swStatus.details?.resourceCount !== undefined) {
                    details.push(html `
          <div class="detail-row">
            <span class="detail-label">Cached Resources</span>
            <span class="detail-value">${this.swStatus.details.resourceCount}</span>
          </div>
        `);
                }
            }
            return details;
        }
        render() {
            const latestStatus = this.getLatestStatus();
            const message = latestStatus?.message || '';
            const indicators = this.renderStatusIndicators();
            return html `
      <div
        class="pill ${this.visible ? 'visible' : ''} ${this.getStatusClass()} ${this.expanded ? 'expanded' : ''}"
        @click="${this.toggleExpanded}"
      >
        <div class="pill-main">
          ${indicators.length > 0 ? html `
            ${indicators}
            ${message ? html `<span class="separator"></span>` : ''}
          ` : ''}
          ${message ? html `<span class="status-message">${message}</span>` : ''}
        </div>
        <div class="pill-expanded">
          ${this.renderDetails()}
        </div>
      </div>
    `;
        }
        static {
            __runInitializers(_classThis, _classExtraInitializers);
        }
    };
    return TypedserverStatusPill = _classThis;
})();
export { TypedserverStatusPill };
//# sourceMappingURL=data:application/json;base64, 