@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.cjs
CHANGED
|
@@ -74,7 +74,7 @@ __export(index_exports, {
|
|
|
74
74
|
module.exports = __toCommonJS(index_exports);
|
|
75
75
|
|
|
76
76
|
// src/OhhwellsBridge.tsx
|
|
77
|
-
var
|
|
77
|
+
var import_react19 = __toESM(require("react"), 1);
|
|
78
78
|
var import_client2 = require("react-dom/client");
|
|
79
79
|
var import_react_dom4 = require("react-dom");
|
|
80
80
|
|
|
@@ -501,6 +501,40 @@ function applyBrandToDom(kit) {
|
|
|
501
501
|
}
|
|
502
502
|
}
|
|
503
503
|
|
|
504
|
+
// src/lib/custom-code.ts
|
|
505
|
+
var ALLOWED_HEAD_TAGS = /* @__PURE__ */ new Set(["style", "meta", "link", "script", "noscript", "base"]);
|
|
506
|
+
var CUSTOM_CODE_AFTER_HEAD_KEY = "__ohw_custom_code_after_head";
|
|
507
|
+
var CUSTOM_CODE_BEFORE_HEAD_KEY = "__ohw_custom_code_before_head";
|
|
508
|
+
function clearExisting(slot) {
|
|
509
|
+
document.querySelectorAll(`[data-ohw-custom-code="${slot}"]`).forEach((el) => el.remove());
|
|
510
|
+
}
|
|
511
|
+
function buildNodes(raw, slot) {
|
|
512
|
+
if (!raw || !raw.trim()) return [];
|
|
513
|
+
const parsed = new DOMParser().parseFromString(raw, "text/html");
|
|
514
|
+
const source = [...parsed.head.childNodes, ...parsed.body.childNodes];
|
|
515
|
+
const nodes = [];
|
|
516
|
+
for (const node of source) {
|
|
517
|
+
if (node.nodeType !== Node.ELEMENT_NODE) continue;
|
|
518
|
+
const el = node;
|
|
519
|
+
const tag = el.tagName.toLowerCase();
|
|
520
|
+
if (!ALLOWED_HEAD_TAGS.has(tag)) continue;
|
|
521
|
+
const built = document.createElement(tag);
|
|
522
|
+
for (const attr of Array.from(el.attributes)) built.setAttribute(attr.name, attr.value);
|
|
523
|
+
if (tag === "script" || tag === "style" || tag === "noscript") built.textContent = el.textContent;
|
|
524
|
+
built.dataset.ohwCustomCode = slot;
|
|
525
|
+
nodes.push(built);
|
|
526
|
+
}
|
|
527
|
+
return nodes;
|
|
528
|
+
}
|
|
529
|
+
function applyCustomCodeToHead(content) {
|
|
530
|
+
clearExisting("after");
|
|
531
|
+
clearExisting("before");
|
|
532
|
+
const afterNodes = buildNodes(content[CUSTOM_CODE_AFTER_HEAD_KEY], "after");
|
|
533
|
+
if (afterNodes.length > 0) document.head.prepend(...afterNodes);
|
|
534
|
+
const beforeNodes = buildNodes(content[CUSTOM_CODE_BEFORE_HEAD_KEY], "before");
|
|
535
|
+
if (beforeNodes.length > 0) document.head.append(...beforeNodes);
|
|
536
|
+
}
|
|
537
|
+
|
|
504
538
|
// src/lib/section-styles.ts
|
|
505
539
|
var STYLE_STORE_KEY = "__ohw_styles";
|
|
506
540
|
var STYLE_SHEET_ID = "ohw-section-styles";
|
|
@@ -1497,12 +1531,20 @@ function MediaBox({
|
|
|
1497
1531
|
aspect,
|
|
1498
1532
|
radius,
|
|
1499
1533
|
height,
|
|
1500
|
-
editPath
|
|
1534
|
+
editPath,
|
|
1535
|
+
alt,
|
|
1536
|
+
fit,
|
|
1537
|
+
grayscale,
|
|
1538
|
+
fixedSize,
|
|
1539
|
+
genericImageEdit = true
|
|
1501
1540
|
}) {
|
|
1502
1541
|
const url = refValue ? ctx.resolveMedia(refValue) : null;
|
|
1503
1542
|
const isIcon = /^(lucide|simple):/.test(refValue);
|
|
1504
1543
|
const aspectRatio = aspect && /^\d+:\d+$/.test(aspect) ? aspect.replace(":", " / ") : void 0;
|
|
1505
|
-
const editAttrs = ctx.keyFor && editPath && !isIcon ? {
|
|
1544
|
+
const editAttrs = ctx.keyFor && editPath && !isIcon ? {
|
|
1545
|
+
"data-ohw-key": ctx.keyFor(editPath),
|
|
1546
|
+
...genericImageEdit ? { "data-ohw-editable": "image" } : {}
|
|
1547
|
+
} : {};
|
|
1506
1548
|
if (isIcon) {
|
|
1507
1549
|
const Icon = refValue.startsWith("lucide:") ? lucideByName(refValue.slice(7)) : null;
|
|
1508
1550
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -1527,9 +1569,10 @@ function MediaBox({
|
|
|
1527
1569
|
{
|
|
1528
1570
|
...editAttrs,
|
|
1529
1571
|
style: {
|
|
1530
|
-
width: "100%",
|
|
1572
|
+
width: fixedSize ? "auto" : "100%",
|
|
1531
1573
|
aspectRatio,
|
|
1532
|
-
|
|
1574
|
+
height: fixedSize ? height : void 0,
|
|
1575
|
+
minHeight: fixedSize ? void 0 : height ?? (aspectRatio ? void 0 : 180),
|
|
1533
1576
|
borderRadius: radius,
|
|
1534
1577
|
overflow: "hidden",
|
|
1535
1578
|
background: "#DBEAFE",
|
|
@@ -1537,7 +1580,8 @@ function MediaBox({
|
|
|
1537
1580
|
alignItems: "center",
|
|
1538
1581
|
justifyContent: "center",
|
|
1539
1582
|
color: "#93C5FD",
|
|
1540
|
-
fontSize: 13
|
|
1583
|
+
fontSize: 13,
|
|
1584
|
+
filter: grayscale ? "grayscale(1)" : void 0
|
|
1541
1585
|
},
|
|
1542
1586
|
children: url || keyed ? (
|
|
1543
1587
|
// Keyed slots always mount an <img> so hydrate overrides have a target.
|
|
@@ -1545,8 +1589,13 @@ function MediaBox({
|
|
|
1545
1589
|
"img",
|
|
1546
1590
|
{
|
|
1547
1591
|
src: url ?? TRANSPARENT_PX,
|
|
1548
|
-
alt: "",
|
|
1549
|
-
style: {
|
|
1592
|
+
alt: alt ?? "",
|
|
1593
|
+
style: {
|
|
1594
|
+
width: fixedSize ? "auto" : "100%",
|
|
1595
|
+
height: "100%",
|
|
1596
|
+
objectFit: fit ?? "cover",
|
|
1597
|
+
display: "block"
|
|
1598
|
+
}
|
|
1550
1599
|
}
|
|
1551
1600
|
)
|
|
1552
1601
|
) : refValue || "media"
|
|
@@ -2199,7 +2248,8 @@ function toggleAccordionItem(button) {
|
|
|
2199
2248
|
}
|
|
2200
2249
|
function AccordionBlock({ node, ctx, path }) {
|
|
2201
2250
|
const rule = `1px solid ${ctx.brand.palette.dark}33`;
|
|
2202
|
-
|
|
2251
|
+
const items = node.items ?? [];
|
|
2252
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-ai-accordion": "", style: { borderTop: rule }, children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { borderBottom: rule }, children: [
|
|
2203
2253
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
2204
2254
|
"button",
|
|
2205
2255
|
{
|
|
@@ -2252,6 +2302,94 @@ function AccordionBlock({ node, ctx, path }) {
|
|
|
2252
2302
|
) })
|
|
2253
2303
|
] }, i)) });
|
|
2254
2304
|
}
|
|
2305
|
+
function MediaStripBlock({ node, ctx, path }) {
|
|
2306
|
+
const slots = node.slots ?? {};
|
|
2307
|
+
const items = node.items ?? [];
|
|
2308
|
+
const variant = slots.variant === "reel" ? "reel" : "logos";
|
|
2309
|
+
const align = slots.align === "left" || slots.align === "right" ? slots.align : "center";
|
|
2310
|
+
const treatment = slots.treatment === "color" || slots.treatment === "grayscale" ? slots.treatment : variant === "logos" ? "grayscale" : "color";
|
|
2311
|
+
const logoMaxHeight = typeof slots.logoMaxHeight === "number" ? slots.logoMaxHeight : 48;
|
|
2312
|
+
const cardWidth = typeof slots.cardWidth === "number" ? slots.cardWidth : 240;
|
|
2313
|
+
const justify = align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center";
|
|
2314
|
+
const label = str(slots.label);
|
|
2315
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "data-ohw-media-strip": "", style: { display: "flex", flexDirection: "column", gap: AI_TREE_TOKENS.spacing6 }, children: [
|
|
2316
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", {
|
|
2317
|
+
// Host sites often style `a:hover{opacity}` globally — that would fade every linked item
|
|
2318
|
+
// whatever preset is chosen, so the anchors here opt out and only the preset applies.
|
|
2319
|
+
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}'
|
|
2320
|
+
}),
|
|
2321
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2322
|
+
"div",
|
|
2323
|
+
{
|
|
2324
|
+
...textAttrs(ctx, `${path}.label`),
|
|
2325
|
+
style: {
|
|
2326
|
+
...typeStyle(AI_TREE_TOKENS.type.eyebrow, ctx.brand.fonts.body),
|
|
2327
|
+
color: ctx.brand.palette.accent,
|
|
2328
|
+
textAlign: align
|
|
2329
|
+
},
|
|
2330
|
+
children: label
|
|
2331
|
+
}
|
|
2332
|
+
),
|
|
2333
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2334
|
+
"div",
|
|
2335
|
+
{
|
|
2336
|
+
style: {
|
|
2337
|
+
display: "flex",
|
|
2338
|
+
flexWrap: "wrap",
|
|
2339
|
+
gap: AI_TREE_TOKENS.spacing4,
|
|
2340
|
+
justifyContent: justify,
|
|
2341
|
+
alignItems: variant === "logos" ? "center" : "flex-start"
|
|
2342
|
+
},
|
|
2343
|
+
children: items.map((item, i) => {
|
|
2344
|
+
const hasLink = typeof item.href === "string" && item.href.length > 0;
|
|
2345
|
+
const hoverPreset = !hasLink ? "none" : slots.hover === "none" || slots.hover === "lift" || slots.hover === "zoom" || slots.hover === "fade" ? slots.hover : "lift";
|
|
2346
|
+
const box = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2347
|
+
"div",
|
|
2348
|
+
{
|
|
2349
|
+
"data-ohw-media-strip-item": "",
|
|
2350
|
+
"data-ohw-media-strip-index": i,
|
|
2351
|
+
style: variant === "logos" ? { height: logoMaxHeight, width: "auto" } : { width: cardWidth, flexShrink: 0 },
|
|
2352
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2353
|
+
"div",
|
|
2354
|
+
{
|
|
2355
|
+
"data-ohw-media-strip-hover": hoverPreset === "none" ? void 0 : hoverPreset,
|
|
2356
|
+
style: { height: "100%" },
|
|
2357
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2358
|
+
MediaBox,
|
|
2359
|
+
{
|
|
2360
|
+
refValue: item.assetId,
|
|
2361
|
+
ctx,
|
|
2362
|
+
aspect: variant === "reel" ? "9:16" : void 0,
|
|
2363
|
+
radius: variant === "reel" ? AI_TREE_TOKENS.radiusCard : 4,
|
|
2364
|
+
height: variant === "logos" ? logoMaxHeight : void 0,
|
|
2365
|
+
editPath: `${path}.items.${i}.assetId`,
|
|
2366
|
+
alt: item.alt,
|
|
2367
|
+
fit: variant === "logos" ? "contain" : "cover",
|
|
2368
|
+
grayscale: treatment === "grayscale",
|
|
2369
|
+
fixedSize: variant === "logos",
|
|
2370
|
+
genericImageEdit: false
|
|
2371
|
+
}
|
|
2372
|
+
)
|
|
2373
|
+
}
|
|
2374
|
+
)
|
|
2375
|
+
}
|
|
2376
|
+
);
|
|
2377
|
+
return hasLink ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
2378
|
+
"a",
|
|
2379
|
+
{
|
|
2380
|
+
href: item.href,
|
|
2381
|
+
target: item.linkTarget === "same-tab" ? void 0 : "_blank",
|
|
2382
|
+
rel: item.linkTarget === "same-tab" ? void 0 : "noopener noreferrer",
|
|
2383
|
+
style: { display: "block", textDecoration: "none" },
|
|
2384
|
+
children: box
|
|
2385
|
+
},
|
|
2386
|
+
i
|
|
2387
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.default.Fragment, { children: box }, i);
|
|
2388
|
+
})
|
|
2389
|
+
}
|
|
2390
|
+
)
|
|
2391
|
+
] });
|
|
2392
|
+
}
|
|
2255
2393
|
function useIsMobile() {
|
|
2256
2394
|
const [mobile, setMobile] = import_react.default.useState(
|
|
2257
2395
|
() => typeof window !== "undefined" && window.matchMedia("(max-width: 768px)").matches
|
|
@@ -2583,6 +2721,8 @@ function renderNode(node, ctx, path) {
|
|
|
2583
2721
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollectionBlock, { node, ctx, path });
|
|
2584
2722
|
case "accordion":
|
|
2585
2723
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionBlock, { node, ctx, path });
|
|
2724
|
+
case "media-strip":
|
|
2725
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MediaStripBlock, { node, ctx, path });
|
|
2586
2726
|
case "embed": {
|
|
2587
2727
|
const child = (node.children ?? [])[0];
|
|
2588
2728
|
if (child) {
|
|
@@ -3080,21 +3220,21 @@ function placeContainer(container, entry) {
|
|
|
3080
3220
|
const original = findTemplateSection(entry.replaces);
|
|
3081
3221
|
if (original) {
|
|
3082
3222
|
original.insertAdjacentElement("afterend", container);
|
|
3083
|
-
return;
|
|
3223
|
+
return "anchored";
|
|
3084
3224
|
}
|
|
3085
3225
|
}
|
|
3086
3226
|
if (entry.beforeSection) {
|
|
3087
3227
|
const anchor = findPlacementAnchor(entry.beforeSection, container);
|
|
3088
3228
|
if (anchor) {
|
|
3089
3229
|
anchor.insertAdjacentElement("beforebegin", container);
|
|
3090
|
-
return;
|
|
3230
|
+
return "anchored";
|
|
3091
3231
|
}
|
|
3092
3232
|
}
|
|
3093
3233
|
if (entry.afterSection) {
|
|
3094
3234
|
const anchor = findPlacementAnchor(entry.afterSection, container);
|
|
3095
3235
|
if (anchor) {
|
|
3096
3236
|
anchor.insertAdjacentElement("afterend", container);
|
|
3097
|
-
return;
|
|
3237
|
+
return "anchored";
|
|
3098
3238
|
}
|
|
3099
3239
|
}
|
|
3100
3240
|
const footer = findFooterSection();
|
|
@@ -3103,6 +3243,7 @@ function placeContainer(container, entry) {
|
|
|
3103
3243
|
} else {
|
|
3104
3244
|
document.body.appendChild(container);
|
|
3105
3245
|
}
|
|
3246
|
+
return "fallback";
|
|
3106
3247
|
}
|
|
3107
3248
|
function syncRemovedSections(state) {
|
|
3108
3249
|
const removed = new Set(state.removed ?? []);
|
|
@@ -3159,6 +3300,10 @@ function syncReplacedOriginals(state) {
|
|
|
3159
3300
|
}
|
|
3160
3301
|
var sectionOrderIndex = /* @__PURE__ */ new Map();
|
|
3161
3302
|
var removedSectionIds = /* @__PURE__ */ new Set();
|
|
3303
|
+
var persistSectionOrder = null;
|
|
3304
|
+
function setSectionOrderPersistHandler(handler) {
|
|
3305
|
+
persistSectionOrder = handler;
|
|
3306
|
+
}
|
|
3162
3307
|
function setAiSectionOrder(raw, currentPath) {
|
|
3163
3308
|
const next = /* @__PURE__ */ new Map();
|
|
3164
3309
|
const removed = /* @__PURE__ */ new Set();
|
|
@@ -3239,16 +3384,16 @@ function applyAiSectionsToDom(state, options) {
|
|
|
3239
3384
|
mounted.delete(id);
|
|
3240
3385
|
}
|
|
3241
3386
|
}
|
|
3387
|
+
const newlyAnchoredIds = [];
|
|
3242
3388
|
for (const entry of ordered) {
|
|
3243
3389
|
const serialized = JSON.stringify(entry) + brandKey;
|
|
3244
3390
|
const existing = mounted.get(entry.id);
|
|
3245
3391
|
if (existing && existing.serialized === serialized && existing.container.isConnected) {
|
|
3246
3392
|
continue;
|
|
3247
3393
|
}
|
|
3394
|
+
const isNewMount = !existing || !existing.container.isConnected;
|
|
3248
3395
|
let container = existing?.container;
|
|
3249
|
-
let isNewMount = false;
|
|
3250
3396
|
if (!container || !container.isConnected) {
|
|
3251
|
-
isNewMount = true;
|
|
3252
3397
|
existing?.root.unmount();
|
|
3253
3398
|
container?.remove();
|
|
3254
3399
|
container = document.createElement("div");
|
|
@@ -3258,7 +3403,10 @@ function applyAiSectionsToDom(state, options) {
|
|
|
3258
3403
|
container.setAttribute("data-ohw-section", entry.id);
|
|
3259
3404
|
container.setAttribute("data-ohw-instance", entry.id);
|
|
3260
3405
|
container.setAttribute("data-ohw-section-label", entry.label);
|
|
3261
|
-
if (isNewMount)
|
|
3406
|
+
if (isNewMount) {
|
|
3407
|
+
const mode = placeContainer(container, entry);
|
|
3408
|
+
if (mode === "anchored" && !sectionOrderIndex.has(entry.id)) newlyAnchoredIds.push(entry.id);
|
|
3409
|
+
}
|
|
3262
3410
|
const root = mounted.get(entry.id)?.root ?? (0, import_client.createRoot)(container);
|
|
3263
3411
|
const resolveMedia = (ref) => entry.media[ref] ?? null;
|
|
3264
3412
|
(0, import_react_dom.flushSync)(() => {
|
|
@@ -3288,6 +3436,16 @@ function applyAiSectionsToDom(state, options) {
|
|
|
3288
3436
|
prev = el;
|
|
3289
3437
|
}
|
|
3290
3438
|
}
|
|
3439
|
+
if (newlyAnchoredIds.length > 0 && persistSectionOrder) {
|
|
3440
|
+
const snapshot = topLevelSections().map((el, order) => ({
|
|
3441
|
+
instanceId: instanceIdOf(el),
|
|
3442
|
+
type: el.getAttribute("data-ohw-section") ?? "",
|
|
3443
|
+
order,
|
|
3444
|
+
pagePath
|
|
3445
|
+
}));
|
|
3446
|
+
for (const snapEntry of snapshot) sectionOrderIndex.set(snapEntry.instanceId, snapEntry.order);
|
|
3447
|
+
persistSectionOrder(snapshot);
|
|
3448
|
+
}
|
|
3291
3449
|
syncReplacedOriginals(state);
|
|
3292
3450
|
syncRemovedSections(state);
|
|
3293
3451
|
syncTemplateHidden(state, pageSections.length > 0);
|
|
@@ -9749,35 +9907,796 @@ function AiSectionOverlay({
|
|
|
9749
9907
|
pointerEvents: "none",
|
|
9750
9908
|
zIndex: 2147483200
|
|
9751
9909
|
}
|
|
9752
|
-
}
|
|
9753
|
-
),
|
|
9754
|
-
!reviewButtonsHidden && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
9755
|
-
"div",
|
|
9756
|
-
{
|
|
9757
|
-
style: {
|
|
9758
|
-
position: "fixed",
|
|
9759
|
-
top: reviewRect.top + 12,
|
|
9760
|
-
left: reviewRect.left,
|
|
9761
|
-
width: reviewRect.width,
|
|
9762
|
-
display: "flex",
|
|
9763
|
-
gap: 8,
|
|
9764
|
-
justifyContent: "flex-end",
|
|
9765
|
-
paddingRight: 12,
|
|
9766
|
-
zIndex: 2147483201
|
|
9767
|
-
},
|
|
9768
|
-
children: [
|
|
9769
|
-
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ReviewButton, { label: "Accept", onClick: () => decide("accept"), background: PRIMARY2, color: "#ffffff", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.Check, { size: 16, strokeWidth: 2.5, "aria-hidden": true }) }),
|
|
9770
|
-
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ReviewButton, { label: "Discard", onClick: () => decide("discard"), background: "#EFF6FF", color: "#0c0a09", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.X, { size: 16, strokeWidth: 2, "aria-hidden": true }) })
|
|
9771
|
-
]
|
|
9772
|
-
}
|
|
9773
|
-
)
|
|
9774
|
-
] })
|
|
9910
|
+
}
|
|
9911
|
+
),
|
|
9912
|
+
!reviewButtonsHidden && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
9913
|
+
"div",
|
|
9914
|
+
{
|
|
9915
|
+
style: {
|
|
9916
|
+
position: "fixed",
|
|
9917
|
+
top: reviewRect.top + 12,
|
|
9918
|
+
left: reviewRect.left,
|
|
9919
|
+
width: reviewRect.width,
|
|
9920
|
+
display: "flex",
|
|
9921
|
+
gap: 8,
|
|
9922
|
+
justifyContent: "flex-end",
|
|
9923
|
+
paddingRight: 12,
|
|
9924
|
+
zIndex: 2147483201
|
|
9925
|
+
},
|
|
9926
|
+
children: [
|
|
9927
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ReviewButton, { label: "Accept", onClick: () => decide("accept"), background: PRIMARY2, color: "#ffffff", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.Check, { size: 16, strokeWidth: 2.5, "aria-hidden": true }) }),
|
|
9928
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ReviewButton, { label: "Discard", onClick: () => decide("discard"), background: "#EFF6FF", color: "#0c0a09", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.X, { size: 16, strokeWidth: 2, "aria-hidden": true }) })
|
|
9929
|
+
]
|
|
9930
|
+
}
|
|
9931
|
+
)
|
|
9932
|
+
] })
|
|
9933
|
+
] });
|
|
9934
|
+
}
|
|
9935
|
+
|
|
9936
|
+
// src/ui/ai-section/AiMediaStripOverlay.tsx
|
|
9937
|
+
var import_react9 = require("react");
|
|
9938
|
+
var import_lucide_react8 = require("lucide-react");
|
|
9939
|
+
|
|
9940
|
+
// src/lib/ai-media-strip-tree.ts
|
|
9941
|
+
var MEDIA_STRIP_ITEM_MIN = 1;
|
|
9942
|
+
var LOGO_MAX_HEIGHT_MIN = 24;
|
|
9943
|
+
var LOGO_MAX_HEIGHT_MAX = 96;
|
|
9944
|
+
var CARD_WIDTH_MIN = 160;
|
|
9945
|
+
var CARD_WIDTH_MAX = 320;
|
|
9946
|
+
function isMediaStrip(node) {
|
|
9947
|
+
return node.type === "media-strip";
|
|
9948
|
+
}
|
|
9949
|
+
function findBlock(node) {
|
|
9950
|
+
if (isMediaStrip(node)) return node;
|
|
9951
|
+
for (const child of node.children ?? []) {
|
|
9952
|
+
const found = findBlock(child);
|
|
9953
|
+
if (found) return found;
|
|
9954
|
+
}
|
|
9955
|
+
return null;
|
|
9956
|
+
}
|
|
9957
|
+
function findMediaStripBlock(tree) {
|
|
9958
|
+
for (const row of tree.rows ?? []) {
|
|
9959
|
+
for (const block of row.blocks ?? []) {
|
|
9960
|
+
const found = findBlock(block);
|
|
9961
|
+
if (found) return found;
|
|
9962
|
+
}
|
|
9963
|
+
}
|
|
9964
|
+
return null;
|
|
9965
|
+
}
|
|
9966
|
+
function mediaStripItems(tree) {
|
|
9967
|
+
const block = findMediaStripBlock(tree);
|
|
9968
|
+
return block?.items ?? [];
|
|
9969
|
+
}
|
|
9970
|
+
function withMediaStrip(tree, mutate) {
|
|
9971
|
+
const next = JSON.parse(JSON.stringify(tree));
|
|
9972
|
+
const block = findMediaStripBlock(next);
|
|
9973
|
+
if (!block) return null;
|
|
9974
|
+
block.items = block.items ?? [];
|
|
9975
|
+
return mutate(block) ? next : null;
|
|
9976
|
+
}
|
|
9977
|
+
function addMediaStripItem(tree, item, afterIndex) {
|
|
9978
|
+
return withMediaStrip(tree, (block) => {
|
|
9979
|
+
const items = block.items;
|
|
9980
|
+
const at = afterIndex === void 0 ? items.length : Math.min(items.length, afterIndex + 1);
|
|
9981
|
+
items.splice(at, 0, { ...item });
|
|
9982
|
+
return true;
|
|
9983
|
+
});
|
|
9984
|
+
}
|
|
9985
|
+
function removeMediaStripItem(tree, index) {
|
|
9986
|
+
return withMediaStrip(tree, (block) => {
|
|
9987
|
+
const items = block.items;
|
|
9988
|
+
if (items.length <= MEDIA_STRIP_ITEM_MIN) return false;
|
|
9989
|
+
if (index < 0 || index >= items.length) return false;
|
|
9990
|
+
items.splice(index, 1);
|
|
9991
|
+
return true;
|
|
9992
|
+
});
|
|
9993
|
+
}
|
|
9994
|
+
function reorderMediaStripItem(tree, index, direction) {
|
|
9995
|
+
return withMediaStrip(tree, (block) => {
|
|
9996
|
+
const items = block.items;
|
|
9997
|
+
const target = index + direction;
|
|
9998
|
+
if (index < 0 || index >= items.length || target < 0 || target >= items.length) return false;
|
|
9999
|
+
const [moved] = items.splice(index, 1);
|
|
10000
|
+
items.splice(target, 0, moved);
|
|
10001
|
+
return true;
|
|
10002
|
+
});
|
|
10003
|
+
}
|
|
10004
|
+
function setMediaStripVariant(tree, variant) {
|
|
10005
|
+
return withMediaStrip(tree, (block) => {
|
|
10006
|
+
block.slots = { ...block.slots, variant };
|
|
10007
|
+
if (variant === "logos") delete block.slots.cardWidth;
|
|
10008
|
+
if (variant === "reel") delete block.slots.logoMaxHeight;
|
|
10009
|
+
return true;
|
|
10010
|
+
});
|
|
10011
|
+
}
|
|
10012
|
+
function setMediaStripSizing(tree, value) {
|
|
10013
|
+
return withMediaStrip(tree, (block) => {
|
|
10014
|
+
const variant = block.slots?.variant;
|
|
10015
|
+
if (variant === "logos") {
|
|
10016
|
+
block.slots = { ...block.slots, logoMaxHeight: Math.min(LOGO_MAX_HEIGHT_MAX, Math.max(LOGO_MAX_HEIGHT_MIN, value)) };
|
|
10017
|
+
return true;
|
|
10018
|
+
}
|
|
10019
|
+
if (variant === "reel") {
|
|
10020
|
+
block.slots = { ...block.slots, cardWidth: Math.min(CARD_WIDTH_MAX, Math.max(CARD_WIDTH_MIN, value)) };
|
|
10021
|
+
return true;
|
|
10022
|
+
}
|
|
10023
|
+
return false;
|
|
10024
|
+
});
|
|
10025
|
+
}
|
|
10026
|
+
function setMediaStripTreatment(tree, treatment) {
|
|
10027
|
+
return withMediaStrip(tree, (block) => {
|
|
10028
|
+
block.slots = { ...block.slots, treatment };
|
|
10029
|
+
return true;
|
|
10030
|
+
});
|
|
10031
|
+
}
|
|
10032
|
+
function setMediaStripAlign(tree, align) {
|
|
10033
|
+
return withMediaStrip(tree, (block) => {
|
|
10034
|
+
block.slots = { ...block.slots, align };
|
|
10035
|
+
return true;
|
|
10036
|
+
});
|
|
10037
|
+
}
|
|
10038
|
+
function setMediaStripHover(tree, hover) {
|
|
10039
|
+
return withMediaStrip(tree, (block) => {
|
|
10040
|
+
block.slots = { ...block.slots, hover };
|
|
10041
|
+
return true;
|
|
10042
|
+
});
|
|
10043
|
+
}
|
|
10044
|
+
function setMediaStripItemAsset(tree, index, assetId) {
|
|
10045
|
+
return withMediaStrip(tree, (block) => {
|
|
10046
|
+
const items = block.items;
|
|
10047
|
+
if (index < 0 || index >= items.length) return false;
|
|
10048
|
+
items[index] = { ...items[index], assetId };
|
|
10049
|
+
return true;
|
|
10050
|
+
});
|
|
10051
|
+
}
|
|
10052
|
+
function setMediaStripItemAlt(tree, index, alt) {
|
|
10053
|
+
return withMediaStrip(tree, (block) => {
|
|
10054
|
+
const items = block.items;
|
|
10055
|
+
if (index < 0 || index >= items.length) return false;
|
|
10056
|
+
items[index] = { ...items[index], alt };
|
|
10057
|
+
return true;
|
|
10058
|
+
});
|
|
10059
|
+
}
|
|
10060
|
+
function setMediaStripItemLink(tree, index, link) {
|
|
10061
|
+
return withMediaStrip(tree, (block) => {
|
|
10062
|
+
const items = block.items;
|
|
10063
|
+
if (index < 0 || index >= items.length) return false;
|
|
10064
|
+
const item = { ...items[index] };
|
|
10065
|
+
if (link.href) {
|
|
10066
|
+
item.href = link.href;
|
|
10067
|
+
if (link.linkTarget) item.linkTarget = link.linkTarget;
|
|
10068
|
+
} else {
|
|
10069
|
+
delete item.href;
|
|
10070
|
+
delete item.linkTarget;
|
|
10071
|
+
}
|
|
10072
|
+
items[index] = item;
|
|
10073
|
+
return true;
|
|
10074
|
+
});
|
|
10075
|
+
}
|
|
10076
|
+
|
|
10077
|
+
// src/ui/ai-section/AiMediaStripOverlay.tsx
|
|
10078
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
10079
|
+
var PRIMARY3 = "#0885FE";
|
|
10080
|
+
var OHW_BLUE = `var(--ohw-primary, ${PRIMARY3})`;
|
|
10081
|
+
var OHW_BLUE_DARK = `color-mix(in srgb, var(--ohw-primary, ${PRIMARY3}) 60%, #000000)`;
|
|
10082
|
+
function findMediaStripItemElement(sectionId, index) {
|
|
10083
|
+
const sectionEl = findByInstanceId(sectionId);
|
|
10084
|
+
if (!sectionEl) return null;
|
|
10085
|
+
const items = sectionEl.querySelectorAll("[data-ohw-media-strip-item]");
|
|
10086
|
+
for (const el of Array.from(items)) {
|
|
10087
|
+
if (Number(el.dataset.ohwMediaStripIndex) === index) return el;
|
|
10088
|
+
}
|
|
10089
|
+
return null;
|
|
10090
|
+
}
|
|
10091
|
+
function readRect2(ref) {
|
|
10092
|
+
const el = ref && findMediaStripItemElement(ref.sectionId, ref.index);
|
|
10093
|
+
if (!el) return null;
|
|
10094
|
+
const r2 = el.getBoundingClientRect();
|
|
10095
|
+
if (r2.width <= 0 || r2.height <= 0) return null;
|
|
10096
|
+
return { top: r2.top, left: r2.left, width: r2.width, height: r2.height };
|
|
10097
|
+
}
|
|
10098
|
+
function useLiveItemRect(ref) {
|
|
10099
|
+
const [rect, setRect] = (0, import_react9.useState)(null);
|
|
10100
|
+
(0, import_react9.useEffect)(() => {
|
|
10101
|
+
if (!ref) {
|
|
10102
|
+
setRect(null);
|
|
10103
|
+
return;
|
|
10104
|
+
}
|
|
10105
|
+
const update = () => {
|
|
10106
|
+
const next = readRect2(ref);
|
|
10107
|
+
setRect(
|
|
10108
|
+
(prev) => prev && next && prev.top === next.top && prev.left === next.left && prev.width === next.width && prev.height === next.height ? prev : next
|
|
10109
|
+
);
|
|
10110
|
+
};
|
|
10111
|
+
update();
|
|
10112
|
+
const opts = { capture: true, passive: true };
|
|
10113
|
+
window.addEventListener("scroll", update, opts);
|
|
10114
|
+
window.addEventListener("resize", update);
|
|
10115
|
+
const interval = setInterval(update, 500);
|
|
10116
|
+
return () => {
|
|
10117
|
+
window.removeEventListener("scroll", update, opts);
|
|
10118
|
+
window.removeEventListener("resize", update);
|
|
10119
|
+
clearInterval(interval);
|
|
10120
|
+
};
|
|
10121
|
+
}, [ref?.sectionId, ref?.index]);
|
|
10122
|
+
return rect;
|
|
10123
|
+
}
|
|
10124
|
+
function requestValidateTree(postToParent2, tree) {
|
|
10125
|
+
return new Promise((resolve) => {
|
|
10126
|
+
const id = `ai-validate-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
|
|
10127
|
+
const timeout = window.setTimeout(() => {
|
|
10128
|
+
window.removeEventListener("message", onMessage);
|
|
10129
|
+
resolve({ ok: false, reasons: ["Validation request timed out."] });
|
|
10130
|
+
}, 8e3);
|
|
10131
|
+
function onMessage(e) {
|
|
10132
|
+
if (e.data?.type !== "ow:ai-validate-tree-result" || e.data.id !== id) return;
|
|
10133
|
+
window.clearTimeout(timeout);
|
|
10134
|
+
window.removeEventListener("message", onMessage);
|
|
10135
|
+
resolve({ ok: e.data.ok === true, reasons: Array.isArray(e.data.reasons) ? e.data.reasons : [] });
|
|
10136
|
+
}
|
|
10137
|
+
window.addEventListener("message", onMessage);
|
|
10138
|
+
postToParent2({ type: "ow:ai-validate-tree-request", id, tree });
|
|
10139
|
+
});
|
|
10140
|
+
}
|
|
10141
|
+
function requestAssetPick(postToParent2) {
|
|
10142
|
+
return new Promise((resolve) => {
|
|
10143
|
+
const id = `ai-asset-pick-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
|
|
10144
|
+
const timeout = window.setTimeout(() => {
|
|
10145
|
+
window.removeEventListener("message", onMessage);
|
|
10146
|
+
resolve(null);
|
|
10147
|
+
}, 3e5);
|
|
10148
|
+
function onMessage(e) {
|
|
10149
|
+
if (e.data?.type !== "ow:asset-picked" || e.data.id !== id) return;
|
|
10150
|
+
window.clearTimeout(timeout);
|
|
10151
|
+
window.removeEventListener("message", onMessage);
|
|
10152
|
+
resolve(
|
|
10153
|
+
typeof e.data.assetId === "string" && typeof e.data.url === "string" ? { assetId: e.data.assetId, url: e.data.url } : null
|
|
10154
|
+
);
|
|
10155
|
+
}
|
|
10156
|
+
window.addEventListener("message", onMessage);
|
|
10157
|
+
postToParent2({ type: "ow:asset-pick", id });
|
|
10158
|
+
});
|
|
10159
|
+
}
|
|
10160
|
+
function Pill({
|
|
10161
|
+
label,
|
|
10162
|
+
onClick,
|
|
10163
|
+
disabled,
|
|
10164
|
+
active
|
|
10165
|
+
}) {
|
|
10166
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10167
|
+
"button",
|
|
10168
|
+
{
|
|
10169
|
+
type: "button",
|
|
10170
|
+
onClick,
|
|
10171
|
+
disabled,
|
|
10172
|
+
style: {
|
|
10173
|
+
height: 28,
|
|
10174
|
+
padding: "0 10px",
|
|
10175
|
+
display: "inline-flex",
|
|
10176
|
+
alignItems: "center",
|
|
10177
|
+
gap: 4,
|
|
10178
|
+
borderRadius: 999,
|
|
10179
|
+
border: "none",
|
|
10180
|
+
cursor: disabled ? "default" : "pointer",
|
|
10181
|
+
background: active ? OHW_BLUE_DARK : "#ffffff",
|
|
10182
|
+
color: active ? "#ffffff" : OHW_BLUE_DARK,
|
|
10183
|
+
opacity: disabled ? 0.4 : 1,
|
|
10184
|
+
fontSize: 12,
|
|
10185
|
+
lineHeight: "16px",
|
|
10186
|
+
fontFamily: "Figtree, ui-sans-serif, system-ui, sans-serif",
|
|
10187
|
+
whiteSpace: "nowrap",
|
|
10188
|
+
flex: "0 0 auto"
|
|
10189
|
+
},
|
|
10190
|
+
children: label
|
|
10191
|
+
}
|
|
10192
|
+
);
|
|
10193
|
+
}
|
|
10194
|
+
function AltInput({ value, onCommit }) {
|
|
10195
|
+
const [draft, setDraft] = (0, import_react9.useState)(value);
|
|
10196
|
+
(0, import_react9.useEffect)(() => setDraft(value), [value]);
|
|
10197
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
10198
|
+
"div",
|
|
10199
|
+
{
|
|
10200
|
+
style: {
|
|
10201
|
+
display: "flex",
|
|
10202
|
+
alignItems: "center",
|
|
10203
|
+
gap: 6,
|
|
10204
|
+
height: 28,
|
|
10205
|
+
padding: "0 12px",
|
|
10206
|
+
borderRadius: 999,
|
|
10207
|
+
background: "#ffffff",
|
|
10208
|
+
width: "100%",
|
|
10209
|
+
maxWidth: 260,
|
|
10210
|
+
boxSizing: "border-box"
|
|
10211
|
+
},
|
|
10212
|
+
children: [
|
|
10213
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10214
|
+
"span",
|
|
10215
|
+
{
|
|
10216
|
+
style: {
|
|
10217
|
+
flex: "0 0 auto",
|
|
10218
|
+
color: OHW_BLUE_DARK,
|
|
10219
|
+
fontSize: 10,
|
|
10220
|
+
fontWeight: 700,
|
|
10221
|
+
textTransform: "uppercase",
|
|
10222
|
+
letterSpacing: 0.4
|
|
10223
|
+
},
|
|
10224
|
+
children: "Alt"
|
|
10225
|
+
}
|
|
10226
|
+
),
|
|
10227
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10228
|
+
"input",
|
|
10229
|
+
{
|
|
10230
|
+
type: "text",
|
|
10231
|
+
value: draft,
|
|
10232
|
+
onChange: (e) => setDraft(e.target.value),
|
|
10233
|
+
onBlur: () => {
|
|
10234
|
+
if (draft !== value) onCommit(draft);
|
|
10235
|
+
},
|
|
10236
|
+
onKeyDown: (e) => {
|
|
10237
|
+
if (e.key === "Enter") e.currentTarget.blur();
|
|
10238
|
+
if (e.key === "Escape") {
|
|
10239
|
+
setDraft(value);
|
|
10240
|
+
e.currentTarget.blur();
|
|
10241
|
+
}
|
|
10242
|
+
},
|
|
10243
|
+
placeholder: "Describe this image",
|
|
10244
|
+
"aria-label": "Image alt text",
|
|
10245
|
+
style: {
|
|
10246
|
+
flex: 1,
|
|
10247
|
+
minWidth: 0,
|
|
10248
|
+
border: "none",
|
|
10249
|
+
outline: "none",
|
|
10250
|
+
background: "transparent",
|
|
10251
|
+
fontSize: 12,
|
|
10252
|
+
lineHeight: "16px",
|
|
10253
|
+
fontFamily: "Figtree, ui-sans-serif, system-ui, sans-serif",
|
|
10254
|
+
color: "#1f2937"
|
|
10255
|
+
}
|
|
10256
|
+
}
|
|
10257
|
+
)
|
|
10258
|
+
]
|
|
10259
|
+
}
|
|
10260
|
+
);
|
|
10261
|
+
}
|
|
10262
|
+
var VARIANTS = [
|
|
10263
|
+
{ value: "logos", label: "Logos" },
|
|
10264
|
+
{ value: "reel", label: "Reel" }
|
|
10265
|
+
];
|
|
10266
|
+
var ALIGNS = [
|
|
10267
|
+
{ value: "left", label: "Left" },
|
|
10268
|
+
{ value: "center", label: "Center" },
|
|
10269
|
+
{ value: "right", label: "Right" }
|
|
10270
|
+
];
|
|
10271
|
+
var HOVERS = [
|
|
10272
|
+
{ value: "none", label: "None" },
|
|
10273
|
+
{ value: "lift", label: "Lift" },
|
|
10274
|
+
{ value: "zoom", label: "Zoom" },
|
|
10275
|
+
{ value: "fade", label: "Fade" }
|
|
10276
|
+
];
|
|
10277
|
+
var TREATMENTS = [
|
|
10278
|
+
{ value: "color", label: "Color" },
|
|
10279
|
+
{ value: "grayscale", label: "Grayscale" }
|
|
10280
|
+
];
|
|
10281
|
+
var HTTP_URL_RE = /^https?:\/\/\S+$/i;
|
|
10282
|
+
function LinkInput({ value, onCommit }) {
|
|
10283
|
+
const [draft, setDraft] = (0, import_react9.useState)(value);
|
|
10284
|
+
const [invalid, setInvalid] = (0, import_react9.useState)(false);
|
|
10285
|
+
(0, import_react9.useEffect)(() => {
|
|
10286
|
+
setDraft(value);
|
|
10287
|
+
setInvalid(false);
|
|
10288
|
+
}, [value]);
|
|
10289
|
+
const commit = () => {
|
|
10290
|
+
const next = draft.trim();
|
|
10291
|
+
if (next === value) return setInvalid(false);
|
|
10292
|
+
if (next && !HTTP_URL_RE.test(next)) return setInvalid(true);
|
|
10293
|
+
setInvalid(false);
|
|
10294
|
+
onCommit(next);
|
|
10295
|
+
};
|
|
10296
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
10297
|
+
"div",
|
|
10298
|
+
{
|
|
10299
|
+
style: {
|
|
10300
|
+
display: "flex",
|
|
10301
|
+
alignItems: "center",
|
|
10302
|
+
gap: 6,
|
|
10303
|
+
height: 28,
|
|
10304
|
+
padding: "0 12px",
|
|
10305
|
+
borderRadius: 999,
|
|
10306
|
+
background: "#ffffff",
|
|
10307
|
+
width: "100%",
|
|
10308
|
+
maxWidth: 260,
|
|
10309
|
+
boxSizing: "border-box",
|
|
10310
|
+
boxShadow: invalid ? "inset 0 0 0 1.5px #EF4444" : "none"
|
|
10311
|
+
},
|
|
10312
|
+
children: [
|
|
10313
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10314
|
+
"span",
|
|
10315
|
+
{
|
|
10316
|
+
style: {
|
|
10317
|
+
flex: "0 0 auto",
|
|
10318
|
+
color: OHW_BLUE_DARK,
|
|
10319
|
+
fontSize: 10,
|
|
10320
|
+
fontWeight: 700,
|
|
10321
|
+
textTransform: "uppercase",
|
|
10322
|
+
letterSpacing: 0.4
|
|
10323
|
+
},
|
|
10324
|
+
children: "Link"
|
|
10325
|
+
}
|
|
10326
|
+
),
|
|
10327
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10328
|
+
"input",
|
|
10329
|
+
{
|
|
10330
|
+
type: "text",
|
|
10331
|
+
inputMode: "url",
|
|
10332
|
+
value: draft,
|
|
10333
|
+
onChange: (e) => setDraft(e.target.value),
|
|
10334
|
+
onBlur: commit,
|
|
10335
|
+
onKeyDown: (e) => {
|
|
10336
|
+
if (e.key === "Enter") e.currentTarget.blur();
|
|
10337
|
+
if (e.key === "Escape") {
|
|
10338
|
+
setDraft(value);
|
|
10339
|
+
setInvalid(false);
|
|
10340
|
+
e.currentTarget.blur();
|
|
10341
|
+
}
|
|
10342
|
+
},
|
|
10343
|
+
placeholder: "https://example.com",
|
|
10344
|
+
"aria-label": "Image link URL",
|
|
10345
|
+
"aria-invalid": invalid,
|
|
10346
|
+
style: {
|
|
10347
|
+
flex: 1,
|
|
10348
|
+
minWidth: 0,
|
|
10349
|
+
border: "none",
|
|
10350
|
+
outline: "none",
|
|
10351
|
+
background: "transparent",
|
|
10352
|
+
fontSize: 12,
|
|
10353
|
+
lineHeight: "16px",
|
|
10354
|
+
fontFamily: "Figtree, ui-sans-serif, system-ui, sans-serif",
|
|
10355
|
+
color: "#1f2937"
|
|
10356
|
+
}
|
|
10357
|
+
}
|
|
10358
|
+
)
|
|
10359
|
+
]
|
|
10360
|
+
}
|
|
10361
|
+
);
|
|
10362
|
+
}
|
|
10363
|
+
function MediaStripToolbar({
|
|
10364
|
+
entry,
|
|
10365
|
+
index,
|
|
10366
|
+
pending,
|
|
10367
|
+
error,
|
|
10368
|
+
onSetVariant,
|
|
10369
|
+
onSetAlign,
|
|
10370
|
+
onSetHover,
|
|
10371
|
+
onSetTreatment,
|
|
10372
|
+
onResize,
|
|
10373
|
+
onSetAlt,
|
|
10374
|
+
onSetLink,
|
|
10375
|
+
onAddItem,
|
|
10376
|
+
onRemoveItem,
|
|
10377
|
+
onChangeImage,
|
|
10378
|
+
onMoveLeft,
|
|
10379
|
+
onMoveRight
|
|
10380
|
+
}) {
|
|
10381
|
+
const items = mediaStripItems(entry.tree);
|
|
10382
|
+
const itemCount = items.length;
|
|
10383
|
+
const currentAlt = items[index]?.alt ?? "";
|
|
10384
|
+
const currentHref = items[index]?.href ?? "";
|
|
10385
|
+
const currentTarget = items[index]?.linkTarget === "same-tab" ? "same-tab" : "new-tab";
|
|
10386
|
+
const slots = findMediaStripSlots(entry.tree);
|
|
10387
|
+
const variant = slots?.variant === "reel" ? "reel" : "logos";
|
|
10388
|
+
const align = slots?.align === "left" || slots?.align === "right" ? slots.align : "center";
|
|
10389
|
+
const hover = slots?.hover === "none" || slots?.hover === "lift" || slots?.hover === "zoom" || slots?.hover === "fade" ? slots.hover : "lift";
|
|
10390
|
+
const treatment = slots?.treatment === "color" || slots?.treatment === "grayscale" ? slots.treatment : variant === "logos" ? "grayscale" : "color";
|
|
10391
|
+
const sizeValue = variant === "logos" ? typeof slots?.logoMaxHeight === "number" ? slots.logoMaxHeight : 48 : typeof slots?.cardWidth === "number" ? slots.cardWidth : 240;
|
|
10392
|
+
const isMobile = window.innerWidth <= 480;
|
|
10393
|
+
const rowStyle = isMobile ? {
|
|
10394
|
+
display: "flex",
|
|
10395
|
+
gap: 6,
|
|
10396
|
+
flexWrap: "nowrap",
|
|
10397
|
+
justifyContent: "center",
|
|
10398
|
+
overflowX: "auto",
|
|
10399
|
+
WebkitOverflowScrolling: "touch",
|
|
10400
|
+
width: "100%",
|
|
10401
|
+
scrollbarWidth: "none"
|
|
10402
|
+
} : { display: "flex", gap: 6, flexWrap: "nowrap", justifyContent: "center" };
|
|
10403
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
10404
|
+
"div",
|
|
10405
|
+
{
|
|
10406
|
+
"data-ohw-bridge": "",
|
|
10407
|
+
"data-ohw-toolbar": "",
|
|
10408
|
+
onMouseDown: (e) => e.stopPropagation(),
|
|
10409
|
+
style: {
|
|
10410
|
+
display: "flex",
|
|
10411
|
+
flexDirection: "column",
|
|
10412
|
+
gap: 6,
|
|
10413
|
+
alignItems: "center",
|
|
10414
|
+
background: OHW_BLUE,
|
|
10415
|
+
padding: 8,
|
|
10416
|
+
borderRadius: 12,
|
|
10417
|
+
boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
|
|
10418
|
+
pointerEvents: pending ? "none" : "auto",
|
|
10419
|
+
opacity: pending ? 0.6 : 1,
|
|
10420
|
+
maxWidth: isMobile ? "calc(100vw - 24px)" : "none"
|
|
10421
|
+
},
|
|
10422
|
+
children: [
|
|
10423
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: rowStyle, children: [
|
|
10424
|
+
VARIANTS.map((v) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: v.label, active: variant === v.value, onClick: () => onSetVariant(v.value) }, v.value)),
|
|
10425
|
+
ALIGNS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: a.label, active: align === a.value, onClick: () => onSetAlign(a.value) }, a.value))
|
|
10426
|
+
] }),
|
|
10427
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: rowStyle, children: [
|
|
10428
|
+
HOVERS.map((h) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: h.label, active: hover === h.value, onClick: () => onSetHover(h.value) }, h.value)),
|
|
10429
|
+
TREATMENTS.map((t) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: t.label, active: treatment === t.value, onClick: () => onSetTreatment(t.value) }, t.value))
|
|
10430
|
+
] }),
|
|
10431
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [
|
|
10432
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "\u2212", onClick: () => onResize(-8) }),
|
|
10433
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { style: { color: "#ffffff", fontSize: 12, minWidth: 34, textAlign: "center" }, children: [
|
|
10434
|
+
sizeValue,
|
|
10435
|
+
"px"
|
|
10436
|
+
] }),
|
|
10437
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "+", onClick: () => onResize(8) })
|
|
10438
|
+
] }),
|
|
10439
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { display: "flex", justifyContent: "center", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AltInput, { value: currentAlt, onCommit: onSetAlt }) }),
|
|
10440
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { display: "flex", justifyContent: "center", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(LinkInput, { value: currentHref, onCommit: (href) => onSetLink(href, currentTarget) }) }),
|
|
10441
|
+
currentHref && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: rowStyle, children: [
|
|
10442
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "New tab", active: currentTarget === "new-tab", onClick: () => onSetLink(currentHref, "new-tab") }),
|
|
10443
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "Same tab", active: currentTarget === "same-tab", onClick: () => onSetLink(currentHref, "same-tab") })
|
|
10444
|
+
] }),
|
|
10445
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: rowStyle, children: [
|
|
10446
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "Change Image", onClick: onChangeImage }),
|
|
10447
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "+ Item", onClick: onAddItem }),
|
|
10448
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "\u2212 Item", onClick: onRemoveItem, disabled: itemCount <= 1 })
|
|
10449
|
+
] }),
|
|
10450
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: rowStyle, children: [
|
|
10451
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "\u2190 Move", onClick: onMoveLeft, disabled: index <= 0 }),
|
|
10452
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "\u2192 Move", onClick: onMoveRight, disabled: index >= itemCount - 1 })
|
|
10453
|
+
] }),
|
|
10454
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { color: "#FCA5A5", fontSize: 11, maxWidth: 220, textAlign: "center" }, children: error })
|
|
10455
|
+
]
|
|
10456
|
+
}
|
|
10457
|
+
);
|
|
10458
|
+
}
|
|
10459
|
+
function findMediaStripSlots(tree) {
|
|
10460
|
+
const stack = tree.rows.flatMap((row) => row.blocks);
|
|
10461
|
+
while (stack.length) {
|
|
10462
|
+
const node = stack.shift();
|
|
10463
|
+
if (node.type === "media-strip") return node.slots ?? {};
|
|
10464
|
+
if (node.children) stack.push(...node.children);
|
|
10465
|
+
}
|
|
10466
|
+
return null;
|
|
10467
|
+
}
|
|
10468
|
+
function AiMediaStripOverlay({
|
|
10469
|
+
postToParent: postToParent2,
|
|
10470
|
+
aiSectionsRef,
|
|
10471
|
+
applyTreeLocalRef,
|
|
10472
|
+
clearInteractionChromeRef
|
|
10473
|
+
}) {
|
|
10474
|
+
const [hover, setHover] = (0, import_react9.useState)(null);
|
|
10475
|
+
const [active, setActive] = (0, import_react9.useState)(null);
|
|
10476
|
+
const [pending, setPending] = (0, import_react9.useState)(false);
|
|
10477
|
+
const [error, setError] = (0, import_react9.useState)(null);
|
|
10478
|
+
const activeRef = (0, import_react9.useRef)(null);
|
|
10479
|
+
activeRef.current = active;
|
|
10480
|
+
(0, import_react9.useEffect)(() => {
|
|
10481
|
+
const onMove = (e) => {
|
|
10482
|
+
const t = e.target;
|
|
10483
|
+
if (!(t instanceof HTMLElement)) return;
|
|
10484
|
+
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]")) {
|
|
10485
|
+
return;
|
|
10486
|
+
}
|
|
10487
|
+
const itemEl = t.closest("[data-ohw-media-strip-item]");
|
|
10488
|
+
if (!itemEl) {
|
|
10489
|
+
setHover(null);
|
|
10490
|
+
return;
|
|
10491
|
+
}
|
|
10492
|
+
const sectionEl = itemEl.closest("[data-ohw-section]");
|
|
10493
|
+
const unit = sectionEl ? movableUnit(sectionEl) : null;
|
|
10494
|
+
const sectionId = unit ? instanceIdOf(unit) || null : null;
|
|
10495
|
+
const index = Number(itemEl.dataset.ohwMediaStripIndex);
|
|
10496
|
+
if (!sectionId || Number.isNaN(index)) {
|
|
10497
|
+
setHover(null);
|
|
10498
|
+
return;
|
|
10499
|
+
}
|
|
10500
|
+
setHover({ sectionId, index });
|
|
10501
|
+
};
|
|
10502
|
+
const onLeave = () => setHover(null);
|
|
10503
|
+
document.addEventListener("mousemove", onMove, { passive: true });
|
|
10504
|
+
document.documentElement.addEventListener("mouseleave", onLeave);
|
|
10505
|
+
return () => {
|
|
10506
|
+
document.removeEventListener("mousemove", onMove);
|
|
10507
|
+
document.documentElement.removeEventListener("mouseleave", onLeave);
|
|
10508
|
+
};
|
|
10509
|
+
}, []);
|
|
10510
|
+
(0, import_react9.useEffect)(() => {
|
|
10511
|
+
const onClick = (e) => {
|
|
10512
|
+
const current = activeRef.current;
|
|
10513
|
+
if (!current) return;
|
|
10514
|
+
const t = e.target;
|
|
10515
|
+
if (!(t instanceof HTMLElement)) return;
|
|
10516
|
+
if (t.closest("[data-ohw-item-interaction]")) return;
|
|
10517
|
+
const itemEl = findMediaStripItemElement(current.sectionId, current.index);
|
|
10518
|
+
if (itemEl && itemEl.contains(t)) return;
|
|
10519
|
+
setActive(null);
|
|
10520
|
+
setError(null);
|
|
10521
|
+
};
|
|
10522
|
+
document.addEventListener("click", onClick, true);
|
|
10523
|
+
return () => document.removeEventListener("click", onClick, true);
|
|
10524
|
+
}, []);
|
|
10525
|
+
(0, import_react9.useEffect)(() => {
|
|
10526
|
+
const onBlur = () => {
|
|
10527
|
+
if (!activeRef.current) return;
|
|
10528
|
+
setActive(null);
|
|
10529
|
+
setError(null);
|
|
10530
|
+
};
|
|
10531
|
+
window.addEventListener("blur", onBlur);
|
|
10532
|
+
return () => window.removeEventListener("blur", onBlur);
|
|
10533
|
+
}, []);
|
|
10534
|
+
(0, import_react9.useEffect)(() => {
|
|
10535
|
+
const onKeyDown = (e) => {
|
|
10536
|
+
if (e.key !== "Escape") return;
|
|
10537
|
+
if (!activeRef.current) return;
|
|
10538
|
+
setActive(null);
|
|
10539
|
+
setError(null);
|
|
10540
|
+
};
|
|
10541
|
+
document.addEventListener("keydown", onKeyDown);
|
|
10542
|
+
return () => document.removeEventListener("keydown", onKeyDown);
|
|
10543
|
+
}, []);
|
|
10544
|
+
const findEntry = (0, import_react9.useCallback)(
|
|
10545
|
+
(sectionId) => {
|
|
10546
|
+
const state = parseAiSectionsState(aiSectionsRef.current);
|
|
10547
|
+
return state.sections.find((s) => s.id === sectionId) ?? null;
|
|
10548
|
+
},
|
|
10549
|
+
[aiSectionsRef]
|
|
10550
|
+
);
|
|
10551
|
+
const runMutation = (0, import_react9.useCallback)(
|
|
10552
|
+
async (sectionId, mutate, extraMedia) => {
|
|
10553
|
+
const entry = findEntry(sectionId);
|
|
10554
|
+
if (!entry) return false;
|
|
10555
|
+
const nextTree = mutate(entry.tree);
|
|
10556
|
+
if (!nextTree) return false;
|
|
10557
|
+
setPending(true);
|
|
10558
|
+
setError(null);
|
|
10559
|
+
const { ok, reasons } = await requestValidateTree(postToParent2, nextTree);
|
|
10560
|
+
setPending(false);
|
|
10561
|
+
if (!ok) {
|
|
10562
|
+
setError(reasons[0] ?? "That change is not allowed.");
|
|
10563
|
+
return false;
|
|
10564
|
+
}
|
|
10565
|
+
applyTreeLocalRef.current?.({
|
|
10566
|
+
id: sectionId,
|
|
10567
|
+
mode: "replace",
|
|
10568
|
+
targetSectionId: sectionId,
|
|
10569
|
+
tree: nextTree,
|
|
10570
|
+
label: entry.label,
|
|
10571
|
+
media: extraMedia ? { ...entry.media, ...extraMedia } : entry.media,
|
|
10572
|
+
...entry.brand ? { brand: entry.brand } : {}
|
|
10573
|
+
});
|
|
10574
|
+
return true;
|
|
10575
|
+
},
|
|
10576
|
+
[findEntry, postToParent2, applyTreeLocalRef]
|
|
10577
|
+
);
|
|
10578
|
+
const activeEntry = active ? findEntry(active.sectionId) : null;
|
|
10579
|
+
const hoverHandleRect = useLiveItemRect(!active && hover ? hover : null);
|
|
10580
|
+
const activeItemRect = useLiveItemRect(active);
|
|
10581
|
+
const TOOLBAR_APPROX_H = 170;
|
|
10582
|
+
const toolbarState = activeItemRect && activeItemRect.top < TOOLBAR_APPROX_H ? "active-bottom" : "active-top";
|
|
10583
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
|
|
10584
|
+
hoverHandleRect && hover && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10585
|
+
"button",
|
|
10586
|
+
{
|
|
10587
|
+
type: "button",
|
|
10588
|
+
"data-ohw-toolbar": "",
|
|
10589
|
+
onClick: () => {
|
|
10590
|
+
clearInteractionChromeRef.current();
|
|
10591
|
+
setActive(hover);
|
|
10592
|
+
},
|
|
10593
|
+
"aria-label": "Configure media item",
|
|
10594
|
+
style: {
|
|
10595
|
+
position: "fixed",
|
|
10596
|
+
top: hoverHandleRect.top + 8,
|
|
10597
|
+
left: hoverHandleRect.left + hoverHandleRect.width - 36,
|
|
10598
|
+
width: 28,
|
|
10599
|
+
height: 28,
|
|
10600
|
+
borderRadius: 8,
|
|
10601
|
+
border: `1.5px dashed ${PRIMARY3}`,
|
|
10602
|
+
background: "#ffffff",
|
|
10603
|
+
color: PRIMARY3,
|
|
10604
|
+
display: "flex",
|
|
10605
|
+
alignItems: "center",
|
|
10606
|
+
justifyContent: "center",
|
|
10607
|
+
cursor: "pointer",
|
|
10608
|
+
zIndex: 2147483643,
|
|
10609
|
+
fontSize: 14,
|
|
10610
|
+
fontWeight: 700
|
|
10611
|
+
},
|
|
10612
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Star, { size: 14, style: { pointerEvents: "none" } })
|
|
10613
|
+
}
|
|
10614
|
+
),
|
|
10615
|
+
activeItemRect && active && activeEntry && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10616
|
+
ItemInteractionLayer,
|
|
10617
|
+
{
|
|
10618
|
+
rect: activeItemRect,
|
|
10619
|
+
state: toolbarState,
|
|
10620
|
+
toolbar: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10621
|
+
MediaStripToolbar,
|
|
10622
|
+
{
|
|
10623
|
+
entry: activeEntry,
|
|
10624
|
+
index: active.index,
|
|
10625
|
+
pending,
|
|
10626
|
+
error,
|
|
10627
|
+
onSetVariant: (variant) => runMutation(active.sectionId, (tree) => setMediaStripVariant(tree, variant)),
|
|
10628
|
+
onSetAlign: (align) => runMutation(active.sectionId, (tree) => setMediaStripAlign(tree, align)),
|
|
10629
|
+
onSetHover: (hoverPreset) => runMutation(active.sectionId, (tree) => setMediaStripHover(tree, hoverPreset)),
|
|
10630
|
+
onSetTreatment: (treatment) => runMutation(active.sectionId, (tree) => setMediaStripTreatment(tree, treatment)),
|
|
10631
|
+
onResize: (delta) => {
|
|
10632
|
+
const slots = findMediaStripSlots(activeEntry.tree);
|
|
10633
|
+
const variant = slots?.variant === "reel" ? "reel" : "logos";
|
|
10634
|
+
const current = variant === "logos" ? typeof slots?.logoMaxHeight === "number" ? slots.logoMaxHeight : 48 : typeof slots?.cardWidth === "number" ? slots.cardWidth : 240;
|
|
10635
|
+
void runMutation(active.sectionId, (tree) => setMediaStripSizing(tree, current + delta));
|
|
10636
|
+
},
|
|
10637
|
+
onSetAlt: (alt) => {
|
|
10638
|
+
void runMutation(active.sectionId, (tree) => setMediaStripItemAlt(tree, active.index, alt));
|
|
10639
|
+
},
|
|
10640
|
+
onSetLink: (href, linkTarget) => {
|
|
10641
|
+
void runMutation(
|
|
10642
|
+
active.sectionId,
|
|
10643
|
+
(tree) => setMediaStripItemLink(tree, active.index, href ? { href, linkTarget } : {})
|
|
10644
|
+
);
|
|
10645
|
+
},
|
|
10646
|
+
onAddItem: () => {
|
|
10647
|
+
void requestAssetPick(postToParent2).then((picked) => {
|
|
10648
|
+
if (!picked) return;
|
|
10649
|
+
const item = { assetId: picked.assetId, alt: "Logo" };
|
|
10650
|
+
void runMutation(
|
|
10651
|
+
active.sectionId,
|
|
10652
|
+
(tree) => addMediaStripItem(tree, item, active.index),
|
|
10653
|
+
{ [picked.assetId]: picked.url }
|
|
10654
|
+
).then((applied) => {
|
|
10655
|
+
if (applied) setActive({ sectionId: active.sectionId, index: active.index + 1 });
|
|
10656
|
+
});
|
|
10657
|
+
});
|
|
10658
|
+
},
|
|
10659
|
+
onChangeImage: () => {
|
|
10660
|
+
void requestAssetPick(postToParent2).then((picked) => {
|
|
10661
|
+
if (!picked) return;
|
|
10662
|
+
void runMutation(
|
|
10663
|
+
active.sectionId,
|
|
10664
|
+
(tree) => setMediaStripItemAsset(tree, active.index, picked.assetId),
|
|
10665
|
+
{ [picked.assetId]: picked.url }
|
|
10666
|
+
);
|
|
10667
|
+
});
|
|
10668
|
+
},
|
|
10669
|
+
onRemoveItem: () => {
|
|
10670
|
+
void runMutation(active.sectionId, (tree) => removeMediaStripItem(tree, active.index)).then(
|
|
10671
|
+
(applied) => {
|
|
10672
|
+
if (applied) setActive(null);
|
|
10673
|
+
}
|
|
10674
|
+
);
|
|
10675
|
+
},
|
|
10676
|
+
onMoveLeft: () => {
|
|
10677
|
+
void runMutation(active.sectionId, (tree) => reorderMediaStripItem(tree, active.index, -1)).then(
|
|
10678
|
+
(applied) => {
|
|
10679
|
+
if (applied) setActive({ sectionId: active.sectionId, index: active.index - 1 });
|
|
10680
|
+
}
|
|
10681
|
+
);
|
|
10682
|
+
},
|
|
10683
|
+
onMoveRight: () => {
|
|
10684
|
+
void runMutation(active.sectionId, (tree) => reorderMediaStripItem(tree, active.index, 1)).then(
|
|
10685
|
+
(applied) => {
|
|
10686
|
+
if (applied) setActive({ sectionId: active.sectionId, index: active.index + 1 });
|
|
10687
|
+
}
|
|
10688
|
+
);
|
|
10689
|
+
}
|
|
10690
|
+
}
|
|
10691
|
+
)
|
|
10692
|
+
}
|
|
10693
|
+
)
|
|
9775
10694
|
] });
|
|
9776
10695
|
}
|
|
9777
10696
|
|
|
9778
10697
|
// src/ui/ai-section/AiPricingCardOverlay.tsx
|
|
9779
|
-
var
|
|
9780
|
-
var
|
|
10698
|
+
var import_react10 = require("react");
|
|
10699
|
+
var import_lucide_react9 = require("lucide-react");
|
|
9781
10700
|
|
|
9782
10701
|
// src/lib/ai-pricing-tree.ts
|
|
9783
10702
|
var PRICING_MIN_CARDS = 1;
|
|
@@ -9920,16 +10839,16 @@ function removePricingCardFeature(tree, index) {
|
|
|
9920
10839
|
}
|
|
9921
10840
|
|
|
9922
10841
|
// src/ui/ai-section/AiPricingCardOverlay.tsx
|
|
9923
|
-
var
|
|
10842
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
9924
10843
|
var EMPHASIS_TREATMENTS = [
|
|
9925
10844
|
{ value: "outlined", label: "Outline" },
|
|
9926
10845
|
{ value: "lifted", label: "Lift" },
|
|
9927
10846
|
{ value: "inverted", label: "Invert" },
|
|
9928
10847
|
{ value: "accent-header", label: "Header" }
|
|
9929
10848
|
];
|
|
9930
|
-
var
|
|
9931
|
-
var
|
|
9932
|
-
var
|
|
10849
|
+
var PRIMARY4 = "#0885FE";
|
|
10850
|
+
var OHW_BLUE2 = `var(--ohw-primary, ${PRIMARY4})`;
|
|
10851
|
+
var OHW_BLUE_DARK2 = `color-mix(in srgb, var(--ohw-primary, ${PRIMARY4}) 60%, #000000)`;
|
|
9933
10852
|
function findPricingCardElement(sectionId, index) {
|
|
9934
10853
|
const sectionEl = findByInstanceId(sectionId);
|
|
9935
10854
|
if (!sectionEl) return null;
|
|
@@ -9939,7 +10858,7 @@ function findPricingCardElement(sectionId, index) {
|
|
|
9939
10858
|
}
|
|
9940
10859
|
return null;
|
|
9941
10860
|
}
|
|
9942
|
-
function
|
|
10861
|
+
function readRect3(ref) {
|
|
9943
10862
|
const el = ref && findPricingCardElement(ref.sectionId, ref.index);
|
|
9944
10863
|
if (!el) return null;
|
|
9945
10864
|
const r2 = el.getBoundingClientRect();
|
|
@@ -9947,14 +10866,14 @@ function readRect2(ref) {
|
|
|
9947
10866
|
return { top: r2.top, left: r2.left, width: r2.width, height: r2.height };
|
|
9948
10867
|
}
|
|
9949
10868
|
function useLiveCardRect(ref) {
|
|
9950
|
-
const [rect, setRect] = (0,
|
|
9951
|
-
(0,
|
|
10869
|
+
const [rect, setRect] = (0, import_react10.useState)(null);
|
|
10870
|
+
(0, import_react10.useEffect)(() => {
|
|
9952
10871
|
if (!ref) {
|
|
9953
10872
|
setRect(null);
|
|
9954
10873
|
return;
|
|
9955
10874
|
}
|
|
9956
10875
|
const update = () => {
|
|
9957
|
-
const next =
|
|
10876
|
+
const next = readRect3(ref);
|
|
9958
10877
|
setRect(
|
|
9959
10878
|
(prev) => prev && next && prev.top === next.top && prev.left === next.left && prev.width === next.width && prev.height === next.height ? prev : next
|
|
9960
10879
|
);
|
|
@@ -9972,7 +10891,7 @@ function useLiveCardRect(ref) {
|
|
|
9972
10891
|
}, [ref?.sectionId, ref?.index]);
|
|
9973
10892
|
return rect;
|
|
9974
10893
|
}
|
|
9975
|
-
function
|
|
10894
|
+
function requestValidateTree2(postToParent2, tree) {
|
|
9976
10895
|
return new Promise((resolve) => {
|
|
9977
10896
|
const id = `ai-validate-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
|
|
9978
10897
|
const timeout = window.setTimeout(() => {
|
|
@@ -9989,13 +10908,13 @@ function requestValidateTree(postToParent2, tree) {
|
|
|
9989
10908
|
postToParent2({ type: "ow:ai-validate-tree-request", id, tree });
|
|
9990
10909
|
});
|
|
9991
10910
|
}
|
|
9992
|
-
function
|
|
10911
|
+
function Pill2({
|
|
9993
10912
|
label,
|
|
9994
10913
|
onClick,
|
|
9995
10914
|
disabled,
|
|
9996
10915
|
active
|
|
9997
10916
|
}) {
|
|
9998
|
-
return /* @__PURE__ */ (0,
|
|
10917
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
9999
10918
|
"button",
|
|
10000
10919
|
{
|
|
10001
10920
|
type: "button",
|
|
@@ -10010,8 +10929,8 @@ function Pill({
|
|
|
10010
10929
|
borderRadius: 999,
|
|
10011
10930
|
border: "none",
|
|
10012
10931
|
cursor: disabled ? "default" : "pointer",
|
|
10013
|
-
background: active ?
|
|
10014
|
-
color: active ? "#ffffff" :
|
|
10932
|
+
background: active ? OHW_BLUE_DARK2 : "#ffffff",
|
|
10933
|
+
color: active ? "#ffffff" : OHW_BLUE_DARK2,
|
|
10015
10934
|
opacity: disabled ? 0.4 : 1,
|
|
10016
10935
|
fontSize: 12,
|
|
10017
10936
|
lineHeight: "16px",
|
|
@@ -10044,7 +10963,7 @@ function PricingCardToolbar({
|
|
|
10044
10963
|
const buttonCount = (card?.children ?? []).filter((c) => c.type === "button").length;
|
|
10045
10964
|
const featureCount = pricingCardFeatureCount(entry.tree, index);
|
|
10046
10965
|
const pillWrap = window.innerWidth <= 480 ? "wrap" : "nowrap";
|
|
10047
|
-
return /* @__PURE__ */ (0,
|
|
10966
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
10048
10967
|
"div",
|
|
10049
10968
|
{
|
|
10050
10969
|
"data-ohw-bridge": "",
|
|
@@ -10055,7 +10974,7 @@ function PricingCardToolbar({
|
|
|
10055
10974
|
flexDirection: "column",
|
|
10056
10975
|
gap: 6,
|
|
10057
10976
|
alignItems: "center",
|
|
10058
|
-
background:
|
|
10977
|
+
background: OHW_BLUE2,
|
|
10059
10978
|
padding: 8,
|
|
10060
10979
|
borderRadius: 12,
|
|
10061
10980
|
boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
|
|
@@ -10066,17 +10985,17 @@ function PricingCardToolbar({
|
|
|
10066
10985
|
maxWidth: pillWrap === "wrap" ? "calc(100vw - 24px)" : "none"
|
|
10067
10986
|
},
|
|
10068
10987
|
children: [
|
|
10069
|
-
/* @__PURE__ */ (0,
|
|
10070
|
-
/* @__PURE__ */ (0,
|
|
10071
|
-
/* @__PURE__ */ (0,
|
|
10072
|
-
/* @__PURE__ */ (0,
|
|
10073
|
-
/* @__PURE__ */ (0,
|
|
10074
|
-
/* @__PURE__ */ (0,
|
|
10075
|
-
/* @__PURE__ */ (0,
|
|
10076
|
-
/* @__PURE__ */ (0,
|
|
10988
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: [
|
|
10989
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Pill2, { label: "+ Tier", onClick: onAddTier, disabled: collectionCount >= 4 }),
|
|
10990
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Pill2, { label: "- Tier", onClick: onRemoveTier, disabled: collectionCount <= 1 }),
|
|
10991
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Pill2, { label: "Featured", active: isFeatured, onClick: () => onToggleFeatured(!isFeatured) }),
|
|
10992
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Pill2, { label: "+ Button", onClick: onAddButton, disabled: buttonCount >= 2 }),
|
|
10993
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Pill2, { label: "- Button", onClick: onRemoveButton, disabled: buttonCount === 0 }),
|
|
10994
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Pill2, { label: "+ Feature", onClick: onAddFeature, disabled: featureCount >= 10 }),
|
|
10995
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Pill2, { label: "- Feature", onClick: onRemoveFeature, disabled: featureCount <= 1 })
|
|
10077
10996
|
] }),
|
|
10078
|
-
isFeatured && /* @__PURE__ */ (0,
|
|
10079
|
-
|
|
10997
|
+
isFeatured && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: EMPHASIS_TREATMENTS.map((t) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
10998
|
+
Pill2,
|
|
10080
10999
|
{
|
|
10081
11000
|
label: t.label,
|
|
10082
11001
|
active: (featured?.treatment ?? "outlined") === t.value,
|
|
@@ -10084,7 +11003,7 @@ function PricingCardToolbar({
|
|
|
10084
11003
|
},
|
|
10085
11004
|
t.value
|
|
10086
11005
|
)) }),
|
|
10087
|
-
error && /* @__PURE__ */ (0,
|
|
11006
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { color: "#FCA5A5", fontSize: 11, maxWidth: 220, textAlign: "center" }, children: error })
|
|
10088
11007
|
]
|
|
10089
11008
|
}
|
|
10090
11009
|
);
|
|
@@ -10105,13 +11024,13 @@ function AiPricingCardOverlay({
|
|
|
10105
11024
|
aiSectionsRef,
|
|
10106
11025
|
applyTreeLocalRef
|
|
10107
11026
|
}) {
|
|
10108
|
-
const [hover, setHover] = (0,
|
|
10109
|
-
const [active, setActive] = (0,
|
|
10110
|
-
const [pending, setPending] = (0,
|
|
10111
|
-
const [error, setError] = (0,
|
|
10112
|
-
const activeRef = (0,
|
|
11027
|
+
const [hover, setHover] = (0, import_react10.useState)(null);
|
|
11028
|
+
const [active, setActive] = (0, import_react10.useState)(null);
|
|
11029
|
+
const [pending, setPending] = (0, import_react10.useState)(false);
|
|
11030
|
+
const [error, setError] = (0, import_react10.useState)(null);
|
|
11031
|
+
const activeRef = (0, import_react10.useRef)(null);
|
|
10113
11032
|
activeRef.current = active;
|
|
10114
|
-
(0,
|
|
11033
|
+
(0, import_react10.useEffect)(() => {
|
|
10115
11034
|
const onMove = (e) => {
|
|
10116
11035
|
const t = e.target;
|
|
10117
11036
|
if (!(t instanceof HTMLElement)) return;
|
|
@@ -10141,7 +11060,7 @@ function AiPricingCardOverlay({
|
|
|
10141
11060
|
document.documentElement.removeEventListener("mouseleave", onLeave);
|
|
10142
11061
|
};
|
|
10143
11062
|
}, []);
|
|
10144
|
-
(0,
|
|
11063
|
+
(0, import_react10.useEffect)(() => {
|
|
10145
11064
|
const onClick = (e) => {
|
|
10146
11065
|
const current = activeRef.current;
|
|
10147
11066
|
if (!current) return;
|
|
@@ -10156,7 +11075,7 @@ function AiPricingCardOverlay({
|
|
|
10156
11075
|
document.addEventListener("click", onClick, true);
|
|
10157
11076
|
return () => document.removeEventListener("click", onClick, true);
|
|
10158
11077
|
}, []);
|
|
10159
|
-
(0,
|
|
11078
|
+
(0, import_react10.useEffect)(() => {
|
|
10160
11079
|
const onBlur = () => {
|
|
10161
11080
|
if (!activeRef.current) return;
|
|
10162
11081
|
setActive(null);
|
|
@@ -10165,7 +11084,7 @@ function AiPricingCardOverlay({
|
|
|
10165
11084
|
window.addEventListener("blur", onBlur);
|
|
10166
11085
|
return () => window.removeEventListener("blur", onBlur);
|
|
10167
11086
|
}, []);
|
|
10168
|
-
(0,
|
|
11087
|
+
(0, import_react10.useEffect)(() => {
|
|
10169
11088
|
const onKeyDown = (e) => {
|
|
10170
11089
|
if (e.key !== "Escape") return;
|
|
10171
11090
|
if (!activeRef.current) return;
|
|
@@ -10175,14 +11094,14 @@ function AiPricingCardOverlay({
|
|
|
10175
11094
|
document.addEventListener("keydown", onKeyDown);
|
|
10176
11095
|
return () => document.removeEventListener("keydown", onKeyDown);
|
|
10177
11096
|
}, []);
|
|
10178
|
-
const findEntry = (0,
|
|
11097
|
+
const findEntry = (0, import_react10.useCallback)(
|
|
10179
11098
|
(sectionId) => {
|
|
10180
11099
|
const state = parseAiSectionsState(aiSectionsRef.current);
|
|
10181
11100
|
return state.sections.find((s) => s.id === sectionId) ?? null;
|
|
10182
11101
|
},
|
|
10183
11102
|
[aiSectionsRef]
|
|
10184
11103
|
);
|
|
10185
|
-
const runMutation = (0,
|
|
11104
|
+
const runMutation = (0, import_react10.useCallback)(
|
|
10186
11105
|
async (sectionId, mutate) => {
|
|
10187
11106
|
const entry = findEntry(sectionId);
|
|
10188
11107
|
if (!entry) return false;
|
|
@@ -10190,7 +11109,7 @@ function AiPricingCardOverlay({
|
|
|
10190
11109
|
if (!nextTree) return false;
|
|
10191
11110
|
setPending(true);
|
|
10192
11111
|
setError(null);
|
|
10193
|
-
const { ok, reasons } = await
|
|
11112
|
+
const { ok, reasons } = await requestValidateTree2(postToParent2, nextTree);
|
|
10194
11113
|
setPending(false);
|
|
10195
11114
|
if (!ok) {
|
|
10196
11115
|
setError(reasons[0] ?? "That change is not allowed.");
|
|
@@ -10215,8 +11134,8 @@ function AiPricingCardOverlay({
|
|
|
10215
11134
|
const activeEntry = active ? findEntry(active.sectionId) : null;
|
|
10216
11135
|
const activeCardRect = useLiveCardRect(active);
|
|
10217
11136
|
const hoverHandleRect = useLiveCardRect(!active && hover ? hover : null);
|
|
10218
|
-
return /* @__PURE__ */ (0,
|
|
10219
|
-
hoverHandleRect && hover && /* @__PURE__ */ (0,
|
|
11137
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
|
|
11138
|
+
hoverHandleRect && hover && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
10220
11139
|
"button",
|
|
10221
11140
|
{
|
|
10222
11141
|
type: "button",
|
|
@@ -10230,9 +11149,9 @@ function AiPricingCardOverlay({
|
|
|
10230
11149
|
width: 28,
|
|
10231
11150
|
height: 28,
|
|
10232
11151
|
borderRadius: 8,
|
|
10233
|
-
border: `1.5px dashed ${
|
|
11152
|
+
border: `1.5px dashed ${PRIMARY4}`,
|
|
10234
11153
|
background: "#ffffff",
|
|
10235
|
-
color:
|
|
11154
|
+
color: PRIMARY4,
|
|
10236
11155
|
display: "flex",
|
|
10237
11156
|
alignItems: "center",
|
|
10238
11157
|
justifyContent: "center",
|
|
@@ -10241,15 +11160,15 @@ function AiPricingCardOverlay({
|
|
|
10241
11160
|
fontSize: 14,
|
|
10242
11161
|
fontWeight: 700
|
|
10243
11162
|
},
|
|
10244
|
-
children: /* @__PURE__ */ (0,
|
|
11163
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react9.Star, { size: 14, style: { pointerEvents: "none" } })
|
|
10245
11164
|
}
|
|
10246
11165
|
),
|
|
10247
|
-
activeCardRect && active && activeEntry && /* @__PURE__ */ (0,
|
|
11166
|
+
activeCardRect && active && activeEntry && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
10248
11167
|
ItemInteractionLayer,
|
|
10249
11168
|
{
|
|
10250
11169
|
rect: activeCardRect,
|
|
10251
11170
|
state: "active-top",
|
|
10252
|
-
toolbar: /* @__PURE__ */ (0,
|
|
11171
|
+
toolbar: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
10253
11172
|
PricingCardToolbar,
|
|
10254
11173
|
{
|
|
10255
11174
|
entry: activeEntry,
|
|
@@ -10587,28 +11506,28 @@ function scrollToHashSectionWhenReady(behavior = "smooth") {
|
|
|
10587
11506
|
}
|
|
10588
11507
|
|
|
10589
11508
|
// src/ui/link-modal/LinkPopover.tsx
|
|
10590
|
-
var
|
|
11509
|
+
var import_react14 = require("react");
|
|
10591
11510
|
|
|
10592
11511
|
// src/ui/dialog.tsx
|
|
10593
11512
|
var React9 = __toESM(require("react"), 1);
|
|
10594
11513
|
var import_radix_ui6 = require("radix-ui");
|
|
10595
|
-
var
|
|
10596
|
-
var
|
|
11514
|
+
var import_lucide_react10 = require("lucide-react");
|
|
11515
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
10597
11516
|
function Dialog2({
|
|
10598
11517
|
...props
|
|
10599
11518
|
}) {
|
|
10600
|
-
return /* @__PURE__ */ (0,
|
|
11519
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_radix_ui6.Dialog.Root, { "data-slot": "dialog", ...props });
|
|
10601
11520
|
}
|
|
10602
11521
|
function DialogPortal({
|
|
10603
11522
|
...props
|
|
10604
11523
|
}) {
|
|
10605
|
-
return /* @__PURE__ */ (0,
|
|
11524
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_radix_ui6.Dialog.Portal, { ...props });
|
|
10606
11525
|
}
|
|
10607
11526
|
function DialogOverlay({
|
|
10608
11527
|
className,
|
|
10609
11528
|
...props
|
|
10610
11529
|
}) {
|
|
10611
|
-
return /* @__PURE__ */ (0,
|
|
11530
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
10612
11531
|
import_radix_ui6.Dialog.Overlay,
|
|
10613
11532
|
{
|
|
10614
11533
|
"data-slot": "dialog-overlay",
|
|
@@ -10621,9 +11540,9 @@ function DialogOverlay({
|
|
|
10621
11540
|
var DialogContent = React9.forwardRef(
|
|
10622
11541
|
({ className, children, showCloseButton = true, container, ...props }, ref) => {
|
|
10623
11542
|
const positionMode = container ? "absolute" : "fixed";
|
|
10624
|
-
return /* @__PURE__ */ (0,
|
|
10625
|
-
/* @__PURE__ */ (0,
|
|
10626
|
-
/* @__PURE__ */ (0,
|
|
11543
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DialogPortal, { container: container ?? void 0, children: [
|
|
11544
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DialogOverlay, { className: cn(positionMode, "inset-0") }),
|
|
11545
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
10627
11546
|
import_radix_ui6.Dialog.Content,
|
|
10628
11547
|
{
|
|
10629
11548
|
ref,
|
|
@@ -10639,13 +11558,13 @@ var DialogContent = React9.forwardRef(
|
|
|
10639
11558
|
...props,
|
|
10640
11559
|
children: [
|
|
10641
11560
|
children,
|
|
10642
|
-
showCloseButton ? /* @__PURE__ */ (0,
|
|
11561
|
+
showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
10643
11562
|
import_radix_ui6.Dialog.Close,
|
|
10644
11563
|
{
|
|
10645
11564
|
type: "button",
|
|
10646
11565
|
className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50",
|
|
10647
11566
|
"aria-label": "Close",
|
|
10648
|
-
children: /* @__PURE__ */ (0,
|
|
11567
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.X, { size: 16, "aria-hidden": true })
|
|
10649
11568
|
}
|
|
10650
11569
|
) : null
|
|
10651
11570
|
]
|
|
@@ -10659,13 +11578,13 @@ function DialogHeader({
|
|
|
10659
11578
|
className,
|
|
10660
11579
|
...props
|
|
10661
11580
|
}) {
|
|
10662
|
-
return /* @__PURE__ */ (0,
|
|
11581
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn("flex flex-col gap-1.5", className), ...props });
|
|
10663
11582
|
}
|
|
10664
11583
|
function DialogFooter({
|
|
10665
11584
|
className,
|
|
10666
11585
|
...props
|
|
10667
11586
|
}) {
|
|
10668
|
-
return /* @__PURE__ */ (0,
|
|
11587
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
10669
11588
|
"div",
|
|
10670
11589
|
{
|
|
10671
11590
|
className: cn("flex items-center justify-end gap-2", className),
|
|
@@ -10673,7 +11592,7 @@ function DialogFooter({
|
|
|
10673
11592
|
}
|
|
10674
11593
|
);
|
|
10675
11594
|
}
|
|
10676
|
-
var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
11595
|
+
var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
10677
11596
|
import_radix_ui6.Dialog.Title,
|
|
10678
11597
|
{
|
|
10679
11598
|
ref,
|
|
@@ -10685,7 +11604,7 @@ var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE
|
|
|
10685
11604
|
}
|
|
10686
11605
|
));
|
|
10687
11606
|
DialogTitle.displayName = import_radix_ui6.Dialog.Title.displayName;
|
|
10688
|
-
var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
11607
|
+
var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
10689
11608
|
import_radix_ui6.Dialog.Description,
|
|
10690
11609
|
{
|
|
10691
11610
|
ref,
|
|
@@ -10697,63 +11616,63 @@ DialogDescription.displayName = import_radix_ui6.Dialog.Description.displayName;
|
|
|
10697
11616
|
var DialogClose = import_radix_ui6.Dialog.Close;
|
|
10698
11617
|
|
|
10699
11618
|
// src/ui/link-modal/LinkEditorPanel.tsx
|
|
10700
|
-
var
|
|
11619
|
+
var import_lucide_react14 = require("lucide-react");
|
|
10701
11620
|
|
|
10702
11621
|
// src/ui/link-modal/DestinationBreadcrumb.tsx
|
|
10703
|
-
var
|
|
10704
|
-
var
|
|
11622
|
+
var import_lucide_react11 = require("lucide-react");
|
|
11623
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
10705
11624
|
function DestinationBreadcrumb({
|
|
10706
11625
|
pageTitle,
|
|
10707
11626
|
sectionLabel
|
|
10708
11627
|
}) {
|
|
10709
|
-
return /* @__PURE__ */ (0,
|
|
10710
|
-
/* @__PURE__ */ (0,
|
|
10711
|
-
/* @__PURE__ */ (0,
|
|
10712
|
-
/* @__PURE__ */ (0,
|
|
10713
|
-
/* @__PURE__ */ (0,
|
|
10714
|
-
/* @__PURE__ */ (0,
|
|
11628
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex w-full flex-col gap-2", children: [
|
|
11629
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-sm font-medium! text-foreground m-0", children: "Destination" }),
|
|
11630
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-3", children: [
|
|
11631
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
11632
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react11.File, { size: 16, className: "shrink-0 text-foreground", "aria-hidden": true }),
|
|
11633
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-sm font-medium leading-none text-foreground!", children: pageTitle })
|
|
10715
11634
|
] }),
|
|
10716
|
-
/* @__PURE__ */ (0,
|
|
10717
|
-
|
|
11635
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
11636
|
+
import_lucide_react11.ArrowRight,
|
|
10718
11637
|
{
|
|
10719
11638
|
size: 16,
|
|
10720
11639
|
className: "shrink-0 text-muted-foreground",
|
|
10721
11640
|
"aria-hidden": true
|
|
10722
11641
|
}
|
|
10723
11642
|
),
|
|
10724
|
-
/* @__PURE__ */ (0,
|
|
10725
|
-
/* @__PURE__ */ (0,
|
|
10726
|
-
|
|
11643
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
|
|
11644
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
11645
|
+
import_lucide_react11.GalleryVertical,
|
|
10727
11646
|
{
|
|
10728
11647
|
size: 16,
|
|
10729
11648
|
className: "shrink-0 text-foreground",
|
|
10730
11649
|
"aria-hidden": true
|
|
10731
11650
|
}
|
|
10732
11651
|
),
|
|
10733
|
-
/* @__PURE__ */ (0,
|
|
11652
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "truncate text-sm font-medium leading-none text-foreground", children: sectionLabel })
|
|
10734
11653
|
] })
|
|
10735
11654
|
] })
|
|
10736
11655
|
] });
|
|
10737
11656
|
}
|
|
10738
11657
|
|
|
10739
11658
|
// src/ui/link-modal/SectionTreeItem.tsx
|
|
10740
|
-
var
|
|
10741
|
-
var
|
|
11659
|
+
var import_lucide_react12 = require("lucide-react");
|
|
11660
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
10742
11661
|
function SectionTreeItem({
|
|
10743
11662
|
section,
|
|
10744
11663
|
onSelect,
|
|
10745
11664
|
selected
|
|
10746
11665
|
}) {
|
|
10747
11666
|
const interactive = Boolean(onSelect);
|
|
10748
|
-
return /* @__PURE__ */ (0,
|
|
10749
|
-
/* @__PURE__ */ (0,
|
|
11667
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex h-9 w-full items-end pl-3", children: [
|
|
11668
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
10750
11669
|
"div",
|
|
10751
11670
|
{
|
|
10752
11671
|
className: "-mr-px h-9 w-2 shrink-0 rounded-bl-sm border-b border-l border-border mb-4",
|
|
10753
11672
|
"aria-hidden": true
|
|
10754
11673
|
}
|
|
10755
11674
|
),
|
|
10756
|
-
/* @__PURE__ */ (0,
|
|
11675
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
10757
11676
|
"div",
|
|
10758
11677
|
{
|
|
10759
11678
|
role: interactive ? "button" : void 0,
|
|
@@ -10771,15 +11690,15 @@ function SectionTreeItem({
|
|
|
10771
11690
|
interactive && selected && "border-bridge-primary"
|
|
10772
11691
|
),
|
|
10773
11692
|
children: [
|
|
10774
|
-
/* @__PURE__ */ (0,
|
|
10775
|
-
|
|
11693
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
11694
|
+
import_lucide_react12.GalleryVertical,
|
|
10776
11695
|
{
|
|
10777
11696
|
size: 16,
|
|
10778
11697
|
className: "shrink-0 text-foreground",
|
|
10779
11698
|
"aria-hidden": true
|
|
10780
11699
|
}
|
|
10781
11700
|
),
|
|
10782
|
-
/* @__PURE__ */ (0,
|
|
11701
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "truncate text-sm font-normal leading-5 text-foreground", children: section.label })
|
|
10783
11702
|
]
|
|
10784
11703
|
}
|
|
10785
11704
|
)
|
|
@@ -10787,14 +11706,14 @@ function SectionTreeItem({
|
|
|
10787
11706
|
}
|
|
10788
11707
|
|
|
10789
11708
|
// src/ui/link-modal/UrlOrPageInput.tsx
|
|
10790
|
-
var
|
|
11709
|
+
var import_react11 = require("react");
|
|
10791
11710
|
|
|
10792
11711
|
// src/ui/input.tsx
|
|
10793
11712
|
var React10 = __toESM(require("react"), 1);
|
|
10794
|
-
var
|
|
11713
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
10795
11714
|
var Input = React10.forwardRef(
|
|
10796
11715
|
({ className, type, ...props }, ref) => {
|
|
10797
|
-
return /* @__PURE__ */ (0,
|
|
11716
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
10798
11717
|
"input",
|
|
10799
11718
|
{
|
|
10800
11719
|
type,
|
|
@@ -10813,9 +11732,9 @@ Input.displayName = "Input";
|
|
|
10813
11732
|
|
|
10814
11733
|
// src/ui/label.tsx
|
|
10815
11734
|
var import_radix_ui7 = require("radix-ui");
|
|
10816
|
-
var
|
|
11735
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
10817
11736
|
function Label({ className, ...props }) {
|
|
10818
|
-
return /* @__PURE__ */ (0,
|
|
11737
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
10819
11738
|
import_radix_ui7.Label.Root,
|
|
10820
11739
|
{
|
|
10821
11740
|
"data-slot": "label",
|
|
@@ -10826,12 +11745,12 @@ function Label({ className, ...props }) {
|
|
|
10826
11745
|
}
|
|
10827
11746
|
|
|
10828
11747
|
// src/ui/link-modal/UrlOrPageInput.tsx
|
|
10829
|
-
var
|
|
10830
|
-
var
|
|
11748
|
+
var import_lucide_react13 = require("lucide-react");
|
|
11749
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
10831
11750
|
function FieldChevron({
|
|
10832
11751
|
onClick
|
|
10833
11752
|
}) {
|
|
10834
|
-
return /* @__PURE__ */ (0,
|
|
11753
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
10835
11754
|
"button",
|
|
10836
11755
|
{
|
|
10837
11756
|
type: "button",
|
|
@@ -10839,7 +11758,7 @@ function FieldChevron({
|
|
|
10839
11758
|
onClick,
|
|
10840
11759
|
"aria-label": "Open page list",
|
|
10841
11760
|
tabIndex: -1,
|
|
10842
|
-
children: /* @__PURE__ */ (0,
|
|
11761
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.ChevronDown, { size: 16 })
|
|
10843
11762
|
}
|
|
10844
11763
|
);
|
|
10845
11764
|
}
|
|
@@ -10855,11 +11774,11 @@ function UrlOrPageInput({
|
|
|
10855
11774
|
readOnly = false,
|
|
10856
11775
|
urlError
|
|
10857
11776
|
}) {
|
|
10858
|
-
const inputId = (0,
|
|
10859
|
-
const inputRef = (0,
|
|
10860
|
-
const rootRef = (0,
|
|
10861
|
-
const [isFocused, setIsFocused] = (0,
|
|
10862
|
-
(0,
|
|
11777
|
+
const inputId = (0, import_react11.useId)();
|
|
11778
|
+
const inputRef = (0, import_react11.useRef)(null);
|
|
11779
|
+
const rootRef = (0, import_react11.useRef)(null);
|
|
11780
|
+
const [isFocused, setIsFocused] = (0, import_react11.useState)(false);
|
|
11781
|
+
(0, import_react11.useEffect)(() => {
|
|
10863
11782
|
if (!dropdownOpen) return;
|
|
10864
11783
|
const isOutside = (e) => {
|
|
10865
11784
|
const root = rootRef.current;
|
|
@@ -10900,19 +11819,19 @@ function UrlOrPageInput({
|
|
|
10900
11819
|
"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]",
|
|
10901
11820
|
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"
|
|
10902
11821
|
);
|
|
10903
|
-
return /* @__PURE__ */ (0,
|
|
10904
|
-
/* @__PURE__ */ (0,
|
|
10905
|
-
/* @__PURE__ */ (0,
|
|
10906
|
-
/* @__PURE__ */ (0,
|
|
10907
|
-
selectedPage ? /* @__PURE__ */ (0,
|
|
10908
|
-
|
|
11822
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex w-full flex-col gap-2 p-0", children: [
|
|
11823
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Label, { htmlFor: inputId, className: cn(urlError && "text-destructive"), children: "Destination" }),
|
|
11824
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { ref: rootRef, className: "relative w-full", children: [
|
|
11825
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { "data-ohw-link-field": true, className: fieldClassName, children: [
|
|
11826
|
+
selectedPage ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex shrink-0 items-center pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
11827
|
+
import_lucide_react13.File,
|
|
10909
11828
|
{
|
|
10910
11829
|
size: 16,
|
|
10911
11830
|
className: "shrink-0 text-foreground",
|
|
10912
11831
|
"aria-hidden": true
|
|
10913
11832
|
}
|
|
10914
11833
|
) }) : null,
|
|
10915
|
-
readOnly ? /* @__PURE__ */ (0,
|
|
11834
|
+
readOnly ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "min-w-0 flex-1 truncate text-sm leading-5 text-foreground", children: selectedPage?.title ?? value }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
10916
11835
|
Input,
|
|
10917
11836
|
{
|
|
10918
11837
|
ref: inputRef,
|
|
@@ -10938,7 +11857,7 @@ function UrlOrPageInput({
|
|
|
10938
11857
|
)
|
|
10939
11858
|
}
|
|
10940
11859
|
),
|
|
10941
|
-
selectedPage && !readOnly ? /* @__PURE__ */ (0,
|
|
11860
|
+
selectedPage && !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
10942
11861
|
"button",
|
|
10943
11862
|
{
|
|
10944
11863
|
type: "button",
|
|
@@ -10946,26 +11865,26 @@ function UrlOrPageInput({
|
|
|
10946
11865
|
onMouseDown: clearSelection,
|
|
10947
11866
|
"aria-label": "Clear selected page",
|
|
10948
11867
|
tabIndex: -1,
|
|
10949
|
-
children: /* @__PURE__ */ (0,
|
|
11868
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.X, { size: 16, "aria-hidden": true })
|
|
10950
11869
|
}
|
|
10951
11870
|
) : null,
|
|
10952
|
-
!readOnly ? /* @__PURE__ */ (0,
|
|
11871
|
+
!readOnly ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(FieldChevron, { onClick: toggleDropdown }) : null
|
|
10953
11872
|
] }),
|
|
10954
|
-
dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ (0,
|
|
11873
|
+
dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
10955
11874
|
"div",
|
|
10956
11875
|
{
|
|
10957
11876
|
"data-ohw-link-page-dropdown": "",
|
|
10958
11877
|
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",
|
|
10959
11878
|
onMouseDown: (e) => e.preventDefault(),
|
|
10960
|
-
children: filteredPages.map((page) => /* @__PURE__ */ (0,
|
|
11879
|
+
children: filteredPages.map((page) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
10961
11880
|
"button",
|
|
10962
11881
|
{
|
|
10963
11882
|
type: "button",
|
|
10964
11883
|
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",
|
|
10965
11884
|
onClick: () => onPageSelect(page),
|
|
10966
11885
|
children: [
|
|
10967
|
-
/* @__PURE__ */ (0,
|
|
10968
|
-
/* @__PURE__ */ (0,
|
|
11886
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.File, { size: 16, className: "shrink-0", "aria-hidden": true }),
|
|
11887
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "truncate", children: page.title })
|
|
10969
11888
|
]
|
|
10970
11889
|
},
|
|
10971
11890
|
page.path
|
|
@@ -10973,34 +11892,34 @@ function UrlOrPageInput({
|
|
|
10973
11892
|
}
|
|
10974
11893
|
) : null
|
|
10975
11894
|
] }),
|
|
10976
|
-
urlError ? /* @__PURE__ */ (0,
|
|
11895
|
+
urlError ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-sm font-medium text-destructive", children: urlError }) : null
|
|
10977
11896
|
] });
|
|
10978
11897
|
}
|
|
10979
11898
|
|
|
10980
11899
|
// src/ui/link-modal/LinkEditorPanel.tsx
|
|
10981
|
-
var
|
|
11900
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
10982
11901
|
function LinkEditorPanel({ state, onClose }) {
|
|
10983
11902
|
const isCancel = state.secondaryLabel === "Cancel" || state.secondaryLabel === "Back to sections";
|
|
10984
|
-
return /* @__PURE__ */ (0,
|
|
10985
|
-
/* @__PURE__ */ (0,
|
|
11903
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
|
|
11904
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
10986
11905
|
"button",
|
|
10987
11906
|
{
|
|
10988
11907
|
type: "button",
|
|
10989
11908
|
className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50 h-7",
|
|
10990
11909
|
"aria-label": "Close",
|
|
10991
11910
|
onClick: onClose,
|
|
10992
|
-
children: /* @__PURE__ */ (0,
|
|
11911
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react14.X, { size: 16, "aria-hidden": true })
|
|
10993
11912
|
}
|
|
10994
11913
|
) }),
|
|
10995
|
-
/* @__PURE__ */ (0,
|
|
10996
|
-
/* @__PURE__ */ (0,
|
|
10997
|
-
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ (0,
|
|
11914
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogHeader, { className: "w-full gap-1.5 p-6 pr-12", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogTitle, { className: "m-0 w-full break-words", children: state.title }) }),
|
|
11915
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex w-full flex-col gap-3 px-6 pb-8 pt-1", children: [
|
|
11916
|
+
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
10998
11917
|
DestinationBreadcrumb,
|
|
10999
11918
|
{
|
|
11000
11919
|
pageTitle: state.selectedPage.title,
|
|
11001
11920
|
sectionLabel: state.selectedSection.label
|
|
11002
11921
|
}
|
|
11003
|
-
) : /* @__PURE__ */ (0,
|
|
11922
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
11004
11923
|
UrlOrPageInput,
|
|
11005
11924
|
{
|
|
11006
11925
|
value: state.searchValue,
|
|
@@ -11013,8 +11932,8 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
11013
11932
|
urlError: state.urlError
|
|
11014
11933
|
}
|
|
11015
11934
|
),
|
|
11016
|
-
state.showChooseSection ? /* @__PURE__ */ (0,
|
|
11017
|
-
/* @__PURE__ */ (0,
|
|
11935
|
+
state.showChooseSection ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-col justify-center gap-2", children: [
|
|
11936
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
11018
11937
|
Button,
|
|
11019
11938
|
{
|
|
11020
11939
|
type: "button",
|
|
@@ -11025,15 +11944,15 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
11025
11944
|
children: "Choose a section"
|
|
11026
11945
|
}
|
|
11027
11946
|
),
|
|
11028
|
-
/* @__PURE__ */ (0,
|
|
11029
|
-
/* @__PURE__ */ (0,
|
|
11030
|
-
/* @__PURE__ */ (0,
|
|
11947
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
|
|
11948
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react14.Info, { size: 16, className: "shrink-0", "aria-hidden": true }),
|
|
11949
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: "Pick a section this link should scroll to." })
|
|
11031
11950
|
] })
|
|
11032
11951
|
] }) : null,
|
|
11033
|
-
state.showSectionRow && state.selectedSection ? /* @__PURE__ */ (0,
|
|
11952
|
+
state.showSectionRow && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SectionTreeItem, { section: state.selectedSection, selected: true }) : null
|
|
11034
11953
|
] }),
|
|
11035
|
-
/* @__PURE__ */ (0,
|
|
11036
|
-
/* @__PURE__ */ (0,
|
|
11954
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(DialogFooter, { className: "w-full px-6 pb-6", children: [
|
|
11955
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
11037
11956
|
Button,
|
|
11038
11957
|
{
|
|
11039
11958
|
type: "button",
|
|
@@ -11048,7 +11967,7 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
11048
11967
|
children: state.secondaryLabel
|
|
11049
11968
|
}
|
|
11050
11969
|
),
|
|
11051
|
-
/* @__PURE__ */ (0,
|
|
11970
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
11052
11971
|
Button,
|
|
11053
11972
|
{
|
|
11054
11973
|
type: "button",
|
|
@@ -11067,11 +11986,11 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
11067
11986
|
}
|
|
11068
11987
|
|
|
11069
11988
|
// src/ui/link-modal/SectionPickerOverlay.tsx
|
|
11070
|
-
var
|
|
11989
|
+
var import_react12 = require("react");
|
|
11071
11990
|
var import_react_dom3 = require("react-dom");
|
|
11072
|
-
var
|
|
11991
|
+
var import_lucide_react15 = require("lucide-react");
|
|
11073
11992
|
var import_navigation2 = require("next/navigation");
|
|
11074
|
-
var
|
|
11993
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
11075
11994
|
var DIM_OVERLAY = "rgba(0, 0, 0, 0.45)";
|
|
11076
11995
|
function rectsEqual(a, b) {
|
|
11077
11996
|
if (a.size !== b.size) return false;
|
|
@@ -11104,12 +12023,12 @@ function hitTestSectionId(x, y, sectionIds, rects) {
|
|
|
11104
12023
|
return null;
|
|
11105
12024
|
}
|
|
11106
12025
|
function useSectionRects(sectionIdsKey, enabled) {
|
|
11107
|
-
const [rects, setRects] = (0,
|
|
11108
|
-
const sectionIds = (0,
|
|
12026
|
+
const [rects, setRects] = (0, import_react12.useState)(/* @__PURE__ */ new Map());
|
|
12027
|
+
const sectionIds = (0, import_react12.useMemo)(
|
|
11109
12028
|
() => sectionIdsKey ? sectionIdsKey.split("\0") : [],
|
|
11110
12029
|
[sectionIdsKey]
|
|
11111
12030
|
);
|
|
11112
|
-
(0,
|
|
12031
|
+
(0, import_react12.useEffect)(() => {
|
|
11113
12032
|
if (!enabled || sectionIds.length === 0) {
|
|
11114
12033
|
setRects((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Map());
|
|
11115
12034
|
return;
|
|
@@ -11150,13 +12069,13 @@ function SectionPickerOverlay({
|
|
|
11150
12069
|
}) {
|
|
11151
12070
|
const router = (0, import_navigation2.useRouter)();
|
|
11152
12071
|
const pathname = (0, import_navigation2.usePathname)();
|
|
11153
|
-
const [selectedId, setSelectedId] = (0,
|
|
11154
|
-
const [hoveredId, setHoveredId] = (0,
|
|
11155
|
-
const pointerRef = (0,
|
|
11156
|
-
const pointerScreenRef = (0,
|
|
11157
|
-
const iframeOffsetTopRef = (0,
|
|
11158
|
-
const sectionIdsRef = (0,
|
|
11159
|
-
const [chromeClip, setChromeClip] = (0,
|
|
12072
|
+
const [selectedId, setSelectedId] = (0, import_react12.useState)(null);
|
|
12073
|
+
const [hoveredId, setHoveredId] = (0, import_react12.useState)(null);
|
|
12074
|
+
const pointerRef = (0, import_react12.useRef)(null);
|
|
12075
|
+
const pointerScreenRef = (0, import_react12.useRef)(null);
|
|
12076
|
+
const iframeOffsetTopRef = (0, import_react12.useRef)(null);
|
|
12077
|
+
const sectionIdsRef = (0, import_react12.useRef)([]);
|
|
12078
|
+
const [chromeClip, setChromeClip] = (0, import_react12.useState)(
|
|
11160
12079
|
() => ({
|
|
11161
12080
|
top: 0,
|
|
11162
12081
|
bottom: typeof window !== "undefined" ? window.innerHeight : 0
|
|
@@ -11164,12 +12083,12 @@ function SectionPickerOverlay({
|
|
|
11164
12083
|
);
|
|
11165
12084
|
const normalizedTarget = normalizePath(pagePath);
|
|
11166
12085
|
const isOnTargetPage = normalizePath(pathname) === normalizedTarget;
|
|
11167
|
-
(0,
|
|
12086
|
+
(0, import_react12.useEffect)(() => {
|
|
11168
12087
|
if (isOnTargetPage) return;
|
|
11169
12088
|
const search = readPreservedSearch();
|
|
11170
12089
|
router.push(`${normalizedTarget}${search}`);
|
|
11171
12090
|
}, [isOnTargetPage, normalizedTarget, router]);
|
|
11172
|
-
(0,
|
|
12091
|
+
(0, import_react12.useEffect)(() => {
|
|
11173
12092
|
document.documentElement.setAttribute("data-ohw-section-picking", "");
|
|
11174
12093
|
document.querySelectorAll("[data-ohw-hovered]").forEach((el) => {
|
|
11175
12094
|
el.removeAttribute("data-ohw-hovered");
|
|
@@ -11181,24 +12100,24 @@ function SectionPickerOverlay({
|
|
|
11181
12100
|
document.documentElement.removeAttribute("data-ohw-section-picking");
|
|
11182
12101
|
};
|
|
11183
12102
|
}, []);
|
|
11184
|
-
const liveSections = (0,
|
|
12103
|
+
const liveSections = (0, import_react12.useMemo)(() => {
|
|
11185
12104
|
if (!isOnTargetPage) return sections;
|
|
11186
12105
|
const live = collectSectionsFromDom();
|
|
11187
12106
|
if (live.length === 0) return sections;
|
|
11188
12107
|
const labels = new Map(sections.map((s) => [s.id, s.label]));
|
|
11189
12108
|
return live.map((s) => ({ id: s.id, label: labels.get(s.id) ?? s.label }));
|
|
11190
12109
|
}, [isOnTargetPage, sections, pathname]);
|
|
11191
|
-
const sectionIdsKey = (0,
|
|
12110
|
+
const sectionIdsKey = (0, import_react12.useMemo)(
|
|
11192
12111
|
() => liveSections.map((s) => s.id).join("\0"),
|
|
11193
12112
|
[liveSections]
|
|
11194
12113
|
);
|
|
11195
|
-
const sectionIds = (0,
|
|
12114
|
+
const sectionIds = (0, import_react12.useMemo)(
|
|
11196
12115
|
() => liveSections.map((s) => s.id),
|
|
11197
12116
|
[liveSections]
|
|
11198
12117
|
);
|
|
11199
12118
|
sectionIdsRef.current = sectionIds;
|
|
11200
12119
|
const rects = useSectionRects(sectionIdsKey, isOnTargetPage);
|
|
11201
|
-
const applyHoverAt = (0,
|
|
12120
|
+
const applyHoverAt = (0, import_react12.useCallback)(
|
|
11202
12121
|
(x, y, liveRects) => {
|
|
11203
12122
|
const ids = sectionIdsRef.current;
|
|
11204
12123
|
const map = liveRects ?? readSectionRects(ids);
|
|
@@ -11207,7 +12126,7 @@ function SectionPickerOverlay({
|
|
|
11207
12126
|
},
|
|
11208
12127
|
[]
|
|
11209
12128
|
);
|
|
11210
|
-
(0,
|
|
12129
|
+
(0, import_react12.useEffect)(() => {
|
|
11211
12130
|
const applyClip = (iframeOffsetTop, visibleCanvasTop, canvasH) => {
|
|
11212
12131
|
const top = Math.max(0, visibleCanvasTop - iframeOffsetTop);
|
|
11213
12132
|
const bottom = Math.min(
|
|
@@ -11249,12 +12168,12 @@ function SectionPickerOverlay({
|
|
|
11249
12168
|
window.removeEventListener("resize", onResize);
|
|
11250
12169
|
};
|
|
11251
12170
|
}, [applyHoverAt]);
|
|
11252
|
-
(0,
|
|
12171
|
+
(0, import_react12.useEffect)(() => {
|
|
11253
12172
|
const ptr = pointerRef.current;
|
|
11254
12173
|
if (!ptr) return;
|
|
11255
12174
|
applyHoverAt(ptr.x, ptr.y, rects);
|
|
11256
12175
|
}, [rects, applyHoverAt]);
|
|
11257
|
-
(0,
|
|
12176
|
+
(0, import_react12.useEffect)(() => {
|
|
11258
12177
|
const rememberPointer = (clientX, clientY) => {
|
|
11259
12178
|
pointerRef.current = { x: clientX, y: clientY };
|
|
11260
12179
|
const top = iframeOffsetTopRef.current;
|
|
@@ -11278,7 +12197,7 @@ function SectionPickerOverlay({
|
|
|
11278
12197
|
window.removeEventListener("message", onPointerSync);
|
|
11279
12198
|
};
|
|
11280
12199
|
}, [rects, applyHoverAt]);
|
|
11281
|
-
const handleSelect = (0,
|
|
12200
|
+
const handleSelect = (0, import_react12.useCallback)(
|
|
11282
12201
|
(section) => {
|
|
11283
12202
|
if (selectedId) return;
|
|
11284
12203
|
setSelectedId(section.id);
|
|
@@ -11286,7 +12205,7 @@ function SectionPickerOverlay({
|
|
|
11286
12205
|
},
|
|
11287
12206
|
[selectedId, onSelect]
|
|
11288
12207
|
);
|
|
11289
|
-
(0,
|
|
12208
|
+
(0, import_react12.useEffect)(() => {
|
|
11290
12209
|
const onKeyDown = (e) => {
|
|
11291
12210
|
if (e.key === "Escape") {
|
|
11292
12211
|
e.preventDefault();
|
|
@@ -11300,7 +12219,7 @@ function SectionPickerOverlay({
|
|
|
11300
12219
|
const portalRoot = typeof document !== "undefined" ? document.querySelector("[data-ohw-bridge-root]") ?? document.body : null;
|
|
11301
12220
|
if (!portalRoot) return null;
|
|
11302
12221
|
return (0, import_react_dom3.createPortal)(
|
|
11303
|
-
/* @__PURE__ */ (0,
|
|
12222
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
11304
12223
|
"div",
|
|
11305
12224
|
{
|
|
11306
12225
|
"data-ohw-section-picker": "",
|
|
@@ -11310,12 +12229,12 @@ function SectionPickerOverlay({
|
|
|
11310
12229
|
role: "dialog",
|
|
11311
12230
|
"aria-label": "Choose a section",
|
|
11312
12231
|
children: [
|
|
11313
|
-
/* @__PURE__ */ (0,
|
|
12232
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
11314
12233
|
"div",
|
|
11315
12234
|
{
|
|
11316
12235
|
className: "pointer-events-auto fixed left-5 z-[2]",
|
|
11317
12236
|
style: { top: chromeClip.top + 20 },
|
|
11318
|
-
children: /* @__PURE__ */ (0,
|
|
12237
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
11319
12238
|
Button,
|
|
11320
12239
|
{
|
|
11321
12240
|
type: "button",
|
|
@@ -11324,14 +12243,14 @@ function SectionPickerOverlay({
|
|
|
11324
12243
|
className: "h-8 min-w-0 gap-1 border-border bg-background px-2 py-1.5 shadow-sm hover:bg-muted cursor-pointer",
|
|
11325
12244
|
onClick: onBack,
|
|
11326
12245
|
children: [
|
|
11327
|
-
/* @__PURE__ */ (0,
|
|
12246
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react15.ArrowLeft, { className: "size-4 shrink-0", "aria-hidden": true }),
|
|
11328
12247
|
"Back"
|
|
11329
12248
|
]
|
|
11330
12249
|
}
|
|
11331
12250
|
)
|
|
11332
12251
|
}
|
|
11333
12252
|
),
|
|
11334
|
-
/* @__PURE__ */ (0,
|
|
12253
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
11335
12254
|
"div",
|
|
11336
12255
|
{
|
|
11337
12256
|
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",
|
|
@@ -11344,7 +12263,7 @@ function SectionPickerOverlay({
|
|
|
11344
12263
|
children: "Click on section to select"
|
|
11345
12264
|
}
|
|
11346
12265
|
),
|
|
11347
|
-
!isOnTargetPage ? /* @__PURE__ */ (0,
|
|
12266
|
+
!isOnTargetPage ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
11348
12267
|
"div",
|
|
11349
12268
|
{
|
|
11350
12269
|
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",
|
|
@@ -11352,14 +12271,14 @@ function SectionPickerOverlay({
|
|
|
11352
12271
|
children: "Loading page preview\u2026"
|
|
11353
12272
|
}
|
|
11354
12273
|
) : null,
|
|
11355
|
-
isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */ (0,
|
|
12274
|
+
isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "pointer-events-auto fixed inset-0 z-[1] flex items-center justify-center bg-muted/40", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-sm text-muted-foreground", children: "No sections found on this page." }) }) : null,
|
|
11356
12275
|
isOnTargetPage ? liveSections.map((section) => {
|
|
11357
12276
|
const rect = rects.get(section.id);
|
|
11358
12277
|
if (!rect || rect.width <= 0 || rect.height <= 0) return null;
|
|
11359
12278
|
const isSelected = selectedId === section.id;
|
|
11360
12279
|
const isHovered = hoveredId === section.id;
|
|
11361
12280
|
const isLit = isSelected || isHovered;
|
|
11362
|
-
return /* @__PURE__ */ (0,
|
|
12281
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
11363
12282
|
"button",
|
|
11364
12283
|
{
|
|
11365
12284
|
type: "button",
|
|
@@ -11374,7 +12293,7 @@ function SectionPickerOverlay({
|
|
|
11374
12293
|
"aria-label": `Select section ${section.label}`,
|
|
11375
12294
|
onClick: () => handleSelect(section),
|
|
11376
12295
|
children: [
|
|
11377
|
-
isLit ? /* @__PURE__ */ (0,
|
|
12296
|
+
isLit ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
11378
12297
|
"span",
|
|
11379
12298
|
{
|
|
11380
12299
|
className: "pointer-events-none absolute",
|
|
@@ -11387,13 +12306,13 @@ function SectionPickerOverlay({
|
|
|
11387
12306
|
"aria-hidden": true
|
|
11388
12307
|
}
|
|
11389
12308
|
) : null,
|
|
11390
|
-
isSelected ? /* @__PURE__ */ (0,
|
|
12309
|
+
isSelected ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
11391
12310
|
"span",
|
|
11392
12311
|
{
|
|
11393
12312
|
className: "absolute right-3 top-3 flex size-8 items-center justify-center rounded-full text-white",
|
|
11394
12313
|
style: { backgroundColor: "var(--ohw-primary, #0885fe)" },
|
|
11395
12314
|
"aria-hidden": true,
|
|
11396
|
-
children: /* @__PURE__ */ (0,
|
|
12315
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react15.Check, { className: "size-5" })
|
|
11397
12316
|
}
|
|
11398
12317
|
) : null
|
|
11399
12318
|
]
|
|
@@ -11409,7 +12328,7 @@ function SectionPickerOverlay({
|
|
|
11409
12328
|
}
|
|
11410
12329
|
|
|
11411
12330
|
// src/ui/link-modal/useLinkModalState.ts
|
|
11412
|
-
var
|
|
12331
|
+
var import_react13 = require("react");
|
|
11413
12332
|
function useLinkModalState({
|
|
11414
12333
|
open,
|
|
11415
12334
|
mode,
|
|
@@ -11421,14 +12340,14 @@ function useLinkModalState({
|
|
|
11421
12340
|
onClose,
|
|
11422
12341
|
onSubmit
|
|
11423
12342
|
}) {
|
|
11424
|
-
const availablePages = (0,
|
|
11425
|
-
const [searchValue, setSearchValue] = (0,
|
|
11426
|
-
const [selectedPage, setSelectedPage] = (0,
|
|
11427
|
-
const [selectedSection, setSelectedSection] = (0,
|
|
11428
|
-
const [step, setStep] = (0,
|
|
11429
|
-
const [dropdownOpen, setDropdownOpen] = (0,
|
|
11430
|
-
const [urlError, setUrlError] = (0,
|
|
11431
|
-
const reset = (0,
|
|
12343
|
+
const availablePages = (0, import_react13.useMemo)(() => pages, [pages]);
|
|
12344
|
+
const [searchValue, setSearchValue] = (0, import_react13.useState)("");
|
|
12345
|
+
const [selectedPage, setSelectedPage] = (0, import_react13.useState)(null);
|
|
12346
|
+
const [selectedSection, setSelectedSection] = (0, import_react13.useState)(null);
|
|
12347
|
+
const [step, setStep] = (0, import_react13.useState)("input");
|
|
12348
|
+
const [dropdownOpen, setDropdownOpen] = (0, import_react13.useState)(false);
|
|
12349
|
+
const [urlError, setUrlError] = (0, import_react13.useState)("");
|
|
12350
|
+
const reset = (0, import_react13.useCallback)(() => {
|
|
11432
12351
|
setSearchValue("");
|
|
11433
12352
|
setSelectedPage(null);
|
|
11434
12353
|
setSelectedSection(null);
|
|
@@ -11436,7 +12355,7 @@ function useLinkModalState({
|
|
|
11436
12355
|
setDropdownOpen(false);
|
|
11437
12356
|
setUrlError("");
|
|
11438
12357
|
}, []);
|
|
11439
|
-
(0,
|
|
12358
|
+
(0, import_react13.useEffect)(() => {
|
|
11440
12359
|
if (!open) return;
|
|
11441
12360
|
if (mode === "edit" && initialTarget) {
|
|
11442
12361
|
const { pageRoute } = parseTarget(initialTarget);
|
|
@@ -11452,11 +12371,11 @@ function useLinkModalState({
|
|
|
11452
12371
|
setDropdownOpen(false);
|
|
11453
12372
|
setUrlError("");
|
|
11454
12373
|
}, [open, mode, initialTarget, reset]);
|
|
11455
|
-
const filteredPages = (0,
|
|
12374
|
+
const filteredPages = (0, import_react13.useMemo)(() => {
|
|
11456
12375
|
if (!searchValue.trim()) return availablePages;
|
|
11457
12376
|
return availablePages.filter((p) => p.title.toLowerCase().startsWith(searchValue.toLowerCase()));
|
|
11458
12377
|
}, [availablePages, searchValue]);
|
|
11459
|
-
const activeSections = (0,
|
|
12378
|
+
const activeSections = (0, import_react13.useMemo)(() => {
|
|
11460
12379
|
if (!selectedPage) return [];
|
|
11461
12380
|
return getSectionsForPath(sectionsByPath, selectedPage.path);
|
|
11462
12381
|
}, [selectedPage, sectionsByPath]);
|
|
@@ -11505,7 +12424,7 @@ function useLinkModalState({
|
|
|
11505
12424
|
reset();
|
|
11506
12425
|
onClose();
|
|
11507
12426
|
};
|
|
11508
|
-
const isValid = (0,
|
|
12427
|
+
const isValid = (0, import_react13.useMemo)(() => {
|
|
11509
12428
|
if (urlError) return false;
|
|
11510
12429
|
if (showBreadcrumb) return true;
|
|
11511
12430
|
if (selectedPage) return true;
|
|
@@ -11573,7 +12492,7 @@ function useLinkModalState({
|
|
|
11573
12492
|
}
|
|
11574
12493
|
|
|
11575
12494
|
// src/ui/link-modal/LinkPopover.tsx
|
|
11576
|
-
var
|
|
12495
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
11577
12496
|
function postToParent(data) {
|
|
11578
12497
|
window.parent?.postMessage(data, "*");
|
|
11579
12498
|
}
|
|
@@ -11602,7 +12521,7 @@ function LinkPopover({
|
|
|
11602
12521
|
onSubmit
|
|
11603
12522
|
});
|
|
11604
12523
|
const sectionPickerActive = state.showSectionPicker && Boolean(state.selectedPage);
|
|
11605
|
-
(0,
|
|
12524
|
+
(0, import_react14.useEffect)(() => {
|
|
11606
12525
|
if (!open) return;
|
|
11607
12526
|
if (sectionPickerActive) {
|
|
11608
12527
|
postToParent({ type: "ui:unlock" });
|
|
@@ -11669,15 +12588,15 @@ function LinkPopover({
|
|
|
11669
12588
|
);
|
|
11670
12589
|
};
|
|
11671
12590
|
}, [open, sectionPickerActive]);
|
|
11672
|
-
return /* @__PURE__ */ (0,
|
|
11673
|
-
/* @__PURE__ */ (0,
|
|
12591
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
|
|
12592
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
11674
12593
|
Dialog2,
|
|
11675
12594
|
{
|
|
11676
12595
|
open: open && !sectionPickerActive,
|
|
11677
12596
|
onOpenChange: (next) => {
|
|
11678
12597
|
if (!next) onClose?.();
|
|
11679
12598
|
},
|
|
11680
|
-
children: /* @__PURE__ */ (0,
|
|
12599
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
11681
12600
|
DialogContent,
|
|
11682
12601
|
{
|
|
11683
12602
|
ref: panelRef,
|
|
@@ -11687,12 +12606,12 @@ function LinkPopover({
|
|
|
11687
12606
|
"data-ohw-bridge": "",
|
|
11688
12607
|
showCloseButton: false,
|
|
11689
12608
|
className: "gap-0 p-0 w-full max-w-[448px] pointer-events-auto z-[2147483646] overflow-visible",
|
|
11690
|
-
children: /* @__PURE__ */ (0,
|
|
12609
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LinkEditorPanel, { state, onClose })
|
|
11691
12610
|
}
|
|
11692
12611
|
)
|
|
11693
12612
|
}
|
|
11694
12613
|
),
|
|
11695
|
-
sectionPickerActive && state.selectedPage ? /* @__PURE__ */ (0,
|
|
12614
|
+
sectionPickerActive && state.selectedPage ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
11696
12615
|
SectionPickerOverlay,
|
|
11697
12616
|
{
|
|
11698
12617
|
pagePath: state.selectedPage.path,
|
|
@@ -14880,9 +15799,9 @@ function addFooterColumnWithPersist({
|
|
|
14880
15799
|
}
|
|
14881
15800
|
|
|
14882
15801
|
// src/ui/FloatingPanel.tsx
|
|
14883
|
-
var
|
|
14884
|
-
var
|
|
14885
|
-
var
|
|
15802
|
+
var import_react15 = require("react");
|
|
15803
|
+
var import_lucide_react16 = require("lucide-react");
|
|
15804
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
14886
15805
|
var PANEL_WIDTH = 256;
|
|
14887
15806
|
var EDGE_MARGIN = 16;
|
|
14888
15807
|
function getVisibleClip(parentScroll) {
|
|
@@ -14928,23 +15847,23 @@ function FloatingPanel({
|
|
|
14928
15847
|
className,
|
|
14929
15848
|
bodyClassName
|
|
14930
15849
|
}) {
|
|
14931
|
-
const panelRef = (0,
|
|
14932
|
-
const [measured, setMeasured] = (0,
|
|
14933
|
-
const dragRef = (0,
|
|
15850
|
+
const panelRef = (0, import_react15.useRef)(null);
|
|
15851
|
+
const [measured, setMeasured] = (0, import_react15.useState)({ w: PANEL_WIDTH, h: 280 });
|
|
15852
|
+
const dragRef = (0, import_react15.useRef)(null);
|
|
14934
15853
|
const resolved = position ?? defaultFloatingPanelPosition(parentScroll, measured.h);
|
|
14935
15854
|
const clamped = clampPosition(resolved, parentScroll, measured.w, measured.h);
|
|
14936
|
-
(0,
|
|
15855
|
+
(0, import_react15.useLayoutEffect)(() => {
|
|
14937
15856
|
if (!open || !panelRef.current) return;
|
|
14938
15857
|
const el = panelRef.current;
|
|
14939
15858
|
const next = { w: el.offsetWidth || PANEL_WIDTH, h: el.offsetHeight || 280 };
|
|
14940
15859
|
setMeasured((prev) => prev.w === next.w && prev.h === next.h ? prev : next);
|
|
14941
15860
|
}, [open, children, title, context]);
|
|
14942
|
-
(0,
|
|
15861
|
+
(0, import_react15.useEffect)(() => {
|
|
14943
15862
|
if (!open || !position || !onPositionChange) return;
|
|
14944
15863
|
const next = clampPosition(position, parentScroll, measured.w, measured.h);
|
|
14945
15864
|
if (next.x !== position.x || next.y !== position.y) onPositionChange(next);
|
|
14946
15865
|
}, [open, parentScroll, measured.w, measured.h, position, onPositionChange]);
|
|
14947
|
-
const onHeaderPointerDown = (0,
|
|
15866
|
+
const onHeaderPointerDown = (0, import_react15.useCallback)(
|
|
14948
15867
|
(e) => {
|
|
14949
15868
|
if (e.button !== 0) return;
|
|
14950
15869
|
if (e.target.closest("[data-ohw-floating-panel-close]")) return;
|
|
@@ -14963,7 +15882,7 @@ function FloatingPanel({
|
|
|
14963
15882
|
},
|
|
14964
15883
|
[clamped.x, clamped.y]
|
|
14965
15884
|
);
|
|
14966
|
-
const onHeaderPointerMove = (0,
|
|
15885
|
+
const onHeaderPointerMove = (0, import_react15.useCallback)(
|
|
14967
15886
|
(e) => {
|
|
14968
15887
|
const drag = dragRef.current;
|
|
14969
15888
|
if (!drag || drag.pointerId !== e.pointerId) return;
|
|
@@ -14990,7 +15909,7 @@ function FloatingPanel({
|
|
|
14990
15909
|
},
|
|
14991
15910
|
[measured.h, measured.w, onPositionChange, parentScroll]
|
|
14992
15911
|
);
|
|
14993
|
-
const endDrag = (0,
|
|
15912
|
+
const endDrag = (0, import_react15.useCallback)((e) => {
|
|
14994
15913
|
const drag = dragRef.current;
|
|
14995
15914
|
if (!drag || drag.pointerId !== e.pointerId) return;
|
|
14996
15915
|
dragRef.current = null;
|
|
@@ -15000,13 +15919,13 @@ function FloatingPanel({
|
|
|
15000
15919
|
} catch {
|
|
15001
15920
|
}
|
|
15002
15921
|
}, []);
|
|
15003
|
-
(0,
|
|
15922
|
+
(0, import_react15.useEffect)(() => {
|
|
15004
15923
|
if (open) return;
|
|
15005
15924
|
document.documentElement.removeAttribute("data-ohw-panel-dragging");
|
|
15006
15925
|
}, [open]);
|
|
15007
|
-
(0,
|
|
15926
|
+
(0, import_react15.useEffect)(() => () => document.documentElement.removeAttribute("data-ohw-panel-dragging"), []);
|
|
15008
15927
|
if (!open) return null;
|
|
15009
|
-
return /* @__PURE__ */ (0,
|
|
15928
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
15010
15929
|
"div",
|
|
15011
15930
|
{
|
|
15012
15931
|
ref: panelRef,
|
|
@@ -15023,7 +15942,7 @@ function FloatingPanel({
|
|
|
15023
15942
|
onPointerDown: (e) => e.stopPropagation(),
|
|
15024
15943
|
onClick: (e) => e.stopPropagation(),
|
|
15025
15944
|
children: [
|
|
15026
|
-
/* @__PURE__ */ (0,
|
|
15945
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
15027
15946
|
"div",
|
|
15028
15947
|
{
|
|
15029
15948
|
"data-ohw-floating-panel-header": "",
|
|
@@ -15033,14 +15952,14 @@ function FloatingPanel({
|
|
|
15033
15952
|
onPointerUp: endDrag,
|
|
15034
15953
|
onPointerCancel: endDrag,
|
|
15035
15954
|
children: [
|
|
15036
|
-
/* @__PURE__ */ (0,
|
|
15037
|
-
/* @__PURE__ */ (0,
|
|
15038
|
-
icon ? /* @__PURE__ */ (0,
|
|
15039
|
-
/* @__PURE__ */ (0,
|
|
15955
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
|
|
15956
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
15957
|
+
icon ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "shrink-0 text-foreground", children: icon }) : null,
|
|
15958
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "min-w-0 flex-1 text-lg font-semibold leading-7 text-foreground", children: title })
|
|
15040
15959
|
] }),
|
|
15041
|
-
context ? /* @__PURE__ */ (0,
|
|
15960
|
+
context ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "w-full text-sm leading-5 text-muted-foreground", children: context }) : null
|
|
15042
15961
|
] }),
|
|
15043
|
-
/* @__PURE__ */ (0,
|
|
15962
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
15044
15963
|
"button",
|
|
15045
15964
|
{
|
|
15046
15965
|
type: "button",
|
|
@@ -15052,13 +15971,13 @@ function FloatingPanel({
|
|
|
15052
15971
|
onClose();
|
|
15053
15972
|
},
|
|
15054
15973
|
onPointerDown: (e) => e.stopPropagation(),
|
|
15055
|
-
children: /* @__PURE__ */ (0,
|
|
15974
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react16.X, { size: 16, "aria-hidden": true })
|
|
15056
15975
|
}
|
|
15057
15976
|
)
|
|
15058
15977
|
]
|
|
15059
15978
|
}
|
|
15060
15979
|
),
|
|
15061
|
-
/* @__PURE__ */ (0,
|
|
15980
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
15062
15981
|
"div",
|
|
15063
15982
|
{
|
|
15064
15983
|
"data-ohw-floating-panel-body": "",
|
|
@@ -15072,15 +15991,15 @@ function FloatingPanel({
|
|
|
15072
15991
|
}
|
|
15073
15992
|
|
|
15074
15993
|
// src/ui/socials-display-panel.tsx
|
|
15075
|
-
var
|
|
15994
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
15076
15995
|
function DisplaySwitch({
|
|
15077
15996
|
label,
|
|
15078
15997
|
checked,
|
|
15079
15998
|
disabled,
|
|
15080
15999
|
onChange
|
|
15081
16000
|
}) {
|
|
15082
|
-
return /* @__PURE__ */ (0,
|
|
15083
|
-
/* @__PURE__ */ (0,
|
|
16001
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex w-full items-center gap-2", children: [
|
|
16002
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
15084
16003
|
"span",
|
|
15085
16004
|
{
|
|
15086
16005
|
className: cn(
|
|
@@ -15090,7 +16009,7 @@ function DisplaySwitch({
|
|
|
15090
16009
|
children: label
|
|
15091
16010
|
}
|
|
15092
16011
|
),
|
|
15093
|
-
/* @__PURE__ */ (0,
|
|
16012
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
15094
16013
|
"button",
|
|
15095
16014
|
{
|
|
15096
16015
|
type: "button",
|
|
@@ -15104,7 +16023,7 @@ function DisplaySwitch({
|
|
|
15104
16023
|
checked ? "bg-bridge-primary" : "bg-primary-50",
|
|
15105
16024
|
disabled ? "cursor-default opacity-50" : "cursor-pointer"
|
|
15106
16025
|
),
|
|
15107
|
-
children: /* @__PURE__ */ (0,
|
|
16026
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
15108
16027
|
"span",
|
|
15109
16028
|
{
|
|
15110
16029
|
className: cn(
|
|
@@ -15118,8 +16037,8 @@ function DisplaySwitch({
|
|
|
15118
16037
|
] });
|
|
15119
16038
|
}
|
|
15120
16039
|
function SocialsDisplayPanel({ display, onChange, className }) {
|
|
15121
|
-
return /* @__PURE__ */ (0,
|
|
15122
|
-
/* @__PURE__ */ (0,
|
|
16040
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: cn("flex w-full flex-col gap-3", className), children: [
|
|
16041
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
15123
16042
|
DisplaySwitch,
|
|
15124
16043
|
{
|
|
15125
16044
|
label: "Text",
|
|
@@ -15128,7 +16047,7 @@ function SocialsDisplayPanel({ display, onChange, className }) {
|
|
|
15128
16047
|
onChange: (text) => onChange({ ...display, text })
|
|
15129
16048
|
}
|
|
15130
16049
|
),
|
|
15131
|
-
/* @__PURE__ */ (0,
|
|
16050
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
15132
16051
|
DisplaySwitch,
|
|
15133
16052
|
{
|
|
15134
16053
|
label: "Icon",
|
|
@@ -15403,7 +16322,7 @@ function hitTestNavDropSlot(clientX, clientY, draggedHrefKey, draggedEl) {
|
|
|
15403
16322
|
}
|
|
15404
16323
|
|
|
15405
16324
|
// src/useNavItemDrag.ts
|
|
15406
|
-
var
|
|
16325
|
+
var import_react16 = require("react");
|
|
15407
16326
|
function useNavItemDrag({
|
|
15408
16327
|
isEditMode,
|
|
15409
16328
|
editContentRef,
|
|
@@ -15427,11 +16346,11 @@ function useNavItemDrag({
|
|
|
15427
16346
|
getNavigationItemAnchor: getNavigationItemAnchor2,
|
|
15428
16347
|
isDragHandleDisabled: isDragHandleDisabled2
|
|
15429
16348
|
}) {
|
|
15430
|
-
const navDragRef = (0,
|
|
15431
|
-
const [navDropSlots, setNavDropSlots] = (0,
|
|
15432
|
-
const [activeNavDropIndex, setActiveNavDropIndex] = (0,
|
|
15433
|
-
const navPointerDragRef = (0,
|
|
15434
|
-
const clearNavDragVisuals = (0,
|
|
16349
|
+
const navDragRef = (0, import_react16.useRef)(null);
|
|
16350
|
+
const [navDropSlots, setNavDropSlots] = (0, import_react16.useState)([]);
|
|
16351
|
+
const [activeNavDropIndex, setActiveNavDropIndex] = (0, import_react16.useState)(null);
|
|
16352
|
+
const navPointerDragRef = (0, import_react16.useRef)(null);
|
|
16353
|
+
const clearNavDragVisuals = (0, import_react16.useCallback)(() => {
|
|
15435
16354
|
const session = navDragRef.current;
|
|
15436
16355
|
const nestedHrefKey = session?.draggedEl?.closest("[data-ohw-nav-children]") != null ? session.hrefKey : null;
|
|
15437
16356
|
navDragRef.current = null;
|
|
@@ -15464,7 +16383,7 @@ function useNavItemDrag({
|
|
|
15464
16383
|
document.documentElement.removeAttribute("data-ohw-nav-dragging-root");
|
|
15465
16384
|
unlockItemDragInteraction();
|
|
15466
16385
|
}, [setDraggedItemRect, setIsItemDragging, setSiblingHintRects]);
|
|
15467
|
-
const refreshNavDragVisuals = (0,
|
|
16386
|
+
const refreshNavDragVisuals = (0, import_react16.useCallback)(
|
|
15468
16387
|
(session, activeSlot, clientX, clientY) => {
|
|
15469
16388
|
setDraggedItemRect(session.draggedEl.getBoundingClientRect());
|
|
15470
16389
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -15482,13 +16401,13 @@ function useNavItemDrag({
|
|
|
15482
16401
|
},
|
|
15483
16402
|
[setDraggedItemRect, setSiblingHintRects]
|
|
15484
16403
|
);
|
|
15485
|
-
const refreshNavDragVisualsRef = (0,
|
|
16404
|
+
const refreshNavDragVisualsRef = (0, import_react16.useRef)(refreshNavDragVisuals);
|
|
15486
16405
|
refreshNavDragVisualsRef.current = refreshNavDragVisuals;
|
|
15487
|
-
const commitNavDragRef = (0,
|
|
16406
|
+
const commitNavDragRef = (0, import_react16.useRef)(() => {
|
|
15488
16407
|
});
|
|
15489
|
-
const beginNavDragRef = (0,
|
|
16408
|
+
const beginNavDragRef = (0, import_react16.useRef)(() => {
|
|
15490
16409
|
});
|
|
15491
|
-
const beginNavDrag = (0,
|
|
16410
|
+
const beginNavDrag = (0, import_react16.useCallback)(
|
|
15492
16411
|
(session) => {
|
|
15493
16412
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
15494
16413
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -15527,7 +16446,7 @@ function useNavItemDrag({
|
|
|
15527
16446
|
]
|
|
15528
16447
|
);
|
|
15529
16448
|
beginNavDragRef.current = beginNavDrag;
|
|
15530
|
-
const commitNavDrag = (0,
|
|
16449
|
+
const commitNavDrag = (0, import_react16.useCallback)(
|
|
15531
16450
|
(clientX, clientY) => {
|
|
15532
16451
|
const session = navDragRef.current;
|
|
15533
16452
|
if (!session) {
|
|
@@ -15606,7 +16525,7 @@ function useNavItemDrag({
|
|
|
15606
16525
|
[clearNavDragVisuals, deselectRef, editContentRef, postToParentRef, selectRef]
|
|
15607
16526
|
);
|
|
15608
16527
|
commitNavDragRef.current = commitNavDrag;
|
|
15609
|
-
const startNavLinkDrag = (0,
|
|
16528
|
+
const startNavLinkDrag = (0, import_react16.useCallback)(
|
|
15610
16529
|
(anchor, clientX, clientY, wasSelected) => {
|
|
15611
16530
|
if (footerDragRef.current) return false;
|
|
15612
16531
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -15624,7 +16543,7 @@ function useNavItemDrag({
|
|
|
15624
16543
|
},
|
|
15625
16544
|
[beginNavDrag, footerDragRef, isDragHandleDisabled2, isCtaButton]
|
|
15626
16545
|
);
|
|
15627
|
-
const onNavDragOver = (0,
|
|
16546
|
+
const onNavDragOver = (0, import_react16.useCallback)(
|
|
15628
16547
|
(e) => {
|
|
15629
16548
|
const session = navDragRef.current;
|
|
15630
16549
|
if (!session) return false;
|
|
@@ -15636,7 +16555,7 @@ function useNavItemDrag({
|
|
|
15636
16555
|
},
|
|
15637
16556
|
[]
|
|
15638
16557
|
);
|
|
15639
|
-
(0,
|
|
16558
|
+
(0, import_react16.useEffect)(() => {
|
|
15640
16559
|
if (!isEditMode) return;
|
|
15641
16560
|
const THRESHOLD = 10;
|
|
15642
16561
|
const resolveWasSelected = (el) => {
|
|
@@ -15763,7 +16682,7 @@ function useNavItemDrag({
|
|
|
15763
16682
|
setLinkPopover,
|
|
15764
16683
|
suppressNextClickRef
|
|
15765
16684
|
]);
|
|
15766
|
-
const armNavPressFromChrome = (0,
|
|
16685
|
+
const armNavPressFromChrome = (0, import_react16.useCallback)(
|
|
15767
16686
|
(selected, clientX, clientY, pointerId) => {
|
|
15768
16687
|
const hrefKey = selected.getAttribute("data-ohw-href-key");
|
|
15769
16688
|
if (!hrefKey || !isNavbarHrefKey(hrefKey)) return false;
|
|
@@ -15795,7 +16714,7 @@ function useNavItemDrag({
|
|
|
15795
16714
|
}
|
|
15796
16715
|
|
|
15797
16716
|
// src/useSectionDrag.ts
|
|
15798
|
-
var
|
|
16717
|
+
var import_react17 = require("react");
|
|
15799
16718
|
|
|
15800
16719
|
// src/lib/section-dnd.ts
|
|
15801
16720
|
function isFooterSection(el) {
|
|
@@ -15894,21 +16813,21 @@ function useSectionDrag({
|
|
|
15894
16813
|
suppressNextClickRef,
|
|
15895
16814
|
suppressClickUntilRef
|
|
15896
16815
|
}) {
|
|
15897
|
-
const sectionDragRef = (0,
|
|
15898
|
-
const [sectionDropSlots, setSectionDropSlots] = (0,
|
|
15899
|
-
const [activeSectionDropIndex, setActiveSectionDropIndex] = (0,
|
|
15900
|
-
const [isSectionDragging, setIsSectionDragging] = (0,
|
|
15901
|
-
const sectionPointerDragRef = (0,
|
|
15902
|
-
const autoScrollRafRef = (0,
|
|
15903
|
-
const autoScrollDeltaRef = (0,
|
|
15904
|
-
const stopAutoScroll = (0,
|
|
16816
|
+
const sectionDragRef = (0, import_react17.useRef)(null);
|
|
16817
|
+
const [sectionDropSlots, setSectionDropSlots] = (0, import_react17.useState)([]);
|
|
16818
|
+
const [activeSectionDropIndex, setActiveSectionDropIndex] = (0, import_react17.useState)(null);
|
|
16819
|
+
const [isSectionDragging, setIsSectionDragging] = (0, import_react17.useState)(false);
|
|
16820
|
+
const sectionPointerDragRef = (0, import_react17.useRef)(null);
|
|
16821
|
+
const autoScrollRafRef = (0, import_react17.useRef)(null);
|
|
16822
|
+
const autoScrollDeltaRef = (0, import_react17.useRef)(0);
|
|
16823
|
+
const stopAutoScroll = (0, import_react17.useCallback)(() => {
|
|
15905
16824
|
if (autoScrollRafRef.current != null) {
|
|
15906
16825
|
cancelAnimationFrame(autoScrollRafRef.current);
|
|
15907
16826
|
autoScrollRafRef.current = null;
|
|
15908
16827
|
}
|
|
15909
16828
|
autoScrollDeltaRef.current = 0;
|
|
15910
16829
|
}, []);
|
|
15911
|
-
const tickAutoScroll = (0,
|
|
16830
|
+
const tickAutoScroll = (0, import_react17.useCallback)(() => {
|
|
15912
16831
|
if (!sectionDragRef.current) {
|
|
15913
16832
|
stopAutoScroll();
|
|
15914
16833
|
return;
|
|
@@ -15918,7 +16837,7 @@ function useSectionDrag({
|
|
|
15918
16837
|
}
|
|
15919
16838
|
autoScrollRafRef.current = requestAnimationFrame(tickAutoScroll);
|
|
15920
16839
|
}, [postToParentRef, stopAutoScroll]);
|
|
15921
|
-
const updateAutoScroll = (0,
|
|
16840
|
+
const updateAutoScroll = (0, import_react17.useCallback)(
|
|
15922
16841
|
(clientY) => {
|
|
15923
16842
|
const clip = visibleClip(parentScrollRef.current);
|
|
15924
16843
|
let delta = 0;
|
|
@@ -15940,7 +16859,7 @@ function useSectionDrag({
|
|
|
15940
16859
|
},
|
|
15941
16860
|
[parentScrollRef, stopAutoScroll, tickAutoScroll]
|
|
15942
16861
|
);
|
|
15943
|
-
const clearSectionDragVisuals = (0,
|
|
16862
|
+
const clearSectionDragVisuals = (0, import_react17.useCallback)(() => {
|
|
15944
16863
|
sectionDragRef.current?.draggedEl.removeAttribute("data-ohw-section-dragging");
|
|
15945
16864
|
sectionDragRef.current = null;
|
|
15946
16865
|
setSectionDropSlots([]);
|
|
@@ -15950,7 +16869,7 @@ function useSectionDrag({
|
|
|
15950
16869
|
document.documentElement.removeAttribute("data-ohw-section-dragging-root");
|
|
15951
16870
|
unlockItemDragInteraction();
|
|
15952
16871
|
}, [stopAutoScroll]);
|
|
15953
|
-
const refreshSectionDragVisuals = (0,
|
|
16872
|
+
const refreshSectionDragVisuals = (0, import_react17.useCallback)(
|
|
15954
16873
|
(session, clientX, clientY) => {
|
|
15955
16874
|
session.lastClientX = clientX;
|
|
15956
16875
|
session.lastClientY = clientY;
|
|
@@ -15964,7 +16883,7 @@ function useSectionDrag({
|
|
|
15964
16883
|
},
|
|
15965
16884
|
[updateAutoScroll]
|
|
15966
16885
|
);
|
|
15967
|
-
const beginSectionDrag = (0,
|
|
16886
|
+
const beginSectionDrag = (0, import_react17.useCallback)(
|
|
15968
16887
|
(session) => {
|
|
15969
16888
|
sectionDragRef.current = session;
|
|
15970
16889
|
setIsSectionDragging(true);
|
|
@@ -15975,7 +16894,7 @@ function useSectionDrag({
|
|
|
15975
16894
|
},
|
|
15976
16895
|
[refreshSectionDragVisuals]
|
|
15977
16896
|
);
|
|
15978
|
-
const commitSectionDrag = (0,
|
|
16897
|
+
const commitSectionDrag = (0, import_react17.useCallback)(() => {
|
|
15979
16898
|
const session = sectionDragRef.current;
|
|
15980
16899
|
if (!session) {
|
|
15981
16900
|
clearSectionDragVisuals();
|
|
@@ -16004,7 +16923,7 @@ function useSectionDrag({
|
|
|
16004
16923
|
});
|
|
16005
16924
|
});
|
|
16006
16925
|
}, [clearSectionDragVisuals, editContentRef, postToParentRef]);
|
|
16007
|
-
const startSectionPressDrag = (0,
|
|
16926
|
+
const startSectionPressDrag = (0, import_react17.useCallback)(
|
|
16008
16927
|
(el, clientX, clientY, pointerId) => {
|
|
16009
16928
|
if (navDragRef.current || footerDragRef.current || sectionDragRef.current) return false;
|
|
16010
16929
|
const instanceId = instanceIdOf(el);
|
|
@@ -16021,7 +16940,7 @@ function useSectionDrag({
|
|
|
16021
16940
|
},
|
|
16022
16941
|
[footerDragRef, navDragRef]
|
|
16023
16942
|
);
|
|
16024
|
-
(0,
|
|
16943
|
+
(0, import_react17.useEffect)(() => {
|
|
16025
16944
|
if (!isEditMode) return;
|
|
16026
16945
|
const onPointerDown = (e) => {
|
|
16027
16946
|
if (e.button !== 0) return;
|
|
@@ -16126,8 +17045,8 @@ function useSectionDrag({
|
|
|
16126
17045
|
}
|
|
16127
17046
|
|
|
16128
17047
|
// src/ui/footer-container-chrome.tsx
|
|
16129
|
-
var
|
|
16130
|
-
var
|
|
17048
|
+
var import_lucide_react17 = require("lucide-react");
|
|
17049
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
16131
17050
|
function FooterContainerChrome({
|
|
16132
17051
|
rect,
|
|
16133
17052
|
onAdd,
|
|
@@ -16135,7 +17054,7 @@ function FooterContainerChrome({
|
|
|
16135
17054
|
}) {
|
|
16136
17055
|
const chromeGap = 6;
|
|
16137
17056
|
const buttonMargin = 7;
|
|
16138
|
-
return /* @__PURE__ */ (0,
|
|
17057
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
16139
17058
|
"div",
|
|
16140
17059
|
{
|
|
16141
17060
|
"data-ohw-footer-container-chrome": "",
|
|
@@ -16147,8 +17066,8 @@ function FooterContainerChrome({
|
|
|
16147
17066
|
width: rect.width + chromeGap * 2,
|
|
16148
17067
|
height: rect.height + chromeGap * 2
|
|
16149
17068
|
},
|
|
16150
|
-
children: /* @__PURE__ */ (0,
|
|
16151
|
-
/* @__PURE__ */ (0,
|
|
17069
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Tooltip, { children: [
|
|
17070
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
16152
17071
|
"button",
|
|
16153
17072
|
{
|
|
16154
17073
|
type: "button",
|
|
@@ -16167,17 +17086,17 @@ function FooterContainerChrome({
|
|
|
16167
17086
|
if (addDisabled) return;
|
|
16168
17087
|
onAdd();
|
|
16169
17088
|
},
|
|
16170
|
-
children: /* @__PURE__ */ (0,
|
|
17089
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react17.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
16171
17090
|
}
|
|
16172
17091
|
) }),
|
|
16173
|
-
/* @__PURE__ */ (0,
|
|
17092
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipContent, { side: "bottom", sideOffset: 9, children: addDisabled ? "Maximum columns reached" : "Add item" })
|
|
16174
17093
|
] })
|
|
16175
17094
|
}
|
|
16176
17095
|
) });
|
|
16177
17096
|
}
|
|
16178
17097
|
|
|
16179
17098
|
// src/lib/carousel.ts
|
|
16180
|
-
var
|
|
17099
|
+
var import_react18 = require("react");
|
|
16181
17100
|
var CAROUSEL_ATTR = "data-ohw-carousel";
|
|
16182
17101
|
var CAROUSEL_VALUE_ATTR = "data-ohw-carousel-value";
|
|
16183
17102
|
var CAROUSEL_SLIDE_ATTR = "data-ohw-carousel-slide";
|
|
@@ -16239,8 +17158,8 @@ function applyCarouselNode(key, val) {
|
|
|
16239
17158
|
return true;
|
|
16240
17159
|
}
|
|
16241
17160
|
function useOhwCarousel(key, initial) {
|
|
16242
|
-
const [images, setImages] = (0,
|
|
16243
|
-
(0,
|
|
17161
|
+
const [images, setImages] = (0, import_react18.useState)(initial);
|
|
17162
|
+
(0, import_react18.useEffect)(() => {
|
|
16244
17163
|
const el = document.querySelector(
|
|
16245
17164
|
`[${CAROUSEL_ATTR}][data-ohw-key="${CSS.escape(key)}"]`
|
|
16246
17165
|
);
|
|
@@ -16652,14 +17571,14 @@ function deleteSelectedNavFooterItem(deps) {
|
|
|
16652
17571
|
}
|
|
16653
17572
|
|
|
16654
17573
|
// src/ui/navbar-container-chrome.tsx
|
|
16655
|
-
var
|
|
16656
|
-
var
|
|
17574
|
+
var import_lucide_react18 = require("lucide-react");
|
|
17575
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
16657
17576
|
function NavbarContainerChrome({
|
|
16658
17577
|
rect,
|
|
16659
17578
|
onAdd
|
|
16660
17579
|
}) {
|
|
16661
17580
|
const chromeGap = 6;
|
|
16662
|
-
return /* @__PURE__ */ (0,
|
|
17581
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
16663
17582
|
"div",
|
|
16664
17583
|
{
|
|
16665
17584
|
"data-ohw-navbar-container-chrome": "",
|
|
@@ -16671,7 +17590,7 @@ function NavbarContainerChrome({
|
|
|
16671
17590
|
width: rect.width + chromeGap * 2,
|
|
16672
17591
|
height: rect.height + chromeGap * 2
|
|
16673
17592
|
},
|
|
16674
|
-
children: /* @__PURE__ */ (0,
|
|
17593
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
16675
17594
|
"button",
|
|
16676
17595
|
{
|
|
16677
17596
|
type: "button",
|
|
@@ -16688,7 +17607,7 @@ function NavbarContainerChrome({
|
|
|
16688
17607
|
e.stopPropagation();
|
|
16689
17608
|
onAdd();
|
|
16690
17609
|
},
|
|
16691
|
-
children: /* @__PURE__ */ (0,
|
|
17610
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react18.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
16692
17611
|
}
|
|
16693
17612
|
)
|
|
16694
17613
|
}
|
|
@@ -16697,7 +17616,7 @@ function NavbarContainerChrome({
|
|
|
16697
17616
|
|
|
16698
17617
|
// src/ui/drop-indicator.tsx
|
|
16699
17618
|
var React11 = __toESM(require("react"), 1);
|
|
16700
|
-
var
|
|
17619
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
16701
17620
|
var dropIndicatorVariants = cva(
|
|
16702
17621
|
"ov-gap-line pointer-events-none shrink-0 transition-opacity duration-150",
|
|
16703
17622
|
{
|
|
@@ -16721,7 +17640,7 @@ var dropIndicatorVariants = cva(
|
|
|
16721
17640
|
);
|
|
16722
17641
|
var DropIndicator = React11.forwardRef(
|
|
16723
17642
|
({ className, direction, state, ...props }, ref) => {
|
|
16724
|
-
return /* @__PURE__ */ (0,
|
|
17643
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
16725
17644
|
"div",
|
|
16726
17645
|
{
|
|
16727
17646
|
ref,
|
|
@@ -16738,7 +17657,7 @@ var DropIndicator = React11.forwardRef(
|
|
|
16738
17657
|
DropIndicator.displayName = "DropIndicator";
|
|
16739
17658
|
|
|
16740
17659
|
// src/ui/badge.tsx
|
|
16741
|
-
var
|
|
17660
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
16742
17661
|
var badgeVariants = cva(
|
|
16743
17662
|
"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",
|
|
16744
17663
|
{
|
|
@@ -16756,13 +17675,13 @@ var badgeVariants = cva(
|
|
|
16756
17675
|
}
|
|
16757
17676
|
);
|
|
16758
17677
|
function Badge({ className, variant, ...props }) {
|
|
16759
|
-
return /* @__PURE__ */ (0,
|
|
17678
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
|
|
16760
17679
|
}
|
|
16761
17680
|
|
|
16762
17681
|
// src/OhhwellsBridge.tsx
|
|
16763
|
-
var
|
|
16764
|
-
var
|
|
16765
|
-
var
|
|
17682
|
+
var import_lucide_react19 = require("lucide-react");
|
|
17683
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
17684
|
+
var PRIMARY5 = "#0885FE";
|
|
16766
17685
|
var IMAGE_FADE_MS = 300;
|
|
16767
17686
|
var MEDIA_SETTLE_TIMEOUT_MS = 2500;
|
|
16768
17687
|
function runOpacityFade(el, onDone) {
|
|
@@ -16883,7 +17802,7 @@ function duplicateSchedulingWidget(instanceId, scheduleId) {
|
|
|
16883
17802
|
schedulingRoots.set(container, root);
|
|
16884
17803
|
(0, import_react_dom4.flushSync)(() => {
|
|
16885
17804
|
root.render(
|
|
16886
|
-
/* @__PURE__ */ (0,
|
|
17805
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
16887
17806
|
SchedulingWidget,
|
|
16888
17807
|
{
|
|
16889
17808
|
notifyOnConnect: false,
|
|
@@ -17021,7 +17940,7 @@ function mountSchedulingWidget(insertAfter, notifyOnConnect = false, scheduleId,
|
|
|
17021
17940
|
schedulingRoots.set(container, root);
|
|
17022
17941
|
(0, import_react_dom4.flushSync)(() => {
|
|
17023
17942
|
root.render(
|
|
17024
|
-
/* @__PURE__ */ (0,
|
|
17943
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
17025
17944
|
SchedulingWidget,
|
|
17026
17945
|
{
|
|
17027
17946
|
notifyOnConnect,
|
|
@@ -17741,7 +18660,7 @@ var TOOLBAR_STROKE_GAP2 = 4;
|
|
|
17741
18660
|
var TOOLBAR_OFFSET_FROM_ELEMENT = SELECTION_CHROME_GAP2 + TOOLBAR_STROKE_GAP2;
|
|
17742
18661
|
var HOVER_STROKE_WIDTH = 1.5;
|
|
17743
18662
|
var TEXT_HOVER_SIDE_PAD = 4;
|
|
17744
|
-
var CHROME_PRIMARY = `var(--ohw-primary, ${
|
|
18663
|
+
var CHROME_PRIMARY = `var(--ohw-primary, ${PRIMARY5})`;
|
|
17745
18664
|
var TOOLBAR_GROUPS = [
|
|
17746
18665
|
[
|
|
17747
18666
|
{ cmd: "bold", title: "Bold" },
|
|
@@ -17767,7 +18686,7 @@ function EditGlowChrome({
|
|
|
17767
18686
|
hideHandle = false
|
|
17768
18687
|
}) {
|
|
17769
18688
|
const GAP = SELECTION_CHROME_GAP2;
|
|
17770
|
-
return /* @__PURE__ */ (0,
|
|
18689
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
17771
18690
|
"div",
|
|
17772
18691
|
{
|
|
17773
18692
|
ref: elRef,
|
|
@@ -17782,7 +18701,7 @@ function EditGlowChrome({
|
|
|
17782
18701
|
zIndex: 2147483646
|
|
17783
18702
|
},
|
|
17784
18703
|
children: [
|
|
17785
|
-
/* @__PURE__ */ (0,
|
|
18704
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
17786
18705
|
"div",
|
|
17787
18706
|
{
|
|
17788
18707
|
style: {
|
|
@@ -17796,7 +18715,7 @@ function EditGlowChrome({
|
|
|
17796
18715
|
}
|
|
17797
18716
|
}
|
|
17798
18717
|
),
|
|
17799
|
-
reorderHrefKey && !hideHandle && /* @__PURE__ */ (0,
|
|
18718
|
+
reorderHrefKey && !hideHandle && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
17800
18719
|
"div",
|
|
17801
18720
|
{
|
|
17802
18721
|
"data-ohw-drag-handle-container": "",
|
|
@@ -17808,7 +18727,7 @@ function EditGlowChrome({
|
|
|
17808
18727
|
transform: "translate(calc(-100% - 7px), -50%)",
|
|
17809
18728
|
pointerEvents: dragDisabled ? "none" : "auto"
|
|
17810
18729
|
},
|
|
17811
|
-
children: /* @__PURE__ */ (0,
|
|
18730
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
17812
18731
|
DragHandle,
|
|
17813
18732
|
{
|
|
17814
18733
|
"aria-label": `Reorder ${reorderHrefKey}`,
|
|
@@ -17995,9 +18914,9 @@ function FloatingToolbar({
|
|
|
17995
18914
|
showEditLink,
|
|
17996
18915
|
onEditLink
|
|
17997
18916
|
}) {
|
|
17998
|
-
const localRef =
|
|
17999
|
-
const [measuredW, setMeasuredW] =
|
|
18000
|
-
const setRefs =
|
|
18917
|
+
const localRef = import_react19.default.useRef(null);
|
|
18918
|
+
const [measuredW, setMeasuredW] = import_react19.default.useState(330);
|
|
18919
|
+
const setRefs = import_react19.default.useCallback(
|
|
18001
18920
|
(node) => {
|
|
18002
18921
|
localRef.current = node;
|
|
18003
18922
|
if (typeof elRef === "function") elRef(node);
|
|
@@ -18009,7 +18928,7 @@ function FloatingToolbar({
|
|
|
18009
18928
|
},
|
|
18010
18929
|
[elRef]
|
|
18011
18930
|
);
|
|
18012
|
-
|
|
18931
|
+
import_react19.default.useLayoutEffect(() => {
|
|
18013
18932
|
const node = localRef.current;
|
|
18014
18933
|
if (!node) return;
|
|
18015
18934
|
const update = () => {
|
|
@@ -18022,7 +18941,7 @@ function FloatingToolbar({
|
|
|
18022
18941
|
return () => ro.disconnect();
|
|
18023
18942
|
}, [showEditLink, activeCommands]);
|
|
18024
18943
|
const { top, left, transform } = calcToolbarPos(rect, parentScroll, measuredW);
|
|
18025
|
-
return /* @__PURE__ */ (0,
|
|
18944
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
18026
18945
|
"div",
|
|
18027
18946
|
{
|
|
18028
18947
|
ref: setRefs,
|
|
@@ -18034,12 +18953,12 @@ function FloatingToolbar({
|
|
|
18034
18953
|
zIndex: 2147483647,
|
|
18035
18954
|
pointerEvents: "auto"
|
|
18036
18955
|
},
|
|
18037
|
-
children: /* @__PURE__ */ (0,
|
|
18038
|
-
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0,
|
|
18039
|
-
gi > 0 && /* @__PURE__ */ (0,
|
|
18956
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(CustomToolbar, { children: [
|
|
18957
|
+
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react19.default.Fragment, { children: [
|
|
18958
|
+
gi > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CustomToolbarDivider, {}),
|
|
18040
18959
|
btns.map((btn) => {
|
|
18041
18960
|
const isActive = activeCommands.has(btn.cmd);
|
|
18042
|
-
return /* @__PURE__ */ (0,
|
|
18961
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
18043
18962
|
CustomToolbarButton,
|
|
18044
18963
|
{
|
|
18045
18964
|
title: btn.title,
|
|
@@ -18048,7 +18967,7 @@ function FloatingToolbar({
|
|
|
18048
18967
|
e.preventDefault();
|
|
18049
18968
|
onCommand(btn.cmd);
|
|
18050
18969
|
},
|
|
18051
|
-
children: /* @__PURE__ */ (0,
|
|
18970
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
18052
18971
|
"svg",
|
|
18053
18972
|
{
|
|
18054
18973
|
width: "16",
|
|
@@ -18069,7 +18988,7 @@ function FloatingToolbar({
|
|
|
18069
18988
|
);
|
|
18070
18989
|
})
|
|
18071
18990
|
] }, gi)),
|
|
18072
|
-
showEditLink ? /* @__PURE__ */ (0,
|
|
18991
|
+
showEditLink ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
18073
18992
|
CustomToolbarButton,
|
|
18074
18993
|
{
|
|
18075
18994
|
type: "button",
|
|
@@ -18083,7 +19002,7 @@ function FloatingToolbar({
|
|
|
18083
19002
|
e.preventDefault();
|
|
18084
19003
|
e.stopPropagation();
|
|
18085
19004
|
},
|
|
18086
|
-
children: /* @__PURE__ */ (0,
|
|
19005
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react19.Link, { className: "size-4 shrink-0", "aria-hidden": true })
|
|
18087
19006
|
}
|
|
18088
19007
|
) : null
|
|
18089
19008
|
] })
|
|
@@ -18100,7 +19019,7 @@ function StateToggle({
|
|
|
18100
19019
|
states,
|
|
18101
19020
|
onStateChange
|
|
18102
19021
|
}) {
|
|
18103
|
-
return /* @__PURE__ */ (0,
|
|
19022
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
18104
19023
|
ToggleGroup,
|
|
18105
19024
|
{
|
|
18106
19025
|
"data-ohw-state-toggle": "",
|
|
@@ -18114,7 +19033,7 @@ function StateToggle({
|
|
|
18114
19033
|
left: rect.right - 8,
|
|
18115
19034
|
transform: "translateX(-100%)"
|
|
18116
19035
|
},
|
|
18117
|
-
children: states.map((state) => /* @__PURE__ */ (0,
|
|
19036
|
+
children: states.map((state) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
|
|
18118
19037
|
}
|
|
18119
19038
|
);
|
|
18120
19039
|
}
|
|
@@ -18130,9 +19049,9 @@ var OHW_LOADER_STYLE = {
|
|
|
18130
19049
|
justifyContent: "center"
|
|
18131
19050
|
};
|
|
18132
19051
|
function OhwLoaderSpinner() {
|
|
18133
|
-
return /* @__PURE__ */ (0,
|
|
18134
|
-
/* @__PURE__ */ (0,
|
|
18135
|
-
/* @__PURE__ */ (0,
|
|
19052
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("svg", { width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", "aria-hidden": true, children: [
|
|
19053
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("circle", { cx: "14", cy: "14", r: "11", stroke: "#E7E5E4", strokeWidth: "3" }),
|
|
19054
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
18136
19055
|
"circle",
|
|
18137
19056
|
{
|
|
18138
19057
|
cx: "14",
|
|
@@ -18142,7 +19061,7 @@ function OhwLoaderSpinner() {
|
|
|
18142
19061
|
strokeWidth: "3",
|
|
18143
19062
|
strokeDasharray: "17 52",
|
|
18144
19063
|
strokeLinecap: "round",
|
|
18145
|
-
children: /* @__PURE__ */ (0,
|
|
19064
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
18146
19065
|
"animateTransform",
|
|
18147
19066
|
{
|
|
18148
19067
|
attributeName: "transform",
|
|
@@ -18158,7 +19077,7 @@ function OhwLoaderSpinner() {
|
|
|
18158
19077
|
] });
|
|
18159
19078
|
}
|
|
18160
19079
|
function OhwBrandMark() {
|
|
18161
|
-
return /* @__PURE__ */ (0,
|
|
19080
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
18162
19081
|
"svg",
|
|
18163
19082
|
{
|
|
18164
19083
|
width: "16",
|
|
@@ -18169,7 +19088,7 @@ function OhwBrandMark() {
|
|
|
18169
19088
|
style: { display: "block", flexShrink: 0 },
|
|
18170
19089
|
xmlns: "http://www.w3.org/2000/svg",
|
|
18171
19090
|
children: [
|
|
18172
|
-
/* @__PURE__ */ (0,
|
|
19091
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
18173
19092
|
"mask",
|
|
18174
19093
|
{
|
|
18175
19094
|
id: "ohw-badge-mark",
|
|
@@ -18179,15 +19098,15 @@ function OhwBrandMark() {
|
|
|
18179
19098
|
y: "0",
|
|
18180
19099
|
width: "48",
|
|
18181
19100
|
height: "48",
|
|
18182
|
-
children: /* @__PURE__ */ (0,
|
|
19101
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { d: "M23.8741 48C37.0594 48 47.7481 37.2548 47.7481 24C47.7481 10.7452 37.0594 0 23.8741 0C10.6888 0 0 10.7452 0 24C0 37.2548 10.6888 48 23.8741 48Z", fill: "white" })
|
|
18183
19102
|
}
|
|
18184
19103
|
),
|
|
18185
|
-
/* @__PURE__ */ (0,
|
|
18186
|
-
/* @__PURE__ */ (0,
|
|
18187
|
-
/* @__PURE__ */ (0,
|
|
18188
|
-
/* @__PURE__ */ (0,
|
|
18189
|
-
/* @__PURE__ */ (0,
|
|
18190
|
-
/* @__PURE__ */ (0,
|
|
19104
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("g", { mask: "url(#ohw-badge-mark)", children: [
|
|
19105
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { d: "M23.8731 48.0497C37.0584 48.0497 47.7472 37.3046 47.7472 24.0497C47.7472 10.7949 37.0584 0.0497208 23.8731 0.0497208C10.6878 0.0497208 -0.000976562 10.7949 -0.000976562 24.0497C-0.000976562 37.3046 10.6878 48.0497 23.8731 48.0497Z", fill: "#0078E5" }),
|
|
19106
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { d: "M17.1307 14.7172C13.1687 14.7172 9.38102 18.1154 8.65114 22.34C8.38885 23.8488 8.5598 25.2581 9.06929 26.4451C6.20005 29.1677 1.77216 27.8721 -1.40212 26.1536C-2.73618 25.4317 -3.92695 27.4745 -2.59037 28.1981C1.33389 30.3226 6.86037 31.6621 10.4402 28.4188C11.4718 29.3859 12.867 29.9621 14.4894 29.9621C18.4161 29.9621 22.2038 26.5318 22.9337 22.34C23.6636 18.1162 21.0566 14.7172 17.1298 14.7172H17.1307ZM19.9798 22.34C19.5281 25.0399 17.2689 27.231 14.9754 27.231C12.6466 27.231 11.1877 25.0399 11.6394 22.34C12.1262 19.6401 14.3151 17.4482 16.6438 17.4482C18.9374 17.4482 20.4667 19.6401 19.9798 22.34Z", fill: "white" }),
|
|
19107
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { d: "M40.0017 27.0262C39.1797 27.081 38.2721 26.995 37.4668 26.7415C37.3344 26.6993 37.28 26.5401 37.3529 26.4205C37.5959 26.0212 37.8255 25.6152 38.009 25.1889C38.1071 24.9918 38.2018 24.793 38.2897 24.5908C38.3274 24.5041 38.4163 24.451 38.5101 24.4619C38.63 24.4754 38.7054 24.4821 38.8881 24.4821L39.1529 24.4796L39.8283 24.4543C45.9229 24.0492 50.4765 20.4319 54.8466 16.9014C56.0172 15.9554 57.6932 17.6208 56.5116 18.5752C51.7687 22.4065 47.1966 26.5081 40.9319 26.9689", fill: "white" }),
|
|
19108
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { d: "M37.9687 24.27C38.4472 23.1319 38.7656 21.9045 38.9609 20.6991C39.5927 16.76 38.5058 14.2193 36.1553 14.2193C34.1835 14.2193 33.1469 17.2427 32.9199 18.8694C32.743 19.9872 32.5914 22.1219 33.6028 23.9524C33.7553 24.259 34.15 24.7712 34.471 25.1259C34.5447 25.2067 34.6746 25.2 34.7349 25.1082C34.9528 24.7788 35.1615 24.4039 35.3584 24.0257C35.5444 23.6677 35.5888 23.6138 35.8587 23.0207C35.8838 22.966 35.8813 22.9002 35.8478 22.8505C35.5888 22.4597 35.2168 21.9787 35.1204 21.4614C34.9184 20.4455 34.9436 19.2257 35.2218 18.1078C35.4413 17.3118 35.7195 16.7844 35.9039 16.5106C35.9466 16.4466 36.0279 16.4129 36.0975 16.4449C36.369 16.5671 36.5827 16.8838 36.7385 17.396C37.0167 18.2089 37.0167 19.3782 36.814 20.6999C36.6991 21.5271 36.4771 22.3729 36.1746 23.1673C36.1293 23.308 36.0757 23.4461 36.0187 23.5826C36.0187 23.5868 36.0187 23.591 36.0187 23.5961C35.9911 23.6946 35.9207 23.8067 35.8846 23.901C35.5536 24.5497 35.2344 25.1697 34.8439 25.7838C34.8388 25.7863 34.8346 25.7914 34.8296 25.7931C34.6528 26.0525 34.4718 26.2901 34.2866 26.4965C34.2774 26.5099 34.2682 26.5234 34.2589 26.5369C34.2405 26.5638 34.2179 26.5815 34.1944 26.595C33.5064 27.3212 32.7665 27.6893 32.0123 27.6893C31.8606 27.6893 31.6838 27.664 31.507 27.4349C31.3042 27.1299 30.85 26.0879 31.2539 22.9112C31.4785 21.3949 31.8011 20.0268 31.931 19.5408C31.9579 19.4413 31.8908 19.3419 31.7886 19.3293L30.0062 19.1162C29.9241 19.1061 29.8478 19.1566 29.8252 19.2366C29.2704 21.1615 27.0305 27.6885 24.9599 27.6885C24.328 27.6885 24.1512 26.6211 24.1001 26.2909C23.775 23.6264 25.528 18.5492 29.5302 16.2267C29.6048 16.1838 29.635 16.0928 29.5998 16.0136L28.9042 14.467C28.8632 14.3752 28.7501 14.3389 28.6638 14.3886C25.8079 16.0414 24.1847 18.5231 23.2915 20.3436C22.2046 22.5793 21.6993 25.0189 21.9515 26.8738C22.1795 28.7794 23.1398 29.872 24.6054 29.872C26.0543 29.872 27.4369 28.9066 28.7098 27.0187C28.7953 26.8915 28.9889 26.9311 29.0149 27.0819C29.2646 28.5283 29.9811 29.872 31.6579 29.872C33.5282 29.872 35.3232 28.7288 36.7134 26.6447C36.7712 26.5874 36.7972 26.5411 36.8181 26.4906C36.8232 26.4931 36.8282 26.4948 36.8332 26.4973C37.01 26.2025 37.181 25.9051 37.3444 25.6027C37.4508 25.4005 37.5572 25.1992 37.6586 24.9945C37.7181 24.874 37.7743 24.7527 37.8262 24.6289C37.838 24.6002 37.8547 24.5665 37.8706 24.5337", fill: "white" }),
|
|
19109
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { d: "M30.5839 31.6397C25.7546 34.8577 19.4773 34.7853 14.6907 31.5243C13.5368 30.7384 12.5044 32.6498 13.6474 33.4281C19.034 37.0985 26.3077 37.096 31.7218 33.488C32.8791 32.7172 31.7478 30.8639 30.5839 31.6397Z", fill: "white" })
|
|
18191
19110
|
] })
|
|
18192
19111
|
]
|
|
18193
19112
|
}
|
|
@@ -18224,7 +19143,7 @@ var OHW_BADGE_LABEL_STYLE = {
|
|
|
18224
19143
|
whiteSpace: "nowrap"
|
|
18225
19144
|
};
|
|
18226
19145
|
function MadeWithOhhWells() {
|
|
18227
|
-
return /* @__PURE__ */ (0,
|
|
19146
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
18228
19147
|
"a",
|
|
18229
19148
|
{
|
|
18230
19149
|
href: "https://ohhwells.com",
|
|
@@ -18234,8 +19153,8 @@ function MadeWithOhhWells() {
|
|
|
18234
19153
|
"data-ohw-badge": "",
|
|
18235
19154
|
style: OHW_BADGE_STYLE,
|
|
18236
19155
|
children: [
|
|
18237
|
-
/* @__PURE__ */ (0,
|
|
18238
|
-
/* @__PURE__ */ (0,
|
|
19156
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(OhwBrandMark, {}),
|
|
19157
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { style: OHW_BADGE_LABEL_STYLE, children: "Made with OhhWells" })
|
|
18239
19158
|
]
|
|
18240
19159
|
}
|
|
18241
19160
|
);
|
|
@@ -18281,8 +19200,8 @@ function OhhwellsBridge() {
|
|
|
18281
19200
|
const router = (0, import_navigation3.useRouter)();
|
|
18282
19201
|
const searchParams = (0, import_navigation3.useSearchParams)();
|
|
18283
19202
|
const isEditMode = isEditSessionActive();
|
|
18284
|
-
const [bridgeRoot, setBridgeRoot] = (0,
|
|
18285
|
-
(0,
|
|
19203
|
+
const [bridgeRoot, setBridgeRoot] = (0, import_react19.useState)(null);
|
|
19204
|
+
(0, import_react19.useEffect)(() => {
|
|
18286
19205
|
const figtreeFontId = "ohw-figtree-font";
|
|
18287
19206
|
if (!document.getElementById(figtreeFontId)) {
|
|
18288
19207
|
const preconnect1 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.googleapis.com" });
|
|
@@ -18308,8 +19227,8 @@ function OhhwellsBridge() {
|
|
|
18308
19227
|
};
|
|
18309
19228
|
}, []);
|
|
18310
19229
|
const subdomainFromQuery = searchParams.get("subdomain");
|
|
18311
|
-
const [subdomain, setSubdomain] = (0,
|
|
18312
|
-
(0,
|
|
19230
|
+
const [subdomain, setSubdomain] = (0, import_react19.useState)(() => resolveSubdomain(subdomainFromQuery));
|
|
19231
|
+
(0, import_react19.useLayoutEffect)(() => {
|
|
18313
19232
|
const next = resolveSubdomain(subdomainFromQuery);
|
|
18314
19233
|
if (next !== subdomain) setSubdomain(next);
|
|
18315
19234
|
if (next) return;
|
|
@@ -18321,7 +19240,7 @@ function OhhwellsBridge() {
|
|
|
18321
19240
|
}, 0);
|
|
18322
19241
|
return () => window.clearTimeout(t);
|
|
18323
19242
|
}, [subdomainFromQuery, subdomain]);
|
|
18324
|
-
(0,
|
|
19243
|
+
(0, import_react19.useEffect)(() => {
|
|
18325
19244
|
if (!subdomainFromQuery || typeof window === "undefined") return;
|
|
18326
19245
|
const url = new URL(window.location.href);
|
|
18327
19246
|
if (!url.searchParams.has("subdomain")) return;
|
|
@@ -18330,45 +19249,45 @@ function OhhwellsBridge() {
|
|
|
18330
19249
|
}, [subdomainFromQuery]);
|
|
18331
19250
|
useLinkHrefGuardian(pathname, subdomain, isEditMode);
|
|
18332
19251
|
useSavedLinkNavigation(isEditMode);
|
|
18333
|
-
const postToParent2 = (0,
|
|
19252
|
+
const postToParent2 = (0, import_react19.useCallback)((data) => {
|
|
18334
19253
|
if (typeof window !== "undefined" && window.parent !== window) {
|
|
18335
19254
|
window.parent.postMessage(data, "*");
|
|
18336
19255
|
}
|
|
18337
19256
|
}, []);
|
|
18338
|
-
const [fetchState, setFetchState] = (0,
|
|
18339
|
-
const [showBranding, setShowBranding] = (0,
|
|
18340
|
-
const autoSaveTimers = (0,
|
|
18341
|
-
const activeElRef = (0,
|
|
18342
|
-
const pointerHeldRef = (0,
|
|
18343
|
-
const selectedElRef = (0,
|
|
18344
|
-
const selectedHrefKeyRef = (0,
|
|
18345
|
-
const selectedFooterColAttrRef = (0,
|
|
18346
|
-
const originalContentRef = (0,
|
|
18347
|
-
const activeStateElRef = (0,
|
|
18348
|
-
const parentScrollRef = (0,
|
|
18349
|
-
const visibleViewportRef = (0,
|
|
18350
|
-
const [dialogPortalContainer, setDialogPortalContainer] = (0,
|
|
18351
|
-
const attachVisibleViewport = (0,
|
|
19257
|
+
const [fetchState, setFetchState] = (0, import_react19.useState)("idle");
|
|
19258
|
+
const [showBranding, setShowBranding] = (0, import_react19.useState)(false);
|
|
19259
|
+
const autoSaveTimers = (0, import_react19.useRef)(/* @__PURE__ */ new Map());
|
|
19260
|
+
const activeElRef = (0, import_react19.useRef)(null);
|
|
19261
|
+
const pointerHeldRef = (0, import_react19.useRef)(false);
|
|
19262
|
+
const selectedElRef = (0, import_react19.useRef)(null);
|
|
19263
|
+
const selectedHrefKeyRef = (0, import_react19.useRef)(null);
|
|
19264
|
+
const selectedFooterColAttrRef = (0, import_react19.useRef)(null);
|
|
19265
|
+
const originalContentRef = (0, import_react19.useRef)(null);
|
|
19266
|
+
const activeStateElRef = (0, import_react19.useRef)(null);
|
|
19267
|
+
const parentScrollRef = (0, import_react19.useRef)(null);
|
|
19268
|
+
const visibleViewportRef = (0, import_react19.useRef)(null);
|
|
19269
|
+
const [dialogPortalContainer, setDialogPortalContainer] = (0, import_react19.useState)(null);
|
|
19270
|
+
const attachVisibleViewport = (0, import_react19.useCallback)((node) => {
|
|
18352
19271
|
visibleViewportRef.current = node;
|
|
18353
19272
|
setDialogPortalContainer(node);
|
|
18354
19273
|
if (node) applyVisibleViewport(node, parentScrollRef.current);
|
|
18355
19274
|
}, []);
|
|
18356
|
-
const toolbarElRef = (0,
|
|
18357
|
-
const glowElRef = (0,
|
|
18358
|
-
const hoveredImageRef = (0,
|
|
18359
|
-
const hoveredImageHasTextOverlapRef = (0,
|
|
18360
|
-
const dragOverElRef = (0,
|
|
18361
|
-
const [mediaHover, setMediaHover] = (0,
|
|
18362
|
-
const [selectedAiSectionId, setSelectedAiSectionId] = (0,
|
|
18363
|
-
const selectedAiSectionIdRef = (0,
|
|
18364
|
-
const handleAiSectionSelectionChange = (0,
|
|
19275
|
+
const toolbarElRef = (0, import_react19.useRef)(null);
|
|
19276
|
+
const glowElRef = (0, import_react19.useRef)(null);
|
|
19277
|
+
const hoveredImageRef = (0, import_react19.useRef)(null);
|
|
19278
|
+
const hoveredImageHasTextOverlapRef = (0, import_react19.useRef)(false);
|
|
19279
|
+
const dragOverElRef = (0, import_react19.useRef)(null);
|
|
19280
|
+
const [mediaHover, setMediaHover] = (0, import_react19.useState)(null);
|
|
19281
|
+
const [selectedAiSectionId, setSelectedAiSectionId] = (0, import_react19.useState)(null);
|
|
19282
|
+
const selectedAiSectionIdRef = (0, import_react19.useRef)(null);
|
|
19283
|
+
const handleAiSectionSelectionChange = (0, import_react19.useCallback)((id) => {
|
|
18365
19284
|
selectedAiSectionIdRef.current = id;
|
|
18366
19285
|
setSelectedAiSectionId(id);
|
|
18367
19286
|
}, []);
|
|
18368
|
-
const [selectedMedia, setSelectedMedia] = (0,
|
|
18369
|
-
const selectedMediaElRef = (0,
|
|
18370
|
-
const mediaKeyDropTokenRef = (0,
|
|
18371
|
-
const clearMediaSelection = (0,
|
|
19287
|
+
const [selectedMedia, setSelectedMedia] = (0, import_react19.useState)(null);
|
|
19288
|
+
const selectedMediaElRef = (0, import_react19.useRef)(null);
|
|
19289
|
+
const mediaKeyDropTokenRef = (0, import_react19.useRef)(0);
|
|
19290
|
+
const clearMediaSelection = (0, import_react19.useCallback)(() => {
|
|
18372
19291
|
const prev = selectedMediaElRef.current;
|
|
18373
19292
|
selectedMediaElRef.current = null;
|
|
18374
19293
|
setSelectedMedia(null);
|
|
@@ -18393,9 +19312,9 @@ function OhhwellsBridge() {
|
|
|
18393
19312
|
window.postMessage({ type: "ow:media-key-drop", token }, "*");
|
|
18394
19313
|
}
|
|
18395
19314
|
}, []);
|
|
18396
|
-
const clearMediaSelectionRef = (0,
|
|
19315
|
+
const clearMediaSelectionRef = (0, import_react19.useRef)(clearMediaSelection);
|
|
18397
19316
|
clearMediaSelectionRef.current = clearMediaSelection;
|
|
18398
|
-
const selectMediaElement = (0,
|
|
19317
|
+
const selectMediaElement = (0, import_react19.useCallback)((el) => {
|
|
18399
19318
|
const r2 = el.getBoundingClientRect();
|
|
18400
19319
|
const video = el.dataset.ohwEditable === "video" ? el.querySelector("video") : null;
|
|
18401
19320
|
selectedMediaElRef.current = el;
|
|
@@ -18419,9 +19338,9 @@ function OhhwellsBridge() {
|
|
|
18419
19338
|
keyLabel: el.dataset.ohwEditable === "video" ? "Video" : el.dataset.ohwEditable === "bg-image" ? "Background" : "Image"
|
|
18420
19339
|
});
|
|
18421
19340
|
}, []);
|
|
18422
|
-
const selectMediaElementRef = (0,
|
|
19341
|
+
const selectMediaElementRef = (0, import_react19.useRef)(selectMediaElement);
|
|
18423
19342
|
selectMediaElementRef.current = selectMediaElement;
|
|
18424
|
-
(0,
|
|
19343
|
+
(0, import_react19.useEffect)(() => {
|
|
18425
19344
|
if (!selectedMedia) return;
|
|
18426
19345
|
const update = () => {
|
|
18427
19346
|
const el = selectedMediaElRef.current;
|
|
@@ -18441,55 +19360,54 @@ function OhhwellsBridge() {
|
|
|
18441
19360
|
window.removeEventListener("resize", update);
|
|
18442
19361
|
};
|
|
18443
19362
|
}, [selectedMedia !== null]);
|
|
18444
|
-
const [carouselHover, setCarouselHover] = (0,
|
|
18445
|
-
const [uploadingRects, setUploadingRects] = (0,
|
|
18446
|
-
const hoveredGapRef = (0,
|
|
18447
|
-
const imageUnhoverTimerRef = (0,
|
|
18448
|
-
const imageShowTimerRef = (0,
|
|
18449
|
-
const editStylesRef = (0,
|
|
18450
|
-
const activateRef = (0,
|
|
19363
|
+
const [carouselHover, setCarouselHover] = (0, import_react19.useState)(null);
|
|
19364
|
+
const [uploadingRects, setUploadingRects] = (0, import_react19.useState)({});
|
|
19365
|
+
const hoveredGapRef = (0, import_react19.useRef)(null);
|
|
19366
|
+
const imageUnhoverTimerRef = (0, import_react19.useRef)(null);
|
|
19367
|
+
const imageShowTimerRef = (0, import_react19.useRef)(null);
|
|
19368
|
+
const editStylesRef = (0, import_react19.useRef)(null);
|
|
19369
|
+
const activateRef = (0, import_react19.useRef)(() => {
|
|
18451
19370
|
});
|
|
18452
|
-
const deactivateRef = (0,
|
|
19371
|
+
const deactivateRef = (0, import_react19.useRef)(() => {
|
|
18453
19372
|
});
|
|
18454
|
-
const selectRef = (0,
|
|
19373
|
+
const selectRef = (0, import_react19.useRef)(() => {
|
|
18455
19374
|
});
|
|
18456
|
-
const selectFrameRef = (0,
|
|
19375
|
+
const selectFrameRef = (0, import_react19.useRef)(() => {
|
|
18457
19376
|
});
|
|
18458
|
-
const selectLogoRef = (0,
|
|
19377
|
+
const selectLogoRef = (0, import_react19.useRef)(() => {
|
|
18459
19378
|
});
|
|
18460
|
-
const openLogoSizePanelRef = (0,
|
|
19379
|
+
const openLogoSizePanelRef = (0, import_react19.useRef)(() => {
|
|
18461
19380
|
});
|
|
18462
|
-
const deselectRef = (0,
|
|
19381
|
+
const deselectRef = (0, import_react19.useRef)(() => {
|
|
18463
19382
|
});
|
|
18464
|
-
const closeFloatingPanelOnlyRef = (0,
|
|
19383
|
+
const closeFloatingPanelOnlyRef = (0, import_react19.useRef)(() => {
|
|
18465
19384
|
});
|
|
18466
|
-
const reselectNavigationItemRef = (0,
|
|
19385
|
+
const reselectNavigationItemRef = (0, import_react19.useRef)(() => {
|
|
18467
19386
|
});
|
|
18468
|
-
const commitNavigationTextEditRef = (0,
|
|
19387
|
+
const commitNavigationTextEditRef = (0, import_react19.useRef)(() => {
|
|
18469
19388
|
});
|
|
18470
|
-
const handleDeleteSelectedRef = (0,
|
|
18471
|
-
const runPendingDeleteUndoRef = (0,
|
|
18472
|
-
const isFooterFrameSelectionRef = (0,
|
|
18473
|
-
const refreshActiveCommandsRef = (0,
|
|
19389
|
+
const handleDeleteSelectedRef = (0, import_react19.useRef)(() => false);
|
|
19390
|
+
const runPendingDeleteUndoRef = (0, import_react19.useRef)(() => false);
|
|
19391
|
+
const isFooterFrameSelectionRef = (0, import_react19.useRef)(false);
|
|
19392
|
+
const refreshActiveCommandsRef = (0, import_react19.useRef)(() => {
|
|
18474
19393
|
});
|
|
18475
|
-
const postToParentRef = (0,
|
|
19394
|
+
const postToParentRef = (0, import_react19.useRef)(postToParent2);
|
|
18476
19395
|
postToParentRef.current = postToParent2;
|
|
18477
|
-
const aiSectionApiRef = (0,
|
|
18478
|
-
const
|
|
18479
|
-
const
|
|
18480
|
-
const
|
|
18481
|
-
const [
|
|
18482
|
-
const
|
|
18483
|
-
const
|
|
18484
|
-
const [
|
|
18485
|
-
const [
|
|
18486
|
-
const
|
|
18487
|
-
const
|
|
18488
|
-
const
|
|
18489
|
-
const
|
|
18490
|
-
const [
|
|
18491
|
-
const
|
|
18492
|
-
const clearFormPick = (0, import_react18.useCallback)(() => {
|
|
19396
|
+
const aiSectionApiRef = (0, import_react19.useRef)(null);
|
|
19397
|
+
const sectionsLoadedRef = (0, import_react19.useRef)(false);
|
|
19398
|
+
const pendingScheduleConfigRequests = (0, import_react19.useRef)([]);
|
|
19399
|
+
const [toolbarRect, setToolbarRect] = (0, import_react19.useState)(null);
|
|
19400
|
+
const [formPickRect, setFormPickRect] = (0, import_react19.useState)(null);
|
|
19401
|
+
const formPickElRef = (0, import_react19.useRef)(null);
|
|
19402
|
+
const [formViewState, setFormViewStateUi] = (0, import_react19.useState)("default");
|
|
19403
|
+
const [formPickCount, setFormPickCount] = (0, import_react19.useState)(null);
|
|
19404
|
+
const [formHoverRect, setFormHoverRect] = (0, import_react19.useState)(null);
|
|
19405
|
+
const formHoverElRef = (0, import_react19.useRef)(null);
|
|
19406
|
+
const [fieldPickRect, setFieldPickRect] = (0, import_react19.useState)(null);
|
|
19407
|
+
const fieldPickElRef = (0, import_react19.useRef)(null);
|
|
19408
|
+
const [fieldPickState, setFieldPickState] = (0, import_react19.useState)(null);
|
|
19409
|
+
const [fieldTypePickerOpen, setFieldTypePickerOpen] = (0, import_react19.useState)(false);
|
|
19410
|
+
const clearFormPick = (0, import_react19.useCallback)(() => {
|
|
18493
19411
|
const form = formPickElRef.current;
|
|
18494
19412
|
const editing = fieldPickElRef.current;
|
|
18495
19413
|
if (commitPlaceholderEdit(editing) && editing) {
|
|
@@ -18509,7 +19427,7 @@ function OhhwellsBridge() {
|
|
|
18509
19427
|
formPickElRef.current = null;
|
|
18510
19428
|
setFormPickRect(null);
|
|
18511
19429
|
}, []);
|
|
18512
|
-
const clearFieldPick = (0,
|
|
19430
|
+
const clearFieldPick = (0, import_react19.useCallback)(() => {
|
|
18513
19431
|
const wrapper = fieldPickElRef.current;
|
|
18514
19432
|
if (commitPlaceholderEdit(wrapper) && wrapper) {
|
|
18515
19433
|
const form = wrapper.closest('[data-ohw-editable="form"]');
|
|
@@ -18519,9 +19437,9 @@ function OhhwellsBridge() {
|
|
|
18519
19437
|
setFieldPickRect(null);
|
|
18520
19438
|
setFieldPickState(null);
|
|
18521
19439
|
}, []);
|
|
18522
|
-
const persistFieldsRef = (0,
|
|
19440
|
+
const persistFieldsRef = (0, import_react19.useRef)(() => {
|
|
18523
19441
|
});
|
|
18524
|
-
const persistFields = (0,
|
|
19442
|
+
const persistFields = (0, import_react19.useCallback)(
|
|
18525
19443
|
(form) => {
|
|
18526
19444
|
const key = formKeyOf(form);
|
|
18527
19445
|
if (!key) return;
|
|
@@ -18532,7 +19450,7 @@ function OhhwellsBridge() {
|
|
|
18532
19450
|
[]
|
|
18533
19451
|
);
|
|
18534
19452
|
persistFieldsRef.current = persistFields;
|
|
18535
|
-
const selectField = (0,
|
|
19453
|
+
const selectField = (0, import_react19.useCallback)((wrapper) => {
|
|
18536
19454
|
if (fieldPickElRef.current && fieldPickElRef.current !== wrapper) {
|
|
18537
19455
|
commitPlaceholderEdit(fieldPickElRef.current);
|
|
18538
19456
|
}
|
|
@@ -18545,7 +19463,7 @@ function OhhwellsBridge() {
|
|
|
18545
19463
|
setFieldPickState({ type: fieldTypeOf(wrapper), required: isFieldRequired(wrapper) });
|
|
18546
19464
|
setFieldTypePickerOpen(false);
|
|
18547
19465
|
}, []);
|
|
18548
|
-
const withSelectedField = (0,
|
|
19466
|
+
const withSelectedField = (0, import_react19.useCallback)(
|
|
18549
19467
|
(run) => {
|
|
18550
19468
|
const wrapper = fieldPickElRef.current;
|
|
18551
19469
|
const form = formPickElRef.current;
|
|
@@ -18558,28 +19476,28 @@ function OhhwellsBridge() {
|
|
|
18558
19476
|
},
|
|
18559
19477
|
[persistFields]
|
|
18560
19478
|
);
|
|
18561
|
-
const handleFieldTypeChange = (0,
|
|
19479
|
+
const handleFieldTypeChange = (0, import_react19.useCallback)(
|
|
18562
19480
|
(type) => withSelectedField((_form, wrapper) => {
|
|
18563
19481
|
applyFieldType(wrapper, type);
|
|
18564
19482
|
selectField(wrapper);
|
|
18565
19483
|
}),
|
|
18566
19484
|
[selectField, withSelectedField]
|
|
18567
19485
|
);
|
|
18568
|
-
const handleFieldRequiredToggle = (0,
|
|
19486
|
+
const handleFieldRequiredToggle = (0, import_react19.useCallback)(
|
|
18569
19487
|
() => withSelectedField((_form, wrapper) => {
|
|
18570
19488
|
setFieldRequired(wrapper, !isFieldRequired(wrapper));
|
|
18571
19489
|
selectField(wrapper);
|
|
18572
19490
|
}),
|
|
18573
19491
|
[selectField, withSelectedField]
|
|
18574
19492
|
);
|
|
18575
|
-
const handleFieldDuplicate = (0,
|
|
19493
|
+
const handleFieldDuplicate = (0, import_react19.useCallback)(
|
|
18576
19494
|
() => withSelectedField((form, wrapper) => {
|
|
18577
19495
|
const copy = duplicateField(form, wrapper);
|
|
18578
19496
|
selectField(copy);
|
|
18579
19497
|
}),
|
|
18580
19498
|
[selectField, withSelectedField]
|
|
18581
19499
|
);
|
|
18582
|
-
const handleFieldDelete = (0,
|
|
19500
|
+
const handleFieldDelete = (0, import_react19.useCallback)(
|
|
18583
19501
|
() => withSelectedField((_form, wrapper) => {
|
|
18584
19502
|
removeField(wrapper);
|
|
18585
19503
|
clearFieldPick();
|
|
@@ -18587,7 +19505,7 @@ function OhhwellsBridge() {
|
|
|
18587
19505
|
}),
|
|
18588
19506
|
[clearFieldPick, withSelectedField]
|
|
18589
19507
|
);
|
|
18590
|
-
const handleAddField = (0,
|
|
19508
|
+
const handleAddField = (0, import_react19.useCallback)(
|
|
18591
19509
|
(type) => {
|
|
18592
19510
|
const form = formPickElRef.current;
|
|
18593
19511
|
if (!form) return;
|
|
@@ -18603,8 +19521,8 @@ function OhhwellsBridge() {
|
|
|
18603
19521
|
},
|
|
18604
19522
|
[persistFields, selectField]
|
|
18605
19523
|
);
|
|
18606
|
-
const fieldDragRef = (0,
|
|
18607
|
-
const buildFieldDropSlots = (0,
|
|
19524
|
+
const fieldDragRef = (0, import_react19.useRef)(null);
|
|
19525
|
+
const buildFieldDropSlots = (0, import_react19.useCallback)((form, draggedKey) => {
|
|
18608
19526
|
const others = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== draggedKey);
|
|
18609
19527
|
const slots = others.map((el) => {
|
|
18610
19528
|
const rect = el.getBoundingClientRect();
|
|
@@ -18617,7 +19535,7 @@ function OhhwellsBridge() {
|
|
|
18617
19535
|
}
|
|
18618
19536
|
return slots;
|
|
18619
19537
|
}, []);
|
|
18620
|
-
const handleFieldDragStart = (0,
|
|
19538
|
+
const handleFieldDragStart = (0, import_react19.useCallback)(() => {
|
|
18621
19539
|
const wrapper = fieldPickElRef.current;
|
|
18622
19540
|
const form = formPickElRef.current;
|
|
18623
19541
|
if (!wrapper || !form) return;
|
|
@@ -18626,18 +19544,18 @@ function OhhwellsBridge() {
|
|
|
18626
19544
|
setFieldDragging(true);
|
|
18627
19545
|
setFieldDropSlots(buildFieldDropSlots(form, key));
|
|
18628
19546
|
}, [buildFieldDropSlots]);
|
|
18629
|
-
const handleFieldDragEnd = (0,
|
|
19547
|
+
const handleFieldDragEnd = (0, import_react19.useCallback)(() => {
|
|
18630
19548
|
fieldDragRef.current = null;
|
|
18631
19549
|
setFieldDropIndex(null);
|
|
18632
19550
|
setFieldDropSlots([]);
|
|
18633
19551
|
setFieldDragging(false);
|
|
18634
19552
|
}, []);
|
|
18635
|
-
const [fieldDropIndex, setFieldDropIndex] = (0,
|
|
18636
|
-
const [fieldDropSlots, setFieldDropSlots] = (0,
|
|
18637
|
-
const [fieldDragging, setFieldDragging] = (0,
|
|
18638
|
-
const clearFormPickRef = (0,
|
|
19553
|
+
const [fieldDropIndex, setFieldDropIndex] = (0, import_react19.useState)(null);
|
|
19554
|
+
const [fieldDropSlots, setFieldDropSlots] = (0, import_react19.useState)([]);
|
|
19555
|
+
const [fieldDragging, setFieldDragging] = (0, import_react19.useState)(false);
|
|
19556
|
+
const clearFormPickRef = (0, import_react19.useRef)(clearFormPick);
|
|
18639
19557
|
clearFormPickRef.current = clearFormPick;
|
|
18640
|
-
(0,
|
|
19558
|
+
(0, import_react19.useEffect)(() => {
|
|
18641
19559
|
const el = fieldPickElRef.current;
|
|
18642
19560
|
if (!el || fieldPickRect === null) return;
|
|
18643
19561
|
const observer = new ResizeObserver(() => {
|
|
@@ -18646,7 +19564,7 @@ function OhhwellsBridge() {
|
|
|
18646
19564
|
observer.observe(el);
|
|
18647
19565
|
return () => observer.disconnect();
|
|
18648
19566
|
}, [fieldPickRect !== null, fieldPickState]);
|
|
18649
|
-
(0,
|
|
19567
|
+
(0, import_react19.useEffect)(() => {
|
|
18650
19568
|
const el = formPickElRef.current;
|
|
18651
19569
|
if (!el || formPickRect === null) return;
|
|
18652
19570
|
const observer = new ResizeObserver(() => {
|
|
@@ -18655,25 +19573,25 @@ function OhhwellsBridge() {
|
|
|
18655
19573
|
observer.observe(el);
|
|
18656
19574
|
return () => observer.disconnect();
|
|
18657
19575
|
}, [formPickRect !== null, formViewState]);
|
|
18658
|
-
const [toolbarVariant, setToolbarVariant] = (0,
|
|
18659
|
-
const toolbarVariantRef = (0,
|
|
19576
|
+
const [toolbarVariant, setToolbarVariant] = (0, import_react19.useState)("none");
|
|
19577
|
+
const toolbarVariantRef = (0, import_react19.useRef)("none");
|
|
18660
19578
|
toolbarVariantRef.current = toolbarVariant;
|
|
18661
|
-
const [selectedIsCta, setSelectedIsCta] = (0,
|
|
18662
|
-
const [selectedIsSocial, setSelectedIsSocial] = (0,
|
|
18663
|
-
const [selectedIsSocialsRow, setSelectedIsSocialsRow] = (0,
|
|
18664
|
-
const [reorderHrefKey, setReorderHrefKey] = (0,
|
|
18665
|
-
const [reorderDragDisabled, setReorderDragDisabled] = (0,
|
|
18666
|
-
const [toggleState, setToggleState] = (0,
|
|
18667
|
-
const [maxBadge, setMaxBadge] = (0,
|
|
18668
|
-
const [activeCommands, setActiveCommands] = (0,
|
|
18669
|
-
const [sectionGap, setSectionGap] = (0,
|
|
18670
|
-
const [toolbarShowEditLink, setToolbarShowEditLink] = (0,
|
|
18671
|
-
const hoveredNavContainerRef = (0,
|
|
18672
|
-
const [hoveredNavContainerRect, setHoveredNavContainerRect] = (0,
|
|
18673
|
-
const hoveredItemElRef = (0,
|
|
18674
|
-
const [hoveredItemRect, setHoveredItemRect] = (0,
|
|
18675
|
-
const [hoveredTextRect, setHoveredTextRect] = (0,
|
|
18676
|
-
(0,
|
|
19579
|
+
const [selectedIsCta, setSelectedIsCta] = (0, import_react19.useState)(false);
|
|
19580
|
+
const [selectedIsSocial, setSelectedIsSocial] = (0, import_react19.useState)(false);
|
|
19581
|
+
const [selectedIsSocialsRow, setSelectedIsSocialsRow] = (0, import_react19.useState)(false);
|
|
19582
|
+
const [reorderHrefKey, setReorderHrefKey] = (0, import_react19.useState)(null);
|
|
19583
|
+
const [reorderDragDisabled, setReorderDragDisabled] = (0, import_react19.useState)(false);
|
|
19584
|
+
const [toggleState, setToggleState] = (0, import_react19.useState)(null);
|
|
19585
|
+
const [maxBadge, setMaxBadge] = (0, import_react19.useState)(null);
|
|
19586
|
+
const [activeCommands, setActiveCommands] = (0, import_react19.useState)(/* @__PURE__ */ new Set());
|
|
19587
|
+
const [sectionGap, setSectionGap] = (0, import_react19.useState)(null);
|
|
19588
|
+
const [toolbarShowEditLink, setToolbarShowEditLink] = (0, import_react19.useState)(false);
|
|
19589
|
+
const hoveredNavContainerRef = (0, import_react19.useRef)(null);
|
|
19590
|
+
const [hoveredNavContainerRect, setHoveredNavContainerRect] = (0, import_react19.useState)(null);
|
|
19591
|
+
const hoveredItemElRef = (0, import_react19.useRef)(null);
|
|
19592
|
+
const [hoveredItemRect, setHoveredItemRect] = (0, import_react19.useState)(null);
|
|
19593
|
+
const [hoveredTextRect, setHoveredTextRect] = (0, import_react19.useState)(null);
|
|
19594
|
+
(0, import_react19.useEffect)(() => {
|
|
18677
19595
|
const sync = () => {
|
|
18678
19596
|
const el = document.querySelector(
|
|
18679
19597
|
'[data-ohw-hovered]:not([contenteditable]):not([data-ohw-href-key]):not([data-ohw-editable="form"] *)'
|
|
@@ -18717,46 +19635,61 @@ function OhhwellsBridge() {
|
|
|
18717
19635
|
});
|
|
18718
19636
|
return () => observer.disconnect();
|
|
18719
19637
|
}, []);
|
|
18720
|
-
const siblingHintElRef = (0,
|
|
18721
|
-
const [siblingHintRect, setSiblingHintRect] = (0,
|
|
18722
|
-
const [siblingHintRects, setSiblingHintRects] = (0,
|
|
18723
|
-
const [isItemDragging, setIsItemDragging] = (0,
|
|
18724
|
-
const [isFooterFrameSelection, setIsFooterFrameSelection] = (0,
|
|
19638
|
+
const siblingHintElRef = (0, import_react19.useRef)(null);
|
|
19639
|
+
const [siblingHintRect, setSiblingHintRect] = (0, import_react19.useState)(null);
|
|
19640
|
+
const [siblingHintRects, setSiblingHintRects] = (0, import_react19.useState)([]);
|
|
19641
|
+
const [isItemDragging, setIsItemDragging] = (0, import_react19.useState)(false);
|
|
19642
|
+
const [isFooterFrameSelection, setIsFooterFrameSelection] = (0, import_react19.useState)(false);
|
|
18725
19643
|
isFooterFrameSelectionRef.current = isFooterFrameSelection;
|
|
18726
|
-
const [floatingPanel, setFloatingPanel] = (0,
|
|
18727
|
-
const floatingPanelOpenRef = (0,
|
|
19644
|
+
const [floatingPanel, setFloatingPanel] = (0, import_react19.useState)(null);
|
|
19645
|
+
const floatingPanelOpenRef = (0, import_react19.useRef)(false);
|
|
18728
19646
|
floatingPanelOpenRef.current = floatingPanel !== null;
|
|
18729
|
-
const [floatingPanelPos, setFloatingPanelPos] = (0,
|
|
18730
|
-
const [logoSizeDraft, setLogoSizeDraft] = (0,
|
|
18731
|
-
const [editorViewport, setEditorViewport] = (0,
|
|
18732
|
-
const [parentScrollSnap, setParentScrollSnap] = (0,
|
|
18733
|
-
const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = (0,
|
|
18734
|
-
const [footerHeadingVisible, setFooterHeadingVisible] = (0,
|
|
18735
|
-
const footerDragRef = (0,
|
|
18736
|
-
const [footerDropSlots, setFooterDropSlots] = (0,
|
|
18737
|
-
const [activeFooterDropIndex, setActiveFooterDropIndex] = (0,
|
|
18738
|
-
const [draggedItemRect, setDraggedItemRect] = (0,
|
|
18739
|
-
const footerPointerDragRef = (0,
|
|
18740
|
-
const suppressNextClickRef = (0,
|
|
18741
|
-
const suppressClickUntilRef = (0,
|
|
18742
|
-
const [linkPopover, setLinkPopover] = (0,
|
|
18743
|
-
const linkPopoverSessionRef = (0,
|
|
18744
|
-
const addNavAfterAnchorRef = (0,
|
|
18745
|
-
const editContentRef = (0,
|
|
18746
|
-
const aiSectionsRef = (0,
|
|
18747
|
-
const
|
|
18748
|
-
|
|
18749
|
-
|
|
18750
|
-
const
|
|
18751
|
-
|
|
18752
|
-
const
|
|
18753
|
-
const
|
|
18754
|
-
const
|
|
18755
|
-
const
|
|
18756
|
-
const
|
|
18757
|
-
const
|
|
19647
|
+
const [floatingPanelPos, setFloatingPanelPos] = (0, import_react19.useState)(null);
|
|
19648
|
+
const [logoSizeDraft, setLogoSizeDraft] = (0, import_react19.useState)(null);
|
|
19649
|
+
const [editorViewport, setEditorViewport] = (0, import_react19.useState)("desktop");
|
|
19650
|
+
const [parentScrollSnap, setParentScrollSnap] = (0, import_react19.useState)(null);
|
|
19651
|
+
const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = (0, import_react19.useState)(null);
|
|
19652
|
+
const [footerHeadingVisible, setFooterHeadingVisible] = (0, import_react19.useState)(null);
|
|
19653
|
+
const footerDragRef = (0, import_react19.useRef)(null);
|
|
19654
|
+
const [footerDropSlots, setFooterDropSlots] = (0, import_react19.useState)([]);
|
|
19655
|
+
const [activeFooterDropIndex, setActiveFooterDropIndex] = (0, import_react19.useState)(null);
|
|
19656
|
+
const [draggedItemRect, setDraggedItemRect] = (0, import_react19.useState)(null);
|
|
19657
|
+
const footerPointerDragRef = (0, import_react19.useRef)(null);
|
|
19658
|
+
const suppressNextClickRef = (0, import_react19.useRef)(false);
|
|
19659
|
+
const suppressClickUntilRef = (0, import_react19.useRef)(0);
|
|
19660
|
+
const [linkPopover, setLinkPopover] = (0, import_react19.useState)(null);
|
|
19661
|
+
const linkPopoverSessionRef = (0, import_react19.useRef)(null);
|
|
19662
|
+
const addNavAfterAnchorRef = (0, import_react19.useRef)(null);
|
|
19663
|
+
const editContentRef = (0, import_react19.useRef)({});
|
|
19664
|
+
const aiSectionsRef = (0, import_react19.useRef)("");
|
|
19665
|
+
const applyTreeLocalRef = (0, import_react19.useRef)(
|
|
19666
|
+
null
|
|
19667
|
+
);
|
|
19668
|
+
const clearInteractionChromeRef = (0, import_react19.useRef)(() => {
|
|
19669
|
+
});
|
|
19670
|
+
const brandKitRef = (0, import_react19.useRef)("");
|
|
19671
|
+
const stylesRef = (0, import_react19.useRef)("");
|
|
19672
|
+
const appliedDrawerRef = (0, import_react19.useRef)(null);
|
|
19673
|
+
const pendingDeleteUndoRef = (0, import_react19.useRef)(null);
|
|
19674
|
+
const [sitePages, setSitePages] = (0, import_react19.useState)([]);
|
|
19675
|
+
const [sectionsByPath, setSectionsByPath] = (0, import_react19.useState)({});
|
|
19676
|
+
const sectionsPrefetchGenRef = (0, import_react19.useRef)(0);
|
|
19677
|
+
const setLinkPopoverRef = (0, import_react19.useRef)(setLinkPopover);
|
|
19678
|
+
const linkPopoverPanelRef = (0, import_react19.useRef)(null);
|
|
19679
|
+
const linkPopoverOpenRef = (0, import_react19.useRef)(false);
|
|
19680
|
+
const linkPopoverGraceUntilRef = (0, import_react19.useRef)(0);
|
|
18758
19681
|
setLinkPopoverRef.current = setLinkPopover;
|
|
18759
19682
|
linkPopoverSessionRef.current = linkPopover;
|
|
19683
|
+
(0, import_react19.useEffect)(() => {
|
|
19684
|
+
setSectionOrderPersistHandler((entries) => {
|
|
19685
|
+
const currentPath = window.location.pathname;
|
|
19686
|
+
const merged = mergePageSectionOrder(editContentRef.current[SECTION_ORDER_KEY], currentPath, entries);
|
|
19687
|
+
const text = JSON.stringify(merged);
|
|
19688
|
+
editContentRef.current = { ...editContentRef.current, [SECTION_ORDER_KEY]: text };
|
|
19689
|
+
postToParentRef.current({ type: "ow:change", nodes: [{ key: SECTION_ORDER_KEY, text }] });
|
|
19690
|
+
});
|
|
19691
|
+
return () => setSectionOrderPersistHandler(null);
|
|
19692
|
+
}, []);
|
|
18760
19693
|
const {
|
|
18761
19694
|
navDragRef,
|
|
18762
19695
|
navPointerDragRef,
|
|
@@ -18803,7 +19736,7 @@ function OhhwellsBridge() {
|
|
|
18803
19736
|
const bumpLinkPopoverGrace = () => {
|
|
18804
19737
|
linkPopoverGraceUntilRef.current = Date.now() + 350;
|
|
18805
19738
|
};
|
|
18806
|
-
const runSectionsPrefetch = (0,
|
|
19739
|
+
const runSectionsPrefetch = (0, import_react19.useCallback)((pages) => {
|
|
18807
19740
|
if (!isEditMode || shouldUseDevFixtures() || pages.length === 0) return;
|
|
18808
19741
|
const gen = ++sectionsPrefetchGenRef.current;
|
|
18809
19742
|
const paths = pages.map((p) => p.path);
|
|
@@ -18822,9 +19755,9 @@ function OhhwellsBridge() {
|
|
|
18822
19755
|
);
|
|
18823
19756
|
});
|
|
18824
19757
|
}, [isEditMode, pathname]);
|
|
18825
|
-
const runSectionsPrefetchRef = (0,
|
|
19758
|
+
const runSectionsPrefetchRef = (0, import_react19.useRef)(runSectionsPrefetch);
|
|
18826
19759
|
runSectionsPrefetchRef.current = runSectionsPrefetch;
|
|
18827
|
-
(0,
|
|
19760
|
+
(0, import_react19.useEffect)(() => {
|
|
18828
19761
|
if (!linkPopover) {
|
|
18829
19762
|
document.documentElement.removeAttribute("data-ohw-link-popover-open");
|
|
18830
19763
|
return;
|
|
@@ -18852,7 +19785,7 @@ function OhhwellsBridge() {
|
|
|
18852
19785
|
document.documentElement.removeAttribute("data-ohw-link-popover-open");
|
|
18853
19786
|
};
|
|
18854
19787
|
}, [linkPopover, postToParent2]);
|
|
18855
|
-
(0,
|
|
19788
|
+
(0, import_react19.useEffect)(() => {
|
|
18856
19789
|
if (!isEditMode) return;
|
|
18857
19790
|
const useFixtures = shouldUseDevFixtures();
|
|
18858
19791
|
if (useFixtures) {
|
|
@@ -18876,14 +19809,14 @@ function OhhwellsBridge() {
|
|
|
18876
19809
|
if (!useFixtures) postToParent2({ type: "ow:request-site-pages" });
|
|
18877
19810
|
return () => window.removeEventListener("message", onSitePages);
|
|
18878
19811
|
}, [isEditMode, postToParent2]);
|
|
18879
|
-
(0,
|
|
19812
|
+
(0, import_react19.useEffect)(() => {
|
|
18880
19813
|
if (!isEditMode || shouldUseDevFixtures()) return;
|
|
18881
19814
|
void loadAllSectionsManifest().then((manifest) => {
|
|
18882
19815
|
if (Object.keys(manifest).length === 0) return;
|
|
18883
19816
|
setSectionsByPath((prev) => ({ ...manifest, ...prev }));
|
|
18884
19817
|
});
|
|
18885
19818
|
}, [isEditMode]);
|
|
18886
|
-
(0,
|
|
19819
|
+
(0, import_react19.useEffect)(() => {
|
|
18887
19820
|
const update = () => {
|
|
18888
19821
|
const el = activeElRef.current ?? selectedElRef.current;
|
|
18889
19822
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
@@ -18907,10 +19840,10 @@ function OhhwellsBridge() {
|
|
|
18907
19840
|
vvp.removeEventListener("resize", update);
|
|
18908
19841
|
};
|
|
18909
19842
|
}, []);
|
|
18910
|
-
const refreshStateRules = (0,
|
|
19843
|
+
const refreshStateRules = (0, import_react19.useCallback)(() => {
|
|
18911
19844
|
editStylesRef.current?.forceHover && (editStylesRef.current.forceHover.textContent = collectStateRules());
|
|
18912
19845
|
}, []);
|
|
18913
|
-
const processConfigRequest = (0,
|
|
19846
|
+
const processConfigRequest = (0, import_react19.useCallback)((insertAfterVal) => {
|
|
18914
19847
|
const tracker = getSectionsTracker();
|
|
18915
19848
|
let entries = [];
|
|
18916
19849
|
try {
|
|
@@ -18933,7 +19866,7 @@ function OhhwellsBridge() {
|
|
|
18933
19866
|
}
|
|
18934
19867
|
window.postMessage({ type: "ow:schedule-config", insertAfter: insertAfterVal, scheduleId: null }, "*");
|
|
18935
19868
|
}, [isEditMode]);
|
|
18936
|
-
const deactivate = (0,
|
|
19869
|
+
const deactivate = (0, import_react19.useCallback)(() => {
|
|
18937
19870
|
const el = activeElRef.current;
|
|
18938
19871
|
if (!el) return;
|
|
18939
19872
|
const isFormBlock = el.dataset.ohwEditable === "form";
|
|
@@ -18984,12 +19917,12 @@ function OhhwellsBridge() {
|
|
|
18984
19917
|
setToolbarShowEditLink(false);
|
|
18985
19918
|
postToParent2({ type: "ow:exit-edit" });
|
|
18986
19919
|
}, [postToParent2]);
|
|
18987
|
-
const clearSelectedAttr = (0,
|
|
19920
|
+
const clearSelectedAttr = (0, import_react19.useCallback)(() => {
|
|
18988
19921
|
document.querySelectorAll("[data-ohw-selected]").forEach((el) => {
|
|
18989
19922
|
el.removeAttribute("data-ohw-selected");
|
|
18990
19923
|
});
|
|
18991
19924
|
}, []);
|
|
18992
|
-
const deselect = (0,
|
|
19925
|
+
const deselect = (0, import_react19.useCallback)(() => {
|
|
18993
19926
|
const nestedGroup = selectedElRef.current?.closest("[data-ohw-nav-children]") != null ? selectedElRef.current.closest("[data-ohw-nav-group]") : null;
|
|
18994
19927
|
clearSelectedAttr();
|
|
18995
19928
|
selectedElRef.current = null;
|
|
@@ -19023,20 +19956,20 @@ function OhhwellsBridge() {
|
|
|
19023
19956
|
setToolbarVariant("none");
|
|
19024
19957
|
}
|
|
19025
19958
|
}, [clearSelectedAttr]);
|
|
19026
|
-
const markSelected = (0,
|
|
19959
|
+
const markSelected = (0, import_react19.useCallback)((el) => {
|
|
19027
19960
|
clearSelectedAttr();
|
|
19028
19961
|
el.removeAttribute("data-ohw-hovered");
|
|
19029
19962
|
el.setAttribute("data-ohw-selected", "");
|
|
19030
19963
|
}, [clearSelectedAttr]);
|
|
19031
|
-
const isSelectedForHover = (0,
|
|
19964
|
+
const isSelectedForHover = (0, import_react19.useCallback)((el) => {
|
|
19032
19965
|
if (!el) return false;
|
|
19033
19966
|
return [selectedElRef.current, activeElRef.current].some(
|
|
19034
19967
|
(busy) => busy && (el === busy || busy.contains(el) || el.contains(busy))
|
|
19035
19968
|
);
|
|
19036
19969
|
}, []);
|
|
19037
|
-
const isSelectedForHoverRef = (0,
|
|
19970
|
+
const isSelectedForHoverRef = (0, import_react19.useRef)(isSelectedForHover);
|
|
19038
19971
|
isSelectedForHoverRef.current = isSelectedForHover;
|
|
19039
|
-
const resolveHrefKeyElement = (0,
|
|
19972
|
+
const resolveHrefKeyElement = (0, import_react19.useCallback)((hrefKey) => {
|
|
19040
19973
|
if (isFooterHrefKey(hrefKey)) {
|
|
19041
19974
|
return document.querySelector(
|
|
19042
19975
|
`footer [data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
@@ -19051,7 +19984,7 @@ function OhhwellsBridge() {
|
|
|
19051
19984
|
`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
19052
19985
|
);
|
|
19053
19986
|
}, []);
|
|
19054
|
-
const resyncSelectedNavigationItem = (0,
|
|
19987
|
+
const resyncSelectedNavigationItem = (0, import_react19.useCallback)(() => {
|
|
19055
19988
|
const hrefKey = selectedHrefKeyRef.current;
|
|
19056
19989
|
if (hrefKey) {
|
|
19057
19990
|
const link = resolveHrefKeyElement(hrefKey);
|
|
@@ -19089,7 +20022,7 @@ function OhhwellsBridge() {
|
|
|
19089
20022
|
);
|
|
19090
20023
|
}
|
|
19091
20024
|
}, [resolveHrefKeyElement]);
|
|
19092
|
-
const reselectNavigationItem = (0,
|
|
20025
|
+
const reselectNavigationItem = (0, import_react19.useCallback)((navAnchor) => {
|
|
19093
20026
|
selectedElRef.current = navAnchor;
|
|
19094
20027
|
selectedHrefKeyRef.current = navAnchor.getAttribute("data-ohw-href-key");
|
|
19095
20028
|
selectedFooterColAttrRef.current = null;
|
|
@@ -19120,7 +20053,7 @@ function OhhwellsBridge() {
|
|
|
19120
20053
|
setToolbarShowEditLink(false);
|
|
19121
20054
|
setActiveCommands(/* @__PURE__ */ new Set());
|
|
19122
20055
|
}, [markSelected]);
|
|
19123
|
-
const commitNavigationTextEdit = (0,
|
|
20056
|
+
const commitNavigationTextEdit = (0, import_react19.useCallback)((navAnchor) => {
|
|
19124
20057
|
const el = activeElRef.current;
|
|
19125
20058
|
if (!el) return;
|
|
19126
20059
|
const key = el.dataset.ohwKey;
|
|
@@ -19153,7 +20086,7 @@ function OhhwellsBridge() {
|
|
|
19153
20086
|
postToParent2({ type: "ow:exit-edit" });
|
|
19154
20087
|
reselectNavigationItem(navAnchor);
|
|
19155
20088
|
}, [postToParent2, reselectNavigationItem]);
|
|
19156
|
-
const handleAddTopLevelNavItem = (0,
|
|
20089
|
+
const handleAddTopLevelNavItem = (0, import_react19.useCallback)(() => {
|
|
19157
20090
|
const items = listNavbarRootItems();
|
|
19158
20091
|
addNavAfterAnchorRef.current = items[items.length - 1] ?? null;
|
|
19159
20092
|
deselectRef.current();
|
|
@@ -19165,7 +20098,7 @@ function OhhwellsBridge() {
|
|
|
19165
20098
|
intent: "add-nav"
|
|
19166
20099
|
});
|
|
19167
20100
|
}, []);
|
|
19168
|
-
const maybeWarnNavLinkDropdownConflict = (0,
|
|
20101
|
+
const maybeWarnNavLinkDropdownConflict = (0, import_react19.useCallback)(
|
|
19169
20102
|
(anchor) => {
|
|
19170
20103
|
if (!isNavbarHrefKey(anchor.getAttribute("data-ohw-href-key"))) return;
|
|
19171
20104
|
if (!navDropdownsOpenOnClick()) return;
|
|
@@ -19178,7 +20111,7 @@ function OhhwellsBridge() {
|
|
|
19178
20111
|
},
|
|
19179
20112
|
[postToParent2]
|
|
19180
20113
|
);
|
|
19181
|
-
const handleNavDropdownOpenChange = (0,
|
|
20114
|
+
const handleNavDropdownOpenChange = (0, import_react19.useCallback)((open) => {
|
|
19182
20115
|
const selected = selectedElRef.current;
|
|
19183
20116
|
if (!selected || !isNavigationItem2(selected)) return;
|
|
19184
20117
|
if (isNestedNavChild(selected)) return;
|
|
@@ -19194,7 +20127,7 @@ function OhhwellsBridge() {
|
|
|
19194
20127
|
}
|
|
19195
20128
|
});
|
|
19196
20129
|
}, []);
|
|
19197
|
-
const handleFooterHeadingVisibleChange = (0,
|
|
20130
|
+
const handleFooterHeadingVisibleChange = (0, import_react19.useCallback)(
|
|
19198
20131
|
(visible) => {
|
|
19199
20132
|
const selected = selectedElRef.current;
|
|
19200
20133
|
if (!selected || !isFooterFrameSelectionRef.current) return;
|
|
@@ -19218,7 +20151,7 @@ function OhhwellsBridge() {
|
|
|
19218
20151
|
},
|
|
19219
20152
|
[postToParent2]
|
|
19220
20153
|
);
|
|
19221
|
-
const enterEditOnNewItem = (0,
|
|
20154
|
+
const enterEditOnNewItem = (0, import_react19.useCallback)((anchor) => {
|
|
19222
20155
|
const label = anchor.querySelector('[data-ohw-editable="text"]');
|
|
19223
20156
|
if (!label) {
|
|
19224
20157
|
selectRef.current(anchor);
|
|
@@ -19227,8 +20160,8 @@ function OhhwellsBridge() {
|
|
|
19227
20160
|
setNavGroupForceOpen(anchor, true);
|
|
19228
20161
|
activateRef.current(label);
|
|
19229
20162
|
}, []);
|
|
19230
|
-
const pendingSocialAddRef = (0,
|
|
19231
|
-
const handleAddChildItem = (0,
|
|
20163
|
+
const pendingSocialAddRef = (0, import_react19.useRef)(null);
|
|
20164
|
+
const handleAddChildItem = (0, import_react19.useCallback)(() => {
|
|
19232
20165
|
const selected = selectedElRef.current;
|
|
19233
20166
|
if (!selected) return;
|
|
19234
20167
|
const socialsRow = isSocialsRow(selected) ? selected : findSocialsRow(selected);
|
|
@@ -19339,7 +20272,7 @@ function OhhwellsBridge() {
|
|
|
19339
20272
|
});
|
|
19340
20273
|
});
|
|
19341
20274
|
}, [enterEditOnNewItem, isFooterFrameSelection, maybeWarnNavLinkDropdownConflict, postToParent2]);
|
|
19342
|
-
const handleAddFooterColumn = (0,
|
|
20275
|
+
const handleAddFooterColumn = (0, import_react19.useCallback)(() => {
|
|
19343
20276
|
if (!canAddFooterColumn()) {
|
|
19344
20277
|
postToParent2({
|
|
19345
20278
|
type: "ow:toast",
|
|
@@ -19360,7 +20293,7 @@ function OhhwellsBridge() {
|
|
|
19360
20293
|
selectRef.current(result.firstLink);
|
|
19361
20294
|
});
|
|
19362
20295
|
}, [postToParent2]);
|
|
19363
|
-
const clearFooterDragVisuals = (0,
|
|
20296
|
+
const clearFooterDragVisuals = (0, import_react19.useCallback)(() => {
|
|
19364
20297
|
footerDragRef.current = null;
|
|
19365
20298
|
setSiblingHintRects([]);
|
|
19366
20299
|
setFooterDropSlots([]);
|
|
@@ -19369,7 +20302,7 @@ function OhhwellsBridge() {
|
|
|
19369
20302
|
setIsItemDragging(false);
|
|
19370
20303
|
unlockFooterDragInteraction();
|
|
19371
20304
|
}, []);
|
|
19372
|
-
const refreshFooterDragVisuals = (0,
|
|
20305
|
+
const refreshFooterDragVisuals = (0, import_react19.useCallback)((session, activeSlot, clientX, clientY) => {
|
|
19373
20306
|
const dragged = session.draggedEl;
|
|
19374
20307
|
setDraggedItemRect(dragged.getBoundingClientRect());
|
|
19375
20308
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -19401,13 +20334,13 @@ function OhhwellsBridge() {
|
|
|
19401
20334
|
const activeIdx = activeSlot ? slots.findIndex((s) => s.insertIndex === activeSlot.insertIndex) : -1;
|
|
19402
20335
|
setActiveFooterDropIndex(activeIdx >= 0 ? activeIdx : null);
|
|
19403
20336
|
}, []);
|
|
19404
|
-
const refreshFooterDragVisualsRef = (0,
|
|
20337
|
+
const refreshFooterDragVisualsRef = (0, import_react19.useRef)(refreshFooterDragVisuals);
|
|
19405
20338
|
refreshFooterDragVisualsRef.current = refreshFooterDragVisuals;
|
|
19406
|
-
const commitFooterDragRef = (0,
|
|
20339
|
+
const commitFooterDragRef = (0, import_react19.useRef)(() => {
|
|
19407
20340
|
});
|
|
19408
|
-
const beginFooterDragRef = (0,
|
|
20341
|
+
const beginFooterDragRef = (0, import_react19.useRef)(() => {
|
|
19409
20342
|
});
|
|
19410
|
-
const beginFooterDrag = (0,
|
|
20343
|
+
const beginFooterDrag = (0, import_react19.useCallback)(
|
|
19411
20344
|
(session) => {
|
|
19412
20345
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
19413
20346
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -19427,7 +20360,7 @@ function OhhwellsBridge() {
|
|
|
19427
20360
|
[refreshFooterDragVisuals]
|
|
19428
20361
|
);
|
|
19429
20362
|
beginFooterDragRef.current = beginFooterDrag;
|
|
19430
|
-
const commitFooterDrag = (0,
|
|
20363
|
+
const commitFooterDrag = (0, import_react19.useCallback)(
|
|
19431
20364
|
(clientX, clientY) => {
|
|
19432
20365
|
const session = footerDragRef.current;
|
|
19433
20366
|
if (!session) {
|
|
@@ -19556,7 +20489,7 @@ function OhhwellsBridge() {
|
|
|
19556
20489
|
[clearFooterDragVisuals, resolveHrefKeyElement, resyncSelectedNavigationItem]
|
|
19557
20490
|
);
|
|
19558
20491
|
commitFooterDragRef.current = commitFooterDrag;
|
|
19559
|
-
const startFooterLinkDrag = (0,
|
|
20492
|
+
const startFooterLinkDrag = (0, import_react19.useCallback)(
|
|
19560
20493
|
(anchor, clientX, clientY, wasSelected) => {
|
|
19561
20494
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
19562
20495
|
if (!hrefKey) return false;
|
|
@@ -19592,7 +20525,7 @@ function OhhwellsBridge() {
|
|
|
19592
20525
|
},
|
|
19593
20526
|
[beginFooterDrag]
|
|
19594
20527
|
);
|
|
19595
|
-
const startFooterColumnDrag = (0,
|
|
20528
|
+
const startFooterColumnDrag = (0, import_react19.useCallback)(
|
|
19596
20529
|
(columnEl, clientX, clientY, wasSelected) => {
|
|
19597
20530
|
const columns = listFooterColumns();
|
|
19598
20531
|
const idx = columns.indexOf(columnEl);
|
|
@@ -19612,7 +20545,7 @@ function OhhwellsBridge() {
|
|
|
19612
20545
|
},
|
|
19613
20546
|
[beginFooterDrag]
|
|
19614
20547
|
);
|
|
19615
|
-
const handleItemDragStart = (0,
|
|
20548
|
+
const handleItemDragStart = (0, import_react19.useCallback)(
|
|
19616
20549
|
(e) => {
|
|
19617
20550
|
const selected = selectedElRef.current;
|
|
19618
20551
|
if (!selected) {
|
|
@@ -19632,7 +20565,7 @@ function OhhwellsBridge() {
|
|
|
19632
20565
|
},
|
|
19633
20566
|
[startFooterColumnDrag, startFooterLinkDrag, startNavLinkDrag]
|
|
19634
20567
|
);
|
|
19635
|
-
const handleItemDragEnd = (0,
|
|
20568
|
+
const handleItemDragEnd = (0, import_react19.useCallback)(
|
|
19636
20569
|
(e) => {
|
|
19637
20570
|
if (footerDragRef.current) {
|
|
19638
20571
|
const x = e?.clientX;
|
|
@@ -19658,7 +20591,7 @@ function OhhwellsBridge() {
|
|
|
19658
20591
|
},
|
|
19659
20592
|
[commitFooterDrag, commitNavDrag, navDragRef]
|
|
19660
20593
|
);
|
|
19661
|
-
const handleItemChromePointerDown = (0,
|
|
20594
|
+
const handleItemChromePointerDown = (0, import_react19.useCallback)((e) => {
|
|
19662
20595
|
if (e.button !== 0) return;
|
|
19663
20596
|
const selected = selectedElRef.current;
|
|
19664
20597
|
if (!selected) return;
|
|
@@ -19689,7 +20622,7 @@ function OhhwellsBridge() {
|
|
|
19689
20622
|
}
|
|
19690
20623
|
if (armNavPressFromChrome(selected, e.clientX, e.clientY, e.pointerId)) return;
|
|
19691
20624
|
}, [armNavPressFromChrome]);
|
|
19692
|
-
const handleItemChromeClick = (0,
|
|
20625
|
+
const handleItemChromeClick = (0, import_react19.useCallback)((clientX, clientY) => {
|
|
19693
20626
|
if (suppressNextClickRef.current || Date.now() < suppressClickUntilRef.current) {
|
|
19694
20627
|
suppressNextClickRef.current = false;
|
|
19695
20628
|
return;
|
|
@@ -19702,7 +20635,7 @@ function OhhwellsBridge() {
|
|
|
19702
20635
|
}, []);
|
|
19703
20636
|
reselectNavigationItemRef.current = reselectNavigationItem;
|
|
19704
20637
|
commitNavigationTextEditRef.current = commitNavigationTextEdit;
|
|
19705
|
-
const select = (0,
|
|
20638
|
+
const select = (0, import_react19.useCallback)((anchor) => {
|
|
19706
20639
|
if (!isNavigationItem2(anchor)) return;
|
|
19707
20640
|
if (activeElRef.current) deactivate();
|
|
19708
20641
|
aiSectionApiRef.current?.selectFromElement(anchor);
|
|
@@ -19745,7 +20678,7 @@ function OhhwellsBridge() {
|
|
|
19745
20678
|
setFloatingPanel(null);
|
|
19746
20679
|
setLogoSizeDraft(null);
|
|
19747
20680
|
}, [deactivate, markSelected]);
|
|
19748
|
-
const selectFrame = (0,
|
|
20681
|
+
const selectFrame = (0, import_react19.useCallback)((el) => {
|
|
19749
20682
|
if (!isNavigationContainer(el)) return;
|
|
19750
20683
|
if (activeElRef.current) deactivate();
|
|
19751
20684
|
aiSectionApiRef.current?.selectFromElement(el);
|
|
@@ -19785,7 +20718,7 @@ function OhhwellsBridge() {
|
|
|
19785
20718
|
setFloatingPanel(null);
|
|
19786
20719
|
setLogoSizeDraft(null);
|
|
19787
20720
|
}, [deactivate, markSelected, postToParent2]);
|
|
19788
|
-
const selectLogo = (0,
|
|
20721
|
+
const selectLogo = (0, import_react19.useCallback)(
|
|
19789
20722
|
(logoEl) => {
|
|
19790
20723
|
if (activeElRef.current) deactivate();
|
|
19791
20724
|
selectedElRef.current = logoEl;
|
|
@@ -19814,7 +20747,7 @@ function OhhwellsBridge() {
|
|
|
19814
20747
|
},
|
|
19815
20748
|
[deactivate, markSelected]
|
|
19816
20749
|
);
|
|
19817
|
-
const openLogoSizePanel = (0,
|
|
20750
|
+
const openLogoSizePanel = (0, import_react19.useCallback)((logoEl) => {
|
|
19818
20751
|
const placement = getLogoPlacement(logoEl);
|
|
19819
20752
|
const draft = readLogoSizeState(editContentRef.current, placement);
|
|
19820
20753
|
setLogoSizeDraft(draft);
|
|
@@ -19827,7 +20760,7 @@ function OhhwellsBridge() {
|
|
|
19827
20760
|
placement
|
|
19828
20761
|
});
|
|
19829
20762
|
}, []);
|
|
19830
|
-
const openSocialsDisplayPanel = (0,
|
|
20763
|
+
const openSocialsDisplayPanel = (0, import_react19.useCallback)((row) => {
|
|
19831
20764
|
setParentScrollSnap(parentScrollRef.current);
|
|
19832
20765
|
setFloatingPanel({
|
|
19833
20766
|
key: "socials-display",
|
|
@@ -19837,11 +20770,11 @@ function OhhwellsBridge() {
|
|
|
19837
20770
|
row
|
|
19838
20771
|
});
|
|
19839
20772
|
}, []);
|
|
19840
|
-
const isEditModeRef = (0,
|
|
19841
|
-
const requestMissingSocialIconsRef = (0,
|
|
20773
|
+
const isEditModeRef = (0, import_react19.useRef)(false);
|
|
20774
|
+
const requestMissingSocialIconsRef = (0, import_react19.useRef)(() => {
|
|
19842
20775
|
});
|
|
19843
|
-
const askedSocialIconsRef = (0,
|
|
19844
|
-
const requestMissingSocialIcons = (0,
|
|
20776
|
+
const askedSocialIconsRef = (0, import_react19.useRef)(/* @__PURE__ */ new Set());
|
|
20777
|
+
const requestMissingSocialIcons = (0, import_react19.useCallback)(() => {
|
|
19845
20778
|
const items = Array.from(document.querySelectorAll(`[${SOCIALS_ROW_ATTR}]`)).filter((row) => socialsDisplayFor(row, editContentRef.current).icon).flatMap((row) => {
|
|
19846
20779
|
const missing = socialsMissingIcons(row);
|
|
19847
20780
|
listSocialItems(row).forEach((item) => ensureIconSlot(item));
|
|
@@ -19853,7 +20786,7 @@ function OhhwellsBridge() {
|
|
|
19853
20786
|
}, []);
|
|
19854
20787
|
requestMissingSocialIconsRef.current = requestMissingSocialIcons;
|
|
19855
20788
|
isEditModeRef.current = isEditMode;
|
|
19856
|
-
const changeSocialsDisplay = (0,
|
|
20789
|
+
const changeSocialsDisplay = (0, import_react19.useCallback)(
|
|
19857
20790
|
(row, next) => {
|
|
19858
20791
|
if (next.icon) {
|
|
19859
20792
|
const missing = socialsMissingIcons(row);
|
|
@@ -19877,17 +20810,17 @@ function OhhwellsBridge() {
|
|
|
19877
20810
|
},
|
|
19878
20811
|
[]
|
|
19879
20812
|
);
|
|
19880
|
-
const closeFloatingPanelOnly = (0,
|
|
20813
|
+
const closeFloatingPanelOnly = (0, import_react19.useCallback)(() => {
|
|
19881
20814
|
setFloatingPanel(null);
|
|
19882
20815
|
setLogoSizeDraft(null);
|
|
19883
20816
|
}, []);
|
|
19884
20817
|
closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
|
|
19885
|
-
const closeFloatingPanelAndDeselect = (0,
|
|
20818
|
+
const closeFloatingPanelAndDeselect = (0, import_react19.useCallback)(() => {
|
|
19886
20819
|
setFloatingPanel(null);
|
|
19887
20820
|
setLogoSizeDraft(null);
|
|
19888
20821
|
deselectRef.current();
|
|
19889
20822
|
}, []);
|
|
19890
|
-
(0,
|
|
20823
|
+
(0, import_react19.useEffect)(() => {
|
|
19891
20824
|
const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
|
|
19892
20825
|
if (!session || !logoSizeDraft) {
|
|
19893
20826
|
postToParentRef.current({ type: "ow:logo-size-panel", open: false });
|
|
@@ -19906,7 +20839,7 @@ function OhhwellsBridge() {
|
|
|
19906
20839
|
max: LOGO_SIZE_MAX
|
|
19907
20840
|
});
|
|
19908
20841
|
}, [floatingPanel, logoSizeDraft, editorViewport]);
|
|
19909
|
-
const persistLogoSizeDraft = (0,
|
|
20842
|
+
const persistLogoSizeDraft = (0, import_react19.useCallback)(
|
|
19910
20843
|
(placement, draft) => {
|
|
19911
20844
|
const desktopKey = LOGO_SIZE_DESKTOP_KEYS[placement];
|
|
19912
20845
|
const mobileKey = LOGO_SIZE_MOBILE_KEYS[placement];
|
|
@@ -19946,7 +20879,7 @@ function OhhwellsBridge() {
|
|
|
19946
20879
|
},
|
|
19947
20880
|
[postToParent2]
|
|
19948
20881
|
);
|
|
19949
|
-
const activate = (0,
|
|
20882
|
+
const activate = (0, import_react19.useCallback)((el, options) => {
|
|
19950
20883
|
if (activeElRef.current === el) return;
|
|
19951
20884
|
document.querySelectorAll("[data-ohw-hovered]").forEach((hovered) => {
|
|
19952
20885
|
hovered.removeAttribute("data-ohw-hovered");
|
|
@@ -20044,8 +20977,8 @@ function OhhwellsBridge() {
|
|
|
20044
20977
|
openLogoSizePanelRef.current = openLogoSizePanel;
|
|
20045
20978
|
deselectRef.current = deselect;
|
|
20046
20979
|
closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
|
|
20047
|
-
const lastSiteWideScopeRef = (0,
|
|
20048
|
-
(0,
|
|
20980
|
+
const lastSiteWideScopeRef = (0, import_react19.useRef)(null);
|
|
20981
|
+
(0, import_react19.useEffect)(() => {
|
|
20049
20982
|
if (!isEditMode) {
|
|
20050
20983
|
if (lastSiteWideScopeRef.current !== false) {
|
|
20051
20984
|
lastSiteWideScopeRef.current = false;
|
|
@@ -20071,7 +21004,7 @@ function OhhwellsBridge() {
|
|
|
20071
21004
|
isFooterFrameSelection,
|
|
20072
21005
|
postToParent2
|
|
20073
21006
|
]);
|
|
20074
|
-
(0,
|
|
21007
|
+
(0, import_react19.useLayoutEffect)(() => {
|
|
20075
21008
|
if (!subdomain || isEditMode) {
|
|
20076
21009
|
setFetchState("done");
|
|
20077
21010
|
return;
|
|
@@ -20095,6 +21028,7 @@ function OhhwellsBridge() {
|
|
|
20095
21028
|
applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
|
|
20096
21029
|
}
|
|
20097
21030
|
applyBrandChrome(content);
|
|
21031
|
+
applyCustomCodeToHead(content);
|
|
20098
21032
|
initSectionInstancesFromContent(content, window.location.pathname);
|
|
20099
21033
|
for (const [key, val] of Object.entries(content)) {
|
|
20100
21034
|
if (key === "__ohw_sections") continue;
|
|
@@ -20103,6 +21037,7 @@ function OhhwellsBridge() {
|
|
|
20103
21037
|
if (key === STYLE_STORE_KEY) continue;
|
|
20104
21038
|
if (BRAND_CHROME_KEYS.has(key)) continue;
|
|
20105
21039
|
if (key === LOGO_PLACEHOLDER_KEY) continue;
|
|
21040
|
+
if (key === CUSTOM_CODE_AFTER_HEAD_KEY || key === CUSTOM_CODE_BEFORE_HEAD_KEY) continue;
|
|
20106
21041
|
if (LOGO_IMAGE_KEYS.includes(key)) continue;
|
|
20107
21042
|
if (applyVideoSettingNode(key, val)) continue;
|
|
20108
21043
|
if (applyCarouselNode(key, val)) continue;
|
|
@@ -20190,7 +21125,7 @@ function OhhwellsBridge() {
|
|
|
20190
21125
|
cancelled = true;
|
|
20191
21126
|
};
|
|
20192
21127
|
}, [subdomain, isEditMode]);
|
|
20193
|
-
(0,
|
|
21128
|
+
(0, import_react19.useEffect)(() => {
|
|
20194
21129
|
if (!isEditMode) return;
|
|
20195
21130
|
const resolveIndex = (form, clientY) => {
|
|
20196
21131
|
const wrappers = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== fieldDragRef.current?.key);
|
|
@@ -20231,7 +21166,7 @@ function OhhwellsBridge() {
|
|
|
20231
21166
|
window.removeEventListener("drop", onDrop, true);
|
|
20232
21167
|
};
|
|
20233
21168
|
}, [buildFieldDropSlots, isEditMode, persistFields, selectField]);
|
|
20234
|
-
(0,
|
|
21169
|
+
(0, import_react19.useEffect)(() => {
|
|
20235
21170
|
if (!isEditMode) return;
|
|
20236
21171
|
const mark = () => document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
20237
21172
|
markFormFields(form);
|
|
@@ -20243,7 +21178,7 @@ function OhhwellsBridge() {
|
|
|
20243
21178
|
});
|
|
20244
21179
|
return () => observer.disconnect();
|
|
20245
21180
|
}, [isEditMode, fetchState, pathname]);
|
|
20246
|
-
(0,
|
|
21181
|
+
(0, import_react19.useEffect)(() => {
|
|
20247
21182
|
if (!isEditMode) return;
|
|
20248
21183
|
let saveTimer = null;
|
|
20249
21184
|
const onInput = (e) => {
|
|
@@ -20265,14 +21200,14 @@ function OhhwellsBridge() {
|
|
|
20265
21200
|
document.addEventListener("input", onInput, true);
|
|
20266
21201
|
return () => document.removeEventListener("input", onInput, true);
|
|
20267
21202
|
}, [isEditMode, persistFields]);
|
|
20268
|
-
(0,
|
|
21203
|
+
(0, import_react19.useEffect)(() => {
|
|
20269
21204
|
if (isEditMode || fetchState !== "done") return;
|
|
20270
21205
|
const content = contentCache.get(subdomain) ?? {};
|
|
20271
21206
|
document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
20272
21207
|
reconcileFieldsFromContent(form, content);
|
|
20273
21208
|
});
|
|
20274
21209
|
}, [isEditMode, fetchState, subdomain]);
|
|
20275
|
-
(0,
|
|
21210
|
+
(0, import_react19.useEffect)(() => {
|
|
20276
21211
|
if (!isEditMode) return;
|
|
20277
21212
|
const swallow = (e) => {
|
|
20278
21213
|
const target = e.target;
|
|
@@ -20281,14 +21216,14 @@ function OhhwellsBridge() {
|
|
|
20281
21216
|
document.addEventListener("submit", swallow, true);
|
|
20282
21217
|
return () => document.removeEventListener("submit", swallow, true);
|
|
20283
21218
|
}, [isEditMode]);
|
|
20284
|
-
(0,
|
|
21219
|
+
(0, import_react19.useEffect)(() => {
|
|
20285
21220
|
if (isEditMode || fetchState !== "done") return;
|
|
20286
21221
|
console.log("env", process.env.NEXT_PUBLIC_FLOWOPS_API_URL);
|
|
20287
21222
|
const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
|
|
20288
21223
|
console.log({ apiUrl, subdomain });
|
|
20289
21224
|
bindPublishedForms(apiUrl, subdomain, contentCache.get(subdomain) ?? {});
|
|
20290
21225
|
}, [isEditMode, fetchState, subdomain]);
|
|
20291
|
-
(0,
|
|
21226
|
+
(0, import_react19.useEffect)(() => {
|
|
20292
21227
|
if (!subdomain || isEditMode) return;
|
|
20293
21228
|
let debounceTimer = null;
|
|
20294
21229
|
let observer = null;
|
|
@@ -20377,16 +21312,16 @@ function OhhwellsBridge() {
|
|
|
20377
21312
|
if (debounceTimer) clearTimeout(debounceTimer);
|
|
20378
21313
|
};
|
|
20379
21314
|
}, [subdomain, isEditMode, pathname]);
|
|
20380
|
-
(0,
|
|
21315
|
+
(0, import_react19.useLayoutEffect)(() => {
|
|
20381
21316
|
const el = document.getElementById("ohw-loader");
|
|
20382
21317
|
if (!el) return;
|
|
20383
21318
|
const visible = Boolean(subdomain) && fetchState !== "done";
|
|
20384
21319
|
el.style.display = visible ? "flex" : "none";
|
|
20385
21320
|
}, [subdomain, fetchState]);
|
|
20386
|
-
(0,
|
|
21321
|
+
(0, import_react19.useEffect)(() => {
|
|
20387
21322
|
postToParent2({ type: "ow:navigation", path: pathname });
|
|
20388
21323
|
}, [pathname, postToParent2]);
|
|
20389
|
-
(0,
|
|
21324
|
+
(0, import_react19.useEffect)(() => {
|
|
20390
21325
|
if (!subdomain || isEditMode) return;
|
|
20391
21326
|
const content = contentCache.get(subdomain);
|
|
20392
21327
|
if (!content) return;
|
|
@@ -20402,7 +21337,7 @@ function OhhwellsBridge() {
|
|
|
20402
21337
|
applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
|
|
20403
21338
|
}
|
|
20404
21339
|
}, [pathname, subdomain, isEditMode]);
|
|
20405
|
-
(0,
|
|
21340
|
+
(0, import_react19.useEffect)(() => {
|
|
20406
21341
|
if (!isEditMode) return;
|
|
20407
21342
|
if (linkPopoverSessionRef.current?.intent === "add-nav") return;
|
|
20408
21343
|
if (document.querySelector("[data-ohw-section-picker]")) return;
|
|
@@ -20410,11 +21345,11 @@ function OhhwellsBridge() {
|
|
|
20410
21345
|
deselectRef.current();
|
|
20411
21346
|
deactivateRef.current();
|
|
20412
21347
|
}, [pathname, isEditMode]);
|
|
20413
|
-
(0,
|
|
21348
|
+
(0, import_react19.useEffect)(() => {
|
|
20414
21349
|
if (!isEditMode) return;
|
|
20415
21350
|
initSectionInstancesFromContent(editContentRef.current, pathname);
|
|
20416
21351
|
}, [pathname, isEditMode]);
|
|
20417
|
-
(0,
|
|
21352
|
+
(0, import_react19.useEffect)(() => {
|
|
20418
21353
|
if (!isEditMode) return;
|
|
20419
21354
|
const observer = new MutationObserver(() => {
|
|
20420
21355
|
const drawer = document.querySelector("[data-ohw-nav-drawer]");
|
|
@@ -20425,7 +21360,7 @@ function OhhwellsBridge() {
|
|
|
20425
21360
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
20426
21361
|
return () => observer.disconnect();
|
|
20427
21362
|
}, [isEditMode, pathname]);
|
|
20428
|
-
(0,
|
|
21363
|
+
(0, import_react19.useEffect)(() => {
|
|
20429
21364
|
const contentForNav = () => {
|
|
20430
21365
|
if (isEditMode) return editContentRef.current;
|
|
20431
21366
|
if (!subdomain) return {};
|
|
@@ -20494,7 +21429,7 @@ function OhhwellsBridge() {
|
|
|
20494
21429
|
observer?.disconnect();
|
|
20495
21430
|
};
|
|
20496
21431
|
}, [isEditMode, pathname, subdomain, fetchState, resyncSelectedNavigationItem]);
|
|
20497
|
-
(0,
|
|
21432
|
+
(0, import_react19.useEffect)(() => {
|
|
20498
21433
|
if (!isEditMode) return;
|
|
20499
21434
|
let lastPosted = 0;
|
|
20500
21435
|
const measure = () => {
|
|
@@ -20538,7 +21473,7 @@ function OhhwellsBridge() {
|
|
|
20538
21473
|
window.removeEventListener("resize", handleResize);
|
|
20539
21474
|
};
|
|
20540
21475
|
}, [pathname, isEditMode, postToParent2]);
|
|
20541
|
-
(0,
|
|
21476
|
+
(0, import_react19.useEffect)(() => {
|
|
20542
21477
|
if (!subdomainFromQuery || isEditMode) return;
|
|
20543
21478
|
const handleClick = (e) => {
|
|
20544
21479
|
const anchor = e.target.closest("a");
|
|
@@ -20554,7 +21489,7 @@ function OhhwellsBridge() {
|
|
|
20554
21489
|
document.addEventListener("click", handleClick, true);
|
|
20555
21490
|
return () => document.removeEventListener("click", handleClick, true);
|
|
20556
21491
|
}, [subdomainFromQuery, isEditMode, router]);
|
|
20557
|
-
(0,
|
|
21492
|
+
(0, import_react19.useEffect)(() => {
|
|
20558
21493
|
if (!isEditMode) {
|
|
20559
21494
|
editStylesRef.current?.base.remove();
|
|
20560
21495
|
editStylesRef.current?.forceHover.remove();
|
|
@@ -20780,11 +21715,11 @@ function OhhwellsBridge() {
|
|
|
20780
21715
|
footer [data-ohw-href-key] [data-ohw-editable][contenteditable],
|
|
20781
21716
|
footer [data-ohw-href-key] [data-ohw-editable][contenteditable] * {
|
|
20782
21717
|
outline: none !important;
|
|
20783
|
-
caret-color: ${
|
|
21718
|
+
caret-color: ${PRIMARY5} !important;
|
|
20784
21719
|
cursor: text !important;
|
|
20785
21720
|
}
|
|
20786
21721
|
[data-ohw-editable][contenteditable]::selection,
|
|
20787
|
-
[data-ohw-editable][contenteditable] *::selection { background: ${
|
|
21722
|
+
[data-ohw-editable][contenteditable] *::selection { background: ${PRIMARY5}59 !important; }
|
|
20788
21723
|
[data-ohw-editable-state], [data-ohw-editable-state] * { pointer-events: none !important; }
|
|
20789
21724
|
[data-ohw-editable-state][data-ohw-active-state] [data-ohw-editable] { pointer-events: auto !important; }
|
|
20790
21725
|
[data-ohw-editable-state][data-ohw-active-state][data-ohw-editable] { pointer-events: auto !important; }
|
|
@@ -22431,6 +23366,7 @@ function OhhwellsBridge() {
|
|
|
22431
23366
|
applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
|
|
22432
23367
|
}
|
|
22433
23368
|
applyBrandChrome(content);
|
|
23369
|
+
applyCustomCodeToHead(content);
|
|
22434
23370
|
initSectionInstancesFromContent(content, window.location.pathname);
|
|
22435
23371
|
let sectionsJson = null;
|
|
22436
23372
|
for (const [key, val] of Object.entries(content)) {
|
|
@@ -22443,6 +23379,7 @@ function OhhwellsBridge() {
|
|
|
22443
23379
|
if (key === STYLE_STORE_KEY) continue;
|
|
22444
23380
|
if (BRAND_CHROME_KEYS.has(key)) continue;
|
|
22445
23381
|
if (key === LOGO_PLACEHOLDER_KEY) continue;
|
|
23382
|
+
if (key === CUSTOM_CODE_AFTER_HEAD_KEY || key === CUSTOM_CODE_BEFORE_HEAD_KEY) continue;
|
|
22446
23383
|
if (LOGO_IMAGE_KEYS.includes(key) && !String(val ?? "").trim()) continue;
|
|
22447
23384
|
if (applyVideoSettingNode(key, val)) continue;
|
|
22448
23385
|
if (applyCarouselNode(key, val)) continue;
|
|
@@ -22564,6 +23501,7 @@ function OhhwellsBridge() {
|
|
|
22564
23501
|
deselectRef.current();
|
|
22565
23502
|
clearMediaSelectionRef.current();
|
|
22566
23503
|
};
|
|
23504
|
+
clearInteractionChromeRef.current = clearInteractionChrome;
|
|
22567
23505
|
const applyTreeToLocalState = (payload) => {
|
|
22568
23506
|
clearInteractionChrome();
|
|
22569
23507
|
const previous = aiSectionsRef.current;
|
|
@@ -23153,6 +24091,16 @@ function OhhwellsBridge() {
|
|
|
23153
24091
|
if (brandKitRef.current) {
|
|
23154
24092
|
nodes.push({ key: BRAND_KIT_KEY, type: "brand", text: brandKitRef.current });
|
|
23155
24093
|
}
|
|
24094
|
+
nodes.push({
|
|
24095
|
+
key: CUSTOM_CODE_BEFORE_HEAD_KEY,
|
|
24096
|
+
type: "text",
|
|
24097
|
+
text: editContentRef.current[CUSTOM_CODE_BEFORE_HEAD_KEY] ?? ""
|
|
24098
|
+
});
|
|
24099
|
+
nodes.push({
|
|
24100
|
+
key: CUSTOM_CODE_AFTER_HEAD_KEY,
|
|
24101
|
+
type: "text",
|
|
24102
|
+
text: editContentRef.current[CUSTOM_CODE_AFTER_HEAD_KEY] ?? ""
|
|
24103
|
+
});
|
|
23156
24104
|
document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
23157
24105
|
const formKey = formKeyOf(form);
|
|
23158
24106
|
if (!formKey) return;
|
|
@@ -23618,7 +24566,7 @@ function OhhwellsBridge() {
|
|
|
23618
24566
|
if (imageShowTimerRef.current) clearTimeout(imageShowTimerRef.current);
|
|
23619
24567
|
};
|
|
23620
24568
|
}, [isEditMode, refreshStateRules]);
|
|
23621
|
-
(0,
|
|
24569
|
+
(0, import_react19.useEffect)(() => {
|
|
23622
24570
|
if (!isEditMode) return;
|
|
23623
24571
|
const THRESHOLD = 10;
|
|
23624
24572
|
const resolveWasSelected = (el) => {
|
|
@@ -23774,7 +24722,7 @@ function OhhwellsBridge() {
|
|
|
23774
24722
|
unlockFooterDragInteraction();
|
|
23775
24723
|
};
|
|
23776
24724
|
}, [isEditMode]);
|
|
23777
|
-
(0,
|
|
24725
|
+
(0, import_react19.useEffect)(() => {
|
|
23778
24726
|
const handler = (e) => {
|
|
23779
24727
|
if (e.data?.type !== "ow:request-schedule-config") return;
|
|
23780
24728
|
const insertAfterVal = e.data.insertAfter;
|
|
@@ -23790,7 +24738,7 @@ function OhhwellsBridge() {
|
|
|
23790
24738
|
window.addEventListener("message", handler);
|
|
23791
24739
|
return () => window.removeEventListener("message", handler);
|
|
23792
24740
|
}, [processConfigRequest]);
|
|
23793
|
-
(0,
|
|
24741
|
+
(0, import_react19.useEffect)(() => {
|
|
23794
24742
|
if (!isEditMode) return;
|
|
23795
24743
|
document.querySelectorAll("[data-ohw-active-state]").forEach((el) => {
|
|
23796
24744
|
el.removeAttribute("data-ohw-active-state");
|
|
@@ -23814,7 +24762,7 @@ function OhhwellsBridge() {
|
|
|
23814
24762
|
postToParent2({
|
|
23815
24763
|
type: "ow:ready",
|
|
23816
24764
|
version: "1",
|
|
23817
|
-
bridgeVersion: "0.1.
|
|
24765
|
+
bridgeVersion: "0.1.120",
|
|
23818
24766
|
path: pathname,
|
|
23819
24767
|
nodes: collectEditableNodes(editContentRef.current),
|
|
23820
24768
|
sections
|
|
@@ -23826,13 +24774,13 @@ function OhhwellsBridge() {
|
|
|
23826
24774
|
clearTimeout(timer);
|
|
23827
24775
|
};
|
|
23828
24776
|
}, [pathname, isEditMode, refreshStateRules, postToParent2]);
|
|
23829
|
-
(0,
|
|
24777
|
+
(0, import_react19.useEffect)(() => {
|
|
23830
24778
|
scrollToHashSectionWhenReady();
|
|
23831
24779
|
const onHashChange = () => scrollToHashSectionWhenReady();
|
|
23832
24780
|
window.addEventListener("hashchange", onHashChange);
|
|
23833
24781
|
return () => window.removeEventListener("hashchange", onHashChange);
|
|
23834
24782
|
}, [pathname]);
|
|
23835
|
-
const handleCommand = (0,
|
|
24783
|
+
const handleCommand = (0, import_react19.useCallback)((cmd) => {
|
|
23836
24784
|
const el = activeElRef.current;
|
|
23837
24785
|
const selBefore = window.getSelection();
|
|
23838
24786
|
let savedOffsets = null;
|
|
@@ -23868,7 +24816,7 @@ function OhhwellsBridge() {
|
|
|
23868
24816
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
23869
24817
|
refreshActiveCommandsRef.current();
|
|
23870
24818
|
}, []);
|
|
23871
|
-
(0,
|
|
24819
|
+
(0, import_react19.useEffect)(() => {
|
|
23872
24820
|
const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
|
|
23873
24821
|
if (!session || !logoSizeDraft) return;
|
|
23874
24822
|
const onPanelAction = (e) => {
|
|
@@ -23906,7 +24854,7 @@ function OhhwellsBridge() {
|
|
|
23906
24854
|
window.addEventListener("message", onPanelAction);
|
|
23907
24855
|
return () => window.removeEventListener("message", onPanelAction);
|
|
23908
24856
|
}, [floatingPanel, logoSizeDraft, editorViewport, persistLogoSizeDraft, closeFloatingPanelAndDeselect]);
|
|
23909
|
-
const handleStateChange = (0,
|
|
24857
|
+
const handleStateChange = (0, import_react19.useCallback)((state) => {
|
|
23910
24858
|
if (!activeStateElRef.current) return;
|
|
23911
24859
|
const el = activeStateElRef.current;
|
|
23912
24860
|
if (state === "Default") {
|
|
@@ -23919,7 +24867,7 @@ function OhhwellsBridge() {
|
|
|
23919
24867
|
}
|
|
23920
24868
|
setToggleState((prev) => prev ? { ...prev, activeState: state } : null);
|
|
23921
24869
|
}, [deactivate]);
|
|
23922
|
-
const reselectAfterLinkPopover = (0,
|
|
24870
|
+
const reselectAfterLinkPopover = (0, import_react19.useCallback)(
|
|
23923
24871
|
(hrefKey) => {
|
|
23924
24872
|
requestAnimationFrame(() => {
|
|
23925
24873
|
const el = resolveHrefKeyElement(hrefKey);
|
|
@@ -23928,7 +24876,7 @@ function OhhwellsBridge() {
|
|
|
23928
24876
|
},
|
|
23929
24877
|
[resolveHrefKeyElement]
|
|
23930
24878
|
);
|
|
23931
|
-
const closeLinkPopover = (0,
|
|
24879
|
+
const closeLinkPopover = (0, import_react19.useCallback)(() => {
|
|
23932
24880
|
const session = linkPopoverSessionRef.current;
|
|
23933
24881
|
addNavAfterAnchorRef.current = null;
|
|
23934
24882
|
setLinkPopover(null);
|
|
@@ -23936,9 +24884,9 @@ function OhhwellsBridge() {
|
|
|
23936
24884
|
reselectAfterLinkPopover(session.key);
|
|
23937
24885
|
}
|
|
23938
24886
|
}, [reselectAfterLinkPopover]);
|
|
23939
|
-
const closeLinkPopoverRef = (0,
|
|
24887
|
+
const closeLinkPopoverRef = (0, import_react19.useRef)(closeLinkPopover);
|
|
23940
24888
|
closeLinkPopoverRef.current = closeLinkPopover;
|
|
23941
|
-
const openLinkPopoverForActive = (0,
|
|
24889
|
+
const openLinkPopoverForActive = (0, import_react19.useCallback)(() => {
|
|
23942
24890
|
const hrefCtx = getHrefKeyFromElement(activeElRef.current);
|
|
23943
24891
|
if (!hrefCtx) return;
|
|
23944
24892
|
bumpLinkPopoverGrace();
|
|
@@ -23949,7 +24897,7 @@ function OhhwellsBridge() {
|
|
|
23949
24897
|
});
|
|
23950
24898
|
deactivate();
|
|
23951
24899
|
}, [deactivate]);
|
|
23952
|
-
const openLinkPopoverForSelected = (0,
|
|
24900
|
+
const openLinkPopoverForSelected = (0, import_react19.useCallback)(() => {
|
|
23953
24901
|
const anchor = selectedElRef.current;
|
|
23954
24902
|
if (!anchor) return;
|
|
23955
24903
|
const key = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -23966,7 +24914,7 @@ function OhhwellsBridge() {
|
|
|
23966
24914
|
});
|
|
23967
24915
|
deselect();
|
|
23968
24916
|
}, [deselect]);
|
|
23969
|
-
const handleSelectParent = (0,
|
|
24917
|
+
const handleSelectParent = (0, import_react19.useCallback)(() => {
|
|
23970
24918
|
const selected = selectedElRef.current;
|
|
23971
24919
|
if (!selected) return;
|
|
23972
24920
|
if (toolbarVariantRef.current === "select-frame") {
|
|
@@ -23993,7 +24941,7 @@ function OhhwellsBridge() {
|
|
|
23993
24941
|
}
|
|
23994
24942
|
deselectRef.current();
|
|
23995
24943
|
}, []);
|
|
23996
|
-
const handleDuplicateSelected = (0,
|
|
24944
|
+
const handleDuplicateSelected = (0, import_react19.useCallback)(() => {
|
|
23997
24945
|
const selected = selectedElRef.current;
|
|
23998
24946
|
if (!selected || !isNavigationItem2(selected)) return;
|
|
23999
24947
|
const hrefKey = selected.getAttribute("data-ohw-href-key");
|
|
@@ -24126,7 +25074,7 @@ function OhhwellsBridge() {
|
|
|
24126
25074
|
});
|
|
24127
25075
|
}
|
|
24128
25076
|
}, [postToParent2]);
|
|
24129
|
-
const runPendingDeleteUndo = (0,
|
|
25077
|
+
const runPendingDeleteUndo = (0, import_react19.useCallback)(() => {
|
|
24130
25078
|
const pending = pendingDeleteUndoRef.current;
|
|
24131
25079
|
if (!pending) return false;
|
|
24132
25080
|
pendingDeleteUndoRef.current = null;
|
|
@@ -24134,7 +25082,7 @@ function OhhwellsBridge() {
|
|
|
24134
25082
|
enforceLinkHrefs();
|
|
24135
25083
|
return true;
|
|
24136
25084
|
}, []);
|
|
24137
|
-
const handleDeleteSelected = (0,
|
|
25085
|
+
const handleDeleteSelected = (0, import_react19.useCallback)(() => {
|
|
24138
25086
|
const selected = selectedElRef.current;
|
|
24139
25087
|
if (!selected) return false;
|
|
24140
25088
|
return deleteSelectedNavFooterItem({
|
|
@@ -24155,7 +25103,7 @@ function OhhwellsBridge() {
|
|
|
24155
25103
|
}, [postToParent2]);
|
|
24156
25104
|
handleDeleteSelectedRef.current = handleDeleteSelected;
|
|
24157
25105
|
runPendingDeleteUndoRef.current = runPendingDeleteUndo;
|
|
24158
|
-
const handleLinkPopoverSubmit = (0,
|
|
25106
|
+
const handleLinkPopoverSubmit = (0, import_react19.useCallback)(
|
|
24159
25107
|
(target) => {
|
|
24160
25108
|
const session = linkPopoverSessionRef.current;
|
|
24161
25109
|
if (!session) return;
|
|
@@ -24221,14 +25169,14 @@ function OhhwellsBridge() {
|
|
|
24221
25169
|
const showEditLink = toolbarShowEditLink;
|
|
24222
25170
|
const currentSections = sectionsByPath[pathname] ?? [];
|
|
24223
25171
|
linkPopoverOpenRef.current = linkPopover !== null;
|
|
24224
|
-
const handleMediaSelect = (0,
|
|
25172
|
+
const handleMediaSelect = (0, import_react19.useCallback)((key) => {
|
|
24225
25173
|
const el = hoveredImageRef.current?.dataset.ohwKey === key ? hoveredImageRef.current : Array.from(document.querySelectorAll(MEDIA_SELECTOR)).find(
|
|
24226
25174
|
(m) => (m.dataset.ohwKey ?? "") === key
|
|
24227
25175
|
) ?? null;
|
|
24228
25176
|
if (!el) return;
|
|
24229
25177
|
selectMediaElementRef.current(el);
|
|
24230
25178
|
}, []);
|
|
24231
|
-
const handleMediaReplace = (0,
|
|
25179
|
+
const handleMediaReplace = (0, import_react19.useCallback)(
|
|
24232
25180
|
(key) => {
|
|
24233
25181
|
postToParent2({
|
|
24234
25182
|
type: "ow:image-pick",
|
|
@@ -24238,13 +25186,13 @@ function OhhwellsBridge() {
|
|
|
24238
25186
|
},
|
|
24239
25187
|
[postToParent2, mediaHover?.elementType, selectedMedia?.elementType]
|
|
24240
25188
|
);
|
|
24241
|
-
const handleEditCarousel = (0,
|
|
25189
|
+
const handleEditCarousel = (0, import_react19.useCallback)(
|
|
24242
25190
|
(key) => {
|
|
24243
25191
|
postToParent2({ type: "ow:carousel-open", key, images: readCarouselValue(key) });
|
|
24244
25192
|
},
|
|
24245
25193
|
[postToParent2]
|
|
24246
25194
|
);
|
|
24247
|
-
const handleMediaFadeOutComplete = (0,
|
|
25195
|
+
const handleMediaFadeOutComplete = (0, import_react19.useCallback)((key) => {
|
|
24248
25196
|
setUploadingRects((prev) => {
|
|
24249
25197
|
if (!(key in prev)) return prev;
|
|
24250
25198
|
const next = { ...prev };
|
|
@@ -24252,7 +25200,7 @@ function OhhwellsBridge() {
|
|
|
24252
25200
|
return next;
|
|
24253
25201
|
});
|
|
24254
25202
|
}, []);
|
|
24255
|
-
const handleVideoSettingsChange = (0,
|
|
25203
|
+
const handleVideoSettingsChange = (0, import_react19.useCallback)(
|
|
24256
25204
|
(key, settings) => {
|
|
24257
25205
|
document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
|
|
24258
25206
|
const video = getVideoEl2(el);
|
|
@@ -24274,14 +25222,14 @@ function OhhwellsBridge() {
|
|
|
24274
25222
|
},
|
|
24275
25223
|
[postToParent2]
|
|
24276
25224
|
);
|
|
24277
|
-
return /* @__PURE__ */ (0,
|
|
24278
|
-
/* @__PURE__ */ (0,
|
|
24279
|
-
/* @__PURE__ */ (0,
|
|
24280
|
-
subdomain && !isEditMode && showBranding && /* @__PURE__ */ (0,
|
|
25225
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
|
|
25226
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { id: "ohw-loader", suppressHydrationWarning: true, style: { ...OHW_LOADER_STYLE, display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(OhwLoaderSpinner, {}) }),
|
|
25227
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("script", { suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: OHW_LOADER_PREHYDRATE_SCRIPT } }),
|
|
25228
|
+
subdomain && !isEditMode && showBranding && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(MadeWithOhhWells, {}),
|
|
24281
25229
|
bridgeRoot ? (0, import_react_dom5.createPortal)(
|
|
24282
|
-
/* @__PURE__ */ (0,
|
|
24283
|
-
/* @__PURE__ */ (0,
|
|
24284
|
-
isEditMode && /* @__PURE__ */ (0,
|
|
25230
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
|
|
25231
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
|
|
25232
|
+
isEditMode && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24285
25233
|
AiSectionOverlay,
|
|
24286
25234
|
{
|
|
24287
25235
|
postToParent: postToParent2,
|
|
@@ -24289,7 +25237,16 @@ function OhhwellsBridge() {
|
|
|
24289
25237
|
onSelectionChange: handleAiSectionSelectionChange
|
|
24290
25238
|
}
|
|
24291
25239
|
),
|
|
24292
|
-
isEditMode && /* @__PURE__ */ (0,
|
|
25240
|
+
isEditMode && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
25241
|
+
AiMediaStripOverlay,
|
|
25242
|
+
{
|
|
25243
|
+
postToParent: postToParent2,
|
|
25244
|
+
aiSectionsRef,
|
|
25245
|
+
applyTreeLocalRef,
|
|
25246
|
+
clearInteractionChromeRef
|
|
25247
|
+
}
|
|
25248
|
+
),
|
|
25249
|
+
isEditMode && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24293
25250
|
AiPricingCardOverlay,
|
|
24294
25251
|
{
|
|
24295
25252
|
postToParent: postToParent2,
|
|
@@ -24297,12 +25254,12 @@ function OhhwellsBridge() {
|
|
|
24297
25254
|
applyTreeLocalRef
|
|
24298
25255
|
}
|
|
24299
25256
|
),
|
|
24300
|
-
isSectionDragging && sectionDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
25257
|
+
isSectionDragging && sectionDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24301
25258
|
"div",
|
|
24302
25259
|
{
|
|
24303
25260
|
className: "pointer-events-none fixed z-2147483646",
|
|
24304
25261
|
style: { left: slot.left, top: slot.y, width: slot.width, height: 3, transform: "translateY(-50%)" },
|
|
24305
|
-
children: /* @__PURE__ */ (0,
|
|
25262
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24306
25263
|
DropIndicator,
|
|
24307
25264
|
{
|
|
24308
25265
|
direction: "horizontal",
|
|
@@ -24313,7 +25270,7 @@ function OhhwellsBridge() {
|
|
|
24313
25270
|
},
|
|
24314
25271
|
`section-drop-${slot.insertIndex}-${i}`
|
|
24315
25272
|
)),
|
|
24316
|
-
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0,
|
|
25273
|
+
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24317
25274
|
MediaOverlay,
|
|
24318
25275
|
{
|
|
24319
25276
|
hover: { key, rect, elementType: "image", isDragOver: false, hasTextOverlap: false },
|
|
@@ -24324,7 +25281,7 @@ function OhhwellsBridge() {
|
|
|
24324
25281
|
},
|
|
24325
25282
|
`uploading-${key}`
|
|
24326
25283
|
)),
|
|
24327
|
-
mediaHover && !(mediaHover.key in uploadingRects) && mediaHover.key !== selectedMedia?.key && /* @__PURE__ */ (0,
|
|
25284
|
+
mediaHover && !(mediaHover.key in uploadingRects) && mediaHover.key !== selectedMedia?.key && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24328
25285
|
MediaOverlay,
|
|
24329
25286
|
{
|
|
24330
25287
|
hover: mediaHover,
|
|
@@ -24335,7 +25292,7 @@ function OhhwellsBridge() {
|
|
|
24335
25292
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
24336
25293
|
}
|
|
24337
25294
|
),
|
|
24338
|
-
selectedMedia && !(selectedMedia.key in uploadingRects) && !linkPopover && /* @__PURE__ */ (0,
|
|
25295
|
+
selectedMedia && !(selectedMedia.key in uploadingRects) && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24339
25296
|
MediaOverlay,
|
|
24340
25297
|
{
|
|
24341
25298
|
hover: selectedMedia,
|
|
@@ -24347,7 +25304,7 @@ function OhhwellsBridge() {
|
|
|
24347
25304
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
24348
25305
|
}
|
|
24349
25306
|
),
|
|
24350
|
-
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0,
|
|
25307
|
+
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24351
25308
|
CarouselOverlay,
|
|
24352
25309
|
{
|
|
24353
25310
|
hover: carouselHover,
|
|
@@ -24355,10 +25312,10 @@ function OhhwellsBridge() {
|
|
|
24355
25312
|
cueOnly: !!carouselHover.fullBleedSectionId && carouselHover.fullBleedSectionId !== selectedAiSectionId
|
|
24356
25313
|
}
|
|
24357
25314
|
),
|
|
24358
|
-
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0,
|
|
24359
|
-
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0,
|
|
24360
|
-
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */ (0,
|
|
24361
|
-
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
25315
|
+
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
|
|
25316
|
+
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemInteractionLayer, { rect, state: "sibling-hint" }, `sibling-hint-${i}`)),
|
|
25317
|
+
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemInteractionLayer, { rect: draggedItemRect, state: "dragging" }),
|
|
25318
|
+
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24362
25319
|
"div",
|
|
24363
25320
|
{
|
|
24364
25321
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -24368,7 +25325,7 @@ function OhhwellsBridge() {
|
|
|
24368
25325
|
width: slot.width,
|
|
24369
25326
|
height: slot.height
|
|
24370
25327
|
},
|
|
24371
|
-
children: /* @__PURE__ */ (0,
|
|
25328
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24372
25329
|
DropIndicator,
|
|
24373
25330
|
{
|
|
24374
25331
|
direction: slot.direction,
|
|
@@ -24379,7 +25336,7 @@ function OhhwellsBridge() {
|
|
|
24379
25336
|
},
|
|
24380
25337
|
`footer-drop-${slot.direction}-${slot.columnIndex}-${slot.insertIndex}-${i}`
|
|
24381
25338
|
)),
|
|
24382
|
-
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
25339
|
+
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24383
25340
|
"div",
|
|
24384
25341
|
{
|
|
24385
25342
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -24389,7 +25346,7 @@ function OhhwellsBridge() {
|
|
|
24389
25346
|
width: slot.width,
|
|
24390
25347
|
height: slot.height
|
|
24391
25348
|
},
|
|
24392
|
-
children: /* @__PURE__ */ (0,
|
|
25349
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24393
25350
|
DropIndicator,
|
|
24394
25351
|
{
|
|
24395
25352
|
direction: slot.direction,
|
|
@@ -24400,10 +25357,10 @@ function OhhwellsBridge() {
|
|
|
24400
25357
|
},
|
|
24401
25358
|
`nav-drop-${slot.direction}-${slot.parentId ?? "root"}-${slot.insertIndex}-${i}`
|
|
24402
25359
|
)),
|
|
24403
|
-
hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ (0,
|
|
24404
|
-
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0,
|
|
24405
|
-
hoveredTextRect && !hoveredNavContainerRect && !hoveredItemRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0,
|
|
24406
|
-
formPickRect && !isItemDragging && /* @__PURE__ */ (0,
|
|
25360
|
+
hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
|
|
25361
|
+
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
|
|
25362
|
+
hoveredTextRect && !hoveredNavContainerRect && !hoveredItemRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemInteractionLayer, { rect: hoveredTextRect, state: "hover" }),
|
|
25363
|
+
formPickRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24407
25364
|
ItemInteractionLayer,
|
|
24408
25365
|
{
|
|
24409
25366
|
rect: formPickRect,
|
|
@@ -24411,13 +25368,13 @@ function OhhwellsBridge() {
|
|
|
24411
25368
|
itemDragSurface: false,
|
|
24412
25369
|
toolbarAlign: "left",
|
|
24413
25370
|
chromeGap: 24,
|
|
24414
|
-
toolbar: fieldPickRect ? void 0 : /* @__PURE__ */ (0,
|
|
25371
|
+
toolbar: fieldPickRect ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
24415
25372
|
"div",
|
|
24416
25373
|
{
|
|
24417
25374
|
"data-ohw-form-toolbar": "",
|
|
24418
25375
|
className: "pointer-events-auto flex items-center gap-0.5 whitespace-nowrap rounded-lg border border-border bg-background p-1 shadow-md",
|
|
24419
25376
|
children: [
|
|
24420
|
-
/* @__PURE__ */ (0,
|
|
25377
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24421
25378
|
"button",
|
|
24422
25379
|
{
|
|
24423
25380
|
type: "button",
|
|
@@ -24425,11 +25382,11 @@ function OhhwellsBridge() {
|
|
|
24425
25382
|
className: "flex h-7 w-7 items-center justify-center rounded-md text-foreground transition-colors hover:bg-muted/80",
|
|
24426
25383
|
onClick: () => setFieldTypePickerOpen((open) => !open),
|
|
24427
25384
|
"data-ohw-add-field": "",
|
|
24428
|
-
children: /* @__PURE__ */ (0,
|
|
25385
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react19.Plus, { size: 15, "aria-hidden": true })
|
|
24429
25386
|
}
|
|
24430
25387
|
),
|
|
24431
|
-
/* @__PURE__ */ (0,
|
|
24432
|
-
/* @__PURE__ */ (0,
|
|
25388
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border" }),
|
|
25389
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
24433
25390
|
"button",
|
|
24434
25391
|
{
|
|
24435
25392
|
type: "button",
|
|
@@ -24445,11 +25402,11 @@ function OhhwellsBridge() {
|
|
|
24445
25402
|
});
|
|
24446
25403
|
},
|
|
24447
25404
|
children: [
|
|
24448
|
-
/* @__PURE__ */ (0,
|
|
25405
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react19.Settings, { size: 14, "aria-hidden": true }),
|
|
24449
25406
|
"Form settings",
|
|
24450
25407
|
formPickCount ? (
|
|
24451
25408
|
// Counter pill, per the design — not a text suffix.
|
|
24452
|
-
/* @__PURE__ */ (0,
|
|
25409
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24453
25410
|
"span",
|
|
24454
25411
|
{
|
|
24455
25412
|
"data-ohw-form-count": "",
|
|
@@ -24461,8 +25418,8 @@ function OhhwellsBridge() {
|
|
|
24461
25418
|
]
|
|
24462
25419
|
}
|
|
24463
25420
|
),
|
|
24464
|
-
/* @__PURE__ */ (0,
|
|
24465
|
-
/* @__PURE__ */ (0,
|
|
25421
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border" }),
|
|
25422
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex items-center rounded-md bg-muted/70 p-0.5", children: ["default", "success"].map((state) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24466
25423
|
"button",
|
|
24467
25424
|
{
|
|
24468
25425
|
type: "button",
|
|
@@ -24493,7 +25450,7 @@ function OhhwellsBridge() {
|
|
|
24493
25450
|
)
|
|
24494
25451
|
}
|
|
24495
25452
|
),
|
|
24496
|
-
formHoverRect && !isItemDragging && /* @__PURE__ */ (0,
|
|
25453
|
+
formHoverRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24497
25454
|
ItemInteractionLayer,
|
|
24498
25455
|
{
|
|
24499
25456
|
rect: formHoverRect,
|
|
@@ -24501,7 +25458,7 @@ function OhhwellsBridge() {
|
|
|
24501
25458
|
chromeGap: formHoverElRef.current && getFieldWrapper(formHoverElRef.current) ? 8 : 24
|
|
24502
25459
|
}
|
|
24503
25460
|
),
|
|
24504
|
-
fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0,
|
|
25461
|
+
fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24505
25462
|
ItemInteractionLayer,
|
|
24506
25463
|
{
|
|
24507
25464
|
rect: fieldPickRect,
|
|
@@ -24513,7 +25470,7 @@ function OhhwellsBridge() {
|
|
|
24513
25470
|
dragHandleLabel: "Reorder field",
|
|
24514
25471
|
onDragHandleDragStart: handleFieldDragStart,
|
|
24515
25472
|
onDragHandleDragEnd: handleFieldDragEnd,
|
|
24516
|
-
toolbar: /* @__PURE__ */ (0,
|
|
25473
|
+
toolbar: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24517
25474
|
FormFieldToolbar,
|
|
24518
25475
|
{
|
|
24519
25476
|
type: fieldPickState.type,
|
|
@@ -24526,12 +25483,12 @@ function OhhwellsBridge() {
|
|
|
24526
25483
|
)
|
|
24527
25484
|
}
|
|
24528
25485
|
),
|
|
24529
|
-
fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
25486
|
+
fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24530
25487
|
"div",
|
|
24531
25488
|
{
|
|
24532
25489
|
className: "pointer-events-none fixed z-[2147483644]",
|
|
24533
25490
|
style: { top: slot.top, left: slot.left, width: slot.width },
|
|
24534
|
-
children: /* @__PURE__ */ (0,
|
|
25491
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24535
25492
|
DropIndicator,
|
|
24536
25493
|
{
|
|
24537
25494
|
direction: "horizontal",
|
|
@@ -24544,7 +25501,7 @@ function OhhwellsBridge() {
|
|
|
24544
25501
|
)) : null,
|
|
24545
25502
|
fieldTypePickerOpen && formPickRect ? (() => {
|
|
24546
25503
|
const toolbar = document.querySelector("[data-ohw-form-toolbar]")?.getBoundingClientRect();
|
|
24547
|
-
return /* @__PURE__ */ (0,
|
|
25504
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24548
25505
|
"div",
|
|
24549
25506
|
{
|
|
24550
25507
|
className: "pointer-events-none fixed z-[2147483645]",
|
|
@@ -24552,12 +25509,12 @@ function OhhwellsBridge() {
|
|
|
24552
25509
|
top: toolbar ? toolbar.bottom + 6 : formPickRect.top + 16,
|
|
24553
25510
|
left: toolbar ? toolbar.left : formPickRect.left + 24
|
|
24554
25511
|
},
|
|
24555
|
-
children: /* @__PURE__ */ (0,
|
|
25512
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(FieldTypePicker, { onPick: handleAddField })
|
|
24556
25513
|
}
|
|
24557
25514
|
);
|
|
24558
25515
|
})() : null,
|
|
24559
|
-
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ (0,
|
|
24560
|
-
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0,
|
|
25516
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(NavbarContainerChrome, { rect: toolbarRect, onAdd: handleAddTopLevelNavItem }),
|
|
25517
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24561
25518
|
FooterContainerChrome,
|
|
24562
25519
|
{
|
|
24563
25520
|
rect: toolbarRect,
|
|
@@ -24565,7 +25522,7 @@ function OhhwellsBridge() {
|
|
|
24565
25522
|
addDisabled: !canAddFooterColumn()
|
|
24566
25523
|
}
|
|
24567
25524
|
),
|
|
24568
|
-
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */ (0,
|
|
25525
|
+
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24569
25526
|
ItemInteractionLayer,
|
|
24570
25527
|
{
|
|
24571
25528
|
rect: isItemDragging && draggedItemRect && (footerDragRef.current?.wasSelected || navDragRef.current?.wasSelected) ? draggedItemRect : toolbarRect,
|
|
@@ -24581,7 +25538,7 @@ function OhhwellsBridge() {
|
|
|
24581
25538
|
onItemPointerDown: toolbarVariant === "logo" ? void 0 : handleItemChromePointerDown,
|
|
24582
25539
|
onItemClick: toolbarVariant === "logo" ? void 0 : handleItemChromeClick,
|
|
24583
25540
|
itemDragSurface: toolbarVariant !== "logo" && !isFooterFrameSelection && !selectedIsSocialsRow,
|
|
24584
|
-
toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */ (0,
|
|
25541
|
+
toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24585
25542
|
ItemActionToolbar,
|
|
24586
25543
|
{
|
|
24587
25544
|
onEditLink: openLinkPopoverForSelected,
|
|
@@ -24625,8 +25582,8 @@ function OhhwellsBridge() {
|
|
|
24625
25582
|
) : void 0
|
|
24626
25583
|
}
|
|
24627
25584
|
),
|
|
24628
|
-
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && !isRectOutsideClip(toolbarRect, getIframeVisibleClip(parentScrollRef.current)) && /* @__PURE__ */ (0,
|
|
24629
|
-
/* @__PURE__ */ (0,
|
|
25585
|
+
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && !isRectOutsideClip(toolbarRect, getIframeVisibleClip(parentScrollRef.current)) && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
|
|
25586
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24630
25587
|
EditGlowChrome,
|
|
24631
25588
|
{
|
|
24632
25589
|
rect: toolbarRect,
|
|
@@ -24636,7 +25593,7 @@ function OhhwellsBridge() {
|
|
|
24636
25593
|
hideHandle: isItemDragging
|
|
24637
25594
|
}
|
|
24638
25595
|
),
|
|
24639
|
-
/* @__PURE__ */ (0,
|
|
25596
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24640
25597
|
FloatingToolbar,
|
|
24641
25598
|
{
|
|
24642
25599
|
rect: toolbarRect,
|
|
@@ -24649,7 +25606,7 @@ function OhhwellsBridge() {
|
|
|
24649
25606
|
}
|
|
24650
25607
|
)
|
|
24651
25608
|
] }),
|
|
24652
|
-
maxBadge && /* @__PURE__ */ (0,
|
|
25609
|
+
maxBadge && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
24653
25610
|
"div",
|
|
24654
25611
|
{
|
|
24655
25612
|
"data-ohw-max-badge": "",
|
|
@@ -24675,7 +25632,7 @@ function OhhwellsBridge() {
|
|
|
24675
25632
|
]
|
|
24676
25633
|
}
|
|
24677
25634
|
),
|
|
24678
|
-
toggleState && !linkPopover && /* @__PURE__ */ (0,
|
|
25635
|
+
toggleState && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24679
25636
|
StateToggle,
|
|
24680
25637
|
{
|
|
24681
25638
|
rect: toggleState.rect,
|
|
@@ -24684,15 +25641,15 @@ function OhhwellsBridge() {
|
|
|
24684
25641
|
onStateChange: handleStateChange
|
|
24685
25642
|
}
|
|
24686
25643
|
),
|
|
24687
|
-
sectionGap && !linkPopover && /* @__PURE__ */ (0,
|
|
25644
|
+
sectionGap && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
24688
25645
|
"div",
|
|
24689
25646
|
{
|
|
24690
25647
|
"data-ohw-section-insert-line": "",
|
|
24691
25648
|
className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
|
|
24692
25649
|
style: { top: sectionGap.y, transform: "translateY(-50%)" },
|
|
24693
25650
|
children: [
|
|
24694
|
-
/* @__PURE__ */ (0,
|
|
24695
|
-
/* @__PURE__ */ (0,
|
|
25651
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } }),
|
|
25652
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24696
25653
|
Badge,
|
|
24697
25654
|
{
|
|
24698
25655
|
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",
|
|
@@ -24709,11 +25666,11 @@ function OhhwellsBridge() {
|
|
|
24709
25666
|
children: "Add Section"
|
|
24710
25667
|
}
|
|
24711
25668
|
),
|
|
24712
|
-
/* @__PURE__ */ (0,
|
|
25669
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } })
|
|
24713
25670
|
]
|
|
24714
25671
|
}
|
|
24715
25672
|
),
|
|
24716
|
-
linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0,
|
|
25673
|
+
linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24717
25674
|
LinkPopover,
|
|
24718
25675
|
{
|
|
24719
25676
|
panelRef: linkPopoverPanelRef,
|
|
@@ -24730,7 +25687,7 @@ function OhhwellsBridge() {
|
|
|
24730
25687
|
},
|
|
24731
25688
|
linkPopover.key
|
|
24732
25689
|
) : null,
|
|
24733
|
-
floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */ (0,
|
|
25690
|
+
floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24734
25691
|
FloatingPanel,
|
|
24735
25692
|
{
|
|
24736
25693
|
open: true,
|
|
@@ -24740,7 +25697,7 @@ function OhhwellsBridge() {
|
|
|
24740
25697
|
onPositionChange: setFloatingPanelPos,
|
|
24741
25698
|
parentScroll: parentScrollSnap ?? parentScrollRef.current,
|
|
24742
25699
|
onClose: closeFloatingPanelOnly,
|
|
24743
|
-
children: /* @__PURE__ */ (0,
|
|
25700
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
24744
25701
|
SocialsDisplayPanel,
|
|
24745
25702
|
{
|
|
24746
25703
|
display: socialsDisplayFor(floatingPanel.row, editContentRef.current),
|