@kohryan/moodui 0.0.14 → 0.0.16

package/dist/cli.mjs

@@ -586,13 +586,19 @@ function validateNode(input, path3) {
       else if (!isString(props.src)) errors.push(`${path3}.props.src must be a string`);
       break;
     }
+    case "icon": {
+      const props = input.props;
+      if (!isObject(props)) errors.push(`${path3}.props must be an object`);
+      else if (!isString(props.name)) errors.push(`${path3}.props.name must be a string`);
+      break;
+    }
     case "spacer": {
       const props = input.props;
       if (props != null && !isObject(props)) errors.push(`${path3}.props must be an object if provided`);
       break;
     }
     default:
-      errors.push(`${path3}.type must be one of: box | text | button | input | image | spacer`);
+      errors.push(`${path3}.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 };
@@ -661,14 +667,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");
@@ -712,9 +724,11 @@ function parseFirstJsonObject(text) {
 function renderReact(specInput, options = {}) {
   const spec = assertMoodUISpec(specInput);
   const componentName = options.componentName ?? "MoodUIScreen";
+  const hasIcons = containsIconNode(spec.root);
   const jsx = 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;",
     "",
@@ -759,6 +773,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) };
@@ -805,6 +821,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)}`);
   }
@@ -934,6 +956,11 @@ 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);
 }
@@ -1164,8 +1191,32 @@ async function runUI() {
     uiDir = path2.join(__dirname2, "..", "dist", "ui");
   }
   const PORT = 3e3;
