@pb33f/cowboy-components 0.7.18 → 0.8.0

package/dist/components/the-doctor/doctor-url-overlay.js

@@ -0,0 +1,82 @@
+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 } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import '@shoelace-style/shoelace/dist/components/icon/icon.js';
+import '@shoelace-style/shoelace/dist/components/button/button.js';
+import '../attention-box/attention-box.js';
+import buttonCss from '../../css/button.css.js';
+import urlOverlayCss from './doctor-url-overlay.css.js';
+export const UrlOverlayDismissed = 'doctor-url-overlay-dismissed';
+let DoctorUrlOverlay = class DoctorUrlOverlay extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.activeURL = '';
+        this.errorCode = 0;
+        this.errorMessage = '';
+        this.mode = 'hidden';
+    }
+    handleDismiss() {
+        this.mode = 'hidden';
+        this.dispatchEvent(new CustomEvent(UrlOverlayDismissed, {
+            bubbles: true,
+            composed: true
+        }));
+    }
+    show() {
+        this.mode = 'loading';
+    }
+    hide() {
+        this.mode = 'hidden';
+    }
+    showError(code, message) {
+        this.errorCode = code;
+        this.errorMessage = message;
+        this.mode = 'error';
+    }
+    render() {
+        const overlayVisible = this.mode !== 'hidden';
+        const spinnerVisible = this.mode === 'loading';
+        const errorVisible = this.mode === 'error';
+        return html `
+            <div id="editor-url-overlay"
+                 class="editor-url-overlay ${overlayVisible ? 'visible' : ''}">
+                <div id="url-spinner" class="${spinnerVisible ? 'visible' : ''}">
+                    <sl-icon name="arrow-repeat" class="url-spinner-icon"></sl-icon>
+                    <h3>Fetching URL</h3>
+                    <p>${this.activeURL}</p>
+                </div>
+
+                <div id="url-problem" class="url-problem ${errorVisible ? 'visible' : ''}">
+                    <pb33f-attention-box type="warning" headerText="Problem with URL">
+                        <h4>Error: ${this.errorCode}</h4>
+                        <p>${this.errorMessage}</p>
+                        <sl-button @click="${this.handleDismiss}">OK</sl-button>
+                        <p></p>
+                    </pb33f-attention-box>
+                </div>
+            </div>
+        `;
+    }
+};
+DoctorUrlOverlay.styles = [buttonCss, urlOverlayCss];
+__decorate([
+    property({ type: String })
+], DoctorUrlOverlay.prototype, "activeURL", void 0);
+__decorate([
+    property({ type: Number })
+], DoctorUrlOverlay.prototype, "errorCode", void 0);
+__decorate([
+    property({ type: String })
+], DoctorUrlOverlay.prototype, "errorMessage", void 0);
+__decorate([
+    property({ type: String })
+], DoctorUrlOverlay.prototype, "mode", void 0);
+DoctorUrlOverlay = __decorate([
+    customElement('pb33f-doctor-url-overlay')
+], DoctorUrlOverlay);
+export { DoctorUrlOverlay };

package/dist/components/the-doctor/nuke-workspace.js

