@pb33f/cowboy-components 0.7.18 → 0.8.0

package/dist/components/global-task/global-task-view.js

@@ -0,0 +1,359 @@
+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, query, state } from 'lit/decorators.js';
+import globalTaskCss from './global-task-view.css.js';
+import '@shoelace-style/shoelace/dist/components/drawer/drawer.js';
+import '@shoelace-style/shoelace/dist/components/progress-bar/progress-bar.js';
+import '@shoelace-style/shoelace/dist/components/icon-button/icon-button.js';
+import '@shoelace-style/shoelace/dist/components/badge/badge.js';
+import '@shoelace-style/shoelace/dist/components/tree/tree.js';
+import '@shoelace-style/shoelace/dist/components/tree-item/tree-item.js';
+import '@shoelace-style/shoelace/dist/components/format-date/format-date.js';
+import badgesCss from "../../css/badges.css";
+import linksCss from "../../css/links.css";
+import detailsDrawerCss from "../details-drawer/details-drawer.css";
+import '../shader-canvas/shader-canvas';
+import '../waiting-line/waiting-line';
+import { neonCanyonShader } from '../shaders/neon-canyon-shader';
+import { neonSquirclesShader } from '../shaders/neon-squircles-shader';
+import { flowingWavesShader } from '../shaders/flowing-waves-shader';
+let GlobalTaskView = class GlobalTaskView extends LitElement {
+    constructor() {
+        super();
+        this.mode = 'micro';
+        this.mockMode = false;
+        this.tasks = [];
+        this.overallProgress = 0;
+        this.activeTaskCount = 0;
+        this.currentMessage = '';
+        this.consoleMessages = [];
+        this.hasReceivedData = false;
+        // Randomly select between available shaders
+        const shaders = [
+            // neonLinesShader, // disabled - too GPU intensive
+            neonCanyonShader,
+            neonSquirclesShader,
+            flowingWavesShader
+        ];
+        this.selectedShader = shaders[Math.floor(Math.random() * shaders.length)];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this.handleClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('click', this.handleClick);
+        if (this.pendingDrawerTimeout !== undefined) {
+            clearTimeout(this.pendingDrawerTimeout);
+        }
+        if (this.messageTimeoutId !== undefined) {
+            clearTimeout(this.messageTimeoutId);
+        }
+    }
+    setController(controller) {
+        this.controller = controller;
+        controller.setView(this);
+        // Enable mock mode if the property is set
+        if (this.mockMode) {
+            controller.enableMockMode();
+        }
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        // Handle mockMode property changes
+        if (changedProperties.has('mockMode') && this.controller) {
+            if (this.mockMode) {
+                this.controller.enableMockMode();
+            }
+            else {
+                this.controller.disableMockMode();
+            }
+        }
+    }
+    updateTasks(tasks, overallProgress) {
+        const prevActiveCount = this.activeTaskCount;
+        this.tasks = tasks;
+        this.overallProgress = overallProgress;
+        this.activeTaskCount = tasks.filter(t => t.status === 'active').length;
+        // Mark that we've received data
+        if (!this.hasReceivedData && tasks.length > 0) {
+            this.hasReceivedData = true;
+        }
+        const latestTask = tasks.find(t => t.status === 'active' && t.message);
+        if (latestTask) {
+            if (this.messageTimeoutId !== undefined) {
+                clearTimeout(this.messageTimeoutId);
+                this.messageTimeoutId = undefined;
+            }
+            this.currentMessage = latestTask.message || '';
+        }
+        else if (prevActiveCount > 0 && this.activeTaskCount === 0 && this.currentMessage) {
+            if (this.messageTimeoutId !== undefined) {
+                clearTimeout(this.messageTimeoutId);
+            }
+            this.messageTimeoutId = window.setTimeout(() => {
+                this.currentMessage = '';
+                this.messageTimeoutId = undefined;
+            }, 5000);
+        }
+    }
+    addConsoleMessage(message) {
+        this.consoleMessages = [...this.consoleMessages, message].slice(-200); // Keep last 200 messages
+        this.requestUpdate();
+        if (this.mode === 'expanded') {
+            requestAnimationFrame(() => {
+                if (this.consoleContent) {
+                    this.consoleContent.scrollTop = this.consoleContent.scrollHeight;
+                }
+            });
+        }
+    }
+    updateConsoleMessages(messages) {
+        this.consoleMessages = messages.slice(-200); // Keep last 200 messages
+        this.requestUpdate();
+        if (this.mode === 'expanded') {
+            requestAnimationFrame(() => {
+                if (this.consoleContent) {
+                    this.consoleContent.scrollTop = this.consoleContent.scrollHeight;
+                }
+            });
+        }
+    }
+    handleClick() {
+        if (this.mode === 'micro') {
+            this.mode = 'collapsed';
+        }
+        else if (this.mode === 'collapsed') {
+            this.mode = 'expanded';
+            this.requestUpdate();
+            if (this.pendingDrawerTimeout !== undefined) {
+                clearTimeout(this.pendingDrawerTimeout);
+            }
+            this.pendingDrawerTimeout = window.setTimeout(() => {
+                if (this.drawer) {
+                    this.drawer.show();
+                }
+                this.populateTerminal();
+            }, 100);
+        }
+    }
+    toggleMode() {
+        if (this.mode === 'micro') {
+            this.mode = 'collapsed';
+        }
+        else if (this.mode === 'collapsed') {
+            this.mode = 'expanded';
+            if (this.drawer) {
+                this.drawer.show();
+            }
+            this.populateTerminal();
+        }
+        else {
+            this.mode = 'collapsed';
+            if (this.drawer) {
+                this.drawer.hide();
+            }
+        }
+    }
+    populateTerminal() {
+        if (this.controller) {
+            this.consoleMessages = this.controller.getConsoleMessages();
+            requestAnimationFrame(() => {
+                if (this.consoleContent) {
+                    this.consoleContent.scrollTop = this.consoleContent.scrollHeight;
+                }
+            });
+        }
+    }
+    handleDrawerClose() {
+        this.mode = 'collapsed';
+    }
+    minimizeToMicro() {
+        this.mode = 'micro';
+        if (this.drawer) {
+            this.drawer.hide();
+        }
+    }
+    renderTask(task, level = 0) {
+        const hasSubtasks = task.subtasks && task.subtasks.length > 0;
+        const progress = task.totalSteps > 0
+            ? Math.round((task.currentStep / task.totalSteps) * 100)
+            : task.progress;
+        const statusIcon = task.status === 'completed' ? 'check-circle' :
+            task.status === 'failed' ? 'x-circle' :
+                'arrow-repeat';
+        return html `
+         
+                <div class="task-item">
+                    <sl-icon name="${statusIcon}" class="status-icon ${task.status}"></sl-icon>
+                    <span class="task-name">${task.name}</span>
+                    <sl-badge class="status" variant="${task.status === 'active' ? 'primary' :
+            task.status === 'completed' ? 'success' :
+                'danger'}" pill>
+                        ${progress}%
+                    </sl-badge>
+                </div>
+                ${hasSubtasks ? task.subtasks.map(subtask => this.renderTask(subtask, level + 1)) : ''}
+       
+        `;
+    }
+    render() {
+        if (this.mode === 'micro') {
+            return html `
+                <div class="micro-view">
+                    <sl-badge variant="${this.activeTaskCount > 0 ? 'primary' : 'neutral'}">
+                        ${this.activeTaskCount}
+                    </sl-badge>
+                    <span class="progress-text">${this.overallProgress}%</span>
+                </div>
+            `;
+        }
+        if (this.mode === 'collapsed') {
+            // Show shader if no data has been received yet
+            if (!this.hasReceivedData) {
+                return html `
+                    <div class="collapsed-view shader-mode">
+                        <div class="collapsed-header">
+                            <span class="task-count">
+                                <strong>TASK MONITOR</strong>
+                            </span>
+                            <sl-icon-button 
+                                name="x-lg" 
+                                label="Minimize"
+                                @click=${(e) => {
+                    e.stopPropagation();
+                    this.minimizeToMicro();
+                }}
+                            ></sl-icon-button>
+                        </div>
+                        <div class="shader-area">
+                            <pb33f-shader-canvas 
+                                .shader=${this.selectedShader}
+                                overlayText="waiting for transmission...">
+                            </pb33f-shader-canvas>
+                        </div>
+                    </div>
+                `;
+            }
+            // Normal collapsed view when we have data
+            const isIdle = this.activeTaskCount === 0;
+            return html `
+                <div class="collapsed-view">
+                    <div class="collapsed-header">
+                        <span class="task-count">
+                            <strong>${this.activeTaskCount} ACTIVE ${this.activeTaskCount === 1 ? 'TASK' : 'TASKS'}</strong>
+                             | <a href="#">VIEW FULL CONSOLE</a>
+                        </span>
+                        <sl-icon-button
+                            name="x-lg"
+                            label="Minimize"
+                            @click=${(e) => {
+                e.stopPropagation();
+                this.minimizeToMicro();
+            }}
+                        ></sl-icon-button>
+                    </div>
+                    ${isIdle
+                ? html `<pb33f-waiting-line height="60"></pb33f-waiting-line>`
+                : html `<pb33f-percent-bar value="${this.overallProgress}" height="20"></pb33f-percent-bar>`}
+                    <div class="current-message">${this.currentMessage || 'NO ACTIVE TASKS'}</div>
+                </div>
+            `;
+        }
+        if (this.mode === 'expanded') {
+            return html `
+                <sl-drawer 
+                    id="task-drawer" 
+                    label="Task Monitor" 
+                    placement="bottom" 
+                    class="task-drawer"
+                    @sl-after-hide=${this.handleDrawerClose}
+                >
+                    <div class="expanded-view">
+                        <div class="task-panel">
+                                ${this.tasks.length > 0
+                ? this.tasks?.map(task => this.renderTask(task))
+                : html `<div class="no-tasks">NO ACTIVE TASKS</div>`}
+                          
+                        </div>
+                        <div class="right-panel">
+                            <div class="progress-section">
+                                <label>Overall Progress</label>
+                                ${this.activeTaskCount === 0
+                ? html `<pb33f-waiting-line height="60"></pb33f-waiting-line>`
+                : html `<pb33f-percent-bar value="${this.overallProgress}" height="40"></pb33f-percent-bar>`}
+                                
+                                <section class="sub-tasks">
+                                ${this.tasks.filter(t => t.status === 'active').map(task => {
+                const progress = task.totalSteps > 0
+                    ? Math.round((task.currentStep / task.totalSteps) * 100)
+                    : task.progress;
+                return html `
+                                        <div class="task-progress">
+                                            <label>${task.name}</label>
+                                            <pb33f-percent-bar value="${progress}" height="20" pattern="dotted" info></pb33f-percent-bar>
+                                        </div>
+                                    `;
+            })}
+                                </section>
+                            </div>
+                            <div class="console-wrapper">
+                                <div class="console-header">TASK CONSOLE</div>
+                                <div class="console-content">
+                                    <pb33f-terminal-emulator .messages=${this.consoleMessages} label="fuck tits">
+                                    </pb33f-terminal-emulator>
+                                    
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </sl-drawer>
+            `;
+        }
+        return html ``;
+    }
+};
+GlobalTaskView.styles = [globalTaskCss, badgesCss, linksCss, detailsDrawerCss];
+__decorate([
+    property({ type: String })
+], GlobalTaskView.prototype, "mode", void 0);
+__decorate([
+    property({ type: Boolean })
+], GlobalTaskView.prototype, "mockMode", void 0);
+__decorate([
+    state()
+], GlobalTaskView.prototype, "tasks", void 0);
+__decorate([
+    state()
+], GlobalTaskView.prototype, "overallProgress", void 0);
+__decorate([
+    state()
+], GlobalTaskView.prototype, "activeTaskCount", void 0);
+__decorate([
+    state()
+], GlobalTaskView.prototype, "currentMessage", void 0);
+__decorate([
+    state()
+], GlobalTaskView.prototype, "consoleMessages", void 0);
+__decorate([
+    state()
+], GlobalTaskView.prototype, "hasReceivedData", void 0);
+__decorate([
+    state()
+], GlobalTaskView.prototype, "selectedShader", void 0);
+__decorate([
+    query('#task-drawer')
+], GlobalTaskView.prototype, "drawer", void 0);
+__decorate([
+    query('.console-content')
+], GlobalTaskView.prototype, "consoleContent", void 0);
+GlobalTaskView = __decorate([
+    customElement('pb33f-global-task-view')
+], GlobalTaskView);
+export { GlobalTaskView };

