@kohryan/moodui 0.0.10 → 0.0.11

package/dist/cli.mjs

@@ -1,8 +1,5 @@
 #!/usr/bin/env node
 #!/usr/bin/env node
-import {
-  generateReactFromPrompt
-} from "./chunk-WRMZ2MC6.mjs";
 
 // src/cli.ts
 import fs6 from "fs/promises";
@@ -524,6 +521,562 @@ defineLazyProperty(apps, "browser", () => "browser");
 defineLazyProperty(apps, "browserPrivate", () => "browserPrivate");
 var open_default = open;
 
+// src/validate.ts
+function validateMoodUISpec(input) {
+  const errors = [];
+  if (!isObject(input)) {
+    return { ok: false, errors: ["spec must be an object"] };
+  }
+  const version = input.version;
+  if (version !== 1) errors.push("spec.version must be 1");
+  const root = input.root;
+  const rootResult = validateNode(root, "spec.root");
+  if (!rootResult.ok) errors.push(...rootResult.errors);
+  if (errors.length > 0) return { ok: false, errors };
+  return { ok: true, value: input };
+}
+function assertMoodUISpec(input) {
+  const result = validateMoodUISpec(input);
+  if (!result.ok) {
+    const message = ["Invalid MoodUI spec:", ...result.errors.map((e) => `- ${e}`)].join("\n");
+    throw new Error(message);
+  }
+  return result.value;
+}
+function validateNode(input, path3) {
+  const errors = [];
+  if (!isObject(input)) return { ok: false, errors: [`${path3} must be an object`] };
+  const type = input.type;
+  if (!isString(type)) return { ok: false, errors: [`${path3}.type must be a string`] };
+  switch (type) {
+    case "box": {
+      const children = input.children;
+      if (children != null) {
+        if (!Array.isArray(children)) {
+          errors.push(`${path3}.children must be an array`);
+        } else {
+          for (let i = 0; i < children.length; i += 1) {
+            const child = children[i];
+            const childResult = validateNode(child, `${path3}.children[${i}]`);
+            if (!childResult.ok) errors.push(...childResult.errors);
+          }
+        }
+      }
+      break;
+    }
+    case "text": {
+      const props = input.props;
+      if (!isObject(props)) errors.push(`${path3}.props must be an object`);
+      else if (!isString(props.value)) errors.push(`${path3}.props.value must be a string`);
+      break;
+    }
+    case "button": {
+      const props = input.props;
+      if (!isObject(props)) errors.push(`${path3}.props must be an object`);
+      else if (!isString(props.label)) errors.push(`${path3}.props.label must be a string`);
+      break;
+    }
+    case "input": {
+      const props = input.props;
+      if (props != null && !isObject(props)) errors.push(`${path3}.props must be an object if provided`);
+      break;
+    }
+    case "image": {
+      const props = input.props;
+      if (!isObject(props)) errors.push(`${path3}.props must be an object`);
+      else if (!isString(props.src)) errors.push(`${path3}.props.src must be a string`);
+      break;
+    }
+    case "spacer": {
+      const props = input.props;
+      if (props != null && !isObject(props)) errors.push(`${path3}.props must be an object if provided`);
+      break;
+    }
+    default:
+      errors.push(`${path3}.type must be one of: box | text | button | input | image | spacer`);
+  }
+  if (errors.length > 0) return { ok: false, errors };
+  return { ok: true, value: input };
+}
+function isObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function isString(value) {
+  return typeof value === "string";
+}
+
+// src/ai/generateSpec.ts
+async function generateMoodUISpec(llm, options) {
+  const maxAttempts = options.maxAttempts ?? 2;
+  if (maxAttempts < 1) throw new Error("maxAttempts must be >= 1");
+  const system = buildSystemPrompt();
+  const user = buildUserPrompt(options.prompt);
+  let lastRaw = "";
+  let lastError = void 0;
+  for (let attempt = 1; attempt <= maxAttempts; attempt += 1) {
+    const messages = [
+      { role: "system", content: system },
+      { role: "user", content: user }
+    ];
+    if (attempt > 1) {
+      messages.push({
+        role: "user",
+        content: "Perbaiki output kamu supaya valid JSON dan valid MoodUISpec. Output hanya JSON."
+      });
+    }
+    const raw = await llm.chat({
+      model: options.model,
+      temperature: options.temperature,
+      messages
+    });
+    lastRaw = raw;
+    try {
+      const json = parseFirstJsonObject(raw);
+      const spec = assertMoodUISpec(json);
+      return { spec, raw };
+    } catch (e) {
+      lastError = e;
+    }
+  }
+  const message = lastError instanceof Error ? lastError.message : String(lastError);
+  throw new Error(`Failed to generate valid MoodUISpec. Last error: ${message}
+
+Raw:
+${lastRaw}`);
+}
+function buildSystemPrompt() {
+  return [
+    "Kamu adalah generator JSON untuk MoodUI.",
+    "TUGAS: keluarkan 1 objek JSON yang valid, sesuai schema MoodUISpec versi 1.",
+    "JANGAN keluarkan markdown, JANGAN ada penjelasan, JANGAN pakai backticks.",
+    "",
+    "MoodUISpec shape:",
+    "{",
+    '  "version": 1,',
+    '  "root": MoodUINode',
+    "}",
+    "",
+    "MoodUINode union:",
+    "- box: { type:'box', props?: { direction?, gap?, align?, justify?, wrap?, ...common }, children?: MoodUINode[] }",
+    "- text: { type:'text', props: { value: string, as?, color?, fontSize?, fontWeight?, textAlign?, ...common } }",
+    "- button: { type:'button', props: { label: string, variant?, actionId?, disabled?, ...common } }",
+    "- input: { type:'input', props?: { name?, placeholder?, defaultValue?, ...common } }",
+    "- image: { type:'image', props: { src: string, alt?, fit?, ...common } }",
+    "- spacer: { type:'spacer', props?: { size? } }",
+    "",
+    "common props:",
+    "- id, testId, className, style(object), padding, margin, background, borderRadius, width, height",
+    "",
+    "Rules:",
+    "- root wajib ada",
+    "- minimal pakai box sebagai container utama",
+    "- semua string pakai double quotes (JSON standard)",
+    "- jangan pakai function / JS expression apa pun"
+  ].join("\n");
+}
+function buildUserPrompt(prompt) {
+  return ["Buat UI dari request ini:", prompt].join("\n");
+}
+function parseFirstJsonObject(text) {
+  const start = text.indexOf("{");
+  if (start < 0) throw new Error("No JSON object found");
+  let depth = 0;
+  let inString = false;
+  let escaped = false;
+  for (let i = start; i < text.length; i += 1) {
+    const ch = text[i];
+    if (inString) {
+      if (escaped) {
+        escaped = false;
+      } else if (ch === "\\") {
+        escaped = true;
+      } else if (ch === '"') {
+        inString = false;
+      }
+      continue;
+    }
+    if (ch === '"') {
+      inString = true;
+      continue;
+    }
+    if (ch === "{") depth += 1;
+    else if (ch === "}") depth -= 1;
+    if (depth === 0) {
+      const candidate = text.slice(start, i + 1);
+      return JSON.parse(candidate);
+    }
+  }
+  throw new Error("Unterminated JSON object");
+}
+
+// src/react/renderReact.ts
+function renderReact(specInput, options = {}) {
+  const spec = assertMoodUISpec(specInput);
+  const componentName = options.componentName ?? "MoodUIScreen";
+  const jsx = renderNode(spec.root, { indent: 2, onActionProp: "onAction" });
+  return [
+    'import * as React from "react";',
+    "",
+    "export type MoodUIScreenActionHandler = (actionId: string) => void;",
+    "",
+    "export type MoodUIScreenProps = {",
+    "  onAction?: MoodUIScreenActionHandler;",
+    "};",
+    "",
+    `export function ${componentName}(props: MoodUIScreenProps) {`,
+    "  const { onAction } = props;",
+    "  return (",
+    jsx,
+    "  );",
+    "}",
+    ""
+  ].join("\n");
+}
+function renderNode(node, ctx) {
+  switch (node.type) {
+    case "box":
+      return renderElement("div", node, ctx, () => {
+        const children = node.children ?? [];
+        if (children.length === 0) return [];
+        return children.map((child) => renderNode(child, { ...ctx, indent: ctx.indent + 2 }));
+      });
+    case "text": {
+      const as = node.props?.as ?? "p";
+      const text = escapeText(node.props?.value ?? "");
+      return renderElement(as, node, ctx, () => [indent(ctx.indent + 2) + text]);
+    }
+    case "button": {
+      const label = escapeText(node.props?.label ?? "");
+      const actionId = node.props?.actionId;
+      return renderElement(
+        "button",
+        node,
+        ctx,
+        () => [indent(ctx.indent + 2) + label],
+        actionId ? { onClick: `() => ${ctx.onActionProp}?.(${serializeJsValue(actionId)})` } : void 0
+      );
+    }
+    case "input":
+      return renderSelfClosingElement("input", node, ctx);
+    case "image":
+      return renderSelfClosingElement("img", node, ctx);
+    case "spacer": {
+      const size = node.props?.size ?? 8;
+      const style = { width: normalizeCssValue(size), height: normalizeCssValue(size) };
+      return renderElement(
+        "div",
+        { type: "box", props: { style }, children: [] },
+        ctx,
+        () => []
+      );
+    }
+  }
+}
+function renderElement(tag, node, ctx, renderChildren, extraProps) {
+  const children = renderChildren();
+  const propParts = buildProps(tag, node, extraProps);
+  const open2 = `<${tag}${propParts.length ? " " + propParts.join(" ") : ""}>`;
+  const close = `</${tag}>`;
+  if (children.length === 0) return indent(ctx.indent) + open2 + close;
+  return [
+    indent(ctx.indent) + open2,
+    ...children,
+    indent(ctx.indent) + close
+  ].join("\n");
+}
+function renderSelfClosingElement(tag, node, ctx) {
+  const propParts = buildProps(tag, node);
+  return indent(ctx.indent) + `<${tag}${propParts.length ? " " + propParts.join(" ") : ""} />`;
+}
+function buildProps(tag, node, extraProps) {
+  const props = node.props ?? {};
+  const out = [];
+  if (props.id) out.push(`id=${serializeJsxAttrValue(props.id)}`);
+  if (props.testId) out.push(`data-testid=${serializeJsxAttrValue(props.testId)}`);
+  if (props.className) out.push(`className=${serializeJsxAttrValue(props.className)}`);
+  const computedStyle = computeStyle(tag, node);
+  const mergedStyle = mergeStyle(computedStyle, props.style) ?? {};
+  if (tag === "input") {
+    if (props.name) out.push(`name=${serializeJsxAttrValue(props.name)}`);
+    if (props.placeholder) out.push(`placeholder=${serializeJsxAttrValue(props.placeholder)}`);
+    if (props.defaultValue) out.push(`defaultValue=${serializeJsxAttrValue(props.defaultValue)}`);
+  }
+  if (tag === "img") {
+    if (props.src) out.push(`src=${serializeJsxAttrValue(props.src)}`);
+    if (props.alt) out.push(`alt=${serializeJsxAttrValue(props.alt)}`);
+    if (props.fit) mergedStyle.objectFit = props.fit;
+  }
+  if (Object.keys(mergedStyle).length > 0) {
+    out.push(`style={(${serializeJsValue(mergedStyle)} as React.CSSProperties)}`);
+  }
+  if (extraProps) {
+    for (const [k, v] of Object.entries(extraProps)) out.push(`${k}={${v}}`);
+  }
+  return out;
+}
+function computeStyle(tag, node) {
+  const props = node.props ?? {};
+  const style = {};
+  if (props.width != null) style.width = normalizeCssValue(props.width);
+  if (props.height != null) style.height = normalizeCssValue(props.height);
+  if (props.background != null) style.background = props.background;
+  if (props.borderRadius != null) style.borderRadius = normalizeCssValue(props.borderRadius);
+  applySpacing(style, "margin", props.margin);
+  applySpacing(style, "padding", props.padding);
+  if (node.type === "box") {
+    style.display = "flex";
+    style.flexDirection = normalizeFlexDirection(props.direction) ?? "column";
+    if (props.gap != null) style.gap = normalizeCssValue(props.gap);
+    if (props.align != null) style.alignItems = props.align;
+    if (props.justify != null) style.justifyContent = props.justify;
+    if (props.wrap != null) style.flexWrap = props.wrap;
+  }
+  if (node.type === "text") {
+    if (props.color != null) style.color = props.color;
+    if (props.fontSize != null) style.fontSize = normalizeCssValue(props.fontSize);
+    if (props.fontWeight != null) style.fontWeight = props.fontWeight;
+    if (props.textAlign != null) style.textAlign = props.textAlign;
+    if (tag.startsWith("h")) style.margin = 0;
+  }
+  if (node.type === "button") {
+    style.cursor = "pointer";
+    style.border = "none";
+    style.padding = "10px 14px";
+    style.borderRadius = 10;
+    const variant = props.variant ?? "primary";
+    if (variant === "primary") {
+      style.background = "#111827";
+      style.color = "#ffffff";
+    } else if (variant === "secondary") {
+      style.background = "#e5e7eb";
+      style.color = "#111827";
+    } else {
+      style.background = "transparent";
+      style.color = "#111827";
+    }
+    if (props.disabled) {
+      style.opacity = 0.6;
+      style.cursor = "not-allowed";
+    }
+  }
+  if (node.type === "input") {
+    style.padding = "10px 12px";
+    style.borderRadius = 10;
+    style.border = "1px solid #d1d5db";
+    style.outline = "none";
+  }
+  if (node.type === "image") {
+    if (props.fit != null) style.objectFit = props.fit;
+    style.maxWidth = "100%";
+  }
+  return style;
+}
+function applySpacing(style, kind, value) {
+  if (value == null) return;
+  if (typeof value === "number" || typeof value === "string") {
+    style[kind] = normalizeCssValue(value);
+    return;
+  }
+  if (typeof value !== "object" || Array.isArray(value)) return;
+  const v = value;
+  const all = v.all;
+  const x = v.x;
+  const y = v.y;
+  if (all != null) style[kind] = normalizeCssValue(all);
+  if (x != null) {
+    style[`${kind}Left`] = normalizeCssValue(x);
+    style[`${kind}Right`] = normalizeCssValue(x);
+  }
+  if (y != null) {
+    style[`${kind}Top`] = normalizeCssValue(y);
+    style[`${kind}Bottom`] = normalizeCssValue(y);
+  }
+  if (v.top != null) style[`${kind}Top`] = normalizeCssValue(v.top);
+  if (v.right != null) style[`${kind}Right`] = normalizeCssValue(v.right);
+  if (v.bottom != null) style[`${kind}Bottom`] = normalizeCssValue(v.bottom);
+  if (v.left != null) style[`${kind}Left`] = normalizeCssValue(v.left);
+}
+function mergeStyle(a, b) {
+  if (!a && !b) return void 0;
+  if (!a) return b;
+  if (!b) return a;
+  return { ...a, ...b };
+}
+function normalizeCssValue(value) {
+  if (typeof value === "number") return value;
+  if (typeof value === "string") return value;
+  return value;
+}
+function normalizeFlexDirection(value) {
+  if (value === "row" || value === "column") return value;
+  if (value === "horizontal") return "row";
+  if (value === "vertical") return "column";
+  return void 0;
+}
+function serializeJsxAttrValue(value) {
+  return `{${serializeJsValue(value)}}`;
+}
+function serializeJsValue(value) {
+  if (value === null) return "null";
+  if (value === void 0) return "undefined";
+  if (typeof value === "string") return JSON.stringify(value);
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  if (Array.isArray(value)) return `[${value.map(serializeJsValue).join(", ")}]`;
+  if (typeof value === "object") {
+    const entries = Object.entries(value).filter(([, v]) => v !== void 0).map(([k, v]) => `${safeObjectKey(k)}: ${serializeJsValue(v)}`);
+    return `{ ${entries.join(", ")} }`;
+  }
+  return "undefined";
+}
+function safeObjectKey(key) {
+  if (/^[A-Za-z_$][A-Za-z0-9_$]*$/.test(key)) return key;
+  return JSON.stringify(key);
+}
+function escapeText(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function indent(spaces) {
+  return " ".repeat(spaces);
+}
+
+// src/llm/gemini.ts
+function createGeminiClient(options) {
+  const baseUrl = (options.baseUrl ?? "https://generativelanguage.googleapis.com").replace(/\/+$/, "");
+  const fetchFn = options.fetchFn ?? fetch;
+  const apiKey = options.apiKey;
+  return {
+    async chat(req) {
+      const { systemInstruction, contents } = toGeminiContents(req.messages);
+      const url = `${baseUrl}/v1beta/models/${encodeURIComponent(req.model)}:generateContent?key=${encodeURIComponent(apiKey)}`;
+      const res = await fetchFn(url, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          ...systemInstruction ? { systemInstruction } : {},
+          contents,
+          generationConfig: req.temperature == null ? void 0 : { temperature: req.temperature }
+        })
+      });
+      if (!res.ok) {
+        const text2 = await safeReadText(res);
+        throw new Error(`Gemini generateContent failed (${res.status}): ${text2}`);
+      }
+      const json = await res.json();
+      const parts = json?.candidates?.[0]?.content?.parts;
+      const text = Array.isArray(parts) ? parts.map((p) => typeof p?.text === "string" ? p.text : "").join("") : void 0;
+      if (typeof text !== "string" || text.length === 0) throw new Error("Gemini response missing candidates[0].content.parts[].text");
+      return text;
+    }
+  };
+}
+function toGeminiContents(messages) {
+  const systemTexts = messages.filter((m) => m.role === "system").map((m) => m.content).filter((t) => t.trim().length > 0);
+  const systemInstruction = systemTexts.length > 0 ? { role: "system", parts: [{ text: systemTexts.join("\n") }] } : void 0;
+  const contents = messages.filter((m) => m.role !== "system").map((m) => ({
+    role: m.role === "assistant" ? "model" : "user",
+    parts: [{ text: m.content }]
+  }));
+  if (contents.length === 0) {
+    contents.push({ role: "user", parts: [{ text: "" }] });
+  }
+  return { systemInstruction, contents };
+}
+async function safeReadText(res) {
+  try {
+    return await res.text();
+  } catch {
+    return "";
+  }
+}
+
+// src/llm/ollama.ts
+function createOllamaClient(options = {}) {
+  const baseUrl = options.baseUrl ?? "http://localhost:11434";
+  const fetchFn = options.fetchFn ?? fetch;
+  return {
+    async chat(req) {
+      const res = await fetchFn(`${baseUrl}/api/chat`, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          model: req.model,
+          messages: req.messages,
+          stream: false,
+          options: req.temperature == null ? void 0 : { temperature: req.temperature }
+        })
+      });
+      if (!res.ok) {
+        const text = await safeReadText2(res);
+        throw new Error(`Ollama chat failed (${res.status}): ${text}`);
+      }
+      const json = await res.json();
+      const content = json?.message?.content;
+      if (typeof content !== "string") throw new Error("Ollama response missing message.content");
+      return content;
+    }
+  };
+}
+async function safeReadText2(res) {
+  try {
+    return await res.text();
+  } catch {
+    return "";
+  }
+}
+
+// src/llm/openaiCompatible.ts
+function createOpenAICompatibleClient(options) {
+  const fetchFn = options.fetchFn ?? fetch;
+  const baseUrl = options.baseUrl.replace(/\/+$/, "");
+  const apiKey = options.apiKey;
+  const defaultHeaders = options.defaultHeaders ?? {};
+  return {
+    async chat(req) {
+      const res = await fetchFn(`${baseUrl}/v1/chat/completions`, {
+        method: "POST",
+        headers: {
+          "content-type": "application/json",
+          authorization: `Bearer ${apiKey}`,
+          ...defaultHeaders
+        },
+        body: JSON.stringify({
+          model: req.model,
+          messages: req.messages,
+          temperature: req.temperature
+        })
+      });
+      if (!res.ok) {
+        const text = await safeReadText3(res);
+        throw new Error(`Chat completion failed (${res.status}): ${text}`);
+      }
+      const json = await res.json();
+      const content = json?.choices?.[0]?.message?.content;
+      if (typeof content !== "string") throw new Error("Response missing choices[0].message.content");
+      return content;
+    }
+  };
+}
+async function safeReadText3(res) {
+  try {
+    return await res.text();
+  } catch {
+    return "";
+  }
+}
+
+// src/ai/generateReactFromPrompt.ts
+async function generateReactFromPrompt(options) {
+  const llm = options.provider === "gemini" ? createGeminiClient({ apiKey: options.apiKey, baseUrl: options.baseUrl }) : options.provider === "ollama" ? createOllamaClient({ baseUrl: options.baseUrl }) : createOpenAICompatibleClient({ apiKey: options.apiKey, baseUrl: options.baseUrl });
+  const { spec, raw } = await generateMoodUISpec(llm, {
+    model: options.model,
+    prompt: options.prompt,
+    temperature: options.temperature,
+    maxAttempts: options.maxAttempts
+  });
+  const code = renderReact(spec, { componentName: options.componentName });
+  return { spec, raw, code };
+}
+
 // src/cli.ts
 var __dirname2 = path2.dirname(fileURLToPath2(import.meta.url));
 async function main() {

package/dist/index.js

@@ -1,4 +1,3 @@
-#!/usr/bin/env node
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;

package/dist/index.mjs

@@ -1,36 +1,340 @@
-#!/usr/bin/env node
-import {
-  assertMoodUISpec,
-  createGeminiClient,
-  createOllamaClient,
-  createOpenAICompatibleClient,
-  generateMoodUISpec,
-  generateReactFromPrompt,
-  renderReact,
-  renderReactJSX,
-  validateMoodUISpec
-} from "./chunk-WRMZ2MC6.mjs";
+// src/validate.ts
+function validateMoodUISpec(input) {
+  const errors = [];
+  if (!isObject(input)) {
+    return { ok: false, errors: ["spec must be an object"] };
+  }
+  const version = input.version;
+  if (version !== 1) errors.push("spec.version must be 1");
+  const root = input.root;
+  const rootResult = validateNode(root, "spec.root");
+  if (!rootResult.ok) errors.push(...rootResult.errors);
+  if (errors.length > 0) return { ok: false, errors };
+  return { ok: true, value: input };
+}
+function assertMoodUISpec(input) {
+  const result = validateMoodUISpec(input);
+  if (!result.ok) {
+    const message = ["Invalid MoodUI spec:", ...result.errors.map((e) => `- ${e}`)].join("\n");
+    throw new Error(message);
+  }
+  return result.value;
+}
+function validateNode(input, path) {
+  const errors = [];
+  if (!isObject(input)) return { ok: false, errors: [`${path} must be an object`] };
+  const type = input.type;
+  if (!isString(type)) return { ok: false, errors: [`${path}.type must be a string`] };
+  switch (type) {
+    case "box": {
+      const children = input.children;
+      if (children != null) {
+        if (!Array.isArray(children)) {
+          errors.push(`${path}.children must be an array`);
+        } else {
+          for (let i = 0; i < children.length; i += 1) {
+            const child = children[i];
+            const childResult = validateNode(child, `${path}.children[${i}]`);
+            if (!childResult.ok) errors.push(...childResult.errors);
+          }
+        }
+      }
+      break;
+    }
+    case "text": {
+      const props = input.props;
+      if (!isObject(props)) errors.push(`${path}.props must be an object`);
+      else if (!isString(props.value)) errors.push(`${path}.props.value must be a string`);
+      break;
+    }
+    case "button": {
+      const props = input.props;
+      if (!isObject(props)) errors.push(`${path}.props must be an object`);
+      else if (!isString(props.label)) errors.push(`${path}.props.label must be a string`);
+      break;
+    }
+    case "input": {
+      const props = input.props;
+      if (props != null && !isObject(props)) errors.push(`${path}.props must be an object if provided`);
+      break;
+    }
+    case "image": {
+      const props = input.props;
+      if (!isObject(props)) errors.push(`${path}.props must be an object`);
+      else if (!isString(props.src)) errors.push(`${path}.props.src must be a string`);
+      break;
+    }
+    case "spacer": {
+      const props = input.props;
+      if (props != null && !isObject(props)) errors.push(`${path}.props must be an object if provided`);
+      break;
+    }
+    default:
+      errors.push(`${path}.type must be one of: box | text | button | input | image | spacer`);
+  }
+  if (errors.length > 0) return { ok: false, errors };
+  return { ok: true, value: input };
+}
+function isObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function isString(value) {
+  return typeof value === "string";
+}
+
+// src/react/renderReact.ts
+function renderReact(specInput, options = {}) {
+  const spec = assertMoodUISpec(specInput);
+  const componentName = options.componentName ?? "MoodUIScreen";
+  const jsx3 = renderNode(spec.root, { indent: 2, onActionProp: "onAction" });
+  return [
+    'import * as React from "react";',
+    "",
+    "export type MoodUIScreenActionHandler = (actionId: string) => void;",
+    "",
+    "export type MoodUIScreenProps = {",
+    "  onAction?: MoodUIScreenActionHandler;",
+    "};",
+    "",
+    `export function ${componentName}(props: MoodUIScreenProps) {`,
+    "  const { onAction } = props;",
+    "  return (",
+    jsx3,
+    "  );",
+    "}",
+    ""
+  ].join("\n");
+}
+function renderReactJSX(node) {
+  return renderNode(node, { indent: 0, onActionProp: "onAction" }).trimEnd();
+}
+function renderNode(node, ctx) {
+  switch (node.type) {
+    case "box":
+      return renderElement("div", node, ctx, () => {
+        const children = node.children ?? [];
+        if (children.length === 0) return [];
+        return children.map((child) => renderNode(child, { ...ctx, indent: ctx.indent + 2 }));
+      });
+    case "text": {
+      const as = node.props?.as ?? "p";
+      const text = escapeText(node.props?.value ?? "");
+      return renderElement(as, node, ctx, () => [indent(ctx.indent + 2) + text]);
+    }
+    case "button": {
+      const label = escapeText(node.props?.label ?? "");
+      const actionId = node.props?.actionId;
+      return renderElement(
+        "button",
+        node,
+        ctx,
+        () => [indent(ctx.indent + 2) + label],
+        actionId ? { onClick: `() => ${ctx.onActionProp}?.(${serializeJsValue(actionId)})` } : void 0
+      );
+    }
+    case "input":
+      return renderSelfClosingElement("input", node, ctx);
+    case "image":
+      return renderSelfClosingElement("img", node, ctx);
+    case "spacer": {
+      const size = node.props?.size ?? 8;
+      const style = { width: normalizeCssValue(size), height: normalizeCssValue(size) };
+      return renderElement(
+        "div",
+        { type: "box", props: { style }, children: [] },
+        ctx,
+        () => []
+      );
+    }
+  }
+}
+function renderElement(tag, node, ctx, renderChildren, extraProps) {
+  const children = renderChildren();
+  const propParts = buildProps(tag, node, extraProps);
+  const open = `<${tag}${propParts.length ? " " + propParts.join(" ") : ""}>`;
+  const close = `</${tag}>`;
+  if (children.length === 0) return indent(ctx.indent) + open + close;
+  return [
+    indent(ctx.indent) + open,
+    ...children,
+    indent(ctx.indent) + close
+  ].join("\n");
+}
+function renderSelfClosingElement(tag, node, ctx) {
+  const propParts = buildProps(tag, node);
+  return indent(ctx.indent) + `<${tag}${propParts.length ? " " + propParts.join(" ") : ""} />`;
+}
+function buildProps(tag, node, extraProps) {
+  const props = node.props ?? {};
+  const out = [];
+  if (props.id) out.push(`id=${serializeJsxAttrValue(props.id)}`);
+  if (props.testId) out.push(`data-testid=${serializeJsxAttrValue(props.testId)}`);
+  if (props.className) out.push(`className=${serializeJsxAttrValue(props.className)}`);
+  const computedStyle = computeStyle(tag, node);
+  const mergedStyle = mergeStyle(computedStyle, props.style) ?? {};
+  if (tag === "input") {
+    if (props.name) out.push(`name=${serializeJsxAttrValue(props.name)}`);
+    if (props.placeholder) out.push(`placeholder=${serializeJsxAttrValue(props.placeholder)}`);
+    if (props.defaultValue) out.push(`defaultValue=${serializeJsxAttrValue(props.defaultValue)}`);
+  }
+  if (tag === "img") {
+    if (props.src) out.push(`src=${serializeJsxAttrValue(props.src)}`);
+    if (props.alt) out.push(`alt=${serializeJsxAttrValue(props.alt)}`);
+    if (props.fit) mergedStyle.objectFit = props.fit;
+  }
+  if (Object.keys(mergedStyle).length > 0) {
+    out.push(`style={(${serializeJsValue(mergedStyle)} as React.CSSProperties)}`);
+  }
+  if (extraProps) {
+    for (const [k, v] of Object.entries(extraProps)) out.push(`${k}={${v}}`);
+  }
+  return out;
+}
+function computeStyle(tag, node) {
+  const props = node.props ?? {};
+  const style = {};
+  if (props.width != null) style.width = normalizeCssValue(props.width);
+  if (props.height != null) style.height = normalizeCssValue(props.height);
+  if (props.background != null) style.background = props.background;
+  if (props.borderRadius != null) style.borderRadius = normalizeCssValue(props.borderRadius);
+  applySpacing(style, "margin", props.margin);
+  applySpacing(style, "padding", props.padding);
+  if (node.type === "box") {
+    style.display = "flex";
+    style.flexDirection = normalizeFlexDirection(props.direction) ?? "column";
+    if (props.gap != null) style.gap = normalizeCssValue(props.gap);
+    if (props.align != null) style.alignItems = props.align;
+    if (props.justify != null) style.justifyContent = props.justify;
+    if (props.wrap != null) style.flexWrap = props.wrap;
+  }
+  if (node.type === "text") {
+    if (props.color != null) style.color = props.color;
+    if (props.fontSize != null) style.fontSize = normalizeCssValue(props.fontSize);
+    if (props.fontWeight != null) style.fontWeight = props.fontWeight;
+    if (props.textAlign != null) style.textAlign = props.textAlign;
+    if (tag.startsWith("h")) style.margin = 0;
+  }
+  if (node.type === "button") {
+    style.cursor = "pointer";
+    style.border = "none";
+    style.padding = "10px 14px";
+    style.borderRadius = 10;
+    const variant = props.variant ?? "primary";
+    if (variant === "primary") {
+      style.background = "#111827";
+      style.color = "#ffffff";
+    } else if (variant === "secondary") {
+      style.background = "#e5e7eb";
+      style.color = "#111827";
+    } else {
+      style.background = "transparent";
+      style.color = "#111827";
+    }
+    if (props.disabled) {
+      style.opacity = 0.6;
+      style.cursor = "not-allowed";
+    }
+  }
+  if (node.type === "input") {
+    style.padding = "10px 12px";
+    style.borderRadius = 10;
+    style.border = "1px solid #d1d5db";
+    style.outline = "none";
+  }
+  if (node.type === "image") {
+    if (props.fit != null) style.objectFit = props.fit;
+    style.maxWidth = "100%";
+  }
+  return style;
+}
+function applySpacing(style, kind, value) {
+  if (value == null) return;
+  if (typeof value === "number" || typeof value === "string") {
+    style[kind] = normalizeCssValue(value);
+    return;
+  }
+  if (typeof value !== "object" || Array.isArray(value)) return;
+  const v = value;
+  const all = v.all;
+  const x = v.x;
+  const y = v.y;
+  if (all != null) style[kind] = normalizeCssValue(all);
+  if (x != null) {
+    style[`${kind}Left`] = normalizeCssValue(x);
+    style[`${kind}Right`] = normalizeCssValue(x);
+  }
+  if (y != null) {
+    style[`${kind}Top`] = normalizeCssValue(y);
+    style[`${kind}Bottom`] = normalizeCssValue(y);
+  }
+  if (v.top != null) style[`${kind}Top`] = normalizeCssValue(v.top);
+  if (v.right != null) style[`${kind}Right`] = normalizeCssValue(v.right);
+  if (v.bottom != null) style[`${kind}Bottom`] = normalizeCssValue(v.bottom);
+  if (v.left != null) style[`${kind}Left`] = normalizeCssValue(v.left);
+}
+function mergeStyle(a, b) {
+  if (!a && !b) return void 0;
+  if (!a) return b;
+  if (!b) return a;
+  return { ...a, ...b };
+}
+function normalizeCssValue(value) {
+  if (typeof value === "number") return value;
+  if (typeof value === "string") return value;
+  return value;
+}
+function normalizeFlexDirection(value) {
+  if (value === "row" || value === "column") return value;
+  if (value === "horizontal") return "row";
+  if (value === "vertical") return "column";
+  return void 0;
+}
+function serializeJsxAttrValue(value) {
+  return `{${serializeJsValue(value)}}`;
+}
+function serializeJsValue(value) {
+  if (value === null) return "null";
+  if (value === void 0) return "undefined";
+  if (typeof value === "string") return JSON.stringify(value);
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  if (Array.isArray(value)) return `[${value.map(serializeJsValue).join(", ")}]`;
+  if (typeof value === "object") {
+    const entries = Object.entries(value).filter(([, v]) => v !== void 0).map(([k, v]) => `${safeObjectKey(k)}: ${serializeJsValue(v)}`);
+    return `{ ${entries.join(", ")} }`;
+  }
+  return "undefined";
+}
+function safeObjectKey(key) {
+  if (/^[A-Za-z_$][A-Za-z0-9_$]*$/.test(key)) return key;
+  return JSON.stringify(key);
+}
+function escapeText(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function indent(spaces) {
+  return " ".repeat(spaces);
+}
 
 // src/react/MoodUIRuntime.tsx
 import * as React from "react";
 import { Fragment as Fragment2, jsx } from "react/jsx-runtime";
 function MoodUIRuntime(props) {
-  return /* @__PURE__ */ jsx(Fragment2, { children: renderNode(props.spec.root, props.onAction) });
+  return /* @__PURE__ */ jsx(Fragment2, { children: renderNode2(props.spec.root, props.onAction) });
 }
-function renderNode(node, onAction) {
+function renderNode2(node, onAction) {
   switch (node.type) {
     case "box": {
-      const style = computeStyle(node);
-      const children = node.children?.map((c, i) => /* @__PURE__ */ jsx(React.Fragment, { children: renderNode(c, onAction) }, i));
+      const style = computeStyle2(node);
+      const children = node.children?.map((c, i) => /* @__PURE__ */ jsx(React.Fragment, { children: renderNode2(c, onAction) }, i));
       return /* @__PURE__ */ jsx("div", { ...commonAttrs(node), style, children });
     }
     case "text": {
       const Tag = node.props?.as ?? "p";
-      const style = computeStyle(node);
+      const style = computeStyle2(node);
       return /* @__PURE__ */ jsx(Tag, { ...commonAttrs(node), style, children: node.props?.value ?? "" });
     }
     case "button": {
-      const style = computeStyle(node);
+      const style = computeStyle2(node);
       const actionId = node.props?.actionId;
       return /* @__PURE__ */ jsx(
         "button",
@@ -44,7 +348,7 @@ function renderNode(node, onAction) {
       );
     }
     case "input": {
-      const style = computeStyle(node);
+      const style = computeStyle2(node);
       return /* @__PURE__ */ jsx(
         "input",
         {
@@ -57,7 +361,7 @@ function renderNode(node, onAction) {
       );
     }
     case "image": {
-      const style = computeStyle(node);
+      const style = computeStyle2(node);
       return /* @__PURE__ */ jsx("img", { ...commonAttrs(node), style, src: node.props?.src, alt: node.props?.alt ?? "" });
     }
     case "spacer": {
@@ -74,7 +378,7 @@ function commonAttrs(node) {
     "data-testid": typeof p.testId === "string" ? p.testId : void 0
   };
 }
-function computeStyle(node) {
+function computeStyle2(node) {
   const props = node.props ?? {};
   const style = {};
   const width = toCssValue(props.width);
@@ -84,8 +388,8 @@ function computeStyle(node) {
   if (height != null) style.height = height;
   if (typeof props.background === "string") style.background = props.background;
   if (borderRadius != null) style.borderRadius = borderRadius;
-  applySpacing(style, "margin", props.margin);
-  applySpacing(style, "padding", props.padding);
+  applySpacing2(style, "margin", props.margin);
+  applySpacing2(style, "padding", props.padding);
   if (node.type === "box") {
     style.display = "flex";
     if (props.direction === "row" || props.direction === "column") style.flexDirection = props.direction;
@@ -139,7 +443,7 @@ function computeStyle(node) {
   }
   return style;
 }
-function applySpacing(style, kind, value) {
+function applySpacing2(style, kind, value) {
   if (value == null) return;
   const s = style;
   if (typeof value === "number" || typeof value === "string") {
@@ -173,6 +477,250 @@ function toCssValue(value) {
 
 // src/react/MoodUIPromptPlayground.tsx
 import * as React2 from "react";
+
+// src/ai/generateSpec.ts
+async function generateMoodUISpec(llm, options) {
+  const maxAttempts = options.maxAttempts ?? 2;
+  if (maxAttempts < 1) throw new Error("maxAttempts must be >= 1");
+  const system = buildSystemPrompt();
+  const user = buildUserPrompt(options.prompt);
+  let lastRaw = "";
+  let lastError = void 0;
+  for (let attempt = 1; attempt <= maxAttempts; attempt += 1) {
+    const messages = [
+      { role: "system", content: system },
+      { role: "user", content: user }
+    ];
+    if (attempt > 1) {
+      messages.push({
+        role: "user",
+        content: "Perbaiki output kamu supaya valid JSON dan valid MoodUISpec. Output hanya JSON."
+      });
+    }
+    const raw = await llm.chat({
+      model: options.model,
+      temperature: options.temperature,
+      messages
+    });
+    lastRaw = raw;
+    try {
+      const json = parseFirstJsonObject(raw);
+      const spec = assertMoodUISpec(json);
+      return { spec, raw };
+    } catch (e) {
+      lastError = e;
+    }
+  }
+  const message = lastError instanceof Error ? lastError.message : String(lastError);
+  throw new Error(`Failed to generate valid MoodUISpec. Last error: ${message}
+
+Raw:
+${lastRaw}`);
+}
+function buildSystemPrompt() {
+  return [
+    "Kamu adalah generator JSON untuk MoodUI.",
+    "TUGAS: keluarkan 1 objek JSON yang valid, sesuai schema MoodUISpec versi 1.",
+    "JANGAN keluarkan markdown, JANGAN ada penjelasan, JANGAN pakai backticks.",
+    "",
+    "MoodUISpec shape:",
+    "{",
+    '  "version": 1,',
+    '  "root": MoodUINode',
+    "}",
+    "",
+    "MoodUINode union:",
+    "- box: { type:'box', props?: { direction?, gap?, align?, justify?, wrap?, ...common }, children?: MoodUINode[] }",
+    "- text: { type:'text', props: { value: string, as?, color?, fontSize?, fontWeight?, textAlign?, ...common } }",
+    "- button: { type:'button', props: { label: string, variant?, actionId?, disabled?, ...common } }",
+    "- input: { type:'input', props?: { name?, placeholder?, defaultValue?, ...common } }",
+    "- image: { type:'image', props: { src: string, alt?, fit?, ...common } }",
+    "- spacer: { type:'spacer', props?: { size? } }",
+    "",
+    "common props:",
+    "- id, testId, className, style(object), padding, margin, background, borderRadius, width, height",
+    "",
+    "Rules:",
+    "- root wajib ada",
+    "- minimal pakai box sebagai container utama",
+    "- semua string pakai double quotes (JSON standard)",
+    "- jangan pakai function / JS expression apa pun"
+  ].join("\n");
+}
+function buildUserPrompt(prompt) {
+  return ["Buat UI dari request ini:", prompt].join("\n");
+}
+function parseFirstJsonObject(text) {
+  const start = text.indexOf("{");
+  if (start < 0) throw new Error("No JSON object found");
+  let depth = 0;
+  let inString = false;
+  let escaped = false;
+  for (let i = start; i < text.length; i += 1) {
+    const ch = text[i];
+    if (inString) {
+      if (escaped) {
+        escaped = false;
+      } else if (ch === "\\") {
+        escaped = true;
+      } else if (ch === '"') {
+        inString = false;
+      }
+      continue;
+    }
+    if (ch === '"') {
+      inString = true;
+      continue;
+    }
+    if (ch === "{") depth += 1;
+    else if (ch === "}") depth -= 1;
+    if (depth === 0) {
+      const candidate = text.slice(start, i + 1);
+      return JSON.parse(candidate);
+    }
+  }
+  throw new Error("Unterminated JSON object");
+}
+
+// src/llm/gemini.ts
+function createGeminiClient(options) {
+  const baseUrl = (options.baseUrl ?? "https://generativelanguage.googleapis.com").replace(/\/+$/, "");
+  const fetchFn = options.fetchFn ?? fetch;
+  const apiKey = options.apiKey;
+  return {
+    async chat(req) {
+      const { systemInstruction, contents } = toGeminiContents(req.messages);
+      const url = `${baseUrl}/v1beta/models/${encodeURIComponent(req.model)}:generateContent?key=${encodeURIComponent(apiKey)}`;
+      const res = await fetchFn(url, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          ...systemInstruction ? { systemInstruction } : {},
+          contents,
+          generationConfig: req.temperature == null ? void 0 : { temperature: req.temperature }
+        })
+      });
+      if (!res.ok) {
+        const text2 = await safeReadText(res);
+        throw new Error(`Gemini generateContent failed (${res.status}): ${text2}`);
+      }
+      const json = await res.json();
+      const parts = json?.candidates?.[0]?.content?.parts;
+      const text = Array.isArray(parts) ? parts.map((p) => typeof p?.text === "string" ? p.text : "").join("") : void 0;
+      if (typeof text !== "string" || text.length === 0) throw new Error("Gemini response missing candidates[0].content.parts[].text");
+      return text;
+    }
+  };
+}
+function toGeminiContents(messages) {
+  const systemTexts = messages.filter((m) => m.role === "system").map((m) => m.content).filter((t) => t.trim().length > 0);
+  const systemInstruction = systemTexts.length > 0 ? { role: "system", parts: [{ text: systemTexts.join("\n") }] } : void 0;
+  const contents = messages.filter((m) => m.role !== "system").map((m) => ({
+    role: m.role === "assistant" ? "model" : "user",
+    parts: [{ text: m.content }]
+  }));
+  if (contents.length === 0) {
+    contents.push({ role: "user", parts: [{ text: "" }] });
+  }
+  return { systemInstruction, contents };
+}
+async function safeReadText(res) {
+  try {
+    return await res.text();
+  } catch {
+    return "";
+  }
+}
+
+// src/llm/ollama.ts
+function createOllamaClient(options = {}) {
+  const baseUrl = options.baseUrl ?? "http://localhost:11434";
+  const fetchFn = options.fetchFn ?? fetch;
+  return {
+    async chat(req) {
+      const res = await fetchFn(`${baseUrl}/api/chat`, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          model: req.model,
+          messages: req.messages,
+          stream: false,
+          options: req.temperature == null ? void 0 : { temperature: req.temperature }
+        })
+      });
+      if (!res.ok) {
+        const text = await safeReadText2(res);
+        throw new Error(`Ollama chat failed (${res.status}): ${text}`);
+      }
+      const json = await res.json();
+      const content = json?.message?.content;
+      if (typeof content !== "string") throw new Error("Ollama response missing message.content");
+      return content;
+    }
+  };
+}
+async function safeReadText2(res) {
+  try {
+    return await res.text();
+  } catch {
+    return "";
+  }
+}
+
+// src/llm/openaiCompatible.ts
+function createOpenAICompatibleClient(options) {
+  const fetchFn = options.fetchFn ?? fetch;
+  const baseUrl = options.baseUrl.replace(/\/+$/, "");
+  const apiKey = options.apiKey;
+  const defaultHeaders = options.defaultHeaders ?? {};
+  return {
+    async chat(req) {
+      const res = await fetchFn(`${baseUrl}/v1/chat/completions`, {
+        method: "POST",
+        headers: {
+          "content-type": "application/json",
+          authorization: `Bearer ${apiKey}`,
+          ...defaultHeaders
+        },
+        body: JSON.stringify({
+          model: req.model,
+          messages: req.messages,
+          temperature: req.temperature
+        })
+      });
+      if (!res.ok) {
+        const text = await safeReadText3(res);
+        throw new Error(`Chat completion failed (${res.status}): ${text}`);
+      }
+      const json = await res.json();
+      const content = json?.choices?.[0]?.message?.content;
+      if (typeof content !== "string") throw new Error("Response missing choices[0].message.content");
+      return content;
+    }
+  };
+}
+async function safeReadText3(res) {
+  try {
+    return await res.text();
+  } catch {
+    return "";
+  }
+}
+
+// src/ai/generateReactFromPrompt.ts
+async function generateReactFromPrompt(options) {
+  const llm = options.provider === "gemini" ? createGeminiClient({ apiKey: options.apiKey, baseUrl: options.baseUrl }) : options.provider === "ollama" ? createOllamaClient({ baseUrl: options.baseUrl }) : createOpenAICompatibleClient({ apiKey: options.apiKey, baseUrl: options.baseUrl });
+  const { spec, raw } = await generateMoodUISpec(llm, {
+    model: options.model,
+    prompt: options.prompt,
+    temperature: options.temperature,
+    maxAttempts: options.maxAttempts
+  });
+  const code = renderReact(spec, { componentName: options.componentName });
+  return { spec, raw, code };
+}
+
+// src/react/MoodUIPromptPlayground.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function MoodUIPromptPlayground(props) {
   const provider = props.provider ?? "gemini";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kohryan/moodui",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "MoodUI - AI-friendly UI spec + React renderer",
   "license": "MIT",
   "sideEffects": false,