@crediblemark/build 0.25.18 → 0.25.20

package/dist/{chunk-3EWP7RGL.mjs → chunk-NHF3YLSF.mjs}

@@ -13,11 +13,11 @@ import {
   renderContext,
   useRichtextProps,
   useSlots
-} from "./chunk-VEQIM5ZE.mjs";
+} from "./chunk-66IXS5FK.mjs";
 import {
   collisionStore,
   useSensors
-} from "./chunk-U4NHUPA4.mjs";
+} from "./chunk-JR2TCNGX.mjs";
 import {
   AutoFieldPrivate,
   Button,
@@ -25,11 +25,11 @@ import {
   fieldContextStore,
   useContextStore,
   useSafeId
-} from "./chunk-ARM3KXOM.mjs";
+} from "./chunk-OYB2YQPY.mjs";
 import {
   IconButton,
   Loader
-} from "./chunk-D7HE7E2A.mjs";
+} from "./chunk-QXPX7SNK.mjs";
 import {
   Box,
   ChartColumn,
@@ -90,7 +90,7 @@ import {
   useRegisterHistorySlice,
   useRegisterPermissionsSlice,
   useResetAutoZoom
-} from "./chunk-D4WFZ3K2.mjs";
+} from "./chunk-KN26YZZJ.mjs";
 import {
   get_class_name_factory_default
 } from "./chunk-BFHV72KK.mjs";
@@ -157,7 +157,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);
@@ -468,7 +475,7 @@ function useGetCredBuild() {
 // lib/use-component-list.tsx
 import { useEffect as useEffect4, useState as useState3 } from "react";
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/components/ComponentList/styles.module.css#css-module
+// css-module:/home/runner/work/credbuild/credbuild/components/ComponentList/styles.module.css#css-module
 var styles_module_default = { "ComponentList": "_ComponentList_1dcib_1", "ComponentList--isExpanded": "_ComponentList--isExpanded_1dcib_5", "ComponentList-content": "_ComponentList-content_1dcib_9", "ComponentList-title": "_ComponentList-title_1dcib_17", "ComponentList-titleIcon": "_ComponentList-titleIcon_1dcib_53" };
 
 // components/ComponentList/index.tsx
@@ -642,7 +649,7 @@ var useComponentList = () => {
 // components/CredBuild/components/Components/index.tsx
 import { useMemo as useMemo2, useState as useState4 } from "react";
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/components/CredBuild/components/Components/styles.module.css#css-module
+// css-module:/home/runner/work/credbuild/credbuild/components/CredBuild/components/Components/styles.module.css#css-module
 var styles_module_default2 = { "CredBuildComponents": "_CredBuildComponents_lxrzy_1", "CredBuildComponents-searchContainer": "_CredBuildComponents-searchContainer_lxrzy_7", "CredBuildComponents-searchWrapper": "_CredBuildComponents-searchWrapper_lxrzy_16", "CredBuildComponents-searchInput": "_CredBuildComponents-searchInput_lxrzy_23", "CredBuildComponents-searchIcon": "_CredBuildComponents-searchIcon_lxrzy_42", "CredBuildComponents-clearButton": "_CredBuildComponents-clearButton_lxrzy_54", "CredBuildComponents-listContainer": "_CredBuildComponents-listContainer_lxrzy_74", "CredBuildComponents-noResults": "_CredBuildComponents-noResults_lxrzy_79" };
 
 // components/CredBuild/components/Components/index.tsx
@@ -737,7 +744,7 @@ var Components = () => {
   ] });
 };
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/plugins/blocks/styles.module.css#css-module
+// css-module:/home/runner/work/credbuild/credbuild/plugins/blocks/styles.module.css#css-module
 var styles_module_default3 = { "BlocksPlugin": "_BlocksPlugin_1q0b2_1" };
 
 // plugins/blocks/index.tsx
@@ -750,7 +757,7 @@ var blocksPlugin = () => ({
   icon: /* @__PURE__ */ jsx6(Shapes, {})
 });
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/components/LayerTree/styles.module.css#css-module
+// css-module:/home/runner/work/credbuild/credbuild/components/LayerTree/styles.module.css#css-module
 var styles_module_default4 = { "LayerTree": "_LayerTree_nus40_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_nus40_11", "LayerTree-helper": "_LayerTree-helper_nus40_17", "Layer": "_Layer_nus40_1", "Layer-inner": "_Layer-inner_nus40_29", "Layer--containsZone": "_Layer--containsZone_nus40_35", "Layer-clickable": "_Layer-clickable_nus40_39", "Layer--isSelected": "_Layer--isSelected_nus40_58", "Layer-chevron": "_Layer-chevron_nus40_79", "Layer--childIsSelected": "_Layer--childIsSelected_nus40_80", "Layer-zones": "_Layer-zones_nus40_84", "Layer-title": "_Layer-title_nus40_98", "Layer-name": "_Layer-name_nus40_107", "Layer-icon": "_Layer-icon_nus40_113", "Layer-zoneIcon": "_Layer-zoneIcon_nus40_118" };
 
 // components/LayerTree/index.tsx
@@ -759,7 +766,9 @@ import {
   useCallback,
   useContext as useContext2,
   useRef,
-  memo as memo2
+  memo as memo2,
+  createContext as createContext2,
+  useState as useState5
 } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -769,6 +778,7 @@ var DEFAULT_LAYER_ROW_HEIGHT = 32;
 var LAYER_TREE_VIRTUALIZATION_OVERSCAN = 8;
 var MIN_VIRTUALIZED_LAYER_COUNT = 25;
 var measuredRowHeights = /* @__PURE__ */ new Map();
