pixl-mcp 0.1.0

package/dist/preview-server/index.js

@@ -0,0 +1,143 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { createServer as createViteServer } from "vite";
+import react from "@vitejs/plugin-react";
+import { WebSocketServer, WebSocket } from "ws";
+import { FlowSchema } from "../workspace/schemas.js";
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+// dist/preview-server -> package root -> preview-app
+const PREVIEW_APP_ROOT = path.resolve(__dirname, "../../preview-app");
+/**
+ * Boots the Vite dev server that hosts the React preview app, wires a WS
+ * channel the app subscribes to for live-reload, and exposes a tiny workspace
+ * API (screens, flow read/write) the app fetches from.
+ */
+export async function startPreviewServer(workspace, port) {
+    const vite = await createViteServer({
+        root: PREVIEW_APP_ROOT,
+        configFile: false,
+        plugins: [react()],
+        server: {
+            port,
+            strictPort: false,
+            // In Docker, PIXL_HOST=0.0.0.0 makes the forwarded port reachable from the
+            // host. Left unset for normal local use so the preview stays on localhost.
+            host: process.env.PIXL_HOST || undefined,
+            // Allow the forwarded hostname (localhost) through Vite's host check.
+            allowedHosts: process.env.PIXL_HOST ? true : undefined,
+        },
+        clearScreen: false,
+        logLevel: "warn",
+    });
+    attachWorkspaceApi(vite, workspace);
+    await vite.listen();
+    const address = vite.httpServer.address();
+    const resolvedPort = typeof address === "object" && address ? address.port : port;
+    const url = `http://localhost:${resolvedPort}`;
+    // Reload channel. Use noServer + manual upgrade routing so we only claim
+    // /pixl-ws upgrades and leave every other upgrade (crucially Vite's own HMR
+    // websocket) untouched. Attaching with { server } would make ws destroy all
+    // non-matching upgrade sockets, killing Vite HMR and triggering a reload loop.
+    const wss = new WebSocketServer({ noServer: true });
+    const httpServer = vite.httpServer;
+    httpServer.on("upgrade", (req, socket, head) => {
+        let pathname = "";
+        try {
+            pathname = new URL(req.url ?? "", "http://localhost").pathname;
+        }
+        catch {
+            return;
+        }
+        if (pathname === "/pixl-ws") {
+            wss.handleUpgrade(req, socket, head, (ws) => wss.emit("connection", ws, req));
+        }
+        // Any other path (e.g. Vite HMR) is left for Vite's own upgrade handler.
+    });
+    const broadcast = () => {
+        for (const client of wss.clients) {
+            if (client.readyState === WebSocket.OPEN)
+                client.send(JSON.stringify({ type: "reload" }));
+        }
+    };
+    workspace.on("change", broadcast);
+    return {
+        url,
+        close: async () => {
+            workspace.off("change", broadcast);
+            wss.close();
+            await vite.close();
+        },
+    };
+}
+/** Read-body helper for the small JSON API. */
+function readBody(req) {
+    return new Promise((resolve, reject) => {
+        let data = "";
+        req.on("data", (c) => (data += c));
+        req.on("end", () => resolve(data));
+        req.on("error", reject);
+    });
+}
+function json(res, status, body) {
+    res.writeHead(status, { "Content-Type": "application/json" });
+    res.end(JSON.stringify(body));
+}
+/**
+ * Connect middleware on the Vite server: everything under /api/* is handled
+ * here; anything else falls through to Vite (serving the React app).
+ */
+function attachWorkspaceApi(vite, workspace) {
+    const handler = async (req, res, next) => {
+        const url = req.url ?? "";
+        if (!url.startsWith("/api/"))
+            return next();
+        try {
+            // GET /api/status
+            if (req.method === "GET" && url === "/api/status") {
+                return json(res, 200, await workspace.status(null));
+            }
+            // GET /api/tokens
+            if (req.method === "GET" && url === "/api/tokens") {
+                return json(res, 200, await workspace.readTokens());
+            }
+            // GET /api/screens -> index + inline html for each
+            if (req.method === "GET" && url === "/api/screens") {
+                const index = await workspace.readScreenIndex();
+                const screens = await Promise.all(index.screens.map(async (s) => ({
+                    ...s,
+                    html: await readScreenHtml(workspace, s.id),
+                })));
+                return json(res, 200, { screens });
+            }
+            // GET /api/flow
+            if (req.method === "GET" && url === "/api/flow") {
+                return json(res, 200, await workspace.readFlow());
+            }
+            // POST /api/flow -> persist canvas edits (drag/labels)
+            if (req.method === "POST" && url === "/api/flow") {
+                const parsed = FlowSchema.parse(JSON.parse(await readBody(req)));
+                await workspace.writeFlow(parsed);
+                return json(res, 200, { ok: true });
+            }
+            return json(res, 404, { error: "not found" });
+        }
+        catch (err) {
+            return json(res, 400, { error: err.message });
+        }
+    };
+    // Prepend so /api/* is handled before Vite's SPA/html catch-all middleware.
+    vite.middlewares.stack.unshift({
+        route: "",
+        handle: handler,
+    });
+}
+async function readScreenHtml(workspace, id) {
+    const { promises: fs } = await import("node:fs");
+    try {
+        return await fs.readFile(workspace.screenHtmlPath(id), "utf8");
+    }
+    catch {
+        return "";
+    }
+}
+//# sourceMappingURL=index.js.map

