juxscript 1.0.8 → 1.0.10

package/lib/components/kpicard.ts

@@ -242,6 +242,11 @@ export class KPICard {
             return this;
         }
 
+        // Remove existing element if it exists
+        if (this._element && this._element.parentNode) {
+            this._element.parentNode.removeChild(this._element);
+        }
+
         this._loadThemeFont();
         this._buildCard(element as HTMLElement);
         return this;
@@ -253,8 +258,11 @@ export class KPICard {
         const element = document.querySelector(this._container);
         if (!element) return;
 
-        // Clear and rebuild
-        element.innerHTML = '';
+        // Remove existing element
+        if (this._element && this._element.parentNode) {
+            this._element.parentNode.removeChild(this._element);
+        }
+
         this._loadThemeFont();
         this._buildCard(element as HTMLElement);
     }
@@ -317,6 +325,9 @@ export class KPICard {
         const baseHeight = 200;
         const scaleFactor = Math.min(width / baseWidth, height / baseHeight);
 
+        // Determine if we're in dark mode based on style mode
+        const isDarkMode = styleMode === 'gradient' || styleMode === 'glass';
+
         const content = document.createElement('div');
         content.className = 'jux-kpicard-content';
         content.style.cssText = `
@@ -331,10 +342,19 @@ export class KPICard {
         const titleEl = document.createElement('div');
         titleEl.className = 'jux-kpicard-title';
         titleEl.textContent = title;
+        
+        // Smart color selection based on theme
+        let titleColor = '#6b7280'; // default light mode
+        if (styleMode === 'gradient') {
+            titleColor = 'rgba(255, 255, 255, 0.95)';
+        } else if (styleMode === 'glass') {
+            titleColor = 'rgba(31, 41, 55, 0.9)'; // dark text for glass effect
+        }
+        
         titleEl.style.cssText = `
             font-size: ${16 * scaleFactor}px;
             font-weight: 500;
-            color: ${styleMode === 'gradient' ? 'rgba(255, 255, 255, 0.95)' : '#6b7280'};
+            color: ${titleColor};
             margin-bottom: ${16 * scaleFactor}px;
             font-family: ${themeConfig.variables['--chart-font-family']};
         `;
@@ -352,10 +372,19 @@ export class KPICard {
         const valueEl = document.createElement('div');
         valueEl.className = 'jux-kpicard-value';
         valueEl.textContent = `${prefix}${value}${suffix}`;
+        
+        // Smart color selection for value
+        let valueColor = '#1f2937'; // default dark
+        if (styleMode === 'gradient') {
+            valueColor = '#ffffff';
+        } else if (styleMode === 'glass') {
+            valueColor = '#111827'; // very dark for glass
+        }
+        
         valueEl.style.cssText = `
             font-size: ${56 * scaleFactor}px;
             font-weight: 800;
-            color: ${styleMode === 'gradient' ? '#ffffff' : '#1f2937'};
+            color: ${valueColor};
             line-height: 1;
             font-family: ${themeConfig.variables['--chart-font-family']};
             ${styleMode === 'glow' ? `text-shadow: 0 0 ${20 * scaleFactor}px ${themeConfig.colors[0]}40;` : ''}
@@ -391,12 +420,18 @@ export class KPICard {
             const arrow = this._createArrowSVG(delta > 0, styleMode === 'gradient', scaleFactor);
             deltaContainer.appendChild(arrow);
 
-            // Delta text
+            // Delta text with smart coloring
             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');
+            
+            let deltaColor;
+            if (styleMode === 'gradient') {
+                deltaColor = delta > 0 ? 'rgba(255, 255, 255, 0.95)' : 'rgba(255, 200, 200, 0.95)';
+            } else if (styleMode === 'glass') {
+                deltaColor = delta > 0 ? '#10b981' : '#ef4444';
+            } else {
+                deltaColor = delta > 0 ? '#10b981' : '#ef4444';
+            }
             
             deltaText.style.cssText = `
                 font-size: ${18 * scaleFactor}px;

package/lib/components/sidebar.ts

@@ -18,7 +18,7 @@ export interface SidebarOptions {
  */
 type SidebarState = {
   title: string;
-  width: string;
+  width: string | null;
   position: string;
   collapsible: boolean;
   collapsed: boolean;
@@ -49,7 +49,7 @@ export class Sidebar {
 
     this.state = {
       title: options.title ?? '',
-      width: options.width ?? '300px',
+      width: options.width ?? null, // No default width - let CSS handle it
       position: options.position ?? 'left',
       collapsible: options.collapsible ?? false,
       collapsed: options.collapsed ?? false,
@@ -117,10 +117,14 @@ export class Sidebar {
 
     if (collapsed) {
       sidebar.classList.add('jux-sidebar-collapsed');
-      sidebar.style.width = '0';
+      if (width) {
+        sidebar.style.width = '0';
+      }
     } else {
       sidebar.classList.remove('jux-sidebar-collapsed');
-      sidebar.style.width = width;
+      if (width) {
+        sidebar.style.width = width;
+      }
     }
 
     const toggleBtn = sidebar.querySelector('.jux-sidebar-toggle');
@@ -152,7 +156,11 @@ export class Sidebar {
     const sidebar = document.createElement('aside');
     sidebar.className = `jux-sidebar jux-sidebar-${position}`;
     sidebar.id = this._id;
-    sidebar.style.width = collapsed ? '0' : width;
+    
+    // Only set width if explicitly provided
+    if (width) {
+      sidebar.style.width = collapsed ? '0' : width;
+    }
 
     if (className) {
       sidebar.className += ` ${className}`;

package/lib/jux.ts

@@ -51,9 +51,10 @@ import { heading, Heading, type HeadingOptions } from './components/heading.js';
 import { paragraph, Paragraph, type ParagraphOptions } from './components/paragraph.js';
 import { barchart, BarChart, type BarChartOptions, type BarChartDataPoint } from './components/barchart.js';
 import { areachart, AreaChart, type AreaChartOptions, type AreaChartDataPoint } from './components/areachart.js';
-import { areachartsmooth, AreaChartSmooth, type AreaChartSmoothOptions, AreaChartSmoothDataPoint  } from './components/areachartsmooth.js';
+import { areachartsmooth, AreaChartSmooth, type AreaChartSmoothOptions, AreaChartSmoothDataPoint } from './components/areachartsmooth.js';
 import { doughnutchart, DoughnutChart, type DoughnutChartOptions, type DoughnutChartDataPoint } from './components/doughnutchart.js';
 import { kpicard, KPICard, type KPICardOptions } from './components/kpicard.js';
+import { divider, Divider, type DividerOptions } from './components/divider.js';
 
 /* -------------------------
  * Type Exports
@@ -116,7 +117,8 @@ export type {
   AreaChartSmoothDataPoint,
   DoughnutChartOptions,
   DoughnutChartDataPoint,
-  KPICardOptions
+  KPICardOptions,
+  DividerOptions
 };
 
 /* -------------------------
@@ -172,7 +174,8 @@ export {
   AreaChart,
   AreaChartSmooth,
   DoughnutChart,
-  KPICard
+  KPICard,
+  Divider
 };
 
 /* -------------------------
@@ -234,6 +237,7 @@ export interface JuxAPI {
   areachartsmooth: typeof areachartsmooth;
   doughnutchart: typeof doughnutchart;
   kpicard: typeof kpicard;
+  divider: typeof divider;
 }
 
 /* -------------------------
@@ -311,8 +315,8 @@ class Jux implements JuxAPI {
   areachartsmooth = areachartsmooth;
   doughnutchart = doughnutchart;
   kpicard = kpicard;
+  divider = divider;
 }
-
 /**
  * Global jux singleton instance
  */

package/machinery/compiler.js

@@ -2,6 +2,23 @@ import fs from 'fs';
 import path from 'path';
 import esbuild from 'esbuild';
 
+/**
+ * Generate import map script tag
+ */
+function generateImportMapScript() {
+  return `<script type="importmap">
+{
+  "imports": {
+    "juxscript": "./lib/jux.js",
+    "juxscript/": "./lib/",
+    "juxscript/reactivity": "./lib/reactivity/state.js",
+    "juxscript/presets/": "./lib/presets/",
+    "juxscript/components/": "./lib/components/"
+  }
+}
+</script>`;
+}
+
 /**
  * Compile a .jux file to .js and .html
  * 
@@ -36,7 +53,6 @@ export async function compileJuxFile(juxFilePath, options = {}) {
   // Calculate depth for relative paths
   const depth = parsedPath.dir.split(path.sep).filter(p => p).length;
   const libPath = depth === 0 ? './lib/jux.js' : '../'.repeat(depth) + 'lib/jux.js';
-  const styleBasePath = depth === 0 ? './lib/presets/' : '../'.repeat(depth) + 'lib/presets/';
 
   // Transform imports
   let transformedContent = juxContent;
@@ -68,8 +84,9 @@ export async function compileJuxFile(juxFilePath, options = {}) {
 
   console.log(`  ✓ JS: ${path.relative(projectRoot, jsOutputPath)}`);
 
-  // Generate HTML with correct script path
+  // Generate HTML with import map and correct script path
   const scriptPath = `./${parsedPath.name}.js`;
+  const importMapScript = generateImportMapScript();
 
   const html = `<!DOCTYPE html>
 <html lang="en">
@@ -77,12 +94,12 @@ export async function compileJuxFile(juxFilePath, options = {}) {
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>${parsedPath.name}</title>
-  <!-- JUX Core Styles -->
-  <link rel="stylesheet" href="${styleBasePath}global.css">
 </head>
 <body data-theme="">
   <!-- App container -->
   <div id="app" data-jux-page="${parsedPath.name}"></div>
+  
+  ${importMapScript}
   <script type="module" src="${scriptPath}"></script>
   ${isServe ? `
   <!-- Hot reload -->

package/machinery/server.js

@@ -12,7 +12,7 @@ const __dirname = path.dirname(__filename);
 
 let db = null;
 
-async function serve(port = 3000, distDir = './jux-dist') {  // Changed default
+async function serve(port = 3000, distDir = './jux-dist') {
   const app = express();
   const absoluteDistDir = path.resolve(distDir);
   const projectRoot = path.resolve('.');
@@ -29,14 +29,14 @@ async function serve(port = 3000, distDir = './jux-dist') {  // Changed default
   app.post('/api/query', async (req, res) => {
     try {
       const { sql, params = [] } = req.body;
-      
+
       if (!db) {
         return res.status(500).json({ error: 'Database not initialized' });
       }
 
       const stmt = db.prepare(sql);
       stmt.bind(params);
-      
+
       const rows = [];
       while (stmt.step()) {
         rows.push(stmt.getAsObject());
@@ -61,16 +61,20 @@ async function serve(port = 3000, distDir = './jux-dist') {  // Changed default
   // Serve HTML files with clean URLs
   const heyPath = path.join(absoluteDistDir, 'hey.html');
   const indexPath = path.join(absoluteDistDir, 'index.html');
-  
+
   app.use((req, res, next) => {
-    let requestPath = req.path.endsWith('/') && req.path.length > 1 
-      ? req.path.slice(0, -1) 
+    let requestPath = req.path.endsWith('/') && req.path.length > 1
+      ? req.path.slice(0, -1)
       : req.path;
 
     // Root path - serve hey.html or index.html
     if (requestPath === '/') {
-      if (fs.existsSync(heyPath)) return res.sendFile(heyPath);
-      if (fs.existsSync(indexPath)) return res.sendFile(indexPath);
+      if (fs.existsSync(heyPath)) {
+        return res.sendFile(heyPath);
+      }
+      if (fs.existsSync(indexPath)) {
+        return res.sendFile(indexPath);
+      }
     }
 
     // Try to serve as HTML file
@@ -87,7 +91,7 @@ async function serve(port = 3000, distDir = './jux-dist') {  // Changed default
 
     next();
   });
-  
+
   // Serve static files (CSS, JS, images, etc.)
   app.use(express.static(absoluteDistDir));
 
@@ -96,25 +100,24 @@ async function serve(port = 3000, distDir = './jux-dist') {  // Changed default
     const notFoundPath = path.join(absoluteDistDir, '404.html');
     const requestedPath = path.join(absoluteDistDir, req.path);
     const fileType = path.extname(req.path) || 'directory';
-    
+
     // Log to console for debugging
     console.log(`❌ 404: ${req.path}`);
     console.log(`   Looked for: ${requestedPath}`);
     console.log(`   Type: ${fileType}`);
     console.log(`   Referer: ${req.get('referer') || 'direct'}`);
-    
+
     // If custom 404.html exists and this isn't already /404
     if (fs.existsSync(notFoundPath) && req.path !== '/404') {
-      // Add debug info as query params
       const debugUrl = `/404?path=${encodeURIComponent(req.path)}&type=${fileType}&from=${encodeURIComponent(req.get('referer') || 'direct')}`;
       return res.redirect(debugUrl);
     }
-    
+
     // Serve custom 404 page
     if (fs.existsSync(notFoundPath)) {
       return res.status(404).sendFile(notFoundPath);
     }
-    
+
     // Fallback: minimal 404 response
     res.status(404).send('<h1>404 - Not Found</h1>');
   });
@@ -175,7 +178,7 @@ async function serve(port = 3000, distDir = './jux-dist') {  // Changed default
 async function initDatabase() {
   const SQL = await initSqlJs();
   const dbPath = path.join(__dirname, '../db/jux.db');
-  
+
   if (fs.existsSync(dbPath)) {
     const buffer = fs.readFileSync(dbPath);
     db = new SQL.Database(buffer);
@@ -188,5 +191,5 @@ async function initDatabase() {
 
 export async function start(port = 3000) {
   await initDatabase();
-  return serve(port, './jux-dist');  // Changed default
+  return serve(port, './jux-dist');
 }

package/package.json

@@ -1,84 +1,66 @@
 {
   "name": "juxscript",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "lib/jux.js",
   "types": "lib/jux.d.ts",
+  "access": "public",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jux/juxscript.git"
+  },
   "exports": {
     ".": {
       "types": "./lib/jux.d.ts",
       "import": "./lib/jux.js",
       "default": "./lib/jux.js"
     },
-    "./lib/*": "./lib/*",
-    "./lib/components/*": "./lib/components/*",
+    "./reactivity": {
+      "types": "./lib/reactivity/index.d.ts",
+      "import": "./lib/reactivity/index.js",
+      "default": "./lib/reactivity/index.js"
+    },
+    "./components/*": "./lib/components/*/index.js",
+    "./presets/*": "./presets/*.*",
     "./package.json": "./package.json"
   },
-  "typesVersions": {
-    "*": {
-      "*": [
-        "lib/*"
-      ],
-      "lib/*": [
-        "lib/*"
-      ],
-      "lib/components/*": [
-        "lib/components/*"
-      ]
-    }
-  },
-  "bin": {
-    "jux": "./bin/cli.js"
-  },
-  "scripts": {
-    "dev": "cd examples && npx jux serve",
-    "build:examples": "cd examples && rm -rf dist && npx jux build",
-    "build": "tsc",
-    "test": "node test/run-tests.js",
-    "generate:icons": "node scripts/generate-icon-types.js"
-  },
   "files": [
     "lib",
     "bin",
     "machinery",
     "types",
-    "lib/**/*.d.ts",
     "README.md",
     "LICENSE"
   ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/juxscript/jux.git"
+  "bin": {
+    "jux": "./bin/cli.js"
   },
   "keywords": [
-    "jux",
     "ui",
-    "authoring",
+    "ux",
+    "components",
+    "framework",
+    "reactive",
     "javascript"
   ],
-  "author": "Tim Kerr",
-  "license": "MIT",
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "prepublishOnly": "npm run build"
+  },
   "dependencies": {
-    "acorn": "^8.15.0",
-    "chokidar": "^5.0.0",
-    "clean-css": "^5.3.3",
-    "esbuild": "^0.27.2",
-    "express": "^5.2.1",
+    "chokidar": "^3.5.3",
+    "esbuild": "^0.19.0",
+    "express": "^4.18.2",
     "glob": "^13.0.0",
-    "node": "^24.12.0",
-    "sql.js": "^1.10.3",
-    "terser": "^5.44.1",
-    "ws": "^8.19.0"
-  },
-  "optionalDependencies": {
-    "mysql2": "^3.6.5",
-    "pg": "^8.11.3"
+    "sql.js": "^1.8.0",
+    "ws": "^8.13.0"
   },
   "devDependencies": {
-    "typescript": "^5.9.3"
+    "@types/express": "^4.17.17",
+    "@types/node": "^20.0.0",
+    "@types/ws": "^8.5.5",
+    "typescript": "^5.0.0"
   }
 }