@pb33f/cowboy-components 0.14.1 → 0.15.0

package/dist/components/rodeo/roundup.js

@@ -49,6 +49,14 @@ let RodeoRoundup = class RodeoRoundup extends LitElement {
             this.numGitHubRepositories = stats.gitHubRepositories;
             this.numTimelines = stats.timelines;
             this.numSpecChanges = stats.specChanges;
+            // docs
+            this.numDocsGenerated = stats.docsGenerated;
+            this.numDocsActive = stats.docsActive;
+            this.numDocsEphemeral = stats.docsEphemeral;
+            this.numDocsExpired = stats.docsExpired;
+            this.numDocsZipExports = stats.docsZipExports;
+            this.numDocsTarGzExports = stats.docsTarGzExports;
+            this.numDocsArchiveDownloads = stats.docsArchiveDownloads;
             // cache
             this.cachedAt = stats.cachedAt;
         });
@@ -115,6 +123,17 @@ let RodeoRoundup = class RodeoRoundup extends LitElement {
                 <pb33f-rodeo-statistic title="Spec Changes" value="${this.numSpecChanges}"></pb33f-rodeo-statistic>
             </div>
 
+            <div class="section-label">Docs</div>
+            <div class="roundup">
+                <pb33f-rodeo-statistic title="Generated" value="${this.numDocsGenerated}"></pb33f-rodeo-statistic>
+                <pb33f-rodeo-statistic title="Active" value="${this.numDocsActive}"></pb33f-rodeo-statistic>
+                <pb33f-rodeo-statistic title="Ephemeral" value="${this.numDocsEphemeral}"></pb33f-rodeo-statistic>
+                <pb33f-rodeo-statistic title="Expired" value="${this.numDocsExpired}"></pb33f-rodeo-statistic>
+                <pb33f-rodeo-statistic title="Zip Exports" value="${this.numDocsZipExports}"></pb33f-rodeo-statistic>
+                <pb33f-rodeo-statistic title="Tarball Exports" value="${this.numDocsTarGzExports}"></pb33f-rodeo-statistic>
+                <pb33f-rodeo-statistic title="Archive Downloads" value="${this.numDocsArchiveDownloads}"></pb33f-rodeo-statistic>
+            </div>
+
             <div class="emulator">
                 ${this.terminalEmulator}
             </div>
@@ -216,6 +235,27 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], RodeoRoundup.prototype, "numSpecChanges", void 0);
+__decorate([
+    property({ type: Number })
+], RodeoRoundup.prototype, "numDocsGenerated", void 0);
+__decorate([
+    property({ type: Number })
+], RodeoRoundup.prototype, "numDocsActive", void 0);
+__decorate([
+    property({ type: Number })
+], RodeoRoundup.prototype, "numDocsEphemeral", void 0);
+__decorate([
+    property({ type: Number })
+], RodeoRoundup.prototype, "numDocsExpired", void 0);
+__decorate([
+    property({ type: Number })
+], RodeoRoundup.prototype, "numDocsZipExports", void 0);
+__decorate([
+    property({ type: Number })
+], RodeoRoundup.prototype, "numDocsTarGzExports", void 0);
+__decorate([
+    property({ type: Number })
+], RodeoRoundup.prototype, "numDocsArchiveDownloads", void 0);
 __decorate([
     property({ type: Number })
 ], RodeoRoundup.prototype, "cachedAt", void 0);

package/dist/components/rodeo/user-detail.js

@@ -4,13 +4,14 @@ 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 { html, LitElement } from "lit";
+import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { RodeoUserUpdated, RodeoUserBlockToggled, RodeoLoadTransactions, RodeoLoadEvents, RodeoLoadAuditLog, RodeoPageTransactions, RodeoPageEvents, RodeoPageAuditLog } from "../../events/rodeo.js";
 import userDetailCss from "./user-detail.css.js";
 import badgesCss from "../../css/badges.css.js";
 import buttonCss from "../../css/button.css.js";
 import formsCss from "../../css/forms.css.js";
