structscript 1.4.0 → 1.5.0

package/lib/interpreter.js

@@ -51,6 +51,8 @@ class Interpreter {
     this.structs = {};
     this.callDepth = 0;
     this.sourceLines = [];
+    this._sourceFile   = null;   // set by CLI to the running file's path
+    this._importedFiles = new Set(); // prevent circular imports
     this._registerBuiltins();
   }
 
@@ -62,25 +64,6 @@ class Interpreter {
     G.define('print', a => { this.outputFn(a.map(x => this._str(x)).join(' ')); return null; });
     G.define('warn',  a => { this.warnFn(this._str(a[0])); return null; });
 
-    // input(prompt?) — synchronous stdin read, works like Python's input()
-    G.define('input', a => {
-      const prompt = a[0] !== undefined ? this._str(a[0]) : '';
-      if (prompt) process.stdout.write(prompt);
-      // Read synchronously from stdin one byte at a time until newline
-      const buf = Buffer.alloc(1);
-      let result = '';
-      while (true) {
-        let bytesRead = 0;
-        try { bytesRead = require('fs').readSync(process.stdin.fd, buf, 0, 1, null); }
-        catch (e) { break; }
-        if (bytesRead === 0) break;
-        const ch = buf.toString('utf8');
-        if (ch === '\n') break;
-        if (ch !== '\r') result += ch;
-      }
-      return result;
-    });
-
     // Math
     G.define('abs',     a => Math.abs(a[0]));
     G.define('sqrt',    a => Math.sqrt(a[0]));
@@ -160,9 +143,99 @@ class Interpreter {
     G.define('assert',  a => { if (!a[0]) throw new SSError('Assertion failed' + (a[1] ? ': ' + a[1] : '')); return null; });
     G.define('error',   a => { throw new SSError(String(a[0] ?? 'Runtime error')); });
     G.define('exit',    a => { process.exit(a[0] ?? 0); });
+
+    // ── HTTP / API ─────────────────────────────────────────────────
+    // Synchronous HTTP using a child process so we don't need async
+    const _httpFetch = (url, method, body, headers) => {
+      const { execFileSync } = require('child_process');
+      const script = `
+        const h = require('https'), u = require('url'), http = require('http');
+        const parsed = new u.URL(${JSON.stringify('__URL__')}.replace('__URL__', process.argv[1]));
+        const lib = parsed.protocol === 'https:' ? h : http;
+        const opts = {
+          hostname: parsed.hostname, port: parsed.port || (parsed.protocol === 'https:' ? 443 : 80),
+          path: parsed.pathname + parsed.search,
+          method: process.argv[2] || 'GET',
+          headers: JSON.parse(process.argv[3] || '{}'),
+        };
+        const bodyData = process.argv[4] || '';
+        if (bodyData) opts.headers['Content-Length'] = Buffer.byteLength(bodyData);
+        const req = lib.request(opts, res => {
+          let d = ''; res.on('data', c => d += c);
+          res.on('end', () => process.stdout.write(JSON.stringify({ status: res.statusCode, headers: res.headers, body: d })));
+        });
+        req.on('error', e => process.stdout.write(JSON.stringify({ error: e.message })));
+        if (bodyData) req.write(bodyData);
+        req.end();
+      `;
+      try {
+        const mergedHeaders = Object.assign({ 'User-Agent': 'StructScript/1.4' }, headers || {});
+        if (body && !mergedHeaders['Content-Type']) mergedHeaders['Content-Type'] = 'application/json';
+        const raw = execFileSync(process.execPath, ['-e', script, '--', url, method || 'GET',
+          JSON.stringify(mergedHeaders), body ? (typeof body === 'string' ? body : JSON.stringify(body)) : ''],
+          { timeout: 15000, maxBuffer: 10 * 1024 * 1024 });
+        return JSON.parse(raw.toString());
+      } catch (e) {
+        throw new SSError('fetch error: ' + (e.message || String(e)));
+      }
+    };
+
+    // fetch(url) → returns response object { status, body, json() }
+    G.define('fetch', a => {
+      const url     = String(a[0] ?? '');
+      const options = (a[1] && typeof a[1] === 'object') ? a[1] : {};
+      const method  = options.method || 'GET';
+      const body    = options.body   || null;
+      const headers = options.headers || {};
+      const res = _httpFetch(url, method, body, headers);
+      if (res.error) throw new SSError('fetch failed: ' + res.error);
+      // Try to auto-parse JSON
+      let parsed = null;
+      try { parsed = JSON.parse(res.body); } catch (_) {}
+      return {
+        __struct: 'Response',
+        status:  res.status,
+        ok:      res.status >= 200 && res.status < 300,
+        body:    res.body,
+        data:    parsed,           // auto-parsed JSON (or nothing if not JSON)
+        headers: res.headers,
+      };
+    });
+
+    // fetchJson(url, options?) → directly returns parsed JSON data
+    G.define('fetchJson', a => {
+      const url     = String(a[0] ?? '');
+      const options = (a[1] && typeof a[1] === 'object') ? a[1] : {};
+      const res = _httpFetch(url, options.method || 'GET', options.body || null,
+        Object.assign({ 'Accept': 'application/json' }, options.headers || {}));
+      if (res.error) throw new SSError('fetchJson failed: ' + res.error);
+      try { return JSON.parse(res.body); }
+      catch (_) { throw new SSError('fetchJson: response is not valid JSON\n' + res.body.slice(0, 200)); }
+    });
+
+    // fetchPost(url, data, headers?) → POST with JSON body, returns parsed response
+    G.define('fetchPost', a => {
+      const url     = String(a[0] ?? '');
+      const data    = a[1] !== undefined ? a[1] : {};
+      const headers = (a[2] && typeof a[2] === 'object') ? a[2] : {};
+      const body    = typeof data === 'string' ? data : JSON.stringify(data);
+      const res = _httpFetch(url, 'POST', body, Object.assign({ 'Accept': 'application/json' }, headers));
+      if (res.error) throw new SSError('fetchPost failed: ' + res.error);
+      let parsed = null;
+      try { parsed = JSON.parse(res.body); } catch (_) {}
+      return {
+        __struct: 'Response',
+        status:  res.status,
+        ok:      res.status >= 200 && res.status < 300,
+        body:    res.body,
+        data:    parsed,
+        headers: res.headers,
+      };
+    });
   }
 
-  run(source) {
+  run(source, sourceFile) {
+    if (sourceFile) this._sourceFile = sourceFile;
     this.sourceLines = source.split('\n');
     this._execBlock(this.sourceLines, 0, this.sourceLines.length, this.globals);
   }
@@ -206,6 +279,38 @@ class Interpreter {
   }
 
   _exec(line, allLines, lineIdx, indent, env) {
+    // import "file.ss"
+    if (line.startsWith('import ')) {
+      const m = line.match(/^import\s+"([^"]+)"|^import\s+'([^']+)'/);
+      if (!m) throw new SSError('Invalid import — use: import "filename.ss"');
+      const importPath = m[1] || m[2];
+      const fs   = require('fs');
+      const path = require('path');
+
+      // Resolve relative to the currently running file, or cwd
+      const base    = this._sourceFile ? path.dirname(this._sourceFile) : process.cwd();
+      const absPath = path.resolve(base, importPath);
+
+      if (this._importedFiles.has(absPath)) return null; // already imported
+      this._importedFiles.add(absPath);
+
+      if (!fs.existsSync(absPath)) throw new SSError(`import: file not found: "${importPath}" (resolved to ${absPath})`);
+      const source = fs.readFileSync(absPath, 'utf8');
+
+      // Run the imported file in the same global environment
+      const savedSourceFile   = this._sourceFile;
+      const savedSourceLines  = this.sourceLines;
+      this._sourceFile  = absPath;
+      this.sourceLines  = source.split('\n');
+      try {
+        this._execBlock(this.sourceLines, 0, this.sourceLines.length, env);
+      } finally {
+        this._sourceFile  = savedSourceFile;
+        this.sourceLines  = savedSourceLines;
+      }
+      return null;
+    }
+
     // say shorthand
     if (line.startsWith('say ')) { const v = this._eval(line.slice(4).trim(), env); this.outputFn(this._str(v)); return null; }
 
@@ -736,4 +841,332 @@ class Interpreter {
   }
 }
 
-module.exports = { Interpreter, SSError, Environment };
+// ── Web Engine ──────────────────────────────────────────────────────────────
+
+function isWebCode(code) {
+  return /^\s*(page\b|add\s+\w|css\s*:?$|script\s*:?$)/m.test(code);
+}
+
+function buildWebDoc(rawCode) {
+  // Normalise line endings
+  const code = rawCode.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+
+  let pageTitle  = 'StructScript Page';
+  let pageLang   = 'en';
+  let pageStyles = {};
+  let headTags   = [];
+  let cssBlocks  = [];
+  let jsBlocks   = [];
+  let bodyAttrs  = {};
+  const elements = [];
+  const elStack  = [];
+  let i = 0;
+  let _uid = 0;
+  const lines = code.split('\n');
+
+  function indent(l)    { let n=0; while(n<l.length&&l[n]===' ')n++; return n; }
+  function str(s)       { s=s.trim(); return (s[0]==='"'&&s[s.length-1]==='"')||(s[0]==="'"&&s[s.length-1]==="'") ? s.slice(1,-1) : s; }
+  function kebab(s)     { return s.replace(/([A-Z])/g,'-$1').toLowerCase(); }
+  function camel(s)     { return s.replace(/-([a-z])/g,(_,c)=>c.toUpperCase()); }
+  function uid()        { return '_ss'+(++_uid); }
+
+  // ── parse one line, advancing i if it consumes more ──────────
+  while (i < lines.length) {
+    const raw = lines[i], t = raw.trim(), ind = indent(raw);
+    i++;
+    if (!t || t.startsWith('//')) continue;
+
+    // page "Title" lang? :
+    if (/^page\b/.test(t)) {
+      const m = t.match(/^page\s+"([^"]*)"|^page\s+'([^']*)'/);
+      if (m) pageTitle = m[1]||m[2];
+      const lm = t.match(/\blang\s+"([^"]+)"/);
+      if (lm) pageLang = lm[1];
+      // consume indented page-level directives
+      while (i < lines.length) {
+        const nr = lines[i].trim(), ni = indent(lines[i]);
+        if (!nr || nr.startsWith('//')) { i++; continue; }
+        if (ni <= ind) break;
+        i++;
+        let m2;
+        if ((m2=nr.match(/^style\s+([\w-]+)\s+(.+)$/)))    { pageStyles[camel(m2[1])]=str(m2[2]); continue; }
+        if ((m2=nr.match(/^charset\s+(.+)$/)))              { headTags.push(`<meta charset="${str(m2[1])}">`); continue; }
+        if ((m2=nr.match(/^viewport\s+(.+)$/)))             { headTags.push(`<meta name="viewport" content="${str(m2[1])}">`); continue; }
+        if ((m2=nr.match(/^meta\s+([\w-]+)\s+(.+)$/)))      { headTags.push(`<meta name="${m2[1]}" content="${str(m2[2])}">`); continue; }
+        if ((m2=nr.match(/^metahttp\s+([\w-]+)\s+(.+)$/)))  { headTags.push(`<meta http-equiv="${m2[1]}" content="${str(m2[2])}">`); continue; }
+        if ((m2=nr.match(/^link\s+(.+)$/)))                 { headTags.push(`<link ${str(m2[1])}>`); continue; }
+        if ((m2=nr.match(/^favicon\s+(.+)$/)))              { headTags.push(`<link rel="icon" href="${str(m2[1])}">`); continue; }
+        if ((m2=nr.match(/^font\s+(.+)$/)))                 { headTags.push(`<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=${str(m2[1]).replace(/ /g,'+')}:wght@300;400;600;700;800&display=swap">`); continue; }
+        if ((m2=nr.match(/^script\s+src\s+(.+)$/)))         { headTags.push(`<script src="${str(m2[1])}"><\/script>`); continue; }
+        if ((m2=nr.match(/^bodyattr\s+([\w-]+)\s+(.+)$/)))  { bodyAttrs[m2[1]]=str(m2[2]); continue; }
+        if ((m2=nr.match(/^(og|twitter):([\w:]+)\s+(.+)$/))){ headTags.push(`<meta property="${m2[1]}:${m2[2]}" content="${str(m2[3])}">`); continue; }
+        if ((m2=nr.match(/^canonical\s+(.+)$/)))            { headTags.push(`<link rel="canonical" href="${str(m2[1])}">`); continue; }
+        if ((m2=nr.match(/^base\s+(.+)$/)))                 { headTags.push(`<base href="${str(m2[1])}">`); continue; }
+      }
+      continue;
+    }
+
+    // css: raw CSS block
+    if (/^css\s*:?$/.test(t)) {
+      const buf=[];
+      while(i<lines.length){ const nr=lines[i],ni=indent(nr); if(!nr.trim()||ni>ind){buf.push(nr.slice(Math.min(ni,ind+2)));i++;}else break; }
+      cssBlocks.push(buf.join('\n'));
+      continue;
+    }
+
+    // script: raw JS block
+    if (/^script\s*:?$/.test(t)) {
+      const buf=[];
+      while(i<lines.length){ const nr=lines[i],ni=indent(nr); if(!nr.trim()||ni>ind){buf.push(nr.slice(Math.min(ni,ind+2)));i++;}else break; }
+      jsBlocks.push(buf.join('\n'));
+      continue;
+    }
+
+    // add TAG "id/classes": — the workhorse
+    // Supports: add div "myId"  add div ".btn.active"  add div "#main .hero big"
+    const addM = t.match(/^add\s+([\w-]+)(?:\s+"([^"]*)")?(?:\s+'([^']*)')?\s*:?$/);
+    if (addM) {
+      while (elStack.length>1 && elStack[elStack.length-1].indent>=ind) elStack.pop();
+      const parent = elStack.length ? elStack[elStack.length-1].el : null;
+      const rawSel = (addM[2]||addM[3]||'').trim();
+      const el = {
+        tag:addM[1].toLowerCase(), id:'', classes:[],
+        text:'', html:'',
+        styles:{}, pseudo:{}, mediaRules:[],
+        beforeContent:null, afterContent:null,
+        attrs:{}, events:[], children:[],
+        _indent:ind, _anim:null,
+      };
+      // parse selector tokens: #id  .class  plain-word→id
+      rawSel.split(/\s+/).filter(Boolean).forEach(tok => {
+        if (tok.startsWith('#')) el.id = tok.slice(1);
+        else if (tok.startsWith('.')) el.classes.push(tok.slice(1));
+        else if (!el.id) el.id = tok;
+        else el.classes.push(tok);
+      });
+      if (parent && !parent._isPage) parent.children.push(el);
+      else elements.push(el);
+      elStack.push({el, indent:ind});
+      continue;
+    }
+
+    // ── properties inside an element ─────────────────────────
+    const pe = elStack[elStack.length-1];
+    if (!pe || ind <= pe.indent) continue;
+    const el = pe.el;
+
+    let m2;
+
+    // content
+    if ((m2=t.match(/^text\s+(.+)$/)))        { el.text=str(m2[1]); continue; }
+    if ((m2=t.match(/^html\s+(.+)$/)))        { el.html=str(m2[1]); continue; }
+
+    // common attrs — shorthand keywords
+    const ATTR_KW = {
+      src:1,href:1,alt:1,title:1,type:1,name:1,value:1,
+      for:1,action:1,method:1,target:1,rel:1,rows:1,cols:1,
+      min:1,max:1,step:1,role:1,tabindex:1,colspan:1,rowspan:1,
+      width:1,height:1,loading:1,decoding:1,crossorigin:1,
+      enctype:1,accept:1,pattern:1,maxlength:1,minlength:1,
+      download:1,sizes:1,srcset:1,poster:1,preload:1,
+      sandbox:1,allow:1,frameborder:1,scrolling:1,
+    };
+    if ((m2=t.match(/^([\w-]+)\s+(.+)$/)) && ATTR_KW[m2[1]]) { el.attrs[m2[1]]=str(m2[2]); continue; }
+
+    // boolean attrs
+    if (/^(checked|disabled|readonly|required|autoplay|loop|controls|muted|multiple|autofocus|hidden|open|selected|novalidate|async|defer|reversed|ismap|allowfullscreen|default|formnovalidate|spellcheck)$/.test(t))
+      { el.attrs[t]=''; continue; }
+
+    // aria-*, data-*
+    if ((m2=t.match(/^aria-([\w-]+)\s+(.+)$/)))  { el.attrs[`aria-${m2[1]}`]=str(m2[2]); continue; }
+    if ((m2=t.match(/^data-([\w-]+)\s+(.+)$/)))  { el.attrs[`data-${m2[1]}`]=str(m2[2]); continue; }
+
+    // generic attr fallback
+    if ((m2=t.match(/^attr\s+([\w-]+)\s+(.+)$/))) { el.attrs[m2[1]]=str(m2[2]); continue; }
+
+    // class
+    if ((m2=t.match(/^class\s+(.+)$/))) { str(m2[1]).split(/\s+/).forEach(c=>c&&el.classes.push(c)); continue; }
+
+    // style — any CSS property, camelCase or kebab
+    if ((m2=t.match(/^style\s+([\w-]+)\s+(.+)$/))) { el.styles[camel(m2[1])]=str(m2[2]); continue; }
+
+    // pseudo-class styles: hover / focus / active / visited / checked / disabled / focusVisible / focusWithin / placeholder / selection
+    if ((m2=t.match(/^(hover|focus|active|visited|checked|disabled|focus-visible|focus-within|placeholder|first-child|last-child|nth-child|not|invalid|valid)\s+([\w-]+)\s+(.+)$/)))
+      { if(!el.pseudo[m2[1]])el.pseudo[m2[1]]={}; el.pseudo[m2[1]][camel(m2[2])]=str(m2[3]); continue; }
+
+    // pseudo-elements: before / after / first-line / first-letter / marker / selection / backdrop
+    if ((m2=t.match(/^before\s+(.+)$/)))      { el.beforeContent=str(m2[1]); continue; }
+    if ((m2=t.match(/^after\s+(.+)$/)))       { el.afterContent=str(m2[1]); continue; }
+
+    // shorthand style helpers
+    if ((m2=t.match(/^transition\s+(.+)$/)))  { el.styles.transition=str(m2[1]); continue; }
+    if ((m2=t.match(/^transform\s+(.+)$/)))   { el.styles.transform=str(m2[1]); continue; }
+    if ((m2=t.match(/^filter\s+(.+)$/)))      { el.styles.filter=str(m2[1]); continue; }
+    if ((m2=t.match(/^grid\s+(.+)$/)))        { el.styles.gridTemplateColumns=str(m2[1]); continue; }
+    if ((m2=t.match(/^flex\s+(.+)$/)))        { el.styles.flex=str(m2[1]); continue; }
+    if ((m2=t.match(/^gap\s+(.+)$/)))         { el.styles.gap=str(m2[1]); continue; }
+    if ((m2=t.match(/^bg\s+(.+)$/)))          { el.styles.background=str(m2[1]); continue; }
+    if ((m2=t.match(/^shadow\s+(.+)$/)))      { el.styles.boxShadow=str(m2[1]); continue; }
+    if ((m2=t.match(/^clip\s+(.+)$/)))        { el.styles.clipPath=str(m2[1]); continue; }
+    if ((m2=t.match(/^mask\s+(.+)$/)))        { el.styles.mask=str(m2[1]); continue; }
+    if ((m2=t.match(/^outline\s+(.+)$/)))     { el.styles.outline=str(m2[1]); continue; }
+    if ((m2=t.match(/^overflow\s+(.+)$/)))    { el.styles.overflow=str(m2[1]); continue; }
+    if ((m2=t.match(/^cursor\s+(.+)$/)))      { el.styles.cursor=str(m2[1]); continue; }
+    if ((m2=t.match(/^opacity\s+(.+)$/)))     { el.styles.opacity=str(m2[1]); continue; }
+    if ((m2=t.match(/^zindex\s+(.+)$/)))      { el.styles.zIndex=str(m2[1]); continue; }
+    if ((m2=t.match(/^var\s+(--[\w-]+)\s+(.+)$/))) { el.styles[m2[1]]=str(m2[2]); continue; }
+
+    // @media per-element: media "max-width:600px" prop value
+    if ((m2=t.match(/^media\s+"([^"]+)"\s+([\w-]+)\s+(.+)$/)))
+      { el.mediaRules.push({q:m2[1], p:camel(m2[2]), v:str(m2[3])}); continue; }
+    // media "value" (HTML attribute, e.g. on <link> or <source>)
+    if ((m2=t.match(/^media\s+(.+)$/)) && !m2[1].trim().match(/^"[^"]*"\s+[\w-]+/))
+      { el.attrs.media=str(m2[1]); continue; }
+    // placeholder "text" as HTML attribute (not pseudo-class)
+    if ((m2=t.match(/^placeholder\s+(.+)$/)) && !m2[1].match(/^[\w-]/))
+      { el.attrs.placeholder=str(m2[1]); continue; }
+
+    // animate NAME DURATION? EASING?
+    if ((m2=t.match(/^animate\s+(\w+)(?:\s+([\d.]+))?(?:\s+([\w-]+))?$/)))
+      { el._anim={name:m2[1], dur:parseFloat(m2[2]||0.4), ease:m2[3]||'ease'}; continue; }
+
+    // on EVENT: — raw JS handler, indented body
+    if ((m2=t.match(/^on\s+([\w]+)\s*:?$/))) {
+      const buf=[];
+      while(i<lines.length){ const nr=lines[i],ni=indent(nr); if(!nr.trim()||ni<=ind)break; buf.push(nr.slice(ni)); i++; }
+      el.events.push({ev:m2[1], code:buf.join('\n')});
+      continue;
+    }
+  }
+
+  // ── Render ────────────────────────────────────────────────
+  const pseudoCSS = [];
+  const mediaCSS  = {};
+
+  const VOID = new Set(['area','base','br','col','embed','hr','img','input','link','meta','param','source','track','wbr']);
+
+  function ensureId(el) { if (!el.id) el.id=uid(); return el.id; }
+
+  function renderEl(el) {
+    const tag = el.tag;
+
+    // Build inline style string
+    let styleStr = Object.entries(el.styles).map(([k,v])=>`${kebab(k)}:${v}`).join(';');
+
+    // Animations
+    if (el._anim) {
+      const ANIMS = {
+        fadeIn:'fadeIn',fadeOut:'fadeOut',
+        slideIn:'slideIn',slideInRight:'slideInRight',
+        slideUp:'slideUp',slideDown:'slideDown',
+        pop:'pop',bounce:'bounce',spin:'spin',
+        pulse:'pulse',shake:'shake',flip:'flip',
+        zoom:'zoom',wiggle:'wiggle',typewriter:'typewriter',
+      };
+      const aname = ANIMS[el._anim.name]||el._anim.name;
+      const fill  = /^(bounce|spin|pulse)$/.test(el._anim.name)?'infinite':'both';
+      const ease  = el._anim.name==='spin'?'linear':el._anim.ease;
+      styleStr += (styleStr?';':'')+`animation:${aname} ${el._anim.dur}s ${ease} ${fill}`;
+    }
+
+    // Pseudo-class rules
+    Object.entries(el.pseudo).forEach(([pseudo, styles]) => {
+      const r = Object.entries(styles).map(([k,v])=>`${kebab(k)}:${v}`).join(';');
+      if (r) { ensureId(el); pseudoCSS.push(`#${el.id}:${pseudo}{${r}}`); }
+    });
+
+    // before/after pseudo-elements
+    if (el.beforeContent!==null) { ensureId(el); pseudoCSS.push(`#${el.id}::before{content:"${el.beforeContent.replace(/"/g,'\\"')}"}`); }
+    if (el.afterContent!==null)  { ensureId(el); pseudoCSS.push(`#${el.id}::after{content:"${el.afterContent.replace(/"/g,'\\"')}"}`);  }
+
+    // @media rules
+    el.mediaRules.forEach(({q,p,v}) => {
+      const s = el.id ? `#${el.id}` : (el.classes[0] ? `.${el.classes[0]}` : tag);
+      if (!mediaCSS[q]) mediaCSS[q]=[];
+      mediaCSS[q].push(`${s}{${kebab(p)}:${v}}`);
+    });
+
+    // Build attribute string
+    const idA  = el.id      ? ` id="${el.id}"` : '';
+    const clsA = el.classes.length ? ` class="${el.classes.join(' ')}"` : '';
+    const styA = styleStr   ? ` style="${styleStr}"` : '';
+    const xtra = Object.entries(el.attrs).map(([k,v])=>v===''?` ${k}`:` ${k}="${v}"`).join('');
+    const evts = el.events.map(({ev,code})=>{
+      return ` data-ss-${ev}="${code.replace(/"/g,'&quot;').replace(/\n/g,' ')}"`;
+    }).join('');
+
+    if (VOID.has(tag)) return `<${tag}${idA}${clsA}${styA}${xtra}>\n`;
+    const inner = el.html || el.text || el.children.map(renderEl).join('');
+    return `<${tag}${idA}${clsA}${styA}${xtra}${evts}>${inner}</${tag}>\n`;
+  }
+
+  const bodyStyleStr = Object.entries(pageStyles).map(([k,v])=>`${kebab(k)}:${v}`).join(';');
+  const bodyXtra     = Object.entries(bodyAttrs).map(([k,v])=>` ${k}="${v}"`).join('');
+  const bodyHtml     = elements.map(renderEl).join('');
+
+  const mediaCSSStr  = Object.entries(mediaCSS)
+    .map(([q,rules])=>`@media (${q}){${rules.join('')}}`).join('\n');
+
+  const KEYFRAMES = `
+@keyframes fadeIn       {0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:none}}
+@keyframes fadeOut      {0%{opacity:1}100%{opacity:0}}
+@keyframes slideIn      {0%{transform:translateX(-40px);opacity:0}100%{transform:none;opacity:1}}
+@keyframes slideInRight {0%{transform:translateX(40px);opacity:0}100%{transform:none;opacity:1}}
+@keyframes slideUp      {0%{transform:translateY(40px);opacity:0}100%{transform:none;opacity:1}}
+@keyframes slideDown    {0%{transform:translateY(-40px);opacity:0}100%{transform:none;opacity:1}}
+@keyframes bounce       {0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
+@keyframes pulse        {0%,100%{opacity:1}50%{opacity:0.4}}
+@keyframes spin         {to{transform:rotate(360deg)}}
+@keyframes shake        {0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
+@keyframes pop          {0%{transform:scale(0.5);opacity:0}70%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
+@keyframes flip         {0%{transform:rotateY(-90deg);opacity:0}100%{transform:rotateY(0);opacity:1}}
+@keyframes zoom         {0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}
+@keyframes wiggle       {0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
+@keyframes typewriter   {from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}`;
+
+  // All DOM events wired up
+  const ALL_EVENTS = [
+    'click','dblclick','contextmenu',
+    'mousedown','mouseup','mouseover','mouseout','mouseenter','mouseleave','mousemove',
+    'keydown','keyup','keypress',
+    'input','change','focus','blur','submit','reset','select',
+    'scroll','resize','wheel',
+    'dragstart','drag','dragend','dragover','dragenter','dragleave','drop',
+    'touchstart','touchmove','touchend','touchcancel',
+    'pointerdown','pointermove','pointerup','pointercancel','pointerenter','pointerleave',
+    'animationstart','animationend','animationiteration',
+    'transitionstart','transitionend',
+    'load','error','abort','canplay','play','pause','ended','timeupdate','volumechange',
+    'copy','cut','paste','beforeinput',
+    'fullscreenchange','visibilitychange',
+  ];
+  const evScript = ALL_EVENTS.map(ev =>
+    `document.querySelectorAll('[data-ss-${ev}]').forEach(function(el){el.addEventListener('${ev}',function(event){try{(new Function('event',this.getAttribute('data-ss-${ev}'))).call(this,event)}catch(e){console.error(e)}}.bind(el));});`
+  ).join('\n');
+
+  return `<!DOCTYPE html>
+<html lang="${pageLang}">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>${pageTitle}</title>
+${headTags.join('\n')}
+<style>
+*{box-sizing:border-box;margin:0;padding:0}
+${KEYFRAMES}
+${pseudoCSS.join('\n')}
+${mediaCSSStr}
+${cssBlocks.join('\n')}
+</style>
+</head>
+<body${bodyStyleStr?` style="${bodyStyleStr}"`:''}>
+${bodyHtml}<script>(function(){
+${evScript}
+${jsBlocks.join('\n')}
+})()</script>
+</body>
+</html>`;
+}
+
+
+module.exports = { Interpreter, SSError, Environment, isWebCode, buildWebDoc };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "structscript",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "The StructScript programming language — clean, readable scripting for everyone. Includes a built-in visual editor.",
   "keywords": ["structscript", "language", "interpreter", "scripting", "programming-language"],
   "author": "StructScript",