@ohhwells/bridge 0.1.118 → 0.1.119
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 +1281 -643
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1253 -615
- package/dist/index.js.map +1 -1
- package/dist/styles.css +4 -0
- package/package.json +1 -1
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 useCallback9, useEffect as useEffect14, useLayoutEffect as useLayoutEffect5, useRef as useRef11, useState as useState15 } from "react";
|
|
5
5
|
import { createRoot as createRoot2 } from "react-dom/client";
|
|
6
6
|
import { flushSync as flushSync2 } from "react-dom";
|
|
7
7
|
|
|
@@ -102,13 +102,15 @@ function serializeAiSectionsState(state) {
|
|
|
102
102
|
}
|
|
103
103
|
function applyTreeToState(state, payload) {
|
|
104
104
|
const insertBefore = payload.mode === "insert" && payload.position === "before";
|
|
105
|
+
const priorEntry = state.sections.find((existing) => existing.id === payload.id);
|
|
106
|
+
const selfEdit = payload.mode === "replace" && payload.targetSectionId === payload.id;
|
|
105
107
|
const entry = {
|
|
106
108
|
id: payload.id,
|
|
107
109
|
label: payload.label ?? "Generated section",
|
|
108
110
|
...typeof payload.path === "string" && payload.path ? { path: payload.path } : {},
|
|
109
|
-
afterSection: payload.mode === "insert" && !insertBefore ? payload.targetSectionId ?? null : null,
|
|
110
|
-
...insertBefore && payload.targetSectionId ? { beforeSection: payload.targetSectionId } : {},
|
|
111
|
-
...payload.mode === "replace" && payload.targetSectionId ? { replaces: payload.targetSectionId } : {},
|
|
111
|
+
afterSection: selfEdit ? priorEntry?.afterSection ?? null : payload.mode === "insert" && !insertBefore ? payload.targetSectionId ?? null : null,
|
|
112
|
+
...selfEdit ? priorEntry?.beforeSection ? { beforeSection: priorEntry.beforeSection } : {} : insertBefore && payload.targetSectionId ? { beforeSection: payload.targetSectionId } : {},
|
|
113
|
+
...selfEdit ? priorEntry?.replaces ? { replaces: priorEntry.replaces } : {} : payload.mode === "replace" && payload.targetSectionId ? { replaces: payload.targetSectionId } : {},
|
|
112
114
|
tree: payload.tree,
|
|
113
115
|
media: payload.media ?? {},
|
|
114
116
|
...payload.brand && typeof payload.brand === "object" ? { brand: payload.brand } : {}
|
|
@@ -1289,9 +1291,6 @@ var typeStyle = (spec, font) => ({
|
|
|
1289
1291
|
var str = (value) => typeof value === "string" ? value : "";
|
|
1290
1292
|
var cardRadius = (slots) => slots.cornerStyle === "sharp" ? 0 : AI_TREE_TOKENS.radiusCard;
|
|
1291
1293
|
var featureLines = (value) => value.split(/\n|<br\s*\/?>/i).map((line) => line.trim()).filter(Boolean);
|
|
1292
|
-
var CHECK_MASK = `data:image/svg+xml,${encodeURIComponent(
|
|
1293
|
-
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>'
|
|
1294
|
-
)}`;
|
|
1295
1294
|
var AI_MOBILE_CSS = [
|
|
1296
1295
|
"@media (max-width: 768px){",
|
|
1297
1296
|
"[data-ai-section]{overflow-x:hidden}",
|
|
@@ -1308,12 +1307,6 @@ var AI_MOBILE_CSS = [
|
|
|
1308
1307
|
"[data-ai-grid]{grid-template-columns:repeat(2, 1fr) !important}",
|
|
1309
1308
|
"}"
|
|
1310
1309
|
].join("");
|
|
1311
|
-
var FEATURE_LINE_CSS = [
|
|
1312
|
-
"[data-ai-features]>div{position:relative;padding-left:40px;min-height:24px}",
|
|
1313
|
-
'[data-ai-features]>div::before{content:"";position:absolute;left:0;top:1px;width:24px;height:24px;',
|
|
1314
|
-
`background-color:currentColor;-webkit-mask:url("${CHECK_MASK}") no-repeat 0 0/24px 24px;`,
|
|
1315
|
-
`mask:url("${CHECK_MASK}") no-repeat 0 0/24px 24px}`
|
|
1316
|
-
].join("");
|
|
1317
1310
|
function buttonShellStyle(ctx, fullWidth) {
|
|
1318
1311
|
const bs = ctx.buttonStyle;
|
|
1319
1312
|
if (bs) {
|
|
@@ -1369,6 +1362,58 @@ function accentBandContext(brand) {
|
|
|
1369
1362
|
buttonLabel: p.light
|
|
1370
1363
|
};
|
|
1371
1364
|
}
|
|
1365
|
+
function readableForeground(bg, brand) {
|
|
1366
|
+
const darkC = hexContrast(bg, brand.palette.dark);
|
|
1367
|
+
const lightC = hexContrast(bg, AI_TREE_TOKENS.textPrimaryForeground);
|
|
1368
|
+
if (darkC === null || lightC === null) return brand.palette.dark;
|
|
1369
|
+
return darkC > lightC ? brand.palette.dark : AI_TREE_TOKENS.textPrimaryForeground;
|
|
1370
|
+
}
|
|
1371
|
+
function hexWithAlpha(hex, alpha) {
|
|
1372
|
+
const m = /^#([0-9a-f]{6})$/i.exec(hex.trim());
|
|
1373
|
+
if (!m) return hex;
|
|
1374
|
+
const r2 = parseInt(m[1].slice(0, 2), 16);
|
|
1375
|
+
const g = parseInt(m[1].slice(2, 4), 16);
|
|
1376
|
+
const b = parseInt(m[1].slice(4, 6), 16);
|
|
1377
|
+
return `rgba(${r2}, ${g}, ${b}, ${alpha})`;
|
|
1378
|
+
}
|
|
1379
|
+
function pricingIconColor(token, brand, fallback) {
|
|
1380
|
+
switch (token) {
|
|
1381
|
+
case "primary":
|
|
1382
|
+
return brand.palette.primary;
|
|
1383
|
+
case "accent":
|
|
1384
|
+
return brand.palette.accent;
|
|
1385
|
+
case "light":
|
|
1386
|
+
return brand.palette.light;
|
|
1387
|
+
case "muted":
|
|
1388
|
+
return hexWithAlpha(brand.palette.dark, 0.45);
|
|
1389
|
+
case "dark":
|
|
1390
|
+
return brand.palette.dark;
|
|
1391
|
+
default:
|
|
1392
|
+
return fallback;
|
|
1393
|
+
}
|
|
1394
|
+
}
|
|
1395
|
+
var PRICING_LIFTED_SHADOW = "0 24px 48px -16px rgba(12, 10, 9, 0.28)";
|
|
1396
|
+
function pricingCardEmphasis(featured, ctx, hasBg) {
|
|
1397
|
+
const dark = ctx.brand.palette.dark;
|
|
1398
|
+
const background = hasBg ? ctx.brand.palette.light : "transparent";
|
|
1399
|
+
const border = `1px solid ${dark}`;
|
|
1400
|
+
if (!featured.enabled) {
|
|
1401
|
+
return { background, border, fg: dark };
|
|
1402
|
+
}
|
|
1403
|
+
switch (featured.treatment) {
|
|
1404
|
+
case "lifted":
|
|
1405
|
+
return { background, border, boxShadow: PRICING_LIFTED_SHADOW, fg: dark };
|
|
1406
|
+
case "inverted":
|
|
1407
|
+
return { background: dark, border, fg: ctx.brand.palette.light };
|
|
1408
|
+
case "accent-header": {
|
|
1409
|
+
const headerBg = ctx.brand.palette.accent;
|
|
1410
|
+
return { background, border, fg: dark, headerBg, headerFg: readableForeground(headerBg, ctx.brand) };
|
|
1411
|
+
}
|
|
1412
|
+
case "outlined":
|
|
1413
|
+
default:
|
|
1414
|
+
return { background, border, outline: `2px solid ${ctx.brand.palette.primary}`, fg: dark };
|
|
1415
|
+
}
|
|
1416
|
+
}
|
|
1372
1417
|
function textAttrs(ctx, path) {
|
|
1373
1418
|
return ctx.keyFor ? { "data-ohw-key": ctx.keyFor(path), "data-ohw-editable": "text" } : {};
|
|
1374
1419
|
}
|
|
@@ -1439,7 +1484,8 @@ function ButtonEl({
|
|
|
1439
1484
|
slots,
|
|
1440
1485
|
ctx,
|
|
1441
1486
|
path,
|
|
1442
|
-
fullWidth
|
|
1487
|
+
fullWidth,
|
|
1488
|
+
secondaryColor
|
|
1443
1489
|
}) {
|
|
1444
1490
|
const secondary = slots.variant === "secondary";
|
|
1445
1491
|
const href = str(slots.href);
|
|
@@ -1456,8 +1502,9 @@ function ButtonEl({
|
|
|
1456
1502
|
justifyContent: "center",
|
|
1457
1503
|
textDecoration: "none",
|
|
1458
1504
|
cursor: "pointer",
|
|
1505
|
+
whiteSpace: "nowrap",
|
|
1459
1506
|
...buttonShellStyle(ctx, fullWidth),
|
|
1460
|
-
...secondary ? { border: `1px solid ${ctx.brand.palette.dark}`, color: ctx.brand.palette.dark } : (
|
|
1507
|
+
...secondary ? { border: `1px solid ${secondaryColor ?? ctx.brand.palette.dark}`, color: secondaryColor ?? ctx.brand.palette.dark } : (
|
|
1461
1508
|
// Off-band, prefer the template button's measured fill/label pair — a template may
|
|
1462
1509
|
// fill its CTAs with any token (hvac: accent bg, primary text). On an accent band
|
|
1463
1510
|
// the flipped palette keeps contrast, so the brand-driven colours stay.
|
|
@@ -1628,89 +1675,141 @@ function PersonEl({
|
|
|
1628
1675
|
] })
|
|
1629
1676
|
] });
|
|
1630
1677
|
}
|
|
1678
|
+
function pricingFeatureItems(rawFeatures) {
|
|
1679
|
+
if (typeof rawFeatures === "string") {
|
|
1680
|
+
return featureLines(rawFeatures).map((text) => ({ text, html: true }));
|
|
1681
|
+
}
|
|
1682
|
+
if (!Array.isArray(rawFeatures)) return [];
|
|
1683
|
+
return rawFeatures.filter((item) => !!item && typeof item === "object" && typeof item.text === "string").map((item) => ({
|
|
1684
|
+
text: item.text,
|
|
1685
|
+
icon: typeof item.icon === "string" ? item.icon : void 0,
|
|
1686
|
+
iconColor: typeof item.iconColor === "string" ? item.iconColor : void 0
|
|
1687
|
+
}));
|
|
1688
|
+
}
|
|
1689
|
+
function pricingFeaturedConfig(raw) {
|
|
1690
|
+
if (raw === true) return { enabled: true };
|
|
1691
|
+
if (raw && typeof raw === "object" && !Array.isArray(raw)) return raw;
|
|
1692
|
+
return {};
|
|
1693
|
+
}
|
|
1631
1694
|
function PricingCard({ node, ctx, path }) {
|
|
1632
1695
|
const slots = node.slots ?? {};
|
|
1633
1696
|
const hasBg = slots.background === true;
|
|
1634
|
-
const
|
|
1635
|
-
const
|
|
1636
|
-
const
|
|
1637
|
-
const features =
|
|
1697
|
+
const featured = pricingFeaturedConfig(slots.featured);
|
|
1698
|
+
const emphasis = pricingCardEmphasis(featured, ctx, hasBg);
|
|
1699
|
+
const fg = emphasis.fg;
|
|
1700
|
+
const features = pricingFeatureItems(slots.features);
|
|
1701
|
+
const buttons = (node.children ?? []).map((child, i) => ({ child, i })).filter((entry) => entry.child.type === "button");
|
|
1702
|
+
const headingBlock = /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: AI_TREE_TOKENS.spacing2 }, children: [
|
|
1703
|
+
str(slots.heading) && /* @__PURE__ */ jsx(
|
|
1704
|
+
"div",
|
|
1705
|
+
{
|
|
1706
|
+
...textAttrs(ctx, `${path}.heading`),
|
|
1707
|
+
style: { ...typeStyle({ size: 20, line: 1.4, weight: 700 }, ctx.brand.fonts.body), color: emphasis.headerFg ?? fg },
|
|
1708
|
+
children: str(slots.heading)
|
|
1709
|
+
}
|
|
1710
|
+
),
|
|
1711
|
+
str(slots.price) && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "baseline", color: emphasis.headerFg ?? fg }, children: [
|
|
1712
|
+
/* @__PURE__ */ jsx("span", { ...textAttrs(ctx, `${path}.price`), style: typeStyle(AI_TREE_TOKENS.type.display, ctx.brand.fonts.heading), children: str(slots.price) }),
|
|
1713
|
+
/* @__PURE__ */ jsx(
|
|
1714
|
+
"span",
|
|
1715
|
+
{
|
|
1716
|
+
...textAttrs(ctx, `${path}.pricePeriod`),
|
|
1717
|
+
style: typeStyle({ size: 32, line: 1.25, weight: 700 }, ctx.brand.fonts.heading),
|
|
1718
|
+
children: str(slots.pricePeriod)
|
|
1719
|
+
}
|
|
1720
|
+
)
|
|
1721
|
+
] }),
|
|
1722
|
+
str(slots.text) && /* @__PURE__ */ jsx(
|
|
1723
|
+
"div",
|
|
1724
|
+
{
|
|
1725
|
+
...textAttrs(ctx, `${path}.text`),
|
|
1726
|
+
style: { ...typeStyle({ size: 18, line: 1.45, weight: 700 }, ctx.brand.fonts.body), color: emphasis.headerFg ?? fg },
|
|
1727
|
+
dangerouslySetInnerHTML: { __html: str(slots.text) }
|
|
1728
|
+
}
|
|
1729
|
+
)
|
|
1730
|
+
] });
|
|
1638
1731
|
return /* @__PURE__ */ jsxs(
|
|
1639
1732
|
"div",
|
|
1640
1733
|
{
|
|
1641
1734
|
"data-ohw-card": "",
|
|
1735
|
+
"data-ohw-pricing-card": "",
|
|
1736
|
+
"data-ohw-pricing-index": pricingIndexFromPath(path),
|
|
1642
1737
|
style: {
|
|
1643
|
-
background:
|
|
1644
|
-
border:
|
|
1738
|
+
background: emphasis.background,
|
|
1739
|
+
border: emphasis.border,
|
|
1645
1740
|
borderRadius: cardRadius(slots),
|
|
1646
1741
|
padding: AI_TREE_TOKENS.paddingBlock,
|
|
1647
1742
|
display: "flex",
|
|
1648
1743
|
flexDirection: "column",
|
|
1649
1744
|
gap: AI_TREE_TOKENS.spacing8,
|
|
1650
|
-
outline:
|
|
1651
|
-
|
|
1745
|
+
outline: emphasis.outline,
|
|
1746
|
+
boxShadow: emphasis.boxShadow,
|
|
1747
|
+
minWidth: 0,
|
|
1748
|
+
position: "relative"
|
|
1652
1749
|
},
|
|
1653
1750
|
children: [
|
|
1654
|
-
/* @__PURE__ */
|
|
1655
|
-
|
|
1656
|
-
|
|
1657
|
-
{
|
|
1658
|
-
|
|
1659
|
-
|
|
1660
|
-
|
|
1661
|
-
|
|
1662
|
-
|
|
1663
|
-
|
|
1664
|
-
|
|
1665
|
-
|
|
1666
|
-
|
|
1667
|
-
|
|
1668
|
-
|
|
1669
|
-
|
|
1670
|
-
|
|
1671
|
-
|
|
1672
|
-
|
|
1673
|
-
|
|
1674
|
-
|
|
1675
|
-
|
|
1676
|
-
|
|
1677
|
-
|
|
1678
|
-
|
|
1679
|
-
|
|
1680
|
-
|
|
1681
|
-
)
|
|
1682
|
-
] }),
|
|
1683
|
-
features && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1684
|
-
/* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${dark}`, opacity: 0.2, margin: 0, width: "100%" } }),
|
|
1751
|
+
featured.enabled && str(featured.badge) && /* @__PURE__ */ jsx(
|
|
1752
|
+
"div",
|
|
1753
|
+
{
|
|
1754
|
+
style: {
|
|
1755
|
+
alignSelf: "flex-start",
|
|
1756
|
+
padding: `${AI_TREE_TOKENS.spacing2 / 2}px ${AI_TREE_TOKENS.spacing3}px`,
|
|
1757
|
+
borderRadius: 999,
|
|
1758
|
+
background: ctx.brand.palette.primary,
|
|
1759
|
+
color: primaryButtonLabel(ctx.brand),
|
|
1760
|
+
...typeStyle(AI_TREE_TOKENS.type.eyebrow, ctx.brand.fonts.body)
|
|
1761
|
+
},
|
|
1762
|
+
children: str(featured.badge)
|
|
1763
|
+
}
|
|
1764
|
+
),
|
|
1765
|
+
emphasis.headerBg ? /* @__PURE__ */ jsx(
|
|
1766
|
+
"div",
|
|
1767
|
+
{
|
|
1768
|
+
style: {
|
|
1769
|
+
background: emphasis.headerBg,
|
|
1770
|
+
margin: `-${AI_TREE_TOKENS.paddingBlock}px -${AI_TREE_TOKENS.paddingBlock}px 0`,
|
|
1771
|
+
padding: AI_TREE_TOKENS.paddingBlock,
|
|
1772
|
+
borderRadius: `${cardRadius(slots)}px ${cardRadius(slots)}px 0 0`
|
|
1773
|
+
},
|
|
1774
|
+
children: headingBlock
|
|
1775
|
+
}
|
|
1776
|
+
) : headingBlock,
|
|
1777
|
+
features.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1778
|
+
/* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${fg}`, opacity: 0.2, margin: 0, width: "100%" } }),
|
|
1685
1779
|
/* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: AI_TREE_TOKENS.spacing4 }, children: [
|
|
1686
1780
|
/* @__PURE__ */ jsx(
|
|
1687
1781
|
"div",
|
|
1688
1782
|
{
|
|
1689
1783
|
...textAttrs(ctx, `${path}.featuresLabel`),
|
|
1690
|
-
style: { ...typeStyle({ size: 24, line: 1.3, weight: 700 }, ctx.brand.fonts.body), color:
|
|
1784
|
+
style: { ...typeStyle({ size: 24, line: 1.3, weight: 700 }, ctx.brand.fonts.body), color: fg },
|
|
1691
1785
|
children: str(slots.featuresLabel) || "Includes:"
|
|
1692
1786
|
}
|
|
1693
1787
|
),
|
|
1694
|
-
/* @__PURE__ */ jsx("style", { children:
|
|
1695
|
-
|
|
1696
|
-
|
|
1697
|
-
{
|
|
1698
|
-
|
|
1699
|
-
|
|
1700
|
-
|
|
1701
|
-
|
|
1702
|
-
|
|
1703
|
-
|
|
1704
|
-
|
|
1705
|
-
|
|
1706
|
-
|
|
1707
|
-
|
|
1708
|
-
|
|
1709
|
-
|
|
1710
|
-
|
|
1788
|
+
/* @__PURE__ */ jsx("div", { "data-ai-features": "", style: { display: "flex", flexDirection: "column", gap: AI_TREE_TOKENS.spacing4, padding: `${AI_TREE_TOKENS.spacing2}px 0` }, children: features.map((item, i) => {
|
|
1789
|
+
const Icon = lucideByName(item.icon || "check");
|
|
1790
|
+
const iconColor = pricingIconColor(item.iconColor, ctx.brand, fg);
|
|
1791
|
+
return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: AI_TREE_TOKENS.spacing3 }, children: [
|
|
1792
|
+
Icon && /* @__PURE__ */ jsx(Icon, { size: 20, color: iconColor }),
|
|
1793
|
+
item.html ? /* @__PURE__ */ jsx(
|
|
1794
|
+
"span",
|
|
1795
|
+
{
|
|
1796
|
+
...textAttrs(ctx, `${path}.features.${i}.text`),
|
|
1797
|
+
style: { ...typeStyle(AI_TREE_TOKENS.type.bodyL, ctx.brand.fonts.body), color: fg },
|
|
1798
|
+
dangerouslySetInnerHTML: { __html: item.text }
|
|
1799
|
+
}
|
|
1800
|
+
) : /* @__PURE__ */ jsx(
|
|
1801
|
+
"span",
|
|
1802
|
+
{
|
|
1803
|
+
...textAttrs(ctx, `${path}.features.${i}.text`),
|
|
1804
|
+
style: { ...typeStyle(AI_TREE_TOKENS.type.bodyL, ctx.brand.fonts.body), color: fg },
|
|
1805
|
+
children: item.text
|
|
1806
|
+
}
|
|
1807
|
+
)
|
|
1808
|
+
] }, i);
|
|
1809
|
+
}) })
|
|
1711
1810
|
] })
|
|
1712
1811
|
] }),
|
|
1713
|
-
|
|
1812
|
+
buttons.length > 0 && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: AI_TREE_TOKENS.spacing3 }, children: buttons.map(({ child, i }) => /* @__PURE__ */ jsx(ButtonEl, { slots: child.slots ?? {}, ctx, path: `${path}.c${i}`, fullWidth: true, secondaryColor: fg }, i)) })
|
|
1714
1813
|
]
|
|
1715
1814
|
}
|
|
1716
1815
|
);
|
|
@@ -2207,6 +2306,14 @@ function Carousel({ items, itemsPerRow, ctx }) {
|
|
|
2207
2306
|
dots
|
|
2208
2307
|
] });
|
|
2209
2308
|
}
|
|
2309
|
+
function isPricingCardCollection(children) {
|
|
2310
|
+
const first = children[0];
|
|
2311
|
+
return !!first && first.type === "card" && first.slots?.preset === "pricing";
|
|
2312
|
+
}
|
|
2313
|
+
function pricingIndexFromPath(path) {
|
|
2314
|
+
const m = /\.c(\d+)$/.exec(path);
|
|
2315
|
+
return m ? Number(m[1]) : 0;
|
|
2316
|
+
}
|
|
2210
2317
|
function CollectionBlock({ node, ctx, path }) {
|
|
2211
2318
|
const slots = node.slots ?? {};
|
|
2212
2319
|
const behavior = str(slots.behavior);
|
|
@@ -2215,6 +2322,7 @@ function CollectionBlock({ node, ctx, path }) {
|
|
|
2215
2322
|
// itemsPerRow is a grid-only slot; carousels show up to 4 and page the rest.
|
|
2216
2323
|
Math.min(4, children.length)
|
|
2217
2324
|
) : children.length;
|
|
2325
|
+
const isPricing = isPricingCardCollection(children);
|
|
2218
2326
|
const rendered = children.map((child, i) => /* @__PURE__ */ jsx("div", { style: { minWidth: 0 }, children: renderNode(child, ctx, `${path}.c${i}`) }, i));
|
|
2219
2327
|
if (behavior === "marquee") {
|
|
2220
2328
|
if (children.every((child) => child.type === "media")) {
|
|
@@ -2280,10 +2388,14 @@ function CollectionBlock({ node, ctx, path }) {
|
|
|
2280
2388
|
if (behavior === "carousel") {
|
|
2281
2389
|
return /* @__PURE__ */ jsx(Carousel, { items: rendered, itemsPerRow, ctx });
|
|
2282
2390
|
}
|
|
2391
|
+
if (children.length === 1 && isPricing) {
|
|
2392
|
+
return /* @__PURE__ */ jsx("div", { "data-ohw-pricing-collection": "", style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx("div", { style: { width: "100%", maxWidth: 420, minWidth: 0 }, children: rendered[0] }) });
|
|
2393
|
+
}
|
|
2283
2394
|
return /* @__PURE__ */ jsx(
|
|
2284
2395
|
"div",
|
|
2285
2396
|
{
|
|
2286
2397
|
"data-ai-grid": "",
|
|
2398
|
+
"data-ohw-pricing-collection": isPricing ? "" : void 0,
|
|
2287
2399
|
style: {
|
|
2288
2400
|
display: "grid",
|
|
2289
2401
|
gridTemplateColumns: `repeat(${itemsPerRow}, 1fr)`,
|
|
@@ -3061,7 +3173,9 @@ function applyAiSectionsToDom(state, options) {
|
|
|
3061
3173
|
continue;
|
|
3062
3174
|
}
|
|
3063
3175
|
let container = existing?.container;
|
|
3176
|
+
let isNewMount = false;
|
|
3064
3177
|
if (!container || !container.isConnected) {
|
|
3178
|
+
isNewMount = true;
|
|
3065
3179
|
existing?.root.unmount();
|
|
3066
3180
|
container?.remove();
|
|
3067
3181
|
container = document.createElement("div");
|
|
@@ -3071,7 +3185,7 @@ function applyAiSectionsToDom(state, options) {
|
|
|
3071
3185
|
container.setAttribute("data-ohw-section", entry.id);
|
|
3072
3186
|
container.setAttribute("data-ohw-instance", entry.id);
|
|
3073
3187
|
container.setAttribute("data-ohw-section-label", entry.label);
|
|
3074
|
-
placeContainer(container, entry);
|
|
3188
|
+
if (isNewMount) placeContainer(container, entry);
|
|
3075
3189
|
const root = mounted.get(entry.id)?.root ?? createRoot(container);
|
|
3076
3190
|
const resolveMedia = (ref) => entry.media[ref] ?? null;
|
|
3077
3191
|
flushSync(() => {
|
|
@@ -9588,6 +9702,514 @@ function AiSectionOverlay({
|
|
|
9588
9702
|
] });
|
|
9589
9703
|
}
|
|
9590
9704
|
|
|
9705
|
+
// src/ui/ai-section/AiPricingCardOverlay.tsx
|
|
9706
|
+
import { useCallback as useCallback3, useEffect as useEffect5, useRef as useRef5, useState as useState7 } from "react";
|
|
9707
|
+
import { Star } from "lucide-react";
|
|
9708
|
+
|
|
9709
|
+
// src/lib/ai-pricing-tree.ts
|
|
9710
|
+
var PRICING_MIN_CARDS = 1;
|
|
9711
|
+
var PRICING_MAX_CARDS = 4;
|
|
9712
|
+
function isPricingCard(node) {
|
|
9713
|
+
return typeof node === "object" && node !== null && node.type === "card" && node.slots?.preset === "pricing";
|
|
9714
|
+
}
|
|
9715
|
+
function isPricingCollection(node) {
|
|
9716
|
+
return node.type === "collection" && Array.isArray(node.children) && node.children.length > 0 && isPricingCard(node.children[0]);
|
|
9717
|
+
}
|
|
9718
|
+
function findCollection(node) {
|
|
9719
|
+
if (isPricingCollection(node)) return node;
|
|
9720
|
+
for (const child of node.children ?? []) {
|
|
9721
|
+
const found = findCollection(child);
|
|
9722
|
+
if (found) return found;
|
|
9723
|
+
}
|
|
9724
|
+
return null;
|
|
9725
|
+
}
|
|
9726
|
+
function findPricingCollection(tree) {
|
|
9727
|
+
for (const row of tree.rows ?? []) {
|
|
9728
|
+
for (const block of row.blocks ?? []) {
|
|
9729
|
+
const found = findCollection(block);
|
|
9730
|
+
if (found) return found;
|
|
9731
|
+
}
|
|
9732
|
+
}
|
|
9733
|
+
return null;
|
|
9734
|
+
}
|
|
9735
|
+
function pricingCardCount(tree) {
|
|
9736
|
+
return findPricingCollection(tree)?.children?.length ?? 0;
|
|
9737
|
+
}
|
|
9738
|
+
function withPricingCollection(tree, mutate) {
|
|
9739
|
+
const next = JSON.parse(JSON.stringify(tree));
|
|
9740
|
+
const collection = findPricingCollection(next);
|
|
9741
|
+
if (!collection || !collection.children) return null;
|
|
9742
|
+
return mutate(collection) ? next : null;
|
|
9743
|
+
}
|
|
9744
|
+
function addPricingTier(tree) {
|
|
9745
|
+
return withPricingCollection(tree, (collection) => {
|
|
9746
|
+
const children = collection.children;
|
|
9747
|
+
if (children.length >= PRICING_MAX_CARDS) return false;
|
|
9748
|
+
const clone = JSON.parse(JSON.stringify(children[children.length - 1]));
|
|
9749
|
+
clone.slots = clone.slots ?? {};
|
|
9750
|
+
delete clone.slots.featured;
|
|
9751
|
+
clone.slots.heading = "New tier";
|
|
9752
|
+
children.push(clone);
|
|
9753
|
+
collection.slots = { ...collection.slots, itemsPerRow: children.length };
|
|
9754
|
+
return true;
|
|
9755
|
+
});
|
|
9756
|
+
}
|
|
9757
|
+
function removePricingTier(tree, index) {
|
|
9758
|
+
return withPricingCollection(tree, (collection) => {
|
|
9759
|
+
const children = collection.children;
|
|
9760
|
+
if (children.length <= PRICING_MIN_CARDS) return false;
|
|
9761
|
+
if (index < 0 || index >= children.length) return false;
|
|
9762
|
+
children.splice(index, 1);
|
|
9763
|
+
collection.slots = { ...collection.slots, itemsPerRow: children.length };
|
|
9764
|
+
return true;
|
|
9765
|
+
});
|
|
9766
|
+
}
|
|
9767
|
+
function setPricingCardFeatured(tree, index, patch) {
|
|
9768
|
+
return withPricingCollection(tree, (collection) => {
|
|
9769
|
+
const children = collection.children;
|
|
9770
|
+
if (index < 0 || index >= children.length) return false;
|
|
9771
|
+
const target = children[index];
|
|
9772
|
+
target.slots = target.slots ?? {};
|
|
9773
|
+
target.slots.featured = { ...patch };
|
|
9774
|
+
return true;
|
|
9775
|
+
});
|
|
9776
|
+
}
|
|
9777
|
+
function addPricingCardButton(tree, index, label) {
|
|
9778
|
+
return withPricingCollection(tree, (collection) => {
|
|
9779
|
+
const children = collection.children;
|
|
9780
|
+
if (index < 0 || index >= children.length) return false;
|
|
9781
|
+
const target = children[index];
|
|
9782
|
+
const buttons = (target.children ?? []).filter((c) => c.type === "button");
|
|
9783
|
+
if (buttons.length >= 2) return false;
|
|
9784
|
+
const hasPrimary = buttons.some((b) => b.slots?.variant === "primary");
|
|
9785
|
+
target.children = [
|
|
9786
|
+
...target.children ?? [],
|
|
9787
|
+
{ type: "button", span: 12, slots: { label, href: "#", variant: hasPrimary ? "secondary" : "primary" } }
|
|
9788
|
+
];
|
|
9789
|
+
return true;
|
|
9790
|
+
});
|
|
9791
|
+
}
|
|
9792
|
+
function removePricingCardButton(tree, index) {
|
|
9793
|
+
return withPricingCollection(tree, (collection) => {
|
|
9794
|
+
const children = collection.children;
|
|
9795
|
+
if (index < 0 || index >= children.length) return false;
|
|
9796
|
+
const target = children[index];
|
|
9797
|
+
const buttons = (target.children ?? []).filter((c) => c.type === "button");
|
|
9798
|
+
if (buttons.length === 0) return false;
|
|
9799
|
+
const lastButton = buttons[buttons.length - 1];
|
|
9800
|
+
target.children = (target.children ?? []).filter((c) => c !== lastButton);
|
|
9801
|
+
return true;
|
|
9802
|
+
});
|
|
9803
|
+
}
|
|
9804
|
+
var PRICING_FEATURES_MIN = 1;
|
|
9805
|
+
var PRICING_FEATURES_MAX = 10;
|
|
9806
|
+
function pricingFeatureList(target) {
|
|
9807
|
+
const raw = target.slots?.features;
|
|
9808
|
+
if (Array.isArray(raw)) {
|
|
9809
|
+
return raw.filter((item) => !!item && typeof item === "object" && typeof item.text === "string").map((item) => ({
|
|
9810
|
+
text: item.text,
|
|
9811
|
+
...typeof item.icon === "string" ? { icon: item.icon } : {},
|
|
9812
|
+
...typeof item.iconColor === "string" ? { iconColor: item.iconColor } : {}
|
|
9813
|
+
}));
|
|
9814
|
+
}
|
|
9815
|
+
if (typeof raw === "string") {
|
|
9816
|
+
return raw.split("\n").map((line) => line.replace(/^[-*•]\s*/, "").trim()).filter(Boolean).map((text) => ({ text }));
|
|
9817
|
+
}
|
|
9818
|
+
return [];
|
|
9819
|
+
}
|
|
9820
|
+
function pricingCardFeatureCount(tree, index) {
|
|
9821
|
+
const target = findPricingCollection(tree)?.children?.[index];
|
|
9822
|
+
return target ? pricingFeatureList(target).length : 0;
|
|
9823
|
+
}
|
|
9824
|
+
function addPricingCardFeature(tree, index, text) {
|
|
9825
|
+
return withPricingCollection(tree, (collection) => {
|
|
9826
|
+
const children = collection.children;
|
|
9827
|
+
if (index < 0 || index >= children.length) return false;
|
|
9828
|
+
const target = children[index];
|
|
9829
|
+
const features = pricingFeatureList(target);
|
|
9830
|
+
if (features.length >= PRICING_FEATURES_MAX) return false;
|
|
9831
|
+
target.slots = target.slots ?? {};
|
|
9832
|
+
target.slots.features = [...features, { text }];
|
|
9833
|
+
return true;
|
|
9834
|
+
});
|
|
9835
|
+
}
|
|
9836
|
+
function removePricingCardFeature(tree, index) {
|
|
9837
|
+
return withPricingCollection(tree, (collection) => {
|
|
9838
|
+
const children = collection.children;
|
|
9839
|
+
if (index < 0 || index >= children.length) return false;
|
|
9840
|
+
const target = children[index];
|
|
9841
|
+
const features = pricingFeatureList(target);
|
|
9842
|
+
if (features.length <= PRICING_FEATURES_MIN) return false;
|
|
9843
|
+
target.slots = target.slots ?? {};
|
|
9844
|
+
target.slots.features = features.slice(0, -1);
|
|
9845
|
+
return true;
|
|
9846
|
+
});
|
|
9847
|
+
}
|
|
9848
|
+
|
|
9849
|
+
// src/ui/ai-section/AiPricingCardOverlay.tsx
|
|
9850
|
+
import { Fragment as Fragment6, jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
9851
|
+
var EMPHASIS_TREATMENTS = [
|
|
9852
|
+
{ value: "outlined", label: "Outline" },
|
|
9853
|
+
{ value: "lifted", label: "Lift" },
|
|
9854
|
+
{ value: "inverted", label: "Invert" },
|
|
9855
|
+
{ value: "accent-header", label: "Header" }
|
|
9856
|
+
];
|
|
9857
|
+
var PRIMARY3 = "#0885FE";
|
|
9858
|
+
var OHW_BLUE = `var(--ohw-primary, ${PRIMARY3})`;
|
|
9859
|
+
var OHW_BLUE_DARK = `color-mix(in srgb, var(--ohw-primary, ${PRIMARY3}) 60%, #000000)`;
|
|
9860
|
+
function findPricingCardElement(sectionId, index) {
|
|
9861
|
+
const sectionEl = findByInstanceId(sectionId);
|
|
9862
|
+
if (!sectionEl) return null;
|
|
9863
|
+
const cards = sectionEl.querySelectorAll("[data-ohw-pricing-card]");
|
|
9864
|
+
for (const el of Array.from(cards)) {
|
|
9865
|
+
if (Number(el.dataset.ohwPricingIndex) === index) return el;
|
|
9866
|
+
}
|
|
9867
|
+
return null;
|
|
9868
|
+
}
|
|
9869
|
+
function readRect2(ref) {
|
|
9870
|
+
const el = ref && findPricingCardElement(ref.sectionId, ref.index);
|
|
9871
|
+
if (!el) return null;
|
|
9872
|
+
const r2 = el.getBoundingClientRect();
|
|
9873
|
+
if (r2.width <= 0 || r2.height <= 0) return null;
|
|
9874
|
+
return { top: r2.top, left: r2.left, width: r2.width, height: r2.height };
|
|
9875
|
+
}
|
|
9876
|
+
function useLiveCardRect(ref) {
|
|
9877
|
+
const [rect, setRect] = useState7(null);
|
|
9878
|
+
useEffect5(() => {
|
|
9879
|
+
if (!ref) {
|
|
9880
|
+
setRect(null);
|
|
9881
|
+
return;
|
|
9882
|
+
}
|
|
9883
|
+
const update = () => {
|
|
9884
|
+
const next = readRect2(ref);
|
|
9885
|
+
setRect(
|
|
9886
|
+
(prev) => prev && next && prev.top === next.top && prev.left === next.left && prev.width === next.width && prev.height === next.height ? prev : next
|
|
9887
|
+
);
|
|
9888
|
+
};
|
|
9889
|
+
update();
|
|
9890
|
+
const opts = { capture: true, passive: true };
|
|
9891
|
+
window.addEventListener("scroll", update, opts);
|
|
9892
|
+
window.addEventListener("resize", update);
|
|
9893
|
+
const interval = setInterval(update, 500);
|
|
9894
|
+
return () => {
|
|
9895
|
+
window.removeEventListener("scroll", update, opts);
|
|
9896
|
+
window.removeEventListener("resize", update);
|
|
9897
|
+
clearInterval(interval);
|
|
9898
|
+
};
|
|
9899
|
+
}, [ref?.sectionId, ref?.index]);
|
|
9900
|
+
return rect;
|
|
9901
|
+
}
|
|
9902
|
+
function requestValidateTree(postToParent2, tree) {
|
|
9903
|
+
return new Promise((resolve) => {
|
|
9904
|
+
const id = `ai-validate-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
|
|
9905
|
+
const timeout = window.setTimeout(() => {
|
|
9906
|
+
window.removeEventListener("message", onMessage);
|
|
9907
|
+
resolve({ ok: false, reasons: ["Validation request timed out."] });
|
|
9908
|
+
}, 8e3);
|
|
9909
|
+
function onMessage(e) {
|
|
9910
|
+
if (e.data?.type !== "ow:ai-validate-tree-result" || e.data.id !== id) return;
|
|
9911
|
+
window.clearTimeout(timeout);
|
|
9912
|
+
window.removeEventListener("message", onMessage);
|
|
9913
|
+
resolve({ ok: e.data.ok === true, reasons: Array.isArray(e.data.reasons) ? e.data.reasons : [] });
|
|
9914
|
+
}
|
|
9915
|
+
window.addEventListener("message", onMessage);
|
|
9916
|
+
postToParent2({ type: "ow:ai-validate-tree-request", id, tree });
|
|
9917
|
+
});
|
|
9918
|
+
}
|
|
9919
|
+
function Pill({
|
|
9920
|
+
label,
|
|
9921
|
+
onClick,
|
|
9922
|
+
disabled,
|
|
9923
|
+
active
|
|
9924
|
+
}) {
|
|
9925
|
+
return /* @__PURE__ */ jsx18(
|
|
9926
|
+
"button",
|
|
9927
|
+
{
|
|
9928
|
+
type: "button",
|
|
9929
|
+
onClick,
|
|
9930
|
+
disabled,
|
|
9931
|
+
style: {
|
|
9932
|
+
height: 28,
|
|
9933
|
+
padding: "0 10px",
|
|
9934
|
+
display: "inline-flex",
|
|
9935
|
+
alignItems: "center",
|
|
9936
|
+
gap: 4,
|
|
9937
|
+
borderRadius: 999,
|
|
9938
|
+
border: "none",
|
|
9939
|
+
cursor: disabled ? "default" : "pointer",
|
|
9940
|
+
background: active ? OHW_BLUE_DARK : "#ffffff",
|
|
9941
|
+
color: active ? "#ffffff" : OHW_BLUE_DARK,
|
|
9942
|
+
opacity: disabled ? 0.4 : 1,
|
|
9943
|
+
fontSize: 12,
|
|
9944
|
+
lineHeight: "16px",
|
|
9945
|
+
fontFamily: "Figtree, ui-sans-serif, system-ui, sans-serif",
|
|
9946
|
+
whiteSpace: "nowrap",
|
|
9947
|
+
flex: "0 0 auto"
|
|
9948
|
+
},
|
|
9949
|
+
children: label
|
|
9950
|
+
}
|
|
9951
|
+
);
|
|
9952
|
+
}
|
|
9953
|
+
function PricingCardToolbar({
|
|
9954
|
+
entry,
|
|
9955
|
+
index,
|
|
9956
|
+
pending,
|
|
9957
|
+
error,
|
|
9958
|
+
onAddTier,
|
|
9959
|
+
onRemoveTier,
|
|
9960
|
+
onToggleFeatured,
|
|
9961
|
+
onSetTreatment,
|
|
9962
|
+
onAddButton,
|
|
9963
|
+
onRemoveButton,
|
|
9964
|
+
onAddFeature,
|
|
9965
|
+
onRemoveFeature
|
|
9966
|
+
}) {
|
|
9967
|
+
const collectionCount = pricingCardCount(entry.tree);
|
|
9968
|
+
const card = findPricingCardNode(entry.tree, index);
|
|
9969
|
+
const featured = card?.slots?.featured;
|
|
9970
|
+
const isFeatured = featured?.enabled === true;
|
|
9971
|
+
const buttonCount = (card?.children ?? []).filter((c) => c.type === "button").length;
|
|
9972
|
+
const featureCount = pricingCardFeatureCount(entry.tree, index);
|
|
9973
|
+
const pillWrap = window.innerWidth <= 480 ? "wrap" : "nowrap";
|
|
9974
|
+
return /* @__PURE__ */ jsxs10(
|
|
9975
|
+
"div",
|
|
9976
|
+
{
|
|
9977
|
+
"data-ohw-bridge": "",
|
|
9978
|
+
"data-ohw-toolbar": "",
|
|
9979
|
+
onMouseDown: (e) => e.stopPropagation(),
|
|
9980
|
+
style: {
|
|
9981
|
+
display: "flex",
|
|
9982
|
+
flexDirection: "column",
|
|
9983
|
+
gap: 6,
|
|
9984
|
+
alignItems: "center",
|
|
9985
|
+
background: OHW_BLUE,
|
|
9986
|
+
padding: 8,
|
|
9987
|
+
borderRadius: 12,
|
|
9988
|
+
boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
|
|
9989
|
+
pointerEvents: pending ? "none" : "auto",
|
|
9990
|
+
opacity: pending ? 0.6 : 1,
|
|
9991
|
+
// Only cap width on mobile, where the pill rows wrap — on desktop the row stays on one
|
|
9992
|
+
// line and should size to fit it, not get clipped/overflow against a fixed cap.
|
|
9993
|
+
maxWidth: pillWrap === "wrap" ? "calc(100vw - 24px)" : "none"
|
|
9994
|
+
},
|
|
9995
|
+
children: [
|
|
9996
|
+
/* @__PURE__ */ jsxs10("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: [
|
|
9997
|
+
/* @__PURE__ */ jsx18(Pill, { label: "+ Tier", onClick: onAddTier, disabled: collectionCount >= 4 }),
|
|
9998
|
+
/* @__PURE__ */ jsx18(Pill, { label: "- Tier", onClick: onRemoveTier, disabled: collectionCount <= 1 }),
|
|
9999
|
+
/* @__PURE__ */ jsx18(Pill, { label: "Featured", active: isFeatured, onClick: () => onToggleFeatured(!isFeatured) }),
|
|
10000
|
+
/* @__PURE__ */ jsx18(Pill, { label: "+ Button", onClick: onAddButton, disabled: buttonCount >= 2 }),
|
|
10001
|
+
/* @__PURE__ */ jsx18(Pill, { label: "- Button", onClick: onRemoveButton, disabled: buttonCount === 0 }),
|
|
10002
|
+
/* @__PURE__ */ jsx18(Pill, { label: "+ Feature", onClick: onAddFeature, disabled: featureCount >= 10 }),
|
|
10003
|
+
/* @__PURE__ */ jsx18(Pill, { label: "- Feature", onClick: onRemoveFeature, disabled: featureCount <= 1 })
|
|
10004
|
+
] }),
|
|
10005
|
+
isFeatured && /* @__PURE__ */ jsx18("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: EMPHASIS_TREATMENTS.map((t) => /* @__PURE__ */ jsx18(
|
|
10006
|
+
Pill,
|
|
10007
|
+
{
|
|
10008
|
+
label: t.label,
|
|
10009
|
+
active: (featured?.treatment ?? "outlined") === t.value,
|
|
10010
|
+
onClick: () => onSetTreatment(t.value)
|
|
10011
|
+
},
|
|
10012
|
+
t.value
|
|
10013
|
+
)) }),
|
|
10014
|
+
error && /* @__PURE__ */ jsx18("div", { style: { color: "#FCA5A5", fontSize: 11, maxWidth: 220, textAlign: "center" }, children: error })
|
|
10015
|
+
]
|
|
10016
|
+
}
|
|
10017
|
+
);
|
|
10018
|
+
}
|
|
10019
|
+
function findPricingCardNode(tree, index) {
|
|
10020
|
+
const stack = tree.rows.flatMap((row) => row.blocks);
|
|
10021
|
+
while (stack.length) {
|
|
10022
|
+
const node = stack.shift();
|
|
10023
|
+
if (node.type === "collection" && Array.isArray(node.children) && node.children[0]?.type === "card" && node.children[0].slots?.preset === "pricing") {
|
|
10024
|
+
return node.children[index] ?? null;
|
|
10025
|
+
}
|
|
10026
|
+
if (node.children) stack.push(...node.children);
|
|
10027
|
+
}
|
|
10028
|
+
return null;
|
|
10029
|
+
}
|
|
10030
|
+
function AiPricingCardOverlay({
|
|
10031
|
+
postToParent: postToParent2,
|
|
10032
|
+
aiSectionsRef,
|
|
10033
|
+
applyTreeLocalRef
|
|
10034
|
+
}) {
|
|
10035
|
+
const [hover, setHover] = useState7(null);
|
|
10036
|
+
const [active, setActive] = useState7(null);
|
|
10037
|
+
const [pending, setPending] = useState7(false);
|
|
10038
|
+
const [error, setError] = useState7(null);
|
|
10039
|
+
const activeRef = useRef5(null);
|
|
10040
|
+
activeRef.current = active;
|
|
10041
|
+
useEffect5(() => {
|
|
10042
|
+
const onMove = (e) => {
|
|
10043
|
+
const t = e.target;
|
|
10044
|
+
if (!(t instanceof HTMLElement)) return;
|
|
10045
|
+
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]")) {
|
|
10046
|
+
return;
|
|
10047
|
+
}
|
|
10048
|
+
const cardEl = t.closest("[data-ohw-pricing-card]");
|
|
10049
|
+
if (!cardEl) {
|
|
10050
|
+
setHover(null);
|
|
10051
|
+
return;
|
|
10052
|
+
}
|
|
10053
|
+
const sectionEl = cardEl.closest("[data-ohw-section]");
|
|
10054
|
+
const unit = sectionEl ? movableUnit(sectionEl) : null;
|
|
10055
|
+
const sectionId = unit ? instanceIdOf(unit) || null : null;
|
|
10056
|
+
const index = Number(cardEl.dataset.ohwPricingIndex);
|
|
10057
|
+
if (!sectionId || Number.isNaN(index)) {
|
|
10058
|
+
setHover(null);
|
|
10059
|
+
return;
|
|
10060
|
+
}
|
|
10061
|
+
setHover({ sectionId, index });
|
|
10062
|
+
};
|
|
10063
|
+
const onLeave = () => setHover(null);
|
|
10064
|
+
document.addEventListener("mousemove", onMove, { passive: true });
|
|
10065
|
+
document.documentElement.addEventListener("mouseleave", onLeave);
|
|
10066
|
+
return () => {
|
|
10067
|
+
document.removeEventListener("mousemove", onMove);
|
|
10068
|
+
document.documentElement.removeEventListener("mouseleave", onLeave);
|
|
10069
|
+
};
|
|
10070
|
+
}, []);
|
|
10071
|
+
useEffect5(() => {
|
|
10072
|
+
const onClick = (e) => {
|
|
10073
|
+
const current = activeRef.current;
|
|
10074
|
+
if (!current) return;
|
|
10075
|
+
const t = e.target;
|
|
10076
|
+
if (!(t instanceof HTMLElement)) return;
|
|
10077
|
+
if (t.closest("[data-ohw-item-interaction]")) return;
|
|
10078
|
+
const cardEl = findPricingCardElement(current.sectionId, current.index);
|
|
10079
|
+
if (cardEl && cardEl.contains(t)) return;
|
|
10080
|
+
setActive(null);
|
|
10081
|
+
setError(null);
|
|
10082
|
+
};
|
|
10083
|
+
document.addEventListener("click", onClick, true);
|
|
10084
|
+
return () => document.removeEventListener("click", onClick, true);
|
|
10085
|
+
}, []);
|
|
10086
|
+
useEffect5(() => {
|
|
10087
|
+
const onBlur = () => {
|
|
10088
|
+
if (!activeRef.current) return;
|
|
10089
|
+
setActive(null);
|
|
10090
|
+
setError(null);
|
|
10091
|
+
};
|
|
10092
|
+
window.addEventListener("blur", onBlur);
|
|
10093
|
+
return () => window.removeEventListener("blur", onBlur);
|
|
10094
|
+
}, []);
|
|
10095
|
+
useEffect5(() => {
|
|
10096
|
+
const onKeyDown = (e) => {
|
|
10097
|
+
if (e.key !== "Escape") return;
|
|
10098
|
+
if (!activeRef.current) return;
|
|
10099
|
+
setActive(null);
|
|
10100
|
+
setError(null);
|
|
10101
|
+
};
|
|
10102
|
+
document.addEventListener("keydown", onKeyDown);
|
|
10103
|
+
return () => document.removeEventListener("keydown", onKeyDown);
|
|
10104
|
+
}, []);
|
|
10105
|
+
const findEntry = useCallback3(
|
|
10106
|
+
(sectionId) => {
|
|
10107
|
+
const state = parseAiSectionsState(aiSectionsRef.current);
|
|
10108
|
+
return state.sections.find((s) => s.id === sectionId) ?? null;
|
|
10109
|
+
},
|
|
10110
|
+
[aiSectionsRef]
|
|
10111
|
+
);
|
|
10112
|
+
const runMutation = useCallback3(
|
|
10113
|
+
async (sectionId, mutate) => {
|
|
10114
|
+
const entry = findEntry(sectionId);
|
|
10115
|
+
if (!entry) return false;
|
|
10116
|
+
const nextTree = mutate(entry.tree);
|
|
10117
|
+
if (!nextTree) return false;
|
|
10118
|
+
setPending(true);
|
|
10119
|
+
setError(null);
|
|
10120
|
+
const { ok, reasons } = await requestValidateTree(postToParent2, nextTree);
|
|
10121
|
+
setPending(false);
|
|
10122
|
+
if (!ok) {
|
|
10123
|
+
setError(reasons[0] ?? "That change is not allowed.");
|
|
10124
|
+
return false;
|
|
10125
|
+
}
|
|
10126
|
+
applyTreeLocalRef.current?.({
|
|
10127
|
+
id: sectionId,
|
|
10128
|
+
mode: "replace",
|
|
10129
|
+
targetSectionId: sectionId,
|
|
10130
|
+
tree: nextTree,
|
|
10131
|
+
label: entry.label,
|
|
10132
|
+
media: entry.media,
|
|
10133
|
+
...entry.brand ? { brand: entry.brand } : {},
|
|
10134
|
+
// The user is already looking at the card they just edited — recentering the
|
|
10135
|
+
// viewport on every tier add/remove/toggle reads as the section jumping around.
|
|
10136
|
+
skipScrollIntoView: true
|
|
10137
|
+
});
|
|
10138
|
+
return true;
|
|
10139
|
+
},
|
|
10140
|
+
[findEntry, postToParent2, applyTreeLocalRef]
|
|
10141
|
+
);
|
|
10142
|
+
const activeEntry = active ? findEntry(active.sectionId) : null;
|
|
10143
|
+
const activeCardRect = useLiveCardRect(active);
|
|
10144
|
+
const hoverHandleRect = useLiveCardRect(!active && hover ? hover : null);
|
|
10145
|
+
return /* @__PURE__ */ jsxs10(Fragment6, { children: [
|
|
10146
|
+
hoverHandleRect && hover && /* @__PURE__ */ jsx18(
|
|
10147
|
+
"button",
|
|
10148
|
+
{
|
|
10149
|
+
type: "button",
|
|
10150
|
+
"data-ohw-toolbar": "",
|
|
10151
|
+
onClick: () => setActive(hover),
|
|
10152
|
+
"aria-label": "Configure pricing tier",
|
|
10153
|
+
style: {
|
|
10154
|
+
position: "fixed",
|
|
10155
|
+
top: hoverHandleRect.top + 8,
|
|
10156
|
+
left: hoverHandleRect.left + hoverHandleRect.width - 36,
|
|
10157
|
+
width: 28,
|
|
10158
|
+
height: 28,
|
|
10159
|
+
borderRadius: 8,
|
|
10160
|
+
border: `1.5px dashed ${PRIMARY3}`,
|
|
10161
|
+
background: "#ffffff",
|
|
10162
|
+
color: PRIMARY3,
|
|
10163
|
+
display: "flex",
|
|
10164
|
+
alignItems: "center",
|
|
10165
|
+
justifyContent: "center",
|
|
10166
|
+
cursor: "pointer",
|
|
10167
|
+
zIndex: 2147483643,
|
|
10168
|
+
fontSize: 14,
|
|
10169
|
+
fontWeight: 700
|
|
10170
|
+
},
|
|
10171
|
+
children: /* @__PURE__ */ jsx18(Star, { size: 14, style: { pointerEvents: "none" } })
|
|
10172
|
+
}
|
|
10173
|
+
),
|
|
10174
|
+
activeCardRect && active && activeEntry && /* @__PURE__ */ jsx18(
|
|
10175
|
+
ItemInteractionLayer,
|
|
10176
|
+
{
|
|
10177
|
+
rect: activeCardRect,
|
|
10178
|
+
state: "active-top",
|
|
10179
|
+
toolbar: /* @__PURE__ */ jsx18(
|
|
10180
|
+
PricingCardToolbar,
|
|
10181
|
+
{
|
|
10182
|
+
entry: activeEntry,
|
|
10183
|
+
index: active.index,
|
|
10184
|
+
pending,
|
|
10185
|
+
error,
|
|
10186
|
+
onAddTier: () => runMutation(active.sectionId, addPricingTier),
|
|
10187
|
+
onRemoveTier: () => {
|
|
10188
|
+
void runMutation(active.sectionId, (tree) => removePricingTier(tree, active.index)).then(
|
|
10189
|
+
(applied) => {
|
|
10190
|
+
if (applied) setActive(null);
|
|
10191
|
+
}
|
|
10192
|
+
);
|
|
10193
|
+
},
|
|
10194
|
+
onToggleFeatured: (enabled) => runMutation(
|
|
10195
|
+
active.sectionId,
|
|
10196
|
+
(tree) => setPricingCardFeatured(tree, active.index, { enabled })
|
|
10197
|
+
),
|
|
10198
|
+
onSetTreatment: (treatment) => runMutation(
|
|
10199
|
+
active.sectionId,
|
|
10200
|
+
(tree) => setPricingCardFeatured(tree, active.index, { enabled: true, treatment })
|
|
10201
|
+
),
|
|
10202
|
+
onAddButton: () => runMutation(active.sectionId, (tree) => addPricingCardButton(tree, active.index, "Learn more")),
|
|
10203
|
+
onRemoveButton: () => runMutation(active.sectionId, (tree) => removePricingCardButton(tree, active.index)),
|
|
10204
|
+
onAddFeature: () => runMutation(active.sectionId, (tree) => addPricingCardFeature(tree, active.index, "New feature")),
|
|
10205
|
+
onRemoveFeature: () => runMutation(active.sectionId, (tree) => removePricingCardFeature(tree, active.index))
|
|
10206
|
+
}
|
|
10207
|
+
)
|
|
10208
|
+
}
|
|
10209
|
+
)
|
|
10210
|
+
] });
|
|
10211
|
+
}
|
|
10212
|
+
|
|
9591
10213
|
// src/OhhwellsBridge.tsx
|
|
9592
10214
|
import { createPortal as createPortal3 } from "react-dom";
|
|
9593
10215
|
import { usePathname as usePathname2, useRouter as useRouter3, useSearchParams } from "next/navigation";
|
|
@@ -9892,28 +10514,28 @@ function scrollToHashSectionWhenReady(behavior = "smooth") {
|
|
|
9892
10514
|
}
|
|
9893
10515
|
|
|
9894
10516
|
// src/ui/link-modal/LinkPopover.tsx
|
|
9895
|
-
import { useEffect as
|
|
10517
|
+
import { useEffect as useEffect9 } from "react";
|
|
9896
10518
|
|
|
9897
10519
|
// src/ui/dialog.tsx
|
|
9898
10520
|
import * as React9 from "react";
|
|
9899
10521
|
import { Dialog as DialogPrimitive } from "radix-ui";
|
|
9900
10522
|
import { X as X2 } from "lucide-react";
|
|
9901
|
-
import { jsx as
|
|
10523
|
+
import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
9902
10524
|
function Dialog2({
|
|
9903
10525
|
...props
|
|
9904
10526
|
}) {
|
|
9905
|
-
return /* @__PURE__ */
|
|
10527
|
+
return /* @__PURE__ */ jsx19(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
|
|
9906
10528
|
}
|
|
9907
10529
|
function DialogPortal({
|
|
9908
10530
|
...props
|
|
9909
10531
|
}) {
|
|
9910
|
-
return /* @__PURE__ */
|
|
10532
|
+
return /* @__PURE__ */ jsx19(DialogPrimitive.Portal, { ...props });
|
|
9911
10533
|
}
|
|
9912
10534
|
function DialogOverlay({
|
|
9913
10535
|
className,
|
|
9914
10536
|
...props
|
|
9915
10537
|
}) {
|
|
9916
|
-
return /* @__PURE__ */
|
|
10538
|
+
return /* @__PURE__ */ jsx19(
|
|
9917
10539
|
DialogPrimitive.Overlay,
|
|
9918
10540
|
{
|
|
9919
10541
|
"data-slot": "dialog-overlay",
|
|
@@ -9926,9 +10548,9 @@ function DialogOverlay({
|
|
|
9926
10548
|
var DialogContent = React9.forwardRef(
|
|
9927
10549
|
({ className, children, showCloseButton = true, container, ...props }, ref) => {
|
|
9928
10550
|
const positionMode = container ? "absolute" : "fixed";
|
|
9929
|
-
return /* @__PURE__ */
|
|
9930
|
-
/* @__PURE__ */
|
|
9931
|
-
/* @__PURE__ */
|
|
10551
|
+
return /* @__PURE__ */ jsxs11(DialogPortal, { container: container ?? void 0, children: [
|
|
10552
|
+
/* @__PURE__ */ jsx19(DialogOverlay, { className: cn(positionMode, "inset-0") }),
|
|
10553
|
+
/* @__PURE__ */ jsxs11(
|
|
9932
10554
|
DialogPrimitive.Content,
|
|
9933
10555
|
{
|
|
9934
10556
|
ref,
|
|
@@ -9944,13 +10566,13 @@ var DialogContent = React9.forwardRef(
|
|
|
9944
10566
|
...props,
|
|
9945
10567
|
children: [
|
|
9946
10568
|
children,
|
|
9947
|
-
showCloseButton ? /* @__PURE__ */
|
|
10569
|
+
showCloseButton ? /* @__PURE__ */ jsx19(
|
|
9948
10570
|
DialogPrimitive.Close,
|
|
9949
10571
|
{
|
|
9950
10572
|
type: "button",
|
|
9951
10573
|
className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50",
|
|
9952
10574
|
"aria-label": "Close",
|
|
9953
|
-
children: /* @__PURE__ */
|
|
10575
|
+
children: /* @__PURE__ */ jsx19(X2, { size: 16, "aria-hidden": true })
|
|
9954
10576
|
}
|
|
9955
10577
|
) : null
|
|
9956
10578
|
]
|
|
@@ -9964,13 +10586,13 @@ function DialogHeader({
|
|
|
9964
10586
|
className,
|
|
9965
10587
|
...props
|
|
9966
10588
|
}) {
|
|
9967
|
-
return /* @__PURE__ */
|
|
10589
|
+
return /* @__PURE__ */ jsx19("div", { className: cn("flex flex-col gap-1.5", className), ...props });
|
|
9968
10590
|
}
|
|
9969
10591
|
function DialogFooter({
|
|
9970
10592
|
className,
|
|
9971
10593
|
...props
|
|
9972
10594
|
}) {
|
|
9973
|
-
return /* @__PURE__ */
|
|
10595
|
+
return /* @__PURE__ */ jsx19(
|
|
9974
10596
|
"div",
|
|
9975
10597
|
{
|
|
9976
10598
|
className: cn("flex items-center justify-end gap-2", className),
|
|
@@ -9978,7 +10600,7 @@ function DialogFooter({
|
|
|
9978
10600
|
}
|
|
9979
10601
|
);
|
|
9980
10602
|
}
|
|
9981
|
-
var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
10603
|
+
var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
|
|
9982
10604
|
DialogPrimitive.Title,
|
|
9983
10605
|
{
|
|
9984
10606
|
ref,
|
|
@@ -9990,7 +10612,7 @@ var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE
|
|
|
9990
10612
|
}
|
|
9991
10613
|
));
|
|
9992
10614
|
DialogTitle.displayName = DialogPrimitive.Title.displayName;
|
|
9993
|
-
var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
10615
|
+
var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
|
|
9994
10616
|
DialogPrimitive.Description,
|
|
9995
10617
|
{
|
|
9996
10618
|
ref,
|
|
@@ -10006,19 +10628,19 @@ import { Info, X as X4 } from "lucide-react";
|
|
|
10006
10628
|
|
|
10007
10629
|
// src/ui/link-modal/DestinationBreadcrumb.tsx
|
|
10008
10630
|
import { ArrowRight as ArrowRight2, File, GalleryVertical } from "lucide-react";
|
|
10009
|
-
import { jsx as
|
|
10631
|
+
import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
10010
10632
|
function DestinationBreadcrumb({
|
|
10011
10633
|
pageTitle,
|
|
10012
10634
|
sectionLabel
|
|
10013
10635
|
}) {
|
|
10014
|
-
return /* @__PURE__ */
|
|
10015
|
-
/* @__PURE__ */
|
|
10016
|
-
/* @__PURE__ */
|
|
10017
|
-
/* @__PURE__ */
|
|
10018
|
-
/* @__PURE__ */
|
|
10019
|
-
/* @__PURE__ */
|
|
10636
|
+
return /* @__PURE__ */ jsxs12("div", { className: "flex w-full flex-col gap-2", children: [
|
|
10637
|
+
/* @__PURE__ */ jsx20("p", { className: "text-sm font-medium! text-foreground m-0", children: "Destination" }),
|
|
10638
|
+
/* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-3", children: [
|
|
10639
|
+
/* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
|
|
10640
|
+
/* @__PURE__ */ jsx20(File, { size: 16, className: "shrink-0 text-foreground", "aria-hidden": true }),
|
|
10641
|
+
/* @__PURE__ */ jsx20("span", { className: "text-sm font-medium leading-none text-foreground!", children: pageTitle })
|
|
10020
10642
|
] }),
|
|
10021
|
-
/* @__PURE__ */
|
|
10643
|
+
/* @__PURE__ */ jsx20(
|
|
10022
10644
|
ArrowRight2,
|
|
10023
10645
|
{
|
|
10024
10646
|
size: 16,
|
|
@@ -10026,8 +10648,8 @@ function DestinationBreadcrumb({
|
|
|
10026
10648
|
"aria-hidden": true
|
|
10027
10649
|
}
|
|
10028
10650
|
),
|
|
10029
|
-
/* @__PURE__ */
|
|
10030
|
-
/* @__PURE__ */
|
|
10651
|
+
/* @__PURE__ */ jsxs12("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
|
|
10652
|
+
/* @__PURE__ */ jsx20(
|
|
10031
10653
|
GalleryVertical,
|
|
10032
10654
|
{
|
|
10033
10655
|
size: 16,
|
|
@@ -10035,7 +10657,7 @@ function DestinationBreadcrumb({
|
|
|
10035
10657
|
"aria-hidden": true
|
|
10036
10658
|
}
|
|
10037
10659
|
),
|
|
10038
|
-
/* @__PURE__ */
|
|
10660
|
+
/* @__PURE__ */ jsx20("span", { className: "truncate text-sm font-medium leading-none text-foreground", children: sectionLabel })
|
|
10039
10661
|
] })
|
|
10040
10662
|
] })
|
|
10041
10663
|
] });
|
|
@@ -10043,22 +10665,22 @@ function DestinationBreadcrumb({
|
|
|
10043
10665
|
|
|
10044
10666
|
// src/ui/link-modal/SectionTreeItem.tsx
|
|
10045
10667
|
import { GalleryVertical as GalleryVertical2 } from "lucide-react";
|
|
10046
|
-
import { jsx as
|
|
10668
|
+
import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
10047
10669
|
function SectionTreeItem({
|
|
10048
10670
|
section,
|
|
10049
10671
|
onSelect,
|
|
10050
10672
|
selected
|
|
10051
10673
|
}) {
|
|
10052
10674
|
const interactive = Boolean(onSelect);
|
|
10053
|
-
return /* @__PURE__ */
|
|
10054
|
-
/* @__PURE__ */
|
|
10675
|
+
return /* @__PURE__ */ jsxs13("div", { className: "flex h-9 w-full items-end pl-3", children: [
|
|
10676
|
+
/* @__PURE__ */ jsx21(
|
|
10055
10677
|
"div",
|
|
10056
10678
|
{
|
|
10057
10679
|
className: "-mr-px h-9 w-2 shrink-0 rounded-bl-sm border-b border-l border-border mb-4",
|
|
10058
10680
|
"aria-hidden": true
|
|
10059
10681
|
}
|
|
10060
10682
|
),
|
|
10061
|
-
/* @__PURE__ */
|
|
10683
|
+
/* @__PURE__ */ jsxs13(
|
|
10062
10684
|
"div",
|
|
10063
10685
|
{
|
|
10064
10686
|
role: interactive ? "button" : void 0,
|
|
@@ -10076,7 +10698,7 @@ function SectionTreeItem({
|
|
|
10076
10698
|
interactive && selected && "border-bridge-primary"
|
|
10077
10699
|
),
|
|
10078
10700
|
children: [
|
|
10079
|
-
/* @__PURE__ */
|
|
10701
|
+
/* @__PURE__ */ jsx21(
|
|
10080
10702
|
GalleryVertical2,
|
|
10081
10703
|
{
|
|
10082
10704
|
size: 16,
|
|
@@ -10084,7 +10706,7 @@ function SectionTreeItem({
|
|
|
10084
10706
|
"aria-hidden": true
|
|
10085
10707
|
}
|
|
10086
10708
|
),
|
|
10087
|
-
/* @__PURE__ */
|
|
10709
|
+
/* @__PURE__ */ jsx21("span", { className: "truncate text-sm font-normal leading-5 text-foreground", children: section.label })
|
|
10088
10710
|
]
|
|
10089
10711
|
}
|
|
10090
10712
|
)
|
|
@@ -10092,14 +10714,14 @@ function SectionTreeItem({
|
|
|
10092
10714
|
}
|
|
10093
10715
|
|
|
10094
10716
|
// src/ui/link-modal/UrlOrPageInput.tsx
|
|
10095
|
-
import { useEffect as
|
|
10717
|
+
import { useEffect as useEffect6, useId as useId2, useRef as useRef6, useState as useState8 } from "react";
|
|
10096
10718
|
|
|
10097
10719
|
// src/ui/input.tsx
|
|
10098
10720
|
import * as React10 from "react";
|
|
10099
|
-
import { jsx as
|
|
10721
|
+
import { jsx as jsx22 } from "react/jsx-runtime";
|
|
10100
10722
|
var Input = React10.forwardRef(
|
|
10101
10723
|
({ className, type, ...props }, ref) => {
|
|
10102
|
-
return /* @__PURE__ */
|
|
10724
|
+
return /* @__PURE__ */ jsx22(
|
|
10103
10725
|
"input",
|
|
10104
10726
|
{
|
|
10105
10727
|
type,
|
|
@@ -10118,9 +10740,9 @@ Input.displayName = "Input";
|
|
|
10118
10740
|
|
|
10119
10741
|
// src/ui/label.tsx
|
|
10120
10742
|
import { Label as LabelPrimitive } from "radix-ui";
|
|
10121
|
-
import { jsx as
|
|
10743
|
+
import { jsx as jsx23 } from "react/jsx-runtime";
|
|
10122
10744
|
function Label({ className, ...props }) {
|
|
10123
|
-
return /* @__PURE__ */
|
|
10745
|
+
return /* @__PURE__ */ jsx23(
|
|
10124
10746
|
LabelPrimitive.Root,
|
|
10125
10747
|
{
|
|
10126
10748
|
"data-slot": "label",
|
|
@@ -10132,11 +10754,11 @@ function Label({ className, ...props }) {
|
|
|
10132
10754
|
|
|
10133
10755
|
// src/ui/link-modal/UrlOrPageInput.tsx
|
|
10134
10756
|
import { ChevronDown as ChevronDown3, File as File2, X as X3 } from "lucide-react";
|
|
10135
|
-
import { jsx as
|
|
10757
|
+
import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
10136
10758
|
function FieldChevron({
|
|
10137
10759
|
onClick
|
|
10138
10760
|
}) {
|
|
10139
|
-
return /* @__PURE__ */
|
|
10761
|
+
return /* @__PURE__ */ jsx24(
|
|
10140
10762
|
"button",
|
|
10141
10763
|
{
|
|
10142
10764
|
type: "button",
|
|
@@ -10144,7 +10766,7 @@ function FieldChevron({
|
|
|
10144
10766
|
onClick,
|
|
10145
10767
|
"aria-label": "Open page list",
|
|
10146
10768
|
tabIndex: -1,
|
|
10147
|
-
children: /* @__PURE__ */
|
|
10769
|
+
children: /* @__PURE__ */ jsx24(ChevronDown3, { size: 16 })
|
|
10148
10770
|
}
|
|
10149
10771
|
);
|
|
10150
10772
|
}
|
|
@@ -10161,10 +10783,10 @@ function UrlOrPageInput({
|
|
|
10161
10783
|
urlError
|
|
10162
10784
|
}) {
|
|
10163
10785
|
const inputId = useId2();
|
|
10164
|
-
const inputRef =
|
|
10165
|
-
const rootRef =
|
|
10166
|
-
const [isFocused, setIsFocused] =
|
|
10167
|
-
|
|
10786
|
+
const inputRef = useRef6(null);
|
|
10787
|
+
const rootRef = useRef6(null);
|
|
10788
|
+
const [isFocused, setIsFocused] = useState8(false);
|
|
10789
|
+
useEffect6(() => {
|
|
10168
10790
|
if (!dropdownOpen) return;
|
|
10169
10791
|
const isOutside = (e) => {
|
|
10170
10792
|
const root = rootRef.current;
|
|
@@ -10205,11 +10827,11 @@ function UrlOrPageInput({
|
|
|
10205
10827
|
"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]",
|
|
10206
10828
|
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"
|
|
10207
10829
|
);
|
|
10208
|
-
return /* @__PURE__ */
|
|
10209
|
-
/* @__PURE__ */
|
|
10210
|
-
/* @__PURE__ */
|
|
10211
|
-
/* @__PURE__ */
|
|
10212
|
-
selectedPage ? /* @__PURE__ */
|
|
10830
|
+
return /* @__PURE__ */ jsxs14("div", { className: "flex w-full flex-col gap-2 p-0", children: [
|
|
10831
|
+
/* @__PURE__ */ jsx24(Label, { htmlFor: inputId, className: cn(urlError && "text-destructive"), children: "Destination" }),
|
|
10832
|
+
/* @__PURE__ */ jsxs14("div", { ref: rootRef, className: "relative w-full", children: [
|
|
10833
|
+
/* @__PURE__ */ jsxs14("div", { "data-ohw-link-field": true, className: fieldClassName, children: [
|
|
10834
|
+
selectedPage ? /* @__PURE__ */ jsx24("div", { className: "flex shrink-0 items-center pr-2", children: /* @__PURE__ */ jsx24(
|
|
10213
10835
|
File2,
|
|
10214
10836
|
{
|
|
10215
10837
|
size: 16,
|
|
@@ -10217,7 +10839,7 @@ function UrlOrPageInput({
|
|
|
10217
10839
|
"aria-hidden": true
|
|
10218
10840
|
}
|
|
10219
10841
|
) }) : null,
|
|
10220
|
-
readOnly ? /* @__PURE__ */
|
|
10842
|
+
readOnly ? /* @__PURE__ */ jsx24("span", { className: "min-w-0 flex-1 truncate text-sm leading-5 text-foreground", children: selectedPage?.title ?? value }) : /* @__PURE__ */ jsx24(
|
|
10221
10843
|
Input,
|
|
10222
10844
|
{
|
|
10223
10845
|
ref: inputRef,
|
|
@@ -10243,7 +10865,7 @@ function UrlOrPageInput({
|
|
|
10243
10865
|
)
|
|
10244
10866
|
}
|
|
10245
10867
|
),
|
|
10246
|
-
selectedPage && !readOnly ? /* @__PURE__ */
|
|
10868
|
+
selectedPage && !readOnly ? /* @__PURE__ */ jsx24(
|
|
10247
10869
|
"button",
|
|
10248
10870
|
{
|
|
10249
10871
|
type: "button",
|
|
@@ -10251,26 +10873,26 @@ function UrlOrPageInput({
|
|
|
10251
10873
|
onMouseDown: clearSelection,
|
|
10252
10874
|
"aria-label": "Clear selected page",
|
|
10253
10875
|
tabIndex: -1,
|
|
10254
|
-
children: /* @__PURE__ */
|
|
10876
|
+
children: /* @__PURE__ */ jsx24(X3, { size: 16, "aria-hidden": true })
|
|
10255
10877
|
}
|
|
10256
10878
|
) : null,
|
|
10257
|
-
!readOnly ? /* @__PURE__ */
|
|
10879
|
+
!readOnly ? /* @__PURE__ */ jsx24(FieldChevron, { onClick: toggleDropdown }) : null
|
|
10258
10880
|
] }),
|
|
10259
|
-
dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */
|
|
10881
|
+
dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ jsx24(
|
|
10260
10882
|
"div",
|
|
10261
10883
|
{
|
|
10262
10884
|
"data-ohw-link-page-dropdown": "",
|
|
10263
10885
|
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",
|
|
10264
10886
|
onMouseDown: (e) => e.preventDefault(),
|
|
10265
|
-
children: filteredPages.map((page) => /* @__PURE__ */
|
|
10887
|
+
children: filteredPages.map((page) => /* @__PURE__ */ jsxs14(
|
|
10266
10888
|
"button",
|
|
10267
10889
|
{
|
|
10268
10890
|
type: "button",
|
|
10269
10891
|
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",
|
|
10270
10892
|
onClick: () => onPageSelect(page),
|
|
10271
10893
|
children: [
|
|
10272
|
-
/* @__PURE__ */
|
|
10273
|
-
/* @__PURE__ */
|
|
10894
|
+
/* @__PURE__ */ jsx24(File2, { size: 16, className: "shrink-0", "aria-hidden": true }),
|
|
10895
|
+
/* @__PURE__ */ jsx24("span", { className: "truncate", children: page.title })
|
|
10274
10896
|
]
|
|
10275
10897
|
},
|
|
10276
10898
|
page.path
|
|
@@ -10278,34 +10900,34 @@ function UrlOrPageInput({
|
|
|
10278
10900
|
}
|
|
10279
10901
|
) : null
|
|
10280
10902
|
] }),
|
|
10281
|
-
urlError ? /* @__PURE__ */
|
|
10903
|
+
urlError ? /* @__PURE__ */ jsx24("p", { className: "text-sm font-medium text-destructive", children: urlError }) : null
|
|
10282
10904
|
] });
|
|
10283
10905
|
}
|
|
10284
10906
|
|
|
10285
10907
|
// src/ui/link-modal/LinkEditorPanel.tsx
|
|
10286
|
-
import { Fragment as
|
|
10908
|
+
import { Fragment as Fragment7, jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
10287
10909
|
function LinkEditorPanel({ state, onClose }) {
|
|
10288
10910
|
const isCancel = state.secondaryLabel === "Cancel" || state.secondaryLabel === "Back to sections";
|
|
10289
|
-
return /* @__PURE__ */
|
|
10290
|
-
/* @__PURE__ */
|
|
10911
|
+
return /* @__PURE__ */ jsxs15(Fragment7, { children: [
|
|
10912
|
+
/* @__PURE__ */ jsx25(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx25(
|
|
10291
10913
|
"button",
|
|
10292
10914
|
{
|
|
10293
10915
|
type: "button",
|
|
10294
10916
|
className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50 h-7",
|
|
10295
10917
|
"aria-label": "Close",
|
|
10296
10918
|
onClick: onClose,
|
|
10297
|
-
children: /* @__PURE__ */
|
|
10919
|
+
children: /* @__PURE__ */ jsx25(X4, { size: 16, "aria-hidden": true })
|
|
10298
10920
|
}
|
|
10299
10921
|
) }),
|
|
10300
|
-
/* @__PURE__ */
|
|
10301
|
-
/* @__PURE__ */
|
|
10302
|
-
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */
|
|
10922
|
+
/* @__PURE__ */ jsx25(DialogHeader, { className: "w-full gap-1.5 p-6 pr-12", children: /* @__PURE__ */ jsx25(DialogTitle, { className: "m-0 w-full break-words", children: state.title }) }),
|
|
10923
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex w-full flex-col gap-3 px-6 pb-8 pt-1", children: [
|
|
10924
|
+
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ jsx25(
|
|
10303
10925
|
DestinationBreadcrumb,
|
|
10304
10926
|
{
|
|
10305
10927
|
pageTitle: state.selectedPage.title,
|
|
10306
10928
|
sectionLabel: state.selectedSection.label
|
|
10307
10929
|
}
|
|
10308
|
-
) : /* @__PURE__ */
|
|
10930
|
+
) : /* @__PURE__ */ jsx25(
|
|
10309
10931
|
UrlOrPageInput,
|
|
10310
10932
|
{
|
|
10311
10933
|
value: state.searchValue,
|
|
@@ -10318,8 +10940,8 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
10318
10940
|
urlError: state.urlError
|
|
10319
10941
|
}
|
|
10320
10942
|
),
|
|
10321
|
-
state.showChooseSection ? /* @__PURE__ */
|
|
10322
|
-
/* @__PURE__ */
|
|
10943
|
+
state.showChooseSection ? /* @__PURE__ */ jsxs15("div", { className: "flex flex-col justify-center gap-2", children: [
|
|
10944
|
+
/* @__PURE__ */ jsx25(
|
|
10323
10945
|
Button,
|
|
10324
10946
|
{
|
|
10325
10947
|
type: "button",
|
|
@@ -10330,15 +10952,15 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
10330
10952
|
children: "Choose a section"
|
|
10331
10953
|
}
|
|
10332
10954
|
),
|
|
10333
|
-
/* @__PURE__ */
|
|
10334
|
-
/* @__PURE__ */
|
|
10335
|
-
/* @__PURE__ */
|
|
10955
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
|
|
10956
|
+
/* @__PURE__ */ jsx25(Info, { size: 16, className: "shrink-0", "aria-hidden": true }),
|
|
10957
|
+
/* @__PURE__ */ jsx25("span", { children: "Pick a section this link should scroll to." })
|
|
10336
10958
|
] })
|
|
10337
10959
|
] }) : null,
|
|
10338
|
-
state.showSectionRow && state.selectedSection ? /* @__PURE__ */
|
|
10960
|
+
state.showSectionRow && state.selectedSection ? /* @__PURE__ */ jsx25(SectionTreeItem, { section: state.selectedSection, selected: true }) : null
|
|
10339
10961
|
] }),
|
|
10340
|
-
/* @__PURE__ */
|
|
10341
|
-
/* @__PURE__ */
|
|
10962
|
+
/* @__PURE__ */ jsxs15(DialogFooter, { className: "w-full px-6 pb-6", children: [
|
|
10963
|
+
/* @__PURE__ */ jsx25(
|
|
10342
10964
|
Button,
|
|
10343
10965
|
{
|
|
10344
10966
|
type: "button",
|
|
@@ -10353,7 +10975,7 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
10353
10975
|
children: state.secondaryLabel
|
|
10354
10976
|
}
|
|
10355
10977
|
),
|
|
10356
|
-
/* @__PURE__ */
|
|
10978
|
+
/* @__PURE__ */ jsx25(
|
|
10357
10979
|
Button,
|
|
10358
10980
|
{
|
|
10359
10981
|
type: "button",
|
|
@@ -10372,11 +10994,11 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
10372
10994
|
}
|
|
10373
10995
|
|
|
10374
10996
|
// src/ui/link-modal/SectionPickerOverlay.tsx
|
|
10375
|
-
import { useCallback as
|
|
10997
|
+
import { useCallback as useCallback4, useEffect as useEffect7, useMemo as useMemo2, useRef as useRef7, useState as useState9 } from "react";
|
|
10376
10998
|
import { createPortal as createPortal2 } from "react-dom";
|
|
10377
10999
|
import { ArrowLeft as ArrowLeft2, Check as Check2 } from "lucide-react";
|
|
10378
11000
|
import { usePathname, useRouter as useRouter2 } from "next/navigation";
|
|
10379
|
-
import { jsx as
|
|
11001
|
+
import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
10380
11002
|
var DIM_OVERLAY = "rgba(0, 0, 0, 0.45)";
|
|
10381
11003
|
function rectsEqual(a, b) {
|
|
10382
11004
|
if (a.size !== b.size) return false;
|
|
@@ -10409,12 +11031,12 @@ function hitTestSectionId(x, y, sectionIds, rects) {
|
|
|
10409
11031
|
return null;
|
|
10410
11032
|
}
|
|
10411
11033
|
function useSectionRects(sectionIdsKey, enabled) {
|
|
10412
|
-
const [rects, setRects] =
|
|
11034
|
+
const [rects, setRects] = useState9(/* @__PURE__ */ new Map());
|
|
10413
11035
|
const sectionIds = useMemo2(
|
|
10414
11036
|
() => sectionIdsKey ? sectionIdsKey.split("\0") : [],
|
|
10415
11037
|
[sectionIdsKey]
|
|
10416
11038
|
);
|
|
10417
|
-
|
|
11039
|
+
useEffect7(() => {
|
|
10418
11040
|
if (!enabled || sectionIds.length === 0) {
|
|
10419
11041
|
setRects((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Map());
|
|
10420
11042
|
return;
|
|
@@ -10455,13 +11077,13 @@ function SectionPickerOverlay({
|
|
|
10455
11077
|
}) {
|
|
10456
11078
|
const router = useRouter2();
|
|
10457
11079
|
const pathname = usePathname();
|
|
10458
|
-
const [selectedId, setSelectedId] =
|
|
10459
|
-
const [hoveredId, setHoveredId] =
|
|
10460
|
-
const pointerRef =
|
|
10461
|
-
const pointerScreenRef =
|
|
10462
|
-
const iframeOffsetTopRef =
|
|
10463
|
-
const sectionIdsRef =
|
|
10464
|
-
const [chromeClip, setChromeClip] =
|
|
11080
|
+
const [selectedId, setSelectedId] = useState9(null);
|
|
11081
|
+
const [hoveredId, setHoveredId] = useState9(null);
|
|
11082
|
+
const pointerRef = useRef7(null);
|
|
11083
|
+
const pointerScreenRef = useRef7(null);
|
|
11084
|
+
const iframeOffsetTopRef = useRef7(null);
|
|
11085
|
+
const sectionIdsRef = useRef7([]);
|
|
11086
|
+
const [chromeClip, setChromeClip] = useState9(
|
|
10465
11087
|
() => ({
|
|
10466
11088
|
top: 0,
|
|
10467
11089
|
bottom: typeof window !== "undefined" ? window.innerHeight : 0
|
|
@@ -10469,12 +11091,12 @@ function SectionPickerOverlay({
|
|
|
10469
11091
|
);
|
|
10470
11092
|
const normalizedTarget = normalizePath(pagePath);
|
|
10471
11093
|
const isOnTargetPage = normalizePath(pathname) === normalizedTarget;
|
|
10472
|
-
|
|
11094
|
+
useEffect7(() => {
|
|
10473
11095
|
if (isOnTargetPage) return;
|
|
10474
11096
|
const search = readPreservedSearch();
|
|
10475
11097
|
router.push(`${normalizedTarget}${search}`);
|
|
10476
11098
|
}, [isOnTargetPage, normalizedTarget, router]);
|
|
10477
|
-
|
|
11099
|
+
useEffect7(() => {
|
|
10478
11100
|
document.documentElement.setAttribute("data-ohw-section-picking", "");
|
|
10479
11101
|
document.querySelectorAll("[data-ohw-hovered]").forEach((el) => {
|
|
10480
11102
|
el.removeAttribute("data-ohw-hovered");
|
|
@@ -10503,7 +11125,7 @@ function SectionPickerOverlay({
|
|
|
10503
11125
|
);
|
|
10504
11126
|
sectionIdsRef.current = sectionIds;
|
|
10505
11127
|
const rects = useSectionRects(sectionIdsKey, isOnTargetPage);
|
|
10506
|
-
const applyHoverAt =
|
|
11128
|
+
const applyHoverAt = useCallback4(
|
|
10507
11129
|
(x, y, liveRects) => {
|
|
10508
11130
|
const ids = sectionIdsRef.current;
|
|
10509
11131
|
const map = liveRects ?? readSectionRects(ids);
|
|
@@ -10512,7 +11134,7 @@ function SectionPickerOverlay({
|
|
|
10512
11134
|
},
|
|
10513
11135
|
[]
|
|
10514
11136
|
);
|
|
10515
|
-
|
|
11137
|
+
useEffect7(() => {
|
|
10516
11138
|
const applyClip = (iframeOffsetTop, visibleCanvasTop, canvasH) => {
|
|
10517
11139
|
const top = Math.max(0, visibleCanvasTop - iframeOffsetTop);
|
|
10518
11140
|
const bottom = Math.min(
|
|
@@ -10554,12 +11176,12 @@ function SectionPickerOverlay({
|
|
|
10554
11176
|
window.removeEventListener("resize", onResize);
|
|
10555
11177
|
};
|
|
10556
11178
|
}, [applyHoverAt]);
|
|
10557
|
-
|
|
11179
|
+
useEffect7(() => {
|
|
10558
11180
|
const ptr = pointerRef.current;
|
|
10559
11181
|
if (!ptr) return;
|
|
10560
11182
|
applyHoverAt(ptr.x, ptr.y, rects);
|
|
10561
11183
|
}, [rects, applyHoverAt]);
|
|
10562
|
-
|
|
11184
|
+
useEffect7(() => {
|
|
10563
11185
|
const rememberPointer = (clientX, clientY) => {
|
|
10564
11186
|
pointerRef.current = { x: clientX, y: clientY };
|
|
10565
11187
|
const top = iframeOffsetTopRef.current;
|
|
@@ -10583,7 +11205,7 @@ function SectionPickerOverlay({
|
|
|
10583
11205
|
window.removeEventListener("message", onPointerSync);
|
|
10584
11206
|
};
|
|
10585
11207
|
}, [rects, applyHoverAt]);
|
|
10586
|
-
const handleSelect =
|
|
11208
|
+
const handleSelect = useCallback4(
|
|
10587
11209
|
(section) => {
|
|
10588
11210
|
if (selectedId) return;
|
|
10589
11211
|
setSelectedId(section.id);
|
|
@@ -10591,7 +11213,7 @@ function SectionPickerOverlay({
|
|
|
10591
11213
|
},
|
|
10592
11214
|
[selectedId, onSelect]
|
|
10593
11215
|
);
|
|
10594
|
-
|
|
11216
|
+
useEffect7(() => {
|
|
10595
11217
|
const onKeyDown = (e) => {
|
|
10596
11218
|
if (e.key === "Escape") {
|
|
10597
11219
|
e.preventDefault();
|
|
@@ -10605,7 +11227,7 @@ function SectionPickerOverlay({
|
|
|
10605
11227
|
const portalRoot = typeof document !== "undefined" ? document.querySelector("[data-ohw-bridge-root]") ?? document.body : null;
|
|
10606
11228
|
if (!portalRoot) return null;
|
|
10607
11229
|
return createPortal2(
|
|
10608
|
-
/* @__PURE__ */
|
|
11230
|
+
/* @__PURE__ */ jsxs16(
|
|
10609
11231
|
"div",
|
|
10610
11232
|
{
|
|
10611
11233
|
"data-ohw-section-picker": "",
|
|
@@ -10615,12 +11237,12 @@ function SectionPickerOverlay({
|
|
|
10615
11237
|
role: "dialog",
|
|
10616
11238
|
"aria-label": "Choose a section",
|
|
10617
11239
|
children: [
|
|
10618
|
-
/* @__PURE__ */
|
|
11240
|
+
/* @__PURE__ */ jsx26(
|
|
10619
11241
|
"div",
|
|
10620
11242
|
{
|
|
10621
11243
|
className: "pointer-events-auto fixed left-5 z-[2]",
|
|
10622
11244
|
style: { top: chromeClip.top + 20 },
|
|
10623
|
-
children: /* @__PURE__ */
|
|
11245
|
+
children: /* @__PURE__ */ jsxs16(
|
|
10624
11246
|
Button,
|
|
10625
11247
|
{
|
|
10626
11248
|
type: "button",
|
|
@@ -10629,14 +11251,14 @@ function SectionPickerOverlay({
|
|
|
10629
11251
|
className: "h-8 min-w-0 gap-1 border-border bg-background px-2 py-1.5 shadow-sm hover:bg-muted cursor-pointer",
|
|
10630
11252
|
onClick: onBack,
|
|
10631
11253
|
children: [
|
|
10632
|
-
/* @__PURE__ */
|
|
11254
|
+
/* @__PURE__ */ jsx26(ArrowLeft2, { className: "size-4 shrink-0", "aria-hidden": true }),
|
|
10633
11255
|
"Back"
|
|
10634
11256
|
]
|
|
10635
11257
|
}
|
|
10636
11258
|
)
|
|
10637
11259
|
}
|
|
10638
11260
|
),
|
|
10639
|
-
/* @__PURE__ */
|
|
11261
|
+
/* @__PURE__ */ jsx26(
|
|
10640
11262
|
"div",
|
|
10641
11263
|
{
|
|
10642
11264
|
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",
|
|
@@ -10649,7 +11271,7 @@ function SectionPickerOverlay({
|
|
|
10649
11271
|
children: "Click on section to select"
|
|
10650
11272
|
}
|
|
10651
11273
|
),
|
|
10652
|
-
!isOnTargetPage ? /* @__PURE__ */
|
|
11274
|
+
!isOnTargetPage ? /* @__PURE__ */ jsx26(
|
|
10653
11275
|
"div",
|
|
10654
11276
|
{
|
|
10655
11277
|
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",
|
|
@@ -10657,14 +11279,14 @@ function SectionPickerOverlay({
|
|
|
10657
11279
|
children: "Loading page preview\u2026"
|
|
10658
11280
|
}
|
|
10659
11281
|
) : null,
|
|
10660
|
-
isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */
|
|
11282
|
+
isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */ jsx26("div", { className: "pointer-events-auto fixed inset-0 z-[1] flex items-center justify-center bg-muted/40", children: /* @__PURE__ */ jsx26("p", { className: "text-sm text-muted-foreground", children: "No sections found on this page." }) }) : null,
|
|
10661
11283
|
isOnTargetPage ? liveSections.map((section) => {
|
|
10662
11284
|
const rect = rects.get(section.id);
|
|
10663
11285
|
if (!rect || rect.width <= 0 || rect.height <= 0) return null;
|
|
10664
11286
|
const isSelected = selectedId === section.id;
|
|
10665
11287
|
const isHovered = hoveredId === section.id;
|
|
10666
11288
|
const isLit = isSelected || isHovered;
|
|
10667
|
-
return /* @__PURE__ */
|
|
11289
|
+
return /* @__PURE__ */ jsxs16(
|
|
10668
11290
|
"button",
|
|
10669
11291
|
{
|
|
10670
11292
|
type: "button",
|
|
@@ -10679,7 +11301,7 @@ function SectionPickerOverlay({
|
|
|
10679
11301
|
"aria-label": `Select section ${section.label}`,
|
|
10680
11302
|
onClick: () => handleSelect(section),
|
|
10681
11303
|
children: [
|
|
10682
|
-
isLit ? /* @__PURE__ */
|
|
11304
|
+
isLit ? /* @__PURE__ */ jsx26(
|
|
10683
11305
|
"span",
|
|
10684
11306
|
{
|
|
10685
11307
|
className: "pointer-events-none absolute",
|
|
@@ -10692,13 +11314,13 @@ function SectionPickerOverlay({
|
|
|
10692
11314
|
"aria-hidden": true
|
|
10693
11315
|
}
|
|
10694
11316
|
) : null,
|
|
10695
|
-
isSelected ? /* @__PURE__ */
|
|
11317
|
+
isSelected ? /* @__PURE__ */ jsx26(
|
|
10696
11318
|
"span",
|
|
10697
11319
|
{
|
|
10698
11320
|
className: "absolute right-3 top-3 flex size-8 items-center justify-center rounded-full text-white",
|
|
10699
11321
|
style: { backgroundColor: "var(--ohw-primary, #0885fe)" },
|
|
10700
11322
|
"aria-hidden": true,
|
|
10701
|
-
children: /* @__PURE__ */
|
|
11323
|
+
children: /* @__PURE__ */ jsx26(Check2, { className: "size-5" })
|
|
10702
11324
|
}
|
|
10703
11325
|
) : null
|
|
10704
11326
|
]
|
|
@@ -10714,7 +11336,7 @@ function SectionPickerOverlay({
|
|
|
10714
11336
|
}
|
|
10715
11337
|
|
|
10716
11338
|
// src/ui/link-modal/useLinkModalState.ts
|
|
10717
|
-
import { useCallback as
|
|
11339
|
+
import { useCallback as useCallback5, useEffect as useEffect8, useMemo as useMemo3, useState as useState10 } from "react";
|
|
10718
11340
|
function useLinkModalState({
|
|
10719
11341
|
open,
|
|
10720
11342
|
mode,
|
|
@@ -10727,13 +11349,13 @@ function useLinkModalState({
|
|
|
10727
11349
|
onSubmit
|
|
10728
11350
|
}) {
|
|
10729
11351
|
const availablePages = useMemo3(() => pages, [pages]);
|
|
10730
|
-
const [searchValue, setSearchValue] =
|
|
10731
|
-
const [selectedPage, setSelectedPage] =
|
|
10732
|
-
const [selectedSection, setSelectedSection] =
|
|
10733
|
-
const [step, setStep] =
|
|
10734
|
-
const [dropdownOpen, setDropdownOpen] =
|
|
10735
|
-
const [urlError, setUrlError] =
|
|
10736
|
-
const reset =
|
|
11352
|
+
const [searchValue, setSearchValue] = useState10("");
|
|
11353
|
+
const [selectedPage, setSelectedPage] = useState10(null);
|
|
11354
|
+
const [selectedSection, setSelectedSection] = useState10(null);
|
|
11355
|
+
const [step, setStep] = useState10("input");
|
|
11356
|
+
const [dropdownOpen, setDropdownOpen] = useState10(false);
|
|
11357
|
+
const [urlError, setUrlError] = useState10("");
|
|
11358
|
+
const reset = useCallback5(() => {
|
|
10737
11359
|
setSearchValue("");
|
|
10738
11360
|
setSelectedPage(null);
|
|
10739
11361
|
setSelectedSection(null);
|
|
@@ -10741,7 +11363,7 @@ function useLinkModalState({
|
|
|
10741
11363
|
setDropdownOpen(false);
|
|
10742
11364
|
setUrlError("");
|
|
10743
11365
|
}, []);
|
|
10744
|
-
|
|
11366
|
+
useEffect8(() => {
|
|
10745
11367
|
if (!open) return;
|
|
10746
11368
|
if (mode === "edit" && initialTarget) {
|
|
10747
11369
|
const { pageRoute } = parseTarget(initialTarget);
|
|
@@ -10878,7 +11500,7 @@ function useLinkModalState({
|
|
|
10878
11500
|
}
|
|
10879
11501
|
|
|
10880
11502
|
// src/ui/link-modal/LinkPopover.tsx
|
|
10881
|
-
import { Fragment as
|
|
11503
|
+
import { Fragment as Fragment8, jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
10882
11504
|
function postToParent(data) {
|
|
10883
11505
|
window.parent?.postMessage(data, "*");
|
|
10884
11506
|
}
|
|
@@ -10907,7 +11529,7 @@ function LinkPopover({
|
|
|
10907
11529
|
onSubmit
|
|
10908
11530
|
});
|
|
10909
11531
|
const sectionPickerActive = state.showSectionPicker && Boolean(state.selectedPage);
|
|
10910
|
-
|
|
11532
|
+
useEffect9(() => {
|
|
10911
11533
|
if (!open) return;
|
|
10912
11534
|
if (sectionPickerActive) {
|
|
10913
11535
|
postToParent({ type: "ui:unlock" });
|
|
@@ -10974,15 +11596,15 @@ function LinkPopover({
|
|
|
10974
11596
|
);
|
|
10975
11597
|
};
|
|
10976
11598
|
}, [open, sectionPickerActive]);
|
|
10977
|
-
return /* @__PURE__ */
|
|
10978
|
-
/* @__PURE__ */
|
|
11599
|
+
return /* @__PURE__ */ jsxs17(Fragment8, { children: [
|
|
11600
|
+
/* @__PURE__ */ jsx27(
|
|
10979
11601
|
Dialog2,
|
|
10980
11602
|
{
|
|
10981
11603
|
open: open && !sectionPickerActive,
|
|
10982
11604
|
onOpenChange: (next) => {
|
|
10983
11605
|
if (!next) onClose?.();
|
|
10984
11606
|
},
|
|
10985
|
-
children: /* @__PURE__ */
|
|
11607
|
+
children: /* @__PURE__ */ jsx27(
|
|
10986
11608
|
DialogContent,
|
|
10987
11609
|
{
|
|
10988
11610
|
ref: panelRef,
|
|
@@ -10992,12 +11614,12 @@ function LinkPopover({
|
|
|
10992
11614
|
"data-ohw-bridge": "",
|
|
10993
11615
|
showCloseButton: false,
|
|
10994
11616
|
className: "gap-0 p-0 w-full max-w-[448px] pointer-events-auto z-[2147483646] overflow-visible",
|
|
10995
|
-
children: /* @__PURE__ */
|
|
11617
|
+
children: /* @__PURE__ */ jsx27(LinkEditorPanel, { state, onClose })
|
|
10996
11618
|
}
|
|
10997
11619
|
)
|
|
10998
11620
|
}
|
|
10999
11621
|
),
|
|
11000
|
-
sectionPickerActive && state.selectedPage ? /* @__PURE__ */
|
|
11622
|
+
sectionPickerActive && state.selectedPage ? /* @__PURE__ */ jsx27(
|
|
11001
11623
|
SectionPickerOverlay,
|
|
11002
11624
|
{
|
|
11003
11625
|
pagePath: state.selectedPage.path,
|
|
@@ -14186,14 +14808,14 @@ function addFooterColumnWithPersist({
|
|
|
14186
14808
|
|
|
14187
14809
|
// src/ui/FloatingPanel.tsx
|
|
14188
14810
|
import {
|
|
14189
|
-
useCallback as
|
|
14190
|
-
useEffect as
|
|
14811
|
+
useCallback as useCallback6,
|
|
14812
|
+
useEffect as useEffect10,
|
|
14191
14813
|
useLayoutEffect as useLayoutEffect4,
|
|
14192
|
-
useRef as
|
|
14193
|
-
useState as
|
|
14814
|
+
useRef as useRef8,
|
|
14815
|
+
useState as useState11
|
|
14194
14816
|
} from "react";
|
|
14195
14817
|
import { X as X5 } from "lucide-react";
|
|
14196
|
-
import { jsx as
|
|
14818
|
+
import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
14197
14819
|
var PANEL_WIDTH = 256;
|
|
14198
14820
|
var EDGE_MARGIN = 16;
|
|
14199
14821
|
function getVisibleClip(parentScroll) {
|
|
@@ -14239,9 +14861,9 @@ function FloatingPanel({
|
|
|
14239
14861
|
className,
|
|
14240
14862
|
bodyClassName
|
|
14241
14863
|
}) {
|
|
14242
|
-
const panelRef =
|
|
14243
|
-
const [measured, setMeasured] =
|
|
14244
|
-
const dragRef =
|
|
14864
|
+
const panelRef = useRef8(null);
|
|
14865
|
+
const [measured, setMeasured] = useState11({ w: PANEL_WIDTH, h: 280 });
|
|
14866
|
+
const dragRef = useRef8(null);
|
|
14245
14867
|
const resolved = position ?? defaultFloatingPanelPosition(parentScroll, measured.h);
|
|
14246
14868
|
const clamped = clampPosition(resolved, parentScroll, measured.w, measured.h);
|
|
14247
14869
|
useLayoutEffect4(() => {
|
|
@@ -14250,12 +14872,12 @@ function FloatingPanel({
|
|
|
14250
14872
|
const next = { w: el.offsetWidth || PANEL_WIDTH, h: el.offsetHeight || 280 };
|
|
14251
14873
|
setMeasured((prev) => prev.w === next.w && prev.h === next.h ? prev : next);
|
|
14252
14874
|
}, [open, children, title, context]);
|
|
14253
|
-
|
|
14875
|
+
useEffect10(() => {
|
|
14254
14876
|
if (!open || !position || !onPositionChange) return;
|
|
14255
14877
|
const next = clampPosition(position, parentScroll, measured.w, measured.h);
|
|
14256
14878
|
if (next.x !== position.x || next.y !== position.y) onPositionChange(next);
|
|
14257
14879
|
}, [open, parentScroll, measured.w, measured.h, position, onPositionChange]);
|
|
14258
|
-
const onHeaderPointerDown =
|
|
14880
|
+
const onHeaderPointerDown = useCallback6(
|
|
14259
14881
|
(e) => {
|
|
14260
14882
|
if (e.button !== 0) return;
|
|
14261
14883
|
if (e.target.closest("[data-ohw-floating-panel-close]")) return;
|
|
@@ -14274,7 +14896,7 @@ function FloatingPanel({
|
|
|
14274
14896
|
},
|
|
14275
14897
|
[clamped.x, clamped.y]
|
|
14276
14898
|
);
|
|
14277
|
-
const onHeaderPointerMove =
|
|
14899
|
+
const onHeaderPointerMove = useCallback6(
|
|
14278
14900
|
(e) => {
|
|
14279
14901
|
const drag = dragRef.current;
|
|
14280
14902
|
if (!drag || drag.pointerId !== e.pointerId) return;
|
|
@@ -14301,7 +14923,7 @@ function FloatingPanel({
|
|
|
14301
14923
|
},
|
|
14302
14924
|
[measured.h, measured.w, onPositionChange, parentScroll]
|
|
14303
14925
|
);
|
|
14304
|
-
const endDrag =
|
|
14926
|
+
const endDrag = useCallback6((e) => {
|
|
14305
14927
|
const drag = dragRef.current;
|
|
14306
14928
|
if (!drag || drag.pointerId !== e.pointerId) return;
|
|
14307
14929
|
dragRef.current = null;
|
|
@@ -14311,13 +14933,13 @@ function FloatingPanel({
|
|
|
14311
14933
|
} catch {
|
|
14312
14934
|
}
|
|
14313
14935
|
}, []);
|
|
14314
|
-
|
|
14936
|
+
useEffect10(() => {
|
|
14315
14937
|
if (open) return;
|
|
14316
14938
|
document.documentElement.removeAttribute("data-ohw-panel-dragging");
|
|
14317
14939
|
}, [open]);
|
|
14318
|
-
|
|
14940
|
+
useEffect10(() => () => document.documentElement.removeAttribute("data-ohw-panel-dragging"), []);
|
|
14319
14941
|
if (!open) return null;
|
|
14320
|
-
return /* @__PURE__ */
|
|
14942
|
+
return /* @__PURE__ */ jsxs18(
|
|
14321
14943
|
"div",
|
|
14322
14944
|
{
|
|
14323
14945
|
ref: panelRef,
|
|
@@ -14334,7 +14956,7 @@ function FloatingPanel({
|
|
|
14334
14956
|
onPointerDown: (e) => e.stopPropagation(),
|
|
14335
14957
|
onClick: (e) => e.stopPropagation(),
|
|
14336
14958
|
children: [
|
|
14337
|
-
/* @__PURE__ */
|
|
14959
|
+
/* @__PURE__ */ jsxs18(
|
|
14338
14960
|
"div",
|
|
14339
14961
|
{
|
|
14340
14962
|
"data-ohw-floating-panel-header": "",
|
|
@@ -14344,14 +14966,14 @@ function FloatingPanel({
|
|
|
14344
14966
|
onPointerUp: endDrag,
|
|
14345
14967
|
onPointerCancel: endDrag,
|
|
14346
14968
|
children: [
|
|
14347
|
-
/* @__PURE__ */
|
|
14348
|
-
/* @__PURE__ */
|
|
14349
|
-
icon ? /* @__PURE__ */
|
|
14350
|
-
/* @__PURE__ */
|
|
14969
|
+
/* @__PURE__ */ jsxs18("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
|
|
14970
|
+
/* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
|
|
14971
|
+
icon ? /* @__PURE__ */ jsx28("span", { className: "shrink-0 text-foreground", children: icon }) : null,
|
|
14972
|
+
/* @__PURE__ */ jsx28("p", { className: "min-w-0 flex-1 text-lg font-semibold leading-7 text-foreground", children: title })
|
|
14351
14973
|
] }),
|
|
14352
|
-
context ? /* @__PURE__ */
|
|
14974
|
+
context ? /* @__PURE__ */ jsx28("p", { className: "w-full text-sm leading-5 text-muted-foreground", children: context }) : null
|
|
14353
14975
|
] }),
|
|
14354
|
-
/* @__PURE__ */
|
|
14976
|
+
/* @__PURE__ */ jsx28(
|
|
14355
14977
|
"button",
|
|
14356
14978
|
{
|
|
14357
14979
|
type: "button",
|
|
@@ -14363,13 +14985,13 @@ function FloatingPanel({
|
|
|
14363
14985
|
onClose();
|
|
14364
14986
|
},
|
|
14365
14987
|
onPointerDown: (e) => e.stopPropagation(),
|
|
14366
|
-
children: /* @__PURE__ */
|
|
14988
|
+
children: /* @__PURE__ */ jsx28(X5, { size: 16, "aria-hidden": true })
|
|
14367
14989
|
}
|
|
14368
14990
|
)
|
|
14369
14991
|
]
|
|
14370
14992
|
}
|
|
14371
14993
|
),
|
|
14372
|
-
/* @__PURE__ */
|
|
14994
|
+
/* @__PURE__ */ jsx28(
|
|
14373
14995
|
"div",
|
|
14374
14996
|
{
|
|
14375
14997
|
"data-ohw-floating-panel-body": "",
|
|
@@ -14383,15 +15005,15 @@ function FloatingPanel({
|
|
|
14383
15005
|
}
|
|
14384
15006
|
|
|
14385
15007
|
// src/ui/socials-display-panel.tsx
|
|
14386
|
-
import { jsx as
|
|
15008
|
+
import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
14387
15009
|
function DisplaySwitch({
|
|
14388
15010
|
label,
|
|
14389
15011
|
checked,
|
|
14390
15012
|
disabled,
|
|
14391
15013
|
onChange
|
|
14392
15014
|
}) {
|
|
14393
|
-
return /* @__PURE__ */
|
|
14394
|
-
/* @__PURE__ */
|
|
15015
|
+
return /* @__PURE__ */ jsxs19("div", { className: "flex w-full items-center gap-2", children: [
|
|
15016
|
+
/* @__PURE__ */ jsx29(
|
|
14395
15017
|
"span",
|
|
14396
15018
|
{
|
|
14397
15019
|
className: cn(
|
|
@@ -14401,7 +15023,7 @@ function DisplaySwitch({
|
|
|
14401
15023
|
children: label
|
|
14402
15024
|
}
|
|
14403
15025
|
),
|
|
14404
|
-
/* @__PURE__ */
|
|
15026
|
+
/* @__PURE__ */ jsx29(
|
|
14405
15027
|
"button",
|
|
14406
15028
|
{
|
|
14407
15029
|
type: "button",
|
|
@@ -14415,7 +15037,7 @@ function DisplaySwitch({
|
|
|
14415
15037
|
checked ? "bg-bridge-primary" : "bg-primary-50",
|
|
14416
15038
|
disabled ? "cursor-default opacity-50" : "cursor-pointer"
|
|
14417
15039
|
),
|
|
14418
|
-
children: /* @__PURE__ */
|
|
15040
|
+
children: /* @__PURE__ */ jsx29(
|
|
14419
15041
|
"span",
|
|
14420
15042
|
{
|
|
14421
15043
|
className: cn(
|
|
@@ -14429,8 +15051,8 @@ function DisplaySwitch({
|
|
|
14429
15051
|
] });
|
|
14430
15052
|
}
|
|
14431
15053
|
function SocialsDisplayPanel({ display, onChange, className }) {
|
|
14432
|
-
return /* @__PURE__ */
|
|
14433
|
-
/* @__PURE__ */
|
|
15054
|
+
return /* @__PURE__ */ jsxs19("div", { className: cn("flex w-full flex-col gap-3", className), children: [
|
|
15055
|
+
/* @__PURE__ */ jsx29(
|
|
14434
15056
|
DisplaySwitch,
|
|
14435
15057
|
{
|
|
14436
15058
|
label: "Text",
|
|
@@ -14439,7 +15061,7 @@ function SocialsDisplayPanel({ display, onChange, className }) {
|
|
|
14439
15061
|
onChange: (text) => onChange({ ...display, text })
|
|
14440
15062
|
}
|
|
14441
15063
|
),
|
|
14442
|
-
/* @__PURE__ */
|
|
15064
|
+
/* @__PURE__ */ jsx29(
|
|
14443
15065
|
DisplaySwitch,
|
|
14444
15066
|
{
|
|
14445
15067
|
label: "Icon",
|
|
@@ -14714,7 +15336,7 @@ function hitTestNavDropSlot(clientX, clientY, draggedHrefKey, draggedEl) {
|
|
|
14714
15336
|
}
|
|
14715
15337
|
|
|
14716
15338
|
// src/useNavItemDrag.ts
|
|
14717
|
-
import { useCallback as
|
|
15339
|
+
import { useCallback as useCallback7, useEffect as useEffect11, useRef as useRef9, useState as useState12 } from "react";
|
|
14718
15340
|
function useNavItemDrag({
|
|
14719
15341
|
isEditMode,
|
|
14720
15342
|
editContentRef,
|
|
@@ -14738,11 +15360,11 @@ function useNavItemDrag({
|
|
|
14738
15360
|
getNavigationItemAnchor: getNavigationItemAnchor2,
|
|
14739
15361
|
isDragHandleDisabled: isDragHandleDisabled2
|
|
14740
15362
|
}) {
|
|
14741
|
-
const navDragRef =
|
|
14742
|
-
const [navDropSlots, setNavDropSlots] =
|
|
14743
|
-
const [activeNavDropIndex, setActiveNavDropIndex] =
|
|
14744
|
-
const navPointerDragRef =
|
|
14745
|
-
const clearNavDragVisuals =
|
|
15363
|
+
const navDragRef = useRef9(null);
|
|
15364
|
+
const [navDropSlots, setNavDropSlots] = useState12([]);
|
|
15365
|
+
const [activeNavDropIndex, setActiveNavDropIndex] = useState12(null);
|
|
15366
|
+
const navPointerDragRef = useRef9(null);
|
|
15367
|
+
const clearNavDragVisuals = useCallback7(() => {
|
|
14746
15368
|
const session = navDragRef.current;
|
|
14747
15369
|
const nestedHrefKey = session?.draggedEl?.closest("[data-ohw-nav-children]") != null ? session.hrefKey : null;
|
|
14748
15370
|
navDragRef.current = null;
|
|
@@ -14775,7 +15397,7 @@ function useNavItemDrag({
|
|
|
14775
15397
|
document.documentElement.removeAttribute("data-ohw-nav-dragging-root");
|
|
14776
15398
|
unlockItemDragInteraction();
|
|
14777
15399
|
}, [setDraggedItemRect, setIsItemDragging, setSiblingHintRects]);
|
|
14778
|
-
const refreshNavDragVisuals =
|
|
15400
|
+
const refreshNavDragVisuals = useCallback7(
|
|
14779
15401
|
(session, activeSlot, clientX, clientY) => {
|
|
14780
15402
|
setDraggedItemRect(session.draggedEl.getBoundingClientRect());
|
|
14781
15403
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -14793,13 +15415,13 @@ function useNavItemDrag({
|
|
|
14793
15415
|
},
|
|
14794
15416
|
[setDraggedItemRect, setSiblingHintRects]
|
|
14795
15417
|
);
|
|
14796
|
-
const refreshNavDragVisualsRef =
|
|
15418
|
+
const refreshNavDragVisualsRef = useRef9(refreshNavDragVisuals);
|
|
14797
15419
|
refreshNavDragVisualsRef.current = refreshNavDragVisuals;
|
|
14798
|
-
const commitNavDragRef =
|
|
15420
|
+
const commitNavDragRef = useRef9(() => {
|
|
14799
15421
|
});
|
|
14800
|
-
const beginNavDragRef =
|
|
15422
|
+
const beginNavDragRef = useRef9(() => {
|
|
14801
15423
|
});
|
|
14802
|
-
const beginNavDrag =
|
|
15424
|
+
const beginNavDrag = useCallback7(
|
|
14803
15425
|
(session) => {
|
|
14804
15426
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
14805
15427
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -14838,7 +15460,7 @@ function useNavItemDrag({
|
|
|
14838
15460
|
]
|
|
14839
15461
|
);
|
|
14840
15462
|
beginNavDragRef.current = beginNavDrag;
|
|
14841
|
-
const commitNavDrag =
|
|
15463
|
+
const commitNavDrag = useCallback7(
|
|
14842
15464
|
(clientX, clientY) => {
|
|
14843
15465
|
const session = navDragRef.current;
|
|
14844
15466
|
if (!session) {
|
|
@@ -14917,7 +15539,7 @@ function useNavItemDrag({
|
|
|
14917
15539
|
[clearNavDragVisuals, deselectRef, editContentRef, postToParentRef, selectRef]
|
|
14918
15540
|
);
|
|
14919
15541
|
commitNavDragRef.current = commitNavDrag;
|
|
14920
|
-
const startNavLinkDrag =
|
|
15542
|
+
const startNavLinkDrag = useCallback7(
|
|
14921
15543
|
(anchor, clientX, clientY, wasSelected) => {
|
|
14922
15544
|
if (footerDragRef.current) return false;
|
|
14923
15545
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -14935,7 +15557,7 @@ function useNavItemDrag({
|
|
|
14935
15557
|
},
|
|
14936
15558
|
[beginNavDrag, footerDragRef, isDragHandleDisabled2, isCtaButton]
|
|
14937
15559
|
);
|
|
14938
|
-
const onNavDragOver =
|
|
15560
|
+
const onNavDragOver = useCallback7(
|
|
14939
15561
|
(e) => {
|
|
14940
15562
|
const session = navDragRef.current;
|
|
14941
15563
|
if (!session) return false;
|
|
@@ -14947,7 +15569,7 @@ function useNavItemDrag({
|
|
|
14947
15569
|
},
|
|
14948
15570
|
[]
|
|
14949
15571
|
);
|
|
14950
|
-
|
|
15572
|
+
useEffect11(() => {
|
|
14951
15573
|
if (!isEditMode) return;
|
|
14952
15574
|
const THRESHOLD = 10;
|
|
14953
15575
|
const resolveWasSelected = (el) => {
|
|
@@ -15074,7 +15696,7 @@ function useNavItemDrag({
|
|
|
15074
15696
|
setLinkPopover,
|
|
15075
15697
|
suppressNextClickRef
|
|
15076
15698
|
]);
|
|
15077
|
-
const armNavPressFromChrome =
|
|
15699
|
+
const armNavPressFromChrome = useCallback7(
|
|
15078
15700
|
(selected, clientX, clientY, pointerId) => {
|
|
15079
15701
|
const hrefKey = selected.getAttribute("data-ohw-href-key");
|
|
15080
15702
|
if (!hrefKey || !isNavbarHrefKey(hrefKey)) return false;
|
|
@@ -15106,7 +15728,7 @@ function useNavItemDrag({
|
|
|
15106
15728
|
}
|
|
15107
15729
|
|
|
15108
15730
|
// src/useSectionDrag.ts
|
|
15109
|
-
import { useCallback as
|
|
15731
|
+
import { useCallback as useCallback8, useEffect as useEffect12, useRef as useRef10, useState as useState13 } from "react";
|
|
15110
15732
|
|
|
15111
15733
|
// src/lib/section-dnd.ts
|
|
15112
15734
|
function isFooterSection(el) {
|
|
@@ -15205,21 +15827,21 @@ function useSectionDrag({
|
|
|
15205
15827
|
suppressNextClickRef,
|
|
15206
15828
|
suppressClickUntilRef
|
|
15207
15829
|
}) {
|
|
15208
|
-
const sectionDragRef =
|
|
15209
|
-
const [sectionDropSlots, setSectionDropSlots] =
|
|
15210
|
-
const [activeSectionDropIndex, setActiveSectionDropIndex] =
|
|
15211
|
-
const [isSectionDragging, setIsSectionDragging] =
|
|
15212
|
-
const sectionPointerDragRef =
|
|
15213
|
-
const autoScrollRafRef =
|
|
15214
|
-
const autoScrollDeltaRef =
|
|
15215
|
-
const stopAutoScroll =
|
|
15830
|
+
const sectionDragRef = useRef10(null);
|
|
15831
|
+
const [sectionDropSlots, setSectionDropSlots] = useState13([]);
|
|
15832
|
+
const [activeSectionDropIndex, setActiveSectionDropIndex] = useState13(null);
|
|
15833
|
+
const [isSectionDragging, setIsSectionDragging] = useState13(false);
|
|
15834
|
+
const sectionPointerDragRef = useRef10(null);
|
|
15835
|
+
const autoScrollRafRef = useRef10(null);
|
|
15836
|
+
const autoScrollDeltaRef = useRef10(0);
|
|
15837
|
+
const stopAutoScroll = useCallback8(() => {
|
|
15216
15838
|
if (autoScrollRafRef.current != null) {
|
|
15217
15839
|
cancelAnimationFrame(autoScrollRafRef.current);
|
|
15218
15840
|
autoScrollRafRef.current = null;
|
|
15219
15841
|
}
|
|
15220
15842
|
autoScrollDeltaRef.current = 0;
|
|
15221
15843
|
}, []);
|
|
15222
|
-
const tickAutoScroll =
|
|
15844
|
+
const tickAutoScroll = useCallback8(() => {
|
|
15223
15845
|
if (!sectionDragRef.current) {
|
|
15224
15846
|
stopAutoScroll();
|
|
15225
15847
|
return;
|
|
@@ -15229,7 +15851,7 @@ function useSectionDrag({
|
|
|
15229
15851
|
}
|
|
15230
15852
|
autoScrollRafRef.current = requestAnimationFrame(tickAutoScroll);
|
|
15231
15853
|
}, [postToParentRef, stopAutoScroll]);
|
|
15232
|
-
const updateAutoScroll =
|
|
15854
|
+
const updateAutoScroll = useCallback8(
|
|
15233
15855
|
(clientY) => {
|
|
15234
15856
|
const clip = visibleClip(parentScrollRef.current);
|
|
15235
15857
|
let delta = 0;
|
|
@@ -15251,7 +15873,7 @@ function useSectionDrag({
|
|
|
15251
15873
|
},
|
|
15252
15874
|
[parentScrollRef, stopAutoScroll, tickAutoScroll]
|
|
15253
15875
|
);
|
|
15254
|
-
const clearSectionDragVisuals =
|
|
15876
|
+
const clearSectionDragVisuals = useCallback8(() => {
|
|
15255
15877
|
sectionDragRef.current?.draggedEl.removeAttribute("data-ohw-section-dragging");
|
|
15256
15878
|
sectionDragRef.current = null;
|
|
15257
15879
|
setSectionDropSlots([]);
|
|
@@ -15261,7 +15883,7 @@ function useSectionDrag({
|
|
|
15261
15883
|
document.documentElement.removeAttribute("data-ohw-section-dragging-root");
|
|
15262
15884
|
unlockItemDragInteraction();
|
|
15263
15885
|
}, [stopAutoScroll]);
|
|
15264
|
-
const refreshSectionDragVisuals =
|
|
15886
|
+
const refreshSectionDragVisuals = useCallback8(
|
|
15265
15887
|
(session, clientX, clientY) => {
|
|
15266
15888
|
session.lastClientX = clientX;
|
|
15267
15889
|
session.lastClientY = clientY;
|
|
@@ -15275,7 +15897,7 @@ function useSectionDrag({
|
|
|
15275
15897
|
},
|
|
15276
15898
|
[updateAutoScroll]
|
|
15277
15899
|
);
|
|
15278
|
-
const beginSectionDrag =
|
|
15900
|
+
const beginSectionDrag = useCallback8(
|
|
15279
15901
|
(session) => {
|
|
15280
15902
|
sectionDragRef.current = session;
|
|
15281
15903
|
setIsSectionDragging(true);
|
|
@@ -15286,7 +15908,7 @@ function useSectionDrag({
|
|
|
15286
15908
|
},
|
|
15287
15909
|
[refreshSectionDragVisuals]
|
|
15288
15910
|
);
|
|
15289
|
-
const commitSectionDrag =
|
|
15911
|
+
const commitSectionDrag = useCallback8(() => {
|
|
15290
15912
|
const session = sectionDragRef.current;
|
|
15291
15913
|
if (!session) {
|
|
15292
15914
|
clearSectionDragVisuals();
|
|
@@ -15315,7 +15937,7 @@ function useSectionDrag({
|
|
|
15315
15937
|
});
|
|
15316
15938
|
});
|
|
15317
15939
|
}, [clearSectionDragVisuals, editContentRef, postToParentRef]);
|
|
15318
|
-
const startSectionPressDrag =
|
|
15940
|
+
const startSectionPressDrag = useCallback8(
|
|
15319
15941
|
(el, clientX, clientY, pointerId) => {
|
|
15320
15942
|
if (navDragRef.current || footerDragRef.current || sectionDragRef.current) return false;
|
|
15321
15943
|
const instanceId = instanceIdOf(el);
|
|
@@ -15332,7 +15954,7 @@ function useSectionDrag({
|
|
|
15332
15954
|
},
|
|
15333
15955
|
[footerDragRef, navDragRef]
|
|
15334
15956
|
);
|
|
15335
|
-
|
|
15957
|
+
useEffect12(() => {
|
|
15336
15958
|
if (!isEditMode) return;
|
|
15337
15959
|
const onPointerDown = (e) => {
|
|
15338
15960
|
if (e.button !== 0) return;
|
|
@@ -15438,7 +16060,7 @@ function useSectionDrag({
|
|
|
15438
16060
|
|
|
15439
16061
|
// src/ui/footer-container-chrome.tsx
|
|
15440
16062
|
import { Plus as Plus2 } from "lucide-react";
|
|
15441
|
-
import { jsx as
|
|
16063
|
+
import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
15442
16064
|
function FooterContainerChrome({
|
|
15443
16065
|
rect,
|
|
15444
16066
|
onAdd,
|
|
@@ -15446,7 +16068,7 @@ function FooterContainerChrome({
|
|
|
15446
16068
|
}) {
|
|
15447
16069
|
const chromeGap = 6;
|
|
15448
16070
|
const buttonMargin = 7;
|
|
15449
|
-
return /* @__PURE__ */
|
|
16071
|
+
return /* @__PURE__ */ jsx30(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx30(
|
|
15450
16072
|
"div",
|
|
15451
16073
|
{
|
|
15452
16074
|
"data-ohw-footer-container-chrome": "",
|
|
@@ -15458,8 +16080,8 @@ function FooterContainerChrome({
|
|
|
15458
16080
|
width: rect.width + chromeGap * 2,
|
|
15459
16081
|
height: rect.height + chromeGap * 2
|
|
15460
16082
|
},
|
|
15461
|
-
children: /* @__PURE__ */
|
|
15462
|
-
/* @__PURE__ */
|
|
16083
|
+
children: /* @__PURE__ */ jsxs20(Tooltip, { children: [
|
|
16084
|
+
/* @__PURE__ */ jsx30(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx30(
|
|
15463
16085
|
"button",
|
|
15464
16086
|
{
|
|
15465
16087
|
type: "button",
|
|
@@ -15478,17 +16100,17 @@ function FooterContainerChrome({
|
|
|
15478
16100
|
if (addDisabled) return;
|
|
15479
16101
|
onAdd();
|
|
15480
16102
|
},
|
|
15481
|
-
children: /* @__PURE__ */
|
|
16103
|
+
children: /* @__PURE__ */ jsx30(Plus2, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
15482
16104
|
}
|
|
15483
16105
|
) }),
|
|
15484
|
-
/* @__PURE__ */
|
|
16106
|
+
/* @__PURE__ */ jsx30(TooltipContent, { side: "bottom", sideOffset: 9, children: addDisabled ? "Maximum columns reached" : "Add item" })
|
|
15485
16107
|
] })
|
|
15486
16108
|
}
|
|
15487
16109
|
) });
|
|
15488
16110
|
}
|
|
15489
16111
|
|
|
15490
16112
|
// src/lib/carousel.ts
|
|
15491
|
-
import { useEffect as
|
|
16113
|
+
import { useEffect as useEffect13, useState as useState14 } from "react";
|
|
15492
16114
|
var CAROUSEL_ATTR = "data-ohw-carousel";
|
|
15493
16115
|
var CAROUSEL_VALUE_ATTR = "data-ohw-carousel-value";
|
|
15494
16116
|
var CAROUSEL_SLIDE_ATTR = "data-ohw-carousel-slide";
|
|
@@ -15550,8 +16172,8 @@ function applyCarouselNode(key, val) {
|
|
|
15550
16172
|
return true;
|
|
15551
16173
|
}
|
|
15552
16174
|
function useOhwCarousel(key, initial) {
|
|
15553
|
-
const [images, setImages] =
|
|
15554
|
-
|
|
16175
|
+
const [images, setImages] = useState14(initial);
|
|
16176
|
+
useEffect13(() => {
|
|
15555
16177
|
const el = document.querySelector(
|
|
15556
16178
|
`[${CAROUSEL_ATTR}][data-ohw-key="${CSS.escape(key)}"]`
|
|
15557
16179
|
);
|
|
@@ -15964,13 +16586,13 @@ function deleteSelectedNavFooterItem(deps) {
|
|
|
15964
16586
|
|
|
15965
16587
|
// src/ui/navbar-container-chrome.tsx
|
|
15966
16588
|
import { Plus as Plus3 } from "lucide-react";
|
|
15967
|
-
import { jsx as
|
|
16589
|
+
import { jsx as jsx31 } from "react/jsx-runtime";
|
|
15968
16590
|
function NavbarContainerChrome({
|
|
15969
16591
|
rect,
|
|
15970
16592
|
onAdd
|
|
15971
16593
|
}) {
|
|
15972
16594
|
const chromeGap = 6;
|
|
15973
|
-
return /* @__PURE__ */
|
|
16595
|
+
return /* @__PURE__ */ jsx31(
|
|
15974
16596
|
"div",
|
|
15975
16597
|
{
|
|
15976
16598
|
"data-ohw-navbar-container-chrome": "",
|
|
@@ -15982,7 +16604,7 @@ function NavbarContainerChrome({
|
|
|
15982
16604
|
width: rect.width + chromeGap * 2,
|
|
15983
16605
|
height: rect.height + chromeGap * 2
|
|
15984
16606
|
},
|
|
15985
|
-
children: /* @__PURE__ */
|
|
16607
|
+
children: /* @__PURE__ */ jsx31(
|
|
15986
16608
|
"button",
|
|
15987
16609
|
{
|
|
15988
16610
|
type: "button",
|
|
@@ -15999,7 +16621,7 @@ function NavbarContainerChrome({
|
|
|
15999
16621
|
e.stopPropagation();
|
|
16000
16622
|
onAdd();
|
|
16001
16623
|
},
|
|
16002
|
-
children: /* @__PURE__ */
|
|
16624
|
+
children: /* @__PURE__ */ jsx31(Plus3, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
16003
16625
|
}
|
|
16004
16626
|
)
|
|
16005
16627
|
}
|
|
@@ -16008,7 +16630,7 @@ function NavbarContainerChrome({
|
|
|
16008
16630
|
|
|
16009
16631
|
// src/ui/drop-indicator.tsx
|
|
16010
16632
|
import * as React11 from "react";
|
|
16011
|
-
import { jsx as
|
|
16633
|
+
import { jsx as jsx32 } from "react/jsx-runtime";
|
|
16012
16634
|
var dropIndicatorVariants = cva(
|
|
16013
16635
|
"ov-gap-line pointer-events-none shrink-0 transition-opacity duration-150",
|
|
16014
16636
|
{
|
|
@@ -16032,7 +16654,7 @@ var dropIndicatorVariants = cva(
|
|
|
16032
16654
|
);
|
|
16033
16655
|
var DropIndicator = React11.forwardRef(
|
|
16034
16656
|
({ className, direction, state, ...props }, ref) => {
|
|
16035
|
-
return /* @__PURE__ */
|
|
16657
|
+
return /* @__PURE__ */ jsx32(
|
|
16036
16658
|
"div",
|
|
16037
16659
|
{
|
|
16038
16660
|
ref,
|
|
@@ -16049,7 +16671,7 @@ var DropIndicator = React11.forwardRef(
|
|
|
16049
16671
|
DropIndicator.displayName = "DropIndicator";
|
|
16050
16672
|
|
|
16051
16673
|
// src/ui/badge.tsx
|
|
16052
|
-
import { jsx as
|
|
16674
|
+
import { jsx as jsx33 } from "react/jsx-runtime";
|
|
16053
16675
|
var badgeVariants = cva(
|
|
16054
16676
|
"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",
|
|
16055
16677
|
{
|
|
@@ -16067,13 +16689,13 @@ var badgeVariants = cva(
|
|
|
16067
16689
|
}
|
|
16068
16690
|
);
|
|
16069
16691
|
function Badge({ className, variant, ...props }) {
|
|
16070
|
-
return /* @__PURE__ */
|
|
16692
|
+
return /* @__PURE__ */ jsx33("div", { className: cn(badgeVariants({ variant }), className), ...props });
|
|
16071
16693
|
}
|
|
16072
16694
|
|
|
16073
16695
|
// src/OhhwellsBridge.tsx
|
|
16074
16696
|
import { Link as Link2, Plus as Plus4, Settings } from "lucide-react";
|
|
16075
|
-
import { Fragment as
|
|
16076
|
-
var
|
|
16697
|
+
import { Fragment as Fragment9, jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
16698
|
+
var PRIMARY4 = "#0885FE";
|
|
16077
16699
|
var IMAGE_FADE_MS = 300;
|
|
16078
16700
|
var MEDIA_SETTLE_TIMEOUT_MS = 2500;
|
|
16079
16701
|
function runOpacityFade(el, onDone) {
|
|
@@ -16194,7 +16816,7 @@ function duplicateSchedulingWidget(instanceId, scheduleId) {
|
|
|
16194
16816
|
schedulingRoots.set(container, root);
|
|
16195
16817
|
flushSync2(() => {
|
|
16196
16818
|
root.render(
|
|
16197
|
-
/* @__PURE__ */
|
|
16819
|
+
/* @__PURE__ */ jsx34(
|
|
16198
16820
|
SchedulingWidget,
|
|
16199
16821
|
{
|
|
16200
16822
|
notifyOnConnect: false,
|
|
@@ -16332,7 +16954,7 @@ function mountSchedulingWidget(insertAfter, notifyOnConnect = false, scheduleId,
|
|
|
16332
16954
|
schedulingRoots.set(container, root);
|
|
16333
16955
|
flushSync2(() => {
|
|
16334
16956
|
root.render(
|
|
16335
|
-
/* @__PURE__ */
|
|
16957
|
+
/* @__PURE__ */ jsx34(
|
|
16336
16958
|
SchedulingWidget,
|
|
16337
16959
|
{
|
|
16338
16960
|
notifyOnConnect,
|
|
@@ -17052,7 +17674,7 @@ var TOOLBAR_STROKE_GAP2 = 4;
|
|
|
17052
17674
|
var TOOLBAR_OFFSET_FROM_ELEMENT = SELECTION_CHROME_GAP2 + TOOLBAR_STROKE_GAP2;
|
|
17053
17675
|
var HOVER_STROKE_WIDTH = 1.5;
|
|
17054
17676
|
var TEXT_HOVER_SIDE_PAD = 4;
|
|
17055
|
-
var CHROME_PRIMARY = `var(--ohw-primary, ${
|
|
17677
|
+
var CHROME_PRIMARY = `var(--ohw-primary, ${PRIMARY4})`;
|
|
17056
17678
|
var TOOLBAR_GROUPS = [
|
|
17057
17679
|
[
|
|
17058
17680
|
{ cmd: "bold", title: "Bold" },
|
|
@@ -17078,7 +17700,7 @@ function EditGlowChrome({
|
|
|
17078
17700
|
hideHandle = false
|
|
17079
17701
|
}) {
|
|
17080
17702
|
const GAP = SELECTION_CHROME_GAP2;
|
|
17081
|
-
return /* @__PURE__ */
|
|
17703
|
+
return /* @__PURE__ */ jsxs21(
|
|
17082
17704
|
"div",
|
|
17083
17705
|
{
|
|
17084
17706
|
ref: elRef,
|
|
@@ -17093,7 +17715,7 @@ function EditGlowChrome({
|
|
|
17093
17715
|
zIndex: 2147483646
|
|
17094
17716
|
},
|
|
17095
17717
|
children: [
|
|
17096
|
-
/* @__PURE__ */
|
|
17718
|
+
/* @__PURE__ */ jsx34(
|
|
17097
17719
|
"div",
|
|
17098
17720
|
{
|
|
17099
17721
|
style: {
|
|
@@ -17107,7 +17729,7 @@ function EditGlowChrome({
|
|
|
17107
17729
|
}
|
|
17108
17730
|
}
|
|
17109
17731
|
),
|
|
17110
|
-
reorderHrefKey && !hideHandle && /* @__PURE__ */
|
|
17732
|
+
reorderHrefKey && !hideHandle && /* @__PURE__ */ jsx34(
|
|
17111
17733
|
"div",
|
|
17112
17734
|
{
|
|
17113
17735
|
"data-ohw-drag-handle-container": "",
|
|
@@ -17119,7 +17741,7 @@ function EditGlowChrome({
|
|
|
17119
17741
|
transform: "translate(calc(-100% - 7px), -50%)",
|
|
17120
17742
|
pointerEvents: dragDisabled ? "none" : "auto"
|
|
17121
17743
|
},
|
|
17122
|
-
children: /* @__PURE__ */
|
|
17744
|
+
children: /* @__PURE__ */ jsx34(
|
|
17123
17745
|
DragHandle,
|
|
17124
17746
|
{
|
|
17125
17747
|
"aria-label": `Reorder ${reorderHrefKey}`,
|
|
@@ -17333,7 +17955,7 @@ function FloatingToolbar({
|
|
|
17333
17955
|
return () => ro.disconnect();
|
|
17334
17956
|
}, [showEditLink, activeCommands]);
|
|
17335
17957
|
const { top, left, transform } = calcToolbarPos(rect, parentScroll, measuredW);
|
|
17336
|
-
return /* @__PURE__ */
|
|
17958
|
+
return /* @__PURE__ */ jsx34(
|
|
17337
17959
|
"div",
|
|
17338
17960
|
{
|
|
17339
17961
|
ref: setRefs,
|
|
@@ -17345,12 +17967,12 @@ function FloatingToolbar({
|
|
|
17345
17967
|
zIndex: 2147483647,
|
|
17346
17968
|
pointerEvents: "auto"
|
|
17347
17969
|
},
|
|
17348
|
-
children: /* @__PURE__ */
|
|
17349
|
-
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */
|
|
17350
|
-
gi > 0 && /* @__PURE__ */
|
|
17970
|
+
children: /* @__PURE__ */ jsxs21(CustomToolbar, { children: [
|
|
17971
|
+
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ jsxs21(React12.Fragment, { children: [
|
|
17972
|
+
gi > 0 && /* @__PURE__ */ jsx34(CustomToolbarDivider, {}),
|
|
17351
17973
|
btns.map((btn) => {
|
|
17352
17974
|
const isActive = activeCommands.has(btn.cmd);
|
|
17353
|
-
return /* @__PURE__ */
|
|
17975
|
+
return /* @__PURE__ */ jsx34(
|
|
17354
17976
|
CustomToolbarButton,
|
|
17355
17977
|
{
|
|
17356
17978
|
title: btn.title,
|
|
@@ -17359,7 +17981,7 @@ function FloatingToolbar({
|
|
|
17359
17981
|
e.preventDefault();
|
|
17360
17982
|
onCommand(btn.cmd);
|
|
17361
17983
|
},
|
|
17362
|
-
children: /* @__PURE__ */
|
|
17984
|
+
children: /* @__PURE__ */ jsx34(
|
|
17363
17985
|
"svg",
|
|
17364
17986
|
{
|
|
17365
17987
|
width: "16",
|
|
@@ -17380,7 +18002,7 @@ function FloatingToolbar({
|
|
|
17380
18002
|
);
|
|
17381
18003
|
})
|
|
17382
18004
|
] }, gi)),
|
|
17383
|
-
showEditLink ? /* @__PURE__ */
|
|
18005
|
+
showEditLink ? /* @__PURE__ */ jsx34(
|
|
17384
18006
|
CustomToolbarButton,
|
|
17385
18007
|
{
|
|
17386
18008
|
type: "button",
|
|
@@ -17394,7 +18016,7 @@ function FloatingToolbar({
|
|
|
17394
18016
|
e.preventDefault();
|
|
17395
18017
|
e.stopPropagation();
|
|
17396
18018
|
},
|
|
17397
|
-
children: /* @__PURE__ */
|
|
18019
|
+
children: /* @__PURE__ */ jsx34(Link2, { className: "size-4 shrink-0", "aria-hidden": true })
|
|
17398
18020
|
}
|
|
17399
18021
|
) : null
|
|
17400
18022
|
] })
|
|
@@ -17411,7 +18033,7 @@ function StateToggle({
|
|
|
17411
18033
|
states,
|
|
17412
18034
|
onStateChange
|
|
17413
18035
|
}) {
|
|
17414
|
-
return /* @__PURE__ */
|
|
18036
|
+
return /* @__PURE__ */ jsx34(
|
|
17415
18037
|
ToggleGroup,
|
|
17416
18038
|
{
|
|
17417
18039
|
"data-ohw-state-toggle": "",
|
|
@@ -17425,7 +18047,7 @@ function StateToggle({
|
|
|
17425
18047
|
left: rect.right - 8,
|
|
17426
18048
|
transform: "translateX(-100%)"
|
|
17427
18049
|
},
|
|
17428
|
-
children: states.map((state) => /* @__PURE__ */
|
|
18050
|
+
children: states.map((state) => /* @__PURE__ */ jsx34(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
|
|
17429
18051
|
}
|
|
17430
18052
|
);
|
|
17431
18053
|
}
|
|
@@ -17441,9 +18063,9 @@ var OHW_LOADER_STYLE = {
|
|
|
17441
18063
|
justifyContent: "center"
|
|
17442
18064
|
};
|
|
17443
18065
|
function OhwLoaderSpinner() {
|
|
17444
|
-
return /* @__PURE__ */
|
|
17445
|
-
/* @__PURE__ */
|
|
17446
|
-
/* @__PURE__ */
|
|
18066
|
+
return /* @__PURE__ */ jsxs21("svg", { width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", "aria-hidden": true, children: [
|
|
18067
|
+
/* @__PURE__ */ jsx34("circle", { cx: "14", cy: "14", r: "11", stroke: "#E7E5E4", strokeWidth: "3" }),
|
|
18068
|
+
/* @__PURE__ */ jsx34(
|
|
17447
18069
|
"circle",
|
|
17448
18070
|
{
|
|
17449
18071
|
cx: "14",
|
|
@@ -17453,7 +18075,7 @@ function OhwLoaderSpinner() {
|
|
|
17453
18075
|
strokeWidth: "3",
|
|
17454
18076
|
strokeDasharray: "17 52",
|
|
17455
18077
|
strokeLinecap: "round",
|
|
17456
|
-
children: /* @__PURE__ */
|
|
18078
|
+
children: /* @__PURE__ */ jsx34(
|
|
17457
18079
|
"animateTransform",
|
|
17458
18080
|
{
|
|
17459
18081
|
attributeName: "transform",
|
|
@@ -17469,7 +18091,7 @@ function OhwLoaderSpinner() {
|
|
|
17469
18091
|
] });
|
|
17470
18092
|
}
|
|
17471
18093
|
function OhwBrandMark() {
|
|
17472
|
-
return /* @__PURE__ */
|
|
18094
|
+
return /* @__PURE__ */ jsxs21(
|
|
17473
18095
|
"svg",
|
|
17474
18096
|
{
|
|
17475
18097
|
width: "16",
|
|
@@ -17480,7 +18102,7 @@ function OhwBrandMark() {
|
|
|
17480
18102
|
style: { display: "block", flexShrink: 0 },
|
|
17481
18103
|
xmlns: "http://www.w3.org/2000/svg",
|
|
17482
18104
|
children: [
|
|
17483
|
-
/* @__PURE__ */
|
|
18105
|
+
/* @__PURE__ */ jsx34(
|
|
17484
18106
|
"mask",
|
|
17485
18107
|
{
|
|
17486
18108
|
id: "ohw-badge-mark",
|
|
@@ -17490,15 +18112,15 @@ function OhwBrandMark() {
|
|
|
17490
18112
|
y: "0",
|
|
17491
18113
|
width: "48",
|
|
17492
18114
|
height: "48",
|
|
17493
|
-
children: /* @__PURE__ */
|
|
18115
|
+
children: /* @__PURE__ */ jsx34("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" })
|
|
17494
18116
|
}
|
|
17495
18117
|
),
|
|
17496
|
-
/* @__PURE__ */
|
|
17497
|
-
/* @__PURE__ */
|
|
17498
|
-
/* @__PURE__ */
|
|
17499
|
-
/* @__PURE__ */
|
|
17500
|
-
/* @__PURE__ */
|
|
17501
|
-
/* @__PURE__ */
|
|
18118
|
+
/* @__PURE__ */ jsxs21("g", { mask: "url(#ohw-badge-mark)", children: [
|
|
18119
|
+
/* @__PURE__ */ jsx34("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" }),
|
|
18120
|
+
/* @__PURE__ */ jsx34("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" }),
|
|
18121
|
+
/* @__PURE__ */ jsx34("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" }),
|
|
18122
|
+
/* @__PURE__ */ jsx34("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" }),
|
|
18123
|
+
/* @__PURE__ */ jsx34("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" })
|
|
17502
18124
|
] })
|
|
17503
18125
|
]
|
|
17504
18126
|
}
|
|
@@ -17535,7 +18157,7 @@ var OHW_BADGE_LABEL_STYLE = {
|
|
|
17535
18157
|
whiteSpace: "nowrap"
|
|
17536
18158
|
};
|
|
17537
18159
|
function MadeWithOhhWells() {
|
|
17538
|
-
return /* @__PURE__ */
|
|
18160
|
+
return /* @__PURE__ */ jsxs21(
|
|
17539
18161
|
"a",
|
|
17540
18162
|
{
|
|
17541
18163
|
href: "https://ohhwells.com",
|
|
@@ -17545,8 +18167,8 @@ function MadeWithOhhWells() {
|
|
|
17545
18167
|
"data-ohw-badge": "",
|
|
17546
18168
|
style: OHW_BADGE_STYLE,
|
|
17547
18169
|
children: [
|
|
17548
|
-
/* @__PURE__ */
|
|
17549
|
-
/* @__PURE__ */
|
|
18170
|
+
/* @__PURE__ */ jsx34(OhwBrandMark, {}),
|
|
18171
|
+
/* @__PURE__ */ jsx34("span", { style: OHW_BADGE_LABEL_STYLE, children: "Made with OhhWells" })
|
|
17550
18172
|
]
|
|
17551
18173
|
}
|
|
17552
18174
|
);
|
|
@@ -17592,8 +18214,8 @@ function OhhwellsBridge() {
|
|
|
17592
18214
|
const router = useRouter3();
|
|
17593
18215
|
const searchParams = useSearchParams();
|
|
17594
18216
|
const isEditMode = isEditSessionActive();
|
|
17595
|
-
const [bridgeRoot, setBridgeRoot] =
|
|
17596
|
-
|
|
18217
|
+
const [bridgeRoot, setBridgeRoot] = useState15(null);
|
|
18218
|
+
useEffect14(() => {
|
|
17597
18219
|
const figtreeFontId = "ohw-figtree-font";
|
|
17598
18220
|
if (!document.getElementById(figtreeFontId)) {
|
|
17599
18221
|
const preconnect1 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.googleapis.com" });
|
|
@@ -17619,7 +18241,7 @@ function OhhwellsBridge() {
|
|
|
17619
18241
|
};
|
|
17620
18242
|
}, []);
|
|
17621
18243
|
const subdomainFromQuery = searchParams.get("subdomain");
|
|
17622
|
-
const [subdomain, setSubdomain] =
|
|
18244
|
+
const [subdomain, setSubdomain] = useState15(() => resolveSubdomain(subdomainFromQuery));
|
|
17623
18245
|
useLayoutEffect5(() => {
|
|
17624
18246
|
const next = resolveSubdomain(subdomainFromQuery);
|
|
17625
18247
|
if (next !== subdomain) setSubdomain(next);
|
|
@@ -17632,7 +18254,7 @@ function OhhwellsBridge() {
|
|
|
17632
18254
|
}, 0);
|
|
17633
18255
|
return () => window.clearTimeout(t);
|
|
17634
18256
|
}, [subdomainFromQuery, subdomain]);
|
|
17635
|
-
|
|
18257
|
+
useEffect14(() => {
|
|
17636
18258
|
if (!subdomainFromQuery || typeof window === "undefined") return;
|
|
17637
18259
|
const url = new URL(window.location.href);
|
|
17638
18260
|
if (!url.searchParams.has("subdomain")) return;
|
|
@@ -17641,45 +18263,45 @@ function OhhwellsBridge() {
|
|
|
17641
18263
|
}, [subdomainFromQuery]);
|
|
17642
18264
|
useLinkHrefGuardian(pathname, subdomain, isEditMode);
|
|
17643
18265
|
useSavedLinkNavigation(isEditMode);
|
|
17644
|
-
const postToParent2 =
|
|
18266
|
+
const postToParent2 = useCallback9((data) => {
|
|
17645
18267
|
if (typeof window !== "undefined" && window.parent !== window) {
|
|
17646
18268
|
window.parent.postMessage(data, "*");
|
|
17647
18269
|
}
|
|
17648
18270
|
}, []);
|
|
17649
|
-
const [fetchState, setFetchState] =
|
|
17650
|
-
const [showBranding, setShowBranding] =
|
|
17651
|
-
const autoSaveTimers =
|
|
17652
|
-
const activeElRef =
|
|
17653
|
-
const pointerHeldRef =
|
|
17654
|
-
const selectedElRef =
|
|
17655
|
-
const selectedHrefKeyRef =
|
|
17656
|
-
const selectedFooterColAttrRef =
|
|
17657
|
-
const originalContentRef =
|
|
17658
|
-
const activeStateElRef =
|
|
17659
|
-
const parentScrollRef =
|
|
17660
|
-
const visibleViewportRef =
|
|
17661
|
-
const [dialogPortalContainer, setDialogPortalContainer] =
|
|
17662
|
-
const attachVisibleViewport =
|
|
18271
|
+
const [fetchState, setFetchState] = useState15("idle");
|
|
18272
|
+
const [showBranding, setShowBranding] = useState15(false);
|
|
18273
|
+
const autoSaveTimers = useRef11(/* @__PURE__ */ new Map());
|
|
18274
|
+
const activeElRef = useRef11(null);
|
|
18275
|
+
const pointerHeldRef = useRef11(false);
|
|
18276
|
+
const selectedElRef = useRef11(null);
|
|
18277
|
+
const selectedHrefKeyRef = useRef11(null);
|
|
18278
|
+
const selectedFooterColAttrRef = useRef11(null);
|
|
18279
|
+
const originalContentRef = useRef11(null);
|
|
18280
|
+
const activeStateElRef = useRef11(null);
|
|
18281
|
+
const parentScrollRef = useRef11(null);
|
|
18282
|
+
const visibleViewportRef = useRef11(null);
|
|
18283
|
+
const [dialogPortalContainer, setDialogPortalContainer] = useState15(null);
|
|
18284
|
+
const attachVisibleViewport = useCallback9((node) => {
|
|
17663
18285
|
visibleViewportRef.current = node;
|
|
17664
18286
|
setDialogPortalContainer(node);
|
|
17665
18287
|
if (node) applyVisibleViewport(node, parentScrollRef.current);
|
|
17666
18288
|
}, []);
|
|
17667
|
-
const toolbarElRef =
|
|
17668
|
-
const glowElRef =
|
|
17669
|
-
const hoveredImageRef =
|
|
17670
|
-
const hoveredImageHasTextOverlapRef =
|
|
17671
|
-
const dragOverElRef =
|
|
17672
|
-
const [mediaHover, setMediaHover] =
|
|
17673
|
-
const [selectedAiSectionId, setSelectedAiSectionId] =
|
|
17674
|
-
const selectedAiSectionIdRef =
|
|
17675
|
-
const handleAiSectionSelectionChange =
|
|
18289
|
+
const toolbarElRef = useRef11(null);
|
|
18290
|
+
const glowElRef = useRef11(null);
|
|
18291
|
+
const hoveredImageRef = useRef11(null);
|
|
18292
|
+
const hoveredImageHasTextOverlapRef = useRef11(false);
|
|
18293
|
+
const dragOverElRef = useRef11(null);
|
|
18294
|
+
const [mediaHover, setMediaHover] = useState15(null);
|
|
18295
|
+
const [selectedAiSectionId, setSelectedAiSectionId] = useState15(null);
|
|
18296
|
+
const selectedAiSectionIdRef = useRef11(null);
|
|
18297
|
+
const handleAiSectionSelectionChange = useCallback9((id) => {
|
|
17676
18298
|
selectedAiSectionIdRef.current = id;
|
|
17677
18299
|
setSelectedAiSectionId(id);
|
|
17678
18300
|
}, []);
|
|
17679
|
-
const [selectedMedia, setSelectedMedia] =
|
|
17680
|
-
const selectedMediaElRef =
|
|
17681
|
-
const mediaKeyDropTokenRef =
|
|
17682
|
-
const clearMediaSelection =
|
|
18301
|
+
const [selectedMedia, setSelectedMedia] = useState15(null);
|
|
18302
|
+
const selectedMediaElRef = useRef11(null);
|
|
18303
|
+
const mediaKeyDropTokenRef = useRef11(0);
|
|
18304
|
+
const clearMediaSelection = useCallback9(() => {
|
|
17683
18305
|
const prev = selectedMediaElRef.current;
|
|
17684
18306
|
selectedMediaElRef.current = null;
|
|
17685
18307
|
setSelectedMedia(null);
|
|
@@ -17704,9 +18326,9 @@ function OhhwellsBridge() {
|
|
|
17704
18326
|
window.postMessage({ type: "ow:media-key-drop", token }, "*");
|
|
17705
18327
|
}
|
|
17706
18328
|
}, []);
|
|
17707
|
-
const clearMediaSelectionRef =
|
|
18329
|
+
const clearMediaSelectionRef = useRef11(clearMediaSelection);
|
|
17708
18330
|
clearMediaSelectionRef.current = clearMediaSelection;
|
|
17709
|
-
const selectMediaElement =
|
|
18331
|
+
const selectMediaElement = useCallback9((el) => {
|
|
17710
18332
|
const r2 = el.getBoundingClientRect();
|
|
17711
18333
|
const video = el.dataset.ohwEditable === "video" ? el.querySelector("video") : null;
|
|
17712
18334
|
selectedMediaElRef.current = el;
|
|
@@ -17730,9 +18352,9 @@ function OhhwellsBridge() {
|
|
|
17730
18352
|
keyLabel: el.dataset.ohwEditable === "video" ? "Video" : el.dataset.ohwEditable === "bg-image" ? "Background" : "Image"
|
|
17731
18353
|
});
|
|
17732
18354
|
}, []);
|
|
17733
|
-
const selectMediaElementRef =
|
|
18355
|
+
const selectMediaElementRef = useRef11(selectMediaElement);
|
|
17734
18356
|
selectMediaElementRef.current = selectMediaElement;
|
|
17735
|
-
|
|
18357
|
+
useEffect14(() => {
|
|
17736
18358
|
if (!selectedMedia) return;
|
|
17737
18359
|
const update = () => {
|
|
17738
18360
|
const el = selectedMediaElRef.current;
|
|
@@ -17752,54 +18374,55 @@ function OhhwellsBridge() {
|
|
|
17752
18374
|
window.removeEventListener("resize", update);
|
|
17753
18375
|
};
|
|
17754
18376
|
}, [selectedMedia !== null]);
|
|
17755
|
-
const [carouselHover, setCarouselHover] =
|
|
17756
|
-
const [uploadingRects, setUploadingRects] =
|
|
17757
|
-
const hoveredGapRef =
|
|
17758
|
-
const imageUnhoverTimerRef =
|
|
17759
|
-
const imageShowTimerRef =
|
|
17760
|
-
const editStylesRef =
|
|
17761
|
-
const activateRef =
|
|
18377
|
+
const [carouselHover, setCarouselHover] = useState15(null);
|
|
18378
|
+
const [uploadingRects, setUploadingRects] = useState15({});
|
|
18379
|
+
const hoveredGapRef = useRef11(null);
|
|
18380
|
+
const imageUnhoverTimerRef = useRef11(null);
|
|
18381
|
+
const imageShowTimerRef = useRef11(null);
|
|
18382
|
+
const editStylesRef = useRef11(null);
|
|
18383
|
+
const activateRef = useRef11(() => {
|
|
17762
18384
|
});
|
|
17763
|
-
const deactivateRef =
|
|
18385
|
+
const deactivateRef = useRef11(() => {
|
|
17764
18386
|
});
|
|
17765
|
-
const selectRef =
|
|
18387
|
+
const selectRef = useRef11(() => {
|
|
17766
18388
|
});
|
|
17767
|
-
const selectFrameRef =
|
|
18389
|
+
const selectFrameRef = useRef11(() => {
|
|
17768
18390
|
});
|
|
17769
|
-
const selectLogoRef =
|
|
18391
|
+
const selectLogoRef = useRef11(() => {
|
|
17770
18392
|
});
|
|
17771
|
-
const openLogoSizePanelRef =
|
|
18393
|
+
const openLogoSizePanelRef = useRef11(() => {
|
|
17772
18394
|
});
|
|
17773
|
-
const deselectRef =
|
|
18395
|
+
const deselectRef = useRef11(() => {
|
|
17774
18396
|
});
|
|
17775
|
-
const closeFloatingPanelOnlyRef =
|
|
18397
|
+
const closeFloatingPanelOnlyRef = useRef11(() => {
|
|
17776
18398
|
});
|
|
17777
|
-
const reselectNavigationItemRef =
|
|
18399
|
+
const reselectNavigationItemRef = useRef11(() => {
|
|
17778
18400
|
});
|
|
17779
|
-
const commitNavigationTextEditRef =
|
|
18401
|
+
const commitNavigationTextEditRef = useRef11(() => {
|
|
17780
18402
|
});
|
|
17781
|
-
const handleDeleteSelectedRef =
|
|
17782
|
-
const runPendingDeleteUndoRef =
|
|
17783
|
-
const isFooterFrameSelectionRef =
|
|
17784
|
-
const refreshActiveCommandsRef =
|
|
18403
|
+
const handleDeleteSelectedRef = useRef11(() => false);
|
|
18404
|
+
const runPendingDeleteUndoRef = useRef11(() => false);
|
|
18405
|
+
const isFooterFrameSelectionRef = useRef11(false);
|
|
18406
|
+
const refreshActiveCommandsRef = useRef11(() => {
|
|
17785
18407
|
});
|
|
17786
|
-
const postToParentRef =
|
|
18408
|
+
const postToParentRef = useRef11(postToParent2);
|
|
17787
18409
|
postToParentRef.current = postToParent2;
|
|
17788
|
-
const aiSectionApiRef =
|
|
17789
|
-
const
|
|
17790
|
-
const
|
|
17791
|
-
const
|
|
17792
|
-
const [
|
|
17793
|
-
const
|
|
17794
|
-
const
|
|
17795
|
-
const [
|
|
17796
|
-
const [
|
|
17797
|
-
const
|
|
17798
|
-
const
|
|
17799
|
-
const
|
|
17800
|
-
const
|
|
17801
|
-
const [
|
|
17802
|
-
const
|
|
18410
|
+
const aiSectionApiRef = useRef11(null);
|
|
18411
|
+
const applyTreeLocalRef = useRef11(null);
|
|
18412
|
+
const sectionsLoadedRef = useRef11(false);
|
|
18413
|
+
const pendingScheduleConfigRequests = useRef11([]);
|
|
18414
|
+
const [toolbarRect, setToolbarRect] = useState15(null);
|
|
18415
|
+
const [formPickRect, setFormPickRect] = useState15(null);
|
|
18416
|
+
const formPickElRef = useRef11(null);
|
|
18417
|
+
const [formViewState, setFormViewStateUi] = useState15("default");
|
|
18418
|
+
const [formPickCount, setFormPickCount] = useState15(null);
|
|
18419
|
+
const [formHoverRect, setFormHoverRect] = useState15(null);
|
|
18420
|
+
const formHoverElRef = useRef11(null);
|
|
18421
|
+
const [fieldPickRect, setFieldPickRect] = useState15(null);
|
|
18422
|
+
const fieldPickElRef = useRef11(null);
|
|
18423
|
+
const [fieldPickState, setFieldPickState] = useState15(null);
|
|
18424
|
+
const [fieldTypePickerOpen, setFieldTypePickerOpen] = useState15(false);
|
|
18425
|
+
const clearFormPick = useCallback9(() => {
|
|
17803
18426
|
const form = formPickElRef.current;
|
|
17804
18427
|
const editing = fieldPickElRef.current;
|
|
17805
18428
|
if (commitPlaceholderEdit(editing) && editing) {
|
|
@@ -17819,7 +18442,7 @@ function OhhwellsBridge() {
|
|
|
17819
18442
|
formPickElRef.current = null;
|
|
17820
18443
|
setFormPickRect(null);
|
|
17821
18444
|
}, []);
|
|
17822
|
-
const clearFieldPick =
|
|
18445
|
+
const clearFieldPick = useCallback9(() => {
|
|
17823
18446
|
const wrapper = fieldPickElRef.current;
|
|
17824
18447
|
if (commitPlaceholderEdit(wrapper) && wrapper) {
|
|
17825
18448
|
const form = wrapper.closest('[data-ohw-editable="form"]');
|
|
@@ -17829,9 +18452,9 @@ function OhhwellsBridge() {
|
|
|
17829
18452
|
setFieldPickRect(null);
|
|
17830
18453
|
setFieldPickState(null);
|
|
17831
18454
|
}, []);
|
|
17832
|
-
const persistFieldsRef =
|
|
18455
|
+
const persistFieldsRef = useRef11(() => {
|
|
17833
18456
|
});
|
|
17834
|
-
const persistFields =
|
|
18457
|
+
const persistFields = useCallback9(
|
|
17835
18458
|
(form) => {
|
|
17836
18459
|
const key = formKeyOf(form);
|
|
17837
18460
|
if (!key) return;
|
|
@@ -17842,7 +18465,7 @@ function OhhwellsBridge() {
|
|
|
17842
18465
|
[]
|
|
17843
18466
|
);
|
|
17844
18467
|
persistFieldsRef.current = persistFields;
|
|
17845
|
-
const selectField =
|
|
18468
|
+
const selectField = useCallback9((wrapper) => {
|
|
17846
18469
|
if (fieldPickElRef.current && fieldPickElRef.current !== wrapper) {
|
|
17847
18470
|
commitPlaceholderEdit(fieldPickElRef.current);
|
|
17848
18471
|
}
|
|
@@ -17855,7 +18478,7 @@ function OhhwellsBridge() {
|
|
|
17855
18478
|
setFieldPickState({ type: fieldTypeOf(wrapper), required: isFieldRequired(wrapper) });
|
|
17856
18479
|
setFieldTypePickerOpen(false);
|
|
17857
18480
|
}, []);
|
|
17858
|
-
const withSelectedField =
|
|
18481
|
+
const withSelectedField = useCallback9(
|
|
17859
18482
|
(run) => {
|
|
17860
18483
|
const wrapper = fieldPickElRef.current;
|
|
17861
18484
|
const form = formPickElRef.current;
|
|
@@ -17868,28 +18491,28 @@ function OhhwellsBridge() {
|
|
|
17868
18491
|
},
|
|
17869
18492
|
[persistFields]
|
|
17870
18493
|
);
|
|
17871
|
-
const handleFieldTypeChange =
|
|
18494
|
+
const handleFieldTypeChange = useCallback9(
|
|
17872
18495
|
(type) => withSelectedField((_form, wrapper) => {
|
|
17873
18496
|
applyFieldType(wrapper, type);
|
|
17874
18497
|
selectField(wrapper);
|
|
17875
18498
|
}),
|
|
17876
18499
|
[selectField, withSelectedField]
|
|
17877
18500
|
);
|
|
17878
|
-
const handleFieldRequiredToggle =
|
|
18501
|
+
const handleFieldRequiredToggle = useCallback9(
|
|
17879
18502
|
() => withSelectedField((_form, wrapper) => {
|
|
17880
18503
|
setFieldRequired(wrapper, !isFieldRequired(wrapper));
|
|
17881
18504
|
selectField(wrapper);
|
|
17882
18505
|
}),
|
|
17883
18506
|
[selectField, withSelectedField]
|
|
17884
18507
|
);
|
|
17885
|
-
const handleFieldDuplicate =
|
|
18508
|
+
const handleFieldDuplicate = useCallback9(
|
|
17886
18509
|
() => withSelectedField((form, wrapper) => {
|
|
17887
18510
|
const copy = duplicateField(form, wrapper);
|
|
17888
18511
|
selectField(copy);
|
|
17889
18512
|
}),
|
|
17890
18513
|
[selectField, withSelectedField]
|
|
17891
18514
|
);
|
|
17892
|
-
const handleFieldDelete =
|
|
18515
|
+
const handleFieldDelete = useCallback9(
|
|
17893
18516
|
() => withSelectedField((_form, wrapper) => {
|
|
17894
18517
|
removeField(wrapper);
|
|
17895
18518
|
clearFieldPick();
|
|
@@ -17897,7 +18520,7 @@ function OhhwellsBridge() {
|
|
|
17897
18520
|
}),
|
|
17898
18521
|
[clearFieldPick, withSelectedField]
|
|
17899
18522
|
);
|
|
17900
|
-
const handleAddField =
|
|
18523
|
+
const handleAddField = useCallback9(
|
|
17901
18524
|
(type) => {
|
|
17902
18525
|
const form = formPickElRef.current;
|
|
17903
18526
|
if (!form) return;
|
|
@@ -17913,8 +18536,8 @@ function OhhwellsBridge() {
|
|
|
17913
18536
|
},
|
|
17914
18537
|
[persistFields, selectField]
|
|
17915
18538
|
);
|
|
17916
|
-
const fieldDragRef =
|
|
17917
|
-
const buildFieldDropSlots =
|
|
18539
|
+
const fieldDragRef = useRef11(null);
|
|
18540
|
+
const buildFieldDropSlots = useCallback9((form, draggedKey) => {
|
|
17918
18541
|
const others = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== draggedKey);
|
|
17919
18542
|
const slots = others.map((el) => {
|
|
17920
18543
|
const rect = el.getBoundingClientRect();
|
|
@@ -17927,7 +18550,7 @@ function OhhwellsBridge() {
|
|
|
17927
18550
|
}
|
|
17928
18551
|
return slots;
|
|
17929
18552
|
}, []);
|
|
17930
|
-
const handleFieldDragStart =
|
|
18553
|
+
const handleFieldDragStart = useCallback9(() => {
|
|
17931
18554
|
const wrapper = fieldPickElRef.current;
|
|
17932
18555
|
const form = formPickElRef.current;
|
|
17933
18556
|
if (!wrapper || !form) return;
|
|
@@ -17936,18 +18559,18 @@ function OhhwellsBridge() {
|
|
|
17936
18559
|
setFieldDragging(true);
|
|
17937
18560
|
setFieldDropSlots(buildFieldDropSlots(form, key));
|
|
17938
18561
|
}, [buildFieldDropSlots]);
|
|
17939
|
-
const handleFieldDragEnd =
|
|
18562
|
+
const handleFieldDragEnd = useCallback9(() => {
|
|
17940
18563
|
fieldDragRef.current = null;
|
|
17941
18564
|
setFieldDropIndex(null);
|
|
17942
18565
|
setFieldDropSlots([]);
|
|
17943
18566
|
setFieldDragging(false);
|
|
17944
18567
|
}, []);
|
|
17945
|
-
const [fieldDropIndex, setFieldDropIndex] =
|
|
17946
|
-
const [fieldDropSlots, setFieldDropSlots] =
|
|
17947
|
-
const [fieldDragging, setFieldDragging] =
|
|
17948
|
-
const clearFormPickRef =
|
|
18568
|
+
const [fieldDropIndex, setFieldDropIndex] = useState15(null);
|
|
18569
|
+
const [fieldDropSlots, setFieldDropSlots] = useState15([]);
|
|
18570
|
+
const [fieldDragging, setFieldDragging] = useState15(false);
|
|
18571
|
+
const clearFormPickRef = useRef11(clearFormPick);
|
|
17949
18572
|
clearFormPickRef.current = clearFormPick;
|
|
17950
|
-
|
|
18573
|
+
useEffect14(() => {
|
|
17951
18574
|
const el = fieldPickElRef.current;
|
|
17952
18575
|
if (!el || fieldPickRect === null) return;
|
|
17953
18576
|
const observer = new ResizeObserver(() => {
|
|
@@ -17956,7 +18579,7 @@ function OhhwellsBridge() {
|
|
|
17956
18579
|
observer.observe(el);
|
|
17957
18580
|
return () => observer.disconnect();
|
|
17958
18581
|
}, [fieldPickRect !== null, fieldPickState]);
|
|
17959
|
-
|
|
18582
|
+
useEffect14(() => {
|
|
17960
18583
|
const el = formPickElRef.current;
|
|
17961
18584
|
if (!el || formPickRect === null) return;
|
|
17962
18585
|
const observer = new ResizeObserver(() => {
|
|
@@ -17965,25 +18588,25 @@ function OhhwellsBridge() {
|
|
|
17965
18588
|
observer.observe(el);
|
|
17966
18589
|
return () => observer.disconnect();
|
|
17967
18590
|
}, [formPickRect !== null, formViewState]);
|
|
17968
|
-
const [toolbarVariant, setToolbarVariant] =
|
|
17969
|
-
const toolbarVariantRef =
|
|
18591
|
+
const [toolbarVariant, setToolbarVariant] = useState15("none");
|
|
18592
|
+
const toolbarVariantRef = useRef11("none");
|
|
17970
18593
|
toolbarVariantRef.current = toolbarVariant;
|
|
17971
|
-
const [selectedIsCta, setSelectedIsCta] =
|
|
17972
|
-
const [selectedIsSocial, setSelectedIsSocial] =
|
|
17973
|
-
const [selectedIsSocialsRow, setSelectedIsSocialsRow] =
|
|
17974
|
-
const [reorderHrefKey, setReorderHrefKey] =
|
|
17975
|
-
const [reorderDragDisabled, setReorderDragDisabled] =
|
|
17976
|
-
const [toggleState, setToggleState] =
|
|
17977
|
-
const [maxBadge, setMaxBadge] =
|
|
17978
|
-
const [activeCommands, setActiveCommands] =
|
|
17979
|
-
const [sectionGap, setSectionGap] =
|
|
17980
|
-
const [toolbarShowEditLink, setToolbarShowEditLink] =
|
|
17981
|
-
const hoveredNavContainerRef =
|
|
17982
|
-
const [hoveredNavContainerRect, setHoveredNavContainerRect] =
|
|
17983
|
-
const hoveredItemElRef =
|
|
17984
|
-
const [hoveredItemRect, setHoveredItemRect] =
|
|
17985
|
-
const [hoveredTextRect, setHoveredTextRect] =
|
|
17986
|
-
|
|
18594
|
+
const [selectedIsCta, setSelectedIsCta] = useState15(false);
|
|
18595
|
+
const [selectedIsSocial, setSelectedIsSocial] = useState15(false);
|
|
18596
|
+
const [selectedIsSocialsRow, setSelectedIsSocialsRow] = useState15(false);
|
|
18597
|
+
const [reorderHrefKey, setReorderHrefKey] = useState15(null);
|
|
18598
|
+
const [reorderDragDisabled, setReorderDragDisabled] = useState15(false);
|
|
18599
|
+
const [toggleState, setToggleState] = useState15(null);
|
|
18600
|
+
const [maxBadge, setMaxBadge] = useState15(null);
|
|
18601
|
+
const [activeCommands, setActiveCommands] = useState15(/* @__PURE__ */ new Set());
|
|
18602
|
+
const [sectionGap, setSectionGap] = useState15(null);
|
|
18603
|
+
const [toolbarShowEditLink, setToolbarShowEditLink] = useState15(false);
|
|
18604
|
+
const hoveredNavContainerRef = useRef11(null);
|
|
18605
|
+
const [hoveredNavContainerRect, setHoveredNavContainerRect] = useState15(null);
|
|
18606
|
+
const hoveredItemElRef = useRef11(null);
|
|
18607
|
+
const [hoveredItemRect, setHoveredItemRect] = useState15(null);
|
|
18608
|
+
const [hoveredTextRect, setHoveredTextRect] = useState15(null);
|
|
18609
|
+
useEffect14(() => {
|
|
17987
18610
|
const sync = () => {
|
|
17988
18611
|
const el = document.querySelector(
|
|
17989
18612
|
'[data-ohw-hovered]:not([contenteditable]):not([data-ohw-href-key]):not([data-ohw-editable="form"] *)'
|
|
@@ -18027,44 +18650,44 @@ function OhhwellsBridge() {
|
|
|
18027
18650
|
});
|
|
18028
18651
|
return () => observer.disconnect();
|
|
18029
18652
|
}, []);
|
|
18030
|
-
const siblingHintElRef =
|
|
18031
|
-
const [siblingHintRect, setSiblingHintRect] =
|
|
18032
|
-
const [siblingHintRects, setSiblingHintRects] =
|
|
18033
|
-
const [isItemDragging, setIsItemDragging] =
|
|
18034
|
-
const [isFooterFrameSelection, setIsFooterFrameSelection] =
|
|
18653
|
+
const siblingHintElRef = useRef11(null);
|
|
18654
|
+
const [siblingHintRect, setSiblingHintRect] = useState15(null);
|
|
18655
|
+
const [siblingHintRects, setSiblingHintRects] = useState15([]);
|
|
18656
|
+
const [isItemDragging, setIsItemDragging] = useState15(false);
|
|
18657
|
+
const [isFooterFrameSelection, setIsFooterFrameSelection] = useState15(false);
|
|
18035
18658
|
isFooterFrameSelectionRef.current = isFooterFrameSelection;
|
|
18036
|
-
const [floatingPanel, setFloatingPanel] =
|
|
18037
|
-
const floatingPanelOpenRef =
|
|
18659
|
+
const [floatingPanel, setFloatingPanel] = useState15(null);
|
|
18660
|
+
const floatingPanelOpenRef = useRef11(false);
|
|
18038
18661
|
floatingPanelOpenRef.current = floatingPanel !== null;
|
|
18039
|
-
const [floatingPanelPos, setFloatingPanelPos] =
|
|
18040
|
-
const [logoSizeDraft, setLogoSizeDraft] =
|
|
18041
|
-
const [editorViewport, setEditorViewport] =
|
|
18042
|
-
const [parentScrollSnap, setParentScrollSnap] =
|
|
18043
|
-
const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] =
|
|
18044
|
-
const [footerHeadingVisible, setFooterHeadingVisible] =
|
|
18045
|
-
const footerDragRef =
|
|
18046
|
-
const [footerDropSlots, setFooterDropSlots] =
|
|
18047
|
-
const [activeFooterDropIndex, setActiveFooterDropIndex] =
|
|
18048
|
-
const [draggedItemRect, setDraggedItemRect] =
|
|
18049
|
-
const footerPointerDragRef =
|
|
18050
|
-
const suppressNextClickRef =
|
|
18051
|
-
const suppressClickUntilRef =
|
|
18052
|
-
const [linkPopover, setLinkPopover] =
|
|
18053
|
-
const linkPopoverSessionRef =
|
|
18054
|
-
const addNavAfterAnchorRef =
|
|
18055
|
-
const editContentRef =
|
|
18056
|
-
const aiSectionsRef =
|
|
18057
|
-
const brandKitRef =
|
|
18058
|
-
const stylesRef =
|
|
18059
|
-
const appliedDrawerRef =
|
|
18060
|
-
const pendingDeleteUndoRef =
|
|
18061
|
-
const [sitePages, setSitePages] =
|
|
18062
|
-
const [sectionsByPath, setSectionsByPath] =
|
|
18063
|
-
const sectionsPrefetchGenRef =
|
|
18064
|
-
const setLinkPopoverRef =
|
|
18065
|
-
const linkPopoverPanelRef =
|
|
18066
|
-
const linkPopoverOpenRef =
|
|
18067
|
-
const linkPopoverGraceUntilRef =
|
|
18662
|
+
const [floatingPanelPos, setFloatingPanelPos] = useState15(null);
|
|
18663
|
+
const [logoSizeDraft, setLogoSizeDraft] = useState15(null);
|
|
18664
|
+
const [editorViewport, setEditorViewport] = useState15("desktop");
|
|
18665
|
+
const [parentScrollSnap, setParentScrollSnap] = useState15(null);
|
|
18666
|
+
const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = useState15(null);
|
|
18667
|
+
const [footerHeadingVisible, setFooterHeadingVisible] = useState15(null);
|
|
18668
|
+
const footerDragRef = useRef11(null);
|
|
18669
|
+
const [footerDropSlots, setFooterDropSlots] = useState15([]);
|
|
18670
|
+
const [activeFooterDropIndex, setActiveFooterDropIndex] = useState15(null);
|
|
18671
|
+
const [draggedItemRect, setDraggedItemRect] = useState15(null);
|
|
18672
|
+
const footerPointerDragRef = useRef11(null);
|
|
18673
|
+
const suppressNextClickRef = useRef11(false);
|
|
18674
|
+
const suppressClickUntilRef = useRef11(0);
|
|
18675
|
+
const [linkPopover, setLinkPopover] = useState15(null);
|
|
18676
|
+
const linkPopoverSessionRef = useRef11(null);
|
|
18677
|
+
const addNavAfterAnchorRef = useRef11(null);
|
|
18678
|
+
const editContentRef = useRef11({});
|
|
18679
|
+
const aiSectionsRef = useRef11("");
|
|
18680
|
+
const brandKitRef = useRef11("");
|
|
18681
|
+
const stylesRef = useRef11("");
|
|
18682
|
+
const appliedDrawerRef = useRef11(null);
|
|
18683
|
+
const pendingDeleteUndoRef = useRef11(null);
|
|
18684
|
+
const [sitePages, setSitePages] = useState15([]);
|
|
18685
|
+
const [sectionsByPath, setSectionsByPath] = useState15({});
|
|
18686
|
+
const sectionsPrefetchGenRef = useRef11(0);
|
|
18687
|
+
const setLinkPopoverRef = useRef11(setLinkPopover);
|
|
18688
|
+
const linkPopoverPanelRef = useRef11(null);
|
|
18689
|
+
const linkPopoverOpenRef = useRef11(false);
|
|
18690
|
+
const linkPopoverGraceUntilRef = useRef11(0);
|
|
18068
18691
|
setLinkPopoverRef.current = setLinkPopover;
|
|
18069
18692
|
linkPopoverSessionRef.current = linkPopover;
|
|
18070
18693
|
const {
|
|
@@ -18113,7 +18736,7 @@ function OhhwellsBridge() {
|
|
|
18113
18736
|
const bumpLinkPopoverGrace = () => {
|
|
18114
18737
|
linkPopoverGraceUntilRef.current = Date.now() + 350;
|
|
18115
18738
|
};
|
|
18116
|
-
const runSectionsPrefetch =
|
|
18739
|
+
const runSectionsPrefetch = useCallback9((pages) => {
|
|
18117
18740
|
if (!isEditMode || shouldUseDevFixtures() || pages.length === 0) return;
|
|
18118
18741
|
const gen = ++sectionsPrefetchGenRef.current;
|
|
18119
18742
|
const paths = pages.map((p) => p.path);
|
|
@@ -18132,9 +18755,9 @@ function OhhwellsBridge() {
|
|
|
18132
18755
|
);
|
|
18133
18756
|
});
|
|
18134
18757
|
}, [isEditMode, pathname]);
|
|
18135
|
-
const runSectionsPrefetchRef =
|
|
18758
|
+
const runSectionsPrefetchRef = useRef11(runSectionsPrefetch);
|
|
18136
18759
|
runSectionsPrefetchRef.current = runSectionsPrefetch;
|
|
18137
|
-
|
|
18760
|
+
useEffect14(() => {
|
|
18138
18761
|
if (!linkPopover) {
|
|
18139
18762
|
document.documentElement.removeAttribute("data-ohw-link-popover-open");
|
|
18140
18763
|
return;
|
|
@@ -18162,7 +18785,7 @@ function OhhwellsBridge() {
|
|
|
18162
18785
|
document.documentElement.removeAttribute("data-ohw-link-popover-open");
|
|
18163
18786
|
};
|
|
18164
18787
|
}, [linkPopover, postToParent2]);
|
|
18165
|
-
|
|
18788
|
+
useEffect14(() => {
|
|
18166
18789
|
if (!isEditMode) return;
|
|
18167
18790
|
const useFixtures = shouldUseDevFixtures();
|
|
18168
18791
|
if (useFixtures) {
|
|
@@ -18186,14 +18809,14 @@ function OhhwellsBridge() {
|
|
|
18186
18809
|
if (!useFixtures) postToParent2({ type: "ow:request-site-pages" });
|
|
18187
18810
|
return () => window.removeEventListener("message", onSitePages);
|
|
18188
18811
|
}, [isEditMode, postToParent2]);
|
|
18189
|
-
|
|
18812
|
+
useEffect14(() => {
|
|
18190
18813
|
if (!isEditMode || shouldUseDevFixtures()) return;
|
|
18191
18814
|
void loadAllSectionsManifest().then((manifest) => {
|
|
18192
18815
|
if (Object.keys(manifest).length === 0) return;
|
|
18193
18816
|
setSectionsByPath((prev) => ({ ...manifest, ...prev }));
|
|
18194
18817
|
});
|
|
18195
18818
|
}, [isEditMode]);
|
|
18196
|
-
|
|
18819
|
+
useEffect14(() => {
|
|
18197
18820
|
const update = () => {
|
|
18198
18821
|
const el = activeElRef.current ?? selectedElRef.current;
|
|
18199
18822
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
@@ -18217,10 +18840,10 @@ function OhhwellsBridge() {
|
|
|
18217
18840
|
vvp.removeEventListener("resize", update);
|
|
18218
18841
|
};
|
|
18219
18842
|
}, []);
|
|
18220
|
-
const refreshStateRules =
|
|
18843
|
+
const refreshStateRules = useCallback9(() => {
|
|
18221
18844
|
editStylesRef.current?.forceHover && (editStylesRef.current.forceHover.textContent = collectStateRules());
|
|
18222
18845
|
}, []);
|
|
18223
|
-
const processConfigRequest =
|
|
18846
|
+
const processConfigRequest = useCallback9((insertAfterVal) => {
|
|
18224
18847
|
const tracker = getSectionsTracker();
|
|
18225
18848
|
let entries = [];
|
|
18226
18849
|
try {
|
|
@@ -18243,7 +18866,7 @@ function OhhwellsBridge() {
|
|
|
18243
18866
|
}
|
|
18244
18867
|
window.postMessage({ type: "ow:schedule-config", insertAfter: insertAfterVal, scheduleId: null }, "*");
|
|
18245
18868
|
}, [isEditMode]);
|
|
18246
|
-
const deactivate =
|
|
18869
|
+
const deactivate = useCallback9(() => {
|
|
18247
18870
|
const el = activeElRef.current;
|
|
18248
18871
|
if (!el) return;
|
|
18249
18872
|
const isFormBlock = el.dataset.ohwEditable === "form";
|
|
@@ -18294,12 +18917,12 @@ function OhhwellsBridge() {
|
|
|
18294
18917
|
setToolbarShowEditLink(false);
|
|
18295
18918
|
postToParent2({ type: "ow:exit-edit" });
|
|
18296
18919
|
}, [postToParent2]);
|
|
18297
|
-
const clearSelectedAttr =
|
|
18920
|
+
const clearSelectedAttr = useCallback9(() => {
|
|
18298
18921
|
document.querySelectorAll("[data-ohw-selected]").forEach((el) => {
|
|
18299
18922
|
el.removeAttribute("data-ohw-selected");
|
|
18300
18923
|
});
|
|
18301
18924
|
}, []);
|
|
18302
|
-
const deselect =
|
|
18925
|
+
const deselect = useCallback9(() => {
|
|
18303
18926
|
const nestedGroup = selectedElRef.current?.closest("[data-ohw-nav-children]") != null ? selectedElRef.current.closest("[data-ohw-nav-group]") : null;
|
|
18304
18927
|
clearSelectedAttr();
|
|
18305
18928
|
selectedElRef.current = null;
|
|
@@ -18333,20 +18956,20 @@ function OhhwellsBridge() {
|
|
|
18333
18956
|
setToolbarVariant("none");
|
|
18334
18957
|
}
|
|
18335
18958
|
}, [clearSelectedAttr]);
|
|
18336
|
-
const markSelected =
|
|
18959
|
+
const markSelected = useCallback9((el) => {
|
|
18337
18960
|
clearSelectedAttr();
|
|
18338
18961
|
el.removeAttribute("data-ohw-hovered");
|
|
18339
18962
|
el.setAttribute("data-ohw-selected", "");
|
|
18340
18963
|
}, [clearSelectedAttr]);
|
|
18341
|
-
const isSelectedForHover =
|
|
18964
|
+
const isSelectedForHover = useCallback9((el) => {
|
|
18342
18965
|
if (!el) return false;
|
|
18343
18966
|
return [selectedElRef.current, activeElRef.current].some(
|
|
18344
18967
|
(busy) => busy && (el === busy || busy.contains(el) || el.contains(busy))
|
|
18345
18968
|
);
|
|
18346
18969
|
}, []);
|
|
18347
|
-
const isSelectedForHoverRef =
|
|
18970
|
+
const isSelectedForHoverRef = useRef11(isSelectedForHover);
|
|
18348
18971
|
isSelectedForHoverRef.current = isSelectedForHover;
|
|
18349
|
-
const resolveHrefKeyElement =
|
|
18972
|
+
const resolveHrefKeyElement = useCallback9((hrefKey) => {
|
|
18350
18973
|
if (isFooterHrefKey(hrefKey)) {
|
|
18351
18974
|
return document.querySelector(
|
|
18352
18975
|
`footer [data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
@@ -18361,7 +18984,7 @@ function OhhwellsBridge() {
|
|
|
18361
18984
|
`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
18362
18985
|
);
|
|
18363
18986
|
}, []);
|
|
18364
|
-
const resyncSelectedNavigationItem =
|
|
18987
|
+
const resyncSelectedNavigationItem = useCallback9(() => {
|
|
18365
18988
|
const hrefKey = selectedHrefKeyRef.current;
|
|
18366
18989
|
if (hrefKey) {
|
|
18367
18990
|
const link = resolveHrefKeyElement(hrefKey);
|
|
@@ -18399,7 +19022,7 @@ function OhhwellsBridge() {
|
|
|
18399
19022
|
);
|
|
18400
19023
|
}
|
|
18401
19024
|
}, [resolveHrefKeyElement]);
|
|
18402
|
-
const reselectNavigationItem =
|
|
19025
|
+
const reselectNavigationItem = useCallback9((navAnchor) => {
|
|
18403
19026
|
selectedElRef.current = navAnchor;
|
|
18404
19027
|
selectedHrefKeyRef.current = navAnchor.getAttribute("data-ohw-href-key");
|
|
18405
19028
|
selectedFooterColAttrRef.current = null;
|
|
@@ -18430,7 +19053,7 @@ function OhhwellsBridge() {
|
|
|
18430
19053
|
setToolbarShowEditLink(false);
|
|
18431
19054
|
setActiveCommands(/* @__PURE__ */ new Set());
|
|
18432
19055
|
}, [markSelected]);
|
|
18433
|
-
const commitNavigationTextEdit =
|
|
19056
|
+
const commitNavigationTextEdit = useCallback9((navAnchor) => {
|
|
18434
19057
|
const el = activeElRef.current;
|
|
18435
19058
|
if (!el) return;
|
|
18436
19059
|
const key = el.dataset.ohwKey;
|
|
@@ -18463,7 +19086,7 @@ function OhhwellsBridge() {
|
|
|
18463
19086
|
postToParent2({ type: "ow:exit-edit" });
|
|
18464
19087
|
reselectNavigationItem(navAnchor);
|
|
18465
19088
|
}, [postToParent2, reselectNavigationItem]);
|
|
18466
|
-
const handleAddTopLevelNavItem =
|
|
19089
|
+
const handleAddTopLevelNavItem = useCallback9(() => {
|
|
18467
19090
|
const items = listNavbarRootItems();
|
|
18468
19091
|
addNavAfterAnchorRef.current = items[items.length - 1] ?? null;
|
|
18469
19092
|
deselectRef.current();
|
|
@@ -18475,7 +19098,7 @@ function OhhwellsBridge() {
|
|
|
18475
19098
|
intent: "add-nav"
|
|
18476
19099
|
});
|
|
18477
19100
|
}, []);
|
|
18478
|
-
const maybeWarnNavLinkDropdownConflict =
|
|
19101
|
+
const maybeWarnNavLinkDropdownConflict = useCallback9(
|
|
18479
19102
|
(anchor) => {
|
|
18480
19103
|
if (!isNavbarHrefKey(anchor.getAttribute("data-ohw-href-key"))) return;
|
|
18481
19104
|
if (!navDropdownsOpenOnClick()) return;
|
|
@@ -18488,7 +19111,7 @@ function OhhwellsBridge() {
|
|
|
18488
19111
|
},
|
|
18489
19112
|
[postToParent2]
|
|
18490
19113
|
);
|
|
18491
|
-
const handleNavDropdownOpenChange =
|
|
19114
|
+
const handleNavDropdownOpenChange = useCallback9((open) => {
|
|
18492
19115
|
const selected = selectedElRef.current;
|
|
18493
19116
|
if (!selected || !isNavigationItem2(selected)) return;
|
|
18494
19117
|
if (isNestedNavChild(selected)) return;
|
|
@@ -18504,7 +19127,7 @@ function OhhwellsBridge() {
|
|
|
18504
19127
|
}
|
|
18505
19128
|
});
|
|
18506
19129
|
}, []);
|
|
18507
|
-
const handleFooterHeadingVisibleChange =
|
|
19130
|
+
const handleFooterHeadingVisibleChange = useCallback9(
|
|
18508
19131
|
(visible) => {
|
|
18509
19132
|
const selected = selectedElRef.current;
|
|
18510
19133
|
if (!selected || !isFooterFrameSelectionRef.current) return;
|
|
@@ -18528,7 +19151,7 @@ function OhhwellsBridge() {
|
|
|
18528
19151
|
},
|
|
18529
19152
|
[postToParent2]
|
|
18530
19153
|
);
|
|
18531
|
-
const enterEditOnNewItem =
|
|
19154
|
+
const enterEditOnNewItem = useCallback9((anchor) => {
|
|
18532
19155
|
const label = anchor.querySelector('[data-ohw-editable="text"]');
|
|
18533
19156
|
if (!label) {
|
|
18534
19157
|
selectRef.current(anchor);
|
|
@@ -18537,8 +19160,8 @@ function OhhwellsBridge() {
|
|
|
18537
19160
|
setNavGroupForceOpen(anchor, true);
|
|
18538
19161
|
activateRef.current(label);
|
|
18539
19162
|
}, []);
|
|
18540
|
-
const pendingSocialAddRef =
|
|
18541
|
-
const handleAddChildItem =
|
|
19163
|
+
const pendingSocialAddRef = useRef11(null);
|
|
19164
|
+
const handleAddChildItem = useCallback9(() => {
|
|
18542
19165
|
const selected = selectedElRef.current;
|
|
18543
19166
|
if (!selected) return;
|
|
18544
19167
|
const socialsRow = isSocialsRow(selected) ? selected : findSocialsRow(selected);
|
|
@@ -18649,7 +19272,7 @@ function OhhwellsBridge() {
|
|
|
18649
19272
|
});
|
|
18650
19273
|
});
|
|
18651
19274
|
}, [enterEditOnNewItem, isFooterFrameSelection, maybeWarnNavLinkDropdownConflict, postToParent2]);
|
|
18652
|
-
const handleAddFooterColumn =
|
|
19275
|
+
const handleAddFooterColumn = useCallback9(() => {
|
|
18653
19276
|
if (!canAddFooterColumn()) {
|
|
18654
19277
|
postToParent2({
|
|
18655
19278
|
type: "ow:toast",
|
|
@@ -18670,7 +19293,7 @@ function OhhwellsBridge() {
|
|
|
18670
19293
|
selectRef.current(result.firstLink);
|
|
18671
19294
|
});
|
|
18672
19295
|
}, [postToParent2]);
|
|
18673
|
-
const clearFooterDragVisuals =
|
|
19296
|
+
const clearFooterDragVisuals = useCallback9(() => {
|
|
18674
19297
|
footerDragRef.current = null;
|
|
18675
19298
|
setSiblingHintRects([]);
|
|
18676
19299
|
setFooterDropSlots([]);
|
|
@@ -18679,7 +19302,7 @@ function OhhwellsBridge() {
|
|
|
18679
19302
|
setIsItemDragging(false);
|
|
18680
19303
|
unlockFooterDragInteraction();
|
|
18681
19304
|
}, []);
|
|
18682
|
-
const refreshFooterDragVisuals =
|
|
19305
|
+
const refreshFooterDragVisuals = useCallback9((session, activeSlot, clientX, clientY) => {
|
|
18683
19306
|
const dragged = session.draggedEl;
|
|
18684
19307
|
setDraggedItemRect(dragged.getBoundingClientRect());
|
|
18685
19308
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -18711,13 +19334,13 @@ function OhhwellsBridge() {
|
|
|
18711
19334
|
const activeIdx = activeSlot ? slots.findIndex((s) => s.insertIndex === activeSlot.insertIndex) : -1;
|
|
18712
19335
|
setActiveFooterDropIndex(activeIdx >= 0 ? activeIdx : null);
|
|
18713
19336
|
}, []);
|
|
18714
|
-
const refreshFooterDragVisualsRef =
|
|
19337
|
+
const refreshFooterDragVisualsRef = useRef11(refreshFooterDragVisuals);
|
|
18715
19338
|
refreshFooterDragVisualsRef.current = refreshFooterDragVisuals;
|
|
18716
|
-
const commitFooterDragRef =
|
|
19339
|
+
const commitFooterDragRef = useRef11(() => {
|
|
18717
19340
|
});
|
|
18718
|
-
const beginFooterDragRef =
|
|
19341
|
+
const beginFooterDragRef = useRef11(() => {
|
|
18719
19342
|
});
|
|
18720
|
-
const beginFooterDrag =
|
|
19343
|
+
const beginFooterDrag = useCallback9(
|
|
18721
19344
|
(session) => {
|
|
18722
19345
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
18723
19346
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -18737,7 +19360,7 @@ function OhhwellsBridge() {
|
|
|
18737
19360
|
[refreshFooterDragVisuals]
|
|
18738
19361
|
);
|
|
18739
19362
|
beginFooterDragRef.current = beginFooterDrag;
|
|
18740
|
-
const commitFooterDrag =
|
|
19363
|
+
const commitFooterDrag = useCallback9(
|
|
18741
19364
|
(clientX, clientY) => {
|
|
18742
19365
|
const session = footerDragRef.current;
|
|
18743
19366
|
if (!session) {
|
|
@@ -18866,7 +19489,7 @@ function OhhwellsBridge() {
|
|
|
18866
19489
|
[clearFooterDragVisuals, resolveHrefKeyElement, resyncSelectedNavigationItem]
|
|
18867
19490
|
);
|
|
18868
19491
|
commitFooterDragRef.current = commitFooterDrag;
|
|
18869
|
-
const startFooterLinkDrag =
|
|
19492
|
+
const startFooterLinkDrag = useCallback9(
|
|
18870
19493
|
(anchor, clientX, clientY, wasSelected) => {
|
|
18871
19494
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
18872
19495
|
if (!hrefKey) return false;
|
|
@@ -18902,7 +19525,7 @@ function OhhwellsBridge() {
|
|
|
18902
19525
|
},
|
|
18903
19526
|
[beginFooterDrag]
|
|
18904
19527
|
);
|
|
18905
|
-
const startFooterColumnDrag =
|
|
19528
|
+
const startFooterColumnDrag = useCallback9(
|
|
18906
19529
|
(columnEl, clientX, clientY, wasSelected) => {
|
|
18907
19530
|
const columns = listFooterColumns();
|
|
18908
19531
|
const idx = columns.indexOf(columnEl);
|
|
@@ -18922,7 +19545,7 @@ function OhhwellsBridge() {
|
|
|
18922
19545
|
},
|
|
18923
19546
|
[beginFooterDrag]
|
|
18924
19547
|
);
|
|
18925
|
-
const handleItemDragStart =
|
|
19548
|
+
const handleItemDragStart = useCallback9(
|
|
18926
19549
|
(e) => {
|
|
18927
19550
|
const selected = selectedElRef.current;
|
|
18928
19551
|
if (!selected) {
|
|
@@ -18942,7 +19565,7 @@ function OhhwellsBridge() {
|
|
|
18942
19565
|
},
|
|
18943
19566
|
[startFooterColumnDrag, startFooterLinkDrag, startNavLinkDrag]
|
|
18944
19567
|
);
|
|
18945
|
-
const handleItemDragEnd =
|
|
19568
|
+
const handleItemDragEnd = useCallback9(
|
|
18946
19569
|
(e) => {
|
|
18947
19570
|
if (footerDragRef.current) {
|
|
18948
19571
|
const x = e?.clientX;
|
|
@@ -18968,7 +19591,7 @@ function OhhwellsBridge() {
|
|
|
18968
19591
|
},
|
|
18969
19592
|
[commitFooterDrag, commitNavDrag, navDragRef]
|
|
18970
19593
|
);
|
|
18971
|
-
const handleItemChromePointerDown =
|
|
19594
|
+
const handleItemChromePointerDown = useCallback9((e) => {
|
|
18972
19595
|
if (e.button !== 0) return;
|
|
18973
19596
|
const selected = selectedElRef.current;
|
|
18974
19597
|
if (!selected) return;
|
|
@@ -18999,7 +19622,7 @@ function OhhwellsBridge() {
|
|
|
18999
19622
|
}
|
|
19000
19623
|
if (armNavPressFromChrome(selected, e.clientX, e.clientY, e.pointerId)) return;
|
|
19001
19624
|
}, [armNavPressFromChrome]);
|
|
19002
|
-
const handleItemChromeClick =
|
|
19625
|
+
const handleItemChromeClick = useCallback9((clientX, clientY) => {
|
|
19003
19626
|
if (suppressNextClickRef.current || Date.now() < suppressClickUntilRef.current) {
|
|
19004
19627
|
suppressNextClickRef.current = false;
|
|
19005
19628
|
return;
|
|
@@ -19012,7 +19635,7 @@ function OhhwellsBridge() {
|
|
|
19012
19635
|
}, []);
|
|
19013
19636
|
reselectNavigationItemRef.current = reselectNavigationItem;
|
|
19014
19637
|
commitNavigationTextEditRef.current = commitNavigationTextEdit;
|
|
19015
|
-
const select =
|
|
19638
|
+
const select = useCallback9((anchor) => {
|
|
19016
19639
|
if (!isNavigationItem2(anchor)) return;
|
|
19017
19640
|
if (activeElRef.current) deactivate();
|
|
19018
19641
|
aiSectionApiRef.current?.selectFromElement(anchor);
|
|
@@ -19055,7 +19678,7 @@ function OhhwellsBridge() {
|
|
|
19055
19678
|
setFloatingPanel(null);
|
|
19056
19679
|
setLogoSizeDraft(null);
|
|
19057
19680
|
}, [deactivate, markSelected]);
|
|
19058
|
-
const selectFrame =
|
|
19681
|
+
const selectFrame = useCallback9((el) => {
|
|
19059
19682
|
if (!isNavigationContainer(el)) return;
|
|
19060
19683
|
if (activeElRef.current) deactivate();
|
|
19061
19684
|
aiSectionApiRef.current?.selectFromElement(el);
|
|
@@ -19095,7 +19718,7 @@ function OhhwellsBridge() {
|
|
|
19095
19718
|
setFloatingPanel(null);
|
|
19096
19719
|
setLogoSizeDraft(null);
|
|
19097
19720
|
}, [deactivate, markSelected, postToParent2]);
|
|
19098
|
-
const selectLogo =
|
|
19721
|
+
const selectLogo = useCallback9(
|
|
19099
19722
|
(logoEl) => {
|
|
19100
19723
|
if (activeElRef.current) deactivate();
|
|
19101
19724
|
selectedElRef.current = logoEl;
|
|
@@ -19124,7 +19747,7 @@ function OhhwellsBridge() {
|
|
|
19124
19747
|
},
|
|
19125
19748
|
[deactivate, markSelected]
|
|
19126
19749
|
);
|
|
19127
|
-
const openLogoSizePanel =
|
|
19750
|
+
const openLogoSizePanel = useCallback9((logoEl) => {
|
|
19128
19751
|
const placement = getLogoPlacement(logoEl);
|
|
19129
19752
|
const draft = readLogoSizeState(editContentRef.current, placement);
|
|
19130
19753
|
setLogoSizeDraft(draft);
|
|
@@ -19137,7 +19760,7 @@ function OhhwellsBridge() {
|
|
|
19137
19760
|
placement
|
|
19138
19761
|
});
|
|
19139
19762
|
}, []);
|
|
19140
|
-
const openSocialsDisplayPanel =
|
|
19763
|
+
const openSocialsDisplayPanel = useCallback9((row) => {
|
|
19141
19764
|
setParentScrollSnap(parentScrollRef.current);
|
|
19142
19765
|
setFloatingPanel({
|
|
19143
19766
|
key: "socials-display",
|
|
@@ -19147,11 +19770,11 @@ function OhhwellsBridge() {
|
|
|
19147
19770
|
row
|
|
19148
19771
|
});
|
|
19149
19772
|
}, []);
|
|
19150
|
-
const isEditModeRef =
|
|
19151
|
-
const requestMissingSocialIconsRef =
|
|
19773
|
+
const isEditModeRef = useRef11(false);
|
|
19774
|
+
const requestMissingSocialIconsRef = useRef11(() => {
|
|
19152
19775
|
});
|
|
19153
|
-
const askedSocialIconsRef =
|
|
19154
|
-
const requestMissingSocialIcons =
|
|
19776
|
+
const askedSocialIconsRef = useRef11(/* @__PURE__ */ new Set());
|
|
19777
|
+
const requestMissingSocialIcons = useCallback9(() => {
|
|
19155
19778
|
const items = Array.from(document.querySelectorAll(`[${SOCIALS_ROW_ATTR}]`)).filter((row) => socialsDisplayFor(row, editContentRef.current).icon).flatMap((row) => {
|
|
19156
19779
|
const missing = socialsMissingIcons(row);
|
|
19157
19780
|
listSocialItems(row).forEach((item) => ensureIconSlot(item));
|
|
@@ -19163,7 +19786,7 @@ function OhhwellsBridge() {
|
|
|
19163
19786
|
}, []);
|
|
19164
19787
|
requestMissingSocialIconsRef.current = requestMissingSocialIcons;
|
|
19165
19788
|
isEditModeRef.current = isEditMode;
|
|
19166
|
-
const changeSocialsDisplay =
|
|
19789
|
+
const changeSocialsDisplay = useCallback9(
|
|
19167
19790
|
(row, next) => {
|
|
19168
19791
|
if (next.icon) {
|
|
19169
19792
|
const missing = socialsMissingIcons(row);
|
|
@@ -19187,17 +19810,17 @@ function OhhwellsBridge() {
|
|
|
19187
19810
|
},
|
|
19188
19811
|
[]
|
|
19189
19812
|
);
|
|
19190
|
-
const closeFloatingPanelOnly =
|
|
19813
|
+
const closeFloatingPanelOnly = useCallback9(() => {
|
|
19191
19814
|
setFloatingPanel(null);
|
|
19192
19815
|
setLogoSizeDraft(null);
|
|
19193
19816
|
}, []);
|
|
19194
19817
|
closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
|
|
19195
|
-
const closeFloatingPanelAndDeselect =
|
|
19818
|
+
const closeFloatingPanelAndDeselect = useCallback9(() => {
|
|
19196
19819
|
setFloatingPanel(null);
|
|
19197
19820
|
setLogoSizeDraft(null);
|
|
19198
19821
|
deselectRef.current();
|
|
19199
19822
|
}, []);
|
|
19200
|
-
|
|
19823
|
+
useEffect14(() => {
|
|
19201
19824
|
const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
|
|
19202
19825
|
if (!session || !logoSizeDraft) {
|
|
19203
19826
|
postToParentRef.current({ type: "ow:logo-size-panel", open: false });
|
|
@@ -19216,7 +19839,7 @@ function OhhwellsBridge() {
|
|
|
19216
19839
|
max: LOGO_SIZE_MAX
|
|
19217
19840
|
});
|
|
19218
19841
|
}, [floatingPanel, logoSizeDraft, editorViewport]);
|
|
19219
|
-
const persistLogoSizeDraft =
|
|
19842
|
+
const persistLogoSizeDraft = useCallback9(
|
|
19220
19843
|
(placement, draft) => {
|
|
19221
19844
|
const desktopKey = LOGO_SIZE_DESKTOP_KEYS[placement];
|
|
19222
19845
|
const mobileKey = LOGO_SIZE_MOBILE_KEYS[placement];
|
|
@@ -19256,7 +19879,7 @@ function OhhwellsBridge() {
|
|
|
19256
19879
|
},
|
|
19257
19880
|
[postToParent2]
|
|
19258
19881
|
);
|
|
19259
|
-
const activate =
|
|
19882
|
+
const activate = useCallback9((el, options) => {
|
|
19260
19883
|
if (activeElRef.current === el) return;
|
|
19261
19884
|
document.querySelectorAll("[data-ohw-hovered]").forEach((hovered) => {
|
|
19262
19885
|
hovered.removeAttribute("data-ohw-hovered");
|
|
@@ -19354,8 +19977,8 @@ function OhhwellsBridge() {
|
|
|
19354
19977
|
openLogoSizePanelRef.current = openLogoSizePanel;
|
|
19355
19978
|
deselectRef.current = deselect;
|
|
19356
19979
|
closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
|
|
19357
|
-
const lastSiteWideScopeRef =
|
|
19358
|
-
|
|
19980
|
+
const lastSiteWideScopeRef = useRef11(null);
|
|
19981
|
+
useEffect14(() => {
|
|
19359
19982
|
if (!isEditMode) {
|
|
19360
19983
|
if (lastSiteWideScopeRef.current !== false) {
|
|
19361
19984
|
lastSiteWideScopeRef.current = false;
|
|
@@ -19500,7 +20123,7 @@ function OhhwellsBridge() {
|
|
|
19500
20123
|
cancelled = true;
|
|
19501
20124
|
};
|
|
19502
20125
|
}, [subdomain, isEditMode]);
|
|
19503
|
-
|
|
20126
|
+
useEffect14(() => {
|
|
19504
20127
|
if (!isEditMode) return;
|
|
19505
20128
|
const resolveIndex = (form, clientY) => {
|
|
19506
20129
|
const wrappers = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== fieldDragRef.current?.key);
|
|
@@ -19541,7 +20164,7 @@ function OhhwellsBridge() {
|
|
|
19541
20164
|
window.removeEventListener("drop", onDrop, true);
|
|
19542
20165
|
};
|
|
19543
20166
|
}, [buildFieldDropSlots, isEditMode, persistFields, selectField]);
|
|
19544
|
-
|
|
20167
|
+
useEffect14(() => {
|
|
19545
20168
|
if (!isEditMode) return;
|
|
19546
20169
|
const mark = () => document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
19547
20170
|
markFormFields(form);
|
|
@@ -19553,7 +20176,7 @@ function OhhwellsBridge() {
|
|
|
19553
20176
|
});
|
|
19554
20177
|
return () => observer.disconnect();
|
|
19555
20178
|
}, [isEditMode, fetchState, pathname]);
|
|
19556
|
-
|
|
20179
|
+
useEffect14(() => {
|
|
19557
20180
|
if (!isEditMode) return;
|
|
19558
20181
|
let saveTimer = null;
|
|
19559
20182
|
const onInput = (e) => {
|
|
@@ -19575,14 +20198,14 @@ function OhhwellsBridge() {
|
|
|
19575
20198
|
document.addEventListener("input", onInput, true);
|
|
19576
20199
|
return () => document.removeEventListener("input", onInput, true);
|
|
19577
20200
|
}, [isEditMode, persistFields]);
|
|
19578
|
-
|
|
20201
|
+
useEffect14(() => {
|
|
19579
20202
|
if (isEditMode || fetchState !== "done") return;
|
|
19580
20203
|
const content = contentCache.get(subdomain) ?? {};
|
|
19581
20204
|
document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
19582
20205
|
reconcileFieldsFromContent(form, content);
|
|
19583
20206
|
});
|
|
19584
20207
|
}, [isEditMode, fetchState, subdomain]);
|
|
19585
|
-
|
|
20208
|
+
useEffect14(() => {
|
|
19586
20209
|
if (!isEditMode) return;
|
|
19587
20210
|
const swallow = (e) => {
|
|
19588
20211
|
const target = e.target;
|
|
@@ -19591,14 +20214,14 @@ function OhhwellsBridge() {
|
|
|
19591
20214
|
document.addEventListener("submit", swallow, true);
|
|
19592
20215
|
return () => document.removeEventListener("submit", swallow, true);
|
|
19593
20216
|
}, [isEditMode]);
|
|
19594
|
-
|
|
20217
|
+
useEffect14(() => {
|
|
19595
20218
|
if (isEditMode || fetchState !== "done") return;
|
|
19596
20219
|
console.log("env", process.env.NEXT_PUBLIC_FLOWOPS_API_URL);
|
|
19597
20220
|
const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
|
|
19598
20221
|
console.log({ apiUrl, subdomain });
|
|
19599
20222
|
bindPublishedForms(apiUrl, subdomain, contentCache.get(subdomain) ?? {});
|
|
19600
20223
|
}, [isEditMode, fetchState, subdomain]);
|
|
19601
|
-
|
|
20224
|
+
useEffect14(() => {
|
|
19602
20225
|
if (!subdomain || isEditMode) return;
|
|
19603
20226
|
let debounceTimer = null;
|
|
19604
20227
|
let observer = null;
|
|
@@ -19693,10 +20316,10 @@ function OhhwellsBridge() {
|
|
|
19693
20316
|
const visible = Boolean(subdomain) && fetchState !== "done";
|
|
19694
20317
|
el.style.display = visible ? "flex" : "none";
|
|
19695
20318
|
}, [subdomain, fetchState]);
|
|
19696
|
-
|
|
20319
|
+
useEffect14(() => {
|
|
19697
20320
|
postToParent2({ type: "ow:navigation", path: pathname });
|
|
19698
20321
|
}, [pathname, postToParent2]);
|
|
19699
|
-
|
|
20322
|
+
useEffect14(() => {
|
|
19700
20323
|
if (!subdomain || isEditMode) return;
|
|
19701
20324
|
const content = contentCache.get(subdomain);
|
|
19702
20325
|
if (!content) return;
|
|
@@ -19712,7 +20335,7 @@ function OhhwellsBridge() {
|
|
|
19712
20335
|
applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
|
|
19713
20336
|
}
|
|
19714
20337
|
}, [pathname, subdomain, isEditMode]);
|
|
19715
|
-
|
|
20338
|
+
useEffect14(() => {
|
|
19716
20339
|
if (!isEditMode) return;
|
|
19717
20340
|
if (linkPopoverSessionRef.current?.intent === "add-nav") return;
|
|
19718
20341
|
if (document.querySelector("[data-ohw-section-picker]")) return;
|
|
@@ -19720,11 +20343,11 @@ function OhhwellsBridge() {
|
|
|
19720
20343
|
deselectRef.current();
|
|
19721
20344
|
deactivateRef.current();
|
|
19722
20345
|
}, [pathname, isEditMode]);
|
|
19723
|
-
|
|
20346
|
+
useEffect14(() => {
|
|
19724
20347
|
if (!isEditMode) return;
|
|
19725
20348
|
initSectionInstancesFromContent(editContentRef.current, pathname);
|
|
19726
20349
|
}, [pathname, isEditMode]);
|
|
19727
|
-
|
|
20350
|
+
useEffect14(() => {
|
|
19728
20351
|
if (!isEditMode) return;
|
|
19729
20352
|
const observer = new MutationObserver(() => {
|
|
19730
20353
|
const drawer = document.querySelector("[data-ohw-nav-drawer]");
|
|
@@ -19735,7 +20358,7 @@ function OhhwellsBridge() {
|
|
|
19735
20358
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
19736
20359
|
return () => observer.disconnect();
|
|
19737
20360
|
}, [isEditMode, pathname]);
|
|
19738
|
-
|
|
20361
|
+
useEffect14(() => {
|
|
19739
20362
|
const contentForNav = () => {
|
|
19740
20363
|
if (isEditMode) return editContentRef.current;
|
|
19741
20364
|
if (!subdomain) return {};
|
|
@@ -19804,7 +20427,7 @@ function OhhwellsBridge() {
|
|
|
19804
20427
|
observer?.disconnect();
|
|
19805
20428
|
};
|
|
19806
20429
|
}, [isEditMode, pathname, subdomain, fetchState, resyncSelectedNavigationItem]);
|
|
19807
|
-
|
|
20430
|
+
useEffect14(() => {
|
|
19808
20431
|
if (!isEditMode) return;
|
|
19809
20432
|
let lastPosted = 0;
|
|
19810
20433
|
const measure = () => {
|
|
@@ -19848,7 +20471,7 @@ function OhhwellsBridge() {
|
|
|
19848
20471
|
window.removeEventListener("resize", handleResize);
|
|
19849
20472
|
};
|
|
19850
20473
|
}, [pathname, isEditMode, postToParent2]);
|
|
19851
|
-
|
|
20474
|
+
useEffect14(() => {
|
|
19852
20475
|
if (!subdomainFromQuery || isEditMode) return;
|
|
19853
20476
|
const handleClick = (e) => {
|
|
19854
20477
|
const anchor = e.target.closest("a");
|
|
@@ -19864,7 +20487,7 @@ function OhhwellsBridge() {
|
|
|
19864
20487
|
document.addEventListener("click", handleClick, true);
|
|
19865
20488
|
return () => document.removeEventListener("click", handleClick, true);
|
|
19866
20489
|
}, [subdomainFromQuery, isEditMode, router]);
|
|
19867
|
-
|
|
20490
|
+
useEffect14(() => {
|
|
19868
20491
|
if (!isEditMode) {
|
|
19869
20492
|
editStylesRef.current?.base.remove();
|
|
19870
20493
|
editStylesRef.current?.forceHover.remove();
|
|
@@ -20090,11 +20713,11 @@ function OhhwellsBridge() {
|
|
|
20090
20713
|
footer [data-ohw-href-key] [data-ohw-editable][contenteditable],
|
|
20091
20714
|
footer [data-ohw-href-key] [data-ohw-editable][contenteditable] * {
|
|
20092
20715
|
outline: none !important;
|
|
20093
|
-
caret-color: ${
|
|
20716
|
+
caret-color: ${PRIMARY4} !important;
|
|
20094
20717
|
cursor: text !important;
|
|
20095
20718
|
}
|
|
20096
20719
|
[data-ohw-editable][contenteditable]::selection,
|
|
20097
|
-
[data-ohw-editable][contenteditable] *::selection { background: ${
|
|
20720
|
+
[data-ohw-editable][contenteditable] *::selection { background: ${PRIMARY4}59 !important; }
|
|
20098
20721
|
[data-ohw-editable-state], [data-ohw-editable-state] * { pointer-events: none !important; }
|
|
20099
20722
|
[data-ohw-editable-state][data-ohw-active-state] [data-ohw-editable] { pointer-events: auto !important; }
|
|
20100
20723
|
[data-ohw-editable-state][data-ohw-active-state][data-ohw-editable] { pointer-events: auto !important; }
|
|
@@ -21874,10 +22497,7 @@ function OhhwellsBridge() {
|
|
|
21874
22497
|
deselectRef.current();
|
|
21875
22498
|
clearMediaSelectionRef.current();
|
|
21876
22499
|
};
|
|
21877
|
-
const
|
|
21878
|
-
if (e.data?.type !== "ow:ai-apply-tree") return;
|
|
21879
|
-
const payload = e.data.payload;
|
|
21880
|
-
if (!payload || typeof payload.id !== "string" || !isRenderableTree(payload.tree)) return;
|
|
22500
|
+
const applyTreeToLocalState = (payload) => {
|
|
21881
22501
|
clearInteractionChrome();
|
|
21882
22502
|
const previous = aiSectionsRef.current;
|
|
21883
22503
|
const nextState = applyTreeToState(parseAiSectionsState(previous), {
|
|
@@ -21894,7 +22514,17 @@ function OhhwellsBridge() {
|
|
|
21894
22514
|
const top = appliedEl ? appliedEl.getBoundingClientRect().top + window.scrollY : null;
|
|
21895
22515
|
postToParentRef.current({ type: "ow:ai-tree-applied", id: payload.id, previous, value: nextValue, top });
|
|
21896
22516
|
postAiSectionsChanged();
|
|
21897
|
-
|
|
22517
|
+
if (!payload.skipScrollIntoView) {
|
|
22518
|
+
appliedEl?.scrollIntoView({ behavior: "smooth", block: "center" });
|
|
22519
|
+
}
|
|
22520
|
+
return { value: nextValue, top };
|
|
22521
|
+
};
|
|
22522
|
+
applyTreeLocalRef.current = applyTreeToLocalState;
|
|
22523
|
+
const handleAiApplyTree = (e) => {
|
|
22524
|
+
if (e.data?.type !== "ow:ai-apply-tree") return;
|
|
22525
|
+
const payload = e.data.payload;
|
|
22526
|
+
if (!payload || typeof payload.id !== "string" || !isRenderableTree(payload.tree)) return;
|
|
22527
|
+
applyTreeToLocalState(payload);
|
|
21898
22528
|
};
|
|
21899
22529
|
window.addEventListener("message", handleAiApplyTree);
|
|
21900
22530
|
const handleAiDeleteSection = (e) => {
|
|
@@ -22921,7 +23551,7 @@ function OhhwellsBridge() {
|
|
|
22921
23551
|
if (imageShowTimerRef.current) clearTimeout(imageShowTimerRef.current);
|
|
22922
23552
|
};
|
|
22923
23553
|
}, [isEditMode, refreshStateRules]);
|
|
22924
|
-
|
|
23554
|
+
useEffect14(() => {
|
|
22925
23555
|
if (!isEditMode) return;
|
|
22926
23556
|
const THRESHOLD = 10;
|
|
22927
23557
|
const resolveWasSelected = (el) => {
|
|
@@ -23077,7 +23707,7 @@ function OhhwellsBridge() {
|
|
|
23077
23707
|
unlockFooterDragInteraction();
|
|
23078
23708
|
};
|
|
23079
23709
|
}, [isEditMode]);
|
|
23080
|
-
|
|
23710
|
+
useEffect14(() => {
|
|
23081
23711
|
const handler = (e) => {
|
|
23082
23712
|
if (e.data?.type !== "ow:request-schedule-config") return;
|
|
23083
23713
|
const insertAfterVal = e.data.insertAfter;
|
|
@@ -23093,7 +23723,7 @@ function OhhwellsBridge() {
|
|
|
23093
23723
|
window.addEventListener("message", handler);
|
|
23094
23724
|
return () => window.removeEventListener("message", handler);
|
|
23095
23725
|
}, [processConfigRequest]);
|
|
23096
|
-
|
|
23726
|
+
useEffect14(() => {
|
|
23097
23727
|
if (!isEditMode) return;
|
|
23098
23728
|
document.querySelectorAll("[data-ohw-active-state]").forEach((el) => {
|
|
23099
23729
|
el.removeAttribute("data-ohw-active-state");
|
|
@@ -23117,7 +23747,7 @@ function OhhwellsBridge() {
|
|
|
23117
23747
|
postToParent2({
|
|
23118
23748
|
type: "ow:ready",
|
|
23119
23749
|
version: "1",
|
|
23120
|
-
bridgeVersion: "0.1.
|
|
23750
|
+
bridgeVersion: "0.1.118",
|
|
23121
23751
|
path: pathname,
|
|
23122
23752
|
nodes: collectEditableNodes(editContentRef.current),
|
|
23123
23753
|
sections
|
|
@@ -23129,13 +23759,13 @@ function OhhwellsBridge() {
|
|
|
23129
23759
|
clearTimeout(timer);
|
|
23130
23760
|
};
|
|
23131
23761
|
}, [pathname, isEditMode, refreshStateRules, postToParent2]);
|
|
23132
|
-
|
|
23762
|
+
useEffect14(() => {
|
|
23133
23763
|
scrollToHashSectionWhenReady();
|
|
23134
23764
|
const onHashChange = () => scrollToHashSectionWhenReady();
|
|
23135
23765
|
window.addEventListener("hashchange", onHashChange);
|
|
23136
23766
|
return () => window.removeEventListener("hashchange", onHashChange);
|
|
23137
23767
|
}, [pathname]);
|
|
23138
|
-
const handleCommand =
|
|
23768
|
+
const handleCommand = useCallback9((cmd) => {
|
|
23139
23769
|
const el = activeElRef.current;
|
|
23140
23770
|
const selBefore = window.getSelection();
|
|
23141
23771
|
let savedOffsets = null;
|
|
@@ -23171,7 +23801,7 @@ function OhhwellsBridge() {
|
|
|
23171
23801
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
23172
23802
|
refreshActiveCommandsRef.current();
|
|
23173
23803
|
}, []);
|
|
23174
|
-
|
|
23804
|
+
useEffect14(() => {
|
|
23175
23805
|
const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
|
|
23176
23806
|
if (!session || !logoSizeDraft) return;
|
|
23177
23807
|
const onPanelAction = (e) => {
|
|
@@ -23209,7 +23839,7 @@ function OhhwellsBridge() {
|
|
|
23209
23839
|
window.addEventListener("message", onPanelAction);
|
|
23210
23840
|
return () => window.removeEventListener("message", onPanelAction);
|
|
23211
23841
|
}, [floatingPanel, logoSizeDraft, editorViewport, persistLogoSizeDraft, closeFloatingPanelAndDeselect]);
|
|
23212
|
-
const handleStateChange =
|
|
23842
|
+
const handleStateChange = useCallback9((state) => {
|
|
23213
23843
|
if (!activeStateElRef.current) return;
|
|
23214
23844
|
const el = activeStateElRef.current;
|
|
23215
23845
|
if (state === "Default") {
|
|
@@ -23222,7 +23852,7 @@ function OhhwellsBridge() {
|
|
|
23222
23852
|
}
|
|
23223
23853
|
setToggleState((prev) => prev ? { ...prev, activeState: state } : null);
|
|
23224
23854
|
}, [deactivate]);
|
|
23225
|
-
const reselectAfterLinkPopover =
|
|
23855
|
+
const reselectAfterLinkPopover = useCallback9(
|
|
23226
23856
|
(hrefKey) => {
|
|
23227
23857
|
requestAnimationFrame(() => {
|
|
23228
23858
|
const el = resolveHrefKeyElement(hrefKey);
|
|
@@ -23231,7 +23861,7 @@ function OhhwellsBridge() {
|
|
|
23231
23861
|
},
|
|
23232
23862
|
[resolveHrefKeyElement]
|
|
23233
23863
|
);
|
|
23234
|
-
const closeLinkPopover =
|
|
23864
|
+
const closeLinkPopover = useCallback9(() => {
|
|
23235
23865
|
const session = linkPopoverSessionRef.current;
|
|
23236
23866
|
addNavAfterAnchorRef.current = null;
|
|
23237
23867
|
setLinkPopover(null);
|
|
@@ -23239,9 +23869,9 @@ function OhhwellsBridge() {
|
|
|
23239
23869
|
reselectAfterLinkPopover(session.key);
|
|
23240
23870
|
}
|
|
23241
23871
|
}, [reselectAfterLinkPopover]);
|
|
23242
|
-
const closeLinkPopoverRef =
|
|
23872
|
+
const closeLinkPopoverRef = useRef11(closeLinkPopover);
|
|
23243
23873
|
closeLinkPopoverRef.current = closeLinkPopover;
|
|
23244
|
-
const openLinkPopoverForActive =
|
|
23874
|
+
const openLinkPopoverForActive = useCallback9(() => {
|
|
23245
23875
|
const hrefCtx = getHrefKeyFromElement(activeElRef.current);
|
|
23246
23876
|
if (!hrefCtx) return;
|
|
23247
23877
|
bumpLinkPopoverGrace();
|
|
@@ -23252,7 +23882,7 @@ function OhhwellsBridge() {
|
|
|
23252
23882
|
});
|
|
23253
23883
|
deactivate();
|
|
23254
23884
|
}, [deactivate]);
|
|
23255
|
-
const openLinkPopoverForSelected =
|
|
23885
|
+
const openLinkPopoverForSelected = useCallback9(() => {
|
|
23256
23886
|
const anchor = selectedElRef.current;
|
|
23257
23887
|
if (!anchor) return;
|
|
23258
23888
|
const key = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -23269,7 +23899,7 @@ function OhhwellsBridge() {
|
|
|
23269
23899
|
});
|
|
23270
23900
|
deselect();
|
|
23271
23901
|
}, [deselect]);
|
|
23272
|
-
const handleSelectParent =
|
|
23902
|
+
const handleSelectParent = useCallback9(() => {
|
|
23273
23903
|
const selected = selectedElRef.current;
|
|
23274
23904
|
if (!selected) return;
|
|
23275
23905
|
if (toolbarVariantRef.current === "select-frame") {
|
|
@@ -23296,7 +23926,7 @@ function OhhwellsBridge() {
|
|
|
23296
23926
|
}
|
|
23297
23927
|
deselectRef.current();
|
|
23298
23928
|
}, []);
|
|
23299
|
-
const handleDuplicateSelected =
|
|
23929
|
+
const handleDuplicateSelected = useCallback9(() => {
|
|
23300
23930
|
const selected = selectedElRef.current;
|
|
23301
23931
|
if (!selected || !isNavigationItem2(selected)) return;
|
|
23302
23932
|
const hrefKey = selected.getAttribute("data-ohw-href-key");
|
|
@@ -23429,7 +24059,7 @@ function OhhwellsBridge() {
|
|
|
23429
24059
|
});
|
|
23430
24060
|
}
|
|
23431
24061
|
}, [postToParent2]);
|
|
23432
|
-
const runPendingDeleteUndo =
|
|
24062
|
+
const runPendingDeleteUndo = useCallback9(() => {
|
|
23433
24063
|
const pending = pendingDeleteUndoRef.current;
|
|
23434
24064
|
if (!pending) return false;
|
|
23435
24065
|
pendingDeleteUndoRef.current = null;
|
|
@@ -23437,7 +24067,7 @@ function OhhwellsBridge() {
|
|
|
23437
24067
|
enforceLinkHrefs();
|
|
23438
24068
|
return true;
|
|
23439
24069
|
}, []);
|
|
23440
|
-
const handleDeleteSelected =
|
|
24070
|
+
const handleDeleteSelected = useCallback9(() => {
|
|
23441
24071
|
const selected = selectedElRef.current;
|
|
23442
24072
|
if (!selected) return false;
|
|
23443
24073
|
return deleteSelectedNavFooterItem({
|
|
@@ -23458,7 +24088,7 @@ function OhhwellsBridge() {
|
|
|
23458
24088
|
}, [postToParent2]);
|
|
23459
24089
|
handleDeleteSelectedRef.current = handleDeleteSelected;
|
|
23460
24090
|
runPendingDeleteUndoRef.current = runPendingDeleteUndo;
|
|
23461
|
-
const handleLinkPopoverSubmit =
|
|
24091
|
+
const handleLinkPopoverSubmit = useCallback9(
|
|
23462
24092
|
(target) => {
|
|
23463
24093
|
const session = linkPopoverSessionRef.current;
|
|
23464
24094
|
if (!session) return;
|
|
@@ -23524,14 +24154,14 @@ function OhhwellsBridge() {
|
|
|
23524
24154
|
const showEditLink = toolbarShowEditLink;
|
|
23525
24155
|
const currentSections = sectionsByPath[pathname] ?? [];
|
|
23526
24156
|
linkPopoverOpenRef.current = linkPopover !== null;
|
|
23527
|
-
const handleMediaSelect =
|
|
24157
|
+
const handleMediaSelect = useCallback9((key) => {
|
|
23528
24158
|
const el = hoveredImageRef.current?.dataset.ohwKey === key ? hoveredImageRef.current : Array.from(document.querySelectorAll(MEDIA_SELECTOR)).find(
|
|
23529
24159
|
(m) => (m.dataset.ohwKey ?? "") === key
|
|
23530
24160
|
) ?? null;
|
|
23531
24161
|
if (!el) return;
|
|
23532
24162
|
selectMediaElementRef.current(el);
|
|
23533
24163
|
}, []);
|
|
23534
|
-
const handleMediaReplace =
|
|
24164
|
+
const handleMediaReplace = useCallback9(
|
|
23535
24165
|
(key) => {
|
|
23536
24166
|
postToParent2({
|
|
23537
24167
|
type: "ow:image-pick",
|
|
@@ -23541,13 +24171,13 @@ function OhhwellsBridge() {
|
|
|
23541
24171
|
},
|
|
23542
24172
|
[postToParent2, mediaHover?.elementType, selectedMedia?.elementType]
|
|
23543
24173
|
);
|
|
23544
|
-
const handleEditCarousel =
|
|
24174
|
+
const handleEditCarousel = useCallback9(
|
|
23545
24175
|
(key) => {
|
|
23546
24176
|
postToParent2({ type: "ow:carousel-open", key, images: readCarouselValue(key) });
|
|
23547
24177
|
},
|
|
23548
24178
|
[postToParent2]
|
|
23549
24179
|
);
|
|
23550
|
-
const handleMediaFadeOutComplete =
|
|
24180
|
+
const handleMediaFadeOutComplete = useCallback9((key) => {
|
|
23551
24181
|
setUploadingRects((prev) => {
|
|
23552
24182
|
if (!(key in prev)) return prev;
|
|
23553
24183
|
const next = { ...prev };
|
|
@@ -23555,7 +24185,7 @@ function OhhwellsBridge() {
|
|
|
23555
24185
|
return next;
|
|
23556
24186
|
});
|
|
23557
24187
|
}, []);
|
|
23558
|
-
const handleVideoSettingsChange =
|
|
24188
|
+
const handleVideoSettingsChange = useCallback9(
|
|
23559
24189
|
(key, settings) => {
|
|
23560
24190
|
document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
|
|
23561
24191
|
const video = getVideoEl2(el);
|
|
@@ -23577,14 +24207,14 @@ function OhhwellsBridge() {
|
|
|
23577
24207
|
},
|
|
23578
24208
|
[postToParent2]
|
|
23579
24209
|
);
|
|
23580
|
-
return /* @__PURE__ */
|
|
23581
|
-
/* @__PURE__ */
|
|
23582
|
-
/* @__PURE__ */
|
|
23583
|
-
subdomain && !isEditMode && showBranding && /* @__PURE__ */
|
|
24210
|
+
return /* @__PURE__ */ jsxs21(Fragment9, { children: [
|
|
24211
|
+
/* @__PURE__ */ jsx34("div", { id: "ohw-loader", suppressHydrationWarning: true, style: { ...OHW_LOADER_STYLE, display: "none" }, children: /* @__PURE__ */ jsx34(OhwLoaderSpinner, {}) }),
|
|
24212
|
+
/* @__PURE__ */ jsx34("script", { suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: OHW_LOADER_PREHYDRATE_SCRIPT } }),
|
|
24213
|
+
subdomain && !isEditMode && showBranding && /* @__PURE__ */ jsx34(MadeWithOhhWells, {}),
|
|
23584
24214
|
bridgeRoot ? createPortal3(
|
|
23585
|
-
/* @__PURE__ */
|
|
23586
|
-
/* @__PURE__ */
|
|
23587
|
-
isEditMode && /* @__PURE__ */
|
|
24215
|
+
/* @__PURE__ */ jsxs21(Fragment9, { children: [
|
|
24216
|
+
/* @__PURE__ */ jsx34("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
|
|
24217
|
+
isEditMode && /* @__PURE__ */ jsx34(
|
|
23588
24218
|
AiSectionOverlay,
|
|
23589
24219
|
{
|
|
23590
24220
|
postToParent: postToParent2,
|
|
@@ -23592,12 +24222,20 @@ function OhhwellsBridge() {
|
|
|
23592
24222
|
onSelectionChange: handleAiSectionSelectionChange
|
|
23593
24223
|
}
|
|
23594
24224
|
),
|
|
23595
|
-
|
|
24225
|
+
isEditMode && /* @__PURE__ */ jsx34(
|
|
24226
|
+
AiPricingCardOverlay,
|
|
24227
|
+
{
|
|
24228
|
+
postToParent: postToParent2,
|
|
24229
|
+
aiSectionsRef,
|
|
24230
|
+
applyTreeLocalRef
|
|
24231
|
+
}
|
|
24232
|
+
),
|
|
24233
|
+
isSectionDragging && sectionDropSlots.map((slot, i) => /* @__PURE__ */ jsx34(
|
|
23596
24234
|
"div",
|
|
23597
24235
|
{
|
|
23598
24236
|
className: "pointer-events-none fixed z-2147483646",
|
|
23599
24237
|
style: { left: slot.left, top: slot.y, width: slot.width, height: 3, transform: "translateY(-50%)" },
|
|
23600
|
-
children: /* @__PURE__ */
|
|
24238
|
+
children: /* @__PURE__ */ jsx34(
|
|
23601
24239
|
DropIndicator,
|
|
23602
24240
|
{
|
|
23603
24241
|
direction: "horizontal",
|
|
@@ -23608,7 +24246,7 @@ function OhhwellsBridge() {
|
|
|
23608
24246
|
},
|
|
23609
24247
|
`section-drop-${slot.insertIndex}-${i}`
|
|
23610
24248
|
)),
|
|
23611
|
-
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */
|
|
24249
|
+
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ jsx34(
|
|
23612
24250
|
MediaOverlay,
|
|
23613
24251
|
{
|
|
23614
24252
|
hover: { key, rect, elementType: "image", isDragOver: false, hasTextOverlap: false },
|
|
@@ -23619,7 +24257,7 @@ function OhhwellsBridge() {
|
|
|
23619
24257
|
},
|
|
23620
24258
|
`uploading-${key}`
|
|
23621
24259
|
)),
|
|
23622
|
-
mediaHover && !(mediaHover.key in uploadingRects) && mediaHover.key !== selectedMedia?.key && /* @__PURE__ */
|
|
24260
|
+
mediaHover && !(mediaHover.key in uploadingRects) && mediaHover.key !== selectedMedia?.key && /* @__PURE__ */ jsx34(
|
|
23623
24261
|
MediaOverlay,
|
|
23624
24262
|
{
|
|
23625
24263
|
hover: mediaHover,
|
|
@@ -23630,7 +24268,7 @@ function OhhwellsBridge() {
|
|
|
23630
24268
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
23631
24269
|
}
|
|
23632
24270
|
),
|
|
23633
|
-
selectedMedia && !(selectedMedia.key in uploadingRects) && !linkPopover && /* @__PURE__ */
|
|
24271
|
+
selectedMedia && !(selectedMedia.key in uploadingRects) && !linkPopover && /* @__PURE__ */ jsx34(
|
|
23634
24272
|
MediaOverlay,
|
|
23635
24273
|
{
|
|
23636
24274
|
hover: selectedMedia,
|
|
@@ -23642,7 +24280,7 @@ function OhhwellsBridge() {
|
|
|
23642
24280
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
23643
24281
|
}
|
|
23644
24282
|
),
|
|
23645
|
-
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */
|
|
24283
|
+
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ jsx34(
|
|
23646
24284
|
CarouselOverlay,
|
|
23647
24285
|
{
|
|
23648
24286
|
hover: carouselHover,
|
|
@@ -23650,10 +24288,10 @@ function OhhwellsBridge() {
|
|
|
23650
24288
|
cueOnly: !!carouselHover.fullBleedSectionId && carouselHover.fullBleedSectionId !== selectedAiSectionId
|
|
23651
24289
|
}
|
|
23652
24290
|
),
|
|
23653
|
-
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */
|
|
23654
|
-
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */
|
|
23655
|
-
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */
|
|
23656
|
-
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */
|
|
24291
|
+
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ jsx34(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
|
|
24292
|
+
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ jsx34(ItemInteractionLayer, { rect, state: "sibling-hint" }, `sibling-hint-${i}`)),
|
|
24293
|
+
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */ jsx34(ItemInteractionLayer, { rect: draggedItemRect, state: "dragging" }),
|
|
24294
|
+
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ jsx34(
|
|
23657
24295
|
"div",
|
|
23658
24296
|
{
|
|
23659
24297
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -23663,7 +24301,7 @@ function OhhwellsBridge() {
|
|
|
23663
24301
|
width: slot.width,
|
|
23664
24302
|
height: slot.height
|
|
23665
24303
|
},
|
|
23666
|
-
children: /* @__PURE__ */
|
|
24304
|
+
children: /* @__PURE__ */ jsx34(
|
|
23667
24305
|
DropIndicator,
|
|
23668
24306
|
{
|
|
23669
24307
|
direction: slot.direction,
|
|
@@ -23674,7 +24312,7 @@ function OhhwellsBridge() {
|
|
|
23674
24312
|
},
|
|
23675
24313
|
`footer-drop-${slot.direction}-${slot.columnIndex}-${slot.insertIndex}-${i}`
|
|
23676
24314
|
)),
|
|
23677
|
-
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */
|
|
24315
|
+
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ jsx34(
|
|
23678
24316
|
"div",
|
|
23679
24317
|
{
|
|
23680
24318
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -23684,7 +24322,7 @@ function OhhwellsBridge() {
|
|
|
23684
24322
|
width: slot.width,
|
|
23685
24323
|
height: slot.height
|
|
23686
24324
|
},
|
|
23687
|
-
children: /* @__PURE__ */
|
|
24325
|
+
children: /* @__PURE__ */ jsx34(
|
|
23688
24326
|
DropIndicator,
|
|
23689
24327
|
{
|
|
23690
24328
|
direction: slot.direction,
|
|
@@ -23695,10 +24333,10 @@ function OhhwellsBridge() {
|
|
|
23695
24333
|
},
|
|
23696
24334
|
`nav-drop-${slot.direction}-${slot.parentId ?? "root"}-${slot.insertIndex}-${i}`
|
|
23697
24335
|
)),
|
|
23698
|
-
hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */
|
|
23699
|
-
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */
|
|
23700
|
-
hoveredTextRect && !hoveredNavContainerRect && !hoveredItemRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */
|
|
23701
|
-
formPickRect && !isItemDragging && /* @__PURE__ */
|
|
24336
|
+
hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ jsx34(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
|
|
24337
|
+
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ jsx34(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
|
|
24338
|
+
hoveredTextRect && !hoveredNavContainerRect && !hoveredItemRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ jsx34(ItemInteractionLayer, { rect: hoveredTextRect, state: "hover" }),
|
|
24339
|
+
formPickRect && !isItemDragging && /* @__PURE__ */ jsx34(
|
|
23702
24340
|
ItemInteractionLayer,
|
|
23703
24341
|
{
|
|
23704
24342
|
rect: formPickRect,
|
|
@@ -23706,13 +24344,13 @@ function OhhwellsBridge() {
|
|
|
23706
24344
|
itemDragSurface: false,
|
|
23707
24345
|
toolbarAlign: "left",
|
|
23708
24346
|
chromeGap: 24,
|
|
23709
|
-
toolbar: fieldPickRect ? void 0 : /* @__PURE__ */
|
|
24347
|
+
toolbar: fieldPickRect ? void 0 : /* @__PURE__ */ jsxs21(
|
|
23710
24348
|
"div",
|
|
23711
24349
|
{
|
|
23712
24350
|
"data-ohw-form-toolbar": "",
|
|
23713
24351
|
className: "pointer-events-auto flex items-center gap-0.5 whitespace-nowrap rounded-lg border border-border bg-background p-1 shadow-md",
|
|
23714
24352
|
children: [
|
|
23715
|
-
/* @__PURE__ */
|
|
24353
|
+
/* @__PURE__ */ jsx34(
|
|
23716
24354
|
"button",
|
|
23717
24355
|
{
|
|
23718
24356
|
type: "button",
|
|
@@ -23720,11 +24358,11 @@ function OhhwellsBridge() {
|
|
|
23720
24358
|
className: "flex h-7 w-7 items-center justify-center rounded-md text-foreground transition-colors hover:bg-muted/80",
|
|
23721
24359
|
onClick: () => setFieldTypePickerOpen((open) => !open),
|
|
23722
24360
|
"data-ohw-add-field": "",
|
|
23723
|
-
children: /* @__PURE__ */
|
|
24361
|
+
children: /* @__PURE__ */ jsx34(Plus4, { size: 15, "aria-hidden": true })
|
|
23724
24362
|
}
|
|
23725
24363
|
),
|
|
23726
|
-
/* @__PURE__ */
|
|
23727
|
-
/* @__PURE__ */
|
|
24364
|
+
/* @__PURE__ */ jsx34("div", { className: "mx-0.5 h-5 w-px bg-border" }),
|
|
24365
|
+
/* @__PURE__ */ jsxs21(
|
|
23728
24366
|
"button",
|
|
23729
24367
|
{
|
|
23730
24368
|
type: "button",
|
|
@@ -23740,11 +24378,11 @@ function OhhwellsBridge() {
|
|
|
23740
24378
|
});
|
|
23741
24379
|
},
|
|
23742
24380
|
children: [
|
|
23743
|
-
/* @__PURE__ */
|
|
24381
|
+
/* @__PURE__ */ jsx34(Settings, { size: 14, "aria-hidden": true }),
|
|
23744
24382
|
"Form settings",
|
|
23745
24383
|
formPickCount ? (
|
|
23746
24384
|
// Counter pill, per the design — not a text suffix.
|
|
23747
|
-
/* @__PURE__ */
|
|
24385
|
+
/* @__PURE__ */ jsx34(
|
|
23748
24386
|
"span",
|
|
23749
24387
|
{
|
|
23750
24388
|
"data-ohw-form-count": "",
|
|
@@ -23756,8 +24394,8 @@ function OhhwellsBridge() {
|
|
|
23756
24394
|
]
|
|
23757
24395
|
}
|
|
23758
24396
|
),
|
|
23759
|
-
/* @__PURE__ */
|
|
23760
|
-
/* @__PURE__ */
|
|
24397
|
+
/* @__PURE__ */ jsx34("div", { className: "mx-0.5 h-5 w-px bg-border" }),
|
|
24398
|
+
/* @__PURE__ */ jsx34("div", { className: "flex items-center rounded-md bg-muted/70 p-0.5", children: ["default", "success"].map((state) => /* @__PURE__ */ jsx34(
|
|
23761
24399
|
"button",
|
|
23762
24400
|
{
|
|
23763
24401
|
type: "button",
|
|
@@ -23788,7 +24426,7 @@ function OhhwellsBridge() {
|
|
|
23788
24426
|
)
|
|
23789
24427
|
}
|
|
23790
24428
|
),
|
|
23791
|
-
formHoverRect && !isItemDragging && /* @__PURE__ */
|
|
24429
|
+
formHoverRect && !isItemDragging && /* @__PURE__ */ jsx34(
|
|
23792
24430
|
ItemInteractionLayer,
|
|
23793
24431
|
{
|
|
23794
24432
|
rect: formHoverRect,
|
|
@@ -23796,7 +24434,7 @@ function OhhwellsBridge() {
|
|
|
23796
24434
|
chromeGap: formHoverElRef.current && getFieldWrapper(formHoverElRef.current) ? 8 : 24
|
|
23797
24435
|
}
|
|
23798
24436
|
),
|
|
23799
|
-
fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */
|
|
24437
|
+
fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ jsx34(
|
|
23800
24438
|
ItemInteractionLayer,
|
|
23801
24439
|
{
|
|
23802
24440
|
rect: fieldPickRect,
|
|
@@ -23808,7 +24446,7 @@ function OhhwellsBridge() {
|
|
|
23808
24446
|
dragHandleLabel: "Reorder field",
|
|
23809
24447
|
onDragHandleDragStart: handleFieldDragStart,
|
|
23810
24448
|
onDragHandleDragEnd: handleFieldDragEnd,
|
|
23811
|
-
toolbar: /* @__PURE__ */
|
|
24449
|
+
toolbar: /* @__PURE__ */ jsx34(
|
|
23812
24450
|
FormFieldToolbar,
|
|
23813
24451
|
{
|
|
23814
24452
|
type: fieldPickState.type,
|
|
@@ -23821,12 +24459,12 @@ function OhhwellsBridge() {
|
|
|
23821
24459
|
)
|
|
23822
24460
|
}
|
|
23823
24461
|
),
|
|
23824
|
-
fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */
|
|
24462
|
+
fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */ jsx34(
|
|
23825
24463
|
"div",
|
|
23826
24464
|
{
|
|
23827
24465
|
className: "pointer-events-none fixed z-[2147483644]",
|
|
23828
24466
|
style: { top: slot.top, left: slot.left, width: slot.width },
|
|
23829
|
-
children: /* @__PURE__ */
|
|
24467
|
+
children: /* @__PURE__ */ jsx34(
|
|
23830
24468
|
DropIndicator,
|
|
23831
24469
|
{
|
|
23832
24470
|
direction: "horizontal",
|
|
@@ -23839,7 +24477,7 @@ function OhhwellsBridge() {
|
|
|
23839
24477
|
)) : null,
|
|
23840
24478
|
fieldTypePickerOpen && formPickRect ? (() => {
|
|
23841
24479
|
const toolbar = document.querySelector("[data-ohw-form-toolbar]")?.getBoundingClientRect();
|
|
23842
|
-
return /* @__PURE__ */
|
|
24480
|
+
return /* @__PURE__ */ jsx34(
|
|
23843
24481
|
"div",
|
|
23844
24482
|
{
|
|
23845
24483
|
className: "pointer-events-none fixed z-[2147483645]",
|
|
@@ -23847,12 +24485,12 @@ function OhhwellsBridge() {
|
|
|
23847
24485
|
top: toolbar ? toolbar.bottom + 6 : formPickRect.top + 16,
|
|
23848
24486
|
left: toolbar ? toolbar.left : formPickRect.left + 24
|
|
23849
24487
|
},
|
|
23850
|
-
children: /* @__PURE__ */
|
|
24488
|
+
children: /* @__PURE__ */ jsx34(FieldTypePicker, { onPick: handleAddField })
|
|
23851
24489
|
}
|
|
23852
24490
|
);
|
|
23853
24491
|
})() : null,
|
|
23854
|
-
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */
|
|
23855
|
-
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */
|
|
24492
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ jsx34(NavbarContainerChrome, { rect: toolbarRect, onAdd: handleAddTopLevelNavItem }),
|
|
24493
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ jsx34(
|
|
23856
24494
|
FooterContainerChrome,
|
|
23857
24495
|
{
|
|
23858
24496
|
rect: toolbarRect,
|
|
@@ -23860,7 +24498,7 @@ function OhhwellsBridge() {
|
|
|
23860
24498
|
addDisabled: !canAddFooterColumn()
|
|
23861
24499
|
}
|
|
23862
24500
|
),
|
|
23863
|
-
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */
|
|
24501
|
+
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */ jsx34(
|
|
23864
24502
|
ItemInteractionLayer,
|
|
23865
24503
|
{
|
|
23866
24504
|
rect: isItemDragging && draggedItemRect && (footerDragRef.current?.wasSelected || navDragRef.current?.wasSelected) ? draggedItemRect : toolbarRect,
|
|
@@ -23876,7 +24514,7 @@ function OhhwellsBridge() {
|
|
|
23876
24514
|
onItemPointerDown: toolbarVariant === "logo" ? void 0 : handleItemChromePointerDown,
|
|
23877
24515
|
onItemClick: toolbarVariant === "logo" ? void 0 : handleItemChromeClick,
|
|
23878
24516
|
itemDragSurface: toolbarVariant !== "logo" && !isFooterFrameSelection && !selectedIsSocialsRow,
|
|
23879
|
-
toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */
|
|
24517
|
+
toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */ jsx34(
|
|
23880
24518
|
ItemActionToolbar,
|
|
23881
24519
|
{
|
|
23882
24520
|
onEditLink: openLinkPopoverForSelected,
|
|
@@ -23920,8 +24558,8 @@ function OhhwellsBridge() {
|
|
|
23920
24558
|
) : void 0
|
|
23921
24559
|
}
|
|
23922
24560
|
),
|
|
23923
|
-
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && !isRectOutsideClip(toolbarRect, getIframeVisibleClip(parentScrollRef.current)) && /* @__PURE__ */
|
|
23924
|
-
/* @__PURE__ */
|
|
24561
|
+
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && !isRectOutsideClip(toolbarRect, getIframeVisibleClip(parentScrollRef.current)) && /* @__PURE__ */ jsxs21(Fragment9, { children: [
|
|
24562
|
+
/* @__PURE__ */ jsx34(
|
|
23925
24563
|
EditGlowChrome,
|
|
23926
24564
|
{
|
|
23927
24565
|
rect: toolbarRect,
|
|
@@ -23931,7 +24569,7 @@ function OhhwellsBridge() {
|
|
|
23931
24569
|
hideHandle: isItemDragging
|
|
23932
24570
|
}
|
|
23933
24571
|
),
|
|
23934
|
-
/* @__PURE__ */
|
|
24572
|
+
/* @__PURE__ */ jsx34(
|
|
23935
24573
|
FloatingToolbar,
|
|
23936
24574
|
{
|
|
23937
24575
|
rect: toolbarRect,
|
|
@@ -23944,7 +24582,7 @@ function OhhwellsBridge() {
|
|
|
23944
24582
|
}
|
|
23945
24583
|
)
|
|
23946
24584
|
] }),
|
|
23947
|
-
maxBadge && /* @__PURE__ */
|
|
24585
|
+
maxBadge && /* @__PURE__ */ jsxs21(
|
|
23948
24586
|
"div",
|
|
23949
24587
|
{
|
|
23950
24588
|
"data-ohw-max-badge": "",
|
|
@@ -23970,7 +24608,7 @@ function OhhwellsBridge() {
|
|
|
23970
24608
|
]
|
|
23971
24609
|
}
|
|
23972
24610
|
),
|
|
23973
|
-
toggleState && !linkPopover && /* @__PURE__ */
|
|
24611
|
+
toggleState && !linkPopover && /* @__PURE__ */ jsx34(
|
|
23974
24612
|
StateToggle,
|
|
23975
24613
|
{
|
|
23976
24614
|
rect: toggleState.rect,
|
|
@@ -23979,15 +24617,15 @@ function OhhwellsBridge() {
|
|
|
23979
24617
|
onStateChange: handleStateChange
|
|
23980
24618
|
}
|
|
23981
24619
|
),
|
|
23982
|
-
sectionGap && !linkPopover && /* @__PURE__ */
|
|
24620
|
+
sectionGap && !linkPopover && /* @__PURE__ */ jsxs21(
|
|
23983
24621
|
"div",
|
|
23984
24622
|
{
|
|
23985
24623
|
"data-ohw-section-insert-line": "",
|
|
23986
24624
|
className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
|
|
23987
24625
|
style: { top: sectionGap.y, transform: "translateY(-50%)" },
|
|
23988
24626
|
children: [
|
|
23989
|
-
/* @__PURE__ */
|
|
23990
|
-
/* @__PURE__ */
|
|
24627
|
+
/* @__PURE__ */ jsx34("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } }),
|
|
24628
|
+
/* @__PURE__ */ jsx34(
|
|
23991
24629
|
Badge,
|
|
23992
24630
|
{
|
|
23993
24631
|
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",
|
|
@@ -24004,11 +24642,11 @@ function OhhwellsBridge() {
|
|
|
24004
24642
|
children: "Add Section"
|
|
24005
24643
|
}
|
|
24006
24644
|
),
|
|
24007
|
-
/* @__PURE__ */
|
|
24645
|
+
/* @__PURE__ */ jsx34("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } })
|
|
24008
24646
|
]
|
|
24009
24647
|
}
|
|
24010
24648
|
),
|
|
24011
|
-
linkPopover && dialogPortalContainer ? /* @__PURE__ */
|
|
24649
|
+
linkPopover && dialogPortalContainer ? /* @__PURE__ */ jsx34(
|
|
24012
24650
|
LinkPopover,
|
|
24013
24651
|
{
|
|
24014
24652
|
panelRef: linkPopoverPanelRef,
|
|
@@ -24025,7 +24663,7 @@ function OhhwellsBridge() {
|
|
|
24025
24663
|
},
|
|
24026
24664
|
linkPopover.key
|
|
24027
24665
|
) : null,
|
|
24028
|
-
floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */
|
|
24666
|
+
floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */ jsx34(
|
|
24029
24667
|
FloatingPanel,
|
|
24030
24668
|
{
|
|
24031
24669
|
open: true,
|
|
@@ -24035,7 +24673,7 @@ function OhhwellsBridge() {
|
|
|
24035
24673
|
onPositionChange: setFloatingPanelPos,
|
|
24036
24674
|
parentScroll: parentScrollSnap ?? parentScrollRef.current,
|
|
24037
24675
|
onClose: closeFloatingPanelOnly,
|
|
24038
|
-
children: /* @__PURE__ */
|
|
24676
|
+
children: /* @__PURE__ */ jsx34(
|
|
24039
24677
|
SocialsDisplayPanel,
|
|
24040
24678
|
{
|
|
24041
24679
|
display: socialsDisplayFor(floatingPanel.row, editContentRef.current),
|