@kohryan/moodui 0.0.15 → 0.0.16

package/dist/index.js

@@ -30,6 +30,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  MOODUI_ICON_NAMES: () => MOODUI_ICON_NAMES,
+  MoodUIIcon: () => MoodUIIcon,
   MoodUIPromptPlayground: () => MoodUIPromptPlayground,
   MoodUIRuntime: () => MoodUIRuntime,
   assertMoodUISpec: () => assertMoodUISpec,
@@ -110,13 +112,19 @@ function validateNode(input, path) {
       else if (!isString(props.src)) errors.push(`${path}.props.src must be a string`);
       break;
     }
+    case "icon": {
+      const props = input.props;
+      if (!isObject(props)) errors.push(`${path}.props must be an object`);
+      else if (!isString(props.name)) errors.push(`${path}.props.name 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`);
+      errors.push(`${path}.type must be one of: box | text | button | input | image | icon | spacer`);
   }
   if (errors.length > 0) return { ok: false, errors };
   return { ok: true, value: input };
@@ -132,9 +140,11 @@ function isString(value) {
 function renderReact(specInput, options = {}) {
   const spec = assertMoodUISpec(specInput);
   const componentName = options.componentName ?? "MoodUIScreen";
-  const jsx3 = renderNode(spec.root, { indent: 2, onActionProp: "onAction" });
+  const hasIcons = containsIconNode(spec.root);
+  const jsx4 = renderNode(spec.root, { indent: 2, onActionProp: "onAction" });
   return [
     'import * as React from "react";',
+    hasIcons ? 'import { MoodUIIcon } from "@kohryan/moodui";' : "",
     "",
     "export type MoodUIScreenActionHandler = (actionId: string) => void;",
     "",
@@ -145,7 +155,7 @@ function renderReact(specInput, options = {}) {
     `export function ${componentName}(props: MoodUIScreenProps) {`,
     "  const { onAction } = props;",
     "  return (",
-    jsx3,
+    jsx4,
     "  );",
     "}",
     ""
@@ -182,6 +192,8 @@ function renderNode(node, ctx) {
       return renderSelfClosingElement("input", node, ctx);
     case "image":
       return renderSelfClosingElement("img", node, ctx);
+    case "icon":
+      return renderSelfClosingElement("MoodUIIcon", node, ctx);
     case "spacer": {
       const size = node.props?.size ?? 8;
       const style = { width: normalizeCssValue(size), height: normalizeCssValue(size) };
@@ -228,6 +240,12 @@ function buildProps(tag, node, extraProps) {
     if (props.alt) out.push(`alt=${serializeJsxAttrValue(props.alt)}`);
     if (props.fit) mergedStyle.objectFit = props.fit;
   }
+  if (tag === "MoodUIIcon") {
+    if (props.name) out.push(`name=${serializeJsxAttrValue(props.name)}`);
+    if (props.size != null) out.push(`size={${serializeJsValue(props.size)}}`);
+    if (props.color) out.push(`color=${serializeJsxAttrValue(props.color)}`);
+    if (props.strokeWidth != null) out.push(`strokeWidth={${serializeJsValue(props.strokeWidth)}}`);
+  }
   if (Object.keys(mergedStyle).length > 0) {
     out.push(`style={(${serializeJsValue(mergedStyle)} as React.CSSProperties)}`);
   }
@@ -357,32 +375,184 @@ function safeObjectKey(key) {
 function escapeText(value) {
   return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
+function containsIconNode(node) {
+  if (node.type === "icon") return true;
+  if (node.type !== "box") return false;
+  return (node.children ?? []).some((child) => containsIconNode(child));
+}
 function indent(spaces) {
   return " ".repeat(spaces);
 }
 
+// src/react/MoodUIIcon.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var MOODUI_ICON_NAMES = [
+  "sparkles",
+  "search",
+  "settings",
+  "user",
+  "mail",
+  "heart",
+  "home",
+  "plus",
+  "check",
+  "arrow-right",
+  "calendar",
+  "bell",
+  "star",
+  "chart-bar",
+  "message-circle",
+  "shield"
+];
+function MoodUIIcon(props) {
+  const {
+    name,
+    size = 20,
+    color,
+    strokeWidth = 1.8,
+    className,
+    style,
+    title
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      className,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: size,
+        height: size,
+        color,
+        lineHeight: 0,
+        flexShrink: 0,
+        ...style
+      },
+      "aria-hidden": title ? void 0 : true,
+      title,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "svg",
+        {
+          viewBox: "0 0 24 24",
+          width: "100%",
+          height: "100%",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          role: "presentation",
+          children: renderIconPath(name)
+        }
+      )
+    }
+  );
+}
+function renderIconPath(name) {
+  switch (name) {
+    case "sparkles":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 3l1.4 3.6L17 8l-3.6 1.4L12 13l-1.4-3.6L7 8l3.6-1.4L12 3z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 14l.9 2.1L8 17l-2.1.9L5 20l-.9-2.1L2 17l2.1-.9L5 14z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19 13l.9 2.1L22 16l-2.1.9L19 19l-.9-2.1L16 16l2.1-.9L19 13z" })
+      ] });
+    case "search":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "11", cy: "11", r: "6.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16 16l4 4" })
+      ] });
+    case "settings":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19.4 15a1 1 0 0 0 .2 1.1l.1.1a2 2 0 0 1-2.8 2.8l-.1-.1a1 1 0 0 0-1.1-.2 1 1 0 0 0-.6.9V20a2 2 0 0 1-4 0v-.1a1 1 0 0 0-.6-.9 1 1 0 0 0-1.1.2l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1 1 0 0 0 .2-1.1 1 1 0 0 0-.9-.6H4a2 2 0 0 1 0-4h.1a1 1 0 0 0 .9-.6 1 1 0 0 0-.2-1.1l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1 1 0 0 0 1.1.2 1 1 0 0 0 .6-.9V4a2 2 0 0 1 4 0v.1a1 1 0 0 0 .6.9 1 1 0 0 0 1.1-.2l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1 1 0 0 0-.2 1.1 1 1 0 0 0 .9.6H20a2 2 0 0 1 0 4h-.1a1 1 0 0 0-.9.6z" })
+      ] });
+    case "user":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "8", r: "3.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 19a7 7 0 0 1 14 0" })
+      ] });
+    case "mail":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 7l8 6 8-6" })
+      ] });
+    case "heart":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z" });
+    case "home":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 10.5L12 3l9 7.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 9.8V20h14V9.8" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 20v-5h4v5" })
+      ] });
+    case "plus":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 5v14" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 12h14" })
+      ] });
+    case "check":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 12.5l4.2 4.2L19 7.5" });
+    case "arrow-right":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 12h14" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M13 6l6 6-6 6" })
+      ] });
+    case "calendar":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "3", y: "5", width: "18", height: "16", rx: "2.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8 3v4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16 3v4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 10h18" })
+      ] });
+    case "bell":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15 18H5.8a1 1 0 0 1-.8-1.6l1-1.4V11a6 6 0 1 1 12 0v4l1 1.4a1 1 0 0 1-.8 1.6H15" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 20a2 2 0 0 0 4 0" })
+      ] });
+    case "star":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 3l2.8 5.7L21 9.6l-4.5 4.3 1 6.1L12 17l-5.5 3 1-6.1L3 9.6l6.2-.9L12 3z" });
+    case "chart-bar":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 20V10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 20V4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16 20v-7" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M22 20V8" })
+      ] });
+    case "message-circle":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20 11.5a7.5 7.5 0 1 1-3-6" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20 4v5h-5" })
+      ] });
+    case "shield":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 3l7 3v5c0 5-2.7 8.6-7 10-4.3-1.4-7-5-7-10V6l7-3z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9.5 12.5l1.8 1.8 3.7-4.3" })
+      ] });
+  }
+}
+
 // src/react/MoodUIRuntime.tsx
 var React = __toESM(require("react"));
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = 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) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: renderNode2(props.spec.root, props.onAction) });
 }
 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 });
