@focus-reactive/payload-plugin-seo 1.6.0 → 1.7.0

package/dist/components/SeoButton/SeoButtonInner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SeoButtonInner.d.ts","sourceRoot":"","sources":["../../../src/components/SeoButton/SeoButtonInner.tsx"],"names":[],"mappings":"AAWA,MAAM,WAAW,cAAc;IAC7B,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5D,gBAAgB,EAAE,MAAM,EAAE,CAAC;CAC5B;AAID,wBAAgB,cAAc,CAAC,EAC7B,cAAc,EACd,MAAM,EACN,IAAI,EACJ,gBAAgB,EAChB,kBAAkB,GACnB,EAAE,cAAc,2CAqDhB"}
+{"version":3,"file":"SeoButtonInner.d.ts","sourceRoot":"","sources":["../../../src/components/SeoButton/SeoButtonInner.tsx"],"names":[],"mappings":"AAWA,MAAM,WAAW,cAAc;IAC7B,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5D,gBAAgB,EAAE,MAAM,EAAE,CAAC;CAC5B;AAID,wBAAgB,cAAc,CAAC,EAC7B,cAAc,EACd,MAAM,EACN,IAAI,EACJ,gBAAgB,EAChB,kBAAkB,GACnB,EAAE,cAAc,2CAqFhB"}

package/dist/components/SeoButton/SeoButtonInner.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Button, useModal } from "@payloadcms/ui";
+import { Button, useDocumentInfo, useLocale, useModal } from "@payloadcms/ui";
 import { Gauge } from "lucide-react";
 import { useCallback, useState } from "react";
 import { ScoreBadge } from "./ScoreBadge";
 import { SeoDrawer } from "../SeoDrawer";
-import { isKeyphrasePending } from "../SeoDrawer/keyphrasePending";
 import { useAnalysis } from "../SeoDrawer/useAnalysis";
