@pb33f/cowboy-components 0.7.18 → 0.8.0

package/dist/components/terminal-emulator/terminal-emulator.js

@@ -10,6 +10,13 @@ import renderStreamCss from "./terminal-emulator.css.js";
 import '@shoelace-style/shoelace/dist/components/drawer/drawer.js';
 import '@shoelace-style/shoelace/dist/components/format-date/format-date.js';
 import { KVViewComponent } from "../kv-view/kv-view.js";
+export var ConsoleMessageType;
+(function (ConsoleMessageType) {
+    ConsoleMessageType["Info"] = "info";
+    ConsoleMessageType["Error"] = "error";
+    ConsoleMessageType["Warning"] = "warning";
+    ConsoleMessageType["Success"] = "success";
+})(ConsoleMessageType || (ConsoleMessageType = {}));
 let TerminalEmulator = class TerminalEmulator extends LitElement {
     constructor() {
         super();
@@ -36,11 +43,11 @@ let TerminalEmulator = class TerminalEmulator extends LitElement {
         let errorChevron = html `<span class="chevron">🔴</span>`;
         let fish = html `${this.messages.map((msg) => {
             c++;
-            const isError = msg.type === 'error';
+            const isError = msg.type === ConsoleMessageType.Error;
             let chev = chevron;
             let className = msg.type;
             if (isError) {
-                className = 'error';
+                className = ConsoleMessageType.Error;
                 chev = errorChevron;
             }
             const time = html `<span class="date">[<sl-format-date date='${msg.timestamp}' hour="numeric" minute="numeric"></sl-format-date>]</span>`;
@@ -70,9 +77,7 @@ let TerminalEmulator = class TerminalEmulator extends LitElement {
             return html `<span class="message ${className}">${chev} ${time} <span class="message-body">${msg.message}</span></span>${meta}`;
         })}`;
         return html `
-                <sl-drawer contained id="terminal-drawer" label="${this.label}" placement="bottom" open>
-                    <div class="render-stream">${fish}</div>
-                </sl-drawer>
+            <div class="render-stream">${fish}</div>
            `;
     }
 };

package/dist/components/the-doctor/doctor-controls-panel.css.d.ts

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

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

@@ -0,0 +1,53 @@
+import { css } from "lit";
+export default css `
+    :host {
+        display: block;
+    }
+
+    .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;
+    }
+
+    .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;
+        border: 1px solid var(--warn-color);
+        color: var(--warn-color)
+    }
+
+    .import-button::part(base):hover {
+        background-color: var(--warn-color);
+        border: 1px solid var(--warn-color);
+        color: var(--background-color)
+    }
+
+    .nuke-session-button {
+        font-size: 1.4rem;
+        margin: 0 10px 0 10px;
+    }
+
+    .nuke-session-button::part(base) {
+        padding: 0;
+    }
+
+    .nuke-session-button::part(base):hover {
+        color: var(--error-color);
+    }
+`;

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

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+import '@shoelace-style/shoelace/dist/components/button/button.js';
+import '@shoelace-style/shoelace/dist/components/icon-button/icon-button.js';
+import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
+import '../premium-gate/premium-gate.js';
+export declare const ImportRequested = "doctor-import-requested";
+export declare const NukeRequested = "doctor-nuke-requested";
+export declare class DoctorControlsPanel extends LitElement {
+    static styles: import("lit").CSSResult[];
+    importDisabled: boolean;
+    workspaceReadOnly: boolean;
+    private handleImportClick;
+    private handleNukeClick;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pb33f-doctor-controls-panel': DoctorControlsPanel;
+    }
+}

package/dist/components/the-doctor/doctor-controls-panel.js

