@spectare-personalisation/react 0.1.5 → 0.2.1
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 +130 -74
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +12 -4
- package/dist/index.d.ts +12 -4
- package/dist/index.js +126 -75
- package/dist/index.js.map +1 -1
- package/package.json +2 -1
package/dist/index.js
CHANGED
|
@@ -1,83 +1,110 @@
|
|
|
1
1
|
import { useState, useRef, useEffect } from 'react';
|
|
2
2
|
import { marked } from 'marked';
|
|
3
|
+
import DOMPurify from 'isomorphic-dompurify';
|
|
3
4
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
4
5
|
|
|
5
6
|
// src/PersonalisedSection.tsx
|
|
7
|
+
|
|
8
|
+
// src/types.ts
|
|
9
|
+
var COMPONENT_ZONES = {
|
|
10
|
+
HeroStatement: "hero",
|
|
11
|
+
ImageCtaHero: "hero",
|
|
12
|
+
AtomCard: "body",
|
|
13
|
+
StatGrid: "body",
|
|
14
|
+
CodeBlock: "body",
|
|
15
|
+
ComparisonTable: "body",
|
|
16
|
+
FeatureList: "body",
|
|
17
|
+
TestimonialCard: "proof",
|
|
18
|
+
CtaStrip: "cta"
|
|
19
|
+
};
|
|
20
|
+
function filterAssemblyByZone(assembly, zone) {
|
|
21
|
+
return assembly.filter((item) => {
|
|
22
|
+
var _a;
|
|
23
|
+
const effectiveZone = (_a = item.zone) != null ? _a : COMPONENT_ZONES[item.component];
|
|
24
|
+
return effectiveZone === zone;
|
|
25
|
+
});
|
|
26
|
+
}
|
|
6
27
|
function renderMarkdown(content) {
|
|
7
|
-
|
|
28
|
+
const raw = marked.parse(content != null ? content : "", { async: false });
|
|
29
|
+
return DOMPurify.sanitize(raw, { USE_PROFILES: { html: true } });
|
|
8
30
|
}
|
|
9
31
|
var HALF_COMPONENTS = /* @__PURE__ */ new Set(["TestimonialCard"]);
|
|
10
32
|
function HeroStatement({ headline, subheading }) {
|
|
11
|
-
return /* @__PURE__ */ jsxs("div", { style: { paddingTop: "
|
|
12
|
-
/* @__PURE__ */ jsx("h2", { style: { fontSize: "
|
|
13
|
-
subheading && /* @__PURE__ */ jsx("p", { style: { fontSize: "
|
|
33
|
+
return /* @__PURE__ */ jsxs("div", { style: { paddingTop: "24px", paddingBottom: "24px" }, children: [
|
|
34
|
+
/* @__PURE__ */ jsx("h2", { style: { fontSize: "32px", fontWeight: 700, letterSpacing: "-0.025em", lineHeight: 1.2, color: "var(--sp-text)", margin: "0 0 12px" }, children: headline }),
|
|
35
|
+
subheading && /* @__PURE__ */ jsx("p", { style: { fontSize: "18px", color: "var(--sp-text-sub)", lineHeight: 1.6, maxWidth: "672px", margin: 0 }, children: subheading })
|
|
14
36
|
] });
|
|
15
37
|
}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
)
|
|
27
|
-
|
|
38
|
+
var ATOM_LAYOUT_DEFAULT = ["title", "content", "stats", "cta"];
|
|
39
|
+
function AtomCard({ title, content, layout, stats = [], ctaText, ctaUrl }) {
|
|
40
|
+
const order = layout && layout.length ? layout : ATOM_LAYOUT_DEFAULT;
|
|
41
|
+
const element = (name) => {
|
|
42
|
+
if (name === "title") return title ? /* @__PURE__ */ jsx("h3", { style: { fontSize: "16px", fontWeight: 600, color: "var(--sp-text)", margin: "0 0 12px" }, children: title }, "title") : null;
|
|
43
|
+
if (name === "content") return content ? /* @__PURE__ */ jsx("div", { className: "sp-prose", style: { fontSize: "15px", color: "var(--sp-text-sub)", lineHeight: 1.6 }, dangerouslySetInnerHTML: { __html: renderMarkdown(content) } }, "content") : null;
|
|
44
|
+
if (name === "stats") return stats.length ? /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: "20px", margin: "0 0 12px", paddingBottom: "12px", borderBottom: "1px solid var(--sp-border)" }, children: stats.map((s, i) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [
|
|
45
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: "22px", fontWeight: 700, color: "var(--sp-text)", lineHeight: 1, fontVariantNumeric: "tabular-nums" }, children: s.value }),
|
|
46
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: "11px", color: "var(--sp-text-muted)", textTransform: "uppercase", letterSpacing: "0.06em" }, children: s.label })
|
|
47
|
+
] }, i)) }, "stats") : null;
|
|
48
|
+
if (name === "cta") return ctaText && ctaUrl ? /* @__PURE__ */ jsxs("a", { href: ctaUrl, style: { display: "inline-flex", alignItems: "center", gap: "4px", marginTop: "12px", fontSize: "13px", fontWeight: 600, color: "var(--sp-accent)", textDecoration: "none" }, children: [
|
|
49
|
+
ctaText,
|
|
50
|
+
" \u2192"
|
|
51
|
+
] }, "cta") : null;
|
|
52
|
+
return null;
|
|
53
|
+
};
|
|
54
|
+
return /* @__PURE__ */ jsx("div", { style: { background: "var(--sp-bg)", border: "1px solid var(--sp-border)", borderRadius: "12px", padding: "24px", height: "100%" }, children: order.map(element) });
|
|
28
55
|
}
|
|
29
|
-
function StatGrid({ stats, caption }) {
|
|
56
|
+
function StatGrid({ stats = [], caption }) {
|
|
30
57
|
const cols = stats.length === 2 ? 2 : stats.length === 3 ? 3 : 4;
|
|
31
58
|
return /* @__PURE__ */ jsxs("div", { children: [
|
|
32
|
-
/* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: "
|
|
33
|
-
/* @__PURE__ */ jsx("p", { style: { fontSize: "
|
|
34
|
-
/* @__PURE__ */ jsx("p", { style: { fontSize: "
|
|
59
|
+
/* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: "12px" }, children: stats.map(({ value, label }) => /* @__PURE__ */ jsxs("div", { style: { background: "var(--sp-bg)", border: "1px solid var(--sp-border)", borderRadius: "10px", padding: "16px 20px", display: "flex", flexDirection: "column", justifyContent: "space-between", minHeight: "88px" }, children: [
|
|
60
|
+
/* @__PURE__ */ jsx("p", { style: { fontSize: "11px", color: "var(--sp-text-muted)", textTransform: "uppercase", letterSpacing: "0.06em", margin: "0 0 12px", lineHeight: 1.3 }, children: label }),
|
|
61
|
+
/* @__PURE__ */ jsx("p", { style: { fontSize: "20px", fontWeight: 500, color: "var(--sp-text)", fontVariantNumeric: "tabular-nums", lineHeight: 1, margin: 0 }, children: value })
|
|
35
62
|
] }, label)) }),
|
|
36
|
-
caption && /* @__PURE__ */ jsx("p", { style: { fontSize: "
|
|
63
|
+
caption && /* @__PURE__ */ jsx("p", { style: { fontSize: "13px", color: "var(--sp-text-muted)", margin: "12px 0 0" }, children: caption })
|
|
37
64
|
] });
|
|
38
65
|
}
|
|
39
66
|
function CodeBlock({ code, lang = "typescript", caption }) {
|
|
40
|
-
return /* @__PURE__ */ jsxs("div", { style: { borderRadius: "
|
|
41
|
-
/* @__PURE__ */ jsxs("div", { style: { background: "var(--sp-bg)", padding: "
|
|
42
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize: "
|
|
43
|
-
caption && /* @__PURE__ */ jsx("span", { style: { fontSize: "
|
|
67
|
+
return /* @__PURE__ */ jsxs("div", { style: { borderRadius: "12px", overflow: "hidden", border: "1px solid var(--sp-border)" }, children: [
|
|
68
|
+
/* @__PURE__ */ jsxs("div", { style: { background: "var(--sp-bg)", padding: "10px 16px", display: "flex", alignItems: "center", justifyContent: "space-between", borderBottom: "1px solid var(--sp-border)" }, children: [
|
|
69
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "var(--sp-text-muted)", fontFamily: "monospace" }, children: lang }),
|
|
70
|
+
caption && /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "var(--sp-text-muted)" }, children: caption })
|
|
44
71
|
] }),
|
|
45
|
-
/* @__PURE__ */ jsx("pre", { style: { background: "var(--sp-surface)", padding: "
|
|
72
|
+
/* @__PURE__ */ jsx("pre", { style: { background: "var(--sp-surface)", padding: "20px", fontSize: "13px", color: "var(--sp-text-sub)", overflowX: "auto", lineHeight: 1.6, fontFamily: "monospace", whiteSpace: "pre", margin: 0 }, children: code })
|
|
46
73
|
] });
|
|
47
74
|
}
|
|
48
|
-
function ComparisonTable({ brand = "Us", competitor, rows }) {
|
|
49
|
-
return /* @__PURE__ */ jsx("div", { style: { border: "1px solid var(--sp-border)", borderRadius: "
|
|
75
|
+
function ComparisonTable({ brand = "Us", competitor, rows = [] }) {
|
|
76
|
+
return /* @__PURE__ */ jsx("div", { style: { border: "1px solid var(--sp-border)", borderRadius: "12px", overflow: "hidden" }, children: /* @__PURE__ */ jsx("div", { style: { overflowX: "auto" }, children: /* @__PURE__ */ jsxs("table", { style: { width: "100%", fontSize: "14px", borderCollapse: "collapse" }, children: [
|
|
50
77
|
/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { style: { borderBottom: "1px solid var(--sp-border)", background: "var(--sp-bg)" }, children: [
|
|
51
|
-
/* @__PURE__ */ jsx("th", { style: { textAlign: "left", padding: "
|
|
52
|
-
/* @__PURE__ */ jsx("th", { style: { textAlign: "left", padding: "
|
|
53
|
-
/* @__PURE__ */ jsx("th", { style: { textAlign: "left", padding: "
|
|
78
|
+
/* @__PURE__ */ jsx("th", { style: { textAlign: "left", padding: "12px 16px", color: "var(--sp-text-muted)", fontWeight: 500, fontSize: "12px", width: "33%" } }),
|
|
79
|
+
/* @__PURE__ */ jsx("th", { style: { textAlign: "left", padding: "12px 16px", fontWeight: 600, color: "var(--sp-accent)", fontSize: "12px" }, children: brand }),
|
|
80
|
+
/* @__PURE__ */ jsx("th", { style: { textAlign: "left", padding: "12px 16px", color: "var(--sp-text-muted)", fontWeight: 500, fontSize: "12px" }, children: competitor })
|
|
54
81
|
] }) }),
|
|
55
82
|
/* @__PURE__ */ jsx("tbody", { children: rows.map(({ label, spectare, them }) => /* @__PURE__ */ jsxs("tr", { style: { borderBottom: "1px solid var(--sp-border)" }, children: [
|
|
56
|
-
/* @__PURE__ */ jsx("td", { style: { padding: "
|
|
57
|
-
/* @__PURE__ */ jsx("td", { style: { padding: "
|
|
58
|
-
/* @__PURE__ */ jsx("td", { style: { padding: "
|
|
83
|
+
/* @__PURE__ */ jsx("td", { style: { padding: "12px 16px", fontSize: "13px", color: "var(--sp-text-muted)", fontWeight: 500 }, children: label }),
|
|
84
|
+
/* @__PURE__ */ jsx("td", { style: { padding: "12px 16px", fontSize: "13px", color: "var(--sp-positive)", fontWeight: 500 }, children: spectare }),
|
|
85
|
+
/* @__PURE__ */ jsx("td", { style: { padding: "12px 16px", fontSize: "13px", color: "var(--sp-text-muted)" }, children: them })
|
|
59
86
|
] }, label)) })
|
|
60
87
|
] }) }) });
|
|
61
88
|
}
|
|
62
|
-
function FeatureList({ items }) {
|
|
63
|
-
return /* @__PURE__ */ jsx("div", { style: { background: "var(--sp-bg)", border: "1px solid var(--sp-border)", borderRadius: "
|
|
64
|
-
/* @__PURE__ */ jsx("span", { style: { color: "var(--sp-accent)", flexShrink: 0, fontSize: "
|
|
89
|
+
function FeatureList({ items = [] }) {
|
|
90
|
+
return /* @__PURE__ */ jsx("div", { style: { background: "var(--sp-bg)", border: "1px solid var(--sp-border)", borderRadius: "12px", padding: "24px" }, children: /* @__PURE__ */ jsx("ul", { style: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: "16px" }, children: items.map(({ text, sub }) => /* @__PURE__ */ jsxs("li", { style: { display: "flex", gap: "12px" }, children: [
|
|
91
|
+
/* @__PURE__ */ jsx("span", { style: { color: "var(--sp-accent)", flexShrink: 0, fontSize: "15px", marginTop: "2px" }, children: "\u2713" }),
|
|
65
92
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
66
|
-
/* @__PURE__ */ jsx("p", { style: { fontSize: "
|
|
67
|
-
sub && /* @__PURE__ */ jsx("p", { style: { fontSize: "
|
|
93
|
+
/* @__PURE__ */ jsx("p", { style: { fontSize: "15px", fontWeight: 500, color: "var(--sp-text)", lineHeight: 1.4, margin: 0 }, children: text }),
|
|
94
|
+
sub && /* @__PURE__ */ jsx("p", { style: { fontSize: "13px", color: "var(--sp-text-muted)", lineHeight: 1.5, margin: "4px 0 0" }, children: sub })
|
|
68
95
|
] })
|
|
69
96
|
] }, text)) }) });
|
|
70
97
|
}
|
|
71
98
|
function TestimonialCard({ quote, name, role, company }) {
|
|
72
|
-
return /* @__PURE__ */ jsxs("div", { style: { background: "var(--sp-bg)", border: "1px solid var(--sp-border)", borderRadius: "
|
|
73
|
-
/* @__PURE__ */ jsxs("p", { style: { fontSize: "
|
|
74
|
-
/* @__PURE__ */ jsx("span", { style: { color: "var(--sp-text-dim)", fontSize: "
|
|
99
|
+
return /* @__PURE__ */ jsxs("div", { style: { background: "var(--sp-bg)", border: "1px solid var(--sp-border)", borderRadius: "12px", padding: "24px", display: "flex", flexDirection: "column", gap: "20px", height: "100%" }, children: [
|
|
100
|
+
/* @__PURE__ */ jsxs("p", { style: { fontSize: "15px", color: "var(--sp-text-sub)", lineHeight: 1.6, flex: 1, margin: 0 }, children: [
|
|
101
|
+
/* @__PURE__ */ jsx("span", { style: { color: "var(--sp-text-dim)", fontSize: "18px", lineHeight: 1, marginRight: "4px" }, children: '"' }),
|
|
75
102
|
quote,
|
|
76
|
-
/* @__PURE__ */ jsx("span", { style: { color: "var(--sp-text-dim)", fontSize: "
|
|
103
|
+
/* @__PURE__ */ jsx("span", { style: { color: "var(--sp-text-dim)", fontSize: "18px", lineHeight: 1, marginLeft: "4px" }, children: '"' })
|
|
77
104
|
] }),
|
|
78
|
-
/* @__PURE__ */ jsxs("div", { style: { borderTop: "1px solid var(--sp-border)", paddingTop: "
|
|
79
|
-
/* @__PURE__ */ jsx("p", { style: { fontSize: "
|
|
80
|
-
/* @__PURE__ */ jsxs("p", { style: { fontSize: "
|
|
105
|
+
/* @__PURE__ */ jsxs("div", { style: { borderTop: "1px solid var(--sp-border)", paddingTop: "16px" }, children: [
|
|
106
|
+
/* @__PURE__ */ jsx("p", { style: { fontSize: "14px", fontWeight: 600, color: "var(--sp-text)", margin: 0 }, children: name }),
|
|
107
|
+
/* @__PURE__ */ jsxs("p", { style: { fontSize: "13px", color: "var(--sp-text-muted)", margin: "2px 0 0" }, children: [
|
|
81
108
|
role,
|
|
82
109
|
company ? `, ${company}` : ""
|
|
83
110
|
] })
|
|
@@ -86,22 +113,23 @@ function TestimonialCard({ quote, name, role, company }) {
|
|
|
86
113
|
}
|
|
87
114
|
function ImageCtaHero({ src, alt = "", headline, subheading, ctaLabel, ctaHref }) {
|
|
88
115
|
if (!src) return null;
|
|
89
|
-
return /* @__PURE__ */ jsxs("div", { style: { borderRadius: "
|
|
116
|
+
return /* @__PURE__ */ jsxs("div", { style: { borderRadius: "12px", overflow: "hidden", position: "relative", width: "100%", paddingBottom: "56.25%" }, children: [
|
|
90
117
|
/* @__PURE__ */ jsx("img", { src, alt, style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" } }),
|
|
91
|
-
/* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, background: "
|
|
92
|
-
/* @__PURE__ */
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
118
|
+
/* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, background: "rgba(0,0,0,0.45)" } }),
|
|
119
|
+
/* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 60%, transparent 100%)" } }),
|
|
120
|
+
/* @__PURE__ */ jsxs("div", { style: { position: "absolute", bottom: 0, left: 0, right: 0, padding: "28px" }, children: [
|
|
121
|
+
headline && /* @__PURE__ */ jsx("h2", { style: { fontSize: "24px", fontWeight: 700, color: "#fff", lineHeight: 1.2, margin: "0 0 8px", letterSpacing: "-0.02em" }, children: headline }),
|
|
122
|
+
subheading && /* @__PURE__ */ jsx("p", { style: { fontSize: "15px", color: "rgba(255,255,255,0.75)", lineHeight: 1.5, margin: "0 0 20px" }, children: subheading }),
|
|
123
|
+
ctaHref && ctaLabel && /* @__PURE__ */ jsx("a", { href: ctaHref, style: { display: "inline-block", background: "#fff", color: "#09090b", padding: "8px 20px", borderRadius: "8px", fontWeight: 600, fontSize: "14px", textDecoration: "none" }, children: ctaLabel })
|
|
96
124
|
] })
|
|
97
125
|
] });
|
|
98
126
|
}
|
|
99
127
|
function CtaStrip({ headline, primary, secondary }) {
|
|
100
|
-
return /* @__PURE__ */ jsxs("div", { style: { border: "1px solid var(--sp-border)", borderRadius: "
|
|
101
|
-
/* @__PURE__ */ jsx("h3", { style: { fontSize: "
|
|
102
|
-
/* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "
|
|
103
|
-
/* @__PURE__ */ jsx("a", { href: primary.href, style: { background: "#fff", color: "#09090b", padding: "
|
|
104
|
-
secondary && /* @__PURE__ */ jsxs("a", { href: secondary.href, style: { fontSize: "
|
|
128
|
+
return /* @__PURE__ */ jsxs("div", { style: { border: "1px solid var(--sp-border)", borderRadius: "12px", padding: "32px", textAlign: "center", background: "var(--sp-bg)" }, children: [
|
|
129
|
+
/* @__PURE__ */ jsx("h3", { style: { fontSize: "24px", fontWeight: 700, color: "var(--sp-text)", margin: "0 0 24px" }, children: headline }),
|
|
130
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "16px", flexWrap: "wrap" }, children: [
|
|
131
|
+
/* @__PURE__ */ jsx("a", { href: primary.href, style: { background: "#fff", color: "#09090b", padding: "10px 24px", borderRadius: "12px", fontWeight: 600, fontSize: "15px", textDecoration: "none" }, children: primary.label }),
|
|
132
|
+
secondary && /* @__PURE__ */ jsxs("a", { href: secondary.href, style: { fontSize: "15px", color: "var(--sp-text-sub)", textDecoration: "none" }, children: [
|
|
105
133
|
secondary.label,
|
|
106
134
|
" \u2192"
|
|
107
135
|
] })
|
|
@@ -109,19 +137,19 @@ function CtaStrip({ headline, primary, secondary }) {
|
|
|
109
137
|
] });
|
|
110
138
|
}
|
|
111
139
|
function renderSingle(item, brand) {
|
|
112
|
-
var _a;
|
|
140
|
+
var _a, _b;
|
|
113
141
|
const s = (_a = item.slots) != null ? _a : {};
|
|
114
142
|
switch (item.component) {
|
|
115
143
|
case "HeroStatement":
|
|
116
144
|
return /* @__PURE__ */ jsx(HeroStatement, { headline: s.headline, subheading: s.subheading });
|
|
117
145
|
case "AtomCard":
|
|
118
|
-
return /* @__PURE__ */ jsx(AtomCard, { title: s.title, content: s.content });
|
|
146
|
+
return /* @__PURE__ */ jsx(AtomCard, { title: s.title, content: s.content, layout: s.layout, stats: s.stats, ctaText: s.ctaText, ctaUrl: s.ctaUrl });
|
|
119
147
|
case "StatGrid":
|
|
120
148
|
return /* @__PURE__ */ jsx(StatGrid, { stats: s.stats, caption: s.caption });
|
|
121
149
|
case "CodeBlock":
|
|
122
150
|
return /* @__PURE__ */ jsx(CodeBlock, { code: s.code, lang: s.lang, caption: s.caption });
|
|
123
151
|
case "ComparisonTable":
|
|
124
|
-
return /* @__PURE__ */ jsx(ComparisonTable, { brand, competitor: s.competitor, rows: s.rows });
|
|
152
|
+
return /* @__PURE__ */ jsx(ComparisonTable, { brand: (_b = s.brand) != null ? _b : brand, competitor: s.competitor, rows: s.rows });
|
|
125
153
|
case "FeatureList":
|
|
126
154
|
return /* @__PURE__ */ jsx(FeatureList, { items: s.items });
|
|
127
155
|
case "TestimonialCard":
|
|
@@ -158,15 +186,16 @@ function buildLayout(assembly) {
|
|
|
158
186
|
return groups;
|
|
159
187
|
}
|
|
160
188
|
function XrayBadge({ name, size }) {
|
|
161
|
-
return /* @__PURE__ */ jsxs("div", { style: { position: "absolute", top: "
|
|
162
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize: "
|
|
163
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize: "
|
|
189
|
+
return /* @__PURE__ */ jsxs("div", { style: { position: "absolute", top: "8px", left: "8px", zIndex: 10, display: "flex", alignItems: "center", gap: "6px", pointerEvents: "none", userSelect: "none" }, children: [
|
|
190
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: "10px", fontFamily: "monospace", background: "rgba(59,130,246,0.9)", color: "#fff", padding: "2px 6px", borderRadius: "4px", lineHeight: 1 }, children: name }),
|
|
191
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: "10px", fontFamily: "monospace", color: "#71717a", lineHeight: 1 }, children: size })
|
|
164
192
|
] });
|
|
165
193
|
}
|
|
166
|
-
var PAIR_STYLE = ".sp-pair{display:grid;grid-template-columns:1fr 1fr;gap:
|
|
167
|
-
function ComponentRenderer({ assembly, brand, xray = false }) {
|
|
168
|
-
const
|
|
169
|
-
|
|
194
|
+
var PAIR_STYLE = ".sp-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media(max-width:640px){.sp-pair{grid-template-columns:1fr}}";
|
|
195
|
+
function ComponentRenderer({ assembly, brand, xray = false, zone }) {
|
|
196
|
+
const filtered = zone ? filterAssemblyByZone(assembly, zone) : assembly;
|
|
197
|
+
const layout = buildLayout(filtered);
|
|
198
|
+
return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "20px", fontSize: "16px" }, children: [
|
|
170
199
|
/* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: PAIR_STYLE } }),
|
|
171
200
|
layout.map((group, i) => {
|
|
172
201
|
if (group.type === "full") {
|
|
@@ -215,12 +244,26 @@ function buildSummary(pageHint, orgSlug) {
|
|
|
215
244
|
}
|
|
216
245
|
return parts.filter(Boolean).join(". ");
|
|
217
246
|
}
|
|
247
|
+
function readVisitPath(orgSlug) {
|
|
248
|
+
try {
|
|
249
|
+
const raw = JSON.parse(localStorage.getItem(`_spectare_visits_${orgSlug}`) || "[]");
|
|
250
|
+
const path = [];
|
|
251
|
+
for (const v of raw) {
|
|
252
|
+
if (typeof (v == null ? void 0 : v.path) === "string" && (!path.length || path[path.length - 1] !== v.path)) path.push(v.path);
|
|
253
|
+
}
|
|
254
|
+
const cur = window.location.pathname;
|
|
255
|
+
if (!path.length || path[path.length - 1] !== cur) path.push(cur);
|
|
256
|
+
return path;
|
|
257
|
+
} catch (e) {
|
|
258
|
+
return [];
|
|
259
|
+
}
|
|
260
|
+
}
|
|
218
261
|
function Shimmer() {
|
|
219
|
-
return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "
|
|
220
|
-
/* @__PURE__ */ jsx("div", { style: { height: "
|
|
221
|
-
/* @__PURE__ */ jsx("div", { style: { height: "
|
|
222
|
-
/* @__PURE__ */ jsx("div", { style: { height: "
|
|
223
|
-
/* @__PURE__ */ jsx("div", { style: { height: "
|
|
262
|
+
return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
|
|
263
|
+
/* @__PURE__ */ jsx("div", { style: { height: "20px", background: "rgba(39,39,42,0.6)", borderRadius: "8px", width: "75%", animation: "sp-pulse 1.5s ease-in-out infinite" } }),
|
|
264
|
+
/* @__PURE__ */ jsx("div", { style: { height: "14px", background: "rgba(39,39,42,0.4)", borderRadius: "8px", width: "100%", animation: "sp-pulse 1.5s ease-in-out infinite" } }),
|
|
265
|
+
/* @__PURE__ */ jsx("div", { style: { height: "14px", background: "rgba(39,39,42,0.4)", borderRadius: "8px", width: "83%", animation: "sp-pulse 1.5s ease-in-out infinite" } }),
|
|
266
|
+
/* @__PURE__ */ jsx("div", { style: { height: "14px", background: "rgba(39,39,42,0.4)", borderRadius: "8px", width: "67%", animation: "sp-pulse 1.5s ease-in-out infinite" } })
|
|
224
267
|
] });
|
|
225
268
|
}
|
|
226
269
|
function PersonalisedSection({
|
|
@@ -231,7 +274,8 @@ function PersonalisedSection({
|
|
|
231
274
|
className,
|
|
232
275
|
style,
|
|
233
276
|
initialAssembly,
|
|
234
|
-
initialIntent
|
|
277
|
+
initialIntent,
|
|
278
|
+
zone
|
|
235
279
|
}) {
|
|
236
280
|
const [assembly, setAssembly] = useState(initialAssembly != null ? initialAssembly : []);
|
|
237
281
|
const [loading, setLoading] = useState(!initialAssembly);
|
|
@@ -392,6 +436,11 @@ function PersonalisedSection({
|
|
|
392
436
|
} catch (e) {
|
|
393
437
|
}
|
|
394
438
|
}
|
|
439
|
+
const atomsShown = [...new Set(assembly.flatMap((i) => {
|
|
440
|
+
var _a2;
|
|
441
|
+
return (_a2 = i.sourceAtomIds) != null ? _a2 : [];
|
|
442
|
+
}))];
|
|
443
|
+
const visitPath = readVisitPath(orgSlug);
|
|
395
444
|
fetch(`${baseUrl}/api/conversion`, {
|
|
396
445
|
method: "POST",
|
|
397
446
|
headers: { "Content-Type": "application/json" },
|
|
@@ -399,6 +448,8 @@ function PersonalisedSection({
|
|
|
399
448
|
token,
|
|
400
449
|
orgSlug,
|
|
401
450
|
url,
|
|
451
|
+
...atomsShown.length ? { atomsShown } : {},
|
|
452
|
+
...visitPath.length > 1 ? { visitPath } : {},
|
|
402
453
|
...data.goalName ? { goalName: data.goalName } : {},
|
|
403
454
|
...goalValue !== null ? { goalValue, goalCurrency } : {}
|
|
404
455
|
})
|
|
@@ -411,10 +462,10 @@ function PersonalisedSection({
|
|
|
411
462
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
412
463
|
/* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: CSS_TOKENS } }),
|
|
413
464
|
/* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: "@keyframes sp-pulse{0%,100%{opacity:1}50%{opacity:0.4}}" } }),
|
|
414
|
-
/* @__PURE__ */ jsx("div", { className, style, children: loading && assembly.length === 0 ? /* @__PURE__ */ jsx(Shimmer, {}) : /* @__PURE__ */ jsx(ComponentRenderer, { assembly, brand: brand != null ? brand : orgName }) })
|
|
465
|
+
/* @__PURE__ */ jsx("div", { className, style, children: loading && assembly.length === 0 ? /* @__PURE__ */ jsx(Shimmer, {}) : /* @__PURE__ */ jsx(ComponentRenderer, { assembly: zone ? filterAssemblyByZone(assembly, zone) : assembly, brand: brand != null ? brand : orgName }) })
|
|
415
466
|
] });
|
|
416
467
|
}
|
|
417
468
|
|
|
418
|
-
export { ComponentRenderer, PersonalisedSection };
|
|
469
|
+
export { ComponentRenderer, PersonalisedSection, filterAssemblyByZone };
|
|
419
470
|
//# sourceMappingURL=index.js.map
|
|
420
471
|
//# sourceMappingURL=index.js.map
|