-  console.log(`Starting MoodUI UI...`);
+  const workingDir = process.cwd();
+  console.log(`Starting MoodUI UI at http://localhost:${PORT}`);
+  console.log(`Working directory: ${workingDir}`);
   const server = http.createServer(async (req, res) => {
+    if (req.method === "POST" && req.url === "/api/save-file") {
+      try {
+        let body = "";
+        for await (const chunk of req) {
+          body += chunk.toString();
+        }
+        const { path: filePath2, code } = JSON.parse(body);
+        const resolvedOut = path2.resolve(workingDir, filePath2);
+        await fs6.mkdir(path2.dirname(resolvedOut), { recursive: true });
+        await fs6.writeFile(resolvedOut, code, "utf8");
+        res.writeHead(200, { "Content-Type": "application/json" });
+        res.end(JSON.stringify({ success: true, path: resolvedOut }));
+        console.log(`OK: wrote ${resolvedOut}`);
+        return;
+      } catch (err) {
+        const errorMsg = err instanceof Error ? err.message : String(err);
+        res.writeHead(500, { "Content-Type": "application/json" });
+        res.end(JSON.stringify({ success: false, error: errorMsg }));
+        console.error(`Error saving file: ${errorMsg}`);
+        return;
+      }
+    }
     let filePath = path2.join(uiDir, req.url === "/" ? "index.html" : req.url);
     const extname = String(path2.extname(filePath)).toLowerCase();
     const mimeTypes = {

package/dist/index.d.mts

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
 
 type MoodUISpecVersion = 1;
 type MoodUISpec = {
@@ -37,7 +38,7 @@ type MoodUISpace = number | string | {
 };
 type MoodUIColor = string;
 type MoodUIRadius = number | string;
-type MoodUINode = MoodUIBoxNode | MoodUITextNode | MoodUIButtonNode | MoodUIInputNode | MoodUIImageNode | MoodUISpacerNode;
+type MoodUINode = MoodUIBoxNode | MoodUITextNode | MoodUIButtonNode | MoodUIInputNode | MoodUIImageNode | MoodUIIconNode | MoodUISpacerNode;
 type MoodUIBoxNode = {
     type: "box";
     props?: MoodUICommonProps & {
@@ -85,6 +86,16 @@ type MoodUIImageNode = {
         fit?: "cover" | "contain" | "fill" | "none" | "scale-down";
     };
 };
+type MoodUIIconName = "arrow-right" | "bell" | "calendar" | "chart-bar" | "check" | "heart" | "home" | "mail" | "message-circle" | "plus" | "search" | "settings" | "shield" | "sparkles" | "star" | "user";
+type MoodUIIconNode = {
+    type: "icon";
+    props: MoodUICommonProps & {
+        name: MoodUIIconName;
+        size?: number | string;
+        color?: MoodUIColor;
+        strokeWidth?: number;
+    };
+};
 type MoodUISpacerNode = {
     type: "spacer";
     props?: {
@@ -103,7 +114,7 @@ type Err = {
 type ValidationResult<T> = Ok<T> | Err;
 declare function validateMoodUISpec(input: unknown): ValidationResult<MoodUISpec>;
 declare function assertMoodUISpec(input: unknown): MoodUISpec;
-type _InternalNodeTypes = MoodUITextNode | MoodUIButtonNode | MoodUIInputNode | MoodUIImageNode | MoodUISpacerNode;
+type _InternalNodeTypes = MoodUITextNode | MoodUIButtonNode | MoodUIIconNode | MoodUIInputNode | MoodUIImageNode | MoodUISpacerNode;
 
 type RenderReactOptions = {
     componentName?: string;
@@ -115,6 +126,18 @@ type _RenderReactExports = {
     renderReactJSX: typeof renderReactJSX;
 };
 
+type MoodUIIconProps = {
+    name: MoodUIIconName;
+    size?: number | string;
+    color?: string;
+    strokeWidth?: number;
+    className?: string;
+    style?: React.CSSProperties;
+    title?: string;
+};
+declare const MOODUI_ICON_NAMES: MoodUIIconName[];
+declare function MoodUIIcon(props: MoodUIIconProps): react_jsx_runtime.JSX.Element;
+
 type MoodUIRuntimeProps = {
     spec: MoodUISpec;
     onAction?: (actionId: string) => void;
@@ -205,4 +228,4 @@ type GenerateReactFromPromptResult = {
 };
 declare function generateReactFromPrompt(options: GenerateReactFromPromptOptions): Promise<GenerateReactFromPromptResult>;
 
-export { type GeminiClientOptions, type GenerateReactFromPromptOptions, type GenerateReactFromPromptResult, type GenerateSpecOptions, type GenerateSpecResult, type LLMChatClient, type LLMChatRequest, type LLMMessage, type MoodUIBoxNode, type MoodUIButtonNode, type MoodUIColor, type MoodUICommonProps, type MoodUIImageNode, type MoodUIInputNode, type MoodUINode, MoodUIPromptPlayground, type MoodUIPromptPlaygroundProps, type MoodUIRadius, MoodUIRuntime, type MoodUIRuntimeProps, type MoodUISpace, type MoodUISpacerNode, type MoodUISpec, type MoodUISpecVersion, type MoodUITextNode, type MoodUITheme, type OllamaClientOptions, type OpenAICompatibleClientOptions, type RenderReactOptions, type ValidationResult, type _InternalNodeTypes, type _RenderReactExports, assertMoodUISpec, createGeminiClient, createOllamaClient, createOpenAICompatibleClient, generateMoodUISpec, generateReactFromPrompt, renderReact, renderReactJSX, validateMoodUISpec };
+export { type GeminiClientOptions, type GenerateReactFromPromptOptions, type GenerateReactFromPromptResult, type GenerateSpecOptions, type GenerateSpecResult, type LLMChatClient, type LLMChatRequest, type LLMMessage, MOODUI_ICON_NAMES, type MoodUIBoxNode, type MoodUIButtonNode, type MoodUIColor, type MoodUICommonProps, MoodUIIcon, type MoodUIIconName, type MoodUIIconNode, type MoodUIIconProps, type MoodUIImageNode, type MoodUIInputNode, type MoodUINode, MoodUIPromptPlayground, type MoodUIPromptPlaygroundProps, type MoodUIRadius, MoodUIRuntime, type MoodUIRuntimeProps, type MoodUISpace, type MoodUISpacerNode, type MoodUISpec, type MoodUISpecVersion, type MoodUITextNode, type MoodUITheme, type OllamaClientOptions, type OpenAICompatibleClientOptions, type RenderReactOptions, type ValidationResult, type _InternalNodeTypes, type _RenderReactExports, assertMoodUISpec, createGeminiClient, createOllamaClient, createOpenAICompatibleClient, generateMoodUISpec, generateReactFromPrompt, renderReact, renderReactJSX, validateMoodUISpec };

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
 
 type MoodUISpecVersion = 1;
 type MoodUISpec = {
@@ -37,7 +38,7 @@ type MoodUISpace = number | string | {
 };
 type MoodUIColor = string;
 type MoodUIRadius = number | string;
-type MoodUINode = MoodUIBoxNode | MoodUITextNode | MoodUIButtonNode | MoodUIInputNode | MoodUIImageNode | MoodUISpacerNode;
+type MoodUINode = MoodUIBoxNode | MoodUITextNode | MoodUIButtonNode | MoodUIInputNode | MoodUIImageNode | MoodUIIconNode | MoodUISpacerNode;
 type MoodUIBoxNode = {
     type: "box";
     props?: MoodUICommonProps & {
@@ -85,6 +86,16 @@ type MoodUIImageNode = {
         fit?: "cover" | "contain" | "fill" | "none" | "scale-down";
     };
 };
+type MoodUIIconName = "arrow-right" | "bell" | "calendar" | "chart-bar" | "check" | "heart" | "home" | "mail" | "message-circle" | "plus" | "search" | "settings" | "shield" | "sparkles" | "star" | "user";
+type MoodUIIconNode = {
+    type: "icon";
+    props: MoodUICommonProps & {
+        name: MoodUIIconName;
+        size?: number | string;
+        color?: MoodUIColor;
+        strokeWidth?: number;
+    };
+};
 type MoodUISpacerNode = {
     type: "spacer";
     props?: {
@@ -103,7 +114,7 @@ type Err = {
 type ValidationResult<T> = Ok<T> | Err;
 declare function validateMoodUISpec(input: unknown): ValidationResult<MoodUISpec>;
 declare function assertMoodUISpec(input: unknown): MoodUISpec;
-type _InternalNodeTypes = MoodUITextNode | MoodUIButtonNode | MoodUIInputNode | MoodUIImageNode | MoodUISpacerNode;
+type _InternalNodeTypes = MoodUITextNode | MoodUIButtonNode | MoodUIIconNode | MoodUIInputNode | MoodUIImageNode | MoodUISpacerNode;
 
 type RenderReactOptions = {
     componentName?: string;
@@ -115,6 +126,18 @@ type _RenderReactExports = {
     renderReactJSX: typeof renderReactJSX;
 };
 
+type MoodUIIconProps = {
+    name: MoodUIIconName;
+    size?: number | string;
+    color?: string;
+    strokeWidth?: number;
+    className?: string;
+    style?: React.CSSProperties;
+    title?: string;
+};
+declare const MOODUI_ICON_NAMES: MoodUIIconName[];
+declare function MoodUIIcon(props: MoodUIIconProps): react_jsx_runtime.JSX.Element;
+
 type MoodUIRuntimeProps = {
     spec: MoodUISpec;
     onAction?: (actionId: string) => void;
@@ -205,4 +228,4 @@ type GenerateReactFromPromptResult = {
 };
 declare function generateReactFromPrompt(options: GenerateReactFromPromptOptions): Promise<GenerateReactFromPromptResult>;
 
-export { type GeminiClientOptions, type GenerateReactFromPromptOptions, type GenerateReactFromPromptResult, type GenerateSpecOptions, type GenerateSpecResult, type LLMChatClient, type LLMChatRequest, type LLMMessage, type MoodUIBoxNode, type MoodUIButtonNode, type MoodUIColor, type MoodUICommonProps, type MoodUIImageNode, type MoodUIInputNode, type MoodUINode, MoodUIPromptPlayground, type MoodUIPromptPlaygroundProps, type MoodUIRadius, MoodUIRuntime, type MoodUIRuntimeProps, type MoodUISpace, type MoodUISpacerNode, type MoodUISpec, type MoodUISpecVersion, type MoodUITextNode, type MoodUITheme, type OllamaClientOptions, type OpenAICompatibleClientOptions, type RenderReactOptions, type ValidationResult, type _InternalNodeTypes, type _RenderReactExports, assertMoodUISpec, createGeminiClient, createOllamaClient, createOpenAICompatibleClient, generateMoodUISpec, generateReactFromPrompt, renderReact, renderReactJSX, validateMoodUISpec };
+export { type GeminiClientOptions, type GenerateReactFromPromptOptions, type GenerateReactFromPromptResult, type GenerateSpecOptions, type GenerateSpecResult, type LLMChatClient, type LLMChatRequest, type LLMMessage, MOODUI_ICON_NAMES, type MoodUIBoxNode, type MoodUIButtonNode, type MoodUIColor, type MoodUICommonProps, MoodUIIcon, type MoodUIIconName, type MoodUIIconNode, type MoodUIIconProps, type MoodUIImageNode, type MoodUIInputNode, type MoodUINode, MoodUIPromptPlayground, type MoodUIPromptPlaygroundProps, type MoodUIRadius, MoodUIRuntime, type MoodUIRuntimeProps, type MoodUISpace, type MoodUISpacerNode, type MoodUISpec, type MoodUISpecVersion, type MoodUITextNode, type MoodUITheme, type OllamaClientOptions, type OpenAICompatibleClientOptions, type RenderReactOptions, type ValidationResult, type _InternalNodeTypes, type _RenderReactExports, assertMoodUISpec, createGeminiClient, createOllamaClient, createOpenAICompatibleClient, generateMoodUISpec, generateReactFromPrompt, renderReact, renderReactJSX, validateMoodUISpec };