juxscript 1.0.132 → 1.1.0

package/create/index.jux

@@ -1,77 +0,0 @@
-import { Element, List } from 'juxscript';
-import { LandingLayout } from './layout.jux';
-
-// 1. Initialize Layout
-LandingLayout();
-
-// 2. Header: Logo & Nav
-Element('logo', { tag: 'h2' })
-    .text('JUX STUDIO')
-    .className('jux-typo-brand')
-    .render('landing-layout-0-0');
-
-// 3. Hero Section
-const hero = Element('hero-content', { tag: 'div' })
-    .className('jux-section-center')
-    .render('landing-layout-1-0');
-
-Element('hero-h1', { tag: 'h1' })
-    .text('Build Web Apps. Simply.')
-    .className('jux-typo-display')
-    .render('hero-content');
-
-Element('hero-p', { tag: 'p' })
-    .text('No complex build steps. No magic. Just standard JavaScript components.')
-    .className('jux-typo-lead')
-    .render('hero-content');
-
-Element('cta-btn', { tag: 'button' })
-    .text('Get Started')
-    .className('jux-btn-primary')
-    .render('hero-content');
-
-// 4. Features Section (Nested Content)
-const featuresWrapper = Element('features-wrapper', { tag: 'div' })
-    .className('jux-grid-responsive')
-    .render('landing-layout-2-0');
-
-// Component Showcase within Landing Page
-const listDemo = Element('list-demo-card', { tag: 'div' })
-    .className('jux-card')
-    .render('features-wrapper');
-
-Element('list-label', { tag: 'h3' }).text('Interactive Components').render('list-demo-card');
-Element('list-desc', { tag: 'p' })
-    .text('Try dragging or sorting this list:')
-    .style('color: var(--color-text-secondary); margin-bottom: 20px;')
-    .render('list-demo-card');
-
-List('feature-list', { items: ['Zero Config', 'Standard Web APIs', 'Hot Reloading', 'TypeScript Ready'] })
-    .listType('unordered')
-    .enableSort()
-    .enableMove()
-    .render('list-demo-card');
-
-// Feature Cards
-const cardData = [
-    { title: 'Reactive State', desc: 'Granular binding means high performance without a virtual DOM.' },
-    { title: 'Time Travel', desc: 'Built-in undo/redo capabilities for complex application state.' }
-];
-
-cardData.forEach((f, i) => {
-    const card = Element(`card-${i}`, { tag: 'div' })
-        .className('jux-card')
-        .render('features-wrapper');
-
-    Element(`ct-${i}`, { tag: 'h3' }).text(f.title).render(`card-${i}`);
-    Element(`cd-${i}`, { tag: 'p' })
-        .text(f.desc)
-        .style('color: var(--color-text-secondary); line-height: var(--line-height-normal);')
-        .render(`card-${i}`);
-});
-
-// 5. Footer
-const footer = Element('footer-content', { tag: 'div' })
-    .html('© 2025 Jux Project. Open Source.')
-    .className('jux-layout-footer')
-    .render('landing-layout-3-0');

package/create/layout.jux

@@ -1,18 +0,0 @@
-import { Grid } from 'juxscript';
-
-export function LandingLayout() {
-    // Defines a classic landing page structure using JUX Grid
-    return Grid('landing-layout')
-        .rows([
-            { size: '80px', class: 'layout-header' },    // 0: Navbar
-            { size: '500px', class: 'layout-hero' },     // 1: Hero Banner
-            { size: 'auto', class: 'layout-features' },  // 2: Main Content
-            { size: '120px', class: 'layout-footer' }    // 3: Footer
-        ])
-        .columns([
-            { size: '1fr', class: 'col-main' }           // Single column flow
-        ])
-        .gap('0px')
-        .width('100%')
-        .render('app');
-}

package/create/style.css