@@ -0,0 +1,78 @@
+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/button/button.js';
+import '@shoelace-style/shoelace/dist/components/icon-button/icon-button.js';
+import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
+import '../premium-gate/premium-gate.js';
+import buttonCss from '../../css/button.css.js';
+import tooltipCss from '../../css/tooltip.css.js';
+import controlsPanelCss from './doctor-controls-panel.css.js';
+export const ImportRequested = 'doctor-import-requested';
+export const NukeRequested = 'doctor-nuke-requested';
+let DoctorControlsPanel = class DoctorControlsPanel extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.importDisabled = false;
+        this.workspaceReadOnly = false;
+    }
+    handleImportClick() {
+        if (!this.importDisabled && !this.workspaceReadOnly) {
+            this.dispatchEvent(new CustomEvent(ImportRequested, {
+                bubbles: true,
+                composed: true
+            }));
+        }
+    }
+    handleNukeClick() {
+        this.dispatchEvent(new CustomEvent(NukeRequested, {
+            bubbles: true,
+            composed: true
+        }));
+    }
+    render() {
+        const importTooltip = this.workspaceReadOnly
+            ? "Import disabled - workspace is read-only"
+            : "Upload zip file or tar.gz (tarball)";
+        return html `
+            <div class="controls">
+                <pb33f-premium-gate dialogTitle="Show us your credentials, partner"
+                                    featureName="Import OpenAPI Spec"
+                                    featureExplanation="Howdy! In order to import an OpenAPI specification, we're going to need you to authenticate first. Tell us who you are, and we will give you a bunch of free credit to use.">
+                    <sl-tooltip content="${importTooltip}" placement="top">
+                        <sl-button ?disabled=${this.importDisabled || this.workspaceReadOnly}
+                                   class="import-button"
+                                   variant="text"
+                                   size="small"
+                                   @click="${this.handleImportClick}">
+                            Import
+                        </sl-button>
+                    </sl-tooltip>
+                </pb33f-premium-gate>
+                <sl-tooltip content="Nuke / reset workspace" placement="top">
+                    <sl-icon-button class="nuke-session-button"
+                                    name="radioactive"
+                                    label="Nuke session"
+                                    @click="${this.handleNukeClick}">
+                    </sl-icon-button>
+                </sl-tooltip>
+            </div>
+        `;
+    }
+};
+DoctorControlsPanel.styles = [buttonCss, tooltipCss, controlsPanelCss];
+__decorate([
+    property({ type: Boolean })
+], DoctorControlsPanel.prototype, "importDisabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], DoctorControlsPanel.prototype, "workspaceReadOnly", void 0);
+DoctorControlsPanel = __decorate([
+    customElement('pb33f-doctor-controls-panel')
+], DoctorControlsPanel);
+export { DoctorControlsPanel };

package/dist/components/the-doctor/doctor-editor-panel.css.d.ts

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

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

@@ -0,0 +1,209 @@
+import { css } from "lit";
+export default css `
+    :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+        min-width: 500px;
+        min-height: 300px;
+        position: relative;
+    }
+
+    .editor-toolbar {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 10;
+        display: flex;
+        align-items: center;
+        gap: 5px;
+    }
+
+    .settings-toggle {
+        position: absolute;
+        right: 0;
+        top: -5px;
+        z-index: 1;
+    }
+
+    .minimap-toggle {
+        position: absolute;
+        right: 30px;
+        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(--primary-color);
+    }
+
+    .diagnose-button {
+        position: absolute;
+        right: 70px;
+        top: 0;
+        z-index: 10;
+        border: 1px solid var(--primary-color);
+        height: 22px;
+        background-color: var(--background-color);
+    }
+
+    .diagnose-button::part(base) {
+        padding: 0 8px;
+        border: none;
+        background: transparent;
+        min-height: unset;
+        margin-top: 0;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .diagnose-button:hover {
+        background-color: var(--primary-color);
+    }
+
+    .diagnose-button:hover::part(base) {
+        background: transparent;
+        color: var(--background-color);
+    }
+
+    .diagnose-button:active {
+        border-color: var(--primary-color);
+    }
+
+    .diagnose-button:active::part(base) {
+        border: none;
+        background: transparent;
+    }
+
+    .diagnose-button.dirty {
+        color: var(--warn-color);
+        border: 1px solid var(--warn-color);
+        animation: diagnose-pulse 1.5s infinite;
+    }
+
+    .diagnose-button.dirty::part(base) {
+        border: none;
+        color: var(--warn-color);
+        background: transparent;
+    }
+
+    .diagnose-button.dirty:hover {
+        animation: none;
+        background-color: var(--warn-color);
+    }
+
+    .diagnose-button.dirty:hover::part(base) {
+        background: transparent;
+        color: var(--background-color);
+    }
+
+    .diagnose-button.dirty:active {
+        border-color: var(--warn-color);
+    }
+
+    .diagnose-button.dirty:active::part(base) {
+        border: none;
+        background: transparent;
+    }
+
+    @keyframes diagnose-pulse {
+        0% {
+            box-shadow: 0 0 0 0 var(--warn-color);
+        }
+        100% {
+            box-shadow: 0 0 0 8px transparent;
+        }
+    }
+
+    .activity-spinner-container {
+        position: absolute;
+        top: 3px;
+        right: 185px;
+        z-index: 10;
+    }
+
+    .activity-spinner-container.no-diagnose-button {
+        right: 65px;
+    }
+
+    .tab-group {
+        --indicator-color: var(--secondary-color);
+    }
+
+    sl-tab-group {
+        display: flex;
+        flex-direction: column;
+        height: calc(100vh - 132px);
+    }
+
+    sl-tab-group::part(tabs) {
+        height: 30px;
+    }
+
+    sl-tab-group::part(body) {
+        flex: 1;
+        overflow: hidden;
+    }
+
+    sl-tab-panel::part(base) {
+        height: 100%;
+        padding-top: 5px;
+    }
+
+    .tab::part(base) {
+        font: var(--font-stack);
+        font-size: 0.9rem;
+        padding: 0 0.8rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    .tab.hidden {
+        display: none;
+    }
+
+    .workspace-icon {
+        font-size: 1.25rem;
+    }
+
+    .workspace-icon::part(base) {
+        padding: 0;
+    }
+
+    .workspace-icon.active {
+        color: var(--primary-color);
+    }
+
+    .main-view {
+        position: relative;
+        width: 100%;
+        height: calc(100vh - 120px);
+        overflow: auto;
+    }
+
+    sl-badge::part(base) {
+        width: 10px;
+        padding: 0;
+        margin-left: 5px;
+        margin-top: 2px;
+        height: 10px;
+    }
+
+    ::slotted([slot="spec-editor"]),
+    ::slotted([slot="ruleset-editor"]),
+    ::slotted([slot="explorer"]),
+    ::slotted([slot="workspaces"]) {
+        flex: 1;
+        min-height: 0;
+    }
+`;

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

@@ -0,0 +1,41 @@
+import { LitElement } from 'lit';
+import '@shoelace-style/shoelace/dist/components/tab-group/tab-group.js';
+import '@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.js';
+import '@shoelace-style/shoelace/dist/components/tab/tab.js';
+import '@shoelace-style/shoelace/dist/components/icon-button/icon-button.js';
+import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
+import '@shoelace-style/shoelace/dist/components/button/button.js';
+import '@shoelace-style/shoelace/dist/components/badge/badge.js';
+import { SlTabGroup } from '@shoelace-style/shoelace';
+export declare const EditorTabChanged = "editor-panel-tab-changed";
+export declare const DiagnoseRequested = "editor-panel-diagnose-requested";
+export declare const MinimapToggled = "editor-panel-minimap-toggled";
+export declare const SettingsRequested = "editor-panel-settings-requested";
+export interface EditorTabChangedEvent {
+    name: string;
+}
+export declare class DoctorEditorPanel extends LitElement {
+    static styles: import("lit").CSSResult[];
+    authenticated: boolean;
+    minimapVisible: boolean;
+    minimapIconVisible: boolean;
+    showDiagnosisButton: boolean;
+    autoDiagnose: boolean;
+    editorDirty: boolean;
+    selectedEditorTab: string;
+    rulesetPulse: boolean;
+    tabGroup?: SlTabGroup;
+    showTab(panel: string): void;
+    private handleTabShow;
+    private handleDiagnoseClick;
+    private handleMinimapToggle;
+    private handleSettingsClick;
+    private renderDiagnoseButton;
+    private renderRulesetPulse;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pb33f-doctor-editor-panel': DoctorEditorPanel;
+    }
+}

