juxscript 1.0.59 → 1.0.61

package/machinery/server.js

@@ -69,11 +69,25 @@ async function serve(httpPort = 3000, wsPort = 3001, distDir = './.jux-dist') {
     next();
   });
 
+  // ✅ ADD: Explicit MIME type for JavaScript files
+  app.use((req, res, next) => {
+    if (req.path.endsWith('.js')) {
+      res.setHeader('Content-Type', 'application/javascript; charset=utf-8');
+    }
+    next();
+  });
+
   // Serve static files
   app.use(express.static(absoluteDistDir));
 
-  // SPA fallback
-  app.get('*', (req, res) => {
+  // ✅ FIX: Only apply SPA fallback to routes, not static files
+  app.use((req, res, next) => {
+    // Skip SPA fallback for file extensions (static assets)
+    if (/\.[a-zA-Z0-9]+$/.test(req.path)) {
+      return res.status(404).send('File not found');
+    }
+
+    // SPA fallback for routes only
     if (req.accepts('html')) {
       const indexPath = path.join(absoluteDistDir, 'index.html');
       if (fs.existsSync(indexPath)) {

package/machinery/ts-shim.js

@@ -0,0 +1,46 @@
+import esbuild from 'esbuild';
+
+/**
+ * TypeScript Shim - Strips type annotations using esbuild
+ * This is rock-solid and handles ALL TypeScript syntax correctly
+ */
+
+/**
+ * Strip TypeScript type annotations from code using esbuild
+ * 
+ * @param {string} code - TypeScript source code
+ * @returns {string} - JavaScript code with types removed
+ */
+export function stripTypes(code) {
+    try {
+        // ✅ Use esbuild to transform TypeScript → JavaScript
+        const result = esbuild.transformSync(code, {
+            loader: 'ts',
+            format: 'esm',
+            target: 'es2020'
+        });
+
+        return result.code;
+    } catch (err) {
+        console.error('❌ Failed to strip TypeScript:', err.message);
+        // Return original code if transformation fails
+        return code;
+    }
+}
+
+/**
+ * Check if a file is TypeScript based on extension
+ */
+export function isTypeScript(filePath) {
+    return filePath.endsWith('.ts') || filePath.endsWith('.tsx');
+}
+
+/**
+ * Load and parse a file, automatically stripping types if it's TypeScript
+ */
+export function loadAndStripTypes(filePath, fileContent) {
+    if (isTypeScript(filePath)) {
+        return stripTypes(fileContent);
+    }
+    return fileContent;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.0.59",
+  "version": "1.0.61",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "lib/jux.js",
@@ -57,6 +57,9 @@
     "find-jux-classes": "node scripts/find-jux-classes.js"
   },
   "dependencies": {
+    "acorn": "^8.15.0",
+    "axios": "^1.6.0",
+    "chart.js": "^4.5.1",
     "chokidar": "^3.5.3",
     "esbuild": "^0.19.0",
     "express": "^4.18.2",
@@ -67,6 +70,7 @@
     "@types/express": "^4.17.17",
     "@types/node": "^20.0.0",
     "@types/ws": "^8.5.5",
+    "acorn-walk": "^8.3.4",
     "jsdom": "^27.4.0",
     "typescript": "^5.0.0"
   }

package/presets/default/all.jux

@@ -21,9 +21,9 @@ jux.hero('all-hero', {
 }).render("#appmain-content");
 jux.divider().render("#appmain-content");
 
-jux.heading('chart-heading').level(3).text('jux.chart').render("#appmain-content");
+jux.heading('chart-heading').level(3).text('jux.chart, jux.calendar, jux.chatbox, jux.aiwidget, jux.media, jux.icons, jux.data!').render("#appmain-content");
 jux.element('all-element')
-.text('Need Charts!')
+.text('Need Elements! shadcn and tailwind analysis. Mobiles. ios/android - .text')
 .render("#appmain-content");
 jux.divider().render("#appmain-content");
 

package/presets/default/layout.css

@@ -1489,4 +1489,124 @@ p {
   .jux-radio-options {
     flex-direction: column;
   }
+}
+
+/* ============================================
+   GRID COMPONENT
+   ============================================ */
+.jux-grid {
+  display: grid;
+  position: relative;
+}
+
+.jux-grid-cell {
+  position: relative;
+  overflow: auto;
+  min-width: 0;  /* Prevent grid blowout */
+  min-height: 0;
+}
+
+/* ============================================
+   GRID GRIDDER MODE (Blueprint Visualization)
+   ============================================ */
+.jux-grid-gridder {
+  /* Blueprint-style background */
+  background-color: #0a1929;
+  background-image: 
+    linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
+  background-size: 20px 20px;
+  padding: 2px;
+  border: 2px solid #3b82f6;
+  box-shadow: 
+    0 0 0 1px rgba(59, 130, 246, 0.2),
+    inset 0 0 20px rgba(59, 130, 246, 0.1);
+}
+
+.jux-grid-gridder .jux-grid-cell {
+  /* Cell styling in gridder mode */
+  background: rgba(15, 23, 42, 0.8);
+  border: 1px solid rgba(59, 130, 246, 0.4);
+  box-shadow: inset 0 0 10px rgba(59, 130, 246, 0.05);
+  min-height: 80px;  /* Ensure cells are visible */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  transition: all 0.2s ease;
+}
+
+.jux-grid-gridder .jux-grid-cell:hover {
+  background: rgba(30, 41, 59, 0.9);
+  border-color: rgba(59, 130, 246, 0.8);
+  box-shadow: 
+    inset 0 0 15px rgba(59, 130, 246, 0.15),
+    0 0 10px rgba(59, 130, 246, 0.3);
+}
+
+/* Coordinate label (top-left corner) */
+.jux-grid-gridder .jux-grid-cell::before {
+  content: attr(data-row) ',' attr(data-col);
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  font-size: 10px;
+  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
+  font-weight: 600;
+  color: rgba(59, 130, 246, 0.8);
+  background: rgba(15, 23, 42, 0.95);
+  padding: 2px 6px;
+  border-radius: 3px;
+  border: 1px solid rgba(59, 130, 246, 0.3);
+  letter-spacing: 0.5px;
+  z-index: 10;
+}
+
+/* ID label (bottom-right corner) */
+.jux-grid-gridder .jux-grid-cell::after {
+  content: '#' attr(id);
+  position: absolute;
+  bottom: 4px;
+  right: 4px;
+  font-size: 9px;
+  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
+  color: rgba(148, 163, 184, 0.6);
+  background: rgba(15, 23, 42, 0.8);
+  padding: 2px 5px;
+  border-radius: 2px;
+  border: 1px solid rgba(71, 85, 105, 0.3);
+  max-width: calc(100% - 12px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Grid lines (column separators) */
+.jux-grid-gridder .jux-grid-cell:not(:nth-child(1))::before {
+  box-shadow: 0 0 5px rgba(59, 130, 246, 0.4);
+}
+
+/* Remove default debug styles when gridder is active */
+.jux-grid-gridder.jux-grid-debug .jux-grid-cell {
+  /* Gridder overrides debug mode */
+  border-color: rgba(59, 130, 246, 0.4);
+  background: rgba(15, 23, 42, 0.8);
+}
+
+/* ============================================
+   GRID DEBUG MODE (Legacy - simpler version)
+   ============================================ */
+.jux-grid-debug .jux-grid-cell {
+  border: 1px dashed var(--color-border);
+  background: var(--color-surface-base);
+}
+
+.jux-grid-debug .jux-grid-cell::before {
+  content: attr(data-row) '-' attr(data-col);
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  font-size: 10px;
+  color: var(--color-text-tertiary);
+  opacity: 0.5;
 }

package/lib/components/charts/areachart.ts

@@ -1,315 +0,0 @@
-import { BaseChart, BaseChartState, ChartDataPoint } from './lib/BaseChart.js';
-
-export interface AreaChartOptions {
-    data?: ChartDataPoint[];
-    title?: string;
-    subtitle?: string;
-    xAxisLabel?: string;
-    yAxisLabel?: string;
-    showTicksX?: boolean;
-    showTicksY?: boolean;
-    showScaleX?: boolean;
-    showScaleY?: boolean;
-    scaleXUnit?: string;
-    scaleYUnit?: string;
-    showLegend?: boolean;
-    legendOrientation?: 'horizontal' | 'vertical';
-    showDataTable?: boolean;
-    showDataLabels?: boolean;
-    animate?: boolean;
-    animationDuration?: number;
-    width?: number;
-    height?: number;
-    colors?: string[];
-    class?: string;
-    style?: string;
-    theme?: 'google' | 'seriesa' | 'hr' | 'figma' | 'notion' | 'chalk' | 'mint';
-    styleMode?: 'default' | 'gradient' | 'outline' | 'dashed' | 'glow' | 'glass';
-    borderRadius?: number;
-}
-
-interface AreaChartState extends BaseChartState {
-    data: ChartDataPoint[];
-}
-
-export class AreaChart extends BaseChart<AreaChartState> {
-    constructor(id: string, options: AreaChartOptions = {}) {
-        const defaultColors = ['#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6'];
-        const randomColor = defaultColors[Math.floor(Math.random() * defaultColors.length)];
-
-        super(id, {
-            data: options.data ?? [],
-            title: options.title ?? '',
-            subtitle: options.subtitle ?? '',
-            xAxisLabel: options.xAxisLabel ?? '',
-            yAxisLabel: options.yAxisLabel ?? '',
-            showTicksX: options.showTicksX ?? true,
-            showTicksY: options.showTicksY ?? true,
-            showScaleX: options.showScaleX ?? true,
-            showScaleY: options.showScaleY ?? true,
-            scaleXUnit: options.scaleXUnit ?? '',
-            scaleYUnit: options.scaleYUnit ?? '',
-            showLegend: options.showLegend ?? false,
-            legendOrientation: options.legendOrientation ?? 'horizontal',
-            showDataTable: options.showDataTable ?? false,
-            showDataLabels: options.showDataLabels ?? true,
-            animate: options.animate ?? true,
-            animationDuration: options.animationDuration ?? 800,
-            width: options.width ?? 600,
-            height: options.height ?? 400,
-            colors: options.colors ?? [randomColor],
-            class: options.class ?? '',
-            style: options.style ?? '',
-            theme: options.theme,
-            styleMode: options.styleMode ?? 'default',
-            borderRadius: options.borderRadius ?? 4
-        });
-    }
-
-    protected _getChartClassName(): string {
-        return 'jux-areachart';
-    }
-
-    protected _createSVG(): SVGSVGElement {
-        const { data, width, height, colors, animate, animationDuration } = this.state;
-
-        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svg.setAttribute('width', width.toString());
-        svg.setAttribute('height', height.toString());
-        svg.setAttribute('class', 'jux-areachart-svg');
-
-        if (!data.length) return svg;
-
-        if (animate) this._addAnimationStyles(svg);
-
-        const padding = { top: 40, right: 40, bottom: 60, left: 60 };
-        const chartWidth = width - padding.left - padding.right;
-        const chartHeight = height - padding.top - padding.bottom;
-        const maxValue = Math.max(...data.map(d => d.value));
-
-        this._renderAreaChart(svg, padding, chartWidth, chartHeight, maxValue);
-
-        return svg;
-    }
-
-    protected _getBaseStyles(): string {
-        return `
-.jux-areachart {
-  font-family: var(--chart-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
-  display: inline-block;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  border-radius: 12px;
-  background: white;
-  padding: 24px;
-}
-.jux-areachart-title {
-  margin: 0 0 0.5rem 0;
-  font-size: 1.25rem;
-  font-weight: 600;
-}
-.jux-areachart-subtitle {
-  margin: 0 0 1rem 0;
-  font-size: 0.875rem;
-  color: #6b7280;
-}
-.jux-areachart-legend {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-  margin-top: 1rem;
-  justify-content: center;
-}
-.jux-areachart-legend-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-.jux-areachart-legend-swatch {
-  width: 12px;
-  height: 12px;
-  border-radius: 2px;
-}
-.jux-areachart-legend-label {
-  font-size: 0.875rem;
-  color: #374151;
-}
-.jux-areachart-table {
-  width: 100%;
-  margin-top: 1rem;
-  border-collapse: collapse;
-  font-size: 0.875rem;
-}
-.jux-areachart-table thead th {
-  text-align: center;
-  padding: 0.5rem;
-  border-bottom: 2px solid #e5e7eb;
-  font-weight: 600;
-}
-.jux-areachart-table tbody td {
-  padding: 0.5rem;
-  border-bottom: 1px solid #f3f4f6;
-  text-align: center;
-}
-.jux-areachart-svg {
-  font-family: inherit;
-}
-`;
-    }
-
-    private _addAnimationStyles(svg: SVGSVGElement): void {
-        const { animationDuration } = this.state;
-        const animationId = `area-grow-${this._id}`;
-        const style = document.createElementNS('http://www.w3.org/2000/svg', 'style');
-
-        style.textContent = `
-            @keyframes ${animationId} {
-                from { opacity: 0; transform: scaleY(0); }
-                to { opacity: 1; transform: scaleY(1); }
-            }
-            .jux-area-animated {
-                transform-origin: bottom;
-                animation: ${animationId} ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
-            }
-        `;
-        svg.appendChild(style);
-    }
-
-    private _renderAreaChart(svg: SVGSVGElement, padding: any, chartWidth: number, chartHeight: number, maxValue: number): void {
-        const { data, width, height, colors, showDataLabels, animate, xAxisLabel, yAxisLabel, showTicksX, showTicksY, showScaleX, showScaleY, scaleYUnit } = this.state;
-
-        const yScale = chartHeight / maxValue;
-        const xStep = chartWidth / (data.length - 1 || 1);
-        const color = colors[0];
-
-        // Axes
-        if (showScaleY) {
-            this._renderAxis(svg, padding.left, padding.top, padding.left, height - padding.bottom);
-            if (yAxisLabel && showTicksY) {
-                this._renderAxisLabel(svg, yAxisLabel, 20, padding.top + chartHeight / 2, -90);
-            }
-            if (showTicksY) {
-                this._renderYTicks(svg, maxValue, yScale, padding, width, height, scaleYUnit, chartHeight);
-            }
-        }
-
-        if (showScaleX) {
-            this._renderAxis(svg, padding.left, height - padding.bottom, width - padding.right, height - padding.bottom);
-            if (xAxisLabel && showTicksX) {
-                this._renderAxisLabel(svg, xAxisLabel, padding.left + chartWidth / 2, height - 15, 0);
-            }
-        }
-
-        // Build area path
-        let pathData = `M ${padding.left} ${height - padding.bottom}`;
-        data.forEach((point, i) => {
-            const x = padding.left + (i * xStep);
-            const y = height - padding.bottom - (point.value * yScale);
-            pathData += ` L ${x} ${y}`;
-        });
-        pathData += ` L ${padding.left + ((data.length - 1) * xStep)} ${height - padding.bottom} Z`;
-
-        const areaPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-        areaPath.setAttribute('d', pathData);
-        areaPath.setAttribute('fill', color);
-        areaPath.setAttribute('fill-opacity', '0.3');
-        if (animate) areaPath.classList.add('jux-area-animated');
-        svg.appendChild(areaPath);
-
-        // Line path
-        let lineData = '';
-        data.forEach((point, i) => {
-            const x = padding.left + (i * xStep);
-            const y = height - padding.bottom - (point.value * yScale);
-            lineData += (i === 0 ? `M ${x} ${y}` : ` L ${x} ${y}`);
-        });
-
-        const linePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-        linePath.setAttribute('d', lineData);
-        linePath.setAttribute('stroke', color);
-        linePath.setAttribute('stroke-width', '3');
-        linePath.setAttribute('fill', 'none');
-        svg.appendChild(linePath);
-
-        // Data points
-        data.forEach((point, i) => {
-            const x = padding.left + (i * xStep);
-            const y = height - padding.bottom - (point.value * yScale);
-
-            const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-            circle.setAttribute('cx', x.toString());
-            circle.setAttribute('cy', y.toString());
-            circle.setAttribute('r', '4');
-            circle.setAttribute('fill', color);
-            circle.setAttribute('stroke', 'white');
-            circle.setAttribute('stroke-width', '2');
-            svg.appendChild(circle);
-
-            if (showDataLabels) {
-                const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-                label.setAttribute('x', x.toString());
-                label.setAttribute('y', (y - 10).toString());
-                label.setAttribute('text-anchor', 'middle');
-                label.setAttribute('fill', '#374151');
-                label.setAttribute('font-size', '11');
-                label.setAttribute('font-weight', '600');
-                label.textContent = point.value.toString();
-                svg.appendChild(label);
-            }
-        });
-    }
-
-    private _renderAxis(svg: SVGSVGElement, x1: number, y1: number, x2: number, y2: number): void {
-        const axis = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-        axis.setAttribute('x1', x1.toString());
-        axis.setAttribute('y1', y1.toString());
-        axis.setAttribute('x2', x2.toString());
-        axis.setAttribute('y2', y2.toString());
-        axis.setAttribute('stroke', '#9ca3af');
-        axis.setAttribute('stroke-width', '2');
-        svg.appendChild(axis);
-    }
-
-    private _renderAxisLabel(svg: SVGSVGElement, text: string, x: number, y: number, rotate: number): void {
-        const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-        label.setAttribute('x', x.toString());
-        label.setAttribute('y', y.toString());
-        label.setAttribute('text-anchor', 'middle');
-        if (rotate !== 0) label.setAttribute('transform', `rotate(${rotate}, ${x}, ${y})`);
-        label.setAttribute('fill', '#6b7280');
-        label.setAttribute('font-size', '12');
-        label.setAttribute('font-weight', '500');
-        label.textContent = text;
-        svg.appendChild(label);
-    }
-
-    private _renderYTicks(svg: SVGSVGElement, maxValue: number, yScale: number, padding: any, width: number, height: number, unit: string, chartHeight: number): void {
-        const numTicks = 5;
-        for (let i = 0; i <= numTicks; i++) {
-            const value = (maxValue / numTicks) * i;
-            const y = height - padding.bottom - (value * yScale);
-
-            const gridLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-            gridLine.setAttribute('x1', padding.left.toString());
-            gridLine.setAttribute('y1', y.toString());
-            gridLine.setAttribute('x2', (width - padding.right).toString());
-            gridLine.setAttribute('y2', y.toString());
-            gridLine.setAttribute('stroke', '#e5e7eb');
-            gridLine.setAttribute('stroke-width', '1');
-            gridLine.setAttribute('stroke-dasharray', '4,4');
-            svg.appendChild(gridLine);
-
-            const tickLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-            tickLabel.setAttribute('x', (padding.left - 10).toString());
-            tickLabel.setAttribute('y', (y + 4).toString());
-            tickLabel.setAttribute('text-anchor', 'end');
-            tickLabel.setAttribute('fill', '#6b7280');
-            tickLabel.setAttribute('font-size', '11');
-            tickLabel.textContent = Math.round(value).toString() + (unit || '');
-            svg.appendChild(tickLabel);
-        }
-    }
-}
-
-export function areachart(id: string, options: AreaChartOptions = {}): AreaChart {
-    return new AreaChart(id, options);
-}