juxscript 1.0.68 → 1.0.69

package/bin/cli.js

@@ -11,7 +11,7 @@ const command = process.argv[2];
 function scaffoldProject(targetDir, packageRoot) {
   const juxDir = path.join(targetDir, 'jux');
   if (!fs.existsSync(juxDir)) fs.mkdirSync(juxDir, { recursive: true });
-  const presetDir = path.join(packageRoot, 'presets', 'default');
+  const presetDir = path.join(packageRoot, 'create');
   let copied = 0;
   if (fs.existsSync(presetDir)) {
     fs.readdirSync(presetDir).forEach(file => {

package/create/index.jux

@@ -0,0 +1,79 @@
+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')
+    .style('margin: 0; padding: 25px 40px; font-weight: 800; letter-spacing: -1px; display: flex; align-items: center; height: 100%; box-sizing: border-box;')
+    .render('landing-layout-0-0');
+
+// 3. Hero Section
+const hero = Element('hero-content', { tag: 'div' })
+    .style('display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; text-align: center; background: #f8f9fa;')
+    .render('landing-layout-1-0');
+
+Element('hero-h1', { tag: 'h1' })
+    .text('Build Web Apps. Simply.')
+    .style('font-size: 4rem; margin: 0 0 20px 0; font-weight: 900; background: linear-gradient(45deg, #111, #555); -webkit-background-clip: text; -webkit-text-fill-color: transparent;')
+    .render('hero-content');
+
+Element('hero-p', { tag: 'p' })
+    .text('No complex build steps. No magic. Just standard JavaScript components.')
+    .style('font-size: 1.5rem; color: #666; max-width: 600px; line-height: 1.5;')
+    .render('hero-content');
+
+Element('cta-btn', { tag: 'button' })
+    .text('Get Started')
+    .style('margin-top: 30px; padding: 15px 40px; font-size: 1.2rem; background: #000; color: #fff; border: none; border-radius: 50px; cursor: pointer; transition: transform 0.2s;')
+    .render('hero-content');
+
+// 4. Features Section (Nested Content)
+const featuresWrapper = Element('features-wrapper', { tag: 'div' })
+    .style('max-width: 1000px; margin: 60px auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; padding: 0 20px;')
+    .render('landing-layout-2-0');
+
+// Component Showcase within Landing Page
+const listDemo = Element('list-demo-card', { tag: 'div' })
+    .style('background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid #eee;')
+    .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:#666; 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' })
+        .style('background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid #eee;')
+        .render('features-wrapper');
+
+    Element(`ct-${i}`, { tag: 'h3' }).text(f.title).render(`card-${i}`);
+    Element(`cd-${i}`, { tag: 'p' }).text(f.desc).style('color: #666; line-height: 1.6;').render(`card-${i}`);
+});
+
+// 5. Footer
+const footer = Element('footer-content', { tag: 'div' })
+    .html('© 2025 Jux Project. Open Source.')
+    .style('display:flex; align-items:center; justify-content:center; height:100%; background:#111; color:#666;')
+    .render('landing-layout-3-0');
+
+// 6. Global Reset (injected via Element)
+Element('reset-styles', { tag: 'style' })
+    .text(`
+        body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #fff; color: #111; }
+        button:hover { transform: scale(1.05); }
+    `)
+    .render('app');

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/engine.js

@@ -13,13 +13,14 @@ export class ElementEngine extends BaseEngine {
             attributes: {},
             tagName: options.tag || 'div',
             content: options.html || options.text || '',
-            contentType: options.html ? 'html' : 'text'
+            contentType: options.html ? 'html' : 'text',
+            inlineStyle: options.style || '' // ✅ Initialize logic
         };
     }
     /**
      * Set the HTML Tag name (e.g. 'div', 'span', 'h1', 'section')
      */
-    tagType(tagName) {
+    tag(tagName) {
         this.updateState({ tagName });
         this.emit('config', { tagName });
         return this;
@@ -47,5 +48,19 @@ export class ElementEngine extends BaseEngine {
         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

@@ -1 +1 @@
-{"version":3,"file":"engine.js","sourceRoot":"","sources":["engine.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,uBAAuB,CAAC;AAe9D,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;SAC9C,CAAC;IACN,CAAC;IAED;;OAEG;IACH,OAAO,CAAC,OAAe;QACnB,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;CACJ"}
+{"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

@@ -4,6 +4,7 @@ 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.
 }
 
@@ -11,6 +12,7 @@ export interface ElementOptions {
     tag?: string;
     text?: string;
     html?: string;
+    style?: string; // ✅ Added style option
 }
 
 export class ElementEngine extends BaseEngine<ElementState, ElementOptions> {
@@ -28,14 +30,15 @@ export class ElementEngine extends BaseEngine<ElementState, ElementOptions> {
             attributes: {},
             tagName: options.tag || 'div',
             content: options.html || options.text || '',
-            contentType: options.html ? 'html' : 'text'
+            contentType: options.html ? 'html' : 'text',
+            inlineStyle: options.style || '' // ✅ Initialize logic
         };
     }
 
     /**
      * Set the HTML Tag name (e.g. 'div', 'span', 'h1', 'section')
      */
-    tagType(tagName: string): this {
+    tag(tagName: string): this {
         this.updateState({ tagName });
         this.emit('config', { tagName });
         return this;
@@ -66,4 +69,20 @@ export class ElementEngine extends BaseEngine<ElementState, ElementOptions> {
         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

@@ -6,45 +6,47 @@ export class ElementSkin extends BaseSkin {
     get structureCss() {
         return new URL('./structure.css', import.meta.url).href;
     }
-    /**
-     * Defines the initial root element creation strategy
-     */
+    // ✅ Fix: Use state to determine initial tag, default to div
     createRoot() {
-        return document.createElement(this.engine.state.tagName || 'div');
+        const tag = this.engine.state.tagName || 'div';
+        return document.createElement(tag);
     }
     bindEvents(root) {
-        // Generic Elements rely on the BaseSkin's .on() event system
-        // No default listeners are enforced here to keep it lightweight
+        // ✅ 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) {
-        if (!this.root)
-            return;
-        // 1. Tag Name Reconciliation
-        // If the tag name changes, we must replace the root element entirely.
-        if (this.root.tagName.toLowerCase() !== state.tagName.toLowerCase()) {
+        // 1. Tag Replacement Logic
+        if (this.root && this.root.tagName.toLowerCase() !== state.tagName.toLowerCase()) {
             const newRoot = document.createElement(state.tagName);
-            // Move children (if any were appended externally/not managed by content state)
-            while (this.root.firstChild) {
-                newRoot.appendChild(this.root.firstChild);
+            // 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.replaceWith(newRoot);
             this.root = newRoot;
-            // Re-bind (BaseSkin doesn't automatically rebind on replace, so basic events might drop
-            // if they were attached locally, but this is an edge case for "readonly" building blocks).
+            this.bindEvents(this.root); // Re-bind events to new root
         }
-        // 2. Attributes & Classes (Handled largely by BaseSkin helper, but explicit here for clarity)
+        if (!this.root)
+            return;
+        // 2. Base Attributes
         this.applySkinAttributes(this.root, state);
-        // 3. Content Rendering
-        // We only touch the DOM if content differs to avoid stomping on interactive children
+        // 3. Content
         if (state.contentType === 'html') {
-            if (this.root.innerHTML !== state.content) {
-                this.root.innerHTML = state.content || '';
-            }
+            this.root.innerHTML = state.content || '';
         }
         else {
-            if (this.root.textContent !== state.content) {
-                this.root.textContent = state.content || '';
-            }
+            this.root.textContent = state.content || '';
+        }
+        // 4. Inline Styles
+        if (state.inlineStyle) {
+            this.root.style.cssText = state.inlineStyle;
         }
     }
 }

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

@@ -1 +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;;OAEG;IACO,UAAU;QAChB,OAAO,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,CAAC;IACtE,CAAC;IAES,UAAU,CAAC,IAAiB;QAClC,6DAA6D;QAC7D,gEAAgE;IACpE,CAAC;IAES,UAAU,CAAC,KAAmB;QACpC,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO;QAEvB,6BAA6B;QAC7B,sEAAsE;QACtE,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,EAAE,CAAC;YAClE,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;YAEtD,+EAA+E;YAC/E,OAAO,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;gBAC1B,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAC9C,CAAC;YAED,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;YAC/B,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;YAEpB,wFAAwF;YACxF,2FAA2F;QAC/F,CAAC;QAED,8FAA8F;QAC9F,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAE3C,uBAAuB;QACvB,qFAAqF;QACrF,IAAI,KAAK,CAAC,WAAW,KAAK,MAAM,EAAE,CAAC;YAC/B,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,KAAK,KAAK,CAAC,OAAO,EAAE,CAAC;gBACxC,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,OAAO,IAAI,EAAE,CAAC;YAC9C,CAAC;QACL,CAAC;aAAM,CAAC;YACJ,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,KAAK,KAAK,CAAC,OAAO,EAAE,CAAC;gBAC1C,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,OAAO,IAAI,EAAE,CAAC;YAChD,CAAC;QACL,CAAC;IACL,CAAC;CACJ"}
+{"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

@@ -10,51 +10,55 @@ export class ElementSkin extends BaseSkin<ElementState, ElementEngine> {
         return new URL('./structure.css', import.meta.url).href;
     }
 
-    /**
-     * Defines the initial root element creation strategy
-     */
+    // ✅ Fix: Use state to determine initial tag, default to div
     protected createRoot(): HTMLElement {
-        return document.createElement(this.engine.state.tagName || 'div');
+        const tag = this.engine.state.tagName || 'div';
+        return document.createElement(tag);
     }
 
     protected bindEvents(root: HTMLElement): void {
-        // Generic Elements rely on the BaseSkin's .on() event system
-        // No default listeners are enforced here to keep it lightweight
+        // ✅ 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 {
-        if (!this.root) return;
-
-        // 1. Tag Name Reconciliation
-        // If the tag name changes, we must replace the root element entirely.
-        if (this.root.tagName.toLowerCase() !== state.tagName.toLowerCase()) {
+        // 1. Tag Replacement Logic
+        if (this.root && this.root.tagName.toLowerCase() !== state.tagName.toLowerCase()) {
             const newRoot = document.createElement(state.tagName);
 
-            // Move children (if any were appended externally/not managed by content state)
-            while (this.root.firstChild) {
-                newRoot.appendChild(this.root.firstChild);
+            // 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.replaceWith(newRoot);
             this.root = newRoot;
-
-            // Re-bind (BaseSkin doesn't automatically rebind on replace, so basic events might drop
-            // if they were attached locally, but this is an edge case for "readonly" building blocks).
+            this.bindEvents(this.root); // Re-bind events to new root
         }
 
-        // 2. Attributes & Classes (Handled largely by BaseSkin helper, but explicit here for clarity)
+        if (!this.root) return;
+
+        // 2. Base Attributes
         this.applySkinAttributes(this.root, state);
 
-        // 3. Content Rendering
-        // We only touch the DOM if content differs to avoid stomping on interactive children
+        // 3. Content
         if (state.contentType === 'html') {
-            if (this.root.innerHTML !== state.content) {
-                this.root.innerHTML = state.content || '';
-            }
+            this.root.innerHTML = state.content || '';
         } else {
-            if (this.root.textContent !== state.content) {
-                this.root.textContent = state.content || '';
-            }
+            this.root.textContent = state.content || '';
+        }
+
+        // 4. Inline Styles
+        if (state.inlineStyle) {
+            this.root.style.cssText = state.inlineStyle;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.0.68",
+  "version": "1.0.69",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "lib/jux.js",