@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.cjs
CHANGED
|
@@ -74,7 +74,7 @@ __export(index_exports, {
|
|
|
74
74
|
module.exports = __toCommonJS(index_exports);
|
|
75
75
|
|
|
76
76
|
// src/OhhwellsBridge.tsx
|
|
77
|
-
var
|
|
77
|
+
var import_react18 = __toESM(require("react"), 1);
|
|
78
78
|
var import_client2 = require("react-dom/client");
|
|
79
79
|
var import_react_dom4 = require("react-dom");
|
|
80
80
|
|
|
@@ -175,13 +175,15 @@ function serializeAiSectionsState(state) {
|
|
|
175
175
|
}
|
|
176
176
|
function applyTreeToState(state, payload) {
|
|
177
177
|
const insertBefore = payload.mode === "insert" && payload.position === "before";
|
|
178
|
+
const priorEntry = state.sections.find((existing) => existing.id === payload.id);
|
|
179
|
+
const selfEdit = payload.mode === "replace" && payload.targetSectionId === payload.id;
|
|
178
180
|
const entry = {
|
|
179
181
|
id: payload.id,
|
|
180
182
|
label: payload.label ?? "Generated section",
|
|
181
183
|
...typeof payload.path === "string" && payload.path ? { path: payload.path } : {},
|
|
182
|
-
afterSection: payload.mode === "insert" && !insertBefore ? payload.targetSectionId ?? null : null,
|
|
183
|
-
...insertBefore && payload.targetSectionId ? { beforeSection: payload.targetSectionId } : {},
|
|
184
|
-
...payload.mode === "replace" && payload.targetSectionId ? { replaces: payload.targetSectionId } : {},
|
|
184
|
+
afterSection: selfEdit ? priorEntry?.afterSection ?? null : payload.mode === "insert" && !insertBefore ? payload.targetSectionId ?? null : null,
|
|
185
|
+
...selfEdit ? priorEntry?.beforeSection ? { beforeSection: priorEntry.beforeSection } : {} : insertBefore && payload.targetSectionId ? { beforeSection: payload.targetSectionId } : {},
|
|
186
|
+
...selfEdit ? priorEntry?.replaces ? { replaces: priorEntry.replaces } : {} : payload.mode === "replace" && payload.targetSectionId ? { replaces: payload.targetSectionId } : {},
|
|
185
187
|
tree: payload.tree,
|
|
186
188
|
media: payload.media ?? {},
|
|
187
189
|
...payload.brand && typeof payload.brand === "object" ? { brand: payload.brand } : {}
|
|
@@ -1362,9 +1364,6 @@ var typeStyle = (spec, font) => ({
|
|
|
1362
1364
|
var str = (value) => typeof value === "string" ? value : "";
|
|
1363
1365
|
var cardRadius = (slots) => slots.cornerStyle === "sharp" ? 0 : AI_TREE_TOKENS.radiusCard;
|
|
1364
1366
|
var featureLines = (value) => value.split(/\n|<br\s*\/?>/i).map((line) => line.trim()).filter(Boolean);
|
|
1365
|
-
var CHECK_MASK = `data:image/svg+xml,${encodeURIComponent(
|
|
1366
|
-
'<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>'
|
|
1367
|
-
)}`;
|
|
1368
1367
|
var AI_MOBILE_CSS = [
|
|
1369
1368
|
"@media (max-width: 768px){",
|
|
1370
1369
|
"[data-ai-section]{overflow-x:hidden}",
|
|
@@ -1381,12 +1380,6 @@ var AI_MOBILE_CSS = [
|
|
|
1381
1380
|
"[data-ai-grid]{grid-template-columns:repeat(2, 1fr) !important}",
|
|
1382
1381
|
"}"
|
|
1383
1382
|
].join("");
|
|
1384
|
-
var FEATURE_LINE_CSS = [
|
|
1385
|
-
"[data-ai-features]>div{position:relative;padding-left:40px;min-height:24px}",
|
|
1386
|
-
'[data-ai-features]>div::before{content:"";position:absolute;left:0;top:1px;width:24px;height:24px;',
|
|
1387
|
-
`background-color:currentColor;-webkit-mask:url("${CHECK_MASK}") no-repeat 0 0/24px 24px;`,
|
|
1388
|
-
`mask:url("${CHECK_MASK}") no-repeat 0 0/24px 24px}`
|
|
1389
|
-
].join("");
|
|
1390
1383
|
function buttonShellStyle(ctx, fullWidth) {
|
|
1391
1384
|
const bs = ctx.buttonStyle;
|
|
1392
1385
|
if (bs) {
|
|
@@ -1442,6 +1435,58 @@ function accentBandContext(brand) {
|
|
|
1442
1435
|
buttonLabel: p.light
|
|
1443
1436
|
};
|
|
1444
1437
|
}
|
|
1438
|
+
function readableForeground(bg, brand) {
|
|
1439
|
+
const darkC = hexContrast(bg, brand.palette.dark);
|
|
1440
|
+
const lightC = hexContrast(bg, AI_TREE_TOKENS.textPrimaryForeground);
|
|
1441
|
+
if (darkC === null || lightC === null) return brand.palette.dark;
|
|
1442
|
+
return darkC > lightC ? brand.palette.dark : AI_TREE_TOKENS.textPrimaryForeground;
|
|
1443
|
+
}
|
|
1444
|
+
function hexWithAlpha(hex, alpha) {
|
|
1445
|
+
const m = /^#([0-9a-f]{6})$/i.exec(hex.trim());
|
|
1446
|
+
if (!m) return hex;
|
|
1447
|
+
const r2 = parseInt(m[1].slice(0, 2), 16);
|
|
1448
|
+
const g = parseInt(m[1].slice(2, 4), 16);
|
|
1449
|
+
const b = parseInt(m[1].slice(4, 6), 16);
|
|
1450
|
+
return `rgba(${r2}, ${g}, ${b}, ${alpha})`;
|
|
1451
|
+
}
|
|
1452
|
+
function pricingIconColor(token, brand, fallback) {
|
|
1453
|
+
switch (token) {
|
|
1454
|
+
case "primary":
|
|
1455
|
+
return brand.palette.primary;
|
|
1456
|
+
case "accent":
|
|
1457
|
+
return brand.palette.accent;
|
|
1458
|
+
case "light":
|
|
1459
|
+
return brand.palette.light;
|
|
1460
|
+
case "muted":
|
|
1461
|
+
return hexWithAlpha(brand.palette.dark, 0.45);
|
|
1462
|
+
case "dark":
|
|
1463
|
+
return brand.palette.dark;
|
|
1464
|
+
default:
|
|
1465
|
+
return fallback;
|
|
1466
|
+
}
|
|
1467
|
+
}
|
|
1468
|
+
var PRICING_LIFTED_SHADOW = "0 24px 48px -16px rgba(12, 10, 9, 0.28)";
|
|
1469
|
+
function pricingCardEmphasis(featured, ctx, hasBg) {
|
|
1470
|
+
const dark = ctx.brand.palette.dark;
|
|
1471
|
+
const background = hasBg ? ctx.brand.palette.light : "transparent";
|
|
1472
|
+
const border = `1px solid ${dark}`;
|
|
1473
|
+
if (!featured.enabled) {
|
|
1474
|
+
return { background, border, fg: dark };
|
|
1475
|
+
}
|
|
1476
|
+
switch (featured.treatment) {
|
|
1477
|
+
case "lifted":
|
|
1478
|
+
return { background, border, boxShadow: PRICING_LIFTED_SHADOW, fg: dark };
|
|
1479
|
+
case "inverted":
|
|
1480
|
+
return { background: dark, border, fg: ctx.brand.palette.light };
|
|
1481
|
+
case "accent-header": {
|
|
1482
|
+
const headerBg = ctx.brand.palette.accent;
|
|
1483
|
+
return { background, border, fg: dark, headerBg, headerFg: readableForeground(headerBg, ctx.brand) };
|
|
1484
|
+
}
|
|
1485
|
+
case "outlined":
|
|
1486
|
+
default:
|
|
1487
|
+
return { background, border, outline: `2px solid ${ctx.brand.palette.primary}`, fg: dark };
|
|
1488
|
+
}
|
|
1489
|
+
}
|
|
1445
1490
|
function textAttrs(ctx, path) {
|
|
1446
1491
|
return ctx.keyFor ? { "data-ohw-key": ctx.keyFor(path), "data-ohw-editable": "text" } : {};
|
|
1447
1492
|
}
|
|
@@ -1512,7 +1557,8 @@ function ButtonEl({
|
|
|
1512
1557
|
slots,
|
|
1513
1558
|
ctx,
|
|
1514
1559
|
path,
|
|
1515
|
-
fullWidth
|
|
1560
|
+
fullWidth,
|
|
1561
|
+
secondaryColor
|
|
1516
1562
|
}) {
|
|
1517
1563
|
const secondary = slots.variant === "secondary";
|
|
1518
1564
|
const href = str(slots.href);
|
|
@@ -1529,8 +1575,9 @@ function ButtonEl({
|
|
|
1529
1575
|
justifyContent: "center",
|
|
1530
1576
|
textDecoration: "none",
|
|
1531
1577
|
cursor: "pointer",
|
|
1578
|
+
whiteSpace: "nowrap",
|
|
1532
1579
|
...buttonShellStyle(ctx, fullWidth),
|
|
1533
|
-
...secondary ? { border: `1px solid ${ctx.brand.palette.dark}`, color: ctx.brand.palette.dark } : (
|
|
1580
|
+
...secondary ? { border: `1px solid ${secondaryColor ?? ctx.brand.palette.dark}`, color: secondaryColor ?? ctx.brand.palette.dark } : (
|
|
1534
1581
|
// Off-band, prefer the template button's measured fill/label pair — a template may
|
|
1535
1582
|
// fill its CTAs with any token (hvac: accent bg, primary text). On an accent band
|
|
1536
1583
|
// the flipped palette keeps contrast, so the brand-driven colours stay.
|
|
@@ -1701,89 +1748,141 @@ function PersonEl({
|
|
|
1701
1748
|
] })
|
|
1702
1749
|
] });
|
|
1703
1750
|
}
|
|
1751
|
+
function pricingFeatureItems(rawFeatures) {
|
|
1752
|
+
if (typeof rawFeatures === "string") {
|
|
1753
|
+
return featureLines(rawFeatures).map((text) => ({ text, html: true }));
|
|
1754
|
+
}
|
|
1755
|
+
if (!Array.isArray(rawFeatures)) return [];
|
|
1756
|
+
return rawFeatures.filter((item) => !!item && typeof item === "object" && typeof item.text === "string").map((item) => ({
|
|
1757
|
+
text: item.text,
|
|
1758
|
+
icon: typeof item.icon === "string" ? item.icon : void 0,
|
|
1759
|
+
iconColor: typeof item.iconColor === "string" ? item.iconColor : void 0
|
|
1760
|
+
}));
|
|
1761
|
+
}
|
|
1762
|
+
function pricingFeaturedConfig(raw) {
|
|
1763
|
+
if (raw === true) return { enabled: true };
|
|
1764
|
+
if (raw && typeof raw === "object" && !Array.isArray(raw)) return raw;
|
|
1765
|
+
return {};
|
|
1766
|
+
}
|
|
1704
1767
|
function PricingCard({ node, ctx, path }) {
|
|
1705
1768
|
const slots = node.slots ?? {};
|
|
1706
1769
|
const hasBg = slots.background === true;
|
|
1707
|
-
const
|
|
1708
|
-
const
|
|
1709
|
-
const
|
|
1710
|
-
const features =
|
|
1770
|
+
const featured = pricingFeaturedConfig(slots.featured);
|
|
1771
|
+
const emphasis = pricingCardEmphasis(featured, ctx, hasBg);
|
|
1772
|
+
const fg = emphasis.fg;
|
|
1773
|
+
const features = pricingFeatureItems(slots.features);
|
|
1774
|
+
const buttons = (node.children ?? []).map((child, i) => ({ child, i })).filter((entry) => entry.child.type === "button");
|
|
1775
|
+
const headingBlock = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: AI_TREE_TOKENS.spacing2 }, children: [
|
|
1776
|
+
str(slots.heading) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1777
|
+
"div",
|
|
1778
|
+
{
|
|
1779
|
+
...textAttrs(ctx, `${path}.heading`),
|
|
1780
|
+
style: { ...typeStyle({ size: 20, line: 1.4, weight: 700 }, ctx.brand.fonts.body), color: emphasis.headerFg ?? fg },
|
|
1781
|
+
children: str(slots.heading)
|
|
1782
|
+
}
|
|
1783
|
+
),
|
|
1784
|
+
str(slots.price) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "baseline", color: emphasis.headerFg ?? fg }, children: [
|
|
1785
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...textAttrs(ctx, `${path}.price`), style: typeStyle(AI_TREE_TOKENS.type.display, ctx.brand.fonts.heading), children: str(slots.price) }),
|
|
1786
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1787
|
+
"span",
|
|
1788
|
+
{
|
|
1789
|
+
...textAttrs(ctx, `${path}.pricePeriod`),
|
|
1790
|
+
style: typeStyle({ size: 32, line: 1.25, weight: 700 }, ctx.brand.fonts.heading),
|
|
1791
|
+
children: str(slots.pricePeriod)
|
|
1792
|
+
}
|
|
1793
|
+
)
|
|
1794
|
+
] }),
|
|
1795
|
+
str(slots.text) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1796
|
+
"div",
|
|
1797
|
+
{
|
|
1798
|
+
...textAttrs(ctx, `${path}.text`),
|
|
1799
|
+
style: { ...typeStyle({ size: 18, line: 1.45, weight: 700 }, ctx.brand.fonts.body), color: emphasis.headerFg ?? fg },
|
|
1800
|
+
dangerouslySetInnerHTML: { __html: str(slots.text) }
|
|
1801
|
+
}
|
|
1802
|
+
)
|
|
1803
|
+
] });
|
|
1711
1804
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
1712
1805
|
"div",
|
|
1713
1806
|
{
|
|
1714
1807
|
"data-ohw-card": "",
|
|
1808
|
+
"data-ohw-pricing-card": "",
|
|
1809
|
+
"data-ohw-pricing-index": pricingIndexFromPath(path),
|
|
1715
1810
|
style: {
|
|
1716
|
-
background:
|
|
1717
|
-
border:
|
|
1811
|
+
background: emphasis.background,
|
|
1812
|
+
border: emphasis.border,
|
|
1718
1813
|
borderRadius: cardRadius(slots),
|
|
1719
1814
|
padding: AI_TREE_TOKENS.paddingBlock,
|
|
1720
1815
|
display: "flex",
|
|
1721
1816
|
flexDirection: "column",
|
|
1722
1817
|
gap: AI_TREE_TOKENS.spacing8,
|
|
1723
|
-
outline:
|
|
1724
|
-
|
|
1818
|
+
outline: emphasis.outline,
|
|
1819
|
+
boxShadow: emphasis.boxShadow,
|
|
1820
|
+
minWidth: 0,
|
|
1821
|
+
position: "relative"
|
|
1725
1822
|
},
|
|
1726
1823
|
children: [
|
|
1727
|
-
/* @__PURE__ */ (0, import_jsx_runtime.
|
|
1728
|
-
|
|
1729
|
-
|
|
1730
|
-
{
|
|
1731
|
-
|
|
1732
|
-
|
|
1733
|
-
|
|
1734
|
-
|
|
1735
|
-
|
|
1736
|
-
|
|
1737
|
-
|
|
1738
|
-
|
|
1739
|
-
|
|
1740
|
-
|
|
1741
|
-
|
|
1742
|
-
|
|
1743
|
-
|
|
1744
|
-
|
|
1745
|
-
|
|
1746
|
-
|
|
1747
|
-
|
|
1748
|
-
|
|
1749
|
-
|
|
1750
|
-
|
|
1751
|
-
|
|
1752
|
-
|
|
1753
|
-
|
|
1754
|
-
)
|
|
1755
|
-
] }),
|
|
1756
|
-
features && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
1757
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", { style: { border: "none", borderTop: `1px solid ${dark}`, opacity: 0.2, margin: 0, width: "100%" } }),
|
|
1824
|
+
featured.enabled && str(featured.badge) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1825
|
+
"div",
|
|
1826
|
+
{
|
|
1827
|
+
style: {
|
|
1828
|
+
alignSelf: "flex-start",
|
|
1829
|
+
padding: `${AI_TREE_TOKENS.spacing2 / 2}px ${AI_TREE_TOKENS.spacing3}px`,
|
|
1830
|
+
borderRadius: 999,
|
|
1831
|
+
background: ctx.brand.palette.primary,
|
|
1832
|
+
color: primaryButtonLabel(ctx.brand),
|
|
1833
|
+
...typeStyle(AI_TREE_TOKENS.type.eyebrow, ctx.brand.fonts.body)
|
|
1834
|
+
},
|
|
1835
|
+
children: str(featured.badge)
|
|
1836
|
+
}
|
|
1837
|
+
),
|
|
1838
|
+
emphasis.headerBg ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1839
|
+
"div",
|
|
1840
|
+
{
|
|
1841
|
+
style: {
|
|
1842
|
+
background: emphasis.headerBg,
|
|
1843
|
+
margin: `-${AI_TREE_TOKENS.paddingBlock}px -${AI_TREE_TOKENS.paddingBlock}px 0`,
|
|
1844
|
+
padding: AI_TREE_TOKENS.paddingBlock,
|
|
1845
|
+
borderRadius: `${cardRadius(slots)}px ${cardRadius(slots)}px 0 0`
|
|
1846
|
+
},
|
|
1847
|
+
children: headingBlock
|
|
1848
|
+
}
|
|
1849
|
+
) : headingBlock,
|
|
1850
|
+
features.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
1851
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", { style: { border: "none", borderTop: `1px solid ${fg}`, opacity: 0.2, margin: 0, width: "100%" } }),
|
|
1758
1852
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: AI_TREE_TOKENS.spacing4 }, children: [
|
|
1759
1853
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1760
1854
|
"div",
|
|
1761
1855
|
{
|
|
1762
1856
|
...textAttrs(ctx, `${path}.featuresLabel`),
|
|
1763
|
-
style: { ...typeStyle({ size: 24, line: 1.3, weight: 700 }, ctx.brand.fonts.body), color:
|
|
1857
|
+
style: { ...typeStyle({ size: 24, line: 1.3, weight: 700 }, ctx.brand.fonts.body), color: fg },
|
|
1764
1858
|
children: str(slots.featuresLabel) || "Includes:"
|
|
1765
1859
|
}
|
|
1766
1860
|
),
|
|
1767
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children:
|
|
1768
|
-
|
|
1769
|
-
|
|
1770
|
-
{
|
|
1771
|
-
|
|
1772
|
-
|
|
1773
|
-
|
|
1774
|
-
|
|
1775
|
-
|
|
1776
|
-
|
|
1777
|
-
|
|
1778
|
-
|
|
1779
|
-
|
|
1780
|
-
|
|
1781
|
-
|
|
1782
|
-
|
|
1783
|
-
|
|
1861
|
+
/* @__PURE__ */ (0, import_jsx_runtime.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) => {
|
|
1862
|
+
const Icon = lucideByName(item.icon || "check");
|
|
1863
|
+
const iconColor = pricingIconColor(item.iconColor, ctx.brand, fg);
|
|
1864
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "flex-start", gap: AI_TREE_TOKENS.spacing3 }, children: [
|
|
1865
|
+
Icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size: 20, color: iconColor }),
|
|
1866
|
+
item.html ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1867
|
+
"span",
|
|
1868
|
+
{
|
|
1869
|
+
...textAttrs(ctx, `${path}.features.${i}.text`),
|
|
1870
|
+
style: { ...typeStyle(AI_TREE_TOKENS.type.bodyL, ctx.brand.fonts.body), color: fg },
|
|
1871
|
+
dangerouslySetInnerHTML: { __html: item.text }
|
|
1872
|
+
}
|
|
1873
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1874
|
+
"span",
|
|
1875
|
+
{
|
|
1876
|
+
...textAttrs(ctx, `${path}.features.${i}.text`),
|
|
1877
|
+
style: { ...typeStyle(AI_TREE_TOKENS.type.bodyL, ctx.brand.fonts.body), color: fg },
|
|
1878
|
+
children: item.text
|
|
1879
|
+
}
|
|
1880
|
+
)
|
|
1881
|
+
] }, i);
|
|
1882
|
+
}) })
|
|
1784
1883
|
] })
|
|
1785
1884
|
] }),
|
|
1786
|
-
|
|
1885
|
+
buttons.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: AI_TREE_TOKENS.spacing3 }, children: buttons.map(({ child, i }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonEl, { slots: child.slots ?? {}, ctx, path: `${path}.c${i}`, fullWidth: true, secondaryColor: fg }, i)) })
|
|
1787
1886
|
]
|
|
1788
1887
|
}
|
|
1789
1888
|
);
|
|
@@ -2280,6 +2379,14 @@ function Carousel({ items, itemsPerRow, ctx }) {
|
|
|
2280
2379
|
dots
|
|
2281
2380
|
] });
|
|
2282
2381
|
}
|
|
2382
|
+
function isPricingCardCollection(children) {
|
|
2383
|
+
const first = children[0];
|
|
2384
|
+
return !!first && first.type === "card" && first.slots?.preset === "pricing";
|
|
2385
|
+
}
|
|
2386
|
+
function pricingIndexFromPath(path) {
|
|
2387
|
+
const m = /\.c(\d+)$/.exec(path);
|
|
2388
|
+
return m ? Number(m[1]) : 0;
|
|
2389
|
+
}
|
|
2283
2390
|
function CollectionBlock({ node, ctx, path }) {
|
|
2284
2391
|
const slots = node.slots ?? {};
|
|
2285
2392
|
const behavior = str(slots.behavior);
|
|
@@ -2288,6 +2395,7 @@ function CollectionBlock({ node, ctx, path }) {
|
|
|
2288
2395
|
// itemsPerRow is a grid-only slot; carousels show up to 4 and page the rest.
|
|
2289
2396
|
Math.min(4, children.length)
|
|
2290
2397
|
) : children.length;
|
|
2398
|
+
const isPricing = isPricingCardCollection(children);
|
|
2291
2399
|
const rendered = children.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { minWidth: 0 }, children: renderNode(child, ctx, `${path}.c${i}`) }, i));
|
|
2292
2400
|
if (behavior === "marquee") {
|
|
2293
2401
|
if (children.every((child) => child.type === "media")) {
|
|
@@ -2353,10 +2461,14 @@ function CollectionBlock({ node, ctx, path }) {
|
|
|
2353
2461
|
if (behavior === "carousel") {
|
|
2354
2462
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Carousel, { items: rendered, itemsPerRow, ctx });
|
|
2355
2463
|
}
|
|
2464
|
+
if (children.length === 1 && isPricing) {
|
|
2465
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-ohw-pricing-collection": "", style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: "100%", maxWidth: 420, minWidth: 0 }, children: rendered[0] }) });
|
|
2466
|
+
}
|
|
2356
2467
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2357
2468
|
"div",
|
|
2358
2469
|
{
|
|
2359
2470
|
"data-ai-grid": "",
|
|
2471
|
+
"data-ohw-pricing-collection": isPricing ? "" : void 0,
|
|
2360
2472
|
style: {
|
|
2361
2473
|
display: "grid",
|
|
2362
2474
|
gridTemplateColumns: `repeat(${itemsPerRow}, 1fr)`,
|
|
@@ -3134,7 +3246,9 @@ function applyAiSectionsToDom(state, options) {
|
|
|
3134
3246
|
continue;
|
|
3135
3247
|
}
|
|
3136
3248
|
let container = existing?.container;
|
|
3249
|
+
let isNewMount = false;
|
|
3137
3250
|
if (!container || !container.isConnected) {
|
|
3251
|
+
isNewMount = true;
|
|
3138
3252
|
existing?.root.unmount();
|
|
3139
3253
|
container?.remove();
|
|
3140
3254
|
container = document.createElement("div");
|
|
@@ -3144,7 +3258,7 @@ function applyAiSectionsToDom(state, options) {
|
|
|
3144
3258
|
container.setAttribute("data-ohw-section", entry.id);
|
|
3145
3259
|
container.setAttribute("data-ohw-instance", entry.id);
|
|
3146
3260
|
container.setAttribute("data-ohw-section-label", entry.label);
|
|
3147
|
-
placeContainer(container, entry);
|
|
3261
|
+
if (isNewMount) placeContainer(container, entry);
|
|
3148
3262
|
const root = mounted.get(entry.id)?.root ?? (0, import_client.createRoot)(container);
|
|
3149
3263
|
const resolveMedia = (ref) => entry.media[ref] ?? null;
|
|
3150
3264
|
(0, import_react_dom.flushSync)(() => {
|
|
@@ -9661,6 +9775,514 @@ function AiSectionOverlay({
|
|
|
9661
9775
|
] });
|
|
9662
9776
|
}
|
|
9663
9777
|
|
|
9778
|
+
// src/ui/ai-section/AiPricingCardOverlay.tsx
|
|
9779
|
+
var import_react9 = require("react");
|
|
9780
|
+
var import_lucide_react8 = require("lucide-react");
|
|
9781
|
+
|
|
9782
|
+
// src/lib/ai-pricing-tree.ts
|
|
9783
|
+
var PRICING_MIN_CARDS = 1;
|
|
9784
|
+
var PRICING_MAX_CARDS = 4;
|
|
9785
|
+
function isPricingCard(node) {
|
|
9786
|
+
return typeof node === "object" && node !== null && node.type === "card" && node.slots?.preset === "pricing";
|
|
9787
|
+
}
|
|
9788
|
+
function isPricingCollection(node) {
|
|
9789
|
+
return node.type === "collection" && Array.isArray(node.children) && node.children.length > 0 && isPricingCard(node.children[0]);
|
|
9790
|
+
}
|
|
9791
|
+
function findCollection(node) {
|
|
9792
|
+
if (isPricingCollection(node)) return node;
|
|
9793
|
+
for (const child of node.children ?? []) {
|
|
9794
|
+
const found = findCollection(child);
|
|
9795
|
+
if (found) return found;
|
|
9796
|
+
}
|
|
9797
|
+
return null;
|
|
9798
|
+
}
|
|
9799
|
+
function findPricingCollection(tree) {
|
|
9800
|
+
for (const row of tree.rows ?? []) {
|
|
9801
|
+
for (const block of row.blocks ?? []) {
|
|
9802
|
+
const found = findCollection(block);
|
|
9803
|
+
if (found) return found;
|
|
9804
|
+
}
|
|
9805
|
+
}
|
|
9806
|
+
return null;
|
|
9807
|
+
}
|
|
9808
|
+
function pricingCardCount(tree) {
|
|
9809
|
+
return findPricingCollection(tree)?.children?.length ?? 0;
|
|
9810
|
+
}
|
|
9811
|
+
function withPricingCollection(tree, mutate) {
|
|
9812
|
+
const next = JSON.parse(JSON.stringify(tree));
|
|
9813
|
+
const collection = findPricingCollection(next);
|
|
9814
|
+
if (!collection || !collection.children) return null;
|
|
9815
|
+
return mutate(collection) ? next : null;
|
|
9816
|
+
}
|
|
9817
|
+
function addPricingTier(tree) {
|
|
9818
|
+
return withPricingCollection(tree, (collection) => {
|
|
9819
|
+
const children = collection.children;
|
|
9820
|
+
if (children.length >= PRICING_MAX_CARDS) return false;
|
|
9821
|
+
const clone = JSON.parse(JSON.stringify(children[children.length - 1]));
|
|
9822
|
+
clone.slots = clone.slots ?? {};
|
|
9823
|
+
delete clone.slots.featured;
|
|
9824
|
+
clone.slots.heading = "New tier";
|
|
9825
|
+
children.push(clone);
|
|
9826
|
+
collection.slots = { ...collection.slots, itemsPerRow: children.length };
|
|
9827
|
+
return true;
|
|
9828
|
+
});
|
|
9829
|
+
}
|
|
9830
|
+
function removePricingTier(tree, index) {
|
|
9831
|
+
return withPricingCollection(tree, (collection) => {
|
|
9832
|
+
const children = collection.children;
|
|
9833
|
+
if (children.length <= PRICING_MIN_CARDS) return false;
|
|
9834
|
+
if (index < 0 || index >= children.length) return false;
|
|
9835
|
+
children.splice(index, 1);
|
|
9836
|
+
collection.slots = { ...collection.slots, itemsPerRow: children.length };
|
|
9837
|
+
return true;
|
|
9838
|
+
});
|
|
9839
|
+
}
|
|
9840
|
+
function setPricingCardFeatured(tree, index, patch) {
|
|
9841
|
+
return withPricingCollection(tree, (collection) => {
|
|
9842
|
+
const children = collection.children;
|
|
9843
|
+
if (index < 0 || index >= children.length) return false;
|
|
9844
|
+
const target = children[index];
|
|
9845
|
+
target.slots = target.slots ?? {};
|
|
9846
|
+
target.slots.featured = { ...patch };
|
|
9847
|
+
return true;
|
|
9848
|
+
});
|
|
9849
|
+
}
|
|
9850
|
+
function addPricingCardButton(tree, index, label) {
|
|
9851
|
+
return withPricingCollection(tree, (collection) => {
|
|
9852
|
+
const children = collection.children;
|
|
9853
|
+
if (index < 0 || index >= children.length) return false;
|
|
9854
|
+
const target = children[index];
|
|
9855
|
+
const buttons = (target.children ?? []).filter((c) => c.type === "button");
|
|
9856
|
+
if (buttons.length >= 2) return false;
|
|
9857
|
+
const hasPrimary = buttons.some((b) => b.slots?.variant === "primary");
|
|
9858
|
+
target.children = [
|
|
9859
|
+
...target.children ?? [],
|
|
9860
|
+
{ type: "button", span: 12, slots: { label, href: "#", variant: hasPrimary ? "secondary" : "primary" } }
|
|
9861
|
+
];
|
|
9862
|
+
return true;
|
|
9863
|
+
});
|
|
9864
|
+
}
|
|
9865
|
+
function removePricingCardButton(tree, index) {
|
|
9866
|
+
return withPricingCollection(tree, (collection) => {
|
|
9867
|
+
const children = collection.children;
|
|
9868
|
+
if (index < 0 || index >= children.length) return false;
|
|
9869
|
+
const target = children[index];
|
|
9870
|
+
const buttons = (target.children ?? []).filter((c) => c.type === "button");
|
|
9871
|
+
if (buttons.length === 0) return false;
|
|
9872
|
+
const lastButton = buttons[buttons.length - 1];
|
|
9873
|
+
target.children = (target.children ?? []).filter((c) => c !== lastButton);
|
|
9874
|
+
return true;
|
|
9875
|
+
});
|
|
9876
|
+
}
|
|
9877
|
+
var PRICING_FEATURES_MIN = 1;
|
|
9878
|
+
var PRICING_FEATURES_MAX = 10;
|
|
9879
|
+
function pricingFeatureList(target) {
|
|
9880
|
+
const raw = target.slots?.features;
|
|
9881
|
+
if (Array.isArray(raw)) {
|
|
9882
|
+
return raw.filter((item) => !!item && typeof item === "object" && typeof item.text === "string").map((item) => ({
|
|
9883
|
+
text: item.text,
|
|
9884
|
+
...typeof item.icon === "string" ? { icon: item.icon } : {},
|
|
9885
|
+
...typeof item.iconColor === "string" ? { iconColor: item.iconColor } : {}
|
|
9886
|
+
}));
|
|
9887
|
+
}
|
|
9888
|
+
if (typeof raw === "string") {
|
|
9889
|
+
return raw.split("\n").map((line) => line.replace(/^[-*•]\s*/, "").trim()).filter(Boolean).map((text) => ({ text }));
|
|
9890
|
+
}
|
|
9891
|
+
return [];
|
|
9892
|
+
}
|
|
9893
|
+
function pricingCardFeatureCount(tree, index) {
|
|
9894
|
+
const target = findPricingCollection(tree)?.children?.[index];
|
|
9895
|
+
return target ? pricingFeatureList(target).length : 0;
|
|
9896
|
+
}
|
|
9897
|
+
function addPricingCardFeature(tree, index, text) {
|
|
9898
|
+
return withPricingCollection(tree, (collection) => {
|
|
9899
|
+
const children = collection.children;
|
|
9900
|
+
if (index < 0 || index >= children.length) return false;
|
|
9901
|
+
const target = children[index];
|
|
9902
|
+
const features = pricingFeatureList(target);
|
|
9903
|
+
if (features.length >= PRICING_FEATURES_MAX) return false;
|
|
9904
|
+
target.slots = target.slots ?? {};
|
|
9905
|
+
target.slots.features = [...features, { text }];
|
|
9906
|
+
return true;
|
|
9907
|
+
});
|
|
9908
|
+
}
|
|
9909
|
+
function removePricingCardFeature(tree, index) {
|
|
9910
|
+
return withPricingCollection(tree, (collection) => {
|
|
9911
|
+
const children = collection.children;
|
|
9912
|
+
if (index < 0 || index >= children.length) return false;
|
|
9913
|
+
const target = children[index];
|
|
9914
|
+
const features = pricingFeatureList(target);
|
|
9915
|
+
if (features.length <= PRICING_FEATURES_MIN) return false;
|
|
9916
|
+
target.slots = target.slots ?? {};
|
|
9917
|
+
target.slots.features = features.slice(0, -1);
|
|
9918
|
+
return true;
|
|
9919
|
+
});
|
|
9920
|
+
}
|
|
9921
|
+
|
|
9922
|
+
// src/ui/ai-section/AiPricingCardOverlay.tsx
|
|
9923
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
9924
|
+
var EMPHASIS_TREATMENTS = [
|
|
9925
|
+
{ value: "outlined", label: "Outline" },
|
|
9926
|
+
{ value: "lifted", label: "Lift" },
|
|
9927
|
+
{ value: "inverted", label: "Invert" },
|
|
9928
|
+
{ value: "accent-header", label: "Header" }
|
|
9929
|
+
];
|
|
9930
|
+
var PRIMARY3 = "#0885FE";
|
|
9931
|
+
var OHW_BLUE = `var(--ohw-primary, ${PRIMARY3})`;
|
|
9932
|
+
var OHW_BLUE_DARK = `color-mix(in srgb, var(--ohw-primary, ${PRIMARY3}) 60%, #000000)`;
|
|
9933
|
+
function findPricingCardElement(sectionId, index) {
|
|
9934
|
+
const sectionEl = findByInstanceId(sectionId);
|
|
9935
|
+
if (!sectionEl) return null;
|
|
9936
|
+
const cards = sectionEl.querySelectorAll("[data-ohw-pricing-card]");
|
|
9937
|
+
for (const el of Array.from(cards)) {
|
|
9938
|
+
if (Number(el.dataset.ohwPricingIndex) === index) return el;
|
|
9939
|
+
}
|
|
9940
|
+
return null;
|
|
9941
|
+
}
|
|
9942
|
+
function readRect2(ref) {
|
|
9943
|
+
const el = ref && findPricingCardElement(ref.sectionId, ref.index);
|
|
9944
|
+
if (!el) return null;
|
|
9945
|
+
const r2 = el.getBoundingClientRect();
|
|
9946
|
+
if (r2.width <= 0 || r2.height <= 0) return null;
|
|
9947
|
+
return { top: r2.top, left: r2.left, width: r2.width, height: r2.height };
|
|
9948
|
+
}
|
|
9949
|
+
function useLiveCardRect(ref) {
|
|
9950
|
+
const [rect, setRect] = (0, import_react9.useState)(null);
|
|
9951
|
+
(0, import_react9.useEffect)(() => {
|
|
9952
|
+
if (!ref) {
|
|
9953
|
+
setRect(null);
|
|
9954
|
+
return;
|
|
9955
|
+
}
|
|
9956
|
+
const update = () => {
|
|
9957
|
+
const next = readRect2(ref);
|
|
9958
|
+
setRect(
|
|
9959
|
+
(prev) => prev && next && prev.top === next.top && prev.left === next.left && prev.width === next.width && prev.height === next.height ? prev : next
|
|
9960
|
+
);
|
|
9961
|
+
};
|
|
9962
|
+
update();
|
|
9963
|
+
const opts = { capture: true, passive: true };
|
|
9964
|
+
window.addEventListener("scroll", update, opts);
|
|
9965
|
+
window.addEventListener("resize", update);
|
|
9966
|
+
const interval = setInterval(update, 500);
|
|
9967
|
+
return () => {
|
|
9968
|
+
window.removeEventListener("scroll", update, opts);
|
|
9969
|
+
window.removeEventListener("resize", update);
|
|
9970
|
+
clearInterval(interval);
|
|
9971
|
+
};
|
|
9972
|
+
}, [ref?.sectionId, ref?.index]);
|
|
9973
|
+
return rect;
|
|
9974
|
+
}
|
|
9975
|
+
function requestValidateTree(postToParent2, tree) {
|
|
9976
|
+
return new Promise((resolve) => {
|
|
9977
|
+
const id = `ai-validate-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
|
|
9978
|
+
const timeout = window.setTimeout(() => {
|
|
9979
|
+
window.removeEventListener("message", onMessage);
|
|
9980
|
+
resolve({ ok: false, reasons: ["Validation request timed out."] });
|
|
9981
|
+
}, 8e3);
|
|
9982
|
+
function onMessage(e) {
|
|
9983
|
+
if (e.data?.type !== "ow:ai-validate-tree-result" || e.data.id !== id) return;
|
|
9984
|
+
window.clearTimeout(timeout);
|
|
9985
|
+
window.removeEventListener("message", onMessage);
|
|
9986
|
+
resolve({ ok: e.data.ok === true, reasons: Array.isArray(e.data.reasons) ? e.data.reasons : [] });
|
|
9987
|
+
}
|
|
9988
|
+
window.addEventListener("message", onMessage);
|
|
9989
|
+
postToParent2({ type: "ow:ai-validate-tree-request", id, tree });
|
|
9990
|
+
});
|
|
9991
|
+
}
|
|
9992
|
+
function Pill({
|
|
9993
|
+
label,
|
|
9994
|
+
onClick,
|
|
9995
|
+
disabled,
|
|
9996
|
+
active
|
|
9997
|
+
}) {
|
|
9998
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
9999
|
+
"button",
|
|
10000
|
+
{
|
|
10001
|
+
type: "button",
|
|
10002
|
+
onClick,
|
|
10003
|
+
disabled,
|
|
10004
|
+
style: {
|
|
10005
|
+
height: 28,
|
|
10006
|
+
padding: "0 10px",
|
|
10007
|
+
display: "inline-flex",
|
|
10008
|
+
alignItems: "center",
|
|
10009
|
+
gap: 4,
|
|
10010
|
+
borderRadius: 999,
|
|
10011
|
+
border: "none",
|
|
10012
|
+
cursor: disabled ? "default" : "pointer",
|
|
10013
|
+
background: active ? OHW_BLUE_DARK : "#ffffff",
|
|
10014
|
+
color: active ? "#ffffff" : OHW_BLUE_DARK,
|
|
10015
|
+
opacity: disabled ? 0.4 : 1,
|
|
10016
|
+
fontSize: 12,
|
|
10017
|
+
lineHeight: "16px",
|
|
10018
|
+
fontFamily: "Figtree, ui-sans-serif, system-ui, sans-serif",
|
|
10019
|
+
whiteSpace: "nowrap",
|
|
10020
|
+
flex: "0 0 auto"
|
|
10021
|
+
},
|
|
10022
|
+
children: label
|
|
10023
|
+
}
|
|
10024
|
+
);
|
|
10025
|
+
}
|
|
10026
|
+
function PricingCardToolbar({
|
|
10027
|
+
entry,
|
|
10028
|
+
index,
|
|
10029
|
+
pending,
|
|
10030
|
+
error,
|
|
10031
|
+
onAddTier,
|
|
10032
|
+
onRemoveTier,
|
|
10033
|
+
onToggleFeatured,
|
|
10034
|
+
onSetTreatment,
|
|
10035
|
+
onAddButton,
|
|
10036
|
+
onRemoveButton,
|
|
10037
|
+
onAddFeature,
|
|
10038
|
+
onRemoveFeature
|
|
10039
|
+
}) {
|
|
10040
|
+
const collectionCount = pricingCardCount(entry.tree);
|
|
10041
|
+
const card = findPricingCardNode(entry.tree, index);
|
|
10042
|
+
const featured = card?.slots?.featured;
|
|
10043
|
+
const isFeatured = featured?.enabled === true;
|
|
10044
|
+
const buttonCount = (card?.children ?? []).filter((c) => c.type === "button").length;
|
|
10045
|
+
const featureCount = pricingCardFeatureCount(entry.tree, index);
|
|
10046
|
+
const pillWrap = window.innerWidth <= 480 ? "wrap" : "nowrap";
|
|
10047
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
10048
|
+
"div",
|
|
10049
|
+
{
|
|
10050
|
+
"data-ohw-bridge": "",
|
|
10051
|
+
"data-ohw-toolbar": "",
|
|
10052
|
+
onMouseDown: (e) => e.stopPropagation(),
|
|
10053
|
+
style: {
|
|
10054
|
+
display: "flex",
|
|
10055
|
+
flexDirection: "column",
|
|
10056
|
+
gap: 6,
|
|
10057
|
+
alignItems: "center",
|
|
10058
|
+
background: OHW_BLUE,
|
|
10059
|
+
padding: 8,
|
|
10060
|
+
borderRadius: 12,
|
|
10061
|
+
boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
|
|
10062
|
+
pointerEvents: pending ? "none" : "auto",
|
|
10063
|
+
opacity: pending ? 0.6 : 1,
|
|
10064
|
+
// Only cap width on mobile, where the pill rows wrap — on desktop the row stays on one
|
|
10065
|
+
// line and should size to fit it, not get clipped/overflow against a fixed cap.
|
|
10066
|
+
maxWidth: pillWrap === "wrap" ? "calc(100vw - 24px)" : "none"
|
|
10067
|
+
},
|
|
10068
|
+
children: [
|
|
10069
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: [
|
|
10070
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "+ Tier", onClick: onAddTier, disabled: collectionCount >= 4 }),
|
|
10071
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "- Tier", onClick: onRemoveTier, disabled: collectionCount <= 1 }),
|
|
10072
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "Featured", active: isFeatured, onClick: () => onToggleFeatured(!isFeatured) }),
|
|
10073
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "+ Button", onClick: onAddButton, disabled: buttonCount >= 2 }),
|
|
10074
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "- Button", onClick: onRemoveButton, disabled: buttonCount === 0 }),
|
|
10075
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "+ Feature", onClick: onAddFeature, disabled: featureCount >= 10 }),
|
|
10076
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "- Feature", onClick: onRemoveFeature, disabled: featureCount <= 1 })
|
|
10077
|
+
] }),
|
|
10078
|
+
isFeatured && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: EMPHASIS_TREATMENTS.map((t) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10079
|
+
Pill,
|
|
10080
|
+
{
|
|
10081
|
+
label: t.label,
|
|
10082
|
+
active: (featured?.treatment ?? "outlined") === t.value,
|
|
10083
|
+
onClick: () => onSetTreatment(t.value)
|
|
10084
|
+
},
|
|
10085
|
+
t.value
|
|
10086
|
+
)) }),
|
|
10087
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { color: "#FCA5A5", fontSize: 11, maxWidth: 220, textAlign: "center" }, children: error })
|
|
10088
|
+
]
|
|
10089
|
+
}
|
|
10090
|
+
);
|
|
10091
|
+
}
|
|
10092
|
+
function findPricingCardNode(tree, index) {
|
|
10093
|
+
const stack = tree.rows.flatMap((row) => row.blocks);
|
|
10094
|
+
while (stack.length) {
|
|
10095
|
+
const node = stack.shift();
|
|
10096
|
+
if (node.type === "collection" && Array.isArray(node.children) && node.children[0]?.type === "card" && node.children[0].slots?.preset === "pricing") {
|
|
10097
|
+
return node.children[index] ?? null;
|
|
10098
|
+
}
|
|
10099
|
+
if (node.children) stack.push(...node.children);
|
|
10100
|
+
}
|
|
10101
|
+
return null;
|
|
10102
|
+
}
|
|
10103
|
+
function AiPricingCardOverlay({
|
|
10104
|
+
postToParent: postToParent2,
|
|
10105
|
+
aiSectionsRef,
|
|
10106
|
+
applyTreeLocalRef
|
|
10107
|
+
}) {
|
|
10108
|
+
const [hover, setHover] = (0, import_react9.useState)(null);
|
|
10109
|
+
const [active, setActive] = (0, import_react9.useState)(null);
|
|
10110
|
+
const [pending, setPending] = (0, import_react9.useState)(false);
|
|
10111
|
+
const [error, setError] = (0, import_react9.useState)(null);
|
|
10112
|
+
const activeRef = (0, import_react9.useRef)(null);
|
|
10113
|
+
activeRef.current = active;
|
|
10114
|
+
(0, import_react9.useEffect)(() => {
|
|
10115
|
+
const onMove = (e) => {
|
|
10116
|
+
const t = e.target;
|
|
10117
|
+
if (!(t instanceof HTMLElement)) return;
|
|
10118
|
+
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]")) {
|
|
10119
|
+
return;
|
|
10120
|
+
}
|
|
10121
|
+
const cardEl = t.closest("[data-ohw-pricing-card]");
|
|
10122
|
+
if (!cardEl) {
|
|
10123
|
+
setHover(null);
|
|
10124
|
+
return;
|
|
10125
|
+
}
|
|
10126
|
+
const sectionEl = cardEl.closest("[data-ohw-section]");
|
|
10127
|
+
const unit = sectionEl ? movableUnit(sectionEl) : null;
|
|
10128
|
+
const sectionId = unit ? instanceIdOf(unit) || null : null;
|
|
10129
|
+
const index = Number(cardEl.dataset.ohwPricingIndex);
|
|
10130
|
+
if (!sectionId || Number.isNaN(index)) {
|
|
10131
|
+
setHover(null);
|
|
10132
|
+
return;
|
|
10133
|
+
}
|
|
10134
|
+
setHover({ sectionId, index });
|
|
10135
|
+
};
|
|
10136
|
+
const onLeave = () => setHover(null);
|
|
10137
|
+
document.addEventListener("mousemove", onMove, { passive: true });
|
|
10138
|
+
document.documentElement.addEventListener("mouseleave", onLeave);
|
|
10139
|
+
return () => {
|
|
10140
|
+
document.removeEventListener("mousemove", onMove);
|
|
10141
|
+
document.documentElement.removeEventListener("mouseleave", onLeave);
|
|
10142
|
+
};
|
|
10143
|
+
}, []);
|
|
10144
|
+
(0, import_react9.useEffect)(() => {
|
|
10145
|
+
const onClick = (e) => {
|
|
10146
|
+
const current = activeRef.current;
|
|
10147
|
+
if (!current) return;
|
|
10148
|
+
const t = e.target;
|
|
10149
|
+
if (!(t instanceof HTMLElement)) return;
|
|
10150
|
+
if (t.closest("[data-ohw-item-interaction]")) return;
|
|
10151
|
+
const cardEl = findPricingCardElement(current.sectionId, current.index);
|
|
10152
|
+
if (cardEl && cardEl.contains(t)) return;
|
|
10153
|
+
setActive(null);
|
|
10154
|
+
setError(null);
|
|
10155
|
+
};
|
|
10156
|
+
document.addEventListener("click", onClick, true);
|
|
10157
|
+
return () => document.removeEventListener("click", onClick, true);
|
|
10158
|
+
}, []);
|
|
10159
|
+
(0, import_react9.useEffect)(() => {
|
|
10160
|
+
const onBlur = () => {
|
|
10161
|
+
if (!activeRef.current) return;
|
|
10162
|
+
setActive(null);
|
|
10163
|
+
setError(null);
|
|
10164
|
+
};
|
|
10165
|
+
window.addEventListener("blur", onBlur);
|
|
10166
|
+
return () => window.removeEventListener("blur", onBlur);
|
|
10167
|
+
}, []);
|
|
10168
|
+
(0, import_react9.useEffect)(() => {
|
|
10169
|
+
const onKeyDown = (e) => {
|
|
10170
|
+
if (e.key !== "Escape") return;
|
|
10171
|
+
if (!activeRef.current) return;
|
|
10172
|
+
setActive(null);
|
|
10173
|
+
setError(null);
|
|
10174
|
+
};
|
|
10175
|
+
document.addEventListener("keydown", onKeyDown);
|
|
10176
|
+
return () => document.removeEventListener("keydown", onKeyDown);
|
|
10177
|
+
}, []);
|
|
10178
|
+
const findEntry = (0, import_react9.useCallback)(
|
|
10179
|
+
(sectionId) => {
|
|
10180
|
+
const state = parseAiSectionsState(aiSectionsRef.current);
|
|
10181
|
+
return state.sections.find((s) => s.id === sectionId) ?? null;
|
|
10182
|
+
},
|
|
10183
|
+
[aiSectionsRef]
|
|
10184
|
+
);
|
|
10185
|
+
const runMutation = (0, import_react9.useCallback)(
|
|
10186
|
+
async (sectionId, mutate) => {
|
|
10187
|
+
const entry = findEntry(sectionId);
|
|
10188
|
+
if (!entry) return false;
|
|
10189
|
+
const nextTree = mutate(entry.tree);
|
|
10190
|
+
if (!nextTree) return false;
|
|
10191
|
+
setPending(true);
|
|
10192
|
+
setError(null);
|
|
10193
|
+
const { ok, reasons } = await requestValidateTree(postToParent2, nextTree);
|
|
10194
|
+
setPending(false);
|
|
10195
|
+
if (!ok) {
|
|
10196
|
+
setError(reasons[0] ?? "That change is not allowed.");
|
|
10197
|
+
return false;
|
|
10198
|
+
}
|
|
10199
|
+
applyTreeLocalRef.current?.({
|
|
10200
|
+
id: sectionId,
|
|
10201
|
+
mode: "replace",
|
|
10202
|
+
targetSectionId: sectionId,
|
|
10203
|
+
tree: nextTree,
|
|
10204
|
+
label: entry.label,
|
|
10205
|
+
media: entry.media,
|
|
10206
|
+
...entry.brand ? { brand: entry.brand } : {},
|
|
10207
|
+
// The user is already looking at the card they just edited — recentering the
|
|
10208
|
+
// viewport on every tier add/remove/toggle reads as the section jumping around.
|
|
10209
|
+
skipScrollIntoView: true
|
|
10210
|
+
});
|
|
10211
|
+
return true;
|
|
10212
|
+
},
|
|
10213
|
+
[findEntry, postToParent2, applyTreeLocalRef]
|
|
10214
|
+
);
|
|
10215
|
+
const activeEntry = active ? findEntry(active.sectionId) : null;
|
|
10216
|
+
const activeCardRect = useLiveCardRect(active);
|
|
10217
|
+
const hoverHandleRect = useLiveCardRect(!active && hover ? hover : null);
|
|
10218
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
|
|
10219
|
+
hoverHandleRect && hover && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10220
|
+
"button",
|
|
10221
|
+
{
|
|
10222
|
+
type: "button",
|
|
10223
|
+
"data-ohw-toolbar": "",
|
|
10224
|
+
onClick: () => setActive(hover),
|
|
10225
|
+
"aria-label": "Configure pricing tier",
|
|
10226
|
+
style: {
|
|
10227
|
+
position: "fixed",
|
|
10228
|
+
top: hoverHandleRect.top + 8,
|
|
10229
|
+
left: hoverHandleRect.left + hoverHandleRect.width - 36,
|
|
10230
|
+
width: 28,
|
|
10231
|
+
height: 28,
|
|
10232
|
+
borderRadius: 8,
|
|
10233
|
+
border: `1.5px dashed ${PRIMARY3}`,
|
|
10234
|
+
background: "#ffffff",
|
|
10235
|
+
color: PRIMARY3,
|
|
10236
|
+
display: "flex",
|
|
10237
|
+
alignItems: "center",
|
|
10238
|
+
justifyContent: "center",
|
|
10239
|
+
cursor: "pointer",
|
|
10240
|
+
zIndex: 2147483643,
|
|
10241
|
+
fontSize: 14,
|
|
10242
|
+
fontWeight: 700
|
|
10243
|
+
},
|
|
10244
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Star, { size: 14, style: { pointerEvents: "none" } })
|
|
10245
|
+
}
|
|
10246
|
+
),
|
|
10247
|
+
activeCardRect && active && activeEntry && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10248
|
+
ItemInteractionLayer,
|
|
10249
|
+
{
|
|
10250
|
+
rect: activeCardRect,
|
|
10251
|
+
state: "active-top",
|
|
10252
|
+
toolbar: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10253
|
+
PricingCardToolbar,
|
|
10254
|
+
{
|
|
10255
|
+
entry: activeEntry,
|
|
10256
|
+
index: active.index,
|
|
10257
|
+
pending,
|
|
10258
|
+
error,
|
|
10259
|
+
onAddTier: () => runMutation(active.sectionId, addPricingTier),
|
|
10260
|
+
onRemoveTier: () => {
|
|
10261
|
+
void runMutation(active.sectionId, (tree) => removePricingTier(tree, active.index)).then(
|
|
10262
|
+
(applied) => {
|
|
10263
|
+
if (applied) setActive(null);
|
|
10264
|
+
}
|
|
10265
|
+
);
|
|
10266
|
+
},
|
|
10267
|
+
onToggleFeatured: (enabled) => runMutation(
|
|
10268
|
+
active.sectionId,
|
|
10269
|
+
(tree) => setPricingCardFeatured(tree, active.index, { enabled })
|
|
10270
|
+
),
|
|
10271
|
+
onSetTreatment: (treatment) => runMutation(
|
|
10272
|
+
active.sectionId,
|
|
10273
|
+
(tree) => setPricingCardFeatured(tree, active.index, { enabled: true, treatment })
|
|
10274
|
+
),
|
|
10275
|
+
onAddButton: () => runMutation(active.sectionId, (tree) => addPricingCardButton(tree, active.index, "Learn more")),
|
|
10276
|
+
onRemoveButton: () => runMutation(active.sectionId, (tree) => removePricingCardButton(tree, active.index)),
|
|
10277
|
+
onAddFeature: () => runMutation(active.sectionId, (tree) => addPricingCardFeature(tree, active.index, "New feature")),
|
|
10278
|
+
onRemoveFeature: () => runMutation(active.sectionId, (tree) => removePricingCardFeature(tree, active.index))
|
|
10279
|
+
}
|
|
10280
|
+
)
|
|
10281
|
+
}
|
|
10282
|
+
)
|
|
10283
|
+
] });
|
|
10284
|
+
}
|
|
10285
|
+
|
|
9664
10286
|
// src/OhhwellsBridge.tsx
|
|
9665
10287
|
var import_react_dom5 = require("react-dom");
|
|
9666
10288
|
var import_navigation3 = require("next/navigation");
|
|
@@ -9965,28 +10587,28 @@ function scrollToHashSectionWhenReady(behavior = "smooth") {
|
|
|
9965
10587
|
}
|
|
9966
10588
|
|
|
9967
10589
|
// src/ui/link-modal/LinkPopover.tsx
|
|
9968
|
-
var
|
|
10590
|
+
var import_react13 = require("react");
|
|
9969
10591
|
|
|
9970
10592
|
// src/ui/dialog.tsx
|
|
9971
10593
|
var React9 = __toESM(require("react"), 1);
|
|
9972
10594
|
var import_radix_ui6 = require("radix-ui");
|
|
9973
|
-
var
|
|
9974
|
-
var
|
|
10595
|
+
var import_lucide_react9 = require("lucide-react");
|
|
10596
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
9975
10597
|
function Dialog2({
|
|
9976
10598
|
...props
|
|
9977
10599
|
}) {
|
|
9978
|
-
return /* @__PURE__ */ (0,
|
|
10600
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_radix_ui6.Dialog.Root, { "data-slot": "dialog", ...props });
|
|
9979
10601
|
}
|
|
9980
10602
|
function DialogPortal({
|
|
9981
10603
|
...props
|
|
9982
10604
|
}) {
|
|
9983
|
-
return /* @__PURE__ */ (0,
|
|
10605
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_radix_ui6.Dialog.Portal, { ...props });
|
|
9984
10606
|
}
|
|
9985
10607
|
function DialogOverlay({
|
|
9986
10608
|
className,
|
|
9987
10609
|
...props
|
|
9988
10610
|
}) {
|
|
9989
|
-
return /* @__PURE__ */ (0,
|
|
10611
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
9990
10612
|
import_radix_ui6.Dialog.Overlay,
|
|
9991
10613
|
{
|
|
9992
10614
|
"data-slot": "dialog-overlay",
|
|
@@ -9999,9 +10621,9 @@ function DialogOverlay({
|
|
|
9999
10621
|
var DialogContent = React9.forwardRef(
|
|
10000
10622
|
({ className, children, showCloseButton = true, container, ...props }, ref) => {
|
|
10001
10623
|
const positionMode = container ? "absolute" : "fixed";
|
|
10002
|
-
return /* @__PURE__ */ (0,
|
|
10003
|
-
/* @__PURE__ */ (0,
|
|
10004
|
-
/* @__PURE__ */ (0,
|
|
10624
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(DialogPortal, { container: container ?? void 0, children: [
|
|
10625
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DialogOverlay, { className: cn(positionMode, "inset-0") }),
|
|
10626
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
10005
10627
|
import_radix_ui6.Dialog.Content,
|
|
10006
10628
|
{
|
|
10007
10629
|
ref,
|
|
@@ -10017,13 +10639,13 @@ var DialogContent = React9.forwardRef(
|
|
|
10017
10639
|
...props,
|
|
10018
10640
|
children: [
|
|
10019
10641
|
children,
|
|
10020
|
-
showCloseButton ? /* @__PURE__ */ (0,
|
|
10642
|
+
showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
10021
10643
|
import_radix_ui6.Dialog.Close,
|
|
10022
10644
|
{
|
|
10023
10645
|
type: "button",
|
|
10024
10646
|
className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50",
|
|
10025
10647
|
"aria-label": "Close",
|
|
10026
|
-
children: /* @__PURE__ */ (0,
|
|
10648
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react9.X, { size: 16, "aria-hidden": true })
|
|
10027
10649
|
}
|
|
10028
10650
|
) : null
|
|
10029
10651
|
]
|
|
@@ -10037,13 +10659,13 @@ function DialogHeader({
|
|
|
10037
10659
|
className,
|
|
10038
10660
|
...props
|
|
10039
10661
|
}) {
|
|
10040
|
-
return /* @__PURE__ */ (0,
|
|
10662
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("flex flex-col gap-1.5", className), ...props });
|
|
10041
10663
|
}
|
|
10042
10664
|
function DialogFooter({
|
|
10043
10665
|
className,
|
|
10044
10666
|
...props
|
|
10045
10667
|
}) {
|
|
10046
|
-
return /* @__PURE__ */ (0,
|
|
10668
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
10047
10669
|
"div",
|
|
10048
10670
|
{
|
|
10049
10671
|
className: cn("flex items-center justify-end gap-2", className),
|
|
@@ -10051,7 +10673,7 @@ function DialogFooter({
|
|
|
10051
10673
|
}
|
|
10052
10674
|
);
|
|
10053
10675
|
}
|
|
10054
|
-
var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
10676
|
+
var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
10055
10677
|
import_radix_ui6.Dialog.Title,
|
|
10056
10678
|
{
|
|
10057
10679
|
ref,
|
|
@@ -10063,7 +10685,7 @@ var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE
|
|
|
10063
10685
|
}
|
|
10064
10686
|
));
|
|
10065
10687
|
DialogTitle.displayName = import_radix_ui6.Dialog.Title.displayName;
|
|
10066
|
-
var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
10688
|
+
var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
10067
10689
|
import_radix_ui6.Dialog.Description,
|
|
10068
10690
|
{
|
|
10069
10691
|
ref,
|
|
@@ -10075,63 +10697,63 @@ DialogDescription.displayName = import_radix_ui6.Dialog.Description.displayName;
|
|
|
10075
10697
|
var DialogClose = import_radix_ui6.Dialog.Close;
|
|
10076
10698
|
|
|
10077
10699
|
// src/ui/link-modal/LinkEditorPanel.tsx
|
|
10078
|
-
var
|
|
10700
|
+
var import_lucide_react13 = require("lucide-react");
|
|
10079
10701
|
|
|
10080
10702
|
// src/ui/link-modal/DestinationBreadcrumb.tsx
|
|
10081
|
-
var
|
|
10082
|
-
var
|
|
10703
|
+
var import_lucide_react10 = require("lucide-react");
|
|
10704
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
10083
10705
|
function DestinationBreadcrumb({
|
|
10084
10706
|
pageTitle,
|
|
10085
10707
|
sectionLabel
|
|
10086
10708
|
}) {
|
|
10087
|
-
return /* @__PURE__ */ (0,
|
|
10088
|
-
/* @__PURE__ */ (0,
|
|
10089
|
-
/* @__PURE__ */ (0,
|
|
10090
|
-
/* @__PURE__ */ (0,
|
|
10091
|
-
/* @__PURE__ */ (0,
|
|
10092
|
-
/* @__PURE__ */ (0,
|
|
10709
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex w-full flex-col gap-2", children: [
|
|
10710
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm font-medium! text-foreground m-0", children: "Destination" }),
|
|
10711
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-3", children: [
|
|
10712
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
10713
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.File, { size: 16, className: "shrink-0 text-foreground", "aria-hidden": true }),
|
|
10714
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-sm font-medium leading-none text-foreground!", children: pageTitle })
|
|
10093
10715
|
] }),
|
|
10094
|
-
/* @__PURE__ */ (0,
|
|
10095
|
-
|
|
10716
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
10717
|
+
import_lucide_react10.ArrowRight,
|
|
10096
10718
|
{
|
|
10097
10719
|
size: 16,
|
|
10098
10720
|
className: "shrink-0 text-muted-foreground",
|
|
10099
10721
|
"aria-hidden": true
|
|
10100
10722
|
}
|
|
10101
10723
|
),
|
|
10102
|
-
/* @__PURE__ */ (0,
|
|
10103
|
-
/* @__PURE__ */ (0,
|
|
10104
|
-
|
|
10724
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
|
|
10725
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
10726
|
+
import_lucide_react10.GalleryVertical,
|
|
10105
10727
|
{
|
|
10106
10728
|
size: 16,
|
|
10107
10729
|
className: "shrink-0 text-foreground",
|
|
10108
10730
|
"aria-hidden": true
|
|
10109
10731
|
}
|
|
10110
10732
|
),
|
|
10111
|
-
/* @__PURE__ */ (0,
|
|
10733
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "truncate text-sm font-medium leading-none text-foreground", children: sectionLabel })
|
|
10112
10734
|
] })
|
|
10113
10735
|
] })
|
|
10114
10736
|
] });
|
|
10115
10737
|
}
|
|
10116
10738
|
|
|
10117
10739
|
// src/ui/link-modal/SectionTreeItem.tsx
|
|
10118
|
-
var
|
|
10119
|
-
var
|
|
10740
|
+
var import_lucide_react11 = require("lucide-react");
|
|
10741
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
10120
10742
|
function SectionTreeItem({
|
|
10121
10743
|
section,
|
|
10122
10744
|
onSelect,
|
|
10123
10745
|
selected
|
|
10124
10746
|
}) {
|
|
10125
10747
|
const interactive = Boolean(onSelect);
|
|
10126
|
-
return /* @__PURE__ */ (0,
|
|
10127
|
-
/* @__PURE__ */ (0,
|
|
10748
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex h-9 w-full items-end pl-3", children: [
|
|
10749
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
10128
10750
|
"div",
|
|
10129
10751
|
{
|
|
10130
10752
|
className: "-mr-px h-9 w-2 shrink-0 rounded-bl-sm border-b border-l border-border mb-4",
|
|
10131
10753
|
"aria-hidden": true
|
|
10132
10754
|
}
|
|
10133
10755
|
),
|
|
10134
|
-
/* @__PURE__ */ (0,
|
|
10756
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
10135
10757
|
"div",
|
|
10136
10758
|
{
|
|
10137
10759
|
role: interactive ? "button" : void 0,
|
|
@@ -10149,15 +10771,15 @@ function SectionTreeItem({
|
|
|
10149
10771
|
interactive && selected && "border-bridge-primary"
|
|
10150
10772
|
),
|
|
10151
10773
|
children: [
|
|
10152
|
-
/* @__PURE__ */ (0,
|
|
10153
|
-
|
|
10774
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
10775
|
+
import_lucide_react11.GalleryVertical,
|
|
10154
10776
|
{
|
|
10155
10777
|
size: 16,
|
|
10156
10778
|
className: "shrink-0 text-foreground",
|
|
10157
10779
|
"aria-hidden": true
|
|
10158
10780
|
}
|
|
10159
10781
|
),
|
|
10160
|
-
/* @__PURE__ */ (0,
|
|
10782
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "truncate text-sm font-normal leading-5 text-foreground", children: section.label })
|
|
10161
10783
|
]
|
|
10162
10784
|
}
|
|
10163
10785
|
)
|
|
@@ -10165,14 +10787,14 @@ function SectionTreeItem({
|
|
|
10165
10787
|
}
|
|
10166
10788
|
|
|
10167
10789
|
// src/ui/link-modal/UrlOrPageInput.tsx
|
|
10168
|
-
var
|
|
10790
|
+
var import_react10 = require("react");
|
|
10169
10791
|
|
|
10170
10792
|
// src/ui/input.tsx
|
|
10171
10793
|
var React10 = __toESM(require("react"), 1);
|
|
10172
|
-
var
|
|
10794
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
10173
10795
|
var Input = React10.forwardRef(
|
|
10174
10796
|
({ className, type, ...props }, ref) => {
|
|
10175
|
-
return /* @__PURE__ */ (0,
|
|
10797
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
10176
10798
|
"input",
|
|
10177
10799
|
{
|
|
10178
10800
|
type,
|
|
@@ -10191,9 +10813,9 @@ Input.displayName = "Input";
|
|
|
10191
10813
|
|
|
10192
10814
|
// src/ui/label.tsx
|
|
10193
10815
|
var import_radix_ui7 = require("radix-ui");
|
|
10194
|
-
var
|
|
10816
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
10195
10817
|
function Label({ className, ...props }) {
|
|
10196
|
-
return /* @__PURE__ */ (0,
|
|
10818
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
10197
10819
|
import_radix_ui7.Label.Root,
|
|
10198
10820
|
{
|
|
10199
10821
|
"data-slot": "label",
|
|
@@ -10204,12 +10826,12 @@ function Label({ className, ...props }) {
|
|
|
10204
10826
|
}
|
|
10205
10827
|
|
|
10206
10828
|
// src/ui/link-modal/UrlOrPageInput.tsx
|
|
10207
|
-
var
|
|
10208
|
-
var
|
|
10829
|
+
var import_lucide_react12 = require("lucide-react");
|
|
10830
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
10209
10831
|
function FieldChevron({
|
|
10210
10832
|
onClick
|
|
10211
10833
|
}) {
|
|
10212
|
-
return /* @__PURE__ */ (0,
|
|
10834
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
10213
10835
|
"button",
|
|
10214
10836
|
{
|
|
10215
10837
|
type: "button",
|
|
@@ -10217,7 +10839,7 @@ function FieldChevron({
|
|
|
10217
10839
|
onClick,
|
|
10218
10840
|
"aria-label": "Open page list",
|
|
10219
10841
|
tabIndex: -1,
|
|
10220
|
-
children: /* @__PURE__ */ (0,
|
|
10842
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.ChevronDown, { size: 16 })
|
|
10221
10843
|
}
|
|
10222
10844
|
);
|
|
10223
10845
|
}
|
|
@@ -10233,11 +10855,11 @@ function UrlOrPageInput({
|
|
|
10233
10855
|
readOnly = false,
|
|
10234
10856
|
urlError
|
|
10235
10857
|
}) {
|
|
10236
|
-
const inputId = (0,
|
|
10237
|
-
const inputRef = (0,
|
|
10238
|
-
const rootRef = (0,
|
|
10239
|
-
const [isFocused, setIsFocused] = (0,
|
|
10240
|
-
(0,
|
|
10858
|
+
const inputId = (0, import_react10.useId)();
|
|
10859
|
+
const inputRef = (0, import_react10.useRef)(null);
|
|
10860
|
+
const rootRef = (0, import_react10.useRef)(null);
|
|
10861
|
+
const [isFocused, setIsFocused] = (0, import_react10.useState)(false);
|
|
10862
|
+
(0, import_react10.useEffect)(() => {
|
|
10241
10863
|
if (!dropdownOpen) return;
|
|
10242
10864
|
const isOutside = (e) => {
|
|
10243
10865
|
const root = rootRef.current;
|
|
@@ -10278,19 +10900,19 @@ function UrlOrPageInput({
|
|
|
10278
10900
|
"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]",
|
|
10279
10901
|
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"
|
|
10280
10902
|
);
|
|
10281
|
-
return /* @__PURE__ */ (0,
|
|
10282
|
-
/* @__PURE__ */ (0,
|
|
10283
|
-
/* @__PURE__ */ (0,
|
|
10284
|
-
/* @__PURE__ */ (0,
|
|
10285
|
-
selectedPage ? /* @__PURE__ */ (0,
|
|
10286
|
-
|
|
10903
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex w-full flex-col gap-2 p-0", children: [
|
|
10904
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Label, { htmlFor: inputId, className: cn(urlError && "text-destructive"), children: "Destination" }),
|
|
10905
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { ref: rootRef, className: "relative w-full", children: [
|
|
10906
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { "data-ohw-link-field": true, className: fieldClassName, children: [
|
|
10907
|
+
selectedPage ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex shrink-0 items-center pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
10908
|
+
import_lucide_react12.File,
|
|
10287
10909
|
{
|
|
10288
10910
|
size: 16,
|
|
10289
10911
|
className: "shrink-0 text-foreground",
|
|
10290
10912
|
"aria-hidden": true
|
|
10291
10913
|
}
|
|
10292
10914
|
) }) : null,
|
|
10293
|
-
readOnly ? /* @__PURE__ */ (0,
|
|
10915
|
+
readOnly ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "min-w-0 flex-1 truncate text-sm leading-5 text-foreground", children: selectedPage?.title ?? value }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
10294
10916
|
Input,
|
|
10295
10917
|
{
|
|
10296
10918
|
ref: inputRef,
|
|
@@ -10316,7 +10938,7 @@ function UrlOrPageInput({
|
|
|
10316
10938
|
)
|
|
10317
10939
|
}
|
|
10318
10940
|
),
|
|
10319
|
-
selectedPage && !readOnly ? /* @__PURE__ */ (0,
|
|
10941
|
+
selectedPage && !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
10320
10942
|
"button",
|
|
10321
10943
|
{
|
|
10322
10944
|
type: "button",
|
|
@@ -10324,26 +10946,26 @@ function UrlOrPageInput({
|
|
|
10324
10946
|
onMouseDown: clearSelection,
|
|
10325
10947
|
"aria-label": "Clear selected page",
|
|
10326
10948
|
tabIndex: -1,
|
|
10327
|
-
children: /* @__PURE__ */ (0,
|
|
10949
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.X, { size: 16, "aria-hidden": true })
|
|
10328
10950
|
}
|
|
10329
10951
|
) : null,
|
|
10330
|
-
!readOnly ? /* @__PURE__ */ (0,
|
|
10952
|
+
!readOnly ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(FieldChevron, { onClick: toggleDropdown }) : null
|
|
10331
10953
|
] }),
|
|
10332
|
-
dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ (0,
|
|
10954
|
+
dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
10333
10955
|
"div",
|
|
10334
10956
|
{
|
|
10335
10957
|
"data-ohw-link-page-dropdown": "",
|
|
10336
10958
|
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",
|
|
10337
10959
|
onMouseDown: (e) => e.preventDefault(),
|
|
10338
|
-
children: filteredPages.map((page) => /* @__PURE__ */ (0,
|
|
10960
|
+
children: filteredPages.map((page) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
10339
10961
|
"button",
|
|
10340
10962
|
{
|
|
10341
10963
|
type: "button",
|
|
10342
10964
|
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",
|
|
10343
10965
|
onClick: () => onPageSelect(page),
|
|
10344
10966
|
children: [
|
|
10345
|
-
/* @__PURE__ */ (0,
|
|
10346
|
-
/* @__PURE__ */ (0,
|
|
10967
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.File, { size: 16, className: "shrink-0", "aria-hidden": true }),
|
|
10968
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "truncate", children: page.title })
|
|
10347
10969
|
]
|
|
10348
10970
|
},
|
|
10349
10971
|
page.path
|
|
@@ -10351,34 +10973,34 @@ function UrlOrPageInput({
|
|
|
10351
10973
|
}
|
|
10352
10974
|
) : null
|
|
10353
10975
|
] }),
|
|
10354
|
-
urlError ? /* @__PURE__ */ (0,
|
|
10976
|
+
urlError ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-sm font-medium text-destructive", children: urlError }) : null
|
|
10355
10977
|
] });
|
|
10356
10978
|
}
|
|
10357
10979
|
|
|
10358
10980
|
// src/ui/link-modal/LinkEditorPanel.tsx
|
|
10359
|
-
var
|
|
10981
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
10360
10982
|
function LinkEditorPanel({ state, onClose }) {
|
|
10361
10983
|
const isCancel = state.secondaryLabel === "Cancel" || state.secondaryLabel === "Back to sections";
|
|
10362
|
-
return /* @__PURE__ */ (0,
|
|
10363
|
-
/* @__PURE__ */ (0,
|
|
10984
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
|
|
10985
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DialogClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
10364
10986
|
"button",
|
|
10365
10987
|
{
|
|
10366
10988
|
type: "button",
|
|
10367
10989
|
className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50 h-7",
|
|
10368
10990
|
"aria-label": "Close",
|
|
10369
10991
|
onClick: onClose,
|
|
10370
|
-
children: /* @__PURE__ */ (0,
|
|
10992
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.X, { size: 16, "aria-hidden": true })
|
|
10371
10993
|
}
|
|
10372
10994
|
) }),
|
|
10373
|
-
/* @__PURE__ */ (0,
|
|
10374
|
-
/* @__PURE__ */ (0,
|
|
10375
|
-
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ (0,
|
|
10995
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DialogHeader, { className: "w-full gap-1.5 p-6 pr-12", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DialogTitle, { className: "m-0 w-full break-words", children: state.title }) }),
|
|
10996
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex w-full flex-col gap-3 px-6 pb-8 pt-1", children: [
|
|
10997
|
+
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
10376
10998
|
DestinationBreadcrumb,
|
|
10377
10999
|
{
|
|
10378
11000
|
pageTitle: state.selectedPage.title,
|
|
10379
11001
|
sectionLabel: state.selectedSection.label
|
|
10380
11002
|
}
|
|
10381
|
-
) : /* @__PURE__ */ (0,
|
|
11003
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
10382
11004
|
UrlOrPageInput,
|
|
10383
11005
|
{
|
|
10384
11006
|
value: state.searchValue,
|
|
@@ -10391,8 +11013,8 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
10391
11013
|
urlError: state.urlError
|
|
10392
11014
|
}
|
|
10393
11015
|
),
|
|
10394
|
-
state.showChooseSection ? /* @__PURE__ */ (0,
|
|
10395
|
-
/* @__PURE__ */ (0,
|
|
11016
|
+
state.showChooseSection ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col justify-center gap-2", children: [
|
|
11017
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
10396
11018
|
Button,
|
|
10397
11019
|
{
|
|
10398
11020
|
type: "button",
|
|
@@ -10403,15 +11025,15 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
10403
11025
|
children: "Choose a section"
|
|
10404
11026
|
}
|
|
10405
11027
|
),
|
|
10406
|
-
/* @__PURE__ */ (0,
|
|
10407
|
-
/* @__PURE__ */ (0,
|
|
10408
|
-
/* @__PURE__ */ (0,
|
|
11028
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
|
|
11029
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.Info, { size: 16, className: "shrink-0", "aria-hidden": true }),
|
|
11030
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "Pick a section this link should scroll to." })
|
|
10409
11031
|
] })
|
|
10410
11032
|
] }) : null,
|
|
10411
|
-
state.showSectionRow && state.selectedSection ? /* @__PURE__ */ (0,
|
|
11033
|
+
state.showSectionRow && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SectionTreeItem, { section: state.selectedSection, selected: true }) : null
|
|
10412
11034
|
] }),
|
|
10413
|
-
/* @__PURE__ */ (0,
|
|
10414
|
-
/* @__PURE__ */ (0,
|
|
11035
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(DialogFooter, { className: "w-full px-6 pb-6", children: [
|
|
11036
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
10415
11037
|
Button,
|
|
10416
11038
|
{
|
|
10417
11039
|
type: "button",
|
|
@@ -10426,7 +11048,7 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
10426
11048
|
children: state.secondaryLabel
|
|
10427
11049
|
}
|
|
10428
11050
|
),
|
|
10429
|
-
/* @__PURE__ */ (0,
|
|
11051
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
10430
11052
|
Button,
|
|
10431
11053
|
{
|
|
10432
11054
|
type: "button",
|
|
@@ -10445,11 +11067,11 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
10445
11067
|
}
|
|
10446
11068
|
|
|
10447
11069
|
// src/ui/link-modal/SectionPickerOverlay.tsx
|
|
10448
|
-
var
|
|
11070
|
+
var import_react11 = require("react");
|
|
10449
11071
|
var import_react_dom3 = require("react-dom");
|
|
10450
|
-
var
|
|
11072
|
+
var import_lucide_react14 = require("lucide-react");
|
|
10451
11073
|
var import_navigation2 = require("next/navigation");
|
|
10452
|
-
var
|
|
11074
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
10453
11075
|
var DIM_OVERLAY = "rgba(0, 0, 0, 0.45)";
|
|
10454
11076
|
function rectsEqual(a, b) {
|
|
10455
11077
|
if (a.size !== b.size) return false;
|
|
@@ -10482,12 +11104,12 @@ function hitTestSectionId(x, y, sectionIds, rects) {
|
|
|
10482
11104
|
return null;
|
|
10483
11105
|
}
|
|
10484
11106
|
function useSectionRects(sectionIdsKey, enabled) {
|
|
10485
|
-
const [rects, setRects] = (0,
|
|
10486
|
-
const sectionIds = (0,
|
|
11107
|
+
const [rects, setRects] = (0, import_react11.useState)(/* @__PURE__ */ new Map());
|
|
11108
|
+
const sectionIds = (0, import_react11.useMemo)(
|
|
10487
11109
|
() => sectionIdsKey ? sectionIdsKey.split("\0") : [],
|
|
10488
11110
|
[sectionIdsKey]
|
|
10489
11111
|
);
|
|
10490
|
-
(0,
|
|
11112
|
+
(0, import_react11.useEffect)(() => {
|
|
10491
11113
|
if (!enabled || sectionIds.length === 0) {
|
|
10492
11114
|
setRects((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Map());
|
|
10493
11115
|
return;
|
|
@@ -10528,13 +11150,13 @@ function SectionPickerOverlay({
|
|
|
10528
11150
|
}) {
|
|
10529
11151
|
const router = (0, import_navigation2.useRouter)();
|
|
10530
11152
|
const pathname = (0, import_navigation2.usePathname)();
|
|
10531
|
-
const [selectedId, setSelectedId] = (0,
|
|
10532
|
-
const [hoveredId, setHoveredId] = (0,
|
|
10533
|
-
const pointerRef = (0,
|
|
10534
|
-
const pointerScreenRef = (0,
|
|
10535
|
-
const iframeOffsetTopRef = (0,
|
|
10536
|
-
const sectionIdsRef = (0,
|
|
10537
|
-
const [chromeClip, setChromeClip] = (0,
|
|
11153
|
+
const [selectedId, setSelectedId] = (0, import_react11.useState)(null);
|
|
11154
|
+
const [hoveredId, setHoveredId] = (0, import_react11.useState)(null);
|
|
11155
|
+
const pointerRef = (0, import_react11.useRef)(null);
|
|
11156
|
+
const pointerScreenRef = (0, import_react11.useRef)(null);
|
|
11157
|
+
const iframeOffsetTopRef = (0, import_react11.useRef)(null);
|
|
11158
|
+
const sectionIdsRef = (0, import_react11.useRef)([]);
|
|
11159
|
+
const [chromeClip, setChromeClip] = (0, import_react11.useState)(
|
|
10538
11160
|
() => ({
|
|
10539
11161
|
top: 0,
|
|
10540
11162
|
bottom: typeof window !== "undefined" ? window.innerHeight : 0
|
|
@@ -10542,12 +11164,12 @@ function SectionPickerOverlay({
|
|
|
10542
11164
|
);
|
|
10543
11165
|
const normalizedTarget = normalizePath(pagePath);
|
|
10544
11166
|
const isOnTargetPage = normalizePath(pathname) === normalizedTarget;
|
|
10545
|
-
(0,
|
|
11167
|
+
(0, import_react11.useEffect)(() => {
|
|
10546
11168
|
if (isOnTargetPage) return;
|
|
10547
11169
|
const search = readPreservedSearch();
|
|
10548
11170
|
router.push(`${normalizedTarget}${search}`);
|
|
10549
11171
|
}, [isOnTargetPage, normalizedTarget, router]);
|
|
10550
|
-
(0,
|
|
11172
|
+
(0, import_react11.useEffect)(() => {
|
|
10551
11173
|
document.documentElement.setAttribute("data-ohw-section-picking", "");
|
|
10552
11174
|
document.querySelectorAll("[data-ohw-hovered]").forEach((el) => {
|
|
10553
11175
|
el.removeAttribute("data-ohw-hovered");
|
|
@@ -10559,24 +11181,24 @@ function SectionPickerOverlay({
|
|
|
10559
11181
|
document.documentElement.removeAttribute("data-ohw-section-picking");
|
|
10560
11182
|
};
|
|
10561
11183
|
}, []);
|
|
10562
|
-
const liveSections = (0,
|
|
11184
|
+
const liveSections = (0, import_react11.useMemo)(() => {
|
|
10563
11185
|
if (!isOnTargetPage) return sections;
|
|
10564
11186
|
const live = collectSectionsFromDom();
|
|
10565
11187
|
if (live.length === 0) return sections;
|
|
10566
11188
|
const labels = new Map(sections.map((s) => [s.id, s.label]));
|
|
10567
11189
|
return live.map((s) => ({ id: s.id, label: labels.get(s.id) ?? s.label }));
|
|
10568
11190
|
}, [isOnTargetPage, sections, pathname]);
|
|
10569
|
-
const sectionIdsKey = (0,
|
|
11191
|
+
const sectionIdsKey = (0, import_react11.useMemo)(
|
|
10570
11192
|
() => liveSections.map((s) => s.id).join("\0"),
|
|
10571
11193
|
[liveSections]
|
|
10572
11194
|
);
|
|
10573
|
-
const sectionIds = (0,
|
|
11195
|
+
const sectionIds = (0, import_react11.useMemo)(
|
|
10574
11196
|
() => liveSections.map((s) => s.id),
|
|
10575
11197
|
[liveSections]
|
|
10576
11198
|
);
|
|
10577
11199
|
sectionIdsRef.current = sectionIds;
|
|
10578
11200
|
const rects = useSectionRects(sectionIdsKey, isOnTargetPage);
|
|
10579
|
-
const applyHoverAt = (0,
|
|
11201
|
+
const applyHoverAt = (0, import_react11.useCallback)(
|
|
10580
11202
|
(x, y, liveRects) => {
|
|
10581
11203
|
const ids = sectionIdsRef.current;
|
|
10582
11204
|
const map = liveRects ?? readSectionRects(ids);
|
|
@@ -10585,7 +11207,7 @@ function SectionPickerOverlay({
|
|
|
10585
11207
|
},
|
|
10586
11208
|
[]
|
|
10587
11209
|
);
|
|
10588
|
-
(0,
|
|
11210
|
+
(0, import_react11.useEffect)(() => {
|
|
10589
11211
|
const applyClip = (iframeOffsetTop, visibleCanvasTop, canvasH) => {
|
|
10590
11212
|
const top = Math.max(0, visibleCanvasTop - iframeOffsetTop);
|
|
10591
11213
|
const bottom = Math.min(
|
|
@@ -10627,12 +11249,12 @@ function SectionPickerOverlay({
|
|
|
10627
11249
|
window.removeEventListener("resize", onResize);
|
|
10628
11250
|
};
|
|
10629
11251
|
}, [applyHoverAt]);
|
|
10630
|
-
(0,
|
|
11252
|
+
(0, import_react11.useEffect)(() => {
|
|
10631
11253
|
const ptr = pointerRef.current;
|
|
10632
11254
|
if (!ptr) return;
|
|
10633
11255
|
applyHoverAt(ptr.x, ptr.y, rects);
|
|
10634
11256
|
}, [rects, applyHoverAt]);
|
|
10635
|
-
(0,
|
|
11257
|
+
(0, import_react11.useEffect)(() => {
|
|
10636
11258
|
const rememberPointer = (clientX, clientY) => {
|
|
10637
11259
|
pointerRef.current = { x: clientX, y: clientY };
|
|
10638
11260
|
const top = iframeOffsetTopRef.current;
|
|
@@ -10656,7 +11278,7 @@ function SectionPickerOverlay({
|
|
|
10656
11278
|
window.removeEventListener("message", onPointerSync);
|
|
10657
11279
|
};
|
|
10658
11280
|
}, [rects, applyHoverAt]);
|
|
10659
|
-
const handleSelect = (0,
|
|
11281
|
+
const handleSelect = (0, import_react11.useCallback)(
|
|
10660
11282
|
(section) => {
|
|
10661
11283
|
if (selectedId) return;
|
|
10662
11284
|
setSelectedId(section.id);
|
|
@@ -10664,7 +11286,7 @@ function SectionPickerOverlay({
|
|
|
10664
11286
|
},
|
|
10665
11287
|
[selectedId, onSelect]
|
|
10666
11288
|
);
|
|
10667
|
-
(0,
|
|
11289
|
+
(0, import_react11.useEffect)(() => {
|
|
10668
11290
|
const onKeyDown = (e) => {
|
|
10669
11291
|
if (e.key === "Escape") {
|
|
10670
11292
|
e.preventDefault();
|
|
@@ -10678,7 +11300,7 @@ function SectionPickerOverlay({
|
|
|
10678
11300
|
const portalRoot = typeof document !== "undefined" ? document.querySelector("[data-ohw-bridge-root]") ?? document.body : null;
|
|
10679
11301
|
if (!portalRoot) return null;
|
|
10680
11302
|
return (0, import_react_dom3.createPortal)(
|
|
10681
|
-
/* @__PURE__ */ (0,
|
|
11303
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
10682
11304
|
"div",
|
|
10683
11305
|
{
|
|
10684
11306
|
"data-ohw-section-picker": "",
|
|
@@ -10688,12 +11310,12 @@ function SectionPickerOverlay({
|
|
|
10688
11310
|
role: "dialog",
|
|
10689
11311
|
"aria-label": "Choose a section",
|
|
10690
11312
|
children: [
|
|
10691
|
-
/* @__PURE__ */ (0,
|
|
11313
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
10692
11314
|
"div",
|
|
10693
11315
|
{
|
|
10694
11316
|
className: "pointer-events-auto fixed left-5 z-[2]",
|
|
10695
11317
|
style: { top: chromeClip.top + 20 },
|
|
10696
|
-
children: /* @__PURE__ */ (0,
|
|
11318
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
10697
11319
|
Button,
|
|
10698
11320
|
{
|
|
10699
11321
|
type: "button",
|
|
@@ -10702,14 +11324,14 @@ function SectionPickerOverlay({
|
|
|
10702
11324
|
className: "h-8 min-w-0 gap-1 border-border bg-background px-2 py-1.5 shadow-sm hover:bg-muted cursor-pointer",
|
|
10703
11325
|
onClick: onBack,
|
|
10704
11326
|
children: [
|
|
10705
|
-
/* @__PURE__ */ (0,
|
|
11327
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react14.ArrowLeft, { className: "size-4 shrink-0", "aria-hidden": true }),
|
|
10706
11328
|
"Back"
|
|
10707
11329
|
]
|
|
10708
11330
|
}
|
|
10709
11331
|
)
|
|
10710
11332
|
}
|
|
10711
11333
|
),
|
|
10712
|
-
/* @__PURE__ */ (0,
|
|
11334
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
10713
11335
|
"div",
|
|
10714
11336
|
{
|
|
10715
11337
|
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",
|
|
@@ -10722,7 +11344,7 @@ function SectionPickerOverlay({
|
|
|
10722
11344
|
children: "Click on section to select"
|
|
10723
11345
|
}
|
|
10724
11346
|
),
|
|
10725
|
-
!isOnTargetPage ? /* @__PURE__ */ (0,
|
|
11347
|
+
!isOnTargetPage ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
10726
11348
|
"div",
|
|
10727
11349
|
{
|
|
10728
11350
|
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",
|
|
@@ -10730,14 +11352,14 @@ function SectionPickerOverlay({
|
|
|
10730
11352
|
children: "Loading page preview\u2026"
|
|
10731
11353
|
}
|
|
10732
11354
|
) : null,
|
|
10733
|
-
isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */ (0,
|
|
11355
|
+
isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "pointer-events-auto fixed inset-0 z-[1] flex items-center justify-center bg-muted/40", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-sm text-muted-foreground", children: "No sections found on this page." }) }) : null,
|
|
10734
11356
|
isOnTargetPage ? liveSections.map((section) => {
|
|
10735
11357
|
const rect = rects.get(section.id);
|
|
10736
11358
|
if (!rect || rect.width <= 0 || rect.height <= 0) return null;
|
|
10737
11359
|
const isSelected = selectedId === section.id;
|
|
10738
11360
|
const isHovered = hoveredId === section.id;
|
|
10739
11361
|
const isLit = isSelected || isHovered;
|
|
10740
|
-
return /* @__PURE__ */ (0,
|
|
11362
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
10741
11363
|
"button",
|
|
10742
11364
|
{
|
|
10743
11365
|
type: "button",
|
|
@@ -10752,7 +11374,7 @@ function SectionPickerOverlay({
|
|
|
10752
11374
|
"aria-label": `Select section ${section.label}`,
|
|
10753
11375
|
onClick: () => handleSelect(section),
|
|
10754
11376
|
children: [
|
|
10755
|
-
isLit ? /* @__PURE__ */ (0,
|
|
11377
|
+
isLit ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
10756
11378
|
"span",
|
|
10757
11379
|
{
|
|
10758
11380
|
className: "pointer-events-none absolute",
|
|
@@ -10765,13 +11387,13 @@ function SectionPickerOverlay({
|
|
|
10765
11387
|
"aria-hidden": true
|
|
10766
11388
|
}
|
|
10767
11389
|
) : null,
|
|
10768
|
-
isSelected ? /* @__PURE__ */ (0,
|
|
11390
|
+
isSelected ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
10769
11391
|
"span",
|
|
10770
11392
|
{
|
|
10771
11393
|
className: "absolute right-3 top-3 flex size-8 items-center justify-center rounded-full text-white",
|
|
10772
11394
|
style: { backgroundColor: "var(--ohw-primary, #0885fe)" },
|
|
10773
11395
|
"aria-hidden": true,
|
|
10774
|
-
children: /* @__PURE__ */ (0,
|
|
11396
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react14.Check, { className: "size-5" })
|
|
10775
11397
|
}
|
|
10776
11398
|
) : null
|
|
10777
11399
|
]
|
|
@@ -10787,7 +11409,7 @@ function SectionPickerOverlay({
|
|
|
10787
11409
|
}
|
|
10788
11410
|
|
|
10789
11411
|
// src/ui/link-modal/useLinkModalState.ts
|
|
10790
|
-
var
|
|
11412
|
+
var import_react12 = require("react");
|
|
10791
11413
|
function useLinkModalState({
|
|
10792
11414
|
open,
|
|
10793
11415
|
mode,
|
|
@@ -10799,14 +11421,14 @@ function useLinkModalState({
|
|
|
10799
11421
|
onClose,
|
|
10800
11422
|
onSubmit
|
|
10801
11423
|
}) {
|
|
10802
|
-
const availablePages = (0,
|
|
10803
|
-
const [searchValue, setSearchValue] = (0,
|
|
10804
|
-
const [selectedPage, setSelectedPage] = (0,
|
|
10805
|
-
const [selectedSection, setSelectedSection] = (0,
|
|
10806
|
-
const [step, setStep] = (0,
|
|
10807
|
-
const [dropdownOpen, setDropdownOpen] = (0,
|
|
10808
|
-
const [urlError, setUrlError] = (0,
|
|
10809
|
-
const reset = (0,
|
|
11424
|
+
const availablePages = (0, import_react12.useMemo)(() => pages, [pages]);
|
|
11425
|
+
const [searchValue, setSearchValue] = (0, import_react12.useState)("");
|
|
11426
|
+
const [selectedPage, setSelectedPage] = (0, import_react12.useState)(null);
|
|
11427
|
+
const [selectedSection, setSelectedSection] = (0, import_react12.useState)(null);
|
|
11428
|
+
const [step, setStep] = (0, import_react12.useState)("input");
|
|
11429
|
+
const [dropdownOpen, setDropdownOpen] = (0, import_react12.useState)(false);
|
|
11430
|
+
const [urlError, setUrlError] = (0, import_react12.useState)("");
|
|
11431
|
+
const reset = (0, import_react12.useCallback)(() => {
|
|
10810
11432
|
setSearchValue("");
|
|
10811
11433
|
setSelectedPage(null);
|
|
10812
11434
|
setSelectedSection(null);
|
|
@@ -10814,7 +11436,7 @@ function useLinkModalState({
|
|
|
10814
11436
|
setDropdownOpen(false);
|
|
10815
11437
|
setUrlError("");
|
|
10816
11438
|
}, []);
|
|
10817
|
-
(0,
|
|
11439
|
+
(0, import_react12.useEffect)(() => {
|
|
10818
11440
|
if (!open) return;
|
|
10819
11441
|
if (mode === "edit" && initialTarget) {
|
|
10820
11442
|
const { pageRoute } = parseTarget(initialTarget);
|
|
@@ -10830,11 +11452,11 @@ function useLinkModalState({
|
|
|
10830
11452
|
setDropdownOpen(false);
|
|
10831
11453
|
setUrlError("");
|
|
10832
11454
|
}, [open, mode, initialTarget, reset]);
|
|
10833
|
-
const filteredPages = (0,
|
|
11455
|
+
const filteredPages = (0, import_react12.useMemo)(() => {
|
|
10834
11456
|
if (!searchValue.trim()) return availablePages;
|
|
10835
11457
|
return availablePages.filter((p) => p.title.toLowerCase().startsWith(searchValue.toLowerCase()));
|
|
10836
11458
|
}, [availablePages, searchValue]);
|
|
10837
|
-
const activeSections = (0,
|
|
11459
|
+
const activeSections = (0, import_react12.useMemo)(() => {
|
|
10838
11460
|
if (!selectedPage) return [];
|
|
10839
11461
|
return getSectionsForPath(sectionsByPath, selectedPage.path);
|
|
10840
11462
|
}, [selectedPage, sectionsByPath]);
|
|
@@ -10883,7 +11505,7 @@ function useLinkModalState({
|
|
|
10883
11505
|
reset();
|
|
10884
11506
|
onClose();
|
|
10885
11507
|
};
|
|
10886
|
-
const isValid = (0,
|
|
11508
|
+
const isValid = (0, import_react12.useMemo)(() => {
|
|
10887
11509
|
if (urlError) return false;
|
|
10888
11510
|
if (showBreadcrumb) return true;
|
|
10889
11511
|
if (selectedPage) return true;
|
|
@@ -10951,7 +11573,7 @@ function useLinkModalState({
|
|
|
10951
11573
|
}
|
|
10952
11574
|
|
|
10953
11575
|
// src/ui/link-modal/LinkPopover.tsx
|
|
10954
|
-
var
|
|
11576
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
10955
11577
|
function postToParent(data) {
|
|
10956
11578
|
window.parent?.postMessage(data, "*");
|
|
10957
11579
|
}
|
|
@@ -10980,7 +11602,7 @@ function LinkPopover({
|
|
|
10980
11602
|
onSubmit
|
|
10981
11603
|
});
|
|
10982
11604
|
const sectionPickerActive = state.showSectionPicker && Boolean(state.selectedPage);
|
|
10983
|
-
(0,
|
|
11605
|
+
(0, import_react13.useEffect)(() => {
|
|
10984
11606
|
if (!open) return;
|
|
10985
11607
|
if (sectionPickerActive) {
|
|
10986
11608
|
postToParent({ type: "ui:unlock" });
|
|
@@ -11047,15 +11669,15 @@ function LinkPopover({
|
|
|
11047
11669
|
);
|
|
11048
11670
|
};
|
|
11049
11671
|
}, [open, sectionPickerActive]);
|
|
11050
|
-
return /* @__PURE__ */ (0,
|
|
11051
|
-
/* @__PURE__ */ (0,
|
|
11672
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
|
|
11673
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
11052
11674
|
Dialog2,
|
|
11053
11675
|
{
|
|
11054
11676
|
open: open && !sectionPickerActive,
|
|
11055
11677
|
onOpenChange: (next) => {
|
|
11056
11678
|
if (!next) onClose?.();
|
|
11057
11679
|
},
|
|
11058
|
-
children: /* @__PURE__ */ (0,
|
|
11680
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
11059
11681
|
DialogContent,
|
|
11060
11682
|
{
|
|
11061
11683
|
ref: panelRef,
|
|
@@ -11065,12 +11687,12 @@ function LinkPopover({
|
|
|
11065
11687
|
"data-ohw-bridge": "",
|
|
11066
11688
|
showCloseButton: false,
|
|
11067
11689
|
className: "gap-0 p-0 w-full max-w-[448px] pointer-events-auto z-[2147483646] overflow-visible",
|
|
11068
|
-
children: /* @__PURE__ */ (0,
|
|
11690
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LinkEditorPanel, { state, onClose })
|
|
11069
11691
|
}
|
|
11070
11692
|
)
|
|
11071
11693
|
}
|
|
11072
11694
|
),
|
|
11073
|
-
sectionPickerActive && state.selectedPage ? /* @__PURE__ */ (0,
|
|
11695
|
+
sectionPickerActive && state.selectedPage ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
11074
11696
|
SectionPickerOverlay,
|
|
11075
11697
|
{
|
|
11076
11698
|
pagePath: state.selectedPage.path,
|
|
@@ -14258,9 +14880,9 @@ function addFooterColumnWithPersist({
|
|
|
14258
14880
|
}
|
|
14259
14881
|
|
|
14260
14882
|
// src/ui/FloatingPanel.tsx
|
|
14261
|
-
var
|
|
14262
|
-
var
|
|
14263
|
-
var
|
|
14883
|
+
var import_react14 = require("react");
|
|
14884
|
+
var import_lucide_react15 = require("lucide-react");
|
|
14885
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
14264
14886
|
var PANEL_WIDTH = 256;
|
|
14265
14887
|
var EDGE_MARGIN = 16;
|
|
14266
14888
|
function getVisibleClip(parentScroll) {
|
|
@@ -14306,23 +14928,23 @@ function FloatingPanel({
|
|
|
14306
14928
|
className,
|
|
14307
14929
|
bodyClassName
|
|
14308
14930
|
}) {
|
|
14309
|
-
const panelRef = (0,
|
|
14310
|
-
const [measured, setMeasured] = (0,
|
|
14311
|
-
const dragRef = (0,
|
|
14931
|
+
const panelRef = (0, import_react14.useRef)(null);
|
|
14932
|
+
const [measured, setMeasured] = (0, import_react14.useState)({ w: PANEL_WIDTH, h: 280 });
|
|
14933
|
+
const dragRef = (0, import_react14.useRef)(null);
|
|
14312
14934
|
const resolved = position ?? defaultFloatingPanelPosition(parentScroll, measured.h);
|
|
14313
14935
|
const clamped = clampPosition(resolved, parentScroll, measured.w, measured.h);
|
|
14314
|
-
(0,
|
|
14936
|
+
(0, import_react14.useLayoutEffect)(() => {
|
|
14315
14937
|
if (!open || !panelRef.current) return;
|
|
14316
14938
|
const el = panelRef.current;
|
|
14317
14939
|
const next = { w: el.offsetWidth || PANEL_WIDTH, h: el.offsetHeight || 280 };
|
|
14318
14940
|
setMeasured((prev) => prev.w === next.w && prev.h === next.h ? prev : next);
|
|
14319
14941
|
}, [open, children, title, context]);
|
|
14320
|
-
(0,
|
|
14942
|
+
(0, import_react14.useEffect)(() => {
|
|
14321
14943
|
if (!open || !position || !onPositionChange) return;
|
|
14322
14944
|
const next = clampPosition(position, parentScroll, measured.w, measured.h);
|
|
14323
14945
|
if (next.x !== position.x || next.y !== position.y) onPositionChange(next);
|
|
14324
14946
|
}, [open, parentScroll, measured.w, measured.h, position, onPositionChange]);
|
|
14325
|
-
const onHeaderPointerDown = (0,
|
|
14947
|
+
const onHeaderPointerDown = (0, import_react14.useCallback)(
|
|
14326
14948
|
(e) => {
|
|
14327
14949
|
if (e.button !== 0) return;
|
|
14328
14950
|
if (e.target.closest("[data-ohw-floating-panel-close]")) return;
|
|
@@ -14341,7 +14963,7 @@ function FloatingPanel({
|
|
|
14341
14963
|
},
|
|
14342
14964
|
[clamped.x, clamped.y]
|
|
14343
14965
|
);
|
|
14344
|
-
const onHeaderPointerMove = (0,
|
|
14966
|
+
const onHeaderPointerMove = (0, import_react14.useCallback)(
|
|
14345
14967
|
(e) => {
|
|
14346
14968
|
const drag = dragRef.current;
|
|
14347
14969
|
if (!drag || drag.pointerId !== e.pointerId) return;
|
|
@@ -14368,7 +14990,7 @@ function FloatingPanel({
|
|
|
14368
14990
|
},
|
|
14369
14991
|
[measured.h, measured.w, onPositionChange, parentScroll]
|
|
14370
14992
|
);
|
|
14371
|
-
const endDrag = (0,
|
|
14993
|
+
const endDrag = (0, import_react14.useCallback)((e) => {
|
|
14372
14994
|
const drag = dragRef.current;
|
|
14373
14995
|
if (!drag || drag.pointerId !== e.pointerId) return;
|
|
14374
14996
|
dragRef.current = null;
|
|
@@ -14378,13 +15000,13 @@ function FloatingPanel({
|
|
|
14378
15000
|
} catch {
|
|
14379
15001
|
}
|
|
14380
15002
|
}, []);
|
|
14381
|
-
(0,
|
|
15003
|
+
(0, import_react14.useEffect)(() => {
|
|
14382
15004
|
if (open) return;
|
|
14383
15005
|
document.documentElement.removeAttribute("data-ohw-panel-dragging");
|
|
14384
15006
|
}, [open]);
|
|
14385
|
-
(0,
|
|
15007
|
+
(0, import_react14.useEffect)(() => () => document.documentElement.removeAttribute("data-ohw-panel-dragging"), []);
|
|
14386
15008
|
if (!open) return null;
|
|
14387
|
-
return /* @__PURE__ */ (0,
|
|
15009
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
14388
15010
|
"div",
|
|
14389
15011
|
{
|
|
14390
15012
|
ref: panelRef,
|
|
@@ -14401,7 +15023,7 @@ function FloatingPanel({
|
|
|
14401
15023
|
onPointerDown: (e) => e.stopPropagation(),
|
|
14402
15024
|
onClick: (e) => e.stopPropagation(),
|
|
14403
15025
|
children: [
|
|
14404
|
-
/* @__PURE__ */ (0,
|
|
15026
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
14405
15027
|
"div",
|
|
14406
15028
|
{
|
|
14407
15029
|
"data-ohw-floating-panel-header": "",
|
|
@@ -14411,14 +15033,14 @@ function FloatingPanel({
|
|
|
14411
15033
|
onPointerUp: endDrag,
|
|
14412
15034
|
onPointerCancel: endDrag,
|
|
14413
15035
|
children: [
|
|
14414
|
-
/* @__PURE__ */ (0,
|
|
14415
|
-
/* @__PURE__ */ (0,
|
|
14416
|
-
icon ? /* @__PURE__ */ (0,
|
|
14417
|
-
/* @__PURE__ */ (0,
|
|
15036
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
|
|
15037
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
15038
|
+
icon ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "shrink-0 text-foreground", children: icon }) : null,
|
|
15039
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "min-w-0 flex-1 text-lg font-semibold leading-7 text-foreground", children: title })
|
|
14418
15040
|
] }),
|
|
14419
|
-
context ? /* @__PURE__ */ (0,
|
|
15041
|
+
context ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "w-full text-sm leading-5 text-muted-foreground", children: context }) : null
|
|
14420
15042
|
] }),
|
|
14421
|
-
/* @__PURE__ */ (0,
|
|
15043
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
14422
15044
|
"button",
|
|
14423
15045
|
{
|
|
14424
15046
|
type: "button",
|
|
@@ -14430,13 +15052,13 @@ function FloatingPanel({
|
|
|
14430
15052
|
onClose();
|
|
14431
15053
|
},
|
|
14432
15054
|
onPointerDown: (e) => e.stopPropagation(),
|
|
14433
|
-
children: /* @__PURE__ */ (0,
|
|
15055
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react15.X, { size: 16, "aria-hidden": true })
|
|
14434
15056
|
}
|
|
14435
15057
|
)
|
|
14436
15058
|
]
|
|
14437
15059
|
}
|
|
14438
15060
|
),
|
|
14439
|
-
/* @__PURE__ */ (0,
|
|
15061
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
14440
15062
|
"div",
|
|
14441
15063
|
{
|
|
14442
15064
|
"data-ohw-floating-panel-body": "",
|
|
@@ -14450,15 +15072,15 @@ function FloatingPanel({
|
|
|
14450
15072
|
}
|
|
14451
15073
|
|
|
14452
15074
|
// src/ui/socials-display-panel.tsx
|
|
14453
|
-
var
|
|
15075
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
14454
15076
|
function DisplaySwitch({
|
|
14455
15077
|
label,
|
|
14456
15078
|
checked,
|
|
14457
15079
|
disabled,
|
|
14458
15080
|
onChange
|
|
14459
15081
|
}) {
|
|
14460
|
-
return /* @__PURE__ */ (0,
|
|
14461
|
-
/* @__PURE__ */ (0,
|
|
15082
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex w-full items-center gap-2", children: [
|
|
15083
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
14462
15084
|
"span",
|
|
14463
15085
|
{
|
|
14464
15086
|
className: cn(
|
|
@@ -14468,7 +15090,7 @@ function DisplaySwitch({
|
|
|
14468
15090
|
children: label
|
|
14469
15091
|
}
|
|
14470
15092
|
),
|
|
14471
|
-
/* @__PURE__ */ (0,
|
|
15093
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
14472
15094
|
"button",
|
|
14473
15095
|
{
|
|
14474
15096
|
type: "button",
|
|
@@ -14482,7 +15104,7 @@ function DisplaySwitch({
|
|
|
14482
15104
|
checked ? "bg-bridge-primary" : "bg-primary-50",
|
|
14483
15105
|
disabled ? "cursor-default opacity-50" : "cursor-pointer"
|
|
14484
15106
|
),
|
|
14485
|
-
children: /* @__PURE__ */ (0,
|
|
15107
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
14486
15108
|
"span",
|
|
14487
15109
|
{
|
|
14488
15110
|
className: cn(
|
|
@@ -14496,8 +15118,8 @@ function DisplaySwitch({
|
|
|
14496
15118
|
] });
|
|
14497
15119
|
}
|
|
14498
15120
|
function SocialsDisplayPanel({ display, onChange, className }) {
|
|
14499
|
-
return /* @__PURE__ */ (0,
|
|
14500
|
-
/* @__PURE__ */ (0,
|
|
15121
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cn("flex w-full flex-col gap-3", className), children: [
|
|
15122
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
14501
15123
|
DisplaySwitch,
|
|
14502
15124
|
{
|
|
14503
15125
|
label: "Text",
|
|
@@ -14506,7 +15128,7 @@ function SocialsDisplayPanel({ display, onChange, className }) {
|
|
|
14506
15128
|
onChange: (text) => onChange({ ...display, text })
|
|
14507
15129
|
}
|
|
14508
15130
|
),
|
|
14509
|
-
/* @__PURE__ */ (0,
|
|
15131
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
14510
15132
|
DisplaySwitch,
|
|
14511
15133
|
{
|
|
14512
15134
|
label: "Icon",
|
|
@@ -14781,7 +15403,7 @@ function hitTestNavDropSlot(clientX, clientY, draggedHrefKey, draggedEl) {
|
|
|
14781
15403
|
}
|
|
14782
15404
|
|
|
14783
15405
|
// src/useNavItemDrag.ts
|
|
14784
|
-
var
|
|
15406
|
+
var import_react15 = require("react");
|
|
14785
15407
|
function useNavItemDrag({
|
|
14786
15408
|
isEditMode,
|
|
14787
15409
|
editContentRef,
|
|
@@ -14805,11 +15427,11 @@ function useNavItemDrag({
|
|
|
14805
15427
|
getNavigationItemAnchor: getNavigationItemAnchor2,
|
|
14806
15428
|
isDragHandleDisabled: isDragHandleDisabled2
|
|
14807
15429
|
}) {
|
|
14808
|
-
const navDragRef = (0,
|
|
14809
|
-
const [navDropSlots, setNavDropSlots] = (0,
|
|
14810
|
-
const [activeNavDropIndex, setActiveNavDropIndex] = (0,
|
|
14811
|
-
const navPointerDragRef = (0,
|
|
14812
|
-
const clearNavDragVisuals = (0,
|
|
15430
|
+
const navDragRef = (0, import_react15.useRef)(null);
|
|
15431
|
+
const [navDropSlots, setNavDropSlots] = (0, import_react15.useState)([]);
|
|
15432
|
+
const [activeNavDropIndex, setActiveNavDropIndex] = (0, import_react15.useState)(null);
|
|
15433
|
+
const navPointerDragRef = (0, import_react15.useRef)(null);
|
|
15434
|
+
const clearNavDragVisuals = (0, import_react15.useCallback)(() => {
|
|
14813
15435
|
const session = navDragRef.current;
|
|
14814
15436
|
const nestedHrefKey = session?.draggedEl?.closest("[data-ohw-nav-children]") != null ? session.hrefKey : null;
|
|
14815
15437
|
navDragRef.current = null;
|
|
@@ -14842,7 +15464,7 @@ function useNavItemDrag({
|
|
|
14842
15464
|
document.documentElement.removeAttribute("data-ohw-nav-dragging-root");
|
|
14843
15465
|
unlockItemDragInteraction();
|
|
14844
15466
|
}, [setDraggedItemRect, setIsItemDragging, setSiblingHintRects]);
|
|
14845
|
-
const refreshNavDragVisuals = (0,
|
|
15467
|
+
const refreshNavDragVisuals = (0, import_react15.useCallback)(
|
|
14846
15468
|
(session, activeSlot, clientX, clientY) => {
|
|
14847
15469
|
setDraggedItemRect(session.draggedEl.getBoundingClientRect());
|
|
14848
15470
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -14860,13 +15482,13 @@ function useNavItemDrag({
|
|
|
14860
15482
|
},
|
|
14861
15483
|
[setDraggedItemRect, setSiblingHintRects]
|
|
14862
15484
|
);
|
|
14863
|
-
const refreshNavDragVisualsRef = (0,
|
|
15485
|
+
const refreshNavDragVisualsRef = (0, import_react15.useRef)(refreshNavDragVisuals);
|
|
14864
15486
|
refreshNavDragVisualsRef.current = refreshNavDragVisuals;
|
|
14865
|
-
const commitNavDragRef = (0,
|
|
15487
|
+
const commitNavDragRef = (0, import_react15.useRef)(() => {
|
|
14866
15488
|
});
|
|
14867
|
-
const beginNavDragRef = (0,
|
|
15489
|
+
const beginNavDragRef = (0, import_react15.useRef)(() => {
|
|
14868
15490
|
});
|
|
14869
|
-
const beginNavDrag = (0,
|
|
15491
|
+
const beginNavDrag = (0, import_react15.useCallback)(
|
|
14870
15492
|
(session) => {
|
|
14871
15493
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
14872
15494
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -14905,7 +15527,7 @@ function useNavItemDrag({
|
|
|
14905
15527
|
]
|
|
14906
15528
|
);
|
|
14907
15529
|
beginNavDragRef.current = beginNavDrag;
|
|
14908
|
-
const commitNavDrag = (0,
|
|
15530
|
+
const commitNavDrag = (0, import_react15.useCallback)(
|
|
14909
15531
|
(clientX, clientY) => {
|
|
14910
15532
|
const session = navDragRef.current;
|
|
14911
15533
|
if (!session) {
|
|
@@ -14984,7 +15606,7 @@ function useNavItemDrag({
|
|
|
14984
15606
|
[clearNavDragVisuals, deselectRef, editContentRef, postToParentRef, selectRef]
|
|
14985
15607
|
);
|
|
14986
15608
|
commitNavDragRef.current = commitNavDrag;
|
|
14987
|
-
const startNavLinkDrag = (0,
|
|
15609
|
+
const startNavLinkDrag = (0, import_react15.useCallback)(
|
|
14988
15610
|
(anchor, clientX, clientY, wasSelected) => {
|
|
14989
15611
|
if (footerDragRef.current) return false;
|
|
14990
15612
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -15002,7 +15624,7 @@ function useNavItemDrag({
|
|
|
15002
15624
|
},
|
|
15003
15625
|
[beginNavDrag, footerDragRef, isDragHandleDisabled2, isCtaButton]
|
|
15004
15626
|
);
|
|
15005
|
-
const onNavDragOver = (0,
|
|
15627
|
+
const onNavDragOver = (0, import_react15.useCallback)(
|
|
15006
15628
|
(e) => {
|
|
15007
15629
|
const session = navDragRef.current;
|
|
15008
15630
|
if (!session) return false;
|
|
@@ -15014,7 +15636,7 @@ function useNavItemDrag({
|
|
|
15014
15636
|
},
|
|
15015
15637
|
[]
|
|
15016
15638
|
);
|
|
15017
|
-
(0,
|
|
15639
|
+
(0, import_react15.useEffect)(() => {
|
|
15018
15640
|
if (!isEditMode) return;
|
|
15019
15641
|
const THRESHOLD = 10;
|
|
15020
15642
|
const resolveWasSelected = (el) => {
|
|
@@ -15141,7 +15763,7 @@ function useNavItemDrag({
|
|
|
15141
15763
|
setLinkPopover,
|
|
15142
15764
|
suppressNextClickRef
|
|
15143
15765
|
]);
|
|
15144
|
-
const armNavPressFromChrome = (0,
|
|
15766
|
+
const armNavPressFromChrome = (0, import_react15.useCallback)(
|
|
15145
15767
|
(selected, clientX, clientY, pointerId) => {
|
|
15146
15768
|
const hrefKey = selected.getAttribute("data-ohw-href-key");
|
|
15147
15769
|
if (!hrefKey || !isNavbarHrefKey(hrefKey)) return false;
|
|
@@ -15173,7 +15795,7 @@ function useNavItemDrag({
|
|
|
15173
15795
|
}
|
|
15174
15796
|
|
|
15175
15797
|
// src/useSectionDrag.ts
|
|
15176
|
-
var
|
|
15798
|
+
var import_react16 = require("react");
|
|
15177
15799
|
|
|
15178
15800
|
// src/lib/section-dnd.ts
|
|
15179
15801
|
function isFooterSection(el) {
|
|
@@ -15272,21 +15894,21 @@ function useSectionDrag({
|
|
|
15272
15894
|
suppressNextClickRef,
|
|
15273
15895
|
suppressClickUntilRef
|
|
15274
15896
|
}) {
|
|
15275
|
-
const sectionDragRef = (0,
|
|
15276
|
-
const [sectionDropSlots, setSectionDropSlots] = (0,
|
|
15277
|
-
const [activeSectionDropIndex, setActiveSectionDropIndex] = (0,
|
|
15278
|
-
const [isSectionDragging, setIsSectionDragging] = (0,
|
|
15279
|
-
const sectionPointerDragRef = (0,
|
|
15280
|
-
const autoScrollRafRef = (0,
|
|
15281
|
-
const autoScrollDeltaRef = (0,
|
|
15282
|
-
const stopAutoScroll = (0,
|
|
15897
|
+
const sectionDragRef = (0, import_react16.useRef)(null);
|
|
15898
|
+
const [sectionDropSlots, setSectionDropSlots] = (0, import_react16.useState)([]);
|
|
15899
|
+
const [activeSectionDropIndex, setActiveSectionDropIndex] = (0, import_react16.useState)(null);
|
|
15900
|
+
const [isSectionDragging, setIsSectionDragging] = (0, import_react16.useState)(false);
|
|
15901
|
+
const sectionPointerDragRef = (0, import_react16.useRef)(null);
|
|
15902
|
+
const autoScrollRafRef = (0, import_react16.useRef)(null);
|
|
15903
|
+
const autoScrollDeltaRef = (0, import_react16.useRef)(0);
|
|
15904
|
+
const stopAutoScroll = (0, import_react16.useCallback)(() => {
|
|
15283
15905
|
if (autoScrollRafRef.current != null) {
|
|
15284
15906
|
cancelAnimationFrame(autoScrollRafRef.current);
|
|
15285
15907
|
autoScrollRafRef.current = null;
|
|
15286
15908
|
}
|
|
15287
15909
|
autoScrollDeltaRef.current = 0;
|
|
15288
15910
|
}, []);
|
|
15289
|
-
const tickAutoScroll = (0,
|
|
15911
|
+
const tickAutoScroll = (0, import_react16.useCallback)(() => {
|
|
15290
15912
|
if (!sectionDragRef.current) {
|
|
15291
15913
|
stopAutoScroll();
|
|
15292
15914
|
return;
|
|
@@ -15296,7 +15918,7 @@ function useSectionDrag({
|
|
|
15296
15918
|
}
|
|
15297
15919
|
autoScrollRafRef.current = requestAnimationFrame(tickAutoScroll);
|
|
15298
15920
|
}, [postToParentRef, stopAutoScroll]);
|
|
15299
|
-
const updateAutoScroll = (0,
|
|
15921
|
+
const updateAutoScroll = (0, import_react16.useCallback)(
|
|
15300
15922
|
(clientY) => {
|
|
15301
15923
|
const clip = visibleClip(parentScrollRef.current);
|
|
15302
15924
|
let delta = 0;
|
|
@@ -15318,7 +15940,7 @@ function useSectionDrag({
|
|
|
15318
15940
|
},
|
|
15319
15941
|
[parentScrollRef, stopAutoScroll, tickAutoScroll]
|
|
15320
15942
|
);
|
|
15321
|
-
const clearSectionDragVisuals = (0,
|
|
15943
|
+
const clearSectionDragVisuals = (0, import_react16.useCallback)(() => {
|
|
15322
15944
|
sectionDragRef.current?.draggedEl.removeAttribute("data-ohw-section-dragging");
|
|
15323
15945
|
sectionDragRef.current = null;
|
|
15324
15946
|
setSectionDropSlots([]);
|
|
@@ -15328,7 +15950,7 @@ function useSectionDrag({
|
|
|
15328
15950
|
document.documentElement.removeAttribute("data-ohw-section-dragging-root");
|
|
15329
15951
|
unlockItemDragInteraction();
|
|
15330
15952
|
}, [stopAutoScroll]);
|
|
15331
|
-
const refreshSectionDragVisuals = (0,
|
|
15953
|
+
const refreshSectionDragVisuals = (0, import_react16.useCallback)(
|
|
15332
15954
|
(session, clientX, clientY) => {
|
|
15333
15955
|
session.lastClientX = clientX;
|
|
15334
15956
|
session.lastClientY = clientY;
|
|
@@ -15342,7 +15964,7 @@ function useSectionDrag({
|
|
|
15342
15964
|
},
|
|
15343
15965
|
[updateAutoScroll]
|
|
15344
15966
|
);
|
|
15345
|
-
const beginSectionDrag = (0,
|
|
15967
|
+
const beginSectionDrag = (0, import_react16.useCallback)(
|
|
15346
15968
|
(session) => {
|
|
15347
15969
|
sectionDragRef.current = session;
|
|
15348
15970
|
setIsSectionDragging(true);
|
|
@@ -15353,7 +15975,7 @@ function useSectionDrag({
|
|
|
15353
15975
|
},
|
|
15354
15976
|
[refreshSectionDragVisuals]
|
|
15355
15977
|
);
|
|
15356
|
-
const commitSectionDrag = (0,
|
|
15978
|
+
const commitSectionDrag = (0, import_react16.useCallback)(() => {
|
|
15357
15979
|
const session = sectionDragRef.current;
|
|
15358
15980
|
if (!session) {
|
|
15359
15981
|
clearSectionDragVisuals();
|
|
@@ -15382,7 +16004,7 @@ function useSectionDrag({
|
|
|
15382
16004
|
});
|
|
15383
16005
|
});
|
|
15384
16006
|
}, [clearSectionDragVisuals, editContentRef, postToParentRef]);
|
|
15385
|
-
const startSectionPressDrag = (0,
|
|
16007
|
+
const startSectionPressDrag = (0, import_react16.useCallback)(
|
|
15386
16008
|
(el, clientX, clientY, pointerId) => {
|
|
15387
16009
|
if (navDragRef.current || footerDragRef.current || sectionDragRef.current) return false;
|
|
15388
16010
|
const instanceId = instanceIdOf(el);
|
|
@@ -15399,7 +16021,7 @@ function useSectionDrag({
|
|
|
15399
16021
|
},
|
|
15400
16022
|
[footerDragRef, navDragRef]
|
|
15401
16023
|
);
|
|
15402
|
-
(0,
|
|
16024
|
+
(0, import_react16.useEffect)(() => {
|
|
15403
16025
|
if (!isEditMode) return;
|
|
15404
16026
|
const onPointerDown = (e) => {
|
|
15405
16027
|
if (e.button !== 0) return;
|
|
@@ -15504,8 +16126,8 @@ function useSectionDrag({
|
|
|
15504
16126
|
}
|
|
15505
16127
|
|
|
15506
16128
|
// src/ui/footer-container-chrome.tsx
|
|
15507
|
-
var
|
|
15508
|
-
var
|
|
16129
|
+
var import_lucide_react16 = require("lucide-react");
|
|
16130
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
15509
16131
|
function FooterContainerChrome({
|
|
15510
16132
|
rect,
|
|
15511
16133
|
onAdd,
|
|
@@ -15513,7 +16135,7 @@ function FooterContainerChrome({
|
|
|
15513
16135
|
}) {
|
|
15514
16136
|
const chromeGap = 6;
|
|
15515
16137
|
const buttonMargin = 7;
|
|
15516
|
-
return /* @__PURE__ */ (0,
|
|
16138
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
15517
16139
|
"div",
|
|
15518
16140
|
{
|
|
15519
16141
|
"data-ohw-footer-container-chrome": "",
|
|
@@ -15525,8 +16147,8 @@ function FooterContainerChrome({
|
|
|
15525
16147
|
width: rect.width + chromeGap * 2,
|
|
15526
16148
|
height: rect.height + chromeGap * 2
|
|
15527
16149
|
},
|
|
15528
|
-
children: /* @__PURE__ */ (0,
|
|
15529
|
-
/* @__PURE__ */ (0,
|
|
16150
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Tooltip, { children: [
|
|
16151
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
15530
16152
|
"button",
|
|
15531
16153
|
{
|
|
15532
16154
|
type: "button",
|
|
@@ -15545,17 +16167,17 @@ function FooterContainerChrome({
|
|
|
15545
16167
|
if (addDisabled) return;
|
|
15546
16168
|
onAdd();
|
|
15547
16169
|
},
|
|
15548
|
-
children: /* @__PURE__ */ (0,
|
|
16170
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react16.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
15549
16171
|
}
|
|
15550
16172
|
) }),
|
|
15551
|
-
/* @__PURE__ */ (0,
|
|
16173
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TooltipContent, { side: "bottom", sideOffset: 9, children: addDisabled ? "Maximum columns reached" : "Add item" })
|
|
15552
16174
|
] })
|
|
15553
16175
|
}
|
|
15554
16176
|
) });
|
|
15555
16177
|
}
|
|
15556
16178
|
|
|
15557
16179
|
// src/lib/carousel.ts
|
|
15558
|
-
var
|
|
16180
|
+
var import_react17 = require("react");
|
|
15559
16181
|
var CAROUSEL_ATTR = "data-ohw-carousel";
|
|
15560
16182
|
var CAROUSEL_VALUE_ATTR = "data-ohw-carousel-value";
|
|
15561
16183
|
var CAROUSEL_SLIDE_ATTR = "data-ohw-carousel-slide";
|
|
@@ -15617,8 +16239,8 @@ function applyCarouselNode(key, val) {
|
|
|
15617
16239
|
return true;
|
|
15618
16240
|
}
|
|
15619
16241
|
function useOhwCarousel(key, initial) {
|
|
15620
|
-
const [images, setImages] = (0,
|
|
15621
|
-
(0,
|
|
16242
|
+
const [images, setImages] = (0, import_react17.useState)(initial);
|
|
16243
|
+
(0, import_react17.useEffect)(() => {
|
|
15622
16244
|
const el = document.querySelector(
|
|
15623
16245
|
`[${CAROUSEL_ATTR}][data-ohw-key="${CSS.escape(key)}"]`
|
|
15624
16246
|
);
|
|
@@ -16030,14 +16652,14 @@ function deleteSelectedNavFooterItem(deps) {
|
|
|
16030
16652
|
}
|
|
16031
16653
|
|
|
16032
16654
|
// src/ui/navbar-container-chrome.tsx
|
|
16033
|
-
var
|
|
16034
|
-
var
|
|
16655
|
+
var import_lucide_react17 = require("lucide-react");
|
|
16656
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
16035
16657
|
function NavbarContainerChrome({
|
|
16036
16658
|
rect,
|
|
16037
16659
|
onAdd
|
|
16038
16660
|
}) {
|
|
16039
16661
|
const chromeGap = 6;
|
|
16040
|
-
return /* @__PURE__ */ (0,
|
|
16662
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
16041
16663
|
"div",
|
|
16042
16664
|
{
|
|
16043
16665
|
"data-ohw-navbar-container-chrome": "",
|
|
@@ -16049,7 +16671,7 @@ function NavbarContainerChrome({
|
|
|
16049
16671
|
width: rect.width + chromeGap * 2,
|
|
16050
16672
|
height: rect.height + chromeGap * 2
|
|
16051
16673
|
},
|
|
16052
|
-
children: /* @__PURE__ */ (0,
|
|
16674
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
16053
16675
|
"button",
|
|
16054
16676
|
{
|
|
16055
16677
|
type: "button",
|
|
@@ -16066,7 +16688,7 @@ function NavbarContainerChrome({
|
|
|
16066
16688
|
e.stopPropagation();
|
|
16067
16689
|
onAdd();
|
|
16068
16690
|
},
|
|
16069
|
-
children: /* @__PURE__ */ (0,
|
|
16691
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react17.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
16070
16692
|
}
|
|
16071
16693
|
)
|
|
16072
16694
|
}
|
|
@@ -16075,7 +16697,7 @@ function NavbarContainerChrome({
|
|
|
16075
16697
|
|
|
16076
16698
|
// src/ui/drop-indicator.tsx
|
|
16077
16699
|
var React11 = __toESM(require("react"), 1);
|
|
16078
|
-
var
|
|
16700
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
16079
16701
|
var dropIndicatorVariants = cva(
|
|
16080
16702
|
"ov-gap-line pointer-events-none shrink-0 transition-opacity duration-150",
|
|
16081
16703
|
{
|
|
@@ -16099,7 +16721,7 @@ var dropIndicatorVariants = cva(
|
|
|
16099
16721
|
);
|
|
16100
16722
|
var DropIndicator = React11.forwardRef(
|
|
16101
16723
|
({ className, direction, state, ...props }, ref) => {
|
|
16102
|
-
return /* @__PURE__ */ (0,
|
|
16724
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
16103
16725
|
"div",
|
|
16104
16726
|
{
|
|
16105
16727
|
ref,
|
|
@@ -16116,7 +16738,7 @@ var DropIndicator = React11.forwardRef(
|
|
|
16116
16738
|
DropIndicator.displayName = "DropIndicator";
|
|
16117
16739
|
|
|
16118
16740
|
// src/ui/badge.tsx
|
|
16119
|
-
var
|
|
16741
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
16120
16742
|
var badgeVariants = cva(
|
|
16121
16743
|
"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",
|
|
16122
16744
|
{
|
|
@@ -16134,13 +16756,13 @@ var badgeVariants = cva(
|
|
|
16134
16756
|
}
|
|
16135
16757
|
);
|
|
16136
16758
|
function Badge({ className, variant, ...props }) {
|
|
16137
|
-
return /* @__PURE__ */ (0,
|
|
16759
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
|
|
16138
16760
|
}
|
|
16139
16761
|
|
|
16140
16762
|
// src/OhhwellsBridge.tsx
|
|
16141
|
-
var
|
|
16142
|
-
var
|
|
16143
|
-
var
|
|
16763
|
+
var import_lucide_react18 = require("lucide-react");
|
|
16764
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
16765
|
+
var PRIMARY4 = "#0885FE";
|
|
16144
16766
|
var IMAGE_FADE_MS = 300;
|
|
16145
16767
|
var MEDIA_SETTLE_TIMEOUT_MS = 2500;
|
|
16146
16768
|
function runOpacityFade(el, onDone) {
|
|
@@ -16261,7 +16883,7 @@ function duplicateSchedulingWidget(instanceId, scheduleId) {
|
|
|
16261
16883
|
schedulingRoots.set(container, root);
|
|
16262
16884
|
(0, import_react_dom4.flushSync)(() => {
|
|
16263
16885
|
root.render(
|
|
16264
|
-
/* @__PURE__ */ (0,
|
|
16886
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
16265
16887
|
SchedulingWidget,
|
|
16266
16888
|
{
|
|
16267
16889
|
notifyOnConnect: false,
|
|
@@ -16399,7 +17021,7 @@ function mountSchedulingWidget(insertAfter, notifyOnConnect = false, scheduleId,
|
|
|
16399
17021
|
schedulingRoots.set(container, root);
|
|
16400
17022
|
(0, import_react_dom4.flushSync)(() => {
|
|
16401
17023
|
root.render(
|
|
16402
|
-
/* @__PURE__ */ (0,
|
|
17024
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
16403
17025
|
SchedulingWidget,
|
|
16404
17026
|
{
|
|
16405
17027
|
notifyOnConnect,
|
|
@@ -17119,7 +17741,7 @@ var TOOLBAR_STROKE_GAP2 = 4;
|
|
|
17119
17741
|
var TOOLBAR_OFFSET_FROM_ELEMENT = SELECTION_CHROME_GAP2 + TOOLBAR_STROKE_GAP2;
|
|
17120
17742
|
var HOVER_STROKE_WIDTH = 1.5;
|
|
17121
17743
|
var TEXT_HOVER_SIDE_PAD = 4;
|
|
17122
|
-
var CHROME_PRIMARY = `var(--ohw-primary, ${
|
|
17744
|
+
var CHROME_PRIMARY = `var(--ohw-primary, ${PRIMARY4})`;
|
|
17123
17745
|
var TOOLBAR_GROUPS = [
|
|
17124
17746
|
[
|
|
17125
17747
|
{ cmd: "bold", title: "Bold" },
|
|
@@ -17145,7 +17767,7 @@ function EditGlowChrome({
|
|
|
17145
17767
|
hideHandle = false
|
|
17146
17768
|
}) {
|
|
17147
17769
|
const GAP = SELECTION_CHROME_GAP2;
|
|
17148
|
-
return /* @__PURE__ */ (0,
|
|
17770
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
17149
17771
|
"div",
|
|
17150
17772
|
{
|
|
17151
17773
|
ref: elRef,
|
|
@@ -17160,7 +17782,7 @@ function EditGlowChrome({
|
|
|
17160
17782
|
zIndex: 2147483646
|
|
17161
17783
|
},
|
|
17162
17784
|
children: [
|
|
17163
|
-
/* @__PURE__ */ (0,
|
|
17785
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
17164
17786
|
"div",
|
|
17165
17787
|
{
|
|
17166
17788
|
style: {
|
|
@@ -17174,7 +17796,7 @@ function EditGlowChrome({
|
|
|
17174
17796
|
}
|
|
17175
17797
|
}
|
|
17176
17798
|
),
|
|
17177
|
-
reorderHrefKey && !hideHandle && /* @__PURE__ */ (0,
|
|
17799
|
+
reorderHrefKey && !hideHandle && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
17178
17800
|
"div",
|
|
17179
17801
|
{
|
|
17180
17802
|
"data-ohw-drag-handle-container": "",
|
|
@@ -17186,7 +17808,7 @@ function EditGlowChrome({
|
|
|
17186
17808
|
transform: "translate(calc(-100% - 7px), -50%)",
|
|
17187
17809
|
pointerEvents: dragDisabled ? "none" : "auto"
|
|
17188
17810
|
},
|
|
17189
|
-
children: /* @__PURE__ */ (0,
|
|
17811
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
17190
17812
|
DragHandle,
|
|
17191
17813
|
{
|
|
17192
17814
|
"aria-label": `Reorder ${reorderHrefKey}`,
|
|
@@ -17373,9 +17995,9 @@ function FloatingToolbar({
|
|
|
17373
17995
|
showEditLink,
|
|
17374
17996
|
onEditLink
|
|
17375
17997
|
}) {
|
|
17376
|
-
const localRef =
|
|
17377
|
-
const [measuredW, setMeasuredW] =
|
|
17378
|
-
const setRefs =
|
|
17998
|
+
const localRef = import_react18.default.useRef(null);
|
|
17999
|
+
const [measuredW, setMeasuredW] = import_react18.default.useState(330);
|
|
18000
|
+
const setRefs = import_react18.default.useCallback(
|
|
17379
18001
|
(node) => {
|
|
17380
18002
|
localRef.current = node;
|
|
17381
18003
|
if (typeof elRef === "function") elRef(node);
|
|
@@ -17387,7 +18009,7 @@ function FloatingToolbar({
|
|
|
17387
18009
|
},
|
|
17388
18010
|
[elRef]
|
|
17389
18011
|
);
|
|
17390
|
-
|
|
18012
|
+
import_react18.default.useLayoutEffect(() => {
|
|
17391
18013
|
const node = localRef.current;
|
|
17392
18014
|
if (!node) return;
|
|
17393
18015
|
const update = () => {
|
|
@@ -17400,7 +18022,7 @@ function FloatingToolbar({
|
|
|
17400
18022
|
return () => ro.disconnect();
|
|
17401
18023
|
}, [showEditLink, activeCommands]);
|
|
17402
18024
|
const { top, left, transform } = calcToolbarPos(rect, parentScroll, measuredW);
|
|
17403
|
-
return /* @__PURE__ */ (0,
|
|
18025
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
17404
18026
|
"div",
|
|
17405
18027
|
{
|
|
17406
18028
|
ref: setRefs,
|
|
@@ -17412,12 +18034,12 @@ function FloatingToolbar({
|
|
|
17412
18034
|
zIndex: 2147483647,
|
|
17413
18035
|
pointerEvents: "auto"
|
|
17414
18036
|
},
|
|
17415
|
-
children: /* @__PURE__ */ (0,
|
|
17416
|
-
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0,
|
|
17417
|
-
gi > 0 && /* @__PURE__ */ (0,
|
|
18037
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(CustomToolbar, { children: [
|
|
18038
|
+
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react18.default.Fragment, { children: [
|
|
18039
|
+
gi > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CustomToolbarDivider, {}),
|
|
17418
18040
|
btns.map((btn) => {
|
|
17419
18041
|
const isActive = activeCommands.has(btn.cmd);
|
|
17420
|
-
return /* @__PURE__ */ (0,
|
|
18042
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
17421
18043
|
CustomToolbarButton,
|
|
17422
18044
|
{
|
|
17423
18045
|
title: btn.title,
|
|
@@ -17426,7 +18048,7 @@ function FloatingToolbar({
|
|
|
17426
18048
|
e.preventDefault();
|
|
17427
18049
|
onCommand(btn.cmd);
|
|
17428
18050
|
},
|
|
17429
|
-
children: /* @__PURE__ */ (0,
|
|
18051
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
17430
18052
|
"svg",
|
|
17431
18053
|
{
|
|
17432
18054
|
width: "16",
|
|
@@ -17447,7 +18069,7 @@ function FloatingToolbar({
|
|
|
17447
18069
|
);
|
|
17448
18070
|
})
|
|
17449
18071
|
] }, gi)),
|
|
17450
|
-
showEditLink ? /* @__PURE__ */ (0,
|
|
18072
|
+
showEditLink ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
17451
18073
|
CustomToolbarButton,
|
|
17452
18074
|
{
|
|
17453
18075
|
type: "button",
|
|
@@ -17461,7 +18083,7 @@ function FloatingToolbar({
|
|
|
17461
18083
|
e.preventDefault();
|
|
17462
18084
|
e.stopPropagation();
|
|
17463
18085
|
},
|
|
17464
|
-
children: /* @__PURE__ */ (0,
|
|
18086
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.Link, { className: "size-4 shrink-0", "aria-hidden": true })
|
|
17465
18087
|
}
|
|
17466
18088
|
) : null
|
|
17467
18089
|
] })
|
|
@@ -17478,7 +18100,7 @@ function StateToggle({
|
|
|
17478
18100
|
states,
|
|
17479
18101
|
onStateChange
|
|
17480
18102
|
}) {
|
|
17481
|
-
return /* @__PURE__ */ (0,
|
|
18103
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
17482
18104
|
ToggleGroup,
|
|
17483
18105
|
{
|
|
17484
18106
|
"data-ohw-state-toggle": "",
|
|
@@ -17492,7 +18114,7 @@ function StateToggle({
|
|
|
17492
18114
|
left: rect.right - 8,
|
|
17493
18115
|
transform: "translateX(-100%)"
|
|
17494
18116
|
},
|
|
17495
|
-
children: states.map((state) => /* @__PURE__ */ (0,
|
|
18117
|
+
children: states.map((state) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
|
|
17496
18118
|
}
|
|
17497
18119
|
);
|
|
17498
18120
|
}
|
|
@@ -17508,9 +18130,9 @@ var OHW_LOADER_STYLE = {
|
|
|
17508
18130
|
justifyContent: "center"
|
|
17509
18131
|
};
|
|
17510
18132
|
function OhwLoaderSpinner() {
|
|
17511
|
-
return /* @__PURE__ */ (0,
|
|
17512
|
-
/* @__PURE__ */ (0,
|
|
17513
|
-
/* @__PURE__ */ (0,
|
|
18133
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("svg", { width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", "aria-hidden": true, children: [
|
|
18134
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: "14", cy: "14", r: "11", stroke: "#E7E5E4", strokeWidth: "3" }),
|
|
18135
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
17514
18136
|
"circle",
|
|
17515
18137
|
{
|
|
17516
18138
|
cx: "14",
|
|
@@ -17520,7 +18142,7 @@ function OhwLoaderSpinner() {
|
|
|
17520
18142
|
strokeWidth: "3",
|
|
17521
18143
|
strokeDasharray: "17 52",
|
|
17522
18144
|
strokeLinecap: "round",
|
|
17523
|
-
children: /* @__PURE__ */ (0,
|
|
18145
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
17524
18146
|
"animateTransform",
|
|
17525
18147
|
{
|
|
17526
18148
|
attributeName: "transform",
|
|
@@ -17536,7 +18158,7 @@ function OhwLoaderSpinner() {
|
|
|
17536
18158
|
] });
|
|
17537
18159
|
}
|
|
17538
18160
|
function OhwBrandMark() {
|
|
17539
|
-
return /* @__PURE__ */ (0,
|
|
18161
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
17540
18162
|
"svg",
|
|
17541
18163
|
{
|
|
17542
18164
|
width: "16",
|
|
@@ -17547,7 +18169,7 @@ function OhwBrandMark() {
|
|
|
17547
18169
|
style: { display: "block", flexShrink: 0 },
|
|
17548
18170
|
xmlns: "http://www.w3.org/2000/svg",
|
|
17549
18171
|
children: [
|
|
17550
|
-
/* @__PURE__ */ (0,
|
|
18172
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
17551
18173
|
"mask",
|
|
17552
18174
|
{
|
|
17553
18175
|
id: "ohw-badge-mark",
|
|
@@ -17557,15 +18179,15 @@ function OhwBrandMark() {
|
|
|
17557
18179
|
y: "0",
|
|
17558
18180
|
width: "48",
|
|
17559
18181
|
height: "48",
|
|
17560
|
-
children: /* @__PURE__ */ (0,
|
|
18182
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: "M23.8741 48C37.0594 48 47.7481 37.2548 47.7481 24C47.7481 10.7452 37.0594 0 23.8741 0C10.6888 0 0 10.7452 0 24C0 37.2548 10.6888 48 23.8741 48Z", fill: "white" })
|
|
17561
18183
|
}
|
|
17562
18184
|
),
|
|
17563
|
-
/* @__PURE__ */ (0,
|
|
17564
|
-
/* @__PURE__ */ (0,
|
|
17565
|
-
/* @__PURE__ */ (0,
|
|
17566
|
-
/* @__PURE__ */ (0,
|
|
17567
|
-
/* @__PURE__ */ (0,
|
|
17568
|
-
/* @__PURE__ */ (0,
|
|
18185
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("g", { mask: "url(#ohw-badge-mark)", children: [
|
|
18186
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: "M23.8731 48.0497C37.0584 48.0497 47.7472 37.3046 47.7472 24.0497C47.7472 10.7949 37.0584 0.0497208 23.8731 0.0497208C10.6878 0.0497208 -0.000976562 10.7949 -0.000976562 24.0497C-0.000976562 37.3046 10.6878 48.0497 23.8731 48.0497Z", fill: "#0078E5" }),
|
|
18187
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: "M17.1307 14.7172C13.1687 14.7172 9.38102 18.1154 8.65114 22.34C8.38885 23.8488 8.5598 25.2581 9.06929 26.4451C6.20005 29.1677 1.77216 27.8721 -1.40212 26.1536C-2.73618 25.4317 -3.92695 27.4745 -2.59037 28.1981C1.33389 30.3226 6.86037 31.6621 10.4402 28.4188C11.4718 29.3859 12.867 29.9621 14.4894 29.9621C18.4161 29.9621 22.2038 26.5318 22.9337 22.34C23.6636 18.1162 21.0566 14.7172 17.1298 14.7172H17.1307ZM19.9798 22.34C19.5281 25.0399 17.2689 27.231 14.9754 27.231C12.6466 27.231 11.1877 25.0399 11.6394 22.34C12.1262 19.6401 14.3151 17.4482 16.6438 17.4482C18.9374 17.4482 20.4667 19.6401 19.9798 22.34Z", fill: "white" }),
|
|
18188
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: "M40.0017 27.0262C39.1797 27.081 38.2721 26.995 37.4668 26.7415C37.3344 26.6993 37.28 26.5401 37.3529 26.4205C37.5959 26.0212 37.8255 25.6152 38.009 25.1889C38.1071 24.9918 38.2018 24.793 38.2897 24.5908C38.3274 24.5041 38.4163 24.451 38.5101 24.4619C38.63 24.4754 38.7054 24.4821 38.8881 24.4821L39.1529 24.4796L39.8283 24.4543C45.9229 24.0492 50.4765 20.4319 54.8466 16.9014C56.0172 15.9554 57.6932 17.6208 56.5116 18.5752C51.7687 22.4065 47.1966 26.5081 40.9319 26.9689", fill: "white" }),
|
|
18189
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: "M37.9687 24.27C38.4472 23.1319 38.7656 21.9045 38.9609 20.6991C39.5927 16.76 38.5058 14.2193 36.1553 14.2193C34.1835 14.2193 33.1469 17.2427 32.9199 18.8694C32.743 19.9872 32.5914 22.1219 33.6028 23.9524C33.7553 24.259 34.15 24.7712 34.471 25.1259C34.5447 25.2067 34.6746 25.2 34.7349 25.1082C34.9528 24.7788 35.1615 24.4039 35.3584 24.0257C35.5444 23.6677 35.5888 23.6138 35.8587 23.0207C35.8838 22.966 35.8813 22.9002 35.8478 22.8505C35.5888 22.4597 35.2168 21.9787 35.1204 21.4614C34.9184 20.4455 34.9436 19.2257 35.2218 18.1078C35.4413 17.3118 35.7195 16.7844 35.9039 16.5106C35.9466 16.4466 36.0279 16.4129 36.0975 16.4449C36.369 16.5671 36.5827 16.8838 36.7385 17.396C37.0167 18.2089 37.0167 19.3782 36.814 20.6999C36.6991 21.5271 36.4771 22.3729 36.1746 23.1673C36.1293 23.308 36.0757 23.4461 36.0187 23.5826C36.0187 23.5868 36.0187 23.591 36.0187 23.5961C35.9911 23.6946 35.9207 23.8067 35.8846 23.901C35.5536 24.5497 35.2344 25.1697 34.8439 25.7838C34.8388 25.7863 34.8346 25.7914 34.8296 25.7931C34.6528 26.0525 34.4718 26.2901 34.2866 26.4965C34.2774 26.5099 34.2682 26.5234 34.2589 26.5369C34.2405 26.5638 34.2179 26.5815 34.1944 26.595C33.5064 27.3212 32.7665 27.6893 32.0123 27.6893C31.8606 27.6893 31.6838 27.664 31.507 27.4349C31.3042 27.1299 30.85 26.0879 31.2539 22.9112C31.4785 21.3949 31.8011 20.0268 31.931 19.5408C31.9579 19.4413 31.8908 19.3419 31.7886 19.3293L30.0062 19.1162C29.9241 19.1061 29.8478 19.1566 29.8252 19.2366C29.2704 21.1615 27.0305 27.6885 24.9599 27.6885C24.328 27.6885 24.1512 26.6211 24.1001 26.2909C23.775 23.6264 25.528 18.5492 29.5302 16.2267C29.6048 16.1838 29.635 16.0928 29.5998 16.0136L28.9042 14.467C28.8632 14.3752 28.7501 14.3389 28.6638 14.3886C25.8079 16.0414 24.1847 18.5231 23.2915 20.3436C22.2046 22.5793 21.6993 25.0189 21.9515 26.8738C22.1795 28.7794 23.1398 29.872 24.6054 29.872C26.0543 29.872 27.4369 28.9066 28.7098 27.0187C28.7953 26.8915 28.9889 26.9311 29.0149 27.0819C29.2646 28.5283 29.9811 29.872 31.6579 29.872C33.5282 29.872 35.3232 28.7288 36.7134 26.6447C36.7712 26.5874 36.7972 26.5411 36.8181 26.4906C36.8232 26.4931 36.8282 26.4948 36.8332 26.4973C37.01 26.2025 37.181 25.9051 37.3444 25.6027C37.4508 25.4005 37.5572 25.1992 37.6586 24.9945C37.7181 24.874 37.7743 24.7527 37.8262 24.6289C37.838 24.6002 37.8547 24.5665 37.8706 24.5337", fill: "white" }),
|
|
18190
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: "M30.5839 31.6397C25.7546 34.8577 19.4773 34.7853 14.6907 31.5243C13.5368 30.7384 12.5044 32.6498 13.6474 33.4281C19.034 37.0985 26.3077 37.096 31.7218 33.488C32.8791 32.7172 31.7478 30.8639 30.5839 31.6397Z", fill: "white" })
|
|
17569
18191
|
] })
|
|
17570
18192
|
]
|
|
17571
18193
|
}
|
|
@@ -17602,7 +18224,7 @@ var OHW_BADGE_LABEL_STYLE = {
|
|
|
17602
18224
|
whiteSpace: "nowrap"
|
|
17603
18225
|
};
|
|
17604
18226
|
function MadeWithOhhWells() {
|
|
17605
|
-
return /* @__PURE__ */ (0,
|
|
18227
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
17606
18228
|
"a",
|
|
17607
18229
|
{
|
|
17608
18230
|
href: "https://ohhwells.com",
|
|
@@ -17612,25 +18234,43 @@ function MadeWithOhhWells() {
|
|
|
17612
18234
|
"data-ohw-badge": "",
|
|
17613
18235
|
style: OHW_BADGE_STYLE,
|
|
17614
18236
|
children: [
|
|
17615
|
-
/* @__PURE__ */ (0,
|
|
17616
|
-
/* @__PURE__ */ (0,
|
|
18237
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(OhwBrandMark, {}),
|
|
18238
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { style: OHW_BADGE_LABEL_STYLE, children: "Made with OhhWells" })
|
|
17617
18239
|
]
|
|
17618
18240
|
}
|
|
17619
18241
|
);
|
|
17620
18242
|
}
|
|
17621
|
-
var OHW_LOADER_PREHYDRATE_SCRIPT = `(function(){try{var p=location.hostname.split(".");var fromHost=
|
|
18243
|
+
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){}})();`;
|
|
18244
|
+
function subdomainFromCookie() {
|
|
18245
|
+
if (typeof document === "undefined") return "";
|
|
18246
|
+
const match = document.cookie.match(/(?:^|; )ohw-subdomain=([^;]*)/);
|
|
18247
|
+
return match ? decodeURIComponent(match[1]) : "";
|
|
18248
|
+
}
|
|
17622
18249
|
function resolveSubdomain(subdomainFromQuery) {
|
|
18250
|
+
if (typeof window !== "undefined") {
|
|
18251
|
+
const fromGlobal = window.__OHW_SUBDOMAIN__;
|
|
18252
|
+
if (fromGlobal) return fromGlobal;
|
|
18253
|
+
}
|
|
17623
18254
|
if (subdomainFromQuery) return subdomainFromQuery;
|
|
17624
18255
|
if (typeof window !== "undefined") {
|
|
17625
|
-
const
|
|
17626
|
-
if (
|
|
18256
|
+
const host = window.location.hostname.toLowerCase();
|
|
18257
|
+
if (host.endsWith(".ohhwells.site")) {
|
|
18258
|
+
const label = host.slice(0, -".ohhwells.site".length).split(".").pop();
|
|
18259
|
+
if (label && label !== "www") return label;
|
|
18260
|
+
}
|
|
18261
|
+
const fromCookie = subdomainFromCookie();
|
|
18262
|
+
if (fromCookie) return fromCookie;
|
|
18263
|
+
const isPlatformHost = host.endsWith(".ohhwells.site") || host === "localhost" || host.endsWith(".localhost") || host.endsWith(".vercel.app");
|
|
18264
|
+
if (!isPlatformHost) return "";
|
|
17627
18265
|
}
|
|
17628
18266
|
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL;
|
|
17629
18267
|
if (siteUrl) {
|
|
17630
18268
|
try {
|
|
17631
18269
|
const host = new URL(siteUrl).hostname;
|
|
17632
|
-
|
|
17633
|
-
|
|
18270
|
+
if (host.endsWith(".ohhwells.site")) {
|
|
18271
|
+
const label = host.slice(0, -".ohhwells.site".length).split(".").pop();
|
|
18272
|
+
if (label && label !== "www") return label;
|
|
18273
|
+
}
|
|
17634
18274
|
} catch {
|
|
17635
18275
|
}
|
|
17636
18276
|
}
|
|
@@ -17641,8 +18281,8 @@ function OhhwellsBridge() {
|
|
|
17641
18281
|
const router = (0, import_navigation3.useRouter)();
|
|
17642
18282
|
const searchParams = (0, import_navigation3.useSearchParams)();
|
|
17643
18283
|
const isEditMode = isEditSessionActive();
|
|
17644
|
-
const [bridgeRoot, setBridgeRoot] = (0,
|
|
17645
|
-
(0,
|
|
18284
|
+
const [bridgeRoot, setBridgeRoot] = (0, import_react18.useState)(null);
|
|
18285
|
+
(0, import_react18.useEffect)(() => {
|
|
17646
18286
|
const figtreeFontId = "ohw-figtree-font";
|
|
17647
18287
|
if (!document.getElementById(figtreeFontId)) {
|
|
17648
18288
|
const preconnect1 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.googleapis.com" });
|
|
@@ -17668,48 +18308,67 @@ function OhhwellsBridge() {
|
|
|
17668
18308
|
};
|
|
17669
18309
|
}, []);
|
|
17670
18310
|
const subdomainFromQuery = searchParams.get("subdomain");
|
|
17671
|
-
const subdomain = resolveSubdomain(subdomainFromQuery);
|
|
18311
|
+
const [subdomain, setSubdomain] = (0, import_react18.useState)(() => resolveSubdomain(subdomainFromQuery));
|
|
18312
|
+
(0, import_react18.useLayoutEffect)(() => {
|
|
18313
|
+
const next = resolveSubdomain(subdomainFromQuery);
|
|
18314
|
+
if (next !== subdomain) setSubdomain(next);
|
|
18315
|
+
if (next) return;
|
|
18316
|
+
const host = window.location.hostname.toLowerCase();
|
|
18317
|
+
if (host.endsWith(".ohhwells.site")) return;
|
|
18318
|
+
const t = window.setTimeout(() => {
|
|
18319
|
+
const retry = resolveSubdomain(subdomainFromQuery);
|
|
18320
|
+
if (retry) setSubdomain(retry);
|
|
18321
|
+
}, 0);
|
|
18322
|
+
return () => window.clearTimeout(t);
|
|
18323
|
+
}, [subdomainFromQuery, subdomain]);
|
|
18324
|
+
(0, import_react18.useEffect)(() => {
|
|
18325
|
+
if (!subdomainFromQuery || typeof window === "undefined") return;
|
|
18326
|
+
const url = new URL(window.location.href);
|
|
18327
|
+
if (!url.searchParams.has("subdomain")) return;
|
|
18328
|
+
url.searchParams.delete("subdomain");
|
|
18329
|
+
window.history.replaceState(null, "", url.pathname + url.search + url.hash);
|
|
18330
|
+
}, [subdomainFromQuery]);
|
|
17672
18331
|
useLinkHrefGuardian(pathname, subdomain, isEditMode);
|
|
17673
18332
|
useSavedLinkNavigation(isEditMode);
|
|
17674
|
-
const postToParent2 = (0,
|
|
18333
|
+
const postToParent2 = (0, import_react18.useCallback)((data) => {
|
|
17675
18334
|
if (typeof window !== "undefined" && window.parent !== window) {
|
|
17676
18335
|
window.parent.postMessage(data, "*");
|
|
17677
18336
|
}
|
|
17678
18337
|
}, []);
|
|
17679
|
-
const [fetchState, setFetchState] = (0,
|
|
17680
|
-
const [showBranding, setShowBranding] = (0,
|
|
17681
|
-
const autoSaveTimers = (0,
|
|
17682
|
-
const activeElRef = (0,
|
|
17683
|
-
const pointerHeldRef = (0,
|
|
17684
|
-
const selectedElRef = (0,
|
|
17685
|
-
const selectedHrefKeyRef = (0,
|
|
17686
|
-
const selectedFooterColAttrRef = (0,
|
|
17687
|
-
const originalContentRef = (0,
|
|
17688
|
-
const activeStateElRef = (0,
|
|
17689
|
-
const parentScrollRef = (0,
|
|
17690
|
-
const visibleViewportRef = (0,
|
|
17691
|
-
const [dialogPortalContainer, setDialogPortalContainer] = (0,
|
|
17692
|
-
const attachVisibleViewport = (0,
|
|
18338
|
+
const [fetchState, setFetchState] = (0, import_react18.useState)("idle");
|
|
18339
|
+
const [showBranding, setShowBranding] = (0, import_react18.useState)(false);
|
|
18340
|
+
const autoSaveTimers = (0, import_react18.useRef)(/* @__PURE__ */ new Map());
|
|
18341
|
+
const activeElRef = (0, import_react18.useRef)(null);
|
|
18342
|
+
const pointerHeldRef = (0, import_react18.useRef)(false);
|
|
18343
|
+
const selectedElRef = (0, import_react18.useRef)(null);
|
|
18344
|
+
const selectedHrefKeyRef = (0, import_react18.useRef)(null);
|
|
18345
|
+
const selectedFooterColAttrRef = (0, import_react18.useRef)(null);
|
|
18346
|
+
const originalContentRef = (0, import_react18.useRef)(null);
|
|
18347
|
+
const activeStateElRef = (0, import_react18.useRef)(null);
|
|
18348
|
+
const parentScrollRef = (0, import_react18.useRef)(null);
|
|
18349
|
+
const visibleViewportRef = (0, import_react18.useRef)(null);
|
|
18350
|
+
const [dialogPortalContainer, setDialogPortalContainer] = (0, import_react18.useState)(null);
|
|
18351
|
+
const attachVisibleViewport = (0, import_react18.useCallback)((node) => {
|
|
17693
18352
|
visibleViewportRef.current = node;
|
|
17694
18353
|
setDialogPortalContainer(node);
|
|
17695
18354
|
if (node) applyVisibleViewport(node, parentScrollRef.current);
|
|
17696
18355
|
}, []);
|
|
17697
|
-
const toolbarElRef = (0,
|
|
17698
|
-
const glowElRef = (0,
|
|
17699
|
-
const hoveredImageRef = (0,
|
|
17700
|
-
const hoveredImageHasTextOverlapRef = (0,
|
|
17701
|
-
const dragOverElRef = (0,
|
|
17702
|
-
const [mediaHover, setMediaHover] = (0,
|
|
17703
|
-
const [selectedAiSectionId, setSelectedAiSectionId] = (0,
|
|
17704
|
-
const selectedAiSectionIdRef = (0,
|
|
17705
|
-
const handleAiSectionSelectionChange = (0,
|
|
18356
|
+
const toolbarElRef = (0, import_react18.useRef)(null);
|
|
18357
|
+
const glowElRef = (0, import_react18.useRef)(null);
|
|
18358
|
+
const hoveredImageRef = (0, import_react18.useRef)(null);
|
|
18359
|
+
const hoveredImageHasTextOverlapRef = (0, import_react18.useRef)(false);
|
|
18360
|
+
const dragOverElRef = (0, import_react18.useRef)(null);
|
|
18361
|
+
const [mediaHover, setMediaHover] = (0, import_react18.useState)(null);
|
|
18362
|
+
const [selectedAiSectionId, setSelectedAiSectionId] = (0, import_react18.useState)(null);
|
|
18363
|
+
const selectedAiSectionIdRef = (0, import_react18.useRef)(null);
|
|
18364
|
+
const handleAiSectionSelectionChange = (0, import_react18.useCallback)((id) => {
|
|
17706
18365
|
selectedAiSectionIdRef.current = id;
|
|
17707
18366
|
setSelectedAiSectionId(id);
|
|
17708
18367
|
}, []);
|
|
17709
|
-
const [selectedMedia, setSelectedMedia] = (0,
|
|
17710
|
-
const selectedMediaElRef = (0,
|
|
17711
|
-
const mediaKeyDropTokenRef = (0,
|
|
17712
|
-
const clearMediaSelection = (0,
|
|
18368
|
+
const [selectedMedia, setSelectedMedia] = (0, import_react18.useState)(null);
|
|
18369
|
+
const selectedMediaElRef = (0, import_react18.useRef)(null);
|
|
18370
|
+
const mediaKeyDropTokenRef = (0, import_react18.useRef)(0);
|
|
18371
|
+
const clearMediaSelection = (0, import_react18.useCallback)(() => {
|
|
17713
18372
|
const prev = selectedMediaElRef.current;
|
|
17714
18373
|
selectedMediaElRef.current = null;
|
|
17715
18374
|
setSelectedMedia(null);
|
|
@@ -17734,9 +18393,9 @@ function OhhwellsBridge() {
|
|
|
17734
18393
|
window.postMessage({ type: "ow:media-key-drop", token }, "*");
|
|
17735
18394
|
}
|
|
17736
18395
|
}, []);
|
|
17737
|
-
const clearMediaSelectionRef = (0,
|
|
18396
|
+
const clearMediaSelectionRef = (0, import_react18.useRef)(clearMediaSelection);
|
|
17738
18397
|
clearMediaSelectionRef.current = clearMediaSelection;
|
|
17739
|
-
const selectMediaElement = (0,
|
|
18398
|
+
const selectMediaElement = (0, import_react18.useCallback)((el) => {
|
|
17740
18399
|
const r2 = el.getBoundingClientRect();
|
|
17741
18400
|
const video = el.dataset.ohwEditable === "video" ? el.querySelector("video") : null;
|
|
17742
18401
|
selectedMediaElRef.current = el;
|
|
@@ -17760,9 +18419,9 @@ function OhhwellsBridge() {
|
|
|
17760
18419
|
keyLabel: el.dataset.ohwEditable === "video" ? "Video" : el.dataset.ohwEditable === "bg-image" ? "Background" : "Image"
|
|
17761
18420
|
});
|
|
17762
18421
|
}, []);
|
|
17763
|
-
const selectMediaElementRef = (0,
|
|
18422
|
+
const selectMediaElementRef = (0, import_react18.useRef)(selectMediaElement);
|
|
17764
18423
|
selectMediaElementRef.current = selectMediaElement;
|
|
17765
|
-
(0,
|
|
18424
|
+
(0, import_react18.useEffect)(() => {
|
|
17766
18425
|
if (!selectedMedia) return;
|
|
17767
18426
|
const update = () => {
|
|
17768
18427
|
const el = selectedMediaElRef.current;
|
|
@@ -17782,54 +18441,55 @@ function OhhwellsBridge() {
|
|
|
17782
18441
|
window.removeEventListener("resize", update);
|
|
17783
18442
|
};
|
|
17784
18443
|
}, [selectedMedia !== null]);
|
|
17785
|
-
const [carouselHover, setCarouselHover] = (0,
|
|
17786
|
-
const [uploadingRects, setUploadingRects] = (0,
|
|
17787
|
-
const hoveredGapRef = (0,
|
|
17788
|
-
const imageUnhoverTimerRef = (0,
|
|
17789
|
-
const imageShowTimerRef = (0,
|
|
17790
|
-
const editStylesRef = (0,
|
|
17791
|
-
const activateRef = (0,
|
|
18444
|
+
const [carouselHover, setCarouselHover] = (0, import_react18.useState)(null);
|
|
18445
|
+
const [uploadingRects, setUploadingRects] = (0, import_react18.useState)({});
|
|
18446
|
+
const hoveredGapRef = (0, import_react18.useRef)(null);
|
|
18447
|
+
const imageUnhoverTimerRef = (0, import_react18.useRef)(null);
|
|
18448
|
+
const imageShowTimerRef = (0, import_react18.useRef)(null);
|
|
18449
|
+
const editStylesRef = (0, import_react18.useRef)(null);
|
|
18450
|
+
const activateRef = (0, import_react18.useRef)(() => {
|
|
17792
18451
|
});
|
|
17793
|
-
const deactivateRef = (0,
|
|
18452
|
+
const deactivateRef = (0, import_react18.useRef)(() => {
|
|
17794
18453
|
});
|
|
17795
|
-
const selectRef = (0,
|
|
18454
|
+
const selectRef = (0, import_react18.useRef)(() => {
|
|
17796
18455
|
});
|
|
17797
|
-
const selectFrameRef = (0,
|
|
18456
|
+
const selectFrameRef = (0, import_react18.useRef)(() => {
|
|
17798
18457
|
});
|
|
17799
|
-
const selectLogoRef = (0,
|
|
18458
|
+
const selectLogoRef = (0, import_react18.useRef)(() => {
|
|
17800
18459
|
});
|
|
17801
|
-
const openLogoSizePanelRef = (0,
|
|
18460
|
+
const openLogoSizePanelRef = (0, import_react18.useRef)(() => {
|
|
17802
18461
|
});
|
|
17803
|
-
const deselectRef = (0,
|
|
18462
|
+
const deselectRef = (0, import_react18.useRef)(() => {
|
|
17804
18463
|
});
|
|
17805
|
-
const closeFloatingPanelOnlyRef = (0,
|
|
18464
|
+
const closeFloatingPanelOnlyRef = (0, import_react18.useRef)(() => {
|
|
17806
18465
|
});
|
|
17807
|
-
const reselectNavigationItemRef = (0,
|
|
18466
|
+
const reselectNavigationItemRef = (0, import_react18.useRef)(() => {
|
|
17808
18467
|
});
|
|
17809
|
-
const commitNavigationTextEditRef = (0,
|
|
18468
|
+
const commitNavigationTextEditRef = (0, import_react18.useRef)(() => {
|
|
17810
18469
|
});
|
|
17811
|
-
const handleDeleteSelectedRef = (0,
|
|
17812
|
-
const runPendingDeleteUndoRef = (0,
|
|
17813
|
-
const isFooterFrameSelectionRef = (0,
|
|
17814
|
-
const refreshActiveCommandsRef = (0,
|
|
18470
|
+
const handleDeleteSelectedRef = (0, import_react18.useRef)(() => false);
|
|
18471
|
+
const runPendingDeleteUndoRef = (0, import_react18.useRef)(() => false);
|
|
18472
|
+
const isFooterFrameSelectionRef = (0, import_react18.useRef)(false);
|
|
18473
|
+
const refreshActiveCommandsRef = (0, import_react18.useRef)(() => {
|
|
17815
18474
|
});
|
|
17816
|
-
const postToParentRef = (0,
|
|
18475
|
+
const postToParentRef = (0, import_react18.useRef)(postToParent2);
|
|
17817
18476
|
postToParentRef.current = postToParent2;
|
|
17818
|
-
const aiSectionApiRef = (0,
|
|
17819
|
-
const
|
|
17820
|
-
const
|
|
17821
|
-
const
|
|
17822
|
-
const [
|
|
17823
|
-
const
|
|
17824
|
-
const
|
|
17825
|
-
const [
|
|
17826
|
-
const [
|
|
17827
|
-
const
|
|
17828
|
-
const
|
|
17829
|
-
const
|
|
17830
|
-
const
|
|
17831
|
-
const [
|
|
17832
|
-
const
|
|
18477
|
+
const aiSectionApiRef = (0, import_react18.useRef)(null);
|
|
18478
|
+
const applyTreeLocalRef = (0, import_react18.useRef)(null);
|
|
18479
|
+
const sectionsLoadedRef = (0, import_react18.useRef)(false);
|
|
18480
|
+
const pendingScheduleConfigRequests = (0, import_react18.useRef)([]);
|
|
18481
|
+
const [toolbarRect, setToolbarRect] = (0, import_react18.useState)(null);
|
|
18482
|
+
const [formPickRect, setFormPickRect] = (0, import_react18.useState)(null);
|
|
18483
|
+
const formPickElRef = (0, import_react18.useRef)(null);
|
|
18484
|
+
const [formViewState, setFormViewStateUi] = (0, import_react18.useState)("default");
|
|
18485
|
+
const [formPickCount, setFormPickCount] = (0, import_react18.useState)(null);
|
|
18486
|
+
const [formHoverRect, setFormHoverRect] = (0, import_react18.useState)(null);
|
|
18487
|
+
const formHoverElRef = (0, import_react18.useRef)(null);
|
|
18488
|
+
const [fieldPickRect, setFieldPickRect] = (0, import_react18.useState)(null);
|
|
18489
|
+
const fieldPickElRef = (0, import_react18.useRef)(null);
|
|
18490
|
+
const [fieldPickState, setFieldPickState] = (0, import_react18.useState)(null);
|
|
18491
|
+
const [fieldTypePickerOpen, setFieldTypePickerOpen] = (0, import_react18.useState)(false);
|
|
18492
|
+
const clearFormPick = (0, import_react18.useCallback)(() => {
|
|
17833
18493
|
const form = formPickElRef.current;
|
|
17834
18494
|
const editing = fieldPickElRef.current;
|
|
17835
18495
|
if (commitPlaceholderEdit(editing) && editing) {
|
|
@@ -17849,7 +18509,7 @@ function OhhwellsBridge() {
|
|
|
17849
18509
|
formPickElRef.current = null;
|
|
17850
18510
|
setFormPickRect(null);
|
|
17851
18511
|
}, []);
|
|
17852
|
-
const clearFieldPick = (0,
|
|
18512
|
+
const clearFieldPick = (0, import_react18.useCallback)(() => {
|
|
17853
18513
|
const wrapper = fieldPickElRef.current;
|
|
17854
18514
|
if (commitPlaceholderEdit(wrapper) && wrapper) {
|
|
17855
18515
|
const form = wrapper.closest('[data-ohw-editable="form"]');
|
|
@@ -17859,9 +18519,9 @@ function OhhwellsBridge() {
|
|
|
17859
18519
|
setFieldPickRect(null);
|
|
17860
18520
|
setFieldPickState(null);
|
|
17861
18521
|
}, []);
|
|
17862
|
-
const persistFieldsRef = (0,
|
|
18522
|
+
const persistFieldsRef = (0, import_react18.useRef)(() => {
|
|
17863
18523
|
});
|
|
17864
|
-
const persistFields = (0,
|
|
18524
|
+
const persistFields = (0, import_react18.useCallback)(
|
|
17865
18525
|
(form) => {
|
|
17866
18526
|
const key = formKeyOf(form);
|
|
17867
18527
|
if (!key) return;
|
|
@@ -17872,7 +18532,7 @@ function OhhwellsBridge() {
|
|
|
17872
18532
|
[]
|
|
17873
18533
|
);
|
|
17874
18534
|
persistFieldsRef.current = persistFields;
|
|
17875
|
-
const selectField = (0,
|
|
18535
|
+
const selectField = (0, import_react18.useCallback)((wrapper) => {
|
|
17876
18536
|
if (fieldPickElRef.current && fieldPickElRef.current !== wrapper) {
|
|
17877
18537
|
commitPlaceholderEdit(fieldPickElRef.current);
|
|
17878
18538
|
}
|
|
@@ -17885,7 +18545,7 @@ function OhhwellsBridge() {
|
|
|
17885
18545
|
setFieldPickState({ type: fieldTypeOf(wrapper), required: isFieldRequired(wrapper) });
|
|
17886
18546
|
setFieldTypePickerOpen(false);
|
|
17887
18547
|
}, []);
|
|
17888
|
-
const withSelectedField = (0,
|
|
18548
|
+
const withSelectedField = (0, import_react18.useCallback)(
|
|
17889
18549
|
(run) => {
|
|
17890
18550
|
const wrapper = fieldPickElRef.current;
|
|
17891
18551
|
const form = formPickElRef.current;
|
|
@@ -17898,28 +18558,28 @@ function OhhwellsBridge() {
|
|
|
17898
18558
|
},
|
|
17899
18559
|
[persistFields]
|
|
17900
18560
|
);
|
|
17901
|
-
const handleFieldTypeChange = (0,
|
|
18561
|
+
const handleFieldTypeChange = (0, import_react18.useCallback)(
|
|
17902
18562
|
(type) => withSelectedField((_form, wrapper) => {
|
|
17903
18563
|
applyFieldType(wrapper, type);
|
|
17904
18564
|
selectField(wrapper);
|
|
17905
18565
|
}),
|
|
17906
18566
|
[selectField, withSelectedField]
|
|
17907
18567
|
);
|
|
17908
|
-
const handleFieldRequiredToggle = (0,
|
|
18568
|
+
const handleFieldRequiredToggle = (0, import_react18.useCallback)(
|
|
17909
18569
|
() => withSelectedField((_form, wrapper) => {
|
|
17910
18570
|
setFieldRequired(wrapper, !isFieldRequired(wrapper));
|
|
17911
18571
|
selectField(wrapper);
|
|
17912
18572
|
}),
|
|
17913
18573
|
[selectField, withSelectedField]
|
|
17914
18574
|
);
|
|
17915
|
-
const handleFieldDuplicate = (0,
|
|
18575
|
+
const handleFieldDuplicate = (0, import_react18.useCallback)(
|
|
17916
18576
|
() => withSelectedField((form, wrapper) => {
|
|
17917
18577
|
const copy = duplicateField(form, wrapper);
|
|
17918
18578
|
selectField(copy);
|
|
17919
18579
|
}),
|
|
17920
18580
|
[selectField, withSelectedField]
|
|
17921
18581
|
);
|
|
17922
|
-
const handleFieldDelete = (0,
|
|
18582
|
+
const handleFieldDelete = (0, import_react18.useCallback)(
|
|
17923
18583
|
() => withSelectedField((_form, wrapper) => {
|
|
17924
18584
|
removeField(wrapper);
|
|
17925
18585
|
clearFieldPick();
|
|
@@ -17927,7 +18587,7 @@ function OhhwellsBridge() {
|
|
|
17927
18587
|
}),
|
|
17928
18588
|
[clearFieldPick, withSelectedField]
|
|
17929
18589
|
);
|
|
17930
|
-
const handleAddField = (0,
|
|
18590
|
+
const handleAddField = (0, import_react18.useCallback)(
|
|
17931
18591
|
(type) => {
|
|
17932
18592
|
const form = formPickElRef.current;
|
|
17933
18593
|
if (!form) return;
|
|
@@ -17943,8 +18603,8 @@ function OhhwellsBridge() {
|
|
|
17943
18603
|
},
|
|
17944
18604
|
[persistFields, selectField]
|
|
17945
18605
|
);
|
|
17946
|
-
const fieldDragRef = (0,
|
|
17947
|
-
const buildFieldDropSlots = (0,
|
|
18606
|
+
const fieldDragRef = (0, import_react18.useRef)(null);
|
|
18607
|
+
const buildFieldDropSlots = (0, import_react18.useCallback)((form, draggedKey) => {
|
|
17948
18608
|
const others = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== draggedKey);
|
|
17949
18609
|
const slots = others.map((el) => {
|
|
17950
18610
|
const rect = el.getBoundingClientRect();
|
|
@@ -17957,7 +18617,7 @@ function OhhwellsBridge() {
|
|
|
17957
18617
|
}
|
|
17958
18618
|
return slots;
|
|
17959
18619
|
}, []);
|
|
17960
|
-
const handleFieldDragStart = (0,
|
|
18620
|
+
const handleFieldDragStart = (0, import_react18.useCallback)(() => {
|
|
17961
18621
|
const wrapper = fieldPickElRef.current;
|
|
17962
18622
|
const form = formPickElRef.current;
|
|
17963
18623
|
if (!wrapper || !form) return;
|
|
@@ -17966,18 +18626,18 @@ function OhhwellsBridge() {
|
|
|
17966
18626
|
setFieldDragging(true);
|
|
17967
18627
|
setFieldDropSlots(buildFieldDropSlots(form, key));
|
|
17968
18628
|
}, [buildFieldDropSlots]);
|
|
17969
|
-
const handleFieldDragEnd = (0,
|
|
18629
|
+
const handleFieldDragEnd = (0, import_react18.useCallback)(() => {
|
|
17970
18630
|
fieldDragRef.current = null;
|
|
17971
18631
|
setFieldDropIndex(null);
|
|
17972
18632
|
setFieldDropSlots([]);
|
|
17973
18633
|
setFieldDragging(false);
|
|
17974
18634
|
}, []);
|
|
17975
|
-
const [fieldDropIndex, setFieldDropIndex] = (0,
|
|
17976
|
-
const [fieldDropSlots, setFieldDropSlots] = (0,
|
|
17977
|
-
const [fieldDragging, setFieldDragging] = (0,
|
|
17978
|
-
const clearFormPickRef = (0,
|
|
18635
|
+
const [fieldDropIndex, setFieldDropIndex] = (0, import_react18.useState)(null);
|
|
18636
|
+
const [fieldDropSlots, setFieldDropSlots] = (0, import_react18.useState)([]);
|
|
18637
|
+
const [fieldDragging, setFieldDragging] = (0, import_react18.useState)(false);
|
|
18638
|
+
const clearFormPickRef = (0, import_react18.useRef)(clearFormPick);
|
|
17979
18639
|
clearFormPickRef.current = clearFormPick;
|
|
17980
|
-
(0,
|
|
18640
|
+
(0, import_react18.useEffect)(() => {
|
|
17981
18641
|
const el = fieldPickElRef.current;
|
|
17982
18642
|
if (!el || fieldPickRect === null) return;
|
|
17983
18643
|
const observer = new ResizeObserver(() => {
|
|
@@ -17986,7 +18646,7 @@ function OhhwellsBridge() {
|
|
|
17986
18646
|
observer.observe(el);
|
|
17987
18647
|
return () => observer.disconnect();
|
|
17988
18648
|
}, [fieldPickRect !== null, fieldPickState]);
|
|
17989
|
-
(0,
|
|
18649
|
+
(0, import_react18.useEffect)(() => {
|
|
17990
18650
|
const el = formPickElRef.current;
|
|
17991
18651
|
if (!el || formPickRect === null) return;
|
|
17992
18652
|
const observer = new ResizeObserver(() => {
|
|
@@ -17995,25 +18655,25 @@ function OhhwellsBridge() {
|
|
|
17995
18655
|
observer.observe(el);
|
|
17996
18656
|
return () => observer.disconnect();
|
|
17997
18657
|
}, [formPickRect !== null, formViewState]);
|
|
17998
|
-
const [toolbarVariant, setToolbarVariant] = (0,
|
|
17999
|
-
const toolbarVariantRef = (0,
|
|
18658
|
+
const [toolbarVariant, setToolbarVariant] = (0, import_react18.useState)("none");
|
|
18659
|
+
const toolbarVariantRef = (0, import_react18.useRef)("none");
|
|
18000
18660
|
toolbarVariantRef.current = toolbarVariant;
|
|
18001
|
-
const [selectedIsCta, setSelectedIsCta] = (0,
|
|
18002
|
-
const [selectedIsSocial, setSelectedIsSocial] = (0,
|
|
18003
|
-
const [selectedIsSocialsRow, setSelectedIsSocialsRow] = (0,
|
|
18004
|
-
const [reorderHrefKey, setReorderHrefKey] = (0,
|
|
18005
|
-
const [reorderDragDisabled, setReorderDragDisabled] = (0,
|
|
18006
|
-
const [toggleState, setToggleState] = (0,
|
|
18007
|
-
const [maxBadge, setMaxBadge] = (0,
|
|
18008
|
-
const [activeCommands, setActiveCommands] = (0,
|
|
18009
|
-
const [sectionGap, setSectionGap] = (0,
|
|
18010
|
-
const [toolbarShowEditLink, setToolbarShowEditLink] = (0,
|
|
18011
|
-
const hoveredNavContainerRef = (0,
|
|
18012
|
-
const [hoveredNavContainerRect, setHoveredNavContainerRect] = (0,
|
|
18013
|
-
const hoveredItemElRef = (0,
|
|
18014
|
-
const [hoveredItemRect, setHoveredItemRect] = (0,
|
|
18015
|
-
const [hoveredTextRect, setHoveredTextRect] = (0,
|
|
18016
|
-
(0,
|
|
18661
|
+
const [selectedIsCta, setSelectedIsCta] = (0, import_react18.useState)(false);
|
|
18662
|
+
const [selectedIsSocial, setSelectedIsSocial] = (0, import_react18.useState)(false);
|
|
18663
|
+
const [selectedIsSocialsRow, setSelectedIsSocialsRow] = (0, import_react18.useState)(false);
|
|
18664
|
+
const [reorderHrefKey, setReorderHrefKey] = (0, import_react18.useState)(null);
|
|
18665
|
+
const [reorderDragDisabled, setReorderDragDisabled] = (0, import_react18.useState)(false);
|
|
18666
|
+
const [toggleState, setToggleState] = (0, import_react18.useState)(null);
|
|
18667
|
+
const [maxBadge, setMaxBadge] = (0, import_react18.useState)(null);
|
|
18668
|
+
const [activeCommands, setActiveCommands] = (0, import_react18.useState)(/* @__PURE__ */ new Set());
|
|
18669
|
+
const [sectionGap, setSectionGap] = (0, import_react18.useState)(null);
|
|
18670
|
+
const [toolbarShowEditLink, setToolbarShowEditLink] = (0, import_react18.useState)(false);
|
|
18671
|
+
const hoveredNavContainerRef = (0, import_react18.useRef)(null);
|
|
18672
|
+
const [hoveredNavContainerRect, setHoveredNavContainerRect] = (0, import_react18.useState)(null);
|
|
18673
|
+
const hoveredItemElRef = (0, import_react18.useRef)(null);
|
|
18674
|
+
const [hoveredItemRect, setHoveredItemRect] = (0, import_react18.useState)(null);
|
|
18675
|
+
const [hoveredTextRect, setHoveredTextRect] = (0, import_react18.useState)(null);
|
|
18676
|
+
(0, import_react18.useEffect)(() => {
|
|
18017
18677
|
const sync = () => {
|
|
18018
18678
|
const el = document.querySelector(
|
|
18019
18679
|
'[data-ohw-hovered]:not([contenteditable]):not([data-ohw-href-key]):not([data-ohw-editable="form"] *)'
|
|
@@ -18057,44 +18717,44 @@ function OhhwellsBridge() {
|
|
|
18057
18717
|
});
|
|
18058
18718
|
return () => observer.disconnect();
|
|
18059
18719
|
}, []);
|
|
18060
|
-
const siblingHintElRef = (0,
|
|
18061
|
-
const [siblingHintRect, setSiblingHintRect] = (0,
|
|
18062
|
-
const [siblingHintRects, setSiblingHintRects] = (0,
|
|
18063
|
-
const [isItemDragging, setIsItemDragging] = (0,
|
|
18064
|
-
const [isFooterFrameSelection, setIsFooterFrameSelection] = (0,
|
|
18720
|
+
const siblingHintElRef = (0, import_react18.useRef)(null);
|
|
18721
|
+
const [siblingHintRect, setSiblingHintRect] = (0, import_react18.useState)(null);
|
|
18722
|
+
const [siblingHintRects, setSiblingHintRects] = (0, import_react18.useState)([]);
|
|
18723
|
+
const [isItemDragging, setIsItemDragging] = (0, import_react18.useState)(false);
|
|
18724
|
+
const [isFooterFrameSelection, setIsFooterFrameSelection] = (0, import_react18.useState)(false);
|
|
18065
18725
|
isFooterFrameSelectionRef.current = isFooterFrameSelection;
|
|
18066
|
-
const [floatingPanel, setFloatingPanel] = (0,
|
|
18067
|
-
const floatingPanelOpenRef = (0,
|
|
18726
|
+
const [floatingPanel, setFloatingPanel] = (0, import_react18.useState)(null);
|
|
18727
|
+
const floatingPanelOpenRef = (0, import_react18.useRef)(false);
|
|
18068
18728
|
floatingPanelOpenRef.current = floatingPanel !== null;
|
|
18069
|
-
const [floatingPanelPos, setFloatingPanelPos] = (0,
|
|
18070
|
-
const [logoSizeDraft, setLogoSizeDraft] = (0,
|
|
18071
|
-
const [editorViewport, setEditorViewport] = (0,
|
|
18072
|
-
const [parentScrollSnap, setParentScrollSnap] = (0,
|
|
18073
|
-
const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = (0,
|
|
18074
|
-
const [footerHeadingVisible, setFooterHeadingVisible] = (0,
|
|
18075
|
-
const footerDragRef = (0,
|
|
18076
|
-
const [footerDropSlots, setFooterDropSlots] = (0,
|
|
18077
|
-
const [activeFooterDropIndex, setActiveFooterDropIndex] = (0,
|
|
18078
|
-
const [draggedItemRect, setDraggedItemRect] = (0,
|
|
18079
|
-
const footerPointerDragRef = (0,
|
|
18080
|
-
const suppressNextClickRef = (0,
|
|
18081
|
-
const suppressClickUntilRef = (0,
|
|
18082
|
-
const [linkPopover, setLinkPopover] = (0,
|
|
18083
|
-
const linkPopoverSessionRef = (0,
|
|
18084
|
-
const addNavAfterAnchorRef = (0,
|
|
18085
|
-
const editContentRef = (0,
|
|
18086
|
-
const aiSectionsRef = (0,
|
|
18087
|
-
const brandKitRef = (0,
|
|
18088
|
-
const stylesRef = (0,
|
|
18089
|
-
const appliedDrawerRef = (0,
|
|
18090
|
-
const pendingDeleteUndoRef = (0,
|
|
18091
|
-
const [sitePages, setSitePages] = (0,
|
|
18092
|
-
const [sectionsByPath, setSectionsByPath] = (0,
|
|
18093
|
-
const sectionsPrefetchGenRef = (0,
|
|
18094
|
-
const setLinkPopoverRef = (0,
|
|
18095
|
-
const linkPopoverPanelRef = (0,
|
|
18096
|
-
const linkPopoverOpenRef = (0,
|
|
18097
|
-
const linkPopoverGraceUntilRef = (0,
|
|
18729
|
+
const [floatingPanelPos, setFloatingPanelPos] = (0, import_react18.useState)(null);
|
|
18730
|
+
const [logoSizeDraft, setLogoSizeDraft] = (0, import_react18.useState)(null);
|
|
18731
|
+
const [editorViewport, setEditorViewport] = (0, import_react18.useState)("desktop");
|
|
18732
|
+
const [parentScrollSnap, setParentScrollSnap] = (0, import_react18.useState)(null);
|
|
18733
|
+
const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = (0, import_react18.useState)(null);
|
|
18734
|
+
const [footerHeadingVisible, setFooterHeadingVisible] = (0, import_react18.useState)(null);
|
|
18735
|
+
const footerDragRef = (0, import_react18.useRef)(null);
|
|
18736
|
+
const [footerDropSlots, setFooterDropSlots] = (0, import_react18.useState)([]);
|
|
18737
|
+
const [activeFooterDropIndex, setActiveFooterDropIndex] = (0, import_react18.useState)(null);
|
|
18738
|
+
const [draggedItemRect, setDraggedItemRect] = (0, import_react18.useState)(null);
|
|
18739
|
+
const footerPointerDragRef = (0, import_react18.useRef)(null);
|
|
18740
|
+
const suppressNextClickRef = (0, import_react18.useRef)(false);
|
|
18741
|
+
const suppressClickUntilRef = (0, import_react18.useRef)(0);
|
|
18742
|
+
const [linkPopover, setLinkPopover] = (0, import_react18.useState)(null);
|
|
18743
|
+
const linkPopoverSessionRef = (0, import_react18.useRef)(null);
|
|
18744
|
+
const addNavAfterAnchorRef = (0, import_react18.useRef)(null);
|
|
18745
|
+
const editContentRef = (0, import_react18.useRef)({});
|
|
18746
|
+
const aiSectionsRef = (0, import_react18.useRef)("");
|
|
18747
|
+
const brandKitRef = (0, import_react18.useRef)("");
|
|
18748
|
+
const stylesRef = (0, import_react18.useRef)("");
|
|
18749
|
+
const appliedDrawerRef = (0, import_react18.useRef)(null);
|
|
18750
|
+
const pendingDeleteUndoRef = (0, import_react18.useRef)(null);
|
|
18751
|
+
const [sitePages, setSitePages] = (0, import_react18.useState)([]);
|
|
18752
|
+
const [sectionsByPath, setSectionsByPath] = (0, import_react18.useState)({});
|
|
18753
|
+
const sectionsPrefetchGenRef = (0, import_react18.useRef)(0);
|
|
18754
|
+
const setLinkPopoverRef = (0, import_react18.useRef)(setLinkPopover);
|
|
18755
|
+
const linkPopoverPanelRef = (0, import_react18.useRef)(null);
|
|
18756
|
+
const linkPopoverOpenRef = (0, import_react18.useRef)(false);
|
|
18757
|
+
const linkPopoverGraceUntilRef = (0, import_react18.useRef)(0);
|
|
18098
18758
|
setLinkPopoverRef.current = setLinkPopover;
|
|
18099
18759
|
linkPopoverSessionRef.current = linkPopover;
|
|
18100
18760
|
const {
|
|
@@ -18143,7 +18803,7 @@ function OhhwellsBridge() {
|
|
|
18143
18803
|
const bumpLinkPopoverGrace = () => {
|
|
18144
18804
|
linkPopoverGraceUntilRef.current = Date.now() + 350;
|
|
18145
18805
|
};
|
|
18146
|
-
const runSectionsPrefetch = (0,
|
|
18806
|
+
const runSectionsPrefetch = (0, import_react18.useCallback)((pages) => {
|
|
18147
18807
|
if (!isEditMode || shouldUseDevFixtures() || pages.length === 0) return;
|
|
18148
18808
|
const gen = ++sectionsPrefetchGenRef.current;
|
|
18149
18809
|
const paths = pages.map((p) => p.path);
|
|
@@ -18162,9 +18822,9 @@ function OhhwellsBridge() {
|
|
|
18162
18822
|
);
|
|
18163
18823
|
});
|
|
18164
18824
|
}, [isEditMode, pathname]);
|
|
18165
|
-
const runSectionsPrefetchRef = (0,
|
|
18825
|
+
const runSectionsPrefetchRef = (0, import_react18.useRef)(runSectionsPrefetch);
|
|
18166
18826
|
runSectionsPrefetchRef.current = runSectionsPrefetch;
|
|
18167
|
-
(0,
|
|
18827
|
+
(0, import_react18.useEffect)(() => {
|
|
18168
18828
|
if (!linkPopover) {
|
|
18169
18829
|
document.documentElement.removeAttribute("data-ohw-link-popover-open");
|
|
18170
18830
|
return;
|
|
@@ -18192,7 +18852,7 @@ function OhhwellsBridge() {
|
|
|
18192
18852
|
document.documentElement.removeAttribute("data-ohw-link-popover-open");
|
|
18193
18853
|
};
|
|
18194
18854
|
}, [linkPopover, postToParent2]);
|
|
18195
|
-
(0,
|
|
18855
|
+
(0, import_react18.useEffect)(() => {
|
|
18196
18856
|
if (!isEditMode) return;
|
|
18197
18857
|
const useFixtures = shouldUseDevFixtures();
|
|
18198
18858
|
if (useFixtures) {
|
|
@@ -18216,14 +18876,14 @@ function OhhwellsBridge() {
|
|
|
18216
18876
|
if (!useFixtures) postToParent2({ type: "ow:request-site-pages" });
|
|
18217
18877
|
return () => window.removeEventListener("message", onSitePages);
|
|
18218
18878
|
}, [isEditMode, postToParent2]);
|
|
18219
|
-
(0,
|
|
18879
|
+
(0, import_react18.useEffect)(() => {
|
|
18220
18880
|
if (!isEditMode || shouldUseDevFixtures()) return;
|
|
18221
18881
|
void loadAllSectionsManifest().then((manifest) => {
|
|
18222
18882
|
if (Object.keys(manifest).length === 0) return;
|
|
18223
18883
|
setSectionsByPath((prev) => ({ ...manifest, ...prev }));
|
|
18224
18884
|
});
|
|
18225
18885
|
}, [isEditMode]);
|
|
18226
|
-
(0,
|
|
18886
|
+
(0, import_react18.useEffect)(() => {
|
|
18227
18887
|
const update = () => {
|
|
18228
18888
|
const el = activeElRef.current ?? selectedElRef.current;
|
|
18229
18889
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
@@ -18247,10 +18907,10 @@ function OhhwellsBridge() {
|
|
|
18247
18907
|
vvp.removeEventListener("resize", update);
|
|
18248
18908
|
};
|
|
18249
18909
|
}, []);
|
|
18250
|
-
const refreshStateRules = (0,
|
|
18910
|
+
const refreshStateRules = (0, import_react18.useCallback)(() => {
|
|
18251
18911
|
editStylesRef.current?.forceHover && (editStylesRef.current.forceHover.textContent = collectStateRules());
|
|
18252
18912
|
}, []);
|
|
18253
|
-
const processConfigRequest = (0,
|
|
18913
|
+
const processConfigRequest = (0, import_react18.useCallback)((insertAfterVal) => {
|
|
18254
18914
|
const tracker = getSectionsTracker();
|
|
18255
18915
|
let entries = [];
|
|
18256
18916
|
try {
|
|
@@ -18273,7 +18933,7 @@ function OhhwellsBridge() {
|
|
|
18273
18933
|
}
|
|
18274
18934
|
window.postMessage({ type: "ow:schedule-config", insertAfter: insertAfterVal, scheduleId: null }, "*");
|
|
18275
18935
|
}, [isEditMode]);
|
|
18276
|
-
const deactivate = (0,
|
|
18936
|
+
const deactivate = (0, import_react18.useCallback)(() => {
|
|
18277
18937
|
const el = activeElRef.current;
|
|
18278
18938
|
if (!el) return;
|
|
18279
18939
|
const isFormBlock = el.dataset.ohwEditable === "form";
|
|
@@ -18324,12 +18984,12 @@ function OhhwellsBridge() {
|
|
|
18324
18984
|
setToolbarShowEditLink(false);
|
|
18325
18985
|
postToParent2({ type: "ow:exit-edit" });
|
|
18326
18986
|
}, [postToParent2]);
|
|
18327
|
-
const clearSelectedAttr = (0,
|
|
18987
|
+
const clearSelectedAttr = (0, import_react18.useCallback)(() => {
|
|
18328
18988
|
document.querySelectorAll("[data-ohw-selected]").forEach((el) => {
|
|
18329
18989
|
el.removeAttribute("data-ohw-selected");
|
|
18330
18990
|
});
|
|
18331
18991
|
}, []);
|
|
18332
|
-
const deselect = (0,
|
|
18992
|
+
const deselect = (0, import_react18.useCallback)(() => {
|
|
18333
18993
|
const nestedGroup = selectedElRef.current?.closest("[data-ohw-nav-children]") != null ? selectedElRef.current.closest("[data-ohw-nav-group]") : null;
|
|
18334
18994
|
clearSelectedAttr();
|
|
18335
18995
|
selectedElRef.current = null;
|
|
@@ -18363,20 +19023,20 @@ function OhhwellsBridge() {
|
|
|
18363
19023
|
setToolbarVariant("none");
|
|
18364
19024
|
}
|
|
18365
19025
|
}, [clearSelectedAttr]);
|
|
18366
|
-
const markSelected = (0,
|
|
19026
|
+
const markSelected = (0, import_react18.useCallback)((el) => {
|
|
18367
19027
|
clearSelectedAttr();
|
|
18368
19028
|
el.removeAttribute("data-ohw-hovered");
|
|
18369
19029
|
el.setAttribute("data-ohw-selected", "");
|
|
18370
19030
|
}, [clearSelectedAttr]);
|
|
18371
|
-
const isSelectedForHover = (0,
|
|
19031
|
+
const isSelectedForHover = (0, import_react18.useCallback)((el) => {
|
|
18372
19032
|
if (!el) return false;
|
|
18373
19033
|
return [selectedElRef.current, activeElRef.current].some(
|
|
18374
19034
|
(busy) => busy && (el === busy || busy.contains(el) || el.contains(busy))
|
|
18375
19035
|
);
|
|
18376
19036
|
}, []);
|
|
18377
|
-
const isSelectedForHoverRef = (0,
|
|
19037
|
+
const isSelectedForHoverRef = (0, import_react18.useRef)(isSelectedForHover);
|
|
18378
19038
|
isSelectedForHoverRef.current = isSelectedForHover;
|
|
18379
|
-
const resolveHrefKeyElement = (0,
|
|
19039
|
+
const resolveHrefKeyElement = (0, import_react18.useCallback)((hrefKey) => {
|
|
18380
19040
|
if (isFooterHrefKey(hrefKey)) {
|
|
18381
19041
|
return document.querySelector(
|
|
18382
19042
|
`footer [data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
@@ -18391,7 +19051,7 @@ function OhhwellsBridge() {
|
|
|
18391
19051
|
`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
18392
19052
|
);
|
|
18393
19053
|
}, []);
|
|
18394
|
-
const resyncSelectedNavigationItem = (0,
|
|
19054
|
+
const resyncSelectedNavigationItem = (0, import_react18.useCallback)(() => {
|
|
18395
19055
|
const hrefKey = selectedHrefKeyRef.current;
|
|
18396
19056
|
if (hrefKey) {
|
|
18397
19057
|
const link = resolveHrefKeyElement(hrefKey);
|
|
@@ -18429,7 +19089,7 @@ function OhhwellsBridge() {
|
|
|
18429
19089
|
);
|
|
18430
19090
|
}
|
|
18431
19091
|
}, [resolveHrefKeyElement]);
|
|
18432
|
-
const reselectNavigationItem = (0,
|
|
19092
|
+
const reselectNavigationItem = (0, import_react18.useCallback)((navAnchor) => {
|
|
18433
19093
|
selectedElRef.current = navAnchor;
|
|
18434
19094
|
selectedHrefKeyRef.current = navAnchor.getAttribute("data-ohw-href-key");
|
|
18435
19095
|
selectedFooterColAttrRef.current = null;
|
|
@@ -18460,7 +19120,7 @@ function OhhwellsBridge() {
|
|
|
18460
19120
|
setToolbarShowEditLink(false);
|
|
18461
19121
|
setActiveCommands(/* @__PURE__ */ new Set());
|
|
18462
19122
|
}, [markSelected]);
|
|
18463
|
-
const commitNavigationTextEdit = (0,
|
|
19123
|
+
const commitNavigationTextEdit = (0, import_react18.useCallback)((navAnchor) => {
|
|
18464
19124
|
const el = activeElRef.current;
|
|
18465
19125
|
if (!el) return;
|
|
18466
19126
|
const key = el.dataset.ohwKey;
|
|
@@ -18493,7 +19153,7 @@ function OhhwellsBridge() {
|
|
|
18493
19153
|
postToParent2({ type: "ow:exit-edit" });
|
|
18494
19154
|
reselectNavigationItem(navAnchor);
|
|
18495
19155
|
}, [postToParent2, reselectNavigationItem]);
|
|
18496
|
-
const handleAddTopLevelNavItem = (0,
|
|
19156
|
+
const handleAddTopLevelNavItem = (0, import_react18.useCallback)(() => {
|
|
18497
19157
|
const items = listNavbarRootItems();
|
|
18498
19158
|
addNavAfterAnchorRef.current = items[items.length - 1] ?? null;
|
|
18499
19159
|
deselectRef.current();
|
|
@@ -18505,7 +19165,7 @@ function OhhwellsBridge() {
|
|
|
18505
19165
|
intent: "add-nav"
|
|
18506
19166
|
});
|
|
18507
19167
|
}, []);
|
|
18508
|
-
const maybeWarnNavLinkDropdownConflict = (0,
|
|
19168
|
+
const maybeWarnNavLinkDropdownConflict = (0, import_react18.useCallback)(
|
|
18509
19169
|
(anchor) => {
|
|
18510
19170
|
if (!isNavbarHrefKey(anchor.getAttribute("data-ohw-href-key"))) return;
|
|
18511
19171
|
if (!navDropdownsOpenOnClick()) return;
|
|
@@ -18518,7 +19178,7 @@ function OhhwellsBridge() {
|
|
|
18518
19178
|
},
|
|
18519
19179
|
[postToParent2]
|
|
18520
19180
|
);
|
|
18521
|
-
const handleNavDropdownOpenChange = (0,
|
|
19181
|
+
const handleNavDropdownOpenChange = (0, import_react18.useCallback)((open) => {
|
|
18522
19182
|
const selected = selectedElRef.current;
|
|
18523
19183
|
if (!selected || !isNavigationItem2(selected)) return;
|
|
18524
19184
|
if (isNestedNavChild(selected)) return;
|
|
@@ -18534,7 +19194,7 @@ function OhhwellsBridge() {
|
|
|
18534
19194
|
}
|
|
18535
19195
|
});
|
|
18536
19196
|
}, []);
|
|
18537
|
-
const handleFooterHeadingVisibleChange = (0,
|
|
19197
|
+
const handleFooterHeadingVisibleChange = (0, import_react18.useCallback)(
|
|
18538
19198
|
(visible) => {
|
|
18539
19199
|
const selected = selectedElRef.current;
|
|
18540
19200
|
if (!selected || !isFooterFrameSelectionRef.current) return;
|
|
@@ -18558,7 +19218,7 @@ function OhhwellsBridge() {
|
|
|
18558
19218
|
},
|
|
18559
19219
|
[postToParent2]
|
|
18560
19220
|
);
|
|
18561
|
-
const enterEditOnNewItem = (0,
|
|
19221
|
+
const enterEditOnNewItem = (0, import_react18.useCallback)((anchor) => {
|
|
18562
19222
|
const label = anchor.querySelector('[data-ohw-editable="text"]');
|
|
18563
19223
|
if (!label) {
|
|
18564
19224
|
selectRef.current(anchor);
|
|
@@ -18567,8 +19227,8 @@ function OhhwellsBridge() {
|
|
|
18567
19227
|
setNavGroupForceOpen(anchor, true);
|
|
18568
19228
|
activateRef.current(label);
|
|
18569
19229
|
}, []);
|
|
18570
|
-
const pendingSocialAddRef = (0,
|
|
18571
|
-
const handleAddChildItem = (0,
|
|
19230
|
+
const pendingSocialAddRef = (0, import_react18.useRef)(null);
|
|
19231
|
+
const handleAddChildItem = (0, import_react18.useCallback)(() => {
|
|
18572
19232
|
const selected = selectedElRef.current;
|
|
18573
19233
|
if (!selected) return;
|
|
18574
19234
|
const socialsRow = isSocialsRow(selected) ? selected : findSocialsRow(selected);
|
|
@@ -18679,7 +19339,7 @@ function OhhwellsBridge() {
|
|
|
18679
19339
|
});
|
|
18680
19340
|
});
|
|
18681
19341
|
}, [enterEditOnNewItem, isFooterFrameSelection, maybeWarnNavLinkDropdownConflict, postToParent2]);
|
|
18682
|
-
const handleAddFooterColumn = (0,
|
|
19342
|
+
const handleAddFooterColumn = (0, import_react18.useCallback)(() => {
|
|
18683
19343
|
if (!canAddFooterColumn()) {
|
|
18684
19344
|
postToParent2({
|
|
18685
19345
|
type: "ow:toast",
|
|
@@ -18700,7 +19360,7 @@ function OhhwellsBridge() {
|
|
|
18700
19360
|
selectRef.current(result.firstLink);
|
|
18701
19361
|
});
|
|
18702
19362
|
}, [postToParent2]);
|
|
18703
|
-
const clearFooterDragVisuals = (0,
|
|
19363
|
+
const clearFooterDragVisuals = (0, import_react18.useCallback)(() => {
|
|
18704
19364
|
footerDragRef.current = null;
|
|
18705
19365
|
setSiblingHintRects([]);
|
|
18706
19366
|
setFooterDropSlots([]);
|
|
@@ -18709,7 +19369,7 @@ function OhhwellsBridge() {
|
|
|
18709
19369
|
setIsItemDragging(false);
|
|
18710
19370
|
unlockFooterDragInteraction();
|
|
18711
19371
|
}, []);
|
|
18712
|
-
const refreshFooterDragVisuals = (0,
|
|
19372
|
+
const refreshFooterDragVisuals = (0, import_react18.useCallback)((session, activeSlot, clientX, clientY) => {
|
|
18713
19373
|
const dragged = session.draggedEl;
|
|
18714
19374
|
setDraggedItemRect(dragged.getBoundingClientRect());
|
|
18715
19375
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -18741,13 +19401,13 @@ function OhhwellsBridge() {
|
|
|
18741
19401
|
const activeIdx = activeSlot ? slots.findIndex((s) => s.insertIndex === activeSlot.insertIndex) : -1;
|
|
18742
19402
|
setActiveFooterDropIndex(activeIdx >= 0 ? activeIdx : null);
|
|
18743
19403
|
}, []);
|
|
18744
|
-
const refreshFooterDragVisualsRef = (0,
|
|
19404
|
+
const refreshFooterDragVisualsRef = (0, import_react18.useRef)(refreshFooterDragVisuals);
|
|
18745
19405
|
refreshFooterDragVisualsRef.current = refreshFooterDragVisuals;
|
|
18746
|
-
const commitFooterDragRef = (0,
|
|
19406
|
+
const commitFooterDragRef = (0, import_react18.useRef)(() => {
|
|
18747
19407
|
});
|
|
18748
|
-
const beginFooterDragRef = (0,
|
|
19408
|
+
const beginFooterDragRef = (0, import_react18.useRef)(() => {
|
|
18749
19409
|
});
|
|
18750
|
-
const beginFooterDrag = (0,
|
|
19410
|
+
const beginFooterDrag = (0, import_react18.useCallback)(
|
|
18751
19411
|
(session) => {
|
|
18752
19412
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
18753
19413
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -18767,7 +19427,7 @@ function OhhwellsBridge() {
|
|
|
18767
19427
|
[refreshFooterDragVisuals]
|
|
18768
19428
|
);
|
|
18769
19429
|
beginFooterDragRef.current = beginFooterDrag;
|
|
18770
|
-
const commitFooterDrag = (0,
|
|
19430
|
+
const commitFooterDrag = (0, import_react18.useCallback)(
|
|
18771
19431
|
(clientX, clientY) => {
|
|
18772
19432
|
const session = footerDragRef.current;
|
|
18773
19433
|
if (!session) {
|
|
@@ -18896,7 +19556,7 @@ function OhhwellsBridge() {
|
|
|
18896
19556
|
[clearFooterDragVisuals, resolveHrefKeyElement, resyncSelectedNavigationItem]
|
|
18897
19557
|
);
|
|
18898
19558
|
commitFooterDragRef.current = commitFooterDrag;
|
|
18899
|
-
const startFooterLinkDrag = (0,
|
|
19559
|
+
const startFooterLinkDrag = (0, import_react18.useCallback)(
|
|
18900
19560
|
(anchor, clientX, clientY, wasSelected) => {
|
|
18901
19561
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
18902
19562
|
if (!hrefKey) return false;
|
|
@@ -18932,7 +19592,7 @@ function OhhwellsBridge() {
|
|
|
18932
19592
|
},
|
|
18933
19593
|
[beginFooterDrag]
|
|
18934
19594
|
);
|
|
18935
|
-
const startFooterColumnDrag = (0,
|
|
19595
|
+
const startFooterColumnDrag = (0, import_react18.useCallback)(
|
|
18936
19596
|
(columnEl, clientX, clientY, wasSelected) => {
|
|
18937
19597
|
const columns = listFooterColumns();
|
|
18938
19598
|
const idx = columns.indexOf(columnEl);
|
|
@@ -18952,7 +19612,7 @@ function OhhwellsBridge() {
|
|
|
18952
19612
|
},
|
|
18953
19613
|
[beginFooterDrag]
|
|
18954
19614
|
);
|
|
18955
|
-
const handleItemDragStart = (0,
|
|
19615
|
+
const handleItemDragStart = (0, import_react18.useCallback)(
|
|
18956
19616
|
(e) => {
|
|
18957
19617
|
const selected = selectedElRef.current;
|
|
18958
19618
|
if (!selected) {
|
|
@@ -18972,7 +19632,7 @@ function OhhwellsBridge() {
|
|
|
18972
19632
|
},
|
|
18973
19633
|
[startFooterColumnDrag, startFooterLinkDrag, startNavLinkDrag]
|
|
18974
19634
|
);
|
|
18975
|
-
const handleItemDragEnd = (0,
|
|
19635
|
+
const handleItemDragEnd = (0, import_react18.useCallback)(
|
|
18976
19636
|
(e) => {
|
|
18977
19637
|
if (footerDragRef.current) {
|
|
18978
19638
|
const x = e?.clientX;
|
|
@@ -18998,7 +19658,7 @@ function OhhwellsBridge() {
|
|
|
18998
19658
|
},
|
|
18999
19659
|
[commitFooterDrag, commitNavDrag, navDragRef]
|
|
19000
19660
|
);
|
|
19001
|
-
const handleItemChromePointerDown = (0,
|
|
19661
|
+
const handleItemChromePointerDown = (0, import_react18.useCallback)((e) => {
|
|
19002
19662
|
if (e.button !== 0) return;
|
|
19003
19663
|
const selected = selectedElRef.current;
|
|
19004
19664
|
if (!selected) return;
|
|
@@ -19029,7 +19689,7 @@ function OhhwellsBridge() {
|
|
|
19029
19689
|
}
|
|
19030
19690
|
if (armNavPressFromChrome(selected, e.clientX, e.clientY, e.pointerId)) return;
|
|
19031
19691
|
}, [armNavPressFromChrome]);
|
|
19032
|
-
const handleItemChromeClick = (0,
|
|
19692
|
+
const handleItemChromeClick = (0, import_react18.useCallback)((clientX, clientY) => {
|
|
19033
19693
|
if (suppressNextClickRef.current || Date.now() < suppressClickUntilRef.current) {
|
|
19034
19694
|
suppressNextClickRef.current = false;
|
|
19035
19695
|
return;
|
|
@@ -19042,7 +19702,7 @@ function OhhwellsBridge() {
|
|
|
19042
19702
|
}, []);
|
|
19043
19703
|
reselectNavigationItemRef.current = reselectNavigationItem;
|
|
19044
19704
|
commitNavigationTextEditRef.current = commitNavigationTextEdit;
|
|
19045
|
-
const select = (0,
|
|
19705
|
+
const select = (0, import_react18.useCallback)((anchor) => {
|
|
19046
19706
|
if (!isNavigationItem2(anchor)) return;
|
|
19047
19707
|
if (activeElRef.current) deactivate();
|
|
19048
19708
|
aiSectionApiRef.current?.selectFromElement(anchor);
|
|
@@ -19085,7 +19745,7 @@ function OhhwellsBridge() {
|
|
|
19085
19745
|
setFloatingPanel(null);
|
|
19086
19746
|
setLogoSizeDraft(null);
|
|
19087
19747
|
}, [deactivate, markSelected]);
|
|
19088
|
-
const selectFrame = (0,
|
|
19748
|
+
const selectFrame = (0, import_react18.useCallback)((el) => {
|
|
19089
19749
|
if (!isNavigationContainer(el)) return;
|
|
19090
19750
|
if (activeElRef.current) deactivate();
|
|
19091
19751
|
aiSectionApiRef.current?.selectFromElement(el);
|
|
@@ -19125,7 +19785,7 @@ function OhhwellsBridge() {
|
|
|
19125
19785
|
setFloatingPanel(null);
|
|
19126
19786
|
setLogoSizeDraft(null);
|
|
19127
19787
|
}, [deactivate, markSelected, postToParent2]);
|
|
19128
|
-
const selectLogo = (0,
|
|
19788
|
+
const selectLogo = (0, import_react18.useCallback)(
|
|
19129
19789
|
(logoEl) => {
|
|
19130
19790
|
if (activeElRef.current) deactivate();
|
|
19131
19791
|
selectedElRef.current = logoEl;
|
|
@@ -19154,7 +19814,7 @@ function OhhwellsBridge() {
|
|
|
19154
19814
|
},
|
|
19155
19815
|
[deactivate, markSelected]
|
|
19156
19816
|
);
|
|
19157
|
-
const openLogoSizePanel = (0,
|
|
19817
|
+
const openLogoSizePanel = (0, import_react18.useCallback)((logoEl) => {
|
|
19158
19818
|
const placement = getLogoPlacement(logoEl);
|
|
19159
19819
|
const draft = readLogoSizeState(editContentRef.current, placement);
|
|
19160
19820
|
setLogoSizeDraft(draft);
|
|
@@ -19167,7 +19827,7 @@ function OhhwellsBridge() {
|
|
|
19167
19827
|
placement
|
|
19168
19828
|
});
|
|
19169
19829
|
}, []);
|
|
19170
|
-
const openSocialsDisplayPanel = (0,
|
|
19830
|
+
const openSocialsDisplayPanel = (0, import_react18.useCallback)((row) => {
|
|
19171
19831
|
setParentScrollSnap(parentScrollRef.current);
|
|
19172
19832
|
setFloatingPanel({
|
|
19173
19833
|
key: "socials-display",
|
|
@@ -19177,11 +19837,11 @@ function OhhwellsBridge() {
|
|
|
19177
19837
|
row
|
|
19178
19838
|
});
|
|
19179
19839
|
}, []);
|
|
19180
|
-
const isEditModeRef = (0,
|
|
19181
|
-
const requestMissingSocialIconsRef = (0,
|
|
19840
|
+
const isEditModeRef = (0, import_react18.useRef)(false);
|
|
19841
|
+
const requestMissingSocialIconsRef = (0, import_react18.useRef)(() => {
|
|
19182
19842
|
});
|
|
19183
|
-
const askedSocialIconsRef = (0,
|
|
19184
|
-
const requestMissingSocialIcons = (0,
|
|
19843
|
+
const askedSocialIconsRef = (0, import_react18.useRef)(/* @__PURE__ */ new Set());
|
|
19844
|
+
const requestMissingSocialIcons = (0, import_react18.useCallback)(() => {
|
|
19185
19845
|
const items = Array.from(document.querySelectorAll(`[${SOCIALS_ROW_ATTR}]`)).filter((row) => socialsDisplayFor(row, editContentRef.current).icon).flatMap((row) => {
|
|
19186
19846
|
const missing = socialsMissingIcons(row);
|
|
19187
19847
|
listSocialItems(row).forEach((item) => ensureIconSlot(item));
|
|
@@ -19193,7 +19853,7 @@ function OhhwellsBridge() {
|
|
|
19193
19853
|
}, []);
|
|
19194
19854
|
requestMissingSocialIconsRef.current = requestMissingSocialIcons;
|
|
19195
19855
|
isEditModeRef.current = isEditMode;
|
|
19196
|
-
const changeSocialsDisplay = (0,
|
|
19856
|
+
const changeSocialsDisplay = (0, import_react18.useCallback)(
|
|
19197
19857
|
(row, next) => {
|
|
19198
19858
|
if (next.icon) {
|
|
19199
19859
|
const missing = socialsMissingIcons(row);
|
|
@@ -19217,17 +19877,17 @@ function OhhwellsBridge() {
|
|
|
19217
19877
|
},
|
|
19218
19878
|
[]
|
|
19219
19879
|
);
|
|
19220
|
-
const closeFloatingPanelOnly = (0,
|
|
19880
|
+
const closeFloatingPanelOnly = (0, import_react18.useCallback)(() => {
|
|
19221
19881
|
setFloatingPanel(null);
|
|
19222
19882
|
setLogoSizeDraft(null);
|
|
19223
19883
|
}, []);
|
|
19224
19884
|
closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
|
|
19225
|
-
const closeFloatingPanelAndDeselect = (0,
|
|
19885
|
+
const closeFloatingPanelAndDeselect = (0, import_react18.useCallback)(() => {
|
|
19226
19886
|
setFloatingPanel(null);
|
|
19227
19887
|
setLogoSizeDraft(null);
|
|
19228
19888
|
deselectRef.current();
|
|
19229
19889
|
}, []);
|
|
19230
|
-
(0,
|
|
19890
|
+
(0, import_react18.useEffect)(() => {
|
|
19231
19891
|
const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
|
|
19232
19892
|
if (!session || !logoSizeDraft) {
|
|
19233
19893
|
postToParentRef.current({ type: "ow:logo-size-panel", open: false });
|
|
@@ -19246,7 +19906,7 @@ function OhhwellsBridge() {
|
|
|
19246
19906
|
max: LOGO_SIZE_MAX
|
|
19247
19907
|
});
|
|
19248
19908
|
}, [floatingPanel, logoSizeDraft, editorViewport]);
|
|
19249
|
-
const persistLogoSizeDraft = (0,
|
|
19909
|
+
const persistLogoSizeDraft = (0, import_react18.useCallback)(
|
|
19250
19910
|
(placement, draft) => {
|
|
19251
19911
|
const desktopKey = LOGO_SIZE_DESKTOP_KEYS[placement];
|
|
19252
19912
|
const mobileKey = LOGO_SIZE_MOBILE_KEYS[placement];
|
|
@@ -19286,7 +19946,7 @@ function OhhwellsBridge() {
|
|
|
19286
19946
|
},
|
|
19287
19947
|
[postToParent2]
|
|
19288
19948
|
);
|
|
19289
|
-
const activate = (0,
|
|
19949
|
+
const activate = (0, import_react18.useCallback)((el, options) => {
|
|
19290
19950
|
if (activeElRef.current === el) return;
|
|
19291
19951
|
document.querySelectorAll("[data-ohw-hovered]").forEach((hovered) => {
|
|
19292
19952
|
hovered.removeAttribute("data-ohw-hovered");
|
|
@@ -19384,8 +20044,8 @@ function OhhwellsBridge() {
|
|
|
19384
20044
|
openLogoSizePanelRef.current = openLogoSizePanel;
|
|
19385
20045
|
deselectRef.current = deselect;
|
|
19386
20046
|
closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
|
|
19387
|
-
const lastSiteWideScopeRef = (0,
|
|
19388
|
-
(0,
|
|
20047
|
+
const lastSiteWideScopeRef = (0, import_react18.useRef)(null);
|
|
20048
|
+
(0, import_react18.useEffect)(() => {
|
|
19389
20049
|
if (!isEditMode) {
|
|
19390
20050
|
if (lastSiteWideScopeRef.current !== false) {
|
|
19391
20051
|
lastSiteWideScopeRef.current = false;
|
|
@@ -19411,7 +20071,7 @@ function OhhwellsBridge() {
|
|
|
19411
20071
|
isFooterFrameSelection,
|
|
19412
20072
|
postToParent2
|
|
19413
20073
|
]);
|
|
19414
|
-
(0,
|
|
20074
|
+
(0, import_react18.useLayoutEffect)(() => {
|
|
19415
20075
|
if (!subdomain || isEditMode) {
|
|
19416
20076
|
setFetchState("done");
|
|
19417
20077
|
return;
|
|
@@ -19530,7 +20190,7 @@ function OhhwellsBridge() {
|
|
|
19530
20190
|
cancelled = true;
|
|
19531
20191
|
};
|
|
19532
20192
|
}, [subdomain, isEditMode]);
|
|
19533
|
-
(0,
|
|
20193
|
+
(0, import_react18.useEffect)(() => {
|
|
19534
20194
|
if (!isEditMode) return;
|
|
19535
20195
|
const resolveIndex = (form, clientY) => {
|
|
19536
20196
|
const wrappers = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== fieldDragRef.current?.key);
|
|
@@ -19571,7 +20231,7 @@ function OhhwellsBridge() {
|
|
|
19571
20231
|
window.removeEventListener("drop", onDrop, true);
|
|
19572
20232
|
};
|
|
19573
20233
|
}, [buildFieldDropSlots, isEditMode, persistFields, selectField]);
|
|
19574
|
-
(0,
|
|
20234
|
+
(0, import_react18.useEffect)(() => {
|
|
19575
20235
|
if (!isEditMode) return;
|
|
19576
20236
|
const mark = () => document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
19577
20237
|
markFormFields(form);
|
|
@@ -19583,7 +20243,7 @@ function OhhwellsBridge() {
|
|
|
19583
20243
|
});
|
|
19584
20244
|
return () => observer.disconnect();
|
|
19585
20245
|
}, [isEditMode, fetchState, pathname]);
|
|
19586
|
-
(0,
|
|
20246
|
+
(0, import_react18.useEffect)(() => {
|
|
19587
20247
|
if (!isEditMode) return;
|
|
19588
20248
|
let saveTimer = null;
|
|
19589
20249
|
const onInput = (e) => {
|
|
@@ -19605,14 +20265,14 @@ function OhhwellsBridge() {
|
|
|
19605
20265
|
document.addEventListener("input", onInput, true);
|
|
19606
20266
|
return () => document.removeEventListener("input", onInput, true);
|
|
19607
20267
|
}, [isEditMode, persistFields]);
|
|
19608
|
-
(0,
|
|
20268
|
+
(0, import_react18.useEffect)(() => {
|
|
19609
20269
|
if (isEditMode || fetchState !== "done") return;
|
|
19610
20270
|
const content = contentCache.get(subdomain) ?? {};
|
|
19611
20271
|
document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
19612
20272
|
reconcileFieldsFromContent(form, content);
|
|
19613
20273
|
});
|
|
19614
20274
|
}, [isEditMode, fetchState, subdomain]);
|
|
19615
|
-
(0,
|
|
20275
|
+
(0, import_react18.useEffect)(() => {
|
|
19616
20276
|
if (!isEditMode) return;
|
|
19617
20277
|
const swallow = (e) => {
|
|
19618
20278
|
const target = e.target;
|
|
@@ -19621,14 +20281,14 @@ function OhhwellsBridge() {
|
|
|
19621
20281
|
document.addEventListener("submit", swallow, true);
|
|
19622
20282
|
return () => document.removeEventListener("submit", swallow, true);
|
|
19623
20283
|
}, [isEditMode]);
|
|
19624
|
-
(0,
|
|
20284
|
+
(0, import_react18.useEffect)(() => {
|
|
19625
20285
|
if (isEditMode || fetchState !== "done") return;
|
|
19626
20286
|
console.log("env", process.env.NEXT_PUBLIC_FLOWOPS_API_URL);
|
|
19627
20287
|
const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
|
|
19628
20288
|
console.log({ apiUrl, subdomain });
|
|
19629
20289
|
bindPublishedForms(apiUrl, subdomain, contentCache.get(subdomain) ?? {});
|
|
19630
20290
|
}, [isEditMode, fetchState, subdomain]);
|
|
19631
|
-
(0,
|
|
20291
|
+
(0, import_react18.useEffect)(() => {
|
|
19632
20292
|
if (!subdomain || isEditMode) return;
|
|
19633
20293
|
let debounceTimer = null;
|
|
19634
20294
|
let observer = null;
|
|
@@ -19717,16 +20377,16 @@ function OhhwellsBridge() {
|
|
|
19717
20377
|
if (debounceTimer) clearTimeout(debounceTimer);
|
|
19718
20378
|
};
|
|
19719
20379
|
}, [subdomain, isEditMode, pathname]);
|
|
19720
|
-
(0,
|
|
20380
|
+
(0, import_react18.useLayoutEffect)(() => {
|
|
19721
20381
|
const el = document.getElementById("ohw-loader");
|
|
19722
20382
|
if (!el) return;
|
|
19723
20383
|
const visible = Boolean(subdomain) && fetchState !== "done";
|
|
19724
20384
|
el.style.display = visible ? "flex" : "none";
|
|
19725
20385
|
}, [subdomain, fetchState]);
|
|
19726
|
-
(0,
|
|
20386
|
+
(0, import_react18.useEffect)(() => {
|
|
19727
20387
|
postToParent2({ type: "ow:navigation", path: pathname });
|
|
19728
20388
|
}, [pathname, postToParent2]);
|
|
19729
|
-
(0,
|
|
20389
|
+
(0, import_react18.useEffect)(() => {
|
|
19730
20390
|
if (!subdomain || isEditMode) return;
|
|
19731
20391
|
const content = contentCache.get(subdomain);
|
|
19732
20392
|
if (!content) return;
|
|
@@ -19742,7 +20402,7 @@ function OhhwellsBridge() {
|
|
|
19742
20402
|
applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
|
|
19743
20403
|
}
|
|
19744
20404
|
}, [pathname, subdomain, isEditMode]);
|
|
19745
|
-
(0,
|
|
20405
|
+
(0, import_react18.useEffect)(() => {
|
|
19746
20406
|
if (!isEditMode) return;
|
|
19747
20407
|
if (linkPopoverSessionRef.current?.intent === "add-nav") return;
|
|
19748
20408
|
if (document.querySelector("[data-ohw-section-picker]")) return;
|
|
@@ -19750,11 +20410,11 @@ function OhhwellsBridge() {
|
|
|
19750
20410
|
deselectRef.current();
|
|
19751
20411
|
deactivateRef.current();
|
|
19752
20412
|
}, [pathname, isEditMode]);
|
|
19753
|
-
(0,
|
|
20413
|
+
(0, import_react18.useEffect)(() => {
|
|
19754
20414
|
if (!isEditMode) return;
|
|
19755
20415
|
initSectionInstancesFromContent(editContentRef.current, pathname);
|
|
19756
20416
|
}, [pathname, isEditMode]);
|
|
19757
|
-
(0,
|
|
20417
|
+
(0, import_react18.useEffect)(() => {
|
|
19758
20418
|
if (!isEditMode) return;
|
|
19759
20419
|
const observer = new MutationObserver(() => {
|
|
19760
20420
|
const drawer = document.querySelector("[data-ohw-nav-drawer]");
|
|
@@ -19765,7 +20425,7 @@ function OhhwellsBridge() {
|
|
|
19765
20425
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
19766
20426
|
return () => observer.disconnect();
|
|
19767
20427
|
}, [isEditMode, pathname]);
|
|
19768
|
-
(0,
|
|
20428
|
+
(0, import_react18.useEffect)(() => {
|
|
19769
20429
|
const contentForNav = () => {
|
|
19770
20430
|
if (isEditMode) return editContentRef.current;
|
|
19771
20431
|
if (!subdomain) return {};
|
|
@@ -19834,7 +20494,7 @@ function OhhwellsBridge() {
|
|
|
19834
20494
|
observer?.disconnect();
|
|
19835
20495
|
};
|
|
19836
20496
|
}, [isEditMode, pathname, subdomain, fetchState, resyncSelectedNavigationItem]);
|
|
19837
|
-
(0,
|
|
20497
|
+
(0, import_react18.useEffect)(() => {
|
|
19838
20498
|
if (!isEditMode) return;
|
|
19839
20499
|
let lastPosted = 0;
|
|
19840
20500
|
const measure = () => {
|
|
@@ -19878,7 +20538,7 @@ function OhhwellsBridge() {
|
|
|
19878
20538
|
window.removeEventListener("resize", handleResize);
|
|
19879
20539
|
};
|
|
19880
20540
|
}, [pathname, isEditMode, postToParent2]);
|
|
19881
|
-
(0,
|
|
20541
|
+
(0, import_react18.useEffect)(() => {
|
|
19882
20542
|
if (!subdomainFromQuery || isEditMode) return;
|
|
19883
20543
|
const handleClick = (e) => {
|
|
19884
20544
|
const anchor = e.target.closest("a");
|
|
@@ -19894,7 +20554,7 @@ function OhhwellsBridge() {
|
|
|
19894
20554
|
document.addEventListener("click", handleClick, true);
|
|
19895
20555
|
return () => document.removeEventListener("click", handleClick, true);
|
|
19896
20556
|
}, [subdomainFromQuery, isEditMode, router]);
|
|
19897
|
-
(0,
|
|
20557
|
+
(0, import_react18.useEffect)(() => {
|
|
19898
20558
|
if (!isEditMode) {
|
|
19899
20559
|
editStylesRef.current?.base.remove();
|
|
19900
20560
|
editStylesRef.current?.forceHover.remove();
|
|
@@ -20120,11 +20780,11 @@ function OhhwellsBridge() {
|
|
|
20120
20780
|
footer [data-ohw-href-key] [data-ohw-editable][contenteditable],
|
|
20121
20781
|
footer [data-ohw-href-key] [data-ohw-editable][contenteditable] * {
|
|
20122
20782
|
outline: none !important;
|
|
20123
|
-
caret-color: ${
|
|
20783
|
+
caret-color: ${PRIMARY4} !important;
|
|
20124
20784
|
cursor: text !important;
|
|
20125
20785
|
}
|
|
20126
20786
|
[data-ohw-editable][contenteditable]::selection,
|
|
20127
|
-
[data-ohw-editable][contenteditable] *::selection { background: ${
|
|
20787
|
+
[data-ohw-editable][contenteditable] *::selection { background: ${PRIMARY4}59 !important; }
|
|
20128
20788
|
[data-ohw-editable-state], [data-ohw-editable-state] * { pointer-events: none !important; }
|
|
20129
20789
|
[data-ohw-editable-state][data-ohw-active-state] [data-ohw-editable] { pointer-events: auto !important; }
|
|
20130
20790
|
[data-ohw-editable-state][data-ohw-active-state][data-ohw-editable] { pointer-events: auto !important; }
|
|
@@ -21904,10 +22564,7 @@ function OhhwellsBridge() {
|
|
|
21904
22564
|
deselectRef.current();
|
|
21905
22565
|
clearMediaSelectionRef.current();
|
|
21906
22566
|
};
|
|
21907
|
-
const
|
|
21908
|
-
if (e.data?.type !== "ow:ai-apply-tree") return;
|
|
21909
|
-
const payload = e.data.payload;
|
|
21910
|
-
if (!payload || typeof payload.id !== "string" || !isRenderableTree(payload.tree)) return;
|
|
22567
|
+
const applyTreeToLocalState = (payload) => {
|
|
21911
22568
|
clearInteractionChrome();
|
|
21912
22569
|
const previous = aiSectionsRef.current;
|
|
21913
22570
|
const nextState = applyTreeToState(parseAiSectionsState(previous), {
|
|
@@ -21924,7 +22581,17 @@ function OhhwellsBridge() {
|
|
|
21924
22581
|
const top = appliedEl ? appliedEl.getBoundingClientRect().top + window.scrollY : null;
|
|
21925
22582
|
postToParentRef.current({ type: "ow:ai-tree-applied", id: payload.id, previous, value: nextValue, top });
|
|
21926
22583
|
postAiSectionsChanged();
|
|
21927
|
-
|
|
22584
|
+
if (!payload.skipScrollIntoView) {
|
|
22585
|
+
appliedEl?.scrollIntoView({ behavior: "smooth", block: "center" });
|
|
22586
|
+
}
|
|
22587
|
+
return { value: nextValue, top };
|
|
22588
|
+
};
|
|
22589
|
+
applyTreeLocalRef.current = applyTreeToLocalState;
|
|
22590
|
+
const handleAiApplyTree = (e) => {
|
|
22591
|
+
if (e.data?.type !== "ow:ai-apply-tree") return;
|
|
22592
|
+
const payload = e.data.payload;
|
|
22593
|
+
if (!payload || typeof payload.id !== "string" || !isRenderableTree(payload.tree)) return;
|
|
22594
|
+
applyTreeToLocalState(payload);
|
|
21928
22595
|
};
|
|
21929
22596
|
window.addEventListener("message", handleAiApplyTree);
|
|
21930
22597
|
const handleAiDeleteSection = (e) => {
|
|
@@ -22951,7 +23618,7 @@ function OhhwellsBridge() {
|
|
|
22951
23618
|
if (imageShowTimerRef.current) clearTimeout(imageShowTimerRef.current);
|
|
22952
23619
|
};
|
|
22953
23620
|
}, [isEditMode, refreshStateRules]);
|
|
22954
|
-
(0,
|
|
23621
|
+
(0, import_react18.useEffect)(() => {
|
|
22955
23622
|
if (!isEditMode) return;
|
|
22956
23623
|
const THRESHOLD = 10;
|
|
22957
23624
|
const resolveWasSelected = (el) => {
|
|
@@ -23107,7 +23774,7 @@ function OhhwellsBridge() {
|
|
|
23107
23774
|
unlockFooterDragInteraction();
|
|
23108
23775
|
};
|
|
23109
23776
|
}, [isEditMode]);
|
|
23110
|
-
(0,
|
|
23777
|
+
(0, import_react18.useEffect)(() => {
|
|
23111
23778
|
const handler = (e) => {
|
|
23112
23779
|
if (e.data?.type !== "ow:request-schedule-config") return;
|
|
23113
23780
|
const insertAfterVal = e.data.insertAfter;
|
|
@@ -23123,7 +23790,7 @@ function OhhwellsBridge() {
|
|
|
23123
23790
|
window.addEventListener("message", handler);
|
|
23124
23791
|
return () => window.removeEventListener("message", handler);
|
|
23125
23792
|
}, [processConfigRequest]);
|
|
23126
|
-
(0,
|
|
23793
|
+
(0, import_react18.useEffect)(() => {
|
|
23127
23794
|
if (!isEditMode) return;
|
|
23128
23795
|
document.querySelectorAll("[data-ohw-active-state]").forEach((el) => {
|
|
23129
23796
|
el.removeAttribute("data-ohw-active-state");
|
|
@@ -23147,7 +23814,7 @@ function OhhwellsBridge() {
|
|
|
23147
23814
|
postToParent2({
|
|
23148
23815
|
type: "ow:ready",
|
|
23149
23816
|
version: "1",
|
|
23150
|
-
bridgeVersion: "0.1.
|
|
23817
|
+
bridgeVersion: "0.1.118",
|
|
23151
23818
|
path: pathname,
|
|
23152
23819
|
nodes: collectEditableNodes(editContentRef.current),
|
|
23153
23820
|
sections
|
|
@@ -23159,13 +23826,13 @@ function OhhwellsBridge() {
|
|
|
23159
23826
|
clearTimeout(timer);
|
|
23160
23827
|
};
|
|
23161
23828
|
}, [pathname, isEditMode, refreshStateRules, postToParent2]);
|
|
23162
|
-
(0,
|
|
23829
|
+
(0, import_react18.useEffect)(() => {
|
|
23163
23830
|
scrollToHashSectionWhenReady();
|
|
23164
23831
|
const onHashChange = () => scrollToHashSectionWhenReady();
|
|
23165
23832
|
window.addEventListener("hashchange", onHashChange);
|
|
23166
23833
|
return () => window.removeEventListener("hashchange", onHashChange);
|
|
23167
23834
|
}, [pathname]);
|
|
23168
|
-
const handleCommand = (0,
|
|
23835
|
+
const handleCommand = (0, import_react18.useCallback)((cmd) => {
|
|
23169
23836
|
const el = activeElRef.current;
|
|
23170
23837
|
const selBefore = window.getSelection();
|
|
23171
23838
|
let savedOffsets = null;
|
|
@@ -23201,7 +23868,7 @@ function OhhwellsBridge() {
|
|
|
23201
23868
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
23202
23869
|
refreshActiveCommandsRef.current();
|
|
23203
23870
|
}, []);
|
|
23204
|
-
(0,
|
|
23871
|
+
(0, import_react18.useEffect)(() => {
|
|
23205
23872
|
const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
|
|
23206
23873
|
if (!session || !logoSizeDraft) return;
|
|
23207
23874
|
const onPanelAction = (e) => {
|
|
@@ -23239,7 +23906,7 @@ function OhhwellsBridge() {
|
|
|
23239
23906
|
window.addEventListener("message", onPanelAction);
|
|
23240
23907
|
return () => window.removeEventListener("message", onPanelAction);
|
|
23241
23908
|
}, [floatingPanel, logoSizeDraft, editorViewport, persistLogoSizeDraft, closeFloatingPanelAndDeselect]);
|
|
23242
|
-
const handleStateChange = (0,
|
|
23909
|
+
const handleStateChange = (0, import_react18.useCallback)((state) => {
|
|
23243
23910
|
if (!activeStateElRef.current) return;
|
|
23244
23911
|
const el = activeStateElRef.current;
|
|
23245
23912
|
if (state === "Default") {
|
|
@@ -23252,7 +23919,7 @@ function OhhwellsBridge() {
|
|
|
23252
23919
|
}
|
|
23253
23920
|
setToggleState((prev) => prev ? { ...prev, activeState: state } : null);
|
|
23254
23921
|
}, [deactivate]);
|
|
23255
|
-
const reselectAfterLinkPopover = (0,
|
|
23922
|
+
const reselectAfterLinkPopover = (0, import_react18.useCallback)(
|
|
23256
23923
|
(hrefKey) => {
|
|
23257
23924
|
requestAnimationFrame(() => {
|
|
23258
23925
|
const el = resolveHrefKeyElement(hrefKey);
|
|
@@ -23261,7 +23928,7 @@ function OhhwellsBridge() {
|
|
|
23261
23928
|
},
|
|
23262
23929
|
[resolveHrefKeyElement]
|
|
23263
23930
|
);
|
|
23264
|
-
const closeLinkPopover = (0,
|
|
23931
|
+
const closeLinkPopover = (0, import_react18.useCallback)(() => {
|
|
23265
23932
|
const session = linkPopoverSessionRef.current;
|
|
23266
23933
|
addNavAfterAnchorRef.current = null;
|
|
23267
23934
|
setLinkPopover(null);
|
|
@@ -23269,9 +23936,9 @@ function OhhwellsBridge() {
|
|
|
23269
23936
|
reselectAfterLinkPopover(session.key);
|
|
23270
23937
|
}
|
|
23271
23938
|
}, [reselectAfterLinkPopover]);
|
|
23272
|
-
const closeLinkPopoverRef = (0,
|
|
23939
|
+
const closeLinkPopoverRef = (0, import_react18.useRef)(closeLinkPopover);
|
|
23273
23940
|
closeLinkPopoverRef.current = closeLinkPopover;
|
|
23274
|
-
const openLinkPopoverForActive = (0,
|
|
23941
|
+
const openLinkPopoverForActive = (0, import_react18.useCallback)(() => {
|
|
23275
23942
|
const hrefCtx = getHrefKeyFromElement(activeElRef.current);
|
|
23276
23943
|
if (!hrefCtx) return;
|
|
23277
23944
|
bumpLinkPopoverGrace();
|
|
@@ -23282,7 +23949,7 @@ function OhhwellsBridge() {
|
|
|
23282
23949
|
});
|
|
23283
23950
|
deactivate();
|
|
23284
23951
|
}, [deactivate]);
|
|
23285
|
-
const openLinkPopoverForSelected = (0,
|
|
23952
|
+
const openLinkPopoverForSelected = (0, import_react18.useCallback)(() => {
|
|
23286
23953
|
const anchor = selectedElRef.current;
|
|
23287
23954
|
if (!anchor) return;
|
|
23288
23955
|
const key = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -23299,7 +23966,7 @@ function OhhwellsBridge() {
|
|
|
23299
23966
|
});
|
|
23300
23967
|
deselect();
|
|
23301
23968
|
}, [deselect]);
|
|
23302
|
-
const handleSelectParent = (0,
|
|
23969
|
+
const handleSelectParent = (0, import_react18.useCallback)(() => {
|
|
23303
23970
|
const selected = selectedElRef.current;
|
|
23304
23971
|
if (!selected) return;
|
|
23305
23972
|
if (toolbarVariantRef.current === "select-frame") {
|
|
@@ -23326,7 +23993,7 @@ function OhhwellsBridge() {
|
|
|
23326
23993
|
}
|
|
23327
23994
|
deselectRef.current();
|
|
23328
23995
|
}, []);
|
|
23329
|
-
const handleDuplicateSelected = (0,
|
|
23996
|
+
const handleDuplicateSelected = (0, import_react18.useCallback)(() => {
|
|
23330
23997
|
const selected = selectedElRef.current;
|
|
23331
23998
|
if (!selected || !isNavigationItem2(selected)) return;
|
|
23332
23999
|
const hrefKey = selected.getAttribute("data-ohw-href-key");
|
|
@@ -23459,7 +24126,7 @@ function OhhwellsBridge() {
|
|
|
23459
24126
|
});
|
|
23460
24127
|
}
|
|
23461
24128
|
}, [postToParent2]);
|
|
23462
|
-
const runPendingDeleteUndo = (0,
|
|
24129
|
+
const runPendingDeleteUndo = (0, import_react18.useCallback)(() => {
|
|
23463
24130
|
const pending = pendingDeleteUndoRef.current;
|
|
23464
24131
|
if (!pending) return false;
|
|
23465
24132
|
pendingDeleteUndoRef.current = null;
|
|
@@ -23467,7 +24134,7 @@ function OhhwellsBridge() {
|
|
|
23467
24134
|
enforceLinkHrefs();
|
|
23468
24135
|
return true;
|
|
23469
24136
|
}, []);
|
|
23470
|
-
const handleDeleteSelected = (0,
|
|
24137
|
+
const handleDeleteSelected = (0, import_react18.useCallback)(() => {
|
|
23471
24138
|
const selected = selectedElRef.current;
|
|
23472
24139
|
if (!selected) return false;
|
|
23473
24140
|
return deleteSelectedNavFooterItem({
|
|
@@ -23488,7 +24155,7 @@ function OhhwellsBridge() {
|
|
|
23488
24155
|
}, [postToParent2]);
|
|
23489
24156
|
handleDeleteSelectedRef.current = handleDeleteSelected;
|
|
23490
24157
|
runPendingDeleteUndoRef.current = runPendingDeleteUndo;
|
|
23491
|
-
const handleLinkPopoverSubmit = (0,
|
|
24158
|
+
const handleLinkPopoverSubmit = (0, import_react18.useCallback)(
|
|
23492
24159
|
(target) => {
|
|
23493
24160
|
const session = linkPopoverSessionRef.current;
|
|
23494
24161
|
if (!session) return;
|
|
@@ -23554,14 +24221,14 @@ function OhhwellsBridge() {
|
|
|
23554
24221
|
const showEditLink = toolbarShowEditLink;
|
|
23555
24222
|
const currentSections = sectionsByPath[pathname] ?? [];
|
|
23556
24223
|
linkPopoverOpenRef.current = linkPopover !== null;
|
|
23557
|
-
const handleMediaSelect = (0,
|
|
24224
|
+
const handleMediaSelect = (0, import_react18.useCallback)((key) => {
|
|
23558
24225
|
const el = hoveredImageRef.current?.dataset.ohwKey === key ? hoveredImageRef.current : Array.from(document.querySelectorAll(MEDIA_SELECTOR)).find(
|
|
23559
24226
|
(m) => (m.dataset.ohwKey ?? "") === key
|
|
23560
24227
|
) ?? null;
|
|
23561
24228
|
if (!el) return;
|
|
23562
24229
|
selectMediaElementRef.current(el);
|
|
23563
24230
|
}, []);
|
|
23564
|
-
const handleMediaReplace = (0,
|
|
24231
|
+
const handleMediaReplace = (0, import_react18.useCallback)(
|
|
23565
24232
|
(key) => {
|
|
23566
24233
|
postToParent2({
|
|
23567
24234
|
type: "ow:image-pick",
|
|
@@ -23571,13 +24238,13 @@ function OhhwellsBridge() {
|
|
|
23571
24238
|
},
|
|
23572
24239
|
[postToParent2, mediaHover?.elementType, selectedMedia?.elementType]
|
|
23573
24240
|
);
|
|
23574
|
-
const handleEditCarousel = (0,
|
|
24241
|
+
const handleEditCarousel = (0, import_react18.useCallback)(
|
|
23575
24242
|
(key) => {
|
|
23576
24243
|
postToParent2({ type: "ow:carousel-open", key, images: readCarouselValue(key) });
|
|
23577
24244
|
},
|
|
23578
24245
|
[postToParent2]
|
|
23579
24246
|
);
|
|
23580
|
-
const handleMediaFadeOutComplete = (0,
|
|
24247
|
+
const handleMediaFadeOutComplete = (0, import_react18.useCallback)((key) => {
|
|
23581
24248
|
setUploadingRects((prev) => {
|
|
23582
24249
|
if (!(key in prev)) return prev;
|
|
23583
24250
|
const next = { ...prev };
|
|
@@ -23585,7 +24252,7 @@ function OhhwellsBridge() {
|
|
|
23585
24252
|
return next;
|
|
23586
24253
|
});
|
|
23587
24254
|
}, []);
|
|
23588
|
-
const handleVideoSettingsChange = (0,
|
|
24255
|
+
const handleVideoSettingsChange = (0, import_react18.useCallback)(
|
|
23589
24256
|
(key, settings) => {
|
|
23590
24257
|
document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
|
|
23591
24258
|
const video = getVideoEl2(el);
|
|
@@ -23607,14 +24274,14 @@ function OhhwellsBridge() {
|
|
|
23607
24274
|
},
|
|
23608
24275
|
[postToParent2]
|
|
23609
24276
|
);
|
|
23610
|
-
return /* @__PURE__ */ (0,
|
|
23611
|
-
/* @__PURE__ */ (0,
|
|
23612
|
-
/* @__PURE__ */ (0,
|
|
23613
|
-
subdomain && !isEditMode && showBranding && /* @__PURE__ */ (0,
|
|
24277
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
|
|
24278
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { id: "ohw-loader", suppressHydrationWarning: true, style: { ...OHW_LOADER_STYLE, display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(OhwLoaderSpinner, {}) }),
|
|
24279
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("script", { suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: OHW_LOADER_PREHYDRATE_SCRIPT } }),
|
|
24280
|
+
subdomain && !isEditMode && showBranding && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(MadeWithOhhWells, {}),
|
|
23614
24281
|
bridgeRoot ? (0, import_react_dom5.createPortal)(
|
|
23615
|
-
/* @__PURE__ */ (0,
|
|
23616
|
-
/* @__PURE__ */ (0,
|
|
23617
|
-
isEditMode && /* @__PURE__ */ (0,
|
|
24282
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
|
|
24283
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
|
|
24284
|
+
isEditMode && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23618
24285
|
AiSectionOverlay,
|
|
23619
24286
|
{
|
|
23620
24287
|
postToParent: postToParent2,
|
|
@@ -23622,12 +24289,20 @@ function OhhwellsBridge() {
|
|
|
23622
24289
|
onSelectionChange: handleAiSectionSelectionChange
|
|
23623
24290
|
}
|
|
23624
24291
|
),
|
|
23625
|
-
|
|
24292
|
+
isEditMode && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
24293
|
+
AiPricingCardOverlay,
|
|
24294
|
+
{
|
|
24295
|
+
postToParent: postToParent2,
|
|
24296
|
+
aiSectionsRef,
|
|
24297
|
+
applyTreeLocalRef
|
|
24298
|
+
}
|
|
24299
|
+
),
|
|
24300
|
+
isSectionDragging && sectionDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23626
24301
|
"div",
|
|
23627
24302
|
{
|
|
23628
24303
|
className: "pointer-events-none fixed z-2147483646",
|
|
23629
24304
|
style: { left: slot.left, top: slot.y, width: slot.width, height: 3, transform: "translateY(-50%)" },
|
|
23630
|
-
children: /* @__PURE__ */ (0,
|
|
24305
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23631
24306
|
DropIndicator,
|
|
23632
24307
|
{
|
|
23633
24308
|
direction: "horizontal",
|
|
@@ -23638,7 +24313,7 @@ function OhhwellsBridge() {
|
|
|
23638
24313
|
},
|
|
23639
24314
|
`section-drop-${slot.insertIndex}-${i}`
|
|
23640
24315
|
)),
|
|
23641
|
-
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0,
|
|
24316
|
+
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23642
24317
|
MediaOverlay,
|
|
23643
24318
|
{
|
|
23644
24319
|
hover: { key, rect, elementType: "image", isDragOver: false, hasTextOverlap: false },
|
|
@@ -23649,7 +24324,7 @@ function OhhwellsBridge() {
|
|
|
23649
24324
|
},
|
|
23650
24325
|
`uploading-${key}`
|
|
23651
24326
|
)),
|
|
23652
|
-
mediaHover && !(mediaHover.key in uploadingRects) && mediaHover.key !== selectedMedia?.key && /* @__PURE__ */ (0,
|
|
24327
|
+
mediaHover && !(mediaHover.key in uploadingRects) && mediaHover.key !== selectedMedia?.key && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23653
24328
|
MediaOverlay,
|
|
23654
24329
|
{
|
|
23655
24330
|
hover: mediaHover,
|
|
@@ -23660,7 +24335,7 @@ function OhhwellsBridge() {
|
|
|
23660
24335
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
23661
24336
|
}
|
|
23662
24337
|
),
|
|
23663
|
-
selectedMedia && !(selectedMedia.key in uploadingRects) && !linkPopover && /* @__PURE__ */ (0,
|
|
24338
|
+
selectedMedia && !(selectedMedia.key in uploadingRects) && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23664
24339
|
MediaOverlay,
|
|
23665
24340
|
{
|
|
23666
24341
|
hover: selectedMedia,
|
|
@@ -23672,7 +24347,7 @@ function OhhwellsBridge() {
|
|
|
23672
24347
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
23673
24348
|
}
|
|
23674
24349
|
),
|
|
23675
|
-
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0,
|
|
24350
|
+
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23676
24351
|
CarouselOverlay,
|
|
23677
24352
|
{
|
|
23678
24353
|
hover: carouselHover,
|
|
@@ -23680,10 +24355,10 @@ function OhhwellsBridge() {
|
|
|
23680
24355
|
cueOnly: !!carouselHover.fullBleedSectionId && carouselHover.fullBleedSectionId !== selectedAiSectionId
|
|
23681
24356
|
}
|
|
23682
24357
|
),
|
|
23683
|
-
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0,
|
|
23684
|
-
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0,
|
|
23685
|
-
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */ (0,
|
|
23686
|
-
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
24358
|
+
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
|
|
24359
|
+
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ItemInteractionLayer, { rect, state: "sibling-hint" }, `sibling-hint-${i}`)),
|
|
24360
|
+
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ItemInteractionLayer, { rect: draggedItemRect, state: "dragging" }),
|
|
24361
|
+
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23687
24362
|
"div",
|
|
23688
24363
|
{
|
|
23689
24364
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -23693,7 +24368,7 @@ function OhhwellsBridge() {
|
|
|
23693
24368
|
width: slot.width,
|
|
23694
24369
|
height: slot.height
|
|
23695
24370
|
},
|
|
23696
|
-
children: /* @__PURE__ */ (0,
|
|
24371
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23697
24372
|
DropIndicator,
|
|
23698
24373
|
{
|
|
23699
24374
|
direction: slot.direction,
|
|
@@ -23704,7 +24379,7 @@ function OhhwellsBridge() {
|
|
|
23704
24379
|
},
|
|
23705
24380
|
`footer-drop-${slot.direction}-${slot.columnIndex}-${slot.insertIndex}-${i}`
|
|
23706
24381
|
)),
|
|
23707
|
-
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
24382
|
+
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23708
24383
|
"div",
|
|
23709
24384
|
{
|
|
23710
24385
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -23714,7 +24389,7 @@ function OhhwellsBridge() {
|
|
|
23714
24389
|
width: slot.width,
|
|
23715
24390
|
height: slot.height
|
|
23716
24391
|
},
|
|
23717
|
-
children: /* @__PURE__ */ (0,
|
|
24392
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23718
24393
|
DropIndicator,
|
|
23719
24394
|
{
|
|
23720
24395
|
direction: slot.direction,
|
|
@@ -23725,10 +24400,10 @@ function OhhwellsBridge() {
|
|
|
23725
24400
|
},
|
|
23726
24401
|
`nav-drop-${slot.direction}-${slot.parentId ?? "root"}-${slot.insertIndex}-${i}`
|
|
23727
24402
|
)),
|
|
23728
|
-
hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ (0,
|
|
23729
|
-
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0,
|
|
23730
|
-
hoveredTextRect && !hoveredNavContainerRect && !hoveredItemRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0,
|
|
23731
|
-
formPickRect && !isItemDragging && /* @__PURE__ */ (0,
|
|
24403
|
+
hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
|
|
24404
|
+
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
|
|
24405
|
+
hoveredTextRect && !hoveredNavContainerRect && !hoveredItemRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ItemInteractionLayer, { rect: hoveredTextRect, state: "hover" }),
|
|
24406
|
+
formPickRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23732
24407
|
ItemInteractionLayer,
|
|
23733
24408
|
{
|
|
23734
24409
|
rect: formPickRect,
|
|
@@ -23736,13 +24411,13 @@ function OhhwellsBridge() {
|
|
|
23736
24411
|
itemDragSurface: false,
|
|
23737
24412
|
toolbarAlign: "left",
|
|
23738
24413
|
chromeGap: 24,
|
|
23739
|
-
toolbar: fieldPickRect ? void 0 : /* @__PURE__ */ (0,
|
|
24414
|
+
toolbar: fieldPickRect ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
23740
24415
|
"div",
|
|
23741
24416
|
{
|
|
23742
24417
|
"data-ohw-form-toolbar": "",
|
|
23743
24418
|
className: "pointer-events-auto flex items-center gap-0.5 whitespace-nowrap rounded-lg border border-border bg-background p-1 shadow-md",
|
|
23744
24419
|
children: [
|
|
23745
|
-
/* @__PURE__ */ (0,
|
|
24420
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23746
24421
|
"button",
|
|
23747
24422
|
{
|
|
23748
24423
|
type: "button",
|
|
@@ -23750,11 +24425,11 @@ function OhhwellsBridge() {
|
|
|
23750
24425
|
className: "flex h-7 w-7 items-center justify-center rounded-md text-foreground transition-colors hover:bg-muted/80",
|
|
23751
24426
|
onClick: () => setFieldTypePickerOpen((open) => !open),
|
|
23752
24427
|
"data-ohw-add-field": "",
|
|
23753
|
-
children: /* @__PURE__ */ (0,
|
|
24428
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.Plus, { size: 15, "aria-hidden": true })
|
|
23754
24429
|
}
|
|
23755
24430
|
),
|
|
23756
|
-
/* @__PURE__ */ (0,
|
|
23757
|
-
/* @__PURE__ */ (0,
|
|
24431
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border" }),
|
|
24432
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
23758
24433
|
"button",
|
|
23759
24434
|
{
|
|
23760
24435
|
type: "button",
|
|
@@ -23770,11 +24445,11 @@ function OhhwellsBridge() {
|
|
|
23770
24445
|
});
|
|
23771
24446
|
},
|
|
23772
24447
|
children: [
|
|
23773
|
-
/* @__PURE__ */ (0,
|
|
24448
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.Settings, { size: 14, "aria-hidden": true }),
|
|
23774
24449
|
"Form settings",
|
|
23775
24450
|
formPickCount ? (
|
|
23776
24451
|
// Counter pill, per the design — not a text suffix.
|
|
23777
|
-
/* @__PURE__ */ (0,
|
|
24452
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23778
24453
|
"span",
|
|
23779
24454
|
{
|
|
23780
24455
|
"data-ohw-form-count": "",
|
|
@@ -23786,8 +24461,8 @@ function OhhwellsBridge() {
|
|
|
23786
24461
|
]
|
|
23787
24462
|
}
|
|
23788
24463
|
),
|
|
23789
|
-
/* @__PURE__ */ (0,
|
|
23790
|
-
/* @__PURE__ */ (0,
|
|
24464
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border" }),
|
|
24465
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex items-center rounded-md bg-muted/70 p-0.5", children: ["default", "success"].map((state) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23791
24466
|
"button",
|
|
23792
24467
|
{
|
|
23793
24468
|
type: "button",
|
|
@@ -23818,7 +24493,7 @@ function OhhwellsBridge() {
|
|
|
23818
24493
|
)
|
|
23819
24494
|
}
|
|
23820
24495
|
),
|
|
23821
|
-
formHoverRect && !isItemDragging && /* @__PURE__ */ (0,
|
|
24496
|
+
formHoverRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23822
24497
|
ItemInteractionLayer,
|
|
23823
24498
|
{
|
|
23824
24499
|
rect: formHoverRect,
|
|
@@ -23826,7 +24501,7 @@ function OhhwellsBridge() {
|
|
|
23826
24501
|
chromeGap: formHoverElRef.current && getFieldWrapper(formHoverElRef.current) ? 8 : 24
|
|
23827
24502
|
}
|
|
23828
24503
|
),
|
|
23829
|
-
fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0,
|
|
24504
|
+
fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23830
24505
|
ItemInteractionLayer,
|
|
23831
24506
|
{
|
|
23832
24507
|
rect: fieldPickRect,
|
|
@@ -23838,7 +24513,7 @@ function OhhwellsBridge() {
|
|
|
23838
24513
|
dragHandleLabel: "Reorder field",
|
|
23839
24514
|
onDragHandleDragStart: handleFieldDragStart,
|
|
23840
24515
|
onDragHandleDragEnd: handleFieldDragEnd,
|
|
23841
|
-
toolbar: /* @__PURE__ */ (0,
|
|
24516
|
+
toolbar: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23842
24517
|
FormFieldToolbar,
|
|
23843
24518
|
{
|
|
23844
24519
|
type: fieldPickState.type,
|
|
@@ -23851,12 +24526,12 @@ function OhhwellsBridge() {
|
|
|
23851
24526
|
)
|
|
23852
24527
|
}
|
|
23853
24528
|
),
|
|
23854
|
-
fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
24529
|
+
fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23855
24530
|
"div",
|
|
23856
24531
|
{
|
|
23857
24532
|
className: "pointer-events-none fixed z-[2147483644]",
|
|
23858
24533
|
style: { top: slot.top, left: slot.left, width: slot.width },
|
|
23859
|
-
children: /* @__PURE__ */ (0,
|
|
24534
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23860
24535
|
DropIndicator,
|
|
23861
24536
|
{
|
|
23862
24537
|
direction: "horizontal",
|
|
@@ -23869,7 +24544,7 @@ function OhhwellsBridge() {
|
|
|
23869
24544
|
)) : null,
|
|
23870
24545
|
fieldTypePickerOpen && formPickRect ? (() => {
|
|
23871
24546
|
const toolbar = document.querySelector("[data-ohw-form-toolbar]")?.getBoundingClientRect();
|
|
23872
|
-
return /* @__PURE__ */ (0,
|
|
24547
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23873
24548
|
"div",
|
|
23874
24549
|
{
|
|
23875
24550
|
className: "pointer-events-none fixed z-[2147483645]",
|
|
@@ -23877,12 +24552,12 @@ function OhhwellsBridge() {
|
|
|
23877
24552
|
top: toolbar ? toolbar.bottom + 6 : formPickRect.top + 16,
|
|
23878
24553
|
left: toolbar ? toolbar.left : formPickRect.left + 24
|
|
23879
24554
|
},
|
|
23880
|
-
children: /* @__PURE__ */ (0,
|
|
24555
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(FieldTypePicker, { onPick: handleAddField })
|
|
23881
24556
|
}
|
|
23882
24557
|
);
|
|
23883
24558
|
})() : null,
|
|
23884
|
-
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ (0,
|
|
23885
|
-
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0,
|
|
24559
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(NavbarContainerChrome, { rect: toolbarRect, onAdd: handleAddTopLevelNavItem }),
|
|
24560
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23886
24561
|
FooterContainerChrome,
|
|
23887
24562
|
{
|
|
23888
24563
|
rect: toolbarRect,
|
|
@@ -23890,7 +24565,7 @@ function OhhwellsBridge() {
|
|
|
23890
24565
|
addDisabled: !canAddFooterColumn()
|
|
23891
24566
|
}
|
|
23892
24567
|
),
|
|
23893
|
-
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */ (0,
|
|
24568
|
+
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23894
24569
|
ItemInteractionLayer,
|
|
23895
24570
|
{
|
|
23896
24571
|
rect: isItemDragging && draggedItemRect && (footerDragRef.current?.wasSelected || navDragRef.current?.wasSelected) ? draggedItemRect : toolbarRect,
|
|
@@ -23906,7 +24581,7 @@ function OhhwellsBridge() {
|
|
|
23906
24581
|
onItemPointerDown: toolbarVariant === "logo" ? void 0 : handleItemChromePointerDown,
|
|
23907
24582
|
onItemClick: toolbarVariant === "logo" ? void 0 : handleItemChromeClick,
|
|
23908
24583
|
itemDragSurface: toolbarVariant !== "logo" && !isFooterFrameSelection && !selectedIsSocialsRow,
|
|
23909
|
-
toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */ (0,
|
|
24584
|
+
toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23910
24585
|
ItemActionToolbar,
|
|
23911
24586
|
{
|
|
23912
24587
|
onEditLink: openLinkPopoverForSelected,
|
|
@@ -23950,8 +24625,8 @@ function OhhwellsBridge() {
|
|
|
23950
24625
|
) : void 0
|
|
23951
24626
|
}
|
|
23952
24627
|
),
|
|
23953
|
-
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && !isRectOutsideClip(toolbarRect, getIframeVisibleClip(parentScrollRef.current)) && /* @__PURE__ */ (0,
|
|
23954
|
-
/* @__PURE__ */ (0,
|
|
24628
|
+
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && !isRectOutsideClip(toolbarRect, getIframeVisibleClip(parentScrollRef.current)) && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
|
|
24629
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23955
24630
|
EditGlowChrome,
|
|
23956
24631
|
{
|
|
23957
24632
|
rect: toolbarRect,
|
|
@@ -23961,7 +24636,7 @@ function OhhwellsBridge() {
|
|
|
23961
24636
|
hideHandle: isItemDragging
|
|
23962
24637
|
}
|
|
23963
24638
|
),
|
|
23964
|
-
/* @__PURE__ */ (0,
|
|
24639
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23965
24640
|
FloatingToolbar,
|
|
23966
24641
|
{
|
|
23967
24642
|
rect: toolbarRect,
|
|
@@ -23974,7 +24649,7 @@ function OhhwellsBridge() {
|
|
|
23974
24649
|
}
|
|
23975
24650
|
)
|
|
23976
24651
|
] }),
|
|
23977
|
-
maxBadge && /* @__PURE__ */ (0,
|
|
24652
|
+
maxBadge && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
23978
24653
|
"div",
|
|
23979
24654
|
{
|
|
23980
24655
|
"data-ohw-max-badge": "",
|
|
@@ -24000,7 +24675,7 @@ function OhhwellsBridge() {
|
|
|
24000
24675
|
]
|
|
24001
24676
|
}
|
|
24002
24677
|
),
|
|
24003
|
-
toggleState && !linkPopover && /* @__PURE__ */ (0,
|
|
24678
|
+
toggleState && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
24004
24679
|
StateToggle,
|
|
24005
24680
|
{
|
|
24006
24681
|
rect: toggleState.rect,
|
|
@@ -24009,15 +24684,15 @@ function OhhwellsBridge() {
|
|
|
24009
24684
|
onStateChange: handleStateChange
|
|
24010
24685
|
}
|
|
24011
24686
|
),
|
|
24012
|
-
sectionGap && !linkPopover && /* @__PURE__ */ (0,
|
|
24687
|
+
sectionGap && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
24013
24688
|
"div",
|
|
24014
24689
|
{
|
|
24015
24690
|
"data-ohw-section-insert-line": "",
|
|
24016
24691
|
className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
|
|
24017
24692
|
style: { top: sectionGap.y, transform: "translateY(-50%)" },
|
|
24018
24693
|
children: [
|
|
24019
|
-
/* @__PURE__ */ (0,
|
|
24020
|
-
/* @__PURE__ */ (0,
|
|
24694
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } }),
|
|
24695
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
24021
24696
|
Badge,
|
|
24022
24697
|
{
|
|
24023
24698
|
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",
|
|
@@ -24034,11 +24709,11 @@ function OhhwellsBridge() {
|
|
|
24034
24709
|
children: "Add Section"
|
|
24035
24710
|
}
|
|
24036
24711
|
),
|
|
24037
|
-
/* @__PURE__ */ (0,
|
|
24712
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } })
|
|
24038
24713
|
]
|
|
24039
24714
|
}
|
|
24040
24715
|
),
|
|
24041
|
-
linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0,
|
|
24716
|
+
linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
24042
24717
|
LinkPopover,
|
|
24043
24718
|
{
|
|
24044
24719
|
panelRef: linkPopoverPanelRef,
|
|
@@ -24055,7 +24730,7 @@ function OhhwellsBridge() {
|
|
|
24055
24730
|
},
|
|
24056
24731
|
linkPopover.key
|
|
24057
24732
|
) : null,
|
|
24058
|
-
floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */ (0,
|
|
24733
|
+
floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
24059
24734
|
FloatingPanel,
|
|
24060
24735
|
{
|
|
24061
24736
|
open: true,
|
|
@@ -24065,7 +24740,7 @@ function OhhwellsBridge() {
|
|
|
24065
24740
|
onPositionChange: setFloatingPanelPos,
|
|
24066
24741
|
parentScroll: parentScrollSnap ?? parentScrollRef.current,
|
|
24067
24742
|
onClose: closeFloatingPanelOnly,
|
|
24068
|
-
children: /* @__PURE__ */ (0,
|
|
24743
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
24069
24744
|
SocialsDisplayPanel,
|
|
24070
24745
|
{
|
|
24071
24746
|
display: socialsDisplayFor(floatingPanel.row, editContentRef.current),
|