juxscript 1.0.56 → 1.0.57

package/lib/components/radio.ts

@@ -269,114 +269,8 @@ export class Radio extends FormInput<RadioState> {
         }
 
         container.appendChild(wrapper);
-        this._injectRadioStyles();
-
         return this;
     }
-
-    private _injectRadioStyles(): void {
-        const styleId = 'jux-radio-styles';
-        if (document.getElementById(styleId)) return;
-
-        const style = document.createElement('style');
-        style.id = styleId;
-        style.textContent = `
-      .jux-radio {
-        margin-bottom: 12px;
-      }
-
-      .jux-radio-options {
-        display: flex;
-        gap: 8px;
-      }
-
-      /* ✅ Vertical orientation (default) */
-      .jux-radio-vertical {
-        flex-direction: column;
-      }
-
-      /* ✅ Horizontal orientation */
-      .jux-radio-horizontal {
-        flex-direction: row;
-        flex-wrap: wrap;
-      }
-
-      .jux-radio-option {
-        display: inline-flex;
-        align-items: center;
-        cursor: pointer;
-        user-select: none;
-        position: relative;
-      }
-
-      .jux-radio-input {
-        position: absolute;
-        opacity: 0;
-        cursor: pointer;
-        height: 0;
-        width: 0;
-      }
-
-      .jux-radio-mark {
-        position: relative;
-        height: 20px;
-        width: 20px;
-        border: 2px solid #d1d5db;
-        border-radius: 50%;
-        background-color: white;
-        transition: all 0.2s;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-right: 8px;
-      }
-
-      .jux-radio-mark::after {
-        content: '';
-        position: absolute;
-        width: 10px;
-        height: 10px;
-        border-radius: 50%;
-        background-color: white;
-        opacity: 0;
-        transition: opacity 0.2s;
-      }
-
-      .jux-radio-input:checked ~ .jux-radio-mark {
-        background-color: #3b82f6;
-        border-color: #3b82f6;
-      }
-
-      .jux-radio-input:checked ~ .jux-radio-mark::after {
-        opacity: 1;
-      }
-
-      .jux-radio-input:disabled ~ .jux-radio-mark {
-        background-color: #f3f4f6;
-        border-color: #d1d5db;
-        cursor: not-allowed;
-      }
-
-      .jux-radio-input:disabled ~ .jux-radio-label-text {
-        color: #9ca3af;
-        cursor: not-allowed;
-      }
-
-      .jux-radio-input:focus ~ .jux-radio-mark {
-        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-      }
-
-      .jux-radio-input.jux-input-invalid ~ .jux-radio-mark {
-        border-color: #ef4444;
-      }
-
-      .jux-radio-label-text {
-        font-size: 14px;
-        color: #374151;
-      }
-    `;
-        document.head.appendChild(style);
-    }
 }
 
 export function radio(id: string, options: RadioOptions = {}): Radio {

package/lib/components/select.ts

@@ -239,38 +239,12 @@ export class Select extends FormInput<SelectState> {
         }
 
         container.appendChild(wrapper);
-        this._injectSelectStyles();
-        this._injectFormStyles();
+    
 
         return this;
     }
 
