@ohhwells/bridge 0.1.119 → 0.1.120
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 +1560 -651
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +11 -2
- package/dist/index.d.ts +11 -2
- package/dist/index.js +1576 -667
- package/dist/index.js.map +1 -1
- package/dist/styles.css +7 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
// src/OhhwellsBridge.tsx
|
|
4
|
-
import React12, { useCallback as
|
|
4
|
+
import React12, { useCallback as useCallback10, useEffect as useEffect15, useLayoutEffect as useLayoutEffect5, useRef as useRef12, useState as useState16 } from "react";
|
|
5
5
|
import { createRoot as createRoot2 } from "react-dom/client";
|
|
6
6
|
import { flushSync as flushSync2 } from "react-dom";
|
|
7
7
|
|
|
@@ -1424,12 +1424,20 @@ function MediaBox({
|
|
|
1424
1424
|
aspect,
|
|
1425
1425
|
radius,
|
|
1426
1426
|
height,
|
|
1427
|
-
editPath
|
|
1427
|
+
editPath,
|
|
1428
|
+
alt,
|
|
1429
|
+
fit,
|
|
1430
|
+
grayscale,
|
|
1431
|
+
fixedSize,
|
|
1432
|
+
genericImageEdit = true
|
|
1428
1433
|
}) {
|
|
1429
1434
|
const url = refValue ? ctx.resolveMedia(refValue) : null;
|
|
1430
1435
|
const isIcon = /^(lucide|simple):/.test(refValue);
|
|
1431
1436
|
const aspectRatio = aspect && /^\d+:\d+$/.test(aspect) ? aspect.replace(":", " / ") : void 0;
|
|
1432
|
-
const editAttrs = ctx.keyFor && editPath && !isIcon ? {
|
|
1437
|
+
const editAttrs = ctx.keyFor && editPath && !isIcon ? {
|
|
1438
|
+
"data-ohw-key": ctx.keyFor(editPath),
|
|
1439
|
+
...genericImageEdit ? { "data-ohw-editable": "image" } : {}
|
|
1440
|
+
} : {};
|
|
1433
1441
|
if (isIcon) {
|
|
1434
1442
|
const Icon = refValue.startsWith("lucide:") ? lucideByName(refValue.slice(7)) : null;
|
|
1435
1443
|
return /* @__PURE__ */ jsx(
|
|
@@ -1454,9 +1462,10 @@ function MediaBox({
|
|
|
1454
1462
|
{
|
|
1455
1463
|
...editAttrs,
|
|
1456
1464
|
style: {
|
|
1457
|
-
width: "100%",
|
|
1465
|
+
width: fixedSize ? "auto" : "100%",
|
|
1458
1466
|
aspectRatio,
|
|
1459
|
-
|
|
1467
|
+
height: fixedSize ? height : void 0,
|
|
1468
|
+
minHeight: fixedSize ? void 0 : height ?? (aspectRatio ? void 0 : 180),
|
|
1460
1469
|
borderRadius: radius,
|
|
1461
1470
|
overflow: "hidden",
|
|
1462
1471
|
background: "#DBEAFE",
|
|
@@ -1464,7 +1473,8 @@ function MediaBox({
|
|
|
1464
1473
|
alignItems: "center",
|
|
1465
1474
|
justifyContent: "center",
|
|
1466
1475
|
color: "#93C5FD",
|
|
1467
|
-
fontSize: 13
|
|
1476
|
+
fontSize: 13,
|
|
1477
|
+
filter: grayscale ? "grayscale(1)" : void 0
|
|
1468
1478
|
},
|
|
1469
1479
|
children: url || keyed ? (
|
|
1470
1480
|
// Keyed slots always mount an <img> so hydrate overrides have a target.
|
|
@@ -1472,8 +1482,13 @@ function MediaBox({
|
|
|
1472
1482
|
"img",
|
|
1473
1483
|
{
|
|
1474
1484
|
src: url ?? TRANSPARENT_PX,
|
|
1475
|
-
alt: "",
|
|
1476
|
-
style: {
|
|
1485
|
+
alt: alt ?? "",
|
|
1486
|
+
style: {
|
|
1487
|
+
width: fixedSize ? "auto" : "100%",
|
|
1488
|
+
height: "100%",
|
|
1489
|
+
objectFit: fit ?? "cover",
|
|
1490
|
+
display: "block"
|
|
1491
|
+
}
|
|
1477
1492
|
}
|
|
1478
1493
|
)
|
|
1479
1494
|
) : refValue || "media"
|
|
@@ -2126,7 +2141,8 @@ function toggleAccordionItem(button) {
|
|
|
2126
2141
|
}
|
|
2127
2142
|
function AccordionBlock({ node, ctx, path }) {
|
|
2128
2143
|
const rule = `1px solid ${ctx.brand.palette.dark}33`;
|
|
2129
|
-
|
|
2144
|
+
const items = node.items ?? [];
|
|
2145
|
+
return /* @__PURE__ */ jsx("div", { "data-ai-accordion": "", style: { borderTop: rule }, children: items.map((item, i) => /* @__PURE__ */ jsxs("div", { style: { borderBottom: rule }, children: [
|
|
2130
2146
|
/* @__PURE__ */ jsxs(
|
|
2131
2147
|
"button",
|
|
2132
2148
|
{
|
|
@@ -2179,6 +2195,94 @@ function AccordionBlock({ node, ctx, path }) {
|
|
|
2179
2195
|
) })
|
|
2180
2196
|
] }, i)) });
|
|
2181
2197
|
}
|
|
2198
|
+
function MediaStripBlock({ node, ctx, path }) {
|
|
2199
|
+
const slots = node.slots ?? {};
|
|
2200
|
+
const items = node.items ?? [];
|
|
2201
|
+
const variant = slots.variant === "reel" ? "reel" : "logos";
|
|
2202
|
+
const align = slots.align === "left" || slots.align === "right" ? slots.align : "center";
|
|
2203
|
+
const treatment = slots.treatment === "color" || slots.treatment === "grayscale" ? slots.treatment : variant === "logos" ? "grayscale" : "color";
|
|
2204
|
+
const logoMaxHeight = typeof slots.logoMaxHeight === "number" ? slots.logoMaxHeight : 48;
|
|
2205
|
+
const cardWidth = typeof slots.cardWidth === "number" ? slots.cardWidth : 240;
|
|
2206
|
+
const justify = align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center";
|
|
2207
|
+
const label = str(slots.label);
|
|
2208
|
+
return /* @__PURE__ */ jsxs("div", { "data-ohw-media-strip": "", style: { display: "flex", flexDirection: "column", gap: AI_TREE_TOKENS.spacing6 }, children: [
|
|
2209
|
+
/* @__PURE__ */ jsx("style", {
|
|
2210
|
+
// Host sites often style `a:hover{opacity}` globally — that would fade every linked item
|
|
2211
|
+
// whatever preset is chosen, so the anchors here opt out and only the preset applies.
|
|
2212
|
+
children: '[data-ohw-media-strip] a,[data-ohw-media-strip] a:hover{opacity:1}[data-ohw-media-strip-hover]{transition:transform 0.2s ease, opacity 0.2s ease}[data-ohw-media-strip-item]:hover>[data-ohw-media-strip-hover="lift"]{transform:translateY(-4px)}[data-ohw-media-strip-item]:hover>[data-ohw-media-strip-hover="zoom"]{transform:scale(1.05)}[data-ohw-media-strip-item]:hover>[data-ohw-media-strip-hover="fade"]{opacity:0.75}'
|
|
2213
|
+
}),
|
|
2214
|
+
label && /* @__PURE__ */ jsx(
|
|
2215
|
+
"div",
|
|
2216
|
+
{
|
|
2217
|
+
...textAttrs(ctx, `${path}.label`),
|
|
2218
|
+
style: {
|
|
2219
|
+
...typeStyle(AI_TREE_TOKENS.type.eyebrow, ctx.brand.fonts.body),
|
|
2220
|
+
color: ctx.brand.palette.accent,
|
|
2221
|
+
textAlign: align
|
|
2222
|
+
},
|
|
2223
|
+
children: label
|
|
2224
|
+
}
|
|
2225
|
+
),
|
|
2226
|
+
/* @__PURE__ */ jsx(
|
|
2227
|
+
"div",
|
|
2228
|
+
{
|
|
2229
|
+
style: {
|
|
2230
|
+
display: "flex",
|
|
2231
|
+
flexWrap: "wrap",
|
|
2232
|
+
gap: AI_TREE_TOKENS.spacing4,
|
|
2233
|
+
justifyContent: justify,
|
|
2234
|
+
alignItems: variant === "logos" ? "center" : "flex-start"
|
|
2235
|
+
},
|
|
2236
|
+
children: items.map((item, i) => {
|
|
2237
|
+
const hasLink = typeof item.href === "string" && item.href.length > 0;
|
|
2238
|
+
const hoverPreset = !hasLink ? "none" : slots.hover === "none" || slots.hover === "lift" || slots.hover === "zoom" || slots.hover === "fade" ? slots.hover : "lift";
|
|
2239
|
+
const box = /* @__PURE__ */ jsx(
|
|
2240
|
+
"div",
|
|
2241
|
+
{
|
|
2242
|
+
"data-ohw-media-strip-item": "",
|
|
2243
|
+
"data-ohw-media-strip-index": i,
|
|
2244
|
+
style: variant === "logos" ? { height: logoMaxHeight, width: "auto" } : { width: cardWidth, flexShrink: 0 },
|
|
2245
|
+
children: /* @__PURE__ */ jsx(
|
|
2246
|
+
"div",
|
|
2247
|
+
{
|
|
2248
|
+
"data-ohw-media-strip-hover": hoverPreset === "none" ? void 0 : hoverPreset,
|
|
2249
|
+
style: { height: "100%" },
|
|
2250
|
+
children: /* @__PURE__ */ jsx(
|
|
2251
|
+
MediaBox,
|
|
2252
|
+
{
|
|
2253
|
+
refValue: item.assetId,
|
|
2254
|
+
ctx,
|
|
2255
|
+
aspect: variant === "reel" ? "9:16" : void 0,
|
|
2256
|
+
radius: variant === "reel" ? AI_TREE_TOKENS.radiusCard : 4,
|
|
2257
|
+
height: variant === "logos" ? logoMaxHeight : void 0,
|
|
2258
|
+
editPath: `${path}.items.${i}.assetId`,
|
|
2259
|
+
alt: item.alt,
|
|
2260
|
+
fit: variant === "logos" ? "contain" : "cover",
|
|
2261
|
+
grayscale: treatment === "grayscale",
|
|
2262
|
+
fixedSize: variant === "logos",
|
|
2263
|
+
genericImageEdit: false
|
|
2264
|
+
}
|
|
2265
|
+
)
|
|
2266
|
+
}
|
|
2267
|
+
)
|
|
2268
|
+
}
|
|
2269
|
+
);
|
|
2270
|
+
return hasLink ? /* @__PURE__ */ jsx(
|
|
2271
|
+
"a",
|
|
2272
|
+
{
|
|
2273
|
+
href: item.href,
|
|
2274
|
+
target: item.linkTarget === "same-tab" ? void 0 : "_blank",
|
|
2275
|
+
rel: item.linkTarget === "same-tab" ? void 0 : "noopener noreferrer",
|
|
2276
|
+
style: { display: "block", textDecoration: "none" },
|
|
2277
|
+
children: box
|
|
2278
|
+
},
|
|
2279
|
+
i
|
|
2280
|
+
) : /* @__PURE__ */ jsx(React.Fragment, { children: box }, i);
|
|
2281
|
+
})
|
|
2282
|
+
}
|
|
2283
|
+
)
|
|
2284
|
+
] });
|
|
2285
|
+
}
|
|
2182
2286
|
function useIsMobile() {
|
|
2183
2287
|
const [mobile, setMobile] = React.useState(
|
|
2184
2288
|
() => typeof window !== "undefined" && window.matchMedia("(max-width: 768px)").matches
|
|
@@ -2510,6 +2614,8 @@ function renderNode(node, ctx, path) {
|
|
|
2510
2614
|
return /* @__PURE__ */ jsx(CollectionBlock, { node, ctx, path });
|
|
2511
2615
|
case "accordion":
|
|
2512
2616
|
return /* @__PURE__ */ jsx(AccordionBlock, { node, ctx, path });
|
|
2617
|
+
case "media-strip":
|
|
2618
|
+
return /* @__PURE__ */ jsx(MediaStripBlock, { node, ctx, path });
|
|
2513
2619
|
case "embed": {
|
|
2514
2620
|
const child = (node.children ?? [])[0];
|
|
2515
2621
|
if (child) {
|
|
@@ -3007,21 +3113,21 @@ function placeContainer(container, entry) {
|
|
|
3007
3113
|
const original = findTemplateSection(entry.replaces);
|
|
3008
3114
|
if (original) {
|
|
3009
3115
|
original.insertAdjacentElement("afterend", container);
|
|
3010
|
-
return;
|
|
3116
|
+
return "anchored";
|
|
3011
3117
|
}
|
|
3012
3118
|
}
|
|
3013
3119
|
if (entry.beforeSection) {
|
|
3014
3120
|
const anchor = findPlacementAnchor(entry.beforeSection, container);
|
|
3015
3121
|
if (anchor) {
|
|
3016
3122
|
anchor.insertAdjacentElement("beforebegin", container);
|
|
3017
|
-
return;
|
|
3123
|
+
return "anchored";
|
|
3018
3124
|
}
|
|
3019
3125
|
}
|
|
3020
3126
|
if (entry.afterSection) {
|
|
3021
3127
|
const anchor = findPlacementAnchor(entry.afterSection, container);
|
|
3022
3128
|
if (anchor) {
|
|
3023
3129
|
anchor.insertAdjacentElement("afterend", container);
|
|
3024
|
-
return;
|
|
3130
|
+
return "anchored";
|
|
3025
3131
|
}
|
|
3026
3132
|
}
|
|
3027
3133
|
const footer = findFooterSection();
|
|
@@ -3030,6 +3136,7 @@ function placeContainer(container, entry) {
|
|
|
3030
3136
|
} else {
|
|
3031
3137
|
document.body.appendChild(container);
|
|
3032
3138
|
}
|
|
3139
|
+
return "fallback";
|
|
3033
3140
|
}
|
|
3034
3141
|
function syncRemovedSections(state) {
|
|
3035
3142
|
const removed = new Set(state.removed ?? []);
|
|
@@ -3086,6 +3193,10 @@ function syncReplacedOriginals(state) {
|
|
|
3086
3193
|
}
|
|
3087
3194
|
var sectionOrderIndex = /* @__PURE__ */ new Map();
|
|
3088
3195
|
var removedSectionIds = /* @__PURE__ */ new Set();
|
|
3196
|
+
var persistSectionOrder = null;
|
|
3197
|
+
function setSectionOrderPersistHandler(handler) {
|
|
3198
|
+
persistSectionOrder = handler;
|
|
3199
|
+
}
|
|
3089
3200
|
function setAiSectionOrder(raw, currentPath) {
|
|
3090
3201
|
const next = /* @__PURE__ */ new Map();
|
|
3091
3202
|
const removed = /* @__PURE__ */ new Set();
|
|
@@ -3166,16 +3277,16 @@ function applyAiSectionsToDom(state, options) {
|
|
|
3166
3277
|
mounted.delete(id);
|
|
3167
3278
|
}
|
|
3168
3279
|
}
|
|
3280
|
+
const newlyAnchoredIds = [];
|
|
3169
3281
|
for (const entry of ordered) {
|
|
3170
3282
|
const serialized = JSON.stringify(entry) + brandKey;
|
|
3171
3283
|
const existing = mounted.get(entry.id);
|
|
3172
3284
|
if (existing && existing.serialized === serialized && existing.container.isConnected) {
|
|
3173
3285
|
continue;
|
|
3174
3286
|
}
|
|
3287
|
+
const isNewMount = !existing || !existing.container.isConnected;
|
|
3175
3288
|
let container = existing?.container;
|
|
3176
|
-
let isNewMount = false;
|
|
3177
3289
|
if (!container || !container.isConnected) {
|
|
3178
|
-
isNewMount = true;
|
|
3179
3290
|
existing?.root.unmount();
|
|
3180
3291
|
container?.remove();
|
|
3181
3292
|
container = document.createElement("div");
|
|
@@ -3185,7 +3296,10 @@ function applyAiSectionsToDom(state, options) {
|
|
|
3185
3296
|
container.setAttribute("data-ohw-section", entry.id);
|
|
3186
3297
|
container.setAttribute("data-ohw-instance", entry.id);
|
|
3187
3298
|
container.setAttribute("data-ohw-section-label", entry.label);
|
|
3188
|
-
if (isNewMount)
|
|
3299
|
+
if (isNewMount) {
|
|
3300
|
+
const mode = placeContainer(container, entry);
|
|
3301
|
+
if (mode === "anchored" && !sectionOrderIndex.has(entry.id)) newlyAnchoredIds.push(entry.id);
|
|
3302
|
+
}
|
|
3189
3303
|
const root = mounted.get(entry.id)?.root ?? createRoot(container);
|
|
3190
3304
|
const resolveMedia = (ref) => entry.media[ref] ?? null;
|
|
3191
3305
|
flushSync(() => {
|
|
@@ -3215,6 +3329,16 @@ function applyAiSectionsToDom(state, options) {
|
|
|
3215
3329
|
prev = el;
|
|
3216
3330
|
}
|
|
3217
3331
|
}
|
|
3332
|
+
if (newlyAnchoredIds.length > 0 && persistSectionOrder) {
|
|
3333
|
+
const snapshot = topLevelSections().map((el, order) => ({
|
|
3334
|
+
instanceId: instanceIdOf(el),
|
|
3335
|
+
type: el.getAttribute("data-ohw-section") ?? "",
|
|
3336
|
+
order,
|
|
3337
|
+
pagePath
|
|
3338
|
+
}));
|
|
3339
|
+
for (const snapEntry of snapshot) sectionOrderIndex.set(snapEntry.instanceId, snapEntry.order);
|
|
3340
|
+
persistSectionOrder(snapshot);
|
|
3341
|
+
}
|
|
3218
3342
|
syncReplacedOriginals(state);
|
|
3219
3343
|
syncRemovedSections(state);
|
|
3220
3344
|
syncTemplateHidden(state, pageSections.length > 0);
|
|
@@ -9629,82 +9753,843 @@ function AiSectionOverlay({
|
|
|
9629
9753
|
"aria-hidden": true,
|
|
9630
9754
|
style: {
|
|
9631
9755
|
position: "fixed",
|
|
9632
|
-
top: selectionRect.top,
|
|
9633
|
-
left: selectionRect.left,
|
|
9634
|
-
width: selectionRect.width,
|
|
9635
|
-
height: selectionRect.height,
|
|
9636
|
-
border: `2px solid ${PRIMARY2}`,
|
|
9637
|
-
borderRadius: edgeAwareRadius(selectionRect),
|
|
9638
|
-
pointerEvents: "none",
|
|
9639
|
-
zIndex: 2147483e3
|
|
9640
|
-
}
|
|
9756
|
+
top: selectionRect.top,
|
|
9757
|
+
left: selectionRect.left,
|
|
9758
|
+
width: selectionRect.width,
|
|
9759
|
+
height: selectionRect.height,
|
|
9760
|
+
border: `2px solid ${PRIMARY2}`,
|
|
9761
|
+
borderRadius: edgeAwareRadius(selectionRect),
|
|
9762
|
+
pointerEvents: "none",
|
|
9763
|
+
zIndex: 2147483e3
|
|
9764
|
+
}
|
|
9765
|
+
}
|
|
9766
|
+
),
|
|
9767
|
+
reviewRect && /* @__PURE__ */ jsxs9(Fragment5, { children: [
|
|
9768
|
+
subtractRect(reviewRect, navToggleHole).map((r2, i) => /* @__PURE__ */ jsx17(
|
|
9769
|
+
"div",
|
|
9770
|
+
{
|
|
9771
|
+
"data-ohw-ai-review": "",
|
|
9772
|
+
"aria-hidden": true,
|
|
9773
|
+
style: {
|
|
9774
|
+
position: "fixed",
|
|
9775
|
+
top: r2.top,
|
|
9776
|
+
left: r2.left,
|
|
9777
|
+
width: r2.width,
|
|
9778
|
+
height: r2.height,
|
|
9779
|
+
background: "rgba(8, 133, 254, 0.04)",
|
|
9780
|
+
pointerEvents: "auto",
|
|
9781
|
+
cursor: "default",
|
|
9782
|
+
zIndex: 2147483200
|
|
9783
|
+
},
|
|
9784
|
+
onClick: (e) => e.stopPropagation()
|
|
9785
|
+
},
|
|
9786
|
+
i
|
|
9787
|
+
)),
|
|
9788
|
+
/* @__PURE__ */ jsx17(
|
|
9789
|
+
"div",
|
|
9790
|
+
{
|
|
9791
|
+
"aria-hidden": true,
|
|
9792
|
+
style: {
|
|
9793
|
+
position: "fixed",
|
|
9794
|
+
top: reviewRect.top,
|
|
9795
|
+
left: reviewRect.left,
|
|
9796
|
+
width: reviewRect.width,
|
|
9797
|
+
height: reviewRect.height,
|
|
9798
|
+
border: `2px solid ${PRIMARY2}`,
|
|
9799
|
+
borderRadius: edgeAwareRadius(reviewRect),
|
|
9800
|
+
pointerEvents: "none",
|
|
9801
|
+
zIndex: 2147483200
|
|
9802
|
+
}
|
|
9803
|
+
}
|
|
9804
|
+
),
|
|
9805
|
+
!reviewButtonsHidden && /* @__PURE__ */ jsxs9(
|
|
9806
|
+
"div",
|
|
9807
|
+
{
|
|
9808
|
+
style: {
|
|
9809
|
+
position: "fixed",
|
|
9810
|
+
top: reviewRect.top + 12,
|
|
9811
|
+
left: reviewRect.left,
|
|
9812
|
+
width: reviewRect.width,
|
|
9813
|
+
display: "flex",
|
|
9814
|
+
gap: 8,
|
|
9815
|
+
justifyContent: "flex-end",
|
|
9816
|
+
paddingRight: 12,
|
|
9817
|
+
zIndex: 2147483201
|
|
9818
|
+
},
|
|
9819
|
+
children: [
|
|
9820
|
+
/* @__PURE__ */ jsx17(ReviewButton, { label: "Accept", onClick: () => decide("accept"), background: PRIMARY2, color: "#ffffff", children: /* @__PURE__ */ jsx17(Check, { size: 16, strokeWidth: 2.5, "aria-hidden": true }) }),
|
|
9821
|
+
/* @__PURE__ */ jsx17(ReviewButton, { label: "Discard", onClick: () => decide("discard"), background: "#EFF6FF", color: "#0c0a09", children: /* @__PURE__ */ jsx17(X, { size: 16, strokeWidth: 2, "aria-hidden": true }) })
|
|
9822
|
+
]
|
|
9823
|
+
}
|
|
9824
|
+
)
|
|
9825
|
+
] })
|
|
9826
|
+
] });
|
|
9827
|
+
}
|
|
9828
|
+
|
|
9829
|
+
// src/ui/ai-section/AiMediaStripOverlay.tsx
|
|
9830
|
+
import { useCallback as useCallback3, useEffect as useEffect5, useRef as useRef5, useState as useState7 } from "react";
|
|
9831
|
+
import { Star } from "lucide-react";
|
|
9832
|
+
|
|
9833
|
+
// src/lib/ai-media-strip-tree.ts
|
|
9834
|
+
var MEDIA_STRIP_ITEM_MIN = 1;
|
|
9835
|
+
var LOGO_MAX_HEIGHT_MIN = 24;
|
|
9836
|
+
var LOGO_MAX_HEIGHT_MAX = 96;
|
|
9837
|
+
var CARD_WIDTH_MIN = 160;
|
|
9838
|
+
var CARD_WIDTH_MAX = 320;
|
|
9839
|
+
function isMediaStrip(node) {
|
|
9840
|
+
return node.type === "media-strip";
|
|
9841
|
+
}
|
|
9842
|
+
function findBlock(node) {
|
|
9843
|
+
if (isMediaStrip(node)) return node;
|
|
9844
|
+
for (const child of node.children ?? []) {
|
|
9845
|
+
const found = findBlock(child);
|
|
9846
|
+
if (found) return found;
|
|
9847
|
+
}
|
|
9848
|
+
return null;
|
|
9849
|
+
}
|
|
9850
|
+
function findMediaStripBlock(tree) {
|
|
9851
|
+
for (const row of tree.rows ?? []) {
|
|
9852
|
+
for (const block of row.blocks ?? []) {
|
|
9853
|
+
const found = findBlock(block);
|
|
9854
|
+
if (found) return found;
|
|
9855
|
+
}
|
|
9856
|
+
}
|
|
9857
|
+
return null;
|
|
9858
|
+
}
|
|
9859
|
+
function mediaStripItems(tree) {
|
|
9860
|
+
const block = findMediaStripBlock(tree);
|
|
9861
|
+
return block?.items ?? [];
|
|
9862
|
+
}
|
|
9863
|
+
function withMediaStrip(tree, mutate) {
|
|
9864
|
+
const next = JSON.parse(JSON.stringify(tree));
|
|
9865
|
+
const block = findMediaStripBlock(next);
|
|
9866
|
+
if (!block) return null;
|
|
9867
|
+
block.items = block.items ?? [];
|
|
9868
|
+
return mutate(block) ? next : null;
|
|
9869
|
+
}
|
|
9870
|
+
function addMediaStripItem(tree, item, afterIndex) {
|
|
9871
|
+
return withMediaStrip(tree, (block) => {
|
|
9872
|
+
const items = block.items;
|
|
9873
|
+
const at = afterIndex === void 0 ? items.length : Math.min(items.length, afterIndex + 1);
|
|
9874
|
+
items.splice(at, 0, { ...item });
|
|
9875
|
+
return true;
|
|
9876
|
+
});
|
|
9877
|
+
}
|
|
9878
|
+
function removeMediaStripItem(tree, index) {
|
|
9879
|
+
return withMediaStrip(tree, (block) => {
|
|
9880
|
+
const items = block.items;
|
|
9881
|
+
if (items.length <= MEDIA_STRIP_ITEM_MIN) return false;
|
|
9882
|
+
if (index < 0 || index >= items.length) return false;
|
|
9883
|
+
items.splice(index, 1);
|
|
9884
|
+
return true;
|
|
9885
|
+
});
|
|
9886
|
+
}
|
|
9887
|
+
function reorderMediaStripItem(tree, index, direction) {
|
|
9888
|
+
return withMediaStrip(tree, (block) => {
|
|
9889
|
+
const items = block.items;
|
|
9890
|
+
const target = index + direction;
|
|
9891
|
+
if (index < 0 || index >= items.length || target < 0 || target >= items.length) return false;
|
|
9892
|
+
const [moved] = items.splice(index, 1);
|
|
9893
|
+
items.splice(target, 0, moved);
|
|
9894
|
+
return true;
|
|
9895
|
+
});
|
|
9896
|
+
}
|
|
9897
|
+
function setMediaStripVariant(tree, variant) {
|
|
9898
|
+
return withMediaStrip(tree, (block) => {
|
|
9899
|
+
block.slots = { ...block.slots, variant };
|
|
9900
|
+
if (variant === "logos") delete block.slots.cardWidth;
|
|
9901
|
+
if (variant === "reel") delete block.slots.logoMaxHeight;
|
|
9902
|
+
return true;
|
|
9903
|
+
});
|
|
9904
|
+
}
|
|
9905
|
+
function setMediaStripSizing(tree, value) {
|
|
9906
|
+
return withMediaStrip(tree, (block) => {
|
|
9907
|
+
const variant = block.slots?.variant;
|
|
9908
|
+
if (variant === "logos") {
|
|
9909
|
+
block.slots = { ...block.slots, logoMaxHeight: Math.min(LOGO_MAX_HEIGHT_MAX, Math.max(LOGO_MAX_HEIGHT_MIN, value)) };
|
|
9910
|
+
return true;
|
|
9911
|
+
}
|
|
9912
|
+
if (variant === "reel") {
|
|
9913
|
+
block.slots = { ...block.slots, cardWidth: Math.min(CARD_WIDTH_MAX, Math.max(CARD_WIDTH_MIN, value)) };
|
|
9914
|
+
return true;
|
|
9915
|
+
}
|
|
9916
|
+
return false;
|
|
9917
|
+
});
|
|
9918
|
+
}
|
|
9919
|
+
function setMediaStripTreatment(tree, treatment) {
|
|
9920
|
+
return withMediaStrip(tree, (block) => {
|
|
9921
|
+
block.slots = { ...block.slots, treatment };
|
|
9922
|
+
return true;
|
|
9923
|
+
});
|
|
9924
|
+
}
|
|
9925
|
+
function setMediaStripAlign(tree, align) {
|
|
9926
|
+
return withMediaStrip(tree, (block) => {
|
|
9927
|
+
block.slots = { ...block.slots, align };
|
|
9928
|
+
return true;
|
|
9929
|
+
});
|
|
9930
|
+
}
|
|
9931
|
+
function setMediaStripHover(tree, hover) {
|
|
9932
|
+
return withMediaStrip(tree, (block) => {
|
|
9933
|
+
block.slots = { ...block.slots, hover };
|
|
9934
|
+
return true;
|
|
9935
|
+
});
|
|
9936
|
+
}
|
|
9937
|
+
function setMediaStripItemAsset(tree, index, assetId) {
|
|
9938
|
+
return withMediaStrip(tree, (block) => {
|
|
9939
|
+
const items = block.items;
|
|
9940
|
+
if (index < 0 || index >= items.length) return false;
|
|
9941
|
+
items[index] = { ...items[index], assetId };
|
|
9942
|
+
return true;
|
|
9943
|
+
});
|
|
9944
|
+
}
|
|
9945
|
+
function setMediaStripItemAlt(tree, index, alt) {
|
|
9946
|
+
return withMediaStrip(tree, (block) => {
|
|
9947
|
+
const items = block.items;
|
|
9948
|
+
if (index < 0 || index >= items.length) return false;
|
|
9949
|
+
items[index] = { ...items[index], alt };
|
|
9950
|
+
return true;
|
|
9951
|
+
});
|
|
9952
|
+
}
|
|
9953
|
+
function setMediaStripItemLink(tree, index, link) {
|
|
9954
|
+
return withMediaStrip(tree, (block) => {
|
|
9955
|
+
const items = block.items;
|
|
9956
|
+
if (index < 0 || index >= items.length) return false;
|
|
9957
|
+
const item = { ...items[index] };
|
|
9958
|
+
if (link.href) {
|
|
9959
|
+
item.href = link.href;
|
|
9960
|
+
if (link.linkTarget) item.linkTarget = link.linkTarget;
|
|
9961
|
+
} else {
|
|
9962
|
+
delete item.href;
|
|
9963
|
+
delete item.linkTarget;
|
|
9964
|
+
}
|
|
9965
|
+
items[index] = item;
|
|
9966
|
+
return true;
|
|
9967
|
+
});
|
|
9968
|
+
}
|
|
9969
|
+
|
|
9970
|
+
// src/ui/ai-section/AiMediaStripOverlay.tsx
|
|
9971
|
+
import { Fragment as Fragment6, jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
9972
|
+
var PRIMARY3 = "#0885FE";
|
|
9973
|
+
var OHW_BLUE = `var(--ohw-primary, ${PRIMARY3})`;
|
|
9974
|
+
var OHW_BLUE_DARK = `color-mix(in srgb, var(--ohw-primary, ${PRIMARY3}) 60%, #000000)`;
|
|
9975
|
+
function findMediaStripItemElement(sectionId, index) {
|
|
9976
|
+
const sectionEl = findByInstanceId(sectionId);
|
|
9977
|
+
if (!sectionEl) return null;
|
|
9978
|
+
const items = sectionEl.querySelectorAll("[data-ohw-media-strip-item]");
|
|
9979
|
+
for (const el of Array.from(items)) {
|
|
9980
|
+
if (Number(el.dataset.ohwMediaStripIndex) === index) return el;
|
|
9981
|
+
}
|
|
9982
|
+
return null;
|
|
9983
|
+
}
|
|
9984
|
+
function readRect2(ref) {
|
|
9985
|
+
const el = ref && findMediaStripItemElement(ref.sectionId, ref.index);
|
|
9986
|
+
if (!el) return null;
|
|
9987
|
+
const r2 = el.getBoundingClientRect();
|
|
9988
|
+
if (r2.width <= 0 || r2.height <= 0) return null;
|
|
9989
|
+
return { top: r2.top, left: r2.left, width: r2.width, height: r2.height };
|
|
9990
|
+
}
|
|
9991
|
+
function useLiveItemRect(ref) {
|
|
9992
|
+
const [rect, setRect] = useState7(null);
|
|
9993
|
+
useEffect5(() => {
|
|
9994
|
+
if (!ref) {
|
|
9995
|
+
setRect(null);
|
|
9996
|
+
return;
|
|
9997
|
+
}
|
|
9998
|
+
const update = () => {
|
|
9999
|
+
const next = readRect2(ref);
|
|
10000
|
+
setRect(
|
|
10001
|
+
(prev) => prev && next && prev.top === next.top && prev.left === next.left && prev.width === next.width && prev.height === next.height ? prev : next
|
|
10002
|
+
);
|
|
10003
|
+
};
|
|
10004
|
+
update();
|
|
10005
|
+
const opts = { capture: true, passive: true };
|
|
10006
|
+
window.addEventListener("scroll", update, opts);
|
|
10007
|
+
window.addEventListener("resize", update);
|
|
10008
|
+
const interval = setInterval(update, 500);
|
|
10009
|
+
return () => {
|
|
10010
|
+
window.removeEventListener("scroll", update, opts);
|
|
10011
|
+
window.removeEventListener("resize", update);
|
|
10012
|
+
clearInterval(interval);
|
|
10013
|
+
};
|
|
10014
|
+
}, [ref?.sectionId, ref?.index]);
|
|
10015
|
+
return rect;
|
|
10016
|
+
}
|
|
10017
|
+
function requestValidateTree(postToParent2, tree) {
|
|
10018
|
+
return new Promise((resolve) => {
|
|
10019
|
+
const id = `ai-validate-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
|
|
10020
|
+
const timeout = window.setTimeout(() => {
|
|
10021
|
+
window.removeEventListener("message", onMessage);
|
|
10022
|
+
resolve({ ok: false, reasons: ["Validation request timed out."] });
|
|
10023
|
+
}, 8e3);
|
|
10024
|
+
function onMessage(e) {
|
|
10025
|
+
if (e.data?.type !== "ow:ai-validate-tree-result" || e.data.id !== id) return;
|
|
10026
|
+
window.clearTimeout(timeout);
|
|
10027
|
+
window.removeEventListener("message", onMessage);
|
|
10028
|
+
resolve({ ok: e.data.ok === true, reasons: Array.isArray(e.data.reasons) ? e.data.reasons : [] });
|
|
10029
|
+
}
|
|
10030
|
+
window.addEventListener("message", onMessage);
|
|
10031
|
+
postToParent2({ type: "ow:ai-validate-tree-request", id, tree });
|
|
10032
|
+
});
|
|
10033
|
+
}
|
|
10034
|
+
function requestAssetPick(postToParent2) {
|
|
10035
|
+
return new Promise((resolve) => {
|
|
10036
|
+
const id = `ai-asset-pick-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
|
|
10037
|
+
const timeout = window.setTimeout(() => {
|
|
10038
|
+
window.removeEventListener("message", onMessage);
|
|
10039
|
+
resolve(null);
|
|
10040
|
+
}, 3e5);
|
|
10041
|
+
function onMessage(e) {
|
|
10042
|
+
if (e.data?.type !== "ow:asset-picked" || e.data.id !== id) return;
|
|
10043
|
+
window.clearTimeout(timeout);
|
|
10044
|
+
window.removeEventListener("message", onMessage);
|
|
10045
|
+
resolve(
|
|
10046
|
+
typeof e.data.assetId === "string" && typeof e.data.url === "string" ? { assetId: e.data.assetId, url: e.data.url } : null
|
|
10047
|
+
);
|
|
10048
|
+
}
|
|
10049
|
+
window.addEventListener("message", onMessage);
|
|
10050
|
+
postToParent2({ type: "ow:asset-pick", id });
|
|
10051
|
+
});
|
|
10052
|
+
}
|
|
10053
|
+
function Pill({
|
|
10054
|
+
label,
|
|
10055
|
+
onClick,
|
|
10056
|
+
disabled,
|
|
10057
|
+
active
|
|
10058
|
+
}) {
|
|
10059
|
+
return /* @__PURE__ */ jsx18(
|
|
10060
|
+
"button",
|
|
10061
|
+
{
|
|
10062
|
+
type: "button",
|
|
10063
|
+
onClick,
|
|
10064
|
+
disabled,
|
|
10065
|
+
style: {
|
|
10066
|
+
height: 28,
|
|
10067
|
+
padding: "0 10px",
|
|
10068
|
+
display: "inline-flex",
|
|
10069
|
+
alignItems: "center",
|
|
10070
|
+
gap: 4,
|
|
10071
|
+
borderRadius: 999,
|
|
10072
|
+
border: "none",
|
|
10073
|
+
cursor: disabled ? "default" : "pointer",
|
|
10074
|
+
background: active ? OHW_BLUE_DARK : "#ffffff",
|
|
10075
|
+
color: active ? "#ffffff" : OHW_BLUE_DARK,
|
|
10076
|
+
opacity: disabled ? 0.4 : 1,
|
|
10077
|
+
fontSize: 12,
|
|
10078
|
+
lineHeight: "16px",
|
|
10079
|
+
fontFamily: "Figtree, ui-sans-serif, system-ui, sans-serif",
|
|
10080
|
+
whiteSpace: "nowrap",
|
|
10081
|
+
flex: "0 0 auto"
|
|
10082
|
+
},
|
|
10083
|
+
children: label
|
|
10084
|
+
}
|
|
10085
|
+
);
|
|
10086
|
+
}
|
|
10087
|
+
function AltInput({ value, onCommit }) {
|
|
10088
|
+
const [draft, setDraft] = useState7(value);
|
|
10089
|
+
useEffect5(() => setDraft(value), [value]);
|
|
10090
|
+
return /* @__PURE__ */ jsxs10(
|
|
10091
|
+
"div",
|
|
10092
|
+
{
|
|
10093
|
+
style: {
|
|
10094
|
+
display: "flex",
|
|
10095
|
+
alignItems: "center",
|
|
10096
|
+
gap: 6,
|
|
10097
|
+
height: 28,
|
|
10098
|
+
padding: "0 12px",
|
|
10099
|
+
borderRadius: 999,
|
|
10100
|
+
background: "#ffffff",
|
|
10101
|
+
width: "100%",
|
|
10102
|
+
maxWidth: 260,
|
|
10103
|
+
boxSizing: "border-box"
|
|
10104
|
+
},
|
|
10105
|
+
children: [
|
|
10106
|
+
/* @__PURE__ */ jsx18(
|
|
10107
|
+
"span",
|
|
10108
|
+
{
|
|
10109
|
+
style: {
|
|
10110
|
+
flex: "0 0 auto",
|
|
10111
|
+
color: OHW_BLUE_DARK,
|
|
10112
|
+
fontSize: 10,
|
|
10113
|
+
fontWeight: 700,
|
|
10114
|
+
textTransform: "uppercase",
|
|
10115
|
+
letterSpacing: 0.4
|
|
10116
|
+
},
|
|
10117
|
+
children: "Alt"
|
|
10118
|
+
}
|
|
10119
|
+
),
|
|
10120
|
+
/* @__PURE__ */ jsx18(
|
|
10121
|
+
"input",
|
|
10122
|
+
{
|
|
10123
|
+
type: "text",
|
|
10124
|
+
value: draft,
|
|
10125
|
+
onChange: (e) => setDraft(e.target.value),
|
|
10126
|
+
onBlur: () => {
|
|
10127
|
+
if (draft !== value) onCommit(draft);
|
|
10128
|
+
},
|
|
10129
|
+
onKeyDown: (e) => {
|
|
10130
|
+
if (e.key === "Enter") e.currentTarget.blur();
|
|
10131
|
+
if (e.key === "Escape") {
|
|
10132
|
+
setDraft(value);
|
|
10133
|
+
e.currentTarget.blur();
|
|
10134
|
+
}
|
|
10135
|
+
},
|
|
10136
|
+
placeholder: "Describe this image",
|
|
10137
|
+
"aria-label": "Image alt text",
|
|
10138
|
+
style: {
|
|
10139
|
+
flex: 1,
|
|
10140
|
+
minWidth: 0,
|
|
10141
|
+
border: "none",
|
|
10142
|
+
outline: "none",
|
|
10143
|
+
background: "transparent",
|
|
10144
|
+
fontSize: 12,
|
|
10145
|
+
lineHeight: "16px",
|
|
10146
|
+
fontFamily: "Figtree, ui-sans-serif, system-ui, sans-serif",
|
|
10147
|
+
color: "#1f2937"
|
|
10148
|
+
}
|
|
10149
|
+
}
|
|
10150
|
+
)
|
|
10151
|
+
]
|
|
10152
|
+
}
|
|
10153
|
+
);
|
|
10154
|
+
}
|
|
10155
|
+
var VARIANTS = [
|
|
10156
|
+
{ value: "logos", label: "Logos" },
|
|
10157
|
+
{ value: "reel", label: "Reel" }
|
|
10158
|
+
];
|
|
10159
|
+
var ALIGNS = [
|
|
10160
|
+
{ value: "left", label: "Left" },
|
|
10161
|
+
{ value: "center", label: "Center" },
|
|
10162
|
+
{ value: "right", label: "Right" }
|
|
10163
|
+
];
|
|
10164
|
+
var HOVERS = [
|
|
10165
|
+
{ value: "none", label: "None" },
|
|
10166
|
+
{ value: "lift", label: "Lift" },
|
|
10167
|
+
{ value: "zoom", label: "Zoom" },
|
|
10168
|
+
{ value: "fade", label: "Fade" }
|
|
10169
|
+
];
|
|
10170
|
+
var TREATMENTS = [
|
|
10171
|
+
{ value: "color", label: "Color" },
|
|
10172
|
+
{ value: "grayscale", label: "Grayscale" }
|
|
10173
|
+
];
|
|
10174
|
+
var HTTP_URL_RE = /^https?:\/\/\S+$/i;
|
|
10175
|
+
function LinkInput({ value, onCommit }) {
|
|
10176
|
+
const [draft, setDraft] = useState7(value);
|
|
10177
|
+
const [invalid, setInvalid] = useState7(false);
|
|
10178
|
+
useEffect5(() => {
|
|
10179
|
+
setDraft(value);
|
|
10180
|
+
setInvalid(false);
|
|
10181
|
+
}, [value]);
|
|
10182
|
+
const commit = () => {
|
|
10183
|
+
const next = draft.trim();
|
|
10184
|
+
if (next === value) return setInvalid(false);
|
|
10185
|
+
if (next && !HTTP_URL_RE.test(next)) return setInvalid(true);
|
|
10186
|
+
setInvalid(false);
|
|
10187
|
+
onCommit(next);
|
|
10188
|
+
};
|
|
10189
|
+
return /* @__PURE__ */ jsxs10(
|
|
10190
|
+
"div",
|
|
10191
|
+
{
|
|
10192
|
+
style: {
|
|
10193
|
+
display: "flex",
|
|
10194
|
+
alignItems: "center",
|
|
10195
|
+
gap: 6,
|
|
10196
|
+
height: 28,
|
|
10197
|
+
padding: "0 12px",
|
|
10198
|
+
borderRadius: 999,
|
|
10199
|
+
background: "#ffffff",
|
|
10200
|
+
width: "100%",
|
|
10201
|
+
maxWidth: 260,
|
|
10202
|
+
boxSizing: "border-box",
|
|
10203
|
+
boxShadow: invalid ? "inset 0 0 0 1.5px #EF4444" : "none"
|
|
10204
|
+
},
|
|
10205
|
+
children: [
|
|
10206
|
+
/* @__PURE__ */ jsx18(
|
|
10207
|
+
"span",
|
|
10208
|
+
{
|
|
10209
|
+
style: {
|
|
10210
|
+
flex: "0 0 auto",
|
|
10211
|
+
color: OHW_BLUE_DARK,
|
|
10212
|
+
fontSize: 10,
|
|
10213
|
+
fontWeight: 700,
|
|
10214
|
+
textTransform: "uppercase",
|
|
10215
|
+
letterSpacing: 0.4
|
|
10216
|
+
},
|
|
10217
|
+
children: "Link"
|
|
10218
|
+
}
|
|
10219
|
+
),
|
|
10220
|
+
/* @__PURE__ */ jsx18(
|
|
10221
|
+
"input",
|
|
10222
|
+
{
|
|
10223
|
+
type: "text",
|
|
10224
|
+
inputMode: "url",
|
|
10225
|
+
value: draft,
|
|
10226
|
+
onChange: (e) => setDraft(e.target.value),
|
|
10227
|
+
onBlur: commit,
|
|
10228
|
+
onKeyDown: (e) => {
|
|
10229
|
+
if (e.key === "Enter") e.currentTarget.blur();
|
|
10230
|
+
if (e.key === "Escape") {
|
|
10231
|
+
setDraft(value);
|
|
10232
|
+
setInvalid(false);
|
|
10233
|
+
e.currentTarget.blur();
|
|
10234
|
+
}
|
|
10235
|
+
},
|
|
10236
|
+
placeholder: "https://example.com",
|
|
10237
|
+
"aria-label": "Image link URL",
|
|
10238
|
+
"aria-invalid": invalid,
|
|
10239
|
+
style: {
|
|
10240
|
+
flex: 1,
|
|
10241
|
+
minWidth: 0,
|
|
10242
|
+
border: "none",
|
|
10243
|
+
outline: "none",
|
|
10244
|
+
background: "transparent",
|
|
10245
|
+
fontSize: 12,
|
|
10246
|
+
lineHeight: "16px",
|
|
10247
|
+
fontFamily: "Figtree, ui-sans-serif, system-ui, sans-serif",
|
|
10248
|
+
color: "#1f2937"
|
|
10249
|
+
}
|
|
10250
|
+
}
|
|
10251
|
+
)
|
|
10252
|
+
]
|
|
10253
|
+
}
|
|
10254
|
+
);
|
|
10255
|
+
}
|
|
10256
|
+
function MediaStripToolbar({
|
|
10257
|
+
entry,
|
|
10258
|
+
index,
|
|
10259
|
+
pending,
|
|
10260
|
+
error,
|
|
10261
|
+
onSetVariant,
|
|
10262
|
+
onSetAlign,
|
|
10263
|
+
onSetHover,
|
|
10264
|
+
onSetTreatment,
|
|
10265
|
+
onResize,
|
|
10266
|
+
onSetAlt,
|
|
10267
|
+
onSetLink,
|
|
10268
|
+
onAddItem,
|
|
10269
|
+
onRemoveItem,
|
|
10270
|
+
onChangeImage,
|
|
10271
|
+
onMoveLeft,
|
|
10272
|
+
onMoveRight
|
|
10273
|
+
}) {
|
|
10274
|
+
const items = mediaStripItems(entry.tree);
|
|
10275
|
+
const itemCount = items.length;
|
|
10276
|
+
const currentAlt = items[index]?.alt ?? "";
|
|
10277
|
+
const currentHref = items[index]?.href ?? "";
|
|
10278
|
+
const currentTarget = items[index]?.linkTarget === "same-tab" ? "same-tab" : "new-tab";
|
|
10279
|
+
const slots = findMediaStripSlots(entry.tree);
|
|
10280
|
+
const variant = slots?.variant === "reel" ? "reel" : "logos";
|
|
10281
|
+
const align = slots?.align === "left" || slots?.align === "right" ? slots.align : "center";
|
|
10282
|
+
const hover = slots?.hover === "none" || slots?.hover === "lift" || slots?.hover === "zoom" || slots?.hover === "fade" ? slots.hover : "lift";
|
|
10283
|
+
const treatment = slots?.treatment === "color" || slots?.treatment === "grayscale" ? slots.treatment : variant === "logos" ? "grayscale" : "color";
|
|
10284
|
+
const sizeValue = variant === "logos" ? typeof slots?.logoMaxHeight === "number" ? slots.logoMaxHeight : 48 : typeof slots?.cardWidth === "number" ? slots.cardWidth : 240;
|
|
10285
|
+
const isMobile = window.innerWidth <= 480;
|
|
10286
|
+
const rowStyle = isMobile ? {
|
|
10287
|
+
display: "flex",
|
|
10288
|
+
gap: 6,
|
|
10289
|
+
flexWrap: "nowrap",
|
|
10290
|
+
justifyContent: "center",
|
|
10291
|
+
overflowX: "auto",
|
|
10292
|
+
WebkitOverflowScrolling: "touch",
|
|
10293
|
+
width: "100%",
|
|
10294
|
+
scrollbarWidth: "none"
|
|
10295
|
+
} : { display: "flex", gap: 6, flexWrap: "nowrap", justifyContent: "center" };
|
|
10296
|
+
return /* @__PURE__ */ jsxs10(
|
|
10297
|
+
"div",
|
|
10298
|
+
{
|
|
10299
|
+
"data-ohw-bridge": "",
|
|
10300
|
+
"data-ohw-toolbar": "",
|
|
10301
|
+
onMouseDown: (e) => e.stopPropagation(),
|
|
10302
|
+
style: {
|
|
10303
|
+
display: "flex",
|
|
10304
|
+
flexDirection: "column",
|
|
10305
|
+
gap: 6,
|
|
10306
|
+
alignItems: "center",
|
|
10307
|
+
background: OHW_BLUE,
|
|
10308
|
+
padding: 8,
|
|
10309
|
+
borderRadius: 12,
|
|
10310
|
+
boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
|
|
10311
|
+
pointerEvents: pending ? "none" : "auto",
|
|
10312
|
+
opacity: pending ? 0.6 : 1,
|
|
10313
|
+
maxWidth: isMobile ? "calc(100vw - 24px)" : "none"
|
|
10314
|
+
},
|
|
10315
|
+
children: [
|
|
10316
|
+
/* @__PURE__ */ jsxs10("div", { style: rowStyle, children: [
|
|
10317
|
+
VARIANTS.map((v) => /* @__PURE__ */ jsx18(Pill, { label: v.label, active: variant === v.value, onClick: () => onSetVariant(v.value) }, v.value)),
|
|
10318
|
+
ALIGNS.map((a) => /* @__PURE__ */ jsx18(Pill, { label: a.label, active: align === a.value, onClick: () => onSetAlign(a.value) }, a.value))
|
|
10319
|
+
] }),
|
|
10320
|
+
/* @__PURE__ */ jsxs10("div", { style: rowStyle, children: [
|
|
10321
|
+
HOVERS.map((h) => /* @__PURE__ */ jsx18(Pill, { label: h.label, active: hover === h.value, onClick: () => onSetHover(h.value) }, h.value)),
|
|
10322
|
+
TREATMENTS.map((t) => /* @__PURE__ */ jsx18(Pill, { label: t.label, active: treatment === t.value, onClick: () => onSetTreatment(t.value) }, t.value))
|
|
10323
|
+
] }),
|
|
10324
|
+
/* @__PURE__ */ jsxs10("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [
|
|
10325
|
+
/* @__PURE__ */ jsx18(Pill, { label: "\u2212", onClick: () => onResize(-8) }),
|
|
10326
|
+
/* @__PURE__ */ jsxs10("span", { style: { color: "#ffffff", fontSize: 12, minWidth: 34, textAlign: "center" }, children: [
|
|
10327
|
+
sizeValue,
|
|
10328
|
+
"px"
|
|
10329
|
+
] }),
|
|
10330
|
+
/* @__PURE__ */ jsx18(Pill, { label: "+", onClick: () => onResize(8) })
|
|
10331
|
+
] }),
|
|
10332
|
+
/* @__PURE__ */ jsx18("div", { style: { display: "flex", justifyContent: "center", width: "100%" }, children: /* @__PURE__ */ jsx18(AltInput, { value: currentAlt, onCommit: onSetAlt }) }),
|
|
10333
|
+
/* @__PURE__ */ jsx18("div", { style: { display: "flex", justifyContent: "center", width: "100%" }, children: /* @__PURE__ */ jsx18(LinkInput, { value: currentHref, onCommit: (href) => onSetLink(href, currentTarget) }) }),
|
|
10334
|
+
currentHref && /* @__PURE__ */ jsxs10("div", { style: rowStyle, children: [
|
|
10335
|
+
/* @__PURE__ */ jsx18(Pill, { label: "New tab", active: currentTarget === "new-tab", onClick: () => onSetLink(currentHref, "new-tab") }),
|
|
10336
|
+
/* @__PURE__ */ jsx18(Pill, { label: "Same tab", active: currentTarget === "same-tab", onClick: () => onSetLink(currentHref, "same-tab") })
|
|
10337
|
+
] }),
|
|
10338
|
+
/* @__PURE__ */ jsxs10("div", { style: rowStyle, children: [
|
|
10339
|
+
/* @__PURE__ */ jsx18(Pill, { label: "Change Image", onClick: onChangeImage }),
|
|
10340
|
+
/* @__PURE__ */ jsx18(Pill, { label: "+ Item", onClick: onAddItem }),
|
|
10341
|
+
/* @__PURE__ */ jsx18(Pill, { label: "\u2212 Item", onClick: onRemoveItem, disabled: itemCount <= 1 })
|
|
10342
|
+
] }),
|
|
10343
|
+
/* @__PURE__ */ jsxs10("div", { style: rowStyle, children: [
|
|
10344
|
+
/* @__PURE__ */ jsx18(Pill, { label: "\u2190 Move", onClick: onMoveLeft, disabled: index <= 0 }),
|
|
10345
|
+
/* @__PURE__ */ jsx18(Pill, { label: "\u2192 Move", onClick: onMoveRight, disabled: index >= itemCount - 1 })
|
|
10346
|
+
] }),
|
|
10347
|
+
error && /* @__PURE__ */ jsx18("div", { style: { color: "#FCA5A5", fontSize: 11, maxWidth: 220, textAlign: "center" }, children: error })
|
|
10348
|
+
]
|
|
10349
|
+
}
|
|
10350
|
+
);
|
|
10351
|
+
}
|
|
10352
|
+
function findMediaStripSlots(tree) {
|
|
10353
|
+
const stack = tree.rows.flatMap((row) => row.blocks);
|
|
10354
|
+
while (stack.length) {
|
|
10355
|
+
const node = stack.shift();
|
|
10356
|
+
if (node.type === "media-strip") return node.slots ?? {};
|
|
10357
|
+
if (node.children) stack.push(...node.children);
|
|
10358
|
+
}
|
|
10359
|
+
return null;
|
|
10360
|
+
}
|
|
10361
|
+
function AiMediaStripOverlay({
|
|
10362
|
+
postToParent: postToParent2,
|
|
10363
|
+
aiSectionsRef,
|
|
10364
|
+
applyTreeLocalRef,
|
|
10365
|
+
clearInteractionChromeRef
|
|
10366
|
+
}) {
|
|
10367
|
+
const [hover, setHover] = useState7(null);
|
|
10368
|
+
const [active, setActive] = useState7(null);
|
|
10369
|
+
const [pending, setPending] = useState7(false);
|
|
10370
|
+
const [error, setError] = useState7(null);
|
|
10371
|
+
const activeRef = useRef5(null);
|
|
10372
|
+
activeRef.current = active;
|
|
10373
|
+
useEffect5(() => {
|
|
10374
|
+
const onMove = (e) => {
|
|
10375
|
+
const t = e.target;
|
|
10376
|
+
if (!(t instanceof HTMLElement)) return;
|
|
10377
|
+
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]")) {
|
|
10378
|
+
return;
|
|
10379
|
+
}
|
|
10380
|
+
const itemEl = t.closest("[data-ohw-media-strip-item]");
|
|
10381
|
+
if (!itemEl) {
|
|
10382
|
+
setHover(null);
|
|
10383
|
+
return;
|
|
10384
|
+
}
|
|
10385
|
+
const sectionEl = itemEl.closest("[data-ohw-section]");
|
|
10386
|
+
const unit = sectionEl ? movableUnit(sectionEl) : null;
|
|
10387
|
+
const sectionId = unit ? instanceIdOf(unit) || null : null;
|
|
10388
|
+
const index = Number(itemEl.dataset.ohwMediaStripIndex);
|
|
10389
|
+
if (!sectionId || Number.isNaN(index)) {
|
|
10390
|
+
setHover(null);
|
|
10391
|
+
return;
|
|
10392
|
+
}
|
|
10393
|
+
setHover({ sectionId, index });
|
|
10394
|
+
};
|
|
10395
|
+
const onLeave = () => setHover(null);
|
|
10396
|
+
document.addEventListener("mousemove", onMove, { passive: true });
|
|
10397
|
+
document.documentElement.addEventListener("mouseleave", onLeave);
|
|
10398
|
+
return () => {
|
|
10399
|
+
document.removeEventListener("mousemove", onMove);
|
|
10400
|
+
document.documentElement.removeEventListener("mouseleave", onLeave);
|
|
10401
|
+
};
|
|
10402
|
+
}, []);
|
|
10403
|
+
useEffect5(() => {
|
|
10404
|
+
const onClick = (e) => {
|
|
10405
|
+
const current = activeRef.current;
|
|
10406
|
+
if (!current) return;
|
|
10407
|
+
const t = e.target;
|
|
10408
|
+
if (!(t instanceof HTMLElement)) return;
|
|
10409
|
+
if (t.closest("[data-ohw-item-interaction]")) return;
|
|
10410
|
+
const itemEl = findMediaStripItemElement(current.sectionId, current.index);
|
|
10411
|
+
if (itemEl && itemEl.contains(t)) return;
|
|
10412
|
+
setActive(null);
|
|
10413
|
+
setError(null);
|
|
10414
|
+
};
|
|
10415
|
+
document.addEventListener("click", onClick, true);
|
|
10416
|
+
return () => document.removeEventListener("click", onClick, true);
|
|
10417
|
+
}, []);
|
|
10418
|
+
useEffect5(() => {
|
|
10419
|
+
const onBlur = () => {
|
|
10420
|
+
if (!activeRef.current) return;
|
|
10421
|
+
setActive(null);
|
|
10422
|
+
setError(null);
|
|
10423
|
+
};
|
|
10424
|
+
window.addEventListener("blur", onBlur);
|
|
10425
|
+
return () => window.removeEventListener("blur", onBlur);
|
|
10426
|
+
}, []);
|
|
10427
|
+
useEffect5(() => {
|
|
10428
|
+
const onKeyDown = (e) => {
|
|
10429
|
+
if (e.key !== "Escape") return;
|
|
10430
|
+
if (!activeRef.current) return;
|
|
10431
|
+
setActive(null);
|
|
10432
|
+
setError(null);
|
|
10433
|
+
};
|
|
10434
|
+
document.addEventListener("keydown", onKeyDown);
|
|
10435
|
+
return () => document.removeEventListener("keydown", onKeyDown);
|
|
10436
|
+
}, []);
|
|
10437
|
+
const findEntry = useCallback3(
|
|
10438
|
+
(sectionId) => {
|
|
10439
|
+
const state = parseAiSectionsState(aiSectionsRef.current);
|
|
10440
|
+
return state.sections.find((s) => s.id === sectionId) ?? null;
|
|
10441
|
+
},
|
|
10442
|
+
[aiSectionsRef]
|
|
10443
|
+
);
|
|
10444
|
+
const runMutation = useCallback3(
|
|
10445
|
+
async (sectionId, mutate, extraMedia) => {
|
|
10446
|
+
const entry = findEntry(sectionId);
|
|
10447
|
+
if (!entry) return false;
|
|
10448
|
+
const nextTree = mutate(entry.tree);
|
|
10449
|
+
if (!nextTree) return false;
|
|
10450
|
+
setPending(true);
|
|
10451
|
+
setError(null);
|
|
10452
|
+
const { ok, reasons } = await requestValidateTree(postToParent2, nextTree);
|
|
10453
|
+
setPending(false);
|
|
10454
|
+
if (!ok) {
|
|
10455
|
+
setError(reasons[0] ?? "That change is not allowed.");
|
|
10456
|
+
return false;
|
|
10457
|
+
}
|
|
10458
|
+
applyTreeLocalRef.current?.({
|
|
10459
|
+
id: sectionId,
|
|
10460
|
+
mode: "replace",
|
|
10461
|
+
targetSectionId: sectionId,
|
|
10462
|
+
tree: nextTree,
|
|
10463
|
+
label: entry.label,
|
|
10464
|
+
media: extraMedia ? { ...entry.media, ...extraMedia } : entry.media,
|
|
10465
|
+
...entry.brand ? { brand: entry.brand } : {}
|
|
10466
|
+
});
|
|
10467
|
+
return true;
|
|
10468
|
+
},
|
|
10469
|
+
[findEntry, postToParent2, applyTreeLocalRef]
|
|
10470
|
+
);
|
|
10471
|
+
const activeEntry = active ? findEntry(active.sectionId) : null;
|
|
10472
|
+
const hoverHandleRect = useLiveItemRect(!active && hover ? hover : null);
|
|
10473
|
+
const activeItemRect = useLiveItemRect(active);
|
|
10474
|
+
const TOOLBAR_APPROX_H = 170;
|
|
10475
|
+
const toolbarState = activeItemRect && activeItemRect.top < TOOLBAR_APPROX_H ? "active-bottom" : "active-top";
|
|
10476
|
+
return /* @__PURE__ */ jsxs10(Fragment6, { children: [
|
|
10477
|
+
hoverHandleRect && hover && /* @__PURE__ */ jsx18(
|
|
10478
|
+
"button",
|
|
10479
|
+
{
|
|
10480
|
+
type: "button",
|
|
10481
|
+
"data-ohw-toolbar": "",
|
|
10482
|
+
onClick: () => {
|
|
10483
|
+
clearInteractionChromeRef.current();
|
|
10484
|
+
setActive(hover);
|
|
10485
|
+
},
|
|
10486
|
+
"aria-label": "Configure media item",
|
|
10487
|
+
style: {
|
|
10488
|
+
position: "fixed",
|
|
10489
|
+
top: hoverHandleRect.top + 8,
|
|
10490
|
+
left: hoverHandleRect.left + hoverHandleRect.width - 36,
|
|
10491
|
+
width: 28,
|
|
10492
|
+
height: 28,
|
|
10493
|
+
borderRadius: 8,
|
|
10494
|
+
border: `1.5px dashed ${PRIMARY3}`,
|
|
10495
|
+
background: "#ffffff",
|
|
10496
|
+
color: PRIMARY3,
|
|
10497
|
+
display: "flex",
|
|
10498
|
+
alignItems: "center",
|
|
10499
|
+
justifyContent: "center",
|
|
10500
|
+
cursor: "pointer",
|
|
10501
|
+
zIndex: 2147483643,
|
|
10502
|
+
fontSize: 14,
|
|
10503
|
+
fontWeight: 700
|
|
10504
|
+
},
|
|
10505
|
+
children: /* @__PURE__ */ jsx18(Star, { size: 14, style: { pointerEvents: "none" } })
|
|
9641
10506
|
}
|
|
9642
10507
|
),
|
|
9643
|
-
|
|
9644
|
-
|
|
9645
|
-
|
|
9646
|
-
|
|
9647
|
-
|
|
9648
|
-
|
|
9649
|
-
|
|
9650
|
-
|
|
9651
|
-
|
|
9652
|
-
|
|
9653
|
-
|
|
9654
|
-
|
|
9655
|
-
|
|
9656
|
-
|
|
9657
|
-
|
|
9658
|
-
|
|
9659
|
-
|
|
9660
|
-
|
|
9661
|
-
|
|
9662
|
-
|
|
9663
|
-
|
|
9664
|
-
|
|
9665
|
-
|
|
9666
|
-
|
|
9667
|
-
|
|
9668
|
-
|
|
9669
|
-
|
|
9670
|
-
|
|
9671
|
-
|
|
9672
|
-
|
|
9673
|
-
|
|
9674
|
-
|
|
9675
|
-
|
|
9676
|
-
|
|
9677
|
-
|
|
10508
|
+
activeItemRect && active && activeEntry && /* @__PURE__ */ jsx18(
|
|
10509
|
+
ItemInteractionLayer,
|
|
10510
|
+
{
|
|
10511
|
+
rect: activeItemRect,
|
|
10512
|
+
state: toolbarState,
|
|
10513
|
+
toolbar: /* @__PURE__ */ jsx18(
|
|
10514
|
+
MediaStripToolbar,
|
|
10515
|
+
{
|
|
10516
|
+
entry: activeEntry,
|
|
10517
|
+
index: active.index,
|
|
10518
|
+
pending,
|
|
10519
|
+
error,
|
|
10520
|
+
onSetVariant: (variant) => runMutation(active.sectionId, (tree) => setMediaStripVariant(tree, variant)),
|
|
10521
|
+
onSetAlign: (align) => runMutation(active.sectionId, (tree) => setMediaStripAlign(tree, align)),
|
|
10522
|
+
onSetHover: (hoverPreset) => runMutation(active.sectionId, (tree) => setMediaStripHover(tree, hoverPreset)),
|
|
10523
|
+
onSetTreatment: (treatment) => runMutation(active.sectionId, (tree) => setMediaStripTreatment(tree, treatment)),
|
|
10524
|
+
onResize: (delta) => {
|
|
10525
|
+
const slots = findMediaStripSlots(activeEntry.tree);
|
|
10526
|
+
const variant = slots?.variant === "reel" ? "reel" : "logos";
|
|
10527
|
+
const current = variant === "logos" ? typeof slots?.logoMaxHeight === "number" ? slots.logoMaxHeight : 48 : typeof slots?.cardWidth === "number" ? slots.cardWidth : 240;
|
|
10528
|
+
void runMutation(active.sectionId, (tree) => setMediaStripSizing(tree, current + delta));
|
|
10529
|
+
},
|
|
10530
|
+
onSetAlt: (alt) => {
|
|
10531
|
+
void runMutation(active.sectionId, (tree) => setMediaStripItemAlt(tree, active.index, alt));
|
|
10532
|
+
},
|
|
10533
|
+
onSetLink: (href, linkTarget) => {
|
|
10534
|
+
void runMutation(
|
|
10535
|
+
active.sectionId,
|
|
10536
|
+
(tree) => setMediaStripItemLink(tree, active.index, href ? { href, linkTarget } : {})
|
|
10537
|
+
);
|
|
10538
|
+
},
|
|
10539
|
+
onAddItem: () => {
|
|
10540
|
+
void requestAssetPick(postToParent2).then((picked) => {
|
|
10541
|
+
if (!picked) return;
|
|
10542
|
+
const item = { assetId: picked.assetId, alt: "Logo" };
|
|
10543
|
+
void runMutation(
|
|
10544
|
+
active.sectionId,
|
|
10545
|
+
(tree) => addMediaStripItem(tree, item, active.index),
|
|
10546
|
+
{ [picked.assetId]: picked.url }
|
|
10547
|
+
).then((applied) => {
|
|
10548
|
+
if (applied) setActive({ sectionId: active.sectionId, index: active.index + 1 });
|
|
10549
|
+
});
|
|
10550
|
+
});
|
|
10551
|
+
},
|
|
10552
|
+
onChangeImage: () => {
|
|
10553
|
+
void requestAssetPick(postToParent2).then((picked) => {
|
|
10554
|
+
if (!picked) return;
|
|
10555
|
+
void runMutation(
|
|
10556
|
+
active.sectionId,
|
|
10557
|
+
(tree) => setMediaStripItemAsset(tree, active.index, picked.assetId),
|
|
10558
|
+
{ [picked.assetId]: picked.url }
|
|
10559
|
+
);
|
|
10560
|
+
});
|
|
10561
|
+
},
|
|
10562
|
+
onRemoveItem: () => {
|
|
10563
|
+
void runMutation(active.sectionId, (tree) => removeMediaStripItem(tree, active.index)).then(
|
|
10564
|
+
(applied) => {
|
|
10565
|
+
if (applied) setActive(null);
|
|
10566
|
+
}
|
|
10567
|
+
);
|
|
10568
|
+
},
|
|
10569
|
+
onMoveLeft: () => {
|
|
10570
|
+
void runMutation(active.sectionId, (tree) => reorderMediaStripItem(tree, active.index, -1)).then(
|
|
10571
|
+
(applied) => {
|
|
10572
|
+
if (applied) setActive({ sectionId: active.sectionId, index: active.index - 1 });
|
|
10573
|
+
}
|
|
10574
|
+
);
|
|
10575
|
+
},
|
|
10576
|
+
onMoveRight: () => {
|
|
10577
|
+
void runMutation(active.sectionId, (tree) => reorderMediaStripItem(tree, active.index, 1)).then(
|
|
10578
|
+
(applied) => {
|
|
10579
|
+
if (applied) setActive({ sectionId: active.sectionId, index: active.index + 1 });
|
|
10580
|
+
}
|
|
10581
|
+
);
|
|
10582
|
+
}
|
|
9678
10583
|
}
|
|
9679
|
-
|
|
9680
|
-
|
|
9681
|
-
|
|
9682
|
-
"div",
|
|
9683
|
-
{
|
|
9684
|
-
style: {
|
|
9685
|
-
position: "fixed",
|
|
9686
|
-
top: reviewRect.top + 12,
|
|
9687
|
-
left: reviewRect.left,
|
|
9688
|
-
width: reviewRect.width,
|
|
9689
|
-
display: "flex",
|
|
9690
|
-
gap: 8,
|
|
9691
|
-
justifyContent: "flex-end",
|
|
9692
|
-
paddingRight: 12,
|
|
9693
|
-
zIndex: 2147483201
|
|
9694
|
-
},
|
|
9695
|
-
children: [
|
|
9696
|
-
/* @__PURE__ */ jsx17(ReviewButton, { label: "Accept", onClick: () => decide("accept"), background: PRIMARY2, color: "#ffffff", children: /* @__PURE__ */ jsx17(Check, { size: 16, strokeWidth: 2.5, "aria-hidden": true }) }),
|
|
9697
|
-
/* @__PURE__ */ jsx17(ReviewButton, { label: "Discard", onClick: () => decide("discard"), background: "#EFF6FF", color: "#0c0a09", children: /* @__PURE__ */ jsx17(X, { size: 16, strokeWidth: 2, "aria-hidden": true }) })
|
|
9698
|
-
]
|
|
9699
|
-
}
|
|
9700
|
-
)
|
|
9701
|
-
] })
|
|
10584
|
+
)
|
|
10585
|
+
}
|
|
10586
|
+
)
|
|
9702
10587
|
] });
|
|
9703
10588
|
}
|
|
9704
10589
|
|
|
9705
10590
|
// src/ui/ai-section/AiPricingCardOverlay.tsx
|
|
9706
|
-
import { useCallback as
|
|
9707
|
-
import { Star } from "lucide-react";
|
|
10591
|
+
import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef6, useState as useState8 } from "react";
|
|
10592
|
+
import { Star as Star2 } from "lucide-react";
|
|
9708
10593
|
|
|
9709
10594
|
// src/lib/ai-pricing-tree.ts
|
|
9710
10595
|
var PRICING_MIN_CARDS = 1;
|
|
@@ -9847,16 +10732,16 @@ function removePricingCardFeature(tree, index) {
|
|
|
9847
10732
|
}
|
|
9848
10733
|
|
|
9849
10734
|
// src/ui/ai-section/AiPricingCardOverlay.tsx
|
|
9850
|
-
import { Fragment as
|
|
10735
|
+
import { Fragment as Fragment7, jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
9851
10736
|
var EMPHASIS_TREATMENTS = [
|
|
9852
10737
|
{ value: "outlined", label: "Outline" },
|
|
9853
10738
|
{ value: "lifted", label: "Lift" },
|
|
9854
10739
|
{ value: "inverted", label: "Invert" },
|
|
9855
10740
|
{ value: "accent-header", label: "Header" }
|
|
9856
10741
|
];
|
|
9857
|
-
var
|
|
9858
|
-
var
|
|
9859
|
-
var
|
|
10742
|
+
var PRIMARY4 = "#0885FE";
|
|
10743
|
+
var OHW_BLUE2 = `var(--ohw-primary, ${PRIMARY4})`;
|
|
10744
|
+
var OHW_BLUE_DARK2 = `color-mix(in srgb, var(--ohw-primary, ${PRIMARY4}) 60%, #000000)`;
|
|
9860
10745
|
function findPricingCardElement(sectionId, index) {
|
|
9861
10746
|
const sectionEl = findByInstanceId(sectionId);
|
|
9862
10747
|
if (!sectionEl) return null;
|
|
@@ -9866,7 +10751,7 @@ function findPricingCardElement(sectionId, index) {
|
|
|
9866
10751
|
}
|
|
9867
10752
|
return null;
|
|
9868
10753
|
}
|
|
9869
|
-
function
|
|
10754
|
+
function readRect3(ref) {
|
|
9870
10755
|
const el = ref && findPricingCardElement(ref.sectionId, ref.index);
|
|
9871
10756
|
if (!el) return null;
|
|
9872
10757
|
const r2 = el.getBoundingClientRect();
|
|
@@ -9874,14 +10759,14 @@ function readRect2(ref) {
|
|
|
9874
10759
|
return { top: r2.top, left: r2.left, width: r2.width, height: r2.height };
|
|
9875
10760
|
}
|
|
9876
10761
|
function useLiveCardRect(ref) {
|
|
9877
|
-
const [rect, setRect] =
|
|
9878
|
-
|
|
10762
|
+
const [rect, setRect] = useState8(null);
|
|
10763
|
+
useEffect6(() => {
|
|
9879
10764
|
if (!ref) {
|
|
9880
10765
|
setRect(null);
|
|
9881
10766
|
return;
|
|
9882
10767
|
}
|
|
9883
10768
|
const update = () => {
|
|
9884
|
-
const next =
|
|
10769
|
+
const next = readRect3(ref);
|
|
9885
10770
|
setRect(
|
|
9886
10771
|
(prev) => prev && next && prev.top === next.top && prev.left === next.left && prev.width === next.width && prev.height === next.height ? prev : next
|
|
9887
10772
|
);
|
|
@@ -9899,7 +10784,7 @@ function useLiveCardRect(ref) {
|
|
|
9899
10784
|
}, [ref?.sectionId, ref?.index]);
|
|
9900
10785
|
return rect;
|
|
9901
10786
|
}
|
|
9902
|
-
function
|
|
10787
|
+
function requestValidateTree2(postToParent2, tree) {
|
|
9903
10788
|
return new Promise((resolve) => {
|
|
9904
10789
|
const id = `ai-validate-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
|
|
9905
10790
|
const timeout = window.setTimeout(() => {
|
|
@@ -9916,13 +10801,13 @@ function requestValidateTree(postToParent2, tree) {
|
|
|
9916
10801
|
postToParent2({ type: "ow:ai-validate-tree-request", id, tree });
|
|
9917
10802
|
});
|
|
9918
10803
|
}
|
|
9919
|
-
function
|
|
10804
|
+
function Pill2({
|
|
9920
10805
|
label,
|
|
9921
10806
|
onClick,
|
|
9922
10807
|
disabled,
|
|
9923
10808
|
active
|
|
9924
10809
|
}) {
|
|
9925
|
-
return /* @__PURE__ */
|
|
10810
|
+
return /* @__PURE__ */ jsx19(
|
|
9926
10811
|
"button",
|
|
9927
10812
|
{
|
|
9928
10813
|
type: "button",
|
|
@@ -9937,8 +10822,8 @@ function Pill({
|
|
|
9937
10822
|
borderRadius: 999,
|
|
9938
10823
|
border: "none",
|
|
9939
10824
|
cursor: disabled ? "default" : "pointer",
|
|
9940
|
-
background: active ?
|
|
9941
|
-
color: active ? "#ffffff" :
|
|
10825
|
+
background: active ? OHW_BLUE_DARK2 : "#ffffff",
|
|
10826
|
+
color: active ? "#ffffff" : OHW_BLUE_DARK2,
|
|
9942
10827
|
opacity: disabled ? 0.4 : 1,
|
|
9943
10828
|
fontSize: 12,
|
|
9944
10829
|
lineHeight: "16px",
|
|
@@ -9971,7 +10856,7 @@ function PricingCardToolbar({
|
|
|
9971
10856
|
const buttonCount = (card?.children ?? []).filter((c) => c.type === "button").length;
|
|
9972
10857
|
const featureCount = pricingCardFeatureCount(entry.tree, index);
|
|
9973
10858
|
const pillWrap = window.innerWidth <= 480 ? "wrap" : "nowrap";
|
|
9974
|
-
return /* @__PURE__ */
|
|
10859
|
+
return /* @__PURE__ */ jsxs11(
|
|
9975
10860
|
"div",
|
|
9976
10861
|
{
|
|
9977
10862
|
"data-ohw-bridge": "",
|
|
@@ -9982,7 +10867,7 @@ function PricingCardToolbar({
|
|
|
9982
10867
|
flexDirection: "column",
|
|
9983
10868
|
gap: 6,
|
|
9984
10869
|
alignItems: "center",
|
|
9985
|
-
background:
|
|
10870
|
+
background: OHW_BLUE2,
|
|
9986
10871
|
padding: 8,
|
|
9987
10872
|
borderRadius: 12,
|
|
9988
10873
|
boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
|
|
@@ -9993,17 +10878,17 @@ function PricingCardToolbar({
|
|
|
9993
10878
|
maxWidth: pillWrap === "wrap" ? "calc(100vw - 24px)" : "none"
|
|
9994
10879
|
},
|
|
9995
10880
|
children: [
|
|
9996
|
-
/* @__PURE__ */
|
|
9997
|
-
/* @__PURE__ */
|
|
9998
|
-
/* @__PURE__ */
|
|
9999
|
-
/* @__PURE__ */
|
|
10000
|
-
/* @__PURE__ */
|
|
10001
|
-
/* @__PURE__ */
|
|
10002
|
-
/* @__PURE__ */
|
|
10003
|
-
/* @__PURE__ */
|
|
10881
|
+
/* @__PURE__ */ jsxs11("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: [
|
|
10882
|
+
/* @__PURE__ */ jsx19(Pill2, { label: "+ Tier", onClick: onAddTier, disabled: collectionCount >= 4 }),
|
|
10883
|
+
/* @__PURE__ */ jsx19(Pill2, { label: "- Tier", onClick: onRemoveTier, disabled: collectionCount <= 1 }),
|
|
10884
|
+
/* @__PURE__ */ jsx19(Pill2, { label: "Featured", active: isFeatured, onClick: () => onToggleFeatured(!isFeatured) }),
|
|
10885
|
+
/* @__PURE__ */ jsx19(Pill2, { label: "+ Button", onClick: onAddButton, disabled: buttonCount >= 2 }),
|
|
10886
|
+
/* @__PURE__ */ jsx19(Pill2, { label: "- Button", onClick: onRemoveButton, disabled: buttonCount === 0 }),
|
|
10887
|
+
/* @__PURE__ */ jsx19(Pill2, { label: "+ Feature", onClick: onAddFeature, disabled: featureCount >= 10 }),
|
|
10888
|
+
/* @__PURE__ */ jsx19(Pill2, { label: "- Feature", onClick: onRemoveFeature, disabled: featureCount <= 1 })
|
|
10004
10889
|
] }),
|
|
10005
|
-
isFeatured && /* @__PURE__ */
|
|
10006
|
-
|
|
10890
|
+
isFeatured && /* @__PURE__ */ jsx19("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: EMPHASIS_TREATMENTS.map((t) => /* @__PURE__ */ jsx19(
|
|
10891
|
+
Pill2,
|
|
10007
10892
|
{
|
|
10008
10893
|
label: t.label,
|
|
10009
10894
|
active: (featured?.treatment ?? "outlined") === t.value,
|
|
@@ -10011,7 +10896,7 @@ function PricingCardToolbar({
|
|
|
10011
10896
|
},
|
|
10012
10897
|
t.value
|
|
10013
10898
|
)) }),
|
|
10014
|
-
error && /* @__PURE__ */
|
|
10899
|
+
error && /* @__PURE__ */ jsx19("div", { style: { color: "#FCA5A5", fontSize: 11, maxWidth: 220, textAlign: "center" }, children: error })
|
|
10015
10900
|
]
|
|
10016
10901
|
}
|
|
10017
10902
|
);
|
|
@@ -10032,13 +10917,13 @@ function AiPricingCardOverlay({
|
|
|
10032
10917
|
aiSectionsRef,
|
|
10033
10918
|
applyTreeLocalRef
|
|
10034
10919
|
}) {
|
|
10035
|
-
const [hover, setHover] =
|
|
10036
|
-
const [active, setActive] =
|
|
10037
|
-
const [pending, setPending] =
|
|
10038
|
-
const [error, setError] =
|
|
10039
|
-
const activeRef =
|
|
10920
|
+
const [hover, setHover] = useState8(null);
|
|
10921
|
+
const [active, setActive] = useState8(null);
|
|
10922
|
+
const [pending, setPending] = useState8(false);
|
|
10923
|
+
const [error, setError] = useState8(null);
|
|
10924
|
+
const activeRef = useRef6(null);
|
|
10040
10925
|
activeRef.current = active;
|
|
10041
|
-
|
|
10926
|
+
useEffect6(() => {
|
|
10042
10927
|
const onMove = (e) => {
|
|
10043
10928
|
const t = e.target;
|
|
10044
10929
|
if (!(t instanceof HTMLElement)) return;
|
|
@@ -10068,7 +10953,7 @@ function AiPricingCardOverlay({
|
|
|
10068
10953
|
document.documentElement.removeEventListener("mouseleave", onLeave);
|
|
10069
10954
|
};
|
|
10070
10955
|
}, []);
|
|
10071
|
-
|
|
10956
|
+
useEffect6(() => {
|
|
10072
10957
|
const onClick = (e) => {
|
|
10073
10958
|
const current = activeRef.current;
|
|
10074
10959
|
if (!current) return;
|
|
@@ -10083,7 +10968,7 @@ function AiPricingCardOverlay({
|
|
|
10083
10968
|
document.addEventListener("click", onClick, true);
|
|
10084
10969
|
return () => document.removeEventListener("click", onClick, true);
|
|
10085
10970
|
}, []);
|
|
10086
|
-
|
|
10971
|
+
useEffect6(() => {
|
|
10087
10972
|
const onBlur = () => {
|
|
10088
10973
|
if (!activeRef.current) return;
|
|
10089
10974
|
setActive(null);
|
|
@@ -10092,7 +10977,7 @@ function AiPricingCardOverlay({
|
|
|
10092
10977
|
window.addEventListener("blur", onBlur);
|
|
10093
10978
|
return () => window.removeEventListener("blur", onBlur);
|
|
10094
10979
|
}, []);
|
|
10095
|
-
|
|
10980
|
+
useEffect6(() => {
|
|
10096
10981
|
const onKeyDown = (e) => {
|
|
10097
10982
|
if (e.key !== "Escape") return;
|
|
10098
10983
|
if (!activeRef.current) return;
|
|
@@ -10102,14 +10987,14 @@ function AiPricingCardOverlay({
|
|
|
10102
10987
|
document.addEventListener("keydown", onKeyDown);
|
|
10103
10988
|
return () => document.removeEventListener("keydown", onKeyDown);
|
|
10104
10989
|
}, []);
|
|
10105
|
-
const findEntry =
|
|
10990
|
+
const findEntry = useCallback4(
|
|
10106
10991
|
(sectionId) => {
|
|
10107
10992
|
const state = parseAiSectionsState(aiSectionsRef.current);
|
|
10108
10993
|
return state.sections.find((s) => s.id === sectionId) ?? null;
|
|
10109
10994
|
},
|
|
10110
10995
|
[aiSectionsRef]
|
|
10111
10996
|
);
|
|
10112
|
-
const runMutation =
|
|
10997
|
+
const runMutation = useCallback4(
|
|
10113
10998
|
async (sectionId, mutate) => {
|
|
10114
10999
|
const entry = findEntry(sectionId);
|
|
10115
11000
|
if (!entry) return false;
|
|
@@ -10117,7 +11002,7 @@ function AiPricingCardOverlay({
|
|
|
10117
11002
|
if (!nextTree) return false;
|
|
10118
11003
|
setPending(true);
|
|
10119
11004
|
setError(null);
|
|
10120
|
-
const { ok, reasons } = await
|
|
11005
|
+
const { ok, reasons } = await requestValidateTree2(postToParent2, nextTree);
|
|
10121
11006
|
setPending(false);
|
|
10122
11007
|
if (!ok) {
|
|
10123
11008
|
setError(reasons[0] ?? "That change is not allowed.");
|
|
@@ -10142,8 +11027,8 @@ function AiPricingCardOverlay({
|
|
|
10142
11027
|
const activeEntry = active ? findEntry(active.sectionId) : null;
|
|
10143
11028
|
const activeCardRect = useLiveCardRect(active);
|
|
10144
11029
|
const hoverHandleRect = useLiveCardRect(!active && hover ? hover : null);
|
|
10145
|
-
return /* @__PURE__ */
|
|
10146
|
-
hoverHandleRect && hover && /* @__PURE__ */
|
|
11030
|
+
return /* @__PURE__ */ jsxs11(Fragment7, { children: [
|
|
11031
|
+
hoverHandleRect && hover && /* @__PURE__ */ jsx19(
|
|
10147
11032
|
"button",
|
|
10148
11033
|
{
|
|
10149
11034
|
type: "button",
|
|
@@ -10157,9 +11042,9 @@ function AiPricingCardOverlay({
|
|
|
10157
11042
|
width: 28,
|
|
10158
11043
|
height: 28,
|
|
10159
11044
|
borderRadius: 8,
|
|
10160
|
-
border: `1.5px dashed ${
|
|
11045
|
+
border: `1.5px dashed ${PRIMARY4}`,
|
|
10161
11046
|
background: "#ffffff",
|
|
10162
|
-
color:
|
|
11047
|
+
color: PRIMARY4,
|
|
10163
11048
|
display: "flex",
|
|
10164
11049
|
alignItems: "center",
|
|
10165
11050
|
justifyContent: "center",
|
|
@@ -10168,15 +11053,15 @@ function AiPricingCardOverlay({
|
|
|
10168
11053
|
fontSize: 14,
|
|
10169
11054
|
fontWeight: 700
|
|
10170
11055
|
},
|
|
10171
|
-
children: /* @__PURE__ */
|
|
11056
|
+
children: /* @__PURE__ */ jsx19(Star2, { size: 14, style: { pointerEvents: "none" } })
|
|
10172
11057
|
}
|
|
10173
11058
|
),
|
|
10174
|
-
activeCardRect && active && activeEntry && /* @__PURE__ */
|
|
11059
|
+
activeCardRect && active && activeEntry && /* @__PURE__ */ jsx19(
|
|
10175
11060
|
ItemInteractionLayer,
|
|
10176
11061
|
{
|
|
10177
11062
|
rect: activeCardRect,
|
|
10178
11063
|
state: "active-top",
|
|
10179
|
-
toolbar: /* @__PURE__ */
|
|
11064
|
+
toolbar: /* @__PURE__ */ jsx19(
|
|
10180
11065
|
PricingCardToolbar,
|
|
10181
11066
|
{
|
|
10182
11067
|
entry: activeEntry,
|
|
@@ -10514,28 +11399,28 @@ function scrollToHashSectionWhenReady(behavior = "smooth") {
|
|
|
10514
11399
|
}
|
|
10515
11400
|
|
|
10516
11401
|
// src/ui/link-modal/LinkPopover.tsx
|
|
10517
|
-
import { useEffect as
|
|
11402
|
+
import { useEffect as useEffect10 } from "react";
|
|
10518
11403
|
|
|
10519
11404
|
// src/ui/dialog.tsx
|
|
10520
11405
|
import * as React9 from "react";
|
|
10521
11406
|
import { Dialog as DialogPrimitive } from "radix-ui";
|
|
10522
11407
|
import { X as X2 } from "lucide-react";
|
|
10523
|
-
import { jsx as
|
|
11408
|
+
import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
10524
11409
|
function Dialog2({
|
|
10525
11410
|
...props
|
|
10526
11411
|
}) {
|
|
10527
|
-
return /* @__PURE__ */
|
|
11412
|
+
return /* @__PURE__ */ jsx20(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
|
|
10528
11413
|
}
|
|
10529
11414
|
function DialogPortal({
|
|
10530
11415
|
...props
|
|
10531
11416
|
}) {
|
|
10532
|
-
return /* @__PURE__ */
|
|
11417
|
+
return /* @__PURE__ */ jsx20(DialogPrimitive.Portal, { ...props });
|
|
10533
11418
|
}
|
|
10534
11419
|
function DialogOverlay({
|
|
10535
11420
|
className,
|
|
10536
11421
|
...props
|
|
10537
11422
|
}) {
|
|
10538
|
-
return /* @__PURE__ */
|
|
11423
|
+
return /* @__PURE__ */ jsx20(
|
|
10539
11424
|
DialogPrimitive.Overlay,
|
|
10540
11425
|
{
|
|
10541
11426
|
"data-slot": "dialog-overlay",
|
|
@@ -10548,9 +11433,9 @@ function DialogOverlay({
|
|
|
10548
11433
|
var DialogContent = React9.forwardRef(
|
|
10549
11434
|
({ className, children, showCloseButton = true, container, ...props }, ref) => {
|
|
10550
11435
|
const positionMode = container ? "absolute" : "fixed";
|
|
10551
|
-
return /* @__PURE__ */
|
|
10552
|
-
/* @__PURE__ */
|
|
10553
|
-
/* @__PURE__ */
|
|
11436
|
+
return /* @__PURE__ */ jsxs12(DialogPortal, { container: container ?? void 0, children: [
|
|
11437
|
+
/* @__PURE__ */ jsx20(DialogOverlay, { className: cn(positionMode, "inset-0") }),
|
|
11438
|
+
/* @__PURE__ */ jsxs12(
|
|
10554
11439
|
DialogPrimitive.Content,
|
|
10555
11440
|
{
|
|
10556
11441
|
ref,
|
|
@@ -10566,13 +11451,13 @@ var DialogContent = React9.forwardRef(
|
|
|
10566
11451
|
...props,
|
|
10567
11452
|
children: [
|
|
10568
11453
|
children,
|
|
10569
|
-
showCloseButton ? /* @__PURE__ */
|
|
11454
|
+
showCloseButton ? /* @__PURE__ */ jsx20(
|
|
10570
11455
|
DialogPrimitive.Close,
|
|
10571
11456
|
{
|
|
10572
11457
|
type: "button",
|
|
10573
11458
|
className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50",
|
|
10574
11459
|
"aria-label": "Close",
|
|
10575
|
-
children: /* @__PURE__ */
|
|
11460
|
+
children: /* @__PURE__ */ jsx20(X2, { size: 16, "aria-hidden": true })
|
|
10576
11461
|
}
|
|
10577
11462
|
) : null
|
|
10578
11463
|
]
|
|
@@ -10586,13 +11471,13 @@ function DialogHeader({
|
|
|
10586
11471
|
className,
|
|
10587
11472
|
...props
|
|
10588
11473
|
}) {
|
|
10589
|
-
return /* @__PURE__ */
|
|
11474
|
+
return /* @__PURE__ */ jsx20("div", { className: cn("flex flex-col gap-1.5", className), ...props });
|
|
10590
11475
|
}
|
|
10591
11476
|
function DialogFooter({
|
|
10592
11477
|
className,
|
|
10593
11478
|
...props
|
|
10594
11479
|
}) {
|
|
10595
|
-
return /* @__PURE__ */
|
|
11480
|
+
return /* @__PURE__ */ jsx20(
|
|
10596
11481
|
"div",
|
|
10597
11482
|
{
|
|
10598
11483
|
className: cn("flex items-center justify-end gap-2", className),
|
|
@@ -10600,7 +11485,7 @@ function DialogFooter({
|
|
|
10600
11485
|
}
|
|
10601
11486
|
);
|
|
10602
11487
|
}
|
|
10603
|
-
var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
11488
|
+
var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx20(
|
|
10604
11489
|
DialogPrimitive.Title,
|
|
10605
11490
|
{
|
|
10606
11491
|
ref,
|
|
@@ -10612,7 +11497,7 @@ var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE
|
|
|
10612
11497
|
}
|
|
10613
11498
|
));
|
|
10614
11499
|
DialogTitle.displayName = DialogPrimitive.Title.displayName;
|
|
10615
|
-
var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
11500
|
+
var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx20(
|
|
10616
11501
|
DialogPrimitive.Description,
|
|
10617
11502
|
{
|
|
10618
11503
|
ref,
|
|
@@ -10628,19 +11513,19 @@ import { Info, X as X4 } from "lucide-react";
|
|
|
10628
11513
|
|
|
10629
11514
|
// src/ui/link-modal/DestinationBreadcrumb.tsx
|
|
10630
11515
|
import { ArrowRight as ArrowRight2, File, GalleryVertical } from "lucide-react";
|
|
10631
|
-
import { jsx as
|
|
11516
|
+
import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
10632
11517
|
function DestinationBreadcrumb({
|
|
10633
11518
|
pageTitle,
|
|
10634
11519
|
sectionLabel
|
|
10635
11520
|
}) {
|
|
10636
|
-
return /* @__PURE__ */
|
|
10637
|
-
/* @__PURE__ */
|
|
10638
|
-
/* @__PURE__ */
|
|
10639
|
-
/* @__PURE__ */
|
|
10640
|
-
/* @__PURE__ */
|
|
10641
|
-
/* @__PURE__ */
|
|
11521
|
+
return /* @__PURE__ */ jsxs13("div", { className: "flex w-full flex-col gap-2", children: [
|
|
11522
|
+
/* @__PURE__ */ jsx21("p", { className: "text-sm font-medium! text-foreground m-0", children: "Destination" }),
|
|
11523
|
+
/* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-3", children: [
|
|
11524
|
+
/* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2", children: [
|
|
11525
|
+
/* @__PURE__ */ jsx21(File, { size: 16, className: "shrink-0 text-foreground", "aria-hidden": true }),
|
|
11526
|
+
/* @__PURE__ */ jsx21("span", { className: "text-sm font-medium leading-none text-foreground!", children: pageTitle })
|
|
10642
11527
|
] }),
|
|
10643
|
-
/* @__PURE__ */
|
|
11528
|
+
/* @__PURE__ */ jsx21(
|
|
10644
11529
|
ArrowRight2,
|
|
10645
11530
|
{
|
|
10646
11531
|
size: 16,
|
|
@@ -10648,8 +11533,8 @@ function DestinationBreadcrumb({
|
|
|
10648
11533
|
"aria-hidden": true
|
|
10649
11534
|
}
|
|
10650
11535
|
),
|
|
10651
|
-
/* @__PURE__ */
|
|
10652
|
-
/* @__PURE__ */
|
|
11536
|
+
/* @__PURE__ */ jsxs13("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
|
|
11537
|
+
/* @__PURE__ */ jsx21(
|
|
10653
11538
|
GalleryVertical,
|
|
10654
11539
|
{
|
|
10655
11540
|
size: 16,
|
|
@@ -10657,7 +11542,7 @@ function DestinationBreadcrumb({
|
|
|
10657
11542
|
"aria-hidden": true
|
|
10658
11543
|
}
|
|
10659
11544
|
),
|
|
10660
|
-
/* @__PURE__ */
|
|
11545
|
+
/* @__PURE__ */ jsx21("span", { className: "truncate text-sm font-medium leading-none text-foreground", children: sectionLabel })
|
|
10661
11546
|
] })
|
|
10662
11547
|
] })
|
|
10663
11548
|
] });
|
|
@@ -10665,22 +11550,22 @@ function DestinationBreadcrumb({
|
|
|
10665
11550
|
|
|
10666
11551
|
// src/ui/link-modal/SectionTreeItem.tsx
|
|
10667
11552
|
import { GalleryVertical as GalleryVertical2 } from "lucide-react";
|
|
10668
|
-
import { jsx as
|
|
11553
|
+
import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
10669
11554
|
function SectionTreeItem({
|
|
10670
11555
|
section,
|
|
10671
11556
|
onSelect,
|
|
10672
11557
|
selected
|
|
10673
11558
|
}) {
|
|
10674
11559
|
const interactive = Boolean(onSelect);
|
|
10675
|
-
return /* @__PURE__ */
|
|
10676
|
-
/* @__PURE__ */
|
|
11560
|
+
return /* @__PURE__ */ jsxs14("div", { className: "flex h-9 w-full items-end pl-3", children: [
|
|
11561
|
+
/* @__PURE__ */ jsx22(
|
|
10677
11562
|
"div",
|
|
10678
11563
|
{
|
|
10679
11564
|
className: "-mr-px h-9 w-2 shrink-0 rounded-bl-sm border-b border-l border-border mb-4",
|
|
10680
11565
|
"aria-hidden": true
|
|
10681
11566
|
}
|
|
10682
11567
|
),
|
|
10683
|
-
/* @__PURE__ */
|
|
11568
|
+
/* @__PURE__ */ jsxs14(
|
|
10684
11569
|
"div",
|
|
10685
11570
|
{
|
|
10686
11571
|
role: interactive ? "button" : void 0,
|
|
@@ -10698,7 +11583,7 @@ function SectionTreeItem({
|
|
|
10698
11583
|
interactive && selected && "border-bridge-primary"
|
|
10699
11584
|
),
|
|
10700
11585
|
children: [
|
|
10701
|
-
/* @__PURE__ */
|
|
11586
|
+
/* @__PURE__ */ jsx22(
|
|
10702
11587
|
GalleryVertical2,
|
|
10703
11588
|
{
|
|
10704
11589
|
size: 16,
|
|
@@ -10706,7 +11591,7 @@ function SectionTreeItem({
|
|
|
10706
11591
|
"aria-hidden": true
|
|
10707
11592
|
}
|
|
10708
11593
|
),
|
|
10709
|
-
/* @__PURE__ */
|
|
11594
|
+
/* @__PURE__ */ jsx22("span", { className: "truncate text-sm font-normal leading-5 text-foreground", children: section.label })
|
|
10710
11595
|
]
|
|
10711
11596
|
}
|
|
10712
11597
|
)
|
|
@@ -10714,14 +11599,14 @@ function SectionTreeItem({
|
|
|
10714
11599
|
}
|
|
10715
11600
|
|
|
10716
11601
|
// src/ui/link-modal/UrlOrPageInput.tsx
|
|
10717
|
-
import { useEffect as
|
|
11602
|
+
import { useEffect as useEffect7, useId as useId2, useRef as useRef7, useState as useState9 } from "react";
|
|
10718
11603
|
|
|
10719
11604
|
// src/ui/input.tsx
|
|
10720
11605
|
import * as React10 from "react";
|
|
10721
|
-
import { jsx as
|
|
11606
|
+
import { jsx as jsx23 } from "react/jsx-runtime";
|
|
10722
11607
|
var Input = React10.forwardRef(
|
|
10723
11608
|
({ className, type, ...props }, ref) => {
|
|
10724
|
-
return /* @__PURE__ */
|
|
11609
|
+
return /* @__PURE__ */ jsx23(
|
|
10725
11610
|
"input",
|
|
10726
11611
|
{
|
|
10727
11612
|
type,
|
|
@@ -10740,9 +11625,9 @@ Input.displayName = "Input";
|
|
|
10740
11625
|
|
|
10741
11626
|
// src/ui/label.tsx
|
|
10742
11627
|
import { Label as LabelPrimitive } from "radix-ui";
|
|
10743
|
-
import { jsx as
|
|
11628
|
+
import { jsx as jsx24 } from "react/jsx-runtime";
|
|
10744
11629
|
function Label({ className, ...props }) {
|
|
10745
|
-
return /* @__PURE__ */
|
|
11630
|
+
return /* @__PURE__ */ jsx24(
|
|
10746
11631
|
LabelPrimitive.Root,
|
|
10747
11632
|
{
|
|
10748
11633
|
"data-slot": "label",
|
|
@@ -10754,11 +11639,11 @@ function Label({ className, ...props }) {
|
|
|
10754
11639
|
|
|
10755
11640
|
// src/ui/link-modal/UrlOrPageInput.tsx
|
|
10756
11641
|
import { ChevronDown as ChevronDown3, File as File2, X as X3 } from "lucide-react";
|
|
10757
|
-
import { jsx as
|
|
11642
|
+
import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
10758
11643
|
function FieldChevron({
|
|
10759
11644
|
onClick
|
|
10760
11645
|
}) {
|
|
10761
|
-
return /* @__PURE__ */
|
|
11646
|
+
return /* @__PURE__ */ jsx25(
|
|
10762
11647
|
"button",
|
|
10763
11648
|
{
|
|
10764
11649
|
type: "button",
|
|
@@ -10766,7 +11651,7 @@ function FieldChevron({
|
|
|
10766
11651
|
onClick,
|
|
10767
11652
|
"aria-label": "Open page list",
|
|
10768
11653
|
tabIndex: -1,
|
|
10769
|
-
children: /* @__PURE__ */
|
|
11654
|
+
children: /* @__PURE__ */ jsx25(ChevronDown3, { size: 16 })
|
|
10770
11655
|
}
|
|
10771
11656
|
);
|
|
10772
11657
|
}
|
|
@@ -10783,10 +11668,10 @@ function UrlOrPageInput({
|
|
|
10783
11668
|
urlError
|
|
10784
11669
|
}) {
|
|
10785
11670
|
const inputId = useId2();
|
|
10786
|
-
const inputRef =
|
|
10787
|
-
const rootRef =
|
|
10788
|
-
const [isFocused, setIsFocused] =
|
|
10789
|
-
|
|
11671
|
+
const inputRef = useRef7(null);
|
|
11672
|
+
const rootRef = useRef7(null);
|
|
11673
|
+
const [isFocused, setIsFocused] = useState9(false);
|
|
11674
|
+
useEffect7(() => {
|
|
10790
11675
|
if (!dropdownOpen) return;
|
|
10791
11676
|
const isOutside = (e) => {
|
|
10792
11677
|
const root = rootRef.current;
|
|
@@ -10827,11 +11712,11 @@ function UrlOrPageInput({
|
|
|
10827
11712
|
"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]",
|
|
10828
11713
|
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"
|
|
10829
11714
|
);
|
|
10830
|
-
return /* @__PURE__ */
|
|
10831
|
-
/* @__PURE__ */
|
|
10832
|
-
/* @__PURE__ */
|
|
10833
|
-
/* @__PURE__ */
|
|
10834
|
-
selectedPage ? /* @__PURE__ */
|
|
11715
|
+
return /* @__PURE__ */ jsxs15("div", { className: "flex w-full flex-col gap-2 p-0", children: [
|
|
11716
|
+
/* @__PURE__ */ jsx25(Label, { htmlFor: inputId, className: cn(urlError && "text-destructive"), children: "Destination" }),
|
|
11717
|
+
/* @__PURE__ */ jsxs15("div", { ref: rootRef, className: "relative w-full", children: [
|
|
11718
|
+
/* @__PURE__ */ jsxs15("div", { "data-ohw-link-field": true, className: fieldClassName, children: [
|
|
11719
|
+
selectedPage ? /* @__PURE__ */ jsx25("div", { className: "flex shrink-0 items-center pr-2", children: /* @__PURE__ */ jsx25(
|
|
10835
11720
|
File2,
|
|
10836
11721
|
{
|
|
10837
11722
|
size: 16,
|
|
@@ -10839,7 +11724,7 @@ function UrlOrPageInput({
|
|
|
10839
11724
|
"aria-hidden": true
|
|
10840
11725
|
}
|
|
10841
11726
|
) }) : null,
|
|
10842
|
-
readOnly ? /* @__PURE__ */
|
|
11727
|
+
readOnly ? /* @__PURE__ */ jsx25("span", { className: "min-w-0 flex-1 truncate text-sm leading-5 text-foreground", children: selectedPage?.title ?? value }) : /* @__PURE__ */ jsx25(
|
|
10843
11728
|
Input,
|
|
10844
11729
|
{
|
|
10845
11730
|
ref: inputRef,
|
|
@@ -10865,7 +11750,7 @@ function UrlOrPageInput({
|
|
|
10865
11750
|
)
|
|
10866
11751
|
}
|
|
10867
11752
|
),
|
|
10868
|
-
selectedPage && !readOnly ? /* @__PURE__ */
|
|
11753
|
+
selectedPage && !readOnly ? /* @__PURE__ */ jsx25(
|
|
10869
11754
|
"button",
|
|
10870
11755
|
{
|
|
10871
11756
|
type: "button",
|
|
@@ -10873,26 +11758,26 @@ function UrlOrPageInput({
|
|
|
10873
11758
|
onMouseDown: clearSelection,
|
|
10874
11759
|
"aria-label": "Clear selected page",
|
|
10875
11760
|
tabIndex: -1,
|
|
10876
|
-
children: /* @__PURE__ */
|
|
11761
|
+
children: /* @__PURE__ */ jsx25(X3, { size: 16, "aria-hidden": true })
|
|
10877
11762
|
}
|
|
10878
11763
|
) : null,
|
|
10879
|
-
!readOnly ? /* @__PURE__ */
|
|
11764
|
+
!readOnly ? /* @__PURE__ */ jsx25(FieldChevron, { onClick: toggleDropdown }) : null
|
|
10880
11765
|
] }),
|
|
10881
|
-
dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */
|
|
11766
|
+
dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ jsx25(
|
|
10882
11767
|
"div",
|
|
10883
11768
|
{
|
|
10884
11769
|
"data-ohw-link-page-dropdown": "",
|
|
10885
11770
|
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",
|
|
10886
11771
|
onMouseDown: (e) => e.preventDefault(),
|
|
10887
|
-
children: filteredPages.map((page) => /* @__PURE__ */
|
|
11772
|
+
children: filteredPages.map((page) => /* @__PURE__ */ jsxs15(
|
|
10888
11773
|
"button",
|
|
10889
11774
|
{
|
|
10890
11775
|
type: "button",
|
|
10891
11776
|
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",
|
|
10892
11777
|
onClick: () => onPageSelect(page),
|
|
10893
11778
|
children: [
|
|
10894
|
-
/* @__PURE__ */
|
|
10895
|
-
/* @__PURE__ */
|
|
11779
|
+
/* @__PURE__ */ jsx25(File2, { size: 16, className: "shrink-0", "aria-hidden": true }),
|
|
11780
|
+
/* @__PURE__ */ jsx25("span", { className: "truncate", children: page.title })
|
|
10896
11781
|
]
|
|
10897
11782
|
},
|
|
10898
11783
|
page.path
|
|
@@ -10900,34 +11785,34 @@ function UrlOrPageInput({
|
|
|
10900
11785
|
}
|
|
10901
11786
|
) : null
|
|
10902
11787
|
] }),
|
|
10903
|
-
urlError ? /* @__PURE__ */
|
|
11788
|
+
urlError ? /* @__PURE__ */ jsx25("p", { className: "text-sm font-medium text-destructive", children: urlError }) : null
|
|
10904
11789
|
] });
|
|
10905
11790
|
}
|
|
10906
11791
|
|
|
10907
11792
|
// src/ui/link-modal/LinkEditorPanel.tsx
|
|
10908
|
-
import { Fragment as
|
|
11793
|
+
import { Fragment as Fragment8, jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
10909
11794
|
function LinkEditorPanel({ state, onClose }) {
|
|
10910
11795
|
const isCancel = state.secondaryLabel === "Cancel" || state.secondaryLabel === "Back to sections";
|
|
10911
|
-
return /* @__PURE__ */
|
|
10912
|
-
/* @__PURE__ */
|
|
11796
|
+
return /* @__PURE__ */ jsxs16(Fragment8, { children: [
|
|
11797
|
+
/* @__PURE__ */ jsx26(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx26(
|
|
10913
11798
|
"button",
|
|
10914
11799
|
{
|
|
10915
11800
|
type: "button",
|
|
10916
11801
|
className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50 h-7",
|
|
10917
11802
|
"aria-label": "Close",
|
|
10918
11803
|
onClick: onClose,
|
|
10919
|
-
children: /* @__PURE__ */
|
|
11804
|
+
children: /* @__PURE__ */ jsx26(X4, { size: 16, "aria-hidden": true })
|
|
10920
11805
|
}
|
|
10921
11806
|
) }),
|
|
10922
|
-
/* @__PURE__ */
|
|
10923
|
-
/* @__PURE__ */
|
|
10924
|
-
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */
|
|
11807
|
+
/* @__PURE__ */ jsx26(DialogHeader, { className: "w-full gap-1.5 p-6 pr-12", children: /* @__PURE__ */ jsx26(DialogTitle, { className: "m-0 w-full break-words", children: state.title }) }),
|
|
11808
|
+
/* @__PURE__ */ jsxs16("div", { className: "flex w-full flex-col gap-3 px-6 pb-8 pt-1", children: [
|
|
11809
|
+
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ jsx26(
|
|
10925
11810
|
DestinationBreadcrumb,
|
|
10926
11811
|
{
|
|
10927
11812
|
pageTitle: state.selectedPage.title,
|
|
10928
11813
|
sectionLabel: state.selectedSection.label
|
|
10929
11814
|
}
|
|
10930
|
-
) : /* @__PURE__ */
|
|
11815
|
+
) : /* @__PURE__ */ jsx26(
|
|
10931
11816
|
UrlOrPageInput,
|
|
10932
11817
|
{
|
|
10933
11818
|
value: state.searchValue,
|
|
@@ -10940,8 +11825,8 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
10940
11825
|
urlError: state.urlError
|
|
10941
11826
|
}
|
|
10942
11827
|
),
|
|
10943
|
-
state.showChooseSection ? /* @__PURE__ */
|
|
10944
|
-
/* @__PURE__ */
|
|
11828
|
+
state.showChooseSection ? /* @__PURE__ */ jsxs16("div", { className: "flex flex-col justify-center gap-2", children: [
|
|
11829
|
+
/* @__PURE__ */ jsx26(
|
|
10945
11830
|
Button,
|
|
10946
11831
|
{
|
|
10947
11832
|
type: "button",
|
|
@@ -10952,15 +11837,15 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
10952
11837
|
children: "Choose a section"
|
|
10953
11838
|
}
|
|
10954
11839
|
),
|
|
10955
|
-
/* @__PURE__ */
|
|
10956
|
-
/* @__PURE__ */
|
|
10957
|
-
/* @__PURE__ */
|
|
11840
|
+
/* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
|
|
11841
|
+
/* @__PURE__ */ jsx26(Info, { size: 16, className: "shrink-0", "aria-hidden": true }),
|
|
11842
|
+
/* @__PURE__ */ jsx26("span", { children: "Pick a section this link should scroll to." })
|
|
10958
11843
|
] })
|
|
10959
11844
|
] }) : null,
|
|
10960
|
-
state.showSectionRow && state.selectedSection ? /* @__PURE__ */
|
|
11845
|
+
state.showSectionRow && state.selectedSection ? /* @__PURE__ */ jsx26(SectionTreeItem, { section: state.selectedSection, selected: true }) : null
|
|
10961
11846
|
] }),
|
|
10962
|
-
/* @__PURE__ */
|
|
10963
|
-
/* @__PURE__ */
|
|
11847
|
+
/* @__PURE__ */ jsxs16(DialogFooter, { className: "w-full px-6 pb-6", children: [
|
|
11848
|
+
/* @__PURE__ */ jsx26(
|
|
10964
11849
|
Button,
|
|
10965
11850
|
{
|
|
10966
11851
|
type: "button",
|
|
@@ -10975,7 +11860,7 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
10975
11860
|
children: state.secondaryLabel
|
|
10976
11861
|
}
|
|
10977
11862
|
),
|
|
10978
|
-
/* @__PURE__ */
|
|
11863
|
+
/* @__PURE__ */ jsx26(
|
|
10979
11864
|
Button,
|
|
10980
11865
|
{
|
|
10981
11866
|
type: "button",
|
|
@@ -10994,11 +11879,11 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
10994
11879
|
}
|
|
10995
11880
|
|
|
10996
11881
|
// src/ui/link-modal/SectionPickerOverlay.tsx
|
|
10997
|
-
import { useCallback as
|
|
11882
|
+
import { useCallback as useCallback5, useEffect as useEffect8, useMemo as useMemo2, useRef as useRef8, useState as useState10 } from "react";
|
|
10998
11883
|
import { createPortal as createPortal2 } from "react-dom";
|
|
10999
11884
|
import { ArrowLeft as ArrowLeft2, Check as Check2 } from "lucide-react";
|
|
11000
11885
|
import { usePathname, useRouter as useRouter2 } from "next/navigation";
|
|
11001
|
-
import { jsx as
|
|
11886
|
+
import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
11002
11887
|
var DIM_OVERLAY = "rgba(0, 0, 0, 0.45)";
|
|
11003
11888
|
function rectsEqual(a, b) {
|
|
11004
11889
|
if (a.size !== b.size) return false;
|
|
@@ -11031,12 +11916,12 @@ function hitTestSectionId(x, y, sectionIds, rects) {
|
|
|
11031
11916
|
return null;
|
|
11032
11917
|
}
|
|
11033
11918
|
function useSectionRects(sectionIdsKey, enabled) {
|
|
11034
|
-
const [rects, setRects] =
|
|
11919
|
+
const [rects, setRects] = useState10(/* @__PURE__ */ new Map());
|
|
11035
11920
|
const sectionIds = useMemo2(
|
|
11036
11921
|
() => sectionIdsKey ? sectionIdsKey.split("\0") : [],
|
|
11037
11922
|
[sectionIdsKey]
|
|
11038
11923
|
);
|
|
11039
|
-
|
|
11924
|
+
useEffect8(() => {
|
|
11040
11925
|
if (!enabled || sectionIds.length === 0) {
|
|
11041
11926
|
setRects((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Map());
|
|
11042
11927
|
return;
|
|
@@ -11077,13 +11962,13 @@ function SectionPickerOverlay({
|
|
|
11077
11962
|
}) {
|
|
11078
11963
|
const router = useRouter2();
|
|
11079
11964
|
const pathname = usePathname();
|
|
11080
|
-
const [selectedId, setSelectedId] =
|
|
11081
|
-
const [hoveredId, setHoveredId] =
|
|
11082
|
-
const pointerRef =
|
|
11083
|
-
const pointerScreenRef =
|
|
11084
|
-
const iframeOffsetTopRef =
|
|
11085
|
-
const sectionIdsRef =
|
|
11086
|
-
const [chromeClip, setChromeClip] =
|
|
11965
|
+
const [selectedId, setSelectedId] = useState10(null);
|
|
11966
|
+
const [hoveredId, setHoveredId] = useState10(null);
|
|
11967
|
+
const pointerRef = useRef8(null);
|
|
11968
|
+
const pointerScreenRef = useRef8(null);
|
|
11969
|
+
const iframeOffsetTopRef = useRef8(null);
|
|
11970
|
+
const sectionIdsRef = useRef8([]);
|
|
11971
|
+
const [chromeClip, setChromeClip] = useState10(
|
|
11087
11972
|
() => ({
|
|
11088
11973
|
top: 0,
|
|
11089
11974
|
bottom: typeof window !== "undefined" ? window.innerHeight : 0
|
|
@@ -11091,12 +11976,12 @@ function SectionPickerOverlay({
|
|
|
11091
11976
|
);
|
|
11092
11977
|
const normalizedTarget = normalizePath(pagePath);
|
|
11093
11978
|
const isOnTargetPage = normalizePath(pathname) === normalizedTarget;
|
|
11094
|
-
|
|
11979
|
+
useEffect8(() => {
|
|
11095
11980
|
if (isOnTargetPage) return;
|
|
11096
11981
|
const search = readPreservedSearch();
|
|
11097
11982
|
router.push(`${normalizedTarget}${search}`);
|
|
11098
11983
|
}, [isOnTargetPage, normalizedTarget, router]);
|
|
11099
|
-
|
|
11984
|
+
useEffect8(() => {
|
|
11100
11985
|
document.documentElement.setAttribute("data-ohw-section-picking", "");
|
|
11101
11986
|
document.querySelectorAll("[data-ohw-hovered]").forEach((el) => {
|
|
11102
11987
|
el.removeAttribute("data-ohw-hovered");
|
|
@@ -11125,7 +12010,7 @@ function SectionPickerOverlay({
|
|
|
11125
12010
|
);
|
|
11126
12011
|
sectionIdsRef.current = sectionIds;
|
|
11127
12012
|
const rects = useSectionRects(sectionIdsKey, isOnTargetPage);
|
|
11128
|
-
const applyHoverAt =
|
|
12013
|
+
const applyHoverAt = useCallback5(
|
|
11129
12014
|
(x, y, liveRects) => {
|
|
11130
12015
|
const ids = sectionIdsRef.current;
|
|
11131
12016
|
const map = liveRects ?? readSectionRects(ids);
|
|
@@ -11134,7 +12019,7 @@ function SectionPickerOverlay({
|
|
|
11134
12019
|
},
|
|
11135
12020
|
[]
|
|
11136
12021
|
);
|
|
11137
|
-
|
|
12022
|
+
useEffect8(() => {
|
|
11138
12023
|
const applyClip = (iframeOffsetTop, visibleCanvasTop, canvasH) => {
|
|
11139
12024
|
const top = Math.max(0, visibleCanvasTop - iframeOffsetTop);
|
|
11140
12025
|
const bottom = Math.min(
|
|
@@ -11176,12 +12061,12 @@ function SectionPickerOverlay({
|
|
|
11176
12061
|
window.removeEventListener("resize", onResize);
|
|
11177
12062
|
};
|
|
11178
12063
|
}, [applyHoverAt]);
|
|
11179
|
-
|
|
12064
|
+
useEffect8(() => {
|
|
11180
12065
|
const ptr = pointerRef.current;
|
|
11181
12066
|
if (!ptr) return;
|
|
11182
12067
|
applyHoverAt(ptr.x, ptr.y, rects);
|
|
11183
12068
|
}, [rects, applyHoverAt]);
|
|
11184
|
-
|
|
12069
|
+
useEffect8(() => {
|
|
11185
12070
|
const rememberPointer = (clientX, clientY) => {
|
|
11186
12071
|
pointerRef.current = { x: clientX, y: clientY };
|
|
11187
12072
|
const top = iframeOffsetTopRef.current;
|
|
@@ -11205,7 +12090,7 @@ function SectionPickerOverlay({
|
|
|
11205
12090
|
window.removeEventListener("message", onPointerSync);
|
|
11206
12091
|
};
|
|
11207
12092
|
}, [rects, applyHoverAt]);
|
|
11208
|
-
const handleSelect =
|
|
12093
|
+
const handleSelect = useCallback5(
|
|
11209
12094
|
(section) => {
|
|
11210
12095
|
if (selectedId) return;
|
|
11211
12096
|
setSelectedId(section.id);
|
|
@@ -11213,7 +12098,7 @@ function SectionPickerOverlay({
|
|
|
11213
12098
|
},
|
|
11214
12099
|
[selectedId, onSelect]
|
|
11215
12100
|
);
|
|
11216
|
-
|
|
12101
|
+
useEffect8(() => {
|
|
11217
12102
|
const onKeyDown = (e) => {
|
|
11218
12103
|
if (e.key === "Escape") {
|
|
11219
12104
|
e.preventDefault();
|
|
@@ -11227,7 +12112,7 @@ function SectionPickerOverlay({
|
|
|
11227
12112
|
const portalRoot = typeof document !== "undefined" ? document.querySelector("[data-ohw-bridge-root]") ?? document.body : null;
|
|
11228
12113
|
if (!portalRoot) return null;
|
|
11229
12114
|
return createPortal2(
|
|
11230
|
-
/* @__PURE__ */
|
|
12115
|
+
/* @__PURE__ */ jsxs17(
|
|
11231
12116
|
"div",
|
|
11232
12117
|
{
|
|
11233
12118
|
"data-ohw-section-picker": "",
|
|
@@ -11237,12 +12122,12 @@ function SectionPickerOverlay({
|
|
|
11237
12122
|
role: "dialog",
|
|
11238
12123
|
"aria-label": "Choose a section",
|
|
11239
12124
|
children: [
|
|
11240
|
-
/* @__PURE__ */
|
|
12125
|
+
/* @__PURE__ */ jsx27(
|
|
11241
12126
|
"div",
|
|
11242
12127
|
{
|
|
11243
12128
|
className: "pointer-events-auto fixed left-5 z-[2]",
|
|
11244
12129
|
style: { top: chromeClip.top + 20 },
|
|
11245
|
-
children: /* @__PURE__ */
|
|
12130
|
+
children: /* @__PURE__ */ jsxs17(
|
|
11246
12131
|
Button,
|
|
11247
12132
|
{
|
|
11248
12133
|
type: "button",
|
|
@@ -11251,14 +12136,14 @@ function SectionPickerOverlay({
|
|
|
11251
12136
|
className: "h-8 min-w-0 gap-1 border-border bg-background px-2 py-1.5 shadow-sm hover:bg-muted cursor-pointer",
|
|
11252
12137
|
onClick: onBack,
|
|
11253
12138
|
children: [
|
|
11254
|
-
/* @__PURE__ */
|
|
12139
|
+
/* @__PURE__ */ jsx27(ArrowLeft2, { className: "size-4 shrink-0", "aria-hidden": true }),
|
|
11255
12140
|
"Back"
|
|
11256
12141
|
]
|
|
11257
12142
|
}
|
|
11258
12143
|
)
|
|
11259
12144
|
}
|
|
11260
12145
|
),
|
|
11261
|
-
/* @__PURE__ */
|
|
12146
|
+
/* @__PURE__ */ jsx27(
|
|
11262
12147
|
"div",
|
|
11263
12148
|
{
|
|
11264
12149
|
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",
|
|
@@ -11271,7 +12156,7 @@ function SectionPickerOverlay({
|
|
|
11271
12156
|
children: "Click on section to select"
|
|
11272
12157
|
}
|
|
11273
12158
|
),
|
|
11274
|
-
!isOnTargetPage ? /* @__PURE__ */
|
|
12159
|
+
!isOnTargetPage ? /* @__PURE__ */ jsx27(
|
|
11275
12160
|
"div",
|
|
11276
12161
|
{
|
|
11277
12162
|
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",
|
|
@@ -11279,14 +12164,14 @@ function SectionPickerOverlay({
|
|
|
11279
12164
|
children: "Loading page preview\u2026"
|
|
11280
12165
|
}
|
|
11281
12166
|
) : null,
|
|
11282
|
-
isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */
|
|
12167
|
+
isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */ jsx27("div", { className: "pointer-events-auto fixed inset-0 z-[1] flex items-center justify-center bg-muted/40", children: /* @__PURE__ */ jsx27("p", { className: "text-sm text-muted-foreground", children: "No sections found on this page." }) }) : null,
|
|
11283
12168
|
isOnTargetPage ? liveSections.map((section) => {
|
|
11284
12169
|
const rect = rects.get(section.id);
|
|
11285
12170
|
if (!rect || rect.width <= 0 || rect.height <= 0) return null;
|
|
11286
12171
|
const isSelected = selectedId === section.id;
|
|
11287
12172
|
const isHovered = hoveredId === section.id;
|
|
11288
12173
|
const isLit = isSelected || isHovered;
|
|
11289
|
-
return /* @__PURE__ */
|
|
12174
|
+
return /* @__PURE__ */ jsxs17(
|
|
11290
12175
|
"button",
|
|
11291
12176
|
{
|
|
11292
12177
|
type: "button",
|
|
@@ -11301,7 +12186,7 @@ function SectionPickerOverlay({
|
|
|
11301
12186
|
"aria-label": `Select section ${section.label}`,
|
|
11302
12187
|
onClick: () => handleSelect(section),
|
|
11303
12188
|
children: [
|
|
11304
|
-
isLit ? /* @__PURE__ */
|
|
12189
|
+
isLit ? /* @__PURE__ */ jsx27(
|
|
11305
12190
|
"span",
|
|
11306
12191
|
{
|
|
11307
12192
|
className: "pointer-events-none absolute",
|
|
@@ -11314,13 +12199,13 @@ function SectionPickerOverlay({
|
|
|
11314
12199
|
"aria-hidden": true
|
|
11315
12200
|
}
|
|
11316
12201
|
) : null,
|
|
11317
|
-
isSelected ? /* @__PURE__ */
|
|
12202
|
+
isSelected ? /* @__PURE__ */ jsx27(
|
|
11318
12203
|
"span",
|
|
11319
12204
|
{
|
|
11320
12205
|
className: "absolute right-3 top-3 flex size-8 items-center justify-center rounded-full text-white",
|
|
11321
12206
|
style: { backgroundColor: "var(--ohw-primary, #0885fe)" },
|
|
11322
12207
|
"aria-hidden": true,
|
|
11323
|
-
children: /* @__PURE__ */
|
|
12208
|
+
children: /* @__PURE__ */ jsx27(Check2, { className: "size-5" })
|
|
11324
12209
|
}
|
|
11325
12210
|
) : null
|
|
11326
12211
|
]
|
|
@@ -11336,7 +12221,7 @@ function SectionPickerOverlay({
|
|
|
11336
12221
|
}
|
|
11337
12222
|
|
|
11338
12223
|
// src/ui/link-modal/useLinkModalState.ts
|
|
11339
|
-
import { useCallback as
|
|
12224
|
+
import { useCallback as useCallback6, useEffect as useEffect9, useMemo as useMemo3, useState as useState11 } from "react";
|
|
11340
12225
|
function useLinkModalState({
|
|
11341
12226
|
open,
|
|
11342
12227
|
mode,
|
|
@@ -11349,13 +12234,13 @@ function useLinkModalState({
|
|
|
11349
12234
|
onSubmit
|
|
11350
12235
|
}) {
|
|
11351
12236
|
const availablePages = useMemo3(() => pages, [pages]);
|
|
11352
|
-
const [searchValue, setSearchValue] =
|
|
11353
|
-
const [selectedPage, setSelectedPage] =
|
|
11354
|
-
const [selectedSection, setSelectedSection] =
|
|
11355
|
-
const [step, setStep] =
|
|
11356
|
-
const [dropdownOpen, setDropdownOpen] =
|
|
11357
|
-
const [urlError, setUrlError] =
|
|
11358
|
-
const reset =
|
|
12237
|
+
const [searchValue, setSearchValue] = useState11("");
|
|
12238
|
+
const [selectedPage, setSelectedPage] = useState11(null);
|
|
12239
|
+
const [selectedSection, setSelectedSection] = useState11(null);
|
|
12240
|
+
const [step, setStep] = useState11("input");
|
|
12241
|
+
const [dropdownOpen, setDropdownOpen] = useState11(false);
|
|
12242
|
+
const [urlError, setUrlError] = useState11("");
|
|
12243
|
+
const reset = useCallback6(() => {
|
|
11359
12244
|
setSearchValue("");
|
|
11360
12245
|
setSelectedPage(null);
|
|
11361
12246
|
setSelectedSection(null);
|
|
@@ -11363,7 +12248,7 @@ function useLinkModalState({
|
|
|
11363
12248
|
setDropdownOpen(false);
|
|
11364
12249
|
setUrlError("");
|
|
11365
12250
|
}, []);
|
|
11366
|
-
|
|
12251
|
+
useEffect9(() => {
|
|
11367
12252
|
if (!open) return;
|
|
11368
12253
|
if (mode === "edit" && initialTarget) {
|
|
11369
12254
|
const { pageRoute } = parseTarget(initialTarget);
|
|
@@ -11500,7 +12385,7 @@ function useLinkModalState({
|
|
|
11500
12385
|
}
|
|
11501
12386
|
|
|
11502
12387
|
// src/ui/link-modal/LinkPopover.tsx
|
|
11503
|
-
import { Fragment as
|
|
12388
|
+
import { Fragment as Fragment9, jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
11504
12389
|
function postToParent(data) {
|
|
11505
12390
|
window.parent?.postMessage(data, "*");
|
|
11506
12391
|
}
|
|
@@ -11529,7 +12414,7 @@ function LinkPopover({
|
|
|
11529
12414
|
onSubmit
|
|
11530
12415
|
});
|
|
11531
12416
|
const sectionPickerActive = state.showSectionPicker && Boolean(state.selectedPage);
|
|
11532
|
-
|
|
12417
|
+
useEffect10(() => {
|
|
11533
12418
|
if (!open) return;
|
|
11534
12419
|
if (sectionPickerActive) {
|
|
11535
12420
|
postToParent({ type: "ui:unlock" });
|
|
@@ -11596,15 +12481,15 @@ function LinkPopover({
|
|
|
11596
12481
|
);
|
|
11597
12482
|
};
|
|
11598
12483
|
}, [open, sectionPickerActive]);
|
|
11599
|
-
return /* @__PURE__ */
|
|
11600
|
-
/* @__PURE__ */
|
|
12484
|
+
return /* @__PURE__ */ jsxs18(Fragment9, { children: [
|
|
12485
|
+
/* @__PURE__ */ jsx28(
|
|
11601
12486
|
Dialog2,
|
|
11602
12487
|
{
|
|
11603
12488
|
open: open && !sectionPickerActive,
|
|
11604
12489
|
onOpenChange: (next) => {
|
|
11605
12490
|
if (!next) onClose?.();
|
|
11606
12491
|
},
|
|
11607
|
-
children: /* @__PURE__ */
|
|
12492
|
+
children: /* @__PURE__ */ jsx28(
|
|
11608
12493
|
DialogContent,
|
|
11609
12494
|
{
|
|
11610
12495
|
ref: panelRef,
|
|
@@ -11614,12 +12499,12 @@ function LinkPopover({
|
|
|
11614
12499
|
"data-ohw-bridge": "",
|
|
11615
12500
|
showCloseButton: false,
|
|
11616
12501
|
className: "gap-0 p-0 w-full max-w-[448px] pointer-events-auto z-[2147483646] overflow-visible",
|
|
11617
|
-
children: /* @__PURE__ */
|
|
12502
|
+
children: /* @__PURE__ */ jsx28(LinkEditorPanel, { state, onClose })
|
|
11618
12503
|
}
|
|
11619
12504
|
)
|
|
11620
12505
|
}
|
|
11621
12506
|
),
|
|
11622
|
-
sectionPickerActive && state.selectedPage ? /* @__PURE__ */
|
|
12507
|
+
sectionPickerActive && state.selectedPage ? /* @__PURE__ */ jsx28(
|
|
11623
12508
|
SectionPickerOverlay,
|
|
11624
12509
|
{
|
|
11625
12510
|
pagePath: state.selectedPage.path,
|
|
@@ -14808,14 +15693,14 @@ function addFooterColumnWithPersist({
|
|
|
14808
15693
|
|
|
14809
15694
|
// src/ui/FloatingPanel.tsx
|
|
14810
15695
|
import {
|
|
14811
|
-
useCallback as
|
|
14812
|
-
useEffect as
|
|
15696
|
+
useCallback as useCallback7,
|
|
15697
|
+
useEffect as useEffect11,
|
|
14813
15698
|
useLayoutEffect as useLayoutEffect4,
|
|
14814
|
-
useRef as
|
|
14815
|
-
useState as
|
|
15699
|
+
useRef as useRef9,
|
|
15700
|
+
useState as useState12
|
|
14816
15701
|
} from "react";
|
|
14817
15702
|
import { X as X5 } from "lucide-react";
|
|
14818
|
-
import { jsx as
|
|
15703
|
+
import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
14819
15704
|
var PANEL_WIDTH = 256;
|
|
14820
15705
|
var EDGE_MARGIN = 16;
|
|
14821
15706
|
function getVisibleClip(parentScroll) {
|
|
@@ -14861,9 +15746,9 @@ function FloatingPanel({
|
|
|
14861
15746
|
className,
|
|
14862
15747
|
bodyClassName
|
|
14863
15748
|
}) {
|
|
14864
|
-
const panelRef =
|
|
14865
|
-
const [measured, setMeasured] =
|
|
14866
|
-
const dragRef =
|
|
15749
|
+
const panelRef = useRef9(null);
|
|
15750
|
+
const [measured, setMeasured] = useState12({ w: PANEL_WIDTH, h: 280 });
|
|
15751
|
+
const dragRef = useRef9(null);
|
|
14867
15752
|
const resolved = position ?? defaultFloatingPanelPosition(parentScroll, measured.h);
|
|
14868
15753
|
const clamped = clampPosition(resolved, parentScroll, measured.w, measured.h);
|
|
14869
15754
|
useLayoutEffect4(() => {
|
|
@@ -14872,12 +15757,12 @@ function FloatingPanel({
|
|
|
14872
15757
|
const next = { w: el.offsetWidth || PANEL_WIDTH, h: el.offsetHeight || 280 };
|
|
14873
15758
|
setMeasured((prev) => prev.w === next.w && prev.h === next.h ? prev : next);
|
|
14874
15759
|
}, [open, children, title, context]);
|
|
14875
|
-
|
|
15760
|
+
useEffect11(() => {
|
|
14876
15761
|
if (!open || !position || !onPositionChange) return;
|
|
14877
15762
|
const next = clampPosition(position, parentScroll, measured.w, measured.h);
|
|
14878
15763
|
if (next.x !== position.x || next.y !== position.y) onPositionChange(next);
|
|
14879
15764
|
}, [open, parentScroll, measured.w, measured.h, position, onPositionChange]);
|
|
14880
|
-
const onHeaderPointerDown =
|
|
15765
|
+
const onHeaderPointerDown = useCallback7(
|
|
14881
15766
|
(e) => {
|
|
14882
15767
|
if (e.button !== 0) return;
|
|
14883
15768
|
if (e.target.closest("[data-ohw-floating-panel-close]")) return;
|
|
@@ -14896,7 +15781,7 @@ function FloatingPanel({
|
|
|
14896
15781
|
},
|
|
14897
15782
|
[clamped.x, clamped.y]
|
|
14898
15783
|
);
|
|
14899
|
-
const onHeaderPointerMove =
|
|
15784
|
+
const onHeaderPointerMove = useCallback7(
|
|
14900
15785
|
(e) => {
|
|
14901
15786
|
const drag = dragRef.current;
|
|
14902
15787
|
if (!drag || drag.pointerId !== e.pointerId) return;
|
|
@@ -14923,7 +15808,7 @@ function FloatingPanel({
|
|
|
14923
15808
|
},
|
|
14924
15809
|
[measured.h, measured.w, onPositionChange, parentScroll]
|
|
14925
15810
|
);
|
|
14926
|
-
const endDrag =
|
|
15811
|
+
const endDrag = useCallback7((e) => {
|
|
14927
15812
|
const drag = dragRef.current;
|
|
14928
15813
|
if (!drag || drag.pointerId !== e.pointerId) return;
|
|
14929
15814
|
dragRef.current = null;
|
|
@@ -14933,13 +15818,13 @@ function FloatingPanel({
|
|
|
14933
15818
|
} catch {
|
|
14934
15819
|
}
|
|
14935
15820
|
}, []);
|
|
14936
|
-
|
|
15821
|
+
useEffect11(() => {
|
|
14937
15822
|
if (open) return;
|
|
14938
15823
|
document.documentElement.removeAttribute("data-ohw-panel-dragging");
|
|
14939
15824
|
}, [open]);
|
|
14940
|
-
|
|
15825
|
+
useEffect11(() => () => document.documentElement.removeAttribute("data-ohw-panel-dragging"), []);
|
|
14941
15826
|
if (!open) return null;
|
|
14942
|
-
return /* @__PURE__ */
|
|
15827
|
+
return /* @__PURE__ */ jsxs19(
|
|
14943
15828
|
"div",
|
|
14944
15829
|
{
|
|
14945
15830
|
ref: panelRef,
|
|
@@ -14956,7 +15841,7 @@ function FloatingPanel({
|
|
|
14956
15841
|
onPointerDown: (e) => e.stopPropagation(),
|
|
14957
15842
|
onClick: (e) => e.stopPropagation(),
|
|
14958
15843
|
children: [
|
|
14959
|
-
/* @__PURE__ */
|
|
15844
|
+
/* @__PURE__ */ jsxs19(
|
|
14960
15845
|
"div",
|
|
14961
15846
|
{
|
|
14962
15847
|
"data-ohw-floating-panel-header": "",
|
|
@@ -14966,14 +15851,14 @@ function FloatingPanel({
|
|
|
14966
15851
|
onPointerUp: endDrag,
|
|
14967
15852
|
onPointerCancel: endDrag,
|
|
14968
15853
|
children: [
|
|
14969
|
-
/* @__PURE__ */
|
|
14970
|
-
/* @__PURE__ */
|
|
14971
|
-
icon ? /* @__PURE__ */
|
|
14972
|
-
/* @__PURE__ */
|
|
15854
|
+
/* @__PURE__ */ jsxs19("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
|
|
15855
|
+
/* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
|
|
15856
|
+
icon ? /* @__PURE__ */ jsx29("span", { className: "shrink-0 text-foreground", children: icon }) : null,
|
|
15857
|
+
/* @__PURE__ */ jsx29("p", { className: "min-w-0 flex-1 text-lg font-semibold leading-7 text-foreground", children: title })
|
|
14973
15858
|
] }),
|
|
14974
|
-
context ? /* @__PURE__ */
|
|
15859
|
+
context ? /* @__PURE__ */ jsx29("p", { className: "w-full text-sm leading-5 text-muted-foreground", children: context }) : null
|
|
14975
15860
|
] }),
|
|
14976
|
-
/* @__PURE__ */
|
|
15861
|
+
/* @__PURE__ */ jsx29(
|
|
14977
15862
|
"button",
|
|
14978
15863
|
{
|
|
14979
15864
|
type: "button",
|
|
@@ -14985,13 +15870,13 @@ function FloatingPanel({
|
|
|
14985
15870
|
onClose();
|
|
14986
15871
|
},
|
|
14987
15872
|
onPointerDown: (e) => e.stopPropagation(),
|
|
14988
|
-
children: /* @__PURE__ */
|
|
15873
|
+
children: /* @__PURE__ */ jsx29(X5, { size: 16, "aria-hidden": true })
|
|
14989
15874
|
}
|
|
14990
15875
|
)
|
|
14991
15876
|
]
|
|
14992
15877
|
}
|
|
14993
15878
|
),
|
|
14994
|
-
/* @__PURE__ */
|
|
15879
|
+
/* @__PURE__ */ jsx29(
|
|
14995
15880
|
"div",
|
|
14996
15881
|
{
|
|
14997
15882
|
"data-ohw-floating-panel-body": "",
|
|
@@ -15005,15 +15890,15 @@ function FloatingPanel({
|
|
|
15005
15890
|
}
|
|
15006
15891
|
|
|
15007
15892
|
// src/ui/socials-display-panel.tsx
|
|
15008
|
-
import { jsx as
|
|
15893
|
+
import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
15009
15894
|
function DisplaySwitch({
|
|
15010
15895
|
label,
|
|
15011
15896
|
checked,
|
|
15012
15897
|
disabled,
|
|
15013
15898
|
onChange
|
|
15014
15899
|
}) {
|
|
15015
|
-
return /* @__PURE__ */
|
|
15016
|
-
/* @__PURE__ */
|
|
15900
|
+
return /* @__PURE__ */ jsxs20("div", { className: "flex w-full items-center gap-2", children: [
|
|
15901
|
+
/* @__PURE__ */ jsx30(
|
|
15017
15902
|
"span",
|
|
15018
15903
|
{
|
|
15019
15904
|
className: cn(
|
|
@@ -15023,7 +15908,7 @@ function DisplaySwitch({
|
|
|
15023
15908
|
children: label
|
|
15024
15909
|
}
|
|
15025
15910
|
),
|
|
15026
|
-
/* @__PURE__ */
|
|
15911
|
+
/* @__PURE__ */ jsx30(
|
|
15027
15912
|
"button",
|
|
15028
15913
|
{
|
|
15029
15914
|
type: "button",
|
|
@@ -15037,7 +15922,7 @@ function DisplaySwitch({
|
|
|
15037
15922
|
checked ? "bg-bridge-primary" : "bg-primary-50",
|
|
15038
15923
|
disabled ? "cursor-default opacity-50" : "cursor-pointer"
|
|
15039
15924
|
),
|
|
15040
|
-
children: /* @__PURE__ */
|
|
15925
|
+
children: /* @__PURE__ */ jsx30(
|
|
15041
15926
|
"span",
|
|
15042
15927
|
{
|
|
15043
15928
|
className: cn(
|
|
@@ -15051,8 +15936,8 @@ function DisplaySwitch({
|
|
|
15051
15936
|
] });
|
|
15052
15937
|
}
|
|
15053
15938
|
function SocialsDisplayPanel({ display, onChange, className }) {
|
|
15054
|
-
return /* @__PURE__ */
|
|
15055
|
-
/* @__PURE__ */
|
|
15939
|
+
return /* @__PURE__ */ jsxs20("div", { className: cn("flex w-full flex-col gap-3", className), children: [
|
|
15940
|
+
/* @__PURE__ */ jsx30(
|
|
15056
15941
|
DisplaySwitch,
|
|
15057
15942
|
{
|
|
15058
15943
|
label: "Text",
|
|
@@ -15061,7 +15946,7 @@ function SocialsDisplayPanel({ display, onChange, className }) {
|
|
|
15061
15946
|
onChange: (text) => onChange({ ...display, text })
|
|
15062
15947
|
}
|
|
15063
15948
|
),
|
|
15064
|
-
/* @__PURE__ */
|
|
15949
|
+
/* @__PURE__ */ jsx30(
|
|
15065
15950
|
DisplaySwitch,
|
|
15066
15951
|
{
|
|
15067
15952
|
label: "Icon",
|
|
@@ -15336,7 +16221,7 @@ function hitTestNavDropSlot(clientX, clientY, draggedHrefKey, draggedEl) {
|
|
|
15336
16221
|
}
|
|
15337
16222
|
|
|
15338
16223
|
// src/useNavItemDrag.ts
|
|
15339
|
-
import { useCallback as
|
|
16224
|
+
import { useCallback as useCallback8, useEffect as useEffect12, useRef as useRef10, useState as useState13 } from "react";
|
|
15340
16225
|
function useNavItemDrag({
|
|
15341
16226
|
isEditMode,
|
|
15342
16227
|
editContentRef,
|
|
@@ -15360,11 +16245,11 @@ function useNavItemDrag({
|
|
|
15360
16245
|
getNavigationItemAnchor: getNavigationItemAnchor2,
|
|
15361
16246
|
isDragHandleDisabled: isDragHandleDisabled2
|
|
15362
16247
|
}) {
|
|
15363
|
-
const navDragRef =
|
|
15364
|
-
const [navDropSlots, setNavDropSlots] =
|
|
15365
|
-
const [activeNavDropIndex, setActiveNavDropIndex] =
|
|
15366
|
-
const navPointerDragRef =
|
|
15367
|
-
const clearNavDragVisuals =
|
|
16248
|
+
const navDragRef = useRef10(null);
|
|
16249
|
+
const [navDropSlots, setNavDropSlots] = useState13([]);
|
|
16250
|
+
const [activeNavDropIndex, setActiveNavDropIndex] = useState13(null);
|
|
16251
|
+
const navPointerDragRef = useRef10(null);
|
|
16252
|
+
const clearNavDragVisuals = useCallback8(() => {
|
|
15368
16253
|
const session = navDragRef.current;
|
|
15369
16254
|
const nestedHrefKey = session?.draggedEl?.closest("[data-ohw-nav-children]") != null ? session.hrefKey : null;
|
|
15370
16255
|
navDragRef.current = null;
|
|
@@ -15397,7 +16282,7 @@ function useNavItemDrag({
|
|
|
15397
16282
|
document.documentElement.removeAttribute("data-ohw-nav-dragging-root");
|
|
15398
16283
|
unlockItemDragInteraction();
|
|
15399
16284
|
}, [setDraggedItemRect, setIsItemDragging, setSiblingHintRects]);
|
|
15400
|
-
const refreshNavDragVisuals =
|
|
16285
|
+
const refreshNavDragVisuals = useCallback8(
|
|
15401
16286
|
(session, activeSlot, clientX, clientY) => {
|
|
15402
16287
|
setDraggedItemRect(session.draggedEl.getBoundingClientRect());
|
|
15403
16288
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -15415,13 +16300,13 @@ function useNavItemDrag({
|
|
|
15415
16300
|
},
|
|
15416
16301
|
[setDraggedItemRect, setSiblingHintRects]
|
|
15417
16302
|
);
|
|
15418
|
-
const refreshNavDragVisualsRef =
|
|
16303
|
+
const refreshNavDragVisualsRef = useRef10(refreshNavDragVisuals);
|
|
15419
16304
|
refreshNavDragVisualsRef.current = refreshNavDragVisuals;
|
|
15420
|
-
const commitNavDragRef =
|
|
16305
|
+
const commitNavDragRef = useRef10(() => {
|
|
15421
16306
|
});
|
|
15422
|
-
const beginNavDragRef =
|
|
16307
|
+
const beginNavDragRef = useRef10(() => {
|
|
15423
16308
|
});
|
|
15424
|
-
const beginNavDrag =
|
|
16309
|
+
const beginNavDrag = useCallback8(
|
|
15425
16310
|
(session) => {
|
|
15426
16311
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
15427
16312
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -15460,7 +16345,7 @@ function useNavItemDrag({
|
|
|
15460
16345
|
]
|
|
15461
16346
|
);
|
|
15462
16347
|
beginNavDragRef.current = beginNavDrag;
|
|
15463
|
-
const commitNavDrag =
|
|
16348
|
+
const commitNavDrag = useCallback8(
|
|
15464
16349
|
(clientX, clientY) => {
|
|
15465
16350
|
const session = navDragRef.current;
|
|
15466
16351
|
if (!session) {
|
|
@@ -15539,7 +16424,7 @@ function useNavItemDrag({
|
|
|
15539
16424
|
[clearNavDragVisuals, deselectRef, editContentRef, postToParentRef, selectRef]
|
|
15540
16425
|
);
|
|
15541
16426
|
commitNavDragRef.current = commitNavDrag;
|
|
15542
|
-
const startNavLinkDrag =
|
|
16427
|
+
const startNavLinkDrag = useCallback8(
|
|
15543
16428
|
(anchor, clientX, clientY, wasSelected) => {
|
|
15544
16429
|
if (footerDragRef.current) return false;
|
|
15545
16430
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -15557,7 +16442,7 @@ function useNavItemDrag({
|
|
|
15557
16442
|
},
|
|
15558
16443
|
[beginNavDrag, footerDragRef, isDragHandleDisabled2, isCtaButton]
|
|
15559
16444
|
);
|
|
15560
|
-
const onNavDragOver =
|
|
16445
|
+
const onNavDragOver = useCallback8(
|
|
15561
16446
|
(e) => {
|
|
15562
16447
|
const session = navDragRef.current;
|
|
15563
16448
|
if (!session) return false;
|
|
@@ -15569,7 +16454,7 @@ function useNavItemDrag({
|
|
|
15569
16454
|
},
|
|
15570
16455
|
[]
|
|
15571
16456
|
);
|
|
15572
|
-
|
|
16457
|
+
useEffect12(() => {
|
|
15573
16458
|
if (!isEditMode) return;
|
|
15574
16459
|
const THRESHOLD = 10;
|
|
15575
16460
|
const resolveWasSelected = (el) => {
|
|
@@ -15696,7 +16581,7 @@ function useNavItemDrag({
|
|
|
15696
16581
|
setLinkPopover,
|
|
15697
16582
|
suppressNextClickRef
|
|
15698
16583
|
]);
|
|
15699
|
-
const armNavPressFromChrome =
|
|
16584
|
+
const armNavPressFromChrome = useCallback8(
|
|
15700
16585
|
(selected, clientX, clientY, pointerId) => {
|
|
15701
16586
|
const hrefKey = selected.getAttribute("data-ohw-href-key");
|
|
15702
16587
|
if (!hrefKey || !isNavbarHrefKey(hrefKey)) return false;
|
|
@@ -15728,7 +16613,7 @@ function useNavItemDrag({
|
|
|
15728
16613
|
}
|
|
15729
16614
|
|
|
15730
16615
|
// src/useSectionDrag.ts
|
|
15731
|
-
import { useCallback as
|
|
16616
|
+
import { useCallback as useCallback9, useEffect as useEffect13, useRef as useRef11, useState as useState14 } from "react";
|
|
15732
16617
|
|
|
15733
16618
|
// src/lib/section-dnd.ts
|
|
15734
16619
|
function isFooterSection(el) {
|
|
@@ -15827,21 +16712,21 @@ function useSectionDrag({
|
|
|
15827
16712
|
suppressNextClickRef,
|
|
15828
16713
|
suppressClickUntilRef
|
|
15829
16714
|
}) {
|
|
15830
|
-
const sectionDragRef =
|
|
15831
|
-
const [sectionDropSlots, setSectionDropSlots] =
|
|
15832
|
-
const [activeSectionDropIndex, setActiveSectionDropIndex] =
|
|
15833
|
-
const [isSectionDragging, setIsSectionDragging] =
|
|
15834
|
-
const sectionPointerDragRef =
|
|
15835
|
-
const autoScrollRafRef =
|
|
15836
|
-
const autoScrollDeltaRef =
|
|
15837
|
-
const stopAutoScroll =
|
|
16715
|
+
const sectionDragRef = useRef11(null);
|
|
16716
|
+
const [sectionDropSlots, setSectionDropSlots] = useState14([]);
|
|
16717
|
+
const [activeSectionDropIndex, setActiveSectionDropIndex] = useState14(null);
|
|
16718
|
+
const [isSectionDragging, setIsSectionDragging] = useState14(false);
|
|
16719
|
+
const sectionPointerDragRef = useRef11(null);
|
|
16720
|
+
const autoScrollRafRef = useRef11(null);
|
|
16721
|
+
const autoScrollDeltaRef = useRef11(0);
|
|
16722
|
+
const stopAutoScroll = useCallback9(() => {
|
|
15838
16723
|
if (autoScrollRafRef.current != null) {
|
|
15839
16724
|
cancelAnimationFrame(autoScrollRafRef.current);
|
|
15840
16725
|
autoScrollRafRef.current = null;
|
|
15841
16726
|
}
|
|
15842
16727
|
autoScrollDeltaRef.current = 0;
|
|
15843
16728
|
}, []);
|
|
15844
|
-
const tickAutoScroll =
|
|
16729
|
+
const tickAutoScroll = useCallback9(() => {
|
|
15845
16730
|
if (!sectionDragRef.current) {
|
|
15846
16731
|
stopAutoScroll();
|
|
15847
16732
|
return;
|
|
@@ -15851,7 +16736,7 @@ function useSectionDrag({
|
|
|
15851
16736
|
}
|
|
15852
16737
|
autoScrollRafRef.current = requestAnimationFrame(tickAutoScroll);
|
|
15853
16738
|
}, [postToParentRef, stopAutoScroll]);
|
|
15854
|
-
const updateAutoScroll =
|
|
16739
|
+
const updateAutoScroll = useCallback9(
|
|
15855
16740
|
(clientY) => {
|
|
15856
16741
|
const clip = visibleClip(parentScrollRef.current);
|
|
15857
16742
|
let delta = 0;
|
|
@@ -15873,7 +16758,7 @@ function useSectionDrag({
|
|
|
15873
16758
|
},
|
|
15874
16759
|
[parentScrollRef, stopAutoScroll, tickAutoScroll]
|
|
15875
16760
|
);
|
|
15876
|
-
const clearSectionDragVisuals =
|
|
16761
|
+
const clearSectionDragVisuals = useCallback9(() => {
|
|
15877
16762
|
sectionDragRef.current?.draggedEl.removeAttribute("data-ohw-section-dragging");
|
|
15878
16763
|
sectionDragRef.current = null;
|
|
15879
16764
|
setSectionDropSlots([]);
|
|
@@ -15883,7 +16768,7 @@ function useSectionDrag({
|
|
|
15883
16768
|
document.documentElement.removeAttribute("data-ohw-section-dragging-root");
|
|
15884
16769
|
unlockItemDragInteraction();
|
|
15885
16770
|
}, [stopAutoScroll]);
|
|
15886
|
-
const refreshSectionDragVisuals =
|
|
16771
|
+
const refreshSectionDragVisuals = useCallback9(
|
|
15887
16772
|
(session, clientX, clientY) => {
|
|
15888
16773
|
session.lastClientX = clientX;
|
|
15889
16774
|
session.lastClientY = clientY;
|
|
@@ -15897,7 +16782,7 @@ function useSectionDrag({
|
|
|
15897
16782
|
},
|
|
15898
16783
|
[updateAutoScroll]
|
|
15899
16784
|
);
|
|
15900
|
-
const beginSectionDrag =
|
|
16785
|
+
const beginSectionDrag = useCallback9(
|
|
15901
16786
|
(session) => {
|
|
15902
16787
|
sectionDragRef.current = session;
|
|
15903
16788
|
setIsSectionDragging(true);
|
|
@@ -15908,7 +16793,7 @@ function useSectionDrag({
|
|
|
15908
16793
|
},
|
|
15909
16794
|
[refreshSectionDragVisuals]
|
|
15910
16795
|
);
|
|
15911
|
-
const commitSectionDrag =
|
|
16796
|
+
const commitSectionDrag = useCallback9(() => {
|
|
15912
16797
|
const session = sectionDragRef.current;
|
|
15913
16798
|
if (!session) {
|
|
15914
16799
|
clearSectionDragVisuals();
|
|
@@ -15937,7 +16822,7 @@ function useSectionDrag({
|
|
|
15937
16822
|
});
|
|
15938
16823
|
});
|
|
15939
16824
|
}, [clearSectionDragVisuals, editContentRef, postToParentRef]);
|
|
15940
|
-
const startSectionPressDrag =
|
|
16825
|
+
const startSectionPressDrag = useCallback9(
|
|
15941
16826
|
(el, clientX, clientY, pointerId) => {
|
|
15942
16827
|
if (navDragRef.current || footerDragRef.current || sectionDragRef.current) return false;
|
|
15943
16828
|
const instanceId = instanceIdOf(el);
|
|
@@ -15954,7 +16839,7 @@ function useSectionDrag({
|
|
|
15954
16839
|
},
|
|
15955
16840
|
[footerDragRef, navDragRef]
|
|
15956
16841
|
);
|
|
15957
|
-
|
|
16842
|
+
useEffect13(() => {
|
|
15958
16843
|
if (!isEditMode) return;
|
|
15959
16844
|
const onPointerDown = (e) => {
|
|
15960
16845
|
if (e.button !== 0) return;
|
|
@@ -16060,7 +16945,7 @@ function useSectionDrag({
|
|
|
16060
16945
|
|
|
16061
16946
|
// src/ui/footer-container-chrome.tsx
|
|
16062
16947
|
import { Plus as Plus2 } from "lucide-react";
|
|
16063
|
-
import { jsx as
|
|
16948
|
+
import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
16064
16949
|
function FooterContainerChrome({
|
|
16065
16950
|
rect,
|
|
16066
16951
|
onAdd,
|
|
@@ -16068,7 +16953,7 @@ function FooterContainerChrome({
|
|
|
16068
16953
|
}) {
|
|
16069
16954
|
const chromeGap = 6;
|
|
16070
16955
|
const buttonMargin = 7;
|
|
16071
|
-
return /* @__PURE__ */
|
|
16956
|
+
return /* @__PURE__ */ jsx31(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx31(
|
|
16072
16957
|
"div",
|
|
16073
16958
|
{
|
|
16074
16959
|
"data-ohw-footer-container-chrome": "",
|
|
@@ -16080,8 +16965,8 @@ function FooterContainerChrome({
|
|
|
16080
16965
|
width: rect.width + chromeGap * 2,
|
|
16081
16966
|
height: rect.height + chromeGap * 2
|
|
16082
16967
|
},
|
|
16083
|
-
children: /* @__PURE__ */
|
|
16084
|
-
/* @__PURE__ */
|
|
16968
|
+
children: /* @__PURE__ */ jsxs21(Tooltip, { children: [
|
|
16969
|
+
/* @__PURE__ */ jsx31(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx31(
|
|
16085
16970
|
"button",
|
|
16086
16971
|
{
|
|
16087
16972
|
type: "button",
|
|
@@ -16100,17 +16985,17 @@ function FooterContainerChrome({
|
|
|
16100
16985
|
if (addDisabled) return;
|
|
16101
16986
|
onAdd();
|
|
16102
16987
|
},
|
|
16103
|
-
children: /* @__PURE__ */
|
|
16988
|
+
children: /* @__PURE__ */ jsx31(Plus2, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
16104
16989
|
}
|
|
16105
16990
|
) }),
|
|
16106
|
-
/* @__PURE__ */
|
|
16991
|
+
/* @__PURE__ */ jsx31(TooltipContent, { side: "bottom", sideOffset: 9, children: addDisabled ? "Maximum columns reached" : "Add item" })
|
|
16107
16992
|
] })
|
|
16108
16993
|
}
|
|
16109
16994
|
) });
|
|
16110
16995
|
}
|
|
16111
16996
|
|
|
16112
16997
|
// src/lib/carousel.ts
|
|
16113
|
-
import { useEffect as
|
|
16998
|
+
import { useEffect as useEffect14, useState as useState15 } from "react";
|
|
16114
16999
|
var CAROUSEL_ATTR = "data-ohw-carousel";
|
|
16115
17000
|
var CAROUSEL_VALUE_ATTR = "data-ohw-carousel-value";
|
|
16116
17001
|
var CAROUSEL_SLIDE_ATTR = "data-ohw-carousel-slide";
|
|
@@ -16172,8 +17057,8 @@ function applyCarouselNode(key, val) {
|
|
|
16172
17057
|
return true;
|
|
16173
17058
|
}
|
|
16174
17059
|
function useOhwCarousel(key, initial) {
|
|
16175
|
-
const [images, setImages] =
|
|
16176
|
-
|
|
17060
|
+
const [images, setImages] = useState15(initial);
|
|
17061
|
+
useEffect14(() => {
|
|
16177
17062
|
const el = document.querySelector(
|
|
16178
17063
|
`[${CAROUSEL_ATTR}][data-ohw-key="${CSS.escape(key)}"]`
|
|
16179
17064
|
);
|
|
@@ -16586,13 +17471,13 @@ function deleteSelectedNavFooterItem(deps) {
|
|
|
16586
17471
|
|
|
16587
17472
|
// src/ui/navbar-container-chrome.tsx
|
|
16588
17473
|
import { Plus as Plus3 } from "lucide-react";
|
|
16589
|
-
import { jsx as
|
|
17474
|
+
import { jsx as jsx32 } from "react/jsx-runtime";
|
|
16590
17475
|
function NavbarContainerChrome({
|
|
16591
17476
|
rect,
|
|
16592
17477
|
onAdd
|
|
16593
17478
|
}) {
|
|
16594
17479
|
const chromeGap = 6;
|
|
16595
|
-
return /* @__PURE__ */
|
|
17480
|
+
return /* @__PURE__ */ jsx32(
|
|
16596
17481
|
"div",
|
|
16597
17482
|
{
|
|
16598
17483
|
"data-ohw-navbar-container-chrome": "",
|
|
@@ -16604,7 +17489,7 @@ function NavbarContainerChrome({
|
|
|
16604
17489
|
width: rect.width + chromeGap * 2,
|
|
16605
17490
|
height: rect.height + chromeGap * 2
|
|
16606
17491
|
},
|
|
16607
|
-
children: /* @__PURE__ */
|
|
17492
|
+
children: /* @__PURE__ */ jsx32(
|
|
16608
17493
|
"button",
|
|
16609
17494
|
{
|
|
16610
17495
|
type: "button",
|
|
@@ -16621,7 +17506,7 @@ function NavbarContainerChrome({
|
|
|
16621
17506
|
e.stopPropagation();
|
|
16622
17507
|
onAdd();
|
|
16623
17508
|
},
|
|
16624
|
-
children: /* @__PURE__ */
|
|
17509
|
+
children: /* @__PURE__ */ jsx32(Plus3, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
16625
17510
|
}
|
|
16626
17511
|
)
|
|
16627
17512
|
}
|
|
@@ -16630,7 +17515,7 @@ function NavbarContainerChrome({
|
|
|
16630
17515
|
|
|
16631
17516
|
// src/ui/drop-indicator.tsx
|
|
16632
17517
|
import * as React11 from "react";
|
|
16633
|
-
import { jsx as
|
|
17518
|
+
import { jsx as jsx33 } from "react/jsx-runtime";
|
|
16634
17519
|
var dropIndicatorVariants = cva(
|
|
16635
17520
|
"ov-gap-line pointer-events-none shrink-0 transition-opacity duration-150",
|
|
16636
17521
|
{
|
|
@@ -16654,7 +17539,7 @@ var dropIndicatorVariants = cva(
|
|
|
16654
17539
|
);
|
|
16655
17540
|
var DropIndicator = React11.forwardRef(
|
|
16656
17541
|
({ className, direction, state, ...props }, ref) => {
|
|
16657
|
-
return /* @__PURE__ */
|
|
17542
|
+
return /* @__PURE__ */ jsx33(
|
|
16658
17543
|
"div",
|
|
16659
17544
|
{
|
|
16660
17545
|
ref,
|
|
@@ -16671,7 +17556,7 @@ var DropIndicator = React11.forwardRef(
|
|
|
16671
17556
|
DropIndicator.displayName = "DropIndicator";
|
|
16672
17557
|
|
|
16673
17558
|
// src/ui/badge.tsx
|
|
16674
|
-
import { jsx as
|
|
17559
|
+
import { jsx as jsx34 } from "react/jsx-runtime";
|
|
16675
17560
|
var badgeVariants = cva(
|
|
16676
17561
|
"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",
|
|
16677
17562
|
{
|
|
@@ -16689,13 +17574,13 @@ var badgeVariants = cva(
|
|
|
16689
17574
|
}
|
|
16690
17575
|
);
|
|
16691
17576
|
function Badge({ className, variant, ...props }) {
|
|
16692
|
-
return /* @__PURE__ */
|
|
17577
|
+
return /* @__PURE__ */ jsx34("div", { className: cn(badgeVariants({ variant }), className), ...props });
|
|
16693
17578
|
}
|
|
16694
17579
|
|
|
16695
17580
|
// src/OhhwellsBridge.tsx
|
|
16696
17581
|
import { Link as Link2, Plus as Plus4, Settings } from "lucide-react";
|
|
16697
|
-
import { Fragment as
|
|
16698
|
-
var
|
|
17582
|
+
import { Fragment as Fragment10, jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
17583
|
+
var PRIMARY5 = "#0885FE";
|
|
16699
17584
|
var IMAGE_FADE_MS = 300;
|
|
16700
17585
|
var MEDIA_SETTLE_TIMEOUT_MS = 2500;
|
|
16701
17586
|
function runOpacityFade(el, onDone) {
|
|
@@ -16816,7 +17701,7 @@ function duplicateSchedulingWidget(instanceId, scheduleId) {
|
|
|
16816
17701
|
schedulingRoots.set(container, root);
|
|
16817
17702
|
flushSync2(() => {
|
|
16818
17703
|
root.render(
|
|
16819
|
-
/* @__PURE__ */
|
|
17704
|
+
/* @__PURE__ */ jsx35(
|
|
16820
17705
|
SchedulingWidget,
|
|
16821
17706
|
{
|
|
16822
17707
|
notifyOnConnect: false,
|
|
@@ -16954,7 +17839,7 @@ function mountSchedulingWidget(insertAfter, notifyOnConnect = false, scheduleId,
|
|
|
16954
17839
|
schedulingRoots.set(container, root);
|
|
16955
17840
|
flushSync2(() => {
|
|
16956
17841
|
root.render(
|
|
16957
|
-
/* @__PURE__ */
|
|
17842
|
+
/* @__PURE__ */ jsx35(
|
|
16958
17843
|
SchedulingWidget,
|
|
16959
17844
|
{
|
|
16960
17845
|
notifyOnConnect,
|
|
@@ -17674,7 +18559,7 @@ var TOOLBAR_STROKE_GAP2 = 4;
|
|
|
17674
18559
|
var TOOLBAR_OFFSET_FROM_ELEMENT = SELECTION_CHROME_GAP2 + TOOLBAR_STROKE_GAP2;
|
|
17675
18560
|
var HOVER_STROKE_WIDTH = 1.5;
|
|
17676
18561
|
var TEXT_HOVER_SIDE_PAD = 4;
|
|
17677
|
-
var CHROME_PRIMARY = `var(--ohw-primary, ${
|
|
18562
|
+
var CHROME_PRIMARY = `var(--ohw-primary, ${PRIMARY5})`;
|
|
17678
18563
|
var TOOLBAR_GROUPS = [
|
|
17679
18564
|
[
|
|
17680
18565
|
{ cmd: "bold", title: "Bold" },
|
|
@@ -17700,7 +18585,7 @@ function EditGlowChrome({
|
|
|
17700
18585
|
hideHandle = false
|
|
17701
18586
|
}) {
|
|
17702
18587
|
const GAP = SELECTION_CHROME_GAP2;
|
|
17703
|
-
return /* @__PURE__ */
|
|
18588
|
+
return /* @__PURE__ */ jsxs22(
|
|
17704
18589
|
"div",
|
|
17705
18590
|
{
|
|
17706
18591
|
ref: elRef,
|
|
@@ -17715,7 +18600,7 @@ function EditGlowChrome({
|
|
|
17715
18600
|
zIndex: 2147483646
|
|
17716
18601
|
},
|
|
17717
18602
|
children: [
|
|
17718
|
-
/* @__PURE__ */
|
|
18603
|
+
/* @__PURE__ */ jsx35(
|
|
17719
18604
|
"div",
|
|
17720
18605
|
{
|
|
17721
18606
|
style: {
|
|
@@ -17729,7 +18614,7 @@ function EditGlowChrome({
|
|
|
17729
18614
|
}
|
|
17730
18615
|
}
|
|
17731
18616
|
),
|
|
17732
|
-
reorderHrefKey && !hideHandle && /* @__PURE__ */
|
|
18617
|
+
reorderHrefKey && !hideHandle && /* @__PURE__ */ jsx35(
|
|
17733
18618
|
"div",
|
|
17734
18619
|
{
|
|
17735
18620
|
"data-ohw-drag-handle-container": "",
|
|
@@ -17741,7 +18626,7 @@ function EditGlowChrome({
|
|
|
17741
18626
|
transform: "translate(calc(-100% - 7px), -50%)",
|
|
17742
18627
|
pointerEvents: dragDisabled ? "none" : "auto"
|
|
17743
18628
|
},
|
|
17744
|
-
children: /* @__PURE__ */
|
|
18629
|
+
children: /* @__PURE__ */ jsx35(
|
|
17745
18630
|
DragHandle,
|
|
17746
18631
|
{
|
|
17747
18632
|
"aria-label": `Reorder ${reorderHrefKey}`,
|
|
@@ -17955,7 +18840,7 @@ function FloatingToolbar({
|
|
|
17955
18840
|
return () => ro.disconnect();
|
|
17956
18841
|
}, [showEditLink, activeCommands]);
|
|
17957
18842
|
const { top, left, transform } = calcToolbarPos(rect, parentScroll, measuredW);
|
|
17958
|
-
return /* @__PURE__ */
|
|
18843
|
+
return /* @__PURE__ */ jsx35(
|
|
17959
18844
|
"div",
|
|
17960
18845
|
{
|
|
17961
18846
|
ref: setRefs,
|
|
@@ -17967,12 +18852,12 @@ function FloatingToolbar({
|
|
|
17967
18852
|
zIndex: 2147483647,
|
|
17968
18853
|
pointerEvents: "auto"
|
|
17969
18854
|
},
|
|
17970
|
-
children: /* @__PURE__ */
|
|
17971
|
-
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */
|
|
17972
|
-
gi > 0 && /* @__PURE__ */
|
|
18855
|
+
children: /* @__PURE__ */ jsxs22(CustomToolbar, { children: [
|
|
18856
|
+
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ jsxs22(React12.Fragment, { children: [
|
|
18857
|
+
gi > 0 && /* @__PURE__ */ jsx35(CustomToolbarDivider, {}),
|
|
17973
18858
|
btns.map((btn) => {
|
|
17974
18859
|
const isActive = activeCommands.has(btn.cmd);
|
|
17975
|
-
return /* @__PURE__ */
|
|
18860
|
+
return /* @__PURE__ */ jsx35(
|
|
17976
18861
|
CustomToolbarButton,
|
|
17977
18862
|
{
|
|
17978
18863
|
title: btn.title,
|
|
@@ -17981,7 +18866,7 @@ function FloatingToolbar({
|
|
|
17981
18866
|
e.preventDefault();
|
|
17982
18867
|
onCommand(btn.cmd);
|
|
17983
18868
|
},
|
|
17984
|
-
children: /* @__PURE__ */
|
|
18869
|
+
children: /* @__PURE__ */ jsx35(
|
|
17985
18870
|
"svg",
|
|
17986
18871
|
{
|
|
17987
18872
|
width: "16",
|
|
@@ -18002,7 +18887,7 @@ function FloatingToolbar({
|
|
|
18002
18887
|
);
|
|
18003
18888
|
})
|
|
18004
18889
|
] }, gi)),
|
|
18005
|
-
showEditLink ? /* @__PURE__ */
|
|
18890
|
+
showEditLink ? /* @__PURE__ */ jsx35(
|
|
18006
18891
|
CustomToolbarButton,
|
|
18007
18892
|
{
|
|
18008
18893
|
type: "button",
|
|
@@ -18016,7 +18901,7 @@ function FloatingToolbar({
|
|
|
18016
18901
|
e.preventDefault();
|
|
18017
18902
|
e.stopPropagation();
|
|
18018
18903
|
},
|
|
18019
|
-
children: /* @__PURE__ */
|
|
18904
|
+
children: /* @__PURE__ */ jsx35(Link2, { className: "size-4 shrink-0", "aria-hidden": true })
|
|
18020
18905
|
}
|
|
18021
18906
|
) : null
|
|
18022
18907
|
] })
|
|
@@ -18033,7 +18918,7 @@ function StateToggle({
|
|
|
18033
18918
|
states,
|
|
18034
18919
|
onStateChange
|
|
18035
18920
|
}) {
|
|
18036
|
-
return /* @__PURE__ */
|
|
18921
|
+
return /* @__PURE__ */ jsx35(
|
|
18037
18922
|
ToggleGroup,
|
|
18038
18923
|
{
|
|
18039
18924
|
"data-ohw-state-toggle": "",
|
|
@@ -18047,7 +18932,7 @@ function StateToggle({
|
|
|
18047
18932
|
left: rect.right - 8,
|
|
18048
18933
|
transform: "translateX(-100%)"
|
|
18049
18934
|
},
|
|
18050
|
-
children: states.map((state) => /* @__PURE__ */
|
|
18935
|
+
children: states.map((state) => /* @__PURE__ */ jsx35(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
|
|
18051
18936
|
}
|
|
18052
18937
|
);
|
|
18053
18938
|
}
|
|
@@ -18063,9 +18948,9 @@ var OHW_LOADER_STYLE = {
|
|
|
18063
18948
|
justifyContent: "center"
|
|
18064
18949
|
};
|
|
18065
18950
|
function OhwLoaderSpinner() {
|
|
18066
|
-
return /* @__PURE__ */
|
|
18067
|
-
/* @__PURE__ */
|
|
18068
|
-
/* @__PURE__ */
|
|
18951
|
+
return /* @__PURE__ */ jsxs22("svg", { width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", "aria-hidden": true, children: [
|
|
18952
|
+
/* @__PURE__ */ jsx35("circle", { cx: "14", cy: "14", r: "11", stroke: "#E7E5E4", strokeWidth: "3" }),
|
|
18953
|
+
/* @__PURE__ */ jsx35(
|
|
18069
18954
|
"circle",
|
|
18070
18955
|
{
|
|
18071
18956
|
cx: "14",
|
|
@@ -18075,7 +18960,7 @@ function OhwLoaderSpinner() {
|
|
|
18075
18960
|
strokeWidth: "3",
|
|
18076
18961
|
strokeDasharray: "17 52",
|
|
18077
18962
|
strokeLinecap: "round",
|
|
18078
|
-
children: /* @__PURE__ */
|
|
18963
|
+
children: /* @__PURE__ */ jsx35(
|
|
18079
18964
|
"animateTransform",
|
|
18080
18965
|
{
|
|
18081
18966
|
attributeName: "transform",
|
|
@@ -18091,7 +18976,7 @@ function OhwLoaderSpinner() {
|
|
|
18091
18976
|
] });
|
|
18092
18977
|
}
|
|
18093
18978
|
function OhwBrandMark() {
|
|
18094
|
-
return /* @__PURE__ */
|
|
18979
|
+
return /* @__PURE__ */ jsxs22(
|
|
18095
18980
|
"svg",
|
|
18096
18981
|
{
|
|
18097
18982
|
width: "16",
|
|
@@ -18102,7 +18987,7 @@ function OhwBrandMark() {
|
|
|
18102
18987
|
style: { display: "block", flexShrink: 0 },
|
|
18103
18988
|
xmlns: "http://www.w3.org/2000/svg",
|
|
18104
18989
|
children: [
|
|
18105
|
-
/* @__PURE__ */
|
|
18990
|
+
/* @__PURE__ */ jsx35(
|
|
18106
18991
|
"mask",
|
|
18107
18992
|
{
|
|
18108
18993
|
id: "ohw-badge-mark",
|
|
@@ -18112,15 +18997,15 @@ function OhwBrandMark() {
|
|
|
18112
18997
|
y: "0",
|
|
18113
18998
|
width: "48",
|
|
18114
18999
|
height: "48",
|
|
18115
|
-
children: /* @__PURE__ */
|
|
19000
|
+
children: /* @__PURE__ */ jsx35("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" })
|
|
18116
19001
|
}
|
|
18117
19002
|
),
|
|
18118
|
-
/* @__PURE__ */
|
|
18119
|
-
/* @__PURE__ */
|
|
18120
|
-
/* @__PURE__ */
|
|
18121
|
-
/* @__PURE__ */
|
|
18122
|
-
/* @__PURE__ */
|
|
18123
|
-
/* @__PURE__ */
|
|
19003
|
+
/* @__PURE__ */ jsxs22("g", { mask: "url(#ohw-badge-mark)", children: [
|
|
19004
|
+
/* @__PURE__ */ jsx35("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" }),
|
|
19005
|
+
/* @__PURE__ */ jsx35("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" }),
|
|
19006
|
+
/* @__PURE__ */ jsx35("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" }),
|
|
19007
|
+
/* @__PURE__ */ jsx35("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" }),
|
|
19008
|
+
/* @__PURE__ */ jsx35("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" })
|
|
18124
19009
|
] })
|
|
18125
19010
|
]
|
|
18126
19011
|
}
|
|
@@ -18157,7 +19042,7 @@ var OHW_BADGE_LABEL_STYLE = {
|
|
|
18157
19042
|
whiteSpace: "nowrap"
|
|
18158
19043
|
};
|
|
18159
19044
|
function MadeWithOhhWells() {
|
|
18160
|
-
return /* @__PURE__ */
|
|
19045
|
+
return /* @__PURE__ */ jsxs22(
|
|
18161
19046
|
"a",
|
|
18162
19047
|
{
|
|
18163
19048
|
href: "https://ohhwells.com",
|
|
@@ -18167,8 +19052,8 @@ function MadeWithOhhWells() {
|
|
|
18167
19052
|
"data-ohw-badge": "",
|
|
18168
19053
|
style: OHW_BADGE_STYLE,
|
|
18169
19054
|
children: [
|
|
18170
|
-
/* @__PURE__ */
|
|
18171
|
-
/* @__PURE__ */
|
|
19055
|
+
/* @__PURE__ */ jsx35(OhwBrandMark, {}),
|
|
19056
|
+
/* @__PURE__ */ jsx35("span", { style: OHW_BADGE_LABEL_STYLE, children: "Made with OhhWells" })
|
|
18172
19057
|
]
|
|
18173
19058
|
}
|
|
18174
19059
|
);
|
|
@@ -18214,8 +19099,8 @@ function OhhwellsBridge() {
|
|
|
18214
19099
|
const router = useRouter3();
|
|
18215
19100
|
const searchParams = useSearchParams();
|
|
18216
19101
|
const isEditMode = isEditSessionActive();
|
|
18217
|
-
const [bridgeRoot, setBridgeRoot] =
|
|
18218
|
-
|
|
19102
|
+
const [bridgeRoot, setBridgeRoot] = useState16(null);
|
|
19103
|
+
useEffect15(() => {
|
|
18219
19104
|
const figtreeFontId = "ohw-figtree-font";
|
|
18220
19105
|
if (!document.getElementById(figtreeFontId)) {
|
|
18221
19106
|
const preconnect1 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.googleapis.com" });
|
|
@@ -18241,7 +19126,7 @@ function OhhwellsBridge() {
|
|
|
18241
19126
|
};
|
|
18242
19127
|
}, []);
|
|
18243
19128
|
const subdomainFromQuery = searchParams.get("subdomain");
|
|
18244
|
-
const [subdomain, setSubdomain] =
|
|
19129
|
+
const [subdomain, setSubdomain] = useState16(() => resolveSubdomain(subdomainFromQuery));
|
|
18245
19130
|
useLayoutEffect5(() => {
|
|
18246
19131
|
const next = resolveSubdomain(subdomainFromQuery);
|
|
18247
19132
|
if (next !== subdomain) setSubdomain(next);
|
|
@@ -18254,7 +19139,7 @@ function OhhwellsBridge() {
|
|
|
18254
19139
|
}, 0);
|
|
18255
19140
|
return () => window.clearTimeout(t);
|
|
18256
19141
|
}, [subdomainFromQuery, subdomain]);
|
|
18257
|
-
|
|
19142
|
+
useEffect15(() => {
|
|
18258
19143
|
if (!subdomainFromQuery || typeof window === "undefined") return;
|
|
18259
19144
|
const url = new URL(window.location.href);
|
|
18260
19145
|
if (!url.searchParams.has("subdomain")) return;
|
|
@@ -18263,45 +19148,45 @@ function OhhwellsBridge() {
|
|
|
18263
19148
|
}, [subdomainFromQuery]);
|
|
18264
19149
|
useLinkHrefGuardian(pathname, subdomain, isEditMode);
|
|
18265
19150
|
useSavedLinkNavigation(isEditMode);
|
|
18266
|
-
const postToParent2 =
|
|
19151
|
+
const postToParent2 = useCallback10((data) => {
|
|
18267
19152
|
if (typeof window !== "undefined" && window.parent !== window) {
|
|
18268
19153
|
window.parent.postMessage(data, "*");
|
|
18269
19154
|
}
|
|
18270
19155
|
}, []);
|
|
18271
|
-
const [fetchState, setFetchState] =
|
|
18272
|
-
const [showBranding, setShowBranding] =
|
|
18273
|
-
const autoSaveTimers =
|
|
18274
|
-
const activeElRef =
|
|
18275
|
-
const pointerHeldRef =
|
|
18276
|
-
const selectedElRef =
|
|
18277
|
-
const selectedHrefKeyRef =
|
|
18278
|
-
const selectedFooterColAttrRef =
|
|
18279
|
-
const originalContentRef =
|
|
18280
|
-
const activeStateElRef =
|
|
18281
|
-
const parentScrollRef =
|
|
18282
|
-
const visibleViewportRef =
|
|
18283
|
-
const [dialogPortalContainer, setDialogPortalContainer] =
|
|
18284
|
-
const attachVisibleViewport =
|
|
19156
|
+
const [fetchState, setFetchState] = useState16("idle");
|
|
19157
|
+
const [showBranding, setShowBranding] = useState16(false);
|
|
19158
|
+
const autoSaveTimers = useRef12(/* @__PURE__ */ new Map());
|
|
19159
|
+
const activeElRef = useRef12(null);
|
|
19160
|
+
const pointerHeldRef = useRef12(false);
|
|
19161
|
+
const selectedElRef = useRef12(null);
|
|
19162
|
+
const selectedHrefKeyRef = useRef12(null);
|
|
19163
|
+
const selectedFooterColAttrRef = useRef12(null);
|
|
19164
|
+
const originalContentRef = useRef12(null);
|
|
19165
|
+
const activeStateElRef = useRef12(null);
|
|
19166
|
+
const parentScrollRef = useRef12(null);
|
|
19167
|
+
const visibleViewportRef = useRef12(null);
|
|
19168
|
+
const [dialogPortalContainer, setDialogPortalContainer] = useState16(null);
|
|
19169
|
+
const attachVisibleViewport = useCallback10((node) => {
|
|
18285
19170
|
visibleViewportRef.current = node;
|
|
18286
19171
|
setDialogPortalContainer(node);
|
|
18287
19172
|
if (node) applyVisibleViewport(node, parentScrollRef.current);
|
|
18288
19173
|
}, []);
|
|
18289
|
-
const toolbarElRef =
|
|
18290
|
-
const glowElRef =
|
|
18291
|
-
const hoveredImageRef =
|
|
18292
|
-
const hoveredImageHasTextOverlapRef =
|
|
18293
|
-
const dragOverElRef =
|
|
18294
|
-
const [mediaHover, setMediaHover] =
|
|
18295
|
-
const [selectedAiSectionId, setSelectedAiSectionId] =
|
|
18296
|
-
const selectedAiSectionIdRef =
|
|
18297
|
-
const handleAiSectionSelectionChange =
|
|
19174
|
+
const toolbarElRef = useRef12(null);
|
|
19175
|
+
const glowElRef = useRef12(null);
|
|
19176
|
+
const hoveredImageRef = useRef12(null);
|
|
19177
|
+
const hoveredImageHasTextOverlapRef = useRef12(false);
|
|
19178
|
+
const dragOverElRef = useRef12(null);
|
|
19179
|
+
const [mediaHover, setMediaHover] = useState16(null);
|
|
19180
|
+
const [selectedAiSectionId, setSelectedAiSectionId] = useState16(null);
|
|
19181
|
+
const selectedAiSectionIdRef = useRef12(null);
|
|
19182
|
+
const handleAiSectionSelectionChange = useCallback10((id) => {
|
|
18298
19183
|
selectedAiSectionIdRef.current = id;
|
|
18299
19184
|
setSelectedAiSectionId(id);
|
|
18300
19185
|
}, []);
|
|
18301
|
-
const [selectedMedia, setSelectedMedia] =
|
|
18302
|
-
const selectedMediaElRef =
|
|
18303
|
-
const mediaKeyDropTokenRef =
|
|
18304
|
-
const clearMediaSelection =
|
|
19186
|
+
const [selectedMedia, setSelectedMedia] = useState16(null);
|
|
19187
|
+
const selectedMediaElRef = useRef12(null);
|
|
19188
|
+
const mediaKeyDropTokenRef = useRef12(0);
|
|
19189
|
+
const clearMediaSelection = useCallback10(() => {
|
|
18305
19190
|
const prev = selectedMediaElRef.current;
|
|
18306
19191
|
selectedMediaElRef.current = null;
|
|
18307
19192
|
setSelectedMedia(null);
|
|
@@ -18326,9 +19211,9 @@ function OhhwellsBridge() {
|
|
|
18326
19211
|
window.postMessage({ type: "ow:media-key-drop", token }, "*");
|
|
18327
19212
|
}
|
|
18328
19213
|
}, []);
|
|
18329
|
-
const clearMediaSelectionRef =
|
|
19214
|
+
const clearMediaSelectionRef = useRef12(clearMediaSelection);
|
|
18330
19215
|
clearMediaSelectionRef.current = clearMediaSelection;
|
|
18331
|
-
const selectMediaElement =
|
|
19216
|
+
const selectMediaElement = useCallback10((el) => {
|
|
18332
19217
|
const r2 = el.getBoundingClientRect();
|
|
18333
19218
|
const video = el.dataset.ohwEditable === "video" ? el.querySelector("video") : null;
|
|
18334
19219
|
selectedMediaElRef.current = el;
|
|
@@ -18352,9 +19237,9 @@ function OhhwellsBridge() {
|
|
|
18352
19237
|
keyLabel: el.dataset.ohwEditable === "video" ? "Video" : el.dataset.ohwEditable === "bg-image" ? "Background" : "Image"
|
|
18353
19238
|
});
|
|
18354
19239
|
}, []);
|
|
18355
|
-
const selectMediaElementRef =
|
|
19240
|
+
const selectMediaElementRef = useRef12(selectMediaElement);
|
|
18356
19241
|
selectMediaElementRef.current = selectMediaElement;
|
|
18357
|
-
|
|
19242
|
+
useEffect15(() => {
|
|
18358
19243
|
if (!selectedMedia) return;
|
|
18359
19244
|
const update = () => {
|
|
18360
19245
|
const el = selectedMediaElRef.current;
|
|
@@ -18374,55 +19259,54 @@ function OhhwellsBridge() {
|
|
|
18374
19259
|
window.removeEventListener("resize", update);
|
|
18375
19260
|
};
|
|
18376
19261
|
}, [selectedMedia !== null]);
|
|
18377
|
-
const [carouselHover, setCarouselHover] =
|
|
18378
|
-
const [uploadingRects, setUploadingRects] =
|
|
18379
|
-
const hoveredGapRef =
|
|
18380
|
-
const imageUnhoverTimerRef =
|
|
18381
|
-
const imageShowTimerRef =
|
|
18382
|
-
const editStylesRef =
|
|
18383
|
-
const activateRef =
|
|
19262
|
+
const [carouselHover, setCarouselHover] = useState16(null);
|
|
19263
|
+
const [uploadingRects, setUploadingRects] = useState16({});
|
|
19264
|
+
const hoveredGapRef = useRef12(null);
|
|
19265
|
+
const imageUnhoverTimerRef = useRef12(null);
|
|
19266
|
+
const imageShowTimerRef = useRef12(null);
|
|
19267
|
+
const editStylesRef = useRef12(null);
|
|
19268
|
+
const activateRef = useRef12(() => {
|
|
18384
19269
|
});
|
|
18385
|
-
const deactivateRef =
|
|
19270
|
+
const deactivateRef = useRef12(() => {
|
|
18386
19271
|
});
|
|
18387
|
-
const selectRef =
|
|
19272
|
+
const selectRef = useRef12(() => {
|
|
18388
19273
|
});
|
|
18389
|
-
const selectFrameRef =
|
|
19274
|
+
const selectFrameRef = useRef12(() => {
|
|
18390
19275
|
});
|
|
18391
|
-
const selectLogoRef =
|
|
19276
|
+
const selectLogoRef = useRef12(() => {
|
|
18392
19277
|
});
|
|
18393
|
-
const openLogoSizePanelRef =
|
|
19278
|
+
const openLogoSizePanelRef = useRef12(() => {
|
|
18394
19279
|
});
|
|
18395
|
-
const deselectRef =
|
|
19280
|
+
const deselectRef = useRef12(() => {
|
|
18396
19281
|
});
|
|
18397
|
-
const closeFloatingPanelOnlyRef =
|
|
19282
|
+
const closeFloatingPanelOnlyRef = useRef12(() => {
|
|
18398
19283
|
});
|
|
18399
|
-
const reselectNavigationItemRef =
|
|
19284
|
+
const reselectNavigationItemRef = useRef12(() => {
|
|
18400
19285
|
});
|
|
18401
|
-
const commitNavigationTextEditRef =
|
|
19286
|
+
const commitNavigationTextEditRef = useRef12(() => {
|
|
18402
19287
|
});
|
|
18403
|
-
const handleDeleteSelectedRef =
|
|
18404
|
-
const runPendingDeleteUndoRef =
|
|
18405
|
-
const isFooterFrameSelectionRef =
|
|
18406
|
-
const refreshActiveCommandsRef =
|
|
19288
|
+
const handleDeleteSelectedRef = useRef12(() => false);
|
|
19289
|
+
const runPendingDeleteUndoRef = useRef12(() => false);
|
|
19290
|
+
const isFooterFrameSelectionRef = useRef12(false);
|
|
19291
|
+
const refreshActiveCommandsRef = useRef12(() => {
|
|
18407
19292
|
});
|
|
18408
|
-
const postToParentRef =
|
|
19293
|
+
const postToParentRef = useRef12(postToParent2);
|
|
18409
19294
|
postToParentRef.current = postToParent2;
|
|
18410
|
-
const aiSectionApiRef =
|
|
18411
|
-
const
|
|
18412
|
-
const
|
|
18413
|
-
const
|
|
18414
|
-
const [
|
|
18415
|
-
const
|
|
18416
|
-
const
|
|
18417
|
-
const [
|
|
18418
|
-
const [
|
|
18419
|
-
const
|
|
18420
|
-
const
|
|
18421
|
-
const
|
|
18422
|
-
const
|
|
18423
|
-
const [
|
|
18424
|
-
const
|
|
18425
|
-
const clearFormPick = useCallback9(() => {
|
|
19295
|
+
const aiSectionApiRef = useRef12(null);
|
|
19296
|
+
const sectionsLoadedRef = useRef12(false);
|
|
19297
|
+
const pendingScheduleConfigRequests = useRef12([]);
|
|
19298
|
+
const [toolbarRect, setToolbarRect] = useState16(null);
|
|
19299
|
+
const [formPickRect, setFormPickRect] = useState16(null);
|
|
19300
|
+
const formPickElRef = useRef12(null);
|
|
19301
|
+
const [formViewState, setFormViewStateUi] = useState16("default");
|
|
19302
|
+
const [formPickCount, setFormPickCount] = useState16(null);
|
|
19303
|
+
const [formHoverRect, setFormHoverRect] = useState16(null);
|
|
19304
|
+
const formHoverElRef = useRef12(null);
|
|
19305
|
+
const [fieldPickRect, setFieldPickRect] = useState16(null);
|
|
19306
|
+
const fieldPickElRef = useRef12(null);
|
|
19307
|
+
const [fieldPickState, setFieldPickState] = useState16(null);
|
|
19308
|
+
const [fieldTypePickerOpen, setFieldTypePickerOpen] = useState16(false);
|
|
19309
|
+
const clearFormPick = useCallback10(() => {
|
|
18426
19310
|
const form = formPickElRef.current;
|
|
18427
19311
|
const editing = fieldPickElRef.current;
|
|
18428
19312
|
if (commitPlaceholderEdit(editing) && editing) {
|
|
@@ -18442,7 +19326,7 @@ function OhhwellsBridge() {
|
|
|
18442
19326
|
formPickElRef.current = null;
|
|
18443
19327
|
setFormPickRect(null);
|
|
18444
19328
|
}, []);
|
|
18445
|
-
const clearFieldPick =
|
|
19329
|
+
const clearFieldPick = useCallback10(() => {
|
|
18446
19330
|
const wrapper = fieldPickElRef.current;
|
|
18447
19331
|
if (commitPlaceholderEdit(wrapper) && wrapper) {
|
|
18448
19332
|
const form = wrapper.closest('[data-ohw-editable="form"]');
|
|
@@ -18452,9 +19336,9 @@ function OhhwellsBridge() {
|
|
|
18452
19336
|
setFieldPickRect(null);
|
|
18453
19337
|
setFieldPickState(null);
|
|
18454
19338
|
}, []);
|
|
18455
|
-
const persistFieldsRef =
|
|
19339
|
+
const persistFieldsRef = useRef12(() => {
|
|
18456
19340
|
});
|
|
18457
|
-
const persistFields =
|
|
19341
|
+
const persistFields = useCallback10(
|
|
18458
19342
|
(form) => {
|
|
18459
19343
|
const key = formKeyOf(form);
|
|
18460
19344
|
if (!key) return;
|
|
@@ -18465,7 +19349,7 @@ function OhhwellsBridge() {
|
|
|
18465
19349
|
[]
|
|
18466
19350
|
);
|
|
18467
19351
|
persistFieldsRef.current = persistFields;
|
|
18468
|
-
const selectField =
|
|
19352
|
+
const selectField = useCallback10((wrapper) => {
|
|
18469
19353
|
if (fieldPickElRef.current && fieldPickElRef.current !== wrapper) {
|
|
18470
19354
|
commitPlaceholderEdit(fieldPickElRef.current);
|
|
18471
19355
|
}
|
|
@@ -18478,7 +19362,7 @@ function OhhwellsBridge() {
|
|
|
18478
19362
|
setFieldPickState({ type: fieldTypeOf(wrapper), required: isFieldRequired(wrapper) });
|
|
18479
19363
|
setFieldTypePickerOpen(false);
|
|
18480
19364
|
}, []);
|
|
18481
|
-
const withSelectedField =
|
|
19365
|
+
const withSelectedField = useCallback10(
|
|
18482
19366
|
(run) => {
|
|
18483
19367
|
const wrapper = fieldPickElRef.current;
|
|
18484
19368
|
const form = formPickElRef.current;
|
|
@@ -18491,28 +19375,28 @@ function OhhwellsBridge() {
|
|
|
18491
19375
|
},
|
|
18492
19376
|
[persistFields]
|
|
18493
19377
|
);
|
|
18494
|
-
const handleFieldTypeChange =
|
|
19378
|
+
const handleFieldTypeChange = useCallback10(
|
|
18495
19379
|
(type) => withSelectedField((_form, wrapper) => {
|
|
18496
19380
|
applyFieldType(wrapper, type);
|
|
18497
19381
|
selectField(wrapper);
|
|
18498
19382
|
}),
|
|
18499
19383
|
[selectField, withSelectedField]
|
|
18500
19384
|
);
|
|
18501
|
-
const handleFieldRequiredToggle =
|
|
19385
|
+
const handleFieldRequiredToggle = useCallback10(
|
|
18502
19386
|
() => withSelectedField((_form, wrapper) => {
|
|
18503
19387
|
setFieldRequired(wrapper, !isFieldRequired(wrapper));
|
|
18504
19388
|
selectField(wrapper);
|
|
18505
19389
|
}),
|
|
18506
19390
|
[selectField, withSelectedField]
|
|
18507
19391
|
);
|
|
18508
|
-
const handleFieldDuplicate =
|
|
19392
|
+
const handleFieldDuplicate = useCallback10(
|
|
18509
19393
|
() => withSelectedField((form, wrapper) => {
|
|
18510
19394
|
const copy = duplicateField(form, wrapper);
|
|
18511
19395
|
selectField(copy);
|
|
18512
19396
|
}),
|
|
18513
19397
|
[selectField, withSelectedField]
|
|
18514
19398
|
);
|
|
18515
|
-
const handleFieldDelete =
|
|
19399
|
+
const handleFieldDelete = useCallback10(
|
|
18516
19400
|
() => withSelectedField((_form, wrapper) => {
|
|
18517
19401
|
removeField(wrapper);
|
|
18518
19402
|
clearFieldPick();
|
|
@@ -18520,7 +19404,7 @@ function OhhwellsBridge() {
|
|
|
18520
19404
|
}),
|
|
18521
19405
|
[clearFieldPick, withSelectedField]
|
|
18522
19406
|
);
|
|
18523
|
-
const handleAddField =
|
|
19407
|
+
const handleAddField = useCallback10(
|
|
18524
19408
|
(type) => {
|
|
18525
19409
|
const form = formPickElRef.current;
|
|
18526
19410
|
if (!form) return;
|
|
@@ -18536,8 +19420,8 @@ function OhhwellsBridge() {
|
|
|
18536
19420
|
},
|
|
18537
19421
|
[persistFields, selectField]
|
|
18538
19422
|
);
|
|
18539
|
-
const fieldDragRef =
|
|
18540
|
-
const buildFieldDropSlots =
|
|
19423
|
+
const fieldDragRef = useRef12(null);
|
|
19424
|
+
const buildFieldDropSlots = useCallback10((form, draggedKey) => {
|
|
18541
19425
|
const others = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== draggedKey);
|
|
18542
19426
|
const slots = others.map((el) => {
|
|
18543
19427
|
const rect = el.getBoundingClientRect();
|
|
@@ -18550,7 +19434,7 @@ function OhhwellsBridge() {
|
|
|
18550
19434
|
}
|
|
18551
19435
|
return slots;
|
|
18552
19436
|
}, []);
|
|
18553
|
-
const handleFieldDragStart =
|
|
19437
|
+
const handleFieldDragStart = useCallback10(() => {
|
|
18554
19438
|
const wrapper = fieldPickElRef.current;
|
|
18555
19439
|
const form = formPickElRef.current;
|
|
18556
19440
|
if (!wrapper || !form) return;
|
|
@@ -18559,18 +19443,18 @@ function OhhwellsBridge() {
|
|
|
18559
19443
|
setFieldDragging(true);
|
|
18560
19444
|
setFieldDropSlots(buildFieldDropSlots(form, key));
|
|
18561
19445
|
}, [buildFieldDropSlots]);
|
|
18562
|
-
const handleFieldDragEnd =
|
|
19446
|
+
const handleFieldDragEnd = useCallback10(() => {
|
|
18563
19447
|
fieldDragRef.current = null;
|
|
18564
19448
|
setFieldDropIndex(null);
|
|
18565
19449
|
setFieldDropSlots([]);
|
|
18566
19450
|
setFieldDragging(false);
|
|
18567
19451
|
}, []);
|
|
18568
|
-
const [fieldDropIndex, setFieldDropIndex] =
|
|
18569
|
-
const [fieldDropSlots, setFieldDropSlots] =
|
|
18570
|
-
const [fieldDragging, setFieldDragging] =
|
|
18571
|
-
const clearFormPickRef =
|
|
19452
|
+
const [fieldDropIndex, setFieldDropIndex] = useState16(null);
|
|
19453
|
+
const [fieldDropSlots, setFieldDropSlots] = useState16([]);
|
|
19454
|
+
const [fieldDragging, setFieldDragging] = useState16(false);
|
|
19455
|
+
const clearFormPickRef = useRef12(clearFormPick);
|
|
18572
19456
|
clearFormPickRef.current = clearFormPick;
|
|
18573
|
-
|
|
19457
|
+
useEffect15(() => {
|
|
18574
19458
|
const el = fieldPickElRef.current;
|
|
18575
19459
|
if (!el || fieldPickRect === null) return;
|
|
18576
19460
|
const observer = new ResizeObserver(() => {
|
|
@@ -18579,7 +19463,7 @@ function OhhwellsBridge() {
|
|
|
18579
19463
|
observer.observe(el);
|
|
18580
19464
|
return () => observer.disconnect();
|
|
18581
19465
|
}, [fieldPickRect !== null, fieldPickState]);
|
|
18582
|
-
|
|
19466
|
+
useEffect15(() => {
|
|
18583
19467
|
const el = formPickElRef.current;
|
|
18584
19468
|
if (!el || formPickRect === null) return;
|
|
18585
19469
|
const observer = new ResizeObserver(() => {
|
|
@@ -18588,25 +19472,25 @@ function OhhwellsBridge() {
|
|
|
18588
19472
|
observer.observe(el);
|
|
18589
19473
|
return () => observer.disconnect();
|
|
18590
19474
|
}, [formPickRect !== null, formViewState]);
|
|
18591
|
-
const [toolbarVariant, setToolbarVariant] =
|
|
18592
|
-
const toolbarVariantRef =
|
|
19475
|
+
const [toolbarVariant, setToolbarVariant] = useState16("none");
|
|
19476
|
+
const toolbarVariantRef = useRef12("none");
|
|
18593
19477
|
toolbarVariantRef.current = toolbarVariant;
|
|
18594
|
-
const [selectedIsCta, setSelectedIsCta] =
|
|
18595
|
-
const [selectedIsSocial, setSelectedIsSocial] =
|
|
18596
|
-
const [selectedIsSocialsRow, setSelectedIsSocialsRow] =
|
|
18597
|
-
const [reorderHrefKey, setReorderHrefKey] =
|
|
18598
|
-
const [reorderDragDisabled, setReorderDragDisabled] =
|
|
18599
|
-
const [toggleState, setToggleState] =
|
|
18600
|
-
const [maxBadge, setMaxBadge] =
|
|
18601
|
-
const [activeCommands, setActiveCommands] =
|
|
18602
|
-
const [sectionGap, setSectionGap] =
|
|
18603
|
-
const [toolbarShowEditLink, setToolbarShowEditLink] =
|
|
18604
|
-
const hoveredNavContainerRef =
|
|
18605
|
-
const [hoveredNavContainerRect, setHoveredNavContainerRect] =
|
|
18606
|
-
const hoveredItemElRef =
|
|
18607
|
-
const [hoveredItemRect, setHoveredItemRect] =
|
|
18608
|
-
const [hoveredTextRect, setHoveredTextRect] =
|
|
18609
|
-
|
|
19478
|
+
const [selectedIsCta, setSelectedIsCta] = useState16(false);
|
|
19479
|
+
const [selectedIsSocial, setSelectedIsSocial] = useState16(false);
|
|
19480
|
+
const [selectedIsSocialsRow, setSelectedIsSocialsRow] = useState16(false);
|
|
19481
|
+
const [reorderHrefKey, setReorderHrefKey] = useState16(null);
|
|
19482
|
+
const [reorderDragDisabled, setReorderDragDisabled] = useState16(false);
|
|
19483
|
+
const [toggleState, setToggleState] = useState16(null);
|
|
19484
|
+
const [maxBadge, setMaxBadge] = useState16(null);
|
|
19485
|
+
const [activeCommands, setActiveCommands] = useState16(/* @__PURE__ */ new Set());
|
|
19486
|
+
const [sectionGap, setSectionGap] = useState16(null);
|
|
19487
|
+
const [toolbarShowEditLink, setToolbarShowEditLink] = useState16(false);
|
|
19488
|
+
const hoveredNavContainerRef = useRef12(null);
|
|
19489
|
+
const [hoveredNavContainerRect, setHoveredNavContainerRect] = useState16(null);
|
|
19490
|
+
const hoveredItemElRef = useRef12(null);
|
|
19491
|
+
const [hoveredItemRect, setHoveredItemRect] = useState16(null);
|
|
19492
|
+
const [hoveredTextRect, setHoveredTextRect] = useState16(null);
|
|
19493
|
+
useEffect15(() => {
|
|
18610
19494
|
const sync = () => {
|
|
18611
19495
|
const el = document.querySelector(
|
|
18612
19496
|
'[data-ohw-hovered]:not([contenteditable]):not([data-ohw-href-key]):not([data-ohw-editable="form"] *)'
|
|
@@ -18650,46 +19534,61 @@ function OhhwellsBridge() {
|
|
|
18650
19534
|
});
|
|
18651
19535
|
return () => observer.disconnect();
|
|
18652
19536
|
}, []);
|
|
18653
|
-
const siblingHintElRef =
|
|
18654
|
-
const [siblingHintRect, setSiblingHintRect] =
|
|
18655
|
-
const [siblingHintRects, setSiblingHintRects] =
|
|
18656
|
-
const [isItemDragging, setIsItemDragging] =
|
|
18657
|
-
const [isFooterFrameSelection, setIsFooterFrameSelection] =
|
|
19537
|
+
const siblingHintElRef = useRef12(null);
|
|
19538
|
+
const [siblingHintRect, setSiblingHintRect] = useState16(null);
|
|
19539
|
+
const [siblingHintRects, setSiblingHintRects] = useState16([]);
|
|
19540
|
+
const [isItemDragging, setIsItemDragging] = useState16(false);
|
|
19541
|
+
const [isFooterFrameSelection, setIsFooterFrameSelection] = useState16(false);
|
|
18658
19542
|
isFooterFrameSelectionRef.current = isFooterFrameSelection;
|
|
18659
|
-
const [floatingPanel, setFloatingPanel] =
|
|
18660
|
-
const floatingPanelOpenRef =
|
|
19543
|
+
const [floatingPanel, setFloatingPanel] = useState16(null);
|
|
19544
|
+
const floatingPanelOpenRef = useRef12(false);
|
|
18661
19545
|
floatingPanelOpenRef.current = floatingPanel !== null;
|
|
18662
|
-
const [floatingPanelPos, setFloatingPanelPos] =
|
|
18663
|
-
const [logoSizeDraft, setLogoSizeDraft] =
|
|
18664
|
-
const [editorViewport, setEditorViewport] =
|
|
18665
|
-
const [parentScrollSnap, setParentScrollSnap] =
|
|
18666
|
-
const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] =
|
|
18667
|
-
const [footerHeadingVisible, setFooterHeadingVisible] =
|
|
18668
|
-
const footerDragRef =
|
|
18669
|
-
const [footerDropSlots, setFooterDropSlots] =
|
|
18670
|
-
const [activeFooterDropIndex, setActiveFooterDropIndex] =
|
|
18671
|
-
const [draggedItemRect, setDraggedItemRect] =
|
|
18672
|
-
const footerPointerDragRef =
|
|
18673
|
-
const suppressNextClickRef =
|
|
18674
|
-
const suppressClickUntilRef =
|
|
18675
|
-
const [linkPopover, setLinkPopover] =
|
|
18676
|
-
const linkPopoverSessionRef =
|
|
18677
|
-
const addNavAfterAnchorRef =
|
|
18678
|
-
const editContentRef =
|
|
18679
|
-
const aiSectionsRef =
|
|
18680
|
-
const
|
|
18681
|
-
|
|
18682
|
-
|
|
18683
|
-
const
|
|
18684
|
-
|
|
18685
|
-
const
|
|
18686
|
-
const
|
|
18687
|
-
const
|
|
18688
|
-
const
|
|
18689
|
-
const
|
|
18690
|
-
const
|
|
19546
|
+
const [floatingPanelPos, setFloatingPanelPos] = useState16(null);
|
|
19547
|
+
const [logoSizeDraft, setLogoSizeDraft] = useState16(null);
|
|
19548
|
+
const [editorViewport, setEditorViewport] = useState16("desktop");
|
|
19549
|
+
const [parentScrollSnap, setParentScrollSnap] = useState16(null);
|
|
19550
|
+
const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = useState16(null);
|
|
19551
|
+
const [footerHeadingVisible, setFooterHeadingVisible] = useState16(null);
|
|
19552
|
+
const footerDragRef = useRef12(null);
|
|
19553
|
+
const [footerDropSlots, setFooterDropSlots] = useState16([]);
|
|
19554
|
+
const [activeFooterDropIndex, setActiveFooterDropIndex] = useState16(null);
|
|
19555
|
+
const [draggedItemRect, setDraggedItemRect] = useState16(null);
|
|
19556
|
+
const footerPointerDragRef = useRef12(null);
|
|
19557
|
+
const suppressNextClickRef = useRef12(false);
|
|
19558
|
+
const suppressClickUntilRef = useRef12(0);
|
|
19559
|
+
const [linkPopover, setLinkPopover] = useState16(null);
|
|
19560
|
+
const linkPopoverSessionRef = useRef12(null);
|
|
19561
|
+
const addNavAfterAnchorRef = useRef12(null);
|
|
19562
|
+
const editContentRef = useRef12({});
|
|
19563
|
+
const aiSectionsRef = useRef12("");
|
|
19564
|
+
const applyTreeLocalRef = useRef12(
|
|
19565
|
+
null
|
|
19566
|
+
);
|
|
19567
|
+
const clearInteractionChromeRef = useRef12(() => {
|
|
19568
|
+
});
|
|
19569
|
+
const brandKitRef = useRef12("");
|
|
19570
|
+
const stylesRef = useRef12("");
|
|
19571
|
+
const appliedDrawerRef = useRef12(null);
|
|
19572
|
+
const pendingDeleteUndoRef = useRef12(null);
|
|
19573
|
+
const [sitePages, setSitePages] = useState16([]);
|
|
19574
|
+
const [sectionsByPath, setSectionsByPath] = useState16({});
|
|
19575
|
+
const sectionsPrefetchGenRef = useRef12(0);
|
|
19576
|
+
const setLinkPopoverRef = useRef12(setLinkPopover);
|
|
19577
|
+
const linkPopoverPanelRef = useRef12(null);
|
|
19578
|
+
const linkPopoverOpenRef = useRef12(false);
|
|
19579
|
+
const linkPopoverGraceUntilRef = useRef12(0);
|
|
18691
19580
|
setLinkPopoverRef.current = setLinkPopover;
|
|
18692
19581
|
linkPopoverSessionRef.current = linkPopover;
|
|
19582
|
+
useEffect15(() => {
|
|
19583
|
+
setSectionOrderPersistHandler((entries) => {
|
|
19584
|
+
const currentPath = window.location.pathname;
|
|
19585
|
+
const merged = mergePageSectionOrder(editContentRef.current[SECTION_ORDER_KEY], currentPath, entries);
|
|
19586
|
+
const text = JSON.stringify(merged);
|
|
19587
|
+
editContentRef.current = { ...editContentRef.current, [SECTION_ORDER_KEY]: text };
|
|
19588
|
+
postToParentRef.current({ type: "ow:change", nodes: [{ key: SECTION_ORDER_KEY, text }] });
|
|
19589
|
+
});
|
|
19590
|
+
return () => setSectionOrderPersistHandler(null);
|
|
19591
|
+
}, []);
|
|
18693
19592
|
const {
|
|
18694
19593
|
navDragRef,
|
|
18695
19594
|
navPointerDragRef,
|
|
@@ -18736,7 +19635,7 @@ function OhhwellsBridge() {
|
|
|
18736
19635
|
const bumpLinkPopoverGrace = () => {
|
|
18737
19636
|
linkPopoverGraceUntilRef.current = Date.now() + 350;
|
|
18738
19637
|
};
|
|
18739
|
-
const runSectionsPrefetch =
|
|
19638
|
+
const runSectionsPrefetch = useCallback10((pages) => {
|
|
18740
19639
|
if (!isEditMode || shouldUseDevFixtures() || pages.length === 0) return;
|
|
18741
19640
|
const gen = ++sectionsPrefetchGenRef.current;
|
|
18742
19641
|
const paths = pages.map((p) => p.path);
|
|
@@ -18755,9 +19654,9 @@ function OhhwellsBridge() {
|
|
|
18755
19654
|
);
|
|
18756
19655
|
});
|
|
18757
19656
|
}, [isEditMode, pathname]);
|
|
18758
|
-
const runSectionsPrefetchRef =
|
|
19657
|
+
const runSectionsPrefetchRef = useRef12(runSectionsPrefetch);
|
|
18759
19658
|
runSectionsPrefetchRef.current = runSectionsPrefetch;
|
|
18760
|
-
|
|
19659
|
+
useEffect15(() => {
|
|
18761
19660
|
if (!linkPopover) {
|
|
18762
19661
|
document.documentElement.removeAttribute("data-ohw-link-popover-open");
|
|
18763
19662
|
return;
|
|
@@ -18785,7 +19684,7 @@ function OhhwellsBridge() {
|
|
|
18785
19684
|
document.documentElement.removeAttribute("data-ohw-link-popover-open");
|
|
18786
19685
|
};
|
|
18787
19686
|
}, [linkPopover, postToParent2]);
|
|
18788
|
-
|
|
19687
|
+
useEffect15(() => {
|
|
18789
19688
|
if (!isEditMode) return;
|
|
18790
19689
|
const useFixtures = shouldUseDevFixtures();
|
|
18791
19690
|
if (useFixtures) {
|
|
@@ -18809,14 +19708,14 @@ function OhhwellsBridge() {
|
|
|
18809
19708
|
if (!useFixtures) postToParent2({ type: "ow:request-site-pages" });
|
|
18810
19709
|
return () => window.removeEventListener("message", onSitePages);
|
|
18811
19710
|
}, [isEditMode, postToParent2]);
|
|
18812
|
-
|
|
19711
|
+
useEffect15(() => {
|
|
18813
19712
|
if (!isEditMode || shouldUseDevFixtures()) return;
|
|
18814
19713
|
void loadAllSectionsManifest().then((manifest) => {
|
|
18815
19714
|
if (Object.keys(manifest).length === 0) return;
|
|
18816
19715
|
setSectionsByPath((prev) => ({ ...manifest, ...prev }));
|
|
18817
19716
|
});
|
|
18818
19717
|
}, [isEditMode]);
|
|
18819
|
-
|
|
19718
|
+
useEffect15(() => {
|
|
18820
19719
|
const update = () => {
|
|
18821
19720
|
const el = activeElRef.current ?? selectedElRef.current;
|
|
18822
19721
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
@@ -18840,10 +19739,10 @@ function OhhwellsBridge() {
|
|
|
18840
19739
|
vvp.removeEventListener("resize", update);
|
|
18841
19740
|
};
|
|
18842
19741
|
}, []);
|
|
18843
|
-
const refreshStateRules =
|
|
19742
|
+
const refreshStateRules = useCallback10(() => {
|
|
18844
19743
|
editStylesRef.current?.forceHover && (editStylesRef.current.forceHover.textContent = collectStateRules());
|
|
18845
19744
|
}, []);
|
|
18846
|
-
const processConfigRequest =
|
|
19745
|
+
const processConfigRequest = useCallback10((insertAfterVal) => {
|
|
18847
19746
|
const tracker = getSectionsTracker();
|
|
18848
19747
|
let entries = [];
|
|
18849
19748
|
try {
|
|
@@ -18866,7 +19765,7 @@ function OhhwellsBridge() {
|
|
|
18866
19765
|
}
|
|
18867
19766
|
window.postMessage({ type: "ow:schedule-config", insertAfter: insertAfterVal, scheduleId: null }, "*");
|
|
18868
19767
|
}, [isEditMode]);
|
|
18869
|
-
const deactivate =
|
|
19768
|
+
const deactivate = useCallback10(() => {
|
|
18870
19769
|
const el = activeElRef.current;
|
|
18871
19770
|
if (!el) return;
|
|
18872
19771
|
const isFormBlock = el.dataset.ohwEditable === "form";
|
|
@@ -18917,12 +19816,12 @@ function OhhwellsBridge() {
|
|
|
18917
19816
|
setToolbarShowEditLink(false);
|
|
18918
19817
|
postToParent2({ type: "ow:exit-edit" });
|
|
18919
19818
|
}, [postToParent2]);
|
|
18920
|
-
const clearSelectedAttr =
|
|
19819
|
+
const clearSelectedAttr = useCallback10(() => {
|
|
18921
19820
|
document.querySelectorAll("[data-ohw-selected]").forEach((el) => {
|
|
18922
19821
|
el.removeAttribute("data-ohw-selected");
|
|
18923
19822
|
});
|
|
18924
19823
|
}, []);
|
|
18925
|
-
const deselect =
|
|
19824
|
+
const deselect = useCallback10(() => {
|
|
18926
19825
|
const nestedGroup = selectedElRef.current?.closest("[data-ohw-nav-children]") != null ? selectedElRef.current.closest("[data-ohw-nav-group]") : null;
|
|
18927
19826
|
clearSelectedAttr();
|
|
18928
19827
|
selectedElRef.current = null;
|
|
@@ -18956,20 +19855,20 @@ function OhhwellsBridge() {
|
|
|
18956
19855
|
setToolbarVariant("none");
|
|
18957
19856
|
}
|
|
18958
19857
|
}, [clearSelectedAttr]);
|
|
18959
|
-
const markSelected =
|
|
19858
|
+
const markSelected = useCallback10((el) => {
|
|
18960
19859
|
clearSelectedAttr();
|
|
18961
19860
|
el.removeAttribute("data-ohw-hovered");
|
|
18962
19861
|
el.setAttribute("data-ohw-selected", "");
|
|
18963
19862
|
}, [clearSelectedAttr]);
|
|
18964
|
-
const isSelectedForHover =
|
|
19863
|
+
const isSelectedForHover = useCallback10((el) => {
|
|
18965
19864
|
if (!el) return false;
|
|
18966
19865
|
return [selectedElRef.current, activeElRef.current].some(
|
|
18967
19866
|
(busy) => busy && (el === busy || busy.contains(el) || el.contains(busy))
|
|
18968
19867
|
);
|
|
18969
19868
|
}, []);
|
|
18970
|
-
const isSelectedForHoverRef =
|
|
19869
|
+
const isSelectedForHoverRef = useRef12(isSelectedForHover);
|
|
18971
19870
|
isSelectedForHoverRef.current = isSelectedForHover;
|
|
18972
|
-
const resolveHrefKeyElement =
|
|
19871
|
+
const resolveHrefKeyElement = useCallback10((hrefKey) => {
|
|
18973
19872
|
if (isFooterHrefKey(hrefKey)) {
|
|
18974
19873
|
return document.querySelector(
|
|
18975
19874
|
`footer [data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
@@ -18984,7 +19883,7 @@ function OhhwellsBridge() {
|
|
|
18984
19883
|
`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
18985
19884
|
);
|
|
18986
19885
|
}, []);
|
|
18987
|
-
const resyncSelectedNavigationItem =
|
|
19886
|
+
const resyncSelectedNavigationItem = useCallback10(() => {
|
|
18988
19887
|
const hrefKey = selectedHrefKeyRef.current;
|
|
18989
19888
|
if (hrefKey) {
|
|
18990
19889
|
const link = resolveHrefKeyElement(hrefKey);
|
|
@@ -19022,7 +19921,7 @@ function OhhwellsBridge() {
|
|
|
19022
19921
|
);
|
|
19023
19922
|
}
|
|
19024
19923
|
}, [resolveHrefKeyElement]);
|
|
19025
|
-
const reselectNavigationItem =
|
|
19924
|
+
const reselectNavigationItem = useCallback10((navAnchor) => {
|
|
19026
19925
|
selectedElRef.current = navAnchor;
|
|
19027
19926
|
selectedHrefKeyRef.current = navAnchor.getAttribute("data-ohw-href-key");
|
|
19028
19927
|
selectedFooterColAttrRef.current = null;
|
|
@@ -19053,7 +19952,7 @@ function OhhwellsBridge() {
|
|
|
19053
19952
|
setToolbarShowEditLink(false);
|
|
19054
19953
|
setActiveCommands(/* @__PURE__ */ new Set());
|
|
19055
19954
|
}, [markSelected]);
|
|
19056
|
-
const commitNavigationTextEdit =
|
|
19955
|
+
const commitNavigationTextEdit = useCallback10((navAnchor) => {
|
|
19057
19956
|
const el = activeElRef.current;
|
|
19058
19957
|
if (!el) return;
|
|
19059
19958
|
const key = el.dataset.ohwKey;
|
|
@@ -19086,7 +19985,7 @@ function OhhwellsBridge() {
|
|
|
19086
19985
|
postToParent2({ type: "ow:exit-edit" });
|
|
19087
19986
|
reselectNavigationItem(navAnchor);
|
|
19088
19987
|
}, [postToParent2, reselectNavigationItem]);
|
|
19089
|
-
const handleAddTopLevelNavItem =
|
|
19988
|
+
const handleAddTopLevelNavItem = useCallback10(() => {
|
|
19090
19989
|
const items = listNavbarRootItems();
|
|
19091
19990
|
addNavAfterAnchorRef.current = items[items.length - 1] ?? null;
|
|
19092
19991
|
deselectRef.current();
|
|
@@ -19098,7 +19997,7 @@ function OhhwellsBridge() {
|
|
|
19098
19997
|
intent: "add-nav"
|
|
19099
19998
|
});
|
|
19100
19999
|
}, []);
|
|
19101
|
-
const maybeWarnNavLinkDropdownConflict =
|
|
20000
|
+
const maybeWarnNavLinkDropdownConflict = useCallback10(
|
|
19102
20001
|
(anchor) => {
|
|
19103
20002
|
if (!isNavbarHrefKey(anchor.getAttribute("data-ohw-href-key"))) return;
|
|
19104
20003
|
if (!navDropdownsOpenOnClick()) return;
|
|
@@ -19111,7 +20010,7 @@ function OhhwellsBridge() {
|
|
|
19111
20010
|
},
|
|
19112
20011
|
[postToParent2]
|
|
19113
20012
|
);
|
|
19114
|
-
const handleNavDropdownOpenChange =
|
|
20013
|
+
const handleNavDropdownOpenChange = useCallback10((open) => {
|
|
19115
20014
|
const selected = selectedElRef.current;
|
|
19116
20015
|
if (!selected || !isNavigationItem2(selected)) return;
|
|
19117
20016
|
if (isNestedNavChild(selected)) return;
|
|
@@ -19127,7 +20026,7 @@ function OhhwellsBridge() {
|
|
|
19127
20026
|
}
|
|
19128
20027
|
});
|
|
19129
20028
|
}, []);
|
|
19130
|
-
const handleFooterHeadingVisibleChange =
|
|
20029
|
+
const handleFooterHeadingVisibleChange = useCallback10(
|
|
19131
20030
|
(visible) => {
|
|
19132
20031
|
const selected = selectedElRef.current;
|
|
19133
20032
|
if (!selected || !isFooterFrameSelectionRef.current) return;
|
|
@@ -19151,7 +20050,7 @@ function OhhwellsBridge() {
|
|
|
19151
20050
|
},
|
|
19152
20051
|
[postToParent2]
|
|
19153
20052
|
);
|
|
19154
|
-
const enterEditOnNewItem =
|
|
20053
|
+
const enterEditOnNewItem = useCallback10((anchor) => {
|
|
19155
20054
|
const label = anchor.querySelector('[data-ohw-editable="text"]');
|
|
19156
20055
|
if (!label) {
|
|
19157
20056
|
selectRef.current(anchor);
|
|
@@ -19160,8 +20059,8 @@ function OhhwellsBridge() {
|
|
|
19160
20059
|
setNavGroupForceOpen(anchor, true);
|
|
19161
20060
|
activateRef.current(label);
|
|
19162
20061
|
}, []);
|
|
19163
|
-
const pendingSocialAddRef =
|
|
19164
|
-
const handleAddChildItem =
|
|
20062
|
+
const pendingSocialAddRef = useRef12(null);
|
|
20063
|
+
const handleAddChildItem = useCallback10(() => {
|
|
19165
20064
|
const selected = selectedElRef.current;
|
|
19166
20065
|
if (!selected) return;
|
|
19167
20066
|
const socialsRow = isSocialsRow(selected) ? selected : findSocialsRow(selected);
|
|
@@ -19272,7 +20171,7 @@ function OhhwellsBridge() {
|
|
|
19272
20171
|
});
|
|
19273
20172
|
});
|
|
19274
20173
|
}, [enterEditOnNewItem, isFooterFrameSelection, maybeWarnNavLinkDropdownConflict, postToParent2]);
|
|
19275
|
-
const handleAddFooterColumn =
|
|
20174
|
+
const handleAddFooterColumn = useCallback10(() => {
|
|
19276
20175
|
if (!canAddFooterColumn()) {
|
|
19277
20176
|
postToParent2({
|
|
19278
20177
|
type: "ow:toast",
|
|
@@ -19293,7 +20192,7 @@ function OhhwellsBridge() {
|
|
|
19293
20192
|
selectRef.current(result.firstLink);
|
|
19294
20193
|
});
|
|
19295
20194
|
}, [postToParent2]);
|
|
19296
|
-
const clearFooterDragVisuals =
|
|
20195
|
+
const clearFooterDragVisuals = useCallback10(() => {
|
|
19297
20196
|
footerDragRef.current = null;
|
|
19298
20197
|
setSiblingHintRects([]);
|
|
19299
20198
|
setFooterDropSlots([]);
|
|
@@ -19302,7 +20201,7 @@ function OhhwellsBridge() {
|
|
|
19302
20201
|
setIsItemDragging(false);
|
|
19303
20202
|
unlockFooterDragInteraction();
|
|
19304
20203
|
}, []);
|
|
19305
|
-
const refreshFooterDragVisuals =
|
|
20204
|
+
const refreshFooterDragVisuals = useCallback10((session, activeSlot, clientX, clientY) => {
|
|
19306
20205
|
const dragged = session.draggedEl;
|
|
19307
20206
|
setDraggedItemRect(dragged.getBoundingClientRect());
|
|
19308
20207
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -19334,13 +20233,13 @@ function OhhwellsBridge() {
|
|
|
19334
20233
|
const activeIdx = activeSlot ? slots.findIndex((s) => s.insertIndex === activeSlot.insertIndex) : -1;
|
|
19335
20234
|
setActiveFooterDropIndex(activeIdx >= 0 ? activeIdx : null);
|
|
19336
20235
|
}, []);
|
|
19337
|
-
const refreshFooterDragVisualsRef =
|
|
20236
|
+
const refreshFooterDragVisualsRef = useRef12(refreshFooterDragVisuals);
|
|
19338
20237
|
refreshFooterDragVisualsRef.current = refreshFooterDragVisuals;
|
|
19339
|
-
const commitFooterDragRef =
|
|
20238
|
+
const commitFooterDragRef = useRef12(() => {
|
|
19340
20239
|
});
|
|
19341
|
-
const beginFooterDragRef =
|
|
20240
|
+
const beginFooterDragRef = useRef12(() => {
|
|
19342
20241
|
});
|
|
19343
|
-
const beginFooterDrag =
|
|
20242
|
+
const beginFooterDrag = useCallback10(
|
|
19344
20243
|
(session) => {
|
|
19345
20244
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
19346
20245
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -19360,7 +20259,7 @@ function OhhwellsBridge() {
|
|
|
19360
20259
|
[refreshFooterDragVisuals]
|
|
19361
20260
|
);
|
|
19362
20261
|
beginFooterDragRef.current = beginFooterDrag;
|
|
19363
|
-
const commitFooterDrag =
|
|
20262
|
+
const commitFooterDrag = useCallback10(
|
|
19364
20263
|
(clientX, clientY) => {
|
|
19365
20264
|
const session = footerDragRef.current;
|
|
19366
20265
|
if (!session) {
|
|
@@ -19489,7 +20388,7 @@ function OhhwellsBridge() {
|
|
|
19489
20388
|
[clearFooterDragVisuals, resolveHrefKeyElement, resyncSelectedNavigationItem]
|
|
19490
20389
|
);
|
|
19491
20390
|
commitFooterDragRef.current = commitFooterDrag;
|
|
19492
|
-
const startFooterLinkDrag =
|
|
20391
|
+
const startFooterLinkDrag = useCallback10(
|
|
19493
20392
|
(anchor, clientX, clientY, wasSelected) => {
|
|
19494
20393
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
19495
20394
|
if (!hrefKey) return false;
|
|
@@ -19525,7 +20424,7 @@ function OhhwellsBridge() {
|
|
|
19525
20424
|
},
|
|
19526
20425
|
[beginFooterDrag]
|
|
19527
20426
|
);
|
|
19528
|
-
const startFooterColumnDrag =
|
|
20427
|
+
const startFooterColumnDrag = useCallback10(
|
|
19529
20428
|
(columnEl, clientX, clientY, wasSelected) => {
|
|
19530
20429
|
const columns = listFooterColumns();
|
|
19531
20430
|
const idx = columns.indexOf(columnEl);
|
|
@@ -19545,7 +20444,7 @@ function OhhwellsBridge() {
|
|
|
19545
20444
|
},
|
|
19546
20445
|
[beginFooterDrag]
|
|
19547
20446
|
);
|
|
19548
|
-
const handleItemDragStart =
|
|
20447
|
+
const handleItemDragStart = useCallback10(
|
|
19549
20448
|
(e) => {
|
|
19550
20449
|
const selected = selectedElRef.current;
|
|
19551
20450
|
if (!selected) {
|
|
@@ -19565,7 +20464,7 @@ function OhhwellsBridge() {
|
|
|
19565
20464
|
},
|
|
19566
20465
|
[startFooterColumnDrag, startFooterLinkDrag, startNavLinkDrag]
|
|
19567
20466
|
);
|
|
19568
|
-
const handleItemDragEnd =
|
|
20467
|
+
const handleItemDragEnd = useCallback10(
|
|
19569
20468
|
(e) => {
|
|
19570
20469
|
if (footerDragRef.current) {
|
|
19571
20470
|
const x = e?.clientX;
|
|
@@ -19591,7 +20490,7 @@ function OhhwellsBridge() {
|
|
|
19591
20490
|
},
|
|
19592
20491
|
[commitFooterDrag, commitNavDrag, navDragRef]
|
|
19593
20492
|
);
|
|
19594
|
-
const handleItemChromePointerDown =
|
|
20493
|
+
const handleItemChromePointerDown = useCallback10((e) => {
|
|
19595
20494
|
if (e.button !== 0) return;
|
|
19596
20495
|
const selected = selectedElRef.current;
|
|
19597
20496
|
if (!selected) return;
|
|
@@ -19622,7 +20521,7 @@ function OhhwellsBridge() {
|
|
|
19622
20521
|
}
|
|
19623
20522
|
if (armNavPressFromChrome(selected, e.clientX, e.clientY, e.pointerId)) return;
|
|
19624
20523
|
}, [armNavPressFromChrome]);
|
|
19625
|
-
const handleItemChromeClick =
|
|
20524
|
+
const handleItemChromeClick = useCallback10((clientX, clientY) => {
|
|
19626
20525
|
if (suppressNextClickRef.current || Date.now() < suppressClickUntilRef.current) {
|
|
19627
20526
|
suppressNextClickRef.current = false;
|
|
19628
20527
|
return;
|
|
@@ -19635,7 +20534,7 @@ function OhhwellsBridge() {
|
|
|
19635
20534
|
}, []);
|
|
19636
20535
|
reselectNavigationItemRef.current = reselectNavigationItem;
|
|
19637
20536
|
commitNavigationTextEditRef.current = commitNavigationTextEdit;
|
|
19638
|
-
const select =
|
|
20537
|
+
const select = useCallback10((anchor) => {
|
|
19639
20538
|
if (!isNavigationItem2(anchor)) return;
|
|
19640
20539
|
if (activeElRef.current) deactivate();
|
|
19641
20540
|
aiSectionApiRef.current?.selectFromElement(anchor);
|
|
@@ -19678,7 +20577,7 @@ function OhhwellsBridge() {
|
|
|
19678
20577
|
setFloatingPanel(null);
|
|
19679
20578
|
setLogoSizeDraft(null);
|
|
19680
20579
|
}, [deactivate, markSelected]);
|
|
19681
|
-
const selectFrame =
|
|
20580
|
+
const selectFrame = useCallback10((el) => {
|
|
19682
20581
|
if (!isNavigationContainer(el)) return;
|
|
19683
20582
|
if (activeElRef.current) deactivate();
|
|
19684
20583
|
aiSectionApiRef.current?.selectFromElement(el);
|
|
@@ -19718,7 +20617,7 @@ function OhhwellsBridge() {
|
|
|
19718
20617
|
setFloatingPanel(null);
|
|
19719
20618
|
setLogoSizeDraft(null);
|
|
19720
20619
|
}, [deactivate, markSelected, postToParent2]);
|
|
19721
|
-
const selectLogo =
|
|
20620
|
+
const selectLogo = useCallback10(
|
|
19722
20621
|
(logoEl) => {
|
|
19723
20622
|
if (activeElRef.current) deactivate();
|
|
19724
20623
|
selectedElRef.current = logoEl;
|
|
@@ -19747,7 +20646,7 @@ function OhhwellsBridge() {
|
|
|
19747
20646
|
},
|
|
19748
20647
|
[deactivate, markSelected]
|
|
19749
20648
|
);
|
|
19750
|
-
const openLogoSizePanel =
|
|
20649
|
+
const openLogoSizePanel = useCallback10((logoEl) => {
|
|
19751
20650
|
const placement = getLogoPlacement(logoEl);
|
|
19752
20651
|
const draft = readLogoSizeState(editContentRef.current, placement);
|
|
19753
20652
|
setLogoSizeDraft(draft);
|
|
@@ -19760,7 +20659,7 @@ function OhhwellsBridge() {
|
|
|
19760
20659
|
placement
|
|
19761
20660
|
});
|
|
19762
20661
|
}, []);
|
|
19763
|
-
const openSocialsDisplayPanel =
|
|
20662
|
+
const openSocialsDisplayPanel = useCallback10((row) => {
|
|
19764
20663
|
setParentScrollSnap(parentScrollRef.current);
|
|
19765
20664
|
setFloatingPanel({
|
|
19766
20665
|
key: "socials-display",
|
|
@@ -19770,11 +20669,11 @@ function OhhwellsBridge() {
|
|
|
19770
20669
|
row
|
|
19771
20670
|
});
|
|
19772
20671
|
}, []);
|
|
19773
|
-
const isEditModeRef =
|
|
19774
|
-
const requestMissingSocialIconsRef =
|
|
20672
|
+
const isEditModeRef = useRef12(false);
|
|
20673
|
+
const requestMissingSocialIconsRef = useRef12(() => {
|
|
19775
20674
|
});
|
|
19776
|
-
const askedSocialIconsRef =
|
|
19777
|
-
const requestMissingSocialIcons =
|
|
20675
|
+
const askedSocialIconsRef = useRef12(/* @__PURE__ */ new Set());
|
|
20676
|
+
const requestMissingSocialIcons = useCallback10(() => {
|
|
19778
20677
|
const items = Array.from(document.querySelectorAll(`[${SOCIALS_ROW_ATTR}]`)).filter((row) => socialsDisplayFor(row, editContentRef.current).icon).flatMap((row) => {
|
|
19779
20678
|
const missing = socialsMissingIcons(row);
|
|
19780
20679
|
listSocialItems(row).forEach((item) => ensureIconSlot(item));
|
|
@@ -19786,7 +20685,7 @@ function OhhwellsBridge() {
|
|
|
19786
20685
|
}, []);
|
|
19787
20686
|
requestMissingSocialIconsRef.current = requestMissingSocialIcons;
|
|
19788
20687
|
isEditModeRef.current = isEditMode;
|
|
19789
|
-
const changeSocialsDisplay =
|
|
20688
|
+
const changeSocialsDisplay = useCallback10(
|
|
19790
20689
|
(row, next) => {
|
|
19791
20690
|
if (next.icon) {
|
|
19792
20691
|
const missing = socialsMissingIcons(row);
|
|
@@ -19810,17 +20709,17 @@ function OhhwellsBridge() {
|
|
|
19810
20709
|
},
|
|
19811
20710
|
[]
|
|
19812
20711
|
);
|
|
19813
|
-
const closeFloatingPanelOnly =
|
|
20712
|
+
const closeFloatingPanelOnly = useCallback10(() => {
|
|
19814
20713
|
setFloatingPanel(null);
|
|
19815
20714
|
setLogoSizeDraft(null);
|
|
19816
20715
|
}, []);
|
|
19817
20716
|
closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
|
|
19818
|
-
const closeFloatingPanelAndDeselect =
|
|
20717
|
+
const closeFloatingPanelAndDeselect = useCallback10(() => {
|
|
19819
20718
|
setFloatingPanel(null);
|
|
19820
20719
|
setLogoSizeDraft(null);
|
|
19821
20720
|
deselectRef.current();
|
|
19822
20721
|
}, []);
|
|
19823
|
-
|
|
20722
|
+
useEffect15(() => {
|
|
19824
20723
|
const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
|
|
19825
20724
|
if (!session || !logoSizeDraft) {
|
|
19826
20725
|
postToParentRef.current({ type: "ow:logo-size-panel", open: false });
|
|
@@ -19839,7 +20738,7 @@ function OhhwellsBridge() {
|
|
|
19839
20738
|
max: LOGO_SIZE_MAX
|
|
19840
20739
|
});
|
|
19841
20740
|
}, [floatingPanel, logoSizeDraft, editorViewport]);
|
|
19842
|
-
const persistLogoSizeDraft =
|
|
20741
|
+
const persistLogoSizeDraft = useCallback10(
|
|
19843
20742
|
(placement, draft) => {
|
|
19844
20743
|
const desktopKey = LOGO_SIZE_DESKTOP_KEYS[placement];
|
|
19845
20744
|
const mobileKey = LOGO_SIZE_MOBILE_KEYS[placement];
|
|
@@ -19879,7 +20778,7 @@ function OhhwellsBridge() {
|
|
|
19879
20778
|
},
|
|
19880
20779
|
[postToParent2]
|
|
19881
20780
|
);
|
|
19882
|
-
const activate =
|
|
20781
|
+
const activate = useCallback10((el, options) => {
|
|
19883
20782
|
if (activeElRef.current === el) return;
|
|
19884
20783
|
document.querySelectorAll("[data-ohw-hovered]").forEach((hovered) => {
|
|
19885
20784
|
hovered.removeAttribute("data-ohw-hovered");
|
|
@@ -19977,8 +20876,8 @@ function OhhwellsBridge() {
|
|
|
19977
20876
|
openLogoSizePanelRef.current = openLogoSizePanel;
|
|
19978
20877
|
deselectRef.current = deselect;
|
|
19979
20878
|
closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
|
|
19980
|
-
const lastSiteWideScopeRef =
|
|
19981
|
-
|
|
20879
|
+
const lastSiteWideScopeRef = useRef12(null);
|
|
20880
|
+
useEffect15(() => {
|
|
19982
20881
|
if (!isEditMode) {
|
|
19983
20882
|
if (lastSiteWideScopeRef.current !== false) {
|
|
19984
20883
|
lastSiteWideScopeRef.current = false;
|
|
@@ -20123,7 +21022,7 @@ function OhhwellsBridge() {
|
|
|
20123
21022
|
cancelled = true;
|
|
20124
21023
|
};
|
|
20125
21024
|
}, [subdomain, isEditMode]);
|
|
20126
|
-
|
|
21025
|
+
useEffect15(() => {
|
|
20127
21026
|
if (!isEditMode) return;
|
|
20128
21027
|
const resolveIndex = (form, clientY) => {
|
|
20129
21028
|
const wrappers = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== fieldDragRef.current?.key);
|
|
@@ -20164,7 +21063,7 @@ function OhhwellsBridge() {
|
|
|
20164
21063
|
window.removeEventListener("drop", onDrop, true);
|
|
20165
21064
|
};
|
|
20166
21065
|
}, [buildFieldDropSlots, isEditMode, persistFields, selectField]);
|
|
20167
|
-
|
|
21066
|
+
useEffect15(() => {
|
|
20168
21067
|
if (!isEditMode) return;
|
|
20169
21068
|
const mark = () => document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
20170
21069
|
markFormFields(form);
|
|
@@ -20176,7 +21075,7 @@ function OhhwellsBridge() {
|
|
|
20176
21075
|
});
|
|
20177
21076
|
return () => observer.disconnect();
|
|
20178
21077
|
}, [isEditMode, fetchState, pathname]);
|
|
20179
|
-
|
|
21078
|
+
useEffect15(() => {
|
|
20180
21079
|
if (!isEditMode) return;
|
|
20181
21080
|
let saveTimer = null;
|
|
20182
21081
|
const onInput = (e) => {
|
|
@@ -20198,14 +21097,14 @@ function OhhwellsBridge() {
|
|
|
20198
21097
|
document.addEventListener("input", onInput, true);
|
|
20199
21098
|
return () => document.removeEventListener("input", onInput, true);
|
|
20200
21099
|
}, [isEditMode, persistFields]);
|
|
20201
|
-
|
|
21100
|
+
useEffect15(() => {
|
|
20202
21101
|
if (isEditMode || fetchState !== "done") return;
|
|
20203
21102
|
const content = contentCache.get(subdomain) ?? {};
|
|
20204
21103
|
document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
20205
21104
|
reconcileFieldsFromContent(form, content);
|
|
20206
21105
|
});
|
|
20207
21106
|
}, [isEditMode, fetchState, subdomain]);
|
|
20208
|
-
|
|
21107
|
+
useEffect15(() => {
|
|
20209
21108
|
if (!isEditMode) return;
|
|
20210
21109
|
const swallow = (e) => {
|
|
20211
21110
|
const target = e.target;
|
|
@@ -20214,14 +21113,14 @@ function OhhwellsBridge() {
|
|
|
20214
21113
|
document.addEventListener("submit", swallow, true);
|
|
20215
21114
|
return () => document.removeEventListener("submit", swallow, true);
|
|
20216
21115
|
}, [isEditMode]);
|
|
20217
|
-
|
|
21116
|
+
useEffect15(() => {
|
|
20218
21117
|
if (isEditMode || fetchState !== "done") return;
|
|
20219
21118
|
console.log("env", process.env.NEXT_PUBLIC_FLOWOPS_API_URL);
|
|
20220
21119
|
const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
|
|
20221
21120
|
console.log({ apiUrl, subdomain });
|
|
20222
21121
|
bindPublishedForms(apiUrl, subdomain, contentCache.get(subdomain) ?? {});
|
|
20223
21122
|
}, [isEditMode, fetchState, subdomain]);
|
|
20224
|
-
|
|
21123
|
+
useEffect15(() => {
|
|
20225
21124
|
if (!subdomain || isEditMode) return;
|
|
20226
21125
|
let debounceTimer = null;
|
|
20227
21126
|
let observer = null;
|
|
@@ -20316,10 +21215,10 @@ function OhhwellsBridge() {
|
|
|
20316
21215
|
const visible = Boolean(subdomain) && fetchState !== "done";
|
|
20317
21216
|
el.style.display = visible ? "flex" : "none";
|
|
20318
21217
|
}, [subdomain, fetchState]);
|
|
20319
|
-
|
|
21218
|
+
useEffect15(() => {
|
|
20320
21219
|
postToParent2({ type: "ow:navigation", path: pathname });
|
|
20321
21220
|
}, [pathname, postToParent2]);
|
|
20322
|
-
|
|
21221
|
+
useEffect15(() => {
|
|
20323
21222
|
if (!subdomain || isEditMode) return;
|
|
20324
21223
|
const content = contentCache.get(subdomain);
|
|
20325
21224
|
if (!content) return;
|
|
@@ -20335,7 +21234,7 @@ function OhhwellsBridge() {
|
|
|
20335
21234
|
applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
|
|
20336
21235
|
}
|
|
20337
21236
|
}, [pathname, subdomain, isEditMode]);
|
|
20338
|
-
|
|
21237
|
+
useEffect15(() => {
|
|
20339
21238
|
if (!isEditMode) return;
|
|
20340
21239
|
if (linkPopoverSessionRef.current?.intent === "add-nav") return;
|
|
20341
21240
|
if (document.querySelector("[data-ohw-section-picker]")) return;
|
|
@@ -20343,11 +21242,11 @@ function OhhwellsBridge() {
|
|
|
20343
21242
|
deselectRef.current();
|
|
20344
21243
|
deactivateRef.current();
|
|
20345
21244
|
}, [pathname, isEditMode]);
|
|
20346
|
-
|
|
21245
|
+
useEffect15(() => {
|
|
20347
21246
|
if (!isEditMode) return;
|
|
20348
21247
|
initSectionInstancesFromContent(editContentRef.current, pathname);
|
|
20349
21248
|
}, [pathname, isEditMode]);
|
|
20350
|
-
|
|
21249
|
+
useEffect15(() => {
|
|
20351
21250
|
if (!isEditMode) return;
|
|
20352
21251
|
const observer = new MutationObserver(() => {
|
|
20353
21252
|
const drawer = document.querySelector("[data-ohw-nav-drawer]");
|
|
@@ -20358,7 +21257,7 @@ function OhhwellsBridge() {
|
|
|
20358
21257
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
20359
21258
|
return () => observer.disconnect();
|
|
20360
21259
|
}, [isEditMode, pathname]);
|
|
20361
|
-
|
|
21260
|
+
useEffect15(() => {
|
|
20362
21261
|
const contentForNav = () => {
|
|
20363
21262
|
if (isEditMode) return editContentRef.current;
|
|
20364
21263
|
if (!subdomain) return {};
|
|
@@ -20427,7 +21326,7 @@ function OhhwellsBridge() {
|
|
|
20427
21326
|
observer?.disconnect();
|
|
20428
21327
|
};
|
|
20429
21328
|
}, [isEditMode, pathname, subdomain, fetchState, resyncSelectedNavigationItem]);
|
|
20430
|
-
|
|
21329
|
+
useEffect15(() => {
|
|
20431
21330
|
if (!isEditMode) return;
|
|
20432
21331
|
let lastPosted = 0;
|
|
20433
21332
|
const measure = () => {
|
|
@@ -20471,7 +21370,7 @@ function OhhwellsBridge() {
|
|
|
20471
21370
|
window.removeEventListener("resize", handleResize);
|
|
20472
21371
|
};
|
|
20473
21372
|
}, [pathname, isEditMode, postToParent2]);
|
|
20474
|
-
|
|
21373
|
+
useEffect15(() => {
|
|
20475
21374
|
if (!subdomainFromQuery || isEditMode) return;
|
|
20476
21375
|
const handleClick = (e) => {
|
|
20477
21376
|
const anchor = e.target.closest("a");
|
|
@@ -20487,7 +21386,7 @@ function OhhwellsBridge() {
|
|
|
20487
21386
|
document.addEventListener("click", handleClick, true);
|
|
20488
21387
|
return () => document.removeEventListener("click", handleClick, true);
|
|
20489
21388
|
}, [subdomainFromQuery, isEditMode, router]);
|
|
20490
|
-
|
|
21389
|
+
useEffect15(() => {
|
|
20491
21390
|
if (!isEditMode) {
|
|
20492
21391
|
editStylesRef.current?.base.remove();
|
|
20493
21392
|
editStylesRef.current?.forceHover.remove();
|
|
@@ -20713,11 +21612,11 @@ function OhhwellsBridge() {
|
|
|
20713
21612
|
footer [data-ohw-href-key] [data-ohw-editable][contenteditable],
|
|
20714
21613
|
footer [data-ohw-href-key] [data-ohw-editable][contenteditable] * {
|
|
20715
21614
|
outline: none !important;
|
|
20716
|
-
caret-color: ${
|
|
21615
|
+
caret-color: ${PRIMARY5} !important;
|
|
20717
21616
|
cursor: text !important;
|
|
20718
21617
|
}
|
|
20719
21618
|
[data-ohw-editable][contenteditable]::selection,
|
|
20720
|
-
[data-ohw-editable][contenteditable] *::selection { background: ${
|
|
21619
|
+
[data-ohw-editable][contenteditable] *::selection { background: ${PRIMARY5}59 !important; }
|
|
20721
21620
|
[data-ohw-editable-state], [data-ohw-editable-state] * { pointer-events: none !important; }
|
|
20722
21621
|
[data-ohw-editable-state][data-ohw-active-state] [data-ohw-editable] { pointer-events: auto !important; }
|
|
20723
21622
|
[data-ohw-editable-state][data-ohw-active-state][data-ohw-editable] { pointer-events: auto !important; }
|
|
@@ -22497,6 +23396,7 @@ function OhhwellsBridge() {
|
|
|
22497
23396
|
deselectRef.current();
|
|
22498
23397
|
clearMediaSelectionRef.current();
|
|
22499
23398
|
};
|
|
23399
|
+
clearInteractionChromeRef.current = clearInteractionChrome;
|
|
22500
23400
|
const applyTreeToLocalState = (payload) => {
|
|
22501
23401
|
clearInteractionChrome();
|
|
22502
23402
|
const previous = aiSectionsRef.current;
|
|
@@ -23551,7 +24451,7 @@ function OhhwellsBridge() {
|
|
|
23551
24451
|
if (imageShowTimerRef.current) clearTimeout(imageShowTimerRef.current);
|
|
23552
24452
|
};
|
|
23553
24453
|
}, [isEditMode, refreshStateRules]);
|
|
23554
|
-
|
|
24454
|
+
useEffect15(() => {
|
|
23555
24455
|
if (!isEditMode) return;
|
|
23556
24456
|
const THRESHOLD = 10;
|
|
23557
24457
|
const resolveWasSelected = (el) => {
|
|
@@ -23707,7 +24607,7 @@ function OhhwellsBridge() {
|
|
|
23707
24607
|
unlockFooterDragInteraction();
|
|
23708
24608
|
};
|
|
23709
24609
|
}, [isEditMode]);
|
|
23710
|
-
|
|
24610
|
+
useEffect15(() => {
|
|
23711
24611
|
const handler = (e) => {
|
|
23712
24612
|
if (e.data?.type !== "ow:request-schedule-config") return;
|
|
23713
24613
|
const insertAfterVal = e.data.insertAfter;
|
|
@@ -23723,7 +24623,7 @@ function OhhwellsBridge() {
|
|
|
23723
24623
|
window.addEventListener("message", handler);
|
|
23724
24624
|
return () => window.removeEventListener("message", handler);
|
|
23725
24625
|
}, [processConfigRequest]);
|
|
23726
|
-
|
|
24626
|
+
useEffect15(() => {
|
|
23727
24627
|
if (!isEditMode) return;
|
|
23728
24628
|
document.querySelectorAll("[data-ohw-active-state]").forEach((el) => {
|
|
23729
24629
|
el.removeAttribute("data-ohw-active-state");
|
|
@@ -23747,7 +24647,7 @@ function OhhwellsBridge() {
|
|
|
23747
24647
|
postToParent2({
|
|
23748
24648
|
type: "ow:ready",
|
|
23749
24649
|
version: "1",
|
|
23750
|
-
bridgeVersion: "0.1.
|
|
24650
|
+
bridgeVersion: "0.1.119",
|
|
23751
24651
|
path: pathname,
|
|
23752
24652
|
nodes: collectEditableNodes(editContentRef.current),
|
|
23753
24653
|
sections
|
|
@@ -23759,13 +24659,13 @@ function OhhwellsBridge() {
|
|
|
23759
24659
|
clearTimeout(timer);
|
|
23760
24660
|
};
|
|
23761
24661
|
}, [pathname, isEditMode, refreshStateRules, postToParent2]);
|
|
23762
|
-
|
|
24662
|
+
useEffect15(() => {
|
|
23763
24663
|
scrollToHashSectionWhenReady();
|
|
23764
24664
|
const onHashChange = () => scrollToHashSectionWhenReady();
|
|
23765
24665
|
window.addEventListener("hashchange", onHashChange);
|
|
23766
24666
|
return () => window.removeEventListener("hashchange", onHashChange);
|
|
23767
24667
|
}, [pathname]);
|
|
23768
|
-
const handleCommand =
|
|
24668
|
+
const handleCommand = useCallback10((cmd) => {
|
|
23769
24669
|
const el = activeElRef.current;
|
|
23770
24670
|
const selBefore = window.getSelection();
|
|
23771
24671
|
let savedOffsets = null;
|
|
@@ -23801,7 +24701,7 @@ function OhhwellsBridge() {
|
|
|
23801
24701
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
23802
24702
|
refreshActiveCommandsRef.current();
|
|
23803
24703
|
}, []);
|
|
23804
|
-
|
|
24704
|
+
useEffect15(() => {
|
|
23805
24705
|
const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
|
|
23806
24706
|
if (!session || !logoSizeDraft) return;
|
|
23807
24707
|
const onPanelAction = (e) => {
|
|
@@ -23839,7 +24739,7 @@ function OhhwellsBridge() {
|
|
|
23839
24739
|
window.addEventListener("message", onPanelAction);
|
|
23840
24740
|
return () => window.removeEventListener("message", onPanelAction);
|
|
23841
24741
|
}, [floatingPanel, logoSizeDraft, editorViewport, persistLogoSizeDraft, closeFloatingPanelAndDeselect]);
|
|
23842
|
-
const handleStateChange =
|
|
24742
|
+
const handleStateChange = useCallback10((state) => {
|
|
23843
24743
|
if (!activeStateElRef.current) return;
|
|
23844
24744
|
const el = activeStateElRef.current;
|
|
23845
24745
|
if (state === "Default") {
|
|
@@ -23852,7 +24752,7 @@ function OhhwellsBridge() {
|
|
|
23852
24752
|
}
|
|
23853
24753
|
setToggleState((prev) => prev ? { ...prev, activeState: state } : null);
|
|
23854
24754
|
}, [deactivate]);
|
|
23855
|
-
const reselectAfterLinkPopover =
|
|
24755
|
+
const reselectAfterLinkPopover = useCallback10(
|
|
23856
24756
|
(hrefKey) => {
|
|
23857
24757
|
requestAnimationFrame(() => {
|
|
23858
24758
|
const el = resolveHrefKeyElement(hrefKey);
|
|
@@ -23861,7 +24761,7 @@ function OhhwellsBridge() {
|
|
|
23861
24761
|
},
|
|
23862
24762
|
[resolveHrefKeyElement]
|
|
23863
24763
|
);
|
|
23864
|
-
const closeLinkPopover =
|
|
24764
|
+
const closeLinkPopover = useCallback10(() => {
|
|
23865
24765
|
const session = linkPopoverSessionRef.current;
|
|
23866
24766
|
addNavAfterAnchorRef.current = null;
|
|
23867
24767
|
setLinkPopover(null);
|
|
@@ -23869,9 +24769,9 @@ function OhhwellsBridge() {
|
|
|
23869
24769
|
reselectAfterLinkPopover(session.key);
|
|
23870
24770
|
}
|
|
23871
24771
|
}, [reselectAfterLinkPopover]);
|
|
23872
|
-
const closeLinkPopoverRef =
|
|
24772
|
+
const closeLinkPopoverRef = useRef12(closeLinkPopover);
|
|
23873
24773
|
closeLinkPopoverRef.current = closeLinkPopover;
|
|
23874
|
-
const openLinkPopoverForActive =
|
|
24774
|
+
const openLinkPopoverForActive = useCallback10(() => {
|
|
23875
24775
|
const hrefCtx = getHrefKeyFromElement(activeElRef.current);
|
|
23876
24776
|
if (!hrefCtx) return;
|
|
23877
24777
|
bumpLinkPopoverGrace();
|
|
@@ -23882,7 +24782,7 @@ function OhhwellsBridge() {
|
|
|
23882
24782
|
});
|
|
23883
24783
|
deactivate();
|
|
23884
24784
|
}, [deactivate]);
|
|
23885
|
-
const openLinkPopoverForSelected =
|
|
24785
|
+
const openLinkPopoverForSelected = useCallback10(() => {
|
|
23886
24786
|
const anchor = selectedElRef.current;
|
|
23887
24787
|
if (!anchor) return;
|
|
23888
24788
|
const key = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -23899,7 +24799,7 @@ function OhhwellsBridge() {
|
|
|
23899
24799
|
});
|
|
23900
24800
|
deselect();
|
|
23901
24801
|
}, [deselect]);
|
|
23902
|
-
const handleSelectParent =
|
|
24802
|
+
const handleSelectParent = useCallback10(() => {
|
|
23903
24803
|
const selected = selectedElRef.current;
|
|
23904
24804
|
if (!selected) return;
|
|
23905
24805
|
if (toolbarVariantRef.current === "select-frame") {
|
|
@@ -23926,7 +24826,7 @@ function OhhwellsBridge() {
|
|
|
23926
24826
|
}
|
|
23927
24827
|
deselectRef.current();
|
|
23928
24828
|
}, []);
|
|
23929
|
-
const handleDuplicateSelected =
|
|
24829
|
+
const handleDuplicateSelected = useCallback10(() => {
|
|
23930
24830
|
const selected = selectedElRef.current;
|
|
23931
24831
|
if (!selected || !isNavigationItem2(selected)) return;
|
|
23932
24832
|
const hrefKey = selected.getAttribute("data-ohw-href-key");
|
|
@@ -24059,7 +24959,7 @@ function OhhwellsBridge() {
|
|
|
24059
24959
|
});
|
|
24060
24960
|
}
|
|
24061
24961
|
}, [postToParent2]);
|
|
24062
|
-
const runPendingDeleteUndo =
|
|
24962
|
+
const runPendingDeleteUndo = useCallback10(() => {
|
|
24063
24963
|
const pending = pendingDeleteUndoRef.current;
|
|
24064
24964
|
if (!pending) return false;
|
|
24065
24965
|
pendingDeleteUndoRef.current = null;
|
|
@@ -24067,7 +24967,7 @@ function OhhwellsBridge() {
|
|
|
24067
24967
|
enforceLinkHrefs();
|
|
24068
24968
|
return true;
|
|
24069
24969
|
}, []);
|
|
24070
|
-
const handleDeleteSelected =
|
|
24970
|
+
const handleDeleteSelected = useCallback10(() => {
|
|
24071
24971
|
const selected = selectedElRef.current;
|
|
24072
24972
|
if (!selected) return false;
|
|
24073
24973
|
return deleteSelectedNavFooterItem({
|
|
@@ -24088,7 +24988,7 @@ function OhhwellsBridge() {
|
|
|
24088
24988
|
}, [postToParent2]);
|
|
24089
24989
|
handleDeleteSelectedRef.current = handleDeleteSelected;
|
|
24090
24990
|
runPendingDeleteUndoRef.current = runPendingDeleteUndo;
|
|
24091
|
-
const handleLinkPopoverSubmit =
|
|
24991
|
+
const handleLinkPopoverSubmit = useCallback10(
|
|
24092
24992
|
(target) => {
|
|
24093
24993
|
const session = linkPopoverSessionRef.current;
|
|
24094
24994
|
if (!session) return;
|
|
@@ -24154,14 +25054,14 @@ function OhhwellsBridge() {
|
|
|
24154
25054
|
const showEditLink = toolbarShowEditLink;
|
|
24155
25055
|
const currentSections = sectionsByPath[pathname] ?? [];
|
|
24156
25056
|
linkPopoverOpenRef.current = linkPopover !== null;
|
|
24157
|
-
const handleMediaSelect =
|
|
25057
|
+
const handleMediaSelect = useCallback10((key) => {
|
|
24158
25058
|
const el = hoveredImageRef.current?.dataset.ohwKey === key ? hoveredImageRef.current : Array.from(document.querySelectorAll(MEDIA_SELECTOR)).find(
|
|
24159
25059
|
(m) => (m.dataset.ohwKey ?? "") === key
|
|
24160
25060
|
) ?? null;
|
|
24161
25061
|
if (!el) return;
|
|
24162
25062
|
selectMediaElementRef.current(el);
|
|
24163
25063
|
}, []);
|
|
24164
|
-
const handleMediaReplace =
|
|
25064
|
+
const handleMediaReplace = useCallback10(
|
|
24165
25065
|
(key) => {
|
|
24166
25066
|
postToParent2({
|
|
24167
25067
|
type: "ow:image-pick",
|
|
@@ -24171,13 +25071,13 @@ function OhhwellsBridge() {
|
|
|
24171
25071
|
},
|
|
24172
25072
|
[postToParent2, mediaHover?.elementType, selectedMedia?.elementType]
|
|
24173
25073
|
);
|
|
24174
|
-
const handleEditCarousel =
|
|
25074
|
+
const handleEditCarousel = useCallback10(
|
|
24175
25075
|
(key) => {
|
|
24176
25076
|
postToParent2({ type: "ow:carousel-open", key, images: readCarouselValue(key) });
|
|
24177
25077
|
},
|
|
24178
25078
|
[postToParent2]
|
|
24179
25079
|
);
|
|
24180
|
-
const handleMediaFadeOutComplete =
|
|
25080
|
+
const handleMediaFadeOutComplete = useCallback10((key) => {
|
|
24181
25081
|
setUploadingRects((prev) => {
|
|
24182
25082
|
if (!(key in prev)) return prev;
|
|
24183
25083
|
const next = { ...prev };
|
|
@@ -24185,7 +25085,7 @@ function OhhwellsBridge() {
|
|
|
24185
25085
|
return next;
|
|
24186
25086
|
});
|
|
24187
25087
|
}, []);
|
|
24188
|
-
const handleVideoSettingsChange =
|
|
25088
|
+
const handleVideoSettingsChange = useCallback10(
|
|
24189
25089
|
(key, settings) => {
|
|
24190
25090
|
document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
|
|
24191
25091
|
const video = getVideoEl2(el);
|
|
@@ -24207,14 +25107,14 @@ function OhhwellsBridge() {
|
|
|
24207
25107
|
},
|
|
24208
25108
|
[postToParent2]
|
|
24209
25109
|
);
|
|
24210
|
-
return /* @__PURE__ */
|
|
24211
|
-
/* @__PURE__ */
|
|
24212
|
-
/* @__PURE__ */
|
|
24213
|
-
subdomain && !isEditMode && showBranding && /* @__PURE__ */
|
|
25110
|
+
return /* @__PURE__ */ jsxs22(Fragment10, { children: [
|
|
25111
|
+
/* @__PURE__ */ jsx35("div", { id: "ohw-loader", suppressHydrationWarning: true, style: { ...OHW_LOADER_STYLE, display: "none" }, children: /* @__PURE__ */ jsx35(OhwLoaderSpinner, {}) }),
|
|
25112
|
+
/* @__PURE__ */ jsx35("script", { suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: OHW_LOADER_PREHYDRATE_SCRIPT } }),
|
|
25113
|
+
subdomain && !isEditMode && showBranding && /* @__PURE__ */ jsx35(MadeWithOhhWells, {}),
|
|
24214
25114
|
bridgeRoot ? createPortal3(
|
|
24215
|
-
/* @__PURE__ */
|
|
24216
|
-
/* @__PURE__ */
|
|
24217
|
-
isEditMode && /* @__PURE__ */
|
|
25115
|
+
/* @__PURE__ */ jsxs22(Fragment10, { children: [
|
|
25116
|
+
/* @__PURE__ */ jsx35("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
|
|
25117
|
+
isEditMode && /* @__PURE__ */ jsx35(
|
|
24218
25118
|
AiSectionOverlay,
|
|
24219
25119
|
{
|
|
24220
25120
|
postToParent: postToParent2,
|
|
@@ -24222,7 +25122,16 @@ function OhhwellsBridge() {
|
|
|
24222
25122
|
onSelectionChange: handleAiSectionSelectionChange
|
|
24223
25123
|
}
|
|
24224
25124
|
),
|
|
24225
|
-
isEditMode && /* @__PURE__ */
|
|
25125
|
+
isEditMode && /* @__PURE__ */ jsx35(
|
|
25126
|
+
AiMediaStripOverlay,
|
|
25127
|
+
{
|
|
25128
|
+
postToParent: postToParent2,
|
|
25129
|
+
aiSectionsRef,
|
|
25130
|
+
applyTreeLocalRef,
|
|
25131
|
+
clearInteractionChromeRef
|
|
25132
|
+
}
|
|
25133
|
+
),
|
|
25134
|
+
isEditMode && /* @__PURE__ */ jsx35(
|
|
24226
25135
|
AiPricingCardOverlay,
|
|
24227
25136
|
{
|
|
24228
25137
|
postToParent: postToParent2,
|
|
@@ -24230,12 +25139,12 @@ function OhhwellsBridge() {
|
|
|
24230
25139
|
applyTreeLocalRef
|
|
24231
25140
|
}
|
|
24232
25141
|
),
|
|
24233
|
-
isSectionDragging && sectionDropSlots.map((slot, i) => /* @__PURE__ */
|
|
25142
|
+
isSectionDragging && sectionDropSlots.map((slot, i) => /* @__PURE__ */ jsx35(
|
|
24234
25143
|
"div",
|
|
24235
25144
|
{
|
|
24236
25145
|
className: "pointer-events-none fixed z-2147483646",
|
|
24237
25146
|
style: { left: slot.left, top: slot.y, width: slot.width, height: 3, transform: "translateY(-50%)" },
|
|
24238
|
-
children: /* @__PURE__ */
|
|
25147
|
+
children: /* @__PURE__ */ jsx35(
|
|
24239
25148
|
DropIndicator,
|
|
24240
25149
|
{
|
|
24241
25150
|
direction: "horizontal",
|
|
@@ -24246,7 +25155,7 @@ function OhhwellsBridge() {
|
|
|
24246
25155
|
},
|
|
24247
25156
|
`section-drop-${slot.insertIndex}-${i}`
|
|
24248
25157
|
)),
|
|
24249
|
-
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */
|
|
25158
|
+
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ jsx35(
|
|
24250
25159
|
MediaOverlay,
|
|
24251
25160
|
{
|
|
24252
25161
|
hover: { key, rect, elementType: "image", isDragOver: false, hasTextOverlap: false },
|
|
@@ -24257,7 +25166,7 @@ function OhhwellsBridge() {
|
|
|
24257
25166
|
},
|
|
24258
25167
|
`uploading-${key}`
|
|
24259
25168
|
)),
|
|
24260
|
-
mediaHover && !(mediaHover.key in uploadingRects) && mediaHover.key !== selectedMedia?.key && /* @__PURE__ */
|
|
25169
|
+
mediaHover && !(mediaHover.key in uploadingRects) && mediaHover.key !== selectedMedia?.key && /* @__PURE__ */ jsx35(
|
|
24261
25170
|
MediaOverlay,
|
|
24262
25171
|
{
|
|
24263
25172
|
hover: mediaHover,
|
|
@@ -24268,7 +25177,7 @@ function OhhwellsBridge() {
|
|
|
24268
25177
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
24269
25178
|
}
|
|
24270
25179
|
),
|
|
24271
|
-
selectedMedia && !(selectedMedia.key in uploadingRects) && !linkPopover && /* @__PURE__ */
|
|
25180
|
+
selectedMedia && !(selectedMedia.key in uploadingRects) && !linkPopover && /* @__PURE__ */ jsx35(
|
|
24272
25181
|
MediaOverlay,
|
|
24273
25182
|
{
|
|
24274
25183
|
hover: selectedMedia,
|
|
@@ -24280,7 +25189,7 @@ function OhhwellsBridge() {
|
|
|
24280
25189
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
24281
25190
|
}
|
|
24282
25191
|
),
|
|
24283
|
-
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */
|
|
25192
|
+
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ jsx35(
|
|
24284
25193
|
CarouselOverlay,
|
|
24285
25194
|
{
|
|
24286
25195
|
hover: carouselHover,
|
|
@@ -24288,10 +25197,10 @@ function OhhwellsBridge() {
|
|
|
24288
25197
|
cueOnly: !!carouselHover.fullBleedSectionId && carouselHover.fullBleedSectionId !== selectedAiSectionId
|
|
24289
25198
|
}
|
|
24290
25199
|
),
|
|
24291
|
-
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */
|
|
24292
|
-
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */
|
|
24293
|
-
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */
|
|
24294
|
-
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */
|
|
25200
|
+
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ jsx35(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
|
|
25201
|
+
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ jsx35(ItemInteractionLayer, { rect, state: "sibling-hint" }, `sibling-hint-${i}`)),
|
|
25202
|
+
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */ jsx35(ItemInteractionLayer, { rect: draggedItemRect, state: "dragging" }),
|
|
25203
|
+
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ jsx35(
|
|
24295
25204
|
"div",
|
|
24296
25205
|
{
|
|
24297
25206
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -24301,7 +25210,7 @@ function OhhwellsBridge() {
|
|
|
24301
25210
|
width: slot.width,
|
|
24302
25211
|
height: slot.height
|
|
24303
25212
|
},
|
|
24304
|
-
children: /* @__PURE__ */
|
|
25213
|
+
children: /* @__PURE__ */ jsx35(
|
|
24305
25214
|
DropIndicator,
|
|
24306
25215
|
{
|
|
24307
25216
|
direction: slot.direction,
|
|
@@ -24312,7 +25221,7 @@ function OhhwellsBridge() {
|
|
|
24312
25221
|
},
|
|
24313
25222
|
`footer-drop-${slot.direction}-${slot.columnIndex}-${slot.insertIndex}-${i}`
|
|
24314
25223
|
)),
|
|
24315
|
-
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */
|
|
25224
|
+
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ jsx35(
|
|
24316
25225
|
"div",
|
|
24317
25226
|
{
|
|
24318
25227
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -24322,7 +25231,7 @@ function OhhwellsBridge() {
|
|
|
24322
25231
|
width: slot.width,
|
|
24323
25232
|
height: slot.height
|
|
24324
25233
|
},
|
|
24325
|
-
children: /* @__PURE__ */
|
|
25234
|
+
children: /* @__PURE__ */ jsx35(
|
|
24326
25235
|
DropIndicator,
|
|
24327
25236
|
{
|
|
24328
25237
|
direction: slot.direction,
|
|
@@ -24333,10 +25242,10 @@ function OhhwellsBridge() {
|
|
|
24333
25242
|
},
|
|
24334
25243
|
`nav-drop-${slot.direction}-${slot.parentId ?? "root"}-${slot.insertIndex}-${i}`
|
|
24335
25244
|
)),
|
|
24336
|
-
hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */
|
|
24337
|
-
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */
|
|
24338
|
-
hoveredTextRect && !hoveredNavContainerRect && !hoveredItemRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */
|
|
24339
|
-
formPickRect && !isItemDragging && /* @__PURE__ */
|
|
25245
|
+
hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ jsx35(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
|
|
25246
|
+
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ jsx35(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
|
|
25247
|
+
hoveredTextRect && !hoveredNavContainerRect && !hoveredItemRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ jsx35(ItemInteractionLayer, { rect: hoveredTextRect, state: "hover" }),
|
|
25248
|
+
formPickRect && !isItemDragging && /* @__PURE__ */ jsx35(
|
|
24340
25249
|
ItemInteractionLayer,
|
|
24341
25250
|
{
|
|
24342
25251
|
rect: formPickRect,
|
|
@@ -24344,13 +25253,13 @@ function OhhwellsBridge() {
|
|
|
24344
25253
|
itemDragSurface: false,
|
|
24345
25254
|
toolbarAlign: "left",
|
|
24346
25255
|
chromeGap: 24,
|
|
24347
|
-
toolbar: fieldPickRect ? void 0 : /* @__PURE__ */
|
|
25256
|
+
toolbar: fieldPickRect ? void 0 : /* @__PURE__ */ jsxs22(
|
|
24348
25257
|
"div",
|
|
24349
25258
|
{
|
|
24350
25259
|
"data-ohw-form-toolbar": "",
|
|
24351
25260
|
className: "pointer-events-auto flex items-center gap-0.5 whitespace-nowrap rounded-lg border border-border bg-background p-1 shadow-md",
|
|
24352
25261
|
children: [
|
|
24353
|
-
/* @__PURE__ */
|
|
25262
|
+
/* @__PURE__ */ jsx35(
|
|
24354
25263
|
"button",
|
|
24355
25264
|
{
|
|
24356
25265
|
type: "button",
|
|
@@ -24358,11 +25267,11 @@ function OhhwellsBridge() {
|
|
|
24358
25267
|
className: "flex h-7 w-7 items-center justify-center rounded-md text-foreground transition-colors hover:bg-muted/80",
|
|
24359
25268
|
onClick: () => setFieldTypePickerOpen((open) => !open),
|
|
24360
25269
|
"data-ohw-add-field": "",
|
|
24361
|
-
children: /* @__PURE__ */
|
|
25270
|
+
children: /* @__PURE__ */ jsx35(Plus4, { size: 15, "aria-hidden": true })
|
|
24362
25271
|
}
|
|
24363
25272
|
),
|
|
24364
|
-
/* @__PURE__ */
|
|
24365
|
-
/* @__PURE__ */
|
|
25273
|
+
/* @__PURE__ */ jsx35("div", { className: "mx-0.5 h-5 w-px bg-border" }),
|
|
25274
|
+
/* @__PURE__ */ jsxs22(
|
|
24366
25275
|
"button",
|
|
24367
25276
|
{
|
|
24368
25277
|
type: "button",
|
|
@@ -24378,11 +25287,11 @@ function OhhwellsBridge() {
|
|
|
24378
25287
|
});
|
|
24379
25288
|
},
|
|
24380
25289
|
children: [
|
|
24381
|
-
/* @__PURE__ */
|
|
25290
|
+
/* @__PURE__ */ jsx35(Settings, { size: 14, "aria-hidden": true }),
|
|
24382
25291
|
"Form settings",
|
|
24383
25292
|
formPickCount ? (
|
|
24384
25293
|
// Counter pill, per the design — not a text suffix.
|
|
24385
|
-
/* @__PURE__ */
|
|
25294
|
+
/* @__PURE__ */ jsx35(
|
|
24386
25295
|
"span",
|
|
24387
25296
|
{
|
|
24388
25297
|
"data-ohw-form-count": "",
|
|
@@ -24394,8 +25303,8 @@ function OhhwellsBridge() {
|
|
|
24394
25303
|
]
|
|
24395
25304
|
}
|
|
24396
25305
|
),
|
|
24397
|
-
/* @__PURE__ */
|
|
24398
|
-
/* @__PURE__ */
|
|
25306
|
+
/* @__PURE__ */ jsx35("div", { className: "mx-0.5 h-5 w-px bg-border" }),
|
|
25307
|
+
/* @__PURE__ */ jsx35("div", { className: "flex items-center rounded-md bg-muted/70 p-0.5", children: ["default", "success"].map((state) => /* @__PURE__ */ jsx35(
|
|
24399
25308
|
"button",
|
|
24400
25309
|
{
|
|
24401
25310
|
type: "button",
|
|
@@ -24426,7 +25335,7 @@ function OhhwellsBridge() {
|
|
|
24426
25335
|
)
|
|
24427
25336
|
}
|
|
24428
25337
|
),
|
|
24429
|
-
formHoverRect && !isItemDragging && /* @__PURE__ */
|
|
25338
|
+
formHoverRect && !isItemDragging && /* @__PURE__ */ jsx35(
|
|
24430
25339
|
ItemInteractionLayer,
|
|
24431
25340
|
{
|
|
24432
25341
|
rect: formHoverRect,
|
|
@@ -24434,7 +25343,7 @@ function OhhwellsBridge() {
|
|
|
24434
25343
|
chromeGap: formHoverElRef.current && getFieldWrapper(formHoverElRef.current) ? 8 : 24
|
|
24435
25344
|
}
|
|
24436
25345
|
),
|
|
24437
|
-
fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */
|
|
25346
|
+
fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ jsx35(
|
|
24438
25347
|
ItemInteractionLayer,
|
|
24439
25348
|
{
|
|
24440
25349
|
rect: fieldPickRect,
|
|
@@ -24446,7 +25355,7 @@ function OhhwellsBridge() {
|
|
|
24446
25355
|
dragHandleLabel: "Reorder field",
|
|
24447
25356
|
onDragHandleDragStart: handleFieldDragStart,
|
|
24448
25357
|
onDragHandleDragEnd: handleFieldDragEnd,
|
|
24449
|
-
toolbar: /* @__PURE__ */
|
|
25358
|
+
toolbar: /* @__PURE__ */ jsx35(
|
|
24450
25359
|
FormFieldToolbar,
|
|
24451
25360
|
{
|
|
24452
25361
|
type: fieldPickState.type,
|
|
@@ -24459,12 +25368,12 @@ function OhhwellsBridge() {
|
|
|
24459
25368
|
)
|
|
24460
25369
|
}
|
|
24461
25370
|
),
|
|
24462
|
-
fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */
|
|
25371
|
+
fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */ jsx35(
|
|
24463
25372
|
"div",
|
|
24464
25373
|
{
|
|
24465
25374
|
className: "pointer-events-none fixed z-[2147483644]",
|
|
24466
25375
|
style: { top: slot.top, left: slot.left, width: slot.width },
|
|
24467
|
-
children: /* @__PURE__ */
|
|
25376
|
+
children: /* @__PURE__ */ jsx35(
|
|
24468
25377
|
DropIndicator,
|
|
24469
25378
|
{
|
|
24470
25379
|
direction: "horizontal",
|
|
@@ -24477,7 +25386,7 @@ function OhhwellsBridge() {
|
|
|
24477
25386
|
)) : null,
|
|
24478
25387
|
fieldTypePickerOpen && formPickRect ? (() => {
|
|
24479
25388
|
const toolbar = document.querySelector("[data-ohw-form-toolbar]")?.getBoundingClientRect();
|
|
24480
|
-
return /* @__PURE__ */
|
|
25389
|
+
return /* @__PURE__ */ jsx35(
|
|
24481
25390
|
"div",
|
|
24482
25391
|
{
|
|
24483
25392
|
className: "pointer-events-none fixed z-[2147483645]",
|
|
@@ -24485,12 +25394,12 @@ function OhhwellsBridge() {
|
|
|
24485
25394
|
top: toolbar ? toolbar.bottom + 6 : formPickRect.top + 16,
|
|
24486
25395
|
left: toolbar ? toolbar.left : formPickRect.left + 24
|
|
24487
25396
|
},
|
|
24488
|
-
children: /* @__PURE__ */
|
|
25397
|
+
children: /* @__PURE__ */ jsx35(FieldTypePicker, { onPick: handleAddField })
|
|
24489
25398
|
}
|
|
24490
25399
|
);
|
|
24491
25400
|
})() : null,
|
|
24492
|
-
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */
|
|
24493
|
-
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */
|
|
25401
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ jsx35(NavbarContainerChrome, { rect: toolbarRect, onAdd: handleAddTopLevelNavItem }),
|
|
25402
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ jsx35(
|
|
24494
25403
|
FooterContainerChrome,
|
|
24495
25404
|
{
|
|
24496
25405
|
rect: toolbarRect,
|
|
@@ -24498,7 +25407,7 @@ function OhhwellsBridge() {
|
|
|
24498
25407
|
addDisabled: !canAddFooterColumn()
|
|
24499
25408
|
}
|
|
24500
25409
|
),
|
|
24501
|
-
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */
|
|
25410
|
+
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */ jsx35(
|
|
24502
25411
|
ItemInteractionLayer,
|
|
24503
25412
|
{
|
|
24504
25413
|
rect: isItemDragging && draggedItemRect && (footerDragRef.current?.wasSelected || navDragRef.current?.wasSelected) ? draggedItemRect : toolbarRect,
|
|
@@ -24514,7 +25423,7 @@ function OhhwellsBridge() {
|
|
|
24514
25423
|
onItemPointerDown: toolbarVariant === "logo" ? void 0 : handleItemChromePointerDown,
|
|
24515
25424
|
onItemClick: toolbarVariant === "logo" ? void 0 : handleItemChromeClick,
|
|
24516
25425
|
itemDragSurface: toolbarVariant !== "logo" && !isFooterFrameSelection && !selectedIsSocialsRow,
|
|
24517
|
-
toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */
|
|
25426
|
+
toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */ jsx35(
|
|
24518
25427
|
ItemActionToolbar,
|
|
24519
25428
|
{
|
|
24520
25429
|
onEditLink: openLinkPopoverForSelected,
|
|
@@ -24558,8 +25467,8 @@ function OhhwellsBridge() {
|
|
|
24558
25467
|
) : void 0
|
|
24559
25468
|
}
|
|
24560
25469
|
),
|
|
24561
|
-
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && !isRectOutsideClip(toolbarRect, getIframeVisibleClip(parentScrollRef.current)) && /* @__PURE__ */
|
|
24562
|
-
/* @__PURE__ */
|
|
25470
|
+
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && !isRectOutsideClip(toolbarRect, getIframeVisibleClip(parentScrollRef.current)) && /* @__PURE__ */ jsxs22(Fragment10, { children: [
|
|
25471
|
+
/* @__PURE__ */ jsx35(
|
|
24563
25472
|
EditGlowChrome,
|
|
24564
25473
|
{
|
|
24565
25474
|
rect: toolbarRect,
|
|
@@ -24569,7 +25478,7 @@ function OhhwellsBridge() {
|
|
|
24569
25478
|
hideHandle: isItemDragging
|
|
24570
25479
|
}
|
|
24571
25480
|
),
|
|
24572
|
-
/* @__PURE__ */
|
|
25481
|
+
/* @__PURE__ */ jsx35(
|
|
24573
25482
|
FloatingToolbar,
|
|
24574
25483
|
{
|
|
24575
25484
|
rect: toolbarRect,
|
|
@@ -24582,7 +25491,7 @@ function OhhwellsBridge() {
|
|
|
24582
25491
|
}
|
|
24583
25492
|
)
|
|
24584
25493
|
] }),
|
|
24585
|
-
maxBadge && /* @__PURE__ */
|
|
25494
|
+
maxBadge && /* @__PURE__ */ jsxs22(
|
|
24586
25495
|
"div",
|
|
24587
25496
|
{
|
|
24588
25497
|
"data-ohw-max-badge": "",
|
|
@@ -24608,7 +25517,7 @@ function OhhwellsBridge() {
|
|
|
24608
25517
|
]
|
|
24609
25518
|
}
|
|
24610
25519
|
),
|
|
24611
|
-
toggleState && !linkPopover && /* @__PURE__ */
|
|
25520
|
+
toggleState && !linkPopover && /* @__PURE__ */ jsx35(
|
|
24612
25521
|
StateToggle,
|
|
24613
25522
|
{
|
|
24614
25523
|
rect: toggleState.rect,
|
|
@@ -24617,15 +25526,15 @@ function OhhwellsBridge() {
|
|
|
24617
25526
|
onStateChange: handleStateChange
|
|
24618
25527
|
}
|
|
24619
25528
|
),
|
|
24620
|
-
sectionGap && !linkPopover && /* @__PURE__ */
|
|
25529
|
+
sectionGap && !linkPopover && /* @__PURE__ */ jsxs22(
|
|
24621
25530
|
"div",
|
|
24622
25531
|
{
|
|
24623
25532
|
"data-ohw-section-insert-line": "",
|
|
24624
25533
|
className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
|
|
24625
25534
|
style: { top: sectionGap.y, transform: "translateY(-50%)" },
|
|
24626
25535
|
children: [
|
|
24627
|
-
/* @__PURE__ */
|
|
24628
|
-
/* @__PURE__ */
|
|
25536
|
+
/* @__PURE__ */ jsx35("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } }),
|
|
25537
|
+
/* @__PURE__ */ jsx35(
|
|
24629
25538
|
Badge,
|
|
24630
25539
|
{
|
|
24631
25540
|
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",
|
|
@@ -24642,11 +25551,11 @@ function OhhwellsBridge() {
|
|
|
24642
25551
|
children: "Add Section"
|
|
24643
25552
|
}
|
|
24644
25553
|
),
|
|
24645
|
-
/* @__PURE__ */
|
|
25554
|
+
/* @__PURE__ */ jsx35("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } })
|
|
24646
25555
|
]
|
|
24647
25556
|
}
|
|
24648
25557
|
),
|
|
24649
|
-
linkPopover && dialogPortalContainer ? /* @__PURE__ */
|
|
25558
|
+
linkPopover && dialogPortalContainer ? /* @__PURE__ */ jsx35(
|
|
24650
25559
|
LinkPopover,
|
|
24651
25560
|
{
|
|
24652
25561
|
panelRef: linkPopoverPanelRef,
|
|
@@ -24663,7 +25572,7 @@ function OhhwellsBridge() {
|
|
|
24663
25572
|
},
|
|
24664
25573
|
linkPopover.key
|
|
24665
25574
|
) : null,
|
|
24666
|
-
floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */
|
|
25575
|
+
floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */ jsx35(
|
|
24667
25576
|
FloatingPanel,
|
|
24668
25577
|
{
|
|
24669
25578
|
open: true,
|
|
@@ -24673,7 +25582,7 @@ function OhhwellsBridge() {
|
|
|
24673
25582
|
onPositionChange: setFloatingPanelPos,
|
|
24674
25583
|
parentScroll: parentScrollSnap ?? parentScrollRef.current,
|
|
24675
25584
|
onClose: closeFloatingPanelOnly,
|
|
24676
|
-
children: /* @__PURE__ */
|
|
25585
|
+
children: /* @__PURE__ */ jsx35(
|
|
24677
25586
|
SocialsDisplayPanel,
|
|
24678
25587
|
{
|
|
24679
25588
|
display: socialsDisplayFor(floatingPanel.row, editContentRef.current),
|