+import { showApiKeyFeatures } from "../../model/feature-flags.js";
 let RodeoUserDetail = class RodeoUserDetail extends LitElement {
     constructor() {
         super(...arguments);
@@ -403,8 +404,10 @@ let RodeoUserDetail = class RodeoUserDetail extends LitElement {
             ${this.renderAuthRecords()}
             ${this.renderWalletTransactions()}
             ${this.renderEvents()}
-            ${this.renderAPIKeys()}
-            ${this.renderAuditLog()}
+            ${showApiKeyFeatures ? html `
+                ${this.renderAPIKeys()}
+                ${this.renderAuditLog()}
+            ` : nothing}
         `;
     }
 };

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

@@ -148,6 +148,11 @@ export default css `
 
     sl-tab-group::part(tabs) {
         height: 30px;
+        overflow: visible;
+    }
+
+    sl-tab-group::part(nav) {
+        overflow: visible;
     }
 
     sl-tab-group::part(body) {
@@ -168,42 +173,74 @@ export default css `
         letter-spacing: 0.05em;
     }
 
-    .tab.hidden {
-        display: none;
-    }
-
-    .workspace-icon {
-        font-size: 1.25rem;
+    .api-docs-tab::part(base) {
+        overflow: visible;
     }
 
-    .workspace-icon::part(base) {
-        padding: 0;
+    .api-docs-tab-label {
+        display: inline-flex;
+        align-items: flex-start;
+        gap: 0.4rem;
+        line-height: 1;
     }
 
-    .workspace-icon.active {
-        color: var(--primary-color);
+    .api-docs-tab-text {
+        align-self: center;
     }
 
-    .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;
+    .api-docs-new-badge {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 2px var(--global-padding);
+        border: 1px solid var(--terminal-text);
+        background: var(--background-color);
+        color: var(--terminal-text);
+        font-size: 0.7rem;
+        line-height: 1;
+        letter-spacing: 0.05em;
+        pointer-events: none;
+        text-transform: uppercase;
     }
 
-    ::slotted([slot="spec-editor"]),
-    ::slotted([slot="ruleset-editor"]),
-    ::slotted([slot="explorer"]),
-    ::slotted([slot="workspaces"]) {
-        flex: 1;
-        min-height: 0;
-    }
+.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="docs"]),
+::slotted([slot="workspaces"]) {
+    flex: 1;
+    width: 100%;
+    min-height: 0;
+}
 `;

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

@@ -32,6 +32,7 @@ export declare class DoctorEditorPanel extends LitElement {
     private handleSettingsClick;
     private renderDiagnoseButton;
     private renderRulesetPulse;
+    private renderApiDocsTabLabel;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

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

@@ -78,6 +78,14 @@ let DoctorEditorPanel = class DoctorEditorPanel extends LitElement {
         }
         return html `<sl-badge pulse></sl-badge>`;
     }
+    renderApiDocsTabLabel() {
+        return html `
+            <span class="api-docs-tab-label">
+                <span class="api-docs-tab-text">API Docs</span>
+                <span class="api-docs-new-badge" part="api-docs-new-badge">new</span>
+            </span>
+        `;
+    }
     render() {
         const hideDiagnose = this.autoDiagnose || !this.showDiagnosisButton;
         return html `
@@ -120,7 +128,7 @@ let DoctorEditorPanel = class DoctorEditorPanel extends LitElement {
                 <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 slot="nav" panel="docs" class="tab api-docs-tab">${this.renderApiDocsTabLabel()}</sl-tab>
 
                 <sl-tab-panel name="spec" class="tab-panel">
                     <div class="main-view">

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

@@ -131,4 +131,5 @@ export default css `
         min-height: 0;
         overflow: auto;
     }
+
 `;

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

@@ -6,10 +6,12 @@ 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 { SlTabGroup } from '@shoelace-style/shoelace';
+import type { TabShowOptions } from '../../interfaces/doctor-interfaces.js';
 export declare const SidebarTabChanged = "doctor-sidebar-tab-changed";
 export declare const SidebarCollapseToggled = "doctor-sidebar-collapse-toggled";
 export interface SidebarTabChangedEvent {
     name: string;
+    focusPanel: boolean;
 }
 export declare class DoctorSidebarPanel extends LitElement {
     static styles: import("lit").CSSResult[];
@@ -18,10 +20,11 @@ export declare class DoctorSidebarPanel extends LitElement {
     toolsEditorHasContent: boolean;
     collapsed: boolean;
     tabGroup?: SlTabGroup;
+    private nextTabShowOptions;
     private handleTabShow;
     private handleCollapseToggle;
     private handleToolsCompare;
-    showTab(panel: string): void;
+    showTab(panel: string, options?: TabShowOptions): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

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

@@ -26,8 +26,10 @@ let DoctorSidebarPanel = class DoctorSidebarPanel extends LitElement {
         this.collapsed = false;
     }
     handleTabShow(event) {
+        const focusPanel = this.nextTabShowOptions?.focusPanel ?? true;
+        this.nextTabShowOptions = undefined;
         this.dispatchEvent(new CustomEvent(SidebarTabChanged, {
-            detail: { name: event.detail.name },
+            detail: { name: event.detail.name, focusPanel },
             bubbles: true,
             composed: true
         }));
@@ -46,8 +48,21 @@ let DoctorSidebarPanel = class DoctorSidebarPanel extends LitElement {
             composed: true
         }));
     }
-    showTab(panel) {
-        this.tabGroup?.show(panel);
+    showTab(panel, options = {}) {
+        if (!this.tabGroup) {
+            return;
+        }
+        const activeTab = this.tabGroup.querySelector('sl-tab[active]');
+        if (activeTab?.getAttribute('panel') === panel) {
+            return;
+        }
+        this.nextTabShowOptions = options;
+        this.tabGroup.show(panel);
+        window.setTimeout(() => {
+            if (this.nextTabShowOptions === options) {
+                this.nextTabShowOptions = undefined;
+            }
+        }, 0);
     }
     render() {
         return html `

package/dist/components/the-doctor/printing-press-docs-unavailable.css.d.ts

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

package/dist/components/the-doctor/printing-press-docs-unavailable.css.js

@@ -0,0 +1,34 @@
+import { css } from "lit";
+export default css `
+    :host {
+        display: block;
+        height: 100%;
+        min-height: 0;
+        background: var(--background-color);
+        color: var(--tertiary-color);
+        font-family: var(--font-stack-mono), monospace;
+    }
+
+    .docs-unavailable {
+        box-sizing: border-box;
+        width: min(800px, calc(100% - 48px));
+        margin: 100px auto 0;
+        text-align: center;
+    }
+
+    h1 {
+        margin: 0;
+        color: var(--error-color);
+        font-size: 1.75rem;
+        line-height: 1.25;
+        letter-spacing: 0;
+        text-transform: none;
+    }
+
+    p {
+        margin: 40px 0;
+        color: var(--tertiary-color);
+        font-size: 1rem;
+        line-height: 1.45;
+    }
+`;

package/dist/components/the-doctor/printing-press-docs-unavailable.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from "lit";
+export declare class PrintingPressDocsUnavailable extends LitElement {
+    static styles: import("lit").CSSResult[];
+    heading: string;
+    detail: string;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "pb33f-printing-press-docs-unavailable": PrintingPressDocsUnavailable;
+    }
+}

package/dist/components/the-doctor/printing-press-docs-unavailable.js

@@ -0,0 +1,35 @@
+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 { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import printingPressDocsUnavailableCss from "./printing-press-docs-unavailable.css.js";
+let PrintingPressDocsUnavailable = class PrintingPressDocsUnavailable extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.heading = "[ documentation unavailable ]";
+        this.detail = "Printing Press could not render the current docs.";
+    }
+    render() {
+        return html `
+            <section class="docs-unavailable" role="alert" aria-live="polite">
+                <h1>${this.heading}</h1>
+                <p>${this.detail}</p>
+            </section>
+        `;
+    }
+};
+PrintingPressDocsUnavailable.styles = [printingPressDocsUnavailableCss];
+__decorate([
+    property({ type: String })
+], PrintingPressDocsUnavailable.prototype, "heading", void 0);
+__decorate([
+    property({ type: String })
+], PrintingPressDocsUnavailable.prototype, "detail", void 0);
+PrintingPressDocsUnavailable = __decorate([
+    customElement("pb33f-printing-press-docs-unavailable")
+], PrintingPressDocsUnavailable);
+export { PrintingPressDocsUnavailable };

package/dist/components/the-doctor/printing-press-export-controls.css.d.ts

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

package/dist/components/the-doctor/printing-press-export-controls.css.js

@@ -0,0 +1,26 @@
+import { css } from "lit";
+export default css `
+    :host {
+        display: inline-flex;
+        align-items: center;
+    }
+
+    .printing-press-export-controls {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+    }
+
+    .action-button {
+        color: var(--primary-color);
+        font-size: 1rem;
+    }
+
+    .action-button::part(base) {
+        padding: 2px;
+    }
+
+    .action-button::part(base):hover {
+        color: var(--font-color);
+    }
+`;

package/dist/components/the-doctor/printing-press-export-controls.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from "lit";
+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 class PrintingPressExportControls extends LitElement {
+    static styles: import("lit").CSSResult[];
+    disabled: boolean;
+    private handleDocsZipExport;
+    private handleDocsTarballExport;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "pb33f-printing-press-export-controls": PrintingPressExportControls;
+    }
+}

package/dist/components/the-doctor/printing-press-export-controls.js

@@ -0,0 +1,75 @@
+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 { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.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 tooltipCss from "../../css/tooltip.css.js";
+import { PrintingPressTarballExportRequested, PrintingPressZipExportRequested } from "../../events/doctor.js";
+import printingPressExportControlsCss from "./printing-press-export-controls.css.js";
+let PrintingPressExportControls = class PrintingPressExportControls extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+    }
+    handleDocsZipExport() {
+        if (this.disabled) {
+            return;
+        }
+        this.dispatchEvent(new CustomEvent(PrintingPressZipExportRequested, {
+            bubbles: true,
+            composed: true
+        }));
+    }
+    handleDocsTarballExport() {
+        if (this.disabled) {
+            return;
+        }
+        this.dispatchEvent(new CustomEvent(PrintingPressTarballExportRequested, {
+            bubbles: true,
+            composed: true
+        }));
+    }
+    render() {
+        return html `
+            <pb33f-premium-gate
+                require-credits="10"
+                feature-name="Export API Docs"
+                feature-explanation="Exporting generated API docs creates a portable archive of your private documentation.">
+                <div class="printing-press-export-controls">
+                    <sl-tooltip content="Download docs zip">
+                        <sl-icon-button
+                            name="download"
+                            class="action-button"
+                            ?disabled=${this.disabled}
+                            @click=${this.handleDocsZipExport}
+                            aria-label="Download generated documentation as a zip archive">
+                        </sl-icon-button>
+                    </sl-tooltip>
+                    <sl-tooltip content="Download docs tarball">
+                        <sl-icon-button
+                            name="archive"
+                            class="action-button"
+                            ?disabled=${this.disabled}
+                            @click=${this.handleDocsTarballExport}
+                            aria-label="Download generated documentation as a tarball">
+                        </sl-icon-button>
+                    </sl-tooltip>
+                </div>
+            </pb33f-premium-gate>
+        `;
+    }
+};
+PrintingPressExportControls.styles = [tooltipCss, printingPressExportControlsCss];
+__decorate([
+    property({ type: Boolean })
+], PrintingPressExportControls.prototype, "disabled", void 0);
+PrintingPressExportControls = __decorate([
+    customElement("pb33f-printing-press-export-controls")
+], PrintingPressExportControls);
+export { PrintingPressExportControls };