structscript 1.4.0 → 1.4.1

package/bin/structscript.js

@@ -33,17 +33,10 @@ const HELP = `
 ${BANNER}
 ${t(C.bold, 'USAGE')}
   ${t(C.lime, 'structscript')} ${t(C.teal, '<file.ss>')}           Run a .ss file
-  ${t(C.lime, 'structscript')} ${t(C.teal, 'editor')}              Open the visual editor (IDE)
-  ${t(C.lime, 'structscript')} ${t(C.teal, 'editor <file.ss>')}    Open a file in the editor
   ${t(C.lime, 'structscript')} ${t(C.teal, 'repl')}                Start interactive REPL
   ${t(C.lime, 'structscript')} ${t(C.teal, 'run <file.ss>')}       Run a .ss file (explicit)
   ${t(C.lime, 'structscript')} ${t(C.teal, 'check <file.ss>')}     Check syntax without running
   ${t(C.lime, 'structscript')} ${t(C.teal, 'version')}             Show version info
-
-${t(C.bold, 'WEB OUTPUT')}
-  ${t(C.grey, '# .ss files with page/add commands auto-generate .html:')}
-  ${t(C.grey, '$ structscript page.ss              → writes page.html')}
-  ${t(C.grey, '$ structscript page.ss --output=out.html')}
   ${t(C.lime, 'structscript')} ${t(C.teal, 'help')}                Show this help
 
 ${t(C.bold, 'OPTIONS')}
@@ -81,60 +74,7 @@ if (cmd === 'version' || cmd === '--version' || cmd === '-v') {
   process.exit(0);
 }
 
-if (cmd === 'editor') {
-  const { spawnSync } = require('child_process');
-  const mainJs = path.join(__dirname, '../lib/main.js');
-  const fileArg = params[1] ? [path.resolve(params[1])] : [];
-
-  // Find electron — it lives in a local node_modules next to the structscript package
-  function findElectron() {
-    // 1. Already installed next to this package
-    const localPkg = path.join(__dirname, '../node_modules/.bin/electron');
-    if (fs.existsSync(localPkg)) return localPkg;
-    // On Windows the bin has .cmd extension
-    if (fs.existsSync(localPkg + '.cmd')) return localPkg + '.cmd';
-    // 2. Try requiring it (works if installed as a dep somewhere up the tree)
-    try { return require('electron'); } catch (_) {}
-    return null;
-  }
-
-  let electronPath = findElectron();
-
-  if (!electronPath) {
-    // Auto-install electron into the package's own node_modules
-    console.log(t(C.teal, '  Installing Electron for the first time (this takes ~30s)…'));
-    const pkgDir = path.join(__dirname, '..');
-    const install = spawnSync(
-      process.execPath,                          // node
-      [require.resolve('npm/bin/npm-cli'), 'install', '--prefix', pkgDir, 'electron', '--save-optional'],
-      { stdio: 'inherit', cwd: pkgDir }
-    );
-    if (install.status !== 0) {
-      // npm-cli path failed, try plain npm command
-      const install2 = spawnSync(
-        process.platform === 'win32' ? 'npm.cmd' : 'npm',
-        ['install', '--prefix', pkgDir, 'electron'],
-        { stdio: 'inherit', cwd: pkgDir, shell: true }
-      );
-      if (install2.status !== 0) {
-        console.error(t(C.red, 'Failed to install Electron. Please run:'));
-        console.error(t(C.grey, '  npm install electron'));
-        console.error(t(C.grey, '  (inside: ' + pkgDir + ')'));
-        process.exit(1);
-      }
-    }
-    electronPath = findElectron();
-    if (!electronPath) {
-      console.error(t(C.red, 'Could not locate Electron after install. Please run:'));
-      console.error(t(C.grey, '  npm install electron   (inside: ' + path.join(__dirname, '..') + ')'));
-      process.exit(1);
-    }
-    console.log(t(C.lime, '  Electron installed!'));
-  }
-
-  const result = spawnSync(electronPath, [mainJs, ...fileArg], { stdio: 'inherit' });
-  process.exit(result.status || 0);
-} else if (cmd === 'repl') {
+if (cmd === 'repl') {
   startREPL();
 } else if (cmd === 'run') {
   const file = params[1];
@@ -173,14 +113,9 @@ function runFile(filePath) {
     output: msg => console.log(msg),
     warn:   msg => console.warn(t(C.yellow, '⚠ ' + msg)),
   });
-  interp._sourceFile = resolved;
-
-  // --output flag: structscript page.ss --output page.html
-  const outFlag = args.find(a => a.startsWith('--output='));
-  if (outFlag) interp._htmlOutputFile = outFlag.split('=')[1];
 
   try {
-    interp.run(source);
+    interp.run(source, resolved);
     if (showTime) {
       const elapsed = Date.now() - t0;
       console.error(t(C.grey, `\n⏱  ${elapsed}ms`));

package/lib/editor.html

@@ -230,6 +230,7 @@ body {
   border: none; outline: none;
   color: transparent;
   caret-color: var(--accent);
+  z-index: 2;
   font-family: 'DM Mono', monospace;
   font-size: var(--font-size);
   line-height: var(--line-h);
@@ -1479,7 +1480,7 @@ class Interpreter {
     // Unary minus
     if(expr[0]==='-') return -this._eval(expr.slice(1),env);
     // Method call: obj.method(args)
-    const methodM=expr.match(/^(.+?)\.([a-zA-Z_]\w*)\((.*)\)$/s);
+    const methodM=expr.match(/^([a-zA-Z_]\w*(?:\[.+?\])?(?:\.[a-zA-Z_]\w*(?:\[.+?\])?)*)\.([a-zA-Z_]\w*)\((.*)\)$/s);
     if(methodM){
       const objExpr=methodM[1], mname=methodM[2], argsRaw=methodM[3].trim();
       const obj=this._eval(objExpr,env);
@@ -1583,8 +1584,9 @@ class Interpreter {
       if(c===')'||c===']')depth++;
       else if(c==='('||c==='[')depth--;
       else if(depth===0&&c==='-'){
-        const prev=expr[i-1];
-        if(/[\w\d\)"\'\]]/.test(prev)) return i;
+        let prev=i-1;
+        while(prev>=0&&expr[prev]===' ')prev--;
+        if(prev>=0&&/[\w\d\)"'\]]/.test(expr[prev])) return i;
       }
     }
     return -1;
@@ -2491,181 +2493,204 @@ function isWebCode(code) {
 
 // Build a full HTML document from StructScript web commands
 function buildWebDoc(code) {
-  // Page-level settings
-  let pageTitle = 'StructScript Page';
+  let pageTitle  = 'StructScript Page';
   let pageStyles = {};
-  let bodyClass = '';
-
-  // Element tree
-  const elements = [];   // { tag, id, classes, text, html, styles, attrs, events, children, parent }
-  let currentEl = null;
-  let currentIndent = 0;
-  const elStack = [];    // stack for nested elements
+  let cssBlocks  = [];   // raw CSS rule strings from `css` blocks
+  const elements = [];
+  const elStack  = [];
+  let i = 0;
 
   const lines = code.split('\n');
-  let i = 0;
 
-  function getIndent(line) {
-    let n = 0; while (n < line.length && line[n] === ' ') n++; return n;
-  }
+  function getIndent(l) { let n=0; while(n<l.length&&l[n]===' ')n++; return n; }
 
-  function parseStringArg(s) {
+  function parseStr(s) {
     s = s.trim();
-    if ((s.startsWith('"') && s.endsWith('"')) ||
-        (s.startsWith("'") && s.endsWith("'"))) return s.slice(1,-1);
+    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];
-    const t   = raw.trim();
-    const ind = getIndent(raw);
+    const raw = lines[i], t = raw.trim(), ind = getIndent(raw);
     i++;
-
     if (!t || t.startsWith('//')) continue;
 
-    // ── page "title": ────────────────────────────────────
+    // ── page "title": ──────────────────────────────────────
     if (/^page\b/.test(t)) {
-      const m = t.match(/^page\s+"([^"]*)"\s*:?$/) ||
-                t.match(/^page\s+'([^']*)'\s*:?$/);
-      if (m) pageTitle = m[1];
-      currentEl = { _type: 'page', styles: {}, attrs: {} };
+      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: currentEl, indent: ind });
+      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/class": ──────────────────────────────
-    const addM = t.match(/^add\s+(\w+)(?:\s+"([^"]*)")?(?:\s+'([^']*)')?\s*:?$/);
+    // ── add TAG "id": ───────────────────────────────────────
+    const addM = t.match(/^add\s+(\w+)(?:\s+"([^"]*)")?(?:\s+\'([^']*)\')?\s*:?$/);
     if (addM) {
-      const tag = addM[1].toLowerCase();
-      const rawId = addM[2] || addM[3] || '';
-      // Pop stack to find parent at correct indent
       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, id: rawId.startsWith('#') ? rawId.slice(1) : (rawId.includes(' ') ? '' : rawId),
+        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: {}, attrs: {}, events: [], children: [],
-        parent, _indent: ind
+        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);
-      currentEl = el;
       elStack.push({ el, indent: ind });
       continue;
     }
 
-    // ── Properties inside an element block ───────────────
-    if (currentEl && ind > (elStack[elStack.length-1]?.indent ?? -1)) {
-      const el = elStack[elStack.length-1].el;
+    // ── Properties inside an element ───────────────────────
+    const parentEntry = elStack[elStack.length-1];
+    if (parentEntry && ind > parentEntry.indent) {
+      const el = parentEntry.el;
 
-      // text "content"
+      // text / html
       const textM = t.match(/^text\s+(.+)$/);
-      if (textM) { el.text = parseStringArg(textM[1]); continue; }
-
-      // html "<raw>"
+      if (textM) { el.text = parseStr(textM[1]); continue; }
       const htmlM = t.match(/^html\s+(.+)$/);
-      if (htmlM) { el.html = parseStringArg(htmlM[1]); continue; }
+      if (htmlM) { el.html = parseStr(htmlM[1]); continue; }
 
-      // style property "value"  OR  style property: "value"
+      // style prop "value"  — any valid CSS property (camel or kebab)
       const styleM = t.match(/^style\s+([\w-]+)\s*:?\s+(.+)$/);
       if (styleM) {
-        const prop = styleM[1].replace(/-([a-z])/g, (_,c) => c.toUpperCase());
-        el.styles[prop] = parseStringArg(styleM[2]);
-        if (el._type === 'page') pageStyles[prop] = parseStringArg(styleM[2]);
+        const key = toCamel(styleM[1]);
+        const val = parseStr(styleM[2]);
+        el.styles[key] = val;
+        if (el._type === 'page') pageStyles[key] = val;
         continue;
       }
 
-      // attr name "value"
-      const attrM = t.match(/^attr\s+(\w+)\s+(.+)$/);
-      if (attrM) { el.attrs[attrM[1]] = parseStringArg(attrM[2]); 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; }
 
-      // class "name"
+      // 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(parseStringArg(classM[1])); continue; }
+      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 handler lines)
+      // on EVENT:  (collect indented handler lines)
       const onM = t.match(/^on\s+(\w+)\s*:?$/);
       if (onM) {
-        const evName = onM[1];
         const handlerLines = [];
         while (i < lines.length) {
-          const nextRaw = lines[i];
-          const nextInd = getIndent(nextRaw);
-          if (!nextRaw.trim() || nextInd <= ind) break;
-          handlerLines.push(nextRaw.slice(nextInd));
-          i++;
+          const nr = lines[i], ni = getIndent(nr);
+          if (!nr.trim() || ni <= ind) break;
+          handlerLines.push(nr.slice(ni)); i++;
         }
-        el.events.push({ event: evName, code: handlerLines.join('\n') });
-        continue;
-      }
-
-      // animate TYPE DURATION
-      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' };
+        el.events.push({ event: onM[1], code: handlerLines.join('\n') });
         continue;
       }
     }
   }
 
-  // ── Render elements to HTML ───────────────────────────
+  // ── 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(' ')}"` : '';
+    const tag      = el.tag;
+    const idAttr   = el.id ? ` id="${el.id}"` : '';
+    const clsAttr  = el.classes.length ? ` class="${el.classes.join(' ')}"` : '';
 
