@crediblemark/build 0.25.17 → 0.25.19

package/dist/no-external.js

@@ -12229,7 +12229,7 @@ var AutoFrame_default = AutoFrame;
 
 // css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/components/CredBuild/components/Preview/styles.module.css#css-module
 init_react_import();
-var styles_module_default21 = { "CredBuildPreview": "_CredBuildPreview_1z08a_1", "CredBuildPreview-frame": "_CredBuildPreview-frame_1z08a_6" };
+var styles_module_default21 = { "CredBuildPreview": "_CredBuildPreview_17c6o_1", "CredBuildPreview-frame": "_CredBuildPreview-frame_17c6o_6", "CredBuildPreview-htmlEditor": "_CredBuildPreview-htmlEditor_17c6o_12", "CredBuildPreview-htmlTextarea": "_CredBuildPreview-htmlTextarea_17c6o_23" };
 
 // components/CredBuild/components/Preview/index.tsx
 init_lib();
@@ -12268,7 +12268,14 @@ var HtmlModeRender = ({
         const body = document.body;
         // calculate content height safely, avoiding clientHeight/viewport height which prevents shrinking
         const height = Math.max(body.scrollHeight, body.offsetHeight);
-        window.parent.postMessage({ type: 'resize-iframe', id: '${id}', height: height }, '*');
+        try {
+          window.parent.postMessage({ type: 'resize-iframe', id: '${id}', height: height }, '*');
+          if (window.top && window.top !== window.parent) {
+            window.top.postMessage({ type: 'resize-iframe', id: '${id}', height: height }, '*');
+          }
+        } catch (e) {
+          // Ignore
+        }
       }
       window.addEventListener('load', sendHeight);
       window.addEventListener('resize', sendHeight);
@@ -12629,58 +12636,22 @@ var Preview = ({ id = "credbuild-preview" }) => {
         id,
         "data-credbuild-preview": true,
         style: { height: "100%", display: "flex", flexDirection: "column" },
-        children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { style: {
-          display: "flex",
-          flexDirection: "column",
-          flex: 1,
-          background: "#020617",
-          position: "relative"
-        }, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { style: {
+        children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: getClassName30("htmlEditor"), children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { style: {
           display: "flex",
           flex: 1,
           position: "relative",
           overflow: "hidden"
-        }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { style: {
-            width: 45,
-            background: "#0b0f19",
-            borderRight: "1px solid #1e293b",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "flex-end",
-            padding: "16px 8px 16px 0",
-            fontFamily: "Menlo, Monaco, Consolas, monospace",
-            fontSize: 12,
-            color: "#475569",
-            userSelect: "none",
-            lineHeight: 1.6
-          }, children: Array.from({ length: Math.max(localCode.split("\n").length, 25) }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { children: i + 1 }, i)) }),
-          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
-            "textarea",
-            {
-              value: localCode,
-              onChange: (e) => setLocalCode(e.target.value),
-              onBlur: handleSaveOnBlur,
-              placeholder: "<!-- Tempel kode HTML/Tailwind di sini -->\n<section class='bg-zinc-900 text-white p-12'>\n  <h1 class='text-3xl font-bold'>Hello World</h1>\n</section>",
-              spellCheck: false,
-              style: {
-                flex: 1,
-                background: "transparent",
-                border: "none",
-                outline: "none",
-                color: "#e2e8f0",
-                fontFamily: "Menlo, Monaco, Consolas, 'Fira Code', monospace",
-                fontSize: 13,
-                lineHeight: 1.6,
-                padding: "16px 20px",
-                resize: "none",
-                height: "100%",
-                width: "100%",
-                overflowY: "auto"
-              }
-            }
-          )
-        ] }) })
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+          "textarea",
+          {
+            value: localCode,
+            onChange: (e) => setLocalCode(e.target.value),
+            onBlur: handleSaveOnBlur,
+            placeholder: "<!-- Tempel kode HTML/Tailwind di sini -->\n<section class='bg-zinc-900 text-white p-12'>\n  <h1 class='text-3xl font-bold'>Hello World</h1>\n</section>",
+            spellCheck: false,
+            className: getClassName30("htmlTextarea")
+          }
+        ) }) })
       }
     );
   }
