@kohryan/moodui 0.0.4 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +51 -18
  2. package/dist/index.mjs +51 -18
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -816,6 +816,7 @@ function MoodUIPromptPlayground(props) {
816
816
  setLoading(false);
817
817
  }
818
818
  }, [apiKey, baseUrl, model, prompt, props.componentName, provider]);
819
+ const componentName = props.componentName ?? "MoodScreen";
819
820
  const onCopyCode = React2.useCallback(async () => {
820
821
  if (!code) return;
821
822
  try {
@@ -826,6 +827,18 @@ function MoodUIPromptPlayground(props) {
826
827
  console.error("Failed to copy:", e);
827
828
  }
828
829
  }, [code]);
830
+ const onDownloadCode = React2.useCallback(() => {
831
+ if (!code) return;
832
+ const blob = new Blob([code], { type: "text/plain" });
833
+ const url = URL.createObjectURL(blob);
834
+ const a = document.createElement("a");
835
+ a.href = url;
836
+ a.download = `${componentName}.tsx`;
837
+ document.body.appendChild(a);
838
+ a.click();
839
+ document.body.removeChild(a);
840
+ URL.revokeObjectURL(url);
841
+ }, [code, componentName]);
829
842
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }, children: [
830
843
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
831
844
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontWeight: 700, fontSize: 16 }, children: "MoodUI Prompt" }),
@@ -926,24 +939,44 @@ function MoodUIPromptPlayground(props) {
926
939
  /* @__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" }) }),
927
940
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
928
941
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontWeight: 700, fontSize: 16 }, children: "React Code" }),
929
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
930
- "button",
931
- {
932
- type: "button",
933
- onClick: onCopyCode,
934
- disabled: !code,
935
- style: {
936
- padding: "6px 12px",
937
- borderRadius: 8,
938
- border: copied ? "1px solid #16a34a" : "1px solid #6b7280",
939
- background: copied ? "#dcfce7" : "#ffffff",
940
- color: copied ? "#16a34a" : "#374151",
941
- cursor: !code ? "not-allowed" : "pointer",
942
- fontSize: 12
943
- },
944
- children: copied ? "Copied!" : "Copy"
945
- }
946
- )
942
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: 8 }, children: [
943
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
944
+ "button",
945
+ {
946
+ type: "button",
947
+ onClick: onCopyCode,
948
+ disabled: !code,
949
+ style: {
950
+ padding: "6px 12px",
951
+ borderRadius: 8,
952
+ border: copied ? "1px solid #16a34a" : "1px solid #6b7280",
953
+ background: copied ? "#dcfce7" : "#ffffff",
954
+ color: copied ? "#16a34a" : "#374151",
955
+ cursor: !code ? "not-allowed" : "pointer",
956
+ fontSize: 12
957
+ },
958
+ children: copied ? "Copied!" : "Copy"
959
+ }
960
+ ),
961
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
962
+ "button",
963
+ {
964
+ type: "button",
965
+ onClick: onDownloadCode,
966
+ disabled: !code,
967
+ style: {
968
+ padding: "6px 12px",
969
+ borderRadius: 8,
970
+ border: "1px solid #111827",
971
+ background: "#111827",
972
+ color: "#ffffff",
973
+ cursor: !code ? "not-allowed" : "pointer",
974
+ fontSize: 12
975
+ },
976
+ children: "Download"
977
+ }
978
+ )
979
+ ] })
947
980
  ] }),
948
981
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
949
982
  "textarea",
package/dist/index.mjs CHANGED
@@ -221,6 +221,7 @@ function MoodUIPromptPlayground(props) {
221
221
  setLoading(false);
222
222
  }
223
223
  }, [apiKey, baseUrl, model, prompt, props.componentName, provider]);
224
+ const componentName = props.componentName ?? "MoodScreen";
224
225
  const onCopyCode = React2.useCallback(async () => {
225
226
  if (!code) return;
226
227
  try {
@@ -231,6 +232,18 @@ function MoodUIPromptPlayground(props) {
231
232
  console.error("Failed to copy:", e);
232
233
  }
233
234
  }, [code]);
235
+ const onDownloadCode = React2.useCallback(() => {
236
+ if (!code) return;
237
+ const blob = new Blob([code], { type: "text/plain" });
238
+ const url = URL.createObjectURL(blob);
239
+ const a = document.createElement("a");
240
+ a.href = url;
241
+ a.download = `${componentName}.tsx`;
242
+ document.body.appendChild(a);
243
+ a.click();
244
+ document.body.removeChild(a);
245
+ URL.revokeObjectURL(url);
246
+ }, [code, componentName]);
234
247
  return /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }, children: [
235
248
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
236
249
  /* @__PURE__ */ jsx2("div", { style: { fontWeight: 700, fontSize: 16 }, children: "MoodUI Prompt" }),
@@ -331,24 +344,44 @@ function MoodUIPromptPlayground(props) {
331
344
  /* @__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" }) }),
332
345
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
333
346
  /* @__PURE__ */ jsx2("div", { style: { fontWeight: 700, fontSize: 16 }, children: "React Code" }),
334
- /* @__PURE__ */ jsx2(
335
- "button",
336
- {
337
- type: "button",
338
- onClick: onCopyCode,
339
- disabled: !code,
340
- style: {
341
- padding: "6px 12px",
342
- borderRadius: 8,
343
- border: copied ? "1px solid #16a34a" : "1px solid #6b7280",
344
- background: copied ? "#dcfce7" : "#ffffff",
345
- color: copied ? "#16a34a" : "#374151",
346
- cursor: !code ? "not-allowed" : "pointer",
347
- fontSize: 12
348
- },
349
- children: copied ? "Copied!" : "Copy"
350
- }
351
- )
347
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
348
+ /* @__PURE__ */ jsx2(
349
+ "button",
350
+ {
351
+ type: "button",
352
+ onClick: onCopyCode,
353
+ disabled: !code,
354
+ style: {
355
+ padding: "6px 12px",
356
+ borderRadius: 8,
357
+ border: copied ? "1px solid #16a34a" : "1px solid #6b7280",
358
+ background: copied ? "#dcfce7" : "#ffffff",
359
+ color: copied ? "#16a34a" : "#374151",
360
+ cursor: !code ? "not-allowed" : "pointer",
361
+ fontSize: 12
362
+ },
363
+ children: copied ? "Copied!" : "Copy"
364
+ }
365
+ ),
366
+ /* @__PURE__ */ jsx2(
367
+ "button",
368
+ {
369
+ type: "button",
370
+ onClick: onDownloadCode,
371
+ disabled: !code,
372
+ style: {
373
+ padding: "6px 12px",
374
+ borderRadius: 8,
375
+ border: "1px solid #111827",
376
+ background: "#111827",
377
+ color: "#ffffff",
378
+ cursor: !code ? "not-allowed" : "pointer",
379
+ fontSize: 12
380
+ },
381
+ children: "Download"
382
+ }
383
+ )
384
+ ] })
352
385
  ] }),
353
386
  /* @__PURE__ */ jsx2(
354
387
  "textarea",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kohryan/moodui",
3
- "version": "0.0.4",
3
+ "version": "0.0.5",
4
4
  "description": "MoodUI - AI-friendly UI spec + React renderer",
5
5
  "license": "MIT",
6
6
  "sideEffects": false,