@@ -1,57 +0,0 @@
-/** 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/assets/jux.svg

@@ -1,34 +0,0 @@
-<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

@@ -1,197 +0,0 @@
-/**
- * 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;
-  --font-size-xl: 1.5rem;
-  --font-size-2xl: 2rem;
-  --font-size-3xl: 2.25rem; /* Added for H1 default */
-  --font-size-4xl: 4rem;
-  --line-height-normal: 1.6;
-  --line-height-tight: 1.2;
-
-  /* Spacing Scale */
-  --space-xs: 0.25rem;
-  --space-sm: 0.5rem;
-  --space-md: 1rem;
-  --space-lg: 1.5rem;
-  --space-xl: 2rem;
-  --space-2xl: 3rem;
-
-  /* Layout */
-  --radius-sm: 6px;
-  --radius-md: 10px;
-  --radius-lg: 12px;
-  --radius-round: 50px;
-  --border-width: 1px;
-  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.05);
-
-  /* Animation */
-  --transition-fast: 150ms ease;
-  --transition-normal: 300ms ease;
-
-  /* Color Palette - RxTrail Brand Colors */
-  --color-brand: #e57373;
-  --color-brand-contrast: #000000;
-  --color-brand-hover: #ef5350;
-  --color-brand-subtle: rgba(229, 115, 115, 0.08);
-
-  --color-text-primary: #2c2f3e;
-  --color-text-secondary: #666666;
-  --color-text-inverse: #ffffff;
-
-  --color-background: #fafbfc;
-  --color-background-alt: #f8f9fa;
-  --color-background-inverse: #111111;
-  
-  --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;
-}
-
-/* --- Primitives & Reset --- */
-
-*, *::before, *::after {
-  box-sizing: border-box;
-}
-
-html, body {
-  height: 100%;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  font-family: var(--font-family-base);
-  font-size: var(--font-size-base);
-  line-height: var(--line-height-normal);
-  color: var(--color-text-primary);
-  background-color: var(--color-background);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  margin-top: 0;
-  margin-bottom: var(--space-md);
-  font-weight: 700;
-  line-height: var(--line-height-tight);
-  color: var(--color-text-primary);
-}
-
-h1 { font-size: var(--font-size-3xl); letter-spacing: -0.02em; }
-h2 { font-size: var(--font-size-2xl); letter-spacing: -0.01em; }
-h3 { font-size: var(--font-size-xl); }
-h4 { font-size: var(--font-size-lg); }
-h5 { font-size: var(--font-size-base); }
-h6 { font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); }
-
-p {
-  margin-top: 0;
-  margin-bottom: var(--space-md);
-  max-width: 70ch; /* Optimal reading width */
-}
-
-a {
-  color: var(--color-brand);
-  text-decoration: none;
-  font-weight: 500;
-  transition: color var(--transition-fast);
-}
-
-a:hover {
-  color: var(--color-brand-hover);
-  text-decoration: underline;
-}
-
-strong, b {
-  font-weight: 700;
-}
-
-em, i {
-  font-style: italic;
-}
-
-ul, ol {
-  margin-top: 0;
-  margin-bottom: var(--space-md);
-  padding-left: var(--space-xl);
-}
-
-li {
-  margin-bottom: var(--space-xs);
-}
-
-code, kbd, samp {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  font-size: 0.9em;
-  padding: 0.2em 0.4em;
-  border-radius: var(--radius-sm);
-  background-color: var(--color-surface-hover);
-  color: var(--color-text-primary);
-}
-
-pre {
-  display: block;
-  overflow-x: auto;
-  padding: var(--space-md);
-  background-color: var(--color-surface-hover);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  margin-bottom: var(--space-lg);
-}
-
-pre code {
-  background-color: transparent;
-  padding: 0;
-  color: inherit;
-  font-size: var(--font-size-sm);
-}
-
-blockquote {
-  margin: var(--space-lg) 0;
-  padding-left: var(--space-lg);
-  border-left: 4px solid var(--color-brand-subtle);
-  color: var(--color-text-secondary);
-  font-style: italic;
-}
-
-img, video {
-  max-width: 100%;
-  height: auto;
-  display: block;
-}
-
-hr {
-  border: 0;
-  border-top: var(--border-width) solid var(--color-border);
-  margin: var(--space-xl) 0;
-}
-
-button, input, select, textarea {
-  font-family: inherit;
-  font-size: inherit;
-}

package/create/themes/base2.css