@@ -15091,6 +15062,10 @@ var Canvas = () => {
       root: s.state.data.root
     }))
   );
+  const rootProps = root?.props || root;
+  const isHtmlMode = rootProps?.mode === "html";
+  const htmlViewMode = rootProps?.htmlViewMode || (rootProps?.htmlCode ? "preview" : "code");
+  const isHtmlCodeEditActive = isHtmlMode && htmlViewMode === "code";
   const isNonFullWidth = viewports.current.width !== "100%";
   const shouldApplyViewport = true;
   const [showTransition, setShowTransition] = (0, import_react97.useState)(false);
@@ -15175,6 +15150,21 @@ var Canvas = () => {
     zoomConfig.rootHeight,
     frameRef
   ]);
+  (0, import_react97.useEffect)(() => {
+    const handleMessage = (event) => {
+      if (event.data && event.data.type === "resize-iframe") {
+        const newRootHeight = event.data.height;
+        if (zoomConfig.rootHeight !== newRootHeight) {
+          setZoomConfig({
+            ...zoomConfig,
+            rootHeight: newRootHeight
+          });
+        }
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [zoomConfig, setZoomConfig]);
   (0, import_react97.useEffect)(() => {
     if (ZOOM_ON_CHANGE) {
       resetAutoZoom();
@@ -15261,6 +15251,7 @@ var Canvas = () => {
         showLoader,
         fullScreen: _experimentalFullScreenCanvas
       }),
+      style: isHtmlCodeEditActive ? { overflow: "hidden" } : void 0,
       onClick: (e) => {
         const el = e.target;
         if (!el.hasAttribute("data-credbuild-component") && !el.hasAttribute("data-credbuild-dropzone")) {
@@ -15271,30 +15262,41 @@ var Canvas = () => {
           });
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: getClassName37("inner"), ref: frameRef, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
-          "div",
-          {
-            className: getClassName37("root"),
-            style: {
-              width: viewports.current.width || "100%",
-              height: !zoomConfig.rootHeight || isNaN(zoomConfig.rootHeight) ? "100%" : zoomConfig.rootHeight,
-              minHeight: "100%",
-              transform: `scale(${zoomConfig.zoom})`,
-              transition: showTransition ? `width ${TRANSITION_DURATION}ms ease-out, height ${TRANSITION_DURATION}ms ease-out, transform ${TRANSITION_DURATION}ms ease-out` : "",
-              overflow: isNonFullWidth ? void 0 : "auto"
-            },
-            suppressHydrationWarning: true,
-            id: "credbuild-canvas-root",
-            onTransitionEnd: () => {
-              setShowTransition(false);
-              isResizingRef.current = false;
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Preview, {}) })
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: getClassName37("loader"), children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Loader, { size: 24 }) })
-      ] })
+      children: /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
+        "div",
+        {
+          className: getClassName37("inner"),
+          ref: frameRef,
+          style: {
+            minHeight: "100%",
+            height: isHtmlCodeEditActive ? "100%" : !zoomConfig.rootHeight || isNaN(zoomConfig.rootHeight) ? "100%" : `${zoomConfig.rootHeight * zoomConfig.zoom}px`
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+              "div",
+              {
+                className: getClassName37("root"),
+                style: {
+                  width: isHtmlCodeEditActive ? "100%" : viewports.current.width || "100%",
+                  height: isHtmlCodeEditActive ? "100%" : !zoomConfig.rootHeight || isNaN(zoomConfig.rootHeight) ? "100%" : zoomConfig.rootHeight,
+                  minHeight: "100%",
+                  transform: isHtmlCodeEditActive ? "none" : `scale(${zoomConfig.zoom})`,
+                  transition: showTransition ? `width ${TRANSITION_DURATION}ms ease-out, height ${TRANSITION_DURATION}ms ease-out, transform ${TRANSITION_DURATION}ms ease-out` : "",
+                  overflow: isHtmlCodeEditActive ? "hidden" : isNonFullWidth ? void 0 : "auto"
+                },
+                suppressHydrationWarning: true,
+                id: "credbuild-canvas-root",
+                onTransitionEnd: () => {
+                  setShowTransition(false);
+                  isResizingRef.current = false;
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Preview, {}) })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: getClassName37("loader"), children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Loader, { size: 24 }) })
+          ]
+        }
+      )
     }
   );
 };
