skema-core 0.1.0 → 0.1.2

package/dist/cli.js

@@ -3,35 +3,1198 @@
 
 var fs = require('fs');
 var path = require('path');
+require('dotenv/config');
+var ws = require('ws');
+var child_process = require('child_process');
+var generativeAi = require('@google/generative-ai');
 
-var ROUTE_CONTENT = `export { POST, DELETE } from 'skema-core/server';
-`;
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var fs__namespace = /*#__PURE__*/_interopNamespace(fs);
+var path__namespace = /*#__PURE__*/_interopNamespace(path);
+
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/cli/init.ts
+var init_exports = {};
+__export(init_exports, {
+  init: () => init
+});
+function detectFramework(cwd) {
+  const packageJsonPath = path.join(cwd, "package.json");
+  if (!fs.existsSync(packageJsonPath)) return "unknown";
+  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf-8"));
+  const deps = { ...packageJson.dependencies, ...packageJson.devDependencies };
+  if (deps["next"]) return "nextjs";
+  if (deps["vite"]) return "vite";
+  if (deps["react-scripts"]) return "cra";
+  if (deps["@remix-run/react"]) return "remix";
+  return "unknown";
+}
+function setupNextjs(cwd) {
+  const configFiles = ["next.config.js", "next.config.mjs", "next.config.ts"];
+  let configPath = null;
+  for (const file of configFiles) {
+    if (fs.existsSync(path.join(cwd, file))) {
+      configPath = path.join(cwd, file);
+      break;
+    }
+  }
+  if (configPath) {
+    let content = fs.readFileSync(configPath, "utf-8");
+    let modified = false;
+    if (!content.includes("reactStrictMode")) {
+      content = content.replace(
+        /(const\s+\w+\s*=\s*\{)/,
+        "$1\n  reactStrictMode: false, // Required for tldraw"
+      );
+      modified = true;
+    } else if (content.includes("reactStrictMode: true")) {
+      content = content.replace(
+        "reactStrictMode: true",
+        "reactStrictMode: false // Required for tldraw"
+      );
+      modified = true;
+    }
+    if (!content.includes("transpilePackages")) {
+      content = content.replace(
+        /(const\s+\w+\s*=\s*\{)/,
+        "$1\n  transpilePackages: ['skema-core'],"
+      );
+      modified = true;
+    } else if (!content.includes("'skema-core'") && !content.includes('"skema-core"')) {
+      content = content.replace(
+        /transpilePackages:\s*\[/,
+        "transpilePackages: ['skema-core', "
+      );
+      modified = true;
+    }
+    if (modified) {
+      fs.writeFileSync(configPath, content);
+      console.log(`  \u2713 Updated ${configPath.replace(cwd, ".")}`);
+      return true;
+    } else {
+      console.log(`  \u2713 ${configPath.replace(cwd, ".")} already configured`);
+      return false;
+    }
+  } else {
+    fs.writeFileSync(
+      path.join(cwd, "next.config.js"),
+      `/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: false, // Required for tldraw
+  transpilePackages: ['skema-core'],
+};
+
+module.exports = nextConfig;
+`
+    );
+    console.log("  \u2713 Created next.config.js");
+    return true;
+  }
+}
+function removeStrictModeWrapper(cwd) {
+  const entryFiles = [
+    "src/main.tsx",
+    "src/main.jsx",
+    "src/index.tsx",
+    "src/index.jsx"
+  ];
+  for (const file of entryFiles) {
+    const filePath = path.join(cwd, file);
+    if (!fs.existsSync(filePath)) continue;
+    let content = fs.readFileSync(filePath, "utf-8");
+    if (!content.includes("StrictMode")) {
+      console.log(`  \u2713 No StrictMode wrapper found in ${file}`);
+      return false;
+    }
+    const patterns = [
+      // <React.StrictMode>...</React.StrictMode>
+      /<React\.StrictMode>\s*([\s\S]*?)\s*<\/React\.StrictMode>/g,
+      // <StrictMode>...</StrictMode>
+      /<StrictMode>\s*([\s\S]*?)\s*<\/StrictMode>/g
+    ];
+    let modified = false;
+    for (const pattern of patterns) {
+      if (pattern.test(content)) {
+        content = content.replace(pattern, "$1");
+        modified = true;
+      }
+    }
+    if (modified && !content.includes("StrictMode")) {
+      content = content.replace(/,?\s*StrictMode\s*,?/g, (match) => {
+        return match.includes(",") ? ", " : "";
+      });
+      content = content.replace(/import\s*{\s*}\s*from\s*['"]react['"]\s*;?\n?/g, "");
+      content = content.replace(/import\s*{\s*,\s*/g, "import { ");
+      content = content.replace(/,\s*}\s*from/g, " } from");
+    }
+    if (modified) {
+      fs.writeFileSync(filePath, content);
+      console.log(`  \u2713 Removed StrictMode wrapper from ${file}`);
+      console.log("    (Required for tldraw compatibility)");
+      return true;
+    }
+  }
+  return false;
+}
 function init() {
   const cwd = process.cwd();
-  const appDir = fs.existsSync(path.join(cwd, "app")) ? path.join(cwd, "app") : fs.existsSync(path.join(cwd, "src/app")) ? path.join(cwd, "src/app") : null;
-  if (!appDir) {
-    console.error("\u274C Could not find app/ or src/app/ directory.");
-    console.error("   Make sure you run this from a Next.js App Router project root.");
-    process.exit(1);
+  let modified = false;
+  console.log("");
+  console.log("  Skema Init");
+  console.log("");
+  const framework = detectFramework(cwd);
+  console.log(`  Detected: ${framework === "unknown" ? "React app" : framework}`);
+  console.log("");
+  switch (framework) {
+    case "nextjs":
+      modified = setupNextjs(cwd) || modified;
+      break;
+    case "vite":
+    case "cra":
+    case "remix":
+    case "unknown":
+      modified = removeStrictModeWrapper(cwd) || modified;
+      break;
   }
-  const apiDir = path.join(appDir, "api", "gemini");
-  const routePath = path.join(apiDir, "route.ts");
-  if (fs.existsSync(routePath)) {
-    console.log("\u2713 API route already exists at", routePath.replace(cwd, "."));
-    return;
+  console.log("");
+  if (modified) {
+    console.log("  Skema configured successfully!");
+  } else {
+    console.log("  Skema ready to use!");
   }
-  if (!fs.existsSync(apiDir)) {
-    fs.mkdirSync(apiDir, { recursive: true });
-    console.log("\u2713 Created", apiDir.replace(cwd, "."));
+  console.log("");
+  console.log("  Usage:");
+  console.log("");
+  console.log('    import { Skema } from "skema-core";');
+  console.log("");
+  if (framework === "nextjs") {
+    console.log("    // In your layout.tsx or page");
+    console.log('    {process.env.NODE_ENV === "development" && <Skema />}');
+  } else {
+    console.log("    // In your App.tsx or main entry");
+    console.log("    {import.meta.env.DEV && <Skema />}");
   }
-  fs.writeFileSync(routePath, ROUTE_CONTENT);
-  console.log("\u2713 Created", routePath.replace(cwd, "."));
   console.log("");
-  console.log("\u{1F389} Skema is ready! The Gemini CLI integration is now set up.");
+  console.log("  Start the daemon:");
+  console.log("");
+  console.log("    npx skema-serve");
+  console.log("");
+  console.log("  Then press \u2318\u21E7E (Cmd+Shift+E) to toggle Skema");
   console.log("");
-  console.log("Usage:");
-  console.log("  1. Add <Skema /> to your page");
-  console.log("  2. Press Cmd+Shift+E to toggle the overlay");
-  console.log("  3. Annotate elements and Gemini CLI will make the changes");
 }
-init();
+var init_init = __esm({
+  "src/cli/init.ts"() {
+    if (__require.main === module) {
+      init();
+    }
+  }
+});
+var PROVIDERS = {
+  gemini: {
+    command: "gemini",
+    buildArgs: (prompt, options) => {
+      const args2 = ["-p", prompt];
+      if (options?.yolo !== false) args2.push("--yolo");
+      args2.push("--output-format", "stream-json");
+      if (options?.model) args2.push("-m", options.model);
+      else args2.push("-m", "gemini-2.5-flash");
+      return args2;
+    },
+    parseOutput: (line) => {
+      try {
+        const parsed = JSON.parse(line);
+        return {
+          type: mapGeminiEventType(parsed.type),
+          content: parsed.content || parsed.message,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+          provider: "gemini",
+          raw: parsed
+        };
+      } catch {
+        return {
+          type: "text",
+          content: line,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+          provider: "gemini"
+        };
+      }
+    }
+  },
+  claude: {
+    command: "claude",
+    buildArgs: (prompt, options) => {
+      const args2 = ["-p", prompt, "--output-format", "stream-json"];
+      if (options?.yolo !== false) args2.push("--dangerously-skip-permissions");
+      if (options?.model) args2.push("--model", options.model);
+      return args2;
+    },
+    parseOutput: (line) => {
+      try {
+        const parsed = JSON.parse(line);
+        return {
+          type: mapClaudeEventType(parsed.type),
+          content: parsed.content || extractClaudeContent(parsed),
+          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+          provider: "claude",
+          raw: parsed
+        };
+      } catch {
+        return {
+          type: "text",
+          content: line,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+          provider: "claude"
+        };
+      }
+    }
+  }
+};
+function mapGeminiEventType(type) {
+  switch (type) {
+    case "init":
+      return "init";
+    case "message":
+      return "text";
+    case "tool_use":
+      return "tool_use";
+    case "tool_result":
+      return "tool_result";
+    case "error":
+      return "error";
+    case "done":
+    case "result":
+      return "done";
+    default:
+      return "text";
+  }
+}
+function mapClaudeEventType(type) {
+  switch (type) {
+    case "system":
+      return "init";
+    case "assistant":
+    case "text":
+      return "text";
+    case "tool_use":
+      return "tool_use";
+    case "tool_result":
+      return "tool_result";
+    case "error":
+      return "error";
+    case "result":
+      return "done";
+    default:
+      return "text";
+  }
+}
+function extractClaudeContent(parsed) {
+  if (typeof parsed.content === "string") return parsed.content;
+  if (parsed.message && typeof parsed.message === "object") {
+    const msg = parsed.message;
+    if (typeof msg.content === "string") return msg.content;
+  }
+  return void 0;
+}
+function spawnAICLI(prompt, config) {
+  const spec = PROVIDERS[config.provider];
+  const args2 = spec.buildArgs(prompt, { model: config.model });
+  const cwd = config.cwd || process.cwd();
+  console.log(`[Skema] Spawning ${config.provider}: ${spec.command} ${args2.join(" ")}`);
+  const child = child_process.spawn(spec.command, args2, {
+    cwd,
+    env: process.env
+  });
+  const events = {
+    [Symbol.asyncIterator]() {
+      let buffer = "";
+      let done = false;
+      const queue = [];
+      let resolveNext = null;
+      const pushEvent = (event) => {
+        if (resolveNext) {
+          resolveNext({ value: event, done: false });
+          resolveNext = null;
+        } else {
+          queue.push(event);
+        }
+      };
+      child.stdout?.on("data", (data) => {
+        buffer += data.toString();
+        const lines = buffer.split("\n");
+        buffer = lines.pop() || "";
+        for (const line of lines) {
+          if (line.trim()) {
+            const event = spec.parseOutput(line.trim());
+            if (event) pushEvent(event);
+          }
+        }
+      });
+      child.stderr?.on("data", (data) => {
+        const content = data.toString().trim();
+        if (content) {
+          pushEvent({
+            type: "error",
+            content,
+            timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+            provider: config.provider
+          });
+        }
+      });
+      child.on("close", (code) => {
+        if (buffer.trim()) {
+          const event = spec.parseOutput(buffer.trim());
+          if (event) pushEvent(event);
+        }
+        pushEvent({
+          type: "done",
+          content: `Process exited with code ${code}`,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+          provider: config.provider
+        });
+        done = true;
+        if (resolveNext) {
+          resolveNext({ value: void 0, done: true });
+        }
+      });
+      child.on("error", (err) => {
+        pushEvent({
+          type: "error",
+          content: `Failed to spawn ${config.provider}: ${err.message}`,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+          provider: config.provider
+        });
+        done = true;
+        if (resolveNext) {
+          resolveNext({ value: void 0, done: true });
+        }
+      });
+      return {
+        next() {
+          if (queue.length > 0) {
+            return Promise.resolve({ value: queue.shift(), done: false });
+          }
+          if (done) {
+            return Promise.resolve({ value: void 0, done: true });
+          }
+          return new Promise((resolve) => {
+            resolveNext = resolve;
+          });
+        }
+      };
+    }
+  };
+  return { process: child, events };
+}
+function isProviderAvailable(provider) {
+  const spec = PROVIDERS[provider];
+  try {
+    const { execSync: execSync3 } = __require("child_process");
+    execSync3(`which ${spec.command}`, { stdio: "ignore" });
+    return true;
+  } catch {
+    return false;
+  }
+}
+function getAvailableProviders() {
+  return ["gemini", "claude"].filter(isProviderAvailable);
+}
+
+// src/lib/utils.ts
+function getGridCellReference(x, y, gridSize = 100) {
+  const col = Math.floor(x / gridSize);
+  const row = Math.floor(y / gridSize);
+  const colLabel = String.fromCharCode(65 + col);
+  return `${colLabel}${row}`;
+}
+
+// src/server/prompts.ts
+var CRITICAL_RULES = `CRITICAL RULES:
+- Do NOT create new files. Only edit existing files.
+- Do NOT modify the import { SkemaWrapper } from "@/components/skema-wrapper" line.
+- Ensure all JSX tags are properly closed - every <tag> needs a matching </tag>.
+- Do NOT run any shell commands. No npm, no git, no lint, no build commands. Just edit files.
+- STOP immediately after making the file changes. Do not verify, do not run tests, do not check status.`;
+var JSX_VALIDATION_RULE = `JSX SYNTAX: Every opening tag (<div>, <a>, <span>, <button>) MUST have a matching closing tag. Self-closing tags (<img />, <input />, <br />) must end with />.`;
+function buildFastDomSelectionPrompt(input) {
+  const { comment, selector, text, tagName } = input;
+  const parts = [];
+  if (tagName) {
+    parts.push(`<${tagName.toLowerCase()}>`);
+  }
+  if (selector) {
+    parts.push(`selector: ${selector}`);
+  }
+  if (text) {
+    parts.push(`text: "${text.slice(0, 50)}"`);
+  }
+  const target = parts.length > 0 ? ` (${parts.join(" | ")})` : "";
+  return `${comment}${target}. Make the change directly, no explanation needed. ${CRITICAL_RULES} ${JSX_VALIDATION_RULE}`;
+}
+function buildDetailedDomSelectionPrompt(input) {
+  const { comment, tagName, selector, text, elementPath, cssClasses, attributes, elements } = input;
+  let prompt = `Make this code change: "${comment || "No specific comment provided"}"
+
+## Target Element
+- Tag: <${tagName?.toLowerCase() || "unknown"}>`;
+  if (selector) {
+    prompt += `
+- Selector: ${selector}`;
+  }
+  if (elementPath) {
+    prompt += `
+- DOM Path: ${elementPath}`;
+  }
+  if (cssClasses) {
+    prompt += `
+- CSS Classes: ${cssClasses}`;
+  }
+  if (attributes && Object.keys(attributes).length > 0) {
+    const attrStr = Object.entries(attributes).map(([k, v]) => `${k}="${v}"`).join(", ");
+    prompt += `
+- Attributes: ${attrStr}`;
+  }
+  if (text) {
+    prompt += `
+- Text Content: "${text.slice(0, 150)}"`;
+  }
+  if (elements && elements.length > 1) {
+    prompt += `
+
+## Multi-Selection (${elements.length} elements)`;
+    elements.slice(0, 5).forEach((el, i) => {
+      prompt += `
+${i + 1}. <${el.tagName}> ${el.selector}`;
+      if (el.text) prompt += ` - "${el.text.slice(0, 50)}"`;
+    });
+    if (elements.length > 5) {
+      prompt += `
+... and ${elements.length - 5} more`;
+    }
+  }
+  prompt += `
+
+Make minimal changes. ${CRITICAL_RULES} ${JSX_VALIDATION_RULE}`;
+  return prompt;
+}
+function buildGesturePrompt(input) {
+  const { comment, gesture, boundingBox } = input;
+  return `Make this code change: "${comment || "No specific comment provided"}"
+
+Element: gesture: ${gesture || "unknown"} at (${boundingBox?.x || 0}, ${boundingBox?.y || 0})
+
+Make minimal changes. ${CRITICAL_RULES} ${JSX_VALIDATION_RULE}`;
+}
+function buildDrawingToCodePrompt(input) {
+  const {
+    comment = "Create a component based on this drawing",
+    boundingBox,
+    extractedText,
+    gridConfig,
+    viewport,
+    nearbyElements = [],
+    visionDescription
+  } = input;
+  const gridSize = gridConfig?.size || 100;
+  let gridCellRef = "";
+  if (boundingBox) {
+    gridCellRef = getGridCellReference(boundingBox.x, boundingBox.y, gridSize);
+  }
+  const positionContext = buildPositionContext(boundingBox, viewport, gridCellRef);
+  const nearbyContext = buildNearbyElementsContext(nearbyElements);
+  const textContext = extractedText?.trim() ? `
+**Text found in drawing (use as reference if hard to read):**
+${extractedText}` : "";
+  const imageNote = buildImageNote(!!input.drawingImage, visionDescription);
+  return `Your task is to interpret a user's sketch/wireframe and turn it into code that is integrated in the codebase.
+
+## User's Request
+"${comment}"
+
+## Drawing Context
+${positionContext}${textContext}${nearbyContext}${imageNote}
+
+## Your Process
+1. **Analyze the Sketch:** Understand the visual intent\u2014what UI component does the user want?
+2. **Interpret, Don't Transcribe:** Elevate the low-fidelity drawing into a high-fidelity component. Choose appropriate spacing, colors, and typography that match modern design standards.
+3. **Infer Missing Details:** If something is underspecified, use your expertise to make the best choice. An informed decision is better than an incomplete component.
+
+## Implementation Guidelines
+${DRAWING_IMPLEMENTATION_GUIDELINES}
+
+Make the changes directly. Insert the UI elements inline at the appropriate location in the page. No explanation needed.
+
+## Error Prevention Rules
+${DRAWING_ERROR_PREVENTION_RULES}`;
+}
+var DRAWING_IMPLEMENTATION_GUIDELINES = `- **CRITICAL: DO NOT CREATE ANY NEW FILES. NEVER CREATE NEW FILES. You must ONLY edit existing files.**
+- Add your code directly inline within the existing JSX of the page file - do NOT create separate component files.
+- DO NOT run any shell commands (no npm, git, lint, build, or verification commands). Just edit files and STOP.
+- After making your file edits, you are DONE. Do not run any follow-up commands or checks.
+- Write the UI as inline JSX elements (divs, sections, etc.) directly in the return statement - NOT as a separate component definition
+- Use Tailwind CSS classes for styling (the project uses Tailwind)
+- Do NOT use hardcoded pixel positions or absolute coordinates - integrate naturally with existing page flow
+- Use flexbox, grid, or relative positioning to place the component appropriately
+- If the sketch shows:
+  - **Rectangle/box:** Card, container, button, or input field depending on context
+  - **Text elements:** Headings, paragraphs, or labels with appropriate hierarchy
+  - **Form layout:** Input fields with labels, proper spacing
+  - **Icons/shapes:** Use appropriate icons from lucide-react or inline SVGs (but DO NOT add new imports mid-file)
+  - **Navigation:** Nav links, menus, or breadcrumbs
+  - **Lists:** Ordered/unordered lists or grid layouts
+- Make the UI fit naturally with the existing page design
+- Style it nicely and according to the existing codebase
+- Use semantic HTML and ARIA attributes where appropriate
+- **NEVER add import statements inside JSX or in the middle of a file - all imports must be at the very top of the file**
+- If you need a new import, add it at the TOP of the file with the other imports, then use it in the JSX below`;
+var DRAWING_ERROR_PREVENTION_RULES = `1. **NEVER CREATE NEW FILES** - Do NOT create new component files, utility files, or any other files. Write everything inline in the existing file
+2. You do not need to update package.json or anything, just add / edit the react component.
+3. Do NOT add import statements in the middle of the file or inside JSX - imports go ONLY at the top
+4. Do NOT modify the import { SkemaWrapper } from "@/components/skema-wrapper" line or the SkemaWrapper component itself
+5. If you need something that requires an import and it's not already imported, either use an alternative that doesn't need an import, or add the import at the very TOP of the file with the other imports
+6. DONT MAKE ANY CHANGES THAT WOULD RESULT IN A Build Error
+7. **JSX SYNTAX VALIDATION** - ALWAYS ensure every JSX tag is properly closed. Every opening tag like <div>, <a>, <span>, <button> MUST have a matching closing tag </div>, </a>, </span>, </button>. Self-closing tags like <img />, <input />, <br /> must end with />. Before finishing, mentally verify all tag pairs are balanced.`;
+var IMAGE_ANALYSIS_PROMPT = `
+Analyze this UI wireframe sketch in some detail (not too long) for a front-end developer.
+
+Describe every element, layout, spacing, icons, and text you see.
+Focus on whats apparent, don't overthink it.
+Mention relative positions and hierarchy.
+Be distinct about what is drawn vs what might be background.
+
+Do NOT focus on exact pixel coordinates or absolute positions - describe layouts
+in terms of relative positioning (left/right/top/bottom, centered, evenly spaced, etc.).
+
+It is expected that they will be rough draft's / hand-drawn things. Interpret the drawing and its goals as best as you can.
+DO NOT MENTION THAT THINGS HAVE "Hand-sketched" or "Hand-drawn" vibes. Make assumptions of what they were trying to do.
+Just FYI, this gets passed onto a generator to generate the actual code of modern UI componenents.
+`.trim();
+function buildPositionContext(bbox, viewport, gridCellRef) {
+  if (!bbox) return "";
+  if (viewport) {
+    const relX = (bbox.x / viewport.width * 100).toFixed(1);
+    const relY = (bbox.y / viewport.height * 100).toFixed(1);
+    let context = `**Drawing Location:** Approximately ${relX}% from left, ${relY}% from top of viewport`;
+    if (gridCellRef) {
+      context += ` (grid cell ${gridCellRef})`;
+    }
+    return context;
+  }
+  return `**Drawing Area:** ${Math.round(bbox.width)}\xD7${Math.round(bbox.height)}px`;
+}
+function buildNearbyElementsContext(nearbyElements) {
+  if (nearbyElements.length === 0) return "";
+  const elementList = nearbyElements.slice(0, 5).map((el) => {
+    let desc = `- <${el.tagName.toLowerCase()}>`;
+    if (el.text) desc += `: "${el.text.slice(0, 50)}"`;
+    if (el.className) desc += ` (class: ${el.className.slice(0, 50)})`;
+    desc += ` (${el.selector})`;
+    return desc;
+  }).join("\n");
+  return `
+**Nearby DOM Elements (for placement reference):**
+${elementList}`;
+}
+function buildImageNote(hasImage, visionDescription) {
+  let note = hasImage ? "\n**[Drawing image provided as base64 PNG with labeled grid overlay]**" : "";
+  if (visionDescription) {
+    note += `
+
+## Visual Analysis of Drawing
+${visionDescription}`;
+  }
+  return note;
+}
+function buildPromptFromAnnotation(annotation, _projectContext, options) {
+  const fastMode = options?.fastMode ?? true;
+  if (annotation.type === "drawing") {
+    const drawingAnnotation = annotation;
+    return buildDrawingToCodePrompt({
+      comment: drawingAnnotation.comment || "Create a component based on this drawing",
+      boundingBox: drawingAnnotation.boundingBox,
+      drawingSvg: drawingAnnotation.drawingSvg,
+      drawingImage: drawingAnnotation.drawingImage,
+      extractedText: drawingAnnotation.extractedText,
+      gridConfig: drawingAnnotation.gridConfig,
+      viewport: drawingAnnotation.viewport,
+      projectStyles: drawingAnnotation.projectStyles,
+      nearbyElements: drawingAnnotation.nearbyElements,
+      visionDescription: options?.visionDescription
+    });
+  }
+  if (annotation.type === "gesture") {
+    const gestureAnnotation = annotation;
+    return buildGesturePrompt({
+      comment: annotation.comment || "No specific comment provided",
+      gesture: gestureAnnotation.gesture,
+      boundingBox: gestureAnnotation.boundingBox
+    });
+  }
+  const domAnnotation = annotation;
+  if (fastMode) {
+    return buildFastDomSelectionPrompt({
+      comment: annotation.comment || "No specific comment provided",
+      selector: domAnnotation.selector,
+      text: domAnnotation.text,
+      tagName: domAnnotation.tagName
+    });
+  }
+  return buildDetailedDomSelectionPrompt({
+    comment: annotation.comment || "No specific comment provided",
+    tagName: domAnnotation.tagName,
+    selector: domAnnotation.selector,
+    text: domAnnotation.text,
+    elementPath: domAnnotation.elementPath,
+    cssClasses: domAnnotation.cssClasses,
+    attributes: domAnnotation.attributes,
+    elements: domAnnotation.elements
+  });
+}
+async function analyzeWithGemini(base64Image, apiKey, model = "gemini-2.5-flash") {
+  try {
+    const genAI = new generativeAi.GoogleGenerativeAI(apiKey);
+    const visionModel = genAI.getGenerativeModel({ model });
+    const cleanBase64 = base64Image.replace(/^data:image\/\w+;base64,/, "");
+    const result = await visionModel.generateContent([
+      IMAGE_ANALYSIS_PROMPT,
+      {
+        inlineData: {
+          data: cleanBase64,
+          mimeType: "image/png"
+        }
+      }
+    ]);
+    const response = await result.response;
+    const text = response.text();
+    return {
+      success: true,
+      description: text,
+      provider: "gemini"
+    };
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    console.error("[Vision] Gemini analysis failed:", message);
+    return {
+      success: false,
+      description: "",
+      provider: "gemini",
+      error: message
+    };
+  }
+}
+async function analyzeWithClaude(base64Image, apiKey, model = "claude-sonnet-4-20250514") {
+  try {
+    const Anthropic = (await import('@anthropic-ai/sdk')).default;
+    const client = new Anthropic({ apiKey });
+    const cleanBase64 = base64Image.replace(/^data:image\/\w+;base64,/, "");
+    const response = await client.messages.create({
+      model,
+      max_tokens: 1024,
+      messages: [
+        {
+          role: "user",
+          content: [
+            {
+              type: "image",
+              source: {
+                type: "base64",
+                media_type: "image/png",
+                data: cleanBase64
+              }
+            },
+            {
+              type: "text",
+              text: IMAGE_ANALYSIS_PROMPT
+            }
+          ]
+        }
+      ]
+    });
+    const textContent = response.content.find((c) => c.type === "text");
+    const description = textContent && "text" in textContent ? textContent.text : "";
+    return {
+      success: true,
+      description,
+      provider: "claude"
+    };
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    console.error("[Vision] Claude analysis failed:", message);
+    return {
+      success: false,
+      description: "",
+      provider: "claude",
+      error: message
+    };
+  }
+}
+async function analyzeImage(base64Image, config) {
+  const { provider } = config;
+  let apiKey = config.apiKey;
+  if (!apiKey) {
+    apiKey = provider === "gemini" ? process.env.GEMINI_API_KEY : process.env.ANTHROPIC_API_KEY;
+  }
+  if (!apiKey) {
+    return {
+      success: false,
+      description: "",
+      provider,
+      error: `No API key found for ${provider} vision. Set ${provider === "gemini" ? "GEMINI_API_KEY" : "ANTHROPIC_API_KEY"} environment variable.`
+    };
+  }
+  console.log(`[Vision] Analyzing image with ${provider}...`);
+  if (provider === "gemini") {
+    return analyzeWithGemini(base64Image, apiKey, config.model);
+  } else {
+    return analyzeWithClaude(base64Image, apiKey, config.model);
+  }
+}
+function isVisionAvailable(provider) {
+  {
+    return !!process.env.GEMINI_API_KEY;
+  }
+}
+
+// src/server/daemon.ts
+var currentProvider = "gemini";
+var workingDirectory = process.cwd();
+var annotationSnapshots2 = /* @__PURE__ */ new Map();
+function createSnapshot2(annotationId) {
+  try {
+    const stashRef = child_process.execSync("git stash create", { cwd: workingDirectory, encoding: "utf-8" }).trim();
+    if (stashRef) {
+      annotationSnapshots2.set(annotationId, stashRef);
+      console.log(`[Daemon] Created snapshot ${stashRef.slice(0, 7)} for ${annotationId}`);
+      return stashRef;
+    }
+    const headRef = child_process.execSync("git rev-parse HEAD", { cwd: workingDirectory, encoding: "utf-8" }).trim();
+    annotationSnapshots2.set(annotationId, headRef);
+    return headRef;
+  } catch (error) {
+    console.error("[Daemon] Failed to create snapshot:", error);
+    return null;
+  }
+}
+function revertSnapshot(annotationId) {
+  const snapshotRef = annotationSnapshots2.get(annotationId);
+  if (!snapshotRef) {
+    return { success: false, message: `No snapshot found for ${annotationId}` };
+  }
+  try {
+    const changedFiles = child_process.execSync(`git diff --name-only ${snapshotRef}`, {
+      cwd: workingDirectory,
+      encoding: "utf-8"
+    }).trim().split("\n").filter(Boolean);
+    if (changedFiles.length === 0) {
+      annotationSnapshots2.delete(annotationId);
+      return { success: true, message: "No changes to revert" };
+    }
+    for (const file of changedFiles) {
+      try {
+        child_process.execSync(`git checkout ${snapshotRef} -- "${file}"`, { cwd: workingDirectory });
+      } catch {
+      }
+    }
+    annotationSnapshots2.delete(annotationId);
+    return { success: true, message: `Reverted ${changedFiles.length} file(s)` };
+  } catch (error) {
+    return { success: false, message: String(error) };
+  }
+}
+var handlers = {
+  // -------------------------------------------------------------------------
+  // Provider Management
+  // -------------------------------------------------------------------------
+  "get-provider": async (msg) => {
+    return {
+      id: msg.id,
+      type: "provider",
+      provider: currentProvider,
+      available: getAvailableProviders()
+    };
+  },
+  "set-provider": async (msg) => {
+    const newProvider = msg.provider;
+    if (!["gemini", "claude"].includes(newProvider)) {
+      return { id: msg.id, type: "error", error: `Invalid provider: ${newProvider}` };
+    }
+    if (!isProviderAvailable(newProvider)) {
+      return {
+        id: msg.id,
+        type: "error",
+        error: `Provider "${newProvider}" is not installed. Run: ${newProvider === "gemini" ? "npm install -g @anthropic-ai/gemini-cli" : "npm install -g @anthropic-ai/claude-code"}`
+      };
+    }
+    currentProvider = newProvider;
+    console.log(`[Daemon] Switched to provider: ${currentProvider}`);
+    return { id: msg.id, type: "provider-changed", provider: currentProvider };
+  },
+  // -------------------------------------------------------------------------
+  // AI Generation (streaming)
+  // -------------------------------------------------------------------------
+  generate: async (msg, ws) => {
+    const annotation = msg.annotation;
+    const projectContext = msg.projectContext;
+    const annotationId = annotation.id || `temp-${Date.now()}`;
+    createSnapshot2(annotationId);
+    let visionDescription = "";
+    const drawingAnnotation = annotation;
+    if (annotation.type === "drawing" && drawingAnnotation.drawingImage) {
+      if (isVisionAvailable()) {
+        sendMessage(ws, {
+          id: msg.id,
+          type: "ai-event",
+          event: {
+            type: "text",
+            content: `[Analyzing drawing with Gemini vision...]`,
+            timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+            provider: currentProvider
+          }
+        });
+        const visionResult = await analyzeImage(drawingAnnotation.drawingImage, {
+          provider: "gemini"
+        });
+        if (visionResult.success) {
+          visionDescription = visionResult.description;
+          sendMessage(ws, {
+            id: msg.id,
+            type: "ai-event",
+            event: {
+              type: "text",
+              content: `[Vision analysis complete]
+${visionDescription}`,
+              timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+              provider: currentProvider
+            }
+          });
+        } else {
+          sendMessage(ws, {
+            id: msg.id,
+            type: "ai-event",
+            event: {
+              type: "error",
+              content: `Vision analysis failed: ${visionResult.error}`,
+              timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+              provider: currentProvider
+            }
+          });
+        }
+      } else {
+        sendMessage(ws, {
+          id: msg.id,
+          type: "ai-event",
+          event: {
+            type: "text",
+            content: `[Vision not available - set GEMINI_API_KEY for image analysis]`,
+            timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+            provider: currentProvider
+          }
+        });
+      }
+    }
+    const prompt = buildPromptFromAnnotation(annotation, projectContext, {
+      fastMode: msg.fastMode === true,
+      // Default to detailed mode (false) unless explicitly set to true
+      visionDescription
+    });
+    sendMessage(ws, {
+      id: msg.id,
+      type: "ai-event",
+      event: {
+        type: "debug",
+        content: prompt,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        provider: currentProvider
+      }
+    });
+    const config = {
+      provider: currentProvider,
+      cwd: workingDirectory,
+      model: msg.model
+    };
+    const { events } = spawnAICLI(prompt, config);
+    for await (const event of events) {
+      sendMessage(ws, {
+        id: msg.id,
+        type: "ai-event",
+        event,
+        annotationId
+      });
+      if (event.type === "done") {
+        sendMessage(ws, {
+          id: msg.id,
+          type: "generate-complete",
+          success: true,
+          annotationId,
+          provider: currentProvider
+        });
+        break;
+      }
+    }
+  },
+  // -------------------------------------------------------------------------
+  // Undo/Revert
+  // -------------------------------------------------------------------------
+  revert: async (msg) => {
+    const annotationId = msg.annotationId;
+    if (!annotationId) {
+      return { id: msg.id, type: "error", error: "Missing annotationId" };
+    }
+    const result = revertSnapshot(annotationId);
+    return { id: msg.id, type: "revert-result", ...result };
+  },
+  // -------------------------------------------------------------------------
+  // File Operations
+  // -------------------------------------------------------------------------
+  "read-file": async (msg) => {
+    const filePath = msg.path;
+    const absolutePath = path__namespace.isAbsolute(filePath) ? filePath : path__namespace.join(workingDirectory, filePath);
+    try {
+      const content = fs__namespace.readFileSync(absolutePath, "utf-8");
+      return { id: msg.id, type: "file-content", path: filePath, content };
+    } catch (error) {
+      return { id: msg.id, type: "error", error: `Failed to read file: ${error}` };
+    }
+  },
+  "write-file": async (msg) => {
+    const filePath = msg.path;
+    const content = msg.content;
+    const absolutePath = path__namespace.isAbsolute(filePath) ? filePath : path__namespace.join(workingDirectory, filePath);
+    try {
+      fs__namespace.mkdirSync(path__namespace.dirname(absolutePath), { recursive: true });
+      fs__namespace.writeFileSync(absolutePath, content, "utf-8");
+      console.log(`[Daemon] Wrote file: ${filePath}`);
+      return { id: msg.id, type: "write-success", path: filePath };
+    } catch (error) {
+      return { id: msg.id, type: "error", error: `Failed to write file: ${error}` };
+    }
+  },
+  "list-files": async (msg) => {
+    const dirPath = msg.path || ".";
+    const absolutePath = path__namespace.isAbsolute(dirPath) ? dirPath : path__namespace.join(workingDirectory, dirPath);
+    try {
+      const entries = fs__namespace.readdirSync(absolutePath, { withFileTypes: true });
+      const files = entries.map((entry) => ({
+        name: entry.name,
+        isDirectory: entry.isDirectory()
+      }));
+      return { id: msg.id, type: "file-list", path: dirPath, files };
+    } catch (error) {
+      return { id: msg.id, type: "error", error: `Failed to list files: ${error}` };
+    }
+  },
+  // -------------------------------------------------------------------------
+  // Command Execution
+  // -------------------------------------------------------------------------
+  "run-command": async (msg, ws) => {
+    const command2 = msg.command;
+    if (!command2) {
+      return { id: msg.id, type: "error", error: "Missing command" };
+    }
+    console.log(`[Daemon] Running command: ${command2}`);
+    return new Promise((resolve) => {
+      child_process.exec(command2, { cwd: workingDirectory }, (error, stdout, stderr) => {
+        resolve({
+          id: msg.id,
+          type: "command-result",
+          stdout,
+          stderr,
+          exitCode: error ? error.code : 0
+        });
+      });
+    });
+  },
+  // -------------------------------------------------------------------------
+  // Status
+  // -------------------------------------------------------------------------
+  ping: async (msg) => {
+    return {
+      id: msg.id,
+      type: "pong",
+      provider: currentProvider,
+      cwd: workingDirectory,
+      availableProviders: getAvailableProviders()
+    };
+  }
+};
+function sendMessage(ws$1, message) {
+  if (ws$1.readyState === ws.WebSocket.OPEN) {
+    ws$1.send(JSON.stringify(message));
+  }
+}
+function handleConnection(ws) {
+  console.log("[Daemon] Client connected");
+  sendMessage(ws, {
+    type: "connected",
+    provider: currentProvider,
+    cwd: workingDirectory,
+    availableProviders: getAvailableProviders()
+  });
+  ws.on("message", async (data) => {
+    let msg;
+    try {
+      msg = JSON.parse(data.toString());
+    } catch {
+      sendMessage(ws, { type: "error", error: "Invalid JSON" });
+      return;
+    }
+    const handler = handlers[msg.type];
+    if (!handler) {
+      sendMessage(ws, { id: msg.id, type: "error", error: `Unknown message type: ${msg.type}` });
+      return;
+    }
+    try {
+      const response = await handler(msg, ws);
+      if (response) {
+        sendMessage(ws, response);
+      }
+    } catch (error) {
+      sendMessage(ws, {
+        id: msg.id,
+        type: "error",
+        error: `Handler error: ${error}`
+      });
+    }
+  });
+  ws.on("close", () => {
+    console.log("[Daemon] Client disconnected");
+  });
+  ws.on("error", (error) => {
+    console.error("[Daemon] WebSocket error:", error);
+  });
+}
+function startDaemon(config = {}) {
+  const port = config.port ?? 9999;
+  workingDirectory = config.cwd ?? process.cwd();
+  currentProvider = config.defaultProvider ?? "gemini";
+  if (!isProviderAvailable(currentProvider)) {
+    const available = getAvailableProviders();
+    if (available.length > 0) {
+      console.log(`[Daemon] ${currentProvider} not found, falling back to ${available[0]}`);
+      currentProvider = available[0];
+    } else {
+      console.warn("[Daemon] Warning: No AI providers found. Install gemini or claude CLI.");
+    }
+  }
+  const wss = new ws.WebSocketServer({ port });
+  wss.on("connection", handleConnection);
+  wss.on("listening", () => {
+    console.log("");
+    console.log("  \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510");
+    console.log("  \u2502                                                 \u2502");
+    console.log(`  \u2502   \u{1F3A8} Skema Daemon running on ws://localhost:${port}  \u2502`);
+    console.log("  \u2502                                                 \u2502");
+    console.log(`  \u2502   Provider: ${currentProvider.padEnd(35)}\u2502`);
+    console.log(`  \u2502   Directory: ${workingDirectory.slice(-33).padEnd(34)}\u2502`);
+    console.log("  \u2502                                                 \u2502");
+    console.log("  \u2502   Waiting for browser connections...           \u2502");
+    console.log("  \u2502                                                 \u2502");
+    console.log("  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518");
+    console.log("");
+  });
+  wss.on("error", (error) => {
+    if (error.code === "EADDRINUSE") {
+      console.error(`[Daemon] Port ${port} is already in use. Is another Skema daemon running?`);
+    } else {
+      console.error("[Daemon] Server error:", error);
+    }
+  });
+  return {
+    port,
+    close: () => {
+      wss.close();
+      console.log("[Daemon] Server stopped");
+    }
+  };
+}
+
+// src/cli/index.ts
+var args = process.argv.slice(2);
+var command = args[0];
+function printHelp() {
+  console.log("");
+  console.log("  Skema - Drawing-based website development");
+  console.log("");
+  console.log("  Usage:");
+  console.log("    npx skema-core          Start the daemon (default)");
+  console.log("    npx skema-core init     Configure your project");
+  console.log("    npx skema-core help     Show this help");
+  console.log("");
+  console.log("  Options (for daemon):");
+  console.log("    -p, --port <port>  Port number (default: 9999)");
+  console.log("    -d, --dir <path>   Working directory");
+  console.log("    --provider <name>  Default AI provider (gemini|claude)");
+  console.log("");
+  console.log("  Examples:");
+  console.log("    npx skema-core");
+  console.log("    npx skema-core --port 8080");
+  console.log("    npx skema-core init");
+  console.log("");
+  console.log('  Note: After installing skema-core, you can also use "skema" directly.');
+  console.log("");
+}
+function parseArgs(args2) {
+  const config = {};
+  for (let i = 0; i < args2.length; i++) {
+    const arg = args2[i];
+    const next = args2[i + 1];
+    if (arg === "-p" || arg === "--port") {
+      config.port = parseInt(next, 10);
+      i++;
+    } else if (arg === "-d" || arg === "--dir") {
+      config.cwd = next;
+      i++;
+    } else if (arg === "--provider") {
+      config.defaultProvider = next;
+      i++;
+    }
+  }
+  return config;
+}
+async function runInit() {
+  await Promise.resolve().then(() => (init_init(), init_exports));
+}
+function runDaemon(args2) {
+  const config = parseArgs(args2);
+  startDaemon(config);
+}
+if (command === "help" || command === "-h" || command === "--help") {
+  printHelp();
+} else if (command === "init") {
+  runInit();
+} else if (command === "serve") {
+  runDaemon(args.slice(1));
+} else {
+  runDaemon(args);
+}