+      const children = node.children?.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(React.Fragment, { children: renderNode2(c, onAction) }, i));
+      return /* @__PURE__ */ (0, import_jsx_runtime2.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 ?? "" });
+      return /* @__PURE__ */ (0, import_jsx_runtime2.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)(
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "button",
         {
           ...commonAttrs(node),
@@ -395,7 +565,7 @@ function renderNode2(node, onAction) {
     }
     case "input": {
       const style = computeStyle2(node);
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "input",
         {
           ...commonAttrs(node),
@@ -408,11 +578,25 @@ function renderNode2(node, onAction) {
     }
     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 ?? "" });
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { ...commonAttrs(node), style, src: node.props?.src, alt: node.props?.alt ?? "" });
+    }
+    case "icon": {
+      const style = computeStyle2(node);
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        MoodUIIcon,
+        {
+          ...commonAttrs(node),
+          style,
+          name: node.props?.name,
+          size: node.props?.size,
+          color: node.props?.color,
+          strokeWidth: node.props?.strokeWidth
+        }
+      );
     }
     case "spacer": {
       const size = node.props?.size ?? 8;
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: size, height: size } });
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { width: size, height: size } });
     }
   }
 }
@@ -484,6 +668,9 @@ function computeStyle2(node) {
     const fit = node.props?.fit;
     if (fit != null) style.objectFit = fit;
   }
