@yr-lang/yr 0.1.1 → 0.2.1

package/BUGS.md

@@ -3,21 +3,10 @@
 This file documents known bugs and limitations in yr.
 The project is under active development.
 
-### Wrapper-only section closure can fail
+### Wrapper-only section closure ✓ Fixed in 0.2.0
 
-In some cases, a section cannot be closed using only a wrapper, and must instead be closed explicitly with an element (_).
-
-For example, the following may result in an error:
-
-```
-++
-_ .teste
-  _wrapper/test
-    _ .teste2
-    _wrapper/test2
-```
-
-However, explicitly closing the section with elements works as expected:
+Previously, a section could not always be closed using only a wrapper and required an explicit
+`_` element. This has been resolved — the following now works as expected:
 
 ```
 ++
@@ -25,11 +14,4 @@ _ .teste
   _wrapper/test
     _ .teste2
     _wrapper/test2
-    _
-  _
 ```
-
-#### Notes
-
-* This appears to be related to how section termination is detected when the last node is a wrapper.
-* The parser may not recognize wrappers as valid closing tokens in some nesting scenarios.

package/CHANGELOG.md

@@ -0,0 +1,51 @@
+# Changelog
+
+## [0.3.0] - 2026-04-27
+
+Remove `wrapperheader`, `header`, `scripts` and `footer` from parsedYr
+Created `wrapperheader` sections
+Added `VOID_TAGS` in order to not add elementId to all elements `if (preview === true)`
+
+## [0.2.0] - 2026-03-01
+
+### Fixed
+
+- **Wrapper-only section closure** — Sections containing nested wrappers no longer require an
+  explicit `_` to close. The parser now correctly closes open layers when a wrapper is terminated
+  by indentation, producing balanced HTML in all nesting scenarios. Resolves the issue documented
+  in `BUGS.md`.
+
+- **Multiple wrapper closure on a single line** — When an element's indentation requires closing
+  more than one wrapper at once, the parser now closes all of them (changed `if` to `while` in
+  the html parser wrapper check). Previously only the innermost wrapper was closed, causing
+  sibling elements to be rendered inside the wrong wrapper.
+
+- **Section change leaves wrappers open** — When a namespace token (e.g. `><` → `##`) was
+  encountered while one or more wrappers were active, only the outermost wrapper was cleaned up
+  via `shift()`. Now all open wrappers are properly closed innermost-first.
+
+- **Closing tag indentation** — `getWhiteSpace()` was designed to receive a hierarchy level but
+  was called with a raw character-count indentation, producing increasingly wrong whitespace for
+  deeper elements. Closing tags now mirror the indentation of their opening tags.
+
+- **`throw -1` loses file/project context** — A stray semicolon caused the error message for
+  odd-indentation errors to drop the filename and project name. The `-1` error message now
+  matches the `-2` error message in completeness.
+
+- **`getElementAttributes` spurious empty key** — When an `att={{}}` block ended with a trailing
+  comma, an empty string key was unconditionally added to the parsed attributes object. Now only
+  added if `parseKey` is non-empty.
+
+- **Self-importing wrapper causes infinite recursion** — A wrapper that listed itself via `!!`
+  in its own `++` section would loop indefinitely. The extension is now registered in
+  `sections.extensions` before its content is parsed, so the guard fires correctly on
+  re-entry.
+
+- **Wrapper without `++` section does not invoke JS function** — A wrapper that had a
+  `_@wrapper(Category, Option)` function in `@>` but no `++` body would have its div created
+  but the JS function never called. The `wrapperjs` entry is now added independently of whether
+  a `++` section exists.
+
+## [0.1.1] - prior
+
+Initial public releases.

package/lib/%build.yr

@@ -1,3 +1,3 @@
 **
 
-cd "$_PROJECT_PATH"
+cd "$_PROJECT_PATH"

package/lib/%deploy.yr

@@ -4,4 +4,6 @@
 
 ___deploy
 
+source "$_PROJECT_PATH/actions/common"
+cd "$_PROJECT_PATH"
 gh-pages dist

package/lib/%gh-pages.yr

@@ -14,6 +14,8 @@ gh-pages() {
     rm -rf $git_name
   fi
 
+  if [[ ! -d .git ]]; then exit 1; fi
+
   git add .
   git commit -m "# DEPLOY"
   git push -f origin main
@@ -57,4 +59,4 @@ gh-pages_fix() {
     -X PUT \
     -F source.branch=gh-pages \
     2>/dev/null || true
-}
+}

package/lib/%serve.yr

@@ -2,6 +2,12 @@
 
 ___serve
 
+APP_NAME=$(echo $_CONFIG | jq -r .name)
 cd $_PROJECT_PATH
 if [[ ! -d node_modules ]]; then npm i $(cat node_modules.txt); fi
+
+pkill -9 -f "^node app/app.js$"
 node app/app.js
+
+#pkill -9 -f "$APP_NAME" 2>/dev/null
+#exec -a "$APP_NAME" node app/app.js

package/lib/@try.yr

