@kohryan/moodui 0.0.1 → 0.0.3

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,16 +17,27 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  MoodUIPromptPlayground: () => MoodUIPromptPlayground,
+  MoodUIRuntime: () => MoodUIRuntime,
   assertMoodUISpec: () => assertMoodUISpec,
   createGeminiClient: () => createGeminiClient,
   createOllamaClient: () => createOllamaClient,
   createOpenAICompatibleClient: () => createOpenAICompatibleClient,
   generateMoodUISpec: () => generateMoodUISpec,
+  generateReactFromPrompt: () => generateReactFromPrompt,
   renderReact: () => renderReact,
   renderReactJSX: () => renderReactJSX,
   validateMoodUISpec: () => validateMoodUISpec
@@ -119,7 +132,7 @@ function isString(value) {
 function renderReact(specInput, options = {}) {
   const spec = assertMoodUISpec(specInput);
   const componentName = options.componentName ?? "MoodUIScreen";
-  const jsx = renderNode(spec.root, { indent: 2, onActionProp: "onAction" });
+  const jsx3 = renderNode(spec.root, { indent: 2, onActionProp: "onAction" });
   return [
     'import * as React from "react";',
     "",
@@ -132,7 +145,7 @@ function renderReact(specInput, options = {}) {
     `export function ${componentName}(props: MoodUIScreenProps) {`,
     "  const { onAction } = props;",
     "  return (",
-    jsx,
+    jsx3,
     "  );",
     "}",
     ""
@@ -215,7 +228,9 @@ function buildProps(tag, node, extraProps) {
     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)}}`);
+  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}}`);
   }
