@ohhwells/bridge 0.1.112-next.289 → 0.1.112
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 +167 -454
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -52
- package/dist/index.d.ts +1 -52
- package/dist/index.js +167 -453
- package/dist/index.js.map +1 -1
- package/dist/styles.css +65 -116
- package/package.json +3 -8
- 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
|
@@ -279,17 +279,16 @@ var LEGACY_BRAND_VAR_NAMES = [
|
|
|
279
279
|
"text-muted",
|
|
280
280
|
"surface",
|
|
281
281
|
"border",
|
|
282
|
-
"on-primary"
|
|
282
|
+
"on-primary",
|
|
283
|
+
"navbar-background"
|
|
283
284
|
].map((role) => `--brand-${role}`);
|
|
284
285
|
var FONT_VARS = {
|
|
285
286
|
heading: ["--font-heading", "--font-display", "--brand-font-heading"],
|
|
286
287
|
body: ["--font-body", "--brand-font-body"]
|
|
287
288
|
};
|
|
288
289
|
var BRAND_FONT_LINK_ID = "ohw-brand-fonts";
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
function brandColorVars(palette) {
|
|
292
|
-
const { dark, primary, accent, light } = palette;
|
|
290
|
+
function brandColorVars(kit) {
|
|
291
|
+
const { dark, primary, accent, light } = kit.palette;
|
|
293
292
|
const mix = (a, aPct, b) => `color-mix(in srgb, ${a} ${aPct}%, ${b})`;
|
|
294
293
|
const surface = mix(light, 95, dark);
|
|
295
294
|
const border = mix(light, 85, dark);
|
|
@@ -312,42 +311,22 @@ function brandColorVars(palette) {
|
|
|
312
311
|
"--brand-border": border,
|
|
313
312
|
// Buttons/bands painted in the primary colour assume it's dark/saturated enough to need
|
|
314
313
|
// light text on top — the same assumption LOGO_IMAGE's light-on-dark navbar mark makes.
|
|
315
|
-
"--brand-on-primary": light
|
|
314
|
+
"--brand-on-primary": light,
|
|
315
|
+
"--brand-navbar-background": dark
|
|
316
316
|
};
|
|
317
317
|
}
|
|
318
|
-
function parseCustomFontWeight(raw) {
|
|
319
|
-
if (typeof raw !== "object" || raw === null) return null;
|
|
320
|
-
const w = raw;
|
|
321
|
-
if (typeof w.weight !== "number" || !Number.isFinite(w.weight)) return null;
|
|
322
|
-
if (typeof w.url !== "string" || !w.url) return null;
|
|
323
|
-
if (typeof w.format !== "string" || !CUSTOM_FONT_FORMATS.has(w.format)) return null;
|
|
324
|
-
const weightEnd = typeof w.weightEnd === "number" && Number.isFinite(w.weightEnd) && w.weightEnd > w.weight ? w.weightEnd : void 0;
|
|
325
|
-
return { weight: w.weight, ...weightEnd !== void 0 ? { weightEnd } : {}, url: w.url, format: w.format };
|
|
326
|
-
}
|
|
327
|
-
function parseCustomFont(raw) {
|
|
328
|
-
if (typeof raw !== "object" || raw === null) return null;
|
|
329
|
-
const f = raw;
|
|
330
|
-
if (typeof f.family !== "string" || !f.family) return null;
|
|
331
|
-
if (typeof f.label !== "string" || !f.label) return null;
|
|
332
|
-
if (!Array.isArray(f.weights)) return null;
|
|
333
|
-
const weights = f.weights.map(parseCustomFontWeight).filter((w) => w !== null);
|
|
334
|
-
if (weights.length === 0) return null;
|
|
335
|
-
return { family: f.family, label: f.label, weights };
|
|
336
|
-
}
|
|
337
318
|
function parseBrandKit(raw) {
|
|
338
319
|
if (!raw) return null;
|
|
339
320
|
try {
|
|
340
321
|
const parsed = JSON.parse(raw);
|
|
341
322
|
const p = parsed?.palette;
|
|
342
323
|
const f = parsed?.fonts;
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
if (!palette && !fonts && !customFonts) return null;
|
|
324
|
+
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") {
|
|
325
|
+
return null;
|
|
326
|
+
}
|
|
347
327
|
return {
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
...customFonts ? { customFonts } : {}
|
|
328
|
+
palette: { dark: p.dark, primary: p.primary, accent: p.accent, light: p.light },
|
|
329
|
+
fonts: { heading: f.heading, body: f.body }
|
|
351
330
|
};
|
|
352
331
|
} catch {
|
|
353
332
|
return null;
|
|
@@ -357,16 +336,11 @@ function familyOf(stack) {
|
|
|
357
336
|
const first = stack.split(",")[0]?.trim() ?? "";
|
|
358
337
|
return first.replace(/^['"]|['"]$/g, "");
|
|
359
338
|
}
|
|
360
|
-
function quoteFamily(family) {
|
|
361
|
-
return `'${family.replace(/\\/g, "\\\\").replace(/'/g, "\\'")}'`;
|
|
362
|
-
}
|
|
363
|
-
var WEIGHT_SCALE = [100, 200, 300, 400, 500, 600, 700, 800, 900];
|
|
364
339
|
function loadBrandFonts(families) {
|
|
365
340
|
const unique = [...new Set(families.map((f) => f.trim()).filter(Boolean))];
|
|
366
341
|
if (unique.length === 0) return;
|
|
367
|
-
const
|
|
368
|
-
const
|
|
369
|
-
const href = `https://fonts.googleapis.com/css2?${spec}&display=swap`;
|
|
342
|
+
const spec = unique.map((f) => `${f.replace(/ /g, "+")}:400,500,600,700`).join("|");
|
|
343
|
+
const href = `https://fonts.googleapis.com/css?family=${spec}&display=swap`;
|
|
370
344
|
let link = document.getElementById(BRAND_FONT_LINK_ID);
|
|
371
345
|
if (!link) {
|
|
372
346
|
link = document.createElement("link");
|
|
@@ -376,54 +350,18 @@ function loadBrandFonts(families) {
|
|
|
376
350
|
}
|
|
377
351
|
if (link.href !== href) link.href = href;
|
|
378
352
|
}
|
|
379
|
-
function escapeCssString(value) {
|
|
380
|
-
return value.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
|
|
381
|
-
}
|
|
382
|
-
function loadCustomFonts(fonts) {
|
|
383
|
-
const list = fonts ?? [];
|
|
384
|
-
let style = document.getElementById(CUSTOM_FONT_STYLE_ID);
|
|
385
|
-
if (list.length === 0) {
|
|
386
|
-
style?.remove();
|
|
387
|
-
return;
|
|
388
|
-
}
|
|
389
|
-
if (!style) {
|
|
390
|
-
style = document.createElement("style");
|
|
391
|
-
style.id = CUSTOM_FONT_STYLE_ID;
|
|
392
|
-
document.head.appendChild(style);
|
|
393
|
-
}
|
|
394
|
-
style.textContent = list.flatMap(
|
|
395
|
-
(font) => font.weights.map((w) => {
|
|
396
|
-
const weightDescriptor = w.weightEnd ? `${w.weight} ${w.weightEnd}` : `${w.weight}`;
|
|
397
|
-
return `@font-face { font-family: '${escapeCssString(font.family)}'; src: url('${escapeCssString(w.url)}') format('${w.format}'); font-weight: ${weightDescriptor}; font-display: swap; }`;
|
|
398
|
-
})
|
|
399
|
-
).join("\n");
|
|
400
|
-
}
|
|
401
353
|
function applyBrandToDom(kit) {
|
|
402
354
|
const root = document.documentElement;
|
|
403
355
|
if (!kit) {
|
|
404
356
|
for (const name of [...BRAND_VAR_NAMES, ...LEGACY_BRAND_VAR_NAMES]) root.style.removeProperty(name);
|
|
405
357
|
for (const name of [...FONT_VARS.heading, ...FONT_VARS.body]) root.style.removeProperty(name);
|
|
406
358
|
document.getElementById(BRAND_FONT_LINK_ID)?.remove();
|
|
407
|
-
document.getElementById(CUSTOM_FONT_STYLE_ID)?.remove();
|
|
408
359
|
return;
|
|
409
360
|
}
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
loadCustomFonts(kit.customFonts);
|
|
415
|
-
}
|
|
416
|
-
if (kit.fonts) {
|
|
417
|
-
const heading = quoteFamily(kit.fonts.heading);
|
|
418
|
-
const body = quoteFamily(kit.fonts.body);
|
|
419
|
-
for (const name of FONT_VARS.heading) root.style.setProperty(name, heading);
|
|
420
|
-
for (const name of FONT_VARS.body) root.style.setProperty(name, body);
|
|
421
|
-
const customFamilies = new Set((kit.customFonts ?? []).map((f) => f.family));
|
|
422
|
-
const googleFamilies = [familyOf(kit.fonts.heading), familyOf(kit.fonts.body)].filter(
|
|
423
|
-
(f) => !customFamilies.has(f)
|
|
424
|
-
);
|
|
425
|
-
loadBrandFonts(googleFamilies);
|
|
426
|
-
}
|
|
361
|
+
for (const [name, value] of Object.entries(brandColorVars(kit))) root.style.setProperty(name, value);
|
|
362
|
+
for (const name of FONT_VARS.heading) root.style.setProperty(name, kit.fonts.heading);
|
|
363
|
+
for (const name of FONT_VARS.body) root.style.setProperty(name, kit.fonts.body);
|
|
364
|
+
loadBrandFonts([familyOf(kit.fonts.heading), familyOf(kit.fonts.body)]);
|
|
427
365
|
}
|
|
428
366
|
|
|
429
367
|
// src/lib/section-styles.ts
|
|
@@ -448,20 +386,6 @@ var BG_VALUES = {
|
|
|
448
386
|
accent: "var(--ohw-brand-primary, var(--color-primary, #0078E5))",
|
|
449
387
|
"accent-soft": "color-mix(in srgb, var(--ohw-brand-primary, var(--color-primary, #0078E5)) 12%, var(--ohw-brand-light, var(--color-light, #FFFFFF)))"
|
|
450
388
|
};
|
|
451
|
-
var NAVBAR_COLOR_TOKENS = ["dark", "primary", "accent", "light"];
|
|
452
|
-
function navbarColorVar(token) {
|
|
453
|
-
const fallback = {
|
|
454
|
-
dark: "#0C0A09",
|
|
455
|
-
primary: "#0078E5",
|
|
456
|
-
accent: "#0078E5",
|
|
457
|
-
light: "#FFFFFF"
|
|
458
|
-
};
|
|
459
|
-
return `var(--ohw-brand-${token}, var(--color-${token}, ${fallback[token]}))`;
|
|
460
|
-
}
|
|
461
|
-
function resolveNavbarValue(value) {
|
|
462
|
-
if (value === void 0) return void 0;
|
|
463
|
-
return NAVBAR_COLOR_TOKENS.includes(value) ? navbarColorVar(value) : value;
|
|
464
|
-
}
|
|
465
389
|
var HEADLINE_SIZES = { md: 24, lg: 32, xl: 40, display: 56 };
|
|
466
390
|
function styleSheetCss() {
|
|
467
391
|
const rules = [];
|
|
@@ -631,16 +555,8 @@ function applyStylesToDom(store) {
|
|
|
631
555
|
for (const [sectionId, override] of Object.entries(store.sections)) {
|
|
632
556
|
const escaped = CSS.escape(sectionId);
|
|
633
557
|
const byInstance = document.querySelectorAll(`[data-ohw-instance="${escaped}"]`);
|
|
634
|
-
const sections =
|
|
635
|
-
byInstance.length ? byInstance : document.querySelectorAll(`[data-ohw-section="${escaped}"]`)
|
|
636
|
-
);
|
|
637
|
-
const isNavbar = sectionId === "navbar";
|
|
638
|
-
if (isNavbar) {
|
|
639
|
-
const drawer = document.querySelector("[data-ohw-nav-drawer]");
|
|
640
|
-
if (drawer && !sections.includes(drawer)) sections.push(drawer);
|
|
641
|
-
}
|
|
558
|
+
const sections = byInstance.length ? byInstance : document.querySelectorAll(`[data-ohw-section="${escaped}"]`);
|
|
642
559
|
for (const marker of Array.from(sections)) {
|
|
643
|
-
const isDrawerMarker = isNavbar && marker.hasAttribute("data-ohw-nav-drawer");
|
|
644
560
|
const section = marker.querySelector(":scope > [data-ai-section]") ?? marker;
|
|
645
561
|
for (const [prop, attr] of Object.entries(SECTION_ATTRS)) {
|
|
646
562
|
const value = override[prop];
|
|
@@ -648,23 +564,19 @@ function applyStylesToDom(store) {
|
|
|
648
564
|
if (prop === "sectionBackground" && override.sectionBackgroundColor !== void 0) continue;
|
|
649
565
|
section.setAttribute(attr, String(value).replace(":", "-"));
|
|
650
566
|
}
|
|
651
|
-
|
|
652
|
-
const textOverride = isDrawerMarker ? override.navbarMobileTextColor ?? override.textColor : override.textColor;
|
|
653
|
-
const bgValue = isNavbar ? resolveNavbarValue(bgOverride) : bgOverride;
|
|
654
|
-
const textValue = isNavbar ? resolveNavbarValue(textOverride) : textOverride;
|
|
655
|
-
if (bgValue !== void 0) {
|
|
567
|
+
if (override.sectionBackgroundColor !== void 0) {
|
|
656
568
|
saveInline(section, "background");
|
|
657
|
-
section.style.setProperty("background",
|
|
569
|
+
section.style.setProperty("background", override.sectionBackgroundColor, "important");
|
|
658
570
|
section.setAttribute("data-ohw-style-bgcolor", "");
|
|
659
571
|
}
|
|
660
|
-
if (
|
|
572
|
+
if (override.textColor !== void 0 || override.fontFamily !== void 0) {
|
|
661
573
|
const textEls = marker.querySelectorAll(
|
|
662
574
|
'[data-ohw-editable="text"], [data-ohw-editable="plain"], [data-ohw-field-label]'
|
|
663
575
|
);
|
|
664
576
|
for (const el of Array.from(textEls)) {
|
|
665
|
-
if (
|
|
577
|
+
if (override.textColor !== void 0) {
|
|
666
578
|
saveInline(el, "color");
|
|
667
|
-
el.style.setProperty("color",
|
|
579
|
+
el.style.setProperty("color", override.textColor, "important");
|
|
668
580
|
el.setAttribute(NODE_WROTE_ATTR, "");
|
|
669
581
|
}
|
|
670
582
|
if (override.fontFamily !== void 0) {
|
|
@@ -1370,22 +1282,6 @@ function accentBandContext(brand) {
|
|
|
1370
1282
|
function textAttrs(ctx, path) {
|
|
1371
1283
|
return ctx.keyFor ? { "data-ohw-key": ctx.keyFor(path), "data-ohw-editable": "text" } : {};
|
|
1372
1284
|
}
|
|
1373
|
-
var AI_RESPONSIVE_CSS = [
|
|
1374
|
-
"@media (max-width: 960px) {",
|
|
1375
|
-
" [data-ai-responsive] [data-ai-grid] { grid-template-columns: repeat(2, 1fr) !important; }",
|
|
1376
|
-
' [data-ai-responsive] [data-ai-grid="1"] { grid-template-columns: 1fr !important; }',
|
|
1377
|
-
"}",
|
|
1378
|
-
"@media (max-width: 640px) {",
|
|
1379
|
-
" [data-ai-responsive] [data-ai-grid] { grid-template-columns: 1fr !important; }",
|
|
1380
|
-
" [data-ai-responsive] [data-ai-columns] > * { grid-column: 1 / -1 !important; }",
|
|
1381
|
-
// Group containers flatten to a column on phones; span placements come along for free.
|
|
1382
|
-
" [data-ai-responsive] [data-ai-group] { display: flex !important; flex-direction: column !important; }",
|
|
1383
|
-
" [data-ai-responsive] [data-ai-group] > * { grid-column: auto !important; }",
|
|
1384
|
-
" [data-ai-responsive] [data-ai-section-inner] { padding-left: 20px !important; padding-right: 20px !important; }",
|
|
1385
|
-
" [data-ai-responsive] { overflow-x: hidden; }",
|
|
1386
|
-
" [data-ai-responsive] img { max-width: 100%; }",
|
|
1387
|
-
"}"
|
|
1388
|
-
].join("\n");
|
|
1389
1285
|
var TRANSPARENT_PX = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
|
|
1390
1286
|
function MediaBox({
|
|
1391
1287
|
refValue,
|
|
@@ -1398,17 +1294,13 @@ function MediaBox({
|
|
|
1398
1294
|
const url = refValue ? ctx.resolveMedia(refValue) : null;
|
|
1399
1295
|
const isIcon = /^(lucide|simple):/.test(refValue);
|
|
1400
1296
|
const aspectRatio = aspect && /^\d+:\d+$/.test(aspect) ? aspect.replace(":", " / ") : void 0;
|
|
1401
|
-
const editAttrs = ctx.keyFor && editPath ? {
|
|
1402
|
-
"data-ohw-key": ctx.keyFor(editPath),
|
|
1403
|
-
"data-ohw-editable": isIcon ? "icon" : "image"
|
|
1404
|
-
} : {};
|
|
1297
|
+
const editAttrs = ctx.keyFor && editPath && !isIcon ? { "data-ohw-key": ctx.keyFor(editPath), "data-ohw-editable": "image" } : {};
|
|
1405
1298
|
if (isIcon) {
|
|
1406
1299
|
const Icon = refValue.startsWith("lucide:") ? lucideByName(refValue.slice(7)) : null;
|
|
1407
1300
|
return /* @__PURE__ */ jsx(
|
|
1408
1301
|
"span",
|
|
1409
1302
|
{
|
|
1410
1303
|
"data-ai-icon": refValue,
|
|
1411
|
-
...editAttrs,
|
|
1412
1304
|
style: {
|
|
1413
1305
|
display: "inline-flex",
|
|
1414
1306
|
width: 48,
|
|
@@ -2301,7 +2193,7 @@ function CollectionBlock({ node, ctx, path }) {
|
|
|
2301
2193
|
return /* @__PURE__ */ jsx(
|
|
2302
2194
|
"div",
|
|
2303
2195
|
{
|
|
2304
|
-
"data-ai-grid":
|
|
2196
|
+
"data-ai-grid": "",
|
|
2305
2197
|
style: {
|
|
2306
2198
|
display: "grid",
|
|
2307
2199
|
gridTemplateColumns: `repeat(${itemsPerRow}, 1fr)`,
|
|
@@ -2654,7 +2546,6 @@ function AiTreeRenderer({
|
|
|
2654
2546
|
{
|
|
2655
2547
|
"data-ai-section": tree.tag ?? "",
|
|
2656
2548
|
...bgAttrs,
|
|
2657
|
-
"data-ai-responsive": "",
|
|
2658
2549
|
style: {
|
|
2659
2550
|
position: "relative",
|
|
2660
2551
|
padding: `${pad}px 0`,
|
|
@@ -2665,13 +2556,12 @@ function AiTreeRenderer({
|
|
|
2665
2556
|
color: settings.sectionBackground === "accent" ? blockBrand.palette.dark : void 0
|
|
2666
2557
|
},
|
|
2667
2558
|
children: [
|
|
2668
|
-
/* @__PURE__ */ jsx("style", { children: AI_RESPONSIVE_CSS }),
|
|
2669
|
-
/* @__PURE__ */ jsx("style", { children: AI_MOBILE_CSS }),
|
|
2670
2559
|
isOverlay && backgroundUrl && /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, background: `rgba(255,255,255,${overlayAlpha})` } }),
|
|
2560
|
+
/* @__PURE__ */ jsx("style", { children: AI_MOBILE_CSS }),
|
|
2671
2561
|
/* @__PURE__ */ jsx(
|
|
2672
2562
|
"div",
|
|
2673
2563
|
{
|
|
2674
|
-
"data-ai-
|
|
2564
|
+
"data-ai-container": "",
|
|
2675
2565
|
style: {
|
|
2676
2566
|
position: "relative",
|
|
2677
2567
|
maxWidth: AI_TREE_TOKENS.sectionMaxWidth,
|
|
@@ -2682,7 +2572,7 @@ function AiTreeRenderer({
|
|
|
2682
2572
|
children: tree.rows.map((row, r2) => /* @__PURE__ */ jsx(
|
|
2683
2573
|
"div",
|
|
2684
2574
|
{
|
|
2685
|
-
"data-ai-
|
|
2575
|
+
"data-ai-row": "",
|
|
2686
2576
|
style: {
|
|
2687
2577
|
display: "grid",
|
|
2688
2578
|
gridTemplateColumns: "repeat(12, 1fr)",
|
|
@@ -2732,52 +2622,14 @@ function readRootVar(name) {
|
|
|
2732
2622
|
if (typeof document === "undefined") return "";
|
|
2733
2623
|
return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
|
|
2734
2624
|
}
|
|
2735
|
-
function normalizeColorToHex(value) {
|
|
2736
|
-
if (!value || typeof document === "undefined") return value;
|
|
2737
|
-
const canvas = document.createElement("canvas");
|
|
2738
|
-
canvas.width = 1;
|
|
2739
|
-
canvas.height = 1;
|
|
2740
|
-
const ctx = canvas.getContext("2d");
|
|
2741
|
-
if (!ctx) return value;
|
|
2742
|
-
ctx.fillStyle = value;
|
|
2743
|
-
ctx.fillRect(0, 0, 1, 1);
|
|
2744
|
-
const [r2, g, b] = ctx.getImageData(0, 0, 1, 1).data;
|
|
2745
|
-
const toHex = (n) => n.toString(16).padStart(2, "0");
|
|
2746
|
-
return `#${toHex(r2)}${toHex(g)}${toHex(b)}`;
|
|
2747
|
-
}
|
|
2748
|
-
var GENERIC_FONT_KEYWORDS = /* @__PURE__ */ new Set([
|
|
2749
|
-
"serif",
|
|
2750
|
-
"sans-serif",
|
|
2751
|
-
"monospace",
|
|
2752
|
-
"cursive",
|
|
2753
|
-
"fantasy",
|
|
2754
|
-
"system-ui",
|
|
2755
|
-
"ui-serif",
|
|
2756
|
-
"ui-sans-serif",
|
|
2757
|
-
"ui-monospace",
|
|
2758
|
-
"ui-rounded",
|
|
2759
|
-
"math",
|
|
2760
|
-
"emoji",
|
|
2761
|
-
"fangsong"
|
|
2762
|
-
]);
|
|
2763
|
-
function primaryFontFamily(stack) {
|
|
2764
|
-
const first = stack.split(",").map((part) => part.trim().replace(/^["']|["']$/g, "")).find((part) => part && !GENERIC_FONT_KEYWORDS.has(part.toLowerCase()));
|
|
2765
|
-
return first ?? "";
|
|
2766
|
-
}
|
|
2767
|
-
function humanizeFontFamily(name) {
|
|
2768
|
-
return name.replace(/^__/, "").replace(/_[0-9a-f]{6}$/i, "").replace(/_/g, " ").replace(/([a-z0-9])([A-Z])/g, "$1 $2").trim().replace(/\s+/g, " ").replace(/(^|\s)([a-z])/g, (_, sep, c) => sep + c.toUpperCase());
|
|
2769
|
-
}
|
|
2770
|
-
function readFontVar(name) {
|
|
2771
|
-
return humanizeFontFamily(primaryFontFamily(readRootVar(name)));
|
|
2772
|
-
}
|
|
2773
2625
|
function deriveBrandOverride() {
|
|
2774
2626
|
const dark = readRootVar("--ohw-brand-dark");
|
|
2775
2627
|
const primary = readRootVar("--ohw-brand-primary");
|
|
2776
2628
|
const light = readRootVar("--ohw-brand-light");
|
|
2777
2629
|
if (!dark || !primary || !light) return null;
|
|
2778
2630
|
const accent = readRootVar("--ohw-brand-accent");
|
|
2779
|
-
const heading =
|
|
2780
|
-
const body =
|
|
2631
|
+
const heading = readRootVar("--font-heading") || readRootVar("--font-display");
|
|
2632
|
+
const body = readRootVar("--font-body");
|
|
2781
2633
|
return {
|
|
2782
2634
|
palette: { dark, primary, accent: accent || dark, light },
|
|
2783
2635
|
fonts: {
|
|
@@ -2786,55 +2638,22 @@ function deriveBrandOverride() {
|
|
|
2786
2638
|
}
|
|
2787
2639
|
};
|
|
2788
2640
|
}
|
|
2789
|
-
function
|
|
2641
|
+
function deriveTemplateBrand() {
|
|
2790
2642
|
const primary = readRootVar("--brand-primary") || readRootVar("--color-primary");
|
|
2791
2643
|
const dark = readRootVar("--brand-text") || readRootVar("--color-dark");
|
|
2792
2644
|
const light = readRootVar("--brand-background") || readRootVar("--color-light");
|
|
2793
2645
|
if (!dark || !primary || !light) return null;
|
|
2794
2646
|
const accent = readRootVar("--brand-accent") || readRootVar("--color-accent");
|
|
2795
|
-
const heading =
|
|
2796
|
-
const body =
|
|
2647
|
+
const heading = readRootVar("--brand-font-heading") || readRootVar("--font-heading") || readRootVar("--font-display");
|
|
2648
|
+
const body = readRootVar("--brand-font-body") || readRootVar("--font-body");
|
|
2797
2649
|
return {
|
|
2798
|
-
palette: {
|
|
2799
|
-
dark: normalizeColorToHex(dark),
|
|
2800
|
-
primary: normalizeColorToHex(primary),
|
|
2801
|
-
accent: normalizeColorToHex(accent || dark),
|
|
2802
|
-
light: normalizeColorToHex(light)
|
|
2803
|
-
},
|
|
2650
|
+
palette: { dark, primary, accent: accent || dark, light },
|
|
2804
2651
|
fonts: {
|
|
2805
2652
|
heading: heading || AI_DEFAULT_BRAND.fonts.heading,
|
|
2806
2653
|
body: body || AI_DEFAULT_BRAND.fonts.body
|
|
2807
2654
|
}
|
|
2808
2655
|
};
|
|
2809
2656
|
}
|
|
2810
|
-
function deriveTemplateFontsLive() {
|
|
2811
|
-
const heading = readFontVar("--brand-font-heading") || readFontVar("--font-heading") || readFontVar("--font-display");
|
|
2812
|
-
const body = readFontVar("--brand-font-body") || readFontVar("--font-body");
|
|
2813
|
-
if (!heading && !body) return null;
|
|
2814
|
-
return {
|
|
2815
|
-
heading: heading || AI_DEFAULT_BRAND.fonts.heading,
|
|
2816
|
-
body: body || AI_DEFAULT_BRAND.fonts.body
|
|
2817
|
-
};
|
|
2818
|
-
}
|
|
2819
|
-
var OVERRIDE_VAR_NAMES = [...BRAND_VAR_NAMES, ...LEGACY_BRAND_VAR_NAMES, ...FONT_VARS.heading, ...FONT_VARS.body];
|
|
2820
|
-
function withOverrideStripped(read) {
|
|
2821
|
-
const root = document.documentElement;
|
|
2822
|
-
const restore = OVERRIDE_VAR_NAMES.map((name) => [name, root.style.getPropertyValue(name)]);
|
|
2823
|
-
for (const name of OVERRIDE_VAR_NAMES) root.style.removeProperty(name);
|
|
2824
|
-
try {
|
|
2825
|
-
return read();
|
|
2826
|
-
} finally {
|
|
2827
|
-
for (const [name, value] of restore) if (value) root.style.setProperty(name, value);
|
|
2828
|
-
}
|
|
2829
|
-
}
|
|
2830
|
-
var TEMPLATE_BRAND_SNAPSHOT = typeof document === "undefined" ? null : withOverrideStripped(deriveTemplateBrandLive);
|
|
2831
|
-
var TEMPLATE_FONTS_SNAPSHOT = typeof document === "undefined" ? null : withOverrideStripped(deriveTemplateFontsLive);
|
|
2832
|
-
function deriveTemplateBrand() {
|
|
2833
|
-
return TEMPLATE_BRAND_SNAPSHOT;
|
|
2834
|
-
}
|
|
2835
|
-
function deriveTemplateFonts() {
|
|
2836
|
-
return TEMPLATE_FONTS_SNAPSHOT;
|
|
2837
|
-
}
|
|
2838
2657
|
function deriveTemplateButtonStyle() {
|
|
2839
2658
|
if (typeof document === "undefined") return null;
|
|
2840
2659
|
const candidates = Array.from(
|
|
@@ -7332,12 +7151,12 @@ var cva = (base, config) => (props) => {
|
|
|
7332
7151
|
import { Toggle as TogglePrimitive } from "radix-ui";
|
|
7333
7152
|
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
7334
7153
|
var toggleVariants = cva(
|
|
7335
|
-
"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-
|
|
7154
|
+
"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
7336
7155
|
{
|
|
7337
7156
|
variants: {
|
|
7338
7157
|
variant: {
|
|
7339
7158
|
default: "bg-transparent border-0",
|
|
7340
|
-
outline: "border border-input bg-transparent shadow-xs hover:bg-
|
|
7159
|
+
outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
|
|
7341
7160
|
},
|
|
7342
7161
|
size: {
|
|
7343
7162
|
default: "px-2 py-1",
|
|
@@ -7430,10 +7249,10 @@ var DragHandle = React4.forwardRef(
|
|
|
7430
7249
|
type,
|
|
7431
7250
|
"data-slot": "drag-handle",
|
|
7432
7251
|
className: cn(
|
|
7433
|
-
"inline-flex h-7 w-4 shrink-0 items-center justify-center rounded-md transition-all duration-200 max-h-
|
|
7252
|
+
"inline-flex h-7 w-4 shrink-0 items-center justify-center rounded-md transition-all duration-200 max-h-[30px]",
|
|
7434
7253
|
"bg-white border border-transparent text-stone-500 shadow-md cursor-grab",
|
|
7435
7254
|
"enabled:hover:border enabled:hover:border-stone-200 enabled:hover:text-stone-950",
|
|
7436
|
-
"enabled:active:border enabled:active:border-
|
|
7255
|
+
"enabled:active:border enabled:active:border-primary enabled:active:bg-primary-50 enabled:active:text-stone-950 enabled:active:shadow enabled:active:cursor-grabbing",
|
|
7437
7256
|
"disabled:cursor-not-allowed disabled:opacity-40 disabled:text-stone-950 disabled:pointer-events-none",
|
|
7438
7257
|
className
|
|
7439
7258
|
),
|
|
@@ -7455,7 +7274,7 @@ var CustomToolbar = React5.forwardRef(({ className, onMouseDown, ...props }, ref
|
|
|
7455
7274
|
"data-ohw-toolbar": "",
|
|
7456
7275
|
className: cn(
|
|
7457
7276
|
// Figma: bg background, radius 8, gap-1, p-0.5, shadow-md — no border
|
|
7458
|
-
"inline-flex h-8 items-center gap-1 rounded-(--radius,0.5rem) bg-background p-0.5 font-sans whitespace-nowrap shadow-md",
|
|
7277
|
+
"inline-flex h-8 items-center gap-1 rounded-[var(--radius,0.5rem)] bg-background p-0.5 font-sans whitespace-nowrap shadow-md",
|
|
7459
7278
|
className
|
|
7460
7279
|
),
|
|
7461
7280
|
onMouseDown: (e) => {
|
|
@@ -7484,7 +7303,7 @@ var CustomToolbarButton = React5.forwardRef(
|
|
|
7484
7303
|
type,
|
|
7485
7304
|
className: cn(
|
|
7486
7305
|
"inline-flex size-7 shrink-0 items-center justify-center rounded-[calc(var(--radius,0.5rem)-2px)] text-foreground transition-colors",
|
|
7487
|
-
active ? "bg-
|
|
7306
|
+
active ? "bg-primary text-primary-foreground" : "bg-transparent hover:bg-muted disabled:cursor-not-allowed disabled:text-muted-foreground disabled:opacity-60",
|
|
7488
7307
|
className
|
|
7489
7308
|
),
|
|
7490
7309
|
...props
|
|
@@ -8748,13 +8567,13 @@ function FormFieldToolbar({
|
|
|
8748
8567
|
]
|
|
8749
8568
|
}
|
|
8750
8569
|
) }),
|
|
8751
|
-
/* @__PURE__ */ jsx13(DropdownMenuContent, { align: "start", sideOffset: 8, className: "min-w-
|
|
8570
|
+
/* @__PURE__ */ jsx13(DropdownMenuContent, { align: "start", sideOffset: 8, className: "min-w-[190px] p-1", children: FIELD_TYPES.map((entry) => {
|
|
8752
8571
|
const Icon = TYPE_ICONS[entry.type];
|
|
8753
8572
|
return /* @__PURE__ */ jsxs6(
|
|
8754
8573
|
DropdownMenuItem,
|
|
8755
8574
|
{
|
|
8756
8575
|
onSelect: () => onTypeChange(entry.type),
|
|
8757
|
-
className: "rounded-md py-2 text-[13px] " + (entry.type === type ? "bg-
|
|
8576
|
+
className: "rounded-md py-2 text-[13px] " + (entry.type === type ? "bg-primary/10" : ""),
|
|
8758
8577
|
children: [
|
|
8759
8578
|
/* @__PURE__ */ jsx13(Icon, { size: 14, strokeWidth: 1.75, className: "shrink-0", "aria-hidden": true }),
|
|
8760
8579
|
entry.label
|
|
@@ -8771,7 +8590,7 @@ function FormFieldToolbar({
|
|
|
8771
8590
|
type: "button",
|
|
8772
8591
|
"aria-pressed": required,
|
|
8773
8592
|
onClick: onRequiredToggle,
|
|
8774
|
-
className: "flex h-7 items-center gap-1.5 whitespace-nowrap rounded-md px-2 text-[13px] font-medium transition-colors " + (required ? "bg-
|
|
8593
|
+
className: "flex h-7 items-center gap-1.5 whitespace-nowrap rounded-md px-2 text-[13px] font-medium transition-colors " + (required ? "bg-primary/10 text-primary" : "text-foreground hover:bg-muted/70"),
|
|
8775
8594
|
"data-ohw-field-required-toggle": "",
|
|
8776
8595
|
children: [
|
|
8777
8596
|
/* @__PURE__ */ jsx13(Asterisk, { size: 14, strokeWidth: 2, "aria-hidden": true }),
|
|
@@ -8791,7 +8610,7 @@ function FormFieldToolbar({
|
|
|
8791
8610
|
children: /* @__PURE__ */ jsx13(MoreHorizontal2, { size: 15, "aria-hidden": true })
|
|
8792
8611
|
}
|
|
8793
8612
|
) }),
|
|
8794
|
-
/* @__PURE__ */ jsxs6(DropdownMenuContent, { align: "start", sideOffset: 8, className: "min-w-
|
|
8613
|
+
/* @__PURE__ */ jsxs6(DropdownMenuContent, { align: "start", sideOffset: 8, className: "min-w-[170px] p-1", children: [
|
|
8795
8614
|
/* @__PURE__ */ jsxs6(DropdownMenuItem, { onSelect: onDuplicate, className: "rounded-md py-2 text-[13px]", children: [
|
|
8796
8615
|
/* @__PURE__ */ jsx13(Copy2, { size: 14, strokeWidth: 1.75, className: "shrink-0", "aria-hidden": true }),
|
|
8797
8616
|
"Duplicate"
|
|
@@ -8819,7 +8638,7 @@ function FieldTypePicker({ onPick }) {
|
|
|
8819
8638
|
{
|
|
8820
8639
|
type: "button",
|
|
8821
8640
|
onClick: () => onPick(entry.type),
|
|
8822
|
-
className: "flex h-[76px] flex-col items-center justify-center gap-2 rounded-xl border border-border text-[15px] font-medium text-foreground transition-colors hover:border-
|
|
8641
|
+
className: "flex h-[76px] flex-col items-center justify-center gap-2 rounded-xl border border-border text-[15px] font-medium text-foreground transition-colors hover:border-primary hover:bg-primary/5",
|
|
8823
8642
|
children: [
|
|
8824
8643
|
/* @__PURE__ */ jsx13(Icon, { size: 26, strokeWidth: 1.5, "aria-hidden": true }),
|
|
8825
8644
|
entry.label
|
|
@@ -8845,7 +8664,7 @@ var buttonVariants = cva(
|
|
|
8845
8664
|
{
|
|
8846
8665
|
variants: {
|
|
8847
8666
|
variant: {
|
|
8848
|
-
default: "bg-
|
|
8667
|
+
default: "bg-primary text-primary-foreground hover:opacity-90",
|
|
8849
8668
|
outline: "border border-border bg-background text-foreground shadow-sm hover:bg-muted/80",
|
|
8850
8669
|
ghost: "min-w-0 px-3 py-2 text-foreground hover:bg-muted/50"
|
|
8851
8670
|
},
|
|
@@ -8940,7 +8759,6 @@ function MediaOverlay({
|
|
|
8940
8759
|
(prev) => prev && prev.fullWidth === width && prev.height === height ? prev : { fullWidth: width, height }
|
|
8941
8760
|
);
|
|
8942
8761
|
}, [isVideo]);
|
|
8943
|
-
const replaceLabel = isVideo ? "Replace video" : hover.elementType === "bg-image" ? "Replace background" : "Replace image";
|
|
8944
8762
|
const replaceMode = buttonSize ? replaceButtonMode({ width: rect.width, height: rect.height }, buttonSize) : "none";
|
|
8945
8763
|
const box = {
|
|
8946
8764
|
position: "fixed",
|
|
@@ -9046,8 +8864,8 @@ function MediaOverlay({
|
|
|
9046
8864
|
pointerEvents: hover.hasTextOverlap ? "none" : "auto",
|
|
9047
8865
|
// Selected: a firm component ring with no wash, so the image reads as chosen rather
|
|
9048
8866
|
// than hovered. Hover keeps the existing tinted preview.
|
|
9049
|
-
boxShadow: selected ? "inset 0 0 0 2px var(--color-
|
|
9050
|
-
background: selected ? "transparent" : "color-mix(in srgb, var(--color-
|
|
8867
|
+
boxShadow: selected ? "inset 0 0 0 2px var(--color-primary)" : "inset 0 0 0 1.5px var(--color-primary)",
|
|
8868
|
+
background: selected ? "transparent" : "color-mix(in srgb, var(--color-primary) 20%, transparent)"
|
|
9051
8869
|
},
|
|
9052
8870
|
onClick: () => onSelect && !selected ? onSelect(hover.key) : onReplace(hover.key),
|
|
9053
8871
|
children: [
|
|
@@ -9070,17 +8888,17 @@ function MediaOverlay({
|
|
|
9070
8888
|
},
|
|
9071
8889
|
children: [
|
|
9072
8890
|
isVideo ? /* @__PURE__ */ jsx15(Film, { size: 14 }) : /* @__PURE__ */ jsx15(ImageIcon, { size: 14 }),
|
|
9073
|
-
|
|
8891
|
+
isVideo ? "Replace video" : "Replace image"
|
|
9074
8892
|
]
|
|
9075
8893
|
}
|
|
9076
8894
|
),
|
|
9077
|
-
|
|
8895
|
+
replaceMode === "none" ? null : /* @__PURE__ */ jsxs7(
|
|
9078
8896
|
Button,
|
|
9079
8897
|
{
|
|
9080
8898
|
"data-ohw-media-overlay": "",
|
|
9081
8899
|
variant: "outline",
|
|
9082
8900
|
size: "sm",
|
|
9083
|
-
"aria-label":
|
|
8901
|
+
"aria-label": isVideo ? "Replace video" : "Replace image",
|
|
9084
8902
|
className: "gap-1.5 cursor-pointer hover:bg-background",
|
|
9085
8903
|
style: {
|
|
9086
8904
|
...OVERLAY_BUTTON_STYLE,
|
|
@@ -9103,7 +8921,7 @@ function MediaOverlay({
|
|
|
9103
8921
|
},
|
|
9104
8922
|
children: [
|
|
9105
8923
|
isVideo ? /* @__PURE__ */ jsx15(Film, { size: 14 }) : /* @__PURE__ */ jsx15(ImageIcon, { size: 14 }),
|
|
9106
|
-
replaceMode === "full" ?
|
|
8924
|
+
replaceMode === "full" ? isVideo ? "Replace video" : hover.elementType === "bg-image" ? "Replace background" : "Replace image" : null
|
|
9107
8925
|
]
|
|
9108
8926
|
}
|
|
9109
8927
|
)
|
|
@@ -9141,8 +8959,8 @@ function CarouselOverlay({
|
|
|
9141
8959
|
height: rect.height,
|
|
9142
8960
|
zIndex: 2147483646,
|
|
9143
8961
|
pointerEvents: "auto",
|
|
9144
|
-
boxShadow: "inset 0 0 0 1.5px var(--color-
|
|
9145
|
-
background: "color-mix(in srgb, var(--color-
|
|
8962
|
+
boxShadow: "inset 0 0 0 1.5px var(--color-primary)",
|
|
8963
|
+
background: "color-mix(in srgb, var(--color-primary) 20%, transparent)"
|
|
9146
8964
|
},
|
|
9147
8965
|
onClick: () => onEdit(hover.key),
|
|
9148
8966
|
children: /* @__PURE__ */ jsxs8(
|
|
@@ -9995,7 +9813,7 @@ function SectionTreeItem({
|
|
|
9995
9813
|
/* @__PURE__ */ jsx20(
|
|
9996
9814
|
"div",
|
|
9997
9815
|
{
|
|
9998
|
-
className: "
|
|
9816
|
+
className: "mr-[-1px] h-9 w-2 shrink-0 rounded-bl-sm border-b border-l border-border mb-4",
|
|
9999
9817
|
"aria-hidden": true
|
|
10000
9818
|
}
|
|
10001
9819
|
),
|
|
@@ -10014,7 +9832,7 @@ function SectionTreeItem({
|
|
|
10014
9832
|
className: cn(
|
|
10015
9833
|
"flex h-9 min-w-0 flex-1 items-center gap-2 rounded-md border border-border bg-background p-3",
|
|
10016
9834
|
interactive && "cursor-pointer hover:bg-muted/30",
|
|
10017
|
-
interactive && selected && "border-
|
|
9835
|
+
interactive && selected && "border-primary"
|
|
10018
9836
|
),
|
|
10019
9837
|
children: [
|
|
10020
9838
|
/* @__PURE__ */ jsx20(
|
|
@@ -10144,7 +9962,7 @@ function UrlOrPageInput({
|
|
|
10144
9962
|
};
|
|
10145
9963
|
const fieldClassName = cn(
|
|
10146
9964
|
"data-ohw-link-field flex h-[36px] w-full items-center overflow-hidden rounded-md border bg-background pl-3 pr-3 py-2 outline-none transition-[border-color,box-shadow]",
|
|
10147
|
-
urlError ? "border-destructive shadow-[0_0_0_1px_var(--ohw-destructive)]" : isFocused ? "border-
|
|
9965
|
+
urlError ? "border-destructive shadow-[0_0_0_1px_var(--ohw-destructive)]" : isFocused ? "border-primary shadow-[0_0_0_1px_var(--ohw-primary)]" : "border-input"
|
|
10148
9966
|
);
|
|
10149
9967
|
return /* @__PURE__ */ jsxs13("div", { className: "flex w-full flex-col gap-2 p-0", children: [
|
|
10150
9968
|
/* @__PURE__ */ jsx23(Label, { htmlFor: inputId, className: cn(urlError && "text-destructive"), children: "Destination" }),
|
|
@@ -14051,7 +13869,6 @@ function readLogoSizeState(content, placement) {
|
|
|
14051
13869
|
function getLogoElement(el) {
|
|
14052
13870
|
const marked = el.closest('[data-ohw-role="logo"], [data-ohw-logo]');
|
|
14053
13871
|
if (marked) return marked;
|
|
14054
|
-
if (el.closest('[data-ohw-editable="icon"]')) return null;
|
|
14055
13872
|
const root = el.closest("nav, [data-ohw-nav-root], footer");
|
|
14056
13873
|
if (!root) return null;
|
|
14057
13874
|
const anchor = el.closest("a");
|
|
@@ -14345,7 +14162,7 @@ function DisplaySwitch({
|
|
|
14345
14162
|
onClick: () => onChange(!checked),
|
|
14346
14163
|
className: cn(
|
|
14347
14164
|
"relative h-5 w-9 shrink-0 rounded-full transition-colors",
|
|
14348
|
-
checked ? "bg-
|
|
14165
|
+
checked ? "bg-primary" : "bg-primary-50",
|
|
14349
14166
|
disabled ? "cursor-default opacity-50" : "cursor-pointer"
|
|
14350
14167
|
),
|
|
14351
14168
|
children: /* @__PURE__ */ jsx28(
|
|
@@ -14353,7 +14170,7 @@ function DisplaySwitch({
|
|
|
14353
14170
|
{
|
|
14354
14171
|
className: cn(
|
|
14355
14172
|
"absolute top-0.5 h-4 w-4 rounded-full bg-white transition-all",
|
|
14356
|
-
checked ? "left-
|
|
14173
|
+
checked ? "left-[1.125rem]" : "left-0.5"
|
|
14357
14174
|
)
|
|
14358
14175
|
}
|
|
14359
14176
|
)
|
|
@@ -15988,7 +15805,7 @@ var badgeVariants = cva(
|
|
|
15988
15805
|
{
|
|
15989
15806
|
variants: {
|
|
15990
15807
|
variant: {
|
|
15991
|
-
default: "border-transparent bg-
|
|
15808
|
+
default: "border-transparent bg-primary text-primary-foreground",
|
|
15992
15809
|
secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
15993
15810
|
destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
|
|
15994
15811
|
outline: "text-foreground"
|
|
@@ -16170,10 +15987,21 @@ function parseSchedulingInsertAfter(insertAfter) {
|
|
|
16170
15987
|
insertBefore: insertAfter.slice(idx + INSERT_BEFORE_MARKER.length)
|
|
16171
15988
|
};
|
|
16172
15989
|
}
|
|
16173
|
-
function
|
|
16174
|
-
|
|
16175
|
-
const
|
|
16176
|
-
|
|
15990
|
+
function resolveSchedulingInsert(insertAfter, explicitInsertBefore) {
|
|
15991
|
+
const parsed = parseSchedulingInsertAfter(insertAfter);
|
|
15992
|
+
const insertBefore = explicitInsertBefore ?? parsed.insertBefore;
|
|
15993
|
+
const effectiveInsertAfter = insertBefore && parsed.insertBefore === null ? `${insertAfter}${INSERT_BEFORE_MARKER}${insertBefore}` : insertAfter;
|
|
15994
|
+
return { effectiveInsertAfter, insertBefore };
|
|
15995
|
+
}
|
|
15996
|
+
function getSchedulingMountPoint(insertAfter) {
|
|
15997
|
+
const { anchor } = parseSchedulingInsertAfter(insertAfter);
|
|
15998
|
+
let anchorEl = document.querySelector(`[data-ohw-section="${anchor}"]`);
|
|
15999
|
+
if (!anchorEl && anchor === "scheduling") {
|
|
16000
|
+
const widgets = Array.from(document.querySelectorAll('[data-ohw-section^="scheduling-"]'));
|
|
16001
|
+
anchorEl = widgets.at(-1) ?? null;
|
|
16002
|
+
}
|
|
16003
|
+
if (!anchorEl) return null;
|
|
16004
|
+
return anchorEl.closest('[data-ohw-section-container="scheduling"]') ?? anchorEl;
|
|
16177
16005
|
}
|
|
16178
16006
|
function schedulingMountDepth(insertAfter) {
|
|
16179
16007
|
if (!insertAfter.includes(INSERT_BEFORE_MARKER)) return 0;
|
|
@@ -16190,7 +16018,8 @@ function getPageSchedulingEntries(raw) {
|
|
|
16190
16018
|
}
|
|
16191
16019
|
}
|
|
16192
16020
|
function isSchedulingWidgetMissing(entry) {
|
|
16193
|
-
|
|
16021
|
+
const { effectiveInsertAfter } = resolveSchedulingInsert(entry.insertAfter);
|
|
16022
|
+
return !document.querySelector(`[data-ohw-section="${schedulingSectionId(effectiveInsertAfter)}"]`);
|
|
16194
16023
|
}
|
|
16195
16024
|
function hasMissingSchedulingWidgets(entries) {
|
|
16196
16025
|
return entries.some(isSchedulingWidgetMissing);
|
|
@@ -16228,18 +16057,17 @@ function initSectionsFromContent(content, removeExisting = false, currentPath =
|
|
|
16228
16057
|
} catch {
|
|
16229
16058
|
}
|
|
16230
16059
|
}
|
|
16231
|
-
function mountSchedulingWidget(
|
|
16232
|
-
const
|
|
16233
|
-
const sectionId = schedulingSectionId(
|
|
16060
|
+
function mountSchedulingWidget(insertAfter, notifyOnConnect = false, scheduleId, explicitInsertBefore) {
|
|
16061
|
+
const { effectiveInsertAfter, insertBefore } = resolveSchedulingInsert(insertAfter, explicitInsertBefore);
|
|
16062
|
+
const sectionId = schedulingSectionId(effectiveInsertAfter);
|
|
16234
16063
|
if (document.querySelector(`[data-ohw-section="${sectionId}"]`)) return false;
|
|
16235
|
-
const
|
|
16236
|
-
if (!
|
|
16237
|
-
const mountPoint = anchorEl.closest('[data-ohw-section-container="scheduling"]') ?? anchorEl;
|
|
16064
|
+
const mountPoint = getSchedulingMountPoint(effectiveInsertAfter);
|
|
16065
|
+
if (!mountPoint) return false;
|
|
16238
16066
|
const container = document.createElement("div");
|
|
16239
16067
|
container.dataset.ohwSectionContainer = "scheduling";
|
|
16240
16068
|
container.dataset.ohwInstance = sectionId;
|
|
16241
|
-
if (
|
|
16242
|
-
const beforeAnchor = document.querySelector(`[data-ohw-section="${
|
|
16069
|
+
if (insertBefore) {
|
|
16070
|
+
const beforeAnchor = document.querySelector(`[data-ohw-section="${insertBefore}"]`);
|
|
16243
16071
|
const beforePoint = beforeAnchor?.closest('[data-ohw-section-container="scheduling"]') ?? beforeAnchor;
|
|
16244
16072
|
if (!beforePoint) return false;
|
|
16245
16073
|
beforePoint.insertAdjacentElement("beforebegin", container);
|
|
@@ -16250,26 +16078,20 @@ function mountSchedulingWidget(anchorId, notifyOnConnect = false, scheduleId, be
|
|
|
16250
16078
|
}
|
|
16251
16079
|
tail.insertAdjacentElement("afterend", container);
|
|
16252
16080
|
}
|
|
16253
|
-
|
|
16254
|
-
|
|
16255
|
-
|
|
16256
|
-
|
|
16257
|
-
|
|
16258
|
-
|
|
16259
|
-
|
|
16260
|
-
|
|
16261
|
-
|
|
16262
|
-
|
|
16263
|
-
|
|
16264
|
-
|
|
16265
|
-
|
|
16266
|
-
|
|
16267
|
-
});
|
|
16268
|
-
} catch (err) {
|
|
16269
|
-
console.error("[ow:scheduling] render threw", err);
|
|
16270
|
-
container.remove();
|
|
16271
|
-
return false;
|
|
16272
|
-
}
|
|
16081
|
+
const root = createRoot2(container);
|
|
16082
|
+
schedulingRoots.set(container, root);
|
|
16083
|
+
flushSync2(() => {
|
|
16084
|
+
root.render(
|
|
16085
|
+
/* @__PURE__ */ jsx33(
|
|
16086
|
+
SchedulingWidget,
|
|
16087
|
+
{
|
|
16088
|
+
notifyOnConnect,
|
|
16089
|
+
initialScheduleId: scheduleId,
|
|
16090
|
+
insertAfter: effectiveInsertAfter
|
|
16091
|
+
}
|
|
16092
|
+
)
|
|
16093
|
+
);
|
|
16094
|
+
});
|
|
16273
16095
|
const tracker = getSectionsTracker();
|
|
16274
16096
|
let sections = [];
|
|
16275
16097
|
try {
|
|
@@ -16277,12 +16099,10 @@ function mountSchedulingWidget(anchorId, notifyOnConnect = false, scheduleId, be
|
|
|
16277
16099
|
} catch {
|
|
16278
16100
|
}
|
|
16279
16101
|
const inEditor = typeof window !== "undefined" && window.self !== window.top;
|
|
16280
|
-
if (inEditor && !sections.find((s) => s.type === "scheduling" && s.insertAfter ===
|
|
16102
|
+
if (inEditor && !sections.find((s) => s.type === "scheduling" && s.insertAfter === effectiveInsertAfter)) {
|
|
16281
16103
|
sections.push({
|
|
16282
16104
|
type: "scheduling",
|
|
16283
|
-
insertAfter:
|
|
16284
|
-
anchorId,
|
|
16285
|
-
beforeId: beforeId ?? null,
|
|
16105
|
+
insertAfter: effectiveInsertAfter,
|
|
16286
16106
|
pagePath: window.location.pathname,
|
|
16287
16107
|
...scheduleId ? { scheduleId } : {}
|
|
16288
16108
|
});
|
|
@@ -16296,8 +16116,7 @@ function mountSchedulingEntries(entries, notifyOnConnect = false) {
|
|
|
16296
16116
|
for (let i = pending.length - 1; i >= 0; i--) {
|
|
16297
16117
|
const entry = pending[i];
|
|
16298
16118
|
const shouldNotify = typeof notifyOnConnect === "function" ? notifyOnConnect(entry) : notifyOnConnect;
|
|
16299
|
-
|
|
16300
|
-
if (mountSchedulingWidget(anchorId, shouldNotify, entry.scheduleId ?? null, beforeId, entry.insertAfter)) {
|
|
16119
|
+
if (mountSchedulingWidget(entry.insertAfter, shouldNotify, entry.scheduleId ?? null)) {
|
|
16301
16120
|
pending.splice(i, 1);
|
|
16302
16121
|
}
|
|
16303
16122
|
}
|
|
@@ -16461,11 +16280,6 @@ function applyLinkByKey(key, val) {
|
|
|
16461
16280
|
hrefAnchors.forEach((el) => applyLinkHref(el, val));
|
|
16462
16281
|
}
|
|
16463
16282
|
}
|
|
16464
|
-
function isInsideLinkEditor(target) {
|
|
16465
|
-
return Boolean(
|
|
16466
|
-
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"]')
|
|
16467
|
-
);
|
|
16468
|
-
}
|
|
16469
16283
|
function isInsideFloatingPanel(target) {
|
|
16470
16284
|
return Boolean(target.closest("[data-ohw-floating-panel]"));
|
|
16471
16285
|
}
|
|
@@ -16473,6 +16287,11 @@ function isPointOverFloatingPanel(clientX, clientY) {
|
|
|
16473
16287
|
const el = document.elementFromPoint(clientX, clientY);
|
|
16474
16288
|
return Boolean(el instanceof Element && el.closest("[data-ohw-floating-panel]"));
|
|
16475
16289
|
}
|
|
16290
|
+
function isInsideLinkEditor(target) {
|
|
16291
|
+
return Boolean(
|
|
16292
|
+
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"]')
|
|
16293
|
+
);
|
|
16294
|
+
}
|
|
16476
16295
|
function getHrefKeyFromElement(el) {
|
|
16477
16296
|
if (!el) return null;
|
|
16478
16297
|
const anchor = el.closest("[data-ohw-href-key]");
|
|
@@ -16741,7 +16560,7 @@ function getNavigationSelectionParent(el) {
|
|
|
16741
16560
|
if (!isFooterLinksContainer(el) && (el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isInferredFooterGroup2(el))) {
|
|
16742
16561
|
return getFooterLinksContainer();
|
|
16743
16562
|
}
|
|
16744
|
-
if (el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-nav-drawer") ||
|
|
16563
|
+
if (el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-nav-drawer") || isFooterLinksContainer(el)) {
|
|
16745
16564
|
return getNavigationRoot(el);
|
|
16746
16565
|
}
|
|
16747
16566
|
return null;
|
|
@@ -16957,6 +16776,7 @@ var ICONS = {
|
|
|
16957
16776
|
insertUnorderedList: '<line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>',
|
|
16958
16777
|
insertOrderedList: '<line x1="10" y1="6" x2="21" y2="6"/><line x1="10" y1="12" x2="21" y2="12"/><line x1="10" y1="18" x2="21" y2="18"/><path d="M4 6h1v4"/><path d="M4 10h2"/><path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"/>'
|
|
16959
16778
|
};
|
|
16779
|
+
var HEIGHT_SETTLE_DELAYS = [150, 400, 800];
|
|
16960
16780
|
var SELECTION_CHROME_GAP2 = 4;
|
|
16961
16781
|
var TOOLBAR_STROKE_GAP2 = 4;
|
|
16962
16782
|
var TOOLBAR_OFFSET_FROM_ELEMENT = SELECTION_CHROME_GAP2 + TOOLBAR_STROKE_GAP2;
|
|
@@ -17340,7 +17160,6 @@ function StateToggle({
|
|
|
17340
17160
|
);
|
|
17341
17161
|
}
|
|
17342
17162
|
var contentCache = /* @__PURE__ */ new Map();
|
|
17343
|
-
var fetchedContentPaths = /* @__PURE__ */ new Set();
|
|
17344
17163
|
var brandingCache = /* @__PURE__ */ new Map();
|
|
17345
17164
|
var OHW_LOADER_STYLE = {
|
|
17346
17165
|
position: "fixed",
|
|
@@ -17889,6 +17708,13 @@ function OhhwellsBridge() {
|
|
|
17889
17708
|
const [isItemDragging, setIsItemDragging] = useState14(false);
|
|
17890
17709
|
const [isFooterFrameSelection, setIsFooterFrameSelection] = useState14(false);
|
|
17891
17710
|
isFooterFrameSelectionRef.current = isFooterFrameSelection;
|
|
17711
|
+
const [floatingPanel, setFloatingPanel] = useState14(null);
|
|
17712
|
+
const floatingPanelOpenRef = useRef10(false);
|
|
17713
|
+
floatingPanelOpenRef.current = floatingPanel !== null;
|
|
17714
|
+
const [floatingPanelPos, setFloatingPanelPos] = useState14(null);
|
|
17715
|
+
const [logoSizeDraft, setLogoSizeDraft] = useState14(null);
|
|
17716
|
+
const [editorViewport, setEditorViewport] = useState14("desktop");
|
|
17717
|
+
const [parentScrollSnap, setParentScrollSnap] = useState14(null);
|
|
17892
17718
|
const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = useState14(null);
|
|
17893
17719
|
const [footerHeadingVisible, setFooterHeadingVisible] = useState14(null);
|
|
17894
17720
|
const footerDragRef = useRef10(null);
|
|
@@ -17905,15 +17731,7 @@ function OhhwellsBridge() {
|
|
|
17905
17731
|
const aiSectionsRef = useRef10("");
|
|
17906
17732
|
const brandKitRef = useRef10("");
|
|
17907
17733
|
const stylesRef = useRef10("");
|
|
17908
|
-
const appliedDrawerRef = useRef10(null);
|
|
17909
17734
|
const pendingDeleteUndoRef = useRef10(null);
|
|
17910
|
-
const [floatingPanel, setFloatingPanel] = useState14(null);
|
|
17911
|
-
const floatingPanelOpenRef = useRef10(false);
|
|
17912
|
-
const setFloatingPanelRef = useRef10(setFloatingPanel);
|
|
17913
|
-
const [floatingPanelPos, setFloatingPanelPos] = useState14(null);
|
|
17914
|
-
const [logoSizeDraft, setLogoSizeDraft] = useState14(null);
|
|
17915
|
-
const [editorViewport, setEditorViewport] = useState14("desktop");
|
|
17916
|
-
const [parentScrollSnap, setParentScrollSnap] = useState14(null);
|
|
17917
17735
|
const [sitePages, setSitePages] = useState14([]);
|
|
17918
17736
|
const [sectionsByPath, setSectionsByPath] = useState14({});
|
|
17919
17737
|
const sectionsPrefetchGenRef = useRef10(0);
|
|
@@ -17922,18 +17740,7 @@ function OhhwellsBridge() {
|
|
|
17922
17740
|
const linkPopoverOpenRef = useRef10(false);
|
|
17923
17741
|
const linkPopoverGraceUntilRef = useRef10(0);
|
|
17924
17742
|
setLinkPopoverRef.current = setLinkPopover;
|
|
17925
|
-
setFloatingPanelRef.current = setFloatingPanel;
|
|
17926
17743
|
linkPopoverSessionRef.current = linkPopover;
|
|
17927
|
-
floatingPanelOpenRef.current = Boolean(floatingPanel);
|
|
17928
|
-
useEffect13(() => {
|
|
17929
|
-
const syncViewport = () => {
|
|
17930
|
-
const next = window.innerWidth <= 480 ? "mobile" : "desktop";
|
|
17931
|
-
setEditorViewport((prev) => prev === next ? prev : next);
|
|
17932
|
-
};
|
|
17933
|
-
syncViewport();
|
|
17934
|
-
window.addEventListener("resize", syncViewport);
|
|
17935
|
-
return () => window.removeEventListener("resize", syncViewport);
|
|
17936
|
-
}, []);
|
|
17937
17744
|
const {
|
|
17938
17745
|
navDragRef,
|
|
17939
17746
|
navPointerDragRef,
|
|
@@ -19269,7 +19076,6 @@ function OhhwellsBridge() {
|
|
|
19269
19076
|
}
|
|
19270
19077
|
if (typeof content[STYLE_STORE_KEY] === "string") {
|
|
19271
19078
|
stylesRef.current = content[STYLE_STORE_KEY];
|
|
19272
|
-
document.querySelectorAll('[data-ohw-editable="form"]').forEach((f) => markFormFields(f));
|
|
19273
19079
|
applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
|
|
19274
19080
|
}
|
|
19275
19081
|
applyBrandChrome(content);
|
|
@@ -19277,11 +19083,11 @@ function OhhwellsBridge() {
|
|
|
19277
19083
|
for (const [key, val] of Object.entries(content)) {
|
|
19278
19084
|
if (key === "__ohw_sections") continue;
|
|
19279
19085
|
if (key === AI_SECTIONS_KEY) continue;
|
|
19280
|
-
if (key === LOGO_PLACEHOLDER_KEY) continue;
|
|
19281
|
-
if (LOGO_IMAGE_KEYS.includes(key)) continue;
|
|
19282
19086
|
if (key === BRAND_KIT_KEY) continue;
|
|
19283
19087
|
if (key === STYLE_STORE_KEY) continue;
|
|
19284
19088
|
if (BRAND_CHROME_KEYS.has(key)) continue;
|
|
19089
|
+
if (key === LOGO_PLACEHOLDER_KEY) continue;
|
|
19090
|
+
if (LOGO_IMAGE_KEYS.includes(key)) continue;
|
|
19285
19091
|
if (applyVideoSettingNode(key, val)) continue;
|
|
19286
19092
|
if (applyCarouselNode(key, val)) continue;
|
|
19287
19093
|
document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
|
|
@@ -19352,9 +19158,7 @@ function OhhwellsBridge() {
|
|
|
19352
19158
|
let cancelled = false;
|
|
19353
19159
|
setFetchState("loading");
|
|
19354
19160
|
const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
|
|
19355
|
-
|
|
19356
|
-
fetchedContentPaths.add(`${subdomain}::${initialPath}`);
|
|
19357
|
-
fetch(`${apiUrl}/api/public/sites/${subdomain}/content?path=${encodeURIComponent(initialPath)}`, { cache: "no-store" }).then((r2) => r2.ok ? r2.json() : null).then((data) => {
|
|
19161
|
+
fetch(`${apiUrl}/api/public/sites/${subdomain}/content`, { cache: "no-store" }).then((r2) => r2.ok ? r2.json() : null).then((data) => {
|
|
19358
19162
|
if (cancelled) return;
|
|
19359
19163
|
const content = data?.content ?? {};
|
|
19360
19164
|
const branding = Boolean(data?.showBranding);
|
|
@@ -19463,9 +19267,7 @@ function OhhwellsBridge() {
|
|
|
19463
19267
|
}, [isEditMode]);
|
|
19464
19268
|
useEffect13(() => {
|
|
19465
19269
|
if (isEditMode || fetchState !== "done") return;
|
|
19466
|
-
console.log("env", process.env.NEXT_PUBLIC_FLOWOPS_API_URL);
|
|
19467
19270
|
const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
|
|
19468
|
-
console.log({ apiUrl, subdomain });
|
|
19469
19271
|
bindPublishedForms(apiUrl, subdomain, contentCache.get(subdomain) ?? {});
|
|
19470
19272
|
}, [isEditMode, fetchState, subdomain]);
|
|
19471
19273
|
useEffect13(() => {
|
|
@@ -19490,17 +19292,16 @@ function OhhwellsBridge() {
|
|
|
19490
19292
|
applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
|
|
19491
19293
|
}
|
|
19492
19294
|
if (typeof content[STYLE_STORE_KEY] === "string") {
|
|
19493
|
-
document.querySelectorAll('[data-ohw-editable="form"]').forEach((f) => markFormFields(f));
|
|
19494
19295
|
applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
|
|
19495
19296
|
}
|
|
19496
19297
|
for (const [key, val] of Object.entries(content)) {
|
|
19497
19298
|
if (key === "__ohw_sections") continue;
|
|
19498
19299
|
if (key === AI_SECTIONS_KEY) continue;
|
|
19499
|
-
if (key === LOGO_PLACEHOLDER_KEY) continue;
|
|
19500
|
-
if (LOGO_IMAGE_KEYS.includes(key)) continue;
|
|
19501
19300
|
if (key === BRAND_KIT_KEY) continue;
|
|
19502
19301
|
if (key === STYLE_STORE_KEY) continue;
|
|
19503
19302
|
if (BRAND_CHROME_KEYS.has(key)) continue;
|
|
19303
|
+
if (key === LOGO_PLACEHOLDER_KEY) continue;
|
|
19304
|
+
if (LOGO_IMAGE_KEYS.includes(key)) continue;
|
|
19504
19305
|
if (applyVideoSettingNode(key, val)) continue;
|
|
19505
19306
|
if (applyCarouselNode(key, val)) continue;
|
|
19506
19307
|
document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
|
|
@@ -19551,17 +19352,6 @@ function OhhwellsBridge() {
|
|
|
19551
19352
|
debounceTimer = setTimeout(applyFromCache, 150);
|
|
19552
19353
|
};
|
|
19553
19354
|
applyFromCache();
|
|
19554
|
-
const pathCacheKey = `${subdomain}::${pathname}`;
|
|
19555
|
-
if (!fetchedContentPaths.has(pathCacheKey)) {
|
|
19556
|
-
fetchedContentPaths.add(pathCacheKey);
|
|
19557
|
-
const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
|
|
19558
|
-
fetch(`${apiUrl}/api/public/sites/${subdomain}/content?path=${encodeURIComponent(pathname)}`, { cache: "no-store" }).then((r2) => r2.ok ? r2.json() : null).then((data) => {
|
|
19559
|
-
if (!data?.content) return;
|
|
19560
|
-
contentCache.set(subdomain, data.content);
|
|
19561
|
-
applyFromCache();
|
|
19562
|
-
}).catch(() => {
|
|
19563
|
-
});
|
|
19564
|
-
}
|
|
19565
19355
|
observer = new MutationObserver(scheduleApply);
|
|
19566
19356
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
19567
19357
|
return () => {
|
|
@@ -19606,17 +19396,6 @@ function OhhwellsBridge() {
|
|
|
19606
19396
|
if (!isEditMode) return;
|
|
19607
19397
|
initSectionInstancesFromContent(editContentRef.current, pathname);
|
|
19608
19398
|
}, [pathname, isEditMode]);
|
|
19609
|
-
useEffect13(() => {
|
|
19610
|
-
if (!isEditMode) return;
|
|
19611
|
-
const observer = new MutationObserver(() => {
|
|
19612
|
-
const drawer = document.querySelector("[data-ohw-nav-drawer]");
|
|
19613
|
-
if (!drawer || drawer === appliedDrawerRef.current) return;
|
|
19614
|
-
appliedDrawerRef.current = drawer;
|
|
19615
|
-
applyStylesToDom(parseStyleStore(stylesRef.current));
|
|
19616
|
-
});
|
|
19617
|
-
observer.observe(document.body, { childList: true, subtree: true });
|
|
19618
|
-
return () => observer.disconnect();
|
|
19619
|
-
}, [isEditMode, pathname]);
|
|
19620
19399
|
useEffect13(() => {
|
|
19621
19400
|
const contentForNav = () => {
|
|
19622
19401
|
if (isEditMode) return editContentRef.current;
|
|
@@ -19708,11 +19487,26 @@ function OhhwellsBridge() {
|
|
|
19708
19487
|
const t2 = setTimeout(measure, 500);
|
|
19709
19488
|
const ro = new ResizeObserver(schedule);
|
|
19710
19489
|
ro.observe(document.body);
|
|
19490
|
+
let lastWidth = window.innerWidth;
|
|
19491
|
+
let resizeTimers = [];
|
|
19492
|
+
const clearResizeTimers = () => {
|
|
19493
|
+
resizeTimers.forEach(clearTimeout);
|
|
19494
|
+
resizeTimers = [];
|
|
19495
|
+
};
|
|
19496
|
+
const handleResize = () => {
|
|
19497
|
+
if (window.innerWidth === lastWidth) return;
|
|
19498
|
+
lastWidth = window.innerWidth;
|
|
19499
|
+
clearResizeTimers();
|
|
19500
|
+
resizeTimers = HEIGHT_SETTLE_DELAYS.map((delay) => setTimeout(measure, delay));
|
|
19501
|
+
};
|
|
19502
|
+
window.addEventListener("resize", handleResize);
|
|
19711
19503
|
return () => {
|
|
19712
19504
|
clearTimeout(t1);
|
|
19713
19505
|
clearTimeout(t2);
|
|
19714
19506
|
if (raf != null) cancelAnimationFrame(raf);
|
|
19715
19507
|
ro.disconnect();
|
|
19508
|
+
clearResizeTimers();
|
|
19509
|
+
window.removeEventListener("resize", handleResize);
|
|
19716
19510
|
};
|
|
19717
19511
|
}, [pathname, isEditMode, postToParent2]);
|
|
19718
19512
|
useEffect13(() => {
|
|
@@ -20007,6 +19801,9 @@ function OhhwellsBridge() {
|
|
|
20007
19801
|
if (target.closest("[data-ohw-state-toggle]")) return;
|
|
20008
19802
|
if (target.closest("[data-ohw-max-badge]")) return;
|
|
20009
19803
|
if (isInsideLinkEditor(target)) return;
|
|
19804
|
+
if (selectedMediaElRef.current && !selectedMediaElRef.current.contains(target) && !target.closest("[data-ohw-media-overlay], [data-ohw-edit-chrome], [data-ohw-item-interaction]")) {
|
|
19805
|
+
clearMediaSelectionRef.current();
|
|
19806
|
+
}
|
|
20010
19807
|
if (isInsideFloatingPanel(target)) return;
|
|
20011
19808
|
if (target.closest("[data-ohw-form-toolbar]")) return;
|
|
20012
19809
|
if (target.closest(
|
|
@@ -20014,9 +19811,6 @@ function OhhwellsBridge() {
|
|
|
20014
19811
|
)) {
|
|
20015
19812
|
return;
|
|
20016
19813
|
}
|
|
20017
|
-
if (selectedMediaElRef.current && !selectedMediaElRef.current.contains(target) && !target.closest("[data-ohw-media-overlay], [data-ohw-edit-chrome], [data-ohw-item-interaction]")) {
|
|
20018
|
-
clearMediaSelectionRef.current();
|
|
20019
|
-
}
|
|
20020
19814
|
{
|
|
20021
19815
|
const formEl = getFormElement(target);
|
|
20022
19816
|
const onSuccessText = target.closest(`[${SUCCESS_TEXT_ATTR}]`);
|
|
@@ -20180,6 +19974,14 @@ function OhhwellsBridge() {
|
|
|
20180
19974
|
}
|
|
20181
19975
|
const clickedButton = findClosestButtonLike(target);
|
|
20182
19976
|
const buttonOnMedia = Boolean(clickedButton && isMediaEditable(editable) && editable.contains(clickedButton));
|
|
19977
|
+
console.log("[click-debug]", {
|
|
19978
|
+
editableType: editable.dataset.ohwEditable,
|
|
19979
|
+
editableTag: editable.tagName,
|
|
19980
|
+
targetTag: target.tagName,
|
|
19981
|
+
clickedButtonTag: clickedButton?.tagName ?? null,
|
|
19982
|
+
buttonOnMedia,
|
|
19983
|
+
isMediaEditableEditable: isMediaEditable(editable)
|
|
19984
|
+
});
|
|
20183
19985
|
if (isMediaEditable(editable) && !buttonOnMedia) {
|
|
20184
19986
|
e.preventDefault();
|
|
20185
19987
|
e.stopPropagation();
|
|
@@ -20206,6 +20008,11 @@ function OhhwellsBridge() {
|
|
|
20206
20008
|
const hrefLookupTarget = buttonOnMedia ? clickedButton : editable;
|
|
20207
20009
|
const hrefCtx = getHrefKeyFromElement(hrefLookupTarget);
|
|
20208
20010
|
const navAnchor = hrefCtx ? getNavigationItemAnchor(hrefCtx.anchor) : null;
|
|
20011
|
+
console.log("[click-debug 2]", {
|
|
20012
|
+
hrefLookupTargetTag: hrefLookupTarget.tagName,
|
|
20013
|
+
hrefCtx: hrefCtx ? { key: hrefCtx.key } : null,
|
|
20014
|
+
navAnchorTag: navAnchor?.tagName ?? null
|
|
20015
|
+
});
|
|
20209
20016
|
if (navAnchor) {
|
|
20210
20017
|
e.preventDefault();
|
|
20211
20018
|
e.stopPropagation();
|
|
@@ -20375,9 +20182,6 @@ function OhhwellsBridge() {
|
|
|
20375
20182
|
setHoveredItemRect(null);
|
|
20376
20183
|
hoveredNavContainerRef.current = null;
|
|
20377
20184
|
setHoveredNavContainerRect(null);
|
|
20378
|
-
siblingHintElRef.current = null;
|
|
20379
|
-
setSiblingHintRect(null);
|
|
20380
|
-
setSiblingHintRects([]);
|
|
20381
20185
|
return;
|
|
20382
20186
|
}
|
|
20383
20187
|
{
|
|
@@ -20498,6 +20302,7 @@ function OhhwellsBridge() {
|
|
|
20498
20302
|
hoveredNavContainerRef.current = null;
|
|
20499
20303
|
setHoveredNavContainerRect(null);
|
|
20500
20304
|
hoveredItemElRef.current = editable;
|
|
20305
|
+
setHoveredItemRect(isSelectedForHoverRef.current(editable) ? null : editable.getBoundingClientRect());
|
|
20501
20306
|
}
|
|
20502
20307
|
}
|
|
20503
20308
|
}
|
|
@@ -20794,7 +20599,7 @@ function OhhwellsBridge() {
|
|
|
20794
20599
|
}
|
|
20795
20600
|
};
|
|
20796
20601
|
const probeImageAt = (clientX, clientY, isDragOver = false, fromParentViewport = false) => {
|
|
20797
|
-
if (linkPopoverOpenRef.current
|
|
20602
|
+
if (linkPopoverOpenRef.current) {
|
|
20798
20603
|
if (hoveredImageRef.current) {
|
|
20799
20604
|
hoveredImageRef.current = null;
|
|
20800
20605
|
hoveredImageHasTextOverlapRef.current = false;
|
|
@@ -21167,7 +20972,8 @@ function OhhwellsBridge() {
|
|
|
21167
20972
|
};
|
|
21168
20973
|
const handleMouseMove = (e) => {
|
|
21169
20974
|
const { clientX, clientY } = e;
|
|
21170
|
-
if (
|
|
20975
|
+
if (pointOwnedByFloatingPanel(clientX, clientY)) return;
|
|
20976
|
+
if (isOverEditorChrome(clientX, clientY)) {
|
|
21171
20977
|
document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
|
|
21172
20978
|
formHoverElRef.current = null;
|
|
21173
20979
|
setFormHoverRect(null);
|
|
@@ -21175,12 +20981,7 @@ function OhhwellsBridge() {
|
|
|
21175
20981
|
setHoveredItemRect(null);
|
|
21176
20982
|
hoveredNavContainerRef.current = null;
|
|
21177
20983
|
setHoveredNavContainerRect(null);
|
|
21178
|
-
siblingHintElRef.current = null;
|
|
21179
|
-
setSiblingHintRect(null);
|
|
21180
|
-
setSiblingHintRects([]);
|
|
21181
20984
|
dismissImageHover();
|
|
21182
|
-
clearImageHover();
|
|
21183
|
-
setSectionGap(null);
|
|
21184
20985
|
return;
|
|
21185
20986
|
}
|
|
21186
20987
|
if (probeSocialsRowAt(clientX, clientY)) return;
|
|
@@ -21192,11 +20993,7 @@ function OhhwellsBridge() {
|
|
|
21192
20993
|
if (e.data?.type !== "ow:pointer-sync") return;
|
|
21193
20994
|
const { clientX, clientY } = e.data;
|
|
21194
20995
|
if (typeof clientX !== "number" || typeof clientY !== "number") return;
|
|
21195
|
-
if (
|
|
21196
|
-
dismissImageHover();
|
|
21197
|
-
clearImageHover();
|
|
21198
|
-
return;
|
|
21199
|
-
}
|
|
20996
|
+
if (pointOwnedByFloatingPanel(clientX, clientY)) return;
|
|
21200
20997
|
if (probeSocialsRowAt(clientX, clientY)) return;
|
|
21201
20998
|
probeSectionGapAt(clientX, clientY);
|
|
21202
20999
|
probeImageAt(clientX, clientY);
|
|
@@ -21535,7 +21332,6 @@ function OhhwellsBridge() {
|
|
|
21535
21332
|
}
|
|
21536
21333
|
if (typeof content[STYLE_STORE_KEY] === "string") {
|
|
21537
21334
|
stylesRef.current = content[STYLE_STORE_KEY];
|
|
21538
|
-
document.querySelectorAll('[data-ohw-editable="form"]').forEach((f) => markFormFields(f));
|
|
21539
21335
|
applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
|
|
21540
21336
|
}
|
|
21541
21337
|
applyBrandChrome(content);
|
|
@@ -21547,11 +21343,11 @@ function OhhwellsBridge() {
|
|
|
21547
21343
|
continue;
|
|
21548
21344
|
}
|
|
21549
21345
|
if (key === AI_SECTIONS_KEY) continue;
|
|
21550
|
-
if (key === LOGO_PLACEHOLDER_KEY) continue;
|
|
21551
|
-
if (LOGO_IMAGE_KEYS.includes(key) && !String(val ?? "").trim()) continue;
|
|
21552
21346
|
if (key === BRAND_KIT_KEY) continue;
|
|
21553
21347
|
if (key === STYLE_STORE_KEY) continue;
|
|
21554
21348
|
if (BRAND_CHROME_KEYS.has(key)) continue;
|
|
21349
|
+
if (key === LOGO_PLACEHOLDER_KEY) continue;
|
|
21350
|
+
if (LOGO_IMAGE_KEYS.includes(key) && !String(val ?? "").trim()) continue;
|
|
21555
21351
|
if (applyVideoSettingNode(key, val)) continue;
|
|
21556
21352
|
if (applyCarouselNode(key, val)) continue;
|
|
21557
21353
|
document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
|
|
@@ -21776,26 +21572,10 @@ function OhhwellsBridge() {
|
|
|
21776
21572
|
const handleGetBrand = (e) => {
|
|
21777
21573
|
if (e.data?.type !== "ow:get-brand") return;
|
|
21778
21574
|
const template = deriveTemplateBrand();
|
|
21779
|
-
const
|
|
21780
|
-
const fonts = deriveTemplateFonts();
|
|
21781
|
-
return fonts ? { palette: AI_DEFAULT_BRAND.palette, fonts } : null;
|
|
21782
|
-
})();
|
|
21783
|
-
const value = brandKitRef.current || (fallback ? JSON.stringify(fallback) : "");
|
|
21575
|
+
const value = brandKitRef.current || (template ? JSON.stringify(template) : "");
|
|
21784
21576
|
postToParentRef.current({ type: "ow:brand-value", value });
|
|
21785
21577
|
};
|
|
21786
21578
|
window.addEventListener("message", handleGetBrand);
|
|
21787
|
-
const handleGetTemplateFonts = (e) => {
|
|
21788
|
-
if (e.data?.type !== "ow:get-template-fonts") return;
|
|
21789
|
-
const fonts = deriveTemplateFonts();
|
|
21790
|
-
postToParentRef.current({ type: "ow:template-fonts-value", value: fonts ? JSON.stringify(fonts) : "" });
|
|
21791
|
-
};
|
|
21792
|
-
window.addEventListener("message", handleGetTemplateFonts);
|
|
21793
|
-
const handleGetTemplateBrand = (e) => {
|
|
21794
|
-
if (e.data?.type !== "ow:get-template-brand") return;
|
|
21795
|
-
const brand = deriveTemplateBrand();
|
|
21796
|
-
postToParentRef.current({ type: "ow:template-brand-value", value: brand ? JSON.stringify(brand) : "" });
|
|
21797
|
-
};
|
|
21798
|
-
window.addEventListener("message", handleGetTemplateBrand);
|
|
21799
21579
|
const handleMoveSection = (e) => {
|
|
21800
21580
|
if (e.data?.type !== "ow:move-section") return;
|
|
21801
21581
|
const instanceId = typeof e.data.instanceId === "string" ? e.data.instanceId : "";
|
|
@@ -21988,12 +21768,6 @@ function OhhwellsBridge() {
|
|
|
21988
21768
|
closeLinkPopoverRef.current();
|
|
21989
21769
|
return;
|
|
21990
21770
|
}
|
|
21991
|
-
if (floatingPanelOpenRef.current) {
|
|
21992
|
-
setFloatingPanelRef.current(null);
|
|
21993
|
-
deselectRef.current();
|
|
21994
|
-
deactivateRef.current();
|
|
21995
|
-
return;
|
|
21996
|
-
}
|
|
21997
21771
|
deselectRef.current();
|
|
21998
21772
|
deactivateRef.current();
|
|
21999
21773
|
clearMediaSelectionRef.current();
|
|
@@ -22282,12 +22056,8 @@ function OhhwellsBridge() {
|
|
|
22282
22056
|
if (inserted) {
|
|
22283
22057
|
const tracker = getSectionsTracker();
|
|
22284
22058
|
postToParentRef.current({ type: "ow:change", nodes: [{ key: "__ohw_sections", text: tracker.textContent ?? "[]" }] });
|
|
22285
|
-
const
|
|
22286
|
-
|
|
22287
|
-
if (h > 50) postToParentRef.current({ type: "ow:height", height: h });
|
|
22288
|
-
};
|
|
22289
|
-
reportHeight();
|
|
22290
|
-
setTimeout(reportHeight, 500);
|
|
22059
|
+
const h = document.body.scrollHeight;
|
|
22060
|
+
if (h > 50) postToParentRef.current({ type: "ow:height", height: h });
|
|
22291
22061
|
}
|
|
22292
22062
|
};
|
|
22293
22063
|
const handleSwitchSchedule = (e) => {
|
|
@@ -22708,17 +22478,15 @@ function OhhwellsBridge() {
|
|
|
22708
22478
|
window.removeEventListener("message", handleAiSetBrand);
|
|
22709
22479
|
window.removeEventListener("message", handleAiSetStyles);
|
|
22710
22480
|
window.removeEventListener("message", handleGetBrand);
|
|
22711
|
-
window.removeEventListener("message", handleGetTemplateFonts);
|
|
22712
|
-
window.removeEventListener("message", handleGetTemplateBrand);
|
|
22713
22481
|
window.removeEventListener("message", handleMoveSection);
|
|
22714
22482
|
window.removeEventListener("message", handlePanelDragging);
|
|
22715
22483
|
window.removeEventListener("message", handleDeleteSection);
|
|
22716
22484
|
window.removeEventListener("message", handleDuplicateSection);
|
|
22717
22485
|
window.removeEventListener("message", handleDeactivate);
|
|
22486
|
+
document.documentElement.removeAttribute("data-ohw-panel-dragging");
|
|
22718
22487
|
window.removeEventListener("message", handleToastAction);
|
|
22719
22488
|
window.removeEventListener("message", handleFormCount);
|
|
22720
22489
|
window.removeEventListener("message", handleUiEscape);
|
|
22721
|
-
document.documentElement.removeAttribute("data-ohw-panel-dragging");
|
|
22722
22490
|
autoSaveTimers.current.forEach(clearTimeout);
|
|
22723
22491
|
autoSaveTimers.current.clear();
|
|
22724
22492
|
if (imageUnhoverTimerRef.current) clearTimeout(imageUnhoverTimerRef.current);
|
|
@@ -22921,7 +22689,7 @@ function OhhwellsBridge() {
|
|
|
22921
22689
|
postToParent2({
|
|
22922
22690
|
type: "ow:ready",
|
|
22923
22691
|
version: "1",
|
|
22924
|
-
bridgeVersion: "0.1.
|
|
22692
|
+
bridgeVersion: "0.1.111",
|
|
22925
22693
|
path: pathname,
|
|
22926
22694
|
nodes: collectEditableNodes(editContentRef.current),
|
|
22927
22695
|
sections
|
|
@@ -23537,7 +23305,7 @@ function OhhwellsBridge() {
|
|
|
23537
23305
|
"span",
|
|
23538
23306
|
{
|
|
23539
23307
|
"data-ohw-form-count": "",
|
|
23540
|
-
className: "ml-0.5 inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-
|
|
23308
|
+
className: "ml-0.5 inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-primary px-1.5 text-[11px] font-semibold text-primary-foreground",
|
|
23541
23309
|
children: formPickCount
|
|
23542
23310
|
}
|
|
23543
23311
|
)
|
|
@@ -23775,11 +23543,11 @@ function OhhwellsBridge() {
|
|
|
23775
23543
|
className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
|
|
23776
23544
|
style: { top: sectionGap.y, transform: "translateY(-50%)" },
|
|
23777
23545
|
children: [
|
|
23778
|
-
/* @__PURE__ */ jsx33("div", { className: "flex-1 bg-
|
|
23546
|
+
/* @__PURE__ */ jsx33("div", { className: "flex-1 bg-primary", style: { height: 3 } }),
|
|
23779
23547
|
/* @__PURE__ */ jsx33(
|
|
23780
23548
|
Badge,
|
|
23781
23549
|
{
|
|
23782
|
-
className: "px-8 py-1 bg-
|
|
23550
|
+
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",
|
|
23783
23551
|
onClick: () => {
|
|
23784
23552
|
window.parent.postMessage(
|
|
23785
23553
|
{
|
|
@@ -23793,7 +23561,7 @@ function OhhwellsBridge() {
|
|
|
23793
23561
|
children: "Add Section"
|
|
23794
23562
|
}
|
|
23795
23563
|
),
|
|
23796
|
-
/* @__PURE__ */ jsx33("div", { className: "flex-1 bg-
|
|
23564
|
+
/* @__PURE__ */ jsx33("div", { className: "flex-1 bg-primary", style: { height: 3 } })
|
|
23797
23565
|
]
|
|
23798
23566
|
}
|
|
23799
23567
|
),
|
|
@@ -23841,59 +23609,6 @@ function OhhwellsBridge() {
|
|
|
23841
23609
|
) : null
|
|
23842
23610
|
] });
|
|
23843
23611
|
}
|
|
23844
|
-
|
|
23845
|
-
// src/ui/EmptySection.tsx
|
|
23846
|
-
import Link3 from "next/link";
|
|
23847
|
-
import { Fragment as Fragment9, jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
23848
|
-
function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey }) {
|
|
23849
|
-
return /* @__PURE__ */ jsxs21(Fragment9, { children: [
|
|
23850
|
-
/* @__PURE__ */ jsx34(
|
|
23851
|
-
"p",
|
|
23852
|
-
{
|
|
23853
|
-
style: {
|
|
23854
|
-
fontFamily: "var(--brand-font-body)",
|
|
23855
|
-
fontSize: "0.75rem",
|
|
23856
|
-
fontWeight: 500,
|
|
23857
|
-
letterSpacing: "0.15em",
|
|
23858
|
-
textTransform: "uppercase",
|
|
23859
|
-
color: "var(--brand-accent)",
|
|
23860
|
-
marginBottom: "1.5rem"
|
|
23861
|
-
},
|
|
23862
|
-
children: /* @__PURE__ */ jsx34(Link3, { href: homeHref, style: { color: "inherit" }, children: /* @__PURE__ */ jsx34("span", { ...eyebrowKey ? { "data-ohw-editable": "text", "data-ohw-key": eyebrowKey } : {}, children: "Home" }) })
|
|
23863
|
-
}
|
|
23864
|
-
),
|
|
23865
|
-
/* @__PURE__ */ jsx34(
|
|
23866
|
-
"h1",
|
|
23867
|
-
{
|
|
23868
|
-
style: {
|
|
23869
|
-
fontFamily: "var(--brand-font-heading)",
|
|
23870
|
-
fontSize: "clamp(2rem, 3.5vw, 2.75rem)",
|
|
23871
|
-
lineHeight: 1.1,
|
|
23872
|
-
letterSpacing: "-0.025em",
|
|
23873
|
-
color: "var(--brand-text)",
|
|
23874
|
-
marginBottom: "1rem"
|
|
23875
|
-
},
|
|
23876
|
-
...titleKey ? { "data-ohw-editable": "text", "data-ohw-key": titleKey, "data-ohw-max-length": 80 } : {},
|
|
23877
|
-
children: title
|
|
23878
|
-
}
|
|
23879
|
-
),
|
|
23880
|
-
/* @__PURE__ */ jsx34(
|
|
23881
|
-
"p",
|
|
23882
|
-
{
|
|
23883
|
-
style: {
|
|
23884
|
-
fontFamily: "var(--brand-font-body)",
|
|
23885
|
-
fontSize: "1rem",
|
|
23886
|
-
lineHeight: 1.7,
|
|
23887
|
-
fontWeight: 300,
|
|
23888
|
-
color: "var(--brand-text-muted)",
|
|
23889
|
-
maxWidth: "340px"
|
|
23890
|
-
},
|
|
23891
|
-
...subtitleKey ? { "data-ohw-editable": "text", "data-ohw-key": subtitleKey, "data-ohw-max-length": 160 } : {},
|
|
23892
|
-
children: "This page doesn't have any content yet."
|
|
23893
|
-
}
|
|
23894
|
-
)
|
|
23895
|
-
] });
|
|
23896
|
-
}
|
|
23897
23612
|
export {
|
|
23898
23613
|
AI_DEFAULT_BRAND,
|
|
23899
23614
|
AI_TREE_SCHEMA_VERSIONS,
|
|
@@ -23910,7 +23625,6 @@ export {
|
|
|
23910
23625
|
DropdownMenuItem,
|
|
23911
23626
|
DropdownMenuSeparator,
|
|
23912
23627
|
DropdownMenuTrigger,
|
|
23913
|
-
EmptySection,
|
|
23914
23628
|
ItemActionToolbar,
|
|
23915
23629
|
ItemInteractionLayer,
|
|
23916
23630
|
LinkEditorPanel,
|