@focus-reactive/payload-plugin-seo 1.6.1 → 1.8.0

package/dist/components/SeoDrawer/tabs/KeyphraseTab.js

@@ -1,76 +1,117 @@
 "use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Loader2 } from "lucide-react";
-import { useState } from "react";
-import { hasKeyphrase } from "../../../engine/helpers/has-keyphrase";
-import { TabHeader } from "../../../ui/TabHeader";
-import { SectionCard } from "../../../ui/SectionCard";
-import { Pill } from "../../../ui/Pill";
-import { FilterPills } from "../../../ui/FilterPills";
-import { CheckRow } from "../../../ui/CheckRow";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { KeyphraseDetail } from "./keyphrase/KeyphraseDetail";
+import { KeyphraseRail } from "./keyphrase/KeyphraseRail";
+function resultForEntry(entry, isFocus, result) {
+  if (!result)
+    return void 0;
+  if (isFocus)
+    return result.keyphraseText === entry.text ? result.keyphrase : void 0;
+  return result.relatedKeyphrases.find((r) => r.text === entry.text)?.result;
+}
 function KeyphraseTab({
-  data,
-  keyphrase,
-  setKeyphrase,
+  keyphrases,
+  selectedId: selectedIdProp,
+  onSelect,
+  result,
   analyzing,
-  keyphrasePending,
-  analyzeNow
+  onAddRelated,
+  onTextChange,
+  onAddSynonym,
+  onRemoveSynonym,
+  onRemove,
+  onSetFocus,
+  isDuplicate
 }) {
-  const [filter, setFilter] = useState("all");
-  const visible = data.checks.filter((c) => filter === "all" || c.status === filter);
-  const passing = data.checks.filter((c) => c.status === "good").length;
-  const keyphrasePresent = hasKeyphrase(keyphrase);
-  const checksReady = keyphrasePresent && !keyphrasePending && !analyzing && data.checks.length > 0;
-  return /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-[13px]", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex gap-[8px]", children: [
-      /* @__PURE__ */ jsx("label", { className: "flex-1 flex items-center gap-[8px] px-[12px] py-[9px] border border-neutral-200 rounded-rs bg-neutral-0", children: /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "text",
-          className: "border-0 outline-none flex-1 text-[13px] text-neutral-800 bg-transparent",
-          value: keyphrase,
-          onChange: (e) => setKeyphrase(e.target.value),
-          placeholder: "Focus keyphrase",
-          "aria-label": "Focus keyphrase"
-        }
-      ) }),
-      /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", role: "status", children: keyphrasePending ? "Analyzing keyphrase\u2026" : "" }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "px-[18px] py-[9px] bg-neutral-1000 text-neutral-0 border-0 rounded-rs font-medium text-[13px] cursor-pointer disabled:opacity-50",
-          disabled: !keyphrasePresent,
-          onClick: () => analyzeNow(),
-          children: analyzing ? "Analyzing\u2026" : "Analyze"
-        }
-      )
-    ] }),
-    !keyphrasePresent && /* @__PURE__ */ jsx("p", { className: "text-neutral-500 text-[13px]", children: "Enter a focus keyphrase to analyze how well your content targets it." }),
-    keyphrasePresent && !checksReady && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[8px] text-neutral-500 text-[13px]", children: [
-      /* @__PURE__ */ jsx(Loader2, { "aria-hidden": "true", className: "w-[14px] h-[14px] animate-spin" }),
-      "Analyzing keyphrase\u2026"
-    ] }),
-    checksReady && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        TabHeader,
-        {
-          title: "Keyphrase optimization",
-          score: data.ringScore,
-          status: data.status,
-          subtitle: /* @__PURE__ */ jsxs(Fragment, { children: [
-            passing,
-            " / ",
-            data.checks.length,
-            " checks passing"
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsxs(SectionCard, { title: "Checks", widget: /* @__PURE__ */ jsx(Pill, { variant: "neutral", children: data.checks.length }), children: [
-        /* @__PURE__ */ jsx(FilterPills, { checks: data.checks, value: filter, onChange: setFilter }),
-        visible.map((c) => /* @__PURE__ */ jsx(CheckRow, { check: c }, c.id))
-      ] })
-    ] })
+  const selectedId = selectedIdProp ?? keyphrases[0]?.id ?? null;
+  const selected = keyphrases.find((k) => k.id === selectedId) ?? keyphrases[0] ?? null;
+  const selectedIsFocus = selected ? keyphrases.indexOf(selected) === 0 : true;
+  const lastMetrics = useRef(/* @__PURE__ */ new Map());
+  const liveIds = new Set(keyphrases.map((k) => k.id));
+  for (const id of [...lastMetrics.current.keys()]) {
+    if (!liveIds.has(id))
+      lastMetrics.current.delete(id);
+  }
+  keyphrases.forEach((entry, index) => {
+    if (entry.text.trim() === "") {
+      lastMetrics.current.delete(entry.id);
+      return;
+    }
+    const fresh = resultForEntry(entry, index === 0, result);
+    if (fresh)
+      lastMetrics.current.set(entry.id, fresh);
+  });
+  const stateFor = (entry) => {
+    if (!entry.text.trim())
+      return { kind: "idle" };
+    const isFocus = keyphrases.indexOf(entry) === 0;
+    if (!isFocus && isDuplicate(entry.id, entry.text))
+      return { kind: "idle" };
+    const category = resultForEntry(entry, isFocus, result);
+    if (category)
+      return { kind: "score", score: category.ringScore, status: category.status };
+    return { kind: "analyzing" };
+  };
+  const detailAnalysis = () => {
+    if (!selected)
+      return { kind: "hint", message: "" };
+    if (isDuplicate(selected.id, selected.text)) {
+      return {
+        kind: "hint",
+        message: "Resolve the duplicate to analyse this keyphrase."
+      };
+    }
+    if (!selected.text.trim()) {
+      return {
+        kind: "hint",
+        message: "Start typing a keyphrase to see its analysis."
+      };
+    }
+    const category = resultForEntry(selected, selectedIsFocus, result);
+    if (category) {
+      return {
+        kind: "metrics",
+        result: category,
+        dim: analyzing
+      };
+    }
+    const previous = lastMetrics.current.get(selected.id);
+    if (previous) {
+      return {
+        kind: "metrics",
+        result: previous,
+        dim: true
+      };
+    }
+    return { kind: "analyzing" };
+  };
+  const analysis = detailAnalysis();
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-[420px]", children: [
+    /* @__PURE__ */ jsx(
+      KeyphraseRail,
+      {
+        entries: keyphrases,
+        onAdd: onAddRelated,
+        onSelect,
+        selectedId,
+        stateFor
+      }
+    ),
+    selected && /* @__PURE__ */ jsx(
+      KeyphraseDetail,
+      {
+        analysis,
+        duplicate: isDuplicate(selected.id, selected.text),
+        entry: selected,
+        isFocus: selectedIsFocus,
+        onAddSynonym: (syn) => onAddSynonym(selected.id, syn),
+        onRemove: () => onRemove(selected.id),
+        onRemoveSynonym: (index) => onRemoveSynonym(selected.id, index),
+        onSetFocus: () => onSetFocus(selected.id),
+        onTextChange: (text) => onTextChange(selected.id, text)
+      }
+    )
   ] });
 }
 export {

package/dist/components/SeoDrawer/tabs/KeyphraseTab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SeoDrawer/tabs/KeyphraseTab.tsx"],"sourcesContent":["\"use client\";\n\nimport { Loader2 } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { hasKeyphrase } from \"../../../engine/helpers/has-keyphrase\";\nimport type { CategoryResult } from \"../../../engine/types/analysis\";\nimport { TabHeader } from \"../../../ui/TabHeader\";\nimport { SectionCard } from \"../../../ui/SectionCard\";\nimport { Pill } from \"../../../ui/Pill\";\nimport { FilterPills } from \"../../../ui/FilterPills\";\nimport type { Filter } from \"../../../ui/FilterPills\";\nimport { CheckRow } from \"../../../ui/CheckRow\";\n\nexport interface KeyphraseTabProps {\n  data: CategoryResult;\n  keyphrase: string;\n  setKeyphrase: (keyphrase: string) => void;\n  analyzing: boolean;\n  keyphrasePending: boolean;\n  analyzeNow: () => void;\n}\n\nexport function KeyphraseTab({\n  data,\n  keyphrase,\n  setKeyphrase,\n  analyzing,\n  keyphrasePending,\n  analyzeNow,\n}: KeyphraseTabProps) {\n  const [filter, setFilter] = useState<Filter>(\"all\");\n  const visible = data.checks.filter((c) => filter === \"all\" || c.status === filter);\n  const passing = data.checks.filter((c) => c.status === \"good\").length;\n  const keyphrasePresent = hasKeyphrase(keyphrase);\n  const checksReady = keyphrasePresent && !keyphrasePending && !analyzing && data.checks.length > 0;\n\n  return (\n    <section className=\"flex flex-col gap-[13px]\">\n      <div className=\"flex gap-[8px]\">\n        <label className=\"flex-1 flex items-center gap-[8px] px-[12px] py-[9px] border border-neutral-200 rounded-rs bg-neutral-0\">\n          <input\n            type=\"text\"\n            className=\"border-0 outline-none flex-1 text-[13px] text-neutral-800 bg-transparent\"\n            value={keyphrase}\n            onChange={(e) => setKeyphrase(e.target.value)}\n            placeholder=\"Focus keyphrase\"\n            aria-label=\"Focus keyphrase\"\n          />\n        </label>\n        <span aria-live=\"polite\" className=\"sr-only\" role=\"status\">\n          {keyphrasePending ? \"Analyzing keyphrase…\" : \"\"}\n        </span>\n        <button\n          type=\"button\"\n          className=\"px-[18px] py-[9px] bg-neutral-1000 text-neutral-0 border-0 rounded-rs font-medium text-[13px] cursor-pointer disabled:opacity-50\"\n          disabled={!keyphrasePresent}\n          onClick={() => analyzeNow()}\n        >\n          {analyzing ? \"Analyzing…\" : \"Analyze\"}\n        </button>\n      </div>\n\n      {!keyphrasePresent && (\n        <p className=\"text-neutral-500 text-[13px]\">\n          Enter a focus keyphrase to analyze how well your content targets it.\n        </p>\n      )}\n\n      {keyphrasePresent && !checksReady && (\n        <div className=\"flex items-center gap-[8px] text-neutral-500 text-[13px]\">\n          <Loader2 aria-hidden=\"true\" className=\"w-[14px] h-[14px] animate-spin\" />\n          Analyzing keyphrase…\n        </div>\n      )}\n\n      {checksReady && (\n        <>\n          <TabHeader\n            title=\"Keyphrase optimization\"\n            score={data.ringScore}\n            status={data.status}\n            subtitle={\n              <>\n                {passing} / {data.checks.length} checks passing\n              </>\n            }\n          />\n\n          <SectionCard title=\"Checks\" widget={<Pill variant=\"neutral\">{data.checks.length}</Pill>}>\n            <FilterPills checks={data.checks} value={filter} onChange={setFilter} />\n            {visible.map((c) => (\n              <CheckRow key={c.id} check={c} />\n            ))}\n          </SectionCard>\n        </>\n      )}\n    </section>\n  );\n}\n"],"mappings":";AAsCM,SA4CQ,UA1CJ,KAFJ;AApCN,SAAS,eAAe;AACxB,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAE7B,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAE5B,SAAS,gBAAgB;AAWlB,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsB;AACpB,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAiB,KAAK;AAClD,QAAM,UAAU,KAAK,OAAO,OAAO,CAAC,MAAM,WAAW,SAAS,EAAE,WAAW,MAAM;AACjF,QAAM,UAAU,KAAK,OAAO,OAAO,CAAC,MAAM,EAAE,WAAW,MAAM,EAAE;AAC/D,QAAM,mBAAmB,aAAa,SAAS;AAC/C,QAAM,cAAc,oBAAoB,CAAC,oBAAoB,CAAC,aAAa,KAAK,OAAO,SAAS;AAEhG,SACE,qBAAC,aAAQ,WAAU,4BACjB;AAAA,yBAAC,SAAI,WAAU,kBACb;AAAA,0BAAC,WAAM,WAAU,2GACf;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,aAAa,EAAE,OAAO,KAAK;AAAA,UAC5C,aAAY;AAAA,UACZ,cAAW;AAAA;AAAA,MACb,GACF;AAAA,MACA,oBAAC,UAAK,aAAU,UAAS,WAAU,WAAU,MAAK,UAC/C,6BAAmB,8BAAyB,IAC/C;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,UAAU,CAAC;AAAA,UACX,SAAS,MAAM,WAAW;AAAA,UAEzB,sBAAY,oBAAe;AAAA;AAAA,MAC9B;AAAA,OACF;AAAA,IAEC,CAAC,oBACA,oBAAC,OAAE,WAAU,gCAA+B,kFAE5C;AAAA,IAGD,oBAAoB,CAAC,eACpB,qBAAC,SAAI,WAAU,4DACb;AAAA,0BAAC,WAAQ,eAAY,QAAO,WAAU,kCAAiC;AAAA,MAAE;AAAA,OAE3E;AAAA,IAGD,eACC,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAO,KAAK;AAAA,UACZ,QAAQ,KAAK;AAAA,UACb,UACE,iCACG;AAAA;AAAA,YAAQ;AAAA,YAAI,KAAK,OAAO;AAAA,YAAO;AAAA,aAClC;AAAA;AAAA,MAEJ;AAAA,MAEA,qBAAC,eAAY,OAAM,UAAS,QAAQ,oBAAC,QAAK,SAAQ,WAAW,eAAK,OAAO,QAAO,GAC9E;AAAA,4BAAC,eAAY,QAAQ,KAAK,QAAQ,OAAO,QAAQ,UAAU,WAAW;AAAA,QACrE,QAAQ,IAAI,CAAC,MACZ,oBAAC,YAAoB,OAAO,KAAb,EAAE,EAAc,CAChC;AAAA,SACH;AAAA,OACF;AAAA,KAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/SeoDrawer/tabs/KeyphraseTab.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRef } from \"react\";\nimport type { AnalysisResult, CategoryResult } from \"../../../engine/types/analysis\";\nimport type { KeyphraseEntry } from \"../keyphraseState\";\nimport type { CardState } from \"./keyphrase/KeyphraseCard\";\nimport { KeyphraseDetail } from \"./keyphrase/KeyphraseDetail\";\nimport type { DetailAnalysis } from \"./keyphrase/KeyphraseDetail\";\nimport { KeyphraseRail } from \"./keyphrase/KeyphraseRail\";\n\nexport interface KeyphraseTabProps {\n  keyphrases: KeyphraseEntry[];\n  selectedId: string | null;\n  onSelect: (id: string) => void;\n  result: AnalysisResult | null;\n  analyzing: boolean;\n  onAddRelated: () => void;\n  onTextChange: (id: string, text: string) => void;\n  onAddSynonym: (id: string, syn: string) => void;\n  onRemoveSynonym: (id: string, index: number) => void;\n  onRemove: (id: string) => void;\n  onSetFocus: (id: string) => void;\n  isDuplicate: (id: string, text: string) => boolean;\n}\n\nfunction resultForEntry(\n  entry: KeyphraseEntry,\n  isFocus: boolean,\n  result: AnalysisResult | null\n): CategoryResult | undefined {\n  if (!result) return undefined;\n  if (isFocus) return result.keyphraseText === entry.text ? result.keyphrase : undefined;\n  return result.relatedKeyphrases.find((r) => r.text === entry.text)?.result;\n}\n\nexport function KeyphraseTab({\n  keyphrases,\n  selectedId: selectedIdProp,\n  onSelect,\n  result,\n  analyzing,\n  onAddRelated,\n  onTextChange,\n  onAddSynonym,\n  onRemoveSynonym,\n  onRemove,\n  onSetFocus,\n  isDuplicate,\n}: KeyphraseTabProps) {\n  const selectedId = selectedIdProp ?? keyphrases[0]?.id ?? null;\n  const selected = keyphrases.find((k) => k.id === selectedId) ?? keyphrases[0] ?? null;\n  const selectedIsFocus = selected ? keyphrases.indexOf(selected) === 0 : true;\n\n  const lastMetrics = useRef<Map<string, CategoryResult>>(new Map());\n  const liveIds = new Set(keyphrases.map((k) => k.id));\n\n  for (const id of [...lastMetrics.current.keys()]) {\n    if (!liveIds.has(id)) lastMetrics.current.delete(id);\n  }\n\n  keyphrases.forEach((entry, index) => {\n    if (entry.text.trim() === \"\") {\n      lastMetrics.current.delete(entry.id);\n      return;\n    }\n    const fresh = resultForEntry(entry, index === 0, result);\n    if (fresh) lastMetrics.current.set(entry.id, fresh);\n  });\n\n  const stateFor = (entry: KeyphraseEntry): CardState => {\n    if (!entry.text.trim()) return { kind: \"idle\" };\n\n    const isFocus = keyphrases.indexOf(entry) === 0;\n    if (!isFocus && isDuplicate(entry.id, entry.text)) return { kind: \"idle\" };\n\n    const category = resultForEntry(entry, isFocus, result);\n    if (category) return { kind: \"score\", score: category.ringScore, status: category.status };\n\n    return { kind: \"analyzing\" };\n  };\n\n  const detailAnalysis = (): DetailAnalysis => {\n    if (!selected) return { kind: \"hint\", message: \"\" };\n\n    if (isDuplicate(selected.id, selected.text)) {\n      return {\n        kind: \"hint\",\n        message: \"Resolve the duplicate to analyse this keyphrase.\",\n      };\n    }\n\n    if (!selected.text.trim()) {\n      return {\n        kind: \"hint\",\n        message: \"Start typing a keyphrase to see its analysis.\",\n      };\n    }\n\n    const category = resultForEntry(selected, selectedIsFocus, result);\n    if (category) {\n      return {\n        kind: \"metrics\",\n        result: category,\n        dim: analyzing,\n      };\n    }\n\n    const previous = lastMetrics.current.get(selected.id);\n    if (previous) {\n      return {\n        kind: \"metrics\",\n        result: previous,\n        dim: true,\n      };\n    }\n\n    return { kind: \"analyzing\" };\n  };\n\n  const analysis = detailAnalysis();\n\n  return (\n    <div className=\"flex min-h-[420px]\">\n      <KeyphraseRail\n        entries={keyphrases}\n        onAdd={onAddRelated}\n        onSelect={onSelect}\n        selectedId={selectedId}\n        stateFor={stateFor}\n      />\n\n      {selected && (\n        <KeyphraseDetail\n          analysis={analysis}\n          duplicate={isDuplicate(selected.id, selected.text)}\n          entry={selected}\n          isFocus={selectedIsFocus}\n          onAddSynonym={(syn) => onAddSynonym(selected.id, syn)}\n          onRemove={() => onRemove(selected.id)}\n          onRemoveSynonym={(index) => onRemoveSynonym(selected.id, index)}\n          onSetFocus={() => onSetFocus(selected.id)}\n          onTextChange={(text) => onTextChange(selected.id, text)}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";AA0HI,SACE,KADF;AAxHJ,SAAS,cAAc;AAIvB,SAAS,uBAAuB;AAEhC,SAAS,qBAAqB;AAiB9B,SAAS,eACP,OACA,SACA,QAC4B;AAC5B,MAAI,CAAC;AAAQ,WAAO;AACpB,MAAI;AAAS,WAAO,OAAO,kBAAkB,MAAM,OAAO,OAAO,YAAY;AAC7E,SAAO,OAAO,kBAAkB,KAAK,CAAC,MAAM,EAAE,SAAS,MAAM,IAAI,GAAG;AACtE;AAEO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsB;AACpB,QAAM,aAAa,kBAAkB,WAAW,CAAC,GAAG,MAAM;AAC1D,QAAM,WAAW,WAAW,KAAK,CAAC,MAAM,EAAE,OAAO,UAAU,KAAK,WAAW,CAAC,KAAK;AACjF,QAAM,kBAAkB,WAAW,WAAW,QAAQ,QAAQ,MAAM,IAAI;AAExE,QAAM,cAAc,OAAoC,oBAAI,IAAI,CAAC;AACjE,QAAM,UAAU,IAAI,IAAI,WAAW,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC;AAEnD,aAAW,MAAM,CAAC,GAAG,YAAY,QAAQ,KAAK,CAAC,GAAG;AAChD,QAAI,CAAC,QAAQ,IAAI,EAAE;AAAG,kBAAY,QAAQ,OAAO,EAAE;AAAA,EACrD;AAEA,aAAW,QAAQ,CAAC,OAAO,UAAU;AACnC,QAAI,MAAM,KAAK,KAAK,MAAM,IAAI;AAC5B,kBAAY,QAAQ,OAAO,MAAM,EAAE;AACnC;AAAA,IACF;AACA,UAAM,QAAQ,eAAe,OAAO,UAAU,GAAG,MAAM;AACvD,QAAI;AAAO,kBAAY,QAAQ,IAAI,MAAM,IAAI,KAAK;AAAA,EACpD,CAAC;AAED,QAAM,WAAW,CAAC,UAAqC;AACrD,QAAI,CAAC,MAAM,KAAK,KAAK;AAAG,aAAO,EAAE,MAAM,OAAO;AAE9C,UAAM,UAAU,WAAW,QAAQ,KAAK,MAAM;AAC9C,QAAI,CAAC,WAAW,YAAY,MAAM,IAAI,MAAM,IAAI;AAAG,aAAO,EAAE,MAAM,OAAO;AAEzE,UAAM,WAAW,eAAe,OAAO,SAAS,MAAM;AACtD,QAAI;AAAU,aAAO,EAAE,MAAM,SAAS,OAAO,SAAS,WAAW,QAAQ,SAAS,OAAO;AAEzF,WAAO,EAAE,MAAM,YAAY;AAAA,EAC7B;AAEA,QAAM,iBAAiB,MAAsB;AAC3C,QAAI,CAAC;AAAU,aAAO,EAAE,MAAM,QAAQ,SAAS,GAAG;AAElD,QAAI,YAAY,SAAS,IAAI,SAAS,IAAI,GAAG;AAC3C,aAAO;AAAA,QACL,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAEA,QAAI,CAAC,SAAS,KAAK,KAAK,GAAG;AACzB,aAAO;AAAA,QACL,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAEA,UAAM,WAAW,eAAe,UAAU,iBAAiB,MAAM;AACjE,QAAI,UAAU;AACZ,aAAO;AAAA,QACL,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,KAAK;AAAA,MACP;AAAA,IACF;AAEA,UAAM,WAAW,YAAY,QAAQ,IAAI,SAAS,EAAE;AACpD,QAAI,UAAU;AACZ,aAAO;AAAA,QACL,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,KAAK;AAAA,MACP;AAAA,IACF;AAEA,WAAO,EAAE,MAAM,YAAY;AAAA,EAC7B;AAEA,QAAM,WAAW,eAAe;AAEhC,SACE,qBAAC,SAAI,WAAU,sBACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IAEC,YACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,YAAY,SAAS,IAAI,SAAS,IAAI;AAAA,QACjD,OAAO;AAAA,QACP,SAAS;AAAA,QACT,cAAc,CAAC,QAAQ,aAAa,SAAS,IAAI,GAAG;AAAA,QACpD,UAAU,MAAM,SAAS,SAAS,EAAE;AAAA,QACpC,iBAAiB,CAAC,UAAU,gBAAgB,SAAS,IAAI,KAAK;AAAA,QAC9D,YAAY,MAAM,WAAW,SAAS,EAAE;AAAA,QACxC,cAAc,CAAC,SAAS,aAAa,SAAS,IAAI,IAAI;AAAA;AAAA,IACxD;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/components/SeoDrawer/tabs/OnPageTab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OnPageTab.d.ts","sourceRoot":"","sources":["../../../../src/components/SeoDrawer/tabs/OnPageTab.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAQrE,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,cAAc,CAAA;CAAE,2CA0B3D"}
+{"version":3,"file":"OnPageTab.d.ts","sourceRoot":"","sources":["../../../../src/components/SeoDrawer/tabs/OnPageTab.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AASrE,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,cAAc,CAAA;CAAE,2CA4B3D"}

package/dist/components/SeoDrawer/tabs/OnPageTab.js

@@ -6,11 +6,12 @@ import { SectionCard } from "../../../ui/SectionCard";
 import { Pill } from "../../../ui/Pill";
 import { FilterPills } from "../../../ui/FilterPills";
 import { CheckRow } from "../../../ui/CheckRow";
+import { TabWrapper } from "../components/TabWrapper";
 function OnPageTab({ data }) {
   const [filter, setFilter] = useState("all");
   const visible = data.checks.filter((c) => filter === "all" || c.status === filter);
   const passing = data.checks.filter((c) => c.status === "good").length;
-  return /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-[13px]", children: [
+  return /* @__PURE__ */ jsx(TabWrapper, { children: /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-[13px]", children: [
     /* @__PURE__ */ jsx(
       TabHeader,
       {
@@ -29,7 +30,7 @@ function OnPageTab({ data }) {
       /* @__PURE__ */ jsx(FilterPills, { checks: data.checks, value: filter, onChange: setFilter }),
       visible.map((c) => /* @__PURE__ */ jsx(CheckRow, { check: c }, c.id))
     ] })
-  ] });
+  ] }) });
 }
 export {
   OnPageTab

package/dist/components/SeoDrawer/tabs/OnPageTab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SeoDrawer/tabs/OnPageTab.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport type { CategoryResult } from \"../../../engine/types/analysis\";\nimport { TabHeader } from \"../../../ui/TabHeader\";\nimport { SectionCard } from \"../../../ui/SectionCard\";\nimport { Pill } from \"../../../ui/Pill\";\nimport { FilterPills } from \"../../../ui/FilterPills\";\nimport type { Filter } from \"../../../ui/FilterPills\";\nimport { CheckRow } from \"../../../ui/CheckRow\";\n\nexport function OnPageTab({ data }: { data: CategoryResult }) {\n  const [filter, setFilter] = useState<Filter>(\"all\");\n  const visible = data.checks.filter((c) => filter === \"all\" || c.status === filter);\n  const passing = data.checks.filter((c) => c.status === \"good\").length;\n\n  return (\n    <section className=\"flex flex-col gap-[13px]\">\n      <TabHeader\n        title=\"On-page structure\"\n        score={data.ringScore}\n        status={data.status}\n        subtitle={\n          <>\n            {passing} / {data.checks.length} checks passing\n          </>\n        }\n      />\n\n      <SectionCard title=\"Checks\" widget={<Pill variant=\"neutral\">{data.checks.length}</Pill>}>\n        <FilterPills checks={data.checks} value={filter} onChange={setFilter} />\n        {visible.map((c) => (\n          <CheckRow key={c.id} check={c} />\n        ))}\n      </SectionCard>\n    </section>\n  );\n}\n"],"mappings":";AAkBM,SAKI,UALJ,KAKI,YALJ;AAhBN,SAAS,gBAAgB;AAEzB,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAE5B,SAAS,gBAAgB;AAElB,SAAS,UAAU,EAAE,KAAK,GAA6B;AAC5D,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAiB,KAAK;AAClD,QAAM,UAAU,KAAK,OAAO,OAAO,CAAC,MAAM,WAAW,SAAS,EAAE,WAAW,MAAM;AACjF,QAAM,UAAU,KAAK,OAAO,OAAO,CAAC,MAAM,EAAE,WAAW,MAAM,EAAE;AAE/D,SACE,qBAAC,aAAQ,WAAU,4BACjB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,OAAO,KAAK;AAAA,QACZ,QAAQ,KAAK;AAAA,QACb,UACE,iCACG;AAAA;AAAA,UAAQ;AAAA,UAAI,KAAK,OAAO;AAAA,UAAO;AAAA,WAClC;AAAA;AAAA,IAEJ;AAAA,IAEA,qBAAC,eAAY,OAAM,UAAS,QAAQ,oBAAC,QAAK,SAAQ,WAAW,eAAK,OAAO,QAAO,GAC9E;AAAA,0BAAC,eAAY,QAAQ,KAAK,QAAQ,OAAO,QAAQ,UAAU,WAAW;AAAA,MACrE,QAAQ,IAAI,CAAC,MACZ,oBAAC,YAAoB,OAAO,KAAb,EAAE,EAAc,CAChC;AAAA,OACH;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/SeoDrawer/tabs/OnPageTab.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport type { CategoryResult } from \"../../../engine/types/analysis\";\nimport { TabHeader } from \"../../../ui/TabHeader\";\nimport { SectionCard } from \"../../../ui/SectionCard\";\nimport { Pill } from \"../../../ui/Pill\";\nimport { FilterPills } from \"../../../ui/FilterPills\";\nimport type { Filter } from \"../../../ui/FilterPills\";\nimport { CheckRow } from \"../../../ui/CheckRow\";\nimport { TabWrapper } from \"../components/TabWrapper\";\n\nexport function OnPageTab({ data }: { data: CategoryResult }) {\n  const [filter, setFilter] = useState<Filter>(\"all\");\n  const visible = data.checks.filter((c) => filter === \"all\" || c.status === filter);\n  const passing = data.checks.filter((c) => c.status === \"good\").length;\n\n  return (\n    <TabWrapper>\n      <section className=\"flex flex-col gap-[13px]\">\n        <TabHeader\n          title=\"On-page structure\"\n          score={data.ringScore}\n          status={data.status}\n          subtitle={\n            <>\n              {passing} / {data.checks.length} checks passing\n            </>\n          }\n        />\n\n        <SectionCard title=\"Checks\" widget={<Pill variant=\"neutral\">{data.checks.length}</Pill>}>\n          <FilterPills checks={data.checks} value={filter} onChange={setFilter} />\n          {visible.map((c) => (\n            <CheckRow key={c.id} check={c} />\n          ))}\n        </SectionCard>\n      </section>\n    </TabWrapper>\n  );\n}\n"],"mappings":";AAoBQ,SAKI,UALJ,KAKI,YALJ;AAlBR,SAAS,gBAAgB;AAEzB,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAE5B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAEpB,SAAS,UAAU,EAAE,KAAK,GAA6B;AAC5D,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAiB,KAAK;AAClD,QAAM,UAAU,KAAK,OAAO,OAAO,CAAC,MAAM,WAAW,SAAS,EAAE,WAAW,MAAM;AACjF,QAAM,UAAU,KAAK,OAAO,OAAO,CAAC,MAAM,EAAE,WAAW,MAAM,EAAE;AAE/D,SACE,oBAAC,cACC,+BAAC,aAAQ,WAAU,4BACjB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,OAAO,KAAK;AAAA,QACZ,QAAQ,KAAK;AAAA,QACb,UACE,iCACG;AAAA;AAAA,UAAQ;AAAA,UAAI,KAAK,OAAO;AAAA,UAAO;AAAA,WAClC;AAAA;AAAA,IAEJ;AAAA,IAEA,qBAAC,eAAY,OAAM,UAAS,QAAQ,oBAAC,QAAK,SAAQ,WAAW,eAAK,OAAO,QAAO,GAC9E;AAAA,0BAAC,eAAY,QAAQ,KAAK,QAAQ,OAAO,QAAQ,UAAU,WAAW;AAAA,MACrE,QAAQ,IAAI,CAAC,MACZ,oBAAC,YAAoB,OAAO,KAAb,EAAE,EAAc,CAChC;AAAA,OACH;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/components/SeoDrawer/tabs/ReadabilityTab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReadabilityTab.d.ts","sourceRoot":"","sources":["../../../../src/components/SeoDrawer/tabs/ReadabilityTab.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAQrE,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,cAAc,CAAA;CAAE,2CA0BhE"}
+{"version":3,"file":"ReadabilityTab.d.ts","sourceRoot":"","sources":["../../../../src/components/SeoDrawer/tabs/ReadabilityTab.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AASrE,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,cAAc,CAAA;CAAE,2CA4BhE"}

package/dist/components/SeoDrawer/tabs/ReadabilityTab.js

@@ -6,11 +6,12 @@ import { SectionCard } from "../../../ui/SectionCard";
 import { Pill } from "../../../ui/Pill";
 import { FilterPills } from "../../../ui/FilterPills";
 import { CheckRow } from "../../../ui/CheckRow";
+import { TabWrapper } from "../components/TabWrapper";
 function ReadabilityTab({ data }) {
   const [filter, setFilter] = useState("all");
   const visible = data.checks.filter((c) => filter === "all" || c.status === filter);
   const passing = data.checks.filter((c) => c.status === "good").length;
-  return /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-[13px]", children: [
+  return /* @__PURE__ */ jsx(TabWrapper, { children: /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-[13px]", children: [
     /* @__PURE__ */ jsx(
       TabHeader,
       {
@@ -29,7 +30,7 @@ function ReadabilityTab({ data }) {
       /* @__PURE__ */ jsx(FilterPills, { checks: data.checks, value: filter, onChange: setFilter }),
       visible.map((c) => /* @__PURE__ */ jsx(CheckRow, { check: c }, c.id))
     ] })
-  ] });
+  ] }) });
 }
 export {
   ReadabilityTab

package/dist/components/SeoDrawer/tabs/ReadabilityTab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SeoDrawer/tabs/ReadabilityTab.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport type { CategoryResult } from \"../../../engine/types/analysis\";\nimport { TabHeader } from \"../../../ui/TabHeader\";\nimport { SectionCard } from \"../../../ui/SectionCard\";\nimport { Pill } from \"../../../ui/Pill\";\nimport { FilterPills } from \"../../../ui/FilterPills\";\nimport type { Filter } from \"../../../ui/FilterPills\";\nimport { CheckRow } from \"../../../ui/CheckRow\";\n\nexport function ReadabilityTab({ data }: { data: CategoryResult }) {\n  const [filter, setFilter] = useState<Filter>(\"all\");\n  const visible = data.checks.filter((c) => filter === \"all\" || c.status === filter);\n  const passing = data.checks.filter((c) => c.status === \"good\").length;\n\n  return (\n    <section className=\"flex flex-col gap-[13px]\">\n      <TabHeader\n        title=\"Readability\"\n        score={data.ringScore}\n        status={data.status}\n        subtitle={\n          <>\n            {passing} / {data.checks.length} checks passing\n          </>\n        }\n      />\n\n      <SectionCard title=\"Checks\" widget={<Pill variant=\"neutral\">{data.checks.length}</Pill>}>\n        <FilterPills checks={data.checks} value={filter} onChange={setFilter} />\n        {visible.map((c) => (\n          <CheckRow key={c.id} check={c} />\n        ))}\n      </SectionCard>\n    </section>\n  );\n}\n"],"mappings":";AAkBM,SAKI,UALJ,KAKI,YALJ;AAhBN,SAAS,gBAAgB;AAEzB,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAE5B,SAAS,gBAAgB;AAElB,SAAS,eAAe,EAAE,KAAK,GAA6B;AACjE,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAiB,KAAK;AAClD,QAAM,UAAU,KAAK,OAAO,OAAO,CAAC,MAAM,WAAW,SAAS,EAAE,WAAW,MAAM;AACjF,QAAM,UAAU,KAAK,OAAO,OAAO,CAAC,MAAM,EAAE,WAAW,MAAM,EAAE;AAE/D,SACE,qBAAC,aAAQ,WAAU,4BACjB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,OAAO,KAAK;AAAA,QACZ,QAAQ,KAAK;AAAA,QACb,UACE,iCACG;AAAA;AAAA,UAAQ;AAAA,UAAI,KAAK,OAAO;AAAA,UAAO;AAAA,WAClC;AAAA;AAAA,IAEJ;AAAA,IAEA,qBAAC,eAAY,OAAM,UAAS,QAAQ,oBAAC,QAAK,SAAQ,WAAW,eAAK,OAAO,QAAO,GAC9E;AAAA,0BAAC,eAAY,QAAQ,KAAK,QAAQ,OAAO,QAAQ,UAAU,WAAW;AAAA,MACrE,QAAQ,IAAI,CAAC,MACZ,oBAAC,YAAoB,OAAO,KAAb,EAAE,EAAc,CAChC;AAAA,OACH;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/SeoDrawer/tabs/ReadabilityTab.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport type { CategoryResult } from \"../../../engine/types/analysis\";\nimport { TabHeader } from \"../../../ui/TabHeader\";\nimport { SectionCard } from \"../../../ui/SectionCard\";\nimport { Pill } from \"../../../ui/Pill\";\nimport { FilterPills } from \"../../../ui/FilterPills\";\nimport type { Filter } from \"../../../ui/FilterPills\";\nimport { CheckRow } from \"../../../ui/CheckRow\";\nimport { TabWrapper } from \"../components/TabWrapper\";\n\nexport function ReadabilityTab({ data }: { data: CategoryResult }) {\n  const [filter, setFilter] = useState<Filter>(\"all\");\n  const visible = data.checks.filter((c) => filter === \"all\" || c.status === filter);\n  const passing = data.checks.filter((c) => c.status === \"good\").length;\n\n  return (\n    <TabWrapper>\n      <section className=\"flex flex-col gap-[13px]\">\n        <TabHeader\n          title=\"Readability\"\n          score={data.ringScore}\n          status={data.status}\n          subtitle={\n            <>\n              {passing} / {data.checks.length} checks passing\n            </>\n          }\n        />\n\n        <SectionCard title=\"Checks\" widget={<Pill variant=\"neutral\">{data.checks.length}</Pill>}>\n          <FilterPills checks={data.checks} value={filter} onChange={setFilter} />\n          {visible.map((c) => (\n            <CheckRow key={c.id} check={c} />\n          ))}\n        </SectionCard>\n      </section>\n    </TabWrapper>\n  );\n}\n"],"mappings":";AAoBQ,SAKI,UALJ,KAKI,YALJ;AAlBR,SAAS,gBAAgB;AAEzB,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAE5B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAEpB,SAAS,eAAe,EAAE,KAAK,GAA6B;AACjE,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAiB,KAAK;AAClD,QAAM,UAAU,KAAK,OAAO,OAAO,CAAC,MAAM,WAAW,SAAS,EAAE,WAAW,MAAM;AACjF,QAAM,UAAU,KAAK,OAAO,OAAO,CAAC,MAAM,EAAE,WAAW,MAAM,EAAE;AAE/D,SACE,oBAAC,cACC,+BAAC,aAAQ,WAAU,4BACjB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,OAAO,KAAK;AAAA,QACZ,QAAQ,KAAK;AAAA,QACb,UACE,iCACG;AAAA;AAAA,UAAQ;AAAA,UAAI,KAAK,OAAO;AAAA,UAAO;AAAA,WAClC;AAAA;AAAA,IAEJ;AAAA,IAEA,qBAAC,eAAY,OAAM,UAAS,QAAQ,oBAAC,QAAK,SAAQ,WAAW,eAAK,OAAO,QAAO,GAC9E;AAAA,0BAAC,eAAY,QAAQ,KAAK,QAAQ,OAAO,QAAQ,UAAU,WAAW;AAAA,MACrE,QAAQ,IAAI,CAAC,MACZ,oBAAC,YAAoB,OAAO,KAAb,EAAE,EAAc,CAChC;AAAA,OACH;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/components/SeoDrawer/tabs/SerpTab.d.ts

