dreative 0.1.0 → 0.3.0

package/README.md

@@ -1,35 +1,35 @@
-# Dreative
-
-Visual round-trip UI editing **skill for coding CLIs** (Claude Code etc.). The CLI agent extracts your app's current UI page-by-page into editable wireframes; you tweak them in the browser (drag-drop, ref images, text prompts); clicking **Finish** hands a compact layout **diff** back to the agent, which rewrites your real code to match.
-
-Dreative itself has **no AI** — the web UI is a dumb visual editor plus a request queue. Your coding agent is the intelligence: it services UI prompts via `dreative wait` / `dreative respond` and applies the finish diff. See `skill/dreative/SKILL.md` for the agent workflow (install it into `.claude/skills/dreative/`).
-
-## Run
-
-```sh
-npm install
-npm run build
-npm link          # once — makes the `dreative` command available globally
-```
-
-Then in any project folder:
-
-```sh
-dreative          # starts the local server and opens http://localhost:4820
-```
-
-State lives in `.dreative/` in that folder (`project.json`, `refs/`, `generated/`).
-
-## Workflow
-
-1. **Extract** — the CLI agent reads your app and writes `.dreative/project.json` (wireframe per page, real labels, `source` pointers to owning files), then snapshots it: `dreative baseline`.
-2. **Tweak** — in the browser: drag blocks, add/remove/duplicate, attach reference images and prompts per page/block/element. Prompt-driven actions (propose layouts, block edits, design passes) are queued for your agent, which services them via `dreative wait` → `dreative respond`.
-3. **Finish** — click ✅ Finish; the agent receives only the diff vs the baseline (changed/moved/added/removed blocks + annotations) and applies it to the real codebase using the `source` pointers — token-efficient by construction.
-
-CLI: `dreative` / `dreative start` (server+UI) · `dreative install-skill` (copy skill into ./.claude/skills) · `dreative wait` (block for next UI event) · `dreative respond <id> [result.json|--error msg]` · `dreative baseline`.
-
-## Dev
-
-```sh
-npm run dev       # server on :4820 (tsx watch) + Vite UI on :5199 with proxy
-```
+# Dreative
+
+Visual round-trip UI editing **skill for coding CLIs** (Claude Code etc.). The CLI agent extracts your app's current UI page-by-page into editable wireframes; you tweak them in the browser (drag-drop, ref images, text prompts); clicking **Finish** hands a compact layout **diff** back to the agent, which rewrites your real code to match.
+
+Dreative itself has **no AI** — the web UI is a dumb visual editor plus a request queue. Your coding agent is the intelligence: it services UI prompts via `dreative wait` / `dreative respond` and applies the finish diff. See `skill/dreative/SKILL.md` for the agent workflow (install it into `.claude/skills/dreative/`).
+
+## Run
+
+```sh
+npm install
+npm run build
+npm link          # once — makes the `dreative` command available globally
+```
+
+Then in any project folder:
+
+```sh
+dreative          # starts the local server and opens http://localhost:4820
+```
+
+State lives in `.dreative/` in that folder (`project.json`, `refs/`, `generated/`).
+
+## Workflow
+
+1. **Extract** — the CLI agent reads your app and writes `.dreative/project.json` (wireframe per page, real labels, `source` pointers to owning files), then snapshots it: `dreative baseline`.
+2. **Tweak** — in the browser: drag blocks, add/remove/duplicate, attach reference images and prompts per page/block/element. Prompt-driven actions (propose layouts, block edits, design passes) are queued for your agent, which services them via `dreative wait` → `dreative respond`.
+3. **Finish** — click ✅ Finish; the agent receives only the diff vs the baseline (changed/moved/added/removed blocks + annotations) and applies it to the real codebase using the `source` pointers — token-efficient by construction.
+
+CLI: `dreative` / `dreative start` (server+UI) · `dreative install-skill` (copy skill into ./.claude/skills) · `dreative wait` (block for next UI event) · `dreative respond <id> [result.json|--error msg]` · `dreative baseline`.
+
+## Dev
+
+```sh
+npm run dev       # server on :4820 (tsx watch) + Vite UI on :5199 with proxy
+```

package/dist/cli/index.js

@@ -9,14 +9,14 @@ const port = Number(process.env.DREATIVE_PORT || 4820);
 const base = `http://localhost:${port}`;
 const args = process.argv.slice(2);
 const cmd = args[0] && !args[0].startsWith("-") ? args[0] : "start";