package/dist/components/the-doctor/doctor-editor-panel.js

@@ -0,0 +1,188 @@
+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, nothing } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import '@shoelace-style/shoelace/dist/components/tab-group/tab-group.js';
+import '@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.js';
+import '@shoelace-style/shoelace/dist/components/tab/tab.js';
+import '@shoelace-style/shoelace/dist/components/icon-button/icon-button.js';
+import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
+import '@shoelace-style/shoelace/dist/components/button/button.js';
+import '@shoelace-style/shoelace/dist/components/badge/badge.js';
+import buttonCss from '../../css/button.css.js';
+import tooltipCss from '../../css/tooltip.css.js';
+import editorPanelCss from './doctor-editor-panel.css.js';
+export const EditorTabChanged = 'editor-panel-tab-changed';
+export const DiagnoseRequested = 'editor-panel-diagnose-requested';
+export const MinimapToggled = 'editor-panel-minimap-toggled';
+export const SettingsRequested = 'editor-panel-settings-requested';
+let DoctorEditorPanel = class DoctorEditorPanel extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.authenticated = false;
+        this.minimapVisible = true;
+        this.minimapIconVisible = true;
+        this.showDiagnosisButton = false;
+        this.autoDiagnose = false;
+        this.editorDirty = false;
+        this.selectedEditorTab = 'spec';
+        this.rulesetPulse = false;
+    }
+    showTab(panel) {
+        this.tabGroup?.show(panel);
+    }
+    handleTabShow(event) {
+        this.dispatchEvent(new CustomEvent(EditorTabChanged, {
+            detail: { name: event.detail.name },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    handleDiagnoseClick() {
+        this.dispatchEvent(new CustomEvent(DiagnoseRequested, {
+            bubbles: true,
+            composed: true
+        }));
+    }
+    handleMinimapToggle() {
+        this.dispatchEvent(new CustomEvent(MinimapToggled, {
+            bubbles: true,
+            composed: true
+        }));
+    }
+    handleSettingsClick() {
+        this.dispatchEvent(new CustomEvent(SettingsRequested, {
+            bubbles: true,
+            composed: true
+        }));
+    }
+    renderDiagnoseButton() {
+        if (this.autoDiagnose || !this.showDiagnosisButton) {
+            return nothing;
+        }
+        return html `
+            <sl-button class="diagnose-button ${this.editorDirty ? 'dirty' : ''}"
+                       @click="${this.handleDiagnoseClick}"
+                       size="small">
+                DIAGNOSE
+            </sl-button>
+        `;
+    }
+    renderRulesetPulse() {
+        if (!this.rulesetPulse) {
+            return nothing;
+        }
+        return html `<sl-badge pulse></sl-badge>`;
+    }
+    render() {
+        const hideDiagnose = this.autoDiagnose || !this.showDiagnosisButton;
+        return html `
+            <slot name="settings"></slot>
+
+            <sl-tooltip class="minimap-tip" content="Toggle source mini-map" hoist
+                        style="${!this.minimapIconVisible ? 'display: none' : ''}">
+                <sl-icon-button @click="${this.handleMinimapToggle}"
+                                name="map"
+                                label="Toggle minimap"
+                                class="minimap-toggle ${this.minimapVisible ? 'active' : ''}"
+                                style="${!this.minimapIconVisible ? 'display: none' : ''}"></sl-icon-button>
+            </sl-tooltip>
+
+            <sl-tooltip class="settings-tip" content="Open settings for the doctor" hoist>
+                <sl-icon-button @click="${this.handleSettingsClick}"
+                                name="gear"
+                                label="Open settings"
+                                class="settings-toggle"></sl-icon-button>
+            </sl-tooltip>
+
+            ${this.renderDiagnoseButton()}
+
+            <div class="activity-spinner-container ${hideDiagnose ? 'no-diagnose-button' : ''}">
+                <slot name="activity-spinner"></slot>
+            </div>
+
+            <slot name="generic-drawer"></slot>
+
+            <sl-tab-group class="tab-group" @sl-tab-show="${this.handleTabShow}">
+                ${this.authenticated ? html `
+                    <sl-tab slot="nav" panel="workspaces" class="tab">
+                        <sl-icon-button name="person-workspace"
+                                        label="Workspaces"
+                                        class="workspace-icon ${this.selectedEditorTab === 'workspaces' ? 'active' : ''}"></sl-icon-button>
+                    </sl-tab>
+                ` : nothing}
+
+                <sl-tab slot="nav" panel="spec" class="tab" active>OpenAPI Spec</sl-tab>
+                <sl-tab slot="nav" panel="explorer" class="tab">Explorer</sl-tab>
+                <sl-tab slot="nav" panel="tardis" class="tab">History</sl-tab>
+                <sl-tab slot="nav" panel="ruleset" class="tab">Ruleset ${this.renderRulesetPulse()}</sl-tab>
+                <sl-tab slot="nav" panel="docs" class="tab">API Docs</sl-tab>
+
+                <sl-tab-panel name="spec" class="tab-panel">
+                    <div class="main-view">
+                        <slot name="status-bar"></slot>
+                        <slot name="url-overlay"></slot>
+                        <slot name="spec-editor"></slot>
+                    </div>
+                </sl-tab-panel>
+
+                <sl-tab-panel name="ruleset" class="tab-panel">
+                    <slot name="ruleset-editor"></slot>
+                </sl-tab-panel>
+
+                <sl-tab-panel name="explorer" class="tab-panel">
+                    <slot name="explorer"></slot>
+                </sl-tab-panel>
+
+                <sl-tab-panel name="tardis" class="tab-panel">
+                    <slot name="tardis-control"></slot>
+                </sl-tab-panel>
+
+                <sl-tab-panel name="docs" class="tab-panel" style="height: calc(100vh - 100px)">
+                </sl-tab-panel>
+
+                ${this.authenticated ? html `
+                    <sl-tab-panel name="workspaces" class="tab-panel">
+                        <slot name="workspaces"></slot>
+                    </sl-tab-panel>
+                ` : nothing}
+            </sl-tab-group>
+        `;
+    }
+};
+DoctorEditorPanel.styles = [buttonCss, tooltipCss, editorPanelCss];
+__decorate([
+    property({ type: Boolean })
+], DoctorEditorPanel.prototype, "authenticated", void 0);
+__decorate([
+    property({ type: Boolean })
+], DoctorEditorPanel.prototype, "minimapVisible", void 0);
+__decorate([
+    property({ type: Boolean })
+], DoctorEditorPanel.prototype, "minimapIconVisible", void 0);
+__decorate([
+    property({ type: Boolean })
+], DoctorEditorPanel.prototype, "showDiagnosisButton", void 0);
+__decorate([
+    property({ type: Boolean })
+], DoctorEditorPanel.prototype, "autoDiagnose", void 0);
+__decorate([
+    property({ type: Boolean })
+], DoctorEditorPanel.prototype, "editorDirty", void 0);
+__decorate([
+    property({ type: String })
+], DoctorEditorPanel.prototype, "selectedEditorTab", void 0);
+__decorate([
+    property({ type: Boolean })
+], DoctorEditorPanel.prototype, "rulesetPulse", void 0);
+__decorate([
+    query('sl-tab-group')
+], DoctorEditorPanel.prototype, "tabGroup", void 0);
+DoctorEditorPanel = __decorate([
+    customElement('pb33f-doctor-editor-panel')
+], DoctorEditorPanel);
+export { DoctorEditorPanel };

package/dist/components/the-doctor/doctor-navigator-panel.css.d.ts

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