@@ -1,7 +1,8 @@
 import type { SerpResult } from "../../../engine/types/analysis";
-export declare function SerpTab({ data, keyphrase, faviconUrl, }: {
+export declare function SerpTab({ data, keyphrase, synonyms, faviconUrl, }: {
     data: SerpResult;
     keyphrase: string;
+    synonyms?: string[];
     faviconUrl: string;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SerpTab.d.ts.map

package/dist/components/SeoDrawer/tabs/SerpTab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SerpTab.d.ts","sourceRoot":"","sources":["../../../../src/components/SeoDrawer/tabs/SerpTab.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAMjE,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,SAAS,EACT,UAAU,GACX,EAAE;IACD,IAAI,EAAE,UAAU,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB,2CAiCA"}
+{"version":3,"file":"SerpTab.d.ts","sourceRoot":"","sources":["../../../../src/components/SeoDrawer/tabs/SerpTab.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAOjE,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,SAAS,EACT,QAAa,EACb,UAAU,GACX,EAAE;IACD,IAAI,EAAE,UAAU,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACpB,2CAyCA"}

package/dist/components/SeoDrawer/tabs/SerpTab.js

@@ -5,13 +5,15 @@ import { useState } from "react";
 import { SectionCard } from "../../../ui/SectionCard";
 import { SegmentedControl } from "../../../ui/SegmentedControl";
 import { SerpPreview } from "../components/SerpPreview";
+import { TabWrapper } from "../components/TabWrapper";
 function SerpTab({
   data,
   keyphrase,
+  synonyms = [],
   faviconUrl
 }) {
   const [mode, setMode] = useState("mobile");
-  return /* @__PURE__ */ jsx("section", { className: "flex flex-col gap-[13px]", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(TabWrapper, { children: /* @__PURE__ */ jsx("section", { className: "flex flex-col gap-[13px]", children: /* @__PURE__ */ jsx(
     SectionCard,
     {
       title: "Search result preview",
@@ -35,9 +37,18 @@ function SerpTab({
           label: "Preview device"
         }
       ),
-      children: /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(SerpPreview, { data, keyphrase, faviconUrl, mode }) })
+      children: /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(
+        SerpPreview,
+        {
+          data,
+          keyphrase,
+          synonyms,
+          faviconUrl,
+          mode
+        }
+      ) })
     }
-  ) });
+  ) }) });
 }
 export {
   SerpTab

package/dist/components/SeoDrawer/tabs/SerpTab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SeoDrawer/tabs/SerpTab.tsx"],"sourcesContent":["\"use client\";\n\nimport { Monitor, Smartphone } from \"lucide-react\";\nimport { useState } from \"react\";\n\nimport type { SerpResult } from \"../../../engine/types/analysis\";\nimport { SectionCard } from \"../../../ui/SectionCard\";\nimport { SegmentedControl } from \"../../../ui/SegmentedControl\";\nimport { SerpPreview } from \"../components/SerpPreview\";\nimport type { SerpMode } from \"../components/SerpPreview\";\n\nexport function SerpTab({\n  data,\n  keyphrase,\n  faviconUrl,\n}: {\n  data: SerpResult;\n  keyphrase: string;\n  faviconUrl: string;\n}) {\n  const [mode, setMode] = useState<SerpMode>(\"mobile\");\n\n  return (\n    <section className=\"flex flex-col gap-[13px]\">\n      <SectionCard\n        title=\"Search result preview\"\n        widget={\n          <SegmentedControl\n            options={[\n              {\n                value: \"mobile\",\n                label: \"Mobile\",\n                icon: <Smartphone aria-hidden=\"true\" className=\"w-[13px] h-[13px]\" />,\n              },\n              {\n                value: \"desktop\",\n                label: \"Desktop\",\n                icon: <Monitor aria-hidden=\"true\" className=\"w-[13px] h-[13px]\" />,\n              },\n            ]}\n            value={mode}\n            onChange={setMode}\n            label=\"Preview device\"\n          />\n        }\n      >\n        <div className=\"p-4\">\n          <SerpPreview data={data} keyphrase={keyphrase} faviconUrl={faviconUrl} mode={mode} />\n        </div>\n      </SectionCard>\n    </section>\n  );\n}\n"],"mappings":";AAgCsB;AA9BtB,SAAS,SAAS,kBAAkB;AACpC,SAAS,gBAAgB;AAGzB,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAGrB,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAmB,QAAQ;AAEnD,SACE,oBAAC,aAAQ,WAAU,4BACjB;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,QACE;AAAA,QAAC;AAAA;AAAA,UACC,SAAS;AAAA,YACP;AAAA,cACE,OAAO;AAAA,cACP,OAAO;AAAA,cACP,MAAM,oBAAC,cAAW,eAAY,QAAO,WAAU,qBAAoB;AAAA,YACrE;AAAA,YACA;AAAA,cACE,OAAO;AAAA,cACP,OAAO;AAAA,cACP,MAAM,oBAAC,WAAQ,eAAY,QAAO,WAAU,qBAAoB;AAAA,YAClE;AAAA,UACF;AAAA,UACA,OAAO;AAAA,UACP,UAAU;AAAA,UACV,OAAM;AAAA;AAAA,MACR;AAAA,MAGF,8BAAC,SAAI,WAAU,OACb,8BAAC,eAAY,MAAY,WAAsB,YAAwB,MAAY,GACrF;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/SeoDrawer/tabs/SerpTab.tsx"],"sourcesContent":["\"use client\";\n\nimport { Monitor, Smartphone } from \"lucide-react\";\nimport { useState } from \"react\";\n\nimport type { SerpResult } from \"../../../engine/types/analysis\";\nimport { SectionCard } from \"../../../ui/SectionCard\";\nimport { SegmentedControl } from \"../../../ui/SegmentedControl\";\nimport { SerpPreview } from \"../components/SerpPreview\";\nimport type { SerpMode } from \"../components/SerpPreview\";\nimport { TabWrapper } from \"../components/TabWrapper\";\n\nexport function SerpTab({\n  data,\n  keyphrase,\n  synonyms = [],\n  faviconUrl,\n}: {\n  data: SerpResult;\n  keyphrase: string;\n  synonyms?: string[];\n  faviconUrl: string;\n}) {\n  const [mode, setMode] = useState<SerpMode>(\"mobile\");\n\n  return (\n    <TabWrapper>\n      <section className=\"flex flex-col gap-[13px]\">\n        <SectionCard\n          title=\"Search result preview\"\n          widget={\n            <SegmentedControl\n              options={[\n                {\n                  value: \"mobile\",\n                  label: \"Mobile\",\n                  icon: <Smartphone aria-hidden=\"true\" className=\"w-[13px] h-[13px]\" />,\n                },\n                {\n                  value: \"desktop\",\n                  label: \"Desktop\",\n                  icon: <Monitor aria-hidden=\"true\" className=\"w-[13px] h-[13px]\" />,\n                },\n              ]}\n              value={mode}\n              onChange={setMode}\n              label=\"Preview device\"\n            />\n          }\n        >\n          <div className=\"p-4\">\n            <SerpPreview\n              data={data}\n              keyphrase={keyphrase}\n              synonyms={synonyms}\n              faviconUrl={faviconUrl}\n              mode={mode}\n            />\n          </div>\n        </SectionCard>\n      </section>\n    </TabWrapper>\n  );\n}\n"],"mappings":";AAoCwB;AAlCxB,SAAS,SAAS,kBAAkB;AACpC,SAAS,gBAAgB;AAGzB,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAE5B,SAAS,kBAAkB;AAEpB,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA,WAAW,CAAC;AAAA,EACZ;AACF,GAKG;AACD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAmB,QAAQ;AAEnD,SACE,oBAAC,cACC,8BAAC,aAAQ,WAAU,4BACjB;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,QACE;AAAA,QAAC;AAAA;AAAA,UACC,SAAS;AAAA,YACP;AAAA,cACE,OAAO;AAAA,cACP,OAAO;AAAA,cACP,MAAM,oBAAC,cAAW,eAAY,QAAO,WAAU,qBAAoB;AAAA,YACrE;AAAA,YACA;AAAA,cACE,OAAO;AAAA,cACP,OAAO;AAAA,cACP,MAAM,oBAAC,WAAQ,eAAY,QAAO,WAAU,qBAAoB;AAAA,YAClE;AAAA,UACF;AAAA,UACA,OAAO;AAAA,UACP,UAAU;AAAA,UACV,OAAM;AAAA;AAAA,MACR;AAAA,MAGF,8BAAC,SAAI,WAAU,OACb;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF,GACF;AAAA;AAAA,EACF,GACF,GACF;AAEJ;","names":[]}