+import { useKeyphrases } from "../SeoDrawer/useKeyphrases";
 import { useLiveDocument } from "../SeoDrawer/useLiveDocument";
 const DRAWER_SLUG = "seo-analytics-drawer";
 function SeoButtonInner({
@@ -17,25 +17,49 @@ function SeoButtonInner({
   extractContentPath
 }) {
   const { openModal } = useModal();
-  const [keyphrase, setKeyphrase] = useState("");
+  const { id } = useDocumentInfo();
+  const locale = useLocale();
+  const docId = id == null ? "" : String(id);
+  const localeCode = locale?.code ?? "en";
+  const {
+    addRelated,
+    addSynonym,
+    isDuplicate,
+    keyphrases,
+    remove: removeKeyphrase,
+    removeSynonym,
+    setFocus,
+    updateText
+  } = useKeyphrases({ collectionSlug, docId, localeCode });
+  const [selectedId, setSelectedId] = useState(null);
   const { signature, getInput } = useLiveDocument({
     collectionSlug,
     fields,
-    site: { name: site.name, baseUrl: site.baseUrl },
-    keyphrase,
+    site: {
+      name: site.name,
+      baseUrl: site.baseUrl
+    },
+    keyphrases,
     extractContentPath
   });
-  const { result, analyzing, analyzedKeyphrase, analyzeNow } = useAnalysis({
-    getInput,
-    signature,
-    supportedLocales
-  });
-  const keyphrasePending = isKeyphrasePending(keyphrase, analyzedKeyphrase);
+  const { result, analyzing, analyzeNow } = useAnalysis({ getInput, signature, supportedLocales });
   const overall = result?.overall ?? null;
   const open = useCallback(() => {
     analyzeNow();
     openModal(DRAWER_SLUG);
   }, [analyzeNow, openModal]);
+  const handleAddRelated = useCallback(() => {
+    const newId = addRelated();
+    if (newId)
+      setSelectedId(newId);
+  }, [addRelated]);
+  const handleRemove = useCallback(
+    (id2) => {
+      removeKeyphrase(id2);
+      setSelectedId((current) => current === id2 ? null : current);
+    },
+    [removeKeyphrase]
+  );
   return /* @__PURE__ */ jsxs("span", { className: "relative inline-flex", children: [
     /* @__PURE__ */ jsx(
       Button,
@@ -56,13 +80,19 @@ function SeoButtonInner({
     /* @__PURE__ */ jsx(
       SeoDrawer,
       {
-        analyzeNow,
-        analyzing,
         drawerSlug: DRAWER_SLUG,
-        keyphrase,
-        keyphrasePending,
+        keyphrases,
+        selectedId,
+        onSelect: setSelectedId,
         result,
-        setKeyphrase,
+        analyzing,
+        onAddRelated: handleAddRelated,
+        onTextChange: updateText,
+        onAddSynonym: addSynonym,
+        onRemoveSynonym: removeSynonym,
+        onRemove: handleRemove,
+        onSetFocus: setFocus,
+        isDuplicate,
         site
       }
     )

package/dist/components/SeoButton/SeoButtonInner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SeoButton/SeoButtonInner.tsx"],"sourcesContent":["\"use client\";\n\nimport { Button, useModal } from \"@payloadcms/ui\";\nimport { Gauge } from \"lucide-react\";\nimport { useCallback, useState } from \"react\";\nimport { ScoreBadge } from \"./ScoreBadge\";\nimport { SeoDrawer } from \"../SeoDrawer\";\nimport { isKeyphrasePending } from \"../SeoDrawer/keyphrasePending\";\nimport { useAnalysis } from \"../SeoDrawer/useAnalysis\";\nimport { useLiveDocument } from \"../SeoDrawer/useLiveDocument\";\n\nexport interface SeoButtonProps {\n  collectionSlug: string;\n  fields: Record<string, string>;\n  extractContentPath: string;\n  site: { name: string; baseUrl: string; faviconUrl: string };\n  supportedLocales: string[];\n}\n\nconst DRAWER_SLUG = \"seo-analytics-drawer\";\n\nexport function SeoButtonInner({\n  collectionSlug,\n  fields,\n  site,\n  supportedLocales,\n  extractContentPath,\n}: SeoButtonProps) {\n  const { openModal } = useModal();\n  const [keyphrase, setKeyphrase] = useState(\"\");\n\n  const { signature, getInput } = useLiveDocument({\n    collectionSlug,\n    fields,\n    site: { name: site.name, baseUrl: site.baseUrl },\n    keyphrase,\n    extractContentPath,\n  });\n  const { result, analyzing, analyzedKeyphrase, analyzeNow } = useAnalysis({\n    getInput,\n    signature,\n    supportedLocales,\n  });\n\n  const keyphrasePending = isKeyphrasePending(keyphrase, analyzedKeyphrase);\n  const overall = result?.overall ?? null;\n\n  const open = useCallback(() => {\n    analyzeNow();\n    openModal(DRAWER_SLUG);\n  }, [analyzeNow, openModal]);\n\n  return (\n    <span className=\"relative inline-flex\">\n      <Button\n        aria-label=\"SEO Analytics\"\n        buttonStyle=\"none\"\n        className=\"seo-doc-btn m-0 w-[calc(var(--base)*1.6)] h-[calc(var(--base)*1.6)] inline-flex items-center justify-center border border-[var(--theme-elevation-100)] rounded-rs bg-transparent text-neutral-800 transition-[border-color,background-color] duration-100 hover:border-neutral-300 hover:bg-neutral-100\"\n        extraButtonProps={{ title: undefined }}\n        icon={<Gauge />}\n        iconStyle=\"without-border\"\n        margin={false}\n        onClick={open}\n        size=\"small\"\n        tooltip=\"SEO Analytics\"\n      />\n      {overall && <ScoreBadge score={overall.seoScore} status={overall.status} />}\n\n      <SeoDrawer\n        analyzeNow={analyzeNow}\n        analyzing={analyzing}\n        drawerSlug={DRAWER_SLUG}\n        keyphrase={keyphrase}\n        keyphrasePending={keyphrasePending}\n        result={result}\n        setKeyphrase={setKeyphrase}\n        site={site}\n      />\n    </span>\n  );\n}\n"],"mappings":";AAqDI,SAMU,KANV;AAnDJ,SAAS,QAAQ,gBAAgB;AACjC,SAAS,aAAa;AACtB,SAAS,aAAa,gBAAgB;AACtC,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAUhC,MAAM,cAAc;AAEb,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAmB;AACjB,QAAM,EAAE,UAAU,IAAI,SAAS;AAC/B,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,EAAE;AAE7C,QAAM,EAAE,WAAW,SAAS,IAAI,gBAAgB;AAAA,IAC9C;AAAA,IACA;AAAA,IACA,MAAM,EAAE,MAAM,KAAK,MAAM,SAAS,KAAK,QAAQ;AAAA,IAC/C;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,EAAE,QAAQ,WAAW,mBAAmB,WAAW,IAAI,YAAY;AAAA,IACvE;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,mBAAmB,mBAAmB,WAAW,iBAAiB;AACxE,QAAM,UAAU,QAAQ,WAAW;AAEnC,QAAM,OAAO,YAAY,MAAM;AAC7B,eAAW;AACX,cAAU,WAAW;AAAA,EACvB,GAAG,CAAC,YAAY,SAAS,CAAC;AAE1B,SACE,qBAAC,UAAK,WAAU,wBACd;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,cAAW;AAAA,QACX,aAAY;AAAA,QACZ,WAAU;AAAA,QACV,kBAAkB,EAAE,OAAO,OAAU;AAAA,QACrC,MAAM,oBAAC,SAAM;AAAA,QACb,WAAU;AAAA,QACV,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,MAAK;AAAA,QACL,SAAQ;AAAA;AAAA,IACV;AAAA,IACC,WAAW,oBAAC,cAAW,OAAO,QAAQ,UAAU,QAAQ,QAAQ,QAAQ;AAAA,IAEzE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,YAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/SeoButton/SeoButtonInner.tsx"],"sourcesContent":["\"use client\";\n\nimport { Button, useDocumentInfo, useLocale, useModal } from \"@payloadcms/ui\";\nimport { Gauge } from \"lucide-react\";\nimport { useCallback, useState } from \"react\";\nimport { ScoreBadge } from \"./ScoreBadge\";\nimport { SeoDrawer } from \"../SeoDrawer\";\nimport { useAnalysis } from \"../SeoDrawer/useAnalysis\";\nimport { useKeyphrases } from \"../SeoDrawer/useKeyphrases\";\nimport { useLiveDocument } from \"../SeoDrawer/useLiveDocument\";\n\nexport interface SeoButtonProps {\n  collectionSlug: string;\n  fields: Record<string, string>;\n  extractContentPath: string;\n  site: { name: string; baseUrl: string; faviconUrl: string };\n  supportedLocales: string[];\n}\n\nconst DRAWER_SLUG = \"seo-analytics-drawer\";\n\nexport function SeoButtonInner({\n  collectionSlug,\n  fields,\n  site,\n  supportedLocales,\n  extractContentPath,\n}: SeoButtonProps) {\n  const { openModal } = useModal();\n  const { id } = useDocumentInfo();\n  const locale = useLocale();\n\n  const docId = id == null ? \"\" : String(id);\n  const localeCode = locale?.code ?? \"en\";\n\n  const {\n    addRelated,\n    addSynonym,\n    isDuplicate,\n    keyphrases,\n    remove: removeKeyphrase,\n    removeSynonym,\n    setFocus,\n    updateText,\n  } = useKeyphrases({ collectionSlug, docId, localeCode });\n  const [selectedId, setSelectedId] = useState<string | null>(null);\n  const { signature, getInput } = useLiveDocument({\n    collectionSlug,\n    fields,\n    site: {\n      name: site.name,\n      baseUrl: site.baseUrl,\n    },\n    keyphrases,\n    extractContentPath,\n  });\n  const { result, analyzing, analyzeNow } = useAnalysis({ getInput, signature, supportedLocales });\n\n  const overall = result?.overall ?? null;\n\n  const open = useCallback(() => {\n    analyzeNow();\n    openModal(DRAWER_SLUG);\n  }, [analyzeNow, openModal]);\n\n  const handleAddRelated = useCallback(() => {\n    const newId = addRelated();\n    if (newId) setSelectedId(newId);\n  }, [addRelated]);\n\n  const handleRemove = useCallback(\n    (id: string) => {\n      removeKeyphrase(id);\n      setSelectedId((current) => (current === id ? null : current));\n    },\n    [removeKeyphrase]\n  );\n\n  return (\n    <span className=\"relative inline-flex\">\n      <Button\n        aria-label=\"SEO Analytics\"\n        buttonStyle=\"none\"\n        className=\"seo-doc-btn m-0 w-[calc(var(--base)*1.6)] h-[calc(var(--base)*1.6)] inline-flex items-center justify-center border border-[var(--theme-elevation-100)] rounded-rs bg-transparent text-neutral-800 transition-[border-color,background-color] duration-100 hover:border-neutral-300 hover:bg-neutral-100\"\n        extraButtonProps={{ title: undefined }}\n        icon={<Gauge />}\n        iconStyle=\"without-border\"\n        margin={false}\n        onClick={open}\n        size=\"small\"\n        tooltip=\"SEO Analytics\"\n      />\n      {overall && <ScoreBadge score={overall.seoScore} status={overall.status} />}\n\n      <SeoDrawer\n        drawerSlug={DRAWER_SLUG}\n        keyphrases={keyphrases}\n        selectedId={selectedId}\n        onSelect={setSelectedId}\n        result={result}\n        analyzing={analyzing}\n        onAddRelated={handleAddRelated}\n        onTextChange={updateText}\n        onAddSynonym={addSynonym}\n        onRemoveSynonym={removeSynonym}\n        onRemove={handleRemove}\n        onSetFocus={setFocus}\n        isDuplicate={isDuplicate}\n        site={site}\n      />\n    </span>\n  );\n}\n"],"mappings":";AA+EI,SAMU,KANV;AA7EJ,SAAS,QAAQ,iBAAiB,WAAW,gBAAgB;AAC7D,SAAS,aAAa;AACtB,SAAS,aAAa,gBAAgB;AACtC,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAUhC,MAAM,cAAc;AAEb,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAmB;AACjB,QAAM,EAAE,UAAU,IAAI,SAAS;AAC/B,QAAM,EAAE,GAAG,IAAI,gBAAgB;AAC/B,QAAM,SAAS,UAAU;AAEzB,QAAM,QAAQ,MAAM,OAAO,KAAK,OAAO,EAAE;AACzC,QAAM,aAAa,QAAQ,QAAQ;AAEnC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,cAAc,EAAE,gBAAgB,OAAO,WAAW,CAAC;AACvD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAwB,IAAI;AAChE,QAAM,EAAE,WAAW,SAAS,IAAI,gBAAgB;AAAA,IAC9C;AAAA,IACA;AAAA,IACA,MAAM;AAAA,MACJ,MAAM,KAAK;AAAA,MACX,SAAS,KAAK;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,EAAE,QAAQ,WAAW,WAAW,IAAI,YAAY,EAAE,UAAU,WAAW,iBAAiB,CAAC;AAE/F,QAAM,UAAU,QAAQ,WAAW;AAEnC,QAAM,OAAO,YAAY,MAAM;AAC7B,eAAW;AACX,cAAU,WAAW;AAAA,EACvB,GAAG,CAAC,YAAY,SAAS,CAAC;AAE1B,QAAM,mBAAmB,YAAY,MAAM;AACzC,UAAM,QAAQ,WAAW;AACzB,QAAI;AAAO,oBAAc,KAAK;AAAA,EAChC,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,eAAe;AAAA,IACnB,CAACA,QAAe;AACd,sBAAgBA,GAAE;AAClB,oBAAc,CAAC,YAAa,YAAYA,MAAK,OAAO,OAAQ;AAAA,IAC9D;AAAA,IACA,CAAC,eAAe;AAAA,EAClB;AAEA,SACE,qBAAC,UAAK,WAAU,wBACd;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,cAAW;AAAA,QACX,aAAY;AAAA,QACZ,WAAU;AAAA,QACV,kBAAkB,EAAE,OAAO,OAAU;AAAA,QACrC,MAAM,oBAAC,SAAM;AAAA,QACb,WAAU;AAAA,QACV,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,MAAK;AAAA,QACL,SAAQ;AAAA;AAAA,IACV;AAAA,IACC,WAAW,oBAAC,cAAW,OAAO,QAAQ,UAAU,QAAQ,QAAQ,QAAQ;AAAA,IAEzE;AAAA,MAAC;AAAA;AAAA,QACC,YAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA,cAAc;AAAA,QACd,cAAc;AAAA,QACd,cAAc;AAAA,QACd,iBAAiB;AAAA,QACjB,UAAU;AAAA,QACV,YAAY;AAAA,QACZ;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":["id"]}

package/dist/components/SeoDrawer/build-analysis-input.d.ts

@@ -1,4 +1,4 @@
-import type { AnalysisInput } from "../../engine/types/analysis";
+import type { AnalysisInput, KeyphraseInput } from "../../engine/types/analysis";
 import type { ContentExtractor, SeoFieldPaths } from "../../types/config";
 export interface BuildAnalysisInputArgs {
     values: Record<string, unknown>;
@@ -7,7 +7,7 @@ export interface BuildAnalysisInputArgs {
     } | null | undefined;
     payloadLocale: string | undefined;
     apiRoute?: string;
-    keyphrase: string;
+    keyphrases: KeyphraseInput[];
     fields: SeoFieldPaths;
     site: {
         name: string;

package/dist/components/SeoDrawer/build-analysis-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"build-analysis-input.d.ts","sourceRoot":"","sources":["../../../src/components/SeoDrawer/build-analysis-input.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,KAAK,EACV,gBAAgB,EAIhB,aAAa,EACd,MAAM,oBAAoB,CAAC;AAK5B,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,MAAM,EAAE,MAAM,GAAG;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,GAAG,SAAS,CAAC;IACtD,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,aAAa,CAAC;IACtB,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAC9B;AAED,wBAAsB,kBAAkB,CAAC,IAAI,EAAE,sBAAsB,GAAG,OAAO,CAAC,aAAa,CAAC,CAY7F"}
+{"version":3,"file":"build-analysis-input.d.ts","sourceRoot":"","sources":["../../../src/components/SeoDrawer/build-analysis-input.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,KAAK,EACV,gBAAgB,EAIhB,aAAa,EACd,MAAM,oBAAoB,CAAC;AAK5B,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,MAAM,EAAE,MAAM,GAAG;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,GAAG,SAAS,CAAC;IACtD,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,cAAc,EAAE,CAAC;IAC7B,MAAM,EAAE,aAAa,CAAC;IACtB,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAC9B;AAED,wBAAsB,kBAAkB,CAAC,IAAI,EAAE,sBAAsB,GAAG,OAAO,CAAC,aAAa,CAAC,CAY7F"}

package/dist/components/SeoDrawer/build-analysis-input.js

@@ -19,7 +19,7 @@ async function buildAnalysisInput(args) {
     values: args.values,
     contentHtml,
     locale: args.locale,
-    keyphrase: args.keyphrase,
+    keyphrases: args.keyphrases,
     fields: args.fields,
     site: args.site
   });

package/dist/components/SeoDrawer/build-analysis-input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SeoDrawer/build-analysis-input.ts"],"sourcesContent":["import type { ContentNode } from \"../../content/schema/nodes\";\nimport { serialize } from \"../../content/schema/serialize\";\nimport {\n  compact,\n  heading,\n  html,\n  image,\n  link,\n  paragraph,\n  richText,\n  video,\n} from \"../../content/schema/helpers\";\nimport { createResolveDocs } from \"../../content/resolve/resolve-docs\";\nimport type { AnalysisInput } from \"../../engine/types/analysis\";\nimport type {\n  ContentExtractor,\n  ContentHelpers,\n  ExtractContext,\n  ExtractToolkit,\n  SeoFieldPaths,\n} from \"../../types/config\";\nimport { buildInput } from \"./buildInput\";\n\nconst helpers: ContentHelpers = { heading, paragraph, link, image, video, html, richText, compact };\n\nexport interface BuildAnalysisInputArgs {\n  values: Record<string, unknown>;\n  locale: string | { code?: string } | null | undefined;\n  payloadLocale: string | undefined;\n  apiRoute?: string;\n  keyphrase: string;\n  fields: SeoFieldPaths;\n  site: { name: string; baseUrl: string };\n  extractor?: ContentExtractor;\n}\n\nexport async function buildAnalysisInput(args: BuildAnalysisInputArgs): Promise<AnalysisInput> {\n  const ir = await extractIntermediateRepresentation(args);\n  const contentHtml = serialize(ir);\n\n  return buildInput({\n    values: args.values,\n    contentHtml,\n    locale: args.locale,\n    keyphrase: args.keyphrase,\n    fields: args.fields,\n    site: args.site,\n  });\n}\n\nasync function extractIntermediateRepresentation(\n  args: BuildAnalysisInputArgs\n): Promise<ContentNode[]> {\n  if (!args.extractor) return [];\n\n  const ctx: ExtractContext = {\n    locale: args.payloadLocale,\n    apiRoute: args.apiRoute,\n  };\n\n  const toolkit: ExtractToolkit = {\n    resolveDocs: createResolveDocs(args.apiRoute, args.payloadLocale),\n    helpers,\n  };\n\n  return await args.extractor(args.values, ctx, toolkit);\n}\n"],"mappings":"AACA,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,yBAAyB;AASlC,SAAS,kBAAkB;AAE3B,MAAM,UAA0B,EAAE,SAAS,WAAW,MAAM,OAAO,OAAO,MAAM,UAAU,QAAQ;AAalG,eAAsB,mBAAmB,MAAsD;AAC7F,QAAM,KAAK,MAAM,kCAAkC,IAAI;AACvD,QAAM,cAAc,UAAU,EAAE;AAEhC,SAAO,WAAW;AAAA,IAChB,QAAQ,KAAK;AAAA,IACb;AAAA,IACA,QAAQ,KAAK;AAAA,IACb,WAAW,KAAK;AAAA,IAChB,QAAQ,KAAK;AAAA,IACb,MAAM,KAAK;AAAA,EACb,CAAC;AACH;AAEA,eAAe,kCACb,MACwB;AACxB,MAAI,CAAC,KAAK;AAAW,WAAO,CAAC;AAE7B,QAAM,MAAsB;AAAA,IAC1B,QAAQ,KAAK;AAAA,IACb,UAAU,KAAK;AAAA,EACjB;AAEA,QAAM,UAA0B;AAAA,IAC9B,aAAa,kBAAkB,KAAK,UAAU,KAAK,aAAa;AAAA,IAChE;AAAA,EACF;AAEA,SAAO,MAAM,KAAK,UAAU,KAAK,QAAQ,KAAK,OAAO;AACvD;","names":[]}
+{"version":3,"sources":["../../../src/components/SeoDrawer/build-analysis-input.ts"],"sourcesContent":["import type { ContentNode } from \"../../content/schema/nodes\";\nimport { serialize } from \"../../content/schema/serialize\";\nimport {\n  compact,\n  heading,\n  html,\n  image,\n  link,\n  paragraph,\n  richText,\n  video,\n} from \"../../content/schema/helpers\";\nimport { createResolveDocs } from \"../../content/resolve/resolve-docs\";\nimport type { AnalysisInput, KeyphraseInput } from \"../../engine/types/analysis\";\nimport type {\n  ContentExtractor,\n  ContentHelpers,\n  ExtractContext,\n  ExtractToolkit,\n  SeoFieldPaths,\n} from \"../../types/config\";\nimport { buildInput } from \"./buildInput\";\n\nconst helpers: ContentHelpers = { heading, paragraph, link, image, video, html, richText, compact };\n\nexport interface BuildAnalysisInputArgs {\n  values: Record<string, unknown>;\n  locale: string | { code?: string } | null | undefined;\n  payloadLocale: string | undefined;\n  apiRoute?: string;\n  keyphrases: KeyphraseInput[];\n  fields: SeoFieldPaths;\n  site: { name: string; baseUrl: string };\n  extractor?: ContentExtractor;\n}\n\nexport async function buildAnalysisInput(args: BuildAnalysisInputArgs): Promise<AnalysisInput> {\n  const ir = await extractIntermediateRepresentation(args);\n  const contentHtml = serialize(ir);\n\n  return buildInput({\n    values: args.values,\n    contentHtml,\n    locale: args.locale,\n    keyphrases: args.keyphrases,\n    fields: args.fields,\n    site: args.site,\n  });\n}\n\nasync function extractIntermediateRepresentation(\n  args: BuildAnalysisInputArgs\n): Promise<ContentNode[]> {\n  if (!args.extractor) return [];\n\n  const ctx: ExtractContext = {\n    locale: args.payloadLocale,\n    apiRoute: args.apiRoute,\n  };\n\n  const toolkit: ExtractToolkit = {\n    resolveDocs: createResolveDocs(args.apiRoute, args.payloadLocale),\n    helpers,\n  };\n\n  return await args.extractor(args.values, ctx, toolkit);\n}\n"],"mappings":"AACA,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,yBAAyB;AASlC,SAAS,kBAAkB;AAE3B,MAAM,UAA0B,EAAE,SAAS,WAAW,MAAM,OAAO,OAAO,MAAM,UAAU,QAAQ;AAalG,eAAsB,mBAAmB,MAAsD;AAC7F,QAAM,KAAK,MAAM,kCAAkC,IAAI;AACvD,QAAM,cAAc,UAAU,EAAE;AAEhC,SAAO,WAAW;AAAA,IAChB,QAAQ,KAAK;AAAA,IACb;AAAA,IACA,QAAQ,KAAK;AAAA,IACb,YAAY,KAAK;AAAA,IACjB,QAAQ,KAAK;AAAA,IACb,MAAM,KAAK;AAAA,EACb,CAAC;AACH;AAEA,eAAe,kCACb,MACwB;AACxB,MAAI,CAAC,KAAK;AAAW,WAAO,CAAC;AAE7B,QAAM,MAAsB;AAAA,IAC1B,QAAQ,KAAK;AAAA,IACb,UAAU,KAAK;AAAA,EACjB;AAEA,QAAM,UAA0B;AAAA,IAC9B,aAAa,kBAAkB,KAAK,UAAU,KAAK,aAAa;AAAA,IAChE;AAAA,EACF;AAEA,SAAO,MAAM,KAAK,UAAU,KAAK,QAAQ,KAAK,OAAO;AACvD;","names":[]}

package/dist/components/SeoDrawer/buildInput.d.ts

@@ -1,4 +1,4 @@
-import type { AnalysisInput } from "../../engine/types/analysis";
+import type { AnalysisInput, KeyphraseInput } from "../../engine/types/analysis";
 import type { SeoFieldPaths } from "../../types/config";
 export interface BuildInputArgs {
     values: Record<string, unknown>;
@@ -6,12 +6,12 @@ export interface BuildInputArgs {
     locale: string | {
         code?: string;
     } | null | undefined;
-    keyphrase: string;
+    keyphrases: KeyphraseInput[];
     fields: SeoFieldPaths;
     site: {
         name: string;
         baseUrl: string;
     };
 }
-export declare function buildInput({ values, contentHtml, locale, keyphrase, fields, site, }: BuildInputArgs): AnalysisInput;
+export declare function buildInput({ values, contentHtml, locale, keyphrases, fields, site, }: BuildInputArgs): AnalysisInput;
 //# sourceMappingURL=buildInput.d.ts.map

package/dist/components/SeoDrawer/buildInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buildInput.d.ts","sourceRoot":"","sources":["../../../src/components/SeoDrawer/buildInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AA2BxD,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,GAAG;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,GAAG,SAAS,CAAC;IACtD,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,aAAa,CAAC;IACtB,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;CACzC;AAED,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,WAAW,EACX,MAAM,EACN,SAAS,EACT,MAAM,EACN,IAAI,GACL,EAAE,cAAc,GAAG,aAAa,CAkBhC"}
+{"version":3,"file":"buildInput.d.ts","sourceRoot":"","sources":["../../../src/components/SeoDrawer/buildInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AA2BxD,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,GAAG;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,GAAG,SAAS,CAAC;IACtD,UAAU,EAAE,cAAc,EAAE,CAAC;IAC7B,MAAM,EAAE,aAAa,CAAC;IACtB,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;CACzC;AAED,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,WAAW,EACX,MAAM,EACN,UAAU,EACV,MAAM,EACN,IAAI,GACL,EAAE,cAAc,GAAG,aAAa,CAmBhC"}

package/dist/components/SeoDrawer/buildInput.js

@@ -15,7 +15,7 @@ function buildInput({
   values,
   contentHtml,
   locale,
-  keyphrase,
+  keyphrases,
   fields,
   site
 }) {
@@ -25,7 +25,8 @@ function buildInput({
     slug: valueAt(values, fields.slug ?? "slug"),
     description: valueAt(values, fields.metaDescription),
     contentHtml,
-    keyphrase,
+    keyphrase: keyphrases[0]?.text ?? "",
+    keyphrases,
     locale: normalizeLocale(locale),
     site,
     has: {

package/dist/components/SeoDrawer/buildInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SeoDrawer/buildInput.ts"],"sourcesContent":["import type { AnalysisInput } from \"../../engine/types/analysis\";\nimport type { SeoFieldPaths } from \"../../types/config\";\n\nfunction valueAt(values: Record<string, unknown>, path?: string): string {\n  if (!path) return \"\";\n\n  const v = path\n    .split(\".\")\n    .reduce<unknown>(\n      (acc, k) =>\n        acc && typeof acc === \"object\" ? (acc as Record<string, unknown>)[k] : undefined,\n      values\n    );\n\n  return typeof v === \"string\" ? v : \"\";\n}\n\nfunction normalizeLocale(locale: string | { code?: string } | null | undefined): string {\n  const code =\n    (typeof locale === \"object\" && locale\n      ? locale.code\n      : locale != null\n        ? String(locale)\n        : undefined) ?? \"en\";\n\n  return code.includes(\"_\") ? code : `${code}_${code.toUpperCase()}`;\n}\n\nexport interface BuildInputArgs {\n  values: Record<string, unknown>;\n  contentHtml: string;\n  locale: string | { code?: string } | null | undefined;\n  keyphrase: string;\n  fields: SeoFieldPaths;\n  site: { name: string; baseUrl: string };\n}\n\nexport function buildInput({\n  values,\n  contentHtml,\n  locale,\n  keyphrase,\n  fields,\n  site,\n}: BuildInputArgs): AnalysisInput {\n  const title = valueAt(values, fields.seoTitle) || valueAt(values, \"title\");\n\n  return {\n    title,\n    slug: valueAt(values, fields.slug ?? \"slug\"),\n    description: valueAt(values, fields.metaDescription),\n    contentHtml,\n    keyphrase,\n    locale: normalizeLocale(locale),\n    site,\n    has: {\n      seoTitle: Boolean(fields.seoTitle && valueAt(values, fields.seoTitle)),\n      metaDescription: Boolean(fields.metaDescription),\n      slug: Boolean(fields.slug ?? \"slug\"),\n      content: contentHtml.trim().length > 0,\n    },\n  };\n}\n"],"mappings":"AAGA,SAAS,QAAQ,QAAiC,MAAuB;AACvE,MAAI,CAAC;AAAM,WAAO;AAElB,QAAM,IAAI,KACP,MAAM,GAAG,EACT;AAAA,IACC,CAAC,KAAK,MACJ,OAAO,OAAO,QAAQ,WAAY,IAAgC,CAAC,IAAI;AAAA,IACzE;AAAA,EACF;AAEF,SAAO,OAAO,MAAM,WAAW,IAAI;AACrC;AAEA,SAAS,gBAAgB,QAA+D;AACtF,QAAM,QACH,OAAO,WAAW,YAAY,SAC3B,OAAO,OACP,UAAU,OACR,OAAO,MAAM,IACb,WAAc;AAEtB,SAAO,KAAK,SAAS,GAAG,IAAI,OAAO,GAAG,IAAI,IAAI,KAAK,YAAY,CAAC;AAClE;AAWO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAkC;AAChC,QAAM,QAAQ,QAAQ,QAAQ,OAAO,QAAQ,KAAK,QAAQ,QAAQ,OAAO;AAEzE,SAAO;AAAA,IACL;AAAA,IACA,MAAM,QAAQ,QAAQ,OAAO,QAAQ,MAAM;AAAA,IAC3C,aAAa,QAAQ,QAAQ,OAAO,eAAe;AAAA,IACnD;AAAA,IACA;AAAA,IACA,QAAQ,gBAAgB,MAAM;AAAA,IAC9B;AAAA,IACA,KAAK;AAAA,MACH,UAAU,QAAQ,OAAO,YAAY,QAAQ,QAAQ,OAAO,QAAQ,CAAC;AAAA,MACrE,iBAAiB,QAAQ,OAAO,eAAe;AAAA,MAC/C,MAAM,QAAQ,OAAO,QAAQ,MAAM;AAAA,MACnC,SAAS,YAAY,KAAK,EAAE,SAAS;AAAA,IACvC;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../../src/components/SeoDrawer/buildInput.ts"],"sourcesContent":["import type { AnalysisInput, KeyphraseInput } from \"../../engine/types/analysis\";\nimport type { SeoFieldPaths } from \"../../types/config\";\n\nfunction valueAt(values: Record<string, unknown>, path?: string): string {\n  if (!path) return \"\";\n\n  const v = path\n    .split(\".\")\n    .reduce<unknown>(\n      (acc, k) =>\n        acc && typeof acc === \"object\" ? (acc as Record<string, unknown>)[k] : undefined,\n      values\n    );\n\n  return typeof v === \"string\" ? v : \"\";\n}\n\nfunction normalizeLocale(locale: string | { code?: string } | null | undefined): string {\n  const code =\n    (typeof locale === \"object\" && locale\n      ? locale.code\n      : locale != null\n        ? String(locale)\n        : undefined) ?? \"en\";\n\n  return code.includes(\"_\") ? code : `${code}_${code.toUpperCase()}`;\n}\n\nexport interface BuildInputArgs {\n  values: Record<string, unknown>;\n  contentHtml: string;\n  locale: string | { code?: string } | null | undefined;\n  keyphrases: KeyphraseInput[];\n  fields: SeoFieldPaths;\n  site: { name: string; baseUrl: string };\n}\n\nexport function buildInput({\n  values,\n  contentHtml,\n  locale,\n  keyphrases,\n  fields,\n  site,\n}: BuildInputArgs): AnalysisInput {\n  const title = valueAt(values, fields.seoTitle) || valueAt(values, \"title\");\n\n  return {\n    title,\n    slug: valueAt(values, fields.slug ?? \"slug\"),\n    description: valueAt(values, fields.metaDescription),\n    contentHtml,\n    keyphrase: keyphrases[0]?.text ?? \"\",\n    keyphrases,\n    locale: normalizeLocale(locale),\n    site,\n    has: {\n      seoTitle: Boolean(fields.seoTitle && valueAt(values, fields.seoTitle)),\n      metaDescription: Boolean(fields.metaDescription),\n      slug: Boolean(fields.slug ?? \"slug\"),\n      content: contentHtml.trim().length > 0,\n    },\n  };\n}\n"],"mappings":"AAGA,SAAS,QAAQ,QAAiC,MAAuB;AACvE,MAAI,CAAC;AAAM,WAAO;AAElB,QAAM,IAAI,KACP,MAAM,GAAG,EACT;AAAA,IACC,CAAC,KAAK,MACJ,OAAO,OAAO,QAAQ,WAAY,IAAgC,CAAC,IAAI;AAAA,IACzE;AAAA,EACF;AAEF,SAAO,OAAO,MAAM,WAAW,IAAI;AACrC;AAEA,SAAS,gBAAgB,QAA+D;AACtF,QAAM,QACH,OAAO,WAAW,YAAY,SAC3B,OAAO,OACP,UAAU,OACR,OAAO,MAAM,IACb,WAAc;AAEtB,SAAO,KAAK,SAAS,GAAG,IAAI,OAAO,GAAG,IAAI,IAAI,KAAK,YAAY,CAAC;AAClE;AAWO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAkC;AAChC,QAAM,QAAQ,QAAQ,QAAQ,OAAO,QAAQ,KAAK,QAAQ,QAAQ,OAAO;AAEzE,SAAO;AAAA,IACL;AAAA,IACA,MAAM,QAAQ,QAAQ,OAAO,QAAQ,MAAM;AAAA,IAC3C,aAAa,QAAQ,QAAQ,OAAO,eAAe;AAAA,IACnD;AAAA,IACA,WAAW,WAAW,CAAC,GAAG,QAAQ;AAAA,IAClC;AAAA,IACA,QAAQ,gBAAgB,MAAM;AAAA,IAC9B;AAAA,IACA,KAAK;AAAA,MACH,UAAU,QAAQ,OAAO,YAAY,QAAQ,QAAQ,OAAO,QAAQ,CAAC;AAAA,MACrE,iBAAiB,QAAQ,OAAO,eAAe;AAAA,MAC/C,MAAM,QAAQ,OAAO,QAAQ,MAAM;AAAA,MACnC,SAAS,YAAY,KAAK,EAAE,SAAS;AAAA,IACvC;AAAA,EACF;AACF;","names":[]}

package/dist/components/SeoDrawer/components/SerpPreview/highlight-keyphrase.d.ts

@@ -1,3 +1,3 @@
 import type { ReactNode } from "react";
-export declare function highlightKeyphrase(text: string, keyphrase: string): ReactNode[];
+export declare function highlightKeyphrase(text: string, keyphrase: string, synonyms?: string[]): ReactNode[];
 //# sourceMappingURL=highlight-keyphrase.d.ts.map

package/dist/components/SeoDrawer/components/SerpPreview/highlight-keyphrase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"highlight-keyphrase.d.ts","sourceRoot":"","sources":["../../../../../src/components/SeoDrawer/components/SerpPreview/highlight-keyphrase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,SAAS,EAAE,CAQ/E"}
+{"version":3,"file":"highlight-keyphrase.d.ts","sourceRoot":"","sources":["../../../../../src/components/SeoDrawer/components/SerpPreview/highlight-keyphrase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAkBvC,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE,MAAM,EACjB,QAAQ,GAAE,MAAM,EAAO,GACtB,SAAS,EAAE,CASb"}

package/dist/components/SeoDrawer/components/SerpPreview/highlight-keyphrase.js

@@ -2,10 +2,17 @@ import { jsx } from "react/jsx-runtime";
 function escapeRegex(value) {
   return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
-function highlightKeyphrase(text, keyphrase) {
-  if (!keyphrase.trim())
+function buildHighlightPattern(keyphrase, synonyms) {
+  const terms = [keyphrase, ...synonyms].map((term) => term.trim()).filter((term) => term.length > 0).sort((a, b) => b.length - a.length).map(escapeRegex);
+  if (terms.length === 0)
+    return null;
+  return terms.join("|");
+}
+function highlightKeyphrase(text, keyphrase, synonyms = []) {
+  const pattern = buildHighlightPattern(keyphrase, synonyms);
+  if (!pattern)
     return [text];
-  const segments = text.split(new RegExp(`(${escapeRegex(keyphrase)})`, "gi"));
+  const segments = text.split(new RegExp(`(${pattern})`, "gi"));
   return segments.map(
     (segment, index) => index % 2 === 1 ? /* @__PURE__ */ jsx("strong", { children: segment }, index) : segment
   );

package/dist/components/SeoDrawer/components/SerpPreview/highlight-keyphrase.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/SeoDrawer/components/SerpPreview/highlight-keyphrase.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nfunction escapeRegex(value: string): string {\n  return value.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\");\n}\n\nexport function highlightKeyphrase(text: string, keyphrase: string): ReactNode[] {\n  if (!keyphrase.trim()) return [text];\n\n  const segments = text.split(new RegExp(`(${escapeRegex(keyphrase)})`, \"gi\"));\n\n  return segments.map((segment, index) =>\n    index % 2 === 1 ? <strong key={index}>{segment}</strong> : segment\n  );\n}\n"],"mappings":"AAYsB;AAVtB,SAAS,YAAY,OAAuB;AAC1C,SAAO,MAAM,QAAQ,uBAAuB,MAAM;AACpD;AAEO,SAAS,mBAAmB,MAAc,WAAgC;AAC/E,MAAI,CAAC,UAAU,KAAK;AAAG,WAAO,CAAC,IAAI;AAEnC,QAAM,WAAW,KAAK,MAAM,IAAI,OAAO,IAAI,YAAY,SAAS,CAAC,KAAK,IAAI,CAAC;AAE3E,SAAO,SAAS;AAAA,IAAI,CAAC,SAAS,UAC5B,QAAQ,MAAM,IAAI,oBAAC,YAAoB,qBAAR,KAAgB,IAAY;AAAA,EAC7D;AACF;","names":[]}
+{"version":3,"sources":["../../../../../src/components/SeoDrawer/components/SerpPreview/highlight-keyphrase.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nfunction escapeRegex(value: string): string {\n  return value.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\");\n}\n\nfunction buildHighlightPattern(keyphrase: string, synonyms: string[]): string | null {\n  const terms = [keyphrase, ...synonyms]\n    .map((term) => term.trim())\n    .filter((term) => term.length > 0)\n    .sort((a, b) => b.length - a.length)\n    .map(escapeRegex);\n\n  if (terms.length === 0) return null;\n\n  return terms.join(\"|\");\n}\n\nexport function highlightKeyphrase(\n  text: string,\n  keyphrase: string,\n  synonyms: string[] = []\n): ReactNode[] {\n  const pattern = buildHighlightPattern(keyphrase, synonyms);\n  if (!pattern) return [text];\n\n  const segments = text.split(new RegExp(`(${pattern})`, \"gi\"));\n\n  return segments.map((segment, index) =>\n    index % 2 === 1 ? <strong key={index}>{segment}</strong> : segment\n  );\n}\n"],"mappings":"AA6BsB;AA3BtB,SAAS,YAAY,OAAuB;AAC1C,SAAO,MAAM,QAAQ,uBAAuB,MAAM;AACpD;AAEA,SAAS,sBAAsB,WAAmB,UAAmC;AACnF,QAAM,QAAQ,CAAC,WAAW,GAAG,QAAQ,EAClC,IAAI,CAAC,SAAS,KAAK,KAAK,CAAC,EACzB,OAAO,CAAC,SAAS,KAAK,SAAS,CAAC,EAChC,KAAK,CAAC,GAAG,MAAM,EAAE,SAAS,EAAE,MAAM,EAClC,IAAI,WAAW;AAElB,MAAI,MAAM,WAAW;AAAG,WAAO;AAE/B,SAAO,MAAM,KAAK,GAAG;AACvB;AAEO,SAAS,mBACd,MACA,WACA,WAAqB,CAAC,GACT;AACb,QAAM,UAAU,sBAAsB,WAAW,QAAQ;AACzD,MAAI,CAAC;AAAS,WAAO,CAAC,IAAI;AAE1B,QAAM,WAAW,KAAK,MAAM,IAAI,OAAO,IAAI,OAAO,KAAK,IAAI,CAAC;AAE5D,SAAO,SAAS;AAAA,IAAI,CAAC,SAAS,UAC5B,QAAQ,MAAM,IAAI,oBAAC,YAAoB,qBAAR,KAAgB,IAAY;AAAA,EAC7D;AACF;","names":[]}

package/dist/components/SeoDrawer/components/SerpPreview/index.d.ts

@@ -4,9 +4,10 @@ export type SerpMode = "mobile" | "desktop";
 interface SerpPreviewProps {
     data: SerpResult;
     keyphrase: string;
+    synonyms?: string[];
     faviconUrl: string;
     mode: SerpMode;
 }
-export declare function SerpPreview({ data, keyphrase, faviconUrl, mode }: SerpPreviewProps): ReactElement;
+export declare function SerpPreview({ data, keyphrase, synonyms, faviconUrl, mode, }: SerpPreviewProps): ReactElement;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/SeoDrawer/components/SerpPreview/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/SeoDrawer/components/SerpPreview/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAapE,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE5C,UAAU,gBAAgB;IACxB,IAAI,EAAE,UAAU,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,IAAI,EAAE,EAAE,gBAAgB,GAAG,YAAY,CAqBjG"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/SeoDrawer/components/SerpPreview/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAapE,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE5C,UAAU,gBAAgB;IACxB,IAAI,EAAE,UAAU,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,SAAS,EACT,QAAa,EACb,UAAU,EACV,IAAI,GACL,EAAE,gBAAgB,GAAG,YAAY,CAqBjC"}

package/dist/components/SeoDrawer/components/SerpPreview/index.js

@@ -10,7 +10,13 @@ import {
   serpUrlRow
 } from "./variants";
 import { truncateDescription } from "./truncate-description";
-function SerpPreview({ data, keyphrase, faviconUrl, mode }) {
+function SerpPreview({
+  data,
+  keyphrase,
+  synonyms = [],
+  faviconUrl,
+  mode
+}) {
   const result = /* @__PURE__ */ jsxs("div", { className: serpContainer({ mode }), children: [
     /* @__PURE__ */ jsxs("div", { className: serpUrlRow({ mode }), children: [
       /* @__PURE__ */ jsx(SerpFavicon, { faviconUrl, siteName: data.siteName }),
@@ -20,7 +26,7 @@ function SerpPreview({ data, keyphrase, faviconUrl, mode }) {
       ] })
     ] }),
     /* @__PURE__ */ jsx("div", { className: serpTitle({ mode }), children: data.title }),
-    /* @__PURE__ */ jsx("div", { className: serpDescription({ mode }), children: highlightKeyphrase(truncateDescription(data.description), keyphrase) })
+    /* @__PURE__ */ jsx("div", { className: serpDescription({ mode }), children: highlightKeyphrase(truncateDescription(data.description), keyphrase, synonyms) })
   ] });
   return mode === "desktop" ? /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: result }) : result;
 }

package/dist/components/SeoDrawer/components/SerpPreview/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/SeoDrawer/components/SerpPreview/index.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport type { SerpResult } from \"../../../../engine/types/analysis\";\nimport { highlightKeyphrase } from \"./highlight-keyphrase\";\nimport { SerpFavicon } from \"./serp-favicon\";\nimport {\n  serpContainer,\n  serpDescription,\n  serpHostname,\n  serpSiteName,\n  serpTitle,\n  serpUrlRow,\n} from \"./variants\";\nimport { truncateDescription } from \"./truncate-description\";\n\nexport type SerpMode = \"mobile\" | \"desktop\";\n\ninterface SerpPreviewProps {\n  data: SerpResult;\n  keyphrase: string;\n  faviconUrl: string;\n  mode: SerpMode;\n}\n\nexport function SerpPreview({ data, keyphrase, faviconUrl, mode }: SerpPreviewProps): ReactElement {\n  const result = (\n    <div className={serpContainer({ mode })}>\n      <div className={serpUrlRow({ mode })}>\n        <SerpFavicon faviconUrl={faviconUrl} siteName={data.siteName} />\n\n        <div className=\"overflow-hidden\">\n          <div className={serpSiteName({ mode })}>{data.siteName}</div>\n          <div className={serpHostname({ mode })}>{data.url}</div>\n        </div>\n      </div>\n\n      <div className={serpTitle({ mode })}>{data.title}</div>\n\n      <div className={serpDescription({ mode })}>\n        {highlightKeyphrase(truncateDescription(data.description), keyphrase)}\n      </div>\n    </div>\n  );\n\n  return mode === \"desktop\" ? <div className=\"overflow-x-auto\">{result}</div> : result;\n}\n"],"mappings":"AA2BQ,cAEA,YAFA;AAzBR,SAAS,0BAA0B;AACnC,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,2BAA2B;AAW7B,SAAS,YAAY,EAAE,MAAM,WAAW,YAAY,KAAK,GAAmC;AACjG,QAAM,SACJ,qBAAC,SAAI,WAAW,cAAc,EAAE,KAAK,CAAC,GACpC;AAAA,yBAAC,SAAI,WAAW,WAAW,EAAE,KAAK,CAAC,GACjC;AAAA,0BAAC,eAAY,YAAwB,UAAU,KAAK,UAAU;AAAA,MAE9D,qBAAC,SAAI,WAAU,mBACb;AAAA,4BAAC,SAAI,WAAW,aAAa,EAAE,KAAK,CAAC,GAAI,eAAK,UAAS;AAAA,QACvD,oBAAC,SAAI,WAAW,aAAa,EAAE,KAAK,CAAC,GAAI,eAAK,KAAI;AAAA,SACpD;AAAA,OACF;AAAA,IAEA,oBAAC,SAAI,WAAW,UAAU,EAAE,KAAK,CAAC,GAAI,eAAK,OAAM;AAAA,IAEjD,oBAAC,SAAI,WAAW,gBAAgB,EAAE,KAAK,CAAC,GACrC,6BAAmB,oBAAoB,KAAK,WAAW,GAAG,SAAS,GACtE;AAAA,KACF;AAGF,SAAO,SAAS,YAAY,oBAAC,SAAI,WAAU,mBAAmB,kBAAO,IAAS;AAChF;","names":[]}
+{"version":3,"sources":["../../../../../src/components/SeoDrawer/components/SerpPreview/index.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport type { SerpResult } from \"../../../../engine/types/analysis\";\nimport { highlightKeyphrase } from \"./highlight-keyphrase\";\nimport { SerpFavicon } from \"./serp-favicon\";\nimport {\n  serpContainer,\n  serpDescription,\n  serpHostname,\n  serpSiteName,\n  serpTitle,\n  serpUrlRow,\n} from \"./variants\";\nimport { truncateDescription } from \"./truncate-description\";\n\nexport type SerpMode = \"mobile\" | \"desktop\";\n\ninterface SerpPreviewProps {\n  data: SerpResult;\n  keyphrase: string;\n  synonyms?: string[];\n  faviconUrl: string;\n  mode: SerpMode;\n}\n\nexport function SerpPreview({\n  data,\n  keyphrase,\n  synonyms = [],\n  faviconUrl,\n  mode,\n}: SerpPreviewProps): ReactElement {\n  const result = (\n    <div className={serpContainer({ mode })}>\n      <div className={serpUrlRow({ mode })}>\n        <SerpFavicon faviconUrl={faviconUrl} siteName={data.siteName} />\n\n        <div className=\"overflow-hidden\">\n          <div className={serpSiteName({ mode })}>{data.siteName}</div>\n          <div className={serpHostname({ mode })}>{data.url}</div>\n        </div>\n      </div>\n\n      <div className={serpTitle({ mode })}>{data.title}</div>\n\n      <div className={serpDescription({ mode })}>\n        {highlightKeyphrase(truncateDescription(data.description), keyphrase, synonyms)}\n      </div>\n    </div>\n  );\n\n  return mode === \"desktop\" ? <div className=\"overflow-x-auto\">{result}</div> : result;\n}\n"],"mappings":"AAkCQ,cAEA,YAFA;AAhCR,SAAS,0BAA0B;AACnC,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,2BAA2B;AAY7B,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,WAAW,CAAC;AAAA,EACZ;AAAA,EACA;AACF,GAAmC;AACjC,QAAM,SACJ,qBAAC,SAAI,WAAW,cAAc,EAAE,KAAK,CAAC,GACpC;AAAA,yBAAC,SAAI,WAAW,WAAW,EAAE,KAAK,CAAC,GACjC;AAAA,0BAAC,eAAY,YAAwB,UAAU,KAAK,UAAU;AAAA,MAE9D,qBAAC,SAAI,WAAU,mBACb;AAAA,4BAAC,SAAI,WAAW,aAAa,EAAE,KAAK,CAAC,GAAI,eAAK,UAAS;AAAA,QACvD,oBAAC,SAAI,WAAW,aAAa,EAAE,KAAK,CAAC,GAAI,eAAK,KAAI;AAAA,SACpD;AAAA,OACF;AAAA,IAEA,oBAAC,SAAI,WAAW,UAAU,EAAE,KAAK,CAAC,GAAI,eAAK,OAAM;AAAA,IAEjD,oBAAC,SAAI,WAAW,gBAAgB,EAAE,KAAK,CAAC,GACrC,6BAAmB,oBAAoB,KAAK,WAAW,GAAG,WAAW,QAAQ,GAChF;AAAA,KACF;AAGF,SAAO,SAAS,YAAY,oBAAC,SAAI,WAAU,mBAAmB,kBAAO,IAAS;AAChF;","names":[]}

package/dist/components/SeoDrawer/components/SerpPreview/variants.d.ts

@@ -1,19 +1,19 @@
 export declare const serpContainer: (props?: ({
-    mode?: "desktop" | "mobile" | null | undefined;
+    mode?: "mobile" | "desktop" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const serpUrlRow: (props?: ({
-    mode?: "desktop" | "mobile" | null | undefined;
+    mode?: "mobile" | "desktop" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const serpSiteName: (props?: ({
-    mode?: "desktop" | "mobile" | null | undefined;
+    mode?: "mobile" | "desktop" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const serpHostname: (props?: ({
-    mode?: "desktop" | "mobile" | null | undefined;
+    mode?: "mobile" | "desktop" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const serpTitle: (props?: ({
-    mode?: "desktop" | "mobile" | null | undefined;
+    mode?: "mobile" | "desktop" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const serpDescription: (props?: ({
-    mode?: "desktop" | "mobile" | null | undefined;
+    mode?: "mobile" | "desktop" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //# sourceMappingURL=variants.d.ts.map

package/dist/components/SeoDrawer/components/TabWrapper.d.ts

@@ -0,0 +1,6 @@
+interface TabWrapperProps {
+    children: React.ReactNode;
+}
+export declare function TabWrapper({ children }: TabWrapperProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TabWrapper.d.ts.map

package/dist/components/SeoDrawer/components/TabWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/SeoDrawer/components/TabWrapper.tsx"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE,eAAe,2CAEvD"}

package/dist/components/SeoDrawer/components/TabWrapper.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+function TabWrapper({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "py-[18px]", children });
+}
+export {
+  TabWrapper
+};
+//# sourceMappingURL=TabWrapper.js.map

package/dist/components/SeoDrawer/components/TabWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/SeoDrawer/components/TabWrapper.tsx"],"sourcesContent":["interface TabWrapperProps {\n  children: React.ReactNode;\n}\n\nexport function TabWrapper({ children }: TabWrapperProps) {\n  return <div className=\"py-[18px]\">{children}</div>;\n}\n"],"mappings":"AAKS;AADF,SAAS,WAAW,EAAE,SAAS,GAAoB;AACxD,SAAO,oBAAC,SAAI,WAAU,aAAa,UAAS;AAC9C;","names":[]}

package/dist/components/SeoDrawer/index.d.ts

@@ -1,13 +1,20 @@
 import type { AnalysisResult } from "../../engine/types/analysis";
+import type { KeyphraseEntry } from "./keyphraseState";
 import "../../admin.css";
 export interface SeoDrawerProps {
     drawerSlug: string;
-    keyphrase: string;
-    setKeyphrase: (keyphrase: string) => void;
+    keyphrases: KeyphraseEntry[];
+    selectedId: string | null;
+    onSelect: (id: string) => void;
     result: AnalysisResult | null;
     analyzing: boolean;
-    keyphrasePending: boolean;
-    analyzeNow: () => void;
+    onAddRelated: () => void;
+    onTextChange: (id: string, text: string) => void;
+    onAddSynonym: (id: string, syn: string) => void;
+    onRemoveSynonym: (id: string, index: number) => void;
+    onRemove: (id: string) => void;
+    onSetFocus: (id: string) => void;
+    isDuplicate: (id: string, text: string) => boolean;
     site: {
         name: string;
         baseUrl: string;

package/dist/components/SeoDrawer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SeoDrawer/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAe,MAAM,6BAA6B,CAAC;AAW/E,OAAO,iBAAiB,CAAC;AAEzB,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,cAAc,GAAG,IAAI,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAA;KAAE,CAAC;CAC7D;AAED,eAAO,MAAM,SAAS,sDA6DpB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SeoDrawer/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAe,MAAM,6BAA6B,CAAC;AAC/E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAWvD,OAAO,iBAAiB,CAAC;AAEzB,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,cAAc,EAAE,CAAC;IAC7B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,MAAM,EAAE,cAAc,GAAG,IAAI,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC;IACnD,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAA;KAAE,CAAC;CAC7D;AAED,eAAO,MAAM,SAAS,sDAiFpB,CAAC"}

package/dist/components/SeoDrawer/index.js

@@ -14,17 +14,25 @@ import { VitalsTab } from "./tabs/VitalsTab";
 import "../../admin.css";
 const SeoDrawer = memo(function SeoDrawer2({
   drawerSlug,
-  keyphrase,
-  setKeyphrase,
   result,
+  site,
   analyzing,
-  keyphrasePending,
-  analyzeNow,
-  site
+  isDuplicate,
+  keyphrases,
+  onAddRelated,
+  onAddSynonym,
+  onRemove,
+  onRemoveSynonym,
+  onSelect,
+  onSetFocus,
+  onTextChange,
+  selectedId
 }) {
   const [tab, setTab] = useState("keyphrase");
   const total = result?.overall.seoScore ?? 0;
   const totalStatus = result ? result.overall.status : "idle";
+  const focusKeyphrase = keyphrases[0]?.text ?? "";
+  const focusSynonyms = keyphrases[0]?.synonyms ?? [];
   return /* @__PURE__ */ jsx(
     Drawer,
     {
@@ -33,7 +41,7 @@ const SeoDrawer = memo(function SeoDrawer2({
       Header: /* @__PURE__ */ jsx(Header, { drawerSlug, total, totalStatus }),
       children: /* @__PURE__ */ jsxs("div", { className: "seo-root relative text-neutral-800", "data-status": totalStatus, children: [
         /* @__PURE__ */ jsx(TabsNav, { active: tab, onChange: setTab }),
-        /* @__PURE__ */ jsx("div", { className: "py-[18px]", children: result === null ? /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { children: result === null && tab !== "keyphrase" ? /* @__PURE__ */ jsxs(
           "div",
           {
             className: "flex items-center gap-[8px] text-neutral-500 text-[13px]",
@@ -48,19 +56,33 @@ const SeoDrawer = memo(function SeoDrawer2({
           tab === "keyphrase" && /* @__PURE__ */ jsx(
             KeyphraseTab,
             {
-              data: result.keyphrase,
-              keyphrase,
-              setKeyphrase,
+              keyphrases,
+              selectedId,
+              onSelect,
+              result,
               analyzing,
-              keyphrasePending,
-              analyzeNow
+              onAddRelated,
+              onTextChange,
+              onAddSynonym,
+              onRemoveSynonym,
+              onRemove,
+              onSetFocus,
+              isDuplicate
             }
           ),
-          tab === "onpage" && /* @__PURE__ */ jsx(OnPageTab, { data: result.onPage }),
-          tab === "readability" && /* @__PURE__ */ jsx(ReadabilityTab, { data: result.readability }),
-          tab === "inclusive" && /* @__PURE__ */ jsx(InclusiveTab, { data: result.inclusive }),
-          tab === "vitals" && /* @__PURE__ */ jsx(VitalsTab, { data: result.vitals, onRequestKeyphrase: () => setTab("keyphrase") }),
-          tab === "serp" && /* @__PURE__ */ jsx(SerpTab, { data: result.serp, keyphrase, faviconUrl: site.faviconUrl })
+          tab === "onpage" && result && /* @__PURE__ */ jsx(OnPageTab, { data: result.onPage }),
+          tab === "readability" && result && /* @__PURE__ */ jsx(ReadabilityTab, { data: result.readability }),
+          tab === "inclusive" && result && /* @__PURE__ */ jsx(InclusiveTab, { data: result.inclusive }),
+          tab === "vitals" && result && /* @__PURE__ */ jsx(VitalsTab, { data: result.vitals, onRequestKeyphrase: () => setTab("keyphrase") }),
+          tab === "serp" && result && /* @__PURE__ */ jsx(
+            SerpTab,
+            {
+              data: result.serp,
+              keyphrase: focusKeyphrase,
+              synonyms: focusSynonyms,
+              faviconUrl: site.faviconUrl
+            }
+          )
         ] }) })
       ] })
     }

package/dist/components/SeoDrawer/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SeoDrawer/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Drawer } from \"@payloadcms/ui\";\nimport { Loader2 } from \"lucide-react\";\nimport { memo, useState } from \"react\";\nimport type { AnalysisResult, TotalStatus } from \"../../engine/types/analysis\";\nimport { Header } from \"./components/Header\";\nimport { TabsNav } from \"./TabsNav\";\nimport type { TabKey } from \"./TabsNav\";\nimport { KeyphraseTab } from \"./tabs/KeyphraseTab\";\nimport { OnPageTab } from \"./tabs/OnPageTab\";\nimport { ReadabilityTab } from \"./tabs/ReadabilityTab\";\nimport { InclusiveTab } from \"./tabs/InclusiveTab\";\nimport { SerpTab } from \"./tabs/SerpTab\";\nimport { VitalsTab } from \"./tabs/VitalsTab\";\n\nimport \"../../admin.css\";\n\nexport interface SeoDrawerProps {\n  drawerSlug: string;\n  keyphrase: string;\n  setKeyphrase: (keyphrase: string) => void;\n  result: AnalysisResult | null;\n  analyzing: boolean;\n  keyphrasePending: boolean;\n  analyzeNow: () => void;\n  site: { name: string; baseUrl: string; faviconUrl: string };\n}\n\nexport const SeoDrawer = memo(function SeoDrawer({\n  drawerSlug,\n  keyphrase,\n  setKeyphrase,\n  result,\n  analyzing,\n  keyphrasePending,\n  analyzeNow,\n  site,\n}: SeoDrawerProps) {\n  const [tab, setTab] = useState<TabKey>(\"keyphrase\");\n\n  const total = result?.overall.seoScore ?? 0;\n  const totalStatus: TotalStatus = result ? result.overall.status : \"idle\";\n\n  return (\n    <Drawer\n      slug={drawerSlug}\n      className=\"seo-drawer\"\n      Header={<Header drawerSlug={drawerSlug} total={total} totalStatus={totalStatus} />}\n    >\n      <div className=\"seo-root relative text-neutral-800\" data-status={totalStatus}>\n        <TabsNav active={tab} onChange={setTab} />\n\n        <div className=\"py-[18px]\">\n          {result === null ? (\n            <div\n              className=\"flex items-center gap-[8px] text-neutral-500 text-[13px]\"\n              role=\"status\"\n              aria-live=\"polite\"\n            >\n              <Loader2 aria-hidden=\"true\" className=\"w-[14px] h-[14px] animate-spin\" />\n              Analyzing…\n            </div>\n          ) : (\n            <>\n              {tab === \"keyphrase\" && (\n                <KeyphraseTab\n                  data={result.keyphrase}\n                  keyphrase={keyphrase}\n                  setKeyphrase={setKeyphrase}\n                  analyzing={analyzing}\n                  keyphrasePending={keyphrasePending}\n                  analyzeNow={analyzeNow}\n                />\n              )}\n              {tab === \"onpage\" && <OnPageTab data={result.onPage} />}\n              {tab === \"readability\" && <ReadabilityTab data={result.readability} />}\n              {tab === \"inclusive\" && <InclusiveTab data={result.inclusive} />}\n              {tab === \"vitals\" && (\n                <VitalsTab data={result.vitals} onRequestKeyphrase={() => setTab(\"keyphrase\")} />\n              )}\n              {tab === \"serp\" && (\n                <SerpTab data={result.serp} keyphrase={keyphrase} faviconUrl={site.faviconUrl} />\n              )}\n            </>\n          )}\n        </div>\n      </div>\n    </Drawer>\n  );\n});\n"],"mappings":";AAgDc,SAgBF,UAhBE,KAOF,YAPE;AA9Cd,SAAS,cAAc;AACvB,SAAS,eAAe;AACxB,SAAS,MAAM,gBAAgB;AAE/B,SAAS,cAAc;AACvB,SAAS,eAAe;AAExB,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAE1B,OAAO;AAaA,MAAM,YAAY,KAAK,SAASA,WAAU;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAmB;AACjB,QAAM,CAAC,KAAK,MAAM,IAAI,SAAiB,WAAW;AAElD,QAAM,QAAQ,QAAQ,QAAQ,YAAY;AAC1C,QAAM,cAA2B,SAAS,OAAO,QAAQ,SAAS;AAElE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,WAAU;AAAA,MACV,QAAQ,oBAAC,UAAO,YAAwB,OAAc,aAA0B;AAAA,MAEhF,+BAAC,SAAI,WAAU,sCAAqC,eAAa,aAC/D;AAAA,4BAAC,WAAQ,QAAQ,KAAK,UAAU,QAAQ;AAAA,QAExC,oBAAC,SAAI,WAAU,aACZ,qBAAW,OACV;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,aAAU;AAAA,YAEV;AAAA,kCAAC,WAAQ,eAAY,QAAO,WAAU,kCAAiC;AAAA,cAAE;AAAA;AAAA;AAAA,QAE3E,IAEA,iCACG;AAAA,kBAAQ,eACP;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,OAAO;AAAA,cACb;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF;AAAA,UAED,QAAQ,YAAY,oBAAC,aAAU,MAAM,OAAO,QAAQ;AAAA,UACpD,QAAQ,iBAAiB,oBAAC,kBAAe,MAAM,OAAO,aAAa;AAAA,UACnE,QAAQ,eAAe,oBAAC,gBAAa,MAAM,OAAO,WAAW;AAAA,UAC7D,QAAQ,YACP,oBAAC,aAAU,MAAM,OAAO,QAAQ,oBAAoB,MAAM,OAAO,WAAW,GAAG;AAAA,UAEhF,QAAQ,UACP,oBAAC,WAAQ,MAAM,OAAO,MAAM,WAAsB,YAAY,KAAK,YAAY;AAAA,WAEnF,GAEJ;AAAA,SACF;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["SeoDrawer"]}
+{"version":3,"sources":["../../../src/components/SeoDrawer/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Drawer } from \"@payloadcms/ui\";\nimport { Loader2 } from \"lucide-react\";\nimport { memo, useState } from \"react\";\nimport type { AnalysisResult, TotalStatus } from \"../../engine/types/analysis\";\nimport type { KeyphraseEntry } from \"./keyphraseState\";\nimport { Header } from \"./components/Header\";\nimport { TabsNav } from \"./TabsNav\";\nimport type { TabKey } from \"./TabsNav\";\nimport { KeyphraseTab } from \"./tabs/KeyphraseTab\";\nimport { OnPageTab } from \"./tabs/OnPageTab\";\nimport { ReadabilityTab } from \"./tabs/ReadabilityTab\";\nimport { InclusiveTab } from \"./tabs/InclusiveTab\";\nimport { SerpTab } from \"./tabs/SerpTab\";\nimport { VitalsTab } from \"./tabs/VitalsTab\";\n\nimport \"../../admin.css\";\n\nexport interface SeoDrawerProps {\n  drawerSlug: string;\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  site: { name: string; baseUrl: string; faviconUrl: string };\n}\n\nexport const SeoDrawer = memo(function SeoDrawer({\n  drawerSlug,\n  result,\n  site,\n  analyzing,\n  isDuplicate,\n  keyphrases,\n  onAddRelated,\n  onAddSynonym,\n  onRemove,\n  onRemoveSynonym,\n  onSelect,\n  onSetFocus,\n  onTextChange,\n  selectedId,\n}: SeoDrawerProps) {\n  const [tab, setTab] = useState<TabKey>(\"keyphrase\");\n\n  const total = result?.overall.seoScore ?? 0;\n  const totalStatus: TotalStatus = result ? result.overall.status : \"idle\";\n\n  const focusKeyphrase = keyphrases[0]?.text ?? \"\";\n  const focusSynonyms = keyphrases[0]?.synonyms ?? [];\n\n  return (\n    <Drawer\n      slug={drawerSlug}\n      className=\"seo-drawer\"\n      Header={<Header drawerSlug={drawerSlug} total={total} totalStatus={totalStatus} />}\n    >\n      <div className=\"seo-root relative text-neutral-800\" data-status={totalStatus}>\n        <TabsNav active={tab} onChange={setTab} />\n\n        <div>\n          {result === null && tab !== \"keyphrase\" ? (\n            <div\n              className=\"flex items-center gap-[8px] text-neutral-500 text-[13px]\"\n              role=\"status\"\n              aria-live=\"polite\"\n            >\n              <Loader2 aria-hidden=\"true\" className=\"w-[14px] h-[14px] animate-spin\" />\n              Analyzing…\n            </div>\n          ) : (\n            <>\n              {tab === \"keyphrase\" && (\n                <KeyphraseTab\n                  keyphrases={keyphrases}\n                  selectedId={selectedId}\n                  onSelect={onSelect}\n                  result={result}\n                  analyzing={analyzing}\n                  onAddRelated={onAddRelated}\n                  onTextChange={onTextChange}\n                  onAddSynonym={onAddSynonym}\n                  onRemoveSynonym={onRemoveSynonym}\n                  onRemove={onRemove}\n                  onSetFocus={onSetFocus}\n                  isDuplicate={isDuplicate}\n                />\n              )}\n              {tab === \"onpage\" && result && <OnPageTab data={result.onPage} />}\n              {tab === \"readability\" && result && <ReadabilityTab data={result.readability} />}\n              {tab === \"inclusive\" && result && <InclusiveTab data={result.inclusive} />}\n              {tab === \"vitals\" && result && (\n                <VitalsTab data={result.vitals} onRequestKeyphrase={() => setTab(\"keyphrase\")} />\n              )}\n              {tab === \"serp\" && result && (\n                <SerpTab\n                  data={result.serp}\n                  keyphrase={focusKeyphrase}\n                  synonyms={focusSynonyms}\n                  faviconUrl={site.faviconUrl}\n                />\n              )}\n            </>\n          )}\n        </div>\n      </div>\n    </Drawer>\n  );\n});\n"],"mappings":";AAgEc,SAgBF,UAhBE,KAOF,YAPE;AA9Dd,SAAS,cAAc;AACvB,SAAS,eAAe;AACxB,SAAS,MAAM,gBAAgB;AAG/B,SAAS,cAAc;AACvB,SAAS,eAAe;AAExB,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAE1B,OAAO;AAmBA,MAAM,YAAY,KAAK,SAASA,WAAU;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAmB;AACjB,QAAM,CAAC,KAAK,MAAM,IAAI,SAAiB,WAAW;AAElD,QAAM,QAAQ,QAAQ,QAAQ,YAAY;AAC1C,QAAM,cAA2B,SAAS,OAAO,QAAQ,SAAS;AAElE,QAAM,iBAAiB,WAAW,CAAC,GAAG,QAAQ;AAC9C,QAAM,gBAAgB,WAAW,CAAC,GAAG,YAAY,CAAC;AAElD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,WAAU;AAAA,MACV,QAAQ,oBAAC,UAAO,YAAwB,OAAc,aAA0B;AAAA,MAEhF,+BAAC,SAAI,WAAU,sCAAqC,eAAa,aAC/D;AAAA,4BAAC,WAAQ,QAAQ,KAAK,UAAU,QAAQ;AAAA,QAExC,oBAAC,SACE,qBAAW,QAAQ,QAAQ,cAC1B;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,aAAU;AAAA,YAEV;AAAA,kCAAC,WAAQ,eAAY,QAAO,WAAU,kCAAiC;AAAA,cAAE;AAAA;AAAA;AAAA,QAE3E,IAEA,iCACG;AAAA,kBAAQ,eACP;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF;AAAA,UAED,QAAQ,YAAY,UAAU,oBAAC,aAAU,MAAM,OAAO,QAAQ;AAAA,UAC9D,QAAQ,iBAAiB,UAAU,oBAAC,kBAAe,MAAM,OAAO,aAAa;AAAA,UAC7E,QAAQ,eAAe,UAAU,oBAAC,gBAAa,MAAM,OAAO,WAAW;AAAA,UACvE,QAAQ,YAAY,UACnB,oBAAC,aAAU,MAAM,OAAO,QAAQ,oBAAoB,MAAM,OAAO,WAAW,GAAG;AAAA,UAEhF,QAAQ,UAAU,UACjB;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,OAAO;AAAA,cACb,WAAW;AAAA,cACX,UAAU;AAAA,cACV,YAAY,KAAK;AAAA;AAAA,UACnB;AAAA,WAEJ,GAEJ;AAAA,SACF;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["SeoDrawer"]}

package/dist/components/SeoDrawer/keyphraseState.d.ts

@@ -0,0 +1,16 @@
+export interface KeyphraseEntry {
+    id: string;
+    text: string;
+    synonyms: string[];
+}
+export declare function createEntry(text?: string, synonyms?: string[]): KeyphraseEntry;
+export declare function firstEmptyId(list: KeyphraseEntry[]): string | undefined;
+export declare function addRelated(list: KeyphraseEntry[]): KeyphraseEntry[];
+export declare function updateText(list: KeyphraseEntry[], id: string, text: string): KeyphraseEntry[];
+export declare function addSynonym(list: KeyphraseEntry[], id: string, syn: string): KeyphraseEntry[];
+export declare function removeSynonym(list: KeyphraseEntry[], id: string, index: number): KeyphraseEntry[];
+export declare function remove(list: KeyphraseEntry[], id: string): KeyphraseEntry[];
+export declare function setFocus(list: KeyphraseEntry[], id: string): KeyphraseEntry[];
+export declare function isDuplicate(list: KeyphraseEntry[], id: string, text: string): boolean;
+export declare function pruneEmpties(list: KeyphraseEntry[]): KeyphraseEntry[];
+//# sourceMappingURL=keyphraseState.d.ts.map

package/dist/components/SeoDrawer/keyphraseState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyphraseState.d.ts","sourceRoot":"","sources":["../../../src/components/SeoDrawer/keyphraseState.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,EAAE,CAAC;CACpB;AAUD,wBAAgB,WAAW,CAAC,IAAI,SAAK,EAAE,QAAQ,GAAE,MAAM,EAAO,GAAG,cAAc,CAM9E;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,cAAc,EAAE,GAAG,MAAM,GAAG,SAAS,CAEvE;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAKnE;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,cAAc,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,cAAc,EAAE,CAE7F;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,cAAc,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,cAAc,EAAE,CAS5F;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,cAAc,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,cAAc,EAAE,CAIjG;AAED,wBAAgB,MAAM,CAAC,IAAI,EAAE,cAAc,EAAE,EAAE,EAAE,EAAE,MAAM,GAAG,cAAc,EAAE,CAE3E;AAED,wBAAgB,QAAQ,CAAC,IAAI,EAAE,cAAc,EAAE,EAAE,EAAE,EAAE,MAAM,GAAG,cAAc,EAAE,CAK7E;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,cAAc,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAKrF;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAErE"}