swl-core 1.2.0

package/lib/compiler.js

@@ -0,0 +1,478 @@
+const fs = require("fs");
+const path = require("path");
+
+// ── Dicionários ───────────────────────────────────────────────────────────────
+
+const PROPS = {
+  fundo:"background-color", bg:"background-color", cor:"color", "text-cor":"color",
+  fonte:"font", tamanho:"font-size", peso:"font-weight", estilo:"font-style",
+  "altura-linha":"line-height", "espacamento-letras":"letter-spacing", familia:"font-family",
+  decoracao:"text-decoration", "transformacao-texto":"text-transform", "alinhamento-texto":"text-align",
+  largura:"width", w:"width", altura:"height", h:"height",
+  "max-largura":"max-width", "max-w":"max-width", "min-largura":"min-width", "min-w":"min-width",
+  "max-altura":"max-height", "max-h":"max-height", "min-altura":"min-height", "min-h":"min-height",
+  "proporcao-aspecto":"aspect-ratio", aspecto:"aspect-ratio",
+  margem:"margin", m:"margin", "margem-topo":"margin-top", mt:"margin-top",
+  "margem-direita":"margin-right", mr:"margin-right", "margem-inferior":"margin-bottom", mb:"margin-bottom",
+  "margem-esquerda":"margin-left", ml:"margin-left",
+  padding:"padding", p:"padding", "padding-topo":"padding-top", pt:"padding-top",
+  "padding-direita":"padding-right", pr:"padding-right", "padding-inferior":"padding-bottom", pb:"padding-bottom",
+  "padding-esquerda":"padding-left", pl:"padding-left",
+  gap:"gap", alinhamento:"text-align", "alinhamento-vertical":"vertical-align",
+  "alinhamento-item":"align-items", "alinhamento-conteudo":"align-content", "alinhamento-self":"align-self",
+  justificacao:"justify-content", exibicao:"display", display:"display",
+  direcao:"flex-direction", envolvimento:"flex-wrap",
+  "flex-crescimento":"flex-grow", "flex-encolhimento":"flex-shrink", "flex-base":"flex-basis",
+  "espacamento-item":"gap", flex:"flex",
+  colunas:"grid-template-columns", linhas:"grid-template-rows", lacuna:"gap",
+  "auto-coloca":"grid-auto-flow",
+  "coluna-inicial":"grid-column-start", "coluna-final":"grid-column-end",
+  "linha-inicial":"grid-row-start", "linha-final":"grid-row-end",
+  borda:"border", "borda-topo":"border-top", "borda-direita":"border-right",
+  "borda-inferior":"border-bottom", "borda-esquerda":"border-left",
+  "borda-raio":"border-radius", "borda-cor":"border-color",
+  "borda-estilo":"border-style", "borda-largura":"border-width",
+  posicao:"position", pos:"position",
+  topo:"top", top:"top", direita:"right", right:"right",
+  inferior:"bottom", bottom:"bottom", esquerda:"left", left:"left",
+  "indice-z":"z-index", z:"z-index",
+  opacidade:"opacity", sombra:"box-shadow", "sombra-texto":"text-shadow",
+  filtro:"filter", transformacao:"transform",
+  backtamanho:"background-size", backposicao:"background-position",
+  overflow:"overflow", "overflow-x":"overflow-x", "overflow-y":"overflow-y",
+  cursor:"cursor", "pointer-eventos":"pointer-events",
+  transicao:"transition", "transicao-funcao":"transition-timing-function",
+  "transicao-atraso":"transition-delay", animar:"animation",
+  outline:"outline", visibilidade:"visibility", clip:"clip-path",
+  "objeto-fit":"object-fit", "objeto-posicao":"object-position",
+  "list-estilo":"list-style", "white-space":"white-space",
+  "word-wrap":"word-wrap", "word-break":"word-break",
+  hifens:"hyphens", "quebra-texto":"text-overflow",
+  "mistura-modo":"mix-blend-mode", perspectiva:"perspective",
+  "transformacao-origem":"transform-origin", "backface-visibilidade":"backface-visibility",
+  "conteudo-caixa":"box-sizing", "box-sizing":"box-sizing",
+  "fundo-imagem":"background-image", "fundo-repetir":"background-repeat",
+  "fundo-anexar":"background-attachment", "fundo-origem":"background-origin",
+  "fundo-clip":"background-clip", resize:"resize",
+  "coluna-conta":"column-count", "coluna-gap":"column-gap",
+  "coluna-regra":"column-rule", "linha-clamp":"line-clamp",
+  "aparencia":"appearance", "user-select":"user-select",
+  "scroll-comportamento":"scroll-behavior", "scroll-margem":"scroll-margin",
+  "scroll-padding":"scroll-padding",
+};
+
+const COLORS = {
+  branco:"#FFFFFF", white:"#FFFFFF", preto:"#000000", black:"#000000",
+  cinza:"#808080", gray:"#808080", "cinza-claro":"#D3D3D3", "cinza-escuro":"#696969",
+  vermelho:"#FF0000", red:"#FF0000",
+  azul:"#0066FF", blue:"#0066FF", "azul-claro":"#87CEEB", "azul-escuro":"#00008B",
+  verde:"#008000", green:"#008000", "verde-claro":"#90EE90",
+  amarelo:"#FFFF00", yellow:"#FFFF00",
+  laranja:"#FFA500", orange:"#FFA500",
+  roxo:"#800080", purple:"#800080", violeta:"#EE82EE",
+  rosa:"#FFC0CB", pink:"#FFC0CB",
+  marrom:"#A52A2A", brown:"#A52A2A",
+  ouro:"#FFD700", gold:"#FFD700", prata:"#C0C0C0", silver:"#C0C0C0",
+  transparente:"transparent", transparent:"transparent",
+  ciano:"#00FFFF", cyan:"#00FFFF", magenta:"#FF00FF",
+};
+
+const VALUES = {
+  nenhuma:"none", nenhum:"none", oculta:"hidden", auto:"auto",
+  herdado:"inherit", inicial:"initial", conteudo:"content",
+  bloco:"block", inline:"inline", "inline-bloco":"inline-block",
+  flex:"flex", grid:"grid",
+  linha:"row", coluna:"column", "linha-reversa":"row-reverse", "coluna-reversa":"column-reverse",
+  envolver:"wrap", "envolver-reverso":"wrap-reverse",
+  "flexo-inicio":"flex-start", inicio:"flex-start", "flexo-fim":"flex-end", fim:"flex-end",
+  distribuido:"space-between", espacado:"space-around", "distribuido-uniformemente":"space-evenly",
+  esticado:"stretch", centro:"center", meio:"center",
+  justificado:"justify", solida:"solid", pontilhada:"dotted", tracejada:"dashed",
+  dupla:"double", redonda:"50%",
+  relativa:"relative", absoluta:"absolute", fixa:"fixed", pegajosa:"sticky", estatica:"static",
+  escondido:"hidden", visivel:"visible",
+  ponteiro:"pointer", mao:"pointer", hand:"pointer",
+  "nao-permitido":"not-allowed", texto:"text", movimento:"move", normal:"normal",
+  suave:"ease", "suave-entrada":"ease-in", "suave-saida":"ease-out", "suave-entrada-saida":"ease-in-out",
+  linear:"linear", infinito:"infinite",
+  denso:"dense", underline:"underline", overline:"overline", "line-through":"line-through",
+  maiuscula:"uppercase", minuscula:"lowercase", capitalizar:"capitalize",
+  nowrap:"nowrap", pre:"pre", "pre-wrap":"pre-wrap",
+  "break-word":"break-word", "break-all":"break-all",
+  cover:"cover", contain:"contain", fill:"fill", "scale-down":"scale-down",
+  borda:"border-box", conteudo:"content-box",
+};
+
+const PSEUDOS = {
+  pairado:"hover", ativo:"active", focado:"focus", visitado:"visited",
+  desabilitado:"disabled", marcado:"checked", indeterminado:"indeterminate",
+  "primeiro-filho":"first-child", "ultimo-filho":"last-child",
+  primeiro:"first-child", ultimo:"last-child",
+  "nth-filho":"nth-child", "somente-filho":"only-child",
+  "primeiro-tipo":"first-of-type", "ultimo-tipo":"last-of-type",
+  preenchido:"valid", invalido:"invalid",
+  "modo-escuro":"prefers-color-scheme: dark",
+  "modo-claro":"prefers-color-scheme: light",
+  "focado-visivel":"focus-visible", placeholder:"placeholder",
+  antes:"before", depois:"after", selecao:"selection",
+  "sem-filhos":"empty", raiz:"root",
+};
+
+// ── AST Nodes ─────────────────────────────────────────────────────────────────
+
+class Node { constructor(type) { this.type = type; } }
+class Program extends Node { constructor() { super("Program"); this.body = []; } }
+class Variable extends Node { constructor(n, v) { super("Variable"); this.name = n; this.value = v; } }
+class Import extends Node { constructor(p) { super("Import"); this.path = p; } }
+class Property extends Node { constructor(n, v, l) { super("Property"); this.name = n; this.value = v; this.line = l; } }
+class PseudoState extends Node { constructor(n) { super("PseudoState"); this.name = n; this.props = []; } }
+class MediaQuery extends Node { constructor(c) { super("MediaQuery"); this.condition = c; this.rules = []; } }
+
+class Rule extends Node {
+  constructor(sel) { super("Rule"); this.selector = sel; this.props = []; this.pseudos = []; this.children = []; }
+}
+
+class Component extends Node {
+  constructor(name, parent) { super("Component"); this.name = name; this.parent = parent; this.body = []; }
+}
+
+class Theme extends Node {
+  constructor(name) { super("Theme"); this.name = name; this.vars = []; }
+}
+
+class Animation extends Node {
+  constructor(name) { super("Animation"); this.name = name; this.frames = []; }
+}
+
+class Frame extends Node {
+  constructor(pos) { super("Frame"); this.position = pos; this.props = []; }
+}
+
+// ── Lexer ─────────────────────────────────────────────────────────────────────
+
+class Lexer {
+  tokenize(code) {
+    const tokens = [];
+    let inBlock = false;
+    let ln = 0;
+
+    for (let raw of code.split("\n")) {
+      ln++;
+      let line = raw.trim();
+      if (line.includes("/*")) inBlock = true;
+      if (line.includes("*/")) { inBlock = false; continue; }
+      if (inBlock || !line || line.startsWith("//")) continue;
+      if (line.includes("//")) line = line.slice(0, line.indexOf("//")).trim();
+      if (!line) continue;
+
+      if (line.startsWith("@importar")) {
+        const m = line.match(/@importar\s+"([^"]+)"/);
+        if (m) tokens.push({ type:"IMPORT", value:m[1], line:ln });
+        continue;
+      }
+      if (line.startsWith("@tema ")) {
+        const m = line.match(/^@tema\s+([\w-]+)/);
+        if (m) tokens.push({ type:"THEME", value:m[1], line:ln });
+        continue;
+      }
+      if (line.startsWith("@componente ")) {
+        const m = line.match(/^@componente\s+([\w-]+)(?:\s+herda\s+([\w-]+))?/);
+        if (m) tokens.push({ type:"COMPONENT", value:m[1], parent:m[2]||null, line:ln });
+        continue;
+      }
+      if (line.startsWith("@animar ")) {
+        const m = line.match(/^@animar\s+([\w-]+)/);
+        if (m) tokens.push({ type:"ANIMATION", value:m[1], line:ln });
+        continue;
+      }
+      if (line.startsWith("@media ")) {
+        tokens.push({ type:"MEDIA", value:line.slice(7).trim(), line:ln });
+        continue;
+      }
+      if (line.startsWith("@") && line.includes(":")) {
+        const m = line.match(/^@([\w-]+)\s*:\s*(.+)$/);
+        if (m) tokens.push({ type:"VARIABLE", name:m[1], value:m[2].trim(), line:ln });
+        continue;
+      }
+      if (line === "(") { tokens.push({ type:"BLOCK_START", line:ln }); continue; }
+      if (line === ")") { tokens.push({ type:"BLOCK_END", line:ln }); continue; }
+
+      const ruleM = line.match(/^\((.+):$/);
+      if (ruleM) { tokens.push({ type:"RULE", selector:ruleM[1].trim(), line:ln }); continue; }
+
+      const pseudoM = line.match(/^&:([\w-]+)/);
+      if (pseudoM) { tokens.push({ type:"PSEUDO", value:pseudoM[1], line:ln }); continue; }
+
+      const frameM = line.match(/^(\d+%|de|para):$/);
+      if (frameM) { tokens.push({ type:"FRAME", value:frameM[1], line:ln }); continue; }
+
+      const propM = line.match(/^([\w-]+)\s+(.+)$/);
+      if (propM) { tokens.push({ type:"PROPERTY", name:propM[1], value:propM[2].trim(), line:ln }); continue; }
+    }
+    return tokens;
+  }
+}
+
+// ── Parser ────────────────────────────────────────────────────────────────────
+
+class Parser {
+  parse(tokens) {
+    this.tokens = tokens;
+    this.pos = 0;
+    const prog = new Program();
+    while (this.pos < this.tokens.length) {
+      const t = this.tokens[this.pos];
+      switch (t.type) {
+        case "IMPORT":    prog.body.push(new Import(t.value)); this.pos++; break;
+        case "VARIABLE":  prog.body.push(new Variable(t.name, t.value)); this.pos++; break;
+        case "COMPONENT": prog.body.push(this.parseComponent()); break;
+        case "THEME":     prog.body.push(this.parseTheme()); break;
+        case "ANIMATION": prog.body.push(this.parseAnimation()); break;
+        case "MEDIA":     prog.body.push(this.parseMedia()); break;
+        case "RULE":      prog.body.push(this.parseRule()); break;
+        default: this.pos++;
+      }
+    }
+    return prog;
+  }
+
+  cur() { return this.tokens[this.pos]; }
+
+  parseBlock(stopTypes = []) {
+    const nodes = [];
+    while (this.pos < this.tokens.length) {
+      const t = this.cur();
+      if (!t || stopTypes.includes(t.type) || t.type === "BLOCK_END") break;
+      if (t.type === "PROPERTY") { nodes.push(new Property(t.name, t.value, t.line)); this.pos++; continue; }
+      if (t.type === "PSEUDO")   { nodes.push(this.parsePseudo()); continue; }
+      if (t.type === "MEDIA")    { nodes.push(this.parseMedia()); continue; }
+      if (t.type === "RULE")     { nodes.push(this.parseRule()); continue; }
+      if (t.type === "VARIABLE") { nodes.push(new Variable(t.name, t.value)); this.pos++; continue; }
+      this.pos++;
+    }
+    return nodes;
+  }
+
+  parseRule() {
+    const t = this.tokens[this.pos++];
+    const rule = new Rule(t.selector);
+    this.parseBlock(["RULE","COMPONENT","THEME","ANIMATION","MEDIA"]).forEach(n => {
+      if (n instanceof Property)    rule.props.push(n);
+      else if (n instanceof PseudoState) rule.pseudos.push(n);
+      else                          rule.children.push(n);
+    });
+    return rule;
+  }
+
+  parsePseudo() {
+    const t = this.tokens[this.pos++];
+    const pseudo = new PseudoState(t.value);
+    this.parseBlock(["PSEUDO","RULE","MEDIA"]).forEach(n => {
+      if (n instanceof Property) pseudo.props.push(n);
+    });
+    return pseudo;
+  }
+
+  parseComponent() {
+    const t = this.tokens[this.pos++];
+    const comp = new Component(t.value, t.parent);
+    this.parseBlock(["COMPONENT","RULE","THEME","ANIMATION","MEDIA","IMPORT"]).forEach(n => comp.body.push(n));
+    return comp;
+  }
+
+  parseTheme() {
+    const t = this.tokens[this.pos++];
+    const theme = new Theme(t.name || t.value);
+    this.parseBlock(["THEME","RULE","COMPONENT","ANIMATION","MEDIA","IMPORT"]).forEach(n => {
+      if (n instanceof Variable) theme.vars.push(n);
+    });
+    return theme;
+  }
+
+  parseAnimation() {
+    const t = this.tokens[this.pos++];
+    const anim = new Animation(t.value);
+    let frame = null;
+    while (this.pos < this.tokens.length) {
+      const cur = this.cur();
+      if (!cur || ["ANIMATION","BLOCK_END","RULE","COMPONENT","THEME","MEDIA","IMPORT"].includes(cur.type)) break;
+      if (cur.type === "FRAME") {
+        frame = new Frame(cur.value);
+        anim.frames.push(frame);
+        this.pos++;
+        continue;
+      }
+      if (cur.type === "PROPERTY" && frame) {
+        frame.props.push(new Property(cur.name, cur.value, cur.line));
+      }
+      this.pos++;
+    }
+    return anim;
+  }
+
+  parseMedia() {
+    const t = this.tokens[this.pos++];
+    const media = new MediaQuery(t.value);
+    this.parseBlock(["MEDIA"]).forEach(n => {
+      if (n instanceof Rule) media.rules.push(n);
+    });
+    return media;
+  }
+}
+
+// ── Variable Resolver ─────────────────────────────────────────────────────────
+
+class VarResolver {
+  resolve(ast) {
+    this.vars = {};
+    for (const n of ast.body) {
+      if (n.type === "Variable") this.vars[n.name] = n.value;
+      if (n.type === "Theme") n.vars.forEach(v => { this.vars[v.name] = v.value; });
+    }
+    this.walk(ast);
+  }
+
+  walk(node) {
+    if (!node) return;
+    const resolve = list => list && list.forEach(p => {
+      if (p.value) p.value = p.value.replace(/@([\w-]+)/g, (_, k) => this.vars[k] || `@${k}`);
+    });
+    switch (node.type) {
+      case "Program":    node.body.forEach(c => this.walk(c)); break;
+      case "Rule":       resolve(node.props); node.children.forEach(c => this.walk(c)); node.pseudos.forEach(p => this.walk(p)); break;
+      case "Component":  resolve(node.body.filter(n => n.type === "Property")); node.body.forEach(n => this.walk(n)); break;
+      case "PseudoState":resolve(node.props); break;
+      case "MediaQuery": node.rules.forEach(r => this.walk(r)); break;
+      case "Animation":  node.frames.forEach(f => resolve(f.props)); break;
+    }
+  }
+}
+
+// ── Generator ─────────────────────────────────────────────────────────────────
+
+class Generator {
+  val(raw) {
+    if (!raw) return "";
+    const v = raw.trim();
+    if (COLORS[v]) return COLORS[v];
+    if (VALUES[v]) return VALUES[v];
+    if (v.includes(" ")) {
+      return v.split(/\s+/).map(p => COLORS[p] || VALUES[p] || p).join(" ");
+    }
+    return v;
+  }
+
+  prop(p) {
+    return `  ${PROPS[p.name] || p.name}: ${this.val(p.value)};\n`;
+  }
+
+  generate(ast) {
+    return ast.body.map(n => {
+      switch (n.type) {
+        case "Rule":       return this.rule(n);
+        case "Component":  return this.component(n);
+        case "Theme":      return this.theme(n);
+        case "Animation":  return this.animation(n);
+        case "MediaQuery": return this.media(n);
+        default: return "";
+      }
+    }).join("");
+  }
+
+  rule(node, parent = "") {
+    const sel = parent ? `${parent} ${node.selector}` : node.selector;
+    let out = "";
+    const block = node.props.map(p => this.prop(p)).join("");
+    if (block) out += `${sel} {\n${block}}\n\n`;
+    node.pseudos.forEach(ps => {
+      const name = PSEUDOS[ps.name] || ps.name;
+      const isMedia = name.includes(":");
+      if (isMedia) {
+        out += `@media (${name}) {\n  ${sel} {\n`;
+        ps.props.forEach(p => { out += "  " + this.prop(p); });
+        out += "  }\n}\n\n";
+      } else {
+        out += `${sel}:${name} {\n`;
+        ps.props.forEach(p => { out += this.prop(p); });
+        out += "}\n\n";
+      }
+    });
+    node.children.forEach(c => { out += this.rule(c, sel); });
+    return out;
+  }
+
+  component(comp) {
+    let out = "";
+    const block = comp.body.filter(n => n instanceof Property).map(p => this.prop(p)).join("");
+    if (block) out += `.${comp.name} {\n${block}}\n\n`;
+    comp.body.filter(n => n instanceof Rule).forEach(r => { out += this.rule(r, `.${comp.name}`); });
+    return out;
+  }
+
+  theme(theme) {
+    let out = `:root[data-tema="${theme.name}"] {\n`;
+    theme.vars.forEach(v => { out += `  --${v.name}: ${this.val(v.value)};\n`; });
+    return out + "}\n\n";
+  }
+
+  animation(anim) {
+    let out = `@keyframes ${anim.name} {\n`;
+    anim.frames.forEach(f => {
+      const pos = f.position === "de" ? "from" : f.position === "para" ? "to" : f.position;
+      out += `  ${pos} {\n`;
+      f.props.forEach(p => { out += "  " + this.prop(p); });
+      out += "  }\n";
+    });
+    return out + "}\n\n";
+  }
+
+  media(mq) {
+    let out = `@media ${mq.condition} {\n`;
+    mq.rules.forEach(r => {
+      out += this.rule(r).split("\n").map(l => l ? "  " + l : "").join("\n");
+    });
+    return out + "}\n\n";
+  }
+}
+
+// ── Compiler ──────────────────────────────────────────────────────────────────
+
+class Compiler {
+  constructor() {
+    this.lexer  = new Lexer();
+    this.parser = new Parser();
+    this.vars   = new VarResolver();
+    this.gen    = new Generator();
+    this.plugins = [];
+  }
+
+  use(plugin) {
+    if (plugin && typeof plugin.apply === "function") this.plugins.push(plugin);
+  }
+
+  compile(source, filename = "unknown.swls") {
+    try {
+      let src = source;
+      this.plugins.forEach(p => p.beforeParse && (src = p.beforeParse(src) || src));
+
+      const tokens = this.lexer.tokenize(src);
+      let ast = this.parser.parse(tokens);
+
+      this.plugins.forEach(p => p.afterParse && (ast = p.afterParse(ast) || ast));
+      this.vars.resolve(ast);
+
+      let css = this.gen.generate(ast);
+      this.plugins.forEach(p => p.afterGenerate && (css = p.afterGenerate(css) || css));
+
+      return { success: true, css, errors: [] };
+    } catch (err) {
+      return {
+        success: false,
+        css: "",
+        errors: [{ message: err.message, file: filename, line: err.line || null }],
+      };
+    }
+  }
+}
+
+module.exports = { Compiler, PROPS, COLORS, VALUES, PSEUDOS };