package/dist/components/SeoDrawer/tabs/VitalsTab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VitalsTab.d.ts","sourceRoot":"","sources":["../../../../src/components/SeoDrawer/tabs/VitalsTab.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAOnE,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,YAAY,CAAC;IACnB,kBAAkB,EAAE,MAAM,IAAI,CAAC;CAChC;AAED,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,kBAAkB,EAAE,EAAE,cAAc,2CA6DrE"}
+{"version":3,"file":"VitalsTab.d.ts","sourceRoot":"","sources":["../../../../src/components/SeoDrawer/tabs/VitalsTab.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAQnE,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,YAAY,CAAC;IACnB,kBAAkB,EAAE,MAAM,IAAI,CAAC;CAChC;AAED,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,kBAAkB,EAAE,EAAE,cAAc,2CAkErE"}

package/dist/components/SeoDrawer/tabs/VitalsTab.js

@@ -5,10 +5,11 @@ import { KpiCard } from "../../../ui/KpiCard";
 import { SectionCard } from "../../../ui/SectionCard";
 import { Pill } from "../../../ui/Pill";
 import { HeadingsSection } from "../components/HeadingsSection";
+import { TabWrapper } from "../components/TabWrapper";
 function VitalsTab({ data, onRequestKeyphrase }) {
   const max = Math.max(1, ...data.prominentWords.map((w) => w.count));
   const noKeyphraseMatch = data.prominentWords.every((w) => !w.isKeyphrase);
-  return /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-[13px]", children: [
+  return /* @__PURE__ */ jsx(TabWrapper, { children: /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-[13px]", children: [
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-[9px]", children: [
       /* @__PURE__ */ jsx(KpiCard, { label: "Words", value: data.words.toLocaleString() }),
       /* @__PURE__ */ jsx(KpiCard, { label: "Sentences", value: data.sentences }),
@@ -39,7 +40,10 @@ function VitalsTab({ data, onRequestKeyphrase }) {
               /* @__PURE__ */ jsx("div", { className: "flex-1 h-[6px] rounded-[3px] bg-neutral-100 overflow-hidden", children: /* @__PURE__ */ jsx(
                 "i",
                 {
-                  className: cn("block h-full", w.isKeyphrase ? "bg-neutral-1000" : "bg-neutral-400"),
+                  className: cn(
+                    "block h-full",
+                    w.isKeyphrase ? "bg-neutral-1000" : "bg-neutral-400"
+                  ),
                   style: { width: `${w.count / max * 100}%` }
                 }
               ) }),
@@ -59,7 +63,7 @@ function VitalsTab({ data, onRequestKeyphrase }) {
         children: "Set a focus keyphrase to see which prominent words match it"
       }
     )
-  ] });
+  ] }) });
 }
 export {
   VitalsTab

package/dist/components/SeoDrawer/tabs/VitalsTab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SeoDrawer/tabs/VitalsTab.tsx"],"sourcesContent":["\"use client\";\n\nimport type { VitalsResult } from \"../../../engine/types/analysis\";\nimport { cn, ROW_SEPARATOR } from \"../../../utils/style\";\nimport { KpiCard } from \"../../../ui/KpiCard\";\nimport { SectionCard } from \"../../../ui/SectionCard\";\nimport { Pill } from \"../../../ui/Pill\";\nimport { HeadingsSection } from \"../components/HeadingsSection\";\n\nexport interface VitalsTabProps {\n  data: VitalsResult;\n  onRequestKeyphrase: () => void;\n}\n\nexport function VitalsTab({ data, onRequestKeyphrase }: VitalsTabProps) {\n  const max = Math.max(1, ...data.prominentWords.map((w) => w.count));\n  const noKeyphraseMatch = data.prominentWords.every((w) => !w.isKeyphrase);\n\n  return (\n    <section className=\"flex flex-col gap-[13px]\">\n      <div className=\"grid grid-cols-3 gap-[9px]\">\n        <KpiCard label=\"Words\" value={data.words.toLocaleString()} />\n        <KpiCard label=\"Sentences\" value={data.sentences} />\n        <KpiCard label=\"Paragraphs\" value={data.paragraphs} />\n        <KpiCard label=\"Images\" value={data.images} />\n        <KpiCard label=\"Videos\" value={data.videos} />\n        <KpiCard label=\"Reading time\" value={data.readingTimeMinutes} suffix=\"min\" />\n      </div>\n\n      <HeadingsSection data={data.headings} />\n\n      <SectionCard\n        title=\"Prominent words\"\n        widget={<Pill variant=\"neutral\">{data.prominentWords.length}</Pill>}\n      >\n        {data.prominentWords.map((w) => (\n          <div\n            className={cn(\n              \"relative flex items-center gap-[12px] px-[15px] py-[9px]\",\n              ROW_SEPARATOR\n            )}\n            key={w.word}\n          >\n            <div className=\"w-[120px] flex-none text-[12px] font-medium flex items-center gap-[6px]\">\n              {w.word}{\" \"}\n              {w.isKeyphrase && (\n                <span className=\"text-[9px] font-bold uppercase tracking-[0.04em] text-neutral-1000 bg-neutral-150 rounded-[3px] px-[5px] py-[1px]\">\n                  Key\n                </span>\n              )}\n            </div>\n            <div className=\"flex-1 h-[6px] rounded-[3px] bg-neutral-100 overflow-hidden\">\n              <i\n                className={cn(\"block h-full\", w.isKeyphrase ? \"bg-neutral-1000\" : \"bg-neutral-400\")}\n                style={{ width: `${(w.count / max) * 100}%` }}\n              />\n            </div>\n            <div className=\"w-[30px] text-right font-mono text-[11px] font-semibold text-neutral-700\">\n              {w.count}\n            </div>\n          </div>\n        ))}\n      </SectionCard>\n\n      {noKeyphraseMatch && (\n        <button\n          type=\"button\"\n          onClick={onRequestKeyphrase}\n          className=\"self-start text-[12px] text-neutral-600 underline underline-offset-2 hover:text-neutral-800 cursor-pointer bg-transparent border-0 p-0\"\n        >\n          Set a focus keyphrase to see which prominent words match it\n        </button>\n      )}\n    </section>\n  );\n}\n"],"mappings":";AAoBM,SACE,KADF;AAjBN,SAAS,IAAI,qBAAqB;AAClC,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,SAAS,YAAY;AACrB,SAAS,uBAAuB;AAOzB,SAAS,UAAU,EAAE,MAAM,mBAAmB,GAAmB;AACtE,QAAM,MAAM,KAAK,IAAI,GAAG,GAAG,KAAK,eAAe,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC;AAClE,QAAM,mBAAmB,KAAK,eAAe,MAAM,CAAC,MAAM,CAAC,EAAE,WAAW;AAExE,SACE,qBAAC,aAAQ,WAAU,4BACjB;AAAA,yBAAC,SAAI,WAAU,8BACb;AAAA,0BAAC,WAAQ,OAAM,SAAQ,OAAO,KAAK,MAAM,eAAe,GAAG;AAAA,MAC3D,oBAAC,WAAQ,OAAM,aAAY,OAAO,KAAK,WAAW;AAAA,MAClD,oBAAC,WAAQ,OAAM,cAAa,OAAO,KAAK,YAAY;AAAA,MACpD,oBAAC,WAAQ,OAAM,UAAS,OAAO,KAAK,QAAQ;AAAA,MAC5C,oBAAC,WAAQ,OAAM,UAAS,OAAO,KAAK,QAAQ;AAAA,MAC5C,oBAAC,WAAQ,OAAM,gBAAe,OAAO,KAAK,oBAAoB,QAAO,OAAM;AAAA,OAC7E;AAAA,IAEA,oBAAC,mBAAgB,MAAM,KAAK,UAAU;AAAA,IAEtC;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,QAAQ,oBAAC,QAAK,SAAQ,WAAW,eAAK,eAAe,QAAO;AAAA,QAE3D,eAAK,eAAe,IAAI,CAAC,MACxB;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YACF;AAAA,YAGA;AAAA,mCAAC,SAAI,WAAU,2EACZ;AAAA,kBAAE;AAAA,gBAAM;AAAA,gBACR,EAAE,eACD,oBAAC,UAAK,WAAU,qHAAoH,iBAEpI;AAAA,iBAEJ;AAAA,cACA,oBAAC,SAAI,WAAU,+DACb;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW,GAAG,gBAAgB,EAAE,cAAc,oBAAoB,gBAAgB;AAAA,kBAClF,OAAO,EAAE,OAAO,GAAI,EAAE,QAAQ,MAAO,GAAG,IAAI;AAAA;AAAA,cAC9C,GACF;AAAA,cACA,oBAAC,SAAI,WAAU,4EACZ,YAAE,OACL;AAAA;AAAA;AAAA,UAlBK,EAAE;AAAA,QAmBT,CACD;AAAA;AAAA,IACH;AAAA,IAEC,oBACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,WAAU;AAAA,QACX;AAAA;AAAA,IAED;AAAA,KAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/SeoDrawer/tabs/VitalsTab.tsx"],"sourcesContent":["\"use client\";\n\nimport type { VitalsResult } from \"../../../engine/types/analysis\";\nimport { cn, ROW_SEPARATOR } from \"../../../utils/style\";\nimport { KpiCard } from \"../../../ui/KpiCard\";\nimport { SectionCard } from \"../../../ui/SectionCard\";\nimport { Pill } from \"../../../ui/Pill\";\nimport { HeadingsSection } from \"../components/HeadingsSection\";\nimport { TabWrapper } from \"../components/TabWrapper\";\n\nexport interface VitalsTabProps {\n  data: VitalsResult;\n  onRequestKeyphrase: () => void;\n}\n\nexport function VitalsTab({ data, onRequestKeyphrase }: VitalsTabProps) {\n  const max = Math.max(1, ...data.prominentWords.map((w) => w.count));\n  const noKeyphraseMatch = data.prominentWords.every((w) => !w.isKeyphrase);\n\n  return (\n    <TabWrapper>\n      <section className=\"flex flex-col gap-[13px]\">\n        <div className=\"grid grid-cols-3 gap-[9px]\">\n          <KpiCard label=\"Words\" value={data.words.toLocaleString()} />\n          <KpiCard label=\"Sentences\" value={data.sentences} />\n          <KpiCard label=\"Paragraphs\" value={data.paragraphs} />\n          <KpiCard label=\"Images\" value={data.images} />\n          <KpiCard label=\"Videos\" value={data.videos} />\n          <KpiCard label=\"Reading time\" value={data.readingTimeMinutes} suffix=\"min\" />\n        </div>\n\n        <HeadingsSection data={data.headings} />\n\n        <SectionCard\n          title=\"Prominent words\"\n          widget={<Pill variant=\"neutral\">{data.prominentWords.length}</Pill>}\n        >\n          {data.prominentWords.map((w) => (\n            <div\n              className={cn(\n                \"relative flex items-center gap-[12px] px-[15px] py-[9px]\",\n                ROW_SEPARATOR\n              )}\n              key={w.word}\n            >\n              <div className=\"w-[120px] flex-none text-[12px] font-medium flex items-center gap-[6px]\">\n                {w.word}{\" \"}\n                {w.isKeyphrase && (\n                  <span className=\"text-[9px] font-bold uppercase tracking-[0.04em] text-neutral-1000 bg-neutral-150 rounded-[3px] px-[5px] py-[1px]\">\n                    Key\n                  </span>\n                )}\n              </div>\n              <div className=\"flex-1 h-[6px] rounded-[3px] bg-neutral-100 overflow-hidden\">\n                <i\n                  className={cn(\n                    \"block h-full\",\n                    w.isKeyphrase ? \"bg-neutral-1000\" : \"bg-neutral-400\"\n                  )}\n                  style={{ width: `${(w.count / max) * 100}%` }}\n                />\n              </div>\n              <div className=\"w-[30px] text-right font-mono text-[11px] font-semibold text-neutral-700\">\n                {w.count}\n              </div>\n            </div>\n          ))}\n        </SectionCard>\n\n        {noKeyphraseMatch && (\n          <button\n            type=\"button\"\n            onClick={onRequestKeyphrase}\n            className=\"self-start text-[12px] text-neutral-600 underline underline-offset-2 hover:text-neutral-800 cursor-pointer bg-transparent border-0 p-0\"\n          >\n            Set a focus keyphrase to see which prominent words match it\n          </button>\n        )}\n      </section>\n    </TabWrapper>\n  );\n}\n"],"mappings":";AAsBQ,SACE,KADF;AAnBR,SAAS,IAAI,qBAAqB;AAClC,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,SAAS,YAAY;AACrB,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AAOpB,SAAS,UAAU,EAAE,MAAM,mBAAmB,GAAmB;AACtE,QAAM,MAAM,KAAK,IAAI,GAAG,GAAG,KAAK,eAAe,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC;AAClE,QAAM,mBAAmB,KAAK,eAAe,MAAM,CAAC,MAAM,CAAC,EAAE,WAAW;AAExE,SACE,oBAAC,cACC,+BAAC,aAAQ,WAAU,4BACjB;AAAA,yBAAC,SAAI,WAAU,8BACb;AAAA,0BAAC,WAAQ,OAAM,SAAQ,OAAO,KAAK,MAAM,eAAe,GAAG;AAAA,MAC3D,oBAAC,WAAQ,OAAM,aAAY,OAAO,KAAK,WAAW;AAAA,MAClD,oBAAC,WAAQ,OAAM,cAAa,OAAO,KAAK,YAAY;AAAA,MACpD,oBAAC,WAAQ,OAAM,UAAS,OAAO,KAAK,QAAQ;AAAA,MAC5C,oBAAC,WAAQ,OAAM,UAAS,OAAO,KAAK,QAAQ;AAAA,MAC5C,oBAAC,WAAQ,OAAM,gBAAe,OAAO,KAAK,oBAAoB,QAAO,OAAM;AAAA,OAC7E;AAAA,IAEA,oBAAC,mBAAgB,MAAM,KAAK,UAAU;AAAA,IAEtC;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,QAAQ,oBAAC,QAAK,SAAQ,WAAW,eAAK,eAAe,QAAO;AAAA,QAE3D,eAAK,eAAe,IAAI,CAAC,MACxB;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YACF;AAAA,YAGA;AAAA,mCAAC,SAAI,WAAU,2EACZ;AAAA,kBAAE;AAAA,gBAAM;AAAA,gBACR,EAAE,eACD,oBAAC,UAAK,WAAU,qHAAoH,iBAEpI;AAAA,iBAEJ;AAAA,cACA,oBAAC,SAAI,WAAU,+DACb;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW;AAAA,oBACT;AAAA,oBACA,EAAE,cAAc,oBAAoB;AAAA,kBACtC;AAAA,kBACA,OAAO,EAAE,OAAO,GAAI,EAAE,QAAQ,MAAO,GAAG,IAAI;AAAA;AAAA,cAC9C,GACF;AAAA,cACA,oBAAC,SAAI,WAAU,4EACZ,YAAE,OACL;AAAA;AAAA;AAAA,UArBK,EAAE;AAAA,QAsBT,CACD;AAAA;AAAA,IACH;AAAA,IAEC,oBACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,WAAU;AAAA,QACX;AAAA;AAAA,IAED;AAAA,KAEJ,GACF;AAEJ;","names":[]}

