juxscript 1.0.64 → 1.0.65

package/create/themes/assets/jux.svg

@@ -0,0 +1,34 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="textGrad" x1="100" y1="0" x2="412" y2="0" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#22D3EE"/>
+      <stop offset="50%" stop-color="#A855F7"/>
+      <stop offset="100%" stop-color="#F472B6"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Background -->
+  <rect width="512" height="512" rx="64" fill="#0F172A"/>
+
+  <!-- Left Curly Brace { -->
+  <path d="M80 130 
+           Q80 200, 55 230 
+           Q30 256, 55 282 
+           Q80 312, 80 382" 
+        stroke="#94A3B8" stroke-width="14" stroke-linecap="round" fill="none"/>
+
+  <!-- Right Curly Brace } -->
+  <path d="M432 130 
+           Q432 200, 457 230 
+           Q482 256, 457 282 
+           Q432 312, 432 382" 
+        stroke="#94A3B8" stroke-width="14" stroke-linecap="round" fill="none"/>
+
+  <!-- JUX Text -->
+  <text x="256" y="285" 
+        font-family="system-ui, -apple-system, sans-serif" 
+        font-size="130" 
+        font-weight="900" 
+        text-anchor="middle" 
+        fill="url(#textGrad)">JUX</text>
+</svg>

package/create/themes/base.css

@@ -0,0 +1,60 @@
+/**
+ * Base
+ */
+
+:root {
+  /* Typography */
+  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --line-height-normal: 1.6;
+
+  /* Spacing Scale */
+  --space-xs: 0.25rem;
+  --space-sm: 0.5rem;
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2rem;
+
+  /* Layout */
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --border-width: 1px;
+
+  /* Animation */
+  --transition-fast: 150ms ease;
+  --transition-normal: 300ms ease;
+
+  /* Color Palette - RxTrail Brand Colors */
+  --color-brand: #e57373;
+  --color-brand-hover: #ef5350;
+  --color-brand-subtle: rgba(229, 115, 115, 0.08);
+
+  --color-text-primary: #2c2f3e;
+  --color-text-secondary: #6b7280;
+  --color-text-inverse: #ffffff;
+
+  --color-background: #fafbfc;
+  --color-surface-base: #ffffff;
+  --color-surface-hover: #fef5f5;
+  --color-surface-active: #fce8e8;
+  
+  --color-border: #e5e7eb;
+  --color-border-hover: #d1d5db;
+
+  /* Accent colors for clinical data */
+  --color-success: #00a878;
+  --color-warning: #f39c12;
+  --color-danger: #e74c3c;
+}
+
+/* Dark Mode Overrides */
+[data-theme="dark"] {
+  --color-text-primary: #e8edf3;
+  --color-text-secondary: #9aa6b5;
+  --color-background: #0f1419;
+  --color-surface-base: #1a2332;
+  --color-surface-hover: #243447;
+  --color-border: #384456;
+}

package/create/themes/base2.css

@@ -0,0 +1,54 @@
+
+/*gemini*/
+:root {
+  /* Typography - Larger, more comfortable */
+  --font-family-base: 'Google Sans', system-ui, -apple-system, sans-serif;
+  --font-size-sm: 0.9375rem;  /* 15px */
+  --font-size-base: 1.0625rem; /* 17px */
+  --font-size-lg: 1.25rem;     /* 20px */
+  --line-height-normal: 1.6;
+
+  /* Spacing Scale - More generous */
+  --space-xs: 0.5rem;   /* 8px */
+  --space-sm: 0.75rem;  /* 12px */
+  --space-md: 1.25rem;  /* 20px */
+  --space-lg: 2rem;     /* 32px */
+  --space-xl: 3rem;     /* 48px */
+
+  /* Layout - Softer, rounder */
+  --radius-sm: 8px;
+  --radius-md: 16px;
+  --radius-lg: 24px;
+  --border-width: 1px;
+
+  /* Animation - Smoother */
+  --transition-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-normal: 350ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Color Palette (Semantic) - Gemini-inspired */
+  --color-brand: #1a73e8;
+  --color-brand-hover: #1557b0;
+  --color-brand-subtle: rgba(26, 115, 232, 0.08);
+
+  --color-text-primary: #202124;
+  --color-text-secondary: #5f6368;
+  --color-text-inverse: #ffffff;
+
+  --color-background: #ffffff;
+  --color-surface-base: #f8f9fa;
+  --color-surface-hover: #f1f3f4;
+  --color-surface-active: #e8eaed;
+  
+  --color-border: #dadce0;
+  --color-border-hover: #bdc1c6;
+}
+
+/* Dark Mode Overrides */
+[data-theme="dark"] {
+  --color-text-primary: #e8eaed;
+  --color-text-secondary: #9aa0a6;
+  --color-background: #202124;
+  --color-surface-base: #292a2d;
+  --color-surface-hover: #35363a;
+  --color-border: #5f6368;
+}