-    // Build style string
-    let styleStr = Object.entries(el.styles).map(([k,v]) => {
-      const cssProp = k.replace(/([A-Z])/g, '-$1').toLowerCase();
-      return `${cssProp}:${v}`;
-    }).join(';');
+    // Inline styles
+    let styleStr = Object.entries(el.styles).map(([k,v]) => `${toKebab(k)}:${v}`).join(';');
 
-    // Animation keyframe via inline style
+    // Animation
     if (el._anim) {
       const animMap = {
-        fadeIn: `fadeIn ${el._anim.dur}s ${el._anim.easing} forwards`,
+        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`,
+        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`,
       };
-      const animVal = animMap[el._anim.type] || `${el._anim.type} ${el._anim.dur}s ${el._anim.easing}`;
-      styleStr += (styleStr ? ';' : '') + `animation:${animVal}`;
+      styleStr += (styleStr?';':'') + `animation:${animMap[el._anim.type]||`${el._anim.type} ${el._anim.dur}s ${el._anim.easing}`}`;
     }
 
-    const styleAttr = styleStr ? ` style="${styleStr}"` : '';
-
-    // Extra attributes
-    const extraAttrs = Object.entries(el.attrs)
-      .map(([k,v]) => ` ${k}="${v}"`).join('');
+    // 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}}`);
+      }
+    }
 