package/dist/components/header/header.css.js

@@ -42,10 +42,14 @@ export default css `
         text-shadow: 0 0 10px var(--primary-color-text-shadow), 0 0 10px var(--primary-color-text-shadow);
     }
 
+    :host-context(html[theme="light"]) header.pb33f-header > .logo .name {
+        text-shadow: none;
+    }
+
     header.pb33f-header > .logo .name > sl-icon {
         vertical-align: middle;
     }
-    
+
 
     header.pb33f-header > .logo .name > a {
         text-decoration: none;
@@ -62,6 +66,10 @@ export default css `
         text-shadow: 0 0 5px var(--secondary-color-text-shadow), 0 0 10px var(--secondary-color-text-shadow-outer);
     }
 
+    :host-context(html[theme="light"]) header.pb33f-header > .logo .name > a:active {
+        text-shadow: none;
+    }
+
     header.pb33f-header > .logo .name::after {
         content: "";
         -webkit-animation: cursor .8s infinite;

package/dist/components/http-method/http-method.css.js

@@ -14,9 +14,13 @@ export default css `
         
     }
 
+    sl-tag.method.small {
+        width: 67px;
+    }
+    
     sl-tag.method.small::part(base) {
         height: 18px;
-        width: 68px;
+        width: 67px;
     }
 
     sl-tag.method.large::part(base) {

package/dist/components/indeterminate-loader/indeterminate-loader.css.d.ts

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

package/dist/components/indeterminate-loader/indeterminate-loader.css.js

@@ -0,0 +1,135 @@
+import { css } from "lit";
+export default css `
+    :host {
+        display: block;
+        width: 100%;
+    }
+
+    .kitt-container {
+        position: relative;
+        width: 100%;
+    }
+
+    .kitt-bar {
+        position: relative;
+        width: 100%;
+        overflow: hidden;
+        background: var(--background-color);
+        border: 1px solid var(--border-color);
+        border-radius: 0;
+    }
+
+    .kitt-bar.active::before {
+        animation-play-state: running;
+    }
+
+    .kitt-bar.paused::before {
+        animation-play-state: paused;
+    }
+
+    .kitt-bar::before {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 50%;
+        left: var(--center-start);
+        width: var(--inner-width);
+        height: var(--inner-height);
+        transform: translate(-50%, -50%);
+        animation: var(--animation-name) var(--animation-duration) 
+                   steps(var(--animation-steps), end)
+                   infinite var(--animation-direction);
+        animation-play-state: paused;
+        background: linear-gradient(
+            90deg,
+            transparent 0,
+            var(--gradient-color) var(--gradient-start),
+            var(--center-color) var(--center-start-percent),
+            var(--center-color) var(--center-end-percent),
+            var(--gradient-color) var(--gradient-end),
+            transparent 100%
+        );
+    }
+
+    .kitt-bar::after {
+        content: '';
+        display: block;
+        position: absolute;
+        left: 0;
+        top: 50%;
+        width: 100%;
+        height: 100%;
+        transform: translateY(-50%);
+        background: repeating-linear-gradient(
+            90deg,
+            var(--background-color) 0,
+            var(--background-color) 1px,
+            transparent 1px,
+            transparent var(--block-size-minus-1),
+            var(--background-color) var(--block-size-minus-1),
+            var(--background-color) var(--block-size)
+        );
+    }
+
+    .kitt-label {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        font-family: var(--font-stack);
+        font-size: 0.8rem;
+        color: var(--tertiary-color);
+        z-index: 10;
+        pointer-events: none;
+    }
+
+    .kitt-label.left {
+        left: 8px;
+    }
+
+    .kitt-label.center {
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    .kitt-label.right {
+        right: 8px;
+    }
+
+    @keyframes kitt-bar {
+        from {
+            left: var(--animation-start);
+        }
+        to {
+            left: var(--animation-end);
+        }
+    }
+
+    @keyframes kitt-bar-reverse {
+        from {
+            left: var(--animation-end);
+        }
+        to {
+            left: var(--animation-start);
+        }
+    }
+`;
+/* CSS Variables that need to be set by the component:
+ * --block-size: Size of each block in pixels
+ * --block-size-minus-1: Block size minus 1px for grid lines
+ * --center-start: Starting position for center point
+ * --inner-width: Width of the animated bar
+ * --inner-height: Height of the animated bar
+ * --animation-name: Name of the keyframe animation to use
+ * --animation-duration: Duration of the animation
+ * --animation-steps: Number of steps in the animation
+ * --animation-start: Starting position for animation
+ * --animation-end: Ending position for animation
+ * --animation-direction: Direction of animation (normal, reverse, alternate)
+ * --center-start-percent: Start percentage for center gradient
+ * --center-end-percent: End percentage for center gradient
+ * --gradient-start: Start position for gradient
+ * --gradient-end: End position for gradient
+ * --center-color: Color for the center of the bar
+ * --gradient-color: Color for the gradient edges
+ * --border-color: Color for the border
+ */ 

package/dist/components/indeterminate-loader/indeterminate-loader.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from "lit";
+import { AttentionType } from "../attention-box/attention-box";
+export declare enum TextAlign {
+    Left = "left",
+    Center = "center",
+    Right = "right"
+}
+export declare class IndeterminateLoader extends LitElement {
+    height: number;
+    blockSize: number;
+    speed: number;
+    active: boolean;
+    label: string;
+    align: TextAlign;
+    cellCount: number;
+    centerCellCount: number;
+    centerOffsetCount: number;
+    gradientCellCount: number;
+    constantFlow: boolean;
+    reverseFlow: boolean;
+    colorMode: AttentionType;
+    private animationTimeout?;
+    private isRunningMinimumCycle;
+    start(): void;
+    private startMinimumCycle;
+    stop(): void;
+    disconnectedCallback(): void;
+    static styles: import("lit").CSSResult;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    private updateCSSVariables;
+    private setDimensions;
+    private setAnimationProperties;
+    private setColors;
+    render(): import("lit-html").TemplateResult<1>;
+}