package/dist/preview-server/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/preview-server/index.ts"],"names":[],"mappings":"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"}

package/dist/screens.js

@@ -0,0 +1,52 @@
+import { ScreenSchema } from "./workspace/schemas.js";
+import { lintScreen } from "./linter/index.js";
+function requireTokens(tokens) {
+    if (!tokens) {
+        throw new Error("No design system set. Call pixl_set_design_system before writing screens.");
+    }
+    return tokens;
+}
+/**
+ * Lint HTML against the active token contract without persisting. Used by
+ * pixl_lint_screen and internally by pixl_write_screen.
+ */
+export async function lintScreenHtml(workspace, html) {
+    const tokens = requireTokens(await workspace.readTokens());
+    return lintScreen(html, tokens);
+}
+/**
+ * Validate + lint a screen, then persist it only if it passes. On failure the
+ * violations are returned so the model can fix and resubmit — the screen is not
+ * written, so the gallery never shows off-standard output.
+ */
+export async function writeScreen(workspace, input) {
+    const tokens = requireTokens(await workspace.readTokens());
+    const screen = ScreenSchema.parse({
+        id: input.id,
+        name: input.name,
+        description: input.description,
+    });
+    const lint = lintScreen(input.html, tokens);
+    if (!lint.ok) {
+        return {
+            ok: false,
+            accepted: false,
+            screenId: screen.id,
+            errorCount: lint.errorCount,
+            warnCount: lint.warnCount,
+            violations: lint.violations,
+            next: "Fix the errors above and resubmit pixl_write_screen. The screen was NOT saved.",
+        };
+    }
+    await workspace.writeScreen(screen, input.html);
+    return {
+        ok: true,
+        accepted: true,
+        screenId: screen.id,
+        warnCount: lint.warnCount,
+        violations: lint.violations, // warnings only at this point
+        wrote: [`screens/${screen.id}.html`, "screens.json"],
+        next: "Screen saved and rendering in the gallery. Continue with the next screen or set the flow.",
+    };
+}
+//# sourceMappingURL=screens.js.map

package/dist/screens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"screens.js","sourceRoot":"","sources":["../src/screens.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAe,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,UAAU,EAAmB,MAAM,mBAAmB,CAAC;AAShE,SAAS,aAAa,CAAC,MAAe;IACpC,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,MAAM,IAAI,KAAK,CAAC,2EAA2E,CAAC,CAAC;IAC/F,CAAC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,KAAK,UAAU,cAAc,CAAC,SAAoB,EAAE,IAAY;IACrE,MAAM,MAAM,GAAG,aAAa,CAAC,MAAM,SAAS,CAAC,UAAU,EAAE,CAAC,CAAC;IAC3D,OAAO,UAAU,CAAC,IAAI,EAAE,MAAe,CAAC,CAAC;AAC3C,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,KAAK,UAAU,WAAW,CAAC,SAAoB,EAAE,KAAuB;IAC7E,MAAM,MAAM,GAAG,aAAa,CAAC,MAAM,SAAS,CAAC,UAAU,EAAE,CAAC,CAAC;IAC3D,MAAM,MAAM,GAAW,YAAY,CAAC,KAAK,CAAC;QACxC,EAAE,EAAE,KAAK,CAAC,EAAE;QACZ,IAAI,EAAE,KAAK,CAAC,IAAI;QAChB,WAAW,EAAE,KAAK,CAAC,WAAW;KAC/B,CAAC,CAAC;IAEH,MAAM,IAAI,GAAG,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,MAAe,CAAC,CAAC;IACrD,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;QACb,OAAO;YACL,EAAE,EAAE,KAAK;YACT,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,MAAM,CAAC,EAAE;YACnB,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,IAAI,EAAE,gFAAgF;SACvF,CAAC;IACJ,CAAC;IAED,MAAM,SAAS,CAAC,WAAW,CAAC,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IAChD,OAAO;QACL,EAAE,EAAE,IAAI;QACR,QAAQ,EAAE,IAAI;QACd,QAAQ,EAAE,MAAM,CAAC,EAAE;QACnB,SAAS,EAAE,IAAI,CAAC,SAAS;QACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,8BAA8B;QAC3D,KAAK,EAAE,CAAC,WAAW,MAAM,CAAC,EAAE,OAAO,EAAE,cAAc,CAAC;QACpD,IAAI,EAAE,2FAA2F;KAClG,CAAC;AACJ,CAAC"}

