@kohryan/moodui 0.0.15 → 0.0.16

package/dist/index.mjs

@@ -64,13 +64,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 };
@@ -86,9 +92,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;",
     "",
@@ -99,7 +107,7 @@ function renderReact(specInput, options = {}) {
     `export function ${componentName}(props: MoodUIScreenProps) {`,
     "  const { onAction } = props;",
     "  return (",
-    jsx3,
+    jsx4,
     "  );",
     "}",
     ""
@@ -136,6 +144,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) };
@@ -182,6 +192,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)}`);
   }
@@ -311,32 +327,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
+import { Fragment, jsx, jsxs } from "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__ */ 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__ */ 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__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("path", { d: "M12 3l1.4 3.6L17 8l-3.6 1.4L12 13l-1.4-3.6L7 8l3.6-1.4L12 3z" }),
+        /* @__PURE__ */ jsx("path", { d: "M5 14l.9 2.1L8 17l-2.1.9L5 20l-.9-2.1L2 17l2.1-.9L5 14z" }),
+        /* @__PURE__ */ jsx("path", { d: "M19 13l.9 2.1L22 16l-2.1.9L19 19l-.9-2.1L16 16l2.1-.9L19 13z" })
+      ] });
+    case "search":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "6.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M16 16l4 4" })
+      ] });
+    case "settings":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" }),
+        /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "8", r: "3.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M5 19a7 7 0 0 1 14 0" })
+      ] });
+    case "mail":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M4 7l8 6 8-6" })
+      ] });
+    case "heart":
+      return /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("path", { d: "M3 10.5L12 3l9 7.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M5 9.8V20h14V9.8" }),
+        /* @__PURE__ */ jsx("path", { d: "M10 20v-5h4v5" })
+      ] });
+    case "plus":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("path", { d: "M12 5v14" }),
+        /* @__PURE__ */ jsx("path", { d: "M5 12h14" })
+      ] });
+    case "check":
+      return /* @__PURE__ */ jsx("path", { d: "M5 12.5l4.2 4.2L19 7.5" });
+    case "arrow-right":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
+        /* @__PURE__ */ jsx("path", { d: "M13 6l6 6-6 6" })
+      ] });
+    case "calendar":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("rect", { x: "3", y: "5", width: "18", height: "16", rx: "2.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M8 3v4" }),
+        /* @__PURE__ */ jsx("path", { d: "M16 3v4" }),
+        /* @__PURE__ */ jsx("path", { d: "M3 10h18" })
+      ] });
+    case "bell":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ 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__ */ jsx("path", { d: "M10 20a2 2 0 0 0 4 0" })
+      ] });
+    case "star":
+      return /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("path", { d: "M4 20V10" }),
+        /* @__PURE__ */ jsx("path", { d: "M10 20V4" }),
+        /* @__PURE__ */ jsx("path", { d: "M16 20v-7" }),
+        /* @__PURE__ */ jsx("path", { d: "M22 20V8" })
+      ] });
+    case "message-circle":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("path", { d: "M20 11.5a7.5 7.5 0 1 1-3-6" }),
+        /* @__PURE__ */ jsx("path", { d: "M20 4v5h-5" })
+      ] });
+    case "shield":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("path", { d: "M12 3l7 3v5c0 5-2.7 8.6-7 10-4.3-1.4-7-5-7-10V6l7-3z" }),
+        /* @__PURE__ */ jsx("path", { d: "M9.5 12.5l1.8 1.8 3.7-4.3" })
+      ] });
+  }
+}
+
 // src/react/MoodUIRuntime.tsx
 import * as React from "react";
-import { Fragment as Fragment2, jsx } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx2 } from "react/jsx-runtime";
 function MoodUIRuntime(props) {
-  return /* @__PURE__ */ jsx(Fragment2, { children: renderNode2(props.spec.root, props.onAction) });
+  return /* @__PURE__ */ jsx2(Fragment3, { 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__ */ jsx(React.Fragment, { children: renderNode2(c, onAction) }, i));
-      return /* @__PURE__ */ jsx("div", { ...commonAttrs(node), style, children });
+      const children = node.children?.map((c, i) => /* @__PURE__ */ jsx2(React.Fragment, { children: renderNode2(c, onAction) }, i));
+      return /* @__PURE__ */ jsx2("div", { ...commonAttrs(node), style, children });
     }
     case "text": {
       const Tag = node.props?.as ?? "p";
       const style = computeStyle2(node);
-      return /* @__PURE__ */ jsx(Tag, { ...commonAttrs(node), style, children: node.props?.value ?? "" });
+      return /* @__PURE__ */ jsx2(Tag, { ...commonAttrs(node), style, children: node.props?.value ?? "" });
     }
     case "button": {
       const style = computeStyle2(node);
       const actionId = node.props?.actionId;
-      return /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx2(
         "button",
         {
           ...commonAttrs(node),
@@ -349,7 +517,7 @@ function renderNode2(node, onAction) {
     }
     case "input": {
       const style = computeStyle2(node);
-      return /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx2(
         "input",
         {
           ...commonAttrs(node),
@@ -362,11 +530,25 @@ function renderNode2(node, onAction) {
     }
     case "image": {
       const style = computeStyle2(node);
-      return /* @__PURE__ */ jsx("img", { ...commonAttrs(node), style, src: node.props?.src, alt: node.props?.alt ?? "" });
+      return /* @__PURE__ */ jsx2("img", { ...commonAttrs(node), style, src: node.props?.src, alt: node.props?.alt ?? "" });
+    }
+    case "icon": {
+      const style = computeStyle2(node);
+      return /* @__PURE__ */ jsx2(
+        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__ */ jsx("div", { style: { width: size, height: size } });
+      return /* @__PURE__ */ jsx2("div", { style: { width: size, height: size } });
     }
   }
 }
@@ -438,6 +620,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);
   }
@@ -535,14 +720,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");
@@ -721,7 +912,7 @@ async function generateReactFromPrompt(options) {
 }
 
 // src/react/MoodUIPromptPlayground.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function MoodUIPromptPlayground(props) {
   const provider = props.provider ?? "gemini";
   const [model, setModel] = React2.useState(props.model ?? "gemini-3-flash-preview");
@@ -812,11 +1003,11 @@ function MoodUIPromptPlayground(props) {
       }
     }
   }, [code, componentName]);
-  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(
+  return /* @__PURE__ */ jsxs2("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }, children: [
+    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+      /* @__PURE__ */ jsx3("div", { style: { fontWeight: 700, fontSize: 16 }, children: "MoodUI Prompt" }),
+      /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ jsx3(
           "input",
           {
             value: provider,
@@ -830,7 +1021,7 @@ function MoodUIPromptPlayground(props) {
             }
           }
         ),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx3(
           "input",
           {
             value: model,
@@ -840,7 +1031,7 @@ function MoodUIPromptPlayground(props) {
           }
         )
       ] }),
-      provider !== "ollama" ? /* @__PURE__ */ jsx2(
+      provider !== "ollama" ? /* @__PURE__ */ jsx3(
         "input",
         {
           value: apiKey,
@@ -850,7 +1041,7 @@ function MoodUIPromptPlayground(props) {
           style: { padding: "10px 12px", borderRadius: 10, border: "1px solid #d1d5db" }
         }
       ) : null,
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx3(
         "input",
         {
           value: baseUrl,
@@ -859,7 +1050,7 @@ function MoodUIPromptPlayground(props) {
           style: { padding: "10px 12px", borderRadius: 10, border: "1px solid #d1d5db" }
         }
       ),
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx3(
         "textarea",
         {
           value: prompt,
@@ -874,7 +1065,7 @@ function MoodUIPromptPlayground(props) {
           }
         }
       ),
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx3(
         "button",
         {
           type: "button",
@@ -891,7 +1082,7 @@ function MoodUIPromptPlayground(props) {
           children: loading ? "Generating..." : "Generate"
         }
       ),
-      error ? /* @__PURE__ */ jsx2(
+      error ? /* @__PURE__ */ jsx3(
         "pre",
         {
           style: {
@@ -907,13 +1098,13 @@ function MoodUIPromptPlayground(props) {
         }
       ) : 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__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
-          /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+      /* @__PURE__ */ jsx3("div", { style: { fontWeight: 700, fontSize: 16 }, children: "Preview" }),
+      /* @__PURE__ */ jsx3("div", { style: { minHeight: 240, padding: 16, borderRadius: 16, background: "#ffffff", border: "1px solid #e5e7eb" }, children: spec ? /* @__PURE__ */ jsx3(MoodUIRuntime, { spec }) : /* @__PURE__ */ jsx3("div", { style: { color: "#6b7280" }, children: "Belum ada hasil" }) }),
+      /* @__PURE__ */ jsxs2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsx3("div", { style: { fontWeight: 700, fontSize: 16 }, children: "React Code" }),
+        /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 8 }, children: [
+          /* @__PURE__ */ jsx3(
             "button",
             {
               type: "button",
@@ -931,7 +1122,7 @@ function MoodUIPromptPlayground(props) {
               children: copied ? "Copied!" : "Copy"
             }
           ),
-          /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx3(
             "button",
             {
               type: "button",
@@ -949,7 +1140,7 @@ function MoodUIPromptPlayground(props) {
               children: "Save to File"
             }
           ),
-          /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx3(
             "button",
             {
               type: "button",
@@ -969,7 +1160,7 @@ function MoodUIPromptPlayground(props) {
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx3(
         "textarea",
         {
           value: code,
@@ -988,6 +1179,8 @@ function MoodUIPromptPlayground(props) {
   ] });
 }
 export {
+  MOODUI_ICON_NAMES,
+  MoodUIIcon,
   MoodUIPromptPlayground,
   MoodUIRuntime,
   assertMoodUISpec,