juxscript 1.0.67 → 1.0.69

package/create/layout.jux

@@ -1,4 +1,4 @@
-import { jux } from 'juxscript';
+import { Element, Grid } from 'juxscript';
 
 // Import the layout styles - testing link.
 
@@ -9,32 +9,35 @@ import { jux } from 'juxscript';
 // Note: #app is automatically created by the Jux compiler
 
 export function initializeGrid() {
-    // add the base jux styles
-    jux.include('style.css');
+    // add the base jux styles via style tag import
+    Element('layout-css', { tag: 'style' })
+        .text('@import "style.css";')
+        .render(document.head);
+
     // Header area
-    const appHeader = jux.container('appheader').render('#app');
-    const appHeaderContent = jux.container('appheader-content').render('#appheader');
-    const appHeaderLogo = jux.container('appheader-logo').render('#appheader-content');
-    const appHeaderNav = jux.container('appheader-nav').render('#appheader-content');
-    const appHeaderActions = jux.container('appheader-actions').render('#appheader-content');
+    const appHeader = Element('appheader').render('#app');
+    const appHeaderContent = Element('appheader-content').render('#appheader');
+    const appHeaderLogo = Element('appheader-logo').render('#appheader-content');
+    const appHeaderNav = Element('appheader-nav').render('#appheader-content');
+    const appHeaderActions = Element('appheader-actions').render('#appheader-content');
 
     // Left sidebar
-    const appAside = jux.container('appaside').render('#app');
+    const appAside = Element('appaside').render('#app');
 
     // Main content area
-    const appMain = jux.container('appmain').render('#app');
-    const appMainContent = jux.container('appmain-content').render('#appmain');
+    const appMain = Element('appmain').render('#app');
+    const appMainContent = Element('appmain-content').render('#appmain');
 
     // Right sidebar (optional - starts hidden)
-    const appSidebar = jux.container('appsidebar').render('#app');
-    const appSidebarHeader = jux.container('appsidebar-header').render('#appsidebar');
-    const appSidebarContent = jux.container('appsidebar-content').render('#appsidebar');
-    const appSidebarFooter = jux.container('appsidebar-footer').render('#appsidebar');
+    const appSidebar = Element('appsidebar').render('#app');
+    const appSidebarHeader = Element('appsidebar-header').render('#appsidebar');
+    const appSidebarContent = Element('appsidebar-content').render('#appsidebar');
+    const appSidebarFooter = Element('appsidebar-footer').render('#appsidebar');
 
     // Footer area
-    const appFooter = jux.container('appfooter').render('#app');
-    const appFooterContent = jux.container('appfooter-content').render('#appfooter');
-    const appFooterLegal = jux.container('appfooter-legal').render('#appfooter-content');
+    const appFooter = Element('appfooter').render('#app');
+    const appFooterContent = Element('appfooter-content').render('#appfooter');
+    const appFooterLegal = Element('appfooter-legal').render('#appfooter-content');
 
     // Return references to all containers
     return {
@@ -54,4 +57,21 @@ export function initializeGrid() {
         appFooterContent,
         appFooterLegal
     };
+}
+
+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/lib/componentsv2/element/component.js

@@ -0,0 +1,23 @@
+import { ElementEngine } from './engine.js';
+import { ElementSkin } from './skin.js';
+export function Element(id, options = {}) {
+    const engine = new ElementEngine(id, options);
+    if (typeof window !== 'undefined') {
+        // @ts-ignore
+        window.juxEngines = window.juxEngines || {};
+        // @ts-ignore
+        window.juxEngines[id] = engine;
+    }
+    const skin = new ElementSkin(engine);
+    // @ts-ignore
+    engine.render = (targetId) => {
+        const target = typeof targetId === 'string' ? document.getElementById(targetId) : targetId;
+        if (target)
+            skin.renderSkin(target);
+        return engine;
+    };
+    // @ts-ignore
+    engine.injectCSS = (id, css) => skin.injectCSS(id, css);
+    return engine;
+}
+//# sourceMappingURL=component.js.map

package/lib/componentsv2/element/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sourceRoot":"","sources":["component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAkB,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAOxC,MAAM,UAAU,OAAO,CAAC,EAAU,EAAE,UAA0B,EAAE;IAC5D,MAAM,MAAM,GAAG,IAAI,aAAa,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;IAE9C,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;QAChC,aAAa;QACb,MAAM,CAAC,UAAU,GAAG,MAAM,CAAC,UAAU,IAAI,EAAE,CAAC;QAC5C,aAAa;QACb,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC;IACnC,CAAC;IAED,MAAM,IAAI,GAAG,IAAI,WAAW,CAAC,MAAM,CAAC,CAAC;IAErC,aAAa;IACb,MAAM,CAAC,MAAM,GAAG,CAAC,QAA8B,EAAE,EAAE;QAC/C,MAAM,MAAM,GAAG,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;QAC3F,IAAI,MAAM;YAAE,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QACpC,OAAO,MAA0B,CAAC;IACtC,CAAC,CAAC;IAEF,aAAa;IACb,MAAM,CAAC,SAAS,GAAG,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC;IAExD,OAAO,MAA0B,CAAC;AACtC,CAAC"}

package/lib/componentsv2/element/component.ts

@@ -0,0 +1,32 @@
+import { ElementEngine, ElementOptions } from './engine.js';
+import { ElementSkin } from './skin.js';
+
+export type ElementComponent = ElementEngine & {
+    render: (targetId: string | HTMLElement) => ElementComponent;
+    injectCSS: (id: string, cssContent: string) => void;
+};
+
+export function Element(id: string, options: ElementOptions = {}): ElementComponent {
+    const engine = new ElementEngine(id, options);
+
+    if (typeof window !== 'undefined') {
+        // @ts-ignore
+        window.juxEngines = window.juxEngines || {};
+        // @ts-ignore
+        window.juxEngines[id] = engine;
+    }
+
+    const skin = new ElementSkin(engine);
+
+    // @ts-ignore
+    engine.render = (targetId: string | HTMLElement) => {
+        const target = typeof targetId === 'string' ? document.getElementById(targetId) : targetId;
+        if (target) skin.renderSkin(target);
+        return engine as ElementComponent;
+    };
+
+    // @ts-ignore
+    engine.injectCSS = (id, css) => skin.injectCSS(id, css);
+
+    return engine as ElementComponent;
+}

package/lib/componentsv2/element/engine.js

@@ -0,0 +1,66 @@
+import { BaseEngine } from '../base/BaseEngine.js';
+export class ElementEngine extends BaseEngine {
+    constructor(id, options = {}) {
+        super(id, options);
+    }
+    prepareState(id, options) {
+        return {
+            id,
+            classes: ['jux-element'],
+            visible: true,
+            disabled: false,
+            loading: false,
+            attributes: {},
+            tagName: options.tag || 'div',
+            content: options.html || options.text || '',
+            contentType: options.html ? 'html' : 'text',
+            inlineStyle: options.style || '' // ✅ Initialize logic
+        };
+    }
+    /**
+     * Set the HTML Tag name (e.g. 'div', 'span', 'h1', 'section')
+     */
+    tag(tagName) {
+        this.updateState({ tagName });
+        this.emit('config', { tagName });
+        return this;
+    }
+    /**
+     * Set plain text content (automatically escaped)
+     */
+    text(value) {
+        this.updateState({ content: value, contentType: 'text' });
+        // No emit needed, state update triggers paint
+        return this;
+    }
+    /**
+     * Set raw HTML content (innerHTML)
+     */
+    html(value) {
+        this.updateState({ content: value, contentType: 'html' });
+        return this;
+    }
+    /**
+     * Append raw HTML to existing content
+     */
+    appendHtml(value) {
+        const current = this.state.content || '';
+        this.updateState({ content: current + value, contentType: 'html' });
+        return this;
+    }
+    /**
+     * Set inline styles (e.g. "color: red; margin: 10px;")
+     */
+    style(cssText) {
+        this.updateState({ inlineStyle: cssText });
+        return this;
+    }
+    /**
+     * Receives RAW DOM events from the Skin and emits them to listeners.
+     * This keeps the 'emit' logic encapsulated within the Engine.
+     */
+    handleEvent(eventName, content) {
+        this.emit(eventName, content);
+    }
+}
+//# sourceMappingURL=engine.js.map

package/lib/componentsv2/element/engine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"engine.js","sourceRoot":"","sources":["engine.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,uBAAuB,CAAC;AAiB9D,MAAM,OAAO,aAAc,SAAQ,UAAwC;IACvE,YAAY,EAAU,EAAE,UAA0B,EAAE;QAChD,KAAK,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;IACvB,CAAC;IAES,YAAY,CAAC,EAAU,EAAE,OAAuB;QACtD,OAAO;YACH,EAAE;YACF,OAAO,EAAE,CAAC,aAAa,CAAC;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE,KAAK;YACd,UAAU,EAAE,EAAE;YACd,OAAO,EAAE,OAAO,CAAC,GAAG,IAAI,KAAK;YAC7B,OAAO,EAAE,OAAO,CAAC,IAAI,IAAI,OAAO,CAAC,IAAI,IAAI,EAAE;YAC3C,WAAW,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;YAC3C,WAAW,EAAE,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,qBAAqB;SACzD,CAAC;IACN,CAAC;IAED;;OAEG;IACH,GAAG,CAAC,OAAe;QACf,IAAI,CAAC,WAAW,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC;QAC9B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC;QACjC,OAAO,IAAI,CAAC;IAChB,CAAC;IAED;;OAEG;IACH,IAAI,CAAC,KAAa;QACd,IAAI,CAAC,WAAW,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,CAAC;QAC1D,8CAA8C;QAC9C,OAAO,IAAI,CAAC;IAChB,CAAC;IAED;;OAEG;IACH,IAAI,CAAC,KAAa;QACd,IAAI,CAAC,WAAW,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,CAAC;QAC1D,OAAO,IAAI,CAAC;IAChB,CAAC;IAED;;OAEG;IACH,UAAU,CAAC,KAAa;QACpB,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,CAAC;QACzC,IAAI,CAAC,WAAW,CAAC,EAAE,OAAO,EAAE,OAAO,GAAG,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,CAAC;QACpE,OAAO,IAAI,CAAC;IAChB,CAAC;IAED;;OAEG;IACH,KAAK,CAAC,OAAe;QACjB,IAAI,CAAC,WAAW,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,CAAC,CAAC;QAC3C,OAAO,IAAI,CAAC;IAChB,CAAC;IAED;;;OAGG;IACH,WAAW,CAAC,SAAiB,EAAE,OAAY;QACvC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAClC,CAAC;CACJ"}

package/lib/componentsv2/element/engine.ts

@@ -0,0 +1,88 @@
+import { BaseEngine, BaseState } from '../base/BaseEngine.js';
+
+export interface ElementState extends BaseState {
+    tagName: string;
+    content: string | null;
+    contentType: 'text' | 'html';
+    inlineStyle: string; // ✅ Added inlineStyle to state
+    // BaseState provides: classes, attributes, visible, etc.
+}
+
+export interface ElementOptions {
+    tag?: string;
+    text?: string;
+    html?: string;
+    style?: string; // ✅ Added style option
+}
+
+export class ElementEngine extends BaseEngine<ElementState, ElementOptions> {
+    constructor(id: string, options: ElementOptions = {}) {
+        super(id, options);
+    }
+
+    protected prepareState(id: string, options: ElementOptions): ElementState {
+        return {
+            id,
+            classes: ['jux-element'],
+            visible: true,
+            disabled: false,
+            loading: false,
+            attributes: {},
+            tagName: options.tag || 'div',
+            content: options.html || options.text || '',
+            contentType: options.html ? 'html' : 'text',
+            inlineStyle: options.style || '' // ✅ Initialize logic
+        };
+    }
+
+    /**
+     * Set the HTML Tag name (e.g. 'div', 'span', 'h1', 'section')
+     */
+    tag(tagName: string): this {
+        this.updateState({ tagName });
+        this.emit('config', { tagName });
+        return this;
+    }
+
+    /**
+     * Set plain text content (automatically escaped)
+     */
+    text(value: string): this {
+        this.updateState({ content: value, contentType: 'text' });
+        // No emit needed, state update triggers paint
+        return this;
+    }
+
+    /**
+     * Set raw HTML content (innerHTML)
+     */
+    html(value: string): this {
+        this.updateState({ content: value, contentType: 'html' });
+        return this;
+    }
+
+    /**
+     * Append raw HTML to existing content
+     */
+    appendHtml(value: string): this {
+        const current = this.state.content || '';
+        this.updateState({ content: current + value, contentType: 'html' });
+        return this;
+    }
+
+    /**
+     * Set inline styles (e.g. "color: red; margin: 10px;")
+     */
+    style(cssText: string): this {
+        this.updateState({ inlineStyle: cssText });
+        return this;
+    }
+
+    /**
+     * Receives RAW DOM events from the Skin and emits them to listeners.
+     * This keeps the 'emit' logic encapsulated within the Engine.
+     */
+    handleEvent(eventName: string, content: any): void {
+        this.emit(eventName, content);
+    }
+}

package/lib/componentsv2/element/skin.js

@@ -0,0 +1,53 @@
+import { BaseSkin } from '../base/BaseSkin.js';
+export class ElementSkin extends BaseSkin {
+    constructor(engine) {
+        super(engine);
+    }
+    get structureCss() {
+        return new URL('./structure.css', import.meta.url).href;
+    }
+    // ✅ Fix: Use state to determine initial tag, default to div
+    createRoot() {
+        const tag = this.engine.state.tagName || 'div';
+        return document.createElement(tag);
+    }
+    bindEvents(root) {
+        // ✅ Forward common events to the engine via public handler
+        // This allows engine.on('click', ...) to work without skin accessing protected 'emit'
+        const events = ['click', 'mouseenter', 'mouseleave', 'input', 'change', 'focus', 'blur'];
+        events.forEach(eventName => {
+            root.addEventListener(eventName, (e) => {
+                this.engine.handleEvent(eventName, e);
+            });
+        });
+    }
+    updateSkin(state) {
+        // 1. Tag Replacement Logic
+        if (this.root && this.root.tagName.toLowerCase() !== state.tagName.toLowerCase()) {
+            const newRoot = document.createElement(state.tagName);
+            // Transfer attributes/classes/listeners logic is complex
+            // We rely on re-binding events and re-applying attributes for the new root.
+            if (this.root.parentNode) {
+                this.root.parentNode.replaceChild(newRoot, this.root);
+            }
+            this.root = newRoot;
+            this.bindEvents(this.root); // Re-bind events to new root
+        }
+        if (!this.root)
+            return;
+        // 2. Base Attributes
+        this.applySkinAttributes(this.root, state);
+        // 3. Content
+        if (state.contentType === 'html') {
+            this.root.innerHTML = state.content || '';
+        }
+        else {
+            this.root.textContent = state.content || '';
+        }
+        // 4. Inline Styles
+        if (state.inlineStyle) {
+            this.root.style.cssText = state.inlineStyle;
+        }
+    }
+}
+//# sourceMappingURL=skin.js.map

package/lib/componentsv2/element/skin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skin.js","sourceRoot":"","sources":["skin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAG/C,MAAM,OAAO,WAAY,SAAQ,QAAqC;IAClE,YAAY,MAAqB;QAC7B,KAAK,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAED,IAAc,YAAY;QACtB,OAAO,IAAI,GAAG,CAAC,iBAAiB,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;IAC5D,CAAC;IAED,4DAA4D;IAClD,UAAU;QAChB,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC;QAC/C,OAAO,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACvC,CAAC;IAES,UAAU,CAAC,IAAiB;QAClC,2DAA2D;QAC3D,sFAAsF;QACtF,MAAM,MAAM,GAAG,CAAC,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;QAEzF,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;YACvB,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;gBACnC,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;YAC1C,CAAC,CAAC,CAAC;QACP,CAAC,CAAC,CAAC;IACP,CAAC;IAES,UAAU,CAAC,KAAmB;QACpC,2BAA2B;QAC3B,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,EAAE,CAAC;YAC/E,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;YAEtD,yDAAyD;YACzD,4EAA4E;YAE5E,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;gBACvB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;YAC1D,CAAC;YAED,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;YACpB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,6BAA6B;QAC7D,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO;QAEvB,qBAAqB;QACrB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAE3C,aAAa;QACb,IAAI,KAAK,CAAC,WAAW,KAAK,MAAM,EAAE,CAAC;YAC/B,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,OAAO,IAAI,EAAE,CAAC;QAC9C,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,OAAO,IAAI,EAAE,CAAC;QAChD,CAAC;QAED,mBAAmB;QACnB,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;YACpB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,WAAW,CAAC;QAChD,CAAC;IACL,CAAC;CACJ"}

package/lib/componentsv2/element/skin.ts

@@ -0,0 +1,64 @@
+import { BaseSkin } from '../base/BaseSkin.js';
+import { ElementEngine, ElementState } from './engine.js';
+
+export class ElementSkin extends BaseSkin<ElementState, ElementEngine> {
+    constructor(engine: ElementEngine) {
+        super(engine);
+    }
+
+    protected get structureCss(): string {
+        return new URL('./structure.css', import.meta.url).href;
+    }
+
+    // ✅ Fix: Use state to determine initial tag, default to div
+    protected createRoot(): HTMLElement {
+        const tag = this.engine.state.tagName || 'div';
+        return document.createElement(tag);
+    }
+
+    protected bindEvents(root: HTMLElement): void {
+        // ✅ Forward common events to the engine via public handler
+        // This allows engine.on('click', ...) to work without skin accessing protected 'emit'
+        const events = ['click', 'mouseenter', 'mouseleave', 'input', 'change', 'focus', 'blur'];
+
+        events.forEach(eventName => {
+            root.addEventListener(eventName, (e) => {
+                this.engine.handleEvent(eventName, e);
+            });
+        });
+    }
+
+    protected updateSkin(state: ElementState): void {
+        // 1. Tag Replacement Logic
+        if (this.root && this.root.tagName.toLowerCase() !== state.tagName.toLowerCase()) {
+            const newRoot = document.createElement(state.tagName);
+
+            // Transfer attributes/classes/listeners logic is complex
+            // We rely on re-binding events and re-applying attributes for the new root.
+
+            if (this.root.parentNode) {
+                this.root.parentNode.replaceChild(newRoot, this.root);
+            }
+
+            this.root = newRoot;
+            this.bindEvents(this.root); // Re-bind events to new root
+        }
+
+        if (!this.root) return;
+
+        // 2. Base Attributes
+        this.applySkinAttributes(this.root, state);
+
+        // 3. Content
+        if (state.contentType === 'html') {
+            this.root.innerHTML = state.content || '';
+        } else {
+            this.root.textContent = state.content || '';
+        }
+
+        // 4. Inline Styles
+        if (state.inlineStyle) {
+            this.root.style.cssText = state.inlineStyle;
+        }
+    }
+}

package/lib/componentsv2/element/structure.css

@@ -0,0 +1,16 @@
+.jux-element {
+    /* Minimal layout defaults to behave like a standard block/inline element */
+    box-sizing: border-box;
+    /* Allow text properties to inherit naturally */
+    color: inherit;
+    font-family: inherit;
+}
+
+/* Optional helper for hidden state toggling via engine */
+.jux-element[hidden] {
+    display: none !important;
+}
+
+.jux-element:hover {
+    background-color: var(--color-surface-hover);
+}

package/lib/componentsv2/index.js

@@ -5,9 +5,10 @@ import { IndexedDBPlugin } from './plugins/IndexedDBPlugin.js';
 import { ClientSQLitePlugin } from './plugins/ClientSQLitePlugin.js';
 import { List } from './list/component.js';
 import { Grid } from './grid/component.js';
-import { Input } from './input/component.js'; // ✅ Registered
+import { Input } from './input/component.js';
+import { Element } from './element/component.js';
 // Export individually
-export { List, Grid, Input };
+export { List, Grid, Input, Element };
 /**
  * Curated documentation for core framework capabilities.
  * These strings are appended to the reflection data in juxDef.tree.

package/lib/componentsv2/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"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"}

package/lib/componentsv2/index.ts

@@ -8,14 +8,12 @@ import { ClientSQLitePlugin } from './plugins/ClientSQLitePlugin.js';
 
 import { List } from './list/component.js';
 import { Grid } from './grid/component.js';
-import { Input } from './input/component.js'; // ✅ Registered
+import { Input } from './input/component.js';
+
+import { Element } from './element/component.js';
 
 // Export individually
-export {
-    List,
-    Grid,
-    Input
-};
+export { List, Grid, Input, Element };
 
 /**
  * Curated documentation for core framework capabilities.

package/lib/componentsv2/tools/Scaffold.js

@@ -9,7 +9,6 @@ const __dirname = path.dirname(__filename);
 const COMPONENTS_DIR = path.resolve(__dirname, '..');
 const STUBS_DIR = path.join(COMPONENTS_DIR, 'stubs');
 const INDEX_FILE = path.join(COMPONENTS_DIR, 'index.ts');
-const EXPERIMENTS_DIR = path.resolve(__dirname, '../../../jux/experiments');
 const RESERVED = ['base', 'bases', 'plugin', 'plugins', 'tool', 'tools', 'stub', 'stubs', 'skin', 'skins', 'structure', 'structures', 'engine', 'engines', 'component', 'components'];
 
 const toPascalCase = (str) => str.replace(/(^\w|-\w)/g, (clear) => clear.replace('-', '').toUpperCase());
@@ -86,17 +85,6 @@ const indexBackup = fs.readFileSync(INDEX_FILE, 'utf-8');
         console.log(`   File: \x1b[36m${INDEX_FILE}\x1b[0m`);
         console.log(`   add: \x1b[32m${ComponentName},\x1b[0m\n`);
 
-        // 4. Create Experiment
-        const experimentFile = path.join(EXPERIMENTS_DIR, `${componentName}-demo.jux`);
-        const experimentContent = `import { juxV2, juxDef } from '../../lib/componentsv2/index.js';
-
-const demo = juxV2.${ComponentName}('demo-${componentName}', { text: 'Jux Scaffolding Works!' });
-demo.render('app');
-
-juxDef.audit('${ComponentName}', juxV2.${ComponentName});
-`;
-        fs.writeFileSync(experimentFile, experimentContent);
-        log(`   + Created Experiment: experiments/${componentName}-demo.jux`);
 
         // 5. Verification
         log(`\n🕵️  Verifying Integrity (Targeted TypeScript Check)...`);
@@ -130,10 +118,6 @@ juxDef.audit('${ComponentName}', juxV2.${ComponentName});
             if (fs.existsSync(targetDir)) {
                 fs.rmSync(targetDir, { recursive: true, force: true });
             }
-            const expFile = path.join(EXPERIMENTS_DIR, `${componentName}-demo.jux`);
-            if (fs.existsSync(expFile)) {
-                fs.unlinkSync(expFile);
-            }
         }
         process.exit(1);
     }