@pb33f/cowboy-components 0.7.18 → 0.8.0

package/dist/components/shaders/neon-canyon-shader.js

@@ -0,0 +1,265 @@
+import { defaultVertexShader } from './shader-base';
+export const neonCanyonShader = {
+    vertexShader: defaultVertexShader,
+    lowResolution: true,
+    fragmentShader: `
+        #define TIME iTime
+        #define RESOLUTION iResolution.xy
+        #define PI 3.141592654
+        
+        // From original shader - HSV conversion
+        const vec4 hsv2rgb_K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
+        vec3 hsv2rgb(vec3 c) {
+            vec3 p = abs(fract(c.xxx + hsv2rgb_K.xyz) * 6.0 - hsv2rgb_K.www);
+            return c.z * mix(hsv2rgb_K.xxx, clamp(p - hsv2rgb_K.xxx, 0.0, 1.0), c.y);
+        }
+        
+        // From original - Alpha blending
+        vec3 alphaBlend(vec3 back, vec4 front) {
+            return mix(back, front.xyz, front.w);
+        }
+        
+        vec4 alphaBlend(vec4 back, vec4 front) {
+            float w = front.w + back.w*(1.0-front.w);
+            vec3 xyz = (front.xyz*front.w + back.xyz*back.w*(1.0-front.w))/w;
+            return w > 0.0 ? vec4(xyz, w) : vec4(0.0);
+        }
+        
+        // From original - smoothing functions
+        float pmax(float a, float b, float k) {
+            float h = clamp(0.5+0.5*(b-a)/k, 0.0, 1.0);
+            return mix(b, a, h) + k*h*(1.0-h);
+        }
+        
+        float tanh_approx(float x) {
+            float x2 = x*x;
+            return clamp(x*(27.0 + x2)/(27.0+9.0*x2), -1.0, 1.0);
+        }
+        
+        // From original - Hash functions for noise
+        float hash(float co) {
+            return fract(sin(co*12.9898) * 13758.5453);
+        }
+        
+        float hash(vec2 p) {
+            float a = dot(p, vec2(127.1, 311.7));
+            return fract(sin(a)*43758.5453123);
+        }
+        
+        // From original - Value noise
+        float vnoise(vec2 p) {
+            vec2 i = floor(p);
+            vec2 f = fract(p);
+            vec2 u = f*f*(3.0-2.0*f);
+            
+            float a = hash(i + vec2(0.0,0.0));
+            float b = hash(i + vec2(1.0,0.0));
+            float c = hash(i + vec2(0.0,1.0));
+            float d = hash(i + vec2(1.0,1.0));
+            
+            float m0 = mix(a, b, u.x);
+            float m1 = mix(c, d, u.x);
+            float m2 = mix(m0, m1, u.y);
+            
+            return m2;
+        }
+        
+        // From original - FBM
+        float fbm(vec2 p) {
+            const float aa = 0.35;
+            const float pp = 2.2-0.4;
+            
+            float sum = 0.0;
+            float a = 1.0;
+            
+            for (int i = 0; i < 3; ++i) {
+                sum += a*vnoise(p);
+                a *= aa;
+                p *= pp;
+            }
+            
+            return sum;
+        }
+        
+        // From original - Height function for canyon
+        float height(vec2 p) {
+            return fbm(p)*smoothstep(0.0, 1.25+0.25*sin(0.5*p.y), abs(p.x))-0.35;
+        }
+        
+        // From original - Camera movement through canyon
+        vec3 offset(float z) {
+            float a = z;
+            vec2 p = -0.05*(vec2(cos(a), sin(a*sqrt(2.0))) + vec2(cos(a*sqrt(0.75)), sin(a*sqrt(0.5))));
+            return vec3(p, z);
+        }
+        
+        vec3 doffset(float z) {
+            float eps = 0.1;
+            return 0.5*(offset(z + eps) - offset(z - eps))/eps;
+        }
+        
+        vec3 ddoffset(float z) {
+            float eps = 0.1;
+            return 0.5*(doffset(z + eps) - doffset(z - eps))/eps;
+        }
+        
+        // Modified sun function with neon colors
+        float sun(vec2 p) {
+            const float ch = 0.0125;
+            vec2 sp = p;
+            vec2 cp = p;
+            float cy = cp.y;
+            cp.y = mod(cp.y + ch*3.0, ch*6.0) - ch*3.0;
+            float d0 = length(sp) - 0.5;
+            float d1 = abs(cp.y) - ch;
+            float d2 = cy + ch*3.0;
+            float d = d0;
+            d = pmax(d, -max(d1, d2), ch*2.0);
+            return d;
+        }
+        
+        // Modified plane function for canyon walls
+        vec4 plane(vec3 ro, vec3 rd, vec3 pp, vec3 off, float aa, float n) {
+            float h = hash(n);
+            float s = mix(0.05, 0.25, h);
+            
+            vec3 hn;
+            vec2 p = (pp-off*2.0*vec3(1.0, 1.0, 0.0)).xy;
+            
+            float he = height(vec2(p.x, pp.z));
+            
+            float d = p.y-he;
+            float t = smoothstep(aa, -aa, d);
+            
+            vec3 col;
+            float g = exp(-90.*max(abs(d), 0.0));
+
+            if (lightMode > 0.5) {
+                // Light mode: use distinct grays
+                col = vec3(0.95);
+                vec3 grayMix = mix(getLightModeColor(0), getLightModeColor(1), 0.5 + 0.5*sin(pp.z*0.3));
+                col -= grayMix * g * 0.8;
+                col -= (he*he-pp.y-0.125)*0.5 * getLightModeColor(2) * 0.4;
+            } else {
+                // Dark mode: neon colors
+                vec3 hsv = vec3(0.55 + 0.1*sin(pp.z*0.6), 0.90, 0.025);
+                col = hsv2rgb(hsv);
+                col += mix(primaryColor, secondaryColor, 0.5 + 0.5*sin(pp.z*0.3)) * g * 0.5;
+                col += (he*he-pp.y-0.125)*0.5 * primaryColor * 0.2;
+            }
+            
+            return vec4(col, tanh_approx(t+g));
+        }
+        
+        // Background color based on theme
+        vec3 gridBackground(vec3 ro, vec3 rd) {
+            return lightMode > 0.5 ? vec3(1.0) : vec3(0.0);
+        }
+        
+        // Main color function from original
+        vec3 color(vec3 ww, vec3 uu, vec3 vv, vec3 ro, vec2 p) {
+            float lp = length(p);
+            vec2 np = p + 1.0/RESOLUTION.xy;
+            float rdd = 2.0;
+            vec3 rd = normalize(p.x*uu + p.y*vv + rdd*ww);
+            vec3 nrd = normalize(np.x*uu + np.y*vv + rdd*ww);
+            
+            const float planeDist = 1.0-0.5;
+            const int furthest = 24;
+            const int fadeFrom = 22; // furthest-2
+            
+            const float fadeDist = planeDist*float(furthest - fadeFrom);
+            float nz = floor(ro.z / planeDist);
+            
+            vec3 skyCol = gridBackground(ro, rd);
+            
+            vec4 acol = vec4(0.0);
+            const float cutOff = 0.95;
+            bool cutOut = false;
+            
+            // Steps from nearest to furthest plane and accumulates the color 
+            for (int i = 1; i <= furthest; ++i) {
+                float pz = planeDist*nz + planeDist*float(i);
+                
+                float pd = (pz - ro.z)/rd.z;
+                
+                vec3 pp = ro + rd*pd;
+                
+                if (pp.y < 1.25 && pd > 0.0 && acol.w < cutOff) {
+                    vec3 npp = ro + nrd*pd;
+                    
+                    float aa = 3.0*length(pp - npp);
+                    
+                    vec3 off = offset(pp.z);
+                    
+                    vec4 pcol = plane(ro, rd, pp, off, aa, nz+float(i));
+                    
+                    float nz = pp.z-ro.z;
+                    float fadeIn = smoothstep(planeDist*float(furthest), planeDist*float(fadeFrom), nz);
+                    float fadeOut = smoothstep(0.0, planeDist*0.1, nz);
+                    pcol.xyz = mix(skyCol, pcol.xyz, fadeIn);
+                    pcol.w *= fadeOut;
+                    pcol = clamp(pcol, 0.0, 1.0);
+                    
+                    acol = alphaBlend(pcol, acol);
+                } else {
+                    cutOut = true;
+                    acol.w = acol.w > cutOff ? 1.0 : acol.w;
+                    break;
+                }
+            }
+            
+            vec3 col = alphaBlend(skyCol, acol);
+            return col;
+        }
+        
+        // Main effect function
+        vec3 effect(vec2 p, vec2 q) {
+            float tm = TIME*0.25;
+            vec3 ro = offset(tm);
+            vec3 dro = doffset(tm);
+            vec3 ddro = ddoffset(tm);
+            
+            vec3 ww = normalize(dro);
+            vec3 uu = normalize(cross(normalize(vec3(0.0,1.0,0.0)+ddro), ww));
+            vec3 vv = normalize(cross(ww, uu));
+            
+            vec3 col = color(ww, uu, vv, ro, p);
+            
+            return col;
+        }
+        
+        // Post processing
+        vec3 postProcess(vec3 col, vec2 q) {
+            col = clamp(col, 0.0, 1.0);
+            col = pow(col, vec3(1.0/2.2));
+            col = col*0.6+0.4*col*col*(3.0-2.0*col);
+            col = mix(col, vec3(dot(col, vec3(0.33))), -0.4);
+            col *= 0.5+0.5*pow(19.0*q.x*q.y*(1.0-q.x)*(1.0-q.y),0.7);
+            return col;
+        }
+        
+        void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+            vec2 q = fragCoord.xy/RESOLUTION.xy;
+            vec2 p = -1.0 + 2.0 * q;
+            p.x *= RESOLUTION.x/RESOLUTION.y;
+            
+            vec3 col = vec3(0.0);
+            col = effect(p, q);
+            col *= smoothstep(0.0, 4.0, TIME);
+            col = postProcess(col, q);
+            
+            fragColor = vec4(col, 1.0);
+        }
+    `,
+    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-lines-shader.d.ts

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

package/dist/components/shaders/neon-lines-shader.js

@@ -0,0 +1,181 @@
+import { defaultVertexShader } from './shader-base';
+export const neonLinesShader = {
+    vertexShader: defaultVertexShader,
+    lowResolution: true,
+    // Neon lines tunnel shader
+    fragmentShader: `
+#define RAYMARCH_ITERATIONS 30.0
+#define TIME (iTime * 0.4)
+#define LINE_LENGTH 1.0
+#define LINE_SPACE 1.0
+#define LINE_WIDTH 0.007
+#define BOUNDING_CYLINDER 1.8
+#define INSIDE_CYLINDER 0.32
+#define EPS 0.0001
+#define FOG_DISTANCE 20.0
+
+// Use pb33f colors
+#define FIRST_COLOR primaryColor * 1.2
+#define SECOND_COLOR secondaryColor
+
+float hash12(vec2 x)
+{
+    return fract(sin(dot(x, vec2(42.2347, 43.4271))) * 342.324234);   
+}
+
+vec2 hash22(vec2 x)
+{
+    return fract(sin(x * mat2(23.421, 24.4217, 25.3271, 27.2412)) * 342.324234);   
+}
+
+vec3 hash33(vec3 x)
+{
+    return fract(sin(x * mat3(23.421, 24.4217, 25.3271, 27.2412, 32.21731, 21.27641, 20.421, 27.4217, 22.3271)) * 342.324234);   
+}
+
+vec3 castPlanePoint(vec2 fragCoord)
+{
+    vec2 uv = (2.0 * fragCoord - iResolution.xy) / iResolution.x;
+    return vec3(uv.x, uv.y, -1.0);
+}
+
+float planeSDF(vec3 point)
+{
+    return point.y;
+}
+
+//source https://iquilezles.org/articles/distfunctions
+float boxSDF( vec3 point, vec3 bounds )
+{
+    vec3 q = abs(point) - bounds;
+    return length(max(q, 0.0)) + min(max(q.x, max(q.y, q.z)), 0.0);
+}
+
+//rgb - colors
+//a - sdf
+vec4 repeatBoxSDF(vec3 point)
+{
+    vec3 rootPoint = floor(vec3(point.x / LINE_SPACE, point.y / LINE_SPACE, point.z / LINE_LENGTH)); 
+    rootPoint.z *= LINE_LENGTH;
+    rootPoint.xy *= LINE_SPACE;
+    float minSDF = 10000.0;
+    vec3 mainColor = vec3(0.0);
+    
+    for (float x = 0.0; x <= 1.1; x++)
+    {
+        for (float y = 0.0; y <= 1.1; y++)
+        {
+            for (float z = 0.0; z <= 1.1; z++)
+            {
+                vec3 tempRootPoint = rootPoint + vec3(x * LINE_SPACE, y * LINE_SPACE, z * LINE_LENGTH);
+                
+                vec3 lineHash = hash33(tempRootPoint);
+                lineHash.z = pow(lineHash.z, 10.0);
+                
+                float hash = hash12(tempRootPoint.xy) - 0.5;
+                tempRootPoint.z += hash * LINE_LENGTH;
+                
+                vec3 boxCenter = tempRootPoint + vec3(0.5 * LINE_SPACE, 0.5 * LINE_SPACE, 0.5 * LINE_LENGTH);
+                boxCenter.xy += (lineHash.xy - 0.5) * LINE_SPACE;
+                vec3 boxSize = vec3(LINE_WIDTH, LINE_WIDTH, LINE_LENGTH * (1.0 - lineHash.z));
+                
+                vec3 color = FIRST_COLOR;
+                if(lineHash.x < 0.5) color = SECOND_COLOR;
+                
+                float sdf = boxSDF(point - boxCenter, boxSize);
+                if (sdf < minSDF)
+                {
+                    mainColor = color;
+                    minSDF = sdf;
+                }
+            }
+        }
+    }
+    
+    return vec4(mainColor, minSDF);
+}
+
+float cylinderSDF(vec3 point, float radius)
+{
+    return length(point.xy) - radius;
+}
+
+float multiplyObjects(float o1, float o2)
+{
+    return max(o1, o2);   
+}
+
+vec3 spaceBounding(vec3 point)
+{
+    return vec3(sin(point.z * 0.15) * 5.0, cos(point.z * 0.131) * 5.0, 0.0); 
+}
+
+//rgb - color,
+//a - sdf
+vec4 objectSDF(vec3 point)
+{
+    point += spaceBounding(point);
+    
+    vec4 lines = repeatBoxSDF(point);
+    float cylinder = cylinderSDF(point, BOUNDING_CYLINDER);
+    float insideCylinder = -cylinderSDF(point, INSIDE_CYLINDER);
+    
+    float object = multiplyObjects(lines.a, cylinder);
+    object = multiplyObjects(object, insideCylinder);
+    return vec4(lines.rgb, object);
+}
+
+vec3 rayMarch(vec3 rayOrigin, vec3 rayDirection, out vec3 color)
+{
+    color = vec3(0.0);
+    float dist = 0.0;
+    for (float i = 0.0; i < RAYMARCH_ITERATIONS; i++)
+    {
+        vec4 sdfData = objectSDF(rayOrigin);
+        float fade = 1.0 - dist / FOG_DISTANCE;
+        color += sdfData.rgb * max(0.0, 0.5 - sdfData.a) * fade * 0.08;
+        rayOrigin += rayDirection * sdfData.a * 0.7;
+        dist += sdfData.a;
+        if (dist > FOG_DISTANCE || length(rayOrigin.xy) > BOUNDING_CYLINDER + 5.0) break;
+    }
+
+    return rayOrigin;
+}
+ 
+void mainImage( out vec4 fragColor, in vec2 fragCoord )
+{
+    vec3 cameraCenter = vec3(0.0, 0.0, -TIME * 10.0);
+    cameraCenter -= spaceBounding(cameraCenter);
+
+    vec3 nextCameraCenter = vec3(0.0, 0.0, -(TIME + 0.4) * 10.0);
+    nextCameraCenter -= spaceBounding(nextCameraCenter);
+
+    vec3 velocityVector = -normalize(nextCameraCenter - cameraCenter);
+    vec3 cameraUp = -normalize(cross(velocityVector, vec3(1.0, 0.0, 0.0)));
+    vec3 cameraRight = -(cross(velocityVector, cameraUp));
+
+    mat3 cameraRotation = mat3(cameraRight, cameraUp, velocityVector);
+
+    vec3 rayOrigin = cameraCenter;
+    vec3 rayDirection = cameraRotation * normalize(castPlanePoint(fragCoord));
+
+    vec3 color = vec3(0.0);
+    rayMarch(rayOrigin, rayDirection, color);
+
+    vec3 ambient = mix(SECOND_COLOR, FIRST_COLOR, 0.5) * 0.08;
+    color = color + ambient;
+
+    fragColor = vec4(color, 1.0);
+}
+    `,
+    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-squircles-shader.d.ts

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

package/dist/components/shaders/neon-squircles-shader.js

@@ -0,0 +1,56 @@
+import { defaultVertexShader } from './shader-base';
+export const neonSquirclesShader = {
+    vertexShader: defaultVertexShader,
+    lowResolution: true,
+    // Neon Squircles shader - compact and colorful
+    fragmentShader: `
+/* "Neon Squircles" by @kishimisu - adapted for pb33f colors */
+void mainImage(out vec4 O, vec2 F) {
+    vec2 r = iResolution.xy;
+    vec2 u = (F+F-r)/r.y;
+    u *= 0.35;  // Zoom in more (was 0.5, now 0.35 for 30% more zoom)
+
+    // Background: white for light mode, black for dark mode
+    O = lightMode > 0.5 ? vec4(1.0, 1.0, 1.0, 1.0) : vec4(0.0, 0.0, 0.0, 1.0);
+
+    for (float i = 0.0; i < 20.0; i += 1.0) {
+        float dist = abs(length(u*u) - i*0.04) + 0.005;
+        float intensity = 0.003 / dist;
+
+        vec3 color;
+        if (lightMode > 0.5) {
+            // Light mode: use distinct grays
+            color = mix(getLightModeColor(0) * 1.5, getLightModeColor(1) * 1.5, sin(i*0.3 + iTime)*0.5 + 0.5);
+            color = mix(color, getLightModeColor(2) * 0.8, cos(i*0.5 - iTime*0.5)*0.3 + 0.3);
+        } else {
+            // Dark mode: neon colors
+            color = mix(primaryColor * 1.5, secondaryColor * 1.5, sin(i*0.3 + iTime)*0.5 + 0.5);
+            color = mix(color, tertiaryColor * 0.8, cos(i*0.5 - iTime*0.5)*0.3 + 0.3);
+        }
+
+        // Animation
+        float anim = smoothstep(0.35, 0.4, abs(abs(mod(iTime, 2.0) - i*0.1) - 1.0));
+
+        if (lightMode > 0.5) {
+            O.rgb -= intensity * color * anim * 0.8;  // Subtract for light mode
+        } else {
+            O.rgb += intensity * color * anim * 0.8;  // Add for dark mode
+        }
+
+        // Rotation
+        float angle = (iTime + i) * 0.03;
+        u *= mat2(cos(angle), sin(angle), -sin(angle), cos(angle));
+    }
+}
+    `,
+    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/retro-grid-shader.d.ts

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

package/dist/components/shaders/retro-grid-shader.js

@@ -0,0 +1,53 @@
+import { defaultVertexShader } from './shader-base';
+export const retroGridShader = {
+    vertexShader: defaultVertexShader,
+    fragmentShader: `
+        precision mediump float;
+        
+        uniform float time;
+        uniform vec2 resolution;
+        uniform vec3 primaryColor;
+        uniform vec3 secondaryColor;
+        uniform vec3 tertiaryColor;
+        
+        void main() {
+            vec2 uv = gl_FragCoord.xy / resolution.xy;
+            
+            // Simple moving grid
+            float gridSize = 20.0;
+            vec2 grid = uv * gridSize;
+            grid.y -= time * 0.5; // Slow upward movement
+            
+            // Create grid lines (simple modulo)
+            float horizontalLine = mod(grid.y, 1.0) < 0.1 ? 1.0 : 0.0;
+            float verticalLine = mod(grid.x, 1.0) < 0.05 ? 1.0 : 0.0;
+            float lines = max(horizontalLine, verticalLine);
+            
+            // Add perspective fade
+            lines *= (1.0 - uv.y * 0.7);
+            
+            // Background and line colors
+            vec3 bgColor = vec3(0.0, 0.0, 0.0);
+            vec3 lineColor = vec3(0.0, 1.0, 1.0); // Bright cyan
+            
+            // Mix colors
+            vec3 color = mix(bgColor, lineColor, lines);
+            
+            // Add scanlines
+            float scanline = sin(uv.y * 200.0) * 0.05;
+            color += vec3(scanline * 0.5, scanline, scanline);
+            
+            gl_FragColor = vec4(color, 1.0);
+        }
+    `,
+    uniforms: {
+        time: 0,
+        resolution: [800, 600],
+        primaryColor: [0, 1, 1], // cyan
+        secondaryColor: [1, 0, 1], // magenta
+        tertiaryColor: [0.5, 0.5, 1] // light blue
+    },
+    onFrame: (time, uniforms) => {
+        uniforms.time = time;
+    }
+};

package/dist/components/shaders/shader-base.d.ts

@@ -0,0 +1,9 @@
+export interface ShaderModule {
+    vertexShader: string;
+    fragmentShader: string;
+    uniforms?: Record<string, any>;
+    onFrame?: (time: number, uniforms: Record<string, any>) => void;
+    lowResolution?: boolean;
+}
+export declare const defaultVertexShader = "\n    attribute vec2 position;\n    void main() {\n        gl_Position = vec4(position, 0.0, 1.0);\n    }\n";
+export declare const webgl2VertexShader = "#version 300 es\nin vec2 position;\nvoid main() {\n    gl_Position = vec4(position, 0.0, 1.0);\n}";

package/dist/components/shaders/shader-base.js

@@ -0,0 +1,11 @@
+export const defaultVertexShader = `
+    attribute vec2 position;
+    void main() {
+        gl_Position = vec4(position, 0.0, 1.0);
+    }
+`;
+export const webgl2VertexShader = `#version 300 es
+in vec2 position;
+void main() {
+    gl_Position = vec4(position, 0.0, 1.0);
+}`;

package/dist/components/terminal/terminal-example.css.js

@@ -14,6 +14,10 @@ export default css `
         overflow-x: auto;
     }
 
+    :host-context(html[theme="light"]) :host {
+        text-shadow: none;
+    }
+
     pre {
         margin: 0;
         padding-left: 0;

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

@@ -10,10 +10,9 @@ import terminalExampleCss from "./terminal-example.css.js";
 let TerminalExampleComponent = class TerminalExampleComponent extends LitElement {
     getValue() {
         const slot = this.shadowRoot?.querySelector('slot.command');
-        // @ts-ignore
         const slots = slot?.assignedNodes({ flatten: true });
-        if (slots) {
-            return slots[0].data.trim();
+        if (slots && slots[0]) {
+            return slots[0].data?.trim() ?? "";
         }
         return "";
     }

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

@@ -4,8 +4,6 @@ export default css `
     .render-stream {
         font-family: var(--font-stack), monospace;
         color: var(--font-color-sub3);
-        margin-left: 10px;
-        height: 250px;
         overflow-y: auto;
         content-visibility: auto;
     }
@@ -62,6 +60,10 @@ export default css `
         font-family: var(--font-stack-bold), monospace;
     }
 
+    :host-context(html[theme="light"]) .active_message {
+        text-shadow: none;
+    }
+
     .render-stream .message.active_message::before {
         //content: "> ";
         //color: var(--terminal-green);
@@ -138,6 +140,10 @@ export default css `
         text-shadow: 0 0 10px var(--font-color-sub1);
         font-family: var(--font-stack), monospace;
     }
+
+    :host-context(html[theme="light"]) .date {
+        text-shadow: none;
+    }
     
     #terminal-drawer {
         --size: 300px;
@@ -174,6 +180,10 @@ export default css `
         text-shadow: 0 0 10px var(--primary-color-lowalpha);
     }
 
+    :host-context(html[theme="light"]) #terminal-drawer::part(title) {
+        text-shadow: none;
+    }
+
     .loading {
         text-align: center;
     }

package/dist/components/terminal-emulator/terminal-emulator.d.ts

@@ -1,8 +1,14 @@
 import { LitElement } from 'lit';
 import '@shoelace-style/shoelace/dist/components/drawer/drawer.js';
 import '@shoelace-style/shoelace/dist/components/format-date/format-date.js';
+export declare enum ConsoleMessageType {
+    Info = "info",
+    Error = "error",
+    Warning = "warning",
+    Success = "success"
+}
 export type TerminalMessage = {
-    type: 'info' | 'error' | 'warning' | 'success';
+    type: ConsoleMessageType;
     message: string;
     metadata?: Record<string, any>;
     timestamp: string;