package/dist/session.js

@@ -0,0 +1,50 @@
+import { spawn } from "node:child_process";
+import { Workspace } from "./workspace/index.js";
+import { startPreviewServer } from "./preview-server/index.js";
+const DEFAULT_PORT = 4321;
+/**
+ * Process-wide singleton tying together the workspace and the preview server.
+ * The MCP tools operate against this; it stays alive for the life of the
+ * `pixl` process so the browser preview persists across tool calls.
+ */
+export class PixlSession {
+    workspace;
+    preview = null;
+    constructor(projectRoot = process.cwd()) {
+        this.workspace = new Workspace(projectRoot);
+    }
+    get previewUrl() {
+        return this.preview?.url ?? null;
+    }
+    /** Create the workspace on disk and boot the preview server (idempotent). */
+    async ensureStarted(openBrowser) {
+        await this.workspace.init();
+        this.workspace.startWatching();
+        if (!this.preview) {
+            this.preview = await startPreviewServer(this.workspace, DEFAULT_PORT);
+            if (openBrowser)
+                openUrl(this.preview.url);
+        }
+        return this.preview.url;
+    }
+    async shutdown() {
+        await this.preview?.close();
+        this.preview = null;
+        await this.workspace.stopWatching();
+    }
+}
+function openUrl(url) {
+    const cmd = process.platform === "darwin"
+        ? "open"
+        : process.platform === "win32"
+            ? "cmd"
+            : "xdg-open";
+    const args = process.platform === "win32" ? ["/c", "start", "", url] : [url];
+    try {
+        spawn(cmd, args, { stdio: "ignore", detached: true }).unref();
+    }
+    catch {
+        // best effort — the URL is also returned to the model to relay
+    }
+}
+//# sourceMappingURL=session.js.map

package/dist/session.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"session.js","sourceRoot":"","sources":["../src/session.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,kBAAkB,EAAsB,MAAM,2BAA2B,CAAC;AAEnF,MAAM,YAAY,GAAG,IAAI,CAAC;AAE1B;;;;GAIG;AACH,MAAM,OAAO,WAAW;IACb,SAAS,CAAY;IACtB,OAAO,GAAyB,IAAI,CAAC;IAE7C,YAAY,cAAsB,OAAO,CAAC,GAAG,EAAE;QAC7C,IAAI,CAAC,SAAS,GAAG,IAAI,SAAS,CAAC,WAAW,CAAC,CAAC;IAC9C,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,IAAI,CAAC;IACnC,CAAC;IAED,6EAA6E;IAC7E,KAAK,CAAC,aAAa,CAAC,WAAoB;QACtC,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;QAC5B,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,CAAC;QAC/B,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,IAAI,CAAC,OAAO,GAAG,MAAM,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;YACtE,IAAI,WAAW;gBAAE,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;QAC7C,CAAC;QACD,OAAO,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC;IAC1B,CAAC;IAED,KAAK,CAAC,QAAQ;QACZ,MAAM,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QAC5B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,MAAM,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC;IACtC,CAAC;CACF;AAED,SAAS,OAAO,CAAC,GAAW;IAC1B,MAAM,GAAG,GACP,OAAO,CAAC,QAAQ,KAAK,QAAQ;QAC3B,CAAC,CAAC,MAAM;QACR,CAAC,CAAC,OAAO,CAAC,QAAQ,KAAK,OAAO;YAC5B,CAAC,CAAC,KAAK;YACP,CAAC,CAAC,UAAU,CAAC;IACnB,MAAM,IAAI,GAAG,OAAO,CAAC,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;IAC7E,IAAI,CAAC;QACH,KAAK,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC;IAChE,CAAC;IAAC,MAAM,CAAC;QACP,+DAA+D;IACjE,CAAC;AACH,CAAC"}