package/dist/components/SeoDrawer/tabs/keyphrase/KeyphraseCard.d.ts

@@ -0,0 +1,21 @@
+import type { Status } from "../../../../engine/types/analysis";
+import type { KeyphraseEntry } from "../../keyphraseState";
+export type CardState = {
+    kind: "score";
+    score: number;
+    status: Status;
+} | {
+    kind: "analyzing";
+} | {
+    kind: "idle";
+};
+interface KeyphraseCardProps {
+    entry: KeyphraseEntry;
+    isFocus: boolean;
+    selected: boolean;
+    state: CardState;
+    onSelect: (id: string) => void;
+}
+export declare function KeyphraseCard({ entry, isFocus, selected, state, onSelect }: KeyphraseCardProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=KeyphraseCard.d.ts.map

package/dist/components/SeoDrawer/tabs/keyphrase/KeyphraseCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyphraseCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/SeoDrawer/tabs/keyphrase/KeyphraseCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAC;AAGhE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,MAAM,MAAM,SAAS,GACjB;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAChD;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,GACrB;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAErB,UAAU,kBAAkB;IAC1B,KAAK,EAAE,cAAc,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAcD,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,kBAAkB,2CAgC9F"}

package/dist/components/SeoDrawer/tabs/keyphrase/KeyphraseCard.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ScoreRing } from "../../../../ui/ScoreRing";
+import { cn } from "../../../../utils/style";
+function MiniRing({ state }) {
+  if (state.kind === "analyzing") {
+    return /* @__PURE__ */ jsx(ScoreRing, { size: "small", status: "loading" });
+  }
+  if (state.kind === "score") {
+    return /* @__PURE__ */ jsx(ScoreRing, { score: state.score, size: "small", status: state.status });
+  }
+  return /* @__PURE__ */ jsx(ScoreRing, { size: "small", status: "idle" });
+}
+function KeyphraseCard({ entry, isFocus, selected, state, onSelect }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": selected,
+      onClick: () => onSelect(entry.id),
+      className: cn(
+        "flex items-center gap-[10px] p-[8px] rounded-rs w-full text-left bg-neutral-0 border",
+        selected ? "border-neutral-300 shadow-[0_1px_5px_rgba(30,25,20,0.09)]" : "border-transparent hover:border-neutral-150"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(MiniRing, { state }),
+        /* @__PURE__ */ jsxs("span", { className: "flex-1 min-w-0 flex flex-col gap-[2px]", children: [
+          isFocus && /* @__PURE__ */ jsx("span", { className: "self-start text-[7px] leading-none uppercase bg-neutral-1000 text-neutral-0 px-[6px] py-[2px] rounded-[7px] tracking-[0.06em] font-bold", children: "Focus" }),
+          entry.text ? /* @__PURE__ */ jsx("span", { className: "text-[12px] font-semibold text-neutral-800 truncate", children: entry.text }) : /* @__PURE__ */ jsx("span", { className: "text-[12px] font-medium italic text-neutral-300 truncate", children: "New keyphrase" })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  KeyphraseCard
+};
+//# sourceMappingURL=KeyphraseCard.js.map

package/dist/components/SeoDrawer/tabs/keyphrase/KeyphraseCard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/SeoDrawer/tabs/keyphrase/KeyphraseCard.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Status } from \"../../../../engine/types/analysis\";\nimport { ScoreRing } from \"../../../../ui/ScoreRing\";\nimport { cn } from \"../../../../utils/style\";\nimport type { KeyphraseEntry } from \"../../keyphraseState\";\n\nexport type CardState =\n  | { kind: \"score\"; score: number; status: Status }\n  | { kind: \"analyzing\" }\n  | { kind: \"idle\" };\n\ninterface KeyphraseCardProps {\n  entry: KeyphraseEntry;\n  isFocus: boolean;\n  selected: boolean;\n  state: CardState;\n  onSelect: (id: string) => void;\n}\n\nfunction MiniRing({ state }: { state: CardState }) {\n  if (state.kind === \"analyzing\") {\n    return <ScoreRing size=\"small\" status=\"loading\" />;\n  }\n\n  if (state.kind === \"score\") {\n    return <ScoreRing score={state.score} size=\"small\" status={state.status} />;\n  }\n\n  return <ScoreRing size=\"small\" status=\"idle\" />;\n}\n\nexport function KeyphraseCard({ entry, isFocus, selected, state, onSelect }: KeyphraseCardProps) {\n  return (\n    <button\n      type=\"button\"\n      aria-pressed={selected}\n      onClick={() => onSelect(entry.id)}\n      className={cn(\n        \"flex items-center gap-[10px] p-[8px] rounded-rs w-full text-left bg-neutral-0 border\",\n        selected\n          ? \"border-neutral-300 shadow-[0_1px_5px_rgba(30,25,20,0.09)]\"\n          : \"border-transparent hover:border-neutral-150\"\n      )}\n    >\n      <MiniRing state={state} />\n\n      <span className=\"flex-1 min-w-0 flex flex-col gap-[2px]\">\n        {isFocus && (\n          <span className=\"self-start text-[7px] leading-none uppercase bg-neutral-1000 text-neutral-0 px-[6px] py-[2px] rounded-[7px] tracking-[0.06em] font-bold\">\n            Focus\n          </span>\n        )}\n\n        {entry.text ? (\n          <span className=\"text-[12px] font-semibold text-neutral-800 truncate\">{entry.text}</span>\n        ) : (\n          <span className=\"text-[12px] font-medium italic text-neutral-300 truncate\">\n            New keyphrase\n          </span>\n        )}\n      </span>\n    </button>\n  );\n}\n"],"mappings":";AAsBW,cAyBL,YAzBK;AAnBX,SAAS,iBAAiB;AAC1B,SAAS,UAAU;AAgBnB,SAAS,SAAS,EAAE,MAAM,GAAyB;AACjD,MAAI,MAAM,SAAS,aAAa;AAC9B,WAAO,oBAAC,aAAU,MAAK,SAAQ,QAAO,WAAU;AAAA,EAClD;AAEA,MAAI,MAAM,SAAS,SAAS;AAC1B,WAAO,oBAAC,aAAU,OAAO,MAAM,OAAO,MAAK,SAAQ,QAAQ,MAAM,QAAQ;AAAA,EAC3E;AAEA,SAAO,oBAAC,aAAU,MAAK,SAAQ,QAAO,QAAO;AAC/C;AAEO,SAAS,cAAc,EAAE,OAAO,SAAS,UAAU,OAAO,SAAS,GAAuB;AAC/F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,gBAAc;AAAA,MACd,SAAS,MAAM,SAAS,MAAM,EAAE;AAAA,MAChC,WAAW;AAAA,QACT;AAAA,QACA,WACI,8DACA;AAAA,MACN;AAAA,MAEA;AAAA,4BAAC,YAAS,OAAc;AAAA,QAExB,qBAAC,UAAK,WAAU,0CACb;AAAA,qBACC,oBAAC,UAAK,WAAU,2IAA0I,mBAE1J;AAAA,UAGD,MAAM,OACL,oBAAC,UAAK,WAAU,uDAAuD,gBAAM,MAAK,IAElF,oBAAC,UAAK,WAAU,4DAA2D,2BAE3E;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/SeoDrawer/tabs/keyphrase/KeyphraseDetail.d.ts

@@ -0,0 +1,25 @@
+import type { CategoryResult } from "../../../../engine/types/analysis";
+import type { KeyphraseEntry } from "../../keyphraseState";
+export type DetailAnalysis = {
+    kind: "metrics";
+    result: CategoryResult;
+    dim: boolean;
+} | {
+    kind: "analyzing";
+} | {
+    kind: "hint";
+    message: string;
+};
+export interface KeyphraseDetailProps {
+    entry: KeyphraseEntry;
+    isFocus: boolean;
+    duplicate: boolean;
+    analysis: DetailAnalysis;
+    onTextChange: (text: string) => void;
+    onAddSynonym: (syn: string) => void;
+    onRemoveSynonym: (index: number) => void;
+    onSetFocus: () => void;
+    onRemove: () => void;
+}
+export declare function KeyphraseDetail({ entry, isFocus, duplicate, analysis, onTextChange, onAddSynonym, onRemoveSynonym, onSetFocus, onRemove, }: KeyphraseDetailProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=KeyphraseDetail.d.ts.map

package/dist/components/SeoDrawer/tabs/keyphrase/KeyphraseDetail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyphraseDetail.d.ts","sourceRoot":"","sources":["../../../../../src/components/SeoDrawer/tabs/keyphrase/KeyphraseDetail.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AASxE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAI3D,MAAM,MAAM,cAAc,GACtB;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,MAAM,EAAE,cAAc,CAAC;IAAC,GAAG,EAAE,OAAO,CAAA;CAAE,GACzD;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,GACrB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtC,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,cAAc,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,cAAc,CAAC;IACzB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AA0DD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,OAAO,EACP,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,eAAe,EACf,UAAU,EACV,QAAQ,GACT,EAAE,oBAAoB,2CAqDtB"}