@@ -32,7 +32,8 @@ let NukeWorkspaceComponent = class NukeWorkspaceComponent extends LitElement {
         return html `
             <sl-dialog style="--width: 60vw; --height: 50vh">
                 <span slot="label" style="color: var(--error-color);"><sl-icon name="radioactive"
-                                                                               style="vertical-align: middle">
+                                                                               style="vertical-align: middle"
+                                                                               aria-hidden="true">
                 </sl-icon> Nuke workspace</span>
                 <p style="margin-top: 0; padding-top: 0"><h3>Things get messed up sometimes.</h3></p>
 
@@ -55,8 +56,8 @@ let NukeWorkspaceComponent = class NukeWorkspaceComponent extends LitElement {
                 </p>
                 <hr/>
                 <sl-button class="danger" @click="${this.nuke}">Do it! Destroy it all
-                    <sl-icon name="radioactive" slot="suffix"></sl-icon>
-                    <sl-icon name="radioactive" slot="prefix"></sl-icon>
+                    <sl-icon name="radioactive" slot="suffix" aria-hidden="true"></sl-icon>
+                    <sl-icon name="radioactive" slot="prefix" aria-hidden="true"></sl-icon>
                 </sl-button>
                 <sl-button variant="primary" @click="${this.hide}" style="float: right">Cancel</sl-button>
             </sl-dialog>`;

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

@@ -10,6 +10,8 @@ export default css `
         margin-bottom: 10px;
         padding-bottom: 10px;
         padding-top: 10px;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }    
     small {
         display: block;

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

@@ -11,7 +11,6 @@ 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();
@@ -28,7 +27,7 @@ let DoctorSettings = class DoctorSettings extends LitElement {
     }
     bootstrap() {
         const initial = {
-            autoDiagnose: true,
+            autoDiagnose: false,
             skipTimeline: false,
             applicationVersion: "bootstrap"
         };
@@ -41,6 +40,7 @@ let DoctorSettings = class DoctorSettings extends LitElement {
             return bagSettings;
         }
         this.settings = initial;
+        this.settingsBag.set(SettingsBag, this.settings);
         return this.settings;
     }
     open() {
@@ -73,14 +73,11 @@ let DoctorSettings = class DoctorSettings extends LitElement {
                             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>
+                        <header>PB33F / ROGER MODE</header>
                         <pb33f-theme-switcher></pb33f-theme-switcher>
                         <small>
-                            Switch between light and dark mode (it's going to look bad in light mode) <strong>
+                            Switch between light and dark mode. Dark mode is the default, but if you're color blind 
+                            or you hate the colors, turn them all off. <strong>
                         </small>
                     </div>
                 </div>

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

@@ -3,12 +3,12 @@ import { SlDialog } from "@shoelace-style/shoelace";
 export declare class StatusBar extends LitElement {
     static styles: import("lit").CSSResult[];
     visible: boolean;
-    callsRemaining: number;
+    callsRemaining: number | null;
     authenticated: boolean;
     dialog: SlDialog;
     constructor();
     openDialog(): void;
     closeDialog(): void;
     authenticate(): void;
-    render(): import("lit-html").TemplateResult<1> | undefined;
+    render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/the-doctor/status-bar.js

@@ -15,7 +15,7 @@ let StatusBar = class StatusBar extends LitElement {
     constructor() {
         super();
         this.visible = false;
-        this.callsRemaining = 0;
+        this.callsRemaining = null;
         this.authenticated = false;
     }
     openDialog() {
@@ -30,37 +30,38 @@ let StatusBar = class StatusBar extends LitElement {
         }));
     }
     render() {
-        if (this.visible) {
-            let clazz = '';
-            let clazzIcon = '';
-            let actionText = '';
-            let icon = 'info-square';
-            if (this.callsRemaining > 0 && this.callsRemaining <= 10) {
-                clazz = 'warning';
-                clazzIcon = 'warning-icon';
-                actionText = 'You are running low.';
-                icon = 'exclamation-triangle';
-            }
-            if (this.callsRemaining <= 0) {
-                clazz = 'error';
-                clazzIcon = 'error-icon';
-                actionText = 'You have run out of credit. Service disabled';
-                icon = 'exclamation-square';
-            }
-            return html `
-                <div class="status-bar ${clazz}">
-                    <sl-dialog label="Purchase Credit" class="dialog-overview">
-                        <p>Still working on this, coming soon! Come back tomorrow for more free credit.
-                        </p>
-                        <sl-button slot="footer" variant="primary" @click="${this.closeDialog}">Close</sl-button>
-                    </sl-dialog>
-                    <sl-icon name="${icon}" class="${clazzIcon}"></sl-icon>
-                    <span class="status-text"><strong>Credits remaining: ${this.callsRemaining}</strong></span> | 
-                    <span class="action-text"><strong>${actionText}</strong></span>
-                    ${this.callsRemaining <= 0 && !this.authenticated ? html `| <pb33f-login-button title="Get More Credit" buttonLabel="Authenticate for more credit" textLink></pb33f-login-button>` : ''}
-                    ${this.callsRemaining <= 0 && this.authenticated ? html `| <a href="#" @click="${this.openDialog}"><strong>Purchase Credit</strong></a>` : ''}
-                </div>`;
+        if (!this.visible || this.callsRemaining === null) {
+            return html ``;
         }
+        let clazz = '';
+        let clazzIcon = '';
+        let actionText = '';
+        let icon = 'info-square';
+        if (this.callsRemaining > 0 && this.callsRemaining <= 10) {
+            clazz = 'warning';
+            clazzIcon = 'warning-icon';
+            actionText = 'You are running low.';
+            icon = 'exclamation-triangle';
+        }
+        if (this.callsRemaining <= 0) {
+            clazz = 'error';
+            clazzIcon = 'error-icon';
+            actionText = 'You have run out of credit. Service disabled';
+            icon = 'exclamation-square';
+        }
+        return html `
+            <div class="status-bar ${clazz}">
+                <sl-dialog label="Purchase Credit" class="dialog-overview">
+                    <p>Still working on this, coming soon! Come back tomorrow for more free credit.
+                    </p>
+                    <sl-button slot="footer" variant="primary" @click="${this.closeDialog}">Close</sl-button>
+                </sl-dialog>
+                <sl-icon name="${icon}" class="${clazzIcon}"></sl-icon>
+                <span class="status-text"><strong>Credits remaining: ${this.callsRemaining}</strong></span> |
+                <span class="action-text"><strong>${actionText}</strong></span>
+                ${this.callsRemaining <= 0 && !this.authenticated ? html `| <pb33f-login-button title="Get More Credit" buttonLabel="Authenticate for more credit" textLink></pb33f-login-button>` : ''}
+                ${this.callsRemaining <= 0 && this.authenticated ? html `| <a href="#" @click="${this.openDialog}"><strong>Purchase Credit</strong></a>` : ''}
+            </div>`;
     }
 };
 StatusBar.styles = [statusBarCss, linksCss, buttonCss, dialogCss];

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

@@ -5,6 +5,17 @@ export default css `
         width: 100%;
         height: 100%;
         position: relative;
+        padding-top: 2px;
+    }
+
+    .sidebar-slot-content {
+        display: flex;
+        flex-direction: column;
+        width: calc(100% - 10px);
+        height: 100%;
+        min-height: 0;
+        overflow: hidden;
+        padding-left: 10px
     }
 
     .editor {
@@ -22,7 +33,6 @@ export default css `
         display: block;
         padding-left: 10px;
         overflow: hidden;
-        width: 100%;
         background-color: var(--background-color);
     }
 
@@ -31,8 +41,11 @@ export default css `
     }
 
     .problems-data {
-        height: min-content;
-        max-height: calc(100vh - 75px);
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        max-height: calc(100vh - 100px);
+        overflow: hidden;
     }
     
 