-const USAGE = `usage: dreative [command]
-  start            serve the visual editor for the current project (default)
-  install-skill    copy the dreative skill into ./.claude/skills/dreative/
-                   --list             show available specialist skills
-                   --skills a,b       install only these specialist skills (no flag: interactive picker, Enter = all)
-                   --codex            install for Codex CLI instead (.codex/skills/ + AGENTS.md pointer)
-  wait             (agent) block until the UI needs something; prints one JSON event
-  respond <id> [result.json | --error msg]   (agent) answer a request
+const USAGE = `usage: dreative [command]
+  start            serve the visual editor for the current project (default)
+  install-skill    copy the dreative skill into ./.claude/skills/dreative/
+                   --list             show available specialist skills
+                   --skills a,b       install only these specialist skills (no flag: interactive picker, Enter = all)
+                   --codex            install for Codex CLI instead (.codex/skills/ + AGENTS.md pointer)
+  wait             (agent) block until the UI needs something; prints one JSON event
+  respond <id> [result.json | --error msg]   (agent) answer a request
   baseline         (agent) snapshot project.json as the finish-diff baseline`;
 async function main() {
     if (args.includes("--help") || args.includes("-h")) {

package/dist/server/preview.js

@@ -7,11 +7,11 @@ const here = path.dirname(fileURLToPath(import.meta.url));
 const packageRoot = path.resolve(here, "..", "..");
 /** Bundle a generated page component + mount shim into one iframe-ready JS file. */
 export async function buildPreview(generatedFile) {
-    const entry = `
-    import React from "react";
-    import { createRoot } from "react-dom/client";
-    import Page from ${JSON.stringify(generatedFile.replace(/\\/g, "/"))};
-    createRoot(document.getElementById("root")).render(React.createElement(Page));
+    const entry = `
+    import React from "react";
+    import { createRoot } from "react-dom/client";
+    import Page from ${JSON.stringify(generatedFile.replace(/\\/g, "/"))};
+    createRoot(document.getElementById("root")).render(React.createElement(Page));
   `;
     const result = await esbuild.build({
         stdin: {
@@ -30,79 +30,79 @@ export async function buildPreview(generatedFile) {
     return result.outputFiles[0].text;
 }
 export function previewHtml(scriptUrl) {
-    return `<!doctype html>
-<html>
-<head>
-  <meta charset="utf-8" />
-  <script src="https://cdn.tailwindcss.com"></script>
-  <style>body{margin:0}</style>
-</head>
-<body>
-  <div id="root"></div>
-  <script>
-    document.addEventListener("click", (e) => {
-      const el = e.target.closest("[data-dreative-id]");
-      if (!el) return;
-      e.preventDefault();
-      parent.postMessage({ type: "dreative-select", id: el.getAttribute("data-dreative-id") }, "*");
-    }, true);
-    document.addEventListener("mouseover", (e) => {
-      document.querySelectorAll(".dreative-hover").forEach(n => n.classList.remove("dreative-hover"));
-      const el = e.target.closest("[data-dreative-id]");
-      if (el) el.classList.add("dreative-hover");
-    });
-  </script>
-  <style>.dreative-hover{outline:2px dashed #6366f1;outline-offset:-2px;cursor:pointer}</style>
-  <script src="${scriptUrl}"></script>
-</body>
+    return `<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <script src="https://cdn.tailwindcss.com"></script>
+  <style>body{margin:0}</style>
+</head>
+<body>
+  <div id="root"></div>
+  <script>
+    document.addEventListener("click", (e) => {
+      const el = e.target.closest("[data-dreative-id]");
+      if (!el) return;
+      e.preventDefault();
+      parent.postMessage({ type: "dreative-select", id: el.getAttribute("data-dreative-id") }, "*");
+    }, true);
+    document.addEventListener("mouseover", (e) => {
+      document.querySelectorAll(".dreative-hover").forEach(n => n.classList.remove("dreative-hover"));
+      const el = e.target.closest("[data-dreative-id]");
+      if (el) el.classList.add("dreative-hover");
+    });
+  </script>
+  <style>.dreative-hover{outline:2px dashed #6366f1;outline-offset:-2px;cursor:pointer}</style>
+  <script src="${scriptUrl}"></script>
+</body>
 </html>`;
 }
 /** Replica view: 1:1 stripped page. Interactions are inert; hover shows the
  *  agent-written summary of what each element does; click selects the block. */
 export function replicaHtml(scriptUrl, summaries) {
-    return `<!doctype html>
-<html>
-<head>
-  <meta charset="utf-8" />
-  <script src="https://cdn.tailwindcss.com"></script>
-  <style>body{margin:0}
-    .dreative-hover{outline:2px dashed #6366f1;outline-offset:-2px;cursor:pointer}
-    #dreative-tip{position:fixed;z-index:99999;max-width:340px;background:#16181f;color:#e8e8ea;border:1px solid #2c2f3a;border-radius:8px;padding:8px 10px;font:12px/1.45 ui-sans-serif,system-ui;pointer-events:none;display:none;box-shadow:0 8px 24px rgba(0,0,0,.4)}
-    #dreative-tip b{color:#a5b4fc}
-  </style>
-</head>
-<body>
-  <div id="root"></div>
-  <div id="dreative-tip"></div>
-  <script>
-    const SUMMARIES = ${JSON.stringify(summaries)};
-    // replica is a mockup: block navigation/submits, keep selection working
-    document.addEventListener("click", (e) => {
-      e.preventDefault();
-      const el = e.target.closest("[data-dreative-id]");
-      if (el) parent.postMessage({ type: "dreative-select-block", id: el.getAttribute("data-dreative-id") }, "*");
-    }, true);
-    document.addEventListener("submit", (e) => e.preventDefault(), true);
-    const tip = document.getElementById("dreative-tip");
-    document.addEventListener("mousemove", (e) => {
-      if (tip.style.display === "block") {
-        tip.style.left = Math.min(e.clientX + 14, innerWidth - 360) + "px";
-        tip.style.top = Math.min(e.clientY + 14, innerHeight - 80) + "px";
-      }
-    });
-    document.addEventListener("mouseover", (e) => {
-      document.querySelectorAll(".dreative-hover").forEach(n => n.classList.remove("dreative-hover"));
-      const el = e.target.closest("[data-dreative-id]");
-      if (!el) { tip.style.display = "none"; return; }
-      el.classList.add("dreative-hover");
-      const id = el.getAttribute("data-dreative-id");
-      const s = SUMMARIES[id];
-      if (s) { tip.innerHTML = "<b>" + id + "</b><br>" + s.replace(/</g, "&lt;"); tip.style.display = "block"; }
-      else tip.style.display = "none";
-    });
-  </script>
-  <script src="${scriptUrl}"></script>
-</body>
+    return `<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <script src="https://cdn.tailwindcss.com"></script>
+  <style>body{margin:0}
+    .dreative-hover{outline:2px dashed #6366f1;outline-offset:-2px;cursor:pointer}
+    #dreative-tip{position:fixed;z-index:99999;max-width:340px;background:#16181f;color:#e8e8ea;border:1px solid #2c2f3a;border-radius:8px;padding:8px 10px;font:12px/1.45 ui-sans-serif,system-ui;pointer-events:none;display:none;box-shadow:0 8px 24px rgba(0,0,0,.4)}
+    #dreative-tip b{color:#a5b4fc}
+  </style>
+</head>
+<body>
+  <div id="root"></div>
+  <div id="dreative-tip"></div>
+  <script>
+    const SUMMARIES = ${JSON.stringify(summaries)};
+    // replica is a mockup: block navigation/submits, keep selection working
+    document.addEventListener("click", (e) => {
+      e.preventDefault();
+      const el = e.target.closest("[data-dreative-id]");
+      if (el) parent.postMessage({ type: "dreative-select-block", id: el.getAttribute("data-dreative-id") }, "*");
+    }, true);
+    document.addEventListener("submit", (e) => e.preventDefault(), true);
+    const tip = document.getElementById("dreative-tip");
+    document.addEventListener("mousemove", (e) => {
+      if (tip.style.display === "block") {
+        tip.style.left = Math.min(e.clientX + 14, innerWidth - 360) + "px";
+        tip.style.top = Math.min(e.clientY + 14, innerHeight - 80) + "px";
+      }
+    });
+    document.addEventListener("mouseover", (e) => {
+      document.querySelectorAll(".dreative-hover").forEach(n => n.classList.remove("dreative-hover"));
+      const el = e.target.closest("[data-dreative-id]");
+      if (!el) { tip.style.display = "none"; return; }
+      el.classList.add("dreative-hover");
+      const id = el.getAttribute("data-dreative-id");
+      const s = SUMMARIES[id];
+      if (s) { tip.innerHTML = "<b>" + id + "</b><br>" + s.replace(/</g, "&lt;"); tip.style.display = "block"; }
+      else tip.style.display = "none";
+    });
+  </script>
+  <script src="${scriptUrl}"></script>
+</body>
 </html>`;
 }
 export function ensureDir(p) {

package/dist/shared/design.js

@@ -4,6 +4,9 @@ const SKILL_SIGNATURES = {
     "3d": /\b(3d|three\.?js|webgl|r3f|shader|glsl|particles?|point ?cloud|globe|mesh gradient|orbit|spline)\b/i,
     motion: /\b(animat|motion|parallax|scroll[- ]?(driven|trigger|story|choreo)|gsap|framer|lenis|marquee|kinetic|cinematic|stagger|reveal|transition)\b/i,
     interaction: /\b(micro[- ]?interaction|hover (effect|state)s?|cursor|magnetic|tilt|spotlight|glow|ripple|tactile|interactive|draggable)\b/i,
+    immersive: /\b(immersive|award[- ]?(site|winning)|awwwards|spatial( (transition|nav(igation)?))?|scene[- ]?based|world|page[- ]transitions?|camera (move|travel|path)|preloader|scroll (journey|story|as travel)|explorable|experience site|epic\.net)\b/i,
+    cinematic: /\b(cinematic|experiential|unseen\.co|fluid (sim(ulation)?|distortion)|gpgpu|drag[- ]to[- ]explore|click ?(&|and) ?hold|film grain|graded|velocity[- ]reactive|sound design|ambient (audio|sound))\b/i,
+    refined: /\b(clean (and )?(modern|professional)|modern clean|business (site|website|use)|corporate|professional look|premium (minimal|clean)|dtc|d2c|e[- ]?commerce|ecommerce|shopify|maswitzerland|lovvelavva|not (too )?(flashy|animated)|calm|understated)\b/i,
 };
 function detectSkills(texts) {
     const hay = texts.filter(Boolean).join(" \n ");

package/dist/ui/index.html

@@ -1,13 +1,13 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Dreative</title>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dreative</title>
     <script type="module" crossorigin src="/assets/index--vztc_MR.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-y0gVjC7u.css">
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/package.json

@@ -1,44 +1,44 @@
-{
-  "name": "dreative",
-  "version": "0.1.0",
-  "description": "Layout-first visual editor skill for coding CLIs: extract your app's UI into editable wireframes, tweak with drag-drop + ref images, then the agent applies the diff back to your code.",
-  "type": "module",
-  "bin": {
-    "dreative": "dist/cli/index.js"
-  },
-  "files": [
-    "dist",
-    "skill"
-  ],
-  "scripts": {
-    "build": "npm run build:server && npm run build:ui",
-    "prepublishOnly": "npm run build",
-    "build:server": "tsc -p tsconfig.json",
-    "build:ui": "vite build",
-    "dev": "concurrently \"tsx watch src/cli/index.ts --no-open\" \"vite\"",
-    "start": "node dist/cli/index.js"
-  },
-  "dependencies": {
-    "esbuild": "^0.24.0",
-    "express": "^4.21.0",
-    "open": "^10.1.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
-  },
-  "devDependencies": {
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
-    "@types/express": "^4.17.21",
-    "@types/node": "^22.0.0",
-    "@types/react": "^18.3.0",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.0",
-    "@xyflow/react": "^12.3.0",
-    "concurrently": "^9.0.0",
-    "tsx": "^4.19.0",
-    "typescript": "^5.6.0",
-    "vite": "^5.4.0",
-    "zustand": "^5.0.0"
-  }
-}
+{
+  "name": "dreative",
+  "version": "0.3.0",
+  "description": "Layout-first visual editor skill for coding CLIs: extract your app's UI into editable wireframes, tweak with drag-drop + ref images, then the agent applies the diff back to your code.",
+  "type": "module",
+  "bin": {
+    "dreative": "dist/cli/index.js"
+  },
+  "files": [
+    "dist",
+    "skill"
+  ],
+  "scripts": {
+    "build": "npm run build:server && npm run build:ui",
+    "prepublishOnly": "npm run build",
+    "build:server": "tsc -p tsconfig.json",
+    "build:ui": "vite build",
+    "dev": "concurrently \"tsx watch src/cli/index.ts --no-open\" \"vite\"",
+    "start": "node dist/cli/index.js"
+  },
+  "dependencies": {
+    "esbuild": "^0.24.0",
+    "express": "^4.21.0",
+    "open": "^10.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@types/express": "^4.17.21",
+    "@types/node": "^22.0.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "@xyflow/react": "^12.3.0",
+    "concurrently": "^9.0.0",
+    "tsx": "^4.19.0",
+    "typescript": "^5.6.0",
+    "vite": "^5.4.0",
+    "zustand": "^5.0.0"
+  }
+}