@ohhwells/bridge 0.1.119 → 0.1.121
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 +1608 -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 +1632 -675
- 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
|
|
|
@@ -428,6 +428,40 @@ function applyBrandToDom(kit) {
|
|
|
428
428
|
}
|
|
429
429
|
}
|
|
430
430
|
|
|
431
|
+
// src/lib/custom-code.ts
|
|
432
|
+
var ALLOWED_HEAD_TAGS = /* @__PURE__ */ new Set(["style", "meta", "link", "script", "noscript", "base"]);
|
|
433
|
+
var CUSTOM_CODE_AFTER_HEAD_KEY = "__ohw_custom_code_after_head";
|
|
434
|
+
var CUSTOM_CODE_BEFORE_HEAD_KEY = "__ohw_custom_code_before_head";
|
|
435
|
+
function clearExisting(slot) {
|
|
436
|
+
document.querySelectorAll(`[data-ohw-custom-code="${slot}"]`).forEach((el) => el.remove());
|
|
437
|
+
}
|
|
438
|
+
function buildNodes(raw, slot) {
|
|
439
|
+
if (!raw || !raw.trim()) return [];
|
|
440
|
+
const parsed = new DOMParser().parseFromString(raw, "text/html");
|
|
441
|
+
const source = [...parsed.head.childNodes, ...parsed.body.childNodes];
|
|
442
|
+
const nodes = [];
|
|
443
|
+
for (const node of source) {
|
|
444
|
+
if (node.nodeType !== Node.ELEMENT_NODE) continue;
|
|
445
|
+
const el = node;
|
|
446
|
+
const tag = el.tagName.toLowerCase();
|
|
447
|
+
if (!ALLOWED_HEAD_TAGS.has(tag)) continue;
|
|
448
|
+
const built = document.createElement(tag);
|
|
449
|
+
for (const attr of Array.from(el.attributes)) built.setAttribute(attr.name, attr.value);
|
|
450
|
+
if (tag === "script" || tag === "style" || tag === "noscript") built.textContent = el.textContent;
|
|
451
|
+
built.dataset.ohwCustomCode = slot;
|
|
452
|
+
nodes.push(built);
|
|
453
|
+
}
|
|
454
|
+
return nodes;
|
|
455
|
+
}
|
|
456
|
+
function applyCustomCodeToHead(content) {
|
|
457
|
+
clearExisting("after");
|
|
458
|
+
clearExisting("before");
|
|
459
|
+
const afterNodes = buildNodes(content[CUSTOM_CODE_AFTER_HEAD_KEY], "after");
|
|
460
|
+
if (afterNodes.length > 0) document.head.prepend(...afterNodes);
|
|
461
|
+
const beforeNodes = buildNodes(content[CUSTOM_CODE_BEFORE_HEAD_KEY], "before");
|
|
462
|
+
if (beforeNodes.length > 0) document.head.append(...beforeNodes);
|
|
463
|
+
}
|
|
464
|
+
|
|
431
465
|
// src/lib/section-styles.ts
|
|
432
466
|
var STYLE_STORE_KEY = "__ohw_styles";
|
|
433
467
|
var STYLE_SHEET_ID = "ohw-section-styles";
|
|
@@ -1424,12 +1458,20 @@ function MediaBox({
|
|
|
1424
1458
|
aspect,
|
|
1425
1459
|
radius,
|
|
1426
1460
|
height,
|
|
1427
|
-
editPath
|
|
1461
|
+
editPath,
|
|
1462
|
+
alt,
|
|
1463
|
+
fit,
|
|
1464
|
+
grayscale,
|
|
1465
|
+
fixedSize,
|
|
1466
|
+
genericImageEdit = true
|
|
1428
1467
|
}) {
|
|
1429
1468
|
const url = refValue ? ctx.resolveMedia(refValue) : null;
|
|
1430
1469
|
const isIcon = /^(lucide|simple):/.test(refValue);
|
|
1431
1470
|
const aspectRatio = aspect && /^\d+:\d+$/.test(aspect) ? aspect.replace(":", " / ") : void 0;
|
|
1432
|
-
const editAttrs = ctx.keyFor && editPath && !isIcon ? {
|
|
1471
|
+
const editAttrs = ctx.keyFor && editPath && !isIcon ? {
|
|
1472
|
+
"data-ohw-key": ctx.keyFor(editPath),
|
|
1473
|
+
...genericImageEdit ? { "data-ohw-editable": "image" } : {}
|
|
1474
|
+
} : {};
|
|
1433
1475
|
if (isIcon) {
|
|
1434
1476
|
const Icon = refValue.startsWith("lucide:") ? lucideByName(refValue.slice(7)) : null;
|
|
1435
1477
|
return /* @__PURE__ */ jsx(
|
|
@@ -1454,9 +1496,10 @@ function MediaBox({
|
|
|
1454
1496
|
{
|
|
1455
1497
|
...editAttrs,
|
|
1456
1498
|
style: {
|
|
1457
|
-
width: "100%",
|
|
1499
|
+
width: fixedSize ? "auto" : "100%",
|
|
1458
1500
|
aspectRatio,
|
|
1459
|
-
|
|
1501
|
+
height: fixedSize ? height : void 0,
|
|
1502
|
+
minHeight: fixedSize ? void 0 : height ?? (aspectRatio ? void 0 : 180),
|
|
1460
1503
|
borderRadius: radius,
|
|
1461
1504
|
overflow: "hidden",
|
|
1462
1505
|
background: "#DBEAFE",
|
|
@@ -1464,7 +1507,8 @@ function MediaBox({
|
|
|
1464
1507
|
alignItems: "center",
|
|
1465
1508
|
justifyContent: "center",
|
|
1466
1509
|
color: "#93C5FD",
|
|
1467
|
-
fontSize: 13
|
|
1510
|
+
fontSize: 13,
|
|
1511
|
+
filter: grayscale ? "grayscale(1)" : void 0
|
|
1468
1512
|
},
|
|
1469
1513
|
children: url || keyed ? (
|
|
1470
1514
|
// Keyed slots always mount an <img> so hydrate overrides have a target.
|
|
@@ -1472,8 +1516,13 @@ function MediaBox({
|
|
|
1472
1516
|
"img",
|
|
1473
1517
|
{
|
|
1474
1518
|
src: url ?? TRANSPARENT_PX,
|
|
1475
|
-
alt: "",
|
|
1476
|
-
style: {
|
|
1519
|
+
alt: alt ?? "",
|
|
1520
|
+
style: {
|
|
1521
|
+
width: fixedSize ? "auto" : "100%",
|
|
1522
|
+
height: "100%",
|
|
1523
|
+
objectFit: fit ?? "cover",
|
|
1524
|
+
display: "block"
|
|
1525
|
+
}
|
|
1477
1526
|
}
|
|
1478
1527
|
)
|
|
1479
1528
|
) : refValue || "media"
|
|
@@ -2126,7 +2175,8 @@ function toggleAccordionItem(button) {
|
|
|
2126
2175
|
}
|
|
2127
2176
|
function AccordionBlock({ node, ctx, path }) {
|
|
2128
2177
|
const rule = `1px solid ${ctx.brand.palette.dark}33`;
|
|
2129
|
-
|
|
2178
|
+
const items = node.items ?? [];
|
|
2179
|
+
return /* @__PURE__ */ jsx("div", { "data-ai-accordion": "", style: { borderTop: rule }, children: items.map((item, i) => /* @__PURE__ */ jsxs("div", { style: { borderBottom: rule }, children: [
|
|
2130
2180
|
/* @__PURE__ */ jsxs(
|
|
2131
2181
|
"button",
|
|
2132
2182
|
{
|
|
@@ -2179,6 +2229,94 @@ function AccordionBlock({ node, ctx, path }) {
|
|
|
2179
2229
|
) })
|
|
2180
2230
|
] }, i)) });
|
|
2181
2231
|
}
|
|
2232
|
+
function MediaStripBlock({ node, ctx, path }) {
|
|
2233
|
+
const slots = node.slots ?? {};
|
|
2234
|
+
const items = node.items ?? [];
|
|
2235
|
+
const variant = slots.variant === "reel" ? "reel" : "logos";
|
|
2236
|
+
const align = slots.align === "left" || slots.align === "right" ? slots.align : "center";
|
|
2237
|
+
const treatment = slots.treatment === "color" || slots.treatment === "grayscale" ? slots.treatment : variant === "logos" ? "grayscale" : "color";
|
|
2238
|
+
const logoMaxHeight = typeof slots.logoMaxHeight === "number" ? slots.logoMaxHeight : 48;
|
|
2239
|
+
const cardWidth = typeof slots.cardWidth === "number" ? slots.cardWidth : 240;
|
|
2240
|
+
const justify = align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center";
|
|
2241
|
+
const label = str(slots.label);
|
|
2242
|
+
return /* @__PURE__ */ jsxs("div", { "data-ohw-media-strip": "", style: { display: "flex", flexDirection: "column", gap: AI_TREE_TOKENS.spacing6 }, children: [
|
|
2243
|
+
/* @__PURE__ */ jsx("style", {
|
|
2244
|
+
// Host sites often style `a:hover{opacity}` globally — that would fade every linked item
|
|
2245
|
+
// whatever preset is chosen, so the anchors here opt out and only the preset applies.
|
|
2246
|
+
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}'
|
|
2247
|
+
}),
|
|
2248
|
+
label && /* @__PURE__ */ jsx(
|
|
2249
|
+
"div",
|
|
2250
|
+
{
|
|
2251
|
+
...textAttrs(ctx, `${path}.label`),
|
|
2252
|
+
style: {
|
|
2253
|
+
...typeStyle(AI_TREE_TOKENS.type.eyebrow, ctx.brand.fonts.body),
|
|
2254
|
+
color: ctx.brand.palette.accent,
|
|
2255
|
+
textAlign: align
|
|
2256
|
+
},
|
|
2257
|
+
children: label
|
|
2258
|
+
}
|
|
2259
|
+
),
|
|
2260
|
+
/* @__PURE__ */ jsx(
|
|
2261
|
+
"div",
|
|
2262
|
+
{
|
|
2263
|
+
style: {
|
|
2264
|
+
display: "flex",
|
|
2265
|
+
flexWrap: "wrap",
|
|
2266
|
+
gap: AI_TREE_TOKENS.spacing4,
|
|
2267
|
+
justifyContent: justify,
|
|
2268
|
+
alignItems: variant === "logos" ? "center" : "flex-start"
|
|
2269
|
+
},
|
|
2270
|
+
children: items.map((item, i) => {
|
|
2271
|
+
const hasLink = typeof item.href === "string" && item.href.length > 0;
|
|
2272
|
+
const hoverPreset = !hasLink ? "none" : slots.hover === "none" || slots.hover === "lift" || slots.hover === "zoom" || slots.hover === "fade" ? slots.hover : "lift";
|
|
2273
|
+
const box = /* @__PURE__ */ jsx(
|
|
2274
|
+
"div",
|
|
2275
|
+
{
|
|
2276
|
+
"data-ohw-media-strip-item": "",
|
|
2277
|
+
"data-ohw-media-strip-index": i,
|
|
2278
|
+
style: variant === "logos" ? { height: logoMaxHeight, width: "auto" } : { width: cardWidth, flexShrink: 0 },
|
|
2279
|
+
children: /* @__PURE__ */ jsx(
|
|
2280
|
+
"div",
|
|
2281
|
+
{
|
|
2282
|
+
"data-ohw-media-strip-hover": hoverPreset === "none" ? void 0 : hoverPreset,
|
|
2283
|
+
style: { height: "100%" },
|
|
2284
|
+
children: /* @__PURE__ */ jsx(
|
|
2285
|
+
MediaBox,
|
|
2286
|
+
{
|
|
2287
|
+
refValue: item.assetId,
|
|
2288
|
+
ctx,
|
|
2289
|
+
aspect: variant === "reel" ? "9:16" : void 0,
|
|
2290
|
+
radius: variant === "reel" ? AI_TREE_TOKENS.radiusCard : 4,
|
|
2291
|
+
height: variant === "logos" ? logoMaxHeight : void 0,
|
|
2292
|
+
editPath: `${path}.items.${i}.assetId`,
|
|
2293
|
+
alt: item.alt,
|
|
2294
|
+
fit: variant === "logos" ? "contain" : "cover",
|
|
2295
|
+
grayscale: treatment === "grayscale",
|
|
2296
|
+
fixedSize: variant === "logos",
|
|
2297
|
+
genericImageEdit: false
|
|
2298
|
+
}
|
|
2299
|
+
)
|
|
2300
|
+
}
|
|
2301
|
+
)
|
|
2302
|
+
}
|
|
2303
|
+
);
|
|
2304
|
+
return hasLink ? /* @__PURE__ */ jsx(
|
|
2305
|
+
"a",
|
|
2306
|
+
{
|
|
2307
|
+
href: item.href,
|
|
2308
|
+
target: item.linkTarget === "same-tab" ? void 0 : "_blank",
|
|
2309
|
+
rel: item.linkTarget === "same-tab" ? void 0 : "noopener noreferrer",
|
|
2310
|
+
style: { display: "block", textDecoration: "none" },
|
|
2311
|
+
children: box
|
|
2312
|
+
},
|
|
2313
|
+
i
|
|
2314
|
+
) : /* @__PURE__ */ jsx(React.Fragment, { children: box }, i);
|
|
2315
|
+
})
|
|
2316
|
+
}
|
|
2317
|
+
)
|
|
2318
|
+
] });
|
|
2319
|
+
}
|
|
2182
2320
|
function useIsMobile() {
|
|
2183
2321
|
const [mobile, setMobile] = React.useState(
|
|
2184
2322
|
() => typeof window !== "undefined" && window.matchMedia("(max-width: 768px)").matches
|
|
@@ -2510,6 +2648,8 @@ function renderNode(node, ctx, path) {
|
|
|
2510
2648
|
return /* @__PURE__ */ jsx(CollectionBlock, { node, ctx, path });
|
|
2511
2649
|
case "accordion":
|
|
2512
2650
|
return /* @__PURE__ */ jsx(AccordionBlock, { node, ctx, path });
|
|
2651
|
+
case "media-strip":
|
|
2652
|
+
return /* @__PURE__ */ jsx(MediaStripBlock, { node, ctx, path });
|
|
2513
2653
|
case "embed": {
|
|
2514
2654
|
const child = (node.children ?? [])[0];
|
|
2515
2655
|
if (child) {
|
|
@@ -3007,21 +3147,21 @@ function placeContainer(container, entry) {
|
|
|
3007
3147
|
const original = findTemplateSection(entry.replaces);
|
|
3008
3148
|
if (original) {
|
|
3009
3149
|
original.insertAdjacentElement("afterend", container);
|
|
3010
|
-
return;
|
|
3150
|
+
return "anchored";
|
|
3011
3151
|
}
|
|
3012
3152
|
}
|
|
3013
3153
|
if (entry.beforeSection) {
|
|
3014
3154
|
const anchor = findPlacementAnchor(entry.beforeSection, container);
|
|
3015
3155
|
if (anchor) {
|
|
3016
3156
|
anchor.insertAdjacentElement("beforebegin", container);
|
|
3017
|
-
return;
|
|
3157
|
+
return "anchored";
|
|
3018
3158
|
}
|
|
3019
3159
|
}
|
|
3020
3160
|
if (entry.afterSection) {
|
|
3021
3161
|
const anchor = findPlacementAnchor(entry.afterSection, container);
|
|
3022
3162
|
if (anchor) {
|
|
3023
3163
|
anchor.insertAdjacentElement("afterend", container);
|
|
3024
|
-
return;
|
|
3164
|
+
return "anchored";
|
|
3025
3165
|
}
|
|
3026
3166
|
}
|
|
3027
3167
|
const footer = findFooterSection();
|
|
@@ -3030,6 +3170,7 @@ function placeContainer(container, entry) {
|
|
|
3030
3170
|
} else {
|
|
3031
3171
|
document.body.appendChild(container);
|
|
3032
3172
|
}
|
|
3173
|
+
return "fallback";
|
|
3033
3174
|
}
|
|
3034
3175
|
function syncRemovedSections(state) {
|
|
3035
3176
|
const removed = new Set(state.removed ?? []);
|
|
@@ -3086,6 +3227,10 @@ function syncReplacedOriginals(state) {
|
|
|
3086
3227
|
}
|
|
3087
3228
|
var sectionOrderIndex = /* @__PURE__ */ new Map();
|
|
3088
3229
|
var removedSectionIds = /* @__PURE__ */ new Set();
|
|
3230
|
+
var persistSectionOrder = null;
|
|
3231
|
+
function setSectionOrderPersistHandler(handler) {
|
|
3232
|
+
persistSectionOrder = handler;
|
|
3233
|
+
}
|
|
3089
3234
|
function setAiSectionOrder(raw, currentPath) {
|
|
3090
3235
|
const next = /* @__PURE__ */ new Map();
|
|
3091
3236
|
const removed = /* @__PURE__ */ new Set();
|
|
@@ -3166,16 +3311,16 @@ function applyAiSectionsToDom(state, options) {
|
|
|
3166
3311
|
mounted.delete(id);
|
|
3167
3312
|
}
|
|
3168
3313
|
}
|
|
3314
|
+
const newlyAnchoredIds = [];
|
|
3169
3315
|
for (const entry of ordered) {
|
|
3170
3316
|
const serialized = JSON.stringify(entry) + brandKey;
|
|
3171
3317
|
const existing = mounted.get(entry.id);
|
|
3172
3318
|
if (existing && existing.serialized === serialized && existing.container.isConnected) {
|
|
3173
3319
|
continue;
|
|
3174
3320
|
}
|
|
3321
|
+
const isNewMount = !existing || !existing.container.isConnected;
|
|
3175
3322
|
let container = existing?.container;
|
|
3176
|
-
let isNewMount = false;
|
|
3177
3323
|
if (!container || !container.isConnected) {
|
|
3178
|
-
isNewMount = true;
|
|
3179
3324
|
existing?.root.unmount();
|
|
3180
3325
|
container?.remove();
|
|
3181
3326
|
container = document.createElement("div");
|
|
@@ -3185,7 +3330,10 @@ function applyAiSectionsToDom(state, options) {
|
|
|
3185
3330
|
container.setAttribute("data-ohw-section", entry.id);
|
|
3186
3331
|
container.setAttribute("data-ohw-instance", entry.id);
|
|
3187
3332
|
container.setAttribute("data-ohw-section-label", entry.label);
|
|
3188
|
-
if (isNewMount)
|
|
3333
|
+
if (isNewMount) {
|
|
3334
|
+
const mode = placeContainer(container, entry);
|
|
3335
|
+
if (mode === "anchored" && !sectionOrderIndex.has(entry.id)) newlyAnchoredIds.push(entry.id);
|
|
3336
|
+
}
|
|
3189
3337
|
const root = mounted.get(entry.id)?.root ?? createRoot(container);
|
|
3190
3338
|
const resolveMedia = (ref) => entry.media[ref] ?? null;
|
|
3191
3339
|
flushSync(() => {
|
|
@@ -3215,6 +3363,16 @@ function applyAiSectionsToDom(state, options) {
|
|
|
3215
3363
|
prev = el;
|
|
3216
3364
|
}
|
|
3217
3365
|
}
|
|
3366
|
+
if (newlyAnchoredIds.length > 0 && persistSectionOrder) {
|
|
3367
|
+
const snapshot = topLevelSections().map((el, order) => ({
|
|
3368
|
+
instanceId: instanceIdOf(el),
|
|
3369
|
+
type: el.getAttribute("data-ohw-section") ?? "",
|
|
3370
|
+
order,
|
|
3371
|
+
pagePath
|
|
3372
|
+
}));
|
|
3373
|
+
for (const snapEntry of snapshot) sectionOrderIndex.set(snapEntry.instanceId, snapEntry.order);
|
|
3374
|
+
persistSectionOrder(snapshot);
|
|
3375
|
+
}
|
|
3218
3376
|
syncReplacedOriginals(state);
|
|
3219
3377
|
syncRemovedSections(state);
|
|
3220
3378
|
syncTemplateHidden(state, pageSections.length > 0);
|
|
@@ -9622,89 +9780,850 @@ function AiSectionOverlay({
|
|
|
9622
9780
|
}
|
|
9623
9781
|
}
|
|
9624
9782
|
),
|
|
9625
|
-
showSelectionBorder && selectionRect && /* @__PURE__ */ jsx17(
|
|
9626
|
-
"div",
|
|
9783
|
+
showSelectionBorder && selectionRect && /* @__PURE__ */ jsx17(
|
|
9784
|
+
"div",
|
|
9785
|
+
{
|
|
9786
|
+
"data-ohw-ai-section-selected": "",
|
|
9787
|
+
"aria-hidden": true,
|
|
9788
|
+
style: {
|
|
9789
|
+
position: "fixed",
|
|
9790
|
+
top: selectionRect.top,
|
|
9791
|
+
left: selectionRect.left,
|
|
9792
|
+
width: selectionRect.width,
|
|
9793
|
+
height: selectionRect.height,
|
|
9794
|
+
border: `2px solid ${PRIMARY2}`,
|
|
9795
|
+
borderRadius: edgeAwareRadius(selectionRect),
|
|
9796
|
+
pointerEvents: "none",
|
|
9797
|
+
zIndex: 2147483e3
|
|
9798
|
+
}
|
|
9799
|
+
}
|
|
9800
|
+
),
|
|
9801
|
+
reviewRect && /* @__PURE__ */ jsxs9(Fragment5, { children: [
|
|
9802
|
+
subtractRect(reviewRect, navToggleHole).map((r2, i) => /* @__PURE__ */ jsx17(
|
|
9803
|
+
"div",
|
|
9804
|
+
{
|
|
9805
|
+
"data-ohw-ai-review": "",
|
|
9806
|
+
"aria-hidden": true,
|
|
9807
|
+
style: {
|
|
9808
|
+
position: "fixed",
|
|
9809
|
+
top: r2.top,
|
|
9810
|
+
left: r2.left,
|
|
9811
|
+
width: r2.width,
|
|
9812
|
+
height: r2.height,
|
|
9813
|
+
background: "rgba(8, 133, 254, 0.04)",
|
|
9814
|
+
pointerEvents: "auto",
|
|
9815
|
+
cursor: "default",
|
|
9816
|
+
zIndex: 2147483200
|
|
9817
|
+
},
|
|
9818
|
+
onClick: (e) => e.stopPropagation()
|
|
9819
|
+
},
|
|
9820
|
+
i
|
|
9821
|
+
)),
|
|
9822
|
+
/* @__PURE__ */ jsx17(
|
|
9823
|
+
"div",
|
|
9824
|
+
{
|
|
9825
|
+
"aria-hidden": true,
|
|
9826
|
+
style: {
|
|
9827
|
+
position: "fixed",
|
|
9828
|
+
top: reviewRect.top,
|
|
9829
|
+
left: reviewRect.left,
|
|
9830
|
+
width: reviewRect.width,
|
|
9831
|
+
height: reviewRect.height,
|
|
9832
|
+
border: `2px solid ${PRIMARY2}`,
|
|
9833
|
+
borderRadius: edgeAwareRadius(reviewRect),
|
|
9834
|
+
pointerEvents: "none",
|
|
9835
|
+
zIndex: 2147483200
|
|
9836
|
+
}
|
|
9837
|
+
}
|
|
9838
|
+
),
|
|
9839
|
+
!reviewButtonsHidden && /* @__PURE__ */ jsxs9(
|
|
9840
|
+
"div",
|
|
9841
|
+
{
|
|
9842
|
+
style: {
|
|
9843
|
+
position: "fixed",
|
|
9844
|
+
top: reviewRect.top + 12,
|
|
9845
|
+
left: reviewRect.left,
|
|
9846
|
+
width: reviewRect.width,
|
|
9847
|
+
display: "flex",
|
|
9848
|
+
gap: 8,
|
|
9849
|
+
justifyContent: "flex-end",
|
|
9850
|
+
paddingRight: 12,
|
|
9851
|
+
zIndex: 2147483201
|
|
9852
|
+
},
|
|
9853
|
+
children: [
|
|
9854
|
+
/* @__PURE__ */ jsx17(ReviewButton, { label: "Accept", onClick: () => decide("accept"), background: PRIMARY2, color: "#ffffff", children: /* @__PURE__ */ jsx17(Check, { size: 16, strokeWidth: 2.5, "aria-hidden": true }) }),
|
|
9855
|
+
/* @__PURE__ */ jsx17(ReviewButton, { label: "Discard", onClick: () => decide("discard"), background: "#EFF6FF", color: "#0c0a09", children: /* @__PURE__ */ jsx17(X, { size: 16, strokeWidth: 2, "aria-hidden": true }) })
|
|
9856
|
+
]
|
|
9857
|
+
}
|
|
9858
|
+
)
|
|
9859
|
+
] })
|
|
9860
|
+
] });
|
|
9861
|
+
}
|
|
9862
|
+
|
|
9863
|
+
// src/ui/ai-section/AiMediaStripOverlay.tsx
|
|
9864
|
+
import { useCallback as useCallback3, useEffect as useEffect5, useRef as useRef5, useState as useState7 } from "react";
|
|
9865
|
+
import { Star } from "lucide-react";
|
|
9866
|
+
|
|
9867
|
+
// src/lib/ai-media-strip-tree.ts
|
|
9868
|
+
var MEDIA_STRIP_ITEM_MIN = 1;
|
|
9869
|
+
var LOGO_MAX_HEIGHT_MIN = 24;
|
|
9870
|
+
var LOGO_MAX_HEIGHT_MAX = 96;
|
|
9871
|
+
var CARD_WIDTH_MIN = 160;
|
|
9872
|
+
var CARD_WIDTH_MAX = 320;
|
|
9873
|
+
function isMediaStrip(node) {
|
|
9874
|
+
return node.type === "media-strip";
|
|
9875
|
+
}
|
|
9876
|
+
function findBlock(node) {
|
|
9877
|
+
if (isMediaStrip(node)) return node;
|
|
9878
|
+
for (const child of node.children ?? []) {
|
|
9879
|
+
const found = findBlock(child);
|
|
9880
|
+
if (found) return found;
|
|
9881
|
+
}
|
|
9882
|
+
return null;
|
|
9883
|
+
}
|
|
9884
|
+
function findMediaStripBlock(tree) {
|
|
9885
|
+
for (const row of tree.rows ?? []) {
|
|
9886
|
+
for (const block of row.blocks ?? []) {
|
|
9887
|
+
const found = findBlock(block);
|
|
9888
|
+
if (found) return found;
|
|
9889
|
+
}
|
|
9890
|
+
}
|
|
9891
|
+
return null;
|
|
9892
|
+
}
|
|
9893
|
+
function mediaStripItems(tree) {
|
|
9894
|
+
const block = findMediaStripBlock(tree);
|
|
9895
|
+
return block?.items ?? [];
|
|
9896
|
+
}
|
|
9897
|
+
function withMediaStrip(tree, mutate) {
|
|
9898
|
+
const next = JSON.parse(JSON.stringify(tree));
|
|
9899
|
+
const block = findMediaStripBlock(next);
|
|
9900
|
+
if (!block) return null;
|
|
9901
|
+
block.items = block.items ?? [];
|
|
9902
|
+
return mutate(block) ? next : null;
|
|
9903
|
+
}
|
|
9904
|
+
function addMediaStripItem(tree, item, afterIndex) {
|
|
9905
|
+
return withMediaStrip(tree, (block) => {
|
|
9906
|
+
const items = block.items;
|
|
9907
|
+
const at = afterIndex === void 0 ? items.length : Math.min(items.length, afterIndex + 1);
|
|
9908
|
+
items.splice(at, 0, { ...item });
|
|
9909
|
+
return true;
|
|
9910
|
+
});
|
|
9911
|
+
}
|
|
9912
|
+
function removeMediaStripItem(tree, index) {
|
|
9913
|
+
return withMediaStrip(tree, (block) => {
|
|
9914
|
+
const items = block.items;
|
|
9915
|
+
if (items.length <= MEDIA_STRIP_ITEM_MIN) return false;
|
|
9916
|
+
if (index < 0 || index >= items.length) return false;
|
|
9917
|
+
items.splice(index, 1);
|
|
9918
|
+
return true;
|
|
9919
|
+
});
|
|
9920
|
+
}
|
|
9921
|
+
function reorderMediaStripItem(tree, index, direction) {
|
|
9922
|
+
return withMediaStrip(tree, (block) => {
|
|
9923
|
+
const items = block.items;
|
|
9924
|
+
const target = index + direction;
|
|
9925
|
+
if (index < 0 || index >= items.length || target < 0 || target >= items.length) return false;
|
|
9926
|
+
const [moved] = items.splice(index, 1);
|
|
9927
|
+
items.splice(target, 0, moved);
|
|
9928
|
+
return true;
|
|
9929
|
+
});
|
|
9930
|
+
}
|
|
9931
|
+
function setMediaStripVariant(tree, variant) {
|
|
9932
|
+
return withMediaStrip(tree, (block) => {
|
|
9933
|
+
block.slots = { ...block.slots, variant };
|
|
9934
|
+
if (variant === "logos") delete block.slots.cardWidth;
|
|
9935
|
+
if (variant === "reel") delete block.slots.logoMaxHeight;
|
|
9936
|
+
return true;
|
|
9937
|
+
});
|
|
9938
|
+
}
|
|
9939
|
+
function setMediaStripSizing(tree, value) {
|
|
9940
|
+
return withMediaStrip(tree, (block) => {
|
|
9941
|
+
const variant = block.slots?.variant;
|
|
9942
|
+
if (variant === "logos") {
|
|
9943
|
+
block.slots = { ...block.slots, logoMaxHeight: Math.min(LOGO_MAX_HEIGHT_MAX, Math.max(LOGO_MAX_HEIGHT_MIN, value)) };
|
|
9944
|
+
return true;
|
|
9945
|
+
}
|
|
9946
|
+
if (variant === "reel") {
|
|
9947
|
+
block.slots = { ...block.slots, cardWidth: Math.min(CARD_WIDTH_MAX, Math.max(CARD_WIDTH_MIN, value)) };
|
|
9948
|
+
return true;
|
|
9949
|
+
}
|
|
9950
|
+
return false;
|
|
9951
|
+
});
|
|
9952
|
+
}
|
|
9953
|
+
function setMediaStripTreatment(tree, treatment) {
|
|
9954
|
+
return withMediaStrip(tree, (block) => {
|
|
9955
|
+
block.slots = { ...block.slots, treatment };
|
|
9956
|
+
return true;
|
|
9957
|
+
});
|
|
9958
|
+
}
|
|
9959
|
+
function setMediaStripAlign(tree, align) {
|
|
9960
|
+
return withMediaStrip(tree, (block) => {
|
|
9961
|
+
block.slots = { ...block.slots, align };
|
|
9962
|
+
return true;
|
|
9963
|
+
});
|
|
9964
|
+
}
|
|
9965
|
+
function setMediaStripHover(tree, hover) {
|
|
9966
|
+
return withMediaStrip(tree, (block) => {
|
|
9967
|
+
block.slots = { ...block.slots, hover };
|
|
9968
|
+
return true;
|
|
9969
|
+
});
|
|
9970
|
+
}
|
|
9971
|
+
function setMediaStripItemAsset(tree, index, assetId) {
|
|
9972
|
+
return withMediaStrip(tree, (block) => {
|
|
9973
|
+
const items = block.items;
|
|
9974
|
+
if (index < 0 || index >= items.length) return false;
|
|
9975
|
+
items[index] = { ...items[index], assetId };
|
|
9976
|
+
return true;
|
|
9977
|
+
});
|
|
9978
|
+
}
|
|
9979
|
+
function setMediaStripItemAlt(tree, index, alt) {
|
|
9980
|
+
return withMediaStrip(tree, (block) => {
|
|
9981
|
+
const items = block.items;
|
|
9982
|
+
if (index < 0 || index >= items.length) return false;
|
|
9983
|
+
items[index] = { ...items[index], alt };
|
|
9984
|
+
return true;
|
|
9985
|
+
});
|
|
9986
|
+
}
|
|
9987
|
+
function setMediaStripItemLink(tree, index, link) {
|
|
9988
|
+
return withMediaStrip(tree, (block) => {
|
|
9989
|
+
const items = block.items;
|
|
9990
|
+
if (index < 0 || index >= items.length) return false;
|
|
9991
|
+
const item = { ...items[index] };
|
|
9992
|
+
if (link.href) {
|
|
9993
|
+
item.href = link.href;
|
|
9994
|
+
if (link.linkTarget) item.linkTarget = link.linkTarget;
|
|
9995
|
+
} else {
|
|
9996
|
+
delete item.href;
|
|
9997
|
+
delete item.linkTarget;
|
|
9998
|
+
}
|
|
9999
|
+
items[index] = item;
|
|
10000
|
+
return true;
|
|
10001
|
+
});
|
|
10002
|
+
}
|
|
10003
|
+
|
|
10004
|
+
// src/ui/ai-section/AiMediaStripOverlay.tsx
|
|
10005
|
+
import { Fragment as Fragment6, jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
10006
|
+
var PRIMARY3 = "#0885FE";
|
|
10007
|
+
var OHW_BLUE = `var(--ohw-primary, ${PRIMARY3})`;
|
|
10008
|
+
var OHW_BLUE_DARK = `color-mix(in srgb, var(--ohw-primary, ${PRIMARY3}) 60%, #000000)`;
|
|
10009
|
+
function findMediaStripItemElement(sectionId, index) {
|
|
10010
|
+
const sectionEl = findByInstanceId(sectionId);
|
|
10011
|
+
if (!sectionEl) return null;
|
|
10012
|
+
const items = sectionEl.querySelectorAll("[data-ohw-media-strip-item]");
|
|
10013
|
+
for (const el of Array.from(items)) {
|
|
10014
|
+
if (Number(el.dataset.ohwMediaStripIndex) === index) return el;
|
|
10015
|
+
}
|
|
10016
|
+
return null;
|
|
10017
|
+
}
|
|
10018
|
+
function readRect2(ref) {
|
|
10019
|
+
const el = ref && findMediaStripItemElement(ref.sectionId, ref.index);
|
|
10020
|
+
if (!el) return null;
|
|
10021
|
+
const r2 = el.getBoundingClientRect();
|
|
10022
|
+
if (r2.width <= 0 || r2.height <= 0) return null;
|
|
10023
|
+
return { top: r2.top, left: r2.left, width: r2.width, height: r2.height };
|
|
10024
|
+
}
|
|
10025
|
+
function useLiveItemRect(ref) {
|
|
10026
|
+
const [rect, setRect] = useState7(null);
|
|
10027
|
+
useEffect5(() => {
|
|
10028
|
+
if (!ref) {
|
|
10029
|
+
setRect(null);
|
|
10030
|
+
return;
|
|
10031
|
+
}
|
|
10032
|
+
const update = () => {
|
|
10033
|
+
const next = readRect2(ref);
|
|
10034
|
+
setRect(
|
|
10035
|
+
(prev) => prev && next && prev.top === next.top && prev.left === next.left && prev.width === next.width && prev.height === next.height ? prev : next
|
|
10036
|
+
);
|
|
10037
|
+
};
|
|
10038
|
+
update();
|
|
10039
|
+
const opts = { capture: true, passive: true };
|
|
10040
|
+
window.addEventListener("scroll", update, opts);
|
|
10041
|
+
window.addEventListener("resize", update);
|
|
10042
|
+
const interval = setInterval(update, 500);
|
|
10043
|
+
return () => {
|
|
10044
|
+
window.removeEventListener("scroll", update, opts);
|
|
10045
|
+
window.removeEventListener("resize", update);
|
|
10046
|
+
clearInterval(interval);
|
|
10047
|
+
};
|
|
10048
|
+
}, [ref?.sectionId, ref?.index]);
|
|
10049
|
+
return rect;
|
|
10050
|
+
}
|
|
10051
|
+
function requestValidateTree(postToParent2, tree) {
|
|
10052
|
+
return new Promise((resolve) => {
|
|
10053
|
+
const id = `ai-validate-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
|
|
10054
|
+
const timeout = window.setTimeout(() => {
|
|
10055
|
+
window.removeEventListener("message", onMessage);
|
|
10056
|
+
resolve({ ok: false, reasons: ["Validation request timed out."] });
|
|
10057
|
+
}, 8e3);
|
|
10058
|
+
function onMessage(e) {
|
|
10059
|
+
if (e.data?.type !== "ow:ai-validate-tree-result" || e.data.id !== id) return;
|
|
10060
|
+
window.clearTimeout(timeout);
|
|
10061
|
+
window.removeEventListener("message", onMessage);
|
|
10062
|
+
resolve({ ok: e.data.ok === true, reasons: Array.isArray(e.data.reasons) ? e.data.reasons : [] });
|
|
10063
|
+
}
|
|
10064
|
+
window.addEventListener("message", onMessage);
|
|
10065
|
+
postToParent2({ type: "ow:ai-validate-tree-request", id, tree });
|
|
10066
|
+
});
|
|
10067
|
+
}
|
|
10068
|
+
function requestAssetPick(postToParent2) {
|
|
10069
|
+
return new Promise((resolve) => {
|
|
10070
|
+
const id = `ai-asset-pick-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
|
|
10071
|
+
const timeout = window.setTimeout(() => {
|
|
10072
|
+
window.removeEventListener("message", onMessage);
|
|
10073
|
+
resolve(null);
|
|
10074
|
+
}, 3e5);
|
|
10075
|
+
function onMessage(e) {
|
|
10076
|
+
if (e.data?.type !== "ow:asset-picked" || e.data.id !== id) return;
|
|
10077
|
+
window.clearTimeout(timeout);
|
|
10078
|
+
window.removeEventListener("message", onMessage);
|
|
10079
|
+
resolve(
|
|
10080
|
+
typeof e.data.assetId === "string" && typeof e.data.url === "string" ? { assetId: e.data.assetId, url: e.data.url } : null
|
|
10081
|
+
);
|
|
10082
|
+
}
|
|
10083
|
+
window.addEventListener("message", onMessage);
|
|
10084
|
+
postToParent2({ type: "ow:asset-pick", id });
|
|
10085
|
+
});
|
|
10086
|
+
}
|
|
10087
|
+
function Pill({
|
|
10088
|
+
label,
|
|
10089
|
+
onClick,
|
|
10090
|
+
disabled,
|
|
10091
|
+
active
|
|
10092
|
+
}) {
|
|
10093
|
+
return /* @__PURE__ */ jsx18(
|
|
10094
|
+
"button",
|
|
10095
|
+
{
|
|
10096
|
+
type: "button",
|
|
10097
|
+
onClick,
|
|
10098
|
+
disabled,
|
|
10099
|
+
style: {
|
|
10100
|
+
height: 28,
|
|
10101
|
+
padding: "0 10px",
|
|
10102
|
+
display: "inline-flex",
|
|
10103
|
+
alignItems: "center",
|
|
10104
|
+
gap: 4,
|
|
10105
|
+
borderRadius: 999,
|
|
10106
|
+
border: "none",
|
|
10107
|
+
cursor: disabled ? "default" : "pointer",
|
|
10108
|
+
background: active ? OHW_BLUE_DARK : "#ffffff",
|
|
10109
|
+
color: active ? "#ffffff" : OHW_BLUE_DARK,
|
|
10110
|
+
opacity: disabled ? 0.4 : 1,
|
|
10111
|
+
fontSize: 12,
|
|
10112
|
+
lineHeight: "16px",
|
|
10113
|
+
fontFamily: "Figtree, ui-sans-serif, system-ui, sans-serif",
|
|
10114
|
+
whiteSpace: "nowrap",
|
|
10115
|
+
flex: "0 0 auto"
|
|
10116
|
+
},
|
|
10117
|
+
children: label
|
|
10118
|
+
}
|
|
10119
|
+
);
|
|
10120
|
+
}
|
|
10121
|
+
function AltInput({ value, onCommit }) {
|
|
10122
|
+
const [draft, setDraft] = useState7(value);
|
|
10123
|
+
useEffect5(() => setDraft(value), [value]);
|
|
10124
|
+
return /* @__PURE__ */ jsxs10(
|
|
10125
|
+
"div",
|
|
10126
|
+
{
|
|
10127
|
+
style: {
|
|
10128
|
+
display: "flex",
|
|
10129
|
+
alignItems: "center",
|
|
10130
|
+
gap: 6,
|
|
10131
|
+
height: 28,
|
|
10132
|
+
padding: "0 12px",
|
|
10133
|
+
borderRadius: 999,
|
|
10134
|
+
background: "#ffffff",
|
|
10135
|
+
width: "100%",
|
|
10136
|
+
maxWidth: 260,
|
|
10137
|
+
boxSizing: "border-box"
|
|
10138
|
+
},
|
|
10139
|
+
children: [
|
|
10140
|
+
/* @__PURE__ */ jsx18(
|
|
10141
|
+
"span",
|
|
10142
|
+
{
|
|
10143
|
+
style: {
|
|
10144
|
+
flex: "0 0 auto",
|
|
10145
|
+
color: OHW_BLUE_DARK,
|
|
10146
|
+
fontSize: 10,
|
|
10147
|
+
fontWeight: 700,
|
|
10148
|
+
textTransform: "uppercase",
|
|
10149
|
+
letterSpacing: 0.4
|
|
10150
|
+
},
|
|
10151
|
+
children: "Alt"
|
|
10152
|
+
}
|
|
10153
|
+
),
|
|
10154
|
+
/* @__PURE__ */ jsx18(
|
|
10155
|
+
"input",
|
|
10156
|
+
{
|
|
10157
|
+
type: "text",
|
|
10158
|
+
value: draft,
|
|
10159
|
+
onChange: (e) => setDraft(e.target.value),
|
|
10160
|
+
onBlur: () => {
|
|
10161
|
+
if (draft !== value) onCommit(draft);
|
|
10162
|
+
},
|
|
10163
|
+
onKeyDown: (e) => {
|
|
10164
|
+
if (e.key === "Enter") e.currentTarget.blur();
|
|
10165
|
+
if (e.key === "Escape") {
|
|
10166
|
+
setDraft(value);
|
|
10167
|
+
e.currentTarget.blur();
|
|
10168
|
+
}
|
|
10169
|
+
},
|
|
10170
|
+
placeholder: "Describe this image",
|
|
10171
|
+
"aria-label": "Image alt text",
|
|
10172
|
+
style: {
|
|
10173
|
+
flex: 1,
|
|
10174
|
+
minWidth: 0,
|
|
10175
|
+
border: "none",
|
|
10176
|
+
outline: "none",
|
|
10177
|
+
background: "transparent",
|
|
10178
|
+
fontSize: 12,
|
|
10179
|
+
lineHeight: "16px",
|
|
10180
|
+
fontFamily: "Figtree, ui-sans-serif, system-ui, sans-serif",
|
|
10181
|
+
color: "#1f2937"
|
|
10182
|
+
}
|
|
10183
|
+
}
|
|
10184
|
+
)
|
|
10185
|
+
]
|
|
10186
|
+
}
|
|
10187
|
+
);
|
|
10188
|
+
}
|
|
10189
|
+
var VARIANTS = [
|
|
10190
|
+
{ value: "logos", label: "Logos" },
|
|
10191
|
+
{ value: "reel", label: "Reel" }
|
|
10192
|
+
];
|
|
10193
|
+
var ALIGNS = [
|
|
10194
|
+
{ value: "left", label: "Left" },
|
|
10195
|
+
{ value: "center", label: "Center" },
|
|
10196
|
+
{ value: "right", label: "Right" }
|
|
10197
|
+
];
|
|
10198
|
+
var HOVERS = [
|
|
10199
|
+
{ value: "none", label: "None" },
|
|
10200
|
+
{ value: "lift", label: "Lift" },
|
|
10201
|
+
{ value: "zoom", label: "Zoom" },
|
|
10202
|
+
{ value: "fade", label: "Fade" }
|
|
10203
|
+
];
|
|
10204
|
+
var TREATMENTS = [
|
|
10205
|
+
{ value: "color", label: "Color" },
|
|
10206
|
+
{ value: "grayscale", label: "Grayscale" }
|
|
10207
|
+
];
|
|
10208
|
+
var HTTP_URL_RE = /^https?:\/\/\S+$/i;
|
|
10209
|
+
function LinkInput({ value, onCommit }) {
|
|
10210
|
+
const [draft, setDraft] = useState7(value);
|
|
10211
|
+
const [invalid, setInvalid] = useState7(false);
|
|
10212
|
+
useEffect5(() => {
|
|
10213
|
+
setDraft(value);
|
|
10214
|
+
setInvalid(false);
|
|
10215
|
+
}, [value]);
|
|
10216
|
+
const commit = () => {
|
|
10217
|
+
const next = draft.trim();
|
|
10218
|
+
if (next === value) return setInvalid(false);
|
|
10219
|
+
if (next && !HTTP_URL_RE.test(next)) return setInvalid(true);
|
|
10220
|
+
setInvalid(false);
|
|
10221
|
+
onCommit(next);
|
|
10222
|
+
};
|
|
10223
|
+
return /* @__PURE__ */ jsxs10(
|
|
10224
|
+
"div",
|
|
10225
|
+
{
|
|
10226
|
+
style: {
|
|
10227
|
+
display: "flex",
|
|
10228
|
+
alignItems: "center",
|
|
10229
|
+
gap: 6,
|
|
10230
|
+
height: 28,
|
|
10231
|
+
padding: "0 12px",
|
|
10232
|
+
borderRadius: 999,
|
|
10233
|
+
background: "#ffffff",
|
|
10234
|
+
width: "100%",
|
|
10235
|
+
maxWidth: 260,
|
|
10236
|
+
boxSizing: "border-box",
|
|
10237
|
+
boxShadow: invalid ? "inset 0 0 0 1.5px #EF4444" : "none"
|
|
10238
|
+
},
|
|
10239
|
+
children: [
|
|
10240
|
+
/* @__PURE__ */ jsx18(
|
|
10241
|
+
"span",
|
|
10242
|
+
{
|
|
10243
|
+
style: {
|
|
10244
|
+
flex: "0 0 auto",
|
|
10245
|
+
color: OHW_BLUE_DARK,
|
|
10246
|
+
fontSize: 10,
|
|
10247
|
+
fontWeight: 700,
|
|
10248
|
+
textTransform: "uppercase",
|
|
10249
|
+
letterSpacing: 0.4
|
|
10250
|
+
},
|
|
10251
|
+
children: "Link"
|
|
10252
|
+
}
|
|
10253
|
+
),
|
|
10254
|
+
/* @__PURE__ */ jsx18(
|
|
10255
|
+
"input",
|
|
10256
|
+
{
|
|
10257
|
+
type: "text",
|
|
10258
|
+
inputMode: "url",
|
|
10259
|
+
value: draft,
|
|
10260
|
+
onChange: (e) => setDraft(e.target.value),
|
|
10261
|
+
onBlur: commit,
|
|
10262
|
+
onKeyDown: (e) => {
|
|
10263
|
+
if (e.key === "Enter") e.currentTarget.blur();
|
|
10264
|
+
if (e.key === "Escape") {
|
|
10265
|
+
setDraft(value);
|
|
10266
|
+
setInvalid(false);
|
|
10267
|
+
e.currentTarget.blur();
|
|
10268
|
+
}
|
|
10269
|
+
},
|
|
10270
|
+
placeholder: "https://example.com",
|
|
10271
|
+
"aria-label": "Image link URL",
|
|
10272
|
+
"aria-invalid": invalid,
|
|
10273
|
+
style: {
|
|
10274
|
+
flex: 1,
|
|
10275
|
+
minWidth: 0,
|
|
10276
|
+
border: "none",
|
|
10277
|
+
outline: "none",
|
|
10278
|
+
background: "transparent",
|
|
10279
|
+
fontSize: 12,
|
|
10280
|
+
lineHeight: "16px",
|
|
10281
|
+
fontFamily: "Figtree, ui-sans-serif, system-ui, sans-serif",
|
|
10282
|
+
color: "#1f2937"
|
|
10283
|
+
}
|
|
10284
|
+
}
|
|
10285
|
+
)
|
|
10286
|
+
]
|
|
10287
|
+
}
|
|
10288
|
+
);
|
|
10289
|
+
}
|
|
10290
|
+
function MediaStripToolbar({
|
|
10291
|
+
entry,
|
|
10292
|
+
index,
|
|
10293
|
+
pending,
|
|
10294
|
+
error,
|
|
10295
|
+
onSetVariant,
|
|
10296
|
+
onSetAlign,
|
|
10297
|
+
onSetHover,
|
|
10298
|
+
onSetTreatment,
|
|
10299
|
+
onResize,
|
|
10300
|
+
onSetAlt,
|
|
10301
|
+
onSetLink,
|
|
10302
|
+
onAddItem,
|
|
10303
|
+
onRemoveItem,
|
|
10304
|
+
onChangeImage,
|
|
10305
|
+
onMoveLeft,
|
|
10306
|
+
onMoveRight
|
|
10307
|
+
}) {
|
|
10308
|
+
const items = mediaStripItems(entry.tree);
|
|
10309
|
+
const itemCount = items.length;
|
|
10310
|
+
const currentAlt = items[index]?.alt ?? "";
|
|
10311
|
+
const currentHref = items[index]?.href ?? "";
|
|
10312
|
+
const currentTarget = items[index]?.linkTarget === "same-tab" ? "same-tab" : "new-tab";
|
|
10313
|
+
const slots = findMediaStripSlots(entry.tree);
|
|
10314
|
+
const variant = slots?.variant === "reel" ? "reel" : "logos";
|
|
10315
|
+
const align = slots?.align === "left" || slots?.align === "right" ? slots.align : "center";
|
|
10316
|
+
const hover = slots?.hover === "none" || slots?.hover === "lift" || slots?.hover === "zoom" || slots?.hover === "fade" ? slots.hover : "lift";
|
|
10317
|
+
const treatment = slots?.treatment === "color" || slots?.treatment === "grayscale" ? slots.treatment : variant === "logos" ? "grayscale" : "color";
|
|
10318
|
+
const sizeValue = variant === "logos" ? typeof slots?.logoMaxHeight === "number" ? slots.logoMaxHeight : 48 : typeof slots?.cardWidth === "number" ? slots.cardWidth : 240;
|
|
10319
|
+
const isMobile = window.innerWidth <= 480;
|
|
10320
|
+
const rowStyle = isMobile ? {
|
|
10321
|
+
display: "flex",
|
|
10322
|
+
gap: 6,
|
|
10323
|
+
flexWrap: "nowrap",
|
|
10324
|
+
justifyContent: "center",
|
|
10325
|
+
overflowX: "auto",
|
|
10326
|
+
WebkitOverflowScrolling: "touch",
|
|
10327
|
+
width: "100%",
|
|
10328
|
+
scrollbarWidth: "none"
|
|
10329
|
+
} : { display: "flex", gap: 6, flexWrap: "nowrap", justifyContent: "center" };
|
|
10330
|
+
return /* @__PURE__ */ jsxs10(
|
|
10331
|
+
"div",
|
|
10332
|
+
{
|
|
10333
|
+
"data-ohw-bridge": "",
|
|
10334
|
+
"data-ohw-toolbar": "",
|
|
10335
|
+
onMouseDown: (e) => e.stopPropagation(),
|
|
10336
|
+
style: {
|
|
10337
|
+
display: "flex",
|
|
10338
|
+
flexDirection: "column",
|
|
10339
|
+
gap: 6,
|
|
10340
|
+
alignItems: "center",
|
|
10341
|
+
background: OHW_BLUE,
|
|
10342
|
+
padding: 8,
|
|
10343
|
+
borderRadius: 12,
|
|
10344
|
+
boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
|
|
10345
|
+
pointerEvents: pending ? "none" : "auto",
|
|
10346
|
+
opacity: pending ? 0.6 : 1,
|
|
10347
|
+
maxWidth: isMobile ? "calc(100vw - 24px)" : "none"
|
|
10348
|
+
},
|
|
10349
|
+
children: [
|
|
10350
|
+
/* @__PURE__ */ jsxs10("div", { style: rowStyle, children: [
|
|
10351
|
+
VARIANTS.map((v) => /* @__PURE__ */ jsx18(Pill, { label: v.label, active: variant === v.value, onClick: () => onSetVariant(v.value) }, v.value)),
|
|
10352
|
+
ALIGNS.map((a) => /* @__PURE__ */ jsx18(Pill, { label: a.label, active: align === a.value, onClick: () => onSetAlign(a.value) }, a.value))
|
|
10353
|
+
] }),
|
|
10354
|
+
/* @__PURE__ */ jsxs10("div", { style: rowStyle, children: [
|
|
10355
|
+
HOVERS.map((h) => /* @__PURE__ */ jsx18(Pill, { label: h.label, active: hover === h.value, onClick: () => onSetHover(h.value) }, h.value)),
|
|
10356
|
+
TREATMENTS.map((t) => /* @__PURE__ */ jsx18(Pill, { label: t.label, active: treatment === t.value, onClick: () => onSetTreatment(t.value) }, t.value))
|
|
10357
|
+
] }),
|
|
10358
|
+
/* @__PURE__ */ jsxs10("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [
|
|
10359
|
+
/* @__PURE__ */ jsx18(Pill, { label: "\u2212", onClick: () => onResize(-8) }),
|
|
10360
|
+
/* @__PURE__ */ jsxs10("span", { style: { color: "#ffffff", fontSize: 12, minWidth: 34, textAlign: "center" }, children: [
|
|
10361
|
+
sizeValue,
|
|
10362
|
+
"px"
|
|
10363
|
+
] }),
|
|
10364
|
+
/* @__PURE__ */ jsx18(Pill, { label: "+", onClick: () => onResize(8) })
|
|
10365
|
+
] }),
|
|
10366
|
+
/* @__PURE__ */ jsx18("div", { style: { display: "flex", justifyContent: "center", width: "100%" }, children: /* @__PURE__ */ jsx18(AltInput, { value: currentAlt, onCommit: onSetAlt }) }),
|
|
10367
|
+
/* @__PURE__ */ jsx18("div", { style: { display: "flex", justifyContent: "center", width: "100%" }, children: /* @__PURE__ */ jsx18(LinkInput, { value: currentHref, onCommit: (href) => onSetLink(href, currentTarget) }) }),
|
|
10368
|
+
currentHref && /* @__PURE__ */ jsxs10("div", { style: rowStyle, children: [
|
|
10369
|
+
/* @__PURE__ */ jsx18(Pill, { label: "New tab", active: currentTarget === "new-tab", onClick: () => onSetLink(currentHref, "new-tab") }),
|
|
10370
|
+
/* @__PURE__ */ jsx18(Pill, { label: "Same tab", active: currentTarget === "same-tab", onClick: () => onSetLink(currentHref, "same-tab") })
|
|
10371
|
+
] }),
|
|
10372
|
+
/* @__PURE__ */ jsxs10("div", { style: rowStyle, children: [
|
|
10373
|
+
/* @__PURE__ */ jsx18(Pill, { label: "Change Image", onClick: onChangeImage }),
|
|
10374
|
+
/* @__PURE__ */ jsx18(Pill, { label: "+ Item", onClick: onAddItem }),
|
|
10375
|
+
/* @__PURE__ */ jsx18(Pill, { label: "\u2212 Item", onClick: onRemoveItem, disabled: itemCount <= 1 })
|
|
10376
|
+
] }),
|
|
10377
|
+
/* @__PURE__ */ jsxs10("div", { style: rowStyle, children: [
|
|
10378
|
+
/* @__PURE__ */ jsx18(Pill, { label: "\u2190 Move", onClick: onMoveLeft, disabled: index <= 0 }),
|
|
10379
|
+
/* @__PURE__ */ jsx18(Pill, { label: "\u2192 Move", onClick: onMoveRight, disabled: index >= itemCount - 1 })
|
|
10380
|
+
] }),
|
|
10381
|
+
error && /* @__PURE__ */ jsx18("div", { style: { color: "#FCA5A5", fontSize: 11, maxWidth: 220, textAlign: "center" }, children: error })
|
|
10382
|
+
]
|
|
10383
|
+
}
|
|
10384
|
+
);
|
|
10385
|
+
}
|
|
10386
|
+
function findMediaStripSlots(tree) {
|
|
10387
|
+
const stack = tree.rows.flatMap((row) => row.blocks);
|
|
10388
|
+
while (stack.length) {
|
|
10389
|
+
const node = stack.shift();
|
|
10390
|
+
if (node.type === "media-strip") return node.slots ?? {};
|
|
10391
|
+
if (node.children) stack.push(...node.children);
|
|
10392
|
+
}
|
|
10393
|
+
return null;
|
|
10394
|
+
}
|
|
10395
|
+
function AiMediaStripOverlay({
|
|
10396
|
+
postToParent: postToParent2,
|
|
10397
|
+
aiSectionsRef,
|
|
10398
|
+
applyTreeLocalRef,
|
|
10399
|
+
clearInteractionChromeRef
|
|
10400
|
+
}) {
|
|
10401
|
+
const [hover, setHover] = useState7(null);
|
|
10402
|
+
const [active, setActive] = useState7(null);
|
|
10403
|
+
const [pending, setPending] = useState7(false);
|
|
10404
|
+
const [error, setError] = useState7(null);
|
|
10405
|
+
const activeRef = useRef5(null);
|
|
10406
|
+
activeRef.current = active;
|
|
10407
|
+
useEffect5(() => {
|
|
10408
|
+
const onMove = (e) => {
|
|
10409
|
+
const t = e.target;
|
|
10410
|
+
if (!(t instanceof HTMLElement)) return;
|
|
10411
|
+
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]")) {
|
|
10412
|
+
return;
|
|
10413
|
+
}
|
|
10414
|
+
const itemEl = t.closest("[data-ohw-media-strip-item]");
|
|
10415
|
+
if (!itemEl) {
|
|
10416
|
+
setHover(null);
|
|
10417
|
+
return;
|
|
10418
|
+
}
|
|
10419
|
+
const sectionEl = itemEl.closest("[data-ohw-section]");
|
|
10420
|
+
const unit = sectionEl ? movableUnit(sectionEl) : null;
|
|
10421
|
+
const sectionId = unit ? instanceIdOf(unit) || null : null;
|
|
10422
|
+
const index = Number(itemEl.dataset.ohwMediaStripIndex);
|
|
10423
|
+
if (!sectionId || Number.isNaN(index)) {
|
|
10424
|
+
setHover(null);
|
|
10425
|
+
return;
|
|
10426
|
+
}
|
|
10427
|
+
setHover({ sectionId, index });
|
|
10428
|
+
};
|
|
10429
|
+
const onLeave = () => setHover(null);
|
|
10430
|
+
document.addEventListener("mousemove", onMove, { passive: true });
|
|
10431
|
+
document.documentElement.addEventListener("mouseleave", onLeave);
|
|
10432
|
+
return () => {
|
|
10433
|
+
document.removeEventListener("mousemove", onMove);
|
|
10434
|
+
document.documentElement.removeEventListener("mouseleave", onLeave);
|
|
10435
|
+
};
|
|
10436
|
+
}, []);
|
|
10437
|
+
useEffect5(() => {
|
|
10438
|
+
const onClick = (e) => {
|
|
10439
|
+
const current = activeRef.current;
|
|
10440
|
+
if (!current) return;
|
|
10441
|
+
const t = e.target;
|
|
10442
|
+
if (!(t instanceof HTMLElement)) return;
|
|
10443
|
+
if (t.closest("[data-ohw-item-interaction]")) return;
|
|
10444
|
+
const itemEl = findMediaStripItemElement(current.sectionId, current.index);
|
|
10445
|
+
if (itemEl && itemEl.contains(t)) return;
|
|
10446
|
+
setActive(null);
|
|
10447
|
+
setError(null);
|
|
10448
|
+
};
|
|
10449
|
+
document.addEventListener("click", onClick, true);
|
|
10450
|
+
return () => document.removeEventListener("click", onClick, true);
|
|
10451
|
+
}, []);
|
|
10452
|
+
useEffect5(() => {
|
|
10453
|
+
const onBlur = () => {
|
|
10454
|
+
if (!activeRef.current) return;
|
|
10455
|
+
setActive(null);
|
|
10456
|
+
setError(null);
|
|
10457
|
+
};
|
|
10458
|
+
window.addEventListener("blur", onBlur);
|
|
10459
|
+
return () => window.removeEventListener("blur", onBlur);
|
|
10460
|
+
}, []);
|
|
10461
|
+
useEffect5(() => {
|
|
10462
|
+
const onKeyDown = (e) => {
|
|
10463
|
+
if (e.key !== "Escape") return;
|
|
10464
|
+
if (!activeRef.current) return;
|
|
10465
|
+
setActive(null);
|
|
10466
|
+
setError(null);
|
|
10467
|
+
};
|
|
10468
|
+
document.addEventListener("keydown", onKeyDown);
|
|
10469
|
+
return () => document.removeEventListener("keydown", onKeyDown);
|
|
10470
|
+
}, []);
|
|
10471
|
+
const findEntry = useCallback3(
|
|
10472
|
+
(sectionId) => {
|
|
10473
|
+
const state = parseAiSectionsState(aiSectionsRef.current);
|
|
10474
|
+
return state.sections.find((s) => s.id === sectionId) ?? null;
|
|
10475
|
+
},
|
|
10476
|
+
[aiSectionsRef]
|
|
10477
|
+
);
|
|
10478
|
+
const runMutation = useCallback3(
|
|
10479
|
+
async (sectionId, mutate, extraMedia) => {
|
|
10480
|
+
const entry = findEntry(sectionId);
|
|
10481
|
+
if (!entry) return false;
|
|
10482
|
+
const nextTree = mutate(entry.tree);
|
|
10483
|
+
if (!nextTree) return false;
|
|
10484
|
+
setPending(true);
|
|
10485
|
+
setError(null);
|
|
10486
|
+
const { ok, reasons } = await requestValidateTree(postToParent2, nextTree);
|
|
10487
|
+
setPending(false);
|
|
10488
|
+
if (!ok) {
|
|
10489
|
+
setError(reasons[0] ?? "That change is not allowed.");
|
|
10490
|
+
return false;
|
|
10491
|
+
}
|
|
10492
|
+
applyTreeLocalRef.current?.({
|
|
10493
|
+
id: sectionId,
|
|
10494
|
+
mode: "replace",
|
|
10495
|
+
targetSectionId: sectionId,
|
|
10496
|
+
tree: nextTree,
|
|
10497
|
+
label: entry.label,
|
|
10498
|
+
media: extraMedia ? { ...entry.media, ...extraMedia } : entry.media,
|
|
10499
|
+
...entry.brand ? { brand: entry.brand } : {}
|
|
10500
|
+
});
|
|
10501
|
+
return true;
|
|
10502
|
+
},
|
|
10503
|
+
[findEntry, postToParent2, applyTreeLocalRef]
|
|
10504
|
+
);
|
|
10505
|
+
const activeEntry = active ? findEntry(active.sectionId) : null;
|
|
10506
|
+
const hoverHandleRect = useLiveItemRect(!active && hover ? hover : null);
|
|
10507
|
+
const activeItemRect = useLiveItemRect(active);
|
|
10508
|
+
const TOOLBAR_APPROX_H = 170;
|
|
10509
|
+
const toolbarState = activeItemRect && activeItemRect.top < TOOLBAR_APPROX_H ? "active-bottom" : "active-top";
|
|
10510
|
+
return /* @__PURE__ */ jsxs10(Fragment6, { children: [
|
|
10511
|
+
hoverHandleRect && hover && /* @__PURE__ */ jsx18(
|
|
10512
|
+
"button",
|
|
10513
|
+
{
|
|
10514
|
+
type: "button",
|
|
10515
|
+
"data-ohw-toolbar": "",
|
|
10516
|
+
onClick: () => {
|
|
10517
|
+
clearInteractionChromeRef.current();
|
|
10518
|
+
setActive(hover);
|
|
10519
|
+
},
|
|
10520
|
+
"aria-label": "Configure media item",
|
|
10521
|
+
style: {
|
|
10522
|
+
position: "fixed",
|
|
10523
|
+
top: hoverHandleRect.top + 8,
|
|
10524
|
+
left: hoverHandleRect.left + hoverHandleRect.width - 36,
|
|
10525
|
+
width: 28,
|
|
10526
|
+
height: 28,
|
|
10527
|
+
borderRadius: 8,
|
|
10528
|
+
border: `1.5px dashed ${PRIMARY3}`,
|
|
10529
|
+
background: "#ffffff",
|
|
10530
|
+
color: PRIMARY3,
|
|
10531
|
+
display: "flex",
|
|
10532
|
+
alignItems: "center",
|
|
10533
|
+
justifyContent: "center",
|
|
10534
|
+
cursor: "pointer",
|
|
10535
|
+
zIndex: 2147483643,
|
|
10536
|
+
fontSize: 14,
|
|
10537
|
+
fontWeight: 700
|
|
10538
|
+
},
|
|
10539
|
+
children: /* @__PURE__ */ jsx18(Star, { size: 14, style: { pointerEvents: "none" } })
|
|
10540
|
+
}
|
|
10541
|
+
),
|
|
10542
|
+
activeItemRect && active && activeEntry && /* @__PURE__ */ jsx18(
|
|
10543
|
+
ItemInteractionLayer,
|
|
9627
10544
|
{
|
|
9628
|
-
|
|
9629
|
-
|
|
9630
|
-
|
|
9631
|
-
|
|
9632
|
-
|
|
9633
|
-
|
|
9634
|
-
|
|
9635
|
-
|
|
9636
|
-
|
|
9637
|
-
|
|
9638
|
-
|
|
9639
|
-
|
|
9640
|
-
|
|
9641
|
-
|
|
9642
|
-
|
|
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
|
-
|
|
10545
|
+
rect: activeItemRect,
|
|
10546
|
+
state: toolbarState,
|
|
10547
|
+
toolbar: /* @__PURE__ */ jsx18(
|
|
10548
|
+
MediaStripToolbar,
|
|
10549
|
+
{
|
|
10550
|
+
entry: activeEntry,
|
|
10551
|
+
index: active.index,
|
|
10552
|
+
pending,
|
|
10553
|
+
error,
|
|
10554
|
+
onSetVariant: (variant) => runMutation(active.sectionId, (tree) => setMediaStripVariant(tree, variant)),
|
|
10555
|
+
onSetAlign: (align) => runMutation(active.sectionId, (tree) => setMediaStripAlign(tree, align)),
|
|
10556
|
+
onSetHover: (hoverPreset) => runMutation(active.sectionId, (tree) => setMediaStripHover(tree, hoverPreset)),
|
|
10557
|
+
onSetTreatment: (treatment) => runMutation(active.sectionId, (tree) => setMediaStripTreatment(tree, treatment)),
|
|
10558
|
+
onResize: (delta) => {
|
|
10559
|
+
const slots = findMediaStripSlots(activeEntry.tree);
|
|
10560
|
+
const variant = slots?.variant === "reel" ? "reel" : "logos";
|
|
10561
|
+
const current = variant === "logos" ? typeof slots?.logoMaxHeight === "number" ? slots.logoMaxHeight : 48 : typeof slots?.cardWidth === "number" ? slots.cardWidth : 240;
|
|
10562
|
+
void runMutation(active.sectionId, (tree) => setMediaStripSizing(tree, current + delta));
|
|
10563
|
+
},
|
|
10564
|
+
onSetAlt: (alt) => {
|
|
10565
|
+
void runMutation(active.sectionId, (tree) => setMediaStripItemAlt(tree, active.index, alt));
|
|
10566
|
+
},
|
|
10567
|
+
onSetLink: (href, linkTarget) => {
|
|
10568
|
+
void runMutation(
|
|
10569
|
+
active.sectionId,
|
|
10570
|
+
(tree) => setMediaStripItemLink(tree, active.index, href ? { href, linkTarget } : {})
|
|
10571
|
+
);
|
|
10572
|
+
},
|
|
10573
|
+
onAddItem: () => {
|
|
10574
|
+
void requestAssetPick(postToParent2).then((picked) => {
|
|
10575
|
+
if (!picked) return;
|
|
10576
|
+
const item = { assetId: picked.assetId, alt: "Logo" };
|
|
10577
|
+
void runMutation(
|
|
10578
|
+
active.sectionId,
|
|
10579
|
+
(tree) => addMediaStripItem(tree, item, active.index),
|
|
10580
|
+
{ [picked.assetId]: picked.url }
|
|
10581
|
+
).then((applied) => {
|
|
10582
|
+
if (applied) setActive({ sectionId: active.sectionId, index: active.index + 1 });
|
|
10583
|
+
});
|
|
10584
|
+
});
|
|
10585
|
+
},
|
|
10586
|
+
onChangeImage: () => {
|
|
10587
|
+
void requestAssetPick(postToParent2).then((picked) => {
|
|
10588
|
+
if (!picked) return;
|
|
10589
|
+
void runMutation(
|
|
10590
|
+
active.sectionId,
|
|
10591
|
+
(tree) => setMediaStripItemAsset(tree, active.index, picked.assetId),
|
|
10592
|
+
{ [picked.assetId]: picked.url }
|
|
10593
|
+
);
|
|
10594
|
+
});
|
|
10595
|
+
},
|
|
10596
|
+
onRemoveItem: () => {
|
|
10597
|
+
void runMutation(active.sectionId, (tree) => removeMediaStripItem(tree, active.index)).then(
|
|
10598
|
+
(applied) => {
|
|
10599
|
+
if (applied) setActive(null);
|
|
10600
|
+
}
|
|
10601
|
+
);
|
|
10602
|
+
},
|
|
10603
|
+
onMoveLeft: () => {
|
|
10604
|
+
void runMutation(active.sectionId, (tree) => reorderMediaStripItem(tree, active.index, -1)).then(
|
|
10605
|
+
(applied) => {
|
|
10606
|
+
if (applied) setActive({ sectionId: active.sectionId, index: active.index - 1 });
|
|
10607
|
+
}
|
|
10608
|
+
);
|
|
10609
|
+
},
|
|
10610
|
+
onMoveRight: () => {
|
|
10611
|
+
void runMutation(active.sectionId, (tree) => reorderMediaStripItem(tree, active.index, 1)).then(
|
|
10612
|
+
(applied) => {
|
|
10613
|
+
if (applied) setActive({ sectionId: active.sectionId, index: active.index + 1 });
|
|
10614
|
+
}
|
|
10615
|
+
);
|
|
10616
|
+
}
|
|
9678
10617
|
}
|
|
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
|
-
] })
|
|
10618
|
+
)
|
|
10619
|
+
}
|
|
10620
|
+
)
|
|
9702
10621
|
] });
|
|
9703
10622
|
}
|
|
9704
10623
|
|
|
9705
10624
|
// src/ui/ai-section/AiPricingCardOverlay.tsx
|
|
9706
|
-
import { useCallback as
|
|
9707
|
-
import { Star } from "lucide-react";
|
|
10625
|
+
import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef6, useState as useState8 } from "react";
|
|
10626
|
+
import { Star as Star2 } from "lucide-react";
|
|
9708
10627
|
|
|
9709
10628
|
// src/lib/ai-pricing-tree.ts
|
|
9710
10629
|
var PRICING_MIN_CARDS = 1;
|
|
@@ -9847,16 +10766,16 @@ function removePricingCardFeature(tree, index) {
|
|
|
9847
10766
|
}
|
|
9848
10767
|
|
|
9849
10768
|
// src/ui/ai-section/AiPricingCardOverlay.tsx
|
|
9850
|
-
import { Fragment as
|
|
10769
|
+
import { Fragment as Fragment7, jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
9851
10770
|
var EMPHASIS_TREATMENTS = [
|
|
9852
10771
|
{ value: "outlined", label: "Outline" },
|
|
9853
10772
|
{ value: "lifted", label: "Lift" },
|
|
9854
10773
|
{ value: "inverted", label: "Invert" },
|
|
9855
10774
|
{ value: "accent-header", label: "Header" }
|
|
9856
10775
|
];
|
|
9857
|
-
var
|
|
9858
|
-
var
|
|
9859
|
-
var
|
|
10776
|
+
var PRIMARY4 = "#0885FE";
|
|
10777
|
+
var OHW_BLUE2 = `var(--ohw-primary, ${PRIMARY4})`;
|
|
10778
|
+
var OHW_BLUE_DARK2 = `color-mix(in srgb, var(--ohw-primary, ${PRIMARY4}) 60%, #000000)`;
|
|
9860
10779
|
function findPricingCardElement(sectionId, index) {
|
|
9861
10780
|
const sectionEl = findByInstanceId(sectionId);
|
|
9862
10781
|
if (!sectionEl) return null;
|
|
@@ -9866,7 +10785,7 @@ function findPricingCardElement(sectionId, index) {
|
|
|
9866
10785
|
}
|
|
9867
10786
|
return null;
|
|
9868
10787
|
}
|
|
9869
|
-
function
|
|
10788
|
+
function readRect3(ref) {
|
|
9870
10789
|
const el = ref && findPricingCardElement(ref.sectionId, ref.index);
|
|
9871
10790
|
if (!el) return null;
|
|
9872
10791
|
const r2 = el.getBoundingClientRect();
|
|
@@ -9874,14 +10793,14 @@ function readRect2(ref) {
|
|
|
9874
10793
|
return { top: r2.top, left: r2.left, width: r2.width, height: r2.height };
|
|
9875
10794
|
}
|
|
9876
10795
|
function useLiveCardRect(ref) {
|
|
9877
|
-
const [rect, setRect] =
|
|
9878
|
-
|
|
10796
|
+
const [rect, setRect] = useState8(null);
|
|
10797
|
+
useEffect6(() => {
|
|
9879
10798
|
if (!ref) {
|
|
9880
10799
|
setRect(null);
|
|
9881
10800
|
return;
|
|
9882
10801
|
}
|
|
9883
10802
|
const update = () => {
|
|
9884
|
-
const next =
|
|
10803
|
+
const next = readRect3(ref);
|
|
9885
10804
|
setRect(
|
|
9886
10805
|
(prev) => prev && next && prev.top === next.top && prev.left === next.left && prev.width === next.width && prev.height === next.height ? prev : next
|
|
9887
10806
|
);
|
|
@@ -9899,7 +10818,7 @@ function useLiveCardRect(ref) {
|
|
|
9899
10818
|
}, [ref?.sectionId, ref?.index]);
|
|
9900
10819
|
return rect;
|
|
9901
10820
|
}
|
|
9902
|
-
function
|
|
10821
|
+
function requestValidateTree2(postToParent2, tree) {
|
|
9903
10822
|
return new Promise((resolve) => {
|
|
9904
10823
|
const id = `ai-validate-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
|
|
9905
10824
|
const timeout = window.setTimeout(() => {
|
|
@@ -9916,13 +10835,13 @@ function requestValidateTree(postToParent2, tree) {
|
|
|
9916
10835
|
postToParent2({ type: "ow:ai-validate-tree-request", id, tree });
|
|
9917
10836
|
});
|
|
9918
10837
|
}
|
|
9919
|
-
function
|
|
10838
|
+
function Pill2({
|
|
9920
10839
|
label,
|
|
9921
10840
|
onClick,
|
|
9922
10841
|
disabled,
|
|
9923
10842
|
active
|
|
9924
10843
|
}) {
|
|
9925
|
-
return /* @__PURE__ */
|
|
10844
|
+
return /* @__PURE__ */ jsx19(
|
|
9926
10845
|
"button",
|
|
9927
10846
|
{
|
|
9928
10847
|
type: "button",
|
|
@@ -9937,8 +10856,8 @@ function Pill({
|
|
|
9937
10856
|
borderRadius: 999,
|
|
9938
10857
|
border: "none",
|
|
9939
10858
|
cursor: disabled ? "default" : "pointer",
|
|
9940
|
-
background: active ?
|
|
9941
|
-
color: active ? "#ffffff" :
|
|
10859
|
+
background: active ? OHW_BLUE_DARK2 : "#ffffff",
|
|
10860
|
+
color: active ? "#ffffff" : OHW_BLUE_DARK2,
|
|
9942
10861
|
opacity: disabled ? 0.4 : 1,
|
|
9943
10862
|
fontSize: 12,
|
|
9944
10863
|
lineHeight: "16px",
|
|
@@ -9971,7 +10890,7 @@ function PricingCardToolbar({
|
|
|
9971
10890
|
const buttonCount = (card?.children ?? []).filter((c) => c.type === "button").length;
|
|
9972
10891
|
const featureCount = pricingCardFeatureCount(entry.tree, index);
|
|
9973
10892
|
const pillWrap = window.innerWidth <= 480 ? "wrap" : "nowrap";
|
|
9974
|
-
return /* @__PURE__ */
|
|
10893
|
+
return /* @__PURE__ */ jsxs11(
|
|
9975
10894
|
"div",
|
|
9976
10895
|
{
|
|
9977
10896
|
"data-ohw-bridge": "",
|
|
@@ -9982,7 +10901,7 @@ function PricingCardToolbar({
|
|
|
9982
10901
|
flexDirection: "column",
|
|
9983
10902
|
gap: 6,
|
|
9984
10903
|
alignItems: "center",
|
|
9985
|
-
background:
|
|
10904
|
+
background: OHW_BLUE2,
|
|
9986
10905
|
padding: 8,
|
|
9987
10906
|
borderRadius: 12,
|
|
9988
10907
|
boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
|
|
@@ -9993,17 +10912,17 @@ function PricingCardToolbar({
|
|
|
9993
10912
|
maxWidth: pillWrap === "wrap" ? "calc(100vw - 24px)" : "none"
|
|
9994
10913
|
},
|
|
9995
10914
|
children: [
|
|
9996
|
-
/* @__PURE__ */
|
|
9997
|
-
/* @__PURE__ */
|
|
9998
|
-
/* @__PURE__ */
|
|
9999
|
-
/* @__PURE__ */
|
|
10000
|
-
/* @__PURE__ */
|
|
10001
|
-
/* @__PURE__ */
|
|
10002
|
-
/* @__PURE__ */
|
|
10003
|
-
/* @__PURE__ */
|
|
10915
|
+
/* @__PURE__ */ jsxs11("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: [
|
|
10916
|
+
/* @__PURE__ */ jsx19(Pill2, { label: "+ Tier", onClick: onAddTier, disabled: collectionCount >= 4 }),
|
|
10917
|
+
/* @__PURE__ */ jsx19(Pill2, { label: "- Tier", onClick: onRemoveTier, disabled: collectionCount <= 1 }),
|
|
10918
|
+
/* @__PURE__ */ jsx19(Pill2, { label: "Featured", active: isFeatured, onClick: () => onToggleFeatured(!isFeatured) }),
|
|
10919
|
+
/* @__PURE__ */ jsx19(Pill2, { label: "+ Button", onClick: onAddButton, disabled: buttonCount >= 2 }),
|
|
10920
|
+
/* @__PURE__ */ jsx19(Pill2, { label: "- Button", onClick: onRemoveButton, disabled: buttonCount === 0 }),
|
|
10921
|
+
/* @__PURE__ */ jsx19(Pill2, { label: "+ Feature", onClick: onAddFeature, disabled: featureCount >= 10 }),
|
|
10922
|
+
/* @__PURE__ */ jsx19(Pill2, { label: "- Feature", onClick: onRemoveFeature, disabled: featureCount <= 1 })
|
|
10004
10923
|
] }),
|
|
10005
|
-
isFeatured && /* @__PURE__ */
|
|
10006
|
-
|
|
10924
|
+
isFeatured && /* @__PURE__ */ jsx19("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: EMPHASIS_TREATMENTS.map((t) => /* @__PURE__ */ jsx19(
|
|
10925
|
+
Pill2,
|
|
10007
10926
|
{
|
|
10008
10927
|
label: t.label,
|
|
10009
10928
|
active: (featured?.treatment ?? "outlined") === t.value,
|
|
@@ -10011,7 +10930,7 @@ function PricingCardToolbar({
|
|
|
10011
10930
|
},
|
|
10012
10931
|
t.value
|
|
10013
10932
|
)) }),
|
|
10014
|
-
error && /* @__PURE__ */
|
|
10933
|
+
error && /* @__PURE__ */ jsx19("div", { style: { color: "#FCA5A5", fontSize: 11, maxWidth: 220, textAlign: "center" }, children: error })
|
|
10015
10934
|
]
|
|
10016
10935
|
}
|
|
10017
10936
|
);
|
|
@@ -10032,13 +10951,13 @@ function AiPricingCardOverlay({
|
|
|
10032
10951
|
aiSectionsRef,
|
|
10033
10952
|
applyTreeLocalRef
|
|
10034
10953
|
}) {
|
|
10035
|
-
const [hover, setHover] =
|
|
10036
|
-
const [active, setActive] =
|
|
10037
|
-
const [pending, setPending] =
|
|
10038
|
-
const [error, setError] =
|
|
10039
|
-
const activeRef =
|
|
10954
|
+
const [hover, setHover] = useState8(null);
|
|
10955
|
+
const [active, setActive] = useState8(null);
|
|
10956
|
+
const [pending, setPending] = useState8(false);
|
|
10957
|
+
const [error, setError] = useState8(null);
|
|
10958
|
+
const activeRef = useRef6(null);
|
|
10040
10959
|
activeRef.current = active;
|
|
10041
|
-
|
|
10960
|
+
useEffect6(() => {
|
|
10042
10961
|
const onMove = (e) => {
|
|
10043
10962
|
const t = e.target;
|
|
10044
10963
|
if (!(t instanceof HTMLElement)) return;
|
|
@@ -10068,7 +10987,7 @@ function AiPricingCardOverlay({
|
|
|
10068
10987
|
document.documentElement.removeEventListener("mouseleave", onLeave);
|
|
10069
10988
|
};
|
|
10070
10989
|
}, []);
|
|
10071
|
-
|
|
10990
|
+
useEffect6(() => {
|
|
10072
10991
|
const onClick = (e) => {
|
|
10073
10992
|
const current = activeRef.current;
|
|
10074
10993
|
if (!current) return;
|
|
@@ -10083,7 +11002,7 @@ function AiPricingCardOverlay({
|
|
|
10083
11002
|
document.addEventListener("click", onClick, true);
|
|
10084
11003
|
return () => document.removeEventListener("click", onClick, true);
|
|
10085
11004
|
}, []);
|
|
10086
|
-
|
|
11005
|
+
useEffect6(() => {
|
|
10087
11006
|
const onBlur = () => {
|
|
10088
11007
|
if (!activeRef.current) return;
|
|
10089
11008
|
setActive(null);
|
|
@@ -10092,7 +11011,7 @@ function AiPricingCardOverlay({
|
|
|
10092
11011
|
window.addEventListener("blur", onBlur);
|
|
10093
11012
|
return () => window.removeEventListener("blur", onBlur);
|
|
10094
11013
|
}, []);
|
|
10095
|
-
|
|
11014
|
+
useEffect6(() => {
|
|
10096
11015
|
const onKeyDown = (e) => {
|
|
10097
11016
|
if (e.key !== "Escape") return;
|
|
10098
11017
|
if (!activeRef.current) return;
|
|
@@ -10102,14 +11021,14 @@ function AiPricingCardOverlay({
|
|
|
10102
11021
|
document.addEventListener("keydown", onKeyDown);
|
|
10103
11022
|
return () => document.removeEventListener("keydown", onKeyDown);
|
|
10104
11023
|
}, []);
|
|
10105
|
-
const findEntry =
|
|
11024
|
+
const findEntry = useCallback4(
|
|
10106
11025
|
(sectionId) => {
|
|
10107
11026
|
const state = parseAiSectionsState(aiSectionsRef.current);
|
|
10108
11027
|
return state.sections.find((s) => s.id === sectionId) ?? null;
|
|
10109
11028
|
},
|
|
10110
11029
|
[aiSectionsRef]
|
|
10111
11030
|
);
|
|
10112
|
-
const runMutation =
|
|
11031
|
+
const runMutation = useCallback4(
|
|
10113
11032
|
async (sectionId, mutate) => {
|
|
10114
11033
|
const entry = findEntry(sectionId);
|
|
10115
11034
|
if (!entry) return false;
|
|
@@ -10117,7 +11036,7 @@ function AiPricingCardOverlay({
|
|
|
10117
11036
|
if (!nextTree) return false;
|
|
10118
11037
|
setPending(true);
|
|
10119
11038
|
setError(null);
|
|
10120
|
-
const { ok, reasons } = await
|
|
11039
|
+
const { ok, reasons } = await requestValidateTree2(postToParent2, nextTree);
|
|
10121
11040
|
setPending(false);
|
|
10122
11041
|
if (!ok) {
|
|
10123
11042
|
setError(reasons[0] ?? "That change is not allowed.");
|
|
@@ -10142,8 +11061,8 @@ function AiPricingCardOverlay({
|
|
|
10142
11061
|
const activeEntry = active ? findEntry(active.sectionId) : null;
|
|
10143
11062
|
const activeCardRect = useLiveCardRect(active);
|
|
10144
11063
|
const hoverHandleRect = useLiveCardRect(!active && hover ? hover : null);
|
|
10145
|
-
return /* @__PURE__ */
|
|
10146
|
-
hoverHandleRect && hover && /* @__PURE__ */
|
|
11064
|
+
return /* @__PURE__ */ jsxs11(Fragment7, { children: [
|
|
11065
|
+
hoverHandleRect && hover && /* @__PURE__ */ jsx19(
|
|
10147
11066
|
"button",
|
|
10148
11067
|
{
|
|
10149
11068
|
type: "button",
|
|
@@ -10157,9 +11076,9 @@ function AiPricingCardOverlay({
|
|
|
10157
11076
|
width: 28,
|
|
10158
11077
|
height: 28,
|
|
10159
11078
|
borderRadius: 8,
|
|
10160
|
-
border: `1.5px dashed ${
|
|
11079
|
+
border: `1.5px dashed ${PRIMARY4}`,
|
|
10161
11080
|
background: "#ffffff",
|
|
10162
|
-
color:
|
|
11081
|
+
color: PRIMARY4,
|
|
10163
11082
|
display: "flex",
|
|
10164
11083
|
alignItems: "center",
|
|
10165
11084
|
justifyContent: "center",
|
|
@@ -10168,15 +11087,15 @@ function AiPricingCardOverlay({
|
|
|
10168
11087
|
fontSize: 14,
|
|
10169
11088
|
fontWeight: 700
|
|
10170
11089
|
},
|
|
10171
|
-
children: /* @__PURE__ */
|
|
11090
|
+
children: /* @__PURE__ */ jsx19(Star2, { size: 14, style: { pointerEvents: "none" } })
|
|
10172
11091
|
}
|
|
10173
11092
|
),
|
|
10174
|
-
activeCardRect && active && activeEntry && /* @__PURE__ */
|
|
11093
|
+
activeCardRect && active && activeEntry && /* @__PURE__ */ jsx19(
|
|
10175
11094
|
ItemInteractionLayer,
|
|
10176
11095
|
{
|
|
10177
11096
|
rect: activeCardRect,
|
|
10178
11097
|
state: "active-top",
|
|
10179
|
-
toolbar: /* @__PURE__ */
|
|
11098
|
+
toolbar: /* @__PURE__ */ jsx19(
|
|
10180
11099
|
PricingCardToolbar,
|
|
10181
11100
|
{
|
|
10182
11101
|
entry: activeEntry,
|
|
@@ -10514,28 +11433,28 @@ function scrollToHashSectionWhenReady(behavior = "smooth") {
|
|
|
10514
11433
|
}
|
|
10515
11434
|
|
|
10516
11435
|
// src/ui/link-modal/LinkPopover.tsx
|
|
10517
|
-
import { useEffect as
|
|
11436
|
+
import { useEffect as useEffect10 } from "react";
|
|
10518
11437
|
|
|
10519
11438
|
// src/ui/dialog.tsx
|
|
10520
11439
|
import * as React9 from "react";
|
|
10521
11440
|
import { Dialog as DialogPrimitive } from "radix-ui";
|
|
10522
11441
|
import { X as X2 } from "lucide-react";
|
|
10523
|
-
import { jsx as
|
|
11442
|
+
import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
10524
11443
|
function Dialog2({
|
|
10525
11444
|
...props
|
|
10526
11445
|
}) {
|
|
10527
|
-
return /* @__PURE__ */
|
|
11446
|
+
return /* @__PURE__ */ jsx20(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
|
|
10528
11447
|
}
|
|
10529
11448
|
function DialogPortal({
|
|
10530
11449
|
...props
|
|
10531
11450
|
}) {
|
|
10532
|
-
return /* @__PURE__ */
|
|
11451
|
+
return /* @__PURE__ */ jsx20(DialogPrimitive.Portal, { ...props });
|
|
10533
11452
|
}
|
|
10534
11453
|
function DialogOverlay({
|
|
10535
11454
|
className,
|
|
10536
11455
|
...props
|
|
10537
11456
|
}) {
|
|
10538
|
-
return /* @__PURE__ */
|
|
11457
|
+
return /* @__PURE__ */ jsx20(
|
|
10539
11458
|
DialogPrimitive.Overlay,
|
|
10540
11459
|
{
|
|
10541
11460
|
"data-slot": "dialog-overlay",
|
|
@@ -10548,9 +11467,9 @@ function DialogOverlay({
|
|
|
10548
11467
|
var DialogContent = React9.forwardRef(
|
|
10549
11468
|
({ className, children, showCloseButton = true, container, ...props }, ref) => {
|
|
10550
11469
|
const positionMode = container ? "absolute" : "fixed";
|
|
10551
|
-
return /* @__PURE__ */
|
|
10552
|
-
/* @__PURE__ */
|
|
10553
|
-
/* @__PURE__ */
|
|
11470
|
+
return /* @__PURE__ */ jsxs12(DialogPortal, { container: container ?? void 0, children: [
|
|
11471
|
+
/* @__PURE__ */ jsx20(DialogOverlay, { className: cn(positionMode, "inset-0") }),
|
|
11472
|
+
/* @__PURE__ */ jsxs12(
|
|
10554
11473
|
DialogPrimitive.Content,
|
|
10555
11474
|
{
|
|
10556
11475
|
ref,
|
|
@@ -10566,13 +11485,13 @@ var DialogContent = React9.forwardRef(
|
|
|
10566
11485
|
...props,
|
|
10567
11486
|
children: [
|
|
10568
11487
|
children,
|
|
10569
|
-
showCloseButton ? /* @__PURE__ */
|
|
11488
|
+
showCloseButton ? /* @__PURE__ */ jsx20(
|
|
10570
11489
|
DialogPrimitive.Close,
|
|
10571
11490
|
{
|
|
10572
11491
|
type: "button",
|
|
10573
11492
|
className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50",
|
|
10574
11493
|
"aria-label": "Close",
|
|
10575
|
-
children: /* @__PURE__ */
|
|
11494
|
+
children: /* @__PURE__ */ jsx20(X2, { size: 16, "aria-hidden": true })
|
|
10576
11495
|
}
|
|
10577
11496
|
) : null
|
|
10578
11497
|
]
|
|
@@ -10586,13 +11505,13 @@ function DialogHeader({
|
|
|
10586
11505
|
className,
|
|
10587
11506
|
...props
|
|
10588
11507
|
}) {
|
|
10589
|
-
return /* @__PURE__ */
|
|
11508
|
+
return /* @__PURE__ */ jsx20("div", { className: cn("flex flex-col gap-1.5", className), ...props });
|
|
10590
11509
|
}
|
|
10591
11510
|
function DialogFooter({
|
|
10592
11511
|
className,
|
|
10593
11512
|
...props
|
|
10594
11513
|
}) {
|
|
10595
|
-
return /* @__PURE__ */
|
|
11514
|
+
return /* @__PURE__ */ jsx20(
|
|
10596
11515
|
"div",
|
|
10597
11516
|
{
|
|
10598
11517
|
className: cn("flex items-center justify-end gap-2", className),
|
|
@@ -10600,7 +11519,7 @@ function DialogFooter({
|
|
|
10600
11519
|
}
|
|
10601
11520
|
);
|
|
10602
11521
|
}
|
|
10603
|
-
var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
11522
|
+
var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx20(
|
|
10604
11523
|
DialogPrimitive.Title,
|
|
10605
11524
|
{
|
|
10606
11525
|
ref,
|
|
@@ -10612,7 +11531,7 @@ var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE
|
|
|
10612
11531
|
}
|
|
10613
11532
|
));
|
|
10614
11533
|
DialogTitle.displayName = DialogPrimitive.Title.displayName;
|
|
10615
|
-
var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
11534
|
+
var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx20(
|
|
10616
11535
|
DialogPrimitive.Description,
|
|
10617
11536
|
{
|
|
10618
11537
|
ref,
|
|
@@ -10628,19 +11547,19 @@ import { Info, X as X4 } from "lucide-react";
|
|
|
10628
11547
|
|
|
10629
11548
|
// src/ui/link-modal/DestinationBreadcrumb.tsx
|
|
10630
11549
|
import { ArrowRight as ArrowRight2, File, GalleryVertical } from "lucide-react";
|
|
10631
|
-
import { jsx as
|
|
11550
|
+
import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
10632
11551
|
function DestinationBreadcrumb({
|
|
10633
11552
|
pageTitle,
|
|
10634
11553
|
sectionLabel
|
|
10635
11554
|
}) {
|
|
10636
|
-
return /* @__PURE__ */
|
|
10637
|
-
/* @__PURE__ */
|
|
10638
|
-
/* @__PURE__ */
|
|
10639
|
-
/* @__PURE__ */
|
|
10640
|
-
/* @__PURE__ */
|
|
10641
|
-
/* @__PURE__ */
|
|
11555
|
+
return /* @__PURE__ */ jsxs13("div", { className: "flex w-full flex-col gap-2", children: [
|
|
11556
|
+
/* @__PURE__ */ jsx21("p", { className: "text-sm font-medium! text-foreground m-0", children: "Destination" }),
|
|
11557
|
+
/* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-3", children: [
|
|
11558
|
+
/* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2", children: [
|
|
11559
|
+
/* @__PURE__ */ jsx21(File, { size: 16, className: "shrink-0 text-foreground", "aria-hidden": true }),
|
|
11560
|
+
/* @__PURE__ */ jsx21("span", { className: "text-sm font-medium leading-none text-foreground!", children: pageTitle })
|
|
10642
11561
|
] }),
|
|
10643
|
-
/* @__PURE__ */
|
|
11562
|
+
/* @__PURE__ */ jsx21(
|
|
10644
11563
|
ArrowRight2,
|
|
10645
11564
|
{
|
|
10646
11565
|
size: 16,
|
|
@@ -10648,8 +11567,8 @@ function DestinationBreadcrumb({
|
|
|
10648
11567
|
"aria-hidden": true
|
|
10649
11568
|
}
|
|
10650
11569
|
),
|
|
10651
|
-
/* @__PURE__ */
|
|
10652
|
-
/* @__PURE__ */
|
|
11570
|
+
/* @__PURE__ */ jsxs13("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
|
|
11571
|
+
/* @__PURE__ */ jsx21(
|
|
10653
11572
|
GalleryVertical,
|
|
10654
11573
|
{
|
|
10655
11574
|
size: 16,
|
|
@@ -10657,7 +11576,7 @@ function DestinationBreadcrumb({
|
|
|
10657
11576
|
"aria-hidden": true
|
|
10658
11577
|
}
|
|
10659
11578
|
),
|
|
10660
|
-
/* @__PURE__ */
|
|
11579
|
+
/* @__PURE__ */ jsx21("span", { className: "truncate text-sm font-medium leading-none text-foreground", children: sectionLabel })
|
|
10661
11580
|
] })
|
|
10662
11581
|
] })
|
|
10663
11582
|
] });
|
|
@@ -10665,22 +11584,22 @@ function DestinationBreadcrumb({
|
|
|
10665
11584
|
|
|
10666
11585
|
// src/ui/link-modal/SectionTreeItem.tsx
|
|
10667
11586
|
import { GalleryVertical as GalleryVertical2 } from "lucide-react";
|
|
10668
|
-
import { jsx as
|
|
11587
|
+
import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
10669
11588
|
function SectionTreeItem({
|
|
10670
11589
|
section,
|
|
10671
11590
|
onSelect,
|
|
10672
11591
|
selected
|
|
10673
11592
|
}) {
|
|
10674
11593
|
const interactive = Boolean(onSelect);
|
|
10675
|
-
return /* @__PURE__ */
|
|
10676
|
-
/* @__PURE__ */
|
|
11594
|
+
return /* @__PURE__ */ jsxs14("div", { className: "flex h-9 w-full items-end pl-3", children: [
|
|
11595
|
+
/* @__PURE__ */ jsx22(
|
|
10677
11596
|
"div",
|
|
10678
11597
|
{
|
|
10679
11598
|
className: "-mr-px h-9 w-2 shrink-0 rounded-bl-sm border-b border-l border-border mb-4",
|
|
10680
11599
|
"aria-hidden": true
|
|
10681
11600
|
}
|
|
10682
11601
|
),
|
|
10683
|
-
/* @__PURE__ */
|
|
11602
|
+
/* @__PURE__ */ jsxs14(
|
|
10684
11603
|
"div",
|
|
10685
11604
|
{
|
|
10686
11605
|
role: interactive ? "button" : void 0,
|
|
@@ -10698,7 +11617,7 @@ function SectionTreeItem({
|
|
|
10698
11617
|
interactive && selected && "border-bridge-primary"
|
|
10699
11618
|
),
|
|
10700
11619
|
children: [
|
|
10701
|
-
/* @__PURE__ */
|
|
11620
|
+
/* @__PURE__ */ jsx22(
|
|
10702
11621
|
GalleryVertical2,
|
|
10703
11622
|
{
|
|
10704
11623
|
size: 16,
|
|
@@ -10706,7 +11625,7 @@ function SectionTreeItem({
|
|
|
10706
11625
|
"aria-hidden": true
|
|
10707
11626
|
}
|
|
10708
11627
|
),
|
|
10709
|
-
/* @__PURE__ */
|
|
11628
|
+
/* @__PURE__ */ jsx22("span", { className: "truncate text-sm font-normal leading-5 text-foreground", children: section.label })
|
|
10710
11629
|
]
|
|
10711
11630
|
}
|
|
10712
11631
|
)
|
|
@@ -10714,14 +11633,14 @@ function SectionTreeItem({
|
|
|
10714
11633
|
}
|
|
10715
11634
|
|
|
10716
11635
|
// src/ui/link-modal/UrlOrPageInput.tsx
|
|
10717
|
-
import { useEffect as
|
|
11636
|
+
import { useEffect as useEffect7, useId as useId2, useRef as useRef7, useState as useState9 } from "react";
|
|
10718
11637
|
|
|
10719
11638
|
// src/ui/input.tsx
|
|
10720
11639
|
import * as React10 from "react";
|
|
10721
|
-
import { jsx as
|
|
11640
|
+
import { jsx as jsx23 } from "react/jsx-runtime";
|
|
10722
11641
|
var Input = React10.forwardRef(
|
|
10723
11642
|
({ className, type, ...props }, ref) => {
|
|
10724
|
-
return /* @__PURE__ */
|
|
11643
|
+
return /* @__PURE__ */ jsx23(
|
|
10725
11644
|
"input",
|
|
10726
11645
|
{
|
|
10727
11646
|
type,
|
|
@@ -10740,9 +11659,9 @@ Input.displayName = "Input";
|
|
|
10740
11659
|
|
|
10741
11660
|
// src/ui/label.tsx
|
|
10742
11661
|
import { Label as LabelPrimitive } from "radix-ui";
|
|
10743
|
-
import { jsx as
|
|
11662
|
+
import { jsx as jsx24 } from "react/jsx-runtime";
|
|
10744
11663
|
function Label({ className, ...props }) {
|
|
10745
|
-
return /* @__PURE__ */
|
|
11664
|
+
return /* @__PURE__ */ jsx24(
|
|
10746
11665
|
LabelPrimitive.Root,
|
|
10747
11666
|
{
|
|
10748
11667
|
"data-slot": "label",
|
|
@@ -10754,11 +11673,11 @@ function Label({ className, ...props }) {
|
|
|
10754
11673
|
|
|
10755
11674
|
// src/ui/link-modal/UrlOrPageInput.tsx
|
|
10756
11675
|
import { ChevronDown as ChevronDown3, File as File2, X as X3 } from "lucide-react";
|
|
10757
|
-
import { jsx as
|
|
11676
|
+
import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
10758
11677
|
function FieldChevron({
|
|
10759
11678
|
onClick
|
|
10760
11679
|
}) {
|
|
10761
|
-
return /* @__PURE__ */
|
|
11680
|
+
return /* @__PURE__ */ jsx25(
|
|
10762
11681
|
"button",
|
|
10763
11682
|
{
|
|
10764
11683
|
type: "button",
|
|
@@ -10766,7 +11685,7 @@ function FieldChevron({
|
|
|
10766
11685
|
onClick,
|
|
10767
11686
|
"aria-label": "Open page list",
|
|
10768
11687
|
tabIndex: -1,
|
|
10769
|
-
children: /* @__PURE__ */
|
|
11688
|
+
children: /* @__PURE__ */ jsx25(ChevronDown3, { size: 16 })
|
|
10770
11689
|
}
|
|
10771
11690
|
);
|
|
10772
11691
|
}
|
|
@@ -10783,10 +11702,10 @@ function UrlOrPageInput({
|
|
|
10783
11702
|
urlError
|
|
10784
11703
|
}) {
|
|
10785
11704
|
const inputId = useId2();
|
|
10786
|
-
const inputRef =
|
|
10787
|
-
const rootRef =
|
|
10788
|
-
const [isFocused, setIsFocused] =
|
|
10789
|
-
|
|
11705
|
+
const inputRef = useRef7(null);
|
|
11706
|
+
const rootRef = useRef7(null);
|
|
11707
|
+
const [isFocused, setIsFocused] = useState9(false);
|
|
11708
|
+
useEffect7(() => {
|
|
10790
11709
|
if (!dropdownOpen) return;
|
|
10791
11710
|
const isOutside = (e) => {
|
|
10792
11711
|
const root = rootRef.current;
|
|
@@ -10827,11 +11746,11 @@ function UrlOrPageInput({
|
|
|
10827
11746
|
"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
11747
|
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
11748
|
);
|
|
10830
|
-
return /* @__PURE__ */
|
|
10831
|
-
/* @__PURE__ */
|
|
10832
|
-
/* @__PURE__ */
|
|
10833
|
-
/* @__PURE__ */
|
|
10834
|
-
selectedPage ? /* @__PURE__ */
|
|
11749
|
+
return /* @__PURE__ */ jsxs15("div", { className: "flex w-full flex-col gap-2 p-0", children: [
|
|
11750
|
+
/* @__PURE__ */ jsx25(Label, { htmlFor: inputId, className: cn(urlError && "text-destructive"), children: "Destination" }),
|
|
11751
|
+
/* @__PURE__ */ jsxs15("div", { ref: rootRef, className: "relative w-full", children: [
|
|
11752
|
+
/* @__PURE__ */ jsxs15("div", { "data-ohw-link-field": true, className: fieldClassName, children: [
|
|
11753
|
+
selectedPage ? /* @__PURE__ */ jsx25("div", { className: "flex shrink-0 items-center pr-2", children: /* @__PURE__ */ jsx25(
|
|
10835
11754
|
File2,
|
|
10836
11755
|
{
|
|
10837
11756
|
size: 16,
|
|
@@ -10839,7 +11758,7 @@ function UrlOrPageInput({
|
|
|
10839
11758
|
"aria-hidden": true
|
|
10840
11759
|
}
|
|
10841
11760
|
) }) : null,
|
|
10842
|
-
readOnly ? /* @__PURE__ */
|
|
11761
|
+
readOnly ? /* @__PURE__ */ jsx25("span", { className: "min-w-0 flex-1 truncate text-sm leading-5 text-foreground", children: selectedPage?.title ?? value }) : /* @__PURE__ */ jsx25(
|
|
10843
11762
|
Input,
|
|
10844
11763
|
{
|
|
10845
11764
|
ref: inputRef,
|
|
@@ -10865,7 +11784,7 @@ function UrlOrPageInput({
|
|
|
10865
11784
|
)
|
|
10866
11785
|
}
|
|
10867
11786
|
),
|
|
10868
|
-
selectedPage && !readOnly ? /* @__PURE__ */
|
|
11787
|
+
selectedPage && !readOnly ? /* @__PURE__ */ jsx25(
|
|
10869
11788
|
"button",
|
|
10870
11789
|
{
|
|
10871
11790
|
type: "button",
|
|
@@ -10873,26 +11792,26 @@ function UrlOrPageInput({
|
|
|
10873
11792
|
onMouseDown: clearSelection,
|
|
10874
11793
|
"aria-label": "Clear selected page",
|
|
10875
11794
|
tabIndex: -1,
|
|
10876
|
-
children: /* @__PURE__ */
|
|
11795
|
+
children: /* @__PURE__ */ jsx25(X3, { size: 16, "aria-hidden": true })
|
|
10877
11796
|
}
|
|
10878
11797
|
) : null,
|
|
10879
|
-
!readOnly ? /* @__PURE__ */
|
|
11798
|
+
!readOnly ? /* @__PURE__ */ jsx25(FieldChevron, { onClick: toggleDropdown }) : null
|
|
10880
11799
|
] }),
|
|
10881
|
-
dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */
|
|
11800
|
+
dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ jsx25(
|
|
10882
11801
|
"div",
|
|
10883
11802
|
{
|
|
10884
11803
|
"data-ohw-link-page-dropdown": "",
|
|
10885
11804
|
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
11805
|
onMouseDown: (e) => e.preventDefault(),
|
|
10887
|
-
children: filteredPages.map((page) => /* @__PURE__ */
|
|
11806
|
+
children: filteredPages.map((page) => /* @__PURE__ */ jsxs15(
|
|
10888
11807
|
"button",
|
|
10889
11808
|
{
|
|
10890
11809
|
type: "button",
|
|
10891
11810
|
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
11811
|
onClick: () => onPageSelect(page),
|
|
10893
11812
|
children: [
|
|
10894
|
-
/* @__PURE__ */
|
|
10895
|
-
/* @__PURE__ */
|
|
11813
|
+
/* @__PURE__ */ jsx25(File2, { size: 16, className: "shrink-0", "aria-hidden": true }),
|
|
11814
|
+
/* @__PURE__ */ jsx25("span", { className: "truncate", children: page.title })
|
|
10896
11815
|
]
|
|
10897
11816
|
},
|
|
10898
11817
|
page.path
|
|
@@ -10900,34 +11819,34 @@ function UrlOrPageInput({
|
|
|
10900
11819
|
}
|
|
10901
11820
|
) : null
|
|
10902
11821
|
] }),
|
|
10903
|
-
urlError ? /* @__PURE__ */
|
|
11822
|
+
urlError ? /* @__PURE__ */ jsx25("p", { className: "text-sm font-medium text-destructive", children: urlError }) : null
|
|
10904
11823
|
] });
|
|
10905
11824
|
}
|
|
10906
11825
|
|
|
10907
11826
|
// src/ui/link-modal/LinkEditorPanel.tsx
|
|
10908
|
-
import { Fragment as
|
|
11827
|
+
import { Fragment as Fragment8, jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
10909
11828
|
function LinkEditorPanel({ state, onClose }) {
|
|
10910
11829
|
const isCancel = state.secondaryLabel === "Cancel" || state.secondaryLabel === "Back to sections";
|
|
10911
|
-
return /* @__PURE__ */
|
|
10912
|
-
/* @__PURE__ */
|
|
11830
|
+
return /* @__PURE__ */ jsxs16(Fragment8, { children: [
|
|
11831
|
+
/* @__PURE__ */ jsx26(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx26(
|
|
10913
11832
|
"button",
|
|
10914
11833
|
{
|
|
10915
11834
|
type: "button",
|
|
10916
11835
|
className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50 h-7",
|
|
10917
11836
|
"aria-label": "Close",
|
|
10918
11837
|
onClick: onClose,
|
|
10919
|
-
children: /* @__PURE__ */
|
|
11838
|
+
children: /* @__PURE__ */ jsx26(X4, { size: 16, "aria-hidden": true })
|
|
10920
11839
|
}
|
|
10921
11840
|
) }),
|
|
10922
|
-
/* @__PURE__ */
|
|
10923
|
-
/* @__PURE__ */
|
|
10924
|
-
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */
|
|
11841
|
+
/* @__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 }) }),
|
|
11842
|
+
/* @__PURE__ */ jsxs16("div", { className: "flex w-full flex-col gap-3 px-6 pb-8 pt-1", children: [
|
|
11843
|
+
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ jsx26(
|
|
10925
11844
|
DestinationBreadcrumb,
|
|
10926
11845
|
{
|
|
10927
11846
|
pageTitle: state.selectedPage.title,
|
|
10928
11847
|
sectionLabel: state.selectedSection.label
|
|
10929
11848
|
}
|
|
10930
|
-
) : /* @__PURE__ */
|
|
11849
|
+
) : /* @__PURE__ */ jsx26(
|
|
10931
11850
|
UrlOrPageInput,
|
|
10932
11851
|
{
|
|
10933
11852
|
value: state.searchValue,
|
|
@@ -10940,8 +11859,8 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
10940
11859
|
urlError: state.urlError
|
|
10941
11860
|
}
|
|
10942
11861
|
),
|
|
10943
|
-
state.showChooseSection ? /* @__PURE__ */
|
|
10944
|
-
/* @__PURE__ */
|
|
11862
|
+
state.showChooseSection ? /* @__PURE__ */ jsxs16("div", { className: "flex flex-col justify-center gap-2", children: [
|
|
11863
|
+
/* @__PURE__ */ jsx26(
|
|
10945
11864
|
Button,
|
|
10946
11865
|
{
|
|
10947
11866
|
type: "button",
|
|
@@ -10952,15 +11871,15 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
10952
11871
|
children: "Choose a section"
|
|
10953
11872
|
}
|
|
10954
11873
|
),
|
|
10955
|
-
/* @__PURE__ */
|
|
10956
|
-
/* @__PURE__ */
|
|
10957
|
-
/* @__PURE__ */
|
|
11874
|
+
/* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
|
|
11875
|
+
/* @__PURE__ */ jsx26(Info, { size: 16, className: "shrink-0", "aria-hidden": true }),
|
|
11876
|
+
/* @__PURE__ */ jsx26("span", { children: "Pick a section this link should scroll to." })
|
|
10958
11877
|
] })
|
|
10959
11878
|
] }) : null,
|
|
10960
|
-
state.showSectionRow && state.selectedSection ? /* @__PURE__ */
|
|
11879
|
+
state.showSectionRow && state.selectedSection ? /* @__PURE__ */ jsx26(SectionTreeItem, { section: state.selectedSection, selected: true }) : null
|
|
10961
11880
|
] }),
|
|
10962
|
-
/* @__PURE__ */
|
|
10963
|
-
/* @__PURE__ */
|
|
11881
|
+
/* @__PURE__ */ jsxs16(DialogFooter, { className: "w-full px-6 pb-6", children: [
|
|
11882
|
+
/* @__PURE__ */ jsx26(
|
|
10964
11883
|
Button,
|
|
10965
11884
|
{
|
|
10966
11885
|
type: "button",
|
|
@@ -10975,7 +11894,7 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
10975
11894
|
children: state.secondaryLabel
|
|
10976
11895
|
}
|
|
10977
11896
|
),
|
|
10978
|
-
/* @__PURE__ */
|
|
11897
|
+
/* @__PURE__ */ jsx26(
|
|
10979
11898
|
Button,
|
|
10980
11899
|
{
|
|
10981
11900
|
type: "button",
|
|
@@ -10994,11 +11913,11 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
10994
11913
|
}
|
|
10995
11914
|
|
|
10996
11915
|
// src/ui/link-modal/SectionPickerOverlay.tsx
|
|
10997
|
-
import { useCallback as
|
|
11916
|
+
import { useCallback as useCallback5, useEffect as useEffect8, useMemo as useMemo2, useRef as useRef8, useState as useState10 } from "react";
|
|
10998
11917
|
import { createPortal as createPortal2 } from "react-dom";
|
|
10999
11918
|
import { ArrowLeft as ArrowLeft2, Check as Check2 } from "lucide-react";
|
|
11000
11919
|
import { usePathname, useRouter as useRouter2 } from "next/navigation";
|
|
11001
|
-
import { jsx as
|
|
11920
|
+
import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
11002
11921
|
var DIM_OVERLAY = "rgba(0, 0, 0, 0.45)";
|
|
11003
11922
|
function rectsEqual(a, b) {
|
|
11004
11923
|
if (a.size !== b.size) return false;
|
|
@@ -11031,12 +11950,12 @@ function hitTestSectionId(x, y, sectionIds, rects) {
|
|
|
11031
11950
|
return null;
|
|
11032
11951
|
}
|
|
11033
11952
|
function useSectionRects(sectionIdsKey, enabled) {
|
|
11034
|
-
const [rects, setRects] =
|
|
11953
|
+
const [rects, setRects] = useState10(/* @__PURE__ */ new Map());
|
|
11035
11954
|
const sectionIds = useMemo2(
|
|
11036
11955
|
() => sectionIdsKey ? sectionIdsKey.split("\0") : [],
|
|
11037
11956
|
[sectionIdsKey]
|
|
11038
11957
|
);
|
|
11039
|
-
|
|
11958
|
+
useEffect8(() => {
|
|
11040
11959
|
if (!enabled || sectionIds.length === 0) {
|
|
11041
11960
|
setRects((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Map());
|
|
11042
11961
|
return;
|
|
@@ -11077,13 +11996,13 @@ function SectionPickerOverlay({
|
|
|
11077
11996
|
}) {
|
|
11078
11997
|
const router = useRouter2();
|
|
11079
11998
|
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] =
|
|
11999
|
+
const [selectedId, setSelectedId] = useState10(null);
|
|
12000
|
+
const [hoveredId, setHoveredId] = useState10(null);
|
|
12001
|
+
const pointerRef = useRef8(null);
|
|
12002
|
+
const pointerScreenRef = useRef8(null);
|
|
12003
|
+
const iframeOffsetTopRef = useRef8(null);
|
|
12004
|
+
const sectionIdsRef = useRef8([]);
|
|
12005
|
+
const [chromeClip, setChromeClip] = useState10(
|
|
11087
12006
|
() => ({
|
|
11088
12007
|
top: 0,
|
|
11089
12008
|
bottom: typeof window !== "undefined" ? window.innerHeight : 0
|
|
@@ -11091,12 +12010,12 @@ function SectionPickerOverlay({
|
|
|
11091
12010
|
);
|
|
11092
12011
|
const normalizedTarget = normalizePath(pagePath);
|
|
11093
12012
|
const isOnTargetPage = normalizePath(pathname) === normalizedTarget;
|
|
11094
|
-
|
|
12013
|
+
useEffect8(() => {
|
|
11095
12014
|
if (isOnTargetPage) return;
|
|
11096
12015
|
const search = readPreservedSearch();
|
|
11097
12016
|
router.push(`${normalizedTarget}${search}`);
|
|
11098
12017
|
}, [isOnTargetPage, normalizedTarget, router]);
|
|
11099
|
-
|
|
12018
|
+
useEffect8(() => {
|
|
11100
12019
|
document.documentElement.setAttribute("data-ohw-section-picking", "");
|
|
11101
12020
|
document.querySelectorAll("[data-ohw-hovered]").forEach((el) => {
|
|
11102
12021
|
el.removeAttribute("data-ohw-hovered");
|
|
@@ -11125,7 +12044,7 @@ function SectionPickerOverlay({
|
|
|
11125
12044
|
);
|
|
11126
12045
|
sectionIdsRef.current = sectionIds;
|
|
11127
12046
|
const rects = useSectionRects(sectionIdsKey, isOnTargetPage);
|
|
11128
|
-
const applyHoverAt =
|
|
12047
|
+
const applyHoverAt = useCallback5(
|
|
11129
12048
|
(x, y, liveRects) => {
|
|
11130
12049
|
const ids = sectionIdsRef.current;
|
|
11131
12050
|
const map = liveRects ?? readSectionRects(ids);
|
|
@@ -11134,7 +12053,7 @@ function SectionPickerOverlay({
|
|
|
11134
12053
|
},
|
|
11135
12054
|
[]
|
|
11136
12055
|
);
|
|
11137
|
-
|
|
12056
|
+
useEffect8(() => {
|
|
11138
12057
|
const applyClip = (iframeOffsetTop, visibleCanvasTop, canvasH) => {
|
|
11139
12058
|
const top = Math.max(0, visibleCanvasTop - iframeOffsetTop);
|
|
11140
12059
|
const bottom = Math.min(
|
|
@@ -11176,12 +12095,12 @@ function SectionPickerOverlay({
|
|
|
11176
12095
|
window.removeEventListener("resize", onResize);
|
|
11177
12096
|
};
|
|
11178
12097
|
}, [applyHoverAt]);
|
|
11179
|
-
|
|
12098
|
+
useEffect8(() => {
|
|
11180
12099
|
const ptr = pointerRef.current;
|
|
11181
12100
|
if (!ptr) return;
|
|
11182
12101
|
applyHoverAt(ptr.x, ptr.y, rects);
|
|
11183
12102
|
}, [rects, applyHoverAt]);
|
|
11184
|
-
|
|
12103
|
+
useEffect8(() => {
|
|
11185
12104
|
const rememberPointer = (clientX, clientY) => {
|
|
11186
12105
|
pointerRef.current = { x: clientX, y: clientY };
|
|
11187
12106
|
const top = iframeOffsetTopRef.current;
|
|
@@ -11205,7 +12124,7 @@ function SectionPickerOverlay({
|
|
|
11205
12124
|
window.removeEventListener("message", onPointerSync);
|
|
11206
12125
|
};
|
|
11207
12126
|
}, [rects, applyHoverAt]);
|
|
11208
|
-
const handleSelect =
|
|
12127
|
+
const handleSelect = useCallback5(
|
|
11209
12128
|
(section) => {
|
|
11210
12129
|
if (selectedId) return;
|
|
11211
12130
|
setSelectedId(section.id);
|
|
@@ -11213,7 +12132,7 @@ function SectionPickerOverlay({
|
|
|
11213
12132
|
},
|
|
11214
12133
|
[selectedId, onSelect]
|
|
11215
12134
|
);
|
|
11216
|
-
|
|
12135
|
+
useEffect8(() => {
|
|
11217
12136
|
const onKeyDown = (e) => {
|
|
11218
12137
|
if (e.key === "Escape") {
|
|
11219
12138
|
e.preventDefault();
|
|
@@ -11227,7 +12146,7 @@ function SectionPickerOverlay({
|
|
|
11227
12146
|
const portalRoot = typeof document !== "undefined" ? document.querySelector("[data-ohw-bridge-root]") ?? document.body : null;
|
|
11228
12147
|
if (!portalRoot) return null;
|
|
11229
12148
|
return createPortal2(
|
|
11230
|
-
/* @__PURE__ */
|
|
12149
|
+
/* @__PURE__ */ jsxs17(
|
|
11231
12150
|
"div",
|
|
11232
12151
|
{
|
|
11233
12152
|
"data-ohw-section-picker": "",
|
|
@@ -11237,12 +12156,12 @@ function SectionPickerOverlay({
|
|
|
11237
12156
|
role: "dialog",
|
|
11238
12157
|
"aria-label": "Choose a section",
|
|
11239
12158
|
children: [
|
|
11240
|
-
/* @__PURE__ */
|
|
12159
|
+
/* @__PURE__ */ jsx27(
|
|
11241
12160
|
"div",
|
|
11242
12161
|
{
|
|
11243
12162
|
className: "pointer-events-auto fixed left-5 z-[2]",
|
|
11244
12163
|
style: { top: chromeClip.top + 20 },
|
|
11245
|
-
children: /* @__PURE__ */
|
|
12164
|
+
children: /* @__PURE__ */ jsxs17(
|
|
11246
12165
|
Button,
|
|
11247
12166
|
{
|
|
11248
12167
|
type: "button",
|
|
@@ -11251,14 +12170,14 @@ function SectionPickerOverlay({
|
|
|
11251
12170
|
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
12171
|
onClick: onBack,
|
|
11253
12172
|
children: [
|
|
11254
|
-
/* @__PURE__ */
|
|
12173
|
+
/* @__PURE__ */ jsx27(ArrowLeft2, { className: "size-4 shrink-0", "aria-hidden": true }),
|
|
11255
12174
|
"Back"
|
|
11256
12175
|
]
|
|
11257
12176
|
}
|
|
11258
12177
|
)
|
|
11259
12178
|
}
|
|
11260
12179
|
),
|
|
11261
|
-
/* @__PURE__ */
|
|
12180
|
+
/* @__PURE__ */ jsx27(
|
|
11262
12181
|
"div",
|
|
11263
12182
|
{
|
|
11264
12183
|
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 +12190,7 @@ function SectionPickerOverlay({
|
|
|
11271
12190
|
children: "Click on section to select"
|
|
11272
12191
|
}
|
|
11273
12192
|
),
|
|
11274
|
-
!isOnTargetPage ? /* @__PURE__ */
|
|
12193
|
+
!isOnTargetPage ? /* @__PURE__ */ jsx27(
|
|
11275
12194
|
"div",
|
|
11276
12195
|
{
|
|
11277
12196
|
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 +12198,14 @@ function SectionPickerOverlay({
|
|
|
11279
12198
|
children: "Loading page preview\u2026"
|
|
11280
12199
|
}
|
|
11281
12200
|
) : null,
|
|
11282
|
-
isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */
|
|
12201
|
+
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
12202
|
isOnTargetPage ? liveSections.map((section) => {
|
|
11284
12203
|
const rect = rects.get(section.id);
|
|
11285
12204
|
if (!rect || rect.width <= 0 || rect.height <= 0) return null;
|
|
11286
12205
|
const isSelected = selectedId === section.id;
|
|
11287
12206
|
const isHovered = hoveredId === section.id;
|
|
11288
12207
|
const isLit = isSelected || isHovered;
|
|
11289
|
-
return /* @__PURE__ */
|
|
12208
|
+
return /* @__PURE__ */ jsxs17(
|
|
11290
12209
|
"button",
|
|
11291
12210
|
{
|
|
11292
12211
|
type: "button",
|
|
@@ -11301,7 +12220,7 @@ function SectionPickerOverlay({
|
|
|
11301
12220
|
"aria-label": `Select section ${section.label}`,
|
|
11302
12221
|
onClick: () => handleSelect(section),
|
|
11303
12222
|
children: [
|
|
11304
|
-
isLit ? /* @__PURE__ */
|
|
12223
|
+
isLit ? /* @__PURE__ */ jsx27(
|
|
11305
12224
|
"span",
|
|
11306
12225
|
{
|
|
11307
12226
|
className: "pointer-events-none absolute",
|
|
@@ -11314,13 +12233,13 @@ function SectionPickerOverlay({
|
|
|
11314
12233
|
"aria-hidden": true
|
|
11315
12234
|
}
|
|
11316
12235
|
) : null,
|
|
11317
|
-
isSelected ? /* @__PURE__ */
|
|
12236
|
+
isSelected ? /* @__PURE__ */ jsx27(
|
|
11318
12237
|
"span",
|
|
11319
12238
|
{
|
|
11320
12239
|
className: "absolute right-3 top-3 flex size-8 items-center justify-center rounded-full text-white",
|
|
11321
12240
|
style: { backgroundColor: "var(--ohw-primary, #0885fe)" },
|
|
11322
12241
|
"aria-hidden": true,
|
|
11323
|
-
children: /* @__PURE__ */
|
|
12242
|
+
children: /* @__PURE__ */ jsx27(Check2, { className: "size-5" })
|
|
11324
12243
|
}
|
|
11325
12244
|
) : null
|
|
11326
12245
|
]
|
|
@@ -11336,7 +12255,7 @@ function SectionPickerOverlay({
|
|
|
11336
12255
|
}
|
|
11337
12256
|
|
|
11338
12257
|
// src/ui/link-modal/useLinkModalState.ts
|
|
11339
|
-
import { useCallback as
|
|
12258
|
+
import { useCallback as useCallback6, useEffect as useEffect9, useMemo as useMemo3, useState as useState11 } from "react";
|
|
11340
12259
|
function useLinkModalState({
|
|
11341
12260
|
open,
|
|
11342
12261
|
mode,
|
|
@@ -11349,13 +12268,13 @@ function useLinkModalState({
|
|
|
11349
12268
|
onSubmit
|
|
11350
12269
|
}) {
|
|
11351
12270
|
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 =
|
|
12271
|
+
const [searchValue, setSearchValue] = useState11("");
|
|
12272
|
+
const [selectedPage, setSelectedPage] = useState11(null);
|
|
12273
|
+
const [selectedSection, setSelectedSection] = useState11(null);
|
|
12274
|
+
const [step, setStep] = useState11("input");
|
|
12275
|
+
const [dropdownOpen, setDropdownOpen] = useState11(false);
|
|
12276
|
+
const [urlError, setUrlError] = useState11("");
|
|
12277
|
+
const reset = useCallback6(() => {
|
|
11359
12278
|
setSearchValue("");
|
|
11360
12279
|
setSelectedPage(null);
|
|
11361
12280
|
setSelectedSection(null);
|
|
@@ -11363,7 +12282,7 @@ function useLinkModalState({
|
|
|
11363
12282
|
setDropdownOpen(false);
|
|
11364
12283
|
setUrlError("");
|
|
11365
12284
|
}, []);
|
|
11366
|
-
|
|
12285
|
+
useEffect9(() => {
|
|
11367
12286
|
if (!open) return;
|
|
11368
12287
|
if (mode === "edit" && initialTarget) {
|
|
11369
12288
|
const { pageRoute } = parseTarget(initialTarget);
|
|
@@ -11500,7 +12419,7 @@ function useLinkModalState({
|
|
|
11500
12419
|
}
|
|
11501
12420
|
|
|
11502
12421
|
// src/ui/link-modal/LinkPopover.tsx
|
|
11503
|
-
import { Fragment as
|
|
12422
|
+
import { Fragment as Fragment9, jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
11504
12423
|
function postToParent(data) {
|
|
11505
12424
|
window.parent?.postMessage(data, "*");
|
|
11506
12425
|
}
|
|
@@ -11529,7 +12448,7 @@ function LinkPopover({
|
|
|
11529
12448
|
onSubmit
|
|
11530
12449
|
});
|
|
11531
12450
|
const sectionPickerActive = state.showSectionPicker && Boolean(state.selectedPage);
|
|
11532
|
-
|
|
12451
|
+
useEffect10(() => {
|
|
11533
12452
|
if (!open) return;
|
|
11534
12453
|
if (sectionPickerActive) {
|
|
11535
12454
|
postToParent({ type: "ui:unlock" });
|
|
@@ -11596,15 +12515,15 @@ function LinkPopover({
|
|
|
11596
12515
|
);
|
|
11597
12516
|
};
|
|
11598
12517
|
}, [open, sectionPickerActive]);
|
|
11599
|
-
return /* @__PURE__ */
|
|
11600
|
-
/* @__PURE__ */
|
|
12518
|
+
return /* @__PURE__ */ jsxs18(Fragment9, { children: [
|
|
12519
|
+
/* @__PURE__ */ jsx28(
|
|
11601
12520
|
Dialog2,
|
|
11602
12521
|
{
|
|
11603
12522
|
open: open && !sectionPickerActive,
|
|
11604
12523
|
onOpenChange: (next) => {
|
|
11605
12524
|
if (!next) onClose?.();
|
|
11606
12525
|
},
|
|
11607
|
-
children: /* @__PURE__ */
|
|
12526
|
+
children: /* @__PURE__ */ jsx28(
|
|
11608
12527
|
DialogContent,
|
|
11609
12528
|
{
|
|
11610
12529
|
ref: panelRef,
|
|
@@ -11614,12 +12533,12 @@ function LinkPopover({
|
|
|
11614
12533
|
"data-ohw-bridge": "",
|
|
11615
12534
|
showCloseButton: false,
|
|
11616
12535
|
className: "gap-0 p-0 w-full max-w-[448px] pointer-events-auto z-[2147483646] overflow-visible",
|
|
11617
|
-
children: /* @__PURE__ */
|
|
12536
|
+
children: /* @__PURE__ */ jsx28(LinkEditorPanel, { state, onClose })
|
|
11618
12537
|
}
|
|
11619
12538
|
)
|
|
11620
12539
|
}
|
|
11621
12540
|
),
|
|
11622
|
-
sectionPickerActive && state.selectedPage ? /* @__PURE__ */
|
|
12541
|
+
sectionPickerActive && state.selectedPage ? /* @__PURE__ */ jsx28(
|
|
11623
12542
|
SectionPickerOverlay,
|
|
11624
12543
|
{
|
|
11625
12544
|
pagePath: state.selectedPage.path,
|
|
@@ -14808,14 +15727,14 @@ function addFooterColumnWithPersist({
|
|
|
14808
15727
|
|
|
14809
15728
|
// src/ui/FloatingPanel.tsx
|
|
14810
15729
|
import {
|
|
14811
|
-
useCallback as
|
|
14812
|
-
useEffect as
|
|
15730
|
+
useCallback as useCallback7,
|
|
15731
|
+
useEffect as useEffect11,
|
|
14813
15732
|
useLayoutEffect as useLayoutEffect4,
|
|
14814
|
-
useRef as
|
|
14815
|
-
useState as
|
|
15733
|
+
useRef as useRef9,
|
|
15734
|
+
useState as useState12
|
|
14816
15735
|
} from "react";
|
|
14817
15736
|
import { X as X5 } from "lucide-react";
|
|
14818
|
-
import { jsx as
|
|
15737
|
+
import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
14819
15738
|
var PANEL_WIDTH = 256;
|
|
14820
15739
|
var EDGE_MARGIN = 16;
|
|
14821
15740
|
function getVisibleClip(parentScroll) {
|
|
@@ -14861,9 +15780,9 @@ function FloatingPanel({
|
|
|
14861
15780
|
className,
|
|
14862
15781
|
bodyClassName
|
|
14863
15782
|
}) {
|
|
14864
|
-
const panelRef =
|
|
14865
|
-
const [measured, setMeasured] =
|
|
14866
|
-
const dragRef =
|
|
15783
|
+
const panelRef = useRef9(null);
|
|
15784
|
+
const [measured, setMeasured] = useState12({ w: PANEL_WIDTH, h: 280 });
|
|
15785
|
+
const dragRef = useRef9(null);
|
|
14867
15786
|
const resolved = position ?? defaultFloatingPanelPosition(parentScroll, measured.h);
|
|
14868
15787
|
const clamped = clampPosition(resolved, parentScroll, measured.w, measured.h);
|
|
14869
15788
|
useLayoutEffect4(() => {
|
|
@@ -14872,12 +15791,12 @@ function FloatingPanel({
|
|
|
14872
15791
|
const next = { w: el.offsetWidth || PANEL_WIDTH, h: el.offsetHeight || 280 };
|
|
14873
15792
|
setMeasured((prev) => prev.w === next.w && prev.h === next.h ? prev : next);
|
|
14874
15793
|
}, [open, children, title, context]);
|
|
14875
|
-
|
|
15794
|
+
useEffect11(() => {
|
|
14876
15795
|
if (!open || !position || !onPositionChange) return;
|
|
14877
15796
|
const next = clampPosition(position, parentScroll, measured.w, measured.h);
|
|
14878
15797
|
if (next.x !== position.x || next.y !== position.y) onPositionChange(next);
|
|
14879
15798
|
}, [open, parentScroll, measured.w, measured.h, position, onPositionChange]);
|
|
14880
|
-
const onHeaderPointerDown =
|
|
15799
|
+
const onHeaderPointerDown = useCallback7(
|
|
14881
15800
|
(e) => {
|
|
14882
15801
|
if (e.button !== 0) return;
|
|
14883
15802
|
if (e.target.closest("[data-ohw-floating-panel-close]")) return;
|
|
@@ -14896,7 +15815,7 @@ function FloatingPanel({
|
|
|
14896
15815
|
},
|
|
14897
15816
|
[clamped.x, clamped.y]
|
|
14898
15817
|
);
|
|
14899
|
-
const onHeaderPointerMove =
|
|
15818
|
+
const onHeaderPointerMove = useCallback7(
|
|
14900
15819
|
(e) => {
|
|
14901
15820
|
const drag = dragRef.current;
|
|
14902
15821
|
if (!drag || drag.pointerId !== e.pointerId) return;
|
|
@@ -14923,7 +15842,7 @@ function FloatingPanel({
|
|
|
14923
15842
|
},
|
|
14924
15843
|
[measured.h, measured.w, onPositionChange, parentScroll]
|
|
14925
15844
|
);
|
|
14926
|
-
const endDrag =
|
|
15845
|
+
const endDrag = useCallback7((e) => {
|
|
14927
15846
|
const drag = dragRef.current;
|
|
14928
15847
|
if (!drag || drag.pointerId !== e.pointerId) return;
|
|
14929
15848
|
dragRef.current = null;
|
|
@@ -14933,13 +15852,13 @@ function FloatingPanel({
|
|
|
14933
15852
|
} catch {
|
|
14934
15853
|
}
|
|
14935
15854
|
}, []);
|
|
14936
|
-
|
|
15855
|
+
useEffect11(() => {
|
|
14937
15856
|
if (open) return;
|
|
14938
15857
|
document.documentElement.removeAttribute("data-ohw-panel-dragging");
|
|
14939
15858
|
}, [open]);
|
|
14940
|
-
|
|
15859
|
+
useEffect11(() => () => document.documentElement.removeAttribute("data-ohw-panel-dragging"), []);
|
|
14941
15860
|
if (!open) return null;
|
|
14942
|
-
return /* @__PURE__ */
|
|
15861
|
+
return /* @__PURE__ */ jsxs19(
|
|
14943
15862
|
"div",
|
|
14944
15863
|
{
|
|
14945
15864
|
ref: panelRef,
|
|
@@ -14956,7 +15875,7 @@ function FloatingPanel({
|
|
|
14956
15875
|
onPointerDown: (e) => e.stopPropagation(),
|
|
14957
15876
|
onClick: (e) => e.stopPropagation(),
|
|
14958
15877
|
children: [
|
|
14959
|
-
/* @__PURE__ */
|
|
15878
|
+
/* @__PURE__ */ jsxs19(
|
|
14960
15879
|
"div",
|
|
14961
15880
|
{
|
|
14962
15881
|
"data-ohw-floating-panel-header": "",
|
|
@@ -14966,14 +15885,14 @@ function FloatingPanel({
|
|
|
14966
15885
|
onPointerUp: endDrag,
|
|
14967
15886
|
onPointerCancel: endDrag,
|
|
14968
15887
|
children: [
|
|
14969
|
-
/* @__PURE__ */
|
|
14970
|
-
/* @__PURE__ */
|
|
14971
|
-
icon ? /* @__PURE__ */
|
|
14972
|
-
/* @__PURE__ */
|
|
15888
|
+
/* @__PURE__ */ jsxs19("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
|
|
15889
|
+
/* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
|
|
15890
|
+
icon ? /* @__PURE__ */ jsx29("span", { className: "shrink-0 text-foreground", children: icon }) : null,
|
|
15891
|
+
/* @__PURE__ */ jsx29("p", { className: "min-w-0 flex-1 text-lg font-semibold leading-7 text-foreground", children: title })
|
|
14973
15892
|
] }),
|
|
14974
|
-
context ? /* @__PURE__ */
|
|
15893
|
+
context ? /* @__PURE__ */ jsx29("p", { className: "w-full text-sm leading-5 text-muted-foreground", children: context }) : null
|
|
14975
15894
|
] }),
|
|
14976
|
-
/* @__PURE__ */
|
|
15895
|
+
/* @__PURE__ */ jsx29(
|
|
14977
15896
|
"button",
|
|
14978
15897
|
{
|
|
14979
15898
|
type: "button",
|
|
@@ -14985,13 +15904,13 @@ function FloatingPanel({
|
|
|
14985
15904
|
onClose();
|
|
14986
15905
|
},
|
|
14987
15906
|
onPointerDown: (e) => e.stopPropagation(),
|
|
14988
|
-
children: /* @__PURE__ */
|
|
15907
|
+
children: /* @__PURE__ */ jsx29(X5, { size: 16, "aria-hidden": true })
|
|
14989
15908
|
}
|
|
14990
15909
|
)
|
|
14991
15910
|
]
|
|
14992
15911
|
}
|
|
14993
15912
|
),
|
|
14994
|
-
/* @__PURE__ */
|
|
15913
|
+
/* @__PURE__ */ jsx29(
|
|
14995
15914
|
"div",
|
|
14996
15915
|
{
|
|
14997
15916
|
"data-ohw-floating-panel-body": "",
|
|
@@ -15005,15 +15924,15 @@ function FloatingPanel({
|
|
|
15005
15924
|
}
|
|
15006
15925
|
|
|
15007
15926
|
// src/ui/socials-display-panel.tsx
|
|
15008
|
-
import { jsx as
|
|
15927
|
+
import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
15009
15928
|
function DisplaySwitch({
|
|
15010
15929
|
label,
|
|
15011
15930
|
checked,
|
|
15012
15931
|
disabled,
|
|
15013
15932
|
onChange
|
|
15014
15933
|
}) {
|
|
15015
|
-
return /* @__PURE__ */
|
|
15016
|
-
/* @__PURE__ */
|
|
15934
|
+
return /* @__PURE__ */ jsxs20("div", { className: "flex w-full items-center gap-2", children: [
|
|
15935
|
+
/* @__PURE__ */ jsx30(
|
|
15017
15936
|
"span",
|
|
15018
15937
|
{
|
|
15019
15938
|
className: cn(
|
|
@@ -15023,7 +15942,7 @@ function DisplaySwitch({
|
|
|
15023
15942
|
children: label
|
|
15024
15943
|
}
|
|
15025
15944
|
),
|
|
15026
|
-
/* @__PURE__ */
|
|
15945
|
+
/* @__PURE__ */ jsx30(
|
|
15027
15946
|
"button",
|
|
15028
15947
|
{
|
|
15029
15948
|
type: "button",
|
|
@@ -15037,7 +15956,7 @@ function DisplaySwitch({
|
|
|
15037
15956
|
checked ? "bg-bridge-primary" : "bg-primary-50",
|
|
15038
15957
|
disabled ? "cursor-default opacity-50" : "cursor-pointer"
|
|
15039
15958
|
),
|
|
15040
|
-
children: /* @__PURE__ */
|
|
15959
|
+
children: /* @__PURE__ */ jsx30(
|
|
15041
15960
|
"span",
|
|
15042
15961
|
{
|
|
15043
15962
|
className: cn(
|
|
@@ -15051,8 +15970,8 @@ function DisplaySwitch({
|
|
|
15051
15970
|
] });
|
|
15052
15971
|
}
|
|
15053
15972
|
function SocialsDisplayPanel({ display, onChange, className }) {
|
|
15054
|
-
return /* @__PURE__ */
|
|
15055
|
-
/* @__PURE__ */
|
|
15973
|
+
return /* @__PURE__ */ jsxs20("div", { className: cn("flex w-full flex-col gap-3", className), children: [
|
|
15974
|
+
/* @__PURE__ */ jsx30(
|
|
15056
15975
|
DisplaySwitch,
|
|
15057
15976
|
{
|
|
15058
15977
|
label: "Text",
|
|
@@ -15061,7 +15980,7 @@ function SocialsDisplayPanel({ display, onChange, className }) {
|
|
|
15061
15980
|
onChange: (text) => onChange({ ...display, text })
|
|
15062
15981
|
}
|
|
15063
15982
|
),
|
|
15064
|
-
/* @__PURE__ */
|
|
15983
|
+
/* @__PURE__ */ jsx30(
|
|
15065
15984
|
DisplaySwitch,
|
|
15066
15985
|
{
|
|
15067
15986
|
label: "Icon",
|
|
@@ -15336,7 +16255,7 @@ function hitTestNavDropSlot(clientX, clientY, draggedHrefKey, draggedEl) {
|
|
|
15336
16255
|
}
|
|
15337
16256
|
|
|
15338
16257
|
// src/useNavItemDrag.ts
|
|
15339
|
-
import { useCallback as
|
|
16258
|
+
import { useCallback as useCallback8, useEffect as useEffect12, useRef as useRef10, useState as useState13 } from "react";
|
|
15340
16259
|
function useNavItemDrag({
|
|
15341
16260
|
isEditMode,
|
|
15342
16261
|
editContentRef,
|
|
@@ -15360,11 +16279,11 @@ function useNavItemDrag({
|
|
|
15360
16279
|
getNavigationItemAnchor: getNavigationItemAnchor2,
|
|
15361
16280
|
isDragHandleDisabled: isDragHandleDisabled2
|
|
15362
16281
|
}) {
|
|
15363
|
-
const navDragRef =
|
|
15364
|
-
const [navDropSlots, setNavDropSlots] =
|
|
15365
|
-
const [activeNavDropIndex, setActiveNavDropIndex] =
|
|
15366
|
-
const navPointerDragRef =
|
|
15367
|
-
const clearNavDragVisuals =
|
|
16282
|
+
const navDragRef = useRef10(null);
|
|
16283
|
+
const [navDropSlots, setNavDropSlots] = useState13([]);
|
|
16284
|
+
const [activeNavDropIndex, setActiveNavDropIndex] = useState13(null);
|
|
16285
|
+
const navPointerDragRef = useRef10(null);
|
|
16286
|
+
const clearNavDragVisuals = useCallback8(() => {
|
|
15368
16287
|
const session = navDragRef.current;
|
|
15369
16288
|
const nestedHrefKey = session?.draggedEl?.closest("[data-ohw-nav-children]") != null ? session.hrefKey : null;
|
|
15370
16289
|
navDragRef.current = null;
|
|
@@ -15397,7 +16316,7 @@ function useNavItemDrag({
|
|
|
15397
16316
|
document.documentElement.removeAttribute("data-ohw-nav-dragging-root");
|
|
15398
16317
|
unlockItemDragInteraction();
|
|
15399
16318
|
}, [setDraggedItemRect, setIsItemDragging, setSiblingHintRects]);
|
|
15400
|
-
const refreshNavDragVisuals =
|
|
16319
|
+
const refreshNavDragVisuals = useCallback8(
|
|
15401
16320
|
(session, activeSlot, clientX, clientY) => {
|
|
15402
16321
|
setDraggedItemRect(session.draggedEl.getBoundingClientRect());
|
|
15403
16322
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -15415,13 +16334,13 @@ function useNavItemDrag({
|
|
|
15415
16334
|
},
|
|
15416
16335
|
[setDraggedItemRect, setSiblingHintRects]
|
|
15417
16336
|
);
|
|
15418
|
-
const refreshNavDragVisualsRef =
|
|
16337
|
+
const refreshNavDragVisualsRef = useRef10(refreshNavDragVisuals);
|
|
15419
16338
|
refreshNavDragVisualsRef.current = refreshNavDragVisuals;
|
|
15420
|
-
const commitNavDragRef =
|
|
16339
|
+
const commitNavDragRef = useRef10(() => {
|
|
15421
16340
|
});
|
|
15422
|
-
const beginNavDragRef =
|
|
16341
|
+
const beginNavDragRef = useRef10(() => {
|
|
15423
16342
|
});
|
|
15424
|
-
const beginNavDrag =
|
|
16343
|
+
const beginNavDrag = useCallback8(
|
|
15425
16344
|
(session) => {
|
|
15426
16345
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
15427
16346
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -15460,7 +16379,7 @@ function useNavItemDrag({
|
|
|
15460
16379
|
]
|
|
15461
16380
|
);
|
|
15462
16381
|
beginNavDragRef.current = beginNavDrag;
|
|
15463
|
-
const commitNavDrag =
|
|
16382
|
+
const commitNavDrag = useCallback8(
|
|
15464
16383
|
(clientX, clientY) => {
|
|
15465
16384
|
const session = navDragRef.current;
|
|
15466
16385
|
if (!session) {
|
|
@@ -15539,7 +16458,7 @@ function useNavItemDrag({
|
|
|
15539
16458
|
[clearNavDragVisuals, deselectRef, editContentRef, postToParentRef, selectRef]
|
|
15540
16459
|
);
|
|
15541
16460
|
commitNavDragRef.current = commitNavDrag;
|
|
15542
|
-
const startNavLinkDrag =
|
|
16461
|
+
const startNavLinkDrag = useCallback8(
|
|
15543
16462
|
(anchor, clientX, clientY, wasSelected) => {
|
|
15544
16463
|
if (footerDragRef.current) return false;
|
|
15545
16464
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -15557,7 +16476,7 @@ function useNavItemDrag({
|
|
|
15557
16476
|
},
|
|
15558
16477
|
[beginNavDrag, footerDragRef, isDragHandleDisabled2, isCtaButton]
|
|
15559
16478
|
);
|
|
15560
|
-
const onNavDragOver =
|
|
16479
|
+
const onNavDragOver = useCallback8(
|
|
15561
16480
|
(e) => {
|
|
15562
16481
|
const session = navDragRef.current;
|
|
15563
16482
|
if (!session) return false;
|
|
@@ -15569,7 +16488,7 @@ function useNavItemDrag({
|
|
|
15569
16488
|
},
|
|
15570
16489
|
[]
|
|
15571
16490
|
);
|
|
15572
|
-
|
|
16491
|
+
useEffect12(() => {
|
|
15573
16492
|
if (!isEditMode) return;
|
|
15574
16493
|
const THRESHOLD = 10;
|
|
15575
16494
|
const resolveWasSelected = (el) => {
|
|
@@ -15696,7 +16615,7 @@ function useNavItemDrag({
|
|
|
15696
16615
|
setLinkPopover,
|
|
15697
16616
|
suppressNextClickRef
|
|
15698
16617
|
]);
|
|
15699
|
-
const armNavPressFromChrome =
|
|
16618
|
+
const armNavPressFromChrome = useCallback8(
|
|
15700
16619
|
(selected, clientX, clientY, pointerId) => {
|
|
15701
16620
|
const hrefKey = selected.getAttribute("data-ohw-href-key");
|
|
15702
16621
|
if (!hrefKey || !isNavbarHrefKey(hrefKey)) return false;
|
|
@@ -15728,7 +16647,7 @@ function useNavItemDrag({
|
|
|
15728
16647
|
}
|
|
15729
16648
|
|
|
15730
16649
|
// src/useSectionDrag.ts
|
|
15731
|
-
import { useCallback as
|
|
16650
|
+
import { useCallback as useCallback9, useEffect as useEffect13, useRef as useRef11, useState as useState14 } from "react";
|
|
15732
16651
|
|
|
15733
16652
|
// src/lib/section-dnd.ts
|
|
15734
16653
|
function isFooterSection(el) {
|
|
@@ -15827,21 +16746,21 @@ function useSectionDrag({
|
|
|
15827
16746
|
suppressNextClickRef,
|
|
15828
16747
|
suppressClickUntilRef
|
|
15829
16748
|
}) {
|
|
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 =
|
|
16749
|
+
const sectionDragRef = useRef11(null);
|
|
16750
|
+
const [sectionDropSlots, setSectionDropSlots] = useState14([]);
|
|
16751
|
+
const [activeSectionDropIndex, setActiveSectionDropIndex] = useState14(null);
|
|
16752
|
+
const [isSectionDragging, setIsSectionDragging] = useState14(false);
|
|
16753
|
+
const sectionPointerDragRef = useRef11(null);
|
|
16754
|
+
const autoScrollRafRef = useRef11(null);
|
|
16755
|
+
const autoScrollDeltaRef = useRef11(0);
|
|
16756
|
+
const stopAutoScroll = useCallback9(() => {
|
|
15838
16757
|
if (autoScrollRafRef.current != null) {
|
|
15839
16758
|
cancelAnimationFrame(autoScrollRafRef.current);
|
|
15840
16759
|
autoScrollRafRef.current = null;
|
|
15841
16760
|
}
|
|
15842
16761
|
autoScrollDeltaRef.current = 0;
|
|
15843
16762
|
}, []);
|
|
15844
|
-
const tickAutoScroll =
|
|
16763
|
+
const tickAutoScroll = useCallback9(() => {
|
|
15845
16764
|
if (!sectionDragRef.current) {
|
|
15846
16765
|
stopAutoScroll();
|
|
15847
16766
|
return;
|
|
@@ -15851,7 +16770,7 @@ function useSectionDrag({
|
|
|
15851
16770
|
}
|
|
15852
16771
|
autoScrollRafRef.current = requestAnimationFrame(tickAutoScroll);
|
|
15853
16772
|
}, [postToParentRef, stopAutoScroll]);
|
|
15854
|
-
const updateAutoScroll =
|
|
16773
|
+
const updateAutoScroll = useCallback9(
|
|
15855
16774
|
(clientY) => {
|
|
15856
16775
|
const clip = visibleClip(parentScrollRef.current);
|
|
15857
16776
|
let delta = 0;
|
|
@@ -15873,7 +16792,7 @@ function useSectionDrag({
|
|
|
15873
16792
|
},
|
|
15874
16793
|
[parentScrollRef, stopAutoScroll, tickAutoScroll]
|
|
15875
16794
|
);
|
|
15876
|
-
const clearSectionDragVisuals =
|
|
16795
|
+
const clearSectionDragVisuals = useCallback9(() => {
|
|
15877
16796
|
sectionDragRef.current?.draggedEl.removeAttribute("data-ohw-section-dragging");
|
|
15878
16797
|
sectionDragRef.current = null;
|
|
15879
16798
|
setSectionDropSlots([]);
|
|
@@ -15883,7 +16802,7 @@ function useSectionDrag({
|
|
|
15883
16802
|
document.documentElement.removeAttribute("data-ohw-section-dragging-root");
|
|
15884
16803
|
unlockItemDragInteraction();
|
|
15885
16804
|
}, [stopAutoScroll]);
|
|
15886
|
-
const refreshSectionDragVisuals =
|
|
16805
|
+
const refreshSectionDragVisuals = useCallback9(
|
|
15887
16806
|
(session, clientX, clientY) => {
|
|
15888
16807
|
session.lastClientX = clientX;
|
|
15889
16808
|
session.lastClientY = clientY;
|
|
@@ -15897,7 +16816,7 @@ function useSectionDrag({
|
|
|
15897
16816
|
},
|
|
15898
16817
|
[updateAutoScroll]
|
|
15899
16818
|
);
|
|
15900
|
-
const beginSectionDrag =
|
|
16819
|
+
const beginSectionDrag = useCallback9(
|
|
15901
16820
|
(session) => {
|
|
15902
16821
|
sectionDragRef.current = session;
|
|
15903
16822
|
setIsSectionDragging(true);
|
|
@@ -15908,7 +16827,7 @@ function useSectionDrag({
|
|
|
15908
16827
|
},
|
|
15909
16828
|
[refreshSectionDragVisuals]
|
|
15910
16829
|
);
|
|
15911
|
-
const commitSectionDrag =
|
|
16830
|
+
const commitSectionDrag = useCallback9(() => {
|
|
15912
16831
|
const session = sectionDragRef.current;
|
|
15913
16832
|
if (!session) {
|
|
15914
16833
|
clearSectionDragVisuals();
|
|
@@ -15937,7 +16856,7 @@ function useSectionDrag({
|
|
|
15937
16856
|
});
|
|
15938
16857
|
});
|
|
15939
16858
|
}, [clearSectionDragVisuals, editContentRef, postToParentRef]);
|
|
15940
|
-
const startSectionPressDrag =
|
|
16859
|
+
const startSectionPressDrag = useCallback9(
|
|
15941
16860
|
(el, clientX, clientY, pointerId) => {
|
|
15942
16861
|
if (navDragRef.current || footerDragRef.current || sectionDragRef.current) return false;
|
|
15943
16862
|
const instanceId = instanceIdOf(el);
|
|
@@ -15954,7 +16873,7 @@ function useSectionDrag({
|
|
|
15954
16873
|
},
|
|
15955
16874
|
[footerDragRef, navDragRef]
|
|
15956
16875
|
);
|
|
15957
|
-
|
|
16876
|
+
useEffect13(() => {
|
|
15958
16877
|
if (!isEditMode) return;
|
|
15959
16878
|
const onPointerDown = (e) => {
|
|
15960
16879
|
if (e.button !== 0) return;
|
|
@@ -16060,7 +16979,7 @@ function useSectionDrag({
|
|
|
16060
16979
|
|
|
16061
16980
|
// src/ui/footer-container-chrome.tsx
|
|
16062
16981
|
import { Plus as Plus2 } from "lucide-react";
|
|
16063
|
-
import { jsx as
|
|
16982
|
+
import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
16064
16983
|
function FooterContainerChrome({
|
|
16065
16984
|
rect,
|
|
16066
16985
|
onAdd,
|
|
@@ -16068,7 +16987,7 @@ function FooterContainerChrome({
|
|
|
16068
16987
|
}) {
|
|
16069
16988
|
const chromeGap = 6;
|
|
16070
16989
|
const buttonMargin = 7;
|
|
16071
|
-
return /* @__PURE__ */
|
|
16990
|
+
return /* @__PURE__ */ jsx31(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx31(
|
|
16072
16991
|
"div",
|
|
16073
16992
|
{
|
|
16074
16993
|
"data-ohw-footer-container-chrome": "",
|
|
@@ -16080,8 +16999,8 @@ function FooterContainerChrome({
|
|
|
16080
16999
|
width: rect.width + chromeGap * 2,
|
|
16081
17000
|
height: rect.height + chromeGap * 2
|
|
16082
17001
|
},
|
|
16083
|
-
children: /* @__PURE__ */
|
|
16084
|
-
/* @__PURE__ */
|
|
17002
|
+
children: /* @__PURE__ */ jsxs21(Tooltip, { children: [
|
|
17003
|
+
/* @__PURE__ */ jsx31(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx31(
|
|
16085
17004
|
"button",
|
|
16086
17005
|
{
|
|
16087
17006
|
type: "button",
|
|
@@ -16100,17 +17019,17 @@ function FooterContainerChrome({
|
|
|
16100
17019
|
if (addDisabled) return;
|
|
16101
17020
|
onAdd();
|
|
16102
17021
|
},
|
|
16103
|
-
children: /* @__PURE__ */
|
|
17022
|
+
children: /* @__PURE__ */ jsx31(Plus2, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
16104
17023
|
}
|
|
16105
17024
|
) }),
|
|
16106
|
-
/* @__PURE__ */
|
|
17025
|
+
/* @__PURE__ */ jsx31(TooltipContent, { side: "bottom", sideOffset: 9, children: addDisabled ? "Maximum columns reached" : "Add item" })
|
|
16107
17026
|
] })
|
|
16108
17027
|
}
|
|
16109
17028
|
) });
|
|
16110
17029
|
}
|
|
16111
17030
|
|
|
16112
17031
|
// src/lib/carousel.ts
|
|
16113
|
-
import { useEffect as
|
|
17032
|
+
import { useEffect as useEffect14, useState as useState15 } from "react";
|
|
16114
17033
|
var CAROUSEL_ATTR = "data-ohw-carousel";
|
|
16115
17034
|
var CAROUSEL_VALUE_ATTR = "data-ohw-carousel-value";
|
|
16116
17035
|
var CAROUSEL_SLIDE_ATTR = "data-ohw-carousel-slide";
|
|
@@ -16172,8 +17091,8 @@ function applyCarouselNode(key, val) {
|
|
|
16172
17091
|
return true;
|
|
16173
17092
|
}
|
|
16174
17093
|
function useOhwCarousel(key, initial) {
|
|
16175
|
-
const [images, setImages] =
|
|
16176
|
-
|
|
17094
|
+
const [images, setImages] = useState15(initial);
|
|
17095
|
+
useEffect14(() => {
|
|
16177
17096
|
const el = document.querySelector(
|
|
16178
17097
|
`[${CAROUSEL_ATTR}][data-ohw-key="${CSS.escape(key)}"]`
|
|
16179
17098
|
);
|
|
@@ -16586,13 +17505,13 @@ function deleteSelectedNavFooterItem(deps) {
|
|
|
16586
17505
|
|
|
16587
17506
|
// src/ui/navbar-container-chrome.tsx
|
|
16588
17507
|
import { Plus as Plus3 } from "lucide-react";
|
|
16589
|
-
import { jsx as
|
|
17508
|
+
import { jsx as jsx32 } from "react/jsx-runtime";
|
|
16590
17509
|
function NavbarContainerChrome({
|
|
16591
17510
|
rect,
|
|
16592
17511
|
onAdd
|
|
16593
17512
|
}) {
|
|
16594
17513
|
const chromeGap = 6;
|
|
16595
|
-
return /* @__PURE__ */
|
|
17514
|
+
return /* @__PURE__ */ jsx32(
|
|
16596
17515
|
"div",
|
|
16597
17516
|
{
|
|
16598
17517
|
"data-ohw-navbar-container-chrome": "",
|
|
@@ -16604,7 +17523,7 @@ function NavbarContainerChrome({
|
|
|
16604
17523
|
width: rect.width + chromeGap * 2,
|
|
16605
17524
|
height: rect.height + chromeGap * 2
|
|
16606
17525
|
},
|
|
16607
|
-
children: /* @__PURE__ */
|
|
17526
|
+
children: /* @__PURE__ */ jsx32(
|
|
16608
17527
|
"button",
|
|
16609
17528
|
{
|
|
16610
17529
|
type: "button",
|
|
@@ -16621,7 +17540,7 @@ function NavbarContainerChrome({
|
|
|
16621
17540
|
e.stopPropagation();
|
|
16622
17541
|
onAdd();
|
|
16623
17542
|
},
|
|
16624
|
-
children: /* @__PURE__ */
|
|
17543
|
+
children: /* @__PURE__ */ jsx32(Plus3, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
16625
17544
|
}
|
|
16626
17545
|
)
|
|
16627
17546
|
}
|
|
@@ -16630,7 +17549,7 @@ function NavbarContainerChrome({
|
|
|
16630
17549
|
|
|
16631
17550
|
// src/ui/drop-indicator.tsx
|
|
16632
17551
|
import * as React11 from "react";
|
|
16633
|
-
import { jsx as
|
|
17552
|
+
import { jsx as jsx33 } from "react/jsx-runtime";
|
|
16634
17553
|
var dropIndicatorVariants = cva(
|
|
16635
17554
|
"ov-gap-line pointer-events-none shrink-0 transition-opacity duration-150",
|
|
16636
17555
|
{
|
|
@@ -16654,7 +17573,7 @@ var dropIndicatorVariants = cva(
|
|
|
16654
17573
|
);
|
|
16655
17574
|
var DropIndicator = React11.forwardRef(
|
|
16656
17575
|
({ className, direction, state, ...props }, ref) => {
|
|
16657
|
-
return /* @__PURE__ */
|
|
17576
|
+
return /* @__PURE__ */ jsx33(
|
|
16658
17577
|
"div",
|
|
16659
17578
|
{
|
|
16660
17579
|
ref,
|
|
@@ -16671,7 +17590,7 @@ var DropIndicator = React11.forwardRef(
|
|
|
16671
17590
|
DropIndicator.displayName = "DropIndicator";
|
|
16672
17591
|
|
|
16673
17592
|
// src/ui/badge.tsx
|
|
16674
|
-
import { jsx as
|
|
17593
|
+
import { jsx as jsx34 } from "react/jsx-runtime";
|
|
16675
17594
|
var badgeVariants = cva(
|
|
16676
17595
|
"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
17596
|
{
|
|
@@ -16689,13 +17608,13 @@ var badgeVariants = cva(
|
|
|
16689
17608
|
}
|
|
16690
17609
|
);
|
|
16691
17610
|
function Badge({ className, variant, ...props }) {
|
|
16692
|
-
return /* @__PURE__ */
|
|
17611
|
+
return /* @__PURE__ */ jsx34("div", { className: cn(badgeVariants({ variant }), className), ...props });
|
|
16693
17612
|
}
|
|
16694
17613
|
|
|
16695
17614
|
// src/OhhwellsBridge.tsx
|
|
16696
17615
|
import { Link as Link2, Plus as Plus4, Settings } from "lucide-react";
|
|
16697
|
-
import { Fragment as
|
|
16698
|
-
var
|
|
17616
|
+
import { Fragment as Fragment10, jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
17617
|
+
var PRIMARY5 = "#0885FE";
|
|
16699
17618
|
var IMAGE_FADE_MS = 300;
|
|
16700
17619
|
var MEDIA_SETTLE_TIMEOUT_MS = 2500;
|
|
16701
17620
|
function runOpacityFade(el, onDone) {
|
|
@@ -16816,7 +17735,7 @@ function duplicateSchedulingWidget(instanceId, scheduleId) {
|
|
|
16816
17735
|
schedulingRoots.set(container, root);
|
|
16817
17736
|
flushSync2(() => {
|
|
16818
17737
|
root.render(
|
|
16819
|
-
/* @__PURE__ */
|
|
17738
|
+
/* @__PURE__ */ jsx35(
|
|
16820
17739
|
SchedulingWidget,
|
|
16821
17740
|
{
|
|
16822
17741
|
notifyOnConnect: false,
|
|
@@ -16954,7 +17873,7 @@ function mountSchedulingWidget(insertAfter, notifyOnConnect = false, scheduleId,
|
|
|
16954
17873
|
schedulingRoots.set(container, root);
|
|
16955
17874
|
flushSync2(() => {
|
|
16956
17875
|
root.render(
|
|
16957
|
-
/* @__PURE__ */
|
|
17876
|
+
/* @__PURE__ */ jsx35(
|
|
16958
17877
|
SchedulingWidget,
|
|
16959
17878
|
{
|
|
16960
17879
|
notifyOnConnect,
|
|
@@ -17674,7 +18593,7 @@ var TOOLBAR_STROKE_GAP2 = 4;
|
|
|
17674
18593
|
var TOOLBAR_OFFSET_FROM_ELEMENT = SELECTION_CHROME_GAP2 + TOOLBAR_STROKE_GAP2;
|
|
17675
18594
|
var HOVER_STROKE_WIDTH = 1.5;
|
|
17676
18595
|
var TEXT_HOVER_SIDE_PAD = 4;
|
|
17677
|
-
var CHROME_PRIMARY = `var(--ohw-primary, ${
|
|
18596
|
+
var CHROME_PRIMARY = `var(--ohw-primary, ${PRIMARY5})`;
|
|
17678
18597
|
var TOOLBAR_GROUPS = [
|
|
17679
18598
|
[
|
|
17680
18599
|
{ cmd: "bold", title: "Bold" },
|
|
@@ -17700,7 +18619,7 @@ function EditGlowChrome({
|
|
|
17700
18619
|
hideHandle = false
|
|
17701
18620
|
}) {
|
|
17702
18621
|
const GAP = SELECTION_CHROME_GAP2;
|
|
17703
|
-
return /* @__PURE__ */
|
|
18622
|
+
return /* @__PURE__ */ jsxs22(
|
|
17704
18623
|
"div",
|
|
17705
18624
|
{
|
|
17706
18625
|
ref: elRef,
|
|
@@ -17715,7 +18634,7 @@ function EditGlowChrome({
|
|
|
17715
18634
|
zIndex: 2147483646
|
|
17716
18635
|
},
|
|
17717
18636
|
children: [
|
|
17718
|
-
/* @__PURE__ */
|
|
18637
|
+
/* @__PURE__ */ jsx35(
|
|
17719
18638
|
"div",
|
|
17720
18639
|
{
|
|
17721
18640
|
style: {
|
|
@@ -17729,7 +18648,7 @@ function EditGlowChrome({
|
|
|
17729
18648
|
}
|
|
17730
18649
|
}
|
|
17731
18650
|
),
|
|
17732
|
-
reorderHrefKey && !hideHandle && /* @__PURE__ */
|
|
18651
|
+
reorderHrefKey && !hideHandle && /* @__PURE__ */ jsx35(
|
|
17733
18652
|
"div",
|
|
17734
18653
|
{
|
|
17735
18654
|
"data-ohw-drag-handle-container": "",
|
|
@@ -17741,7 +18660,7 @@ function EditGlowChrome({
|
|
|
17741
18660
|
transform: "translate(calc(-100% - 7px), -50%)",
|
|
17742
18661
|
pointerEvents: dragDisabled ? "none" : "auto"
|
|
17743
18662
|
},
|
|
17744
|
-
children: /* @__PURE__ */
|
|
18663
|
+
children: /* @__PURE__ */ jsx35(
|
|
17745
18664
|
DragHandle,
|
|
17746
18665
|
{
|
|
17747
18666
|
"aria-label": `Reorder ${reorderHrefKey}`,
|
|
@@ -17955,7 +18874,7 @@ function FloatingToolbar({
|
|
|
17955
18874
|
return () => ro.disconnect();
|
|
17956
18875
|
}, [showEditLink, activeCommands]);
|
|
17957
18876
|
const { top, left, transform } = calcToolbarPos(rect, parentScroll, measuredW);
|
|
17958
|
-
return /* @__PURE__ */
|
|
18877
|
+
return /* @__PURE__ */ jsx35(
|
|
17959
18878
|
"div",
|
|
17960
18879
|
{
|
|
17961
18880
|
ref: setRefs,
|
|
@@ -17967,12 +18886,12 @@ function FloatingToolbar({
|
|
|
17967
18886
|
zIndex: 2147483647,
|
|
17968
18887
|
pointerEvents: "auto"
|
|
17969
18888
|
},
|
|
17970
|
-
children: /* @__PURE__ */
|
|
17971
|
-
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */
|
|
17972
|
-
gi > 0 && /* @__PURE__ */
|
|
18889
|
+
children: /* @__PURE__ */ jsxs22(CustomToolbar, { children: [
|
|
18890
|
+
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ jsxs22(React12.Fragment, { children: [
|
|
18891
|
+
gi > 0 && /* @__PURE__ */ jsx35(CustomToolbarDivider, {}),
|
|
17973
18892
|
btns.map((btn) => {
|
|
17974
18893
|
const isActive = activeCommands.has(btn.cmd);
|
|
17975
|
-
return /* @__PURE__ */
|
|
18894
|
+
return /* @__PURE__ */ jsx35(
|
|
17976
18895
|
CustomToolbarButton,
|
|
17977
18896
|
{
|
|
17978
18897
|
title: btn.title,
|
|
@@ -17981,7 +18900,7 @@ function FloatingToolbar({
|
|
|
17981
18900
|
e.preventDefault();
|
|
17982
18901
|
onCommand(btn.cmd);
|
|
17983
18902
|
},
|
|
17984
|
-
children: /* @__PURE__ */
|
|
18903
|
+
children: /* @__PURE__ */ jsx35(
|
|
17985
18904
|
"svg",
|
|
17986
18905
|
{
|
|
17987
18906
|
width: "16",
|
|
@@ -18002,7 +18921,7 @@ function FloatingToolbar({
|
|
|
18002
18921
|
);
|
|
18003
18922
|
})
|
|
18004
18923
|
] }, gi)),
|
|
18005
|
-
showEditLink ? /* @__PURE__ */
|
|
18924
|
+
showEditLink ? /* @__PURE__ */ jsx35(
|
|
18006
18925
|
CustomToolbarButton,
|
|
18007
18926
|
{
|
|
18008
18927
|
type: "button",
|
|
@@ -18016,7 +18935,7 @@ function FloatingToolbar({
|
|
|
18016
18935
|
e.preventDefault();
|
|
18017
18936
|
e.stopPropagation();
|
|
18018
18937
|
},
|
|
18019
|
-
children: /* @__PURE__ */
|
|
18938
|
+
children: /* @__PURE__ */ jsx35(Link2, { className: "size-4 shrink-0", "aria-hidden": true })
|
|
18020
18939
|
}
|
|
18021
18940
|
) : null
|
|
18022
18941
|
] })
|
|
@@ -18033,7 +18952,7 @@ function StateToggle({
|
|
|
18033
18952
|
states,
|
|
18034
18953
|
onStateChange
|
|
18035
18954
|
}) {
|
|
18036
|
-
return /* @__PURE__ */
|
|
18955
|
+
return /* @__PURE__ */ jsx35(
|
|
18037
18956
|
ToggleGroup,
|
|
18038
18957
|
{
|
|
18039
18958
|
"data-ohw-state-toggle": "",
|
|
@@ -18047,7 +18966,7 @@ function StateToggle({
|
|
|
18047
18966
|
left: rect.right - 8,
|
|
18048
18967
|
transform: "translateX(-100%)"
|
|
18049
18968
|
},
|
|
18050
|
-
children: states.map((state) => /* @__PURE__ */
|
|
18969
|
+
children: states.map((state) => /* @__PURE__ */ jsx35(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
|
|
18051
18970
|
}
|
|
18052
18971
|
);
|
|
18053
18972
|
}
|
|
@@ -18063,9 +18982,9 @@ var OHW_LOADER_STYLE = {
|
|
|
18063
18982
|
justifyContent: "center"
|
|
18064
18983
|
};
|
|
18065
18984
|
function OhwLoaderSpinner() {
|
|
18066
|
-
return /* @__PURE__ */
|
|
18067
|
-
/* @__PURE__ */
|
|
18068
|
-
/* @__PURE__ */
|
|
18985
|
+
return /* @__PURE__ */ jsxs22("svg", { width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", "aria-hidden": true, children: [
|
|
18986
|
+
/* @__PURE__ */ jsx35("circle", { cx: "14", cy: "14", r: "11", stroke: "#E7E5E4", strokeWidth: "3" }),
|
|
18987
|
+
/* @__PURE__ */ jsx35(
|
|
18069
18988
|
"circle",
|
|
18070
18989
|
{
|
|
18071
18990
|
cx: "14",
|
|
@@ -18075,7 +18994,7 @@ function OhwLoaderSpinner() {
|
|
|
18075
18994
|
strokeWidth: "3",
|
|
18076
18995
|
strokeDasharray: "17 52",
|
|
18077
18996
|
strokeLinecap: "round",
|
|
18078
|
-
children: /* @__PURE__ */
|
|
18997
|
+
children: /* @__PURE__ */ jsx35(
|
|
18079
18998
|
"animateTransform",
|
|
18080
18999
|
{
|
|
18081
19000
|
attributeName: "transform",
|
|
@@ -18091,7 +19010,7 @@ function OhwLoaderSpinner() {
|
|
|
18091
19010
|
] });
|
|
18092
19011
|
}
|
|
18093
19012
|
function OhwBrandMark() {
|
|
18094
|
-
return /* @__PURE__ */
|
|
19013
|
+
return /* @__PURE__ */ jsxs22(
|
|
18095
19014
|
"svg",
|
|
18096
19015
|
{
|
|
18097
19016
|
width: "16",
|
|
@@ -18102,7 +19021,7 @@ function OhwBrandMark() {
|
|
|
18102
19021
|
style: { display: "block", flexShrink: 0 },
|
|
18103
19022
|
xmlns: "http://www.w3.org/2000/svg",
|
|
18104
19023
|
children: [
|
|
18105
|
-
/* @__PURE__ */
|
|
19024
|
+
/* @__PURE__ */ jsx35(
|
|
18106
19025
|
"mask",
|
|
18107
19026
|
{
|
|
18108
19027
|
id: "ohw-badge-mark",
|
|
@@ -18112,15 +19031,15 @@ function OhwBrandMark() {
|
|
|
18112
19031
|
y: "0",
|
|
18113
19032
|
width: "48",
|
|
18114
19033
|
height: "48",
|
|
18115
|
-
children: /* @__PURE__ */
|
|
19034
|
+
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
19035
|
}
|
|
18117
19036
|
),
|
|
18118
|
-
/* @__PURE__ */
|
|
18119
|
-
/* @__PURE__ */
|
|
18120
|
-
/* @__PURE__ */
|
|
18121
|
-
/* @__PURE__ */
|
|
18122
|
-
/* @__PURE__ */
|
|
18123
|
-
/* @__PURE__ */
|
|
19037
|
+
/* @__PURE__ */ jsxs22("g", { mask: "url(#ohw-badge-mark)", children: [
|
|
19038
|
+
/* @__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" }),
|
|
19039
|
+
/* @__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" }),
|
|
19040
|
+
/* @__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" }),
|
|
19041
|
+
/* @__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" }),
|
|
19042
|
+
/* @__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
19043
|
] })
|
|
18125
19044
|
]
|
|
18126
19045
|
}
|
|
@@ -18157,7 +19076,7 @@ var OHW_BADGE_LABEL_STYLE = {
|
|
|
18157
19076
|
whiteSpace: "nowrap"
|
|
18158
19077
|
};
|
|
18159
19078
|
function MadeWithOhhWells() {
|
|
18160
|
-
return /* @__PURE__ */
|
|
19079
|
+
return /* @__PURE__ */ jsxs22(
|
|
18161
19080
|
"a",
|
|
18162
19081
|
{
|
|
18163
19082
|
href: "https://ohhwells.com",
|
|
@@ -18167,8 +19086,8 @@ function MadeWithOhhWells() {
|
|
|
18167
19086
|
"data-ohw-badge": "",
|
|
18168
19087
|
style: OHW_BADGE_STYLE,
|
|
18169
19088
|
children: [
|
|
18170
|
-
/* @__PURE__ */
|
|
18171
|
-
/* @__PURE__ */
|
|
19089
|
+
/* @__PURE__ */ jsx35(OhwBrandMark, {}),
|
|
19090
|
+
/* @__PURE__ */ jsx35("span", { style: OHW_BADGE_LABEL_STYLE, children: "Made with OhhWells" })
|
|
18172
19091
|
]
|
|
18173
19092
|
}
|
|
18174
19093
|
);
|
|
@@ -18214,8 +19133,8 @@ function OhhwellsBridge() {
|
|
|
18214
19133
|
const router = useRouter3();
|
|
18215
19134
|
const searchParams = useSearchParams();
|
|
18216
19135
|
const isEditMode = isEditSessionActive();
|
|
18217
|
-
const [bridgeRoot, setBridgeRoot] =
|
|
18218
|
-
|
|
19136
|
+
const [bridgeRoot, setBridgeRoot] = useState16(null);
|
|
19137
|
+
useEffect15(() => {
|
|
18219
19138
|
const figtreeFontId = "ohw-figtree-font";
|
|
18220
19139
|
if (!document.getElementById(figtreeFontId)) {
|
|
18221
19140
|
const preconnect1 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.googleapis.com" });
|
|
@@ -18241,7 +19160,7 @@ function OhhwellsBridge() {
|
|
|
18241
19160
|
};
|
|
18242
19161
|
}, []);
|
|
18243
19162
|
const subdomainFromQuery = searchParams.get("subdomain");
|
|
18244
|
-
const [subdomain, setSubdomain] =
|
|
19163
|
+
const [subdomain, setSubdomain] = useState16(() => resolveSubdomain(subdomainFromQuery));
|
|
18245
19164
|
useLayoutEffect5(() => {
|
|
18246
19165
|
const next = resolveSubdomain(subdomainFromQuery);
|
|
18247
19166
|
if (next !== subdomain) setSubdomain(next);
|
|
@@ -18254,7 +19173,7 @@ function OhhwellsBridge() {
|
|
|
18254
19173
|
}, 0);
|
|
18255
19174
|
return () => window.clearTimeout(t);
|
|
18256
19175
|
}, [subdomainFromQuery, subdomain]);
|
|
18257
|
-
|
|
19176
|
+
useEffect15(() => {
|
|
18258
19177
|
if (!subdomainFromQuery || typeof window === "undefined") return;
|
|
18259
19178
|
const url = new URL(window.location.href);
|
|
18260
19179
|
if (!url.searchParams.has("subdomain")) return;
|
|
@@ -18263,45 +19182,45 @@ function OhhwellsBridge() {
|
|
|
18263
19182
|
}, [subdomainFromQuery]);
|
|
18264
19183
|
useLinkHrefGuardian(pathname, subdomain, isEditMode);
|
|
18265
19184
|
useSavedLinkNavigation(isEditMode);
|
|
18266
|
-
const postToParent2 =
|
|
19185
|
+
const postToParent2 = useCallback10((data) => {
|
|
18267
19186
|
if (typeof window !== "undefined" && window.parent !== window) {
|
|
18268
19187
|
window.parent.postMessage(data, "*");
|
|
18269
19188
|
}
|
|
18270
19189
|
}, []);
|
|
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 =
|
|
19190
|
+
const [fetchState, setFetchState] = useState16("idle");
|
|
19191
|
+
const [showBranding, setShowBranding] = useState16(false);
|
|
19192
|
+
const autoSaveTimers = useRef12(/* @__PURE__ */ new Map());
|
|
19193
|
+
const activeElRef = useRef12(null);
|
|
19194
|
+
const pointerHeldRef = useRef12(false);
|
|
19195
|
+
const selectedElRef = useRef12(null);
|
|
19196
|
+
const selectedHrefKeyRef = useRef12(null);
|
|
19197
|
+
const selectedFooterColAttrRef = useRef12(null);
|
|
19198
|
+
const originalContentRef = useRef12(null);
|
|
19199
|
+
const activeStateElRef = useRef12(null);
|
|
19200
|
+
const parentScrollRef = useRef12(null);
|
|
19201
|
+
const visibleViewportRef = useRef12(null);
|
|
19202
|
+
const [dialogPortalContainer, setDialogPortalContainer] = useState16(null);
|
|
19203
|
+
const attachVisibleViewport = useCallback10((node) => {
|
|
18285
19204
|
visibleViewportRef.current = node;
|
|
18286
19205
|
setDialogPortalContainer(node);
|
|
18287
19206
|
if (node) applyVisibleViewport(node, parentScrollRef.current);
|
|
18288
19207
|
}, []);
|
|
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 =
|
|
19208
|
+
const toolbarElRef = useRef12(null);
|
|
19209
|
+
const glowElRef = useRef12(null);
|
|
19210
|
+
const hoveredImageRef = useRef12(null);
|
|
19211
|
+
const hoveredImageHasTextOverlapRef = useRef12(false);
|
|
19212
|
+
const dragOverElRef = useRef12(null);
|
|
19213
|
+
const [mediaHover, setMediaHover] = useState16(null);
|
|
19214
|
+
const [selectedAiSectionId, setSelectedAiSectionId] = useState16(null);
|
|
19215
|
+
const selectedAiSectionIdRef = useRef12(null);
|
|
19216
|
+
const handleAiSectionSelectionChange = useCallback10((id) => {
|
|
18298
19217
|
selectedAiSectionIdRef.current = id;
|
|
18299
19218
|
setSelectedAiSectionId(id);
|
|
18300
19219
|
}, []);
|
|
18301
|
-
const [selectedMedia, setSelectedMedia] =
|
|
18302
|
-
const selectedMediaElRef =
|
|
18303
|
-
const mediaKeyDropTokenRef =
|
|
18304
|
-
const clearMediaSelection =
|
|
19220
|
+
const [selectedMedia, setSelectedMedia] = useState16(null);
|
|
19221
|
+
const selectedMediaElRef = useRef12(null);
|
|
19222
|
+
const mediaKeyDropTokenRef = useRef12(0);
|
|
19223
|
+
const clearMediaSelection = useCallback10(() => {
|
|
18305
19224
|
const prev = selectedMediaElRef.current;
|
|
18306
19225
|
selectedMediaElRef.current = null;
|
|
18307
19226
|
setSelectedMedia(null);
|
|
@@ -18326,9 +19245,9 @@ function OhhwellsBridge() {
|
|
|
18326
19245
|
window.postMessage({ type: "ow:media-key-drop", token }, "*");
|
|
18327
19246
|
}
|
|
18328
19247
|
}, []);
|
|
18329
|
-
const clearMediaSelectionRef =
|
|
19248
|
+
const clearMediaSelectionRef = useRef12(clearMediaSelection);
|
|
18330
19249
|
clearMediaSelectionRef.current = clearMediaSelection;
|
|
18331
|
-
const selectMediaElement =
|
|
19250
|
+
const selectMediaElement = useCallback10((el) => {
|
|
18332
19251
|
const r2 = el.getBoundingClientRect();
|
|
18333
19252
|
const video = el.dataset.ohwEditable === "video" ? el.querySelector("video") : null;
|
|
18334
19253
|
selectedMediaElRef.current = el;
|
|
@@ -18352,9 +19271,9 @@ function OhhwellsBridge() {
|
|
|
18352
19271
|
keyLabel: el.dataset.ohwEditable === "video" ? "Video" : el.dataset.ohwEditable === "bg-image" ? "Background" : "Image"
|
|
18353
19272
|
});
|
|
18354
19273
|
}, []);
|
|
18355
|
-
const selectMediaElementRef =
|
|
19274
|
+
const selectMediaElementRef = useRef12(selectMediaElement);
|
|
18356
19275
|
selectMediaElementRef.current = selectMediaElement;
|
|
18357
|
-
|
|
19276
|
+
useEffect15(() => {
|
|
18358
19277
|
if (!selectedMedia) return;
|
|
18359
19278
|
const update = () => {
|
|
18360
19279
|
const el = selectedMediaElRef.current;
|
|
@@ -18374,55 +19293,54 @@ function OhhwellsBridge() {
|
|
|
18374
19293
|
window.removeEventListener("resize", update);
|
|
18375
19294
|
};
|
|
18376
19295
|
}, [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 =
|
|
19296
|
+
const [carouselHover, setCarouselHover] = useState16(null);
|
|
19297
|
+
const [uploadingRects, setUploadingRects] = useState16({});
|
|
19298
|
+
const hoveredGapRef = useRef12(null);
|
|
19299
|
+
const imageUnhoverTimerRef = useRef12(null);
|
|
19300
|
+
const imageShowTimerRef = useRef12(null);
|
|
19301
|
+
const editStylesRef = useRef12(null);
|
|
19302
|
+
const activateRef = useRef12(() => {
|
|
18384
19303
|
});
|
|
18385
|
-
const deactivateRef =
|
|
19304
|
+
const deactivateRef = useRef12(() => {
|
|
18386
19305
|
});
|
|
18387
|
-
const selectRef =
|
|
19306
|
+
const selectRef = useRef12(() => {
|
|
18388
19307
|
});
|
|
18389
|
-
const selectFrameRef =
|
|
19308
|
+
const selectFrameRef = useRef12(() => {
|
|
18390
19309
|
});
|
|
18391
|
-
const selectLogoRef =
|
|
19310
|
+
const selectLogoRef = useRef12(() => {
|
|
18392
19311
|
});
|
|
18393
|
-
const openLogoSizePanelRef =
|
|
19312
|
+
const openLogoSizePanelRef = useRef12(() => {
|
|
18394
19313
|
});
|
|
18395
|
-
const deselectRef =
|
|
19314
|
+
const deselectRef = useRef12(() => {
|
|
18396
19315
|
});
|
|
18397
|
-
const closeFloatingPanelOnlyRef =
|
|
19316
|
+
const closeFloatingPanelOnlyRef = useRef12(() => {
|
|
18398
19317
|
});
|
|
18399
|
-
const reselectNavigationItemRef =
|
|
19318
|
+
const reselectNavigationItemRef = useRef12(() => {
|
|
18400
19319
|
});
|
|
18401
|
-
const commitNavigationTextEditRef =
|
|
19320
|
+
const commitNavigationTextEditRef = useRef12(() => {
|
|
18402
19321
|
});
|
|
18403
|
-
const handleDeleteSelectedRef =
|
|
18404
|
-
const runPendingDeleteUndoRef =
|
|
18405
|
-
const isFooterFrameSelectionRef =
|
|
18406
|
-
const refreshActiveCommandsRef =
|
|
19322
|
+
const handleDeleteSelectedRef = useRef12(() => false);
|
|
19323
|
+
const runPendingDeleteUndoRef = useRef12(() => false);
|
|
19324
|
+
const isFooterFrameSelectionRef = useRef12(false);
|
|
19325
|
+
const refreshActiveCommandsRef = useRef12(() => {
|
|
18407
19326
|
});
|
|
18408
|
-
const postToParentRef =
|
|
19327
|
+
const postToParentRef = useRef12(postToParent2);
|
|
18409
19328
|
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(() => {
|
|
19329
|
+
const aiSectionApiRef = useRef12(null);
|
|
19330
|
+
const sectionsLoadedRef = useRef12(false);
|
|
19331
|
+
const pendingScheduleConfigRequests = useRef12([]);
|
|
19332
|
+
const [toolbarRect, setToolbarRect] = useState16(null);
|
|
19333
|
+
const [formPickRect, setFormPickRect] = useState16(null);
|
|
19334
|
+
const formPickElRef = useRef12(null);
|
|
19335
|
+
const [formViewState, setFormViewStateUi] = useState16("default");
|
|
19336
|
+
const [formPickCount, setFormPickCount] = useState16(null);
|
|
19337
|
+
const [formHoverRect, setFormHoverRect] = useState16(null);
|
|
19338
|
+
const formHoverElRef = useRef12(null);
|
|
19339
|
+
const [fieldPickRect, setFieldPickRect] = useState16(null);
|
|
19340
|
+
const fieldPickElRef = useRef12(null);
|
|
19341
|
+
const [fieldPickState, setFieldPickState] = useState16(null);
|
|
19342
|
+
const [fieldTypePickerOpen, setFieldTypePickerOpen] = useState16(false);
|
|
19343
|
+
const clearFormPick = useCallback10(() => {
|
|
18426
19344
|
const form = formPickElRef.current;
|
|
18427
19345
|
const editing = fieldPickElRef.current;
|
|
18428
19346
|
if (commitPlaceholderEdit(editing) && editing) {
|
|
@@ -18442,7 +19360,7 @@ function OhhwellsBridge() {
|
|
|
18442
19360
|
formPickElRef.current = null;
|
|
18443
19361
|
setFormPickRect(null);
|
|
18444
19362
|
}, []);
|
|
18445
|
-
const clearFieldPick =
|
|
19363
|
+
const clearFieldPick = useCallback10(() => {
|
|
18446
19364
|
const wrapper = fieldPickElRef.current;
|
|
18447
19365
|
if (commitPlaceholderEdit(wrapper) && wrapper) {
|
|
18448
19366
|
const form = wrapper.closest('[data-ohw-editable="form"]');
|
|
@@ -18452,9 +19370,9 @@ function OhhwellsBridge() {
|
|
|
18452
19370
|
setFieldPickRect(null);
|
|
18453
19371
|
setFieldPickState(null);
|
|
18454
19372
|
}, []);
|
|
18455
|
-
const persistFieldsRef =
|
|
19373
|
+
const persistFieldsRef = useRef12(() => {
|
|
18456
19374
|
});
|
|
18457
|
-
const persistFields =
|
|
19375
|
+
const persistFields = useCallback10(
|
|
18458
19376
|
(form) => {
|
|
18459
19377
|
const key = formKeyOf(form);
|
|
18460
19378
|
if (!key) return;
|
|
@@ -18465,7 +19383,7 @@ function OhhwellsBridge() {
|
|
|
18465
19383
|
[]
|
|
18466
19384
|
);
|
|
18467
19385
|
persistFieldsRef.current = persistFields;
|
|
18468
|
-
const selectField =
|
|
19386
|
+
const selectField = useCallback10((wrapper) => {
|
|
18469
19387
|
if (fieldPickElRef.current && fieldPickElRef.current !== wrapper) {
|
|
18470
19388
|
commitPlaceholderEdit(fieldPickElRef.current);
|
|
18471
19389
|
}
|
|
@@ -18478,7 +19396,7 @@ function OhhwellsBridge() {
|
|
|
18478
19396
|
setFieldPickState({ type: fieldTypeOf(wrapper), required: isFieldRequired(wrapper) });
|
|
18479
19397
|
setFieldTypePickerOpen(false);
|
|
18480
19398
|
}, []);
|
|
18481
|
-
const withSelectedField =
|
|
19399
|
+
const withSelectedField = useCallback10(
|
|
18482
19400
|
(run) => {
|
|
18483
19401
|
const wrapper = fieldPickElRef.current;
|
|
18484
19402
|
const form = formPickElRef.current;
|
|
@@ -18491,28 +19409,28 @@ function OhhwellsBridge() {
|
|
|
18491
19409
|
},
|
|
18492
19410
|
[persistFields]
|
|
18493
19411
|
);
|
|
18494
|
-
const handleFieldTypeChange =
|
|
19412
|
+
const handleFieldTypeChange = useCallback10(
|
|
18495
19413
|
(type) => withSelectedField((_form, wrapper) => {
|
|
18496
19414
|
applyFieldType(wrapper, type);
|
|
18497
19415
|
selectField(wrapper);
|
|
18498
19416
|
}),
|
|
18499
19417
|
[selectField, withSelectedField]
|
|
18500
19418
|
);
|
|
18501
|
-
const handleFieldRequiredToggle =
|
|
19419
|
+
const handleFieldRequiredToggle = useCallback10(
|
|
18502
19420
|
() => withSelectedField((_form, wrapper) => {
|
|
18503
19421
|
setFieldRequired(wrapper, !isFieldRequired(wrapper));
|
|
18504
19422
|
selectField(wrapper);
|
|
18505
19423
|
}),
|
|
18506
19424
|
[selectField, withSelectedField]
|
|
18507
19425
|
);
|
|
18508
|
-
const handleFieldDuplicate =
|
|
19426
|
+
const handleFieldDuplicate = useCallback10(
|
|
18509
19427
|
() => withSelectedField((form, wrapper) => {
|
|
18510
19428
|
const copy = duplicateField(form, wrapper);
|
|
18511
19429
|
selectField(copy);
|
|
18512
19430
|
}),
|
|
18513
19431
|
[selectField, withSelectedField]
|
|
18514
19432
|
);
|
|
18515
|
-
const handleFieldDelete =
|
|
19433
|
+
const handleFieldDelete = useCallback10(
|
|
18516
19434
|
() => withSelectedField((_form, wrapper) => {
|
|
18517
19435
|
removeField(wrapper);
|
|
18518
19436
|
clearFieldPick();
|
|
@@ -18520,7 +19438,7 @@ function OhhwellsBridge() {
|
|
|
18520
19438
|
}),
|
|
18521
19439
|
[clearFieldPick, withSelectedField]
|
|
18522
19440
|
);
|
|
18523
|
-
const handleAddField =
|
|
19441
|
+
const handleAddField = useCallback10(
|
|
18524
19442
|
(type) => {
|
|
18525
19443
|
const form = formPickElRef.current;
|
|
18526
19444
|
if (!form) return;
|
|
@@ -18536,8 +19454,8 @@ function OhhwellsBridge() {
|
|
|
18536
19454
|
},
|
|
18537
19455
|
[persistFields, selectField]
|
|
18538
19456
|
);
|
|
18539
|
-
const fieldDragRef =
|
|
18540
|
-
const buildFieldDropSlots =
|
|
19457
|
+
const fieldDragRef = useRef12(null);
|
|
19458
|
+
const buildFieldDropSlots = useCallback10((form, draggedKey) => {
|
|
18541
19459
|
const others = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== draggedKey);
|
|
18542
19460
|
const slots = others.map((el) => {
|
|
18543
19461
|
const rect = el.getBoundingClientRect();
|
|
@@ -18550,7 +19468,7 @@ function OhhwellsBridge() {
|
|
|
18550
19468
|
}
|
|
18551
19469
|
return slots;
|
|
18552
19470
|
}, []);
|
|
18553
|
-
const handleFieldDragStart =
|
|
19471
|
+
const handleFieldDragStart = useCallback10(() => {
|
|
18554
19472
|
const wrapper = fieldPickElRef.current;
|
|
18555
19473
|
const form = formPickElRef.current;
|
|
18556
19474
|
if (!wrapper || !form) return;
|
|
@@ -18559,18 +19477,18 @@ function OhhwellsBridge() {
|
|
|
18559
19477
|
setFieldDragging(true);
|
|
18560
19478
|
setFieldDropSlots(buildFieldDropSlots(form, key));
|
|
18561
19479
|
}, [buildFieldDropSlots]);
|
|
18562
|
-
const handleFieldDragEnd =
|
|
19480
|
+
const handleFieldDragEnd = useCallback10(() => {
|
|
18563
19481
|
fieldDragRef.current = null;
|
|
18564
19482
|
setFieldDropIndex(null);
|
|
18565
19483
|
setFieldDropSlots([]);
|
|
18566
19484
|
setFieldDragging(false);
|
|
18567
19485
|
}, []);
|
|
18568
|
-
const [fieldDropIndex, setFieldDropIndex] =
|
|
18569
|
-
const [fieldDropSlots, setFieldDropSlots] =
|
|
18570
|
-
const [fieldDragging, setFieldDragging] =
|
|
18571
|
-
const clearFormPickRef =
|
|
19486
|
+
const [fieldDropIndex, setFieldDropIndex] = useState16(null);
|
|
19487
|
+
const [fieldDropSlots, setFieldDropSlots] = useState16([]);
|
|
19488
|
+
const [fieldDragging, setFieldDragging] = useState16(false);
|
|
19489
|
+
const clearFormPickRef = useRef12(clearFormPick);
|
|
18572
19490
|
clearFormPickRef.current = clearFormPick;
|
|
18573
|
-
|
|
19491
|
+
useEffect15(() => {
|
|
18574
19492
|
const el = fieldPickElRef.current;
|
|
18575
19493
|
if (!el || fieldPickRect === null) return;
|
|
18576
19494
|
const observer = new ResizeObserver(() => {
|
|
@@ -18579,7 +19497,7 @@ function OhhwellsBridge() {
|
|
|
18579
19497
|
observer.observe(el);
|
|
18580
19498
|
return () => observer.disconnect();
|
|
18581
19499
|
}, [fieldPickRect !== null, fieldPickState]);
|
|
18582
|
-
|
|
19500
|
+
useEffect15(() => {
|
|
18583
19501
|
const el = formPickElRef.current;
|
|
18584
19502
|
if (!el || formPickRect === null) return;
|
|
18585
19503
|
const observer = new ResizeObserver(() => {
|
|
@@ -18588,25 +19506,25 @@ function OhhwellsBridge() {
|
|
|
18588
19506
|
observer.observe(el);
|
|
18589
19507
|
return () => observer.disconnect();
|
|
18590
19508
|
}, [formPickRect !== null, formViewState]);
|
|
18591
|
-
const [toolbarVariant, setToolbarVariant] =
|
|
18592
|
-
const toolbarVariantRef =
|
|
19509
|
+
const [toolbarVariant, setToolbarVariant] = useState16("none");
|
|
19510
|
+
const toolbarVariantRef = useRef12("none");
|
|
18593
19511
|
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
|
-
|
|
19512
|
+
const [selectedIsCta, setSelectedIsCta] = useState16(false);
|
|
19513
|
+
const [selectedIsSocial, setSelectedIsSocial] = useState16(false);
|
|
19514
|
+
const [selectedIsSocialsRow, setSelectedIsSocialsRow] = useState16(false);
|
|
19515
|
+
const [reorderHrefKey, setReorderHrefKey] = useState16(null);
|
|
19516
|
+
const [reorderDragDisabled, setReorderDragDisabled] = useState16(false);
|
|
19517
|
+
const [toggleState, setToggleState] = useState16(null);
|
|
19518
|
+
const [maxBadge, setMaxBadge] = useState16(null);
|
|
19519
|
+
const [activeCommands, setActiveCommands] = useState16(/* @__PURE__ */ new Set());
|
|
19520
|
+
const [sectionGap, setSectionGap] = useState16(null);
|
|
19521
|
+
const [toolbarShowEditLink, setToolbarShowEditLink] = useState16(false);
|
|
19522
|
+
const hoveredNavContainerRef = useRef12(null);
|
|
19523
|
+
const [hoveredNavContainerRect, setHoveredNavContainerRect] = useState16(null);
|
|
19524
|
+
const hoveredItemElRef = useRef12(null);
|
|
19525
|
+
const [hoveredItemRect, setHoveredItemRect] = useState16(null);
|
|
19526
|
+
const [hoveredTextRect, setHoveredTextRect] = useState16(null);
|
|
19527
|
+
useEffect15(() => {
|
|
18610
19528
|
const sync = () => {
|
|
18611
19529
|
const el = document.querySelector(
|
|
18612
19530
|
'[data-ohw-hovered]:not([contenteditable]):not([data-ohw-href-key]):not([data-ohw-editable="form"] *)'
|
|
@@ -18650,46 +19568,61 @@ function OhhwellsBridge() {
|
|
|
18650
19568
|
});
|
|
18651
19569
|
return () => observer.disconnect();
|
|
18652
19570
|
}, []);
|
|
18653
|
-
const siblingHintElRef =
|
|
18654
|
-
const [siblingHintRect, setSiblingHintRect] =
|
|
18655
|
-
const [siblingHintRects, setSiblingHintRects] =
|
|
18656
|
-
const [isItemDragging, setIsItemDragging] =
|
|
18657
|
-
const [isFooterFrameSelection, setIsFooterFrameSelection] =
|
|
19571
|
+
const siblingHintElRef = useRef12(null);
|
|
19572
|
+
const [siblingHintRect, setSiblingHintRect] = useState16(null);
|
|
19573
|
+
const [siblingHintRects, setSiblingHintRects] = useState16([]);
|
|
19574
|
+
const [isItemDragging, setIsItemDragging] = useState16(false);
|
|
19575
|
+
const [isFooterFrameSelection, setIsFooterFrameSelection] = useState16(false);
|
|
18658
19576
|
isFooterFrameSelectionRef.current = isFooterFrameSelection;
|
|
18659
|
-
const [floatingPanel, setFloatingPanel] =
|
|
18660
|
-
const floatingPanelOpenRef =
|
|
19577
|
+
const [floatingPanel, setFloatingPanel] = useState16(null);
|
|
19578
|
+
const floatingPanelOpenRef = useRef12(false);
|
|
18661
19579
|
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
|
|
19580
|
+
const [floatingPanelPos, setFloatingPanelPos] = useState16(null);
|
|
19581
|
+
const [logoSizeDraft, setLogoSizeDraft] = useState16(null);
|
|
19582
|
+
const [editorViewport, setEditorViewport] = useState16("desktop");
|
|
19583
|
+
const [parentScrollSnap, setParentScrollSnap] = useState16(null);
|
|
19584
|
+
const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = useState16(null);
|
|
19585
|
+
const [footerHeadingVisible, setFooterHeadingVisible] = useState16(null);
|
|
19586
|
+
const footerDragRef = useRef12(null);
|
|
19587
|
+
const [footerDropSlots, setFooterDropSlots] = useState16([]);
|
|
19588
|
+
const [activeFooterDropIndex, setActiveFooterDropIndex] = useState16(null);
|
|
19589
|
+
const [draggedItemRect, setDraggedItemRect] = useState16(null);
|
|
19590
|
+
const footerPointerDragRef = useRef12(null);
|
|
19591
|
+
const suppressNextClickRef = useRef12(false);
|
|
19592
|
+
const suppressClickUntilRef = useRef12(0);
|
|
19593
|
+
const [linkPopover, setLinkPopover] = useState16(null);
|
|
19594
|
+
const linkPopoverSessionRef = useRef12(null);
|
|
19595
|
+
const addNavAfterAnchorRef = useRef12(null);
|
|
19596
|
+
const editContentRef = useRef12({});
|
|
19597
|
+
const aiSectionsRef = useRef12("");
|
|
19598
|
+
const applyTreeLocalRef = useRef12(
|
|
19599
|
+
null
|
|
19600
|
+
);
|
|
19601
|
+
const clearInteractionChromeRef = useRef12(() => {
|
|
19602
|
+
});
|
|
19603
|
+
const brandKitRef = useRef12("");
|
|
19604
|
+
const stylesRef = useRef12("");
|
|
19605
|
+
const appliedDrawerRef = useRef12(null);
|
|
19606
|
+
const pendingDeleteUndoRef = useRef12(null);
|
|
19607
|
+
const [sitePages, setSitePages] = useState16([]);
|
|
19608
|
+
const [sectionsByPath, setSectionsByPath] = useState16({});
|
|
19609
|
+
const sectionsPrefetchGenRef = useRef12(0);
|
|
19610
|
+
const setLinkPopoverRef = useRef12(setLinkPopover);
|
|
19611
|
+
const linkPopoverPanelRef = useRef12(null);
|
|
19612
|
+
const linkPopoverOpenRef = useRef12(false);
|
|
19613
|
+
const linkPopoverGraceUntilRef = useRef12(0);
|
|
18691
19614
|
setLinkPopoverRef.current = setLinkPopover;
|
|
18692
19615
|
linkPopoverSessionRef.current = linkPopover;
|
|
19616
|
+
useEffect15(() => {
|
|
19617
|
+
setSectionOrderPersistHandler((entries) => {
|
|
19618
|
+
const currentPath = window.location.pathname;
|
|
19619
|
+
const merged = mergePageSectionOrder(editContentRef.current[SECTION_ORDER_KEY], currentPath, entries);
|
|
19620
|
+
const text = JSON.stringify(merged);
|
|
19621
|
+
editContentRef.current = { ...editContentRef.current, [SECTION_ORDER_KEY]: text };
|
|
19622
|
+
postToParentRef.current({ type: "ow:change", nodes: [{ key: SECTION_ORDER_KEY, text }] });
|
|
19623
|
+
});
|
|
19624
|
+
return () => setSectionOrderPersistHandler(null);
|
|
19625
|
+
}, []);
|
|
18693
19626
|
const {
|
|
18694
19627
|
navDragRef,
|
|
18695
19628
|
navPointerDragRef,
|
|
@@ -18736,7 +19669,7 @@ function OhhwellsBridge() {
|
|
|
18736
19669
|
const bumpLinkPopoverGrace = () => {
|
|
18737
19670
|
linkPopoverGraceUntilRef.current = Date.now() + 350;
|
|
18738
19671
|
};
|
|
18739
|
-
const runSectionsPrefetch =
|
|
19672
|
+
const runSectionsPrefetch = useCallback10((pages) => {
|
|
18740
19673
|
if (!isEditMode || shouldUseDevFixtures() || pages.length === 0) return;
|
|
18741
19674
|
const gen = ++sectionsPrefetchGenRef.current;
|
|
18742
19675
|
const paths = pages.map((p) => p.path);
|
|
@@ -18755,9 +19688,9 @@ function OhhwellsBridge() {
|
|
|
18755
19688
|
);
|
|
18756
19689
|
});
|
|
18757
19690
|
}, [isEditMode, pathname]);
|
|
18758
|
-
const runSectionsPrefetchRef =
|
|
19691
|
+
const runSectionsPrefetchRef = useRef12(runSectionsPrefetch);
|
|
18759
19692
|
runSectionsPrefetchRef.current = runSectionsPrefetch;
|
|
18760
|
-
|
|
19693
|
+
useEffect15(() => {
|
|
18761
19694
|
if (!linkPopover) {
|
|
18762
19695
|
document.documentElement.removeAttribute("data-ohw-link-popover-open");
|
|
18763
19696
|
return;
|
|
@@ -18785,7 +19718,7 @@ function OhhwellsBridge() {
|
|
|
18785
19718
|
document.documentElement.removeAttribute("data-ohw-link-popover-open");
|
|
18786
19719
|
};
|
|
18787
19720
|
}, [linkPopover, postToParent2]);
|
|
18788
|
-
|
|
19721
|
+
useEffect15(() => {
|
|
18789
19722
|
if (!isEditMode) return;
|
|
18790
19723
|
const useFixtures = shouldUseDevFixtures();
|
|
18791
19724
|
if (useFixtures) {
|
|
@@ -18809,14 +19742,14 @@ function OhhwellsBridge() {
|
|
|
18809
19742
|
if (!useFixtures) postToParent2({ type: "ow:request-site-pages" });
|
|
18810
19743
|
return () => window.removeEventListener("message", onSitePages);
|
|
18811
19744
|
}, [isEditMode, postToParent2]);
|
|
18812
|
-
|
|
19745
|
+
useEffect15(() => {
|
|
18813
19746
|
if (!isEditMode || shouldUseDevFixtures()) return;
|
|
18814
19747
|
void loadAllSectionsManifest().then((manifest) => {
|
|
18815
19748
|
if (Object.keys(manifest).length === 0) return;
|
|
18816
19749
|
setSectionsByPath((prev) => ({ ...manifest, ...prev }));
|
|
18817
19750
|
});
|
|
18818
19751
|
}, [isEditMode]);
|
|
18819
|
-
|
|
19752
|
+
useEffect15(() => {
|
|
18820
19753
|
const update = () => {
|
|
18821
19754
|
const el = activeElRef.current ?? selectedElRef.current;
|
|
18822
19755
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
@@ -18840,10 +19773,10 @@ function OhhwellsBridge() {
|
|
|
18840
19773
|
vvp.removeEventListener("resize", update);
|
|
18841
19774
|
};
|
|
18842
19775
|
}, []);
|
|
18843
|
-
const refreshStateRules =
|
|
19776
|
+
const refreshStateRules = useCallback10(() => {
|
|
18844
19777
|
editStylesRef.current?.forceHover && (editStylesRef.current.forceHover.textContent = collectStateRules());
|
|
18845
19778
|
}, []);
|
|
18846
|
-
const processConfigRequest =
|
|
19779
|
+
const processConfigRequest = useCallback10((insertAfterVal) => {
|
|
18847
19780
|
const tracker = getSectionsTracker();
|
|
18848
19781
|
let entries = [];
|
|
18849
19782
|
try {
|
|
@@ -18866,7 +19799,7 @@ function OhhwellsBridge() {
|
|
|
18866
19799
|
}
|
|
18867
19800
|
window.postMessage({ type: "ow:schedule-config", insertAfter: insertAfterVal, scheduleId: null }, "*");
|
|
18868
19801
|
}, [isEditMode]);
|
|
18869
|
-
const deactivate =
|
|
19802
|
+
const deactivate = useCallback10(() => {
|
|
18870
19803
|
const el = activeElRef.current;
|
|
18871
19804
|
if (!el) return;
|
|
18872
19805
|
const isFormBlock = el.dataset.ohwEditable === "form";
|
|
@@ -18917,12 +19850,12 @@ function OhhwellsBridge() {
|
|
|
18917
19850
|
setToolbarShowEditLink(false);
|
|
18918
19851
|
postToParent2({ type: "ow:exit-edit" });
|
|
18919
19852
|
}, [postToParent2]);
|
|
18920
|
-
const clearSelectedAttr =
|
|
19853
|
+
const clearSelectedAttr = useCallback10(() => {
|
|
18921
19854
|
document.querySelectorAll("[data-ohw-selected]").forEach((el) => {
|
|
18922
19855
|
el.removeAttribute("data-ohw-selected");
|
|
18923
19856
|
});
|
|
18924
19857
|
}, []);
|
|
18925
|
-
const deselect =
|
|
19858
|
+
const deselect = useCallback10(() => {
|
|
18926
19859
|
const nestedGroup = selectedElRef.current?.closest("[data-ohw-nav-children]") != null ? selectedElRef.current.closest("[data-ohw-nav-group]") : null;
|
|
18927
19860
|
clearSelectedAttr();
|
|
18928
19861
|
selectedElRef.current = null;
|
|
@@ -18956,20 +19889,20 @@ function OhhwellsBridge() {
|
|
|
18956
19889
|
setToolbarVariant("none");
|
|
18957
19890
|
}
|
|
18958
19891
|
}, [clearSelectedAttr]);
|
|
18959
|
-
const markSelected =
|
|
19892
|
+
const markSelected = useCallback10((el) => {
|
|
18960
19893
|
clearSelectedAttr();
|
|
18961
19894
|
el.removeAttribute("data-ohw-hovered");
|
|
18962
19895
|
el.setAttribute("data-ohw-selected", "");
|
|
18963
19896
|
}, [clearSelectedAttr]);
|
|
18964
|
-
const isSelectedForHover =
|
|
19897
|
+
const isSelectedForHover = useCallback10((el) => {
|
|
18965
19898
|
if (!el) return false;
|
|
18966
19899
|
return [selectedElRef.current, activeElRef.current].some(
|
|
18967
19900
|
(busy) => busy && (el === busy || busy.contains(el) || el.contains(busy))
|
|
18968
19901
|
);
|
|
18969
19902
|
}, []);
|
|
18970
|
-
const isSelectedForHoverRef =
|
|
19903
|
+
const isSelectedForHoverRef = useRef12(isSelectedForHover);
|
|
18971
19904
|
isSelectedForHoverRef.current = isSelectedForHover;
|
|
18972
|
-
const resolveHrefKeyElement =
|
|
19905
|
+
const resolveHrefKeyElement = useCallback10((hrefKey) => {
|
|
18973
19906
|
if (isFooterHrefKey(hrefKey)) {
|
|
18974
19907
|
return document.querySelector(
|
|
18975
19908
|
`footer [data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
@@ -18984,7 +19917,7 @@ function OhhwellsBridge() {
|
|
|
18984
19917
|
`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
18985
19918
|
);
|
|
18986
19919
|
}, []);
|
|
18987
|
-
const resyncSelectedNavigationItem =
|
|
19920
|
+
const resyncSelectedNavigationItem = useCallback10(() => {
|
|
18988
19921
|
const hrefKey = selectedHrefKeyRef.current;
|
|
18989
19922
|
if (hrefKey) {
|
|
18990
19923
|
const link = resolveHrefKeyElement(hrefKey);
|
|
@@ -19022,7 +19955,7 @@ function OhhwellsBridge() {
|
|
|
19022
19955
|
);
|
|
19023
19956
|
}
|
|
19024
19957
|
}, [resolveHrefKeyElement]);
|
|
19025
|
-
const reselectNavigationItem =
|
|
19958
|
+
const reselectNavigationItem = useCallback10((navAnchor) => {
|
|
19026
19959
|
selectedElRef.current = navAnchor;
|
|
19027
19960
|
selectedHrefKeyRef.current = navAnchor.getAttribute("data-ohw-href-key");
|
|
19028
19961
|
selectedFooterColAttrRef.current = null;
|
|
@@ -19053,7 +19986,7 @@ function OhhwellsBridge() {
|
|
|
19053
19986
|
setToolbarShowEditLink(false);
|
|
19054
19987
|
setActiveCommands(/* @__PURE__ */ new Set());
|
|
19055
19988
|
}, [markSelected]);
|
|
19056
|
-
const commitNavigationTextEdit =
|
|
19989
|
+
const commitNavigationTextEdit = useCallback10((navAnchor) => {
|
|
19057
19990
|
const el = activeElRef.current;
|
|
19058
19991
|
if (!el) return;
|
|
19059
19992
|
const key = el.dataset.ohwKey;
|
|
@@ -19086,7 +20019,7 @@ function OhhwellsBridge() {
|
|
|
19086
20019
|
postToParent2({ type: "ow:exit-edit" });
|
|
19087
20020
|
reselectNavigationItem(navAnchor);
|
|
19088
20021
|
}, [postToParent2, reselectNavigationItem]);
|
|
19089
|
-
const handleAddTopLevelNavItem =
|
|
20022
|
+
const handleAddTopLevelNavItem = useCallback10(() => {
|
|
19090
20023
|
const items = listNavbarRootItems();
|
|
19091
20024
|
addNavAfterAnchorRef.current = items[items.length - 1] ?? null;
|
|
19092
20025
|
deselectRef.current();
|
|
@@ -19098,7 +20031,7 @@ function OhhwellsBridge() {
|
|
|
19098
20031
|
intent: "add-nav"
|
|
19099
20032
|
});
|
|
19100
20033
|
}, []);
|
|
19101
|
-
const maybeWarnNavLinkDropdownConflict =
|
|
20034
|
+
const maybeWarnNavLinkDropdownConflict = useCallback10(
|
|
19102
20035
|
(anchor) => {
|
|
19103
20036
|
if (!isNavbarHrefKey(anchor.getAttribute("data-ohw-href-key"))) return;
|
|
19104
20037
|
if (!navDropdownsOpenOnClick()) return;
|
|
@@ -19111,7 +20044,7 @@ function OhhwellsBridge() {
|
|
|
19111
20044
|
},
|
|
19112
20045
|
[postToParent2]
|
|
19113
20046
|
);
|
|
19114
|
-
const handleNavDropdownOpenChange =
|
|
20047
|
+
const handleNavDropdownOpenChange = useCallback10((open) => {
|
|
19115
20048
|
const selected = selectedElRef.current;
|
|
19116
20049
|
if (!selected || !isNavigationItem2(selected)) return;
|
|
19117
20050
|
if (isNestedNavChild(selected)) return;
|
|
@@ -19127,7 +20060,7 @@ function OhhwellsBridge() {
|
|
|
19127
20060
|
}
|
|
19128
20061
|
});
|
|
19129
20062
|
}, []);
|
|
19130
|
-
const handleFooterHeadingVisibleChange =
|
|
20063
|
+
const handleFooterHeadingVisibleChange = useCallback10(
|
|
19131
20064
|
(visible) => {
|
|
19132
20065
|
const selected = selectedElRef.current;
|
|
19133
20066
|
if (!selected || !isFooterFrameSelectionRef.current) return;
|
|
@@ -19151,7 +20084,7 @@ function OhhwellsBridge() {
|
|
|
19151
20084
|
},
|
|
19152
20085
|
[postToParent2]
|
|
19153
20086
|
);
|
|
19154
|
-
const enterEditOnNewItem =
|
|
20087
|
+
const enterEditOnNewItem = useCallback10((anchor) => {
|
|
19155
20088
|
const label = anchor.querySelector('[data-ohw-editable="text"]');
|
|
19156
20089
|
if (!label) {
|
|
19157
20090
|
selectRef.current(anchor);
|
|
@@ -19160,8 +20093,8 @@ function OhhwellsBridge() {
|
|
|
19160
20093
|
setNavGroupForceOpen(anchor, true);
|
|
19161
20094
|
activateRef.current(label);
|
|
19162
20095
|
}, []);
|
|
19163
|
-
const pendingSocialAddRef =
|
|
19164
|
-
const handleAddChildItem =
|
|
20096
|
+
const pendingSocialAddRef = useRef12(null);
|
|
20097
|
+
const handleAddChildItem = useCallback10(() => {
|
|
19165
20098
|
const selected = selectedElRef.current;
|
|
19166
20099
|
if (!selected) return;
|
|
19167
20100
|
const socialsRow = isSocialsRow(selected) ? selected : findSocialsRow(selected);
|
|
@@ -19272,7 +20205,7 @@ function OhhwellsBridge() {
|
|
|
19272
20205
|
});
|
|
19273
20206
|
});
|
|
19274
20207
|
}, [enterEditOnNewItem, isFooterFrameSelection, maybeWarnNavLinkDropdownConflict, postToParent2]);
|
|
19275
|
-
const handleAddFooterColumn =
|
|
20208
|
+
const handleAddFooterColumn = useCallback10(() => {
|
|
19276
20209
|
if (!canAddFooterColumn()) {
|
|
19277
20210
|
postToParent2({
|
|
19278
20211
|
type: "ow:toast",
|
|
@@ -19293,7 +20226,7 @@ function OhhwellsBridge() {
|
|
|
19293
20226
|
selectRef.current(result.firstLink);
|
|
19294
20227
|
});
|
|
19295
20228
|
}, [postToParent2]);
|
|
19296
|
-
const clearFooterDragVisuals =
|
|
20229
|
+
const clearFooterDragVisuals = useCallback10(() => {
|
|
19297
20230
|
footerDragRef.current = null;
|
|
19298
20231
|
setSiblingHintRects([]);
|
|
19299
20232
|
setFooterDropSlots([]);
|
|
@@ -19302,7 +20235,7 @@ function OhhwellsBridge() {
|
|
|
19302
20235
|
setIsItemDragging(false);
|
|
19303
20236
|
unlockFooterDragInteraction();
|
|
19304
20237
|
}, []);
|
|
19305
|
-
const refreshFooterDragVisuals =
|
|
20238
|
+
const refreshFooterDragVisuals = useCallback10((session, activeSlot, clientX, clientY) => {
|
|
19306
20239
|
const dragged = session.draggedEl;
|
|
19307
20240
|
setDraggedItemRect(dragged.getBoundingClientRect());
|
|
19308
20241
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -19334,13 +20267,13 @@ function OhhwellsBridge() {
|
|
|
19334
20267
|
const activeIdx = activeSlot ? slots.findIndex((s) => s.insertIndex === activeSlot.insertIndex) : -1;
|
|
19335
20268
|
setActiveFooterDropIndex(activeIdx >= 0 ? activeIdx : null);
|
|
19336
20269
|
}, []);
|
|
19337
|
-
const refreshFooterDragVisualsRef =
|
|
20270
|
+
const refreshFooterDragVisualsRef = useRef12(refreshFooterDragVisuals);
|
|
19338
20271
|
refreshFooterDragVisualsRef.current = refreshFooterDragVisuals;
|
|
19339
|
-
const commitFooterDragRef =
|
|
20272
|
+
const commitFooterDragRef = useRef12(() => {
|
|
19340
20273
|
});
|
|
19341
|
-
const beginFooterDragRef =
|
|
20274
|
+
const beginFooterDragRef = useRef12(() => {
|
|
19342
20275
|
});
|
|
19343
|
-
const beginFooterDrag =
|
|
20276
|
+
const beginFooterDrag = useCallback10(
|
|
19344
20277
|
(session) => {
|
|
19345
20278
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
19346
20279
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -19360,7 +20293,7 @@ function OhhwellsBridge() {
|
|
|
19360
20293
|
[refreshFooterDragVisuals]
|
|
19361
20294
|
);
|
|
19362
20295
|
beginFooterDragRef.current = beginFooterDrag;
|
|
19363
|
-
const commitFooterDrag =
|
|
20296
|
+
const commitFooterDrag = useCallback10(
|
|
19364
20297
|
(clientX, clientY) => {
|
|
19365
20298
|
const session = footerDragRef.current;
|
|
19366
20299
|
if (!session) {
|
|
@@ -19489,7 +20422,7 @@ function OhhwellsBridge() {
|
|
|
19489
20422
|
[clearFooterDragVisuals, resolveHrefKeyElement, resyncSelectedNavigationItem]
|
|
19490
20423
|
);
|
|
19491
20424
|
commitFooterDragRef.current = commitFooterDrag;
|
|
19492
|
-
const startFooterLinkDrag =
|
|
20425
|
+
const startFooterLinkDrag = useCallback10(
|
|
19493
20426
|
(anchor, clientX, clientY, wasSelected) => {
|
|
19494
20427
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
19495
20428
|
if (!hrefKey) return false;
|
|
@@ -19525,7 +20458,7 @@ function OhhwellsBridge() {
|
|
|
19525
20458
|
},
|
|
19526
20459
|
[beginFooterDrag]
|
|
19527
20460
|
);
|
|
19528
|
-
const startFooterColumnDrag =
|
|
20461
|
+
const startFooterColumnDrag = useCallback10(
|
|
19529
20462
|
(columnEl, clientX, clientY, wasSelected) => {
|
|
19530
20463
|
const columns = listFooterColumns();
|
|
19531
20464
|
const idx = columns.indexOf(columnEl);
|
|
@@ -19545,7 +20478,7 @@ function OhhwellsBridge() {
|
|
|
19545
20478
|
},
|
|
19546
20479
|
[beginFooterDrag]
|
|
19547
20480
|
);
|
|
19548
|
-
const handleItemDragStart =
|
|
20481
|
+
const handleItemDragStart = useCallback10(
|
|
19549
20482
|
(e) => {
|
|
19550
20483
|
const selected = selectedElRef.current;
|
|
19551
20484
|
if (!selected) {
|
|
@@ -19565,7 +20498,7 @@ function OhhwellsBridge() {
|
|
|
19565
20498
|
},
|
|
19566
20499
|
[startFooterColumnDrag, startFooterLinkDrag, startNavLinkDrag]
|
|
19567
20500
|
);
|
|
19568
|
-
const handleItemDragEnd =
|
|
20501
|
+
const handleItemDragEnd = useCallback10(
|
|
19569
20502
|
(e) => {
|
|
19570
20503
|
if (footerDragRef.current) {
|
|
19571
20504
|
const x = e?.clientX;
|
|
@@ -19591,7 +20524,7 @@ function OhhwellsBridge() {
|
|
|
19591
20524
|
},
|
|
19592
20525
|
[commitFooterDrag, commitNavDrag, navDragRef]
|
|
19593
20526
|
);
|
|
19594
|
-
const handleItemChromePointerDown =
|
|
20527
|
+
const handleItemChromePointerDown = useCallback10((e) => {
|
|
19595
20528
|
if (e.button !== 0) return;
|
|
19596
20529
|
const selected = selectedElRef.current;
|
|
19597
20530
|
if (!selected) return;
|
|
@@ -19622,7 +20555,7 @@ function OhhwellsBridge() {
|
|
|
19622
20555
|
}
|
|
19623
20556
|
if (armNavPressFromChrome(selected, e.clientX, e.clientY, e.pointerId)) return;
|
|
19624
20557
|
}, [armNavPressFromChrome]);
|
|
19625
|
-
const handleItemChromeClick =
|
|
20558
|
+
const handleItemChromeClick = useCallback10((clientX, clientY) => {
|
|
19626
20559
|
if (suppressNextClickRef.current || Date.now() < suppressClickUntilRef.current) {
|
|
19627
20560
|
suppressNextClickRef.current = false;
|
|
19628
20561
|
return;
|
|
@@ -19635,7 +20568,7 @@ function OhhwellsBridge() {
|
|
|
19635
20568
|
}, []);
|
|
19636
20569
|
reselectNavigationItemRef.current = reselectNavigationItem;
|
|
19637
20570
|
commitNavigationTextEditRef.current = commitNavigationTextEdit;
|
|
19638
|
-
const select =
|
|
20571
|
+
const select = useCallback10((anchor) => {
|
|
19639
20572
|
if (!isNavigationItem2(anchor)) return;
|
|
19640
20573
|
if (activeElRef.current) deactivate();
|
|
19641
20574
|
aiSectionApiRef.current?.selectFromElement(anchor);
|
|
@@ -19678,7 +20611,7 @@ function OhhwellsBridge() {
|
|
|
19678
20611
|
setFloatingPanel(null);
|
|
19679
20612
|
setLogoSizeDraft(null);
|
|
19680
20613
|
}, [deactivate, markSelected]);
|
|
19681
|
-
const selectFrame =
|
|
20614
|
+
const selectFrame = useCallback10((el) => {
|
|
19682
20615
|
if (!isNavigationContainer(el)) return;
|
|
19683
20616
|
if (activeElRef.current) deactivate();
|
|
19684
20617
|
aiSectionApiRef.current?.selectFromElement(el);
|
|
@@ -19718,7 +20651,7 @@ function OhhwellsBridge() {
|
|
|
19718
20651
|
setFloatingPanel(null);
|
|
19719
20652
|
setLogoSizeDraft(null);
|
|
19720
20653
|
}, [deactivate, markSelected, postToParent2]);
|
|
19721
|
-
const selectLogo =
|
|
20654
|
+
const selectLogo = useCallback10(
|
|
19722
20655
|
(logoEl) => {
|
|
19723
20656
|
if (activeElRef.current) deactivate();
|
|
19724
20657
|
selectedElRef.current = logoEl;
|
|
@@ -19747,7 +20680,7 @@ function OhhwellsBridge() {
|
|
|
19747
20680
|
},
|
|
19748
20681
|
[deactivate, markSelected]
|
|
19749
20682
|
);
|
|
19750
|
-
const openLogoSizePanel =
|
|
20683
|
+
const openLogoSizePanel = useCallback10((logoEl) => {
|
|
19751
20684
|
const placement = getLogoPlacement(logoEl);
|
|
19752
20685
|
const draft = readLogoSizeState(editContentRef.current, placement);
|
|
19753
20686
|
setLogoSizeDraft(draft);
|
|
@@ -19760,7 +20693,7 @@ function OhhwellsBridge() {
|
|
|
19760
20693
|
placement
|
|
19761
20694
|
});
|
|
19762
20695
|
}, []);
|
|
19763
|
-
const openSocialsDisplayPanel =
|
|
20696
|
+
const openSocialsDisplayPanel = useCallback10((row) => {
|
|
19764
20697
|
setParentScrollSnap(parentScrollRef.current);
|
|
19765
20698
|
setFloatingPanel({
|
|
19766
20699
|
key: "socials-display",
|
|
@@ -19770,11 +20703,11 @@ function OhhwellsBridge() {
|
|
|
19770
20703
|
row
|
|
19771
20704
|
});
|
|
19772
20705
|
}, []);
|
|
19773
|
-
const isEditModeRef =
|
|
19774
|
-
const requestMissingSocialIconsRef =
|
|
20706
|
+
const isEditModeRef = useRef12(false);
|
|
20707
|
+
const requestMissingSocialIconsRef = useRef12(() => {
|
|
19775
20708
|
});
|
|
19776
|
-
const askedSocialIconsRef =
|
|
19777
|
-
const requestMissingSocialIcons =
|
|
20709
|
+
const askedSocialIconsRef = useRef12(/* @__PURE__ */ new Set());
|
|
20710
|
+
const requestMissingSocialIcons = useCallback10(() => {
|
|
19778
20711
|
const items = Array.from(document.querySelectorAll(`[${SOCIALS_ROW_ATTR}]`)).filter((row) => socialsDisplayFor(row, editContentRef.current).icon).flatMap((row) => {
|
|
19779
20712
|
const missing = socialsMissingIcons(row);
|
|
19780
20713
|
listSocialItems(row).forEach((item) => ensureIconSlot(item));
|
|
@@ -19786,7 +20719,7 @@ function OhhwellsBridge() {
|
|
|
19786
20719
|
}, []);
|
|
19787
20720
|
requestMissingSocialIconsRef.current = requestMissingSocialIcons;
|
|
19788
20721
|
isEditModeRef.current = isEditMode;
|
|
19789
|
-
const changeSocialsDisplay =
|
|
20722
|
+
const changeSocialsDisplay = useCallback10(
|
|
19790
20723
|
(row, next) => {
|
|
19791
20724
|
if (next.icon) {
|
|
19792
20725
|
const missing = socialsMissingIcons(row);
|
|
@@ -19810,17 +20743,17 @@ function OhhwellsBridge() {
|
|
|
19810
20743
|
},
|
|
19811
20744
|
[]
|
|
19812
20745
|
);
|
|
19813
|
-
const closeFloatingPanelOnly =
|
|
20746
|
+
const closeFloatingPanelOnly = useCallback10(() => {
|
|
19814
20747
|
setFloatingPanel(null);
|
|
19815
20748
|
setLogoSizeDraft(null);
|
|
19816
20749
|
}, []);
|
|
19817
20750
|
closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
|
|
19818
|
-
const closeFloatingPanelAndDeselect =
|
|
20751
|
+
const closeFloatingPanelAndDeselect = useCallback10(() => {
|
|
19819
20752
|
setFloatingPanel(null);
|
|
19820
20753
|
setLogoSizeDraft(null);
|
|
19821
20754
|
deselectRef.current();
|
|
19822
20755
|
}, []);
|
|
19823
|
-
|
|
20756
|
+
useEffect15(() => {
|
|
19824
20757
|
const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
|
|
19825
20758
|
if (!session || !logoSizeDraft) {
|
|
19826
20759
|
postToParentRef.current({ type: "ow:logo-size-panel", open: false });
|
|
@@ -19839,7 +20772,7 @@ function OhhwellsBridge() {
|
|
|
19839
20772
|
max: LOGO_SIZE_MAX
|
|
19840
20773
|
});
|
|
19841
20774
|
}, [floatingPanel, logoSizeDraft, editorViewport]);
|
|
19842
|
-
const persistLogoSizeDraft =
|
|
20775
|
+
const persistLogoSizeDraft = useCallback10(
|
|
19843
20776
|
(placement, draft) => {
|
|
19844
20777
|
const desktopKey = LOGO_SIZE_DESKTOP_KEYS[placement];
|
|
19845
20778
|
const mobileKey = LOGO_SIZE_MOBILE_KEYS[placement];
|
|
@@ -19879,7 +20812,7 @@ function OhhwellsBridge() {
|
|
|
19879
20812
|
},
|
|
19880
20813
|
[postToParent2]
|
|
19881
20814
|
);
|
|
19882
|
-
const activate =
|
|
20815
|
+
const activate = useCallback10((el, options) => {
|
|
19883
20816
|
if (activeElRef.current === el) return;
|
|
19884
20817
|
document.querySelectorAll("[data-ohw-hovered]").forEach((hovered) => {
|
|
19885
20818
|
hovered.removeAttribute("data-ohw-hovered");
|
|
@@ -19977,8 +20910,8 @@ function OhhwellsBridge() {
|
|
|
19977
20910
|
openLogoSizePanelRef.current = openLogoSizePanel;
|
|
19978
20911
|
deselectRef.current = deselect;
|
|
19979
20912
|
closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
|
|
19980
|
-
const lastSiteWideScopeRef =
|
|
19981
|
-
|
|
20913
|
+
const lastSiteWideScopeRef = useRef12(null);
|
|
20914
|
+
useEffect15(() => {
|
|
19982
20915
|
if (!isEditMode) {
|
|
19983
20916
|
if (lastSiteWideScopeRef.current !== false) {
|
|
19984
20917
|
lastSiteWideScopeRef.current = false;
|
|
@@ -20028,6 +20961,7 @@ function OhhwellsBridge() {
|
|
|
20028
20961
|
applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
|
|
20029
20962
|
}
|
|
20030
20963
|
applyBrandChrome(content);
|
|
20964
|
+
applyCustomCodeToHead(content);
|
|
20031
20965
|
initSectionInstancesFromContent(content, window.location.pathname);
|
|
20032
20966
|
for (const [key, val] of Object.entries(content)) {
|
|
20033
20967
|
if (key === "__ohw_sections") continue;
|
|
@@ -20036,6 +20970,7 @@ function OhhwellsBridge() {
|
|
|
20036
20970
|
if (key === STYLE_STORE_KEY) continue;
|
|
20037
20971
|
if (BRAND_CHROME_KEYS.has(key)) continue;
|
|
20038
20972
|
if (key === LOGO_PLACEHOLDER_KEY) continue;
|
|
20973
|
+
if (key === CUSTOM_CODE_AFTER_HEAD_KEY || key === CUSTOM_CODE_BEFORE_HEAD_KEY) continue;
|
|
20039
20974
|
if (LOGO_IMAGE_KEYS.includes(key)) continue;
|
|
20040
20975
|
if (applyVideoSettingNode(key, val)) continue;
|
|
20041
20976
|
if (applyCarouselNode(key, val)) continue;
|
|
@@ -20123,7 +21058,7 @@ function OhhwellsBridge() {
|
|
|
20123
21058
|
cancelled = true;
|
|
20124
21059
|
};
|
|
20125
21060
|
}, [subdomain, isEditMode]);
|
|
20126
|
-
|
|
21061
|
+
useEffect15(() => {
|
|
20127
21062
|
if (!isEditMode) return;
|
|
20128
21063
|
const resolveIndex = (form, clientY) => {
|
|
20129
21064
|
const wrappers = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== fieldDragRef.current?.key);
|
|
@@ -20164,7 +21099,7 @@ function OhhwellsBridge() {
|
|
|
20164
21099
|
window.removeEventListener("drop", onDrop, true);
|
|
20165
21100
|
};
|
|
20166
21101
|
}, [buildFieldDropSlots, isEditMode, persistFields, selectField]);
|
|
20167
|
-
|
|
21102
|
+
useEffect15(() => {
|
|
20168
21103
|
if (!isEditMode) return;
|
|
20169
21104
|
const mark = () => document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
20170
21105
|
markFormFields(form);
|
|
@@ -20176,7 +21111,7 @@ function OhhwellsBridge() {
|
|
|
20176
21111
|
});
|
|
20177
21112
|
return () => observer.disconnect();
|
|
20178
21113
|
}, [isEditMode, fetchState, pathname]);
|
|
20179
|
-
|
|
21114
|
+
useEffect15(() => {
|
|
20180
21115
|
if (!isEditMode) return;
|
|
20181
21116
|
let saveTimer = null;
|
|
20182
21117
|
const onInput = (e) => {
|
|
@@ -20198,14 +21133,14 @@ function OhhwellsBridge() {
|
|
|
20198
21133
|
document.addEventListener("input", onInput, true);
|
|
20199
21134
|
return () => document.removeEventListener("input", onInput, true);
|
|
20200
21135
|
}, [isEditMode, persistFields]);
|
|
20201
|
-
|
|
21136
|
+
useEffect15(() => {
|
|
20202
21137
|
if (isEditMode || fetchState !== "done") return;
|
|
20203
21138
|
const content = contentCache.get(subdomain) ?? {};
|
|
20204
21139
|
document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
20205
21140
|
reconcileFieldsFromContent(form, content);
|
|
20206
21141
|
});
|
|
20207
21142
|
}, [isEditMode, fetchState, subdomain]);
|
|
20208
|
-
|
|
21143
|
+
useEffect15(() => {
|
|
20209
21144
|
if (!isEditMode) return;
|
|
20210
21145
|
const swallow = (e) => {
|
|
20211
21146
|
const target = e.target;
|
|
@@ -20214,14 +21149,14 @@ function OhhwellsBridge() {
|
|
|
20214
21149
|
document.addEventListener("submit", swallow, true);
|
|
20215
21150
|
return () => document.removeEventListener("submit", swallow, true);
|
|
20216
21151
|
}, [isEditMode]);
|
|
20217
|
-
|
|
21152
|
+
useEffect15(() => {
|
|
20218
21153
|
if (isEditMode || fetchState !== "done") return;
|
|
20219
21154
|
console.log("env", process.env.NEXT_PUBLIC_FLOWOPS_API_URL);
|
|
20220
21155
|
const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
|
|
20221
21156
|
console.log({ apiUrl, subdomain });
|
|
20222
21157
|
bindPublishedForms(apiUrl, subdomain, contentCache.get(subdomain) ?? {});
|
|
20223
21158
|
}, [isEditMode, fetchState, subdomain]);
|
|
20224
|
-
|
|
21159
|
+
useEffect15(() => {
|
|
20225
21160
|
if (!subdomain || isEditMode) return;
|
|
20226
21161
|
let debounceTimer = null;
|
|
20227
21162
|
let observer = null;
|
|
@@ -20316,10 +21251,10 @@ function OhhwellsBridge() {
|
|
|
20316
21251
|
const visible = Boolean(subdomain) && fetchState !== "done";
|
|
20317
21252
|
el.style.display = visible ? "flex" : "none";
|
|
20318
21253
|
}, [subdomain, fetchState]);
|
|
20319
|
-
|
|
21254
|
+
useEffect15(() => {
|
|
20320
21255
|
postToParent2({ type: "ow:navigation", path: pathname });
|
|
20321
21256
|
}, [pathname, postToParent2]);
|
|
20322
|
-
|
|
21257
|
+
useEffect15(() => {
|
|
20323
21258
|
if (!subdomain || isEditMode) return;
|
|
20324
21259
|
const content = contentCache.get(subdomain);
|
|
20325
21260
|
if (!content) return;
|
|
@@ -20335,7 +21270,7 @@ function OhhwellsBridge() {
|
|
|
20335
21270
|
applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
|
|
20336
21271
|
}
|
|
20337
21272
|
}, [pathname, subdomain, isEditMode]);
|
|
20338
|
-
|
|
21273
|
+
useEffect15(() => {
|
|
20339
21274
|
if (!isEditMode) return;
|
|
20340
21275
|
if (linkPopoverSessionRef.current?.intent === "add-nav") return;
|
|
20341
21276
|
if (document.querySelector("[data-ohw-section-picker]")) return;
|
|
@@ -20343,11 +21278,11 @@ function OhhwellsBridge() {
|
|
|
20343
21278
|
deselectRef.current();
|
|
20344
21279
|
deactivateRef.current();
|
|
20345
21280
|
}, [pathname, isEditMode]);
|
|
20346
|
-
|
|
21281
|
+
useEffect15(() => {
|
|
20347
21282
|
if (!isEditMode) return;
|
|
20348
21283
|
initSectionInstancesFromContent(editContentRef.current, pathname);
|
|
20349
21284
|
}, [pathname, isEditMode]);
|
|
20350
|
-
|
|
21285
|
+
useEffect15(() => {
|
|
20351
21286
|
if (!isEditMode) return;
|
|
20352
21287
|
const observer = new MutationObserver(() => {
|
|
20353
21288
|
const drawer = document.querySelector("[data-ohw-nav-drawer]");
|
|
@@ -20358,7 +21293,7 @@ function OhhwellsBridge() {
|
|
|
20358
21293
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
20359
21294
|
return () => observer.disconnect();
|
|
20360
21295
|
}, [isEditMode, pathname]);
|
|
20361
|
-
|
|
21296
|
+
useEffect15(() => {
|
|
20362
21297
|
const contentForNav = () => {
|
|
20363
21298
|
if (isEditMode) return editContentRef.current;
|
|
20364
21299
|
if (!subdomain) return {};
|
|
@@ -20427,7 +21362,7 @@ function OhhwellsBridge() {
|
|
|
20427
21362
|
observer?.disconnect();
|
|
20428
21363
|
};
|
|
20429
21364
|
}, [isEditMode, pathname, subdomain, fetchState, resyncSelectedNavigationItem]);
|
|
20430
|
-
|
|
21365
|
+
useEffect15(() => {
|
|
20431
21366
|
if (!isEditMode) return;
|
|
20432
21367
|
let lastPosted = 0;
|
|
20433
21368
|
const measure = () => {
|
|
@@ -20471,7 +21406,7 @@ function OhhwellsBridge() {
|
|
|
20471
21406
|
window.removeEventListener("resize", handleResize);
|
|
20472
21407
|
};
|
|
20473
21408
|
}, [pathname, isEditMode, postToParent2]);
|
|
20474
|
-
|
|
21409
|
+
useEffect15(() => {
|
|
20475
21410
|
if (!subdomainFromQuery || isEditMode) return;
|
|
20476
21411
|
const handleClick = (e) => {
|
|
20477
21412
|
const anchor = e.target.closest("a");
|
|
@@ -20487,7 +21422,7 @@ function OhhwellsBridge() {
|
|
|
20487
21422
|
document.addEventListener("click", handleClick, true);
|
|
20488
21423
|
return () => document.removeEventListener("click", handleClick, true);
|
|
20489
21424
|
}, [subdomainFromQuery, isEditMode, router]);
|
|
20490
|
-
|
|
21425
|
+
useEffect15(() => {
|
|
20491
21426
|
if (!isEditMode) {
|
|
20492
21427
|
editStylesRef.current?.base.remove();
|
|
20493
21428
|
editStylesRef.current?.forceHover.remove();
|
|
@@ -20713,11 +21648,11 @@ function OhhwellsBridge() {
|
|
|
20713
21648
|
footer [data-ohw-href-key] [data-ohw-editable][contenteditable],
|
|
20714
21649
|
footer [data-ohw-href-key] [data-ohw-editable][contenteditable] * {
|
|
20715
21650
|
outline: none !important;
|
|
20716
|
-
caret-color: ${
|
|
21651
|
+
caret-color: ${PRIMARY5} !important;
|
|
20717
21652
|
cursor: text !important;
|
|
20718
21653
|
}
|
|
20719
21654
|
[data-ohw-editable][contenteditable]::selection,
|
|
20720
|
-
[data-ohw-editable][contenteditable] *::selection { background: ${
|
|
21655
|
+
[data-ohw-editable][contenteditable] *::selection { background: ${PRIMARY5}59 !important; }
|
|
20721
21656
|
[data-ohw-editable-state], [data-ohw-editable-state] * { pointer-events: none !important; }
|
|
20722
21657
|
[data-ohw-editable-state][data-ohw-active-state] [data-ohw-editable] { pointer-events: auto !important; }
|
|
20723
21658
|
[data-ohw-editable-state][data-ohw-active-state][data-ohw-editable] { pointer-events: auto !important; }
|
|
@@ -22364,6 +23299,7 @@ function OhhwellsBridge() {
|
|
|
22364
23299
|
applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
|
|
22365
23300
|
}
|
|
22366
23301
|
applyBrandChrome(content);
|
|
23302
|
+
applyCustomCodeToHead(content);
|
|
22367
23303
|
initSectionInstancesFromContent(content, window.location.pathname);
|
|
22368
23304
|
let sectionsJson = null;
|
|
22369
23305
|
for (const [key, val] of Object.entries(content)) {
|
|
@@ -22376,6 +23312,7 @@ function OhhwellsBridge() {
|
|
|
22376
23312
|
if (key === STYLE_STORE_KEY) continue;
|
|
22377
23313
|
if (BRAND_CHROME_KEYS.has(key)) continue;
|
|
22378
23314
|
if (key === LOGO_PLACEHOLDER_KEY) continue;
|
|
23315
|
+
if (key === CUSTOM_CODE_AFTER_HEAD_KEY || key === CUSTOM_CODE_BEFORE_HEAD_KEY) continue;
|
|
22379
23316
|
if (LOGO_IMAGE_KEYS.includes(key) && !String(val ?? "").trim()) continue;
|
|
22380
23317
|
if (applyVideoSettingNode(key, val)) continue;
|
|
22381
23318
|
if (applyCarouselNode(key, val)) continue;
|
|
@@ -22497,6 +23434,7 @@ function OhhwellsBridge() {
|
|
|
22497
23434
|
deselectRef.current();
|
|
22498
23435
|
clearMediaSelectionRef.current();
|
|
22499
23436
|
};
|
|
23437
|
+
clearInteractionChromeRef.current = clearInteractionChrome;
|
|
22500
23438
|
const applyTreeToLocalState = (payload) => {
|
|
22501
23439
|
clearInteractionChrome();
|
|
22502
23440
|
const previous = aiSectionsRef.current;
|
|
@@ -23086,6 +24024,16 @@ function OhhwellsBridge() {
|
|
|
23086
24024
|
if (brandKitRef.current) {
|
|
23087
24025
|
nodes.push({ key: BRAND_KIT_KEY, type: "brand", text: brandKitRef.current });
|
|
23088
24026
|
}
|
|
24027
|
+
nodes.push({
|
|
24028
|
+
key: CUSTOM_CODE_BEFORE_HEAD_KEY,
|
|
24029
|
+
type: "text",
|
|
24030
|
+
text: editContentRef.current[CUSTOM_CODE_BEFORE_HEAD_KEY] ?? ""
|
|
24031
|
+
});
|
|
24032
|
+
nodes.push({
|
|
24033
|
+
key: CUSTOM_CODE_AFTER_HEAD_KEY,
|
|
24034
|
+
type: "text",
|
|
24035
|
+
text: editContentRef.current[CUSTOM_CODE_AFTER_HEAD_KEY] ?? ""
|
|
24036
|
+
});
|
|
23089
24037
|
document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
23090
24038
|
const formKey = formKeyOf(form);
|
|
23091
24039
|
if (!formKey) return;
|
|
@@ -23551,7 +24499,7 @@ function OhhwellsBridge() {
|
|
|
23551
24499
|
if (imageShowTimerRef.current) clearTimeout(imageShowTimerRef.current);
|
|
23552
24500
|
};
|
|
23553
24501
|
}, [isEditMode, refreshStateRules]);
|
|
23554
|
-
|
|
24502
|
+
useEffect15(() => {
|
|
23555
24503
|
if (!isEditMode) return;
|
|
23556
24504
|
const THRESHOLD = 10;
|
|
23557
24505
|
const resolveWasSelected = (el) => {
|
|
@@ -23707,7 +24655,7 @@ function OhhwellsBridge() {
|
|
|
23707
24655
|
unlockFooterDragInteraction();
|
|
23708
24656
|
};
|
|
23709
24657
|
}, [isEditMode]);
|
|
23710
|
-
|
|
24658
|
+
useEffect15(() => {
|
|
23711
24659
|
const handler = (e) => {
|
|
23712
24660
|
if (e.data?.type !== "ow:request-schedule-config") return;
|
|
23713
24661
|
const insertAfterVal = e.data.insertAfter;
|
|
@@ -23723,7 +24671,7 @@ function OhhwellsBridge() {
|
|
|
23723
24671
|
window.addEventListener("message", handler);
|
|
23724
24672
|
return () => window.removeEventListener("message", handler);
|
|
23725
24673
|
}, [processConfigRequest]);
|
|
23726
|
-
|
|
24674
|
+
useEffect15(() => {
|
|
23727
24675
|
if (!isEditMode) return;
|
|
23728
24676
|
document.querySelectorAll("[data-ohw-active-state]").forEach((el) => {
|
|
23729
24677
|
el.removeAttribute("data-ohw-active-state");
|
|
@@ -23747,7 +24695,7 @@ function OhhwellsBridge() {
|
|
|
23747
24695
|
postToParent2({
|
|
23748
24696
|
type: "ow:ready",
|
|
23749
24697
|
version: "1",
|
|
23750
|
-
bridgeVersion: "0.1.
|
|
24698
|
+
bridgeVersion: "0.1.120",
|
|
23751
24699
|
path: pathname,
|
|
23752
24700
|
nodes: collectEditableNodes(editContentRef.current),
|
|
23753
24701
|
sections
|
|
@@ -23759,13 +24707,13 @@ function OhhwellsBridge() {
|
|
|
23759
24707
|
clearTimeout(timer);
|
|
23760
24708
|
};
|
|
23761
24709
|
}, [pathname, isEditMode, refreshStateRules, postToParent2]);
|
|
23762
|
-
|
|
24710
|
+
useEffect15(() => {
|
|
23763
24711
|
scrollToHashSectionWhenReady();
|
|
23764
24712
|
const onHashChange = () => scrollToHashSectionWhenReady();
|
|
23765
24713
|
window.addEventListener("hashchange", onHashChange);
|
|
23766
24714
|
return () => window.removeEventListener("hashchange", onHashChange);
|
|
23767
24715
|
}, [pathname]);
|
|
23768
|
-
const handleCommand =
|
|
24716
|
+
const handleCommand = useCallback10((cmd) => {
|
|
23769
24717
|
const el = activeElRef.current;
|
|
23770
24718
|
const selBefore = window.getSelection();
|
|
23771
24719
|
let savedOffsets = null;
|
|
@@ -23801,7 +24749,7 @@ function OhhwellsBridge() {
|
|
|
23801
24749
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
23802
24750
|
refreshActiveCommandsRef.current();
|
|
23803
24751
|
}, []);
|
|
23804
|
-
|
|
24752
|
+
useEffect15(() => {
|
|
23805
24753
|
const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
|
|
23806
24754
|
if (!session || !logoSizeDraft) return;
|
|
23807
24755
|
const onPanelAction = (e) => {
|
|
@@ -23839,7 +24787,7 @@ function OhhwellsBridge() {
|
|
|
23839
24787
|
window.addEventListener("message", onPanelAction);
|
|
23840
24788
|
return () => window.removeEventListener("message", onPanelAction);
|
|
23841
24789
|
}, [floatingPanel, logoSizeDraft, editorViewport, persistLogoSizeDraft, closeFloatingPanelAndDeselect]);
|
|
23842
|
-
const handleStateChange =
|
|
24790
|
+
const handleStateChange = useCallback10((state) => {
|
|
23843
24791
|
if (!activeStateElRef.current) return;
|
|
23844
24792
|
const el = activeStateElRef.current;
|
|
23845
24793
|
if (state === "Default") {
|
|
@@ -23852,7 +24800,7 @@ function OhhwellsBridge() {
|
|
|
23852
24800
|
}
|
|
23853
24801
|
setToggleState((prev) => prev ? { ...prev, activeState: state } : null);
|
|
23854
24802
|
}, [deactivate]);
|
|
23855
|
-
const reselectAfterLinkPopover =
|
|
24803
|
+
const reselectAfterLinkPopover = useCallback10(
|
|
23856
24804
|
(hrefKey) => {
|
|
23857
24805
|
requestAnimationFrame(() => {
|
|
23858
24806
|
const el = resolveHrefKeyElement(hrefKey);
|
|
@@ -23861,7 +24809,7 @@ function OhhwellsBridge() {
|
|
|
23861
24809
|
},
|
|
23862
24810
|
[resolveHrefKeyElement]
|
|
23863
24811
|
);
|
|
23864
|
-
const closeLinkPopover =
|
|
24812
|
+
const closeLinkPopover = useCallback10(() => {
|
|
23865
24813
|
const session = linkPopoverSessionRef.current;
|
|
23866
24814
|
addNavAfterAnchorRef.current = null;
|
|
23867
24815
|
setLinkPopover(null);
|
|
@@ -23869,9 +24817,9 @@ function OhhwellsBridge() {
|
|
|
23869
24817
|
reselectAfterLinkPopover(session.key);
|
|
23870
24818
|
}
|
|
23871
24819
|
}, [reselectAfterLinkPopover]);
|
|
23872
|
-
const closeLinkPopoverRef =
|
|
24820
|
+
const closeLinkPopoverRef = useRef12(closeLinkPopover);
|
|
23873
24821
|
closeLinkPopoverRef.current = closeLinkPopover;
|
|
23874
|
-
const openLinkPopoverForActive =
|
|
24822
|
+
const openLinkPopoverForActive = useCallback10(() => {
|
|
23875
24823
|
const hrefCtx = getHrefKeyFromElement(activeElRef.current);
|
|
23876
24824
|
if (!hrefCtx) return;
|
|
23877
24825
|
bumpLinkPopoverGrace();
|
|
@@ -23882,7 +24830,7 @@ function OhhwellsBridge() {
|
|
|
23882
24830
|
});
|
|
23883
24831
|
deactivate();
|
|
23884
24832
|
}, [deactivate]);
|
|
23885
|
-
const openLinkPopoverForSelected =
|
|
24833
|
+
const openLinkPopoverForSelected = useCallback10(() => {
|
|
23886
24834
|
const anchor = selectedElRef.current;
|
|
23887
24835
|
if (!anchor) return;
|
|
23888
24836
|
const key = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -23899,7 +24847,7 @@ function OhhwellsBridge() {
|
|
|
23899
24847
|
});
|
|
23900
24848
|
deselect();
|
|
23901
24849
|
}, [deselect]);
|
|
23902
|
-
const handleSelectParent =
|
|
24850
|
+
const handleSelectParent = useCallback10(() => {
|
|
23903
24851
|
const selected = selectedElRef.current;
|
|
23904
24852
|
if (!selected) return;
|
|
23905
24853
|
if (toolbarVariantRef.current === "select-frame") {
|
|
@@ -23926,7 +24874,7 @@ function OhhwellsBridge() {
|
|
|
23926
24874
|
}
|
|
23927
24875
|
deselectRef.current();
|
|
23928
24876
|
}, []);
|
|
23929
|
-
const handleDuplicateSelected =
|
|
24877
|
+
const handleDuplicateSelected = useCallback10(() => {
|
|
23930
24878
|
const selected = selectedElRef.current;
|
|
23931
24879
|
if (!selected || !isNavigationItem2(selected)) return;
|
|
23932
24880
|
const hrefKey = selected.getAttribute("data-ohw-href-key");
|
|
@@ -24059,7 +25007,7 @@ function OhhwellsBridge() {
|
|
|
24059
25007
|
});
|
|
24060
25008
|
}
|
|
24061
25009
|
}, [postToParent2]);
|
|
24062
|
-
const runPendingDeleteUndo =
|
|
25010
|
+
const runPendingDeleteUndo = useCallback10(() => {
|
|
24063
25011
|
const pending = pendingDeleteUndoRef.current;
|
|
24064
25012
|
if (!pending) return false;
|
|
24065
25013
|
pendingDeleteUndoRef.current = null;
|
|
@@ -24067,7 +25015,7 @@ function OhhwellsBridge() {
|
|
|
24067
25015
|
enforceLinkHrefs();
|
|
24068
25016
|
return true;
|
|
24069
25017
|
}, []);
|
|
24070
|
-
const handleDeleteSelected =
|
|
25018
|
+
const handleDeleteSelected = useCallback10(() => {
|
|
24071
25019
|
const selected = selectedElRef.current;
|
|
24072
25020
|
if (!selected) return false;
|
|
24073
25021
|
return deleteSelectedNavFooterItem({
|
|
@@ -24088,7 +25036,7 @@ function OhhwellsBridge() {
|
|
|
24088
25036
|
}, [postToParent2]);
|
|
24089
25037
|
handleDeleteSelectedRef.current = handleDeleteSelected;
|
|
24090
25038
|
runPendingDeleteUndoRef.current = runPendingDeleteUndo;
|
|
24091
|
-
const handleLinkPopoverSubmit =
|
|
25039
|
+
const handleLinkPopoverSubmit = useCallback10(
|
|
24092
25040
|
(target) => {
|
|
24093
25041
|
const session = linkPopoverSessionRef.current;
|
|
24094
25042
|
if (!session) return;
|
|
@@ -24154,14 +25102,14 @@ function OhhwellsBridge() {
|
|
|
24154
25102
|
const showEditLink = toolbarShowEditLink;
|
|
24155
25103
|
const currentSections = sectionsByPath[pathname] ?? [];
|
|
24156
25104
|
linkPopoverOpenRef.current = linkPopover !== null;
|
|
24157
|
-
const handleMediaSelect =
|
|
25105
|
+
const handleMediaSelect = useCallback10((key) => {
|
|
24158
25106
|
const el = hoveredImageRef.current?.dataset.ohwKey === key ? hoveredImageRef.current : Array.from(document.querySelectorAll(MEDIA_SELECTOR)).find(
|
|
24159
25107
|
(m) => (m.dataset.ohwKey ?? "") === key
|
|
24160
25108
|
) ?? null;
|
|
24161
25109
|
if (!el) return;
|
|
24162
25110
|
selectMediaElementRef.current(el);
|
|
24163
25111
|
}, []);
|
|
24164
|
-
const handleMediaReplace =
|
|
25112
|
+
const handleMediaReplace = useCallback10(
|
|
24165
25113
|
(key) => {
|
|
24166
25114
|
postToParent2({
|
|
24167
25115
|
type: "ow:image-pick",
|
|
@@ -24171,13 +25119,13 @@ function OhhwellsBridge() {
|
|
|
24171
25119
|
},
|
|
24172
25120
|
[postToParent2, mediaHover?.elementType, selectedMedia?.elementType]
|
|
24173
25121
|
);
|
|
24174
|
-
const handleEditCarousel =
|
|
25122
|
+
const handleEditCarousel = useCallback10(
|
|
24175
25123
|
(key) => {
|
|
24176
25124
|
postToParent2({ type: "ow:carousel-open", key, images: readCarouselValue(key) });
|
|
24177
25125
|
},
|
|
24178
25126
|
[postToParent2]
|
|
24179
25127
|
);
|
|
24180
|
-
const handleMediaFadeOutComplete =
|
|
25128
|
+
const handleMediaFadeOutComplete = useCallback10((key) => {
|
|
24181
25129
|
setUploadingRects((prev) => {
|
|
24182
25130
|
if (!(key in prev)) return prev;
|
|
24183
25131
|
const next = { ...prev };
|
|
@@ -24185,7 +25133,7 @@ function OhhwellsBridge() {
|
|
|
24185
25133
|
return next;
|
|
24186
25134
|
});
|
|
24187
25135
|
}, []);
|
|
24188
|
-
const handleVideoSettingsChange =
|
|
25136
|
+
const handleVideoSettingsChange = useCallback10(
|
|
24189
25137
|
(key, settings) => {
|
|
24190
25138
|
document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
|
|
24191
25139
|
const video = getVideoEl2(el);
|
|
@@ -24207,14 +25155,14 @@ function OhhwellsBridge() {
|
|
|
24207
25155
|
},
|
|
24208
25156
|
[postToParent2]
|
|
24209
25157
|
);
|
|
24210
|
-
return /* @__PURE__ */
|
|
24211
|
-
/* @__PURE__ */
|
|
24212
|
-
/* @__PURE__ */
|
|
24213
|
-
subdomain && !isEditMode && showBranding && /* @__PURE__ */
|
|
25158
|
+
return /* @__PURE__ */ jsxs22(Fragment10, { children: [
|
|
25159
|
+
/* @__PURE__ */ jsx35("div", { id: "ohw-loader", suppressHydrationWarning: true, style: { ...OHW_LOADER_STYLE, display: "none" }, children: /* @__PURE__ */ jsx35(OhwLoaderSpinner, {}) }),
|
|
25160
|
+
/* @__PURE__ */ jsx35("script", { suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: OHW_LOADER_PREHYDRATE_SCRIPT } }),
|
|
25161
|
+
subdomain && !isEditMode && showBranding && /* @__PURE__ */ jsx35(MadeWithOhhWells, {}),
|
|
24214
25162
|
bridgeRoot ? createPortal3(
|
|
24215
|
-
/* @__PURE__ */
|
|
24216
|
-
/* @__PURE__ */
|
|
24217
|
-
isEditMode && /* @__PURE__ */
|
|
25163
|
+
/* @__PURE__ */ jsxs22(Fragment10, { children: [
|
|
25164
|
+
/* @__PURE__ */ jsx35("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
|
|
25165
|
+
isEditMode && /* @__PURE__ */ jsx35(
|
|
24218
25166
|
AiSectionOverlay,
|
|
24219
25167
|
{
|
|
24220
25168
|
postToParent: postToParent2,
|
|
@@ -24222,7 +25170,16 @@ function OhhwellsBridge() {
|
|
|
24222
25170
|
onSelectionChange: handleAiSectionSelectionChange
|
|
24223
25171
|
}
|
|
24224
25172
|
),
|
|
24225
|
-
isEditMode && /* @__PURE__ */
|
|
25173
|
+
isEditMode && /* @__PURE__ */ jsx35(
|
|
25174
|
+
AiMediaStripOverlay,
|
|
25175
|
+
{
|
|
25176
|
+
postToParent: postToParent2,
|
|
25177
|
+
aiSectionsRef,
|
|
25178
|
+
applyTreeLocalRef,
|
|
25179
|
+
clearInteractionChromeRef
|
|
25180
|
+
}
|
|
25181
|
+
),
|
|
25182
|
+
isEditMode && /* @__PURE__ */ jsx35(
|
|
24226
25183
|
AiPricingCardOverlay,
|
|
24227
25184
|
{
|
|
24228
25185
|
postToParent: postToParent2,
|
|
@@ -24230,12 +25187,12 @@ function OhhwellsBridge() {
|
|
|
24230
25187
|
applyTreeLocalRef
|
|
24231
25188
|
}
|
|
24232
25189
|
),
|
|
24233
|
-
isSectionDragging && sectionDropSlots.map((slot, i) => /* @__PURE__ */
|
|
25190
|
+
isSectionDragging && sectionDropSlots.map((slot, i) => /* @__PURE__ */ jsx35(
|
|
24234
25191
|
"div",
|
|
24235
25192
|
{
|
|
24236
25193
|
className: "pointer-events-none fixed z-2147483646",
|
|
24237
25194
|
style: { left: slot.left, top: slot.y, width: slot.width, height: 3, transform: "translateY(-50%)" },
|
|
24238
|
-
children: /* @__PURE__ */
|
|
25195
|
+
children: /* @__PURE__ */ jsx35(
|
|
24239
25196
|
DropIndicator,
|
|
24240
25197
|
{
|
|
24241
25198
|
direction: "horizontal",
|
|
@@ -24246,7 +25203,7 @@ function OhhwellsBridge() {
|
|
|
24246
25203
|
},
|
|
24247
25204
|
`section-drop-${slot.insertIndex}-${i}`
|
|
24248
25205
|
)),
|
|
24249
|
-
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */
|
|
25206
|
+
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ jsx35(
|
|
24250
25207
|
MediaOverlay,
|
|
24251
25208
|
{
|
|
24252
25209
|
hover: { key, rect, elementType: "image", isDragOver: false, hasTextOverlap: false },
|
|
@@ -24257,7 +25214,7 @@ function OhhwellsBridge() {
|
|
|
24257
25214
|
},
|
|
24258
25215
|
`uploading-${key}`
|
|
24259
25216
|
)),
|
|
24260
|
-
mediaHover && !(mediaHover.key in uploadingRects) && mediaHover.key !== selectedMedia?.key && /* @__PURE__ */
|
|
25217
|
+
mediaHover && !(mediaHover.key in uploadingRects) && mediaHover.key !== selectedMedia?.key && /* @__PURE__ */ jsx35(
|
|
24261
25218
|
MediaOverlay,
|
|
24262
25219
|
{
|
|
24263
25220
|
hover: mediaHover,
|
|
@@ -24268,7 +25225,7 @@ function OhhwellsBridge() {
|
|
|
24268
25225
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
24269
25226
|
}
|
|
24270
25227
|
),
|
|
24271
|
-
selectedMedia && !(selectedMedia.key in uploadingRects) && !linkPopover && /* @__PURE__ */
|
|
25228
|
+
selectedMedia && !(selectedMedia.key in uploadingRects) && !linkPopover && /* @__PURE__ */ jsx35(
|
|
24272
25229
|
MediaOverlay,
|
|
24273
25230
|
{
|
|
24274
25231
|
hover: selectedMedia,
|
|
@@ -24280,7 +25237,7 @@ function OhhwellsBridge() {
|
|
|
24280
25237
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
24281
25238
|
}
|
|
24282
25239
|
),
|
|
24283
|
-
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */
|
|
25240
|
+
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ jsx35(
|
|
24284
25241
|
CarouselOverlay,
|
|
24285
25242
|
{
|
|
24286
25243
|
hover: carouselHover,
|
|
@@ -24288,10 +25245,10 @@ function OhhwellsBridge() {
|
|
|
24288
25245
|
cueOnly: !!carouselHover.fullBleedSectionId && carouselHover.fullBleedSectionId !== selectedAiSectionId
|
|
24289
25246
|
}
|
|
24290
25247
|
),
|
|
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__ */
|
|
25248
|
+
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ jsx35(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
|
|
25249
|
+
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ jsx35(ItemInteractionLayer, { rect, state: "sibling-hint" }, `sibling-hint-${i}`)),
|
|
25250
|
+
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */ jsx35(ItemInteractionLayer, { rect: draggedItemRect, state: "dragging" }),
|
|
25251
|
+
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ jsx35(
|
|
24295
25252
|
"div",
|
|
24296
25253
|
{
|
|
24297
25254
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -24301,7 +25258,7 @@ function OhhwellsBridge() {
|
|
|
24301
25258
|
width: slot.width,
|
|
24302
25259
|
height: slot.height
|
|
24303
25260
|
},
|
|
24304
|
-
children: /* @__PURE__ */
|
|
25261
|
+
children: /* @__PURE__ */ jsx35(
|
|
24305
25262
|
DropIndicator,
|
|
24306
25263
|
{
|
|
24307
25264
|
direction: slot.direction,
|
|
@@ -24312,7 +25269,7 @@ function OhhwellsBridge() {
|
|
|
24312
25269
|
},
|
|
24313
25270
|
`footer-drop-${slot.direction}-${slot.columnIndex}-${slot.insertIndex}-${i}`
|
|
24314
25271
|
)),
|
|
24315
|
-
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */
|
|
25272
|
+
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ jsx35(
|
|
24316
25273
|
"div",
|
|
24317
25274
|
{
|
|
24318
25275
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -24322,7 +25279,7 @@ function OhhwellsBridge() {
|
|
|
24322
25279
|
width: slot.width,
|
|
24323
25280
|
height: slot.height
|
|
24324
25281
|
},
|
|
24325
|
-
children: /* @__PURE__ */
|
|
25282
|
+
children: /* @__PURE__ */ jsx35(
|
|
24326
25283
|
DropIndicator,
|
|
24327
25284
|
{
|
|
24328
25285
|
direction: slot.direction,
|
|
@@ -24333,10 +25290,10 @@ function OhhwellsBridge() {
|
|
|
24333
25290
|
},
|
|
24334
25291
|
`nav-drop-${slot.direction}-${slot.parentId ?? "root"}-${slot.insertIndex}-${i}`
|
|
24335
25292
|
)),
|
|
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__ */
|
|
25293
|
+
hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ jsx35(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
|
|
25294
|
+
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ jsx35(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
|
|
25295
|
+
hoveredTextRect && !hoveredNavContainerRect && !hoveredItemRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ jsx35(ItemInteractionLayer, { rect: hoveredTextRect, state: "hover" }),
|
|
25296
|
+
formPickRect && !isItemDragging && /* @__PURE__ */ jsx35(
|
|
24340
25297
|
ItemInteractionLayer,
|
|
24341
25298
|
{
|
|
24342
25299
|
rect: formPickRect,
|
|
@@ -24344,13 +25301,13 @@ function OhhwellsBridge() {
|
|
|
24344
25301
|
itemDragSurface: false,
|
|
24345
25302
|
toolbarAlign: "left",
|
|
24346
25303
|
chromeGap: 24,
|
|
24347
|
-
toolbar: fieldPickRect ? void 0 : /* @__PURE__ */
|
|
25304
|
+
toolbar: fieldPickRect ? void 0 : /* @__PURE__ */ jsxs22(
|
|
24348
25305
|
"div",
|
|
24349
25306
|
{
|
|
24350
25307
|
"data-ohw-form-toolbar": "",
|
|
24351
25308
|
className: "pointer-events-auto flex items-center gap-0.5 whitespace-nowrap rounded-lg border border-border bg-background p-1 shadow-md",
|
|
24352
25309
|
children: [
|
|
24353
|
-
/* @__PURE__ */
|
|
25310
|
+
/* @__PURE__ */ jsx35(
|
|
24354
25311
|
"button",
|
|
24355
25312
|
{
|
|
24356
25313
|
type: "button",
|
|
@@ -24358,11 +25315,11 @@ function OhhwellsBridge() {
|
|
|
24358
25315
|
className: "flex h-7 w-7 items-center justify-center rounded-md text-foreground transition-colors hover:bg-muted/80",
|
|
24359
25316
|
onClick: () => setFieldTypePickerOpen((open) => !open),
|
|
24360
25317
|
"data-ohw-add-field": "",
|
|
24361
|
-
children: /* @__PURE__ */
|
|
25318
|
+
children: /* @__PURE__ */ jsx35(Plus4, { size: 15, "aria-hidden": true })
|
|
24362
25319
|
}
|
|
24363
25320
|
),
|
|
24364
|
-
/* @__PURE__ */
|
|
24365
|
-
/* @__PURE__ */
|
|
25321
|
+
/* @__PURE__ */ jsx35("div", { className: "mx-0.5 h-5 w-px bg-border" }),
|
|
25322
|
+
/* @__PURE__ */ jsxs22(
|
|
24366
25323
|
"button",
|
|
24367
25324
|
{
|
|
24368
25325
|
type: "button",
|
|
@@ -24378,11 +25335,11 @@ function OhhwellsBridge() {
|
|
|
24378
25335
|
});
|
|
24379
25336
|
},
|
|
24380
25337
|
children: [
|
|
24381
|
-
/* @__PURE__ */
|
|
25338
|
+
/* @__PURE__ */ jsx35(Settings, { size: 14, "aria-hidden": true }),
|
|
24382
25339
|
"Form settings",
|
|
24383
25340
|
formPickCount ? (
|
|
24384
25341
|
// Counter pill, per the design — not a text suffix.
|
|
24385
|
-
/* @__PURE__ */
|
|
25342
|
+
/* @__PURE__ */ jsx35(
|
|
24386
25343
|
"span",
|
|
24387
25344
|
{
|
|
24388
25345
|
"data-ohw-form-count": "",
|
|
@@ -24394,8 +25351,8 @@ function OhhwellsBridge() {
|
|
|
24394
25351
|
]
|
|
24395
25352
|
}
|
|
24396
25353
|
),
|
|
24397
|
-
/* @__PURE__ */
|
|
24398
|
-
/* @__PURE__ */
|
|
25354
|
+
/* @__PURE__ */ jsx35("div", { className: "mx-0.5 h-5 w-px bg-border" }),
|
|
25355
|
+
/* @__PURE__ */ jsx35("div", { className: "flex items-center rounded-md bg-muted/70 p-0.5", children: ["default", "success"].map((state) => /* @__PURE__ */ jsx35(
|
|
24399
25356
|
"button",
|
|
24400
25357
|
{
|
|
24401
25358
|
type: "button",
|
|
@@ -24426,7 +25383,7 @@ function OhhwellsBridge() {
|
|
|
24426
25383
|
)
|
|
24427
25384
|
}
|
|
24428
25385
|
),
|
|
24429
|
-
formHoverRect && !isItemDragging && /* @__PURE__ */
|
|
25386
|
+
formHoverRect && !isItemDragging && /* @__PURE__ */ jsx35(
|
|
24430
25387
|
ItemInteractionLayer,
|
|
24431
25388
|
{
|
|
24432
25389
|
rect: formHoverRect,
|
|
@@ -24434,7 +25391,7 @@ function OhhwellsBridge() {
|
|
|
24434
25391
|
chromeGap: formHoverElRef.current && getFieldWrapper(formHoverElRef.current) ? 8 : 24
|
|
24435
25392
|
}
|
|
24436
25393
|
),
|
|
24437
|
-
fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */
|
|
25394
|
+
fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ jsx35(
|
|
24438
25395
|
ItemInteractionLayer,
|
|
24439
25396
|
{
|
|
24440
25397
|
rect: fieldPickRect,
|
|
@@ -24446,7 +25403,7 @@ function OhhwellsBridge() {
|
|
|
24446
25403
|
dragHandleLabel: "Reorder field",
|
|
24447
25404
|
onDragHandleDragStart: handleFieldDragStart,
|
|
24448
25405
|
onDragHandleDragEnd: handleFieldDragEnd,
|
|
24449
|
-
toolbar: /* @__PURE__ */
|
|
25406
|
+
toolbar: /* @__PURE__ */ jsx35(
|
|
24450
25407
|
FormFieldToolbar,
|
|
24451
25408
|
{
|
|
24452
25409
|
type: fieldPickState.type,
|
|
@@ -24459,12 +25416,12 @@ function OhhwellsBridge() {
|
|
|
24459
25416
|
)
|
|
24460
25417
|
}
|
|
24461
25418
|
),
|
|
24462
|
-
fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */
|
|
25419
|
+
fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */ jsx35(
|
|
24463
25420
|
"div",
|
|
24464
25421
|
{
|
|
24465
25422
|
className: "pointer-events-none fixed z-[2147483644]",
|
|
24466
25423
|
style: { top: slot.top, left: slot.left, width: slot.width },
|
|
24467
|
-
children: /* @__PURE__ */
|
|
25424
|
+
children: /* @__PURE__ */ jsx35(
|
|
24468
25425
|
DropIndicator,
|
|
24469
25426
|
{
|
|
24470
25427
|
direction: "horizontal",
|
|
@@ -24477,7 +25434,7 @@ function OhhwellsBridge() {
|
|
|
24477
25434
|
)) : null,
|
|
24478
25435
|
fieldTypePickerOpen && formPickRect ? (() => {
|
|
24479
25436
|
const toolbar = document.querySelector("[data-ohw-form-toolbar]")?.getBoundingClientRect();
|
|
24480
|
-
return /* @__PURE__ */
|
|
25437
|
+
return /* @__PURE__ */ jsx35(
|
|
24481
25438
|
"div",
|
|
24482
25439
|
{
|
|
24483
25440
|
className: "pointer-events-none fixed z-[2147483645]",
|
|
@@ -24485,12 +25442,12 @@ function OhhwellsBridge() {
|
|
|
24485
25442
|
top: toolbar ? toolbar.bottom + 6 : formPickRect.top + 16,
|
|
24486
25443
|
left: toolbar ? toolbar.left : formPickRect.left + 24
|
|
24487
25444
|
},
|
|
24488
|
-
children: /* @__PURE__ */
|
|
25445
|
+
children: /* @__PURE__ */ jsx35(FieldTypePicker, { onPick: handleAddField })
|
|
24489
25446
|
}
|
|
24490
25447
|
);
|
|
24491
25448
|
})() : 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__ */
|
|
25449
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ jsx35(NavbarContainerChrome, { rect: toolbarRect, onAdd: handleAddTopLevelNavItem }),
|
|
25450
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ jsx35(
|
|
24494
25451
|
FooterContainerChrome,
|
|
24495
25452
|
{
|
|
24496
25453
|
rect: toolbarRect,
|
|
@@ -24498,7 +25455,7 @@ function OhhwellsBridge() {
|
|
|
24498
25455
|
addDisabled: !canAddFooterColumn()
|
|
24499
25456
|
}
|
|
24500
25457
|
),
|
|
24501
|
-
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */
|
|
25458
|
+
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */ jsx35(
|
|
24502
25459
|
ItemInteractionLayer,
|
|
24503
25460
|
{
|
|
24504
25461
|
rect: isItemDragging && draggedItemRect && (footerDragRef.current?.wasSelected || navDragRef.current?.wasSelected) ? draggedItemRect : toolbarRect,
|
|
@@ -24514,7 +25471,7 @@ function OhhwellsBridge() {
|
|
|
24514
25471
|
onItemPointerDown: toolbarVariant === "logo" ? void 0 : handleItemChromePointerDown,
|
|
24515
25472
|
onItemClick: toolbarVariant === "logo" ? void 0 : handleItemChromeClick,
|
|
24516
25473
|
itemDragSurface: toolbarVariant !== "logo" && !isFooterFrameSelection && !selectedIsSocialsRow,
|
|
24517
|
-
toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */
|
|
25474
|
+
toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */ jsx35(
|
|
24518
25475
|
ItemActionToolbar,
|
|
24519
25476
|
{
|
|
24520
25477
|
onEditLink: openLinkPopoverForSelected,
|
|
@@ -24558,8 +25515,8 @@ function OhhwellsBridge() {
|
|
|
24558
25515
|
) : void 0
|
|
24559
25516
|
}
|
|
24560
25517
|
),
|
|
24561
|
-
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && !isRectOutsideClip(toolbarRect, getIframeVisibleClip(parentScrollRef.current)) && /* @__PURE__ */
|
|
24562
|
-
/* @__PURE__ */
|
|
25518
|
+
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && !isRectOutsideClip(toolbarRect, getIframeVisibleClip(parentScrollRef.current)) && /* @__PURE__ */ jsxs22(Fragment10, { children: [
|
|
25519
|
+
/* @__PURE__ */ jsx35(
|
|
24563
25520
|
EditGlowChrome,
|
|
24564
25521
|
{
|
|
24565
25522
|
rect: toolbarRect,
|
|
@@ -24569,7 +25526,7 @@ function OhhwellsBridge() {
|
|
|
24569
25526
|
hideHandle: isItemDragging
|
|
24570
25527
|
}
|
|
24571
25528
|
),
|
|
24572
|
-
/* @__PURE__ */
|
|
25529
|
+
/* @__PURE__ */ jsx35(
|
|
24573
25530
|
FloatingToolbar,
|
|
24574
25531
|
{
|
|
24575
25532
|
rect: toolbarRect,
|
|
@@ -24582,7 +25539,7 @@ function OhhwellsBridge() {
|
|
|
24582
25539
|
}
|
|
24583
25540
|
)
|
|
24584
25541
|
] }),
|
|
24585
|
-
maxBadge && /* @__PURE__ */
|
|
25542
|
+
maxBadge && /* @__PURE__ */ jsxs22(
|
|
24586
25543
|
"div",
|
|
24587
25544
|
{
|
|
24588
25545
|
"data-ohw-max-badge": "",
|
|
@@ -24608,7 +25565,7 @@ function OhhwellsBridge() {
|
|
|
24608
25565
|
]
|
|
24609
25566
|
}
|
|
24610
25567
|
),
|
|
24611
|
-
toggleState && !linkPopover && /* @__PURE__ */
|
|
25568
|
+
toggleState && !linkPopover && /* @__PURE__ */ jsx35(
|
|
24612
25569
|
StateToggle,
|
|
24613
25570
|
{
|
|
24614
25571
|
rect: toggleState.rect,
|
|
@@ -24617,15 +25574,15 @@ function OhhwellsBridge() {
|
|
|
24617
25574
|
onStateChange: handleStateChange
|
|
24618
25575
|
}
|
|
24619
25576
|
),
|
|
24620
|
-
sectionGap && !linkPopover && /* @__PURE__ */
|
|
25577
|
+
sectionGap && !linkPopover && /* @__PURE__ */ jsxs22(
|
|
24621
25578
|
"div",
|
|
24622
25579
|
{
|
|
24623
25580
|
"data-ohw-section-insert-line": "",
|
|
24624
25581
|
className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
|
|
24625
25582
|
style: { top: sectionGap.y, transform: "translateY(-50%)" },
|
|
24626
25583
|
children: [
|
|
24627
|
-
/* @__PURE__ */
|
|
24628
|
-
/* @__PURE__ */
|
|
25584
|
+
/* @__PURE__ */ jsx35("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } }),
|
|
25585
|
+
/* @__PURE__ */ jsx35(
|
|
24629
25586
|
Badge,
|
|
24630
25587
|
{
|
|
24631
25588
|
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 +25599,11 @@ function OhhwellsBridge() {
|
|
|
24642
25599
|
children: "Add Section"
|
|
24643
25600
|
}
|
|
24644
25601
|
),
|
|
24645
|
-
/* @__PURE__ */
|
|
25602
|
+
/* @__PURE__ */ jsx35("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } })
|
|
24646
25603
|
]
|
|
24647
25604
|
}
|
|
24648
25605
|
),
|
|
24649
|
-
linkPopover && dialogPortalContainer ? /* @__PURE__ */
|
|
25606
|
+
linkPopover && dialogPortalContainer ? /* @__PURE__ */ jsx35(
|
|
24650
25607
|
LinkPopover,
|
|
24651
25608
|
{
|
|
24652
25609
|
panelRef: linkPopoverPanelRef,
|
|
@@ -24663,7 +25620,7 @@ function OhhwellsBridge() {
|
|
|
24663
25620
|
},
|
|
24664
25621
|
linkPopover.key
|
|
24665
25622
|
) : null,
|
|
24666
|
-
floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */
|
|
25623
|
+
floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */ jsx35(
|
|
24667
25624
|
FloatingPanel,
|
|
24668
25625
|
{
|
|
24669
25626
|
open: true,
|
|
@@ -24673,7 +25630,7 @@ function OhhwellsBridge() {
|
|
|
24673
25630
|
onPositionChange: setFloatingPanelPos,
|
|
24674
25631
|
parentScroll: parentScrollSnap ?? parentScrollRef.current,
|
|
24675
25632
|
onClose: closeFloatingPanelOnly,
|
|
24676
|
-
children: /* @__PURE__ */
|
|
25633
|
+
children: /* @__PURE__ */ jsx35(
|
|
24677
25634
|
SocialsDisplayPanel,
|
|
24678
25635
|
{
|
|
24679
25636
|
display: socialsDisplayFor(floatingPanel.row, editContentRef.current),
|