-    // Event handlers — inject inline onclick etc.
-    const evAttrs = el.events.map(ev => {
-      const escaped = ev.code.replace(/"/g, '&quot;').replace(/\n/g, ' ');
+    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('');
 
-    // Self-closing tags
     const selfClose = ['img','input','br','hr','meta','link'].includes(tag);
-    if (selfClose) return `<${tag}${idAttr}${clsAttr}${styleAttr}${extraAttrs}/>\n`;
-
+    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}>\n`;
+    return `<${tag}${idAttr}${clsAttr}${styleAttr}${extraAttrs}${evAttrs}>${inner}</${tag}>
+`;
   }
 
-  const bodyStyleStr = Object.entries(pageStyles)
-    .map(([k,v]) => `${k.replace(/([A-Z])/g,'-$1').toLowerCase()}:${v}`).join(';');
+  const bodyStyleStr = Object.entries(pageStyles).map(([k,v])=>`${toKebab(k)}:${v}`).join(';');
+  const bodyHtml     = elements.map(renderEl).join('');
 
-  const bodyHtml = elements.map(renderEl).join('');
-
-  // Animation keyframes
   const KEYFRAMES = `
     @keyframes fadeIn   { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
     @keyframes fadeOut  { from{opacity:1} to{opacity:0} }
@@ -2678,12 +2703,14 @@ function buildWebDoc(code) {
     @keyframes pop      { 0%{transform:scale(0.5);opacity:0} 70%{transform:scale(1.1)} 100%{transform:scale(1);opacity:1} }
   `;
 
-  // Event-wiring script: wire data-ss-on* attributes to JS event listeners
   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>
@@ -2693,6 +2720,8 @@ function buildWebDoc(code) {
 <style>
 *{box-sizing:border-box;margin:0;padding:0}
 ${KEYFRAMES}
+${allPseudoCSS}
+${allCustomCSS}
 </style>
 </head>
 <body${bodyStyleStr ? ` style="${bodyStyleStr}"` : ''}>

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,249 @@ class Interpreter {
   }
 }
 
-module.exports = { Interpreter, SSError, Environment };
+// ── 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>`;
+}
+
+module.exports = { Interpreter, SSError, Environment, isWebCode, buildWebDoc };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "structscript",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "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",