structscript 1.4.1 → 1.5.0

package/lib/interpreter.js

@@ -841,249 +841,332 @@ class Interpreter {
   }
 }
 
-// ── Web Engine (also used by main.js / Electron) ──────────────────────────────
-function isWebCode(code) {
-  return /^\s*(page|add)\s+/m.test(code);
-}
-
-// Build a full HTML document from StructScript web commands
-function buildWebDoc(code) {
-  let pageTitle  = 'StructScript Page';
-  let pageStyles = {};
-  let cssBlocks  = [];   // raw CSS rule strings from `css` blocks
-  const elements = [];
-  const elStack  = [];
-  let i = 0;
-
-  const lines = code.split('\n');
-
-  function getIndent(l) { let n=0; while(n<l.length&&l[n]===' ')n++; return n; }
-
-  function parseStr(s) {
-    s = s.trim();
-    if((s.startsWith('"')&&s.endsWith('"'))||(s.startsWith("'")&&s.endsWith("'"))) return s.slice(1,-1);
-    return s;
-  }
-
-  // camelCase → kebab-case
-  function toKebab(s) { return s.replace(/([A-Z])/g,'-$1').toLowerCase(); }
-  // kebab-case or camelCase → camelCase (for object keys)
-  function toCamel(s) { return s.replace(/-([a-z])/g,(_,c)=>c.toUpperCase()); }
-
-  while (i < lines.length) {
-    const raw = lines[i], t = raw.trim(), ind = getIndent(raw);
-    i++;
-    if (!t || t.startsWith('//')) continue;
-
-    // ── page "title": ──────────────────────────────────────
-    if (/^page\b/.test(t)) {
-      const m = t.match(/^page\s+"([^"]*)"|^page\s+\'([^']*)\'/);
-      if (m) pageTitle = m[1]||m[2];
-      const el = { _type:'page', styles:{}, attrs:{} };
-      elStack.length = 0;
-      elStack.push({ el, indent: ind });
-      continue;
-    }
-
-    // ── css: (raw CSS block) ────────────────────────────────
-    // css:
-    //   .btn { background: red }
-    //   @media (max-width: 600px) { ... }
-    if (/^css\s*:?$/.test(t)) {
-      const cssLines = [];
-      while (i < lines.length) {
-        const nr = lines[i], ni = getIndent(nr);
-        if (nr.trim() === '' || ni > ind) { cssLines.push(nr.slice(ind+2||0)); i++; }
-        else break;
-      }
-      cssBlocks.push(cssLines.join('\n'));
-      continue;
-    }
-
-    // ── add TAG "id": ───────────────────────────────────────
-    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[elStack.length-1]?.el || null;
-      const rawId  = addM[2]||addM[3]||'';
-      const el = {
-        tag: addM[1].toLowerCase(),
-        id: rawId.startsWith('#') ? rawId.slice(1) : (rawId.includes(' ')||rawId.startsWith('.')?'':rawId),
-        classes: rawId.startsWith('.') ? [rawId.slice(1)] : (rawId.includes(' ') ? rawId.split(' ') : []),
-        text:'', html:'', styles:{}, hoverStyles:{}, focusStyles:{}, attrs:{}, events:[], children:[],
-        _indent: ind, _anim: null, _cssRules: [],
-      };
-      if (parent && parent._type !== 'page') parent.children.push(el);
-      else elements.push(el);
-      elStack.push({ el, indent: ind });
-      continue;
-    }
-
-    // ── Properties inside an element ───────────────────────
-    const parentEntry = elStack[elStack.length-1];
-    if (parentEntry && ind > parentEntry.indent) {
-      const el = parentEntry.el;
-
-      // text / html
-      const textM = t.match(/^text\s+(.+)$/);
-      if (textM) { el.text = parseStr(textM[1]); continue; }
-      const htmlM = t.match(/^html\s+(.+)$/);
-      if (htmlM) { el.html = parseStr(htmlM[1]); continue; }
-
-      // style prop "value"  — any valid CSS property (camel or kebab)
-      const styleM = t.match(/^style\s+([\w-]+)\s*:?\s+(.+)$/);
-      if (styleM) {
-        const key = toCamel(styleM[1]);
-        const val = parseStr(styleM[2]);
-        el.styles[key] = val;
-        if (el._type === 'page') pageStyles[key] = val;
-        continue;
-      }
-
-      // hover prop "value"  — generates :hover CSS rule
-      const hoverM = t.match(/^hover\s+([\w-]+)\s*:?\s+(.+)$/);
-      if (hoverM) {
-        el.hoverStyles[toCamel(hoverM[1])] = parseStr(hoverM[2]);
-        continue;
-      }
-
-      // focus prop "value"  — generates :focus CSS rule
-      const focusM = t.match(/^focus\s+([\w-]+)\s*:?\s+(.+)$/);
-      if (focusM) {
-        el.focusStyles[toCamel(focusM[1])] = parseStr(focusM[2]);
-        continue;
-      }
-
-      // transition "prop duration easing"
-      const transM = t.match(/^transition\s+(.+)$/);
-      if (transM) { el.styles.transition = parseStr(transM[1]); continue; }
-
-      // attr / class
-      const attrM = t.match(/^attr\s+(\w+)\s+(.+)$/);
-      if (attrM) { el.attrs[attrM[1]] = parseStr(attrM[2]); continue; }
-      const classM = t.match(/^class\s+(.+)$/);
-      if (classM) { el.classes.push(parseStr(classM[1])); continue; }
-
-      // animate TYPE DURATION EASING
-      const animM = t.match(/^animate\s+(\w+)(?:\s+([\d.]+))?(?:\s+(\w+))?$/);
-      if (animM) {
-        el._anim = { type: animM[1], dur: parseFloat(animM[2]||0.4), easing: animM[3]||'ease' };
-        continue;
-      }
-
-      // on EVENT:  (collect indented handler lines)
-      const onM = t.match(/^on\s+(\w+)\s*:?$/);
-      if (onM) {
-        const handlerLines = [];
-        while (i < lines.length) {
-          const nr = lines[i], ni = getIndent(nr);
-          if (!nr.trim() || ni <= ind) break;
-          handlerLines.push(nr.slice(ni)); i++;
-        }
-        el.events.push({ event: onM[1], code: handlerLines.join('\n') });
-        continue;
-      }
-    }
-  }
-
-  // ── Render ──────────────────────────────────────────────────
-  const pseudoRules = [];   // accumulated :hover, :focus rules
-
-  function renderEl(el) {
-    if (el._type === 'page') return '';
-    const tag      = el.tag;
-    const idAttr   = el.id ? ` id="${el.id}"` : '';
-    const clsAttr  = el.classes.length ? ` class="${el.classes.join(' ')}"` : '';
-
-    // Inline styles
-    let styleStr = Object.entries(el.styles).map(([k,v]) => `${toKebab(k)}:${v}`).join(';');
-
-    // Animation
-    if (el._anim) {
-      const animMap = {
-        fadeIn:  `fadeIn ${el._anim.dur}s ${el._anim.easing} forwards`,
-        fadeOut: `fadeOut ${el._anim.dur}s ${el._anim.easing} forwards`,
-        slideIn: `slideIn ${el._anim.dur}s ${el._anim.easing} forwards`,
-        slideUp: `slideUp ${el._anim.dur}s ${el._anim.easing} forwards`,
-        bounce:  `bounce ${el._anim.dur}s ${el._anim.easing} infinite`,
-        pulse:   `pulse ${el._anim.dur}s ${el._anim.easing} infinite`,
-        spin:    `spin ${el._anim.dur}s linear infinite`,
-        shake:   `shake ${el._anim.dur}s ${el._anim.easing}`,
-        pop:     `pop ${el._anim.dur}s ${el._anim.easing} forwards`,
-      };
-      styleStr += (styleStr?';':'') + `animation:${animMap[el._anim.type]||`${el._anim.type} ${el._anim.dur}s ${el._anim.easing}`}`;
-    }
-
-    // Generate :hover and :focus rules (needs a selector — use id if available, else generate one)
-    if (Object.keys(el.hoverStyles).length || Object.keys(el.focusStyles).length) {
-      // Ensure element has an id for targeting
-      if (!el.id) { el.id = '_ss_' + Math.random().toString(36).slice(2,8); }
-      if (Object.keys(el.hoverStyles).length) {
-        const hoverStr = Object.entries(el.hoverStyles).map(([k,v])=>`${toKebab(k)}:${v}`).join(';');
-        pseudoRules.push(`#${el.id}:hover{${hoverStr}}`);
-      }
-      if (Object.keys(el.focusStyles).length) {
-        const focusStr = Object.entries(el.focusStyles).map(([k,v])=>`${toKebab(k)}:${v}`).join(';');
-        pseudoRules.push(`#${el.id}:focus{${focusStr}}`);
-      }
-    }
-
-    const styleAttr  = styleStr ? ` style="${styleStr}"` : '';
-    const extraAttrs = Object.entries(el.attrs).map(([k,v])=>` ${k}="${v}"`).join('');
-    const evAttrs    = el.events.map(ev=>{
-      const escaped = ev.code.replace(/"/g,'&quot;').replace(/\n/g,' ');
-      return ` data-ss-on${ev.event}="${escaped}"`;
-    }).join('');
-
-    const selfClose = ['img','input','br','hr','meta','link'].includes(tag);
-    if (selfClose) return `<${tag}${idAttr}${clsAttr}${styleAttr}${extraAttrs}/>
-`;
-    const inner = el.html || el.text || el.children.map(renderEl).join('');
-    return `<${tag}${idAttr}${clsAttr}${styleAttr}${extraAttrs}${evAttrs}>${inner}</${tag}>
-`;
-  }
-
-  const bodyStyleStr = Object.entries(pageStyles).map(([k,v])=>`${toKebab(k)}:${v}`).join(';');
-  const bodyHtml     = elements.map(renderEl).join('');
-
-  const KEYFRAMES = `
-    @keyframes fadeIn   { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
-    @keyframes fadeOut  { from{opacity:1} to{opacity:0} }
-    @keyframes slideIn  { from{transform:translateX(-40px);opacity:0} to{transform:none;opacity:1} }
-    @keyframes slideUp  { from{transform:translateY(40px);opacity:0} to{transform:none;opacity:1} }
-    @keyframes bounce   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }
-    @keyframes pulse    { 0%,100%{opacity:1} 50%{opacity:0.4} }
-    @keyframes spin     { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
-    @keyframes shake    { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }
-    @keyframes pop      { 0%{transform:scale(0.5);opacity:0} 70%{transform:scale(1.1)} 100%{transform:scale(1);opacity:1} }
-  `;
-
-  const EVENT_TYPES = ['click','mouseover','mouseout','mouseenter','mouseleave','keydown','keyup','change','focus','blur','dblclick'];
-  const evScript = EVENT_TYPES.map(ev =>
-    `document.querySelectorAll('[data-ss-on${ev}]').forEach(function(el){el.addEventListener('${ev}',function(){try{(new Function(this.getAttribute('data-ss-on${ev}')))()}catch(e){console.error(e)}}.bind(el));});`
-  ).join('\n');
-
-  const allPseudoCSS  = pseudoRules.join('\n');
-  const allCustomCSS  = cssBlocks.join('\n');
-
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>${pageTitle}</title>
-<style>
-*{box-sizing:border-box;margin:0;padding:0}
-${KEYFRAMES}
-${allPseudoCSS}
-${allCustomCSS}
-</style>
-</head>
-<body${bodyStyleStr ? ` style="${bodyStyleStr}"` : ''}>
-${bodyHtml}
-<script>(function(){${evScript}})()</\/script>
-</body>
-</html>`;
+// ── 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.1",
+  "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",