package/lib/dev-server.js

@@ -0,0 +1,96 @@
+const http = require("http");
+const WebSocket = require("ws");
+
+class DevServer {
+  constructor(framework) {
+    this.fw = framework;
+    this.httpPort = 3000;
+    this.wsPort = 3030;
+    this.clients = new Set();
+    this.lastCSS = "";
+  }
+
+  start() {
+    this.ws = new WebSocket.Server({ port: this.wsPort });
+    this.ws.on("connection", (client) => {
+      this.clients.add(client);
+      client.send(JSON.stringify({ type: "connected" }));
+      client.on("close", () => this.clients.delete(client));
+    });
+
+    this.http = http.createServer((req, res) => {
+      if (req.url === "/swls.css") {
+        const css = this.fw.getCurrentStyle();
+        res.writeHead(200, { "Content-Type": "text/css; charset=utf-8" });
+        return res.end(css);
+      }
+      if (req.url === "/" || req.url === "/index.html") {
+        res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+        return res.end(this.html());
+      }
+      res.writeHead(404); res.end("Not found");
+    });
+
+    this.http.listen(this.httpPort, () => {
+      console.log(`📡 Dev Server: http://localhost:${this.httpPort}`);
+      console.log(`🔌 HMR WebSocket: ws://localhost:${this.wsPort}`);
+    });
+  }
+
+  broadcast(file, css) {
+    this.lastCSS = css;
+    if (!this.clients.size) return;
+    const msg = JSON.stringify({ type: "hmr-update", file, css, ts: Date.now() });
+    for (const c of this.clients) {
+      if (c.readyState === WebSocket.OPEN) c.send(msg);
+    }
+  }
+
+  html() {
+    return `<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+  <meta charset="UTF-8">
+  <title>SWLS Dev Server</title>
+  <link rel="stylesheet" href="/swls.css" id="swls-style">
+  <style>
+    body { font-family: system-ui, sans-serif; background: #13141c; color: #f4f4f7; padding: 2rem; margin: 0; }
+    .box { max-width: 760px; margin: 0 auto; background: #1b1d2a; padding: 2rem; border-radius: 10px; border: 1px solid #2e3248; }
+    h1 { color: #0066FF; margin: 0 0 1rem; }
+    .badge { font-size: .75rem; padding: 3px 8px; border-radius: 12px; background: #007A3D; font-weight: bold; }
+    .log { background: #0c0d14; padding: 1rem; border-radius: 6px; font-family: monospace; font-size: .85rem;
+           color: #a2a6b8; height: 140px; overflow-y: auto; border: 1px solid #1f2130; margin-top: 1.5rem; }
+  </style>
+</head>
+<body>
+  <div class="box">
+    <h1>SWLS Dev Server <span class="badge" id="st">Conectando...</span></h1>
+    <p>Monitorando arquivos <code>.swls</code>. Alterações são injetadas sem recarregar a página.</p>
+    <div class="log" id="log">[SWLS] Inicializando...<br></div>
+  </div>
+  <script>
+    const log = (m) => { const el = document.getElementById('log'); el.innerHTML += \`[\${new Date().toLocaleTimeString()}] \${m}<br>\`; el.scrollTop = el.scrollHeight; };
+    const st  = document.getElementById('st');
+    const ws  = new WebSocket('ws://localhost:${this.wsPort}');
+    ws.onopen    = () => { st.textContent = 'HMR Ativo'; st.style.background = '#007A3D'; log('Conectado.'); };
+    ws.onclose   = () => { st.textContent = 'Desconectado'; st.style.background = '#B30000'; };
+    ws.onmessage = ({ data }) => {
+      const d = JSON.parse(data);
+      if (d.type === 'hmr-update') {
+        log('⚡ Patch recebido.');
+        let tag = document.getElementById('swls-style');
+        if (!tag) { tag = document.createElement('style'); tag.id = 'swls-style'; document.head.appendChild(tag); }
+        if (tag.tagName === 'LINK') {
+          const s = document.createElement('style');
+          s.id = 'swls-style'; s.textContent = d.css;
+          tag.replaceWith(s);
+        } else { tag.textContent = d.css; }
+      }
+    };
+  </script>
+</body>
+</html>`;
+  }
+}
+
+module.exports = DevServer;

