@crediblemark/build 0.25.7 → 0.25.9

package/dist/index.js

@@ -427,125 +427,152 @@ var init_chart_column = __esm({
   }
 });
 
+// node_modules/lucide-react/dist/esm/icons/check.js
+var __iconNode4, Check;
+var init_check = __esm({
+  "node_modules/lucide-react/dist/esm/icons/check.js"() {
+    "use strict";
+    init_react_import();
+    init_createLucideIcon();
+    __iconNode4 = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+    Check = createLucideIcon("check", __iconNode4);
+  }
+});
+
 // node_modules/lucide-react/dist/esm/icons/chevron-down.js
-var __iconNode4, ChevronDown;
+var __iconNode5, ChevronDown;
 var init_chevron_down = __esm({
   "node_modules/lucide-react/dist/esm/icons/chevron-down.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode4 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-    ChevronDown = createLucideIcon("chevron-down", __iconNode4);
+    __iconNode5 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+    ChevronDown = createLucideIcon("chevron-down", __iconNode5);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/chevron-right.js
-var __iconNode5, ChevronRight;
+var __iconNode6, ChevronRight;
 var init_chevron_right = __esm({
   "node_modules/lucide-react/dist/esm/icons/chevron-right.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode5 = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-    ChevronRight = createLucideIcon("chevron-right", __iconNode5);
+    __iconNode6 = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+    ChevronRight = createLucideIcon("chevron-right", __iconNode6);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/chevron-up.js
-var __iconNode6, ChevronUp;
+var __iconNode7, ChevronUp;
 var init_chevron_up = __esm({
   "node_modules/lucide-react/dist/esm/icons/chevron-up.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode6 = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
-    ChevronUp = createLucideIcon("chevron-up", __iconNode6);
+    __iconNode7 = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
+    ChevronUp = createLucideIcon("chevron-up", __iconNode7);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/circle-check-big.js
-var __iconNode7, CircleCheckBig;
+var __iconNode8, CircleCheckBig;
 var init_circle_check_big = __esm({
   "node_modules/lucide-react/dist/esm/icons/circle-check-big.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode7 = [
+    __iconNode8 = [
       ["path", { d: "M21.801 10A10 10 0 1 1 17 3.335", key: "yps3ct" }],
       ["path", { d: "m9 11 3 3L22 4", key: "1pflzl" }]
     ];
-    CircleCheckBig = createLucideIcon("circle-check-big", __iconNode7);
+    CircleCheckBig = createLucideIcon("circle-check-big", __iconNode8);
+  }
+});
+
+// node_modules/lucide-react/dist/esm/icons/circle-check.js
+var __iconNode9, CircleCheck;
+var init_circle_check = __esm({
+  "node_modules/lucide-react/dist/esm/icons/circle-check.js"() {
+    "use strict";
+    init_react_import();
+    init_createLucideIcon();
+    __iconNode9 = [
+      ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+      ["path", { d: "m9 12 2 2 4-4", key: "dzmm74" }]
+    ];
+    CircleCheck = createLucideIcon("circle-check", __iconNode9);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/code.js
-var __iconNode8, Code;
+var __iconNode10, Code;
 var init_code = __esm({
   "node_modules/lucide-react/dist/esm/icons/code.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode8 = [
+    __iconNode10 = [
       ["path", { d: "m16 18 6-6-6-6", key: "eg8j8" }],
       ["path", { d: "m8 6-6 6 6 6", key: "ppft3o" }]
     ];
-    Code = createLucideIcon("code", __iconNode8);
+    Code = createLucideIcon("code", __iconNode10);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/copy.js
-var __iconNode9, Copy;
+var __iconNode11, Copy;
 var init_copy = __esm({
   "node_modules/lucide-react/dist/esm/icons/copy.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode9 = [
+    __iconNode11 = [
       ["rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2", key: "17jyea" }],
       ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2", key: "zix9uf" }]
     ];
-    Copy = createLucideIcon("copy", __iconNode9);
+    Copy = createLucideIcon("copy", __iconNode11);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/corner-left-up.js
-var __iconNode10, CornerLeftUp;
+var __iconNode12, CornerLeftUp;
 var init_corner_left_up = __esm({
   "node_modules/lucide-react/dist/esm/icons/corner-left-up.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode10 = [
+    __iconNode12 = [
       ["path", { d: "M14 9 9 4 4 9", key: "1af5af" }],
       ["path", { d: "M20 20h-7a4 4 0 0 1-4-4V4", key: "1blwi3" }]
     ];
-    CornerLeftUp = createLucideIcon("corner-left-up", __iconNode10);
+    CornerLeftUp = createLucideIcon("corner-left-up", __iconNode12);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/credit-card.js
-var __iconNode11, CreditCard;
+var __iconNode13, CreditCard;
 var init_credit_card = __esm({
   "node_modules/lucide-react/dist/esm/icons/credit-card.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode11 = [
+    __iconNode13 = [
       ["rect", { width: "20", height: "14", x: "2", y: "5", rx: "2", key: "ynyp8z" }],
       ["line", { x1: "2", x2: "22", y1: "10", y2: "10", key: "1b3vmo" }]
     ];
-    CreditCard = createLucideIcon("credit-card", __iconNode11);
+    CreditCard = createLucideIcon("credit-card", __iconNode13);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/expand.js
-var __iconNode12, Expand;
+var __iconNode14, Expand;
 var init_expand = __esm({
   "node_modules/lucide-react/dist/esm/icons/expand.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode12 = [
+    __iconNode14 = [
       ["path", { d: "m15 15 6 6", key: "1s409w" }],
       ["path", { d: "m15 9 6-6", key: "ko1vev" }],
       ["path", { d: "M21 16v5h-5", key: "1ck2sf" }],
@@ -555,34 +582,55 @@ var init_expand = __esm({
       ["path", { d: "M3 8V3h5", key: "1ln10m" }],
       ["path", { d: "M9 9 3 3", key: "v551iv" }]
     ];
-    Expand = createLucideIcon("expand", __iconNode12);
+    Expand = createLucideIcon("expand", __iconNode14);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/external-link.js
-var __iconNode13, ExternalLink;
+var __iconNode15, ExternalLink;
 var init_external_link = __esm({
   "node_modules/lucide-react/dist/esm/icons/external-link.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode13 = [
+    __iconNode15 = [
       ["path", { d: "M15 3h6v6", key: "1q9fwt" }],
       ["path", { d: "M10 14 21 3", key: "gplh6r" }],
       ["path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6", key: "a6xqqp" }]
     ];
-    ExternalLink = createLucideIcon("external-link", __iconNode13);
+    ExternalLink = createLucideIcon("external-link", __iconNode15);
+  }
+});
+
+// node_modules/lucide-react/dist/esm/icons/eye.js
+var __iconNode16, Eye;
+var init_eye = __esm({
+  "node_modules/lucide-react/dist/esm/icons/eye.js"() {
+    "use strict";
+    init_react_import();
+    init_createLucideIcon();
+    __iconNode16 = [
+      [
+        "path",
+        {
+          d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0",
+          key: "1nclc0"
+        }
+      ],
+      ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
+    ];
+    Eye = createLucideIcon("eye", __iconNode16);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/file-text.js
-var __iconNode14, FileText;
+var __iconNode17, FileText;
 var init_file_text = __esm({
   "node_modules/lucide-react/dist/esm/icons/file-text.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode14 = [
+    __iconNode17 = [
       [
         "path",
         {
@@ -595,18 +643,18 @@ var init_file_text = __esm({
       ["path", { d: "M16 13H8", key: "t4e002" }],
       ["path", { d: "M16 17H8", key: "z1uh3a" }]
     ];
-    FileText = createLucideIcon("file-text", __iconNode14);
+    FileText = createLucideIcon("file-text", __iconNode17);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/grip-vertical.js
-var __iconNode15, GripVertical;
+var __iconNode18, GripVertical;
 var init_grip_vertical = __esm({
   "node_modules/lucide-react/dist/esm/icons/grip-vertical.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode15 = [
+    __iconNode18 = [
       ["circle", { cx: "9", cy: "12", r: "1", key: "1vctgf" }],
       ["circle", { cx: "9", cy: "5", r: "1", key: "hp0tcf" }],
       ["circle", { cx: "9", cy: "19", r: "1", key: "fkjjf6" }],
@@ -614,105 +662,105 @@ var init_grip_vertical = __esm({
       ["circle", { cx: "15", cy: "5", r: "1", key: "19l28e" }],
       ["circle", { cx: "15", cy: "19", r: "1", key: "f4zoj3" }]
     ];
-    GripVertical = createLucideIcon("grip-vertical", __iconNode15);
+    GripVertical = createLucideIcon("grip-vertical", __iconNode18);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/hash.js
-var __iconNode16, Hash;
+var __iconNode19, Hash;
 var init_hash = __esm({
   "node_modules/lucide-react/dist/esm/icons/hash.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode16 = [
+    __iconNode19 = [
       ["line", { x1: "4", x2: "20", y1: "9", y2: "9", key: "4lhtct" }],
       ["line", { x1: "4", x2: "20", y1: "15", y2: "15", key: "vyu0kd" }],
       ["line", { x1: "10", x2: "8", y1: "3", y2: "21", key: "1ggp8o" }],
       ["line", { x1: "16", x2: "14", y1: "3", y2: "21", key: "weycgp" }]
     ];
-    Hash = createLucideIcon("hash", __iconNode16);
+    Hash = createLucideIcon("hash", __iconNode19);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/heading-1.js
-var __iconNode17, Heading1;
+var __iconNode20, Heading1;
 var init_heading_1 = __esm({
   "node_modules/lucide-react/dist/esm/icons/heading-1.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode17 = [
+    __iconNode20 = [
       ["path", { d: "M4 12h8", key: "17cfdx" }],
       ["path", { d: "M4 18V6", key: "1rz3zl" }],
       ["path", { d: "M12 18V6", key: "zqpxq5" }],
       ["path", { d: "m17 12 3-2v8", key: "1hhhft" }]
     ];
-    Heading1 = createLucideIcon("heading-1", __iconNode17);
+    Heading1 = createLucideIcon("heading-1", __iconNode20);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/heading-2.js
-var __iconNode18, Heading2;
+var __iconNode21, Heading2;
 var init_heading_2 = __esm({
   "node_modules/lucide-react/dist/esm/icons/heading-2.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode18 = [
+    __iconNode21 = [
       ["path", { d: "M4 12h8", key: "17cfdx" }],
       ["path", { d: "M4 18V6", key: "1rz3zl" }],
       ["path", { d: "M12 18V6", key: "zqpxq5" }],
       ["path", { d: "M21 18h-4c0-4 4-3 4-6 0-1.5-2-2.5-4-1", key: "9jr5yi" }]
     ];
-    Heading2 = createLucideIcon("heading-2", __iconNode18);
+    Heading2 = createLucideIcon("heading-2", __iconNode21);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/heading-3.js
-var __iconNode19, Heading3;
+var __iconNode22, Heading3;
 var init_heading_3 = __esm({
   "node_modules/lucide-react/dist/esm/icons/heading-3.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode19 = [
+    __iconNode22 = [
       ["path", { d: "M4 12h8", key: "17cfdx" }],
       ["path", { d: "M4 18V6", key: "1rz3zl" }],
       ["path", { d: "M12 18V6", key: "zqpxq5" }],
       ["path", { d: "M17.5 10.5c1.7-1 3.5 0 3.5 1.5a2 2 0 0 1-2 2", key: "68ncm8" }],
       ["path", { d: "M17 17.5c2 1.5 4 .3 4-1.5a2 2 0 0 0-2-2", key: "1ejuhz" }]
     ];
-    Heading3 = createLucideIcon("heading-3", __iconNode19);
+    Heading3 = createLucideIcon("heading-3", __iconNode22);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/heading-4.js
-var __iconNode20, Heading4;
+var __iconNode23, Heading4;
 var init_heading_4 = __esm({
   "node_modules/lucide-react/dist/esm/icons/heading-4.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode20 = [
+    __iconNode23 = [
       ["path", { d: "M12 18V6", key: "zqpxq5" }],
       ["path", { d: "M17 10v3a1 1 0 0 0 1 1h3", key: "tj5zdr" }],
       ["path", { d: "M21 10v8", key: "1kdml4" }],
       ["path", { d: "M4 12h8", key: "17cfdx" }],
       ["path", { d: "M4 18V6", key: "1rz3zl" }]
     ];
-    Heading4 = createLucideIcon("heading-4", __iconNode20);
+    Heading4 = createLucideIcon("heading-4", __iconNode23);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/heading-5.js
-var __iconNode21, Heading5;
+var __iconNode24, Heading5;
 var init_heading_5 = __esm({
   "node_modules/lucide-react/dist/esm/icons/heading-5.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode21 = [
+    __iconNode24 = [
       ["path", { d: "M4 12h8", key: "17cfdx" }],
       ["path", { d: "M4 18V6", key: "1rz3zl" }],
       ["path", { d: "M12 18V6", key: "zqpxq5" }],
@@ -722,68 +770,68 @@ var init_heading_5 = __esm({
         { d: "M17 17.7c.4.2.8.3 1.3.3 1.5 0 2.7-1.1 2.7-2.5S19.8 13 18.3 13H17", key: "2nebdn" }
       ]
     ];
-    Heading5 = createLucideIcon("heading-5", __iconNode21);
+    Heading5 = createLucideIcon("heading-5", __iconNode24);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/heading-6.js
-var __iconNode22, Heading6;
+var __iconNode25, Heading6;
 var init_heading_6 = __esm({
   "node_modules/lucide-react/dist/esm/icons/heading-6.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode22 = [
+    __iconNode25 = [
       ["path", { d: "M4 12h8", key: "17cfdx" }],
       ["path", { d: "M4 18V6", key: "1rz3zl" }],
       ["path", { d: "M12 18V6", key: "zqpxq5" }],
       ["circle", { cx: "19", cy: "16", r: "2", key: "15mx69" }],
       ["path", { d: "M20 10c-2 2-3 3.5-3 6", key: "f35dl0" }]
     ];
-    Heading6 = createLucideIcon("heading-6", __iconNode22);
+    Heading6 = createLucideIcon("heading-6", __iconNode25);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/heading.js
-var __iconNode23, Heading;
+var __iconNode26, Heading;
 var init_heading = __esm({
   "node_modules/lucide-react/dist/esm/icons/heading.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode23 = [
+    __iconNode26 = [
       ["path", { d: "M6 12h12", key: "8npq4p" }],
       ["path", { d: "M6 20V4", key: "1w1bmo" }],
       ["path", { d: "M18 20V4", key: "o2hl4u" }]
     ];
-    Heading = createLucideIcon("heading", __iconNode23);
+    Heading = createLucideIcon("heading", __iconNode26);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/image.js
-var __iconNode24, Image;
+var __iconNode27, Image;
 var init_image = __esm({
   "node_modules/lucide-react/dist/esm/icons/image.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode24 = [
+    __iconNode27 = [
       ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2", key: "1m3agn" }],
       ["circle", { cx: "9", cy: "9", r: "2", key: "af1f0g" }],
       ["path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21", key: "1xmnt7" }]
     ];
-    Image = createLucideIcon("image", __iconNode24);
+    Image = createLucideIcon("image", __iconNode27);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/inbox.js
-var __iconNode25, Inbox;
+var __iconNode28, Inbox;
 var init_inbox = __esm({
   "node_modules/lucide-react/dist/esm/icons/inbox.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode25 = [
+    __iconNode28 = [
       ["polyline", { points: "22 12 16 12 14 15 10 15 8 12 2 12", key: "o97t9d" }],
       [
         "path",
@@ -793,50 +841,50 @@ var init_inbox = __esm({
         }
       ]
     ];
-    Inbox = createLucideIcon("inbox", __iconNode25);
+    Inbox = createLucideIcon("inbox", __iconNode28);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/info.js
-var __iconNode26, Info;
+var __iconNode29, Info;
 var init_info = __esm({
   "node_modules/lucide-react/dist/esm/icons/info.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode26 = [
+    __iconNode29 = [
       ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
       ["path", { d: "M12 16v-4", key: "1dtifu" }],
       ["path", { d: "M12 8h.01", key: "e9boi3" }]
     ];
-    Info = createLucideIcon("info", __iconNode26);
+    Info = createLucideIcon("info", __iconNode29);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/italic.js
-var __iconNode27, Italic;
+var __iconNode30, Italic;
 var init_italic = __esm({
   "node_modules/lucide-react/dist/esm/icons/italic.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode27 = [
+    __iconNode30 = [
       ["line", { x1: "19", x2: "10", y1: "4", y2: "4", key: "15jd3p" }],
       ["line", { x1: "14", x2: "5", y1: "20", y2: "20", key: "bu0au3" }],
       ["line", { x1: "15", x2: "9", y1: "4", y2: "20", key: "uljnxc" }]
     ];
-    Italic = createLucideIcon("italic", __iconNode27);
+    Italic = createLucideIcon("italic", __iconNode30);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/layers.js
-var __iconNode28, Layers;
+var __iconNode31, Layers;
 var init_layers = __esm({
   "node_modules/lucide-react/dist/esm/icons/layers.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode28 = [
+    __iconNode31 = [
       [
         "path",
         {
@@ -859,83 +907,83 @@ var init_layers = __esm({
         }
       ]
     ];
-    Layers = createLucideIcon("layers", __iconNode28);
+    Layers = createLucideIcon("layers", __iconNode31);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/layout-dashboard.js
-var __iconNode29, LayoutDashboard;
+var __iconNode32, LayoutDashboard;
 var init_layout_dashboard = __esm({
   "node_modules/lucide-react/dist/esm/icons/layout-dashboard.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode29 = [
+    __iconNode32 = [
       ["rect", { width: "7", height: "9", x: "3", y: "3", rx: "1", key: "10lvy0" }],
       ["rect", { width: "7", height: "5", x: "14", y: "3", rx: "1", key: "16une8" }],
       ["rect", { width: "7", height: "9", x: "14", y: "12", rx: "1", key: "1hutg5" }],
       ["rect", { width: "7", height: "5", x: "3", y: "16", rx: "1", key: "ldoo1y" }]
     ];
-    LayoutDashboard = createLucideIcon("layout-dashboard", __iconNode29);
+    LayoutDashboard = createLucideIcon("layout-dashboard", __iconNode32);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/layout-grid.js
-var __iconNode30, LayoutGrid;
+var __iconNode33, LayoutGrid;
 var init_layout_grid = __esm({
   "node_modules/lucide-react/dist/esm/icons/layout-grid.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode30 = [
+    __iconNode33 = [
       ["rect", { width: "7", height: "7", x: "3", y: "3", rx: "1", key: "1g98yp" }],
       ["rect", { width: "7", height: "7", x: "14", y: "3", rx: "1", key: "6d4xhi" }],
       ["rect", { width: "7", height: "7", x: "14", y: "14", rx: "1", key: "nxv5o0" }],
       ["rect", { width: "7", height: "7", x: "3", y: "14", rx: "1", key: "1bb6yr" }]
     ];
-    LayoutGrid = createLucideIcon("layout-grid", __iconNode30);
+    LayoutGrid = createLucideIcon("layout-grid", __iconNode33);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/layout-template.js
-var __iconNode31, LayoutTemplate;
+var __iconNode34, LayoutTemplate;
 var init_layout_template = __esm({
   "node_modules/lucide-react/dist/esm/icons/layout-template.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode31 = [
+    __iconNode34 = [
       ["rect", { width: "18", height: "7", x: "3", y: "3", rx: "1", key: "f1a2em" }],
       ["rect", { width: "9", height: "7", x: "3", y: "14", rx: "1", key: "jqznyg" }],
       ["rect", { width: "5", height: "7", x: "16", y: "14", rx: "1", key: "q5h2i8" }]
     ];
-    LayoutTemplate = createLucideIcon("layout-template", __iconNode31);
+    LayoutTemplate = createLucideIcon("layout-template", __iconNode34);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/link.js
-var __iconNode32, Link;
+var __iconNode35, Link;
 var init_link = __esm({
   "node_modules/lucide-react/dist/esm/icons/link.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode32 = [
+    __iconNode35 = [
       ["path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71", key: "1cjeqo" }],
       ["path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71", key: "19qd67" }]
     ];
-    Link = createLucideIcon("link", __iconNode32);
+    Link = createLucideIcon("link", __iconNode35);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/list-ordered.js
-var __iconNode33, ListOrdered;
+var __iconNode36, ListOrdered;
 var init_list_ordered = __esm({
   "node_modules/lucide-react/dist/esm/icons/list-ordered.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode33 = [
+    __iconNode36 = [
       ["path", { d: "M11 5h10", key: "1cz7ny" }],
       ["path", { d: "M11 12h10", key: "1438ji" }],
       ["path", { d: "M11 19h10", key: "11t30w" }],
@@ -943,18 +991,18 @@ var init_list_ordered = __esm({
       ["path", { d: "M4 9h2", key: "r1h2o0" }],
       ["path", { d: "M6.5 20H3.4c0-1 2.6-1.925 2.6-3.5a1.5 1.5 0 0 0-2.6-1.02", key: "xtkcd5" }]
     ];
-    ListOrdered = createLucideIcon("list-ordered", __iconNode33);
+    ListOrdered = createLucideIcon("list-ordered", __iconNode36);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/list.js
-var __iconNode34, List;
+var __iconNode37, List;
 var init_list = __esm({
   "node_modules/lucide-react/dist/esm/icons/list.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode34 = [
+    __iconNode37 = [
       ["path", { d: "M3 5h.01", key: "18ugdj" }],
       ["path", { d: "M3 12h.01", key: "nlz23k" }],
       ["path", { d: "M3 19h.01", key: "noohij" }],
@@ -962,65 +1010,65 @@ var init_list = __esm({
       ["path", { d: "M8 12h13", key: "1za7za" }],
       ["path", { d: "M8 19h13", key: "m83p4d" }]
     ];
-    List = createLucideIcon("list", __iconNode34);
+    List = createLucideIcon("list", __iconNode37);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/lock-open.js
-var __iconNode35, LockOpen;
+var __iconNode38, LockOpen;
 var init_lock_open = __esm({
   "node_modules/lucide-react/dist/esm/icons/lock-open.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode35 = [
+    __iconNode38 = [
       ["rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2", key: "1w4ew1" }],
       ["path", { d: "M7 11V7a5 5 0 0 1 9.9-1", key: "1mm8w8" }]
     ];
-    LockOpen = createLucideIcon("lock-open", __iconNode35);
+    LockOpen = createLucideIcon("lock-open", __iconNode38);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/lock.js
-var __iconNode36, Lock;
+var __iconNode39, Lock;
 var init_lock = __esm({
   "node_modules/lucide-react/dist/esm/icons/lock.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode36 = [
+    __iconNode39 = [
       ["rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2", key: "1w4ew1" }],
       ["path", { d: "M7 11V7a5 5 0 0 1 10 0v4", key: "fwvmzm" }]
     ];
-    Lock = createLucideIcon("lock", __iconNode36);
+    Lock = createLucideIcon("lock", __iconNode39);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/maximize-2.js
-var __iconNode37, Maximize2;
+var __iconNode40, Maximize2;
 var init_maximize_2 = __esm({
   "node_modules/lucide-react/dist/esm/icons/maximize-2.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode37 = [
+    __iconNode40 = [
       ["path", { d: "M15 3h6v6", key: "1q9fwt" }],
       ["path", { d: "m21 3-7 7", key: "1l2asr" }],
       ["path", { d: "m3 21 7-7", key: "tjx5ai" }],
       ["path", { d: "M9 21H3v-6", key: "wtvkvv" }]
     ];
-    Maximize2 = createLucideIcon("maximize-2", __iconNode37);
+    Maximize2 = createLucideIcon("maximize-2", __iconNode40);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/megaphone.js
-var __iconNode38, Megaphone;
+var __iconNode41, Megaphone;
 var init_megaphone = __esm({
   "node_modules/lucide-react/dist/esm/icons/megaphone.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode38 = [
+    __iconNode41 = [
       [
         "path",
         {
@@ -1031,63 +1079,63 @@ var init_megaphone = __esm({
       ["path", { d: "M6 14a12 12 0 0 0 2.4 7.2 2 2 0 0 0 3.2-2.4A8 8 0 0 1 10 14", key: "1853fq" }],
       ["path", { d: "M8 6v8", key: "15ugcq" }]
     ];
-    Megaphone = createLucideIcon("megaphone", __iconNode38);
+    Megaphone = createLucideIcon("megaphone", __iconNode41);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/minimize-2.js
-var __iconNode39, Minimize2;
+var __iconNode42, Minimize2;
 var init_minimize_2 = __esm({
   "node_modules/lucide-react/dist/esm/icons/minimize-2.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode39 = [
+    __iconNode42 = [
       ["path", { d: "m14 10 7-7", key: "oa77jy" }],
       ["path", { d: "M20 10h-6V4", key: "mjg0md" }],
       ["path", { d: "m3 21 7-7", key: "tjx5ai" }],
       ["path", { d: "M4 14h6v6", key: "rmj7iw" }]
     ];
-    Minimize2 = createLucideIcon("minimize-2", __iconNode39);
+    Minimize2 = createLucideIcon("minimize-2", __iconNode42);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/minus.js
-var __iconNode40, Minus;
+var __iconNode43, Minus;
 var init_minus = __esm({
   "node_modules/lucide-react/dist/esm/icons/minus.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode40 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
-    Minus = createLucideIcon("minus", __iconNode40);
+    __iconNode43 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
+    Minus = createLucideIcon("minus", __iconNode43);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/monitor.js
-var __iconNode41, Monitor;
+var __iconNode44, Monitor;
 var init_monitor = __esm({
   "node_modules/lucide-react/dist/esm/icons/monitor.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode41 = [
+    __iconNode44 = [
       ["rect", { width: "20", height: "14", x: "2", y: "3", rx: "2", key: "48i651" }],
       ["line", { x1: "8", x2: "16", y1: "21", y2: "21", key: "1svkeh" }],
       ["line", { x1: "12", x2: "12", y1: "17", y2: "21", key: "vw1qmm" }]
     ];
-    Monitor = createLucideIcon("monitor", __iconNode41);
+    Monitor = createLucideIcon("monitor", __iconNode44);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/moon.js
-var __iconNode42, Moon;
+var __iconNode45, Moon;
 var init_moon = __esm({
   "node_modules/lucide-react/dist/esm/icons/moon.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode42 = [
+    __iconNode45 = [
       [
         "path",
         {
@@ -1096,63 +1144,63 @@ var init_moon = __esm({
         }
       ]
     ];
-    Moon = createLucideIcon("moon", __iconNode42);
+    Moon = createLucideIcon("moon", __iconNode45);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/panel-left.js
-var __iconNode43, PanelLeft;
+var __iconNode46, PanelLeft;
 var init_panel_left = __esm({
   "node_modules/lucide-react/dist/esm/icons/panel-left.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode43 = [
+    __iconNode46 = [
       ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
       ["path", { d: "M9 3v18", key: "fh3hqa" }]
     ];
-    PanelLeft = createLucideIcon("panel-left", __iconNode43);
+    PanelLeft = createLucideIcon("panel-left", __iconNode46);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/panel-right.js
-var __iconNode44, PanelRight;
+var __iconNode47, PanelRight;
 var init_panel_right = __esm({
   "node_modules/lucide-react/dist/esm/icons/panel-right.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode44 = [
+    __iconNode47 = [
       ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
       ["path", { d: "M15 3v18", key: "14nvp0" }]
     ];
-    PanelRight = createLucideIcon("panel-right", __iconNode44);
+    PanelRight = createLucideIcon("panel-right", __iconNode47);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/plus.js
-var __iconNode45, Plus;
+var __iconNode48, Plus;
 var init_plus = __esm({
   "node_modules/lucide-react/dist/esm/icons/plus.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode45 = [
+    __iconNode48 = [
       ["path", { d: "M5 12h14", key: "1ays0h" }],
       ["path", { d: "M12 5v14", key: "s699le" }]
     ];
-    Plus = createLucideIcon("plus", __iconNode45);
+    Plus = createLucideIcon("plus", __iconNode48);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/quote.js
-var __iconNode46, Quote;
+var __iconNode49, Quote;
 var init_quote = __esm({
   "node_modules/lucide-react/dist/esm/icons/quote.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode46 = [
+    __iconNode49 = [
       [
         "path",
         {
@@ -1168,65 +1216,65 @@ var init_quote = __esm({
         }
       ]
     ];
-    Quote = createLucideIcon("quote", __iconNode46);
+    Quote = createLucideIcon("quote", __iconNode49);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/rectangle-ellipsis.js
-var __iconNode47, RectangleEllipsis;
+var __iconNode50, RectangleEllipsis;
 var init_rectangle_ellipsis = __esm({
   "node_modules/lucide-react/dist/esm/icons/rectangle-ellipsis.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode47 = [
+    __iconNode50 = [
       ["rect", { width: "20", height: "12", x: "2", y: "6", rx: "2", key: "9lu3g6" }],
       ["path", { d: "M12 12h.01", key: "1mp3jc" }],
       ["path", { d: "M17 12h.01", key: "1m0b6t" }],
       ["path", { d: "M7 12h.01", key: "eqddd0" }]
     ];
-    RectangleEllipsis = createLucideIcon("rectangle-ellipsis", __iconNode47);
+    RectangleEllipsis = createLucideIcon("rectangle-ellipsis", __iconNode50);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/redo-2.js
-var __iconNode48, Redo2;
+var __iconNode51, Redo2;
 var init_redo_2 = __esm({
   "node_modules/lucide-react/dist/esm/icons/redo-2.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode48 = [
+    __iconNode51 = [
       ["path", { d: "m15 14 5-5-5-5", key: "12vg1m" }],
       ["path", { d: "M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13", key: "6uklza" }]
     ];
-    Redo2 = createLucideIcon("redo-2", __iconNode48);
+    Redo2 = createLucideIcon("redo-2", __iconNode51);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/search.js
-var __iconNode49, Search;
+var __iconNode52, Search;
 var init_search = __esm({
   "node_modules/lucide-react/dist/esm/icons/search.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode49 = [
+    __iconNode52 = [
       ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
       ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
     ];
-    Search = createLucideIcon("search", __iconNode49);
+    Search = createLucideIcon("search", __iconNode52);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/settings.js
-var __iconNode50, Settings;
+var __iconNode53, Settings;
 var init_settings = __esm({
   "node_modules/lucide-react/dist/esm/icons/settings.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode50 = [
+    __iconNode53 = [
       [
         "path",
         {
@@ -1236,18 +1284,18 @@ var init_settings = __esm({
       ],
       ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
     ];
-    Settings = createLucideIcon("settings", __iconNode50);
+    Settings = createLucideIcon("settings", __iconNode53);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/shapes.js
-var __iconNode51, Shapes;
+var __iconNode54, Shapes;
 var init_shapes = __esm({
   "node_modules/lucide-react/dist/esm/icons/shapes.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode51 = [
+    __iconNode54 = [
       [
         "path",
         {
@@ -1258,18 +1306,18 @@ var init_shapes = __esm({
       ["rect", { x: "3", y: "14", width: "7", height: "7", rx: "1", key: "1bkyp8" }],
       ["circle", { cx: "17.5", cy: "17.5", r: "3.5", key: "w3z12y" }]
     ];
-    Shapes = createLucideIcon("shapes", __iconNode51);
+    Shapes = createLucideIcon("shapes", __iconNode54);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/sliders-horizontal.js
-var __iconNode52, SlidersHorizontal;
+var __iconNode55, SlidersHorizontal;
 var init_sliders_horizontal = __esm({
   "node_modules/lucide-react/dist/esm/icons/sliders-horizontal.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode52 = [
+    __iconNode55 = [
       ["path", { d: "M10 5H3", key: "1qgfaw" }],
       ["path", { d: "M12 19H3", key: "yhmn1j" }],
       ["path", { d: "M14 3v4", key: "1sua03" }],
@@ -1280,65 +1328,65 @@ var init_sliders_horizontal = __esm({
       ["path", { d: "M8 10v4", key: "tgpxqk" }],
       ["path", { d: "M8 12H3", key: "a7s4jb" }]
     ];
-    SlidersHorizontal = createLucideIcon("sliders-horizontal", __iconNode52);
+    SlidersHorizontal = createLucideIcon("sliders-horizontal", __iconNode55);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/smartphone.js
-var __iconNode53, Smartphone;
+var __iconNode56, Smartphone;
 var init_smartphone = __esm({
   "node_modules/lucide-react/dist/esm/icons/smartphone.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode53 = [
+    __iconNode56 = [
       ["rect", { width: "14", height: "20", x: "5", y: "2", rx: "2", ry: "2", key: "1yt0o3" }],
       ["path", { d: "M12 18h.01", key: "mhygvu" }]
     ];
-    Smartphone = createLucideIcon("smartphone", __iconNode53);
+    Smartphone = createLucideIcon("smartphone", __iconNode56);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/square-code.js
-var __iconNode54, SquareCode;
+var __iconNode57, SquareCode;
 var init_square_code = __esm({
   "node_modules/lucide-react/dist/esm/icons/square-code.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode54 = [
+    __iconNode57 = [
       ["path", { d: "m10 9-3 3 3 3", key: "1oro0q" }],
       ["path", { d: "m14 15 3-3-3-3", key: "bz13h7" }],
       ["rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", key: "h1oib" }]
     ];
-    SquareCode = createLucideIcon("square-code", __iconNode54);
+    SquareCode = createLucideIcon("square-code", __iconNode57);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/strikethrough.js
-var __iconNode55, Strikethrough;
+var __iconNode58, Strikethrough;
 var init_strikethrough = __esm({
   "node_modules/lucide-react/dist/esm/icons/strikethrough.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode55 = [
+    __iconNode58 = [
       ["path", { d: "M16 4H9a3 3 0 0 0-2.83 4", key: "43sutm" }],
       ["path", { d: "M14 12a4 4 0 0 1 0 8H6", key: "nlfj13" }],
       ["line", { x1: "4", x2: "20", y1: "12", y2: "12", key: "1e0a9i" }]
     ];
-    Strikethrough = createLucideIcon("strikethrough", __iconNode55);
+    Strikethrough = createLucideIcon("strikethrough", __iconNode58);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/sun.js
-var __iconNode56, Sun;
+var __iconNode59, Sun;
 var init_sun = __esm({
   "node_modules/lucide-react/dist/esm/icons/sun.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode56 = [
+    __iconNode59 = [
       ["circle", { cx: "12", cy: "12", r: "4", key: "4exip2" }],
       ["path", { d: "M12 2v2", key: "tus03m" }],
       ["path", { d: "M12 20v2", key: "1lh1kg" }],
@@ -1349,190 +1397,190 @@ var init_sun = __esm({
       ["path", { d: "m6.34 17.66-1.41 1.41", key: "1m8zz5" }],
       ["path", { d: "m19.07 4.93-1.41 1.41", key: "1shlcs" }]
     ];
-    Sun = createLucideIcon("sun", __iconNode56);
+    Sun = createLucideIcon("sun", __iconNode59);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/tablet.js
-var __iconNode57, Tablet;
+var __iconNode60, Tablet;
 var init_tablet = __esm({
   "node_modules/lucide-react/dist/esm/icons/tablet.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode57 = [
+    __iconNode60 = [
       ["rect", { width: "16", height: "20", x: "4", y: "2", rx: "2", ry: "2", key: "76otgf" }],
       ["line", { x1: "12", x2: "12.01", y1: "18", y2: "18", key: "1dp563" }]
     ];
-    Tablet = createLucideIcon("tablet", __iconNode57);
+    Tablet = createLucideIcon("tablet", __iconNode60);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/text-align-center.js
-var __iconNode58, TextAlignCenter;
+var __iconNode61, TextAlignCenter;
 var init_text_align_center = __esm({
   "node_modules/lucide-react/dist/esm/icons/text-align-center.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode58 = [
+    __iconNode61 = [
       ["path", { d: "M21 5H3", key: "1fi0y6" }],
       ["path", { d: "M17 12H7", key: "16if0g" }],
       ["path", { d: "M19 19H5", key: "vjpgq2" }]
     ];
-    TextAlignCenter = createLucideIcon("text-align-center", __iconNode58);
+    TextAlignCenter = createLucideIcon("text-align-center", __iconNode61);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/text-align-end.js
-var __iconNode59, TextAlignEnd;
+var __iconNode62, TextAlignEnd;
 var init_text_align_end = __esm({
   "node_modules/lucide-react/dist/esm/icons/text-align-end.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode59 = [
+    __iconNode62 = [
       ["path", { d: "M21 5H3", key: "1fi0y6" }],
       ["path", { d: "M21 12H9", key: "dn1m92" }],
       ["path", { d: "M21 19H7", key: "4cu937" }]
     ];
-    TextAlignEnd = createLucideIcon("text-align-end", __iconNode59);
+    TextAlignEnd = createLucideIcon("text-align-end", __iconNode62);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/text-align-justify.js
-var __iconNode60, TextAlignJustify;
+var __iconNode63, TextAlignJustify;
 var init_text_align_justify = __esm({
   "node_modules/lucide-react/dist/esm/icons/text-align-justify.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode60 = [
+    __iconNode63 = [
       ["path", { d: "M3 5h18", key: "1u36vt" }],
       ["path", { d: "M3 12h18", key: "1i2n21" }],
       ["path", { d: "M3 19h18", key: "awlh7x" }]
     ];
-    TextAlignJustify = createLucideIcon("text-align-justify", __iconNode60);
+    TextAlignJustify = createLucideIcon("text-align-justify", __iconNode63);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/text-align-start.js
-var __iconNode61, TextAlignStart;
+var __iconNode64, TextAlignStart;
 var init_text_align_start = __esm({
   "node_modules/lucide-react/dist/esm/icons/text-align-start.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode61 = [
+    __iconNode64 = [
       ["path", { d: "M21 5H3", key: "1fi0y6" }],
       ["path", { d: "M15 12H3", key: "6jk70r" }],
       ["path", { d: "M17 19H3", key: "z6ezky" }]
     ];
-    TextAlignStart = createLucideIcon("text-align-start", __iconNode61);
+    TextAlignStart = createLucideIcon("text-align-start", __iconNode64);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/toy-brick.js
-var __iconNode62, ToyBrick;
+var __iconNode65, ToyBrick;
 var init_toy_brick = __esm({
   "node_modules/lucide-react/dist/esm/icons/toy-brick.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode62 = [
+    __iconNode65 = [
       ["rect", { width: "18", height: "12", x: "3", y: "8", rx: "1", key: "158fvp" }],
       ["path", { d: "M10 8V5c0-.6-.4-1-1-1H6a1 1 0 0 0-1 1v3", key: "s0042v" }],
       ["path", { d: "M19 8V5c0-.6-.4-1-1-1h-3a1 1 0 0 0-1 1v3", key: "9wmeh2" }]
     ];
-    ToyBrick = createLucideIcon("toy-brick", __iconNode62);
+    ToyBrick = createLucideIcon("toy-brick", __iconNode65);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/trash.js
-var __iconNode63, Trash;
+var __iconNode66, Trash;
 var init_trash = __esm({
   "node_modules/lucide-react/dist/esm/icons/trash.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode63 = [
+    __iconNode66 = [
       ["path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6", key: "miytrc" }],
       ["path", { d: "M3 6h18", key: "d0wm0j" }],
       ["path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2", key: "e791ji" }]
     ];
-    Trash = createLucideIcon("trash", __iconNode63);
+    Trash = createLucideIcon("trash", __iconNode66);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/type.js
-var __iconNode64, Type;
+var __iconNode67, Type;
 var init_type = __esm({
   "node_modules/lucide-react/dist/esm/icons/type.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode64 = [
+    __iconNode67 = [
       ["path", { d: "M12 4v16", key: "1654pz" }],
       ["path", { d: "M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2", key: "e0r10z" }],
       ["path", { d: "M9 20h6", key: "s66wpe" }]
     ];
-    Type = createLucideIcon("type", __iconNode64);
+    Type = createLucideIcon("type", __iconNode67);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/underline.js
-var __iconNode65, Underline;
+var __iconNode68, Underline;
 var init_underline = __esm({
   "node_modules/lucide-react/dist/esm/icons/underline.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode65 = [
+    __iconNode68 = [
       ["path", { d: "M6 4v6a6 6 0 0 0 12 0V4", key: "9kb039" }],
       ["line", { x1: "4", x2: "20", y1: "20", y2: "20", key: "nun2al" }]
     ];
-    Underline = createLucideIcon("underline", __iconNode65);
+    Underline = createLucideIcon("underline", __iconNode68);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/undo-2.js
-var __iconNode66, Undo2;
+var __iconNode69, Undo2;
 var init_undo_2 = __esm({
   "node_modules/lucide-react/dist/esm/icons/undo-2.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode66 = [
+    __iconNode69 = [
       ["path", { d: "M9 14 4 9l5-5", key: "102s5s" }],
       ["path", { d: "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11", key: "f3b9sd" }]
     ];
-    Undo2 = createLucideIcon("undo-2", __iconNode66);
+    Undo2 = createLucideIcon("undo-2", __iconNode69);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/x.js
-var __iconNode67, X;
+var __iconNode70, X;
 var init_x = __esm({
   "node_modules/lucide-react/dist/esm/icons/x.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode67 = [
+    __iconNode70 = [
       ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
       ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
     ];
-    X = createLucideIcon("x", __iconNode67);
+    X = createLucideIcon("x", __iconNode70);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/zap.js
-var __iconNode68, Zap;
+var __iconNode71, Zap;
 var init_zap = __esm({
   "node_modules/lucide-react/dist/esm/icons/zap.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode68 = [
+    __iconNode71 = [
       [
         "path",
         {
@@ -1541,40 +1589,40 @@ var init_zap = __esm({
         }
       ]
     ];
-    Zap = createLucideIcon("zap", __iconNode68);
+    Zap = createLucideIcon("zap", __iconNode71);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/zoom-in.js
-var __iconNode69, ZoomIn;
+var __iconNode72, ZoomIn;
 var init_zoom_in = __esm({
   "node_modules/lucide-react/dist/esm/icons/zoom-in.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode69 = [
+    __iconNode72 = [
       ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }],
       ["line", { x1: "21", x2: "16.65", y1: "21", y2: "16.65", key: "13gj7c" }],
       ["line", { x1: "11", x2: "11", y1: "8", y2: "14", key: "1vmskp" }],
       ["line", { x1: "8", x2: "14", y1: "11", y2: "11", key: "durymu" }]
     ];
-    ZoomIn = createLucideIcon("zoom-in", __iconNode69);
+    ZoomIn = createLucideIcon("zoom-in", __iconNode72);
   }
 });
 
 // node_modules/lucide-react/dist/esm/icons/zoom-out.js
-var __iconNode70, ZoomOut;
+var __iconNode73, ZoomOut;
 var init_zoom_out = __esm({
   "node_modules/lucide-react/dist/esm/icons/zoom-out.js"() {
     "use strict";
     init_react_import();
     init_createLucideIcon();
-    __iconNode70 = [
+    __iconNode73 = [
       ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }],
       ["line", { x1: "21", x2: "16.65", y1: "21", y2: "16.65", key: "13gj7c" }],
       ["line", { x1: "8", x2: "14", y1: "11", y2: "11", key: "durymu" }]
     ];
-    ZoomOut = createLucideIcon("zoom-out", __iconNode70);
+    ZoomOut = createLucideIcon("zoom-out", __iconNode73);
   }
 });
 
@@ -1585,6 +1633,7 @@ var init_lucide_react = __esm({
     init_react_import();
     init_chart_column();
     init_circle_check_big();
+    init_circle_check();
     init_layers();
     init_lock_open();
     init_panel_left();
@@ -1596,6 +1645,7 @@ var init_lucide_react = __esm({
     init_text_align_start();
     init_bold();
     init_box();
+    init_check();
     init_chevron_down();
     init_chevron_right();
     init_chevron_up();
@@ -1605,6 +1655,7 @@ var init_lucide_react = __esm({
     init_credit_card();
     init_expand();
     init_external_link();
+    init_eye();
     init_file_text();
     init_grip_vertical();
     init_hash();
@@ -8417,6 +8468,7 @@ __export(index_exports, {
   Separator: () => Separator,
   SliderField: () => SliderField,
   blocksPlugin: () => blocksPlugin,
+  codePlugin: () => codePlugin,
   createUseCredBuild: () => createUseCredBuild,
   fieldsPlugin: () => fieldsPlugin,
   legacySideBarPlugin: () => legacySideBarPlugin,
@@ -9288,6 +9340,7 @@ var DraggableComponent = ({
   );
   const overrides = useAppStore((s) => s.overrides);
   const dispatch = useAppStore((s) => s.dispatch);
+  const appStore = useAppStoreApi();
   const isIframeEnabled = useAppStore((s) => s.iframe.enabled);
   const lastMeasureRef = (0, import_react58.useRef)(0);
   const ctx = (0, import_react58.useContext)(dropZoneContext);
@@ -9416,11 +9469,12 @@ var DraggableComponent = ({
       x: deepScrollPosition.x - portalScroll.x - (portalContainerRect?.left ?? 0),
       y: deepScrollPosition.y - portalScroll.y - (portalContainerRect?.top ?? 0)
     };
+    const zoomMultiplier = isIframeEnabled ? 1 : appStore.getState().zoomConfig.zoom;
     const style2 = {
-      left: `${rect.left + scroll.x}px`,
-      top: `${rect.top + scroll.y}px`,
-      height: `${rect.height}px`,
-      width: `${rect.width}px`,
+      left: `${(rect.left + scroll.x) / zoomMultiplier}px`,
+      top: `${(rect.top + scroll.y) / zoomMultiplier}px`,
+      height: `${rect.height / zoomMultiplier}px`,
+      width: `${rect.width / zoomMultiplier}px`,
       position: targetIsFixed ? "fixed" : void 0
     };
     return style2;
@@ -9520,7 +9574,6 @@ var DraggableComponent = ({
     },
     [index, zoneCompound, isSelected, _experimentalFullScreenCanvas, dispatch, zoneStore]
   );
-  const appStore = useAppStoreApi();
   const onSelectParent = (0, import_react58.useCallback)(() => {
     const { nodes, zones } = appStore.getState().state.indexes;
     const node = nodes[id];
@@ -11422,7 +11475,7 @@ init_IconButton2();
 
 // components/CredBuild/index.tsx
 init_react_import();
-var import_react101 = require("react");
+var import_react103 = require("react");
 init_store2();
 
 // components/CredBuild/components/Fields/index.tsx
@@ -11877,7 +11930,7 @@ var Components = () => {
 // components/CredBuild/components/Preview/index.tsx
 init_react_import();
 init_root_droppable_id();
-var import_react82 = require("react");
+var import_react83 = require("react");
 init_store2();
 
 // components/AutoFrame/index.tsx
@@ -12181,11 +12234,125 @@ var styles_module_default21 = { "CredBuildPreview": "_CredBuildPreview_1z08a_1",
 // components/CredBuild/components/Preview/index.tsx
 init_lib();
 
-// components/Render/index.tsx
+// components/HtmlModeRender/index.tsx
 init_react_import();
-init_root_droppable_id();
 var import_react81 = require("react");
 var import_jsx_runtime78 = require("react/jsx-runtime");
+var HtmlModeRender = ({
+  htmlCode,
+  isEditing
+}) => {
+  const id = (0, import_react81.useId)().replace(/:/g, "");
+  const [iframeHeight, setIframeHeight] = (0, import_react81.useState)("100vh");
+  (0, import_react81.useEffect)(() => {
+    const handleMessage = (event) => {
+      if (event.data && event.data.type === "resize-iframe" && event.data.id === id) {
+        setIframeHeight(`${event.data.height}px`);
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [id]);
+  if (!htmlCode) {
+    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { style: { padding: 48, textAlign: "center", color: "#666" }, children: "Belum ada kode HTML yang ditempel." });
+  }
+  const resizeScript = `
+    <script>
+      function sendHeight() {
+        const body = document.body;
+        const html = document.documentElement;
+        const height = Math.max(
+          body.scrollHeight, body.offsetHeight,
+          html.clientHeight, html.scrollHeight, html.offsetHeight
+        );
+        window.parent.postMessage({ type: 'resize-iframe', id: '${id}', height: height }, '*');
+      }
+      window.addEventListener('load', sendHeight);
+      window.addEventListener('resize', sendHeight);
+      
+      if (window.ResizeObserver) {
+        new ResizeObserver(sendHeight).observe(document.body);
+      } else {
+        setInterval(sendHeight, 1000);
+      }
+    </script>
+  `;
+  const needsTailwind = htmlCode.includes("cdn.tailwindcss.com") || htmlCode.includes("tailwindcss") || /\b(bg-|text-|p[xy]?[-0-9]|m[xy]?[-0-9]|flex|grid|border-|rounded-|shadow-|justify-|items-|gap-|relative|absolute|hidden|w-|h-|leading-|tracking-|font-|transition|duration-|ease-|hover:|focus:|sm:|md:|lg:|xl:)/.test(
+    htmlCode
+  );
+  const isStandalone = htmlCode.includes("<html") || htmlCode.includes("<!DOCTYPE") || htmlCode.includes("<body") || htmlCode.includes("<head>");
+  let srcDoc = "";
+  if (isStandalone) {
+    let processed = htmlCode;
+    if (processed.includes("</body>")) {
+      processed = processed.replace("</body>", `${resizeScript}</body>`);
+    } else {
+      processed = processed + resizeScript;
+    }
+    if (needsTailwind && !processed.includes("cdn.tailwindcss.com") && !processed.includes("tailwindcss")) {
+      if (processed.includes("</head>")) {
+        processed = processed.replace(
+          "</head>",
+          `<script src="https://cdn.tailwindcss.com"></script></head>`
+        );
+      } else if (processed.includes("<head>")) {
+        processed = processed.replace(
+          "<head>",
+          `<head><script src="https://cdn.tailwindcss.com"></script>`
+        );
+      } else {
+        processed = `<script src="https://cdn.tailwindcss.com"></script>` + processed;
+      }
+    }
+    srcDoc = processed;
+  } else {
+    srcDoc = `
+      <!DOCTYPE html>
+      <html>
+        <head>
+          ${needsTailwind ? `<script src="https://cdn.tailwindcss.com"></script>` : ""}
+          <style>
+            *, *::before, *::after { box-sizing: border-box; }
+            body {
+              margin: 0;
+              padding: 0;
+              font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            }
+            img, iframe, video {
+              max-width: 100%;
+            }
+          </style>
+        </head>
+        <body>
+          ${htmlCode}
+          ${resizeScript}
+        </body>
+      </html>
+    `;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+    "iframe",
+    {
+      srcDoc,
+      sandbox: "allow-scripts allow-same-origin allow-popups allow-forms",
+      title: "Html Mode Sandboxed Canvas",
+      loading: "lazy",
+      style: {
+        height: iframeHeight,
+        border: "none",
+        width: "100%",
+        display: "block",
+        background: "transparent"
+      }
+    }
+  ) });
+};
+
+// components/Render/index.tsx
+init_react_import();
+init_root_droppable_id();
+var import_react82 = require("react");
+var import_jsx_runtime79 = require("react/jsx-runtime");
 function Render({
   config,
   data,
@@ -12198,6 +12365,9 @@ function Render({
   };
   const rootProps = "props" in defaultedData.root ? defaultedData.root.props : defaultedData.root;
   const title = rootProps?.title || "";
+  if (rootProps?.mode === "html") {
+    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(HtmlModeRender, { htmlCode: rootProps.htmlCode, isEditing: false }) });
+  }
   const pageProps = {
     ...rootProps,
     credbuild: {
@@ -12213,10 +12383,10 @@ function Render({
   const propsWithSlots = useSlots(
     config,
     { type: "root", props: pageProps },
-    (props) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(SlotRender, { ...props, config, metadata })
+    (props) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(SlotRender, { ...props, config, metadata })
   );
   const richtextProps = useRichtextProps(config.root?.fields, pageProps);
-  const nextContextValue = (0, import_react81.useMemo)(
+  const nextContextValue = (0, import_react82.useMemo)(
     () => ({
       mode: "render",
       depth: 0
@@ -12224,9 +12394,9 @@ function Render({
     []
   );
   if (config.root?.render) {
-    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(config.root.render, { ...propsWithSlots, ...richtextProps, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(DropZoneRenderPure, { zone: rootZone }) }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(config.root.render, { ...propsWithSlots, ...richtextProps, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(DropZoneRenderPure, { zone: rootZone }) }) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(DropZoneRenderPure, { zone: rootZone }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(DropZoneRenderPure, { zone: rootZone }) }) });
 }
 
 // lib/bubble-pointer-event.ts
@@ -12249,11 +12419,11 @@ var BubbledPointerEvent = class extends BaseEvent {
 };
 
 // components/CredBuild/components/Preview/index.tsx
-var import_jsx_runtime79 = require("react/jsx-runtime");
+var import_jsx_runtime80 = require("react/jsx-runtime");
 var getClassName30 = get_class_name_factory_default("CredBuildPreview", styles_module_default21);
 var useBubbleIframeEvents = (ref) => {
   const status = useAppStore((s) => s.status);
-  (0, import_react82.useEffect)(() => {
+  (0, import_react83.useEffect)(() => {
     if (ref.current && status === "READY") {
       const iframe = ref.current;
       const handlePointerMove = (event) => {
@@ -12301,7 +12471,7 @@ var Preview = ({ id = "credbuild-preview" }) => {
   const renderData = useAppStore(
     (s) => s.state.ui.previewMode === "edit" ? null : s.state.data
   );
-  const Page = (0, import_react82.useCallback)(
+  const Page = (0, import_react83.useCallback)(
     (pageProps) => {
       const propsWithSlots = useSlots(
         config,
@@ -12316,15 +12486,101 @@ var Preview = ({ id = "credbuild-preview" }) => {
         id: "credbuild-root",
         ...propsWithSlots,
         ...richtextProps
-      }) : /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_jsx_runtime79.Fragment, { children: propsWithSlots.children });
+      }) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_jsx_runtime80.Fragment, { children: propsWithSlots.children });
     },
     [config]
   );
-  const Frame = (0, import_react82.useMemo)(() => overrides.iframe, [overrides]);
+  const Frame = (0, import_react83.useMemo)(() => overrides.iframe, [overrides]);
   const rootProps = root.props || root;
-  const ref = (0, import_react82.useRef)(null);
+  const isHtmlMode = rootProps?.mode === "html";
+  const htmlViewMode = rootProps?.htmlViewMode || (rootProps?.htmlCode ? "preview" : "code");
+  const htmlCode = rootProps?.htmlCode || "";
+  const ref = (0, import_react83.useRef)(null);
   useBubbleIframeEvents(ref);
-  const inner = !renderData ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+  const [localCode, setLocalCode] = (0, import_react83.useState)(htmlCode);
+  (0, import_react83.useEffect)(() => {
+    setLocalCode(htmlCode);
+  }, [htmlCode]);
+  (0, import_react83.useEffect)(() => {
+    if (localCode === htmlCode) return;
+    const timer = setTimeout(() => {
+      dispatch({
+        type: "setData",
+        data: (currentData) => {
+          if (currentData.root?.props?.htmlCode === localCode) {
+            return currentData;
+          }
+          return {
+            ...currentData,
+            root: {
+              ...currentData.root,
+              props: {
+                ...currentData.root?.props,
+                htmlCode: localCode
+              }
+            }
+          };
+        }
+      });
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [localCode, htmlCode, dispatch]);
+  const handleSaveOnBlur = () => {
+    dispatch({
+      type: "setData",
+      data: (currentData) => {
+        if (currentData.root?.props?.htmlCode === localCode) {
+          return currentData;
+        }
+        return {
+          ...currentData,
+          root: {
+            ...currentData.root,
+            props: {
+              ...currentData.root?.props,
+              htmlCode: localCode
+            }
+          }
+        };
+      }
+    });
+  };
+  const handleSetViewMode = (modeVal) => {
+    dispatch({
+      type: "setData",
+      data: (currentData) => ({
+        ...currentData,
+        root: {
+          ...currentData.root,
+          props: {
+            ...currentData.root?.props,
+            htmlViewMode: modeVal
+          }
+        }
+      })
+    });
+  };
+  const handleResetToBlocks = () => {
+    dispatch({
+      type: "setData",
+      data: (currentData) => ({
+        ...currentData,
+        content: [],
+        root: {
+          ...currentData.root,
+          props: {
+            ...currentData.root?.props,
+            mode: "blocks",
+            htmlCode: "",
+            htmlViewMode: "code"
+          }
+        }
+      })
+    });
+  };
+  const isHtmlCodeEditActive = isHtmlMode && !renderData && htmlViewMode === "code";
+  const isHtmlPreviewActive = isHtmlMode && !renderData && htmlViewMode === "preview";
+  const inner = rootProps?.mode === "html" ? !renderData ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(HtmlModeRender, { htmlCode: rootProps.htmlCode, isEditing: true }) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Render, { data: renderData, config, metadata }) : !renderData ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
     Page,
     {
       ...rootProps,
@@ -12335,27 +12591,91 @@ var Preview = ({ id = "credbuild-preview" }) => {
         metadata
       },
       editMode: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(DropZonePure, { zone: rootDroppableId })
+      children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(DropZonePure, { zone: rootDroppableId })
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Render, { data: renderData, config, metadata });
-  (0, import_react82.useEffect)(() => {
+  ) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Render, { data: renderData, config, metadata });
+  (0, import_react83.useEffect)(() => {
     if (!iframe.enabled) {
       setStatus("READY");
     }
   }, [iframe.enabled, setStatus]);
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+  if (isHtmlCodeEditActive) {
+    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+      "div",
+      {
+        className: getClassName30(),
+        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: {
+          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"
+              }
+            }
+          )
+        ] }) })
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
     "div",
     {
       className: getClassName30(),
       id,
       "data-credbuild-preview": true,
+      style: { height: "100%", display: "flex", flexDirection: "column" },
       onClick: (e) => {
         const el = e.target;
         if (!el.hasAttribute("data-credbuild-component") && !el.hasAttribute("data-credbuild-dropzone")) {
           dispatch({ type: "setUi", ui: { itemSelector: null } });
         }
       },
-      children: iframe.enabled ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { style: { flex: 1, position: "relative", minHeight: 0, height: "100%" }, children: iframe.enabled ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
         AutoFrame_default,
         {
           id: "preview-frame",
@@ -12368,23 +12688,24 @@ var Preview = ({ id = "credbuild-preview" }) => {
             setStatus("MOUNTED");
           },
           frameRef: ref,
-          children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
+          children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
             if (Frame) {
-              return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Frame, { document: document2, children: inner });
+              return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Frame, { document: document2, children: inner });
             }
             return inner;
           } })
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
         "div",
         {
           id: "preview-frame",
           className: getClassName30("frame"),
           ref,
           "data-credbuild-entry": true,
+          style: { height: "100%", width: "100%" },
           children: inner
         }
-      )
+      ) })
     }
   );
 };
@@ -12403,11 +12724,11 @@ var styles_module_default22 = { "LayerTree": "_LayerTree_nus40_1", "LayerTree-zo
 init_get_class_name_factory();
 init_lucide_react();
 init_root_droppable_id();
-var import_react83 = require("react");
+var import_react84 = require("react");
 init_store2();
 init_use_context_store();
 var import_react_virtual2 = require("@tanstack/react-virtual");
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_jsx_runtime81 = require("react/jsx-runtime");
 var getClassName31 = get_class_name_factory_default("LayerTree", styles_module_default22);
 var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default22);
 var DEFAULT_LAYER_ROW_HEIGHT = 32;
@@ -12506,7 +12827,7 @@ var getScrollParent = (el) => {
   }
   return null;
 };
-var Layer = (0, import_react83.memo)((0, import_react83.forwardRef)(function Layer2({
+var Layer = (0, import_react84.memo)((0, import_react84.forwardRef)(function Layer2({
   childIsSelected,
   dataIndex,
   depth,
@@ -12516,13 +12837,13 @@ var Layer = (0, import_react83.memo)((0, import_react83.forwardRef)(function Lay
   selectedPathIds
 }, ref) {
   const dispatch = useAppStore((s) => s.dispatch);
-  const zoneStore = (0, import_react83.useContext)(ZoneStoreContext);
+  const zoneStore = (0, import_react84.useContext)(ZoneStoreContext);
   const isHovering = useContextStore(
     ZoneStoreContext,
     (s) => s.hoveringComponent === node.itemId
   );
   const containsZone = node.childZones.length > 0;
-  const setItemSelector = (0, import_react83.useCallback)(
+  const setItemSelector = (0, import_react84.useCallback)(
     (itemSelector) => {
       dispatch({ type: "setUi", ui: { itemSelector } });
     },
@@ -12531,19 +12852,19 @@ var Layer = (0, import_react83.memo)((0, import_react83.forwardRef)(function Lay
   const shouldRenderChildren = isSelected || childIsSelected;
   const getLayerIcon = (type) => {
     const t = type.toLowerCase();
-    if (t === "text" || t === "heading" || t.includes("heading")) return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Type, { size: "14", strokeWidth: 2.5 });
-    if (t.includes("hero")) return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(LayoutTemplate, { size: "14", strokeWidth: 2.5 });
-    if (t.includes("pricing")) return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(CreditCard, { size: "14", strokeWidth: 2.5 });
-    if (t.includes("stats")) return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ChartColumn, { size: "14", strokeWidth: 2.5 });
-    if (t.includes("testimonials")) return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Quote, { size: "14", strokeWidth: 2.5 });
-    if (t.includes("about") || t.includes("info")) return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Info, { size: "14", strokeWidth: 2.5 });
-    if (t.includes("gallery") || t.includes("image")) return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Image, { size: "14", strokeWidth: 2.5 });
-    if (t.includes("marketing") || t.includes("cta")) return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Megaphone, { size: "14", strokeWidth: 2.5 });
-    if (t.includes("content") || t.includes("blog")) return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(FileText, { size: "14", strokeWidth: 2.5 });
-    if (t.includes("container") || t.includes("layout") || t.includes("flex")) return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Box, { size: "14", strokeWidth: 2.5 });
-    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(LayoutGrid, { size: "14", strokeWidth: 2.5 });
+    if (t === "text" || t === "heading" || t.includes("heading")) return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Type, { size: "14", strokeWidth: 2.5 });
+    if (t.includes("hero")) return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(LayoutTemplate, { size: "14", strokeWidth: 2.5 });
+    if (t.includes("pricing")) return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(CreditCard, { size: "14", strokeWidth: 2.5 });
+    if (t.includes("stats")) return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ChartColumn, { size: "14", strokeWidth: 2.5 });
+    if (t.includes("testimonials")) return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Quote, { size: "14", strokeWidth: 2.5 });
+    if (t.includes("about") || t.includes("info")) return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Info, { size: "14", strokeWidth: 2.5 });
+    if (t.includes("gallery") || t.includes("image")) return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Image, { size: "14", strokeWidth: 2.5 });
+    if (t.includes("marketing") || t.includes("cta")) return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Megaphone, { size: "14", strokeWidth: 2.5 });
+    if (t.includes("content") || t.includes("blog")) return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(FileText, { size: "14", strokeWidth: 2.5 });
+    if (t.includes("container") || t.includes("layout") || t.includes("flex")) return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Box, { size: "14", strokeWidth: 2.5 });
+    return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(LayoutGrid, { size: "14", strokeWidth: 2.5 });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
     "li",
     {
       ref,
@@ -12556,7 +12877,7 @@ var Layer = (0, import_react83.memo)((0, import_react83.forwardRef)(function Lay
       "data-index": dataIndex,
       "data-credbuild-layer-tree-id": node.itemId,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
           "button",
           {
             type: "button",
@@ -12581,26 +12902,26 @@ var Layer = (0, import_react83.memo)((0, import_react83.forwardRef)(function Lay
               zoneStore.setState({ hoveringComponent: null });
             },
             children: [
-              containsZone && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+              containsZone && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
                 "div",
                 {
                   className: getClassNameLayer("chevron"),
                   title: isSelected ? "Collapse" : "Expand",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ChevronDown, { size: "12" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ChevronDown, { size: "12" })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: getClassNameLayer("title"), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: getClassNameLayer("icon"), children: getLayerIcon(node.componentType) }),
-                /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: getClassNameLayer("name"), children: node.label })
+              /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: getClassNameLayer("title"), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: getClassNameLayer("icon"), children: getLayerIcon(node.componentType) }),
+                /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: getClassNameLayer("name"), children: node.label })
               ] })
             ]
           }
         ) }),
-        containsZone && shouldRenderChildren && node.childZones.map((childZone) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+        containsZone && shouldRenderChildren && node.childZones.map((childZone) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
           "div",
           {
             className: getClassNameLayer("zones"),
-            children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
               LayerTreeZone,
               {
                 depth: depth + 1,
@@ -12616,19 +12937,19 @@ var Layer = (0, import_react83.memo)((0, import_react83.forwardRef)(function Lay
     }
   );
 }));
-var LayerTreeZone = (0, import_react83.memo)(({
+var LayerTreeZone = (0, import_react84.memo)(({
   depth,
   selectedId,
   selectedPathIds,
   tree
 }) => {
   const shouldVirtualize = depth === 0 && tree.items.length >= MIN_VIRTUALIZED_LAYER_COUNT;
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
-    tree.label && /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: getClassName31("zoneTitle"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: getClassName31("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Layers, { size: "16" }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(import_jsx_runtime81.Fragment, { children: [
+    tree.label && /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: getClassName31("zoneTitle"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: getClassName31("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Layers, { size: "16" }) }),
       tree.label
     ] }),
-    shouldVirtualize ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+    shouldVirtualize ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
       VirtualizedLayerTreeItems,
       {
         depth,
@@ -12636,7 +12957,7 @@ var LayerTreeZone = (0, import_react83.memo)(({
         selectedPathIds,
         tree
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
       StaticLayerTreeItems,
       {
         depth,
@@ -12647,15 +12968,15 @@ var LayerTreeZone = (0, import_react83.memo)(({
     )
   ] });
 });
-var StaticLayerTreeItems = (0, import_react83.memo)(({
+var StaticLayerTreeItems = (0, import_react84.memo)(({
   depth,
   selectedId,
   selectedPathIds,
   tree
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("ul", { className: getClassName31(), children: [
-    tree.items.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: getClassName31("helper"), children: "No items" }),
-    tree.items.map((node) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("ul", { className: getClassName31(), children: [
+    tree.items.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: getClassName31("helper"), children: "No items" }),
+    tree.items.map((node) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
       Layer,
       {
         childIsSelected: selectedPathIds.has(node.itemId),
@@ -12669,13 +12990,13 @@ var StaticLayerTreeItems = (0, import_react83.memo)(({
     ))
   ] });
 });
-var VirtualizedLayerTreeItems = (0, import_react83.memo)(({
+var VirtualizedLayerTreeItems = (0, import_react84.memo)(({
   depth,
   selectedId,
   selectedPathIds,
   tree
 }) => {
-  const listRef = (0, import_react83.useRef)(null);
+  const listRef = (0, import_react84.useRef)(null);
   const virtualizer = (0, import_react_virtual2.useVirtualizer)({
     count: tree.items.length,
     estimateSize: (index) => getEstimatedRowHeight(tree.items[index].itemId),
@@ -12701,7 +13022,7 @@ var VirtualizedLayerTreeItems = (0, import_react83.memo)(({
     const gapSize = Math.max(virtualItem.start - previousEnd, 0);
     if (gapSize > 0) {
       renderedItems.push(
-        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
           "li",
           {
             "aria-hidden": "true",
@@ -12712,7 +13033,7 @@ var VirtualizedLayerTreeItems = (0, import_react83.memo)(({
       );
     }
     renderedItems.push(
-      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
         Layer,
         {
           childIsSelected: selectedPathIds.has(node.itemId),
@@ -12733,7 +13054,7 @@ var VirtualizedLayerTreeItems = (0, import_react83.memo)(({
   const trailingGap = Math.max(totalSize - previousEnd, 0);
   if (trailingGap > 0) {
     renderedItems.push(
-      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
         "li",
         {
           "aria-hidden": "true",
@@ -12743,17 +13064,17 @@ var VirtualizedLayerTreeItems = (0, import_react83.memo)(({
       )
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("ul", { className: getClassName31(), ref: listRef, children: [
-    tree.items.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: getClassName31("helper"), children: "No items" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("ul", { className: getClassName31(), ref: listRef, children: [
+    tree.items.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: getClassName31("helper"), children: "No items" }),
     renderedItems
   ] });
 });
-var LayerTree = (0, import_react83.memo)(({
+var LayerTree = (0, import_react84.memo)(({
   selectedId,
   selectedPathIds,
   trees
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_jsx_runtime80.Fragment, { children: trees.map((tree) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_jsx_runtime81.Fragment, { children: trees.map((tree) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
     LayerTreeZone,
     {
       depth: 0,
@@ -12767,7 +13088,7 @@ var LayerTree = (0, import_react83.memo)(({
 
 // components/CredBuild/components/Outline/index.tsx
 init_store2();
-var import_react84 = require("react");
+var import_react85 = require("react");
 
 // lib/data/find-zones-for-area.ts
 init_react_import();
@@ -12779,8 +13100,8 @@ var findZonesForArea = (state, area) => {
 
 // components/CredBuild/components/Outline/index.tsx
 var import_shallow8 = require("zustand/react/shallow");
-var import_jsx_runtime81 = require("react/jsx-runtime");
-var Outline = (0, import_react84.memo)(() => {
+var import_jsx_runtime82 = require("react/jsx-runtime");
+var Outline = (0, import_react85.memo)(() => {
   const outlineOverride = useAppStore((s) => s.overrides.outline);
   const config = useAppStore((s) => s.config);
   const nodes = useAppStore((s) => s.state.indexes.nodes);
@@ -12789,13 +13110,13 @@ var Outline = (0, import_react84.memo)(() => {
   const rootZones = useAppStore(
     (0, import_shallow8.useShallow)((s) => findZonesForArea(s.state, "root"))
   );
-  const selectedPathIds = (0, import_react84.useMemo)(() => {
+  const selectedPathIds = (0, import_react85.useMemo)(() => {
     const selectedPath = selectedId ? nodes[selectedId]?.path : null;
     return new Set(
       selectedPath?.map((candidate) => candidate.split(":")[0]).filter(Boolean) || []
     );
   }, [nodes, selectedId]);
-  const trees = (0, import_react84.useMemo)(
+  const trees = (0, import_react85.useMemo)(
     () => rootZones.map(
       (zoneCompound) => buildLayerTree({
         config,
@@ -12807,8 +13128,8 @@ var Outline = (0, import_react84.memo)(() => {
     ),
     [config, nodes, rootZones, zones]
   );
-  const Wrapper = (0, import_react84.useMemo)(() => outlineOverride || "div", [outlineOverride]);
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+  const Wrapper = (0, import_react85.useMemo)(() => outlineOverride || "div", [outlineOverride]);
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
     LayerTree,
     {
       selectedId,
@@ -12823,7 +13144,7 @@ init_default_viewports();
 
 // lib/use-loaded-overrides.ts
 init_react_import();
-var import_react85 = require("react");
+var import_react86 = require("react");
 
 // lib/load-overrides.ts
 init_react_import();
@@ -12866,7 +13187,7 @@ var useLoadedOverrides = ({
   overrides,
   plugins
 }) => {
-  return (0, import_react85.useMemo)(() => {
+  return (0, import_react86.useMemo)(() => {
     return loadOverrides({ overrides, plugins });
   }, [plugins, overrides]);
 };
@@ -12877,7 +13198,7 @@ init_permissions();
 
 // lib/use-credbuild.ts
 init_react_import();
-var import_react86 = require("react");
+var import_react87 = require("react");
 var import_zustand6 = require("zustand");
 init_make_state_public();
 init_get_item();
@@ -12981,7 +13302,7 @@ var generateUseCredBuild = (store, getState) => {
   };
   return storeData;
 };
-var UseCredBuildStoreContext = (0, import_react86.createContext)(
+var UseCredBuildStoreContext = (0, import_react87.createContext)(
   null
 );
 var convertToPickedStore = (store) => {
@@ -12995,7 +13316,7 @@ var convertToPickedStore = (store) => {
   };
 };
 var useRegisterUseCredBuildStore = (appStore) => {
-  const [useCredBuildStore] = (0, import_react86.useState)(
+  const [useCredBuildStore] = (0, import_react87.useState)(
     () => (0, import_zustand6.createStore)(
       () => generateUseCredBuild(
         convertToPickedStore(appStore.getState()),
@@ -13003,7 +13324,7 @@ var useRegisterUseCredBuildStore = (appStore) => {
       )
     )
   );
-  (0, import_react86.useEffect)(() => {
+  (0, import_react87.useEffect)(() => {
     return appStore.subscribe(
       (store) => convertToPickedStore(store),
       (pickedStore) => {
@@ -13017,7 +13338,7 @@ var useRegisterUseCredBuildStore = (appStore) => {
 };
 function createUseCredBuild() {
   return function useCredBuild2(selector) {
-    const useCredBuildApi = (0, import_react86.useContext)(UseCredBuildStoreContext);
+    const useCredBuildApi = (0, import_react87.useContext)(UseCredBuildStoreContext);
     if (!useCredBuildApi) {
       throw new Error("useCredBuild must be used inside <CredBuild>.");
     }
@@ -13029,7 +13350,7 @@ function createUseCredBuild() {
   };
 }
 function useCredBuild() {
-  (0, import_react86.useEffect)(() => {
+  (0, import_react87.useEffect)(() => {
     console.warn(
       "You're using the `useCredBuild` method without a selector, which may cause unnecessary re-renders. Replace with `createUseCredBuild` and provide a selector for improved performance."
     );
@@ -13037,7 +13358,7 @@ function useCredBuild() {
   return createUseCredBuild()((s) => s);
 }
 function useGetCredBuild() {
-  const useCredBuildApi = (0, import_react86.useContext)(UseCredBuildStoreContext);
+  const useCredBuildApi = (0, import_react87.useContext)(UseCredBuildStoreContext);
   if (!useCredBuildApi) {
     throw new Error("useCredBuildGet must be used inside <CredBuild>.");
   }
@@ -13052,18 +13373,18 @@ init_to_component();
 
 // components/CredBuild/components/Layout/index.tsx
 init_react_import();
-var import_react100 = require("react");
+var import_react102 = require("react");
 init_lib();
 
 // components/CredBuild/context.tsx
 init_react_import();
-var import_react87 = require("react");
-var import_jsx_runtime82 = require("react/jsx-runtime");
-var propsContext = (0, import_react87.createContext)({});
+var import_react88 = require("react");
+var import_jsx_runtime83 = require("react/jsx-runtime");
+var propsContext = (0, import_react88.createContext)({});
 function PropsProvider(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(propsContext.Provider, { value: props, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(propsContext.Provider, { value: props, children: props.children });
 }
-var usePropsContext = () => (0, import_react87.useContext)(propsContext);
+var usePropsContext = () => (0, import_react88.useContext)(propsContext);
 
 // css-module:/home/runner/work/credbuild/credbuild/components/CredBuild/components/Layout/styles.module.css#css-module
 init_react_import();
@@ -13071,14 +13392,14 @@ var styles_module_default23 = { "CredBuildLayout": "_CredBuildLayout_14aaz_1", "
 
 // lib/use-inject-css.ts
 init_react_import();
-var import_react88 = require("react");
+var import_react89 = require("react");
 var styles = ``;
 var useInjectStyleSheet = (initialStyles, iframeEnabled) => {
-  const [el, setEl] = (0, import_react88.useState)();
-  (0, import_react88.useEffect)(() => {
+  const [el, setEl] = (0, import_react89.useState)();
+  (0, import_react89.useEffect)(() => {
     setEl(document.createElement("style"));
   }, []);
-  (0, import_react88.useEffect)(() => {
+  (0, import_react89.useEffect)(() => {
     if (!el || typeof window === "undefined") {
       return;
     }
@@ -13100,20 +13421,20 @@ init_store2();
 
 // components/DefaultOverride/index.tsx
 init_react_import();
-var import_jsx_runtime83 = require("react/jsx-runtime");
-var DefaultOverride = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_jsx_runtime83.Fragment, { children });
+var import_jsx_runtime84 = require("react/jsx-runtime");
+var DefaultOverride = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_jsx_runtime84.Fragment, { children });
 
 // components/CredBuild/components/Layout/index.tsx
 init_use_hotkey();
 
 // lib/use-preview-mode-hotkeys.ts
 init_react_import();
-var import_react89 = require("react");
+var import_react90 = require("react");
 init_use_hotkey();
 init_store2();
 var usePreviewModeHotkeys = () => {
   const appStore = useAppStoreApi();
-  const toggleInteractive = (0, import_react89.useCallback)(() => {
+  const toggleInteractive = (0, import_react90.useCallback)(() => {
     const dispatch = appStore.getState().dispatch;
     dispatch({
       type: "setUi",
@@ -13128,9 +13449,9 @@ var usePreviewModeHotkeys = () => {
 
 // components/DragDropContext/index.tsx
 init_react_import();
-var import_react90 = require("@dnd-kit/react");
+var import_react91 = require("@dnd-kit/react");
 init_store2();
-var import_react91 = require("react");
+var import_react92 = require("react");
 var import_dom = require("@dnd-kit/dom");
 init_get_item();
 
@@ -13473,12 +13794,12 @@ function getDeepDir(el) {
 // components/DragDropContext/index.tsx
 init_use_sensors();
 var import_state = require("@dnd-kit/state");
-var import_jsx_runtime84 = require("react/jsx-runtime");
+var import_jsx_runtime85 = require("react/jsx-runtime");
 var DEBUG3 = false;
 var AREA_CHANGE_DEBOUNCE_MS = 100;
 var useTempDisableFallback = (timeout3) => {
-  const lastFallbackDisable = (0, import_react91.useRef)(null);
-  return (0, import_react91.useCallback)((manager) => {
+  const lastFallbackDisable = (0, import_react92.useRef)(null);
+  return (0, import_react92.useCallback)((manager) => {
     collisionStore.setState({ fallbackEnabled: false });
     const fallbackId = generateId();
     lastFallbackDisable.current = fallbackId;
@@ -13497,9 +13818,9 @@ var DragDropContextClient = ({
   const dispatch = useAppStore((s) => s.dispatch);
   const instanceId = useAppStore((s) => s.instanceId);
   const appStore = useAppStoreApi();
-  const debouncedParamsRef = (0, import_react91.useRef)(null);
+  const debouncedParamsRef = (0, import_react92.useRef)(null);
   const tempDisableFallback = useTempDisableFallback(100);
-  const [zoneStore] = (0, import_react91.useState)(() => {
+  const [zoneStore] = (0, import_react92.useState)(() => {
     const rootVirtualizers = /* @__PURE__ */ new Map();
     return (0, import_zustand7.createStore)(() => ({
       zoneDepthIndex: {},
@@ -13538,7 +13859,7 @@ var DragDropContextClient = ({
       }
     }));
   });
-  const getChanged2 = (0, import_react91.useCallback)(
+  const getChanged2 = (0, import_react92.useCallback)(
     (params) => {
       const { zoneDepthIndex = {}, areaDepthIndex = {} } = zoneStore.getState() || {};
       const stateHasZone = Object.keys(zoneDepthIndex).length > 0;
@@ -13559,7 +13880,7 @@ var DragDropContextClient = ({
     },
     [zoneStore]
   );
-  const setDeepestAndCollide = (0, import_react91.useCallback)(
+  const setDeepestAndCollide = (0, import_react92.useCallback)(
     (params, manager) => {
       const { zoneChanged, areaChanged } = getChanged2(params);
       if (!zoneChanged && !areaChanged) return;
@@ -13583,7 +13904,7 @@ var DragDropContextClient = ({
     setDeepestDb.cancel();
     debouncedParamsRef.current = null;
   };
-  (0, import_react91.useEffect)(() => {
+  (0, import_react92.useEffect)(() => {
     if (DEBUG3) {
       return zoneStore.subscribe(
         (s) => console.log(
@@ -13594,7 +13915,7 @@ var DragDropContextClient = ({
       );
     }
   }, [zoneStore]);
-  const [plugins] = (0, import_react91.useState)(() => [
+  const [plugins] = (0, import_react92.useState)(() => [
     ...disableAutoScroll ? import_dom.defaultPreset.plugins.filter((plugin) => plugin !== import_dom.AutoScroller) : import_dom.defaultPreset.plugins,
     createNestedDroppablePlugin(
       {
@@ -13642,10 +13963,10 @@ var DragDropContextClient = ({
     )
   ]);
   const sensors = useSensors();
-  const [dragListeners, setDragListeners] = (0, import_react91.useState)({});
-  const dragMode = (0, import_react91.useRef)(null);
-  const initialSelector = (0, import_react91.useRef)(void 0);
-  const nextContextValue = (0, import_react91.useMemo)(
+  const [dragListeners, setDragListeners] = (0, import_react92.useState)({});
+  const dragMode = (0, import_react92.useRef)(null);
+  const initialSelector = (0, import_react92.useRef)(void 0);
+  const nextContextValue = (0, import_react92.useMemo)(
     () => ({
       mode: "edit",
       areaId: "root",
@@ -13653,15 +13974,15 @@ var DragDropContextClient = ({
     }),
     []
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
     dragListenerContext.Provider,
     {
       value: {
         dragListeners,
         setDragListeners
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-        import_react90.DragDropProvider,
+      children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+        import_react91.DragDropProvider,
         {
           plugins,
           sensors,
@@ -13882,7 +14203,7 @@ var DragDropContextClient = ({
             const entryEl = getFrame()?.querySelector("[data-credbuild-entry]");
             entryEl?.setAttribute("data-credbuild-dragging", "true");
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(ZoneStoreProvider, { store: zoneStore, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(DropZoneProvider, { value: nextContextValue, children }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ZoneStoreProvider, { store: zoneStore, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(DropZoneProvider, { value: nextContextValue, children }) })
         }
       )
     }
@@ -13896,12 +14217,12 @@ var DragDropContext = ({
   if (status === "LOADING") {
     return children;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(DragDropContextClient, { disableAutoScroll, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(DragDropContextClient, { disableAutoScroll, children });
 };
 
 // components/CredBuild/components/Header/index.tsx
 init_react_import();
-var import_react94 = require("react");
+var import_react95 = require("react");
 init_store2();
 init_lucide_react();
 init_Heading();
@@ -13919,7 +14240,7 @@ var styles_module_default24 = { "MenuBar": "_MenuBar_1m2ld_1", "MenuBar--menuOpe
 
 // components/MenuBar/index.tsx
 init_store2();
-var import_jsx_runtime85 = require("react/jsx-runtime");
+var import_jsx_runtime86 = require("react/jsx-runtime");
 var getClassName32 = get_class_name_factory_default("MenuBar", styles_module_default24);
 function MenuBar({
   menuOpen = false,
@@ -13930,7 +14251,7 @@ function MenuBar({
   const forward = useAppStore((s) => s.history.forward);
   const hasFuture = useAppStore((s) => s.history.hasFuture());
   const hasPast = useAppStore((s) => s.history.hasPast());
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
     "div",
     {
       className: getClassName32({ menuOpen }),
@@ -13943,30 +14264,30 @@ function MenuBar({
           setMenuOpen(false);
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: getClassName32("inner"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: getClassName32("history"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: getClassName32("inner"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: getClassName32("history"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
             IconButton,
             {
               type: "button",
               title: "undo",
               disabled: !hasPast,
               onClick: back,
-              children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Undo2, { size: 21 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Undo2, { size: 21 })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
             IconButton,
             {
               type: "button",
               title: "redo",
               disabled: !hasFuture,
               onClick: forward,
-              children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Redo2, { size: 21 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Redo2, { size: 21 })
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_jsx_runtime85.Fragment, { children: renderHeaderActions && renderHeaderActions() })
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_jsx_runtime86.Fragment, { children: renderHeaderActions && renderHeaderActions() })
       ] })
     }
   );
@@ -13981,7 +14302,7 @@ init_react_import();
 init_lucide_react();
 init_IconButton2();
 init_store2();
-var import_react92 = require("react");
+var import_react93 = require("react");
 init_lib();
 
 // css-module:/home/runner/work/credbuild/credbuild/components/ViewportControls/styles.module.css#css-module
@@ -13989,12 +14310,12 @@ init_react_import();
 var styles_module_default25 = { "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
-var import_jsx_runtime86 = require("react/jsx-runtime");
+var import_jsx_runtime87 = require("react/jsx-runtime");
 var icons = {
-  Smartphone: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Smartphone, { size: 16 }),
-  Tablet: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Tablet, { size: 16 }),
-  Monitor: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Monitor, { size: 16 }),
-  FullWidth: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Expand, { size: 16 })
+  Smartphone: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Smartphone, { size: 16 }),
+  Tablet: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Tablet, { size: 16 }),
+  Monitor: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Monitor, { size: 16 }),
+  FullWidth: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Expand, { size: 16 })
 };
 var getClassName33 = get_class_name_factory_default("ViewportControls", styles_module_default25);
 var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default25);
@@ -14005,7 +14326,7 @@ var ActionButton = ({
   isActive,
   disabled
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: getClassNameButton({ isActive }), suppressHydrationWarning: true, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: getClassNameButton({ isActive }), suppressHydrationWarning: true, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
     IconButton,
     {
       type: "button",
@@ -14013,7 +14334,7 @@ var ActionButton = ({
       disabled: disabled || isActive,
       onClick,
       suppressHydrationWarning: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: getClassNameButton("inner"), children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: getClassNameButton("inner"), children })
     }
   ) });
 };
@@ -14038,7 +14359,7 @@ var ViewportControls = ({
   const defaultsContainAutoZoom = defaultZoomOptions.find(
     (option) => option.value === autoZoom
   );
-  const zoomOptions = (0, import_react92.useMemo)(() => {
+  const zoomOptions = (0, import_react93.useMemo)(() => {
     const options = [
       ...defaultZoomOptions,
       ...defaultsContainAutoZoom || isNaN(autoZoom) ? [] : [
@@ -14050,21 +14371,21 @@ 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] = (0, import_react92.useState)(
+  const [activeViewport, setActiveViewport] = (0, import_react93.useState)(
     uiViewports.current.width
   );
-  (0, import_react92.useEffect)(() => {
+  (0, import_react93.useEffect)(() => {
     setActiveViewport(uiViewports.current.width);
   }, [uiViewports.current.width, uiViewports]);
-  const [isExpanded, setIsExpanded] = (0, import_react92.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+  const [isExpanded, setIsExpanded] = (0, import_react93.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
     "div",
     {
       className: getClassName33({ isExpanded, fullScreen }),
       suppressHydrationWarning: true,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: getClassName33("actions"), children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: getClassName33("actionsInner"), children: [
-          viewports.map((viewport, i) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: getClassName33("actions"), children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: getClassName33("actionsInner"), children: [
+          viewports.map((viewport, i) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
             ActionButton,
             {
               title: viewport.label ? `Switch to ${viewport.label} viewport` : "Switch viewport",
@@ -14077,8 +14398,8 @@ var ViewportControls = ({
             },
             i
           )),
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: getClassName33("divider") }),
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: getClassName33("divider") }),
+          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
             ActionButton,
             {
               title: "Zoom viewport out",
@@ -14092,10 +14413,10 @@ var ViewportControls = ({
                 );
                 onZoom(zoomOptions[nextIndex]?.value || 1);
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ZoomOut, { size: 16 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(ZoomOut, { size: 16 })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
             ActionButton,
             {
               title: "Zoom viewport in",
@@ -14109,12 +14430,12 @@ var ViewportControls = ({
                 );
                 onZoom(zoomOptions[nextIndex]?.value || 1);
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ZoomIn, { size: 16 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(ZoomIn, { size: 16 })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: getClassName33("zoom"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: getClassName33("divider") }),
-            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: getClassName33("zoom"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: getClassName33("divider") }),
+            /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
               "select",
               {
                 className: getClassName33("zoomSelect"),
@@ -14125,7 +14446,7 @@ var ViewportControls = ({
                 onChange: (e) => {
                   onZoom(parseFloat(e.currentTarget.value));
                 },
-                children: zoomOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+                children: zoomOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
                   "option",
                   {
                     value: option.value,
@@ -14137,14 +14458,14 @@ var ViewportControls = ({
             )
           ] })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
           "button",
           {
             className: getClassName33("toggleButton"),
             title: "Toggle viewport menu",
             "aria-expanded": isExpanded,
             onClick: () => setIsExpanded((s) => !s),
-            children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(X, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Monitor, { size: 16 })
+            children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(X, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Monitor, { size: 16 })
           }
         )
       ]
@@ -14157,23 +14478,23 @@ var import_shallow9 = require("zustand/react/shallow");
 
 // lib/frame-context.tsx
 init_react_import();
-var import_react93 = require("react");
-var import_jsx_runtime87 = require("react/jsx-runtime");
-var FrameContext = (0, import_react93.createContext)(null);
+var import_react94 = require("react");
+var import_jsx_runtime88 = require("react/jsx-runtime");
+var FrameContext = (0, import_react94.createContext)(null);
 var FrameProvider = ({
   children
 }) => {
-  const frameRef = (0, import_react93.useRef)(null);
-  const value = (0, import_react93.useMemo)(
+  const frameRef = (0, import_react94.useRef)(null);
+  const value = (0, import_react94.useMemo)(
     () => ({
       frameRef
     }),
     []
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(FrameContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(FrameContext.Provider, { value, children });
 };
 var useCanvasFrame = () => {
-  const context = (0, import_react93.useContext)(FrameContext);
+  const context = (0, import_react94.useContext)(FrameContext);
   if (context === null) {
     throw new Error("useCanvasFrame must be used within a FrameProvider");
   }
@@ -14185,7 +14506,7 @@ init_react_import();
 var styles_module_default26 = { "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
-var import_jsx_runtime88 = require("react/jsx-runtime");
+var import_jsx_runtime89 = require("react/jsx-runtime");
 var getClassName34 = get_class_name_factory_default("CredBuildHeader", styles_module_default26);
 var HeaderInner = ({
   hidePlugins,
@@ -14201,7 +14522,7 @@ var HeaderInner = ({
   } = usePropsContext();
   const dispatch = useAppStore((s) => s.dispatch);
   const appStore = useAppStoreApi();
-  const defaultHeaderRender = (0, import_react94.useMemo)(() => {
+  const defaultHeaderRender = (0, import_react95.useMemo)(() => {
     if (renderHeader) {
       console.warn(
         "`renderHeader` is deprecated. Please use `overrides.header` and the `useCredBuild` hook instead"
@@ -14209,13 +14530,13 @@ var HeaderInner = ({
       const RenderHeader = ({ actions, ...props }) => {
         const Comp = renderHeader;
         const appState = useAppStore((s) => s.state);
-        return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Comp, { ...props, dispatch, state: appState, children: actions });
+        return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Comp, { ...props, dispatch, state: appState, children: actions });
       };
       return RenderHeader;
     }
     return DefaultOverride;
   }, [renderHeader, dispatch]);
-  const defaultHeaderActionsRender = (0, import_react94.useMemo)(() => {
+  const defaultHeaderActionsRender = (0, import_react95.useMemo)(() => {
     if (renderHeaderActions) {
       console.warn(
         "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `useCredBuild` hook instead."
@@ -14223,7 +14544,7 @@ var HeaderInner = ({
       const RenderHeader = (props) => {
         const Comp = renderHeaderActions;
         const appState = useAppStore((s) => s.state);
-        return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Comp, { ...props, dispatch, state: appState });
+        return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Comp, { ...props, dispatch, state: appState });
       };
       return RenderHeader;
     }
@@ -14235,11 +14556,48 @@ var HeaderInner = ({
   const CustomHeaderActions = useAppStore(
     (s) => s.overrides.headerActions || defaultHeaderActionsRender
   );
-  const [menuOpen, setMenuOpen] = (0, import_react94.useState)(false);
+  const [menuOpen, setMenuOpen] = (0, import_react95.useState)(false);
   const rootTitle = useAppStore((s) => {
     const rootData = s.state.indexes.nodes["root"]?.data;
     return rootData.props.title ?? "";
   });
+  const root = useAppStore((s) => s.state.data.root);
+  const rootProps = root?.props || root;
+  const isHtmlMode = rootProps?.mode === "html";
+  const htmlViewMode = rootProps?.htmlViewMode || (rootProps?.htmlCode ? "preview" : "code");
+  const handleSetViewMode = (0, import_react95.useCallback)((modeVal) => {
+    dispatch({
+      type: "setData",
+      data: (currentData) => ({
+        ...currentData,
+        root: {
+          ...currentData.root,
+          props: {
+            ...currentData.root?.props,
+            htmlViewMode: modeVal
+          }
+        }
+      })
+    });
+  }, [dispatch]);
+  const handleResetToBlocks = (0, import_react95.useCallback)(() => {
+    dispatch({
+      type: "setData",
+      data: (currentData) => ({
+        ...currentData,
+        content: [],
+        root: {
+          ...currentData.root,
+          props: {
+            ...currentData.root?.props,
+            mode: "blocks",
+            htmlCode: "",
+            htmlViewMode: "code"
+          }
+        }
+      })
+    });
+  }, [dispatch]);
   const leftSideBarVisible = useAppStore((s) => s.state.ui.leftSideBarVisible);
   const rightSideBarVisible = useAppStore(
     (s) => s.state.ui.rightSideBarVisible
@@ -14264,7 +14622,7 @@ var HeaderInner = ({
   );
   const { frameRef } = useCanvasFrame();
   const resetAutoZoom = useResetAutoZoom(frameRef);
-  const toggleSidebars = (0, import_react94.useCallback)(
+  const toggleSidebars = (0, import_react95.useCallback)(
     (sidebar) => {
       const widerViewport = window.matchMedia("(min-width: 638px)").matches;
       const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
@@ -14279,33 +14637,33 @@ var HeaderInner = ({
     },
     [dispatch, leftSideBarVisible, rightSideBarVisible]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
     CustomHeader,
     {
-      actions: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_jsx_runtime88.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(CustomHeaderActions, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+      actions: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_jsx_runtime89.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(CustomHeaderActions, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
           Button,
           {
             href: headerPath || "/",
             newTab: true,
             variant: "secondary",
-            icon: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(ExternalLink, { size: 14 }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(ExternalLink, { size: 14 }),
             children: "View Web"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "PublishButton", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { className: "PublishButton", children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
           Button,
           {
             onClick: () => {
               const data = appStore.getState().state.data;
               onPublish && onPublish(data);
             },
-            icon: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Zap, { size: 14, fill: "currentColor" }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Zap, { size: 14, fill: "currentColor" }),
             children: "Publish"
           }
         ) })
       ] }) }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
         "header",
         {
           className: getClassName34({
@@ -14313,20 +14671,20 @@ var HeaderInner = ({
             rightSideBarVisible,
             hidePlugins
           }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: getClassName34("inner"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: getClassName34("leftActions"), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { style: { marginRight: "8px", display: "flex", gap: "8px", alignItems: "center" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: getClassName34("inner"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: getClassName34("leftActions"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { style: { marginRight: "8px", display: "flex", gap: "8px", alignItems: "center" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
                   Button,
                   {
                     href: "/dashboard",
                     variant: "secondary",
                     size: "medium",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(LayoutDashboard, { size: 14 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(LayoutDashboard, { size: 14 }),
                     children: "Dashboard"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
                   IconButton,
                   {
                     type: "button",
@@ -14344,12 +14702,12 @@ var HeaderInner = ({
                       window.dispatchEvent(new CustomEvent("credbuild-theme-change", { detail: newTheme }));
                     },
                     title: "Toggle Theme",
-                    children: theme === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Sun, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Moon, { size: 16 })
+                    children: theme === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Sun, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Moon, { size: 16 })
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: getClassName34("toggle"), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: getClassName34("leftSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: getClassName34("toggle"), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: getClassName34("leftSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
                   IconButton,
                   {
                     type: "button",
@@ -14357,10 +14715,10 @@ var HeaderInner = ({
                       toggleSidebars("left");
                     },
                     title: "Toggle left sidebar",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(PanelLeft, { size: 16, focusable: "false" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(PanelLeft, { size: 16, focusable: "false" })
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: getClassName34("rightSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: getClassName34("rightSideBarToggle"), children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
                   IconButton,
                   {
                     type: "button",
@@ -14368,43 +14726,124 @@ var HeaderInner = ({
                       toggleSidebars("right");
                     },
                     title: "Toggle right sidebar",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(PanelRight, { size: 16, focusable: "false" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(PanelRight, { size: 16, focusable: "false" })
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: getClassName34("title"), children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(Heading7, { rank: "2", size: "xs", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { style: { fontSize: "11px", textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 600 }, children: headerTitle || rootTitle || "Page" }),
-                headerPath && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_jsx_runtime88.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("code", { className: getClassName34("path"), style: { fontSize: "10px", opacity: 0.6, marginLeft: "8px" }, children: headerPath }) })
+              /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: getClassName34("title"), children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(Heading7, { rank: "2", size: "xs", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { style: { fontSize: "11px", textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 600 }, children: headerTitle || rootTitle || "Page" }),
+                headerPath && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_jsx_runtime89.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("code", { className: getClassName34("path"), style: { fontSize: "10px", opacity: 0.6, marginLeft: "8px" }, children: headerPath }) })
               ] }) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: getClassName34("viewportTools"), children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
-              ViewportControls,
-              {
-                fullScreen: _experimentalFullScreenCanvas,
-                autoZoom: zoomConfig.autoZoom,
-                zoom: zoomConfig.zoom,
-                onViewportChange: (viewport) => {
-                  const isFullWidth = viewport.width === "100%";
-                  const uiViewport = {
-                    ...viewport,
-                    height: viewport.height || "auto",
-                    zoom: isFullWidth ? 1 : zoomConfig.zoom
-                  };
-                  const newUi = {
-                    viewports: { ...viewports, current: uiViewport }
-                  };
-                  if (isFullWidth) {
-                    setZoomConfig({ ...zoomConfig, zoom: 1 });
+            /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: getClassName34("viewportTools"), style: { display: "flex", gap: "16px", alignItems: "center" }, children: [
+              isHtmlMode && /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "8px"
+              }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { style: {
+                  display: "flex",
+                  background: "var(--credbuild-color-grey-09)",
+                  padding: 2,
+                  borderRadius: 6,
+                  border: "1px solid var(--credbuild-color-grey-10)"
+                }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => handleSetViewMode("code"),
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 4,
+                        padding: "4px 10px",
+                        borderRadius: 4,
+                        fontSize: 11,
+                        fontWeight: 600,
+                        cursor: "pointer",
+                        border: "none",
+                        background: htmlViewMode === "code" ? "var(--credbuild-color-white)" : "transparent",
+                        color: "var(--credbuild-color-black)",
+                        opacity: htmlViewMode === "code" ? 1 : 0.6,
+                        boxShadow: htmlViewMode === "code" ? "0 1px 2px rgba(0,0,0,0.1)" : "none",
+                        transition: "all 0.15s ease"
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Code, { size: 12 }),
+                        "Edit Kode"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => handleSetViewMode("preview"),
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 4,
+                        padding: "4px 10px",
+                        borderRadius: 4,
+                        fontSize: 11,
+                        fontWeight: 600,
+                        cursor: "pointer",
+                        border: "none",
+                        background: htmlViewMode === "preview" ? "var(--credbuild-color-white)" : "transparent",
+                        color: "var(--credbuild-color-black)",
+                        opacity: htmlViewMode === "preview" ? 1 : 0.6,
+                        boxShadow: htmlViewMode === "preview" ? "0 1px 2px rgba(0,0,0,0.1)" : "none",
+                        transition: "all 0.15s ease"
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Eye, { size: 12 }),
+                        "Lihat Hasil"
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+                  Button,
+                  {
+                    type: "button",
+                    onClick: handleResetToBlocks,
+                    variant: "secondary",
+                    size: "medium",
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(LayoutGrid, { size: 14 }),
+                    children: "Kembali ke Mode Blok"
+                  }
+                )
+              ] }),
+              (!isHtmlMode || htmlViewMode === "preview") && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+                ViewportControls,
+                {
+                  fullScreen: _experimentalFullScreenCanvas,
+                  autoZoom: zoomConfig.autoZoom,
+                  zoom: zoomConfig.zoom,
+                  onViewportChange: (viewport) => {
+                    const isFullWidth = viewport.width === "100%";
+                    const uiViewport = {
+                      ...viewport,
+                      height: viewport.height || "auto",
+                      zoom: isFullWidth ? 1 : zoomConfig.zoom
+                    };
+                    const newUi = {
+                      viewports: { ...viewports, current: uiViewport }
+                    };
+                    if (isFullWidth) {
+                      setZoomConfig({ ...zoomConfig, zoom: 1 });
+                    }
+                    setUi(newUi);
+                  },
+                  onZoom: (zoom) => {
+                    setZoomConfig({ ...zoomConfig, zoom });
                   }
-                  setUi(newUi);
-                },
-                onZoom: (zoom) => {
-                  setZoomConfig({ ...zoomConfig, zoom });
                 }
-              }
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: getClassName34("tools"), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: getClassName34("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: getClassName34("tools"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: getClassName34("menuButton"), children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
                 IconButton,
                 {
                   type: "button",
@@ -14412,34 +14851,34 @@ var HeaderInner = ({
                     return setMenuOpen(!menuOpen);
                   },
                   title: "Toggle menu bar",
-                  children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(ChevronUp, { size: 16, focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(ChevronDown, { size: 16, focusable: "false" })
+                  children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(ChevronUp, { size: 16, focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(ChevronDown, { size: 16, focusable: "false" })
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
                 MenuBar,
                 {
                   dispatch,
                   onPublish,
                   menuOpen,
-                  renderHeaderActions: () => /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(CustomHeaderActions, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+                  renderHeaderActions: () => /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(CustomHeaderActions, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
                       Button,
                       {
                         href: headerPath || "/",
                         newTab: true,
                         variant: "secondary",
-                        icon: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(ExternalLink, { size: 14 }),
+                        icon: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(ExternalLink, { size: 14 }),
                         children: "View Web"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "PublishButton", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { className: "PublishButton", children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
                       Button,
                       {
                         onClick: () => {
                           const data = appStore.getState().state.data;
                           onPublish && onPublish(data);
                         },
-                        icon: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Zap, { size: 14, fill: "currentColor" }),
+                        icon: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Zap, { size: 14, fill: "currentColor" }),
                         children: "Publish"
                       }
                     ) })
@@ -14454,7 +14893,7 @@ var HeaderInner = ({
     }
   );
 };
-var Header = (0, import_react94.memo)(HeaderInner);
+var Header = (0, import_react95.memo)(HeaderInner);
 
 // components/SidebarSection/index.tsx
 init_react_import();
@@ -14481,14 +14920,14 @@ init_lucide_react();
 
 // lib/use-breadcrumbs.ts
 init_react_import();
-var import_react95 = require("react");
+var import_react96 = require("react");
 init_store2();
 var useBreadcrumbs = (renderCount) => {
   const selectedId = useAppStore((s) => s.selectedItem?.props.id);
   const config = useAppStore((s) => s.config);
   const path = useAppStore((s) => s.state.indexes.nodes[selectedId]?.path);
   const appStore = useAppStoreApi();
-  return (0, import_react95.useMemo)(() => {
+  return (0, import_react96.useMemo)(() => {
     const breadcrumbs = path?.map((zoneCompound) => {
       const [componentId] = zoneCompound.split(":");
       if (componentId === "root") {
@@ -14519,7 +14958,7 @@ var useBreadcrumbs = (renderCount) => {
 
 // components/Breadcrumbs/index.tsx
 init_store2();
-var import_jsx_runtime89 = require("react/jsx-runtime");
+var import_jsx_runtime90 = require("react/jsx-runtime");
 var getClassName35 = get_class_name_factory_default("Breadcrumbs", styles_module_default28);
 var Breadcrumbs = ({
   children,
@@ -14527,9 +14966,9 @@ var Breadcrumbs = ({
 }) => {
   const setUi = useAppStore((s) => s.setUi);
   const breadcrumbs = useBreadcrumbs(numParents);
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: getClassName35(), children: [
-    breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: getClassName35("breadcrumb"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: getClassName35(), children: [
+    breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: getClassName35("breadcrumb"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
         "button",
         {
           type: "button",
@@ -14538,14 +14977,14 @@ var Breadcrumbs = ({
           children: breadcrumb.label
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(ChevronRight, { size: 16 })
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(ChevronRight, { size: 16 })
     ] }, i)),
     children
   ] });
 };
 
 // components/SidebarSection/index.tsx
-var import_jsx_runtime90 = require("react/jsx-runtime");
+var import_jsx_runtime91 = require("react/jsx-runtime");
 var getClassName36 = get_class_name_factory_default("SidebarSection", styles_module_default27);
 var SidebarSection = ({
   children,
@@ -14555,20 +14994,20 @@ var SidebarSection = ({
   noBorderTop,
   isLoading
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: getClassName36({ noBorderTop }), style: { background }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: getClassName36("title"), children: /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: getClassName36("breadcrumbs"), children: [
-      showBreadcrumbs && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Breadcrumbs, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: getClassName36("heading"), children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Heading7, { rank: "2", size: "xs", children: title }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: getClassName36({ noBorderTop }), style: { background }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: getClassName36("title"), children: /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: getClassName36("breadcrumbs"), children: [
+      showBreadcrumbs && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Breadcrumbs, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: getClassName36("heading"), children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Heading7, { rank: "2", size: "xs", children: title }) })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: getClassName36("content"), children }),
-    isLoading && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: getClassName36("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Loader, { size: 32 }) })
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: getClassName36("content"), children }),
+    isLoading && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: getClassName36("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Loader, { size: 32 }) })
   ] });
 };
 
 // components/CredBuild/components/Canvas/index.tsx
 init_react_import();
 init_css_box_model_esm();
-var import_react96 = require("react");
+var import_react97 = require("react");
 init_store2();
 
 // css-module:/home/runner/work/credbuild/credbuild/components/CredBuild/components/Canvas/styles.module.css#css-module
@@ -14580,7 +15019,7 @@ init_lib();
 init_Loader();
 var import_shallow10 = require("zustand/react/shallow");
 init_default_viewports();
-var import_jsx_runtime91 = require("react/jsx-runtime");
+var import_jsx_runtime92 = require("react/jsx-runtime");
 var getClassName37 = get_class_name_factory_default("CredBuildCanvas", styles_module_default29);
 var ZOOM_ON_CHANGE = true;
 var TRANSITION_DURATION = 150;
@@ -14614,27 +15053,31 @@ var Canvas = () => {
     rightSideBarVisible,
     leftSideBarWidth,
     rightSideBarWidth,
-    viewports
+    viewports,
+    root
   } = useAppStore(
     (0, import_shallow10.useShallow)((s) => ({
       leftSideBarVisible: s.state.ui.leftSideBarVisible,
       rightSideBarVisible: s.state.ui.rightSideBarVisible,
       leftSideBarWidth: s.state.ui.leftSideBarWidth,
       rightSideBarWidth: s.state.ui.rightSideBarWidth,
-      viewports: s.state.ui.viewports
+      viewports: s.state.ui.viewports,
+      root: s.state.data.root
     }))
   );
-  const [showTransition, setShowTransition] = (0, import_react96.useState)(false);
-  const isResizingRef = (0, import_react96.useRef)(false);
-  const defaultRender = (0, import_react96.useMemo)(() => {
-    const CredBuildDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_jsx_runtime91.Fragment, { children });
+  const isNonFullWidth = viewports.current.width !== "100%";
+  const shouldApplyViewport = true;
+  const [showTransition, setShowTransition] = (0, import_react97.useState)(false);
+  const isResizingRef = (0, import_react97.useRef)(false);
+  const defaultRender = (0, import_react97.useMemo)(() => {
+    const CredBuildDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_jsx_runtime92.Fragment, { children });
     return CredBuildDefault;
   }, []);
-  const CustomPreview = (0, import_react96.useMemo)(
+  const CustomPreview = (0, import_react97.useMemo)(
     () => overrides.preview || defaultRender,
     [overrides, defaultRender]
   );
-  const getFrameDimensions = (0, import_react96.useCallback)(() => {
+  const getFrameDimensions = (0, import_react97.useCallback)(() => {
     if (frameRef.current) {
       const frame = frameRef.current;
       const box = getBox(frame);
@@ -14642,7 +15085,7 @@ var Canvas = () => {
     }
     return { width: 0, height: 0 };
   }, [frameRef]);
-  (0, import_react96.useEffect)(() => {
+  (0, import_react97.useEffect)(() => {
     resetAutoZoom();
   }, [
     frameRef,
@@ -14652,9 +15095,29 @@ var Canvas = () => {
     viewports,
     resetAutoZoom
   ]);
-  (0, import_react96.useEffect)(() => {
-    const { height: frameHeight } = getFrameDimensions();
-    if (viewports.current.height === "auto") {
+  (0, import_react97.useEffect)(() => {
+    const updateRootHeight = () => {
+      const iframeEl = frameRef.current?.querySelector("iframe");
+      if (iframeEl) {
+        try {
+          const doc = iframeEl.contentDocument;
+          if (doc && doc.body) {
+            const contentHeight = doc.body.scrollHeight || doc.documentElement.scrollHeight;
+            if (contentHeight > 0) {
+              const newRootHeight2 = contentHeight;
+              if (zoomConfig.rootHeight !== newRootHeight2) {
+                setZoomConfig({
+                  ...zoomConfig,
+                  rootHeight: newRootHeight2
+                });
+              }
+              return;
+            }
+          }
+        } catch (e) {
+        }
+      }
+      const { height: frameHeight } = getFrameDimensions();
       const newRootHeight = frameHeight / zoomConfig.zoom;
       if (zoomConfig.rootHeight !== newRootHeight) {
         setZoomConfig({
@@ -14662,20 +15125,36 @@ var Canvas = () => {
           rootHeight: newRootHeight
         });
       }
+    };
+    if (viewports.current.height === "auto") {
+      updateRootHeight();
+      const iframeEl = frameRef.current?.querySelector("iframe");
+      if (iframeEl) {
+        try {
+          const doc = iframeEl.contentDocument;
+          if (doc && doc.body) {
+            const observer = new ResizeObserver(updateRootHeight);
+            observer.observe(doc.body);
+            return () => observer.disconnect();
+          }
+        } catch (e) {
+        }
+      }
     }
   }, [
     zoomConfig.zoom,
     getFrameDimensions,
     setZoomConfig,
     viewports,
-    zoomConfig.rootHeight
+    zoomConfig.rootHeight,
+    frameRef
   ]);
-  (0, import_react96.useEffect)(() => {
+  (0, import_react97.useEffect)(() => {
     if (ZOOM_ON_CHANGE) {
       resetAutoZoom();
     }
   }, [viewports.current.width, viewports, resetAutoZoom]);
-  (0, import_react96.useEffect)(() => {
+  (0, import_react97.useEffect)(() => {
     if (!frameRef.current) return;
     const resizeObserver = new ResizeObserver(() => {
       if (!isResizingRef.current) {
@@ -14687,14 +15166,14 @@ var Canvas = () => {
       resizeObserver.disconnect();
     };
   }, [frameRef, resetAutoZoom]);
-  const [showLoader, setShowLoader] = (0, import_react96.useState)(false);
-  (0, import_react96.useEffect)(() => {
+  const [showLoader, setShowLoader] = (0, import_react97.useState)(false);
+  (0, import_react97.useEffect)(() => {
     setTimeout(() => {
       setShowLoader(true);
     }, 500);
   }, []);
   const appStoreApi = useAppStoreApi();
-  (0, import_react96.useEffect)(() => {
+  (0, import_react97.useEffect)(() => {
     if (typeof window === "undefined") return;
     if (uiProp?.viewports?.current) return;
     const viewportWidth = window.innerWidth;
@@ -14717,7 +15196,7 @@ var Canvas = () => {
     if (closestViewport.width < frameWidth && containsFullWidthViewport) {
       closestViewport = fullWidthViewport;
     }
-    if (iframe.enabled) {
+    {
       const s = appStoreApi.getState();
       const appState = {
         state: {
@@ -14748,7 +15227,7 @@ var Canvas = () => {
     uiProp?.viewports,
     frameRef
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
     "div",
     {
       className: getClassName37({
@@ -14766,18 +15245,18 @@ var Canvas = () => {
           });
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: getClassName37("inner"), ref: frameRef, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+      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: iframe.enabled ? viewports.current.width : "100%",
+              width: viewports.current.width || "100%",
               height: !zoomConfig.rootHeight || isNaN(zoomConfig.rootHeight) ? "100%" : zoomConfig.rootHeight,
               minHeight: "100%",
-              transform: iframe.enabled ? `scale(${zoomConfig.zoom})` : void 0,
+              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: iframe.enabled ? void 0 : "auto"
+              overflow: isNonFullWidth ? void 0 : "auto"
             },
             suppressHydrationWarning: true,
             id: "credbuild-canvas-root",
@@ -14785,10 +15264,10 @@ var Canvas = () => {
               setShowTransition(false);
               isResizingRef.current = false;
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Preview, {}) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Preview, {}) })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: getClassName37("loader"), children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Loader, { size: 24 }) })
+        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: getClassName37("loader"), children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Loader, { size: 24 }) })
       ] })
     }
   );
@@ -14796,15 +15275,15 @@ var Canvas = () => {
 
 // lib/use-sidebar-resize.ts
 init_react_import();
-var import_react97 = require("react");
+var import_react98 = require("react");
 init_store2();
 function useSidebarResize(position, dispatch) {
-  const [width, setWidth] = (0, import_react97.useState)(null);
-  const sidebarRef = (0, import_react97.useRef)(null);
+  const [width, setWidth] = (0, import_react98.useState)(null);
+  const sidebarRef = (0, import_react98.useRef)(null);
   const storeWidth = useAppStore(
     (s) => position === "left" ? s.state.ui.leftSideBarWidth : s.state.ui.rightSideBarWidth
   );
-  (0, import_react97.useEffect)(() => {
+  (0, import_react98.useEffect)(() => {
     if (typeof window !== "undefined" && !storeWidth) {
       try {
         const savedWidths = localStorage.getItem("credbuild-sidebar-widths");
@@ -14829,12 +15308,12 @@ function useSidebarResize(position, dispatch) {
       }
     }
   }, [dispatch, position, storeWidth]);
-  (0, import_react97.useEffect)(() => {
+  (0, import_react98.useEffect)(() => {
     if (storeWidth !== void 0) {
       setWidth(storeWidth);
     }
   }, [storeWidth]);
-  const handleResizeEnd = (0, import_react97.useCallback)(
+  const handleResizeEnd = (0, import_react98.useCallback)(
     (width2) => {
       dispatch({
         type: "setUi",
@@ -14882,7 +15361,7 @@ init_react_import();
 
 // components/CredBuild/components/ResizeHandle/index.tsx
 init_react_import();
-var import_react98 = require("react");
+var import_react99 = require("react");
 init_get_class_name_factory();
 
 // css-module:/home/runner/work/credbuild/credbuild/components/CredBuild/components/ResizeHandle/styles.module.css#css-module
@@ -14891,7 +15370,7 @@ var styles_module_default30 = { "ResizeHandle": "_ResizeHandle_144bf_2", "Resize
 
 // components/CredBuild/components/ResizeHandle/index.tsx
 init_lib();
-var import_jsx_runtime92 = require("react/jsx-runtime");
+var import_jsx_runtime93 = require("react/jsx-runtime");
 var getClassName38 = get_class_name_factory_default("ResizeHandle", styles_module_default30);
 var ResizeHandle = ({
   position,
@@ -14901,11 +15380,11 @@ var ResizeHandle = ({
 }) => {
   const { frameRef } = useCanvasFrame();
   const resetAutoZoom = useResetAutoZoom(frameRef);
-  const handleRef = (0, import_react98.useRef)(null);
-  const isDragging = (0, import_react98.useRef)(false);
-  const startX = (0, import_react98.useRef)(0);
-  const startWidth = (0, import_react98.useRef)(0);
-  const handleMouseMove = (0, import_react98.useCallback)(
+  const handleRef = (0, import_react99.useRef)(null);
+  const isDragging = (0, import_react99.useRef)(false);
+  const startX = (0, import_react99.useRef)(0);
+  const startWidth = (0, import_react99.useRef)(0);
+  const handleMouseMove = (0, import_react99.useCallback)(
     (e) => {
       if (!isDragging.current) return;
       const delta = e.clientX - startX.current;
@@ -14916,7 +15395,7 @@ var ResizeHandle = ({
     },
     [onResize, position]
   );
-  const handleMouseUp = (0, import_react98.useCallback)(() => {
+  const handleMouseUp = (0, import_react99.useCallback)(() => {
     if (!isDragging.current) return;
     isDragging.current = false;
     document.body.style.cursor = "";
@@ -14931,7 +15410,7 @@ var ResizeHandle = ({
     onResizeEnd(finalWidth);
     resetAutoZoom();
   }, [onResizeEnd, handleMouseMove, resetAutoZoom, sidebarRef]);
-  const handleMouseDown = (0, import_react98.useCallback)(
+  const handleMouseDown = (0, import_react99.useCallback)(
     (e) => {
       isDragging.current = true;
       startX.current = e.clientX;
@@ -14948,7 +15427,7 @@ var ResizeHandle = ({
     },
     [handleMouseMove, handleMouseUp, sidebarRef]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
     "div",
     {
       ref: handleRef,
@@ -14966,7 +15445,7 @@ init_react_import();
 var styles_module_default31 = { "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
-var import_jsx_runtime93 = require("react/jsx-runtime");
+var import_jsx_runtime94 = require("react/jsx-runtime");
 var getClassName39 = get_class_name_factory_default("Sidebar", styles_module_default31);
 var Sidebar = ({
   position,
@@ -14976,8 +15455,8 @@ var Sidebar = ({
   onResizeEnd,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(import_jsx_runtime93.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(import_jsx_runtime94.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
       "div",
       {
         ref: sidebarRef,
@@ -14985,7 +15464,7 @@ var Sidebar = ({
         children
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: `${getClassName39("resizeHandle")}`, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: `${getClassName39("resizeHandle")}`, children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
       ResizeHandle,
       {
         position,
@@ -14999,7 +15478,7 @@ var Sidebar = ({
 
 // lib/use-delete-hotkeys.ts
 init_react_import();
-var import_react99 = require("react");
+var import_react100 = require("react");
 init_use_hotkey();
 init_store2();
 var isElementVisible = (element) => {
@@ -15035,7 +15514,7 @@ var shouldBlockDeleteHotkey = (e) => {
 };
 var useDeleteHotkeys = () => {
   const appStore = useAppStoreApi();
-  const deleteSelectedComponent = (0, import_react99.useCallback)(
+  const deleteSelectedComponent = (0, import_react100.useCallback)(
     (e) => {
       if (shouldBlockDeleteHotkey(e)) {
         return false;
@@ -15067,7 +15546,7 @@ var styles_module_default32 = { "Nav": "_Nav_wbh7e_1", "Nav-list": "_Nav-list_wb
 
 // components/CredBuild/components/Nav/index.tsx
 init_lib();
-var import_jsx_runtime94 = require("react/jsx-runtime");
+var import_jsx_runtime95 = require("react/jsx-runtime");
 var getClassName40 = get_class_name_factory_default("Nav", styles_module_default32);
 var getClassNameItem3 = get_class_name_factory_default("NavItem", styles_module_default32);
 var MenuItem = ({
@@ -15078,7 +15557,7 @@ var MenuItem = ({
   mobileOnly,
   desktopOnly
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
     "li",
     {
       className: getClassNameItem3({
@@ -15086,10 +15565,7 @@ var MenuItem = ({
         mobileOnly,
         desktopOnly
       }),
-      children: onClick && /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: getClassNameItem3("link"), onClick, children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: getClassNameItem3("linkIcon"), children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: getClassNameItem3("linkLabel"), children: label })
-      ] })
+      children: onClick && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: getClassNameItem3("link"), onClick, title: label, children: icon && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: getClassNameItem3("linkIcon"), children: icon }) })
     }
   );
 };
@@ -15097,9 +15573,9 @@ var Nav = ({
   items,
   mobileActions
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("nav", { className: getClassName40(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("ul", { className: getClassName40("list"), children: Object.entries(items).map(([key, item]) => /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(MenuItem, { ...item }, key)) }),
-    mobileActions && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: getClassName40("mobileActions"), children: mobileActions })
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("nav", { className: getClassName40(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("ul", { className: getClassName40("list"), children: Object.entries(items).map(([key, item]) => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(MenuItem, { ...item }, key)) }),
+    mobileActions && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: getClassName40("mobileActions"), children: mobileActions })
   ] });
 };
 
@@ -15113,17 +15589,17 @@ init_lucide_react();
 
 // css-module:/home/runner/work/credbuild/credbuild/plugins/blocks/styles.module.css#css-module
 init_react_import();
-var styles_module_default33 = { "BlocksPlugin": "_BlocksPlugin_1ey1i_1" };
+var styles_module_default33 = { "BlocksPlugin": "_BlocksPlugin_1q0b2_1" };
 
 // plugins/blocks/index.tsx
 init_lib();
-var import_jsx_runtime95 = require("react/jsx-runtime");
+var import_jsx_runtime96 = require("react/jsx-runtime");
 var getClassName41 = get_class_name_factory_default("BlocksPlugin", styles_module_default33);
 var blocksPlugin = () => ({
   name: "blocks",
   label: "Blocks",
-  render: () => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: getClassName41(), children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Components, {}) }),
-  icon: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Shapes, {})
+  render: () => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: getClassName41(), children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Components, {}) }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Shapes, {})
 });
 
 // plugins/outline/index.tsx
@@ -15136,13 +15612,13 @@ var styles_module_default34 = { "OutlinePlugin": "_OutlinePlugin_q92j6_1" };
 
 // plugins/outline/index.tsx
 init_lib();
-var import_jsx_runtime96 = require("react/jsx-runtime");
+var import_jsx_runtime97 = require("react/jsx-runtime");
 var getClassName42 = get_class_name_factory_default("OutlinePlugin", styles_module_default34);
 var outlinePlugin = () => ({
   name: "outline",
   label: "Outline",
-  render: () => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: getClassName42(), children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Outline, {}) }),
-  icon: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(List, {})
+  render: () => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: getClassName42(), children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(Outline, {}) }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(List, {})
 });
 
 // plugins/fields/index.tsx
@@ -15156,7 +15632,7 @@ var styles_module_default35 = { "FieldsPlugin": "_FieldsPlugin_6as57_1", "Fields
 
 // plugins/fields/index.tsx
 init_lib();
-var import_jsx_runtime97 = require("react/jsx-runtime");
+var import_jsx_runtime98 = require("react/jsx-runtime");
 var getClassName43 = get_class_name_factory_default("FieldsPlugin", styles_module_default35);
 var CurrentTitle = () => {
   const label = useAppStore((s) => {
@@ -15168,31 +15644,185 @@ var CurrentTitle = () => {
 var fieldsPlugin = ({ desktopSideBar = "right" } = {}) => ({
   name: "fields",
   label: "Fields",
-  render: () => /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: getClassName43(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: getClassName43("header"), children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(Breadcrumbs, { numParents: 2, children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(CurrentTitle, {}) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(Fields, {})
+  render: () => /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: getClassName43(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: getClassName43("header"), children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(Breadcrumbs, { numParents: 2, children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(CurrentTitle, {}) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(Fields, {})
   ] }),
-  icon: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(RectangleEllipsis, {}),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(RectangleEllipsis, {}),
   mobileOnly: desktopSideBar === "right"
 });
 
+// plugins/code/index.tsx
+init_react_import();
+init_lucide_react();
+
+// plugins/code/CodePanel.tsx
+init_react_import();
+var import_react101 = require("react");
+init_store2();
+init_lucide_react();
+init_get_class_name_factory();
+
+// css-module:/home/runner/work/credbuild/credbuild/plugins/code/styles.module.css#css-module
+init_react_import();
+var styles_module_default36 = { "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
+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 dispatch = useAppStore((s) => s.dispatch);
+  const root = useAppStore((s) => s.state.data.root);
+  const rootProps = root?.props || root;
+  const currentMode = rootProps?.mode || "blocks";
+  const aiPrompt = `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 handleCopyPrompt = () => {
+    navigator.clipboard.writeText(aiPrompt);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  };
+  const handleActivateHtmlMode = () => {
+    dispatch({
+      type: "setData",
+      data: (currentData) => {
+        return {
+          ...currentData,
+          content: [],
+          root: {
+            ...currentData.root,
+            props: {
+              ...currentData.root?.props,
+              mode: "html",
+              htmlCode: "",
+              htmlViewMode: "code"
+            }
+          }
+        };
+      }
+    });
+  };
+  const handleResetToBlocks = () => {
+    dispatch({
+      type: "setData",
+      data: (currentData) => {
+        return {
+          ...currentData,
+          content: [],
+          root: {
+            ...currentData.root,
+            props: {
+              ...currentData.root?.props,
+              mode: "blocks",
+              htmlCode: "",
+              htmlViewMode: "code"
+            }
+          }
+        };
+      }
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: getClassName44(), children: [
+    currentMode === "html" ? /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: getClassName44("title"), children: "Tempel Kode HTML" }),
+      /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "p-3 bg-emerald-950/40 border border-emerald-800/40 rounded-lg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "flex items-center gap-2 text-emerald-400 text-xs font-semibold mb-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(CircleCheck, { size: 14, className: "shrink-0" }),
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { children: "Mode HTML Aktif pada Kanvas" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("p", { className: "text-[11px] leading-relaxed text-zinc-400 mb-4", children: "Gunakan editor kode langsung yang lapang langsung di area kanvas tengah untuk mengedit kode." }),
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: handleResetToBlocks,
+            className: "w-full px-3 py-2 text-xs font-bold text-zinc-400 hover:text-white bg-zinc-950/50 border border-zinc-900 hover:border-zinc-800 rounded transition-colors cursor-pointer flex items-center justify-center gap-1.5",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(LayoutGrid, { size: 13 }),
+              "Matikan Mode HTML (Mode Blok)"
+            ]
+          }
+        ) })
+      ] })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { style: { display: "flex", flexDirection: "column" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: getClassName44("title"), children: "Tempel Kode HTML" }),
+      /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "mb-4 p-3 bg-zinc-900/60 border border-zinc-800/60 rounded-lg text-[11px] leading-relaxed text-zinc-400", children: [
+        "Kanvas saat ini menggunakan ",
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("strong", { children: "Mode Blok Visual" }),
+        ". Klik tombol di bawah untuk beralih ke Mode HTML penuh pada kanvas."
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(
+        "button",
+        {
+          type: "button",
+          onClick: handleActivateHtmlMode,
+          className: "w-full px-4 py-2 border border-zinc-800 rounded-md text-xs font-semibold text-zinc-300 bg-zinc-900 hover:bg-zinc-800 hover:text-white transition-colors cursor-pointer flex items-center justify-center gap-1.5 mb-4",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(Code, { size: 13 }),
+            "Aktifkan Mode HTML"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: getClassName44("promptSection"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: getClassName44("promptHeader"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: getClassName44("optionTitle"), style: { margin: 0 }, children: "Prompt AI Generator" }),
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: handleCopyPrompt,
+            className: getClassName44("copyBtn") + (copied ? ` ${styles_module_default36["CodePanel-copyBtn--copied"]}` : ""),
+            children: copied ? /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(import_jsx_runtime99.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(Check, { size: 11 }),
+              "Tersalin"
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(import_jsx_runtime99.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(Copy, { size: 11 }),
+              "Salin Prompt"
+            ] })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: getClassName44("promptText"), children: aiPrompt })
+    ] })
+  ] });
+};
+
+// plugins/code/index.tsx
+init_lib();
+var import_jsx_runtime100 = require("react/jsx-runtime");
+var getClassName45 = get_class_name_factory_default("CodePlugin", styles_module_default36);
+var codePlugin = () => ({
+  name: "code",
+  label: "Code",
+  render: () => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: getClassName45(), children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(CodePanel, {}) }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Code, { size: 18 })
+});
+
 // components/CredBuild/components/Layout/index.tsx
-var import_jsx_runtime98 = require("react/jsx-runtime");
-var getClassName44 = get_class_name_factory_default("CredBuild", styles_module_default23);
+var import_jsx_runtime101 = require("react/jsx-runtime");
+var getClassName46 = get_class_name_factory_default("CredBuild", styles_module_default23);
 var getLayoutClassName = get_class_name_factory_default("CredBuildLayout", styles_module_default23);
 var getPluginTabClassName = get_class_name_factory_default("CredBuildPluginTab", styles_module_default23);
 var FieldSideBar = () => {
   const title = useAppStore(
     (s) => s.selectedItem ? s.config.components[s.selectedItem.type]?.["label"] ?? s.selectedItem.type.toString() : s.config.root?.label || "Page"
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(SidebarSection, { noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(Fields, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(SidebarSection, { noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(Fields, {}) });
 };
 var PluginTab = ({
   children,
   visible,
   mobileOnly
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: getPluginTabClassName({ visible, mobileOnly }), children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: getPluginTabClassName("body"), children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: getPluginTabClassName({ visible, mobileOnly }), children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: getPluginTabClassName("body"), children }) });
 };
 var Layout = ({ children }) => {
   const {
@@ -15202,7 +15832,7 @@ var Layout = ({ children }) => {
     plugins,
     height
   } = usePropsContext();
-  const iframe = (0, import_react100.useMemo)(
+  const iframe = (0, import_react102.useMemo)(
     () => ({
       enabled: true,
       waitForStyles: true,
@@ -15229,7 +15859,7 @@ var Layout = ({ children }) => {
     sidebarRef: rightSidebarRef,
     handleResizeEnd: handleRightSidebarResizeEnd
   } = useSidebarResize("right", dispatch);
-  (0, import_react100.useEffect)(() => {
+  (0, import_react102.useEffect)(() => {
     if (!window.matchMedia("(min-width: 638px)").matches) {
       dispatch({
         type: "setUi",
@@ -15256,13 +15886,13 @@ var Layout = ({ children }) => {
     };
   }, [dispatch]);
   const overrides = useAppStore((s) => s.overrides);
-  const CustomCredBuild = (0, import_react100.useMemo)(
+  const CustomCredBuild = (0, import_react102.useMemo)(
     () => overrides.credbuild || DefaultOverride,
     [overrides]
   );
-  const [mounted, setMounted] = (0, import_react100.useState)(false);
-  const [theme, setTheme] = (0, import_react100.useState)("dark");
-  (0, import_react100.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react102.useState)(false);
+  const [theme, setTheme] = (0, import_react102.useState)("dark");
+  (0, import_react102.useEffect)(() => {
     setMounted(true);
     const savedTheme = localStorage.getItem("credbuild-theme");
     if (savedTheme) {
@@ -15281,7 +15911,7 @@ var Layout = ({ children }) => {
   }, []);
   const ready = useAppStore((s) => s.status === "READY");
   useMonitorHotkeys();
-  (0, import_react100.useEffect)(() => {
+  (0, import_react102.useEffect)(() => {
     if (ready && iframe.enabled) {
       const frameDoc = getFrame();
       if (frameDoc) {
@@ -15301,14 +15931,18 @@ var Layout = ({ children }) => {
   const setUi = useAppStore((s) => s.setUi);
   const currentPlugin = useAppStore((s) => s.state.ui.plugin?.current);
   const appStoreApi = useAppStoreApi();
-  const [mobilePanelHeightMode, setMobilePanelHeightMode] = (0, import_react100.useState)("toggle");
-  const hasLegacySideBarPlugin = (0, import_react100.useMemo)(
+  const [mobilePanelHeightMode, setMobilePanelHeightMode] = (0, import_react102.useState)("toggle");
+  const hasLegacySideBarPlugin = (0, import_react102.useMemo)(
     () => !!plugins?.find((p) => p.name === "legacy-side-bar"),
     [plugins]
   );
-  const pluginItems = (0, import_react100.useMemo)(() => {
+  const pluginItems = (0, import_react102.useMemo)(() => {
     const details = {};
-    const defaultPlugins = [blocksPlugin(), outlinePlugin()];
+    const defaultPlugins = [
+      blocksPlugin(),
+      outlinePlugin(),
+      codePlugin()
+    ];
     const isLegacy = (plugin) => plugin.name === "legacy-side-bar" ? -1 : 0;
     const combinedPlugins = [
       ...defaultPlugins,
@@ -15324,7 +15958,7 @@ var Layout = ({ children }) => {
         }
         details[plugin.name] = {
           label: plugin.label ?? plugin.name,
-          icon: plugin.icon ?? /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(ToyBrick, {}),
+          icon: plugin.icon ?? /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(ToyBrick, {}),
           onClick: () => {
             setMobilePanelHeightMode(plugin.mobilePanelHeight ?? "toggle");
             if (plugin.name === currentPlugin) {
@@ -15351,7 +15985,7 @@ var Layout = ({ children }) => {
     });
     return details;
   }, [plugins, currentPlugin, leftSideBarVisible, hasLegacySideBarPlugin, setUi]);
-  (0, import_react100.useEffect)(() => {
+  (0, import_react102.useEffect)(() => {
     if (!currentPlugin) {
       const names = Object.keys(pluginItems);
       setUi({ plugin: { current: names[0] } });
@@ -15361,17 +15995,17 @@ var Layout = ({ children }) => {
   const mobilePanelExpanded = useAppStore(
     (s) => s.state.ui.mobilePanelExpanded ?? false
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)(
     "div",
     {
-      className: `CredBuild ${theme === "dark" ? "dark" : ""} ${getClassName44({
+      className: `CredBuild ${theme === "dark" ? "dark" : ""} ${getClassName46({
         hidePlugins: hasLegacySideBarPlugin
       })}`,
       "data-theme": theme,
       id: instanceId,
       style: { height: typeof height === "number" && isNaN(height) ? void 0 : height },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(DragDropContext, { disableAutoScroll: dnd?.disableAutoScroll, children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(CustomCredBuild, { children: children || /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(FrameProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(DragDropContext, { disableAutoScroll: dnd?.disableAutoScroll, children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(CustomCredBuild, { children: children || /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(FrameProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
           "div",
           {
             className: getLayoutClassName({
@@ -15383,14 +16017,14 @@ var Layout = ({ children }) => {
               mobilePanelHeightMinContent: mobilePanelHeightMode === "min-content"
             }),
             style: { height: typeof height === "number" && isNaN(height) ? void 0 : height },
-            children: /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)(
               "div",
               {
                 className: getLayoutClassName("inner"),
                 style: layoutOptions,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: getLayoutClassName("header"), children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(Header, { theme, hidePlugins: hasLegacySideBarPlugin }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: getLayoutClassName("header"), children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(Header, { theme, hidePlugins: hasLegacySideBarPlugin }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)(
                     Sidebar,
                     {
                       position: "left",
@@ -15399,11 +16033,11 @@ var Layout = ({ children }) => {
                       onResize: setLeftWidth,
                       onResizeEnd: handleLeftSidebarResizeEnd,
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: getLayoutClassName("nav"), children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: getLayoutClassName("nav"), children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
                           Nav,
                           {
                             items: pluginItems,
-                            mobileActions: typeof window !== "undefined" && !window.matchMedia("(min-width: 638px)").matches && leftSideBarVisible && mobilePanelHeightMode === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+                            mobileActions: typeof window !== "undefined" && !window.matchMedia("(min-width: 638px)").matches && leftSideBarVisible && mobilePanelHeightMode === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
                               IconButton,
                               {
                                 type: "button",
@@ -15413,18 +16047,18 @@ var Layout = ({ children }) => {
                                     mobilePanelExpanded: !mobilePanelExpanded
                                   });
                                 },
-                                children: mobilePanelExpanded ? /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(Minimize2, { size: 21 }) : /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(Maximize2, { size: 21 })
+                                children: mobilePanelExpanded ? /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(Minimize2, { size: 21 }) : /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(Maximize2, { size: 21 })
                               }
                             )
                           }
                         ) }),
                         Object.entries(pluginItems).map(
-                          ([id, { mobileOnly, render: Render2, label }]) => /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+                          ([id, { mobileOnly, render: Render2, label }]) => /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
                             PluginTab,
                             {
                               visible: currentPlugin === id,
                               mobileOnly,
-                              children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(Render2, {})
+                              children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(Render2, {})
                             },
                             id
                           )
@@ -15432,8 +16066,8 @@ var Layout = ({ children }) => {
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(Canvas, {}),
-                  !hasDesktopFieldsPlugin && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(Canvas, {}),
+                  !hasDesktopFieldsPlugin && /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
                     Sidebar,
                     {
                       position: "right",
@@ -15441,7 +16075,7 @@ var Layout = ({ children }) => {
                       isVisible: rightSideBarVisible,
                       onResize: setRightWidth,
                       onResizeEnd: handleRightSidebarResizeEnd,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(FieldSideBar, {})
+                      children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(FieldSideBar, {})
                     }
                   )
                 ]
@@ -15449,7 +16083,7 @@ var Layout = ({ children }) => {
             )
           }
         ) }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { id: "credbuild-portal-root", className: getClassName44("portal") })
+        /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { id: "credbuild-portal-root", className: getClassName46("portal") })
       ]
     }
   );
@@ -15457,7 +16091,7 @@ var Layout = ({ children }) => {
 
 // components/CredBuild/index.tsx
 init_use_safe_id();
-var import_jsx_runtime99 = require("react/jsx-runtime");
+var import_jsx_runtime102 = require("react/jsx-runtime");
 function CredBuildProvider({ children }) {
   const {
     config,
@@ -15476,7 +16110,7 @@ function CredBuildProvider({ children }) {
     _experimentalFullScreenCanvas,
     _experimentalVirtualization
   } = usePropsContext();
-  const iframe = (0, import_react101.useMemo)(
+  const iframe = (0, import_react103.useMemo)(
     () => ({
       enabled: true,
       waitForStyles: true,
@@ -15484,7 +16118,7 @@ function CredBuildProvider({ children }) {
     }),
     [_iframe]
   );
-  const [generatedAppState] = (0, import_react101.useState)(() => {
+  const [generatedAppState] = (0, import_react103.useState)(() => {
     const initial = { ...defaultAppState.ui, ...initialUi };
     let clientUiState = {};
     if (Object.keys(initialData?.root || {}).length > 0 && !initialData?.root?.props) {
@@ -15531,7 +16165,7 @@ function CredBuildProvider({ children }) {
     return walkAppState(newAppState, config);
   });
   const { appendData = true } = _initialHistory || {};
-  const [blendedHistories] = (0, import_react101.useState)(
+  const [blendedHistories] = (0, import_react103.useState)(
     [
       ..._initialHistory?.histories || [],
       ...appendData ? [{ state: generatedAppState }] : []
@@ -15546,7 +16180,7 @@ function CredBuildProvider({ children }) {
       };
     })
   );
-  const initialHistoryIndex = (0, import_react101.useMemo)(() => {
+  const initialHistoryIndex = (0, import_react103.useMemo)(() => {
     if (_initialHistory?.index !== void 0 && _initialHistory?.index >= 0 && _initialHistory?.index < blendedHistories.length) {
       return _initialHistory?.index;
     }
@@ -15557,7 +16191,7 @@ function CredBuildProvider({ children }) {
     overrides,
     plugins
   });
-  const loadedFieldTransforms = (0, import_react101.useMemo)(() => {
+  const loadedFieldTransforms = (0, import_react103.useMemo)(() => {
     const _plugins = plugins || [];
     const pluginFieldTransforms = _plugins.reduce(
       (acc, plugin) => ({ ...acc, ...plugin.fieldTransforms }),
@@ -15569,7 +16203,7 @@ function CredBuildProvider({ children }) {
     };
   }, [fieldTransforms, plugins]);
   const instanceId = useSafeId();
-  const generateAppStore = (0, import_react101.useCallback)(
+  const generateAppStore = (0, import_react103.useCallback)(
     (state) => {
       return {
         instanceId,
@@ -15600,15 +16234,15 @@ function CredBuildProvider({ children }) {
       loadedFieldTransforms
     ]
   );
-  const [appStore] = (0, import_react101.useState)(
+  const [appStore] = (0, import_react103.useState)(
     () => createAppStore(generateAppStore(initialAppState))
   );
-  (0, import_react101.useEffect)(() => {
+  (0, import_react103.useEffect)(() => {
     if (process.env.NODE_ENV !== "production") {
       window.__CREDBUILD_INTERNAL_DO_NOT_USE = { appStore };
     }
   }, [appStore]);
-  (0, import_react101.useEffect)(() => {
+  (0, import_react103.useEffect)(() => {
     const state = appStore.getState().state;
     appStore.setState({
       ...generateAppStore(state)
@@ -15619,8 +16253,8 @@ function CredBuildProvider({ children }) {
     index: initialHistoryIndex,
     initialAppState
   });
-  const previousData = (0, import_react101.useRef)(null);
-  (0, import_react101.useEffect)(() => {
+  const previousData = (0, import_react103.useRef)(null);
+  (0, import_react103.useEffect)(() => {
     return appStore.subscribe(
       (s) => s.state.data,
       (data) => {
@@ -15634,16 +16268,16 @@ function CredBuildProvider({ children }) {
   }, [onChange, appStore]);
   useRegisterPermissionsSlice(appStore, permissions);
   const uCredBuildStore = useRegisterUseCredBuildStore(appStore);
-  (0, import_react101.useEffect)(() => {
+  (0, import_react103.useEffect)(() => {
     const { resolveAndCommitData } = appStore.getState();
     setTimeout(() => {
       resolveAndCommitData();
     }, 0);
   }, [appStore]);
-  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(UseCredBuildStoreContext.Provider, { value: uCredBuildStore, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(UseCredBuildStoreContext.Provider, { value: uCredBuildStore, children }) });
 }
 function CredBuild(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(PropsProvider, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(CredBuildProvider, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(Layout, { children: props.children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(PropsProvider, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(CredBuildProvider, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(Layout, { children: props.children }) }) });
 }
 CredBuild.Components = Components;
 CredBuild.Fields = Fields;
@@ -15907,12 +16541,12 @@ init_walk_tree();
 
 // plugins/legacy-side-bar/index.tsx
 init_react_import();
-var import_jsx_runtime100 = require("react/jsx-runtime");
+var import_jsx_runtime103 = require("react/jsx-runtime");
 var legacySideBarPlugin = () => ({
   name: "legacy-side-bar",
-  render: () => /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { style: { overflowY: "auto" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Components, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(SidebarSection, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Outline, {}) })
+  render: () => /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { style: { overflowY: "auto" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(Components, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(SidebarSection, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(Outline, {}) })
   ] })
 });
 // Annotate the CommonJS export names for ESM import in node:
@@ -15935,6 +16569,7 @@ var legacySideBarPlugin = () => ({
   Separator,
   SliderField,
   blocksPlugin,
+  codePlugin,
   createUseCredBuild,
   fieldsPlugin,
   legacySideBarPlugin,
@@ -15958,16 +16593,19 @@ lucide-react/dist/esm/createLucideIcon.js:
 lucide-react/dist/esm/icons/bold.js:
 lucide-react/dist/esm/icons/box.js:
 lucide-react/dist/esm/icons/chart-column.js:
+lucide-react/dist/esm/icons/check.js:
 lucide-react/dist/esm/icons/chevron-down.js:
 lucide-react/dist/esm/icons/chevron-right.js:
 lucide-react/dist/esm/icons/chevron-up.js:
 lucide-react/dist/esm/icons/circle-check-big.js:
+lucide-react/dist/esm/icons/circle-check.js:
 lucide-react/dist/esm/icons/code.js:
 lucide-react/dist/esm/icons/copy.js:
 lucide-react/dist/esm/icons/corner-left-up.js:
 lucide-react/dist/esm/icons/credit-card.js:
 lucide-react/dist/esm/icons/expand.js:
 lucide-react/dist/esm/icons/external-link.js:
+lucide-react/dist/esm/icons/eye.js:
 lucide-react/dist/esm/icons/file-text.js:
 lucide-react/dist/esm/icons/grip-vertical.js:
 lucide-react/dist/esm/icons/hash.js: