@ohhwells/bridge 0.1.124-next.344 → 0.1.125
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/index.cjs +702 -1384
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +715 -1397
- package/dist/index.js.map +1 -1
- package/dist/pages.cjs +1 -1
- package/dist/pages.cjs.map +1 -1
- package/dist/pages.js +1 -1
- package/dist/pages.js.map +1 -1
- package/dist/styles.css +0 -43
- package/package.json +3 -3
package/dist/index.cjs
CHANGED
|
@@ -75,7 +75,7 @@ __export(index_exports, {
|
|
|
75
75
|
module.exports = __toCommonJS(index_exports);
|
|
76
76
|
|
|
77
77
|
// src/OhhwellsBridge.tsx
|
|
78
|
-
var
|
|
78
|
+
var import_react19 = __toESM(require("react"), 1);
|
|
79
79
|
var import_client2 = require("react-dom/client");
|
|
80
80
|
var import_react_dom4 = require("react-dom");
|
|
81
81
|
|
|
@@ -296,14 +296,10 @@ function reapRemovedAiSections(state, store, removedIds, excludeIds = /* @__PURE
|
|
|
296
296
|
var BRAND_NAME_KEY = "__ohw_brand_name";
|
|
297
297
|
var BRAND_TITLE_KEY = "__ohw_site_title";
|
|
298
298
|
var BRAND_FAVICON_LETTER_KEY = "__ohw_favicon_letter";
|
|
299
|
-
var SITE_DESCRIPTION_KEY = "__ohw_site_description";
|
|
300
|
-
var SITE_OG_IMAGE_KEY = "__ohw_og_image";
|
|
301
299
|
var BRAND_CHROME_KEYS = /* @__PURE__ */ new Set([
|
|
302
300
|
BRAND_NAME_KEY,
|
|
303
301
|
BRAND_TITLE_KEY,
|
|
304
|
-
BRAND_FAVICON_LETTER_KEY
|
|
305
|
-
SITE_DESCRIPTION_KEY,
|
|
306
|
-
SITE_OG_IMAGE_KEY
|
|
302
|
+
BRAND_FAVICON_LETTER_KEY
|
|
307
303
|
]);
|
|
308
304
|
function upsertMeta(selector, attr, token, value) {
|
|
309
305
|
let el = document.head.querySelector(selector);
|
|
@@ -314,9 +310,6 @@ function upsertMeta(selector, attr, token, value) {
|
|
|
314
310
|
}
|
|
315
311
|
if (el.getAttribute("content") !== value) el.setAttribute("content", value);
|
|
316
312
|
}
|
|
317
|
-
function removeMeta(selector) {
|
|
318
|
-
document.head.querySelector(selector)?.remove();
|
|
319
|
-
}
|
|
320
313
|
function escapeXml(value) {
|
|
321
314
|
return value.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
|
|
322
315
|
}
|
|
@@ -332,22 +325,6 @@ function applyLetterFavicon(letter) {
|
|
|
332
325
|
link.type = "image/svg+xml";
|
|
333
326
|
if (link.href !== href) link.href = href;
|
|
334
327
|
}
|
|
335
|
-
function applyDescription(description) {
|
|
336
|
-
if (!description) return;
|
|
337
|
-
upsertMeta('meta[name="description"]', "name", "description", description);
|
|
338
|
-
upsertMeta('meta[property="og:description"]', "property", "og:description", description);
|
|
339
|
-
upsertMeta('meta[name="twitter:description"]', "name", "twitter:description", description);
|
|
340
|
-
}
|
|
341
|
-
function applyOgImage(url) {
|
|
342
|
-
if (url) {
|
|
343
|
-
upsertMeta('meta[property="og:image"]', "property", "og:image", url);
|
|
344
|
-
upsertMeta('meta[name="twitter:image"]', "name", "twitter:image", url);
|
|
345
|
-
upsertMeta('meta[name="twitter:card"]', "name", "twitter:card", "summary_large_image");
|
|
346
|
-
return;
|
|
347
|
-
}
|
|
348
|
-
removeMeta('meta[property="og:image"]');
|
|
349
|
-
removeMeta('meta[name="twitter:image"]');
|
|
350
|
-
}
|
|
351
328
|
function applyBrandChrome(content) {
|
|
352
329
|
const name = content[BRAND_NAME_KEY];
|
|
353
330
|
if (typeof name === "string" && name.length > 0) {
|
|
@@ -366,13 +343,6 @@ function applyBrandChrome(content) {
|
|
|
366
343
|
if (typeof letter === "string" && letter.length > 0) {
|
|
367
344
|
applyLetterFavicon(letter);
|
|
368
345
|
}
|
|
369
|
-
const description = content[SITE_DESCRIPTION_KEY];
|
|
370
|
-
if (typeof description === "string" && description.length > 0) {
|
|
371
|
-
applyDescription(description);
|
|
372
|
-
}
|
|
373
|
-
if (Object.prototype.hasOwnProperty.call(content, SITE_OG_IMAGE_KEY)) {
|
|
374
|
-
applyOgImage(String(content[SITE_OG_IMAGE_KEY] ?? "").trim());
|
|
375
|
-
}
|
|
376
346
|
}
|
|
377
347
|
|
|
378
348
|
// src/lib/brand-kit.ts
|
|
@@ -1783,22 +1753,6 @@ function pricingCardEmphasis(featured, ctx, hasBg) {
|
|
|
1783
1753
|
function textAttrs(ctx, path) {
|
|
1784
1754
|
return ctx.keyFor ? { "data-ohw-key": ctx.keyFor(path), "data-ohw-editable": "text" } : {};
|
|
1785
1755
|
}
|
|
1786
|
-
var AI_RESPONSIVE_CSS = [
|
|
1787
|
-
"@media (max-width: 960px) {",
|
|
1788
|
-
" [data-ai-responsive] [data-ai-grid] { grid-template-columns: repeat(2, 1fr) !important; }",
|
|
1789
|
-
' [data-ai-responsive] [data-ai-grid="1"] { grid-template-columns: 1fr !important; }',
|
|
1790
|
-
"}",
|
|
1791
|
-
"@media (max-width: 640px) {",
|
|
1792
|
-
" [data-ai-responsive] [data-ai-grid] { grid-template-columns: 1fr !important; }",
|
|
1793
|
-
" [data-ai-responsive] [data-ai-columns] > * { grid-column: 1 / -1 !important; }",
|
|
1794
|
-
// Group containers flatten to a column on phones; span placements come along for free.
|
|
1795
|
-
" [data-ai-responsive] [data-ai-group] { display: flex !important; flex-direction: column !important; }",
|
|
1796
|
-
" [data-ai-responsive] [data-ai-group] > * { grid-column: auto !important; }",
|
|
1797
|
-
" [data-ai-responsive] [data-ai-section-inner] { padding-left: 20px !important; padding-right: 20px !important; }",
|
|
1798
|
-
" [data-ai-responsive] { overflow-x: hidden; }",
|
|
1799
|
-
" [data-ai-responsive] img { max-width: 100%; }",
|
|
1800
|
-
"}"
|
|
1801
|
-
].join("\n");
|
|
1802
1756
|
var TRANSPARENT_PX = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
|
|
1803
1757
|
function MediaBox({
|
|
1804
1758
|
refValue,
|
|
@@ -1816,9 +1770,9 @@ function MediaBox({
|
|
|
1816
1770
|
const url = refValue ? ctx.resolveMedia(refValue) : null;
|
|
1817
1771
|
const isIcon = /^(lucide|simple):/.test(refValue);
|
|
1818
1772
|
const aspectRatio = aspect && /^\d+:\d+$/.test(aspect) ? aspect.replace(":", " / ") : void 0;
|
|
1819
|
-
const editAttrs = ctx.keyFor && editPath ? {
|
|
1773
|
+
const editAttrs = ctx.keyFor && editPath && !isIcon ? {
|
|
1820
1774
|
"data-ohw-key": ctx.keyFor(editPath),
|
|
1821
|
-
...
|
|
1775
|
+
...genericImageEdit ? { "data-ohw-editable": "image" } : {}
|
|
1822
1776
|
} : {};
|
|
1823
1777
|
if (isIcon) {
|
|
1824
1778
|
const Icon = refValue.startsWith("lucide:") ? lucideByName(refValue.slice(7)) : null;
|
|
@@ -1826,7 +1780,6 @@ function MediaBox({
|
|
|
1826
1780
|
"span",
|
|
1827
1781
|
{
|
|
1828
1782
|
"data-ai-icon": refValue,
|
|
1829
|
-
...editAttrs,
|
|
1830
1783
|
style: {
|
|
1831
1784
|
display: "inline-flex",
|
|
1832
1785
|
width: 48,
|
|
@@ -1878,112 +1831,6 @@ function MediaBox({
|
|
|
1878
1831
|
}
|
|
1879
1832
|
);
|
|
1880
1833
|
}
|
|
1881
|
-
function VideoEmbed({ slots, ctx, path }) {
|
|
1882
|
-
const [playing, setPlaying] = import_react.default.useState(false);
|
|
1883
|
-
const videoId = str(slots.videoId);
|
|
1884
|
-
const caption = str(slots.caption);
|
|
1885
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: AI_TREE_TOKENS.spacing3 }, children: [
|
|
1886
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1887
|
-
"div",
|
|
1888
|
-
{
|
|
1889
|
-
"data-ohw-video-block": "",
|
|
1890
|
-
"data-ohw-video-path": path,
|
|
1891
|
-
style: {
|
|
1892
|
-
position: "relative",
|
|
1893
|
-
width: "100%",
|
|
1894
|
-
aspectRatio: "16 / 9",
|
|
1895
|
-
borderRadius: AI_TREE_TOKENS.radiusCard,
|
|
1896
|
-
overflow: "hidden",
|
|
1897
|
-
background: "#DBEAFE"
|
|
1898
|
-
},
|
|
1899
|
-
children: !videoId ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1900
|
-
"div",
|
|
1901
|
-
{
|
|
1902
|
-
style: {
|
|
1903
|
-
position: "absolute",
|
|
1904
|
-
inset: 0,
|
|
1905
|
-
display: "flex",
|
|
1906
|
-
alignItems: "center",
|
|
1907
|
-
justifyContent: "center",
|
|
1908
|
-
color: "#93C5FD",
|
|
1909
|
-
fontSize: 13
|
|
1910
|
-
},
|
|
1911
|
-
children: "video"
|
|
1912
|
-
}
|
|
1913
|
-
) : playing ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1914
|
-
"iframe",
|
|
1915
|
-
{
|
|
1916
|
-
src: `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1&mute=1`,
|
|
1917
|
-
title: caption || "YouTube video",
|
|
1918
|
-
style: { position: "absolute", inset: 0, width: "100%", height: "100%", border: 0 },
|
|
1919
|
-
allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
|
|
1920
|
-
sandbox: "allow-scripts allow-same-origin allow-presentation allow-popups allow-popups-to-escape-sandbox",
|
|
1921
|
-
loading: "lazy"
|
|
1922
|
-
}
|
|
1923
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
1924
|
-
"button",
|
|
1925
|
-
{
|
|
1926
|
-
type: "button",
|
|
1927
|
-
onClick: () => setPlaying(true),
|
|
1928
|
-
"aria-label": "Play video",
|
|
1929
|
-
style: {
|
|
1930
|
-
position: "absolute",
|
|
1931
|
-
inset: 0,
|
|
1932
|
-
width: "100%",
|
|
1933
|
-
height: "100%",
|
|
1934
|
-
border: 0,
|
|
1935
|
-
padding: 0,
|
|
1936
|
-
margin: 0,
|
|
1937
|
-
cursor: "pointer",
|
|
1938
|
-
background: "none"
|
|
1939
|
-
},
|
|
1940
|
-
children: [
|
|
1941
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1942
|
-
"img",
|
|
1943
|
-
{
|
|
1944
|
-
src: `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`,
|
|
1945
|
-
alt: "",
|
|
1946
|
-
style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
|
|
1947
|
-
}
|
|
1948
|
-
),
|
|
1949
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1950
|
-
"span",
|
|
1951
|
-
{
|
|
1952
|
-
style: {
|
|
1953
|
-
position: "absolute",
|
|
1954
|
-
top: "50%",
|
|
1955
|
-
left: "50%",
|
|
1956
|
-
transform: "translate(-50%, -50%)",
|
|
1957
|
-
width: 64,
|
|
1958
|
-
height: 64,
|
|
1959
|
-
borderRadius: "50%",
|
|
1960
|
-
background: "rgba(0,0,0,0.65)",
|
|
1961
|
-
display: "flex",
|
|
1962
|
-
alignItems: "center",
|
|
1963
|
-
justifyContent: "center"
|
|
1964
|
-
},
|
|
1965
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Play, { size: 28, color: "#fff", fill: "#fff" })
|
|
1966
|
-
}
|
|
1967
|
-
)
|
|
1968
|
-
]
|
|
1969
|
-
}
|
|
1970
|
-
)
|
|
1971
|
-
}
|
|
1972
|
-
),
|
|
1973
|
-
caption && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1974
|
-
"div",
|
|
1975
|
-
{
|
|
1976
|
-
...textAttrs(ctx, `${path}.caption`),
|
|
1977
|
-
style: {
|
|
1978
|
-
...typeStyle(AI_TREE_TOKENS.type.bodyM, ctx.brand.fonts.body),
|
|
1979
|
-
color: ctx.brand.palette.dark,
|
|
1980
|
-
textAlign: "center"
|
|
1981
|
-
},
|
|
1982
|
-
children: caption
|
|
1983
|
-
}
|
|
1984
|
-
)
|
|
1985
|
-
] });
|
|
1986
|
-
}
|
|
1987
1834
|
function ButtonEl({
|
|
1988
1835
|
slots,
|
|
1989
1836
|
ctx,
|
|
@@ -2991,7 +2838,7 @@ function CollectionBlock({ node, ctx, path }) {
|
|
|
2991
2838
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2992
2839
|
"div",
|
|
2993
2840
|
{
|
|
2994
|
-
"data-ai-grid":
|
|
2841
|
+
"data-ai-grid": "",
|
|
2995
2842
|
"data-ohw-pricing-collection": isPricing ? "" : void 0,
|
|
2996
2843
|
style: {
|
|
2997
2844
|
display: "grid",
|
|
@@ -3064,8 +2911,6 @@ function renderNode(node, ctx, path) {
|
|
|
3064
2911
|
editPath: `${path}.source`
|
|
3065
2912
|
}
|
|
3066
2913
|
);
|
|
3067
|
-
case "video":
|
|
3068
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VideoEmbed, { slots, ctx, path });
|
|
3069
2914
|
case "media-list": {
|
|
3070
2915
|
const stacked = slots.layout === "stack";
|
|
3071
2916
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", gap: stacked ? 0 : AI_TREE_TOKENS.spacing3 }, children: (node.children ?? []).map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -3352,7 +3197,6 @@ function AiTreeRenderer({
|
|
|
3352
3197
|
{
|
|
3353
3198
|
"data-ai-section": tree.tag ?? "",
|
|
3354
3199
|
...bgAttrs,
|
|
3355
|
-
"data-ai-responsive": "",
|
|
3356
3200
|
style: {
|
|
3357
3201
|
position: "relative",
|
|
3358
3202
|
padding: `${pad}px 0`,
|
|
@@ -3363,13 +3207,12 @@ function AiTreeRenderer({
|
|
|
3363
3207
|
color: settings.sectionBackground === "accent" ? blockBrand.palette.dark : void 0
|
|
3364
3208
|
},
|
|
3365
3209
|
children: [
|
|
3366
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: AI_RESPONSIVE_CSS }),
|
|
3367
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: AI_MOBILE_CSS }),
|
|
3368
3210
|
isOverlay && backgroundUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { position: "absolute", inset: 0, background: `rgba(255,255,255,${overlayAlpha})` } }),
|
|
3211
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: AI_MOBILE_CSS }),
|
|
3369
3212
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
3370
3213
|
"div",
|
|
3371
3214
|
{
|
|
3372
|
-
"data-ai-
|
|
3215
|
+
"data-ai-container": "",
|
|
3373
3216
|
style: {
|
|
3374
3217
|
position: "relative",
|
|
3375
3218
|
maxWidth: AI_TREE_TOKENS.sectionMaxWidth,
|
|
@@ -3380,7 +3223,7 @@ function AiTreeRenderer({
|
|
|
3380
3223
|
children: tree.rows.map((row, r2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
3381
3224
|
"div",
|
|
3382
3225
|
{
|
|
3383
|
-
"data-ai-
|
|
3226
|
+
"data-ai-row": "",
|
|
3384
3227
|
style: {
|
|
3385
3228
|
display: "grid",
|
|
3386
3229
|
gridTemplateColumns: "repeat(12, 1fr)",
|
|
@@ -3784,10 +3627,9 @@ function applyAiSectionsToDom(state, options) {
|
|
|
3784
3627
|
if (existing && existing.serialized === serialized && existing.container.isConnected) {
|
|
3785
3628
|
continue;
|
|
3786
3629
|
}
|
|
3630
|
+
const isNewMount = !existing || !existing.container.isConnected;
|
|
3787
3631
|
let container = existing?.container;
|
|
3788
|
-
let isNewMount = false;
|
|
3789
3632
|
if (!container || !container.isConnected) {
|
|
3790
|
-
isNewMount = true;
|
|
3791
3633
|
existing?.root.unmount();
|
|
3792
3634
|
container?.remove();
|
|
3793
3635
|
container = document.createElement("div");
|
|
@@ -9682,7 +9524,6 @@ function MediaOverlay({
|
|
|
9682
9524
|
(prev) => prev && prev.fullWidth === width && prev.height === height ? prev : { fullWidth: width, height }
|
|
9683
9525
|
);
|
|
9684
9526
|
}, [isVideo]);
|
|
9685
|
-
const replaceLabel = isVideo ? "Replace video" : hover.elementType === "bg-image" ? "Replace background" : "Replace image";
|
|
9686
9527
|
const replaceMode = buttonSize ? replaceButtonMode({ width: rect.width, height: rect.height }, buttonSize) : "none";
|
|
9687
9528
|
const box = {
|
|
9688
9529
|
position: "fixed",
|
|
@@ -9781,10 +9622,11 @@ function MediaOverlay({
|
|
|
9781
9622
|
className: "flex items-center justify-center cursor-pointer",
|
|
9782
9623
|
style: {
|
|
9783
9624
|
...box,
|
|
9784
|
-
//
|
|
9785
|
-
//
|
|
9786
|
-
//
|
|
9787
|
-
|
|
9625
|
+
// When text overlays this media, let clicks fall THROUGH to the text underneath. In the
|
|
9626
|
+
// parent this needed a whole `ow:click-at` round-trip to re-hit-test inside the iframe;
|
|
9627
|
+
// in-document, pointer-events does it natively. The button below opts back in, so
|
|
9628
|
+
// Replace still works.
|
|
9629
|
+
pointerEvents: hover.hasTextOverlap || cueOnly ? "none" : "auto",
|
|
9788
9630
|
// Selected: a firm component ring with no wash, so the image reads as chosen rather
|
|
9789
9631
|
// than hovered. Hover keeps the existing tinted preview.
|
|
9790
9632
|
boxShadow: selected ? "inset 0 0 0 2px var(--color-bridge-primary)" : "inset 0 0 0 1.5px var(--color-bridge-primary)",
|
|
@@ -9811,17 +9653,17 @@ function MediaOverlay({
|
|
|
9811
9653
|
},
|
|
9812
9654
|
children: [
|
|
9813
9655
|
isVideo ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react5.Film, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react5.ImageIcon, { size: 14 }),
|
|
9814
|
-
|
|
9656
|
+
isVideo ? "Replace video" : "Replace image"
|
|
9815
9657
|
]
|
|
9816
9658
|
}
|
|
9817
9659
|
),
|
|
9818
|
-
|
|
9660
|
+
replaceMode === "none" || cueOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
9819
9661
|
Button,
|
|
9820
9662
|
{
|
|
9821
9663
|
"data-ohw-media-overlay": "",
|
|
9822
9664
|
variant: "outline",
|
|
9823
9665
|
size: "sm",
|
|
9824
|
-
"aria-label":
|
|
9666
|
+
"aria-label": isVideo ? "Replace video" : "Replace image",
|
|
9825
9667
|
className: "gap-1.5 cursor-pointer hover:bg-background",
|
|
9826
9668
|
style: {
|
|
9827
9669
|
...OVERLAY_BUTTON_STYLE,
|
|
@@ -9844,7 +9686,7 @@ function MediaOverlay({
|
|
|
9844
9686
|
},
|
|
9845
9687
|
children: [
|
|
9846
9688
|
isVideo ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react5.Film, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react5.ImageIcon, { size: 14 }),
|
|
9847
|
-
replaceMode === "full" ?
|
|
9689
|
+
replaceMode === "full" ? isVideo ? "Replace video" : hover.elementType === "bg-image" ? "Replace background" : "Replace image" : null
|
|
9848
9690
|
]
|
|
9849
9691
|
}
|
|
9850
9692
|
)
|
|
@@ -11553,503 +11395,11 @@ function AiPricingCardOverlay({
|
|
|
11553
11395
|
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
|
|
11554
11396
|
hoverHandleRect && hover && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
11555
11397
|
"button",
|
|
11556
|
-
{
|
|
11557
|
-
type: "button",
|
|
11558
|
-
"data-ohw-toolbar": "",
|
|
11559
|
-
onClick: () => setActive(hover),
|
|
11560
|
-
"aria-label": "Configure pricing tier",
|
|
11561
|
-
style: {
|
|
11562
|
-
position: "fixed",
|
|
11563
|
-
top: hoverHandleRect.top + 8,
|
|
11564
|
-
left: hoverHandleRect.left + hoverHandleRect.width - 36,
|
|
11565
|
-
width: 28,
|
|
11566
|
-
height: 28,
|
|
11567
|
-
borderRadius: 8,
|
|
11568
|
-
border: `1.5px dashed ${PRIMARY4}`,
|
|
11569
|
-
background: "#ffffff",
|
|
11570
|
-
color: PRIMARY4,
|
|
11571
|
-
display: "flex",
|
|
11572
|
-
alignItems: "center",
|
|
11573
|
-
justifyContent: "center",
|
|
11574
|
-
cursor: "pointer",
|
|
11575
|
-
zIndex: 2147483643,
|
|
11576
|
-
fontSize: 14,
|
|
11577
|
-
fontWeight: 700
|
|
11578
|
-
},
|
|
11579
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react9.Star, { size: 14, style: { pointerEvents: "none" } })
|
|
11580
|
-
}
|
|
11581
|
-
),
|
|
11582
|
-
activeCardRect && active && activeEntry && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
11583
|
-
ItemInteractionLayer,
|
|
11584
|
-
{
|
|
11585
|
-
rect: activeCardRect,
|
|
11586
|
-
state: "active-top",
|
|
11587
|
-
toolbar: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
11588
|
-
PricingCardToolbar,
|
|
11589
|
-
{
|
|
11590
|
-
entry: activeEntry,
|
|
11591
|
-
index: active.index,
|
|
11592
|
-
pending,
|
|
11593
|
-
error,
|
|
11594
|
-
onAddTier: () => runMutation(active.sectionId, addPricingTier),
|
|
11595
|
-
onRemoveTier: () => {
|
|
11596
|
-
void runMutation(active.sectionId, (tree) => removePricingTier(tree, active.index)).then(
|
|
11597
|
-
(applied) => {
|
|
11598
|
-
if (applied) setActive(null);
|
|
11599
|
-
}
|
|
11600
|
-
);
|
|
11601
|
-
},
|
|
11602
|
-
onToggleFeatured: (enabled) => runMutation(
|
|
11603
|
-
active.sectionId,
|
|
11604
|
-
(tree) => setPricingCardFeatured(tree, active.index, { enabled })
|
|
11605
|
-
),
|
|
11606
|
-
onSetTreatment: (treatment) => runMutation(
|
|
11607
|
-
active.sectionId,
|
|
11608
|
-
(tree) => setPricingCardFeatured(tree, active.index, { enabled: true, treatment })
|
|
11609
|
-
),
|
|
11610
|
-
onAddButton: () => runMutation(active.sectionId, (tree) => addPricingCardButton(tree, active.index, "Learn more")),
|
|
11611
|
-
onRemoveButton: () => runMutation(active.sectionId, (tree) => removePricingCardButton(tree, active.index)),
|
|
11612
|
-
onAddFeature: () => runMutation(active.sectionId, (tree) => addPricingCardFeature(tree, active.index, "New feature")),
|
|
11613
|
-
onRemoveFeature: () => runMutation(active.sectionId, (tree) => removePricingCardFeature(tree, active.index))
|
|
11614
|
-
}
|
|
11615
|
-
)
|
|
11616
|
-
}
|
|
11617
|
-
)
|
|
11618
|
-
] });
|
|
11619
|
-
}
|
|
11620
|
-
|
|
11621
|
-
// src/ui/ai-section/AiVideoOverlay.tsx
|
|
11622
|
-
var import_react11 = require("react");
|
|
11623
|
-
var import_lucide_react10 = require("lucide-react");
|
|
11624
|
-
|
|
11625
|
-
// src/lib/ai-video-tree.ts
|
|
11626
|
-
function resolveVideoBlock(tree, path) {
|
|
11627
|
-
const segments = path.split(".");
|
|
11628
|
-
const rowSeg = segments[0];
|
|
11629
|
-
const blockSeg = segments[1];
|
|
11630
|
-
if (!rowSeg?.startsWith("r") || !blockSeg?.startsWith("b")) return null;
|
|
11631
|
-
let node = tree.rows[Number(rowSeg.slice(1))]?.blocks[Number(blockSeg.slice(1))];
|
|
11632
|
-
for (const seg of segments.slice(2)) {
|
|
11633
|
-
if (!node || !seg.startsWith("c")) return null;
|
|
11634
|
-
node = node.children?.[Number(seg.slice(1))];
|
|
11635
|
-
}
|
|
11636
|
-
return node && node.type === "video" ? node : null;
|
|
11637
|
-
}
|
|
11638
|
-
function withVideo(tree, path, mutate) {
|
|
11639
|
-
const next = JSON.parse(JSON.stringify(tree));
|
|
11640
|
-
const block = resolveVideoBlock(next, path);
|
|
11641
|
-
if (!block) return null;
|
|
11642
|
-
block.slots = block.slots ?? {};
|
|
11643
|
-
return mutate(block) ? next : null;
|
|
11644
|
-
}
|
|
11645
|
-
function videoIdAt(tree, path) {
|
|
11646
|
-
const block = resolveVideoBlock(tree, path);
|
|
11647
|
-
const id = block?.slots?.videoId;
|
|
11648
|
-
return typeof id === "string" ? id : "";
|
|
11649
|
-
}
|
|
11650
|
-
function setVideoId(tree, path, videoId) {
|
|
11651
|
-
return withVideo(tree, path, (block) => {
|
|
11652
|
-
block.slots = { ...block.slots, videoId };
|
|
11653
|
-
return true;
|
|
11654
|
-
});
|
|
11655
|
-
}
|
|
11656
|
-
function clearVideo(tree, path) {
|
|
11657
|
-
return withVideo(tree, path, (block) => {
|
|
11658
|
-
const slots = { ...block.slots };
|
|
11659
|
-
delete slots.videoId;
|
|
11660
|
-
block.slots = slots;
|
|
11661
|
-
return true;
|
|
11662
|
-
});
|
|
11663
|
-
}
|
|
11664
|
-
|
|
11665
|
-
// src/lib/youtube.ts
|
|
11666
|
-
var YOUTUBE_ID_PATTERN = /^[A-Za-z0-9_-]{11}$/;
|
|
11667
|
-
function extractYouTubeId(input) {
|
|
11668
|
-
const trimmed = input.trim();
|
|
11669
|
-
if (!trimmed) return null;
|
|
11670
|
-
if (YOUTUBE_ID_PATTERN.test(trimmed)) return trimmed;
|
|
11671
|
-
let url;
|
|
11672
|
-
try {
|
|
11673
|
-
url = new URL(trimmed);
|
|
11674
|
-
} catch {
|
|
11675
|
-
return null;
|
|
11676
|
-
}
|
|
11677
|
-
const host = url.hostname.replace(/^www\./, "");
|
|
11678
|
-
if (host !== "youtube.com" && host !== "m.youtube.com" && host !== "youtu.be" && host !== "youtube-nocookie.com") {
|
|
11679
|
-
return null;
|
|
11680
|
-
}
|
|
11681
|
-
let candidate = null;
|
|
11682
|
-
if (host === "youtu.be") {
|
|
11683
|
-
candidate = url.pathname.slice(1).split("/")[0] ?? null;
|
|
11684
|
-
} else if (url.pathname === "/watch") {
|
|
11685
|
-
candidate = url.searchParams.get("v");
|
|
11686
|
-
} else {
|
|
11687
|
-
const match = url.pathname.match(/^\/(?:embed|shorts)\/([^/]+)/);
|
|
11688
|
-
candidate = match ? match[1] : null;
|
|
11689
|
-
}
|
|
11690
|
-
return candidate && YOUTUBE_ID_PATTERN.test(candidate) ? candidate : null;
|
|
11691
|
-
}
|
|
11692
|
-
|
|
11693
|
-
// src/ui/ai-section/AiVideoOverlay.tsx
|
|
11694
|
-
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
11695
|
-
var PRIMARY5 = "#0885FE";
|
|
11696
|
-
var OHW_BLUE3 = `var(--ohw-primary, ${PRIMARY5})`;
|
|
11697
|
-
var OHW_BLUE_DARK3 = `color-mix(in srgb, var(--ohw-primary, ${PRIMARY5}) 60%, #000000)`;
|
|
11698
|
-
function findVideoBlockElement(sectionId, path) {
|
|
11699
|
-
const sectionEl = findByInstanceId(sectionId);
|
|
11700
|
-
if (!sectionEl) return null;
|
|
11701
|
-
const items = sectionEl.querySelectorAll("[data-ohw-video-block]");
|
|
11702
|
-
for (const el of Array.from(items)) {
|
|
11703
|
-
if (el.dataset.ohwVideoPath === path) return el;
|
|
11704
|
-
}
|
|
11705
|
-
return null;
|
|
11706
|
-
}
|
|
11707
|
-
function readRect4(ref) {
|
|
11708
|
-
const el = ref && findVideoBlockElement(ref.sectionId, ref.path);
|
|
11709
|
-
if (!el) return null;
|
|
11710
|
-
const r2 = el.getBoundingClientRect();
|
|
11711
|
-
if (r2.width <= 0 || r2.height <= 0) return null;
|
|
11712
|
-
return { top: r2.top, left: r2.left, width: r2.width, height: r2.height };
|
|
11713
|
-
}
|
|
11714
|
-
function useLiveBlockRect(ref) {
|
|
11715
|
-
const [rect, setRect] = (0, import_react11.useState)(null);
|
|
11716
|
-
(0, import_react11.useEffect)(() => {
|
|
11717
|
-
if (!ref) {
|
|
11718
|
-
setRect(null);
|
|
11719
|
-
return;
|
|
11720
|
-
}
|
|
11721
|
-
const update = () => {
|
|
11722
|
-
const next = readRect4(ref);
|
|
11723
|
-
setRect(
|
|
11724
|
-
(prev) => prev && next && prev.top === next.top && prev.left === next.left && prev.width === next.width && prev.height === next.height ? prev : next
|
|
11725
|
-
);
|
|
11726
|
-
};
|
|
11727
|
-
update();
|
|
11728
|
-
const opts = { capture: true, passive: true };
|
|
11729
|
-
window.addEventListener("scroll", update, opts);
|
|
11730
|
-
window.addEventListener("resize", update);
|
|
11731
|
-
const interval = setInterval(update, 500);
|
|
11732
|
-
return () => {
|
|
11733
|
-
window.removeEventListener("scroll", update, opts);
|
|
11734
|
-
window.removeEventListener("resize", update);
|
|
11735
|
-
clearInterval(interval);
|
|
11736
|
-
};
|
|
11737
|
-
}, [ref?.sectionId, ref?.path]);
|
|
11738
|
-
return rect;
|
|
11739
|
-
}
|
|
11740
|
-
function requestValidateTree3(postToParent2, tree) {
|
|
11741
|
-
return new Promise((resolve) => {
|
|
11742
|
-
const id = `ai-validate-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
|
|
11743
|
-
const timeout = window.setTimeout(() => {
|
|
11744
|
-
window.removeEventListener("message", onMessage);
|
|
11745
|
-
resolve({ ok: false, reasons: ["Validation request timed out."] });
|
|
11746
|
-
}, 8e3);
|
|
11747
|
-
function onMessage(e) {
|
|
11748
|
-
if (e.data?.type !== "ow:ai-validate-tree-result" || e.data.id !== id) return;
|
|
11749
|
-
window.clearTimeout(timeout);
|
|
11750
|
-
window.removeEventListener("message", onMessage);
|
|
11751
|
-
resolve({ ok: e.data.ok === true, reasons: Array.isArray(e.data.reasons) ? e.data.reasons : [] });
|
|
11752
|
-
}
|
|
11753
|
-
window.addEventListener("message", onMessage);
|
|
11754
|
-
postToParent2({ type: "ow:ai-validate-tree-request", id, tree });
|
|
11755
|
-
});
|
|
11756
|
-
}
|
|
11757
|
-
function Pill3({
|
|
11758
|
-
label,
|
|
11759
|
-
onClick,
|
|
11760
|
-
disabled
|
|
11761
|
-
}) {
|
|
11762
|
-
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
11763
|
-
"button",
|
|
11764
|
-
{
|
|
11765
|
-
type: "button",
|
|
11766
|
-
onClick,
|
|
11767
|
-
disabled,
|
|
11768
|
-
style: {
|
|
11769
|
-
height: 28,
|
|
11770
|
-
padding: "0 10px",
|
|
11771
|
-
display: "inline-flex",
|
|
11772
|
-
alignItems: "center",
|
|
11773
|
-
gap: 4,
|
|
11774
|
-
borderRadius: 999,
|
|
11775
|
-
border: "none",
|
|
11776
|
-
cursor: disabled ? "default" : "pointer",
|
|
11777
|
-
background: "#ffffff",
|
|
11778
|
-
color: OHW_BLUE_DARK3,
|
|
11779
|
-
opacity: disabled ? 0.4 : 1,
|
|
11780
|
-
fontSize: 12,
|
|
11781
|
-
lineHeight: "16px",
|
|
11782
|
-
fontFamily: "Figtree, ui-sans-serif, system-ui, sans-serif",
|
|
11783
|
-
whiteSpace: "nowrap",
|
|
11784
|
-
flex: "0 0 auto"
|
|
11785
|
-
},
|
|
11786
|
-
children: label
|
|
11787
|
-
}
|
|
11788
|
-
);
|
|
11789
|
-
}
|
|
11790
|
-
function watchUrl(id) {
|
|
11791
|
-
return `https://www.youtube.com/watch?v=${id}`;
|
|
11792
|
-
}
|
|
11793
|
-
function VideoUrlInput({ value, onCommit }) {
|
|
11794
|
-
const [draft, setDraft] = (0, import_react11.useState)(value ? watchUrl(value) : "");
|
|
11795
|
-
const [invalid, setInvalid] = (0, import_react11.useState)(false);
|
|
11796
|
-
(0, import_react11.useEffect)(() => {
|
|
11797
|
-
setDraft(value ? watchUrl(value) : "");
|
|
11798
|
-
setInvalid(false);
|
|
11799
|
-
}, [value]);
|
|
11800
|
-
const commit = () => {
|
|
11801
|
-
const next = draft.trim();
|
|
11802
|
-
if (!next) {
|
|
11803
|
-
setInvalid(false);
|
|
11804
|
-
if (value) onCommit(null);
|
|
11805
|
-
return;
|
|
11806
|
-
}
|
|
11807
|
-
const id = extractYouTubeId(next);
|
|
11808
|
-
if (!id) return setInvalid(true);
|
|
11809
|
-
setInvalid(false);
|
|
11810
|
-
setDraft(watchUrl(id));
|
|
11811
|
-
if (id !== value) onCommit(id);
|
|
11812
|
-
};
|
|
11813
|
-
const handleChange = (next) => {
|
|
11814
|
-
setDraft(next);
|
|
11815
|
-
const id = extractYouTubeId(next.trim());
|
|
11816
|
-
if (id && id !== value) {
|
|
11817
|
-
setInvalid(false);
|
|
11818
|
-
onCommit(id);
|
|
11819
|
-
}
|
|
11820
|
-
};
|
|
11821
|
-
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 4, width: "100%", maxWidth: 280 }, children: [
|
|
11822
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
11823
|
-
"div",
|
|
11824
|
-
{
|
|
11825
|
-
style: {
|
|
11826
|
-
display: "flex",
|
|
11827
|
-
alignItems: "center",
|
|
11828
|
-
gap: 6,
|
|
11829
|
-
height: 28,
|
|
11830
|
-
padding: "0 12px",
|
|
11831
|
-
borderRadius: 999,
|
|
11832
|
-
background: "#ffffff",
|
|
11833
|
-
width: "100%",
|
|
11834
|
-
boxSizing: "border-box",
|
|
11835
|
-
boxShadow: invalid ? "inset 0 0 0 1.5px #EF4444" : "none"
|
|
11836
|
-
},
|
|
11837
|
-
children: [
|
|
11838
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
11839
|
-
"span",
|
|
11840
|
-
{
|
|
11841
|
-
style: {
|
|
11842
|
-
flex: "0 0 auto",
|
|
11843
|
-
color: OHW_BLUE_DARK3,
|
|
11844
|
-
fontSize: 10,
|
|
11845
|
-
lineHeight: "16px",
|
|
11846
|
-
fontWeight: 700,
|
|
11847
|
-
textTransform: "uppercase",
|
|
11848
|
-
letterSpacing: 0.4
|
|
11849
|
-
},
|
|
11850
|
-
children: "Video"
|
|
11851
|
-
}
|
|
11852
|
-
),
|
|
11853
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
11854
|
-
"input",
|
|
11855
|
-
{
|
|
11856
|
-
type: "text",
|
|
11857
|
-
inputMode: "url",
|
|
11858
|
-
value: draft,
|
|
11859
|
-
onChange: (e) => handleChange(e.target.value),
|
|
11860
|
-
onBlur: commit,
|
|
11861
|
-
onKeyDown: (e) => {
|
|
11862
|
-
if (e.key === "Enter") e.currentTarget.blur();
|
|
11863
|
-
if (e.key === "Escape") {
|
|
11864
|
-
setDraft(value ? watchUrl(value) : "");
|
|
11865
|
-
setInvalid(false);
|
|
11866
|
-
e.currentTarget.blur();
|
|
11867
|
-
}
|
|
11868
|
-
},
|
|
11869
|
-
placeholder: "Paste a YouTube URL",
|
|
11870
|
-
"aria-label": "YouTube video URL",
|
|
11871
|
-
"aria-invalid": invalid,
|
|
11872
|
-
style: {
|
|
11873
|
-
flex: 1,
|
|
11874
|
-
minWidth: 0,
|
|
11875
|
-
border: "none",
|
|
11876
|
-
outline: "none",
|
|
11877
|
-
background: "transparent",
|
|
11878
|
-
padding: 0,
|
|
11879
|
-
margin: 0,
|
|
11880
|
-
fontSize: 12,
|
|
11881
|
-
lineHeight: "16px",
|
|
11882
|
-
fontFamily: "Figtree, ui-sans-serif, system-ui, sans-serif",
|
|
11883
|
-
color: "#1f2937"
|
|
11884
|
-
}
|
|
11885
|
-
}
|
|
11886
|
-
)
|
|
11887
|
-
]
|
|
11888
|
-
}
|
|
11889
|
-
),
|
|
11890
|
-
invalid && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { color: "#FCA5A5", fontSize: 11, textAlign: "center" }, children: "That doesn't look like a YouTube link \u2014 try pasting the video URL again." })
|
|
11891
|
-
] });
|
|
11892
|
-
}
|
|
11893
|
-
function VideoToolbar({
|
|
11894
|
-
videoId,
|
|
11895
|
-
pending,
|
|
11896
|
-
error,
|
|
11897
|
-
onSetVideoId,
|
|
11898
|
-
onRemove
|
|
11899
|
-
}) {
|
|
11900
|
-
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
11901
|
-
"div",
|
|
11902
|
-
{
|
|
11903
|
-
"data-ohw-bridge": "",
|
|
11904
|
-
"data-ohw-toolbar": "",
|
|
11905
|
-
onMouseDown: (e) => e.stopPropagation(),
|
|
11906
|
-
style: {
|
|
11907
|
-
display: "flex",
|
|
11908
|
-
flexDirection: "column",
|
|
11909
|
-
gap: 6,
|
|
11910
|
-
alignItems: "center",
|
|
11911
|
-
width: 280,
|
|
11912
|
-
background: OHW_BLUE3,
|
|
11913
|
-
padding: 8,
|
|
11914
|
-
borderRadius: 12,
|
|
11915
|
-
boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
|
|
11916
|
-
pointerEvents: pending ? "none" : "auto",
|
|
11917
|
-
opacity: pending ? 0.6 : 1
|
|
11918
|
-
},
|
|
11919
|
-
children: [
|
|
11920
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(VideoUrlInput, { value: videoId, onCommit: onSetVideoId }),
|
|
11921
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Pill3, { label: "Remove video", onClick: onRemove, disabled: !videoId }),
|
|
11922
|
-
error && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { color: "#FCA5A5", fontSize: 11, maxWidth: 220, textAlign: "center" }, children: error })
|
|
11923
|
-
]
|
|
11924
|
-
}
|
|
11925
|
-
);
|
|
11926
|
-
}
|
|
11927
|
-
function AiVideoOverlay({
|
|
11928
|
-
postToParent: postToParent2,
|
|
11929
|
-
aiSectionsRef,
|
|
11930
|
-
applyTreeLocalRef,
|
|
11931
|
-
clearInteractionChromeRef
|
|
11932
|
-
}) {
|
|
11933
|
-
const [hover, setHover] = (0, import_react11.useState)(null);
|
|
11934
|
-
const [active, setActive] = (0, import_react11.useState)(null);
|
|
11935
|
-
const [pending, setPending] = (0, import_react11.useState)(false);
|
|
11936
|
-
const [error, setError] = (0, import_react11.useState)(null);
|
|
11937
|
-
const activeRef = (0, import_react11.useRef)(null);
|
|
11938
|
-
activeRef.current = active;
|
|
11939
|
-
(0, import_react11.useEffect)(() => {
|
|
11940
|
-
const onMove = (e) => {
|
|
11941
|
-
const t = e.target;
|
|
11942
|
-
if (!(t instanceof HTMLElement)) return;
|
|
11943
|
-
if (t.closest("[data-ohw-toolbar], [data-ohw-edit-chrome], [data-ohw-item-interaction], [data-ohw-link-modal-root], [data-ohw-section-picker], [data-ohw-ai-review]")) {
|
|
11944
|
-
return;
|
|
11945
|
-
}
|
|
11946
|
-
const blockEl = t.closest("[data-ohw-video-block]");
|
|
11947
|
-
if (!blockEl) {
|
|
11948
|
-
setHover(null);
|
|
11949
|
-
return;
|
|
11950
|
-
}
|
|
11951
|
-
const sectionEl = blockEl.closest("[data-ohw-section]");
|
|
11952
|
-
const unit = sectionEl ? movableUnit(sectionEl) : null;
|
|
11953
|
-
const sectionId = unit ? instanceIdOf(unit) || null : null;
|
|
11954
|
-
const path = blockEl.dataset.ohwVideoPath;
|
|
11955
|
-
if (!sectionId || !path) {
|
|
11956
|
-
setHover(null);
|
|
11957
|
-
return;
|
|
11958
|
-
}
|
|
11959
|
-
setHover({ sectionId, path });
|
|
11960
|
-
};
|
|
11961
|
-
const onLeave = () => setHover(null);
|
|
11962
|
-
document.addEventListener("mousemove", onMove, { passive: true });
|
|
11963
|
-
document.documentElement.addEventListener("mouseleave", onLeave);
|
|
11964
|
-
return () => {
|
|
11965
|
-
document.removeEventListener("mousemove", onMove);
|
|
11966
|
-
document.documentElement.removeEventListener("mouseleave", onLeave);
|
|
11967
|
-
};
|
|
11968
|
-
}, []);
|
|
11969
|
-
(0, import_react11.useEffect)(() => {
|
|
11970
|
-
const onClick = (e) => {
|
|
11971
|
-
const current = activeRef.current;
|
|
11972
|
-
if (!current) return;
|
|
11973
|
-
const t = e.target;
|
|
11974
|
-
if (!(t instanceof HTMLElement)) return;
|
|
11975
|
-
if (t.closest("[data-ohw-item-interaction]")) return;
|
|
11976
|
-
const blockEl = findVideoBlockElement(current.sectionId, current.path);
|
|
11977
|
-
if (blockEl && blockEl.contains(t)) return;
|
|
11978
|
-
setActive(null);
|
|
11979
|
-
setError(null);
|
|
11980
|
-
};
|
|
11981
|
-
document.addEventListener("click", onClick, true);
|
|
11982
|
-
return () => document.removeEventListener("click", onClick, true);
|
|
11983
|
-
}, []);
|
|
11984
|
-
(0, import_react11.useEffect)(() => {
|
|
11985
|
-
const onBlur = () => {
|
|
11986
|
-
if (!activeRef.current) return;
|
|
11987
|
-
setActive(null);
|
|
11988
|
-
setError(null);
|
|
11989
|
-
};
|
|
11990
|
-
window.addEventListener("blur", onBlur);
|
|
11991
|
-
return () => window.removeEventListener("blur", onBlur);
|
|
11992
|
-
}, []);
|
|
11993
|
-
(0, import_react11.useEffect)(() => {
|
|
11994
|
-
const onKeyDown = (e) => {
|
|
11995
|
-
if (e.key !== "Escape") return;
|
|
11996
|
-
if (!activeRef.current) return;
|
|
11997
|
-
setActive(null);
|
|
11998
|
-
setError(null);
|
|
11999
|
-
};
|
|
12000
|
-
document.addEventListener("keydown", onKeyDown);
|
|
12001
|
-
return () => document.removeEventListener("keydown", onKeyDown);
|
|
12002
|
-
}, []);
|
|
12003
|
-
const findEntry = (0, import_react11.useCallback)(
|
|
12004
|
-
(sectionId) => {
|
|
12005
|
-
const state = parseAiSectionsState(aiSectionsRef.current);
|
|
12006
|
-
return state.sections.find((s) => s.id === sectionId) ?? null;
|
|
12007
|
-
},
|
|
12008
|
-
[aiSectionsRef]
|
|
12009
|
-
);
|
|
12010
|
-
const runMutation = (0, import_react11.useCallback)(
|
|
12011
|
-
async (sectionId, mutate) => {
|
|
12012
|
-
const entry = findEntry(sectionId);
|
|
12013
|
-
if (!entry) return false;
|
|
12014
|
-
const nextTree = mutate(entry.tree);
|
|
12015
|
-
if (!nextTree) return false;
|
|
12016
|
-
setPending(true);
|
|
12017
|
-
setError(null);
|
|
12018
|
-
const { ok, reasons } = await requestValidateTree3(postToParent2, nextTree);
|
|
12019
|
-
setPending(false);
|
|
12020
|
-
if (!ok) {
|
|
12021
|
-
setError(reasons[0] ?? "That change is not allowed.");
|
|
12022
|
-
return false;
|
|
12023
|
-
}
|
|
12024
|
-
applyTreeLocalRef.current?.({
|
|
12025
|
-
id: sectionId,
|
|
12026
|
-
mode: "replace",
|
|
12027
|
-
targetSectionId: sectionId,
|
|
12028
|
-
tree: nextTree,
|
|
12029
|
-
label: entry.label,
|
|
12030
|
-
media: entry.media,
|
|
12031
|
-
...entry.brand ? { brand: entry.brand } : {}
|
|
12032
|
-
});
|
|
12033
|
-
return true;
|
|
12034
|
-
},
|
|
12035
|
-
[findEntry, postToParent2, applyTreeLocalRef]
|
|
12036
|
-
);
|
|
12037
|
-
const activeEntry = active ? findEntry(active.sectionId) : null;
|
|
12038
|
-
const hoverHandleRect = useLiveBlockRect(!active && hover ? hover : null);
|
|
12039
|
-
const activeBlockRect = useLiveBlockRect(active);
|
|
12040
|
-
const TOOLBAR_APPROX_H = 90;
|
|
12041
|
-
const toolbarState = activeBlockRect && activeBlockRect.top < TOOLBAR_APPROX_H ? "active-bottom" : "active-top";
|
|
12042
|
-
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
|
|
12043
|
-
hoverHandleRect && hover && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
12044
|
-
"button",
|
|
12045
|
-
{
|
|
12046
|
-
type: "button",
|
|
12047
|
-
"data-ohw-toolbar": "",
|
|
12048
|
-
onClick: () => {
|
|
12049
|
-
clearInteractionChromeRef.current();
|
|
12050
|
-
setActive(hover);
|
|
12051
|
-
},
|
|
12052
|
-
"aria-label": "Configure video",
|
|
11398
|
+
{
|
|
11399
|
+
type: "button",
|
|
11400
|
+
"data-ohw-toolbar": "",
|
|
11401
|
+
onClick: () => setActive(hover),
|
|
11402
|
+
"aria-label": "Configure pricing tier",
|
|
12053
11403
|
style: {
|
|
12054
11404
|
position: "fixed",
|
|
12055
11405
|
top: hoverHandleRect.top + 8,
|
|
@@ -12057,9 +11407,9 @@ function AiVideoOverlay({
|
|
|
12057
11407
|
width: 28,
|
|
12058
11408
|
height: 28,
|
|
12059
11409
|
borderRadius: 8,
|
|
12060
|
-
border: `1.5px dashed ${
|
|
11410
|
+
border: `1.5px dashed ${PRIMARY4}`,
|
|
12061
11411
|
background: "#ffffff",
|
|
12062
|
-
color:
|
|
11412
|
+
color: PRIMARY4,
|
|
12063
11413
|
display: "flex",
|
|
12064
11414
|
alignItems: "center",
|
|
12065
11415
|
justifyContent: "center",
|
|
@@ -12068,29 +11418,41 @@ function AiVideoOverlay({
|
|
|
12068
11418
|
fontSize: 14,
|
|
12069
11419
|
fontWeight: 700
|
|
12070
11420
|
},
|
|
12071
|
-
children: /* @__PURE__ */ (0,
|
|
11421
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react9.Star, { size: 14, style: { pointerEvents: "none" } })
|
|
12072
11422
|
}
|
|
12073
11423
|
),
|
|
12074
|
-
|
|
11424
|
+
activeCardRect && active && activeEntry && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
12075
11425
|
ItemInteractionLayer,
|
|
12076
11426
|
{
|
|
12077
|
-
rect:
|
|
12078
|
-
state:
|
|
12079
|
-
toolbar: /* @__PURE__ */ (0,
|
|
12080
|
-
|
|
11427
|
+
rect: activeCardRect,
|
|
11428
|
+
state: "active-top",
|
|
11429
|
+
toolbar: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
11430
|
+
PricingCardToolbar,
|
|
12081
11431
|
{
|
|
12082
|
-
|
|
11432
|
+
entry: activeEntry,
|
|
11433
|
+
index: active.index,
|
|
12083
11434
|
pending,
|
|
12084
11435
|
error,
|
|
12085
|
-
|
|
12086
|
-
|
|
12087
|
-
|
|
12088
|
-
(
|
|
11436
|
+
onAddTier: () => runMutation(active.sectionId, addPricingTier),
|
|
11437
|
+
onRemoveTier: () => {
|
|
11438
|
+
void runMutation(active.sectionId, (tree) => removePricingTier(tree, active.index)).then(
|
|
11439
|
+
(applied) => {
|
|
11440
|
+
if (applied) setActive(null);
|
|
11441
|
+
}
|
|
12089
11442
|
);
|
|
12090
11443
|
},
|
|
12091
|
-
|
|
12092
|
-
|
|
12093
|
-
|
|
11444
|
+
onToggleFeatured: (enabled) => runMutation(
|
|
11445
|
+
active.sectionId,
|
|
11446
|
+
(tree) => setPricingCardFeatured(tree, active.index, { enabled })
|
|
11447
|
+
),
|
|
11448
|
+
onSetTreatment: (treatment) => runMutation(
|
|
11449
|
+
active.sectionId,
|
|
11450
|
+
(tree) => setPricingCardFeatured(tree, active.index, { enabled: true, treatment })
|
|
11451
|
+
),
|
|
11452
|
+
onAddButton: () => runMutation(active.sectionId, (tree) => addPricingCardButton(tree, active.index, "Learn more")),
|
|
11453
|
+
onRemoveButton: () => runMutation(active.sectionId, (tree) => removePricingCardButton(tree, active.index)),
|
|
11454
|
+
onAddFeature: () => runMutation(active.sectionId, (tree) => addPricingCardFeature(tree, active.index, "New feature")),
|
|
11455
|
+
onRemoveFeature: () => runMutation(active.sectionId, (tree) => removePricingCardFeature(tree, active.index))
|
|
12094
11456
|
}
|
|
12095
11457
|
)
|
|
12096
11458
|
}
|
|
@@ -12409,28 +11771,28 @@ function scrollToHashSectionWhenReady(behavior = "smooth") {
|
|
|
12409
11771
|
}
|
|
12410
11772
|
|
|
12411
11773
|
// src/ui/link-modal/LinkPopover.tsx
|
|
12412
|
-
var
|
|
11774
|
+
var import_react14 = require("react");
|
|
12413
11775
|
|
|
12414
11776
|
// src/ui/dialog.tsx
|
|
12415
11777
|
var React9 = __toESM(require("react"), 1);
|
|
12416
11778
|
var import_radix_ui6 = require("radix-ui");
|
|
12417
|
-
var
|
|
12418
|
-
var
|
|
11779
|
+
var import_lucide_react10 = require("lucide-react");
|
|
11780
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
12419
11781
|
function Dialog2({
|
|
12420
11782
|
...props
|
|
12421
11783
|
}) {
|
|
12422
|
-
return /* @__PURE__ */ (0,
|
|
11784
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_radix_ui6.Dialog.Root, { "data-slot": "dialog", ...props });
|
|
12423
11785
|
}
|
|
12424
11786
|
function DialogPortal({
|
|
12425
11787
|
...props
|
|
12426
11788
|
}) {
|
|
12427
|
-
return /* @__PURE__ */ (0,
|
|
11789
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_radix_ui6.Dialog.Portal, { ...props });
|
|
12428
11790
|
}
|
|
12429
11791
|
function DialogOverlay({
|
|
12430
11792
|
className,
|
|
12431
11793
|
...props
|
|
12432
11794
|
}) {
|
|
12433
|
-
return /* @__PURE__ */ (0,
|
|
11795
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
12434
11796
|
import_radix_ui6.Dialog.Overlay,
|
|
12435
11797
|
{
|
|
12436
11798
|
"data-slot": "dialog-overlay",
|
|
@@ -12443,9 +11805,9 @@ function DialogOverlay({
|
|
|
12443
11805
|
var DialogContent = React9.forwardRef(
|
|
12444
11806
|
({ className, children, showCloseButton = true, container, ...props }, ref) => {
|
|
12445
11807
|
const positionMode = container ? "absolute" : "fixed";
|
|
12446
|
-
return /* @__PURE__ */ (0,
|
|
12447
|
-
/* @__PURE__ */ (0,
|
|
12448
|
-
/* @__PURE__ */ (0,
|
|
11808
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DialogPortal, { container: container ?? void 0, children: [
|
|
11809
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DialogOverlay, { className: cn(positionMode, "inset-0") }),
|
|
11810
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
12449
11811
|
import_radix_ui6.Dialog.Content,
|
|
12450
11812
|
{
|
|
12451
11813
|
ref,
|
|
@@ -12461,13 +11823,13 @@ var DialogContent = React9.forwardRef(
|
|
|
12461
11823
|
...props,
|
|
12462
11824
|
children: [
|
|
12463
11825
|
children,
|
|
12464
|
-
showCloseButton ? /* @__PURE__ */ (0,
|
|
11826
|
+
showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
12465
11827
|
import_radix_ui6.Dialog.Close,
|
|
12466
11828
|
{
|
|
12467
11829
|
type: "button",
|
|
12468
11830
|
className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50",
|
|
12469
11831
|
"aria-label": "Close",
|
|
12470
|
-
children: /* @__PURE__ */ (0,
|
|
11832
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.X, { size: 16, "aria-hidden": true })
|
|
12471
11833
|
}
|
|
12472
11834
|
) : null
|
|
12473
11835
|
]
|
|
@@ -12481,13 +11843,13 @@ function DialogHeader({
|
|
|
12481
11843
|
className,
|
|
12482
11844
|
...props
|
|
12483
11845
|
}) {
|
|
12484
|
-
return /* @__PURE__ */ (0,
|
|
11846
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn("flex flex-col gap-1.5", className), ...props });
|
|
12485
11847
|
}
|
|
12486
11848
|
function DialogFooter({
|
|
12487
11849
|
className,
|
|
12488
11850
|
...props
|
|
12489
11851
|
}) {
|
|
12490
|
-
return /* @__PURE__ */ (0,
|
|
11852
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
12491
11853
|
"div",
|
|
12492
11854
|
{
|
|
12493
11855
|
className: cn("flex items-center justify-end gap-2", className),
|
|
@@ -12495,7 +11857,7 @@ function DialogFooter({
|
|
|
12495
11857
|
}
|
|
12496
11858
|
);
|
|
12497
11859
|
}
|
|
12498
|
-
var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
11860
|
+
var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
12499
11861
|
import_radix_ui6.Dialog.Title,
|
|
12500
11862
|
{
|
|
12501
11863
|
ref,
|
|
@@ -12507,7 +11869,7 @@ var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE
|
|
|
12507
11869
|
}
|
|
12508
11870
|
));
|
|
12509
11871
|
DialogTitle.displayName = import_radix_ui6.Dialog.Title.displayName;
|
|
12510
|
-
var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
11872
|
+
var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
12511
11873
|
import_radix_ui6.Dialog.Description,
|
|
12512
11874
|
{
|
|
12513
11875
|
ref,
|
|
@@ -12519,63 +11881,63 @@ DialogDescription.displayName = import_radix_ui6.Dialog.Description.displayName;
|
|
|
12519
11881
|
var DialogClose = import_radix_ui6.Dialog.Close;
|
|
12520
11882
|
|
|
12521
11883
|
// src/ui/link-modal/LinkEditorPanel.tsx
|
|
12522
|
-
var
|
|
11884
|
+
var import_lucide_react14 = require("lucide-react");
|
|
12523
11885
|
|
|
12524
11886
|
// src/ui/link-modal/DestinationBreadcrumb.tsx
|
|
12525
|
-
var
|
|
12526
|
-
var
|
|
11887
|
+
var import_lucide_react11 = require("lucide-react");
|
|
11888
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
12527
11889
|
function DestinationBreadcrumb({
|
|
12528
11890
|
pageTitle,
|
|
12529
11891
|
sectionLabel
|
|
12530
11892
|
}) {
|
|
12531
|
-
return /* @__PURE__ */ (0,
|
|
12532
|
-
/* @__PURE__ */ (0,
|
|
12533
|
-
/* @__PURE__ */ (0,
|
|
12534
|
-
/* @__PURE__ */ (0,
|
|
12535
|
-
/* @__PURE__ */ (0,
|
|
12536
|
-
/* @__PURE__ */ (0,
|
|
11893
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex w-full flex-col gap-2", children: [
|
|
11894
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-sm font-medium! text-foreground m-0", children: "Destination" }),
|
|
11895
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-3", children: [
|
|
11896
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
11897
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react11.File, { size: 16, className: "shrink-0 text-foreground", "aria-hidden": true }),
|
|
11898
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-sm font-medium leading-none text-foreground!", children: pageTitle })
|
|
12537
11899
|
] }),
|
|
12538
|
-
/* @__PURE__ */ (0,
|
|
12539
|
-
|
|
11900
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
11901
|
+
import_lucide_react11.ArrowRight,
|
|
12540
11902
|
{
|
|
12541
11903
|
size: 16,
|
|
12542
11904
|
className: "shrink-0 text-muted-foreground",
|
|
12543
11905
|
"aria-hidden": true
|
|
12544
11906
|
}
|
|
12545
11907
|
),
|
|
12546
|
-
/* @__PURE__ */ (0,
|
|
12547
|
-
/* @__PURE__ */ (0,
|
|
12548
|
-
|
|
11908
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
|
|
11909
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
11910
|
+
import_lucide_react11.GalleryVertical,
|
|
12549
11911
|
{
|
|
12550
11912
|
size: 16,
|
|
12551
11913
|
className: "shrink-0 text-foreground",
|
|
12552
11914
|
"aria-hidden": true
|
|
12553
11915
|
}
|
|
12554
11916
|
),
|
|
12555
|
-
/* @__PURE__ */ (0,
|
|
11917
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "truncate text-sm font-medium leading-none text-foreground", children: sectionLabel })
|
|
12556
11918
|
] })
|
|
12557
11919
|
] })
|
|
12558
11920
|
] });
|
|
12559
11921
|
}
|
|
12560
11922
|
|
|
12561
11923
|
// src/ui/link-modal/SectionTreeItem.tsx
|
|
12562
|
-
var
|
|
12563
|
-
var
|
|
11924
|
+
var import_lucide_react12 = require("lucide-react");
|
|
11925
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
12564
11926
|
function SectionTreeItem({
|
|
12565
11927
|
section,
|
|
12566
11928
|
onSelect,
|
|
12567
11929
|
selected
|
|
12568
11930
|
}) {
|
|
12569
11931
|
const interactive = Boolean(onSelect);
|
|
12570
|
-
return /* @__PURE__ */ (0,
|
|
12571
|
-
/* @__PURE__ */ (0,
|
|
11932
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex h-9 w-full items-end pl-3", children: [
|
|
11933
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
12572
11934
|
"div",
|
|
12573
11935
|
{
|
|
12574
11936
|
className: "-mr-px h-9 w-2 shrink-0 rounded-bl-sm border-b border-l border-border mb-4",
|
|
12575
11937
|
"aria-hidden": true
|
|
12576
11938
|
}
|
|
12577
11939
|
),
|
|
12578
|
-
/* @__PURE__ */ (0,
|
|
11940
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
12579
11941
|
"div",
|
|
12580
11942
|
{
|
|
12581
11943
|
role: interactive ? "button" : void 0,
|
|
@@ -12593,15 +11955,15 @@ function SectionTreeItem({
|
|
|
12593
11955
|
interactive && selected && "border-bridge-primary"
|
|
12594
11956
|
),
|
|
12595
11957
|
children: [
|
|
12596
|
-
/* @__PURE__ */ (0,
|
|
12597
|
-
|
|
11958
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
11959
|
+
import_lucide_react12.GalleryVertical,
|
|
12598
11960
|
{
|
|
12599
11961
|
size: 16,
|
|
12600
11962
|
className: "shrink-0 text-foreground",
|
|
12601
11963
|
"aria-hidden": true
|
|
12602
11964
|
}
|
|
12603
11965
|
),
|
|
12604
|
-
/* @__PURE__ */ (0,
|
|
11966
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "truncate text-sm font-normal leading-5 text-foreground", children: section.label })
|
|
12605
11967
|
]
|
|
12606
11968
|
}
|
|
12607
11969
|
)
|
|
@@ -12609,14 +11971,14 @@ function SectionTreeItem({
|
|
|
12609
11971
|
}
|
|
12610
11972
|
|
|
12611
11973
|
// src/ui/link-modal/UrlOrPageInput.tsx
|
|
12612
|
-
var
|
|
11974
|
+
var import_react11 = require("react");
|
|
12613
11975
|
|
|
12614
11976
|
// src/ui/input.tsx
|
|
12615
11977
|
var React10 = __toESM(require("react"), 1);
|
|
12616
|
-
var
|
|
11978
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
12617
11979
|
var Input = React10.forwardRef(
|
|
12618
11980
|
({ className, type, ...props }, ref) => {
|
|
12619
|
-
return /* @__PURE__ */ (0,
|
|
11981
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
12620
11982
|
"input",
|
|
12621
11983
|
{
|
|
12622
11984
|
type,
|
|
@@ -12635,9 +11997,9 @@ Input.displayName = "Input";
|
|
|
12635
11997
|
|
|
12636
11998
|
// src/ui/label.tsx
|
|
12637
11999
|
var import_radix_ui7 = require("radix-ui");
|
|
12638
|
-
var
|
|
12000
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
12639
12001
|
function Label({ className, ...props }) {
|
|
12640
|
-
return /* @__PURE__ */ (0,
|
|
12002
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
12641
12003
|
import_radix_ui7.Label.Root,
|
|
12642
12004
|
{
|
|
12643
12005
|
"data-slot": "label",
|
|
@@ -12648,12 +12010,12 @@ function Label({ className, ...props }) {
|
|
|
12648
12010
|
}
|
|
12649
12011
|
|
|
12650
12012
|
// src/ui/link-modal/UrlOrPageInput.tsx
|
|
12651
|
-
var
|
|
12652
|
-
var
|
|
12013
|
+
var import_lucide_react13 = require("lucide-react");
|
|
12014
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
12653
12015
|
function FieldChevron({
|
|
12654
12016
|
onClick
|
|
12655
12017
|
}) {
|
|
12656
|
-
return /* @__PURE__ */ (0,
|
|
12018
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
12657
12019
|
"button",
|
|
12658
12020
|
{
|
|
12659
12021
|
type: "button",
|
|
@@ -12661,7 +12023,7 @@ function FieldChevron({
|
|
|
12661
12023
|
onClick,
|
|
12662
12024
|
"aria-label": "Open page list",
|
|
12663
12025
|
tabIndex: -1,
|
|
12664
|
-
children: /* @__PURE__ */ (0,
|
|
12026
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.ChevronDown, { size: 16 })
|
|
12665
12027
|
}
|
|
12666
12028
|
);
|
|
12667
12029
|
}
|
|
@@ -12677,11 +12039,11 @@ function UrlOrPageInput({
|
|
|
12677
12039
|
readOnly = false,
|
|
12678
12040
|
urlError
|
|
12679
12041
|
}) {
|
|
12680
|
-
const inputId = (0,
|
|
12681
|
-
const inputRef = (0,
|
|
12682
|
-
const rootRef = (0,
|
|
12683
|
-
const [isFocused, setIsFocused] = (0,
|
|
12684
|
-
(0,
|
|
12042
|
+
const inputId = (0, import_react11.useId)();
|
|
12043
|
+
const inputRef = (0, import_react11.useRef)(null);
|
|
12044
|
+
const rootRef = (0, import_react11.useRef)(null);
|
|
12045
|
+
const [isFocused, setIsFocused] = (0, import_react11.useState)(false);
|
|
12046
|
+
(0, import_react11.useEffect)(() => {
|
|
12685
12047
|
if (!dropdownOpen) return;
|
|
12686
12048
|
const isOutside = (e) => {
|
|
12687
12049
|
const root = rootRef.current;
|
|
@@ -12722,19 +12084,19 @@ function UrlOrPageInput({
|
|
|
12722
12084
|
"data-ohw-link-field flex h-[36px] w-full items-center overflow-hidden rounded-md border bg-background pl-3 pr-3 py-2 outline-none transition-[border-color,box-shadow]",
|
|
12723
12085
|
urlError ? "border-destructive shadow-[0_0_0_1px_var(--ohw-destructive)]" : isFocused ? "border-bridge-primary shadow-[0_0_0_1px_var(--ohw-primary)]" : "border-input"
|
|
12724
12086
|
);
|
|
12725
|
-
return /* @__PURE__ */ (0,
|
|
12726
|
-
/* @__PURE__ */ (0,
|
|
12727
|
-
/* @__PURE__ */ (0,
|
|
12728
|
-
/* @__PURE__ */ (0,
|
|
12729
|
-
selectedPage ? /* @__PURE__ */ (0,
|
|
12730
|
-
|
|
12087
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex w-full flex-col gap-2 p-0", children: [
|
|
12088
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Label, { htmlFor: inputId, className: cn(urlError && "text-destructive"), children: "Destination" }),
|
|
12089
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { ref: rootRef, className: "relative w-full", children: [
|
|
12090
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { "data-ohw-link-field": true, className: fieldClassName, children: [
|
|
12091
|
+
selectedPage ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex shrink-0 items-center pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
12092
|
+
import_lucide_react13.File,
|
|
12731
12093
|
{
|
|
12732
12094
|
size: 16,
|
|
12733
12095
|
className: "shrink-0 text-foreground",
|
|
12734
12096
|
"aria-hidden": true
|
|
12735
12097
|
}
|
|
12736
12098
|
) }) : null,
|
|
12737
|
-
readOnly ? /* @__PURE__ */ (0,
|
|
12099
|
+
readOnly ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "min-w-0 flex-1 truncate text-sm leading-5 text-foreground", children: selectedPage?.title ?? value }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
12738
12100
|
Input,
|
|
12739
12101
|
{
|
|
12740
12102
|
ref: inputRef,
|
|
@@ -12760,7 +12122,7 @@ function UrlOrPageInput({
|
|
|
12760
12122
|
)
|
|
12761
12123
|
}
|
|
12762
12124
|
),
|
|
12763
|
-
selectedPage && !readOnly ? /* @__PURE__ */ (0,
|
|
12125
|
+
selectedPage && !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
12764
12126
|
"button",
|
|
12765
12127
|
{
|
|
12766
12128
|
type: "button",
|
|
@@ -12768,26 +12130,26 @@ function UrlOrPageInput({
|
|
|
12768
12130
|
onMouseDown: clearSelection,
|
|
12769
12131
|
"aria-label": "Clear selected page",
|
|
12770
12132
|
tabIndex: -1,
|
|
12771
|
-
children: /* @__PURE__ */ (0,
|
|
12133
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.X, { size: 16, "aria-hidden": true })
|
|
12772
12134
|
}
|
|
12773
12135
|
) : null,
|
|
12774
|
-
!readOnly ? /* @__PURE__ */ (0,
|
|
12136
|
+
!readOnly ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(FieldChevron, { onClick: toggleDropdown }) : null
|
|
12775
12137
|
] }),
|
|
12776
|
-
dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ (0,
|
|
12138
|
+
dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
12777
12139
|
"div",
|
|
12778
12140
|
{
|
|
12779
12141
|
"data-ohw-link-page-dropdown": "",
|
|
12780
12142
|
className: "absolute left-0 right-0 top-[calc(100%+4px)] z-50 max-h-48 overflow-auto rounded-lg border border-border bg-popover py-1 shadow-lg",
|
|
12781
12143
|
onMouseDown: (e) => e.preventDefault(),
|
|
12782
|
-
children: filteredPages.map((page) => /* @__PURE__ */ (0,
|
|
12144
|
+
children: filteredPages.map((page) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
12783
12145
|
"button",
|
|
12784
12146
|
{
|
|
12785
12147
|
type: "button",
|
|
12786
12148
|
className: "flex h-9 w-full items-center gap-2 border-0 bg-transparent px-3 text-left text-sm leading-5 text-foreground outline-none hover:bg-muted",
|
|
12787
12149
|
onClick: () => onPageSelect(page),
|
|
12788
12150
|
children: [
|
|
12789
|
-
/* @__PURE__ */ (0,
|
|
12790
|
-
/* @__PURE__ */ (0,
|
|
12151
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.File, { size: 16, className: "shrink-0", "aria-hidden": true }),
|
|
12152
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "truncate", children: page.title })
|
|
12791
12153
|
]
|
|
12792
12154
|
},
|
|
12793
12155
|
page.path
|
|
@@ -12795,34 +12157,34 @@ function UrlOrPageInput({
|
|
|
12795
12157
|
}
|
|
12796
12158
|
) : null
|
|
12797
12159
|
] }),
|
|
12798
|
-
urlError ? /* @__PURE__ */ (0,
|
|
12160
|
+
urlError ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-sm font-medium text-destructive", children: urlError }) : null
|
|
12799
12161
|
] });
|
|
12800
12162
|
}
|
|
12801
12163
|
|
|
12802
12164
|
// src/ui/link-modal/LinkEditorPanel.tsx
|
|
12803
|
-
var
|
|
12165
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
12804
12166
|
function LinkEditorPanel({ state, onClose }) {
|
|
12805
12167
|
const isCancel = state.secondaryLabel === "Cancel" || state.secondaryLabel === "Back to sections";
|
|
12806
|
-
return /* @__PURE__ */ (0,
|
|
12807
|
-
/* @__PURE__ */ (0,
|
|
12168
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
|
|
12169
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
12808
12170
|
"button",
|
|
12809
12171
|
{
|
|
12810
12172
|
type: "button",
|
|
12811
12173
|
className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50 h-7",
|
|
12812
12174
|
"aria-label": "Close",
|
|
12813
12175
|
onClick: onClose,
|
|
12814
|
-
children: /* @__PURE__ */ (0,
|
|
12176
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react14.X, { size: 16, "aria-hidden": true })
|
|
12815
12177
|
}
|
|
12816
12178
|
) }),
|
|
12817
|
-
/* @__PURE__ */ (0,
|
|
12818
|
-
/* @__PURE__ */ (0,
|
|
12819
|
-
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ (0,
|
|
12179
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogHeader, { className: "w-full gap-1.5 p-6 pr-12", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogTitle, { className: "m-0 w-full break-words", children: state.title }) }),
|
|
12180
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex w-full flex-col gap-3 px-6 pb-8 pt-1", children: [
|
|
12181
|
+
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
12820
12182
|
DestinationBreadcrumb,
|
|
12821
12183
|
{
|
|
12822
12184
|
pageTitle: state.selectedPage.title,
|
|
12823
12185
|
sectionLabel: state.selectedSection.label
|
|
12824
12186
|
}
|
|
12825
|
-
) : /* @__PURE__ */ (0,
|
|
12187
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
12826
12188
|
UrlOrPageInput,
|
|
12827
12189
|
{
|
|
12828
12190
|
value: state.searchValue,
|
|
@@ -12835,8 +12197,8 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
12835
12197
|
urlError: state.urlError
|
|
12836
12198
|
}
|
|
12837
12199
|
),
|
|
12838
|
-
state.showChooseSection ? /* @__PURE__ */ (0,
|
|
12839
|
-
/* @__PURE__ */ (0,
|
|
12200
|
+
state.showChooseSection ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-col justify-center gap-2", children: [
|
|
12201
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
12840
12202
|
Button,
|
|
12841
12203
|
{
|
|
12842
12204
|
type: "button",
|
|
@@ -12847,15 +12209,15 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
12847
12209
|
children: "Choose a section"
|
|
12848
12210
|
}
|
|
12849
12211
|
),
|
|
12850
|
-
/* @__PURE__ */ (0,
|
|
12851
|
-
/* @__PURE__ */ (0,
|
|
12852
|
-
/* @__PURE__ */ (0,
|
|
12212
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
|
|
12213
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react14.Info, { size: 16, className: "shrink-0", "aria-hidden": true }),
|
|
12214
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: "Pick a section this link should scroll to." })
|
|
12853
12215
|
] })
|
|
12854
12216
|
] }) : null,
|
|
12855
|
-
state.showSectionRow && state.selectedSection ? /* @__PURE__ */ (0,
|
|
12217
|
+
state.showSectionRow && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SectionTreeItem, { section: state.selectedSection, selected: true }) : null
|
|
12856
12218
|
] }),
|
|
12857
|
-
/* @__PURE__ */ (0,
|
|
12858
|
-
/* @__PURE__ */ (0,
|
|
12219
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(DialogFooter, { className: "w-full px-6 pb-6", children: [
|
|
12220
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
12859
12221
|
Button,
|
|
12860
12222
|
{
|
|
12861
12223
|
type: "button",
|
|
@@ -12870,7 +12232,7 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
12870
12232
|
children: state.secondaryLabel
|
|
12871
12233
|
}
|
|
12872
12234
|
),
|
|
12873
|
-
/* @__PURE__ */ (0,
|
|
12235
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
12874
12236
|
Button,
|
|
12875
12237
|
{
|
|
12876
12238
|
type: "button",
|
|
@@ -12889,9 +12251,9 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
12889
12251
|
}
|
|
12890
12252
|
|
|
12891
12253
|
// src/ui/link-modal/SectionPickerOverlay.tsx
|
|
12892
|
-
var
|
|
12254
|
+
var import_react12 = require("react");
|
|
12893
12255
|
var import_react_dom3 = require("react-dom");
|
|
12894
|
-
var
|
|
12256
|
+
var import_lucide_react15 = require("lucide-react");
|
|
12895
12257
|
var import_navigation2 = require("next/navigation");
|
|
12896
12258
|
|
|
12897
12259
|
// src/lib/parent-scroll.ts
|
|
@@ -12913,7 +12275,7 @@ function getIframeChromeClip(parentScroll) {
|
|
|
12913
12275
|
}
|
|
12914
12276
|
|
|
12915
12277
|
// src/ui/link-modal/SectionPickerOverlay.tsx
|
|
12916
|
-
var
|
|
12278
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
12917
12279
|
var DIM_OVERLAY = "rgba(0, 0, 0, 0.45)";
|
|
12918
12280
|
function rectsEqual(a, b) {
|
|
12919
12281
|
if (a.size !== b.size) return false;
|
|
@@ -12946,12 +12308,12 @@ function hitTestSectionId(x, y, sectionIds, rects) {
|
|
|
12946
12308
|
return null;
|
|
12947
12309
|
}
|
|
12948
12310
|
function useSectionRects(sectionIdsKey, enabled) {
|
|
12949
|
-
const [rects, setRects] = (0,
|
|
12950
|
-
const sectionIds = (0,
|
|
12311
|
+
const [rects, setRects] = (0, import_react12.useState)(/* @__PURE__ */ new Map());
|
|
12312
|
+
const sectionIds = (0, import_react12.useMemo)(
|
|
12951
12313
|
() => sectionIdsKey ? sectionIdsKey.split("\0") : [],
|
|
12952
12314
|
[sectionIdsKey]
|
|
12953
12315
|
);
|
|
12954
|
-
(0,
|
|
12316
|
+
(0, import_react12.useEffect)(() => {
|
|
12955
12317
|
if (!enabled || sectionIds.length === 0) {
|
|
12956
12318
|
setRects((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Map());
|
|
12957
12319
|
return;
|
|
@@ -12992,13 +12354,13 @@ function SectionPickerOverlay({
|
|
|
12992
12354
|
}) {
|
|
12993
12355
|
const router = (0, import_navigation2.useRouter)();
|
|
12994
12356
|
const pathname = (0, import_navigation2.usePathname)();
|
|
12995
|
-
const [selectedId, setSelectedId] = (0,
|
|
12996
|
-
const [hoveredId, setHoveredId] = (0,
|
|
12997
|
-
const pointerRef = (0,
|
|
12998
|
-
const pointerScreenRef = (0,
|
|
12999
|
-
const iframeOffsetTopRef = (0,
|
|
13000
|
-
const sectionIdsRef = (0,
|
|
13001
|
-
const [chromeClip, setChromeClip] = (0,
|
|
12357
|
+
const [selectedId, setSelectedId] = (0, import_react12.useState)(null);
|
|
12358
|
+
const [hoveredId, setHoveredId] = (0, import_react12.useState)(null);
|
|
12359
|
+
const pointerRef = (0, import_react12.useRef)(null);
|
|
12360
|
+
const pointerScreenRef = (0, import_react12.useRef)(null);
|
|
12361
|
+
const iframeOffsetTopRef = (0, import_react12.useRef)(null);
|
|
12362
|
+
const sectionIdsRef = (0, import_react12.useRef)([]);
|
|
12363
|
+
const [chromeClip, setChromeClip] = (0, import_react12.useState)(
|
|
13002
12364
|
() => ({
|
|
13003
12365
|
top: 0,
|
|
13004
12366
|
bottom: typeof window !== "undefined" ? window.innerHeight : 0
|
|
@@ -13006,12 +12368,12 @@ function SectionPickerOverlay({
|
|
|
13006
12368
|
);
|
|
13007
12369
|
const normalizedTarget = normalizePath(pagePath);
|
|
13008
12370
|
const isOnTargetPage = normalizePath(pathname) === normalizedTarget;
|
|
13009
|
-
(0,
|
|
12371
|
+
(0, import_react12.useEffect)(() => {
|
|
13010
12372
|
if (isOnTargetPage) return;
|
|
13011
12373
|
const search = readPreservedSearch();
|
|
13012
12374
|
router.push(`${normalizedTarget}${search}`);
|
|
13013
12375
|
}, [isOnTargetPage, normalizedTarget, router]);
|
|
13014
|
-
(0,
|
|
12376
|
+
(0, import_react12.useEffect)(() => {
|
|
13015
12377
|
document.documentElement.setAttribute("data-ohw-section-picking", "");
|
|
13016
12378
|
document.querySelectorAll("[data-ohw-hovered]").forEach((el) => {
|
|
13017
12379
|
el.removeAttribute("data-ohw-hovered");
|
|
@@ -13023,24 +12385,24 @@ function SectionPickerOverlay({
|
|
|
13023
12385
|
document.documentElement.removeAttribute("data-ohw-section-picking");
|
|
13024
12386
|
};
|
|
13025
12387
|
}, []);
|
|
13026
|
-
const liveSections = (0,
|
|
12388
|
+
const liveSections = (0, import_react12.useMemo)(() => {
|
|
13027
12389
|
if (!isOnTargetPage) return sections;
|
|
13028
12390
|
const live = collectSectionsFromDom();
|
|
13029
12391
|
if (live.length === 0) return sections;
|
|
13030
12392
|
const labels = new Map(sections.map((s) => [s.id, s.label]));
|
|
13031
12393
|
return live.map((s) => ({ id: s.id, label: labels.get(s.id) ?? s.label }));
|
|
13032
12394
|
}, [isOnTargetPage, sections, pathname]);
|
|
13033
|
-
const sectionIdsKey = (0,
|
|
12395
|
+
const sectionIdsKey = (0, import_react12.useMemo)(
|
|
13034
12396
|
() => liveSections.map((s) => s.id).join("\0"),
|
|
13035
12397
|
[liveSections]
|
|
13036
12398
|
);
|
|
13037
|
-
const sectionIds = (0,
|
|
12399
|
+
const sectionIds = (0, import_react12.useMemo)(
|
|
13038
12400
|
() => liveSections.map((s) => s.id),
|
|
13039
12401
|
[liveSections]
|
|
13040
12402
|
);
|
|
13041
12403
|
sectionIdsRef.current = sectionIds;
|
|
13042
12404
|
const rects = useSectionRects(sectionIdsKey, isOnTargetPage);
|
|
13043
|
-
const applyHoverAt = (0,
|
|
12405
|
+
const applyHoverAt = (0, import_react12.useCallback)(
|
|
13044
12406
|
(x, y, liveRects) => {
|
|
13045
12407
|
const ids = sectionIdsRef.current;
|
|
13046
12408
|
const map = liveRects ?? readSectionRects(ids);
|
|
@@ -13049,7 +12411,7 @@ function SectionPickerOverlay({
|
|
|
13049
12411
|
},
|
|
13050
12412
|
[]
|
|
13051
12413
|
);
|
|
13052
|
-
(0,
|
|
12414
|
+
(0, import_react12.useEffect)(() => {
|
|
13053
12415
|
const applyClip = (iframeOffsetTop, visibleCanvasTop, canvasH, promptBarH = 0) => {
|
|
13054
12416
|
const next = getIframeVisibleClip({
|
|
13055
12417
|
iframeOffsetTop,
|
|
@@ -13093,12 +12455,12 @@ function SectionPickerOverlay({
|
|
|
13093
12455
|
window.removeEventListener("resize", onResize);
|
|
13094
12456
|
};
|
|
13095
12457
|
}, [applyHoverAt]);
|
|
13096
|
-
(0,
|
|
12458
|
+
(0, import_react12.useEffect)(() => {
|
|
13097
12459
|
const ptr = pointerRef.current;
|
|
13098
12460
|
if (!ptr) return;
|
|
13099
12461
|
applyHoverAt(ptr.x, ptr.y, rects);
|
|
13100
12462
|
}, [rects, applyHoverAt]);
|
|
13101
|
-
(0,
|
|
12463
|
+
(0, import_react12.useEffect)(() => {
|
|
13102
12464
|
const rememberPointer = (clientX, clientY) => {
|
|
13103
12465
|
pointerRef.current = { x: clientX, y: clientY };
|
|
13104
12466
|
const top = iframeOffsetTopRef.current;
|
|
@@ -13122,7 +12484,7 @@ function SectionPickerOverlay({
|
|
|
13122
12484
|
window.removeEventListener("message", onPointerSync);
|
|
13123
12485
|
};
|
|
13124
12486
|
}, [rects, applyHoverAt]);
|
|
13125
|
-
const handleSelect = (0,
|
|
12487
|
+
const handleSelect = (0, import_react12.useCallback)(
|
|
13126
12488
|
(section) => {
|
|
13127
12489
|
if (selectedId) return;
|
|
13128
12490
|
setSelectedId(section.id);
|
|
@@ -13130,7 +12492,7 @@ function SectionPickerOverlay({
|
|
|
13130
12492
|
},
|
|
13131
12493
|
[selectedId, onSelect]
|
|
13132
12494
|
);
|
|
13133
|
-
(0,
|
|
12495
|
+
(0, import_react12.useEffect)(() => {
|
|
13134
12496
|
const onKeyDown = (e) => {
|
|
13135
12497
|
if (e.key === "Escape") {
|
|
13136
12498
|
e.preventDefault();
|
|
@@ -13144,7 +12506,7 @@ function SectionPickerOverlay({
|
|
|
13144
12506
|
const portalRoot = typeof document !== "undefined" ? document.querySelector("[data-ohw-bridge-root]") ?? document.body : null;
|
|
13145
12507
|
if (!portalRoot) return null;
|
|
13146
12508
|
return (0, import_react_dom3.createPortal)(
|
|
13147
|
-
/* @__PURE__ */ (0,
|
|
12509
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
13148
12510
|
"div",
|
|
13149
12511
|
{
|
|
13150
12512
|
"data-ohw-section-picker": "",
|
|
@@ -13154,12 +12516,12 @@ function SectionPickerOverlay({
|
|
|
13154
12516
|
role: "dialog",
|
|
13155
12517
|
"aria-label": "Choose a section",
|
|
13156
12518
|
children: [
|
|
13157
|
-
/* @__PURE__ */ (0,
|
|
12519
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
13158
12520
|
"div",
|
|
13159
12521
|
{
|
|
13160
12522
|
className: "pointer-events-auto fixed left-5 z-[2]",
|
|
13161
12523
|
style: { top: chromeClip.top + 20 },
|
|
13162
|
-
children: /* @__PURE__ */ (0,
|
|
12524
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
13163
12525
|
Button,
|
|
13164
12526
|
{
|
|
13165
12527
|
type: "button",
|
|
@@ -13168,14 +12530,14 @@ function SectionPickerOverlay({
|
|
|
13168
12530
|
className: "h-8 min-w-0 gap-1 border-border bg-background px-2 py-1.5 shadow-sm hover:bg-muted cursor-pointer",
|
|
13169
12531
|
onClick: onBack,
|
|
13170
12532
|
children: [
|
|
13171
|
-
/* @__PURE__ */ (0,
|
|
12533
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react15.ArrowLeft, { className: "size-4 shrink-0", "aria-hidden": true }),
|
|
13172
12534
|
"Back"
|
|
13173
12535
|
]
|
|
13174
12536
|
}
|
|
13175
12537
|
)
|
|
13176
12538
|
}
|
|
13177
12539
|
),
|
|
13178
|
-
/* @__PURE__ */ (0,
|
|
12540
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
13179
12541
|
"div",
|
|
13180
12542
|
{
|
|
13181
12543
|
className: "pointer-events-none fixed left-1/2 z-[2] rounded-lg px-4 py-3 text-xs leading-4 tracking-[0.18px] text-white shadow-md",
|
|
@@ -13188,7 +12550,7 @@ function SectionPickerOverlay({
|
|
|
13188
12550
|
children: "Click on section to select"
|
|
13189
12551
|
}
|
|
13190
12552
|
),
|
|
13191
|
-
!isOnTargetPage ? /* @__PURE__ */ (0,
|
|
12553
|
+
!isOnTargetPage ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
13192
12554
|
"div",
|
|
13193
12555
|
{
|
|
13194
12556
|
className: "pointer-events-none fixed left-1/2 z-[1] -translate-x-1/2 rounded-md px-3 py-2 text-sm text-muted-foreground shadow-sm",
|
|
@@ -13196,14 +12558,14 @@ function SectionPickerOverlay({
|
|
|
13196
12558
|
children: "Loading page preview\u2026"
|
|
13197
12559
|
}
|
|
13198
12560
|
) : null,
|
|
13199
|
-
isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */ (0,
|
|
12561
|
+
isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "pointer-events-auto fixed inset-0 z-[1] flex items-center justify-center bg-muted/40", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-sm text-muted-foreground", children: "No sections found on this page." }) }) : null,
|
|
13200
12562
|
isOnTargetPage ? liveSections.map((section) => {
|
|
13201
12563
|
const rect = rects.get(section.id);
|
|
13202
12564
|
if (!rect || rect.width <= 0 || rect.height <= 0) return null;
|
|
13203
12565
|
const isSelected = selectedId === section.id;
|
|
13204
12566
|
const isHovered = hoveredId === section.id;
|
|
13205
12567
|
const isLit = isSelected || isHovered;
|
|
13206
|
-
return /* @__PURE__ */ (0,
|
|
12568
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
13207
12569
|
"button",
|
|
13208
12570
|
{
|
|
13209
12571
|
type: "button",
|
|
@@ -13218,7 +12580,7 @@ function SectionPickerOverlay({
|
|
|
13218
12580
|
"aria-label": `Select section ${section.label}`,
|
|
13219
12581
|
onClick: () => handleSelect(section),
|
|
13220
12582
|
children: [
|
|
13221
|
-
isLit ? /* @__PURE__ */ (0,
|
|
12583
|
+
isLit ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
13222
12584
|
"span",
|
|
13223
12585
|
{
|
|
13224
12586
|
className: "pointer-events-none absolute",
|
|
@@ -13231,13 +12593,13 @@ function SectionPickerOverlay({
|
|
|
13231
12593
|
"aria-hidden": true
|
|
13232
12594
|
}
|
|
13233
12595
|
) : null,
|
|
13234
|
-
isSelected ? /* @__PURE__ */ (0,
|
|
12596
|
+
isSelected ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
13235
12597
|
"span",
|
|
13236
12598
|
{
|
|
13237
12599
|
className: "absolute right-3 top-3 flex size-8 items-center justify-center rounded-full text-white",
|
|
13238
12600
|
style: { backgroundColor: "var(--ohw-primary, #0885fe)" },
|
|
13239
12601
|
"aria-hidden": true,
|
|
13240
|
-
children: /* @__PURE__ */ (0,
|
|
12602
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react15.Check, { className: "size-5" })
|
|
13241
12603
|
}
|
|
13242
12604
|
) : null
|
|
13243
12605
|
]
|
|
@@ -13253,7 +12615,7 @@ function SectionPickerOverlay({
|
|
|
13253
12615
|
}
|
|
13254
12616
|
|
|
13255
12617
|
// src/ui/link-modal/useLinkModalState.ts
|
|
13256
|
-
var
|
|
12618
|
+
var import_react13 = require("react");
|
|
13257
12619
|
function useLinkModalState({
|
|
13258
12620
|
open,
|
|
13259
12621
|
mode,
|
|
@@ -13265,14 +12627,14 @@ function useLinkModalState({
|
|
|
13265
12627
|
onClose,
|
|
13266
12628
|
onSubmit
|
|
13267
12629
|
}) {
|
|
13268
|
-
const availablePages = (0,
|
|
13269
|
-
const [searchValue, setSearchValue] = (0,
|
|
13270
|
-
const [selectedPage, setSelectedPage] = (0,
|
|
13271
|
-
const [selectedSection, setSelectedSection] = (0,
|
|
13272
|
-
const [step, setStep] = (0,
|
|
13273
|
-
const [dropdownOpen, setDropdownOpen] = (0,
|
|
13274
|
-
const [urlError, setUrlError] = (0,
|
|
13275
|
-
const reset = (0,
|
|
12630
|
+
const availablePages = (0, import_react13.useMemo)(() => pages, [pages]);
|
|
12631
|
+
const [searchValue, setSearchValue] = (0, import_react13.useState)("");
|
|
12632
|
+
const [selectedPage, setSelectedPage] = (0, import_react13.useState)(null);
|
|
12633
|
+
const [selectedSection, setSelectedSection] = (0, import_react13.useState)(null);
|
|
12634
|
+
const [step, setStep] = (0, import_react13.useState)("input");
|
|
12635
|
+
const [dropdownOpen, setDropdownOpen] = (0, import_react13.useState)(false);
|
|
12636
|
+
const [urlError, setUrlError] = (0, import_react13.useState)("");
|
|
12637
|
+
const reset = (0, import_react13.useCallback)(() => {
|
|
13276
12638
|
setSearchValue("");
|
|
13277
12639
|
setSelectedPage(null);
|
|
13278
12640
|
setSelectedSection(null);
|
|
@@ -13280,7 +12642,7 @@ function useLinkModalState({
|
|
|
13280
12642
|
setDropdownOpen(false);
|
|
13281
12643
|
setUrlError("");
|
|
13282
12644
|
}, []);
|
|
13283
|
-
(0,
|
|
12645
|
+
(0, import_react13.useEffect)(() => {
|
|
13284
12646
|
if (!open) return;
|
|
13285
12647
|
if (mode === "edit" && initialTarget) {
|
|
13286
12648
|
const { pageRoute } = parseTarget(initialTarget);
|
|
@@ -13296,11 +12658,11 @@ function useLinkModalState({
|
|
|
13296
12658
|
setDropdownOpen(false);
|
|
13297
12659
|
setUrlError("");
|
|
13298
12660
|
}, [open, mode, initialTarget, reset]);
|
|
13299
|
-
const filteredPages = (0,
|
|
12661
|
+
const filteredPages = (0, import_react13.useMemo)(() => {
|
|
13300
12662
|
if (!searchValue.trim()) return availablePages;
|
|
13301
12663
|
return availablePages.filter((p) => p.title.toLowerCase().startsWith(searchValue.toLowerCase()));
|
|
13302
12664
|
}, [availablePages, searchValue]);
|
|
13303
|
-
const activeSections = (0,
|
|
12665
|
+
const activeSections = (0, import_react13.useMemo)(() => {
|
|
13304
12666
|
if (!selectedPage) return [];
|
|
13305
12667
|
return getSectionsForPath(sectionsByPath, selectedPage.path);
|
|
13306
12668
|
}, [selectedPage, sectionsByPath]);
|
|
@@ -13349,7 +12711,7 @@ function useLinkModalState({
|
|
|
13349
12711
|
reset();
|
|
13350
12712
|
onClose();
|
|
13351
12713
|
};
|
|
13352
|
-
const isValid = (0,
|
|
12714
|
+
const isValid = (0, import_react13.useMemo)(() => {
|
|
13353
12715
|
if (urlError) return false;
|
|
13354
12716
|
if (showBreadcrumb) return true;
|
|
13355
12717
|
if (selectedPage) return true;
|
|
@@ -13417,7 +12779,7 @@ function useLinkModalState({
|
|
|
13417
12779
|
}
|
|
13418
12780
|
|
|
13419
12781
|
// src/ui/link-modal/LinkPopover.tsx
|
|
13420
|
-
var
|
|
12782
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
13421
12783
|
function postToParent(data) {
|
|
13422
12784
|
window.parent?.postMessage(data, "*");
|
|
13423
12785
|
}
|
|
@@ -13446,7 +12808,7 @@ function LinkPopover({
|
|
|
13446
12808
|
onSubmit
|
|
13447
12809
|
});
|
|
13448
12810
|
const sectionPickerActive = state.showSectionPicker && Boolean(state.selectedPage);
|
|
13449
|
-
(0,
|
|
12811
|
+
(0, import_react14.useEffect)(() => {
|
|
13450
12812
|
if (!open) return;
|
|
13451
12813
|
if (sectionPickerActive) {
|
|
13452
12814
|
postToParent({ type: "ui:unlock" });
|
|
@@ -13513,15 +12875,15 @@ function LinkPopover({
|
|
|
13513
12875
|
);
|
|
13514
12876
|
};
|
|
13515
12877
|
}, [open, sectionPickerActive]);
|
|
13516
|
-
return /* @__PURE__ */ (0,
|
|
13517
|
-
/* @__PURE__ */ (0,
|
|
12878
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
|
|
12879
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
13518
12880
|
Dialog2,
|
|
13519
12881
|
{
|
|
13520
12882
|
open: open && !sectionPickerActive,
|
|
13521
12883
|
onOpenChange: (next) => {
|
|
13522
12884
|
if (!next) onClose?.();
|
|
13523
12885
|
},
|
|
13524
|
-
children: /* @__PURE__ */ (0,
|
|
12886
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
13525
12887
|
DialogContent,
|
|
13526
12888
|
{
|
|
13527
12889
|
ref: panelRef,
|
|
@@ -13531,12 +12893,12 @@ function LinkPopover({
|
|
|
13531
12893
|
"data-ohw-bridge": "",
|
|
13532
12894
|
showCloseButton: false,
|
|
13533
12895
|
className: "gap-0 p-0 w-full max-w-[448px] pointer-events-auto z-[2147483646] overflow-visible",
|
|
13534
|
-
children: /* @__PURE__ */ (0,
|
|
12896
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LinkEditorPanel, { state, onClose })
|
|
13535
12897
|
}
|
|
13536
12898
|
)
|
|
13537
12899
|
}
|
|
13538
12900
|
),
|
|
13539
|
-
sectionPickerActive && state.selectedPage ? /* @__PURE__ */ (0,
|
|
12901
|
+
sectionPickerActive && state.selectedPage ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
13540
12902
|
SectionPickerOverlay,
|
|
13541
12903
|
{
|
|
13542
12904
|
pagePath: state.selectedPage.path,
|
|
@@ -16658,7 +16020,6 @@ function readLogoSizeState(content, placement) {
|
|
|
16658
16020
|
function getLogoElement(el) {
|
|
16659
16021
|
const marked = el.closest('[data-ohw-role="logo"], [data-ohw-logo]');
|
|
16660
16022
|
if (marked) return marked;
|
|
16661
|
-
if (el.closest('[data-ohw-editable="icon"]')) return null;
|
|
16662
16023
|
const root = el.closest("nav, [data-ohw-nav-root], footer");
|
|
16663
16024
|
if (!root) return null;
|
|
16664
16025
|
const anchor = el.closest("a");
|
|
@@ -16725,9 +16086,9 @@ function addFooterColumnWithPersist({
|
|
|
16725
16086
|
}
|
|
16726
16087
|
|
|
16727
16088
|
// src/ui/FloatingPanel.tsx
|
|
16728
|
-
var
|
|
16729
|
-
var
|
|
16730
|
-
var
|
|
16089
|
+
var import_react15 = require("react");
|
|
16090
|
+
var import_lucide_react16 = require("lucide-react");
|
|
16091
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
16731
16092
|
var PANEL_WIDTH = 256;
|
|
16732
16093
|
var EDGE_MARGIN = 16;
|
|
16733
16094
|
var HEADER_MIN = 56;
|
|
@@ -16787,10 +16148,10 @@ function FloatingPanel({
|
|
|
16787
16148
|
className,
|
|
16788
16149
|
bodyClassName
|
|
16789
16150
|
}) {
|
|
16790
|
-
const panelRef = (0,
|
|
16791
|
-
const [measured, setMeasured] = (0,
|
|
16792
|
-
const dragRef = (0,
|
|
16793
|
-
const homeRef = (0,
|
|
16151
|
+
const panelRef = (0, import_react15.useRef)(null);
|
|
16152
|
+
const [measured, setMeasured] = (0, import_react15.useState)({ w: PANEL_WIDTH, h: 280 });
|
|
16153
|
+
const dragRef = (0, import_react15.useRef)(null);
|
|
16154
|
+
const homeRef = (0, import_react15.useRef)(null);
|
|
16794
16155
|
if (!open) {
|
|
16795
16156
|
homeRef.current = null;
|
|
16796
16157
|
} else if (position) {
|
|
@@ -16798,17 +16159,17 @@ function FloatingPanel({
|
|
|
16798
16159
|
} else if (homeRef.current == null) {
|
|
16799
16160
|
homeRef.current = defaultFloatingPanelPosition(parentScroll);
|
|
16800
16161
|
}
|
|
16801
|
-
const [liveScroll, setLiveScroll] = (0,
|
|
16162
|
+
const [liveScroll, setLiveScroll] = (0, import_react15.useState)(parentScroll);
|
|
16802
16163
|
const home = position ?? homeRef.current ?? defaultFloatingPanelPosition(parentScroll);
|
|
16803
16164
|
const { y: fittedY, maxHeight } = fitPanelInClip(home.y, liveScroll, measured.h);
|
|
16804
16165
|
const clamped = {
|
|
16805
16166
|
x: clampX(home.x, measured.w),
|
|
16806
16167
|
y: fittedY
|
|
16807
16168
|
};
|
|
16808
|
-
(0,
|
|
16169
|
+
(0, import_react15.useEffect)(() => {
|
|
16809
16170
|
setLiveScroll(parentScroll);
|
|
16810
16171
|
}, [parentScroll]);
|
|
16811
|
-
(0,
|
|
16172
|
+
(0, import_react15.useEffect)(() => {
|
|
16812
16173
|
if (!open) return;
|
|
16813
16174
|
const onParentScroll = (e) => {
|
|
16814
16175
|
if (e.data?.type !== "ow:parent-scroll") return;
|
|
@@ -16818,8 +16179,8 @@ function FloatingPanel({
|
|
|
16818
16179
|
window.addEventListener("message", onParentScroll);
|
|
16819
16180
|
return () => window.removeEventListener("message", onParentScroll);
|
|
16820
16181
|
}, [open]);
|
|
16821
|
-
const positionRef = (0,
|
|
16822
|
-
(0,
|
|
16182
|
+
const positionRef = (0, import_react15.useRef)(position);
|
|
16183
|
+
(0, import_react15.useLayoutEffect)(() => {
|
|
16823
16184
|
if (!open) {
|
|
16824
16185
|
positionRef.current = position;
|
|
16825
16186
|
return;
|
|
@@ -16829,7 +16190,7 @@ function FloatingPanel({
|
|
|
16829
16190
|
}
|
|
16830
16191
|
positionRef.current = position;
|
|
16831
16192
|
}, [open, position, liveScroll, parentScroll]);
|
|
16832
|
-
(0,
|
|
16193
|
+
(0, import_react15.useLayoutEffect)(() => {
|
|
16833
16194
|
if (!open || !panelRef.current) return;
|
|
16834
16195
|
const el = panelRef.current;
|
|
16835
16196
|
const header = el.querySelector("[data-ohw-floating-panel-header]");
|
|
@@ -16838,7 +16199,7 @@ function FloatingPanel({
|
|
|
16838
16199
|
const next = { w: el.offsetWidth || PANEL_WIDTH, h: contentH };
|
|
16839
16200
|
setMeasured((prev) => prev.w === next.w && prev.h === next.h ? prev : next);
|
|
16840
16201
|
}, [open, children, title, context]);
|
|
16841
|
-
const onHeaderPointerDown = (0,
|
|
16202
|
+
const onHeaderPointerDown = (0, import_react15.useCallback)(
|
|
16842
16203
|
(e) => {
|
|
16843
16204
|
if (e.button !== 0) return;
|
|
16844
16205
|
if (e.target.closest("[data-ohw-floating-panel-close]")) return;
|
|
@@ -16857,7 +16218,7 @@ function FloatingPanel({
|
|
|
16857
16218
|
},
|
|
16858
16219
|
[clamped.x, clamped.y]
|
|
16859
16220
|
);
|
|
16860
|
-
const onHeaderPointerMove = (0,
|
|
16221
|
+
const onHeaderPointerMove = (0, import_react15.useCallback)(
|
|
16861
16222
|
(e) => {
|
|
16862
16223
|
const drag = dragRef.current;
|
|
16863
16224
|
if (!drag || drag.pointerId !== e.pointerId) return;
|
|
@@ -16883,7 +16244,7 @@ function FloatingPanel({
|
|
|
16883
16244
|
},
|
|
16884
16245
|
[measured.w, onPositionChange, liveScroll]
|
|
16885
16246
|
);
|
|
16886
|
-
const endDrag = (0,
|
|
16247
|
+
const endDrag = (0, import_react15.useCallback)((e) => {
|
|
16887
16248
|
const drag = dragRef.current;
|
|
16888
16249
|
if (!drag || drag.pointerId !== e.pointerId) return;
|
|
16889
16250
|
dragRef.current = null;
|
|
@@ -16893,13 +16254,13 @@ function FloatingPanel({
|
|
|
16893
16254
|
} catch {
|
|
16894
16255
|
}
|
|
16895
16256
|
}, []);
|
|
16896
|
-
(0,
|
|
16257
|
+
(0, import_react15.useEffect)(() => {
|
|
16897
16258
|
if (open) return;
|
|
16898
16259
|
document.documentElement.removeAttribute("data-ohw-panel-dragging");
|
|
16899
16260
|
}, [open]);
|
|
16900
|
-
(0,
|
|
16261
|
+
(0, import_react15.useEffect)(() => () => document.documentElement.removeAttribute("data-ohw-panel-dragging"), []);
|
|
16901
16262
|
if (!open) return null;
|
|
16902
|
-
return /* @__PURE__ */ (0,
|
|
16263
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
16903
16264
|
"div",
|
|
16904
16265
|
{
|
|
16905
16266
|
ref: panelRef,
|
|
@@ -16916,7 +16277,7 @@ function FloatingPanel({
|
|
|
16916
16277
|
onPointerDown: (e) => e.stopPropagation(),
|
|
16917
16278
|
onClick: (e) => e.stopPropagation(),
|
|
16918
16279
|
children: [
|
|
16919
|
-
/* @__PURE__ */ (0,
|
|
16280
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
16920
16281
|
"div",
|
|
16921
16282
|
{
|
|
16922
16283
|
"data-ohw-floating-panel-header": "",
|
|
@@ -16926,14 +16287,14 @@ function FloatingPanel({
|
|
|
16926
16287
|
onPointerUp: endDrag,
|
|
16927
16288
|
onPointerCancel: endDrag,
|
|
16928
16289
|
children: [
|
|
16929
|
-
/* @__PURE__ */ (0,
|
|
16930
|
-
/* @__PURE__ */ (0,
|
|
16931
|
-
icon ? /* @__PURE__ */ (0,
|
|
16932
|
-
/* @__PURE__ */ (0,
|
|
16290
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
|
|
16291
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
16292
|
+
icon ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "shrink-0 text-foreground", children: icon }) : null,
|
|
16293
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "min-w-0 flex-1 text-lg font-semibold leading-7 text-foreground", children: title })
|
|
16933
16294
|
] }),
|
|
16934
|
-
context ? /* @__PURE__ */ (0,
|
|
16295
|
+
context ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "w-full text-sm leading-5 text-muted-foreground", children: context }) : null
|
|
16935
16296
|
] }),
|
|
16936
|
-
/* @__PURE__ */ (0,
|
|
16297
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
16937
16298
|
"button",
|
|
16938
16299
|
{
|
|
16939
16300
|
type: "button",
|
|
@@ -16945,13 +16306,13 @@ function FloatingPanel({
|
|
|
16945
16306
|
onClose();
|
|
16946
16307
|
},
|
|
16947
16308
|
onPointerDown: (e) => e.stopPropagation(),
|
|
16948
|
-
children: /* @__PURE__ */ (0,
|
|
16309
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react16.X, { size: 16, "aria-hidden": true })
|
|
16949
16310
|
}
|
|
16950
16311
|
)
|
|
16951
16312
|
]
|
|
16952
16313
|
}
|
|
16953
16314
|
),
|
|
16954
|
-
/* @__PURE__ */ (0,
|
|
16315
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
16955
16316
|
"div",
|
|
16956
16317
|
{
|
|
16957
16318
|
"data-ohw-floating-panel-body": "",
|
|
@@ -16969,15 +16330,15 @@ function FloatingPanel({
|
|
|
16969
16330
|
}
|
|
16970
16331
|
|
|
16971
16332
|
// src/ui/socials-display-panel.tsx
|
|
16972
|
-
var
|
|
16333
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
16973
16334
|
function DisplaySwitch({
|
|
16974
16335
|
label,
|
|
16975
16336
|
checked,
|
|
16976
16337
|
disabled,
|
|
16977
16338
|
onChange
|
|
16978
16339
|
}) {
|
|
16979
|
-
return /* @__PURE__ */ (0,
|
|
16980
|
-
/* @__PURE__ */ (0,
|
|
16340
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex w-full items-center gap-2", children: [
|
|
16341
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
16981
16342
|
"span",
|
|
16982
16343
|
{
|
|
16983
16344
|
className: cn(
|
|
@@ -16987,7 +16348,7 @@ function DisplaySwitch({
|
|
|
16987
16348
|
children: label
|
|
16988
16349
|
}
|
|
16989
16350
|
),
|
|
16990
|
-
/* @__PURE__ */ (0,
|
|
16351
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
16991
16352
|
"button",
|
|
16992
16353
|
{
|
|
16993
16354
|
type: "button",
|
|
@@ -17001,7 +16362,7 @@ function DisplaySwitch({
|
|
|
17001
16362
|
checked ? "bg-bridge-primary" : "bg-primary-50",
|
|
17002
16363
|
disabled ? "cursor-default opacity-50" : "cursor-pointer"
|
|
17003
16364
|
),
|
|
17004
|
-
children: /* @__PURE__ */ (0,
|
|
16365
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
17005
16366
|
"span",
|
|
17006
16367
|
{
|
|
17007
16368
|
className: cn(
|
|
@@ -17015,8 +16376,8 @@ function DisplaySwitch({
|
|
|
17015
16376
|
] });
|
|
17016
16377
|
}
|
|
17017
16378
|
function SocialsDisplayPanel({ display, onChange, className }) {
|
|
17018
|
-
return /* @__PURE__ */ (0,
|
|
17019
|
-
/* @__PURE__ */ (0,
|
|
16379
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: cn("flex w-full flex-col gap-3", className), children: [
|
|
16380
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
17020
16381
|
DisplaySwitch,
|
|
17021
16382
|
{
|
|
17022
16383
|
label: "Text",
|
|
@@ -17025,7 +16386,7 @@ function SocialsDisplayPanel({ display, onChange, className }) {
|
|
|
17025
16386
|
onChange: (text) => onChange({ ...display, text })
|
|
17026
16387
|
}
|
|
17027
16388
|
),
|
|
17028
|
-
/* @__PURE__ */ (0,
|
|
16389
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
17029
16390
|
DisplaySwitch,
|
|
17030
16391
|
{
|
|
17031
16392
|
label: "Icon",
|
|
@@ -17038,7 +16399,7 @@ function SocialsDisplayPanel({ display, onChange, className }) {
|
|
|
17038
16399
|
}
|
|
17039
16400
|
|
|
17040
16401
|
// src/ui/button-style-panel.tsx
|
|
17041
|
-
var
|
|
16402
|
+
var import_lucide_react17 = require("lucide-react");
|
|
17042
16403
|
|
|
17043
16404
|
// src/lib/button-styles.ts
|
|
17044
16405
|
var BUTTON_VARIANTS_KEY = "__ohw_button_variants";
|
|
@@ -17741,7 +17102,7 @@ function withAssignment(content, id, assignment) {
|
|
|
17741
17102
|
}
|
|
17742
17103
|
|
|
17743
17104
|
// src/ui/button-style-panel.tsx
|
|
17744
|
-
var
|
|
17105
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
17745
17106
|
var SIZE_LABEL = { s: "S", m: "M", l: "L" };
|
|
17746
17107
|
function ButtonStylePanel({
|
|
17747
17108
|
variants,
|
|
@@ -17755,15 +17116,15 @@ function ButtonStylePanel({
|
|
|
17755
17116
|
}) {
|
|
17756
17117
|
const preview = scaleGeometry(sizes.m, 0.75);
|
|
17757
17118
|
const label = previewLabel.trim() || "Book Now";
|
|
17758
|
-
return /* @__PURE__ */ (0,
|
|
17759
|
-
/* @__PURE__ */ (0,
|
|
17760
|
-
/* @__PURE__ */ (0,
|
|
17761
|
-
/* @__PURE__ */ (0,
|
|
17119
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex w-full flex-col gap-5", children: [
|
|
17120
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("section", { className: "flex w-full flex-col gap-2.5", children: [
|
|
17121
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h3", { className: "text-xs font-semibold uppercase leading-4 tracking-[0.6px] text-stone-500 font-sans", children: "Variants" }),
|
|
17122
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex w-full flex-col gap-2.5", children: BUTTON_VARIANT_IDS.map((id) => {
|
|
17762
17123
|
const chrome = variants[id];
|
|
17763
17124
|
const selected = id === variant;
|
|
17764
17125
|
const hasBorder = parseFloat(chrome.borderWidth) > 0;
|
|
17765
17126
|
const cardSlot = previewSlotForChrome(chrome, slotBackground);
|
|
17766
|
-
return /* @__PURE__ */ (0,
|
|
17127
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
17767
17128
|
"button",
|
|
17768
17129
|
{
|
|
17769
17130
|
type: "button",
|
|
@@ -17779,12 +17140,12 @@ function ButtonStylePanel({
|
|
|
17779
17140
|
selected ? "border-2 border-primary" : "border border-border"
|
|
17780
17141
|
),
|
|
17781
17142
|
children: [
|
|
17782
|
-
/* @__PURE__ */ (0,
|
|
17143
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
17783
17144
|
"div",
|
|
17784
17145
|
{
|
|
17785
17146
|
className: "flex w-full items-center justify-center py-4",
|
|
17786
17147
|
style: { background: cardSlot },
|
|
17787
|
-
children: /* @__PURE__ */ (0,
|
|
17148
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
17788
17149
|
"span",
|
|
17789
17150
|
{
|
|
17790
17151
|
className: "inline-flex items-center justify-center whitespace-nowrap font-semibold uppercase leading-none",
|
|
@@ -17806,12 +17167,12 @@ function ButtonStylePanel({
|
|
|
17806
17167
|
)
|
|
17807
17168
|
}
|
|
17808
17169
|
),
|
|
17809
|
-
selected ? /* @__PURE__ */ (0,
|
|
17170
|
+
selected ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
17810
17171
|
"span",
|
|
17811
17172
|
{
|
|
17812
17173
|
className: "absolute right-0.5 top-0.5 flex size-5 items-center justify-center rounded-full bg-primary text-primary-foreground",
|
|
17813
17174
|
"aria-hidden": true,
|
|
17814
|
-
children: /* @__PURE__ */ (0,
|
|
17175
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react17.Check, { className: "size-3", strokeWidth: 3 })
|
|
17815
17176
|
}
|
|
17816
17177
|
) : null
|
|
17817
17178
|
]
|
|
@@ -17820,9 +17181,9 @@ function ButtonStylePanel({
|
|
|
17820
17181
|
);
|
|
17821
17182
|
}) })
|
|
17822
17183
|
] }),
|
|
17823
|
-
/* @__PURE__ */ (0,
|
|
17824
|
-
/* @__PURE__ */ (0,
|
|
17825
|
-
/* @__PURE__ */ (0,
|
|
17184
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("section", { className: "flex w-full flex-col gap-2.5", children: [
|
|
17185
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h3", { className: "text-xs font-semibold uppercase leading-4 tracking-[0.6px] text-stone-500 font-sans", children: "Size" }),
|
|
17186
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
17826
17187
|
"div",
|
|
17827
17188
|
{
|
|
17828
17189
|
className: "flex w-full items-start rounded-lg bg-stone-100 p-1",
|
|
@@ -17830,7 +17191,7 @@ function ButtonStylePanel({
|
|
|
17830
17191
|
"aria-label": "Size",
|
|
17831
17192
|
children: BUTTON_SIZE_IDS.map((id) => {
|
|
17832
17193
|
const selected = id === size;
|
|
17833
|
-
return /* @__PURE__ */ (0,
|
|
17194
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
17834
17195
|
"button",
|
|
17835
17196
|
{
|
|
17836
17197
|
type: "button",
|
|
@@ -18734,7 +18095,7 @@ function hitTestNavDropSlot(clientX, clientY, draggedHrefKey, draggedEl) {
|
|
|
18734
18095
|
}
|
|
18735
18096
|
|
|
18736
18097
|
// src/useNavItemDrag.ts
|
|
18737
|
-
var
|
|
18098
|
+
var import_react16 = require("react");
|
|
18738
18099
|
function useNavItemDrag({
|
|
18739
18100
|
isEditMode,
|
|
18740
18101
|
editContentRef,
|
|
@@ -18758,11 +18119,11 @@ function useNavItemDrag({
|
|
|
18758
18119
|
getNavigationItemAnchor: getNavigationItemAnchor2,
|
|
18759
18120
|
isDragHandleDisabled: isDragHandleDisabled2
|
|
18760
18121
|
}) {
|
|
18761
|
-
const navDragRef = (0,
|
|
18762
|
-
const [navDropSlots, setNavDropSlots] = (0,
|
|
18763
|
-
const [activeNavDropIndex, setActiveNavDropIndex] = (0,
|
|
18764
|
-
const navPointerDragRef = (0,
|
|
18765
|
-
const clearNavDragVisuals = (0,
|
|
18122
|
+
const navDragRef = (0, import_react16.useRef)(null);
|
|
18123
|
+
const [navDropSlots, setNavDropSlots] = (0, import_react16.useState)([]);
|
|
18124
|
+
const [activeNavDropIndex, setActiveNavDropIndex] = (0, import_react16.useState)(null);
|
|
18125
|
+
const navPointerDragRef = (0, import_react16.useRef)(null);
|
|
18126
|
+
const clearNavDragVisuals = (0, import_react16.useCallback)(() => {
|
|
18766
18127
|
const session = navDragRef.current;
|
|
18767
18128
|
const nestedHrefKey = session?.draggedEl?.closest("[data-ohw-nav-children]") != null ? session.hrefKey : null;
|
|
18768
18129
|
navDragRef.current = null;
|
|
@@ -18795,7 +18156,7 @@ function useNavItemDrag({
|
|
|
18795
18156
|
document.documentElement.removeAttribute("data-ohw-nav-dragging-root");
|
|
18796
18157
|
unlockItemDragInteraction();
|
|
18797
18158
|
}, [setDraggedItemRect, setIsItemDragging, setSiblingHintRects]);
|
|
18798
|
-
const refreshNavDragVisuals = (0,
|
|
18159
|
+
const refreshNavDragVisuals = (0, import_react16.useCallback)(
|
|
18799
18160
|
(session, activeSlot, clientX, clientY) => {
|
|
18800
18161
|
setDraggedItemRect(session.draggedEl.getBoundingClientRect());
|
|
18801
18162
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -18813,13 +18174,13 @@ function useNavItemDrag({
|
|
|
18813
18174
|
},
|
|
18814
18175
|
[setDraggedItemRect, setSiblingHintRects]
|
|
18815
18176
|
);
|
|
18816
|
-
const refreshNavDragVisualsRef = (0,
|
|
18177
|
+
const refreshNavDragVisualsRef = (0, import_react16.useRef)(refreshNavDragVisuals);
|
|
18817
18178
|
refreshNavDragVisualsRef.current = refreshNavDragVisuals;
|
|
18818
|
-
const commitNavDragRef = (0,
|
|
18179
|
+
const commitNavDragRef = (0, import_react16.useRef)(() => {
|
|
18819
18180
|
});
|
|
18820
|
-
const beginNavDragRef = (0,
|
|
18181
|
+
const beginNavDragRef = (0, import_react16.useRef)(() => {
|
|
18821
18182
|
});
|
|
18822
|
-
const beginNavDrag = (0,
|
|
18183
|
+
const beginNavDrag = (0, import_react16.useCallback)(
|
|
18823
18184
|
(session) => {
|
|
18824
18185
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
18825
18186
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -18858,7 +18219,7 @@ function useNavItemDrag({
|
|
|
18858
18219
|
]
|
|
18859
18220
|
);
|
|
18860
18221
|
beginNavDragRef.current = beginNavDrag;
|
|
18861
|
-
const commitNavDrag = (0,
|
|
18222
|
+
const commitNavDrag = (0, import_react16.useCallback)(
|
|
18862
18223
|
(clientX, clientY) => {
|
|
18863
18224
|
const session = navDragRef.current;
|
|
18864
18225
|
if (!session) {
|
|
@@ -18937,7 +18298,7 @@ function useNavItemDrag({
|
|
|
18937
18298
|
[clearNavDragVisuals, deselectRef, editContentRef, postToParentRef, selectRef]
|
|
18938
18299
|
);
|
|
18939
18300
|
commitNavDragRef.current = commitNavDrag;
|
|
18940
|
-
const startNavLinkDrag = (0,
|
|
18301
|
+
const startNavLinkDrag = (0, import_react16.useCallback)(
|
|
18941
18302
|
(anchor, clientX, clientY, wasSelected) => {
|
|
18942
18303
|
if (footerDragRef.current) return false;
|
|
18943
18304
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -18955,7 +18316,7 @@ function useNavItemDrag({
|
|
|
18955
18316
|
},
|
|
18956
18317
|
[beginNavDrag, footerDragRef, isDragHandleDisabled2, isCtaButton]
|
|
18957
18318
|
);
|
|
18958
|
-
const onNavDragOver = (0,
|
|
18319
|
+
const onNavDragOver = (0, import_react16.useCallback)(
|
|
18959
18320
|
(e) => {
|
|
18960
18321
|
const session = navDragRef.current;
|
|
18961
18322
|
if (!session) return false;
|
|
@@ -18967,7 +18328,7 @@ function useNavItemDrag({
|
|
|
18967
18328
|
},
|
|
18968
18329
|
[]
|
|
18969
18330
|
);
|
|
18970
|
-
(0,
|
|
18331
|
+
(0, import_react16.useEffect)(() => {
|
|
18971
18332
|
if (!isEditMode) return;
|
|
18972
18333
|
const THRESHOLD = 10;
|
|
18973
18334
|
const resolveWasSelected = (el) => {
|
|
@@ -19094,7 +18455,7 @@ function useNavItemDrag({
|
|
|
19094
18455
|
setLinkPopover,
|
|
19095
18456
|
suppressNextClickRef
|
|
19096
18457
|
]);
|
|
19097
|
-
const armNavPressFromChrome = (0,
|
|
18458
|
+
const armNavPressFromChrome = (0, import_react16.useCallback)(
|
|
19098
18459
|
(selected, clientX, clientY, pointerId) => {
|
|
19099
18460
|
const hrefKey = selected.getAttribute("data-ohw-href-key");
|
|
19100
18461
|
if (!hrefKey || !isNavbarHrefKey(hrefKey)) return false;
|
|
@@ -19126,7 +18487,7 @@ function useNavItemDrag({
|
|
|
19126
18487
|
}
|
|
19127
18488
|
|
|
19128
18489
|
// src/useSectionDrag.ts
|
|
19129
|
-
var
|
|
18490
|
+
var import_react17 = require("react");
|
|
19130
18491
|
|
|
19131
18492
|
// src/lib/section-dnd.ts
|
|
19132
18493
|
function isFooterSection(el) {
|
|
@@ -19219,21 +18580,21 @@ function useSectionDrag({
|
|
|
19219
18580
|
suppressNextClickRef,
|
|
19220
18581
|
suppressClickUntilRef
|
|
19221
18582
|
}) {
|
|
19222
|
-
const sectionDragRef = (0,
|
|
19223
|
-
const [sectionDropSlots, setSectionDropSlots] = (0,
|
|
19224
|
-
const [activeSectionDropIndex, setActiveSectionDropIndex] = (0,
|
|
19225
|
-
const [isSectionDragging, setIsSectionDragging] = (0,
|
|
19226
|
-
const sectionPointerDragRef = (0,
|
|
19227
|
-
const autoScrollRafRef = (0,
|
|
19228
|
-
const autoScrollDeltaRef = (0,
|
|
19229
|
-
const stopAutoScroll = (0,
|
|
18583
|
+
const sectionDragRef = (0, import_react17.useRef)(null);
|
|
18584
|
+
const [sectionDropSlots, setSectionDropSlots] = (0, import_react17.useState)([]);
|
|
18585
|
+
const [activeSectionDropIndex, setActiveSectionDropIndex] = (0, import_react17.useState)(null);
|
|
18586
|
+
const [isSectionDragging, setIsSectionDragging] = (0, import_react17.useState)(false);
|
|
18587
|
+
const sectionPointerDragRef = (0, import_react17.useRef)(null);
|
|
18588
|
+
const autoScrollRafRef = (0, import_react17.useRef)(null);
|
|
18589
|
+
const autoScrollDeltaRef = (0, import_react17.useRef)(0);
|
|
18590
|
+
const stopAutoScroll = (0, import_react17.useCallback)(() => {
|
|
19230
18591
|
if (autoScrollRafRef.current != null) {
|
|
19231
18592
|
cancelAnimationFrame(autoScrollRafRef.current);
|
|
19232
18593
|
autoScrollRafRef.current = null;
|
|
19233
18594
|
}
|
|
19234
18595
|
autoScrollDeltaRef.current = 0;
|
|
19235
18596
|
}, []);
|
|
19236
|
-
const tickAutoScroll = (0,
|
|
18597
|
+
const tickAutoScroll = (0, import_react17.useCallback)(() => {
|
|
19237
18598
|
if (!sectionDragRef.current) {
|
|
19238
18599
|
stopAutoScroll();
|
|
19239
18600
|
return;
|
|
@@ -19243,7 +18604,7 @@ function useSectionDrag({
|
|
|
19243
18604
|
}
|
|
19244
18605
|
autoScrollRafRef.current = requestAnimationFrame(tickAutoScroll);
|
|
19245
18606
|
}, [postToParentRef, stopAutoScroll]);
|
|
19246
|
-
const updateAutoScroll = (0,
|
|
18607
|
+
const updateAutoScroll = (0, import_react17.useCallback)(
|
|
19247
18608
|
(clientY) => {
|
|
19248
18609
|
const clip = getIframeChromeClip(parentScrollRef.current);
|
|
19249
18610
|
let delta = 0;
|
|
@@ -19265,7 +18626,7 @@ function useSectionDrag({
|
|
|
19265
18626
|
},
|
|
19266
18627
|
[parentScrollRef, stopAutoScroll, tickAutoScroll]
|
|
19267
18628
|
);
|
|
19268
|
-
const clearSectionDragVisuals = (0,
|
|
18629
|
+
const clearSectionDragVisuals = (0, import_react17.useCallback)(() => {
|
|
19269
18630
|
sectionDragRef.current?.draggedEl.removeAttribute("data-ohw-section-dragging");
|
|
19270
18631
|
sectionDragRef.current = null;
|
|
19271
18632
|
setSectionDropSlots([]);
|
|
@@ -19275,7 +18636,7 @@ function useSectionDrag({
|
|
|
19275
18636
|
document.documentElement.removeAttribute("data-ohw-section-dragging-root");
|
|
19276
18637
|
unlockItemDragInteraction();
|
|
19277
18638
|
}, [stopAutoScroll]);
|
|
19278
|
-
const refreshSectionDragVisuals = (0,
|
|
18639
|
+
const refreshSectionDragVisuals = (0, import_react17.useCallback)(
|
|
19279
18640
|
(session, clientX, clientY) => {
|
|
19280
18641
|
session.lastClientX = clientX;
|
|
19281
18642
|
session.lastClientY = clientY;
|
|
@@ -19289,7 +18650,7 @@ function useSectionDrag({
|
|
|
19289
18650
|
},
|
|
19290
18651
|
[updateAutoScroll]
|
|
19291
18652
|
);
|
|
19292
|
-
const beginSectionDrag = (0,
|
|
18653
|
+
const beginSectionDrag = (0, import_react17.useCallback)(
|
|
19293
18654
|
(session) => {
|
|
19294
18655
|
sectionDragRef.current = session;
|
|
19295
18656
|
setIsSectionDragging(true);
|
|
@@ -19300,7 +18661,7 @@ function useSectionDrag({
|
|
|
19300
18661
|
},
|
|
19301
18662
|
[refreshSectionDragVisuals]
|
|
19302
18663
|
);
|
|
19303
|
-
const commitSectionDrag = (0,
|
|
18664
|
+
const commitSectionDrag = (0, import_react17.useCallback)(() => {
|
|
19304
18665
|
const session = sectionDragRef.current;
|
|
19305
18666
|
if (!session) {
|
|
19306
18667
|
clearSectionDragVisuals();
|
|
@@ -19329,7 +18690,7 @@ function useSectionDrag({
|
|
|
19329
18690
|
});
|
|
19330
18691
|
});
|
|
19331
18692
|
}, [clearSectionDragVisuals, editContentRef, postToParentRef]);
|
|
19332
|
-
const startSectionPressDrag = (0,
|
|
18693
|
+
const startSectionPressDrag = (0, import_react17.useCallback)(
|
|
19333
18694
|
(el, clientX, clientY, pointerId) => {
|
|
19334
18695
|
if (navDragRef.current || footerDragRef.current || sectionDragRef.current) return false;
|
|
19335
18696
|
const instanceId = instanceIdOf(el);
|
|
@@ -19346,7 +18707,7 @@ function useSectionDrag({
|
|
|
19346
18707
|
},
|
|
19347
18708
|
[footerDragRef, navDragRef]
|
|
19348
18709
|
);
|
|
19349
|
-
(0,
|
|
18710
|
+
(0, import_react17.useEffect)(() => {
|
|
19350
18711
|
if (!isEditMode) return;
|
|
19351
18712
|
const onPointerDown = (e) => {
|
|
19352
18713
|
if (e.button !== 0) return;
|
|
@@ -19451,8 +18812,8 @@ function useSectionDrag({
|
|
|
19451
18812
|
}
|
|
19452
18813
|
|
|
19453
18814
|
// src/ui/footer-container-chrome.tsx
|
|
19454
|
-
var
|
|
19455
|
-
var
|
|
18815
|
+
var import_lucide_react18 = require("lucide-react");
|
|
18816
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
19456
18817
|
function FooterContainerChrome({
|
|
19457
18818
|
rect,
|
|
19458
18819
|
onAdd,
|
|
@@ -19460,7 +18821,7 @@ function FooterContainerChrome({
|
|
|
19460
18821
|
}) {
|
|
19461
18822
|
const chromeGap = 6;
|
|
19462
18823
|
const buttonMargin = 7;
|
|
19463
|
-
return /* @__PURE__ */ (0,
|
|
18824
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
19464
18825
|
"div",
|
|
19465
18826
|
{
|
|
19466
18827
|
"data-ohw-footer-container-chrome": "",
|
|
@@ -19472,8 +18833,8 @@ function FooterContainerChrome({
|
|
|
19472
18833
|
width: rect.width + chromeGap * 2,
|
|
19473
18834
|
height: rect.height + chromeGap * 2
|
|
19474
18835
|
},
|
|
19475
|
-
children: /* @__PURE__ */ (0,
|
|
19476
|
-
/* @__PURE__ */ (0,
|
|
18836
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Tooltip, { children: [
|
|
18837
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
19477
18838
|
"button",
|
|
19478
18839
|
{
|
|
19479
18840
|
type: "button",
|
|
@@ -19492,17 +18853,17 @@ function FooterContainerChrome({
|
|
|
19492
18853
|
if (addDisabled) return;
|
|
19493
18854
|
onAdd();
|
|
19494
18855
|
},
|
|
19495
|
-
children: /* @__PURE__ */ (0,
|
|
18856
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react18.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
19496
18857
|
}
|
|
19497
18858
|
) }),
|
|
19498
|
-
/* @__PURE__ */ (0,
|
|
18859
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipContent, { side: "bottom", sideOffset: 9, children: addDisabled ? "Maximum columns reached" : "Add item" })
|
|
19499
18860
|
] })
|
|
19500
18861
|
}
|
|
19501
18862
|
) });
|
|
19502
18863
|
}
|
|
19503
18864
|
|
|
19504
18865
|
// src/lib/carousel.ts
|
|
19505
|
-
var
|
|
18866
|
+
var import_react18 = require("react");
|
|
19506
18867
|
var CAROUSEL_ATTR = "data-ohw-carousel";
|
|
19507
18868
|
var CAROUSEL_VALUE_ATTR = "data-ohw-carousel-value";
|
|
19508
18869
|
var CAROUSEL_SLIDE_ATTR = "data-ohw-carousel-slide";
|
|
@@ -19564,8 +18925,8 @@ function applyCarouselNode(key, val) {
|
|
|
19564
18925
|
return true;
|
|
19565
18926
|
}
|
|
19566
18927
|
function useOhwCarousel(key, initial) {
|
|
19567
|
-
const [images, setImages] = (0,
|
|
19568
|
-
(0,
|
|
18928
|
+
const [images, setImages] = (0, import_react18.useState)(initial);
|
|
18929
|
+
(0, import_react18.useEffect)(() => {
|
|
19569
18930
|
const el = document.querySelector(
|
|
19570
18931
|
`[${CAROUSEL_ATTR}][data-ohw-key="${CSS.escape(key)}"]`
|
|
19571
18932
|
);
|
|
@@ -19984,14 +19345,14 @@ function deleteSelectedNavFooterItem(deps) {
|
|
|
19984
19345
|
}
|
|
19985
19346
|
|
|
19986
19347
|
// src/ui/navbar-container-chrome.tsx
|
|
19987
|
-
var
|
|
19988
|
-
var
|
|
19348
|
+
var import_lucide_react19 = require("lucide-react");
|
|
19349
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
19989
19350
|
function NavbarContainerChrome({
|
|
19990
19351
|
rect,
|
|
19991
19352
|
onAdd
|
|
19992
19353
|
}) {
|
|
19993
19354
|
const chromeGap = 6;
|
|
19994
|
-
return /* @__PURE__ */ (0,
|
|
19355
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
19995
19356
|
"div",
|
|
19996
19357
|
{
|
|
19997
19358
|
"data-ohw-navbar-container-chrome": "",
|
|
@@ -20003,7 +19364,7 @@ function NavbarContainerChrome({
|
|
|
20003
19364
|
width: rect.width + chromeGap * 2,
|
|
20004
19365
|
height: rect.height + chromeGap * 2
|
|
20005
19366
|
},
|
|
20006
|
-
children: /* @__PURE__ */ (0,
|
|
19367
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
20007
19368
|
"button",
|
|
20008
19369
|
{
|
|
20009
19370
|
type: "button",
|
|
@@ -20020,7 +19381,7 @@ function NavbarContainerChrome({
|
|
|
20020
19381
|
e.stopPropagation();
|
|
20021
19382
|
onAdd();
|
|
20022
19383
|
},
|
|
20023
|
-
children: /* @__PURE__ */ (0,
|
|
19384
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react19.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
20024
19385
|
}
|
|
20025
19386
|
)
|
|
20026
19387
|
}
|
|
@@ -20029,7 +19390,7 @@ function NavbarContainerChrome({
|
|
|
20029
19390
|
|
|
20030
19391
|
// src/ui/drop-indicator.tsx
|
|
20031
19392
|
var React11 = __toESM(require("react"), 1);
|
|
20032
|
-
var
|
|
19393
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
20033
19394
|
var dropIndicatorVariants = cva(
|
|
20034
19395
|
"ov-gap-line pointer-events-none shrink-0 transition-opacity duration-150",
|
|
20035
19396
|
{
|
|
@@ -20053,7 +19414,7 @@ var dropIndicatorVariants = cva(
|
|
|
20053
19414
|
);
|
|
20054
19415
|
var DropIndicator = React11.forwardRef(
|
|
20055
19416
|
({ className, direction, state, ...props }, ref) => {
|
|
20056
|
-
return /* @__PURE__ */ (0,
|
|
19417
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
20057
19418
|
"div",
|
|
20058
19419
|
{
|
|
20059
19420
|
ref,
|
|
@@ -20070,7 +19431,7 @@ var DropIndicator = React11.forwardRef(
|
|
|
20070
19431
|
DropIndicator.displayName = "DropIndicator";
|
|
20071
19432
|
|
|
20072
19433
|
// src/ui/badge.tsx
|
|
20073
|
-
var
|
|
19434
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
20074
19435
|
var badgeVariants = cva(
|
|
20075
19436
|
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
|
20076
19437
|
{
|
|
@@ -20088,13 +19449,13 @@ var badgeVariants = cva(
|
|
|
20088
19449
|
}
|
|
20089
19450
|
);
|
|
20090
19451
|
function Badge({ className, variant, ...props }) {
|
|
20091
|
-
return /* @__PURE__ */ (0,
|
|
19452
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
|
|
20092
19453
|
}
|
|
20093
19454
|
|
|
20094
19455
|
// src/OhhwellsBridge.tsx
|
|
20095
|
-
var
|
|
20096
|
-
var
|
|
20097
|
-
var
|
|
19456
|
+
var import_lucide_react20 = require("lucide-react");
|
|
19457
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
19458
|
+
var PRIMARY5 = "#0885FE";
|
|
20098
19459
|
var IMAGE_FADE_MS = 300;
|
|
20099
19460
|
var MEDIA_SETTLE_TIMEOUT_MS = 2500;
|
|
20100
19461
|
function runOpacityFade(el, onDone) {
|
|
@@ -20215,7 +19576,7 @@ function duplicateSchedulingWidget(instanceId, scheduleId) {
|
|
|
20215
19576
|
schedulingRoots.set(container, root);
|
|
20216
19577
|
(0, import_react_dom4.flushSync)(() => {
|
|
20217
19578
|
root.render(
|
|
20218
|
-
/* @__PURE__ */ (0,
|
|
19579
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
20219
19580
|
SchedulingWidget,
|
|
20220
19581
|
{
|
|
20221
19582
|
notifyOnConnect: false,
|
|
@@ -20343,7 +19704,7 @@ function mountSchedulingWidget(anchorId, notifyOnConnect = false, scheduleId, be
|
|
|
20343
19704
|
schedulingRoots.set(container, root);
|
|
20344
19705
|
(0, import_react_dom4.flushSync)(() => {
|
|
20345
19706
|
root.render(
|
|
20346
|
-
/* @__PURE__ */ (0,
|
|
19707
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
20347
19708
|
SchedulingWidget,
|
|
20348
19709
|
{
|
|
20349
19710
|
notifyOnConnect,
|
|
@@ -20852,7 +20213,7 @@ function getNavigationSelectionParent(el) {
|
|
|
20852
20213
|
if (!isFooterLinksContainer(el) && (el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isInferredFooterGroup2(el))) {
|
|
20853
20214
|
return getFooterLinksContainer();
|
|
20854
20215
|
}
|
|
20855
|
-
if (el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-nav-drawer") ||
|
|
20216
|
+
if (el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-nav-drawer") || isFooterLinksContainer(el)) {
|
|
20856
20217
|
return getNavigationRoot(el);
|
|
20857
20218
|
}
|
|
20858
20219
|
return null;
|
|
@@ -21074,12 +20435,13 @@ var ICONS = {
|
|
|
21074
20435
|
insertUnorderedList: '<line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>',
|
|
21075
20436
|
insertOrderedList: '<line x1="10" y1="6" x2="21" y2="6"/><line x1="10" y1="12" x2="21" y2="12"/><line x1="10" y1="18" x2="21" y2="18"/><path d="M4 6h1v4"/><path d="M4 10h2"/><path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"/>'
|
|
21076
20437
|
};
|
|
20438
|
+
var HEIGHT_SETTLE_DELAYS = [150, 400, 800];
|
|
21077
20439
|
var SELECTION_CHROME_GAP2 = 4;
|
|
21078
20440
|
var TOOLBAR_STROKE_GAP2 = 4;
|
|
21079
20441
|
var TOOLBAR_OFFSET_FROM_ELEMENT = SELECTION_CHROME_GAP2 + TOOLBAR_STROKE_GAP2;
|
|
21080
20442
|
var HOVER_STROKE_WIDTH = 1.5;
|
|
21081
20443
|
var TEXT_HOVER_SIDE_PAD = 4;
|
|
21082
|
-
var CHROME_PRIMARY = `var(--ohw-primary, ${
|
|
20444
|
+
var CHROME_PRIMARY = `var(--ohw-primary, ${PRIMARY5})`;
|
|
21083
20445
|
var TOOLBAR_GROUPS = [
|
|
21084
20446
|
[
|
|
21085
20447
|
{ cmd: "bold", title: "Bold" },
|
|
@@ -21105,7 +20467,7 @@ function EditGlowChrome({
|
|
|
21105
20467
|
hideHandle = false
|
|
21106
20468
|
}) {
|
|
21107
20469
|
const GAP = SELECTION_CHROME_GAP2;
|
|
21108
|
-
return /* @__PURE__ */ (0,
|
|
20470
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
21109
20471
|
"div",
|
|
21110
20472
|
{
|
|
21111
20473
|
ref: elRef,
|
|
@@ -21120,7 +20482,7 @@ function EditGlowChrome({
|
|
|
21120
20482
|
zIndex: 2147483646
|
|
21121
20483
|
},
|
|
21122
20484
|
children: [
|
|
21123
|
-
/* @__PURE__ */ (0,
|
|
20485
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
21124
20486
|
"div",
|
|
21125
20487
|
{
|
|
21126
20488
|
style: {
|
|
@@ -21134,7 +20496,7 @@ function EditGlowChrome({
|
|
|
21134
20496
|
}
|
|
21135
20497
|
}
|
|
21136
20498
|
),
|
|
21137
|
-
reorderHrefKey && !hideHandle && /* @__PURE__ */ (0,
|
|
20499
|
+
reorderHrefKey && !hideHandle && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
21138
20500
|
"div",
|
|
21139
20501
|
{
|
|
21140
20502
|
"data-ohw-drag-handle-container": "",
|
|
@@ -21146,7 +20508,7 @@ function EditGlowChrome({
|
|
|
21146
20508
|
transform: "translate(calc(-100% - 7px), -50%)",
|
|
21147
20509
|
pointerEvents: dragDisabled ? "none" : "auto"
|
|
21148
20510
|
},
|
|
21149
|
-
children: /* @__PURE__ */ (0,
|
|
20511
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
21150
20512
|
DragHandle,
|
|
21151
20513
|
{
|
|
21152
20514
|
"aria-label": `Reorder ${reorderHrefKey}`,
|
|
@@ -21323,9 +20685,9 @@ function FloatingToolbar({
|
|
|
21323
20685
|
showEditLink,
|
|
21324
20686
|
onEditLink
|
|
21325
20687
|
}) {
|
|
21326
|
-
const localRef =
|
|
21327
|
-
const [measuredW, setMeasuredW] =
|
|
21328
|
-
const setRefs =
|
|
20688
|
+
const localRef = import_react19.default.useRef(null);
|
|
20689
|
+
const [measuredW, setMeasuredW] = import_react19.default.useState(330);
|
|
20690
|
+
const setRefs = import_react19.default.useCallback(
|
|
21329
20691
|
(node) => {
|
|
21330
20692
|
localRef.current = node;
|
|
21331
20693
|
if (typeof elRef === "function") elRef(node);
|
|
@@ -21337,7 +20699,7 @@ function FloatingToolbar({
|
|
|
21337
20699
|
},
|
|
21338
20700
|
[elRef]
|
|
21339
20701
|
);
|
|
21340
|
-
|
|
20702
|
+
import_react19.default.useLayoutEffect(() => {
|
|
21341
20703
|
const node = localRef.current;
|
|
21342
20704
|
if (!node) return;
|
|
21343
20705
|
const update = () => {
|
|
@@ -21350,7 +20712,7 @@ function FloatingToolbar({
|
|
|
21350
20712
|
return () => ro.disconnect();
|
|
21351
20713
|
}, [showEditLink, activeCommands]);
|
|
21352
20714
|
const { top, left, transform } = calcToolbarPos(rect, parentScroll, measuredW);
|
|
21353
|
-
return /* @__PURE__ */ (0,
|
|
20715
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
21354
20716
|
"div",
|
|
21355
20717
|
{
|
|
21356
20718
|
ref: setRefs,
|
|
@@ -21362,12 +20724,12 @@ function FloatingToolbar({
|
|
|
21362
20724
|
zIndex: 2147483647,
|
|
21363
20725
|
pointerEvents: "auto"
|
|
21364
20726
|
},
|
|
21365
|
-
children: /* @__PURE__ */ (0,
|
|
21366
|
-
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0,
|
|
21367
|
-
gi > 0 && /* @__PURE__ */ (0,
|
|
20727
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(CustomToolbar, { children: [
|
|
20728
|
+
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react19.default.Fragment, { children: [
|
|
20729
|
+
gi > 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CustomToolbarDivider, {}),
|
|
21368
20730
|
btns.map((btn) => {
|
|
21369
20731
|
const isActive = activeCommands.has(btn.cmd);
|
|
21370
|
-
return /* @__PURE__ */ (0,
|
|
20732
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
21371
20733
|
CustomToolbarButton,
|
|
21372
20734
|
{
|
|
21373
20735
|
title: btn.title,
|
|
@@ -21376,7 +20738,7 @@ function FloatingToolbar({
|
|
|
21376
20738
|
e.preventDefault();
|
|
21377
20739
|
onCommand(btn.cmd);
|
|
21378
20740
|
},
|
|
21379
|
-
children: /* @__PURE__ */ (0,
|
|
20741
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
21380
20742
|
"svg",
|
|
21381
20743
|
{
|
|
21382
20744
|
width: "16",
|
|
@@ -21397,7 +20759,7 @@ function FloatingToolbar({
|
|
|
21397
20759
|
);
|
|
21398
20760
|
})
|
|
21399
20761
|
] }, gi)),
|
|
21400
|
-
showEditLink ? /* @__PURE__ */ (0,
|
|
20762
|
+
showEditLink ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
21401
20763
|
CustomToolbarButton,
|
|
21402
20764
|
{
|
|
21403
20765
|
type: "button",
|
|
@@ -21411,7 +20773,7 @@ function FloatingToolbar({
|
|
|
21411
20773
|
e.preventDefault();
|
|
21412
20774
|
e.stopPropagation();
|
|
21413
20775
|
},
|
|
21414
|
-
children: /* @__PURE__ */ (0,
|
|
20776
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react20.Link, { className: "size-4 shrink-0", "aria-hidden": true })
|
|
21415
20777
|
}
|
|
21416
20778
|
) : null
|
|
21417
20779
|
] })
|
|
@@ -21428,7 +20790,7 @@ function StateToggle({
|
|
|
21428
20790
|
states,
|
|
21429
20791
|
onStateChange
|
|
21430
20792
|
}) {
|
|
21431
|
-
return /* @__PURE__ */ (0,
|
|
20793
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
21432
20794
|
ToggleGroup,
|
|
21433
20795
|
{
|
|
21434
20796
|
"data-ohw-state-toggle": "",
|
|
@@ -21442,7 +20804,7 @@ function StateToggle({
|
|
|
21442
20804
|
left: rect.right - 8,
|
|
21443
20805
|
transform: "translateX(-100%)"
|
|
21444
20806
|
},
|
|
21445
|
-
children: states.map((state) => /* @__PURE__ */ (0,
|
|
20807
|
+
children: states.map((state) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
|
|
21446
20808
|
}
|
|
21447
20809
|
);
|
|
21448
20810
|
}
|
|
@@ -21459,9 +20821,9 @@ var OHW_LOADER_STYLE = {
|
|
|
21459
20821
|
justifyContent: "center"
|
|
21460
20822
|
};
|
|
21461
20823
|
function OhwLoaderSpinner() {
|
|
21462
|
-
return /* @__PURE__ */ (0,
|
|
21463
|
-
/* @__PURE__ */ (0,
|
|
21464
|
-
/* @__PURE__ */ (0,
|
|
20824
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("svg", { width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", "aria-hidden": true, children: [
|
|
20825
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("circle", { cx: "14", cy: "14", r: "11", stroke: "#E7E5E4", strokeWidth: "3" }),
|
|
20826
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
21465
20827
|
"circle",
|
|
21466
20828
|
{
|
|
21467
20829
|
cx: "14",
|
|
@@ -21471,7 +20833,7 @@ function OhwLoaderSpinner() {
|
|
|
21471
20833
|
strokeWidth: "3",
|
|
21472
20834
|
strokeDasharray: "17 52",
|
|
21473
20835
|
strokeLinecap: "round",
|
|
21474
|
-
children: /* @__PURE__ */ (0,
|
|
20836
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
21475
20837
|
"animateTransform",
|
|
21476
20838
|
{
|
|
21477
20839
|
attributeName: "transform",
|
|
@@ -21487,7 +20849,7 @@ function OhwLoaderSpinner() {
|
|
|
21487
20849
|
] });
|
|
21488
20850
|
}
|
|
21489
20851
|
function OhwBrandMark() {
|
|
21490
|
-
return /* @__PURE__ */ (0,
|
|
20852
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
21491
20853
|
"svg",
|
|
21492
20854
|
{
|
|
21493
20855
|
width: "16",
|
|
@@ -21498,7 +20860,7 @@ function OhwBrandMark() {
|
|
|
21498
20860
|
style: { display: "block", flexShrink: 0 },
|
|
21499
20861
|
xmlns: "http://www.w3.org/2000/svg",
|
|
21500
20862
|
children: [
|
|
21501
|
-
/* @__PURE__ */ (0,
|
|
20863
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
21502
20864
|
"mask",
|
|
21503
20865
|
{
|
|
21504
20866
|
id: "ohw-badge-mark",
|
|
@@ -21508,15 +20870,15 @@ function OhwBrandMark() {
|
|
|
21508
20870
|
y: "0",
|
|
21509
20871
|
width: "48",
|
|
21510
20872
|
height: "48",
|
|
21511
|
-
children: /* @__PURE__ */ (0,
|
|
20873
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { d: "M23.8741 48C37.0594 48 47.7481 37.2548 47.7481 24C47.7481 10.7452 37.0594 0 23.8741 0C10.6888 0 0 10.7452 0 24C0 37.2548 10.6888 48 23.8741 48Z", fill: "white" })
|
|
21512
20874
|
}
|
|
21513
20875
|
),
|
|
21514
|
-
/* @__PURE__ */ (0,
|
|
21515
|
-
/* @__PURE__ */ (0,
|
|
21516
|
-
/* @__PURE__ */ (0,
|
|
21517
|
-
/* @__PURE__ */ (0,
|
|
21518
|
-
/* @__PURE__ */ (0,
|
|
21519
|
-
/* @__PURE__ */ (0,
|
|
20876
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("g", { mask: "url(#ohw-badge-mark)", children: [
|
|
20877
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { d: "M23.8731 48.0497C37.0584 48.0497 47.7472 37.3046 47.7472 24.0497C47.7472 10.7949 37.0584 0.0497208 23.8731 0.0497208C10.6878 0.0497208 -0.000976562 10.7949 -0.000976562 24.0497C-0.000976562 37.3046 10.6878 48.0497 23.8731 48.0497Z", fill: "#0078E5" }),
|
|
20878
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { d: "M17.1307 14.7172C13.1687 14.7172 9.38102 18.1154 8.65114 22.34C8.38885 23.8488 8.5598 25.2581 9.06929 26.4451C6.20005 29.1677 1.77216 27.8721 -1.40212 26.1536C-2.73618 25.4317 -3.92695 27.4745 -2.59037 28.1981C1.33389 30.3226 6.86037 31.6621 10.4402 28.4188C11.4718 29.3859 12.867 29.9621 14.4894 29.9621C18.4161 29.9621 22.2038 26.5318 22.9337 22.34C23.6636 18.1162 21.0566 14.7172 17.1298 14.7172H17.1307ZM19.9798 22.34C19.5281 25.0399 17.2689 27.231 14.9754 27.231C12.6466 27.231 11.1877 25.0399 11.6394 22.34C12.1262 19.6401 14.3151 17.4482 16.6438 17.4482C18.9374 17.4482 20.4667 19.6401 19.9798 22.34Z", fill: "white" }),
|
|
20879
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { d: "M40.0017 27.0262C39.1797 27.081 38.2721 26.995 37.4668 26.7415C37.3344 26.6993 37.28 26.5401 37.3529 26.4205C37.5959 26.0212 37.8255 25.6152 38.009 25.1889C38.1071 24.9918 38.2018 24.793 38.2897 24.5908C38.3274 24.5041 38.4163 24.451 38.5101 24.4619C38.63 24.4754 38.7054 24.4821 38.8881 24.4821L39.1529 24.4796L39.8283 24.4543C45.9229 24.0492 50.4765 20.4319 54.8466 16.9014C56.0172 15.9554 57.6932 17.6208 56.5116 18.5752C51.7687 22.4065 47.1966 26.5081 40.9319 26.9689", fill: "white" }),
|
|
20880
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { d: "M37.9687 24.27C38.4472 23.1319 38.7656 21.9045 38.9609 20.6991C39.5927 16.76 38.5058 14.2193 36.1553 14.2193C34.1835 14.2193 33.1469 17.2427 32.9199 18.8694C32.743 19.9872 32.5914 22.1219 33.6028 23.9524C33.7553 24.259 34.15 24.7712 34.471 25.1259C34.5447 25.2067 34.6746 25.2 34.7349 25.1082C34.9528 24.7788 35.1615 24.4039 35.3584 24.0257C35.5444 23.6677 35.5888 23.6138 35.8587 23.0207C35.8838 22.966 35.8813 22.9002 35.8478 22.8505C35.5888 22.4597 35.2168 21.9787 35.1204 21.4614C34.9184 20.4455 34.9436 19.2257 35.2218 18.1078C35.4413 17.3118 35.7195 16.7844 35.9039 16.5106C35.9466 16.4466 36.0279 16.4129 36.0975 16.4449C36.369 16.5671 36.5827 16.8838 36.7385 17.396C37.0167 18.2089 37.0167 19.3782 36.814 20.6999C36.6991 21.5271 36.4771 22.3729 36.1746 23.1673C36.1293 23.308 36.0757 23.4461 36.0187 23.5826C36.0187 23.5868 36.0187 23.591 36.0187 23.5961C35.9911 23.6946 35.9207 23.8067 35.8846 23.901C35.5536 24.5497 35.2344 25.1697 34.8439 25.7838C34.8388 25.7863 34.8346 25.7914 34.8296 25.7931C34.6528 26.0525 34.4718 26.2901 34.2866 26.4965C34.2774 26.5099 34.2682 26.5234 34.2589 26.5369C34.2405 26.5638 34.2179 26.5815 34.1944 26.595C33.5064 27.3212 32.7665 27.6893 32.0123 27.6893C31.8606 27.6893 31.6838 27.664 31.507 27.4349C31.3042 27.1299 30.85 26.0879 31.2539 22.9112C31.4785 21.3949 31.8011 20.0268 31.931 19.5408C31.9579 19.4413 31.8908 19.3419 31.7886 19.3293L30.0062 19.1162C29.9241 19.1061 29.8478 19.1566 29.8252 19.2366C29.2704 21.1615 27.0305 27.6885 24.9599 27.6885C24.328 27.6885 24.1512 26.6211 24.1001 26.2909C23.775 23.6264 25.528 18.5492 29.5302 16.2267C29.6048 16.1838 29.635 16.0928 29.5998 16.0136L28.9042 14.467C28.8632 14.3752 28.7501 14.3389 28.6638 14.3886C25.8079 16.0414 24.1847 18.5231 23.2915 20.3436C22.2046 22.5793 21.6993 25.0189 21.9515 26.8738C22.1795 28.7794 23.1398 29.872 24.6054 29.872C26.0543 29.872 27.4369 28.9066 28.7098 27.0187C28.7953 26.8915 28.9889 26.9311 29.0149 27.0819C29.2646 28.5283 29.9811 29.872 31.6579 29.872C33.5282 29.872 35.3232 28.7288 36.7134 26.6447C36.7712 26.5874 36.7972 26.5411 36.8181 26.4906C36.8232 26.4931 36.8282 26.4948 36.8332 26.4973C37.01 26.2025 37.181 25.9051 37.3444 25.6027C37.4508 25.4005 37.5572 25.1992 37.6586 24.9945C37.7181 24.874 37.7743 24.7527 37.8262 24.6289C37.838 24.6002 37.8547 24.5665 37.8706 24.5337", fill: "white" }),
|
|
20881
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { d: "M30.5839 31.6397C25.7546 34.8577 19.4773 34.7853 14.6907 31.5243C13.5368 30.7384 12.5044 32.6498 13.6474 33.4281C19.034 37.0985 26.3077 37.096 31.7218 33.488C32.8791 32.7172 31.7478 30.8639 30.5839 31.6397Z", fill: "white" })
|
|
21520
20882
|
] })
|
|
21521
20883
|
]
|
|
21522
20884
|
}
|
|
@@ -21553,7 +20915,7 @@ var OHW_BADGE_LABEL_STYLE = {
|
|
|
21553
20915
|
whiteSpace: "nowrap"
|
|
21554
20916
|
};
|
|
21555
20917
|
function MadeWithOhhWells() {
|
|
21556
|
-
return /* @__PURE__ */ (0,
|
|
20918
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
21557
20919
|
"a",
|
|
21558
20920
|
{
|
|
21559
20921
|
href: "https://ohhwells.com",
|
|
@@ -21563,8 +20925,8 @@ function MadeWithOhhWells() {
|
|
|
21563
20925
|
"data-ohw-badge": "",
|
|
21564
20926
|
style: OHW_BADGE_STYLE,
|
|
21565
20927
|
children: [
|
|
21566
|
-
/* @__PURE__ */ (0,
|
|
21567
|
-
/* @__PURE__ */ (0,
|
|
20928
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(OhwBrandMark, {}),
|
|
20929
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { style: OHW_BADGE_LABEL_STYLE, children: "Made with OhhWells" })
|
|
21568
20930
|
]
|
|
21569
20931
|
}
|
|
21570
20932
|
);
|
|
@@ -21610,8 +20972,8 @@ function OhhwellsBridge() {
|
|
|
21610
20972
|
const router = (0, import_navigation3.useRouter)();
|
|
21611
20973
|
const searchParams = (0, import_navigation3.useSearchParams)();
|
|
21612
20974
|
const isEditMode = isEditSessionActive();
|
|
21613
|
-
const [bridgeRoot, setBridgeRoot] = (0,
|
|
21614
|
-
(0,
|
|
20975
|
+
const [bridgeRoot, setBridgeRoot] = (0, import_react19.useState)(null);
|
|
20976
|
+
(0, import_react19.useEffect)(() => {
|
|
21615
20977
|
const figtreeFontId = "ohw-figtree-font";
|
|
21616
20978
|
if (!document.getElementById(figtreeFontId)) {
|
|
21617
20979
|
const preconnect1 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.googleapis.com" });
|
|
@@ -21637,8 +20999,8 @@ function OhhwellsBridge() {
|
|
|
21637
20999
|
};
|
|
21638
21000
|
}, []);
|
|
21639
21001
|
const subdomainFromQuery = searchParams.get("subdomain");
|
|
21640
|
-
const [subdomain, setSubdomain] = (0,
|
|
21641
|
-
(0,
|
|
21002
|
+
const [subdomain, setSubdomain] = (0, import_react19.useState)(() => resolveSubdomain(subdomainFromQuery));
|
|
21003
|
+
(0, import_react19.useLayoutEffect)(() => {
|
|
21642
21004
|
const next = resolveSubdomain(subdomainFromQuery);
|
|
21643
21005
|
if (next !== subdomain) setSubdomain(next);
|
|
21644
21006
|
if (next) return;
|
|
@@ -21650,7 +21012,7 @@ function OhhwellsBridge() {
|
|
|
21650
21012
|
}, 0);
|
|
21651
21013
|
return () => window.clearTimeout(t);
|
|
21652
21014
|
}, [subdomainFromQuery, subdomain]);
|
|
21653
|
-
(0,
|
|
21015
|
+
(0, import_react19.useEffect)(() => {
|
|
21654
21016
|
if (!subdomainFromQuery || typeof window === "undefined") return;
|
|
21655
21017
|
const url = new URL(window.location.href);
|
|
21656
21018
|
if (!url.searchParams.has("subdomain")) return;
|
|
@@ -21660,45 +21022,45 @@ function OhhwellsBridge() {
|
|
|
21660
21022
|
}, [subdomainFromQuery]);
|
|
21661
21023
|
useLinkHrefGuardian(pathname, subdomain, isEditMode);
|
|
21662
21024
|
useSavedLinkNavigation(isEditMode);
|
|
21663
|
-
const postToParent2 = (0,
|
|
21025
|
+
const postToParent2 = (0, import_react19.useCallback)((data) => {
|
|
21664
21026
|
if (typeof window !== "undefined" && window.parent !== window) {
|
|
21665
21027
|
window.parent.postMessage(data, "*");
|
|
21666
21028
|
}
|
|
21667
21029
|
}, []);
|
|
21668
|
-
const [fetchState, setFetchState] = (0,
|
|
21669
|
-
const [showBranding, setShowBranding] = (0,
|
|
21670
|
-
const autoSaveTimers = (0,
|
|
21671
|
-
const activeElRef = (0,
|
|
21672
|
-
const pointerHeldRef = (0,
|
|
21673
|
-
const selectedElRef = (0,
|
|
21674
|
-
const selectedHrefKeyRef = (0,
|
|
21675
|
-
const selectedFooterColAttrRef = (0,
|
|
21676
|
-
const originalContentRef = (0,
|
|
21677
|
-
const activeStateElRef = (0,
|
|
21678
|
-
const parentScrollRef = (0,
|
|
21679
|
-
const visibleViewportRef = (0,
|
|
21680
|
-
const [dialogPortalContainer, setDialogPortalContainer] = (0,
|
|
21681
|
-
const attachVisibleViewport = (0,
|
|
21030
|
+
const [fetchState, setFetchState] = (0, import_react19.useState)("idle");
|
|
21031
|
+
const [showBranding, setShowBranding] = (0, import_react19.useState)(false);
|
|
21032
|
+
const autoSaveTimers = (0, import_react19.useRef)(/* @__PURE__ */ new Map());
|
|
21033
|
+
const activeElRef = (0, import_react19.useRef)(null);
|
|
21034
|
+
const pointerHeldRef = (0, import_react19.useRef)(false);
|
|
21035
|
+
const selectedElRef = (0, import_react19.useRef)(null);
|
|
21036
|
+
const selectedHrefKeyRef = (0, import_react19.useRef)(null);
|
|
21037
|
+
const selectedFooterColAttrRef = (0, import_react19.useRef)(null);
|
|
21038
|
+
const originalContentRef = (0, import_react19.useRef)(null);
|
|
21039
|
+
const activeStateElRef = (0, import_react19.useRef)(null);
|
|
21040
|
+
const parentScrollRef = (0, import_react19.useRef)(null);
|
|
21041
|
+
const visibleViewportRef = (0, import_react19.useRef)(null);
|
|
21042
|
+
const [dialogPortalContainer, setDialogPortalContainer] = (0, import_react19.useState)(null);
|
|
21043
|
+
const attachVisibleViewport = (0, import_react19.useCallback)((node) => {
|
|
21682
21044
|
visibleViewportRef.current = node;
|
|
21683
21045
|
setDialogPortalContainer(node);
|
|
21684
21046
|
if (node) applyVisibleViewport(node, parentScrollRef.current);
|
|
21685
21047
|
}, []);
|
|
21686
|
-
const toolbarElRef = (0,
|
|
21687
|
-
const glowElRef = (0,
|
|
21688
|
-
const hoveredImageRef = (0,
|
|
21689
|
-
const hoveredImageHasTextOverlapRef = (0,
|
|
21690
|
-
const dragOverElRef = (0,
|
|
21691
|
-
const [mediaHover, setMediaHover] = (0,
|
|
21692
|
-
const [selectedAiSectionId, setSelectedAiSectionId] = (0,
|
|
21693
|
-
const selectedAiSectionIdRef = (0,
|
|
21694
|
-
const handleAiSectionSelectionChange = (0,
|
|
21048
|
+
const toolbarElRef = (0, import_react19.useRef)(null);
|
|
21049
|
+
const glowElRef = (0, import_react19.useRef)(null);
|
|
21050
|
+
const hoveredImageRef = (0, import_react19.useRef)(null);
|
|
21051
|
+
const hoveredImageHasTextOverlapRef = (0, import_react19.useRef)(false);
|
|
21052
|
+
const dragOverElRef = (0, import_react19.useRef)(null);
|
|
21053
|
+
const [mediaHover, setMediaHover] = (0, import_react19.useState)(null);
|
|
21054
|
+
const [selectedAiSectionId, setSelectedAiSectionId] = (0, import_react19.useState)(null);
|
|
21055
|
+
const selectedAiSectionIdRef = (0, import_react19.useRef)(null);
|
|
21056
|
+
const handleAiSectionSelectionChange = (0, import_react19.useCallback)((id) => {
|
|
21695
21057
|
selectedAiSectionIdRef.current = id;
|
|
21696
21058
|
setSelectedAiSectionId(id);
|
|
21697
21059
|
}, []);
|
|
21698
|
-
const [selectedMedia, setSelectedMedia] = (0,
|
|
21699
|
-
const selectedMediaElRef = (0,
|
|
21700
|
-
const mediaKeyDropTokenRef = (0,
|
|
21701
|
-
const clearMediaSelection = (0,
|
|
21060
|
+
const [selectedMedia, setSelectedMedia] = (0, import_react19.useState)(null);
|
|
21061
|
+
const selectedMediaElRef = (0, import_react19.useRef)(null);
|
|
21062
|
+
const mediaKeyDropTokenRef = (0, import_react19.useRef)(0);
|
|
21063
|
+
const clearMediaSelection = (0, import_react19.useCallback)(() => {
|
|
21702
21064
|
const prev = selectedMediaElRef.current;
|
|
21703
21065
|
selectedMediaElRef.current = null;
|
|
21704
21066
|
setSelectedMedia(null);
|
|
@@ -21723,9 +21085,9 @@ function OhhwellsBridge() {
|
|
|
21723
21085
|
window.postMessage({ type: "ow:media-key-drop", token }, "*");
|
|
21724
21086
|
}
|
|
21725
21087
|
}, []);
|
|
21726
|
-
const clearMediaSelectionRef = (0,
|
|
21088
|
+
const clearMediaSelectionRef = (0, import_react19.useRef)(clearMediaSelection);
|
|
21727
21089
|
clearMediaSelectionRef.current = clearMediaSelection;
|
|
21728
|
-
const selectMediaElement = (0,
|
|
21090
|
+
const selectMediaElement = (0, import_react19.useCallback)((el) => {
|
|
21729
21091
|
const r2 = el.getBoundingClientRect();
|
|
21730
21092
|
const video = el.dataset.ohwEditable === "video" ? el.querySelector("video") : null;
|
|
21731
21093
|
selectedMediaElRef.current = el;
|
|
@@ -21749,9 +21111,9 @@ function OhhwellsBridge() {
|
|
|
21749
21111
|
keyLabel: el.dataset.ohwEditable === "video" ? "Video" : el.dataset.ohwEditable === "bg-image" ? "Background" : "Image"
|
|
21750
21112
|
});
|
|
21751
21113
|
}, []);
|
|
21752
|
-
const selectMediaElementRef = (0,
|
|
21114
|
+
const selectMediaElementRef = (0, import_react19.useRef)(selectMediaElement);
|
|
21753
21115
|
selectMediaElementRef.current = selectMediaElement;
|
|
21754
|
-
(0,
|
|
21116
|
+
(0, import_react19.useEffect)(() => {
|
|
21755
21117
|
if (!selectedMedia) return;
|
|
21756
21118
|
const update = () => {
|
|
21757
21119
|
const el = selectedMediaElRef.current;
|
|
@@ -21771,54 +21133,54 @@ function OhhwellsBridge() {
|
|
|
21771
21133
|
window.removeEventListener("resize", update);
|
|
21772
21134
|
};
|
|
21773
21135
|
}, [selectedMedia !== null]);
|
|
21774
|
-
const [carouselHover, setCarouselHover] = (0,
|
|
21775
|
-
const [uploadingRects, setUploadingRects] = (0,
|
|
21776
|
-
const hoveredGapRef = (0,
|
|
21777
|
-
const imageUnhoverTimerRef = (0,
|
|
21778
|
-
const imageShowTimerRef = (0,
|
|
21779
|
-
const editStylesRef = (0,
|
|
21780
|
-
const activateRef = (0,
|
|
21136
|
+
const [carouselHover, setCarouselHover] = (0, import_react19.useState)(null);
|
|
21137
|
+
const [uploadingRects, setUploadingRects] = (0, import_react19.useState)({});
|
|
21138
|
+
const hoveredGapRef = (0, import_react19.useRef)(null);
|
|
21139
|
+
const imageUnhoverTimerRef = (0, import_react19.useRef)(null);
|
|
21140
|
+
const imageShowTimerRef = (0, import_react19.useRef)(null);
|
|
21141
|
+
const editStylesRef = (0, import_react19.useRef)(null);
|
|
21142
|
+
const activateRef = (0, import_react19.useRef)(() => {
|
|
21781
21143
|
});
|
|
21782
|
-
const deactivateRef = (0,
|
|
21144
|
+
const deactivateRef = (0, import_react19.useRef)(() => {
|
|
21783
21145
|
});
|
|
21784
|
-
const selectRef = (0,
|
|
21146
|
+
const selectRef = (0, import_react19.useRef)(() => {
|
|
21785
21147
|
});
|
|
21786
|
-
const selectFrameRef = (0,
|
|
21148
|
+
const selectFrameRef = (0, import_react19.useRef)(() => {
|
|
21787
21149
|
});
|
|
21788
|
-
const selectLogoRef = (0,
|
|
21150
|
+
const selectLogoRef = (0, import_react19.useRef)(() => {
|
|
21789
21151
|
});
|
|
21790
|
-
const openLogoSizePanelRef = (0,
|
|
21152
|
+
const openLogoSizePanelRef = (0, import_react19.useRef)(() => {
|
|
21791
21153
|
});
|
|
21792
|
-
const deselectRef = (0,
|
|
21154
|
+
const deselectRef = (0, import_react19.useRef)(() => {
|
|
21793
21155
|
});
|
|
21794
|
-
const closeFloatingPanelOnlyRef = (0,
|
|
21156
|
+
const closeFloatingPanelOnlyRef = (0, import_react19.useRef)(() => {
|
|
21795
21157
|
});
|
|
21796
|
-
const reselectNavigationItemRef = (0,
|
|
21158
|
+
const reselectNavigationItemRef = (0, import_react19.useRef)(() => {
|
|
21797
21159
|
});
|
|
21798
|
-
const commitNavigationTextEditRef = (0,
|
|
21160
|
+
const commitNavigationTextEditRef = (0, import_react19.useRef)(() => {
|
|
21799
21161
|
});
|
|
21800
|
-
const handleDeleteSelectedRef = (0,
|
|
21801
|
-
const runPendingDeleteUndoRef = (0,
|
|
21802
|
-
const isFooterFrameSelectionRef = (0,
|
|
21803
|
-
const refreshActiveCommandsRef = (0,
|
|
21162
|
+
const handleDeleteSelectedRef = (0, import_react19.useRef)(() => false);
|
|
21163
|
+
const runPendingDeleteUndoRef = (0, import_react19.useRef)(() => false);
|
|
21164
|
+
const isFooterFrameSelectionRef = (0, import_react19.useRef)(false);
|
|
21165
|
+
const refreshActiveCommandsRef = (0, import_react19.useRef)(() => {
|
|
21804
21166
|
});
|
|
21805
|
-
const postToParentRef = (0,
|
|
21167
|
+
const postToParentRef = (0, import_react19.useRef)(postToParent2);
|
|
21806
21168
|
postToParentRef.current = postToParent2;
|
|
21807
|
-
const aiSectionApiRef = (0,
|
|
21808
|
-
const sectionsLoadedRef = (0,
|
|
21809
|
-
const pendingScheduleConfigRequests = (0,
|
|
21810
|
-
const [toolbarRect, setToolbarRect] = (0,
|
|
21811
|
-
const [formPickRect, setFormPickRect] = (0,
|
|
21812
|
-
const formPickElRef = (0,
|
|
21813
|
-
const [formViewState, setFormViewStateUi] = (0,
|
|
21814
|
-
const [formPickCount, setFormPickCount] = (0,
|
|
21815
|
-
const [formHoverRect, setFormHoverRect] = (0,
|
|
21816
|
-
const formHoverElRef = (0,
|
|
21817
|
-
const [fieldPickRect, setFieldPickRect] = (0,
|
|
21818
|
-
const fieldPickElRef = (0,
|
|
21819
|
-
const [fieldPickState, setFieldPickState] = (0,
|
|
21820
|
-
const [fieldTypePickerOpen, setFieldTypePickerOpen] = (0,
|
|
21821
|
-
const clearFormPick = (0,
|
|
21169
|
+
const aiSectionApiRef = (0, import_react19.useRef)(null);
|
|
21170
|
+
const sectionsLoadedRef = (0, import_react19.useRef)(false);
|
|
21171
|
+
const pendingScheduleConfigRequests = (0, import_react19.useRef)([]);
|
|
21172
|
+
const [toolbarRect, setToolbarRect] = (0, import_react19.useState)(null);
|
|
21173
|
+
const [formPickRect, setFormPickRect] = (0, import_react19.useState)(null);
|
|
21174
|
+
const formPickElRef = (0, import_react19.useRef)(null);
|
|
21175
|
+
const [formViewState, setFormViewStateUi] = (0, import_react19.useState)("default");
|
|
21176
|
+
const [formPickCount, setFormPickCount] = (0, import_react19.useState)(null);
|
|
21177
|
+
const [formHoverRect, setFormHoverRect] = (0, import_react19.useState)(null);
|
|
21178
|
+
const formHoverElRef = (0, import_react19.useRef)(null);
|
|
21179
|
+
const [fieldPickRect, setFieldPickRect] = (0, import_react19.useState)(null);
|
|
21180
|
+
const fieldPickElRef = (0, import_react19.useRef)(null);
|
|
21181
|
+
const [fieldPickState, setFieldPickState] = (0, import_react19.useState)(null);
|
|
21182
|
+
const [fieldTypePickerOpen, setFieldTypePickerOpen] = (0, import_react19.useState)(false);
|
|
21183
|
+
const clearFormPick = (0, import_react19.useCallback)(() => {
|
|
21822
21184
|
const form = formPickElRef.current;
|
|
21823
21185
|
const editing = fieldPickElRef.current;
|
|
21824
21186
|
if (commitPlaceholderEdit(editing) && editing) {
|
|
@@ -21838,7 +21200,7 @@ function OhhwellsBridge() {
|
|
|
21838
21200
|
formPickElRef.current = null;
|
|
21839
21201
|
setFormPickRect(null);
|
|
21840
21202
|
}, []);
|
|
21841
|
-
const clearFieldPick = (0,
|
|
21203
|
+
const clearFieldPick = (0, import_react19.useCallback)(() => {
|
|
21842
21204
|
const wrapper = fieldPickElRef.current;
|
|
21843
21205
|
if (commitPlaceholderEdit(wrapper) && wrapper) {
|
|
21844
21206
|
const form = wrapper.closest('[data-ohw-editable="form"]');
|
|
@@ -21848,9 +21210,9 @@ function OhhwellsBridge() {
|
|
|
21848
21210
|
setFieldPickRect(null);
|
|
21849
21211
|
setFieldPickState(null);
|
|
21850
21212
|
}, []);
|
|
21851
|
-
const persistFieldsRef = (0,
|
|
21213
|
+
const persistFieldsRef = (0, import_react19.useRef)(() => {
|
|
21852
21214
|
});
|
|
21853
|
-
const persistFields = (0,
|
|
21215
|
+
const persistFields = (0, import_react19.useCallback)(
|
|
21854
21216
|
(form) => {
|
|
21855
21217
|
const key = formKeyOf(form);
|
|
21856
21218
|
if (!key) return;
|
|
@@ -21861,7 +21223,7 @@ function OhhwellsBridge() {
|
|
|
21861
21223
|
[]
|
|
21862
21224
|
);
|
|
21863
21225
|
persistFieldsRef.current = persistFields;
|
|
21864
|
-
const selectField = (0,
|
|
21226
|
+
const selectField = (0, import_react19.useCallback)((wrapper) => {
|
|
21865
21227
|
if (fieldPickElRef.current && fieldPickElRef.current !== wrapper) {
|
|
21866
21228
|
commitPlaceholderEdit(fieldPickElRef.current);
|
|
21867
21229
|
}
|
|
@@ -21874,7 +21236,7 @@ function OhhwellsBridge() {
|
|
|
21874
21236
|
setFieldPickState({ type: fieldTypeOf(wrapper), required: isFieldRequired(wrapper) });
|
|
21875
21237
|
setFieldTypePickerOpen(false);
|
|
21876
21238
|
}, []);
|
|
21877
|
-
const withSelectedField = (0,
|
|
21239
|
+
const withSelectedField = (0, import_react19.useCallback)(
|
|
21878
21240
|
(run) => {
|
|
21879
21241
|
const wrapper = fieldPickElRef.current;
|
|
21880
21242
|
const form = formPickElRef.current;
|
|
@@ -21887,28 +21249,28 @@ function OhhwellsBridge() {
|
|
|
21887
21249
|
},
|
|
21888
21250
|
[persistFields]
|
|
21889
21251
|
);
|
|
21890
|
-
const handleFieldTypeChange = (0,
|
|
21252
|
+
const handleFieldTypeChange = (0, import_react19.useCallback)(
|
|
21891
21253
|
(type) => withSelectedField((_form, wrapper) => {
|
|
21892
21254
|
applyFieldType(wrapper, type);
|
|
21893
21255
|
selectField(wrapper);
|
|
21894
21256
|
}),
|
|
21895
21257
|
[selectField, withSelectedField]
|
|
21896
21258
|
);
|
|
21897
|
-
const handleFieldRequiredToggle = (0,
|
|
21259
|
+
const handleFieldRequiredToggle = (0, import_react19.useCallback)(
|
|
21898
21260
|
() => withSelectedField((_form, wrapper) => {
|
|
21899
21261
|
setFieldRequired(wrapper, !isFieldRequired(wrapper));
|
|
21900
21262
|
selectField(wrapper);
|
|
21901
21263
|
}),
|
|
21902
21264
|
[selectField, withSelectedField]
|
|
21903
21265
|
);
|
|
21904
|
-
const handleFieldDuplicate = (0,
|
|
21266
|
+
const handleFieldDuplicate = (0, import_react19.useCallback)(
|
|
21905
21267
|
() => withSelectedField((form, wrapper) => {
|
|
21906
21268
|
const copy = duplicateField(form, wrapper);
|
|
21907
21269
|
selectField(copy);
|
|
21908
21270
|
}),
|
|
21909
21271
|
[selectField, withSelectedField]
|
|
21910
21272
|
);
|
|
21911
|
-
const handleFieldDelete = (0,
|
|
21273
|
+
const handleFieldDelete = (0, import_react19.useCallback)(
|
|
21912
21274
|
() => withSelectedField((_form, wrapper) => {
|
|
21913
21275
|
removeField(wrapper);
|
|
21914
21276
|
clearFieldPick();
|
|
@@ -21916,7 +21278,7 @@ function OhhwellsBridge() {
|
|
|
21916
21278
|
}),
|
|
21917
21279
|
[clearFieldPick, withSelectedField]
|
|
21918
21280
|
);
|
|
21919
|
-
const handleAddField = (0,
|
|
21281
|
+
const handleAddField = (0, import_react19.useCallback)(
|
|
21920
21282
|
(type) => {
|
|
21921
21283
|
const form = formPickElRef.current;
|
|
21922
21284
|
if (!form) return;
|
|
@@ -21932,8 +21294,8 @@ function OhhwellsBridge() {
|
|
|
21932
21294
|
},
|
|
21933
21295
|
[persistFields, selectField]
|
|
21934
21296
|
);
|
|
21935
|
-
const fieldDragRef = (0,
|
|
21936
|
-
const buildFieldDropSlots = (0,
|
|
21297
|
+
const fieldDragRef = (0, import_react19.useRef)(null);
|
|
21298
|
+
const buildFieldDropSlots = (0, import_react19.useCallback)((form, draggedKey) => {
|
|
21937
21299
|
const others = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== draggedKey);
|
|
21938
21300
|
const slots = others.map((el) => {
|
|
21939
21301
|
const rect = el.getBoundingClientRect();
|
|
@@ -21946,7 +21308,7 @@ function OhhwellsBridge() {
|
|
|
21946
21308
|
}
|
|
21947
21309
|
return slots;
|
|
21948
21310
|
}, []);
|
|
21949
|
-
const handleFieldDragStart = (0,
|
|
21311
|
+
const handleFieldDragStart = (0, import_react19.useCallback)(() => {
|
|
21950
21312
|
const wrapper = fieldPickElRef.current;
|
|
21951
21313
|
const form = formPickElRef.current;
|
|
21952
21314
|
if (!wrapper || !form) return;
|
|
@@ -21955,18 +21317,18 @@ function OhhwellsBridge() {
|
|
|
21955
21317
|
setFieldDragging(true);
|
|
21956
21318
|
setFieldDropSlots(buildFieldDropSlots(form, key));
|
|
21957
21319
|
}, [buildFieldDropSlots]);
|
|
21958
|
-
const handleFieldDragEnd = (0,
|
|
21320
|
+
const handleFieldDragEnd = (0, import_react19.useCallback)(() => {
|
|
21959
21321
|
fieldDragRef.current = null;
|
|
21960
21322
|
setFieldDropIndex(null);
|
|
21961
21323
|
setFieldDropSlots([]);
|
|
21962
21324
|
setFieldDragging(false);
|
|
21963
21325
|
}, []);
|
|
21964
|
-
const [fieldDropIndex, setFieldDropIndex] = (0,
|
|
21965
|
-
const [fieldDropSlots, setFieldDropSlots] = (0,
|
|
21966
|
-
const [fieldDragging, setFieldDragging] = (0,
|
|
21967
|
-
const clearFormPickRef = (0,
|
|
21326
|
+
const [fieldDropIndex, setFieldDropIndex] = (0, import_react19.useState)(null);
|
|
21327
|
+
const [fieldDropSlots, setFieldDropSlots] = (0, import_react19.useState)([]);
|
|
21328
|
+
const [fieldDragging, setFieldDragging] = (0, import_react19.useState)(false);
|
|
21329
|
+
const clearFormPickRef = (0, import_react19.useRef)(clearFormPick);
|
|
21968
21330
|
clearFormPickRef.current = clearFormPick;
|
|
21969
|
-
(0,
|
|
21331
|
+
(0, import_react19.useEffect)(() => {
|
|
21970
21332
|
const el = fieldPickElRef.current;
|
|
21971
21333
|
if (!el || fieldPickRect === null) return;
|
|
21972
21334
|
const observer = new ResizeObserver(() => {
|
|
@@ -21975,7 +21337,7 @@ function OhhwellsBridge() {
|
|
|
21975
21337
|
observer.observe(el);
|
|
21976
21338
|
return () => observer.disconnect();
|
|
21977
21339
|
}, [fieldPickRect !== null, fieldPickState]);
|
|
21978
|
-
(0,
|
|
21340
|
+
(0, import_react19.useEffect)(() => {
|
|
21979
21341
|
const el = formPickElRef.current;
|
|
21980
21342
|
if (!el || formPickRect === null) return;
|
|
21981
21343
|
const observer = new ResizeObserver(() => {
|
|
@@ -21984,25 +21346,25 @@ function OhhwellsBridge() {
|
|
|
21984
21346
|
observer.observe(el);
|
|
21985
21347
|
return () => observer.disconnect();
|
|
21986
21348
|
}, [formPickRect !== null, formViewState]);
|
|
21987
|
-
const [toolbarVariant, setToolbarVariant] = (0,
|
|
21988
|
-
const toolbarVariantRef = (0,
|
|
21349
|
+
const [toolbarVariant, setToolbarVariant] = (0, import_react19.useState)("none");
|
|
21350
|
+
const toolbarVariantRef = (0, import_react19.useRef)("none");
|
|
21989
21351
|
toolbarVariantRef.current = toolbarVariant;
|
|
21990
|
-
const [selectedIsCta, setSelectedIsCta] = (0,
|
|
21991
|
-
const [selectedIsSocial, setSelectedIsSocial] = (0,
|
|
21992
|
-
const [selectedIsSocialsRow, setSelectedIsSocialsRow] = (0,
|
|
21993
|
-
const [reorderHrefKey, setReorderHrefKey] = (0,
|
|
21994
|
-
const [reorderDragDisabled, setReorderDragDisabled] = (0,
|
|
21995
|
-
const [toggleState, setToggleState] = (0,
|
|
21996
|
-
const [maxBadge, setMaxBadge] = (0,
|
|
21997
|
-
const [activeCommands, setActiveCommands] = (0,
|
|
21998
|
-
const [sectionGap, setSectionGap] = (0,
|
|
21999
|
-
const [toolbarShowEditLink, setToolbarShowEditLink] = (0,
|
|
22000
|
-
const hoveredNavContainerRef = (0,
|
|
22001
|
-
const [hoveredNavContainerRect, setHoveredNavContainerRect] = (0,
|
|
22002
|
-
const hoveredItemElRef = (0,
|
|
22003
|
-
const [hoveredItemRect, setHoveredItemRect] = (0,
|
|
22004
|
-
const [hoveredTextRect, setHoveredTextRect] = (0,
|
|
22005
|
-
(0,
|
|
21352
|
+
const [selectedIsCta, setSelectedIsCta] = (0, import_react19.useState)(false);
|
|
21353
|
+
const [selectedIsSocial, setSelectedIsSocial] = (0, import_react19.useState)(false);
|
|
21354
|
+
const [selectedIsSocialsRow, setSelectedIsSocialsRow] = (0, import_react19.useState)(false);
|
|
21355
|
+
const [reorderHrefKey, setReorderHrefKey] = (0, import_react19.useState)(null);
|
|
21356
|
+
const [reorderDragDisabled, setReorderDragDisabled] = (0, import_react19.useState)(false);
|
|
21357
|
+
const [toggleState, setToggleState] = (0, import_react19.useState)(null);
|
|
21358
|
+
const [maxBadge, setMaxBadge] = (0, import_react19.useState)(null);
|
|
21359
|
+
const [activeCommands, setActiveCommands] = (0, import_react19.useState)(/* @__PURE__ */ new Set());
|
|
21360
|
+
const [sectionGap, setSectionGap] = (0, import_react19.useState)(null);
|
|
21361
|
+
const [toolbarShowEditLink, setToolbarShowEditLink] = (0, import_react19.useState)(false);
|
|
21362
|
+
const hoveredNavContainerRef = (0, import_react19.useRef)(null);
|
|
21363
|
+
const [hoveredNavContainerRect, setHoveredNavContainerRect] = (0, import_react19.useState)(null);
|
|
21364
|
+
const hoveredItemElRef = (0, import_react19.useRef)(null);
|
|
21365
|
+
const [hoveredItemRect, setHoveredItemRect] = (0, import_react19.useState)(null);
|
|
21366
|
+
const [hoveredTextRect, setHoveredTextRect] = (0, import_react19.useState)(null);
|
|
21367
|
+
(0, import_react19.useEffect)(() => {
|
|
22006
21368
|
const sync = () => {
|
|
22007
21369
|
const el = document.querySelector(
|
|
22008
21370
|
'[data-ohw-hovered]:not([contenteditable]):not([data-ohw-href-key]):not([data-ohw-editable="form"] *)'
|
|
@@ -22046,71 +21408,60 @@ function OhhwellsBridge() {
|
|
|
22046
21408
|
});
|
|
22047
21409
|
return () => observer.disconnect();
|
|
22048
21410
|
}, []);
|
|
22049
|
-
const siblingHintElRef = (0,
|
|
22050
|
-
const [siblingHintRect, setSiblingHintRect] = (0,
|
|
22051
|
-
const [siblingHintRects, setSiblingHintRects] = (0,
|
|
22052
|
-
const [isItemDragging, setIsItemDragging] = (0,
|
|
22053
|
-
const [isFooterFrameSelection, setIsFooterFrameSelection] = (0,
|
|
21411
|
+
const siblingHintElRef = (0, import_react19.useRef)(null);
|
|
21412
|
+
const [siblingHintRect, setSiblingHintRect] = (0, import_react19.useState)(null);
|
|
21413
|
+
const [siblingHintRects, setSiblingHintRects] = (0, import_react19.useState)([]);
|
|
21414
|
+
const [isItemDragging, setIsItemDragging] = (0, import_react19.useState)(false);
|
|
21415
|
+
const [isFooterFrameSelection, setIsFooterFrameSelection] = (0, import_react19.useState)(false);
|
|
22054
21416
|
isFooterFrameSelectionRef.current = isFooterFrameSelection;
|
|
22055
|
-
const [
|
|
22056
|
-
const
|
|
22057
|
-
|
|
22058
|
-
const
|
|
22059
|
-
|
|
22060
|
-
const [
|
|
22061
|
-
const
|
|
22062
|
-
const
|
|
22063
|
-
const
|
|
22064
|
-
const [
|
|
22065
|
-
const
|
|
22066
|
-
const
|
|
22067
|
-
const
|
|
22068
|
-
const
|
|
22069
|
-
const
|
|
21417
|
+
const [floatingPanel, setFloatingPanel] = (0, import_react19.useState)(null);
|
|
21418
|
+
const floatingPanelOpenRef = (0, import_react19.useRef)(false);
|
|
21419
|
+
floatingPanelOpenRef.current = floatingPanel !== null;
|
|
21420
|
+
const floatingPanelRef = (0, import_react19.useRef)(null);
|
|
21421
|
+
floatingPanelRef.current = floatingPanel;
|
|
21422
|
+
const [floatingPanelPos, setFloatingPanelPos] = (0, import_react19.useState)(null);
|
|
21423
|
+
const buttonCollectionDragRef = (0, import_react19.useRef)(null);
|
|
21424
|
+
const buttonDropInsertIndexRef = (0, import_react19.useRef)(null);
|
|
21425
|
+
const [buttonDropSlots, setButtonDropSlots] = (0, import_react19.useState)([]);
|
|
21426
|
+
const [activeButtonDropIndex, setActiveButtonDropIndex] = (0, import_react19.useState)(null);
|
|
21427
|
+
const buttonPointerDragRef = (0, import_react19.useRef)(null);
|
|
21428
|
+
const [buttonStyleTick, setButtonStyleTick] = (0, import_react19.useState)(0);
|
|
21429
|
+
const [logoSizeDraft, setLogoSizeDraft] = (0, import_react19.useState)(null);
|
|
21430
|
+
const [editorViewport, setEditorViewport] = (0, import_react19.useState)("desktop");
|
|
21431
|
+
const [parentScrollSnap, setParentScrollSnap] = (0, import_react19.useState)(null);
|
|
21432
|
+
const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = (0, import_react19.useState)(null);
|
|
21433
|
+
const [footerHeadingVisible, setFooterHeadingVisible] = (0, import_react19.useState)(null);
|
|
21434
|
+
const footerDragRef = (0, import_react19.useRef)(null);
|
|
21435
|
+
const [footerDropSlots, setFooterDropSlots] = (0, import_react19.useState)([]);
|
|
21436
|
+
const [activeFooterDropIndex, setActiveFooterDropIndex] = (0, import_react19.useState)(null);
|
|
21437
|
+
const [draggedItemRect, setDraggedItemRect] = (0, import_react19.useState)(null);
|
|
21438
|
+
const footerPointerDragRef = (0, import_react19.useRef)(null);
|
|
21439
|
+
const suppressNextClickRef = (0, import_react19.useRef)(false);
|
|
21440
|
+
const suppressClickUntilRef = (0, import_react19.useRef)(0);
|
|
21441
|
+
const [linkPopover, setLinkPopover] = (0, import_react19.useState)(null);
|
|
21442
|
+
const linkPopoverSessionRef = (0, import_react19.useRef)(null);
|
|
21443
|
+
const addNavAfterAnchorRef = (0, import_react19.useRef)(null);
|
|
21444
|
+
const editContentRef = (0, import_react19.useRef)({});
|
|
21445
|
+
const aiSectionsRef = (0, import_react19.useRef)("");
|
|
21446
|
+
const applyTreeLocalRef = (0, import_react19.useRef)(
|
|
22070
21447
|
null
|
|
22071
21448
|
);
|
|
22072
|
-
const clearInteractionChromeRef = (0,
|
|
21449
|
+
const clearInteractionChromeRef = (0, import_react19.useRef)(() => {
|
|
22073
21450
|
});
|
|
22074
|
-
const brandKitRef = (0,
|
|
22075
|
-
const stylesRef = (0,
|
|
22076
|
-
const appliedDrawerRef = (0,
|
|
22077
|
-
const pendingDeleteUndoRef = (0,
|
|
22078
|
-
const [
|
|
22079
|
-
const
|
|
22080
|
-
const
|
|
22081
|
-
|
|
22082
|
-
const
|
|
22083
|
-
const
|
|
22084
|
-
const
|
|
22085
|
-
const buttonDropInsertIndexRef = (0, import_react20.useRef)(null);
|
|
22086
|
-
const [buttonDropSlots, setButtonDropSlots] = (0, import_react20.useState)([]);
|
|
22087
|
-
const [activeButtonDropIndex, setActiveButtonDropIndex] = (0, import_react20.useState)(null);
|
|
22088
|
-
const buttonPointerDragRef = (0, import_react20.useRef)(null);
|
|
22089
|
-
const [buttonStyleTick, setButtonStyleTick] = (0, import_react20.useState)(0);
|
|
22090
|
-
const [logoSizeDraft, setLogoSizeDraft] = (0, import_react20.useState)(null);
|
|
22091
|
-
const [editorViewport, setEditorViewport] = (0, import_react20.useState)("desktop");
|
|
22092
|
-
const [parentScrollSnap, setParentScrollSnap] = (0, import_react20.useState)(null);
|
|
22093
|
-
const [sitePages, setSitePages] = (0, import_react20.useState)([]);
|
|
22094
|
-
const [sectionsByPath, setSectionsByPath] = (0, import_react20.useState)({});
|
|
22095
|
-
const sectionsPrefetchGenRef = (0, import_react20.useRef)(0);
|
|
22096
|
-
const setLinkPopoverRef = (0, import_react20.useRef)(setLinkPopover);
|
|
22097
|
-
const linkPopoverPanelRef = (0, import_react20.useRef)(null);
|
|
22098
|
-
const linkPopoverOpenRef = (0, import_react20.useRef)(false);
|
|
22099
|
-
const linkPopoverGraceUntilRef = (0, import_react20.useRef)(0);
|
|
21451
|
+
const brandKitRef = (0, import_react19.useRef)("");
|
|
21452
|
+
const stylesRef = (0, import_react19.useRef)("");
|
|
21453
|
+
const appliedDrawerRef = (0, import_react19.useRef)(null);
|
|
21454
|
+
const pendingDeleteUndoRef = (0, import_react19.useRef)(null);
|
|
21455
|
+
const [sitePages, setSitePages] = (0, import_react19.useState)([]);
|
|
21456
|
+
const [sectionsByPath, setSectionsByPath] = (0, import_react19.useState)({});
|
|
21457
|
+
const sectionsPrefetchGenRef = (0, import_react19.useRef)(0);
|
|
21458
|
+
const setLinkPopoverRef = (0, import_react19.useRef)(setLinkPopover);
|
|
21459
|
+
const linkPopoverPanelRef = (0, import_react19.useRef)(null);
|
|
21460
|
+
const linkPopoverOpenRef = (0, import_react19.useRef)(false);
|
|
21461
|
+
const linkPopoverGraceUntilRef = (0, import_react19.useRef)(0);
|
|
22100
21462
|
setLinkPopoverRef.current = setLinkPopover;
|
|
22101
|
-
setFloatingPanelRef.current = setFloatingPanel;
|
|
22102
21463
|
linkPopoverSessionRef.current = linkPopover;
|
|
22103
|
-
|
|
22104
|
-
(0, import_react20.useEffect)(() => {
|
|
22105
|
-
const syncViewport = () => {
|
|
22106
|
-
const next = window.innerWidth <= 480 ? "mobile" : "desktop";
|
|
22107
|
-
setEditorViewport((prev) => prev === next ? prev : next);
|
|
22108
|
-
};
|
|
22109
|
-
syncViewport();
|
|
22110
|
-
window.addEventListener("resize", syncViewport);
|
|
22111
|
-
return () => window.removeEventListener("resize", syncViewport);
|
|
22112
|
-
}, []);
|
|
22113
|
-
(0, import_react20.useEffect)(() => {
|
|
21464
|
+
(0, import_react19.useEffect)(() => {
|
|
22114
21465
|
setSectionOrderPersistHandler((entries) => {
|
|
22115
21466
|
const currentPath = window.location.pathname;
|
|
22116
21467
|
const merged = mergePageSectionOrder(editContentRef.current[SECTION_ORDER_KEY], currentPath, entries);
|
|
@@ -22166,7 +21517,7 @@ function OhhwellsBridge() {
|
|
|
22166
21517
|
const bumpLinkPopoverGrace = () => {
|
|
22167
21518
|
linkPopoverGraceUntilRef.current = Date.now() + 350;
|
|
22168
21519
|
};
|
|
22169
|
-
const runSectionsPrefetch = (0,
|
|
21520
|
+
const runSectionsPrefetch = (0, import_react19.useCallback)((pages) => {
|
|
22170
21521
|
if (!isEditMode || shouldUseDevFixtures() || pages.length === 0) return;
|
|
22171
21522
|
const gen = ++sectionsPrefetchGenRef.current;
|
|
22172
21523
|
const paths = pages.map((p) => p.path);
|
|
@@ -22185,9 +21536,9 @@ function OhhwellsBridge() {
|
|
|
22185
21536
|
);
|
|
22186
21537
|
});
|
|
22187
21538
|
}, [isEditMode, pathname]);
|
|
22188
|
-
const runSectionsPrefetchRef = (0,
|
|
21539
|
+
const runSectionsPrefetchRef = (0, import_react19.useRef)(runSectionsPrefetch);
|
|
22189
21540
|
runSectionsPrefetchRef.current = runSectionsPrefetch;
|
|
22190
|
-
(0,
|
|
21541
|
+
(0, import_react19.useEffect)(() => {
|
|
22191
21542
|
if (!linkPopover) {
|
|
22192
21543
|
document.documentElement.removeAttribute("data-ohw-link-popover-open");
|
|
22193
21544
|
return;
|
|
@@ -22215,7 +21566,7 @@ function OhhwellsBridge() {
|
|
|
22215
21566
|
document.documentElement.removeAttribute("data-ohw-link-popover-open");
|
|
22216
21567
|
};
|
|
22217
21568
|
}, [linkPopover, postToParent2]);
|
|
22218
|
-
(0,
|
|
21569
|
+
(0, import_react19.useEffect)(() => {
|
|
22219
21570
|
if (!isEditMode) return;
|
|
22220
21571
|
const useFixtures = shouldUseDevFixtures();
|
|
22221
21572
|
if (useFixtures) {
|
|
@@ -22239,14 +21590,14 @@ function OhhwellsBridge() {
|
|
|
22239
21590
|
if (!useFixtures) postToParent2({ type: "ow:request-site-pages" });
|
|
22240
21591
|
return () => window.removeEventListener("message", onSitePages);
|
|
22241
21592
|
}, [isEditMode, postToParent2]);
|
|
22242
|
-
(0,
|
|
21593
|
+
(0, import_react19.useEffect)(() => {
|
|
22243
21594
|
if (!isEditMode || shouldUseDevFixtures()) return;
|
|
22244
21595
|
void loadAllSectionsManifest().then((manifest) => {
|
|
22245
21596
|
if (Object.keys(manifest).length === 0) return;
|
|
22246
21597
|
setSectionsByPath((prev) => ({ ...manifest, ...prev }));
|
|
22247
21598
|
});
|
|
22248
21599
|
}, [isEditMode]);
|
|
22249
|
-
(0,
|
|
21600
|
+
(0, import_react19.useEffect)(() => {
|
|
22250
21601
|
const update = () => {
|
|
22251
21602
|
const el = activeElRef.current ?? selectedElRef.current;
|
|
22252
21603
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
@@ -22270,10 +21621,10 @@ function OhhwellsBridge() {
|
|
|
22270
21621
|
vvp.removeEventListener("resize", update);
|
|
22271
21622
|
};
|
|
22272
21623
|
}, []);
|
|
22273
|
-
const refreshStateRules = (0,
|
|
21624
|
+
const refreshStateRules = (0, import_react19.useCallback)(() => {
|
|
22274
21625
|
editStylesRef.current?.forceHover && (editStylesRef.current.forceHover.textContent = collectStateRules());
|
|
22275
21626
|
}, []);
|
|
22276
|
-
const processConfigRequest = (0,
|
|
21627
|
+
const processConfigRequest = (0, import_react19.useCallback)((insertAfterVal) => {
|
|
22277
21628
|
const tracker = getSectionsTracker();
|
|
22278
21629
|
let entries = [];
|
|
22279
21630
|
try {
|
|
@@ -22296,7 +21647,7 @@ function OhhwellsBridge() {
|
|
|
22296
21647
|
}
|
|
22297
21648
|
window.postMessage({ type: "ow:schedule-config", insertAfter: insertAfterVal, scheduleId: null }, "*");
|
|
22298
21649
|
}, [isEditMode]);
|
|
22299
|
-
const deactivate = (0,
|
|
21650
|
+
const deactivate = (0, import_react19.useCallback)(() => {
|
|
22300
21651
|
const el = activeElRef.current;
|
|
22301
21652
|
if (!el) return;
|
|
22302
21653
|
const isFormBlock = el.dataset.ohwEditable === "form";
|
|
@@ -22347,12 +21698,12 @@ function OhhwellsBridge() {
|
|
|
22347
21698
|
setToolbarShowEditLink(false);
|
|
22348
21699
|
postToParent2({ type: "ow:exit-edit" });
|
|
22349
21700
|
}, [postToParent2]);
|
|
22350
|
-
const clearSelectedAttr = (0,
|
|
21701
|
+
const clearSelectedAttr = (0, import_react19.useCallback)(() => {
|
|
22351
21702
|
document.querySelectorAll("[data-ohw-selected]").forEach((el) => {
|
|
22352
21703
|
el.removeAttribute("data-ohw-selected");
|
|
22353
21704
|
});
|
|
22354
21705
|
}, []);
|
|
22355
|
-
const deselect = (0,
|
|
21706
|
+
const deselect = (0, import_react19.useCallback)(() => {
|
|
22356
21707
|
const nestedGroup = selectedElRef.current?.closest("[data-ohw-nav-children]") != null ? selectedElRef.current.closest("[data-ohw-nav-group]") : null;
|
|
22357
21708
|
clearSelectedAttr();
|
|
22358
21709
|
selectedElRef.current = null;
|
|
@@ -22387,20 +21738,20 @@ function OhhwellsBridge() {
|
|
|
22387
21738
|
setToolbarVariant("none");
|
|
22388
21739
|
}
|
|
22389
21740
|
}, [clearSelectedAttr]);
|
|
22390
|
-
const markSelected = (0,
|
|
21741
|
+
const markSelected = (0, import_react19.useCallback)((el) => {
|
|
22391
21742
|
clearSelectedAttr();
|
|
22392
21743
|
el.removeAttribute("data-ohw-hovered");
|
|
22393
21744
|
el.setAttribute("data-ohw-selected", "");
|
|
22394
21745
|
}, [clearSelectedAttr]);
|
|
22395
|
-
const isSelectedForHover = (0,
|
|
21746
|
+
const isSelectedForHover = (0, import_react19.useCallback)((el) => {
|
|
22396
21747
|
if (!el) return false;
|
|
22397
21748
|
return [selectedElRef.current, activeElRef.current].some(
|
|
22398
21749
|
(busy) => busy && (el === busy || busy.contains(el) || el.contains(busy))
|
|
22399
21750
|
);
|
|
22400
21751
|
}, []);
|
|
22401
|
-
const isSelectedForHoverRef = (0,
|
|
21752
|
+
const isSelectedForHoverRef = (0, import_react19.useRef)(isSelectedForHover);
|
|
22402
21753
|
isSelectedForHoverRef.current = isSelectedForHover;
|
|
22403
|
-
const resolveHrefKeyElement = (0,
|
|
21754
|
+
const resolveHrefKeyElement = (0, import_react19.useCallback)((hrefKey) => {
|
|
22404
21755
|
if (isFooterHrefKey(hrefKey)) {
|
|
22405
21756
|
return document.querySelector(
|
|
22406
21757
|
`footer [data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
@@ -22415,7 +21766,7 @@ function OhhwellsBridge() {
|
|
|
22415
21766
|
`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
22416
21767
|
);
|
|
22417
21768
|
}, []);
|
|
22418
|
-
const resyncSelectedNavigationItem = (0,
|
|
21769
|
+
const resyncSelectedNavigationItem = (0, import_react19.useCallback)(() => {
|
|
22419
21770
|
const hrefKey = selectedHrefKeyRef.current;
|
|
22420
21771
|
if (hrefKey) {
|
|
22421
21772
|
const link = resolveHrefKeyElement(hrefKey);
|
|
@@ -22453,7 +21804,7 @@ function OhhwellsBridge() {
|
|
|
22453
21804
|
);
|
|
22454
21805
|
}
|
|
22455
21806
|
}, [resolveHrefKeyElement]);
|
|
22456
|
-
const reselectNavigationItem = (0,
|
|
21807
|
+
const reselectNavigationItem = (0, import_react19.useCallback)((navAnchor) => {
|
|
22457
21808
|
selectedElRef.current = navAnchor;
|
|
22458
21809
|
selectedHrefKeyRef.current = navAnchor.getAttribute("data-ohw-href-key");
|
|
22459
21810
|
selectedFooterColAttrRef.current = null;
|
|
@@ -22484,7 +21835,7 @@ function OhhwellsBridge() {
|
|
|
22484
21835
|
setToolbarShowEditLink(false);
|
|
22485
21836
|
setActiveCommands(/* @__PURE__ */ new Set());
|
|
22486
21837
|
}, [markSelected]);
|
|
22487
|
-
const commitNavigationTextEdit = (0,
|
|
21838
|
+
const commitNavigationTextEdit = (0, import_react19.useCallback)((navAnchor) => {
|
|
22488
21839
|
const el = activeElRef.current;
|
|
22489
21840
|
if (!el) return;
|
|
22490
21841
|
const key = el.dataset.ohwKey;
|
|
@@ -22517,7 +21868,7 @@ function OhhwellsBridge() {
|
|
|
22517
21868
|
postToParent2({ type: "ow:exit-edit" });
|
|
22518
21869
|
reselectNavigationItem(navAnchor);
|
|
22519
21870
|
}, [postToParent2, reselectNavigationItem]);
|
|
22520
|
-
const handleAddTopLevelNavItem = (0,
|
|
21871
|
+
const handleAddTopLevelNavItem = (0, import_react19.useCallback)(() => {
|
|
22521
21872
|
const items = listNavbarRootItems();
|
|
22522
21873
|
addNavAfterAnchorRef.current = items[items.length - 1] ?? null;
|
|
22523
21874
|
deselectRef.current();
|
|
@@ -22529,7 +21880,7 @@ function OhhwellsBridge() {
|
|
|
22529
21880
|
intent: "add-nav"
|
|
22530
21881
|
});
|
|
22531
21882
|
}, []);
|
|
22532
|
-
const maybeWarnNavLinkDropdownConflict = (0,
|
|
21883
|
+
const maybeWarnNavLinkDropdownConflict = (0, import_react19.useCallback)(
|
|
22533
21884
|
(anchor) => {
|
|
22534
21885
|
if (!isNavbarHrefKey(anchor.getAttribute("data-ohw-href-key"))) return;
|
|
22535
21886
|
if (!navDropdownsOpenOnClick()) return;
|
|
@@ -22542,7 +21893,7 @@ function OhhwellsBridge() {
|
|
|
22542
21893
|
},
|
|
22543
21894
|
[postToParent2]
|
|
22544
21895
|
);
|
|
22545
|
-
const handleNavDropdownOpenChange = (0,
|
|
21896
|
+
const handleNavDropdownOpenChange = (0, import_react19.useCallback)((open) => {
|
|
22546
21897
|
const selected = selectedElRef.current;
|
|
22547
21898
|
if (!selected || !isNavigationItem2(selected)) return;
|
|
22548
21899
|
if (isNestedNavChild(selected)) return;
|
|
@@ -22558,7 +21909,7 @@ function OhhwellsBridge() {
|
|
|
22558
21909
|
}
|
|
22559
21910
|
});
|
|
22560
21911
|
}, []);
|
|
22561
|
-
const handleFooterHeadingVisibleChange = (0,
|
|
21912
|
+
const handleFooterHeadingVisibleChange = (0, import_react19.useCallback)(
|
|
22562
21913
|
(visible) => {
|
|
22563
21914
|
const selected = selectedElRef.current;
|
|
22564
21915
|
if (!selected || !isFooterFrameSelectionRef.current) return;
|
|
@@ -22582,7 +21933,7 @@ function OhhwellsBridge() {
|
|
|
22582
21933
|
},
|
|
22583
21934
|
[postToParent2]
|
|
22584
21935
|
);
|
|
22585
|
-
const enterEditOnNewItem = (0,
|
|
21936
|
+
const enterEditOnNewItem = (0, import_react19.useCallback)((anchor) => {
|
|
22586
21937
|
const label = anchor.querySelector('[data-ohw-editable="text"]');
|
|
22587
21938
|
if (!label) {
|
|
22588
21939
|
selectRef.current(anchor);
|
|
@@ -22591,8 +21942,8 @@ function OhhwellsBridge() {
|
|
|
22591
21942
|
setNavGroupForceOpen(anchor, true);
|
|
22592
21943
|
activateRef.current(label);
|
|
22593
21944
|
}, []);
|
|
22594
|
-
const pendingSocialAddRef = (0,
|
|
22595
|
-
const handleAddChildItem = (0,
|
|
21945
|
+
const pendingSocialAddRef = (0, import_react19.useRef)(null);
|
|
21946
|
+
const handleAddChildItem = (0, import_react19.useCallback)(() => {
|
|
22596
21947
|
const selected = selectedElRef.current;
|
|
22597
21948
|
if (!selected) return;
|
|
22598
21949
|
const socialsRow = isSocialsRow(selected) ? selected : findSocialsRow(selected);
|
|
@@ -22703,7 +22054,7 @@ function OhhwellsBridge() {
|
|
|
22703
22054
|
});
|
|
22704
22055
|
});
|
|
22705
22056
|
}, [enterEditOnNewItem, isFooterFrameSelection, maybeWarnNavLinkDropdownConflict, postToParent2]);
|
|
22706
|
-
const handleAddFooterColumn = (0,
|
|
22057
|
+
const handleAddFooterColumn = (0, import_react19.useCallback)(() => {
|
|
22707
22058
|
if (!canAddFooterColumn()) {
|
|
22708
22059
|
postToParent2({
|
|
22709
22060
|
type: "ow:toast",
|
|
@@ -22724,7 +22075,7 @@ function OhhwellsBridge() {
|
|
|
22724
22075
|
selectRef.current(result.firstLink);
|
|
22725
22076
|
});
|
|
22726
22077
|
}, [postToParent2]);
|
|
22727
|
-
const clearFooterDragVisuals = (0,
|
|
22078
|
+
const clearFooterDragVisuals = (0, import_react19.useCallback)(() => {
|
|
22728
22079
|
footerDragRef.current = null;
|
|
22729
22080
|
setSiblingHintRects([]);
|
|
22730
22081
|
setFooterDropSlots([]);
|
|
@@ -22733,7 +22084,7 @@ function OhhwellsBridge() {
|
|
|
22733
22084
|
setIsItemDragging(false);
|
|
22734
22085
|
unlockFooterDragInteraction();
|
|
22735
22086
|
}, []);
|
|
22736
|
-
const refreshFooterDragVisuals = (0,
|
|
22087
|
+
const refreshFooterDragVisuals = (0, import_react19.useCallback)((session, activeSlot, clientX, clientY) => {
|
|
22737
22088
|
const dragged = session.draggedEl;
|
|
22738
22089
|
setDraggedItemRect(dragged.getBoundingClientRect());
|
|
22739
22090
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -22765,13 +22116,13 @@ function OhhwellsBridge() {
|
|
|
22765
22116
|
const activeIdx = activeSlot ? slots.findIndex((s) => s.insertIndex === activeSlot.insertIndex) : -1;
|
|
22766
22117
|
setActiveFooterDropIndex(activeIdx >= 0 ? activeIdx : null);
|
|
22767
22118
|
}, []);
|
|
22768
|
-
const refreshFooterDragVisualsRef = (0,
|
|
22119
|
+
const refreshFooterDragVisualsRef = (0, import_react19.useRef)(refreshFooterDragVisuals);
|
|
22769
22120
|
refreshFooterDragVisualsRef.current = refreshFooterDragVisuals;
|
|
22770
|
-
const commitFooterDragRef = (0,
|
|
22121
|
+
const commitFooterDragRef = (0, import_react19.useRef)(() => {
|
|
22771
22122
|
});
|
|
22772
|
-
const beginFooterDragRef = (0,
|
|
22123
|
+
const beginFooterDragRef = (0, import_react19.useRef)(() => {
|
|
22773
22124
|
});
|
|
22774
|
-
const beginFooterDrag = (0,
|
|
22125
|
+
const beginFooterDrag = (0, import_react19.useCallback)(
|
|
22775
22126
|
(session) => {
|
|
22776
22127
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
22777
22128
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -22791,7 +22142,7 @@ function OhhwellsBridge() {
|
|
|
22791
22142
|
[refreshFooterDragVisuals]
|
|
22792
22143
|
);
|
|
22793
22144
|
beginFooterDragRef.current = beginFooterDrag;
|
|
22794
|
-
const commitFooterDrag = (0,
|
|
22145
|
+
const commitFooterDrag = (0, import_react19.useCallback)(
|
|
22795
22146
|
(clientX, clientY) => {
|
|
22796
22147
|
const session = footerDragRef.current;
|
|
22797
22148
|
if (!session) {
|
|
@@ -22920,7 +22271,7 @@ function OhhwellsBridge() {
|
|
|
22920
22271
|
[clearFooterDragVisuals, resolveHrefKeyElement, resyncSelectedNavigationItem]
|
|
22921
22272
|
);
|
|
22922
22273
|
commitFooterDragRef.current = commitFooterDrag;
|
|
22923
|
-
const startFooterLinkDrag = (0,
|
|
22274
|
+
const startFooterLinkDrag = (0, import_react19.useCallback)(
|
|
22924
22275
|
(anchor, clientX, clientY, wasSelected) => {
|
|
22925
22276
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
22926
22277
|
if (!hrefKey) return false;
|
|
@@ -22956,7 +22307,7 @@ function OhhwellsBridge() {
|
|
|
22956
22307
|
},
|
|
22957
22308
|
[beginFooterDrag]
|
|
22958
22309
|
);
|
|
22959
|
-
const startFooterColumnDrag = (0,
|
|
22310
|
+
const startFooterColumnDrag = (0, import_react19.useCallback)(
|
|
22960
22311
|
(columnEl, clientX, clientY, wasSelected) => {
|
|
22961
22312
|
const columns = listFooterColumns();
|
|
22962
22313
|
const idx = columns.indexOf(columnEl);
|
|
@@ -22976,7 +22327,7 @@ function OhhwellsBridge() {
|
|
|
22976
22327
|
},
|
|
22977
22328
|
[beginFooterDrag]
|
|
22978
22329
|
);
|
|
22979
|
-
const persistButtonCollectionDrag = (0,
|
|
22330
|
+
const persistButtonCollectionDrag = (0, import_react19.useCallback)(
|
|
22980
22331
|
(button, clientX) => {
|
|
22981
22332
|
const insertIndex = buttonDropInsertIndexRef.current;
|
|
22982
22333
|
if (insertIndex != null) insertButtonAtCollectionIndex(button, insertIndex);
|
|
@@ -23000,7 +22351,7 @@ function OhhwellsBridge() {
|
|
|
23000
22351
|
},
|
|
23001
22352
|
[postToParent2]
|
|
23002
22353
|
);
|
|
23003
|
-
const refreshButtonDragVisuals = (0,
|
|
22354
|
+
const refreshButtonDragVisuals = (0, import_react19.useCallback)((button, clientX, clientY) => {
|
|
23004
22355
|
const collection = buttonCollectionOf(button);
|
|
23005
22356
|
if (!collection) {
|
|
23006
22357
|
setButtonDropSlots([]);
|
|
@@ -23017,7 +22368,7 @@ function OhhwellsBridge() {
|
|
|
23017
22368
|
setDraggedItemRect(button.getBoundingClientRect());
|
|
23018
22369
|
if (selectedElRef.current === button) setToolbarRect(button.getBoundingClientRect());
|
|
23019
22370
|
}, []);
|
|
23020
|
-
const handleItemDragStart = (0,
|
|
22371
|
+
const handleItemDragStart = (0, import_react19.useCallback)(
|
|
23021
22372
|
(e) => {
|
|
23022
22373
|
const selected = selectedElRef.current;
|
|
23023
22374
|
if (!selected) {
|
|
@@ -23048,7 +22399,7 @@ function OhhwellsBridge() {
|
|
|
23048
22399
|
},
|
|
23049
22400
|
[startFooterColumnDrag, startFooterLinkDrag, startNavLinkDrag, refreshButtonDragVisuals]
|
|
23050
22401
|
);
|
|
23051
|
-
const handleItemDragEnd = (0,
|
|
22402
|
+
const handleItemDragEnd = (0, import_react19.useCallback)(
|
|
23052
22403
|
(e) => {
|
|
23053
22404
|
const collectionButton = buttonCollectionDragRef.current;
|
|
23054
22405
|
if (collectionButton) {
|
|
@@ -23079,7 +22430,7 @@ function OhhwellsBridge() {
|
|
|
23079
22430
|
},
|
|
23080
22431
|
[commitFooterDrag, commitNavDrag, navDragRef, persistButtonCollectionDrag]
|
|
23081
22432
|
);
|
|
23082
|
-
const handleItemChromePointerDown = (0,
|
|
22433
|
+
const handleItemChromePointerDown = (0, import_react19.useCallback)((e) => {
|
|
23083
22434
|
if (e.button !== 0) return;
|
|
23084
22435
|
const selected = selectedElRef.current;
|
|
23085
22436
|
if (!selected) return;
|
|
@@ -23120,7 +22471,7 @@ function OhhwellsBridge() {
|
|
|
23120
22471
|
}
|
|
23121
22472
|
if (armNavPressFromChrome(selected, e.clientX, e.clientY, e.pointerId)) return;
|
|
23122
22473
|
}, [armNavPressFromChrome]);
|
|
23123
|
-
const handleItemChromeClick = (0,
|
|
22474
|
+
const handleItemChromeClick = (0, import_react19.useCallback)((clientX, clientY) => {
|
|
23124
22475
|
if (suppressNextClickRef.current || Date.now() < suppressClickUntilRef.current) {
|
|
23125
22476
|
suppressNextClickRef.current = false;
|
|
23126
22477
|
return;
|
|
@@ -23133,7 +22484,7 @@ function OhhwellsBridge() {
|
|
|
23133
22484
|
}, []);
|
|
23134
22485
|
reselectNavigationItemRef.current = reselectNavigationItem;
|
|
23135
22486
|
commitNavigationTextEditRef.current = commitNavigationTextEdit;
|
|
23136
|
-
const select = (0,
|
|
22487
|
+
const select = (0, import_react19.useCallback)((anchor) => {
|
|
23137
22488
|
if (!isNavigationItem2(anchor)) return;
|
|
23138
22489
|
if (activeElRef.current) deactivate();
|
|
23139
22490
|
aiSectionApiRef.current?.selectFromElement(anchor);
|
|
@@ -23195,7 +22546,7 @@ function OhhwellsBridge() {
|
|
|
23195
22546
|
setLogoSizeDraft(null);
|
|
23196
22547
|
}
|
|
23197
22548
|
}, [deactivate, markSelected]);
|
|
23198
|
-
const selectFrame = (0,
|
|
22549
|
+
const selectFrame = (0, import_react19.useCallback)((el) => {
|
|
23199
22550
|
if (!isNavigationContainer(el)) return;
|
|
23200
22551
|
if (activeElRef.current) deactivate();
|
|
23201
22552
|
aiSectionApiRef.current?.selectFromElement(el);
|
|
@@ -23236,7 +22587,7 @@ function OhhwellsBridge() {
|
|
|
23236
22587
|
setFloatingPanelPos(null);
|
|
23237
22588
|
setLogoSizeDraft(null);
|
|
23238
22589
|
}, [deactivate, markSelected, postToParent2]);
|
|
23239
|
-
const selectLogo = (0,
|
|
22590
|
+
const selectLogo = (0, import_react19.useCallback)(
|
|
23240
22591
|
(logoEl) => {
|
|
23241
22592
|
if (activeElRef.current) deactivate();
|
|
23242
22593
|
selectedElRef.current = logoEl;
|
|
@@ -23265,7 +22616,7 @@ function OhhwellsBridge() {
|
|
|
23265
22616
|
},
|
|
23266
22617
|
[deactivate, markSelected]
|
|
23267
22618
|
);
|
|
23268
|
-
const openLogoSizePanel = (0,
|
|
22619
|
+
const openLogoSizePanel = (0, import_react19.useCallback)((logoEl) => {
|
|
23269
22620
|
const placement = getLogoPlacement(logoEl);
|
|
23270
22621
|
const draft = readLogoSizeState(editContentRef.current, placement);
|
|
23271
22622
|
setLogoSizeDraft(draft);
|
|
@@ -23278,7 +22629,7 @@ function OhhwellsBridge() {
|
|
|
23278
22629
|
placement
|
|
23279
22630
|
});
|
|
23280
22631
|
}, []);
|
|
23281
|
-
const openSocialsDisplayPanel = (0,
|
|
22632
|
+
const openSocialsDisplayPanel = (0, import_react19.useCallback)((row) => {
|
|
23282
22633
|
setFloatingPanelPos(null);
|
|
23283
22634
|
setParentScrollSnap(parentScrollRef.current);
|
|
23284
22635
|
setFloatingPanel({
|
|
@@ -23289,7 +22640,7 @@ function OhhwellsBridge() {
|
|
|
23289
22640
|
row
|
|
23290
22641
|
});
|
|
23291
22642
|
}, []);
|
|
23292
|
-
const rememberButtonTokens = (0,
|
|
22643
|
+
const rememberButtonTokens = (0, import_react19.useCallback)(
|
|
23293
22644
|
(content, tokens, nodes) => {
|
|
23294
22645
|
if (nodes.length === 0) return content;
|
|
23295
22646
|
const next = { ...content };
|
|
@@ -23300,7 +22651,7 @@ function OhhwellsBridge() {
|
|
|
23300
22651
|
},
|
|
23301
22652
|
[postToParent2]
|
|
23302
22653
|
);
|
|
23303
|
-
const tokensForButton = (0,
|
|
22654
|
+
const tokensForButton = (0, import_react19.useCallback)(
|
|
23304
22655
|
(el, persistFallback = false) => {
|
|
23305
22656
|
const stored = readStoredStyleTokens(editContentRef.current);
|
|
23306
22657
|
if (stored) return stored;
|
|
@@ -23315,7 +22666,7 @@ function OhhwellsBridge() {
|
|
|
23315
22666
|
},
|
|
23316
22667
|
[rememberButtonTokens]
|
|
23317
22668
|
);
|
|
23318
|
-
const openButtonStylePanel = (0,
|
|
22669
|
+
const openButtonStylePanel = (0, import_react19.useCallback)(
|
|
23319
22670
|
(anchor) => {
|
|
23320
22671
|
const id = buttonId(anchor);
|
|
23321
22672
|
if (!id) return;
|
|
@@ -23333,7 +22684,7 @@ function OhhwellsBridge() {
|
|
|
23333
22684
|
},
|
|
23334
22685
|
[tokensForButton]
|
|
23335
22686
|
);
|
|
23336
|
-
const applySelectedButtonStyle = (0,
|
|
22687
|
+
const applySelectedButtonStyle = (0, import_react19.useCallback)(
|
|
23337
22688
|
(patch) => {
|
|
23338
22689
|
const panel = floatingPanelRef.current;
|
|
23339
22690
|
const id = panel?.kind === "button-style" ? panel.buttonId : null;
|
|
@@ -23351,7 +22702,7 @@ function OhhwellsBridge() {
|
|
|
23351
22702
|
},
|
|
23352
22703
|
[postToParent2]
|
|
23353
22704
|
);
|
|
23354
|
-
(0,
|
|
22705
|
+
(0, import_react19.useEffect)(() => {
|
|
23355
22706
|
const onDragOver = (e) => {
|
|
23356
22707
|
const dragged = buttonCollectionDragRef.current;
|
|
23357
22708
|
if (!dragged) return;
|
|
@@ -23370,11 +22721,11 @@ function OhhwellsBridge() {
|
|
|
23370
22721
|
document.removeEventListener("drop", onDrop);
|
|
23371
22722
|
};
|
|
23372
22723
|
}, [refreshButtonDragVisuals]);
|
|
23373
|
-
const isEditModeRef = (0,
|
|
23374
|
-
const requestMissingSocialIconsRef = (0,
|
|
22724
|
+
const isEditModeRef = (0, import_react19.useRef)(false);
|
|
22725
|
+
const requestMissingSocialIconsRef = (0, import_react19.useRef)(() => {
|
|
23375
22726
|
});
|
|
23376
|
-
const askedSocialIconsRef = (0,
|
|
23377
|
-
const requestMissingSocialIcons = (0,
|
|
22727
|
+
const askedSocialIconsRef = (0, import_react19.useRef)(/* @__PURE__ */ new Set());
|
|
22728
|
+
const requestMissingSocialIcons = (0, import_react19.useCallback)(() => {
|
|
23378
22729
|
const items = Array.from(document.querySelectorAll(`[${SOCIALS_ROW_ATTR}]`)).filter((row) => socialsDisplayFor(row, editContentRef.current).icon).flatMap((row) => {
|
|
23379
22730
|
const missing = socialsMissingIcons(row);
|
|
23380
22731
|
listSocialItems(row).forEach((item) => ensureIconSlot(item));
|
|
@@ -23386,7 +22737,7 @@ function OhhwellsBridge() {
|
|
|
23386
22737
|
}, []);
|
|
23387
22738
|
requestMissingSocialIconsRef.current = requestMissingSocialIcons;
|
|
23388
22739
|
isEditModeRef.current = isEditMode;
|
|
23389
|
-
const changeSocialsDisplay = (0,
|
|
22740
|
+
const changeSocialsDisplay = (0, import_react19.useCallback)(
|
|
23390
22741
|
(row, next) => {
|
|
23391
22742
|
if (next.icon) {
|
|
23392
22743
|
const missing = socialsMissingIcons(row);
|
|
@@ -23410,19 +22761,19 @@ function OhhwellsBridge() {
|
|
|
23410
22761
|
},
|
|
23411
22762
|
[]
|
|
23412
22763
|
);
|
|
23413
|
-
const closeFloatingPanelOnly = (0,
|
|
22764
|
+
const closeFloatingPanelOnly = (0, import_react19.useCallback)(() => {
|
|
23414
22765
|
setFloatingPanel(null);
|
|
23415
22766
|
setFloatingPanelPos(null);
|
|
23416
22767
|
setLogoSizeDraft(null);
|
|
23417
22768
|
}, []);
|
|
23418
22769
|
closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
|
|
23419
|
-
const closeFloatingPanelAndDeselect = (0,
|
|
22770
|
+
const closeFloatingPanelAndDeselect = (0, import_react19.useCallback)(() => {
|
|
23420
22771
|
setFloatingPanel(null);
|
|
23421
22772
|
setFloatingPanelPos(null);
|
|
23422
22773
|
setLogoSizeDraft(null);
|
|
23423
22774
|
deselectRef.current();
|
|
23424
22775
|
}, []);
|
|
23425
|
-
(0,
|
|
22776
|
+
(0, import_react19.useEffect)(() => {
|
|
23426
22777
|
const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
|
|
23427
22778
|
if (!session || !logoSizeDraft) {
|
|
23428
22779
|
postToParentRef.current({ type: "ow:logo-size-panel", open: false });
|
|
@@ -23441,7 +22792,7 @@ function OhhwellsBridge() {
|
|
|
23441
22792
|
max: LOGO_SIZE_MAX
|
|
23442
22793
|
});
|
|
23443
22794
|
}, [floatingPanel, logoSizeDraft, editorViewport]);
|
|
23444
|
-
const persistLogoSizeDraft = (0,
|
|
22795
|
+
const persistLogoSizeDraft = (0, import_react19.useCallback)(
|
|
23445
22796
|
(placement, draft) => {
|
|
23446
22797
|
const desktopKey = LOGO_SIZE_DESKTOP_KEYS[placement];
|
|
23447
22798
|
const mobileKey = LOGO_SIZE_MOBILE_KEYS[placement];
|
|
@@ -23481,7 +22832,7 @@ function OhhwellsBridge() {
|
|
|
23481
22832
|
},
|
|
23482
22833
|
[postToParent2]
|
|
23483
22834
|
);
|
|
23484
|
-
const activate = (0,
|
|
22835
|
+
const activate = (0, import_react19.useCallback)((el, options) => {
|
|
23485
22836
|
if (activeElRef.current === el) return;
|
|
23486
22837
|
document.querySelectorAll("[data-ohw-hovered]").forEach((hovered) => {
|
|
23487
22838
|
hovered.removeAttribute("data-ohw-hovered");
|
|
@@ -23579,8 +22930,8 @@ function OhhwellsBridge() {
|
|
|
23579
22930
|
openLogoSizePanelRef.current = openLogoSizePanel;
|
|
23580
22931
|
deselectRef.current = deselect;
|
|
23581
22932
|
closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
|
|
23582
|
-
const lastSiteWideScopeRef = (0,
|
|
23583
|
-
(0,
|
|
22933
|
+
const lastSiteWideScopeRef = (0, import_react19.useRef)(null);
|
|
22934
|
+
(0, import_react19.useEffect)(() => {
|
|
23584
22935
|
if (!isEditMode) {
|
|
23585
22936
|
if (lastSiteWideScopeRef.current !== false) {
|
|
23586
22937
|
lastSiteWideScopeRef.current = false;
|
|
@@ -23606,7 +22957,7 @@ function OhhwellsBridge() {
|
|
|
23606
22957
|
isFooterFrameSelection,
|
|
23607
22958
|
postToParent2
|
|
23608
22959
|
]);
|
|
23609
|
-
(0,
|
|
22960
|
+
(0, import_react19.useLayoutEffect)(() => {
|
|
23610
22961
|
if (!subdomain || isEditMode) {
|
|
23611
22962
|
setFetchState("done");
|
|
23612
22963
|
return;
|
|
@@ -23627,7 +22978,6 @@ function OhhwellsBridge() {
|
|
|
23627
22978
|
}
|
|
23628
22979
|
if (typeof content[STYLE_STORE_KEY] === "string") {
|
|
23629
22980
|
stylesRef.current = content[STYLE_STORE_KEY];
|
|
23630
|
-
document.querySelectorAll('[data-ohw-editable="form"]').forEach((f) => markFormFields(f));
|
|
23631
22981
|
applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
|
|
23632
22982
|
}
|
|
23633
22983
|
applyBrandChrome(content);
|
|
@@ -23636,12 +22986,12 @@ function OhhwellsBridge() {
|
|
|
23636
22986
|
for (const [key, val] of Object.entries(content)) {
|
|
23637
22987
|
if (key === "__ohw_sections") continue;
|
|
23638
22988
|
if (key === AI_SECTIONS_KEY) continue;
|
|
23639
|
-
if (key === LOGO_PLACEHOLDER_KEY) continue;
|
|
23640
|
-
if (LOGO_IMAGE_KEYS.includes(key)) continue;
|
|
23641
22989
|
if (key === BRAND_KIT_KEY) continue;
|
|
23642
22990
|
if (key === STYLE_STORE_KEY) continue;
|
|
23643
22991
|
if (BRAND_CHROME_KEYS.has(key)) continue;
|
|
22992
|
+
if (key === LOGO_PLACEHOLDER_KEY) continue;
|
|
23644
22993
|
if (key === CUSTOM_CODE_AFTER_HEAD_KEY || key === CUSTOM_CODE_BEFORE_HEAD_KEY) continue;
|
|
22994
|
+
if (LOGO_IMAGE_KEYS.includes(key)) continue;
|
|
23645
22995
|
if (applyVideoSettingNode(key, val)) continue;
|
|
23646
22996
|
if (applyCarouselNode(key, val)) continue;
|
|
23647
22997
|
document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
|
|
@@ -23731,7 +23081,7 @@ function OhhwellsBridge() {
|
|
|
23731
23081
|
cancelled = true;
|
|
23732
23082
|
};
|
|
23733
23083
|
}, [subdomain, isEditMode]);
|
|
23734
|
-
(0,
|
|
23084
|
+
(0, import_react19.useEffect)(() => {
|
|
23735
23085
|
if (!isEditMode) return;
|
|
23736
23086
|
const resolveIndex = (form, clientY) => {
|
|
23737
23087
|
const wrappers = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== fieldDragRef.current?.key);
|
|
@@ -23772,7 +23122,7 @@ function OhhwellsBridge() {
|
|
|
23772
23122
|
window.removeEventListener("drop", onDrop, true);
|
|
23773
23123
|
};
|
|
23774
23124
|
}, [buildFieldDropSlots, isEditMode, persistFields, selectField]);
|
|
23775
|
-
(0,
|
|
23125
|
+
(0, import_react19.useEffect)(() => {
|
|
23776
23126
|
if (!isEditMode) return;
|
|
23777
23127
|
const mark = () => document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
23778
23128
|
markFormFields(form);
|
|
@@ -23784,7 +23134,7 @@ function OhhwellsBridge() {
|
|
|
23784
23134
|
});
|
|
23785
23135
|
return () => observer.disconnect();
|
|
23786
23136
|
}, [isEditMode, fetchState, pathname]);
|
|
23787
|
-
(0,
|
|
23137
|
+
(0, import_react19.useEffect)(() => {
|
|
23788
23138
|
if (!isEditMode) return;
|
|
23789
23139
|
let saveTimer = null;
|
|
23790
23140
|
const onInput = (e) => {
|
|
@@ -23806,14 +23156,14 @@ function OhhwellsBridge() {
|
|
|
23806
23156
|
document.addEventListener("input", onInput, true);
|
|
23807
23157
|
return () => document.removeEventListener("input", onInput, true);
|
|
23808
23158
|
}, [isEditMode, persistFields]);
|
|
23809
|
-
(0,
|
|
23159
|
+
(0, import_react19.useEffect)(() => {
|
|
23810
23160
|
if (isEditMode || fetchState !== "done") return;
|
|
23811
23161
|
const content = contentCache.get(subdomain) ?? {};
|
|
23812
23162
|
document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
23813
23163
|
reconcileFieldsFromContent(form, content);
|
|
23814
23164
|
});
|
|
23815
23165
|
}, [isEditMode, fetchState, subdomain]);
|
|
23816
|
-
(0,
|
|
23166
|
+
(0, import_react19.useEffect)(() => {
|
|
23817
23167
|
if (!isEditMode) return;
|
|
23818
23168
|
const swallow = (e) => {
|
|
23819
23169
|
const target = e.target;
|
|
@@ -23822,14 +23172,14 @@ function OhhwellsBridge() {
|
|
|
23822
23172
|
document.addEventListener("submit", swallow, true);
|
|
23823
23173
|
return () => document.removeEventListener("submit", swallow, true);
|
|
23824
23174
|
}, [isEditMode]);
|
|
23825
|
-
(0,
|
|
23175
|
+
(0, import_react19.useEffect)(() => {
|
|
23826
23176
|
if (isEditMode || fetchState !== "done") return;
|
|
23827
23177
|
console.log("env", process.env.NEXT_PUBLIC_FLOWOPS_API_URL);
|
|
23828
23178
|
const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
|
|
23829
23179
|
console.log({ apiUrl, subdomain });
|
|
23830
23180
|
bindPublishedForms(apiUrl, subdomain, contentCache.get(subdomain) ?? {});
|
|
23831
23181
|
}, [isEditMode, fetchState, subdomain]);
|
|
23832
|
-
(0,
|
|
23182
|
+
(0, import_react19.useEffect)(() => {
|
|
23833
23183
|
if (!subdomain || isEditMode) return;
|
|
23834
23184
|
let debounceTimer = null;
|
|
23835
23185
|
let observer = null;
|
|
@@ -23851,17 +23201,16 @@ function OhhwellsBridge() {
|
|
|
23851
23201
|
applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
|
|
23852
23202
|
}
|
|
23853
23203
|
if (typeof content[STYLE_STORE_KEY] === "string") {
|
|
23854
|
-
document.querySelectorAll('[data-ohw-editable="form"]').forEach((f) => markFormFields(f));
|
|
23855
23204
|
applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
|
|
23856
23205
|
}
|
|
23857
23206
|
for (const [key, val] of Object.entries(content)) {
|
|
23858
23207
|
if (key === "__ohw_sections") continue;
|
|
23859
23208
|
if (key === AI_SECTIONS_KEY) continue;
|
|
23860
|
-
if (key === LOGO_PLACEHOLDER_KEY) continue;
|
|
23861
|
-
if (LOGO_IMAGE_KEYS.includes(key)) continue;
|
|
23862
23209
|
if (key === BRAND_KIT_KEY) continue;
|
|
23863
23210
|
if (key === STYLE_STORE_KEY) continue;
|
|
23864
23211
|
if (BRAND_CHROME_KEYS.has(key)) continue;
|
|
23212
|
+
if (key === LOGO_PLACEHOLDER_KEY) continue;
|
|
23213
|
+
if (LOGO_IMAGE_KEYS.includes(key)) continue;
|
|
23865
23214
|
if (applyVideoSettingNode(key, val)) continue;
|
|
23866
23215
|
if (applyCarouselNode(key, val)) continue;
|
|
23867
23216
|
document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
|
|
@@ -23931,16 +23280,16 @@ function OhhwellsBridge() {
|
|
|
23931
23280
|
if (debounceTimer) clearTimeout(debounceTimer);
|
|
23932
23281
|
};
|
|
23933
23282
|
}, [subdomain, isEditMode, pathname]);
|
|
23934
|
-
(0,
|
|
23283
|
+
(0, import_react19.useLayoutEffect)(() => {
|
|
23935
23284
|
const el = document.getElementById("ohw-loader");
|
|
23936
23285
|
if (!el) return;
|
|
23937
23286
|
const visible = Boolean(subdomain) && fetchState !== "done";
|
|
23938
23287
|
el.style.display = visible ? "flex" : "none";
|
|
23939
23288
|
}, [subdomain, fetchState]);
|
|
23940
|
-
(0,
|
|
23289
|
+
(0, import_react19.useEffect)(() => {
|
|
23941
23290
|
postToParent2({ type: "ow:navigation", path: pathname });
|
|
23942
23291
|
}, [pathname, postToParent2]);
|
|
23943
|
-
(0,
|
|
23292
|
+
(0, import_react19.useEffect)(() => {
|
|
23944
23293
|
if (!subdomain || isEditMode) return;
|
|
23945
23294
|
const content = contentCache.get(subdomain);
|
|
23946
23295
|
if (!content) return;
|
|
@@ -23956,7 +23305,7 @@ function OhhwellsBridge() {
|
|
|
23956
23305
|
applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
|
|
23957
23306
|
}
|
|
23958
23307
|
}, [pathname, subdomain, isEditMode]);
|
|
23959
|
-
(0,
|
|
23308
|
+
(0, import_react19.useEffect)(() => {
|
|
23960
23309
|
if (!isEditMode) return;
|
|
23961
23310
|
if (linkPopoverSessionRef.current?.intent === "add-nav") return;
|
|
23962
23311
|
if (document.querySelector("[data-ohw-section-picker]")) return;
|
|
@@ -23964,11 +23313,11 @@ function OhhwellsBridge() {
|
|
|
23964
23313
|
deselectRef.current();
|
|
23965
23314
|
deactivateRef.current();
|
|
23966
23315
|
}, [pathname, isEditMode]);
|
|
23967
|
-
(0,
|
|
23316
|
+
(0, import_react19.useEffect)(() => {
|
|
23968
23317
|
if (!isEditMode) return;
|
|
23969
23318
|
initSectionInstancesFromContent(editContentRef.current, pathname);
|
|
23970
23319
|
}, [pathname, isEditMode]);
|
|
23971
|
-
(0,
|
|
23320
|
+
(0, import_react19.useEffect)(() => {
|
|
23972
23321
|
if (!isEditMode) return;
|
|
23973
23322
|
const observer = new MutationObserver(() => {
|
|
23974
23323
|
const drawer = document.querySelector("[data-ohw-nav-drawer]");
|
|
@@ -23979,7 +23328,7 @@ function OhhwellsBridge() {
|
|
|
23979
23328
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
23980
23329
|
return () => observer.disconnect();
|
|
23981
23330
|
}, [isEditMode, pathname]);
|
|
23982
|
-
(0,
|
|
23331
|
+
(0, import_react19.useEffect)(() => {
|
|
23983
23332
|
const contentForNav = () => {
|
|
23984
23333
|
if (isEditMode) return editContentRef.current;
|
|
23985
23334
|
if (!subdomain) return {};
|
|
@@ -24052,7 +23401,7 @@ function OhhwellsBridge() {
|
|
|
24052
23401
|
observer?.disconnect();
|
|
24053
23402
|
};
|
|
24054
23403
|
}, [isEditMode, pathname, subdomain, fetchState, resyncSelectedNavigationItem]);
|
|
24055
|
-
(0,
|
|
23404
|
+
(0, import_react19.useEffect)(() => {
|
|
24056
23405
|
if (!isEditMode) return;
|
|
24057
23406
|
let applying = false;
|
|
24058
23407
|
let rafId = null;
|
|
@@ -24090,7 +23439,7 @@ function OhhwellsBridge() {
|
|
|
24090
23439
|
observer.disconnect();
|
|
24091
23440
|
};
|
|
24092
23441
|
}, [isEditMode, pathname]);
|
|
24093
|
-
(0,
|
|
23442
|
+
(0, import_react19.useEffect)(() => {
|
|
24094
23443
|
if (!isEditMode) return;
|
|
24095
23444
|
let lastPosted = 0;
|
|
24096
23445
|
const measure = () => {
|
|
@@ -24112,14 +23461,29 @@ function OhhwellsBridge() {
|
|
|
24112
23461
|
const t2 = setTimeout(measure, 500);
|
|
24113
23462
|
const ro = new ResizeObserver(schedule);
|
|
24114
23463
|
ro.observe(document.body);
|
|
23464
|
+
let lastWidth = window.innerWidth;
|
|
23465
|
+
let resizeTimers = [];
|
|
23466
|
+
const clearResizeTimers = () => {
|
|
23467
|
+
resizeTimers.forEach(clearTimeout);
|
|
23468
|
+
resizeTimers = [];
|
|
23469
|
+
};
|
|
23470
|
+
const handleResize = () => {
|
|
23471
|
+
if (window.innerWidth === lastWidth) return;
|
|
23472
|
+
lastWidth = window.innerWidth;
|
|
23473
|
+
clearResizeTimers();
|
|
23474
|
+
resizeTimers = HEIGHT_SETTLE_DELAYS.map((delay) => setTimeout(measure, delay));
|
|
23475
|
+
};
|
|
23476
|
+
window.addEventListener("resize", handleResize);
|
|
24115
23477
|
return () => {
|
|
24116
23478
|
clearTimeout(t1);
|
|
24117
23479
|
clearTimeout(t2);
|
|
24118
23480
|
if (raf != null) cancelAnimationFrame(raf);
|
|
24119
23481
|
ro.disconnect();
|
|
23482
|
+
clearResizeTimers();
|
|
23483
|
+
window.removeEventListener("resize", handleResize);
|
|
24120
23484
|
};
|
|
24121
23485
|
}, [pathname, isEditMode, postToParent2]);
|
|
24122
|
-
(0,
|
|
23486
|
+
(0, import_react19.useEffect)(() => {
|
|
24123
23487
|
if (!subdomainFromQuery || isEditMode) return;
|
|
24124
23488
|
const handleClick = (e) => {
|
|
24125
23489
|
const anchor = e.target.closest("a");
|
|
@@ -24135,7 +23499,7 @@ function OhhwellsBridge() {
|
|
|
24135
23499
|
document.addEventListener("click", handleClick, true);
|
|
24136
23500
|
return () => document.removeEventListener("click", handleClick, true);
|
|
24137
23501
|
}, [subdomainFromQuery, isEditMode, router]);
|
|
24138
|
-
(0,
|
|
23502
|
+
(0, import_react19.useEffect)(() => {
|
|
24139
23503
|
if (!isEditMode) {
|
|
24140
23504
|
editStylesRef.current?.base.remove();
|
|
24141
23505
|
editStylesRef.current?.forceHover.remove();
|
|
@@ -24361,11 +23725,11 @@ function OhhwellsBridge() {
|
|
|
24361
23725
|
footer [data-ohw-href-key] [data-ohw-editable][contenteditable],
|
|
24362
23726
|
footer [data-ohw-href-key] [data-ohw-editable][contenteditable] * {
|
|
24363
23727
|
outline: none !important;
|
|
24364
|
-
caret-color: ${
|
|
23728
|
+
caret-color: ${PRIMARY5} !important;
|
|
24365
23729
|
cursor: text !important;
|
|
24366
23730
|
}
|
|
24367
23731
|
[data-ohw-editable][contenteditable]::selection,
|
|
24368
|
-
[data-ohw-editable][contenteditable] *::selection { background: ${
|
|
23732
|
+
[data-ohw-editable][contenteditable] *::selection { background: ${PRIMARY5}59 !important; }
|
|
24369
23733
|
[data-ohw-editable-state], [data-ohw-editable-state] * { pointer-events: none !important; }
|
|
24370
23734
|
[data-ohw-editable-state][data-ohw-active-state] [data-ohw-editable] { pointer-events: auto !important; }
|
|
24371
23735
|
[data-ohw-editable-state][data-ohw-active-state][data-ohw-editable] { pointer-events: auto !important; }
|
|
@@ -24411,13 +23775,6 @@ function OhhwellsBridge() {
|
|
|
24411
23775
|
if (target.closest("[data-ohw-state-toggle]")) return;
|
|
24412
23776
|
if (target.closest("[data-ohw-max-badge]")) return;
|
|
24413
23777
|
if (isInsideLinkEditor(target)) return;
|
|
24414
|
-
if (isInsideFloatingPanel(target)) return;
|
|
24415
|
-
if (target.closest("[data-ohw-form-toolbar]")) return;
|
|
24416
|
-
if (target.closest(
|
|
24417
|
-
'[data-ohw-field-toolbar], [data-ohw-field-type-picker], [data-radix-popper-content-wrapper], [role="menu"], [data-slot="dropdown-menu-content"]'
|
|
24418
|
-
)) {
|
|
24419
|
-
return;
|
|
24420
|
-
}
|
|
24421
23778
|
if (selectedMediaElRef.current && !selectedMediaElRef.current.contains(target) && !target.closest("[data-ohw-media-overlay], [data-ohw-edit-chrome], [data-ohw-item-interaction]")) {
|
|
24422
23779
|
clearMediaSelectionRef.current();
|
|
24423
23780
|
}
|
|
@@ -24438,6 +23795,13 @@ function OhhwellsBridge() {
|
|
|
24438
23795
|
return;
|
|
24439
23796
|
}
|
|
24440
23797
|
}
|
|
23798
|
+
if (isInsideFloatingPanel(target)) return;
|
|
23799
|
+
if (target.closest("[data-ohw-form-toolbar]")) return;
|
|
23800
|
+
if (target.closest(
|
|
23801
|
+
'[data-ohw-field-toolbar], [data-ohw-field-type-picker], [data-radix-popper-content-wrapper], [role="menu"], [data-slot="dropdown-menu-content"]'
|
|
23802
|
+
)) {
|
|
23803
|
+
return;
|
|
23804
|
+
}
|
|
24441
23805
|
{
|
|
24442
23806
|
const formEl = getFormElement(target);
|
|
24443
23807
|
const onSuccessText = target.closest(`[${SUCCESS_TEXT_ATTR}]`);
|
|
@@ -24817,9 +24181,6 @@ function OhhwellsBridge() {
|
|
|
24817
24181
|
setHoveredItemRect(null);
|
|
24818
24182
|
hoveredNavContainerRef.current = null;
|
|
24819
24183
|
setHoveredNavContainerRect(null);
|
|
24820
|
-
siblingHintElRef.current = null;
|
|
24821
|
-
setSiblingHintRect(null);
|
|
24822
|
-
setSiblingHintRects([]);
|
|
24823
24184
|
return;
|
|
24824
24185
|
}
|
|
24825
24186
|
{
|
|
@@ -24940,6 +24301,7 @@ function OhhwellsBridge() {
|
|
|
24940
24301
|
hoveredNavContainerRef.current = null;
|
|
24941
24302
|
setHoveredNavContainerRect(null);
|
|
24942
24303
|
hoveredItemElRef.current = editable;
|
|
24304
|
+
setHoveredItemRect(isSelectedForHoverRef.current(editable) ? null : editable.getBoundingClientRect());
|
|
24943
24305
|
}
|
|
24944
24306
|
}
|
|
24945
24307
|
}
|
|
@@ -25649,11 +25011,7 @@ function OhhwellsBridge() {
|
|
|
25649
25011
|
};
|
|
25650
25012
|
const handleMouseMove = (e) => {
|
|
25651
25013
|
const { clientX, clientY } = e;
|
|
25652
|
-
if (pointOwnedByFloatingPanel(clientX, clientY))
|
|
25653
|
-
dismissImageHover();
|
|
25654
|
-
clearImageHover();
|
|
25655
|
-
return;
|
|
25656
|
-
}
|
|
25014
|
+
if (pointOwnedByFloatingPanel(clientX, clientY)) return;
|
|
25657
25015
|
if (isNavDrawerOpen() && isPointOutsideOpenDrawer(clientX, clientY)) {
|
|
25658
25016
|
document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
|
|
25659
25017
|
formHoverElRef.current = null;
|
|
@@ -25682,12 +25040,7 @@ function OhhwellsBridge() {
|
|
|
25682
25040
|
setHoveredItemRect(null);
|
|
25683
25041
|
hoveredNavContainerRef.current = null;
|
|
25684
25042
|
setHoveredNavContainerRect(null);
|
|
25685
|
-
siblingHintElRef.current = null;
|
|
25686
|
-
setSiblingHintRect(null);
|
|
25687
|
-
setSiblingHintRects([]);
|
|
25688
25043
|
dismissImageHover();
|
|
25689
|
-
clearImageHover();
|
|
25690
|
-
setSectionGap(null);
|
|
25691
25044
|
return;
|
|
25692
25045
|
}
|
|
25693
25046
|
if (probeSocialsRowAt(clientX, clientY)) return;
|
|
@@ -25699,11 +25052,7 @@ function OhhwellsBridge() {
|
|
|
25699
25052
|
if (e.data?.type !== "ow:pointer-sync") return;
|
|
25700
25053
|
const { clientX, clientY } = e.data;
|
|
25701
25054
|
if (typeof clientX !== "number" || typeof clientY !== "number") return;
|
|
25702
|
-
if (pointOwnedByFloatingPanel(clientX, clientY))
|
|
25703
|
-
dismissImageHover();
|
|
25704
|
-
clearImageHover();
|
|
25705
|
-
return;
|
|
25706
|
-
}
|
|
25055
|
+
if (pointOwnedByFloatingPanel(clientX, clientY)) return;
|
|
25707
25056
|
if (isNavDrawerOpen() && isPointOutsideOpenDrawer(clientX, clientY)) return;
|
|
25708
25057
|
if (probeSocialsRowAt(clientX, clientY)) return;
|
|
25709
25058
|
probeSectionGapAt(clientX, clientY);
|
|
@@ -26049,7 +25398,6 @@ function OhhwellsBridge() {
|
|
|
26049
25398
|
}
|
|
26050
25399
|
if (typeof content[STYLE_STORE_KEY] === "string") {
|
|
26051
25400
|
stylesRef.current = content[STYLE_STORE_KEY];
|
|
26052
|
-
document.querySelectorAll('[data-ohw-editable="form"]').forEach((f) => markFormFields(f));
|
|
26053
25401
|
applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
|
|
26054
25402
|
}
|
|
26055
25403
|
applyBrandChrome(content);
|
|
@@ -26062,12 +25410,12 @@ function OhhwellsBridge() {
|
|
|
26062
25410
|
continue;
|
|
26063
25411
|
}
|
|
26064
25412
|
if (key === AI_SECTIONS_KEY) continue;
|
|
26065
|
-
if (key === LOGO_PLACEHOLDER_KEY) continue;
|
|
26066
|
-
if (LOGO_IMAGE_KEYS.includes(key) && !String(val ?? "").trim()) continue;
|
|
26067
25413
|
if (key === BRAND_KIT_KEY) continue;
|
|
26068
25414
|
if (key === STYLE_STORE_KEY) continue;
|
|
26069
25415
|
if (BRAND_CHROME_KEYS.has(key)) continue;
|
|
25416
|
+
if (key === LOGO_PLACEHOLDER_KEY) continue;
|
|
26070
25417
|
if (key === CUSTOM_CODE_AFTER_HEAD_KEY || key === CUSTOM_CODE_BEFORE_HEAD_KEY) continue;
|
|
25418
|
+
if (LOGO_IMAGE_KEYS.includes(key) && !String(val ?? "").trim()) continue;
|
|
26071
25419
|
if (applyVideoSettingNode(key, val)) continue;
|
|
26072
25420
|
if (applyCarouselNode(key, val)) continue;
|
|
26073
25421
|
document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
|
|
@@ -26513,12 +25861,6 @@ function OhhwellsBridge() {
|
|
|
26513
25861
|
closeLinkPopoverRef.current();
|
|
26514
25862
|
return;
|
|
26515
25863
|
}
|
|
26516
|
-
if (floatingPanelOpenRef.current) {
|
|
26517
|
-
setFloatingPanelRef.current(null);
|
|
26518
|
-
deselectRef.current();
|
|
26519
|
-
deactivateRef.current();
|
|
26520
|
-
return;
|
|
26521
|
-
}
|
|
26522
25864
|
deselectRef.current();
|
|
26523
25865
|
deactivateRef.current();
|
|
26524
25866
|
clearMediaSelectionRef.current();
|
|
@@ -26795,21 +26137,6 @@ function OhhwellsBridge() {
|
|
|
26795
26137
|
type: "text",
|
|
26796
26138
|
text: editContentRef.current[CUSTOM_CODE_AFTER_HEAD_KEY] ?? ""
|
|
26797
26139
|
});
|
|
26798
|
-
nodes.push({
|
|
26799
|
-
key: BRAND_TITLE_KEY,
|
|
26800
|
-
type: "text",
|
|
26801
|
-
text: editContentRef.current[BRAND_TITLE_KEY] ?? ""
|
|
26802
|
-
});
|
|
26803
|
-
nodes.push({
|
|
26804
|
-
key: SITE_DESCRIPTION_KEY,
|
|
26805
|
-
type: "text",
|
|
26806
|
-
text: editContentRef.current[SITE_DESCRIPTION_KEY] ?? ""
|
|
26807
|
-
});
|
|
26808
|
-
nodes.push({
|
|
26809
|
-
key: SITE_OG_IMAGE_KEY,
|
|
26810
|
-
type: "text",
|
|
26811
|
-
text: editContentRef.current[SITE_OG_IMAGE_KEY] ?? ""
|
|
26812
|
-
});
|
|
26813
26140
|
document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
26814
26141
|
const formKey = formKeyOf(form);
|
|
26815
26142
|
if (!formKey) return;
|
|
@@ -27266,17 +26593,17 @@ function OhhwellsBridge() {
|
|
|
27266
26593
|
window.removeEventListener("message", handleDeleteSection);
|
|
27267
26594
|
window.removeEventListener("message", handleDuplicateSection);
|
|
27268
26595
|
window.removeEventListener("message", handleDeactivate);
|
|
26596
|
+
document.documentElement.removeAttribute("data-ohw-panel-dragging");
|
|
27269
26597
|
window.removeEventListener("message", handleToastAction);
|
|
27270
26598
|
window.removeEventListener("message", handleFormCount);
|
|
27271
26599
|
window.removeEventListener("message", handleUiEscape);
|
|
27272
|
-
document.documentElement.removeAttribute("data-ohw-panel-dragging");
|
|
27273
26600
|
autoSaveTimers.current.forEach(clearTimeout);
|
|
27274
26601
|
autoSaveTimers.current.clear();
|
|
27275
26602
|
if (imageUnhoverTimerRef.current) clearTimeout(imageUnhoverTimerRef.current);
|
|
27276
26603
|
if (imageShowTimerRef.current) clearTimeout(imageShowTimerRef.current);
|
|
27277
26604
|
};
|
|
27278
26605
|
}, [isEditMode, refreshStateRules]);
|
|
27279
|
-
(0,
|
|
26606
|
+
(0, import_react19.useEffect)(() => {
|
|
27280
26607
|
if (!isEditMode) return;
|
|
27281
26608
|
const THRESHOLD = 10;
|
|
27282
26609
|
const resolveWasSelected = (el) => {
|
|
@@ -27432,7 +26759,7 @@ function OhhwellsBridge() {
|
|
|
27432
26759
|
unlockFooterDragInteraction();
|
|
27433
26760
|
};
|
|
27434
26761
|
}, [isEditMode]);
|
|
27435
|
-
(0,
|
|
26762
|
+
(0, import_react19.useEffect)(() => {
|
|
27436
26763
|
if (!isEditMode) return;
|
|
27437
26764
|
const THRESHOLD = 10;
|
|
27438
26765
|
const onPointerDown = (e) => {
|
|
@@ -27523,7 +26850,7 @@ function OhhwellsBridge() {
|
|
|
27523
26850
|
document.removeEventListener("selectstart", blockSelectStart, true);
|
|
27524
26851
|
};
|
|
27525
26852
|
}, [isEditMode, persistButtonCollectionDrag, refreshButtonDragVisuals]);
|
|
27526
|
-
(0,
|
|
26853
|
+
(0, import_react19.useEffect)(() => {
|
|
27527
26854
|
const handler = (e) => {
|
|
27528
26855
|
if (e.data?.type !== "ow:request-schedule-config") return;
|
|
27529
26856
|
const insertAfterVal = e.data.insertAfter;
|
|
@@ -27539,7 +26866,7 @@ function OhhwellsBridge() {
|
|
|
27539
26866
|
window.addEventListener("message", handler);
|
|
27540
26867
|
return () => window.removeEventListener("message", handler);
|
|
27541
26868
|
}, [processConfigRequest]);
|
|
27542
|
-
(0,
|
|
26869
|
+
(0, import_react19.useEffect)(() => {
|
|
27543
26870
|
if (!isEditMode) return;
|
|
27544
26871
|
document.querySelectorAll("[data-ohw-active-state]").forEach((el) => {
|
|
27545
26872
|
el.removeAttribute("data-ohw-active-state");
|
|
@@ -27575,13 +26902,13 @@ function OhhwellsBridge() {
|
|
|
27575
26902
|
clearTimeout(timer);
|
|
27576
26903
|
};
|
|
27577
26904
|
}, [pathname, isEditMode, refreshStateRules, postToParent2]);
|
|
27578
|
-
(0,
|
|
26905
|
+
(0, import_react19.useEffect)(() => {
|
|
27579
26906
|
scrollToHashSectionWhenReady();
|
|
27580
26907
|
const onHashChange = () => scrollToHashSectionWhenReady();
|
|
27581
26908
|
window.addEventListener("hashchange", onHashChange);
|
|
27582
26909
|
return () => window.removeEventListener("hashchange", onHashChange);
|
|
27583
26910
|
}, [pathname]);
|
|
27584
|
-
const handleCommand = (0,
|
|
26911
|
+
const handleCommand = (0, import_react19.useCallback)((cmd) => {
|
|
27585
26912
|
const el = activeElRef.current;
|
|
27586
26913
|
const selBefore = window.getSelection();
|
|
27587
26914
|
let savedOffsets = null;
|
|
@@ -27617,7 +26944,7 @@ function OhhwellsBridge() {
|
|
|
27617
26944
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
27618
26945
|
refreshActiveCommandsRef.current();
|
|
27619
26946
|
}, []);
|
|
27620
|
-
(0,
|
|
26947
|
+
(0, import_react19.useEffect)(() => {
|
|
27621
26948
|
const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
|
|
27622
26949
|
if (!session || !logoSizeDraft) return;
|
|
27623
26950
|
const onPanelAction = (e) => {
|
|
@@ -27655,7 +26982,7 @@ function OhhwellsBridge() {
|
|
|
27655
26982
|
window.addEventListener("message", onPanelAction);
|
|
27656
26983
|
return () => window.removeEventListener("message", onPanelAction);
|
|
27657
26984
|
}, [floatingPanel, logoSizeDraft, editorViewport, persistLogoSizeDraft, closeFloatingPanelAndDeselect]);
|
|
27658
|
-
const handleStateChange = (0,
|
|
26985
|
+
const handleStateChange = (0, import_react19.useCallback)((state) => {
|
|
27659
26986
|
if (!activeStateElRef.current) return;
|
|
27660
26987
|
const el = activeStateElRef.current;
|
|
27661
26988
|
if (state === "Default") {
|
|
@@ -27668,7 +26995,7 @@ function OhhwellsBridge() {
|
|
|
27668
26995
|
}
|
|
27669
26996
|
setToggleState((prev) => prev ? { ...prev, activeState: state } : null);
|
|
27670
26997
|
}, [deactivate]);
|
|
27671
|
-
const reselectAfterLinkPopover = (0,
|
|
26998
|
+
const reselectAfterLinkPopover = (0, import_react19.useCallback)(
|
|
27672
26999
|
(hrefKey) => {
|
|
27673
27000
|
requestAnimationFrame(() => {
|
|
27674
27001
|
const el = resolveHrefKeyElement(hrefKey);
|
|
@@ -27677,7 +27004,7 @@ function OhhwellsBridge() {
|
|
|
27677
27004
|
},
|
|
27678
27005
|
[resolveHrefKeyElement]
|
|
27679
27006
|
);
|
|
27680
|
-
const closeLinkPopover = (0,
|
|
27007
|
+
const closeLinkPopover = (0, import_react19.useCallback)(() => {
|
|
27681
27008
|
const session = linkPopoverSessionRef.current;
|
|
27682
27009
|
addNavAfterAnchorRef.current = null;
|
|
27683
27010
|
setLinkPopover(null);
|
|
@@ -27685,9 +27012,9 @@ function OhhwellsBridge() {
|
|
|
27685
27012
|
reselectAfterLinkPopover(session.key);
|
|
27686
27013
|
}
|
|
27687
27014
|
}, [reselectAfterLinkPopover]);
|
|
27688
|
-
const closeLinkPopoverRef = (0,
|
|
27015
|
+
const closeLinkPopoverRef = (0, import_react19.useRef)(closeLinkPopover);
|
|
27689
27016
|
closeLinkPopoverRef.current = closeLinkPopover;
|
|
27690
|
-
const openLinkPopoverForActive = (0,
|
|
27017
|
+
const openLinkPopoverForActive = (0, import_react19.useCallback)(() => {
|
|
27691
27018
|
const hrefCtx = getHrefKeyFromElement(activeElRef.current);
|
|
27692
27019
|
if (!hrefCtx) return;
|
|
27693
27020
|
bumpLinkPopoverGrace();
|
|
@@ -27698,7 +27025,7 @@ function OhhwellsBridge() {
|
|
|
27698
27025
|
});
|
|
27699
27026
|
deactivate();
|
|
27700
27027
|
}, [deactivate]);
|
|
27701
|
-
const openLinkPopoverForSelected = (0,
|
|
27028
|
+
const openLinkPopoverForSelected = (0, import_react19.useCallback)(() => {
|
|
27702
27029
|
const anchor = selectedElRef.current;
|
|
27703
27030
|
if (!anchor) return;
|
|
27704
27031
|
const key = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -27715,7 +27042,7 @@ function OhhwellsBridge() {
|
|
|
27715
27042
|
});
|
|
27716
27043
|
deselect();
|
|
27717
27044
|
}, [deselect]);
|
|
27718
|
-
const handleSelectParent = (0,
|
|
27045
|
+
const handleSelectParent = (0, import_react19.useCallback)(() => {
|
|
27719
27046
|
const selected = selectedElRef.current;
|
|
27720
27047
|
if (!selected) return;
|
|
27721
27048
|
if (toolbarVariantRef.current === "select-frame") {
|
|
@@ -27742,7 +27069,7 @@ function OhhwellsBridge() {
|
|
|
27742
27069
|
}
|
|
27743
27070
|
deselectRef.current();
|
|
27744
27071
|
}, []);
|
|
27745
|
-
const handleDuplicateSelected = (0,
|
|
27072
|
+
const handleDuplicateSelected = (0, import_react19.useCallback)(() => {
|
|
27746
27073
|
const selected = selectedElRef.current;
|
|
27747
27074
|
if (!selected || !isNavigationItem2(selected)) return;
|
|
27748
27075
|
if (isCtaButton(selected)) {
|
|
@@ -27905,7 +27232,7 @@ function OhhwellsBridge() {
|
|
|
27905
27232
|
});
|
|
27906
27233
|
}
|
|
27907
27234
|
}, [postToParent2, tokensForButton]);
|
|
27908
|
-
const runPendingDeleteUndo = (0,
|
|
27235
|
+
const runPendingDeleteUndo = (0, import_react19.useCallback)(() => {
|
|
27909
27236
|
const pending = pendingDeleteUndoRef.current;
|
|
27910
27237
|
if (!pending) return false;
|
|
27911
27238
|
pendingDeleteUndoRef.current = null;
|
|
@@ -27913,7 +27240,7 @@ function OhhwellsBridge() {
|
|
|
27913
27240
|
enforceLinkHrefs();
|
|
27914
27241
|
return true;
|
|
27915
27242
|
}, []);
|
|
27916
|
-
const handleDeleteSelected = (0,
|
|
27243
|
+
const handleDeleteSelected = (0, import_react19.useCallback)(() => {
|
|
27917
27244
|
const selected = selectedElRef.current;
|
|
27918
27245
|
if (!selected) return false;
|
|
27919
27246
|
if (isCtaButton(selected)) {
|
|
@@ -27966,7 +27293,7 @@ function OhhwellsBridge() {
|
|
|
27966
27293
|
}, [postToParent2]);
|
|
27967
27294
|
handleDeleteSelectedRef.current = handleDeleteSelected;
|
|
27968
27295
|
runPendingDeleteUndoRef.current = runPendingDeleteUndo;
|
|
27969
|
-
const handleLinkPopoverSubmit = (0,
|
|
27296
|
+
const handleLinkPopoverSubmit = (0, import_react19.useCallback)(
|
|
27970
27297
|
(target) => {
|
|
27971
27298
|
const session = linkPopoverSessionRef.current;
|
|
27972
27299
|
if (!session) return;
|
|
@@ -28032,14 +27359,14 @@ function OhhwellsBridge() {
|
|
|
28032
27359
|
const showEditLink = toolbarShowEditLink;
|
|
28033
27360
|
const currentSections = sectionsByPath[pathname] ?? [];
|
|
28034
27361
|
linkPopoverOpenRef.current = linkPopover !== null;
|
|
28035
|
-
const handleMediaSelect = (0,
|
|
27362
|
+
const handleMediaSelect = (0, import_react19.useCallback)((key) => {
|
|
28036
27363
|
const el = hoveredImageRef.current?.dataset.ohwKey === key ? hoveredImageRef.current : Array.from(document.querySelectorAll(MEDIA_SELECTOR)).find(
|
|
28037
27364
|
(m) => (m.dataset.ohwKey ?? "") === key
|
|
28038
27365
|
) ?? null;
|
|
28039
27366
|
if (!el) return;
|
|
28040
27367
|
selectMediaElementRef.current(el);
|
|
28041
27368
|
}, []);
|
|
28042
|
-
const handleMediaReplace = (0,
|
|
27369
|
+
const handleMediaReplace = (0, import_react19.useCallback)(
|
|
28043
27370
|
(key) => {
|
|
28044
27371
|
postToParent2({
|
|
28045
27372
|
type: "ow:image-pick",
|
|
@@ -28049,13 +27376,13 @@ function OhhwellsBridge() {
|
|
|
28049
27376
|
},
|
|
28050
27377
|
[postToParent2, mediaHover?.elementType, selectedMedia?.elementType]
|
|
28051
27378
|
);
|
|
28052
|
-
const handleEditCarousel = (0,
|
|
27379
|
+
const handleEditCarousel = (0, import_react19.useCallback)(
|
|
28053
27380
|
(key) => {
|
|
28054
27381
|
postToParent2({ type: "ow:carousel-open", key, images: readCarouselValue(key) });
|
|
28055
27382
|
},
|
|
28056
27383
|
[postToParent2]
|
|
28057
27384
|
);
|
|
28058
|
-
const handleMediaFadeOutComplete = (0,
|
|
27385
|
+
const handleMediaFadeOutComplete = (0, import_react19.useCallback)((key) => {
|
|
28059
27386
|
setUploadingRects((prev) => {
|
|
28060
27387
|
if (!(key in prev)) return prev;
|
|
28061
27388
|
const next = { ...prev };
|
|
@@ -28063,7 +27390,7 @@ function OhhwellsBridge() {
|
|
|
28063
27390
|
return next;
|
|
28064
27391
|
});
|
|
28065
27392
|
}, []);
|
|
28066
|
-
const handleVideoSettingsChange = (0,
|
|
27393
|
+
const handleVideoSettingsChange = (0, import_react19.useCallback)(
|
|
28067
27394
|
(key, settings) => {
|
|
28068
27395
|
document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
|
|
28069
27396
|
const video = getVideoEl2(el);
|
|
@@ -28085,14 +27412,14 @@ function OhhwellsBridge() {
|
|
|
28085
27412
|
},
|
|
28086
27413
|
[postToParent2]
|
|
28087
27414
|
);
|
|
28088
|
-
return /* @__PURE__ */ (0,
|
|
28089
|
-
/* @__PURE__ */ (0,
|
|
28090
|
-
/* @__PURE__ */ (0,
|
|
28091
|
-
subdomain && !isEditMode && showBranding && /* @__PURE__ */ (0,
|
|
27415
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
|
|
27416
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { id: "ohw-loader", suppressHydrationWarning: true, style: { ...OHW_LOADER_STYLE, display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(OhwLoaderSpinner, {}) }),
|
|
27417
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("script", { suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: OHW_LOADER_PREHYDRATE_SCRIPT } }),
|
|
27418
|
+
subdomain && !isEditMode && showBranding && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MadeWithOhhWells, {}),
|
|
28092
27419
|
bridgeRoot ? (0, import_react_dom5.createPortal)(
|
|
28093
|
-
/* @__PURE__ */ (0,
|
|
28094
|
-
/* @__PURE__ */ (0,
|
|
28095
|
-
isEditMode && /* @__PURE__ */ (0,
|
|
27420
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
|
|
27421
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
|
|
27422
|
+
isEditMode && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28096
27423
|
AiSectionOverlay,
|
|
28097
27424
|
{
|
|
28098
27425
|
postToParent: postToParent2,
|
|
@@ -28100,7 +27427,7 @@ function OhhwellsBridge() {
|
|
|
28100
27427
|
onSelectionChange: handleAiSectionSelectionChange
|
|
28101
27428
|
}
|
|
28102
27429
|
),
|
|
28103
|
-
isEditMode && /* @__PURE__ */ (0,
|
|
27430
|
+
isEditMode && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28104
27431
|
AiMediaStripOverlay,
|
|
28105
27432
|
{
|
|
28106
27433
|
postToParent: postToParent2,
|
|
@@ -28109,7 +27436,7 @@ function OhhwellsBridge() {
|
|
|
28109
27436
|
clearInteractionChromeRef
|
|
28110
27437
|
}
|
|
28111
27438
|
),
|
|
28112
|
-
isEditMode && /* @__PURE__ */ (0,
|
|
27439
|
+
isEditMode && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28113
27440
|
AiPricingCardOverlay,
|
|
28114
27441
|
{
|
|
28115
27442
|
postToParent: postToParent2,
|
|
@@ -28117,21 +27444,12 @@ function OhhwellsBridge() {
|
|
|
28117
27444
|
applyTreeLocalRef
|
|
28118
27445
|
}
|
|
28119
27446
|
),
|
|
28120
|
-
|
|
28121
|
-
AiVideoOverlay,
|
|
28122
|
-
{
|
|
28123
|
-
postToParent: postToParent2,
|
|
28124
|
-
aiSectionsRef,
|
|
28125
|
-
applyTreeLocalRef,
|
|
28126
|
-
clearInteractionChromeRef
|
|
28127
|
-
}
|
|
28128
|
-
),
|
|
28129
|
-
isSectionDragging && sectionDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
27447
|
+
isSectionDragging && sectionDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28130
27448
|
"div",
|
|
28131
27449
|
{
|
|
28132
27450
|
className: "pointer-events-none fixed z-2147483646",
|
|
28133
27451
|
style: { left: slot.left, top: slot.y, width: slot.width, height: 3, transform: "translateY(-50%)" },
|
|
28134
|
-
children: /* @__PURE__ */ (0,
|
|
27452
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28135
27453
|
DropIndicator,
|
|
28136
27454
|
{
|
|
28137
27455
|
direction: "horizontal",
|
|
@@ -28142,7 +27460,7 @@ function OhhwellsBridge() {
|
|
|
28142
27460
|
},
|
|
28143
27461
|
`section-drop-${slot.insertIndex}-${i}`
|
|
28144
27462
|
)),
|
|
28145
|
-
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0,
|
|
27463
|
+
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28146
27464
|
MediaOverlay,
|
|
28147
27465
|
{
|
|
28148
27466
|
hover: { key, rect, elementType: "image", isDragOver: false, hasTextOverlap: false },
|
|
@@ -28153,7 +27471,7 @@ function OhhwellsBridge() {
|
|
|
28153
27471
|
},
|
|
28154
27472
|
`uploading-${key}`
|
|
28155
27473
|
)),
|
|
28156
|
-
mediaHover && !(mediaHover.key in uploadingRects) && mediaHover.key !== selectedMedia?.key && /* @__PURE__ */ (0,
|
|
27474
|
+
mediaHover && !(mediaHover.key in uploadingRects) && mediaHover.key !== selectedMedia?.key && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28157
27475
|
MediaOverlay,
|
|
28158
27476
|
{
|
|
28159
27477
|
hover: mediaHover,
|
|
@@ -28164,7 +27482,7 @@ function OhhwellsBridge() {
|
|
|
28164
27482
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
28165
27483
|
}
|
|
28166
27484
|
),
|
|
28167
|
-
selectedMedia && !(selectedMedia.key in uploadingRects) && !linkPopover && /* @__PURE__ */ (0,
|
|
27485
|
+
selectedMedia && !(selectedMedia.key in uploadingRects) && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28168
27486
|
MediaOverlay,
|
|
28169
27487
|
{
|
|
28170
27488
|
hover: selectedMedia,
|
|
@@ -28176,7 +27494,7 @@ function OhhwellsBridge() {
|
|
|
28176
27494
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
28177
27495
|
}
|
|
28178
27496
|
),
|
|
28179
|
-
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0,
|
|
27497
|
+
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28180
27498
|
CarouselOverlay,
|
|
28181
27499
|
{
|
|
28182
27500
|
hover: carouselHover,
|
|
@@ -28184,10 +27502,10 @@ function OhhwellsBridge() {
|
|
|
28184
27502
|
cueOnly: !!carouselHover.fullBleedSectionId && carouselHover.fullBleedSectionId !== selectedAiSectionId
|
|
28185
27503
|
}
|
|
28186
27504
|
),
|
|
28187
|
-
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0,
|
|
28188
|
-
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0,
|
|
28189
|
-
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && selectedElRef.current !== buttonCollectionDragRef.current && /* @__PURE__ */ (0,
|
|
28190
|
-
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
27505
|
+
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
|
|
27506
|
+
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ItemInteractionLayer, { rect, state: "sibling-hint" }, `sibling-hint-${i}`)),
|
|
27507
|
+
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && selectedElRef.current !== buttonCollectionDragRef.current && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ItemInteractionLayer, { rect: draggedItemRect, state: "dragging" }),
|
|
27508
|
+
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28191
27509
|
"div",
|
|
28192
27510
|
{
|
|
28193
27511
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -28197,7 +27515,7 @@ function OhhwellsBridge() {
|
|
|
28197
27515
|
width: slot.width,
|
|
28198
27516
|
height: slot.height
|
|
28199
27517
|
},
|
|
28200
|
-
children: /* @__PURE__ */ (0,
|
|
27518
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28201
27519
|
DropIndicator,
|
|
28202
27520
|
{
|
|
28203
27521
|
direction: slot.direction,
|
|
@@ -28208,7 +27526,7 @@ function OhhwellsBridge() {
|
|
|
28208
27526
|
},
|
|
28209
27527
|
`footer-drop-${slot.direction}-${slot.columnIndex}-${slot.insertIndex}-${i}`
|
|
28210
27528
|
)),
|
|
28211
|
-
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
27529
|
+
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28212
27530
|
"div",
|
|
28213
27531
|
{
|
|
28214
27532
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -28218,7 +27536,7 @@ function OhhwellsBridge() {
|
|
|
28218
27536
|
width: slot.width,
|
|
28219
27537
|
height: slot.height
|
|
28220
27538
|
},
|
|
28221
|
-
children: /* @__PURE__ */ (0,
|
|
27539
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28222
27540
|
DropIndicator,
|
|
28223
27541
|
{
|
|
28224
27542
|
direction: slot.direction,
|
|
@@ -28229,7 +27547,7 @@ function OhhwellsBridge() {
|
|
|
28229
27547
|
},
|
|
28230
27548
|
`nav-drop-${slot.direction}-${slot.parentId ?? "root"}-${slot.insertIndex}-${i}`
|
|
28231
27549
|
)),
|
|
28232
|
-
isItemDragging && buttonDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
27550
|
+
isItemDragging && buttonDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28233
27551
|
"div",
|
|
28234
27552
|
{
|
|
28235
27553
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -28239,7 +27557,7 @@ function OhhwellsBridge() {
|
|
|
28239
27557
|
width: slot.width,
|
|
28240
27558
|
height: slot.height
|
|
28241
27559
|
},
|
|
28242
|
-
children: /* @__PURE__ */ (0,
|
|
27560
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28243
27561
|
DropIndicator,
|
|
28244
27562
|
{
|
|
28245
27563
|
direction: slot.direction,
|
|
@@ -28250,10 +27568,10 @@ function OhhwellsBridge() {
|
|
|
28250
27568
|
},
|
|
28251
27569
|
`button-drop-${slot.direction}-${slot.insertIndex}-${i}`
|
|
28252
27570
|
)),
|
|
28253
|
-
hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ (0,
|
|
28254
|
-
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0,
|
|
28255
|
-
hoveredTextRect && !hoveredNavContainerRect && !hoveredItemRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0,
|
|
28256
|
-
formPickRect && !isItemDragging && /* @__PURE__ */ (0,
|
|
27571
|
+
hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
|
|
27572
|
+
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
|
|
27573
|
+
hoveredTextRect && !hoveredNavContainerRect && !hoveredItemRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ItemInteractionLayer, { rect: hoveredTextRect, state: "hover" }),
|
|
27574
|
+
formPickRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28257
27575
|
ItemInteractionLayer,
|
|
28258
27576
|
{
|
|
28259
27577
|
rect: formPickRect,
|
|
@@ -28261,13 +27579,13 @@ function OhhwellsBridge() {
|
|
|
28261
27579
|
itemDragSurface: false,
|
|
28262
27580
|
toolbarAlign: "left",
|
|
28263
27581
|
chromeGap: 24,
|
|
28264
|
-
toolbar: fieldPickRect ? void 0 : /* @__PURE__ */ (0,
|
|
27582
|
+
toolbar: fieldPickRect ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
28265
27583
|
"div",
|
|
28266
27584
|
{
|
|
28267
27585
|
"data-ohw-form-toolbar": "",
|
|
28268
27586
|
className: "pointer-events-auto flex items-center gap-0.5 whitespace-nowrap rounded-lg border border-border bg-background p-1 shadow-md",
|
|
28269
27587
|
children: [
|
|
28270
|
-
/* @__PURE__ */ (0,
|
|
27588
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28271
27589
|
"button",
|
|
28272
27590
|
{
|
|
28273
27591
|
type: "button",
|
|
@@ -28275,11 +27593,11 @@ function OhhwellsBridge() {
|
|
|
28275
27593
|
className: "flex h-7 w-7 items-center justify-center rounded-md text-foreground transition-colors hover:bg-muted/80",
|
|
28276
27594
|
onClick: () => setFieldTypePickerOpen((open) => !open),
|
|
28277
27595
|
"data-ohw-add-field": "",
|
|
28278
|
-
children: /* @__PURE__ */ (0,
|
|
27596
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react20.Plus, { size: 15, "aria-hidden": true })
|
|
28279
27597
|
}
|
|
28280
27598
|
),
|
|
28281
|
-
/* @__PURE__ */ (0,
|
|
28282
|
-
/* @__PURE__ */ (0,
|
|
27599
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border" }),
|
|
27600
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
28283
27601
|
"button",
|
|
28284
27602
|
{
|
|
28285
27603
|
type: "button",
|
|
@@ -28295,11 +27613,11 @@ function OhhwellsBridge() {
|
|
|
28295
27613
|
});
|
|
28296
27614
|
},
|
|
28297
27615
|
children: [
|
|
28298
|
-
/* @__PURE__ */ (0,
|
|
27616
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react20.Settings, { size: 14, "aria-hidden": true }),
|
|
28299
27617
|
"Form settings",
|
|
28300
27618
|
formPickCount ? (
|
|
28301
27619
|
// Counter pill, per the design — not a text suffix.
|
|
28302
|
-
/* @__PURE__ */ (0,
|
|
27620
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28303
27621
|
"span",
|
|
28304
27622
|
{
|
|
28305
27623
|
"data-ohw-form-count": "",
|
|
@@ -28311,8 +27629,8 @@ function OhhwellsBridge() {
|
|
|
28311
27629
|
]
|
|
28312
27630
|
}
|
|
28313
27631
|
),
|
|
28314
|
-
/* @__PURE__ */ (0,
|
|
28315
|
-
/* @__PURE__ */ (0,
|
|
27632
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border" }),
|
|
27633
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex items-center rounded-md bg-muted/70 p-0.5", children: ["default", "success"].map((state) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28316
27634
|
"button",
|
|
28317
27635
|
{
|
|
28318
27636
|
type: "button",
|
|
@@ -28343,7 +27661,7 @@ function OhhwellsBridge() {
|
|
|
28343
27661
|
)
|
|
28344
27662
|
}
|
|
28345
27663
|
),
|
|
28346
|
-
formHoverRect && !isItemDragging && /* @__PURE__ */ (0,
|
|
27664
|
+
formHoverRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28347
27665
|
ItemInteractionLayer,
|
|
28348
27666
|
{
|
|
28349
27667
|
rect: formHoverRect,
|
|
@@ -28351,7 +27669,7 @@ function OhhwellsBridge() {
|
|
|
28351
27669
|
chromeGap: formHoverElRef.current && getFieldWrapper(formHoverElRef.current) ? 8 : 24
|
|
28352
27670
|
}
|
|
28353
27671
|
),
|
|
28354
|
-
fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0,
|
|
27672
|
+
fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28355
27673
|
ItemInteractionLayer,
|
|
28356
27674
|
{
|
|
28357
27675
|
rect: fieldPickRect,
|
|
@@ -28363,7 +27681,7 @@ function OhhwellsBridge() {
|
|
|
28363
27681
|
dragHandleLabel: "Reorder field",
|
|
28364
27682
|
onDragHandleDragStart: handleFieldDragStart,
|
|
28365
27683
|
onDragHandleDragEnd: handleFieldDragEnd,
|
|
28366
|
-
toolbar: /* @__PURE__ */ (0,
|
|
27684
|
+
toolbar: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28367
27685
|
FormFieldToolbar,
|
|
28368
27686
|
{
|
|
28369
27687
|
type: fieldPickState.type,
|
|
@@ -28376,12 +27694,12 @@ function OhhwellsBridge() {
|
|
|
28376
27694
|
)
|
|
28377
27695
|
}
|
|
28378
27696
|
),
|
|
28379
|
-
fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
27697
|
+
fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28380
27698
|
"div",
|
|
28381
27699
|
{
|
|
28382
27700
|
className: "pointer-events-none fixed z-[2147483644]",
|
|
28383
27701
|
style: { top: slot.top, left: slot.left, width: slot.width },
|
|
28384
|
-
children: /* @__PURE__ */ (0,
|
|
27702
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28385
27703
|
DropIndicator,
|
|
28386
27704
|
{
|
|
28387
27705
|
direction: "horizontal",
|
|
@@ -28394,7 +27712,7 @@ function OhhwellsBridge() {
|
|
|
28394
27712
|
)) : null,
|
|
28395
27713
|
fieldTypePickerOpen && formPickRect ? (() => {
|
|
28396
27714
|
const toolbar = document.querySelector("[data-ohw-form-toolbar]")?.getBoundingClientRect();
|
|
28397
|
-
return /* @__PURE__ */ (0,
|
|
27715
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28398
27716
|
"div",
|
|
28399
27717
|
{
|
|
28400
27718
|
className: "pointer-events-none fixed z-[2147483645]",
|
|
@@ -28402,12 +27720,12 @@ function OhhwellsBridge() {
|
|
|
28402
27720
|
top: toolbar ? toolbar.bottom + 6 : formPickRect.top + 16,
|
|
28403
27721
|
left: toolbar ? toolbar.left : formPickRect.left + 24
|
|
28404
27722
|
},
|
|
28405
|
-
children: /* @__PURE__ */ (0,
|
|
27723
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(FieldTypePicker, { onPick: handleAddField })
|
|
28406
27724
|
}
|
|
28407
27725
|
);
|
|
28408
27726
|
})() : null,
|
|
28409
|
-
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ (0,
|
|
28410
|
-
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0,
|
|
27727
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(NavbarContainerChrome, { rect: toolbarRect, onAdd: handleAddTopLevelNavItem }),
|
|
27728
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28411
27729
|
FooterContainerChrome,
|
|
28412
27730
|
{
|
|
28413
27731
|
rect: toolbarRect,
|
|
@@ -28415,7 +27733,7 @@ function OhhwellsBridge() {
|
|
|
28415
27733
|
addDisabled: !canAddFooterColumn()
|
|
28416
27734
|
}
|
|
28417
27735
|
),
|
|
28418
|
-
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */ (0,
|
|
27736
|
+
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28419
27737
|
ItemInteractionLayer,
|
|
28420
27738
|
{
|
|
28421
27739
|
rect: isItemDragging && draggedItemRect && (footerDragRef.current?.wasSelected || navDragRef.current?.wasSelected || selectedElRef.current === buttonCollectionDragRef.current) ? draggedItemRect : toolbarRect,
|
|
@@ -28435,7 +27753,7 @@ function OhhwellsBridge() {
|
|
|
28435
27753
|
onItemPointerDown: toolbarVariant === "logo" ? void 0 : handleItemChromePointerDown,
|
|
28436
27754
|
onItemClick: toolbarVariant === "logo" ? void 0 : handleItemChromeClick,
|
|
28437
27755
|
itemDragSurface: toolbarVariant !== "logo" && !isFooterFrameSelection && !selectedIsSocialsRow,
|
|
28438
|
-
toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */ (0,
|
|
27756
|
+
toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28439
27757
|
ItemActionToolbar,
|
|
28440
27758
|
{
|
|
28441
27759
|
onEditLink: openLinkPopoverForSelected,
|
|
@@ -28486,8 +27804,8 @@ function OhhwellsBridge() {
|
|
|
28486
27804
|
) : void 0
|
|
28487
27805
|
}
|
|
28488
27806
|
),
|
|
28489
|
-
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && !isRectOutsideClip(toolbarRect, getIframeVisibleClip(parentScrollRef.current)) && /* @__PURE__ */ (0,
|
|
28490
|
-
/* @__PURE__ */ (0,
|
|
27807
|
+
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && !isRectOutsideClip(toolbarRect, getIframeVisibleClip(parentScrollRef.current)) && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
|
|
27808
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28491
27809
|
EditGlowChrome,
|
|
28492
27810
|
{
|
|
28493
27811
|
rect: toolbarRect,
|
|
@@ -28497,7 +27815,7 @@ function OhhwellsBridge() {
|
|
|
28497
27815
|
hideHandle: isItemDragging
|
|
28498
27816
|
}
|
|
28499
27817
|
),
|
|
28500
|
-
/* @__PURE__ */ (0,
|
|
27818
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28501
27819
|
FloatingToolbar,
|
|
28502
27820
|
{
|
|
28503
27821
|
rect: toolbarRect,
|
|
@@ -28510,7 +27828,7 @@ function OhhwellsBridge() {
|
|
|
28510
27828
|
}
|
|
28511
27829
|
)
|
|
28512
27830
|
] }),
|
|
28513
|
-
maxBadge && /* @__PURE__ */ (0,
|
|
27831
|
+
maxBadge && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
28514
27832
|
"div",
|
|
28515
27833
|
{
|
|
28516
27834
|
"data-ohw-max-badge": "",
|
|
@@ -28536,7 +27854,7 @@ function OhhwellsBridge() {
|
|
|
28536
27854
|
]
|
|
28537
27855
|
}
|
|
28538
27856
|
),
|
|
28539
|
-
toggleState && !linkPopover && /* @__PURE__ */ (0,
|
|
27857
|
+
toggleState && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28540
27858
|
StateToggle,
|
|
28541
27859
|
{
|
|
28542
27860
|
rect: toggleState.rect,
|
|
@@ -28545,15 +27863,15 @@ function OhhwellsBridge() {
|
|
|
28545
27863
|
onStateChange: handleStateChange
|
|
28546
27864
|
}
|
|
28547
27865
|
),
|
|
28548
|
-
sectionGap && !linkPopover && /* @__PURE__ */ (0,
|
|
27866
|
+
sectionGap && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
28549
27867
|
"div",
|
|
28550
27868
|
{
|
|
28551
27869
|
"data-ohw-section-insert-line": "",
|
|
28552
27870
|
className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
|
|
28553
27871
|
style: { top: sectionGap.y, transform: "translateY(-50%)" },
|
|
28554
27872
|
children: [
|
|
28555
|
-
/* @__PURE__ */ (0,
|
|
28556
|
-
/* @__PURE__ */ (0,
|
|
27873
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } }),
|
|
27874
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28557
27875
|
Badge,
|
|
28558
27876
|
{
|
|
28559
27877
|
className: "px-8 py-1 bg-bridge-primary hover:bg-bridge-primary text-primary-foreground text-xs font-medium shrink-0 rounded-full cursor-pointer pointer-events-auto",
|
|
@@ -28570,11 +27888,11 @@ function OhhwellsBridge() {
|
|
|
28570
27888
|
children: "Add Section"
|
|
28571
27889
|
}
|
|
28572
27890
|
),
|
|
28573
|
-
/* @__PURE__ */ (0,
|
|
27891
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } })
|
|
28574
27892
|
]
|
|
28575
27893
|
}
|
|
28576
27894
|
),
|
|
28577
|
-
linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0,
|
|
27895
|
+
linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28578
27896
|
LinkPopover,
|
|
28579
27897
|
{
|
|
28580
27898
|
panelRef: linkPopoverPanelRef,
|
|
@@ -28591,7 +27909,7 @@ function OhhwellsBridge() {
|
|
|
28591
27909
|
},
|
|
28592
27910
|
linkPopover.key
|
|
28593
27911
|
) : null,
|
|
28594
|
-
floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */ (0,
|
|
27912
|
+
floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28595
27913
|
FloatingPanel,
|
|
28596
27914
|
{
|
|
28597
27915
|
open: true,
|
|
@@ -28601,7 +27919,7 @@ function OhhwellsBridge() {
|
|
|
28601
27919
|
onPositionChange: setFloatingPanelPos,
|
|
28602
27920
|
parentScroll: parentScrollSnap ?? parentScrollRef.current,
|
|
28603
27921
|
onClose: closeFloatingPanelOnly,
|
|
28604
|
-
children: /* @__PURE__ */ (0,
|
|
27922
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28605
27923
|
SocialsDisplayPanel,
|
|
28606
27924
|
{
|
|
28607
27925
|
display: socialsDisplayFor(floatingPanel.row, editContentRef.current),
|
|
@@ -28622,19 +27940,19 @@ function OhhwellsBridge() {
|
|
|
28622
27940
|
const tokens = tokensFromButton(button);
|
|
28623
27941
|
const current = assignmentFor(button, editContentRef.current, tokens);
|
|
28624
27942
|
void buttonStyleTick;
|
|
28625
|
-
return /* @__PURE__ */ (0,
|
|
27943
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28626
27944
|
FloatingPanel,
|
|
28627
27945
|
{
|
|
28628
27946
|
open: true,
|
|
28629
27947
|
title: floatingPanel.title,
|
|
28630
27948
|
context: floatingPanel.context,
|
|
28631
|
-
icon: /* @__PURE__ */ (0,
|
|
27949
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react20.Brush, { className: "size-4 shrink-0", "aria-hidden": true }),
|
|
28632
27950
|
position: floatingPanelPos,
|
|
28633
27951
|
onPositionChange: setFloatingPanelPos,
|
|
28634
27952
|
parentScroll: parentScrollSnap ?? parentScrollRef.current,
|
|
28635
27953
|
onClose: closeFloatingPanelOnly,
|
|
28636
27954
|
bodyClassName: "gap-5",
|
|
28637
|
-
children: /* @__PURE__ */ (0,
|
|
27955
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
28638
27956
|
ButtonStylePanel,
|
|
28639
27957
|
{
|
|
28640
27958
|
variants: tokens.variants,
|
|
@@ -28662,10 +27980,10 @@ function OhhwellsBridge() {
|
|
|
28662
27980
|
|
|
28663
27981
|
// src/ui/EmptySection.tsx
|
|
28664
27982
|
var import_link = __toESM(require("next/link"), 1);
|
|
28665
|
-
var
|
|
27983
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
28666
27984
|
function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey }) {
|
|
28667
|
-
return /* @__PURE__ */ (0,
|
|
28668
|
-
/* @__PURE__ */ (0,
|
|
27985
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
|
|
27986
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
28669
27987
|
"p",
|
|
28670
27988
|
{
|
|
28671
27989
|
style: {
|
|
@@ -28677,10 +27995,10 @@ function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey
|
|
|
28677
27995
|
color: "var(--brand-accent)",
|
|
28678
27996
|
marginBottom: "1.5rem"
|
|
28679
27997
|
},
|
|
28680
|
-
children: /* @__PURE__ */ (0,
|
|
27998
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_link.default, { href: homeHref, style: { color: "inherit" }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { ...eyebrowKey ? { "data-ohw-editable": "text", "data-ohw-key": eyebrowKey } : {}, children: "Home" }) })
|
|
28681
27999
|
}
|
|
28682
28000
|
),
|
|
28683
|
-
/* @__PURE__ */ (0,
|
|
28001
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
28684
28002
|
"h1",
|
|
28685
28003
|
{
|
|
28686
28004
|
style: {
|
|
@@ -28695,7 +28013,7 @@ function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey
|
|
|
28695
28013
|
children: title
|
|
28696
28014
|
}
|
|
28697
28015
|
),
|
|
28698
|
-
/* @__PURE__ */ (0,
|
|
28016
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
28699
28017
|
"p",
|
|
28700
28018
|
{
|
|
28701
28019
|
style: {
|