@pb33f/cowboy-components 0.6.6 → 0.7.0

package/dist/components/rodeo/rodeo.js

@@ -19,6 +19,7 @@ import { AuthController } from "../../controllers/auth.js";
 import { RodeoService } from "../../services/rodeo-service.js";
 import { RodeoRoundup } from "./roundup.js";
 import { PlatformEventType } from "../../model/platform-events.js";
+import { RodeoDownloadStatistics } from "./npm/download-statistic";
 let Rodeo = class Rodeo extends LitElement {
     constructor() {
         super();
@@ -29,6 +30,7 @@ let Rodeo = class Rodeo extends LitElement {
         this.bus.mapChannelToBrokerDestination(QueuePrefix + DoctorServiceChannel, DoctorServiceChannel);
         this.doctorChannelSubscription = this.doctorServiceChannel.subscribe(this.doctorServiceHandler());
         this.roundupComponent = new RodeoRoundup();
+        this.downloadStatisticsComponent = new RodeoDownloadStatistics();
         // extract port from session storage.
         this.busPort = sessionStorage.getItem("pb33f-doctor-port");
         this.busHost = sessionStorage.getItem("pb33f-doctor-host");
@@ -74,8 +76,8 @@ let Rodeo = class Rodeo extends LitElement {
         const router = new Router(this.shadowRoot?.getElementById('outlet'));
         router?.setRoutes([
             {
-                path: '/rodeo.html', action: () => {
-                    return this.roundupComponent;
+                path: 'rodeo.html', action: () => {
+                    return this.downloadStatisticsComponent;
                 }
             },
             {
@@ -83,6 +85,11 @@ let Rodeo = class Rodeo extends LitElement {
                     return this.roundupComponent;
                 }
             },
+            {
+                path: '/rodeo/download-stats', action: () => {
+                    return this.downloadStatisticsComponent;
+                }
+            },
             {
                 path: '/rodeo/', action: () => {
                     return this.roundupComponent;

package/dist/components/rodeo/statistic.css.js

@@ -11,6 +11,13 @@ export default css `
         padding: 10px;
         margin: 10px;
     }
+    
+    .statistic.small {
+        width: 170px;
+        height: 40px;
+        padding: 5px;
+    }
+    
     .title {
         height: 30px;
         font-size: 1.2rem;
@@ -18,6 +25,11 @@ export default css `
         color: var(--secondary-color)
     }
     
+    .title.small {
+        font-size: 0.9rem;
+        height: 20px;
+    }
+    
     .details {
         display: flex;
         flex-wrap: wrap;
@@ -29,6 +41,11 @@ export default css `
         color: var(--primary-color);
         text-shadow: 0 0 20px var(--primary-color-lowalpha);
     }
+    
+    .value.small {
+        font-size: 1rem;
+        font-family: var(--font-stack-bold), sans-serif;
+    }
 
     @keyframes pulse {
         0% {

package/dist/components/rodeo/statistic.d.ts

@@ -1,10 +1,12 @@
-import { LitElement } from "lit";
+import { LitElement, TemplateResult } from "lit";
 import '@shoelace-style/shoelace/dist/components/format-number/format-number.js';
 export declare class Statistic extends LitElement {
     static styles: import("lit").CSSResult[];
     title: string;
     value: number;
+    label: string;
+    small: boolean;
     constructor();
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
     updated(changedProperties: Map<string, unknown>): void;
 }

package/dist/components/rodeo/statistic.js

@@ -12,16 +12,21 @@ let Statistic = class Statistic extends LitElement {
     constructor() {
         super();
         this.title = 'statistic';
+        this.small = false;
     }
     render() {
+        let val = html `<sl-format-number value="${this.value}"></sl-format-number></span>`;
+        if (!this.value && this.label !== "") {
+            val = html `${this.label}`;
+        }
         return html `
-            <div class="statistic">
-                <div class="title">
+            <div class="statistic ${this.small ? 'small' : ''}">
+                <div class="title ${this.small ? 'small' : ''}">
                     ${this.title}
                 </div>
                 <div class="details">
-                <span class="value">
-                    <sl-format-number value="${this.value}"></sl-format-number></span>
+                <span class="value ${this.small ? 'small' : ''}">
+                    ${val}
                 </div>
             </div>`;
     }
@@ -53,6 +58,12 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], Statistic.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], Statistic.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], Statistic.prototype, "small", void 0);
 Statistic = __decorate([
     customElement('pb33f-rodeo-statistic')
 ], Statistic);

package/dist/components/the-doctor/settings.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/the-doctor/settings.css.js

@@ -0,0 +1,28 @@
+import { css } from "lit";
+export default css `
+    :host {
+        font-size: 0.8rem;
+    }
+    
+    header {
+        font-size: 0.9rem;
+        border-bottom: 1px solid var(--secondary-color);
+        margin-bottom: 10px;
+        padding-bottom: 10px;
+        padding-top: 10px;
+    }    
+    small {
+        display: block;
+        padding-top: 10px;
+        color: var(--font-color-sub1);
+        font-size: 0.7rem;
+    }
+    
+    .setting-control {
+        width: 500px;
+    }
+    
+    .control {
+        margin-bottom: 20px;
+    }
+`;

package/dist/components/the-doctor/settings.d.ts

@@ -1,5 +1,18 @@
 import { LitElement } from "lit";
+import { SlDialog } from "@shoelace-style/shoelace";
+import { Bag } from "@pb33f/saddlebag";
+import { DoctorConfiguration } from "../../model/settings.js";
+import '../theme-switcher/theme-switcher.js';
 export declare class DoctorSettings extends LitElement {
+    static styles: import("lit").CSSResult[];
+    opened: boolean;
+    dialog: SlDialog;
+    settings: DoctorConfiguration;
+    settingsBag: Bag<DoctorConfiguration> | undefined;
     constructor();
+    updateSettings(): void;
+    bootstrap(): DoctorConfiguration;
+    open(): void;
+    close(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/the-doctor/settings.js

@@ -4,16 +4,97 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { customElement } from "lit/decorators.js";
+import { customElement, query, state } from "lit/decorators.js";
 import { html, LitElement } from "lit";
+import dialogCss from "../../css/dialog.css.js";
+import buttonCss from "../../css/button.css.js";
+import { SettingsBag } from "./the-doctor.js";
+import settingsCss from "./settings.css.js";
+import '../theme-switcher/theme-switcher.js';
+import { AttentionType } from "../attention-box/attention-box";
 let DoctorSettings = class DoctorSettings extends LitElement {
     constructor() {
         super();
+        this.opened = false;
+    }
+    updateSettings() {
+        const autoDiagnose = this.shadowRoot?.querySelector('sl-switch#autoDiagnose');
+        const skipTimeline = this.shadowRoot?.querySelector('sl-switch#skipTimeline');
+        if (this.settings) {
+            this.settings.autoDiagnose = autoDiagnose.checked;
+            this.settings.skipTimeline = !skipTimeline.checked;
+            this.settingsBag?.set(SettingsBag, this.settings);
+        }
+    }
+    bootstrap() {
+        const initial = {
+            autoDiagnose: true,
+            skipTimeline: false,
+            applicationVersion: "bootstrap"
+        };
+        if (!this.settingsBag) {
+            return initial;
+        }
+        const bagSettings = this.settingsBag.get(SettingsBag);
+        if (bagSettings) {
+            this.settings = bagSettings;
+            return bagSettings;
+        }
+        this.settings = initial;
+        return this.settings;
+    }
+    open() {
+        this.opened = true;
+        this.dialog.show();
+        this.requestUpdate();
+    }
+    close() {
+        this.opened = false;
+        this.dialog.hide();
+        this.requestUpdate();
     }
     render() {
-        return html ``;
+        return html `
+            <sl-dialog label="Settings" class="dialog-width" style="--width: 550px;">
+                <div class="setting-control">
+                    <div class="control">
+                        <header>Auto Diagnosis</header>
+                        <sl-switch @sl-change="${this.updateSettings}" id="autoDiagnose" 
+                                   ?checked="${this.settings?.autoDiagnose}"></sl-switch> 
+                        Automatically diagnose when editing<br/>
+                        <small>The doctor will run a diagnosis and record a change every time you type.
+                            To stop this, disable auto diagnosis and a manual button will appear.</small>
+                    </div>
+                    <div class="control">
+                        <header>Tardis control</header>
+                        <sl-switch @sl-change="${this.updateSettings}" id="skipTimeline" 
+                                   ?checked="${!this.settings?.skipTimeline}"></sl-switch> Track changes and quality<br/>
+                        <small>Every diagnosis will track all the changes made to the OpenAPI document 
+                            and keep a full audit trail, like a time machine.</small>
+                    </div>
+                    <div class="control">
+                        <header>Dark / Light Mode (experimental)</header>
+                        <pb33f-attention-box type="${AttentionType.Warning}">
+                            <strong>This is experimental and incomplete</strong><br/><br/>
+                            <strong>A lot of the colors are going to be wrong or missing</strong>.
+                        </pb33f-attention-box>
+                        <pb33f-theme-switcher></pb33f-theme-switcher>
+                        <small>
+                            Switch between light and dark mode (it's going to look bad in light mode) <strong>
+                        </small>
+                    </div>
+                </div>
+                <sl-button slot="footer" variant="primary" @click="${this.close}">Close</sl-button>
+            </sl-dialog>`;
     }
 };
+DoctorSettings.styles = [settingsCss, dialogCss, buttonCss];
+__decorate([
+    query('sl-dialog')
+], DoctorSettings.prototype, "dialog", void 0);
+__decorate([
+    state()
+], DoctorSettings.prototype, "settings", void 0);
 DoctorSettings = __decorate([
     customElement("pb33f-doctor-settings")
 ], DoctorSettings);

package/dist/components/the-doctor/sparks.d.ts

@@ -5,11 +5,14 @@ export declare class PixelSparks extends LitElement {
     private readonly spawnRate;
     private ctx;
     private canvas;
+    private animationTimer;
     isError: boolean;
+    animating: boolean;
     static styles: import("lit").CSSResult;
     constructor();
     firstUpdated(): void;
     startAnimation(): void;
+    stopAnimation(): void;
     getRandomBetween(min: number, max: number): number;
     spawnSpark(): void;
     animateSparks(): void;

package/dist/components/the-doctor/sparks.js

@@ -13,6 +13,7 @@ let PixelSparks = class PixelSparks extends LitElement {
         this.gravity = 0.0001;
         this.spawnRate = 70;
         this.isError = false;
+        this.animating = false;
     }
     firstUpdated() {
         const canvas = this.renderRoot.querySelector('canvas');
@@ -23,11 +24,19 @@ let PixelSparks = class PixelSparks extends LitElement {
                 this.ctx = ctx;
             }
         }
-        this.startAnimation();
     }
     startAnimation() {
-        setInterval(() => this.spawnSpark(), 1000 / this.spawnRate);
-        this.animateSparks();
+        if (!this.animating) {
+            this.animationTimer = setInterval(() => this.spawnSpark(), 1000 / this.spawnRate);
+            this.animateSparks();
+            this.animating = true;
+        }
+    }
+    stopAnimation() {
+        if (this.animating) {
+            clearInterval(this.animationTimer);
+            this.animating = false;
+        }
     }
     getRandomBetween(min, max) {
         return Math.random() * (max - min) + min;
@@ -64,8 +73,10 @@ let PixelSparks = class PixelSparks extends LitElement {
     drawSpark(spark) {
         this.ctx.globalAlpha = spark.opacity; // Set transparency level
         this.ctx.fillStyle = spark.color;
-        this.ctx.shadowColor = spark.color;
-        this.ctx.shadowBlur = 8;
+        if (!/Safari/.test(navigator.userAgent)) {
+            this.ctx.shadowColor = spark.color;
+            this.ctx.shadowBlur = 8;
+        }
         this.ctx.fillRect(spark.x, spark.y, spark.size, spark.size);
         this.ctx.globalAlpha = 1; // Reset alpha to default
     }

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

@@ -51,47 +51,47 @@ export default css `
     }
 
 
-    sl-split-panel {
-        width: 100%;
-        height: 100%;
-        --divider-width: 2px;
-    }
-
-
-    sl-split-panel::part(divider) {
-        background-color: var(--secondary-color);
-    }
-
-    sl-icon.divider-vert {
-        position: absolute;
-        left: 2px;
-        border-radius: 0;
-        background: var(--secondary-color);
-        color: var(--background-color);
-        padding: 0;
-        width: 10px;
-        height: 40px;
-    }
-
-    sl-icon.divider-horiz {
-        position: absolute;
-        border-radius: 0;
-        background: var(--secondary-color);
-        color: var(--background-color);
-        padding: 0;
-        width: 40px;
-        height: 8px;
-    }
-
-
-    sl-split-panel::part(divider):focus-visible {
-        background-color: var(--primary-color);
-    }
-
-    sl-split-panel:focus-within sl-icon {
-        background-color: var(--primary-color);
-        color: var(--background-color);
-    }
+    //sl-split-panel {
+    //    width: 100%;
+    //    height: 100%;
+    //    --divider-width: 2px;
+    //}
+    //
+    //
+    //sl-split-panel::part(divider) {
+    //    background-color: var(--secondary-color);
+    //}
+    //
+    //sl-icon.divider-vert {
+    //    position: absolute;
+    //    left: 2px;
+    //    border-radius: 0;
+    //    background: var(--secondary-color);
+    //    color: var(--background-color);
+    //    padding: 0;
+    //    width: 10px;
+    //    height: 40px;
+    //}
+    //
+    //sl-icon.divider-horiz {
+    //    position: absolute;
+    //    border-radius: 0;
+    //    background: var(--secondary-color);
+    //    color: var(--background-color);
+    //    padding: 0;
+    //    width: 40px;
+    //    height: 8px;
+    //}
+    //
+    //
+    //sl-split-panel::part(divider):focus-visible {
+    //    background-color: var(--primary-color);
+    //}
+    //
+    //sl-split-panel:focus-within sl-icon {
+    //    background-color: var(--primary-color);
+    //    color: var(--background-color);
+    //}
 
 
     .unavailable {
@@ -184,12 +184,12 @@ export default css `
     }
 
     .tab-panel {
-        height: 100%;
-        width: 100%;
+        //height: calc(100vh - 125px);
+        width: 100%;    
     }
 
     .tab-group {
-        height: 100%
+        //height: 100%
     }
     
     sl-tab-panel.tab-panel::part(base) {
@@ -238,7 +238,7 @@ export default css `
     }
 
     pb33f-toast-manager {
-
+        
         position: absolute;
         top: 10px;
         right: 0;
@@ -355,10 +355,18 @@ export default css `
         line-height: 1.2rem;
         margin-top: 0;
     }
+
+
+    .settings-toggle {
+        position: absolute;
+        right: 10px;
+        top: -5px;
+        z-index: 10;
+    }
     
     .minimap-toggle {
         position: absolute;
-        right: 10px;
+        right: 40px;
         top: -5px;
         z-index: 10;
     }
@@ -366,6 +374,10 @@ export default css `
     sl-tooltip.minimap-tip::part(base) {
         font-size: 1rem;
     }
+
+    sl-tooltip.settings-tip::part(base) {
+        font-size: 1rem;
+    }
     
     .minimap-toggle.active {
         color: var(--warn-color)
@@ -376,6 +388,20 @@ export default css `
         margin: 0 10px 0 10px;
     }
     
+    .diagnose-button {
+        position: absolute;
+        right: 80px;
+        top: -5px;
+        z-index: 10;
+        height: 20px;
+    }
+
+    .diagnose-button::part(base) {
+        height: 20px;
+        padding: 0;
+        line-height: 18px;
+    }
+    
     .nuke-session-button::part(base) {
         padding: 0;
     }
@@ -408,7 +434,14 @@ export default css `
         font-size: 5rem;
         animation: spin 2s linear infinite;
     }
-
+    .model-tree-panel {
+        height: calc(100vh - 165px);
+    }
+    
+    .timevortex {
+        padding-top: 5px;
+    }
+    
     @keyframes spin {
         0% {
             transform: rotate(0deg);

package/dist/components/the-doctor/the-doctor.d.ts

@@ -9,7 +9,7 @@ import '@shoelace-style/shoelace/dist/components/badge/badge.js';
 import '@shoelace-style/shoelace/dist/components/avatar/avatar.js';
 import { LitElement } from "lit";
 import { SpecEditor } from "../editor/editor.js";
-import { AddToastEvent, ArchiveURLRequestedEvent, DocumentReference, EditorUpdatedEvent, ExplorerEqualizerChangedEvent, NodeClickedEvent, NodeReferenceEvent, ProblemRuleFilterChangedEvent, RuleClickedEvent, RulesetSavedEvent } from "../../events/doctor.js";
+import { AddToastEvent, ArchiveURLRequestedEvent, DocumentReference, EditorUpdatedEvent, ExplorerEqualizerChangedEvent, LoadRenderedNodeIntoInspectorEvent, NodeClickedEvent, NodeReferenceEvent, ProblemRuleFilterChangedEvent, RuleClickedEvent, RulesetSavedEvent } from "../../events/doctor.js";
 import { ProblemDrawerEvent } from "../problem-list/details-drawer.js";
 import { Problem } from "../../model/problem.js";
 import { SlButton, SlDialog, SlIcon, SlInput, SlRadioGroup, SlSplitPanel, SlTab, SlTabGroup } from "@shoelace-style/shoelace";
@@ -22,6 +22,7 @@ import { ModelTree } from "../model-tree/tree.js";
 import { ExplorerComponent } from "../visualizer/explorer.js";
 import { RenderedNodeComponent } from "../model-renderer/rendered-node.js";
 import { BusCallback, CommandResponse } from "@pb33f/ranch";
+import { DoctorConfiguration } from "../../model/settings.js";
 export declare const GraphBag = "pb33f-doctor-graph";
 export declare const PanelStateBag = "pb33f-doctor-panel-state";
 export declare const RolodexResponseBag = "pb33f-doctor-rolodex-response";
@@ -42,6 +43,7 @@ export declare const FunctionsSchemaBag = "pb33f-doctor-function-schema";
 export declare const CustomRulesetBag = "pb33f-doctor-custom-ruleset";
 export declare const RuleConfigurationBag = "pb33f-doctor-rule-configuration";
 export declare const SessionRulesetMapBag = "pb33f-doctor-session-rulesetmap";
+export declare const SettingsBag = "pb33f-doctor-settings";
 export declare const DefaultDocument = "pb33f-doctor-document";
 export declare const DocumentProblems = "pb33f-doctor-problems";
 export declare const DoctorEndpoint = "doctor-endpoint";
@@ -51,6 +53,7 @@ export declare class TheDoctor extends LitElement {
     problemsPanel: SlTab;
     viewerPanel: SlTab;
     explorerPanel: SlTab;
+    historyPanel: SlTab;
     controlTabGroup: SlTabGroup;
     editorTabGroup: SlTabGroup;
     welcomeBox: AttentionBox;
@@ -82,6 +85,9 @@ export declare class TheDoctor extends LitElement {
     explorerBooted: boolean;
     activeURL: string;
     rolodexNeedsReset: boolean;
+    private autoDiagnose;
+    private skipTimeline;
+    private showDiagnosisButton;
     editor: SpecEditor;
     rolodexRoot: Node;
     rolodexProblemMap: Map<string, Problem[]>;
@@ -106,6 +112,7 @@ export declare class TheDoctor extends LitElement {
     private rolodexStateBag;
     private referenceMapBag;
     private panelStateBag;
+    private settingsBag;
     private docExpirationBag;
     private graphBag;
     private ruleDocsBag;
@@ -130,10 +137,12 @@ export declare class TheDoctor extends LitElement {
     private customRuleset;
     private functions;
     private readonly toastManager;
+    private readonly settingsComponent;
     private editorMap;
     private selectedEditorTab;
     private sidebarClosed;
     private importDisabled;
+    private currentVersion;
     renderedNodeMap: Map<string, Node>;
     selectedNodeHashId: string;
     modelTree: ModelTree;
@@ -162,7 +171,15 @@ export declare class TheDoctor extends LitElement {
     private pendingLine;
     private rolodexDividerPosition;
     private authController;
+    private timeVortex;
+    rolodexRootPath: string;
+    rolodexRootHash: string;
+    rolodexActivePath: string | undefined;
+    rolodexActiveHash: string | undefined;
     constructor(doctorEndpoint?: string);
+    openSettings(): void;
+    settingsChanged(_: string, config: DoctorConfiguration | undefined): void;
+    loadRenderedNodeIntoInspector(evt: CustomEvent<LoadRenderedNodeIntoInspectorEvent>): void;
     tickRandomly(): void;
     nukeWorkspaceHandler(): void;
     minimapToggled(): void;
@@ -179,14 +196,10 @@ export declare class TheDoctor extends LitElement {
     filterTreeModel(event: CustomEvent<ExplorerEqualizerChangedEvent>): void;
     documentReferenceClicked(evt: CustomEvent<DocumentReference>): void;
     explorerReferenceClicked(evt: CustomEvent<NodeReferenceEvent>): void;
-    rolodexRootPath: string;
-    rolodexRootHash: string;
-    rolodexActivePath: string | undefined;
-    rolodexActiveHash: string | undefined;
     rolodexTreeNodeClicked(evt: CustomEvent<NodeClickedEvent>): void;
     rolodexRootFileSelected(evt: CustomEvent<NodeClickedEvent>): void;
     modelTreeNodeClicked(evt: CustomEvent<NodeClickedEvent>): void;
-    explorerNodeClicked(evt: CustomEvent<NodeClickedEvent>): void;
+    explorerNodeClicked(evt: CustomEvent<NodeClickedEvent>, replaceRenderedNode?: boolean): void;
     exportRuleset(): void;
     addToastEvent(event: CustomEvent<AddToastEvent>): void;
     sendToast(toast: Toast): void;
@@ -218,6 +231,7 @@ export declare class TheDoctor extends LitElement {
     builtInRulesetSelected(): void;
     rulesetManuallyChanged(): void;
     specChanged(event: CustomEvent<EditorUpdatedEvent>): void;
+    runDiagnostics(): void;
     boostrap(): void;
     exportJSON(): void;
     exportYAML(): void;
@@ -226,8 +240,11 @@ export declare class TheDoctor extends LitElement {
     selectEditorTab(event: CustomEvent): void;
     selectControlTab(event: CustomEvent): void;
     toggleSidebar(): void;
+    showHistory(): void;
     toggleExplorer(): void;
     hideMinimapIcon(): void;
+    hideDiagnosisButton(): void;
+    enableDiagnosisButton(): void;
     showMinimapIcon(): void;
     closeExplorer(): void;
     render(): import("lit-html").TemplateResult<1>;
@@ -235,4 +252,5 @@ export declare class TheDoctor extends LitElement {
     hideUrlError(): void;
     showUrlError(e: PlatformError): void;
     ungrabExplorer(): void;
+    selectTardis(): void;
 }