@kohryan/moodui 0.0.2 → 0.0.4

package/dist/index.mjs

@@ -1,256 +1,148 @@
-// 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;
+import {
+  assertMoodUISpec,
+  createGeminiClient,
+  createOllamaClient,
+  createOpenAICompatibleClient,
+  generateMoodUISpec,
+  generateReactFromPrompt,
+  renderReact,
+  renderReactJSX,
+  validateMoodUISpec
+} from "./chunk-5D6KNM5J.mjs";
+
+// 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) });
 }
-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) {
+function renderNode(node, onAction) {
+  switch (node.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;
+      const style = computeStyle(node);
+      const children = node.children?.map((c, i) => /* @__PURE__ */ jsx(React.Fragment, { children: renderNode(c, onAction) }, i));
+      return /* @__PURE__ */ jsx("div", { ...commonAttrs(node), style, children });
     }
     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;
+      const Tag = node.props?.as ?? "p";
+      const style = computeStyle(node);
+      return /* @__PURE__ */ jsx(Tag, { ...commonAttrs(node), style, children: node.props?.value ?? "" });
     }
     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;
+      const style = computeStyle(node);
+      const actionId = node.props?.actionId;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          ...commonAttrs(node),
+          style,
+          disabled: node.props?.disabled ?? false,
+          onClick: actionId ? () => onAction?.(actionId) : void 0,
+          children: node.props?.label ?? ""
+        }
+      );
     }
     case "input": {
-      const props = input.props;
-      if (props != null && !isObject(props)) errors.push(`${path}.props must be an object if provided`);
-      break;
+      const style = computeStyle(node);
+      return /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...commonAttrs(node),
+          style,
+          name: node.props?.name,
+          placeholder: node.props?.placeholder,
+          defaultValue: node.props?.defaultValue
+        }
+      );
     }
     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 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 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]);
+      const style = computeStyle(node);
+      return /* @__PURE__ */ jsx("img", { ...commonAttrs(node), style, src: node.props?.src, alt: node.props?.alt ?? "" });
     }
-    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,
-        () => []
-      );
+      return /* @__PURE__ */ jsx("div", { style: { width: size, height: size } });
     }
   }
 }
-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 commonAttrs(node) {
+  const p = node.props ?? {};
+  return {
+    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
+  };
 }
-function computeStyle(tag, node) {
+function computeStyle(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);
+  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;
   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 (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;
   }
   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 (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 = "pointer";
+    style.cursor = node.props?.disabled ? "not-allowed" : "pointer";
     style.border = "none";
-    style.padding = "10px 14px";
-    style.borderRadius = 10;
-    const variant = props.variant ?? "primary";
+    if (style.padding == null) style.padding = "10px 14px";
+    if (style.borderRadius == null) style.borderRadius = 10;
+    const variant = node.props?.variant ?? "primary";
     if (variant === "primary") {
-      style.background = "#111827";
-      style.color = "#ffffff";
+      if (style.background == null) style.background = "#111827";
+      if (style.color == null) style.color = "#ffffff";
     } else if (variant === "secondary") {
-      style.background = "#e5e7eb";
-      style.color = "#111827";
+      if (style.background == null) style.background = "#e5e7eb";
+      if (style.color == null) style.color = "#111827";
     } else {
-      style.background = "transparent";
-      style.color = "#111827";
-    }
-    if (props.disabled) {
-      style.opacity = 0.6;
-      style.cursor = "not-allowed";
+      if (style.background == null) style.background = "transparent";
+      if (style.color == null) style.color = "#111827";
     }
+    if (node.props?.disabled) style.opacity = 0.6;
   }
   if (node.type === "input") {
-    style.padding = "10px 12px";
-    style.borderRadius = 10;
-    style.border = "1px solid #d1d5db";
-    style.outline = "none";
+    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 (props.fit != null) style.objectFit = props.fit;
-    style.maxWidth = "100%";
+    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;
 }
 function applySpacing(style, kind, value) {
   if (value == null) return;
+  const s = style;
   if (typeof value === "number" || typeof value === "string") {
-    style[kind] = normalizeCssValue(value);
+    s[kind] = toCssValue(value);
     return;
   }
   if (typeof value !== "object" || Array.isArray(value)) return;
@@ -258,305 +150,227 @@ function applySpacing(style, kind, value) {
   const all = v.all;
   const x = v.x;
   const y = v.y;
-  if (all != null) style[kind] = normalizeCssValue(all);
+  if (all != null) s[kind] = toCssValue(all);
   if (x != null) {
-    style[`${kind}Left`] = normalizeCssValue(x);
-    style[`${kind}Right`] = normalizeCssValue(x);
+    s[`${kind}Left`] = toCssValue(x);
+    s[`${kind}Right`] = toCssValue(x);
   }
   if (y != null) {
-    style[`${kind}Top`] = normalizeCssValue(y);
-    style[`${kind}Bottom`] = normalizeCssValue(y);
+    s[`${kind}Top`] = toCssValue(y);
+    s[`${kind}Bottom`] = toCssValue(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 };
+  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 normalizeCssValue(value) {
+function toCssValue(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/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;
-    }
-  };
-}
-async function safeReadText(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 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;
-    }
-  };
-}
-async function safeReadText2(res) {
-  try {
-    return await res.text();
-  } catch {
-    return "";
-  }
-}
 
-// 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;
-    }
-  };
-}
-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 safeReadText3(res) {
-  try {
-    return await res.text();
-  } catch {
-    return "";
-  }
-}
-
-// 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."
+// src/react/MoodUIPromptPlayground.tsx
+import * as React2 from "react";
+import { jsx as jsx2, jsxs } from "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 [copied, setCopied] = React2.useState(false);
+  const onGenerate = React2.useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    setCopied(false);
+    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);
     }