@@ -1,54 +0,0 @@
-
-/*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

@@ -1,16 +0,0 @@
-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/lib/componentsv2/base/BaseEngine.d.ts

@@ -1,112 +0,0 @@
-import { OptionsContractSchema, ValidationResult } from './OptionsContract.js';
-export interface JuxServiceContract<TEngine = any> {
-    name: string;
-    version?: string;
-    targetEnv?: 'client' | 'server' | 'universal';
-    install: (engine: TEngine) => void;
-    uninstall?: (engine: TEngine) => void;
-}
-export interface BaseState {
-    id: string;
-    classes: string[];
-    visible: boolean;
-    disabled: boolean;
-    loading: boolean;
-    attributes: Record<string, string>;
-}
-type EventListener<T = any> = (data: T) => void;
-/**
- * THE ENGINE AGREEMENT
- *
- * 1. Must define State and Options types.
- * 2. Must implement `prepareState` to map Options -> Initial State.
- * 3. Provides reactivity, eventing, and plugin systems out of the box.
- */
-export declare abstract class BaseEngine<TState extends BaseState, TOptions = any> {
-    #private;
-    constructor(id: string, options: TOptions);
-    /**
-     * CONTRACT: Override to define the valid options schema for this engine.
-     * Enables option validation with helpful error messages.
-     */
-    protected get optionsSchema(): OptionsContractSchema | null;
-    /**
-     * Access validation results (warnings, errors, normalized options)
-     */
-    get validation(): ValidationResult | null;
-    /**
-     * CONTRACT: Must transform input options into the initial State.
-     * This separates "mapping logic" from "construction/startup logic".
-     */
-    protected abstract prepareState(id: string, options: TOptions): TState;
-    get state(): TState;
-    subscribe(callback: (value: TState) => void): () => void;
-    /**
-     * Enable/Disable Active Console Logging
-     */
-    debug(enabled?: boolean): this;
-    protected updateState(patch: Partial<TState>): void;
-    /**
-     * Revert the state to the previous snapshot
-     */
-    rollback(): this;
-    /**
-     * Redo the previously rolled-back state
-     */
-    rollforward(): this;
-    /**
-     * Local Subscription: Subscribe to a specific named event on THIS instance.
-     */
-    on<T = any>(event: string, callback: EventListener<T>): this;
-    /**
-     * Unsubscribe from a local event.
-     */
-    off<T = any>(event: string, callback: EventListener<T>): this;
-    /**
-     * THE LISTENER (Neighborhood Watch)
-     * Listen for events broadcasting on the global frequency.
-     * @param channel The global channel name (e.g. 'demo-list-v2:move')
-     * @param callback Reaction logic
-     */
-    listenTo<T = any>(channel: string, callback: EventListener<T>): this;
-    /**
-     * Cleanup all global listeners attached by this engine.
-     */
-    dispose(): void;
-    /**
-     * BROADCASTER
-     * Emits locally AND to the global neighborhood.
-     */
-    protected emit(event: string, data: any): void;
-    /**
-     * DEBUG: Access the Global Event Bus registry to see active channels and listener identities.
-     * Useful for debugging communication topology from the console.
-     */
-    get eventRegistry(): Record<string, string[]>;
-    /**
-     * DEBUG: Access the Internal State Ledger (History).
-     * Returns an array of JSON strings representing past states.
-     */
-    get stateHistory(): string[];
-    /**
-     * DEBUG: Access the Event Emission Ledger.
-     */
-    get emitHistory(): string[];
-    /**
-     * Inject a Service/Plugin into this Engine.
-     * @param plugin A contract object { name, install, uninstall? }
-     */
-    addPlugin(plugin: JuxServiceContract<this>): this;
-    /**
-     * Remove a plugin and run its teardown logic.
-     */
-    removePlugin(name: string): this;
-    addClass(className: string): this;
-    removeClass(className: string): this;
-    visible(isVisible: boolean): this;
-    disable(isDisabled?: boolean): this;
-    loading(isLoading?: boolean): this;
-    attr(key: string, value: string): this;
-}
-export {};
-//# sourceMappingURL=BaseEngine.d.ts.map