juxscript 1.0.7 → 1.0.8

package/lib/components/docs-data.json

@@ -2413,6 +2413,18 @@
           "returns": "this",
           "description": "Set animationDuration"
         },
+        {
+          "name": "borderRadius",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set borderRadius"
+        },
+        {
+          "name": "showAccentBar",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set showAccentBar"
+        },
         {
           "name": "class",
           "params": "(value)",
@@ -3431,5 +3443,5 @@
     }
   ],
   "version": "1.0.0",
-  "lastUpdated": "2026-01-21T04:25:36.636Z"
+  "lastUpdated": "2026-01-21T05:03:38.497Z"
 }

package/lib/components/kpicard.ts

@@ -21,9 +21,11 @@ export interface KPICardOptions {
     width?: number;
     height?: number;
     theme?: 'google' | 'seriesa' | 'hr' | 'figma' | 'notion' | 'chalk' | 'mint';
-    styleMode?: 'default' | 'gradient' | 'glass' | 'outline';
+    styleMode?: 'default' | 'gradient' | 'glass' | 'outline' | 'glow';
     animate?: boolean;
     animationDuration?: number;
+    borderRadius?: number;
+    showAccentBar?: boolean;
     class?: string;
     style?: string;
 }
@@ -40,9 +42,11 @@ type KPICardState = {
     width: number;
     height: number;
     theme: 'google' | 'seriesa' | 'hr' | 'figma' | 'notion' | 'chalk' | 'mint';
-    styleMode: 'default' | 'gradient' | 'glass' | 'outline';
+    styleMode: 'default' | 'gradient' | 'glass' | 'outline' | 'glow';
     animate: boolean;
     animationDuration: number;
+    borderRadius: number;
+    showAccentBar: boolean;
     class: string;
     style: string;
 };