-    private _injectSelectStyles(): void {
-        const styleId = 'jux-select-styles';
-        if (document.getElementById(styleId)) return;
-
-        const style = document.createElement('style');
-        style.id = styleId;
-        style.textContent = `
-      .jux-select-container {
-        position: relative;
-      }
-
-      .jux-select-element {
-        appearance: none;
-        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
-        background-repeat: no-repeat;
-        background-position: right 12px center;
-        padding-right: 36px;
-        cursor: pointer;
-      }
-
-      .jux-select-element:disabled {
-        cursor: not-allowed;
-      }
-    `;
-        document.head.appendChild(style);
-    }
+    
 }
 
 export function select(id: string, options: SelectOptions = {}): Select {

package/lib/components/sidebar.ts

@@ -157,80 +157,9 @@ export class Sidebar extends BaseComponent<SidebarState> {
 
     container.appendChild(sidebar);
     this._sidebar = sidebar;
-    this._injectDefaultStyles();
 
     return this;
   }
-
-  private _injectDefaultStyles(): void {
-    const styleId = 'jux-sidebar-styles';
-    if (document.getElementById(styleId)) return;
-
-    const style = document.createElement('style');
-    style.id = styleId;
-    style.textContent = `
-      .jux-sidebar {
-        position: relative;
-        height: 100vh;
-        background: #f9fafb;
-        border-right: 1px solid #e5e7eb;
-        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        overflow: hidden;
-      }
-
-      .jux-sidebar-right {
-        border-right: none;
-        border-left: 1px solid #e5e7eb;
-      }
-
-      .jux-sidebar-toggle {
-        position: absolute;
-        bottom: 20px;
-        right: 20px;
-        width: 32px;
-        height: 32px;
-        border: none;
-        background: #3b82f6;
-        color: white;
-        border-radius: 6px;
-        cursor: pointer;
-        font-size: 14px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-        z-index: 100;
-        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
-      }
-
-      .jux-sidebar-toggle:hover {
-        background: #2563eb;
-        transform: scale(1.05);
-        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
-      }
-
-      .jux-sidebar-toggle:active {
-        transform: scale(0.95);
-      }
-
-      .jux-sidebar-collapsed {
-        width: 60px !important;
-      }
-
-      .jux-sidebar-collapsed > *:not(.jux-sidebar-toggle) {
-        opacity: 0;
-        pointer-events: none;
-        transition: opacity 0.2s ease-out;
-      }
-
-      .jux-sidebar > *:not(.jux-sidebar-toggle) {
-        opacity: 1;
-        pointer-events: auto;
-        transition: opacity 0.3s ease-in 0.1s;
-      }
-    `;
-    document.head.appendChild(style);
-  }
 }
 
 export function sidebar(id: string, options: SidebarOptions = {}): Sidebar {

package/lib/components/switch.ts

@@ -235,94 +235,9 @@ export class Switch extends FormInput<SwitchState> {
         }
 
         container.appendChild(wrapper);
-        this._injectSwitchStyles();
 
         return this;
     }
-
-    private _injectSwitchStyles(): void {
-        const styleId = 'jux-switch-styles';
-        if (document.getElementById(styleId)) return;
-
-        const style = document.createElement('style');
-        style.id = styleId;
-        style.textContent = `
-      .jux-switch {
-        margin-bottom: 12px;
-      }
-
-      .jux-switch-container {
-        display: inline-flex;
-        align-items: center;
-        cursor: pointer;
-        user-select: none;
-        position: relative;
-      }
-
-      .jux-switch-input {
-        position: absolute;
-        opacity: 0;
-        cursor: pointer;
-        height: 0;
-        width: 0;
-      }
-
-      .jux-switch-slider {
-        position: relative;
-        width: 48px;
-        height: 24px;
-        background-color: #d1d5db;
-        border-radius: 24px;
-        transition: background-color 0.3s;
-        margin-right: 8px;
-      }
-
-      .jux-switch-slider::before {
-        content: '';
-        position: absolute;
-        height: 18px;
-        width: 18px;
-        left: 3px;
-        top: 3px;
-        background-color: white;
-        border-radius: 50%;
-        transition: transform 0.3s;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-      }
-
-      .jux-switch-input:checked ~ .jux-switch-slider {
-        background-color: #3b82f6;
-      }
-
-      .jux-switch-input:checked ~ .jux-switch-slider::before {
-        transform: translateX(24px);
-      }
-
-      .jux-switch-input:disabled ~ .jux-switch-slider {
-        background-color: #f3f4f6;
-        cursor: not-allowed;
-      }
-
-      .jux-switch-input:disabled ~ .jux-switch-label-text {
-        color: #9ca3af;
-        cursor: not-allowed;
-      }
-
-      .jux-switch-input:focus ~ .jux-switch-slider {
-        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-      }
-
-      .jux-switch-input.jux-input-invalid ~ .jux-switch-slider {
-        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
-      }
-
-      .jux-switch-label-text {
-        font-size: 14px;
-        color: #374151;
-      }
-    `;
-        document.head.appendChild(style);
-    }
 }
 
 export function switchComponent(id: string, options: SwitchOptions = {}): Switch {

package/lib/components/tooltip.ts

@@ -91,7 +91,6 @@ export class Tooltip extends BaseComponent<TooltipState> {
             this._hide();
         });
 