package/lib/framework.js

@@ -0,0 +1,83 @@
+const fs = require("fs");
+const path = require("path");
+const { Compiler } = require("./compiler");
+const GraphEngine = require("./graph-engine");
+const DevServer = require("./dev-server");
+
+class SWLSFramework {
+  constructor(entry) {
+    this.entry = path.resolve(entry);
+    this.graph = new GraphEngine();
+    this.compiler = new Compiler();
+    this.server = new DevServer(this);
+    this.cache = new Map();
+  }
+
+  use(plugin) {
+    this.compiler.use(plugin);
+    return this;
+  }
+
+  build(outputPath = null) {
+    const t0 = Date.now();
+    const source = fs.readFileSync(this.entry, "utf-8");
+    this.graph.update(this.entry, source);
+
+    const result = this.compiler.compile(source, this.entry);
+    if (!result.success) {
+      result.errors.forEach(e => console.error(`❌ ${e.message}`));
+      process.exit(1);
+    }
+
+    const out = outputPath ? path.resolve(outputPath) : this.entry.replace(/\.swls$/, ".css");
+    fs.writeFileSync(out, result.css);
+    this.cache.set(this.entry, result.css);
+
+    console.log("━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━");
+    console.log("✅ SWLS Core v1.2.0 — Build concluído");
+    console.log(`   Entrada : ${path.basename(this.entry)}`);
+    console.log(`   Saída   : ${path.basename(out)}`);
+    console.log(`   Tempo   : ${Date.now() - t0}ms`);
+    console.log("━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━");
+    return result.css;
+  }
+
+  dev() {
+    console.log("━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━");
+    console.log("🔄 SWLS Core v1.2.0 — Modo Dev");
+    console.log("━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━");
+    this.build();
+    this.server.start();
+    this.watch();
+  }
+
+  watch() {
+    console.log(`👀 Monitorando: ${path.basename(this.entry)}\n`);
+    fs.watch(this.entry, () => {
+      try {
+        const source = fs.readFileSync(this.entry, "utf-8");
+        this.graph.update(this.entry, source);
+        const affected = this.graph.getAffected(this.entry);
+        for (const file of affected) {
+          const src = fs.readFileSync(file, "utf-8");
+          const result = this.compiler.compile(src, file);
+          if (result.success) {
+            this.cache.set(file, result.css);
+            this.server.broadcast(file, result.css);
+            console.log(`⚡ HMR: ${path.basename(file)}`);
+          } else {
+            result.errors.forEach(e => console.error(`❌ ${path.basename(file)}: ${e.message}`));
+          }
+        }
+      } catch (err) {
+        console.error("⚠️  Erro no watch:", err.message);
+      }
+    });
+  }
+
+  getCurrentStyle() {
+    return this.cache.get(this.entry) || "";
+  }
+}
+
+module.exports = SWLSFramework;