@kohryan/moodui 0.0.12 → 0.0.13

package/dist/chunk-WRMZ2MC6.mjs

@@ -1,572 +0,0 @@
-#!/usr/bin/env node
-
-// 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;
-}
-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) {
-    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;
-    }
-    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;
-    }
-    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;
-    }
-    case "input": {
-      const props = input.props;
-      if (props != null && !isObject(props)) errors.push(`${path}.props must be an object if provided`);
-      break;
-    }
-    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/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."
-      });
-    }
-    const raw = await llm.chat({
-      model: options.model,
-      temperature: options.temperature,
-      messages
-    });
-    lastRaw = raw;
-    try {
-      const json = parseFirstJsonObject(raw);
-      const spec = assertMoodUISpec(json);
-      return { spec, raw };
-    } 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;
-    }
-    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/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]);
-    }
-    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,
-        () => []
-      );
-    }
-  }
-}
-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 computeStyle(tag, 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);
-  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 (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 (node.type === "button") {
-    style.cursor = "pointer";
-    style.border = "none";
-    style.padding = "10px 14px";
-    style.borderRadius = 10;
-    const variant = props.variant ?? "primary";
-    if (variant === "primary") {
-      style.background = "#111827";
-      style.color = "#ffffff";
-    } else if (variant === "secondary") {
-      style.background = "#e5e7eb";
-      style.color = "#111827";
-    } else {
-      style.background = "transparent";
-      style.color = "#111827";
-    }
-    if (props.disabled) {
-      style.opacity = 0.6;
-      style.cursor = "not-allowed";
-    }
-  }
-  if (node.type === "input") {
-    style.padding = "10px 12px";
-    style.borderRadius = 10;
-    style.border = "1px solid #d1d5db";
-    style.outline = "none";
-  }
-  if (node.type === "image") {
-    if (props.fit != null) style.objectFit = props.fit;
-    style.maxWidth = "100%";
-  }
-  return style;
-}
-function applySpacing(style, kind, value) {
-  if (value == null) return;
-  if (typeof value === "number" || typeof value === "string") {
-    style[kind] = normalizeCssValue(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) style[kind] = normalizeCssValue(all);
-  if (x != null) {
-    style[`${kind}Left`] = normalizeCssValue(x);
-    style[`${kind}Right`] = normalizeCssValue(x);
-  }
-  if (y != null) {
-    style[`${kind}Top`] = normalizeCssValue(y);
-    style[`${kind}Bottom`] = normalizeCssValue(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 };
-}
-function normalizeCssValue(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/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 };
-}
-
-export {
-  validateMoodUISpec,
-  assertMoodUISpec,
-  generateMoodUISpec,
-  renderReact,
-  renderReactJSX,
-  createGeminiClient,
-  createOllamaClient,
-  createOpenAICompatibleClient,
-  generateReactFromPrompt
-};

package/dist/cli.d.ts

@@ -1 +0,0 @@
-#!/usr/bin/env node