-    const raw = await llm.chat({
-      model: options.model,
-      temperature: options.temperature,
-      messages
-    });
-    lastRaw = raw;
+  }, [apiKey, baseUrl, model, prompt, props.componentName, provider]);
+  const onCopyCode = React2.useCallback(async () => {
+    if (!code) return;
     try {
-      const json = parseFirstJsonObject(raw);
-      const spec = assertMoodUISpec(json);
-      return { spec, raw };
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
     } 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;
+      console.error("Failed to copy:", e);
     }
-    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/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 };
+  }, [code]);
+  return /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+      /* @__PURE__ */ jsx2("div", { style: { fontWeight: 700, fontSize: 16 }, children: "MoodUI Prompt" }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            value: provider,
+            readOnly: true,
+            style: {
+              padding: "10px 12px",
+              borderRadius: 10,
+              border: "1px solid #d1d5db",
+              background: "#f3f4f6",
+              width: 200
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "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__ */ jsx2(
+        "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__ */ jsx2(
+        "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__ */ jsx2(
+        "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__ */ jsx2(
+        "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__ */ jsx2(
+        "pre",
+        {
+          style: {
+            margin: 0,
+            padding: 12,
+            borderRadius: 12,
+            border: "1px solid #7f1d1d",
+            background: "#fef2f2",
+            color: "#7f1d1d",
+            whiteSpace: "pre-wrap"
+          },
+          children: error
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+      /* @__PURE__ */ jsx2("div", { style: { fontWeight: 700, fontSize: 16 }, children: "Preview" }),
+      /* @__PURE__ */ jsx2("div", { style: { minHeight: 240, padding: 16, borderRadius: 16, background: "#ffffff", border: "1px solid #e5e7eb" }, children: spec ? /* @__PURE__ */ jsx2(MoodUIRuntime, { spec }) : /* @__PURE__ */ jsx2("div", { style: { color: "#6b7280" }, children: "Belum ada hasil" }) }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsx2("div", { style: { fontWeight: 700, fontSize: 16 }, children: "React Code" }),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            onClick: onCopyCode,
+            disabled: !code,
+            style: {
+              padding: "6px 12px",
+              borderRadius: 8,
+              border: copied ? "1px solid #16a34a" : "1px solid #6b7280",
+              background: copied ? "#dcfce7" : "#ffffff",
+              color: copied ? "#16a34a" : "#374151",
+              cursor: !code ? "not-allowed" : "pointer",
+              fontSize: 12
+            },
+            children: copied ? "Copied!" : "Copy"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx2(
+        "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
+          }
+        }
+      )
+    ] })
+  ] });
 }
 export {
+  MoodUIPromptPlayground,
+  MoodUIRuntime,
   assertMoodUISpec,
   createGeminiClient,
   createOllamaClient,