package/dist/workspace/index.js

@@ -0,0 +1,149 @@
+import { promises as fs } from "node:fs";
+import path from "node:path";
+import { EventEmitter } from "node:events";
+import chokidar from "chokidar";
+import { FlowSchema, ScreenIndexSchema, TokensSchema, } from "./schemas.js";
+/**
+ * Owns the .pixl/ directory in the user's project — the single source of truth
+ * on disk. Every read/write goes through here so the layout stays consistent,
+ * and a chokidar watcher emits "change" so the preview server can live-reload.
+ */
+export class Workspace extends EventEmitter {
+    root;
+    dir;
+    watcher = null;
+    constructor(projectRoot) {
+        super();
+        this.root = projectRoot;
+        this.dir = path.join(projectRoot, ".pixl");
+    }
+    // --- paths ---------------------------------------------------------------
+    p(...parts) {
+        return path.join(this.dir, ...parts);
+    }
+    get tokensPath() {
+        return this.p("tokens.json");
+    }
+    get flowPath() {
+        return this.p("flow.json");
+    }
+    get screenIndexPath() {
+        return this.p("screens.json");
+    }
+    get designDir() {
+        return this.p("design");
+    }
+    get screensDir() {
+        return this.p("screens");
+    }
+    screenHtmlPath(id) {
+        return path.join(this.screensDir, `${id}.html`);
+    }
+    // --- lifecycle -----------------------------------------------------------
+    async init() {
+        await fs.mkdir(this.designDir, { recursive: true });
+        await fs.mkdir(this.screensDir, { recursive: true });
+        if (!(await exists(this.screenIndexPath))) {
+            await this.writeScreenIndex({ screens: [] });
+        }
+        if (!(await exists(this.flowPath))) {
+            await this.writeFlow({ nodes: [], edges: [] });
+        }
+    }
+    async isInitialized() {
+        return exists(this.dir);
+    }
+    /** Watch the workspace and emit "change" (debounced) on any file event. */
+    startWatching() {
+        if (this.watcher)
+            return;
+        let timer = null;
+        const fire = (file) => {
+            if (timer)
+                clearTimeout(timer);
+            timer = setTimeout(() => this.emit("change", file), 80);
+        };
+        this.watcher = chokidar.watch(this.dir, {
+            ignoreInitial: true,
+            awaitWriteFinish: { stabilityThreshold: 60, pollInterval: 20 },
+        });
+        this.watcher.on("all", (_event, file) => fire(file));
+    }
+    async stopWatching() {
+        await this.watcher?.close();
+        this.watcher = null;
+    }
+    // --- tokens --------------------------------------------------------------
+    async writeTokens(tokens) {
+        const parsed = TokensSchema.parse(tokens);
+        await writeJson(this.tokensPath, parsed);
+    }
+    async readTokens() {
+        return readJson(this.tokensPath, TokensSchema);
+    }
+    // --- design markdown -----------------------------------------------------
+    async writeDesignDoc(name, markdown) {
+        await fs.mkdir(this.designDir, { recursive: true });
+        await fs.writeFile(this.p("design", `${name}.md`), markdown, "utf8");
+    }
+    // --- screens -------------------------------------------------------------
+    async writeScreenIndex(index) {
+        await writeJson(this.screenIndexPath, ScreenIndexSchema.parse(index));
+    }
+    async readScreenIndex() {
+        return (await readJson(this.screenIndexPath, ScreenIndexSchema)) ?? { screens: [] };
+    }
+    async writeScreen(screen, html) {
+        await fs.mkdir(this.screensDir, { recursive: true });
+        await fs.writeFile(this.screenHtmlPath(screen.id), html, "utf8");
+        const index = await this.readScreenIndex();
+        const others = index.screens.filter((s) => s.id !== screen.id);
+        await this.writeScreenIndex({ screens: [...others, screen] });
+    }
+    // --- flow ----------------------------------------------------------------
+    async writeFlow(flow) {
+        await writeJson(this.flowPath, FlowSchema.parse(flow));
+    }
+    async readFlow() {
+        return (await readJson(this.flowPath, FlowSchema)) ?? { nodes: [], edges: [] };
+    }
+    // --- status --------------------------------------------------------------
+    async status(previewUrl) {
+        const initialized = await this.isInitialized();
+        const tokens = initialized ? await this.readTokens() : null;
+        const index = initialized ? await this.readScreenIndex() : { screens: [] };
+        const flow = initialized ? await this.readFlow() : { nodes: [], edges: [] };
+        return {
+            root: this.root,
+            initialized,
+            designSystem: tokens?.name ?? null,
+            screenCount: index.screens.length,
+            flowNodeCount: flow.nodes.length,
+            previewUrl,
+        };
+    }
+}
+// --- fs helpers ------------------------------------------------------------
+async function exists(p) {
+    try {
+        await fs.access(p);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+async function writeJson(p, data) {
+    await fs.mkdir(path.dirname(p), { recursive: true });
+    await fs.writeFile(p, JSON.stringify(data, null, 2), "utf8");
+}
+async function readJson(p, schema) {
+    try {
+        const raw = await fs.readFile(p, "utf8");
+        return schema.parse(JSON.parse(raw));
+    }
+    catch {
+        return null;
+    }
+}
+//# sourceMappingURL=index.js.map

package/dist/workspace/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/workspace/index.ts"],"names":[],"mappings":"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"}

package/dist/workspace/schemas.js

@@ -0,0 +1,48 @@
+import { z } from "zod";
+/**
+ * Design tokens — the locked contract every generated screen must obey.
+ * A preset (or the custom interview) produces exactly this shape.
+ */
+export const TokensSchema = z.object({
+    name: z.string(),
+    preset: z.string().optional(),
+    typeScale: z.array(z.number()).describe("allowed font sizes in px, ascending"),
+    fontFamilies: z.array(z.string()).describe("allowed font-family stacks"),
+    spacing: z.array(z.number()).describe("allowed spacing/size steps in px"),
+    radius: z.array(z.number()).describe("allowed border-radius values in px"),
+    colors: z
+        .record(z.string())
+        .describe("named color roles -> hex, e.g. { bg: '#fff', text: '#111', primary: '#4f46e5' }"),
+    shadows: z.array(z.string()).describe("allowed box-shadow values"),
+    breakpoints: z
+        .object({ width: z.number(), height: z.number() })
+        .describe("phone viewport the screens are locked to"),
+});
+/** One generated screen. HTML lives in screens/<id>.html; this is the index entry. */
+export const ScreenSchema = z.object({
+    id: z.string().regex(/^[a-z0-9-]+$/, "id must be kebab-case"),
+    name: z.string(),
+    description: z.string().optional(),
+});
+export const ScreenIndexSchema = z.object({
+    screens: z.array(ScreenSchema).default([]),
+});
+/** User-journey flow graph. */
+export const FlowNodeSchema = z.object({
+    id: z.string(),
+    screenId: z.string(),
+    label: z.string(),
+    x: z.number(),
+    y: z.number(),
+});
+export const FlowEdgeSchema = z.object({
+    id: z.string(),
+    source: z.string().describe("source node id"),
+    target: z.string().describe("target node id"),
+    label: z.string().default(""),
+});
+export const FlowSchema = z.object({
+    nodes: z.array(FlowNodeSchema).default([]),
+    edges: z.array(FlowEdgeSchema).default([]),
+});
+//# sourceMappingURL=schemas.js.map

package/dist/workspace/schemas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schemas.js","sourceRoot":"","sources":["../../src/workspace/schemas.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,CAAC,MAAM,CAAC;IACnC,IAAI,EAAE,CAAC,CAAC,MAAM,EAAE;IAChB,MAAM,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IAC7B,SAAS,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,QAAQ,CAAC,qCAAqC,CAAC;IAC9E,YAAY,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,QAAQ,CAAC,4BAA4B,CAAC;IACxE,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,QAAQ,CAAC,kCAAkC,CAAC;IACzE,MAAM,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,QAAQ,CAAC,oCAAoC,CAAC;IAC1E,MAAM,EAAE,CAAC;SACN,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC;SAClB,QAAQ,CAAC,iFAAiF,CAAC;IAC9F,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,QAAQ,CAAC,2BAA2B,CAAC;IAClE,WAAW,EAAE,CAAC;SACX,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC;SACjD,QAAQ,CAAC,0CAA0C,CAAC;CACxD,CAAC,CAAC;AAGH,sFAAsF;AACtF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,CAAC,MAAM,CAAC;IACnC,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE,uBAAuB,CAAC;IAC7D,IAAI,EAAE,CAAC,CAAC,MAAM,EAAE;IAChB,WAAW,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;CACnC,CAAC,CAAC;AAGH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,CAAC,MAAM,CAAC;IACxC,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC;CAC3C,CAAC,CAAC;AAGH,+BAA+B;AAC/B,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,CAAC,MAAM,CAAC;IACrC,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE;IACd,QAAQ,EAAE,CAAC,CAAC,MAAM,EAAE;IACpB,KAAK,EAAE,CAAC,CAAC,MAAM,EAAE;IACjB,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE;IACb,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE;CACd,CAAC,CAAC;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,CAAC,MAAM,CAAC;IACrC,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE;IACd,MAAM,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,gBAAgB,CAAC;IAC7C,MAAM,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,gBAAgB,CAAC;IAC7C,KAAK,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC;CAC9B,CAAC,CAAC;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC;IACjC,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC;IAC1C,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC;CAC3C,CAAC,CAAC"}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "pixl-mcp",
+  "version": "0.1.0",
+  "description": "Open-source MCP server that turns any AI coding host into a guided mobile-UI design tool: a design-system token contract, a taste linter that rejects off-standard screens, and a local browser preview with a phone gallery and a draggable user-journey flow map.",
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "pixl": "dist/index.js"
+  },
+  "files": [
+    "dist",
+    "preview-app"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "dev": "tsx src/index.ts",
+    "start": "node dist/index.js",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.12.0",
+    "@vitejs/plugin-react": "^4.7.0",
+    "@xyflow/react": "^12.11.2",
+    "chokidar": "^4.0.0",
+    "dagre": "^0.8.5",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "vite": "^6.0.0",
+    "ws": "^8.18.0",
+    "zod": "^3.24.0"
+  },
+  "devDependencies": {
+    "@types/dagre": "^0.7.54",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@types/ws": "^8.18.1",
+    "tsx": "^4.19.0",
+    "typescript": "^5.7.0",
+    "vitest": "^2.1.0"
+  },
+  "engines": {
+    "node": ">=20"
+  }
+}

