@pb33f/cowboy-components 0.7.18 → 0.8.0

package/dist/components/rodeo/roundup.js

@@ -10,7 +10,7 @@ import { RodeoService } from "../../services/rodeo-service.js";
 import './statistic.js';
 import '../terminal-emulator/terminal-emulator.js';
 import roundupCss from "./roundup.css.js";
-import { TerminalEmulator } from "../terminal-emulator/terminal-emulator";
+import { TerminalEmulator, ConsoleMessageType } from "../terminal-emulator/terminal-emulator";
 let RodeoRoundup = class RodeoRoundup extends LitElement {
     constructor() {
         super();
@@ -36,7 +36,7 @@ let RodeoRoundup = class RodeoRoundup extends LitElement {
     }
     pushConsoleEventInfoMessage(evt) {
         const terminalMessage = {
-            type: 'info',
+            type: ConsoleMessageType.Info,
             message: `event: ${evt.event}`,
             metadata: evt.metadata,
             timestamp: new Date().toString()

package/dist/components/rodeo/statistic.css.js

@@ -22,7 +22,9 @@ export default css `
         height: 30px;
         font-size: 1.2rem;
         font-family: var(--font-stack-bold), serif;
-        color: var(--secondary-color)
+        color: var(--secondary-color);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
     
     .title.small {
@@ -41,7 +43,11 @@ export default css `
         color: var(--primary-color);
         text-shadow: 0 0 20px var(--primary-color-lowalpha);
     }
-    
+
+    :host-context(html[theme="light"]) .value {
+        text-shadow: none;
+    }
+
     .value.small {
         font-size: 1rem;
         font-family: var(--font-stack-bold), sans-serif;
@@ -61,11 +67,28 @@ export default css `
             transform: scale(1);
         }
     }
+
+    @keyframes pulse-light {
+        0% {
+            transform: scale(1);
+        }
+        50% {
+            transform: scale(1.1);
+        }
+        100% {
+            transform: scale(1);
+        }
+    }
+
     /* The class that triggers the animation */
     .pulse {
         animation: pulse 200ms ease-out;
     }
 
+    :host-context(html[theme="light"]) .pulse {
+        animation: pulse-light 200ms ease-out;
+    }
+
     /* New keyframes for the border flash */
     @keyframes borderFlash {
         0% {

package/dist/components/rodeo/statistic.js

@@ -32,19 +32,15 @@ let Statistic = class Statistic extends LitElement {
     }
     updated(changedProperties) {
         if (changedProperties.has('value')) {
-            // Animate the value text
             const valueElement = this.shadowRoot?.querySelector('.value');
             if (valueElement) {
                 valueElement.classList.remove('pulse');
-                //@ts-ignore
                 void valueElement.offsetWidth;
                 valueElement.classList.add('pulse');
             }
-            // Animate the container border
             const statisticElement = this.shadowRoot?.querySelector('.statistic');
             if (statisticElement) {
                 statisticElement.classList.remove('border-flash');
-                //@ts-ignore
                 void statisticElement.offsetWidth;
                 statisticElement.classList.add('border-flash');
             }

package/dist/components/shader-canvas/shader-canvas.css.d.ts

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

package/dist/components/shader-canvas/shader-canvas.css.js

@@ -0,0 +1,66 @@
+import { css } from 'lit';
+export default css `
+    :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+        position: relative;
+    }
+    
+    .shader-container {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        background: #000;
+    }
+
+    :host-context(html[theme="light"]) .shader-container {
+        background: #fff;
+    }
+    
+    canvas {
+        width: 100%;
+        height: 100%;
+        display: block;
+    }
+    
+    .overlay-text {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        color: var(--primary-color);
+        font-family: var(--font-stack-bold), monospace;
+        font-size: 1.8rem;
+        font-weight: bold;
+        text-transform: uppercase;
+        letter-spacing: 0.2em;
+        text-shadow:
+            /* Black shadow/glow for readability */
+            0 0 20px rgba(0, 0, 0, 0.9),
+            0 0 40px rgba(0, 0, 0, 0.8),
+            0 0 60px rgba(0, 0, 0, 0.7),
+            0 0 80px rgba(0, 0, 0, 0.6),
+            /* Primary color glow on top */
+            0 0 10px var(--primary-color),
+            0 0 20px var(--primary-color),
+            0 0 30px var(--primary-color);
+        pointer-events: none;
+        z-index: 10;
+    }
+
+    :host-context(html[theme="light"]) .overlay-text {
+        color: #000;
+        text-shadow: none;
+    }
+    
+    .fallback {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--primary-color);
+        font-family: var(--font-stack), monospace;
+    }
+`;

package/dist/components/shader-canvas/shader-canvas.d.ts

@@ -0,0 +1,36 @@
+import { LitElement, PropertyValues } from 'lit';
+import { ShaderModule } from '../shaders/shader-base.js';
+export declare class ShaderCanvas extends LitElement {
+    static styles: import("lit").CSSResult[];
+    shader: ShaderModule;
+    overlayText: string;
+    canvas: HTMLCanvasElement;
+    webglSupported: boolean;
+    private gl;
+    private program;
+    private animationId;
+    private startTime;
+    private uniforms;
+    private uniformLocations;
+    private observer;
+    private isWebGL2;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(_changedProperties: PropertyValues): void;
+    updated(changedProperties: PropertyValues): void;
+    private initWebGL;
+    private setupShader;
+    private wrapShadertoyShader;
+    private isLightMode;
+    private updateColorsFromCSS;
+    private cssColorToRGB;
+    private setupUniforms;
+    private compileShader;
+    private resizeCanvas;
+    renderFrame: () => void;
+    private startAnimation;
+    private stopAnimation;
+    private cleanup;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/shader-canvas/shader-canvas.js

@@ -0,0 +1,363 @@
+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 shaderCanvasCss from './shader-canvas.css.js';
+let ShaderCanvas = class ShaderCanvas extends LitElement {
+    constructor() {
+        super();
+        this.overlayText = 'no tasks discovered yet...';
+        this.webglSupported = true;
+        this.gl = null;
+        this.program = null;
+        this.animationId = null;
+        this.startTime = Date.now();
+        this.uniforms = {};
+        this.uniformLocations = {};
+        this.observer = null;
+        this.isWebGL2 = false;
+        this.renderFrame = () => {
+            if (!this.gl || !this.program) {
+                return;
+            }
+            const time = (Date.now() - this.startTime) / 1000;
+            // Update colors and light mode every frame to handle theme changes
+            this.updateColorsFromCSS();
+            // Update shader uniforms
+            if (this.shader?.onFrame) {
+                this.shader.onFrame(time, this.uniforms);
+            }
+            // Set uniforms
+            this.gl.useProgram(this.program);
+            Object.entries(this.uniformLocations).forEach(([name, location]) => {
+                const value = this.uniforms[name];
+                if (value !== undefined) {
+                    if (Array.isArray(value)) {
+                        const floatArray = value;
+                        if (floatArray.length === 2) {
+                            this.gl.uniform2fv(location, floatArray);
+                        }
+                        else if (floatArray.length === 3) {
+                            this.gl.uniform3fv(location, floatArray);
+                        }
+                        else if (floatArray.length === 4) {
+                            this.gl.uniform4fv(location, floatArray);
+                        }
+                    }
+                    else {
+                        this.gl.uniform1f(location, value);
+                    }
+                }
+            });
+            // Draw
+            this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);
+            this.animationId = requestAnimationFrame(this.renderFrame);
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Set up intersection observer for performance
+        this.observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    this.startAnimation();
+                }
+                else {
+                    this.stopAnimation();
+                }
+            });
+        });
+        this.observer.observe(this);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = null;
+        }
+        this.stopAnimation();
+        this.cleanup();
+    }
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        // Initialize WebGL after the canvas is rendered
+        if (this.shader && !this.gl) {
+            this.initWebGL();
+            // Animation will be started by IntersectionObserver
+        }
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('shader') && this.shader && this.canvas && !this.gl) {
+            this.initWebGL();
+        }
+    }
+    initWebGL() {
+        if (!this.canvas) {
+            console.error('Canvas not found');
+            return;
+        }
+        this.cleanup();
+        try {
+            // Try WebGL 2.0 first, then fall back to WebGL 1.0
+            this.gl = this.canvas.getContext('webgl2');
+            if (this.gl) {
+                this.isWebGL2 = true;
+            }
+            else {
+                // Fall back to WebGL 1.0
+                this.gl = this.canvas.getContext('webgl') || this.canvas.getContext('experimental-webgl');
+                this.isWebGL2 = false;
+            }
+            if (!this.gl) {
+                console.error('WebGL context not available');
+                this.webglSupported = false;
+                return;
+            }
+            this.setupShader();
+            // Ensure canvas is properly sized after shader setup
+            requestAnimationFrame(() => {
+                this.resizeCanvas();
+            });
+            window.addEventListener('resize', this.resizeCanvas.bind(this));
+        }
+        catch (e) {
+            console.error('WebGL initialization failed:', e);
+            this.webglSupported = false;
+        }
+    }
+    setupShader() {
+        if (!this.gl || !this.shader) {
+            console.error('Missing GL or shader');
+            return;
+        }
+        // Wrap Shadertoy-style shaders with proper WebGL 2.0 boilerplate
+        let processedFragShader = this.shader.fragmentShader;
+        if (this.isWebGL2 && !processedFragShader.includes('#version')) {
+            // This is likely a Shadertoy shader - wrap it
+            processedFragShader = this.wrapShadertoyShader(processedFragShader);
+        }
+        // Use WebGL 2.0 vertex shader if needed
+        let vertexShaderCode = this.shader.vertexShader;
+        if (this.isWebGL2 && !vertexShaderCode.includes('#version')) {
+            vertexShaderCode = `#version 300 es
+in vec2 position;
+void main() {
+    gl_Position = vec4(position, 0.0, 1.0);
+}`;
+        }
+        const vertShader = this.compileShader(this.gl.VERTEX_SHADER, vertexShaderCode);
+        const fragShader = this.compileShader(this.gl.FRAGMENT_SHADER, processedFragShader);
+        if (!vertShader || !fragShader) {
+            console.error('Failed to compile shaders');
+            return;
+        }
+        this.program = this.gl.createProgram();
+        this.gl.attachShader(this.program, vertShader);
+        this.gl.attachShader(this.program, fragShader);
+        this.gl.linkProgram(this.program);
+        if (!this.gl.getProgramParameter(this.program, this.gl.LINK_STATUS)) {
+            console.error('Shader program failed to link:', this.gl.getProgramInfoLog(this.program));
+            return;
+        }
+        // Set up vertex buffer
+        const vertices = new Float32Array([
+            -1, -1, 1, -1, -1, 1,
+            -1, 1, 1, -1, 1, 1
+        ]);
+        const buffer = this.gl.createBuffer();
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer);
+        this.gl.bufferData(this.gl.ARRAY_BUFFER, vertices, this.gl.STATIC_DRAW);
+        const positionLoc = this.gl.getAttribLocation(this.program, 'position');
+        this.gl.enableVertexAttribArray(positionLoc);
+        this.gl.vertexAttribPointer(positionLoc, 2, this.gl.FLOAT, false, 0, 0);
+        // Set up uniforms
+        this.gl.useProgram(this.program);
+        this.setupUniforms();
+        // Get CSS colors and convert to RGB
+        this.updateColorsFromCSS();
+    }
+    wrapShadertoyShader(shaderCode) {
+        // WebGL 2.0 wrapper for Shadertoy shaders
+        return `#version 300 es
+precision highp float;
+
+uniform float time;
+uniform vec2 resolution;
+uniform vec3 primaryColor;
+uniform vec3 secondaryColor;
+uniform vec3 tertiaryColor;
+uniform float lightMode;
+
+out vec4 fragColor;
+
+// Shadertoy compatibility
+#define iTime time
+#define iResolution vec3(resolution, 1.0)
+
+// Light mode colors for subtractive rendering (subtract from white)
+// Higher values = darker result
+vec3 getLightModeColor(int index) {
+    if (index == 0) return vec3(1.0);        // black (subtract most)
+    if (index == 1) return vec3(0.6);        // dark grey
+    return vec3(0.3);                         // light grey (subtract least)
+}
+
+${shaderCode}
+
+void main() {
+    mainImage(fragColor, gl_FragCoord.xy);
+}`;
+    }
+    isLightMode() {
+        return document.documentElement.getAttribute('theme') === 'light';
+    }
+    updateColorsFromCSS() {
+        if (!this.gl || !this.program)
+            return;
+        const styles = getComputedStyle(this);
+        const primaryRaw = styles.getPropertyValue('--primary-color');
+        const secondaryRaw = styles.getPropertyValue('--secondary-color');
+        const tertiaryRaw = styles.getPropertyValue('--tertiary-color');
+        const colors = {
+            primaryColor: this.cssColorToRGB(primaryRaw),
+            secondaryColor: this.cssColorToRGB(secondaryRaw),
+            tertiaryColor: this.cssColorToRGB(tertiaryRaw)
+        };
+        Object.entries(colors).forEach(([name, value]) => {
+            if (this.uniformLocations[name]) {
+                this.uniforms[name] = value;
+            }
+        });
+        this.uniforms.lightMode = this.isLightMode() ? 1.0 : 0.0;
+    }
+    cssColorToRGB(color) {
+        // Handle CSS variables and hex colors
+        const trimmed = color.trim();
+        // If it's empty or undefined, use default
+        if (!trimmed) {
+            return [0, 1, 1]; // cyan
+        }
+        // Handle hex colors
+        if (trimmed.startsWith('#')) {
+            let hex = trimmed.slice(1);
+            // Handle 3-digit hex
+            if (hex.length === 3) {
+                hex = hex.split('').map(c => c + c).join('');
+            }
+            const r = parseInt(hex.slice(0, 2), 16) / 255 || 0;
+            const g = parseInt(hex.slice(2, 4), 16) / 255 || 0;
+            const b = parseInt(hex.slice(4, 6), 16) / 255 || 0;
+            return [r, g, b];
+        }
+        // Handle rgb/rgba
+        const rgbMatch = trimmed.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+        if (rgbMatch) {
+            return [
+                parseInt(rgbMatch[1]) / 255,
+                parseInt(rgbMatch[2]) / 255,
+                parseInt(rgbMatch[3]) / 255
+            ];
+        }
+        // Default cyan if parsing fails
+        console.error('the doctor has an issue with color! could not parse color:', color);
+        return [0, 1, 1];
+    }
+    setupUniforms() {
+        if (!this.gl || !this.program || !this.shader)
+            return;
+        // Copy default uniforms
+        if (this.shader.uniforms) {
+            this.uniforms = { ...this.shader.uniforms };
+        }
+        // Get uniform locations
+        const numUniforms = this.gl.getProgramParameter(this.program, this.gl.ACTIVE_UNIFORMS);
+        for (let i = 0; i < numUniforms; i++) {
+            const info = this.gl.getActiveUniform(this.program, i);
+            if (info) {
+                const location = this.gl.getUniformLocation(this.program, info.name);
+                if (location) {
+                    this.uniformLocations[info.name] = location;
+                }
+            }
+        }
+    }
+    compileShader(type, source) {
+        if (!this.gl)
+            return null;
+        const shader = this.gl.createShader(type);
+        this.gl.shaderSource(shader, source);
+        this.gl.compileShader(shader);
+        if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
+            console.error('Shader compilation failed:', this.gl.getShaderInfoLog(shader));
+            this.gl.deleteShader(shader);
+            return null;
+        }
+        return shader;
+    }
+    resizeCanvas() {
+        if (!this.canvas)
+            return;
+        const rect = this.canvas.getBoundingClientRect();
+        const maxDpr = this.shader?.lowResolution ? 1.0 : (window.devicePixelRatio || 1);
+        const dpr = Math.min(maxDpr, window.devicePixelRatio || 1);
+        this.canvas.width = rect.width * dpr;
+        this.canvas.height = rect.height * dpr;
+        if (this.gl) {
+            this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+            this.uniforms.resolution = [this.canvas.width, this.canvas.height];
+        }
+    }
+    startAnimation() {
+        if (!this.animationId && this.isConnected) {
+            this.renderFrame();
+        }
+    }
+    stopAnimation() {
+        if (this.animationId) {
+            cancelAnimationFrame(this.animationId);
+            this.animationId = null;
+        }
+    }
+    cleanup() {
+        this.stopAnimation();
+        if (this.gl && this.program) {
+            this.gl.deleteProgram(this.program);
+            this.program = null;
+        }
+        this.gl = null;
+        this.uniformLocations = {};
+    }
+    render() {
+        if (!this.webglSupported) {
+            return html `<div class="fallback">WebGL not supported</div>`;
+        }
+        return html `
+            <div class="shader-container">
+                <canvas></canvas>
+                <div class="overlay-text">${this.overlayText}</div>
+            </div>
+        `;
+    }
+};
+ShaderCanvas.styles = [shaderCanvasCss];
+__decorate([
+    property({ type: Object })
+], ShaderCanvas.prototype, "shader", void 0);
+__decorate([
+    property({ type: String })
+], ShaderCanvas.prototype, "overlayText", void 0);
+__decorate([
+    query('canvas')
+], ShaderCanvas.prototype, "canvas", void 0);
+__decorate([
+    state()
+], ShaderCanvas.prototype, "webglSupported", void 0);
+ShaderCanvas = __decorate([
+    customElement('pb33f-shader-canvas')
+], ShaderCanvas);
+export { ShaderCanvas };

package/dist/components/shaders/flowing-waves-shader.d.ts

@@ -0,0 +1,2 @@
+import { ShaderModule } from './shader-base';
+export declare const flowingWavesShader: ShaderModule;

package/dist/components/shaders/flowing-waves-shader.js

@@ -0,0 +1,70 @@
+import { defaultVertexShader } from './shader-base';
+export const flowingWavesShader = {
+    vertexShader: defaultVertexShader,
+    lowResolution: true,
+    // Flowing waves shader with pb33f colors
+    fragmentShader: `
+vec3 tonemap(vec3 v) {
+    return mix(v, vec3(1.), smoothstep(1., 4., dot(v, vec3(1.))));
+}
+
+float f1(float x, float offset, float freq) {
+    return .4 * sin(0.523599 * x + offset) + .1 * sin(freq * x); // 0.523599 = radians(30)
+}
+
+void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
+    float scale = iResolution.y;
+    vec2 uv = (2. * fragCoord - iResolution.xy) / scale;
+
+    vec3 col = lightMode > 0.5 ? vec3(1.0) : vec3(0.0);
+
+    float offsets[3];
+    offsets[0] = 0.;
+    offsets[1] = 2.0944; // radians(120)
+    offsets[2] = 4.1888; // radians(240)
+    
+    float freqs[3];
+    freqs[0] = 2.793; // radians(160)
+    freqs[1] = 3.717; // radians(213)
+    freqs[2] = 3.246; // radians(186)
+
+    for (int i = 0; i < 3; ++i) {
+        float x = uv.x + 4. * iTime;
+        float y = f1(x, offsets[i], freqs[i]);
+        float uv_x = min(uv.x, 1. + .4 * sin(3.665 * iTime + 2.0944 * float(i))); // 3.665 = radians(210)
+
+        float r = uv.x / 40.;
+        float d1 = length(vec2(uv_x, y) - uv) - r;
+
+        // Use pb33f colors or light mode grays
+        vec3 waveColor;
+        if (lightMode > 0.5) {
+            waveColor = getLightModeColor(i) * 2.5;
+        } else {
+            if (i == 0) waveColor = primaryColor * 2.;
+            else if (i == 1) waveColor = secondaryColor * 2.;
+            else waveColor = tertiaryColor * 1.5;
+        }
+
+        float intensity = 1. / pow(max(1., d1 * scale), .8 + .1 * sin(4.276 * iTime + 2.0944 * float(i))); // 4.276 = radians(245)
+        if (lightMode > 0.5) {
+            col -= intensity * waveColor;
+        } else {
+            col += intensity * waveColor;
+        }
+    }
+
+    fragColor = vec4(tonemap(col), 1.);
+}
+    `,
+    uniforms: {
+        time: 0,
+        resolution: [800, 600],
+        primaryColor: [0, 1, 1], // Cyan
+        secondaryColor: [1, 0.4, 0.7], // Pink  
+        tertiaryColor: [0.5, 0.5, 1]
+    },
+    onFrame: (time, uniforms) => {
+        uniforms.time = time;
+    }
+};

package/dist/components/shaders/neon-canyon-shader.d.ts

@@ -0,0 +1,2 @@
+import { ShaderModule } from './shader-base';
+export declare const neonCanyonShader: ShaderModule;