@@ -15698,30 +15700,36 @@ var import_jsx_runtime99 = require("react/jsx-runtime");
 var getClassName44 = get_class_name_factory_default("CodePanel", styles_module_default36);
 var CodePanel = () => {
   const [copied, setCopied] = (0, import_react101.useState)(false);
-  const [promptType, setPromptType] = (0, import_react101.useState)("with-header");
+  const [topic, setTopic] = (0, import_react101.useState)("");
+  const [promptType, setPromptType] = (0, import_react101.useState)("header-footer");
   const dispatch = useAppStore((s) => s.dispatch);
   const root = useAppStore((s) => s.state.data.root);
   const rootProps = root?.props || root;
   const currentMode = rootProps?.mode || "blocks";
-  const aiPromptWithHeader = `Buatkan desain landing page lengkap dan premium dengan pendekatan mobile-first, modern, rapi, dan compact (padat & elegan) menggunakan HTML murni dan utilitas kelas Tailwind CSS. Halaman harus memuat struktur lengkap seperti Header/Navigation, Hero Section, Features/Layanan, Testimoni, Call-to-Action (CTA), dan Footer.
-
-Ketentuan penulisan kode:
-1. STRUKTUR BERSIH: Gunakan elemen semantik HTML5 seperti <section>, <header>, atau <div> sebagai wrapper utama per seksi. JANGAN sertakan tag <html>, <body>, <head>, atau <script>.
-2. MOBILE-FIRST & RESPONSIF: Desain harus sepenuhnya responsif. Mulai dari layout ponsel (default), lalu gunakan breakpoint (sm:, md:, lg:, xl:) secara terstruktur untuk layar yang lebih besar.
-3. ESTETIKA MODERN & PREMIUM: Gunakan skema warna harmonis (misal: warna gelap bernuansa glassmorphism, gradasi halus, border tipis semi-transparan, efek hover mikro interaktif).
-4. COMPACT & EFISIEN: Hindari padding/margin berlebih yang membuat halaman kosong melompong. Pastikan konten padat, terbaca dengan baik, dan memiliki rasio grid/flexbox yang rapi.
-5. BEBAS JAVASCRIPT: Seluruh interaktivitas dasar (seperti hover, focus, state) harus ditangani murni menggunakan utilitas kelas CSS Tailwind.`;
-  const aiPromptNoHeader = `Buatkan desain landing page lengkap dan premium TANPA bagian Header/Navigation dengan pendekatan mobile-first, modern, rapi, dan compact (padat & elegan) menggunakan HTML murni dan utilitas kelas Tailwind CSS. Halaman harus memuat struktur lengkap seperti Hero Section, Features/Layanan, Testimoni, Call-to-Action (CTA), dan Footer (tanpa memuat menu navigasi atau header di bagian atas).
+  const generatePrompt = (variant, landingPageTopic) => {
+    const topicDesc = landingPageTopic.trim() ? `untuk "${landingPageTopic.trim()}"` : "lengkap dan premium";
+    let structureRequirements = "";
+    if (variant === "header-footer") {
+      structureRequirements = "1. STRUKTUR LENGKAP: Halaman HARUS memuat seluruh bagian berikut secara lengkap: Header/Navigation menu di bagian paling atas, Hero Section, Features/Layanan, Testimoni, Call-to-Action (CTA), dan Footer di bagian paling bawah.";
+    } else if (variant === "header-no-footer") {
+      structureRequirements = "1. DENGAN HEADER & TANPA FOOTER: Halaman HARUS memuat Header/Navigation menu di bagian paling atas, Hero Section, Features/Layanan, Testimoni, dan Call-to-Action (CTA). Namun, pastikan sama sekali TIDAK ada bagian Footer di bagian bawah halaman.";
+    } else if (variant === "no-header-footer") {
+      structureRequirements = "1. TANPA HEADER & DENGAN FOOTER: Halaman HARUS memuat Hero Section, Features/Layanan, Testimoni, Call-to-Action (CTA), dan Footer di bagian paling bawah. Namun, pastikan sama sekali TIDAK ada bagian Header/Navigation/Navbar di bagian atas halaman.";
+    } else {
+      structureRequirements = "1. TANPA HEADER & TANPA FOOTER: Halaman HARUS memuat Hero Section, Features/Layanan, Testimoni, dan Call-to-Action (CTA). Pastikan sama sekali TIDAK ada bagian Header/Navigation/Navbar di bagian atas, dan TIDAK ada bagian Footer di bagian bawah halaman.";
+    }
+    return `Buatkan desain landing page ${topicDesc} dengan pendekatan mobile-first, modern, rapi, dan compact (padat & elegan) menggunakan HTML murni dan utilitas kelas Tailwind CSS.
 
 Ketentuan penulisan kode:
-1. STRUKTUR BERSIH: Gunakan elemen semantik HTML5 seperti <section>, <header>, atau <div> sebagai wrapper utama per seksi. JANGAN sertakan tag <html>, <body>, <head>, atau <script>.
-2. TANPA HEADER: Pastikan sama sekali tidak ada bagian Header/Navbar/Navigation menu di bagian atas halaman. Desain harus langsung dimulai dengan Hero Section yang menarik dan berdampak tinggi.
+${structureRequirements}
+2. STRUKTUR BERSIH: Gunakan elemen semantik HTML5 seperti <section>, <header>, atau <div> sebagai wrapper utama per seksi. JANGAN sertakan tag <html>, <body>, <head>, atau <script>.
 3. MOBILE-FIRST & RESPONSIF: Desain harus sepenuhnya responsif. Mulai dari layout ponsel (default), lalu gunakan breakpoint (sm:, md:, lg:, xl:) secara terstruktur untuk layar yang lebih besar.
 4. ESTETIKA MODERN & PREMIUM: Gunakan skema warna harmonis (misal: warna gelap bernuansa glassmorphism, gradasi halus, border tipis semi-transparan, efek hover mikro interaktif).
 5. COMPACT & EFISIEN: Hindari padding/margin berlebih yang membuat halaman kosong melompong. Pastikan konten padat, terbaca dengan baik, dan memiliki rasio grid/flexbox yang rapi.
 6. BEBAS JAVASCRIPT: Seluruh interaktivitas dasar (seperti hover, focus, state) harus ditangani murni menggunakan utilitas kelas CSS Tailwind.`;
+  };
   const handleCopyPrompt = () => {
-    const selectedPrompt = promptType === "with-header" ? aiPromptWithHeader : aiPromptNoHeader;
+    const selectedPrompt = generatePrompt(promptType, topic);
     navigator.clipboard.writeText(selectedPrompt);
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
@@ -15827,37 +15835,94 @@ Ketentuan penulisan kode:
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: getClassName44("optionsSection"), style: { marginBottom: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: getClassName44("radioGroup"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("label", { className: getClassName44("radioLabel"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
-            "input",
-            {
-              type: "radio",
-              name: "promptType",
-              value: "with-header",
-              checked: promptType === "with-header",
-              onChange: () => setPromptType("with-header"),
-              className: getClassName44("radioInput")
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { children: "Dengan Header" })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("label", { className: getClassName44("radioLabel"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
-            "input",
-            {
-              type: "radio",
-              name: "promptType",
-              value: "no-header",
-              checked: promptType === "no-header",
-              onChange: () => setPromptType("no-header"),
-              className: getClassName44("radioInput")
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { children: "Tanpa Header" })
+      /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { style: { marginBottom: 12 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: getClassName44("optionTitle"), style: { marginBottom: 6 }, children: "Topik / Jenis Landing Page" }),
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+          "input",
+          {
+            type: "text",
+            value: topic,
+            onChange: (e) => setTopic(e.target.value),
+            placeholder: "Contoh: Klinik Gigi, SaaS AI, Agensi Desain...",
+            style: {
+              boxSizing: "border-box",
+              width: "100%",
+              padding: "8px 10px",
+              fontSize: "12px",
+              borderRadius: "5px",
+              border: "1px solid var(--cb-border)",
+              backgroundColor: "var(--cb-bg-base)",
+              color: "var(--cb-silver)",
+              outline: "none",
+              transition: "border-color 0.2s"
+            },
+            onFocus: (e) => e.target.style.borderColor = "var(--cb-gold)",
+            onBlur: (e) => e.target.style.borderColor = "var(--cb-border)"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: getClassName44("optionsSection"), style: { marginBottom: 12 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: getClassName44("optionTitle"), style: { marginBottom: 6 }, children: "Varian Struktur Template" }),
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: getClassName44("radioGroup"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("label", { className: getClassName44("radioLabel"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+              "input",
+              {
+                type: "radio",
+                name: "promptType",
+                value: "header-footer",
+                checked: promptType === "header-footer",
+                onChange: () => setPromptType("header-footer"),
+                className: getClassName44("radioInput")
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { children: "Dengan Header & Footer" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("label", { className: getClassName44("radioLabel"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+              "input",
+              {
+                type: "radio",
+                name: "promptType",
+                value: "header-no-footer",
+                checked: promptType === "header-no-footer",
+                onChange: () => setPromptType("header-no-footer"),
+                className: getClassName44("radioInput")
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { children: "Dengan Header, Tanpa Footer" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("label", { className: getClassName44("radioLabel"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+              "input",
+              {
+                type: "radio",
+                name: "promptType",
+                value: "no-header-footer",
+                checked: promptType === "no-header-footer",
+                onChange: () => setPromptType("no-header-footer"),
+                className: getClassName44("radioInput")
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { children: "Tanpa Header, Dengan Footer" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("label", { className: getClassName44("radioLabel"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+              "input",
+              {
+                type: "radio",
+                name: "promptType",
+                value: "no-header-no-footer",
+                checked: promptType === "no-header-no-footer",
+                onChange: () => setPromptType("no-header-no-footer"),
+                className: getClassName44("radioInput")
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { children: "Tanpa Keduanya" })
+          ] })
         ] })
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: getClassName44("promptText"), children: promptType === "with-header" ? aiPromptWithHeader : aiPromptNoHeader })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: getClassName44("promptText"), style: { maxHeight: 110 }, children: generatePrompt(promptType, topic) })
     ] })
   ] });
 };

package/dist/no-external.mjs

@@ -10,7 +10,7 @@ import {
   overrideKeys,
   useCredBuild,
   useGetCredBuild
-} from "./chunk-W3JRA22A.mjs";
+} from "./chunk-5GWBGJC4.mjs";
 import {
   ColorPickerField,
   Drawer,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crediblemark/build",
-  "version": "0.25.17",
+  "version": "0.25.19",
   "description": "The open-source visual editor for React",
   "author": "Rasyiqi Crediblemark",
   "repository": {