@pb33f/cowboy-components 0.3.3 → 0.3.5

package/dist/components/manage-ruleset/manage-ruleset.js

@@ -507,7 +507,6 @@ let ManageRuleset = class ManageRuleset extends LitElement {
         // if sortSeverity or sortAlpha is true, sort the ruleset by alpha or severity, or both starting
         // with severity and then alpha
         if (this.sortSeverity && !this._noSort) {
-            console.log('yeah man');
             this._activeRuleset?.sort((a, b) => {
                 if (a && b) {
                     if (a.rule && b.rule) {
@@ -569,12 +568,16 @@ let ManageRuleset = class ManageRuleset extends LitElement {
                 </div>
             `;
             sortByAlpha = html `<div class="sort-by-alpha">
-                <sl-icon-button @click="${() => { this.sortAlpha = !this.sortAlpha; }}" 
-                        name="${this.sortAlpha ? 'sort-alpha-down' : 'sort-alpha-down-alt'}" class="sort"></sl-icon-button>    
+                <sl-tooltip content="Sort alphabetically" placement="top">
+                    <sl-icon-button @click="${() => { this.sortAlpha = !this.sortAlpha; }}" 
+                        name="${this.sortAlpha ? 'sort-alpha-down' : 'sort-alpha-down-alt'}" class="sort"></sl-icon-button>
+                </sl-tooltip>
             </div>`;
             sortBySeverity = html `<div class="sort-by-severity">
-                <sl-icon-button @click="${() => { this.sortSeverity = !this.sortSeverity; }}" 
+                <sl-tooltip content="Sort by severity" placement="top">
+                    <sl-icon-button @click="${() => { this.sortSeverity = !this.sortSeverity; }}" 
                         name="${this.sortSeverity ? 'sort-down-alt' : 'sort-down'}" class="sort"></sl-icon-button>
+                </sl-tooltip>
             </div>`;
         }
         let rules = html `

package/dist/components/paginator/paginator-navigator.js

@@ -90,6 +90,9 @@ let PaginatorNavigation = class PaginatorNavigation extends LitElement {
         }
     }
     render() {
+        if (this.totalItems == 0) {
+            return html ``;
+        }
         if (this.currentPage == 1) {
             this.togglePrev(true);
         }

package/dist/components/paginator/paginator.css.js

@@ -21,18 +21,21 @@ export default css `
     }
     
     .no-values {
-        width: 400px;
-        margin: 50px auto;
+        width: 500px;
+        margin: 0 auto;
+        padding-top: 50px;
         text-align: center;
         font-size: 1.9em;
         color: var(--font-color-sub3);
         font-family: var(--font-stack-bold), monospace;
+        overflow-y: hidden;
         
     }
     
     .no-values sl-icon {
         margin-bottom: 30px;
         font-size: 5em;
+       
     }
    
 `;

package/dist/components/paginator/paginator.d.ts

@@ -9,6 +9,7 @@ export declare class Paginator extends LitElement {
     label: string;
     activeIndex: number;
     private renderValues;
+    private sparks;
     private paginatorNavigator;
     constructor();
     nextPage(event: CustomEvent): void;

package/dist/components/paginator/paginator.js

@@ -9,9 +9,11 @@ import { html, LitElement } from "lit";
 import { PaginatorNavigation } from "./paginator-navigator.js";
 import { PaginatorFirstPage, PaginatorLastPage, PaginatorNextPage, PaginatorPreviousPage } from "./paginator-events.js";
 import paginatorCss from "./paginator.css.js";
+import { PixelSparks } from "../the-doctor/sparks";
 let Paginator = class Paginator extends LitElement {
     constructor() {
         super();
+        this.sparks = new PixelSparks();
         this.currentPage = 1;
         this.totalPages = 1;
         this.totalItems = 0;
@@ -80,11 +82,15 @@ let Paginator = class Paginator extends LitElement {
         this.renderValues = this.values?.slice(this.paginatorNavigator.getRangeStart(), this.paginatorNavigator.getRangeEnd());
     }
     render() {
+        let sparks = new PixelSparks();
         if (this.renderValues?.length === 0 || !this.renderValues) {
-            return html `<div class="no-values">
-                <sl-icon name="x-square"></sl-icon><br/>
+            return html `
+                <div class="no-values" style="position: relative">
+                    <div style="position: absolute; width: 100%; top: -50px; left: 0;">${this.sparks}</div>
+                    <sl-icon name="x-square"></sl-icon><br/>
                 no results
-            </div>`;
+            </div>
+            `;
         }
         return html `
             ${this.paginatorNavigator}

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

@@ -0,0 +1,17 @@
+import { LitElement } from "lit";
+export declare class PixelSparks extends LitElement {
+    private sparkArray;
+    private readonly gravity;
+    private readonly spawnRate;
+    private ctx;
+    private canvas;
+    static styles: import("lit").CSSResult;
+    constructor();
+    firstUpdated(): void;
+    startAnimation(): void;
+    getRandomBetween(min: number, max: number): number;
+    spawnSpark(): void;
+    animateSparks(): void;
+    drawSpark(spark: any): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,81 @@
+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 { customElement } from "lit/decorators.js";
+import { css, html, LitElement } from "lit";
+let PixelSparks = class PixelSparks extends LitElement {
+    constructor() {
+        super();
+        this.sparkArray = [];
+        this.gravity = 0.0001;
+        this.spawnRate = 70;
+    }
+    firstUpdated() {
+        const canvas = this.renderRoot.querySelector('canvas');
+        if (canvas) {
+            this.canvas = canvas;
+            const ctx = this.canvas?.getContext('2d');
+            if (ctx) {
+                this.ctx = ctx;
+            }
+        }
+        this.startAnimation();
+    }
+    startAnimation() {
+        setInterval(() => this.spawnSpark(), 1000 / this.spawnRate);
+        this.animateSparks();
+    }
+    getRandomBetween(min, max) {
+        return Math.random() * (max - min) + min;
+    }
+    spawnSpark() {
+        this.sparkArray.push({
+            x: Math.random() * this.canvas.width,
+            y: -2,
+            size: 1,
+            color: Math.random() > 0.5 ? 'rgb(248, 58, 255)' : 'rgb(98, 196, 255)',
+            velocityY: this.getRandomBetween(0.05, 0.3),
+            lifetime: 300,
+            initialLifetime: 300,
+            opacity: 1
+        });
+    }
+    animateSparks() {
+        this.ctx?.clearRect(0, 0, this.canvas?.width, this.canvas?.height);
+        this.sparkArray = this.sparkArray.filter(spark => spark.lifetime > 0);
+        for (let spark of this.sparkArray) {
+            this.drawSpark(spark);
+            spark.y += spark.velocityY;
+            spark.velocityY += this.gravity; // Apply gravity
+            spark.lifetime--;
+            spark.opacity = spark.lifetime / spark.initialLifetime;
+        }
+        requestAnimationFrame(() => this.animateSparks());
+    }
+    drawSpark(spark) {
+        this.ctx.globalAlpha = spark.opacity; // Set transparency level
+        this.ctx.fillStyle = spark.color;
+        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
+    }
+    render() {
+        return html `
+            <canvas width="100%" height="100%"></canvas>`;
+    }
+};
+PixelSparks.styles = css `
+        canvas {
+            width: 100%;
+            height: 100%;
+            image-rendering: pixelated; /* Ensures pixelated appearance */
+        }
+    `;
+PixelSparks = __decorate([
+    customElement('pb33f-pixel-sparks')
+], PixelSparks);
+export { PixelSparks };

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

@@ -24,11 +24,11 @@ export default css `
         overflow: hidden;
         width: 100%;
     }
-    
+
     #manager-controls::part(nav) {
-        max-width: 96%;        
+        max-width: 96%;
     }
-    
+
     .problems-data {
         height: min-content;
         max-height: calc(100vh - 50px);
@@ -50,7 +50,7 @@ export default css `
 
 
     sl-split-panel {
-        width:100%;
+        width: 100%;
         height: 100%;
         --divider-width: 2px;
     }
@@ -79,13 +79,13 @@ export default css `
         background-color: var(--primary-color);
         color: var(--background-color);
     }
-    
+
 
     .unavailable {
         opacity: 0.4;
         transition: all 0.5s;
     }
-    
+
     .model-tree {
         height: calc(100vh - 95px);
         overflow-x: auto;
@@ -106,8 +106,8 @@ export default css `
         background: var(--secondary-color-lowalpha);
         padding: var(--global-padding);
     }
-    
-    
+
+
     .split-panel {
         --min: 550px;
         --max: calc(100vw - 550px);
@@ -118,10 +118,10 @@ export default css `
         --max: 550px;
         max-width: 100vw;
     }
-    
+
     .explorer-panel {
         height: calc(100vh - 85px);
-        width: 100%; 
+        width: 100%;
         overflow-y: auto;
     }
 
@@ -139,8 +139,8 @@ export default css `
         background: var(--secondary-color-lowalpha);
         padding: var(--global-padding);
     }
-    
-    
+
+
     .overlay {
         width: 100%;
         opacity: 1;
@@ -159,27 +159,27 @@ export default css `
         margin-left: 10px;
         margin-right: 10px;
     }
-    
+
     h3.loading {
         margin-top: 20px;
         padding-top: 0;
         text-align: center;
     }
-    
-   .tab-panel {
-       height: calc(100vh - 110px);
-   }
 
-   sl-tab-panel.tab-panel::part(base) {
+    .tab-panel {
+        height: calc(100vh - 110px);
+    }
+
+    sl-tab-panel.tab-panel::part(base) {
         height: 100%;
-        padding-top:5px;
+        padding-top: 5px;
     }
-    
+
     sl-tab-panel::part(base) {
         height: 100%;
-        padding-top:5px;
+        padding-top: 5px;
     }
-    
+
     sl-switch::part(label) {
         font-family: var(--font-stack), monospace;
     }
@@ -208,7 +208,7 @@ export default css `
         top: 3px;
         right: 25px;
     }
-    
+
     .spinner-draw-closed {
         top: 35px;
         right: 8px;
@@ -230,11 +230,11 @@ export default css `
         display: flex;
         margin-bottom: 20px;
     }
-    
+
     .right {
         text-align: right;
     }
-    
+
     .export-block {
         width: 50%;
     }
@@ -243,7 +243,7 @@ export default css `
         margin-left: 20px;
         padding-top: 3px;
     }
-    
+
     sl-badge::part(base) {
         width: 10px;
         padding: 0;
@@ -251,6 +251,7 @@ export default css `
         margin-top: 2px;
         height: 10px;
     }
+    
     .collapse-side {
         position: absolute;
         right: 5px;
@@ -259,8 +260,55 @@ export default css `
         color: var(--secondary-color);
         font-size: 1.4rem;
     }
+
     sl-icon-button.collapse-side::part(base) {
         padding: 0;
     }
+
+    .controls {
+        display: flex;
+        margin-left: 10px;
+        padding-top: 2px;
+        font-size: 0.8rem;
+        height: 38px;
+        border-bottom: 1px dashed var(--secondary-color-dimmer);
+    }
+
+    .url-input {
+        width: 50%;
+    }
+    
+    .url-problem {
+        padding: 50px;
+        display: none;
+    }
+    
+    #url-spinner {
+        padding: 5px 50px 5px 50px;
+    }
+    
+    .main-view {
+       position: relative;
+        width: 100%;
+        height: 100%;
+    }
+
+    sl-button.url-input-button::part(base) {
+        margin-top: 0;
+        margin-left: 10px;
+    }
+    
+    .editor-url-overlay {
+        position: absolute;
+        height: calc(100% - 5px); 
+        width: 100%;
+        left: 0;
+        top: 0;
+        z-index: 3;
+        display: none;
+        backdrop-filter: blur(2px);
+        -webkit-backdrop-filter: blur(2px);
+        background-color: var(--background-color-withopacity);
+    }
     
 `;

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

@@ -10,7 +10,8 @@ import '@shoelace-style/shoelace/dist/components/avatar/avatar.js';
 import { LitElement } from "lit";
 import { AddToastEvent, EditorUpdatedEvent, ProblemRuleFilterChangedEvent, RulesetSavedEvent, RuleClickedEvent, NodeClickedEvent, NodeReferenceEvent, ExplorerEqualizerChangedEvent } from "../../events/doctor.js";
 import { ProblemDrawerEvent } from "../problem-list/details-drawer.js";
-import { SlDialog, SlIcon, SlRadioGroup, SlSplitPanel, SlTab, SlTabGroup } from "@shoelace-style/shoelace";
+import { SlButton, SlDialog, SlIcon, SlInput, SlRadioGroup, SlSplitPanel, SlTab, SlTabGroup } from "@shoelace-style/shoelace";
+import { PlatformError } from "../../model/errors.js";
 import { AttentionBox } from "../attention-box/attention-box.js";
 import { Toast } from "../../model/toast.js";
 import SlIconButton from "@shoelace-style/shoelace/dist/components/icon-button/icon-button.js";
@@ -18,6 +19,7 @@ import { Node } from "../../model/graph.js";
 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";
 export declare const GraphBag = "pb33f-doctor-graph";
 export declare const DoctorDocumentBag = "pb33f-doctor-editor";
 export declare const HowToFixBag = "pb33f-doctor-howtofix";
@@ -48,6 +50,8 @@ export declare class TheDoctor extends LitElement {
     downloadRulesetLink: HTMLAnchorElement;
     loadingOverlay: SlDialog;
     problemsDataDiv: HTMLDivElement;
+    urlInputButton: SlButton;
+    urlInput: SlInput;
     private unavailable;
     doctorEndpoint: string;
     exportRulesetDialog: SlDialog;
@@ -57,6 +61,7 @@ export declare class TheDoctor extends LitElement {
     private rulesetPulse;
     explorerVisible: boolean;
     explorerBooted: boolean;
+    activeURL: string;
     private readonly errorBanner;
     private bagManager;
     private readonly editor;
@@ -108,9 +113,23 @@ export declare class TheDoctor extends LitElement {
     filteredNodes: Map<string, Node>;
     renderedNode: RenderedNodeComponent;
     activeNode: Node;
+    private readonly bus;
+    private readonly specStreamChannel;
+    private readonly doctorServiceChannel;
+    private specChannelSubscription;
+    private doctorChannelSubscription;
+    private brokerConnectionId;
+    private readonly busPort;
+    private readonly busHost;
+    private readonly busVersion;
+    private useTLS;
     readonly nodeLimit: number;
     constructor(doctorEndpoint?: string);
+    whoAmI(): void;
+    protected connectToBroker(): void;
     addClickTrack(node: Node): void;
+    doctorServiceHandler(): BusCallback<CommandResponse>;
+    specStreamHandler(): BusCallback<CommandResponse>;
     filterTreeModel(event: CustomEvent<ExplorerEqualizerChangedEvent>): void;
     explorerReferenceClicked(evt: CustomEvent<NodeReferenceEvent>): void;
     modelTreeNodeClicked(evt: CustomEvent<NodeClickedEvent>): void;
@@ -151,5 +170,14 @@ export declare class TheDoctor extends LitElement {
     toggleExplorer(): void;
     closeExplorer(): void;
     render(): import("lit-html").TemplateResult<1>;
+    fetchUrl(): void;
+    urlOverlay: HTMLElement;
+    urlProblem: HTMLElement;
+    urlSpinner: HTMLDivElement;
+    urlErrorCode: number;
+    urlErrorMessage: string;
+    hideUrlError(): void;
+    showUrlError(e: PlatformError): void;
+    validateUrl(evt: KeyboardEvent): void;
     ungrabExplorer(): void;
 }