package/create/themes/layouts/base.jux

@@ -0,0 +1,16 @@
+import { juxV2 } from '../../lib/componentsv2';
+
+
+juxV2.Grid('base-layout')
+    .rows([
+        { size: '60px', class: 'header-row' },   // Header
+        { size: '1fr', class: 'content-row' },   // Content
+        { size: '40px', class: 'footer-row' }    // Footer
+    ])
+    .columns([
+        { size: '200px', class: 'sidebar-col' }, // Sidebar
+        { size: '1fr', class: 'main-col' }       // Main Content
+    ])
+    .gap('12px')
+    .gridder(true) // Enable gridder to visualize the layout
+    .render('app');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.0.64",
+  "version": "1.0.65",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "lib/jux.js",
@@ -16,21 +16,14 @@
       "import": "./lib/jux.js",
       "default": "./lib/jux.js"
     },
-    "./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"
   },
   "files": [
-    "lib",
     "bin",
-    "docs",
+    "create",
+    "lib",
     "machinery",
-    "presets",
+    "tests",
     "types",
     "juxconfig.example.js",
     "README.md",

package/tests/dropdown-test.js

@@ -0,0 +1,25 @@
+import { dropdown } from '../lib/components/dropdown.js';
+
+
+const dd = dropdown('test-dropdown', {
+    items: [
+        { value: 'option1', label: 'Option 1' },
+        { value: 'option2', label: 'Option 2' },
+        { value: 'option3', label: 'Option 3' }
+    ],
+    placeholder: 'Select an option',
+    searchable: true,
+    multiSelect: false
+});
+//dd.open();
+
+console.log('Current Props', dd.props)
+
+
+
+dd.select('option3');
+dd.open();
+
+console.log('Dropdown opened:', dd.props);
+//dd.selectItem('option2');
+//console.log('Selected item:', dd.getSelectedItems());

package/tests/juxerrors/bad_syntax.jux

@@ -0,0 +1,8 @@
+import { jux } from 'juxscript';
+
+// This is valid
+jux.hero('syntax-test', { title: 'Syntax Test' }).render('#app');
+
+// This is INVALID syntax and should fail the compiler
+
+const brokenVariable = ; 

package/tests/juxerrors/ghost_dep.jux

@@ -0,0 +1,10 @@
+import { jux } from 'juxscript';
+
+// ❌ This dependency does not exist in node_modules
+// The compiler will warn, but might proceed. 
+// The Verifier should CATCH this because 'phantom-lib' won't be in the import map.
+import { magic } from 'phantom-lib';
+
+jux.hero('dep-test', { title: 'Ghost Dependency' }).render('#app');
+
+console.log(magic);

package/tests/server_plugin_test.ts

@@ -0,0 +1,191 @@
+import { ListEngine, ListItem } from '../lib/componentsv2/list/engine.js';
+import { ServerSQLitePlugin } from '../lib/componentsv2/plugins/ServerSQLitePlugin.js';
+import Database from 'better-sqlite3';
+import fs from 'fs';
+import path from 'path';
+
+const DB_PATH = path.resolve('temp/jux_test.db');
+const PRESERVE_DB = process.argv.includes('--preserve-db');
+
+// --- Integrity System ---
+const SNAPSHOTS: Record<string, any[]> = {};
+const EXPECTATIONS: Record<string, any[]> = {};
+
+function capture(phase: string, items: ListItem[]) {
+    // Deep copy and simplify to core data shape
+    SNAPSHOTS[phase] = items.map(i => ({
+        id: i.id,
+        text: i.text,
+        classes: i.classes,
+        details: i.details
+    }));
+}
+
+function expectShape(phase: string, shape: any[]) {
+    EXPECTATIONS[phase] = shape;
+}
+
+/**
+ * Generate a precision checksum for data integrity.
+ */
+function getChecksum(data: any): string {
+    const str = JSON.stringify(data);
+    let hash = 5381;
+    for (let i = 0; i < str.length; i++) {
+        hash = ((hash << 5) + hash) + str.charCodeAt(i);
+    }
+    return (hash >>> 0).toString(16).toUpperCase().padStart(8, '0');
+}
+
+async function runTest() {
+    console.log('--- STARTING RIGOROUS SERVER-SIDE PLUGIN TEST ---');
+    if (PRESERVE_DB) console.log('ℹ️  MODE: Preserving Database File');
+
+    // Ensure temp directory exists
+    const tempDir = path.dirname(DB_PATH);
+    if (!fs.existsSync(tempDir)) {
+        fs.mkdirSync(tempDir, { recursive: true });
+    }
+
+    // Cleanup previous runs
+    if (fs.existsSync(DB_PATH)) fs.unlinkSync(DB_PATH);
+
+    // 1. Initialize DB
+    const db = new Database(DB_PATH);
+
+    // 🔍 PROOF OF LIFE
+    const sqliteVersion = db.prepare('select sqlite_version()').pluck().get();
+    const TEST_TIMESTAMP = new Date().toISOString();
+    const EPHEMERAL_TAG = ` [v${sqliteVersion}::${TEST_TIMESTAMP}]`;
+    console.log(`🔌 CONNECTION ACTIVE: SQLite ${sqliteVersion} | Run ID: ${TEST_TIMESTAMP}`);
+
+    const engine = new ListEngine('server-list-01');
+
+    // --- DATA CONTRACTS ---
+    const SHAPE_1_EMPTY: any[] = [];
+
+    const SHAPE_2_HYDRATED = [
+        { id: '1', text: `Alice${EPHEMERAL_TAG}`, classes: ['admin'], details: { active: true } },
+        { id: '2', text: `Bob${EPHEMERAL_TAG}`, classes: ['user'], details: { active: true } },
+        { id: '3', text: `Charlie${EPHEMERAL_TAG}`, classes: ['guest'], details: { active: false } }
+    ];
+
+    const SHAPE_3_MODIFIED = [
+        { id: '1', text: `Alice${EPHEMERAL_TAG}`, classes: ['superadmin'], details: { active: true } },
+        { id: '2', text: `Bob${EPHEMERAL_TAG}`, classes: ['user'], details: { active: true } },
+        { id: '4', text: `Dave${EPHEMERAL_TAG}`, classes: ['user'], details: {} }
+    ];
+
+    // Register Contracts
+    expectShape('PHASE 1: Empty', SHAPE_1_EMPTY);
+    expectShape('PHASE 2: Hydrated', SHAPE_2_HYDRATED);
+    expectShape('PHASE 3: Modified', SHAPE_3_MODIFIED);
+
+    // === EXECUTION ===
+
+    // Phase 1
+    console.log('\n▶ PHASE 1: Initialization');
+    capture('PHASE 1: Empty', engine.state.items);
+
+    // Phase 2
+    console.log('\n▶ PHASE 2: Schema & Hydration');
+    db.exec(`CREATE TABLE users (id INTEGER PRIMARY KEY AUTOINCREMENT, username TEXT NOT NULL, role TEXT DEFAULT 'user', meta TEXT);`);
+    const insert = db.prepare('INSERT INTO users (username, role, meta) VALUES (?, ?, ?)');
+    insert.run('Alice', 'admin', JSON.stringify({ active: true }));
+    insert.run('Bob', 'user', JSON.stringify({ active: true }));
+    insert.run('Charlie', 'guest', JSON.stringify({ active: false }));
+
+    // Inject Decoupled Plugin
+    const plugin = ServerSQLitePlugin({
+        database: db,
+        query: `SELECT id, username || '${EPHEMERAL_TAG}' as username, role, meta FROM users`,
+        bindTo: 'items', // ✅ Bind to ListEngine's 'items' property
+        mapRow: (row: any) => ({
+            id: String(row.id),
+            text: row.username,
+            classes: row.role ? [row.role] : [],
+            details: row.meta ? JSON.parse(row.meta) : {}
+        }),
+        autoLoad: true
+    });
+    engine.addPlugin(plugin);
+
+    capture('PHASE 2: Hydrated', engine.state.items);
+
+    // Phase 3
+    console.log('\n▶ PHASE 3: External Access');
+    db.prepare("UPDATE users SET role = 'superadmin' WHERE username = 'Alice'").run();
+    db.prepare("DELETE FROM users WHERE username = 'Charlie'").run();
+    db.prepare("INSERT INTO users (username, role, meta) VALUES (?, ?, ?)").run('Dave', 'user', '{}');
+
+    // @ts-ignore
+    engine['emit']('db:reload', {});
+
+    capture('PHASE 3: Modified', engine.state.items);
+
+    // === VERIFICATION REPORT ===
+    console.log('\n=============================================================');
+    console.log('       🛡️  INTEGRITY CHECKSUM REPORT                         ');
+    console.log('=============================================================');
+    console.log(` CONNECTION ACTIVE: SQLite ${sqliteVersion} | Run ID: ${TEST_TIMESTAMP}`);
+    console.log('-------------------------------------------------------------');
+    console.log(' PHASES                  | CHECKSUM | EXPECTED | STATUS      ');
+    console.log('-------------------------|----------|----------|-------------');
+
+    let allPassed = true;
+    Object.keys(EXPECTATIONS).forEach(phase => {
+        const actual = SNAPSHOTS[phase] || [];
+        const expected = EXPECTATIONS[phase];
+
+        const actHash = getChecksum(actual);
+        const expHash = getChecksum(expected);
+        const match = actHash === expHash;
+
+        if (!match) allPassed = false;
+
+        const status = match ? '✅ PASS' : '❌ FAIL';
+        console.log(` ${phase.padEnd(23)} | ${actHash} | ${expHash} | ${status}`);
+    });
+
+    console.log('-------------------------------------------------------------');
+
+    // === HISTORY DUMP ===
+    console.log('\n==================================================');
+    console.log('       📜 STATE LEDGER                           ');
+    console.log('==================================================');
+    engine.stateHistory.forEach((snap, i) => {
+        const s = JSON.parse(snap);
+        console.log(`${i.toString().padStart(2, '0')} | Items: ${s.items.length} | Loading: ${String(s.loading).padEnd(5)} | Msg: ${s.noItemsMessage || 'None'}`);
+    });
+
+    console.log('\n==================================================');
+    console.log('       📡 EVENT TOPOLOGY                         ');
+    console.log('==================================================');
+    engine.emitHistory.forEach((entryStr, i) => {
+        try {
+            const entry = JSON.parse(entryStr);
+            const time = entry.timestamp.split('T')[1].slice(0, 8);
+            const dataSummary = JSON.stringify(entry.data).substring(0, 60);
+            console.log(`#${i.toString().padStart(2, '0')} [${time}] ${entry.event.padEnd(15)} -> ${dataSummary}`);
+        } catch (e) { }
+    });
+
+    engine.dispose();
+    db.close();
+
+    // Cleanup
+    if (PRESERVE_DB) {
+        console.log(`\n💾 DATABASE PRESERVED: ${DB_PATH}`);
+    } else {
+        if (fs.existsSync(DB_PATH)) fs.unlinkSync(DB_PATH);
+    }
+
+    if (allPassed) {
+        console.log('\n🌟🌟🌟 RESOUNDING ALL TESTS PASSED 🌟🌟🌟\n');
+    } else {
+        console.error('\n💥 VERIFICATION FAILED: Checksum Mismatch detected.\n');
+        process.exit(1);
+    }
+}
+
+runTest();

package/docs/DEPRECATIONS.md

@@ -1,244 +0,0 @@
-# JUX Deprecation System
-
-This document explains how deprecation warnings are implemented in JUX components to help users migrate to newer patterns while maintaining backward compatibility.
-
-## Overview
-
-JUX uses a **console-based deprecation warning system** that:
-- Shows warnings **once per feature per page load** (no spam)
-- Includes **removal date and version** information
-- Provides **migration guidance** via documentation links
-- Warns on **constructor options, fluent methods, and sync bindings**
-
-## Implementation Pattern
-
-### 1. Define the Deprecation Message
-
-At the top of any component file:
-
-```typescript
-// filepath: /path/to/component.ts
-
-// Deprecation warning template
-const DEPRECATION_WARNING = (feature: string) => 
-  `[JUX Deprecation Warning] ComponentName.${feature} will be removed in v1.0.30+ (January 30, 2026). ` +
-  `Please use CSS or the .style() method instead. See: [docs placeholder]`;
-
-// Track which warnings have been shown (prevents spam)
-const _shownWarnings = new Set<string>();
-
-function warnOnce(feature: string): void {
-  if (!_shownWarnings.has(feature)) {
-    console.warn(DEPRECATION_WARNING(feature));
-    _shownWarnings.add(feature);
-  }
-}
-```
-
-### 2. Warn in Constructor (Options)
-
-```typescript
-export class Container extends BaseComponent<ContainerState> {
-  constructor(id: string, options: ContainerOptions = {}) {
-    // Check for deprecated options and warn
-    if (options.direction !== undefined) warnOnce('direction (option)');
-    if (options.gap !== undefined) warnOnce('gap (option)');
-    if (options.padding !== undefined) warnOnce('padding (option)');
-    
-    super(id, {
-      direction: options.direction ?? 'column',
-      gap: options.gap ?? 0,
-      padding: options.padding ?? '0'
-    });
-  }
-}
-```
-
-### 3. Warn in Fluent Methods
-
-```typescript
-export class Container extends BaseComponent<ContainerState> {
-  
-  direction(value: 'row' | 'column'): this {
-    warnOnce('direction()');
-    this.state.direction = value;
-    return this;
-  }
-
-  gap(value: number | string): this {
-    warnOnce('gap()');
-    this.state.gap = value;
-    return this;
-  }
-
-  padding(value: string): this {
-    warnOnce('padding()');
-    this.state.padding = value;
-    return this;
-  }
-}
-```
-
-### 4. Warn in Sync Bindings (Optional)
-
-If a deprecated property can be synced with state:
-
-```typescript
-render(targetId?: string): this {
-  // ...existing render code...
-  
-  this._syncBindings.forEach(({ property, stateObj, toComponent }) => {
-    const transform = toComponent || ((v: any) => v);
-    
-    if (property === 'direction') {
-      warnOnce('direction (sync)');
-      stateObj.subscribe((val: any) => {
-        this.state.direction = String(transform(val));
-        // ...apply changes to DOM...
-      });
-    }
-    // ...existing code...
-  });
-  
-  return this;
-}
-```
-
-## User Experience
-
-When a user writes deprecated code:
-
-```javascript
-// This will show a console warning
-jux.container('my-container')
-  .direction('row')   // ⚠️ Warning: Container.direction() will be removed...
-  .gap(20)            // ⚠️ Warning: Container.gap() will be removed...
-  .render('#app');
-
-// Subsequent calls DON'T show warnings (no spam)
-jux.container('another')
-  .gap(10)            // Silent (already warned once)
-  .render('#app');
-```
-
-**Console output:**
-```
-[JUX Deprecation Warning] Container.direction() will be removed in v1.0.30+ 
-(January 30, 2026). Please use CSS or the .style() method instead. 
-See: [docs placeholder]
-
-[JUX Deprecation Warning] Container.gap() will be removed in v1.0.30+ 
-(January 30, 2026). Please use CSS or the .style() method instead. 
-See: [docs placeholder]
-```
-
-## Migration Path
-
-Users should migrate from deprecated properties to CSS:
-
-```javascript
-// ❌ Old (deprecated)
-jux.container('box')
-  .direction('row')
-  .gap(20)
-  .padding('1rem')
-  .render('#app');
-
-// ✅ New (recommended)
-jux.container('box')
-  .style('display: flex; flex-direction: row; gap: 20px; padding: 1rem;')
-  .render('#app');
-
-// ✅ Or use a CSS class
-jux.container('box')
-  .class('flex-row gap-20 p-4')
-  .render('#app');
-```
-
-## Why This Approach?
-
-1. **Non-breaking**: Old code continues to work during deprecation period
-2. **Gradual migration**: Developers can update at their own pace  
-3. **Clear timeline**: Version and date make planning easy
-4. **No console spam**: Each warning shown only once per page load
-5. **Clear guidance**: Links to migration documentation
-
-## Adding New Deprecations
-
-To deprecate a feature in any component:
-
-### Step 1: Add Warning Infrastructure
-
-```typescript
-const DEPRECATION_WARNING = (feature: string) => 
-  `[JUX Deprecation Warning] YourComponent.${feature} will be removed in vX.X.X+ (Date). ` +
-  `Migration guide: [docs placeholder]`;
-
-const _shownWarnings = new Set<string>();
-
-function warnOnce(feature: string): void {
-  if (!_shownWarnings.has(feature)) {
-    console.warn(DEPRECATION_WARNING(feature));
-    _shownWarnings.add(feature);
-  }
-}
-```
-
-### Step 2: Call warnOnce() Everywhere the Feature is Used
-
-- In constructor for options
-- In fluent methods  
-- In sync binding handlers (if applicable)
-
-### Step 3: Update Documentation
-
-- Add migration examples to docs
-- Update changelog
-- Set removal date (typically 6-12 months out)
-
-### Step 4: Add to Current Deprecations Table Below
-
-## Current Deprecations
-
-| Component | Feature | Replacement | Removal Version | Removal Date |
-|-----------|---------|-------------|-----------------|--------------|
-| Container | `.direction()` | `.style('flex-direction: ...')` | v1.0.30+ | Jan 30, 2026 |
-| Container | `.gap()` | `.style('gap: ...')` | v1.0.30+ | Jan 30, 2026 |
-| Container | `.wrap()` | `.style('flex-wrap: ...')` | v1.0.30+ | Jan 30, 2026 |
-| Container | `.align()` | `.style('align-items: ...')` | v1.0.30+ | Jan 30, 2026 |
-| Container | `.justify()` | `.style('justify-content: ...')` | v1.0.30+ | Jan 30, 2026 |
-| Container | `.padding()` | `.style('padding: ...')` | v1.0.30+ | Jan 30, 2026 |
-
-## Testing Deprecation Warnings
-
-You can verify deprecation warnings are working:
-
-```javascript
-// Open browser console and run:
-jux.container('test')
-  .direction('row')  // Should show warning
-  .gap(20)           // Should show warning
-  .render('#app');
-
-jux.container('test2')
-  .direction('row')  // Should NOT show warning (already shown)
-  .render('#app');
-```
-
-## Best Practices
-
-1. **Give users time**: At least 6 months before removal
-2. **Be specific**: Show exact feature name in warning
-3. **Provide alternatives**: Always suggest what to use instead
-4. **Document migrations**: Create clear before/after examples
-5. **Version appropriately**: Use semver correctly (major bump for removals)
-
-## Questions?
-
-- Migration guides: [docs placeholder - coming soon]
-- Breaking changes: [docs placeholder - coming soon]  
-- Changelog: [GitHub releases placeholder]
-
----
-
-**Last updated**: January 28, 2026