-        this._injectTooltipStyles();
     }
 
     private _show(): void {
@@ -138,34 +137,6 @@ export class Tooltip extends BaseComponent<TooltipState> {
         console.warn('Tooltip: Use .attachTo(element) instead of .render()');
         return this;
     }
-
-    private _injectTooltipStyles(): void {
-        const styleId = 'jux-tooltip-styles';
-        if (document.getElementById(styleId)) return;
-
-        const style = document.createElement('style');
-        style.id = styleId;
-        style.textContent = `
-      .jux-tooltip {
-        position: fixed;
-        background: #1f2937;
-        color: white;
-        padding: 6px 12px;
-        border-radius: 6px;
-        font-size: 12px;
-        white-space: nowrap;
-        z-index: 10000;
-        pointer-events: none;
-        animation: jux-tooltip-fade 0.2s;
-      }
-
-      @keyframes jux-tooltip-fade {
-        from { opacity: 0; }
-        to { opacity: 1; }
-      }
-    `;
-        document.head.appendChild(style);
-    }
 }
 
 export function tooltip(id: string, options: TooltipOptions = {}): Tooltip {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.0.56",
+  "version": "1.0.57",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "lib/jux.js",
@@ -50,7 +50,11 @@
   "scripts": {
     "build": "tsc",
     "dev": "tsc --watch",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "analyze": "node scripts/analyze-components.js",
+    "check-styles": "node scripts/check-inline-styles.js",
+    "find-inject-styles": "node scripts/find-inject-styles.js",
+    "find-jux-classes": "node scripts/find-jux-classes.js"
   },
   "dependencies": {
     "chokidar": "^3.5.3",
@@ -63,6 +67,7 @@
     "@types/express": "^4.17.17",
     "@types/node": "^20.0.0",
     "@types/ws": "^8.5.5",
+    "jsdom": "^27.4.0",
     "typescript": "^5.0.0"
   }
 }

package/presets/default/all.jux