+var DragContext = createContext2(null);
 var getZonesByParent = (zones) => {
   return Object.keys(zones).reduce((acc, zone) => {
     const [parentId] = zone.split(":");
@@ -871,7 +881,9 @@ var Layer = memo2(forwardRef(function Layer2({
   selectedPathIds
 }, ref) {
   const dispatch = useAppStore((s) => s.dispatch);
+  const nodes = useAppStore((s) => s.state.indexes.nodes);
   const zoneStore = useContext2(ZoneStoreContext);
+  const dragCtx = useContext2(DragContext);
   const isHovering = useContextStore(
     ZoneStoreContext,
     (s) => s.hoveringComponent === node.itemId
@@ -910,7 +922,92 @@ var Layer = memo2(forwardRef(function Layer2({
       }),
       "data-index": dataIndex,
       "data-credbuild-layer-tree-id": node.itemId,
+      draggable: true,
+      onDragStart: (e) => {
+        dragCtx?.setDraggedItem({
+          itemId: node.itemId,
+          index: node.index,
+          zoneCompound: node.zoneCompound
+        });
+        e.dataTransfer.effectAllowed = "move";
+      },
+      onDragOver: (e) => {
+        e.preventDefault();
+        if (!dragCtx || !dragCtx.draggedItem || dragCtx.draggedItem.itemId === node.itemId) return;
+        const targetNodeIndex = nodes[node.itemId];
+        if (targetNodeIndex?.path.some((p) => p.split(":")[0] === dragCtx.draggedItem?.itemId)) {
+          return;
+        }
+        const rect = e.currentTarget.getBoundingClientRect();
+        const hoverClientY = e.clientY - rect.top;
+        const threshold = rect.height / 2;
+        const position = hoverClientY < threshold ? "before" : "after";
+        dragCtx.setHoveredItemId(node.itemId);
+        dragCtx.setHoverPosition(position);
+      },
+      onDragLeave: () => {
+        if (dragCtx?.hoveredItemId === node.itemId) {
+          dragCtx.setHoveredItemId(null);
+          dragCtx.setHoverPosition(null);
+        }
+      },
+      onDrop: (e) => {
+        e.preventDefault();
+        if (!dragCtx || !dragCtx.draggedItem || dragCtx.draggedItem.itemId === node.itemId) return;
+        let destIndex = node.index;
+        if (dragCtx.draggedItem.zoneCompound === node.zoneCompound) {
+          if (dragCtx.hoverPosition === "before") {
+            destIndex = dragCtx.draggedItem.index > node.index ? node.index : node.index - 1;
+          } else {
+            destIndex = dragCtx.draggedItem.index > node.index ? node.index + 1 : node.index;
+          }
+        } else {
+          destIndex = dragCtx.hoverPosition === "before" ? node.index : node.index + 1;
+        }
+        dispatch({
+          type: "move",
+          sourceIndex: dragCtx.draggedItem.index,
+          sourceZone: dragCtx.draggedItem.zoneCompound,
+          destinationIndex: destIndex,
+          destinationZone: node.zoneCompound
+        });
+        dispatch({
+          type: "setUi",
+          ui: {
+            itemSelector: {
+              index: destIndex,
+              zone: node.zoneCompound
+            }
+          }
+        });
+        dragCtx.setDraggedItem(null);
+        dragCtx.setHoveredItemId(null);
+        dragCtx.setHoverPosition(null);
+      },
+      onDragEnd: () => {
+        dragCtx?.setDraggedItem(null);
+        dragCtx?.setHoveredItemId(null);
+        dragCtx?.setHoverPosition(null);
+      },
+      style: {
+        opacity: dragCtx?.draggedItem?.itemId === node.itemId ? 0.4 : 1,
+        position: "relative"
+      },
       children: [
+        dragCtx?.hoveredItemId === node.itemId && dragCtx?.hoverPosition && /* @__PURE__ */ jsx7(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: 0,
+              right: 0,
+              height: "2px",
+              background: "linear-gradient(to right, var(--cb-gold, #d4af37), #f3e5ab)",
+              zIndex: 10,
+              ...dragCtx.hoverPosition === "before" ? { top: 0 } : { bottom: 0 }
+            }
+          }
+        ),
         /* @__PURE__ */ jsx7("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs3(
           "button",
           {
@@ -1108,16 +1205,32 @@ var LayerTree = memo2(({
   selectedPathIds,
   trees
 }) => {
-  return /* @__PURE__ */ jsx7(Fragment, { children: trees.map((tree) => /* @__PURE__ */ jsx7(
-    LayerTreeZone,
+  const [draggedItem, setDraggedItem] = useState5(null);
+  const [hoveredItemId, setHoveredItemId] = useState5(null);
+  const [hoverPosition, setHoverPosition] = useState5(null);
+  return /* @__PURE__ */ jsx7(
+    DragContext.Provider,
     {
-      depth: 0,
-      selectedId,
-      selectedPathIds,
-      tree
-    },
-    tree.zoneCompound
-  )) });
+      value: {
+        draggedItem,
+        setDraggedItem,
+        hoveredItemId,
+        setHoveredItemId,
+        hoverPosition,
+        setHoverPosition
+      },
+      children: trees.map((tree) => /* @__PURE__ */ jsx7(
+        LayerTreeZone,
+        {
+          depth: 0,
+          selectedId,
+          selectedPathIds,
+          tree
+        },
+        tree.zoneCompound
+      ))
+    }
+  );
 });
 
 // components/CredBuild/components/Outline/index.tsx
@@ -1171,7 +1284,7 @@ var Outline = memo3(() => {
   ) });
 });
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/plugins/outline/styles.module.css#css-module
+// css-module:/home/runner/work/credbuild/credbuild/plugins/outline/styles.module.css#css-module
 var styles_module_default5 = { "OutlinePlugin": "_OutlinePlugin_q92j6_1" };
 
 // plugins/outline/index.tsx
@@ -1184,7 +1297,7 @@ var outlinePlugin = () => ({
   icon: /* @__PURE__ */ jsx9(List, {})
 });
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/components/Breadcrumbs/styles.module.css#css-module
+// css-module:/home/runner/work/credbuild/credbuild/components/Breadcrumbs/styles.module.css#css-module
 var styles_module_default6 = { "Breadcrumbs": "_Breadcrumbs_1e0gb_1", "Breadcrumbs-breadcrumbLabel": "_Breadcrumbs-breadcrumbLabel_1e0gb_7", "Breadcrumbs-breadcrumb": "_Breadcrumbs-breadcrumb_1e0gb_7" };
 
 // lib/use-breadcrumbs.ts
@@ -1249,7 +1362,7 @@ var Breadcrumbs = ({
   ] });
 };
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/components/CredBuild/components/Fields/styles.module.css#css-module
+// css-module:/home/runner/work/credbuild/credbuild/components/CredBuild/components/Fields/styles.module.css#css-module
 var styles_module_default7 = { "CredBuildFields": "_CredBuildFields_53gu7_1", "CredBuildFields--isLoading": "_CredBuildFields--isLoading_53gu7_6", "CredBuildFields-loadingOverlay": "_CredBuildFields-loadingOverlay_53gu7_10", "CredBuildFields-loadingOverlayInner": "_CredBuildFields-loadingOverlayInner_53gu7_25", "CredBuildFields-field": "_CredBuildFields-field_53gu7_32", "CredBuildFields--wrapFields": "_CredBuildFields--wrapFields_53gu7_36" };
 
 // components/CredBuild/components/Fields/index.tsx
@@ -1405,7 +1518,7 @@ var FieldsInternal = ({ wrapFields = true }) => {
 };
 var Fields = memo4(FieldsInternal);
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/plugins/fields/styles.module.css#css-module
+// css-module:/home/runner/work/credbuild/credbuild/plugins/fields/styles.module.css#css-module
 var styles_module_default8 = { "FieldsPlugin": "_FieldsPlugin_6as57_1", "FieldsPlugin-header": "_FieldsPlugin-header_6as57_7" };
 
 // plugins/fields/index.tsx
@@ -1430,40 +1543,46 @@ var fieldsPlugin = ({ desktopSideBar = "right" } = {}) => ({
 });
 
 // plugins/code/CodePanel.tsx
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/plugins/code/styles.module.css#css-module
+// css-module:/home/runner/work/credbuild/credbuild/plugins/code/styles.module.css#css-module
 var styles_module_default9 = { "CodePlugin": "_CodePlugin_77s8n_1", "CodePanel": "_CodePanel_77s8n_9", "CodePanel-title": "_CodePanel-title_77s8n_18", "CodePanel-textarea": "_CodePanel-textarea_77s8n_27", "CodePanel-optionsSection": "_CodePanel-optionsSection_77s8n_49", "CodePanel-optionTitle": "_CodePanel-optionTitle_77s8n_53", "CodePanel-radioGroup": "_CodePanel-radioGroup_77s8n_62", "CodePanel-radioLabel": "_CodePanel-radioLabel_77s8n_68", "CodePanel-radioInput": "_CodePanel-radioInput_77s8n_77", "CodePanel-button": "_CodePanel-button_77s8n_87", "CodePanel-error": "_CodePanel-error_77s8n_120", "CodePanel-success": "_CodePanel-success_77s8n_131", "CodePanel-promptSection": "_CodePanel-promptSection_77s8n_142", "CodePanel-promptHeader": "_CodePanel-promptHeader_77s8n_148", "CodePanel-promptText": "_CodePanel-promptText_77s8n_155", "CodePanel-copyBtn": "_CodePanel-copyBtn_77s8n_169", "CodePanel-copyBtn--copied": "_CodePanel-copyBtn--copied_77s8n_193" };
 
 // plugins/code/CodePanel.tsx
 import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 var getClassName9 = get_class_name_factory_default("CodePanel", styles_module_default9);
 var CodePanel = () => {
-  const [copied, setCopied] = useState5(false);
-  const [promptType, setPromptType] = useState5("with-header");
+  const [copied, setCopied] = useState6(false);
+  const [topic, setTopic] = useState6("");
+  const [promptType, setPromptType] = useState6("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);
@@ -1569,37 +1688,94 @@ Ketentuan penulisan kode:
           }
         )
       ] }),
-      /* @__PURE__ */ jsx13("div", { className: getClassName9("optionsSection"), style: { marginBottom: 12 }, children: /* @__PURE__ */ jsxs7("div", { className: getClassName9("radioGroup"), children: [
-        /* @__PURE__ */ jsxs7("label", { className: getClassName9("radioLabel"), children: [
-          /* @__PURE__ */ jsx13(
-            "input",
-            {
-              type: "radio",
-              name: "promptType",
-              value: "with-header",
-              checked: promptType === "with-header",
-              onChange: () => setPromptType("with-header"),
-              className: getClassName9("radioInput")
-            }
-          ),
-          /* @__PURE__ */ jsx13("span", { children: "Dengan Header" })
-        ] }),
-        /* @__PURE__ */ jsxs7("label", { className: getClassName9("radioLabel"), children: [
-          /* @__PURE__ */ jsx13(
-            "input",
-            {
-              type: "radio",
-              name: "promptType",
-              value: "no-header",
-              checked: promptType === "no-header",
-              onChange: () => setPromptType("no-header"),
-              className: getClassName9("radioInput")
-            }
-          ),
-          /* @__PURE__ */ jsx13("span", { children: "Tanpa Header" })
+      /* @__PURE__ */ jsxs7("div", { style: { marginBottom: 12 }, children: [
+        /* @__PURE__ */ jsx13("div", { className: getClassName9("optionTitle"), style: { marginBottom: 6 }, children: "Topik / Jenis Landing Page" }),
+        /* @__PURE__ */ jsx13(
+          "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__ */ jsxs7("div", { className: getClassName9("optionsSection"), style: { marginBottom: 12 }, children: [
+        /* @__PURE__ */ jsx13("div", { className: getClassName9("optionTitle"), style: { marginBottom: 6 }, children: "Varian Struktur Template" }),
+        /* @__PURE__ */ jsxs7("div", { className: getClassName9("radioGroup"), children: [
+          /* @__PURE__ */ jsxs7("label", { className: getClassName9("radioLabel"), children: [
+            /* @__PURE__ */ jsx13(
+              "input",
+              {
+                type: "radio",
+                name: "promptType",
+                value: "header-footer",
+                checked: promptType === "header-footer",
+                onChange: () => setPromptType("header-footer"),
+                className: getClassName9("radioInput")
+              }
+            ),
+            /* @__PURE__ */ jsx13("span", { children: "Dengan Header & Footer" })
+          ] }),
+          /* @__PURE__ */ jsxs7("label", { className: getClassName9("radioLabel"), children: [
+            /* @__PURE__ */ jsx13(
+              "input",
+              {
+                type: "radio",
+                name: "promptType",
+                value: "header-no-footer",
+                checked: promptType === "header-no-footer",
+                onChange: () => setPromptType("header-no-footer"),
+                className: getClassName9("radioInput")
+              }
+            ),
+            /* @__PURE__ */ jsx13("span", { children: "Dengan Header, Tanpa Footer" })
+          ] }),
+          /* @__PURE__ */ jsxs7("label", { className: getClassName9("radioLabel"), children: [
+            /* @__PURE__ */ jsx13(
+              "input",
+              {
+                type: "radio",
+                name: "promptType",
+                value: "no-header-footer",
+                checked: promptType === "no-header-footer",
+                onChange: () => setPromptType("no-header-footer"),
+                className: getClassName9("radioInput")
+              }
+            ),
+            /* @__PURE__ */ jsx13("span", { children: "Tanpa Header, Dengan Footer" })
+          ] }),
+          /* @__PURE__ */ jsxs7("label", { className: getClassName9("radioLabel"), children: [
+            /* @__PURE__ */ jsx13(
+              "input",
+              {
+                type: "radio",
+                name: "promptType",
+                value: "no-header-no-footer",
+                checked: promptType === "no-header-no-footer",
+                onChange: () => setPromptType("no-header-no-footer"),
+                className: getClassName9("radioInput")
+              }
+            ),
+            /* @__PURE__ */ jsx13("span", { children: "Tanpa Keduanya" })
+          ] })
         ] })
-      ] }) }),
-      /* @__PURE__ */ jsx13("div", { className: getClassName9("promptText"), children: promptType === "with-header" ? aiPromptWithHeader : aiPromptNoHeader })
+      ] }),
+      /* @__PURE__ */ jsx13("div", { className: getClassName9("promptText"), style: { maxHeight: 110 }, children: generatePrompt(promptType, topic) })
     ] })
   ] });
 };
