draply-dev 1.0.0

package/README.md

@@ -0,0 +1,110 @@
+# Draply 🎯
+
+> Visual overlay for any frontend project.
+> Move, resize, recolor, and restyle your **live dev site** — save changes to CSS automatically.
+
+No config. No setup. Works with any framework.
+
+---
+
+## Install & Run
+
+```bash
+# 1. Start your dev server as usual
+npm run dev          # Next.js, Vite, CRA, Nuxt...
+
+# 2. In a new terminal, run Draply
+npx draply 5173      # ← port of your dev server
+
+# 3. Open the Draply URL (NOT your dev server URL)
+#    → http://localhost:4000
+```
+
+**Custom ports:**
+```bash
+npx draply 3000        # your app on 3000, draply on 4000
+npx draply 8080 9000   # your app on 8080, draply on 9000
+```
+
+---
+
+## How it works
+
+```
+Your app (port 5173)
+       ↓
+Draply proxy (port 4000)
+  • Intercepts HTML responses
+  • Injects visual overlay into every page
+  • Forwards everything else unchanged
+       ↓
+Browser shows YOUR site + green button in corner
+       ↓
+Click button → sidebar opens → pick a tool → edit
+       ↓
+Save → writes draply.css + auto-imports it into your project
+```
+
+### Auto-detection
+
+On first save, Draply **auto-detects your framework** and adds the CSS import:
+
+| Framework | File modified |
+|-----------|--------------|
+| Next.js (App Router) | `app/layout.tsx` |
+| Next.js (Pages) | `pages/_app.tsx` |
+| Nuxt | `nuxt.config.ts` |
+| Vue (Vite) | `src/main.ts` |
+| React (Vite) | `src/main.tsx` |
+| CRA | `public/index.html` |
+| Plain HTML | `index.html` |
+
+No manual setup needed — changes persist even without Draply running.
+
+---
+
+## Tools
+
+| Tool | What it does |
+|------|-------------|
+| 🖱️ Select | Click any element to highlight it |
+| ✦ Move | Drag elements to any pixel position |
+| 🔍 Inspect | Hover to see dimensions + CSS info |
+| 📐 Resize | 8 corner/edge handles to resize any element |
+| 🎨 Colors | Change background, text color, border color |
+| 📝 Typography | Font size, weight, line-height, letter-spacing |
+| 🖼️ Assets | Upload PNG/SVG/JPG → place on page → control z-index |
+
+---
+
+## Keyboard shortcuts
+
+| Key | Action |
+|-----|--------|
+| `Esc` | Cancel placing asset / deselect |
+| `Arrow keys` | Nudge selected element 1px |
+| `Shift + Arrow` | Nudge 10px |
+| `Delete` | Remove selected placed asset |
+
+---
+
+## Works with
+
+- ✅ React / Next.js / Vite
+- ✅ Vue / Nuxt
+- ✅ Svelte / Astro
+- ✅ Vanilla HTML/CSS
+- ✅ Any framework that serves HTML on localhost
+
+---
+
+## Requirements
+
+- Node.js 16+
+- Your dev server must be running before starting Draply
+
+---
+
+## License
+
+MIT

package/bin/cli.js