@@ -0,0 +1,190 @@
+import { jux, state } from 'juxscript';
+jux.include('layout.css');
+
+// ═══════════════════════════════════════════════════════════════════
+// ALL COMPONENTS SHOWCASE - Maximum DOM nodes per component
+// ═══════════════════════════════════════════════════════════════════
+
+// Hero - All DOM-generating options
+jux.hero('all-hero', {
+  title: 'Hero Title',
+  subtitle: 'Hero Subtitle',
+  content: 'Hero body content goes here',
+  cta: 'Call to Action',
+  ctaLink: '#',
+  backgroundImage: 'https://via.placeholder.com/1200x400',
+  backgroundOverlay: true,
+  centered: true
+}).render();
+
+jux.alert('all-alert').render();
+jux.badge('all-badge').render();
+jux.button('all-button').render();
+jux.card('all-card').render();
+jux.checkbox('all-checkbox').render();
+jux.code('all-code').render();
+jux.container('all-container').render();
+jux.datepicker('all-datepicker').render();
+jux.dropdown('all-dropdown', {
+  items: [{ label: 'Item 1', value: '1' }, { label: 'Item 2', value: '2' }]
+}).render();
+jux.fileupload('all-fileupload').render();
+jux.heading('all-h1').render();
+// jux.icon('all-icon').render();
+jux.input('all-input').render();
+jux.kpicard('all-kpicard').render();
+jux.list('all-list', {
+  items: ['Item 1', 'Item 2', 'Item 3']
+}).render();
+jux.loading('all-loading').render();
+jux.menu('all-menu', {
+  items: [{ label: 'Home', path: '/' }, { label: 'About', path: '/about' }]
+}).render();
+jux.nav('all-nav', {
+  items: [{ label: 'Home', path: '/' }, { label: 'About', path: '/about' }]
+}).render();
+jux.paragraph('all-paragraph').render();
+jux.progress('all-progress').render();
+jux.radio('all-radio', {
+  options: [{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]
+}).render();
+jux.select('all-select', {
+  options: [{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]
+}).render();
+jux.sidebar('all-sidebar').render();
+jux.switch('all-switch').render();
+jux.table('all-table', {
+    columns: ['Name', 'Age'],
+    rows: [
+        { Name: 'John', Age: '25' },
+        { Name: 'Jane', Age: '30' }
+    ]
+}).render();
+jux.tabs('all-tabs', {
+  tabs: [{ label: 'Tab 1', content: 'Content 1' }, { label: 'Tab 2', content: 'Content 2' }]
+}).render();
+
+jux.button('tooltip-trigger').label('Hover for tooltip').render();
+jux.tooltip('all-tooltip', {
+  text: 'Tooltip content',
+  position: 'top'
+}).render('#tooltip-trigger');
+
+jux.view('all-view').render();
+
+// ═══════════════════════════════════════════════════════════════════
+// SELF-ANALYSIS: Build component tree from #app
+// ═══════════════════════════════════════════════════════════════════
+
+function buildComponentTree(element, depth = 0) {
+  const indent = '  '.repeat(depth);
+  const tagName = element.tagName.toLowerCase();
+  // ✅ Fix: Check if className exists and is a string
+  const classes = (element.className && typeof element.className === 'string') 
+    ? `.${element.className.split(' ').join('.')}` 
+    : '';
+  
+  let tree = `${indent}${tagName}${classes}\n`;
+  
+  // Recurse through children
+  Array.from(element.children).forEach(child => {
+    tree += buildComponentTree(child, depth + 1);
+  });
+  
+  return tree;
+}
+
+function analyzeComponents() {
+  const app = document.getElementById('app');
+  if (!app) return 'No #app container found';
+  
+  const components = Array.from(app.children);
+  const componentTypes = new Map();
+  
+  let analysis = `═══════════════════════════════════════════════════════════════
+COMPONENT TREE ANALYSIS
+═══════════════════════════════════════════════════════════════
+
+Found ${components.length} components in #app
+
+`;
+  
+  components.forEach((component, index) => {
+    const componentId = component.id || `component-${index}`;
+    // ✅ Fix: Safely handle className
+    const className = (component.className && typeof component.className === 'string') 
+      ? component.className 
+      : '';
+    const rootClasses = className.split(' ').filter(c => c);
+    const primaryClass = rootClasses.find(c => c.startsWith('jux-')) || rootClasses[0] || 'unknown';
+    
+    const componentName = primaryClass
+      .replace(/^jux-/, '')
+      .split('-')
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+      .join('');
+    
+    // Track component types
+    const typeName = primaryClass.replace(/^jux-/, '');
+    componentTypes.set(typeName, (componentTypes.get(typeName) || 0) + 1);
+    
+    analysis += `┌─ ${componentName} (${componentId})\n`;
+    analysis += '│\n';
+    
+    const tree = buildComponentTree(component);
+    tree.split('\n').forEach(line => {
+      if (line.trim()) {
+        analysis += `│   ${line}\n`;
+      }
+    });
+    
+    analysis += `└${'─'.repeat(66)}\n\n`;
+  });
+  
+  // Add summary
+  analysis += `═══════════════════════════════════════════════════════════════
+SUMMARY
+═══════════════════════════════════════════════════════════════
+
+Component Types:
+`;
+  
+  Array.from(componentTypes.entries())
+    .sort(([a], [b]) => a.localeCompare(b))
+    .forEach(([type, count]) => {
+      analysis += `  - ${type}: ${count}\n`;
+    });
+  
+  analysis += `\nTotal: ${components.length} components rendered\n`;
+  
+  return analysis;
+}
+
+// Wait for DOM to be fully rendered
+setTimeout(() => {
+  const analysis = analyzeComponents();
+  
+  // Create analysis display
+  jux.container('analysis-container')
+    .style('margin-top: 3rem; padding: 2rem; background: #1e1e1e; border-radius: 8px;')
+    .render();
+  
+  jux.heading('analysis-title')
+    .level(2)
+    .text('🔍 Self-Analysis')
+    .style('color: #10b981; margin-bottom: 1rem;')
+    .render('#analysis-container');
+  
+  jux.code('component-tree')
+    .language('text')
+    .code(analysis)
+    .style('background: #0d1117; color: #c9d1d9; font-size: 0.875rem; max-height: 600px; overflow-y: auto;')
+    .render('#analysis-container');
+  
+  jux.paragraph('analysis-note')
+    .text('This tree was generated by JavaScript analyzing the DOM structure of this page.')
+    .style('margin-top: 1rem; color: #8b949e; font-size: 0.875rem;')
+    .render('#analysis-container');
+}, 100);
+
+