@ohhwells/bridge 0.1.65-next.187 → 0.1.65
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 +296 -1055
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +3 -17
- package/dist/index.d.ts +3 -17
- package/dist/index.js +294 -1052
- package/dist/index.js.map +1 -1
- package/dist/styles.css +0 -61
- package/package.json +1 -6
- package/dist/pages.cjs +0 -141
- package/dist/pages.cjs.map +0 -1
- package/dist/pages.d.cts +0 -45
- package/dist/pages.d.ts +0 -45
- package/dist/pages.js +0 -107
- package/dist/pages.js.map +0 -1
package/dist/index.js
CHANGED
|
@@ -83,12 +83,7 @@ function parseAiSectionsState(raw) {
|
|
|
83
83
|
media: entry.media && typeof entry.media === "object" ? entry.media : {}
|
|
84
84
|
}));
|
|
85
85
|
const removed = Array.isArray(parsed.removed) ? parsed.removed.filter((id) => typeof id === "string" && id.length > 0) : [];
|
|
86
|
-
return {
|
|
87
|
-
v: 1,
|
|
88
|
-
sections,
|
|
89
|
-
...removed.length ? { removed } : {},
|
|
90
|
-
...parsed.hideTemplate === true ? { hideTemplate: true } : {}
|
|
91
|
-
};
|
|
86
|
+
return { v: 1, sections, ...removed.length ? { removed } : {} };
|
|
92
87
|
} catch {
|
|
93
88
|
return EMPTY_AI_SECTIONS;
|
|
94
89
|
}
|
|
@@ -101,7 +96,6 @@ function applyTreeToState(state, payload) {
|
|
|
101
96
|
const entry = {
|
|
102
97
|
id: payload.id,
|
|
103
98
|
label: payload.label ?? "Generated section",
|
|
104
|
-
...typeof payload.path === "string" && payload.path ? { path: payload.path } : {},
|
|
105
99
|
afterSection: payload.mode === "insert" && !insertBefore ? payload.targetSectionId ?? null : null,
|
|
106
100
|
...insertBefore && payload.targetSectionId ? { beforeSection: payload.targetSectionId } : {},
|
|
107
101
|
...payload.mode === "replace" && payload.targetSectionId ? { replaces: payload.targetSectionId } : {},
|
|
@@ -124,317 +118,6 @@ function deleteSectionFromState(state, sectionId) {
|
|
|
124
118
|
return { ...state, v: 1, sections: state.sections, removed: [...removed, sectionId] };
|
|
125
119
|
}
|
|
126
120
|
|
|
127
|
-
// src/lib/brand-chrome.ts
|
|
128
|
-
var BRAND_NAME_KEY = "__ohw_brand_name";
|
|
129
|
-
var BRAND_TITLE_KEY = "__ohw_site_title";
|
|
130
|
-
var BRAND_FAVICON_LETTER_KEY = "__ohw_favicon_letter";
|
|
131
|
-
var BRAND_CHROME_KEYS = /* @__PURE__ */ new Set([
|
|
132
|
-
BRAND_NAME_KEY,
|
|
133
|
-
BRAND_TITLE_KEY,
|
|
134
|
-
BRAND_FAVICON_LETTER_KEY
|
|
135
|
-
]);
|
|
136
|
-
function upsertMeta(selector, attr, token, value) {
|
|
137
|
-
let el = document.head.querySelector(selector);
|
|
138
|
-
if (!el) {
|
|
139
|
-
el = document.createElement("meta");
|
|
140
|
-
el.setAttribute(attr, token);
|
|
141
|
-
document.head.appendChild(el);
|
|
142
|
-
}
|
|
143
|
-
if (el.getAttribute("content") !== value) el.setAttribute("content", value);
|
|
144
|
-
}
|
|
145
|
-
function escapeXml(value) {
|
|
146
|
-
return value.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
|
|
147
|
-
}
|
|
148
|
-
function applyLetterFavicon(letter) {
|
|
149
|
-
const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="12" fill="#111827"/><text x="32" y="46" font-family="system-ui,-apple-system,Segoe UI,sans-serif" font-size="40" font-weight="700" text-anchor="middle" fill="#ffffff">${escapeXml(letter)}</text></svg>`;
|
|
150
|
-
const href = `data:image/svg+xml,${encodeURIComponent(svg)}`;
|
|
151
|
-
let link = document.head.querySelector('link[rel="icon"]');
|
|
152
|
-
if (!link) {
|
|
153
|
-
link = document.createElement("link");
|
|
154
|
-
link.rel = "icon";
|
|
155
|
-
document.head.appendChild(link);
|
|
156
|
-
}
|
|
157
|
-
link.type = "image/svg+xml";
|
|
158
|
-
if (link.href !== href) link.href = href;
|
|
159
|
-
}
|
|
160
|
-
function applyBrandChrome(content) {
|
|
161
|
-
const name = content[BRAND_NAME_KEY];
|
|
162
|
-
if (typeof name === "string" && name.length > 0) {
|
|
163
|
-
document.querySelectorAll("[data-ohw-wordmark]").forEach((el) => {
|
|
164
|
-
if (el.textContent !== name) el.textContent = name;
|
|
165
|
-
if (el.getAttribute("title") !== name) el.setAttribute("title", name);
|
|
166
|
-
});
|
|
167
|
-
}
|
|
168
|
-
const title = content[BRAND_TITLE_KEY];
|
|
169
|
-
if (typeof title === "string" && title.length > 0) {
|
|
170
|
-
if (document.title !== title) document.title = title;
|
|
171
|
-
upsertMeta('meta[property="og:title"]', "property", "og:title", title);
|
|
172
|
-
upsertMeta('meta[name="twitter:title"]', "name", "twitter:title", title);
|
|
173
|
-
}
|
|
174
|
-
const letter = content[BRAND_FAVICON_LETTER_KEY];
|
|
175
|
-
if (typeof letter === "string" && letter.length > 0) {
|
|
176
|
-
applyLetterFavicon(letter);
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
// src/lib/brand-kit.ts
|
|
181
|
-
var BRAND_KIT_KEY = "__ohw_brand";
|
|
182
|
-
var BRAND_VAR_PREFIX = "--ohw-brand-";
|
|
183
|
-
var BRAND_VAR_NAMES = ["primary", "accent", "light", "dark", "surface", "border", "muted"].map(
|
|
184
|
-
(role) => `${BRAND_VAR_PREFIX}${role}`
|
|
185
|
-
);
|
|
186
|
-
var FONT_VARS = {
|
|
187
|
-
heading: ["--font-heading", "--font-display", "--brand-font-heading"],
|
|
188
|
-
body: ["--font-body", "--brand-font-body"]
|
|
189
|
-
};
|
|
190
|
-
var BRAND_FONT_LINK_ID = "ohw-brand-fonts";
|
|
191
|
-
function brandColorVars(kit) {
|
|
192
|
-
const { dark, primary, accent, light } = kit.palette;
|
|
193
|
-
const mix = (a, aPct, b) => `color-mix(in srgb, ${a} ${aPct}%, ${b})`;
|
|
194
|
-
return {
|
|
195
|
-
[`${BRAND_VAR_PREFIX}primary`]: primary,
|
|
196
|
-
[`${BRAND_VAR_PREFIX}accent`]: accent,
|
|
197
|
-
[`${BRAND_VAR_PREFIX}light`]: light,
|
|
198
|
-
[`${BRAND_VAR_PREFIX}dark`]: dark,
|
|
199
|
-
[`${BRAND_VAR_PREFIX}surface`]: mix(light, 95, dark),
|
|
200
|
-
[`${BRAND_VAR_PREFIX}border`]: mix(light, 85, dark),
|
|
201
|
-
[`${BRAND_VAR_PREFIX}muted`]: mix(dark, 62, light)
|
|
202
|
-
};
|
|
203
|
-
}
|
|
204
|
-
function parseBrandKit(raw) {
|
|
205
|
-
if (!raw) return null;
|
|
206
|
-
try {
|
|
207
|
-
const parsed = JSON.parse(raw);
|
|
208
|
-
const p = parsed?.palette;
|
|
209
|
-
const f = parsed?.fonts;
|
|
210
|
-
if (!p || !f || typeof p.dark !== "string" || typeof p.primary !== "string" || typeof p.accent !== "string" || typeof p.light !== "string" || typeof f.heading !== "string" || typeof f.body !== "string") {
|
|
211
|
-
return null;
|
|
212
|
-
}
|
|
213
|
-
return {
|
|
214
|
-
palette: { dark: p.dark, primary: p.primary, accent: p.accent, light: p.light },
|
|
215
|
-
fonts: { heading: f.heading, body: f.body }
|
|
216
|
-
};
|
|
217
|
-
} catch {
|
|
218
|
-
return null;
|
|
219
|
-
}
|
|
220
|
-
}
|
|
221
|
-
function familyOf(stack) {
|
|
222
|
-
const first = stack.split(",")[0]?.trim() ?? "";
|
|
223
|
-
return first.replace(/^['"]|['"]$/g, "");
|
|
224
|
-
}
|
|
225
|
-
function loadBrandFonts(families) {
|
|
226
|
-
const unique = [...new Set(families.map((f) => f.trim()).filter(Boolean))];
|
|
227
|
-
if (unique.length === 0) return;
|
|
228
|
-
const spec = unique.map((f) => `${f.replace(/ /g, "+")}:400,500,600,700`).join("|");
|
|
229
|
-
const href = `https://fonts.googleapis.com/css?family=${spec}&display=swap`;
|
|
230
|
-
let link = document.getElementById(BRAND_FONT_LINK_ID);
|
|
231
|
-
if (!link) {
|
|
232
|
-
link = document.createElement("link");
|
|
233
|
-
link.id = BRAND_FONT_LINK_ID;
|
|
234
|
-
link.rel = "stylesheet";
|
|
235
|
-
document.head.appendChild(link);
|
|
236
|
-
}
|
|
237
|
-
if (link.href !== href) link.href = href;
|
|
238
|
-
}
|
|
239
|
-
function applyBrandToDom(kit) {
|
|
240
|
-
const root = document.documentElement;
|
|
241
|
-
if (!kit) {
|
|
242
|
-
for (const name of BRAND_VAR_NAMES) root.style.removeProperty(name);
|
|
243
|
-
for (const name of [...FONT_VARS.heading, ...FONT_VARS.body]) root.style.removeProperty(name);
|
|
244
|
-
document.getElementById(BRAND_FONT_LINK_ID)?.remove();
|
|
245
|
-
return;
|
|
246
|
-
}
|
|
247
|
-
for (const [name, value] of Object.entries(brandColorVars(kit))) root.style.setProperty(name, value);
|
|
248
|
-
for (const name of FONT_VARS.heading) root.style.setProperty(name, kit.fonts.heading);
|
|
249
|
-
for (const name of FONT_VARS.body) root.style.setProperty(name, kit.fonts.body);
|
|
250
|
-
loadBrandFonts([familyOf(kit.fonts.heading), familyOf(kit.fonts.body)]);
|
|
251
|
-
}
|
|
252
|
-
|
|
253
|
-
// src/lib/section-styles.ts
|
|
254
|
-
var STYLE_STORE_KEY = "__ohw_styles";
|
|
255
|
-
var STYLE_SHEET_ID = "ohw-section-styles";
|
|
256
|
-
function parseStyleStore(raw) {
|
|
257
|
-
if (!raw) return null;
|
|
258
|
-
try {
|
|
259
|
-
const parsed = JSON.parse(raw);
|
|
260
|
-
if (parsed?.v !== 1) return null;
|
|
261
|
-
return {
|
|
262
|
-
v: 1,
|
|
263
|
-
sections: typeof parsed.sections === "object" && parsed.sections ? parsed.sections : {},
|
|
264
|
-
nodes: typeof parsed.nodes === "object" && parsed.nodes ? parsed.nodes : {}
|
|
265
|
-
};
|
|
266
|
-
} catch {
|
|
267
|
-
return null;
|
|
268
|
-
}
|
|
269
|
-
}
|
|
270
|
-
var BG_VALUES = {
|
|
271
|
-
surface: "color-mix(in srgb, var(--ohw-brand-light, var(--color-light, #ECECEB)) 94%, var(--ohw-brand-dark, var(--color-dark, #0C0A09)))",
|
|
272
|
-
accent: "var(--ohw-brand-primary, var(--color-primary, #0078E5))",
|
|
273
|
-
"accent-soft": "color-mix(in srgb, var(--ohw-brand-primary, var(--color-primary, #0078E5)) 12%, var(--ohw-brand-light, var(--color-light, #FFFFFF)))"
|
|
274
|
-
};
|
|
275
|
-
var HEADLINE_SIZES = { md: 24, lg: 32, xl: 40, display: 56 };
|
|
276
|
-
function styleSheetCss() {
|
|
277
|
-
const rules = [];
|
|
278
|
-
for (const [tone, value] of Object.entries(BG_VALUES)) {
|
|
279
|
-
rules.push(`[data-ohw-style-bg="${tone}"] { background: ${value} !important; }`);
|
|
280
|
-
}
|
|
281
|
-
rules.push(
|
|
282
|
-
`[data-ohw-style-bg="accent"] { color: var(--ohw-brand-light, var(--color-light, #FFFFFF)) !important; }`
|
|
283
|
-
);
|
|
284
|
-
rules.push(
|
|
285
|
-
`[data-ohw-style-distribution="space-between"] { display: flex !important; flex-direction: column; justify-content: space-between; }`,
|
|
286
|
-
`[data-ohw-style-distribution="center"] { display: flex !important; flex-direction: column; justify-content: center; }`
|
|
287
|
-
);
|
|
288
|
-
for (const [scale, size] of Object.entries(HEADLINE_SIZES)) {
|
|
289
|
-
rules.push(
|
|
290
|
-
`[data-ohw-style-headline="${scale}"] :is(h1, h2, h3) { font-size: ${size}px !important; line-height: 1.15 !important; }`
|
|
291
|
-
);
|
|
292
|
-
}
|
|
293
|
-
rules.push(
|
|
294
|
-
`[data-ohw-style-aspect="fill-height"] img { height: 100% !important; aspect-ratio: auto !important; object-fit: cover; }`
|
|
295
|
-
);
|
|
296
|
-
for (const aspect of ["1:1", "4:5", "3:4", "3:2", "16:9", "2:1", "3:1"]) {
|
|
297
|
-
rules.push(
|
|
298
|
-
`[data-ohw-style-aspect="${aspect.replace(":", "-")}"] img { aspect-ratio: ${aspect.replace(":", " / ")} !important; height: auto !important; object-fit: cover; }`
|
|
299
|
-
);
|
|
300
|
-
}
|
|
301
|
-
const pad = { tight: 40, balanced: 64, airy: 96 };
|
|
302
|
-
for (const [spacing, px] of Object.entries(pad)) {
|
|
303
|
-
rules.push(
|
|
304
|
-
`[data-ohw-style-spacing="${spacing}"] { padding-top: ${px}px !important; padding-bottom: ${px}px !important; }`
|
|
305
|
-
);
|
|
306
|
-
}
|
|
307
|
-
return rules.join("\n");
|
|
308
|
-
}
|
|
309
|
-
var STYLE_FONT_LINK_ID = "ohw-style-fonts";
|
|
310
|
-
function loadStyleFonts(families) {
|
|
311
|
-
const unique = [...new Set(families.map((f) => f.trim()).filter(Boolean))];
|
|
312
|
-
const existing = document.getElementById(STYLE_FONT_LINK_ID);
|
|
313
|
-
if (unique.length === 0) {
|
|
314
|
-
existing?.remove();
|
|
315
|
-
return;
|
|
316
|
-
}
|
|
317
|
-
const spec = unique.map((f) => `${f.replace(/ /g, "+")}:400,500,600,700`).join("|");
|
|
318
|
-
const href = `https://fonts.googleapis.com/css?family=${spec}&display=swap`;
|
|
319
|
-
let link = existing;
|
|
320
|
-
if (!link) {
|
|
321
|
-
link = document.createElement("link");
|
|
322
|
-
link.id = STYLE_FONT_LINK_ID;
|
|
323
|
-
link.rel = "stylesheet";
|
|
324
|
-
document.head.appendChild(link);
|
|
325
|
-
}
|
|
326
|
-
if (link.href !== href) link.href = href;
|
|
327
|
-
}
|
|
328
|
-
var SECTION_ATTRS = {
|
|
329
|
-
sectionBackground: "data-ohw-style-bg",
|
|
330
|
-
textDistribution: "data-ohw-style-distribution",
|
|
331
|
-
headlineScale: "data-ohw-style-headline",
|
|
332
|
-
imageAspect: "data-ohw-style-aspect",
|
|
333
|
-
spacing: "data-ohw-style-spacing"
|
|
334
|
-
};
|
|
335
|
-
var NODE_WROTE_ATTR = "data-ohw-style-node";
|
|
336
|
-
var NODE_PROPS = ["color", "font-family", "font-size", "background"];
|
|
337
|
-
function saveInline(el, prop) {
|
|
338
|
-
const attr = `data-ohw-style-prev-${prop}`;
|
|
339
|
-
if (!el.hasAttribute(attr)) el.setAttribute(attr, el.style.getPropertyValue(prop));
|
|
340
|
-
}
|
|
341
|
-
function restoreInline(el, prop) {
|
|
342
|
-
const attr = `data-ohw-style-prev-${prop}`;
|
|
343
|
-
if (!el.hasAttribute(attr)) return;
|
|
344
|
-
const prev = el.getAttribute(attr) ?? "";
|
|
345
|
-
if (prev) el.style.setProperty(prop, prev);
|
|
346
|
-
else el.style.removeProperty(prop);
|
|
347
|
-
el.removeAttribute(attr);
|
|
348
|
-
}
|
|
349
|
-
function ensureStyleSheet() {
|
|
350
|
-
let el = document.getElementById(STYLE_SHEET_ID);
|
|
351
|
-
if (!el) {
|
|
352
|
-
el = document.createElement("style");
|
|
353
|
-
el.id = STYLE_SHEET_ID;
|
|
354
|
-
document.head.appendChild(el);
|
|
355
|
-
}
|
|
356
|
-
const css = styleSheetCss();
|
|
357
|
-
if (el.textContent !== css) el.textContent = css;
|
|
358
|
-
}
|
|
359
|
-
function clearSectionAttrs(root) {
|
|
360
|
-
for (const attr of Object.values(SECTION_ATTRS)) {
|
|
361
|
-
for (const el of Array.from(root.querySelectorAll(`[${attr}]`))) el.removeAttribute(attr);
|
|
362
|
-
}
|
|
363
|
-
for (const el of Array.from(root.querySelectorAll("[data-ohw-style-bgcolor]"))) {
|
|
364
|
-
restoreInline(el, "background");
|
|
365
|
-
el.removeAttribute("data-ohw-style-bgcolor");
|
|
366
|
-
}
|
|
367
|
-
}
|
|
368
|
-
function clearNodeProps(root) {
|
|
369
|
-
for (const el of Array.from(root.querySelectorAll(`[${NODE_WROTE_ATTR}]`))) {
|
|
370
|
-
const h = el;
|
|
371
|
-
for (const prop of NODE_PROPS) restoreInline(h, prop);
|
|
372
|
-
h.removeAttribute(NODE_WROTE_ATTR);
|
|
373
|
-
}
|
|
374
|
-
}
|
|
375
|
-
function buttonSurfaceOf(el) {
|
|
376
|
-
return el.closest("a, button") ?? el;
|
|
377
|
-
}
|
|
378
|
-
function applyStylesToDom(store) {
|
|
379
|
-
ensureStyleSheet();
|
|
380
|
-
clearSectionAttrs(document);
|
|
381
|
-
clearNodeProps(document);
|
|
382
|
-
loadStyleFonts(
|
|
383
|
-
store ? Object.values(store.nodes).flatMap((n) => n.fontFamily ? [n.fontFamily] : []) : []
|
|
384
|
-
);
|
|
385
|
-
if (!store) return;
|
|
386
|
-
for (const [sectionId, override] of Object.entries(store.sections)) {
|
|
387
|
-
const sections = document.querySelectorAll(
|
|
388
|
-
`[data-ohw-section="${CSS.escape(sectionId)}"]`
|
|
389
|
-
);
|
|
390
|
-
for (const section of Array.from(sections)) {
|
|
391
|
-
for (const [prop, attr] of Object.entries(SECTION_ATTRS)) {
|
|
392
|
-
const value = override[prop];
|
|
393
|
-
if (value === void 0) continue;
|
|
394
|
-
if (prop === "sectionBackground" && override.sectionBackgroundColor !== void 0) continue;
|
|
395
|
-
section.setAttribute(attr, String(value).replace(":", "-"));
|
|
396
|
-
}
|
|
397
|
-
if (override.sectionBackgroundColor !== void 0) {
|
|
398
|
-
saveInline(section, "background");
|
|
399
|
-
section.style.setProperty("background", override.sectionBackgroundColor, "important");
|
|
400
|
-
section.setAttribute("data-ohw-style-bgcolor", "");
|
|
401
|
-
}
|
|
402
|
-
}
|
|
403
|
-
}
|
|
404
|
-
for (const [key, override] of Object.entries(store.nodes)) {
|
|
405
|
-
const nodes = document.querySelectorAll(`[data-ohw-key="${CSS.escape(key)}"]`);
|
|
406
|
-
for (const el of Array.from(nodes)) {
|
|
407
|
-
if (override.color !== void 0) {
|
|
408
|
-
saveInline(el, "color");
|
|
409
|
-
el.style.setProperty("color", override.color, "important");
|
|
410
|
-
el.setAttribute(NODE_WROTE_ATTR, "");
|
|
411
|
-
}
|
|
412
|
-
if (override.fontFamily !== void 0) {
|
|
413
|
-
saveInline(el, "font-family");
|
|
414
|
-
el.style.setProperty("font-family", `'${override.fontFamily}'`, "important");
|
|
415
|
-
el.setAttribute(NODE_WROTE_ATTR, "");
|
|
416
|
-
}
|
|
417
|
-
if (override.fontSize !== void 0) {
|
|
418
|
-
saveInline(el, "font-size");
|
|
419
|
-
el.style.setProperty("font-size", `${override.fontSize}px`, "important");
|
|
420
|
-
el.setAttribute(NODE_WROTE_ATTR, "");
|
|
421
|
-
}
|
|
422
|
-
if (override.buttonBackground !== void 0 || override.buttonText !== void 0) {
|
|
423
|
-
const surface = buttonSurfaceOf(el);
|
|
424
|
-
if (override.buttonBackground !== void 0) {
|
|
425
|
-
saveInline(surface, "background");
|
|
426
|
-
surface.style.setProperty("background", override.buttonBackground, "important");
|
|
427
|
-
}
|
|
428
|
-
if (override.buttonText !== void 0) {
|
|
429
|
-
saveInline(surface, "color");
|
|
430
|
-
surface.style.setProperty("color", override.buttonText, "important");
|
|
431
|
-
}
|
|
432
|
-
surface.setAttribute(NODE_WROTE_ATTR, "");
|
|
433
|
-
}
|
|
434
|
-
}
|
|
435
|
-
}
|
|
436
|
-
}
|
|
437
|
-
|
|
438
121
|
// src/ui/ai-tree/aiSectionsManager.tsx
|
|
439
122
|
import { flushSync } from "react-dom";
|
|
440
123
|
import { createRoot } from "react-dom/client";
|
|
@@ -449,8 +132,7 @@ function lucideByName(name) {
|
|
|
449
132
|
}
|
|
450
133
|
var typeStyle = (spec, font) => ({
|
|
451
134
|
fontFamily: font,
|
|
452
|
-
|
|
453
|
-
fontSize: spec.size >= 24 ? `clamp(${Math.max(18, Math.round(spec.size * 0.6))}px, ${(spec.size / 9).toFixed(2)}vw, ${spec.size}px)` : spec.size,
|
|
135
|
+
fontSize: spec.size,
|
|
454
136
|
lineHeight: spec.line,
|
|
455
137
|
fontWeight: spec.weight
|
|
456
138
|
});
|
|
@@ -465,36 +147,6 @@ var FEATURE_LINE_CSS = [
|
|
|
465
147
|
`background-color:currentColor;-webkit-mask:url("${CHECK_MASK}") no-repeat 0 0/24px 24px;`,
|
|
466
148
|
`mask:url("${CHECK_MASK}") no-repeat 0 0/24px 24px}`
|
|
467
149
|
].join("");
|
|
468
|
-
function hexLuminance(color) {
|
|
469
|
-
const m = /^#([0-9a-f]{6})$/i.exec(color.trim());
|
|
470
|
-
if (!m) return null;
|
|
471
|
-
const [r2, g, b] = [0, 2, 4].map((i) => {
|
|
472
|
-
const c = parseInt(m[1].slice(i, i + 2), 16) / 255;
|
|
473
|
-
return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
|
|
474
|
-
});
|
|
475
|
-
return 0.2126 * r2 + 0.7152 * g + 0.0722 * b;
|
|
476
|
-
}
|
|
477
|
-
function hexContrast(a, b) {
|
|
478
|
-
const la = hexLuminance(a);
|
|
479
|
-
const lb = hexLuminance(b);
|
|
480
|
-
if (la === null || lb === null) return null;
|
|
481
|
-
const [hi, lo] = la > lb ? [la, lb] : [lb, la];
|
|
482
|
-
return (hi + 0.05) / (lo + 0.05);
|
|
483
|
-
}
|
|
484
|
-
function accentBandContext(brand) {
|
|
485
|
-
const p = brand.palette;
|
|
486
|
-
const lightWins = (hexContrast(p.light, p.primary) ?? 99) >= (hexContrast(p.dark, p.primary) ?? 0);
|
|
487
|
-
if (lightWins) {
|
|
488
|
-
return {
|
|
489
|
-
brand: { ...brand, palette: { dark: p.light, primary: p.light, accent: p.light, light: p.primary } },
|
|
490
|
-
buttonLabel: p.primary
|
|
491
|
-
};
|
|
492
|
-
}
|
|
493
|
-
return {
|
|
494
|
-
brand: { ...brand, palette: { dark: p.dark, primary: p.dark, accent: p.dark, light: p.light } },
|
|
495
|
-
buttonLabel: p.light
|
|
496
|
-
};
|
|
497
|
-
}
|
|
498
150
|
function textAttrs(ctx, path) {
|
|
499
151
|
return ctx.keyFor ? { "data-ohw-key": ctx.keyFor(path), "data-ohw-editable": "text" } : {};
|
|
500
152
|
}
|
|
@@ -507,8 +159,6 @@ var AI_RESPONSIVE_CSS = [
|
|
|
507
159
|
" [data-ai-responsive] [data-ai-grid] { grid-template-columns: 1fr !important; }",
|
|
508
160
|
" [data-ai-responsive] [data-ai-columns] > * { grid-column: 1 / -1 !important; }",
|
|
509
161
|
" [data-ai-responsive] [data-ai-section-inner] { padding-left: 20px !important; padding-right: 20px !important; }",
|
|
510
|
-
" [data-ai-responsive] { overflow-x: hidden; }",
|
|
511
|
-
" [data-ai-responsive] img { max-width: 100%; }",
|
|
512
162
|
"}"
|
|
513
163
|
].join("\n");
|
|
514
164
|
var TRANSPARENT_PX = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
|
|
@@ -602,7 +252,7 @@ function ButtonEl({
|
|
|
602
252
|
textDecoration: "none",
|
|
603
253
|
cursor: "pointer",
|
|
604
254
|
...typeStyle(AI_TREE_TOKENS.type.button, ctx.brand.fonts.body),
|
|
605
|
-
...secondary ? { border: `1px solid ${ctx.brand.palette.dark}`, color: ctx.brand.palette.dark } : { background: ctx.brand.palette.primary, color:
|
|
255
|
+
...secondary ? { border: `1px solid ${ctx.brand.palette.dark}`, color: ctx.brand.palette.dark } : { background: ctx.brand.palette.primary, color: AI_TREE_TOKENS.textPrimaryForeground }
|
|
606
256
|
},
|
|
607
257
|
children: /* @__PURE__ */ jsx("span", { ...path ? textAttrs(ctx, `${path}.label`) : {}, children: str(slots.label) })
|
|
608
258
|
}
|
|
@@ -1504,14 +1154,11 @@ function AiTreeRenderer({ tree, brand, resolveMedia, editKeyPrefix }) {
|
|
|
1504
1154
|
return null;
|
|
1505
1155
|
}
|
|
1506
1156
|
const resolvedBrand = brand ?? AI_DEFAULT_BRAND;
|
|
1507
|
-
const band = (tree.settings ?? {}).sectionBackground === "accent" ? accentBandContext(resolvedBrand) : null;
|
|
1508
|
-
const blockBrand = band?.brand ?? resolvedBrand;
|
|
1509
1157
|
const ctx = {
|
|
1510
|
-
brand:
|
|
1158
|
+
brand: resolvedBrand,
|
|
1511
1159
|
resolveMedia: resolveMedia ?? (() => null),
|
|
1512
|
-
cardSurface:
|
|
1513
|
-
keyFor: editKeyPrefix ? (path) => `${editKeyPrefix}.${path}` : null
|
|
1514
|
-
...band ? { buttonLabel: band.buttonLabel } : {}
|
|
1160
|
+
cardSurface: resolvedBrand.palette.light.toUpperCase() === AI_DEFAULT_BRAND.palette.light.toUpperCase() ? "#ECECEB" : `color-mix(in srgb, ${resolvedBrand.palette.light} 90%, ${resolvedBrand.palette.dark})`,
|
|
1161
|
+
keyFor: editKeyPrefix ? (path) => `${editKeyPrefix}.${path}` : null
|
|
1515
1162
|
};
|
|
1516
1163
|
const settings = tree.settings ?? {};
|
|
1517
1164
|
const pad = AI_TREE_TOKENS.sectionPadding[settings.spacing ?? "balanced"];
|
|
@@ -1519,20 +1166,6 @@ function AiTreeRenderer({ tree, brand, resolveMedia, editKeyPrefix }) {
|
|
|
1519
1166
|
const overlayAlpha = { low: 0.25, medium: 0.45, high: 0.65 }[settings.overlayIntensity ?? "medium"];
|
|
1520
1167
|
const backgroundUrl = isOverlay && settings.backgroundMedia ? ctx.resolveMedia(settings.backgroundMedia) : null;
|
|
1521
1168
|
const bgAttrs = ctx.keyFor && isOverlay && settings.backgroundMedia ? { "data-ohw-key": ctx.keyFor("settings.backgroundMedia"), "data-ohw-editable": "bg-image" } : {};
|
|
1522
|
-
const toneBackground = (() => {
|
|
1523
|
-
const { dark, primary, light } = resolvedBrand.palette;
|
|
1524
|
-
switch (settings.sectionBackground) {
|
|
1525
|
-
case "surface":
|
|
1526
|
-
return `color-mix(in srgb, ${light} 94%, ${dark})`;
|
|
1527
|
-
case "accent":
|
|
1528
|
-
return primary;
|
|
1529
|
-
case "accent-soft":
|
|
1530
|
-
return `color-mix(in srgb, ${primary} 12%, ${light})`;
|
|
1531
|
-
default:
|
|
1532
|
-
return void 0;
|
|
1533
|
-
}
|
|
1534
|
-
})();
|
|
1535
|
-
const distributed = !isOverlay && settings.textDistribution;
|
|
1536
1169
|
return /* @__PURE__ */ jsxs(
|
|
1537
1170
|
"section",
|
|
1538
1171
|
{
|
|
@@ -1542,11 +1175,10 @@ function AiTreeRenderer({ tree, brand, resolveMedia, editKeyPrefix }) {
|
|
|
1542
1175
|
style: {
|
|
1543
1176
|
position: "relative",
|
|
1544
1177
|
padding: `${pad}px 0`,
|
|
1545
|
-
background:
|
|
1178
|
+
background: isOverlay && !backgroundUrl ? "#DBEAFE" : void 0,
|
|
1546
1179
|
backgroundImage: backgroundUrl ? `url(${backgroundUrl})` : void 0,
|
|
1547
1180
|
backgroundSize: "cover",
|
|
1548
|
-
backgroundPosition: "center"
|
|
1549
|
-
color: settings.sectionBackground === "accent" ? blockBrand.palette.dark : void 0
|
|
1181
|
+
backgroundPosition: "center"
|
|
1550
1182
|
},
|
|
1551
1183
|
children: [
|
|
1552
1184
|
/* @__PURE__ */ jsx("style", { children: AI_RESPONSIVE_CSS }),
|
|
@@ -1570,24 +1202,10 @@ function AiTreeRenderer({ tree, brand, resolveMedia, editKeyPrefix }) {
|
|
|
1570
1202
|
display: "grid",
|
|
1571
1203
|
gridTemplateColumns: "repeat(12, 1fr)",
|
|
1572
1204
|
gap: AI_TREE_TOKENS.spacing6,
|
|
1573
|
-
alignItems:
|
|
1205
|
+
alignItems: settings.verticalPosition === "top" ? "start" : "center",
|
|
1574
1206
|
marginTop: r2 > 0 ? AI_TREE_TOKENS.spacing8 : 0
|
|
1575
1207
|
},
|
|
1576
|
-
children: (row.blocks ?? []).map((block, b) => /* @__PURE__ */ jsx(
|
|
1577
|
-
"div",
|
|
1578
|
-
{
|
|
1579
|
-
"data-ai-cell": "",
|
|
1580
|
-
style: {
|
|
1581
|
-
gridColumn: `span ${Math.min(12, Math.max(1, block.span))}`,
|
|
1582
|
-
minWidth: 0,
|
|
1583
|
-
// space-between: each column becomes a flex column whose content spreads over
|
|
1584
|
-
// the full row height instead of clumping at the top.
|
|
1585
|
-
...distributed === "space-between" ? { display: "flex", flexDirection: "column", justifyContent: "space-between" } : {}
|
|
1586
|
-
},
|
|
1587
|
-
children: renderNode(block, ctx, `r${r2}.b${b}`)
|
|
1588
|
-
},
|
|
1589
|
-
b
|
|
1590
|
-
))
|
|
1208
|
+
children: (row.blocks ?? []).map((block, b) => /* @__PURE__ */ jsx("div", { style: { gridColumn: `span ${Math.min(12, Math.max(1, block.span))}`, minWidth: 0 }, children: renderNode(block, ctx, `r${r2}.b${b}`) }, b))
|
|
1591
1209
|
},
|
|
1592
1210
|
r2
|
|
1593
1211
|
))
|
|
@@ -1603,36 +1221,17 @@ import { jsx as jsx2 } from "react/jsx-runtime";
|
|
|
1603
1221
|
var CONTAINER_ATTR = "data-ohw-ai-generated";
|
|
1604
1222
|
var REPLACED_ATTR = "data-ohw-ai-replaced-by";
|
|
1605
1223
|
var REMOVED_ATTR = "data-ohw-ai-removed";
|
|
1606
|
-
var TEMPLATE_HIDDEN_ATTR = "data-ohw-ai-template-hidden";
|
|
1607
|
-
var CHROME_SECTION_IDS = /* @__PURE__ */ new Set(["navbar", "footer"]);
|
|
1608
|
-
function readRootVar(name) {
|
|
1609
|
-
if (typeof document === "undefined") return "";
|
|
1610
|
-
return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
|
|
1611
|
-
}
|
|
1612
|
-
function deriveBrandOverride() {
|
|
1613
|
-
const dark = readRootVar("--ohw-brand-dark");
|
|
1614
|
-
const primary = readRootVar("--ohw-brand-primary");
|
|
1615
|
-
const light = readRootVar("--ohw-brand-light");
|
|
1616
|
-
if (!dark || !primary || !light) return null;
|
|
1617
|
-
const accent = readRootVar("--ohw-brand-accent");
|
|
1618
|
-
const heading = readRootVar("--font-heading") || readRootVar("--font-display");
|
|
1619
|
-
const body = readRootVar("--font-body");
|
|
1620
|
-
return {
|
|
1621
|
-
palette: { dark, primary, accent: accent || dark, light },
|
|
1622
|
-
fonts: {
|
|
1623
|
-
heading: heading || AI_DEFAULT_BRAND.fonts.heading,
|
|
1624
|
-
body: body || AI_DEFAULT_BRAND.fonts.body
|
|
1625
|
-
}
|
|
1626
|
-
};
|
|
1627
|
-
}
|
|
1628
1224
|
function deriveTemplateBrand() {
|
|
1629
|
-
|
|
1630
|
-
const
|
|
1631
|
-
const
|
|
1225
|
+
if (typeof document === "undefined") return null;
|
|
1226
|
+
const cs = getComputedStyle(document.documentElement);
|
|
1227
|
+
const read = (name) => cs.getPropertyValue(name).trim();
|
|
1228
|
+
const dark = read("--color-dark");
|
|
1229
|
+
const primary = read("--color-primary");
|
|
1230
|
+
const light = read("--color-light");
|
|
1632
1231
|
if (!dark || !primary || !light) return null;
|
|
1633
|
-
const accent =
|
|
1634
|
-
const heading =
|
|
1635
|
-
const body =
|
|
1232
|
+
const accent = read("--color-accent");
|
|
1233
|
+
const heading = read("--font-heading") || read("--font-display");
|
|
1234
|
+
const body = read("--font-body");
|
|
1636
1235
|
return {
|
|
1637
1236
|
palette: { dark, primary, accent: accent || dark, light },
|
|
1638
1237
|
fonts: {
|
|
@@ -1704,24 +1303,6 @@ function syncRemovedSections(state) {
|
|
|
1704
1303
|
}
|
|
1705
1304
|
}
|
|
1706
1305
|
}
|
|
1707
|
-
function syncTemplateHidden(state, pageHasSections) {
|
|
1708
|
-
const hide = state.hideTemplate === true && pageHasSections;
|
|
1709
|
-
for (const el of Array.from(document.querySelectorAll(`[${TEMPLATE_HIDDEN_ATTR}]`))) {
|
|
1710
|
-
if (!hide) {
|
|
1711
|
-
el.style.removeProperty("display");
|
|
1712
|
-
el.removeAttribute(TEMPLATE_HIDDEN_ATTR);
|
|
1713
|
-
}
|
|
1714
|
-
}
|
|
1715
|
-
if (!hide) return;
|
|
1716
|
-
for (const el of Array.from(document.querySelectorAll("[data-ohw-section]"))) {
|
|
1717
|
-
if (el.hasAttribute(CONTAINER_ATTR)) continue;
|
|
1718
|
-
if (CHROME_SECTION_IDS.has(el.getAttribute("data-ohw-section") ?? "")) continue;
|
|
1719
|
-
if (el.parentElement?.closest("[data-ohw-section]")) continue;
|
|
1720
|
-
if (el.hasAttribute(REPLACED_ATTR) || el.hasAttribute(REMOVED_ATTR)) continue;
|
|
1721
|
-
el.style.display = "none";
|
|
1722
|
-
el.setAttribute(TEMPLATE_HIDDEN_ATTR, "");
|
|
1723
|
-
}
|
|
1724
|
-
}
|
|
1725
1306
|
function syncReplacedOriginals(state) {
|
|
1726
1307
|
for (const el of document.querySelectorAll(`[${REPLACED_ATTR}]`)) {
|
|
1727
1308
|
const byId = el.getAttribute(REPLACED_ATTR) ?? "";
|
|
@@ -1742,12 +1323,8 @@ function syncReplacedOriginals(state) {
|
|
|
1742
1323
|
}
|
|
1743
1324
|
function applyAiSectionsToDom(state, options) {
|
|
1744
1325
|
if (typeof document === "undefined") return;
|
|
1745
|
-
const brandOverride = deriveBrandOverride();
|
|
1746
1326
|
const templateBrand = deriveTemplateBrand();
|
|
1747
|
-
const
|
|
1748
|
-
const pagePath = window.location.pathname;
|
|
1749
|
-
const pageSections = state.sections.filter((entry) => !entry.path || entry.path === pagePath);
|
|
1750
|
-
const activeIds = new Set(pageSections.map((entry) => entry.id));
|
|
1327
|
+
const activeIds = new Set(state.sections.map((entry) => entry.id));
|
|
1751
1328
|
for (const [id, section] of mounted) {
|
|
1752
1329
|
if (!activeIds.has(id)) {
|
|
1753
1330
|
section.root.unmount();
|
|
@@ -1755,8 +1332,8 @@ function applyAiSectionsToDom(state, options) {
|
|
|
1755
1332
|
mounted.delete(id);
|
|
1756
1333
|
}
|
|
1757
1334
|
}
|
|
1758
|
-
for (const entry of
|
|
1759
|
-
const serialized = JSON.stringify(entry)
|
|
1335
|
+
for (const entry of state.sections) {
|
|
1336
|
+
const serialized = JSON.stringify(entry);
|
|
1760
1337
|
const existing = mounted.get(entry.id);
|
|
1761
1338
|
if (existing && existing.serialized === serialized && existing.container.isConnected) {
|
|
1762
1339
|
continue;
|
|
@@ -1770,7 +1347,6 @@ function applyAiSectionsToDom(state, options) {
|
|
|
1770
1347
|
mounted.delete(entry.id);
|
|
1771
1348
|
}
|
|
1772
1349
|
container.setAttribute("data-ohw-section", entry.id);
|
|
1773
|
-
container.setAttribute("data-ohw-instance", entry.id);
|
|
1774
1350
|
container.setAttribute("data-ohw-section-label", entry.label);
|
|
1775
1351
|
placeContainer(container, entry);
|
|
1776
1352
|
const root = mounted.get(entry.id)?.root ?? createRoot(container);
|
|
@@ -1781,7 +1357,7 @@ function applyAiSectionsToDom(state, options) {
|
|
|
1781
1357
|
AiTreeRenderer,
|
|
1782
1358
|
{
|
|
1783
1359
|
tree: entry.tree,
|
|
1784
|
-
brand:
|
|
1360
|
+
brand: entry.brand ?? options?.brand ?? templateBrand ?? void 0,
|
|
1785
1361
|
resolveMedia,
|
|
1786
1362
|
editKeyPrefix: `ai.${entry.id}`
|
|
1787
1363
|
}
|
|
@@ -1792,7 +1368,6 @@ function applyAiSectionsToDom(state, options) {
|
|
|
1792
1368
|
}
|
|
1793
1369
|
syncReplacedOriginals(state);
|
|
1794
1370
|
syncRemovedSections(state);
|
|
1795
|
-
syncTemplateHidden(state, pageSections.length > 0);
|
|
1796
1371
|
}
|
|
1797
1372
|
|
|
1798
1373
|
// src/useLinkHrefGuardian.ts
|
|
@@ -2399,7 +1974,7 @@ function SchedulingWidget({ notifyOnConnect = false, initialScheduleId, insertAf
|
|
|
2399
1974
|
const autoId = useId();
|
|
2400
1975
|
const insertAfter = insertAfterProp ?? autoId;
|
|
2401
1976
|
const [schedule, setSchedule] = useState2(null);
|
|
2402
|
-
const [loading, setLoading] = useState2(
|
|
1977
|
+
const [loading, setLoading] = useState2(true);
|
|
2403
1978
|
const [inEditor, setInEditor] = useState2(false);
|
|
2404
1979
|
const [isHovered, setIsHovered] = useState2(false);
|
|
2405
1980
|
const [modalState, setModalState] = useState2(null);
|
|
@@ -2573,10 +2148,8 @@ function SchedulingWidget({ notifyOnConnect = false, initialScheduleId, insertAf
|
|
|
2573
2148
|
"*"
|
|
2574
2149
|
);
|
|
2575
2150
|
};
|
|
2151
|
+
if (!inEditor && !loading && !schedule) return null;
|
|
2576
2152
|
const sectionId = `scheduling-${insertAfter}`;
|
|
2577
|
-
if (!inEditor && !loading && !schedule) {
|
|
2578
|
-
return /* @__PURE__ */ jsx4("section", { "data-ohw-section": sectionId, "data-ohw-scheduling-anchor": insertAfter, style: { display: "none" } });
|
|
2579
|
-
}
|
|
2580
2153
|
return /* @__PURE__ */ jsxs3(
|
|
2581
2154
|
"section",
|
|
2582
2155
|
{
|
|
@@ -7681,9 +7254,6 @@ import { Check, X } from "lucide-react";
|
|
|
7681
7254
|
|
|
7682
7255
|
// src/lib/sections.ts
|
|
7683
7256
|
var LINK_PICKER_EXCLUDED_IDS = /* @__PURE__ */ new Set(["navbar", "footer"]);
|
|
7684
|
-
function isChromeSection(el) {
|
|
7685
|
-
return el.matches("header, nav, footer, aside");
|
|
7686
|
-
}
|
|
7687
7257
|
function titleCaseSectionId(id) {
|
|
7688
7258
|
return id.split("-").filter(Boolean).map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
|
|
7689
7259
|
}
|
|
@@ -7694,8 +7264,6 @@ function parseSectionsFromRoot(root) {
|
|
|
7694
7264
|
const id = el.getAttribute("data-ohw-section") ?? "";
|
|
7695
7265
|
if (!id || seen.has(id) || LINK_PICKER_EXCLUDED_IDS.has(id)) continue;
|
|
7696
7266
|
if (el.parentElement?.closest("[data-ohw-section]")) continue;
|
|
7697
|
-
if (el.hasAttribute("data-ohw-ai-template-hidden") || el.hasAttribute("data-ohw-ai-removed") || el.hasAttribute("data-ohw-ai-replaced-by"))
|
|
7698
|
-
continue;
|
|
7699
7267
|
seen.add(id);
|
|
7700
7268
|
const label = el.getAttribute("data-ohw-section-label") ?? titleCaseSectionId(id);
|
|
7701
7269
|
sections.push({ id, label });
|
|
@@ -7713,12 +7281,8 @@ function parseSectionsFromHtml(html) {
|
|
|
7713
7281
|
|
|
7714
7282
|
// src/ui/ai-section/AiSectionOverlay.tsx
|
|
7715
7283
|
import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
7716
|
-
function
|
|
7717
|
-
const
|
|
7718
|
-
return document.querySelector(`[data-ohw-instance="${escaped}"]`) ?? document.querySelector(`[data-ohw-section="${escaped}"]:not([data-ohw-instance])`);
|
|
7719
|
-
}
|
|
7720
|
-
function readRect(instanceId) {
|
|
7721
|
-
const el = findSectionElement(instanceId);
|
|
7284
|
+
function readRect(sectionId) {
|
|
7285
|
+
const el = document.querySelector(`[data-ohw-section="${CSS.escape(sectionId)}"]`);
|
|
7722
7286
|
if (!el) return null;
|
|
7723
7287
|
const r2 = el.getBoundingClientRect();
|
|
7724
7288
|
if (r2.width <= 0 || r2.height <= 0) return null;
|
|
@@ -7741,7 +7305,7 @@ function useLiveSectionRect(sectionId) {
|
|
|
7741
7305
|
const opts = { capture: true, passive: true };
|
|
7742
7306
|
window.addEventListener("scroll", update, opts);
|
|
7743
7307
|
window.addEventListener("resize", update);
|
|
7744
|
-
const el =
|
|
7308
|
+
const el = document.querySelector(`[data-ohw-section="${CSS.escape(sectionId)}"]`);
|
|
7745
7309
|
const ro = el ? new ResizeObserver(update) : null;
|
|
7746
7310
|
if (el && ro) ro.observe(el);
|
|
7747
7311
|
const interval = setInterval(update, 500);
|
|
@@ -7754,14 +7318,6 @@ function useLiveSectionRect(sectionId) {
|
|
|
7754
7318
|
}, [sectionId]);
|
|
7755
7319
|
return rect;
|
|
7756
7320
|
}
|
|
7757
|
-
function computeSectionBoundaryFlags(instanceId) {
|
|
7758
|
-
const topLevel = Array.from(document.querySelectorAll("[data-ohw-section]")).filter(
|
|
7759
|
-
(el) => !el.parentElement?.closest("[data-ohw-section]") && !isChromeSection(el)
|
|
7760
|
-
);
|
|
7761
|
-
const index = topLevel.findIndex((el) => (el.dataset.ohwInstance ?? el.dataset.ohwSection) === instanceId);
|
|
7762
|
-
if (index === -1) return { isFirst: true, isLast: true };
|
|
7763
|
-
return { isFirst: index === 0, isLast: index === topLevel.length - 1 };
|
|
7764
|
-
}
|
|
7765
7321
|
var PRIMARY2 = "#0885FE";
|
|
7766
7322
|
function edgeAwareRadius(rect) {
|
|
7767
7323
|
const container = window.innerWidth <= 480 ? 16 : 24;
|
|
@@ -7835,7 +7391,6 @@ function AiSectionOverlay({
|
|
|
7835
7391
|
}) {
|
|
7836
7392
|
const [selectedId, setSelectedId] = useState4(null);
|
|
7837
7393
|
const [reviewId, setReviewId] = useState4(null);
|
|
7838
|
-
const [reviewButtonsHidden, setReviewButtonsHidden] = useState4(false);
|
|
7839
7394
|
const reviewIdRef = useRef4(null);
|
|
7840
7395
|
reviewIdRef.current = reviewId;
|
|
7841
7396
|
const selectedIdRef = useRef4(null);
|
|
@@ -7844,7 +7399,7 @@ function AiSectionOverlay({
|
|
|
7844
7399
|
(el) => {
|
|
7845
7400
|
postToParent2({
|
|
7846
7401
|
type: "ow:section-selected",
|
|
7847
|
-
sectionId: el
|
|
7402
|
+
sectionId: el?.dataset.ohwSection ?? null,
|
|
7848
7403
|
sectionLabel: el ? el.dataset.ohwSectionLabel ?? titleCaseSectionId(el.dataset.ohwSection ?? "") : null
|
|
7849
7404
|
});
|
|
7850
7405
|
},
|
|
@@ -7853,7 +7408,7 @@ function AiSectionOverlay({
|
|
|
7853
7408
|
const selectFromElement = useCallback2(
|
|
7854
7409
|
(el, options) => {
|
|
7855
7410
|
const sectionEl = el?.closest("[data-ohw-section]") ?? null;
|
|
7856
|
-
const id = sectionEl
|
|
7411
|
+
const id = sectionEl?.dataset.ohwSection ?? null;
|
|
7857
7412
|
if (id === selectedIdRef.current) return;
|
|
7858
7413
|
setSelectedId(id);
|
|
7859
7414
|
if (options?.report !== false) report(sectionEl);
|
|
@@ -7894,10 +7449,9 @@ function AiSectionOverlay({
|
|
|
7894
7449
|
}
|
|
7895
7450
|
const found = readRect(sectionId) != null;
|
|
7896
7451
|
setReviewId(found ? sectionId : null);
|
|
7897
|
-
setReviewButtonsHidden(e.data.hideButtons === true);
|
|
7898
7452
|
postToParent2({ type: "ow:ai-review-started", sectionId, found });
|
|
7899
7453
|
if (found) {
|
|
7900
|
-
document.querySelector(`[data-ohw-
|
|
7454
|
+
document.querySelector(`[data-ohw-section="${CSS.escape(sectionId)}"]`)?.scrollIntoView({ behavior: "smooth", block: "nearest" });
|
|
7901
7455
|
}
|
|
7902
7456
|
}
|
|
7903
7457
|
};
|
|
@@ -7916,7 +7470,7 @@ function AiSectionOverlay({
|
|
|
7916
7470
|
return;
|
|
7917
7471
|
}
|
|
7918
7472
|
const sec = t.closest("[data-ohw-section]");
|
|
7919
|
-
setHoveredId(sec
|
|
7473
|
+
setHoveredId(sec?.dataset.ohwSection ?? null);
|
|
7920
7474
|
};
|
|
7921
7475
|
const onLeave = () => setHoveredId(null);
|
|
7922
7476
|
document.addEventListener("mousemove", onMove, { passive: true });
|
|
@@ -7948,30 +7502,9 @@ function AiSectionOverlay({
|
|
|
7948
7502
|
},
|
|
7949
7503
|
[postToParent2]
|
|
7950
7504
|
);
|
|
7951
|
-
const
|
|
7952
|
-
const selectionRect = useLiveSectionRect(activeSelectionId);
|
|
7505
|
+
const selectionRect = useLiveSectionRect(reviewId ? null : selectedId);
|
|
7953
7506
|
const reviewRect = useLiveSectionRect(reviewId);
|
|
7954
7507
|
const hoverRect = useLiveSectionRect(reviewId || hoveredId === selectedId ? null : hoveredId);
|
|
7955
|
-
useEffect4(() => {
|
|
7956
|
-
const selectedEl = activeSelectionId ? findSectionElement(activeSelectionId) : null;
|
|
7957
|
-
if (!activeSelectionId || !selectionRect || selectedEl && isChromeSection(selectedEl)) {
|
|
7958
|
-
postToParent2({ type: "ow:section-rect", instanceId: null, rect: null });
|
|
7959
|
-
return;
|
|
7960
|
-
}
|
|
7961
|
-
const { isFirst, isLast } = computeSectionBoundaryFlags(activeSelectionId);
|
|
7962
|
-
postToParent2({
|
|
7963
|
-
type: "ow:section-rect",
|
|
7964
|
-
instanceId: activeSelectionId,
|
|
7965
|
-
rect: {
|
|
7966
|
-
top: selectionRect.top + window.scrollY,
|
|
7967
|
-
left: selectionRect.left + window.scrollX,
|
|
7968
|
-
width: selectionRect.width,
|
|
7969
|
-
height: selectionRect.height
|
|
7970
|
-
},
|
|
7971
|
-
isFirst,
|
|
7972
|
-
isLast
|
|
7973
|
-
});
|
|
7974
|
-
}, [activeSelectionId, selectionRect, postToParent2]);
|
|
7975
7508
|
return /* @__PURE__ */ jsxs9(Fragment5, { children: [
|
|
7976
7509
|
hoverRect && /* @__PURE__ */ jsx17(
|
|
7977
7510
|
"div",
|
|
@@ -8022,16 +7555,13 @@ function AiSectionOverlay({
|
|
|
8022
7555
|
border: `2px solid ${PRIMARY2}`,
|
|
8023
7556
|
borderRadius: edgeAwareRadius(reviewRect),
|
|
8024
7557
|
zIndex: 2147483200,
|
|
8025
|
-
// The veil itself: swallows clicks so the section stays locked until decided.
|
|
8026
|
-
// stopPropagation only guards the bubble phase; the bridge's capture-phase click
|
|
8027
|
-
// handlers additionally bail on `[data-ohw-ai-review]`, without which a click on
|
|
8028
|
-
// Accept/Discard resolves to the media beneath and opens the file picker.
|
|
7558
|
+
// The veil itself: swallows clicks so the section stays locked until decided.
|
|
8029
7559
|
background: "rgba(8, 133, 254, 0.04)",
|
|
8030
7560
|
pointerEvents: "auto",
|
|
8031
7561
|
cursor: "default"
|
|
8032
7562
|
},
|
|
8033
7563
|
onClick: (e) => e.stopPropagation(),
|
|
8034
|
-
children:
|
|
7564
|
+
children: /* @__PURE__ */ jsxs9(
|
|
8035
7565
|
"div",
|
|
8036
7566
|
{
|
|
8037
7567
|
style: {
|
|
@@ -12225,7 +11755,6 @@ function readLogoSizeState(content, placement) {
|
|
|
12225
11755
|
function getLogoElement(el) {
|
|
12226
11756
|
const marked = el.closest('[data-ohw-role="logo"], [data-ohw-logo]');
|
|
12227
11757
|
if (marked) return marked;
|
|
12228
|
-
if (el.closest('[data-ohw-editable="icon"]')) return null;
|
|
12229
11758
|
const root = el.closest("nav, [data-ohw-nav-root], footer");
|
|
12230
11759
|
if (!root) return null;
|
|
12231
11760
|
const anchor = el.closest("a");
|
|
@@ -12480,127 +12009,16 @@ function FloatingPanel({
|
|
|
12480
12009
|
);
|
|
12481
12010
|
}
|
|
12482
12011
|
|
|
12483
|
-
// src/ui/logo-size-panel.tsx
|
|
12484
|
-
import { ArrowUpRight, Link as Link2 } from "lucide-react";
|
|
12485
|
-
import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
12486
|
-
function SizeSlider({
|
|
12487
|
-
value,
|
|
12488
|
-
onChange
|
|
12489
|
-
}) {
|
|
12490
|
-
const pct = (value - LOGO_SIZE_MIN) / (LOGO_SIZE_MAX - LOGO_SIZE_MIN) * 100;
|
|
12491
|
-
return /* @__PURE__ */ jsxs18("div", { className: "flex w-full flex-col gap-3", children: [
|
|
12492
|
-
/* @__PURE__ */ jsxs18("div", { className: "flex w-full items-center gap-2 text-sm font-medium leading-5", children: [
|
|
12493
|
-
/* @__PURE__ */ jsx28("span", { className: "min-w-0 flex-1 text-foreground", children: "Size" }),
|
|
12494
|
-
/* @__PURE__ */ jsxs18("span", { className: "shrink-0 whitespace-nowrap text-muted-foreground", children: [
|
|
12495
|
-
value,
|
|
12496
|
-
" px"
|
|
12497
|
-
] })
|
|
12498
|
-
] }),
|
|
12499
|
-
/* @__PURE__ */ jsxs18("div", { className: "relative h-2 w-full rounded-full bg-primary-50", children: [
|
|
12500
|
-
/* @__PURE__ */ jsx28(
|
|
12501
|
-
"div",
|
|
12502
|
-
{
|
|
12503
|
-
className: "absolute inset-y-0 left-0 rounded-full bg-primary",
|
|
12504
|
-
style: { width: `${pct}%` }
|
|
12505
|
-
}
|
|
12506
|
-
),
|
|
12507
|
-
/* @__PURE__ */ jsx28(
|
|
12508
|
-
"input",
|
|
12509
|
-
{
|
|
12510
|
-
type: "range",
|
|
12511
|
-
min: LOGO_SIZE_MIN,
|
|
12512
|
-
max: LOGO_SIZE_MAX,
|
|
12513
|
-
step: 1,
|
|
12514
|
-
value,
|
|
12515
|
-
"aria-label": "Logo size",
|
|
12516
|
-
className: cn(
|
|
12517
|
-
"absolute inset-0 h-full w-full cursor-pointer appearance-none bg-transparent",
|
|
12518
|
-
"[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:size-5",
|
|
12519
|
-
"[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2",
|
|
12520
|
-
"[&::-webkit-slider-thumb]:border-primary [&::-webkit-slider-thumb]:bg-background",
|
|
12521
|
-
"[&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full",
|
|
12522
|
-
"[&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-primary",
|
|
12523
|
-
"[&::-moz-range-thumb]:bg-background"
|
|
12524
|
-
),
|
|
12525
|
-
onChange: (e) => onChange(Number(e.target.value))
|
|
12526
|
-
}
|
|
12527
|
-
)
|
|
12528
|
-
] })
|
|
12529
|
-
] });
|
|
12530
|
-
}
|
|
12531
|
-
function LogoSizePanel({
|
|
12532
|
-
viewport,
|
|
12533
|
-
sizePx,
|
|
12534
|
-
mobileFollowing = true,
|
|
12535
|
-
onSizeChange,
|
|
12536
|
-
onCustomizeMobile,
|
|
12537
|
-
onResetMobile,
|
|
12538
|
-
onUpdateEverywhere,
|
|
12539
|
-
className
|
|
12540
|
-
}) {
|
|
12541
|
-
const showFollowing = viewport === "mobile" && mobileFollowing;
|
|
12542
|
-
const showMobileSlider = viewport === "mobile" && !mobileFollowing;
|
|
12543
|
-
const showDesktopSlider = viewport === "desktop";
|
|
12544
|
-
return /* @__PURE__ */ jsxs18("div", { className: cn("flex w-full flex-col gap-4", className), children: [
|
|
12545
|
-
showFollowing ? /* @__PURE__ */ jsxs18("div", { className: "flex w-full flex-col gap-2", children: [
|
|
12546
|
-
/* @__PURE__ */ jsxs18("div", { className: "flex items-start gap-1", children: [
|
|
12547
|
-
/* @__PURE__ */ jsx28(Link2, { size: 16, className: "mt-0.5 shrink-0 text-foreground", "aria-hidden": true }),
|
|
12548
|
-
/* @__PURE__ */ jsx28("p", { className: "text-sm font-semibold leading-5 text-foreground", children: "Following desktop size" })
|
|
12549
|
-
] }),
|
|
12550
|
-
/* @__PURE__ */ jsx28("p", { className: "text-sm leading-5 text-muted-foreground", children: "Mobile uses the desktop size until you customize it. Change the desktop size and it follows automatically." }),
|
|
12551
|
-
/* @__PURE__ */ jsx28(
|
|
12552
|
-
Button,
|
|
12553
|
-
{
|
|
12554
|
-
type: "button",
|
|
12555
|
-
variant: "outline",
|
|
12556
|
-
size: "sm",
|
|
12557
|
-
className: "h-9 w-full min-w-0 cursor-pointer",
|
|
12558
|
-
onClick: onCustomizeMobile,
|
|
12559
|
-
children: "Customize for mobile"
|
|
12560
|
-
}
|
|
12561
|
-
)
|
|
12562
|
-
] }) : null,
|
|
12563
|
-
showDesktopSlider || showMobileSlider ? /* @__PURE__ */ jsx28(SizeSlider, { value: sizePx, onChange: onSizeChange }) : null,
|
|
12564
|
-
showMobileSlider ? /* @__PURE__ */ jsx28(
|
|
12565
|
-
Button,
|
|
12566
|
-
{
|
|
12567
|
-
type: "button",
|
|
12568
|
-
variant: "outline",
|
|
12569
|
-
size: "sm",
|
|
12570
|
-
className: "h-9 w-full min-w-0 cursor-pointer",
|
|
12571
|
-
onClick: onResetMobile,
|
|
12572
|
-
children: "Reset to desktop size"
|
|
12573
|
-
}
|
|
12574
|
-
) : null,
|
|
12575
|
-
/* @__PURE__ */ jsx28("div", { className: "h-px w-full bg-border", role: "separator" }),
|
|
12576
|
-
/* @__PURE__ */ jsxs18(
|
|
12577
|
-
Button,
|
|
12578
|
-
{
|
|
12579
|
-
type: "button",
|
|
12580
|
-
variant: "outline",
|
|
12581
|
-
size: "sm",
|
|
12582
|
-
className: "h-9 w-full min-w-0 cursor-pointer gap-1",
|
|
12583
|
-
onClick: onUpdateEverywhere,
|
|
12584
|
-
children: [
|
|
12585
|
-
"Update logo everywhere",
|
|
12586
|
-
/* @__PURE__ */ jsx28(ArrowUpRight, { size: 16, "aria-hidden": true })
|
|
12587
|
-
]
|
|
12588
|
-
}
|
|
12589
|
-
),
|
|
12590
|
-
/* @__PURE__ */ jsx28("p", { className: "text-sm leading-5 text-muted-foreground", children: "Matches the right version to your background." })
|
|
12591
|
-
] });
|
|
12592
|
-
}
|
|
12593
|
-
|
|
12594
12012
|
// src/ui/socials-display-panel.tsx
|
|
12595
|
-
import { jsx as
|
|
12013
|
+
import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
12596
12014
|
function DisplaySwitch({
|
|
12597
12015
|
label,
|
|
12598
12016
|
checked,
|
|
12599
12017
|
disabled,
|
|
12600
12018
|
onChange
|
|
12601
12019
|
}) {
|
|
12602
|
-
return /* @__PURE__ */
|
|
12603
|
-
/* @__PURE__ */
|
|
12020
|
+
return /* @__PURE__ */ jsxs18("div", { className: "flex w-full items-center gap-2", children: [
|
|
12021
|
+
/* @__PURE__ */ jsx28(
|
|
12604
12022
|
"span",
|
|
12605
12023
|
{
|
|
12606
12024
|
className: cn(
|
|
@@ -12610,7 +12028,7 @@ function DisplaySwitch({
|
|
|
12610
12028
|
children: label
|
|
12611
12029
|
}
|
|
12612
12030
|
),
|
|
12613
|
-
/* @__PURE__ */
|
|
12031
|
+
/* @__PURE__ */ jsx28(
|
|
12614
12032
|
"button",
|
|
12615
12033
|
{
|
|
12616
12034
|
type: "button",
|
|
@@ -12624,7 +12042,7 @@ function DisplaySwitch({
|
|
|
12624
12042
|
checked ? "bg-primary" : "bg-primary-50",
|
|
12625
12043
|
disabled ? "cursor-default opacity-50" : "cursor-pointer"
|
|
12626
12044
|
),
|
|
12627
|
-
children: /* @__PURE__ */
|
|
12045
|
+
children: /* @__PURE__ */ jsx28(
|
|
12628
12046
|
"span",
|
|
12629
12047
|
{
|
|
12630
12048
|
className: cn(
|
|
@@ -12638,8 +12056,8 @@ function DisplaySwitch({
|
|
|
12638
12056
|
] });
|
|
12639
12057
|
}
|
|
12640
12058
|
function SocialsDisplayPanel({ display, onChange, className }) {
|
|
12641
|
-
return /* @__PURE__ */
|
|
12642
|
-
/* @__PURE__ */
|
|
12059
|
+
return /* @__PURE__ */ jsxs18("div", { className: cn("flex w-full flex-col gap-3", className), children: [
|
|
12060
|
+
/* @__PURE__ */ jsx28(
|
|
12643
12061
|
DisplaySwitch,
|
|
12644
12062
|
{
|
|
12645
12063
|
label: "Text",
|
|
@@ -12648,7 +12066,7 @@ function SocialsDisplayPanel({ display, onChange, className }) {
|
|
|
12648
12066
|
onChange: (text) => onChange({ ...display, text })
|
|
12649
12067
|
}
|
|
12650
12068
|
),
|
|
12651
|
-
/* @__PURE__ */
|
|
12069
|
+
/* @__PURE__ */ jsx28(
|
|
12652
12070
|
DisplaySwitch,
|
|
12653
12071
|
{
|
|
12654
12072
|
label: "Icon",
|
|
@@ -13209,7 +12627,7 @@ function useNavItemDrag({
|
|
|
13209
12627
|
|
|
13210
12628
|
// src/ui/footer-container-chrome.tsx
|
|
13211
12629
|
import { Plus as Plus2 } from "lucide-react";
|
|
13212
|
-
import { jsx as
|
|
12630
|
+
import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
13213
12631
|
function FooterContainerChrome({
|
|
13214
12632
|
rect,
|
|
13215
12633
|
onAdd,
|
|
@@ -13217,7 +12635,7 @@ function FooterContainerChrome({
|
|
|
13217
12635
|
}) {
|
|
13218
12636
|
const chromeGap = 6;
|
|
13219
12637
|
const buttonMargin = 7;
|
|
13220
|
-
return /* @__PURE__ */
|
|
12638
|
+
return /* @__PURE__ */ jsx29(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx29(
|
|
13221
12639
|
"div",
|
|
13222
12640
|
{
|
|
13223
12641
|
"data-ohw-footer-container-chrome": "",
|
|
@@ -13229,8 +12647,8 @@ function FooterContainerChrome({
|
|
|
13229
12647
|
width: rect.width + chromeGap * 2,
|
|
13230
12648
|
height: rect.height + chromeGap * 2
|
|
13231
12649
|
},
|
|
13232
|
-
children: /* @__PURE__ */
|
|
13233
|
-
/* @__PURE__ */
|
|
12650
|
+
children: /* @__PURE__ */ jsxs19(Tooltip, { children: [
|
|
12651
|
+
/* @__PURE__ */ jsx29(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx29(
|
|
13234
12652
|
"button",
|
|
13235
12653
|
{
|
|
13236
12654
|
type: "button",
|
|
@@ -13249,10 +12667,10 @@ function FooterContainerChrome({
|
|
|
13249
12667
|
if (addDisabled) return;
|
|
13250
12668
|
onAdd();
|
|
13251
12669
|
},
|
|
13252
|
-
children: /* @__PURE__ */
|
|
12670
|
+
children: /* @__PURE__ */ jsx29(Plus2, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
13253
12671
|
}
|
|
13254
12672
|
) }),
|
|
13255
|
-
/* @__PURE__ */
|
|
12673
|
+
/* @__PURE__ */ jsx29(TooltipContent, { side: "bottom", sideOffset: 9, children: addDisabled ? "Maximum columns reached" : "Add item" })
|
|
13256
12674
|
] })
|
|
13257
12675
|
}
|
|
13258
12676
|
) });
|
|
@@ -13437,18 +12855,6 @@ function collectEditableNodes(extraContent, root = document) {
|
|
|
13437
12855
|
}
|
|
13438
12856
|
if (extraContent && !isScoped) {
|
|
13439
12857
|
applyNavFooterDeleteOverrides(byKey, extraContent);
|
|
13440
|
-
for (const key of LOGO_IMAGE_KEYS) {
|
|
13441
|
-
if (!(key in extraContent)) continue;
|
|
13442
|
-
byKey.set(key, { key, type: "image", text: extraContent[key] ?? "" });
|
|
13443
|
-
}
|
|
13444
|
-
for (const key of [LOGO_PLACEHOLDER_KEY, LOGO_ALT_KEY]) {
|
|
13445
|
-
if (!(key in extraContent)) continue;
|
|
13446
|
-
byKey.set(key, { key, type: "meta", text: extraContent[key] ?? "" });
|
|
13447
|
-
}
|
|
13448
|
-
for (const key of LOGO_SIZE_KEYS) {
|
|
13449
|
-
if (!(key in extraContent)) continue;
|
|
13450
|
-
byKey.set(key, { key, type: "meta", text: extraContent[key] ?? "" });
|
|
13451
|
-
}
|
|
13452
12858
|
}
|
|
13453
12859
|
return Array.from(byKey.values());
|
|
13454
12860
|
}
|
|
@@ -13715,13 +13121,13 @@ function deleteSelectedNavFooterItem(deps) {
|
|
|
13715
13121
|
|
|
13716
13122
|
// src/ui/navbar-container-chrome.tsx
|
|
13717
13123
|
import { Plus as Plus3 } from "lucide-react";
|
|
13718
|
-
import { jsx as
|
|
13124
|
+
import { jsx as jsx30 } from "react/jsx-runtime";
|
|
13719
13125
|
function NavbarContainerChrome({
|
|
13720
13126
|
rect,
|
|
13721
13127
|
onAdd
|
|
13722
13128
|
}) {
|
|
13723
13129
|
const chromeGap = 6;
|
|
13724
|
-
return /* @__PURE__ */
|
|
13130
|
+
return /* @__PURE__ */ jsx30(
|
|
13725
13131
|
"div",
|
|
13726
13132
|
{
|
|
13727
13133
|
"data-ohw-navbar-container-chrome": "",
|
|
@@ -13733,7 +13139,7 @@ function NavbarContainerChrome({
|
|
|
13733
13139
|
width: rect.width + chromeGap * 2,
|
|
13734
13140
|
height: rect.height + chromeGap * 2
|
|
13735
13141
|
},
|
|
13736
|
-
children: /* @__PURE__ */
|
|
13142
|
+
children: /* @__PURE__ */ jsx30(
|
|
13737
13143
|
"button",
|
|
13738
13144
|
{
|
|
13739
13145
|
type: "button",
|
|
@@ -13750,7 +13156,7 @@ function NavbarContainerChrome({
|
|
|
13750
13156
|
e.stopPropagation();
|
|
13751
13157
|
onAdd();
|
|
13752
13158
|
},
|
|
13753
|
-
children: /* @__PURE__ */
|
|
13159
|
+
children: /* @__PURE__ */ jsx30(Plus3, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
|
|
13754
13160
|
}
|
|
13755
13161
|
)
|
|
13756
13162
|
}
|
|
@@ -13759,7 +13165,7 @@ function NavbarContainerChrome({
|
|
|
13759
13165
|
|
|
13760
13166
|
// src/ui/drop-indicator.tsx
|
|
13761
13167
|
import * as React10 from "react";
|
|
13762
|
-
import { jsx as
|
|
13168
|
+
import { jsx as jsx31 } from "react/jsx-runtime";
|
|
13763
13169
|
var dropIndicatorVariants = cva(
|
|
13764
13170
|
"ov-gap-line pointer-events-none shrink-0 transition-opacity duration-150",
|
|
13765
13171
|
{
|
|
@@ -13783,7 +13189,7 @@ var dropIndicatorVariants = cva(
|
|
|
13783
13189
|
);
|
|
13784
13190
|
var DropIndicator = React10.forwardRef(
|
|
13785
13191
|
({ className, direction, state, ...props }, ref) => {
|
|
13786
|
-
return /* @__PURE__ */
|
|
13192
|
+
return /* @__PURE__ */ jsx31(
|
|
13787
13193
|
"div",
|
|
13788
13194
|
{
|
|
13789
13195
|
ref,
|
|
@@ -13800,7 +13206,7 @@ var DropIndicator = React10.forwardRef(
|
|
|
13800
13206
|
DropIndicator.displayName = "DropIndicator";
|
|
13801
13207
|
|
|
13802
13208
|
// src/ui/badge.tsx
|
|
13803
|
-
import { jsx as
|
|
13209
|
+
import { jsx as jsx32 } from "react/jsx-runtime";
|
|
13804
13210
|
var badgeVariants = cva(
|
|
13805
13211
|
"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",
|
|
13806
13212
|
{
|
|
@@ -13818,12 +13224,12 @@ var badgeVariants = cva(
|
|
|
13818
13224
|
}
|
|
13819
13225
|
);
|
|
13820
13226
|
function Badge({ className, variant, ...props }) {
|
|
13821
|
-
return /* @__PURE__ */
|
|
13227
|
+
return /* @__PURE__ */ jsx32("div", { className: cn(badgeVariants({ variant }), className), ...props });
|
|
13822
13228
|
}
|
|
13823
13229
|
|
|
13824
13230
|
// src/OhhwellsBridge.tsx
|
|
13825
|
-
import { Link as
|
|
13826
|
-
import { Fragment as Fragment8, jsx as
|
|
13231
|
+
import { Link as Link2, Plus as Plus4, Settings } from "lucide-react";
|
|
13232
|
+
import { Fragment as Fragment8, jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
13827
13233
|
var PRIMARY3 = "#0885FE";
|
|
13828
13234
|
var IMAGE_FADE_MS = 300;
|
|
13829
13235
|
function runOpacityFade(el, onDone) {
|
|
@@ -13917,10 +13323,21 @@ function parseSchedulingInsertAfter(insertAfter) {
|
|
|
13917
13323
|
insertBefore: insertAfter.slice(idx + INSERT_BEFORE_MARKER.length)
|
|
13918
13324
|
};
|
|
13919
13325
|
}
|
|
13920
|
-
function
|
|
13921
|
-
|
|
13922
|
-
const
|
|
13923
|
-
|
|
13326
|
+
function resolveSchedulingInsert(insertAfter, explicitInsertBefore) {
|
|
13327
|
+
const parsed = parseSchedulingInsertAfter(insertAfter);
|
|
13328
|
+
const insertBefore = explicitInsertBefore ?? parsed.insertBefore;
|
|
13329
|
+
const effectiveInsertAfter = insertBefore && parsed.insertBefore === null ? `${insertAfter}${INSERT_BEFORE_MARKER}${insertBefore}` : insertAfter;
|
|
13330
|
+
return { effectiveInsertAfter, insertBefore };
|
|
13331
|
+
}
|
|
13332
|
+
function getSchedulingMountPoint(insertAfter) {
|
|
13333
|
+
const { anchor } = parseSchedulingInsertAfter(insertAfter);
|
|
13334
|
+
let anchorEl = document.querySelector(`[data-ohw-section="${anchor}"]`);
|
|
13335
|
+
if (!anchorEl && anchor === "scheduling") {
|
|
13336
|
+
const widgets = Array.from(document.querySelectorAll('[data-ohw-section^="scheduling-"]'));
|
|
13337
|
+
anchorEl = widgets.at(-1) ?? null;
|
|
13338
|
+
}
|
|
13339
|
+
if (!anchorEl) return null;
|
|
13340
|
+
return anchorEl.closest('[data-ohw-section-container="scheduling"]') ?? anchorEl;
|
|
13924
13341
|
}
|
|
13925
13342
|
function schedulingMountDepth(insertAfter) {
|
|
13926
13343
|
if (!insertAfter.includes(INSERT_BEFORE_MARKER)) return 0;
|
|
@@ -13937,7 +13354,8 @@ function getPageSchedulingEntries(raw) {
|
|
|
13937
13354
|
}
|
|
13938
13355
|
}
|
|
13939
13356
|
function isSchedulingWidgetMissing(entry) {
|
|
13940
|
-
|
|
13357
|
+
const { effectiveInsertAfter } = resolveSchedulingInsert(entry.insertAfter);
|
|
13358
|
+
return !document.querySelector(`[data-ohw-section="${schedulingSectionId(effectiveInsertAfter)}"]`);
|
|
13941
13359
|
}
|
|
13942
13360
|
function hasMissingSchedulingWidgets(entries) {
|
|
13943
13361
|
return entries.some(isSchedulingWidgetMissing);
|
|
@@ -13967,17 +13385,16 @@ function initSectionsFromContent(content, removeExisting = false) {
|
|
|
13967
13385
|
} catch {
|
|
13968
13386
|
}
|
|
13969
13387
|
}
|
|
13970
|
-
function mountSchedulingWidget(
|
|
13971
|
-
const
|
|
13972
|
-
const sectionId = schedulingSectionId(
|
|
13388
|
+
function mountSchedulingWidget(insertAfter, notifyOnConnect = false, scheduleId, explicitInsertBefore) {
|
|
13389
|
+
const { effectiveInsertAfter, insertBefore } = resolveSchedulingInsert(insertAfter, explicitInsertBefore);
|
|
13390
|
+
const sectionId = schedulingSectionId(effectiveInsertAfter);
|
|
13973
13391
|
if (document.querySelector(`[data-ohw-section="${sectionId}"]`)) return false;
|
|
13974
|
-
const
|
|
13975
|
-
if (!
|
|
13976
|
-
const mountPoint = anchorEl.closest('[data-ohw-section-container="scheduling"]') ?? anchorEl;
|
|
13392
|
+
const mountPoint = getSchedulingMountPoint(effectiveInsertAfter);
|
|
13393
|
+
if (!mountPoint) return false;
|
|
13977
13394
|
const container = document.createElement("div");
|
|
13978
13395
|
container.dataset.ohwSectionContainer = "scheduling";
|
|
13979
|
-
if (
|
|
13980
|
-
const beforeAnchor = document.querySelector(`[data-ohw-section="${
|
|
13396
|
+
if (insertBefore) {
|
|
13397
|
+
const beforeAnchor = document.querySelector(`[data-ohw-section="${insertBefore}"]`);
|
|
13981
13398
|
const beforePoint = beforeAnchor?.closest('[data-ohw-section-container="scheduling"]') ?? beforeAnchor;
|
|
13982
13399
|
if (!beforePoint) return false;
|
|
13983
13400
|
beforePoint.insertAdjacentElement("beforebegin", container);
|
|
@@ -13988,25 +13405,19 @@ function mountSchedulingWidget(anchorId, notifyOnConnect = false, scheduleId, be
|
|
|
13988
13405
|
}
|
|
13989
13406
|
tail.insertAdjacentElement("afterend", container);
|
|
13990
13407
|
}
|
|
13991
|
-
|
|
13992
|
-
|
|
13993
|
-
|
|
13994
|
-
|
|
13995
|
-
|
|
13996
|
-
|
|
13997
|
-
|
|
13998
|
-
|
|
13999
|
-
|
|
14000
|
-
|
|
14001
|
-
|
|
14002
|
-
|
|
14003
|
-
|
|
14004
|
-
});
|
|
14005
|
-
} catch (err) {
|
|
14006
|
-
console.error("[ow:scheduling] render threw", err);
|
|
14007
|
-
container.remove();
|
|
14008
|
-
return false;
|
|
14009
|
-
}
|
|
13408
|
+
const root = createRoot2(container);
|
|
13409
|
+
flushSync2(() => {
|
|
13410
|
+
root.render(
|
|
13411
|
+
/* @__PURE__ */ jsx33(
|
|
13412
|
+
SchedulingWidget,
|
|
13413
|
+
{
|
|
13414
|
+
notifyOnConnect,
|
|
13415
|
+
initialScheduleId: scheduleId,
|
|
13416
|
+
insertAfter: effectiveInsertAfter
|
|
13417
|
+
}
|
|
13418
|
+
)
|
|
13419
|
+
);
|
|
13420
|
+
});
|
|
14010
13421
|
const tracker = getSectionsTracker();
|
|
14011
13422
|
let sections = [];
|
|
14012
13423
|
try {
|
|
@@ -14014,12 +13425,10 @@ function mountSchedulingWidget(anchorId, notifyOnConnect = false, scheduleId, be
|
|
|
14014
13425
|
} catch {
|
|
14015
13426
|
}
|
|
14016
13427
|
const inEditor = typeof window !== "undefined" && window.self !== window.top;
|
|
14017
|
-
if (inEditor && !sections.find((s) => s.type === "scheduling" && s.insertAfter ===
|
|
13428
|
+
if (inEditor && !sections.find((s) => s.type === "scheduling" && s.insertAfter === effectiveInsertAfter)) {
|
|
14018
13429
|
sections.push({
|
|
14019
13430
|
type: "scheduling",
|
|
14020
|
-
insertAfter:
|
|
14021
|
-
anchorId,
|
|
14022
|
-
beforeId: beforeId ?? null,
|
|
13431
|
+
insertAfter: effectiveInsertAfter,
|
|
14023
13432
|
pagePath: window.location.pathname,
|
|
14024
13433
|
...scheduleId ? { scheduleId } : {}
|
|
14025
13434
|
});
|
|
@@ -14033,8 +13442,7 @@ function mountSchedulingEntries(entries, notifyOnConnect = false) {
|
|
|
14033
13442
|
for (let i = pending.length - 1; i >= 0; i--) {
|
|
14034
13443
|
const entry = pending[i];
|
|
14035
13444
|
const shouldNotify = typeof notifyOnConnect === "function" ? notifyOnConnect(entry) : notifyOnConnect;
|
|
14036
|
-
|
|
14037
|
-
if (mountSchedulingWidget(anchorId, shouldNotify, entry.scheduleId ?? null, beforeId, entry.insertAfter)) {
|
|
13445
|
+
if (mountSchedulingWidget(entry.insertAfter, shouldNotify, entry.scheduleId)) {
|
|
14038
13446
|
pending.splice(i, 1);
|
|
14039
13447
|
}
|
|
14040
13448
|
}
|
|
@@ -14182,13 +13590,6 @@ function isInsideLinkEditor(target) {
|
|
|
14182
13590
|
target.closest("[data-ohw-link-popover-root]") || target.closest("[data-ohw-link-modal-root]") || target.closest("[data-ohw-link-page-dropdown]") || target.closest("[data-ohw-section-picker]") || target.closest("[data-ohw-navbar-container-chrome]") || target.closest("[data-ohw-navbar-add-button]") || target.closest("[data-ohw-footer-container-chrome]") || target.closest("[data-ohw-footer-add-button]") || target.closest("[data-ohw-more-menu]") || target.closest('[data-slot="dropdown-menu-content"]') || target.closest('[data-slot="popover-content"]') || target.closest('[data-slot="dialog-content"]') || target.closest('[data-slot="dialog-overlay"]')
|
|
14183
13591
|
);
|
|
14184
13592
|
}
|
|
14185
|
-
function isInsideFloatingPanel(target) {
|
|
14186
|
-
return Boolean(target.closest("[data-ohw-floating-panel]"));
|
|
14187
|
-
}
|
|
14188
|
-
function isPointOverFloatingPanel(clientX, clientY) {
|
|
14189
|
-
const el = document.elementFromPoint(clientX, clientY);
|
|
14190
|
-
return Boolean(el instanceof Element && el.closest("[data-ohw-floating-panel]"));
|
|
14191
|
-
}
|
|
14192
13593
|
function getHrefKeyFromElement(el) {
|
|
14193
13594
|
if (!el) return null;
|
|
14194
13595
|
const anchor = el.closest("[data-ohw-href-key]");
|
|
@@ -14236,7 +13637,8 @@ function isNavItemPointerTarget(el) {
|
|
|
14236
13637
|
function getNavigationItemAnchor(el) {
|
|
14237
13638
|
const anchor = el.matches("[data-ohw-href-key]") ? el : el.closest("[data-ohw-href-key]");
|
|
14238
13639
|
if (!anchor) return null;
|
|
14239
|
-
if (!anchor.querySelector('[data-ohw-editable="text"]') && !getSocialItem(anchor))
|
|
13640
|
+
if (!anchor.matches('[data-ohw-editable="text"], [data-ohw-editable="plain"]') && !anchor.querySelector('[data-ohw-editable="text"], [data-ohw-editable="plain"]') && !getSocialItem(anchor))
|
|
13641
|
+
return null;
|
|
14240
13642
|
if (!isNavItemPointerTarget(anchor)) return null;
|
|
14241
13643
|
return anchor;
|
|
14242
13644
|
}
|
|
@@ -14426,7 +13828,7 @@ function getNavigationSelectionParent(el) {
|
|
|
14426
13828
|
if (!isFooterLinksContainer(el) && (el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isInferredFooterGroup2(el))) {
|
|
14427
13829
|
return getFooterLinksContainer();
|
|
14428
13830
|
}
|
|
14429
|
-
if (el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-nav-drawer") ||
|
|
13831
|
+
if (el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-nav-drawer") || isFooterLinksContainer(el)) {
|
|
14430
13832
|
return getNavigationRoot(el);
|
|
14431
13833
|
}
|
|
14432
13834
|
return null;
|
|
@@ -14672,7 +14074,7 @@ function EditGlowChrome({
|
|
|
14672
14074
|
hideHandle = false
|
|
14673
14075
|
}) {
|
|
14674
14076
|
const GAP = SELECTION_CHROME_GAP2;
|
|
14675
|
-
return /* @__PURE__ */
|
|
14077
|
+
return /* @__PURE__ */ jsxs20(
|
|
14676
14078
|
"div",
|
|
14677
14079
|
{
|
|
14678
14080
|
ref: elRef,
|
|
@@ -14687,7 +14089,7 @@ function EditGlowChrome({
|
|
|
14687
14089
|
zIndex: 2147483646
|
|
14688
14090
|
},
|
|
14689
14091
|
children: [
|
|
14690
|
-
/* @__PURE__ */
|
|
14092
|
+
/* @__PURE__ */ jsx33(
|
|
14691
14093
|
"div",
|
|
14692
14094
|
{
|
|
14693
14095
|
style: {
|
|
@@ -14700,7 +14102,7 @@ function EditGlowChrome({
|
|
|
14700
14102
|
}
|
|
14701
14103
|
}
|
|
14702
14104
|
),
|
|
14703
|
-
reorderHrefKey && !hideHandle && /* @__PURE__ */
|
|
14105
|
+
reorderHrefKey && !hideHandle && /* @__PURE__ */ jsx33(
|
|
14704
14106
|
"div",
|
|
14705
14107
|
{
|
|
14706
14108
|
"data-ohw-drag-handle-container": "",
|
|
@@ -14712,7 +14114,7 @@ function EditGlowChrome({
|
|
|
14712
14114
|
transform: "translate(calc(-100% - 7px), -50%)",
|
|
14713
14115
|
pointerEvents: dragDisabled ? "none" : "auto"
|
|
14714
14116
|
},
|
|
14715
|
-
children: /* @__PURE__ */
|
|
14117
|
+
children: /* @__PURE__ */ jsx33(
|
|
14716
14118
|
DragHandle,
|
|
14717
14119
|
{
|
|
14718
14120
|
"aria-label": `Reorder ${reorderHrefKey}`,
|
|
@@ -14922,7 +14324,7 @@ function FloatingToolbar({
|
|
|
14922
14324
|
return () => ro.disconnect();
|
|
14923
14325
|
}, [showEditLink, activeCommands]);
|
|
14924
14326
|
const { top, left, transform } = calcToolbarPos(rect, parentScroll, measuredW);
|
|
14925
|
-
return /* @__PURE__ */
|
|
14327
|
+
return /* @__PURE__ */ jsx33(
|
|
14926
14328
|
"div",
|
|
14927
14329
|
{
|
|
14928
14330
|
ref: setRefs,
|
|
@@ -14934,12 +14336,12 @@ function FloatingToolbar({
|
|
|
14934
14336
|
zIndex: 2147483647,
|
|
14935
14337
|
pointerEvents: "auto"
|
|
14936
14338
|
},
|
|
14937
|
-
children: /* @__PURE__ */
|
|
14938
|
-
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */
|
|
14939
|
-
gi > 0 && /* @__PURE__ */
|
|
14339
|
+
children: /* @__PURE__ */ jsxs20(CustomToolbar, { children: [
|
|
14340
|
+
TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ jsxs20(React11.Fragment, { children: [
|
|
14341
|
+
gi > 0 && /* @__PURE__ */ jsx33(CustomToolbarDivider, {}),
|
|
14940
14342
|
btns.map((btn) => {
|
|
14941
14343
|
const isActive = activeCommands.has(btn.cmd);
|
|
14942
|
-
return /* @__PURE__ */
|
|
14344
|
+
return /* @__PURE__ */ jsx33(
|
|
14943
14345
|
CustomToolbarButton,
|
|
14944
14346
|
{
|
|
14945
14347
|
title: btn.title,
|
|
@@ -14948,7 +14350,7 @@ function FloatingToolbar({
|
|
|
14948
14350
|
e.preventDefault();
|
|
14949
14351
|
onCommand(btn.cmd);
|
|
14950
14352
|
},
|
|
14951
|
-
children: /* @__PURE__ */
|
|
14353
|
+
children: /* @__PURE__ */ jsx33(
|
|
14952
14354
|
"svg",
|
|
14953
14355
|
{
|
|
14954
14356
|
width: "16",
|
|
@@ -14969,7 +14371,7 @@ function FloatingToolbar({
|
|
|
14969
14371
|
);
|
|
14970
14372
|
})
|
|
14971
14373
|
] }, gi)),
|
|
14972
|
-
showEditLink ? /* @__PURE__ */
|
|
14374
|
+
showEditLink ? /* @__PURE__ */ jsx33(
|
|
14973
14375
|
CustomToolbarButton,
|
|
14974
14376
|
{
|
|
14975
14377
|
type: "button",
|
|
@@ -14983,7 +14385,7 @@ function FloatingToolbar({
|
|
|
14983
14385
|
e.preventDefault();
|
|
14984
14386
|
e.stopPropagation();
|
|
14985
14387
|
},
|
|
14986
|
-
children: /* @__PURE__ */
|
|
14388
|
+
children: /* @__PURE__ */ jsx33(Link2, { className: "size-4 shrink-0", "aria-hidden": true })
|
|
14987
14389
|
}
|
|
14988
14390
|
) : null
|
|
14989
14391
|
] })
|
|
@@ -15000,7 +14402,7 @@ function StateToggle({
|
|
|
15000
14402
|
states,
|
|
15001
14403
|
onStateChange
|
|
15002
14404
|
}) {
|
|
15003
|
-
return /* @__PURE__ */
|
|
14405
|
+
return /* @__PURE__ */ jsx33(
|
|
15004
14406
|
ToggleGroup,
|
|
15005
14407
|
{
|
|
15006
14408
|
"data-ohw-state-toggle": "",
|
|
@@ -15014,12 +14416,11 @@ function StateToggle({
|
|
|
15014
14416
|
left: rect.right - 8,
|
|
15015
14417
|
transform: "translateX(-100%)"
|
|
15016
14418
|
},
|
|
15017
|
-
children: states.map((state) => /* @__PURE__ */
|
|
14419
|
+
children: states.map((state) => /* @__PURE__ */ jsx33(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
|
|
15018
14420
|
}
|
|
15019
14421
|
);
|
|
15020
14422
|
}
|
|
15021
14423
|
var contentCache = /* @__PURE__ */ new Map();
|
|
15022
|
-
var fetchedContentPaths = /* @__PURE__ */ new Set();
|
|
15023
14424
|
function resolveSubdomain(subdomainFromQuery) {
|
|
15024
14425
|
if (subdomainFromQuery) return subdomainFromQuery;
|
|
15025
14426
|
if (typeof window !== "undefined") {
|
|
@@ -15262,17 +14663,37 @@ function OhhwellsBridge() {
|
|
|
15262
14663
|
[persistFields, selectField]
|
|
15263
14664
|
);
|
|
15264
14665
|
const fieldDragRef = useRef9(null);
|
|
14666
|
+
const buildFieldDropSlots = useCallback7((form, draggedKey) => {
|
|
14667
|
+
const others = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== draggedKey);
|
|
14668
|
+
const slots = others.map((el) => {
|
|
14669
|
+
const rect = el.getBoundingClientRect();
|
|
14670
|
+
return { top: rect.top, left: rect.left, width: rect.width };
|
|
14671
|
+
});
|
|
14672
|
+
const last = others[others.length - 1];
|
|
14673
|
+
if (last) {
|
|
14674
|
+
const rect = last.getBoundingClientRect();
|
|
14675
|
+
slots.push({ top: rect.bottom, left: rect.left, width: rect.width });
|
|
14676
|
+
}
|
|
14677
|
+
return slots;
|
|
14678
|
+
}, []);
|
|
15265
14679
|
const handleFieldDragStart = useCallback7(() => {
|
|
15266
14680
|
const wrapper = fieldPickElRef.current;
|
|
15267
14681
|
const form = formPickElRef.current;
|
|
15268
14682
|
if (!wrapper || !form) return;
|
|
15269
|
-
|
|
15270
|
-
|
|
14683
|
+
const key = fieldKeyOf(wrapper);
|
|
14684
|
+
fieldDragRef.current = { key, form };
|
|
14685
|
+
setFieldDragging(true);
|
|
14686
|
+
setFieldDropSlots(buildFieldDropSlots(form, key));
|
|
14687
|
+
}, [buildFieldDropSlots]);
|
|
15271
14688
|
const handleFieldDragEnd = useCallback7(() => {
|
|
15272
14689
|
fieldDragRef.current = null;
|
|
15273
14690
|
setFieldDropIndex(null);
|
|
14691
|
+
setFieldDropSlots([]);
|
|
14692
|
+
setFieldDragging(false);
|
|
15274
14693
|
}, []);
|
|
15275
14694
|
const [fieldDropIndex, setFieldDropIndex] = useState11(null);
|
|
14695
|
+
const [fieldDropSlots, setFieldDropSlots] = useState11([]);
|
|
14696
|
+
const [fieldDragging, setFieldDragging] = useState11(false);
|
|
15276
14697
|
const clearFormPickRef = useRef9(clearFormPick);
|
|
15277
14698
|
clearFormPickRef.current = clearFormPick;
|
|
15278
14699
|
useEffect12(() => {
|
|
@@ -15338,6 +14759,13 @@ function OhhwellsBridge() {
|
|
|
15338
14759
|
const [isItemDragging, setIsItemDragging] = useState11(false);
|
|
15339
14760
|
const [isFooterFrameSelection, setIsFooterFrameSelection] = useState11(false);
|
|
15340
14761
|
isFooterFrameSelectionRef.current = isFooterFrameSelection;
|
|
14762
|
+
const [floatingPanel, setFloatingPanel] = useState11(null);
|
|
14763
|
+
const floatingPanelOpenRef = useRef9(false);
|
|
14764
|
+
floatingPanelOpenRef.current = floatingPanel !== null;
|
|
14765
|
+
const [floatingPanelPos, setFloatingPanelPos] = useState11(null);
|
|
14766
|
+
const [logoSizeDraft, setLogoSizeDraft] = useState11(null);
|
|
14767
|
+
const [editorViewport, setEditorViewport] = useState11("desktop");
|
|
14768
|
+
const [parentScrollSnap, setParentScrollSnap] = useState11(null);
|
|
15341
14769
|
const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = useState11(null);
|
|
15342
14770
|
const [footerHeadingVisible, setFooterHeadingVisible] = useState11(null);
|
|
15343
14771
|
const footerDragRef = useRef9(null);
|
|
@@ -15352,16 +14780,7 @@ function OhhwellsBridge() {
|
|
|
15352
14780
|
const addNavAfterAnchorRef = useRef9(null);
|
|
15353
14781
|
const editContentRef = useRef9({});
|
|
15354
14782
|
const aiSectionsRef = useRef9("");
|
|
15355
|
-
const brandKitRef = useRef9("");
|
|
15356
|
-
const stylesRef = useRef9("");
|
|
15357
14783
|
const pendingDeleteUndoRef = useRef9(null);
|
|
15358
|
-
const [floatingPanel, setFloatingPanel] = useState11(null);
|
|
15359
|
-
const floatingPanelOpenRef = useRef9(false);
|
|
15360
|
-
const setFloatingPanelRef = useRef9(setFloatingPanel);
|
|
15361
|
-
const [floatingPanelPos, setFloatingPanelPos] = useState11(null);
|
|
15362
|
-
const [logoSizeDraft, setLogoSizeDraft] = useState11(null);
|
|
15363
|
-
const [editorViewport, setEditorViewport] = useState11("desktop");
|
|
15364
|
-
const [parentScrollSnap, setParentScrollSnap] = useState11(null);
|
|
15365
14784
|
const [sitePages, setSitePages] = useState11([]);
|
|
15366
14785
|
const [sectionsByPath, setSectionsByPath] = useState11({});
|
|
15367
14786
|
const sectionsPrefetchGenRef = useRef9(0);
|
|
@@ -15370,18 +14789,7 @@ function OhhwellsBridge() {
|
|
|
15370
14789
|
const linkPopoverOpenRef = useRef9(false);
|
|
15371
14790
|
const linkPopoverGraceUntilRef = useRef9(0);
|
|
15372
14791
|
setLinkPopoverRef.current = setLinkPopover;
|
|
15373
|
-
setFloatingPanelRef.current = setFloatingPanel;
|
|
15374
14792
|
linkPopoverSessionRef.current = linkPopover;
|
|
15375
|
-
floatingPanelOpenRef.current = Boolean(floatingPanel);
|
|
15376
|
-
useEffect12(() => {
|
|
15377
|
-
const syncViewport = () => {
|
|
15378
|
-
const next = window.innerWidth <= 480 ? "mobile" : "desktop";
|
|
15379
|
-
setEditorViewport((prev) => prev === next ? prev : next);
|
|
15380
|
-
};
|
|
15381
|
-
syncViewport();
|
|
15382
|
-
window.addEventListener("resize", syncViewport);
|
|
15383
|
-
return () => window.removeEventListener("resize", syncViewport);
|
|
15384
|
-
}, []);
|
|
15385
14793
|
const {
|
|
15386
14794
|
navDragRef,
|
|
15387
14795
|
navDropSlots,
|
|
@@ -16466,6 +15874,25 @@ function OhhwellsBridge() {
|
|
|
16466
15874
|
setLogoSizeDraft(null);
|
|
16467
15875
|
deselectRef.current();
|
|
16468
15876
|
}, []);
|
|
15877
|
+
useEffect12(() => {
|
|
15878
|
+
const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
|
|
15879
|
+
if (!session || !logoSizeDraft) {
|
|
15880
|
+
postToParentRef.current({ type: "ow:logo-size-panel", open: false });
|
|
15881
|
+
return;
|
|
15882
|
+
}
|
|
15883
|
+
postToParentRef.current({
|
|
15884
|
+
type: "ow:logo-size-panel",
|
|
15885
|
+
open: true,
|
|
15886
|
+
title: session.title,
|
|
15887
|
+
context: session.context ?? "",
|
|
15888
|
+
placement: session.placement,
|
|
15889
|
+
viewport: editorViewport,
|
|
15890
|
+
mobileFollowing: logoSizeDraft.mobileFollowing,
|
|
15891
|
+
sizePx: editorViewport === "mobile" && !logoSizeDraft.mobileFollowing ? logoSizeDraft.mobilePx : logoSizeDraft.desktopPx,
|
|
15892
|
+
min: LOGO_SIZE_MIN,
|
|
15893
|
+
max: LOGO_SIZE_MAX
|
|
15894
|
+
});
|
|
15895
|
+
}, [floatingPanel, logoSizeDraft, editorViewport]);
|
|
16469
15896
|
const persistLogoSizeDraft = useCallback7(
|
|
16470
15897
|
(placement, draft) => {
|
|
16471
15898
|
const desktopKey = LOGO_SIZE_DESKTOP_KEYS[placement];
|
|
@@ -16624,27 +16051,15 @@ function OhhwellsBridge() {
|
|
|
16624
16051
|
}
|
|
16625
16052
|
const applyContent = (content) => {
|
|
16626
16053
|
const imageLoads = [];
|
|
16627
|
-
if (typeof content[BRAND_KIT_KEY] === "string") {
|
|
16628
|
-
brandKitRef.current = content[BRAND_KIT_KEY];
|
|
16629
|
-
applyBrandToDom(parseBrandKit(content[BRAND_KIT_KEY]));
|
|
16630
|
-
}
|
|
16631
16054
|
if (typeof content[AI_SECTIONS_KEY] === "string") {
|
|
16632
16055
|
aiSectionsRef.current = content[AI_SECTIONS_KEY];
|
|
16633
16056
|
applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
|
|
16634
16057
|
}
|
|
16635
|
-
if (typeof content[STYLE_STORE_KEY] === "string") {
|
|
16636
|
-
stylesRef.current = content[STYLE_STORE_KEY];
|
|
16637
|
-
applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
|
|
16638
|
-
}
|
|
16639
|
-
applyBrandChrome(content);
|
|
16640
16058
|
for (const [key, val] of Object.entries(content)) {
|
|
16641
16059
|
if (key === "__ohw_sections") continue;
|
|
16642
16060
|
if (key === AI_SECTIONS_KEY) continue;
|
|
16643
16061
|
if (key === LOGO_PLACEHOLDER_KEY) continue;
|
|
16644
16062
|
if (LOGO_IMAGE_KEYS.includes(key)) continue;
|
|
16645
|
-
if (key === BRAND_KIT_KEY) continue;
|
|
16646
|
-
if (key === STYLE_STORE_KEY) continue;
|
|
16647
|
-
if (BRAND_CHROME_KEYS.has(key)) continue;
|
|
16648
16063
|
if (applyVideoSettingNode(key, val)) continue;
|
|
16649
16064
|
if (applyCarouselNode(key, val)) continue;
|
|
16650
16065
|
document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
|
|
@@ -16702,9 +16117,7 @@ function OhhwellsBridge() {
|
|
|
16702
16117
|
let cancelled = false;
|
|
16703
16118
|
setFetchState("loading");
|
|
16704
16119
|
const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
|
|
16705
|
-
|
|
16706
|
-
fetchedContentPaths.add(`${subdomain}::${initialPath}`);
|
|
16707
|
-
fetch(`${apiUrl}/api/public/sites/${subdomain}/content?path=${encodeURIComponent(initialPath)}`, { cache: "no-store" }).then((r2) => r2.ok ? r2.json() : null).then((data) => {
|
|
16120
|
+
fetch(`${apiUrl}/api/public/sites/${subdomain}/content`, { cache: "no-store" }).then((r2) => r2.ok ? r2.json() : null).then((data) => {
|
|
16708
16121
|
if (cancelled) return;
|
|
16709
16122
|
const content = data?.content ?? {};
|
|
16710
16123
|
contentCache.set(subdomain, content);
|
|
@@ -16733,6 +16146,7 @@ function OhhwellsBridge() {
|
|
|
16733
16146
|
e.preventDefault();
|
|
16734
16147
|
e.stopPropagation();
|
|
16735
16148
|
if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
|
|
16149
|
+
setFieldDropSlots(buildFieldDropSlots(session.form, session.key));
|
|
16736
16150
|
setFieldDropIndex(resolveIndex(session.form, e.clientY));
|
|
16737
16151
|
};
|
|
16738
16152
|
const onDrop = (e) => {
|
|
@@ -16747,6 +16161,8 @@ function OhhwellsBridge() {
|
|
|
16747
16161
|
setFormPickRect(session.form.getBoundingClientRect());
|
|
16748
16162
|
fieldDragRef.current = null;
|
|
16749
16163
|
setFieldDropIndex(null);
|
|
16164
|
+
setFieldDropSlots([]);
|
|
16165
|
+
setFieldDragging(false);
|
|
16750
16166
|
};
|
|
16751
16167
|
window.addEventListener("dragover", onDragOver, true);
|
|
16752
16168
|
window.addEventListener("drop", onDrop, true);
|
|
@@ -16754,7 +16170,7 @@ function OhhwellsBridge() {
|
|
|
16754
16170
|
window.removeEventListener("dragover", onDragOver, true);
|
|
16755
16171
|
window.removeEventListener("drop", onDrop, true);
|
|
16756
16172
|
};
|
|
16757
|
-
}, [isEditMode, persistFields, selectField]);
|
|
16173
|
+
}, [buildFieldDropSlots, isEditMode, persistFields, selectField]);
|
|
16758
16174
|
useEffect12(() => {
|
|
16759
16175
|
if (!isEditMode) return;
|
|
16760
16176
|
const mark = () => document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
@@ -16821,21 +16237,10 @@ function OhhwellsBridge() {
|
|
|
16821
16237
|
initSectionInstancesFromContent(content, window.location.pathname);
|
|
16822
16238
|
observer?.disconnect();
|
|
16823
16239
|
try {
|
|
16824
|
-
applyBrandChrome(content);
|
|
16825
|
-
if (typeof content[BRAND_KIT_KEY] === "string") {
|
|
16826
|
-
applyBrandToDom(parseBrandKit(content[BRAND_KIT_KEY]));
|
|
16827
|
-
}
|
|
16828
|
-
if (typeof content[STYLE_STORE_KEY] === "string") {
|
|
16829
|
-
applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
|
|
16830
|
-
}
|
|
16831
16240
|
for (const [key, val] of Object.entries(content)) {
|
|
16832
16241
|
if (key === "__ohw_sections") continue;
|
|
16833
16242
|
if (key === LOGO_PLACEHOLDER_KEY) continue;
|
|
16834
16243
|
if (LOGO_IMAGE_KEYS.includes(key)) continue;
|
|
16835
|
-
if (key === BRAND_KIT_KEY) continue;
|
|
16836
|
-
if (key === STYLE_STORE_KEY) continue;
|
|
16837
|
-
if (key === STYLE_STORE_KEY) continue;
|
|
16838
|
-
if (BRAND_CHROME_KEYS.has(key)) continue;
|
|
16839
16244
|
if (applyVideoSettingNode(key, val)) continue;
|
|
16840
16245
|
if (applyCarouselNode(key, val)) continue;
|
|
16841
16246
|
document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
|
|
@@ -16878,17 +16283,6 @@ function OhhwellsBridge() {
|
|
|
16878
16283
|
debounceTimer = setTimeout(applyFromCache, 150);
|
|
16879
16284
|
};
|
|
16880
16285
|
applyFromCache();
|
|
16881
|
-
const pathCacheKey = `${subdomain}::${pathname}`;
|
|
16882
|
-
if (!fetchedContentPaths.has(pathCacheKey)) {
|
|
16883
|
-
fetchedContentPaths.add(pathCacheKey);
|
|
16884
|
-
const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
|
|
16885
|
-
fetch(`${apiUrl}/api/public/sites/${subdomain}/content?path=${encodeURIComponent(pathname)}`, { cache: "no-store" }).then((r2) => r2.ok ? r2.json() : null).then((data) => {
|
|
16886
|
-
if (!data?.content) return;
|
|
16887
|
-
contentCache.set(subdomain, data.content);
|
|
16888
|
-
applyFromCache();
|
|
16889
|
-
}).catch(() => {
|
|
16890
|
-
});
|
|
16891
|
-
}
|
|
16892
16286
|
observer = new MutationObserver(scheduleApply);
|
|
16893
16287
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
16894
16288
|
return () => {
|
|
@@ -16982,31 +16376,26 @@ function OhhwellsBridge() {
|
|
|
16982
16376
|
}, [isEditMode, pathname, subdomain, fetchState, resyncSelectedNavigationItem]);
|
|
16983
16377
|
useEffect12(() => {
|
|
16984
16378
|
if (!isEditMode) return;
|
|
16985
|
-
let lastPosted = 0;
|
|
16986
16379
|
const measure = () => {
|
|
16987
16380
|
const h = document.body.scrollHeight;
|
|
16988
|
-
if (h > 50
|
|
16989
|
-
lastPosted = h;
|
|
16990
|
-
postToParent2({ type: "ow:height", height: h });
|
|
16991
|
-
}
|
|
16992
|
-
};
|
|
16993
|
-
let raf = null;
|
|
16994
|
-
const schedule = () => {
|
|
16995
|
-
if (raf != null) return;
|
|
16996
|
-
raf = requestAnimationFrame(() => {
|
|
16997
|
-
raf = null;
|
|
16998
|
-
measure();
|
|
16999
|
-
});
|
|
16381
|
+
if (h > 50) postToParent2({ type: "ow:height", height: h });
|
|
17000
16382
|
};
|
|
17001
16383
|
const t1 = setTimeout(measure, 50);
|
|
17002
16384
|
const t2 = setTimeout(measure, 500);
|
|
17003
|
-
|
|
17004
|
-
|
|
16385
|
+
let lastWidth = window.innerWidth;
|
|
16386
|
+
let resizeTimer = null;
|
|
16387
|
+
const handleResize = () => {
|
|
16388
|
+
if (window.innerWidth === lastWidth) return;
|
|
16389
|
+
lastWidth = window.innerWidth;
|
|
16390
|
+
if (resizeTimer) clearTimeout(resizeTimer);
|
|
16391
|
+
resizeTimer = setTimeout(measure, 150);
|
|
16392
|
+
};
|
|
16393
|
+
window.addEventListener("resize", handleResize);
|
|
17005
16394
|
return () => {
|
|
17006
16395
|
clearTimeout(t1);
|
|
17007
16396
|
clearTimeout(t2);
|
|
17008
|
-
if (
|
|
17009
|
-
|
|
16397
|
+
if (resizeTimer) clearTimeout(resizeTimer);
|
|
16398
|
+
window.removeEventListener("resize", handleResize);
|
|
17010
16399
|
};
|
|
17011
16400
|
}, [pathname, isEditMode, postToParent2]);
|
|
17012
16401
|
useEffect12(() => {
|
|
@@ -17187,12 +16576,10 @@ function OhhwellsBridge() {
|
|
|
17187
16576
|
return;
|
|
17188
16577
|
}
|
|
17189
16578
|
const target = e.target;
|
|
17190
|
-
if (target.closest("[data-ohw-ai-review]")) return;
|
|
17191
16579
|
if (target.closest("[data-ohw-toolbar]")) return;
|
|
17192
16580
|
if (target.closest("[data-ohw-state-toggle]")) return;
|
|
17193
16581
|
if (target.closest("[data-ohw-max-badge]")) return;
|
|
17194
16582
|
if (isInsideLinkEditor(target)) return;
|
|
17195
|
-
if (isInsideFloatingPanel(target)) return;
|
|
17196
16583
|
if (target.closest("[data-ohw-form-toolbar]")) return;
|
|
17197
16584
|
if (target.closest(
|
|
17198
16585
|
'[data-ohw-field-toolbar], [data-ohw-field-type-picker], [data-radix-popper-content-wrapper], [role="menu"], [data-slot="dropdown-menu-content"]'
|
|
@@ -17466,12 +16853,10 @@ function OhhwellsBridge() {
|
|
|
17466
16853
|
};
|
|
17467
16854
|
const handleDblClick = (e) => {
|
|
17468
16855
|
const target = e.target;
|
|
17469
|
-
if (target.closest("[data-ohw-ai-review]")) return;
|
|
17470
16856
|
if (target.closest("[data-ohw-toolbar]")) return;
|
|
17471
16857
|
if (target.closest("[data-ohw-state-toggle]")) return;
|
|
17472
16858
|
if (target.closest("[data-ohw-max-badge]")) return;
|
|
17473
16859
|
if (isInsideLinkEditor(target)) return;
|
|
17474
|
-
if (isInsideFloatingPanel(target)) return;
|
|
17475
16860
|
if (target.closest('[data-ohw-edit-chrome], [data-ohw-item-interaction], [data-ohw-drag-handle-container], [data-slot="drag-handle"]')) {
|
|
17476
16861
|
return;
|
|
17477
16862
|
}
|
|
@@ -17512,14 +16897,11 @@ function OhhwellsBridge() {
|
|
|
17512
16897
|
setSiblingHintRects([]);
|
|
17513
16898
|
return;
|
|
17514
16899
|
}
|
|
17515
|
-
if (document.documentElement.hasAttribute("data-ohw-panel-dragging") ||
|
|
16900
|
+
if (document.documentElement.hasAttribute("data-ohw-panel-dragging") || target.closest("[data-ohw-floating-panel]")) {
|
|
17516
16901
|
hoveredItemElRef.current = null;
|
|
17517
16902
|
setHoveredItemRect(null);
|
|
17518
16903
|
hoveredNavContainerRef.current = null;
|
|
17519
16904
|
setHoveredNavContainerRect(null);
|
|
17520
|
-
siblingHintElRef.current = null;
|
|
17521
|
-
setSiblingHintRect(null);
|
|
17522
|
-
setSiblingHintRects([]);
|
|
17523
16905
|
return;
|
|
17524
16906
|
}
|
|
17525
16907
|
{
|
|
@@ -17628,6 +17010,7 @@ function OhhwellsBridge() {
|
|
|
17628
17010
|
hoveredNavContainerRef.current = null;
|
|
17629
17011
|
setHoveredNavContainerRect(null);
|
|
17630
17012
|
hoveredItemElRef.current = editable;
|
|
17013
|
+
setHoveredItemRect(editable.getBoundingClientRect());
|
|
17631
17014
|
}
|
|
17632
17015
|
}
|
|
17633
17016
|
}
|
|
@@ -17924,7 +17307,7 @@ function OhhwellsBridge() {
|
|
|
17924
17307
|
}
|
|
17925
17308
|
};
|
|
17926
17309
|
const probeImageAt = (clientX, clientY, isDragOver = false, fromParentViewport = false) => {
|
|
17927
|
-
if (linkPopoverOpenRef.current
|
|
17310
|
+
if (linkPopoverOpenRef.current) {
|
|
17928
17311
|
if (hoveredImageRef.current) {
|
|
17929
17312
|
hoveredImageRef.current = null;
|
|
17930
17313
|
hoveredImageHasTextOverlapRef.current = false;
|
|
@@ -18178,7 +17561,7 @@ function OhhwellsBridge() {
|
|
|
18178
17561
|
}
|
|
18179
17562
|
};
|
|
18180
17563
|
const probeHoverCardsAt = (clientX, clientY, fromParentViewport = false) => {
|
|
18181
|
-
if (linkPopoverOpenRef.current ||
|
|
17564
|
+
if (linkPopoverOpenRef.current || document.documentElement.hasAttribute("data-ohw-section-picking")) {
|
|
18182
17565
|
if (activeStateElRef.current) {
|
|
18183
17566
|
activeStateElRef.current.removeAttribute("data-ohw-state-hovered");
|
|
18184
17567
|
activeStateElRef.current = null;
|
|
@@ -18253,7 +17636,8 @@ function OhhwellsBridge() {
|
|
|
18253
17636
|
};
|
|
18254
17637
|
const handleMouseMove = (e) => {
|
|
18255
17638
|
const { clientX, clientY } = e;
|
|
18256
|
-
if (
|
|
17639
|
+
if (pointOwnedByFloatingPanel(clientX, clientY)) return;
|
|
17640
|
+
if (isOverEditorChrome(clientX, clientY)) {
|
|
18257
17641
|
document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
|
|
18258
17642
|
formHoverElRef.current = null;
|
|
18259
17643
|
setFormHoverRect(null);
|
|
@@ -18261,12 +17645,6 @@ function OhhwellsBridge() {
|
|
|
18261
17645
|
setHoveredItemRect(null);
|
|
18262
17646
|
hoveredNavContainerRef.current = null;
|
|
18263
17647
|
setHoveredNavContainerRect(null);
|
|
18264
|
-
siblingHintElRef.current = null;
|
|
18265
|
-
setSiblingHintRect(null);
|
|
18266
|
-
setSiblingHintRects([]);
|
|
18267
|
-
dismissImageHover();
|
|
18268
|
-
clearImageHover();
|
|
18269
|
-
setSectionGap(null);
|
|
18270
17648
|
return;
|
|
18271
17649
|
}
|
|
18272
17650
|
probeSectionGapAt(clientX, clientY);
|
|
@@ -18277,11 +17655,7 @@ function OhhwellsBridge() {
|
|
|
18277
17655
|
if (e.data?.type !== "ow:pointer-sync") return;
|
|
18278
17656
|
const { clientX, clientY } = e.data;
|
|
18279
17657
|
if (typeof clientX !== "number" || typeof clientY !== "number") return;
|
|
18280
|
-
if (
|
|
18281
|
-
dismissImageHover();
|
|
18282
|
-
clearImageHover();
|
|
18283
|
-
return;
|
|
18284
|
-
}
|
|
17658
|
+
if (pointOwnedByFloatingPanel(clientX, clientY)) return;
|
|
18285
17659
|
probeSectionGapAt(clientX, clientY);
|
|
18286
17660
|
probeImageAt(clientX, clientY);
|
|
18287
17661
|
probeHoverCardsAt(clientX, clientY);
|
|
@@ -18527,19 +17901,10 @@ function OhhwellsBridge() {
|
|
|
18527
17901
|
if (e.data?.type !== "ow:hydrate") return;
|
|
18528
17902
|
const content = e.data.content;
|
|
18529
17903
|
if (!content) return;
|
|
18530
|
-
if (typeof content[BRAND_KIT_KEY] === "string") {
|
|
18531
|
-
brandKitRef.current = content[BRAND_KIT_KEY];
|
|
18532
|
-
applyBrandToDom(parseBrandKit(content[BRAND_KIT_KEY]));
|
|
18533
|
-
}
|
|
18534
17904
|
if (typeof content[AI_SECTIONS_KEY] === "string") {
|
|
18535
17905
|
aiSectionsRef.current = content[AI_SECTIONS_KEY];
|
|
18536
17906
|
applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
|
|
18537
17907
|
}
|
|
18538
|
-
if (typeof content[STYLE_STORE_KEY] === "string") {
|
|
18539
|
-
stylesRef.current = content[STYLE_STORE_KEY];
|
|
18540
|
-
applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
|
|
18541
|
-
}
|
|
18542
|
-
applyBrandChrome(content);
|
|
18543
17908
|
let sectionsJson = null;
|
|
18544
17909
|
for (const [key, val] of Object.entries(content)) {
|
|
18545
17910
|
if (key === "__ohw_sections") {
|
|
@@ -18549,9 +17914,6 @@ function OhhwellsBridge() {
|
|
|
18549
17914
|
if (key === AI_SECTIONS_KEY) continue;
|
|
18550
17915
|
if (key === LOGO_PLACEHOLDER_KEY) continue;
|
|
18551
17916
|
if (LOGO_IMAGE_KEYS.includes(key) && !String(val ?? "").trim()) continue;
|
|
18552
|
-
if (key === BRAND_KIT_KEY) continue;
|
|
18553
|
-
if (key === STYLE_STORE_KEY) continue;
|
|
18554
|
-
if (BRAND_CHROME_KEYS.has(key)) continue;
|
|
18555
17917
|
if (applyVideoSettingNode(key, val)) continue;
|
|
18556
17918
|
if (applyCarouselNode(key, val)) continue;
|
|
18557
17919
|
document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
|
|
@@ -18653,10 +18015,7 @@ function OhhwellsBridge() {
|
|
|
18653
18015
|
const payload = e.data.payload;
|
|
18654
18016
|
if (!payload || typeof payload.id !== "string" || !isRenderableTree(payload.tree)) return;
|
|
18655
18017
|
const previous = aiSectionsRef.current;
|
|
18656
|
-
const nextState = applyTreeToState(parseAiSectionsState(previous),
|
|
18657
|
-
...payload,
|
|
18658
|
-
path: payload.path ?? window.location.pathname
|
|
18659
|
-
});
|
|
18018
|
+
const nextState = applyTreeToState(parseAiSectionsState(previous), payload);
|
|
18660
18019
|
const nextValue = serializeAiSectionsState(nextState);
|
|
18661
18020
|
aiSectionsRef.current = nextValue;
|
|
18662
18021
|
applyAiSectionsToDom(nextState);
|
|
@@ -18693,42 +18052,12 @@ function OhhwellsBridge() {
|
|
|
18693
18052
|
const value = typeof e.data.value === "string" ? e.data.value : "";
|
|
18694
18053
|
aiSectionsRef.current = value;
|
|
18695
18054
|
applyAiSectionsToDom(parseAiSectionsState(value));
|
|
18696
|
-
applyStylesToDom(parseStyleStore(stylesRef.current));
|
|
18697
18055
|
const restoredHeight = document.documentElement.scrollHeight;
|
|
18698
18056
|
if (restoredHeight > 50) postToParentRef.current({ type: "ow:height", height: restoredHeight });
|
|
18699
18057
|
postToParentRef.current({ type: "ow:change", nodes: [{ key: AI_SECTIONS_KEY, text: value }] });
|
|
18700
18058
|
postAiSectionsChanged();
|
|
18701
18059
|
};
|
|
18702
18060
|
window.addEventListener("message", handleAiSetSections);
|
|
18703
|
-
const handleAiSetBrand = (e) => {
|
|
18704
|
-
if (e.data?.type !== "ow:ai-set-brand") return;
|
|
18705
|
-
const value = typeof e.data.value === "string" ? e.data.value : "";
|
|
18706
|
-
const previous = brandKitRef.current;
|
|
18707
|
-
brandKitRef.current = value;
|
|
18708
|
-
applyBrandToDom(parseBrandKit(value));
|
|
18709
|
-
if (aiSectionsRef.current) applyAiSectionsToDom(parseAiSectionsState(aiSectionsRef.current));
|
|
18710
|
-
applyStylesToDom(parseStyleStore(stylesRef.current));
|
|
18711
|
-
postToParentRef.current({ type: "ow:change", nodes: [{ key: BRAND_KIT_KEY, text: value }] });
|
|
18712
|
-
postToParentRef.current({ type: "ow:ai-brand-applied", previous, value });
|
|
18713
|
-
};
|
|
18714
|
-
window.addEventListener("message", handleAiSetBrand);
|
|
18715
|
-
const handleAiSetStyles = (e) => {
|
|
18716
|
-
if (e.data?.type !== "ow:ai-set-styles") return;
|
|
18717
|
-
const value = typeof e.data.value === "string" ? e.data.value : "";
|
|
18718
|
-
const previous = stylesRef.current;
|
|
18719
|
-
stylesRef.current = value;
|
|
18720
|
-
applyStylesToDom(parseStyleStore(value));
|
|
18721
|
-
postToParentRef.current({ type: "ow:change", nodes: [{ key: STYLE_STORE_KEY, text: value }] });
|
|
18722
|
-
postToParentRef.current({ type: "ow:ai-styles-applied", previous, value });
|
|
18723
|
-
};
|
|
18724
|
-
window.addEventListener("message", handleAiSetStyles);
|
|
18725
|
-
const handleGetBrand = (e) => {
|
|
18726
|
-
if (e.data?.type !== "ow:get-brand") return;
|
|
18727
|
-
const template = deriveTemplateBrand();
|
|
18728
|
-
const value = brandKitRef.current || (template ? JSON.stringify(template) : "");
|
|
18729
|
-
postToParentRef.current({ type: "ow:brand-value", value });
|
|
18730
|
-
};
|
|
18731
|
-
window.addEventListener("message", handleGetBrand);
|
|
18732
18061
|
const handleDeactivate = (e) => {
|
|
18733
18062
|
if (e.data?.type !== "ow:deactivate") return;
|
|
18734
18063
|
if (Date.now() < linkPopoverGraceUntilRef.current) return;
|
|
@@ -18737,12 +18066,6 @@ function OhhwellsBridge() {
|
|
|
18737
18066
|
closeLinkPopoverRef.current();
|
|
18738
18067
|
return;
|
|
18739
18068
|
}
|
|
18740
|
-
if (floatingPanelOpenRef.current) {
|
|
18741
|
-
setFloatingPanelRef.current(null);
|
|
18742
|
-
deselectRef.current();
|
|
18743
|
-
deactivateRef.current();
|
|
18744
|
-
return;
|
|
18745
|
-
}
|
|
18746
18069
|
deselectRef.current();
|
|
18747
18070
|
deactivateRef.current();
|
|
18748
18071
|
};
|
|
@@ -18989,12 +18312,6 @@ function OhhwellsBridge() {
|
|
|
18989
18312
|
if (aiSectionsRef.current) {
|
|
18990
18313
|
nodes.push({ key: AI_SECTIONS_KEY, type: "sections", text: aiSectionsRef.current });
|
|
18991
18314
|
}
|
|
18992
|
-
if (stylesRef.current) {
|
|
18993
|
-
nodes.push({ key: STYLE_STORE_KEY, type: "styles", text: stylesRef.current });
|
|
18994
|
-
}
|
|
18995
|
-
if (brandKitRef.current) {
|
|
18996
|
-
nodes.push({ key: BRAND_KIT_KEY, type: "brand", text: brandKitRef.current });
|
|
18997
|
-
}
|
|
18998
18315
|
document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
|
|
18999
18316
|
const formKey = formKeyOf(form);
|
|
19000
18317
|
if (!formKey) return;
|
|
@@ -19012,12 +18329,8 @@ function OhhwellsBridge() {
|
|
|
19012
18329
|
if (inserted) {
|
|
19013
18330
|
const tracker = getSectionsTracker();
|
|
19014
18331
|
postToParentRef.current({ type: "ow:change", nodes: [{ key: "__ohw_sections", text: tracker.textContent ?? "[]" }] });
|
|
19015
|
-
const
|
|
19016
|
-
|
|
19017
|
-
if (h > 50) postToParentRef.current({ type: "ow:height", height: h });
|
|
19018
|
-
};
|
|
19019
|
-
reportHeight();
|
|
19020
|
-
setTimeout(reportHeight, 500);
|
|
18332
|
+
const h = document.documentElement.scrollHeight;
|
|
18333
|
+
if (h > 50) postToParentRef.current({ type: "ow:height", height: h });
|
|
19021
18334
|
}
|
|
19022
18335
|
};
|
|
19023
18336
|
const handleSwitchSchedule = (e) => {
|
|
@@ -19404,9 +18717,6 @@ function OhhwellsBridge() {
|
|
|
19404
18717
|
window.removeEventListener("message", handleAiApplyTree);
|
|
19405
18718
|
window.removeEventListener("message", handleAiDeleteSection);
|
|
19406
18719
|
window.removeEventListener("message", handleAiSetSections);
|
|
19407
|
-
window.removeEventListener("message", handleAiSetBrand);
|
|
19408
|
-
window.removeEventListener("message", handleAiSetStyles);
|
|
19409
|
-
window.removeEventListener("message", handleGetBrand);
|
|
19410
18720
|
window.removeEventListener("message", handleDeactivate);
|
|
19411
18721
|
window.removeEventListener("message", handleToastAction);
|
|
19412
18722
|
window.removeEventListener("message", handleFormCount);
|
|
@@ -19613,7 +18923,7 @@ function OhhwellsBridge() {
|
|
|
19613
18923
|
postToParent2({
|
|
19614
18924
|
type: "ow:ready",
|
|
19615
18925
|
version: "1",
|
|
19616
|
-
bridgeVersion: "0.1.
|
|
18926
|
+
bridgeVersion: "0.1.64",
|
|
19617
18927
|
path: pathname,
|
|
19618
18928
|
nodes: collectEditableNodes(editContentRef.current),
|
|
19619
18929
|
sections
|
|
@@ -19667,6 +18977,44 @@ function OhhwellsBridge() {
|
|
|
19667
18977
|
if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
|
|
19668
18978
|
refreshActiveCommandsRef.current();
|
|
19669
18979
|
}, []);
|
|
18980
|
+
useEffect12(() => {
|
|
18981
|
+
const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
|
|
18982
|
+
if (!session || !logoSizeDraft) return;
|
|
18983
|
+
const onPanelAction = (e) => {
|
|
18984
|
+
const type = e.data?.type;
|
|
18985
|
+
if (type === "ow:logo-size-close") {
|
|
18986
|
+
closeFloatingPanelAndDeselect();
|
|
18987
|
+
return;
|
|
18988
|
+
}
|
|
18989
|
+
if (type === "ow:logo-size-update-everywhere") {
|
|
18990
|
+
postToParentRef.current({ type: "ow:open-logo-settings", ...readLogoIdentityFromDom() });
|
|
18991
|
+
return;
|
|
18992
|
+
}
|
|
18993
|
+
if (type === "ow:logo-size-customize-mobile" || type === "ow:logo-size-reset-mobile") {
|
|
18994
|
+
const following = type === "ow:logo-size-reset-mobile";
|
|
18995
|
+
const next2 = {
|
|
18996
|
+
...logoSizeDraft,
|
|
18997
|
+
mobileFollowing: following,
|
|
18998
|
+
mobilePx: logoSizeDraft.desktopPx
|
|
18999
|
+
};
|
|
19000
|
+
setLogoSizeDraft(next2);
|
|
19001
|
+
persistLogoSizeDraft(session.placement, next2);
|
|
19002
|
+
return;
|
|
19003
|
+
}
|
|
19004
|
+
if (type !== "ow:logo-size-set") return;
|
|
19005
|
+
const px = Number(e.data.px);
|
|
19006
|
+
if (!Number.isFinite(px)) return;
|
|
19007
|
+
const next = editorViewport === "mobile" ? { ...logoSizeDraft, mobilePx: px, mobileFollowing: false } : {
|
|
19008
|
+
...logoSizeDraft,
|
|
19009
|
+
desktopPx: px,
|
|
19010
|
+
mobilePx: logoSizeDraft.mobileFollowing ? px : logoSizeDraft.mobilePx
|
|
19011
|
+
};
|
|
19012
|
+
setLogoSizeDraft(next);
|
|
19013
|
+
persistLogoSizeDraft(session.placement, next);
|
|
19014
|
+
};
|
|
19015
|
+
window.addEventListener("message", onPanelAction);
|
|
19016
|
+
return () => window.removeEventListener("message", onPanelAction);
|
|
19017
|
+
}, [floatingPanel, logoSizeDraft, editorViewport, persistLogoSizeDraft, closeFloatingPanelAndDeselect]);
|
|
19670
19018
|
const handleStateChange = useCallback7((state) => {
|
|
19671
19019
|
if (!activeStateElRef.current) return;
|
|
19672
19020
|
const el = activeStateElRef.current;
|
|
@@ -20008,10 +19356,10 @@ function OhhwellsBridge() {
|
|
|
20008
19356
|
[postToParent2]
|
|
20009
19357
|
);
|
|
20010
19358
|
return bridgeRoot ? createPortal2(
|
|
20011
|
-
/* @__PURE__ */
|
|
20012
|
-
/* @__PURE__ */
|
|
20013
|
-
isEditMode && /* @__PURE__ */
|
|
20014
|
-
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */
|
|
19359
|
+
/* @__PURE__ */ jsxs20(Fragment8, { children: [
|
|
19360
|
+
/* @__PURE__ */ jsx33("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
|
|
19361
|
+
isEditMode && /* @__PURE__ */ jsx33(AiSectionOverlay, { postToParent: postToParent2, apiRef: aiSectionApiRef }),
|
|
19362
|
+
Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ jsx33(
|
|
20015
19363
|
MediaOverlay,
|
|
20016
19364
|
{
|
|
20017
19365
|
hover: { key, rect, elementType: "image", isDragOver: false, hasTextOverlap: false },
|
|
@@ -20022,7 +19370,7 @@ function OhhwellsBridge() {
|
|
|
20022
19370
|
},
|
|
20023
19371
|
`uploading-${key}`
|
|
20024
19372
|
)),
|
|
20025
|
-
mediaHover && !(mediaHover.key in uploadingRects) && /* @__PURE__ */
|
|
19373
|
+
mediaHover && !(mediaHover.key in uploadingRects) && /* @__PURE__ */ jsx33(
|
|
20026
19374
|
MediaOverlay,
|
|
20027
19375
|
{
|
|
20028
19376
|
hover: mediaHover,
|
|
@@ -20031,11 +19379,11 @@ function OhhwellsBridge() {
|
|
|
20031
19379
|
onVideoSettingsChange: handleVideoSettingsChange
|
|
20032
19380
|
}
|
|
20033
19381
|
),
|
|
20034
|
-
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */
|
|
20035
|
-
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */
|
|
20036
|
-
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */
|
|
20037
|
-
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */
|
|
20038
|
-
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */
|
|
19382
|
+
carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ jsx33(CarouselOverlay, { hover: carouselHover, onEdit: handleEditCarousel }),
|
|
19383
|
+
siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ jsx33(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
|
|
19384
|
+
siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ jsx33(ItemInteractionLayer, { rect, state: "sibling-hint" }, `sibling-hint-${i}`)),
|
|
19385
|
+
isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */ jsx33(ItemInteractionLayer, { rect: draggedItemRect, state: "dragging" }),
|
|
19386
|
+
isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ jsx33(
|
|
20039
19387
|
"div",
|
|
20040
19388
|
{
|
|
20041
19389
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -20045,7 +19393,7 @@ function OhhwellsBridge() {
|
|
|
20045
19393
|
width: slot.width,
|
|
20046
19394
|
height: slot.height
|
|
20047
19395
|
},
|
|
20048
|
-
children: /* @__PURE__ */
|
|
19396
|
+
children: /* @__PURE__ */ jsx33(
|
|
20049
19397
|
DropIndicator,
|
|
20050
19398
|
{
|
|
20051
19399
|
direction: slot.direction,
|
|
@@ -20056,7 +19404,7 @@ function OhhwellsBridge() {
|
|
|
20056
19404
|
},
|
|
20057
19405
|
`footer-drop-${slot.direction}-${slot.columnIndex}-${slot.insertIndex}-${i}`
|
|
20058
19406
|
)),
|
|
20059
|
-
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */
|
|
19407
|
+
isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ jsx33(
|
|
20060
19408
|
"div",
|
|
20061
19409
|
{
|
|
20062
19410
|
className: "pointer-events-none fixed z-2147483646",
|
|
@@ -20066,7 +19414,7 @@ function OhhwellsBridge() {
|
|
|
20066
19414
|
width: slot.width,
|
|
20067
19415
|
height: slot.height
|
|
20068
19416
|
},
|
|
20069
|
-
children: /* @__PURE__ */
|
|
19417
|
+
children: /* @__PURE__ */ jsx33(
|
|
20070
19418
|
DropIndicator,
|
|
20071
19419
|
{
|
|
20072
19420
|
direction: slot.direction,
|
|
@@ -20077,10 +19425,10 @@ function OhhwellsBridge() {
|
|
|
20077
19425
|
},
|
|
20078
19426
|
`nav-drop-${slot.direction}-${slot.parentId ?? "root"}-${slot.insertIndex}-${i}`
|
|
20079
19427
|
)),
|
|
20080
|
-
hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */
|
|
20081
|
-
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */
|
|
20082
|
-
hoveredTextRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */
|
|
20083
|
-
formPickRect && !isItemDragging && /* @__PURE__ */
|
|
19428
|
+
hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ jsx33(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
|
|
19429
|
+
hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ jsx33(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
|
|
19430
|
+
hoveredTextRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ jsx33(ItemInteractionLayer, { rect: hoveredTextRect, state: "hover" }),
|
|
19431
|
+
formPickRect && !isItemDragging && /* @__PURE__ */ jsx33(
|
|
20084
19432
|
ItemInteractionLayer,
|
|
20085
19433
|
{
|
|
20086
19434
|
rect: formPickRect,
|
|
@@ -20088,13 +19436,13 @@ function OhhwellsBridge() {
|
|
|
20088
19436
|
itemDragSurface: false,
|
|
20089
19437
|
toolbarAlign: "left",
|
|
20090
19438
|
chromeGap: 24,
|
|
20091
|
-
toolbar: fieldPickRect ? void 0 : /* @__PURE__ */
|
|
19439
|
+
toolbar: fieldPickRect ? void 0 : /* @__PURE__ */ jsxs20(
|
|
20092
19440
|
"div",
|
|
20093
19441
|
{
|
|
20094
19442
|
"data-ohw-form-toolbar": "",
|
|
20095
19443
|
className: "pointer-events-auto flex items-center gap-0.5 whitespace-nowrap rounded-lg border border-border bg-background p-1 shadow-md",
|
|
20096
19444
|
children: [
|
|
20097
|
-
/* @__PURE__ */
|
|
19445
|
+
/* @__PURE__ */ jsx33(
|
|
20098
19446
|
"button",
|
|
20099
19447
|
{
|
|
20100
19448
|
type: "button",
|
|
@@ -20102,11 +19450,11 @@ function OhhwellsBridge() {
|
|
|
20102
19450
|
className: "flex h-7 w-7 items-center justify-center rounded-md text-foreground transition-colors hover:bg-muted/80",
|
|
20103
19451
|
onClick: () => setFieldTypePickerOpen((open) => !open),
|
|
20104
19452
|
"data-ohw-add-field": "",
|
|
20105
|
-
children: /* @__PURE__ */
|
|
19453
|
+
children: /* @__PURE__ */ jsx33(Plus4, { size: 15, "aria-hidden": true })
|
|
20106
19454
|
}
|
|
20107
19455
|
),
|
|
20108
|
-
/* @__PURE__ */
|
|
20109
|
-
/* @__PURE__ */
|
|
19456
|
+
/* @__PURE__ */ jsx33("div", { className: "mx-0.5 h-5 w-px bg-border" }),
|
|
19457
|
+
/* @__PURE__ */ jsxs20(
|
|
20110
19458
|
"button",
|
|
20111
19459
|
{
|
|
20112
19460
|
type: "button",
|
|
@@ -20121,11 +19469,11 @@ function OhhwellsBridge() {
|
|
|
20121
19469
|
});
|
|
20122
19470
|
},
|
|
20123
19471
|
children: [
|
|
20124
|
-
/* @__PURE__ */
|
|
19472
|
+
/* @__PURE__ */ jsx33(Settings, { size: 14, "aria-hidden": true }),
|
|
20125
19473
|
"Form settings",
|
|
20126
19474
|
formPickCount ? (
|
|
20127
19475
|
// Counter pill, per the design — not a text suffix.
|
|
20128
|
-
/* @__PURE__ */
|
|
19476
|
+
/* @__PURE__ */ jsx33(
|
|
20129
19477
|
"span",
|
|
20130
19478
|
{
|
|
20131
19479
|
"data-ohw-form-count": "",
|
|
@@ -20137,8 +19485,8 @@ function OhhwellsBridge() {
|
|
|
20137
19485
|
]
|
|
20138
19486
|
}
|
|
20139
19487
|
),
|
|
20140
|
-
/* @__PURE__ */
|
|
20141
|
-
/* @__PURE__ */
|
|
19488
|
+
/* @__PURE__ */ jsx33("div", { className: "mx-0.5 h-5 w-px bg-border" }),
|
|
19489
|
+
/* @__PURE__ */ jsx33("div", { className: "flex items-center rounded-md bg-muted/70 p-0.5", children: ["default", "success"].map((state) => /* @__PURE__ */ jsx33(
|
|
20142
19490
|
"button",
|
|
20143
19491
|
{
|
|
20144
19492
|
type: "button",
|
|
@@ -20168,7 +19516,7 @@ function OhhwellsBridge() {
|
|
|
20168
19516
|
)
|
|
20169
19517
|
}
|
|
20170
19518
|
),
|
|
20171
|
-
formHoverRect && !isItemDragging && /* @__PURE__ */
|
|
19519
|
+
formHoverRect && !isItemDragging && /* @__PURE__ */ jsx33(
|
|
20172
19520
|
ItemInteractionLayer,
|
|
20173
19521
|
{
|
|
20174
19522
|
rect: formHoverRect,
|
|
@@ -20176,11 +19524,11 @@ function OhhwellsBridge() {
|
|
|
20176
19524
|
chromeGap: formHoverElRef.current && getFieldWrapper(formHoverElRef.current) ? 8 : 24
|
|
20177
19525
|
}
|
|
20178
19526
|
),
|
|
20179
|
-
fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */
|
|
19527
|
+
fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ jsx33(
|
|
20180
19528
|
ItemInteractionLayer,
|
|
20181
19529
|
{
|
|
20182
19530
|
rect: fieldPickRect,
|
|
20183
|
-
state: "active-top",
|
|
19531
|
+
state: fieldDragging ? "dragging" : "active-top",
|
|
20184
19532
|
itemDragSurface: false,
|
|
20185
19533
|
toolbarAlign: "left",
|
|
20186
19534
|
chromeGap: 10,
|
|
@@ -20188,7 +19536,7 @@ function OhhwellsBridge() {
|
|
|
20188
19536
|
dragHandleLabel: "Reorder field",
|
|
20189
19537
|
onDragHandleDragStart: handleFieldDragStart,
|
|
20190
19538
|
onDragHandleDragEnd: handleFieldDragEnd,
|
|
20191
|
-
toolbar: /* @__PURE__ */
|
|
19539
|
+
toolbar: /* @__PURE__ */ jsx33(
|
|
20192
19540
|
FormFieldToolbar,
|
|
20193
19541
|
{
|
|
20194
19542
|
type: fieldPickState.type,
|
|
@@ -20201,33 +19549,32 @@ function OhhwellsBridge() {
|
|
|
20201
19549
|
)
|
|
20202
19550
|
}
|
|
20203
19551
|
),
|
|
20204
|
-
|
|
20205
|
-
|
|
20206
|
-
|
|
20207
|
-
|
|
20208
|
-
|
|
20209
|
-
|
|
20210
|
-
|
|
20211
|
-
|
|
20212
|
-
|
|
20213
|
-
|
|
20214
|
-
|
|
20215
|
-
|
|
20216
|
-
|
|
20217
|
-
|
|
20218
|
-
|
|
20219
|
-
|
|
20220
|
-
|
|
20221
|
-
fieldTypePickerOpen && formPickRect && /* @__PURE__ */ jsx34(
|
|
19552
|
+
fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */ jsx33(
|
|
19553
|
+
"div",
|
|
19554
|
+
{
|
|
19555
|
+
className: "pointer-events-none fixed z-[2147483644]",
|
|
19556
|
+
style: { top: slot.top, left: slot.left, width: slot.width },
|
|
19557
|
+
children: /* @__PURE__ */ jsx33(
|
|
19558
|
+
DropIndicator,
|
|
19559
|
+
{
|
|
19560
|
+
direction: "horizontal",
|
|
19561
|
+
state: fieldDropIndex === i ? "dragActive" : "dragIdle",
|
|
19562
|
+
className: "!w-full"
|
|
19563
|
+
}
|
|
19564
|
+
)
|
|
19565
|
+
},
|
|
19566
|
+
`field-drop-${i}`
|
|
19567
|
+
)) : null,
|
|
19568
|
+
fieldTypePickerOpen && formPickRect && /* @__PURE__ */ jsx33(
|
|
20222
19569
|
"div",
|
|
20223
19570
|
{
|
|
20224
19571
|
className: "pointer-events-none fixed z-[2147483645]",
|
|
20225
19572
|
style: { top: formPickRect.top + 16, left: formPickRect.left + 24 },
|
|
20226
|
-
children: /* @__PURE__ */
|
|
19573
|
+
children: /* @__PURE__ */ jsx33(FieldTypePicker, { onPick: handleAddField })
|
|
20227
19574
|
}
|
|
20228
19575
|
),
|
|
20229
|
-
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */
|
|
20230
|
-
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */
|
|
19576
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ jsx33(NavbarContainerChrome, { rect: toolbarRect, onAdd: handleAddTopLevelNavItem }),
|
|
19577
|
+
toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ jsx33(
|
|
20231
19578
|
FooterContainerChrome,
|
|
20232
19579
|
{
|
|
20233
19580
|
rect: toolbarRect,
|
|
@@ -20235,7 +19582,7 @@ function OhhwellsBridge() {
|
|
|
20235
19582
|
addDisabled: !canAddFooterColumn()
|
|
20236
19583
|
}
|
|
20237
19584
|
),
|
|
20238
|
-
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */
|
|
19585
|
+
toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */ jsx33(
|
|
20239
19586
|
ItemInteractionLayer,
|
|
20240
19587
|
{
|
|
20241
19588
|
rect: isItemDragging && draggedItemRect && (footerDragRef.current?.wasSelected || navDragRef.current?.wasSelected) ? draggedItemRect : toolbarRect,
|
|
@@ -20250,7 +19597,7 @@ function OhhwellsBridge() {
|
|
|
20250
19597
|
onItemPointerDown: toolbarVariant === "logo" ? void 0 : handleItemChromePointerDown,
|
|
20251
19598
|
onItemClick: toolbarVariant === "logo" ? void 0 : handleItemChromeClick,
|
|
20252
19599
|
itemDragSurface: toolbarVariant !== "logo" && !isFooterFrameSelection,
|
|
20253
|
-
toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */
|
|
19600
|
+
toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */ jsx33(
|
|
20254
19601
|
ItemActionToolbar,
|
|
20255
19602
|
{
|
|
20256
19603
|
onEditLink: openLinkPopoverForSelected,
|
|
@@ -20286,8 +19633,8 @@ function OhhwellsBridge() {
|
|
|
20286
19633
|
) : void 0
|
|
20287
19634
|
}
|
|
20288
19635
|
),
|
|
20289
|
-
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && /* @__PURE__ */
|
|
20290
|
-
/* @__PURE__ */
|
|
19636
|
+
toolbarRect && toolbarVariant === "rich-text" && !linkPopover && /* @__PURE__ */ jsxs20(Fragment8, { children: [
|
|
19637
|
+
/* @__PURE__ */ jsx33(
|
|
20291
19638
|
EditGlowChrome,
|
|
20292
19639
|
{
|
|
20293
19640
|
rect: toolbarRect,
|
|
@@ -20297,7 +19644,7 @@ function OhhwellsBridge() {
|
|
|
20297
19644
|
hideHandle: isItemDragging
|
|
20298
19645
|
}
|
|
20299
19646
|
),
|
|
20300
|
-
/* @__PURE__ */
|
|
19647
|
+
/* @__PURE__ */ jsx33(
|
|
20301
19648
|
FloatingToolbar,
|
|
20302
19649
|
{
|
|
20303
19650
|
rect: toolbarRect,
|
|
@@ -20310,7 +19657,7 @@ function OhhwellsBridge() {
|
|
|
20310
19657
|
}
|
|
20311
19658
|
)
|
|
20312
19659
|
] }),
|
|
20313
|
-
maxBadge && /* @__PURE__ */
|
|
19660
|
+
maxBadge && /* @__PURE__ */ jsxs20(
|
|
20314
19661
|
"div",
|
|
20315
19662
|
{
|
|
20316
19663
|
"data-ohw-max-badge": "",
|
|
@@ -20336,7 +19683,7 @@ function OhhwellsBridge() {
|
|
|
20336
19683
|
]
|
|
20337
19684
|
}
|
|
20338
19685
|
),
|
|
20339
|
-
toggleState && !linkPopover && /* @__PURE__ */
|
|
19686
|
+
toggleState && !linkPopover && /* @__PURE__ */ jsx33(
|
|
20340
19687
|
StateToggle,
|
|
20341
19688
|
{
|
|
20342
19689
|
rect: toggleState.rect,
|
|
@@ -20345,15 +19692,15 @@ function OhhwellsBridge() {
|
|
|
20345
19692
|
onStateChange: handleStateChange
|
|
20346
19693
|
}
|
|
20347
19694
|
),
|
|
20348
|
-
sectionGap && !linkPopover && /* @__PURE__ */
|
|
19695
|
+
sectionGap && !linkPopover && /* @__PURE__ */ jsxs20(
|
|
20349
19696
|
"div",
|
|
20350
19697
|
{
|
|
20351
19698
|
"data-ohw-section-insert-line": "",
|
|
20352
19699
|
className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
|
|
20353
19700
|
style: { top: sectionGap.y, transform: "translateY(-50%)" },
|
|
20354
19701
|
children: [
|
|
20355
|
-
/* @__PURE__ */
|
|
20356
|
-
/* @__PURE__ */
|
|
19702
|
+
/* @__PURE__ */ jsx33("div", { className: "flex-1 bg-primary", style: { height: 3 } }),
|
|
19703
|
+
/* @__PURE__ */ jsx33(
|
|
20357
19704
|
Badge,
|
|
20358
19705
|
{
|
|
20359
19706
|
className: "px-8 py-1 bg-primary hover:bg-primary text-primary-foreground text-xs font-medium shrink-0 rounded-full cursor-pointer pointer-events-auto",
|
|
@@ -20370,11 +19717,11 @@ function OhhwellsBridge() {
|
|
|
20370
19717
|
children: "Add Section"
|
|
20371
19718
|
}
|
|
20372
19719
|
),
|
|
20373
|
-
/* @__PURE__ */
|
|
19720
|
+
/* @__PURE__ */ jsx33("div", { className: "flex-1 bg-primary", style: { height: 3 } })
|
|
20374
19721
|
]
|
|
20375
19722
|
}
|
|
20376
19723
|
),
|
|
20377
|
-
linkPopover && dialogPortalContainer ? /* @__PURE__ */
|
|
19724
|
+
linkPopover && dialogPortalContainer ? /* @__PURE__ */ jsx33(
|
|
20378
19725
|
LinkPopover,
|
|
20379
19726
|
{
|
|
20380
19727
|
panelRef: linkPopoverPanelRef,
|
|
@@ -20391,7 +19738,7 @@ function OhhwellsBridge() {
|
|
|
20391
19738
|
},
|
|
20392
19739
|
linkPopover.key
|
|
20393
19740
|
) : null,
|
|
20394
|
-
floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */
|
|
19741
|
+
floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */ jsx33(
|
|
20395
19742
|
FloatingPanel,
|
|
20396
19743
|
{
|
|
20397
19744
|
open: true,
|
|
@@ -20401,7 +19748,7 @@ function OhhwellsBridge() {
|
|
|
20401
19748
|
onPositionChange: setFloatingPanelPos,
|
|
20402
19749
|
parentScroll: parentScrollSnap ?? parentScrollRef.current,
|
|
20403
19750
|
onClose: closeFloatingPanelOnly,
|
|
20404
|
-
children: /* @__PURE__ */
|
|
19751
|
+
children: /* @__PURE__ */ jsx33(
|
|
20405
19752
|
SocialsDisplayPanel,
|
|
20406
19753
|
{
|
|
20407
19754
|
display: socialsDisplayFor(floatingPanel.row, editContentRef.current),
|
|
@@ -20412,115 +19759,11 @@ function OhhwellsBridge() {
|
|
|
20412
19759
|
}
|
|
20413
19760
|
)
|
|
20414
19761
|
}
|
|
20415
|
-
) : null,
|
|
20416
|
-
floatingPanel && floatingPanel.kind === "logo-size" && logoSizeDraft ? /* @__PURE__ */ jsx34(
|
|
20417
|
-
FloatingPanel,
|
|
20418
|
-
{
|
|
20419
|
-
open: true,
|
|
20420
|
-
title: floatingPanel.title,
|
|
20421
|
-
context: floatingPanel.context,
|
|
20422
|
-
position: floatingPanelPos,
|
|
20423
|
-
onPositionChange: setFloatingPanelPos,
|
|
20424
|
-
parentScroll: parentScrollSnap ?? parentScrollRef.current,
|
|
20425
|
-
onClose: closeFloatingPanelAndDeselect,
|
|
20426
|
-
children: /* @__PURE__ */ jsx34(
|
|
20427
|
-
LogoSizePanel,
|
|
20428
|
-
{
|
|
20429
|
-
viewport: editorViewport,
|
|
20430
|
-
sizePx: editorViewport === "mobile" && !logoSizeDraft.mobileFollowing ? logoSizeDraft.mobilePx : logoSizeDraft.desktopPx,
|
|
20431
|
-
mobileFollowing: logoSizeDraft.mobileFollowing,
|
|
20432
|
-
onSizeChange: (px) => {
|
|
20433
|
-
const next = editorViewport === "mobile" ? { ...logoSizeDraft, mobilePx: px, mobileFollowing: false } : {
|
|
20434
|
-
...logoSizeDraft,
|
|
20435
|
-
desktopPx: px,
|
|
20436
|
-
mobilePx: logoSizeDraft.mobileFollowing ? px : logoSizeDraft.mobilePx
|
|
20437
|
-
};
|
|
20438
|
-
setLogoSizeDraft(next);
|
|
20439
|
-
persistLogoSizeDraft(floatingPanel.placement, next);
|
|
20440
|
-
},
|
|
20441
|
-
onCustomizeMobile: () => {
|
|
20442
|
-
const next = {
|
|
20443
|
-
...logoSizeDraft,
|
|
20444
|
-
mobileFollowing: false,
|
|
20445
|
-
mobilePx: logoSizeDraft.desktopPx
|
|
20446
|
-
};
|
|
20447
|
-
setLogoSizeDraft(next);
|
|
20448
|
-
persistLogoSizeDraft(floatingPanel.placement, next);
|
|
20449
|
-
},
|
|
20450
|
-
onResetMobile: () => {
|
|
20451
|
-
const next = {
|
|
20452
|
-
...logoSizeDraft,
|
|
20453
|
-
mobileFollowing: true,
|
|
20454
|
-
mobilePx: logoSizeDraft.desktopPx
|
|
20455
|
-
};
|
|
20456
|
-
setLogoSizeDraft(next);
|
|
20457
|
-
persistLogoSizeDraft(floatingPanel.placement, next);
|
|
20458
|
-
},
|
|
20459
|
-
onUpdateEverywhere: () => {
|
|
20460
|
-
const identity = readLogoIdentityFromDom();
|
|
20461
|
-
postToParent2({ type: "ow:open-logo-settings", ...identity });
|
|
20462
|
-
}
|
|
20463
|
-
}
|
|
20464
|
-
)
|
|
20465
|
-
}
|
|
20466
19762
|
) : null
|
|
20467
19763
|
] }),
|
|
20468
19764
|
bridgeRoot
|
|
20469
19765
|
) : null;
|
|
20470
19766
|
}
|
|
20471
|
-
|
|
20472
|
-
// src/ui/EmptySection.tsx
|
|
20473
|
-
import Link4 from "next/link";
|
|
20474
|
-
import { Fragment as Fragment9, jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
20475
|
-
function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey }) {
|
|
20476
|
-
return /* @__PURE__ */ jsxs22(Fragment9, { children: [
|
|
20477
|
-
/* @__PURE__ */ jsx35(
|
|
20478
|
-
"p",
|
|
20479
|
-
{
|
|
20480
|
-
style: {
|
|
20481
|
-
fontFamily: "var(--brand-font-body)",
|
|
20482
|
-
fontSize: "0.75rem",
|
|
20483
|
-
fontWeight: 500,
|
|
20484
|
-
letterSpacing: "0.15em",
|
|
20485
|
-
textTransform: "uppercase",
|
|
20486
|
-
color: "var(--brand-accent)",
|
|
20487
|
-
marginBottom: "1.5rem"
|
|
20488
|
-
},
|
|
20489
|
-
children: /* @__PURE__ */ jsx35(Link4, { href: homeHref, style: { color: "inherit" }, children: /* @__PURE__ */ jsx35("span", { ...eyebrowKey ? { "data-ohw-editable": "text", "data-ohw-key": eyebrowKey } : {}, children: "Home" }) })
|
|
20490
|
-
}
|
|
20491
|
-
),
|
|
20492
|
-
/* @__PURE__ */ jsx35(
|
|
20493
|
-
"h1",
|
|
20494
|
-
{
|
|
20495
|
-
style: {
|
|
20496
|
-
fontFamily: "var(--brand-font-heading)",
|
|
20497
|
-
fontSize: "clamp(2rem, 3.5vw, 2.75rem)",
|
|
20498
|
-
lineHeight: 1.1,
|
|
20499
|
-
letterSpacing: "-0.025em",
|
|
20500
|
-
color: "var(--brand-text)",
|
|
20501
|
-
marginBottom: "1rem"
|
|
20502
|
-
},
|
|
20503
|
-
...titleKey ? { "data-ohw-editable": "text", "data-ohw-key": titleKey, "data-ohw-max-length": 80 } : {},
|
|
20504
|
-
children: title
|
|
20505
|
-
}
|
|
20506
|
-
),
|
|
20507
|
-
/* @__PURE__ */ jsx35(
|
|
20508
|
-
"p",
|
|
20509
|
-
{
|
|
20510
|
-
style: {
|
|
20511
|
-
fontFamily: "var(--brand-font-body)",
|
|
20512
|
-
fontSize: "1rem",
|
|
20513
|
-
lineHeight: 1.7,
|
|
20514
|
-
fontWeight: 300,
|
|
20515
|
-
color: "var(--brand-text-muted)",
|
|
20516
|
-
maxWidth: "340px"
|
|
20517
|
-
},
|
|
20518
|
-
...subtitleKey ? { "data-ohw-editable": "text", "data-ohw-key": subtitleKey, "data-ohw-max-length": 160 } : {},
|
|
20519
|
-
children: "This page doesn't have any content yet."
|
|
20520
|
-
}
|
|
20521
|
-
)
|
|
20522
|
-
] });
|
|
20523
|
-
}
|
|
20524
19767
|
export {
|
|
20525
19768
|
AI_DEFAULT_BRAND,
|
|
20526
19769
|
AI_TREE_SCHEMA_VERSIONS,
|
|
@@ -20537,7 +19780,6 @@ export {
|
|
|
20537
19780
|
DropdownMenuItem,
|
|
20538
19781
|
DropdownMenuSeparator,
|
|
20539
19782
|
DropdownMenuTrigger,
|
|
20540
|
-
EmptySection,
|
|
20541
19783
|
ItemActionToolbar,
|
|
20542
19784
|
ItemInteractionLayer,
|
|
20543
19785
|
LinkEditorPanel,
|