@@ -232,7 +247,7 @@ function computeStyle(tag, node) {
   applySpacing(style, "padding", props.padding);
   if (node.type === "box") {
     style.display = "flex";
-    style.flexDirection = props.direction ?? "column";
+    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;
@@ -314,6 +329,12 @@ function normalizeCssValue(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)}}`;
 }
@@ -340,131 +361,169 @@ function indent(spaces) {
   return " ".repeat(spaces);
 }
 
-// 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 safeReadText(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;
-    }
-  };
+// src/react/MoodUIRuntime.tsx
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+function MoodUIRuntime(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: renderNode2(props.spec.root, props.onAction) });
 }
-async function safeReadText(res) {
-  try {
-    return await res.text();
-  } catch {
-    return "";
+function renderNode2(node, onAction) {
+  switch (node.type) {
+    case "box": {
+      const style = computeStyle2(node);
+      const children = node.children?.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(React.Fragment, { children: renderNode2(c, onAction) }, i));
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...commonAttrs(node), style, children });
+    }
+    case "text": {
+      const Tag = node.props?.as ?? "p";
+      const style = computeStyle2(node);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tag, { ...commonAttrs(node), style, children: node.props?.value ?? "" });
+    }
+    case "button": {
+      const style = computeStyle2(node);
+      const actionId = node.props?.actionId;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          ...commonAttrs(node),
+          style,
+          disabled: node.props?.disabled ?? false,
+          onClick: actionId ? () => onAction?.(actionId) : void 0,
+          children: node.props?.label ?? ""
+        }
+      );
+    }
+    case "input": {
+      const style = computeStyle2(node);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "input",
+        {
+          ...commonAttrs(node),
+          style,
+          name: node.props?.name,
+          placeholder: node.props?.placeholder,
+          defaultValue: node.props?.defaultValue
+        }
+      );
+    }
+    case "image": {
+      const style = computeStyle2(node);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { ...commonAttrs(node), style, src: node.props?.src, alt: node.props?.alt ?? "" });
+    }
+    case "spacer": {
+      const size = node.props?.size ?? 8;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: size, height: size } });
+    }
   }
 }
-
-// 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 ?? {};
+function commonAttrs(node) {
+  const p = node.props ?? {};
   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 safeReadText2(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;
-    }
+    id: typeof p.id === "string" ? p.id : void 0,
+    className: typeof p.className === "string" ? p.className : void 0,
+    "data-testid": typeof p.testId === "string" ? p.testId : void 0
   };
 }
-async function safeReadText2(res) {
-  try {
-    return await res.text();
-  } catch {
-    return "";
+function computeStyle2(node) {
+  const props = node.props ?? {};
+  const style = {};
+  const width = toCssValue(props.width);
+  const height = toCssValue(props.height);
+  const borderRadius = toCssValue(props.borderRadius);
+  if (width != null) style.width = width;
+  if (height != null) style.height = height;
+  if (typeof props.background === "string") style.background = props.background;
+  if (borderRadius != null) style.borderRadius = borderRadius;
+  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;
+    else style.flexDirection = "column";
+    const gap = toCssValue(props.gap);
+    if (gap != null) style.gap = gap;
+    if (typeof props.align === "string") style.alignItems = props.align;
+    if (typeof props.justify === "string") style.justifyContent = props.justify;
+    if (props.wrap === "nowrap" || props.wrap === "wrap") style.flexWrap = props.wrap;
   }
-}
-
-// 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 safeReadText3(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;
+  if (node.type === "text") {
+    if (typeof props.color === "string") style.color = props.color;
+    const fontSize = toCssValue(props.fontSize);
+    if (fontSize != null) style.fontSize = fontSize;
+    if (typeof props.fontWeight === "string" || typeof props.fontWeight === "number") style.fontWeight = props.fontWeight;
+    if (typeof props.textAlign === "string") style.textAlign = props.textAlign;
+    const asTag = node.props?.as;
+    if (typeof asTag === "string" && asTag.startsWith("h")) style.margin = 0;
+  }
+  if (node.type === "button") {
+    style.cursor = node.props?.disabled ? "not-allowed" : "pointer";
+    style.border = "none";
+    if (style.padding == null) style.padding = "10px 14px";
+    if (style.borderRadius == null) style.borderRadius = 10;
+    const variant = node.props?.variant ?? "primary";
+    if (variant === "primary") {
+      if (style.background == null) style.background = "#111827";
+      if (style.color == null) style.color = "#ffffff";
+    } else if (variant === "secondary") {
+      if (style.background == null) style.background = "#e5e7eb";
+      if (style.color == null) style.color = "#111827";
+    } else {
+      if (style.background == null) style.background = "transparent";
+      if (style.color == null) style.color = "#111827";
     }
-  };
-}
-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: "" }] });
+    if (node.props?.disabled) style.opacity = 0.6;
   }
-  return { systemInstruction, contents };
+  if (node.type === "input") {
+    if (style.padding == null) style.padding = "10px 12px";
+    if (style.borderRadius == null) style.borderRadius = 10;
+    if (style.border == null) style.border = "1px solid #d1d5db";
+    if (style.outline == null) style.outline = "none";
+  }
+  if (node.type === "image") {
+    if (style.maxWidth == null) style.maxWidth = "100%";
+    const fit = node.props?.fit;
+    if (fit != null) style.objectFit = fit;
+  }
+  if (props.style && typeof props.style === "object" && !Array.isArray(props.style)) {
+    Object.assign(style, props.style);
+  }
+  return style;
 }
-async function safeReadText3(res) {
-  try {
-    return await res.text();
-  } catch {
-    return "";
+function applySpacing2(style, kind, value) {
+  if (value == null) return;
+  const s = style;
+  if (typeof value === "number" || typeof value === "string") {
+    s[kind] = toCssValue(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) s[kind] = toCssValue(all);
+  if (x != null) {
+    s[`${kind}Left`] = toCssValue(x);
+    s[`${kind}Right`] = toCssValue(x);
+  }
+  if (y != null) {
+    s[`${kind}Top`] = toCssValue(y);
+    s[`${kind}Bottom`] = toCssValue(y);
+  }
+  if (v.top != null) s[`${kind}Top`] = toCssValue(v.top);
+  if (v.right != null) s[`${kind}Right`] = toCssValue(v.right);
+  if (v.bottom != null) s[`${kind}Bottom`] = toCssValue(v.bottom);
+  if (v.left != null) s[`${kind}Left`] = toCssValue(v.left);
+}
+function toCssValue(value) {
+  if (typeof value === "number") return value;
+  if (typeof value === "string") return value;
+  return void 0;
 }
 
+// src/react/MoodUIPromptPlayground.tsx
+var React2 = __toESM(require("react"));
+
 // src/ai/generateSpec.ts
 async function generateMoodUISpec(llm, options) {
   const maxAttempts = options.maxAttempts ?? 2;
@@ -568,13 +627,320 @@ function parseFirstJsonObject(text) {
   }
   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
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function MoodUIPromptPlayground(props) {
+  const provider = props.provider ?? "gemini";
+  const [model, setModel] = React2.useState(props.model ?? "gemini-3-flash-preview");
+  const [apiKey, setApiKey] = React2.useState(props.apiKey ?? "");
+  const [baseUrl, setBaseUrl] = React2.useState(props.baseUrl ?? "");
+  const [prompt, setPrompt] = React2.useState(
+    props.defaultPrompt ?? "Buat UI mood tracker: judul, input mood, tombol Simpan (actionId save_mood), dan section riwayat."
+  );
+  const [loading, setLoading] = React2.useState(false);
+  const [error, setError] = React2.useState(null);
+  const [spec, setSpec] = React2.useState(null);
+  const [code, setCode] = React2.useState("");
+  const onGenerate = React2.useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = provider === "ollama" ? await generateReactFromPrompt({
+        provider: "ollama",
+        model,
+        baseUrl: baseUrl || void 0,
+        prompt,
+        componentName: props.componentName
+      }) : provider === "openai-compatible" ? await generateReactFromPrompt({
+        provider: "openai-compatible",
+        model,
+        baseUrl: baseUrl || "",
+        apiKey,
+        prompt,
+        componentName: props.componentName
+      }) : await generateReactFromPrompt({
+        provider: "gemini",
+        model,
+        apiKey,
+        baseUrl: baseUrl || void 0,
+        prompt,
+        componentName: props.componentName
+      });
+      setSpec(result.spec);
+      setCode(result.code);
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : String(e);
+      setError(msg);
+    } finally {
+      setLoading(false);
+    }
+  }, [apiKey, baseUrl, model, prompt, props.componentName, provider]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontWeight: 700, fontSize: 16 }, children: "MoodUI Prompt" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "input",
+          {
+            value: provider,
+            readOnly: true,
+            style: {
+              padding: "10px 12px",
+              borderRadius: 10,
+              border: "1px solid #d1d5db",
+              background: "#f3f4f6",
+              width: 200
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "input",
+          {
+            value: model,
+            onChange: (e) => setModel(e.target.value),
+            placeholder: "model",
+            style: { padding: "10px 12px", borderRadius: 10, border: "1px solid #d1d5db", flex: "1 1 220px" }
+          }
+        )
+      ] }),
+      provider !== "ollama" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "input",
+        {
+          value: apiKey,
+          onChange: (e) => setApiKey(e.target.value),
+          placeholder: "API key",
+          type: "password",
+          style: { padding: "10px 12px", borderRadius: 10, border: "1px solid #d1d5db" }
+        }
+      ) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "input",
+        {
+          value: baseUrl,
+          onChange: (e) => setBaseUrl(e.target.value),
+          placeholder: provider === "ollama" ? "baseUrl (optional) e.g. http://localhost:11434" : "baseUrl (optional)",
+          style: { padding: "10px 12px", borderRadius: 10, border: "1px solid #d1d5db" }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "textarea",
+        {
+          value: prompt,
+          onChange: (e) => setPrompt(e.target.value),
+          rows: 10,
+          style: {
+            padding: 12,
+            borderRadius: 12,
+            border: "1px solid #d1d5db",
+            fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+            fontSize: 12
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: onGenerate,
+          disabled: loading,
+          style: {
+            padding: "10px 12px",
+            borderRadius: 10,
+            border: "1px solid #111827",
+            background: "#111827",
+            color: "#ffffff",
+            cursor: loading ? "not-allowed" : "pointer"
+          },
+          children: loading ? "Generating..." : "Generate"
+        }
+      ),
+      error ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "pre",
+        {
+          style: {
+            margin: 0,
+            padding: 12,
+            borderRadius: 12,
+            border: "1px solid #7f1d1d",
+            background: "#fef2f2",
+            color: "#7f1d1d",
+            whiteSpace: "pre-wrap"
+          },
+          children: error
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontWeight: 700, fontSize: 16 }, children: "Preview" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { minHeight: 240, padding: 16, borderRadius: 16, background: "#ffffff", border: "1px solid #e5e7eb" }, children: spec ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MoodUIRuntime, { spec }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { color: "#6b7280" }, children: "Belum ada hasil" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontWeight: 700, fontSize: 16 }, children: "React Code" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "textarea",
+        {
+          value: code,
+          readOnly: true,
+          rows: 12,
+          style: {
+            padding: 12,
+            borderRadius: 12,
+            border: "1px solid #d1d5db",
+            fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+            fontSize: 12
+          }
+        }
+      )
+    ] })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  MoodUIPromptPlayground,
+  MoodUIRuntime,
   assertMoodUISpec,
   createGeminiClient,
   createOllamaClient,
   createOpenAICompatibleClient,
   generateMoodUISpec,
+  generateReactFromPrompt,
   renderReact,
   renderReactJSX,
   validateMoodUISpec