@ohhwells/bridge 0.1.117-next.319 → 0.1.117-next.321
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 +742 -1209
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +712 -1179
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -75,7 +75,7 @@ __export(index_exports, {
|
|
|
75
75
|
module.exports = __toCommonJS(index_exports);
|
|
76
76
|
|
|
77
77
|
// src/OhhwellsBridge.tsx
|
|
78
|
-
var
|
|
78
|
+
var import_react18 = __toESM(require("react"), 1);
|
|
79
79
|
var import_client2 = require("react-dom/client");
|
|
80
80
|
var import_react_dom4 = require("react-dom");
|
|
81
81
|
|
|
@@ -1624,14 +1624,15 @@ function MediaBox({
|
|
|
1624
1624
|
alt,
|
|
1625
1625
|
fit,
|
|
1626
1626
|
grayscale,
|
|
1627
|
-
fixedSize
|
|
1627
|
+
fixedSize,
|
|
1628
|
+
genericImageEdit = true
|
|
1628
1629
|
}) {
|
|
1629
1630
|
const url = refValue ? ctx.resolveMedia(refValue) : null;
|
|
1630
1631
|
const isIcon = /^(lucide|simple):/.test(refValue);
|
|
1631
1632
|
const aspectRatio = aspect && /^\d+:\d+$/.test(aspect) ? aspect.replace(":", " / ") : void 0;
|
|
1632
1633
|
const editAttrs = ctx.keyFor && editPath ? {
|
|
1633
1634
|
"data-ohw-key": ctx.keyFor(editPath),
|
|
1634
|
-
"data-ohw-editable":
|
|
1635
|
+
...isIcon ? { "data-ohw-editable": "icon" } : genericImageEdit ? { "data-ohw-editable": "image" } : {}
|
|
1635
1636
|
} : {};
|
|
1636
1637
|
if (isIcon) {
|
|
1637
1638
|
const Icon = refValue.startsWith("lucide:") ? lucideByName(refValue.slice(7)) : null;
|
|
@@ -2449,7 +2450,8 @@ function MediaStripBlock({ node, ctx, path }) {
|
|
|
2449
2450
|
alt: item.alt,
|
|
2450
2451
|
fit: variant === "logos" ? "contain" : "cover",
|
|
2451
2452
|
grayscale: treatment === "grayscale",
|
|
2452
|
-
fixedSize: variant === "logos"
|
|
2453
|
+
fixedSize: variant === "logos",
|
|
2454
|
+
genericImageEdit: false
|
|
2453
2455
|
}
|
|
2454
2456
|
)
|
|
2455
2457
|
}
|
|
@@ -10024,517 +10026,9 @@ function AiSectionOverlay({
|
|
|
10024
10026
|
] });
|
|
10025
10027
|
}
|
|
10026
10028
|
|
|
10027
|
-
// src/ui/ai-section/AiPricingCardOverlay.tsx
|
|
10028
|
-
var import_react9 = require("react");
|
|
10029
|
-
var import_lucide_react8 = require("lucide-react");
|
|
10030
|
-
|
|
10031
|
-
// src/lib/ai-pricing-tree.ts
|
|
10032
|
-
var PRICING_MIN_CARDS = 1;
|
|
10033
|
-
var PRICING_MAX_CARDS = 4;
|
|
10034
|
-
function isPricingCard(node) {
|
|
10035
|
-
return typeof node === "object" && node !== null && node.type === "card" && node.slots?.preset === "pricing";
|
|
10036
|
-
}
|
|
10037
|
-
function isPricingCollection(node) {
|
|
10038
|
-
return node.type === "collection" && Array.isArray(node.children) && node.children.length > 0 && isPricingCard(node.children[0]);
|
|
10039
|
-
}
|
|
10040
|
-
function findCollection(node) {
|
|
10041
|
-
if (isPricingCollection(node)) return node;
|
|
10042
|
-
for (const child of node.children ?? []) {
|
|
10043
|
-
const found = findCollection(child);
|
|
10044
|
-
if (found) return found;
|
|
10045
|
-
}
|
|
10046
|
-
return null;
|
|
10047
|
-
}
|
|
10048
|
-
function findPricingCollection(tree) {
|
|
10049
|
-
for (const row of tree.rows ?? []) {
|
|
10050
|
-
for (const block of row.blocks ?? []) {
|
|
10051
|
-
const found = findCollection(block);
|
|
10052
|
-
if (found) return found;
|
|
10053
|
-
}
|
|
10054
|
-
}
|
|
10055
|
-
return null;
|
|
10056
|
-
}
|
|
10057
|
-
function pricingCardCount(tree) {
|
|
10058
|
-
return findPricingCollection(tree)?.children?.length ?? 0;
|
|
10059
|
-
}
|
|
10060
|
-
function withPricingCollection(tree, mutate) {
|
|
10061
|
-
const next = JSON.parse(JSON.stringify(tree));
|
|
10062
|
-
const collection = findPricingCollection(next);
|
|
10063
|
-
if (!collection || !collection.children) return null;
|
|
10064
|
-
return mutate(collection) ? next : null;
|
|
10065
|
-
}
|
|
10066
|
-
function addPricingTier(tree) {
|
|
10067
|
-
return withPricingCollection(tree, (collection) => {
|
|
10068
|
-
const children = collection.children;
|
|
10069
|
-
if (children.length >= PRICING_MAX_CARDS) return false;
|
|
10070
|
-
const clone = JSON.parse(JSON.stringify(children[children.length - 1]));
|
|
10071
|
-
clone.slots = clone.slots ?? {};
|
|
10072
|
-
delete clone.slots.featured;
|
|
10073
|
-
clone.slots.heading = "New tier";
|
|
10074
|
-
children.push(clone);
|
|
10075
|
-
collection.slots = { ...collection.slots, itemsPerRow: children.length };
|
|
10076
|
-
return true;
|
|
10077
|
-
});
|
|
10078
|
-
}
|
|
10079
|
-
function removePricingTier(tree, index) {
|
|
10080
|
-
return withPricingCollection(tree, (collection) => {
|
|
10081
|
-
const children = collection.children;
|
|
10082
|
-
if (children.length <= PRICING_MIN_CARDS) return false;
|
|
10083
|
-
if (index < 0 || index >= children.length) return false;
|
|
10084
|
-
children.splice(index, 1);
|
|
10085
|
-
collection.slots = { ...collection.slots, itemsPerRow: children.length };
|
|
10086
|
-
return true;
|
|
10087
|
-
});
|
|
10088
|
-
}
|
|
10089
|
-
function setPricingCardFeatured(tree, index, patch) {
|
|
10090
|
-
return withPricingCollection(tree, (collection) => {
|
|
10091
|
-
const children = collection.children;
|
|
10092
|
-
if (index < 0 || index >= children.length) return false;
|
|
10093
|
-
const target = children[index];
|
|
10094
|
-
target.slots = target.slots ?? {};
|
|
10095
|
-
target.slots.featured = { ...patch };
|
|
10096
|
-
return true;
|
|
10097
|
-
});
|
|
10098
|
-
}
|
|
10099
|
-
function addPricingCardButton(tree, index, label) {
|
|
10100
|
-
return withPricingCollection(tree, (collection) => {
|
|
10101
|
-
const children = collection.children;
|
|
10102
|
-
if (index < 0 || index >= children.length) return false;
|
|
10103
|
-
const target = children[index];
|
|
10104
|
-
const buttons = (target.children ?? []).filter((c) => c.type === "button");
|
|
10105
|
-
if (buttons.length >= 2) return false;
|
|
10106
|
-
const hasPrimary = buttons.some((b) => b.slots?.variant === "primary");
|
|
10107
|
-
target.children = [
|
|
10108
|
-
...target.children ?? [],
|
|
10109
|
-
{ type: "button", span: 12, slots: { label, href: "#", variant: hasPrimary ? "secondary" : "primary" } }
|
|
10110
|
-
];
|
|
10111
|
-
return true;
|
|
10112
|
-
});
|
|
10113
|
-
}
|
|
10114
|
-
function removePricingCardButton(tree, index) {
|
|
10115
|
-
return withPricingCollection(tree, (collection) => {
|
|
10116
|
-
const children = collection.children;
|
|
10117
|
-
if (index < 0 || index >= children.length) return false;
|
|
10118
|
-
const target = children[index];
|
|
10119
|
-
const buttons = (target.children ?? []).filter((c) => c.type === "button");
|
|
10120
|
-
if (buttons.length === 0) return false;
|
|
10121
|
-
const lastButton = buttons[buttons.length - 1];
|
|
10122
|
-
target.children = (target.children ?? []).filter((c) => c !== lastButton);
|
|
10123
|
-
return true;
|
|
10124
|
-
});
|
|
10125
|
-
}
|
|
10126
|
-
var PRICING_FEATURES_MIN = 1;
|
|
10127
|
-
var PRICING_FEATURES_MAX = 10;
|
|
10128
|
-
function pricingFeatureList(target) {
|
|
10129
|
-
const raw = target.slots?.features;
|
|
10130
|
-
if (Array.isArray(raw)) {
|
|
10131
|
-
return raw.filter((item) => !!item && typeof item === "object" && typeof item.text === "string").map((item) => ({
|
|
10132
|
-
text: item.text,
|
|
10133
|
-
...typeof item.icon === "string" ? { icon: item.icon } : {},
|
|
10134
|
-
...typeof item.iconColor === "string" ? { iconColor: item.iconColor } : {}
|
|
10135
|
-
}));
|
|
10136
|
-
}
|
|
10137
|
-
if (typeof raw === "string") {
|
|
10138
|
-
return raw.split("\n").map((line) => line.replace(/^[-*•]\s*/, "").trim()).filter(Boolean).map((text) => ({ text }));
|
|
10139
|
-
}
|
|
10140
|
-
return [];
|
|
10141
|
-
}
|
|
10142
|
-
function pricingCardFeatureCount(tree, index) {
|
|
10143
|
-
const target = findPricingCollection(tree)?.children?.[index];
|
|
10144
|
-
return target ? pricingFeatureList(target).length : 0;
|
|
10145
|
-
}
|
|
10146
|
-
function addPricingCardFeature(tree, index, text) {
|
|
10147
|
-
return withPricingCollection(tree, (collection) => {
|
|
10148
|
-
const children = collection.children;
|
|
10149
|
-
if (index < 0 || index >= children.length) return false;
|
|
10150
|
-
const target = children[index];
|
|
10151
|
-
const features = pricingFeatureList(target);
|
|
10152
|
-
if (features.length >= PRICING_FEATURES_MAX) return false;
|
|
10153
|
-
target.slots = target.slots ?? {};
|
|
10154
|
-
target.slots.features = [...features, { text }];
|
|
10155
|
-
return true;
|
|
10156
|
-
});
|
|
10157
|
-
}
|
|
10158
|
-
function removePricingCardFeature(tree, index) {
|
|
10159
|
-
return withPricingCollection(tree, (collection) => {
|
|
10160
|
-
const children = collection.children;
|
|
10161
|
-
if (index < 0 || index >= children.length) return false;
|
|
10162
|
-
const target = children[index];
|
|
10163
|
-
const features = pricingFeatureList(target);
|
|
10164
|
-
if (features.length <= PRICING_FEATURES_MIN) return false;
|
|
10165
|
-
target.slots = target.slots ?? {};
|
|
10166
|
-
target.slots.features = features.slice(0, -1);
|
|
10167
|
-
return true;
|
|
10168
|
-
});
|
|
10169
|
-
}
|
|
10170
|
-
|
|
10171
|
-
// src/ui/ai-section/AiPricingCardOverlay.tsx
|
|
10172
|
-
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
10173
|
-
var EMPHASIS_TREATMENTS = [
|
|
10174
|
-
{ value: "outlined", label: "Outline" },
|
|
10175
|
-
{ value: "lifted", label: "Lift" },
|
|
10176
|
-
{ value: "inverted", label: "Invert" },
|
|
10177
|
-
{ value: "accent-header", label: "Header" }
|
|
10178
|
-
];
|
|
10179
|
-
var PRIMARY3 = "#0885FE";
|
|
10180
|
-
var OHW_BLUE = `var(--ohw-primary, ${PRIMARY3})`;
|
|
10181
|
-
var OHW_BLUE_DARK = `color-mix(in srgb, var(--ohw-primary, ${PRIMARY3}) 60%, #000000)`;
|
|
10182
|
-
function findPricingCardElement(sectionId, index) {
|
|
10183
|
-
const sectionEl = findByInstanceId(sectionId);
|
|
10184
|
-
if (!sectionEl) return null;
|
|
10185
|
-
const cards = sectionEl.querySelectorAll("[data-ohw-pricing-card]");
|
|
10186
|
-
for (const el of Array.from(cards)) {
|
|
10187
|
-
if (Number(el.dataset.ohwPricingIndex) === index) return el;
|
|
10188
|
-
}
|
|
10189
|
-
return null;
|
|
10190
|
-
}
|
|
10191
|
-
function readRect2(ref) {
|
|
10192
|
-
const el = ref && findPricingCardElement(ref.sectionId, ref.index);
|
|
10193
|
-
if (!el) return null;
|
|
10194
|
-
const r2 = el.getBoundingClientRect();
|
|
10195
|
-
if (r2.width <= 0 || r2.height <= 0) return null;
|
|
10196
|
-
return { top: r2.top, left: r2.left, width: r2.width, height: r2.height };
|
|
10197
|
-
}
|
|
10198
|
-
function useLiveCardRect(ref) {
|
|
10199
|
-
const [rect, setRect] = (0, import_react9.useState)(null);
|
|
10200
|
-
(0, import_react9.useEffect)(() => {
|
|
10201
|
-
if (!ref) {
|
|
10202
|
-
setRect(null);
|
|
10203
|
-
return;
|
|
10204
|
-
}
|
|
10205
|
-
const update = () => {
|
|
10206
|
-
const next = readRect2(ref);
|
|
10207
|
-
setRect(
|
|
10208
|
-
(prev) => prev && next && prev.top === next.top && prev.left === next.left && prev.width === next.width && prev.height === next.height ? prev : next
|
|
10209
|
-
);
|
|
10210
|
-
};
|
|
10211
|
-
update();
|
|
10212
|
-
const opts = { capture: true, passive: true };
|
|
10213
|
-
window.addEventListener("scroll", update, opts);
|
|
10214
|
-
window.addEventListener("resize", update);
|
|
10215
|
-
const interval = setInterval(update, 500);
|
|
10216
|
-
return () => {
|
|
10217
|
-
window.removeEventListener("scroll", update, opts);
|
|
10218
|
-
window.removeEventListener("resize", update);
|
|
10219
|
-
clearInterval(interval);
|
|
10220
|
-
};
|
|
10221
|
-
}, [ref?.sectionId, ref?.index]);
|
|
10222
|
-
return rect;
|
|
10223
|
-
}
|
|
10224
|
-
function requestValidateTree(postToParent2, tree) {
|
|
10225
|
-
return new Promise((resolve) => {
|
|
10226
|
-
const id = `ai-validate-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
|
|
10227
|
-
const timeout = window.setTimeout(() => {
|
|
10228
|
-
window.removeEventListener("message", onMessage);
|
|
10229
|
-
resolve({ ok: false, reasons: ["Validation request timed out."] });
|
|
10230
|
-
}, 8e3);
|
|
10231
|
-
function onMessage(e) {
|
|
10232
|
-
if (e.data?.type !== "ow:ai-validate-tree-result" || e.data.id !== id) return;
|
|
10233
|
-
window.clearTimeout(timeout);
|
|
10234
|
-
window.removeEventListener("message", onMessage);
|
|
10235
|
-
resolve({ ok: e.data.ok === true, reasons: Array.isArray(e.data.reasons) ? e.data.reasons : [] });
|
|
10236
|
-
}
|
|
10237
|
-
window.addEventListener("message", onMessage);
|
|
10238
|
-
postToParent2({ type: "ow:ai-validate-tree-request", id, tree });
|
|
10239
|
-
});
|
|
10240
|
-
}
|
|
10241
|
-
function Pill({
|
|
10242
|
-
label,
|
|
10243
|
-
onClick,
|
|
10244
|
-
disabled,
|
|
10245
|
-
active
|
|
10246
|
-
}) {
|
|
10247
|
-
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10248
|
-
"button",
|
|
10249
|
-
{
|
|
10250
|
-
type: "button",
|
|
10251
|
-
onClick,
|
|
10252
|
-
disabled,
|
|
10253
|
-
style: {
|
|
10254
|
-
height: 28,
|
|
10255
|
-
padding: "0 10px",
|
|
10256
|
-
display: "inline-flex",
|
|
10257
|
-
alignItems: "center",
|
|
10258
|
-
gap: 4,
|
|
10259
|
-
borderRadius: 999,
|
|
10260
|
-
border: "none",
|
|
10261
|
-
cursor: disabled ? "default" : "pointer",
|
|
10262
|
-
background: active ? OHW_BLUE_DARK : "#ffffff",
|
|
10263
|
-
color: active ? "#ffffff" : OHW_BLUE_DARK,
|
|
10264
|
-
opacity: disabled ? 0.4 : 1,
|
|
10265
|
-
fontSize: 12,
|
|
10266
|
-
lineHeight: "16px",
|
|
10267
|
-
fontFamily: "Figtree, ui-sans-serif, system-ui, sans-serif",
|
|
10268
|
-
whiteSpace: "nowrap",
|
|
10269
|
-
flex: "0 0 auto"
|
|
10270
|
-
},
|
|
10271
|
-
children: label
|
|
10272
|
-
}
|
|
10273
|
-
);
|
|
10274
|
-
}
|
|
10275
|
-
function PricingCardToolbar({
|
|
10276
|
-
entry,
|
|
10277
|
-
index,
|
|
10278
|
-
pending,
|
|
10279
|
-
error,
|
|
10280
|
-
onAddTier,
|
|
10281
|
-
onRemoveTier,
|
|
10282
|
-
onToggleFeatured,
|
|
10283
|
-
onSetTreatment,
|
|
10284
|
-
onAddButton,
|
|
10285
|
-
onRemoveButton,
|
|
10286
|
-
onAddFeature,
|
|
10287
|
-
onRemoveFeature
|
|
10288
|
-
}) {
|
|
10289
|
-
const collectionCount = pricingCardCount(entry.tree);
|
|
10290
|
-
const card = findPricingCardNode(entry.tree, index);
|
|
10291
|
-
const featured = card?.slots?.featured;
|
|
10292
|
-
const isFeatured = featured?.enabled === true;
|
|
10293
|
-
const buttonCount = (card?.children ?? []).filter((c) => c.type === "button").length;
|
|
10294
|
-
const featureCount = pricingCardFeatureCount(entry.tree, index);
|
|
10295
|
-
const pillWrap = window.innerWidth <= 480 ? "wrap" : "nowrap";
|
|
10296
|
-
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
10297
|
-
"div",
|
|
10298
|
-
{
|
|
10299
|
-
"data-ohw-bridge": "",
|
|
10300
|
-
"data-ohw-toolbar": "",
|
|
10301
|
-
onMouseDown: (e) => e.stopPropagation(),
|
|
10302
|
-
style: {
|
|
10303
|
-
display: "flex",
|
|
10304
|
-
flexDirection: "column",
|
|
10305
|
-
gap: 6,
|
|
10306
|
-
alignItems: "center",
|
|
10307
|
-
background: OHW_BLUE,
|
|
10308
|
-
padding: 8,
|
|
10309
|
-
borderRadius: 12,
|
|
10310
|
-
boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
|
|
10311
|
-
pointerEvents: pending ? "none" : "auto",
|
|
10312
|
-
opacity: pending ? 0.6 : 1,
|
|
10313
|
-
// Only cap width on mobile, where the pill rows wrap — on desktop the row stays on one
|
|
10314
|
-
// line and should size to fit it, not get clipped/overflow against a fixed cap.
|
|
10315
|
-
maxWidth: pillWrap === "wrap" ? "calc(100vw - 24px)" : "none"
|
|
10316
|
-
},
|
|
10317
|
-
children: [
|
|
10318
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: [
|
|
10319
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "+ Tier", onClick: onAddTier, disabled: collectionCount >= 4 }),
|
|
10320
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "- Tier", onClick: onRemoveTier, disabled: collectionCount <= 1 }),
|
|
10321
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "Featured", active: isFeatured, onClick: () => onToggleFeatured(!isFeatured) }),
|
|
10322
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "+ Button", onClick: onAddButton, disabled: buttonCount >= 2 }),
|
|
10323
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "- Button", onClick: onRemoveButton, disabled: buttonCount === 0 }),
|
|
10324
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "+ Feature", onClick: onAddFeature, disabled: featureCount >= 10 }),
|
|
10325
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "- Feature", onClick: onRemoveFeature, disabled: featureCount <= 1 })
|
|
10326
|
-
] }),
|
|
10327
|
-
isFeatured && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: EMPHASIS_TREATMENTS.map((t) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10328
|
-
Pill,
|
|
10329
|
-
{
|
|
10330
|
-
label: t.label,
|
|
10331
|
-
active: (featured?.treatment ?? "outlined") === t.value,
|
|
10332
|
-
onClick: () => onSetTreatment(t.value)
|
|
10333
|
-
},
|
|
10334
|
-
t.value
|
|
10335
|
-
)) }),
|
|
10336
|
-
error && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { color: "#FCA5A5", fontSize: 11, maxWidth: 220, textAlign: "center" }, children: error })
|
|
10337
|
-
]
|
|
10338
|
-
}
|
|
10339
|
-
);
|
|
10340
|
-
}
|
|
10341
|
-
function findPricingCardNode(tree, index) {
|
|
10342
|
-
const stack = tree.rows.flatMap((row) => row.blocks);
|
|
10343
|
-
while (stack.length) {
|
|
10344
|
-
const node = stack.shift();
|
|
10345
|
-
if (node.type === "collection" && Array.isArray(node.children) && node.children[0]?.type === "card" && node.children[0].slots?.preset === "pricing") {
|
|
10346
|
-
return node.children[index] ?? null;
|
|
10347
|
-
}
|
|
10348
|
-
if (node.children) stack.push(...node.children);
|
|
10349
|
-
}
|
|
10350
|
-
return null;
|
|
10351
|
-
}
|
|
10352
|
-
function AiPricingCardOverlay({
|
|
10353
|
-
postToParent: postToParent2,
|
|
10354
|
-
aiSectionsRef,
|
|
10355
|
-
applyTreeLocalRef
|
|
10356
|
-
}) {
|
|
10357
|
-
const [hover, setHover] = (0, import_react9.useState)(null);
|
|
10358
|
-
const [active, setActive] = (0, import_react9.useState)(null);
|
|
10359
|
-
const [pending, setPending] = (0, import_react9.useState)(false);
|
|
10360
|
-
const [error, setError] = (0, import_react9.useState)(null);
|
|
10361
|
-
const activeRef = (0, import_react9.useRef)(null);
|
|
10362
|
-
activeRef.current = active;
|
|
10363
|
-
(0, import_react9.useEffect)(() => {
|
|
10364
|
-
const onMove = (e) => {
|
|
10365
|
-
const t = e.target;
|
|
10366
|
-
if (!(t instanceof HTMLElement)) return;
|
|
10367
|
-
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]")) {
|
|
10368
|
-
return;
|
|
10369
|
-
}
|
|
10370
|
-
const cardEl = t.closest("[data-ohw-pricing-card]");
|
|
10371
|
-
if (!cardEl) {
|
|
10372
|
-
setHover(null);
|
|
10373
|
-
return;
|
|
10374
|
-
}
|
|
10375
|
-
const sectionEl = cardEl.closest("[data-ohw-section]");
|
|
10376
|
-
const unit = sectionEl ? movableUnit(sectionEl) : null;
|
|
10377
|
-
const sectionId = unit ? instanceIdOf(unit) || null : null;
|
|
10378
|
-
const index = Number(cardEl.dataset.ohwPricingIndex);
|
|
10379
|
-
if (!sectionId || Number.isNaN(index)) {
|
|
10380
|
-
setHover(null);
|
|
10381
|
-
return;
|
|
10382
|
-
}
|
|
10383
|
-
setHover({ sectionId, index });
|
|
10384
|
-
};
|
|
10385
|
-
const onLeave = () => setHover(null);
|
|
10386
|
-
document.addEventListener("mousemove", onMove, { passive: true });
|
|
10387
|
-
document.documentElement.addEventListener("mouseleave", onLeave);
|
|
10388
|
-
return () => {
|
|
10389
|
-
document.removeEventListener("mousemove", onMove);
|
|
10390
|
-
document.documentElement.removeEventListener("mouseleave", onLeave);
|
|
10391
|
-
};
|
|
10392
|
-
}, []);
|
|
10393
|
-
(0, import_react9.useEffect)(() => {
|
|
10394
|
-
const onClick = (e) => {
|
|
10395
|
-
const current = activeRef.current;
|
|
10396
|
-
if (!current) return;
|
|
10397
|
-
const t = e.target;
|
|
10398
|
-
if (!(t instanceof HTMLElement)) return;
|
|
10399
|
-
if (t.closest("[data-ohw-item-interaction]")) return;
|
|
10400
|
-
const cardEl = findPricingCardElement(current.sectionId, current.index);
|
|
10401
|
-
if (cardEl && cardEl.contains(t)) return;
|
|
10402
|
-
setActive(null);
|
|
10403
|
-
setError(null);
|
|
10404
|
-
};
|
|
10405
|
-
document.addEventListener("click", onClick, true);
|
|
10406
|
-
return () => document.removeEventListener("click", onClick, true);
|
|
10407
|
-
}, []);
|
|
10408
|
-
(0, import_react9.useEffect)(() => {
|
|
10409
|
-
const onBlur = () => {
|
|
10410
|
-
if (!activeRef.current) return;
|
|
10411
|
-
setActive(null);
|
|
10412
|
-
setError(null);
|
|
10413
|
-
};
|
|
10414
|
-
window.addEventListener("blur", onBlur);
|
|
10415
|
-
return () => window.removeEventListener("blur", onBlur);
|
|
10416
|
-
}, []);
|
|
10417
|
-
(0, import_react9.useEffect)(() => {
|
|
10418
|
-
const onKeyDown = (e) => {
|
|
10419
|
-
if (e.key !== "Escape") return;
|
|
10420
|
-
if (!activeRef.current) return;
|
|
10421
|
-
setActive(null);
|
|
10422
|
-
setError(null);
|
|
10423
|
-
};
|
|
10424
|
-
document.addEventListener("keydown", onKeyDown);
|
|
10425
|
-
return () => document.removeEventListener("keydown", onKeyDown);
|
|
10426
|
-
}, []);
|
|
10427
|
-
const findEntry = (0, import_react9.useCallback)(
|
|
10428
|
-
(sectionId) => {
|
|
10429
|
-
const state = parseAiSectionsState(aiSectionsRef.current);
|
|
10430
|
-
return state.sections.find((s) => s.id === sectionId) ?? null;
|
|
10431
|
-
},
|
|
10432
|
-
[aiSectionsRef]
|
|
10433
|
-
);
|
|
10434
|
-
const runMutation = (0, import_react9.useCallback)(
|
|
10435
|
-
async (sectionId, mutate) => {
|
|
10436
|
-
const entry = findEntry(sectionId);
|
|
10437
|
-
if (!entry) return false;
|
|
10438
|
-
const nextTree = mutate(entry.tree);
|
|
10439
|
-
if (!nextTree) return false;
|
|
10440
|
-
setPending(true);
|
|
10441
|
-
setError(null);
|
|
10442
|
-
const { ok, reasons } = await requestValidateTree(postToParent2, nextTree);
|
|
10443
|
-
setPending(false);
|
|
10444
|
-
if (!ok) {
|
|
10445
|
-
setError(reasons[0] ?? "That change is not allowed.");
|
|
10446
|
-
return false;
|
|
10447
|
-
}
|
|
10448
|
-
applyTreeLocalRef.current?.({
|
|
10449
|
-
id: sectionId,
|
|
10450
|
-
mode: "replace",
|
|
10451
|
-
targetSectionId: sectionId,
|
|
10452
|
-
tree: nextTree,
|
|
10453
|
-
label: entry.label,
|
|
10454
|
-
media: entry.media,
|
|
10455
|
-
...entry.brand ? { brand: entry.brand } : {},
|
|
10456
|
-
// The user is already looking at the card they just edited — recentering the
|
|
10457
|
-
// viewport on every tier add/remove/toggle reads as the section jumping around.
|
|
10458
|
-
skipScrollIntoView: true
|
|
10459
|
-
});
|
|
10460
|
-
return true;
|
|
10461
|
-
},
|
|
10462
|
-
[findEntry, postToParent2, applyTreeLocalRef]
|
|
10463
|
-
);
|
|
10464
|
-
const activeEntry = active ? findEntry(active.sectionId) : null;
|
|
10465
|
-
const activeCardRect = useLiveCardRect(active);
|
|
10466
|
-
const hoverHandleRect = useLiveCardRect(!active && hover ? hover : null);
|
|
10467
|
-
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
|
|
10468
|
-
hoverHandleRect && hover && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10469
|
-
"button",
|
|
10470
|
-
{
|
|
10471
|
-
type: "button",
|
|
10472
|
-
"data-ohw-toolbar": "",
|
|
10473
|
-
onClick: () => setActive(hover),
|
|
10474
|
-
"aria-label": "Configure pricing tier",
|
|
10475
|
-
style: {
|
|
10476
|
-
position: "fixed",
|
|
10477
|
-
top: hoverHandleRect.top + 8,
|
|
10478
|
-
left: hoverHandleRect.left + hoverHandleRect.width - 36,
|
|
10479
|
-
width: 28,
|
|
10480
|
-
height: 28,
|
|
10481
|
-
borderRadius: 8,
|
|
10482
|
-
border: `1.5px dashed ${PRIMARY3}`,
|
|
10483
|
-
background: "#ffffff",
|
|
10484
|
-
color: PRIMARY3,
|
|
10485
|
-
display: "flex",
|
|
10486
|
-
alignItems: "center",
|
|
10487
|
-
justifyContent: "center",
|
|
10488
|
-
cursor: "pointer",
|
|
10489
|
-
zIndex: 2147483643,
|
|
10490
|
-
fontSize: 14,
|
|
10491
|
-
fontWeight: 700
|
|
10492
|
-
},
|
|
10493
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Star, { size: 14, style: { pointerEvents: "none" } })
|
|
10494
|
-
}
|
|
10495
|
-
),
|
|
10496
|
-
activeCardRect && active && activeEntry && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10497
|
-
ItemInteractionLayer,
|
|
10498
|
-
{
|
|
10499
|
-
rect: activeCardRect,
|
|
10500
|
-
state: "active-top",
|
|
10501
|
-
toolbar: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10502
|
-
PricingCardToolbar,
|
|
10503
|
-
{
|
|
10504
|
-
entry: activeEntry,
|
|
10505
|
-
index: active.index,
|
|
10506
|
-
pending,
|
|
10507
|
-
error,
|
|
10508
|
-
onAddTier: () => runMutation(active.sectionId, addPricingTier),
|
|
10509
|
-
onRemoveTier: () => {
|
|
10510
|
-
void runMutation(active.sectionId, (tree) => removePricingTier(tree, active.index)).then(
|
|
10511
|
-
(applied) => {
|
|
10512
|
-
if (applied) setActive(null);
|
|
10513
|
-
}
|
|
10514
|
-
);
|
|
10515
|
-
},
|
|
10516
|
-
onToggleFeatured: (enabled) => runMutation(
|
|
10517
|
-
active.sectionId,
|
|
10518
|
-
(tree) => setPricingCardFeatured(tree, active.index, { enabled })
|
|
10519
|
-
),
|
|
10520
|
-
onSetTreatment: (treatment) => runMutation(
|
|
10521
|
-
active.sectionId,
|
|
10522
|
-
(tree) => setPricingCardFeatured(tree, active.index, { enabled: true, treatment })
|
|
10523
|
-
),
|
|
10524
|
-
onAddButton: () => runMutation(active.sectionId, (tree) => addPricingCardButton(tree, active.index, "Learn more")),
|
|
10525
|
-
onRemoveButton: () => runMutation(active.sectionId, (tree) => removePricingCardButton(tree, active.index)),
|
|
10526
|
-
onAddFeature: () => runMutation(active.sectionId, (tree) => addPricingCardFeature(tree, active.index, "New feature")),
|
|
10527
|
-
onRemoveFeature: () => runMutation(active.sectionId, (tree) => removePricingCardFeature(tree, active.index))
|
|
10528
|
-
}
|
|
10529
|
-
)
|
|
10530
|
-
}
|
|
10531
|
-
)
|
|
10532
|
-
] });
|
|
10533
|
-
}
|
|
10534
|
-
|
|
10535
10029
|
// src/ui/ai-section/AiMediaStripOverlay.tsx
|
|
10536
|
-
var
|
|
10537
|
-
var
|
|
10030
|
+
var import_react9 = require("react");
|
|
10031
|
+
var import_lucide_react8 = require("lucide-react");
|
|
10538
10032
|
|
|
10539
10033
|
// src/lib/ai-media-strip-tree.ts
|
|
10540
10034
|
var MEDIA_STRIP_ITEM_MIN = 1;
|
|
@@ -10640,12 +10134,20 @@ function setMediaStripHover(tree, hover) {
|
|
|
10640
10134
|
return true;
|
|
10641
10135
|
});
|
|
10642
10136
|
}
|
|
10137
|
+
function setMediaStripItemAsset(tree, index, assetId) {
|
|
10138
|
+
return withMediaStrip(tree, (block) => {
|
|
10139
|
+
const items = block.items;
|
|
10140
|
+
if (index < 0 || index >= items.length) return false;
|
|
10141
|
+
items[index] = { ...items[index], assetId };
|
|
10142
|
+
return true;
|
|
10143
|
+
});
|
|
10144
|
+
}
|
|
10643
10145
|
|
|
10644
10146
|
// src/ui/ai-section/AiMediaStripOverlay.tsx
|
|
10645
|
-
var
|
|
10646
|
-
var
|
|
10647
|
-
var
|
|
10648
|
-
var
|
|
10147
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
10148
|
+
var PRIMARY3 = "#0885FE";
|
|
10149
|
+
var OHW_BLUE = `var(--ohw-primary, ${PRIMARY3})`;
|
|
10150
|
+
var OHW_BLUE_DARK = `color-mix(in srgb, var(--ohw-primary, ${PRIMARY3}) 60%, #000000)`;
|
|
10649
10151
|
function findMediaStripItemElement(sectionId, index) {
|
|
10650
10152
|
const sectionEl = findByInstanceId(sectionId);
|
|
10651
10153
|
if (!sectionEl) return null;
|
|
@@ -10655,7 +10157,7 @@ function findMediaStripItemElement(sectionId, index) {
|
|
|
10655
10157
|
}
|
|
10656
10158
|
return null;
|
|
10657
10159
|
}
|
|
10658
|
-
function
|
|
10160
|
+
function readRect2(ref) {
|
|
10659
10161
|
const el = ref && findMediaStripItemElement(ref.sectionId, ref.index);
|
|
10660
10162
|
if (!el) return null;
|
|
10661
10163
|
const r2 = el.getBoundingClientRect();
|
|
@@ -10663,14 +10165,14 @@ function readRect3(ref) {
|
|
|
10663
10165
|
return { top: r2.top, left: r2.left, width: r2.width, height: r2.height };
|
|
10664
10166
|
}
|
|
10665
10167
|
function useLiveItemRect(ref) {
|
|
10666
|
-
const [rect, setRect] = (0,
|
|
10667
|
-
(0,
|
|
10168
|
+
const [rect, setRect] = (0, import_react9.useState)(null);
|
|
10169
|
+
(0, import_react9.useEffect)(() => {
|
|
10668
10170
|
if (!ref) {
|
|
10669
10171
|
setRect(null);
|
|
10670
10172
|
return;
|
|
10671
10173
|
}
|
|
10672
10174
|
const update = () => {
|
|
10673
|
-
const next =
|
|
10175
|
+
const next = readRect2(ref);
|
|
10674
10176
|
setRect(
|
|
10675
10177
|
(prev) => prev && next && prev.top === next.top && prev.left === next.left && prev.width === next.width && prev.height === next.height ? prev : next
|
|
10676
10178
|
);
|
|
@@ -10688,7 +10190,7 @@ function useLiveItemRect(ref) {
|
|
|
10688
10190
|
}, [ref?.sectionId, ref?.index]);
|
|
10689
10191
|
return rect;
|
|
10690
10192
|
}
|
|
10691
|
-
function
|
|
10193
|
+
function requestValidateTree(postToParent2, tree) {
|
|
10692
10194
|
return new Promise((resolve) => {
|
|
10693
10195
|
const id = `ai-validate-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
|
|
10694
10196
|
const timeout = window.setTimeout(() => {
|
|
@@ -10724,13 +10226,13 @@ function requestAssetPick(postToParent2) {
|
|
|
10724
10226
|
postToParent2({ type: "ow:asset-pick", id });
|
|
10725
10227
|
});
|
|
10726
10228
|
}
|
|
10727
|
-
function
|
|
10229
|
+
function Pill({
|
|
10728
10230
|
label,
|
|
10729
10231
|
onClick,
|
|
10730
10232
|
disabled,
|
|
10731
10233
|
active
|
|
10732
10234
|
}) {
|
|
10733
|
-
return /* @__PURE__ */ (0,
|
|
10235
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10734
10236
|
"button",
|
|
10735
10237
|
{
|
|
10736
10238
|
type: "button",
|
|
@@ -10745,8 +10247,8 @@ function Pill2({
|
|
|
10745
10247
|
borderRadius: 999,
|
|
10746
10248
|
border: "none",
|
|
10747
10249
|
cursor: disabled ? "default" : "pointer",
|
|
10748
|
-
background: active ?
|
|
10749
|
-
color: active ? "#ffffff" :
|
|
10250
|
+
background: active ? OHW_BLUE_DARK : "#ffffff",
|
|
10251
|
+
color: active ? "#ffffff" : OHW_BLUE_DARK,
|
|
10750
10252
|
opacity: disabled ? 0.4 : 1,
|
|
10751
10253
|
fontSize: 12,
|
|
10752
10254
|
lineHeight: "16px",
|
|
@@ -10789,6 +10291,7 @@ function MediaStripToolbar({
|
|
|
10789
10291
|
onResize,
|
|
10790
10292
|
onAddItem,
|
|
10791
10293
|
onRemoveItem,
|
|
10294
|
+
onChangeImage,
|
|
10792
10295
|
onMoveLeft,
|
|
10793
10296
|
onMoveRight
|
|
10794
10297
|
}) {
|
|
@@ -10801,7 +10304,7 @@ function MediaStripToolbar({
|
|
|
10801
10304
|
const treatment = slots?.treatment === "color" || slots?.treatment === "grayscale" ? slots.treatment : variant === "logos" ? "grayscale" : "color";
|
|
10802
10305
|
const sizeValue = variant === "logos" ? typeof slots?.logoMaxHeight === "number" ? slots.logoMaxHeight : 48 : typeof slots?.cardWidth === "number" ? slots.cardWidth : 240;
|
|
10803
10306
|
const pillWrap = window.innerWidth <= 480 ? "wrap" : "nowrap";
|
|
10804
|
-
return /* @__PURE__ */ (0,
|
|
10307
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
10805
10308
|
"div",
|
|
10806
10309
|
{
|
|
10807
10310
|
"data-ohw-bridge": "",
|
|
@@ -10812,7 +10315,7 @@ function MediaStripToolbar({
|
|
|
10812
10315
|
flexDirection: "column",
|
|
10813
10316
|
gap: 6,
|
|
10814
10317
|
alignItems: "center",
|
|
10815
|
-
background:
|
|
10318
|
+
background: OHW_BLUE,
|
|
10816
10319
|
padding: 8,
|
|
10817
10320
|
borderRadius: 12,
|
|
10818
10321
|
boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
|
|
@@ -10821,29 +10324,30 @@ function MediaStripToolbar({
|
|
|
10821
10324
|
maxWidth: pillWrap === "wrap" ? "calc(100vw - 24px)" : "none"
|
|
10822
10325
|
},
|
|
10823
10326
|
children: [
|
|
10824
|
-
/* @__PURE__ */ (0,
|
|
10825
|
-
VARIANTS.map((v) => /* @__PURE__ */ (0,
|
|
10826
|
-
ALIGNS.map((a) => /* @__PURE__ */ (0,
|
|
10327
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: [
|
|
10328
|
+
VARIANTS.map((v) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: v.label, active: variant === v.value, onClick: () => onSetVariant(v.value) }, v.value)),
|
|
10329
|
+
ALIGNS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: a.label, active: align === a.value, onClick: () => onSetAlign(a.value) }, a.value))
|
|
10827
10330
|
] }),
|
|
10828
|
-
/* @__PURE__ */ (0,
|
|
10829
|
-
HOVERS.map((h) => /* @__PURE__ */ (0,
|
|
10830
|
-
TREATMENTS.map((t) => /* @__PURE__ */ (0,
|
|
10331
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: [
|
|
10332
|
+
HOVERS.map((h) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: h.label, active: hover === h.value, onClick: () => onSetHover(h.value) }, h.value)),
|
|
10333
|
+
TREATMENTS.map((t) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: t.label, active: treatment === t.value, onClick: () => onSetTreatment(t.value) }, t.value))
|
|
10831
10334
|
] }),
|
|
10832
|
-
/* @__PURE__ */ (0,
|
|
10833
|
-
/* @__PURE__ */ (0,
|
|
10834
|
-
/* @__PURE__ */ (0,
|
|
10335
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [
|
|
10336
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "\u2212", onClick: () => onResize(-8) }),
|
|
10337
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { style: { color: "#ffffff", fontSize: 12, minWidth: 34, textAlign: "center" }, children: [
|
|
10835
10338
|
sizeValue,
|
|
10836
10339
|
"px"
|
|
10837
10340
|
] }),
|
|
10838
|
-
/* @__PURE__ */ (0,
|
|
10341
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "+", onClick: () => onResize(8) })
|
|
10839
10342
|
] }),
|
|
10840
|
-
/* @__PURE__ */ (0,
|
|
10841
|
-
/* @__PURE__ */ (0,
|
|
10842
|
-
/* @__PURE__ */ (0,
|
|
10843
|
-
/* @__PURE__ */ (0,
|
|
10844
|
-
/* @__PURE__ */ (0,
|
|
10343
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: [
|
|
10344
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "Change Image", onClick: onChangeImage }),
|
|
10345
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "+ Item", onClick: onAddItem }),
|
|
10346
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "\u2212 Item", onClick: onRemoveItem, disabled: itemCount <= 1 }),
|
|
10347
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "\u2190 Move", onClick: onMoveLeft, disabled: index <= 0 }),
|
|
10348
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "\u2192 Move", onClick: onMoveRight, disabled: index >= itemCount - 1 })
|
|
10845
10349
|
] }),
|
|
10846
|
-
error && /* @__PURE__ */ (0,
|
|
10350
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { color: "#FCA5A5", fontSize: 11, maxWidth: 220, textAlign: "center" }, children: error })
|
|
10847
10351
|
]
|
|
10848
10352
|
}
|
|
10849
10353
|
);
|
|
@@ -10862,13 +10366,13 @@ function AiMediaStripOverlay({
|
|
|
10862
10366
|
aiSectionsRef,
|
|
10863
10367
|
applyTreeLocalRef
|
|
10864
10368
|
}) {
|
|
10865
|
-
const [hover, setHover] = (0,
|
|
10866
|
-
const [active, setActive] = (0,
|
|
10867
|
-
const [pending, setPending] = (0,
|
|
10868
|
-
const [error, setError] = (0,
|
|
10869
|
-
const activeRef = (0,
|
|
10369
|
+
const [hover, setHover] = (0, import_react9.useState)(null);
|
|
10370
|
+
const [active, setActive] = (0, import_react9.useState)(null);
|
|
10371
|
+
const [pending, setPending] = (0, import_react9.useState)(false);
|
|
10372
|
+
const [error, setError] = (0, import_react9.useState)(null);
|
|
10373
|
+
const activeRef = (0, import_react9.useRef)(null);
|
|
10870
10374
|
activeRef.current = active;
|
|
10871
|
-
(0,
|
|
10375
|
+
(0, import_react9.useEffect)(() => {
|
|
10872
10376
|
const onMove = (e) => {
|
|
10873
10377
|
const t = e.target;
|
|
10874
10378
|
if (!(t instanceof HTMLElement)) return;
|
|
@@ -10898,7 +10402,7 @@ function AiMediaStripOverlay({
|
|
|
10898
10402
|
document.documentElement.removeEventListener("mouseleave", onLeave);
|
|
10899
10403
|
};
|
|
10900
10404
|
}, []);
|
|
10901
|
-
(0,
|
|
10405
|
+
(0, import_react9.useEffect)(() => {
|
|
10902
10406
|
const onClick = (e) => {
|
|
10903
10407
|
const current = activeRef.current;
|
|
10904
10408
|
if (!current) return;
|
|
@@ -10913,7 +10417,7 @@ function AiMediaStripOverlay({
|
|
|
10913
10417
|
document.addEventListener("click", onClick, true);
|
|
10914
10418
|
return () => document.removeEventListener("click", onClick, true);
|
|
10915
10419
|
}, []);
|
|
10916
|
-
(0,
|
|
10420
|
+
(0, import_react9.useEffect)(() => {
|
|
10917
10421
|
const onBlur = () => {
|
|
10918
10422
|
if (!activeRef.current) return;
|
|
10919
10423
|
setActive(null);
|
|
@@ -10922,7 +10426,7 @@ function AiMediaStripOverlay({
|
|
|
10922
10426
|
window.addEventListener("blur", onBlur);
|
|
10923
10427
|
return () => window.removeEventListener("blur", onBlur);
|
|
10924
10428
|
}, []);
|
|
10925
|
-
(0,
|
|
10429
|
+
(0, import_react9.useEffect)(() => {
|
|
10926
10430
|
const onKeyDown = (e) => {
|
|
10927
10431
|
if (e.key !== "Escape") return;
|
|
10928
10432
|
if (!activeRef.current) return;
|
|
@@ -10932,22 +10436,22 @@ function AiMediaStripOverlay({
|
|
|
10932
10436
|
document.addEventListener("keydown", onKeyDown);
|
|
10933
10437
|
return () => document.removeEventListener("keydown", onKeyDown);
|
|
10934
10438
|
}, []);
|
|
10935
|
-
const findEntry = (0,
|
|
10439
|
+
const findEntry = (0, import_react9.useCallback)(
|
|
10936
10440
|
(sectionId) => {
|
|
10937
10441
|
const state = parseAiSectionsState(aiSectionsRef.current);
|
|
10938
10442
|
return state.sections.find((s) => s.id === sectionId) ?? null;
|
|
10939
10443
|
},
|
|
10940
10444
|
[aiSectionsRef]
|
|
10941
10445
|
);
|
|
10942
|
-
const runMutation = (0,
|
|
10943
|
-
async (sectionId, mutate) => {
|
|
10446
|
+
const runMutation = (0, import_react9.useCallback)(
|
|
10447
|
+
async (sectionId, mutate, extraMedia) => {
|
|
10944
10448
|
const entry = findEntry(sectionId);
|
|
10945
10449
|
if (!entry) return false;
|
|
10946
10450
|
const nextTree = mutate(entry.tree);
|
|
10947
10451
|
if (!nextTree) return false;
|
|
10948
10452
|
setPending(true);
|
|
10949
10453
|
setError(null);
|
|
10950
|
-
const { ok, reasons } = await
|
|
10454
|
+
const { ok, reasons } = await requestValidateTree(postToParent2, nextTree);
|
|
10951
10455
|
setPending(false);
|
|
10952
10456
|
if (!ok) {
|
|
10953
10457
|
setError(reasons[0] ?? "That change is not allowed.");
|
|
@@ -10959,9 +10463,8 @@ function AiMediaStripOverlay({
|
|
|
10959
10463
|
targetSectionId: sectionId,
|
|
10960
10464
|
tree: nextTree,
|
|
10961
10465
|
label: entry.label,
|
|
10962
|
-
media: entry.media,
|
|
10963
|
-
...entry.brand ? { brand: entry.brand } : {}
|
|
10964
|
-
skipScrollIntoView: true
|
|
10466
|
+
media: extraMedia ? { ...entry.media, ...extraMedia } : entry.media,
|
|
10467
|
+
...entry.brand ? { brand: entry.brand } : {}
|
|
10965
10468
|
});
|
|
10966
10469
|
return true;
|
|
10967
10470
|
},
|
|
@@ -10970,8 +10473,10 @@ function AiMediaStripOverlay({
|
|
|
10970
10473
|
const activeEntry = active ? findEntry(active.sectionId) : null;
|
|
10971
10474
|
const hoverHandleRect = useLiveItemRect(!active && hover ? hover : null);
|
|
10972
10475
|
const activeItemRect = useLiveItemRect(active);
|
|
10973
|
-
|
|
10974
|
-
|
|
10476
|
+
const TOOLBAR_APPROX_H = 170;
|
|
10477
|
+
const toolbarState = activeItemRect && activeItemRect.top < TOOLBAR_APPROX_H ? "active-bottom" : "active-top";
|
|
10478
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
|
|
10479
|
+
hoverHandleRect && hover && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
10975
10480
|
"button",
|
|
10976
10481
|
{
|
|
10977
10482
|
type: "button",
|
|
@@ -10985,9 +10490,9 @@ function AiMediaStripOverlay({
|
|
|
10985
10490
|
width: 28,
|
|
10986
10491
|
height: 28,
|
|
10987
10492
|
borderRadius: 8,
|
|
10988
|
-
border: `1.5px dashed ${
|
|
10493
|
+
border: `1.5px dashed ${PRIMARY3}`,
|
|
10989
10494
|
background: "#ffffff",
|
|
10990
|
-
color:
|
|
10495
|
+
color: PRIMARY3,
|
|
10991
10496
|
display: "flex",
|
|
10992
10497
|
alignItems: "center",
|
|
10993
10498
|
justifyContent: "center",
|
|
@@ -10996,15 +10501,15 @@ function AiMediaStripOverlay({
|
|
|
10996
10501
|
fontSize: 14,
|
|
10997
10502
|
fontWeight: 700
|
|
10998
10503
|
},
|
|
10999
|
-
children: /* @__PURE__ */ (0,
|
|
10504
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Star, { size: 14, style: { pointerEvents: "none" } })
|
|
11000
10505
|
}
|
|
11001
10506
|
),
|
|
11002
|
-
activeItemRect && active && activeEntry && /* @__PURE__ */ (0,
|
|
10507
|
+
activeItemRect && active && activeEntry && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
11003
10508
|
ItemInteractionLayer,
|
|
11004
10509
|
{
|
|
11005
10510
|
rect: activeItemRect,
|
|
11006
|
-
state:
|
|
11007
|
-
toolbar: /* @__PURE__ */ (0,
|
|
10511
|
+
state: toolbarState,
|
|
10512
|
+
toolbar: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
11008
10513
|
MediaStripToolbar,
|
|
11009
10514
|
{
|
|
11010
10515
|
entry: activeEntry,
|
|
@@ -11025,10 +10530,22 @@ function AiMediaStripOverlay({
|
|
|
11025
10530
|
void requestAssetPick(postToParent2).then((picked) => {
|
|
11026
10531
|
if (!picked) return;
|
|
11027
10532
|
const item = { assetId: picked.assetId, alt: "Logo" };
|
|
11028
|
-
void runMutation(
|
|
11029
|
-
|
|
11030
|
-
|
|
11031
|
-
}
|
|
10533
|
+
void runMutation(
|
|
10534
|
+
active.sectionId,
|
|
10535
|
+
(tree) => addMediaStripItem(tree, item, active.index),
|
|
10536
|
+
{ [picked.assetId]: picked.url }
|
|
10537
|
+
).then((applied) => {
|
|
10538
|
+
if (applied) setActive({ sectionId: active.sectionId, index: active.index + 1 });
|
|
10539
|
+
});
|
|
10540
|
+
});
|
|
10541
|
+
},
|
|
10542
|
+
onChangeImage: () => {
|
|
10543
|
+
void requestAssetPick(postToParent2).then((picked) => {
|
|
10544
|
+
if (!picked) return;
|
|
10545
|
+
void runMutation(
|
|
10546
|
+
active.sectionId,
|
|
10547
|
+
(tree) => setMediaStripItemAsset(tree, active.index, picked.assetId),
|
|
10548
|
+
{ [picked.assetId]: picked.url }
|
|
11032
10549
|
);
|
|
11033
10550
|
});
|
|
11034
10551
|
},
|
|
@@ -11371,28 +10888,28 @@ function scrollToHashSectionWhenReady(behavior = "smooth") {
|
|
|
11371
10888
|
}
|
|
11372
10889
|
|
|
11373
10890
|
// src/ui/link-modal/LinkPopover.tsx
|
|
11374
|
-
var
|
|
10891
|
+
var import_react13 = require("react");
|
|
11375
10892
|
|
|
11376
10893
|
// src/ui/dialog.tsx
|
|
11377
10894
|
var React9 = __toESM(require("react"), 1);
|
|
11378
10895
|
var import_radix_ui6 = require("radix-ui");
|
|
11379
|
-
var
|
|
11380
|
-
var
|
|
10896
|
+
var import_lucide_react9 = require("lucide-react");
|
|
10897
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
11381
10898
|
function Dialog2({
|
|
11382
10899
|
...props
|
|
11383
10900
|
}) {
|
|
11384
|
-
return /* @__PURE__ */ (0,
|
|
10901
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_radix_ui6.Dialog.Root, { "data-slot": "dialog", ...props });
|
|
11385
10902
|
}
|
|
11386
10903
|
function DialogPortal({
|
|
11387
10904
|
...props
|
|
11388
10905
|
}) {
|
|
11389
|
-
return /* @__PURE__ */ (0,
|
|
10906
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_radix_ui6.Dialog.Portal, { ...props });
|
|
11390
10907
|
}
|
|
11391
10908
|
function DialogOverlay({
|
|
11392
10909
|
className,
|
|
11393
10910
|
...props
|
|
11394
10911
|
}) {
|
|
11395
|
-
return /* @__PURE__ */ (0,
|
|
10912
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
11396
10913
|
import_radix_ui6.Dialog.Overlay,
|
|
11397
10914
|
{
|
|
11398
10915
|
"data-slot": "dialog-overlay",
|
|
@@ -11405,9 +10922,9 @@ function DialogOverlay({
|
|
|
11405
10922
|
var DialogContent = React9.forwardRef(
|
|
11406
10923
|
({ className, children, showCloseButton = true, container, ...props }, ref) => {
|
|
11407
10924
|
const positionMode = container ? "absolute" : "fixed";
|
|
11408
|
-
return /* @__PURE__ */ (0,
|
|
11409
|
-
/* @__PURE__ */ (0,
|
|
11410
|
-
/* @__PURE__ */ (0,
|
|
10925
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(DialogPortal, { container: container ?? void 0, children: [
|
|
10926
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DialogOverlay, { className: cn(positionMode, "inset-0") }),
|
|
10927
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
11411
10928
|
import_radix_ui6.Dialog.Content,
|
|
11412
10929
|
{
|
|
11413
10930
|
ref,
|
|
@@ -11423,13 +10940,13 @@ var DialogContent = React9.forwardRef(
|
|
|
11423
10940
|
...props,
|
|
11424
10941
|
children: [
|
|
11425
10942
|
children,
|
|
11426
|
-
showCloseButton ? /* @__PURE__ */ (0,
|
|
10943
|
+
showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
11427
10944
|
import_radix_ui6.Dialog.Close,
|
|
11428
10945
|
{
|
|
11429
10946
|
type: "button",
|
|
11430
10947
|
className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50",
|
|
11431
10948
|
"aria-label": "Close",
|
|
11432
|
-
children: /* @__PURE__ */ (0,
|
|
10949
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react9.X, { size: 16, "aria-hidden": true })
|
|
11433
10950
|
}
|
|
11434
10951
|
) : null
|
|
11435
10952
|
]
|
|
@@ -11443,13 +10960,13 @@ function DialogHeader({
|
|
|
11443
10960
|
className,
|
|
11444
10961
|
...props
|
|
11445
10962
|
}) {
|
|
11446
|
-
return /* @__PURE__ */ (0,
|
|
10963
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("flex flex-col gap-1.5", className), ...props });
|
|
11447
10964
|
}
|
|
11448
10965
|
function DialogFooter({
|
|
11449
10966
|
className,
|
|
11450
10967
|
...props
|
|
11451
10968
|
}) {
|
|
11452
|
-
return /* @__PURE__ */ (0,
|
|
10969
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
11453
10970
|
"div",
|
|
11454
10971
|
{
|
|
11455
10972
|
className: cn("flex items-center justify-end gap-2", className),
|
|
@@ -11457,7 +10974,7 @@ function DialogFooter({
|
|
|
11457
10974
|
}
|
|
11458
10975
|
);
|
|
11459
10976
|
}
|
|
11460
|
-
var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
10977
|
+
var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
11461
10978
|
import_radix_ui6.Dialog.Title,
|
|
11462
10979
|
{
|
|
11463
10980
|
ref,
|
|
@@ -11469,7 +10986,7 @@ var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE
|
|
|
11469
10986
|
}
|
|
11470
10987
|
));
|
|
11471
10988
|
DialogTitle.displayName = import_radix_ui6.Dialog.Title.displayName;
|
|
11472
|
-
var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
10989
|
+
var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
11473
10990
|
import_radix_ui6.Dialog.Description,
|
|
11474
10991
|
{
|
|
11475
10992
|
ref,
|
|
@@ -11481,63 +10998,63 @@ DialogDescription.displayName = import_radix_ui6.Dialog.Description.displayName;
|
|
|
11481
10998
|
var DialogClose = import_radix_ui6.Dialog.Close;
|
|
11482
10999
|
|
|
11483
11000
|
// src/ui/link-modal/LinkEditorPanel.tsx
|
|
11484
|
-
var
|
|
11001
|
+
var import_lucide_react13 = require("lucide-react");
|
|
11485
11002
|
|
|
11486
11003
|
// src/ui/link-modal/DestinationBreadcrumb.tsx
|
|
11487
|
-
var
|
|
11488
|
-
var
|
|
11004
|
+
var import_lucide_react10 = require("lucide-react");
|
|
11005
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
11489
11006
|
function DestinationBreadcrumb({
|
|
11490
11007
|
pageTitle,
|
|
11491
11008
|
sectionLabel
|
|
11492
11009
|
}) {
|
|
11493
|
-
return /* @__PURE__ */ (0,
|
|
11494
|
-
/* @__PURE__ */ (0,
|
|
11495
|
-
/* @__PURE__ */ (0,
|
|
11496
|
-
/* @__PURE__ */ (0,
|
|
11497
|
-
/* @__PURE__ */ (0,
|
|
11498
|
-
/* @__PURE__ */ (0,
|
|
11010
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex w-full flex-col gap-2", children: [
|
|
11011
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm font-medium! text-foreground m-0", children: "Destination" }),
|
|
11012
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-3", children: [
|
|
11013
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
11014
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.File, { size: 16, className: "shrink-0 text-foreground", "aria-hidden": true }),
|
|
11015
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-sm font-medium leading-none text-foreground!", children: pageTitle })
|
|
11499
11016
|
] }),
|
|
11500
|
-
/* @__PURE__ */ (0,
|
|
11501
|
-
|
|
11017
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
11018
|
+
import_lucide_react10.ArrowRight,
|
|
11502
11019
|
{
|
|
11503
11020
|
size: 16,
|
|
11504
11021
|
className: "shrink-0 text-muted-foreground",
|
|
11505
11022
|
"aria-hidden": true
|
|
11506
11023
|
}
|
|
11507
11024
|
),
|
|
11508
|
-
/* @__PURE__ */ (0,
|
|
11509
|
-
/* @__PURE__ */ (0,
|
|
11510
|
-
|
|
11025
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
|
|
11026
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
11027
|
+
import_lucide_react10.GalleryVertical,
|
|
11511
11028
|
{
|
|
11512
11029
|
size: 16,
|
|
11513
11030
|
className: "shrink-0 text-foreground",
|
|
11514
11031
|
"aria-hidden": true
|
|
11515
11032
|
}
|
|
11516
11033
|
),
|
|
11517
|
-
/* @__PURE__ */ (0,
|
|
11034
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "truncate text-sm font-medium leading-none text-foreground", children: sectionLabel })
|
|
11518
11035
|
] })
|
|
11519
11036
|
] })
|
|
11520
11037
|
] });
|
|
11521
11038
|
}
|
|
11522
11039
|
|
|
11523
11040
|
// src/ui/link-modal/SectionTreeItem.tsx
|
|
11524
|
-
var
|
|
11525
|
-
var
|
|
11041
|
+
var import_lucide_react11 = require("lucide-react");
|
|
11042
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
11526
11043
|
function SectionTreeItem({
|
|
11527
11044
|
section,
|
|
11528
11045
|
onSelect,
|
|
11529
11046
|
selected
|
|
11530
11047
|
}) {
|
|
11531
11048
|
const interactive = Boolean(onSelect);
|
|
11532
|
-
return /* @__PURE__ */ (0,
|
|
11533
|
-
/* @__PURE__ */ (0,
|
|
11049
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex h-9 w-full items-end pl-3", children: [
|
|
11050
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
11534
11051
|
"div",
|
|
11535
11052
|
{
|
|
11536
11053
|
className: "-mr-px h-9 w-2 shrink-0 rounded-bl-sm border-b border-l border-border mb-4",
|
|
11537
11054
|
"aria-hidden": true
|
|
11538
11055
|
}
|
|
11539
11056
|
),
|
|
11540
|
-
/* @__PURE__ */ (0,
|
|
11057
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
11541
11058
|
"div",
|
|
11542
11059
|
{
|
|
11543
11060
|
role: interactive ? "button" : void 0,
|
|
@@ -11555,15 +11072,15 @@ function SectionTreeItem({
|
|
|
11555
11072
|
interactive && selected && "border-bridge-primary"
|
|
11556
11073
|
),
|
|
11557
11074
|
children: [
|
|
11558
|
-
/* @__PURE__ */ (0,
|
|
11559
|
-
|
|
11075
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
11076
|
+
import_lucide_react11.GalleryVertical,
|
|
11560
11077
|
{
|
|
11561
11078
|
size: 16,
|
|
11562
11079
|
className: "shrink-0 text-foreground",
|
|
11563
11080
|
"aria-hidden": true
|
|
11564
11081
|
}
|
|
11565
11082
|
),
|
|
11566
|
-
/* @__PURE__ */ (0,
|
|
11083
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "truncate text-sm font-normal leading-5 text-foreground", children: section.label })
|
|
11567
11084
|
]
|
|
11568
11085
|
}
|
|
11569
11086
|
)
|
|
@@ -11571,14 +11088,14 @@ function SectionTreeItem({
|
|
|
11571
11088
|
}
|
|
11572
11089
|
|
|
11573
11090
|
// src/ui/link-modal/UrlOrPageInput.tsx
|
|
11574
|
-
var
|
|
11091
|
+
var import_react10 = require("react");
|
|
11575
11092
|
|
|
11576
11093
|
// src/ui/input.tsx
|
|
11577
11094
|
var React10 = __toESM(require("react"), 1);
|
|
11578
|
-
var
|
|
11095
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
11579
11096
|
var Input = React10.forwardRef(
|
|
11580
11097
|
({ className, type, ...props }, ref) => {
|
|
11581
|
-
return /* @__PURE__ */ (0,
|
|
11098
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
11582
11099
|
"input",
|
|
11583
11100
|
{
|
|
11584
11101
|
type,
|
|
@@ -11597,9 +11114,9 @@ Input.displayName = "Input";
|
|
|
11597
11114
|
|
|
11598
11115
|
// src/ui/label.tsx
|
|
11599
11116
|
var import_radix_ui7 = require("radix-ui");
|
|
11600
|
-
var
|
|
11117
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
11601
11118
|
function Label({ className, ...props }) {
|
|
11602
|
-
return /* @__PURE__ */ (0,
|
|
11119
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
11603
11120
|
import_radix_ui7.Label.Root,
|
|
11604
11121
|
{
|
|
11605
11122
|
"data-slot": "label",
|
|
@@ -11610,12 +11127,12 @@ function Label({ className, ...props }) {
|
|
|
11610
11127
|
}
|
|
11611
11128
|
|
|
11612
11129
|
// src/ui/link-modal/UrlOrPageInput.tsx
|
|
11613
|
-
var
|
|
11614
|
-
var
|
|
11130
|
+
var import_lucide_react12 = require("lucide-react");
|
|
11131
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
11615
11132
|
function FieldChevron({
|
|
11616
11133
|
onClick
|
|
11617
11134
|
}) {
|
|
11618
|
-
return /* @__PURE__ */ (0,
|
|
11135
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
11619
11136
|
"button",
|
|
11620
11137
|
{
|
|
11621
11138
|
type: "button",
|
|
@@ -11623,7 +11140,7 @@ function FieldChevron({
|
|
|
11623
11140
|
onClick,
|
|
11624
11141
|
"aria-label": "Open page list",
|
|
11625
11142
|
tabIndex: -1,
|
|
11626
|
-
children: /* @__PURE__ */ (0,
|
|
11143
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.ChevronDown, { size: 16 })
|
|
11627
11144
|
}
|
|
11628
11145
|
);
|
|
11629
11146
|
}
|
|
@@ -11639,11 +11156,11 @@ function UrlOrPageInput({
|
|
|
11639
11156
|
readOnly = false,
|
|
11640
11157
|
urlError
|
|
11641
11158
|
}) {
|
|
11642
|
-
const inputId = (0,
|
|
11643
|
-
const inputRef = (0,
|
|
11644
|
-
const rootRef = (0,
|
|
11645
|
-
const [isFocused, setIsFocused] = (0,
|
|
11646
|
-
(0,
|
|
11159
|
+
const inputId = (0, import_react10.useId)();
|
|
11160
|
+
const inputRef = (0, import_react10.useRef)(null);
|
|
11161
|
+
const rootRef = (0, import_react10.useRef)(null);
|
|
11162
|
+
const [isFocused, setIsFocused] = (0, import_react10.useState)(false);
|
|
11163
|
+
(0, import_react10.useEffect)(() => {
|
|
11647
11164
|
if (!dropdownOpen) return;
|
|
11648
11165
|
const isOutside = (e) => {
|
|
11649
11166
|
const root = rootRef.current;
|
|
@@ -11684,19 +11201,19 @@ function UrlOrPageInput({
|
|
|
11684
11201
|
"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]",
|
|
11685
11202
|
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"
|
|
11686
11203
|
);
|
|
11687
|
-
return /* @__PURE__ */ (0,
|
|
11688
|
-
/* @__PURE__ */ (0,
|
|
11689
|
-
/* @__PURE__ */ (0,
|
|
11690
|
-
/* @__PURE__ */ (0,
|
|
11691
|
-
selectedPage ? /* @__PURE__ */ (0,
|
|
11692
|
-
|
|
11204
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex w-full flex-col gap-2 p-0", children: [
|
|
11205
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Label, { htmlFor: inputId, className: cn(urlError && "text-destructive"), children: "Destination" }),
|
|
11206
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { ref: rootRef, className: "relative w-full", children: [
|
|
11207
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { "data-ohw-link-field": true, className: fieldClassName, children: [
|
|
11208
|
+
selectedPage ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex shrink-0 items-center pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
11209
|
+
import_lucide_react12.File,
|
|
11693
11210
|
{
|
|
11694
11211
|
size: 16,
|
|
11695
11212
|
className: "shrink-0 text-foreground",
|
|
11696
11213
|
"aria-hidden": true
|
|
11697
11214
|
}
|
|
11698
11215
|
) }) : null,
|
|
11699
|
-
readOnly ? /* @__PURE__ */ (0,
|
|
11216
|
+
readOnly ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "min-w-0 flex-1 truncate text-sm leading-5 text-foreground", children: selectedPage?.title ?? value }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
11700
11217
|
Input,
|
|
11701
11218
|
{
|
|
11702
11219
|
ref: inputRef,
|
|
@@ -11722,7 +11239,7 @@ function UrlOrPageInput({
|
|
|
11722
11239
|
)
|
|
11723
11240
|
}
|
|
11724
11241
|
),
|
|
11725
|
-
selectedPage && !readOnly ? /* @__PURE__ */ (0,
|
|
11242
|
+
selectedPage && !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
11726
11243
|
"button",
|
|
11727
11244
|
{
|
|
11728
11245
|
type: "button",
|
|
@@ -11730,26 +11247,26 @@ function UrlOrPageInput({
|
|
|
11730
11247
|
onMouseDown: clearSelection,
|
|
11731
11248
|
"aria-label": "Clear selected page",
|
|
11732
11249
|
tabIndex: -1,
|
|
11733
|
-
children: /* @__PURE__ */ (0,
|
|
11250
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.X, { size: 16, "aria-hidden": true })
|
|
11734
11251
|
}
|
|
11735
11252
|
) : null,
|
|
11736
|
-
!readOnly ? /* @__PURE__ */ (0,
|
|
11253
|
+
!readOnly ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(FieldChevron, { onClick: toggleDropdown }) : null
|
|
11737
11254
|
] }),
|
|
11738
|
-
dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ (0,
|
|
11255
|
+
dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
11739
11256
|
"div",
|
|
11740
11257
|
{
|
|
11741
11258
|
"data-ohw-link-page-dropdown": "",
|
|
11742
11259
|
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",
|
|
11743
11260
|
onMouseDown: (e) => e.preventDefault(),
|
|
11744
|
-
children: filteredPages.map((page) => /* @__PURE__ */ (0,
|
|
11261
|
+
children: filteredPages.map((page) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
11745
11262
|
"button",
|
|
11746
11263
|
{
|
|
11747
11264
|
type: "button",
|
|
11748
11265
|
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",
|
|
11749
11266
|
onClick: () => onPageSelect(page),
|
|
11750
11267
|
children: [
|
|
11751
|
-
/* @__PURE__ */ (0,
|
|
11752
|
-
/* @__PURE__ */ (0,
|
|
11268
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.File, { size: 16, className: "shrink-0", "aria-hidden": true }),
|
|
11269
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "truncate", children: page.title })
|
|
11753
11270
|
]
|
|
11754
11271
|
},
|
|
11755
11272
|
page.path
|
|
@@ -11757,34 +11274,34 @@ function UrlOrPageInput({
|
|
|
11757
11274
|
}
|
|
11758
11275
|
) : null
|
|
11759
11276
|
] }),
|
|
11760
|
-
urlError ? /* @__PURE__ */ (0,
|
|
11277
|
+
urlError ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-sm font-medium text-destructive", children: urlError }) : null
|
|
11761
11278
|
] });
|
|
11762
11279
|
}
|
|
11763
11280
|
|
|
11764
11281
|
// src/ui/link-modal/LinkEditorPanel.tsx
|
|
11765
|
-
var
|
|
11282
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
11766
11283
|
function LinkEditorPanel({ state, onClose }) {
|
|
11767
11284
|
const isCancel = state.secondaryLabel === "Cancel" || state.secondaryLabel === "Back to sections";
|
|
11768
|
-
return /* @__PURE__ */ (0,
|
|
11769
|
-
/* @__PURE__ */ (0,
|
|
11285
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
|
|
11286
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DialogClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
11770
11287
|
"button",
|
|
11771
11288
|
{
|
|
11772
11289
|
type: "button",
|
|
11773
11290
|
className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50 h-7",
|
|
11774
11291
|
"aria-label": "Close",
|
|
11775
11292
|
onClick: onClose,
|
|
11776
|
-
children: /* @__PURE__ */ (0,
|
|
11293
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.X, { size: 16, "aria-hidden": true })
|
|
11777
11294
|
}
|
|
11778
11295
|
) }),
|
|
11779
|
-
/* @__PURE__ */ (0,
|
|
11780
|
-
/* @__PURE__ */ (0,
|
|
11781
|
-
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ (0,
|
|
11296
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DialogHeader, { className: "w-full gap-1.5 p-6 pr-12", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DialogTitle, { className: "m-0 w-full break-words", children: state.title }) }),
|
|
11297
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex w-full flex-col gap-3 px-6 pb-8 pt-1", children: [
|
|
11298
|
+
state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
11782
11299
|
DestinationBreadcrumb,
|
|
11783
11300
|
{
|
|
11784
11301
|
pageTitle: state.selectedPage.title,
|
|
11785
11302
|
sectionLabel: state.selectedSection.label
|
|
11786
11303
|
}
|
|
11787
|
-
) : /* @__PURE__ */ (0,
|
|
11304
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
11788
11305
|
UrlOrPageInput,
|
|
11789
11306
|
{
|
|
11790
11307
|
value: state.searchValue,
|
|
@@ -11797,8 +11314,8 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
11797
11314
|
urlError: state.urlError
|
|
11798
11315
|
}
|
|
11799
11316
|
),
|
|
11800
|
-
state.showChooseSection ? /* @__PURE__ */ (0,
|
|
11801
|
-
/* @__PURE__ */ (0,
|
|
11317
|
+
state.showChooseSection ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col justify-center gap-2", children: [
|
|
11318
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
11802
11319
|
Button,
|
|
11803
11320
|
{
|
|
11804
11321
|
type: "button",
|
|
@@ -11809,15 +11326,15 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
11809
11326
|
children: "Choose a section"
|
|
11810
11327
|
}
|
|
11811
11328
|
),
|
|
11812
|
-
/* @__PURE__ */ (0,
|
|
11813
|
-
/* @__PURE__ */ (0,
|
|
11814
|
-
/* @__PURE__ */ (0,
|
|
11329
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
|
|
11330
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.Info, { size: 16, className: "shrink-0", "aria-hidden": true }),
|
|
11331
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "Pick a section this link should scroll to." })
|
|
11815
11332
|
] })
|
|
11816
11333
|
] }) : null,
|
|
11817
|
-
state.showSectionRow && state.selectedSection ? /* @__PURE__ */ (0,
|
|
11334
|
+
state.showSectionRow && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SectionTreeItem, { section: state.selectedSection, selected: true }) : null
|
|
11818
11335
|
] }),
|
|
11819
|
-
/* @__PURE__ */ (0,
|
|
11820
|
-
/* @__PURE__ */ (0,
|
|
11336
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(DialogFooter, { className: "w-full px-6 pb-6", children: [
|
|
11337
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
11821
11338
|
Button,
|
|
11822
11339
|
{
|
|
11823
11340
|
type: "button",
|
|
@@ -11832,7 +11349,7 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
11832
11349
|
children: state.secondaryLabel
|
|
11833
11350
|
}
|
|
11834
11351
|
),
|
|
11835
|
-
/* @__PURE__ */ (0,
|
|
11352
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
11836
11353
|
Button,
|
|
11837
11354
|
{
|
|
11838
11355
|
type: "button",
|
|
@@ -11851,9 +11368,9 @@ function LinkEditorPanel({ state, onClose }) {
|
|
|
11851
11368
|
}
|
|
11852
11369
|
|
|
11853
11370
|
// src/ui/link-modal/SectionPickerOverlay.tsx
|
|
11854
|
-
var
|
|
11371
|
+
var import_react11 = require("react");
|
|
11855
11372
|
var import_react_dom3 = require("react-dom");
|
|
11856
|
-
var
|
|
11373
|
+
var import_lucide_react14 = require("lucide-react");
|
|
11857
11374
|
var import_navigation2 = require("next/navigation");
|
|
11858
11375
|
|
|
11859
11376
|
// src/lib/parent-scroll.ts
|
|
@@ -11875,7 +11392,7 @@ function getIframeChromeClip(parentScroll) {
|
|
|
11875
11392
|
}
|
|
11876
11393
|
|
|
11877
11394
|
// src/ui/link-modal/SectionPickerOverlay.tsx
|
|
11878
|
-
var
|
|
11395
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
11879
11396
|
var DIM_OVERLAY = "rgba(0, 0, 0, 0.45)";
|
|
11880
11397
|
function rectsEqual(a, b) {
|
|
11881
11398
|
if (a.size !== b.size) return false;
|
|
@@ -11908,12 +11425,12 @@ function hitTestSectionId(x, y, sectionIds, rects) {
|
|
|
11908
11425
|
return null;
|
|
11909
11426
|
}
|
|
11910
11427
|
function useSectionRects(sectionIdsKey, enabled) {
|
|
11911
|
-
const [rects, setRects] = (0,
|
|
11912
|
-
const sectionIds = (0,
|
|
11428
|
+
const [rects, setRects] = (0, import_react11.useState)(/* @__PURE__ */ new Map());
|
|
11429
|
+
const sectionIds = (0, import_react11.useMemo)(
|
|
11913
11430
|
() => sectionIdsKey ? sectionIdsKey.split("\0") : [],
|
|
11914
11431
|
[sectionIdsKey]
|
|
11915
11432
|
);
|
|
11916
|
-
(0,
|
|
11433
|
+
(0, import_react11.useEffect)(() => {
|
|
11917
11434
|
if (!enabled || sectionIds.length === 0) {
|
|
11918
11435
|
setRects((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Map());
|
|
11919
11436
|
return;
|
|
@@ -11954,13 +11471,13 @@ function SectionPickerOverlay({
|
|
|
11954
11471
|
}) {
|
|
11955
11472
|
const router = (0, import_navigation2.useRouter)();
|
|
11956
11473
|
const pathname = (0, import_navigation2.usePathname)();
|
|
11957
|
-
const [selectedId, setSelectedId] = (0,
|
|
11958
|
-
const [hoveredId, setHoveredId] = (0,
|
|
11959
|
-
const pointerRef = (0,
|
|
11960
|
-
const pointerScreenRef = (0,
|
|
11961
|
-
const iframeOffsetTopRef = (0,
|
|
11962
|
-
const sectionIdsRef = (0,
|
|
11963
|
-
const [chromeClip, setChromeClip] = (0,
|
|
11474
|
+
const [selectedId, setSelectedId] = (0, import_react11.useState)(null);
|
|
11475
|
+
const [hoveredId, setHoveredId] = (0, import_react11.useState)(null);
|
|
11476
|
+
const pointerRef = (0, import_react11.useRef)(null);
|
|
11477
|
+
const pointerScreenRef = (0, import_react11.useRef)(null);
|
|
11478
|
+
const iframeOffsetTopRef = (0, import_react11.useRef)(null);
|
|
11479
|
+
const sectionIdsRef = (0, import_react11.useRef)([]);
|
|
11480
|
+
const [chromeClip, setChromeClip] = (0, import_react11.useState)(
|
|
11964
11481
|
() => ({
|
|
11965
11482
|
top: 0,
|
|
11966
11483
|
bottom: typeof window !== "undefined" ? window.innerHeight : 0
|
|
@@ -11968,12 +11485,12 @@ function SectionPickerOverlay({
|
|
|
11968
11485
|
);
|
|
11969
11486
|
const normalizedTarget = normalizePath(pagePath);
|
|
11970
11487
|
const isOnTargetPage = normalizePath(pathname) === normalizedTarget;
|
|
11971
|
-
(0,
|
|
11488
|
+
(0, import_react11.useEffect)(() => {
|
|
11972
11489
|
if (isOnTargetPage) return;
|
|
11973
11490
|
const search = readPreservedSearch();
|
|
11974
11491
|
router.push(`${normalizedTarget}${search}`);
|
|
11975
11492
|
}, [isOnTargetPage, normalizedTarget, router]);
|
|
11976
|
-
(0,
|
|
11493
|
+
(0, import_react11.useEffect)(() => {
|
|
11977
11494
|
document.documentElement.setAttribute("data-ohw-section-picking", "");
|
|
11978
11495
|
document.querySelectorAll("[data-ohw-hovered]").forEach((el) => {
|
|
11979
11496
|
el.removeAttribute("data-ohw-hovered");
|
|
@@ -11985,24 +11502,24 @@ function SectionPickerOverlay({
|
|
|
11985
11502
|
document.documentElement.removeAttribute("data-ohw-section-picking");
|
|
11986
11503
|
};
|
|
11987
11504
|
}, []);
|
|
11988
|
-
const liveSections = (0,
|
|
11505
|
+
const liveSections = (0, import_react11.useMemo)(() => {
|
|
11989
11506
|
if (!isOnTargetPage) return sections;
|
|
11990
11507
|
const live = collectSectionsFromDom();
|
|
11991
11508
|
if (live.length === 0) return sections;
|
|
11992
11509
|
const labels = new Map(sections.map((s) => [s.id, s.label]));
|
|
11993
11510
|
return live.map((s) => ({ id: s.id, label: labels.get(s.id) ?? s.label }));
|
|
11994
11511
|
}, [isOnTargetPage, sections, pathname]);
|
|
11995
|
-
const sectionIdsKey = (0,
|
|
11512
|
+
const sectionIdsKey = (0, import_react11.useMemo)(
|
|
11996
11513
|
() => liveSections.map((s) => s.id).join("\0"),
|
|
11997
11514
|
[liveSections]
|
|
11998
11515
|
);
|
|
11999
|
-
const sectionIds = (0,
|
|
11516
|
+
const sectionIds = (0, import_react11.useMemo)(
|
|
12000
11517
|
() => liveSections.map((s) => s.id),
|
|
12001
11518
|
[liveSections]
|
|
12002
11519
|
);
|
|
12003
11520
|
sectionIdsRef.current = sectionIds;
|
|
12004
11521
|
const rects = useSectionRects(sectionIdsKey, isOnTargetPage);
|
|
12005
|
-
const applyHoverAt = (0,
|
|
11522
|
+
const applyHoverAt = (0, import_react11.useCallback)(
|
|
12006
11523
|
(x, y, liveRects) => {
|
|
12007
11524
|
const ids = sectionIdsRef.current;
|
|
12008
11525
|
const map = liveRects ?? readSectionRects(ids);
|
|
@@ -12011,7 +11528,7 @@ function SectionPickerOverlay({
|
|
|
12011
11528
|
},
|
|
12012
11529
|
[]
|
|
12013
11530
|
);
|
|
12014
|
-
(0,
|
|
11531
|
+
(0, import_react11.useEffect)(() => {
|
|
12015
11532
|
const applyClip = (iframeOffsetTop, visibleCanvasTop, canvasH, promptBarH = 0) => {
|
|
12016
11533
|
const next = getIframeVisibleClip({
|
|
12017
11534
|
iframeOffsetTop,
|
|
@@ -12055,12 +11572,12 @@ function SectionPickerOverlay({
|
|
|
12055
11572
|
window.removeEventListener("resize", onResize);
|
|
12056
11573
|
};
|
|
12057
11574
|
}, [applyHoverAt]);
|
|
12058
|
-
(0,
|
|
11575
|
+
(0, import_react11.useEffect)(() => {
|
|
12059
11576
|
const ptr = pointerRef.current;
|
|
12060
11577
|
if (!ptr) return;
|
|
12061
11578
|
applyHoverAt(ptr.x, ptr.y, rects);
|
|
12062
11579
|
}, [rects, applyHoverAt]);
|
|
12063
|
-
(0,
|
|
11580
|
+
(0, import_react11.useEffect)(() => {
|
|
12064
11581
|
const rememberPointer = (clientX, clientY) => {
|
|
12065
11582
|
pointerRef.current = { x: clientX, y: clientY };
|
|
12066
11583
|
const top = iframeOffsetTopRef.current;
|
|
@@ -12084,7 +11601,7 @@ function SectionPickerOverlay({
|
|
|
12084
11601
|
window.removeEventListener("message", onPointerSync);
|
|
12085
11602
|
};
|
|
12086
11603
|
}, [rects, applyHoverAt]);
|
|
12087
|
-
const handleSelect = (0,
|
|
11604
|
+
const handleSelect = (0, import_react11.useCallback)(
|
|
12088
11605
|
(section) => {
|
|
12089
11606
|
if (selectedId) return;
|
|
12090
11607
|
setSelectedId(section.id);
|
|
@@ -12092,7 +11609,7 @@ function SectionPickerOverlay({
|
|
|
12092
11609
|
},
|
|
12093
11610
|
[selectedId, onSelect]
|
|
12094
11611
|
);
|
|
12095
|
-
(0,
|
|
11612
|
+
(0, import_react11.useEffect)(() => {
|
|
12096
11613
|
const onKeyDown = (e) => {
|
|
12097
11614
|
if (e.key === "Escape") {
|
|
12098
11615
|
e.preventDefault();
|
|
@@ -12106,7 +11623,7 @@ function SectionPickerOverlay({
|
|
|
12106
11623
|
const portalRoot = typeof document !== "undefined" ? document.querySelector("[data-ohw-bridge-root]") ?? document.body : null;
|
|
12107
11624
|
if (!portalRoot) return null;
|
|
12108
11625
|
return (0, import_react_dom3.createPortal)(
|
|
12109
|
-
/* @__PURE__ */ (0,
|
|
11626
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
12110
11627
|
"div",
|
|
12111
11628
|
{
|
|
12112
11629
|
"data-ohw-section-picker": "",
|
|
@@ -12116,12 +11633,12 @@ function SectionPickerOverlay({
|
|
|
12116
11633
|
role: "dialog",
|
|
12117
11634
|
"aria-label": "Choose a section",
|
|
12118
11635
|
children: [
|
|
12119
|
-
/* @__PURE__ */ (0,
|
|
11636
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
12120
11637
|
"div",
|
|
12121
11638
|
{
|
|
12122
11639
|
className: "pointer-events-auto fixed left-5 z-[2]",
|
|
12123
11640
|
style: { top: chromeClip.top + 20 },
|
|
12124
|
-
children: /* @__PURE__ */ (0,
|
|
11641
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
12125
11642
|
Button,
|
|
12126
11643
|
{
|
|
12127
11644
|
type: "button",
|
|
@@ -12130,14 +11647,14 @@ function SectionPickerOverlay({
|
|
|
12130
11647
|
className: "h-8 min-w-0 gap-1 border-border bg-background px-2 py-1.5 shadow-sm hover:bg-muted cursor-pointer",
|
|
12131
11648
|
onClick: onBack,
|
|
12132
11649
|
children: [
|
|
12133
|
-
/* @__PURE__ */ (0,
|
|
11650
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react14.ArrowLeft, { className: "size-4 shrink-0", "aria-hidden": true }),
|
|
12134
11651
|
"Back"
|
|
12135
11652
|
]
|
|
12136
11653
|
}
|
|
12137
11654
|
)
|
|
12138
11655
|
}
|
|
12139
11656
|
),
|
|
12140
|
-
/* @__PURE__ */ (0,
|
|
11657
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
12141
11658
|
"div",
|
|
12142
11659
|
{
|
|
12143
11660
|
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",
|
|
@@ -12150,7 +11667,7 @@ function SectionPickerOverlay({
|
|
|
12150
11667
|
children: "Click on section to select"
|
|
12151
11668
|
}
|
|
12152
11669
|
),
|
|
12153
|
-
!isOnTargetPage ? /* @__PURE__ */ (0,
|
|
11670
|
+
!isOnTargetPage ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
12154
11671
|
"div",
|
|
12155
11672
|
{
|
|
12156
11673
|
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",
|
|
@@ -12158,14 +11675,14 @@ function SectionPickerOverlay({
|
|
|
12158
11675
|
children: "Loading page preview\u2026"
|
|
12159
11676
|
}
|
|
12160
11677
|
) : null,
|
|
12161
|
-
isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */ (0,
|
|
11678
|
+
isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "pointer-events-auto fixed inset-0 z-[1] flex items-center justify-center bg-muted/40", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-sm text-muted-foreground", children: "No sections found on this page." }) }) : null,
|
|
12162
11679
|
isOnTargetPage ? liveSections.map((section) => {
|
|
12163
11680
|
const rect = rects.get(section.id);
|
|
12164
11681
|
if (!rect || rect.width <= 0 || rect.height <= 0) return null;
|
|
12165
11682
|
const isSelected = selectedId === section.id;
|
|
12166
11683
|
const isHovered = hoveredId === section.id;
|
|
12167
11684
|
const isLit = isSelected || isHovered;
|
|
12168
|
-
return /* @__PURE__ */ (0,
|
|
11685
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
12169
11686
|
"button",
|
|
12170
11687
|
{
|
|
12171
11688
|
type: "button",
|
|
@@ -12180,7 +11697,7 @@ function SectionPickerOverlay({
|
|
|
12180
11697
|
"aria-label": `Select section ${section.label}`,
|
|
12181
11698
|
onClick: () => handleSelect(section),
|
|
12182
11699
|
children: [
|
|
12183
|
-
isLit ? /* @__PURE__ */ (0,
|
|
11700
|
+
isLit ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
12184
11701
|
"span",
|
|
12185
11702
|
{
|
|
12186
11703
|
className: "pointer-events-none absolute",
|
|
@@ -12193,13 +11710,13 @@ function SectionPickerOverlay({
|
|
|
12193
11710
|
"aria-hidden": true
|
|
12194
11711
|
}
|
|
12195
11712
|
) : null,
|
|
12196
|
-
isSelected ? /* @__PURE__ */ (0,
|
|
11713
|
+
isSelected ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
12197
11714
|
"span",
|
|
12198
11715
|
{
|
|
12199
11716
|
className: "absolute right-3 top-3 flex size-8 items-center justify-center rounded-full text-white",
|
|
12200
11717
|
style: { backgroundColor: "var(--ohw-primary, #0885fe)" },
|
|
12201
11718
|
"aria-hidden": true,
|
|
12202
|
-
children: /* @__PURE__ */ (0,
|
|
11719
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react14.Check, { className: "size-5" })
|
|
12203
11720
|
}
|
|
12204
11721
|
) : null
|
|
12205
11722
|
]
|
|
@@ -12215,7 +11732,7 @@ function SectionPickerOverlay({
|
|
|
12215
11732
|
}
|
|
12216
11733
|
|
|
12217
11734
|
// src/ui/link-modal/useLinkModalState.ts
|
|
12218
|
-
var
|
|
11735
|
+
var import_react12 = require("react");
|
|
12219
11736
|
function useLinkModalState({
|
|
12220
11737
|
open,
|
|
12221
11738
|
mode,
|
|
@@ -12227,14 +11744,14 @@ function useLinkModalState({
|
|
|
12227
11744
|
onClose,
|
|
12228
11745
|
onSubmit
|
|
12229
11746
|
}) {
|
|
12230
|
-
const availablePages = (0,
|
|
12231
|
-
const [searchValue, setSearchValue] = (0,
|
|
12232
|
-
const [selectedPage, setSelectedPage] = (0,
|
|
12233
|
-
const [selectedSection, setSelectedSection] = (0,
|
|
12234
|
-
const [step, setStep] = (0,
|
|
12235
|
-
const [dropdownOpen, setDropdownOpen] = (0,
|
|
12236
|
-
const [urlError, setUrlError] = (0,
|
|
12237
|
-
const reset = (0,
|
|
11747
|
+
const availablePages = (0, import_react12.useMemo)(() => pages, [pages]);
|
|
11748
|
+
const [searchValue, setSearchValue] = (0, import_react12.useState)("");
|
|
11749
|
+
const [selectedPage, setSelectedPage] = (0, import_react12.useState)(null);
|
|
11750
|
+
const [selectedSection, setSelectedSection] = (0, import_react12.useState)(null);
|
|
11751
|
+
const [step, setStep] = (0, import_react12.useState)("input");
|
|
11752
|
+
const [dropdownOpen, setDropdownOpen] = (0, import_react12.useState)(false);
|
|
11753
|
+
const [urlError, setUrlError] = (0, import_react12.useState)("");
|
|
11754
|
+
const reset = (0, import_react12.useCallback)(() => {
|
|
12238
11755
|
setSearchValue("");
|
|
12239
11756
|
setSelectedPage(null);
|
|
12240
11757
|
setSelectedSection(null);
|
|
@@ -12242,7 +11759,7 @@ function useLinkModalState({
|
|
|
12242
11759
|
setDropdownOpen(false);
|
|
12243
11760
|
setUrlError("");
|
|
12244
11761
|
}, []);
|
|
12245
|
-
(0,
|
|
11762
|
+
(0, import_react12.useEffect)(() => {
|
|
12246
11763
|
if (!open) return;
|
|
12247
11764
|
if (mode === "edit" && initialTarget) {
|
|
12248
11765
|
const { pageRoute } = parseTarget(initialTarget);
|
|
@@ -12258,11 +11775,11 @@ function useLinkModalState({
|
|
|
12258
11775
|
setDropdownOpen(false);
|
|
12259
11776
|
setUrlError("");
|
|
12260
11777
|
}, [open, mode, initialTarget, reset]);
|
|
12261
|
-
const filteredPages = (0,
|
|
11778
|
+
const filteredPages = (0, import_react12.useMemo)(() => {
|
|
12262
11779
|
if (!searchValue.trim()) return availablePages;
|
|
12263
11780
|
return availablePages.filter((p) => p.title.toLowerCase().startsWith(searchValue.toLowerCase()));
|
|
12264
11781
|
}, [availablePages, searchValue]);
|
|
12265
|
-
const activeSections = (0,
|
|
11782
|
+
const activeSections = (0, import_react12.useMemo)(() => {
|
|
12266
11783
|
if (!selectedPage) return [];
|
|
12267
11784
|
return getSectionsForPath(sectionsByPath, selectedPage.path);
|
|
12268
11785
|
}, [selectedPage, sectionsByPath]);
|
|
@@ -12311,7 +11828,7 @@ function useLinkModalState({
|
|
|
12311
11828
|
reset();
|
|
12312
11829
|
onClose();
|
|
12313
11830
|
};
|
|
12314
|
-
const isValid = (0,
|
|
11831
|
+
const isValid = (0, import_react12.useMemo)(() => {
|
|
12315
11832
|
if (urlError) return false;
|
|
12316
11833
|
if (showBreadcrumb) return true;
|
|
12317
11834
|
if (selectedPage) return true;
|
|
@@ -12379,7 +11896,7 @@ function useLinkModalState({
|
|
|
12379
11896
|
}
|
|
12380
11897
|
|
|
12381
11898
|
// src/ui/link-modal/LinkPopover.tsx
|
|
12382
|
-
var
|
|
11899
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
12383
11900
|
function postToParent(data) {
|
|
12384
11901
|
window.parent?.postMessage(data, "*");
|
|
12385
11902
|
}
|
|
@@ -12408,7 +11925,7 @@ function LinkPopover({
|
|
|
12408
11925
|
onSubmit
|
|
12409
11926
|
});
|
|
12410
11927
|
const sectionPickerActive = state.showSectionPicker && Boolean(state.selectedPage);
|
|
12411
|
-
(0,
|
|
11928
|
+
(0, import_react13.useEffect)(() => {
|
|
12412
11929
|
if (!open) return;
|
|
12413
11930
|
if (sectionPickerActive) {
|
|
12414
11931
|
postToParent({ type: "ui:unlock" });
|
|
@@ -12475,15 +11992,15 @@ function LinkPopover({
|
|
|
12475
11992
|
);
|
|
12476
11993
|
};
|
|
12477
11994
|
}, [open, sectionPickerActive]);
|
|
12478
|
-
return /* @__PURE__ */ (0,
|
|
12479
|
-
/* @__PURE__ */ (0,
|
|
11995
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
|
|
11996
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12480
11997
|
Dialog2,
|
|
12481
11998
|
{
|
|
12482
11999
|
open: open && !sectionPickerActive,
|
|
12483
12000
|
onOpenChange: (next) => {
|
|
12484
12001
|
if (!next) onClose?.();
|
|
12485
12002
|
},
|
|
12486
|
-
children: /* @__PURE__ */ (0,
|
|
12003
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12487
12004
|
DialogContent,
|
|
12488
12005
|
{
|
|
12489
12006
|
ref: panelRef,
|
|
@@ -12493,12 +12010,12 @@ function LinkPopover({
|
|
|
12493
12010
|
"data-ohw-bridge": "",
|
|
12494
12011
|
showCloseButton: false,
|
|
12495
12012
|
className: "gap-0 p-0 w-full max-w-[448px] pointer-events-auto z-[2147483646] overflow-visible",
|
|
12496
|
-
children: /* @__PURE__ */ (0,
|
|
12013
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LinkEditorPanel, { state, onClose })
|
|
12497
12014
|
}
|
|
12498
12015
|
)
|
|
12499
12016
|
}
|
|
12500
12017
|
),
|
|
12501
|
-
sectionPickerActive && state.selectedPage ? /* @__PURE__ */ (0,
|
|
12018
|
+
sectionPickerActive && state.selectedPage ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
12502
12019
|
SectionPickerOverlay,
|
|
12503
12020
|
{
|
|
12504
12021
|
pagePath: state.selectedPage.path,
|
|
@@ -15687,9 +15204,9 @@ function addFooterColumnWithPersist({
|
|
|
15687
15204
|
}
|
|
15688
15205
|
|
|
15689
15206
|
// src/ui/FloatingPanel.tsx
|
|
15690
|
-
var
|
|
15691
|
-
var
|
|
15692
|
-
var
|
|
15207
|
+
var import_react14 = require("react");
|
|
15208
|
+
var import_lucide_react15 = require("lucide-react");
|
|
15209
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
15693
15210
|
var PANEL_WIDTH = 256;
|
|
15694
15211
|
var EDGE_MARGIN = 16;
|
|
15695
15212
|
var HEADER_MIN = 56;
|
|
@@ -15709,16 +15226,24 @@ function defaultFloatingPanelPosition(parentScroll, _panelHeight = 280) {
|
|
|
15709
15226
|
y: clip.top + EDGE_MARGIN
|
|
15710
15227
|
};
|
|
15711
15228
|
}
|
|
15712
|
-
function
|
|
15229
|
+
function clampX(x, panelW) {
|
|
15230
|
+
const left = EDGE_MARGIN;
|
|
15231
|
+
const maxX = Math.max(left, window.innerWidth - panelW - EDGE_MARGIN);
|
|
15232
|
+
return Math.min(Math.max(x, left), maxX);
|
|
15233
|
+
}
|
|
15234
|
+
function clampDragPosition(pos, parentScroll, panelW) {
|
|
15713
15235
|
const clip = getVisibleClip(parentScroll);
|
|
15714
|
-
const maxX = Math.max(clip.left + EDGE_MARGIN, clip.right - panelW - EDGE_MARGIN);
|
|
15715
15236
|
const minY = clip.top + EDGE_MARGIN;
|
|
15716
15237
|
const maxY = Math.max(minY, clip.bottom - EDGE_MARGIN - HEADER_MIN);
|
|
15717
15238
|
return {
|
|
15718
|
-
x:
|
|
15239
|
+
x: clampX(pos.x, panelW),
|
|
15719
15240
|
y: Math.min(Math.max(pos.y, minY), maxY)
|
|
15720
15241
|
};
|
|
15721
15242
|
}
|
|
15243
|
+
function stickyPageY(homeY, parentScroll) {
|
|
15244
|
+
const clip = getVisibleClip(parentScroll);
|
|
15245
|
+
return Math.max(homeY, clip.top + EDGE_MARGIN);
|
|
15246
|
+
}
|
|
15722
15247
|
function availablePanelHeight(parentScroll, top) {
|
|
15723
15248
|
const clip = getVisibleClip(parentScroll);
|
|
15724
15249
|
const available = Math.floor(clip.bottom - top - EDGE_MARGIN);
|
|
@@ -15737,24 +15262,44 @@ function FloatingPanel({
|
|
|
15737
15262
|
className,
|
|
15738
15263
|
bodyClassName
|
|
15739
15264
|
}) {
|
|
15740
|
-
const panelRef = (0,
|
|
15741
|
-
const [measured, setMeasured] = (0,
|
|
15742
|
-
const dragRef = (0,
|
|
15743
|
-
const
|
|
15744
|
-
|
|
15745
|
-
|
|
15746
|
-
|
|
15265
|
+
const panelRef = (0, import_react14.useRef)(null);
|
|
15266
|
+
const [measured, setMeasured] = (0, import_react14.useState)({ w: PANEL_WIDTH, h: 280 });
|
|
15267
|
+
const dragRef = (0, import_react14.useRef)(null);
|
|
15268
|
+
const homeRef = (0, import_react14.useRef)(null);
|
|
15269
|
+
if (!open) {
|
|
15270
|
+
homeRef.current = null;
|
|
15271
|
+
} else if (position) {
|
|
15272
|
+
homeRef.current = position;
|
|
15273
|
+
} else if (homeRef.current == null) {
|
|
15274
|
+
homeRef.current = defaultFloatingPanelPosition(parentScroll);
|
|
15275
|
+
}
|
|
15276
|
+
const [liveScroll, setLiveScroll] = (0, import_react14.useState)(parentScroll);
|
|
15277
|
+
const home = position ?? homeRef.current ?? defaultFloatingPanelPosition(parentScroll);
|
|
15278
|
+
const clamped = {
|
|
15279
|
+
x: clampX(home.x, measured.w),
|
|
15280
|
+
y: stickyPageY(home.y, liveScroll)
|
|
15281
|
+
};
|
|
15282
|
+
const maxHeight = availablePanelHeight(liveScroll, clamped.y);
|
|
15283
|
+
(0, import_react14.useEffect)(() => {
|
|
15284
|
+
if (!open) {
|
|
15285
|
+
setLiveScroll(parentScroll);
|
|
15286
|
+
return;
|
|
15287
|
+
}
|
|
15288
|
+
const onParentScroll = (e) => {
|
|
15289
|
+
if (e.data?.type !== "ow:parent-scroll") return;
|
|
15290
|
+
const { iframeOffsetTop, headerH, canvasH, promptBarH = 0 } = e.data;
|
|
15291
|
+
setLiveScroll({ iframeOffsetTop, headerH, canvasH, promptBarH });
|
|
15292
|
+
};
|
|
15293
|
+
window.addEventListener("message", onParentScroll);
|
|
15294
|
+
return () => window.removeEventListener("message", onParentScroll);
|
|
15295
|
+
}, [open, parentScroll]);
|
|
15296
|
+
(0, import_react14.useLayoutEffect)(() => {
|
|
15747
15297
|
if (!open || !panelRef.current) return;
|
|
15748
15298
|
const el = panelRef.current;
|
|
15749
15299
|
const next = { w: el.offsetWidth || PANEL_WIDTH, h: el.offsetHeight || 280 };
|
|
15750
15300
|
setMeasured((prev) => prev.w === next.w && prev.h === next.h ? prev : next);
|
|
15751
15301
|
}, [open, children, title, context]);
|
|
15752
|
-
(0,
|
|
15753
|
-
if (!open || !position || !onPositionChange) return;
|
|
15754
|
-
const next = clampPosition(position, parentScroll, measured.w, measured.h);
|
|
15755
|
-
if (next.x !== position.x || next.y !== position.y) onPositionChange(next);
|
|
15756
|
-
}, [open, parentScroll, measured.w, measured.h, position, onPositionChange]);
|
|
15757
|
-
const onHeaderPointerDown = (0, import_react15.useCallback)(
|
|
15302
|
+
const onHeaderPointerDown = (0, import_react14.useCallback)(
|
|
15758
15303
|
(e) => {
|
|
15759
15304
|
if (e.button !== 0) return;
|
|
15760
15305
|
if (e.target.closest("[data-ohw-floating-panel-close]")) return;
|
|
@@ -15773,7 +15318,7 @@ function FloatingPanel({
|
|
|
15773
15318
|
},
|
|
15774
15319
|
[clamped.x, clamped.y]
|
|
15775
15320
|
);
|
|
15776
|
-
const onHeaderPointerMove = (0,
|
|
15321
|
+
const onHeaderPointerMove = (0, import_react14.useCallback)(
|
|
15777
15322
|
(e) => {
|
|
15778
15323
|
const drag = dragRef.current;
|
|
15779
15324
|
if (!drag || drag.pointerId !== e.pointerId) return;
|
|
@@ -15787,20 +15332,19 @@ function FloatingPanel({
|
|
|
15787
15332
|
return;
|
|
15788
15333
|
}
|
|
15789
15334
|
e.preventDefault();
|
|
15790
|
-
const next =
|
|
15335
|
+
const next = clampDragPosition(
|
|
15791
15336
|
{
|
|
15792
15337
|
x: drag.originX + (e.clientX - drag.startX),
|
|
15793
15338
|
y: drag.originY + (e.clientY - drag.startY)
|
|
15794
15339
|
},
|
|
15795
|
-
|
|
15796
|
-
measured.w
|
|
15797
|
-
measured.h
|
|
15340
|
+
liveScroll,
|
|
15341
|
+
measured.w
|
|
15798
15342
|
);
|
|
15799
15343
|
onPositionChange?.(next);
|
|
15800
15344
|
},
|
|
15801
|
-
[measured.
|
|
15345
|
+
[measured.w, onPositionChange, liveScroll]
|
|
15802
15346
|
);
|
|
15803
|
-
const endDrag = (0,
|
|
15347
|
+
const endDrag = (0, import_react14.useCallback)((e) => {
|
|
15804
15348
|
const drag = dragRef.current;
|
|
15805
15349
|
if (!drag || drag.pointerId !== e.pointerId) return;
|
|
15806
15350
|
dragRef.current = null;
|
|
@@ -15810,13 +15354,13 @@ function FloatingPanel({
|
|
|
15810
15354
|
} catch {
|
|
15811
15355
|
}
|
|
15812
15356
|
}, []);
|
|
15813
|
-
(0,
|
|
15357
|
+
(0, import_react14.useEffect)(() => {
|
|
15814
15358
|
if (open) return;
|
|
15815
15359
|
document.documentElement.removeAttribute("data-ohw-panel-dragging");
|
|
15816
15360
|
}, [open]);
|
|
15817
|
-
(0,
|
|
15361
|
+
(0, import_react14.useEffect)(() => () => document.documentElement.removeAttribute("data-ohw-panel-dragging"), []);
|
|
15818
15362
|
if (!open) return null;
|
|
15819
|
-
return /* @__PURE__ */ (0,
|
|
15363
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
15820
15364
|
"div",
|
|
15821
15365
|
{
|
|
15822
15366
|
ref: panelRef,
|
|
@@ -15833,7 +15377,7 @@ function FloatingPanel({
|
|
|
15833
15377
|
onPointerDown: (e) => e.stopPropagation(),
|
|
15834
15378
|
onClick: (e) => e.stopPropagation(),
|
|
15835
15379
|
children: [
|
|
15836
|
-
/* @__PURE__ */ (0,
|
|
15380
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
15837
15381
|
"div",
|
|
15838
15382
|
{
|
|
15839
15383
|
"data-ohw-floating-panel-header": "",
|
|
@@ -15843,14 +15387,14 @@ function FloatingPanel({
|
|
|
15843
15387
|
onPointerUp: endDrag,
|
|
15844
15388
|
onPointerCancel: endDrag,
|
|
15845
15389
|
children: [
|
|
15846
|
-
/* @__PURE__ */ (0,
|
|
15847
|
-
/* @__PURE__ */ (0,
|
|
15848
|
-
icon ? /* @__PURE__ */ (0,
|
|
15849
|
-
/* @__PURE__ */ (0,
|
|
15390
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
|
|
15391
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
15392
|
+
icon ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "shrink-0 text-foreground", children: icon }) : null,
|
|
15393
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "min-w-0 flex-1 text-lg font-semibold leading-7 text-foreground", children: title })
|
|
15850
15394
|
] }),
|
|
15851
|
-
context ? /* @__PURE__ */ (0,
|
|
15395
|
+
context ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "w-full text-sm leading-5 text-muted-foreground", children: context }) : null
|
|
15852
15396
|
] }),
|
|
15853
|
-
/* @__PURE__ */ (0,
|
|
15397
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
15854
15398
|
"button",
|
|
15855
15399
|
{
|
|
15856
15400
|
type: "button",
|
|
@@ -15862,13 +15406,13 @@ function FloatingPanel({
|
|
|
15862
15406
|
onClose();
|
|
15863
15407
|
},
|
|
15864
15408
|
onPointerDown: (e) => e.stopPropagation(),
|
|
15865
|
-
children: /* @__PURE__ */ (0,
|
|
15409
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react15.X, { size: 16, "aria-hidden": true })
|
|
15866
15410
|
}
|
|
15867
15411
|
)
|
|
15868
15412
|
]
|
|
15869
15413
|
}
|
|
15870
15414
|
),
|
|
15871
|
-
/* @__PURE__ */ (0,
|
|
15415
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
15872
15416
|
"div",
|
|
15873
15417
|
{
|
|
15874
15418
|
"data-ohw-floating-panel-body": "",
|
|
@@ -15886,15 +15430,15 @@ function FloatingPanel({
|
|
|
15886
15430
|
}
|
|
15887
15431
|
|
|
15888
15432
|
// src/ui/socials-display-panel.tsx
|
|
15889
|
-
var
|
|
15433
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
15890
15434
|
function DisplaySwitch({
|
|
15891
15435
|
label,
|
|
15892
15436
|
checked,
|
|
15893
15437
|
disabled,
|
|
15894
15438
|
onChange
|
|
15895
15439
|
}) {
|
|
15896
|
-
return /* @__PURE__ */ (0,
|
|
15897
|
-
/* @__PURE__ */ (0,
|
|
15440
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex w-full items-center gap-2", children: [
|
|
15441
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
15898
15442
|
"span",
|
|
15899
15443
|
{
|
|
15900
15444
|
className: cn(
|
|
@@ -15904,7 +15448,7 @@ function DisplaySwitch({
|
|
|
15904
15448
|
children: label
|
|
15905
15449
|
}
|
|
15906
15450
|
),
|
|
15907
|
-
/* @__PURE__ */ (0,
|
|
15451
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
15908
15452
|
"button",
|
|
15909
15453
|
{
|
|
15910
15454
|
type: "button",
|
|
@@ -15918,7 +15462,7 @@ function DisplaySwitch({
|
|
|
15918
15462
|
checked ? "bg-bridge-primary" : "bg-primary-50",
|
|
15919
15463
|
disabled ? "cursor-default opacity-50" : "cursor-pointer"
|
|
15920
15464
|
),
|
|
15921
|
-
children: /* @__PURE__ */ (0,
|
|
15465
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
15922
15466
|
"span",
|
|
15923
15467
|
{
|
|
15924
15468
|
className: cn(
|
|
@@ -15932,8 +15476,8 @@ function DisplaySwitch({
|
|
|
15932
15476
|
] });
|
|
15933
15477
|
}
|
|
15934
15478
|
function SocialsDisplayPanel({ display, onChange, className }) {
|
|
15935
|
-
return /* @__PURE__ */ (0,
|
|
15936
|
-
/* @__PURE__ */ (0,
|
|
15479
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cn("flex w-full flex-col gap-3", className), children: [
|
|
15480
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
15937
15481
|
DisplaySwitch,
|
|
15938
15482
|
{
|
|
15939
15483
|
label: "Text",
|
|
@@ -15942,7 +15486,7 @@ function SocialsDisplayPanel({ display, onChange, className }) {
|
|
|
15942
15486
|
onChange: (text) => onChange({ ...display, text })
|
|
15943
15487
|
}
|
|
15944
15488
|
),
|
|
15945
|
-
/* @__PURE__ */ (0,
|
|
15489
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
15946
15490
|
DisplaySwitch,
|
|
15947
15491
|
{
|
|
15948
15492
|
label: "Icon",
|
|
@@ -15955,7 +15499,7 @@ function SocialsDisplayPanel({ display, onChange, className }) {
|
|
|
15955
15499
|
}
|
|
15956
15500
|
|
|
15957
15501
|
// src/ui/button-style-panel.tsx
|
|
15958
|
-
var
|
|
15502
|
+
var import_lucide_react16 = require("lucide-react");
|
|
15959
15503
|
|
|
15960
15504
|
// src/lib/button-styles.ts
|
|
15961
15505
|
var BUTTON_VARIANTS_KEY = "__ohw_button_variants";
|
|
@@ -16655,7 +16199,7 @@ function withAssignment(content, id, assignment) {
|
|
|
16655
16199
|
}
|
|
16656
16200
|
|
|
16657
16201
|
// src/ui/button-style-panel.tsx
|
|
16658
|
-
var
|
|
16202
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
16659
16203
|
var SIZE_LABEL = { s: "S", m: "M", l: "L" };
|
|
16660
16204
|
function ButtonStylePanel({
|
|
16661
16205
|
variants,
|
|
@@ -16669,15 +16213,15 @@ function ButtonStylePanel({
|
|
|
16669
16213
|
}) {
|
|
16670
16214
|
const preview = scaleGeometry(sizes.m, 0.75);
|
|
16671
16215
|
const label = previewLabel.trim() || "Book Now";
|
|
16672
|
-
return /* @__PURE__ */ (0,
|
|
16673
|
-
/* @__PURE__ */ (0,
|
|
16674
|
-
/* @__PURE__ */ (0,
|
|
16675
|
-
/* @__PURE__ */ (0,
|
|
16216
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex w-full flex-col gap-5", children: [
|
|
16217
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("section", { className: "flex w-full flex-col gap-2.5", children: [
|
|
16218
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h3", { className: "text-xs font-semibold uppercase leading-4 tracking-[0.6px] text-stone-500 font-sans", children: "Variants" }),
|
|
16219
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex w-full flex-col gap-2.5", children: BUTTON_VARIANT_IDS.map((id) => {
|
|
16676
16220
|
const chrome = variants[id];
|
|
16677
16221
|
const selected = id === variant;
|
|
16678
16222
|
const hasBorder = parseFloat(chrome.borderWidth) > 0;
|
|
16679
16223
|
const cardSlot = previewSlotForChrome(chrome, slotBackground);
|
|
16680
|
-
return /* @__PURE__ */ (0,
|
|
16224
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
16681
16225
|
"button",
|
|
16682
16226
|
{
|
|
16683
16227
|
type: "button",
|
|
@@ -16693,12 +16237,12 @@ function ButtonStylePanel({
|
|
|
16693
16237
|
selected ? "border-2 border-primary" : "border border-border"
|
|
16694
16238
|
),
|
|
16695
16239
|
children: [
|
|
16696
|
-
/* @__PURE__ */ (0,
|
|
16240
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
16697
16241
|
"div",
|
|
16698
16242
|
{
|
|
16699
16243
|
className: "flex w-full items-center justify-center py-4",
|
|
16700
16244
|
style: { background: cardSlot },
|
|
16701
|
-
children: /* @__PURE__ */ (0,
|
|
16245
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
16702
16246
|
"span",
|
|
16703
16247
|
{
|
|
16704
16248
|
className: "inline-flex items-center justify-center whitespace-nowrap font-semibold uppercase leading-none",
|
|
@@ -16720,12 +16264,12 @@ function ButtonStylePanel({
|
|
|
16720
16264
|
)
|
|
16721
16265
|
}
|
|
16722
16266
|
),
|
|
16723
|
-
selected ? /* @__PURE__ */ (0,
|
|
16267
|
+
selected ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
16724
16268
|
"span",
|
|
16725
16269
|
{
|
|
16726
16270
|
className: "absolute right-0.5 top-0.5 flex size-5 items-center justify-center rounded-full bg-primary text-primary-foreground",
|
|
16727
16271
|
"aria-hidden": true,
|
|
16728
|
-
children: /* @__PURE__ */ (0,
|
|
16272
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react16.Check, { className: "size-3", strokeWidth: 3 })
|
|
16729
16273
|
}
|
|
16730
16274
|
) : null
|
|
16731
16275
|
]
|
|
@@ -16734,9 +16278,9 @@ function ButtonStylePanel({
|
|
|
16734
16278
|
);
|
|
16735
16279
|
}) })
|
|
16736
16280
|
] }),
|
|
16737
|
-
/* @__PURE__ */ (0,
|
|
16738
|
-
/* @__PURE__ */ (0,
|
|
16739
|
-
/* @__PURE__ */ (0,
|
|
16281
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("section", { className: "flex w-full flex-col gap-2.5", children: [
|
|
16282
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h3", { className: "text-xs font-semibold uppercase leading-4 tracking-[0.6px] text-stone-500 font-sans", children: "Size" }),
|
|
16283
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
16740
16284
|
"div",
|
|
16741
16285
|
{
|
|
16742
16286
|
className: "flex w-full items-start rounded-lg bg-stone-100 p-1",
|
|
@@ -16744,7 +16288,7 @@ function ButtonStylePanel({
|
|
|
16744
16288
|
"aria-label": "Size",
|
|
16745
16289
|
children: BUTTON_SIZE_IDS.map((id) => {
|
|
16746
16290
|
const selected = id === size;
|
|
16747
|
-
return /* @__PURE__ */ (0,
|
|
16291
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
16748
16292
|
"button",
|
|
16749
16293
|
{
|
|
16750
16294
|
type: "button",
|
|
@@ -17643,7 +17187,7 @@ function hitTestNavDropSlot(clientX, clientY, draggedHrefKey, draggedEl) {
|
|
|
17643
17187
|
}
|
|
17644
17188
|
|
|
17645
17189
|
// src/useNavItemDrag.ts
|
|
17646
|
-
var
|
|
17190
|
+
var import_react15 = require("react");
|
|
17647
17191
|
function useNavItemDrag({
|
|
17648
17192
|
isEditMode,
|
|
17649
17193
|
editContentRef,
|
|
@@ -17667,11 +17211,11 @@ function useNavItemDrag({
|
|
|
17667
17211
|
getNavigationItemAnchor: getNavigationItemAnchor2,
|
|
17668
17212
|
isDragHandleDisabled: isDragHandleDisabled2
|
|
17669
17213
|
}) {
|
|
17670
|
-
const navDragRef = (0,
|
|
17671
|
-
const [navDropSlots, setNavDropSlots] = (0,
|
|
17672
|
-
const [activeNavDropIndex, setActiveNavDropIndex] = (0,
|
|
17673
|
-
const navPointerDragRef = (0,
|
|
17674
|
-
const clearNavDragVisuals = (0,
|
|
17214
|
+
const navDragRef = (0, import_react15.useRef)(null);
|
|
17215
|
+
const [navDropSlots, setNavDropSlots] = (0, import_react15.useState)([]);
|
|
17216
|
+
const [activeNavDropIndex, setActiveNavDropIndex] = (0, import_react15.useState)(null);
|
|
17217
|
+
const navPointerDragRef = (0, import_react15.useRef)(null);
|
|
17218
|
+
const clearNavDragVisuals = (0, import_react15.useCallback)(() => {
|
|
17675
17219
|
const session = navDragRef.current;
|
|
17676
17220
|
const nestedHrefKey = session?.draggedEl?.closest("[data-ohw-nav-children]") != null ? session.hrefKey : null;
|
|
17677
17221
|
navDragRef.current = null;
|
|
@@ -17704,7 +17248,7 @@ function useNavItemDrag({
|
|
|
17704
17248
|
document.documentElement.removeAttribute("data-ohw-nav-dragging-root");
|
|
17705
17249
|
unlockItemDragInteraction();
|
|
17706
17250
|
}, [setDraggedItemRect, setIsItemDragging, setSiblingHintRects]);
|
|
17707
|
-
const refreshNavDragVisuals = (0,
|
|
17251
|
+
const refreshNavDragVisuals = (0, import_react15.useCallback)(
|
|
17708
17252
|
(session, activeSlot, clientX, clientY) => {
|
|
17709
17253
|
setDraggedItemRect(session.draggedEl.getBoundingClientRect());
|
|
17710
17254
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -17722,13 +17266,13 @@ function useNavItemDrag({
|
|
|
17722
17266
|
},
|
|
17723
17267
|
[setDraggedItemRect, setSiblingHintRects]
|
|
17724
17268
|
);
|
|
17725
|
-
const refreshNavDragVisualsRef = (0,
|
|
17269
|
+
const refreshNavDragVisualsRef = (0, import_react15.useRef)(refreshNavDragVisuals);
|
|
17726
17270
|
refreshNavDragVisualsRef.current = refreshNavDragVisuals;
|
|
17727
|
-
const commitNavDragRef = (0,
|
|
17271
|
+
const commitNavDragRef = (0, import_react15.useRef)(() => {
|
|
17728
17272
|
});
|
|
17729
|
-
const beginNavDragRef = (0,
|
|
17273
|
+
const beginNavDragRef = (0, import_react15.useRef)(() => {
|
|
17730
17274
|
});
|
|
17731
|
-
const beginNavDrag = (0,
|
|
17275
|
+
const beginNavDrag = (0, import_react15.useCallback)(
|
|
17732
17276
|
(session) => {
|
|
17733
17277
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
17734
17278
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -17767,7 +17311,7 @@ function useNavItemDrag({
|
|
|
17767
17311
|
]
|
|
17768
17312
|
);
|
|
17769
17313
|
beginNavDragRef.current = beginNavDrag;
|
|
17770
|
-
const commitNavDrag = (0,
|
|
17314
|
+
const commitNavDrag = (0, import_react15.useCallback)(
|
|
17771
17315
|
(clientX, clientY) => {
|
|
17772
17316
|
const session = navDragRef.current;
|
|
17773
17317
|
if (!session) {
|
|
@@ -17846,7 +17390,7 @@ function useNavItemDrag({
|
|
|
17846
17390
|
[clearNavDragVisuals, deselectRef, editContentRef, postToParentRef, selectRef]
|
|
17847
17391
|
);
|
|
17848
17392
|
commitNavDragRef.current = commitNavDrag;
|
|
17849
|
-
const startNavLinkDrag = (0,
|
|
17393
|
+
const startNavLinkDrag = (0, import_react15.useCallback)(
|
|
17850
17394
|
(anchor, clientX, clientY, wasSelected) => {
|
|
17851
17395
|
if (footerDragRef.current) return false;
|
|
17852
17396
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -17864,7 +17408,7 @@ function useNavItemDrag({
|
|
|
17864
17408
|
},
|
|
17865
17409
|
[beginNavDrag, footerDragRef, isDragHandleDisabled2, isCtaButton]
|
|
17866
17410
|
);
|
|
17867
|
-
const onNavDragOver = (0,
|
|
17411
|
+
const onNavDragOver = (0, import_react15.useCallback)(
|
|
17868
17412
|
(e) => {
|
|
17869
17413
|
const session = navDragRef.current;
|
|
17870
17414
|
if (!session) return false;
|
|
@@ -17876,7 +17420,7 @@ function useNavItemDrag({
|
|
|
17876
17420
|
},
|
|
17877
17421
|
[]
|
|
17878
17422
|
);
|
|
17879
|
-
(0,
|
|
17423
|
+
(0, import_react15.useEffect)(() => {
|
|
17880
17424
|
if (!isEditMode) return;
|
|
17881
17425
|
const THRESHOLD = 10;
|
|
17882
17426
|
const resolveWasSelected = (el) => {
|
|
@@ -18003,7 +17547,7 @@ function useNavItemDrag({
|
|
|
18003
17547
|
setLinkPopover,
|
|
18004
17548
|
suppressNextClickRef
|
|
18005
17549
|
]);
|
|
18006
|
-
const armNavPressFromChrome = (0,
|
|
17550
|
+
const armNavPressFromChrome = (0, import_react15.useCallback)(
|
|
18007
17551
|
(selected, clientX, clientY, pointerId) => {
|
|
18008
17552
|
const hrefKey = selected.getAttribute("data-ohw-href-key");
|
|
18009
17553
|
if (!hrefKey || !isNavbarHrefKey(hrefKey)) return false;
|
|
@@ -18035,7 +17579,7 @@ function useNavItemDrag({
|
|
|
18035
17579
|
}
|
|
18036
17580
|
|
|
18037
17581
|
// src/useSectionDrag.ts
|
|
18038
|
-
var
|
|
17582
|
+
var import_react16 = require("react");
|
|
18039
17583
|
|
|
18040
17584
|
// src/lib/section-dnd.ts
|
|
18041
17585
|
function isFooterSection(el) {
|
|
@@ -18128,21 +17672,21 @@ function useSectionDrag({
|
|
|
18128
17672
|
suppressNextClickRef,
|
|
18129
17673
|
suppressClickUntilRef
|
|
18130
17674
|
}) {
|
|
18131
|
-
const sectionDragRef = (0,
|
|
18132
|
-
const [sectionDropSlots, setSectionDropSlots] = (0,
|
|
18133
|
-
const [activeSectionDropIndex, setActiveSectionDropIndex] = (0,
|
|
18134
|
-
const [isSectionDragging, setIsSectionDragging] = (0,
|
|
18135
|
-
const sectionPointerDragRef = (0,
|
|
18136
|
-
const autoScrollRafRef = (0,
|
|
18137
|
-
const autoScrollDeltaRef = (0,
|
|
18138
|
-
const stopAutoScroll = (0,
|
|
17675
|
+
const sectionDragRef = (0, import_react16.useRef)(null);
|
|
17676
|
+
const [sectionDropSlots, setSectionDropSlots] = (0, import_react16.useState)([]);
|
|
17677
|
+
const [activeSectionDropIndex, setActiveSectionDropIndex] = (0, import_react16.useState)(null);
|
|
17678
|
+
const [isSectionDragging, setIsSectionDragging] = (0, import_react16.useState)(false);
|
|
17679
|
+
const sectionPointerDragRef = (0, import_react16.useRef)(null);
|
|
17680
|
+
const autoScrollRafRef = (0, import_react16.useRef)(null);
|
|
17681
|
+
const autoScrollDeltaRef = (0, import_react16.useRef)(0);
|
|
17682
|
+
const stopAutoScroll = (0, import_react16.useCallback)(() => {
|
|
18139
17683
|
if (autoScrollRafRef.current != null) {
|
|
18140
17684
|
cancelAnimationFrame(autoScrollRafRef.current);
|
|
18141
17685
|
autoScrollRafRef.current = null;
|
|
18142
17686
|
}
|
|
18143
17687
|
autoScrollDeltaRef.current = 0;
|
|
18144
17688
|
}, []);
|
|
18145
|
-
const tickAutoScroll = (0,
|
|
17689
|
+
const tickAutoScroll = (0, import_react16.useCallback)(() => {
|
|
18146
17690
|
if (!sectionDragRef.current) {
|
|
18147
17691
|
stopAutoScroll();
|
|
18148
17692
|
return;
|
|
@@ -18152,7 +17696,7 @@ function useSectionDrag({
|
|
|
18152
17696
|
}
|
|
18153
17697
|
autoScrollRafRef.current = requestAnimationFrame(tickAutoScroll);
|
|
18154
17698
|
}, [postToParentRef, stopAutoScroll]);
|
|
18155
|
-
const updateAutoScroll = (0,
|
|
17699
|
+
const updateAutoScroll = (0, import_react16.useCallback)(
|
|
18156
17700
|
(clientY) => {
|
|
18157
17701
|
const clip = getIframeChromeClip(parentScrollRef.current);
|
|
18158
17702
|
let delta = 0;
|
|
@@ -18174,7 +17718,7 @@ function useSectionDrag({
|
|
|
18174
17718
|
},
|
|
18175
17719
|
[parentScrollRef, stopAutoScroll, tickAutoScroll]
|
|
18176
17720
|
);
|
|
18177
|
-
const clearSectionDragVisuals = (0,
|
|
17721
|
+
const clearSectionDragVisuals = (0, import_react16.useCallback)(() => {
|
|
18178
17722
|
sectionDragRef.current?.draggedEl.removeAttribute("data-ohw-section-dragging");
|
|
18179
17723
|
sectionDragRef.current = null;
|
|
18180
17724
|
setSectionDropSlots([]);
|
|
@@ -18184,7 +17728,7 @@ function useSectionDrag({
|
|
|
18184
17728
|
document.documentElement.removeAttribute("data-ohw-section-dragging-root");
|
|
18185
17729
|
unlockItemDragInteraction();
|
|
18186
17730
|
}, [stopAutoScroll]);
|
|
18187
|
-
const refreshSectionDragVisuals = (0,
|
|
17731
|
+
const refreshSectionDragVisuals = (0, import_react16.useCallback)(
|
|
18188
17732
|
(session, clientX, clientY) => {
|
|
18189
17733
|
session.lastClientX = clientX;
|
|
18190
17734
|
session.lastClientY = clientY;
|
|
@@ -18198,7 +17742,7 @@ function useSectionDrag({
|
|
|
18198
17742
|
},
|
|
18199
17743
|
[updateAutoScroll]
|
|
18200
17744
|
);
|
|
18201
|
-
const beginSectionDrag = (0,
|
|
17745
|
+
const beginSectionDrag = (0, import_react16.useCallback)(
|
|
18202
17746
|
(session) => {
|
|
18203
17747
|
sectionDragRef.current = session;
|
|
18204
17748
|
setIsSectionDragging(true);
|
|
@@ -18209,7 +17753,7 @@ function useSectionDrag({
|
|
|
18209
17753
|
},
|
|
18210
17754
|
[refreshSectionDragVisuals]
|
|
18211
17755
|
);
|
|
18212
|
-
const commitSectionDrag = (0,
|
|
17756
|
+
const commitSectionDrag = (0, import_react16.useCallback)(() => {
|
|
18213
17757
|
const session = sectionDragRef.current;
|
|
18214
17758
|
if (!session) {
|
|
18215
17759
|
clearSectionDragVisuals();
|
|
@@ -18238,7 +17782,7 @@ function useSectionDrag({
|
|
|
18238
17782
|
});
|
|
18239
17783
|
});
|
|
18240
17784
|
}, [clearSectionDragVisuals, editContentRef, postToParentRef]);
|
|
18241
|
-
const startSectionPressDrag = (0,
|
|
17785
|
+
const startSectionPressDrag = (0, import_react16.useCallback)(
|
|
18242
17786
|
(el, clientX, clientY, pointerId) => {
|
|
18243
17787
|
if (navDragRef.current || footerDragRef.current || sectionDragRef.current) return false;
|
|
18244
17788
|
const instanceId = instanceIdOf(el);
|
|
@@ -18255,7 +17799,7 @@ function useSectionDrag({
|
|
|
18255
17799
|
},
|
|
18256
17800
|
[footerDragRef, navDragRef]
|
|
18257
17801
|
);
|
|
18258
|
-
(0,
|
|
17802
|
+
(0, import_react16.useEffect)(() => {
|
|
18259
17803
|
if (!isEditMode) return;
|
|
18260
17804
|
const onPointerDown = (e) => {
|
|
18261
17805
|
if (e.button !== 0) return;
|
|
@@ -18360,8 +17904,8 @@ function useSectionDrag({
|
|
|
18360
17904
|
}
|
|
18361
17905
|
|
|
18362
17906
|
// src/ui/footer-container-chrome.tsx
|
|
18363
|
-
var
|
|
18364
|
-
var
|
|
17907
|
+
var import_lucide_react17 = require("lucide-react");
|
|
17908
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
18365
17909
|
function FooterContainerChrome({
|
|
18366
17910
|
rect,
|
|
18367
17911
|
onAdd,
|
|
@@ -18369,7 +17913,7 @@ function FooterContainerChrome({
|
|
|
18369
17913
|
}) {
|
|
18370
17914
|
const chromeGap = 6;
|
|
18371
17915
|
const buttonMargin = 7;
|
|
18372
|
-
return /* @__PURE__ */ (0,
|
|
17916
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
18373
17917
|
"div",
|
|
18374
17918
|
{
|
|
18375
17919
|
"data-ohw-footer-container-chrome": "",
|
|
@@ -18381,8 +17925,8 @@ function FooterContainerChrome({
|
|
|
18381
17925
|
width: rect.width + chromeGap * 2,
|
|
18382
17926
|
height: rect.height + chromeGap * 2
|
|
18383
17927
|
},
|
|
18384
|
-
children: /* @__PURE__ */ (0,
|
|
18385
|
-
/* @__PURE__ */ (0,
|
|
17928
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Tooltip, { children: [
|
|
17929
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
18386
17930
|
"button",
|
|
18387
17931
|
{
|
|
18388
17932
|
type: "button",
|
|
@@ -18401,17 +17945,17 @@ function FooterContainerChrome({
|
|
|
18401
17945
|
if (addDisabled) return;
|
|
18402
17946
|
onAdd();
|
|
18403
17947
|
},
|
|
18404
|
-
children: /* @__PURE__ */ (0,
|
|
17948
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react17.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
18405
17949
|
}
|
|
18406
17950
|
) }),
|
|
18407
|
-
/* @__PURE__ */ (0,
|
|
17951
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipContent, { side: "bottom", sideOffset: 9, children: addDisabled ? "Maximum columns reached" : "Add item" })
|
|
18408
17952
|
] })
|
|
18409
17953
|
}
|
|
18410
17954
|
) });
|
|
18411
17955
|
}
|
|
18412
17956
|
|
|
18413
17957
|
// src/lib/carousel.ts
|
|
18414
|
-
var
|
|
17958
|
+
var import_react17 = require("react");
|
|
18415
17959
|
var CAROUSEL_ATTR = "data-ohw-carousel";
|
|
18416
17960
|
var CAROUSEL_VALUE_ATTR = "data-ohw-carousel-value";
|
|
18417
17961
|
var CAROUSEL_SLIDE_ATTR = "data-ohw-carousel-slide";
|
|
@@ -18473,8 +18017,8 @@ function applyCarouselNode(key, val) {
|
|
|
18473
18017
|
return true;
|
|
18474
18018
|
}
|
|
18475
18019
|
function useOhwCarousel(key, initial) {
|
|
18476
|
-
const [images, setImages] = (0,
|
|
18477
|
-
(0,
|
|
18020
|
+
const [images, setImages] = (0, import_react17.useState)(initial);
|
|
18021
|
+
(0, import_react17.useEffect)(() => {
|
|
18478
18022
|
const el = document.querySelector(
|
|
18479
18023
|
`[${CAROUSEL_ATTR}][data-ohw-key="${CSS.escape(key)}"]`
|
|
18480
18024
|
);
|
|
@@ -18893,14 +18437,14 @@ function deleteSelectedNavFooterItem(deps) {
|
|
|
18893
18437
|
}
|
|
18894
18438
|
|
|
18895
18439
|
// src/ui/navbar-container-chrome.tsx
|
|
18896
|
-
var
|
|
18897
|
-
var
|
|
18440
|
+
var import_lucide_react18 = require("lucide-react");
|
|
18441
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
18898
18442
|
function NavbarContainerChrome({
|
|
18899
18443
|
rect,
|
|
18900
18444
|
onAdd
|
|
18901
18445
|
}) {
|
|
18902
18446
|
const chromeGap = 6;
|
|
18903
|
-
return /* @__PURE__ */ (0,
|
|
18447
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
18904
18448
|
"div",
|
|
18905
18449
|
{
|
|
18906
18450
|
"data-ohw-navbar-container-chrome": "",
|
|
@@ -18912,7 +18456,7 @@ function NavbarContainerChrome({
|
|
|
18912
18456
|
width: rect.width + chromeGap * 2,
|
|
18913
18457
|
height: rect.height + chromeGap * 2
|
|
18914
18458
|
},
|
|
18915
|
-
children: /* @__PURE__ */ (0,
|
|
18459
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
18916
18460
|
"button",
|
|
18917
18461
|
{
|
|
18918
18462
|
type: "button",
|
|
@@ -18929,7 +18473,7 @@ function NavbarContainerChrome({
|
|
|
18929
18473
|
e.stopPropagation();
|
|
18930
18474
|
onAdd();
|
|
18931
18475
|
},
|
|
18932
|
-
children: /* @__PURE__ */ (0,
|
|
18476
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react18.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
18933
18477
|
}
|
|
18934
18478
|
)
|
|
18935
18479
|
}
|
|
@@ -18938,7 +18482,7 @@ function NavbarContainerChrome({
|
|
|
18938
18482
|
|
|
18939
18483
|
// src/ui/drop-indicator.tsx
|
|
18940
18484
|
var React11 = __toESM(require("react"), 1);
|
|
18941
|
-
var
|
|
18485
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
18942
18486
|
var dropIndicatorVariants = cva(
|
|
18943
18487
|
"ov-gap-line pointer-events-none shrink-0 transition-opacity duration-150",
|
|
18944
18488
|
{
|
|
@@ -18962,7 +18506,7 @@ var dropIndicatorVariants = cva(
|
|
|
18962
18506
|
);
|
|
18963
18507
|
var DropIndicator = React11.forwardRef(
|
|
18964
18508
|
({ className, direction, state, ...props }, ref) => {
|
|
18965
|
-
return /* @__PURE__ */ (0,
|
|
18509
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
18966
18510
|
"div",
|
|
18967
18511
|
{
|
|
18968
18512
|
ref,
|
|
@@ -18979,7 +18523,7 @@ var DropIndicator = React11.forwardRef(
|
|
|
18979
18523
|
DropIndicator.displayName = "DropIndicator";
|
|
18980
18524
|
|
|
18981
18525
|
// src/ui/badge.tsx
|
|
18982
|
-
var
|
|
18526
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
18983
18527
|
var badgeVariants = cva(
|
|
18984
18528
|
"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",
|
|
18985
18529
|
{
|
|
@@ -18997,13 +18541,13 @@ var badgeVariants = cva(
|
|
|
18997
18541
|
}
|
|
18998
18542
|
);
|
|
18999
18543
|
function Badge({ className, variant, ...props }) {
|
|
19000
|
-
return /* @__PURE__ */ (0,
|
|
18544
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
|
|
19001
18545
|
}
|
|
19002
18546
|
|
|
19003
18547
|
// src/OhhwellsBridge.tsx
|
|
19004
|
-
var
|
|
19005
|
-
var
|
|
19006
|
-
var
|
|
18548
|
+
var import_lucide_react19 = require("lucide-react");
|
|
18549
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
18550
|
+
var PRIMARY4 = "#0885FE";
|
|
19007
18551
|
var IMAGE_FADE_MS = 300;
|
|
19008
18552
|
var MEDIA_SETTLE_TIMEOUT_MS = 2500;
|
|
19009
18553
|
function runOpacityFade(el, onDone) {
|
|
@@ -19124,7 +18668,7 @@ function duplicateSchedulingWidget(instanceId, scheduleId) {
|
|
|
19124
18668
|
schedulingRoots.set(container, root);
|
|
19125
18669
|
(0, import_react_dom4.flushSync)(() => {
|
|
19126
18670
|
root.render(
|
|
19127
|
-
/* @__PURE__ */ (0,
|
|
18671
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
19128
18672
|
SchedulingWidget,
|
|
19129
18673
|
{
|
|
19130
18674
|
notifyOnConnect: false,
|
|
@@ -19252,7 +18796,7 @@ function mountSchedulingWidget(anchorId, notifyOnConnect = false, scheduleId, be
|
|
|
19252
18796
|
schedulingRoots.set(container, root);
|
|
19253
18797
|
(0, import_react_dom4.flushSync)(() => {
|
|
19254
18798
|
root.render(
|
|
19255
|
-
/* @__PURE__ */ (0,
|
|
18799
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
19256
18800
|
SchedulingWidget,
|
|
19257
18801
|
{
|
|
19258
18802
|
notifyOnConnect,
|
|
@@ -19988,7 +19532,7 @@ var TOOLBAR_STROKE_GAP2 = 4;
|
|
|
19988
19532
|
var TOOLBAR_OFFSET_FROM_ELEMENT = SELECTION_CHROME_GAP2 + TOOLBAR_STROKE_GAP2;
|
|
19989
19533
|
var HOVER_STROKE_WIDTH = 1.5;
|
|
19990
19534
|
var TEXT_HOVER_SIDE_PAD = 4;
|
|
19991
|
-
var CHROME_PRIMARY = `var(--ohw-primary, ${
|
|
19535
|
+
var CHROME_PRIMARY = `var(--ohw-primary, ${PRIMARY4})`;
|
|
19992
19536
|
var TOOLBAR_GROUPS = [
|
|
19993
19537
|
[
|
|
19994
19538
|
{ cmd: "bold", title: "Bold" },
|
|
@@ -20014,7 +19558,7 @@ function EditGlowChrome({
|
|
|
20014
19558
|
hideHandle = false
|
|
20015
19559
|
}) {
|
|
20016
19560
|
const GAP = SELECTION_CHROME_GAP2;
|
|
20017
|
-
return /* @__PURE__ */ (0,
|
|
19561
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
20018
19562
|
"div",
|
|
20019
19563
|
{
|
|
20020
19564
|
ref: elRef,
|
|
@@ -20029,7 +19573,7 @@ function EditGlowChrome({
|
|
|
20029
19573
|
zIndex: 2147483646
|
|
20030
19574
|
},
|
|
20031
19575
|
children: [
|
|
20032
|
-
/* @__PURE__ */ (0,
|
|
19576
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20033
19577
|
"div",
|
|
20034
19578
|
{
|
|
20035
19579
|
style: {
|
|
@@ -20043,7 +19587,7 @@ function EditGlowChrome({
|
|
|
20043
19587
|
}
|
|
20044
19588
|
}
|
|
20045
19589
|
),
|
|
20046
|
-
reorderHrefKey && !hideHandle && /* @__PURE__ */ (0,
|
|
19590
|
+
reorderHrefKey && !hideHandle && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20047
19591
|
"div",
|
|
20048
19592
|
{
|
|
20049
19593
|
"data-ohw-drag-handle-container": "",
|
|
@@ -20055,7 +19599,7 @@ function EditGlowChrome({
|
|
|
20055
19599
|
transform: "translate(calc(-100% - 7px), -50%)",
|
|
20056
19600
|
pointerEvents: dragDisabled ? "none" : "auto"
|
|
20057
19601
|
},
|
|
20058
|
-
children: /* @__PURE__ */ (0,
|
|
19602
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20059
19603
|
DragHandle,
|
|
20060
19604
|
{
|
|
20061
19605
|
"aria-label": `Reorder ${reorderHrefKey}`,
|
|
@@ -20232,9 +19776,9 @@ function FloatingToolbar({
|
|
|
20232
19776
|
showEditLink,
|
|
20233
19777
|
onEditLink
|
|
20234
19778
|
}) {
|
|
20235
|
-
const localRef =
|
|
20236
|
-
const [measuredW, setMeasuredW] =
|
|
20237
|
-
const setRefs =
|
|
19779
|
+
const localRef = import_react18.default.useRef(null);
|
|
19780
|
+
const [measuredW, setMeasuredW] = import_react18.default.useState(330);
|
|
19781
|
+
const setRefs = import_react18.default.useCallback(
|
|
20238
19782
|
(node) => {
|
|
20239
19783
|
localRef.current = node;
|
|
20240
19784
|
if (typeof elRef === "function") elRef(node);
|
|
@@ -20246,7 +19790,7 @@ function FloatingToolbar({
|
|
|
20246
19790
|
},
|
|
20247
19791
|
[elRef]
|
|
20248
19792
|
);
|
|
20249
|
-
|
|
19793
|
+
import_react18.default.useLayoutEffect(() => {
|
|
20250
19794
|
const node = localRef.current;
|
|
20251
19795
|
if (!node) return;
|
|
20252
19796
|
const update = () => {
|
|
@@ -20259,7 +19803,7 @@ function FloatingToolbar({
|
|
|
20259
19803
|
return () => ro.disconnect();
|
|
20260
19804
|
}, [showEditLink, activeCommands]);
|
|
20261
19805
|
const { top, left, transform } = calcToolbarPos(rect, parentScroll, measuredW);
|
|
20262
|
-
return /* @__PURE__ */ (0,
|
|
19806
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20263
19807
|
"div",
|
|
20264
19808
|
{
|
|
20265
19809
|
ref: setRefs,
|
|
@@ -20271,12 +19815,12 @@ function FloatingToolbar({
|
|
|
20271
19815
|
zIndex: 2147483647,
|
|
20272
19816
|
pointerEvents: "auto"
|
|
20273
19817
|
},
|
|
20274
|
-
children: /* @__PURE__ */ (0,
|
|
20275
|
-
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0,
|
|
20276
|
-
gi > 0 && /* @__PURE__ */ (0,
|
|
19818
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(CustomToolbar, { children: [
|
|
19819
|
+
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react18.default.Fragment, { children: [
|
|
19820
|
+
gi > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CustomToolbarDivider, {}),
|
|
20277
19821
|
btns.map((btn) => {
|
|
20278
19822
|
const isActive = activeCommands.has(btn.cmd);
|
|
20279
|
-
return /* @__PURE__ */ (0,
|
|
19823
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20280
19824
|
CustomToolbarButton,
|
|
20281
19825
|
{
|
|
20282
19826
|
title: btn.title,
|
|
@@ -20285,7 +19829,7 @@ function FloatingToolbar({
|
|
|
20285
19829
|
e.preventDefault();
|
|
20286
19830
|
onCommand(btn.cmd);
|
|
20287
19831
|
},
|
|
20288
|
-
children: /* @__PURE__ */ (0,
|
|
19832
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20289
19833
|
"svg",
|
|
20290
19834
|
{
|
|
20291
19835
|
width: "16",
|
|
@@ -20306,7 +19850,7 @@ function FloatingToolbar({
|
|
|
20306
19850
|
);
|
|
20307
19851
|
})
|
|
20308
19852
|
] }, gi)),
|
|
20309
|
-
showEditLink ? /* @__PURE__ */ (0,
|
|
19853
|
+
showEditLink ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20310
19854
|
CustomToolbarButton,
|
|
20311
19855
|
{
|
|
20312
19856
|
type: "button",
|
|
@@ -20320,7 +19864,7 @@ function FloatingToolbar({
|
|
|
20320
19864
|
e.preventDefault();
|
|
20321
19865
|
e.stopPropagation();
|
|
20322
19866
|
},
|
|
20323
|
-
children: /* @__PURE__ */ (0,
|
|
19867
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react19.Link, { className: "size-4 shrink-0", "aria-hidden": true })
|
|
20324
19868
|
}
|
|
20325
19869
|
) : null
|
|
20326
19870
|
] })
|
|
@@ -20337,7 +19881,7 @@ function StateToggle({
|
|
|
20337
19881
|
states,
|
|
20338
19882
|
onStateChange
|
|
20339
19883
|
}) {
|
|
20340
|
-
return /* @__PURE__ */ (0,
|
|
19884
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20341
19885
|
ToggleGroup,
|
|
20342
19886
|
{
|
|
20343
19887
|
"data-ohw-state-toggle": "",
|
|
@@ -20351,7 +19895,7 @@ function StateToggle({
|
|
|
20351
19895
|
left: rect.right - 8,
|
|
20352
19896
|
transform: "translateX(-100%)"
|
|
20353
19897
|
},
|
|
20354
|
-
children: states.map((state) => /* @__PURE__ */ (0,
|
|
19898
|
+
children: states.map((state) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
|
|
20355
19899
|
}
|
|
20356
19900
|
);
|
|
20357
19901
|
}
|
|
@@ -20368,9 +19912,9 @@ var OHW_LOADER_STYLE = {
|
|
|
20368
19912
|
justifyContent: "center"
|
|
20369
19913
|
};
|
|
20370
19914
|
function OhwLoaderSpinner() {
|
|
20371
|
-
return /* @__PURE__ */ (0,
|
|
20372
|
-
/* @__PURE__ */ (0,
|
|
20373
|
-
/* @__PURE__ */ (0,
|
|
19915
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("svg", { width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", "aria-hidden": true, children: [
|
|
19916
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("circle", { cx: "14", cy: "14", r: "11", stroke: "#E7E5E4", strokeWidth: "3" }),
|
|
19917
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20374
19918
|
"circle",
|
|
20375
19919
|
{
|
|
20376
19920
|
cx: "14",
|
|
@@ -20380,7 +19924,7 @@ function OhwLoaderSpinner() {
|
|
|
20380
19924
|
strokeWidth: "3",
|
|
20381
19925
|
strokeDasharray: "17 52",
|
|
20382
19926
|
strokeLinecap: "round",
|
|
20383
|
-
children: /* @__PURE__ */ (0,
|
|
19927
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20384
19928
|
"animateTransform",
|
|
20385
19929
|
{
|
|
20386
19930
|
attributeName: "transform",
|
|
@@ -20396,7 +19940,7 @@ function OhwLoaderSpinner() {
|
|
|
20396
19940
|
] });
|
|
20397
19941
|
}
|
|
20398
19942
|
function OhwBrandMark() {
|
|
20399
|
-
return /* @__PURE__ */ (0,
|
|
19943
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
20400
19944
|
"svg",
|
|
20401
19945
|
{
|
|
20402
19946
|
width: "16",
|
|
@@ -20407,7 +19951,7 @@ function OhwBrandMark() {
|
|
|
20407
19951
|
style: { display: "block", flexShrink: 0 },
|
|
20408
19952
|
xmlns: "http://www.w3.org/2000/svg",
|
|
20409
19953
|
children: [
|
|
20410
|
-
/* @__PURE__ */ (0,
|
|
19954
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20411
19955
|
"mask",
|
|
20412
19956
|
{
|
|
20413
19957
|
id: "ohw-badge-mark",
|
|
@@ -20417,15 +19961,15 @@ function OhwBrandMark() {
|
|
|
20417
19961
|
y: "0",
|
|
20418
19962
|
width: "48",
|
|
20419
19963
|
height: "48",
|
|
20420
|
-
children: /* @__PURE__ */ (0,
|
|
19964
|
+
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" })
|
|
20421
19965
|
}
|
|
20422
19966
|
),
|
|
20423
|
-
/* @__PURE__ */ (0,
|
|
20424
|
-
/* @__PURE__ */ (0,
|
|
20425
|
-
/* @__PURE__ */ (0,
|
|
20426
|
-
/* @__PURE__ */ (0,
|
|
20427
|
-
/* @__PURE__ */ (0,
|
|
20428
|
-
/* @__PURE__ */ (0,
|
|
19967
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("g", { mask: "url(#ohw-badge-mark)", children: [
|
|
19968
|
+
/* @__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" }),
|
|
19969
|
+
/* @__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" }),
|
|
19970
|
+
/* @__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" }),
|
|
19971
|
+
/* @__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" }),
|
|
19972
|
+
/* @__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" })
|
|
20429
19973
|
] })
|
|
20430
19974
|
]
|
|
20431
19975
|
}
|
|
@@ -20462,7 +20006,7 @@ var OHW_BADGE_LABEL_STYLE = {
|
|
|
20462
20006
|
whiteSpace: "nowrap"
|
|
20463
20007
|
};
|
|
20464
20008
|
function MadeWithOhhWells() {
|
|
20465
|
-
return /* @__PURE__ */ (0,
|
|
20009
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
20466
20010
|
"a",
|
|
20467
20011
|
{
|
|
20468
20012
|
href: "https://ohhwells.com",
|
|
@@ -20472,8 +20016,8 @@ function MadeWithOhhWells() {
|
|
|
20472
20016
|
"data-ohw-badge": "",
|
|
20473
20017
|
style: OHW_BADGE_STYLE,
|
|
20474
20018
|
children: [
|
|
20475
|
-
/* @__PURE__ */ (0,
|
|
20476
|
-
/* @__PURE__ */ (0,
|
|
20019
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(OhwBrandMark, {}),
|
|
20020
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { style: OHW_BADGE_LABEL_STYLE, children: "Made with OhhWells" })
|
|
20477
20021
|
]
|
|
20478
20022
|
}
|
|
20479
20023
|
);
|
|
@@ -20519,8 +20063,8 @@ function OhhwellsBridge() {
|
|
|
20519
20063
|
const router = (0, import_navigation3.useRouter)();
|
|
20520
20064
|
const searchParams = (0, import_navigation3.useSearchParams)();
|
|
20521
20065
|
const isEditMode = isEditSessionActive();
|
|
20522
|
-
const [bridgeRoot, setBridgeRoot] = (0,
|
|
20523
|
-
(0,
|
|
20066
|
+
const [bridgeRoot, setBridgeRoot] = (0, import_react18.useState)(null);
|
|
20067
|
+
(0, import_react18.useEffect)(() => {
|
|
20524
20068
|
const figtreeFontId = "ohw-figtree-font";
|
|
20525
20069
|
if (!document.getElementById(figtreeFontId)) {
|
|
20526
20070
|
const preconnect1 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.googleapis.com" });
|
|
@@ -20546,8 +20090,8 @@ function OhhwellsBridge() {
|
|
|
20546
20090
|
};
|
|
20547
20091
|
}, []);
|
|
20548
20092
|
const subdomainFromQuery = searchParams.get("subdomain");
|
|
20549
|
-
const [subdomain, setSubdomain] = (0,
|
|
20550
|
-
(0,
|
|
20093
|
+
const [subdomain, setSubdomain] = (0, import_react18.useState)(() => resolveSubdomain(subdomainFromQuery));
|
|
20094
|
+
(0, import_react18.useLayoutEffect)(() => {
|
|
20551
20095
|
const next = resolveSubdomain(subdomainFromQuery);
|
|
20552
20096
|
if (next !== subdomain) setSubdomain(next);
|
|
20553
20097
|
if (next) return;
|
|
@@ -20559,7 +20103,7 @@ function OhhwellsBridge() {
|
|
|
20559
20103
|
}, 0);
|
|
20560
20104
|
return () => window.clearTimeout(t);
|
|
20561
20105
|
}, [subdomainFromQuery, subdomain]);
|
|
20562
|
-
(0,
|
|
20106
|
+
(0, import_react18.useEffect)(() => {
|
|
20563
20107
|
if (!subdomainFromQuery || typeof window === "undefined") return;
|
|
20564
20108
|
const url = new URL(window.location.href);
|
|
20565
20109
|
if (!url.searchParams.has("subdomain")) return;
|
|
@@ -20568,45 +20112,45 @@ function OhhwellsBridge() {
|
|
|
20568
20112
|
}, [subdomainFromQuery]);
|
|
20569
20113
|
useLinkHrefGuardian(pathname, subdomain, isEditMode);
|
|
20570
20114
|
useSavedLinkNavigation(isEditMode);
|
|
20571
|
-
const postToParent2 = (0,
|
|
20115
|
+
const postToParent2 = (0, import_react18.useCallback)((data) => {
|
|
20572
20116
|
if (typeof window !== "undefined" && window.parent !== window) {
|
|
20573
20117
|
window.parent.postMessage(data, "*");
|
|
20574
20118
|
}
|
|
20575
20119
|
}, []);
|
|
20576
|
-
const [fetchState, setFetchState] = (0,
|
|
20577
|
-
const [showBranding, setShowBranding] = (0,
|
|
20578
|
-
const autoSaveTimers = (0,
|
|
20579
|
-
const activeElRef = (0,
|
|
20580
|
-
const pointerHeldRef = (0,
|
|
20581
|
-
const selectedElRef = (0,
|
|
20582
|
-
const selectedHrefKeyRef = (0,
|
|
20583
|
-
const selectedFooterColAttrRef = (0,
|
|
20584
|
-
const originalContentRef = (0,
|
|
20585
|
-
const activeStateElRef = (0,
|
|
20586
|
-
const parentScrollRef = (0,
|
|
20587
|
-
const visibleViewportRef = (0,
|
|
20588
|
-
const [dialogPortalContainer, setDialogPortalContainer] = (0,
|
|
20589
|
-
const attachVisibleViewport = (0,
|
|
20120
|
+
const [fetchState, setFetchState] = (0, import_react18.useState)("idle");
|
|
20121
|
+
const [showBranding, setShowBranding] = (0, import_react18.useState)(false);
|
|
20122
|
+
const autoSaveTimers = (0, import_react18.useRef)(/* @__PURE__ */ new Map());
|
|
20123
|
+
const activeElRef = (0, import_react18.useRef)(null);
|
|
20124
|
+
const pointerHeldRef = (0, import_react18.useRef)(false);
|
|
20125
|
+
const selectedElRef = (0, import_react18.useRef)(null);
|
|
20126
|
+
const selectedHrefKeyRef = (0, import_react18.useRef)(null);
|
|
20127
|
+
const selectedFooterColAttrRef = (0, import_react18.useRef)(null);
|
|
20128
|
+
const originalContentRef = (0, import_react18.useRef)(null);
|
|
20129
|
+
const activeStateElRef = (0, import_react18.useRef)(null);
|
|
20130
|
+
const parentScrollRef = (0, import_react18.useRef)(null);
|
|
20131
|
+
const visibleViewportRef = (0, import_react18.useRef)(null);
|
|
20132
|
+
const [dialogPortalContainer, setDialogPortalContainer] = (0, import_react18.useState)(null);
|
|
20133
|
+
const attachVisibleViewport = (0, import_react18.useCallback)((node) => {
|
|
20590
20134
|
visibleViewportRef.current = node;
|
|
20591
20135
|
setDialogPortalContainer(node);
|
|
20592
20136
|
if (node) applyVisibleViewport(node, parentScrollRef.current);
|
|
20593
20137
|
}, []);
|
|
20594
|
-
const toolbarElRef = (0,
|
|
20595
|
-
const glowElRef = (0,
|
|
20596
|
-
const hoveredImageRef = (0,
|
|
20597
|
-
const hoveredImageHasTextOverlapRef = (0,
|
|
20598
|
-
const dragOverElRef = (0,
|
|
20599
|
-
const [mediaHover, setMediaHover] = (0,
|
|
20600
|
-
const [selectedAiSectionId, setSelectedAiSectionId] = (0,
|
|
20601
|
-
const selectedAiSectionIdRef = (0,
|
|
20602
|
-
const handleAiSectionSelectionChange = (0,
|
|
20138
|
+
const toolbarElRef = (0, import_react18.useRef)(null);
|
|
20139
|
+
const glowElRef = (0, import_react18.useRef)(null);
|
|
20140
|
+
const hoveredImageRef = (0, import_react18.useRef)(null);
|
|
20141
|
+
const hoveredImageHasTextOverlapRef = (0, import_react18.useRef)(false);
|
|
20142
|
+
const dragOverElRef = (0, import_react18.useRef)(null);
|
|
20143
|
+
const [mediaHover, setMediaHover] = (0, import_react18.useState)(null);
|
|
20144
|
+
const [selectedAiSectionId, setSelectedAiSectionId] = (0, import_react18.useState)(null);
|
|
20145
|
+
const selectedAiSectionIdRef = (0, import_react18.useRef)(null);
|
|
20146
|
+
const handleAiSectionSelectionChange = (0, import_react18.useCallback)((id) => {
|
|
20603
20147
|
selectedAiSectionIdRef.current = id;
|
|
20604
20148
|
setSelectedAiSectionId(id);
|
|
20605
20149
|
}, []);
|
|
20606
|
-
const [selectedMedia, setSelectedMedia] = (0,
|
|
20607
|
-
const selectedMediaElRef = (0,
|
|
20608
|
-
const mediaKeyDropTokenRef = (0,
|
|
20609
|
-
const clearMediaSelection = (0,
|
|
20150
|
+
const [selectedMedia, setSelectedMedia] = (0, import_react18.useState)(null);
|
|
20151
|
+
const selectedMediaElRef = (0, import_react18.useRef)(null);
|
|
20152
|
+
const mediaKeyDropTokenRef = (0, import_react18.useRef)(0);
|
|
20153
|
+
const clearMediaSelection = (0, import_react18.useCallback)(() => {
|
|
20610
20154
|
const prev = selectedMediaElRef.current;
|
|
20611
20155
|
selectedMediaElRef.current = null;
|
|
20612
20156
|
setSelectedMedia(null);
|
|
@@ -20631,9 +20175,9 @@ function OhhwellsBridge() {
|
|
|
20631
20175
|
window.postMessage({ type: "ow:media-key-drop", token }, "*");
|
|
20632
20176
|
}
|
|
20633
20177
|
}, []);
|
|
20634
|
-
const clearMediaSelectionRef = (0,
|
|
20178
|
+
const clearMediaSelectionRef = (0, import_react18.useRef)(clearMediaSelection);
|
|
20635
20179
|
clearMediaSelectionRef.current = clearMediaSelection;
|
|
20636
|
-
const selectMediaElement = (0,
|
|
20180
|
+
const selectMediaElement = (0, import_react18.useCallback)((el) => {
|
|
20637
20181
|
const r2 = el.getBoundingClientRect();
|
|
20638
20182
|
const video = el.dataset.ohwEditable === "video" ? el.querySelector("video") : null;
|
|
20639
20183
|
selectedMediaElRef.current = el;
|
|
@@ -20657,9 +20201,9 @@ function OhhwellsBridge() {
|
|
|
20657
20201
|
keyLabel: el.dataset.ohwEditable === "video" ? "Video" : el.dataset.ohwEditable === "bg-image" ? "Background" : "Image"
|
|
20658
20202
|
});
|
|
20659
20203
|
}, []);
|
|
20660
|
-
const selectMediaElementRef = (0,
|
|
20204
|
+
const selectMediaElementRef = (0, import_react18.useRef)(selectMediaElement);
|
|
20661
20205
|
selectMediaElementRef.current = selectMediaElement;
|
|
20662
|
-
(0,
|
|
20206
|
+
(0, import_react18.useEffect)(() => {
|
|
20663
20207
|
if (!selectedMedia) return;
|
|
20664
20208
|
const update = () => {
|
|
20665
20209
|
const el = selectedMediaElRef.current;
|
|
@@ -20679,55 +20223,55 @@ function OhhwellsBridge() {
|
|
|
20679
20223
|
window.removeEventListener("resize", update);
|
|
20680
20224
|
};
|
|
20681
20225
|
}, [selectedMedia !== null]);
|
|
20682
|
-
const [carouselHover, setCarouselHover] = (0,
|
|
20683
|
-
const [uploadingRects, setUploadingRects] = (0,
|
|
20684
|
-
const hoveredGapRef = (0,
|
|
20685
|
-
const imageUnhoverTimerRef = (0,
|
|
20686
|
-
const imageShowTimerRef = (0,
|
|
20687
|
-
const editStylesRef = (0,
|
|
20688
|
-
const activateRef = (0,
|
|
20226
|
+
const [carouselHover, setCarouselHover] = (0, import_react18.useState)(null);
|
|
20227
|
+
const [uploadingRects, setUploadingRects] = (0, import_react18.useState)({});
|
|
20228
|
+
const hoveredGapRef = (0, import_react18.useRef)(null);
|
|
20229
|
+
const imageUnhoverTimerRef = (0, import_react18.useRef)(null);
|
|
20230
|
+
const imageShowTimerRef = (0, import_react18.useRef)(null);
|
|
20231
|
+
const editStylesRef = (0, import_react18.useRef)(null);
|
|
20232
|
+
const activateRef = (0, import_react18.useRef)(() => {
|
|
20689
20233
|
});
|
|
20690
|
-
const deactivateRef = (0,
|
|
20234
|
+
const deactivateRef = (0, import_react18.useRef)(() => {
|
|
20691
20235
|
});
|
|
20692
|
-
const selectRef = (0,
|
|
20236
|
+
const selectRef = (0, import_react18.useRef)(() => {
|
|
20693
20237
|
});
|
|
20694
|
-
const selectFrameRef = (0,
|
|
20238
|
+
const selectFrameRef = (0, import_react18.useRef)(() => {
|
|
20695
20239
|
});
|
|
20696
|
-
const selectLogoRef = (0,
|
|
20240
|
+
const selectLogoRef = (0, import_react18.useRef)(() => {
|
|
20697
20241
|
});
|
|
20698
|
-
const openLogoSizePanelRef = (0,
|
|
20242
|
+
const openLogoSizePanelRef = (0, import_react18.useRef)(() => {
|
|
20699
20243
|
});
|
|
20700
|
-
const deselectRef = (0,
|
|
20244
|
+
const deselectRef = (0, import_react18.useRef)(() => {
|
|
20701
20245
|
});
|
|
20702
|
-
const closeFloatingPanelOnlyRef = (0,
|
|
20246
|
+
const closeFloatingPanelOnlyRef = (0, import_react18.useRef)(() => {
|
|
20703
20247
|
});
|
|
20704
|
-
const reselectNavigationItemRef = (0,
|
|
20248
|
+
const reselectNavigationItemRef = (0, import_react18.useRef)(() => {
|
|
20705
20249
|
});
|
|
20706
|
-
const commitNavigationTextEditRef = (0,
|
|
20250
|
+
const commitNavigationTextEditRef = (0, import_react18.useRef)(() => {
|
|
20707
20251
|
});
|
|
20708
|
-
const handleDeleteSelectedRef = (0,
|
|
20709
|
-
const runPendingDeleteUndoRef = (0,
|
|
20710
|
-
const isFooterFrameSelectionRef = (0,
|
|
20711
|
-
const refreshActiveCommandsRef = (0,
|
|
20252
|
+
const handleDeleteSelectedRef = (0, import_react18.useRef)(() => false);
|
|
20253
|
+
const runPendingDeleteUndoRef = (0, import_react18.useRef)(() => false);
|
|
20254
|
+
const isFooterFrameSelectionRef = (0, import_react18.useRef)(false);
|
|
20255
|
+
const refreshActiveCommandsRef = (0, import_react18.useRef)(() => {
|
|
20712
20256
|
});
|
|
20713
|
-
const postToParentRef = (0,
|
|
20257
|
+
const postToParentRef = (0, import_react18.useRef)(postToParent2);
|
|
20714
20258
|
postToParentRef.current = postToParent2;
|
|
20715
|
-
const aiSectionApiRef = (0,
|
|
20716
|
-
const applyTreeLocalRef = (0,
|
|
20717
|
-
const sectionsLoadedRef = (0,
|
|
20718
|
-
const pendingScheduleConfigRequests = (0,
|
|
20719
|
-
const [toolbarRect, setToolbarRect] = (0,
|
|
20720
|
-
const [formPickRect, setFormPickRect] = (0,
|
|
20721
|
-
const formPickElRef = (0,
|
|
20722
|
-
const [formViewState, setFormViewStateUi] = (0,
|
|
20723
|
-
const [formPickCount, setFormPickCount] = (0,
|
|
20724
|
-
const [formHoverRect, setFormHoverRect] = (0,
|
|
20725
|
-
const formHoverElRef = (0,
|
|
20726
|
-
const [fieldPickRect, setFieldPickRect] = (0,
|
|
20727
|
-
const fieldPickElRef = (0,
|
|
20728
|
-
const [fieldPickState, setFieldPickState] = (0,
|
|
20729
|
-
const [fieldTypePickerOpen, setFieldTypePickerOpen] = (0,
|
|
20730
|
-
const clearFormPick = (0,
|
|
20259
|
+
const aiSectionApiRef = (0, import_react18.useRef)(null);
|
|
20260
|
+
const applyTreeLocalRef = (0, import_react18.useRef)(null);
|
|
20261
|
+
const sectionsLoadedRef = (0, import_react18.useRef)(false);
|
|
20262
|
+
const pendingScheduleConfigRequests = (0, import_react18.useRef)([]);
|
|
20263
|
+
const [toolbarRect, setToolbarRect] = (0, import_react18.useState)(null);
|
|
20264
|
+
const [formPickRect, setFormPickRect] = (0, import_react18.useState)(null);
|
|
20265
|
+
const formPickElRef = (0, import_react18.useRef)(null);
|
|
20266
|
+
const [formViewState, setFormViewStateUi] = (0, import_react18.useState)("default");
|
|
20267
|
+
const [formPickCount, setFormPickCount] = (0, import_react18.useState)(null);
|
|
20268
|
+
const [formHoverRect, setFormHoverRect] = (0, import_react18.useState)(null);
|
|
20269
|
+
const formHoverElRef = (0, import_react18.useRef)(null);
|
|
20270
|
+
const [fieldPickRect, setFieldPickRect] = (0, import_react18.useState)(null);
|
|
20271
|
+
const fieldPickElRef = (0, import_react18.useRef)(null);
|
|
20272
|
+
const [fieldPickState, setFieldPickState] = (0, import_react18.useState)(null);
|
|
20273
|
+
const [fieldTypePickerOpen, setFieldTypePickerOpen] = (0, import_react18.useState)(false);
|
|
20274
|
+
const clearFormPick = (0, import_react18.useCallback)(() => {
|
|
20731
20275
|
const form = formPickElRef.current;
|
|
20732
20276
|
const editing = fieldPickElRef.current;
|
|
20733
20277
|
if (commitPlaceholderEdit(editing) && editing) {
|
|
@@ -20747,7 +20291,7 @@ function OhhwellsBridge() {
|
|
|
20747
20291
|
formPickElRef.current = null;
|
|
20748
20292
|
setFormPickRect(null);
|
|
20749
20293
|
}, []);
|
|
20750
|
-
const clearFieldPick = (0,
|
|
20294
|
+
const clearFieldPick = (0, import_react18.useCallback)(() => {
|
|
20751
20295
|
const wrapper = fieldPickElRef.current;
|
|
20752
20296
|
if (commitPlaceholderEdit(wrapper) && wrapper) {
|
|
20753
20297
|
const form = wrapper.closest('[data-ohw-editable="form"]');
|
|
@@ -20757,9 +20301,9 @@ function OhhwellsBridge() {
|
|
|
20757
20301
|
setFieldPickRect(null);
|
|
20758
20302
|
setFieldPickState(null);
|
|
20759
20303
|
}, []);
|
|
20760
|
-
const persistFieldsRef = (0,
|
|
20304
|
+
const persistFieldsRef = (0, import_react18.useRef)(() => {
|
|
20761
20305
|
});
|
|
20762
|
-
const persistFields = (0,
|
|
20306
|
+
const persistFields = (0, import_react18.useCallback)(
|
|
20763
20307
|
(form) => {
|
|
20764
20308
|
const key = formKeyOf(form);
|
|
20765
20309
|
if (!key) return;
|
|
@@ -20770,7 +20314,7 @@ function OhhwellsBridge() {
|
|
|
20770
20314
|
[]
|
|
20771
20315
|
);
|
|
20772
20316
|
persistFieldsRef.current = persistFields;
|
|
20773
|
-
const selectField = (0,
|
|
20317
|
+
const selectField = (0, import_react18.useCallback)((wrapper) => {
|
|
20774
20318
|
if (fieldPickElRef.current && fieldPickElRef.current !== wrapper) {
|
|
20775
20319
|
commitPlaceholderEdit(fieldPickElRef.current);
|
|
20776
20320
|
}
|
|
@@ -20783,7 +20327,7 @@ function OhhwellsBridge() {
|
|
|
20783
20327
|
setFieldPickState({ type: fieldTypeOf(wrapper), required: isFieldRequired(wrapper) });
|
|
20784
20328
|
setFieldTypePickerOpen(false);
|
|
20785
20329
|
}, []);
|
|
20786
|
-
const withSelectedField = (0,
|
|
20330
|
+
const withSelectedField = (0, import_react18.useCallback)(
|
|
20787
20331
|
(run) => {
|
|
20788
20332
|
const wrapper = fieldPickElRef.current;
|
|
20789
20333
|
const form = formPickElRef.current;
|
|
@@ -20796,28 +20340,28 @@ function OhhwellsBridge() {
|
|
|
20796
20340
|
},
|
|
20797
20341
|
[persistFields]
|
|
20798
20342
|
);
|
|
20799
|
-
const handleFieldTypeChange = (0,
|
|
20343
|
+
const handleFieldTypeChange = (0, import_react18.useCallback)(
|
|
20800
20344
|
(type) => withSelectedField((_form, wrapper) => {
|
|
20801
20345
|
applyFieldType(wrapper, type);
|
|
20802
20346
|
selectField(wrapper);
|
|
20803
20347
|
}),
|
|
20804
20348
|
[selectField, withSelectedField]
|
|
20805
20349
|
);
|
|
20806
|
-
const handleFieldRequiredToggle = (0,
|
|
20350
|
+
const handleFieldRequiredToggle = (0, import_react18.useCallback)(
|
|
20807
20351
|
() => withSelectedField((_form, wrapper) => {
|
|
20808
20352
|
setFieldRequired(wrapper, !isFieldRequired(wrapper));
|
|
20809
20353
|
selectField(wrapper);
|
|
20810
20354
|
}),
|
|
20811
20355
|
[selectField, withSelectedField]
|
|
20812
20356
|
);
|
|
20813
|
-
const handleFieldDuplicate = (0,
|
|
20357
|
+
const handleFieldDuplicate = (0, import_react18.useCallback)(
|
|
20814
20358
|
() => withSelectedField((form, wrapper) => {
|
|
20815
20359
|
const copy = duplicateField(form, wrapper);
|
|
20816
20360
|
selectField(copy);
|
|
20817
20361
|
}),
|
|
20818
20362
|
[selectField, withSelectedField]
|
|
20819
20363
|
);
|
|
20820
|
-
const handleFieldDelete = (0,
|
|
20364
|
+
const handleFieldDelete = (0, import_react18.useCallback)(
|
|
20821
20365
|
() => withSelectedField((_form, wrapper) => {
|
|
20822
20366
|
removeField(wrapper);
|
|
20823
20367
|
clearFieldPick();
|
|
@@ -20825,7 +20369,7 @@ function OhhwellsBridge() {
|
|
|
20825
20369
|
}),
|
|
20826
20370
|
[clearFieldPick, withSelectedField]
|
|
20827
20371
|
);
|
|
20828
|
-
const handleAddField = (0,
|
|
20372
|
+
const handleAddField = (0, import_react18.useCallback)(
|
|
20829
20373
|
(type) => {
|
|
20830
20374
|
const form = formPickElRef.current;
|
|
20831
20375
|
if (!form) return;
|
|
@@ -20841,8 +20385,8 @@ function OhhwellsBridge() {
|
|
|
20841
20385
|
},
|
|
20842
20386
|
[persistFields, selectField]
|
|
20843
20387
|
);
|
|
20844
|
-
const fieldDragRef = (0,
|
|
20845
|
-
const buildFieldDropSlots = (0,
|
|
20388
|
+
const fieldDragRef = (0, import_react18.useRef)(null);
|
|
20389
|
+
const buildFieldDropSlots = (0, import_react18.useCallback)((form, draggedKey) => {
|
|
20846
20390
|
const others = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== draggedKey);
|
|
20847
20391
|
const slots = others.map((el) => {
|
|
20848
20392
|
const rect = el.getBoundingClientRect();
|
|
@@ -20855,7 +20399,7 @@ function OhhwellsBridge() {
|
|
|
20855
20399
|
}
|
|
20856
20400
|
return slots;
|
|
20857
20401
|
}, []);
|
|
20858
|
-
const handleFieldDragStart = (0,
|
|
20402
|
+
const handleFieldDragStart = (0, import_react18.useCallback)(() => {
|
|
20859
20403
|
const wrapper = fieldPickElRef.current;
|
|
20860
20404
|
const form = formPickElRef.current;
|
|
20861
20405
|
if (!wrapper || !form) return;
|
|
@@ -20864,18 +20408,18 @@ function OhhwellsBridge() {
|
|
|
20864
20408
|
setFieldDragging(true);
|
|
20865
20409
|
setFieldDropSlots(buildFieldDropSlots(form, key));
|
|
20866
20410
|
}, [buildFieldDropSlots]);
|
|
20867
|
-
const handleFieldDragEnd = (0,
|
|
20411
|
+
const handleFieldDragEnd = (0, import_react18.useCallback)(() => {
|
|
20868
20412
|
fieldDragRef.current = null;
|
|
20869
20413
|
setFieldDropIndex(null);
|
|
20870
20414
|
setFieldDropSlots([]);
|
|
20871
20415
|
setFieldDragging(false);
|
|
20872
20416
|
}, []);
|
|
20873
|
-
const [fieldDropIndex, setFieldDropIndex] = (0,
|
|
20874
|
-
const [fieldDropSlots, setFieldDropSlots] = (0,
|
|
20875
|
-
const [fieldDragging, setFieldDragging] = (0,
|
|
20876
|
-
const clearFormPickRef = (0,
|
|
20417
|
+
const [fieldDropIndex, setFieldDropIndex] = (0, import_react18.useState)(null);
|
|
20418
|
+
const [fieldDropSlots, setFieldDropSlots] = (0, import_react18.useState)([]);
|
|
20419
|
+
const [fieldDragging, setFieldDragging] = (0, import_react18.useState)(false);
|
|
20420
|
+
const clearFormPickRef = (0, import_react18.useRef)(clearFormPick);
|
|
20877
20421
|
clearFormPickRef.current = clearFormPick;
|
|
20878
|
-
(0,
|
|
20422
|
+
(0, import_react18.useEffect)(() => {
|
|
20879
20423
|
const el = fieldPickElRef.current;
|
|
20880
20424
|
if (!el || fieldPickRect === null) return;
|
|
20881
20425
|
const observer = new ResizeObserver(() => {
|
|
@@ -20884,7 +20428,7 @@ function OhhwellsBridge() {
|
|
|
20884
20428
|
observer.observe(el);
|
|
20885
20429
|
return () => observer.disconnect();
|
|
20886
20430
|
}, [fieldPickRect !== null, fieldPickState]);
|
|
20887
|
-
(0,
|
|
20431
|
+
(0, import_react18.useEffect)(() => {
|
|
20888
20432
|
const el = formPickElRef.current;
|
|
20889
20433
|
if (!el || formPickRect === null) return;
|
|
20890
20434
|
const observer = new ResizeObserver(() => {
|
|
@@ -20893,25 +20437,25 @@ function OhhwellsBridge() {
|
|
|
20893
20437
|
observer.observe(el);
|
|
20894
20438
|
return () => observer.disconnect();
|
|
20895
20439
|
}, [formPickRect !== null, formViewState]);
|
|
20896
|
-
const [toolbarVariant, setToolbarVariant] = (0,
|
|
20897
|
-
const toolbarVariantRef = (0,
|
|
20440
|
+
const [toolbarVariant, setToolbarVariant] = (0, import_react18.useState)("none");
|
|
20441
|
+
const toolbarVariantRef = (0, import_react18.useRef)("none");
|
|
20898
20442
|
toolbarVariantRef.current = toolbarVariant;
|
|
20899
|
-
const [selectedIsCta, setSelectedIsCta] = (0,
|
|
20900
|
-
const [selectedIsSocial, setSelectedIsSocial] = (0,
|
|
20901
|
-
const [selectedIsSocialsRow, setSelectedIsSocialsRow] = (0,
|
|
20902
|
-
const [reorderHrefKey, setReorderHrefKey] = (0,
|
|
20903
|
-
const [reorderDragDisabled, setReorderDragDisabled] = (0,
|
|
20904
|
-
const [toggleState, setToggleState] = (0,
|
|
20905
|
-
const [maxBadge, setMaxBadge] = (0,
|
|
20906
|
-
const [activeCommands, setActiveCommands] = (0,
|
|
20907
|
-
const [sectionGap, setSectionGap] = (0,
|
|
20908
|
-
const [toolbarShowEditLink, setToolbarShowEditLink] = (0,
|
|
20909
|
-
const hoveredNavContainerRef = (0,
|
|
20910
|
-
const [hoveredNavContainerRect, setHoveredNavContainerRect] = (0,
|
|
20911
|
-
const hoveredItemElRef = (0,
|
|
20912
|
-
const [hoveredItemRect, setHoveredItemRect] = (0,
|
|
20913
|
-
const [hoveredTextRect, setHoveredTextRect] = (0,
|
|
20914
|
-
(0,
|
|
20443
|
+
const [selectedIsCta, setSelectedIsCta] = (0, import_react18.useState)(false);
|
|
20444
|
+
const [selectedIsSocial, setSelectedIsSocial] = (0, import_react18.useState)(false);
|
|
20445
|
+
const [selectedIsSocialsRow, setSelectedIsSocialsRow] = (0, import_react18.useState)(false);
|
|
20446
|
+
const [reorderHrefKey, setReorderHrefKey] = (0, import_react18.useState)(null);
|
|
20447
|
+
const [reorderDragDisabled, setReorderDragDisabled] = (0, import_react18.useState)(false);
|
|
20448
|
+
const [toggleState, setToggleState] = (0, import_react18.useState)(null);
|
|
20449
|
+
const [maxBadge, setMaxBadge] = (0, import_react18.useState)(null);
|
|
20450
|
+
const [activeCommands, setActiveCommands] = (0, import_react18.useState)(/* @__PURE__ */ new Set());
|
|
20451
|
+
const [sectionGap, setSectionGap] = (0, import_react18.useState)(null);
|
|
20452
|
+
const [toolbarShowEditLink, setToolbarShowEditLink] = (0, import_react18.useState)(false);
|
|
20453
|
+
const hoveredNavContainerRef = (0, import_react18.useRef)(null);
|
|
20454
|
+
const [hoveredNavContainerRect, setHoveredNavContainerRect] = (0, import_react18.useState)(null);
|
|
20455
|
+
const hoveredItemElRef = (0, import_react18.useRef)(null);
|
|
20456
|
+
const [hoveredItemRect, setHoveredItemRect] = (0, import_react18.useState)(null);
|
|
20457
|
+
const [hoveredTextRect, setHoveredTextRect] = (0, import_react18.useState)(null);
|
|
20458
|
+
(0, import_react18.useEffect)(() => {
|
|
20915
20459
|
const sync = () => {
|
|
20916
20460
|
const el = document.querySelector(
|
|
20917
20461
|
'[data-ohw-hovered]:not([contenteditable]):not([data-ohw-href-key]):not([data-ohw-editable="form"] *)'
|
|
@@ -20955,57 +20499,57 @@ function OhhwellsBridge() {
|
|
|
20955
20499
|
});
|
|
20956
20500
|
return () => observer.disconnect();
|
|
20957
20501
|
}, []);
|
|
20958
|
-
const siblingHintElRef = (0,
|
|
20959
|
-
const [siblingHintRect, setSiblingHintRect] = (0,
|
|
20960
|
-
const [siblingHintRects, setSiblingHintRects] = (0,
|
|
20961
|
-
const [isItemDragging, setIsItemDragging] = (0,
|
|
20962
|
-
const [isFooterFrameSelection, setIsFooterFrameSelection] = (0,
|
|
20502
|
+
const siblingHintElRef = (0, import_react18.useRef)(null);
|
|
20503
|
+
const [siblingHintRect, setSiblingHintRect] = (0, import_react18.useState)(null);
|
|
20504
|
+
const [siblingHintRects, setSiblingHintRects] = (0, import_react18.useState)([]);
|
|
20505
|
+
const [isItemDragging, setIsItemDragging] = (0, import_react18.useState)(false);
|
|
20506
|
+
const [isFooterFrameSelection, setIsFooterFrameSelection] = (0, import_react18.useState)(false);
|
|
20963
20507
|
isFooterFrameSelectionRef.current = isFooterFrameSelection;
|
|
20964
|
-
const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = (0,
|
|
20965
|
-
const [footerHeadingVisible, setFooterHeadingVisible] = (0,
|
|
20966
|
-
const footerDragRef = (0,
|
|
20967
|
-
const [footerDropSlots, setFooterDropSlots] = (0,
|
|
20968
|
-
const [activeFooterDropIndex, setActiveFooterDropIndex] = (0,
|
|
20969
|
-
const [draggedItemRect, setDraggedItemRect] = (0,
|
|
20970
|
-
const footerPointerDragRef = (0,
|
|
20971
|
-
const suppressNextClickRef = (0,
|
|
20972
|
-
const suppressClickUntilRef = (0,
|
|
20973
|
-
const [linkPopover, setLinkPopover] = (0,
|
|
20974
|
-
const linkPopoverSessionRef = (0,
|
|
20975
|
-
const addNavAfterAnchorRef = (0,
|
|
20976
|
-
const editContentRef = (0,
|
|
20977
|
-
const aiSectionsRef = (0,
|
|
20978
|
-
const brandKitRef = (0,
|
|
20979
|
-
const stylesRef = (0,
|
|
20980
|
-
const appliedDrawerRef = (0,
|
|
20981
|
-
const pendingDeleteUndoRef = (0,
|
|
20982
|
-
const [floatingPanel, setFloatingPanel] = (0,
|
|
20983
|
-
const floatingPanelOpenRef = (0,
|
|
20984
|
-
const floatingPanelRef = (0,
|
|
20508
|
+
const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = (0, import_react18.useState)(null);
|
|
20509
|
+
const [footerHeadingVisible, setFooterHeadingVisible] = (0, import_react18.useState)(null);
|
|
20510
|
+
const footerDragRef = (0, import_react18.useRef)(null);
|
|
20511
|
+
const [footerDropSlots, setFooterDropSlots] = (0, import_react18.useState)([]);
|
|
20512
|
+
const [activeFooterDropIndex, setActiveFooterDropIndex] = (0, import_react18.useState)(null);
|
|
20513
|
+
const [draggedItemRect, setDraggedItemRect] = (0, import_react18.useState)(null);
|
|
20514
|
+
const footerPointerDragRef = (0, import_react18.useRef)(null);
|
|
20515
|
+
const suppressNextClickRef = (0, import_react18.useRef)(false);
|
|
20516
|
+
const suppressClickUntilRef = (0, import_react18.useRef)(0);
|
|
20517
|
+
const [linkPopover, setLinkPopover] = (0, import_react18.useState)(null);
|
|
20518
|
+
const linkPopoverSessionRef = (0, import_react18.useRef)(null);
|
|
20519
|
+
const addNavAfterAnchorRef = (0, import_react18.useRef)(null);
|
|
20520
|
+
const editContentRef = (0, import_react18.useRef)({});
|
|
20521
|
+
const aiSectionsRef = (0, import_react18.useRef)("");
|
|
20522
|
+
const brandKitRef = (0, import_react18.useRef)("");
|
|
20523
|
+
const stylesRef = (0, import_react18.useRef)("");
|
|
20524
|
+
const appliedDrawerRef = (0, import_react18.useRef)(null);
|
|
20525
|
+
const pendingDeleteUndoRef = (0, import_react18.useRef)(null);
|
|
20526
|
+
const [floatingPanel, setFloatingPanel] = (0, import_react18.useState)(null);
|
|
20527
|
+
const floatingPanelOpenRef = (0, import_react18.useRef)(false);
|
|
20528
|
+
const floatingPanelRef = (0, import_react18.useRef)(null);
|
|
20985
20529
|
floatingPanelRef.current = floatingPanel;
|
|
20986
|
-
const setFloatingPanelRef = (0,
|
|
20987
|
-
const [floatingPanelPos, setFloatingPanelPos] = (0,
|
|
20988
|
-
const buttonCollectionDragRef = (0,
|
|
20989
|
-
const buttonDropInsertIndexRef = (0,
|
|
20990
|
-
const [buttonDropSlots, setButtonDropSlots] = (0,
|
|
20991
|
-
const [activeButtonDropIndex, setActiveButtonDropIndex] = (0,
|
|
20992
|
-
const buttonPointerDragRef = (0,
|
|
20993
|
-
const [buttonStyleTick, setButtonStyleTick] = (0,
|
|
20994
|
-
const [logoSizeDraft, setLogoSizeDraft] = (0,
|
|
20995
|
-
const [editorViewport, setEditorViewport] = (0,
|
|
20996
|
-
const [parentScrollSnap, setParentScrollSnap] = (0,
|
|
20997
|
-
const [sitePages, setSitePages] = (0,
|
|
20998
|
-
const [sectionsByPath, setSectionsByPath] = (0,
|
|
20999
|
-
const sectionsPrefetchGenRef = (0,
|
|
21000
|
-
const setLinkPopoverRef = (0,
|
|
21001
|
-
const linkPopoverPanelRef = (0,
|
|
21002
|
-
const linkPopoverOpenRef = (0,
|
|
21003
|
-
const linkPopoverGraceUntilRef = (0,
|
|
20530
|
+
const setFloatingPanelRef = (0, import_react18.useRef)(setFloatingPanel);
|
|
20531
|
+
const [floatingPanelPos, setFloatingPanelPos] = (0, import_react18.useState)(null);
|
|
20532
|
+
const buttonCollectionDragRef = (0, import_react18.useRef)(null);
|
|
20533
|
+
const buttonDropInsertIndexRef = (0, import_react18.useRef)(null);
|
|
20534
|
+
const [buttonDropSlots, setButtonDropSlots] = (0, import_react18.useState)([]);
|
|
20535
|
+
const [activeButtonDropIndex, setActiveButtonDropIndex] = (0, import_react18.useState)(null);
|
|
20536
|
+
const buttonPointerDragRef = (0, import_react18.useRef)(null);
|
|
20537
|
+
const [buttonStyleTick, setButtonStyleTick] = (0, import_react18.useState)(0);
|
|
20538
|
+
const [logoSizeDraft, setLogoSizeDraft] = (0, import_react18.useState)(null);
|
|
20539
|
+
const [editorViewport, setEditorViewport] = (0, import_react18.useState)("desktop");
|
|
20540
|
+
const [parentScrollSnap, setParentScrollSnap] = (0, import_react18.useState)(null);
|
|
20541
|
+
const [sitePages, setSitePages] = (0, import_react18.useState)([]);
|
|
20542
|
+
const [sectionsByPath, setSectionsByPath] = (0, import_react18.useState)({});
|
|
20543
|
+
const sectionsPrefetchGenRef = (0, import_react18.useRef)(0);
|
|
20544
|
+
const setLinkPopoverRef = (0, import_react18.useRef)(setLinkPopover);
|
|
20545
|
+
const linkPopoverPanelRef = (0, import_react18.useRef)(null);
|
|
20546
|
+
const linkPopoverOpenRef = (0, import_react18.useRef)(false);
|
|
20547
|
+
const linkPopoverGraceUntilRef = (0, import_react18.useRef)(0);
|
|
21004
20548
|
setLinkPopoverRef.current = setLinkPopover;
|
|
21005
20549
|
setFloatingPanelRef.current = setFloatingPanel;
|
|
21006
20550
|
linkPopoverSessionRef.current = linkPopover;
|
|
21007
20551
|
floatingPanelOpenRef.current = Boolean(floatingPanel);
|
|
21008
|
-
(0,
|
|
20552
|
+
(0, import_react18.useEffect)(() => {
|
|
21009
20553
|
const syncViewport = () => {
|
|
21010
20554
|
const next = window.innerWidth <= 480 ? "mobile" : "desktop";
|
|
21011
20555
|
setEditorViewport((prev) => prev === next ? prev : next);
|
|
@@ -21014,7 +20558,7 @@ function OhhwellsBridge() {
|
|
|
21014
20558
|
window.addEventListener("resize", syncViewport);
|
|
21015
20559
|
return () => window.removeEventListener("resize", syncViewport);
|
|
21016
20560
|
}, []);
|
|
21017
|
-
(0,
|
|
20561
|
+
(0, import_react18.useEffect)(() => {
|
|
21018
20562
|
setSectionOrderPersistHandler((entries) => {
|
|
21019
20563
|
const currentPath = window.location.pathname;
|
|
21020
20564
|
const merged = mergePageSectionOrder(editContentRef.current[SECTION_ORDER_KEY], currentPath, entries);
|
|
@@ -21070,7 +20614,7 @@ function OhhwellsBridge() {
|
|
|
21070
20614
|
const bumpLinkPopoverGrace = () => {
|
|
21071
20615
|
linkPopoverGraceUntilRef.current = Date.now() + 350;
|
|
21072
20616
|
};
|
|
21073
|
-
const runSectionsPrefetch = (0,
|
|
20617
|
+
const runSectionsPrefetch = (0, import_react18.useCallback)((pages) => {
|
|
21074
20618
|
if (!isEditMode || shouldUseDevFixtures() || pages.length === 0) return;
|
|
21075
20619
|
const gen = ++sectionsPrefetchGenRef.current;
|
|
21076
20620
|
const paths = pages.map((p) => p.path);
|
|
@@ -21089,9 +20633,9 @@ function OhhwellsBridge() {
|
|
|
21089
20633
|
);
|
|
21090
20634
|
});
|
|
21091
20635
|
}, [isEditMode, pathname]);
|
|
21092
|
-
const runSectionsPrefetchRef = (0,
|
|
20636
|
+
const runSectionsPrefetchRef = (0, import_react18.useRef)(runSectionsPrefetch);
|
|
21093
20637
|
runSectionsPrefetchRef.current = runSectionsPrefetch;
|
|
21094
|
-
(0,
|
|
20638
|
+
(0, import_react18.useEffect)(() => {
|
|
21095
20639
|
if (!linkPopover) {
|
|
21096
20640
|
document.documentElement.removeAttribute("data-ohw-link-popover-open");
|
|
21097
20641
|
return;
|
|
@@ -21119,7 +20663,7 @@ function OhhwellsBridge() {
|
|
|
21119
20663
|
document.documentElement.removeAttribute("data-ohw-link-popover-open");
|
|
21120
20664
|
};
|
|
21121
20665
|
}, [linkPopover, postToParent2]);
|
|
21122
|
-
(0,
|
|
20666
|
+
(0, import_react18.useEffect)(() => {
|
|
21123
20667
|
if (!isEditMode) return;
|
|
21124
20668
|
const useFixtures = shouldUseDevFixtures();
|
|
21125
20669
|
if (useFixtures) {
|
|
@@ -21143,14 +20687,14 @@ function OhhwellsBridge() {
|
|
|
21143
20687
|
if (!useFixtures) postToParent2({ type: "ow:request-site-pages" });
|
|
21144
20688
|
return () => window.removeEventListener("message", onSitePages);
|
|
21145
20689
|
}, [isEditMode, postToParent2]);
|
|
21146
|
-
(0,
|
|
20690
|
+
(0, import_react18.useEffect)(() => {
|
|
21147
20691
|
if (!isEditMode || shouldUseDevFixtures()) return;
|
|
21148
20692
|
void loadAllSectionsManifest().then((manifest) => {
|
|
21149
20693
|
if (Object.keys(manifest).length === 0) return;
|
|
21150
20694
|
setSectionsByPath((prev) => ({ ...manifest, ...prev }));
|
|
21151
20695
|
});
|
|
21152
20696
|
}, [isEditMode]);
|
|
21153
|
-
(0,
|
|
20697
|
+
(0, import_react18.useEffect)(() => {
|
|
21154
20698
|
const update = () => {
|
|
21155
20699
|
const el = activeElRef.current ?? selectedElRef.current;
|
|
21156
20700
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
@@ -21174,10 +20718,10 @@ function OhhwellsBridge() {
|
|
|
21174
20718
|
vvp.removeEventListener("resize", update);
|
|
21175
20719
|
};
|
|
21176
20720
|
}, []);
|
|
21177
|
-
const refreshStateRules = (0,
|
|
20721
|
+
const refreshStateRules = (0, import_react18.useCallback)(() => {
|
|
21178
20722
|
editStylesRef.current?.forceHover && (editStylesRef.current.forceHover.textContent = collectStateRules());
|
|
21179
20723
|
}, []);
|
|
21180
|
-
const processConfigRequest = (0,
|
|
20724
|
+
const processConfigRequest = (0, import_react18.useCallback)((insertAfterVal) => {
|
|
21181
20725
|
const tracker = getSectionsTracker();
|
|
21182
20726
|
let entries = [];
|
|
21183
20727
|
try {
|
|
@@ -21200,7 +20744,7 @@ function OhhwellsBridge() {
|
|
|
21200
20744
|
}
|
|
21201
20745
|
window.postMessage({ type: "ow:schedule-config", insertAfter: insertAfterVal, scheduleId: null }, "*");
|
|
21202
20746
|
}, [isEditMode]);
|
|
21203
|
-
const deactivate = (0,
|
|
20747
|
+
const deactivate = (0, import_react18.useCallback)(() => {
|
|
21204
20748
|
const el = activeElRef.current;
|
|
21205
20749
|
if (!el) return;
|
|
21206
20750
|
const isFormBlock = el.dataset.ohwEditable === "form";
|
|
@@ -21251,12 +20795,12 @@ function OhhwellsBridge() {
|
|
|
21251
20795
|
setToolbarShowEditLink(false);
|
|
21252
20796
|
postToParent2({ type: "ow:exit-edit" });
|
|
21253
20797
|
}, [postToParent2]);
|
|
21254
|
-
const clearSelectedAttr = (0,
|
|
20798
|
+
const clearSelectedAttr = (0, import_react18.useCallback)(() => {
|
|
21255
20799
|
document.querySelectorAll("[data-ohw-selected]").forEach((el) => {
|
|
21256
20800
|
el.removeAttribute("data-ohw-selected");
|
|
21257
20801
|
});
|
|
21258
20802
|
}, []);
|
|
21259
|
-
const deselect = (0,
|
|
20803
|
+
const deselect = (0, import_react18.useCallback)(() => {
|
|
21260
20804
|
const nestedGroup = selectedElRef.current?.closest("[data-ohw-nav-children]") != null ? selectedElRef.current.closest("[data-ohw-nav-group]") : null;
|
|
21261
20805
|
clearSelectedAttr();
|
|
21262
20806
|
selectedElRef.current = null;
|
|
@@ -21291,20 +20835,20 @@ function OhhwellsBridge() {
|
|
|
21291
20835
|
setToolbarVariant("none");
|
|
21292
20836
|
}
|
|
21293
20837
|
}, [clearSelectedAttr]);
|
|
21294
|
-
const markSelected = (0,
|
|
20838
|
+
const markSelected = (0, import_react18.useCallback)((el) => {
|
|
21295
20839
|
clearSelectedAttr();
|
|
21296
20840
|
el.removeAttribute("data-ohw-hovered");
|
|
21297
20841
|
el.setAttribute("data-ohw-selected", "");
|
|
21298
20842
|
}, [clearSelectedAttr]);
|
|
21299
|
-
const isSelectedForHover = (0,
|
|
20843
|
+
const isSelectedForHover = (0, import_react18.useCallback)((el) => {
|
|
21300
20844
|
if (!el) return false;
|
|
21301
20845
|
return [selectedElRef.current, activeElRef.current].some(
|
|
21302
20846
|
(busy) => busy && (el === busy || busy.contains(el) || el.contains(busy))
|
|
21303
20847
|
);
|
|
21304
20848
|
}, []);
|
|
21305
|
-
const isSelectedForHoverRef = (0,
|
|
20849
|
+
const isSelectedForHoverRef = (0, import_react18.useRef)(isSelectedForHover);
|
|
21306
20850
|
isSelectedForHoverRef.current = isSelectedForHover;
|
|
21307
|
-
const resolveHrefKeyElement = (0,
|
|
20851
|
+
const resolveHrefKeyElement = (0, import_react18.useCallback)((hrefKey) => {
|
|
21308
20852
|
if (isFooterHrefKey(hrefKey)) {
|
|
21309
20853
|
return document.querySelector(
|
|
21310
20854
|
`footer [data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
@@ -21319,7 +20863,7 @@ function OhhwellsBridge() {
|
|
|
21319
20863
|
`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`
|
|
21320
20864
|
);
|
|
21321
20865
|
}, []);
|
|
21322
|
-
const resyncSelectedNavigationItem = (0,
|
|
20866
|
+
const resyncSelectedNavigationItem = (0, import_react18.useCallback)(() => {
|
|
21323
20867
|
const hrefKey = selectedHrefKeyRef.current;
|
|
21324
20868
|
if (hrefKey) {
|
|
21325
20869
|
const link = resolveHrefKeyElement(hrefKey);
|
|
@@ -21357,7 +20901,7 @@ function OhhwellsBridge() {
|
|
|
21357
20901
|
);
|
|
21358
20902
|
}
|
|
21359
20903
|
}, [resolveHrefKeyElement]);
|
|
21360
|
-
const reselectNavigationItem = (0,
|
|
20904
|
+
const reselectNavigationItem = (0, import_react18.useCallback)((navAnchor) => {
|
|
21361
20905
|
selectedElRef.current = navAnchor;
|
|
21362
20906
|
selectedHrefKeyRef.current = navAnchor.getAttribute("data-ohw-href-key");
|
|
21363
20907
|
selectedFooterColAttrRef.current = null;
|
|
@@ -21388,7 +20932,7 @@ function OhhwellsBridge() {
|
|
|
21388
20932
|
setToolbarShowEditLink(false);
|
|
21389
20933
|
setActiveCommands(/* @__PURE__ */ new Set());
|
|
21390
20934
|
}, [markSelected]);
|
|
21391
|
-
const commitNavigationTextEdit = (0,
|
|
20935
|
+
const commitNavigationTextEdit = (0, import_react18.useCallback)((navAnchor) => {
|
|
21392
20936
|
const el = activeElRef.current;
|
|
21393
20937
|
if (!el) return;
|
|
21394
20938
|
const key = el.dataset.ohwKey;
|
|
@@ -21421,7 +20965,7 @@ function OhhwellsBridge() {
|
|
|
21421
20965
|
postToParent2({ type: "ow:exit-edit" });
|
|
21422
20966
|
reselectNavigationItem(navAnchor);
|
|
21423
20967
|
}, [postToParent2, reselectNavigationItem]);
|
|
21424
|
-
const handleAddTopLevelNavItem = (0,
|
|
20968
|
+
const handleAddTopLevelNavItem = (0, import_react18.useCallback)(() => {
|
|
21425
20969
|
const items = listNavbarRootItems();
|
|
21426
20970
|
addNavAfterAnchorRef.current = items[items.length - 1] ?? null;
|
|
21427
20971
|
deselectRef.current();
|
|
@@ -21433,7 +20977,7 @@ function OhhwellsBridge() {
|
|
|
21433
20977
|
intent: "add-nav"
|
|
21434
20978
|
});
|
|
21435
20979
|
}, []);
|
|
21436
|
-
const maybeWarnNavLinkDropdownConflict = (0,
|
|
20980
|
+
const maybeWarnNavLinkDropdownConflict = (0, import_react18.useCallback)(
|
|
21437
20981
|
(anchor) => {
|
|
21438
20982
|
if (!isNavbarHrefKey(anchor.getAttribute("data-ohw-href-key"))) return;
|
|
21439
20983
|
if (!navDropdownsOpenOnClick()) return;
|
|
@@ -21446,7 +20990,7 @@ function OhhwellsBridge() {
|
|
|
21446
20990
|
},
|
|
21447
20991
|
[postToParent2]
|
|
21448
20992
|
);
|
|
21449
|
-
const handleNavDropdownOpenChange = (0,
|
|
20993
|
+
const handleNavDropdownOpenChange = (0, import_react18.useCallback)((open) => {
|
|
21450
20994
|
const selected = selectedElRef.current;
|
|
21451
20995
|
if (!selected || !isNavigationItem2(selected)) return;
|
|
21452
20996
|
if (isNestedNavChild(selected)) return;
|
|
@@ -21462,7 +21006,7 @@ function OhhwellsBridge() {
|
|
|
21462
21006
|
}
|
|
21463
21007
|
});
|
|
21464
21008
|
}, []);
|
|
21465
|
-
const handleFooterHeadingVisibleChange = (0,
|
|
21009
|
+
const handleFooterHeadingVisibleChange = (0, import_react18.useCallback)(
|
|
21466
21010
|
(visible) => {
|
|
21467
21011
|
const selected = selectedElRef.current;
|
|
21468
21012
|
if (!selected || !isFooterFrameSelectionRef.current) return;
|
|
@@ -21486,7 +21030,7 @@ function OhhwellsBridge() {
|
|
|
21486
21030
|
},
|
|
21487
21031
|
[postToParent2]
|
|
21488
21032
|
);
|
|
21489
|
-
const enterEditOnNewItem = (0,
|
|
21033
|
+
const enterEditOnNewItem = (0, import_react18.useCallback)((anchor) => {
|
|
21490
21034
|
const label = anchor.querySelector('[data-ohw-editable="text"]');
|
|
21491
21035
|
if (!label) {
|
|
21492
21036
|
selectRef.current(anchor);
|
|
@@ -21495,8 +21039,8 @@ function OhhwellsBridge() {
|
|
|
21495
21039
|
setNavGroupForceOpen(anchor, true);
|
|
21496
21040
|
activateRef.current(label);
|
|
21497
21041
|
}, []);
|
|
21498
|
-
const pendingSocialAddRef = (0,
|
|
21499
|
-
const handleAddChildItem = (0,
|
|
21042
|
+
const pendingSocialAddRef = (0, import_react18.useRef)(null);
|
|
21043
|
+
const handleAddChildItem = (0, import_react18.useCallback)(() => {
|
|
21500
21044
|
const selected = selectedElRef.current;
|
|
21501
21045
|
if (!selected) return;
|
|
21502
21046
|
const socialsRow = isSocialsRow(selected) ? selected : findSocialsRow(selected);
|
|
@@ -21607,7 +21151,7 @@ function OhhwellsBridge() {
|
|
|
21607
21151
|
});
|
|
21608
21152
|
});
|
|
21609
21153
|
}, [enterEditOnNewItem, isFooterFrameSelection, maybeWarnNavLinkDropdownConflict, postToParent2]);
|
|
21610
|
-
const handleAddFooterColumn = (0,
|
|
21154
|
+
const handleAddFooterColumn = (0, import_react18.useCallback)(() => {
|
|
21611
21155
|
if (!canAddFooterColumn()) {
|
|
21612
21156
|
postToParent2({
|
|
21613
21157
|
type: "ow:toast",
|
|
@@ -21628,7 +21172,7 @@ function OhhwellsBridge() {
|
|
|
21628
21172
|
selectRef.current(result.firstLink);
|
|
21629
21173
|
});
|
|
21630
21174
|
}, [postToParent2]);
|
|
21631
|
-
const clearFooterDragVisuals = (0,
|
|
21175
|
+
const clearFooterDragVisuals = (0, import_react18.useCallback)(() => {
|
|
21632
21176
|
footerDragRef.current = null;
|
|
21633
21177
|
setSiblingHintRects([]);
|
|
21634
21178
|
setFooterDropSlots([]);
|
|
@@ -21637,7 +21181,7 @@ function OhhwellsBridge() {
|
|
|
21637
21181
|
setIsItemDragging(false);
|
|
21638
21182
|
unlockFooterDragInteraction();
|
|
21639
21183
|
}, []);
|
|
21640
|
-
const refreshFooterDragVisuals = (0,
|
|
21184
|
+
const refreshFooterDragVisuals = (0, import_react18.useCallback)((session, activeSlot, clientX, clientY) => {
|
|
21641
21185
|
const dragged = session.draggedEl;
|
|
21642
21186
|
setDraggedItemRect(dragged.getBoundingClientRect());
|
|
21643
21187
|
if (typeof clientX === "number" && typeof clientY === "number") {
|
|
@@ -21669,13 +21213,13 @@ function OhhwellsBridge() {
|
|
|
21669
21213
|
const activeIdx = activeSlot ? slots.findIndex((s) => s.insertIndex === activeSlot.insertIndex) : -1;
|
|
21670
21214
|
setActiveFooterDropIndex(activeIdx >= 0 ? activeIdx : null);
|
|
21671
21215
|
}, []);
|
|
21672
|
-
const refreshFooterDragVisualsRef = (0,
|
|
21216
|
+
const refreshFooterDragVisualsRef = (0, import_react18.useRef)(refreshFooterDragVisuals);
|
|
21673
21217
|
refreshFooterDragVisualsRef.current = refreshFooterDragVisuals;
|
|
21674
|
-
const commitFooterDragRef = (0,
|
|
21218
|
+
const commitFooterDragRef = (0, import_react18.useRef)(() => {
|
|
21675
21219
|
});
|
|
21676
|
-
const beginFooterDragRef = (0,
|
|
21220
|
+
const beginFooterDragRef = (0, import_react18.useRef)(() => {
|
|
21677
21221
|
});
|
|
21678
|
-
const beginFooterDrag = (0,
|
|
21222
|
+
const beginFooterDrag = (0, import_react18.useCallback)(
|
|
21679
21223
|
(session) => {
|
|
21680
21224
|
const rect = session.draggedEl.getBoundingClientRect();
|
|
21681
21225
|
session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
|
|
@@ -21695,7 +21239,7 @@ function OhhwellsBridge() {
|
|
|
21695
21239
|
[refreshFooterDragVisuals]
|
|
21696
21240
|
);
|
|
21697
21241
|
beginFooterDragRef.current = beginFooterDrag;
|
|
21698
|
-
const commitFooterDrag = (0,
|
|
21242
|
+
const commitFooterDrag = (0, import_react18.useCallback)(
|
|
21699
21243
|
(clientX, clientY) => {
|
|
21700
21244
|
const session = footerDragRef.current;
|
|
21701
21245
|
if (!session) {
|
|
@@ -21824,7 +21368,7 @@ function OhhwellsBridge() {
|
|
|
21824
21368
|
[clearFooterDragVisuals, resolveHrefKeyElement, resyncSelectedNavigationItem]
|
|
21825
21369
|
);
|
|
21826
21370
|
commitFooterDragRef.current = commitFooterDrag;
|
|
21827
|
-
const startFooterLinkDrag = (0,
|
|
21371
|
+
const startFooterLinkDrag = (0, import_react18.useCallback)(
|
|
21828
21372
|
(anchor, clientX, clientY, wasSelected) => {
|
|
21829
21373
|
const hrefKey = anchor.getAttribute("data-ohw-href-key");
|
|
21830
21374
|
if (!hrefKey) return false;
|
|
@@ -21860,7 +21404,7 @@ function OhhwellsBridge() {
|
|
|
21860
21404
|
},
|
|
21861
21405
|
[beginFooterDrag]
|
|
21862
21406
|
);
|
|
21863
|
-
const startFooterColumnDrag = (0,
|
|
21407
|
+
const startFooterColumnDrag = (0, import_react18.useCallback)(
|
|
21864
21408
|
(columnEl, clientX, clientY, wasSelected) => {
|
|
21865
21409
|
const columns = listFooterColumns();
|
|
21866
21410
|
const idx = columns.indexOf(columnEl);
|
|
@@ -21880,7 +21424,7 @@ function OhhwellsBridge() {
|
|
|
21880
21424
|
},
|
|
21881
21425
|
[beginFooterDrag]
|
|
21882
21426
|
);
|
|
21883
|
-
const persistButtonCollectionDrag = (0,
|
|
21427
|
+
const persistButtonCollectionDrag = (0, import_react18.useCallback)(
|
|
21884
21428
|
(button, clientX) => {
|
|
21885
21429
|
const insertIndex = buttonDropInsertIndexRef.current;
|
|
21886
21430
|
if (insertIndex != null) insertButtonAtCollectionIndex(button, insertIndex);
|
|
@@ -21904,7 +21448,7 @@ function OhhwellsBridge() {
|
|
|
21904
21448
|
},
|
|
21905
21449
|
[postToParent2]
|
|
21906
21450
|
);
|
|
21907
|
-
const refreshButtonDragVisuals = (0,
|
|
21451
|
+
const refreshButtonDragVisuals = (0, import_react18.useCallback)((button, clientX, clientY) => {
|
|
21908
21452
|
const collection = buttonCollectionOf(button);
|
|
21909
21453
|
if (!collection) {
|
|
21910
21454
|
setButtonDropSlots([]);
|
|
@@ -21921,7 +21465,7 @@ function OhhwellsBridge() {
|
|
|
21921
21465
|
setDraggedItemRect(button.getBoundingClientRect());
|
|
21922
21466
|
if (selectedElRef.current === button) setToolbarRect(button.getBoundingClientRect());
|
|
21923
21467
|
}, []);
|
|
21924
|
-
const handleItemDragStart = (0,
|
|
21468
|
+
const handleItemDragStart = (0, import_react18.useCallback)(
|
|
21925
21469
|
(e) => {
|
|
21926
21470
|
const selected = selectedElRef.current;
|
|
21927
21471
|
if (!selected) {
|
|
@@ -21952,7 +21496,7 @@ function OhhwellsBridge() {
|
|
|
21952
21496
|
},
|
|
21953
21497
|
[startFooterColumnDrag, startFooterLinkDrag, startNavLinkDrag, refreshButtonDragVisuals]
|
|
21954
21498
|
);
|
|
21955
|
-
const handleItemDragEnd = (0,
|
|
21499
|
+
const handleItemDragEnd = (0, import_react18.useCallback)(
|
|
21956
21500
|
(e) => {
|
|
21957
21501
|
const collectionButton = buttonCollectionDragRef.current;
|
|
21958
21502
|
if (collectionButton) {
|
|
@@ -21983,7 +21527,7 @@ function OhhwellsBridge() {
|
|
|
21983
21527
|
},
|
|
21984
21528
|
[commitFooterDrag, commitNavDrag, navDragRef, persistButtonCollectionDrag]
|
|
21985
21529
|
);
|
|
21986
|
-
const handleItemChromePointerDown = (0,
|
|
21530
|
+
const handleItemChromePointerDown = (0, import_react18.useCallback)((e) => {
|
|
21987
21531
|
if (e.button !== 0) return;
|
|
21988
21532
|
const selected = selectedElRef.current;
|
|
21989
21533
|
if (!selected) return;
|
|
@@ -22024,7 +21568,7 @@ function OhhwellsBridge() {
|
|
|
22024
21568
|
}
|
|
22025
21569
|
if (armNavPressFromChrome(selected, e.clientX, e.clientY, e.pointerId)) return;
|
|
22026
21570
|
}, [armNavPressFromChrome]);
|
|
22027
|
-
const handleItemChromeClick = (0,
|
|
21571
|
+
const handleItemChromeClick = (0, import_react18.useCallback)((clientX, clientY) => {
|
|
22028
21572
|
if (suppressNextClickRef.current || Date.now() < suppressClickUntilRef.current) {
|
|
22029
21573
|
suppressNextClickRef.current = false;
|
|
22030
21574
|
return;
|
|
@@ -22037,7 +21581,7 @@ function OhhwellsBridge() {
|
|
|
22037
21581
|
}, []);
|
|
22038
21582
|
reselectNavigationItemRef.current = reselectNavigationItem;
|
|
22039
21583
|
commitNavigationTextEditRef.current = commitNavigationTextEdit;
|
|
22040
|
-
const select = (0,
|
|
21584
|
+
const select = (0, import_react18.useCallback)((anchor) => {
|
|
22041
21585
|
if (!isNavigationItem2(anchor)) return;
|
|
22042
21586
|
if (activeElRef.current) deactivate();
|
|
22043
21587
|
aiSectionApiRef.current?.selectFromElement(anchor);
|
|
@@ -22097,7 +21641,7 @@ function OhhwellsBridge() {
|
|
|
22097
21641
|
setLogoSizeDraft(null);
|
|
22098
21642
|
}
|
|
22099
21643
|
}, [deactivate, markSelected]);
|
|
22100
|
-
const selectFrame = (0,
|
|
21644
|
+
const selectFrame = (0, import_react18.useCallback)((el) => {
|
|
22101
21645
|
if (!isNavigationContainer(el)) return;
|
|
22102
21646
|
if (activeElRef.current) deactivate();
|
|
22103
21647
|
aiSectionApiRef.current?.selectFromElement(el);
|
|
@@ -22138,7 +21682,7 @@ function OhhwellsBridge() {
|
|
|
22138
21682
|
setFloatingPanelPos(null);
|
|
22139
21683
|
setLogoSizeDraft(null);
|
|
22140
21684
|
}, [deactivate, markSelected, postToParent2]);
|
|
22141
|
-
const selectLogo = (0,
|
|
21685
|
+
const selectLogo = (0, import_react18.useCallback)(
|
|
22142
21686
|
(logoEl) => {
|
|
22143
21687
|
if (activeElRef.current) deactivate();
|
|
22144
21688
|
selectedElRef.current = logoEl;
|
|
@@ -22167,7 +21711,7 @@ function OhhwellsBridge() {
|
|
|
22167
21711
|
},
|
|
22168
21712
|
[deactivate, markSelected]
|
|
22169
21713
|
);
|
|
22170
|
-
const openLogoSizePanel = (0,
|
|
21714
|
+
const openLogoSizePanel = (0, import_react18.useCallback)((logoEl) => {
|
|
22171
21715
|
const placement = getLogoPlacement(logoEl);
|
|
22172
21716
|
const draft = readLogoSizeState(editContentRef.current, placement);
|
|
22173
21717
|
setLogoSizeDraft(draft);
|
|
@@ -22180,7 +21724,7 @@ function OhhwellsBridge() {
|
|
|
22180
21724
|
placement
|
|
22181
21725
|
});
|
|
22182
21726
|
}, []);
|
|
22183
|
-
const openSocialsDisplayPanel = (0,
|
|
21727
|
+
const openSocialsDisplayPanel = (0, import_react18.useCallback)((row) => {
|
|
22184
21728
|
setParentScrollSnap(parentScrollRef.current);
|
|
22185
21729
|
setFloatingPanel({
|
|
22186
21730
|
key: "socials-display",
|
|
@@ -22190,7 +21734,7 @@ function OhhwellsBridge() {
|
|
|
22190
21734
|
row
|
|
22191
21735
|
});
|
|
22192
21736
|
}, []);
|
|
22193
|
-
const rememberButtonTokens = (0,
|
|
21737
|
+
const rememberButtonTokens = (0, import_react18.useCallback)(
|
|
22194
21738
|
(content, tokens, nodes) => {
|
|
22195
21739
|
if (nodes.length === 0) return content;
|
|
22196
21740
|
const next = { ...content };
|
|
@@ -22201,7 +21745,7 @@ function OhhwellsBridge() {
|
|
|
22201
21745
|
},
|
|
22202
21746
|
[postToParent2]
|
|
22203
21747
|
);
|
|
22204
|
-
const tokensForButton = (0,
|
|
21748
|
+
const tokensForButton = (0, import_react18.useCallback)(
|
|
22205
21749
|
(el, persistFallback = false) => {
|
|
22206
21750
|
const stored = readStoredStyleTokens(editContentRef.current);
|
|
22207
21751
|
if (stored) return stored;
|
|
@@ -22216,7 +21760,7 @@ function OhhwellsBridge() {
|
|
|
22216
21760
|
},
|
|
22217
21761
|
[rememberButtonTokens]
|
|
22218
21762
|
);
|
|
22219
|
-
const openButtonStylePanel = (0,
|
|
21763
|
+
const openButtonStylePanel = (0, import_react18.useCallback)(
|
|
22220
21764
|
(anchor) => {
|
|
22221
21765
|
const id = buttonId(anchor);
|
|
22222
21766
|
if (!id) return;
|
|
@@ -22234,7 +21778,7 @@ function OhhwellsBridge() {
|
|
|
22234
21778
|
},
|
|
22235
21779
|
[tokensForButton]
|
|
22236
21780
|
);
|
|
22237
|
-
const applySelectedButtonStyle = (0,
|
|
21781
|
+
const applySelectedButtonStyle = (0, import_react18.useCallback)(
|
|
22238
21782
|
(patch) => {
|
|
22239
21783
|
const panel = floatingPanelRef.current;
|
|
22240
21784
|
const id = panel?.kind === "button-style" ? panel.buttonId : null;
|
|
@@ -22252,7 +21796,7 @@ function OhhwellsBridge() {
|
|
|
22252
21796
|
},
|
|
22253
21797
|
[postToParent2]
|
|
22254
21798
|
);
|
|
22255
|
-
(0,
|
|
21799
|
+
(0, import_react18.useEffect)(() => {
|
|
22256
21800
|
const onDragOver = (e) => {
|
|
22257
21801
|
const dragged = buttonCollectionDragRef.current;
|
|
22258
21802
|
if (!dragged) return;
|
|
@@ -22271,11 +21815,11 @@ function OhhwellsBridge() {
|
|
|
22271
21815
|
document.removeEventListener("drop", onDrop);
|
|
22272
21816
|
};
|
|
22273
21817
|
}, [refreshButtonDragVisuals]);
|
|
22274
|
-
const isEditModeRef = (0,
|
|
22275
|
-
const requestMissingSocialIconsRef = (0,
|
|
21818
|
+
const isEditModeRef = (0, import_react18.useRef)(false);
|
|
21819
|
+
const requestMissingSocialIconsRef = (0, import_react18.useRef)(() => {
|
|
22276
21820
|
});
|
|
22277
|
-
const askedSocialIconsRef = (0,
|
|
22278
|
-
const requestMissingSocialIcons = (0,
|
|
21821
|
+
const askedSocialIconsRef = (0, import_react18.useRef)(/* @__PURE__ */ new Set());
|
|
21822
|
+
const requestMissingSocialIcons = (0, import_react18.useCallback)(() => {
|
|
22279
21823
|
const items = Array.from(document.querySelectorAll(`[${SOCIALS_ROW_ATTR}]`)).filter((row) => socialsDisplayFor(row, editContentRef.current).icon).flatMap((row) => {
|
|
22280
21824
|
const missing = socialsMissingIcons(row);
|
|
22281
21825
|
listSocialItems(row).forEach((item) => ensureIconSlot(item));
|
|
@@ -22287,7 +21831,7 @@ function OhhwellsBridge() {
|
|
|
22287
21831
|
}, []);
|
|
22288
21832
|
requestMissingSocialIconsRef.current = requestMissingSocialIcons;
|
|
22289
21833
|
isEditModeRef.current = isEditMode;
|
|
22290
|
-
const changeSocialsDisplay = (0,
|
|
21834
|
+
const changeSocialsDisplay = (0, import_react18.useCallback)(
|
|
22291
21835
|
(row, next) => {
|
|
22292
21836
|
if (next.icon) {
|
|
22293
21837
|
const missing = socialsMissingIcons(row);
|
|
@@ -22311,19 +21855,19 @@ function OhhwellsBridge() {
|
|
|
22311
21855
|
},
|
|
22312
21856
|
[]
|
|
22313
21857
|
);
|
|
22314
|
-
const closeFloatingPanelOnly = (0,
|
|
21858
|
+
const closeFloatingPanelOnly = (0, import_react18.useCallback)(() => {
|
|
22315
21859
|
setFloatingPanel(null);
|
|
22316
21860
|
setFloatingPanelPos(null);
|
|
22317
21861
|
setLogoSizeDraft(null);
|
|
22318
21862
|
}, []);
|
|
22319
21863
|
closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
|
|
22320
|
-
const closeFloatingPanelAndDeselect = (0,
|
|
21864
|
+
const closeFloatingPanelAndDeselect = (0, import_react18.useCallback)(() => {
|
|
22321
21865
|
setFloatingPanel(null);
|
|
22322
21866
|
setFloatingPanelPos(null);
|
|
22323
21867
|
setLogoSizeDraft(null);
|
|
22324
21868
|
deselectRef.current();
|
|
22325
21869
|
}, []);
|
|
22326
|
-
(0,
|
|
21870
|
+
(0, import_react18.useEffect)(() => {
|
|
22327
21871
|
const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
|
|
22328
21872
|
if (!session || !logoSizeDraft) {
|
|
22329
21873
|
postToParentRef.current({ type: "ow:logo-size-panel", open: false });
|
|
@@ -22342,7 +21886,7 @@ function OhhwellsBridge() {
|
|
|
22342
21886
|
max: LOGO_SIZE_MAX
|
|
22343
21887
|
});
|
|
22344
21888
|
}, [floatingPanel, logoSizeDraft, editorViewport]);
|
|
22345
|
-
const persistLogoSizeDraft = (0,
|
|
21889
|
+
const persistLogoSizeDraft = (0, import_react18.useCallback)(
|
|
22346
21890
|
(placement, draft) => {
|
|
22347
21891
|
const desktopKey = LOGO_SIZE_DESKTOP_KEYS[placement];
|
|
22348
21892
|
const mobileKey = LOGO_SIZE_MOBILE_KEYS[placement];
|
|
@@ -22382,7 +21926,7 @@ function OhhwellsBridge() {
|
|
|
22382
21926
|
},
|
|
22383
21927
|
[postToParent2]
|
|
22384
21928
|
);
|
|
22385
|
-
const activate = (0,
|
|
21929
|
+
const activate = (0, import_react18.useCallback)((el, options) => {
|
|
22386
21930
|
if (activeElRef.current === el) return;
|
|
22387
21931
|
document.querySelectorAll("[data-ohw-hovered]").forEach((hovered) => {
|
|
22388
21932
|
hovered.removeAttribute("data-ohw-hovered");
|
|
@@ -22480,8 +22024,8 @@ function OhhwellsBridge() {
|
|
|
22480
22024
|
openLogoSizePanelRef.current = openLogoSizePanel;
|
|
22481
22025
|
deselectRef.current = deselect;
|
|
22482
22026
|
closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
|
|
22483
|
-
const lastSiteWideScopeRef = (0,
|
|
22484
|
-
(0,
|
|
22027
|
+
const lastSiteWideScopeRef = (0, import_react18.useRef)(null);
|
|
22028
|
+
(0, import_react18.useEffect)(() => {
|
|
22485
22029
|
if (!isEditMode) {
|
|
22486
22030
|
if (lastSiteWideScopeRef.current !== false) {
|
|
22487
22031
|
lastSiteWideScopeRef.current = false;
|
|
@@ -22507,7 +22051,7 @@ function OhhwellsBridge() {
|
|
|
22507
22051
|
isFooterFrameSelection,
|
|
22508
22052
|
postToParent2
|
|
22509
22053
|
]);
|
|
22510
|
-
(0,
|
|
22054
|
+
(0, import_react18.useLayoutEffect)(() => {
|
|
22511
22055
|
if (!subdomain || isEditMode) {
|
|
22512
22056
|
setFetchState("done");
|
|
22513
22057
|
return;
|
|
@@ -22630,7 +22174,7 @@ function OhhwellsBridge() {
|
|
|
22630
22174
|
cancelled = true;
|
|
22631
22175
|
};
|
|
22632
22176
|
}, [subdomain, isEditMode]);
|
|
22633
|
-
(0,
|
|
22177
|
+
(0, import_react18.useEffect)(() => {
|
|
22634
22178
|
if (!isEditMode) return;
|
|
22635
22179
|
const resolveIndex = (form, clientY) => {
|
|
22636
22180
|
const wrappers = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== fieldDragRef.current?.key);
|
|
@@ -22671,7 +22215,7 @@ function OhhwellsBridge() {
|
|
|
22671
22215
|
window.removeEventListener("drop", onDrop, true);
|
|
22672
22216
|
};
|
|
22673
22217
|
}, [buildFieldDropSlots, isEditMode, persistFields, selectField]);
|
|
22674
|
-
(0,
|
|
22218
|
+
(0, import_react18.useEffect)(() => {
|
|
22675
22219
|
if (!isEditMode) return;
|
|
22676
22220
|
const mark = () => document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
22677
22221
|
markFormFields(form);
|
|
@@ -22683,7 +22227,7 @@ function OhhwellsBridge() {
|
|
|
22683
22227
|
});
|
|
22684
22228
|
return () => observer.disconnect();
|
|
22685
22229
|
}, [isEditMode, fetchState, pathname]);
|
|
22686
|
-
(0,
|
|
22230
|
+
(0, import_react18.useEffect)(() => {
|
|
22687
22231
|
if (!isEditMode) return;
|
|
22688
22232
|
let saveTimer = null;
|
|
22689
22233
|
const onInput = (e) => {
|
|
@@ -22705,14 +22249,14 @@ function OhhwellsBridge() {
|
|
|
22705
22249
|
document.addEventListener("input", onInput, true);
|
|
22706
22250
|
return () => document.removeEventListener("input", onInput, true);
|
|
22707
22251
|
}, [isEditMode, persistFields]);
|
|
22708
|
-
(0,
|
|
22252
|
+
(0, import_react18.useEffect)(() => {
|
|
22709
22253
|
if (isEditMode || fetchState !== "done") return;
|
|
22710
22254
|
const content = contentCache.get(subdomain) ?? {};
|
|
22711
22255
|
document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
22712
22256
|
reconcileFieldsFromContent(form, content);
|
|
22713
22257
|
});
|
|
22714
22258
|
}, [isEditMode, fetchState, subdomain]);
|
|
22715
|
-
(0,
|
|
22259
|
+
(0, import_react18.useEffect)(() => {
|
|
22716
22260
|
if (!isEditMode) return;
|
|
22717
22261
|
const swallow = (e) => {
|
|
22718
22262
|
const target = e.target;
|
|
@@ -22721,14 +22265,14 @@ function OhhwellsBridge() {
|
|
|
22721
22265
|
document.addEventListener("submit", swallow, true);
|
|
22722
22266
|
return () => document.removeEventListener("submit", swallow, true);
|
|
22723
22267
|
}, [isEditMode]);
|
|
22724
|
-
(0,
|
|
22268
|
+
(0, import_react18.useEffect)(() => {
|
|
22725
22269
|
if (isEditMode || fetchState !== "done") return;
|
|
22726
22270
|
console.log("env", process.env.NEXT_PUBLIC_FLOWOPS_API_URL);
|
|
22727
22271
|
const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
|
|
22728
22272
|
console.log({ apiUrl, subdomain });
|
|
22729
22273
|
bindPublishedForms(apiUrl, subdomain, contentCache.get(subdomain) ?? {});
|
|
22730
22274
|
}, [isEditMode, fetchState, subdomain]);
|
|
22731
|
-
(0,
|
|
22275
|
+
(0, import_react18.useEffect)(() => {
|
|
22732
22276
|
if (!subdomain || isEditMode) return;
|
|
22733
22277
|
let debounceTimer = null;
|
|
22734
22278
|
let observer = null;
|
|
@@ -22830,16 +22374,16 @@ function OhhwellsBridge() {
|
|
|
22830
22374
|
if (debounceTimer) clearTimeout(debounceTimer);
|
|
22831
22375
|
};
|
|
22832
22376
|
}, [subdomain, isEditMode, pathname]);
|
|
22833
|
-
(0,
|
|
22377
|
+
(0, import_react18.useLayoutEffect)(() => {
|
|
22834
22378
|
const el = document.getElementById("ohw-loader");
|
|
22835
22379
|
if (!el) return;
|
|
22836
22380
|
const visible = Boolean(subdomain) && fetchState !== "done";
|
|
22837
22381
|
el.style.display = visible ? "flex" : "none";
|
|
22838
22382
|
}, [subdomain, fetchState]);
|
|
22839
|
-
(0,
|
|
22383
|
+
(0, import_react18.useEffect)(() => {
|
|
22840
22384
|
postToParent2({ type: "ow:navigation", path: pathname });
|
|
22841
22385
|
}, [pathname, postToParent2]);
|
|
22842
|
-
(0,
|
|
22386
|
+
(0, import_react18.useEffect)(() => {
|
|
22843
22387
|
if (!subdomain || isEditMode) return;
|
|
22844
22388
|
const content = contentCache.get(subdomain);
|
|
22845
22389
|
if (!content) return;
|
|
@@ -22855,7 +22399,7 @@ function OhhwellsBridge() {
|
|
|
22855
22399
|
applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
|
|
22856
22400
|
}
|
|
22857
22401
|
}, [pathname, subdomain, isEditMode]);
|
|
22858
|
-
(0,
|
|
22402
|
+
(0, import_react18.useEffect)(() => {
|
|
22859
22403
|
if (!isEditMode) return;
|
|
22860
22404
|
if (linkPopoverSessionRef.current?.intent === "add-nav") return;
|
|
22861
22405
|
if (document.querySelector("[data-ohw-section-picker]")) return;
|
|
@@ -22863,11 +22407,11 @@ function OhhwellsBridge() {
|
|
|
22863
22407
|
deselectRef.current();
|
|
22864
22408
|
deactivateRef.current();
|
|
22865
22409
|
}, [pathname, isEditMode]);
|
|
22866
|
-
(0,
|
|
22410
|
+
(0, import_react18.useEffect)(() => {
|
|
22867
22411
|
if (!isEditMode) return;
|
|
22868
22412
|
initSectionInstancesFromContent(editContentRef.current, pathname);
|
|
22869
22413
|
}, [pathname, isEditMode]);
|
|
22870
|
-
(0,
|
|
22414
|
+
(0, import_react18.useEffect)(() => {
|
|
22871
22415
|
if (!isEditMode) return;
|
|
22872
22416
|
const observer = new MutationObserver(() => {
|
|
22873
22417
|
const drawer = document.querySelector("[data-ohw-nav-drawer]");
|
|
@@ -22878,7 +22422,7 @@ function OhhwellsBridge() {
|
|
|
22878
22422
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
22879
22423
|
return () => observer.disconnect();
|
|
22880
22424
|
}, [isEditMode, pathname]);
|
|
22881
|
-
(0,
|
|
22425
|
+
(0, import_react18.useEffect)(() => {
|
|
22882
22426
|
const contentForNav = () => {
|
|
22883
22427
|
if (isEditMode) return editContentRef.current;
|
|
22884
22428
|
if (!subdomain) return {};
|
|
@@ -22951,7 +22495,7 @@ function OhhwellsBridge() {
|
|
|
22951
22495
|
observer?.disconnect();
|
|
22952
22496
|
};
|
|
22953
22497
|
}, [isEditMode, pathname, subdomain, fetchState, resyncSelectedNavigationItem]);
|
|
22954
|
-
(0,
|
|
22498
|
+
(0, import_react18.useEffect)(() => {
|
|
22955
22499
|
if (!isEditMode) return;
|
|
22956
22500
|
let applying = false;
|
|
22957
22501
|
let rafId = null;
|
|
@@ -22989,7 +22533,7 @@ function OhhwellsBridge() {
|
|
|
22989
22533
|
observer.disconnect();
|
|
22990
22534
|
};
|
|
22991
22535
|
}, [isEditMode, pathname]);
|
|
22992
|
-
(0,
|
|
22536
|
+
(0, import_react18.useEffect)(() => {
|
|
22993
22537
|
if (!isEditMode) return;
|
|
22994
22538
|
let lastPosted = 0;
|
|
22995
22539
|
const measure = () => {
|
|
@@ -23018,7 +22562,7 @@ function OhhwellsBridge() {
|
|
|
23018
22562
|
ro.disconnect();
|
|
23019
22563
|
};
|
|
23020
22564
|
}, [pathname, isEditMode, postToParent2]);
|
|
23021
|
-
(0,
|
|
22565
|
+
(0, import_react18.useEffect)(() => {
|
|
23022
22566
|
if (!subdomainFromQuery || isEditMode) return;
|
|
23023
22567
|
const handleClick = (e) => {
|
|
23024
22568
|
const anchor = e.target.closest("a");
|
|
@@ -23034,7 +22578,7 @@ function OhhwellsBridge() {
|
|
|
23034
22578
|
document.addEventListener("click", handleClick, true);
|
|
23035
22579
|
return () => document.removeEventListener("click", handleClick, true);
|
|
23036
22580
|
}, [subdomainFromQuery, isEditMode, router]);
|
|
23037
|
-
(0,
|
|
22581
|
+
(0, import_react18.useEffect)(() => {
|
|
23038
22582
|
if (!isEditMode) {
|
|
23039
22583
|
editStylesRef.current?.base.remove();
|
|
23040
22584
|
editStylesRef.current?.forceHover.remove();
|
|
@@ -23260,11 +22804,11 @@ function OhhwellsBridge() {
|
|
|
23260
22804
|
footer [data-ohw-href-key] [data-ohw-editable][contenteditable],
|
|
23261
22805
|
footer [data-ohw-href-key] [data-ohw-editable][contenteditable] * {
|
|
23262
22806
|
outline: none !important;
|
|
23263
|
-
caret-color: ${
|
|
22807
|
+
caret-color: ${PRIMARY4} !important;
|
|
23264
22808
|
cursor: text !important;
|
|
23265
22809
|
}
|
|
23266
22810
|
[data-ohw-editable][contenteditable]::selection,
|
|
23267
|
-
[data-ohw-editable][contenteditable] *::selection { background: ${
|
|
22811
|
+
[data-ohw-editable][contenteditable] *::selection { background: ${PRIMARY4}59 !important; }
|
|
23268
22812
|
[data-ohw-editable-state], [data-ohw-editable-state] * { pointer-events: none !important; }
|
|
23269
22813
|
[data-ohw-editable-state][data-ohw-active-state] [data-ohw-editable] { pointer-events: auto !important; }
|
|
23270
22814
|
[data-ohw-editable-state][data-ohw-active-state][data-ohw-editable] { pointer-events: auto !important; }
|
|
@@ -25914,9 +25458,6 @@ function OhhwellsBridge() {
|
|
|
25914
25458
|
if (e.data?.type !== "ow:parent-scroll") return;
|
|
25915
25459
|
const { iframeOffsetTop, headerH, canvasH, promptBarH = 0 } = e.data;
|
|
25916
25460
|
parentScrollRef.current = { iframeOffsetTop, headerH, canvasH, promptBarH };
|
|
25917
|
-
if (floatingPanelOpenRef.current) {
|
|
25918
|
-
setParentScrollSnap({ iframeOffsetTop, headerH, canvasH, promptBarH });
|
|
25919
|
-
}
|
|
25920
25461
|
if (visibleViewportRef.current) {
|
|
25921
25462
|
applyVisibleViewport(visibleViewportRef.current, parentScrollRef.current);
|
|
25922
25463
|
}
|
|
@@ -26150,7 +25691,7 @@ function OhhwellsBridge() {
|
|
|
26150
25691
|
if (imageShowTimerRef.current) clearTimeout(imageShowTimerRef.current);
|
|
26151
25692
|
};
|
|
26152
25693
|
}, [isEditMode, refreshStateRules]);
|
|
26153
|
-
(0,
|
|
25694
|
+
(0, import_react18.useEffect)(() => {
|
|
26154
25695
|
if (!isEditMode) return;
|
|
26155
25696
|
const THRESHOLD = 10;
|
|
26156
25697
|
const resolveWasSelected = (el) => {
|
|
@@ -26306,7 +25847,7 @@ function OhhwellsBridge() {
|
|
|
26306
25847
|
unlockFooterDragInteraction();
|
|
26307
25848
|
};
|
|
26308
25849
|
}, [isEditMode]);
|
|
26309
|
-
(0,
|
|
25850
|
+
(0, import_react18.useEffect)(() => {
|
|
26310
25851
|
if (!isEditMode) return;
|
|
26311
25852
|
const THRESHOLD = 10;
|
|
26312
25853
|
const onPointerDown = (e) => {
|
|
@@ -26397,7 +25938,7 @@ function OhhwellsBridge() {
|
|
|
26397
25938
|
document.removeEventListener("selectstart", blockSelectStart, true);
|
|
26398
25939
|
};
|
|
26399
25940
|
}, [isEditMode, persistButtonCollectionDrag, refreshButtonDragVisuals]);
|
|
26400
|
-
(0,
|
|
25941
|
+
(0, import_react18.useEffect)(() => {
|
|
26401
25942
|
const handler = (e) => {
|
|
26402
25943
|
if (e.data?.type !== "ow:request-schedule-config") return;
|
|
26403
25944
|
const insertAfterVal = e.data.insertAfter;
|
|
@@ -26413,7 +25954,7 @@ function OhhwellsBridge() {
|
|
|
26413
25954
|
window.addEventListener("message", handler);
|
|
26414
25955
|
return () => window.removeEventListener("message", handler);
|
|
26415
25956
|
}, [processConfigRequest]);
|
|
26416
|
-
(0,
|
|
25957
|
+
(0, import_react18.useEffect)(() => {
|
|
26417
25958
|
if (!isEditMode) return;
|
|
26418
25959
|
document.querySelectorAll("[data-ohw-active-state]").forEach((el) => {
|
|
26419
25960
|
el.removeAttribute("data-ohw-active-state");
|
|
@@ -26449,13 +25990,13 @@ function OhhwellsBridge() {
|
|
|
26449
25990
|
clearTimeout(timer);
|
|
26450
25991
|
};
|
|
26451
25992
|
}, [pathname, isEditMode, refreshStateRules, postToParent2]);
|
|
26452
|
-
(0,
|
|
25993
|
+
(0, import_react18.useEffect)(() => {
|
|
26453
25994
|
scrollToHashSectionWhenReady();
|
|
26454
25995
|
const onHashChange = () => scrollToHashSectionWhenReady();
|
|
26455
25996
|
window.addEventListener("hashchange", onHashChange);
|
|
26456
25997
|
return () => window.removeEventListener("hashchange", onHashChange);
|
|
26457
25998
|
}, [pathname]);
|
|
26458
|
-
const handleCommand = (0,
|
|
25999
|
+
const handleCommand = (0, import_react18.useCallback)((cmd) => {
|
|
26459
26000
|
const el = activeElRef.current;
|
|
26460
26001
|
const selBefore = window.getSelection();
|
|
26461
26002
|
let savedOffsets = null;
|
|
@@ -26491,7 +26032,7 @@ function OhhwellsBridge() {
|
|
|
26491
26032
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
26492
26033
|
refreshActiveCommandsRef.current();
|
|
26493
26034
|
}, []);
|
|
26494
|
-
(0,
|
|
26035
|
+
(0, import_react18.useEffect)(() => {
|
|
26495
26036
|
const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
|
|
26496
26037
|
if (!session || !logoSizeDraft) return;
|
|
26497
26038
|
const onPanelAction = (e) => {
|
|
@@ -26529,7 +26070,7 @@ function OhhwellsBridge() {
|
|
|
26529
26070
|
window.addEventListener("message", onPanelAction);
|
|
26530
26071
|
return () => window.removeEventListener("message", onPanelAction);
|
|
26531
26072
|
}, [floatingPanel, logoSizeDraft, editorViewport, persistLogoSizeDraft, closeFloatingPanelAndDeselect]);
|
|
26532
|
-
const handleStateChange = (0,
|
|
26073
|
+
const handleStateChange = (0, import_react18.useCallback)((state) => {
|
|
26533
26074
|
if (!activeStateElRef.current) return;
|
|
26534
26075
|
const el = activeStateElRef.current;
|
|
26535
26076
|
if (state === "Default") {
|
|
@@ -26542,7 +26083,7 @@ function OhhwellsBridge() {
|
|
|
26542
26083
|
}
|
|
26543
26084
|
setToggleState((prev) => prev ? { ...prev, activeState: state } : null);
|
|
26544
26085
|
}, [deactivate]);
|
|
26545
|
-
const reselectAfterLinkPopover = (0,
|
|
26086
|
+
const reselectAfterLinkPopover = (0, import_react18.useCallback)(
|
|
26546
26087
|
(hrefKey) => {
|
|
26547
26088
|
requestAnimationFrame(() => {
|
|
26548
26089
|
const el = resolveHrefKeyElement(hrefKey);
|
|
@@ -26551,7 +26092,7 @@ function OhhwellsBridge() {
|
|
|
26551
26092
|
},
|
|
26552
26093
|
[resolveHrefKeyElement]
|
|
26553
26094
|
);
|
|
26554
|
-
const closeLinkPopover = (0,
|
|
26095
|
+
const closeLinkPopover = (0, import_react18.useCallback)(() => {
|
|
26555
26096
|
const session = linkPopoverSessionRef.current;
|
|
26556
26097
|
addNavAfterAnchorRef.current = null;
|
|
26557
26098
|
setLinkPopover(null);
|
|
@@ -26559,9 +26100,9 @@ function OhhwellsBridge() {
|
|
|
26559
26100
|
reselectAfterLinkPopover(session.key);
|
|
26560
26101
|
}
|
|
26561
26102
|
}, [reselectAfterLinkPopover]);
|
|
26562
|
-
const closeLinkPopoverRef = (0,
|
|
26103
|
+
const closeLinkPopoverRef = (0, import_react18.useRef)(closeLinkPopover);
|
|
26563
26104
|
closeLinkPopoverRef.current = closeLinkPopover;
|
|
26564
|
-
const openLinkPopoverForActive = (0,
|
|
26105
|
+
const openLinkPopoverForActive = (0, import_react18.useCallback)(() => {
|
|
26565
26106
|
const hrefCtx = getHrefKeyFromElement(activeElRef.current);
|
|
26566
26107
|
if (!hrefCtx) return;
|
|
26567
26108
|
bumpLinkPopoverGrace();
|
|
@@ -26572,7 +26113,7 @@ function OhhwellsBridge() {
|
|
|
26572
26113
|
});
|
|
26573
26114
|
deactivate();
|
|
26574
26115
|
}, [deactivate]);
|
|
26575
|
-
const openLinkPopoverForSelected = (0,
|
|
26116
|
+
const openLinkPopoverForSelected = (0, import_react18.useCallback)(() => {
|
|
26576
26117
|
const anchor = selectedElRef.current;
|
|
26577
26118
|
if (!anchor) return;
|
|
26578
26119
|
const key = anchor.getAttribute("data-ohw-href-key");
|
|
@@ -26589,7 +26130,7 @@ function OhhwellsBridge() {
|
|
|
26589
26130
|
});
|
|
26590
26131
|
deselect();
|
|
26591
26132
|
}, [deselect]);
|
|
26592
|
-
const handleSelectParent = (0,
|
|
26133
|
+
const handleSelectParent = (0, import_react18.useCallback)(() => {
|
|
26593
26134
|
const selected = selectedElRef.current;
|
|
26594
26135
|
if (!selected) return;
|
|
26595
26136
|
if (toolbarVariantRef.current === "select-frame") {
|
|
@@ -26616,7 +26157,7 @@ function OhhwellsBridge() {
|
|
|
26616
26157
|
}
|
|
26617
26158
|
deselectRef.current();
|
|
26618
26159
|
}, []);
|
|
26619
|
-
const handleDuplicateSelected = (0,
|
|
26160
|
+
const handleDuplicateSelected = (0, import_react18.useCallback)(() => {
|
|
26620
26161
|
const selected = selectedElRef.current;
|
|
26621
26162
|
if (!selected || !isNavigationItem2(selected)) return;
|
|
26622
26163
|
if (isCtaButton(selected)) {
|
|
@@ -26779,7 +26320,7 @@ function OhhwellsBridge() {
|
|
|
26779
26320
|
});
|
|
26780
26321
|
}
|
|
26781
26322
|
}, [postToParent2, tokensForButton]);
|
|
26782
|
-
const runPendingDeleteUndo = (0,
|
|
26323
|
+
const runPendingDeleteUndo = (0, import_react18.useCallback)(() => {
|
|
26783
26324
|
const pending = pendingDeleteUndoRef.current;
|
|
26784
26325
|
if (!pending) return false;
|
|
26785
26326
|
pendingDeleteUndoRef.current = null;
|
|
@@ -26787,7 +26328,7 @@ function OhhwellsBridge() {
|
|
|
26787
26328
|
enforceLinkHrefs();
|
|
26788
26329
|
return true;
|
|
26789
26330
|
}, []);
|
|
26790
|
-
const handleDeleteSelected = (0,
|
|
26331
|
+
const handleDeleteSelected = (0, import_react18.useCallback)(() => {
|
|
26791
26332
|
const selected = selectedElRef.current;
|
|
26792
26333
|
if (!selected) return false;
|
|
26793
26334
|
if (isCtaButton(selected)) {
|
|
@@ -26840,7 +26381,7 @@ function OhhwellsBridge() {
|
|
|
26840
26381
|
}, [postToParent2]);
|
|
26841
26382
|
handleDeleteSelectedRef.current = handleDeleteSelected;
|
|
26842
26383
|
runPendingDeleteUndoRef.current = runPendingDeleteUndo;
|
|
26843
|
-
const handleLinkPopoverSubmit = (0,
|
|
26384
|
+
const handleLinkPopoverSubmit = (0, import_react18.useCallback)(
|
|
26844
26385
|
(target) => {
|
|
26845
26386
|
const session = linkPopoverSessionRef.current;
|
|
26846
26387
|
if (!session) return;
|
|
@@ -26906,14 +26447,14 @@ function OhhwellsBridge() {
|
|
|
26906
26447
|
const showEditLink = toolbarShowEditLink;
|
|
26907
26448
|
const currentSections = sectionsByPath[pathname] ?? [];
|
|
26908
26449
|
linkPopoverOpenRef.current = linkPopover !== null;
|
|
26909
|
-
const handleMediaSelect = (0,
|
|
26450
|
+
const handleMediaSelect = (0, import_react18.useCallback)((key) => {
|
|
26910
26451
|
const el = hoveredImageRef.current?.dataset.ohwKey === key ? hoveredImageRef.current : Array.from(document.querySelectorAll(MEDIA_SELECTOR)).find(
|
|
26911
26452
|
(m) => (m.dataset.ohwKey ?? "") === key
|
|
26912
26453
|
) ?? null;
|
|
26913
26454
|
if (!el) return;
|
|
26914
26455
|
selectMediaElementRef.current(el);
|
|
26915
26456
|
}, []);
|
|
26916
|
-
const handleMediaReplace = (0,
|
|
26457
|
+
const handleMediaReplace = (0, import_react18.useCallback)(
|
|
26917
26458
|
(key) => {
|
|
26918
26459
|
postToParent2({
|
|
26919
26460
|
type: "ow:image-pick",
|
|
@@ -26923,13 +26464,13 @@ function OhhwellsBridge() {
|
|
|
26923
26464
|
},
|
|
26924
26465
|
[postToParent2, mediaHover?.elementType, selectedMedia?.elementType]
|
|
26925
26466
|
);
|
|
26926
|
-
const handleEditCarousel = (0,
|
|
26467
|
+
const handleEditCarousel = (0, import_react18.useCallback)(
|
|
26927
26468
|
(key) => {
|
|
26928
26469
|
postToParent2({ type: "ow:carousel-open", key, images: readCarouselValue(key) });
|
|
26929
26470
|
},
|
|
26930
26471
|
[postToParent2]
|
|
26931
26472
|
);
|
|
26932
|
-
const handleMediaFadeOutComplete = (0,
|
|
26473
|
+
const handleMediaFadeOutComplete = (0, import_react18.useCallback)((key) => {
|
|
26933
26474
|
setUploadingRects((prev) => {
|
|
26934
26475
|
if (!(key in prev)) return prev;
|
|
26935
26476
|
const next = { ...prev };
|
|
@@ -26937,7 +26478,7 @@ function OhhwellsBridge() {
|
|
|
26937
26478
|
return next;
|
|
26938
26479
|
});
|
|
26939
26480
|
}, []);
|
|
26940
|
-
const handleVideoSettingsChange = (0,
|
|
26481
|
+
const handleVideoSettingsChange = (0, import_react18.useCallback)(
|
|
26941
26482
|
(key, settings) => {
|
|
26942
26483
|
document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
|
|
26943
26484
|
const video = getVideoEl2(el);
|
|
@@ -26959,14 +26500,14 @@ function OhhwellsBridge() {
|
|
|
26959
26500
|
},
|
|
26960
26501
|
[postToParent2]
|
|
26961
26502
|
);
|
|
26962
|
-
return /* @__PURE__ */ (0,
|
|
26963
|
-
/* @__PURE__ */ (0,
|
|
26964
|
-
/* @__PURE__ */ (0,
|
|
26965
|
-
subdomain && !isEditMode && showBranding && /* @__PURE__ */ (0,
|
|
26503
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
|
|
26504
|
+
/* @__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, {}) }),
|
|
26505
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("script", { suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: OHW_LOADER_PREHYDRATE_SCRIPT } }),
|
|
26506
|
+
subdomain && !isEditMode && showBranding && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(MadeWithOhhWells, {}),
|
|
26966
26507
|
bridgeRoot ? (0, import_react_dom5.createPortal)(
|
|
26967
|
-
/* @__PURE__ */ (0,
|
|
26968
|
-
/* @__PURE__ */ (0,
|
|
26969
|
-
isEditMode && /* @__PURE__ */ (0,
|
|
26508
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
|
|
26509
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
|
|
26510
|
+
isEditMode && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
26970
26511
|
AiSectionOverlay,
|
|
26971
26512
|
{
|
|
26972
26513
|
postToParent: postToParent2,
|
|
@@ -26974,15 +26515,7 @@ function OhhwellsBridge() {
|
|
|
26974
26515
|
onSelectionChange: handleAiSectionSelectionChange
|
|
26975
26516
|
}
|
|
26976
26517
|
),
|
|
26977
|
-
isEditMode && /* @__PURE__ */ (0,
|
|
26978
|
-
AiPricingCardOverlay,
|
|
26979
|
-
{
|
|
26980
|
-
postToParent: postToParent2,
|
|
26981
|
-
aiSectionsRef,
|
|
26982
|
-
applyTreeLocalRef
|
|
26983
|
-
}
|
|
26984
|
-
),
|
|
26985
|
-
isEditMode && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
26518
|
+
isEditMode && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
26986
26519
|
AiMediaStripOverlay,
|
|
26987
26520
|
{
|
|
26988
26521
|
postToParent: postToParent2,
|
|
@@ -26990,12 +26523,12 @@ function OhhwellsBridge() {
|
|
|
26990
26523
|
applyTreeLocalRef
|
|
26991
26524
|
}
|
|
26992
26525
|
),
|
|
26993
|
-
isSectionDragging && sectionDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
26526
|
+
isSectionDragging && sectionDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
26994
26527
|
"div",
|
|
26995
26528
|
{
|
|
26996
26529
|
className: "pointer-events-none fixed z-2147483646",
|
|
26997
26530
|
style: { left: slot.left, top: slot.y, width: slot.width, height: 3, transform: "translateY(-50%)" },
|
|
26998
|
-
children: /* @__PURE__ */ (0,
|
|
26531
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
26999
26532
|
DropIndicator,
|
|
27000
26533
|
{
|
|
27001
26534
|
direction: "horizontal",
|
|
@@ -27006,7 +26539,7 @@ function OhhwellsBridge() {
|
|
|
27006
26539
|
},
|
|
27007
26540
|
`section-drop-${slot.insertIndex}-${i}`
|
|
27008
26541
|
)),
|
|
27009
|
-
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0,
|
|
26542
|
+
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27010
26543
|
MediaOverlay,
|
|
27011
26544
|
{
|
|
27012
26545
|
hover: { key, rect, elementType: "image", isDragOver: false, hasTextOverlap: false },
|
|
@@ -27017,7 +26550,7 @@ function OhhwellsBridge() {
|
|
|
27017
26550
|
},
|
|
27018
26551
|
`uploading-${key}`
|
|
27019
26552
|
)),
|
|
27020
|
-
mediaHover && !(mediaHover.key in uploadingRects) && mediaHover.key !== selectedMedia?.key && /* @__PURE__ */ (0,
|
|
26553
|
+
mediaHover && !(mediaHover.key in uploadingRects) && mediaHover.key !== selectedMedia?.key && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27021
26554
|
MediaOverlay,
|
|
27022
26555
|
{
|
|
27023
26556
|
hover: mediaHover,
|
|
@@ -27028,7 +26561,7 @@ function OhhwellsBridge() {
|
|
|
27028
26561
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
27029
26562
|
}
|
|
27030
26563
|
),
|
|
27031
|
-
selectedMedia && !(selectedMedia.key in uploadingRects) && !linkPopover && /* @__PURE__ */ (0,
|
|
26564
|
+
selectedMedia && !(selectedMedia.key in uploadingRects) && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27032
26565
|
MediaOverlay,
|
|
27033
26566
|
{
|
|
27034
26567
|
hover: selectedMedia,
|
|
@@ -27040,7 +26573,7 @@ function OhhwellsBridge() {
|
|
|
27040
26573
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
27041
26574
|
}
|
|
27042
26575
|
),
|
|
27043
|
-
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0,
|
|
26576
|
+
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27044
26577
|
CarouselOverlay,
|
|
27045
26578
|
{
|
|
27046
26579
|
hover: carouselHover,
|
|
@@ -27048,10 +26581,10 @@ function OhhwellsBridge() {
|
|
|
27048
26581
|
cueOnly: !!carouselHover.fullBleedSectionId && carouselHover.fullBleedSectionId !== selectedAiSectionId
|
|
27049
26582
|
}
|
|
27050
26583
|
),
|
|
27051
|
-
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0,
|
|
27052
|
-
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0,
|
|
27053
|
-
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && selectedElRef.current !== buttonCollectionDragRef.current && /* @__PURE__ */ (0,
|
|
27054
|
-
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
26584
|
+
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
|
|
26585
|
+
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemInteractionLayer, { rect, state: "sibling-hint" }, `sibling-hint-${i}`)),
|
|
26586
|
+
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && selectedElRef.current !== buttonCollectionDragRef.current && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemInteractionLayer, { rect: draggedItemRect, state: "dragging" }),
|
|
26587
|
+
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27055
26588
|
"div",
|
|
27056
26589
|
{
|
|
27057
26590
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -27061,7 +26594,7 @@ function OhhwellsBridge() {
|
|
|
27061
26594
|
width: slot.width,
|
|
27062
26595
|
height: slot.height
|
|
27063
26596
|
},
|
|
27064
|
-
children: /* @__PURE__ */ (0,
|
|
26597
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27065
26598
|
DropIndicator,
|
|
27066
26599
|
{
|
|
27067
26600
|
direction: slot.direction,
|
|
@@ -27072,7 +26605,7 @@ function OhhwellsBridge() {
|
|
|
27072
26605
|
},
|
|
27073
26606
|
`footer-drop-${slot.direction}-${slot.columnIndex}-${slot.insertIndex}-${i}`
|
|
27074
26607
|
)),
|
|
27075
|
-
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
26608
|
+
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27076
26609
|
"div",
|
|
27077
26610
|
{
|
|
27078
26611
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -27082,7 +26615,7 @@ function OhhwellsBridge() {
|
|
|
27082
26615
|
width: slot.width,
|
|
27083
26616
|
height: slot.height
|
|
27084
26617
|
},
|
|
27085
|
-
children: /* @__PURE__ */ (0,
|
|
26618
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27086
26619
|
DropIndicator,
|
|
27087
26620
|
{
|
|
27088
26621
|
direction: slot.direction,
|
|
@@ -27093,7 +26626,7 @@ function OhhwellsBridge() {
|
|
|
27093
26626
|
},
|
|
27094
26627
|
`nav-drop-${slot.direction}-${slot.parentId ?? "root"}-${slot.insertIndex}-${i}`
|
|
27095
26628
|
)),
|
|
27096
|
-
isItemDragging && buttonDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
26629
|
+
isItemDragging && buttonDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27097
26630
|
"div",
|
|
27098
26631
|
{
|
|
27099
26632
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -27103,7 +26636,7 @@ function OhhwellsBridge() {
|
|
|
27103
26636
|
width: slot.width,
|
|
27104
26637
|
height: slot.height
|
|
27105
26638
|
},
|
|
27106
|
-
children: /* @__PURE__ */ (0,
|
|
26639
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27107
26640
|
DropIndicator,
|
|
27108
26641
|
{
|
|
27109
26642
|
direction: slot.direction,
|
|
@@ -27114,10 +26647,10 @@ function OhhwellsBridge() {
|
|
|
27114
26647
|
},
|
|
27115
26648
|
`button-drop-${slot.direction}-${slot.insertIndex}-${i}`
|
|
27116
26649
|
)),
|
|
27117
|
-
hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ (0,
|
|
27118
|
-
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0,
|
|
27119
|
-
hoveredTextRect && !hoveredNavContainerRect && !hoveredItemRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0,
|
|
27120
|
-
formPickRect && !isItemDragging && /* @__PURE__ */ (0,
|
|
26650
|
+
hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
|
|
26651
|
+
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
|
|
26652
|
+
hoveredTextRect && !hoveredNavContainerRect && !hoveredItemRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemInteractionLayer, { rect: hoveredTextRect, state: "hover" }),
|
|
26653
|
+
formPickRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27121
26654
|
ItemInteractionLayer,
|
|
27122
26655
|
{
|
|
27123
26656
|
rect: formPickRect,
|
|
@@ -27125,13 +26658,13 @@ function OhhwellsBridge() {
|
|
|
27125
26658
|
itemDragSurface: false,
|
|
27126
26659
|
toolbarAlign: "left",
|
|
27127
26660
|
chromeGap: 24,
|
|
27128
|
-
toolbar: fieldPickRect ? void 0 : /* @__PURE__ */ (0,
|
|
26661
|
+
toolbar: fieldPickRect ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
27129
26662
|
"div",
|
|
27130
26663
|
{
|
|
27131
26664
|
"data-ohw-form-toolbar": "",
|
|
27132
26665
|
className: "pointer-events-auto flex items-center gap-0.5 whitespace-nowrap rounded-lg border border-border bg-background p-1 shadow-md",
|
|
27133
26666
|
children: [
|
|
27134
|
-
/* @__PURE__ */ (0,
|
|
26667
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27135
26668
|
"button",
|
|
27136
26669
|
{
|
|
27137
26670
|
type: "button",
|
|
@@ -27139,11 +26672,11 @@ function OhhwellsBridge() {
|
|
|
27139
26672
|
className: "flex h-7 w-7 items-center justify-center rounded-md text-foreground transition-colors hover:bg-muted/80",
|
|
27140
26673
|
onClick: () => setFieldTypePickerOpen((open) => !open),
|
|
27141
26674
|
"data-ohw-add-field": "",
|
|
27142
|
-
children: /* @__PURE__ */ (0,
|
|
26675
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react19.Plus, { size: 15, "aria-hidden": true })
|
|
27143
26676
|
}
|
|
27144
26677
|
),
|
|
27145
|
-
/* @__PURE__ */ (0,
|
|
27146
|
-
/* @__PURE__ */ (0,
|
|
26678
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border" }),
|
|
26679
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
27147
26680
|
"button",
|
|
27148
26681
|
{
|
|
27149
26682
|
type: "button",
|
|
@@ -27159,11 +26692,11 @@ function OhhwellsBridge() {
|
|
|
27159
26692
|
});
|
|
27160
26693
|
},
|
|
27161
26694
|
children: [
|
|
27162
|
-
/* @__PURE__ */ (0,
|
|
26695
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react19.Settings, { size: 14, "aria-hidden": true }),
|
|
27163
26696
|
"Form settings",
|
|
27164
26697
|
formPickCount ? (
|
|
27165
26698
|
// Counter pill, per the design — not a text suffix.
|
|
27166
|
-
/* @__PURE__ */ (0,
|
|
26699
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27167
26700
|
"span",
|
|
27168
26701
|
{
|
|
27169
26702
|
"data-ohw-form-count": "",
|
|
@@ -27175,8 +26708,8 @@ function OhhwellsBridge() {
|
|
|
27175
26708
|
]
|
|
27176
26709
|
}
|
|
27177
26710
|
),
|
|
27178
|
-
/* @__PURE__ */ (0,
|
|
27179
|
-
/* @__PURE__ */ (0,
|
|
26711
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border" }),
|
|
26712
|
+
/* @__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)(
|
|
27180
26713
|
"button",
|
|
27181
26714
|
{
|
|
27182
26715
|
type: "button",
|
|
@@ -27207,7 +26740,7 @@ function OhhwellsBridge() {
|
|
|
27207
26740
|
)
|
|
27208
26741
|
}
|
|
27209
26742
|
),
|
|
27210
|
-
formHoverRect && !isItemDragging && /* @__PURE__ */ (0,
|
|
26743
|
+
formHoverRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27211
26744
|
ItemInteractionLayer,
|
|
27212
26745
|
{
|
|
27213
26746
|
rect: formHoverRect,
|
|
@@ -27215,7 +26748,7 @@ function OhhwellsBridge() {
|
|
|
27215
26748
|
chromeGap: formHoverElRef.current && getFieldWrapper(formHoverElRef.current) ? 8 : 24
|
|
27216
26749
|
}
|
|
27217
26750
|
),
|
|
27218
|
-
fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0,
|
|
26751
|
+
fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27219
26752
|
ItemInteractionLayer,
|
|
27220
26753
|
{
|
|
27221
26754
|
rect: fieldPickRect,
|
|
@@ -27227,7 +26760,7 @@ function OhhwellsBridge() {
|
|
|
27227
26760
|
dragHandleLabel: "Reorder field",
|
|
27228
26761
|
onDragHandleDragStart: handleFieldDragStart,
|
|
27229
26762
|
onDragHandleDragEnd: handleFieldDragEnd,
|
|
27230
|
-
toolbar: /* @__PURE__ */ (0,
|
|
26763
|
+
toolbar: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27231
26764
|
FormFieldToolbar,
|
|
27232
26765
|
{
|
|
27233
26766
|
type: fieldPickState.type,
|
|
@@ -27240,12 +26773,12 @@ function OhhwellsBridge() {
|
|
|
27240
26773
|
)
|
|
27241
26774
|
}
|
|
27242
26775
|
),
|
|
27243
|
-
fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */ (0,
|
|
26776
|
+
fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27244
26777
|
"div",
|
|
27245
26778
|
{
|
|
27246
26779
|
className: "pointer-events-none fixed z-[2147483644]",
|
|
27247
26780
|
style: { top: slot.top, left: slot.left, width: slot.width },
|
|
27248
|
-
children: /* @__PURE__ */ (0,
|
|
26781
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27249
26782
|
DropIndicator,
|
|
27250
26783
|
{
|
|
27251
26784
|
direction: "horizontal",
|
|
@@ -27258,7 +26791,7 @@ function OhhwellsBridge() {
|
|
|
27258
26791
|
)) : null,
|
|
27259
26792
|
fieldTypePickerOpen && formPickRect ? (() => {
|
|
27260
26793
|
const toolbar = document.querySelector("[data-ohw-form-toolbar]")?.getBoundingClientRect();
|
|
27261
|
-
return /* @__PURE__ */ (0,
|
|
26794
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27262
26795
|
"div",
|
|
27263
26796
|
{
|
|
27264
26797
|
className: "pointer-events-none fixed z-[2147483645]",
|
|
@@ -27266,12 +26799,12 @@ function OhhwellsBridge() {
|
|
|
27266
26799
|
top: toolbar ? toolbar.bottom + 6 : formPickRect.top + 16,
|
|
27267
26800
|
left: toolbar ? toolbar.left : formPickRect.left + 24
|
|
27268
26801
|
},
|
|
27269
|
-
children: /* @__PURE__ */ (0,
|
|
26802
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(FieldTypePicker, { onPick: handleAddField })
|
|
27270
26803
|
}
|
|
27271
26804
|
);
|
|
27272
26805
|
})() : null,
|
|
27273
|
-
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ (0,
|
|
27274
|
-
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0,
|
|
26806
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(NavbarContainerChrome, { rect: toolbarRect, onAdd: handleAddTopLevelNavItem }),
|
|
26807
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27275
26808
|
FooterContainerChrome,
|
|
27276
26809
|
{
|
|
27277
26810
|
rect: toolbarRect,
|
|
@@ -27279,7 +26812,7 @@ function OhhwellsBridge() {
|
|
|
27279
26812
|
addDisabled: !canAddFooterColumn()
|
|
27280
26813
|
}
|
|
27281
26814
|
),
|
|
27282
|
-
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */ (0,
|
|
26815
|
+
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27283
26816
|
ItemInteractionLayer,
|
|
27284
26817
|
{
|
|
27285
26818
|
rect: isItemDragging && draggedItemRect && (footerDragRef.current?.wasSelected || navDragRef.current?.wasSelected || selectedElRef.current === buttonCollectionDragRef.current) ? draggedItemRect : toolbarRect,
|
|
@@ -27295,7 +26828,7 @@ function OhhwellsBridge() {
|
|
|
27295
26828
|
onItemPointerDown: toolbarVariant === "logo" ? void 0 : handleItemChromePointerDown,
|
|
27296
26829
|
onItemClick: toolbarVariant === "logo" ? void 0 : handleItemChromeClick,
|
|
27297
26830
|
itemDragSurface: toolbarVariant !== "logo" && !isFooterFrameSelection && !selectedIsSocialsRow,
|
|
27298
|
-
toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */ (0,
|
|
26831
|
+
toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27299
26832
|
ItemActionToolbar,
|
|
27300
26833
|
{
|
|
27301
26834
|
onEditLink: openLinkPopoverForSelected,
|
|
@@ -27346,8 +26879,8 @@ function OhhwellsBridge() {
|
|
|
27346
26879
|
) : void 0
|
|
27347
26880
|
}
|
|
27348
26881
|
),
|
|
27349
|
-
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && !isRectOutsideClip(toolbarRect, getIframeVisibleClip(parentScrollRef.current)) && /* @__PURE__ */ (0,
|
|
27350
|
-
/* @__PURE__ */ (0,
|
|
26882
|
+
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && !isRectOutsideClip(toolbarRect, getIframeVisibleClip(parentScrollRef.current)) && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
|
|
26883
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27351
26884
|
EditGlowChrome,
|
|
27352
26885
|
{
|
|
27353
26886
|
rect: toolbarRect,
|
|
@@ -27357,7 +26890,7 @@ function OhhwellsBridge() {
|
|
|
27357
26890
|
hideHandle: isItemDragging
|
|
27358
26891
|
}
|
|
27359
26892
|
),
|
|
27360
|
-
/* @__PURE__ */ (0,
|
|
26893
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27361
26894
|
FloatingToolbar,
|
|
27362
26895
|
{
|
|
27363
26896
|
rect: toolbarRect,
|
|
@@ -27370,7 +26903,7 @@ function OhhwellsBridge() {
|
|
|
27370
26903
|
}
|
|
27371
26904
|
)
|
|
27372
26905
|
] }),
|
|
27373
|
-
maxBadge && /* @__PURE__ */ (0,
|
|
26906
|
+
maxBadge && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
27374
26907
|
"div",
|
|
27375
26908
|
{
|
|
27376
26909
|
"data-ohw-max-badge": "",
|
|
@@ -27396,7 +26929,7 @@ function OhhwellsBridge() {
|
|
|
27396
26929
|
]
|
|
27397
26930
|
}
|
|
27398
26931
|
),
|
|
27399
|
-
toggleState && !linkPopover && /* @__PURE__ */ (0,
|
|
26932
|
+
toggleState && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27400
26933
|
StateToggle,
|
|
27401
26934
|
{
|
|
27402
26935
|
rect: toggleState.rect,
|
|
@@ -27405,15 +26938,15 @@ function OhhwellsBridge() {
|
|
|
27405
26938
|
onStateChange: handleStateChange
|
|
27406
26939
|
}
|
|
27407
26940
|
),
|
|
27408
|
-
sectionGap && !linkPopover && /* @__PURE__ */ (0,
|
|
26941
|
+
sectionGap && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
27409
26942
|
"div",
|
|
27410
26943
|
{
|
|
27411
26944
|
"data-ohw-section-insert-line": "",
|
|
27412
26945
|
className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
|
|
27413
26946
|
style: { top: sectionGap.y, transform: "translateY(-50%)" },
|
|
27414
26947
|
children: [
|
|
27415
|
-
/* @__PURE__ */ (0,
|
|
27416
|
-
/* @__PURE__ */ (0,
|
|
26948
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } }),
|
|
26949
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27417
26950
|
Badge,
|
|
27418
26951
|
{
|
|
27419
26952
|
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",
|
|
@@ -27430,11 +26963,11 @@ function OhhwellsBridge() {
|
|
|
27430
26963
|
children: "Add Section"
|
|
27431
26964
|
}
|
|
27432
26965
|
),
|
|
27433
|
-
/* @__PURE__ */ (0,
|
|
26966
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } })
|
|
27434
26967
|
]
|
|
27435
26968
|
}
|
|
27436
26969
|
),
|
|
27437
|
-
linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0,
|
|
26970
|
+
linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27438
26971
|
LinkPopover,
|
|
27439
26972
|
{
|
|
27440
26973
|
panelRef: linkPopoverPanelRef,
|
|
@@ -27451,7 +26984,7 @@ function OhhwellsBridge() {
|
|
|
27451
26984
|
},
|
|
27452
26985
|
linkPopover.key
|
|
27453
26986
|
) : null,
|
|
27454
|
-
floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */ (0,
|
|
26987
|
+
floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27455
26988
|
FloatingPanel,
|
|
27456
26989
|
{
|
|
27457
26990
|
open: true,
|
|
@@ -27461,7 +26994,7 @@ function OhhwellsBridge() {
|
|
|
27461
26994
|
onPositionChange: setFloatingPanelPos,
|
|
27462
26995
|
parentScroll: parentScrollSnap ?? parentScrollRef.current,
|
|
27463
26996
|
onClose: closeFloatingPanelOnly,
|
|
27464
|
-
children: /* @__PURE__ */ (0,
|
|
26997
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27465
26998
|
SocialsDisplayPanel,
|
|
27466
26999
|
{
|
|
27467
27000
|
display: socialsDisplayFor(floatingPanel.row, editContentRef.current),
|
|
@@ -27482,19 +27015,19 @@ function OhhwellsBridge() {
|
|
|
27482
27015
|
const tokens = tokensFromButton(button);
|
|
27483
27016
|
const current = assignmentFor(button, editContentRef.current, tokens);
|
|
27484
27017
|
void buttonStyleTick;
|
|
27485
|
-
return /* @__PURE__ */ (0,
|
|
27018
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27486
27019
|
FloatingPanel,
|
|
27487
27020
|
{
|
|
27488
27021
|
open: true,
|
|
27489
27022
|
title: floatingPanel.title,
|
|
27490
27023
|
context: floatingPanel.context,
|
|
27491
|
-
icon: /* @__PURE__ */ (0,
|
|
27024
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react19.Brush, { className: "size-4 shrink-0", "aria-hidden": true }),
|
|
27492
27025
|
position: floatingPanelPos,
|
|
27493
27026
|
onPositionChange: setFloatingPanelPos,
|
|
27494
27027
|
parentScroll: parentScrollSnap ?? parentScrollRef.current,
|
|
27495
27028
|
onClose: closeFloatingPanelOnly,
|
|
27496
27029
|
bodyClassName: "gap-5",
|
|
27497
|
-
children: /* @__PURE__ */ (0,
|
|
27030
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
27498
27031
|
ButtonStylePanel,
|
|
27499
27032
|
{
|
|
27500
27033
|
variants: tokens.variants,
|
|
@@ -27522,10 +27055,10 @@ function OhhwellsBridge() {
|
|
|
27522
27055
|
|
|
27523
27056
|
// src/ui/EmptySection.tsx
|
|
27524
27057
|
var import_link = __toESM(require("next/link"), 1);
|
|
27525
|
-
var
|
|
27058
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
27526
27059
|
function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey }) {
|
|
27527
|
-
return /* @__PURE__ */ (0,
|
|
27528
|
-
/* @__PURE__ */ (0,
|
|
27060
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
|
|
27061
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
27529
27062
|
"p",
|
|
27530
27063
|
{
|
|
27531
27064
|
style: {
|
|
@@ -27537,10 +27070,10 @@ function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey
|
|
|
27537
27070
|
color: "var(--brand-accent)",
|
|
27538
27071
|
marginBottom: "1.5rem"
|
|
27539
27072
|
},
|
|
27540
|
-
children: /* @__PURE__ */ (0,
|
|
27073
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_link.default, { href: homeHref, style: { color: "inherit" }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { ...eyebrowKey ? { "data-ohw-editable": "text", "data-ohw-key": eyebrowKey } : {}, children: "Home" }) })
|
|
27541
27074
|
}
|
|
27542
27075
|
),
|
|
27543
|
-
/* @__PURE__ */ (0,
|
|
27076
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
27544
27077
|
"h1",
|
|
27545
27078
|
{
|
|
27546
27079
|
style: {
|
|
@@ -27555,7 +27088,7 @@ function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey
|
|
|
27555
27088
|
children: title
|
|
27556
27089
|
}
|
|
27557
27090
|
),
|
|
27558
|
-
/* @__PURE__ */ (0,
|
|
27091
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
27559
27092
|
"p",
|
|
27560
27093
|
{
|
|
27561
27094
|
style: {
|