@@ -0,0 +1,258 @@
+#!/usr/bin/env node
+'use strict';
+
+const http = require('http');
+const fs   = require('fs');
+const path = require('path');
+const zlib = require('zlib');
+
+const args       = process.argv.slice(2);
+const targetPort = parseInt(args[0]) || 3000;
+const proxyPort  = parseInt(args[1]) || 4000;
+const targetHost = args[2] || 'localhost';
+
+const OVERLAY_JS  = fs.readFileSync(path.join(__dirname, '../src/overlay.js'), 'utf8');
+// Unique marker that does NOT appear inside overlay.js itself
+const MARKER      = 'data-ps-done="1"';
+const INJECT_TAG  = `\n<link rel="stylesheet" href="/draply.css">\n<script ${MARKER}>\n${OVERLAY_JS}\n</script>`;
+
+function injectOverlay(html) {
+  if (html.includes(MARKER)) return html;
+  if (html.includes('</body>'))  return html.replace(/<\/body>/i,  INJECT_TAG + '\n</body>');
+  if (html.includes('</html>'))  return html.replace(/<\/html>/i, INJECT_TAG + '\n</html>');
+  return html + INJECT_TAG;
+}
+
+function decode(headers, chunks) {
+  const enc = headers['content-encoding'] || '';
+  const buf = Buffer.concat(chunks);
+  return new Promise((res, rej) => {
+    if (enc === 'gzip')    return zlib.gunzip(buf,           (e,d) => e ? rej(e) : res(d.toString('utf8')));
+    if (enc === 'deflate') return zlib.inflate(buf,          (e,d) => e ? rej(e) : res(d.toString('utf8')));
+    if (enc === 'br')      return zlib.brotliDecompress(buf, (e,d) => e ? rej(e) : res(d.toString('utf8')));
+    res(buf.toString('utf8'));
+  });
+}
+
+// Создаём пустой draply.css при старте если его нет
+const projectRoot  = process.cwd();
+const overridesPath = path.join(projectRoot, 'draply.css');
+if (!fs.existsSync(overridesPath)) {
+  fs.writeFileSync(overridesPath, '/* draply */\n', 'utf8');
+}
+let cssInjected = false; // флаг: CSS уже подключён к проекту?
+
+// ── Авто-определение фреймворка и подключение draply.css ──────────────────
+function autoInjectCSS() {
+  if (cssInjected) return;
+  cssInjected = true;
+
+  const has = f => fs.existsSync(path.join(projectRoot, f));
+  const read = f => fs.readFileSync(path.join(projectRoot, f), 'utf8');
+  const write = (f, c) => fs.writeFileSync(path.join(projectRoot, f), c, 'utf8');
+  const already = (content) => content.includes('draply.css');
+
+  try {
+    // Next.js App Router
+    for (const f of ['app/layout.tsx', 'app/layout.jsx', 'app/layout.js']) {
+      if (has(f)) {
+        let src = read(f);
+        if (already(src)) return;
+        src = `import '../draply.css';\n` + src;
+        write(f, src);
+        console.log(`  \x1b[32m✓\x1b[0m Подключил draply.css → ${f}`);
+        return;
+      }
+    }
+
+    // Next.js Pages Router
+    for (const f of ['pages/_app.tsx', 'pages/_app.jsx', 'pages/_app.js']) {
+      if (has(f)) {
+        let src = read(f);
+        if (already(src)) return;
+        src = `import '../draply.css';\n` + src;
+        write(f, src);
+        console.log(`  \x1b[32m✓\x1b[0m Подключил draply.css → ${f}`);
+        return;
+      }
+    }
+
+    // Nuxt
+    for (const f of ['nuxt.config.ts', 'nuxt.config.js']) {
+      if (has(f)) {
+        let src = read(f);
+        if (already(src)) return;
+        if (src.includes('css:')) {
+          src = src.replace(/css:\s*\[/, "css: ['./draply.css', ");
+        } else {
+          src = src.replace(/export default defineNuxtConfig\(\{/, "export default defineNuxtConfig({\n  css: ['./draply.css'],");
+        }
+        write(f, src);
+        console.log(`  \x1b[32m✓\x1b[0m Подключил draply.css → ${f}`);
+        return;
+      }
+    }
+
+    // Vue (Vite)
+    if (has('src/App.vue')) {
+      for (const f of ['src/main.ts', 'src/main.js']) {
+        if (has(f)) {
+          let src = read(f);
+          if (already(src)) return;
+          src = `import '../draply.css'\n` + src;
+          write(f, src);
+          console.log(`  \x1b[32m✓\x1b[0m Подключил draply.css → ${f}`);
+          return;
+        }
+      }
+    }
+
+    // React (Vite) — src/main.tsx / src/main.jsx
+    for (const f of ['src/main.tsx', 'src/main.jsx', 'src/main.js', 'src/main.ts', 'src/index.tsx', 'src/index.jsx', 'src/index.js']) {
+      if (has(f)) {
+        let src = read(f);
+        if (already(src)) return;
+        src = `import '../draply.css'\n` + src;
+        write(f, src);
+        console.log(`  \x1b[32m✓\x1b[0m Подключил draply.css → ${f}`);
+        return;
+      }
+    }
+
+    // CRA — public/index.html
+    if (has('public/index.html')) {
+      let src = read('public/index.html');
+      if (already(src)) return;
+      src = src.replace(/<\/head>/i, '  <link rel="stylesheet" href="%PUBLIC_URL%/draply.css">\n  </head>');
+      write('public/index.html', src);
+      // Копируем draply.css в public/
+      fs.copyFileSync(overridesPath, path.join(projectRoot, 'public/draply.css'));
+      console.log(`  \x1b[32m✓\x1b[0m Подключил draply.css → public/index.html`);
+      return;
+    }
+
+    // Plain HTML / Vite — index.html в корне
+    if (has('index.html')) {
+      let src = read('index.html');
+      if (already(src)) return;
+      src = src.replace(/<\/head>/i, '  <link rel="stylesheet" href="./draply.css">\n  </head>');
+      write('index.html', src);
+      console.log(`  \x1b[32m✓\x1b[0m Подключил draply.css → index.html`);
+      return;
+    }
+
+    console.log(`  \x1b[33m⚠\x1b[0m Не удалось определить фреймворк — добавь draply.css вручную`);
+  } catch (err) {
+    console.log(`  \x1b[33m⚠\x1b[0m Ошибка авто-подключения: ${err.message}`);
+  }
+}
+
+const server = http.createServer((req, res) => {
+
+  // CORS preflight
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  res.setHeader('Access-Control-Allow-Methods', 'GET,POST,OPTIONS');
+  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
+  if (req.method === 'OPTIONS') { res.writeHead(204); res.end(); return; }
+
+  // ── Draply: Save endpoint ──────────────────────────────────────────────────
+  if (req.url === '/draply-save' && req.method === 'POST') {
+    let body = '';
+    req.on('data', c => body += c);
+    req.on('end', () => {
+      try {
+        const { changes } = JSON.parse(body);
+        const lines = [];
+        for (const ch of (changes || [])) {
+          if (!ch.selector) continue;
+          const props = Object.entries(ch.props)
+            .map(([k, v]) => `  ${k}: ${v};`)
+            .join('\n');
+          const label = ch.selector.split('>').pop().trim();
+          lines.push(`/* ${label} */
+${ch.selector} {
+${props}
+}`);
+        }
+        const css = '/* draply — ' + new Date().toLocaleString('ru-RU') + ' */\n\n' + lines.join('\n\n') + '\n';
+        fs.writeFileSync(overridesPath, css, 'utf8');
+        autoInjectCSS();
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ ok: true }));
+      } catch (e) {
+        res.writeHead(500, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ ok: false, error: e.message }));
+      }
+    });
+    return;
+  }
+
+  // ── Draply: Serve CSS ──────────────────────────────────────────────────────
+  if (req.url === '/draply.css') {
+    try {
+      const css = fs.readFileSync(overridesPath, 'utf8');
+      res.writeHead(200, { 'Content-Type': 'text/css', 'cache-control': 'no-store' });
+      res.end(css);
+    } catch (e) {
+      res.writeHead(200, { 'Content-Type': 'text/css' });
+      res.end('');
+    }
+    return;
+  }
+
+
+
+  // ── Proxy to dev server ────────────────────────────────────────────────────
+  const opts = {
+    hostname: targetHost,
+    port:     targetPort,
+    path:     req.url,
+    method:   req.method,
+    headers:  { ...req.headers, host: `${targetHost}:${targetPort}`, 'accept-encoding': 'identity' },
+  };
+
+  const pReq = http.request(opts, pRes => {
+    const ct = pRes.headers['content-type'] || '';
+    if (ct.includes('text/html')) {
+      const chunks = [];
+      pRes.on('data', c => chunks.push(c));
+      pRes.on('end', async () => {
+        try {
+          const html    = await decode(pRes.headers, chunks);
+          const out     = Buffer.from(injectOverlay(html), 'utf8');
+          const headers = { ...pRes.headers };
+          delete headers['content-encoding'];
+          headers['content-length'] = out.length;
+          headers['cache-control']  = 'no-store';
+          res.writeHead(pRes.statusCode, headers);
+          res.end(out);
+        } catch(e) {
+          res.writeHead(500); res.end('Draply error: ' + e.message);
+        }
+      });
+    } else {
+      res.writeHead(pRes.statusCode, pRes.headers);
+      pRes.pipe(res);
+    }
+  });
+
+  pReq.on('error', () => {
+    res.writeHead(502, {'Content-Type':'text/html'});
+    res.end(`<!DOCTYPE html><html><body style="background:#0a0a0f;color:#e8e8f0;font-family:monospace;padding:60px;text-align:center">
+      <h2 style="color:#ff6b6b">⚠ Не могу достучаться до ${targetHost}:${targetPort}</h2>
+      <p style="color:#555;margin-top:16px">Убедись что dev сервер запущен, потом обнови страницу</p>
+      <script>setTimeout(()=>location.reload(), 2000)</script>
+    </body></html>`);
+  });
+
+  req.pipe(pReq);
+});
+
+server.listen(proxyPort, () => {
+  console.log('\n \x1b[32m●\x1b[0m Draply запущен\n');
+  console.log(` Твой проект  →  \x1b[36mhttp://${targetHost}:${targetPort}\x1b[0m`);
+  console.log(` Открой это  →  \x1b[33mhttp://localhost:${proxyPort}\x1b[0m  \x1b[32m← вот сюда заходи!\x1b[0m\n`);
+  console.log(` \x1b[90mCtrl+C чтобы остановить\x1b[0m\n`);
+});
+
+process.on('SIGINT', () => { console.log('\n \x1b[90mDraply остановлен\x1b[0m\n'); process.exit(0); });

package/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "draply-dev",
+  "version": "1.0.0",
+  "description": "Visual overlay for any frontend project — move, resize, restyle live in the browser, save to CSS",
+  "author": "Arman",
+  "type": "commonjs",
+  "bin": { "draply": "./bin/cli.js" },
+  "files": ["bin/", "src/"],
+  "keywords": ["css", "visual-editor", "frontend", "overlay", "design-tool", "no-code", "drag-and-drop"],
+  "license": "MIT",
+  "engines": { "node": ">=16.0.0" }
+}