dreative 0.1.0

package/dist/server/index.js

@@ -0,0 +1,328 @@
+import express from "express";
+import path from "node:path";
+import fs from "node:fs";
+import { fileURLToPath } from "node:url";
+import { Store, findBlock, replaceBlock, newId } from "./store.js";
+import { requestAgent, respond, nextEvent, pushFinish } from "./agentQueue.js";
+import { computeDiff } from "./diff.js";
+import { buildPreview, previewHtml, replicaHtml } from "./preview.js";
+import { buildDesignPlan } from "../shared/design.js";
+import { startJob, getJob } from "./jobs.js";
+const here = path.dirname(fileURLToPath(import.meta.url));
+function cloneWithNewIds(block) {
+    return {
+        ...block,
+        id: newId("blk"),
+        children: block.children?.map(cloneWithNewIds),
+    };
+}
+export function createServer(projectDir) {
+    const store = new Store(projectDir);
+    const app = express();
+    app.use(express.json({ limit: "30mb" }));
+    app.get("/api/project", (_req, res) => {
+        res.json(store.load());
+    });
+    app.put("/api/project", (req, res) => {
+        store.save(req.body);
+        res.json({ ok: true });
+    });
+    app.get("/api/jobs/:id", (req, res) => {
+        const job = getJob(req.params.id);
+        if (!job)
+            return res.status(404).json({ error: "job not found" });
+        res.json(job);
+    });
+    // ---- Host-agent bridge -------------------------------------------------
+    // The coding CLI (dreative skill) long-polls for work and posts results.
+    app.get("/api/agent/next", async (_req, res) => {
+        const ev = await nextEvent(25_000);
+        if (!ev)
+            return res.status(204).end();
+        res.json(ev);
+    });
+    app.post("/api/agent/respond", (req, res) => {
+        const { id, result, error } = req.body;
+        if (!respond(id, { result, error }))
+            return res.status(404).json({ error: "request not found" });
+        res.json({ ok: true });
+    });
+    // Snapshot current project as diff baseline (agent calls this after extraction)
+    app.post("/api/baseline", (_req, res) => {
+        store.saveBaseline();
+        res.json({ ok: true });
+    });
+    // Finish: compute layout diff vs baseline and hand it to the agent
+    app.post("/api/finish", (_req, res) => {
+        const baseline = store.loadBaseline() ?? { version: 1, pages: [] };
+        const diff = computeDiff(baseline, store.load());
+        fs.writeFileSync(path.join(store.root, "finish.json"), JSON.stringify(diff, null, 2));
+        pushFinish(diff);
+        res.json({ ok: true, diff });
+    });
+    // Stage 1: prompt -> AI proposes skeleton pages placed on the canvas
+    app.post("/api/skeletons", (req, res) => {
+        const { prompt } = req.body;
+        const job = startJob("Proposing layouts", async (update) => {
+            const proposals = await requestAgent("propose-skeletons", { prompt, brief: store.load().brief }, update);
+            return store.update((p) => {
+                const baseX = Math.max(0, ...p.pages.map((pg) => pg.canvasPos.x + 480));
+                proposals.forEach((prop, i) => {
+                    p.pages.push({
+                        id: newId("pg"),
+                        name: prop.name,
+                        canvasPos: { x: baseX + i * 480, y: 40 },
+                        status: "skeleton",
+                        layout: prop.layout,
+                    });
+                });
+            });
+        });
+        res.json({ jobId: job.id });
+    });
+    // AI variants of an existing page
+    app.post("/api/pages/:pageId/variants", (req, res) => {
+        const page = store.getPage(req.params.pageId);
+        if (!page)
+            return res.status(404).json({ error: "page not found" });
+        const job = startJob(`Variants of ${page.name}`, async (update) => {
+            const proposals = await requestAgent("propose-variants", { pageName: page.name, layout: page.layout, brief: store.load().brief }, update);
+            return store.update((p) => {
+                proposals.forEach((prop, i) => {
+                    p.pages.push({
+                        id: newId("pg"),
+                        name: prop.name,
+                        canvasPos: { x: page.canvasPos.x + (i + 1) * 480, y: page.canvasPos.y + 60 },
+                        status: "skeleton",
+                        layout: prop.layout,
+                    });
+                });
+            });
+        });
+        res.json({ jobId: job.id });
+    });
+    // Duplicate a page (fresh block ids, no generated design)
+    app.post("/api/pages/:pageId/duplicate", (req, res) => {
+        const page = store.getPage(req.params.pageId);
+        if (!page)
+            return res.status(404).json({ error: "page not found" });
+        const project = store.update((p) => {
+            p.pages.push({
+                id: newId("pg"),
+                name: `${page.name} copy`,
+                canvasPos: { x: page.canvasPos.x + 60, y: page.canvasPos.y + 60 },
+                status: "skeleton",
+                refImage: page.refImage,
+                designPrompt: page.designPrompt,
+                layout: cloneWithNewIds(page.layout),
+            });
+        });
+        res.json(project);
+    });
+    // Stage 2: AI edit of a selected block (structure + functionality intents)
+    app.post("/api/pages/:pageId/blocks/:blockId/edit", (req, res) => {
+        const { pageId, blockId } = req.params;
+        const { instruction } = req.body;
+        const page = store.getPage(pageId);
+        if (!page)
+            return res.status(404).json({ error: "page not found" });
+        const block = findBlock(page.layout, blockId);
+        if (!block)
+            return res.status(404).json({ error: "block not found" });
+        const job = startJob("Editing block", async (update) => {
+            const updated = await requestAgent("edit-block", { block, instruction }, update);
+            return store.update((p) => {
+                const pg = p.pages.find((x) => x.id === pageId);
+                pg.layout = replaceBlock(pg.layout, blockId, updated);
+                if (pg.status === "designed")
+                    pg.status = "skeleton"; // design is stale
+            });
+        });
+        res.json({ jobId: job.id });
+    });
+    // Block-level (or preview-element) ref image upload. Element ids in designed
+    // pages are block ids, so this covers both. Returns the stored path.
+    app.post("/api/pages/:pageId/blocks/:blockId/ref", (req, res) => {
+        const { pageId, blockId } = req.params;
+        const { name, dataBase64 } = req.body;
+        const ext = path.extname(name) || ".png";
+        const fileName = `${pageId}_${blockId}${ext}`;
+        fs.writeFileSync(store.refPath(fileName), Buffer.from(dataBase64, "base64"));
+        const rel = `refs/${fileName}`;
+        const project = store.update((p) => {
+            const pg = p.pages.find((x) => x.id === pageId);
+            const block = pg && findBlock(pg.layout, blockId);
+            if (block)
+                block.refImage = rel;
+        });
+        res.json({ ...project, refPath: rel });
+    });
+    // Ref image upload (JSON base64 keeps the client simple)
+    app.post("/api/pages/:pageId/ref", (req, res) => {
+        const { pageId } = req.params;
+        const { name, dataBase64 } = req.body;
+        const ext = path.extname(name) || ".png";
+        const fileName = `${pageId}${ext}`;
+        fs.writeFileSync(store.refPath(fileName), Buffer.from(dataBase64, "base64"));
+        const project = store.update((p) => {
+            const pg = p.pages.find((x) => x.id === pageId);
+            if (pg)
+                pg.refImage = `refs/${fileName}`;
+        });
+        res.json(project);
+    });
+    // Design one page via the agent bridge; shared by single-page design and design-all.
+    // Paths only (relative to .dreative/) — the agent reads images/previous
+    // code with its own tools and writes the .tsx file itself.
+    async function designPage(pageId, designPrompt, update) {
+        const project = store.load();
+        const page = project.pages.find((p) => p.id === pageId);
+        if (!page)
+            throw new Error("page not found");
+        const siblingPages = project.pages.filter((p) => p.id !== pageId).map((p) => p.name);
+        const blockRefs = [];
+        const collect = (b) => {
+            if (b.refImage)
+                blockRefs.push({ id: b.id, label: b.label, refImage: b.refImage });
+            b.children?.forEach(collect);
+        };
+        collect(page.layout);
+        const outFile = `generated/${pageId}.tsx`;
+        await requestAgent("design-page", {
+            pageName: page.name,
+            layout: page.layout,
+            brief: project.brief,
+            // Dreative decides, the agent executes: resolved dials, per-section
+            // layout families, spacing/motion budgets, doctrine lints.
+            plan: buildDesignPlan(page, project.brief),
+            refImage: page.refImage,
+            blockRefs,
+            designPrompt: designPrompt ?? page.designPrompt,
+            previousFile: page.generatedFile,
+            siblingPages,
+            outFile,
+        }, update);
+        if (!fs.existsSync(path.join(store.root, outFile)))
+            throw new Error(`agent did not write ${outFile}`);
+        return store.update((p) => {
+            const pg = p.pages.find((x) => x.id === pageId);
+            pg.status = "designed";
+            pg.generatedFile = outFile;
+            pg.designPrompt = designPrompt ?? pg.designPrompt;
+        });
+    }
+    // Stage 3: design pass (preserves prior element-level edits when regenerating)
+    app.post("/api/pages/:pageId/design", (req, res) => {
+        const { pageId } = req.params;
+        const { designPrompt } = req.body;
+        const page = store.getPage(pageId);
+        if (!page)
+            return res.status(404).json({ error: "page not found" });
+        const job = startJob(`Designing ${page.name}`, (update) => designPage(pageId, designPrompt, update));
+        res.json({ jobId: job.id });
+    });
+    // Design every page in one job (skips none — regenerates designed pages too if asked)
+    app.post("/api/design-all", (req, res) => {
+        const { onlySkeletons } = req.body;
+        const pages = store.load().pages.filter((p) => !onlySkeletons || p.status === "skeleton");
+        if (pages.length === 0)
+            return res.status(400).json({ error: "no pages to design" });
+        const job = startJob(`Designing ${pages.length} page(s)`, async (update) => {
+            let project;
+            for (let i = 0; i < pages.length; i++) {
+                const scoped = (d) => update(`${pages[i].name} (${i + 1}/${pages.length}): ${d}`);
+                project = await designPage(pages[i].id, undefined, scoped);
+            }
+            return project;
+        });
+        res.json({ jobId: job.id });
+    });
+    // Preview-mode element edit
+    app.post("/api/pages/:pageId/element/:elementId/edit", (req, res) => {
+        const { pageId, elementId } = req.params;
+        const { instruction, refPath } = req.body;
+        const page = store.getPage(pageId);
+        if (!page?.generatedFile)
+            return res.status(404).json({ error: "page not designed yet" });
+        const job = startJob("Editing element", async (update) => {
+            await requestAgent("edit-element", { file: page.generatedFile, elementId, instruction, refImage: refPath }, update);
+            return store.load();
+        });
+        res.json({ jobId: job.id });
+    });
+    // Export generated pages into the user's project
+    app.post("/api/export", (req, res) => {
+        const { dir } = req.body;
+        const target = path.resolve(projectDir, dir || "src/pages");
+        fs.mkdirSync(target, { recursive: true });
+        const exported = [];
+        for (const page of store.load().pages) {
+            if (!page.generatedFile)
+                continue;
+            const safe = page.name.replace(/[^a-zA-Z0-9]/g, "") || page.id;
+            const dest = path.join(target, `${safe}.tsx`);
+            const code = fs.readFileSync(path.join(store.root, page.generatedFile), "utf-8");
+            fs.writeFileSync(dest, `// Generated by Dreative. Requires Tailwind CSS in the host project.\n${code}`);
+            exported.push(dest);
+        }
+        res.json({ exported });
+    });
+    // Preview serving
+    app.get("/preview/:pageId", (req, res) => {
+        res.type("html").send(previewHtml(`/preview/${req.params.pageId}/bundle.js?t=${Date.now()}`));
+    });
+    app.get("/preview/:pageId/bundle.js", async (req, res) => {
+        try {
+            const page = store.getPage(req.params.pageId);
+            if (!page?.generatedFile)
+                return res.status(404).send("// not designed yet");
+            const js = await buildPreview(path.join(store.root, page.generatedFile));
+            res.type("application/javascript").send(js);
+        }
+        catch (err) {
+            const msg = JSON.stringify(`Preview build error:\n${String(err)}`);
+            res
+                .type("application/javascript")
+                .send(`const pre=document.createElement("pre");pre.style.cssText="color:red;padding:16px;white-space:pre-wrap";pre.textContent=${msg};document.body.appendChild(pre);`);
+            console.error("preview build failed:", err);
+        }
+    });
+    // Replica serving: stripped 1:1 copy of the real page, hover = agent summaries
+    app.get("/replica/:pageId", (req, res) => {
+        const page = store.getPage(req.params.pageId);
+        if (!page?.replicaFile)
+            return res.status(404).send("no replica for this page");
+        const summaries = {};
+        const collect = (b) => {
+            if (b.summary)
+                summaries[b.id] = b.summary;
+            b.children?.forEach(collect);
+        };
+        collect(page.layout);
+        res.type("html").send(replicaHtml(`/replica/${req.params.pageId}/bundle.js?t=${Date.now()}`, summaries));
+    });
+    app.get("/replica/:pageId/bundle.js", async (req, res) => {
+        try {
+            const page = store.getPage(req.params.pageId);
+            if (!page?.replicaFile)
+                return res.status(404).send("// no replica");
+            const js = await buildPreview(path.join(store.root, page.replicaFile));
+            res.type("application/javascript").send(js);
+        }
+        catch (err) {
+            const msg = JSON.stringify(`Replica build error:\n${String(err)}`);
+            res
+                .type("application/javascript")
+                .send(`const pre=document.createElement("pre");pre.style.cssText="color:red;padding:16px;white-space:pre-wrap";pre.textContent=${msg};document.body.appendChild(pre);`);
+            console.error("replica build failed:", err);
+        }
+    });
+    app.use("/refs", express.static(path.join(store.root, "refs")));
+    // Built UI (production / npx usage)
+    const uiDist = path.join(here, "..", "ui");
+    if (fs.existsSync(uiDist)) {
+        app.use(express.static(uiDist));
+        app.get("*", (_req, res) => res.sendFile(path.join(uiDist, "index.html")));
+    }
+    return app;
+}

