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