// LongtailIQ app, shared helper components. Reads DS from window namespace.
(function init(){
if(!window.LongtailIQDesignSystem_ae8f12){return setTimeout(init,30);}
const React = window.React;
const DS = window.LongtailIQDesignSystem_ae8f12;
const { Badge, Icon, Card, Button, OpportunityScore } = DS;
const t = (k, v) => (window.LTQ.t ? window.LTQ.t(k, v) : k);
// ---- Responsive: canonical breakpoints (JS mirror of tokens/responsive.css —
// keep the two in sync) + a subscription-safe media-query hook so the
// inline-styled screens can branch layout by viewport.
const BP = { phone: 640, tablet: 980, desktop: 1280 };
const _mq = new Map();
function _mqEntry(query) {
let e = _mq.get(query);
if (!e) {
const mql = window.matchMedia(query);
e = {
subscribe: (cb) => { mql.addEventListener("change", cb); return () => mql.removeEventListener("change", cb); },
get: () => mql.matches,
};
_mq.set(query, e);
}
return e;
}
function useMedia(query) {
const e = _mqEntry(query);
return React.useSyncExternalStore(e.subscribe, e.get);
}
// Layout tiers: usePhone = single-column layouts; useCompact = below the
// sidebar→drawer cutoff (phones + iPad portrait); useCoarse = touch device.
const usePhone = () => useMedia(`(max-width: ${BP.phone}px)`);
const useCompact = () => useMedia(`(max-width: ${BP.tablet}px)`);
const useCoarse = () => useMedia("(hover: none), (pointer: coarse)");
// Categorical hue per tone — used as a small dot / icon tint only (flowing labels, no boxes).
const TONE_COLOR = {
blue: "var(--viz-blue)", accent: "var(--accent-500)", green: "var(--viz-green)",
violet: "var(--viz-cyan)", amber: "var(--viz-amber)", red: "var(--viz-red)", neutral: "var(--ink-400)",
};
const INTENT = {
"Informational": "blue", "Commercial": "accent", "Transactional": "green",
"Comparison": "violet", "Local": "amber", "Problem-aware": "neutral",
"Solution-aware": "blue", "AI prompt": "violet", "Reddit pain point": "neutral",
"Commercial research": "accent", "Awareness": "blue", "Consideration": "violet", "Decision": "green",
};
// Intent as a flowing label with a small categorical dot (de-boxed).
const intentKey = (v) => "intent." + String(v).toLowerCase().replace(/[^a-z]+/g, "_");
// Canonical English data values -> display keys (raw fallback keeps unknown
// values readable; the stored value stays English so server logic is stable).
const DATA_LABEL = {
funnel: { Decision: "funnel.decision", Consideration: "funnel.consideration", Awareness: "funnel.awareness" },
intent: {
Informational: "intent.informational", Commercial: "intent.commercial", Transactional: "intent.transactional",
Comparison: "intent.comparison", Local: "intent.local", "Problem-aware": "intent.problem_aware",
"Solution-aware": "intent.solution_aware", "AI prompt": "intent.ai_prompt", "Reddit pain point": "intent.reddit_pain_point",
"Commercial research": "intent.commercial_research", Awareness: "intent.awareness",
Consideration: "intent.consideration", Decision: "intent.decision",
},
serp: { "Featured snippet": "serp.featured_snippet", "Standard result": "serp.standard_result", Shopping: "serp.shopping", "Local pack": "serp.local_pack" },
type: { "Comparison page": "type.comparison_page", "Blog post": "type.blog_post", Listicle: "type.listicle", "AI-answer page": "type.ai_answer_page", "Landing page": "type.landing_page" },
format: { "Ranked list": "format.ranked_list", "Explainer + sources": "format.explainer_sources", "Step-by-step": "format.step_by_step", "Pros/cons + sources": "format.pros_cons" },
};
const dataLabel = (group, v) => (DATA_LABEL[group] && DATA_LABEL[group][v] ? t(DATA_LABEL[group][v]) : v);
// DS OpportunityScore with the band label localized (the DS component's own
// label is hardcoded English; bands + label style mirror the DS source).
function Score({ score, width }) {
const band =
score >= 80 ? { key: "level.very_high", color: "var(--green-500)" } :
score >= 55 ? { key: "level.high", color: "var(--accent-500)" } :
score >= 35 ? { key: "level.medium", color: "var(--amber-500)" } :
{ key: "level.low", color: "var(--ink-400)" };
return (
{t(band.key)}
);
}
function IntentBadge({ value }) {
const c = TONE_COLOR[INTENT[value] || "neutral"];
const label = INTENT[value] ? t(intentKey(value)) : value;
return (
{label}
);
}
const PLAT = {
"Google": ["neutral","globe"], "AI Overviews": ["violet","sparkles"], "AI Overview": ["violet","sparkles"], "Google AI Overview": ["violet","sparkles"],
"ChatGPT": ["green","sparkle"], "Perplexity": ["blue","compass"], "Reddit": ["accent","message-circle"],
"YouTube": ["red","monitor-play"], "TikTok": ["neutral","music-2"], "Amazon": ["amber","shopping-cart"],
"Shopify": ["green","shopping-bag"],
};
// Platform as an icon + flowing label (de-boxed).
function PlatformBadge({ value }) {
const [tone, icon] = PLAT[value] || ["neutral", "globe"];
return (
{value}
);
}
// Difficulty mini-meter
function Difficulty({ value }) {
const band = value < 20 ? "var(--green-500)" : value < 40 ? "var(--amber-500)" : "var(--red-500)";
return (
{[0,1,2,3,4].map(i => (
))}
{value}
);
}
// Demand with a tiny bar
function Demand({ value }) {
const max = 5000;
return (
{window.LTQ.fmtNumber ? window.LTQ.fmtNumber(value) : value.toLocaleString()}
);
}
// SQ — the mascot, dropped into any React screen. Thin wrapper over the
// self-contained /shared/sq-robot.js rig: mounts on an effect, tears down on
// unmount, updates state/label without remounting. No-op (renders an empty box)
// if the rig script hasn't loaded, so it can never break a screen.
function SQ({ state = "idle", width = 120, label, track = false, interactive = true, hoverWave = false, bubble = true, say, saySide = "top", sayOnce, style }) {
const ref = React.useRef(null);
const inst = React.useRef(null);
React.useEffect(() => {
if (!ref.current || !window.SQRobot) return;
inst.current = window.SQRobot.mount(ref.current, { state, width, label, track, interactive, bubble });
// First-visit coach line: SQ speaks a hint once (per browser, keyed by
// sayOnce). No-op if already seen or reduced-motion (the bubble is calm
// there anyway); the surrounding copy carries the message regardless.
if (say && !(window.SQRobot.explainMuted && window.SQRobot.explainMuted())) {
let seen = false;
if (sayOnce) { try { seen = localStorage.getItem("sqsay_" + sayOnce) === "1"; } catch (e) {} }
if (!seen) {
if (sayOnce) { try { localStorage.setItem("sqsay_" + sayOnce, "1"); } catch (e) {} }
setTimeout(() => { if (inst.current) inst.current.say(say, { side: saySide, autohideMs: 9000 }); }, 900);
}
}
return () => { if (inst.current) { inst.current.destroy(); inst.current = null; } };
}, []); // mount once; state/label handled below
React.useEffect(() => { if (inst.current) inst.current.setState(state, label); }, [state, label]);
const h = Math.round((650 / 540) * width);
return (
inst.current && inst.current.setState("wave") : undefined}
onMouseLeave={hoverWave ? () => inst.current && inst.current.setState(state, label) : undefined} />
);
}
// SQ pops into the corner and cheers for a beat — called next to the existing
// LTQEngine.celebrate() confetti on a win (first run, saved keywords, saved
// brief). Imperative + self-cleaning so any screen can fire it. No-op under
// reduced-motion (the confetti engine already goes static there) or if the rig
// isn't loaded. Debounced so rapid wins don't stack robots.
let _sqCheerBusy = false;
function sqCheer(opts) {
opts = opts || {};
if (_sqCheerBusy || !window.SQRobot) return;
try { if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; } catch (e) {}
_sqCheerBusy = true;
const host = document.createElement("div");
host.setAttribute("aria-hidden", "true");
host.style.cssText = "position:fixed;right:26px;bottom:20px;z-index:200;pointer-events:none;transform:translateY(24px);opacity:0;transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .35s ease;";
document.body.appendChild(host);
const inst = window.SQRobot.mount(host, { width: opts.width || 118, state: "cheer", interactive: false, track: false });
requestAnimationFrame(() => { host.style.transform = "translateY(0)"; host.style.opacity = "1"; });
const hold = opts.holdMs || 1900;
setTimeout(() => {
host.style.transform = "translateY(20px)"; host.style.opacity = "0";
setTimeout(() => { if (inst) inst.destroy(); host.remove(); _sqCheerBusy = false; }, 420);
}, hold);
}
// Game-feel (phase 9): the failure twin of sqCheer — SQ slides up sad, gives a
// single damped shake, and leaves. Same busy-flag so reactions never stack;
// strictly decorative (aria-hidden), reduced-motion silent.
function sqOops(opts) {
opts = opts || {};
if (_sqCheerBusy || !window.SQRobot) return;
try { if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; } catch (e) {}
_sqCheerBusy = true;
const host = document.createElement("div");
host.setAttribute("aria-hidden", "true");
host.style.cssText = "position:fixed;right:26px;bottom:20px;z-index:200;pointer-events:none;transform:translateY(24px);opacity:0;transition:transform .4s var(--ease-out),opacity .3s ease;";
document.body.appendChild(host);
const inst = window.SQRobot.mount(host, { width: opts.width || 108, state: "sad", interactive: false, track: false });
requestAnimationFrame(() => {
host.style.transform = "translateY(0)";
host.style.opacity = "1";
if (window.GameFeel) window.GameFeel.shake(host);
});
setTimeout(() => {
host.style.transform = "translateY(20px)"; host.style.opacity = "0";
setTimeout(() => { try { inst && inst.destroy && inst.destroy(); } catch (e) {} host.remove(); _sqCheerBusy = false; }, 380);
}, opts.holdMs || 1500);
}
window.LTQ.sqOops = sqOops;
// Empty state. Pass `sq="idle|search|sad|sleep|think"` to greet with the mascot
// instead of the generic icon tile; `icon` stays the default so existing callers
// are unchanged.
function EmptyState({ icon, sq, sqLabel, sqSay, sqSayKey, title, body, action }) {
// Game-feel (phase 11): ONE gentle attention nudge on the CTA after 6s of
// idle, once per mount — the "tap here" beat, never repeated, reduced-safe.
const nudgeRef = React.useRef(null);
React.useEffect(() => {
if (!action) return;
const id = setTimeout(() => {
const GF = window.GameFeel;
const host = nudgeRef.current;
if (!GF || GF.reduced() || !host) return;
const btn = host.querySelector("button:not([disabled])");
if (btn) { btn.style.animation = "gf-nudge 700ms var(--ease-out) 1"; btn.addEventListener("animationend", () => { btn.style.animation = ""; }, { once: true }); }
}, 6000);
return () => clearTimeout(id);
}, []);
return (
{sq && window.SQRobot
?
:
}
{title}
{body}
{action &&
{action}
}
);
}
// Pro lock chip
function ProTag({ small }) {
return (
PRO
);
}
// Upgrade card (sidebar / inline)
function UpgradeCard({ compact }) {
if (compact) {
return (
{t("plan.free")}
{t("upgrade.compact_sub")}
);
}
return (
{t("upgrade.eyebrow")}
{t("upgrade.big_title")}
{t("upgrade.big_sub")}
);
}
// Lightweight sparkline / trend line (SVG)
function TrendChart({ points, height = 96, color = "var(--accent-500)", fill = true, id = "g" }) {
const w = 600;
if (!Array.isArray(points) || points.length < 2) return null; // one point can't make a line
const max = Math.max(...points), min = Math.min(...points);
const range = max - min || 1;
const step = w / (points.length - 1);
const coords = points.map((p, i) => [i * step, height - 10 - ((p - min) / range) * (height - 24)]);
const line = coords.map((c, i) => (i === 0 ? "M" : "L") + c[0].toFixed(1) + " " + c[1].toFixed(1)).join(" ");
const area = line + ` L ${w} ${height} L 0 ${height} Z`;
return (
);
}
// Opportunity map, horizontal cluster bars
function OpportunityMap({ items }) {
return (
{items.map((it, i) => (
{it.label}
{it.value}
))}
);
}
// Bottom sheet (mobile-first overlay): scrim + spring slide-up panel with a
// drag handle; swipe down (or tap the scrim / press Escape) to close. On
// desktop it still works as a centered small modal replacement, but its home
// is phone filters/pickers. Content scrolls inside; safe-area padded.
function BottomSheet({ open, onClose, title, children, maxHeight = "82dvh" }) {
const panelRef = React.useRef(null);
const dragRef = React.useRef(null);
React.useEffect(() => {
if (!open) return;
const prev = document.documentElement.style.overflow;
document.documentElement.style.overflow = "hidden";
// Depth cue: the app plane recedes behind the sheet (the sheet itself is
// portaled to , so it can never be trapped by this transform).
const app = document.getElementById("app");
if (app) app.classList.add("lt-sheet-open");
const onKey = (e) => { if (e.key === "Escape") onClose && onClose(); };
window.addEventListener("keydown", onKey);
return () => {
document.documentElement.style.overflow = prev;
if (app) app.classList.remove("lt-sheet-open");
window.removeEventListener("keydown", onKey);
};
}, [open, onClose]);
if (!open) return null;
const ReactDOM = window.ReactDOM;
const onTouchStart = (e) => {
if (!e.touches || e.touches.length !== 1) return;
dragRef.current = { y0: e.touches[0].clientY, dy: 0, t0: performance.now(), moved: false };
};
const onTouchMove = (e) => {
const d = dragRef.current; if (!d) return;
const dy = e.touches[0].clientY - d.y0;
if (!d.moved && Math.abs(dy) < 6) return;
d.moved = true;
d.dy = Math.max(0, dy); d.yt = e.touches[0].clientY; d.tt = performance.now();
if (panelRef.current) { panelRef.current.style.transition = "none"; panelRef.current.style.transform = "translateY(" + d.dy + "px)"; }
};
const onTouchEnd = () => {
const d = dragRef.current; dragRef.current = null;
const el = panelRef.current;
if (!d || !d.moved || !el) return;
const vel = ((d.yt - d.y0) / Math.max(1, d.tt - d.t0)) * 1000;
const h = el.offsetHeight;
if (d.dy > h * 0.35 || vel > 500) { onClose && onClose(); }
else { el.style.transition = "transform .3s var(--ease-spring)"; el.style.transform = "translateY(0)"; }
};
// Portal to : screen-entrance animations leave a transform on the
// route wrapper, which would hijack position:fixed as a containing block.
const sheet = (
{(title || onClose) && (
{title || ""}
)}
{children}
);
return ReactDOM && ReactDOM.createPortal ? ReactDOM.createPortal(sheet, document.body) : sheet;
}
// Section header with title + action slot (wraps on narrow viewports so the
// action row drops below the title instead of clipping off-screen)
function SectionTitle({ eyebrow, title, sub, right }) {
return (