juxscript 1.0.118 → 1.0.120

package/lib/componentsv2/element/skin.js

@@ -24,8 +24,10 @@ export class ElementSkin extends BaseSkin {
     }
     updateSkin(state) {
         // 1. Tag Replacement Logic (uses state.tag)
-        if (this.root) {
-            const newRoot = document.createElement(state.tag.toLowerCase());
+        const currentTag = this.root ? this.root.tagName.toLowerCase() : '';
+        const desiredTag = (state.tag || 'div').toLowerCase();
+        if (this.root && currentTag !== desiredTag) {
+            const newRoot = document.createElement(desiredTag);
             if (this.root.parentNode) {
                 this.root.parentNode.replaceChild(newRoot, this.root);
             }

package/lib/componentsv2/element/structure.css

@@ -227,3 +227,35 @@ button, input, select, textarea {
     display: flex; 
     flex-direction: column; 
 }
+
+/* --- Layout Regions --- */
+
+.layout-header {
+    background-color: var(--color-surface-base);
+    border-bottom: 1px solid var(--color-border);
+    /* Horizontal alignment usually handled by inner grid/flex, vertical centering is safe default here */
+    justify-content: center;
+    z-index: 50;
+}
+
+.layout-hero {
+    background-color: var(--color-background-alt);
+    position: relative;
+    /* Often the hero cell itself centers its children */
+    align-items: center;
+    justify-content: center;
+}
+
+.layout-features {
+    background-color: var(--color-background);
+    /* Ensure content doesn't just jam against edges if inner wrapper misses padding */
+    position: relative;
+}
+
+.layout-footer {
+    background-color: var(--color-background-inverse);
+    color: var(--color-text-secondary);
+    border-top: 1px solid var(--color-border);
+    align-items: center;
+    justify-content: center;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.0.118",
+  "version": "1.0.120",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "./index.js",