@@ -0,0 +1,9 @@
+%%
+
+_@try(#showError) {
+  try {
+    ___
+  } catch(error) {
+    if (#showError) console.log(error);
+  }
+@}

package/lib/contenteditable.yr

@@ -0,0 +1,68 @@
+@@
+
+const htmlEntities = {
+  '&': '&',
+  '&lt;': '<',
+  '&gt;': '>',
+  '&quot;': '"',
+  '&#039;': "'",
+  '&ndash;': '-',
+};
+
+function unblurcontenteditable(element) {
+  element.setAttribute('contenteditable', false);
+}
+
+function blurcontenteditable(element, callback=false, selectEnd=false, blurOnEnter=true, removeEmpty=false) {
+  element.setAttribute('contenteditable', true);
+  if (element.getAttribute('_blurcontenteditable') === 'true') return;
+  element.setAttribute('_blurcontenteditable', true);
+  let content = element.textContent.trim();
+
+  if (blurOnEnter) element.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' || e.keyCode === 13) {
+      e.target.innerHTML = e.target.innerHTML.replace('<br>', '');
+      element.blur();
+    }
+  });
+
+  if (selectEnd) {
+    for (let item of ['click', 'focus']) element.addEventListener(item, (e) => {
+      const range = document.createRange();
+      range.selectNodeContents(element);
+      range.collapse(false);
+      window.getSelection().removeAllRanges();
+      window.getSelection().addRange(range);
+      element.focus();
+      range.detach();
+      element.scrollTop = e.target.scrollHeight;
+    });
+  }
+
+  element.addEventListener('blur', (e) => {
+    if (element._ignoreBlurCallback) return;
+
+    if (removeEmpty && e.target.innerHTML === '') {
+      ((removeEmpty === true) ? element : removeEmpty).remove();
+      return;
+    }
+
+    if (blurOnEnter)
+      e.target.innerHTML = e.target.innerHTML.replace('<br>', '');
+
+    if (e.target.innerHTML === content) return;
+
+    element.innerHTML = e.target.innerHTML.replace(/<\/div><div>/gi, '\n')
+      .replace(/(<.*?div>)/gi, '\n').trim();
+
+    let newContent = element.textContent;
+    for (let item in htmlEntities)
+      newContent = newContent.split(item).join(htmlEntities[item]);
+
+    try {
+      callback(content, newContent, e);
+    } catch(error) {/* pass */}
+
+    content = element.textContent;
+  });
+}

package/lib/element.yr

@@ -189,6 +189,8 @@ function dragElement(
   };
 
   const start = (x, y, e) => {
+    document.querySelectorAll('.drag-clone').forEach(item => item.remove());
+
     X = x; Y = y;
     activeEl = (!options.clone) ? element : createClone();
 

package/lib/windowListener.yr

@@ -0,0 +1,9 @@
+@@
+
+function windowListener(callback) {
+  if (typeof window.addEventListener != 'undefined') {
+    window.addEventListener('message', callback);
+  } else if (typeof window.attachEvent != 'undefined') {
+    window.attachEvent('onmessage', callback);
+  }
+}

package/node.js

@@ -147,6 +147,8 @@ module.exports = {
     }
 
     delete sections.wrapperjs;
+    delete sections.header;
+    delete sections.footer;
 
     for (let item in sections)
       result += `${core.parsers.names[item]}\n\n${sections[item]}\n`;
@@ -241,51 +243,55 @@ module.exports = {
     }
   },
   spawn(path, args=[], callbackClose=false, log=true, exit=false, callbackData=false, callbackError=false) {
-    if (args === '-k') {
-      try {
-        console.log('killing spawn');
-        console.log(path, args);
-        //path.stdin.pause();
-        path.kill();
-        console.log('spawn killed');
-      } catch(error) { console.log(error); }
-
-      return;
-    }
-
     if (log) console.log('starting spawn...');
 
-    const child = spawn(path, args, { shell: true });
+    // garante execução via bash (sem shell intermediário problemático)
+    const child = spawn(path, args, {
+      stdio: ['ignore', 'pipe', 'pipe'],
+      detached: true
+    });
 
-    //child.stdin.on('data', function(data){
-    //  console.log(data.toString());
-    //});
+    if (log) console.log('spawn pid:', child.pid);
 
-    child.stdout.on('data', (data) => {
-      data = data.toString();
-      if (log) console.log(data);
-      if (callbackData) callbackData(data);
-    });
+    if (child.stdout) {
+      child.stdout.on('data', (data) => {
+        data = data.toString();
+        if (log) process.stdout.write(data);
+        if (callbackData) callbackData(data);
+      });
+    }
 
-    child.stderr.on('data', (data) => {
-      data = data.toString();
-      if (log) console.log('\x1b[31m' + data + '\x1b[0m');
-      if (callbackError) callbackError(data);
-    });
+    if (child.stderr) {
+      child.stderr.on('data', (data) => {
+        data = data.toString();
+        if (log) process.stderr.write(data);
+        if (callbackError) callbackError(data);
+      });
+    }
 
     child.on('exit', (code, signal) => {
-      if (log) console.log('finish spawn\n');
-      //if (state.building === 1) {
-      //  state.building = true;
-      //  return this.devops(appName, deploy, log, exit);
-      //}
-      //state.building = false;
+      if (log) console.log('exit:', { code, signal });
+    });
+
+    child.on('close', (code, signal) => {
+      if (log) console.log('close:', { code, signal });
       if (callbackClose) callbackClose(code, signal);
       if (exit) process.exit();
     });
 
     return child;
   },