@@ -1620,20 +1796,20 @@ import {
   useEffect as useEffect15,
   useMemo as useMemo15,
   useRef as useRef9,
-  useState as useState15
+  useState as useState16
 } from "react";
 
 // components/CredBuild/components/Preview/index.tsx
-import { useCallback as useCallback4, useEffect as useEffect7, useRef as useRef3, useMemo as useMemo7, useState as useState7 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect7, useRef as useRef3, useMemo as useMemo7, useState as useState8 } from "react";
 
 // components/AutoFrame/index.tsx
 import {
-  createContext as createContext2,
+  createContext as createContext3,
   useCallback as useCallback3,
   useContext as useContext4,
   useEffect as useEffect6,
   useRef as useRef2,
-  useState as useState6
+  useState as useState7
 } from "react";
 import hash from "object-hash";
 import { createPortal } from "react-dom";
@@ -1853,7 +2029,7 @@ var CopyHostStyles = ({
   }, [debug, doc, onStylesLoaded, win]);
   return /* @__PURE__ */ jsx15(Fragment4, { children });
 };
-var autoFrameContext = createContext2({});
+var autoFrameContext = createContext3({});
 var useFrame = () => useContext4(autoFrameContext);
 function AutoFrame({
   children,
@@ -1867,10 +2043,10 @@ function AutoFrame({
   frameRef,
   ...props
 }) {
-  const [loaded, setLoaded] = useState6(false);
-  const [ctx, setCtx] = useState6({});
-  const [mountTarget, setMountTarget] = useState6();
-  const [stylesLoaded, setStylesLoaded] = useState6(false);
+  const [loaded, setLoaded] = useState7(false);
+  const [ctx, setCtx] = useState7({});
+  const [mountTarget, setMountTarget] = useState7();
+  const [stylesLoaded, setStylesLoaded] = useState7(false);
   const handleStylesLoaded = useCallback3(() => {
     setStylesLoaded(true);
   }, []);
@@ -1926,8 +2102,8 @@ function AutoFrame({
 AutoFrame.displayName = "AutoFrame";
 var AutoFrame_default = AutoFrame;
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/components/CredBuild/components/Preview/styles.module.css#css-module
-var styles_module_default10 = { "CredBuildPreview": "_CredBuildPreview_1z08a_1", "CredBuildPreview-frame": "_CredBuildPreview-frame_1z08a_6" };
+// css-module:/home/runner/work/credbuild/credbuild/components/CredBuild/components/Preview/styles.module.css#css-module
+var styles_module_default10 = { "CredBuildPreview": "_CredBuildPreview_17c6o_1", "CredBuildPreview-frame": "_CredBuildPreview-frame_17c6o_6", "CredBuildPreview-htmlEditor": "_CredBuildPreview-htmlEditor_17c6o_12", "CredBuildPreview-htmlTextarea": "_CredBuildPreview-htmlTextarea_17c6o_23" };
 
 // lib/bubble-pointer-event.ts
 var BaseEvent = typeof PointerEvent !== "undefined" ? PointerEvent : Event;
@@ -1948,7 +2124,7 @@ var BubbledPointerEvent = class extends BaseEvent {
 };
 
 // components/CredBuild/components/Preview/index.tsx
-import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx16 } from "react/jsx-runtime";
 var getClassName11 = get_class_name_factory_default("CredBuildPreview", styles_module_default10);
 var useBubbleIframeEvents = (ref) => {
   const status = useAppStore((s) => s.status);
@@ -2026,7 +2202,7 @@ var Preview = ({ id = "credbuild-preview" }) => {
   const htmlCode = rootProps?.htmlCode || "";
   const ref = useRef3(null);
   useBubbleIframeEvents(ref);
-  const [localCode, setLocalCode] = useState7(htmlCode);
+  const [localCode, setLocalCode] = useState8(htmlCode);
   useEffect7(() => {
     setLocalCode(htmlCode);
   }, [htmlCode]);
@@ -2136,58 +2312,22 @@ var Preview = ({ id = "credbuild-preview" }) => {
         id,
         "data-credbuild-preview": true,
         style: { height: "100%", display: "flex", flexDirection: "column" },
-        children: /* @__PURE__ */ jsx16("div", { style: {
-          display: "flex",
-          flexDirection: "column",
-          flex: 1,
-          background: "#020617",
-          position: "relative"
-        }, children: /* @__PURE__ */ jsxs8("div", { style: {
+        children: /* @__PURE__ */ jsx16("div", { className: getClassName11("htmlEditor"), children: /* @__PURE__ */ jsx16("div", { style: {
           display: "flex",
           flex: 1,
           position: "relative",
           overflow: "hidden"
-        }, children: [
-          /* @__PURE__ */ jsx16("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__ */ jsx16("div", { children: i + 1 }, i)) }),
-          /* @__PURE__ */ jsx16(
-            "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__ */ jsx16(
+          "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: getClassName11("htmlTextarea")
+          }
+        ) }) })
       }
     );
   }
@@ -2291,28 +2431,28 @@ var useLoadedOverrides = ({
 import { deepEqual } from "fast-equals";
 
 // components/CredBuild/components/Layout/index.tsx
-import { useEffect as useEffect14, useMemo as useMemo14, useState as useState14 } from "react";
+import { useEffect as useEffect14, useMemo as useMemo14, useState as useState15 } from "react";
 
 // components/CredBuild/context.tsx
 import {
-  createContext as createContext3,
+  createContext as createContext4,
   useContext as useContext5
 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
-var propsContext = createContext3({});
+var propsContext = createContext4({});
 function PropsProvider(props) {
   return /* @__PURE__ */ jsx17(propsContext.Provider, { value: props, children: props.children });
 }
 var usePropsContext = () => useContext5(propsContext);
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/components/CredBuild/components/Layout/styles.module.css#css-module
+// css-module:/home/runner/work/credbuild/credbuild/components/CredBuild/components/Layout/styles.module.css#css-module
 var styles_module_default11 = { "CredBuildLayout": "_CredBuildLayout_14aaz_1", "CredBuildLayout-inner": "_CredBuildLayout-inner_14aaz_8", "CredBuildLayout--leftSideBarVisible": "_CredBuildLayout--leftSideBarVisible_14aaz_29", "CredBuildLayout--rightSideBarVisible": "_CredBuildLayout--rightSideBarVisible_14aaz_33", "CredBuild--hidePlugins": "_CredBuild--hidePlugins_14aaz_37", "CredBuildLayout-item": "_CredBuildLayout-item_14aaz_43", "CredBuildLayout-header": "_CredBuildLayout-header_14aaz_49", "CredBuildLayout-left": "_CredBuildLayout-left_14aaz_54", "CredBuildLayout-editor": "_CredBuildLayout-editor_14aaz_67", "CredBuildLayout-right": "_CredBuildLayout-right_14aaz_75", "CredBuildLayout-sidebar": "_CredBuildLayout-sidebar_14aaz_92", "CredBuildPluginTab": "_CredBuildPluginTab_14aaz_107", "CredBuildPluginTab--visible": "_CredBuildPluginTab--visible_14aaz_114", "CredBuildPluginTab-body": "_CredBuildPluginTab-body_14aaz_118", "CredBuildLayout--mounted": "_CredBuildLayout--mounted_14aaz_134" };
 
 // lib/use-inject-css.ts
-import { useEffect as useEffect8, useState as useState8 } from "react";
+import { useEffect as useEffect8, useState as useState9 } from "react";
 var styles = ``;
 var useInjectStyleSheet = (initialStyles, iframeEnabled) => {
-  const [el, setEl] = useState8();
+  const [el, setEl] = useState9();
   useEffect8(() => {
     setEl(document.createElement("style"));
   }, []);
@@ -2361,7 +2501,7 @@ import {
   useEffect as useEffect9,
   useMemo as useMemo9,
   useRef as useRef4,
-  useState as useState9
+  useState as useState10
 } from "react";
 import { AutoScroller, defaultPreset } from "@dnd-kit/dom";
 
@@ -2716,7 +2856,7 @@ var DragDropContextClient = ({
   const appStore = useAppStoreApi();
   const debouncedParamsRef = useRef4(null);
   const tempDisableFallback = useTempDisableFallback(100);
-  const [zoneStore] = useState9(() => {
+  const [zoneStore] = useState10(() => {
     const rootVirtualizers = /* @__PURE__ */ new Map();
     return createStore2(() => ({
       zoneDepthIndex: {},
@@ -2811,7 +2951,7 @@ var DragDropContextClient = ({
       );
     }
   }, [zoneStore]);
-  const [plugins] = useState9(() => [
+  const [plugins] = useState10(() => [
     ...disableAutoScroll ? defaultPreset.plugins.filter((plugin) => plugin !== AutoScroller) : defaultPreset.plugins,
     createNestedDroppablePlugin(
       {
@@ -2859,7 +2999,7 @@ var DragDropContextClient = ({
     )
   ]);
   const sensors = useSensors();
-  const [dragListeners, setDragListeners] = useState9({});
+  const [dragListeners, setDragListeners] = useState10({});
   const dragMode = useRef4(null);
   const initialSelector = useRef4(void 0);
   const nextContextValue = useMemo9(
@@ -3117,13 +3257,13 @@ var DragDropContext = ({
 };
 
 // components/CredBuild/components/Header/index.tsx
-import { memo as memo5, useCallback as useCallback7, useMemo as useMemo12, useState as useState11 } from "react";
+import { memo as memo5, useCallback as useCallback7, useMemo as useMemo12, useState as useState12 } from "react";
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/components/MenuBar/styles.module.css#css-module
+// css-module:/home/runner/work/credbuild/credbuild/components/MenuBar/styles.module.css#css-module
 var styles_module_default12 = { "MenuBar": "_MenuBar_1m2ld_1", "MenuBar--menuOpen": "_MenuBar--menuOpen_1m2ld_14", "MenuBar-inner": "_MenuBar-inner_1m2ld_29", "MenuBar-history": "_MenuBar-history_1m2ld_45" };
 
 // components/MenuBar/index.tsx
-import { Fragment as Fragment7, jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
 var getClassName12 = get_class_name_factory_default("MenuBar", styles_module_default12);
 function MenuBar({
   menuOpen = false,
@@ -3147,8 +3287,8 @@ function MenuBar({
           setMenuOpen(false);
         }
       },
-      children: /* @__PURE__ */ jsxs9("div", { className: getClassName12("inner"), children: [
-        /* @__PURE__ */ jsxs9("div", { className: getClassName12("history"), children: [
+      children: /* @__PURE__ */ jsxs8("div", { className: getClassName12("inner"), children: [
+        /* @__PURE__ */ jsxs8("div", { className: getClassName12("history"), children: [
           /* @__PURE__ */ jsx20(
             IconButton,
             {
@@ -3177,13 +3317,13 @@ function MenuBar({
 }
 
 // components/ViewportControls/index.tsx
-import { useEffect as useEffect10, useMemo as useMemo10, useState as useState10 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo10, useState as useState11 } from "react";
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/components/ViewportControls/styles.module.css#css-module
+// css-module:/home/runner/work/credbuild/credbuild/components/ViewportControls/styles.module.css#css-module
 var styles_module_default13 = { "ViewportControls": "_ViewportControls_gefvg_1", "ViewportControls--fullScreen": "_ViewportControls--fullScreen_gefvg_5", "ViewportControls-toggleButton": "_ViewportControls-toggleButton_gefvg_14", "ViewportControls--isExpanded": "_ViewportControls--isExpanded_gefvg_38", "ViewportControls-actions": "_ViewportControls-actions_gefvg_42", "ViewportControls-actionsInner": "_ViewportControls-actionsInner_gefvg_46", "ViewportControls-divider": "_ViewportControls-divider_gefvg_76", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_gefvg_83", "ViewportControls-zoom": "_ViewportControls-zoom_gefvg_83", "ViewportButton-inner": "_ViewportButton-inner_gefvg_114", "ViewportButton--isActive": "_ViewportButton--isActive_gefvg_122" };
 
 // components/ViewportControls/index.tsx
-import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
 var icons = {
   Smartphone: /* @__PURE__ */ jsx21(Smartphone, { size: 16 }),
   Tablet: /* @__PURE__ */ jsx21(Tablet, { size: 16 }),
@@ -3244,20 +3384,20 @@ var ViewportControls = ({
     ].filter((a) => a.value <= (autoZoom || 1)).sort((a, b) => a.value > b.value ? 1 : -1);
     return options.length > 0 ? options : defaultZoomOptions;
   }, [autoZoom, defaultsContainAutoZoom]);
-  const [activeViewport, setActiveViewport] = useState10(
+  const [activeViewport, setActiveViewport] = useState11(
     uiViewports.current.width
   );
   useEffect10(() => {
     setActiveViewport(uiViewports.current.width);
   }, [uiViewports.current.width, uiViewports]);
-  const [isExpanded, setIsExpanded] = useState10(false);
-  return /* @__PURE__ */ jsxs10(
+  const [isExpanded, setIsExpanded] = useState11(false);
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       className: getClassName13({ isExpanded, fullScreen }),
       suppressHydrationWarning: true,
       children: [
-        /* @__PURE__ */ jsx21("div", { className: getClassName13("actions"), children: /* @__PURE__ */ jsxs10("div", { className: getClassName13("actionsInner"), children: [
+        /* @__PURE__ */ jsx21("div", { className: getClassName13("actions"), children: /* @__PURE__ */ jsxs9("div", { className: getClassName13("actionsInner"), children: [
           viewports.map((viewport, i) => /* @__PURE__ */ jsx21(
             ActionButton,
             {
@@ -3306,7 +3446,7 @@ var ViewportControls = ({
               children: /* @__PURE__ */ jsx21(ZoomIn, { size: 16 })
             }
           ),
-          /* @__PURE__ */ jsxs10("div", { className: getClassName13("zoom"), children: [
+          /* @__PURE__ */ jsxs9("div", { className: getClassName13("zoom"), children: [
             /* @__PURE__ */ jsx21("div", { className: getClassName13("divider") }),
             /* @__PURE__ */ jsx21(
               "select",
@@ -3351,13 +3491,13 @@ import { useShallow as useShallow3 } from "zustand/react/shallow";
 
 // lib/frame-context.tsx
 import {
-  createContext as createContext5,
+  createContext as createContext6,
   useContext as useContext7,
   useRef as useRef5,
   useMemo as useMemo11
 } from "react";
 import { jsx as jsx22 } from "react/jsx-runtime";
-var FrameContext = createContext5(null);
+var FrameContext = createContext6(null);
 var FrameProvider = ({
   children
 }) => {
@@ -3378,11 +3518,11 @@ var useCanvasFrame = () => {
   return context;
 };
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/components/CredBuild/components/Header/styles.module.css#css-module
+// css-module:/home/runner/work/credbuild/credbuild/components/CredBuild/components/Header/styles.module.css#css-module
 var styles_module_default14 = { "CredBuildHeader": "_CredBuildHeader_qzv5u_1", "CredBuildHeader-inner": "_CredBuildHeader-inner_qzv5u_20", "CredBuildHeader-viewportTools": "_CredBuildHeader-viewportTools_qzv5u_28", "CredBuildHeader-leftActions": "_CredBuildHeader-leftActions_qzv5u_35", "CredBuildHeader-toggle": "_CredBuildHeader-toggle_qzv5u_41", "CredBuildHeader-leftSideBarToggle": "_CredBuildHeader-leftSideBarToggle_qzv5u_47", "CredBuildHeader-rightSideBarToggle": "_CredBuildHeader-rightSideBarToggle_qzv5u_48", "CredBuildHeader-title": "_CredBuildHeader-title_qzv5u_52", "CredBuildHeader-path": "_CredBuildHeader-path_qzv5u_57", "CredBuildHeader-tools": "_CredBuildHeader-tools_qzv5u_68", "CredBuildHeader-menuButton": "_CredBuildHeader-menuButton_qzv5u_75" };
 
 // components/CredBuild/components/Header/index.tsx
-import { Fragment as Fragment8, jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
 var getClassName14 = get_class_name_factory_default("CredBuildHeader", styles_module_default14);
 var HeaderInner = ({
   hidePlugins,
@@ -3432,7 +3572,7 @@ var HeaderInner = ({
   const CustomHeaderActions = useAppStore(
     (s) => s.overrides.headerActions || defaultHeaderActionsRender
   );
-  const [menuOpen, setMenuOpen] = useState11(false);
+  const [menuOpen, setMenuOpen] = useState12(false);
   const rootTitle = useAppStore((s) => {
     const rootData = s.state.indexes.nodes["root"]?.data;
     return rootData.props.title ?? "";
@@ -3516,7 +3656,7 @@ var HeaderInner = ({
   return /* @__PURE__ */ jsx23(
     CustomHeader,
     {
-      actions: /* @__PURE__ */ jsx23(Fragment8, { children: /* @__PURE__ */ jsxs11(CustomHeaderActions, { children: [
+      actions: /* @__PURE__ */ jsx23(Fragment8, { children: /* @__PURE__ */ jsxs10(CustomHeaderActions, { children: [
         /* @__PURE__ */ jsx23(
           Button,
           {
@@ -3549,9 +3689,9 @@ var HeaderInner = ({
             rightSideBarVisible,
             hidePlugins
           }),
-          children: /* @__PURE__ */ jsxs11("div", { className: getClassName14("inner"), children: [
-            /* @__PURE__ */ jsxs11("div", { className: getClassName14("leftActions"), children: [
-              /* @__PURE__ */ jsxs11("div", { style: { marginRight: "8px", display: "flex", gap: "8px", alignItems: "center" }, children: [
+          children: /* @__PURE__ */ jsxs10("div", { className: getClassName14("inner"), children: [
+            /* @__PURE__ */ jsxs10("div", { className: getClassName14("leftActions"), children: [
+              /* @__PURE__ */ jsxs10("div", { style: { marginRight: "8px", display: "flex", gap: "8px", alignItems: "center" }, children: [
                 /* @__PURE__ */ jsx23(
                   Button,
                   {
@@ -3584,7 +3724,7 @@ var HeaderInner = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs11("div", { className: getClassName14("toggle"), children: [
+              /* @__PURE__ */ jsxs10("div", { className: getClassName14("toggle"), children: [
                 /* @__PURE__ */ jsx23("div", { className: getClassName14("leftSideBarToggle"), children: /* @__PURE__ */ jsx23(
                   IconButton,
                   {
@@ -3608,25 +3748,25 @@ var HeaderInner = ({
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ jsx23("div", { className: getClassName14("title"), children: /* @__PURE__ */ jsxs11(Heading, { rank: "2", size: "xs", children: [
+              /* @__PURE__ */ jsx23("div", { className: getClassName14("title"), children: /* @__PURE__ */ jsxs10(Heading, { rank: "2", size: "xs", children: [
                 /* @__PURE__ */ jsx23("span", { style: { fontSize: "11px", textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 600 }, children: headerTitle || rootTitle || "Page" }),
                 headerPath && /* @__PURE__ */ jsx23(Fragment8, { children: /* @__PURE__ */ jsx23("code", { className: getClassName14("path"), style: { fontSize: "10px", opacity: 0.6, marginLeft: "8px" }, children: headerPath }) })
               ] }) })
             ] }),
-            /* @__PURE__ */ jsxs11("div", { className: getClassName14("viewportTools"), style: { display: "flex", gap: "16px", alignItems: "center" }, children: [
-              isHtmlMode && /* @__PURE__ */ jsxs11("div", { style: {
+            /* @__PURE__ */ jsxs10("div", { className: getClassName14("viewportTools"), style: { display: "flex", gap: "16px", alignItems: "center" }, children: [
+              isHtmlMode && /* @__PURE__ */ jsxs10("div", { style: {
                 display: "flex",
                 alignItems: "center",
                 gap: "8px"
               }, children: [
-                /* @__PURE__ */ jsxs11("div", { style: {
+                /* @__PURE__ */ jsxs10("div", { style: {
                   display: "flex",
                   background: "var(--credbuild-color-grey-09)",
                   padding: 2,
                   borderRadius: 6,
                   border: "1px solid var(--credbuild-color-grey-10)"
                 }, children: [
-                  /* @__PURE__ */ jsxs11(
+                  /* @__PURE__ */ jsxs10(
                     "button",
                     {
                       type: "button",
@@ -3653,7 +3793,7 @@ var HeaderInner = ({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsxs11(
+                  /* @__PURE__ */ jsxs10(
                     "button",
                     {
                       type: "button",
@@ -3720,7 +3860,7 @@ var HeaderInner = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs11("div", { className: getClassName14("tools"), children: [
+            /* @__PURE__ */ jsxs10("div", { className: getClassName14("tools"), children: [
               /* @__PURE__ */ jsx23("div", { className: getClassName14("menuButton"), children: /* @__PURE__ */ jsx23(
                 IconButton,
                 {
@@ -3738,7 +3878,7 @@ var HeaderInner = ({
                   dispatch,
                   onPublish,
                   menuOpen,
-                  renderHeaderActions: () => /* @__PURE__ */ jsxs11(CustomHeaderActions, { children: [
+                  renderHeaderActions: () => /* @__PURE__ */ jsxs10(CustomHeaderActions, { children: [
                     /* @__PURE__ */ jsx23(
                       Button,
                       {
@@ -3775,11 +3915,11 @@ var HeaderInner = ({
 };
 var Header = memo5(HeaderInner);
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/components/SidebarSection/styles.module.css#css-module
+// css-module:/home/runner/work/credbuild/credbuild/components/SidebarSection/styles.module.css#css-module
 var styles_module_default15 = { "SidebarSection": "_SidebarSection_bv89x_1", "SidebarSection-title": "_SidebarSection-title_bv89x_12", "SidebarSection--noBorderTop": "_SidebarSection--noBorderTop_bv89x_37", "SidebarSection-content": "_SidebarSection-content_bv89x_41", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_bv89x_50", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_bv89x_79", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_bv89x_50", "SidebarSection-heading": "_SidebarSection-heading_bv89x_91", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_bv89x_95" };
 
 // components/SidebarSection/index.tsx
-import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
 var getClassName15 = get_class_name_factory_default("SidebarSection", styles_module_default15);
 var SidebarSection = ({
   children,
@@ -3789,8 +3929,8 @@ var SidebarSection = ({
   noBorderTop,
   isLoading
 }) => {
-  return /* @__PURE__ */ jsxs12("div", { className: getClassName15({ noBorderTop }), style: { background }, children: [
-    /* @__PURE__ */ jsx24("div", { className: getClassName15("title"), children: /* @__PURE__ */ jsxs12("div", { className: getClassName15("breadcrumbs"), children: [
+  return /* @__PURE__ */ jsxs11("div", { className: getClassName15({ noBorderTop }), style: { background }, children: [
+    /* @__PURE__ */ jsx24("div", { className: getClassName15("title"), children: /* @__PURE__ */ jsxs11("div", { className: getClassName15("breadcrumbs"), children: [
       showBreadcrumbs && /* @__PURE__ */ jsx24(Breadcrumbs, {}),
       /* @__PURE__ */ jsx24("div", { className: getClassName15("heading"), children: /* @__PURE__ */ jsx24(Heading, { rank: "2", size: "xs", children: title }) })
     ] }) }),
@@ -3805,15 +3945,15 @@ import {
   useEffect as useEffect11,
   useMemo as useMemo13,
   useRef as useRef6,
-  useState as useState12
+  useState as useState13
 } from "react";
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/components/CredBuild/components/Canvas/styles.module.css#css-module
+// css-module:/home/runner/work/credbuild/credbuild/components/CredBuild/components/Canvas/styles.module.css#css-module
 var styles_module_default16 = { "CredBuildCanvas": "_CredBuildCanvas_1ivia_1", "CredBuildCanvas--fullScreen": "_CredBuildCanvas--fullScreen_1ivia_22", "CredBuildCanvas-inner": "_CredBuildCanvas-inner_1ivia_33", "CredBuildCanvas-root": "_CredBuildCanvas-root_1ivia_42", "CredBuildCanvas--ready": "_CredBuildCanvas--ready_1ivia_67", "CredBuildCanvas-loader": "_CredBuildCanvas-loader_1ivia_72", "CredBuildCanvas--showLoader": "_CredBuildCanvas--showLoader_1ivia_82" };
 
 // components/CredBuild/components/Canvas/index.tsx
 import { useShallow as useShallow4 } from "zustand/react/shallow";
-import { Fragment as Fragment9, jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
 var getClassName16 = get_class_name_factory_default("CredBuildCanvas", styles_module_default16);
 var ZOOM_ON_CHANGE = true;
 var TRANSITION_DURATION = 150;
@@ -3859,9 +3999,13 @@ 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] = useState12(false);
+  const [showTransition, setShowTransition] = useState13(false);
   const isResizingRef = useRef6(false);
   const defaultRender = useMemo13(() => {
     const CredBuildDefault = ({ children }) => /* @__PURE__ */ jsx25(Fragment9, { children });
@@ -3975,7 +4119,7 @@ var Canvas = () => {
       resizeObserver.disconnect();
     };
   }, [frameRef, resetAutoZoom]);
-  const [showLoader, setShowLoader] = useState12(false);
+  const [showLoader, setShowLoader] = useState13(false);
   useEffect11(() => {
     setTimeout(() => {
       setShowLoader(true);
@@ -4044,6 +4188,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")) {
@@ -4054,38 +4199,49 @@ var Canvas = () => {
           });
         }
       },
-      children: /* @__PURE__ */ jsxs13("div", { className: getClassName16("inner"), ref: frameRef, children: [
-        /* @__PURE__ */ jsx25(
-          "div",
-          {
-            className: getClassName16("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__ */ jsx25(CustomPreview, { children: /* @__PURE__ */ jsx25(Preview, {}) })
-          }
-        ),
-        /* @__PURE__ */ jsx25("div", { className: getClassName16("loader"), children: /* @__PURE__ */ jsx25(Loader, { size: 24 }) })
-      ] })
+      children: /* @__PURE__ */ jsxs12(
+        "div",
+        {
+          className: getClassName16("inner"),
+          ref: frameRef,
+          style: {
+            minHeight: "100%",
+            height: isHtmlCodeEditActive ? "100%" : !zoomConfig.rootHeight || isNaN(zoomConfig.rootHeight) ? "100%" : `${zoomConfig.rootHeight * zoomConfig.zoom}px`
+          },
+          children: [
+            /* @__PURE__ */ jsx25(
+              "div",
+              {
+                className: getClassName16("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__ */ jsx25(CustomPreview, { children: /* @__PURE__ */ jsx25(Preview, {}) })
+              }
+            ),
+            /* @__PURE__ */ jsx25("div", { className: getClassName16("loader"), children: /* @__PURE__ */ jsx25(Loader, { size: 24 }) })
+          ]
+        }
+      )
     }
   );
 };
 
 // lib/use-sidebar-resize.ts
-import { useCallback as useCallback9, useEffect as useEffect12, useRef as useRef7, useState as useState13 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect12, useRef as useRef7, useState as useState14 } from "react";
 function useSidebarResize(position, dispatch) {
-  const [width, setWidth] = useState13(null);
+  const [width, setWidth] = useState14(null);
   const sidebarRef = useRef7(null);
   const storeWidth = useAppStore(
     (s) => position === "left" ? s.state.ui.leftSideBarWidth : s.state.ui.rightSideBarWidth
@@ -4166,7 +4322,7 @@ function useSidebarResize(position, dispatch) {
 // components/CredBuild/components/ResizeHandle/index.tsx
 import { useCallback as useCallback10, useRef as useRef8 } from "react";
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/components/CredBuild/components/ResizeHandle/styles.module.css#css-module
+// css-module:/home/runner/work/credbuild/credbuild/components/CredBuild/components/ResizeHandle/styles.module.css#css-module
 var styles_module_default17 = { "ResizeHandle": "_ResizeHandle_144bf_2", "ResizeHandle--left": "_ResizeHandle--left_144bf_16", "ResizeHandle--right": "_ResizeHandle--right_144bf_20" };
 
 // components/CredBuild/components/ResizeHandle/index.tsx
@@ -4237,11 +4393,11 @@ var ResizeHandle = ({
   );
 };
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/components/CredBuild/components/Sidebar/styles.module.css#css-module
+// css-module:/home/runner/work/credbuild/credbuild/components/CredBuild/components/Sidebar/styles.module.css#css-module
 var styles_module_default18 = { "Sidebar": "_Sidebar_1kcif_1", "Sidebar--isVisible": "_Sidebar--isVisible_1kcif_13", "Sidebar--left": "_Sidebar--left_1kcif_17", "Sidebar--right": "_Sidebar--right_1kcif_29", "Sidebar-resizeHandle": "_Sidebar-resizeHandle_1kcif_42" };
 
 // components/CredBuild/components/Sidebar/index.tsx
-import { Fragment as Fragment10, jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
 var getClassName18 = get_class_name_factory_default("Sidebar", styles_module_default18);
 var Sidebar = ({
   position,
@@ -4251,7 +4407,7 @@ var Sidebar = ({
   onResizeEnd,
   children
 }) => {
-  return /* @__PURE__ */ jsxs14(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs13(Fragment10, { children: [
     /* @__PURE__ */ jsx27(
       "div",
       {
@@ -4330,11 +4486,11 @@ var useDeleteHotkeys = () => {
   useHotkey({ backspace: true }, deleteSelectedComponent);
 };
 
-// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/components/CredBuild/components/Nav/styles.module.css#css-module
+// css-module:/home/runner/work/credbuild/credbuild/components/CredBuild/components/Nav/styles.module.css#css-module
 var styles_module_default19 = { "Nav": "_Nav_wbh7e_1", "Nav-list": "_Nav-list_wbh7e_9", "CredBuildHeader-path": "_CredBuildHeader-path_wbh7e_20", "NavItem": "_NavItem_wbh7e_38", "NavItem-link": "_NavItem-link_wbh7e_43", "NavItem-linkIcon": "_NavItem-linkIcon_wbh7e_64", "NavItem--active": "_NavItem--active_wbh7e_77", "NavItem--mobileOnly": "_NavItem--mobileOnly_wbh7e_90", "NavItem--desktopOnly": "_NavItem--desktopOnly_wbh7e_95" };
 
 // components/CredBuild/components/Nav/index.tsx
-import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs14 } from "react/jsx-runtime";
 var getClassName19 = get_class_name_factory_default("Nav", styles_module_default19);
 var getClassNameItem = get_class_name_factory_default("NavItem", styles_module_default19);
 var MenuItem = ({
@@ -4361,14 +4517,14 @@ var Nav = ({
   items,
   mobileActions
 }) => {
-  return /* @__PURE__ */ jsxs15("nav", { className: getClassName19(), children: [
+  return /* @__PURE__ */ jsxs14("nav", { className: getClassName19(), children: [
     /* @__PURE__ */ jsx28("ul", { className: getClassName19("list"), children: Object.entries(items).map(([key, item]) => /* @__PURE__ */ jsx28(MenuItem, { ...item }, key)) }),
     mobileActions && /* @__PURE__ */ jsx28("div", { className: getClassName19("mobileActions"), children: mobileActions })
   ] });
 };
 
 // components/CredBuild/components/Layout/index.tsx
-import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs15 } from "react/jsx-runtime";
 var getClassName20 = get_class_name_factory_default("CredBuild", styles_module_default11);
 var getLayoutClassName = get_class_name_factory_default("CredBuildLayout", styles_module_default11);
 var getPluginTabClassName = get_class_name_factory_default("CredBuildPluginTab", styles_module_default11);
@@ -4451,8 +4607,8 @@ var Layout = ({ children }) => {
     () => overrides.credbuild || DefaultOverride,
     [overrides]
   );
-  const [mounted, setMounted] = useState14(false);
-  const [theme, setTheme] = useState14("dark");
+  const [mounted, setMounted] = useState15(false);
+  const [theme, setTheme] = useState15("dark");
   useEffect14(() => {
     setMounted(true);
     const savedTheme = localStorage.getItem("credbuild-theme");
@@ -4492,7 +4648,7 @@ var Layout = ({ children }) => {
   const setUi = useAppStore((s) => s.setUi);
   const currentPlugin = useAppStore((s) => s.state.ui.plugin?.current);
   const appStoreApi = useAppStoreApi();
-  const [mobilePanelHeightMode, setMobilePanelHeightMode] = useState14("toggle");
+  const [mobilePanelHeightMode, setMobilePanelHeightMode] = useState15("toggle");
   const hasLegacySideBarPlugin = useMemo14(
     () => !!plugins?.find((p) => p.name === "legacy-side-bar"),
     [plugins]
@@ -4556,7 +4712,7 @@ var Layout = ({ children }) => {
   const mobilePanelExpanded = useAppStore(
     (s) => s.state.ui.mobilePanelExpanded ?? false
   );
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       className: `CredBuild ${theme === "dark" ? "dark" : ""} ${getClassName20({
@@ -4578,14 +4734,14 @@ var Layout = ({ children }) => {
               mobilePanelHeightMinContent: mobilePanelHeightMode === "min-content"
             }),
             style: { height: typeof height === "number" && isNaN(height) ? void 0 : height },
-            children: /* @__PURE__ */ jsxs16(
+            children: /* @__PURE__ */ jsxs15(
               "div",
               {
                 className: getLayoutClassName("inner"),
                 style: layoutOptions,
                 children: [
                   /* @__PURE__ */ jsx29("div", { className: getLayoutClassName("header"), children: /* @__PURE__ */ jsx29(Header, { theme, hidePlugins: hasLegacySideBarPlugin }) }),
-                  /* @__PURE__ */ jsxs16(
+                  /* @__PURE__ */ jsxs15(
                     Sidebar,
                     {
                       position: "left",
@@ -4678,7 +4834,7 @@ function CredBuildProvider({ children }) {
     }),
     [_iframe]
   );
-  const [generatedAppState] = useState15(() => {
+  const [generatedAppState] = useState16(() => {
     const initial = { ...defaultAppState.ui, ...initialUi };
     let clientUiState = {};
     if (Object.keys(initialData?.root || {}).length > 0 && !initialData?.root?.props) {
@@ -4725,7 +4881,7 @@ function CredBuildProvider({ children }) {
     return walkAppState(newAppState, config);
   });
   const { appendData = true } = _initialHistory || {};
-  const [blendedHistories] = useState15(
+  const [blendedHistories] = useState16(
     [
       ..._initialHistory?.histories || [],
       ...appendData ? [{ state: generatedAppState }] : []
@@ -4794,7 +4950,7 @@ function CredBuildProvider({ children }) {
       loadedFieldTransforms
     ]
   );
-  const [appStore] = useState15(
+  const [appStore] = useState16(
     () => createAppStore(generateAppStore(initialAppState))
   );
   useEffect15(() => {
@@ -4846,10 +5002,10 @@ CredBuild.Outline = Outline;
 CredBuild.Preview = Preview;
 
 // plugins/legacy-side-bar/index.tsx
-import { jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
 var legacySideBarPlugin = () => ({
   name: "legacy-side-bar",
-  render: () => /* @__PURE__ */ jsxs17("div", { style: { overflowY: "auto" }, children: [
+  render: () => /* @__PURE__ */ jsxs16("div", { style: { overflowY: "auto" }, children: [
     /* @__PURE__ */ jsx31(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ jsx31(Components, {}) }),
     /* @__PURE__ */ jsx31(SidebarSection, { title: "Outline", children: /* @__PURE__ */ jsx31(Outline, {}) })
   ] })