@pb33f/cowboy-components 0.7.17 → 0.8.0

package/dist/components/the-doctor/upload-archive.css.js

@@ -79,14 +79,20 @@ export default css `
     }
     
     .upload-archive-button {
-        border: 1px solid var(--primary-color);
+        border: 1px solid var(--warn-color);
         display: inline-block;
         cursor: pointer;
-        color: var(--primary-color);
+        color: var(--warn-color);
         padding: 10px;
         font-size: 0.8rem;
         height: 18px;
     }
+
+    .upload-archive-button:hover {
+        border: 1px solid var(--warn-color);
+        color: var(--background-color);
+        background-color: var(--warn-color);
+    }
     
     
     

package/dist/components/the-doctor/upload-archive.js

@@ -200,7 +200,7 @@ let UploadArchiveComponent = class UploadArchiveComponent extends LitElement {
         }
         return html `
             <sl-dialog style="--width: 60vw; --height: 50vh">
-                <span slot="label"><sl-icon name="upload"></sl-icon> Import OpenAPI spec via URL or upload an archive</span>
+                <span slot="label"><sl-icon name="upload" aria-hidden="true"></sl-icon> Import OpenAPI spec via URL or upload an archive</span>
                 <div class="archive-select">
                     <div class="use-url">
                         
@@ -227,7 +227,7 @@ let UploadArchiveComponent = class UploadArchiveComponent extends LitElement {
                         </p>
 
                         <label for="fileInput" class="upload-archive-button">
-                            Upload .zip or .tar.gz
+                            UPLOAD .zip OR .tar.gz
                         </label>
                         <input ${this.invalid ? 'invalid-file invalid' : ''}" type="file" id="fileInput" @change="${this.handleFileChange}"/>
 

package/dist/components/theme-switcher/theme-switcher.js

@@ -8,6 +8,7 @@ import { customElement, state } from "lit/decorators.js";
 import { html, LitElement } from "lit";
 import themeSwitcherCss from "./theme-switcher.css.js";
 import tooltipCss from "../../css/tooltip.css.js";
+import { PB33F_THEME_CHANGE } from "../../events/theme.js";
 export const DarkTheme = 'dark';
 export const LightTheme = 'light';
 export const PB33F_THEME = 'pb33f-theme';
@@ -52,6 +53,9 @@ let ThemeSwitcher = class ThemeSwitcher extends LitElement {
                     break;
             }
         }
+        window.dispatchEvent(new CustomEvent(PB33F_THEME_CHANGE, {
+            detail: { theme: this.theme }
+        }));
     }
     render() {
         let gear = 'sun';
@@ -59,7 +63,7 @@ let ThemeSwitcher = class ThemeSwitcher extends LitElement {
             gear = 'moon';
         }
         return html `
-            <sl-tooltip content="Toggle between dark and light mode" placement="top">
+            <sl-tooltip content="Toggle between PB33F Mode (Dark) and Roger Mode (light)" placement="top">
             <sl-icon-button 
                     @click=${this.toggleTheme}
                     name="${gear}" 

package/dist/components/time-vortex/change-list-item.css.js

@@ -1,10 +1,19 @@
 import { css } from "lit";
 export default css `
-    
+
+    :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        min-height: 0;
+    }
+
     .changes {
         display: grid;
-        grid-template-columns: 50px 170px auto 30px 100px;
-        max-height: calc(100vh - 550px);
+        grid-template-columns: 30px 140px auto 30px 100px;
+        align-content: start;
+        flex: 1;
+        min-height: 0;
         overflow-y: auto;
     }
     
@@ -31,7 +40,7 @@ export default css `
     }
     
     .removed-icon {
-        font-size: 1rem;   
+        font-size: 1rem;
     }
 
     .added-icon {
@@ -41,6 +50,11 @@ export default css `
     .modified-icon {
         font-size: 1rem;
     }
