@ohhwells/bridge 0.1.117 → 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 +1321 -646
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1294 -619
- 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,25 +18167,43 @@ 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
|
);
|
|
17553
18175
|
}
|
|
17554
|
-
var OHW_LOADER_PREHYDRATE_SCRIPT = `(function(){try{var p=location.hostname.split(".");var fromHost=
|
|
18176
|
+
var OHW_LOADER_PREHYDRATE_SCRIPT = `(function(){try{var fromGlobal=typeof window!=="undefined"&&window.__OHW_SUBDOMAIN__?String(window.__OHW_SUBDOMAIN__):"";var p=location.hostname.split(".");var fromHost=location.hostname.endsWith(".ohhwells.site")&&p[0]&&p[0]!=="www"?p[0]:"";var fromQuery=new URLSearchParams(location.search).get("subdomain")||"";var fromCookie=(document.cookie.match(/(?:^|; )ohw-subdomain=([^;]*)/)||[])[1];fromCookie=fromCookie?decodeURIComponent(fromCookie):"";if(!fromGlobal&&!fromHost&&!fromQuery&&!fromCookie)return;var e=document.getElementById("ohw-loader");if(e)e.style.display="flex"}catch(e){}})();`;
|
|
18177
|
+
function subdomainFromCookie() {
|
|
18178
|
+
if (typeof document === "undefined") return "";
|
|
18179
|
+
const match = document.cookie.match(/(?:^|; )ohw-subdomain=([^;]*)/);
|
|
18180
|
+
return match ? decodeURIComponent(match[1]) : "";
|
|
18181
|
+
}
|
|
17555
18182
|
function resolveSubdomain(subdomainFromQuery) {
|
|
18183
|
+
if (typeof window !== "undefined") {
|
|
18184
|
+
const fromGlobal = window.__OHW_SUBDOMAIN__;
|
|
18185
|
+
if (fromGlobal) return fromGlobal;
|
|
18186
|
+
}
|
|
17556
18187
|
if (subdomainFromQuery) return subdomainFromQuery;
|
|
17557
18188
|
if (typeof window !== "undefined") {
|
|
17558
|
-
const
|
|
17559
|
-
if (
|
|
18189
|
+
const host = window.location.hostname.toLowerCase();
|
|
18190
|
+
if (host.endsWith(".ohhwells.site")) {
|
|
18191
|
+
const label = host.slice(0, -".ohhwells.site".length).split(".").pop();
|
|
18192
|
+
if (label && label !== "www") return label;
|
|
18193
|
+
}
|
|
18194
|
+
const fromCookie = subdomainFromCookie();
|
|
18195
|
+
if (fromCookie) return fromCookie;
|
|
18196
|
+
const isPlatformHost = host.endsWith(".ohhwells.site") || host === "localhost" || host.endsWith(".localhost") || host.endsWith(".vercel.app");
|
|
18197
|
+
if (!isPlatformHost) return "";
|
|
17560
18198
|
}
|
|
17561
18199
|
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL;
|
|
17562
18200
|
if (siteUrl) {
|
|
17563
18201
|
try {
|
|
17564
18202
|
const host = new URL(siteUrl).hostname;
|
|
17565
|
-
|
|
17566
|
-
|
|
18203
|
+
if (host.endsWith(".ohhwells.site")) {
|
|
18204
|
+
const label = host.slice(0, -".ohhwells.site".length).split(".").pop();
|
|
18205
|
+
if (label && label !== "www") return label;
|
|
18206
|
+
}
|
|
17567
18207
|
} catch {
|
|
17568
18208
|
}
|
|
17569
18209
|
}
|
|
@@ -17574,8 +18214,8 @@ function OhhwellsBridge() {
|
|
|
17574
18214
|
const router = useRouter3();
|
|
17575
18215
|
const searchParams = useSearchParams();
|
|
17576
18216
|
const isEditMode = isEditSessionActive();
|
|
17577
|
-
const [bridgeRoot, setBridgeRoot] =
|
|
17578
|
-
|
|
18217
|
+
const [bridgeRoot, setBridgeRoot] = useState15(null);
|
|
18218
|
+
useEffect14(() => {
|
|
17579
18219
|
const figtreeFontId = "ohw-figtree-font";
|
|
17580
18220
|
if (!document.getElementById(figtreeFontId)) {
|
|
17581
18221
|
const preconnect1 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.googleapis.com" });
|
|
@@ -17601,48 +18241,67 @@ function OhhwellsBridge() {
|
|
|
17601
18241
|
};
|
|
17602
18242
|
}, []);
|
|
17603
18243
|
const subdomainFromQuery = searchParams.get("subdomain");
|
|
17604
|
-
const subdomain = resolveSubdomain(subdomainFromQuery);
|
|
18244
|
+
const [subdomain, setSubdomain] = useState15(() => resolveSubdomain(subdomainFromQuery));
|
|
18245
|
+
useLayoutEffect5(() => {
|
|
18246
|
+
const next = resolveSubdomain(subdomainFromQuery);
|
|
18247
|
+
if (next !== subdomain) setSubdomain(next);
|
|
18248
|
+
if (next) return;
|
|
18249
|
+
const host = window.location.hostname.toLowerCase();
|
|
18250
|
+
if (host.endsWith(".ohhwells.site")) return;
|
|
18251
|
+
const t = window.setTimeout(() => {
|
|
18252
|
+
const retry = resolveSubdomain(subdomainFromQuery);
|
|
18253
|
+
if (retry) setSubdomain(retry);
|
|
18254
|
+
}, 0);
|
|
18255
|
+
return () => window.clearTimeout(t);
|
|
18256
|
+
}, [subdomainFromQuery, subdomain]);
|
|
18257
|
+
useEffect14(() => {
|
|
18258
|
+
if (!subdomainFromQuery || typeof window === "undefined") return;
|
|
18259
|
+
const url = new URL(window.location.href);
|
|
18260
|
+
if (!url.searchParams.has("subdomain")) return;
|
|
18261
|
+
url.searchParams.delete("subdomain");
|
|
18262
|
+
window.history.replaceState(null, "", url.pathname + url.search + url.hash);
|
|
18263
|
+
}, [subdomainFromQuery]);
|
|
17605
18264
|
useLinkHrefGuardian(pathname, subdomain, isEditMode);
|
|
17606
18265
|
useSavedLinkNavigation(isEditMode);
|
|
17607
|
-
const postToParent2 =
|
|
18266
|
+
const postToParent2 = useCallback9((data) => {
|
|
17608
18267
|
if (typeof window !== "undefined" && window.parent !== window) {
|
|
17609
18268
|
window.parent.postMessage(data, "*");
|
|
17610
18269
|
}
|
|
17611
18270
|
}, []);
|
|
17612
|
-
const [fetchState, setFetchState] =
|
|
17613
|
-
const [showBranding, setShowBranding] =
|
|
17614
|
-
const autoSaveTimers =
|
|
17615
|
-
const activeElRef =
|
|
17616
|
-
const pointerHeldRef =
|
|
17617
|
-
const selectedElRef =
|
|
17618
|
-
const selectedHrefKeyRef =
|
|
17619
|
-
const selectedFooterColAttrRef =
|
|
17620
|
-
const originalContentRef =
|
|
17621
|
-
const activeStateElRef =
|
|
17622
|
-
const parentScrollRef =
|
|
17623
|
-
const visibleViewportRef =
|
|
17624
|
-
const [dialogPortalContainer, setDialogPortalContainer] =
|
|
17625
|
-
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) => {
|
|
17626
18285
|
visibleViewportRef.current = node;
|
|
17627
18286
|
setDialogPortalContainer(node);
|
|
17628
18287
|
if (node) applyVisibleViewport(node, parentScrollRef.current);
|
|
17629
18288
|
}, []);
|
|
17630
|
-
const toolbarElRef =
|
|
17631
|
-
const glowElRef =
|
|
17632
|
-
const hoveredImageRef =
|
|
17633
|
-
const hoveredImageHasTextOverlapRef =
|
|
17634
|
-
const dragOverElRef =
|
|
17635
|
-
const [mediaHover, setMediaHover] =
|
|
17636
|
-
const [selectedAiSectionId, setSelectedAiSectionId] =
|
|
17637
|
-
const selectedAiSectionIdRef =
|
|
17638
|
-
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) => {
|
|
17639
18298
|
selectedAiSectionIdRef.current = id;
|
|
17640
18299
|
setSelectedAiSectionId(id);
|
|
17641
18300
|
}, []);
|
|
17642
|
-
const [selectedMedia, setSelectedMedia] =
|
|
17643
|
-
const selectedMediaElRef =
|
|
17644
|
-
const mediaKeyDropTokenRef =
|
|
17645
|
-
const clearMediaSelection =
|
|
18301
|
+
const [selectedMedia, setSelectedMedia] = useState15(null);
|
|
18302
|
+
const selectedMediaElRef = useRef11(null);
|
|
18303
|
+
const mediaKeyDropTokenRef = useRef11(0);
|
|
18304
|
+
const clearMediaSelection = useCallback9(() => {
|
|
17646
18305
|
const prev = selectedMediaElRef.current;
|
|
17647
18306
|
selectedMediaElRef.current = null;
|
|
17648
18307
|
setSelectedMedia(null);
|
|
@@ -17667,9 +18326,9 @@ function OhhwellsBridge() {
|
|
|
17667
18326
|
window.postMessage({ type: "ow:media-key-drop", token }, "*");
|
|
17668
18327
|
}
|
|
17669
18328
|
}, []);
|
|
17670
|
-
const clearMediaSelectionRef =
|
|
18329
|
+
const clearMediaSelectionRef = useRef11(clearMediaSelection);
|
|
17671
18330
|
clearMediaSelectionRef.current = clearMediaSelection;
|
|
17672
|
-
const selectMediaElement =
|
|
18331
|
+
const selectMediaElement = useCallback9((el) => {
|
|
17673
18332
|
const r2 = el.getBoundingClientRect();
|
|
17674
18333
|
const video = el.dataset.ohwEditable === "video" ? el.querySelector("video") : null;
|
|
17675
18334
|
selectedMediaElRef.current = el;
|
|
@@ -17693,9 +18352,9 @@ function OhhwellsBridge() {
|
|
|
17693
18352
|
keyLabel: el.dataset.ohwEditable === "video" ? "Video" : el.dataset.ohwEditable === "bg-image" ? "Background" : "Image"
|
|
17694
18353
|
});
|
|
17695
18354
|
}, []);
|
|
17696
|
-
const selectMediaElementRef =
|
|
18355
|
+
const selectMediaElementRef = useRef11(selectMediaElement);
|
|
17697
18356
|
selectMediaElementRef.current = selectMediaElement;
|
|
17698
|
-
|
|
18357
|
+
useEffect14(() => {
|
|
17699
18358
|
if (!selectedMedia) return;
|
|
17700
18359
|
const update = () => {
|
|
17701
18360
|
const el = selectedMediaElRef.current;
|
|
@@ -17715,54 +18374,55 @@ function OhhwellsBridge() {
|
|
|
17715
18374
|
window.removeEventListener("resize", update);
|
|
17716
18375
|
};
|
|
17717
18376
|
}, [selectedMedia !== null]);
|
|
17718
|
-
const [carouselHover, setCarouselHover] =
|
|
17719
|
-
const [uploadingRects, setUploadingRects] =
|
|
17720
|
-
const hoveredGapRef =
|
|
17721
|
-
const imageUnhoverTimerRef =
|
|
17722
|
-
const imageShowTimerRef =
|
|
17723
|
-
const editStylesRef =
|
|
17724
|
-
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(() => {
|
|
17725
18384
|
});
|
|
17726
|
-
const deactivateRef =
|
|
18385
|
+
const deactivateRef = useRef11(() => {
|
|
17727
18386
|
});
|
|
17728
|
-
const selectRef =
|
|
18387
|
+
const selectRef = useRef11(() => {
|
|
17729
18388
|
});
|
|
17730
|
-
const selectFrameRef =
|
|
18389
|
+
const selectFrameRef = useRef11(() => {
|
|
17731
18390
|
});
|
|
17732
|
-
const selectLogoRef =
|
|
18391
|
+
const selectLogoRef = useRef11(() => {
|
|
17733
18392
|
});
|
|
17734
|
-
const openLogoSizePanelRef =
|
|
18393
|
+
const openLogoSizePanelRef = useRef11(() => {
|
|
17735
18394
|
});
|
|
17736
|
-
const deselectRef =
|
|
18395
|
+
const deselectRef = useRef11(() => {
|
|
17737
18396
|
});
|
|
17738
|
-
const closeFloatingPanelOnlyRef =
|
|
18397
|
+
const closeFloatingPanelOnlyRef = useRef11(() => {
|
|
17739
18398
|
});
|
|
17740
|
-
const reselectNavigationItemRef =
|
|
18399
|
+
const reselectNavigationItemRef = useRef11(() => {
|
|
17741
18400
|
});
|
|
17742
|
-
const commitNavigationTextEditRef =
|
|
18401
|
+
const commitNavigationTextEditRef = useRef11(() => {
|
|
17743
18402
|
});
|
|
17744
|
-
const handleDeleteSelectedRef =
|
|
17745
|
-
const runPendingDeleteUndoRef =
|
|
17746
|
-
const isFooterFrameSelectionRef =
|
|
17747
|
-
const refreshActiveCommandsRef =
|
|
18403
|
+
const handleDeleteSelectedRef = useRef11(() => false);
|
|
18404
|
+
const runPendingDeleteUndoRef = useRef11(() => false);
|
|
18405
|
+
const isFooterFrameSelectionRef = useRef11(false);
|
|
18406
|
+
const refreshActiveCommandsRef = useRef11(() => {
|
|
17748
18407
|
});
|
|
17749
|
-
const postToParentRef =
|
|
18408
|
+
const postToParentRef = useRef11(postToParent2);
|
|
17750
18409
|
postToParentRef.current = postToParent2;
|
|
17751
|
-
const aiSectionApiRef =
|
|
17752
|
-
const
|
|
17753
|
-
const
|
|
17754
|
-
const
|
|
17755
|
-
const [
|
|
17756
|
-
const
|
|
17757
|
-
const
|
|
17758
|
-
const [
|
|
17759
|
-
const [
|
|
17760
|
-
const
|
|
17761
|
-
const
|
|
17762
|
-
const
|
|
17763
|
-
const
|
|
17764
|
-
const [
|
|
17765
|
-
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(() => {
|
|
17766
18426
|
const form = formPickElRef.current;
|
|
17767
18427
|
const editing = fieldPickElRef.current;
|
|
17768
18428
|
if (commitPlaceholderEdit(editing) && editing) {
|
|
@@ -17782,7 +18442,7 @@ function OhhwellsBridge() {
|
|
|
17782
18442
|
formPickElRef.current = null;
|
|
17783
18443
|
setFormPickRect(null);
|
|
17784
18444
|
}, []);
|
|
17785
|
-
const clearFieldPick =
|
|
18445
|
+
const clearFieldPick = useCallback9(() => {
|
|
17786
18446
|
const wrapper = fieldPickElRef.current;
|
|
17787
18447
|
if (commitPlaceholderEdit(wrapper) && wrapper) {
|
|
17788
18448
|
const form = wrapper.closest('[data-ohw-editable="form"]');
|
|
@@ -17792,9 +18452,9 @@ function OhhwellsBridge() {
|
|
|
17792
18452
|
setFieldPickRect(null);
|
|
17793
18453
|
setFieldPickState(null);
|
|
17794
18454
|
}, []);
|
|
17795
|
-
const persistFieldsRef =
|
|
18455
|
+
const persistFieldsRef = useRef11(() => {
|
|
17796
18456
|
});
|
|
17797
|
-
const persistFields =
|
|
18457
|
+
const persistFields = useCallback9(
|
|
17798
18458
|
(form) => {
|
|
17799
18459
|
const key = formKeyOf(form);
|
|
17800
18460
|
if (!key) return;
|
|
@@ -17805,7 +18465,7 @@ function OhhwellsBridge() {
|
|
|
17805
18465
|
[]
|
|
17806
18466
|
);
|
|
17807
18467
|
persistFieldsRef.current = persistFields;
|
|
17808
|
-
const selectField =
|
|
18468
|
+
const selectField = useCallback9((wrapper) => {
|
|
17809
18469
|
if (fieldPickElRef.current && fieldPickElRef.current !== wrapper) {
|
|
17810
18470
|
commitPlaceholderEdit(fieldPickElRef.current);
|
|
17811
18471
|
}
|
|
@@ -17818,7 +18478,7 @@ function OhhwellsBridge() {
|
|
|
17818
18478
|
setFieldPickState({ type: fieldTypeOf(wrapper), required: isFieldRequired(wrapper) });
|
|
17819
18479
|
setFieldTypePickerOpen(false);
|
|
17820
18480
|
}, []);
|
|
17821
|
-
const withSelectedField =
|
|
18481
|
+
const withSelectedField = useCallback9(
|
|
17822
18482
|
(run) => {
|
|
17823
18483
|
const wrapper = fieldPickElRef.current;
|
|
17824
18484
|
const form = formPickElRef.current;
|
|
@@ -17831,28 +18491,28 @@ function OhhwellsBridge() {
|
|
|
17831
18491
|
},
|
|
17832
18492
|
[persistFields]
|
|
17833
18493
|
);
|
|
17834
|
-
const handleFieldTypeChange =
|
|
18494
|
+
const handleFieldTypeChange = useCallback9(
|
|
17835
18495
|
(type) => withSelectedField((_form, wrapper) => {
|
|
17836
18496
|
applyFieldType(wrapper, type);
|
|
17837
18497
|
selectField(wrapper);
|
|
17838
18498
|
}),
|
|
17839
18499
|
[selectField, withSelectedField]
|
|
17840
18500
|
);
|
|
17841
|
-
const handleFieldRequiredToggle =
|
|
18501
|
+
const handleFieldRequiredToggle = useCallback9(
|
|
17842
18502
|
() => withSelectedField((_form, wrapper) => {
|
|
17843
18503
|
setFieldRequired(wrapper, !isFieldRequired(wrapper));
|
|
17844
18504
|
selectField(wrapper);
|
|
17845
18505
|
}),
|
|
17846
18506
|
[selectField, withSelectedField]
|
|
17847
18507
|
);
|
|
17848
|
-
const handleFieldDuplicate =
|
|
18508
|
+
const handleFieldDuplicate = useCallback9(
|
|
17849
18509
|
() => withSelectedField((form, wrapper) => {
|
|
17850
18510
|
const copy = duplicateField(form, wrapper);
|
|
17851
18511
|
selectField(copy);
|
|
17852
18512
|
}),
|
|
17853
18513
|
[selectField, withSelectedField]
|
|
17854
18514
|
);
|
|
17855
|
-
const handleFieldDelete =
|
|
18515
|
+
const handleFieldDelete = useCallback9(
|
|
17856
18516
|
() => withSelectedField((_form, wrapper) => {
|
|
17857
18517
|
removeField(wrapper);
|
|
17858
18518
|
clearFieldPick();
|
|
@@ -17860,7 +18520,7 @@ function OhhwellsBridge() {
|
|
|
17860
18520
|
}),
|
|
17861
18521
|
[clearFieldPick, withSelectedField]
|
|
17862
18522
|
);
|
|
17863
|
-
const handleAddField =
|
|
18523
|
+
const handleAddField = useCallback9(
|
|
17864
18524
|
(type) => {
|
|
17865
18525
|
const form = formPickElRef.current;
|
|
17866
18526
|
if (!form) return;
|
|
@@ -17876,8 +18536,8 @@ function OhhwellsBridge() {
|
|
|
17876
18536
|
},
|
|
17877
18537
|
[persistFields, selectField]
|
|
17878
18538
|
);
|
|
17879
|
-
const fieldDragRef =
|
|
17880
|
-
const buildFieldDropSlots =
|
|
18539
|
+
const fieldDragRef = useRef11(null);
|
|
18540
|
+
const buildFieldDropSlots = useCallback9((form, draggedKey) => {
|
|
17881
18541
|
const others = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== draggedKey);
|
|
17882
18542
|
const slots = others.map((el) => {
|
|
17883
18543
|
const rect = el.getBoundingClientRect();
|
|
@@ -17890,7 +18550,7 @@ function OhhwellsBridge() {
|
|
|
17890
18550
|
}
|
|
17891
18551
|
return slots;
|
|
17892
18552
|
}, []);
|
|
17893
|
-
const handleFieldDragStart =
|
|
18553
|
+
const handleFieldDragStart = useCallback9(() => {
|
|
17894
18554
|
const wrapper = fieldPickElRef.current;
|
|
17895
18555
|
const form = formPickElRef.current;
|
|
17896
18556
|
if (!wrapper || !form) return;
|
|
@@ -17899,18 +18559,18 @@ function OhhwellsBridge() {
|
|
|
17899
18559
|
setFieldDragging(true);
|
|
17900
18560
|
setFieldDropSlots(buildFieldDropSlots(form, key));
|
|
17901
18561
|
}, [buildFieldDropSlots]);
|
|
17902
|
-
const handleFieldDragEnd =
|
|
18562
|
+
const handleFieldDragEnd = useCallback9(() => {
|
|
17903
18563
|
fieldDragRef.current = null;
|
|
17904
18564
|
setFieldDropIndex(null);
|
|
17905
18565
|
setFieldDropSlots([]);
|
|
17906
18566
|
setFieldDragging(false);
|
|
17907
18567
|
}, []);
|
|
17908
|
-
const [fieldDropIndex, setFieldDropIndex] =
|
|
17909
|
-
const [fieldDropSlots, setFieldDropSlots] =
|
|
17910
|
-
const [fieldDragging, setFieldDragging] =
|
|
17911
|
-
const clearFormPickRef =
|
|
18568
|
+
const [fieldDropIndex, setFieldDropIndex] = useState15(null);
|
|
18569
|
+
const [fieldDropSlots, setFieldDropSlots] = useState15([]);
|
|
18570
|
+
const [fieldDragging, setFieldDragging] = useState15(false);
|
|
18571
|
+
const clearFormPickRef = useRef11(clearFormPick);
|
|
17912
18572
|
clearFormPickRef.current = clearFormPick;
|
|
17913
|
-
|
|
18573
|
+
useEffect14(() => {
|
|
17914
18574
|
const el = fieldPickElRef.current;
|
|
17915
18575
|
if (!el || fieldPickRect === null) return;
|
|
17916
18576
|
const observer = new ResizeObserver(() => {
|
|
@@ -17919,7 +18579,7 @@ function OhhwellsBridge() {
|
|
|
17919
18579
|
observer.observe(el);
|
|
17920
18580
|
return () => observer.disconnect();
|
|
17921
18581
|
}, [fieldPickRect !== null, fieldPickState]);
|
|
17922
|
-
|
|
18582
|
+
useEffect14(() => {
|
|
17923
18583
|
const el = formPickElRef.current;
|
|
17924
18584
|
if (!el || formPickRect === null) return;
|
|
17925
18585
|
const observer = new ResizeObserver(() => {
|
|
@@ -17928,25 +18588,25 @@ function OhhwellsBridge() {
|
|
|
17928
18588
|
observer.observe(el);
|
|
17929
18589
|
return () => observer.disconnect();
|
|
17930
18590
|
}, [formPickRect !== null, formViewState]);
|
|
17931
|
-
const [toolbarVariant, setToolbarVariant] =
|
|
17932
|
-
const toolbarVariantRef =
|
|
18591
|
+
const [toolbarVariant, setToolbarVariant] = useState15("none");
|
|
18592
|
+
const toolbarVariantRef = useRef11("none");
|
|
17933
18593
|
toolbarVariantRef.current = toolbarVariant;
|
|
17934
|
-
const [selectedIsCta, setSelectedIsCta] =
|
|
17935
|
-
const [selectedIsSocial, setSelectedIsSocial] =
|
|
17936
|
-
const [selectedIsSocialsRow, setSelectedIsSocialsRow] =
|
|
17937
|
-
const [reorderHrefKey, setReorderHrefKey] =
|
|
17938
|
-
const [reorderDragDisabled, setReorderDragDisabled] =
|
|
17939
|
-
const [toggleState, setToggleState] =
|
|
17940
|
-
const [maxBadge, setMaxBadge] =
|
|
17941
|
-
const [activeCommands, setActiveCommands] =
|
|
17942
|
-
const [sectionGap, setSectionGap] =
|
|
17943
|
-
const [toolbarShowEditLink, setToolbarShowEditLink] =
|
|
17944
|
-
const hoveredNavContainerRef =
|
|
17945
|
-
const [hoveredNavContainerRect, setHoveredNavContainerRect] =
|
|
17946
|
-
const hoveredItemElRef =
|
|
17947
|
-
const [hoveredItemRect, setHoveredItemRect] =
|
|
17948
|
-
const [hoveredTextRect, setHoveredTextRect] =
|
|
17949
|
-
|
|
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(() => {
|
|
17950
18610
|
const sync = () => {
|
|
17951
18611
|
const el = document.querySelector(
|
|
17952
18612
|
'[data-ohw-hovered]:not([contenteditable]):not([data-ohw-href-key]):not([data-ohw-editable="form"] *)'
|
|
@@ -17990,44 +18650,44 @@ function OhhwellsBridge() {
|
|
|
17990
18650
|
});
|
|
17991
18651
|
return () => observer.disconnect();
|
|
17992
18652
|
}, []);
|
|
17993
|
-
const siblingHintElRef =
|
|
17994
|
-
const [siblingHintRect, setSiblingHintRect] =
|
|
17995
|
-
const [siblingHintRects, setSiblingHintRects] =
|
|
17996
|
-
const [isItemDragging, setIsItemDragging] =
|
|
17997
|
-
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);
|
|
17998
18658
|
isFooterFrameSelectionRef.current = isFooterFrameSelection;
|
|
17999
|
-
const [floatingPanel, setFloatingPanel] =
|
|
18000
|
-
const floatingPanelOpenRef =
|
|
18659
|
+
const [floatingPanel, setFloatingPanel] = useState15(null);
|
|
18660
|
+
const floatingPanelOpenRef = useRef11(false);
|
|
18001
18661
|
floatingPanelOpenRef.current = floatingPanel !== null;
|
|
18002
|
-
const [floatingPanelPos, setFloatingPanelPos] =
|
|
18003
|
-
const [logoSizeDraft, setLogoSizeDraft] =
|
|
18004
|
-
const [editorViewport, setEditorViewport] =
|
|
18005
|
-
const [parentScrollSnap, setParentScrollSnap] =
|
|
18006
|
-
const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] =
|
|
18007
|
-
const [footerHeadingVisible, setFooterHeadingVisible] =
|
|
18008
|
-
const footerDragRef =
|
|
18009
|
-
const [footerDropSlots, setFooterDropSlots] =
|
|
18010
|
-
const [activeFooterDropIndex, setActiveFooterDropIndex] =
|
|
18011
|
-
const [draggedItemRect, setDraggedItemRect] =
|
|
18012
|
-
const footerPointerDragRef =
|
|
18013
|
-
const suppressNextClickRef =
|
|
18014
|
-
const suppressClickUntilRef =
|
|
18015
|
-
const [linkPopover, setLinkPopover] =
|
|
18016
|
-
const linkPopoverSessionRef =
|
|
18017
|
-
const addNavAfterAnchorRef =
|
|
18018
|
-
const editContentRef =
|
|
18019
|
-
const aiSectionsRef =
|
|
18020
|
-
const brandKitRef =
|
|
18021
|
-
const stylesRef =
|
|
18022
|
-
const appliedDrawerRef =
|
|
18023
|
-
const pendingDeleteUndoRef =
|
|
18024
|
-
const [sitePages, setSitePages] =
|
|
18025
|
-
const [sectionsByPath, setSectionsByPath] =
|
|
18026
|
-
const sectionsPrefetchGenRef =
|
|
18027
|
-
const setLinkPopoverRef =
|
|
18028
|
-
const linkPopoverPanelRef =
|
|
18029
|
-
const linkPopoverOpenRef =
|
|
18030
|
-
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);
|
|
18031
18691
|
setLinkPopoverRef.current = setLinkPopover;
|
|
18032
18692
|
linkPopoverSessionRef.current = linkPopover;
|
|
18033
18693
|
const {
|
|
@@ -18076,7 +18736,7 @@ function OhhwellsBridge() {
|
|
|
18076
18736
|
const bumpLinkPopoverGrace = () => {
|
|
18077
18737
|
linkPopoverGraceUntilRef.current = Date.now() + 350;
|
|
18078
18738
|
};
|
|
18079
|
-
const runSectionsPrefetch =
|
|
18739
|
+
const runSectionsPrefetch = useCallback9((pages) => {
|
|
18080
18740
|
if (!isEditMode || shouldUseDevFixtures() || pages.length === 0) return;
|
|
18081
18741
|
const gen = ++sectionsPrefetchGenRef.current;
|
|
18082
18742
|
const paths = pages.map((p) => p.path);
|
|
@@ -18095,9 +18755,9 @@ function OhhwellsBridge() {
|
|
|
18095
18755
|
);
|
|
18096
18756
|
});
|
|
18097
18757
|
}, [isEditMode, pathname]);
|
|
18098
|
-
const runSectionsPrefetchRef =
|
|
18758
|
+
const runSectionsPrefetchRef = useRef11(runSectionsPrefetch);
|
|
18099
18759
|
runSectionsPrefetchRef.current = runSectionsPrefetch;
|
|
18100
|
-
|
|
18760
|
+
useEffect14(() => {
|
|
18101
18761
|
if (!linkPopover) {
|
|
18102
18762
|
document.documentElement.removeAttribute("data-ohw-link-popover-open");
|
|
18103
18763
|
return;
|
|
@@ -18125,7 +18785,7 @@ function OhhwellsBridge() {
|
|
|
18125
18785
|
document.documentElement.removeAttribute("data-ohw-link-popover-open");
|
|
18126
18786
|
};
|
|
18127
18787
|
}, [linkPopover, postToParent2]);
|
|
18128
|
-
|
|
18788
|
+
useEffect14(() => {
|
|
18129
18789
|
if (!isEditMode) return;
|
|
18130
18790
|
const useFixtures = shouldUseDevFixtures();
|
|
18131
18791
|
if (useFixtures) {
|
|
@@ -18149,14 +18809,14 @@ function OhhwellsBridge() {
|
|
|
18149
18809
|
if (!useFixtures) postToParent2({ type: "ow:request-site-pages" });
|
|
18150
18810
|
return () => window.removeEventListener("message", onSitePages);
|
|
18151
18811
|
}, [isEditMode, postToParent2]);
|
|
18152
|
-
|
|
18812
|
+
useEffect14(() => {
|
|
18153
18813
|
if (!isEditMode || shouldUseDevFixtures()) return;
|
|
18154
18814
|
void loadAllSectionsManifest().then((manifest) => {
|
|
18155
18815
|
if (Object.keys(manifest).length === 0) return;
|
|
18156
18816
|
setSectionsByPath((prev) => ({ ...manifest, ...prev }));
|
|
18157
18817
|
});
|
|
18158
18818
|
}, [isEditMode]);
|
|
18159
|
-
|
|
18819
|
+
useEffect14(() => {
|
|
18160
18820
|
const update = () => {
|
|
18161
18821
|
const el = activeElRef.current ?? selectedElRef.current;
|
|
18162
18822
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
@@ -18180,10 +18840,10 @@ function OhhwellsBridge() {
|
|
|
18180
18840
|
vvp.removeEventListener("resize", update);
|
|
18181
18841
|
};
|
|
18182
18842
|
}, []);
|
|
18183
|
-
const refreshStateRules =
|
|
18843
|
+
const refreshStateRules = useCallback9(() => {
|
|
18184
18844
|
editStylesRef.current?.forceHover && (editStylesRef.current.forceHover.textContent = collectStateRules());
|
|
18185
18845
|
}, []);
|
|
18186
|
-
const processConfigRequest =
|
|
18846
|
+
const processConfigRequest = useCallback9((insertAfterVal) => {
|
|
18187
18847
|
const tracker = getSectionsTracker();
|
|
18188
18848
|
let entries = [];
|
|
18189
18849
|
try {
|
|
@@ -18206,7 +18866,7 @@ function OhhwellsBridge() {
|
|
|
18206
18866
|
}
|
|
18207
18867
|
window.postMessage({ type: "ow:schedule-config", insertAfter: insertAfterVal, scheduleId: null }, "*");
|
|
18208
18868
|
}, [isEditMode]);
|
|
18209
|
-
const deactivate =
|
|
18869
|
+
const deactivate = useCallback9(() => {
|
|
18210
18870
|
const el = activeElRef.current;
|
|
18211
18871
|
if (!el) return;
|
|
18212
18872
|
const isFormBlock = el.dataset.ohwEditable === "form";
|
|
@@ -18257,12 +18917,12 @@ function OhhwellsBridge() {
|
|
|
18257
18917
|
setToolbarShowEditLink(false);
|
|
18258
18918
|
postToParent2({ type: "ow:exit-edit" });
|
|
18259
18919
|
}, [postToParent2]);
|
|
18260
|
-
const clearSelectedAttr =
|
|
18920
|
+
const clearSelectedAttr = useCallback9(() => {
|
|
18261
18921
|
document.querySelectorAll("[data-ohw-selected]").forEach((el) => {
|
|
18262
18922
|
el.removeAttribute("data-ohw-selected");
|
|
18263
18923
|
});
|
|
18264
18924
|
}, []);
|
|
18265
|
-
const deselect =
|
|
18925
|
+
const deselect = useCallback9(() => {
|
|
18266
18926
|
const nestedGroup = selectedElRef.current?.closest("[data-ohw-nav-children]") != null ? selectedElRef.current.closest("[data-ohw-nav-group]") : null;
|
|
18267
18927
|
clearSelectedAttr();
|
|
18268
18928
|
selectedElRef.current = null;
|
|
@@ -18296,20 +18956,20 @@ function OhhwellsBridge() {
|
|
|
18296
18956
|
setToolbarVariant("none");
|
|
18297
18957
|
}
|
|
18298
18958
|
}, [clearSelectedAttr]);
|
|
18299
|
-
const markSelected =
|
|
18959
|
+
const markSelected = useCallback9((el) => {
|
|
18300
18960
|
clearSelectedAttr();
|
|
18301
18961
|
el.removeAttribute("data-ohw-hovered");
|
|
18302
18962
|
el.setAttribute("data-ohw-selected", "");
|
|
18303
18963
|
}, [clearSelectedAttr]);
|
|
18304
|
-
const isSelectedForHover =
|
|
18964
|
+
const isSelectedForHover = useCallback9((el) => {
|
|
18305
18965
|
if (!el) return false;
|
|
18306
18966
|
return [selectedElRef.current, activeElRef.current].some(
|
|
18307
18967
|
(busy) => busy && (el === busy || busy.contains(el) || el.contains(busy))
|
|
18308
18968
|
);
|
|
18309
18969
|
}, []);
|
|
18310
|
-
const isSelectedForHoverRef =
|
|
18970
|
+
const isSelectedForHoverRef = useRef11(isSelectedForHover);
|
|
18311
18971
|
isSelectedForHoverRef.current = isSelectedForHover;
|
|
18312
|
-
const resolveHrefKeyElement =
|
|
18972
|
+
const resolveHrefKeyElement = useCallback9((hrefKey) => {
|
|
18313
18973
|
if (isFooterHrefKey(hrefKey)) {
|
|
18314
18974
|
return document.querySelector(
|
|
18315
18975
|
`footer [data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
@@ -18324,7 +18984,7 @@ function OhhwellsBridge() {
|
|
|
18324
18984
|
`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
18325
18985
|
);
|
|
18326
18986
|
}, []);
|
|
18327
|
-
const resyncSelectedNavigationItem =
|
|
18987
|
+
const resyncSelectedNavigationItem = useCallback9(() => {
|
|
18328
18988
|
const hrefKey = selectedHrefKeyRef.current;
|
|
18329
18989
|
if (hrefKey) {
|
|
18330
18990
|
const link = resolveHrefKeyElement(hrefKey);
|
|
@@ -18362,7 +19022,7 @@ function OhhwellsBridge() {
|
|
|
18362
19022
|
);
|
|
18363
19023
|
}
|
|
18364
19024
|
}, [resolveHrefKeyElement]);
|
|
18365
|
-
const reselectNavigationItem =
|
|
19025
|
+
const reselectNavigationItem = useCallback9((navAnchor) => {
|
|
18366
19026
|
selectedElRef.current = navAnchor;
|
|
18367
19027
|
selectedHrefKeyRef.current = navAnchor.getAttribute("data-ohw-href-key");
|
|
18368
19028
|
selectedFooterColAttrRef.current = null;
|
|
@@ -18393,7 +19053,7 @@ function OhhwellsBridge() {
|
|
|
18393
19053
|
setToolbarShowEditLink(false);
|
|
18394
19054
|
setActiveCommands(/* @__PURE__ */ new Set());
|
|
18395
19055
|
}, [markSelected]);
|
|
18396
|
-
const commitNavigationTextEdit =
|
|
19056
|
+
const commitNavigationTextEdit = useCallback9((navAnchor) => {
|
|
18397
19057
|
const el = activeElRef.current;
|
|
18398
19058
|
if (!el) return;
|
|
18399
19059
|
const key = el.dataset.ohwKey;
|
|
@@ -18426,7 +19086,7 @@ function OhhwellsBridge() {
|
|
|
18426
19086
|
postToParent2({ type: "ow:exit-edit" });
|
|
18427
19087
|
reselectNavigationItem(navAnchor);
|
|
18428
19088
|
}, [postToParent2, reselectNavigationItem]);
|
|
18429
|
-
const handleAddTopLevelNavItem =
|
|
19089
|
+
const handleAddTopLevelNavItem = useCallback9(() => {
|
|
18430
19090
|
const items = listNavbarRootItems();
|
|
18431
19091
|
addNavAfterAnchorRef.current = items[items.length - 1] ?? null;
|
|
18432
19092
|
deselectRef.current();
|
|
@@ -18438,7 +19098,7 @@ function OhhwellsBridge() {
|
|
|
18438
19098
|
intent: "add-nav"
|
|
18439
19099
|
});
|
|
18440
19100
|
}, []);
|
|
18441
|
-
const maybeWarnNavLinkDropdownConflict =
|
|
19101
|
+
const maybeWarnNavLinkDropdownConflict = useCallback9(
|
|
18442
19102
|
(anchor) => {
|
|
18443
19103
|
if (!isNavbarHrefKey(anchor.getAttribute("data-ohw-href-key"))) return;
|
|
18444
19104
|
if (!navDropdownsOpenOnClick()) return;
|
|
@@ -18451,7 +19111,7 @@ function OhhwellsBridge() {
|
|
|
18451
19111
|
},
|
|
18452
19112
|
[postToParent2]
|
|
18453
19113
|
);
|
|
18454
|
-
const handleNavDropdownOpenChange =
|
|
19114
|
+
const handleNavDropdownOpenChange = useCallback9((open) => {
|
|
18455
19115
|
const selected = selectedElRef.current;
|
|
18456
19116
|
if (!selected || !isNavigationItem2(selected)) return;
|
|
18457
19117
|
if (isNestedNavChild(selected)) return;
|
|
@@ -18467,7 +19127,7 @@ function OhhwellsBridge() {
|
|
|
18467
19127
|
}
|
|
18468
19128
|
});
|
|
18469
19129
|
}, []);
|
|
18470
|
-
const handleFooterHeadingVisibleChange =
|
|
19130
|
+
const handleFooterHeadingVisibleChange = useCallback9(
|
|
18471
19131
|
(visible) => {
|
|
18472
19132
|
const selected = selectedElRef.current;
|
|
18473
19133
|
if (!selected || !isFooterFrameSelectionRef.current) return;
|
|
@@ -18491,7 +19151,7 @@ function OhhwellsBridge() {
|
|
|
18491
19151
|
},
|
|
18492
19152
|
[postToParent2]
|
|
18493
19153
|
);
|
|
18494
|
-
const enterEditOnNewItem =
|
|
19154
|
+
const enterEditOnNewItem = useCallback9((anchor) => {
|
|
18495
19155
|
const label = anchor.querySelector('[data-ohw-editable="text"]');
|
|
18496
19156
|
if (!label) {
|
|
18497
19157
|
selectRef.current(anchor);
|
|
@@ -18500,8 +19160,8 @@ function OhhwellsBridge() {
|
|
|
18500
19160
|
setNavGroupForceOpen(anchor, true);
|
|
18501
19161
|
activateRef.current(label);
|
|
18502
19162
|
}, []);
|
|
18503
|
-
const pendingSocialAddRef =
|
|
18504
|
-
const handleAddChildItem =
|
|
19163
|
+
const pendingSocialAddRef = useRef11(null);
|
|
19164
|
+
const handleAddChildItem = useCallback9(() => {
|
|
18505
19165
|
const selected = selectedElRef.current;
|
|
18506
19166
|
if (!selected) return;
|
|
18507
19167
|
const socialsRow = isSocialsRow(selected) ? selected : findSocialsRow(selected);
|
|
@@ -18612,7 +19272,7 @@ function OhhwellsBridge() {
|
|
|
18612
19272
|
});
|
|
18613
19273
|
});
|
|
18614
19274
|
}, [enterEditOnNewItem, isFooterFrameSelection, maybeWarnNavLinkDropdownConflict, postToParent2]);
|
|
18615
|
-
const handleAddFooterColumn =
|
|
19275
|
+
const handleAddFooterColumn = useCallback9(() => {
|
|
18616
19276
|
if (!canAddFooterColumn()) {
|
|
18617
19277
|
postToParent2({
|
|
18618
19278
|
type: "ow:toast",
|
|
@@ -18633,7 +19293,7 @@ function OhhwellsBridge() {
|
|
|
18633
19293
|
selectRef.current(result.firstLink);
|
|
18634
19294
|
});
|
|
18635
19295
|
}, [postToParent2]);
|
|
18636
|
-
const clearFooterDragVisuals =
|
|
19296
|
+
const clearFooterDragVisuals = useCallback9(() => {
|
|
18637
19297
|
footerDragRef.current = null;
|
|
18638
19298
|
setSiblingHintRects([]);
|
|
18639
19299
|
setFooterDropSlots([]);
|
|
@@ -18642,7 +19302,7 @@ function OhhwellsBridge() {
|
|
|
18642
19302
|
setIsItemDragging(false);
|
|
18643
19303
|
unlockFooterDragInteraction();
|
|
18644
19304
|
}, []);
|
|
18645
|
-
const refreshFooterDragVisuals =
|
|
19305
|
+
const refreshFooterDragVisuals = useCallback9((session, activeSlot, clientX, clientY) => {
|
|
18646
19306
|
const dragged = session.draggedEl;
|
|
18647
19307
|
setDraggedItemRect(dragged.getBoundingClientRect());
|
|
18648
19308
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -18674,13 +19334,13 @@ function OhhwellsBridge() {
|
|
|
18674
19334
|
const activeIdx = activeSlot ? slots.findIndex((s) => s.insertIndex === activeSlot.insertIndex) : -1;
|
|
18675
19335
|
setActiveFooterDropIndex(activeIdx >= 0 ? activeIdx : null);
|
|
18676
19336
|
}, []);
|
|
18677
|
-
const refreshFooterDragVisualsRef =
|
|
19337
|
+
const refreshFooterDragVisualsRef = useRef11(refreshFooterDragVisuals);
|
|
18678
19338
|
refreshFooterDragVisualsRef.current = refreshFooterDragVisuals;
|
|
18679
|
-
const commitFooterDragRef =
|
|
19339
|
+
const commitFooterDragRef = useRef11(() => {
|
|
18680
19340
|
});
|
|
18681
|
-
const beginFooterDragRef =
|
|
19341
|
+
const beginFooterDragRef = useRef11(() => {
|
|
18682
19342
|
});
|
|
18683
|
-
const beginFooterDrag =
|
|
19343
|
+
const beginFooterDrag = useCallback9(
|
|
18684
19344
|
(session) => {
|
|
18685
19345
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
18686
19346
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -18700,7 +19360,7 @@ function OhhwellsBridge() {
|
|
|
18700
19360
|
[refreshFooterDragVisuals]
|
|
18701
19361
|
);
|
|
18702
19362
|
beginFooterDragRef.current = beginFooterDrag;
|
|
18703
|
-
const commitFooterDrag =
|
|
19363
|
+
const commitFooterDrag = useCallback9(
|
|
18704
19364
|
(clientX, clientY) => {
|
|
18705
19365
|
const session = footerDragRef.current;
|
|
18706
19366
|
if (!session) {
|
|
@@ -18829,7 +19489,7 @@ function OhhwellsBridge() {
|
|
|
18829
19489
|
[clearFooterDragVisuals, resolveHrefKeyElement, resyncSelectedNavigationItem]
|
|
18830
19490
|
);
|
|
18831
19491
|
commitFooterDragRef.current = commitFooterDrag;
|
|
18832
|
-
const startFooterLinkDrag =
|
|
19492
|
+
const startFooterLinkDrag = useCallback9(
|
|
18833
19493
|
(anchor, clientX, clientY, wasSelected) => {
|
|
18834
19494
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
18835
19495
|
if (!hrefKey) return false;
|
|
@@ -18865,7 +19525,7 @@ function OhhwellsBridge() {
|
|
|
18865
19525
|
},
|
|
18866
19526
|
[beginFooterDrag]
|
|
18867
19527
|
);
|
|
18868
|
-
const startFooterColumnDrag =
|
|
19528
|
+
const startFooterColumnDrag = useCallback9(
|
|
18869
19529
|
(columnEl, clientX, clientY, wasSelected) => {
|
|
18870
19530
|
const columns = listFooterColumns();
|
|
18871
19531
|
const idx = columns.indexOf(columnEl);
|
|
@@ -18885,7 +19545,7 @@ function OhhwellsBridge() {
|
|
|
18885
19545
|
},
|
|
18886
19546
|
[beginFooterDrag]
|
|
18887
19547
|
);
|
|
18888
|
-
const handleItemDragStart =
|
|
19548
|
+
const handleItemDragStart = useCallback9(
|
|
18889
19549
|
(e) => {
|
|
18890
19550
|
const selected = selectedElRef.current;
|
|
18891
19551
|
if (!selected) {
|
|
@@ -18905,7 +19565,7 @@ function OhhwellsBridge() {
|
|
|
18905
19565
|
},
|
|
18906
19566
|
[startFooterColumnDrag, startFooterLinkDrag, startNavLinkDrag]
|
|
18907
19567
|
);
|
|
18908
|
-
const handleItemDragEnd =
|
|
19568
|
+
const handleItemDragEnd = useCallback9(
|
|
18909
19569
|
(e) => {
|
|
18910
19570
|
if (footerDragRef.current) {
|
|
18911
19571
|
const x = e?.clientX;
|
|
@@ -18931,7 +19591,7 @@ function OhhwellsBridge() {
|
|
|
18931
19591
|
},
|
|
18932
19592
|
[commitFooterDrag, commitNavDrag, navDragRef]
|
|
18933
19593
|
);
|
|
18934
|
-
const handleItemChromePointerDown =
|
|
19594
|
+
const handleItemChromePointerDown = useCallback9((e) => {
|
|
18935
19595
|
if (e.button !== 0) return;
|
|
18936
19596
|
const selected = selectedElRef.current;
|
|
18937
19597
|
if (!selected) return;
|
|
@@ -18962,7 +19622,7 @@ function OhhwellsBridge() {
|
|
|
18962
19622
|
}
|
|
18963
19623
|
if (armNavPressFromChrome(selected, e.clientX, e.clientY, e.pointerId)) return;
|
|
18964
19624
|
}, [armNavPressFromChrome]);
|
|
18965
|
-
const handleItemChromeClick =
|
|
19625
|
+
const handleItemChromeClick = useCallback9((clientX, clientY) => {
|
|
18966
19626
|
if (suppressNextClickRef.current || Date.now() < suppressClickUntilRef.current) {
|
|
18967
19627
|
suppressNextClickRef.current = false;
|
|
18968
19628
|
return;
|
|
@@ -18975,7 +19635,7 @@ function OhhwellsBridge() {
|
|
|
18975
19635
|
}, []);
|
|
18976
19636
|
reselectNavigationItemRef.current = reselectNavigationItem;
|
|
18977
19637
|
commitNavigationTextEditRef.current = commitNavigationTextEdit;
|
|
18978
|
-
const select =
|
|
19638
|
+
const select = useCallback9((anchor) => {
|
|
18979
19639
|
if (!isNavigationItem2(anchor)) return;
|
|
18980
19640
|
if (activeElRef.current) deactivate();
|
|
18981
19641
|
aiSectionApiRef.current?.selectFromElement(anchor);
|
|
@@ -19018,7 +19678,7 @@ function OhhwellsBridge() {
|
|
|
19018
19678
|
setFloatingPanel(null);
|
|
19019
19679
|
setLogoSizeDraft(null);
|
|
19020
19680
|
}, [deactivate, markSelected]);
|
|
19021
|
-
const selectFrame =
|
|
19681
|
+
const selectFrame = useCallback9((el) => {
|
|
19022
19682
|
if (!isNavigationContainer(el)) return;
|
|
19023
19683
|
if (activeElRef.current) deactivate();
|
|
19024
19684
|
aiSectionApiRef.current?.selectFromElement(el);
|
|
@@ -19058,7 +19718,7 @@ function OhhwellsBridge() {
|
|
|
19058
19718
|
setFloatingPanel(null);
|
|
19059
19719
|
setLogoSizeDraft(null);
|
|
19060
19720
|
}, [deactivate, markSelected, postToParent2]);
|
|
19061
|
-
const selectLogo =
|
|
19721
|
+
const selectLogo = useCallback9(
|
|
19062
19722
|
(logoEl) => {
|
|
19063
19723
|
if (activeElRef.current) deactivate();
|
|
19064
19724
|
selectedElRef.current = logoEl;
|
|
@@ -19087,7 +19747,7 @@ function OhhwellsBridge() {
|
|
|
19087
19747
|
},
|
|
19088
19748
|
[deactivate, markSelected]
|
|
19089
19749
|
);
|
|
19090
|
-
const openLogoSizePanel =
|
|
19750
|
+
const openLogoSizePanel = useCallback9((logoEl) => {
|
|
19091
19751
|
const placement = getLogoPlacement(logoEl);
|
|
19092
19752
|
const draft = readLogoSizeState(editContentRef.current, placement);
|
|
19093
19753
|
setLogoSizeDraft(draft);
|
|
@@ -19100,7 +19760,7 @@ function OhhwellsBridge() {
|
|
|
19100
19760
|
placement
|
|
19101
19761
|
});
|
|
19102
19762
|
}, []);
|
|
19103
|
-
const openSocialsDisplayPanel =
|
|
19763
|
+
const openSocialsDisplayPanel = useCallback9((row) => {
|
|
19104
19764
|
setParentScrollSnap(parentScrollRef.current);
|
|
19105
19765
|
setFloatingPanel({
|
|
19106
19766
|
key: "socials-display",
|
|
@@ -19110,11 +19770,11 @@ function OhhwellsBridge() {
|
|
|
19110
19770
|
row
|
|
19111
19771
|
});
|
|
19112
19772
|
}, []);
|
|
19113
|
-
const isEditModeRef =
|
|
19114
|
-
const requestMissingSocialIconsRef =
|
|
19773
|
+
const isEditModeRef = useRef11(false);
|
|
19774
|
+
const requestMissingSocialIconsRef = useRef11(() => {
|
|
19115
19775
|
});
|
|
19116
|
-
const askedSocialIconsRef =
|
|
19117
|
-
const requestMissingSocialIcons =
|
|
19776
|
+
const askedSocialIconsRef = useRef11(/* @__PURE__ */ new Set());
|
|
19777
|
+
const requestMissingSocialIcons = useCallback9(() => {
|
|
19118
19778
|
const items = Array.from(document.querySelectorAll(`[${SOCIALS_ROW_ATTR}]`)).filter((row) => socialsDisplayFor(row, editContentRef.current).icon).flatMap((row) => {
|
|
19119
19779
|
const missing = socialsMissingIcons(row);
|
|
19120
19780
|
listSocialItems(row).forEach((item) => ensureIconSlot(item));
|
|
@@ -19126,7 +19786,7 @@ function OhhwellsBridge() {
|
|
|
19126
19786
|
}, []);
|
|
19127
19787
|
requestMissingSocialIconsRef.current = requestMissingSocialIcons;
|
|
19128
19788
|
isEditModeRef.current = isEditMode;
|
|
19129
|
-
const changeSocialsDisplay =
|
|
19789
|
+
const changeSocialsDisplay = useCallback9(
|
|
19130
19790
|
(row, next) => {
|
|
19131
19791
|
if (next.icon) {
|
|
19132
19792
|
const missing = socialsMissingIcons(row);
|
|
@@ -19150,17 +19810,17 @@ function OhhwellsBridge() {
|
|
|
19150
19810
|
},
|
|
19151
19811
|
[]
|
|
19152
19812
|
);
|
|
19153
|
-
const closeFloatingPanelOnly =
|
|
19813
|
+
const closeFloatingPanelOnly = useCallback9(() => {
|
|
19154
19814
|
setFloatingPanel(null);
|
|
19155
19815
|
setLogoSizeDraft(null);
|
|
19156
19816
|
}, []);
|
|
19157
19817
|
closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
|
|
19158
|
-
const closeFloatingPanelAndDeselect =
|
|
19818
|
+
const closeFloatingPanelAndDeselect = useCallback9(() => {
|
|
19159
19819
|
setFloatingPanel(null);
|
|
19160
19820
|
setLogoSizeDraft(null);
|
|
19161
19821
|
deselectRef.current();
|
|
19162
19822
|
}, []);
|
|
19163
|
-
|
|
19823
|
+
useEffect14(() => {
|
|
19164
19824
|
const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
|
|
19165
19825
|
if (!session || !logoSizeDraft) {
|
|
19166
19826
|
postToParentRef.current({ type: "ow:logo-size-panel", open: false });
|
|
@@ -19179,7 +19839,7 @@ function OhhwellsBridge() {
|
|
|
19179
19839
|
max: LOGO_SIZE_MAX
|
|
19180
19840
|
});
|
|
19181
19841
|
}, [floatingPanel, logoSizeDraft, editorViewport]);
|
|
19182
|
-
const persistLogoSizeDraft =
|
|
19842
|
+
const persistLogoSizeDraft = useCallback9(
|
|
19183
19843
|
(placement, draft) => {
|
|
19184
19844
|
const desktopKey = LOGO_SIZE_DESKTOP_KEYS[placement];
|
|
19185
19845
|
const mobileKey = LOGO_SIZE_MOBILE_KEYS[placement];
|
|
@@ -19219,7 +19879,7 @@ function OhhwellsBridge() {
|
|
|
19219
19879
|
},
|
|
19220
19880
|
[postToParent2]
|
|
19221
19881
|
);
|
|
19222
|
-
const activate =
|
|
19882
|
+
const activate = useCallback9((el, options) => {
|
|
19223
19883
|
if (activeElRef.current === el) return;
|
|
19224
19884
|
document.querySelectorAll("[data-ohw-hovered]").forEach((hovered) => {
|
|
19225
19885
|
hovered.removeAttribute("data-ohw-hovered");
|
|
@@ -19317,8 +19977,8 @@ function OhhwellsBridge() {
|
|
|
19317
19977
|
openLogoSizePanelRef.current = openLogoSizePanel;
|
|
19318
19978
|
deselectRef.current = deselect;
|
|
19319
19979
|
closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
|
|
19320
|
-
const lastSiteWideScopeRef =
|
|
19321
|
-
|
|
19980
|
+
const lastSiteWideScopeRef = useRef11(null);
|
|
19981
|
+
useEffect14(() => {
|
|
19322
19982
|
if (!isEditMode) {
|
|
19323
19983
|
if (lastSiteWideScopeRef.current !== false) {
|
|
19324
19984
|
lastSiteWideScopeRef.current = false;
|
|
@@ -19463,7 +20123,7 @@ function OhhwellsBridge() {
|
|
|
19463
20123
|
cancelled = true;
|
|
19464
20124
|
};
|
|
19465
20125
|
}, [subdomain, isEditMode]);
|
|
19466
|
-
|
|
20126
|
+
useEffect14(() => {
|
|
19467
20127
|
if (!isEditMode) return;
|
|
19468
20128
|
const resolveIndex = (form, clientY) => {
|
|
19469
20129
|
const wrappers = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== fieldDragRef.current?.key);
|
|
@@ -19504,7 +20164,7 @@ function OhhwellsBridge() {
|
|
|
19504
20164
|
window.removeEventListener("drop", onDrop, true);
|
|
19505
20165
|
};
|
|
19506
20166
|
}, [buildFieldDropSlots, isEditMode, persistFields, selectField]);
|
|
19507
|
-
|
|
20167
|
+
useEffect14(() => {
|
|
19508
20168
|
if (!isEditMode) return;
|
|
19509
20169
|
const mark = () => document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
19510
20170
|
markFormFields(form);
|
|
@@ -19516,7 +20176,7 @@ function OhhwellsBridge() {
|
|
|
19516
20176
|
});
|
|
19517
20177
|
return () => observer.disconnect();
|
|
19518
20178
|
}, [isEditMode, fetchState, pathname]);
|
|
19519
|
-
|
|
20179
|
+
useEffect14(() => {
|
|
19520
20180
|
if (!isEditMode) return;
|
|
19521
20181
|
let saveTimer = null;
|
|
19522
20182
|
const onInput = (e) => {
|
|
@@ -19538,14 +20198,14 @@ function OhhwellsBridge() {
|
|
|
19538
20198
|
document.addEventListener("input", onInput, true);
|
|
19539
20199
|
return () => document.removeEventListener("input", onInput, true);
|
|
19540
20200
|
}, [isEditMode, persistFields]);
|
|
19541
|
-
|
|
20201
|
+
useEffect14(() => {
|
|
19542
20202
|
if (isEditMode || fetchState !== "done") return;
|
|
19543
20203
|
const content = contentCache.get(subdomain) ?? {};
|
|
19544
20204
|
document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
19545
20205
|
reconcileFieldsFromContent(form, content);
|
|
19546
20206
|
});
|
|
19547
20207
|
}, [isEditMode, fetchState, subdomain]);
|
|
19548
|
-
|
|
20208
|
+
useEffect14(() => {
|
|
19549
20209
|
if (!isEditMode) return;
|
|
19550
20210
|
const swallow = (e) => {
|
|
19551
20211
|
const target = e.target;
|
|
@@ -19554,14 +20214,14 @@ function OhhwellsBridge() {
|
|
|
19554
20214
|
document.addEventListener("submit", swallow, true);
|
|
19555
20215
|
return () => document.removeEventListener("submit", swallow, true);
|
|
19556
20216
|
}, [isEditMode]);
|
|
19557
|
-
|
|
20217
|
+
useEffect14(() => {
|
|
19558
20218
|
if (isEditMode || fetchState !== "done") return;
|
|
19559
20219
|
console.log("env", process.env.NEXT_PUBLIC_FLOWOPS_API_URL);
|
|
19560
20220
|
const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
|
|
19561
20221
|
console.log({ apiUrl, subdomain });
|
|
19562
20222
|
bindPublishedForms(apiUrl, subdomain, contentCache.get(subdomain) ?? {});
|
|
19563
20223
|
}, [isEditMode, fetchState, subdomain]);
|
|
19564
|
-
|
|
20224
|
+
useEffect14(() => {
|
|
19565
20225
|
if (!subdomain || isEditMode) return;
|
|
19566
20226
|
let debounceTimer = null;
|
|
19567
20227
|
let observer = null;
|
|
@@ -19656,10 +20316,10 @@ function OhhwellsBridge() {
|
|
|
19656
20316
|
const visible = Boolean(subdomain) && fetchState !== "done";
|
|
19657
20317
|
el.style.display = visible ? "flex" : "none";
|
|
19658
20318
|
}, [subdomain, fetchState]);
|
|
19659
|
-
|
|
20319
|
+
useEffect14(() => {
|
|
19660
20320
|
postToParent2({ type: "ow:navigation", path: pathname });
|
|
19661
20321
|
}, [pathname, postToParent2]);
|
|
19662
|
-
|
|
20322
|
+
useEffect14(() => {
|
|
19663
20323
|
if (!subdomain || isEditMode) return;
|
|
19664
20324
|
const content = contentCache.get(subdomain);
|
|
19665
20325
|
if (!content) return;
|
|
@@ -19675,7 +20335,7 @@ function OhhwellsBridge() {
|
|
|
19675
20335
|
applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
|
|
19676
20336
|
}
|
|
19677
20337
|
}, [pathname, subdomain, isEditMode]);
|
|
19678
|
-
|
|
20338
|
+
useEffect14(() => {
|
|
19679
20339
|
if (!isEditMode) return;
|
|
19680
20340
|
if (linkPopoverSessionRef.current?.intent === "add-nav") return;
|
|
19681
20341
|
if (document.querySelector("[data-ohw-section-picker]")) return;
|
|
@@ -19683,11 +20343,11 @@ function OhhwellsBridge() {
|
|
|
19683
20343
|
deselectRef.current();
|
|
19684
20344
|
deactivateRef.current();
|
|
19685
20345
|
}, [pathname, isEditMode]);
|
|
19686
|
-
|
|
20346
|
+
useEffect14(() => {
|
|
19687
20347
|
if (!isEditMode) return;
|
|
19688
20348
|
initSectionInstancesFromContent(editContentRef.current, pathname);
|
|
19689
20349
|
}, [pathname, isEditMode]);
|
|
19690
|
-
|
|
20350
|
+
useEffect14(() => {
|
|
19691
20351
|
if (!isEditMode) return;
|
|
19692
20352
|
const observer = new MutationObserver(() => {
|
|
19693
20353
|
const drawer = document.querySelector("[data-ohw-nav-drawer]");
|
|
@@ -19698,7 +20358,7 @@ function OhhwellsBridge() {
|
|
|
19698
20358
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
19699
20359
|
return () => observer.disconnect();
|
|
19700
20360
|
}, [isEditMode, pathname]);
|
|
19701
|
-
|
|
20361
|
+
useEffect14(() => {
|
|
19702
20362
|
const contentForNav = () => {
|
|
19703
20363
|
if (isEditMode) return editContentRef.current;
|
|
19704
20364
|
if (!subdomain) return {};
|
|
@@ -19767,7 +20427,7 @@ function OhhwellsBridge() {
|
|
|
19767
20427
|
observer?.disconnect();
|
|
19768
20428
|
};
|
|
19769
20429
|
}, [isEditMode, pathname, subdomain, fetchState, resyncSelectedNavigationItem]);
|
|
19770
|
-
|
|
20430
|
+
useEffect14(() => {
|
|
19771
20431
|
if (!isEditMode) return;
|
|
19772
20432
|
let lastPosted = 0;
|
|
19773
20433
|
const measure = () => {
|
|
@@ -19811,7 +20471,7 @@ function OhhwellsBridge() {
|
|
|
19811
20471
|
window.removeEventListener("resize", handleResize);
|
|
19812
20472
|
};
|
|
19813
20473
|
}, [pathname, isEditMode, postToParent2]);
|
|
19814
|
-
|
|
20474
|
+
useEffect14(() => {
|
|
19815
20475
|
if (!subdomainFromQuery || isEditMode) return;
|
|
19816
20476
|
const handleClick = (e) => {
|
|
19817
20477
|
const anchor = e.target.closest("a");
|
|
@@ -19827,7 +20487,7 @@ function OhhwellsBridge() {
|
|
|
19827
20487
|
document.addEventListener("click", handleClick, true);
|
|
19828
20488
|
return () => document.removeEventListener("click", handleClick, true);
|
|
19829
20489
|
}, [subdomainFromQuery, isEditMode, router]);
|
|
19830
|
-
|
|
20490
|
+
useEffect14(() => {
|
|
19831
20491
|
if (!isEditMode) {
|
|
19832
20492
|
editStylesRef.current?.base.remove();
|
|
19833
20493
|
editStylesRef.current?.forceHover.remove();
|
|
@@ -20053,11 +20713,11 @@ function OhhwellsBridge() {
|
|
|
20053
20713
|
footer [data-ohw-href-key] [data-ohw-editable][contenteditable],
|
|
20054
20714
|
footer [data-ohw-href-key] [data-ohw-editable][contenteditable] * {
|
|
20055
20715
|
outline: none !important;
|
|
20056
|
-
caret-color: ${
|
|
20716
|
+
caret-color: ${PRIMARY4} !important;
|
|
20057
20717
|
cursor: text !important;
|
|
20058
20718
|
}
|
|
20059
20719
|
[data-ohw-editable][contenteditable]::selection,
|
|
20060
|
-
[data-ohw-editable][contenteditable] *::selection { background: ${
|
|
20720
|
+
[data-ohw-editable][contenteditable] *::selection { background: ${PRIMARY4}59 !important; }
|
|
20061
20721
|
[data-ohw-editable-state], [data-ohw-editable-state] * { pointer-events: none !important; }
|
|
20062
20722
|
[data-ohw-editable-state][data-ohw-active-state] [data-ohw-editable] { pointer-events: auto !important; }
|
|
20063
20723
|
[data-ohw-editable-state][data-ohw-active-state][data-ohw-editable] { pointer-events: auto !important; }
|
|
@@ -21837,10 +22497,7 @@ function OhhwellsBridge() {
|
|
|
21837
22497
|
deselectRef.current();
|
|
21838
22498
|
clearMediaSelectionRef.current();
|
|
21839
22499
|
};
|
|
21840
|
-
const
|
|
21841
|
-
if (e.data?.type !== "ow:ai-apply-tree") return;
|
|
21842
|
-
const payload = e.data.payload;
|
|
21843
|
-
if (!payload || typeof payload.id !== "string" || !isRenderableTree(payload.tree)) return;
|
|
22500
|
+
const applyTreeToLocalState = (payload) => {
|
|
21844
22501
|
clearInteractionChrome();
|
|
21845
22502
|
const previous = aiSectionsRef.current;
|
|
21846
22503
|
const nextState = applyTreeToState(parseAiSectionsState(previous), {
|
|
@@ -21857,7 +22514,17 @@ function OhhwellsBridge() {
|
|
|
21857
22514
|
const top = appliedEl ? appliedEl.getBoundingClientRect().top + window.scrollY : null;
|
|
21858
22515
|
postToParentRef.current({ type: "ow:ai-tree-applied", id: payload.id, previous, value: nextValue, top });
|
|
21859
22516
|
postAiSectionsChanged();
|
|
21860
|
-
|
|
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);
|
|
21861
22528
|
};
|
|
21862
22529
|
window.addEventListener("message", handleAiApplyTree);
|
|
21863
22530
|
const handleAiDeleteSection = (e) => {
|
|
@@ -22884,7 +23551,7 @@ function OhhwellsBridge() {
|
|
|
22884
23551
|
if (imageShowTimerRef.current) clearTimeout(imageShowTimerRef.current);
|
|
22885
23552
|
};
|
|
22886
23553
|
}, [isEditMode, refreshStateRules]);
|
|
22887
|
-
|
|
23554
|
+
useEffect14(() => {
|
|
22888
23555
|
if (!isEditMode) return;
|
|
22889
23556
|
const THRESHOLD = 10;
|
|
22890
23557
|
const resolveWasSelected = (el) => {
|
|
@@ -23040,7 +23707,7 @@ function OhhwellsBridge() {
|
|
|
23040
23707
|
unlockFooterDragInteraction();
|
|
23041
23708
|
};
|
|
23042
23709
|
}, [isEditMode]);
|
|
23043
|
-
|
|
23710
|
+
useEffect14(() => {
|
|
23044
23711
|
const handler = (e) => {
|
|
23045
23712
|
if (e.data?.type !== "ow:request-schedule-config") return;
|
|
23046
23713
|
const insertAfterVal = e.data.insertAfter;
|
|
@@ -23056,7 +23723,7 @@ function OhhwellsBridge() {
|
|
|
23056
23723
|
window.addEventListener("message", handler);
|
|
23057
23724
|
return () => window.removeEventListener("message", handler);
|
|
23058
23725
|
}, [processConfigRequest]);
|
|
23059
|
-
|
|
23726
|
+
useEffect14(() => {
|
|
23060
23727
|
if (!isEditMode) return;
|
|
23061
23728
|
document.querySelectorAll("[data-ohw-active-state]").forEach((el) => {
|
|
23062
23729
|
el.removeAttribute("data-ohw-active-state");
|
|
@@ -23080,7 +23747,7 @@ function OhhwellsBridge() {
|
|
|
23080
23747
|
postToParent2({
|
|
23081
23748
|
type: "ow:ready",
|
|
23082
23749
|
version: "1",
|
|
23083
|
-
bridgeVersion: "0.1.
|
|
23750
|
+
bridgeVersion: "0.1.118",
|
|
23084
23751
|
path: pathname,
|
|
23085
23752
|
nodes: collectEditableNodes(editContentRef.current),
|
|
23086
23753
|
sections
|
|
@@ -23092,13 +23759,13 @@ function OhhwellsBridge() {
|
|
|
23092
23759
|
clearTimeout(timer);
|
|
23093
23760
|
};
|
|
23094
23761
|
}, [pathname, isEditMode, refreshStateRules, postToParent2]);
|
|
23095
|
-
|
|
23762
|
+
useEffect14(() => {
|
|
23096
23763
|
scrollToHashSectionWhenReady();
|
|
23097
23764
|
const onHashChange = () => scrollToHashSectionWhenReady();
|
|
23098
23765
|
window.addEventListener("hashchange", onHashChange);
|
|
23099
23766
|
return () => window.removeEventListener("hashchange", onHashChange);
|
|
23100
23767
|
}, [pathname]);
|
|
23101
|
-
const handleCommand =
|
|
23768
|
+
const handleCommand = useCallback9((cmd) => {
|
|
23102
23769
|
const el = activeElRef.current;
|
|
23103
23770
|
const selBefore = window.getSelection();
|
|
23104
23771
|
let savedOffsets = null;
|
|
@@ -23134,7 +23801,7 @@ function OhhwellsBridge() {
|
|
|
23134
23801
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
23135
23802
|
refreshActiveCommandsRef.current();
|
|
23136
23803
|
}, []);
|
|
23137
|
-
|
|
23804
|
+
useEffect14(() => {
|
|
23138
23805
|
const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
|
|
23139
23806
|
if (!session || !logoSizeDraft) return;
|
|
23140
23807
|
const onPanelAction = (e) => {
|
|
@@ -23172,7 +23839,7 @@ function OhhwellsBridge() {
|
|
|
23172
23839
|
window.addEventListener("message", onPanelAction);
|
|
23173
23840
|
return () => window.removeEventListener("message", onPanelAction);
|
|
23174
23841
|
}, [floatingPanel, logoSizeDraft, editorViewport, persistLogoSizeDraft, closeFloatingPanelAndDeselect]);
|
|
23175
|
-
const handleStateChange =
|
|
23842
|
+
const handleStateChange = useCallback9((state) => {
|
|
23176
23843
|
if (!activeStateElRef.current) return;
|
|
23177
23844
|
const el = activeStateElRef.current;
|
|
23178
23845
|
if (state === "Default") {
|
|
@@ -23185,7 +23852,7 @@ function OhhwellsBridge() {
|
|
|
23185
23852
|
}
|
|
23186
23853
|
setToggleState((prev) => prev ? { ...prev, activeState: state } : null);
|
|
23187
23854
|
}, [deactivate]);
|
|
23188
|
-
const reselectAfterLinkPopover =
|
|
23855
|
+
const reselectAfterLinkPopover = useCallback9(
|
|
23189
23856
|
(hrefKey) => {
|
|
23190
23857
|
requestAnimationFrame(() => {
|
|
23191
23858
|
const el = resolveHrefKeyElement(hrefKey);
|
|
@@ -23194,7 +23861,7 @@ function OhhwellsBridge() {
|
|
|
23194
23861
|
},
|
|
23195
23862
|
[resolveHrefKeyElement]
|
|
23196
23863
|
);
|
|
23197
|
-
const closeLinkPopover =
|
|
23864
|
+
const closeLinkPopover = useCallback9(() => {
|
|
23198
23865
|
const session = linkPopoverSessionRef.current;
|
|
23199
23866
|
addNavAfterAnchorRef.current = null;
|
|
23200
23867
|
setLinkPopover(null);
|
|
@@ -23202,9 +23869,9 @@ function OhhwellsBridge() {
|
|
|
23202
23869
|
reselectAfterLinkPopover(session.key);
|
|
23203
23870
|
}
|
|
23204
23871
|
}, [reselectAfterLinkPopover]);
|
|
23205
|
-
const closeLinkPopoverRef =
|
|
23872
|
+
const closeLinkPopoverRef = useRef11(closeLinkPopover);
|
|
23206
23873
|
closeLinkPopoverRef.current = closeLinkPopover;
|
|
23207
|
-
const openLinkPopoverForActive =
|
|
23874
|
+
const openLinkPopoverForActive = useCallback9(() => {
|
|
23208
23875
|
const hrefCtx = getHrefKeyFromElement(activeElRef.current);
|
|
23209
23876
|
if (!hrefCtx) return;
|
|
23210
23877
|
bumpLinkPopoverGrace();
|
|
@@ -23215,7 +23882,7 @@ function OhhwellsBridge() {
|
|
|
23215
23882
|
});
|
|
23216
23883
|
deactivate();
|
|
23217
23884
|
}, [deactivate]);
|
|
23218
|
-
const openLinkPopoverForSelected =
|
|
23885
|
+
const openLinkPopoverForSelected = useCallback9(() => {
|
|
23219
23886
|
const anchor = selectedElRef.current;
|
|
23220
23887
|
if (!anchor) return;
|
|
23221
23888
|
const key = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -23232,7 +23899,7 @@ function OhhwellsBridge() {
|
|
|
23232
23899
|
});
|
|
23233
23900
|
deselect();
|
|
23234
23901
|
}, [deselect]);
|
|
23235
|
-
const handleSelectParent =
|
|
23902
|
+
const handleSelectParent = useCallback9(() => {
|
|
23236
23903
|
const selected = selectedElRef.current;
|
|
23237
23904
|
if (!selected) return;
|
|
23238
23905
|
if (toolbarVariantRef.current === "select-frame") {
|
|
@@ -23259,7 +23926,7 @@ function OhhwellsBridge() {
|
|
|
23259
23926
|
}
|
|
23260
23927
|
deselectRef.current();
|
|
23261
23928
|
}, []);
|
|
23262
|
-
const handleDuplicateSelected =
|
|
23929
|
+
const handleDuplicateSelected = useCallback9(() => {
|
|
23263
23930
|
const selected = selectedElRef.current;
|
|
23264
23931
|
if (!selected || !isNavigationItem2(selected)) return;
|
|
23265
23932
|
const hrefKey = selected.getAttribute("data-ohw-href-key");
|
|
@@ -23392,7 +24059,7 @@ function OhhwellsBridge() {
|
|
|
23392
24059
|
});
|
|
23393
24060
|
}
|
|
23394
24061
|
}, [postToParent2]);
|
|
23395
|
-
const runPendingDeleteUndo =
|
|
24062
|
+
const runPendingDeleteUndo = useCallback9(() => {
|
|
23396
24063
|
const pending = pendingDeleteUndoRef.current;
|
|
23397
24064
|
if (!pending) return false;
|
|
23398
24065
|
pendingDeleteUndoRef.current = null;
|
|
@@ -23400,7 +24067,7 @@ function OhhwellsBridge() {
|
|
|
23400
24067
|
enforceLinkHrefs();
|
|
23401
24068
|
return true;
|
|
23402
24069
|
}, []);
|
|
23403
|
-
const handleDeleteSelected =
|
|
24070
|
+
const handleDeleteSelected = useCallback9(() => {
|
|
23404
24071
|
const selected = selectedElRef.current;
|
|
23405
24072
|
if (!selected) return false;
|
|
23406
24073
|
return deleteSelectedNavFooterItem({
|
|
@@ -23421,7 +24088,7 @@ function OhhwellsBridge() {
|
|
|
23421
24088
|
}, [postToParent2]);
|
|
23422
24089
|
handleDeleteSelectedRef.current = handleDeleteSelected;
|
|
23423
24090
|
runPendingDeleteUndoRef.current = runPendingDeleteUndo;
|
|
23424
|
-
const handleLinkPopoverSubmit =
|
|
24091
|
+
const handleLinkPopoverSubmit = useCallback9(
|
|
23425
24092
|
(target) => {
|
|
23426
24093
|
const session = linkPopoverSessionRef.current;
|
|
23427
24094
|
if (!session) return;
|
|
@@ -23487,14 +24154,14 @@ function OhhwellsBridge() {
|
|
|
23487
24154
|
const showEditLink = toolbarShowEditLink;
|
|
23488
24155
|
const currentSections = sectionsByPath[pathname] ?? [];
|
|
23489
24156
|
linkPopoverOpenRef.current = linkPopover !== null;
|
|
23490
|
-
const handleMediaSelect =
|
|
24157
|
+
const handleMediaSelect = useCallback9((key) => {
|
|
23491
24158
|
const el = hoveredImageRef.current?.dataset.ohwKey === key ? hoveredImageRef.current : Array.from(document.querySelectorAll(MEDIA_SELECTOR)).find(
|
|
23492
24159
|
(m) => (m.dataset.ohwKey ?? "") === key
|
|
23493
24160
|
) ?? null;
|
|
23494
24161
|
if (!el) return;
|
|
23495
24162
|
selectMediaElementRef.current(el);
|
|
23496
24163
|
}, []);
|
|
23497
|
-
const handleMediaReplace =
|
|
24164
|
+
const handleMediaReplace = useCallback9(
|
|
23498
24165
|
(key) => {
|
|
23499
24166
|
postToParent2({
|
|
23500
24167
|
type: "ow:image-pick",
|
|
@@ -23504,13 +24171,13 @@ function OhhwellsBridge() {
|
|
|
23504
24171
|
},
|
|
23505
24172
|
[postToParent2, mediaHover?.elementType, selectedMedia?.elementType]
|
|
23506
24173
|
);
|
|
23507
|
-
const handleEditCarousel =
|
|
24174
|
+
const handleEditCarousel = useCallback9(
|
|
23508
24175
|
(key) => {
|
|
23509
24176
|
postToParent2({ type: "ow:carousel-open", key, images: readCarouselValue(key) });
|
|
23510
24177
|
},
|
|
23511
24178
|
[postToParent2]
|
|
23512
24179
|
);
|
|
23513
|
-
const handleMediaFadeOutComplete =
|
|
24180
|
+
const handleMediaFadeOutComplete = useCallback9((key) => {
|
|
23514
24181
|
setUploadingRects((prev) => {
|
|
23515
24182
|
if (!(key in prev)) return prev;
|
|
23516
24183
|
const next = { ...prev };
|
|
@@ -23518,7 +24185,7 @@ function OhhwellsBridge() {
|
|
|
23518
24185
|
return next;
|
|
23519
24186
|
});
|
|
23520
24187
|
}, []);
|
|
23521
|
-
const handleVideoSettingsChange =
|
|
24188
|
+
const handleVideoSettingsChange = useCallback9(
|
|
23522
24189
|
(key, settings) => {
|
|
23523
24190
|
document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
|
|
23524
24191
|
const video = getVideoEl2(el);
|
|
@@ -23540,14 +24207,14 @@ function OhhwellsBridge() {
|
|
|
23540
24207
|
},
|
|
23541
24208
|
[postToParent2]
|
|
23542
24209
|
);
|
|
23543
|
-
return /* @__PURE__ */
|
|
23544
|
-
/* @__PURE__ */
|
|
23545
|
-
/* @__PURE__ */
|
|
23546
|
-
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, {}),
|
|
23547
24214
|
bridgeRoot ? createPortal3(
|
|
23548
|
-
/* @__PURE__ */
|
|
23549
|
-
/* @__PURE__ */
|
|
23550
|
-
isEditMode && /* @__PURE__ */
|
|
24215
|
+
/* @__PURE__ */ jsxs21(Fragment9, { children: [
|
|
24216
|
+
/* @__PURE__ */ jsx34("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
|
|
24217
|
+
isEditMode && /* @__PURE__ */ jsx34(
|
|
23551
24218
|
AiSectionOverlay,
|
|
23552
24219
|
{
|
|
23553
24220
|
postToParent: postToParent2,
|
|
@@ -23555,12 +24222,20 @@ function OhhwellsBridge() {
|
|
|
23555
24222
|
onSelectionChange: handleAiSectionSelectionChange
|
|
23556
24223
|
}
|
|
23557
24224
|
),
|
|
23558
|
-
|
|
24225
|
+
isEditMode && /* @__PURE__ */ jsx34(
|
|
24226
|
+
AiPricingCardOverlay,
|
|
24227
|
+
{
|
|
24228
|
+
postToParent: postToParent2,
|
|
24229
|
+
aiSectionsRef,
|
|
24230
|
+
applyTreeLocalRef
|
|
24231
|
+
}
|
|
24232
|
+
),
|
|
24233
|
+
isSectionDragging && sectionDropSlots.map((slot, i) => /* @__PURE__ */ jsx34(
|
|
23559
24234
|
"div",
|
|
23560
24235
|
{
|
|
23561
24236
|
className: "pointer-events-none fixed z-2147483646",
|
|
23562
24237
|
style: { left: slot.left, top: slot.y, width: slot.width, height: 3, transform: "translateY(-50%)" },
|
|
23563
|
-
children: /* @__PURE__ */
|
|
24238
|
+
children: /* @__PURE__ */ jsx34(
|
|
23564
24239
|
DropIndicator,
|
|
23565
24240
|
{
|
|
23566
24241
|
direction: "horizontal",
|
|
@@ -23571,7 +24246,7 @@ function OhhwellsBridge() {
|
|
|
23571
24246
|
},
|
|
23572
24247
|
`section-drop-${slot.insertIndex}-${i}`
|
|
23573
24248
|
)),
|
|
23574
|
-
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */
|
|
24249
|
+
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ jsx34(
|
|
23575
24250
|
MediaOverlay,
|
|
23576
24251
|
{
|
|
23577
24252
|
hover: { key, rect, elementType: "image", isDragOver: false, hasTextOverlap: false },
|
|
@@ -23582,7 +24257,7 @@ function OhhwellsBridge() {
|
|
|
23582
24257
|
},
|
|
23583
24258
|
`uploading-${key}`
|
|
23584
24259
|
)),
|
|
23585
|
-
mediaHover && !(mediaHover.key in uploadingRects) && mediaHover.key !== selectedMedia?.key && /* @__PURE__ */
|
|
24260
|
+
mediaHover && !(mediaHover.key in uploadingRects) && mediaHover.key !== selectedMedia?.key && /* @__PURE__ */ jsx34(
|
|
23586
24261
|
MediaOverlay,
|
|
23587
24262
|
{
|
|
23588
24263
|
hover: mediaHover,
|
|
@@ -23593,7 +24268,7 @@ function OhhwellsBridge() {
|
|
|
23593
24268
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
23594
24269
|
}
|
|
23595
24270
|
),
|
|
23596
|
-
selectedMedia && !(selectedMedia.key in uploadingRects) && !linkPopover && /* @__PURE__ */
|
|
24271
|
+
selectedMedia && !(selectedMedia.key in uploadingRects) && !linkPopover && /* @__PURE__ */ jsx34(
|
|
23597
24272
|
MediaOverlay,
|
|
23598
24273
|
{
|
|
23599
24274
|
hover: selectedMedia,
|
|
@@ -23605,7 +24280,7 @@ function OhhwellsBridge() {
|
|
|
23605
24280
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
23606
24281
|
}
|
|
23607
24282
|
),
|
|
23608
|
-
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */
|
|
24283
|
+
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ jsx34(
|
|
23609
24284
|
CarouselOverlay,
|
|
23610
24285
|
{
|
|
23611
24286
|
hover: carouselHover,
|
|
@@ -23613,10 +24288,10 @@ function OhhwellsBridge() {
|
|
|
23613
24288
|
cueOnly: !!carouselHover.fullBleedSectionId && carouselHover.fullBleedSectionId !== selectedAiSectionId
|
|
23614
24289
|
}
|
|
23615
24290
|
),
|
|
23616
|
-
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */
|
|
23617
|
-
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */
|
|
23618
|
-
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */
|
|
23619
|
-
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(
|
|
23620
24295
|
"div",
|
|
23621
24296
|
{
|
|
23622
24297
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -23626,7 +24301,7 @@ function OhhwellsBridge() {
|
|
|
23626
24301
|
width: slot.width,
|
|
23627
24302
|
height: slot.height
|
|
23628
24303
|
},
|
|
23629
|
-
children: /* @__PURE__ */
|
|
24304
|
+
children: /* @__PURE__ */ jsx34(
|
|
23630
24305
|
DropIndicator,
|
|
23631
24306
|
{
|
|
23632
24307
|
direction: slot.direction,
|
|
@@ -23637,7 +24312,7 @@ function OhhwellsBridge() {
|
|
|
23637
24312
|
},
|
|
23638
24313
|
`footer-drop-${slot.direction}-${slot.columnIndex}-${slot.insertIndex}-${i}`
|
|
23639
24314
|
)),
|
|
23640
|
-
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */
|
|
24315
|
+
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ jsx34(
|
|
23641
24316
|
"div",
|
|
23642
24317
|
{
|
|
23643
24318
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -23647,7 +24322,7 @@ function OhhwellsBridge() {
|
|
|
23647
24322
|
width: slot.width,
|
|
23648
24323
|
height: slot.height
|
|
23649
24324
|
},
|
|
23650
|
-
children: /* @__PURE__ */
|
|
24325
|
+
children: /* @__PURE__ */ jsx34(
|
|
23651
24326
|
DropIndicator,
|
|
23652
24327
|
{
|
|
23653
24328
|
direction: slot.direction,
|
|
@@ -23658,10 +24333,10 @@ function OhhwellsBridge() {
|
|
|
23658
24333
|
},
|
|
23659
24334
|
`nav-drop-${slot.direction}-${slot.parentId ?? "root"}-${slot.insertIndex}-${i}`
|
|
23660
24335
|
)),
|
|
23661
|
-
hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */
|
|
23662
|
-
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */
|
|
23663
|
-
hoveredTextRect && !hoveredNavContainerRect && !hoveredItemRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */
|
|
23664
|
-
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(
|
|
23665
24340
|
ItemInteractionLayer,
|
|
23666
24341
|
{
|
|
23667
24342
|
rect: formPickRect,
|
|
@@ -23669,13 +24344,13 @@ function OhhwellsBridge() {
|
|
|
23669
24344
|
itemDragSurface: false,
|
|
23670
24345
|
toolbarAlign: "left",
|
|
23671
24346
|
chromeGap: 24,
|
|
23672
|
-
toolbar: fieldPickRect ? void 0 : /* @__PURE__ */
|
|
24347
|
+
toolbar: fieldPickRect ? void 0 : /* @__PURE__ */ jsxs21(
|
|
23673
24348
|
"div",
|
|
23674
24349
|
{
|
|
23675
24350
|
"data-ohw-form-toolbar": "",
|
|
23676
24351
|
className: "pointer-events-auto flex items-center gap-0.5 whitespace-nowrap rounded-lg border border-border bg-background p-1 shadow-md",
|
|
23677
24352
|
children: [
|
|
23678
|
-
/* @__PURE__ */
|
|
24353
|
+
/* @__PURE__ */ jsx34(
|
|
23679
24354
|
"button",
|
|
23680
24355
|
{
|
|
23681
24356
|
type: "button",
|
|
@@ -23683,11 +24358,11 @@ function OhhwellsBridge() {
|
|
|
23683
24358
|
className: "flex h-7 w-7 items-center justify-center rounded-md text-foreground transition-colors hover:bg-muted/80",
|
|
23684
24359
|
onClick: () => setFieldTypePickerOpen((open) => !open),
|
|
23685
24360
|
"data-ohw-add-field": "",
|
|
23686
|
-
children: /* @__PURE__ */
|
|
24361
|
+
children: /* @__PURE__ */ jsx34(Plus4, { size: 15, "aria-hidden": true })
|
|
23687
24362
|
}
|
|
23688
24363
|
),
|
|
23689
|
-
/* @__PURE__ */
|
|
23690
|
-
/* @__PURE__ */
|
|
24364
|
+
/* @__PURE__ */ jsx34("div", { className: "mx-0.5 h-5 w-px bg-border" }),
|
|
24365
|
+
/* @__PURE__ */ jsxs21(
|
|
23691
24366
|
"button",
|
|
23692
24367
|
{
|
|
23693
24368
|
type: "button",
|
|
@@ -23703,11 +24378,11 @@ function OhhwellsBridge() {
|
|
|
23703
24378
|
});
|
|
23704
24379
|
},
|
|
23705
24380
|
children: [
|
|
23706
|
-
/* @__PURE__ */
|
|
24381
|
+
/* @__PURE__ */ jsx34(Settings, { size: 14, "aria-hidden": true }),
|
|
23707
24382
|
"Form settings",
|
|
23708
24383
|
formPickCount ? (
|
|
23709
24384
|
// Counter pill, per the design — not a text suffix.
|
|
23710
|
-
/* @__PURE__ */
|
|
24385
|
+
/* @__PURE__ */ jsx34(
|
|
23711
24386
|
"span",
|
|
23712
24387
|
{
|
|
23713
24388
|
"data-ohw-form-count": "",
|
|
@@ -23719,8 +24394,8 @@ function OhhwellsBridge() {
|
|
|
23719
24394
|
]
|
|
23720
24395
|
}
|
|
23721
24396
|
),
|
|
23722
|
-
/* @__PURE__ */
|
|
23723
|
-
/* @__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(
|
|
23724
24399
|
"button",
|
|
23725
24400
|
{
|
|
23726
24401
|
type: "button",
|
|
@@ -23751,7 +24426,7 @@ function OhhwellsBridge() {
|
|
|
23751
24426
|
)
|
|
23752
24427
|
}
|
|
23753
24428
|
),
|
|
23754
|
-
formHoverRect && !isItemDragging && /* @__PURE__ */
|
|
24429
|
+
formHoverRect && !isItemDragging && /* @__PURE__ */ jsx34(
|
|
23755
24430
|
ItemInteractionLayer,
|
|
23756
24431
|
{
|
|
23757
24432
|
rect: formHoverRect,
|
|
@@ -23759,7 +24434,7 @@ function OhhwellsBridge() {
|
|
|
23759
24434
|
chromeGap: formHoverElRef.current && getFieldWrapper(formHoverElRef.current) ? 8 : 24
|
|
23760
24435
|
}
|
|
23761
24436
|
),
|
|
23762
|
-
fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */
|
|
24437
|
+
fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ jsx34(
|
|
23763
24438
|
ItemInteractionLayer,
|
|
23764
24439
|
{
|
|
23765
24440
|
rect: fieldPickRect,
|
|
@@ -23771,7 +24446,7 @@ function OhhwellsBridge() {
|
|
|
23771
24446
|
dragHandleLabel: "Reorder field",
|
|
23772
24447
|
onDragHandleDragStart: handleFieldDragStart,
|
|
23773
24448
|
onDragHandleDragEnd: handleFieldDragEnd,
|
|
23774
|
-
toolbar: /* @__PURE__ */
|
|
24449
|
+
toolbar: /* @__PURE__ */ jsx34(
|
|
23775
24450
|
FormFieldToolbar,
|
|
23776
24451
|
{
|
|
23777
24452
|
type: fieldPickState.type,
|
|
@@ -23784,12 +24459,12 @@ function OhhwellsBridge() {
|
|
|
23784
24459
|
)
|
|
23785
24460
|
}
|
|
23786
24461
|
),
|
|
23787
|
-
fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */
|
|
24462
|
+
fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */ jsx34(
|
|
23788
24463
|
"div",
|
|
23789
24464
|
{
|
|
23790
24465
|
className: "pointer-events-none fixed z-[2147483644]",
|
|
23791
24466
|
style: { top: slot.top, left: slot.left, width: slot.width },
|
|
23792
|
-
children: /* @__PURE__ */
|
|
24467
|
+
children: /* @__PURE__ */ jsx34(
|
|
23793
24468
|
DropIndicator,
|
|
23794
24469
|
{
|
|
23795
24470
|
direction: "horizontal",
|
|
@@ -23802,7 +24477,7 @@ function OhhwellsBridge() {
|
|
|
23802
24477
|
)) : null,
|
|
23803
24478
|
fieldTypePickerOpen && formPickRect ? (() => {
|
|
23804
24479
|
const toolbar = document.querySelector("[data-ohw-form-toolbar]")?.getBoundingClientRect();
|
|
23805
|
-
return /* @__PURE__ */
|
|
24480
|
+
return /* @__PURE__ */ jsx34(
|
|
23806
24481
|
"div",
|
|
23807
24482
|
{
|
|
23808
24483
|
className: "pointer-events-none fixed z-[2147483645]",
|
|
@@ -23810,12 +24485,12 @@ function OhhwellsBridge() {
|
|
|
23810
24485
|
top: toolbar ? toolbar.bottom + 6 : formPickRect.top + 16,
|
|
23811
24486
|
left: toolbar ? toolbar.left : formPickRect.left + 24
|
|
23812
24487
|
},
|
|
23813
|
-
children: /* @__PURE__ */
|
|
24488
|
+
children: /* @__PURE__ */ jsx34(FieldTypePicker, { onPick: handleAddField })
|
|
23814
24489
|
}
|
|
23815
24490
|
);
|
|
23816
24491
|
})() : null,
|
|
23817
|
-
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */
|
|
23818
|
-
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(
|
|
23819
24494
|
FooterContainerChrome,
|
|
23820
24495
|
{
|
|
23821
24496
|
rect: toolbarRect,
|
|
@@ -23823,7 +24498,7 @@ function OhhwellsBridge() {
|
|
|
23823
24498
|
addDisabled: !canAddFooterColumn()
|
|
23824
24499
|
}
|
|
23825
24500
|
),
|
|
23826
|
-
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */
|
|
24501
|
+
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */ jsx34(
|
|
23827
24502
|
ItemInteractionLayer,
|
|
23828
24503
|
{
|
|
23829
24504
|
rect: isItemDragging && draggedItemRect && (footerDragRef.current?.wasSelected || navDragRef.current?.wasSelected) ? draggedItemRect : toolbarRect,
|
|
@@ -23839,7 +24514,7 @@ function OhhwellsBridge() {
|
|
|
23839
24514
|
onItemPointerDown: toolbarVariant === "logo" ? void 0 : handleItemChromePointerDown,
|
|
23840
24515
|
onItemClick: toolbarVariant === "logo" ? void 0 : handleItemChromeClick,
|
|
23841
24516
|
itemDragSurface: toolbarVariant !== "logo" && !isFooterFrameSelection && !selectedIsSocialsRow,
|
|
23842
|
-
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(
|
|
23843
24518
|
ItemActionToolbar,
|
|
23844
24519
|
{
|
|
23845
24520
|
onEditLink: openLinkPopoverForSelected,
|
|
@@ -23883,8 +24558,8 @@ function OhhwellsBridge() {
|
|
|
23883
24558
|
) : void 0
|
|
23884
24559
|
}
|
|
23885
24560
|
),
|
|
23886
|
-
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && !isRectOutsideClip(toolbarRect, getIframeVisibleClip(parentScrollRef.current)) && /* @__PURE__ */
|
|
23887
|
-
/* @__PURE__ */
|
|
24561
|
+
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && !isRectOutsideClip(toolbarRect, getIframeVisibleClip(parentScrollRef.current)) && /* @__PURE__ */ jsxs21(Fragment9, { children: [
|
|
24562
|
+
/* @__PURE__ */ jsx34(
|
|
23888
24563
|
EditGlowChrome,
|
|
23889
24564
|
{
|
|
23890
24565
|
rect: toolbarRect,
|
|
@@ -23894,7 +24569,7 @@ function OhhwellsBridge() {
|
|
|
23894
24569
|
hideHandle: isItemDragging
|
|
23895
24570
|
}
|
|
23896
24571
|
),
|
|
23897
|
-
/* @__PURE__ */
|
|
24572
|
+
/* @__PURE__ */ jsx34(
|
|
23898
24573
|
FloatingToolbar,
|
|
23899
24574
|
{
|
|
23900
24575
|
rect: toolbarRect,
|
|
@@ -23907,7 +24582,7 @@ function OhhwellsBridge() {
|
|
|
23907
24582
|
}
|
|
23908
24583
|
)
|
|
23909
24584
|
] }),
|
|
23910
|
-
maxBadge && /* @__PURE__ */
|
|
24585
|
+
maxBadge && /* @__PURE__ */ jsxs21(
|
|
23911
24586
|
"div",
|
|
23912
24587
|
{
|
|
23913
24588
|
"data-ohw-max-badge": "",
|
|
@@ -23933,7 +24608,7 @@ function OhhwellsBridge() {
|
|
|
23933
24608
|
]
|
|
23934
24609
|
}
|
|
23935
24610
|
),
|
|
23936
|
-
toggleState && !linkPopover && /* @__PURE__ */
|
|
24611
|
+
toggleState && !linkPopover && /* @__PURE__ */ jsx34(
|
|
23937
24612
|
StateToggle,
|
|
23938
24613
|
{
|
|
23939
24614
|
rect: toggleState.rect,
|
|
@@ -23942,15 +24617,15 @@ function OhhwellsBridge() {
|
|
|
23942
24617
|
onStateChange: handleStateChange
|
|
23943
24618
|
}
|
|
23944
24619
|
),
|
|
23945
|
-
sectionGap && !linkPopover && /* @__PURE__ */
|
|
24620
|
+
sectionGap && !linkPopover && /* @__PURE__ */ jsxs21(
|
|
23946
24621
|
"div",
|
|
23947
24622
|
{
|
|
23948
24623
|
"data-ohw-section-insert-line": "",
|
|
23949
24624
|
className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
|
|
23950
24625
|
style: { top: sectionGap.y, transform: "translateY(-50%)" },
|
|
23951
24626
|
children: [
|
|
23952
|
-
/* @__PURE__ */
|
|
23953
|
-
/* @__PURE__ */
|
|
24627
|
+
/* @__PURE__ */ jsx34("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } }),
|
|
24628
|
+
/* @__PURE__ */ jsx34(
|
|
23954
24629
|
Badge,
|
|
23955
24630
|
{
|
|
23956
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",
|
|
@@ -23967,11 +24642,11 @@ function OhhwellsBridge() {
|
|
|
23967
24642
|
children: "Add Section"
|
|
23968
24643
|
}
|
|
23969
24644
|
),
|
|
23970
|
-
/* @__PURE__ */
|
|
24645
|
+
/* @__PURE__ */ jsx34("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } })
|
|
23971
24646
|
]
|
|
23972
24647
|
}
|
|
23973
24648
|
),
|
|
23974
|
-
linkPopover && dialogPortalContainer ? /* @__PURE__ */
|
|
24649
|
+
linkPopover && dialogPortalContainer ? /* @__PURE__ */ jsx34(
|
|
23975
24650
|
LinkPopover,
|
|
23976
24651
|
{
|
|
23977
24652
|
panelRef: linkPopoverPanelRef,
|
|
@@ -23988,7 +24663,7 @@ function OhhwellsBridge() {
|
|
|
23988
24663
|
},
|
|
23989
24664
|
linkPopover.key
|
|
23990
24665
|
) : null,
|
|
23991
|
-
floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */
|
|
24666
|
+
floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */ jsx34(
|
|
23992
24667
|
FloatingPanel,
|
|
23993
24668
|
{
|
|
23994
24669
|
open: true,
|
|
@@ -23998,7 +24673,7 @@ function OhhwellsBridge() {
|
|
|
23998
24673
|
onPositionChange: setFloatingPanelPos,
|
|
23999
24674
|
parentScroll: parentScrollSnap ?? parentScrollRef.current,
|
|
24000
24675
|
onClose: closeFloatingPanelOnly,
|
|
24001
|
-
children: /* @__PURE__ */
|
|
24676
|
+
children: /* @__PURE__ */ jsx34(
|
|
24002
24677
|
SocialsDisplayPanel,
|
|
24003
24678
|
{
|
|
24004
24679
|
display: socialsDisplayFor(floatingPanel.row, editContentRef.current),
|