package/preview-app/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Pixl</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/preview-app/src/App.tsx

@@ -0,0 +1,53 @@
+import { useCallback, useEffect, useState } from "react";
+import { api, type Screen, type Status } from "./api";
+import { useLiveReload } from "./useLiveReload";
+import { Gallery } from "./Gallery";
+import { FlowCanvas } from "./FlowCanvas";
+
+type Tab = "gallery" | "flow";
+
+export function App() {
+  const [tab, setTab] = useState<Tab>("gallery");
+  const [status, setStatus] = useState<Status | null>(null);
+  const [screens, setScreens] = useState<Screen[]>([]);
+  const [version, setVersion] = useState(0);
+
+  const refresh = useCallback(async () => {
+    const [s, sc] = await Promise.all([api.status(), api.screens()]);
+    setStatus(s);
+    setScreens(sc.screens);
+    setVersion((v) => v + 1);
+  }, []);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+  useLiveReload(refresh);
+
+  return (
+    <div className="app">
+      <header className="topbar">
+        <div className="brand">
+          Pixl<span className="dot">.</span>
+        </div>
+        <nav className="tabs">
+          <button className={tab === "gallery" ? "active" : ""} onClick={() => setTab("gallery")}>
+            Screens {status ? `(${status.screenCount})` : ""}
+          </button>
+          <button className={tab === "flow" ? "active" : ""} onClick={() => setTab("flow")}>
+            Flow {status ? `(${status.flowNodeCount})` : ""}
+          </button>
+        </nav>
+        <div className="meta">{status?.designSystem ?? "no design system yet"}</div>
+      </header>
+
+      <main className="content">
+        {tab === "gallery" ? (
+          <Gallery screens={screens} />
+        ) : (
+          <FlowCanvas screens={screens} version={version} />
+        )}
+      </main>
+    </div>
+  );
+}