+  if (node.type === "icon") {
+    if (typeof props.color === "string") style.color = props.color;
+  }
   if (props.style && typeof props.style === "object" && !Array.isArray(props.style)) {
     Object.assign(style, props.style);
   }
@@ -581,14 +768,20 @@ function buildSystemPrompt() {
     "- 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 } }",
+    "- icon: { type:'icon', props: { name, size?, color?, strokeWidth?, ...common } }",
     "- spacer: { type:'spacer', props?: { size? } }",
     "",
     "common props:",
     "- id, testId, className, style(object), padding, margin, background, borderRadius, width, height",
     "",
+    "Reusable icon names:",
+    "- sparkles, search, settings, user, mail, heart, home, plus, check, arrow-right, calendar, bell, star, chart-bar, message-circle, shield",
+    "",
     "Rules:",
     "- root wajib ada",
     "- minimal pakai box sebagai container utama",
+    "- gunakan icon node bila UI membutuhkan icon navigasi, status, statistik, CTA, atau dekorasi ringan",
+    "- utamakan layout modern: card, section, spacing konsisten, hierarchy yang jelas",
     "- semua string pakai double quotes (JSON standard)",
     "- jangan pakai function / JS expression apa pun"
   ].join("\n");
@@ -767,7 +960,7 @@ async function generateReactFromPrompt(options) {
 }
 
 // src/react/MoodUIPromptPlayground.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function MoodUIPromptPlayground(props) {
   const provider = props.provider ?? "gemini";
   const [model, setModel] = React2.useState(props.model ?? "gemini-3-flash-preview");
@@ -858,11 +1051,11 @@ function MoodUIPromptPlayground(props) {
       }
     }
   }, [code, componentName]);
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontWeight: 700, fontSize: 16 }, children: "MoodUI Prompt" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "input",
           {
             value: provider,
@@ -876,7 +1069,7 @@ function MoodUIPromptPlayground(props) {
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "input",
           {
             value: model,
@@ -886,7 +1079,7 @@ function MoodUIPromptPlayground(props) {
           }
         )
       ] }),
-      provider !== "ollama" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      provider !== "ollama" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "input",
         {
           value: apiKey,
@@ -896,7 +1089,7 @@ function MoodUIPromptPlayground(props) {
           style: { padding: "10px 12px", borderRadius: 10, border: "1px solid #d1d5db" }
         }
       ) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "input",
         {
           value: baseUrl,
@@ -905,7 +1098,7 @@ function MoodUIPromptPlayground(props) {
           style: { padding: "10px 12px", borderRadius: 10, border: "1px solid #d1d5db" }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "textarea",
         {
           value: prompt,
@@ -920,7 +1113,7 @@ function MoodUIPromptPlayground(props) {
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "button",
         {
           type: "button",
@@ -937,7 +1130,7 @@ function MoodUIPromptPlayground(props) {
           children: loading ? "Generating..." : "Generate"
         }
       ),
-      error ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      error ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "pre",
         {
           style: {
@@ -953,13 +1146,13 @@ function MoodUIPromptPlayground(props) {
         }
       ) : 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.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontWeight: 700, fontSize: 16 }, children: "React Code" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: 8 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontWeight: 700, fontSize: 16 }, children: "Preview" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { minHeight: 240, padding: 16, borderRadius: 16, background: "#ffffff", border: "1px solid #e5e7eb" }, children: spec ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MoodUIRuntime, { spec }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { color: "#6b7280" }, children: "Belum ada hasil" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontWeight: 700, fontSize: 16 }, children: "React Code" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: 8 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "button",
             {
               type: "button",
@@ -977,7 +1170,7 @@ function MoodUIPromptPlayground(props) {
               children: copied ? "Copied!" : "Copy"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "button",
             {
               type: "button",
@@ -995,7 +1188,7 @@ function MoodUIPromptPlayground(props) {
               children: "Save to File"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "button",
             {
               type: "button",
@@ -1015,7 +1208,7 @@ function MoodUIPromptPlayground(props) {
           )
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "textarea",
         {
           value: code,
@@ -1035,6 +1228,8 @@ function MoodUIPromptPlayground(props) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  MOODUI_ICON_NAMES,
+  MoodUIIcon,
   MoodUIPromptPlayground,
   MoodUIRuntime,
   assertMoodUISpec,