@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.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
// src/OhhwellsBridge.tsx
|
|
4
|
-
import React12, { useCallback as
|
|
4
|
+
import React12, { useCallback as useCallback10, useEffect as useEffect15, useLayoutEffect as useLayoutEffect5, useRef as useRef12, useState as useState16 } from "react";
|
|
5
5
|
import { createRoot as createRoot2 } from "react-dom/client";
|
|
6
6
|
import { flushSync as flushSync2 } from "react-dom";
|
|
7
7
|
|
|
@@ -222,14 +222,10 @@ function reapRemovedAiSections(state, store, removedIds, excludeIds = /* @__PURE
|
|
|
222
222
|
var BRAND_NAME_KEY = "__ohw_brand_name";
|
|
223
223
|
var BRAND_TITLE_KEY = "__ohw_site_title";
|
|
224
224
|
var BRAND_FAVICON_LETTER_KEY = "__ohw_favicon_letter";
|
|
225
|
-
var SITE_DESCRIPTION_KEY = "__ohw_site_description";
|
|
226
|
-
var SITE_OG_IMAGE_KEY = "__ohw_og_image";
|
|
227
225
|
var BRAND_CHROME_KEYS = /* @__PURE__ */ new Set([
|
|
228
226
|
BRAND_NAME_KEY,
|
|
229
227
|
BRAND_TITLE_KEY,
|
|
230
|
-
BRAND_FAVICON_LETTER_KEY
|
|
231
|
-
SITE_DESCRIPTION_KEY,
|
|
232
|
-
SITE_OG_IMAGE_KEY
|
|
228
|
+
BRAND_FAVICON_LETTER_KEY
|
|
233
229
|
]);
|
|
234
230
|
function upsertMeta(selector, attr, token, value) {
|
|
235
231
|
let el = document.head.querySelector(selector);
|
|
@@ -240,9 +236,6 @@ function upsertMeta(selector, attr, token, value) {
|
|
|
240
236
|
}
|
|
241
237
|
if (el.getAttribute("content") !== value) el.setAttribute("content", value);
|
|
242
238
|
}
|
|
243
|
-
function removeMeta(selector) {
|
|
244
|
-
document.head.querySelector(selector)?.remove();
|
|
245
|
-
}
|
|
246
239
|
function escapeXml(value) {
|
|
247
240
|
return value.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
|
|
248
241
|
}
|
|
@@ -258,22 +251,6 @@ function applyLetterFavicon(letter) {
|
|
|
258
251
|
link.type = "image/svg+xml";
|
|
259
252
|
if (link.href !== href) link.href = href;
|
|
260
253
|
}
|
|
261
|
-
function applyDescription(description) {
|
|
262
|
-
if (!description) return;
|
|
263
|
-
upsertMeta('meta[name="description"]', "name", "description", description);
|
|
264
|
-
upsertMeta('meta[property="og:description"]', "property", "og:description", description);
|
|
265
|
-
upsertMeta('meta[name="twitter:description"]', "name", "twitter:description", description);
|
|
266
|
-
}
|
|
267
|
-
function applyOgImage(url) {
|
|
268
|
-
if (url) {
|
|
269
|
-
upsertMeta('meta[property="og:image"]', "property", "og:image", url);
|
|
270
|
-
upsertMeta('meta[name="twitter:image"]', "name", "twitter:image", url);
|
|
271
|
-
upsertMeta('meta[name="twitter:card"]', "name", "twitter:card", "summary_large_image");
|
|
272
|
-
return;
|
|
273
|
-
}
|
|
274
|
-
removeMeta('meta[property="og:image"]');
|
|
275
|
-
removeMeta('meta[name="twitter:image"]');
|
|
276
|
-
}
|
|
277
254
|
function applyBrandChrome(content) {
|
|
278
255
|
const name = content[BRAND_NAME_KEY];
|
|
279
256
|
if (typeof name === "string" && name.length > 0) {
|
|
@@ -292,13 +269,6 @@ function applyBrandChrome(content) {
|
|
|
292
269
|
if (typeof letter === "string" && letter.length > 0) {
|
|
293
270
|
applyLetterFavicon(letter);
|
|
294
271
|
}
|
|
295
|
-
const description = content[SITE_DESCRIPTION_KEY];
|
|
296
|
-
if (typeof description === "string" && description.length > 0) {
|
|
297
|
-
applyDescription(description);
|
|
298
|
-
}
|
|
299
|
-
if (Object.prototype.hasOwnProperty.call(content, SITE_OG_IMAGE_KEY)) {
|
|
300
|
-
applyOgImage(String(content[SITE_OG_IMAGE_KEY] ?? "").trim());
|
|
301
|
-
}
|
|
302
272
|
}
|
|
303
273
|
|
|
304
274
|
// src/lib/brand-kit.ts
|
|
@@ -1237,7 +1207,7 @@ function initSectionInstancesFromContent(content, currentPath) {
|
|
|
1237
1207
|
|
|
1238
1208
|
// src/ui/ai-tree/AiTreeRenderer.tsx
|
|
1239
1209
|
import React from "react";
|
|
1240
|
-
import { ArrowLeft, ArrowRight, ChevronDown,
|
|
1210
|
+
import { ArrowLeft, ArrowRight, ChevronDown, icons as lucideIcons } from "lucide-react";
|
|
1241
1211
|
|
|
1242
1212
|
// src/lib/placeholder-imagery.ts
|
|
1243
1213
|
var U = (id) => `https://images.unsplash.com/photo-${id}?auto=format&fit=crop&w=1600&q=80`;
|
|
@@ -1709,22 +1679,6 @@ function pricingCardEmphasis(featured, ctx, hasBg) {
|
|
|
1709
1679
|
function textAttrs(ctx, path) {
|
|
1710
1680
|
return ctx.keyFor ? { "data-ohw-key": ctx.keyFor(path), "data-ohw-editable": "text" } : {};
|
|
1711
1681
|
}
|
|
1712
|
-
var AI_RESPONSIVE_CSS = [
|
|
1713
|
-
"@media (max-width: 960px) {",
|
|
1714
|
-
" [data-ai-responsive] [data-ai-grid] { grid-template-columns: repeat(2, 1fr) !important; }",
|
|
1715
|
-
' [data-ai-responsive] [data-ai-grid="1"] { grid-template-columns: 1fr !important; }',
|
|
1716
|
-
"}",
|
|
1717
|
-
"@media (max-width: 640px) {",
|
|
1718
|
-
" [data-ai-responsive] [data-ai-grid] { grid-template-columns: 1fr !important; }",
|
|
1719
|
-
" [data-ai-responsive] [data-ai-columns] > * { grid-column: 1 / -1 !important; }",
|
|
1720
|
-
// Group containers flatten to a column on phones; span placements come along for free.
|
|
1721
|
-
" [data-ai-responsive] [data-ai-group] { display: flex !important; flex-direction: column !important; }",
|
|
1722
|
-
" [data-ai-responsive] [data-ai-group] > * { grid-column: auto !important; }",
|
|
1723
|
-
" [data-ai-responsive] [data-ai-section-inner] { padding-left: 20px !important; padding-right: 20px !important; }",
|
|
1724
|
-
" [data-ai-responsive] { overflow-x: hidden; }",
|
|
1725
|
-
" [data-ai-responsive] img { max-width: 100%; }",
|
|
1726
|
-
"}"
|
|
1727
|
-
].join("\n");
|
|
1728
1682
|
var TRANSPARENT_PX = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
|
|
1729
1683
|
function MediaBox({
|
|
1730
1684
|
refValue,
|
|
@@ -1742,9 +1696,9 @@ function MediaBox({
|
|
|
1742
1696
|
const url = refValue ? ctx.resolveMedia(refValue) : null;
|
|
1743
1697
|
const isIcon = /^(lucide|simple):/.test(refValue);
|
|
1744
1698
|
const aspectRatio = aspect && /^\d+:\d+$/.test(aspect) ? aspect.replace(":", " / ") : void 0;
|
|
1745
|
-
const editAttrs = ctx.keyFor && editPath ? {
|
|
1699
|
+
const editAttrs = ctx.keyFor && editPath && !isIcon ? {
|
|
1746
1700
|
"data-ohw-key": ctx.keyFor(editPath),
|
|
1747
|
-
...
|
|
1701
|
+
...genericImageEdit ? { "data-ohw-editable": "image" } : {}
|
|
1748
1702
|
} : {};
|
|
1749
1703
|
if (isIcon) {
|
|
1750
1704
|
const Icon = refValue.startsWith("lucide:") ? lucideByName(refValue.slice(7)) : null;
|
|
@@ -1752,7 +1706,6 @@ function MediaBox({
|
|
|
1752
1706
|
"span",
|
|
1753
1707
|
{
|
|
1754
1708
|
"data-ai-icon": refValue,
|
|
1755
|
-
...editAttrs,
|
|
1756
1709
|
style: {
|
|
1757
1710
|
display: "inline-flex",
|
|
1758
1711
|
width: 48,
|
|
@@ -1804,112 +1757,6 @@ function MediaBox({
|
|
|
1804
1757
|
}
|
|
1805
1758
|
);
|
|
1806
1759
|
}
|
|
1807
|
-
function VideoEmbed({ slots, ctx, path }) {
|
|
1808
|
-
const [playing, setPlaying] = React.useState(false);
|
|
1809
|
-
const videoId = str(slots.videoId);
|
|
1810
|
-
const caption = str(slots.caption);
|
|
1811
|
-
return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: AI_TREE_TOKENS.spacing3 }, children: [
|
|
1812
|
-
/* @__PURE__ */ jsx(
|
|
1813
|
-
"div",
|
|
1814
|
-
{
|
|
1815
|
-
"data-ohw-video-block": "",
|
|
1816
|
-
"data-ohw-video-path": path,
|
|
1817
|
-
style: {
|
|
1818
|
-
position: "relative",
|
|
1819
|
-
width: "100%",
|
|
1820
|
-
aspectRatio: "16 / 9",
|
|
1821
|
-
borderRadius: AI_TREE_TOKENS.radiusCard,
|
|
1822
|
-
overflow: "hidden",
|
|
1823
|
-
background: "#DBEAFE"
|
|
1824
|
-
},
|
|
1825
|
-
children: !videoId ? /* @__PURE__ */ jsx(
|
|
1826
|
-
"div",
|
|
1827
|
-
{
|
|
1828
|
-
style: {
|
|
1829
|
-
position: "absolute",
|
|
1830
|
-
inset: 0,
|
|
1831
|
-
display: "flex",
|
|
1832
|
-
alignItems: "center",
|
|
1833
|
-
justifyContent: "center",
|
|
1834
|
-
color: "#93C5FD",
|
|
1835
|
-
fontSize: 13
|
|
1836
|
-
},
|
|
1837
|
-
children: "video"
|
|
1838
|
-
}
|
|
1839
|
-
) : playing ? /* @__PURE__ */ jsx(
|
|
1840
|
-
"iframe",
|
|
1841
|
-
{
|
|
1842
|
-
src: `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1&mute=1`,
|
|
1843
|
-
title: caption || "YouTube video",
|
|
1844
|
-
style: { position: "absolute", inset: 0, width: "100%", height: "100%", border: 0 },
|
|
1845
|
-
allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
|
|
1846
|
-
sandbox: "allow-scripts allow-same-origin allow-presentation allow-popups allow-popups-to-escape-sandbox",
|
|
1847
|
-
loading: "lazy"
|
|
1848
|
-
}
|
|
1849
|
-
) : /* @__PURE__ */ jsxs(
|
|
1850
|
-
"button",
|
|
1851
|
-
{
|
|
1852
|
-
type: "button",
|
|
1853
|
-
onClick: () => setPlaying(true),
|
|
1854
|
-
"aria-label": "Play video",
|
|
1855
|
-
style: {
|
|
1856
|
-
position: "absolute",
|
|
1857
|
-
inset: 0,
|
|
1858
|
-
width: "100%",
|
|
1859
|
-
height: "100%",
|
|
1860
|
-
border: 0,
|
|
1861
|
-
padding: 0,
|
|
1862
|
-
margin: 0,
|
|
1863
|
-
cursor: "pointer",
|
|
1864
|
-
background: "none"
|
|
1865
|
-
},
|
|
1866
|
-
children: [
|
|
1867
|
-
/* @__PURE__ */ jsx(
|
|
1868
|
-
"img",
|
|
1869
|
-
{
|
|
1870
|
-
src: `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`,
|
|
1871
|
-
alt: "",
|
|
1872
|
-
style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
|
|
1873
|
-
}
|
|
1874
|
-
),
|
|
1875
|
-
/* @__PURE__ */ jsx(
|
|
1876
|
-
"span",
|
|
1877
|
-
{
|
|
1878
|
-
style: {
|
|
1879
|
-
position: "absolute",
|
|
1880
|
-
top: "50%",
|
|
1881
|
-
left: "50%",
|
|
1882
|
-
transform: "translate(-50%, -50%)",
|
|
1883
|
-
width: 64,
|
|
1884
|
-
height: 64,
|
|
1885
|
-
borderRadius: "50%",
|
|
1886
|
-
background: "rgba(0,0,0,0.65)",
|
|
1887
|
-
display: "flex",
|
|
1888
|
-
alignItems: "center",
|
|
1889
|
-
justifyContent: "center"
|
|
1890
|
-
},
|
|
1891
|
-
children: /* @__PURE__ */ jsx(Play, { size: 28, color: "#fff", fill: "#fff" })
|
|
1892
|
-
}
|
|
1893
|
-
)
|
|
1894
|
-
]
|
|
1895
|
-
}
|
|
1896
|
-
)
|
|
1897
|
-
}
|
|
1898
|
-
),
|
|
1899
|
-
caption && /* @__PURE__ */ jsx(
|
|
1900
|
-
"div",
|
|
1901
|
-
{
|
|
1902
|
-
...textAttrs(ctx, `${path}.caption`),
|
|
1903
|
-
style: {
|
|
1904
|
-
...typeStyle(AI_TREE_TOKENS.type.bodyM, ctx.brand.fonts.body),
|
|
1905
|
-
color: ctx.brand.palette.dark,
|
|
1906
|
-
textAlign: "center"
|
|
1907
|
-
},
|
|
1908
|
-
children: caption
|
|
1909
|
-
}
|
|
1910
|
-
)
|
|
1911
|
-
] });
|
|
1912
|
-
}
|
|
1913
1760
|
function ButtonEl({
|
|
1914
1761
|
slots,
|
|
1915
1762
|
ctx,
|
|
@@ -2917,7 +2764,7 @@ function CollectionBlock({ node, ctx, path }) {
|
|
|
2917
2764
|
return /* @__PURE__ */ jsx(
|
|
2918
2765
|
"div",
|
|
2919
2766
|
{
|
|
2920
|
-
"data-ai-grid":
|
|
2767
|
+
"data-ai-grid": "",
|
|
2921
2768
|
"data-ohw-pricing-collection": isPricing ? "" : void 0,
|
|
2922
2769
|
style: {
|
|
2923
2770
|
display: "grid",
|
|
@@ -2990,8 +2837,6 @@ function renderNode(node, ctx, path) {
|
|
|
2990
2837
|
editPath: `${path}.source`
|
|
2991
2838
|
}
|
|
2992
2839
|
);
|
|
2993
|
-
case "video":
|
|
2994
|
-
return /* @__PURE__ */ jsx(VideoEmbed, { slots, ctx, path });
|
|
2995
2840
|
case "media-list": {
|
|
2996
2841
|
const stacked = slots.layout === "stack";
|
|
2997
2842
|
return /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: stacked ? 0 : AI_TREE_TOKENS.spacing3 }, children: (node.children ?? []).map((child, i) => /* @__PURE__ */ jsx(
|
|
@@ -3278,7 +3123,6 @@ function AiTreeRenderer({
|
|
|
3278
3123
|
{
|
|
3279
3124
|
"data-ai-section": tree.tag ?? "",
|
|
3280
3125
|
...bgAttrs,
|
|
3281
|
-
"data-ai-responsive": "",
|
|
3282
3126
|
style: {
|
|
3283
3127
|
position: "relative",
|
|
3284
3128
|
padding: `${pad}px 0`,
|
|
@@ -3289,13 +3133,12 @@ function AiTreeRenderer({
|
|
|
3289
3133
|
color: settings.sectionBackground === "accent" ? blockBrand.palette.dark : void 0
|
|
3290
3134
|
},
|
|
3291
3135
|
children: [
|
|
3292
|
-
/* @__PURE__ */ jsx("style", { children: AI_RESPONSIVE_CSS }),
|
|
3293
|
-
/* @__PURE__ */ jsx("style", { children: AI_MOBILE_CSS }),
|
|
3294
3136
|
isOverlay && backgroundUrl && /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, background: `rgba(255,255,255,${overlayAlpha})` } }),
|
|
3137
|
+
/* @__PURE__ */ jsx("style", { children: AI_MOBILE_CSS }),
|
|
3295
3138
|
/* @__PURE__ */ jsx(
|
|
3296
3139
|
"div",
|
|
3297
3140
|
{
|
|
3298
|
-
"data-ai-
|
|
3141
|
+
"data-ai-container": "",
|
|
3299
3142
|
style: {
|
|
3300
3143
|
position: "relative",
|
|
3301
3144
|
maxWidth: AI_TREE_TOKENS.sectionMaxWidth,
|
|
@@ -3306,7 +3149,7 @@ function AiTreeRenderer({
|
|
|
3306
3149
|
children: tree.rows.map((row, r2) => /* @__PURE__ */ jsx(
|
|
3307
3150
|
"div",
|
|
3308
3151
|
{
|
|
3309
|
-
"data-ai-
|
|
3152
|
+
"data-ai-row": "",
|
|
3310
3153
|
style: {
|
|
3311
3154
|
display: "grid",
|
|
3312
3155
|
gridTemplateColumns: "repeat(12, 1fr)",
|
|
@@ -3710,10 +3553,9 @@ function applyAiSectionsToDom(state, options) {
|
|
|
3710
3553
|
if (existing && existing.serialized === serialized && existing.container.isConnected) {
|
|
3711
3554
|
continue;
|
|
3712
3555
|
}
|
|
3556
|
+
const isNewMount = !existing || !existing.container.isConnected;
|
|
3713
3557
|
let container = existing?.container;
|
|
3714
|
-
let isNewMount = false;
|
|
3715
3558
|
if (!container || !container.isConnected) {
|
|
3716
|
-
isNewMount = true;
|
|
3717
3559
|
existing?.root.unmount();
|
|
3718
3560
|
container?.remove();
|
|
3719
3561
|
container = document.createElement("div");
|
|
@@ -9501,7 +9343,7 @@ function FieldTypePicker({ onPick }) {
|
|
|
9501
9343
|
|
|
9502
9344
|
// src/ui/MediaOverlay.tsx
|
|
9503
9345
|
import * as React8 from "react";
|
|
9504
|
-
import { Film, ImageIcon, Pause, Play
|
|
9346
|
+
import { Film, ImageIcon, Pause, Play, Volume2, VolumeX } from "lucide-react";
|
|
9505
9347
|
|
|
9506
9348
|
// src/ui/button.tsx
|
|
9507
9349
|
import * as React7 from "react";
|
|
@@ -9608,7 +9450,6 @@ function MediaOverlay({
|
|
|
9608
9450
|
(prev) => prev && prev.fullWidth === width && prev.height === height ? prev : { fullWidth: width, height }
|
|
9609
9451
|
);
|
|
9610
9452
|
}, [isVideo]);
|
|
9611
|
-
const replaceLabel = isVideo ? "Replace video" : hover.elementType === "bg-image" ? "Replace background" : "Replace image";
|
|
9612
9453
|
const replaceMode = buttonSize ? replaceButtonMode({ width: rect.width, height: rect.height }, buttonSize) : "none";
|
|
9613
9454
|
const box = {
|
|
9614
9455
|
position: "fixed",
|
|
@@ -9673,7 +9514,7 @@ function MediaOverlay({
|
|
|
9673
9514
|
e.stopPropagation();
|
|
9674
9515
|
onVideoSettingsChange?.(hover.key, { autoplay: !autoplay });
|
|
9675
9516
|
},
|
|
9676
|
-
children: autoplay ? /* @__PURE__ */ jsx15(Pause, { size: 14 }) : /* @__PURE__ */ jsx15(
|
|
9517
|
+
children: autoplay ? /* @__PURE__ */ jsx15(Pause, { size: 14 }) : /* @__PURE__ */ jsx15(Play, { size: 14 })
|
|
9677
9518
|
}
|
|
9678
9519
|
),
|
|
9679
9520
|
/* @__PURE__ */ jsx15(
|
|
@@ -9707,10 +9548,11 @@ function MediaOverlay({
|
|
|
9707
9548
|
className: "flex items-center justify-center cursor-pointer",
|
|
9708
9549
|
style: {
|
|
9709
9550
|
...box,
|
|
9710
|
-
//
|
|
9711
|
-
//
|
|
9712
|
-
//
|
|
9713
|
-
|
|
9551
|
+
// When text overlays this media, let clicks fall THROUGH to the text underneath. In the
|
|
9552
|
+
// parent this needed a whole `ow:click-at` round-trip to re-hit-test inside the iframe;
|
|
9553
|
+
// in-document, pointer-events does it natively. The button below opts back in, so
|
|
9554
|
+
// Replace still works.
|
|
9555
|
+
pointerEvents: hover.hasTextOverlap || cueOnly ? "none" : "auto",
|
|
9714
9556
|
// Selected: a firm component ring with no wash, so the image reads as chosen rather
|
|
9715
9557
|
// than hovered. Hover keeps the existing tinted preview.
|
|
9716
9558
|
boxShadow: selected ? "inset 0 0 0 2px var(--color-bridge-primary)" : "inset 0 0 0 1.5px var(--color-bridge-primary)",
|
|
@@ -9737,17 +9579,17 @@ function MediaOverlay({
|
|
|
9737
9579
|
},
|
|
9738
9580
|
children: [
|
|
9739
9581
|
isVideo ? /* @__PURE__ */ jsx15(Film, { size: 14 }) : /* @__PURE__ */ jsx15(ImageIcon, { size: 14 }),
|
|
9740
|
-
|
|
9582
|
+
isVideo ? "Replace video" : "Replace image"
|
|
9741
9583
|
]
|
|
9742
9584
|
}
|
|
9743
9585
|
),
|
|
9744
|
-
|
|
9586
|
+
replaceMode === "none" || cueOnly ? null : /* @__PURE__ */ jsxs7(
|
|
9745
9587
|
Button,
|
|
9746
9588
|
{
|
|
9747
9589
|
"data-ohw-media-overlay": "",
|
|
9748
9590
|
variant: "outline",
|
|
9749
9591
|
size: "sm",
|
|
9750
|
-
"aria-label":
|
|
9592
|
+
"aria-label": isVideo ? "Replace video" : "Replace image",
|
|
9751
9593
|
className: "gap-1.5 cursor-pointer hover:bg-background",
|
|
9752
9594
|
style: {
|
|
9753
9595
|
...OVERLAY_BUTTON_STYLE,
|
|
@@ -9770,7 +9612,7 @@ function MediaOverlay({
|
|
|
9770
9612
|
},
|
|
9771
9613
|
children: [
|
|
9772
9614
|
isVideo ? /* @__PURE__ */ jsx15(Film, { size: 14 }) : /* @__PURE__ */ jsx15(ImageIcon, { size: 14 }),
|
|
9773
|
-
replaceMode === "full" ?
|
|
9615
|
+
replaceMode === "full" ? isVideo ? "Replace video" : hover.elementType === "bg-image" ? "Replace background" : "Replace image" : null
|
|
9774
9616
|
]
|
|
9775
9617
|
}
|
|
9776
9618
|
)
|
|
@@ -11344,545 +11186,55 @@ function PricingCardToolbar({
|
|
|
11344
11186
|
onClick: () => onSetTreatment(t.value)
|
|
11345
11187
|
},
|
|
11346
11188
|
t.value
|
|
11347
|
-
)) }),
|
|
11348
|
-
error && /* @__PURE__ */ jsx19("div", { style: { color: "#FCA5A5", fontSize: 11, maxWidth: 220, textAlign: "center" }, children: error })
|
|
11349
|
-
]
|
|
11350
|
-
}
|
|
11351
|
-
);
|
|
11352
|
-
}
|
|
11353
|
-
function findPricingCardNode(tree, index) {
|
|
11354
|
-
const stack = tree.rows.flatMap((row) => row.blocks);
|
|
11355
|
-
while (stack.length) {
|
|
11356
|
-
const node = stack.shift();
|
|
11357
|
-
if (node.type === "collection" && Array.isArray(node.children) && node.children[0]?.type === "card" && node.children[0].slots?.preset === "pricing") {
|
|
11358
|
-
return node.children[index] ?? null;
|
|
11359
|
-
}
|
|
11360
|
-
if (node.children) stack.push(...node.children);
|
|
11361
|
-
}
|
|
11362
|
-
return null;
|
|
11363
|
-
}
|
|
11364
|
-
function AiPricingCardOverlay({
|
|
11365
|
-
postToParent: postToParent2,
|
|
11366
|
-
aiSectionsRef,
|
|
11367
|
-
applyTreeLocalRef
|
|
11368
|
-
}) {
|
|
11369
|
-
const [hover, setHover] = useState8(null);
|
|
11370
|
-
const [active, setActive] = useState8(null);
|
|
11371
|
-
const [pending, setPending] = useState8(false);
|
|
11372
|
-
const [error, setError] = useState8(null);
|
|
11373
|
-
const activeRef = useRef6(null);
|
|
11374
|
-
activeRef.current = active;
|
|
11375
|
-
useEffect6(() => {
|
|
11376
|
-
const onMove = (e) => {
|
|
11377
|
-
const t = e.target;
|
|
11378
|
-
if (!(t instanceof HTMLElement)) return;
|
|
11379
|
-
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]")) {
|
|
11380
|
-
return;
|
|
11381
|
-
}
|
|
11382
|
-
const cardEl = t.closest("[data-ohw-pricing-card]");
|
|
11383
|
-
if (!cardEl) {
|
|
11384
|
-
setHover(null);
|
|
11385
|
-
return;
|
|
11386
|
-
}
|
|
11387
|
-
const sectionEl = cardEl.closest("[data-ohw-section]");
|
|
11388
|
-
const unit = sectionEl ? movableUnit(sectionEl) : null;
|
|
11389
|
-
const sectionId = unit ? instanceIdOf(unit) || null : null;
|
|
11390
|
-
const index = Number(cardEl.dataset.ohwPricingIndex);
|
|
11391
|
-
if (!sectionId || Number.isNaN(index)) {
|
|
11392
|
-
setHover(null);
|
|
11393
|
-
return;
|
|
11394
|
-
}
|
|
11395
|
-
setHover({ sectionId, index });
|
|
11396
|
-
};
|
|
11397
|
-
const onLeave = () => setHover(null);
|
|
11398
|
-
document.addEventListener("mousemove", onMove, { passive: true });
|
|
11399
|
-
document.documentElement.addEventListener("mouseleave", onLeave);
|
|
11400
|
-
return () => {
|
|
11401
|
-
document.removeEventListener("mousemove", onMove);
|
|
11402
|
-
document.documentElement.removeEventListener("mouseleave", onLeave);
|
|
11403
|
-
};
|
|
11404
|
-
}, []);
|
|
11405
|
-
useEffect6(() => {
|
|
11406
|
-
const onClick = (e) => {
|
|
11407
|
-
const current = activeRef.current;
|
|
11408
|
-
if (!current) return;
|
|
11409
|
-
const t = e.target;
|
|
11410
|
-
if (!(t instanceof HTMLElement)) return;
|
|
11411
|
-
if (t.closest("[data-ohw-item-interaction]")) return;
|
|
11412
|
-
const cardEl = findPricingCardElement(current.sectionId, current.index);
|
|
11413
|
-
if (cardEl && cardEl.contains(t)) return;
|
|
11414
|
-
setActive(null);
|
|
11415
|
-
setError(null);
|
|
11416
|
-
};
|
|
11417
|
-
document.addEventListener("click", onClick, true);
|
|
11418
|
-
return () => document.removeEventListener("click", onClick, true);
|
|
11419
|
-
}, []);
|
|
11420
|
-
useEffect6(() => {
|
|
11421
|
-
const onBlur = () => {
|
|
11422
|
-
if (!activeRef.current) return;
|
|
11423
|
-
setActive(null);
|
|
11424
|
-
setError(null);
|
|
11425
|
-
};
|
|
11426
|
-
window.addEventListener("blur", onBlur);
|
|
11427
|
-
return () => window.removeEventListener("blur", onBlur);
|
|
11428
|
-
}, []);
|
|
11429
|
-
useEffect6(() => {
|
|
11430
|
-
const onKeyDown = (e) => {
|
|
11431
|
-
if (e.key !== "Escape") return;
|
|
11432
|
-
if (!activeRef.current) return;
|
|
11433
|
-
setActive(null);
|
|
11434
|
-
setError(null);
|
|
11435
|
-
};
|
|
11436
|
-
document.addEventListener("keydown", onKeyDown);
|
|
11437
|
-
return () => document.removeEventListener("keydown", onKeyDown);
|
|
11438
|
-
}, []);
|
|
11439
|
-
const findEntry = useCallback4(
|
|
11440
|
-
(sectionId) => {
|
|
11441
|
-
const state = parseAiSectionsState(aiSectionsRef.current);
|
|
11442
|
-
return state.sections.find((s) => s.id === sectionId) ?? null;
|
|
11443
|
-
},
|
|
11444
|
-
[aiSectionsRef]
|
|
11445
|
-
);
|
|
11446
|
-
const runMutation = useCallback4(
|
|
11447
|
-
async (sectionId, mutate) => {
|
|
11448
|
-
const entry = findEntry(sectionId);
|
|
11449
|
-
if (!entry) return false;
|
|
11450
|
-
const nextTree = mutate(entry.tree);
|
|
11451
|
-
if (!nextTree) return false;
|
|
11452
|
-
setPending(true);
|
|
11453
|
-
setError(null);
|
|
11454
|
-
const { ok, reasons } = await requestValidateTree2(postToParent2, nextTree);
|
|
11455
|
-
setPending(false);
|
|
11456
|
-
if (!ok) {
|
|
11457
|
-
setError(reasons[0] ?? "That change is not allowed.");
|
|
11458
|
-
return false;
|
|
11459
|
-
}
|
|
11460
|
-
applyTreeLocalRef.current?.({
|
|
11461
|
-
id: sectionId,
|
|
11462
|
-
mode: "replace",
|
|
11463
|
-
targetSectionId: sectionId,
|
|
11464
|
-
tree: nextTree,
|
|
11465
|
-
label: entry.label,
|
|
11466
|
-
media: entry.media,
|
|
11467
|
-
...entry.brand ? { brand: entry.brand } : {},
|
|
11468
|
-
// The user is already looking at the card they just edited — recentering the
|
|
11469
|
-
// viewport on every tier add/remove/toggle reads as the section jumping around.
|
|
11470
|
-
skipScrollIntoView: true
|
|
11471
|
-
});
|
|
11472
|
-
return true;
|
|
11473
|
-
},
|
|
11474
|
-
[findEntry, postToParent2, applyTreeLocalRef]
|
|
11475
|
-
);
|
|
11476
|
-
const activeEntry = active ? findEntry(active.sectionId) : null;
|
|
11477
|
-
const activeCardRect = useLiveCardRect(active);
|
|
11478
|
-
const hoverHandleRect = useLiveCardRect(!active && hover ? hover : null);
|
|
11479
|
-
return /* @__PURE__ */ jsxs11(Fragment7, { children: [
|
|
11480
|
-
hoverHandleRect && hover && /* @__PURE__ */ jsx19(
|
|
11481
|
-
"button",
|
|
11482
|
-
{
|
|
11483
|
-
type: "button",
|
|
11484
|
-
"data-ohw-toolbar": "",
|
|
11485
|
-
onClick: () => setActive(hover),
|
|
11486
|
-
"aria-label": "Configure pricing tier",
|
|
11487
|
-
style: {
|
|
11488
|
-
position: "fixed",
|
|
11489
|
-
top: hoverHandleRect.top + 8,
|
|
11490
|
-
left: hoverHandleRect.left + hoverHandleRect.width - 36,
|
|
11491
|
-
width: 28,
|
|
11492
|
-
height: 28,
|
|
11493
|
-
borderRadius: 8,
|
|
11494
|
-
border: `1.5px dashed ${PRIMARY4}`,
|
|
11495
|
-
background: "#ffffff",
|
|
11496
|
-
color: PRIMARY4,
|
|
11497
|
-
display: "flex",
|
|
11498
|
-
alignItems: "center",
|
|
11499
|
-
justifyContent: "center",
|
|
11500
|
-
cursor: "pointer",
|
|
11501
|
-
zIndex: 2147483643,
|
|
11502
|
-
fontSize: 14,
|
|
11503
|
-
fontWeight: 700
|
|
11504
|
-
},
|
|
11505
|
-
children: /* @__PURE__ */ jsx19(Star2, { size: 14, style: { pointerEvents: "none" } })
|
|
11506
|
-
}
|
|
11507
|
-
),
|
|
11508
|
-
activeCardRect && active && activeEntry && /* @__PURE__ */ jsx19(
|
|
11509
|
-
ItemInteractionLayer,
|
|
11510
|
-
{
|
|
11511
|
-
rect: activeCardRect,
|
|
11512
|
-
state: "active-top",
|
|
11513
|
-
toolbar: /* @__PURE__ */ jsx19(
|
|
11514
|
-
PricingCardToolbar,
|
|
11515
|
-
{
|
|
11516
|
-
entry: activeEntry,
|
|
11517
|
-
index: active.index,
|
|
11518
|
-
pending,
|
|
11519
|
-
error,
|
|
11520
|
-
onAddTier: () => runMutation(active.sectionId, addPricingTier),
|
|
11521
|
-
onRemoveTier: () => {
|
|
11522
|
-
void runMutation(active.sectionId, (tree) => removePricingTier(tree, active.index)).then(
|
|
11523
|
-
(applied) => {
|
|
11524
|
-
if (applied) setActive(null);
|
|
11525
|
-
}
|
|
11526
|
-
);
|
|
11527
|
-
},
|
|
11528
|
-
onToggleFeatured: (enabled) => runMutation(
|
|
11529
|
-
active.sectionId,
|
|
11530
|
-
(tree) => setPricingCardFeatured(tree, active.index, { enabled })
|
|
11531
|
-
),
|
|
11532
|
-
onSetTreatment: (treatment) => runMutation(
|
|
11533
|
-
active.sectionId,
|
|
11534
|
-
(tree) => setPricingCardFeatured(tree, active.index, { enabled: true, treatment })
|
|
11535
|
-
),
|
|
11536
|
-
onAddButton: () => runMutation(active.sectionId, (tree) => addPricingCardButton(tree, active.index, "Learn more")),
|
|
11537
|
-
onRemoveButton: () => runMutation(active.sectionId, (tree) => removePricingCardButton(tree, active.index)),
|
|
11538
|
-
onAddFeature: () => runMutation(active.sectionId, (tree) => addPricingCardFeature(tree, active.index, "New feature")),
|
|
11539
|
-
onRemoveFeature: () => runMutation(active.sectionId, (tree) => removePricingCardFeature(tree, active.index))
|
|
11540
|
-
}
|
|
11541
|
-
)
|
|
11542
|
-
}
|
|
11543
|
-
)
|
|
11544
|
-
] });
|
|
11545
|
-
}
|
|
11546
|
-
|
|
11547
|
-
// src/ui/ai-section/AiVideoOverlay.tsx
|
|
11548
|
-
import { useCallback as useCallback5, useEffect as useEffect7, useRef as useRef7, useState as useState9 } from "react";
|
|
11549
|
-
import { Star as Star3 } from "lucide-react";
|
|
11550
|
-
|
|
11551
|
-
// src/lib/ai-video-tree.ts
|
|
11552
|
-
function resolveVideoBlock(tree, path) {
|
|
11553
|
-
const segments = path.split(".");
|
|
11554
|
-
const rowSeg = segments[0];
|
|
11555
|
-
const blockSeg = segments[1];
|
|
11556
|
-
if (!rowSeg?.startsWith("r") || !blockSeg?.startsWith("b")) return null;
|
|
11557
|
-
let node = tree.rows[Number(rowSeg.slice(1))]?.blocks[Number(blockSeg.slice(1))];
|
|
11558
|
-
for (const seg of segments.slice(2)) {
|
|
11559
|
-
if (!node || !seg.startsWith("c")) return null;
|
|
11560
|
-
node = node.children?.[Number(seg.slice(1))];
|
|
11561
|
-
}
|
|
11562
|
-
return node && node.type === "video" ? node : null;
|
|
11563
|
-
}
|
|
11564
|
-
function withVideo(tree, path, mutate) {
|
|
11565
|
-
const next = JSON.parse(JSON.stringify(tree));
|
|
11566
|
-
const block = resolveVideoBlock(next, path);
|
|
11567
|
-
if (!block) return null;
|
|
11568
|
-
block.slots = block.slots ?? {};
|
|
11569
|
-
return mutate(block) ? next : null;
|
|
11570
|
-
}
|
|
11571
|
-
function videoIdAt(tree, path) {
|
|
11572
|
-
const block = resolveVideoBlock(tree, path);
|
|
11573
|
-
const id = block?.slots?.videoId;
|
|
11574
|
-
return typeof id === "string" ? id : "";
|
|
11575
|
-
}
|
|
11576
|
-
function setVideoId(tree, path, videoId) {
|
|
11577
|
-
return withVideo(tree, path, (block) => {
|
|
11578
|
-
block.slots = { ...block.slots, videoId };
|
|
11579
|
-
return true;
|
|
11580
|
-
});
|
|
11581
|
-
}
|
|
11582
|
-
function clearVideo(tree, path) {
|
|
11583
|
-
return withVideo(tree, path, (block) => {
|
|
11584
|
-
const slots = { ...block.slots };
|
|
11585
|
-
delete slots.videoId;
|
|
11586
|
-
block.slots = slots;
|
|
11587
|
-
return true;
|
|
11588
|
-
});
|
|
11589
|
-
}
|
|
11590
|
-
|
|
11591
|
-
// src/lib/youtube.ts
|
|
11592
|
-
var YOUTUBE_ID_PATTERN = /^[A-Za-z0-9_-]{11}$/;
|
|
11593
|
-
function extractYouTubeId(input) {
|
|
11594
|
-
const trimmed = input.trim();
|
|
11595
|
-
if (!trimmed) return null;
|
|
11596
|
-
if (YOUTUBE_ID_PATTERN.test(trimmed)) return trimmed;
|
|
11597
|
-
let url;
|
|
11598
|
-
try {
|
|
11599
|
-
url = new URL(trimmed);
|
|
11600
|
-
} catch {
|
|
11601
|
-
return null;
|
|
11602
|
-
}
|
|
11603
|
-
const host = url.hostname.replace(/^www\./, "");
|
|
11604
|
-
if (host !== "youtube.com" && host !== "m.youtube.com" && host !== "youtu.be" && host !== "youtube-nocookie.com") {
|
|
11605
|
-
return null;
|
|
11606
|
-
}
|
|
11607
|
-
let candidate = null;
|
|
11608
|
-
if (host === "youtu.be") {
|
|
11609
|
-
candidate = url.pathname.slice(1).split("/")[0] ?? null;
|
|
11610
|
-
} else if (url.pathname === "/watch") {
|
|
11611
|
-
candidate = url.searchParams.get("v");
|
|
11612
|
-
} else {
|
|
11613
|
-
const match = url.pathname.match(/^\/(?:embed|shorts)\/([^/]+)/);
|
|
11614
|
-
candidate = match ? match[1] : null;
|
|
11615
|
-
}
|
|
11616
|
-
return candidate && YOUTUBE_ID_PATTERN.test(candidate) ? candidate : null;
|
|
11617
|
-
}
|
|
11618
|
-
|
|
11619
|
-
// src/ui/ai-section/AiVideoOverlay.tsx
|
|
11620
|
-
import { Fragment as Fragment8, jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
11621
|
-
var PRIMARY5 = "#0885FE";
|
|
11622
|
-
var OHW_BLUE3 = `var(--ohw-primary, ${PRIMARY5})`;
|
|
11623
|
-
var OHW_BLUE_DARK3 = `color-mix(in srgb, var(--ohw-primary, ${PRIMARY5}) 60%, #000000)`;
|
|
11624
|
-
function findVideoBlockElement(sectionId, path) {
|
|
11625
|
-
const sectionEl = findByInstanceId(sectionId);
|
|
11626
|
-
if (!sectionEl) return null;
|
|
11627
|
-
const items = sectionEl.querySelectorAll("[data-ohw-video-block]");
|
|
11628
|
-
for (const el of Array.from(items)) {
|
|
11629
|
-
if (el.dataset.ohwVideoPath === path) return el;
|
|
11630
|
-
}
|
|
11631
|
-
return null;
|
|
11632
|
-
}
|
|
11633
|
-
function readRect4(ref) {
|
|
11634
|
-
const el = ref && findVideoBlockElement(ref.sectionId, ref.path);
|
|
11635
|
-
if (!el) return null;
|
|
11636
|
-
const r2 = el.getBoundingClientRect();
|
|
11637
|
-
if (r2.width <= 0 || r2.height <= 0) return null;
|
|
11638
|
-
return { top: r2.top, left: r2.left, width: r2.width, height: r2.height };
|
|
11639
|
-
}
|
|
11640
|
-
function useLiveBlockRect(ref) {
|
|
11641
|
-
const [rect, setRect] = useState9(null);
|
|
11642
|
-
useEffect7(() => {
|
|
11643
|
-
if (!ref) {
|
|
11644
|
-
setRect(null);
|
|
11645
|
-
return;
|
|
11646
|
-
}
|
|
11647
|
-
const update = () => {
|
|
11648
|
-
const next = readRect4(ref);
|
|
11649
|
-
setRect(
|
|
11650
|
-
(prev) => prev && next && prev.top === next.top && prev.left === next.left && prev.width === next.width && prev.height === next.height ? prev : next
|
|
11651
|
-
);
|
|
11652
|
-
};
|
|
11653
|
-
update();
|
|
11654
|
-
const opts = { capture: true, passive: true };
|
|
11655
|
-
window.addEventListener("scroll", update, opts);
|
|
11656
|
-
window.addEventListener("resize", update);
|
|
11657
|
-
const interval = setInterval(update, 500);
|
|
11658
|
-
return () => {
|
|
11659
|
-
window.removeEventListener("scroll", update, opts);
|
|
11660
|
-
window.removeEventListener("resize", update);
|
|
11661
|
-
clearInterval(interval);
|
|
11662
|
-
};
|
|
11663
|
-
}, [ref?.sectionId, ref?.path]);
|
|
11664
|
-
return rect;
|
|
11665
|
-
}
|
|
11666
|
-
function requestValidateTree3(postToParent2, tree) {
|
|
11667
|
-
return new Promise((resolve) => {
|
|
11668
|
-
const id = `ai-validate-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
|
|
11669
|
-
const timeout = window.setTimeout(() => {
|
|
11670
|
-
window.removeEventListener("message", onMessage);
|
|
11671
|
-
resolve({ ok: false, reasons: ["Validation request timed out."] });
|
|
11672
|
-
}, 8e3);
|
|
11673
|
-
function onMessage(e) {
|
|
11674
|
-
if (e.data?.type !== "ow:ai-validate-tree-result" || e.data.id !== id) return;
|
|
11675
|
-
window.clearTimeout(timeout);
|
|
11676
|
-
window.removeEventListener("message", onMessage);
|
|
11677
|
-
resolve({ ok: e.data.ok === true, reasons: Array.isArray(e.data.reasons) ? e.data.reasons : [] });
|
|
11678
|
-
}
|
|
11679
|
-
window.addEventListener("message", onMessage);
|
|
11680
|
-
postToParent2({ type: "ow:ai-validate-tree-request", id, tree });
|
|
11681
|
-
});
|
|
11682
|
-
}
|
|
11683
|
-
function Pill3({
|
|
11684
|
-
label,
|
|
11685
|
-
onClick,
|
|
11686
|
-
disabled
|
|
11687
|
-
}) {
|
|
11688
|
-
return /* @__PURE__ */ jsx20(
|
|
11689
|
-
"button",
|
|
11690
|
-
{
|
|
11691
|
-
type: "button",
|
|
11692
|
-
onClick,
|
|
11693
|
-
disabled,
|
|
11694
|
-
style: {
|
|
11695
|
-
height: 28,
|
|
11696
|
-
padding: "0 10px",
|
|
11697
|
-
display: "inline-flex",
|
|
11698
|
-
alignItems: "center",
|
|
11699
|
-
gap: 4,
|
|
11700
|
-
borderRadius: 999,
|
|
11701
|
-
border: "none",
|
|
11702
|
-
cursor: disabled ? "default" : "pointer",
|
|
11703
|
-
background: "#ffffff",
|
|
11704
|
-
color: OHW_BLUE_DARK3,
|
|
11705
|
-
opacity: disabled ? 0.4 : 1,
|
|
11706
|
-
fontSize: 12,
|
|
11707
|
-
lineHeight: "16px",
|
|
11708
|
-
fontFamily: "Figtree, ui-sans-serif, system-ui, sans-serif",
|
|
11709
|
-
whiteSpace: "nowrap",
|
|
11710
|
-
flex: "0 0 auto"
|
|
11711
|
-
},
|
|
11712
|
-
children: label
|
|
11713
|
-
}
|
|
11714
|
-
);
|
|
11715
|
-
}
|
|
11716
|
-
function watchUrl(id) {
|
|
11717
|
-
return `https://www.youtube.com/watch?v=${id}`;
|
|
11718
|
-
}
|
|
11719
|
-
function VideoUrlInput({ value, onCommit }) {
|
|
11720
|
-
const [draft, setDraft] = useState9(value ? watchUrl(value) : "");
|
|
11721
|
-
const [invalid, setInvalid] = useState9(false);
|
|
11722
|
-
useEffect7(() => {
|
|
11723
|
-
setDraft(value ? watchUrl(value) : "");
|
|
11724
|
-
setInvalid(false);
|
|
11725
|
-
}, [value]);
|
|
11726
|
-
const commit = () => {
|
|
11727
|
-
const next = draft.trim();
|
|
11728
|
-
if (!next) {
|
|
11729
|
-
setInvalid(false);
|
|
11730
|
-
if (value) onCommit(null);
|
|
11731
|
-
return;
|
|
11732
|
-
}
|
|
11733
|
-
const id = extractYouTubeId(next);
|
|
11734
|
-
if (!id) return setInvalid(true);
|
|
11735
|
-
setInvalid(false);
|
|
11736
|
-
setDraft(watchUrl(id));
|
|
11737
|
-
if (id !== value) onCommit(id);
|
|
11738
|
-
};
|
|
11739
|
-
const handleChange = (next) => {
|
|
11740
|
-
setDraft(next);
|
|
11741
|
-
const id = extractYouTubeId(next.trim());
|
|
11742
|
-
if (id && id !== value) {
|
|
11743
|
-
setInvalid(false);
|
|
11744
|
-
onCommit(id);
|
|
11745
|
-
}
|
|
11746
|
-
};
|
|
11747
|
-
return /* @__PURE__ */ jsxs12("div", { style: { display: "flex", flexDirection: "column", gap: 4, width: "100%", maxWidth: 280 }, children: [
|
|
11748
|
-
/* @__PURE__ */ jsxs12(
|
|
11749
|
-
"div",
|
|
11750
|
-
{
|
|
11751
|
-
style: {
|
|
11752
|
-
display: "flex",
|
|
11753
|
-
alignItems: "center",
|
|
11754
|
-
gap: 6,
|
|
11755
|
-
height: 28,
|
|
11756
|
-
padding: "0 12px",
|
|
11757
|
-
borderRadius: 999,
|
|
11758
|
-
background: "#ffffff",
|
|
11759
|
-
width: "100%",
|
|
11760
|
-
boxSizing: "border-box",
|
|
11761
|
-
boxShadow: invalid ? "inset 0 0 0 1.5px #EF4444" : "none"
|
|
11762
|
-
},
|
|
11763
|
-
children: [
|
|
11764
|
-
/* @__PURE__ */ jsx20(
|
|
11765
|
-
"span",
|
|
11766
|
-
{
|
|
11767
|
-
style: {
|
|
11768
|
-
flex: "0 0 auto",
|
|
11769
|
-
color: OHW_BLUE_DARK3,
|
|
11770
|
-
fontSize: 10,
|
|
11771
|
-
lineHeight: "16px",
|
|
11772
|
-
fontWeight: 700,
|
|
11773
|
-
textTransform: "uppercase",
|
|
11774
|
-
letterSpacing: 0.4
|
|
11775
|
-
},
|
|
11776
|
-
children: "Video"
|
|
11777
|
-
}
|
|
11778
|
-
),
|
|
11779
|
-
/* @__PURE__ */ jsx20(
|
|
11780
|
-
"input",
|
|
11781
|
-
{
|
|
11782
|
-
type: "text",
|
|
11783
|
-
inputMode: "url",
|
|
11784
|
-
value: draft,
|
|
11785
|
-
onChange: (e) => handleChange(e.target.value),
|
|
11786
|
-
onBlur: commit,
|
|
11787
|
-
onKeyDown: (e) => {
|
|
11788
|
-
if (e.key === "Enter") e.currentTarget.blur();
|
|
11789
|
-
if (e.key === "Escape") {
|
|
11790
|
-
setDraft(value ? watchUrl(value) : "");
|
|
11791
|
-
setInvalid(false);
|
|
11792
|
-
e.currentTarget.blur();
|
|
11793
|
-
}
|
|
11794
|
-
},
|
|
11795
|
-
placeholder: "Paste a YouTube URL",
|
|
11796
|
-
"aria-label": "YouTube video URL",
|
|
11797
|
-
"aria-invalid": invalid,
|
|
11798
|
-
style: {
|
|
11799
|
-
flex: 1,
|
|
11800
|
-
minWidth: 0,
|
|
11801
|
-
border: "none",
|
|
11802
|
-
outline: "none",
|
|
11803
|
-
background: "transparent",
|
|
11804
|
-
padding: 0,
|
|
11805
|
-
margin: 0,
|
|
11806
|
-
fontSize: 12,
|
|
11807
|
-
lineHeight: "16px",
|
|
11808
|
-
fontFamily: "Figtree, ui-sans-serif, system-ui, sans-serif",
|
|
11809
|
-
color: "#1f2937"
|
|
11810
|
-
}
|
|
11811
|
-
}
|
|
11812
|
-
)
|
|
11813
|
-
]
|
|
11814
|
-
}
|
|
11815
|
-
),
|
|
11816
|
-
invalid && /* @__PURE__ */ jsx20("div", { style: { color: "#FCA5A5", fontSize: 11, textAlign: "center" }, children: "That doesn't look like a YouTube link \u2014 try pasting the video URL again." })
|
|
11817
|
-
] });
|
|
11818
|
-
}
|
|
11819
|
-
function VideoToolbar({
|
|
11820
|
-
videoId,
|
|
11821
|
-
pending,
|
|
11822
|
-
error,
|
|
11823
|
-
onSetVideoId,
|
|
11824
|
-
onRemove
|
|
11825
|
-
}) {
|
|
11826
|
-
return /* @__PURE__ */ jsxs12(
|
|
11827
|
-
"div",
|
|
11828
|
-
{
|
|
11829
|
-
"data-ohw-bridge": "",
|
|
11830
|
-
"data-ohw-toolbar": "",
|
|
11831
|
-
onMouseDown: (e) => e.stopPropagation(),
|
|
11832
|
-
style: {
|
|
11833
|
-
display: "flex",
|
|
11834
|
-
flexDirection: "column",
|
|
11835
|
-
gap: 6,
|
|
11836
|
-
alignItems: "center",
|
|
11837
|
-
width: 280,
|
|
11838
|
-
background: OHW_BLUE3,
|
|
11839
|
-
padding: 8,
|
|
11840
|
-
borderRadius: 12,
|
|
11841
|
-
boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
|
|
11842
|
-
pointerEvents: pending ? "none" : "auto",
|
|
11843
|
-
opacity: pending ? 0.6 : 1
|
|
11844
|
-
},
|
|
11845
|
-
children: [
|
|
11846
|
-
/* @__PURE__ */ jsx20(VideoUrlInput, { value: videoId, onCommit: onSetVideoId }),
|
|
11847
|
-
/* @__PURE__ */ jsx20(Pill3, { label: "Remove video", onClick: onRemove, disabled: !videoId }),
|
|
11848
|
-
error && /* @__PURE__ */ jsx20("div", { style: { color: "#FCA5A5", fontSize: 11, maxWidth: 220, textAlign: "center" }, children: error })
|
|
11189
|
+
)) }),
|
|
11190
|
+
error && /* @__PURE__ */ jsx19("div", { style: { color: "#FCA5A5", fontSize: 11, maxWidth: 220, textAlign: "center" }, children: error })
|
|
11849
11191
|
]
|
|
11850
11192
|
}
|
|
11851
11193
|
);
|
|
11852
11194
|
}
|
|
11853
|
-
function
|
|
11195
|
+
function findPricingCardNode(tree, index) {
|
|
11196
|
+
const stack = tree.rows.flatMap((row) => row.blocks);
|
|
11197
|
+
while (stack.length) {
|
|
11198
|
+
const node = stack.shift();
|
|
11199
|
+
if (node.type === "collection" && Array.isArray(node.children) && node.children[0]?.type === "card" && node.children[0].slots?.preset === "pricing") {
|
|
11200
|
+
return node.children[index] ?? null;
|
|
11201
|
+
}
|
|
11202
|
+
if (node.children) stack.push(...node.children);
|
|
11203
|
+
}
|
|
11204
|
+
return null;
|
|
11205
|
+
}
|
|
11206
|
+
function AiPricingCardOverlay({
|
|
11854
11207
|
postToParent: postToParent2,
|
|
11855
11208
|
aiSectionsRef,
|
|
11856
|
-
applyTreeLocalRef
|
|
11857
|
-
clearInteractionChromeRef
|
|
11209
|
+
applyTreeLocalRef
|
|
11858
11210
|
}) {
|
|
11859
|
-
const [hover, setHover] =
|
|
11860
|
-
const [active, setActive] =
|
|
11861
|
-
const [pending, setPending] =
|
|
11862
|
-
const [error, setError] =
|
|
11863
|
-
const activeRef =
|
|
11211
|
+
const [hover, setHover] = useState8(null);
|
|
11212
|
+
const [active, setActive] = useState8(null);
|
|
11213
|
+
const [pending, setPending] = useState8(false);
|
|
11214
|
+
const [error, setError] = useState8(null);
|
|
11215
|
+
const activeRef = useRef6(null);
|
|
11864
11216
|
activeRef.current = active;
|
|
11865
|
-
|
|
11217
|
+
useEffect6(() => {
|
|
11866
11218
|
const onMove = (e) => {
|
|
11867
11219
|
const t = e.target;
|
|
11868
11220
|
if (!(t instanceof HTMLElement)) return;
|
|
11869
11221
|
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]")) {
|
|
11870
11222
|
return;
|
|
11871
11223
|
}
|
|
11872
|
-
const
|
|
11873
|
-
if (!
|
|
11224
|
+
const cardEl = t.closest("[data-ohw-pricing-card]");
|
|
11225
|
+
if (!cardEl) {
|
|
11874
11226
|
setHover(null);
|
|
11875
11227
|
return;
|
|
11876
11228
|
}
|
|
11877
|
-
const sectionEl =
|
|
11229
|
+
const sectionEl = cardEl.closest("[data-ohw-section]");
|
|
11878
11230
|
const unit = sectionEl ? movableUnit(sectionEl) : null;
|
|
11879
11231
|
const sectionId = unit ? instanceIdOf(unit) || null : null;
|
|
11880
|
-
const
|
|
11881
|
-
if (!sectionId ||
|
|
11232
|
+
const index = Number(cardEl.dataset.ohwPricingIndex);
|
|
11233
|
+
if (!sectionId || Number.isNaN(index)) {
|
|
11882
11234
|
setHover(null);
|
|
11883
11235
|
return;
|
|
11884
11236
|
}
|
|
11885
|
-
setHover({ sectionId,
|
|
11237
|
+
setHover({ sectionId, index });
|
|
11886
11238
|
};
|
|
11887
11239
|
const onLeave = () => setHover(null);
|
|
11888
11240
|
document.addEventListener("mousemove", onMove, { passive: true });
|
|
@@ -11892,22 +11244,22 @@ function AiVideoOverlay({
|
|
|
11892
11244
|
document.documentElement.removeEventListener("mouseleave", onLeave);
|
|
11893
11245
|
};
|
|
11894
11246
|
}, []);
|
|
11895
|
-
|
|
11247
|
+
useEffect6(() => {
|
|
11896
11248
|
const onClick = (e) => {
|
|
11897
11249
|
const current = activeRef.current;
|
|
11898
11250
|
if (!current) return;
|
|
11899
11251
|
const t = e.target;
|
|
11900
11252
|
if (!(t instanceof HTMLElement)) return;
|
|
11901
11253
|
if (t.closest("[data-ohw-item-interaction]")) return;
|
|
11902
|
-
const
|
|
11903
|
-
if (
|
|
11254
|
+
const cardEl = findPricingCardElement(current.sectionId, current.index);
|
|
11255
|
+
if (cardEl && cardEl.contains(t)) return;
|
|
11904
11256
|
setActive(null);
|
|
11905
11257
|
setError(null);
|
|
11906
11258
|
};
|
|
11907
11259
|
document.addEventListener("click", onClick, true);
|
|
11908
11260
|
return () => document.removeEventListener("click", onClick, true);
|
|
11909
11261
|
}, []);
|
|
11910
|
-
|
|
11262
|
+
useEffect6(() => {
|
|
11911
11263
|
const onBlur = () => {
|
|
11912
11264
|
if (!activeRef.current) return;
|
|
11913
11265
|
setActive(null);
|
|
@@ -11916,7 +11268,7 @@ function AiVideoOverlay({
|
|
|
11916
11268
|
window.addEventListener("blur", onBlur);
|
|
11917
11269
|
return () => window.removeEventListener("blur", onBlur);
|
|
11918
11270
|
}, []);
|
|
11919
|
-
|
|
11271
|
+
useEffect6(() => {
|
|
11920
11272
|
const onKeyDown = (e) => {
|
|
11921
11273
|
if (e.key !== "Escape") return;
|
|
11922
11274
|
if (!activeRef.current) return;
|
|
@@ -11926,14 +11278,14 @@ function AiVideoOverlay({
|
|
|
11926
11278
|
document.addEventListener("keydown", onKeyDown);
|
|
11927
11279
|
return () => document.removeEventListener("keydown", onKeyDown);
|
|
11928
11280
|
}, []);
|
|
11929
|
-
const findEntry =
|
|
11281
|
+
const findEntry = useCallback4(
|
|
11930
11282
|
(sectionId) => {
|
|
11931
11283
|
const state = parseAiSectionsState(aiSectionsRef.current);
|
|
11932
11284
|
return state.sections.find((s) => s.id === sectionId) ?? null;
|
|
11933
11285
|
},
|
|
11934
11286
|
[aiSectionsRef]
|
|
11935
11287
|
);
|
|
11936
|
-
const runMutation =
|
|
11288
|
+
const runMutation = useCallback4(
|
|
11937
11289
|
async (sectionId, mutate) => {
|
|
11938
11290
|
const entry = findEntry(sectionId);
|
|
11939
11291
|
if (!entry) return false;
|
|
@@ -11941,7 +11293,7 @@ function AiVideoOverlay({
|
|
|
11941
11293
|
if (!nextTree) return false;
|
|
11942
11294
|
setPending(true);
|
|
11943
11295
|
setError(null);
|
|
11944
|
-
const { ok, reasons } = await
|
|
11296
|
+
const { ok, reasons } = await requestValidateTree2(postToParent2, nextTree);
|
|
11945
11297
|
setPending(false);
|
|
11946
11298
|
if (!ok) {
|
|
11947
11299
|
setError(reasons[0] ?? "That change is not allowed.");
|
|
@@ -11954,28 +11306,26 @@ function AiVideoOverlay({
|
|
|
11954
11306
|
tree: nextTree,
|
|
11955
11307
|
label: entry.label,
|
|
11956
11308
|
media: entry.media,
|
|
11957
|
-
...entry.brand ? { brand: entry.brand } : {}
|
|
11309
|
+
...entry.brand ? { brand: entry.brand } : {},
|
|
11310
|
+
// The user is already looking at the card they just edited — recentering the
|
|
11311
|
+
// viewport on every tier add/remove/toggle reads as the section jumping around.
|
|
11312
|
+
skipScrollIntoView: true
|
|
11958
11313
|
});
|
|
11959
11314
|
return true;
|
|
11960
11315
|
},
|
|
11961
11316
|
[findEntry, postToParent2, applyTreeLocalRef]
|
|
11962
11317
|
);
|
|
11963
11318
|
const activeEntry = active ? findEntry(active.sectionId) : null;
|
|
11964
|
-
const
|
|
11965
|
-
const
|
|
11966
|
-
|
|
11967
|
-
|
|
11968
|
-
return /* @__PURE__ */ jsxs12(Fragment8, { children: [
|
|
11969
|
-
hoverHandleRect && hover && /* @__PURE__ */ jsx20(
|
|
11319
|
+
const activeCardRect = useLiveCardRect(active);
|
|
11320
|
+
const hoverHandleRect = useLiveCardRect(!active && hover ? hover : null);
|
|
11321
|
+
return /* @__PURE__ */ jsxs11(Fragment7, { children: [
|
|
11322
|
+
hoverHandleRect && hover && /* @__PURE__ */ jsx19(
|
|
11970
11323
|
"button",
|
|
11971
11324
|
{
|
|
11972
11325
|
type: "button",
|
|
11973
11326
|
"data-ohw-toolbar": "",
|
|
11974
|
-
onClick: () =>
|
|
11975
|
-
|
|
11976
|
-
setActive(hover);
|
|
11977
|
-
},
|
|
11978
|
-
"aria-label": "Configure video",
|
|
11327
|
+
onClick: () => setActive(hover),
|
|
11328
|
+
"aria-label": "Configure pricing tier",
|
|
11979
11329
|
style: {
|
|
11980
11330
|
position: "fixed",
|
|
11981
11331
|
top: hoverHandleRect.top + 8,
|
|
@@ -11983,9 +11333,9 @@ function AiVideoOverlay({
|
|
|
11983
11333
|
width: 28,
|
|
11984
11334
|
height: 28,
|
|
11985
11335
|
borderRadius: 8,
|
|
11986
|
-
border: `1.5px dashed ${
|
|
11336
|
+
border: `1.5px dashed ${PRIMARY4}`,
|
|
11987
11337
|
background: "#ffffff",
|
|
11988
|
-
color:
|
|
11338
|
+
color: PRIMARY4,
|
|
11989
11339
|
display: "flex",
|
|
11990
11340
|
alignItems: "center",
|
|
11991
11341
|
justifyContent: "center",
|
|
@@ -11994,29 +11344,41 @@ function AiVideoOverlay({
|
|
|
11994
11344
|
fontSize: 14,
|
|
11995
11345
|
fontWeight: 700
|
|
11996
11346
|
},
|
|
11997
|
-
children: /* @__PURE__ */
|
|
11347
|
+
children: /* @__PURE__ */ jsx19(Star2, { size: 14, style: { pointerEvents: "none" } })
|
|
11998
11348
|
}
|
|
11999
11349
|
),
|
|
12000
|
-
|
|
11350
|
+
activeCardRect && active && activeEntry && /* @__PURE__ */ jsx19(
|
|
12001
11351
|
ItemInteractionLayer,
|
|
12002
11352
|
{
|
|
12003
|
-
rect:
|
|
12004
|
-
state:
|
|
12005
|
-
toolbar: /* @__PURE__ */
|
|
12006
|
-
|
|
11353
|
+
rect: activeCardRect,
|
|
11354
|
+
state: "active-top",
|
|
11355
|
+
toolbar: /* @__PURE__ */ jsx19(
|
|
11356
|
+
PricingCardToolbar,
|
|
12007
11357
|
{
|
|
12008
|
-
|
|
11358
|
+
entry: activeEntry,
|
|
11359
|
+
index: active.index,
|
|
12009
11360
|
pending,
|
|
12010
11361
|
error,
|
|
12011
|
-
|
|
12012
|
-
|
|
12013
|
-
|
|
12014
|
-
(
|
|
11362
|
+
onAddTier: () => runMutation(active.sectionId, addPricingTier),
|
|
11363
|
+
onRemoveTier: () => {
|
|
11364
|
+
void runMutation(active.sectionId, (tree) => removePricingTier(tree, active.index)).then(
|
|
11365
|
+
(applied) => {
|
|
11366
|
+
if (applied) setActive(null);
|
|
11367
|
+
}
|
|
12015
11368
|
);
|
|
12016
11369
|
},
|
|
12017
|
-
|
|
12018
|
-
|
|
12019
|
-
|
|
11370
|
+
onToggleFeatured: (enabled) => runMutation(
|
|
11371
|
+
active.sectionId,
|
|
11372
|
+
(tree) => setPricingCardFeatured(tree, active.index, { enabled })
|
|
11373
|
+
),
|
|
11374
|
+
onSetTreatment: (treatment) => runMutation(
|
|
11375
|
+
active.sectionId,
|
|
11376
|
+
(tree) => setPricingCardFeatured(tree, active.index, { enabled: true, treatment })
|
|
11377
|
+
),
|
|
11378
|
+
onAddButton: () => runMutation(active.sectionId, (tree) => addPricingCardButton(tree, active.index, "Learn more")),
|
|
11379
|
+
onRemoveButton: () => runMutation(active.sectionId, (tree) => removePricingCardButton(tree, active.index)),
|
|
11380
|
+
onAddFeature: () => runMutation(active.sectionId, (tree) => addPricingCardFeature(tree, active.index, "New feature")),
|
|
11381
|
+
onRemoveFeature: () => runMutation(active.sectionId, (tree) => removePricingCardFeature(tree, active.index))
|
|
12020
11382
|
}
|
|
12021
11383
|
)
|
|
12022
11384
|
}
|
|
@@ -12335,28 +11697,28 @@ function scrollToHashSectionWhenReady(behavior = "smooth") {
|
|
|
12335
11697
|
}
|
|
12336
11698
|
|
|
12337
11699
|
// src/ui/link-modal/LinkPopover.tsx
|
|
12338
|
-
import { useEffect as
|
|
11700
|
+
import { useEffect as useEffect10 } from "react";
|
|
12339
11701
|
|
|
12340
11702
|
// src/ui/dialog.tsx
|
|
12341
11703
|
import * as React9 from "react";
|
|
12342
11704
|
import { Dialog as DialogPrimitive } from "radix-ui";
|
|
12343
11705
|
import { X as X2 } from "lucide-react";
|
|
12344
|
-
import { jsx as
|
|
11706
|
+
import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
12345
11707
|
function Dialog2({
|
|
12346
11708
|
...props
|
|
12347
11709
|
}) {
|
|
12348
|
-
return /* @__PURE__ */
|
|
11710
|
+
return /* @__PURE__ */ jsx20(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
|
|
12349
11711
|
}
|
|
12350
11712
|
function DialogPortal({
|
|
12351
11713
|
...props
|
|
12352
11714
|
}) {
|
|
12353
|
-
return /* @__PURE__ */
|
|
11715
|
+
return /* @__PURE__ */ jsx20(DialogPrimitive.Portal, { ...props });
|
|
12354
11716
|
}
|
|
12355
11717
|
function DialogOverlay({
|
|
12356
11718
|
className,
|
|
12357
11719
|
...props
|
|
12358
11720
|
}) {
|
|
12359
|
-
return /* @__PURE__ */
|
|
11721
|
+
return /* @__PURE__ */ jsx20(
|
|
12360
11722
|
DialogPrimitive.Overlay,
|
|
12361
11723
|
{
|
|
12362
11724
|
"data-slot": "dialog-overlay",
|
|
@@ -12369,9 +11731,9 @@ function DialogOverlay({
|
|
|
12369
11731
|
var DialogContent = React9.forwardRef(
|
|
12370
11732
|
({ className, children, showCloseButton = true, container, ...props }, ref) => {
|
|
12371
11733
|
const positionMode = container ? "absolute" : "fixed";
|
|
12372
|
-
return /* @__PURE__ */
|
|
12373
|
-
/* @__PURE__ */
|
|
12374
|
-
/* @__PURE__ */
|
|
11734
|
+
return /* @__PURE__ */ jsxs12(DialogPortal, { container: container ?? void 0, children: [
|
|
11735
|
+
/* @__PURE__ */ jsx20(DialogOverlay, { className: cn(positionMode, "inset-0") }),
|
|
11736
|
+
/* @__PURE__ */ jsxs12(
|
|
12375
11737
|
DialogPrimitive.Content,
|
|
12376
11738
|
{
|
|
12377
11739
|
ref,
|
|
@@ -12387,13 +11749,13 @@ var DialogContent = React9.forwardRef(
|
|
|
12387
11749
|
...props,
|
|
12388
11750
|
children: [
|
|
12389
11751
|
children,
|
|
12390
|
-
showCloseButton ? /* @__PURE__ */
|
|
11752
|
+
showCloseButton ? /* @__PURE__ */ jsx20(
|
|
12391
11753
|
DialogPrimitive.Close,
|
|
12392
11754
|
{
|
|
12393
11755
|
type: "button",
|
|
12394
11756
|
className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50",
|
|
12395
11757
|
"aria-label": "Close",
|
|
12396
|
-
children: /* @__PURE__ */
|
|
11758
|
+
children: /* @__PURE__ */ jsx20(X2, { size: 16, "aria-hidden": true })
|
|
12397
11759
|
}
|
|
12398
11760
|
) : null
|
|
12399
11761
|
]
|
|
@@ -12407,13 +11769,13 @@ function DialogHeader({
|
|
|
12407
11769
|
className,
|
|
12408
11770
|
...props
|
|
12409
11771
|
}) {
|
|
12410
|
-
return /* @__PURE__ */
|
|
11772
|
+
return /* @__PURE__ */ jsx20("div", { className: cn("flex flex-col gap-1.5", className), ...props });
|
|
12411
11773
|
}
|
|
12412
11774
|
function DialogFooter({
|
|
12413
11775
|
className,
|
|
12414
11776
|
...props
|
|
12415
11777
|
}) {
|
|
12416
|
-
return /* @__PURE__ */
|
|
11778
|
+
return /* @__PURE__ */ jsx20(
|
|
12417
11779
|
"div",
|
|
12418
11780
|
{
|
|
12419
11781
|
className: cn("flex items-center justify-end gap-2", className),
|
|
@@ -12421,7 +11783,7 @@ function DialogFooter({
|
|
|
12421
11783
|
}
|
|
12422
11784
|
);
|
|
12423
11785
|
}
|
|
12424
|
-
var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
11786
|
+
var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx20(
|
|
12425
11787
|
DialogPrimitive.Title,
|
|
12426
11788
|
{
|
|
12427
11789
|
ref,
|
|
@@ -12433,7 +11795,7 @@ var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE
|
|
|
12433
11795
|
}
|
|
12434
11796
|
));
|
|
12435
11797
|
DialogTitle.displayName = DialogPrimitive.Title.displayName;
|
|
12436
|
-
var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
11798
|
+
var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx20(
|
|
12437
11799
|
DialogPrimitive.Description,
|
|
12438
11800
|
{
|
|
12439
11801
|
ref,
|
|
@@ -12449,19 +11811,19 @@ import { Info, X as X4 } from "lucide-react";
|
|
|
12449
11811
|
|
|
12450
11812
|
// src/ui/link-modal/DestinationBreadcrumb.tsx
|
|
12451
11813
|
import { ArrowRight as ArrowRight2, File, GalleryVertical } from "lucide-react";
|
|
12452
|
-
import { jsx as
|
|
11814
|
+
import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
12453
11815
|
function DestinationBreadcrumb({
|
|
12454
11816
|
pageTitle,
|
|
12455
11817
|
sectionLabel
|
|
12456
11818
|
}) {
|
|
12457
|
-
return /* @__PURE__ */
|
|
12458
|
-
/* @__PURE__ */
|
|
12459
|
-
/* @__PURE__ */
|
|
12460
|
-
/* @__PURE__ */
|
|
12461
|
-
/* @__PURE__ */
|
|
12462
|
-
/* @__PURE__ */
|
|
11819
|
+
return /* @__PURE__ */ jsxs13("div", { className: "flex w-full flex-col gap-2", children: [
|
|
11820
|
+
/* @__PURE__ */ jsx21("p", { className: "text-sm font-medium! text-foreground m-0", children: "Destination" }),
|
|
11821
|
+
/* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-3", children: [
|
|
11822
|
+
/* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2", children: [
|
|
11823
|
+
/* @__PURE__ */ jsx21(File, { size: 16, className: "shrink-0 text-foreground", "aria-hidden": true }),
|
|
11824
|
+
/* @__PURE__ */ jsx21("span", { className: "text-sm font-medium leading-none text-foreground!", children: pageTitle })
|
|
12463
11825
|
] }),
|
|
12464
|
-
/* @__PURE__ */
|
|
11826
|
+
/* @__PURE__ */ jsx21(
|
|
12465
11827
|
ArrowRight2,
|
|
12466
11828
|
{
|
|
12467
11829
|
size: 16,
|
|
@@ -12469,8 +11831,8 @@ function DestinationBreadcrumb({
|
|
|
12469
11831
|
"aria-hidden": true
|
|
12470
11832
|
}
|
|
12471
11833
|
),
|
|
12472
|
-
/* @__PURE__ */
|
|
12473
|
-
/* @__PURE__ */
|
|
11834
|
+
/* @__PURE__ */ jsxs13("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
|
|
11835
|
+
/* @__PURE__ */ jsx21(
|
|
12474
11836
|
GalleryVertical,
|
|
12475
11837
|
{
|
|
12476
11838
|
size: 16,
|
|
@@ -12478,7 +11840,7 @@ function DestinationBreadcrumb({
|
|
|
12478
11840
|
"aria-hidden": true
|
|
12479
11841
|
}
|
|
12480
11842
|
),
|
|
12481
|
-
/* @__PURE__ */
|
|
11843
|
+
/* @__PURE__ */ jsx21("span", { className: "truncate text-sm font-medium leading-none text-foreground", children: sectionLabel })
|
|
12482
11844
|
] })
|
|
12483
11845
|
] })
|
|
12484
11846
|
] });
|
|
@@ -12486,22 +11848,22 @@ function DestinationBreadcrumb({
|
|
|
12486
11848
|
|
|
12487
11849
|
// src/ui/link-modal/SectionTreeItem.tsx
|
|
12488
11850
|
import { GalleryVertical as GalleryVertical2 } from "lucide-react";
|
|
12489
|
-
import { jsx as
|
|
11851
|
+
import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
12490
11852
|
function SectionTreeItem({
|
|
12491
11853
|
section,
|
|
12492
11854
|
onSelect,
|
|
12493
11855
|
selected
|
|
12494
11856
|
}) {
|
|
12495
11857
|
const interactive = Boolean(onSelect);
|
|
12496
|
-
return /* @__PURE__ */
|
|
12497
|
-
/* @__PURE__ */
|
|
11858
|
+
return /* @__PURE__ */ jsxs14("div", { className: "flex h-9 w-full items-end pl-3", children: [
|
|
11859
|
+
/* @__PURE__ */ jsx22(
|
|
12498
11860
|
"div",
|
|
12499
11861
|
{
|
|
12500
11862
|
className: "-mr-px h-9 w-2 shrink-0 rounded-bl-sm border-b border-l border-border mb-4",
|
|
12501
11863
|
"aria-hidden": true
|
|
12502
11864
|
}
|
|
12503
11865
|
),
|
|
12504
|
-
/* @__PURE__ */
|
|
11866
|
+
/* @__PURE__ */ jsxs14(
|
|
12505
11867
|
"div",
|
|
12506
11868
|
{
|
|
12507
11869
|
role: interactive ? "button" : void 0,
|
|
@@ -12519,7 +11881,7 @@ function SectionTreeItem({
|
|
|
12519
11881
|
interactive && selected && "border-bridge-primary"
|
|
12520
11882
|
),
|
|
12521
11883
|
children: [
|
|
12522
|
-
/* @__PURE__ */
|
|
11884
|
+
/* @__PURE__ */ jsx22(
|
|
12523
11885
|
GalleryVertical2,
|
|
12524
11886
|
{
|
|
12525
11887
|
size: 16,
|
|
@@ -12527,7 +11889,7 @@ function SectionTreeItem({
|
|
|
12527
11889
|
"aria-hidden": true
|
|
12528
11890
|
}
|
|
12529
11891
|
),
|
|
12530
|
-
/* @__PURE__ */
|
|
11892
|
+
/* @__PURE__ */ jsx22("span", { className: "truncate text-sm font-normal leading-5 text-foreground", children: section.label })
|
|
12531
11893
|
]
|
|
12532
11894
|
}
|
|
12533
11895
|
)
|
|
@@ -12535,14 +11897,14 @@ function SectionTreeItem({
|
|
|
12535
11897
|
}
|
|
12536
11898
|
|
|
12537
11899
|
// src/ui/link-modal/UrlOrPageInput.tsx
|
|
12538
|
-
import { useEffect as
|
|
11900
|
+
import { useEffect as useEffect7, useId as useId2, useRef as useRef7, useState as useState9 } from "react";
|
|
12539
11901
|
|
|
12540
11902
|
// src/ui/input.tsx
|
|
12541
11903
|
import * as React10 from "react";
|
|
12542
|
-
import { jsx as
|
|
11904
|
+
import { jsx as jsx23 } from "react/jsx-runtime";
|
|
12543
11905
|
var Input = React10.forwardRef(
|
|
12544
11906
|
({ className, type, ...props }, ref) => {
|
|
12545
|
-
return /* @__PURE__ */
|
|
11907
|
+
return /* @__PURE__ */ jsx23(
|
|
12546
11908
|
"input",
|
|
12547
11909
|
{
|
|
12548
11910
|
type,
|
|
@@ -12561,9 +11923,9 @@ Input.displayName = "Input";
|
|
|
12561
11923
|
|
|
12562
11924
|
// src/ui/label.tsx
|
|
12563
11925
|
import { Label as LabelPrimitive } from "radix-ui";
|
|
12564
|
-
import { jsx as
|
|
11926
|
+
import { jsx as jsx24 } from "react/jsx-runtime";
|
|
12565
11927
|
function Label({ className, ...props }) {
|
|
12566
|
-
return /* @__PURE__ */
|
|
11928
|
+
return /* @__PURE__ */ jsx24(
|
|
12567
11929
|
LabelPrimitive.Root,
|
|
12568
11930
|
{
|
|
12569
11931
|
"data-slot": "label",
|
|
@@ -12575,11 +11937,11 @@ function Label({ className, ...props }) {
|
|
|
12575
11937
|
|
|
12576
11938
|
// src/ui/link-modal/UrlOrPageInput.tsx
|
|
12577
11939
|
import { ChevronDown as ChevronDown3, File as File2, X as X3 } from "lucide-react";
|
|
12578
|
-
import { jsx as
|
|
11940
|
+
import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
12579
11941
|
function FieldChevron({
|
|
12580
11942
|
onClick
|
|
12581
11943
|
}) {
|
|
12582
|
-
return /* @__PURE__ */
|
|
11944
|
+
return /* @__PURE__ */ jsx25(
|
|
12583
11945
|
"button",
|
|
12584
11946
|
{
|
|
12585
11947
|
type: "button",
|
|
@@ -12587,7 +11949,7 @@ function FieldChevron({
|
|
|
12587
11949
|
onClick,
|
|
12588
11950
|
"aria-label": "Open page list",
|
|
12589
11951
|
tabIndex: -1,
|
|
12590
|
-
children: /* @__PURE__ */
|
|
11952
|
+
children: /* @__PURE__ */ jsx25(ChevronDown3, { size: 16 })
|
|
12591
11953
|
}
|
|
12592
11954
|
);
|
|
12593
11955
|
}
|
|
@@ -12604,10 +11966,10 @@ function UrlOrPageInput({
|
|
|
12604
11966
|
urlError
|
|
12605
11967
|
}) {
|
|
12606
11968
|
const inputId = useId2();
|
|
12607
|
-
const inputRef =
|
|
12608
|
-
const rootRef =
|
|
12609
|
-
const [isFocused, setIsFocused] =
|
|
12610
|
-
|
|
11969
|
+
const inputRef = useRef7(null);
|
|
11970
|
+
const rootRef = useRef7(null);
|
|
11971
|
+
const [isFocused, setIsFocused] = useState9(false);
|
|
11972
|
+
useEffect7(() => {
|
|
12611
11973
|
if (!dropdownOpen) return;
|
|
12612
11974
|
const isOutside = (e) => {
|
|
12613
11975
|
const root = rootRef.current;
|
|
@@ -12648,11 +12010,11 @@ function UrlOrPageInput({
|
|
|
12648
12010
|
"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]",
|
|
12649
12011
|
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"
|
|
12650
12012
|
);
|
|
12651
|
-
return /* @__PURE__ */
|
|
12652
|
-
/* @__PURE__ */
|
|
12653
|
-
/* @__PURE__ */
|
|
12654
|
-
/* @__PURE__ */
|
|
12655
|
-
selectedPage ? /* @__PURE__ */
|
|
12013
|
+
return /* @__PURE__ */ jsxs15("div", { className: "flex w-full flex-col gap-2 p-0", children: [
|
|
12014
|
+
/* @__PURE__ */ jsx25(Label, { htmlFor: inputId, className: cn(urlError && "text-destructive"), children: "Destination" }),
|
|
12015
|
+
/* @__PURE__ */ jsxs15("div", { ref: rootRef, className: "relative w-full", children: [
|
|
12016
|
+
/* @__PURE__ */ jsxs15("div", { "data-ohw-link-field": true, className: fieldClassName, children: [
|
|
12017
|
+
selectedPage ? /* @__PURE__ */ jsx25("div", { className: "flex shrink-0 items-center pr-2", children: /* @__PURE__ */ jsx25(
|
|
12656
12018
|
File2,
|
|
12657
12019
|
{
|
|
12658
12020
|
size: 16,
|
|
@@ -12660,7 +12022,7 @@ function UrlOrPageInput({
|
|
|
12660
12022
|
"aria-hidden": true
|
|
12661
12023
|
}
|
|
12662
12024
|
) }) : null,
|
|
12663
|
-
readOnly ? /* @__PURE__ */
|
|
12025
|
+
readOnly ? /* @__PURE__ */ jsx25("span", { className: "min-w-0 flex-1 truncate text-sm leading-5 text-foreground", children: selectedPage?.title ?? value }) : /* @__PURE__ */ jsx25(
|
|
12664
12026
|
Input,
|
|
12665
12027
|
{
|
|
12666
12028
|
ref: inputRef,
|
|
@@ -12686,7 +12048,7 @@ function UrlOrPageInput({
|
|
|
12686
12048
|
)
|
|
12687
12049
|
}
|
|
12688
12050
|
),
|
|
12689
|
-
selectedPage && !readOnly ? /* @__PURE__ */
|
|
12051
|
+
selectedPage && !readOnly ? /* @__PURE__ */ jsx25(
|
|
12690
12052
|
"button",
|
|
12691
12053
|
{
|
|
12692
12054
|
type: "button",
|
|
@@ -12694,26 +12056,26 @@ function UrlOrPageInput({
|
|
|
12694
12056
|
onMouseDown: clearSelection,
|
|
12695
12057
|
"aria-label": "Clear selected page",
|
|
12696
12058
|
tabIndex: -1,
|
|
12697
|
-
children: /* @__PURE__ */
|
|
12059
|
+
children: /* @__PURE__ */ jsx25(X3, { size: 16, "aria-hidden": true })
|
|
12698
12060
|
}
|
|
12699
12061
|
) : null,
|
|
12700
|
-
!readOnly ? /* @__PURE__ */
|
|
12062
|
+
!readOnly ? /* @__PURE__ */ jsx25(FieldChevron, { onClick: toggleDropdown }) : null
|
|
12701
12063
|
] }),
|
|
12702
|
-
dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */
|
|
12064
|
+
dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ jsx25(
|
|
12703
12065
|
"div",
|
|
12704
12066
|
{
|
|
12705
12067
|
"data-ohw-link-page-dropdown": "",
|
|
12706
12068
|
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",
|
|
12707
12069
|
onMouseDown: (e) => e.preventDefault(),
|
|
12708
|
-
children: filteredPages.map((page) => /* @__PURE__ */
|
|
12070
|
+
children: filteredPages.map((page) => /* @__PURE__ */ jsxs15(
|
|
12709
12071
|
"button",
|
|
12710
12072
|
{
|
|
12711
12073
|
type: "button",
|
|
12712
12074
|
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",
|
|
12713
12075
|
onClick: () => onPageSelect(page),
|
|
12714
12076
|
children: [
|
|
12715
|
-
/* @__PURE__ */
|
|
12716
|
-
/* @__PURE__ */
|
|
12077
|
+
/* @__PURE__ */ jsx25(File2, { size: 16, className: "shrink-0", "aria-hidden": true }),
|
|
12078
|
+
/* @__PURE__ */ jsx25("span", { className: "truncate", children: page.title })
|
|
12717
12079
|
]
|
|
12718
12080
|
},
|
|
12719
12081
|
page.path
|
|
@@ -12721,34 +12083,34 @@ function UrlOrPageInput({
|
|
|
12721
12083
|
}
|
|
12722
12084
|
) : null
|
|
12723
12085
|
] }),
|
|
12724
|
-
urlError ? /* @__PURE__ */
|
|
12086
|
+
urlError ? /* @__PURE__ */ jsx25("p", { className: "text-sm font-medium text-destructive", children: urlError }) : null
|
|
12725
12087
|
] });
|
|
12726
12088
|
}
|
|
12727
12089
|
|
|
12728
12090
|
// src/ui/link-modal/LinkEditorPanel.tsx
|
|
12729
|
-
import { Fragment as
|
|
12091
|
+
import { Fragment as Fragment8, jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
12730
12092
|
function LinkEditorPanel({ state, onClose }) {
|
|
12731
12093
|
const isCancel = state.secondaryLabel === "Cancel" || state.secondaryLabel === "Back to sections";
|
|
12732
|
-
return /* @__PURE__ */
|
|
12733
|
-
/* @__PURE__ */
|
|
12094
|
+
return /* @__PURE__ */ jsxs16(Fragment8, { children: [
|
|
12095
|
+
/* @__PURE__ */ jsx26(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx26(
|
|
12734
12096
|
"button",
|
|
12735
12097
|
{
|
|
12736
12098
|
type: "button",
|
|
12737
12099
|
className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50 h-7",
|
|
12738
12100
|
"aria-label": "Close",
|
|
12739
12101
|
onClick: onClose,
|
|
12740
|
-
children: /* @__PURE__ */
|
|
12102
|
+
children: /* @__PURE__ */ jsx26(X4, { size: 16, "aria-hidden": true })
|
|
12741
12103
|
}
|
|
12742
12104
|
) }),
|
|
12743
|
-
/* @__PURE__ */
|
|
12744
|
-
/* @__PURE__ */
|
|
12745
|
-
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */
|
|
12105
|
+
/* @__PURE__ */ jsx26(DialogHeader, { className: "w-full gap-1.5 p-6 pr-12", children: /* @__PURE__ */ jsx26(DialogTitle, { className: "m-0 w-full break-words", children: state.title }) }),
|
|
12106
|
+
/* @__PURE__ */ jsxs16("div", { className: "flex w-full flex-col gap-3 px-6 pb-8 pt-1", children: [
|
|
12107
|
+
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ jsx26(
|
|
12746
12108
|
DestinationBreadcrumb,
|
|
12747
12109
|
{
|
|
12748
12110
|
pageTitle: state.selectedPage.title,
|
|
12749
12111
|
sectionLabel: state.selectedSection.label
|
|
12750
12112
|
}
|
|
12751
|
-
) : /* @__PURE__ */
|
|
12113
|
+
) : /* @__PURE__ */ jsx26(
|
|
12752
12114
|
UrlOrPageInput,
|
|
12753
12115
|
{
|
|
12754
12116
|
value: state.searchValue,
|
|
@@ -12761,8 +12123,8 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
12761
12123
|
urlError: state.urlError
|
|
12762
12124
|
}
|
|
12763
12125
|
),
|
|
12764
|
-
state.showChooseSection ? /* @__PURE__ */
|
|
12765
|
-
/* @__PURE__ */
|
|
12126
|
+
state.showChooseSection ? /* @__PURE__ */ jsxs16("div", { className: "flex flex-col justify-center gap-2", children: [
|
|
12127
|
+
/* @__PURE__ */ jsx26(
|
|
12766
12128
|
Button,
|
|
12767
12129
|
{
|
|
12768
12130
|
type: "button",
|
|
@@ -12773,15 +12135,15 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
12773
12135
|
children: "Choose a section"
|
|
12774
12136
|
}
|
|
12775
12137
|
),
|
|
12776
|
-
/* @__PURE__ */
|
|
12777
|
-
/* @__PURE__ */
|
|
12778
|
-
/* @__PURE__ */
|
|
12138
|
+
/* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
|
|
12139
|
+
/* @__PURE__ */ jsx26(Info, { size: 16, className: "shrink-0", "aria-hidden": true }),
|
|
12140
|
+
/* @__PURE__ */ jsx26("span", { children: "Pick a section this link should scroll to." })
|
|
12779
12141
|
] })
|
|
12780
12142
|
] }) : null,
|
|
12781
|
-
state.showSectionRow && state.selectedSection ? /* @__PURE__ */
|
|
12143
|
+
state.showSectionRow && state.selectedSection ? /* @__PURE__ */ jsx26(SectionTreeItem, { section: state.selectedSection, selected: true }) : null
|
|
12782
12144
|
] }),
|
|
12783
|
-
/* @__PURE__ */
|
|
12784
|
-
/* @__PURE__ */
|
|
12145
|
+
/* @__PURE__ */ jsxs16(DialogFooter, { className: "w-full px-6 pb-6", children: [
|
|
12146
|
+
/* @__PURE__ */ jsx26(
|
|
12785
12147
|
Button,
|
|
12786
12148
|
{
|
|
12787
12149
|
type: "button",
|
|
@@ -12796,7 +12158,7 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
12796
12158
|
children: state.secondaryLabel
|
|
12797
12159
|
}
|
|
12798
12160
|
),
|
|
12799
|
-
/* @__PURE__ */
|
|
12161
|
+
/* @__PURE__ */ jsx26(
|
|
12800
12162
|
Button,
|
|
12801
12163
|
{
|
|
12802
12164
|
type: "button",
|
|
@@ -12815,7 +12177,7 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
12815
12177
|
}
|
|
12816
12178
|
|
|
12817
12179
|
// src/ui/link-modal/SectionPickerOverlay.tsx
|
|
12818
|
-
import { useCallback as
|
|
12180
|
+
import { useCallback as useCallback5, useEffect as useEffect8, useMemo as useMemo2, useRef as useRef8, useState as useState10 } from "react";
|
|
12819
12181
|
import { createPortal as createPortal2 } from "react-dom";
|
|
12820
12182
|
import { ArrowLeft as ArrowLeft2, Check as Check2 } from "lucide-react";
|
|
12821
12183
|
import { usePathname, useRouter as useRouter2 } from "next/navigation";
|
|
@@ -12839,7 +12201,7 @@ function getIframeChromeClip(parentScroll) {
|
|
|
12839
12201
|
}
|
|
12840
12202
|
|
|
12841
12203
|
// src/ui/link-modal/SectionPickerOverlay.tsx
|
|
12842
|
-
import { jsx as
|
|
12204
|
+
import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
12843
12205
|
var DIM_OVERLAY = "rgba(0, 0, 0, 0.45)";
|
|
12844
12206
|
function rectsEqual(a, b) {
|
|
12845
12207
|
if (a.size !== b.size) return false;
|
|
@@ -12872,12 +12234,12 @@ function hitTestSectionId(x, y, sectionIds, rects) {
|
|
|
12872
12234
|
return null;
|
|
12873
12235
|
}
|
|
12874
12236
|
function useSectionRects(sectionIdsKey, enabled) {
|
|
12875
|
-
const [rects, setRects] =
|
|
12237
|
+
const [rects, setRects] = useState10(/* @__PURE__ */ new Map());
|
|
12876
12238
|
const sectionIds = useMemo2(
|
|
12877
12239
|
() => sectionIdsKey ? sectionIdsKey.split("\0") : [],
|
|
12878
12240
|
[sectionIdsKey]
|
|
12879
12241
|
);
|
|
12880
|
-
|
|
12242
|
+
useEffect8(() => {
|
|
12881
12243
|
if (!enabled || sectionIds.length === 0) {
|
|
12882
12244
|
setRects((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Map());
|
|
12883
12245
|
return;
|
|
@@ -12918,13 +12280,13 @@ function SectionPickerOverlay({
|
|
|
12918
12280
|
}) {
|
|
12919
12281
|
const router = useRouter2();
|
|
12920
12282
|
const pathname = usePathname();
|
|
12921
|
-
const [selectedId, setSelectedId] =
|
|
12922
|
-
const [hoveredId, setHoveredId] =
|
|
12923
|
-
const pointerRef =
|
|
12924
|
-
const pointerScreenRef =
|
|
12925
|
-
const iframeOffsetTopRef =
|
|
12926
|
-
const sectionIdsRef =
|
|
12927
|
-
const [chromeClip, setChromeClip] =
|
|
12283
|
+
const [selectedId, setSelectedId] = useState10(null);
|
|
12284
|
+
const [hoveredId, setHoveredId] = useState10(null);
|
|
12285
|
+
const pointerRef = useRef8(null);
|
|
12286
|
+
const pointerScreenRef = useRef8(null);
|
|
12287
|
+
const iframeOffsetTopRef = useRef8(null);
|
|
12288
|
+
const sectionIdsRef = useRef8([]);
|
|
12289
|
+
const [chromeClip, setChromeClip] = useState10(
|
|
12928
12290
|
() => ({
|
|
12929
12291
|
top: 0,
|
|
12930
12292
|
bottom: typeof window !== "undefined" ? window.innerHeight : 0
|
|
@@ -12932,12 +12294,12 @@ function SectionPickerOverlay({
|
|
|
12932
12294
|
);
|
|
12933
12295
|
const normalizedTarget = normalizePath(pagePath);
|
|
12934
12296
|
const isOnTargetPage = normalizePath(pathname) === normalizedTarget;
|
|
12935
|
-
|
|
12297
|
+
useEffect8(() => {
|
|
12936
12298
|
if (isOnTargetPage) return;
|
|
12937
12299
|
const search = readPreservedSearch();
|
|
12938
12300
|
router.push(`${normalizedTarget}${search}`);
|
|
12939
12301
|
}, [isOnTargetPage, normalizedTarget, router]);
|
|
12940
|
-
|
|
12302
|
+
useEffect8(() => {
|
|
12941
12303
|
document.documentElement.setAttribute("data-ohw-section-picking", "");
|
|
12942
12304
|
document.querySelectorAll("[data-ohw-hovered]").forEach((el) => {
|
|
12943
12305
|
el.removeAttribute("data-ohw-hovered");
|
|
@@ -12966,7 +12328,7 @@ function SectionPickerOverlay({
|
|
|
12966
12328
|
);
|
|
12967
12329
|
sectionIdsRef.current = sectionIds;
|
|
12968
12330
|
const rects = useSectionRects(sectionIdsKey, isOnTargetPage);
|
|
12969
|
-
const applyHoverAt =
|
|
12331
|
+
const applyHoverAt = useCallback5(
|
|
12970
12332
|
(x, y, liveRects) => {
|
|
12971
12333
|
const ids = sectionIdsRef.current;
|
|
12972
12334
|
const map = liveRects ?? readSectionRects(ids);
|
|
@@ -12975,7 +12337,7 @@ function SectionPickerOverlay({
|
|
|
12975
12337
|
},
|
|
12976
12338
|
[]
|
|
12977
12339
|
);
|
|
12978
|
-
|
|
12340
|
+
useEffect8(() => {
|
|
12979
12341
|
const applyClip = (iframeOffsetTop, visibleCanvasTop, canvasH, promptBarH = 0) => {
|
|
12980
12342
|
const next = getIframeVisibleClip({
|
|
12981
12343
|
iframeOffsetTop,
|
|
@@ -13019,12 +12381,12 @@ function SectionPickerOverlay({
|
|
|
13019
12381
|
window.removeEventListener("resize", onResize);
|
|
13020
12382
|
};
|
|
13021
12383
|
}, [applyHoverAt]);
|
|
13022
|
-
|
|
12384
|
+
useEffect8(() => {
|
|
13023
12385
|
const ptr = pointerRef.current;
|
|
13024
12386
|
if (!ptr) return;
|
|
13025
12387
|
applyHoverAt(ptr.x, ptr.y, rects);
|
|
13026
12388
|
}, [rects, applyHoverAt]);
|
|
13027
|
-
|
|
12389
|
+
useEffect8(() => {
|
|
13028
12390
|
const rememberPointer = (clientX, clientY) => {
|
|
13029
12391
|
pointerRef.current = { x: clientX, y: clientY };
|
|
13030
12392
|
const top = iframeOffsetTopRef.current;
|
|
@@ -13048,7 +12410,7 @@ function SectionPickerOverlay({
|
|
|
13048
12410
|
window.removeEventListener("message", onPointerSync);
|
|
13049
12411
|
};
|
|
13050
12412
|
}, [rects, applyHoverAt]);
|
|
13051
|
-
const handleSelect =
|
|
12413
|
+
const handleSelect = useCallback5(
|
|
13052
12414
|
(section) => {
|
|
13053
12415
|
if (selectedId) return;
|
|
13054
12416
|
setSelectedId(section.id);
|
|
@@ -13056,7 +12418,7 @@ function SectionPickerOverlay({
|
|
|
13056
12418
|
},
|
|
13057
12419
|
[selectedId, onSelect]
|
|
13058
12420
|
);
|
|
13059
|
-
|
|
12421
|
+
useEffect8(() => {
|
|
13060
12422
|
const onKeyDown = (e) => {
|
|
13061
12423
|
if (e.key === "Escape") {
|
|
13062
12424
|
e.preventDefault();
|
|
@@ -13070,7 +12432,7 @@ function SectionPickerOverlay({
|
|
|
13070
12432
|
const portalRoot = typeof document !== "undefined" ? document.querySelector("[data-ohw-bridge-root]") ?? document.body : null;
|
|
13071
12433
|
if (!portalRoot) return null;
|
|
13072
12434
|
return createPortal2(
|
|
13073
|
-
/* @__PURE__ */
|
|
12435
|
+
/* @__PURE__ */ jsxs17(
|
|
13074
12436
|
"div",
|
|
13075
12437
|
{
|
|
13076
12438
|
"data-ohw-section-picker": "",
|
|
@@ -13080,12 +12442,12 @@ function SectionPickerOverlay({
|
|
|
13080
12442
|
role: "dialog",
|
|
13081
12443
|
"aria-label": "Choose a section",
|
|
13082
12444
|
children: [
|
|
13083
|
-
/* @__PURE__ */
|
|
12445
|
+
/* @__PURE__ */ jsx27(
|
|
13084
12446
|
"div",
|
|
13085
12447
|
{
|
|
13086
12448
|
className: "pointer-events-auto fixed left-5 z-[2]",
|
|
13087
12449
|
style: { top: chromeClip.top + 20 },
|
|
13088
|
-
children: /* @__PURE__ */
|
|
12450
|
+
children: /* @__PURE__ */ jsxs17(
|
|
13089
12451
|
Button,
|
|
13090
12452
|
{
|
|
13091
12453
|
type: "button",
|
|
@@ -13094,14 +12456,14 @@ function SectionPickerOverlay({
|
|
|
13094
12456
|
className: "h-8 min-w-0 gap-1 border-border bg-background px-2 py-1.5 shadow-sm hover:bg-muted cursor-pointer",
|
|
13095
12457
|
onClick: onBack,
|
|
13096
12458
|
children: [
|
|
13097
|
-
/* @__PURE__ */
|
|
12459
|
+
/* @__PURE__ */ jsx27(ArrowLeft2, { className: "size-4 shrink-0", "aria-hidden": true }),
|
|
13098
12460
|
"Back"
|
|
13099
12461
|
]
|
|
13100
12462
|
}
|
|
13101
12463
|
)
|
|
13102
12464
|
}
|
|
13103
12465
|
),
|
|
13104
|
-
/* @__PURE__ */
|
|
12466
|
+
/* @__PURE__ */ jsx27(
|
|
13105
12467
|
"div",
|
|
13106
12468
|
{
|
|
13107
12469
|
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",
|
|
@@ -13114,7 +12476,7 @@ function SectionPickerOverlay({
|
|
|
13114
12476
|
children: "Click on section to select"
|
|
13115
12477
|
}
|
|
13116
12478
|
),
|
|
13117
|
-
!isOnTargetPage ? /* @__PURE__ */
|
|
12479
|
+
!isOnTargetPage ? /* @__PURE__ */ jsx27(
|
|
13118
12480
|
"div",
|
|
13119
12481
|
{
|
|
13120
12482
|
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",
|
|
@@ -13122,14 +12484,14 @@ function SectionPickerOverlay({
|
|
|
13122
12484
|
children: "Loading page preview\u2026"
|
|
13123
12485
|
}
|
|
13124
12486
|
) : null,
|
|
13125
|
-
isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */
|
|
12487
|
+
isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */ jsx27("div", { className: "pointer-events-auto fixed inset-0 z-[1] flex items-center justify-center bg-muted/40", children: /* @__PURE__ */ jsx27("p", { className: "text-sm text-muted-foreground", children: "No sections found on this page." }) }) : null,
|
|
13126
12488
|
isOnTargetPage ? liveSections.map((section) => {
|
|
13127
12489
|
const rect = rects.get(section.id);
|
|
13128
12490
|
if (!rect || rect.width <= 0 || rect.height <= 0) return null;
|
|
13129
12491
|
const isSelected = selectedId === section.id;
|
|
13130
12492
|
const isHovered = hoveredId === section.id;
|
|
13131
12493
|
const isLit = isSelected || isHovered;
|
|
13132
|
-
return /* @__PURE__ */
|
|
12494
|
+
return /* @__PURE__ */ jsxs17(
|
|
13133
12495
|
"button",
|
|
13134
12496
|
{
|
|
13135
12497
|
type: "button",
|
|
@@ -13144,7 +12506,7 @@ function SectionPickerOverlay({
|
|
|
13144
12506
|
"aria-label": `Select section ${section.label}`,
|
|
13145
12507
|
onClick: () => handleSelect(section),
|
|
13146
12508
|
children: [
|
|
13147
|
-
isLit ? /* @__PURE__ */
|
|
12509
|
+
isLit ? /* @__PURE__ */ jsx27(
|
|
13148
12510
|
"span",
|
|
13149
12511
|
{
|
|
13150
12512
|
className: "pointer-events-none absolute",
|
|
@@ -13157,13 +12519,13 @@ function SectionPickerOverlay({
|
|
|
13157
12519
|
"aria-hidden": true
|
|
13158
12520
|
}
|
|
13159
12521
|
) : null,
|
|
13160
|
-
isSelected ? /* @__PURE__ */
|
|
12522
|
+
isSelected ? /* @__PURE__ */ jsx27(
|
|
13161
12523
|
"span",
|
|
13162
12524
|
{
|
|
13163
12525
|
className: "absolute right-3 top-3 flex size-8 items-center justify-center rounded-full text-white",
|
|
13164
12526
|
style: { backgroundColor: "var(--ohw-primary, #0885fe)" },
|
|
13165
12527
|
"aria-hidden": true,
|
|
13166
|
-
children: /* @__PURE__ */
|
|
12528
|
+
children: /* @__PURE__ */ jsx27(Check2, { className: "size-5" })
|
|
13167
12529
|
}
|
|
13168
12530
|
) : null
|
|
13169
12531
|
]
|
|
@@ -13179,7 +12541,7 @@ function SectionPickerOverlay({
|
|
|
13179
12541
|
}
|
|
13180
12542
|
|
|
13181
12543
|
// src/ui/link-modal/useLinkModalState.ts
|
|
13182
|
-
import { useCallback as
|
|
12544
|
+
import { useCallback as useCallback6, useEffect as useEffect9, useMemo as useMemo3, useState as useState11 } from "react";
|
|
13183
12545
|
function useLinkModalState({
|
|
13184
12546
|
open,
|
|
13185
12547
|
mode,
|
|
@@ -13192,13 +12554,13 @@ function useLinkModalState({
|
|
|
13192
12554
|
onSubmit
|
|
13193
12555
|
}) {
|
|
13194
12556
|
const availablePages = useMemo3(() => pages, [pages]);
|
|
13195
|
-
const [searchValue, setSearchValue] =
|
|
13196
|
-
const [selectedPage, setSelectedPage] =
|
|
13197
|
-
const [selectedSection, setSelectedSection] =
|
|
13198
|
-
const [step, setStep] =
|
|
13199
|
-
const [dropdownOpen, setDropdownOpen] =
|
|
13200
|
-
const [urlError, setUrlError] =
|
|
13201
|
-
const reset =
|
|
12557
|
+
const [searchValue, setSearchValue] = useState11("");
|
|
12558
|
+
const [selectedPage, setSelectedPage] = useState11(null);
|
|
12559
|
+
const [selectedSection, setSelectedSection] = useState11(null);
|
|
12560
|
+
const [step, setStep] = useState11("input");
|
|
12561
|
+
const [dropdownOpen, setDropdownOpen] = useState11(false);
|
|
12562
|
+
const [urlError, setUrlError] = useState11("");
|
|
12563
|
+
const reset = useCallback6(() => {
|
|
13202
12564
|
setSearchValue("");
|
|
13203
12565
|
setSelectedPage(null);
|
|
13204
12566
|
setSelectedSection(null);
|
|
@@ -13206,7 +12568,7 @@ function useLinkModalState({
|
|
|
13206
12568
|
setDropdownOpen(false);
|
|
13207
12569
|
setUrlError("");
|
|
13208
12570
|
}, []);
|
|
13209
|
-
|
|
12571
|
+
useEffect9(() => {
|
|
13210
12572
|
if (!open) return;
|
|
13211
12573
|
if (mode === "edit" && initialTarget) {
|
|
13212
12574
|
const { pageRoute } = parseTarget(initialTarget);
|
|
@@ -13343,7 +12705,7 @@ function useLinkModalState({
|
|
|
13343
12705
|
}
|
|
13344
12706
|
|
|
13345
12707
|
// src/ui/link-modal/LinkPopover.tsx
|
|
13346
|
-
import { Fragment as
|
|
12708
|
+
import { Fragment as Fragment9, jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
13347
12709
|
function postToParent(data) {
|
|
13348
12710
|
window.parent?.postMessage(data, "*");
|
|
13349
12711
|
}
|
|
@@ -13372,7 +12734,7 @@ function LinkPopover({
|
|
|
13372
12734
|
onSubmit
|
|
13373
12735
|
});
|
|
13374
12736
|
const sectionPickerActive = state.showSectionPicker && Boolean(state.selectedPage);
|
|
13375
|
-
|
|
12737
|
+
useEffect10(() => {
|
|
13376
12738
|
if (!open) return;
|
|
13377
12739
|
if (sectionPickerActive) {
|
|
13378
12740
|
postToParent({ type: "ui:unlock" });
|
|
@@ -13439,15 +12801,15 @@ function LinkPopover({
|
|
|
13439
12801
|
);
|
|
13440
12802
|
};
|
|
13441
12803
|
}, [open, sectionPickerActive]);
|
|
13442
|
-
return /* @__PURE__ */
|
|
13443
|
-
/* @__PURE__ */
|
|
12804
|
+
return /* @__PURE__ */ jsxs18(Fragment9, { children: [
|
|
12805
|
+
/* @__PURE__ */ jsx28(
|
|
13444
12806
|
Dialog2,
|
|
13445
12807
|
{
|
|
13446
12808
|
open: open && !sectionPickerActive,
|
|
13447
12809
|
onOpenChange: (next) => {
|
|
13448
12810
|
if (!next) onClose?.();
|
|
13449
12811
|
},
|
|
13450
|
-
children: /* @__PURE__ */
|
|
12812
|
+
children: /* @__PURE__ */ jsx28(
|
|
13451
12813
|
DialogContent,
|
|
13452
12814
|
{
|
|
13453
12815
|
ref: panelRef,
|
|
@@ -13457,12 +12819,12 @@ function LinkPopover({
|
|
|
13457
12819
|
"data-ohw-bridge": "",
|
|
13458
12820
|
showCloseButton: false,
|
|
13459
12821
|
className: "gap-0 p-0 w-full max-w-[448px] pointer-events-auto z-[2147483646] overflow-visible",
|
|
13460
|
-
children: /* @__PURE__ */
|
|
12822
|
+
children: /* @__PURE__ */ jsx28(LinkEditorPanel, { state, onClose })
|
|
13461
12823
|
}
|
|
13462
12824
|
)
|
|
13463
12825
|
}
|
|
13464
12826
|
),
|
|
13465
|
-
sectionPickerActive && state.selectedPage ? /* @__PURE__ */
|
|
12827
|
+
sectionPickerActive && state.selectedPage ? /* @__PURE__ */ jsx28(
|
|
13466
12828
|
SectionPickerOverlay,
|
|
13467
12829
|
{
|
|
13468
12830
|
pagePath: state.selectedPage.path,
|
|
@@ -16584,7 +15946,6 @@ function readLogoSizeState(content, placement) {
|
|
|
16584
15946
|
function getLogoElement(el) {
|
|
16585
15947
|
const marked = el.closest('[data-ohw-role="logo"], [data-ohw-logo]');
|
|
16586
15948
|
if (marked) return marked;
|
|
16587
|
-
if (el.closest('[data-ohw-editable="icon"]')) return null;
|
|
16588
15949
|
const root = el.closest("nav, [data-ohw-nav-root], footer");
|
|
16589
15950
|
if (!root) return null;
|
|
16590
15951
|
const anchor = el.closest("a");
|
|
@@ -16652,14 +16013,14 @@ function addFooterColumnWithPersist({
|
|
|
16652
16013
|
|
|
16653
16014
|
// src/ui/FloatingPanel.tsx
|
|
16654
16015
|
import {
|
|
16655
|
-
useCallback as
|
|
16656
|
-
useEffect as
|
|
16016
|
+
useCallback as useCallback7,
|
|
16017
|
+
useEffect as useEffect11,
|
|
16657
16018
|
useLayoutEffect as useLayoutEffect4,
|
|
16658
|
-
useRef as
|
|
16659
|
-
useState as
|
|
16019
|
+
useRef as useRef9,
|
|
16020
|
+
useState as useState12
|
|
16660
16021
|
} from "react";
|
|
16661
16022
|
import { X as X5 } from "lucide-react";
|
|
16662
|
-
import { jsx as
|
|
16023
|
+
import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
16663
16024
|
var PANEL_WIDTH = 256;
|
|
16664
16025
|
var EDGE_MARGIN = 16;
|
|
16665
16026
|
var HEADER_MIN = 56;
|
|
@@ -16719,10 +16080,10 @@ function FloatingPanel({
|
|
|
16719
16080
|
className,
|
|
16720
16081
|
bodyClassName
|
|
16721
16082
|
}) {
|
|
16722
|
-
const panelRef =
|
|
16723
|
-
const [measured, setMeasured] =
|
|
16724
|
-
const dragRef =
|
|
16725
|
-
const homeRef =
|
|
16083
|
+
const panelRef = useRef9(null);
|
|
16084
|
+
const [measured, setMeasured] = useState12({ w: PANEL_WIDTH, h: 280 });
|
|
16085
|
+
const dragRef = useRef9(null);
|
|
16086
|
+
const homeRef = useRef9(null);
|
|
16726
16087
|
if (!open) {
|
|
16727
16088
|
homeRef.current = null;
|
|
16728
16089
|
} else if (position) {
|
|
@@ -16730,17 +16091,17 @@ function FloatingPanel({
|
|
|
16730
16091
|
} else if (homeRef.current == null) {
|
|
16731
16092
|
homeRef.current = defaultFloatingPanelPosition(parentScroll);
|
|
16732
16093
|
}
|
|
16733
|
-
const [liveScroll, setLiveScroll] =
|
|
16094
|
+
const [liveScroll, setLiveScroll] = useState12(parentScroll);
|
|
16734
16095
|
const home = position ?? homeRef.current ?? defaultFloatingPanelPosition(parentScroll);
|
|
16735
16096
|
const { y: fittedY, maxHeight } = fitPanelInClip(home.y, liveScroll, measured.h);
|
|
16736
16097
|
const clamped = {
|
|
16737
16098
|
x: clampX(home.x, measured.w),
|
|
16738
16099
|
y: fittedY
|
|
16739
16100
|
};
|
|
16740
|
-
|
|
16101
|
+
useEffect11(() => {
|
|
16741
16102
|
setLiveScroll(parentScroll);
|
|
16742
16103
|
}, [parentScroll]);
|
|
16743
|
-
|
|
16104
|
+
useEffect11(() => {
|
|
16744
16105
|
if (!open) return;
|
|
16745
16106
|
const onParentScroll = (e) => {
|
|
16746
16107
|
if (e.data?.type !== "ow:parent-scroll") return;
|
|
@@ -16750,7 +16111,7 @@ function FloatingPanel({
|
|
|
16750
16111
|
window.addEventListener("message", onParentScroll);
|
|
16751
16112
|
return () => window.removeEventListener("message", onParentScroll);
|
|
16752
16113
|
}, [open]);
|
|
16753
|
-
const positionRef =
|
|
16114
|
+
const positionRef = useRef9(position);
|
|
16754
16115
|
useLayoutEffect4(() => {
|
|
16755
16116
|
if (!open) {
|
|
16756
16117
|
positionRef.current = position;
|
|
@@ -16770,7 +16131,7 @@ function FloatingPanel({
|
|
|
16770
16131
|
const next = { w: el.offsetWidth || PANEL_WIDTH, h: contentH };
|
|
16771
16132
|
setMeasured((prev) => prev.w === next.w && prev.h === next.h ? prev : next);
|
|
16772
16133
|
}, [open, children, title, context]);
|
|
16773
|
-
const onHeaderPointerDown =
|
|
16134
|
+
const onHeaderPointerDown = useCallback7(
|
|
16774
16135
|
(e) => {
|
|
16775
16136
|
if (e.button !== 0) return;
|
|
16776
16137
|
if (e.target.closest("[data-ohw-floating-panel-close]")) return;
|
|
@@ -16789,7 +16150,7 @@ function FloatingPanel({
|
|
|
16789
16150
|
},
|
|
16790
16151
|
[clamped.x, clamped.y]
|
|
16791
16152
|
);
|
|
16792
|
-
const onHeaderPointerMove =
|
|
16153
|
+
const onHeaderPointerMove = useCallback7(
|
|
16793
16154
|
(e) => {
|
|
16794
16155
|
const drag = dragRef.current;
|
|
16795
16156
|
if (!drag || drag.pointerId !== e.pointerId) return;
|
|
@@ -16815,7 +16176,7 @@ function FloatingPanel({
|
|
|
16815
16176
|
},
|
|
16816
16177
|
[measured.w, onPositionChange, liveScroll]
|
|
16817
16178
|
);
|
|
16818
|
-
const endDrag =
|
|
16179
|
+
const endDrag = useCallback7((e) => {
|
|
16819
16180
|
const drag = dragRef.current;
|
|
16820
16181
|
if (!drag || drag.pointerId !== e.pointerId) return;
|
|
16821
16182
|
dragRef.current = null;
|
|
@@ -16825,13 +16186,13 @@ function FloatingPanel({
|
|
|
16825
16186
|
} catch {
|
|
16826
16187
|
}
|
|
16827
16188
|
}, []);
|
|
16828
|
-
|
|
16189
|
+
useEffect11(() => {
|
|
16829
16190
|
if (open) return;
|
|
16830
16191
|
document.documentElement.removeAttribute("data-ohw-panel-dragging");
|
|
16831
16192
|
}, [open]);
|
|
16832
|
-
|
|
16193
|
+
useEffect11(() => () => document.documentElement.removeAttribute("data-ohw-panel-dragging"), []);
|
|
16833
16194
|
if (!open) return null;
|
|
16834
|
-
return /* @__PURE__ */
|
|
16195
|
+
return /* @__PURE__ */ jsxs19(
|
|
16835
16196
|
"div",
|
|
16836
16197
|
{
|
|
16837
16198
|
ref: panelRef,
|
|
@@ -16848,7 +16209,7 @@ function FloatingPanel({
|
|
|
16848
16209
|
onPointerDown: (e) => e.stopPropagation(),
|
|
16849
16210
|
onClick: (e) => e.stopPropagation(),
|
|
16850
16211
|
children: [
|
|
16851
|
-
/* @__PURE__ */
|
|
16212
|
+
/* @__PURE__ */ jsxs19(
|
|
16852
16213
|
"div",
|
|
16853
16214
|
{
|
|
16854
16215
|
"data-ohw-floating-panel-header": "",
|
|
@@ -16858,14 +16219,14 @@ function FloatingPanel({
|
|
|
16858
16219
|
onPointerUp: endDrag,
|
|
16859
16220
|
onPointerCancel: endDrag,
|
|
16860
16221
|
children: [
|
|
16861
|
-
/* @__PURE__ */
|
|
16862
|
-
/* @__PURE__ */
|
|
16863
|
-
icon ? /* @__PURE__ */
|
|
16864
|
-
/* @__PURE__ */
|
|
16222
|
+
/* @__PURE__ */ jsxs19("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
|
|
16223
|
+
/* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
|
|
16224
|
+
icon ? /* @__PURE__ */ jsx29("span", { className: "shrink-0 text-foreground", children: icon }) : null,
|
|
16225
|
+
/* @__PURE__ */ jsx29("p", { className: "min-w-0 flex-1 text-lg font-semibold leading-7 text-foreground", children: title })
|
|
16865
16226
|
] }),
|
|
16866
|
-
context ? /* @__PURE__ */
|
|
16227
|
+
context ? /* @__PURE__ */ jsx29("p", { className: "w-full text-sm leading-5 text-muted-foreground", children: context }) : null
|
|
16867
16228
|
] }),
|
|
16868
|
-
/* @__PURE__ */
|
|
16229
|
+
/* @__PURE__ */ jsx29(
|
|
16869
16230
|
"button",
|
|
16870
16231
|
{
|
|
16871
16232
|
type: "button",
|
|
@@ -16877,13 +16238,13 @@ function FloatingPanel({
|
|
|
16877
16238
|
onClose();
|
|
16878
16239
|
},
|
|
16879
16240
|
onPointerDown: (e) => e.stopPropagation(),
|
|
16880
|
-
children: /* @__PURE__ */
|
|
16241
|
+
children: /* @__PURE__ */ jsx29(X5, { size: 16, "aria-hidden": true })
|
|
16881
16242
|
}
|
|
16882
16243
|
)
|
|
16883
16244
|
]
|
|
16884
16245
|
}
|
|
16885
16246
|
),
|
|
16886
|
-
/* @__PURE__ */
|
|
16247
|
+
/* @__PURE__ */ jsx29(
|
|
16887
16248
|
"div",
|
|
16888
16249
|
{
|
|
16889
16250
|
"data-ohw-floating-panel-body": "",
|
|
@@ -16901,15 +16262,15 @@ function FloatingPanel({
|
|
|
16901
16262
|
}
|
|
16902
16263
|
|
|
16903
16264
|
// src/ui/socials-display-panel.tsx
|
|
16904
|
-
import { jsx as
|
|
16265
|
+
import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
16905
16266
|
function DisplaySwitch({
|
|
16906
16267
|
label,
|
|
16907
16268
|
checked,
|
|
16908
16269
|
disabled,
|
|
16909
16270
|
onChange
|
|
16910
16271
|
}) {
|
|
16911
|
-
return /* @__PURE__ */
|
|
16912
|
-
/* @__PURE__ */
|
|
16272
|
+
return /* @__PURE__ */ jsxs20("div", { className: "flex w-full items-center gap-2", children: [
|
|
16273
|
+
/* @__PURE__ */ jsx30(
|
|
16913
16274
|
"span",
|
|
16914
16275
|
{
|
|
16915
16276
|
className: cn(
|
|
@@ -16919,7 +16280,7 @@ function DisplaySwitch({
|
|
|
16919
16280
|
children: label
|
|
16920
16281
|
}
|
|
16921
16282
|
),
|
|
16922
|
-
/* @__PURE__ */
|
|
16283
|
+
/* @__PURE__ */ jsx30(
|
|
16923
16284
|
"button",
|
|
16924
16285
|
{
|
|
16925
16286
|
type: "button",
|
|
@@ -16933,7 +16294,7 @@ function DisplaySwitch({
|
|
|
16933
16294
|
checked ? "bg-bridge-primary" : "bg-primary-50",
|
|
16934
16295
|
disabled ? "cursor-default opacity-50" : "cursor-pointer"
|
|
16935
16296
|
),
|
|
16936
|
-
children: /* @__PURE__ */
|
|
16297
|
+
children: /* @__PURE__ */ jsx30(
|
|
16937
16298
|
"span",
|
|
16938
16299
|
{
|
|
16939
16300
|
className: cn(
|
|
@@ -16947,8 +16308,8 @@ function DisplaySwitch({
|
|
|
16947
16308
|
] });
|
|
16948
16309
|
}
|
|
16949
16310
|
function SocialsDisplayPanel({ display, onChange, className }) {
|
|
16950
|
-
return /* @__PURE__ */
|
|
16951
|
-
/* @__PURE__ */
|
|
16311
|
+
return /* @__PURE__ */ jsxs20("div", { className: cn("flex w-full flex-col gap-3", className), children: [
|
|
16312
|
+
/* @__PURE__ */ jsx30(
|
|
16952
16313
|
DisplaySwitch,
|
|
16953
16314
|
{
|
|
16954
16315
|
label: "Text",
|
|
@@ -16957,7 +16318,7 @@ function SocialsDisplayPanel({ display, onChange, className }) {
|
|
|
16957
16318
|
onChange: (text) => onChange({ ...display, text })
|
|
16958
16319
|
}
|
|
16959
16320
|
),
|
|
16960
|
-
/* @__PURE__ */
|
|
16321
|
+
/* @__PURE__ */ jsx30(
|
|
16961
16322
|
DisplaySwitch,
|
|
16962
16323
|
{
|
|
16963
16324
|
label: "Icon",
|
|
@@ -17673,7 +17034,7 @@ function withAssignment(content, id, assignment) {
|
|
|
17673
17034
|
}
|
|
17674
17035
|
|
|
17675
17036
|
// src/ui/button-style-panel.tsx
|
|
17676
|
-
import { jsx as
|
|
17037
|
+
import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
17677
17038
|
var SIZE_LABEL = { s: "S", m: "M", l: "L" };
|
|
17678
17039
|
function ButtonStylePanel({
|
|
17679
17040
|
variants,
|
|
@@ -17687,15 +17048,15 @@ function ButtonStylePanel({
|
|
|
17687
17048
|
}) {
|
|
17688
17049
|
const preview = scaleGeometry(sizes.m, 0.75);
|
|
17689
17050
|
const label = previewLabel.trim() || "Book Now";
|
|
17690
|
-
return /* @__PURE__ */
|
|
17691
|
-
/* @__PURE__ */
|
|
17692
|
-
/* @__PURE__ */
|
|
17693
|
-
/* @__PURE__ */
|
|
17051
|
+
return /* @__PURE__ */ jsxs21("div", { className: "flex w-full flex-col gap-5", children: [
|
|
17052
|
+
/* @__PURE__ */ jsxs21("section", { className: "flex w-full flex-col gap-2.5", children: [
|
|
17053
|
+
/* @__PURE__ */ jsx31("h3", { className: "text-xs font-semibold uppercase leading-4 tracking-[0.6px] text-stone-500 font-sans", children: "Variants" }),
|
|
17054
|
+
/* @__PURE__ */ jsx31("div", { className: "flex w-full flex-col gap-2.5", children: BUTTON_VARIANT_IDS.map((id) => {
|
|
17694
17055
|
const chrome = variants[id];
|
|
17695
17056
|
const selected = id === variant;
|
|
17696
17057
|
const hasBorder = parseFloat(chrome.borderWidth) > 0;
|
|
17697
17058
|
const cardSlot = previewSlotForChrome(chrome, slotBackground);
|
|
17698
|
-
return /* @__PURE__ */
|
|
17059
|
+
return /* @__PURE__ */ jsxs21(
|
|
17699
17060
|
"button",
|
|
17700
17061
|
{
|
|
17701
17062
|
type: "button",
|
|
@@ -17711,12 +17072,12 @@ function ButtonStylePanel({
|
|
|
17711
17072
|
selected ? "border-2 border-primary" : "border border-border"
|
|
17712
17073
|
),
|
|
17713
17074
|
children: [
|
|
17714
|
-
/* @__PURE__ */
|
|
17075
|
+
/* @__PURE__ */ jsx31(
|
|
17715
17076
|
"div",
|
|
17716
17077
|
{
|
|
17717
17078
|
className: "flex w-full items-center justify-center py-4",
|
|
17718
17079
|
style: { background: cardSlot },
|
|
17719
|
-
children: /* @__PURE__ */
|
|
17080
|
+
children: /* @__PURE__ */ jsx31(
|
|
17720
17081
|
"span",
|
|
17721
17082
|
{
|
|
17722
17083
|
className: "inline-flex items-center justify-center whitespace-nowrap font-semibold uppercase leading-none",
|
|
@@ -17738,12 +17099,12 @@ function ButtonStylePanel({
|
|
|
17738
17099
|
)
|
|
17739
17100
|
}
|
|
17740
17101
|
),
|
|
17741
|
-
selected ? /* @__PURE__ */
|
|
17102
|
+
selected ? /* @__PURE__ */ jsx31(
|
|
17742
17103
|
"span",
|
|
17743
17104
|
{
|
|
17744
17105
|
className: "absolute right-0.5 top-0.5 flex size-5 items-center justify-center rounded-full bg-primary text-primary-foreground",
|
|
17745
17106
|
"aria-hidden": true,
|
|
17746
|
-
children: /* @__PURE__ */
|
|
17107
|
+
children: /* @__PURE__ */ jsx31(Check3, { className: "size-3", strokeWidth: 3 })
|
|
17747
17108
|
}
|
|
17748
17109
|
) : null
|
|
17749
17110
|
]
|
|
@@ -17752,9 +17113,9 @@ function ButtonStylePanel({
|
|
|
17752
17113
|
);
|
|
17753
17114
|
}) })
|
|
17754
17115
|
] }),
|
|
17755
|
-
/* @__PURE__ */
|
|
17756
|
-
/* @__PURE__ */
|
|
17757
|
-
/* @__PURE__ */
|
|
17116
|
+
/* @__PURE__ */ jsxs21("section", { className: "flex w-full flex-col gap-2.5", children: [
|
|
17117
|
+
/* @__PURE__ */ jsx31("h3", { className: "text-xs font-semibold uppercase leading-4 tracking-[0.6px] text-stone-500 font-sans", children: "Size" }),
|
|
17118
|
+
/* @__PURE__ */ jsx31(
|
|
17758
17119
|
"div",
|
|
17759
17120
|
{
|
|
17760
17121
|
className: "flex w-full items-start rounded-lg bg-stone-100 p-1",
|
|
@@ -17762,7 +17123,7 @@ function ButtonStylePanel({
|
|
|
17762
17123
|
"aria-label": "Size",
|
|
17763
17124
|
children: BUTTON_SIZE_IDS.map((id) => {
|
|
17764
17125
|
const selected = id === size;
|
|
17765
|
-
return /* @__PURE__ */
|
|
17126
|
+
return /* @__PURE__ */ jsx31(
|
|
17766
17127
|
"button",
|
|
17767
17128
|
{
|
|
17768
17129
|
type: "button",
|
|
@@ -18666,7 +18027,7 @@ function hitTestNavDropSlot(clientX, clientY, draggedHrefKey, draggedEl) {
|
|
|
18666
18027
|
}
|
|
18667
18028
|
|
|
18668
18029
|
// src/useNavItemDrag.ts
|
|
18669
|
-
import { useCallback as
|
|
18030
|
+
import { useCallback as useCallback8, useEffect as useEffect12, useRef as useRef10, useState as useState13 } from "react";
|
|
18670
18031
|
function useNavItemDrag({
|
|
18671
18032
|
isEditMode,
|
|
18672
18033
|
editContentRef,
|
|
@@ -18690,11 +18051,11 @@ function useNavItemDrag({
|
|
|
18690
18051
|
getNavigationItemAnchor: getNavigationItemAnchor2,
|
|
18691
18052
|
isDragHandleDisabled: isDragHandleDisabled2
|
|
18692
18053
|
}) {
|
|
18693
|
-
const navDragRef =
|
|
18694
|
-
const [navDropSlots, setNavDropSlots] =
|
|
18695
|
-
const [activeNavDropIndex, setActiveNavDropIndex] =
|
|
18696
|
-
const navPointerDragRef =
|
|
18697
|
-
const clearNavDragVisuals =
|
|
18054
|
+
const navDragRef = useRef10(null);
|
|
18055
|
+
const [navDropSlots, setNavDropSlots] = useState13([]);
|
|
18056
|
+
const [activeNavDropIndex, setActiveNavDropIndex] = useState13(null);
|
|
18057
|
+
const navPointerDragRef = useRef10(null);
|
|
18058
|
+
const clearNavDragVisuals = useCallback8(() => {
|
|
18698
18059
|
const session = navDragRef.current;
|
|
18699
18060
|
const nestedHrefKey = session?.draggedEl?.closest("[data-ohw-nav-children]") != null ? session.hrefKey : null;
|
|
18700
18061
|
navDragRef.current = null;
|
|
@@ -18727,7 +18088,7 @@ function useNavItemDrag({
|
|
|
18727
18088
|
document.documentElement.removeAttribute("data-ohw-nav-dragging-root");
|
|
18728
18089
|
unlockItemDragInteraction();
|
|
18729
18090
|
}, [setDraggedItemRect, setIsItemDragging, setSiblingHintRects]);
|
|
18730
|
-
const refreshNavDragVisuals =
|
|
18091
|
+
const refreshNavDragVisuals = useCallback8(
|
|
18731
18092
|
(session, activeSlot, clientX, clientY) => {
|
|
18732
18093
|
setDraggedItemRect(session.draggedEl.getBoundingClientRect());
|
|
18733
18094
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -18745,13 +18106,13 @@ function useNavItemDrag({
|
|
|
18745
18106
|
},
|
|
18746
18107
|
[setDraggedItemRect, setSiblingHintRects]
|
|
18747
18108
|
);
|
|
18748
|
-
const refreshNavDragVisualsRef =
|
|
18109
|
+
const refreshNavDragVisualsRef = useRef10(refreshNavDragVisuals);
|
|
18749
18110
|
refreshNavDragVisualsRef.current = refreshNavDragVisuals;
|
|
18750
|
-
const commitNavDragRef =
|
|
18111
|
+
const commitNavDragRef = useRef10(() => {
|
|
18751
18112
|
});
|
|
18752
|
-
const beginNavDragRef =
|
|
18113
|
+
const beginNavDragRef = useRef10(() => {
|
|
18753
18114
|
});
|
|
18754
|
-
const beginNavDrag =
|
|
18115
|
+
const beginNavDrag = useCallback8(
|
|
18755
18116
|
(session) => {
|
|
18756
18117
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
18757
18118
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -18790,7 +18151,7 @@ function useNavItemDrag({
|
|
|
18790
18151
|
]
|
|
18791
18152
|
);
|
|
18792
18153
|
beginNavDragRef.current = beginNavDrag;
|
|
18793
|
-
const commitNavDrag =
|
|
18154
|
+
const commitNavDrag = useCallback8(
|
|
18794
18155
|
(clientX, clientY) => {
|
|
18795
18156
|
const session = navDragRef.current;
|
|
18796
18157
|
if (!session) {
|
|
@@ -18869,7 +18230,7 @@ function useNavItemDrag({
|
|
|
18869
18230
|
[clearNavDragVisuals, deselectRef, editContentRef, postToParentRef, selectRef]
|
|
18870
18231
|
);
|
|
18871
18232
|
commitNavDragRef.current = commitNavDrag;
|
|
18872
|
-
const startNavLinkDrag =
|
|
18233
|
+
const startNavLinkDrag = useCallback8(
|
|
18873
18234
|
(anchor, clientX, clientY, wasSelected) => {
|
|
18874
18235
|
if (footerDragRef.current) return false;
|
|
18875
18236
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -18887,7 +18248,7 @@ function useNavItemDrag({
|
|
|
18887
18248
|
},
|
|
18888
18249
|
[beginNavDrag, footerDragRef, isDragHandleDisabled2, isCtaButton]
|
|
18889
18250
|
);
|
|
18890
|
-
const onNavDragOver =
|
|
18251
|
+
const onNavDragOver = useCallback8(
|
|
18891
18252
|
(e) => {
|
|
18892
18253
|
const session = navDragRef.current;
|
|
18893
18254
|
if (!session) return false;
|
|
@@ -18899,7 +18260,7 @@ function useNavItemDrag({
|
|
|
18899
18260
|
},
|
|
18900
18261
|
[]
|
|
18901
18262
|
);
|
|
18902
|
-
|
|
18263
|
+
useEffect12(() => {
|
|
18903
18264
|
if (!isEditMode) return;
|
|
18904
18265
|
const THRESHOLD = 10;
|
|
18905
18266
|
const resolveWasSelected = (el) => {
|
|
@@ -19026,7 +18387,7 @@ function useNavItemDrag({
|
|
|
19026
18387
|
setLinkPopover,
|
|
19027
18388
|
suppressNextClickRef
|
|
19028
18389
|
]);
|
|
19029
|
-
const armNavPressFromChrome =
|
|
18390
|
+
const armNavPressFromChrome = useCallback8(
|
|
19030
18391
|
(selected, clientX, clientY, pointerId) => {
|
|
19031
18392
|
const hrefKey = selected.getAttribute("data-ohw-href-key");
|
|
19032
18393
|
if (!hrefKey || !isNavbarHrefKey(hrefKey)) return false;
|
|
@@ -19058,7 +18419,7 @@ function useNavItemDrag({
|
|
|
19058
18419
|
}
|
|
19059
18420
|
|
|
19060
18421
|
// src/useSectionDrag.ts
|
|
19061
|
-
import { useCallback as
|
|
18422
|
+
import { useCallback as useCallback9, useEffect as useEffect13, useRef as useRef11, useState as useState14 } from "react";
|
|
19062
18423
|
|
|
19063
18424
|
// src/lib/section-dnd.ts
|
|
19064
18425
|
function isFooterSection(el) {
|
|
@@ -19151,21 +18512,21 @@ function useSectionDrag({
|
|
|
19151
18512
|
suppressNextClickRef,
|
|
19152
18513
|
suppressClickUntilRef
|
|
19153
18514
|
}) {
|
|
19154
|
-
const sectionDragRef =
|
|
19155
|
-
const [sectionDropSlots, setSectionDropSlots] =
|
|
19156
|
-
const [activeSectionDropIndex, setActiveSectionDropIndex] =
|
|
19157
|
-
const [isSectionDragging, setIsSectionDragging] =
|
|
19158
|
-
const sectionPointerDragRef =
|
|
19159
|
-
const autoScrollRafRef =
|
|
19160
|
-
const autoScrollDeltaRef =
|
|
19161
|
-
const stopAutoScroll =
|
|
18515
|
+
const sectionDragRef = useRef11(null);
|
|
18516
|
+
const [sectionDropSlots, setSectionDropSlots] = useState14([]);
|
|
18517
|
+
const [activeSectionDropIndex, setActiveSectionDropIndex] = useState14(null);
|
|
18518
|
+
const [isSectionDragging, setIsSectionDragging] = useState14(false);
|
|
18519
|
+
const sectionPointerDragRef = useRef11(null);
|
|
18520
|
+
const autoScrollRafRef = useRef11(null);
|
|
18521
|
+
const autoScrollDeltaRef = useRef11(0);
|
|
18522
|
+
const stopAutoScroll = useCallback9(() => {
|
|
19162
18523
|
if (autoScrollRafRef.current != null) {
|
|
19163
18524
|
cancelAnimationFrame(autoScrollRafRef.current);
|
|
19164
18525
|
autoScrollRafRef.current = null;
|
|
19165
18526
|
}
|
|
19166
18527
|
autoScrollDeltaRef.current = 0;
|
|
19167
18528
|
}, []);
|
|
19168
|
-
const tickAutoScroll =
|
|
18529
|
+
const tickAutoScroll = useCallback9(() => {
|
|
19169
18530
|
if (!sectionDragRef.current) {
|
|
19170
18531
|
stopAutoScroll();
|
|
19171
18532
|
return;
|
|
@@ -19175,7 +18536,7 @@ function useSectionDrag({
|
|
|
19175
18536
|
}
|
|
19176
18537
|
autoScrollRafRef.current = requestAnimationFrame(tickAutoScroll);
|
|
19177
18538
|
}, [postToParentRef, stopAutoScroll]);
|
|
19178
|
-
const updateAutoScroll =
|
|
18539
|
+
const updateAutoScroll = useCallback9(
|
|
19179
18540
|
(clientY) => {
|
|
19180
18541
|
const clip = getIframeChromeClip(parentScrollRef.current);
|
|
19181
18542
|
let delta = 0;
|
|
@@ -19197,7 +18558,7 @@ function useSectionDrag({
|
|
|
19197
18558
|
},
|
|
19198
18559
|
[parentScrollRef, stopAutoScroll, tickAutoScroll]
|
|
19199
18560
|
);
|
|
19200
|
-
const clearSectionDragVisuals =
|
|
18561
|
+
const clearSectionDragVisuals = useCallback9(() => {
|
|
19201
18562
|
sectionDragRef.current?.draggedEl.removeAttribute("data-ohw-section-dragging");
|
|
19202
18563
|
sectionDragRef.current = null;
|
|
19203
18564
|
setSectionDropSlots([]);
|
|
@@ -19207,7 +18568,7 @@ function useSectionDrag({
|
|
|
19207
18568
|
document.documentElement.removeAttribute("data-ohw-section-dragging-root");
|
|
19208
18569
|
unlockItemDragInteraction();
|
|
19209
18570
|
}, [stopAutoScroll]);
|
|
19210
|
-
const refreshSectionDragVisuals =
|
|
18571
|
+
const refreshSectionDragVisuals = useCallback9(
|
|
19211
18572
|
(session, clientX, clientY) => {
|
|
19212
18573
|
session.lastClientX = clientX;
|
|
19213
18574
|
session.lastClientY = clientY;
|
|
@@ -19221,7 +18582,7 @@ function useSectionDrag({
|
|
|
19221
18582
|
},
|
|
19222
18583
|
[updateAutoScroll]
|
|
19223
18584
|
);
|
|
19224
|
-
const beginSectionDrag =
|
|
18585
|
+
const beginSectionDrag = useCallback9(
|
|
19225
18586
|
(session) => {
|
|
19226
18587
|
sectionDragRef.current = session;
|
|
19227
18588
|
setIsSectionDragging(true);
|
|
@@ -19232,7 +18593,7 @@ function useSectionDrag({
|
|
|
19232
18593
|
},
|
|
19233
18594
|
[refreshSectionDragVisuals]
|
|
19234
18595
|
);
|
|
19235
|
-
const commitSectionDrag =
|
|
18596
|
+
const commitSectionDrag = useCallback9(() => {
|
|
19236
18597
|
const session = sectionDragRef.current;
|
|
19237
18598
|
if (!session) {
|
|
19238
18599
|
clearSectionDragVisuals();
|
|
@@ -19261,7 +18622,7 @@ function useSectionDrag({
|
|
|
19261
18622
|
});
|
|
19262
18623
|
});
|
|
19263
18624
|
}, [clearSectionDragVisuals, editContentRef, postToParentRef]);
|
|
19264
|
-
const startSectionPressDrag =
|
|
18625
|
+
const startSectionPressDrag = useCallback9(
|
|
19265
18626
|
(el, clientX, clientY, pointerId) => {
|
|
19266
18627
|
if (navDragRef.current || footerDragRef.current || sectionDragRef.current) return false;
|
|
19267
18628
|
const instanceId = instanceIdOf(el);
|
|
@@ -19278,7 +18639,7 @@ function useSectionDrag({
|
|
|
19278
18639
|
},
|
|
19279
18640
|
[footerDragRef, navDragRef]
|
|
19280
18641
|
);
|
|
19281
|
-
|
|
18642
|
+
useEffect13(() => {
|
|
19282
18643
|
if (!isEditMode) return;
|
|
19283
18644
|
const onPointerDown = (e) => {
|
|
19284
18645
|
if (e.button !== 0) return;
|
|
@@ -19384,7 +18745,7 @@ function useSectionDrag({
|
|
|
19384
18745
|
|
|
19385
18746
|
// src/ui/footer-container-chrome.tsx
|
|
19386
18747
|
import { Plus as Plus2 } from "lucide-react";
|
|
19387
|
-
import { jsx as
|
|
18748
|
+
import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
19388
18749
|
function FooterContainerChrome({
|
|
19389
18750
|
rect,
|
|
19390
18751
|
onAdd,
|
|
@@ -19392,7 +18753,7 @@ function FooterContainerChrome({
|
|
|
19392
18753
|
}) {
|
|
19393
18754
|
const chromeGap = 6;
|
|
19394
18755
|
const buttonMargin = 7;
|
|
19395
|
-
return /* @__PURE__ */
|
|
18756
|
+
return /* @__PURE__ */ jsx32(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx32(
|
|
19396
18757
|
"div",
|
|
19397
18758
|
{
|
|
19398
18759
|
"data-ohw-footer-container-chrome": "",
|
|
@@ -19404,8 +18765,8 @@ function FooterContainerChrome({
|
|
|
19404
18765
|
width: rect.width + chromeGap * 2,
|
|
19405
18766
|
height: rect.height + chromeGap * 2
|
|
19406
18767
|
},
|
|
19407
|
-
children: /* @__PURE__ */
|
|
19408
|
-
/* @__PURE__ */
|
|
18768
|
+
children: /* @__PURE__ */ jsxs22(Tooltip, { children: [
|
|
18769
|
+
/* @__PURE__ */ jsx32(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx32(
|
|
19409
18770
|
"button",
|
|
19410
18771
|
{
|
|
19411
18772
|
type: "button",
|
|
@@ -19424,17 +18785,17 @@ function FooterContainerChrome({
|
|
|
19424
18785
|
if (addDisabled) return;
|
|
19425
18786
|
onAdd();
|
|
19426
18787
|
},
|
|
19427
|
-
children: /* @__PURE__ */
|
|
18788
|
+
children: /* @__PURE__ */ jsx32(Plus2, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
19428
18789
|
}
|
|
19429
18790
|
) }),
|
|
19430
|
-
/* @__PURE__ */
|
|
18791
|
+
/* @__PURE__ */ jsx32(TooltipContent, { side: "bottom", sideOffset: 9, children: addDisabled ? "Maximum columns reached" : "Add item" })
|
|
19431
18792
|
] })
|
|
19432
18793
|
}
|
|
19433
18794
|
) });
|
|
19434
18795
|
}
|
|
19435
18796
|
|
|
19436
18797
|
// src/lib/carousel.ts
|
|
19437
|
-
import { useEffect as
|
|
18798
|
+
import { useEffect as useEffect14, useState as useState15 } from "react";
|
|
19438
18799
|
var CAROUSEL_ATTR = "data-ohw-carousel";
|
|
19439
18800
|
var CAROUSEL_VALUE_ATTR = "data-ohw-carousel-value";
|
|
19440
18801
|
var CAROUSEL_SLIDE_ATTR = "data-ohw-carousel-slide";
|
|
@@ -19496,8 +18857,8 @@ function applyCarouselNode(key, val) {
|
|
|
19496
18857
|
return true;
|
|
19497
18858
|
}
|
|
19498
18859
|
function useOhwCarousel(key, initial) {
|
|
19499
|
-
const [images, setImages] =
|
|
19500
|
-
|
|
18860
|
+
const [images, setImages] = useState15(initial);
|
|
18861
|
+
useEffect14(() => {
|
|
19501
18862
|
const el = document.querySelector(
|
|
19502
18863
|
`[${CAROUSEL_ATTR}][data-ohw-key="${CSS.escape(key)}"]`
|
|
19503
18864
|
);
|
|
@@ -19917,13 +19278,13 @@ function deleteSelectedNavFooterItem(deps) {
|
|
|
19917
19278
|
|
|
19918
19279
|
// src/ui/navbar-container-chrome.tsx
|
|
19919
19280
|
import { Plus as Plus3 } from "lucide-react";
|
|
19920
|
-
import { jsx as
|
|
19281
|
+
import { jsx as jsx33 } from "react/jsx-runtime";
|
|
19921
19282
|
function NavbarContainerChrome({
|
|
19922
19283
|
rect,
|
|
19923
19284
|
onAdd
|
|
19924
19285
|
}) {
|
|
19925
19286
|
const chromeGap = 6;
|
|
19926
|
-
return /* @__PURE__ */
|
|
19287
|
+
return /* @__PURE__ */ jsx33(
|
|
19927
19288
|
"div",
|
|
19928
19289
|
{
|
|
19929
19290
|
"data-ohw-navbar-container-chrome": "",
|
|
@@ -19935,7 +19296,7 @@ function NavbarContainerChrome({
|
|
|
19935
19296
|
width: rect.width + chromeGap * 2,
|
|
19936
19297
|
height: rect.height + chromeGap * 2
|
|
19937
19298
|
},
|
|
19938
|
-
children: /* @__PURE__ */
|
|
19299
|
+
children: /* @__PURE__ */ jsx33(
|
|
19939
19300
|
"button",
|
|
19940
19301
|
{
|
|
19941
19302
|
type: "button",
|
|
@@ -19952,7 +19313,7 @@ function NavbarContainerChrome({
|
|
|
19952
19313
|
e.stopPropagation();
|
|
19953
19314
|
onAdd();
|
|
19954
19315
|
},
|
|
19955
|
-
children: /* @__PURE__ */
|
|
19316
|
+
children: /* @__PURE__ */ jsx33(Plus3, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
19956
19317
|
}
|
|
19957
19318
|
)
|
|
19958
19319
|
}
|
|
@@ -19961,7 +19322,7 @@ function NavbarContainerChrome({
|
|
|
19961
19322
|
|
|
19962
19323
|
// src/ui/drop-indicator.tsx
|
|
19963
19324
|
import * as React11 from "react";
|
|
19964
|
-
import { jsx as
|
|
19325
|
+
import { jsx as jsx34 } from "react/jsx-runtime";
|
|
19965
19326
|
var dropIndicatorVariants = cva(
|
|
19966
19327
|
"ov-gap-line pointer-events-none shrink-0 transition-opacity duration-150",
|
|
19967
19328
|
{
|
|
@@ -19985,7 +19346,7 @@ var dropIndicatorVariants = cva(
|
|
|
19985
19346
|
);
|
|
19986
19347
|
var DropIndicator = React11.forwardRef(
|
|
19987
19348
|
({ className, direction, state, ...props }, ref) => {
|
|
19988
|
-
return /* @__PURE__ */
|
|
19349
|
+
return /* @__PURE__ */ jsx34(
|
|
19989
19350
|
"div",
|
|
19990
19351
|
{
|
|
19991
19352
|
ref,
|
|
@@ -20002,7 +19363,7 @@ var DropIndicator = React11.forwardRef(
|
|
|
20002
19363
|
DropIndicator.displayName = "DropIndicator";
|
|
20003
19364
|
|
|
20004
19365
|
// src/ui/badge.tsx
|
|
20005
|
-
import { jsx as
|
|
19366
|
+
import { jsx as jsx35 } from "react/jsx-runtime";
|
|
20006
19367
|
var badgeVariants = cva(
|
|
20007
19368
|
"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",
|
|
20008
19369
|
{
|
|
@@ -20020,13 +19381,13 @@ var badgeVariants = cva(
|
|
|
20020
19381
|
}
|
|
20021
19382
|
);
|
|
20022
19383
|
function Badge({ className, variant, ...props }) {
|
|
20023
|
-
return /* @__PURE__ */
|
|
19384
|
+
return /* @__PURE__ */ jsx35("div", { className: cn(badgeVariants({ variant }), className), ...props });
|
|
20024
19385
|
}
|
|
20025
19386
|
|
|
20026
19387
|
// src/OhhwellsBridge.tsx
|
|
20027
19388
|
import { Brush as Brush2, Link as Link2, Plus as Plus4, Settings } from "lucide-react";
|
|
20028
|
-
import { Fragment as
|
|
20029
|
-
var
|
|
19389
|
+
import { Fragment as Fragment10, jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
19390
|
+
var PRIMARY5 = "#0885FE";
|
|
20030
19391
|
var IMAGE_FADE_MS = 300;
|
|
20031
19392
|
var MEDIA_SETTLE_TIMEOUT_MS = 2500;
|
|
20032
19393
|
function runOpacityFade(el, onDone) {
|
|
@@ -20147,7 +19508,7 @@ function duplicateSchedulingWidget(instanceId, scheduleId) {
|
|
|
20147
19508
|
schedulingRoots.set(container, root);
|
|
20148
19509
|
flushSync2(() => {
|
|
20149
19510
|
root.render(
|
|
20150
|
-
/* @__PURE__ */
|
|
19511
|
+
/* @__PURE__ */ jsx36(
|
|
20151
19512
|
SchedulingWidget,
|
|
20152
19513
|
{
|
|
20153
19514
|
notifyOnConnect: false,
|
|
@@ -20275,7 +19636,7 @@ function mountSchedulingWidget(anchorId, notifyOnConnect = false, scheduleId, be
|
|
|
20275
19636
|
schedulingRoots.set(container, root);
|
|
20276
19637
|
flushSync2(() => {
|
|
20277
19638
|
root.render(
|
|
20278
|
-
/* @__PURE__ */
|
|
19639
|
+
/* @__PURE__ */ jsx36(
|
|
20279
19640
|
SchedulingWidget,
|
|
20280
19641
|
{
|
|
20281
19642
|
notifyOnConnect,
|
|
@@ -20784,7 +20145,7 @@ function getNavigationSelectionParent(el) {
|
|
|
20784
20145
|
if (!isFooterLinksContainer(el) && (el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isInferredFooterGroup2(el))) {
|
|
20785
20146
|
return getFooterLinksContainer();
|
|
20786
20147
|
}
|
|
20787
|
-
if (el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-nav-drawer") ||
|
|
20148
|
+
if (el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-nav-drawer") || isFooterLinksContainer(el)) {
|
|
20788
20149
|
return getNavigationRoot(el);
|
|
20789
20150
|
}
|
|
20790
20151
|
return null;
|
|
@@ -21006,12 +20367,13 @@ var ICONS = {
|
|
|
21006
20367
|
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"/>',
|
|
21007
20368
|
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"/>'
|
|
21008
20369
|
};
|
|
20370
|
+
var HEIGHT_SETTLE_DELAYS = [150, 400, 800];
|
|
21009
20371
|
var SELECTION_CHROME_GAP2 = 4;
|
|
21010
20372
|
var TOOLBAR_STROKE_GAP2 = 4;
|
|
21011
20373
|
var TOOLBAR_OFFSET_FROM_ELEMENT = SELECTION_CHROME_GAP2 + TOOLBAR_STROKE_GAP2;
|
|
21012
20374
|
var HOVER_STROKE_WIDTH = 1.5;
|
|
21013
20375
|
var TEXT_HOVER_SIDE_PAD = 4;
|
|
21014
|
-
var CHROME_PRIMARY = `var(--ohw-primary, ${
|
|
20376
|
+
var CHROME_PRIMARY = `var(--ohw-primary, ${PRIMARY5})`;
|
|
21015
20377
|
var TOOLBAR_GROUPS = [
|
|
21016
20378
|
[
|
|
21017
20379
|
{ cmd: "bold", title: "Bold" },
|
|
@@ -21037,7 +20399,7 @@ function EditGlowChrome({
|
|
|
21037
20399
|
hideHandle = false
|
|
21038
20400
|
}) {
|
|
21039
20401
|
const GAP = SELECTION_CHROME_GAP2;
|
|
21040
|
-
return /* @__PURE__ */
|
|
20402
|
+
return /* @__PURE__ */ jsxs23(
|
|
21041
20403
|
"div",
|
|
21042
20404
|
{
|
|
21043
20405
|
ref: elRef,
|
|
@@ -21052,7 +20414,7 @@ function EditGlowChrome({
|
|
|
21052
20414
|
zIndex: 2147483646
|
|
21053
20415
|
},
|
|
21054
20416
|
children: [
|
|
21055
|
-
/* @__PURE__ */
|
|
20417
|
+
/* @__PURE__ */ jsx36(
|
|
21056
20418
|
"div",
|
|
21057
20419
|
{
|
|
21058
20420
|
style: {
|
|
@@ -21066,7 +20428,7 @@ function EditGlowChrome({
|
|
|
21066
20428
|
}
|
|
21067
20429
|
}
|
|
21068
20430
|
),
|
|
21069
|
-
reorderHrefKey && !hideHandle && /* @__PURE__ */
|
|
20431
|
+
reorderHrefKey && !hideHandle && /* @__PURE__ */ jsx36(
|
|
21070
20432
|
"div",
|
|
21071
20433
|
{
|
|
21072
20434
|
"data-ohw-drag-handle-container": "",
|
|
@@ -21078,7 +20440,7 @@ function EditGlowChrome({
|
|
|
21078
20440
|
transform: "translate(calc(-100% - 7px), -50%)",
|
|
21079
20441
|
pointerEvents: dragDisabled ? "none" : "auto"
|
|
21080
20442
|
},
|
|
21081
|
-
children: /* @__PURE__ */
|
|
20443
|
+
children: /* @__PURE__ */ jsx36(
|
|
21082
20444
|
DragHandle,
|
|
21083
20445
|
{
|
|
21084
20446
|
"aria-label": `Reorder ${reorderHrefKey}`,
|
|
@@ -21282,7 +20644,7 @@ function FloatingToolbar({
|
|
|
21282
20644
|
return () => ro.disconnect();
|
|
21283
20645
|
}, [showEditLink, activeCommands]);
|
|
21284
20646
|
const { top, left, transform } = calcToolbarPos(rect, parentScroll, measuredW);
|
|
21285
|
-
return /* @__PURE__ */
|
|
20647
|
+
return /* @__PURE__ */ jsx36(
|
|
21286
20648
|
"div",
|
|
21287
20649
|
{
|
|
21288
20650
|
ref: setRefs,
|
|
@@ -21294,12 +20656,12 @@ function FloatingToolbar({
|
|
|
21294
20656
|
zIndex: 2147483647,
|
|
21295
20657
|
pointerEvents: "auto"
|
|
21296
20658
|
},
|
|
21297
|
-
children: /* @__PURE__ */
|
|
21298
|
-
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */
|
|
21299
|
-
gi > 0 && /* @__PURE__ */
|
|
20659
|
+
children: /* @__PURE__ */ jsxs23(CustomToolbar, { children: [
|
|
20660
|
+
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ jsxs23(React12.Fragment, { children: [
|
|
20661
|
+
gi > 0 && /* @__PURE__ */ jsx36(CustomToolbarDivider, {}),
|
|
21300
20662
|
btns.map((btn) => {
|
|
21301
20663
|
const isActive = activeCommands.has(btn.cmd);
|
|
21302
|
-
return /* @__PURE__ */
|
|
20664
|
+
return /* @__PURE__ */ jsx36(
|
|
21303
20665
|
CustomToolbarButton,
|
|
21304
20666
|
{
|
|
21305
20667
|
title: btn.title,
|
|
@@ -21308,7 +20670,7 @@ function FloatingToolbar({
|
|
|
21308
20670
|
e.preventDefault();
|
|
21309
20671
|
onCommand(btn.cmd);
|
|
21310
20672
|
},
|
|
21311
|
-
children: /* @__PURE__ */
|
|
20673
|
+
children: /* @__PURE__ */ jsx36(
|
|
21312
20674
|
"svg",
|
|
21313
20675
|
{
|
|
21314
20676
|
width: "16",
|
|
@@ -21329,7 +20691,7 @@ function FloatingToolbar({
|
|
|
21329
20691
|
);
|
|
21330
20692
|
})
|
|
21331
20693
|
] }, gi)),
|
|
21332
|
-
showEditLink ? /* @__PURE__ */
|
|
20694
|
+
showEditLink ? /* @__PURE__ */ jsx36(
|
|
21333
20695
|
CustomToolbarButton,
|
|
21334
20696
|
{
|
|
21335
20697
|
type: "button",
|
|
@@ -21343,7 +20705,7 @@ function FloatingToolbar({
|
|
|
21343
20705
|
e.preventDefault();
|
|
21344
20706
|
e.stopPropagation();
|
|
21345
20707
|
},
|
|
21346
|
-
children: /* @__PURE__ */
|
|
20708
|
+
children: /* @__PURE__ */ jsx36(Link2, { className: "size-4 shrink-0", "aria-hidden": true })
|
|
21347
20709
|
}
|
|
21348
20710
|
) : null
|
|
21349
20711
|
] })
|
|
@@ -21360,7 +20722,7 @@ function StateToggle({
|
|
|
21360
20722
|
states,
|
|
21361
20723
|
onStateChange
|
|
21362
20724
|
}) {
|
|
21363
|
-
return /* @__PURE__ */
|
|
20725
|
+
return /* @__PURE__ */ jsx36(
|
|
21364
20726
|
ToggleGroup,
|
|
21365
20727
|
{
|
|
21366
20728
|
"data-ohw-state-toggle": "",
|
|
@@ -21374,7 +20736,7 @@ function StateToggle({
|
|
|
21374
20736
|
left: rect.right - 8,
|
|
21375
20737
|
transform: "translateX(-100%)"
|
|
21376
20738
|
},
|
|
21377
|
-
children: states.map((state) => /* @__PURE__ */
|
|
20739
|
+
children: states.map((state) => /* @__PURE__ */ jsx36(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
|
|
21378
20740
|
}
|
|
21379
20741
|
);
|
|
21380
20742
|
}
|
|
@@ -21391,9 +20753,9 @@ var OHW_LOADER_STYLE = {
|
|
|
21391
20753
|
justifyContent: "center"
|
|
21392
20754
|
};
|
|
21393
20755
|
function OhwLoaderSpinner() {
|
|
21394
|
-
return /* @__PURE__ */
|
|
21395
|
-
/* @__PURE__ */
|
|
21396
|
-
/* @__PURE__ */
|
|
20756
|
+
return /* @__PURE__ */ jsxs23("svg", { width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", "aria-hidden": true, children: [
|
|
20757
|
+
/* @__PURE__ */ jsx36("circle", { cx: "14", cy: "14", r: "11", stroke: "#E7E5E4", strokeWidth: "3" }),
|
|
20758
|
+
/* @__PURE__ */ jsx36(
|
|
21397
20759
|
"circle",
|
|
21398
20760
|
{
|
|
21399
20761
|
cx: "14",
|
|
@@ -21403,7 +20765,7 @@ function OhwLoaderSpinner() {
|
|
|
21403
20765
|
strokeWidth: "3",
|
|
21404
20766
|
strokeDasharray: "17 52",
|
|
21405
20767
|
strokeLinecap: "round",
|
|
21406
|
-
children: /* @__PURE__ */
|
|
20768
|
+
children: /* @__PURE__ */ jsx36(
|
|
21407
20769
|
"animateTransform",
|
|
21408
20770
|
{
|
|
21409
20771
|
attributeName: "transform",
|
|
@@ -21419,7 +20781,7 @@ function OhwLoaderSpinner() {
|
|
|
21419
20781
|
] });
|
|
21420
20782
|
}
|
|
21421
20783
|
function OhwBrandMark() {
|
|
21422
|
-
return /* @__PURE__ */
|
|
20784
|
+
return /* @__PURE__ */ jsxs23(
|
|
21423
20785
|
"svg",
|
|
21424
20786
|
{
|
|
21425
20787
|
width: "16",
|
|
@@ -21430,7 +20792,7 @@ function OhwBrandMark() {
|
|
|
21430
20792
|
style: { display: "block", flexShrink: 0 },
|
|
21431
20793
|
xmlns: "http://www.w3.org/2000/svg",
|
|
21432
20794
|
children: [
|
|
21433
|
-
/* @__PURE__ */
|
|
20795
|
+
/* @__PURE__ */ jsx36(
|
|
21434
20796
|
"mask",
|
|
21435
20797
|
{
|
|
21436
20798
|
id: "ohw-badge-mark",
|
|
@@ -21440,15 +20802,15 @@ function OhwBrandMark() {
|
|
|
21440
20802
|
y: "0",
|
|
21441
20803
|
width: "48",
|
|
21442
20804
|
height: "48",
|
|
21443
|
-
children: /* @__PURE__ */
|
|
20805
|
+
children: /* @__PURE__ */ jsx36("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" })
|
|
21444
20806
|
}
|
|
21445
20807
|
),
|
|
21446
|
-
/* @__PURE__ */
|
|
21447
|
-
/* @__PURE__ */
|
|
21448
|
-
/* @__PURE__ */
|
|
21449
|
-
/* @__PURE__ */
|
|
21450
|
-
/* @__PURE__ */
|
|
21451
|
-
/* @__PURE__ */
|
|
20808
|
+
/* @__PURE__ */ jsxs23("g", { mask: "url(#ohw-badge-mark)", children: [
|
|
20809
|
+
/* @__PURE__ */ jsx36("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" }),
|
|
20810
|
+
/* @__PURE__ */ jsx36("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" }),
|
|
20811
|
+
/* @__PURE__ */ jsx36("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" }),
|
|
20812
|
+
/* @__PURE__ */ jsx36("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" }),
|
|
20813
|
+
/* @__PURE__ */ jsx36("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" })
|
|
21452
20814
|
] })
|
|
21453
20815
|
]
|
|
21454
20816
|
}
|
|
@@ -21485,7 +20847,7 @@ var OHW_BADGE_LABEL_STYLE = {
|
|
|
21485
20847
|
whiteSpace: "nowrap"
|
|
21486
20848
|
};
|
|
21487
20849
|
function MadeWithOhhWells() {
|
|
21488
|
-
return /* @__PURE__ */
|
|
20850
|
+
return /* @__PURE__ */ jsxs23(
|
|
21489
20851
|
"a",
|
|
21490
20852
|
{
|
|
21491
20853
|
href: "https://ohhwells.com",
|
|
@@ -21495,8 +20857,8 @@ function MadeWithOhhWells() {
|
|
|
21495
20857
|
"data-ohw-badge": "",
|
|
21496
20858
|
style: OHW_BADGE_STYLE,
|
|
21497
20859
|
children: [
|
|
21498
|
-
/* @__PURE__ */
|
|
21499
|
-
/* @__PURE__ */
|
|
20860
|
+
/* @__PURE__ */ jsx36(OhwBrandMark, {}),
|
|
20861
|
+
/* @__PURE__ */ jsx36("span", { style: OHW_BADGE_LABEL_STYLE, children: "Made with OhhWells" })
|
|
21500
20862
|
]
|
|
21501
20863
|
}
|
|
21502
20864
|
);
|
|
@@ -21542,8 +20904,8 @@ function OhhwellsBridge() {
|
|
|
21542
20904
|
const router = useRouter3();
|
|
21543
20905
|
const searchParams = useSearchParams();
|
|
21544
20906
|
const isEditMode = isEditSessionActive();
|
|
21545
|
-
const [bridgeRoot, setBridgeRoot] =
|
|
21546
|
-
|
|
20907
|
+
const [bridgeRoot, setBridgeRoot] = useState16(null);
|
|
20908
|
+
useEffect15(() => {
|
|
21547
20909
|
const figtreeFontId = "ohw-figtree-font";
|
|
21548
20910
|
if (!document.getElementById(figtreeFontId)) {
|
|
21549
20911
|
const preconnect1 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.googleapis.com" });
|
|
@@ -21569,7 +20931,7 @@ function OhhwellsBridge() {
|
|
|
21569
20931
|
};
|
|
21570
20932
|
}, []);
|
|
21571
20933
|
const subdomainFromQuery = searchParams.get("subdomain");
|
|
21572
|
-
const [subdomain, setSubdomain] =
|
|
20934
|
+
const [subdomain, setSubdomain] = useState16(() => resolveSubdomain(subdomainFromQuery));
|
|
21573
20935
|
useLayoutEffect5(() => {
|
|
21574
20936
|
const next = resolveSubdomain(subdomainFromQuery);
|
|
21575
20937
|
if (next !== subdomain) setSubdomain(next);
|
|
@@ -21582,7 +20944,7 @@ function OhhwellsBridge() {
|
|
|
21582
20944
|
}, 0);
|
|
21583
20945
|
return () => window.clearTimeout(t);
|
|
21584
20946
|
}, [subdomainFromQuery, subdomain]);
|
|
21585
|
-
|
|
20947
|
+
useEffect15(() => {
|
|
21586
20948
|
if (!subdomainFromQuery || typeof window === "undefined") return;
|
|
21587
20949
|
const url = new URL(window.location.href);
|
|
21588
20950
|
if (!url.searchParams.has("subdomain")) return;
|
|
@@ -21592,45 +20954,45 @@ function OhhwellsBridge() {
|
|
|
21592
20954
|
}, [subdomainFromQuery]);
|
|
21593
20955
|
useLinkHrefGuardian(pathname, subdomain, isEditMode);
|
|
21594
20956
|
useSavedLinkNavigation(isEditMode);
|
|
21595
|
-
const postToParent2 =
|
|
20957
|
+
const postToParent2 = useCallback10((data) => {
|
|
21596
20958
|
if (typeof window !== "undefined" && window.parent !== window) {
|
|
21597
20959
|
window.parent.postMessage(data, "*");
|
|
21598
20960
|
}
|
|
21599
20961
|
}, []);
|
|
21600
|
-
const [fetchState, setFetchState] =
|
|
21601
|
-
const [showBranding, setShowBranding] =
|
|
21602
|
-
const autoSaveTimers =
|
|
21603
|
-
const activeElRef =
|
|
21604
|
-
const pointerHeldRef =
|
|
21605
|
-
const selectedElRef =
|
|
21606
|
-
const selectedHrefKeyRef =
|
|
21607
|
-
const selectedFooterColAttrRef =
|
|
21608
|
-
const originalContentRef =
|
|
21609
|
-
const activeStateElRef =
|
|
21610
|
-
const parentScrollRef =
|
|
21611
|
-
const visibleViewportRef =
|
|
21612
|
-
const [dialogPortalContainer, setDialogPortalContainer] =
|
|
21613
|
-
const attachVisibleViewport =
|
|
20962
|
+
const [fetchState, setFetchState] = useState16("idle");
|
|
20963
|
+
const [showBranding, setShowBranding] = useState16(false);
|
|
20964
|
+
const autoSaveTimers = useRef12(/* @__PURE__ */ new Map());
|
|
20965
|
+
const activeElRef = useRef12(null);
|
|
20966
|
+
const pointerHeldRef = useRef12(false);
|
|
20967
|
+
const selectedElRef = useRef12(null);
|
|
20968
|
+
const selectedHrefKeyRef = useRef12(null);
|
|
20969
|
+
const selectedFooterColAttrRef = useRef12(null);
|
|
20970
|
+
const originalContentRef = useRef12(null);
|
|
20971
|
+
const activeStateElRef = useRef12(null);
|
|
20972
|
+
const parentScrollRef = useRef12(null);
|
|
20973
|
+
const visibleViewportRef = useRef12(null);
|
|
20974
|
+
const [dialogPortalContainer, setDialogPortalContainer] = useState16(null);
|
|
20975
|
+
const attachVisibleViewport = useCallback10((node) => {
|
|
21614
20976
|
visibleViewportRef.current = node;
|
|
21615
20977
|
setDialogPortalContainer(node);
|
|
21616
20978
|
if (node) applyVisibleViewport(node, parentScrollRef.current);
|
|
21617
20979
|
}, []);
|
|
21618
|
-
const toolbarElRef =
|
|
21619
|
-
const glowElRef =
|
|
21620
|
-
const hoveredImageRef =
|
|
21621
|
-
const hoveredImageHasTextOverlapRef =
|
|
21622
|
-
const dragOverElRef =
|
|
21623
|
-
const [mediaHover, setMediaHover] =
|
|
21624
|
-
const [selectedAiSectionId, setSelectedAiSectionId] =
|
|
21625
|
-
const selectedAiSectionIdRef =
|
|
21626
|
-
const handleAiSectionSelectionChange =
|
|
20980
|
+
const toolbarElRef = useRef12(null);
|
|
20981
|
+
const glowElRef = useRef12(null);
|
|
20982
|
+
const hoveredImageRef = useRef12(null);
|
|
20983
|
+
const hoveredImageHasTextOverlapRef = useRef12(false);
|
|
20984
|
+
const dragOverElRef = useRef12(null);
|
|
20985
|
+
const [mediaHover, setMediaHover] = useState16(null);
|
|
20986
|
+
const [selectedAiSectionId, setSelectedAiSectionId] = useState16(null);
|
|
20987
|
+
const selectedAiSectionIdRef = useRef12(null);
|
|
20988
|
+
const handleAiSectionSelectionChange = useCallback10((id) => {
|
|
21627
20989
|
selectedAiSectionIdRef.current = id;
|
|
21628
20990
|
setSelectedAiSectionId(id);
|
|
21629
20991
|
}, []);
|
|
21630
|
-
const [selectedMedia, setSelectedMedia] =
|
|
21631
|
-
const selectedMediaElRef =
|
|
21632
|
-
const mediaKeyDropTokenRef =
|
|
21633
|
-
const clearMediaSelection =
|
|
20992
|
+
const [selectedMedia, setSelectedMedia] = useState16(null);
|
|
20993
|
+
const selectedMediaElRef = useRef12(null);
|
|
20994
|
+
const mediaKeyDropTokenRef = useRef12(0);
|
|
20995
|
+
const clearMediaSelection = useCallback10(() => {
|
|
21634
20996
|
const prev = selectedMediaElRef.current;
|
|
21635
20997
|
selectedMediaElRef.current = null;
|
|
21636
20998
|
setSelectedMedia(null);
|
|
@@ -21655,9 +21017,9 @@ function OhhwellsBridge() {
|
|
|
21655
21017
|
window.postMessage({ type: "ow:media-key-drop", token }, "*");
|
|
21656
21018
|
}
|
|
21657
21019
|
}, []);
|
|
21658
|
-
const clearMediaSelectionRef =
|
|
21020
|
+
const clearMediaSelectionRef = useRef12(clearMediaSelection);
|
|
21659
21021
|
clearMediaSelectionRef.current = clearMediaSelection;
|
|
21660
|
-
const selectMediaElement =
|
|
21022
|
+
const selectMediaElement = useCallback10((el) => {
|
|
21661
21023
|
const r2 = el.getBoundingClientRect();
|
|
21662
21024
|
const video = el.dataset.ohwEditable === "video" ? el.querySelector("video") : null;
|
|
21663
21025
|
selectedMediaElRef.current = el;
|
|
@@ -21681,9 +21043,9 @@ function OhhwellsBridge() {
|
|
|
21681
21043
|
keyLabel: el.dataset.ohwEditable === "video" ? "Video" : el.dataset.ohwEditable === "bg-image" ? "Background" : "Image"
|
|
21682
21044
|
});
|
|
21683
21045
|
}, []);
|
|
21684
|
-
const selectMediaElementRef =
|
|
21046
|
+
const selectMediaElementRef = useRef12(selectMediaElement);
|
|
21685
21047
|
selectMediaElementRef.current = selectMediaElement;
|
|
21686
|
-
|
|
21048
|
+
useEffect15(() => {
|
|
21687
21049
|
if (!selectedMedia) return;
|
|
21688
21050
|
const update = () => {
|
|
21689
21051
|
const el = selectedMediaElRef.current;
|
|
@@ -21703,54 +21065,54 @@ function OhhwellsBridge() {
|
|
|
21703
21065
|
window.removeEventListener("resize", update);
|
|
21704
21066
|
};
|
|
21705
21067
|
}, [selectedMedia !== null]);
|
|
21706
|
-
const [carouselHover, setCarouselHover] =
|
|
21707
|
-
const [uploadingRects, setUploadingRects] =
|
|
21708
|
-
const hoveredGapRef =
|
|
21709
|
-
const imageUnhoverTimerRef =
|
|
21710
|
-
const imageShowTimerRef =
|
|
21711
|
-
const editStylesRef =
|
|
21712
|
-
const activateRef =
|
|
21068
|
+
const [carouselHover, setCarouselHover] = useState16(null);
|
|
21069
|
+
const [uploadingRects, setUploadingRects] = useState16({});
|
|
21070
|
+
const hoveredGapRef = useRef12(null);
|
|
21071
|
+
const imageUnhoverTimerRef = useRef12(null);
|
|
21072
|
+
const imageShowTimerRef = useRef12(null);
|
|
21073
|
+
const editStylesRef = useRef12(null);
|
|
21074
|
+
const activateRef = useRef12(() => {
|
|
21713
21075
|
});
|
|
21714
|
-
const deactivateRef =
|
|
21076
|
+
const deactivateRef = useRef12(() => {
|
|
21715
21077
|
});
|
|
21716
|
-
const selectRef =
|
|
21078
|
+
const selectRef = useRef12(() => {
|
|
21717
21079
|
});
|
|
21718
|
-
const selectFrameRef =
|
|
21080
|
+
const selectFrameRef = useRef12(() => {
|
|
21719
21081
|
});
|
|
21720
|
-
const selectLogoRef =
|
|
21082
|
+
const selectLogoRef = useRef12(() => {
|
|
21721
21083
|
});
|
|
21722
|
-
const openLogoSizePanelRef =
|
|
21084
|
+
const openLogoSizePanelRef = useRef12(() => {
|
|
21723
21085
|
});
|
|
21724
|
-
const deselectRef =
|
|
21086
|
+
const deselectRef = useRef12(() => {
|
|
21725
21087
|
});
|
|
21726
|
-
const closeFloatingPanelOnlyRef =
|
|
21088
|
+
const closeFloatingPanelOnlyRef = useRef12(() => {
|
|
21727
21089
|
});
|
|
21728
|
-
const reselectNavigationItemRef =
|
|
21090
|
+
const reselectNavigationItemRef = useRef12(() => {
|
|
21729
21091
|
});
|
|
21730
|
-
const commitNavigationTextEditRef =
|
|
21092
|
+
const commitNavigationTextEditRef = useRef12(() => {
|
|
21731
21093
|
});
|
|
21732
|
-
const handleDeleteSelectedRef =
|
|
21733
|
-
const runPendingDeleteUndoRef =
|
|
21734
|
-
const isFooterFrameSelectionRef =
|
|
21735
|
-
const refreshActiveCommandsRef =
|
|
21094
|
+
const handleDeleteSelectedRef = useRef12(() => false);
|
|
21095
|
+
const runPendingDeleteUndoRef = useRef12(() => false);
|
|
21096
|
+
const isFooterFrameSelectionRef = useRef12(false);
|
|
21097
|
+
const refreshActiveCommandsRef = useRef12(() => {
|
|
21736
21098
|
});
|
|
21737
|
-
const postToParentRef =
|
|
21099
|
+
const postToParentRef = useRef12(postToParent2);
|
|
21738
21100
|
postToParentRef.current = postToParent2;
|
|
21739
|
-
const aiSectionApiRef =
|
|
21740
|
-
const sectionsLoadedRef =
|
|
21741
|
-
const pendingScheduleConfigRequests =
|
|
21742
|
-
const [toolbarRect, setToolbarRect] =
|
|
21743
|
-
const [formPickRect, setFormPickRect] =
|
|
21744
|
-
const formPickElRef =
|
|
21745
|
-
const [formViewState, setFormViewStateUi] =
|
|
21746
|
-
const [formPickCount, setFormPickCount] =
|
|
21747
|
-
const [formHoverRect, setFormHoverRect] =
|
|
21748
|
-
const formHoverElRef =
|
|
21749
|
-
const [fieldPickRect, setFieldPickRect] =
|
|
21750
|
-
const fieldPickElRef =
|
|
21751
|
-
const [fieldPickState, setFieldPickState] =
|
|
21752
|
-
const [fieldTypePickerOpen, setFieldTypePickerOpen] =
|
|
21753
|
-
const clearFormPick =
|
|
21101
|
+
const aiSectionApiRef = useRef12(null);
|
|
21102
|
+
const sectionsLoadedRef = useRef12(false);
|
|
21103
|
+
const pendingScheduleConfigRequests = useRef12([]);
|
|
21104
|
+
const [toolbarRect, setToolbarRect] = useState16(null);
|
|
21105
|
+
const [formPickRect, setFormPickRect] = useState16(null);
|
|
21106
|
+
const formPickElRef = useRef12(null);
|
|
21107
|
+
const [formViewState, setFormViewStateUi] = useState16("default");
|
|
21108
|
+
const [formPickCount, setFormPickCount] = useState16(null);
|
|
21109
|
+
const [formHoverRect, setFormHoverRect] = useState16(null);
|
|
21110
|
+
const formHoverElRef = useRef12(null);
|
|
21111
|
+
const [fieldPickRect, setFieldPickRect] = useState16(null);
|
|
21112
|
+
const fieldPickElRef = useRef12(null);
|
|
21113
|
+
const [fieldPickState, setFieldPickState] = useState16(null);
|
|
21114
|
+
const [fieldTypePickerOpen, setFieldTypePickerOpen] = useState16(false);
|
|
21115
|
+
const clearFormPick = useCallback10(() => {
|
|
21754
21116
|
const form = formPickElRef.current;
|
|
21755
21117
|
const editing = fieldPickElRef.current;
|
|
21756
21118
|
if (commitPlaceholderEdit(editing) && editing) {
|
|
@@ -21770,7 +21132,7 @@ function OhhwellsBridge() {
|
|
|
21770
21132
|
formPickElRef.current = null;
|
|
21771
21133
|
setFormPickRect(null);
|
|
21772
21134
|
}, []);
|
|
21773
|
-
const clearFieldPick =
|
|
21135
|
+
const clearFieldPick = useCallback10(() => {
|
|
21774
21136
|
const wrapper = fieldPickElRef.current;
|
|
21775
21137
|
if (commitPlaceholderEdit(wrapper) && wrapper) {
|
|
21776
21138
|
const form = wrapper.closest('[data-ohw-editable="form"]');
|
|
@@ -21780,9 +21142,9 @@ function OhhwellsBridge() {
|
|
|
21780
21142
|
setFieldPickRect(null);
|
|
21781
21143
|
setFieldPickState(null);
|
|
21782
21144
|
}, []);
|
|
21783
|
-
const persistFieldsRef =
|
|
21145
|
+
const persistFieldsRef = useRef12(() => {
|
|
21784
21146
|
});
|
|
21785
|
-
const persistFields =
|
|
21147
|
+
const persistFields = useCallback10(
|
|
21786
21148
|
(form) => {
|
|
21787
21149
|
const key = formKeyOf(form);
|
|
21788
21150
|
if (!key) return;
|
|
@@ -21793,7 +21155,7 @@ function OhhwellsBridge() {
|
|
|
21793
21155
|
[]
|
|
21794
21156
|
);
|
|
21795
21157
|
persistFieldsRef.current = persistFields;
|
|
21796
|
-
const selectField =
|
|
21158
|
+
const selectField = useCallback10((wrapper) => {
|
|
21797
21159
|
if (fieldPickElRef.current && fieldPickElRef.current !== wrapper) {
|
|
21798
21160
|
commitPlaceholderEdit(fieldPickElRef.current);
|
|
21799
21161
|
}
|
|
@@ -21806,7 +21168,7 @@ function OhhwellsBridge() {
|
|
|
21806
21168
|
setFieldPickState({ type: fieldTypeOf(wrapper), required: isFieldRequired(wrapper) });
|
|
21807
21169
|
setFieldTypePickerOpen(false);
|
|
21808
21170
|
}, []);
|
|
21809
|
-
const withSelectedField =
|
|
21171
|
+
const withSelectedField = useCallback10(
|
|
21810
21172
|
(run) => {
|
|
21811
21173
|
const wrapper = fieldPickElRef.current;
|
|
21812
21174
|
const form = formPickElRef.current;
|
|
@@ -21819,28 +21181,28 @@ function OhhwellsBridge() {
|
|
|
21819
21181
|
},
|
|
21820
21182
|
[persistFields]
|
|
21821
21183
|
);
|
|
21822
|
-
const handleFieldTypeChange =
|
|
21184
|
+
const handleFieldTypeChange = useCallback10(
|
|
21823
21185
|
(type) => withSelectedField((_form, wrapper) => {
|
|
21824
21186
|
applyFieldType(wrapper, type);
|
|
21825
21187
|
selectField(wrapper);
|
|
21826
21188
|
}),
|
|
21827
21189
|
[selectField, withSelectedField]
|
|
21828
21190
|
);
|
|
21829
|
-
const handleFieldRequiredToggle =
|
|
21191
|
+
const handleFieldRequiredToggle = useCallback10(
|
|
21830
21192
|
() => withSelectedField((_form, wrapper) => {
|
|
21831
21193
|
setFieldRequired(wrapper, !isFieldRequired(wrapper));
|
|
21832
21194
|
selectField(wrapper);
|
|
21833
21195
|
}),
|
|
21834
21196
|
[selectField, withSelectedField]
|
|
21835
21197
|
);
|
|
21836
|
-
const handleFieldDuplicate =
|
|
21198
|
+
const handleFieldDuplicate = useCallback10(
|
|
21837
21199
|
() => withSelectedField((form, wrapper) => {
|
|
21838
21200
|
const copy = duplicateField(form, wrapper);
|
|
21839
21201
|
selectField(copy);
|
|
21840
21202
|
}),
|
|
21841
21203
|
[selectField, withSelectedField]
|
|
21842
21204
|
);
|
|
21843
|
-
const handleFieldDelete =
|
|
21205
|
+
const handleFieldDelete = useCallback10(
|
|
21844
21206
|
() => withSelectedField((_form, wrapper) => {
|
|
21845
21207
|
removeField(wrapper);
|
|
21846
21208
|
clearFieldPick();
|
|
@@ -21848,7 +21210,7 @@ function OhhwellsBridge() {
|
|
|
21848
21210
|
}),
|
|
21849
21211
|
[clearFieldPick, withSelectedField]
|
|
21850
21212
|
);
|
|
21851
|
-
const handleAddField =
|
|
21213
|
+
const handleAddField = useCallback10(
|
|
21852
21214
|
(type) => {
|
|
21853
21215
|
const form = formPickElRef.current;
|
|
21854
21216
|
if (!form) return;
|
|
@@ -21864,8 +21226,8 @@ function OhhwellsBridge() {
|
|
|
21864
21226
|
},
|
|
21865
21227
|
[persistFields, selectField]
|
|
21866
21228
|
);
|
|
21867
|
-
const fieldDragRef =
|
|
21868
|
-
const buildFieldDropSlots =
|
|
21229
|
+
const fieldDragRef = useRef12(null);
|
|
21230
|
+
const buildFieldDropSlots = useCallback10((form, draggedKey) => {
|
|
21869
21231
|
const others = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== draggedKey);
|
|
21870
21232
|
const slots = others.map((el) => {
|
|
21871
21233
|
const rect = el.getBoundingClientRect();
|
|
@@ -21878,7 +21240,7 @@ function OhhwellsBridge() {
|
|
|
21878
21240
|
}
|
|
21879
21241
|
return slots;
|
|
21880
21242
|
}, []);
|
|
21881
|
-
const handleFieldDragStart =
|
|
21243
|
+
const handleFieldDragStart = useCallback10(() => {
|
|
21882
21244
|
const wrapper = fieldPickElRef.current;
|
|
21883
21245
|
const form = formPickElRef.current;
|
|
21884
21246
|
if (!wrapper || !form) return;
|
|
@@ -21887,18 +21249,18 @@ function OhhwellsBridge() {
|
|
|
21887
21249
|
setFieldDragging(true);
|
|
21888
21250
|
setFieldDropSlots(buildFieldDropSlots(form, key));
|
|
21889
21251
|
}, [buildFieldDropSlots]);
|
|
21890
|
-
const handleFieldDragEnd =
|
|
21252
|
+
const handleFieldDragEnd = useCallback10(() => {
|
|
21891
21253
|
fieldDragRef.current = null;
|
|
21892
21254
|
setFieldDropIndex(null);
|
|
21893
21255
|
setFieldDropSlots([]);
|
|
21894
21256
|
setFieldDragging(false);
|
|
21895
21257
|
}, []);
|
|
21896
|
-
const [fieldDropIndex, setFieldDropIndex] =
|
|
21897
|
-
const [fieldDropSlots, setFieldDropSlots] =
|
|
21898
|
-
const [fieldDragging, setFieldDragging] =
|
|
21899
|
-
const clearFormPickRef =
|
|
21258
|
+
const [fieldDropIndex, setFieldDropIndex] = useState16(null);
|
|
21259
|
+
const [fieldDropSlots, setFieldDropSlots] = useState16([]);
|
|
21260
|
+
const [fieldDragging, setFieldDragging] = useState16(false);
|
|
21261
|
+
const clearFormPickRef = useRef12(clearFormPick);
|
|
21900
21262
|
clearFormPickRef.current = clearFormPick;
|
|
21901
|
-
|
|
21263
|
+
useEffect15(() => {
|
|
21902
21264
|
const el = fieldPickElRef.current;
|
|
21903
21265
|
if (!el || fieldPickRect === null) return;
|
|
21904
21266
|
const observer = new ResizeObserver(() => {
|
|
@@ -21907,7 +21269,7 @@ function OhhwellsBridge() {
|
|
|
21907
21269
|
observer.observe(el);
|
|
21908
21270
|
return () => observer.disconnect();
|
|
21909
21271
|
}, [fieldPickRect !== null, fieldPickState]);
|
|
21910
|
-
|
|
21272
|
+
useEffect15(() => {
|
|
21911
21273
|
const el = formPickElRef.current;
|
|
21912
21274
|
if (!el || formPickRect === null) return;
|
|
21913
21275
|
const observer = new ResizeObserver(() => {
|
|
@@ -21916,25 +21278,25 @@ function OhhwellsBridge() {
|
|
|
21916
21278
|
observer.observe(el);
|
|
21917
21279
|
return () => observer.disconnect();
|
|
21918
21280
|
}, [formPickRect !== null, formViewState]);
|
|
21919
|
-
const [toolbarVariant, setToolbarVariant] =
|
|
21920
|
-
const toolbarVariantRef =
|
|
21281
|
+
const [toolbarVariant, setToolbarVariant] = useState16("none");
|
|
21282
|
+
const toolbarVariantRef = useRef12("none");
|
|
21921
21283
|
toolbarVariantRef.current = toolbarVariant;
|
|
21922
|
-
const [selectedIsCta, setSelectedIsCta] =
|
|
21923
|
-
const [selectedIsSocial, setSelectedIsSocial] =
|
|
21924
|
-
const [selectedIsSocialsRow, setSelectedIsSocialsRow] =
|
|
21925
|
-
const [reorderHrefKey, setReorderHrefKey] =
|
|
21926
|
-
const [reorderDragDisabled, setReorderDragDisabled] =
|
|
21927
|
-
const [toggleState, setToggleState] =
|
|
21928
|
-
const [maxBadge, setMaxBadge] =
|
|
21929
|
-
const [activeCommands, setActiveCommands] =
|
|
21930
|
-
const [sectionGap, setSectionGap] =
|
|
21931
|
-
const [toolbarShowEditLink, setToolbarShowEditLink] =
|
|
21932
|
-
const hoveredNavContainerRef =
|
|
21933
|
-
const [hoveredNavContainerRect, setHoveredNavContainerRect] =
|
|
21934
|
-
const hoveredItemElRef =
|
|
21935
|
-
const [hoveredItemRect, setHoveredItemRect] =
|
|
21936
|
-
const [hoveredTextRect, setHoveredTextRect] =
|
|
21937
|
-
|
|
21284
|
+
const [selectedIsCta, setSelectedIsCta] = useState16(false);
|
|
21285
|
+
const [selectedIsSocial, setSelectedIsSocial] = useState16(false);
|
|
21286
|
+
const [selectedIsSocialsRow, setSelectedIsSocialsRow] = useState16(false);
|
|
21287
|
+
const [reorderHrefKey, setReorderHrefKey] = useState16(null);
|
|
21288
|
+
const [reorderDragDisabled, setReorderDragDisabled] = useState16(false);
|
|
21289
|
+
const [toggleState, setToggleState] = useState16(null);
|
|
21290
|
+
const [maxBadge, setMaxBadge] = useState16(null);
|
|
21291
|
+
const [activeCommands, setActiveCommands] = useState16(/* @__PURE__ */ new Set());
|
|
21292
|
+
const [sectionGap, setSectionGap] = useState16(null);
|
|
21293
|
+
const [toolbarShowEditLink, setToolbarShowEditLink] = useState16(false);
|
|
21294
|
+
const hoveredNavContainerRef = useRef12(null);
|
|
21295
|
+
const [hoveredNavContainerRect, setHoveredNavContainerRect] = useState16(null);
|
|
21296
|
+
const hoveredItemElRef = useRef12(null);
|
|
21297
|
+
const [hoveredItemRect, setHoveredItemRect] = useState16(null);
|
|
21298
|
+
const [hoveredTextRect, setHoveredTextRect] = useState16(null);
|
|
21299
|
+
useEffect15(() => {
|
|
21938
21300
|
const sync = () => {
|
|
21939
21301
|
const el = document.querySelector(
|
|
21940
21302
|
'[data-ohw-hovered]:not([contenteditable]):not([data-ohw-href-key]):not([data-ohw-editable="form"] *)'
|
|
@@ -21978,71 +21340,60 @@ function OhhwellsBridge() {
|
|
|
21978
21340
|
});
|
|
21979
21341
|
return () => observer.disconnect();
|
|
21980
21342
|
}, []);
|
|
21981
|
-
const siblingHintElRef =
|
|
21982
|
-
const [siblingHintRect, setSiblingHintRect] =
|
|
21983
|
-
const [siblingHintRects, setSiblingHintRects] =
|
|
21984
|
-
const [isItemDragging, setIsItemDragging] =
|
|
21985
|
-
const [isFooterFrameSelection, setIsFooterFrameSelection] =
|
|
21343
|
+
const siblingHintElRef = useRef12(null);
|
|
21344
|
+
const [siblingHintRect, setSiblingHintRect] = useState16(null);
|
|
21345
|
+
const [siblingHintRects, setSiblingHintRects] = useState16([]);
|
|
21346
|
+
const [isItemDragging, setIsItemDragging] = useState16(false);
|
|
21347
|
+
const [isFooterFrameSelection, setIsFooterFrameSelection] = useState16(false);
|
|
21986
21348
|
isFooterFrameSelectionRef.current = isFooterFrameSelection;
|
|
21987
|
-
const [
|
|
21988
|
-
const
|
|
21989
|
-
|
|
21990
|
-
const
|
|
21991
|
-
|
|
21992
|
-
const [
|
|
21993
|
-
const
|
|
21994
|
-
const
|
|
21995
|
-
const
|
|
21996
|
-
const [
|
|
21997
|
-
const
|
|
21998
|
-
const
|
|
21999
|
-
const
|
|
22000
|
-
const
|
|
22001
|
-
const
|
|
21349
|
+
const [floatingPanel, setFloatingPanel] = useState16(null);
|
|
21350
|
+
const floatingPanelOpenRef = useRef12(false);
|
|
21351
|
+
floatingPanelOpenRef.current = floatingPanel !== null;
|
|
21352
|
+
const floatingPanelRef = useRef12(null);
|
|
21353
|
+
floatingPanelRef.current = floatingPanel;
|
|
21354
|
+
const [floatingPanelPos, setFloatingPanelPos] = useState16(null);
|
|
21355
|
+
const buttonCollectionDragRef = useRef12(null);
|
|
21356
|
+
const buttonDropInsertIndexRef = useRef12(null);
|
|
21357
|
+
const [buttonDropSlots, setButtonDropSlots] = useState16([]);
|
|
21358
|
+
const [activeButtonDropIndex, setActiveButtonDropIndex] = useState16(null);
|
|
21359
|
+
const buttonPointerDragRef = useRef12(null);
|
|
21360
|
+
const [buttonStyleTick, setButtonStyleTick] = useState16(0);
|
|
21361
|
+
const [logoSizeDraft, setLogoSizeDraft] = useState16(null);
|
|
21362
|
+
const [editorViewport, setEditorViewport] = useState16("desktop");
|
|
21363
|
+
const [parentScrollSnap, setParentScrollSnap] = useState16(null);
|
|
21364
|
+
const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = useState16(null);
|
|
21365
|
+
const [footerHeadingVisible, setFooterHeadingVisible] = useState16(null);
|
|
21366
|
+
const footerDragRef = useRef12(null);
|
|
21367
|
+
const [footerDropSlots, setFooterDropSlots] = useState16([]);
|
|
21368
|
+
const [activeFooterDropIndex, setActiveFooterDropIndex] = useState16(null);
|
|
21369
|
+
const [draggedItemRect, setDraggedItemRect] = useState16(null);
|
|
21370
|
+
const footerPointerDragRef = useRef12(null);
|
|
21371
|
+
const suppressNextClickRef = useRef12(false);
|
|
21372
|
+
const suppressClickUntilRef = useRef12(0);
|
|
21373
|
+
const [linkPopover, setLinkPopover] = useState16(null);
|
|
21374
|
+
const linkPopoverSessionRef = useRef12(null);
|
|
21375
|
+
const addNavAfterAnchorRef = useRef12(null);
|
|
21376
|
+
const editContentRef = useRef12({});
|
|
21377
|
+
const aiSectionsRef = useRef12("");
|
|
21378
|
+
const applyTreeLocalRef = useRef12(
|
|
22002
21379
|
null
|
|
22003
21380
|
);
|
|
22004
|
-
const clearInteractionChromeRef =
|
|
21381
|
+
const clearInteractionChromeRef = useRef12(() => {
|
|
22005
21382
|
});
|
|
22006
|
-
const brandKitRef =
|
|
22007
|
-
const stylesRef =
|
|
22008
|
-
const appliedDrawerRef =
|
|
22009
|
-
const pendingDeleteUndoRef =
|
|
22010
|
-
const [
|
|
22011
|
-
const
|
|
22012
|
-
const
|
|
22013
|
-
|
|
22014
|
-
const
|
|
22015
|
-
const
|
|
22016
|
-
const
|
|
22017
|
-
const buttonDropInsertIndexRef = useRef13(null);
|
|
22018
|
-
const [buttonDropSlots, setButtonDropSlots] = useState17([]);
|
|
22019
|
-
const [activeButtonDropIndex, setActiveButtonDropIndex] = useState17(null);
|
|
22020
|
-
const buttonPointerDragRef = useRef13(null);
|
|
22021
|
-
const [buttonStyleTick, setButtonStyleTick] = useState17(0);
|
|
22022
|
-
const [logoSizeDraft, setLogoSizeDraft] = useState17(null);
|
|
22023
|
-
const [editorViewport, setEditorViewport] = useState17("desktop");
|
|
22024
|
-
const [parentScrollSnap, setParentScrollSnap] = useState17(null);
|
|
22025
|
-
const [sitePages, setSitePages] = useState17([]);
|
|
22026
|
-
const [sectionsByPath, setSectionsByPath] = useState17({});
|
|
22027
|
-
const sectionsPrefetchGenRef = useRef13(0);
|
|
22028
|
-
const setLinkPopoverRef = useRef13(setLinkPopover);
|
|
22029
|
-
const linkPopoverPanelRef = useRef13(null);
|
|
22030
|
-
const linkPopoverOpenRef = useRef13(false);
|
|
22031
|
-
const linkPopoverGraceUntilRef = useRef13(0);
|
|
21383
|
+
const brandKitRef = useRef12("");
|
|
21384
|
+
const stylesRef = useRef12("");
|
|
21385
|
+
const appliedDrawerRef = useRef12(null);
|
|
21386
|
+
const pendingDeleteUndoRef = useRef12(null);
|
|
21387
|
+
const [sitePages, setSitePages] = useState16([]);
|
|
21388
|
+
const [sectionsByPath, setSectionsByPath] = useState16({});
|
|
21389
|
+
const sectionsPrefetchGenRef = useRef12(0);
|
|
21390
|
+
const setLinkPopoverRef = useRef12(setLinkPopover);
|
|
21391
|
+
const linkPopoverPanelRef = useRef12(null);
|
|
21392
|
+
const linkPopoverOpenRef = useRef12(false);
|
|
21393
|
+
const linkPopoverGraceUntilRef = useRef12(0);
|
|
22032
21394
|
setLinkPopoverRef.current = setLinkPopover;
|
|
22033
|
-
setFloatingPanelRef.current = setFloatingPanel;
|
|
22034
21395
|
linkPopoverSessionRef.current = linkPopover;
|
|
22035
|
-
|
|
22036
|
-
useEffect16(() => {
|
|
22037
|
-
const syncViewport = () => {
|
|
22038
|
-
const next = window.innerWidth <= 480 ? "mobile" : "desktop";
|
|
22039
|
-
setEditorViewport((prev) => prev === next ? prev : next);
|
|
22040
|
-
};
|
|
22041
|
-
syncViewport();
|
|
22042
|
-
window.addEventListener("resize", syncViewport);
|
|
22043
|
-
return () => window.removeEventListener("resize", syncViewport);
|
|
22044
|
-
}, []);
|
|
22045
|
-
useEffect16(() => {
|
|
21396
|
+
useEffect15(() => {
|
|
22046
21397
|
setSectionOrderPersistHandler((entries) => {
|
|
22047
21398
|
const currentPath = window.location.pathname;
|
|
22048
21399
|
const merged = mergePageSectionOrder(editContentRef.current[SECTION_ORDER_KEY], currentPath, entries);
|
|
@@ -22098,7 +21449,7 @@ function OhhwellsBridge() {
|
|
|
22098
21449
|
const bumpLinkPopoverGrace = () => {
|
|
22099
21450
|
linkPopoverGraceUntilRef.current = Date.now() + 350;
|
|
22100
21451
|
};
|
|
22101
|
-
const runSectionsPrefetch =
|
|
21452
|
+
const runSectionsPrefetch = useCallback10((pages) => {
|
|
22102
21453
|
if (!isEditMode || shouldUseDevFixtures() || pages.length === 0) return;
|
|
22103
21454
|
const gen = ++sectionsPrefetchGenRef.current;
|
|
22104
21455
|
const paths = pages.map((p) => p.path);
|
|
@@ -22117,9 +21468,9 @@ function OhhwellsBridge() {
|
|
|
22117
21468
|
);
|
|
22118
21469
|
});
|
|
22119
21470
|
}, [isEditMode, pathname]);
|
|
22120
|
-
const runSectionsPrefetchRef =
|
|
21471
|
+
const runSectionsPrefetchRef = useRef12(runSectionsPrefetch);
|
|
22121
21472
|
runSectionsPrefetchRef.current = runSectionsPrefetch;
|
|
22122
|
-
|
|
21473
|
+
useEffect15(() => {
|
|
22123
21474
|
if (!linkPopover) {
|
|
22124
21475
|
document.documentElement.removeAttribute("data-ohw-link-popover-open");
|
|
22125
21476
|
return;
|
|
@@ -22147,7 +21498,7 @@ function OhhwellsBridge() {
|
|
|
22147
21498
|
document.documentElement.removeAttribute("data-ohw-link-popover-open");
|
|
22148
21499
|
};
|
|
22149
21500
|
}, [linkPopover, postToParent2]);
|
|
22150
|
-
|
|
21501
|
+
useEffect15(() => {
|
|
22151
21502
|
if (!isEditMode) return;
|
|
22152
21503
|
const useFixtures = shouldUseDevFixtures();
|
|
22153
21504
|
if (useFixtures) {
|
|
@@ -22171,14 +21522,14 @@ function OhhwellsBridge() {
|
|
|
22171
21522
|
if (!useFixtures) postToParent2({ type: "ow:request-site-pages" });
|
|
22172
21523
|
return () => window.removeEventListener("message", onSitePages);
|
|
22173
21524
|
}, [isEditMode, postToParent2]);
|
|
22174
|
-
|
|
21525
|
+
useEffect15(() => {
|
|
22175
21526
|
if (!isEditMode || shouldUseDevFixtures()) return;
|
|
22176
21527
|
void loadAllSectionsManifest().then((manifest) => {
|
|
22177
21528
|
if (Object.keys(manifest).length === 0) return;
|
|
22178
21529
|
setSectionsByPath((prev) => ({ ...manifest, ...prev }));
|
|
22179
21530
|
});
|
|
22180
21531
|
}, [isEditMode]);
|
|
22181
|
-
|
|
21532
|
+
useEffect15(() => {
|
|
22182
21533
|
const update = () => {
|
|
22183
21534
|
const el = activeElRef.current ?? selectedElRef.current;
|
|
22184
21535
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
@@ -22202,10 +21553,10 @@ function OhhwellsBridge() {
|
|
|
22202
21553
|
vvp.removeEventListener("resize", update);
|
|
22203
21554
|
};
|
|
22204
21555
|
}, []);
|
|
22205
|
-
const refreshStateRules =
|
|
21556
|
+
const refreshStateRules = useCallback10(() => {
|
|
22206
21557
|
editStylesRef.current?.forceHover && (editStylesRef.current.forceHover.textContent = collectStateRules());
|
|
22207
21558
|
}, []);
|
|
22208
|
-
const processConfigRequest =
|
|
21559
|
+
const processConfigRequest = useCallback10((insertAfterVal) => {
|
|
22209
21560
|
const tracker = getSectionsTracker();
|
|
22210
21561
|
let entries = [];
|
|
22211
21562
|
try {
|
|
@@ -22228,7 +21579,7 @@ function OhhwellsBridge() {
|
|
|
22228
21579
|
}
|
|
22229
21580
|
window.postMessage({ type: "ow:schedule-config", insertAfter: insertAfterVal, scheduleId: null }, "*");
|
|
22230
21581
|
}, [isEditMode]);
|
|
22231
|
-
const deactivate =
|
|
21582
|
+
const deactivate = useCallback10(() => {
|
|
22232
21583
|
const el = activeElRef.current;
|
|
22233
21584
|
if (!el) return;
|
|
22234
21585
|
const isFormBlock = el.dataset.ohwEditable === "form";
|
|
@@ -22279,12 +21630,12 @@ function OhhwellsBridge() {
|
|
|
22279
21630
|
setToolbarShowEditLink(false);
|
|
22280
21631
|
postToParent2({ type: "ow:exit-edit" });
|
|
22281
21632
|
}, [postToParent2]);
|
|
22282
|
-
const clearSelectedAttr =
|
|
21633
|
+
const clearSelectedAttr = useCallback10(() => {
|
|
22283
21634
|
document.querySelectorAll("[data-ohw-selected]").forEach((el) => {
|
|
22284
21635
|
el.removeAttribute("data-ohw-selected");
|
|
22285
21636
|
});
|
|
22286
21637
|
}, []);
|
|
22287
|
-
const deselect =
|
|
21638
|
+
const deselect = useCallback10(() => {
|
|
22288
21639
|
const nestedGroup = selectedElRef.current?.closest("[data-ohw-nav-children]") != null ? selectedElRef.current.closest("[data-ohw-nav-group]") : null;
|
|
22289
21640
|
clearSelectedAttr();
|
|
22290
21641
|
selectedElRef.current = null;
|
|
@@ -22319,20 +21670,20 @@ function OhhwellsBridge() {
|
|
|
22319
21670
|
setToolbarVariant("none");
|
|
22320
21671
|
}
|
|
22321
21672
|
}, [clearSelectedAttr]);
|
|
22322
|
-
const markSelected =
|
|
21673
|
+
const markSelected = useCallback10((el) => {
|
|
22323
21674
|
clearSelectedAttr();
|
|
22324
21675
|
el.removeAttribute("data-ohw-hovered");
|
|
22325
21676
|
el.setAttribute("data-ohw-selected", "");
|
|
22326
21677
|
}, [clearSelectedAttr]);
|
|
22327
|
-
const isSelectedForHover =
|
|
21678
|
+
const isSelectedForHover = useCallback10((el) => {
|
|
22328
21679
|
if (!el) return false;
|
|
22329
21680
|
return [selectedElRef.current, activeElRef.current].some(
|
|
22330
21681
|
(busy) => busy && (el === busy || busy.contains(el) || el.contains(busy))
|
|
22331
21682
|
);
|
|
22332
21683
|
}, []);
|
|
22333
|
-
const isSelectedForHoverRef =
|
|
21684
|
+
const isSelectedForHoverRef = useRef12(isSelectedForHover);
|
|
22334
21685
|
isSelectedForHoverRef.current = isSelectedForHover;
|
|
22335
|
-
const resolveHrefKeyElement =
|
|
21686
|
+
const resolveHrefKeyElement = useCallback10((hrefKey) => {
|
|
22336
21687
|
if (isFooterHrefKey(hrefKey)) {
|
|
22337
21688
|
return document.querySelector(
|
|
22338
21689
|
`footer [data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
@@ -22347,7 +21698,7 @@ function OhhwellsBridge() {
|
|
|
22347
21698
|
`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
22348
21699
|
);
|
|
22349
21700
|
}, []);
|
|
22350
|
-
const resyncSelectedNavigationItem =
|
|
21701
|
+
const resyncSelectedNavigationItem = useCallback10(() => {
|
|
22351
21702
|
const hrefKey = selectedHrefKeyRef.current;
|
|
22352
21703
|
if (hrefKey) {
|
|
22353
21704
|
const link = resolveHrefKeyElement(hrefKey);
|
|
@@ -22385,7 +21736,7 @@ function OhhwellsBridge() {
|
|
|
22385
21736
|
);
|
|
22386
21737
|
}
|
|
22387
21738
|
}, [resolveHrefKeyElement]);
|
|
22388
|
-
const reselectNavigationItem =
|
|
21739
|
+
const reselectNavigationItem = useCallback10((navAnchor) => {
|
|
22389
21740
|
selectedElRef.current = navAnchor;
|
|
22390
21741
|
selectedHrefKeyRef.current = navAnchor.getAttribute("data-ohw-href-key");
|
|
22391
21742
|
selectedFooterColAttrRef.current = null;
|
|
@@ -22416,7 +21767,7 @@ function OhhwellsBridge() {
|
|
|
22416
21767
|
setToolbarShowEditLink(false);
|
|
22417
21768
|
setActiveCommands(/* @__PURE__ */ new Set());
|
|
22418
21769
|
}, [markSelected]);
|
|
22419
|
-
const commitNavigationTextEdit =
|
|
21770
|
+
const commitNavigationTextEdit = useCallback10((navAnchor) => {
|
|
22420
21771
|
const el = activeElRef.current;
|
|
22421
21772
|
if (!el) return;
|
|
22422
21773
|
const key = el.dataset.ohwKey;
|
|
@@ -22449,7 +21800,7 @@ function OhhwellsBridge() {
|
|
|
22449
21800
|
postToParent2({ type: "ow:exit-edit" });
|
|
22450
21801
|
reselectNavigationItem(navAnchor);
|
|
22451
21802
|
}, [postToParent2, reselectNavigationItem]);
|
|
22452
|
-
const handleAddTopLevelNavItem =
|
|
21803
|
+
const handleAddTopLevelNavItem = useCallback10(() => {
|
|
22453
21804
|
const items = listNavbarRootItems();
|
|
22454
21805
|
addNavAfterAnchorRef.current = items[items.length - 1] ?? null;
|
|
22455
21806
|
deselectRef.current();
|
|
@@ -22461,7 +21812,7 @@ function OhhwellsBridge() {
|
|
|
22461
21812
|
intent: "add-nav"
|
|
22462
21813
|
});
|
|
22463
21814
|
}, []);
|
|
22464
|
-
const maybeWarnNavLinkDropdownConflict =
|
|
21815
|
+
const maybeWarnNavLinkDropdownConflict = useCallback10(
|
|
22465
21816
|
(anchor) => {
|
|
22466
21817
|
if (!isNavbarHrefKey(anchor.getAttribute("data-ohw-href-key"))) return;
|
|
22467
21818
|
if (!navDropdownsOpenOnClick()) return;
|
|
@@ -22474,7 +21825,7 @@ function OhhwellsBridge() {
|
|
|
22474
21825
|
},
|
|
22475
21826
|
[postToParent2]
|
|
22476
21827
|
);
|
|
22477
|
-
const handleNavDropdownOpenChange =
|
|
21828
|
+
const handleNavDropdownOpenChange = useCallback10((open) => {
|
|
22478
21829
|
const selected = selectedElRef.current;
|
|
22479
21830
|
if (!selected || !isNavigationItem2(selected)) return;
|
|
22480
21831
|
if (isNestedNavChild(selected)) return;
|
|
@@ -22490,7 +21841,7 @@ function OhhwellsBridge() {
|
|
|
22490
21841
|
}
|
|
22491
21842
|
});
|
|
22492
21843
|
}, []);
|
|
22493
|
-
const handleFooterHeadingVisibleChange =
|
|
21844
|
+
const handleFooterHeadingVisibleChange = useCallback10(
|
|
22494
21845
|
(visible) => {
|
|
22495
21846
|
const selected = selectedElRef.current;
|
|
22496
21847
|
if (!selected || !isFooterFrameSelectionRef.current) return;
|
|
@@ -22514,7 +21865,7 @@ function OhhwellsBridge() {
|
|
|
22514
21865
|
},
|
|
22515
21866
|
[postToParent2]
|
|
22516
21867
|
);
|
|
22517
|
-
const enterEditOnNewItem =
|
|
21868
|
+
const enterEditOnNewItem = useCallback10((anchor) => {
|
|
22518
21869
|
const label = anchor.querySelector('[data-ohw-editable="text"]');
|
|
22519
21870
|
if (!label) {
|
|
22520
21871
|
selectRef.current(anchor);
|
|
@@ -22523,8 +21874,8 @@ function OhhwellsBridge() {
|
|
|
22523
21874
|
setNavGroupForceOpen(anchor, true);
|
|
22524
21875
|
activateRef.current(label);
|
|
22525
21876
|
}, []);
|
|
22526
|
-
const pendingSocialAddRef =
|
|
22527
|
-
const handleAddChildItem =
|
|
21877
|
+
const pendingSocialAddRef = useRef12(null);
|
|
21878
|
+
const handleAddChildItem = useCallback10(() => {
|
|
22528
21879
|
const selected = selectedElRef.current;
|
|
22529
21880
|
if (!selected) return;
|
|
22530
21881
|
const socialsRow = isSocialsRow(selected) ? selected : findSocialsRow(selected);
|
|
@@ -22635,7 +21986,7 @@ function OhhwellsBridge() {
|
|
|
22635
21986
|
});
|
|
22636
21987
|
});
|
|
22637
21988
|
}, [enterEditOnNewItem, isFooterFrameSelection, maybeWarnNavLinkDropdownConflict, postToParent2]);
|
|
22638
|
-
const handleAddFooterColumn =
|
|
21989
|
+
const handleAddFooterColumn = useCallback10(() => {
|
|
22639
21990
|
if (!canAddFooterColumn()) {
|
|
22640
21991
|
postToParent2({
|
|
22641
21992
|
type: "ow:toast",
|
|
@@ -22656,7 +22007,7 @@ function OhhwellsBridge() {
|
|
|
22656
22007
|
selectRef.current(result.firstLink);
|
|
22657
22008
|
});
|
|
22658
22009
|
}, [postToParent2]);
|
|
22659
|
-
const clearFooterDragVisuals =
|
|
22010
|
+
const clearFooterDragVisuals = useCallback10(() => {
|
|
22660
22011
|
footerDragRef.current = null;
|
|
22661
22012
|
setSiblingHintRects([]);
|
|
22662
22013
|
setFooterDropSlots([]);
|
|
@@ -22665,7 +22016,7 @@ function OhhwellsBridge() {
|
|
|
22665
22016
|
setIsItemDragging(false);
|
|
22666
22017
|
unlockFooterDragInteraction();
|
|
22667
22018
|
}, []);
|
|
22668
|
-
const refreshFooterDragVisuals =
|
|
22019
|
+
const refreshFooterDragVisuals = useCallback10((session, activeSlot, clientX, clientY) => {
|
|
22669
22020
|
const dragged = session.draggedEl;
|
|
22670
22021
|
setDraggedItemRect(dragged.getBoundingClientRect());
|
|
22671
22022
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -22697,13 +22048,13 @@ function OhhwellsBridge() {
|
|
|
22697
22048
|
const activeIdx = activeSlot ? slots.findIndex((s) => s.insertIndex === activeSlot.insertIndex) : -1;
|
|
22698
22049
|
setActiveFooterDropIndex(activeIdx >= 0 ? activeIdx : null);
|
|
22699
22050
|
}, []);
|
|
22700
|
-
const refreshFooterDragVisualsRef =
|
|
22051
|
+
const refreshFooterDragVisualsRef = useRef12(refreshFooterDragVisuals);
|
|
22701
22052
|
refreshFooterDragVisualsRef.current = refreshFooterDragVisuals;
|
|
22702
|
-
const commitFooterDragRef =
|
|
22053
|
+
const commitFooterDragRef = useRef12(() => {
|
|
22703
22054
|
});
|
|
22704
|
-
const beginFooterDragRef =
|
|
22055
|
+
const beginFooterDragRef = useRef12(() => {
|
|
22705
22056
|
});
|
|
22706
|
-
const beginFooterDrag =
|
|
22057
|
+
const beginFooterDrag = useCallback10(
|
|
22707
22058
|
(session) => {
|
|
22708
22059
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
22709
22060
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -22723,7 +22074,7 @@ function OhhwellsBridge() {
|
|
|
22723
22074
|
[refreshFooterDragVisuals]
|
|
22724
22075
|
);
|
|
22725
22076
|
beginFooterDragRef.current = beginFooterDrag;
|
|
22726
|
-
const commitFooterDrag =
|
|
22077
|
+
const commitFooterDrag = useCallback10(
|
|
22727
22078
|
(clientX, clientY) => {
|
|
22728
22079
|
const session = footerDragRef.current;
|
|
22729
22080
|
if (!session) {
|
|
@@ -22852,7 +22203,7 @@ function OhhwellsBridge() {
|
|
|
22852
22203
|
[clearFooterDragVisuals, resolveHrefKeyElement, resyncSelectedNavigationItem]
|
|
22853
22204
|
);
|
|
22854
22205
|
commitFooterDragRef.current = commitFooterDrag;
|
|
22855
|
-
const startFooterLinkDrag =
|
|
22206
|
+
const startFooterLinkDrag = useCallback10(
|
|
22856
22207
|
(anchor, clientX, clientY, wasSelected) => {
|
|
22857
22208
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
22858
22209
|
if (!hrefKey) return false;
|
|
@@ -22888,7 +22239,7 @@ function OhhwellsBridge() {
|
|
|
22888
22239
|
},
|
|
22889
22240
|
[beginFooterDrag]
|
|
22890
22241
|
);
|
|
22891
|
-
const startFooterColumnDrag =
|
|
22242
|
+
const startFooterColumnDrag = useCallback10(
|
|
22892
22243
|
(columnEl, clientX, clientY, wasSelected) => {
|
|
22893
22244
|
const columns = listFooterColumns();
|
|
22894
22245
|
const idx = columns.indexOf(columnEl);
|
|
@@ -22908,7 +22259,7 @@ function OhhwellsBridge() {
|
|
|
22908
22259
|
},
|
|
22909
22260
|
[beginFooterDrag]
|
|
22910
22261
|
);
|
|
22911
|
-
const persistButtonCollectionDrag =
|
|
22262
|
+
const persistButtonCollectionDrag = useCallback10(
|
|
22912
22263
|
(button, clientX) => {
|
|
22913
22264
|
const insertIndex = buttonDropInsertIndexRef.current;
|
|
22914
22265
|
if (insertIndex != null) insertButtonAtCollectionIndex(button, insertIndex);
|
|
@@ -22932,7 +22283,7 @@ function OhhwellsBridge() {
|
|
|
22932
22283
|
},
|
|
22933
22284
|
[postToParent2]
|
|
22934
22285
|
);
|
|
22935
|
-
const refreshButtonDragVisuals =
|
|
22286
|
+
const refreshButtonDragVisuals = useCallback10((button, clientX, clientY) => {
|
|
22936
22287
|
const collection = buttonCollectionOf(button);
|
|
22937
22288
|
if (!collection) {
|
|
22938
22289
|
setButtonDropSlots([]);
|
|
@@ -22949,7 +22300,7 @@ function OhhwellsBridge() {
|
|
|
22949
22300
|
setDraggedItemRect(button.getBoundingClientRect());
|
|
22950
22301
|
if (selectedElRef.current === button) setToolbarRect(button.getBoundingClientRect());
|
|
22951
22302
|
}, []);
|
|
22952
|
-
const handleItemDragStart =
|
|
22303
|
+
const handleItemDragStart = useCallback10(
|
|
22953
22304
|
(e) => {
|
|
22954
22305
|
const selected = selectedElRef.current;
|
|
22955
22306
|
if (!selected) {
|
|
@@ -22980,7 +22331,7 @@ function OhhwellsBridge() {
|
|
|
22980
22331
|
},
|
|
22981
22332
|
[startFooterColumnDrag, startFooterLinkDrag, startNavLinkDrag, refreshButtonDragVisuals]
|
|
22982
22333
|
);
|
|
22983
|
-
const handleItemDragEnd =
|
|
22334
|
+
const handleItemDragEnd = useCallback10(
|
|
22984
22335
|
(e) => {
|
|
22985
22336
|
const collectionButton = buttonCollectionDragRef.current;
|
|
22986
22337
|
if (collectionButton) {
|
|
@@ -23011,7 +22362,7 @@ function OhhwellsBridge() {
|
|
|
23011
22362
|
},
|
|
23012
22363
|
[commitFooterDrag, commitNavDrag, navDragRef, persistButtonCollectionDrag]
|
|
23013
22364
|
);
|
|
23014
|
-
const handleItemChromePointerDown =
|
|
22365
|
+
const handleItemChromePointerDown = useCallback10((e) => {
|
|
23015
22366
|
if (e.button !== 0) return;
|
|
23016
22367
|
const selected = selectedElRef.current;
|
|
23017
22368
|
if (!selected) return;
|
|
@@ -23052,7 +22403,7 @@ function OhhwellsBridge() {
|
|
|
23052
22403
|
}
|
|
23053
22404
|
if (armNavPressFromChrome(selected, e.clientX, e.clientY, e.pointerId)) return;
|
|
23054
22405
|
}, [armNavPressFromChrome]);
|
|
23055
|
-
const handleItemChromeClick =
|
|
22406
|
+
const handleItemChromeClick = useCallback10((clientX, clientY) => {
|
|
23056
22407
|
if (suppressNextClickRef.current || Date.now() < suppressClickUntilRef.current) {
|
|
23057
22408
|
suppressNextClickRef.current = false;
|
|
23058
22409
|
return;
|
|
@@ -23065,7 +22416,7 @@ function OhhwellsBridge() {
|
|
|
23065
22416
|
}, []);
|
|
23066
22417
|
reselectNavigationItemRef.current = reselectNavigationItem;
|
|
23067
22418
|
commitNavigationTextEditRef.current = commitNavigationTextEdit;
|
|
23068
|
-
const select =
|
|
22419
|
+
const select = useCallback10((anchor) => {
|
|
23069
22420
|
if (!isNavigationItem2(anchor)) return;
|
|
23070
22421
|
if (activeElRef.current) deactivate();
|
|
23071
22422
|
aiSectionApiRef.current?.selectFromElement(anchor);
|
|
@@ -23127,7 +22478,7 @@ function OhhwellsBridge() {
|
|
|
23127
22478
|
setLogoSizeDraft(null);
|
|
23128
22479
|
}
|
|
23129
22480
|
}, [deactivate, markSelected]);
|
|
23130
|
-
const selectFrame =
|
|
22481
|
+
const selectFrame = useCallback10((el) => {
|
|
23131
22482
|
if (!isNavigationContainer(el)) return;
|
|
23132
22483
|
if (activeElRef.current) deactivate();
|
|
23133
22484
|
aiSectionApiRef.current?.selectFromElement(el);
|
|
@@ -23168,7 +22519,7 @@ function OhhwellsBridge() {
|
|
|
23168
22519
|
setFloatingPanelPos(null);
|
|
23169
22520
|
setLogoSizeDraft(null);
|
|
23170
22521
|
}, [deactivate, markSelected, postToParent2]);
|
|
23171
|
-
const selectLogo =
|
|
22522
|
+
const selectLogo = useCallback10(
|
|
23172
22523
|
(logoEl) => {
|
|
23173
22524
|
if (activeElRef.current) deactivate();
|
|
23174
22525
|
selectedElRef.current = logoEl;
|
|
@@ -23197,7 +22548,7 @@ function OhhwellsBridge() {
|
|
|
23197
22548
|
},
|
|
23198
22549
|
[deactivate, markSelected]
|
|
23199
22550
|
);
|
|
23200
|
-
const openLogoSizePanel =
|
|
22551
|
+
const openLogoSizePanel = useCallback10((logoEl) => {
|
|
23201
22552
|
const placement = getLogoPlacement(logoEl);
|
|
23202
22553
|
const draft = readLogoSizeState(editContentRef.current, placement);
|
|
23203
22554
|
setLogoSizeDraft(draft);
|
|
@@ -23210,7 +22561,7 @@ function OhhwellsBridge() {
|
|
|
23210
22561
|
placement
|
|
23211
22562
|
});
|
|
23212
22563
|
}, []);
|
|
23213
|
-
const openSocialsDisplayPanel =
|
|
22564
|
+
const openSocialsDisplayPanel = useCallback10((row) => {
|
|
23214
22565
|
setFloatingPanelPos(null);
|
|
23215
22566
|
setParentScrollSnap(parentScrollRef.current);
|
|
23216
22567
|
setFloatingPanel({
|
|
@@ -23221,7 +22572,7 @@ function OhhwellsBridge() {
|
|
|
23221
22572
|
row
|
|
23222
22573
|
});
|
|
23223
22574
|
}, []);
|
|
23224
|
-
const rememberButtonTokens =
|
|
22575
|
+
const rememberButtonTokens = useCallback10(
|
|
23225
22576
|
(content, tokens, nodes) => {
|
|
23226
22577
|
if (nodes.length === 0) return content;
|
|
23227
22578
|
const next = { ...content };
|
|
@@ -23232,7 +22583,7 @@ function OhhwellsBridge() {
|
|
|
23232
22583
|
},
|
|
23233
22584
|
[postToParent2]
|
|
23234
22585
|
);
|
|
23235
|
-
const tokensForButton =
|
|
22586
|
+
const tokensForButton = useCallback10(
|
|
23236
22587
|
(el, persistFallback = false) => {
|
|
23237
22588
|
const stored = readStoredStyleTokens(editContentRef.current);
|
|
23238
22589
|
if (stored) return stored;
|
|
@@ -23247,7 +22598,7 @@ function OhhwellsBridge() {
|
|
|
23247
22598
|
},
|
|
23248
22599
|
[rememberButtonTokens]
|
|
23249
22600
|
);
|
|
23250
|
-
const openButtonStylePanel =
|
|
22601
|
+
const openButtonStylePanel = useCallback10(
|
|
23251
22602
|
(anchor) => {
|
|
23252
22603
|
const id = buttonId(anchor);
|
|
23253
22604
|
if (!id) return;
|
|
@@ -23265,7 +22616,7 @@ function OhhwellsBridge() {
|
|
|
23265
22616
|
},
|
|
23266
22617
|
[tokensForButton]
|
|
23267
22618
|
);
|
|
23268
|
-
const applySelectedButtonStyle =
|
|
22619
|
+
const applySelectedButtonStyle = useCallback10(
|
|
23269
22620
|
(patch) => {
|
|
23270
22621
|
const panel = floatingPanelRef.current;
|
|
23271
22622
|
const id = panel?.kind === "button-style" ? panel.buttonId : null;
|
|
@@ -23283,7 +22634,7 @@ function OhhwellsBridge() {
|
|
|
23283
22634
|
},
|
|
23284
22635
|
[postToParent2]
|
|
23285
22636
|
);
|
|
23286
|
-
|
|
22637
|
+
useEffect15(() => {
|
|
23287
22638
|
const onDragOver = (e) => {
|
|
23288
22639
|
const dragged = buttonCollectionDragRef.current;
|
|
23289
22640
|
if (!dragged) return;
|
|
@@ -23302,11 +22653,11 @@ function OhhwellsBridge() {
|
|
|
23302
22653
|
document.removeEventListener("drop", onDrop);
|
|
23303
22654
|
};
|
|
23304
22655
|
}, [refreshButtonDragVisuals]);
|
|
23305
|
-
const isEditModeRef =
|
|
23306
|
-
const requestMissingSocialIconsRef =
|
|
22656
|
+
const isEditModeRef = useRef12(false);
|
|
22657
|
+
const requestMissingSocialIconsRef = useRef12(() => {
|
|
23307
22658
|
});
|
|
23308
|
-
const askedSocialIconsRef =
|
|
23309
|
-
const requestMissingSocialIcons =
|
|
22659
|
+
const askedSocialIconsRef = useRef12(/* @__PURE__ */ new Set());
|
|
22660
|
+
const requestMissingSocialIcons = useCallback10(() => {
|
|
23310
22661
|
const items = Array.from(document.querySelectorAll(`[${SOCIALS_ROW_ATTR}]`)).filter((row) => socialsDisplayFor(row, editContentRef.current).icon).flatMap((row) => {
|
|
23311
22662
|
const missing = socialsMissingIcons(row);
|
|
23312
22663
|
listSocialItems(row).forEach((item) => ensureIconSlot(item));
|
|
@@ -23318,7 +22669,7 @@ function OhhwellsBridge() {
|
|
|
23318
22669
|
}, []);
|
|
23319
22670
|
requestMissingSocialIconsRef.current = requestMissingSocialIcons;
|
|
23320
22671
|
isEditModeRef.current = isEditMode;
|
|
23321
|
-
const changeSocialsDisplay =
|
|
22672
|
+
const changeSocialsDisplay = useCallback10(
|
|
23322
22673
|
(row, next) => {
|
|
23323
22674
|
if (next.icon) {
|
|
23324
22675
|
const missing = socialsMissingIcons(row);
|
|
@@ -23342,19 +22693,19 @@ function OhhwellsBridge() {
|
|
|
23342
22693
|
},
|
|
23343
22694
|
[]
|
|
23344
22695
|
);
|
|
23345
|
-
const closeFloatingPanelOnly =
|
|
22696
|
+
const closeFloatingPanelOnly = useCallback10(() => {
|
|
23346
22697
|
setFloatingPanel(null);
|
|
23347
22698
|
setFloatingPanelPos(null);
|
|
23348
22699
|
setLogoSizeDraft(null);
|
|
23349
22700
|
}, []);
|
|
23350
22701
|
closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
|
|
23351
|
-
const closeFloatingPanelAndDeselect =
|
|
22702
|
+
const closeFloatingPanelAndDeselect = useCallback10(() => {
|
|
23352
22703
|
setFloatingPanel(null);
|
|
23353
22704
|
setFloatingPanelPos(null);
|
|
23354
22705
|
setLogoSizeDraft(null);
|
|
23355
22706
|
deselectRef.current();
|
|
23356
22707
|
}, []);
|
|
23357
|
-
|
|
22708
|
+
useEffect15(() => {
|
|
23358
22709
|
const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
|
|
23359
22710
|
if (!session || !logoSizeDraft) {
|
|
23360
22711
|
postToParentRef.current({ type: "ow:logo-size-panel", open: false });
|
|
@@ -23373,7 +22724,7 @@ function OhhwellsBridge() {
|
|
|
23373
22724
|
max: LOGO_SIZE_MAX
|
|
23374
22725
|
});
|
|
23375
22726
|
}, [floatingPanel, logoSizeDraft, editorViewport]);
|
|
23376
|
-
const persistLogoSizeDraft =
|
|
22727
|
+
const persistLogoSizeDraft = useCallback10(
|
|
23377
22728
|
(placement, draft) => {
|
|
23378
22729
|
const desktopKey = LOGO_SIZE_DESKTOP_KEYS[placement];
|
|
23379
22730
|
const mobileKey = LOGO_SIZE_MOBILE_KEYS[placement];
|
|
@@ -23413,7 +22764,7 @@ function OhhwellsBridge() {
|
|
|
23413
22764
|
},
|
|
23414
22765
|
[postToParent2]
|
|
23415
22766
|
);
|
|
23416
|
-
const activate =
|
|
22767
|
+
const activate = useCallback10((el, options) => {
|
|
23417
22768
|
if (activeElRef.current === el) return;
|
|
23418
22769
|
document.querySelectorAll("[data-ohw-hovered]").forEach((hovered) => {
|
|
23419
22770
|
hovered.removeAttribute("data-ohw-hovered");
|
|
@@ -23511,8 +22862,8 @@ function OhhwellsBridge() {
|
|
|
23511
22862
|
openLogoSizePanelRef.current = openLogoSizePanel;
|
|
23512
22863
|
deselectRef.current = deselect;
|
|
23513
22864
|
closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
|
|
23514
|
-
const lastSiteWideScopeRef =
|
|
23515
|
-
|
|
22865
|
+
const lastSiteWideScopeRef = useRef12(null);
|
|
22866
|
+
useEffect15(() => {
|
|
23516
22867
|
if (!isEditMode) {
|
|
23517
22868
|
if (lastSiteWideScopeRef.current !== false) {
|
|
23518
22869
|
lastSiteWideScopeRef.current = false;
|
|
@@ -23559,7 +22910,6 @@ function OhhwellsBridge() {
|
|
|
23559
22910
|
}
|
|
23560
22911
|
if (typeof content[STYLE_STORE_KEY] === "string") {
|
|
23561
22912
|
stylesRef.current = content[STYLE_STORE_KEY];
|
|
23562
|
-
document.querySelectorAll('[data-ohw-editable="form"]').forEach((f) => markFormFields(f));
|
|
23563
22913
|
applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
|
|
23564
22914
|
}
|
|
23565
22915
|
applyBrandChrome(content);
|
|
@@ -23568,12 +22918,12 @@ function OhhwellsBridge() {
|
|
|
23568
22918
|
for (const [key, val] of Object.entries(content)) {
|
|
23569
22919
|
if (key === "__ohw_sections") continue;
|
|
23570
22920
|
if (key === AI_SECTIONS_KEY) continue;
|
|
23571
|
-
if (key === LOGO_PLACEHOLDER_KEY) continue;
|
|
23572
|
-
if (LOGO_IMAGE_KEYS.includes(key)) continue;
|
|
23573
22921
|
if (key === BRAND_KIT_KEY) continue;
|
|
23574
22922
|
if (key === STYLE_STORE_KEY) continue;
|
|
23575
22923
|
if (BRAND_CHROME_KEYS.has(key)) continue;
|
|
22924
|
+
if (key === LOGO_PLACEHOLDER_KEY) continue;
|
|
23576
22925
|
if (key === CUSTOM_CODE_AFTER_HEAD_KEY || key === CUSTOM_CODE_BEFORE_HEAD_KEY) continue;
|
|
22926
|
+
if (LOGO_IMAGE_KEYS.includes(key)) continue;
|
|
23577
22927
|
if (applyVideoSettingNode(key, val)) continue;
|
|
23578
22928
|
if (applyCarouselNode(key, val)) continue;
|
|
23579
22929
|
document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
|
|
@@ -23663,7 +23013,7 @@ function OhhwellsBridge() {
|
|
|
23663
23013
|
cancelled = true;
|
|
23664
23014
|
};
|
|
23665
23015
|
}, [subdomain, isEditMode]);
|
|
23666
|
-
|
|
23016
|
+
useEffect15(() => {
|
|
23667
23017
|
if (!isEditMode) return;
|
|
23668
23018
|
const resolveIndex = (form, clientY) => {
|
|
23669
23019
|
const wrappers = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== fieldDragRef.current?.key);
|
|
@@ -23704,7 +23054,7 @@ function OhhwellsBridge() {
|
|
|
23704
23054
|
window.removeEventListener("drop", onDrop, true);
|
|
23705
23055
|
};
|
|
23706
23056
|
}, [buildFieldDropSlots, isEditMode, persistFields, selectField]);
|
|
23707
|
-
|
|
23057
|
+
useEffect15(() => {
|
|
23708
23058
|
if (!isEditMode) return;
|
|
23709
23059
|
const mark = () => document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
23710
23060
|
markFormFields(form);
|
|
@@ -23716,7 +23066,7 @@ function OhhwellsBridge() {
|
|
|
23716
23066
|
});
|
|
23717
23067
|
return () => observer.disconnect();
|
|
23718
23068
|
}, [isEditMode, fetchState, pathname]);
|
|
23719
|
-
|
|
23069
|
+
useEffect15(() => {
|
|
23720
23070
|
if (!isEditMode) return;
|
|
23721
23071
|
let saveTimer = null;
|
|
23722
23072
|
const onInput = (e) => {
|
|
@@ -23738,14 +23088,14 @@ function OhhwellsBridge() {
|
|
|
23738
23088
|
document.addEventListener("input", onInput, true);
|
|
23739
23089
|
return () => document.removeEventListener("input", onInput, true);
|
|
23740
23090
|
}, [isEditMode, persistFields]);
|
|
23741
|
-
|
|
23091
|
+
useEffect15(() => {
|
|
23742
23092
|
if (isEditMode || fetchState !== "done") return;
|
|
23743
23093
|
const content = contentCache.get(subdomain) ?? {};
|
|
23744
23094
|
document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
23745
23095
|
reconcileFieldsFromContent(form, content);
|
|
23746
23096
|
});
|
|
23747
23097
|
}, [isEditMode, fetchState, subdomain]);
|
|
23748
|
-
|
|
23098
|
+
useEffect15(() => {
|
|
23749
23099
|
if (!isEditMode) return;
|
|
23750
23100
|
const swallow = (e) => {
|
|
23751
23101
|
const target = e.target;
|
|
@@ -23754,14 +23104,14 @@ function OhhwellsBridge() {
|
|
|
23754
23104
|
document.addEventListener("submit", swallow, true);
|
|
23755
23105
|
return () => document.removeEventListener("submit", swallow, true);
|
|
23756
23106
|
}, [isEditMode]);
|
|
23757
|
-
|
|
23107
|
+
useEffect15(() => {
|
|
23758
23108
|
if (isEditMode || fetchState !== "done") return;
|
|
23759
23109
|
console.log("env", process.env.NEXT_PUBLIC_FLOWOPS_API_URL);
|
|
23760
23110
|
const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
|
|
23761
23111
|
console.log({ apiUrl, subdomain });
|
|
23762
23112
|
bindPublishedForms(apiUrl, subdomain, contentCache.get(subdomain) ?? {});
|
|
23763
23113
|
}, [isEditMode, fetchState, subdomain]);
|
|
23764
|
-
|
|
23114
|
+
useEffect15(() => {
|
|
23765
23115
|
if (!subdomain || isEditMode) return;
|
|
23766
23116
|
let debounceTimer = null;
|
|
23767
23117
|
let observer = null;
|
|
@@ -23783,17 +23133,16 @@ function OhhwellsBridge() {
|
|
|
23783
23133
|
applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
|
|
23784
23134
|
}
|
|
23785
23135
|
if (typeof content[STYLE_STORE_KEY] === "string") {
|
|
23786
|
-
document.querySelectorAll('[data-ohw-editable="form"]').forEach((f) => markFormFields(f));
|
|
23787
23136
|
applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
|
|
23788
23137
|
}
|
|
23789
23138
|
for (const [key, val] of Object.entries(content)) {
|
|
23790
23139
|
if (key === "__ohw_sections") continue;
|
|
23791
23140
|
if (key === AI_SECTIONS_KEY) continue;
|
|
23792
|
-
if (key === LOGO_PLACEHOLDER_KEY) continue;
|
|
23793
|
-
if (LOGO_IMAGE_KEYS.includes(key)) continue;
|
|
23794
23141
|
if (key === BRAND_KIT_KEY) continue;
|
|
23795
23142
|
if (key === STYLE_STORE_KEY) continue;
|
|
23796
23143
|
if (BRAND_CHROME_KEYS.has(key)) continue;
|
|
23144
|
+
if (key === LOGO_PLACEHOLDER_KEY) continue;
|
|
23145
|
+
if (LOGO_IMAGE_KEYS.includes(key)) continue;
|
|
23797
23146
|
if (applyVideoSettingNode(key, val)) continue;
|
|
23798
23147
|
if (applyCarouselNode(key, val)) continue;
|
|
23799
23148
|
document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
|
|
@@ -23869,10 +23218,10 @@ function OhhwellsBridge() {
|
|
|
23869
23218
|
const visible = Boolean(subdomain) && fetchState !== "done";
|
|
23870
23219
|
el.style.display = visible ? "flex" : "none";
|
|
23871
23220
|
}, [subdomain, fetchState]);
|
|
23872
|
-
|
|
23221
|
+
useEffect15(() => {
|
|
23873
23222
|
postToParent2({ type: "ow:navigation", path: pathname });
|
|
23874
23223
|
}, [pathname, postToParent2]);
|
|
23875
|
-
|
|
23224
|
+
useEffect15(() => {
|
|
23876
23225
|
if (!subdomain || isEditMode) return;
|
|
23877
23226
|
const content = contentCache.get(subdomain);
|
|
23878
23227
|
if (!content) return;
|
|
@@ -23888,7 +23237,7 @@ function OhhwellsBridge() {
|
|
|
23888
23237
|
applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
|
|
23889
23238
|
}
|
|
23890
23239
|
}, [pathname, subdomain, isEditMode]);
|
|
23891
|
-
|
|
23240
|
+
useEffect15(() => {
|
|
23892
23241
|
if (!isEditMode) return;
|
|
23893
23242
|
if (linkPopoverSessionRef.current?.intent === "add-nav") return;
|
|
23894
23243
|
if (document.querySelector("[data-ohw-section-picker]")) return;
|
|
@@ -23896,11 +23245,11 @@ function OhhwellsBridge() {
|
|
|
23896
23245
|
deselectRef.current();
|
|
23897
23246
|
deactivateRef.current();
|
|
23898
23247
|
}, [pathname, isEditMode]);
|
|
23899
|
-
|
|
23248
|
+
useEffect15(() => {
|
|
23900
23249
|
if (!isEditMode) return;
|
|
23901
23250
|
initSectionInstancesFromContent(editContentRef.current, pathname);
|
|
23902
23251
|
}, [pathname, isEditMode]);
|
|
23903
|
-
|
|
23252
|
+
useEffect15(() => {
|
|
23904
23253
|
if (!isEditMode) return;
|
|
23905
23254
|
const observer = new MutationObserver(() => {
|
|
23906
23255
|
const drawer = document.querySelector("[data-ohw-nav-drawer]");
|
|
@@ -23911,7 +23260,7 @@ function OhhwellsBridge() {
|
|
|
23911
23260
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
23912
23261
|
return () => observer.disconnect();
|
|
23913
23262
|
}, [isEditMode, pathname]);
|
|
23914
|
-
|
|
23263
|
+
useEffect15(() => {
|
|
23915
23264
|
const contentForNav = () => {
|
|
23916
23265
|
if (isEditMode) return editContentRef.current;
|
|
23917
23266
|
if (!subdomain) return {};
|
|
@@ -23984,7 +23333,7 @@ function OhhwellsBridge() {
|
|
|
23984
23333
|
observer?.disconnect();
|
|
23985
23334
|
};
|
|
23986
23335
|
}, [isEditMode, pathname, subdomain, fetchState, resyncSelectedNavigationItem]);
|
|
23987
|
-
|
|
23336
|
+
useEffect15(() => {
|
|
23988
23337
|
if (!isEditMode) return;
|
|
23989
23338
|
let applying = false;
|
|
23990
23339
|
let rafId = null;
|
|
@@ -24022,7 +23371,7 @@ function OhhwellsBridge() {
|
|
|
24022
23371
|
observer.disconnect();
|
|
24023
23372
|
};
|
|
24024
23373
|
}, [isEditMode, pathname]);
|
|
24025
|
-
|
|
23374
|
+
useEffect15(() => {
|
|
24026
23375
|
if (!isEditMode) return;
|
|
24027
23376
|
let lastPosted = 0;
|
|
24028
23377
|
const measure = () => {
|
|
@@ -24044,14 +23393,29 @@ function OhhwellsBridge() {
|
|
|
24044
23393
|
const t2 = setTimeout(measure, 500);
|
|
24045
23394
|
const ro = new ResizeObserver(schedule);
|
|
24046
23395
|
ro.observe(document.body);
|
|
23396
|
+
let lastWidth = window.innerWidth;
|
|
23397
|
+
let resizeTimers = [];
|
|
23398
|
+
const clearResizeTimers = () => {
|
|
23399
|
+
resizeTimers.forEach(clearTimeout);
|
|
23400
|
+
resizeTimers = [];
|
|
23401
|
+
};
|
|
23402
|
+
const handleResize = () => {
|
|
23403
|
+
if (window.innerWidth === lastWidth) return;
|
|
23404
|
+
lastWidth = window.innerWidth;
|
|
23405
|
+
clearResizeTimers();
|
|
23406
|
+
resizeTimers = HEIGHT_SETTLE_DELAYS.map((delay) => setTimeout(measure, delay));
|
|
23407
|
+
};
|
|
23408
|
+
window.addEventListener("resize", handleResize);
|
|
24047
23409
|
return () => {
|
|
24048
23410
|
clearTimeout(t1);
|
|
24049
23411
|
clearTimeout(t2);
|
|
24050
23412
|
if (raf != null) cancelAnimationFrame(raf);
|
|
24051
23413
|
ro.disconnect();
|
|
23414
|
+
clearResizeTimers();
|
|
23415
|
+
window.removeEventListener("resize", handleResize);
|
|
24052
23416
|
};
|
|
24053
23417
|
}, [pathname, isEditMode, postToParent2]);
|
|
24054
|
-
|
|
23418
|
+
useEffect15(() => {
|
|
24055
23419
|
if (!subdomainFromQuery || isEditMode) return;
|
|
24056
23420
|
const handleClick = (e) => {
|
|
24057
23421
|
const anchor = e.target.closest("a");
|
|
@@ -24067,7 +23431,7 @@ function OhhwellsBridge() {
|
|
|
24067
23431
|
document.addEventListener("click", handleClick, true);
|
|
24068
23432
|
return () => document.removeEventListener("click", handleClick, true);
|
|
24069
23433
|
}, [subdomainFromQuery, isEditMode, router]);
|
|
24070
|
-
|
|
23434
|
+
useEffect15(() => {
|
|
24071
23435
|
if (!isEditMode) {
|
|
24072
23436
|
editStylesRef.current?.base.remove();
|
|
24073
23437
|
editStylesRef.current?.forceHover.remove();
|
|
@@ -24293,11 +23657,11 @@ function OhhwellsBridge() {
|
|
|
24293
23657
|
footer [data-ohw-href-key] [data-ohw-editable][contenteditable],
|
|
24294
23658
|
footer [data-ohw-href-key] [data-ohw-editable][contenteditable] * {
|
|
24295
23659
|
outline: none !important;
|
|
24296
|
-
caret-color: ${
|
|
23660
|
+
caret-color: ${PRIMARY5} !important;
|
|
24297
23661
|
cursor: text !important;
|
|
24298
23662
|
}
|
|
24299
23663
|
[data-ohw-editable][contenteditable]::selection,
|
|
24300
|
-
[data-ohw-editable][contenteditable] *::selection { background: ${
|
|
23664
|
+
[data-ohw-editable][contenteditable] *::selection { background: ${PRIMARY5}59 !important; }
|
|
24301
23665
|
[data-ohw-editable-state], [data-ohw-editable-state] * { pointer-events: none !important; }
|
|
24302
23666
|
[data-ohw-editable-state][data-ohw-active-state] [data-ohw-editable] { pointer-events: auto !important; }
|
|
24303
23667
|
[data-ohw-editable-state][data-ohw-active-state][data-ohw-editable] { pointer-events: auto !important; }
|
|
@@ -24343,13 +23707,6 @@ function OhhwellsBridge() {
|
|
|
24343
23707
|
if (target.closest("[data-ohw-state-toggle]")) return;
|
|
24344
23708
|
if (target.closest("[data-ohw-max-badge]")) return;
|
|
24345
23709
|
if (isInsideLinkEditor(target)) return;
|
|
24346
|
-
if (isInsideFloatingPanel(target)) return;
|
|
24347
|
-
if (target.closest("[data-ohw-form-toolbar]")) return;
|
|
24348
|
-
if (target.closest(
|
|
24349
|
-
'[data-ohw-field-toolbar], [data-ohw-field-type-picker], [data-radix-popper-content-wrapper], [role="menu"], [data-slot="dropdown-menu-content"]'
|
|
24350
|
-
)) {
|
|
24351
|
-
return;
|
|
24352
|
-
}
|
|
24353
23710
|
if (selectedMediaElRef.current && !selectedMediaElRef.current.contains(target) && !target.closest("[data-ohw-media-overlay], [data-ohw-edit-chrome], [data-ohw-item-interaction]")) {
|
|
24354
23711
|
clearMediaSelectionRef.current();
|
|
24355
23712
|
}
|
|
@@ -24370,6 +23727,13 @@ function OhhwellsBridge() {
|
|
|
24370
23727
|
return;
|
|
24371
23728
|
}
|
|
24372
23729
|
}
|
|
23730
|
+
if (isInsideFloatingPanel(target)) return;
|
|
23731
|
+
if (target.closest("[data-ohw-form-toolbar]")) return;
|
|
23732
|
+
if (target.closest(
|
|
23733
|
+
'[data-ohw-field-toolbar], [data-ohw-field-type-picker], [data-radix-popper-content-wrapper], [role="menu"], [data-slot="dropdown-menu-content"]'
|
|
23734
|
+
)) {
|
|
23735
|
+
return;
|
|
23736
|
+
}
|
|
24373
23737
|
{
|
|
24374
23738
|
const formEl = getFormElement(target);
|
|
24375
23739
|
const onSuccessText = target.closest(`[${SUCCESS_TEXT_ATTR}]`);
|
|
@@ -24749,9 +24113,6 @@ function OhhwellsBridge() {
|
|
|
24749
24113
|
setHoveredItemRect(null);
|
|
24750
24114
|
hoveredNavContainerRef.current = null;
|
|
24751
24115
|
setHoveredNavContainerRect(null);
|
|
24752
|
-
siblingHintElRef.current = null;
|
|
24753
|
-
setSiblingHintRect(null);
|
|
24754
|
-
setSiblingHintRects([]);
|
|
24755
24116
|
return;
|
|
24756
24117
|
}
|
|
24757
24118
|
{
|
|
@@ -24872,6 +24233,7 @@ function OhhwellsBridge() {
|
|
|
24872
24233
|
hoveredNavContainerRef.current = null;
|
|
24873
24234
|
setHoveredNavContainerRect(null);
|
|
24874
24235
|
hoveredItemElRef.current = editable;
|
|
24236
|
+
setHoveredItemRect(isSelectedForHoverRef.current(editable) ? null : editable.getBoundingClientRect());
|
|
24875
24237
|
}
|
|
24876
24238
|
}
|
|
24877
24239
|
}
|
|
@@ -25581,11 +24943,7 @@ function OhhwellsBridge() {
|
|
|
25581
24943
|
};
|
|
25582
24944
|
const handleMouseMove = (e) => {
|
|
25583
24945
|
const { clientX, clientY } = e;
|
|
25584
|
-
if (pointOwnedByFloatingPanel(clientX, clientY))
|
|
25585
|
-
dismissImageHover();
|
|
25586
|
-
clearImageHover();
|
|
25587
|
-
return;
|
|
25588
|
-
}
|
|
24946
|
+
if (pointOwnedByFloatingPanel(clientX, clientY)) return;
|
|
25589
24947
|
if (isNavDrawerOpen() && isPointOutsideOpenDrawer(clientX, clientY)) {
|
|
25590
24948
|
document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
|
|
25591
24949
|
formHoverElRef.current = null;
|
|
@@ -25614,12 +24972,7 @@ function OhhwellsBridge() {
|
|
|
25614
24972
|
setHoveredItemRect(null);
|
|
25615
24973
|
hoveredNavContainerRef.current = null;
|
|
25616
24974
|
setHoveredNavContainerRect(null);
|
|
25617
|
-
siblingHintElRef.current = null;
|
|
25618
|
-
setSiblingHintRect(null);
|
|
25619
|
-
setSiblingHintRects([]);
|
|
25620
24975
|
dismissImageHover();
|
|
25621
|
-
clearImageHover();
|
|
25622
|
-
setSectionGap(null);
|
|
25623
24976
|
return;
|
|
25624
24977
|
}
|
|
25625
24978
|
if (probeSocialsRowAt(clientX, clientY)) return;
|
|
@@ -25631,11 +24984,7 @@ function OhhwellsBridge() {
|
|
|
25631
24984
|
if (e.data?.type !== "ow:pointer-sync") return;
|
|
25632
24985
|
const { clientX, clientY } = e.data;
|
|
25633
24986
|
if (typeof clientX !== "number" || typeof clientY !== "number") return;
|
|
25634
|
-
if (pointOwnedByFloatingPanel(clientX, clientY))
|
|
25635
|
-
dismissImageHover();
|
|
25636
|
-
clearImageHover();
|
|
25637
|
-
return;
|
|
25638
|
-
}
|
|
24987
|
+
if (pointOwnedByFloatingPanel(clientX, clientY)) return;
|
|
25639
24988
|
if (isNavDrawerOpen() && isPointOutsideOpenDrawer(clientX, clientY)) return;
|
|
25640
24989
|
if (probeSocialsRowAt(clientX, clientY)) return;
|
|
25641
24990
|
probeSectionGapAt(clientX, clientY);
|
|
@@ -25981,7 +25330,6 @@ function OhhwellsBridge() {
|
|
|
25981
25330
|
}
|
|
25982
25331
|
if (typeof content[STYLE_STORE_KEY] === "string") {
|
|
25983
25332
|
stylesRef.current = content[STYLE_STORE_KEY];
|
|
25984
|
-
document.querySelectorAll('[data-ohw-editable="form"]').forEach((f) => markFormFields(f));
|
|
25985
25333
|
applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
|
|
25986
25334
|
}
|
|
25987
25335
|
applyBrandChrome(content);
|
|
@@ -25994,12 +25342,12 @@ function OhhwellsBridge() {
|
|
|
25994
25342
|
continue;
|
|
25995
25343
|
}
|
|
25996
25344
|
if (key === AI_SECTIONS_KEY) continue;
|
|
25997
|
-
if (key === LOGO_PLACEHOLDER_KEY) continue;
|
|
25998
|
-
if (LOGO_IMAGE_KEYS.includes(key) && !String(val ?? "").trim()) continue;
|
|
25999
25345
|
if (key === BRAND_KIT_KEY) continue;
|
|
26000
25346
|
if (key === STYLE_STORE_KEY) continue;
|
|
26001
25347
|
if (BRAND_CHROME_KEYS.has(key)) continue;
|
|
25348
|
+
if (key === LOGO_PLACEHOLDER_KEY) continue;
|
|
26002
25349
|
if (key === CUSTOM_CODE_AFTER_HEAD_KEY || key === CUSTOM_CODE_BEFORE_HEAD_KEY) continue;
|
|
25350
|
+
if (LOGO_IMAGE_KEYS.includes(key) && !String(val ?? "").trim()) continue;
|
|
26003
25351
|
if (applyVideoSettingNode(key, val)) continue;
|
|
26004
25352
|
if (applyCarouselNode(key, val)) continue;
|
|
26005
25353
|
document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
|
|
@@ -26445,12 +25793,6 @@ function OhhwellsBridge() {
|
|
|
26445
25793
|
closeLinkPopoverRef.current();
|
|
26446
25794
|
return;
|
|
26447
25795
|
}
|
|
26448
|
-
if (floatingPanelOpenRef.current) {
|
|
26449
|
-
setFloatingPanelRef.current(null);
|
|
26450
|
-
deselectRef.current();
|
|
26451
|
-
deactivateRef.current();
|
|
26452
|
-
return;
|
|
26453
|
-
}
|
|
26454
25796
|
deselectRef.current();
|
|
26455
25797
|
deactivateRef.current();
|
|
26456
25798
|
clearMediaSelectionRef.current();
|
|
@@ -26727,21 +26069,6 @@ function OhhwellsBridge() {
|
|
|
26727
26069
|
type: "text",
|
|
26728
26070
|
text: editContentRef.current[CUSTOM_CODE_AFTER_HEAD_KEY] ?? ""
|
|
26729
26071
|
});
|
|
26730
|
-
nodes.push({
|
|
26731
|
-
key: BRAND_TITLE_KEY,
|
|
26732
|
-
type: "text",
|
|
26733
|
-
text: editContentRef.current[BRAND_TITLE_KEY] ?? ""
|
|
26734
|
-
});
|
|
26735
|
-
nodes.push({
|
|
26736
|
-
key: SITE_DESCRIPTION_KEY,
|
|
26737
|
-
type: "text",
|
|
26738
|
-
text: editContentRef.current[SITE_DESCRIPTION_KEY] ?? ""
|
|
26739
|
-
});
|
|
26740
|
-
nodes.push({
|
|
26741
|
-
key: SITE_OG_IMAGE_KEY,
|
|
26742
|
-
type: "text",
|
|
26743
|
-
text: editContentRef.current[SITE_OG_IMAGE_KEY] ?? ""
|
|
26744
|
-
});
|
|
26745
26072
|
document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
26746
26073
|
const formKey = formKeyOf(form);
|
|
26747
26074
|
if (!formKey) return;
|
|
@@ -27198,17 +26525,17 @@ function OhhwellsBridge() {
|
|
|
27198
26525
|
window.removeEventListener("message", handleDeleteSection);
|
|
27199
26526
|
window.removeEventListener("message", handleDuplicateSection);
|
|
27200
26527
|
window.removeEventListener("message", handleDeactivate);
|
|
26528
|
+
document.documentElement.removeAttribute("data-ohw-panel-dragging");
|
|
27201
26529
|
window.removeEventListener("message", handleToastAction);
|
|
27202
26530
|
window.removeEventListener("message", handleFormCount);
|
|
27203
26531
|
window.removeEventListener("message", handleUiEscape);
|
|
27204
|
-
document.documentElement.removeAttribute("data-ohw-panel-dragging");
|
|
27205
26532
|
autoSaveTimers.current.forEach(clearTimeout);
|
|
27206
26533
|
autoSaveTimers.current.clear();
|
|
27207
26534
|
if (imageUnhoverTimerRef.current) clearTimeout(imageUnhoverTimerRef.current);
|
|
27208
26535
|
if (imageShowTimerRef.current) clearTimeout(imageShowTimerRef.current);
|
|
27209
26536
|
};
|
|
27210
26537
|
}, [isEditMode, refreshStateRules]);
|
|
27211
|
-
|
|
26538
|
+
useEffect15(() => {
|
|
27212
26539
|
if (!isEditMode) return;
|
|
27213
26540
|
const THRESHOLD = 10;
|
|
27214
26541
|
const resolveWasSelected = (el) => {
|
|
@@ -27364,7 +26691,7 @@ function OhhwellsBridge() {
|
|
|
27364
26691
|
unlockFooterDragInteraction();
|
|
27365
26692
|
};
|
|
27366
26693
|
}, [isEditMode]);
|
|
27367
|
-
|
|
26694
|
+
useEffect15(() => {
|
|
27368
26695
|
if (!isEditMode) return;
|
|
27369
26696
|
const THRESHOLD = 10;
|
|
27370
26697
|
const onPointerDown = (e) => {
|
|
@@ -27455,7 +26782,7 @@ function OhhwellsBridge() {
|
|
|
27455
26782
|
document.removeEventListener("selectstart", blockSelectStart, true);
|
|
27456
26783
|
};
|
|
27457
26784
|
}, [isEditMode, persistButtonCollectionDrag, refreshButtonDragVisuals]);
|
|
27458
|
-
|
|
26785
|
+
useEffect15(() => {
|
|
27459
26786
|
const handler = (e) => {
|
|
27460
26787
|
if (e.data?.type !== "ow:request-schedule-config") return;
|
|
27461
26788
|
const insertAfterVal = e.data.insertAfter;
|
|
@@ -27471,7 +26798,7 @@ function OhhwellsBridge() {
|
|
|
27471
26798
|
window.addEventListener("message", handler);
|
|
27472
26799
|
return () => window.removeEventListener("message", handler);
|
|
27473
26800
|
}, [processConfigRequest]);
|
|
27474
|
-
|
|
26801
|
+
useEffect15(() => {
|
|
27475
26802
|
if (!isEditMode) return;
|
|
27476
26803
|
document.querySelectorAll("[data-ohw-active-state]").forEach((el) => {
|
|
27477
26804
|
el.removeAttribute("data-ohw-active-state");
|
|
@@ -27507,13 +26834,13 @@ function OhhwellsBridge() {
|
|
|
27507
26834
|
clearTimeout(timer);
|
|
27508
26835
|
};
|
|
27509
26836
|
}, [pathname, isEditMode, refreshStateRules, postToParent2]);
|
|
27510
|
-
|
|
26837
|
+
useEffect15(() => {
|
|
27511
26838
|
scrollToHashSectionWhenReady();
|
|
27512
26839
|
const onHashChange = () => scrollToHashSectionWhenReady();
|
|
27513
26840
|
window.addEventListener("hashchange", onHashChange);
|
|
27514
26841
|
return () => window.removeEventListener("hashchange", onHashChange);
|
|
27515
26842
|
}, [pathname]);
|
|
27516
|
-
const handleCommand =
|
|
26843
|
+
const handleCommand = useCallback10((cmd) => {
|
|
27517
26844
|
const el = activeElRef.current;
|
|
27518
26845
|
const selBefore = window.getSelection();
|
|
27519
26846
|
let savedOffsets = null;
|
|
@@ -27549,7 +26876,7 @@ function OhhwellsBridge() {
|
|
|
27549
26876
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
27550
26877
|
refreshActiveCommandsRef.current();
|
|
27551
26878
|
}, []);
|
|
27552
|
-
|
|
26879
|
+
useEffect15(() => {
|
|
27553
26880
|
const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
|
|
27554
26881
|
if (!session || !logoSizeDraft) return;
|
|
27555
26882
|
const onPanelAction = (e) => {
|
|
@@ -27587,7 +26914,7 @@ function OhhwellsBridge() {
|
|
|
27587
26914
|
window.addEventListener("message", onPanelAction);
|
|
27588
26915
|
return () => window.removeEventListener("message", onPanelAction);
|
|
27589
26916
|
}, [floatingPanel, logoSizeDraft, editorViewport, persistLogoSizeDraft, closeFloatingPanelAndDeselect]);
|
|
27590
|
-
const handleStateChange =
|
|
26917
|
+
const handleStateChange = useCallback10((state) => {
|
|
27591
26918
|
if (!activeStateElRef.current) return;
|
|
27592
26919
|
const el = activeStateElRef.current;
|
|
27593
26920
|
if (state === "Default") {
|
|
@@ -27600,7 +26927,7 @@ function OhhwellsBridge() {
|
|
|
27600
26927
|
}
|
|
27601
26928
|
setToggleState((prev) => prev ? { ...prev, activeState: state } : null);
|
|
27602
26929
|
}, [deactivate]);
|
|
27603
|
-
const reselectAfterLinkPopover =
|
|
26930
|
+
const reselectAfterLinkPopover = useCallback10(
|
|
27604
26931
|
(hrefKey) => {
|
|
27605
26932
|
requestAnimationFrame(() => {
|
|
27606
26933
|
const el = resolveHrefKeyElement(hrefKey);
|
|
@@ -27609,7 +26936,7 @@ function OhhwellsBridge() {
|
|
|
27609
26936
|
},
|
|
27610
26937
|
[resolveHrefKeyElement]
|
|
27611
26938
|
);
|
|
27612
|
-
const closeLinkPopover =
|
|
26939
|
+
const closeLinkPopover = useCallback10(() => {
|
|
27613
26940
|
const session = linkPopoverSessionRef.current;
|
|
27614
26941
|
addNavAfterAnchorRef.current = null;
|
|
27615
26942
|
setLinkPopover(null);
|
|
@@ -27617,9 +26944,9 @@ function OhhwellsBridge() {
|
|
|
27617
26944
|
reselectAfterLinkPopover(session.key);
|
|
27618
26945
|
}
|
|
27619
26946
|
}, [reselectAfterLinkPopover]);
|
|
27620
|
-
const closeLinkPopoverRef =
|
|
26947
|
+
const closeLinkPopoverRef = useRef12(closeLinkPopover);
|
|
27621
26948
|
closeLinkPopoverRef.current = closeLinkPopover;
|
|
27622
|
-
const openLinkPopoverForActive =
|
|
26949
|
+
const openLinkPopoverForActive = useCallback10(() => {
|
|
27623
26950
|
const hrefCtx = getHrefKeyFromElement(activeElRef.current);
|
|
27624
26951
|
if (!hrefCtx) return;
|
|
27625
26952
|
bumpLinkPopoverGrace();
|
|
@@ -27630,7 +26957,7 @@ function OhhwellsBridge() {
|
|
|
27630
26957
|
});
|
|
27631
26958
|
deactivate();
|
|
27632
26959
|
}, [deactivate]);
|
|
27633
|
-
const openLinkPopoverForSelected =
|
|
26960
|
+
const openLinkPopoverForSelected = useCallback10(() => {
|
|
27634
26961
|
const anchor = selectedElRef.current;
|
|
27635
26962
|
if (!anchor) return;
|
|
27636
26963
|
const key = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -27647,7 +26974,7 @@ function OhhwellsBridge() {
|
|
|
27647
26974
|
});
|
|
27648
26975
|
deselect();
|
|
27649
26976
|
}, [deselect]);
|
|
27650
|
-
const handleSelectParent =
|
|
26977
|
+
const handleSelectParent = useCallback10(() => {
|
|
27651
26978
|
const selected = selectedElRef.current;
|
|
27652
26979
|
if (!selected) return;
|
|
27653
26980
|
if (toolbarVariantRef.current === "select-frame") {
|
|
@@ -27674,7 +27001,7 @@ function OhhwellsBridge() {
|
|
|
27674
27001
|
}
|
|
27675
27002
|
deselectRef.current();
|
|
27676
27003
|
}, []);
|
|
27677
|
-
const handleDuplicateSelected =
|
|
27004
|
+
const handleDuplicateSelected = useCallback10(() => {
|
|
27678
27005
|
const selected = selectedElRef.current;
|
|
27679
27006
|
if (!selected || !isNavigationItem2(selected)) return;
|
|
27680
27007
|
if (isCtaButton(selected)) {
|
|
@@ -27837,7 +27164,7 @@ function OhhwellsBridge() {
|
|
|
27837
27164
|
});
|
|
27838
27165
|
}
|
|
27839
27166
|
}, [postToParent2, tokensForButton]);
|
|
27840
|
-
const runPendingDeleteUndo =
|
|
27167
|
+
const runPendingDeleteUndo = useCallback10(() => {
|
|
27841
27168
|
const pending = pendingDeleteUndoRef.current;
|
|
27842
27169
|
if (!pending) return false;
|
|
27843
27170
|
pendingDeleteUndoRef.current = null;
|
|
@@ -27845,7 +27172,7 @@ function OhhwellsBridge() {
|
|
|
27845
27172
|
enforceLinkHrefs();
|
|
27846
27173
|
return true;
|
|
27847
27174
|
}, []);
|
|
27848
|
-
const handleDeleteSelected =
|
|
27175
|
+
const handleDeleteSelected = useCallback10(() => {
|
|
27849
27176
|
const selected = selectedElRef.current;
|
|
27850
27177
|
if (!selected) return false;
|
|
27851
27178
|
if (isCtaButton(selected)) {
|
|
@@ -27898,7 +27225,7 @@ function OhhwellsBridge() {
|
|
|
27898
27225
|
}, [postToParent2]);
|
|
27899
27226
|
handleDeleteSelectedRef.current = handleDeleteSelected;
|
|
27900
27227
|
runPendingDeleteUndoRef.current = runPendingDeleteUndo;
|
|
27901
|
-
const handleLinkPopoverSubmit =
|
|
27228
|
+
const handleLinkPopoverSubmit = useCallback10(
|
|
27902
27229
|
(target) => {
|
|
27903
27230
|
const session = linkPopoverSessionRef.current;
|
|
27904
27231
|
if (!session) return;
|
|
@@ -27964,14 +27291,14 @@ function OhhwellsBridge() {
|
|
|
27964
27291
|
const showEditLink = toolbarShowEditLink;
|
|
27965
27292
|
const currentSections = sectionsByPath[pathname] ?? [];
|
|
27966
27293
|
linkPopoverOpenRef.current = linkPopover !== null;
|
|
27967
|
-
const handleMediaSelect =
|
|
27294
|
+
const handleMediaSelect = useCallback10((key) => {
|
|
27968
27295
|
const el = hoveredImageRef.current?.dataset.ohwKey === key ? hoveredImageRef.current : Array.from(document.querySelectorAll(MEDIA_SELECTOR)).find(
|
|
27969
27296
|
(m) => (m.dataset.ohwKey ?? "") === key
|
|
27970
27297
|
) ?? null;
|
|
27971
27298
|
if (!el) return;
|
|
27972
27299
|
selectMediaElementRef.current(el);
|
|
27973
27300
|
}, []);
|
|
27974
|
-
const handleMediaReplace =
|
|
27301
|
+
const handleMediaReplace = useCallback10(
|
|
27975
27302
|
(key) => {
|
|
27976
27303
|
postToParent2({
|
|
27977
27304
|
type: "ow:image-pick",
|
|
@@ -27981,13 +27308,13 @@ function OhhwellsBridge() {
|
|
|
27981
27308
|
},
|
|
27982
27309
|
[postToParent2, mediaHover?.elementType, selectedMedia?.elementType]
|
|
27983
27310
|
);
|
|
27984
|
-
const handleEditCarousel =
|
|
27311
|
+
const handleEditCarousel = useCallback10(
|
|
27985
27312
|
(key) => {
|
|
27986
27313
|
postToParent2({ type: "ow:carousel-open", key, images: readCarouselValue(key) });
|
|
27987
27314
|
},
|
|
27988
27315
|
[postToParent2]
|
|
27989
27316
|
);
|
|
27990
|
-
const handleMediaFadeOutComplete =
|
|
27317
|
+
const handleMediaFadeOutComplete = useCallback10((key) => {
|
|
27991
27318
|
setUploadingRects((prev) => {
|
|
27992
27319
|
if (!(key in prev)) return prev;
|
|
27993
27320
|
const next = { ...prev };
|
|
@@ -27995,7 +27322,7 @@ function OhhwellsBridge() {
|
|
|
27995
27322
|
return next;
|
|
27996
27323
|
});
|
|
27997
27324
|
}, []);
|
|
27998
|
-
const handleVideoSettingsChange =
|
|
27325
|
+
const handleVideoSettingsChange = useCallback10(
|
|
27999
27326
|
(key, settings) => {
|
|
28000
27327
|
document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
|
|
28001
27328
|
const video = getVideoEl2(el);
|
|
@@ -28017,14 +27344,14 @@ function OhhwellsBridge() {
|
|
|
28017
27344
|
},
|
|
28018
27345
|
[postToParent2]
|
|
28019
27346
|
);
|
|
28020
|
-
return /* @__PURE__ */
|
|
28021
|
-
/* @__PURE__ */
|
|
28022
|
-
/* @__PURE__ */
|
|
28023
|
-
subdomain && !isEditMode && showBranding && /* @__PURE__ */
|
|
27347
|
+
return /* @__PURE__ */ jsxs23(Fragment10, { children: [
|
|
27348
|
+
/* @__PURE__ */ jsx36("div", { id: "ohw-loader", suppressHydrationWarning: true, style: { ...OHW_LOADER_STYLE, display: "none" }, children: /* @__PURE__ */ jsx36(OhwLoaderSpinner, {}) }),
|
|
27349
|
+
/* @__PURE__ */ jsx36("script", { suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: OHW_LOADER_PREHYDRATE_SCRIPT } }),
|
|
27350
|
+
subdomain && !isEditMode && showBranding && /* @__PURE__ */ jsx36(MadeWithOhhWells, {}),
|
|
28024
27351
|
bridgeRoot ? createPortal3(
|
|
28025
|
-
/* @__PURE__ */
|
|
28026
|
-
/* @__PURE__ */
|
|
28027
|
-
isEditMode && /* @__PURE__ */
|
|
27352
|
+
/* @__PURE__ */ jsxs23(Fragment10, { children: [
|
|
27353
|
+
/* @__PURE__ */ jsx36("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
|
|
27354
|
+
isEditMode && /* @__PURE__ */ jsx36(
|
|
28028
27355
|
AiSectionOverlay,
|
|
28029
27356
|
{
|
|
28030
27357
|
postToParent: postToParent2,
|
|
@@ -28032,7 +27359,7 @@ function OhhwellsBridge() {
|
|
|
28032
27359
|
onSelectionChange: handleAiSectionSelectionChange
|
|
28033
27360
|
}
|
|
28034
27361
|
),
|
|
28035
|
-
isEditMode && /* @__PURE__ */
|
|
27362
|
+
isEditMode && /* @__PURE__ */ jsx36(
|
|
28036
27363
|
AiMediaStripOverlay,
|
|
28037
27364
|
{
|
|
28038
27365
|
postToParent: postToParent2,
|
|
@@ -28041,7 +27368,7 @@ function OhhwellsBridge() {
|
|
|
28041
27368
|
clearInteractionChromeRef
|
|
28042
27369
|
}
|
|
28043
27370
|
),
|
|
28044
|
-
isEditMode && /* @__PURE__ */
|
|
27371
|
+
isEditMode && /* @__PURE__ */ jsx36(
|
|
28045
27372
|
AiPricingCardOverlay,
|
|
28046
27373
|
{
|
|
28047
27374
|
postToParent: postToParent2,
|
|
@@ -28049,21 +27376,12 @@ function OhhwellsBridge() {
|
|
|
28049
27376
|
applyTreeLocalRef
|
|
28050
27377
|
}
|
|
28051
27378
|
),
|
|
28052
|
-
|
|
28053
|
-
AiVideoOverlay,
|
|
28054
|
-
{
|
|
28055
|
-
postToParent: postToParent2,
|
|
28056
|
-
aiSectionsRef,
|
|
28057
|
-
applyTreeLocalRef,
|
|
28058
|
-
clearInteractionChromeRef
|
|
28059
|
-
}
|
|
28060
|
-
),
|
|
28061
|
-
isSectionDragging && sectionDropSlots.map((slot, i) => /* @__PURE__ */ jsx37(
|
|
27379
|
+
isSectionDragging && sectionDropSlots.map((slot, i) => /* @__PURE__ */ jsx36(
|
|
28062
27380
|
"div",
|
|
28063
27381
|
{
|
|
28064
27382
|
className: "pointer-events-none fixed z-2147483646",
|
|
28065
27383
|
style: { left: slot.left, top: slot.y, width: slot.width, height: 3, transform: "translateY(-50%)" },
|
|
28066
|
-
children: /* @__PURE__ */
|
|
27384
|
+
children: /* @__PURE__ */ jsx36(
|
|
28067
27385
|
DropIndicator,
|
|
28068
27386
|
{
|
|
28069
27387
|
direction: "horizontal",
|
|
@@ -28074,7 +27392,7 @@ function OhhwellsBridge() {
|
|
|
28074
27392
|
},
|
|
28075
27393
|
`section-drop-${slot.insertIndex}-${i}`
|
|
28076
27394
|
)),
|
|
28077
|
-
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */
|
|
27395
|
+
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ jsx36(
|
|
28078
27396
|
MediaOverlay,
|
|
28079
27397
|
{
|
|
28080
27398
|
hover: { key, rect, elementType: "image", isDragOver: false, hasTextOverlap: false },
|
|
@@ -28085,7 +27403,7 @@ function OhhwellsBridge() {
|
|
|
28085
27403
|
},
|
|
28086
27404
|
`uploading-${key}`
|
|
28087
27405
|
)),
|
|
28088
|
-
mediaHover && !(mediaHover.key in uploadingRects) && mediaHover.key !== selectedMedia?.key && /* @__PURE__ */
|
|
27406
|
+
mediaHover && !(mediaHover.key in uploadingRects) && mediaHover.key !== selectedMedia?.key && /* @__PURE__ */ jsx36(
|
|
28089
27407
|
MediaOverlay,
|
|
28090
27408
|
{
|
|
28091
27409
|
hover: mediaHover,
|
|
@@ -28096,7 +27414,7 @@ function OhhwellsBridge() {
|
|
|
28096
27414
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
28097
27415
|
}
|
|
28098
27416
|
),
|
|
28099
|
-
selectedMedia && !(selectedMedia.key in uploadingRects) && !linkPopover && /* @__PURE__ */
|
|
27417
|
+
selectedMedia && !(selectedMedia.key in uploadingRects) && !linkPopover && /* @__PURE__ */ jsx36(
|
|
28100
27418
|
MediaOverlay,
|
|
28101
27419
|
{
|
|
28102
27420
|
hover: selectedMedia,
|
|
@@ -28108,7 +27426,7 @@ function OhhwellsBridge() {
|
|
|
28108
27426
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
28109
27427
|
}
|
|
28110
27428
|
),
|
|
28111
|
-
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */
|
|
27429
|
+
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ jsx36(
|
|
28112
27430
|
CarouselOverlay,
|
|
28113
27431
|
{
|
|
28114
27432
|
hover: carouselHover,
|
|
@@ -28116,10 +27434,10 @@ function OhhwellsBridge() {
|
|
|
28116
27434
|
cueOnly: !!carouselHover.fullBleedSectionId && carouselHover.fullBleedSectionId !== selectedAiSectionId
|
|
28117
27435
|
}
|
|
28118
27436
|
),
|
|
28119
|
-
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */
|
|
28120
|
-
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */
|
|
28121
|
-
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && selectedElRef.current !== buttonCollectionDragRef.current && /* @__PURE__ */
|
|
28122
|
-
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */
|
|
27437
|
+
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ jsx36(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
|
|
27438
|
+
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ jsx36(ItemInteractionLayer, { rect, state: "sibling-hint" }, `sibling-hint-${i}`)),
|
|
27439
|
+
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && selectedElRef.current !== buttonCollectionDragRef.current && /* @__PURE__ */ jsx36(ItemInteractionLayer, { rect: draggedItemRect, state: "dragging" }),
|
|
27440
|
+
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ jsx36(
|
|
28123
27441
|
"div",
|
|
28124
27442
|
{
|
|
28125
27443
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -28129,7 +27447,7 @@ function OhhwellsBridge() {
|
|
|
28129
27447
|
width: slot.width,
|
|
28130
27448
|
height: slot.height
|
|
28131
27449
|
},
|
|
28132
|
-
children: /* @__PURE__ */
|
|
27450
|
+
children: /* @__PURE__ */ jsx36(
|
|
28133
27451
|
DropIndicator,
|
|
28134
27452
|
{
|
|
28135
27453
|
direction: slot.direction,
|
|
@@ -28140,7 +27458,7 @@ function OhhwellsBridge() {
|
|
|
28140
27458
|
},
|
|
28141
27459
|
`footer-drop-${slot.direction}-${slot.columnIndex}-${slot.insertIndex}-${i}`
|
|
28142
27460
|
)),
|
|
28143
|
-
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */
|
|
27461
|
+
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ jsx36(
|
|
28144
27462
|
"div",
|
|
28145
27463
|
{
|
|
28146
27464
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -28150,7 +27468,7 @@ function OhhwellsBridge() {
|
|
|
28150
27468
|
width: slot.width,
|
|
28151
27469
|
height: slot.height
|
|
28152
27470
|
},
|
|
28153
|
-
children: /* @__PURE__ */
|
|
27471
|
+
children: /* @__PURE__ */ jsx36(
|
|
28154
27472
|
DropIndicator,
|
|
28155
27473
|
{
|
|
28156
27474
|
direction: slot.direction,
|
|
@@ -28161,7 +27479,7 @@ function OhhwellsBridge() {
|
|
|
28161
27479
|
},
|
|
28162
27480
|
`nav-drop-${slot.direction}-${slot.parentId ?? "root"}-${slot.insertIndex}-${i}`
|
|
28163
27481
|
)),
|
|
28164
|
-
isItemDragging && buttonDropSlots.map((slot, i) => /* @__PURE__ */
|
|
27482
|
+
isItemDragging && buttonDropSlots.map((slot, i) => /* @__PURE__ */ jsx36(
|
|
28165
27483
|
"div",
|
|
28166
27484
|
{
|
|
28167
27485
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -28171,7 +27489,7 @@ function OhhwellsBridge() {
|
|
|
28171
27489
|
width: slot.width,
|
|
28172
27490
|
height: slot.height
|
|
28173
27491
|
},
|
|
28174
|
-
children: /* @__PURE__ */
|
|
27492
|
+
children: /* @__PURE__ */ jsx36(
|
|
28175
27493
|
DropIndicator,
|
|
28176
27494
|
{
|
|
28177
27495
|
direction: slot.direction,
|
|
@@ -28182,10 +27500,10 @@ function OhhwellsBridge() {
|
|
|
28182
27500
|
},
|
|
28183
27501
|
`button-drop-${slot.direction}-${slot.insertIndex}-${i}`
|
|
28184
27502
|
)),
|
|
28185
|
-
hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */
|
|
28186
|
-
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */
|
|
28187
|
-
hoveredTextRect && !hoveredNavContainerRect && !hoveredItemRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */
|
|
28188
|
-
formPickRect && !isItemDragging && /* @__PURE__ */
|
|
27503
|
+
hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ jsx36(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
|
|
27504
|
+
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ jsx36(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
|
|
27505
|
+
hoveredTextRect && !hoveredNavContainerRect && !hoveredItemRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ jsx36(ItemInteractionLayer, { rect: hoveredTextRect, state: "hover" }),
|
|
27506
|
+
formPickRect && !isItemDragging && /* @__PURE__ */ jsx36(
|
|
28189
27507
|
ItemInteractionLayer,
|
|
28190
27508
|
{
|
|
28191
27509
|
rect: formPickRect,
|
|
@@ -28193,13 +27511,13 @@ function OhhwellsBridge() {
|
|
|
28193
27511
|
itemDragSurface: false,
|
|
28194
27512
|
toolbarAlign: "left",
|
|
28195
27513
|
chromeGap: 24,
|
|
28196
|
-
toolbar: fieldPickRect ? void 0 : /* @__PURE__ */
|
|
27514
|
+
toolbar: fieldPickRect ? void 0 : /* @__PURE__ */ jsxs23(
|
|
28197
27515
|
"div",
|
|
28198
27516
|
{
|
|
28199
27517
|
"data-ohw-form-toolbar": "",
|
|
28200
27518
|
className: "pointer-events-auto flex items-center gap-0.5 whitespace-nowrap rounded-lg border border-border bg-background p-1 shadow-md",
|
|
28201
27519
|
children: [
|
|
28202
|
-
/* @__PURE__ */
|
|
27520
|
+
/* @__PURE__ */ jsx36(
|
|
28203
27521
|
"button",
|
|
28204
27522
|
{
|
|
28205
27523
|
type: "button",
|
|
@@ -28207,11 +27525,11 @@ function OhhwellsBridge() {
|
|
|
28207
27525
|
className: "flex h-7 w-7 items-center justify-center rounded-md text-foreground transition-colors hover:bg-muted/80",
|
|
28208
27526
|
onClick: () => setFieldTypePickerOpen((open) => !open),
|
|
28209
27527
|
"data-ohw-add-field": "",
|
|
28210
|
-
children: /* @__PURE__ */
|
|
27528
|
+
children: /* @__PURE__ */ jsx36(Plus4, { size: 15, "aria-hidden": true })
|
|
28211
27529
|
}
|
|
28212
27530
|
),
|
|
28213
|
-
/* @__PURE__ */
|
|
28214
|
-
/* @__PURE__ */
|
|
27531
|
+
/* @__PURE__ */ jsx36("div", { className: "mx-0.5 h-5 w-px bg-border" }),
|
|
27532
|
+
/* @__PURE__ */ jsxs23(
|
|
28215
27533
|
"button",
|
|
28216
27534
|
{
|
|
28217
27535
|
type: "button",
|
|
@@ -28227,11 +27545,11 @@ function OhhwellsBridge() {
|
|
|
28227
27545
|
});
|
|
28228
27546
|
},
|
|
28229
27547
|
children: [
|
|
28230
|
-
/* @__PURE__ */
|
|
27548
|
+
/* @__PURE__ */ jsx36(Settings, { size: 14, "aria-hidden": true }),
|
|
28231
27549
|
"Form settings",
|
|
28232
27550
|
formPickCount ? (
|
|
28233
27551
|
// Counter pill, per the design — not a text suffix.
|
|
28234
|
-
/* @__PURE__ */
|
|
27552
|
+
/* @__PURE__ */ jsx36(
|
|
28235
27553
|
"span",
|
|
28236
27554
|
{
|
|
28237
27555
|
"data-ohw-form-count": "",
|
|
@@ -28243,8 +27561,8 @@ function OhhwellsBridge() {
|
|
|
28243
27561
|
]
|
|
28244
27562
|
}
|
|
28245
27563
|
),
|
|
28246
|
-
/* @__PURE__ */
|
|
28247
|
-
/* @__PURE__ */
|
|
27564
|
+
/* @__PURE__ */ jsx36("div", { className: "mx-0.5 h-5 w-px bg-border" }),
|
|
27565
|
+
/* @__PURE__ */ jsx36("div", { className: "flex items-center rounded-md bg-muted/70 p-0.5", children: ["default", "success"].map((state) => /* @__PURE__ */ jsx36(
|
|
28248
27566
|
"button",
|
|
28249
27567
|
{
|
|
28250
27568
|
type: "button",
|
|
@@ -28275,7 +27593,7 @@ function OhhwellsBridge() {
|
|
|
28275
27593
|
)
|
|
28276
27594
|
}
|
|
28277
27595
|
),
|
|
28278
|
-
formHoverRect && !isItemDragging && /* @__PURE__ */
|
|
27596
|
+
formHoverRect && !isItemDragging && /* @__PURE__ */ jsx36(
|
|
28279
27597
|
ItemInteractionLayer,
|
|
28280
27598
|
{
|
|
28281
27599
|
rect: formHoverRect,
|
|
@@ -28283,7 +27601,7 @@ function OhhwellsBridge() {
|
|
|
28283
27601
|
chromeGap: formHoverElRef.current && getFieldWrapper(formHoverElRef.current) ? 8 : 24
|
|
28284
27602
|
}
|
|
28285
27603
|
),
|
|
28286
|
-
fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */
|
|
27604
|
+
fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ jsx36(
|
|
28287
27605
|
ItemInteractionLayer,
|
|
28288
27606
|
{
|
|
28289
27607
|
rect: fieldPickRect,
|
|
@@ -28295,7 +27613,7 @@ function OhhwellsBridge() {
|
|
|
28295
27613
|
dragHandleLabel: "Reorder field",
|
|
28296
27614
|
onDragHandleDragStart: handleFieldDragStart,
|
|
28297
27615
|
onDragHandleDragEnd: handleFieldDragEnd,
|
|
28298
|
-
toolbar: /* @__PURE__ */
|
|
27616
|
+
toolbar: /* @__PURE__ */ jsx36(
|
|
28299
27617
|
FormFieldToolbar,
|
|
28300
27618
|
{
|
|
28301
27619
|
type: fieldPickState.type,
|
|
@@ -28308,12 +27626,12 @@ function OhhwellsBridge() {
|
|
|
28308
27626
|
)
|
|
28309
27627
|
}
|
|
28310
27628
|
),
|
|
28311
|
-
fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */
|
|
27629
|
+
fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */ jsx36(
|
|
28312
27630
|
"div",
|
|
28313
27631
|
{
|
|
28314
27632
|
className: "pointer-events-none fixed z-[2147483644]",
|
|
28315
27633
|
style: { top: slot.top, left: slot.left, width: slot.width },
|
|
28316
|
-
children: /* @__PURE__ */
|
|
27634
|
+
children: /* @__PURE__ */ jsx36(
|
|
28317
27635
|
DropIndicator,
|
|
28318
27636
|
{
|
|
28319
27637
|
direction: "horizontal",
|
|
@@ -28326,7 +27644,7 @@ function OhhwellsBridge() {
|
|
|
28326
27644
|
)) : null,
|
|
28327
27645
|
fieldTypePickerOpen && formPickRect ? (() => {
|
|
28328
27646
|
const toolbar = document.querySelector("[data-ohw-form-toolbar]")?.getBoundingClientRect();
|
|
28329
|
-
return /* @__PURE__ */
|
|
27647
|
+
return /* @__PURE__ */ jsx36(
|
|
28330
27648
|
"div",
|
|
28331
27649
|
{
|
|
28332
27650
|
className: "pointer-events-none fixed z-[2147483645]",
|
|
@@ -28334,12 +27652,12 @@ function OhhwellsBridge() {
|
|
|
28334
27652
|
top: toolbar ? toolbar.bottom + 6 : formPickRect.top + 16,
|
|
28335
27653
|
left: toolbar ? toolbar.left : formPickRect.left + 24
|
|
28336
27654
|
},
|
|
28337
|
-
children: /* @__PURE__ */
|
|
27655
|
+
children: /* @__PURE__ */ jsx36(FieldTypePicker, { onPick: handleAddField })
|
|
28338
27656
|
}
|
|
28339
27657
|
);
|
|
28340
27658
|
})() : null,
|
|
28341
|
-
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */
|
|
28342
|
-
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */
|
|
27659
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ jsx36(NavbarContainerChrome, { rect: toolbarRect, onAdd: handleAddTopLevelNavItem }),
|
|
27660
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ jsx36(
|
|
28343
27661
|
FooterContainerChrome,
|
|
28344
27662
|
{
|
|
28345
27663
|
rect: toolbarRect,
|
|
@@ -28347,7 +27665,7 @@ function OhhwellsBridge() {
|
|
|
28347
27665
|
addDisabled: !canAddFooterColumn()
|
|
28348
27666
|
}
|
|
28349
27667
|
),
|
|
28350
|
-
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */
|
|
27668
|
+
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */ jsx36(
|
|
28351
27669
|
ItemInteractionLayer,
|
|
28352
27670
|
{
|
|
28353
27671
|
rect: isItemDragging && draggedItemRect && (footerDragRef.current?.wasSelected || navDragRef.current?.wasSelected || selectedElRef.current === buttonCollectionDragRef.current) ? draggedItemRect : toolbarRect,
|
|
@@ -28367,7 +27685,7 @@ function OhhwellsBridge() {
|
|
|
28367
27685
|
onItemPointerDown: toolbarVariant === "logo" ? void 0 : handleItemChromePointerDown,
|
|
28368
27686
|
onItemClick: toolbarVariant === "logo" ? void 0 : handleItemChromeClick,
|
|
28369
27687
|
itemDragSurface: toolbarVariant !== "logo" && !isFooterFrameSelection && !selectedIsSocialsRow,
|
|
28370
|
-
toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */
|
|
27688
|
+
toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */ jsx36(
|
|
28371
27689
|
ItemActionToolbar,
|
|
28372
27690
|
{
|
|
28373
27691
|
onEditLink: openLinkPopoverForSelected,
|
|
@@ -28418,8 +27736,8 @@ function OhhwellsBridge() {
|
|
|
28418
27736
|
) : void 0
|
|
28419
27737
|
}
|
|
28420
27738
|
),
|
|
28421
|
-
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && !isRectOutsideClip(toolbarRect, getIframeVisibleClip(parentScrollRef.current)) && /* @__PURE__ */
|
|
28422
|
-
/* @__PURE__ */
|
|
27739
|
+
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && !isRectOutsideClip(toolbarRect, getIframeVisibleClip(parentScrollRef.current)) && /* @__PURE__ */ jsxs23(Fragment10, { children: [
|
|
27740
|
+
/* @__PURE__ */ jsx36(
|
|
28423
27741
|
EditGlowChrome,
|
|
28424
27742
|
{
|
|
28425
27743
|
rect: toolbarRect,
|
|
@@ -28429,7 +27747,7 @@ function OhhwellsBridge() {
|
|
|
28429
27747
|
hideHandle: isItemDragging
|
|
28430
27748
|
}
|
|
28431
27749
|
),
|
|
28432
|
-
/* @__PURE__ */
|
|
27750
|
+
/* @__PURE__ */ jsx36(
|
|
28433
27751
|
FloatingToolbar,
|
|
28434
27752
|
{
|
|
28435
27753
|
rect: toolbarRect,
|
|
@@ -28442,7 +27760,7 @@ function OhhwellsBridge() {
|
|
|
28442
27760
|
}
|
|
28443
27761
|
)
|
|
28444
27762
|
] }),
|
|
28445
|
-
maxBadge && /* @__PURE__ */
|
|
27763
|
+
maxBadge && /* @__PURE__ */ jsxs23(
|
|
28446
27764
|
"div",
|
|
28447
27765
|
{
|
|
28448
27766
|
"data-ohw-max-badge": "",
|
|
@@ -28468,7 +27786,7 @@ function OhhwellsBridge() {
|
|
|
28468
27786
|
]
|
|
28469
27787
|
}
|
|
28470
27788
|
),
|
|
28471
|
-
toggleState && !linkPopover && /* @__PURE__ */
|
|
27789
|
+
toggleState && !linkPopover && /* @__PURE__ */ jsx36(
|
|
28472
27790
|
StateToggle,
|
|
28473
27791
|
{
|
|
28474
27792
|
rect: toggleState.rect,
|
|
@@ -28477,15 +27795,15 @@ function OhhwellsBridge() {
|
|
|
28477
27795
|
onStateChange: handleStateChange
|
|
28478
27796
|
}
|
|
28479
27797
|
),
|
|
28480
|
-
sectionGap && !linkPopover && /* @__PURE__ */
|
|
27798
|
+
sectionGap && !linkPopover && /* @__PURE__ */ jsxs23(
|
|
28481
27799
|
"div",
|
|
28482
27800
|
{
|
|
28483
27801
|
"data-ohw-section-insert-line": "",
|
|
28484
27802
|
className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
|
|
28485
27803
|
style: { top: sectionGap.y, transform: "translateY(-50%)" },
|
|
28486
27804
|
children: [
|
|
28487
|
-
/* @__PURE__ */
|
|
28488
|
-
/* @__PURE__ */
|
|
27805
|
+
/* @__PURE__ */ jsx36("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } }),
|
|
27806
|
+
/* @__PURE__ */ jsx36(
|
|
28489
27807
|
Badge,
|
|
28490
27808
|
{
|
|
28491
27809
|
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",
|
|
@@ -28502,11 +27820,11 @@ function OhhwellsBridge() {
|
|
|
28502
27820
|
children: "Add Section"
|
|
28503
27821
|
}
|
|
28504
27822
|
),
|
|
28505
|
-
/* @__PURE__ */
|
|
27823
|
+
/* @__PURE__ */ jsx36("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } })
|
|
28506
27824
|
]
|
|
28507
27825
|
}
|
|
28508
27826
|
),
|
|
28509
|
-
linkPopover && dialogPortalContainer ? /* @__PURE__ */
|
|
27827
|
+
linkPopover && dialogPortalContainer ? /* @__PURE__ */ jsx36(
|
|
28510
27828
|
LinkPopover,
|
|
28511
27829
|
{
|
|
28512
27830
|
panelRef: linkPopoverPanelRef,
|
|
@@ -28523,7 +27841,7 @@ function OhhwellsBridge() {
|
|
|
28523
27841
|
},
|
|
28524
27842
|
linkPopover.key
|
|
28525
27843
|
) : null,
|
|
28526
|
-
floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */
|
|
27844
|
+
floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */ jsx36(
|
|
28527
27845
|
FloatingPanel,
|
|
28528
27846
|
{
|
|
28529
27847
|
open: true,
|
|
@@ -28533,7 +27851,7 @@ function OhhwellsBridge() {
|
|
|
28533
27851
|
onPositionChange: setFloatingPanelPos,
|
|
28534
27852
|
parentScroll: parentScrollSnap ?? parentScrollRef.current,
|
|
28535
27853
|
onClose: closeFloatingPanelOnly,
|
|
28536
|
-
children: /* @__PURE__ */
|
|
27854
|
+
children: /* @__PURE__ */ jsx36(
|
|
28537
27855
|
SocialsDisplayPanel,
|
|
28538
27856
|
{
|
|
28539
27857
|
display: socialsDisplayFor(floatingPanel.row, editContentRef.current),
|
|
@@ -28554,19 +27872,19 @@ function OhhwellsBridge() {
|
|
|
28554
27872
|
const tokens = tokensFromButton(button);
|
|
28555
27873
|
const current = assignmentFor(button, editContentRef.current, tokens);
|
|
28556
27874
|
void buttonStyleTick;
|
|
28557
|
-
return /* @__PURE__ */
|
|
27875
|
+
return /* @__PURE__ */ jsx36(
|
|
28558
27876
|
FloatingPanel,
|
|
28559
27877
|
{
|
|
28560
27878
|
open: true,
|
|
28561
27879
|
title: floatingPanel.title,
|
|
28562
27880
|
context: floatingPanel.context,
|
|
28563
|
-
icon: /* @__PURE__ */
|
|
27881
|
+
icon: /* @__PURE__ */ jsx36(Brush2, { className: "size-4 shrink-0", "aria-hidden": true }),
|
|
28564
27882
|
position: floatingPanelPos,
|
|
28565
27883
|
onPositionChange: setFloatingPanelPos,
|
|
28566
27884
|
parentScroll: parentScrollSnap ?? parentScrollRef.current,
|
|
28567
27885
|
onClose: closeFloatingPanelOnly,
|
|
28568
27886
|
bodyClassName: "gap-5",
|
|
28569
|
-
children: /* @__PURE__ */
|
|
27887
|
+
children: /* @__PURE__ */ jsx36(
|
|
28570
27888
|
ButtonStylePanel,
|
|
28571
27889
|
{
|
|
28572
27890
|
variants: tokens.variants,
|
|
@@ -28594,10 +27912,10 @@ function OhhwellsBridge() {
|
|
|
28594
27912
|
|
|
28595
27913
|
// src/ui/EmptySection.tsx
|
|
28596
27914
|
import Link3 from "next/link";
|
|
28597
|
-
import { Fragment as
|
|
27915
|
+
import { Fragment as Fragment11, jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
28598
27916
|
function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey }) {
|
|
28599
|
-
return /* @__PURE__ */
|
|
28600
|
-
/* @__PURE__ */
|
|
27917
|
+
return /* @__PURE__ */ jsxs24(Fragment11, { children: [
|
|
27918
|
+
/* @__PURE__ */ jsx37(
|
|
28601
27919
|
"p",
|
|
28602
27920
|
{
|
|
28603
27921
|
style: {
|
|
@@ -28609,10 +27927,10 @@ function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey
|
|
|
28609
27927
|
color: "var(--brand-accent)",
|
|
28610
27928
|
marginBottom: "1.5rem"
|
|
28611
27929
|
},
|
|
28612
|
-
children: /* @__PURE__ */
|
|
27930
|
+
children: /* @__PURE__ */ jsx37(Link3, { href: homeHref, style: { color: "inherit" }, children: /* @__PURE__ */ jsx37("span", { ...eyebrowKey ? { "data-ohw-editable": "text", "data-ohw-key": eyebrowKey } : {}, children: "Home" }) })
|
|
28613
27931
|
}
|
|
28614
27932
|
),
|
|
28615
|
-
/* @__PURE__ */
|
|
27933
|
+
/* @__PURE__ */ jsx37(
|
|
28616
27934
|
"h1",
|
|
28617
27935
|
{
|
|
28618
27936
|
style: {
|
|
@@ -28627,7 +27945,7 @@ function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey
|
|
|
28627
27945
|
children: title
|
|
28628
27946
|
}
|
|
28629
27947
|
),
|
|
28630
|
-
/* @__PURE__ */
|
|
27948
|
+
/* @__PURE__ */ jsx37(
|
|
28631
27949
|
"p",
|
|
28632
27950
|
{
|
|
28633
27951
|
style: {
|