@ohhwells/bridge 0.1.118 → 0.1.119
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +1281 -643
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1253 -615
- package/dist/index.js.map +1 -1
- package/dist/styles.css +4 -0
- package/package.json +1 -1
package/dist/index.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,8 +18234,8 @@ 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
|
);
|
|
@@ -17659,8 +18281,8 @@ function OhhwellsBridge() {
|
|
|
17659
18281
|
const router = (0, import_navigation3.useRouter)();
|
|
17660
18282
|
const searchParams = (0, import_navigation3.useSearchParams)();
|
|
17661
18283
|
const isEditMode = isEditSessionActive();
|
|
17662
|
-
const [bridgeRoot, setBridgeRoot] = (0,
|
|
17663
|
-
(0,
|
|
18284
|
+
const [bridgeRoot, setBridgeRoot] = (0, import_react18.useState)(null);
|
|
18285
|
+
(0, import_react18.useEffect)(() => {
|
|
17664
18286
|
const figtreeFontId = "ohw-figtree-font";
|
|
17665
18287
|
if (!document.getElementById(figtreeFontId)) {
|
|
17666
18288
|
const preconnect1 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.googleapis.com" });
|
|
@@ -17686,8 +18308,8 @@ function OhhwellsBridge() {
|
|
|
17686
18308
|
};
|
|
17687
18309
|
}, []);
|
|
17688
18310
|
const subdomainFromQuery = searchParams.get("subdomain");
|
|
17689
|
-
const [subdomain, setSubdomain] = (0,
|
|
17690
|
-
(0,
|
|
18311
|
+
const [subdomain, setSubdomain] = (0, import_react18.useState)(() => resolveSubdomain(subdomainFromQuery));
|
|
18312
|
+
(0, import_react18.useLayoutEffect)(() => {
|
|
17691
18313
|
const next = resolveSubdomain(subdomainFromQuery);
|
|
17692
18314
|
if (next !== subdomain) setSubdomain(next);
|
|
17693
18315
|
if (next) return;
|
|
@@ -17699,7 +18321,7 @@ function OhhwellsBridge() {
|
|
|
17699
18321
|
}, 0);
|
|
17700
18322
|
return () => window.clearTimeout(t);
|
|
17701
18323
|
}, [subdomainFromQuery, subdomain]);
|
|
17702
|
-
(0,
|
|
18324
|
+
(0, import_react18.useEffect)(() => {
|
|
17703
18325
|
if (!subdomainFromQuery || typeof window === "undefined") return;
|
|
17704
18326
|
const url = new URL(window.location.href);
|
|
17705
18327
|
if (!url.searchParams.has("subdomain")) return;
|
|
@@ -17708,45 +18330,45 @@ function OhhwellsBridge() {
|
|
|
17708
18330
|
}, [subdomainFromQuery]);
|
|
17709
18331
|
useLinkHrefGuardian(pathname, subdomain, isEditMode);
|
|
17710
18332
|
useSavedLinkNavigation(isEditMode);
|
|
17711
|
-
const postToParent2 = (0,
|
|
18333
|
+
const postToParent2 = (0, import_react18.useCallback)((data) => {
|
|
17712
18334
|
if (typeof window !== "undefined" && window.parent !== window) {
|
|
17713
18335
|
window.parent.postMessage(data, "*");
|
|
17714
18336
|
}
|
|
17715
18337
|
}, []);
|
|
17716
|
-
const [fetchState, setFetchState] = (0,
|
|
17717
|
-
const [showBranding, setShowBranding] = (0,
|
|
17718
|
-
const autoSaveTimers = (0,
|
|
17719
|
-
const activeElRef = (0,
|
|
17720
|
-
const pointerHeldRef = (0,
|
|
17721
|
-
const selectedElRef = (0,
|
|
17722
|
-
const selectedHrefKeyRef = (0,
|
|
17723
|
-
const selectedFooterColAttrRef = (0,
|
|
17724
|
-
const originalContentRef = (0,
|
|
17725
|
-
const activeStateElRef = (0,
|
|
17726
|
-
const parentScrollRef = (0,
|
|
17727
|
-
const visibleViewportRef = (0,
|
|
17728
|
-
const [dialogPortalContainer, setDialogPortalContainer] = (0,
|
|
17729
|
-
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) => {
|
|
17730
18352
|
visibleViewportRef.current = node;
|
|
17731
18353
|
setDialogPortalContainer(node);
|
|
17732
18354
|
if (node) applyVisibleViewport(node, parentScrollRef.current);
|
|
17733
18355
|
}, []);
|
|
17734
|
-
const toolbarElRef = (0,
|
|
17735
|
-
const glowElRef = (0,
|
|
17736
|
-
const hoveredImageRef = (0,
|
|
17737
|
-
const hoveredImageHasTextOverlapRef = (0,
|
|
17738
|
-
const dragOverElRef = (0,
|
|
17739
|
-
const [mediaHover, setMediaHover] = (0,
|
|
17740
|
-
const [selectedAiSectionId, setSelectedAiSectionId] = (0,
|
|
17741
|
-
const selectedAiSectionIdRef = (0,
|
|
17742
|
-
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) => {
|
|
17743
18365
|
selectedAiSectionIdRef.current = id;
|
|
17744
18366
|
setSelectedAiSectionId(id);
|
|
17745
18367
|
}, []);
|
|
17746
|
-
const [selectedMedia, setSelectedMedia] = (0,
|
|
17747
|
-
const selectedMediaElRef = (0,
|
|
17748
|
-
const mediaKeyDropTokenRef = (0,
|
|
17749
|
-
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)(() => {
|
|
17750
18372
|
const prev = selectedMediaElRef.current;
|
|
17751
18373
|
selectedMediaElRef.current = null;
|
|
17752
18374
|
setSelectedMedia(null);
|
|
@@ -17771,9 +18393,9 @@ function OhhwellsBridge() {
|
|
|
17771
18393
|
window.postMessage({ type: "ow:media-key-drop", token }, "*");
|
|
17772
18394
|
}
|
|
17773
18395
|
}, []);
|
|
17774
|
-
const clearMediaSelectionRef = (0,
|
|
18396
|
+
const clearMediaSelectionRef = (0, import_react18.useRef)(clearMediaSelection);
|
|
17775
18397
|
clearMediaSelectionRef.current = clearMediaSelection;
|
|
17776
|
-
const selectMediaElement = (0,
|
|
18398
|
+
const selectMediaElement = (0, import_react18.useCallback)((el) => {
|
|
17777
18399
|
const r2 = el.getBoundingClientRect();
|
|
17778
18400
|
const video = el.dataset.ohwEditable === "video" ? el.querySelector("video") : null;
|
|
17779
18401
|
selectedMediaElRef.current = el;
|
|
@@ -17797,9 +18419,9 @@ function OhhwellsBridge() {
|
|
|
17797
18419
|
keyLabel: el.dataset.ohwEditable === "video" ? "Video" : el.dataset.ohwEditable === "bg-image" ? "Background" : "Image"
|
|
17798
18420
|
});
|
|
17799
18421
|
}, []);
|
|
17800
|
-
const selectMediaElementRef = (0,
|
|
18422
|
+
const selectMediaElementRef = (0, import_react18.useRef)(selectMediaElement);
|
|
17801
18423
|
selectMediaElementRef.current = selectMediaElement;
|
|
17802
|
-
(0,
|
|
18424
|
+
(0, import_react18.useEffect)(() => {
|
|
17803
18425
|
if (!selectedMedia) return;
|
|
17804
18426
|
const update = () => {
|
|
17805
18427
|
const el = selectedMediaElRef.current;
|
|
@@ -17819,54 +18441,55 @@ function OhhwellsBridge() {
|
|
|
17819
18441
|
window.removeEventListener("resize", update);
|
|
17820
18442
|
};
|
|
17821
18443
|
}, [selectedMedia !== null]);
|
|
17822
|
-
const [carouselHover, setCarouselHover] = (0,
|
|
17823
|
-
const [uploadingRects, setUploadingRects] = (0,
|
|
17824
|
-
const hoveredGapRef = (0,
|
|
17825
|
-
const imageUnhoverTimerRef = (0,
|
|
17826
|
-
const imageShowTimerRef = (0,
|
|
17827
|
-
const editStylesRef = (0,
|
|
17828
|
-
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)(() => {
|
|
17829
18451
|
});
|
|
17830
|
-
const deactivateRef = (0,
|
|
18452
|
+
const deactivateRef = (0, import_react18.useRef)(() => {
|
|
17831
18453
|
});
|
|
17832
|
-
const selectRef = (0,
|
|
18454
|
+
const selectRef = (0, import_react18.useRef)(() => {
|
|
17833
18455
|
});
|
|
17834
|
-
const selectFrameRef = (0,
|
|
18456
|
+
const selectFrameRef = (0, import_react18.useRef)(() => {
|
|
17835
18457
|
});
|
|
17836
|
-
const selectLogoRef = (0,
|
|
18458
|
+
const selectLogoRef = (0, import_react18.useRef)(() => {
|
|
17837
18459
|
});
|
|
17838
|
-
const openLogoSizePanelRef = (0,
|
|
18460
|
+
const openLogoSizePanelRef = (0, import_react18.useRef)(() => {
|
|
17839
18461
|
});
|
|
17840
|
-
const deselectRef = (0,
|
|
18462
|
+
const deselectRef = (0, import_react18.useRef)(() => {
|
|
17841
18463
|
});
|
|
17842
|
-
const closeFloatingPanelOnlyRef = (0,
|
|
18464
|
+
const closeFloatingPanelOnlyRef = (0, import_react18.useRef)(() => {
|
|
17843
18465
|
});
|
|
17844
|
-
const reselectNavigationItemRef = (0,
|
|
18466
|
+
const reselectNavigationItemRef = (0, import_react18.useRef)(() => {
|
|
17845
18467
|
});
|
|
17846
|
-
const commitNavigationTextEditRef = (0,
|
|
18468
|
+
const commitNavigationTextEditRef = (0, import_react18.useRef)(() => {
|
|
17847
18469
|
});
|
|
17848
|
-
const handleDeleteSelectedRef = (0,
|
|
17849
|
-
const runPendingDeleteUndoRef = (0,
|
|
17850
|
-
const isFooterFrameSelectionRef = (0,
|
|
17851
|
-
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)(() => {
|
|
17852
18474
|
});
|
|
17853
|
-
const postToParentRef = (0,
|
|
18475
|
+
const postToParentRef = (0, import_react18.useRef)(postToParent2);
|
|
17854
18476
|
postToParentRef.current = postToParent2;
|
|
17855
|
-
const aiSectionApiRef = (0,
|
|
17856
|
-
const
|
|
17857
|
-
const
|
|
17858
|
-
const
|
|
17859
|
-
const [
|
|
17860
|
-
const
|
|
17861
|
-
const
|
|
17862
|
-
const [
|
|
17863
|
-
const [
|
|
17864
|
-
const
|
|
17865
|
-
const
|
|
17866
|
-
const
|
|
17867
|
-
const
|
|
17868
|
-
const [
|
|
17869
|
-
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)(() => {
|
|
17870
18493
|
const form = formPickElRef.current;
|
|
17871
18494
|
const editing = fieldPickElRef.current;
|
|
17872
18495
|
if (commitPlaceholderEdit(editing) && editing) {
|
|
@@ -17886,7 +18509,7 @@ function OhhwellsBridge() {
|
|
|
17886
18509
|
formPickElRef.current = null;
|
|
17887
18510
|
setFormPickRect(null);
|
|
17888
18511
|
}, []);
|
|
17889
|
-
const clearFieldPick = (0,
|
|
18512
|
+
const clearFieldPick = (0, import_react18.useCallback)(() => {
|
|
17890
18513
|
const wrapper = fieldPickElRef.current;
|
|
17891
18514
|
if (commitPlaceholderEdit(wrapper) && wrapper) {
|
|
17892
18515
|
const form = wrapper.closest('[data-ohw-editable="form"]');
|
|
@@ -17896,9 +18519,9 @@ function OhhwellsBridge() {
|
|
|
17896
18519
|
setFieldPickRect(null);
|
|
17897
18520
|
setFieldPickState(null);
|
|
17898
18521
|
}, []);
|
|
17899
|
-
const persistFieldsRef = (0,
|
|
18522
|
+
const persistFieldsRef = (0, import_react18.useRef)(() => {
|
|
17900
18523
|
});
|
|
17901
|
-
const persistFields = (0,
|
|
18524
|
+
const persistFields = (0, import_react18.useCallback)(
|
|
17902
18525
|
(form) => {
|
|
17903
18526
|
const key = formKeyOf(form);
|
|
17904
18527
|
if (!key) return;
|
|
@@ -17909,7 +18532,7 @@ function OhhwellsBridge() {
|
|
|
17909
18532
|
[]
|
|
17910
18533
|
);
|
|
17911
18534
|
persistFieldsRef.current = persistFields;
|
|
17912
|
-
const selectField = (0,
|
|
18535
|
+
const selectField = (0, import_react18.useCallback)((wrapper) => {
|
|
17913
18536
|
if (fieldPickElRef.current && fieldPickElRef.current !== wrapper) {
|
|
17914
18537
|
commitPlaceholderEdit(fieldPickElRef.current);
|
|
17915
18538
|
}
|
|
@@ -17922,7 +18545,7 @@ function OhhwellsBridge() {
|
|
|
17922
18545
|
setFieldPickState({ type: fieldTypeOf(wrapper), required: isFieldRequired(wrapper) });
|
|
17923
18546
|
setFieldTypePickerOpen(false);
|
|
17924
18547
|
}, []);
|
|
17925
|
-
const withSelectedField = (0,
|
|
18548
|
+
const withSelectedField = (0, import_react18.useCallback)(
|
|
17926
18549
|
(run) => {
|
|
17927
18550
|
const wrapper = fieldPickElRef.current;
|
|
17928
18551
|
const form = formPickElRef.current;
|
|
@@ -17935,28 +18558,28 @@ function OhhwellsBridge() {
|
|
|
17935
18558
|
},
|
|
17936
18559
|
[persistFields]
|
|
17937
18560
|
);
|
|
17938
|
-
const handleFieldTypeChange = (0,
|
|
18561
|
+
const handleFieldTypeChange = (0, import_react18.useCallback)(
|
|
17939
18562
|
(type) => withSelectedField((_form, wrapper) => {
|
|
17940
18563
|
applyFieldType(wrapper, type);
|
|
17941
18564
|
selectField(wrapper);
|
|
17942
18565
|
}),
|
|
17943
18566
|
[selectField, withSelectedField]
|
|
17944
18567
|
);
|
|
17945
|
-
const handleFieldRequiredToggle = (0,
|
|
18568
|
+
const handleFieldRequiredToggle = (0, import_react18.useCallback)(
|
|
17946
18569
|
() => withSelectedField((_form, wrapper) => {
|
|
17947
18570
|
setFieldRequired(wrapper, !isFieldRequired(wrapper));
|
|
17948
18571
|
selectField(wrapper);
|
|
17949
18572
|
}),
|
|
17950
18573
|
[selectField, withSelectedField]
|
|
17951
18574
|
);
|
|
17952
|
-
const handleFieldDuplicate = (0,
|
|
18575
|
+
const handleFieldDuplicate = (0, import_react18.useCallback)(
|
|
17953
18576
|
() => withSelectedField((form, wrapper) => {
|
|
17954
18577
|
const copy = duplicateField(form, wrapper);
|
|
17955
18578
|
selectField(copy);
|
|
17956
18579
|
}),
|
|
17957
18580
|
[selectField, withSelectedField]
|
|
17958
18581
|
);
|
|
17959
|
-
const handleFieldDelete = (0,
|
|
18582
|
+
const handleFieldDelete = (0, import_react18.useCallback)(
|
|
17960
18583
|
() => withSelectedField((_form, wrapper) => {
|
|
17961
18584
|
removeField(wrapper);
|
|
17962
18585
|
clearFieldPick();
|
|
@@ -17964,7 +18587,7 @@ function OhhwellsBridge() {
|
|
|
17964
18587
|
}),
|
|
17965
18588
|
[clearFieldPick, withSelectedField]
|
|
17966
18589
|
);
|
|
17967
|
-
const handleAddField = (0,
|
|
18590
|
+
const handleAddField = (0, import_react18.useCallback)(
|
|
17968
18591
|
(type) => {
|
|
17969
18592
|
const form = formPickElRef.current;
|
|
17970
18593
|
if (!form) return;
|
|
@@ -17980,8 +18603,8 @@ function OhhwellsBridge() {
|
|
|
17980
18603
|
},
|
|
17981
18604
|
[persistFields, selectField]
|
|
17982
18605
|
);
|
|
17983
|
-
const fieldDragRef = (0,
|
|
17984
|
-
const buildFieldDropSlots = (0,
|
|
18606
|
+
const fieldDragRef = (0, import_react18.useRef)(null);
|
|
18607
|
+
const buildFieldDropSlots = (0, import_react18.useCallback)((form, draggedKey) => {
|
|
17985
18608
|
const others = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== draggedKey);
|
|
17986
18609
|
const slots = others.map((el) => {
|
|
17987
18610
|
const rect = el.getBoundingClientRect();
|
|
@@ -17994,7 +18617,7 @@ function OhhwellsBridge() {
|
|
|
17994
18617
|
}
|
|
17995
18618
|
return slots;
|
|
17996
18619
|
}, []);
|
|
17997
|
-
const handleFieldDragStart = (0,
|
|
18620
|
+
const handleFieldDragStart = (0, import_react18.useCallback)(() => {
|
|
17998
18621
|
const wrapper = fieldPickElRef.current;
|
|
17999
18622
|
const form = formPickElRef.current;
|
|
18000
18623
|
if (!wrapper || !form) return;
|
|
@@ -18003,18 +18626,18 @@ function OhhwellsBridge() {
|
|
|
18003
18626
|
setFieldDragging(true);
|
|
18004
18627
|
setFieldDropSlots(buildFieldDropSlots(form, key));
|
|
18005
18628
|
}, [buildFieldDropSlots]);
|
|
18006
|
-
const handleFieldDragEnd = (0,
|
|
18629
|
+
const handleFieldDragEnd = (0, import_react18.useCallback)(() => {
|
|
18007
18630
|
fieldDragRef.current = null;
|
|
18008
18631
|
setFieldDropIndex(null);
|
|
18009
18632
|
setFieldDropSlots([]);
|
|
18010
18633
|
setFieldDragging(false);
|
|
18011
18634
|
}, []);
|
|
18012
|
-
const [fieldDropIndex, setFieldDropIndex] = (0,
|
|
18013
|
-
const [fieldDropSlots, setFieldDropSlots] = (0,
|
|
18014
|
-
const [fieldDragging, setFieldDragging] = (0,
|
|
18015
|
-
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);
|
|
18016
18639
|
clearFormPickRef.current = clearFormPick;
|
|
18017
|
-
(0,
|
|
18640
|
+
(0, import_react18.useEffect)(() => {
|
|
18018
18641
|
const el = fieldPickElRef.current;
|
|
18019
18642
|
if (!el || fieldPickRect === null) return;
|
|
18020
18643
|
const observer = new ResizeObserver(() => {
|
|
@@ -18023,7 +18646,7 @@ function OhhwellsBridge() {
|
|
|
18023
18646
|
observer.observe(el);
|
|
18024
18647
|
return () => observer.disconnect();
|
|
18025
18648
|
}, [fieldPickRect !== null, fieldPickState]);
|
|
18026
|
-
(0,
|
|
18649
|
+
(0, import_react18.useEffect)(() => {
|
|
18027
18650
|
const el = formPickElRef.current;
|
|
18028
18651
|
if (!el || formPickRect === null) return;
|
|
18029
18652
|
const observer = new ResizeObserver(() => {
|
|
@@ -18032,25 +18655,25 @@ function OhhwellsBridge() {
|
|
|
18032
18655
|
observer.observe(el);
|
|
18033
18656
|
return () => observer.disconnect();
|
|
18034
18657
|
}, [formPickRect !== null, formViewState]);
|
|
18035
|
-
const [toolbarVariant, setToolbarVariant] = (0,
|
|
18036
|
-
const toolbarVariantRef = (0,
|
|
18658
|
+
const [toolbarVariant, setToolbarVariant] = (0, import_react18.useState)("none");
|
|
18659
|
+
const toolbarVariantRef = (0, import_react18.useRef)("none");
|
|
18037
18660
|
toolbarVariantRef.current = toolbarVariant;
|
|
18038
|
-
const [selectedIsCta, setSelectedIsCta] = (0,
|
|
18039
|
-
const [selectedIsSocial, setSelectedIsSocial] = (0,
|
|
18040
|
-
const [selectedIsSocialsRow, setSelectedIsSocialsRow] = (0,
|
|
18041
|
-
const [reorderHrefKey, setReorderHrefKey] = (0,
|
|
18042
|
-
const [reorderDragDisabled, setReorderDragDisabled] = (0,
|
|
18043
|
-
const [toggleState, setToggleState] = (0,
|
|
18044
|
-
const [maxBadge, setMaxBadge] = (0,
|
|
18045
|
-
const [activeCommands, setActiveCommands] = (0,
|
|
18046
|
-
const [sectionGap, setSectionGap] = (0,
|
|
18047
|
-
const [toolbarShowEditLink, setToolbarShowEditLink] = (0,
|
|
18048
|
-
const hoveredNavContainerRef = (0,
|
|
18049
|
-
const [hoveredNavContainerRect, setHoveredNavContainerRect] = (0,
|
|
18050
|
-
const hoveredItemElRef = (0,
|
|
18051
|
-
const [hoveredItemRect, setHoveredItemRect] = (0,
|
|
18052
|
-
const [hoveredTextRect, setHoveredTextRect] = (0,
|
|
18053
|
-
(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)(() => {
|
|
18054
18677
|
const sync = () => {
|
|
18055
18678
|
const el = document.querySelector(
|
|
18056
18679
|
'[data-ohw-hovered]:not([contenteditable]):not([data-ohw-href-key]):not([data-ohw-editable="form"] *)'
|
|
@@ -18094,44 +18717,44 @@ function OhhwellsBridge() {
|
|
|
18094
18717
|
});
|
|
18095
18718
|
return () => observer.disconnect();
|
|
18096
18719
|
}, []);
|
|
18097
|
-
const siblingHintElRef = (0,
|
|
18098
|
-
const [siblingHintRect, setSiblingHintRect] = (0,
|
|
18099
|
-
const [siblingHintRects, setSiblingHintRects] = (0,
|
|
18100
|
-
const [isItemDragging, setIsItemDragging] = (0,
|
|
18101
|
-
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);
|
|
18102
18725
|
isFooterFrameSelectionRef.current = isFooterFrameSelection;
|
|
18103
|
-
const [floatingPanel, setFloatingPanel] = (0,
|
|
18104
|
-
const floatingPanelOpenRef = (0,
|
|
18726
|
+
const [floatingPanel, setFloatingPanel] = (0, import_react18.useState)(null);
|
|
18727
|
+
const floatingPanelOpenRef = (0, import_react18.useRef)(false);
|
|
18105
18728
|
floatingPanelOpenRef.current = floatingPanel !== null;
|
|
18106
|
-
const [floatingPanelPos, setFloatingPanelPos] = (0,
|
|
18107
|
-
const [logoSizeDraft, setLogoSizeDraft] = (0,
|
|
18108
|
-
const [editorViewport, setEditorViewport] = (0,
|
|
18109
|
-
const [parentScrollSnap, setParentScrollSnap] = (0,
|
|
18110
|
-
const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = (0,
|
|
18111
|
-
const [footerHeadingVisible, setFooterHeadingVisible] = (0,
|
|
18112
|
-
const footerDragRef = (0,
|
|
18113
|
-
const [footerDropSlots, setFooterDropSlots] = (0,
|
|
18114
|
-
const [activeFooterDropIndex, setActiveFooterDropIndex] = (0,
|
|
18115
|
-
const [draggedItemRect, setDraggedItemRect] = (0,
|
|
18116
|
-
const footerPointerDragRef = (0,
|
|
18117
|
-
const suppressNextClickRef = (0,
|
|
18118
|
-
const suppressClickUntilRef = (0,
|
|
18119
|
-
const [linkPopover, setLinkPopover] = (0,
|
|
18120
|
-
const linkPopoverSessionRef = (0,
|
|
18121
|
-
const addNavAfterAnchorRef = (0,
|
|
18122
|
-
const editContentRef = (0,
|
|
18123
|
-
const aiSectionsRef = (0,
|
|
18124
|
-
const brandKitRef = (0,
|
|
18125
|
-
const stylesRef = (0,
|
|
18126
|
-
const appliedDrawerRef = (0,
|
|
18127
|
-
const pendingDeleteUndoRef = (0,
|
|
18128
|
-
const [sitePages, setSitePages] = (0,
|
|
18129
|
-
const [sectionsByPath, setSectionsByPath] = (0,
|
|
18130
|
-
const sectionsPrefetchGenRef = (0,
|
|
18131
|
-
const setLinkPopoverRef = (0,
|
|
18132
|
-
const linkPopoverPanelRef = (0,
|
|
18133
|
-
const linkPopoverOpenRef = (0,
|
|
18134
|
-
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);
|
|
18135
18758
|
setLinkPopoverRef.current = setLinkPopover;
|
|
18136
18759
|
linkPopoverSessionRef.current = linkPopover;
|
|
18137
18760
|
const {
|
|
@@ -18180,7 +18803,7 @@ function OhhwellsBridge() {
|
|
|
18180
18803
|
const bumpLinkPopoverGrace = () => {
|
|
18181
18804
|
linkPopoverGraceUntilRef.current = Date.now() + 350;
|
|
18182
18805
|
};
|
|
18183
|
-
const runSectionsPrefetch = (0,
|
|
18806
|
+
const runSectionsPrefetch = (0, import_react18.useCallback)((pages) => {
|
|
18184
18807
|
if (!isEditMode || shouldUseDevFixtures() || pages.length === 0) return;
|
|
18185
18808
|
const gen = ++sectionsPrefetchGenRef.current;
|
|
18186
18809
|
const paths = pages.map((p) => p.path);
|
|
@@ -18199,9 +18822,9 @@ function OhhwellsBridge() {
|
|
|
18199
18822
|
);
|
|
18200
18823
|
});
|
|
18201
18824
|
}, [isEditMode, pathname]);
|
|
18202
|
-
const runSectionsPrefetchRef = (0,
|
|
18825
|
+
const runSectionsPrefetchRef = (0, import_react18.useRef)(runSectionsPrefetch);
|
|
18203
18826
|
runSectionsPrefetchRef.current = runSectionsPrefetch;
|
|
18204
|
-
(0,
|
|
18827
|
+
(0, import_react18.useEffect)(() => {
|
|
18205
18828
|
if (!linkPopover) {
|
|
18206
18829
|
document.documentElement.removeAttribute("data-ohw-link-popover-open");
|
|
18207
18830
|
return;
|
|
@@ -18229,7 +18852,7 @@ function OhhwellsBridge() {
|
|
|
18229
18852
|
document.documentElement.removeAttribute("data-ohw-link-popover-open");
|
|
18230
18853
|
};
|
|
18231
18854
|
}, [linkPopover, postToParent2]);
|
|
18232
|
-
(0,
|
|
18855
|
+
(0, import_react18.useEffect)(() => {
|
|
18233
18856
|
if (!isEditMode) return;
|
|
18234
18857
|
const useFixtures = shouldUseDevFixtures();
|
|
18235
18858
|
if (useFixtures) {
|
|
@@ -18253,14 +18876,14 @@ function OhhwellsBridge() {
|
|
|
18253
18876
|
if (!useFixtures) postToParent2({ type: "ow:request-site-pages" });
|
|
18254
18877
|
return () => window.removeEventListener("message", onSitePages);
|
|
18255
18878
|
}, [isEditMode, postToParent2]);
|
|
18256
|
-
(0,
|
|
18879
|
+
(0, import_react18.useEffect)(() => {
|
|
18257
18880
|
if (!isEditMode || shouldUseDevFixtures()) return;
|
|
18258
18881
|
void loadAllSectionsManifest().then((manifest) => {
|
|
18259
18882
|
if (Object.keys(manifest).length === 0) return;
|
|
18260
18883
|
setSectionsByPath((prev) => ({ ...manifest, ...prev }));
|
|
18261
18884
|
});
|
|
18262
18885
|
}, [isEditMode]);
|
|
18263
|
-
(0,
|
|
18886
|
+
(0, import_react18.useEffect)(() => {
|
|
18264
18887
|
const update = () => {
|
|
18265
18888
|
const el = activeElRef.current ?? selectedElRef.current;
|
|
18266
18889
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
@@ -18284,10 +18907,10 @@ function OhhwellsBridge() {
|
|
|
18284
18907
|
vvp.removeEventListener("resize", update);
|
|
18285
18908
|
};
|
|
18286
18909
|
}, []);
|
|
18287
|
-
const refreshStateRules = (0,
|
|
18910
|
+
const refreshStateRules = (0, import_react18.useCallback)(() => {
|
|
18288
18911
|
editStylesRef.current?.forceHover && (editStylesRef.current.forceHover.textContent = collectStateRules());
|
|
18289
18912
|
}, []);
|
|
18290
|
-
const processConfigRequest = (0,
|
|
18913
|
+
const processConfigRequest = (0, import_react18.useCallback)((insertAfterVal) => {
|
|
18291
18914
|
const tracker = getSectionsTracker();
|
|
18292
18915
|
let entries = [];
|
|
18293
18916
|
try {
|
|
@@ -18310,7 +18933,7 @@ function OhhwellsBridge() {
|
|
|
18310
18933
|
}
|
|
18311
18934
|
window.postMessage({ type: "ow:schedule-config", insertAfter: insertAfterVal, scheduleId: null }, "*");
|
|
18312
18935
|
}, [isEditMode]);
|
|
18313
|
-
const deactivate = (0,
|
|
18936
|
+
const deactivate = (0, import_react18.useCallback)(() => {
|
|
18314
18937
|
const el = activeElRef.current;
|
|
18315
18938
|
if (!el) return;
|
|
18316
18939
|
const isFormBlock = el.dataset.ohwEditable === "form";
|
|
@@ -18361,12 +18984,12 @@ function OhhwellsBridge() {
|
|
|
18361
18984
|
setToolbarShowEditLink(false);
|
|
18362
18985
|
postToParent2({ type: "ow:exit-edit" });
|
|
18363
18986
|
}, [postToParent2]);
|
|
18364
|
-
const clearSelectedAttr = (0,
|
|
18987
|
+
const clearSelectedAttr = (0, import_react18.useCallback)(() => {
|
|
18365
18988
|
document.querySelectorAll("[data-ohw-selected]").forEach((el) => {
|
|
18366
18989
|
el.removeAttribute("data-ohw-selected");
|
|
18367
18990
|
});
|
|
18368
18991
|
}, []);
|
|
18369
|
-
const deselect = (0,
|
|
18992
|
+
const deselect = (0, import_react18.useCallback)(() => {
|
|
18370
18993
|
const nestedGroup = selectedElRef.current?.closest("[data-ohw-nav-children]") != null ? selectedElRef.current.closest("[data-ohw-nav-group]") : null;
|
|
18371
18994
|
clearSelectedAttr();
|
|
18372
18995
|
selectedElRef.current = null;
|
|
@@ -18400,20 +19023,20 @@ function OhhwellsBridge() {
|
|
|
18400
19023
|
setToolbarVariant("none");
|
|
18401
19024
|
}
|
|
18402
19025
|
}, [clearSelectedAttr]);
|
|
18403
|
-
const markSelected = (0,
|
|
19026
|
+
const markSelected = (0, import_react18.useCallback)((el) => {
|
|
18404
19027
|
clearSelectedAttr();
|
|
18405
19028
|
el.removeAttribute("data-ohw-hovered");
|
|
18406
19029
|
el.setAttribute("data-ohw-selected", "");
|
|
18407
19030
|
}, [clearSelectedAttr]);
|
|
18408
|
-
const isSelectedForHover = (0,
|
|
19031
|
+
const isSelectedForHover = (0, import_react18.useCallback)((el) => {
|
|
18409
19032
|
if (!el) return false;
|
|
18410
19033
|
return [selectedElRef.current, activeElRef.current].some(
|
|
18411
19034
|
(busy) => busy && (el === busy || busy.contains(el) || el.contains(busy))
|
|
18412
19035
|
);
|
|
18413
19036
|
}, []);
|
|
18414
|
-
const isSelectedForHoverRef = (0,
|
|
19037
|
+
const isSelectedForHoverRef = (0, import_react18.useRef)(isSelectedForHover);
|
|
18415
19038
|
isSelectedForHoverRef.current = isSelectedForHover;
|
|
18416
|
-
const resolveHrefKeyElement = (0,
|
|
19039
|
+
const resolveHrefKeyElement = (0, import_react18.useCallback)((hrefKey) => {
|
|
18417
19040
|
if (isFooterHrefKey(hrefKey)) {
|
|
18418
19041
|
return document.querySelector(
|
|
18419
19042
|
`footer [data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
@@ -18428,7 +19051,7 @@ function OhhwellsBridge() {
|
|
|
18428
19051
|
`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
18429
19052
|
);
|
|
18430
19053
|
}, []);
|
|
18431
|
-
const resyncSelectedNavigationItem = (0,
|
|
19054
|
+
const resyncSelectedNavigationItem = (0, import_react18.useCallback)(() => {
|
|
18432
19055
|
const hrefKey = selectedHrefKeyRef.current;
|
|
18433
19056
|
if (hrefKey) {
|
|
18434
19057
|
const link = resolveHrefKeyElement(hrefKey);
|
|
@@ -18466,7 +19089,7 @@ function OhhwellsBridge() {
|
|
|
18466
19089
|
);
|
|
18467
19090
|
}
|
|
18468
19091
|
}, [resolveHrefKeyElement]);
|
|
18469
|
-
const reselectNavigationItem = (0,
|
|
19092
|
+
const reselectNavigationItem = (0, import_react18.useCallback)((navAnchor) => {
|
|
18470
19093
|
selectedElRef.current = navAnchor;
|
|
18471
19094
|
selectedHrefKeyRef.current = navAnchor.getAttribute("data-ohw-href-key");
|
|
18472
19095
|
selectedFooterColAttrRef.current = null;
|
|
@@ -18497,7 +19120,7 @@ function OhhwellsBridge() {
|
|
|
18497
19120
|
setToolbarShowEditLink(false);
|
|
18498
19121
|
setActiveCommands(/* @__PURE__ */ new Set());
|
|
18499
19122
|
}, [markSelected]);
|
|
18500
|
-
const commitNavigationTextEdit = (0,
|
|
19123
|
+
const commitNavigationTextEdit = (0, import_react18.useCallback)((navAnchor) => {
|
|
18501
19124
|
const el = activeElRef.current;
|
|
18502
19125
|
if (!el) return;
|
|
18503
19126
|
const key = el.dataset.ohwKey;
|
|
@@ -18530,7 +19153,7 @@ function OhhwellsBridge() {
|
|
|
18530
19153
|
postToParent2({ type: "ow:exit-edit" });
|
|
18531
19154
|
reselectNavigationItem(navAnchor);
|
|
18532
19155
|
}, [postToParent2, reselectNavigationItem]);
|
|
18533
|
-
const handleAddTopLevelNavItem = (0,
|
|
19156
|
+
const handleAddTopLevelNavItem = (0, import_react18.useCallback)(() => {
|
|
18534
19157
|
const items = listNavbarRootItems();
|
|
18535
19158
|
addNavAfterAnchorRef.current = items[items.length - 1] ?? null;
|
|
18536
19159
|
deselectRef.current();
|
|
@@ -18542,7 +19165,7 @@ function OhhwellsBridge() {
|
|
|
18542
19165
|
intent: "add-nav"
|
|
18543
19166
|
});
|
|
18544
19167
|
}, []);
|
|
18545
|
-
const maybeWarnNavLinkDropdownConflict = (0,
|
|
19168
|
+
const maybeWarnNavLinkDropdownConflict = (0, import_react18.useCallback)(
|
|
18546
19169
|
(anchor) => {
|
|
18547
19170
|
if (!isNavbarHrefKey(anchor.getAttribute("data-ohw-href-key"))) return;
|
|
18548
19171
|
if (!navDropdownsOpenOnClick()) return;
|
|
@@ -18555,7 +19178,7 @@ function OhhwellsBridge() {
|
|
|
18555
19178
|
},
|
|
18556
19179
|
[postToParent2]
|
|
18557
19180
|
);
|
|
18558
|
-
const handleNavDropdownOpenChange = (0,
|
|
19181
|
+
const handleNavDropdownOpenChange = (0, import_react18.useCallback)((open) => {
|
|
18559
19182
|
const selected = selectedElRef.current;
|
|
18560
19183
|
if (!selected || !isNavigationItem2(selected)) return;
|
|
18561
19184
|
if (isNestedNavChild(selected)) return;
|
|
@@ -18571,7 +19194,7 @@ function OhhwellsBridge() {
|
|
|
18571
19194
|
}
|
|
18572
19195
|
});
|
|
18573
19196
|
}, []);
|
|
18574
|
-
const handleFooterHeadingVisibleChange = (0,
|
|
19197
|
+
const handleFooterHeadingVisibleChange = (0, import_react18.useCallback)(
|
|
18575
19198
|
(visible) => {
|
|
18576
19199
|
const selected = selectedElRef.current;
|
|
18577
19200
|
if (!selected || !isFooterFrameSelectionRef.current) return;
|
|
@@ -18595,7 +19218,7 @@ function OhhwellsBridge() {
|
|
|
18595
19218
|
},
|
|
18596
19219
|
[postToParent2]
|
|
18597
19220
|
);
|
|
18598
|
-
const enterEditOnNewItem = (0,
|
|
19221
|
+
const enterEditOnNewItem = (0, import_react18.useCallback)((anchor) => {
|
|
18599
19222
|
const label = anchor.querySelector('[data-ohw-editable="text"]');
|
|
18600
19223
|
if (!label) {
|
|
18601
19224
|
selectRef.current(anchor);
|
|
@@ -18604,8 +19227,8 @@ function OhhwellsBridge() {
|
|
|
18604
19227
|
setNavGroupForceOpen(anchor, true);
|
|
18605
19228
|
activateRef.current(label);
|
|
18606
19229
|
}, []);
|
|
18607
|
-
const pendingSocialAddRef = (0,
|
|
18608
|
-
const handleAddChildItem = (0,
|
|
19230
|
+
const pendingSocialAddRef = (0, import_react18.useRef)(null);
|
|
19231
|
+
const handleAddChildItem = (0, import_react18.useCallback)(() => {
|
|
18609
19232
|
const selected = selectedElRef.current;
|
|
18610
19233
|
if (!selected) return;
|
|
18611
19234
|
const socialsRow = isSocialsRow(selected) ? selected : findSocialsRow(selected);
|
|
@@ -18716,7 +19339,7 @@ function OhhwellsBridge() {
|
|
|
18716
19339
|
});
|
|
18717
19340
|
});
|
|
18718
19341
|
}, [enterEditOnNewItem, isFooterFrameSelection, maybeWarnNavLinkDropdownConflict, postToParent2]);
|
|
18719
|
-
const handleAddFooterColumn = (0,
|
|
19342
|
+
const handleAddFooterColumn = (0, import_react18.useCallback)(() => {
|
|
18720
19343
|
if (!canAddFooterColumn()) {
|
|
18721
19344
|
postToParent2({
|
|
18722
19345
|
type: "ow:toast",
|
|
@@ -18737,7 +19360,7 @@ function OhhwellsBridge() {
|
|
|
18737
19360
|
selectRef.current(result.firstLink);
|
|
18738
19361
|
});
|
|
18739
19362
|
}, [postToParent2]);
|
|
18740
|
-
const clearFooterDragVisuals = (0,
|
|
19363
|
+
const clearFooterDragVisuals = (0, import_react18.useCallback)(() => {
|
|
18741
19364
|
footerDragRef.current = null;
|
|
18742
19365
|
setSiblingHintRects([]);
|
|
18743
19366
|
setFooterDropSlots([]);
|
|
@@ -18746,7 +19369,7 @@ function OhhwellsBridge() {
|
|
|
18746
19369
|
setIsItemDragging(false);
|
|
18747
19370
|
unlockFooterDragInteraction();
|
|
18748
19371
|
}, []);
|
|
18749
|
-
const refreshFooterDragVisuals = (0,
|
|
19372
|
+
const refreshFooterDragVisuals = (0, import_react18.useCallback)((session, activeSlot, clientX, clientY) => {
|
|
18750
19373
|
const dragged = session.draggedEl;
|
|
18751
19374
|
setDraggedItemRect(dragged.getBoundingClientRect());
|
|
18752
19375
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -18778,13 +19401,13 @@ function OhhwellsBridge() {
|
|
|
18778
19401
|
const activeIdx = activeSlot ? slots.findIndex((s) => s.insertIndex === activeSlot.insertIndex) : -1;
|
|
18779
19402
|
setActiveFooterDropIndex(activeIdx >= 0 ? activeIdx : null);
|
|
18780
19403
|
}, []);
|
|
18781
|
-
const refreshFooterDragVisualsRef = (0,
|
|
19404
|
+
const refreshFooterDragVisualsRef = (0, import_react18.useRef)(refreshFooterDragVisuals);
|
|
18782
19405
|
refreshFooterDragVisualsRef.current = refreshFooterDragVisuals;
|
|
18783
|
-
const commitFooterDragRef = (0,
|
|
19406
|
+
const commitFooterDragRef = (0, import_react18.useRef)(() => {
|
|
18784
19407
|
});
|
|
18785
|
-
const beginFooterDragRef = (0,
|
|
19408
|
+
const beginFooterDragRef = (0, import_react18.useRef)(() => {
|
|
18786
19409
|
});
|
|
18787
|
-
const beginFooterDrag = (0,
|
|
19410
|
+
const beginFooterDrag = (0, import_react18.useCallback)(
|
|
18788
19411
|
(session) => {
|
|
18789
19412
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
18790
19413
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -18804,7 +19427,7 @@ function OhhwellsBridge() {
|
|
|
18804
19427
|
[refreshFooterDragVisuals]
|
|
18805
19428
|
);
|
|
18806
19429
|
beginFooterDragRef.current = beginFooterDrag;
|
|
18807
|
-
const commitFooterDrag = (0,
|
|
19430
|
+
const commitFooterDrag = (0, import_react18.useCallback)(
|
|
18808
19431
|
(clientX, clientY) => {
|
|
18809
19432
|
const session = footerDragRef.current;
|
|
18810
19433
|
if (!session) {
|
|
@@ -18933,7 +19556,7 @@ function OhhwellsBridge() {
|
|
|
18933
19556
|
[clearFooterDragVisuals, resolveHrefKeyElement, resyncSelectedNavigationItem]
|
|
18934
19557
|
);
|
|
18935
19558
|
commitFooterDragRef.current = commitFooterDrag;
|
|
18936
|
-
const startFooterLinkDrag = (0,
|
|
19559
|
+
const startFooterLinkDrag = (0, import_react18.useCallback)(
|
|
18937
19560
|
(anchor, clientX, clientY, wasSelected) => {
|
|
18938
19561
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
18939
19562
|
if (!hrefKey) return false;
|
|
@@ -18969,7 +19592,7 @@ function OhhwellsBridge() {
|
|
|
18969
19592
|
},
|
|
18970
19593
|
[beginFooterDrag]
|
|
18971
19594
|
);
|
|
18972
|
-
const startFooterColumnDrag = (0,
|
|
19595
|
+
const startFooterColumnDrag = (0, import_react18.useCallback)(
|
|
18973
19596
|
(columnEl, clientX, clientY, wasSelected) => {
|
|
18974
19597
|
const columns = listFooterColumns();
|
|
18975
19598
|
const idx = columns.indexOf(columnEl);
|
|
@@ -18989,7 +19612,7 @@ function OhhwellsBridge() {
|
|
|
18989
19612
|
},
|
|
18990
19613
|
[beginFooterDrag]
|
|
18991
19614
|
);
|
|
18992
|
-
const handleItemDragStart = (0,
|
|
19615
|
+
const handleItemDragStart = (0, import_react18.useCallback)(
|
|
18993
19616
|
(e) => {
|
|
18994
19617
|
const selected = selectedElRef.current;
|
|
18995
19618
|
if (!selected) {
|
|
@@ -19009,7 +19632,7 @@ function OhhwellsBridge() {
|
|
|
19009
19632
|
},
|
|
19010
19633
|
[startFooterColumnDrag, startFooterLinkDrag, startNavLinkDrag]
|
|
19011
19634
|
);
|
|
19012
|
-
const handleItemDragEnd = (0,
|
|
19635
|
+
const handleItemDragEnd = (0, import_react18.useCallback)(
|
|
19013
19636
|
(e) => {
|
|
19014
19637
|
if (footerDragRef.current) {
|
|
19015
19638
|
const x = e?.clientX;
|
|
@@ -19035,7 +19658,7 @@ function OhhwellsBridge() {
|
|
|
19035
19658
|
},
|
|
19036
19659
|
[commitFooterDrag, commitNavDrag, navDragRef]
|
|
19037
19660
|
);
|
|
19038
|
-
const handleItemChromePointerDown = (0,
|
|
19661
|
+
const handleItemChromePointerDown = (0, import_react18.useCallback)((e) => {
|
|
19039
19662
|
if (e.button !== 0) return;
|
|
19040
19663
|
const selected = selectedElRef.current;
|
|
19041
19664
|
if (!selected) return;
|
|
@@ -19066,7 +19689,7 @@ function OhhwellsBridge() {
|
|
|
19066
19689
|
}
|
|
19067
19690
|
if (armNavPressFromChrome(selected, e.clientX, e.clientY, e.pointerId)) return;
|
|
19068
19691
|
}, [armNavPressFromChrome]);
|
|
19069
|
-
const handleItemChromeClick = (0,
|
|
19692
|
+
const handleItemChromeClick = (0, import_react18.useCallback)((clientX, clientY) => {
|
|
19070
19693
|
if (suppressNextClickRef.current || Date.now() < suppressClickUntilRef.current) {
|
|
19071
19694
|
suppressNextClickRef.current = false;
|
|
19072
19695
|
return;
|
|
@@ -19079,7 +19702,7 @@ function OhhwellsBridge() {
|
|
|
19079
19702
|
}, []);
|
|
19080
19703
|
reselectNavigationItemRef.current = reselectNavigationItem;
|
|
19081
19704
|
commitNavigationTextEditRef.current = commitNavigationTextEdit;
|
|
19082
|
-
const select = (0,
|
|
19705
|
+
const select = (0, import_react18.useCallback)((anchor) => {
|
|
19083
19706
|
if (!isNavigationItem2(anchor)) return;
|
|
19084
19707
|
if (activeElRef.current) deactivate();
|
|
19085
19708
|
aiSectionApiRef.current?.selectFromElement(anchor);
|
|
@@ -19122,7 +19745,7 @@ function OhhwellsBridge() {
|
|
|
19122
19745
|
setFloatingPanel(null);
|
|
19123
19746
|
setLogoSizeDraft(null);
|
|
19124
19747
|
}, [deactivate, markSelected]);
|
|
19125
|
-
const selectFrame = (0,
|
|
19748
|
+
const selectFrame = (0, import_react18.useCallback)((el) => {
|
|
19126
19749
|
if (!isNavigationContainer(el)) return;
|
|
19127
19750
|
if (activeElRef.current) deactivate();
|
|
19128
19751
|
aiSectionApiRef.current?.selectFromElement(el);
|
|
@@ -19162,7 +19785,7 @@ function OhhwellsBridge() {
|
|
|
19162
19785
|
setFloatingPanel(null);
|
|
19163
19786
|
setLogoSizeDraft(null);
|
|
19164
19787
|
}, [deactivate, markSelected, postToParent2]);
|
|
19165
|
-
const selectLogo = (0,
|
|
19788
|
+
const selectLogo = (0, import_react18.useCallback)(
|
|
19166
19789
|
(logoEl) => {
|
|
19167
19790
|
if (activeElRef.current) deactivate();
|
|
19168
19791
|
selectedElRef.current = logoEl;
|
|
@@ -19191,7 +19814,7 @@ function OhhwellsBridge() {
|
|
|
19191
19814
|
},
|
|
19192
19815
|
[deactivate, markSelected]
|
|
19193
19816
|
);
|
|
19194
|
-
const openLogoSizePanel = (0,
|
|
19817
|
+
const openLogoSizePanel = (0, import_react18.useCallback)((logoEl) => {
|
|
19195
19818
|
const placement = getLogoPlacement(logoEl);
|
|
19196
19819
|
const draft = readLogoSizeState(editContentRef.current, placement);
|
|
19197
19820
|
setLogoSizeDraft(draft);
|
|
@@ -19204,7 +19827,7 @@ function OhhwellsBridge() {
|
|
|
19204
19827
|
placement
|
|
19205
19828
|
});
|
|
19206
19829
|
}, []);
|
|
19207
|
-
const openSocialsDisplayPanel = (0,
|
|
19830
|
+
const openSocialsDisplayPanel = (0, import_react18.useCallback)((row) => {
|
|
19208
19831
|
setParentScrollSnap(parentScrollRef.current);
|
|
19209
19832
|
setFloatingPanel({
|
|
19210
19833
|
key: "socials-display",
|
|
@@ -19214,11 +19837,11 @@ function OhhwellsBridge() {
|
|
|
19214
19837
|
row
|
|
19215
19838
|
});
|
|
19216
19839
|
}, []);
|
|
19217
|
-
const isEditModeRef = (0,
|
|
19218
|
-
const requestMissingSocialIconsRef = (0,
|
|
19840
|
+
const isEditModeRef = (0, import_react18.useRef)(false);
|
|
19841
|
+
const requestMissingSocialIconsRef = (0, import_react18.useRef)(() => {
|
|
19219
19842
|
});
|
|
19220
|
-
const askedSocialIconsRef = (0,
|
|
19221
|
-
const requestMissingSocialIcons = (0,
|
|
19843
|
+
const askedSocialIconsRef = (0, import_react18.useRef)(/* @__PURE__ */ new Set());
|
|
19844
|
+
const requestMissingSocialIcons = (0, import_react18.useCallback)(() => {
|
|
19222
19845
|
const items = Array.from(document.querySelectorAll(`[${SOCIALS_ROW_ATTR}]`)).filter((row) => socialsDisplayFor(row, editContentRef.current).icon).flatMap((row) => {
|
|
19223
19846
|
const missing = socialsMissingIcons(row);
|
|
19224
19847
|
listSocialItems(row).forEach((item) => ensureIconSlot(item));
|
|
@@ -19230,7 +19853,7 @@ function OhhwellsBridge() {
|
|
|
19230
19853
|
}, []);
|
|
19231
19854
|
requestMissingSocialIconsRef.current = requestMissingSocialIcons;
|
|
19232
19855
|
isEditModeRef.current = isEditMode;
|
|
19233
|
-
const changeSocialsDisplay = (0,
|
|
19856
|
+
const changeSocialsDisplay = (0, import_react18.useCallback)(
|
|
19234
19857
|
(row, next) => {
|
|
19235
19858
|
if (next.icon) {
|
|
19236
19859
|
const missing = socialsMissingIcons(row);
|
|
@@ -19254,17 +19877,17 @@ function OhhwellsBridge() {
|
|
|
19254
19877
|
},
|
|
19255
19878
|
[]
|
|
19256
19879
|
);
|
|
19257
|
-
const closeFloatingPanelOnly = (0,
|
|
19880
|
+
const closeFloatingPanelOnly = (0, import_react18.useCallback)(() => {
|
|
19258
19881
|
setFloatingPanel(null);
|
|
19259
19882
|
setLogoSizeDraft(null);
|
|
19260
19883
|
}, []);
|
|
19261
19884
|
closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
|
|
19262
|
-
const closeFloatingPanelAndDeselect = (0,
|
|
19885
|
+
const closeFloatingPanelAndDeselect = (0, import_react18.useCallback)(() => {
|
|
19263
19886
|
setFloatingPanel(null);
|
|
19264
19887
|
setLogoSizeDraft(null);
|
|
19265
19888
|
deselectRef.current();
|
|
19266
19889
|
}, []);
|
|
19267
|
-
(0,
|
|
19890
|
+
(0, import_react18.useEffect)(() => {
|
|
19268
19891
|
const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
|
|
19269
19892
|
if (!session || !logoSizeDraft) {
|
|
19270
19893
|
postToParentRef.current({ type: "ow:logo-size-panel", open: false });
|
|
@@ -19283,7 +19906,7 @@ function OhhwellsBridge() {
|
|
|
19283
19906
|
max: LOGO_SIZE_MAX
|
|
19284
19907
|
});
|
|
19285
19908
|
}, [floatingPanel, logoSizeDraft, editorViewport]);
|
|
19286
|
-
const persistLogoSizeDraft = (0,
|
|
19909
|
+
const persistLogoSizeDraft = (0, import_react18.useCallback)(
|
|
19287
19910
|
(placement, draft) => {
|
|
19288
19911
|
const desktopKey = LOGO_SIZE_DESKTOP_KEYS[placement];
|
|
19289
19912
|
const mobileKey = LOGO_SIZE_MOBILE_KEYS[placement];
|
|
@@ -19323,7 +19946,7 @@ function OhhwellsBridge() {
|
|
|
19323
19946
|
},
|
|
19324
19947
|
[postToParent2]
|
|
19325
19948
|
);
|
|
19326
|
-
const activate = (0,
|
|
19949
|
+
const activate = (0, import_react18.useCallback)((el, options) => {
|
|
19327
19950
|
if (activeElRef.current === el) return;
|
|
19328
19951
|
document.querySelectorAll("[data-ohw-hovered]").forEach((hovered) => {
|
|
19329
19952
|
hovered.removeAttribute("data-ohw-hovered");
|
|
@@ -19421,8 +20044,8 @@ function OhhwellsBridge() {
|
|
|
19421
20044
|
openLogoSizePanelRef.current = openLogoSizePanel;
|
|
19422
20045
|
deselectRef.current = deselect;
|
|
19423
20046
|
closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
|
|
19424
|
-
const lastSiteWideScopeRef = (0,
|
|
19425
|
-
(0,
|
|
20047
|
+
const lastSiteWideScopeRef = (0, import_react18.useRef)(null);
|
|
20048
|
+
(0, import_react18.useEffect)(() => {
|
|
19426
20049
|
if (!isEditMode) {
|
|
19427
20050
|
if (lastSiteWideScopeRef.current !== false) {
|
|
19428
20051
|
lastSiteWideScopeRef.current = false;
|
|
@@ -19448,7 +20071,7 @@ function OhhwellsBridge() {
|
|
|
19448
20071
|
isFooterFrameSelection,
|
|
19449
20072
|
postToParent2
|
|
19450
20073
|
]);
|
|
19451
|
-
(0,
|
|
20074
|
+
(0, import_react18.useLayoutEffect)(() => {
|
|
19452
20075
|
if (!subdomain || isEditMode) {
|
|
19453
20076
|
setFetchState("done");
|
|
19454
20077
|
return;
|
|
@@ -19567,7 +20190,7 @@ function OhhwellsBridge() {
|
|
|
19567
20190
|
cancelled = true;
|
|
19568
20191
|
};
|
|
19569
20192
|
}, [subdomain, isEditMode]);
|
|
19570
|
-
(0,
|
|
20193
|
+
(0, import_react18.useEffect)(() => {
|
|
19571
20194
|
if (!isEditMode) return;
|
|
19572
20195
|
const resolveIndex = (form, clientY) => {
|
|
19573
20196
|
const wrappers = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== fieldDragRef.current?.key);
|
|
@@ -19608,7 +20231,7 @@ function OhhwellsBridge() {
|
|
|
19608
20231
|
window.removeEventListener("drop", onDrop, true);
|
|
19609
20232
|
};
|
|
19610
20233
|
}, [buildFieldDropSlots, isEditMode, persistFields, selectField]);
|
|
19611
|
-
(0,
|
|
20234
|
+
(0, import_react18.useEffect)(() => {
|
|
19612
20235
|
if (!isEditMode) return;
|
|
19613
20236
|
const mark = () => document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
19614
20237
|
markFormFields(form);
|
|
@@ -19620,7 +20243,7 @@ function OhhwellsBridge() {
|
|
|
19620
20243
|
});
|
|
19621
20244
|
return () => observer.disconnect();
|
|
19622
20245
|
}, [isEditMode, fetchState, pathname]);
|
|
19623
|
-
(0,
|
|
20246
|
+
(0, import_react18.useEffect)(() => {
|
|
19624
20247
|
if (!isEditMode) return;
|
|
19625
20248
|
let saveTimer = null;
|
|
19626
20249
|
const onInput = (e) => {
|
|
@@ -19642,14 +20265,14 @@ function OhhwellsBridge() {
|
|
|
19642
20265
|
document.addEventListener("input", onInput, true);
|
|
19643
20266
|
return () => document.removeEventListener("input", onInput, true);
|
|
19644
20267
|
}, [isEditMode, persistFields]);
|
|
19645
|
-
(0,
|
|
20268
|
+
(0, import_react18.useEffect)(() => {
|
|
19646
20269
|
if (isEditMode || fetchState !== "done") return;
|
|
19647
20270
|
const content = contentCache.get(subdomain) ?? {};
|
|
19648
20271
|
document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
19649
20272
|
reconcileFieldsFromContent(form, content);
|
|
19650
20273
|
});
|
|
19651
20274
|
}, [isEditMode, fetchState, subdomain]);
|
|
19652
|
-
(0,
|
|
20275
|
+
(0, import_react18.useEffect)(() => {
|
|
19653
20276
|
if (!isEditMode) return;
|
|
19654
20277
|
const swallow = (e) => {
|
|
19655
20278
|
const target = e.target;
|
|
@@ -19658,14 +20281,14 @@ function OhhwellsBridge() {
|
|
|
19658
20281
|
document.addEventListener("submit", swallow, true);
|
|
19659
20282
|
return () => document.removeEventListener("submit", swallow, true);
|
|
19660
20283
|
}, [isEditMode]);
|
|
19661
|
-
(0,
|
|
20284
|
+
(0, import_react18.useEffect)(() => {
|
|
19662
20285
|
if (isEditMode || fetchState !== "done") return;
|
|
19663
20286
|
console.log("env", process.env.NEXT_PUBLIC_FLOWOPS_API_URL);
|
|
19664
20287
|
const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
|
|
19665
20288
|
console.log({ apiUrl, subdomain });
|
|
19666
20289
|
bindPublishedForms(apiUrl, subdomain, contentCache.get(subdomain) ?? {});
|
|
19667
20290
|
}, [isEditMode, fetchState, subdomain]);
|
|
19668
|
-
(0,
|
|
20291
|
+
(0, import_react18.useEffect)(() => {
|
|
19669
20292
|
if (!subdomain || isEditMode) return;
|
|
19670
20293
|
let debounceTimer = null;
|
|
19671
20294
|
let observer = null;
|
|
@@ -19754,16 +20377,16 @@ function OhhwellsBridge() {
|
|
|
19754
20377
|
if (debounceTimer) clearTimeout(debounceTimer);
|
|
19755
20378
|
};
|
|
19756
20379
|
}, [subdomain, isEditMode, pathname]);
|
|
19757
|
-
(0,
|
|
20380
|
+
(0, import_react18.useLayoutEffect)(() => {
|
|
19758
20381
|
const el = document.getElementById("ohw-loader");
|
|
19759
20382
|
if (!el) return;
|
|
19760
20383
|
const visible = Boolean(subdomain) && fetchState !== "done";
|
|
19761
20384
|
el.style.display = visible ? "flex" : "none";
|
|
19762
20385
|
}, [subdomain, fetchState]);
|
|
19763
|
-
(0,
|
|
20386
|
+
(0, import_react18.useEffect)(() => {
|
|
19764
20387
|
postToParent2({ type: "ow:navigation", path: pathname });
|
|
19765
20388
|
}, [pathname, postToParent2]);
|
|
19766
|
-
(0,
|
|
20389
|
+
(0, import_react18.useEffect)(() => {
|
|
19767
20390
|
if (!subdomain || isEditMode) return;
|
|
19768
20391
|
const content = contentCache.get(subdomain);
|
|
19769
20392
|
if (!content) return;
|
|
@@ -19779,7 +20402,7 @@ function OhhwellsBridge() {
|
|
|
19779
20402
|
applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
|
|
19780
20403
|
}
|
|
19781
20404
|
}, [pathname, subdomain, isEditMode]);
|
|
19782
|
-
(0,
|
|
20405
|
+
(0, import_react18.useEffect)(() => {
|
|
19783
20406
|
if (!isEditMode) return;
|
|
19784
20407
|
if (linkPopoverSessionRef.current?.intent === "add-nav") return;
|
|
19785
20408
|
if (document.querySelector("[data-ohw-section-picker]")) return;
|
|
@@ -19787,11 +20410,11 @@ function OhhwellsBridge() {
|
|
|
19787
20410
|
deselectRef.current();
|
|
19788
20411
|
deactivateRef.current();
|
|
19789
20412
|
}, [pathname, isEditMode]);
|
|
19790
|
-
(0,
|
|
20413
|
+
(0, import_react18.useEffect)(() => {
|
|
19791
20414
|
if (!isEditMode) return;
|
|
19792
20415
|
initSectionInstancesFromContent(editContentRef.current, pathname);
|
|
19793
20416
|
}, [pathname, isEditMode]);
|
|
19794
|
-
(0,
|
|
20417
|
+
(0, import_react18.useEffect)(() => {
|
|
19795
20418
|
if (!isEditMode) return;
|
|
19796
20419
|
const observer = new MutationObserver(() => {
|
|
19797
20420
|
const drawer = document.querySelector("[data-ohw-nav-drawer]");
|
|
@@ -19802,7 +20425,7 @@ function OhhwellsBridge() {
|
|
|
19802
20425
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
19803
20426
|
return () => observer.disconnect();
|
|
19804
20427
|
}, [isEditMode, pathname]);
|
|
19805
|
-
(0,
|
|
20428
|
+
(0, import_react18.useEffect)(() => {
|
|
19806
20429
|
const contentForNav = () => {
|
|
19807
20430
|
if (isEditMode) return editContentRef.current;
|
|
19808
20431
|
if (!subdomain) return {};
|
|
@@ -19871,7 +20494,7 @@ function OhhwellsBridge() {
|
|
|
19871
20494
|
observer?.disconnect();
|
|
19872
20495
|
};
|
|
19873
20496
|
}, [isEditMode, pathname, subdomain, fetchState, resyncSelectedNavigationItem]);
|
|
19874
|
-
(0,
|
|
20497
|
+
(0, import_react18.useEffect)(() => {
|
|
19875
20498
|
if (!isEditMode) return;
|
|
19876
20499
|
let lastPosted = 0;
|
|
19877
20500
|
const measure = () => {
|
|
@@ -19915,7 +20538,7 @@ function OhhwellsBridge() {
|
|
|
19915
20538
|
window.removeEventListener("resize", handleResize);
|
|
19916
20539
|
};
|
|
19917
20540
|
}, [pathname, isEditMode, postToParent2]);
|
|
19918
|
-
(0,
|
|
20541
|
+
(0, import_react18.useEffect)(() => {
|
|
19919
20542
|
if (!subdomainFromQuery || isEditMode) return;
|
|
19920
20543
|
const handleClick = (e) => {
|
|
19921
20544
|
const anchor = e.target.closest("a");
|
|
@@ -19931,7 +20554,7 @@ function OhhwellsBridge() {
|
|
|
19931
20554
|
document.addEventListener("click", handleClick, true);
|
|
19932
20555
|
return () => document.removeEventListener("click", handleClick, true);
|
|
19933
20556
|
}, [subdomainFromQuery, isEditMode, router]);
|
|
19934
|
-
(0,
|
|
20557
|
+
(0, import_react18.useEffect)(() => {
|
|
19935
20558
|
if (!isEditMode) {
|
|
19936
20559
|
editStylesRef.current?.base.remove();
|
|
19937
20560
|
editStylesRef.current?.forceHover.remove();
|
|
@@ -20157,11 +20780,11 @@ function OhhwellsBridge() {
|
|
|
20157
20780
|
footer [data-ohw-href-key] [data-ohw-editable][contenteditable],
|
|
20158
20781
|
footer [data-ohw-href-key] [data-ohw-editable][contenteditable] * {
|
|
20159
20782
|
outline: none !important;
|
|
20160
|
-
caret-color: ${
|
|
20783
|
+
caret-color: ${PRIMARY4} !important;
|
|
20161
20784
|
cursor: text !important;
|
|
20162
20785
|
}
|
|
20163
20786
|
[data-ohw-editable][contenteditable]::selection,
|
|
20164
|
-
[data-ohw-editable][contenteditable] *::selection { background: ${
|
|
20787
|
+
[data-ohw-editable][contenteditable] *::selection { background: ${PRIMARY4}59 !important; }
|
|
20165
20788
|
[data-ohw-editable-state], [data-ohw-editable-state] * { pointer-events: none !important; }
|
|
20166
20789
|
[data-ohw-editable-state][data-ohw-active-state] [data-ohw-editable] { pointer-events: auto !important; }
|
|
20167
20790
|
[data-ohw-editable-state][data-ohw-active-state][data-ohw-editable] { pointer-events: auto !important; }
|
|
@@ -21941,10 +22564,7 @@ function OhhwellsBridge() {
|
|
|
21941
22564
|
deselectRef.current();
|
|
21942
22565
|
clearMediaSelectionRef.current();
|
|
21943
22566
|
};
|
|
21944
|
-
const
|
|
21945
|
-
if (e.data?.type !== "ow:ai-apply-tree") return;
|
|
21946
|
-
const payload = e.data.payload;
|
|
21947
|
-
if (!payload || typeof payload.id !== "string" || !isRenderableTree(payload.tree)) return;
|
|
22567
|
+
const applyTreeToLocalState = (payload) => {
|
|
21948
22568
|
clearInteractionChrome();
|
|
21949
22569
|
const previous = aiSectionsRef.current;
|
|
21950
22570
|
const nextState = applyTreeToState(parseAiSectionsState(previous), {
|
|
@@ -21961,7 +22581,17 @@ function OhhwellsBridge() {
|
|
|
21961
22581
|
const top = appliedEl ? appliedEl.getBoundingClientRect().top + window.scrollY : null;
|
|
21962
22582
|
postToParentRef.current({ type: "ow:ai-tree-applied", id: payload.id, previous, value: nextValue, top });
|
|
21963
22583
|
postAiSectionsChanged();
|
|
21964
|
-
|
|
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);
|
|
21965
22595
|
};
|
|
21966
22596
|
window.addEventListener("message", handleAiApplyTree);
|
|
21967
22597
|
const handleAiDeleteSection = (e) => {
|
|
@@ -22988,7 +23618,7 @@ function OhhwellsBridge() {
|
|
|
22988
23618
|
if (imageShowTimerRef.current) clearTimeout(imageShowTimerRef.current);
|
|
22989
23619
|
};
|
|
22990
23620
|
}, [isEditMode, refreshStateRules]);
|
|
22991
|
-
(0,
|
|
23621
|
+
(0, import_react18.useEffect)(() => {
|
|
22992
23622
|
if (!isEditMode) return;
|
|
22993
23623
|
const THRESHOLD = 10;
|
|
22994
23624
|
const resolveWasSelected = (el) => {
|
|
@@ -23144,7 +23774,7 @@ function OhhwellsBridge() {
|
|
|
23144
23774
|
unlockFooterDragInteraction();
|
|
23145
23775
|
};
|
|
23146
23776
|
}, [isEditMode]);
|
|
23147
|
-
(0,
|
|
23777
|
+
(0, import_react18.useEffect)(() => {
|
|
23148
23778
|
const handler = (e) => {
|
|
23149
23779
|
if (e.data?.type !== "ow:request-schedule-config") return;
|
|
23150
23780
|
const insertAfterVal = e.data.insertAfter;
|
|
@@ -23160,7 +23790,7 @@ function OhhwellsBridge() {
|
|
|
23160
23790
|
window.addEventListener("message", handler);
|
|
23161
23791
|
return () => window.removeEventListener("message", handler);
|
|
23162
23792
|
}, [processConfigRequest]);
|
|
23163
|
-
(0,
|
|
23793
|
+
(0, import_react18.useEffect)(() => {
|
|
23164
23794
|
if (!isEditMode) return;
|
|
23165
23795
|
document.querySelectorAll("[data-ohw-active-state]").forEach((el) => {
|
|
23166
23796
|
el.removeAttribute("data-ohw-active-state");
|
|
@@ -23184,7 +23814,7 @@ function OhhwellsBridge() {
|
|
|
23184
23814
|
postToParent2({
|
|
23185
23815
|
type: "ow:ready",
|
|
23186
23816
|
version: "1",
|
|
23187
|
-
bridgeVersion: "0.1.
|
|
23817
|
+
bridgeVersion: "0.1.118",
|
|
23188
23818
|
path: pathname,
|
|
23189
23819
|
nodes: collectEditableNodes(editContentRef.current),
|
|
23190
23820
|
sections
|
|
@@ -23196,13 +23826,13 @@ function OhhwellsBridge() {
|
|
|
23196
23826
|
clearTimeout(timer);
|
|
23197
23827
|
};
|
|
23198
23828
|
}, [pathname, isEditMode, refreshStateRules, postToParent2]);
|
|
23199
|
-
(0,
|
|
23829
|
+
(0, import_react18.useEffect)(() => {
|
|
23200
23830
|
scrollToHashSectionWhenReady();
|
|
23201
23831
|
const onHashChange = () => scrollToHashSectionWhenReady();
|
|
23202
23832
|
window.addEventListener("hashchange", onHashChange);
|
|
23203
23833
|
return () => window.removeEventListener("hashchange", onHashChange);
|
|
23204
23834
|
}, [pathname]);
|
|
23205
|
-
const handleCommand = (0,
|
|
23835
|
+
const handleCommand = (0, import_react18.useCallback)((cmd) => {
|
|
23206
23836
|
const el = activeElRef.current;
|
|
23207
23837
|
const selBefore = window.getSelection();
|
|
23208
23838
|
let savedOffsets = null;
|
|
@@ -23238,7 +23868,7 @@ function OhhwellsBridge() {
|
|
|
23238
23868
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
23239
23869
|
refreshActiveCommandsRef.current();
|
|
23240
23870
|
}, []);
|
|
23241
|
-
(0,
|
|
23871
|
+
(0, import_react18.useEffect)(() => {
|
|
23242
23872
|
const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
|
|
23243
23873
|
if (!session || !logoSizeDraft) return;
|
|
23244
23874
|
const onPanelAction = (e) => {
|
|
@@ -23276,7 +23906,7 @@ function OhhwellsBridge() {
|
|
|
23276
23906
|
window.addEventListener("message", onPanelAction);
|
|
23277
23907
|
return () => window.removeEventListener("message", onPanelAction);
|
|
23278
23908
|
}, [floatingPanel, logoSizeDraft, editorViewport, persistLogoSizeDraft, closeFloatingPanelAndDeselect]);
|
|
23279
|
-
const handleStateChange = (0,
|
|
23909
|
+
const handleStateChange = (0, import_react18.useCallback)((state) => {
|
|
23280
23910
|
if (!activeStateElRef.current) return;
|
|
23281
23911
|
const el = activeStateElRef.current;
|
|
23282
23912
|
if (state === "Default") {
|
|
@@ -23289,7 +23919,7 @@ function OhhwellsBridge() {
|
|
|
23289
23919
|
}
|
|
23290
23920
|
setToggleState((prev) => prev ? { ...prev, activeState: state } : null);
|
|
23291
23921
|
}, [deactivate]);
|
|
23292
|
-
const reselectAfterLinkPopover = (0,
|
|
23922
|
+
const reselectAfterLinkPopover = (0, import_react18.useCallback)(
|
|
23293
23923
|
(hrefKey) => {
|
|
23294
23924
|
requestAnimationFrame(() => {
|
|
23295
23925
|
const el = resolveHrefKeyElement(hrefKey);
|
|
@@ -23298,7 +23928,7 @@ function OhhwellsBridge() {
|
|
|
23298
23928
|
},
|
|
23299
23929
|
[resolveHrefKeyElement]
|
|
23300
23930
|
);
|
|
23301
|
-
const closeLinkPopover = (0,
|
|
23931
|
+
const closeLinkPopover = (0, import_react18.useCallback)(() => {
|
|
23302
23932
|
const session = linkPopoverSessionRef.current;
|
|
23303
23933
|
addNavAfterAnchorRef.current = null;
|
|
23304
23934
|
setLinkPopover(null);
|
|
@@ -23306,9 +23936,9 @@ function OhhwellsBridge() {
|
|
|
23306
23936
|
reselectAfterLinkPopover(session.key);
|
|
23307
23937
|
}
|
|
23308
23938
|
}, [reselectAfterLinkPopover]);
|
|
23309
|
-
const closeLinkPopoverRef = (0,
|
|
23939
|
+
const closeLinkPopoverRef = (0, import_react18.useRef)(closeLinkPopover);
|
|
23310
23940
|
closeLinkPopoverRef.current = closeLinkPopover;
|
|
23311
|
-
const openLinkPopoverForActive = (0,
|
|
23941
|
+
const openLinkPopoverForActive = (0, import_react18.useCallback)(() => {
|
|
23312
23942
|
const hrefCtx = getHrefKeyFromElement(activeElRef.current);
|
|
23313
23943
|
if (!hrefCtx) return;
|
|
23314
23944
|
bumpLinkPopoverGrace();
|
|
@@ -23319,7 +23949,7 @@ function OhhwellsBridge() {
|
|
|
23319
23949
|
});
|
|
23320
23950
|
deactivate();
|
|
23321
23951
|
}, [deactivate]);
|
|
23322
|
-
const openLinkPopoverForSelected = (0,
|
|
23952
|
+
const openLinkPopoverForSelected = (0, import_react18.useCallback)(() => {
|
|
23323
23953
|
const anchor = selectedElRef.current;
|
|
23324
23954
|
if (!anchor) return;
|
|
23325
23955
|
const key = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -23336,7 +23966,7 @@ function OhhwellsBridge() {
|
|
|
23336
23966
|
});
|
|
23337
23967
|
deselect();
|
|
23338
23968
|
}, [deselect]);
|
|
23339
|
-
const handleSelectParent = (0,
|
|
23969
|
+
const handleSelectParent = (0, import_react18.useCallback)(() => {
|
|
23340
23970
|
const selected = selectedElRef.current;
|
|
23341
23971
|
if (!selected) return;
|
|
23342
23972
|
if (toolbarVariantRef.current === "select-frame") {
|
|
@@ -23363,7 +23993,7 @@ function OhhwellsBridge() {
|
|
|
23363
23993
|
}
|
|
23364
23994
|
deselectRef.current();
|
|
23365
23995
|
}, []);
|
|
23366
|
-
const handleDuplicateSelected = (0,
|
|
23996
|
+
const handleDuplicateSelected = (0, import_react18.useCallback)(() => {
|
|
23367
23997
|
const selected = selectedElRef.current;
|
|
23368
23998
|
if (!selected || !isNavigationItem2(selected)) return;
|
|
23369
23999
|
const hrefKey = selected.getAttribute("data-ohw-href-key");
|
|
@@ -23496,7 +24126,7 @@ function OhhwellsBridge() {
|
|
|
23496
24126
|
});
|
|
23497
24127
|
}
|
|
23498
24128
|
}, [postToParent2]);
|
|
23499
|
-
const runPendingDeleteUndo = (0,
|
|
24129
|
+
const runPendingDeleteUndo = (0, import_react18.useCallback)(() => {
|
|
23500
24130
|
const pending = pendingDeleteUndoRef.current;
|
|
23501
24131
|
if (!pending) return false;
|
|
23502
24132
|
pendingDeleteUndoRef.current = null;
|
|
@@ -23504,7 +24134,7 @@ function OhhwellsBridge() {
|
|
|
23504
24134
|
enforceLinkHrefs();
|
|
23505
24135
|
return true;
|
|
23506
24136
|
}, []);
|
|
23507
|
-
const handleDeleteSelected = (0,
|
|
24137
|
+
const handleDeleteSelected = (0, import_react18.useCallback)(() => {
|
|
23508
24138
|
const selected = selectedElRef.current;
|
|
23509
24139
|
if (!selected) return false;
|
|
23510
24140
|
return deleteSelectedNavFooterItem({
|
|
@@ -23525,7 +24155,7 @@ function OhhwellsBridge() {
|
|
|
23525
24155
|
}, [postToParent2]);
|
|
23526
24156
|
handleDeleteSelectedRef.current = handleDeleteSelected;
|
|
23527
24157
|
runPendingDeleteUndoRef.current = runPendingDeleteUndo;
|
|
23528
|
-
const handleLinkPopoverSubmit = (0,
|
|
24158
|
+
const handleLinkPopoverSubmit = (0, import_react18.useCallback)(
|
|
23529
24159
|
(target) => {
|
|
23530
24160
|
const session = linkPopoverSessionRef.current;
|
|
23531
24161
|
if (!session) return;
|
|
@@ -23591,14 +24221,14 @@ function OhhwellsBridge() {
|
|
|
23591
24221
|
const showEditLink = toolbarShowEditLink;
|
|
23592
24222
|
const currentSections = sectionsByPath[pathname] ?? [];
|
|
23593
24223
|
linkPopoverOpenRef.current = linkPopover !== null;
|
|
23594
|
-
const handleMediaSelect = (0,
|
|
24224
|
+
const handleMediaSelect = (0, import_react18.useCallback)((key) => {
|
|
23595
24225
|
const el = hoveredImageRef.current?.dataset.ohwKey === key ? hoveredImageRef.current : Array.from(document.querySelectorAll(MEDIA_SELECTOR)).find(
|
|
23596
24226
|
(m) => (m.dataset.ohwKey ?? "") === key
|
|
23597
24227
|
) ?? null;
|
|
23598
24228
|
if (!el) return;
|
|
23599
24229
|
selectMediaElementRef.current(el);
|
|
23600
24230
|
}, []);
|
|
23601
|
-
const handleMediaReplace = (0,
|
|
24231
|
+
const handleMediaReplace = (0, import_react18.useCallback)(
|
|
23602
24232
|
(key) => {
|
|
23603
24233
|
postToParent2({
|
|
23604
24234
|
type: "ow:image-pick",
|
|
@@ -23608,13 +24238,13 @@ function OhhwellsBridge() {
|
|
|
23608
24238
|
},
|
|
23609
24239
|
[postToParent2, mediaHover?.elementType, selectedMedia?.elementType]
|
|
23610
24240
|
);
|
|
23611
|
-
const handleEditCarousel = (0,
|
|
24241
|
+
const handleEditCarousel = (0, import_react18.useCallback)(
|
|
23612
24242
|
(key) => {
|
|
23613
24243
|
postToParent2({ type: "ow:carousel-open", key, images: readCarouselValue(key) });
|
|
23614
24244
|
},
|
|
23615
24245
|
[postToParent2]
|
|
23616
24246
|
);
|
|
23617
|
-
const handleMediaFadeOutComplete = (0,
|
|
24247
|
+
const handleMediaFadeOutComplete = (0, import_react18.useCallback)((key) => {
|
|
23618
24248
|
setUploadingRects((prev) => {
|
|
23619
24249
|
if (!(key in prev)) return prev;
|
|
23620
24250
|
const next = { ...prev };
|
|
@@ -23622,7 +24252,7 @@ function OhhwellsBridge() {
|
|
|
23622
24252
|
return next;
|
|
23623
24253
|
});
|
|
23624
24254
|
}, []);
|
|
23625
|
-
const handleVideoSettingsChange = (0,
|
|
24255
|
+
const handleVideoSettingsChange = (0, import_react18.useCallback)(
|
|
23626
24256
|
(key, settings) => {
|
|
23627
24257
|
document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
|
|
23628
24258
|
const video = getVideoEl2(el);
|
|
@@ -23644,14 +24274,14 @@ function OhhwellsBridge() {
|
|
|
23644
24274
|
},
|
|
23645
24275
|
[postToParent2]
|
|
23646
24276
|
);
|
|
23647
|
-
return /* @__PURE__ */ (0,
|
|
23648
|
-
/* @__PURE__ */ (0,
|
|
23649
|
-
/* @__PURE__ */ (0,
|
|
23650
|
-
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, {}),
|
|
23651
24281
|
bridgeRoot ? (0, import_react_dom5.createPortal)(
|
|
23652
|
-
/* @__PURE__ */ (0,
|
|
23653
|
-
/* @__PURE__ */ (0,
|
|
23654
|
-
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)(
|
|
23655
24285
|
AiSectionOverlay,
|
|
23656
24286
|
{
|
|
23657
24287
|
postToParent: postToParent2,
|
|
@@ -23659,12 +24289,20 @@ function OhhwellsBridge() {
|
|
|
23659
24289
|
onSelectionChange: handleAiSectionSelectionChange
|
|
23660
24290
|
}
|
|
23661
24291
|
),
|
|
23662
|
-
|
|
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)(
|
|
23663
24301
|
"div",
|
|
23664
24302
|
{
|
|
23665
24303
|
className: "pointer-events-none fixed z-2147483646",
|
|
23666
24304
|
style: { left: slot.left, top: slot.y, width: slot.width, height: 3, transform: "translateY(-50%)" },
|
|
23667
|
-
children: /* @__PURE__ */ (0,
|
|
24305
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23668
24306
|
DropIndicator,
|
|
23669
24307
|
{
|
|
23670
24308
|
direction: "horizontal",
|
|
@@ -23675,7 +24313,7 @@ function OhhwellsBridge() {
|
|
|
23675
24313
|
},
|
|
23676
24314
|
`section-drop-${slot.insertIndex}-${i}`
|
|
23677
24315
|
)),
|
|
23678
|
-
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0,
|
|
24316
|
+
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23679
24317
|
MediaOverlay,
|
|
23680
24318
|
{
|
|
23681
24319
|
hover: { key, rect, elementType: "image", isDragOver: false, hasTextOverlap: false },
|
|
@@ -23686,7 +24324,7 @@ function OhhwellsBridge() {
|
|
|
23686
24324
|
},
|
|
23687
24325
|
`uploading-${key}`
|
|
23688
24326
|
)),
|
|
23689
|
-
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)(
|
|
23690
24328
|
MediaOverlay,
|
|
23691
24329
|
{
|
|
23692
24330
|
hover: mediaHover,
|
|
@@ -23697,7 +24335,7 @@ function OhhwellsBridge() {
|
|
|
23697
24335
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
23698
24336
|
}
|
|
23699
24337
|
),
|
|
23700
|
-
selectedMedia && !(selectedMedia.key in uploadingRects) && !linkPopover && /* @__PURE__ */ (0,
|
|
24338
|
+
selectedMedia && !(selectedMedia.key in uploadingRects) && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23701
24339
|
MediaOverlay,
|
|
23702
24340
|
{
|
|
23703
24341
|
hover: selectedMedia,
|
|
@@ -23709,7 +24347,7 @@ function OhhwellsBridge() {
|
|
|
23709
24347
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
23710
24348
|
}
|
|
23711
24349
|
),
|
|
23712
|
-
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0,
|
|
24350
|
+
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23713
24351
|
CarouselOverlay,
|
|
23714
24352
|
{
|
|
23715
24353
|
hover: carouselHover,
|
|
@@ -23717,10 +24355,10 @@ function OhhwellsBridge() {
|
|
|
23717
24355
|
cueOnly: !!carouselHover.fullBleedSectionId && carouselHover.fullBleedSectionId !== selectedAiSectionId
|
|
23718
24356
|
}
|
|
23719
24357
|
),
|
|
23720
|
-
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0,
|
|
23721
|
-
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0,
|
|
23722
|
-
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */ (0,
|
|
23723
|
-
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)(
|
|
23724
24362
|
"div",
|
|
23725
24363
|
{
|
|
23726
24364
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -23730,7 +24368,7 @@ function OhhwellsBridge() {
|
|
|
23730
24368
|
width: slot.width,
|
|
23731
24369
|
height: slot.height
|
|
23732
24370
|
},
|
|
23733
|
-
children: /* @__PURE__ */ (0,
|
|
24371
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23734
24372
|
DropIndicator,
|
|
23735
24373
|
{
|
|
23736
24374
|
direction: slot.direction,
|
|
@@ -23741,7 +24379,7 @@ function OhhwellsBridge() {
|
|
|
23741
24379
|
},
|
|
23742
24380
|
`footer-drop-${slot.direction}-${slot.columnIndex}-${slot.insertIndex}-${i}`
|
|
23743
24381
|
)),
|
|
23744
|
-
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
24382
|
+
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23745
24383
|
"div",
|
|
23746
24384
|
{
|
|
23747
24385
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -23751,7 +24389,7 @@ function OhhwellsBridge() {
|
|
|
23751
24389
|
width: slot.width,
|
|
23752
24390
|
height: slot.height
|
|
23753
24391
|
},
|
|
23754
|
-
children: /* @__PURE__ */ (0,
|
|
24392
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23755
24393
|
DropIndicator,
|
|
23756
24394
|
{
|
|
23757
24395
|
direction: slot.direction,
|
|
@@ -23762,10 +24400,10 @@ function OhhwellsBridge() {
|
|
|
23762
24400
|
},
|
|
23763
24401
|
`nav-drop-${slot.direction}-${slot.parentId ?? "root"}-${slot.insertIndex}-${i}`
|
|
23764
24402
|
)),
|
|
23765
|
-
hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ (0,
|
|
23766
|
-
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0,
|
|
23767
|
-
hoveredTextRect && !hoveredNavContainerRect && !hoveredItemRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0,
|
|
23768
|
-
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)(
|
|
23769
24407
|
ItemInteractionLayer,
|
|
23770
24408
|
{
|
|
23771
24409
|
rect: formPickRect,
|
|
@@ -23773,13 +24411,13 @@ function OhhwellsBridge() {
|
|
|
23773
24411
|
itemDragSurface: false,
|
|
23774
24412
|
toolbarAlign: "left",
|
|
23775
24413
|
chromeGap: 24,
|
|
23776
|
-
toolbar: fieldPickRect ? void 0 : /* @__PURE__ */ (0,
|
|
24414
|
+
toolbar: fieldPickRect ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
23777
24415
|
"div",
|
|
23778
24416
|
{
|
|
23779
24417
|
"data-ohw-form-toolbar": "",
|
|
23780
24418
|
className: "pointer-events-auto flex items-center gap-0.5 whitespace-nowrap rounded-lg border border-border bg-background p-1 shadow-md",
|
|
23781
24419
|
children: [
|
|
23782
|
-
/* @__PURE__ */ (0,
|
|
24420
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23783
24421
|
"button",
|
|
23784
24422
|
{
|
|
23785
24423
|
type: "button",
|
|
@@ -23787,11 +24425,11 @@ function OhhwellsBridge() {
|
|
|
23787
24425
|
className: "flex h-7 w-7 items-center justify-center rounded-md text-foreground transition-colors hover:bg-muted/80",
|
|
23788
24426
|
onClick: () => setFieldTypePickerOpen((open) => !open),
|
|
23789
24427
|
"data-ohw-add-field": "",
|
|
23790
|
-
children: /* @__PURE__ */ (0,
|
|
24428
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.Plus, { size: 15, "aria-hidden": true })
|
|
23791
24429
|
}
|
|
23792
24430
|
),
|
|
23793
|
-
/* @__PURE__ */ (0,
|
|
23794
|
-
/* @__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)(
|
|
23795
24433
|
"button",
|
|
23796
24434
|
{
|
|
23797
24435
|
type: "button",
|
|
@@ -23807,11 +24445,11 @@ function OhhwellsBridge() {
|
|
|
23807
24445
|
});
|
|
23808
24446
|
},
|
|
23809
24447
|
children: [
|
|
23810
|
-
/* @__PURE__ */ (0,
|
|
24448
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.Settings, { size: 14, "aria-hidden": true }),
|
|
23811
24449
|
"Form settings",
|
|
23812
24450
|
formPickCount ? (
|
|
23813
24451
|
// Counter pill, per the design — not a text suffix.
|
|
23814
|
-
/* @__PURE__ */ (0,
|
|
24452
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23815
24453
|
"span",
|
|
23816
24454
|
{
|
|
23817
24455
|
"data-ohw-form-count": "",
|
|
@@ -23823,8 +24461,8 @@ function OhhwellsBridge() {
|
|
|
23823
24461
|
]
|
|
23824
24462
|
}
|
|
23825
24463
|
),
|
|
23826
|
-
/* @__PURE__ */ (0,
|
|
23827
|
-
/* @__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)(
|
|
23828
24466
|
"button",
|
|
23829
24467
|
{
|
|
23830
24468
|
type: "button",
|
|
@@ -23855,7 +24493,7 @@ function OhhwellsBridge() {
|
|
|
23855
24493
|
)
|
|
23856
24494
|
}
|
|
23857
24495
|
),
|
|
23858
|
-
formHoverRect && !isItemDragging && /* @__PURE__ */ (0,
|
|
24496
|
+
formHoverRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23859
24497
|
ItemInteractionLayer,
|
|
23860
24498
|
{
|
|
23861
24499
|
rect: formHoverRect,
|
|
@@ -23863,7 +24501,7 @@ function OhhwellsBridge() {
|
|
|
23863
24501
|
chromeGap: formHoverElRef.current && getFieldWrapper(formHoverElRef.current) ? 8 : 24
|
|
23864
24502
|
}
|
|
23865
24503
|
),
|
|
23866
|
-
fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0,
|
|
24504
|
+
fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23867
24505
|
ItemInteractionLayer,
|
|
23868
24506
|
{
|
|
23869
24507
|
rect: fieldPickRect,
|
|
@@ -23875,7 +24513,7 @@ function OhhwellsBridge() {
|
|
|
23875
24513
|
dragHandleLabel: "Reorder field",
|
|
23876
24514
|
onDragHandleDragStart: handleFieldDragStart,
|
|
23877
24515
|
onDragHandleDragEnd: handleFieldDragEnd,
|
|
23878
|
-
toolbar: /* @__PURE__ */ (0,
|
|
24516
|
+
toolbar: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23879
24517
|
FormFieldToolbar,
|
|
23880
24518
|
{
|
|
23881
24519
|
type: fieldPickState.type,
|
|
@@ -23888,12 +24526,12 @@ function OhhwellsBridge() {
|
|
|
23888
24526
|
)
|
|
23889
24527
|
}
|
|
23890
24528
|
),
|
|
23891
|
-
fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
24529
|
+
fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23892
24530
|
"div",
|
|
23893
24531
|
{
|
|
23894
24532
|
className: "pointer-events-none fixed z-[2147483644]",
|
|
23895
24533
|
style: { top: slot.top, left: slot.left, width: slot.width },
|
|
23896
|
-
children: /* @__PURE__ */ (0,
|
|
24534
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23897
24535
|
DropIndicator,
|
|
23898
24536
|
{
|
|
23899
24537
|
direction: "horizontal",
|
|
@@ -23906,7 +24544,7 @@ function OhhwellsBridge() {
|
|
|
23906
24544
|
)) : null,
|
|
23907
24545
|
fieldTypePickerOpen && formPickRect ? (() => {
|
|
23908
24546
|
const toolbar = document.querySelector("[data-ohw-form-toolbar]")?.getBoundingClientRect();
|
|
23909
|
-
return /* @__PURE__ */ (0,
|
|
24547
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
23910
24548
|
"div",
|
|
23911
24549
|
{
|
|
23912
24550
|
className: "pointer-events-none fixed z-[2147483645]",
|
|
@@ -23914,12 +24552,12 @@ function OhhwellsBridge() {
|
|
|
23914
24552
|
top: toolbar ? toolbar.bottom + 6 : formPickRect.top + 16,
|
|
23915
24553
|
left: toolbar ? toolbar.left : formPickRect.left + 24
|
|
23916
24554
|
},
|
|
23917
|
-
children: /* @__PURE__ */ (0,
|
|
24555
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(FieldTypePicker, { onPick: handleAddField })
|
|
23918
24556
|
}
|
|
23919
24557
|
);
|
|
23920
24558
|
})() : null,
|
|
23921
|
-
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ (0,
|
|
23922
|
-
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)(
|
|
23923
24561
|
FooterContainerChrome,
|
|
23924
24562
|
{
|
|
23925
24563
|
rect: toolbarRect,
|
|
@@ -23927,7 +24565,7 @@ function OhhwellsBridge() {
|
|
|
23927
24565
|
addDisabled: !canAddFooterColumn()
|
|
23928
24566
|
}
|
|
23929
24567
|
),
|
|
23930
|
-
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)(
|
|
23931
24569
|
ItemInteractionLayer,
|
|
23932
24570
|
{
|
|
23933
24571
|
rect: isItemDragging && draggedItemRect && (footerDragRef.current?.wasSelected || navDragRef.current?.wasSelected) ? draggedItemRect : toolbarRect,
|
|
@@ -23943,7 +24581,7 @@ function OhhwellsBridge() {
|
|
|
23943
24581
|
onItemPointerDown: toolbarVariant === "logo" ? void 0 : handleItemChromePointerDown,
|
|
23944
24582
|
onItemClick: toolbarVariant === "logo" ? void 0 : handleItemChromeClick,
|
|
23945
24583
|
itemDragSurface: toolbarVariant !== "logo" && !isFooterFrameSelection && !selectedIsSocialsRow,
|
|
23946
|
-
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)(
|
|
23947
24585
|
ItemActionToolbar,
|
|
23948
24586
|
{
|
|
23949
24587
|
onEditLink: openLinkPopoverForSelected,
|
|
@@ -23987,8 +24625,8 @@ function OhhwellsBridge() {
|
|
|
23987
24625
|
) : void 0
|
|
23988
24626
|
}
|
|
23989
24627
|
),
|
|
23990
|
-
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && !isRectOutsideClip(toolbarRect, getIframeVisibleClip(parentScrollRef.current)) && /* @__PURE__ */ (0,
|
|
23991
|
-
/* @__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)(
|
|
23992
24630
|
EditGlowChrome,
|
|
23993
24631
|
{
|
|
23994
24632
|
rect: toolbarRect,
|
|
@@ -23998,7 +24636,7 @@ function OhhwellsBridge() {
|
|
|
23998
24636
|
hideHandle: isItemDragging
|
|
23999
24637
|
}
|
|
24000
24638
|
),
|
|
24001
|
-
/* @__PURE__ */ (0,
|
|
24639
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
24002
24640
|
FloatingToolbar,
|
|
24003
24641
|
{
|
|
24004
24642
|
rect: toolbarRect,
|
|
@@ -24011,7 +24649,7 @@ function OhhwellsBridge() {
|
|
|
24011
24649
|
}
|
|
24012
24650
|
)
|
|
24013
24651
|
] }),
|
|
24014
|
-
maxBadge && /* @__PURE__ */ (0,
|
|
24652
|
+
maxBadge && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
24015
24653
|
"div",
|
|
24016
24654
|
{
|
|
24017
24655
|
"data-ohw-max-badge": "",
|
|
@@ -24037,7 +24675,7 @@ function OhhwellsBridge() {
|
|
|
24037
24675
|
]
|
|
24038
24676
|
}
|
|
24039
24677
|
),
|
|
24040
|
-
toggleState && !linkPopover && /* @__PURE__ */ (0,
|
|
24678
|
+
toggleState && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
24041
24679
|
StateToggle,
|
|
24042
24680
|
{
|
|
24043
24681
|
rect: toggleState.rect,
|
|
@@ -24046,15 +24684,15 @@ function OhhwellsBridge() {
|
|
|
24046
24684
|
onStateChange: handleStateChange
|
|
24047
24685
|
}
|
|
24048
24686
|
),
|
|
24049
|
-
sectionGap && !linkPopover && /* @__PURE__ */ (0,
|
|
24687
|
+
sectionGap && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
24050
24688
|
"div",
|
|
24051
24689
|
{
|
|
24052
24690
|
"data-ohw-section-insert-line": "",
|
|
24053
24691
|
className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
|
|
24054
24692
|
style: { top: sectionGap.y, transform: "translateY(-50%)" },
|
|
24055
24693
|
children: [
|
|
24056
|
-
/* @__PURE__ */ (0,
|
|
24057
|
-
/* @__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)(
|
|
24058
24696
|
Badge,
|
|
24059
24697
|
{
|
|
24060
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",
|
|
@@ -24071,11 +24709,11 @@ function OhhwellsBridge() {
|
|
|
24071
24709
|
children: "Add Section"
|
|
24072
24710
|
}
|
|
24073
24711
|
),
|
|
24074
|
-
/* @__PURE__ */ (0,
|
|
24712
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } })
|
|
24075
24713
|
]
|
|
24076
24714
|
}
|
|
24077
24715
|
),
|
|
24078
|
-
linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0,
|
|
24716
|
+
linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
24079
24717
|
LinkPopover,
|
|
24080
24718
|
{
|
|
24081
24719
|
panelRef: linkPopoverPanelRef,
|
|
@@ -24092,7 +24730,7 @@ function OhhwellsBridge() {
|
|
|
24092
24730
|
},
|
|
24093
24731
|
linkPopover.key
|
|
24094
24732
|
) : null,
|
|
24095
|
-
floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */ (0,
|
|
24733
|
+
floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
24096
24734
|
FloatingPanel,
|
|
24097
24735
|
{
|
|
24098
24736
|
open: true,
|
|
@@ -24102,7 +24740,7 @@ function OhhwellsBridge() {
|
|
|
24102
24740
|
onPositionChange: setFloatingPanelPos,
|
|
24103
24741
|
parentScroll: parentScrollSnap ?? parentScrollRef.current,
|
|
24104
24742
|
onClose: closeFloatingPanelOnly,
|
|
24105
|
-
children: /* @__PURE__ */ (0,
|
|
24743
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
24106
24744
|
SocialsDisplayPanel,
|
|
24107
24745
|
{
|
|
24108
24746
|
display: socialsDisplayFor(floatingPanel.row, editContentRef.current),
|