@@ -50,66 +63,6 @@ export default css `
         padding: var(--global-padding);
     }   
     
-    .workspace-icon {
-        font-size: 1.25rem;
-    }
-    
-    .workspace-icon::part(base) {
-        padding: 0;
-    }
-
-    .workspace-icon.active {
-        color: var(--primary-color);
-    }
-
-    .tab.hidden {
-        display: none;
-    }
-
-
-    //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 {
         opacity: 0.4;
         transition: all 0.5s;
@@ -119,28 +72,31 @@ export default css `
         overflow-x: auto;
         overflow-y: auto;
     }
-
-    .model-tree::-webkit-scrollbar {
+    
+    .tree-slot-container {
+        height: 100%;
+    }
+    
+    .model-tree::-webkit-scrollbar, .tree-slot-container::-webkit-scrollbar {
         width: 8px;
         height: 8px;
     }
 
-    .model-tree::-webkit-scrollbar-track {
+    .model-tree::-webkit-scrollbar-track, .tree-slot-container::-webkit-scrollbar {
         background-color: black;
     }
 
-    .model-tree::-webkit-scrollbar-thumb {
+    .model-tree::-webkit-scrollbar-thumb, .tree-slot-container::-webkit-scrollbar {
         box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
         background: var(--secondary-color-lowalpha);
         padding: var(--global-padding);
     }
-
-
-    .split-panel-rolodex {
-        --min: 150px;
-        --max: calc(100% - 150px);
+    
+    
+    .rolodex-tree {
+       height: 100%
     }
-
+    
     .split-panel {
         --min: 550px;
         --max: calc(100vw - 550px);
@@ -148,7 +104,7 @@ export default css `
 
     .split-panel-explorer {
         --min: 30px;
-        --max: 550px;
+        --max: 850px;
         max-width: 100vw;
     }
 
@@ -158,16 +114,16 @@ export default css `
         overflow-y: auto;
     }
 
-    .explorer-panel::-webkit-scrollbar {
+    .explorer-panel::-webkit-scrollbar, .rolodex-tree::-webkit-scrollbar, .model-tree::-webkit-scrollbar {
         width: 8px;
         height: 8px;
     }
 
-    .explorer-panel::-webkit-scrollbar-track {
+    .explorer-panel::-webkit-scrollbar-track, .rolodex-tree::-webkit-scrollbar-track, .model-tree::-webkit-scrollbar {
         background-color: black;
     }
 
-    .explorer-panel::-webkit-scrollbar-thumb {
+    .explorer-panel::-webkit-scrollbar-thumb, .rolodex-tree::-webkit-scrollbar-thumb, .model-tree::-webkit-scrollbar {
         box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
         background: var(--secondary-color-lowalpha);
         padding: var(--global-padding);
@@ -197,6 +153,8 @@ export default css `
         margin-top: 20px;
         padding-top: 0;
         text-align: center;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
 
     .tab-panel {
@@ -241,25 +199,13 @@ export default css `
         text-decoration: underline;
     }
 
-    pb33f-activity-spinner {
-        position: absolute;
-        top: 3px;
-        right: 25px;
-        z-index: 1;
-    }
-
-    .spinner-draw-closed {
-        top: 35px;
-        right: 8px;
-    }
-
     pb33f-toast-manager {
         
         position: absolute;
         top: 10px;
         right: 0;
         z-index: 101;
-        height: calc(100vh - 80px);
+        height: calc(100vh - 112px);
         width: 500px;
         overflow: hidden;
         pointer-events: none;
@@ -283,59 +229,6 @@ export default css `
         padding-top: 3px;
     }
 
-    sl-badge::part(base) {
-        width: 10px;
-        padding: 0;
-        margin-left: 5px;
-        margin-top: 2px;
-        height: 10px;
-    }
-
-    .collapse-side {
-        position: absolute;
-        right: 5px;
-        top: 4px;
-        padding: 0;
-        color: var(--secondary-color);
-        font-size: 1.4rem;
-    }
-
-    sl-icon-button.collapse-side::part(base) {
-        padding: 0;
-    }
-
-    .controls {
-        position: relative;
-        display: flex;
-        margin-left: 0;
-        padding-top: 0;
-        font-size: 0.8rem;
-        height: 24px;
-        border-bottom: 1px dashed var(--secondary-color-dimmer);
-        padding-bottom: 5px;
-        margin-bottom: 5px;
-    }
-
-    .url-input {
-        width: 50%;
-    }
-
-    .url-problem {
-        padding: 50px;
-        display: none;
-    }
-
-    #url-spinner {
-        padding: 5px 50px 5px 50px;
-    }
-
-    .main-view {
-        position: relative;
-        width: 100%;
-        height: calc(100vh - 120px);
-        overflow: auto;
-    }
-
     sl-button.url-input-button::part(base) {
         margin-top: 0;
         margin-left: 10px;
@@ -345,75 +238,6 @@ export default css `
         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);
-    }
-
-    .import-button {
-        border: 0;
-        padding: 0;
-        font-size: 1rem;
-        width: calc(100% - 10px);
-        min-width: 100px;
-    }
-
-    .import-button::part(base) {
-        height: 5px;
-        line-height: 1.2rem;
-        margin-top: 0;
-    }
-
-
-    .settings-toggle {
-        position: absolute;
-        right: 10px;
-        top: -5px;
-        z-index: 10;
-    }
-    
-    .minimap-toggle {
-        position: absolute;
-        right: 40px;
-        top: -5px;
-        z-index: 10;
-    }
-
-    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)
-    }
-    
-    
-    .diagnose-button {
-        position: absolute;
-        right: 80px;
-        top: -5px;
-        z-index: 10;
-        height: 20px;
-    }
-
-    .diagnose-button::part(base) {
-        height: 20px;
-        padding: 0;
-        line-height: 18px;
-    }
-    
     pb33f-credit-ticker {
         position: fixed;
         display: inline-block;
@@ -427,32 +251,17 @@ export default css `
         font-size: 0.8rem;
         color: var(--terminal-text);
         background-color: var(--background-color-withopacity);
-        
     }
-    
-    .url-spinner-icon {
-        display: block;
-        margin: 20px auto 0 auto;
-        width: 200px;
-        color: var(--primary-color);
-        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);
-        }
-        100% {
-            transform: rotate(360deg);
-        }
+
+    .sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
     }
-    
 `;