+  kill(child) {
+    if (!child || !child.pid) return;
+
+    try {
+      // mata o grupo inteiro (bash + node + qualquer filho)
+      process.kill(-child.pid, 'SIGTERM');
+      console.log('process group killed:', child.pid);
+    } catch (e) {
+      console.log('kill error:', e);
+    }
+  },
   build(projectName=false, config={}, viewsPaths=env.VIEWS, assetsPath=false) {
     if (!config) config = {};
 
@@ -532,7 +538,7 @@ dist/`);
       }
 
       if (result.devops.build) {
-        this.spawn(`${projectPath}/actions/build`, [], () => {
+        if (!config.ignoreBuild) this.spawn(`${projectPath}/actions/build`, [], () => {
           if (config.exec) this.spawn(`${projectPath}/app/app.js`);
         });
       } else if (config.exec) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yr-lang/yr",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "description": "Yr is a modern structural language and parser",
   "main": "./node.js",
   "exports": {
@@ -9,6 +9,6 @@
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
     "type": "git",
-    "url": "https://github.com/yr-lang/yr"
+    "url": "git+https://github.com/yr-lang/yr.git"
   }
 }

package/yr.js

@@ -17,16 +17,18 @@ const utils = {
 };
 
 const common = {
+  // Bug fix: was using new Array((i*2)-1).join which was designed for 'level' units,
+  // but is called with raw indentation (char count). Use simple repeat instead.
   getWhiteSpace(indentation) {
-    try {
-      return new Array((indentation * 2) - 1).join(' ');
-    } catch(error) { return ''; }
+    if (!indentation || indentation < 0) return '';
+    return ' '.repeat(indentation);
   }
 };
 
 const namespaces = {
   '@&': { name: 'jsapp', parser: 'array', default: [], merge: true },
   '++': { name: 'wrappers', parser: 'auxstring', default: {}, merge: true },
+  '+>': { name: 'wrapperheader', parser: 'html', default: '', merge: true },
   '>+': { name: 'wrapperbody', parser: 'html', default: '', merge: true },
   '><': { name: 'body', parser: 'html', default: '', merge: true },
   '@>': { name: 'jsheader', parser: 'string', default: '', merge: true },
@@ -140,12 +142,21 @@ function getElementAttributes(line) {
     lastChar = value;
   }
 
-  parse[parseKey.trim()] = parseValue.trim();
+  // Bug fix: only add the last key-value if parseKey is non-empty
+  // (avoids adding a spurious empty key when attrs end with a trailing comma)
+  if (parseKey.trim()) parse[parseKey.trim()] = parseValue.trim();
   parseKey = '', parseValue = '';
   return { ...attributes, ...parse };
 }
 
 function addIdToElement(line, config, elementId=false) {
+  let tag = line.trim().split(' ')[0];
+
+  if (tag.startsWith('_')) {
+    tag = tag.replace(/^_/, '');
+    if (VOID_TAGS.has(tag) || ['title', 'script', 'style'].includes(tag)) return line;
+  }
+
   if (config.preview && !line.includes('.__') && !line.includes('.{{__')) {
     if (!elementId) elementId = '__' + crypto.generateToken(8);
     if (!line.trim().startsWith('_')) elementId = '{{' + elementId;
@@ -180,6 +191,11 @@ function addIdToElement(line, config, elementId=false) {
   return line;
 }
 
+const VOID_TAGS = new Set([
+  'area','base','br','col','embed','hr','img','input',
+  'link','meta','param','source','track','wbr'
+]);
+
 const parserFns = {
   array(line, sections, section, state, lineNumber, config={}) {
     if (state.sectionChanged) sections[section].push('')
@@ -197,7 +213,7 @@ const parserFns = {
     sections[section] += line + '\n';
   },
   html(line, sections, section, state, lineNumber, config={}) {
-    if (config.ignoreHtml) return;
+    if (config.ignoreHtml && !['wrapperheader', 'header', 'footer', 'scripts'].includes(section)) return;
     if (!sections.yr[section]) sections.yr[section] = '';
     const parsedLine = parseLine(line);
     if (parsedLine.line.startsWith('//')) {
@@ -232,18 +248,35 @@ const parserFns = {
       elementId = '__' + split[1];
       parsedLine.line = split[0].trimEnd();
     }
-    yrParsedLine = addIdToElement(yrParsedLine, config, elementId);
+    if (!['wrapperheader', 'header', 'footer', 'scripts'].includes(section))
+      yrParsedLine = addIdToElement(yrParsedLine, config, elementId);
     let yrIndentation = 0, ignoreYr, wildCard = '', replaceYr;
-    if (state.wrapper.length > 0) {
+    // Bug fix: use while loop to close ALL wrappers that need closing (not just one)
+    // A single element may need to close multiple nested wrappers at once
+    while (state.wrapper.length > 0) {
       let wrapper = state.wrapper[state.wrapper.length - 1];
       if (parsedLine.indentation >= wrapper.reference) {
         yrIndentation = wrapper.new - wrapper.reference + 2;
         replaceYr = sections.yr[section].includes('#@#\n');
+        break; // Still inside this wrapper, stop closing
       } else {
-        wrapper = state.wrapper[state.wrapper.length - 1];
         sections.yr[section] = sections.yr[section].replace(/#@#\n/, '');
+        // Close any layers that were opened inside this wrapper before popping it
+        for (let j = state.layers.length - 1; j >= 0; j--) {
+          const layer = state.layers[j];
+          if (!layer) continue;
+          // Only close layers that belong inside this wrapper (indentation >= wrapper.reference)
+          if (layer.indentation >= wrapper.reference) {
+            if (!VOID_TAGS.has(layer.tag)) sections[layer.section] +=
+              layer.whiteSpace + `</${layer.tag}>\n`;
+            state.layers.pop();
+          } else {
+            break;
+          }
+        }
         if (wrapper.wildCard) sections[section] += wrapper.wildCard + '\n';
         state.wrapper.pop();
+        // After popping, loop again to check if we need to close more wrappers
       }
     }
     if (yrIndentation < 0) yrIndentation = 0;
@@ -257,7 +290,7 @@ const parserFns = {
     }
     if (parsedLine.indentation !== -1) {
       if (parsedLine.indentation % 2 !== 0)
-        throw `-1: indentation error at line ${lineNumber}` + '';
+        throw `-1: indentation error at line ${lineNumber}` + '' +
           ` (${config.name}.yr, ${config.project}):\n\n"""\n${line}\n"""`;
       if (parsedLine.level > state.level + 1)
         throw `-2: indentation error at line ${lineNumber}` + '' +
@@ -265,13 +298,13 @@ const parserFns = {
       if (parsedLine.level < state.level) {
         for (let j = state.layers.length; j > parsedLine.level - 1; j--) {
           if (!state.layers[j - 1]) continue;
-          sections[state.layers[j - 1].section] +=
+          if (!VOID_TAGS.has(state.layers[j - 1].tag)) sections[state.layers[j - 1].section] +=
             state.layers[j - 1].whiteSpace + `</${state.layers[j - 1].tag}>\n`;
           state.layers.pop();
         }
       } else if (parsedLine.level === state.level
       && state.element && state.layers.length > 0) {
-        sections[state.layers[state.layers.length - 1].section] +=
+        if (!VOID_TAGS.has(state.layers[state.layers.length - 1].tag)) sections[state.layers[state.layers.length - 1].section] +=
           `</${state.layers[state.layers.length - 1].tag}>\n`;
         state.layers.pop();
       }
@@ -280,7 +313,7 @@ const parserFns = {
     || state.layers[state.layers.length - 1].indentation === parsedLine.indentation)) {
       for (let j = state.layers.length - 1; j >= 0; j--) {
         if (j === -1) continue;
-        sections[state.layers[j].section] +=
+        if (!VOID_TAGS.has(state.layers[j].tag)) sections[state.layers[j].section] +=
           state.layers[j].whiteSpace + `</${state.layers[j].tag}>\n`;
         state.layers.pop();
       }
@@ -296,7 +329,7 @@ const parserFns = {
       if (tag[0] === '_') {
         tag = tag.replace(/__/, '');
         if (!tag) tag = 'div';
-        wildCard += '<!--#@#-->';
+        if (!config.simple) wildCard += '<!--#@#-->';
       }
       let attributes = '', id = '', classes = '';
       for (let item of lineSplit) {
@@ -317,12 +350,22 @@ const parserFns = {
           attributes += ` ${item}`;
         }
       }
-      if (tag.includes('/')) {
+      if (tag.includes('/') && config.simple) {
+        const wrapper = '___' + tag.replace(/!/, '').replace(/\//, '__');
+        tag = 'div';
+        if (!classes) {
+          classes = ` class="${elementId} ${wrapper}"`;
+        } else if (!classes.includes(elementId)) {
+          classes = classes.split('class="').join(`class="${elementId} ${wrapper} `);
+        }
+      } else if (tag.includes('/') && !config.simple) {
         const wrapper = tag.replace(/!/, '').split('/');
         wrapper[0] = utils.capitalize(wrapper[0]);
         wrapper[1] = utils.capitalize(wrapper[1]);
         const wrapperName = wrapper.join('/');
-        core.extend(wrapper, wrapperName, sections, state, { redoWrapper: true });
+        core.extend(wrapper, wrapperName, sections, state, {
+          redoWrapper: true, simple: config.simple
+        });
         let newWrapper, wrapperIndentation;
         if (!tag.includes('!')) {
           newWrapper = {
@@ -333,33 +376,28 @@ const parserFns = {
           state.wrapper.push(newWrapper);
           wrapperIndentation = parsedLine.indentation;
         }
+        // Always set up element attributes for wrapperjs call,
+        // even if wrapper has no ++ section (no wrapperbody)
+        elementAttributes.id = elementId;
+        elementAttributes.category = wrapper[0];
+        elementAttributes.option = wrapper[1];
+        let attributes = [];
+        try {
+          attributes = sections.wrappers[wrapperName]
+            ? sections.wrappers[wrapperName].vars.attributes
+            : sections.vars.attributes;
+        } catch(error) {/* pass */}
+        if (!attributes) attributes = sections.vars.attributes;
+        elementAttributes.attributes = attributes;
+        // Call the JS wrapper function if it exists, regardless of whether ++ is present
+        if (sections.jsheader
+        .includes(`function __${wrapperName.replace(/\//, '_')}(`)
+        && !sections.wrapperjs.includes(`"id":"${elementId}"`)) {
+          const wrapperjs =
+            `__${wrapperName.replace(/\//, '_')}(${JSON.stringify(elementAttributes)});\n`;
+          sections.wrapperjs += wrapperjs;
+        }
         if (sections.wrappers[wrapperName]) {
-          elementAttributes.id = elementId;
-          elementAttributes.category = wrapper[0];
-          elementAttributes.option = wrapper[1];
-          let attributes = [];
-          try {
-            attributes = sections.wrappers[wrapperName].vars.attributes;
-          } catch(error) {
-            console.log(wrapperName);
-            console.log(sections.wrappers[wrapperName]);
-            console.log(parsedLine);
-            console.log(error);
-            throw error;
-          }
-          if (!attributes) attributes = sections.vars.attributes;
-          elementAttributes.attributes = attributes;
-          let redone;
-          try {
-            redone = !sections.wrappers[wrapperName].redone;
-          } catch(error) {/* pass */}
-          if (sections.jsheader
-          .includes(`function __${wrapperName.replace(/\//, '_')}(`)
-          && !sections.wrapperjs.includes(`"id":"${elementId}"`)) {
-            const wrapperjs =
-              `__${wrapperName.replace(/\//, '_')}(${JSON.stringify(elementAttributes)});\n`;
-            sections.wrapperjs += wrapperjs;
-          }
           if (!tag.includes('!')) {
             if (sections.wrappers[wrapperName].yrwrapperbody) {
               for (let value of sections.wrappers[wrapperName]
@@ -394,7 +432,7 @@ const parserFns = {
           classes = classes.split('class="').join(`class="${elementId} `);
         }
       }
-      if (config.preview) {
+      if (config.preview && !['wrapperheader', 'header', 'footer', 'scripts'].includes(section)) {
         if (!classes) {
           classes = ` class="${elementId}"`;
         } else if (!classes.includes(elementId)) {
@@ -408,7 +446,7 @@ const parserFns = {
       state.element = true;
     } else {
       if (section) {
-        if (section === 'header') {
+        if (section === 'header' || section === 'wrapperheader') {
           sections[section] += parsedLine.whiteSpace + parsedLine.line + '\n';
         } else {
           let attributes = '';
@@ -423,6 +461,16 @@ const parserFns = {
   }
 }
 
+function isYrSyntax(code) {
+  code = code.split('!! preview\n!! bodyblock\n!! iframeConsole\n!! element\n').join('');
+  code = code.trim();
+
+  for (let item of [...Object.keys(namespaces), '!!', '[[', '--'])
+    if (code.startsWith(item)) return true;
+
+  return false;
+}
+
 const parsers = {
   namespaces, tokens: Object.keys(namespaces),
   parsers: _parsers, mergers, names,
@@ -600,6 +648,8 @@ const core = {
     }
   },
   extend(wrapper, wrapperName, sections, state, config={}) {
+    if (config.simple && !wrapperName.includes('@')) return;
+
     if (!sections.parsedyr)
       sections.parsedyr = { header: '', body: '', footer: '', scripts: '' };
 
@@ -627,11 +677,15 @@ const core = {
         return;
       }
 
+      // Bug fix: register extension BEFORE parsing its content
+      // to prevent infinite recursion when a wrapper imports itself via !!
+      sections.extensions += '!! ' + wrapperName + '\n';
+
       const _yr = sections.yr;
       sections.yr = {};
 
       const aux = {};
-      for (let item of ['header', 'body', 'footer', 'scripts']) {
+      for (let item of ['wrapperheader', 'header', 'body', 'footer', 'scripts']) {
         aux[item] = sections[item];
         sections[item] = '';
       }
@@ -640,8 +694,6 @@ const core = {
         sections, wrapper: `${wrapper.join('/')}`, ...config
       });
 
-      sections.extensions += '!! ' + wrapperName + '\n';
-
         if (!sections.wrappers[wrapperName])
           sections.wrappers[wrapperName] = {};
 
@@ -651,7 +703,7 @@ const core = {
         if (!sections.wrappers[wrapperName].vars)
           sections.wrappers[wrapperName].vars = {};
 
-      for (let item of ['header', 'body', 'footer', 'scripts']) {
+      for (let item of ['wrapperheader', 'header', 'body', 'footer', 'scripts']) {
         sections.wrappers[wrapperName].parsed[item] = result[item];
         sections[item] = aux[item];
       }
@@ -667,6 +719,329 @@ const core = {
     }
   },
   parse(code, config={}) {
+    if (!isYrSyntax(code)) {
+      const sections = { parsedhtml: code };
+
+      if (config.name) sections.ui = [{
+        name: (config.name.includes('.html'))
+          ? config.name : `${config.name}.html`,
+        content: sections.parsedhtml
+      }];
+
+      return sections;
+    }
+
+    if (config.opposite) {
+      const file = code;
+      const isProject = config.isProject;
+      let yrResult = isProject ? '' : '!! @wrapper\n\n';
+
+      const VOID_TAGS = new Set([
+        'area','base','br','col','embed','hr','img','input',
+        'link','meta','param','source','track','wbr'
+      ]);
+
+      const P_BREAKERS = new Set([
+        'address','article','aside','blockquote','div','dl',
+        'fieldset','footer','form','h1','h2','h3','h4','h5','h6',
+        'header','hr','main','nav','ol','p','pre','section','table','ul'
+      ]);
+
+      function tokenize(html) {
+        const tokens = [];
+        let i = 0;
+
+        while (i < html.length) {
+          if (html[i] === '<') {
+            const close = html.indexOf('>', i);
+            if (close === -1) break;
+
+            tokens.push({
+              type: 'tag',
+              value: html.slice(i, close + 1)
+            });
+
+            i = close + 1;
+          } else {
+            const next = html.indexOf('<', i);
+            tokens.push({
+              type: 'text',
+              value: html.slice(i, next === -1 ? html.length : next)
+            });
+            i = next === -1 ? html.length : next;
+          }
+        }
+
+        return tokens;
+      }
+
+      function parseTag(str) {
+        const isClosing = /^<\//.test(str);
+        const isSelfClosing = /\/>$/.test(str);
+
+        const nameMatch = str.match(/^<\/?([a-zA-Z0-9-]+)/);
+        if (!nameMatch) return null;
+
+        const tag = nameMatch[1].toLowerCase();
+
+        const attrs = {};
+        [...str.matchAll(/([\w-:]+)(?:="([^"]*)")?/g)].forEach(m => {
+          const key = m[1];
+          if (key === tag) return;
+          attrs[key] = m[2] ?? true;
+        });
+
+        return { tag, attrs, isClosing, isSelfClosing };
+      }
+
+      function parseHTML(html) {
+        const tokens = tokenize(html);
+
+        const root = { tag: '_root', children: [] };
+        const stack = [root];
+
+        for (let t of tokens) {
+          let current = stack[stack.length - 1];
+
+          if (t.type === 'text') {
+            const text = t.value.trim();
+            if (text) current.children.push({ text });
+            continue;
+          }
+
+          const parsed = parseTag(t.value);
+          if (!parsed) continue;
+
+          const { tag, attrs, isClosing, isSelfClosing } = parsed;
+
+          if (isClosing) {
+            while (stack.length > 1) {
+              const top = stack.pop();
+              if (top.tag === tag) break;
+            }
+            continue;
+          }
+
+          if (current.tag === 'p' && P_BREAKERS.has(tag)) {
+            stack.pop();
+            current = stack[stack.length - 1];
+          }
+
+          const node = { tag, attrs, children: [] };
+          current.children.push(node);
+
+          if (!isSelfClosing && !VOID_TAGS.has(tag)) {
+            stack.push(node);
+          }
+        }
+
+        return root.children;
+      }
+
+      function toYr(nodes, indent = 0) {
+        let out = '';
+
+        for (let node of nodes) {
+          const space = ' '.repeat(indent);
+
+          if (node.text) {
+            let text = node.text;
+
+            if (text.trimStart().startsWith('//')) {
+              text = text.replace(/^(\s*)\/\//, (_, spaces) => {
+                return spaces + '&#47;&#47;';
+              });
+            }
+
+            if (text.trimStart().startsWith('_')) {
+              text = text.replace(/^(\s*)_/, (_, spaces) => {
+                return spaces + '&#95;';
+              });
+            }
+
+            if (text.trimStart().startsWith('.')) {
+              text = text.replace(/^(\s*)\./, (_, spaces) => {
+                return spaces + '&#46;';
+              });
+            }
+
+            out += `${space}${text}\n`;
+            continue;
+          }
+
+          if (node.tag === 'script') continue;
+
+          let line = '_';
+
+          if (node.tag !== 'div') line += node.tag;
+
+          if (node.attrs?.id) line += ` #${node.attrs.id}`;
+
+          if (node.attrs?.class) {
+            const cls = node.attrs.class.split(' ').join('.');
+            line += ` .${cls}`;
+          }
+
+          for (let key in node.attrs) {
+            if (key === 'class' || key === 'id') continue;
+
+            if (node.attrs[key] === true) {
+              line += ` ${key}`;
+            } else {
+              line += ` ${key}="${node.attrs[key]}"`;
+            }
+          }
+
+          out += `${space}${line}\n`;
+
+          if (node.children?.length) {
+            out += toYr(node.children, indent + 2);
+          }
+        }
+
+        return out;
+      }
+
+      function extract(tag, str) {
+        const match = str.match(new RegExp(`<${tag}[^>]*>([\\s\\S]*?)<\\/${tag}>`));
+        return match ? match[1].trim() : '';
+      }
+
+      function formatCSS(css) {
+        if (!css) return '';
+        const comments = [];
+        let normalized = css.replace(/\/\*[\s\S]*?\*\//g, m => {
+          const idx = comments.length;
+          comments.push(m);
+          return `__COMMENT_${idx}__`;
+        });
+
+        normalized = normalized
+          .replace(/\s*\{\s*/g, ' {')
+          .replace(/\s*\}\s*/g, ' }')
+          .replace(/\s*;\s*/g, '; ')
+          .replace(/,\s*/g, ', ')
+          //.replace(/([\w-])\s*:\s*(?!:)/g, '$1: ')
+          .replace(/\s+/g, ' ')
+          .replace(/__COMMENT_(\d+)__/g, (_, i) => '\n' + comments[+i] + '\n')
+          .trim();
+
+        let indent = 0;
+        let out = '';
+        let i = 0;
+
+        while (i < normalized.length) {
+          const char = normalized[i];
+
+          if (char === '{') {
+            out = out.trimEnd();
+            out += ' {\n';
+            indent++;
+            out += '  '.repeat(indent);
+          } else if (char === '}') {
+            indent--;
+            out = out.trimEnd();
+            out += '\n' + '  '.repeat(indent) + '}\n';
+            if (indent >= 0) out += '\n' + '  '.repeat(indent);
+          } else if (char === ';') {
+            out = out.trimEnd();
+            out += ';\n' + '  '.repeat(indent);
+          } else if (char === ' ' && out.endsWith('\n' + '  '.repeat(indent))) {
+          } else {
+            out += char;
+          }
+
+          i++;
+        }
+
+        return out
+          .split('\n')
+          .map(l => l.trimEnd())
+          .join('\n')
+          .replace(/\n{3,}/g, '\n\n')
+          .trim();
+      }
+
+      function wrapScript(js) {
+        if (!js) return '';
+        let category = '';
+        let option = '';
+
+        const match = js.match(/__([A-Za-z0-9]+)_([A-Za-z0-9]+)/);
+        if (match) {
+          category = match[1];
+          option = match[2];
+        }
+
+        const startBlock =
+`async function __${category}_${option}(_config) {
+    let element = (_config.id === 'body') ? document.body
+      : document.querySelector(\`.\${_config.id}\`);
+    if (!element) return;
+    try {
+      element._config = _config;
+      if (window.__preview) {
+        element._html = element.outerHTML;
+        element._refresh = () => {
+          element.outerHTML = element._html;
+          __Triggers_Disclaimermodal(_config)
+        };
+      }
+      `;
+
+        js = js.replace(startBlock, `_@wrapper(${category}, ${option}) {\n`);
+
+        const catchBlock = `
+    } catch(error) {
+      if (window.__preview || false) {
+        //element.innerHTML = '<div style="background: red; color: white">'
+          //+ \`${category} ${option} error: \${error.message}</div>\`;
+        console.error(error);
+      }
+    }
+  }`;
+
+        js = js.replace(catchBlock, '\n@}');
+        return js;
+      }
+
+      const tree = parseHTML(file);
+
+      const headContent = extract('head', file);
+      const bodyContent = extract('body', file);
+      const styleContent = extract('style', headContent);
+      const scriptContent = extract('script', bodyContent);
+
+      function removeTags(nodes, blacklist = ['style', 'script']) {
+        return nodes
+          .filter(n => !n.tag || !blacklist.includes(n.tag))
+          .map(n => ({
+            ...n,
+            children: n.children ? removeTags(n.children, blacklist) : []
+          }));
+      }
+
+      const cleanTree = removeTags(tree);
+
+      let headNodes = [];
+      let bodyNodes = [];
+
+      for (let n of cleanTree) {
+        if (n.tag === 'html') {
+          for (let c of n.children) {
+            if (c.tag === 'head') headNodes = c.children;
+            if (c.tag === 'body') bodyNodes = c.children;
+          }
+        }
+      }
+
+      yrResult += '>>\n\n' + toYr(headNodes) + '\n\n';
+      yrResult += (isProject ? '<#' : '##') + '\n\n' + formatCSS(styleContent) + '\n\n';
+      yrResult += (isProject ? '><' : '++') + '\n\n' + toYr(bodyNodes) + '\n\n';
+      yrResult += (isProject ? '<@' : '@>') + '\n\n' + wrapScript(scriptContent) + '\n';
+      return yrResult;
+    }
+
     const sections = (config.sections) ? config.sections : parsers.defaults();
 
     const state = {
@@ -715,16 +1090,26 @@ const core = {
         section = parsers.namespaces[line].name;
         state.sectionChanged = true;
 
-        if (state.wrapper.length > 0) {
-          const wrapper = state.wrapper[0];
+        // Bug fix: close ALL open wrappers when section changes, innermost first (pop, not shift)
+        while (state.wrapper.length > 0) {
+          const wrapper = state.wrapper[state.wrapper.length - 1];
 
           sections.yr[wrapper.section] =
             sections.yr[wrapper.section].replace(/#@#\n/, '');
 
+          // Close layers created inside this wrapper
+          for (let j = state.layers.length - 1; j >= 0; j--) {
+            const layer = state.layers[j];
+            if (!layer || layer.indentation < wrapper.reference) break;
+            if (!VOID_TAGS.has(layer.tag)) sections[layer.section] +=
+              layer.whiteSpace + `</${layer.tag}>\n`;
+            state.layers.pop();
+          }
+
           if (wrapper.wildCard)
             sections[wrapper.section] += wrapper.wildCard + '\n';
 
-          state.wrapper.shift();
+          state.wrapper.pop();
         }
 
         continue;
@@ -750,7 +1135,9 @@ const core = {
           const wrapper = wrapperName.split('/');
           if (wrapper.length === 1) wrapper.unshift('__');
 
-          this.extend(wrapper, wrapperName, sections, state);
+          this.extend(wrapper, wrapperName, sections, state, {
+            simple: config.simple
+          });
         //} else if (line.startsWith('\\\\')) {
         //  const wrapperName = line.replace(/\\\\/g, '').trim() + '\n';
 
@@ -814,7 +1201,7 @@ const core = {
       };
 
       const aux = {};
-      for (let item of ['header', 'body', 'footer', 'scripts']) {
+      for (let item of ['wrapperheader', 'header', 'body', 'footer', 'scripts']) {
         aux[item] = sections[item];
         sections[item] = '';
       }
@@ -832,7 +1219,7 @@ const core = {
       if (!sections.wrappers[config.wrapper].vars)
         sections.wrappers[config.wrapper].vars = {};
 
-      for (let item of ['header', 'body', 'footer', 'scripts']) {
+      for (let item of ['wrapperheader', 'header', 'body', 'footer', 'scripts']) {
         sections.wrappers[config.wrapper].parsed[item] = extension[item];
         sections[item] = aux[item]
       }
@@ -861,15 +1248,17 @@ const core = {
         sections[wrapper.section] += wrapper.wildCard + '\n';
 
 
-      for (let j = wrapper.layers.length - 1; j >= 0; j--) {
-        const layer = wrapper.layers[j];
+      // Only close layers that were created INSIDE this wrapper (indentation >= wrapper.reference)
+      // External layers (pre-existing before the wrapper) should NOT be closed here
+      for (let j = state.layers.length - 1; j >= 0; j--) {
+        const layer = state.layers[j];
         if (!layer) continue;
+        if (layer.indentation < wrapper.reference) break;
 
-        sections[layer.section] +=
-          common.getWhiteSpace(layer.indentation) + `</${layer.tag}>\n`;
+        if (!VOID_TAGS.has(layer.tag)) sections[layer.section] +=
+          layer.whiteSpace + `</${layer.tag}>\n`;
 
-        wrapper.layers.pop();
-        state.layers = state.layers.filter(e => e !== layer);
+        state.layers.pop();
       }
 
       state.wrapper.pop();
@@ -878,7 +1267,7 @@ const core = {
     for (let j = state.layers.length - 1; j >= 0; j--) {
       if (j === -1) continue;
 
-      sections[state.layers[j].section] +=
+      if (!VOID_TAGS.has(state.layers[j].tag)) sections[state.layers[j].section] +=
         common.getWhiteSpace(state.layers[j].indentation) + `</${state.layers[j].tag}>\n`;
 
       state.layers.pop();
@@ -939,7 +1328,7 @@ const core = {
         sections.parsedyr.extensions += item + '\n';
     }
 
-    for (let value of ['header', 'body', 'footer', 'scripts']) {
+    for (let value of ['wrapperheader', 'header', 'body', 'footer', 'scripts']) {
       if (!sections[value]) sections[value] = '';
       if (!sections.yr[value]) sections.yr[value] = '';
 
@@ -1010,7 +1399,7 @@ const core = {
 
       parsedItem = JSON.parse(`{${parsedItem}}`);
 
-      for (let value of ['header', 'body', 'footer', 'scripts']) {
+      for (let value of ['wrapperheader', 'header', 'body', 'footer', 'scripts']) {
         if (sections[`parsed${value}`].includes(`${parsedItem.id}`)) {
           parsedItem.attributes = sections
             .wrappers[`${parsedItem.category}/${parsedItem.option}`].vars.attributes;
@@ -1145,7 +1534,7 @@ const core = {
           }
         }
 
-        for (let value of ['header', 'body', 'footer', 'scripts']) {
+        for (let value of ['wrapperheader', 'header', 'body', 'footer', 'scripts']) {
           if (sections.parsedyr[value].includes(item.replace(/!/g, '')
           .trim().toLowerCase())) {
             newExtensions += item + '\n';
@@ -1166,7 +1555,7 @@ const core = {
             continue;
           }
 
-          for (let key of ['header', 'body', 'footer', 'scripts']) {
+          for (let key of ['wrapperheader', 'header', 'body', 'footer', 'scripts']) {
             //if (sections.parsedyr[key].includes(`.${value}`)) {
               if (!newCss[item]) newCss[item] = {};
               newCss[item][value] = parsedCss[item][value];
@@ -1181,7 +1570,7 @@ const core = {
       //const templateRegex = id =>
       //  new RegExp(`\\{\\{[^}]*?\\.?${id}\\b[^}]*?\\}\\}`);
 
-      //for (let item of ['header', 'body', 'footer', 'scripts']) {
+      //for (let item of ['wrapperheader', 'header', 'body', 'footer', 'scripts']) {
       //  for (let value of sections.parsedyr[item].split('\n')) {
       //    const match = value.match(/(?:\.|\.\{\{)\s*(__[A-Za-z0-9_-]+)/);
       //    if (!match) continue;
@@ -1239,6 +1628,9 @@ const core = {
     if (sections.wrapperjscustom)
       sections.parsedjs += '\n' + sections.wrapperjscustom;
 
+    if (sections.wrapperheader)
+      sections.parsedheader += '\n' + sections.wrapperheader;
+
     if (!config.lang) config.lang = 'en-US';
 
     if (config.name) {
@@ -1250,7 +1642,7 @@ const core = {
     if (sections.apptests.length > 0 && !sections.parsedbody.includes('class="__')) {
       sections.parsedbody += '\n<div class="__cclass"></div>';
 
-      sections.parsedscripts = `<script>
+      sections.parsedscripts = `<s` + `cript>
 try {
 function require(name) {
   //return window[name];
@@ -1262,7 +1654,7 @@ ${sections.parsedjs}
 ${sections.appheader.join('')}
 ${sections.apptests.join('')}
 } catch(error) { console.log(error); }
-</script>`;
+</s` + `cript>`;
     }
 
     sections.parsedhtml = `<!DOCTYPE html>
@@ -1275,16 +1667,16 @@ ${(config.name) ? `  <link rel="stylesheet" href="./${config.cssname}.css">` : `
 <body style="display: none">
 ${sections.parsedbody}
 ${sections.parsedfooter}
-</body>
 ${sections.parsedscripts}
-<script id="psj"${(config.name) ? ` src="./${config.jsname}.js">`
+<s` + `cript id="p` + `sj"${(config.name) ? ` src="./${config.jsname}.js">`
   : `>\n${sections.parsedjs}\n`
-}</script>
-<script>
+}</s` + `cript>
+</body>
+<s` + `cript>
 document.addEventListener('DOMContentLoaded', () => {
   document.body.style.display = 'block';
 });
-</script>
+</s` + `cript>
 </html>`;
 
     if (config.name) sections.ui = [
@@ -1305,4 +1697,13 @@ if (typeof module !== 'undefined' && module.exports)
 if (typeof window !== 'undefined' && !window.yr) {
   const parse = core.parse.bind(core);
   window.yr = parse;
+
+  const createLog = (text) => {
+    const parsed = parse(text);
+    console.log(parsed);
+    document.body.innerHTML += `<div>${text}</div>`;
+    document.body.innerHTML += `<div>${parsed.parsedyr.body}</div>`;
+  };
+
+  createLog('><\n_ .teste');
 }