package/dist/server/jobs.js

@@ -0,0 +1,31 @@
+import { newId } from "./store.js";
+const jobs = new Map();
+export function startJob(label, work) {
+    const job = {
+        id: newId("job"),
+        label,
+        detail: "Starting…",
+        status: "running",
+        startedAt: Date.now(),
+    };
+    jobs.set(job.id, job);
+    void work((detail) => {
+        job.detail = detail;
+    })
+        .then((result) => {
+        job.status = "done";
+        job.result = result;
+        job.finishedAt = Date.now();
+    })
+        .catch((err) => {
+        job.status = "error";
+        job.error = String(err);
+        job.finishedAt = Date.now();
+    });
+    // drop finished jobs after 10 minutes
+    setTimeout(() => jobs.delete(job.id), 10 * 60 * 1000).unref?.();
+    return job;
+}
+export function getJob(id) {
+    return jobs.get(id);
+}

package/dist/server/preview.js

@@ -0,0 +1,110 @@
+import esbuild from "esbuild";
+import path from "node:path";
+import fs from "node:fs";
+import { fileURLToPath } from "node:url";
+const here = path.dirname(fileURLToPath(import.meta.url));
+// Resolve react from dreative's own install, not the user's project.
+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 result = await esbuild.build({
+        stdin: {
+            contents: entry,
+            resolveDir: packageRoot,
+            loader: "tsx",
+        },
+        bundle: true,
+        write: false,
+        format: "iife",
+        jsx: "automatic",
+        define: { "process.env.NODE_ENV": '"production"' },
+        loader: { ".tsx": "tsx", ".ts": "ts" },
+        nodePaths: [path.join(packageRoot, "node_modules")],
+    });
+    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>
+</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>
+</html>`;
+}
+export function ensureDir(p) {
+    fs.mkdirSync(p, { recursive: true });
+}

package/dist/server/store.js

@@ -0,0 +1,71 @@
+import fs from "node:fs";
+import path from "node:path";
+export class Store {
+    root;
+    constructor(projectDir) {
+        this.root = path.join(projectDir, ".dreative");
+        fs.mkdirSync(path.join(this.root, "refs"), { recursive: true });
+        fs.mkdirSync(path.join(this.root, "generated"), { recursive: true });
+    }
+    get file() {
+        return path.join(this.root, "project.json");
+    }
+    load() {
+        if (!fs.existsSync(this.file))
+            return { version: 1, pages: [] };
+        return JSON.parse(fs.readFileSync(this.file, "utf-8"));
+    }
+    save(project) {
+        fs.writeFileSync(this.file, JSON.stringify(project, null, 2));
+    }
+    update(fn) {
+        const project = this.load();
+        fn(project);
+        this.save(project);
+        return project;
+    }
+    get baselineFile() {
+        return path.join(this.root, "baseline.json");
+    }
+    /** Snapshot the current project as the diff baseline (taken after extraction). */
+    saveBaseline() {
+        fs.writeFileSync(this.baselineFile, JSON.stringify(this.load(), null, 2));
+    }
+    loadBaseline() {
+        if (!fs.existsSync(this.baselineFile))
+            return undefined;
+        return JSON.parse(fs.readFileSync(this.baselineFile, "utf-8"));
+    }
+    getPage(pageId) {
+        return this.load().pages.find((p) => p.id === pageId);
+    }
+    refPath(fileName) {
+        return path.join(this.root, "refs", fileName);
+    }
+    generatedPath(fileName) {
+        return path.join(this.root, "generated", fileName);
+    }
+}
+export function findBlock(root, id) {
+    if (root.id === id)
+        return root;
+    for (const child of root.children ?? []) {
+        const found = findBlock(child, id);
+        if (found)
+            return found;
+    }
+    return undefined;
+}
+export function replaceBlock(root, id, replacement) {
+    if (root.id === id)
+        return replacement;
+    return {
+        ...root,
+        children: root.children?.map((c) => replaceBlock(c, id, replacement)),
+    };
+}
+let counter = 0;
+export function newId(prefix) {
+    counter += 1;
+    return `${prefix}_${Date.now().toString(36)}${counter}`;
+}