+
+    pb33f-model-badge {
+        --model-badge-gap: 5px;
+        --model-badge-min-width: 100px;
+    }
     
     .removed {
         color: var(--error-color);

package/dist/components/time-vortex/change-list-item.d.ts

@@ -1,6 +1,7 @@
 import { TemplateResult } from "lit";
 import { Change } from "../../model/graph.js";
 import { HasChanges } from "../model-renderer/has-changes.js";
+import '../model-renderer/model-badge.js';
 export declare class ChangeList extends HasChanges {
     static styles: import("lit").CSSResult[];
     constructor();

package/dist/components/time-vortex/change-list-item.js

@@ -9,6 +9,8 @@ import { html } from "lit";
 import { HasChanges } from "../model-renderer/has-changes.js";
 import changeListItemCss from "./change-list-item.css.js";
 import scrollbarCss from "../../css/scrollbar.css.js";
+import '../model-renderer/model-badge.js';
+import { IconSize } from '../model-icon/model-icon.js';
 let ChangeList = class ChangeList extends HasChanges {
     constructor() {
         super();
@@ -25,7 +27,7 @@ let ChangeList = class ChangeList extends HasChanges {
     render() {
         return html `
             <div class="changes scroller">
-                ${this.changes.map((change) => {
+                ${this.changes?.map((change) => {
             let ctx = html `${change.context.newLine}:${change.context.newColumn}`;
             if (!change.context.newLine) {
                 ctx = html `${change.context.originalLine}:${change.context.originalColumn}`;
@@ -33,8 +35,7 @@ let ChangeList = class ChangeList extends HasChanges {
             return html `
                     <div class="col icon">${this.renderChangeIcon(change)}</div>
                     <div class="col type">
-                            <pb33f-model-icon icon="${change.type}"></pb33f-model-icon>
-                            <sl-badge>${change.type?.replace(/([a-z])([A-Z])/g, '$1 $2').toLowerCase()}</sl-badge>
+                            <pb33f-model-badge icon="${change.type}" iconSize="${IconSize.small}"></pb33f-model-badge>
                     </div>
                     <div class="col property">
                         <span class="property-item">${this.getChangeValue(change)}

package/dist/components/time-vortex/history-picker.css.js

@@ -6,6 +6,13 @@ export default css `
         background: var(--background-color);
     }
 
+    .breaking-change-pr {
+        color: var(--warn-color);
+        font-size: 1.5rem;
+        background: var(--background-color);
+    }
+
+
     .change {
         color: var(--secondary-color);
         font-size: 1rem;
@@ -18,7 +25,25 @@ export default css `
         padding-left: 5px;
     }
 
+    .heart-breaker-pr {
+
+        border-left: 3px solid var(--warn-color);
+        padding-left: 5px;
+    }
+
+
+    .ephemeral {
+        border-left: 3px solid var(--warn-color);
+        padding-left: 5px;
+    }
     
+    .ephemeral-icon {
+        color: var(--warn-color);
+        font-size: 1.4rem;
+        background-color: var(--background-color);
+    }
+
+
     .selected-bar {
         border-left: 3px solid var(--primary-color)!important;
     }
@@ -77,7 +102,7 @@ export default css `
     }
     
     .tardis-timeline {
-        height: calc(100vh - 205px);
+        height: calc(100vh - 215px);
         width: 100%;
         overflow-y: auto;
         overflow-x: hidden;
@@ -87,4 +112,38 @@ export default css `
         font-family: var(--font-stack-bold), sans-serif;
     }
     
+    .pr-title {
+        --font-color: var(--font-color);
+        font-size: 0.8rem;
+        color: var(--warn-color);
+    }
+
+    @keyframes blink-fade {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.3; }
+    }
+
+    .critical {
+        color: var(--error-color) !important;
+        border-left-color: var(--error-color) !important;
+        animation: blink-fade 1s ease-in-out infinite;
+    }
+
+    .critical-icon {
+        color: var(--error-color);
+        font-size: 1.4rem;
+        background-color: var(--background-color);
+        animation: blink-fade 1s ease-in-out infinite;
+    }
+
+    .ephemeral-changes {
+        font-size: 0.7rem;
+        color: var(--font-color-sub1);
+        margin-top: 2px;
+    }
+
+    sl-relative-time {
+        text-transform: uppercase;
+    }
+
 `;

package/dist/components/time-vortex/history-picker.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from "lit";
+import { LitElement, PropertyValues } from "lit";
 import { SpecSummary } from "../../model/timeline.js";
 import '../timeline/timeline.js';
 import '../timeline/timeline-item.js';
@@ -9,7 +9,13 @@ export declare class HistoryPicker extends LitElement {
     static styles: import("lit").CSSResult[];
     specSummary: SpecSummary[];
     skipChanges: boolean;
+    private countdownControllers;
     constructor();
+    disconnectedCallback(): void;
+    updated(changedProperties: PropertyValues): void;
+    private cleanupOrphanedControllers;
+    private handleExpired;
+    private getOrCreateCountdownController;
     loadOverview(): void;
     openSettings(): void;
     render(): import("lit-html").TemplateResult<1>;

package/dist/components/time-vortex/history-picker.js

@@ -7,7 +7,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import historyPickerCss from "./history-picker.css.js";
-import { OpenSettings, RevisionClicked, ShowTimelineSummary } from "../../events/doctor.js";
+import { OpenSettings, RevisionClicked, ShowTimelineSummary, TimelineHistoryRefresh } from "../../events/doctor.js";
+import { DoctorIcon } from "../model-icon/doctor-icon.js";
 import linksCss from "../../css/links.css.js";
 import scrollbarCss from "../../css/scrollbar.css.js";
 import '../timeline/timeline.js';
@@ -15,11 +16,58 @@ import '../timeline/timeline-item.js';
 import './spec-summary-timeline-item.js';
 import '@shoelace-style/shoelace/dist/components/format-date/format-date.js';
 import '@shoelace-style/shoelace/dist/components/relative-time/relative-time.js';
+import { CountdownController } from "../../controllers/countdown-controller.js";
 let HistoryPicker = class HistoryPicker extends LitElement {
     constructor() {
         super();
+        this.countdownControllers = new Map();
         this.skipChanges = false;
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        for (const controller of this.countdownControllers.values()) {
+            controller.stop();
+        }
+        this.countdownControllers.clear();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('specSummary')) {
+            this.cleanupOrphanedControllers();
+        }
+    }
+    cleanupOrphanedControllers() {
+        const activeChangeIds = new Set(this.specSummary
+            ?.filter(s => s.isEphemeral && s.changeId)
+            .map(s => s.changeId));
+        for (const [changeId, controller] of this.countdownControllers.entries()) {
+            if (!activeChangeIds.has(changeId)) {
+                controller.stop();
+                this.countdownControllers.delete(changeId);
+            }
+        }
+    }
+    handleExpired(changeId) {
+        const controller = this.countdownControllers.get(changeId);
+        if (controller) {
+            controller.stop();
+        }
+        this.countdownControllers.delete(changeId);
+        this.dispatchEvent(new Event(TimelineHistoryRefresh, {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    getOrCreateCountdownController(spec) {
+        if (!spec.changeId || !spec.ephemeralExpiresAt) {
+            return null;
+        }
+        let controller = this.countdownControllers.get(spec.changeId);
+        if (!controller) {
+            controller = new CountdownController(this, spec.ephemeralExpiresAt, () => this.handleExpired(spec.changeId));
+            this.countdownControllers.set(spec.changeId, controller);
+        }
+        return controller;
+    }
     loadOverview() {
         this.deselectTimelineItems();
         this.dispatchEvent(new Event(ShowTimelineSummary, {
@@ -37,19 +85,21 @@ let HistoryPicker = class HistoryPicker extends LitElement {
         let skipped = html ``;
         if (this.skipChanges) {
             skipped = html `<div class="skip-changes">
-                The tardis is <strong>disabled</strong>, changes <strong>not</strong> being tracked. 
-                <a href="#" @click="${this.openSettings}">Open settings</a>
+                <strong>TARDIS DISABLED:</strong> CHANGES NOT TRACKED<br/>
+                <a href="#" @click="${this.openSettings}">[OPEN SETTINGS]</a>
             </div>`;
         }
         return html `
             ${skipped}
             <div class="view-tardis">
-                <sl-icon name="clock-history"></sl-icon>
-                <a href="#" @click="${this.loadOverview}">Timeline Overview</a>
+                <sl-icon name="clock-history" aria-hidden="true"></sl-icon>
+                <a href="#" @click="${this.loadOverview}">TIMELINE OVERVIEW</a>
             </div>
             <div class="tardis-timeline scroller">
                 <pb33f-timeline skinny>
                     ${this.specSummary?.map((spec, index) => {
+            const isPr = spec.gitPrNumber !== undefined && spec.gitPrNumber !== null;
+            const isEphemeral = spec.isEphemeral !== undefined && spec.isEphemeral;
             let heartBreaker = false;
             let breaking = html `
                             <sl-icon slot="icon" name="caret-right-fill" class="change"></sl-icon>`;
@@ -58,6 +108,10 @@ let HistoryPicker = class HistoryPicker extends LitElement {
                                 <sl-icon slot="icon" name="heartbreak-fill" class="breaking-change"></sl-icon>`;
                 heartBreaker = true;
             }
+            if (isPr && heartBreaker) {
+                breaking = html `
+                                <sl-icon slot="icon" name="heartbreak-fill" class="breaking-change-pr"></sl-icon>`;
+            }
             if (this.specSummary[index + 1] != undefined && spec && spec.diagnosisScore) {
                 const preSpec = this.specSummary[index + 1];
                 if (preSpec && preSpec.diagnosisScore && preSpec.diagnosisScore > spec.diagnosisScore) {
@@ -69,6 +123,56 @@ let HistoryPicker = class HistoryPicker extends LitElement {
                     spec.scoreVariance = spec.diagnosisScore - preSpec.diagnosisScore;
                 }
             }
+            if (isPr) {
+                // PR timeline item.
+                return html `
+                            <pb33f-timeline-item id="change-${spec.changeId}" skinny @click="${() => {
+                    this.loadSpecSummary(spec);
+                }}">
+                                ${breaking}
+                                <div id="timebar-${spec.changeId}" slot="time"
+                                     class="time ${heartBreaker ? 'heart-breaker-pr' : 'dream-maker'}">
+                                    <sl-relative-time date="${spec.created}" format="long"></sl-relative-time>
+                                </div>
+                                <div slot="content">
+                                    <div id="changebar-${spec.changeId}"
+                                         class="change ${heartBreaker ? 'heart-breaker-pr' : 'dream-maker'}">
+                                      <span class="pr-title">${DoctorIcon.getGitHubIcon(18)} ${spec.gitPrTitle}</span>
+                                    </div>
+
+                                </div>
+                            </pb33f-timeline-item>
+                        `;
+            }
+            if (isEphemeral) {
+                const countdown = this.getOrCreateCountdownController(spec);
+                if (!countdown || countdown.isExpired) {
+                    return html ``;
+                }
+                const criticalClass = countdown.isCritical ? 'critical' : '';
+                const iconClass = countdown.isCritical ? 'critical-icon' : 'ephemeral-icon';
+                const changes = spec.totalChanges ?? 0;
+                return html `
+                            <pb33f-timeline-item id="change-${spec.changeId}" skinny @click="${() => {
+                    this.loadSpecSummary(spec);
+                }}">
+                                <sl-icon slot="icon" name="clock" class="${iconClass}"></sl-icon>
+                                <div id="timebar-${spec.changeId}" slot="time"
+                                     class="time ephemeral ${criticalClass}">
+                                    ${countdown.formattedTime}
+                                   
+                                </div>
+                                <div slot="content">
+                                    <div id="changebar-${spec.changeId}"
+                                         class="change ephemeral ${criticalClass}">
+                                      <span class="pr-title">Temporary Comparison</span>
+                                        <div class="ephemeral-changes">${changes} change${changes !== 1 ? 's' : ''} detected</div>
+                                    </div>
+
+                                </div>
+                            </pb33f-timeline-item>
+                        `;
+            }
             return html `
                             <pb33f-timeline-item id="change-${spec.changeId}" skinny @click="${() => {
                 this.loadSpecSummary(spec);