@@ -56,6 +60,7 @@ type KPICardState = {
  *     .value('78k')
  *     .delta(10)
  *     .theme('mint')
+ *     .styleMode('gradient')
  *     .render('#app');
  */
 export class KPICard {
@@ -75,6 +80,8 @@ export class KPICard {
         styleMode: 'default',
         animate: true,
         animationDuration: 600,
+        borderRadius: 16,
+        showAccentBar: true,
         class: '',
         style: ''
     };
@@ -100,6 +107,8 @@ export class KPICard {
         if (options.styleMode !== undefined) this.state.styleMode = options.styleMode;
         if (options.animate !== undefined) this.state.animate = options.animate;
         if (options.animationDuration !== undefined) this.state.animationDuration = options.animationDuration;
+        if (options.borderRadius !== undefined) this.state.borderRadius = options.borderRadius;
+        if (options.showAccentBar !== undefined) this.state.showAccentBar = options.showAccentBar;
         if (options.class !== undefined) this.state.class = options.class;
         if (options.style !== undefined) this.state.style = options.style;
     }
@@ -205,6 +214,16 @@ export class KPICard {
         return this;
     }
 
+    borderRadius(value: number): this {
+        this.state.borderRadius = value;
+        return this;
+    }
+
+    showAccentBar(value: boolean): this {
+        this.state.showAccentBar = value;
+        return this;
+    }
+
     class(value: string): this {
         this.state.class = value;
         return this;
@@ -223,6 +242,7 @@ export class KPICard {
             return this;
         }
 
+        this._loadThemeFont();
         this._buildCard(element as HTMLElement);
         return this;
     }
@@ -235,9 +255,21 @@ export class KPICard {
 
         // Clear and rebuild
         element.innerHTML = '';
+        this._loadThemeFont();
         this._buildCard(element as HTMLElement);
     }
 
+    private _loadThemeFont(): void {
+        const themeConfig = this._getThemeConfig();
+        
+        if (themeConfig.font && !document.querySelector(`link[href="${themeConfig.font}"]`)) {
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = themeConfig.font;
+            document.head.appendChild(link);
+        }
+    }
+
     private _buildCard(container: HTMLElement): void {
         const { width, height, class: className, style, animate, animationDuration } = this.state;
 
@@ -277,12 +309,18 @@ export class KPICard {
     }
 
     private _createContent(): HTMLElement {
-        const { title, value, delta, prefix, suffix, animate, animationDuration } = this.state;
+        const { title, value, delta, prefix, suffix, animate, animationDuration, styleMode, width, height } = this.state;
+        const themeConfig = this._getThemeConfig();
+
+        // Calculate scale factor based on default dimensions (280x200)
+        const baseWidth = 280;
+        const baseHeight = 200;
+        const scaleFactor = Math.min(width / baseWidth, height / baseHeight);
 
         const content = document.createElement('div');
         content.className = 'jux-kpicard-content';
         content.style.cssText = `
-            padding: 24px;
+            padding: ${24 * scaleFactor}px;
             display: flex;
             flex-direction: column;
             height: 100%;
@@ -294,11 +332,11 @@ export class KPICard {
         titleEl.className = 'jux-kpicard-title';
         titleEl.textContent = title;
         titleEl.style.cssText = `
-            font-size: 16px;
+            font-size: ${16 * scaleFactor}px;
             font-weight: 500;
-            color: #6b7280;
-            margin-bottom: 16px;
-            font-family: inherit;
+            color: ${styleMode === 'gradient' ? 'rgba(255, 255, 255, 0.95)' : '#6b7280'};
+            margin-bottom: ${16 * scaleFactor}px;
+            font-family: ${themeConfig.variables['--chart-font-family']};
         `;
         content.appendChild(titleEl);
 
@@ -307,7 +345,7 @@ export class KPICard {
         valueContainer.style.cssText = `
             display: flex;
             align-items: baseline;
-            margin-bottom: 12px;
+            margin-bottom: ${12 * scaleFactor}px;
         `;
 
         // Value
@@ -315,11 +353,12 @@ export class KPICard {
         valueEl.className = 'jux-kpicard-value';
         valueEl.textContent = `${prefix}${value}${suffix}`;
         valueEl.style.cssText = `
-            font-size: 56px;
+            font-size: ${56 * scaleFactor}px;
             font-weight: 800;
-            color: #1f2937;
+            color: ${styleMode === 'gradient' ? '#ffffff' : '#1f2937'};
             line-height: 1;
-            font-family: inherit;
+            font-family: ${themeConfig.variables['--chart-font-family']};
+            ${styleMode === 'glow' ? `text-shadow: 0 0 ${20 * scaleFactor}px ${themeConfig.colors[0]}40;` : ''}
         `;
 
         if (animate) {
@@ -345,21 +384,25 @@ export class KPICard {
             deltaContainer.style.cssText = `
                 display: flex;
                 align-items: center;
-                gap: 8px;
+                gap: ${8 * scaleFactor}px;
             `;
 
             // Arrow SVG
-            const arrow = this._createArrowSVG(delta > 0);
+            const arrow = this._createArrowSVG(delta > 0, styleMode === 'gradient', scaleFactor);
             deltaContainer.appendChild(arrow);
 
             // Delta text
             const deltaText = document.createElement('span');
             deltaText.textContent = `${delta > 0 ? '+' : ''}${delta}%`;
+            const deltaColor = styleMode === 'gradient' 
+                ? (delta > 0 ? 'rgba(255, 255, 255, 0.95)' : 'rgba(255, 200, 200, 0.95)')
+                : (delta > 0 ? '#10b981' : '#ef4444');
+            
             deltaText.style.cssText = `
-                font-size: 18px;
+                font-size: ${18 * scaleFactor}px;
                 font-weight: 700;
-                color: ${delta > 0 ? '#10b981' : '#ef4444'};
-                font-family: inherit;
+                color: ${deltaColor};
+                font-family: ${themeConfig.variables['--chart-font-family']};
             `;
 
             if (animate) {
@@ -382,37 +425,87 @@ export class KPICard {
         return content;
     }
 
-    private _createArrowSVG(isUp: boolean): SVGSVGElement {
+    private _createArrowSVG(isUp: boolean, isGradientMode: boolean, scaleFactor: number = 1): SVGSVGElement {
+        const baseWidth = 120;
+        const baseHeight = 32;
+        const width = baseWidth * scaleFactor;
+        const height = baseHeight * scaleFactor;
+
         const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svg.setAttribute('width', '24');
-        svg.setAttribute('height', '24');
-        svg.setAttribute('viewBox', '0 0 24 24');
+        svg.setAttribute('width', width.toString());
+        svg.setAttribute('height', height.toString());
+        svg.setAttribute('viewBox', `0 0 ${baseWidth} ${baseHeight}`);
         svg.setAttribute('fill', 'none');
         svg.style.flexShrink = '0';
 
-        const color = isUp ? '#10b981' : '#ef4444';
+        const color = isGradientMode 
+            ? (isUp ? 'rgba(255, 255, 255, 0.9)' : 'rgba(255, 200, 200, 0.9)')
+            : (isUp ? '#10b981' : '#ef4444');
 
-        // Create squiggly arrow path
-        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-        
         if (isUp) {
-            // Up arrow with squiggly line
-            path.setAttribute('d', 'M12 4L12 20M12 4L8 8M12 4L16 8M10 10Q11 11 12 10T14 10M10 14Q11 15 12 14T14 14');
+            // Upward trending arrow - wider
+            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+            path.setAttribute('d', 'M4 26 L22 18 L40 22 L58 14 L76 18 L94 10');
+            path.setAttribute('stroke', color);
+            path.setAttribute('stroke-width', '3');
+            path.setAttribute('stroke-linecap', 'round');
+            path.setAttribute('stroke-linejoin', 'round');
+            path.setAttribute('fill', 'none');
+            svg.appendChild(path);
+
+            // Points at each vertex - bigger circles
+            const points = [
+                { x: 4, y: 26 },
+                { x: 22, y: 18 },
+                { x: 40, y: 22 },
+                { x: 58, y: 14 },
+                { x: 76, y: 18 },
+                { x: 94, y: 10 }
+            ];
+
+            points.forEach(point => {
+                const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+                circle.setAttribute('cx', point.x.toString());
+                circle.setAttribute('cy', point.y.toString());
+                circle.setAttribute('r', '4.5');
+                circle.setAttribute('fill', color);
+                svg.appendChild(circle);
+            });
         } else {
-            // Down arrow with squiggly line
-            path.setAttribute('d', 'M12 20L12 4M12 20L8 16M12 20L16 16M10 10Q11 9 12 10T14 10M10 14Q11 13 12 14T14 14');
+            // Downward trending arrow - wider
+            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+            path.setAttribute('d', 'M4 6 L22 14 L40 10 L58 18 L76 14 L94 22');
+            path.setAttribute('stroke', color);
+            path.setAttribute('stroke-width', '3');
+            path.setAttribute('stroke-linecap', 'round');
+            path.setAttribute('stroke-linejoin', 'round');
+            path.setAttribute('fill', 'none');
+            svg.appendChild(path);
+
+            // Points at each vertex - bigger circles
+            const points = [
+                { x: 4, y: 6 },
+                { x: 22, y: 14 },
+                { x: 40, y: 10 },
+                { x: 58, y: 18 },
+                { x: 76, y: 14 },
+                { x: 94, y: 22 }
+            ];
+
+            points.forEach(point => {
+                const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+                circle.setAttribute('cx', point.x.toString());
+                circle.setAttribute('cy', point.y.toString());
+                circle.setAttribute('r', '4.5');
+                circle.setAttribute('fill', color);
+                svg.appendChild(circle);
+            });
         }
-        
-        path.setAttribute('stroke', color);
-        path.setAttribute('stroke-width', '2');
-        path.setAttribute('stroke-linecap', 'round');
-        path.setAttribute('stroke-linejoin', 'round');
 
-        svg.appendChild(path);
         return svg;
     }
 
-    private _getThemeColors(): string[] {
+    private _getThemeConfig() {
         const { theme } = this.state;
         
         switch (theme) {
@@ -436,63 +529,74 @@ export class KPICard {
     }
 
     private _applyThemeAndStyle(wrapper: HTMLElement): void {
-        const { styleMode } = this.state;
-        const colors = this._getThemeColors();
+        const { styleMode, borderRadius, showAccentBar, width, height } = this.state;
+        const themeConfig = this._getThemeConfig();
+        const colors = themeConfig.colors;
+
+        // Calculate scale factor for accent bar
+        const baseWidth = 280;
+        const scaleFactor = width / baseWidth;
+        const accentBarHeight = 4 * scaleFactor;
 
         const baseStyles = `
-            border-radius: 16px;
+            border-radius: ${borderRadius}px;
             overflow: hidden;
             position: relative;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            font-family: ${themeConfig.variables['--chart-font-family']};
         `;
 
         if (styleMode === 'gradient') {
             wrapper.style.cssText += `
                 ${baseStyles}
-                background: linear-gradient(135deg, ${colors[0]} 0%, ${colors[1]} 100%);
-                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+                background: linear-gradient(135deg, ${colors[0]} 0%, ${colors[1]} 50%, ${colors[2]} 100%);
+                box-shadow: 0 ${8 * scaleFactor}px ${32 * scaleFactor}px ${colors[0]}40;
             `;
-            
-            // Adjust text colors for gradient
-            const titleElements = wrapper.querySelectorAll('.jux-kpicard-title');
-            const valueElements = wrapper.querySelectorAll('.jux-kpicard-value');
-            titleElements.forEach(el => (el as HTMLElement).style.color = 'rgba(255, 255, 255, 0.9)');
-            valueElements.forEach(el => (el as HTMLElement).style.color = '#ffffff');
         } else if (styleMode === 'glass') {
             wrapper.style.cssText += `
                 ${baseStyles}
-                background: rgba(255, 255, 255, 0.7);
-                backdrop-filter: blur(10px);
-                border: 1px solid rgba(255, 255, 255, 0.8);
-                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+                background: linear-gradient(135deg, ${colors[0]}20 0%, ${colors[1]}20 100%);
+                backdrop-filter: blur(${12 * scaleFactor}px) saturate(180%);
+                border: ${1 * scaleFactor}px solid ${colors[0]}30;
+                box-shadow: 0 ${8 * scaleFactor}px ${32 * scaleFactor}px rgba(0, 0, 0, 0.1);
             `;
         } else if (styleMode === 'outline') {
             wrapper.style.cssText += `
                 ${baseStyles}
-                background: transparent;
-                border: 3px solid ${colors[0]};
+                background: #ffffff;
+                border: ${3 * scaleFactor}px solid ${colors[0]};
+                box-shadow: 0 ${4 * scaleFactor}px ${12 * scaleFactor}px ${colors[0]}20;
+            `;
+        } else if (styleMode === 'glow') {
+            wrapper.style.cssText += `
+                ${baseStyles}
+                background: #ffffff;
+                border: ${2 * scaleFactor}px solid ${colors[0]}40;
+                box-shadow: 0 0 ${30 * scaleFactor}px ${colors[0]}30, 0 ${4 * scaleFactor}px ${12 * scaleFactor}px rgba(0, 0, 0, 0.1);
             `;
         } else {
             // default
             wrapper.style.cssText += `
                 ${baseStyles}
                 background: #ffffff;
-                border: 1px solid #e5e7eb;
-                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+                border: ${1 * scaleFactor}px solid #e5e7eb;
+                box-shadow: 0 ${1 * scaleFactor}px ${3 * scaleFactor}px rgba(0, 0, 0, 0.1);
             `;
         }
 
-        // Apply theme color accent
-        const accentBar = document.createElement('div');
-        accentBar.style.cssText = `
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 4px;
-            background: linear-gradient(90deg, ${colors[0]}, ${colors[1]});
-        `;
-        wrapper.appendChild(accentBar);
+        // Apply theme color accent bar (optional)
+        if (showAccentBar) {
+            const accentBar = document.createElement('div');
+            accentBar.style.cssText = `
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                height: ${accentBarHeight}px;
+                background: linear-gradient(90deg, ${colors[0]}, ${colors[1]}, ${colors[2]});
+                border-radius: ${borderRadius}px ${borderRadius}px 0 0;
+            `;
+            wrapper.appendChild(accentBar);
+        }
     }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "lib/jux.js",