@crediblemark/build 0.25.18 → 0.25.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-3EWP7RGL.mjs → chunk-5GWBGJC4.mjs} +203 -153
- package/dist/index.css +40 -2
- package/dist/index.js +167 -117
- package/dist/index.mjs +1 -1
- package/dist/no-external.css +40 -2
- package/dist/no-external.js +167 -117
- package/dist/no-external.mjs +1 -1
- package/package.json +1 -1
|
@@ -157,7 +157,14 @@ var HtmlModeRender = ({
|
|
|
157
157
|
const body = document.body;
|
|
158
158
|
// calculate content height safely, avoiding clientHeight/viewport height which prevents shrinking
|
|
159
159
|
const height = Math.max(body.scrollHeight, body.offsetHeight);
|
|
160
|
-
|
|
160
|
+
try {
|
|
161
|
+
window.parent.postMessage({ type: 'resize-iframe', id: '${id}', height: height }, '*');
|
|
162
|
+
if (window.top && window.top !== window.parent) {
|
|
163
|
+
window.top.postMessage({ type: 'resize-iframe', id: '${id}', height: height }, '*');
|
|
164
|
+
}
|
|
165
|
+
} catch (e) {
|
|
166
|
+
// Ignore
|
|
167
|
+
}
|
|
161
168
|
}
|
|
162
169
|
window.addEventListener('load', sendHeight);
|
|
163
170
|
window.addEventListener('resize', sendHeight);
|
|
@@ -1440,30 +1447,36 @@ import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-ru
|
|
|
1440
1447
|
var getClassName9 = get_class_name_factory_default("CodePanel", styles_module_default9);
|
|
1441
1448
|
var CodePanel = () => {
|
|
1442
1449
|
const [copied, setCopied] = useState5(false);
|
|
1443
|
-
const [
|
|
1450
|
+
const [topic, setTopic] = useState5("");
|
|
1451
|
+
const [promptType, setPromptType] = useState5("header-footer");
|
|
1444
1452
|
const dispatch = useAppStore((s) => s.dispatch);
|
|
1445
1453
|
const root = useAppStore((s) => s.state.data.root);
|
|
1446
1454
|
const rootProps = root?.props || root;
|
|
1447
1455
|
const currentMode = rootProps?.mode || "blocks";
|
|
1448
|
-
const
|
|
1449
|
-
|
|
1450
|
-
|
|
1451
|
-
|
|
1452
|
-
|
|
1453
|
-
|
|
1454
|
-
|
|
1455
|
-
|
|
1456
|
-
|
|
1456
|
+
const generatePrompt = (variant, landingPageTopic) => {
|
|
1457
|
+
const topicDesc = landingPageTopic.trim() ? `untuk "${landingPageTopic.trim()}"` : "lengkap dan premium";
|
|
1458
|
+
let structureRequirements = "";
|
|
1459
|
+
if (variant === "header-footer") {
|
|
1460
|
+
structureRequirements = "1. STRUKTUR LENGKAP: Halaman HARUS memuat seluruh bagian berikut secara lengkap: Header/Navigation menu di bagian paling atas, Hero Section, Features/Layanan, Testimoni, Call-to-Action (CTA), dan Footer di bagian paling bawah.";
|
|
1461
|
+
} else if (variant === "header-no-footer") {
|
|
1462
|
+
structureRequirements = "1. DENGAN HEADER & TANPA FOOTER: Halaman HARUS memuat Header/Navigation menu di bagian paling atas, Hero Section, Features/Layanan, Testimoni, dan Call-to-Action (CTA). Namun, pastikan sama sekali TIDAK ada bagian Footer di bagian bawah halaman.";
|
|
1463
|
+
} else if (variant === "no-header-footer") {
|
|
1464
|
+
structureRequirements = "1. TANPA HEADER & DENGAN FOOTER: Halaman HARUS memuat Hero Section, Features/Layanan, Testimoni, Call-to-Action (CTA), dan Footer di bagian paling bawah. Namun, pastikan sama sekali TIDAK ada bagian Header/Navigation/Navbar di bagian atas halaman.";
|
|
1465
|
+
} else {
|
|
1466
|
+
structureRequirements = "1. TANPA HEADER & TANPA FOOTER: Halaman HARUS memuat Hero Section, Features/Layanan, Testimoni, dan Call-to-Action (CTA). Pastikan sama sekali TIDAK ada bagian Header/Navigation/Navbar di bagian atas, dan TIDAK ada bagian Footer di bagian bawah halaman.";
|
|
1467
|
+
}
|
|
1468
|
+
return `Buatkan desain landing page ${topicDesc} dengan pendekatan mobile-first, modern, rapi, dan compact (padat & elegan) menggunakan HTML murni dan utilitas kelas Tailwind CSS.
|
|
1457
1469
|
|
|
1458
1470
|
Ketentuan penulisan kode:
|
|
1459
|
-
|
|
1460
|
-
2.
|
|
1471
|
+
${structureRequirements}
|
|
1472
|
+
2. STRUKTUR BERSIH: Gunakan elemen semantik HTML5 seperti <section>, <header>, atau <div> sebagai wrapper utama per seksi. JANGAN sertakan tag <html>, <body>, <head>, atau <script>.
|
|
1461
1473
|
3. MOBILE-FIRST & RESPONSIF: Desain harus sepenuhnya responsif. Mulai dari layout ponsel (default), lalu gunakan breakpoint (sm:, md:, lg:, xl:) secara terstruktur untuk layar yang lebih besar.
|
|
1462
1474
|
4. ESTETIKA MODERN & PREMIUM: Gunakan skema warna harmonis (misal: warna gelap bernuansa glassmorphism, gradasi halus, border tipis semi-transparan, efek hover mikro interaktif).
|
|
1463
1475
|
5. COMPACT & EFISIEN: Hindari padding/margin berlebih yang membuat halaman kosong melompong. Pastikan konten padat, terbaca dengan baik, dan memiliki rasio grid/flexbox yang rapi.
|
|
1464
1476
|
6. BEBAS JAVASCRIPT: Seluruh interaktivitas dasar (seperti hover, focus, state) harus ditangani murni menggunakan utilitas kelas CSS Tailwind.`;
|
|
1477
|
+
};
|
|
1465
1478
|
const handleCopyPrompt = () => {
|
|
1466
|
-
const selectedPrompt = promptType
|
|
1479
|
+
const selectedPrompt = generatePrompt(promptType, topic);
|
|
1467
1480
|
navigator.clipboard.writeText(selectedPrompt);
|
|
1468
1481
|
setCopied(true);
|
|
1469
1482
|
setTimeout(() => setCopied(false), 2e3);
|
|
@@ -1569,37 +1582,94 @@ Ketentuan penulisan kode:
|
|
|
1569
1582
|
}
|
|
1570
1583
|
)
|
|
1571
1584
|
] }),
|
|
1572
|
-
/* @__PURE__ */
|
|
1573
|
-
/* @__PURE__ */
|
|
1574
|
-
|
|
1575
|
-
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
|
|
1579
|
-
|
|
1580
|
-
|
|
1581
|
-
|
|
1582
|
-
|
|
1583
|
-
|
|
1584
|
-
|
|
1585
|
-
|
|
1586
|
-
|
|
1587
|
-
|
|
1588
|
-
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
|
|
1595
|
-
|
|
1596
|
-
|
|
1597
|
-
|
|
1598
|
-
|
|
1599
|
-
|
|
1585
|
+
/* @__PURE__ */ jsxs7("div", { style: { marginBottom: 12 }, children: [
|
|
1586
|
+
/* @__PURE__ */ jsx13("div", { className: getClassName9("optionTitle"), style: { marginBottom: 6 }, children: "Topik / Jenis Landing Page" }),
|
|
1587
|
+
/* @__PURE__ */ jsx13(
|
|
1588
|
+
"input",
|
|
1589
|
+
{
|
|
1590
|
+
type: "text",
|
|
1591
|
+
value: topic,
|
|
1592
|
+
onChange: (e) => setTopic(e.target.value),
|
|
1593
|
+
placeholder: "Contoh: Klinik Gigi, SaaS AI, Agensi Desain...",
|
|
1594
|
+
style: {
|
|
1595
|
+
boxSizing: "border-box",
|
|
1596
|
+
width: "100%",
|
|
1597
|
+
padding: "8px 10px",
|
|
1598
|
+
fontSize: "12px",
|
|
1599
|
+
borderRadius: "5px",
|
|
1600
|
+
border: "1px solid var(--cb-border)",
|
|
1601
|
+
backgroundColor: "var(--cb-bg-base)",
|
|
1602
|
+
color: "var(--cb-silver)",
|
|
1603
|
+
outline: "none",
|
|
1604
|
+
transition: "border-color 0.2s"
|
|
1605
|
+
},
|
|
1606
|
+
onFocus: (e) => e.target.style.borderColor = "var(--cb-gold)",
|
|
1607
|
+
onBlur: (e) => e.target.style.borderColor = "var(--cb-border)"
|
|
1608
|
+
}
|
|
1609
|
+
)
|
|
1610
|
+
] }),
|
|
1611
|
+
/* @__PURE__ */ jsxs7("div", { className: getClassName9("optionsSection"), style: { marginBottom: 12 }, children: [
|
|
1612
|
+
/* @__PURE__ */ jsx13("div", { className: getClassName9("optionTitle"), style: { marginBottom: 6 }, children: "Varian Struktur Template" }),
|
|
1613
|
+
/* @__PURE__ */ jsxs7("div", { className: getClassName9("radioGroup"), children: [
|
|
1614
|
+
/* @__PURE__ */ jsxs7("label", { className: getClassName9("radioLabel"), children: [
|
|
1615
|
+
/* @__PURE__ */ jsx13(
|
|
1616
|
+
"input",
|
|
1617
|
+
{
|
|
1618
|
+
type: "radio",
|
|
1619
|
+
name: "promptType",
|
|
1620
|
+
value: "header-footer",
|
|
1621
|
+
checked: promptType === "header-footer",
|
|
1622
|
+
onChange: () => setPromptType("header-footer"),
|
|
1623
|
+
className: getClassName9("radioInput")
|
|
1624
|
+
}
|
|
1625
|
+
),
|
|
1626
|
+
/* @__PURE__ */ jsx13("span", { children: "Dengan Header & Footer" })
|
|
1627
|
+
] }),
|
|
1628
|
+
/* @__PURE__ */ jsxs7("label", { className: getClassName9("radioLabel"), children: [
|
|
1629
|
+
/* @__PURE__ */ jsx13(
|
|
1630
|
+
"input",
|
|
1631
|
+
{
|
|
1632
|
+
type: "radio",
|
|
1633
|
+
name: "promptType",
|
|
1634
|
+
value: "header-no-footer",
|
|
1635
|
+
checked: promptType === "header-no-footer",
|
|
1636
|
+
onChange: () => setPromptType("header-no-footer"),
|
|
1637
|
+
className: getClassName9("radioInput")
|
|
1638
|
+
}
|
|
1639
|
+
),
|
|
1640
|
+
/* @__PURE__ */ jsx13("span", { children: "Dengan Header, Tanpa Footer" })
|
|
1641
|
+
] }),
|
|
1642
|
+
/* @__PURE__ */ jsxs7("label", { className: getClassName9("radioLabel"), children: [
|
|
1643
|
+
/* @__PURE__ */ jsx13(
|
|
1644
|
+
"input",
|
|
1645
|
+
{
|
|
1646
|
+
type: "radio",
|
|
1647
|
+
name: "promptType",
|
|
1648
|
+
value: "no-header-footer",
|
|
1649
|
+
checked: promptType === "no-header-footer",
|
|
1650
|
+
onChange: () => setPromptType("no-header-footer"),
|
|
1651
|
+
className: getClassName9("radioInput")
|
|
1652
|
+
}
|
|
1653
|
+
),
|
|
1654
|
+
/* @__PURE__ */ jsx13("span", { children: "Tanpa Header, Dengan Footer" })
|
|
1655
|
+
] }),
|
|
1656
|
+
/* @__PURE__ */ jsxs7("label", { className: getClassName9("radioLabel"), children: [
|
|
1657
|
+
/* @__PURE__ */ jsx13(
|
|
1658
|
+
"input",
|
|
1659
|
+
{
|
|
1660
|
+
type: "radio",
|
|
1661
|
+
name: "promptType",
|
|
1662
|
+
value: "no-header-no-footer",
|
|
1663
|
+
checked: promptType === "no-header-no-footer",
|
|
1664
|
+
onChange: () => setPromptType("no-header-no-footer"),
|
|
1665
|
+
className: getClassName9("radioInput")
|
|
1666
|
+
}
|
|
1667
|
+
),
|
|
1668
|
+
/* @__PURE__ */ jsx13("span", { children: "Tanpa Keduanya" })
|
|
1669
|
+
] })
|
|
1600
1670
|
] })
|
|
1601
|
-
] })
|
|
1602
|
-
/* @__PURE__ */ jsx13("div", { className: getClassName9("promptText"),
|
|
1671
|
+
] }),
|
|
1672
|
+
/* @__PURE__ */ jsx13("div", { className: getClassName9("promptText"), style: { maxHeight: 110 }, children: generatePrompt(promptType, topic) })
|
|
1603
1673
|
] })
|
|
1604
1674
|
] });
|
|
1605
1675
|
};
|
|
@@ -1927,7 +1997,7 @@ AutoFrame.displayName = "AutoFrame";
|
|
|
1927
1997
|
var AutoFrame_default = AutoFrame;
|
|
1928
1998
|
|
|
1929
1999
|
// css-module:/media/rasyiqi/PROJECT/credibuild-project/credbuild/components/CredBuild/components/Preview/styles.module.css#css-module
|
|
1930
|
-
var styles_module_default10 = { "CredBuildPreview": "
|
|
2000
|
+
var styles_module_default10 = { "CredBuildPreview": "_CredBuildPreview_17c6o_1", "CredBuildPreview-frame": "_CredBuildPreview-frame_17c6o_6", "CredBuildPreview-htmlEditor": "_CredBuildPreview-htmlEditor_17c6o_12", "CredBuildPreview-htmlTextarea": "_CredBuildPreview-htmlTextarea_17c6o_23" };
|
|
1931
2001
|
|
|
1932
2002
|
// lib/bubble-pointer-event.ts
|
|
1933
2003
|
var BaseEvent = typeof PointerEvent !== "undefined" ? PointerEvent : Event;
|
|
@@ -1948,7 +2018,7 @@ var BubbledPointerEvent = class extends BaseEvent {
|
|
|
1948
2018
|
};
|
|
1949
2019
|
|
|
1950
2020
|
// components/CredBuild/components/Preview/index.tsx
|
|
1951
|
-
import { Fragment as Fragment5, jsx as jsx16
|
|
2021
|
+
import { Fragment as Fragment5, jsx as jsx16 } from "react/jsx-runtime";
|
|
1952
2022
|
var getClassName11 = get_class_name_factory_default("CredBuildPreview", styles_module_default10);
|
|
1953
2023
|
var useBubbleIframeEvents = (ref) => {
|
|
1954
2024
|
const status = useAppStore((s) => s.status);
|
|
@@ -2136,58 +2206,22 @@ var Preview = ({ id = "credbuild-preview" }) => {
|
|
|
2136
2206
|
id,
|
|
2137
2207
|
"data-credbuild-preview": true,
|
|
2138
2208
|
style: { height: "100%", display: "flex", flexDirection: "column" },
|
|
2139
|
-
children: /* @__PURE__ */ jsx16("div", { style: {
|
|
2140
|
-
display: "flex",
|
|
2141
|
-
flexDirection: "column",
|
|
2142
|
-
flex: 1,
|
|
2143
|
-
background: "#020617",
|
|
2144
|
-
position: "relative"
|
|
2145
|
-
}, children: /* @__PURE__ */ jsxs8("div", { style: {
|
|
2209
|
+
children: /* @__PURE__ */ jsx16("div", { className: getClassName11("htmlEditor"), children: /* @__PURE__ */ jsx16("div", { style: {
|
|
2146
2210
|
display: "flex",
|
|
2147
2211
|
flex: 1,
|
|
2148
2212
|
position: "relative",
|
|
2149
2213
|
overflow: "hidden"
|
|
2150
|
-
}, children:
|
|
2151
|
-
|
|
2152
|
-
|
|
2153
|
-
|
|
2154
|
-
|
|
2155
|
-
|
|
2156
|
-
|
|
2157
|
-
|
|
2158
|
-
|
|
2159
|
-
|
|
2160
|
-
|
|
2161
|
-
color: "#475569",
|
|
2162
|
-
userSelect: "none",
|
|
2163
|
-
lineHeight: 1.6
|
|
2164
|
-
}, children: Array.from({ length: Math.max(localCode.split("\n").length, 25) }).map((_, i) => /* @__PURE__ */ jsx16("div", { children: i + 1 }, i)) }),
|
|
2165
|
-
/* @__PURE__ */ jsx16(
|
|
2166
|
-
"textarea",
|
|
2167
|
-
{
|
|
2168
|
-
value: localCode,
|
|
2169
|
-
onChange: (e) => setLocalCode(e.target.value),
|
|
2170
|
-
onBlur: handleSaveOnBlur,
|
|
2171
|
-
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>",
|
|
2172
|
-
spellCheck: false,
|
|
2173
|
-
style: {
|
|
2174
|
-
flex: 1,
|
|
2175
|
-
background: "transparent",
|
|
2176
|
-
border: "none",
|
|
2177
|
-
outline: "none",
|
|
2178
|
-
color: "#e2e8f0",
|
|
2179
|
-
fontFamily: "Menlo, Monaco, Consolas, 'Fira Code', monospace",
|
|
2180
|
-
fontSize: 13,
|
|
2181
|
-
lineHeight: 1.6,
|
|
2182
|
-
padding: "16px 20px",
|
|
2183
|
-
resize: "none",
|
|
2184
|
-
height: "100%",
|
|
2185
|
-
width: "100%",
|
|
2186
|
-
overflowY: "auto"
|
|
2187
|
-
}
|
|
2188
|
-
}
|
|
2189
|
-
)
|
|
2190
|
-
] }) })
|
|
2214
|
+
}, children: /* @__PURE__ */ jsx16(
|
|
2215
|
+
"textarea",
|
|
2216
|
+
{
|
|
2217
|
+
value: localCode,
|
|
2218
|
+
onChange: (e) => setLocalCode(e.target.value),
|
|
2219
|
+
onBlur: handleSaveOnBlur,
|
|
2220
|
+
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>",
|
|
2221
|
+
spellCheck: false,
|
|
2222
|
+
className: getClassName11("htmlTextarea")
|
|
2223
|
+
}
|
|
2224
|
+
) }) })
|
|
2191
2225
|
}
|
|
2192
2226
|
);
|
|
2193
2227
|
}
|
|
@@ -3123,7 +3157,7 @@ import { memo as memo5, useCallback as useCallback7, useMemo as useMemo12, useSt
|
|
|
3123
3157
|
var styles_module_default12 = { "MenuBar": "_MenuBar_1m2ld_1", "MenuBar--menuOpen": "_MenuBar--menuOpen_1m2ld_14", "MenuBar-inner": "_MenuBar-inner_1m2ld_29", "MenuBar-history": "_MenuBar-history_1m2ld_45" };
|
|
3124
3158
|
|
|
3125
3159
|
// components/MenuBar/index.tsx
|
|
3126
|
-
import { Fragment as Fragment7, jsx as jsx20, jsxs as
|
|
3160
|
+
import { Fragment as Fragment7, jsx as jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
3127
3161
|
var getClassName12 = get_class_name_factory_default("MenuBar", styles_module_default12);
|
|
3128
3162
|
function MenuBar({
|
|
3129
3163
|
menuOpen = false,
|
|
@@ -3147,8 +3181,8 @@ function MenuBar({
|
|
|
3147
3181
|
setMenuOpen(false);
|
|
3148
3182
|
}
|
|
3149
3183
|
},
|
|
3150
|
-
children: /* @__PURE__ */
|
|
3151
|
-
/* @__PURE__ */
|
|
3184
|
+
children: /* @__PURE__ */ jsxs8("div", { className: getClassName12("inner"), children: [
|
|
3185
|
+
/* @__PURE__ */ jsxs8("div", { className: getClassName12("history"), children: [
|
|
3152
3186
|
/* @__PURE__ */ jsx20(
|
|
3153
3187
|
IconButton,
|
|
3154
3188
|
{
|
|
@@ -3183,7 +3217,7 @@ import { useEffect as useEffect10, useMemo as useMemo10, useState as useState10
|
|
|
3183
3217
|
var styles_module_default13 = { "ViewportControls": "_ViewportControls_gefvg_1", "ViewportControls--fullScreen": "_ViewportControls--fullScreen_gefvg_5", "ViewportControls-toggleButton": "_ViewportControls-toggleButton_gefvg_14", "ViewportControls--isExpanded": "_ViewportControls--isExpanded_gefvg_38", "ViewportControls-actions": "_ViewportControls-actions_gefvg_42", "ViewportControls-actionsInner": "_ViewportControls-actionsInner_gefvg_46", "ViewportControls-divider": "_ViewportControls-divider_gefvg_76", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_gefvg_83", "ViewportControls-zoom": "_ViewportControls-zoom_gefvg_83", "ViewportButton-inner": "_ViewportButton-inner_gefvg_114", "ViewportButton--isActive": "_ViewportButton--isActive_gefvg_122" };
|
|
3184
3218
|
|
|
3185
3219
|
// components/ViewportControls/index.tsx
|
|
3186
|
-
import { jsx as jsx21, jsxs as
|
|
3220
|
+
import { jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
3187
3221
|
var icons = {
|
|
3188
3222
|
Smartphone: /* @__PURE__ */ jsx21(Smartphone, { size: 16 }),
|
|
3189
3223
|
Tablet: /* @__PURE__ */ jsx21(Tablet, { size: 16 }),
|
|
@@ -3251,13 +3285,13 @@ var ViewportControls = ({
|
|
|
3251
3285
|
setActiveViewport(uiViewports.current.width);
|
|
3252
3286
|
}, [uiViewports.current.width, uiViewports]);
|
|
3253
3287
|
const [isExpanded, setIsExpanded] = useState10(false);
|
|
3254
|
-
return /* @__PURE__ */
|
|
3288
|
+
return /* @__PURE__ */ jsxs9(
|
|
3255
3289
|
"div",
|
|
3256
3290
|
{
|
|
3257
3291
|
className: getClassName13({ isExpanded, fullScreen }),
|
|
3258
3292
|
suppressHydrationWarning: true,
|
|
3259
3293
|
children: [
|
|
3260
|
-
/* @__PURE__ */ jsx21("div", { className: getClassName13("actions"), children: /* @__PURE__ */
|
|
3294
|
+
/* @__PURE__ */ jsx21("div", { className: getClassName13("actions"), children: /* @__PURE__ */ jsxs9("div", { className: getClassName13("actionsInner"), children: [
|
|
3261
3295
|
viewports.map((viewport, i) => /* @__PURE__ */ jsx21(
|
|
3262
3296
|
ActionButton,
|
|
3263
3297
|
{
|
|
@@ -3306,7 +3340,7 @@ var ViewportControls = ({
|
|
|
3306
3340
|
children: /* @__PURE__ */ jsx21(ZoomIn, { size: 16 })
|
|
3307
3341
|
}
|
|
3308
3342
|
),
|
|
3309
|
-
/* @__PURE__ */
|
|
3343
|
+
/* @__PURE__ */ jsxs9("div", { className: getClassName13("zoom"), children: [
|
|
3310
3344
|
/* @__PURE__ */ jsx21("div", { className: getClassName13("divider") }),
|
|
3311
3345
|
/* @__PURE__ */ jsx21(
|
|
3312
3346
|
"select",
|
|
@@ -3382,7 +3416,7 @@ var useCanvasFrame = () => {
|
|
|
3382
3416
|
var styles_module_default14 = { "CredBuildHeader": "_CredBuildHeader_qzv5u_1", "CredBuildHeader-inner": "_CredBuildHeader-inner_qzv5u_20", "CredBuildHeader-viewportTools": "_CredBuildHeader-viewportTools_qzv5u_28", "CredBuildHeader-leftActions": "_CredBuildHeader-leftActions_qzv5u_35", "CredBuildHeader-toggle": "_CredBuildHeader-toggle_qzv5u_41", "CredBuildHeader-leftSideBarToggle": "_CredBuildHeader-leftSideBarToggle_qzv5u_47", "CredBuildHeader-rightSideBarToggle": "_CredBuildHeader-rightSideBarToggle_qzv5u_48", "CredBuildHeader-title": "_CredBuildHeader-title_qzv5u_52", "CredBuildHeader-path": "_CredBuildHeader-path_qzv5u_57", "CredBuildHeader-tools": "_CredBuildHeader-tools_qzv5u_68", "CredBuildHeader-menuButton": "_CredBuildHeader-menuButton_qzv5u_75" };
|
|
3383
3417
|
|
|
3384
3418
|
// components/CredBuild/components/Header/index.tsx
|
|
3385
|
-
import { Fragment as Fragment8, jsx as jsx23, jsxs as
|
|
3419
|
+
import { Fragment as Fragment8, jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
3386
3420
|
var getClassName14 = get_class_name_factory_default("CredBuildHeader", styles_module_default14);
|
|
3387
3421
|
var HeaderInner = ({
|
|
3388
3422
|
hidePlugins,
|
|
@@ -3516,7 +3550,7 @@ var HeaderInner = ({
|
|
|
3516
3550
|
return /* @__PURE__ */ jsx23(
|
|
3517
3551
|
CustomHeader,
|
|
3518
3552
|
{
|
|
3519
|
-
actions: /* @__PURE__ */ jsx23(Fragment8, { children: /* @__PURE__ */
|
|
3553
|
+
actions: /* @__PURE__ */ jsx23(Fragment8, { children: /* @__PURE__ */ jsxs10(CustomHeaderActions, { children: [
|
|
3520
3554
|
/* @__PURE__ */ jsx23(
|
|
3521
3555
|
Button,
|
|
3522
3556
|
{
|
|
@@ -3549,9 +3583,9 @@ var HeaderInner = ({
|
|
|
3549
3583
|
rightSideBarVisible,
|
|
3550
3584
|
hidePlugins
|
|
3551
3585
|
}),
|
|
3552
|
-
children: /* @__PURE__ */
|
|
3553
|
-
/* @__PURE__ */
|
|
3554
|
-
/* @__PURE__ */
|
|
3586
|
+
children: /* @__PURE__ */ jsxs10("div", { className: getClassName14("inner"), children: [
|
|
3587
|
+
/* @__PURE__ */ jsxs10("div", { className: getClassName14("leftActions"), children: [
|
|
3588
|
+
/* @__PURE__ */ jsxs10("div", { style: { marginRight: "8px", display: "flex", gap: "8px", alignItems: "center" }, children: [
|
|
3555
3589
|
/* @__PURE__ */ jsx23(
|
|
3556
3590
|
Button,
|
|
3557
3591
|
{
|
|
@@ -3584,7 +3618,7 @@ var HeaderInner = ({
|
|
|
3584
3618
|
}
|
|
3585
3619
|
)
|
|
3586
3620
|
] }),
|
|
3587
|
-
/* @__PURE__ */
|
|
3621
|
+
/* @__PURE__ */ jsxs10("div", { className: getClassName14("toggle"), children: [
|
|
3588
3622
|
/* @__PURE__ */ jsx23("div", { className: getClassName14("leftSideBarToggle"), children: /* @__PURE__ */ jsx23(
|
|
3589
3623
|
IconButton,
|
|
3590
3624
|
{
|
|
@@ -3608,25 +3642,25 @@ var HeaderInner = ({
|
|
|
3608
3642
|
}
|
|
3609
3643
|
) })
|
|
3610
3644
|
] }),
|
|
3611
|
-
/* @__PURE__ */ jsx23("div", { className: getClassName14("title"), children: /* @__PURE__ */
|
|
3645
|
+
/* @__PURE__ */ jsx23("div", { className: getClassName14("title"), children: /* @__PURE__ */ jsxs10(Heading, { rank: "2", size: "xs", children: [
|
|
3612
3646
|
/* @__PURE__ */ jsx23("span", { style: { fontSize: "11px", textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 600 }, children: headerTitle || rootTitle || "Page" }),
|
|
3613
3647
|
headerPath && /* @__PURE__ */ jsx23(Fragment8, { children: /* @__PURE__ */ jsx23("code", { className: getClassName14("path"), style: { fontSize: "10px", opacity: 0.6, marginLeft: "8px" }, children: headerPath }) })
|
|
3614
3648
|
] }) })
|
|
3615
3649
|
] }),
|
|
3616
|
-
/* @__PURE__ */
|
|
3617
|
-
isHtmlMode && /* @__PURE__ */
|
|
3650
|
+
/* @__PURE__ */ jsxs10("div", { className: getClassName14("viewportTools"), style: { display: "flex", gap: "16px", alignItems: "center" }, children: [
|
|
3651
|
+
isHtmlMode && /* @__PURE__ */ jsxs10("div", { style: {
|
|
3618
3652
|
display: "flex",
|
|
3619
3653
|
alignItems: "center",
|
|
3620
3654
|
gap: "8px"
|
|
3621
3655
|
}, children: [
|
|
3622
|
-
/* @__PURE__ */
|
|
3656
|
+
/* @__PURE__ */ jsxs10("div", { style: {
|
|
3623
3657
|
display: "flex",
|
|
3624
3658
|
background: "var(--credbuild-color-grey-09)",
|
|
3625
3659
|
padding: 2,
|
|
3626
3660
|
borderRadius: 6,
|
|
3627
3661
|
border: "1px solid var(--credbuild-color-grey-10)"
|
|
3628
3662
|
}, children: [
|
|
3629
|
-
/* @__PURE__ */
|
|
3663
|
+
/* @__PURE__ */ jsxs10(
|
|
3630
3664
|
"button",
|
|
3631
3665
|
{
|
|
3632
3666
|
type: "button",
|
|
@@ -3653,7 +3687,7 @@ var HeaderInner = ({
|
|
|
3653
3687
|
]
|
|
3654
3688
|
}
|
|
3655
3689
|
),
|
|
3656
|
-
/* @__PURE__ */
|
|
3690
|
+
/* @__PURE__ */ jsxs10(
|
|
3657
3691
|
"button",
|
|
3658
3692
|
{
|
|
3659
3693
|
type: "button",
|
|
@@ -3720,7 +3754,7 @@ var HeaderInner = ({
|
|
|
3720
3754
|
}
|
|
3721
3755
|
)
|
|
3722
3756
|
] }),
|
|
3723
|
-
/* @__PURE__ */
|
|
3757
|
+
/* @__PURE__ */ jsxs10("div", { className: getClassName14("tools"), children: [
|
|
3724
3758
|
/* @__PURE__ */ jsx23("div", { className: getClassName14("menuButton"), children: /* @__PURE__ */ jsx23(
|
|
3725
3759
|
IconButton,
|
|
3726
3760
|
{
|
|
@@ -3738,7 +3772,7 @@ var HeaderInner = ({
|
|
|
3738
3772
|
dispatch,
|
|
3739
3773
|
onPublish,
|
|
3740
3774
|
menuOpen,
|
|
3741
|
-
renderHeaderActions: () => /* @__PURE__ */
|
|
3775
|
+
renderHeaderActions: () => /* @__PURE__ */ jsxs10(CustomHeaderActions, { children: [
|
|
3742
3776
|
/* @__PURE__ */ jsx23(
|
|
3743
3777
|
Button,
|
|
3744
3778
|
{
|
|
@@ -3779,7 +3813,7 @@ var Header = memo5(HeaderInner);
|
|
|
3779
3813
|
var styles_module_default15 = { "SidebarSection": "_SidebarSection_bv89x_1", "SidebarSection-title": "_SidebarSection-title_bv89x_12", "SidebarSection--noBorderTop": "_SidebarSection--noBorderTop_bv89x_37", "SidebarSection-content": "_SidebarSection-content_bv89x_41", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_bv89x_50", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_bv89x_79", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_bv89x_50", "SidebarSection-heading": "_SidebarSection-heading_bv89x_91", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_bv89x_95" };
|
|
3780
3814
|
|
|
3781
3815
|
// components/SidebarSection/index.tsx
|
|
3782
|
-
import { jsx as jsx24, jsxs as
|
|
3816
|
+
import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
3783
3817
|
var getClassName15 = get_class_name_factory_default("SidebarSection", styles_module_default15);
|
|
3784
3818
|
var SidebarSection = ({
|
|
3785
3819
|
children,
|
|
@@ -3789,8 +3823,8 @@ var SidebarSection = ({
|
|
|
3789
3823
|
noBorderTop,
|
|
3790
3824
|
isLoading
|
|
3791
3825
|
}) => {
|
|
3792
|
-
return /* @__PURE__ */
|
|
3793
|
-
/* @__PURE__ */ jsx24("div", { className: getClassName15("title"), children: /* @__PURE__ */
|
|
3826
|
+
return /* @__PURE__ */ jsxs11("div", { className: getClassName15({ noBorderTop }), style: { background }, children: [
|
|
3827
|
+
/* @__PURE__ */ jsx24("div", { className: getClassName15("title"), children: /* @__PURE__ */ jsxs11("div", { className: getClassName15("breadcrumbs"), children: [
|
|
3794
3828
|
showBreadcrumbs && /* @__PURE__ */ jsx24(Breadcrumbs, {}),
|
|
3795
3829
|
/* @__PURE__ */ jsx24("div", { className: getClassName15("heading"), children: /* @__PURE__ */ jsx24(Heading, { rank: "2", size: "xs", children: title }) })
|
|
3796
3830
|
] }) }),
|
|
@@ -3813,7 +3847,7 @@ var styles_module_default16 = { "CredBuildCanvas": "_CredBuildCanvas_1ivia_1", "
|
|
|
3813
3847
|
|
|
3814
3848
|
// components/CredBuild/components/Canvas/index.tsx
|
|
3815
3849
|
import { useShallow as useShallow4 } from "zustand/react/shallow";
|
|
3816
|
-
import { Fragment as Fragment9, jsx as jsx25, jsxs as
|
|
3850
|
+
import { Fragment as Fragment9, jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
3817
3851
|
var getClassName16 = get_class_name_factory_default("CredBuildCanvas", styles_module_default16);
|
|
3818
3852
|
var ZOOM_ON_CHANGE = true;
|
|
3819
3853
|
var TRANSITION_DURATION = 150;
|
|
@@ -3859,6 +3893,10 @@ var Canvas = () => {
|
|
|
3859
3893
|
root: s.state.data.root
|
|
3860
3894
|
}))
|
|
3861
3895
|
);
|
|
3896
|
+
const rootProps = root?.props || root;
|
|
3897
|
+
const isHtmlMode = rootProps?.mode === "html";
|
|
3898
|
+
const htmlViewMode = rootProps?.htmlViewMode || (rootProps?.htmlCode ? "preview" : "code");
|
|
3899
|
+
const isHtmlCodeEditActive = isHtmlMode && htmlViewMode === "code";
|
|
3862
3900
|
const isNonFullWidth = viewports.current.width !== "100%";
|
|
3863
3901
|
const shouldApplyViewport = true;
|
|
3864
3902
|
const [showTransition, setShowTransition] = useState12(false);
|
|
@@ -4044,6 +4082,7 @@ var Canvas = () => {
|
|
|
4044
4082
|
showLoader,
|
|
4045
4083
|
fullScreen: _experimentalFullScreenCanvas
|
|
4046
4084
|
}),
|
|
4085
|
+
style: isHtmlCodeEditActive ? { overflow: "hidden" } : void 0,
|
|
4047
4086
|
onClick: (e) => {
|
|
4048
4087
|
const el = e.target;
|
|
4049
4088
|
if (!el.hasAttribute("data-credbuild-component") && !el.hasAttribute("data-credbuild-dropzone")) {
|
|
@@ -4054,30 +4093,41 @@ var Canvas = () => {
|
|
|
4054
4093
|
});
|
|
4055
4094
|
}
|
|
4056
4095
|
},
|
|
4057
|
-
children: /* @__PURE__ */
|
|
4058
|
-
|
|
4059
|
-
|
|
4060
|
-
|
|
4061
|
-
|
|
4062
|
-
|
|
4063
|
-
|
|
4064
|
-
|
|
4065
|
-
|
|
4066
|
-
|
|
4067
|
-
|
|
4068
|
-
|
|
4069
|
-
|
|
4070
|
-
|
|
4071
|
-
|
|
4072
|
-
|
|
4073
|
-
|
|
4074
|
-
|
|
4075
|
-
|
|
4076
|
-
|
|
4077
|
-
|
|
4078
|
-
|
|
4079
|
-
|
|
4080
|
-
|
|
4096
|
+
children: /* @__PURE__ */ jsxs12(
|
|
4097
|
+
"div",
|
|
4098
|
+
{
|
|
4099
|
+
className: getClassName16("inner"),
|
|
4100
|
+
ref: frameRef,
|
|
4101
|
+
style: {
|
|
4102
|
+
minHeight: "100%",
|
|
4103
|
+
height: isHtmlCodeEditActive ? "100%" : !zoomConfig.rootHeight || isNaN(zoomConfig.rootHeight) ? "100%" : `${zoomConfig.rootHeight * zoomConfig.zoom}px`
|
|
4104
|
+
},
|
|
4105
|
+
children: [
|
|
4106
|
+
/* @__PURE__ */ jsx25(
|
|
4107
|
+
"div",
|
|
4108
|
+
{
|
|
4109
|
+
className: getClassName16("root"),
|
|
4110
|
+
style: {
|
|
4111
|
+
width: isHtmlCodeEditActive ? "100%" : viewports.current.width || "100%",
|
|
4112
|
+
height: isHtmlCodeEditActive ? "100%" : !zoomConfig.rootHeight || isNaN(zoomConfig.rootHeight) ? "100%" : zoomConfig.rootHeight,
|
|
4113
|
+
minHeight: "100%",
|
|
4114
|
+
transform: isHtmlCodeEditActive ? "none" : `scale(${zoomConfig.zoom})`,
|
|
4115
|
+
transition: showTransition ? `width ${TRANSITION_DURATION}ms ease-out, height ${TRANSITION_DURATION}ms ease-out, transform ${TRANSITION_DURATION}ms ease-out` : "",
|
|
4116
|
+
overflow: isHtmlCodeEditActive ? "hidden" : isNonFullWidth ? void 0 : "auto"
|
|
4117
|
+
},
|
|
4118
|
+
suppressHydrationWarning: true,
|
|
4119
|
+
id: "credbuild-canvas-root",
|
|
4120
|
+
onTransitionEnd: () => {
|
|
4121
|
+
setShowTransition(false);
|
|
4122
|
+
isResizingRef.current = false;
|
|
4123
|
+
},
|
|
4124
|
+
children: /* @__PURE__ */ jsx25(CustomPreview, { children: /* @__PURE__ */ jsx25(Preview, {}) })
|
|
4125
|
+
}
|
|
4126
|
+
),
|
|
4127
|
+
/* @__PURE__ */ jsx25("div", { className: getClassName16("loader"), children: /* @__PURE__ */ jsx25(Loader, { size: 24 }) })
|
|
4128
|
+
]
|
|
4129
|
+
}
|
|
4130
|
+
)
|
|
4081
4131
|
}
|
|
4082
4132
|
);
|
|
4083
4133
|
};
|
|
@@ -4241,7 +4291,7 @@ var ResizeHandle = ({
|
|
|
4241
4291
|
var styles_module_default18 = { "Sidebar": "_Sidebar_1kcif_1", "Sidebar--isVisible": "_Sidebar--isVisible_1kcif_13", "Sidebar--left": "_Sidebar--left_1kcif_17", "Sidebar--right": "_Sidebar--right_1kcif_29", "Sidebar-resizeHandle": "_Sidebar-resizeHandle_1kcif_42" };
|
|
4242
4292
|
|
|
4243
4293
|
// components/CredBuild/components/Sidebar/index.tsx
|
|
4244
|
-
import { Fragment as Fragment10, jsx as jsx27, jsxs as
|
|
4294
|
+
import { Fragment as Fragment10, jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
4245
4295
|
var getClassName18 = get_class_name_factory_default("Sidebar", styles_module_default18);
|
|
4246
4296
|
var Sidebar = ({
|
|
4247
4297
|
position,
|
|
@@ -4251,7 +4301,7 @@ var Sidebar = ({
|
|
|
4251
4301
|
onResizeEnd,
|
|
4252
4302
|
children
|
|
4253
4303
|
}) => {
|
|
4254
|
-
return /* @__PURE__ */
|
|
4304
|
+
return /* @__PURE__ */ jsxs13(Fragment10, { children: [
|
|
4255
4305
|
/* @__PURE__ */ jsx27(
|
|
4256
4306
|
"div",
|
|
4257
4307
|
{
|
|
@@ -4334,7 +4384,7 @@ var useDeleteHotkeys = () => {
|
|
|
4334
4384
|
var styles_module_default19 = { "Nav": "_Nav_wbh7e_1", "Nav-list": "_Nav-list_wbh7e_9", "CredBuildHeader-path": "_CredBuildHeader-path_wbh7e_20", "NavItem": "_NavItem_wbh7e_38", "NavItem-link": "_NavItem-link_wbh7e_43", "NavItem-linkIcon": "_NavItem-linkIcon_wbh7e_64", "NavItem--active": "_NavItem--active_wbh7e_77", "NavItem--mobileOnly": "_NavItem--mobileOnly_wbh7e_90", "NavItem--desktopOnly": "_NavItem--desktopOnly_wbh7e_95" };
|
|
4335
4385
|
|
|
4336
4386
|
// components/CredBuild/components/Nav/index.tsx
|
|
4337
|
-
import { jsx as jsx28, jsxs as
|
|
4387
|
+
import { jsx as jsx28, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
4338
4388
|
var getClassName19 = get_class_name_factory_default("Nav", styles_module_default19);
|
|
4339
4389
|
var getClassNameItem = get_class_name_factory_default("NavItem", styles_module_default19);
|
|
4340
4390
|
var MenuItem = ({
|
|
@@ -4361,14 +4411,14 @@ var Nav = ({
|
|
|
4361
4411
|
items,
|
|
4362
4412
|
mobileActions
|
|
4363
4413
|
}) => {
|
|
4364
|
-
return /* @__PURE__ */
|
|
4414
|
+
return /* @__PURE__ */ jsxs14("nav", { className: getClassName19(), children: [
|
|
4365
4415
|
/* @__PURE__ */ jsx28("ul", { className: getClassName19("list"), children: Object.entries(items).map(([key, item]) => /* @__PURE__ */ jsx28(MenuItem, { ...item }, key)) }),
|
|
4366
4416
|
mobileActions && /* @__PURE__ */ jsx28("div", { className: getClassName19("mobileActions"), children: mobileActions })
|
|
4367
4417
|
] });
|
|
4368
4418
|
};
|
|
4369
4419
|
|
|
4370
4420
|
// components/CredBuild/components/Layout/index.tsx
|
|
4371
|
-
import { jsx as jsx29, jsxs as
|
|
4421
|
+
import { jsx as jsx29, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
4372
4422
|
var getClassName20 = get_class_name_factory_default("CredBuild", styles_module_default11);
|
|
4373
4423
|
var getLayoutClassName = get_class_name_factory_default("CredBuildLayout", styles_module_default11);
|
|
4374
4424
|
var getPluginTabClassName = get_class_name_factory_default("CredBuildPluginTab", styles_module_default11);
|
|
@@ -4556,7 +4606,7 @@ var Layout = ({ children }) => {
|
|
|
4556
4606
|
const mobilePanelExpanded = useAppStore(
|
|
4557
4607
|
(s) => s.state.ui.mobilePanelExpanded ?? false
|
|
4558
4608
|
);
|
|
4559
|
-
return /* @__PURE__ */
|
|
4609
|
+
return /* @__PURE__ */ jsxs15(
|
|
4560
4610
|
"div",
|
|
4561
4611
|
{
|
|
4562
4612
|
className: `CredBuild ${theme === "dark" ? "dark" : ""} ${getClassName20({
|
|
@@ -4578,14 +4628,14 @@ var Layout = ({ children }) => {
|
|
|
4578
4628
|
mobilePanelHeightMinContent: mobilePanelHeightMode === "min-content"
|
|
4579
4629
|
}),
|
|
4580
4630
|
style: { height: typeof height === "number" && isNaN(height) ? void 0 : height },
|
|
4581
|
-
children: /* @__PURE__ */
|
|
4631
|
+
children: /* @__PURE__ */ jsxs15(
|
|
4582
4632
|
"div",
|
|
4583
4633
|
{
|
|
4584
4634
|
className: getLayoutClassName("inner"),
|
|
4585
4635
|
style: layoutOptions,
|
|
4586
4636
|
children: [
|
|
4587
4637
|
/* @__PURE__ */ jsx29("div", { className: getLayoutClassName("header"), children: /* @__PURE__ */ jsx29(Header, { theme, hidePlugins: hasLegacySideBarPlugin }) }),
|
|
4588
|
-
/* @__PURE__ */
|
|
4638
|
+
/* @__PURE__ */ jsxs15(
|
|
4589
4639
|
Sidebar,
|
|
4590
4640
|
{
|
|
4591
4641
|
position: "left",
|
|
@@ -4846,10 +4896,10 @@ CredBuild.Outline = Outline;
|
|
|
4846
4896
|
CredBuild.Preview = Preview;
|
|
4847
4897
|
|
|
4848
4898
|
// plugins/legacy-side-bar/index.tsx
|
|
4849
|
-
import { jsx as jsx31, jsxs as
|
|
4899
|
+
import { jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
4850
4900
|
var legacySideBarPlugin = () => ({
|
|
4851
4901
|
name: "legacy-side-bar",
|
|
4852
|
-
render: () => /* @__PURE__ */
|
|
4902
|
+
render: () => /* @__PURE__ */ jsxs16("div", { style: { overflowY: "auto" }, children: [
|
|
4853
4903
|
/* @__PURE__ */ jsx31(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ jsx31(Components, {}) }),
|
|
4854
4904
|
/* @__PURE__ */ jsx31(SidebarSection, { title: "Outline", children: /* @__PURE__ */ jsx31(Outline, {}) })
|
|
4855
4905
|
] })
|