sanity-plugin-seofields 1.9.0 → 1.10.1

package/dist/index.js

@@ -1,8 +1,11 @@
+import {
+  buildHreflangs
+} from "./chunk-CRCXC45D.js";
 import {
   analyzeReadability,
   generateSeoText,
   pickTestOutput
-} from "./chunk-Z5AOUU4H.js";
+} from "./chunk-NLEB47UV.js";
 import {
   SchemaOrgJsonLdPreview,
   tokenizeHtml
@@ -22,7 +25,7 @@ import {
   getTwitterTitleValidation,
   hasKeywordOveruse,
   hasMatchingKeyword
-} from "./chunk-HHO2AKAP.js";
+} from "./chunk-DB5MBPRK.js";
 import {
   __spreadProps,
   __spreadValues
@@ -611,16 +614,97 @@ var FocusKeywordInput = (props) => {
 };
 var FocusKeywordInput_default = FocusKeywordInput;
 
+// src/components/meta/HreflangInput.tsx
+import { TranslateIcon } from "@sanity/icons";
+import { Button as Button2, Card as Card2, Flex as Flex2, Stack as Stack2, Text as Text3 } from "@sanity/ui";
+import { useCallback as useCallback2, useState as useState3 } from "react";
+import { PatchEvent as PatchEvent2, set as set2, useClient, useFormValue as useFormValue4 } from "sanity";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var DEFAULT_LOCALE_FIELD = "language";
+var DEFAULT_API_VERSION = "2024-01-01";
+function safeField(name) {
+  return name && /^[A-Za-z_][A-Za-z0-9_]*$/.test(name) ? name : DEFAULT_LOCALE_FIELD;
+}
+var HreflangInput = (props) => {
+  const { schemaType, onChange, renderDefault } = props;
+  const { options } = schemaType;
+  const { hreflang, baseUrl, apiVersion } = options != null ? options : {};
+  const rootDoc = useFormValue4([]);
+  const client = useClient({ apiVersion: apiVersion != null ? apiVersion : DEFAULT_API_VERSION });
+  const [state, setState] = useState3("idle");
+  const [message, setMessage] = useState3(null);
+  const localeField = safeField(hreflang == null ? void 0 : hreflang.localeField);
+  const handleSync = useCallback2(async () => {
+    var _a;
+    const rawId = rootDoc == null ? void 0 : rootDoc._id;
+    if (!rawId) {
+      setState("error");
+      setMessage("Save the document once before syncing translations.");
+      return;
+    }
+    setState("loading");
+    setMessage(null);
+    try {
+      const publishedId = rawId.replace(/^drafts\./, "");
+      const query = `*[_type == "translation.metadata" && references($id)][0].translations[].value->{
+        "language": ${localeField},
+        "slug": slug.current
+      }`;
+      const translations = (_a = await client.fetch(query, { id: publishedId })) != null ? _a : [];
+      const entries = buildHreflangs(translations, {
+        baseUrl,
+        resolvePath: hreflang == null ? void 0 : hreflang.resolvePath
+      });
+      if (entries.length === 0) {
+        setState("error");
+        setMessage("No translations with a resolvable URL were found for this document.");
+        return;
+      }
+      const items = entries.map((e) => ({
+        _type: "hreflangEntry",
+        _key: e.locale,
+        locale: e.locale,
+        url: e.url
+      }));
+      onChange(PatchEvent2.from(set2(items)));
+      setState("done");
+      setMessage(
+        `Synced ${items.length} alternate${items.length === 1 ? "" : "s"} from translations.`
+      );
+    } catch (err) {
+      setState("error");
+      setMessage(err instanceof Error ? err.message : "Failed to sync translations.");
+    }
+  }, [rootDoc == null ? void 0 : rootDoc._id, client, localeField, baseUrl, hreflang, onChange]);
+  return /* @__PURE__ */ jsxs4(Stack2, { space: 3, children: [
+    /* @__PURE__ */ jsx4(Flex2, { children: /* @__PURE__ */ jsx4(
+      Button2,
+      {
+        mode: "ghost",
+        tone: "primary",
+        fontSize: 1,
+        icon: TranslateIcon,
+        text: state === "loading" ? "Syncing\u2026" : "Sync from translations",
+        onClick: handleSync,
+        disabled: state === "loading"
+      }
+    ) }),
+    message && /* @__PURE__ */ jsx4(Card2, { padding: 2, radius: 2, tone: state === "error" ? "critical" : "positive", children: /* @__PURE__ */ jsx4(Text3, { size: 1, children: message }) }),
+    renderDefault(props)
+  ] });
+};
+var HreflangInput_default = HreflangInput;
+
 // src/components/meta/KeywordsInput.tsx
-import { Stack as Stack3 } from "@sanity/ui";
-import { PatchEvent as PatchEvent2, set as set2 } from "sanity";
+import { Stack as Stack4 } from "@sanity/ui";
+import { PatchEvent as PatchEvent3, set as set3 } from "sanity";
 
 // src/components/ai/KeywordSuggestions.tsx
 import { SparklesIcon as SparklesIcon2 } from "@sanity/icons";
-import { Badge, Box, Button as Button2, Card as Card2, Flex as Flex2, Spinner, Stack as Stack2, Text as Text3 } from "@sanity/ui";
-import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
-import { useFormValue as useFormValue4, useWorkspace as useWorkspace2 } from "sanity";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Badge, Box, Button as Button3, Card as Card3, Flex as Flex3, Spinner, Stack as Stack3, Text as Text4 } from "@sanity/ui";
+import { useCallback as useCallback3, useEffect as useEffect2, useRef as useRef2, useState as useState4 } from "react";
+import { useFormValue as useFormValue5, useWorkspace as useWorkspace2 } from "sanity";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function KeywordSuggestions({
   ai,
   seoFieldPath,
@@ -629,17 +713,17 @@ function KeywordSuggestions({
   onAddAll
 }) {
   var _a;
-  const [panelState, setPanelState] = useState3("idle");
-  const [suggestions, setSuggestions] = useState3([]);
-  const [errorMsg, setErrorMsg] = useState3(null);
+  const [panelState, setPanelState] = useState4("idle");
+  const [suggestions, setSuggestions] = useState4([]);
+  const [errorMsg, setErrorMsg] = useState4(null);
   const abortRef = useRef2(null);
-  const rootDoc = useFormValue4([]);
+  const rootDoc = useFormValue5([]);
   const workspace = useWorkspace2();
-  const seoObj = useFormValue4([seoFieldPath]);
+  const seoObj = useFormValue5([seoFieldPath]);
   const focusKeyword = (_a = seoObj == null ? void 0 : seoObj.focusKeyword) != null ? _a : "";
   const bodyField = resolveContentFields(ai == null ? void 0 : ai.content, rootDoc == null ? void 0 : rootDoc._type);
   const content = rootDoc ? extractDocText(rootDoc, bodyField) : "";
-  const handleSuggest = useCallback2(async () => {
+  const handleSuggest = useCallback3(async () => {
     var _a2;
     if (!ai) return;
     (_a2 = abortRef.current) == null ? void 0 : _a2.abort();
@@ -675,7 +759,7 @@ function KeywordSuggestions({
       setPanelState("error");
     }
   }, [ai, content, focusKeyword, existing, workspace.projectId]);
-  const handleAdd = useCallback2(
+  const handleAdd = useCallback3(
     (kw) => {
       onAdd(kw);
       setSuggestions((prev) => prev.filter((s) => s !== kw));
@@ -683,13 +767,13 @@ function KeywordSuggestions({
     },
     [onAdd, suggestions.length]
   );
-  const handleAddAll = useCallback2(() => {
+  const handleAddAll = useCallback3(() => {
     const toAdd = suggestions.filter((kw) => !existing.includes(kw));
     if (toAdd.length > 0) onAddAll(toAdd);
     setSuggestions([]);
     setPanelState("idle");
   }, [suggestions, existing, onAddAll]);
-  const handleDismiss = useCallback2(() => {
+  const handleDismiss = useCallback3(() => {
     var _a2;
     (_a2 = abortRef.current) == null ? void 0 : _a2.abort();
     setSuggestions([]);
@@ -707,9 +791,9 @@ function KeywordSuggestions({
   );
   if (!isConfigured) return null;
   if (panelState === "idle" || panelState === "error") {
-    return /* @__PURE__ */ jsxs4(Stack2, { space: 2, children: [
-      /* @__PURE__ */ jsx4(
-        Button2,
+    return /* @__PURE__ */ jsxs5(Stack3, { space: 2, children: [
+      /* @__PURE__ */ jsx5(
+        Button3,
         {
           mode: "ghost",
           tone: "primary",
@@ -721,23 +805,23 @@ function KeywordSuggestions({
           onClick: handleSuggest
         }
       ),
-      panelState === "error" && errorMsg && /* @__PURE__ */ jsx4(Card2, { padding: 2, tone: "critical", radius: 2, children: /* @__PURE__ */ jsx4(Text3, { size: 1, children: errorMsg }) })
+      panelState === "error" && errorMsg && /* @__PURE__ */ jsx5(Card3, { padding: 2, tone: "critical", radius: 2, children: /* @__PURE__ */ jsx5(Text4, { size: 1, children: errorMsg }) })
     ] });
   }
   if (panelState === "loading") {
-    return /* @__PURE__ */ jsxs4(Flex2, { align: "center", gap: 2, paddingY: 2, children: [
-      /* @__PURE__ */ jsx4(Spinner, { muted: true }),
-      /* @__PURE__ */ jsx4(Text3, { size: 1, muted: true, children: "Finding keywords\u2026" })
+    return /* @__PURE__ */ jsxs5(Flex3, { align: "center", gap: 2, paddingY: 2, children: [
+      /* @__PURE__ */ jsx5(Spinner, { muted: true }),
+      /* @__PURE__ */ jsx5(Text4, { size: 1, muted: true, children: "Finding keywords\u2026" })
     ] });
   }
   const pendingSuggestions = suggestions.filter((kw) => !existing.includes(kw));
   const alreadyAdded = suggestions.filter((kw) => existing.includes(kw));
-  return /* @__PURE__ */ jsx4(Card2, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ jsxs4(Stack2, { space: 3, children: [
-    /* @__PURE__ */ jsxs4(Flex2, { align: "center", justify: "space-between", children: [
-      /* @__PURE__ */ jsx4(Text3, { size: 1, weight: "semibold", muted: true, children: "AI keyword suggestions" }),
-      /* @__PURE__ */ jsxs4(Flex2, { gap: 2, children: [
-        pendingSuggestions.length > 1 && /* @__PURE__ */ jsx4(
-          Button2,
+  return /* @__PURE__ */ jsx5(Card3, { padding: 3, radius: 2, tone: "transparent", border: true, children: /* @__PURE__ */ jsxs5(Stack3, { space: 3, children: [
+    /* @__PURE__ */ jsxs5(Flex3, { align: "center", justify: "space-between", children: [
+      /* @__PURE__ */ jsx5(Text4, { size: 1, weight: "semibold", muted: true, children: "AI keyword suggestions" }),
+      /* @__PURE__ */ jsxs5(Flex3, { gap: 2, children: [
+        pendingSuggestions.length > 1 && /* @__PURE__ */ jsx5(
+          Button3,
           {
             mode: "ghost",
             tone: "primary",
@@ -748,8 +832,8 @@ function KeywordSuggestions({
             onClick: handleAddAll
           }
         ),
-        /* @__PURE__ */ jsx4(
-          Button2,
+        /* @__PURE__ */ jsx5(
+          Button3,
           {
             mode: "ghost",
             tone: "default",
@@ -762,9 +846,9 @@ function KeywordSuggestions({
         )
       ] })
     ] }),
-    pendingSuggestions.length > 0 && /* @__PURE__ */ jsxs4(Box, { children: [
-      /* @__PURE__ */ jsx4(Text3, { size: 0, muted: true, style: { marginBottom: 8 }, children: "Click to add:" }),
-      /* @__PURE__ */ jsx4(Flex2, { gap: 2, wrap: "wrap", style: { marginTop: 6 }, children: pendingSuggestions.map((kw) => /* @__PURE__ */ jsxs4(
+    pendingSuggestions.length > 0 && /* @__PURE__ */ jsxs5(Box, { children: [
+      /* @__PURE__ */ jsx5(Text4, { size: 0, muted: true, style: { marginBottom: 8 }, children: "Click to add:" }),
+      /* @__PURE__ */ jsx5(Flex3, { gap: 2, wrap: "wrap", style: { marginTop: 6 }, children: pendingSuggestions.map((kw) => /* @__PURE__ */ jsxs5(
         "button",
         {
           type: "button",
@@ -796,34 +880,34 @@ function KeywordSuggestions({
         kw
       )) })
     ] }),
-    alreadyAdded.length > 0 && /* @__PURE__ */ jsxs4(Box, { children: [
-      /* @__PURE__ */ jsx4(Text3, { size: 0, muted: true, style: { marginBottom: 6 }, children: "Already added:" }),
-      /* @__PURE__ */ jsx4(Flex2, { gap: 2, wrap: "wrap", style: { marginTop: 4 }, children: alreadyAdded.map((kw) => /* @__PURE__ */ jsxs4(Badge, { tone: "positive", radius: 5, fontSize: 0, padding: 2, children: [
+    alreadyAdded.length > 0 && /* @__PURE__ */ jsxs5(Box, { children: [
+      /* @__PURE__ */ jsx5(Text4, { size: 0, muted: true, style: { marginBottom: 6 }, children: "Already added:" }),
+      /* @__PURE__ */ jsx5(Flex3, { gap: 2, wrap: "wrap", style: { marginTop: 4 }, children: alreadyAdded.map((kw) => /* @__PURE__ */ jsxs5(Badge, { tone: "positive", radius: 5, fontSize: 0, padding: 2, children: [
         "\u2713 ",
         kw
       ] }, kw)) })
     ] }),
-    pendingSuggestions.length === 0 && /* @__PURE__ */ jsx4(Text3, { size: 1, muted: true, children: "All suggested keywords added." })
+    pendingSuggestions.length === 0 && /* @__PURE__ */ jsx5(Text4, { size: 1, muted: true, children: "All suggested keywords added." })
   ] }) });
 }
 
 // src/components/meta/KeywordsInput.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var KeywordsInput = (props) => {
   const { value, renderDefault, path, schemaType, onChange } = props;
   const { options } = schemaType;
   const existing = value != null ? value : [];
   const handleAdd = (kw) => {
     if (existing.includes(kw)) return;
-    onChange(PatchEvent2.from(set2([...existing, kw])));
+    onChange(PatchEvent3.from(set3([...existing, kw])));
   };
   const handleAddAll = (keywords) => {
     const merged = [.../* @__PURE__ */ new Set([...existing, ...keywords])];
-    onChange(PatchEvent2.from(set2(merged)));
+    onChange(PatchEvent3.from(set3(merged)));
   };
-  return /* @__PURE__ */ jsxs5(Stack3, { space: 3, children: [
+  return /* @__PURE__ */ jsxs6(Stack4, { space: 3, children: [
     renderDefault(props),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       KeywordSuggestions,
       {
         ai: options == null ? void 0 : options.ai,
@@ -838,43 +922,51 @@ var KeywordsInput = (props) => {
 var KeywordsInput_default = KeywordsInput;
 
 // src/components/meta/MetaDescription.tsx
-import { Stack as Stack4, Text as Text4 } from "@sanity/ui";
+import { Stack as Stack5, Text as Text5 } from "@sanity/ui";
 import { useMemo as useMemo3 } from "react";
-import { PatchEvent as PatchEvent3, set as set3, useFormValue as useFormValue5 } from "sanity";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { PatchEvent as PatchEvent4, set as set4, useFormValue as useFormValue6 } from "sanity";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var MetaDescription = (props) => {
+  var _a, _b;
   const { value, renderDefault, path, schemaType, onChange } = props;
   const { options } = schemaType;
-  const parent = useFormValue5([path[0]]);
+  const parent = useFormValue6([path[0]]);
   const isParentseoField = parent && (parent == null ? void 0 : parent._type) === "seoFields";
   const keywords = useMemo3(() => (parent == null ? void 0 : parent.keywords) || [], [parent == null ? void 0 : parent.keywords]);
+  const rootDoc = useFormValue6([]);
+  const keywordsVisible = (_b = (_a = options == null ? void 0 : options.isKeywordsVisible) == null ? void 0 : _a.call(options, rootDoc == null ? void 0 : rootDoc._type)) != null ? _b : true;
   const feedbackItems = useMemo3(
-    () => getMetaDescriptionValidationMessages(value || "", keywords, isParentseoField),
-    [value, keywords, isParentseoField]
+    () => getMetaDescriptionValidationMessages(
+      value || "",
+      keywords,
+      isParentseoField,
+      keywordsVisible
+    ),
+    [value, keywords, isParentseoField, keywordsVisible]
   );
   const readability = useMemo3(() => analyzeReadability(value || ""), [value]);
-  return /* @__PURE__ */ jsxs6(Stack4, { space: 3, children: [
+  return /* @__PURE__ */ jsxs7(Stack5, { space: 3, children: [
     renderDefault(props),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       SeoGenButton,
       {
         field: "description",
         ai: options == null ? void 0 : options.ai,
         seoFieldPath: String(path[0]),
-        onGenerate: (v) => onChange(PatchEvent3.from(set3(v)))
+        onGenerate: (v) => onChange(PatchEvent4.from(set4(v)))
       }
     ),
-    /* @__PURE__ */ jsx6(Stack4, { space: 2, children: feedbackItems.map((item) => /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", gap: 7 }, children: [
-      /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(Stack5, { space: 2, children: feedbackItems.map((item) => /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "center", gap: 7 }, children: [
+      /* @__PURE__ */ jsx7(
         "div",
         {
           style: { width: 10, height: 10, borderRadius: "50%", backgroundColor: item.color }
         }
       ),
-      /* @__PURE__ */ jsx6(Text4, { weight: "bold", muted: true, size: 14, children: item.text })
+      /* @__PURE__ */ jsx7(Text5, { weight: "bold", muted: true, size: 14, children: item.text })
     ] }, item.text)) }),
-    readability && /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", gap: 7 }, children: [
-      /* @__PURE__ */ jsx6(
+    readability && /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "center", gap: 7 }, children: [
+      /* @__PURE__ */ jsx7(
         "div",
         {
           style: {
@@ -885,7 +977,7 @@ var MetaDescription = (props) => {
           }
         }
       ),
-      /* @__PURE__ */ jsxs6(Text4, { weight: "bold", muted: true, size: 14, children: [
+      /* @__PURE__ */ jsxs7(Text5, { weight: "bold", muted: true, size: 14, children: [
         "Readability: ",
         readability.label,
         " (Flesch ",
@@ -901,22 +993,22 @@ var MetaDescription = (props) => {
 var MetaDescription_default = MetaDescription;
 
 // src/components/meta/MetaImage.tsx
-import { Stack as Stack5, Text as Text5 } from "@sanity/ui";
+import { Stack as Stack6, Text as Text6 } from "@sanity/ui";
 import { useMemo as useMemo4 } from "react";
-import { useFormValue as useFormValue6 } from "sanity";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useFormValue as useFormValue7 } from "sanity";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var MetaImage = (props) => {
   const { value, renderDefault, path } = props;
-  const seoParent = useFormValue6([path[0]]);
+  const seoParent = useFormValue7([path[0]]);
   const hasImage = !!(value == null ? void 0 : value.asset);
   const feedbackItems = useMemo4(
     () => getMetaImageValidation(hasImage, seoParent),
     [hasImage, seoParent]
   );
-  return /* @__PURE__ */ jsxs7(Stack5, { space: 3, children: [
+  return /* @__PURE__ */ jsxs8(Stack6, { space: 3, children: [
     renderDefault(props),
-    /* @__PURE__ */ jsx7(Stack5, { space: 2, children: feedbackItems.map((item) => /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "center", gap: 7 }, children: [
-      /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(Stack6, { space: 2, children: feedbackItems.map((item) => /* @__PURE__ */ jsxs8("div", { style: { display: "flex", alignItems: "center", gap: 7 }, children: [
+      /* @__PURE__ */ jsx8(
         "div",
         {
           style: {
@@ -927,17 +1019,17 @@ var MetaImage = (props) => {
           }
         }
       ),
-      /* @__PURE__ */ jsx7(Text5, { weight: "bold", muted: true, size: 14, children: item.text })
+      /* @__PURE__ */ jsx8(Text6, { weight: "bold", muted: true, size: 14, children: item.text })
     ] }, item.text)) })
   ] });
 };
 var MetaImage_default = MetaImage;
 
 // src/components/meta/MetaTagsPreview.tsx
-import { Box as Box2, Button as Button3, Card as Card3, Flex as Flex3, Stack as Stack6, Text as Text6 } from "@sanity/ui";
-import { useMemo as useMemo5, useState as useState4 } from "react";
-import { useClient, useColorScheme, useFormValue as useFormValue7 } from "sanity";
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Box as Box2, Button as Button4, Card as Card4, Flex as Flex4, Stack as Stack7, Text as Text7 } from "@sanity/ui";
+import { useMemo as useMemo5, useState as useState5 } from "react";
+import { useClient as useClient2, useColorScheme, useFormValue as useFormValue8 } from "sanity";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 function resolveImageUrl(asset, projectId, dataset) {
   const ref = asset == null ? void 0 : asset._ref;
   if (!ref) return null;
@@ -949,11 +1041,11 @@ function resolveImageUrl(asset, projectId, dataset) {
 }
 var MetaTagsPreview = (props) => {
   const { path } = props;
-  const [expanded, setExpanded] = useState4(false);
-  const [copyLabel, setCopyLabel] = useState4("Copy");
+  const [expanded, setExpanded] = useState5(false);
+  const [copyLabel, setCopyLabel] = useState5("Copy");
   const { scheme } = useColorScheme();
-  const seoFields = useFormValue7([path[0]]);
-  const client = useClient({ apiVersion: "2024-01-01" });
+  const seoFields = useFormValue8([path[0]]);
+  const client = useClient2({ apiVersion: "2024-01-01" });
   const { projectId = "", dataset = "" } = client.config();
   const rawHtml = useMemo5(() => {
     var _a, _b, _c, _d, _e, _f, _g;
@@ -1025,16 +1117,16 @@ var MetaTagsPreview = (props) => {
   const headerBg = isDark ? "#21262d" : "#f0f2f4";
   const headerBorder = isDark ? "#30363d" : "#d0d7de";
   const headerText = isDark ? "#e6edf3" : "#24292f";
-  return /* @__PURE__ */ jsx8(Card3, { padding: 3, radius: 2, tone: "default", border: true, children: /* @__PURE__ */ jsxs8(Stack6, { space: 3, children: [
-    /* @__PURE__ */ jsxs8(Flex3, { align: "center", justify: "space-between", gap: 3, children: [
-      /* @__PURE__ */ jsx8(Text6, { weight: "semibold", size: 1, children: "Meta Tags Preview" }),
-      /* @__PURE__ */ jsxs8(Flex3, { gap: 2, align: "center", children: [
-        /* @__PURE__ */ jsxs8(Text6, { size: 0, muted: true, children: [
+  return /* @__PURE__ */ jsx9(Card4, { padding: 3, radius: 2, tone: "default", border: true, children: /* @__PURE__ */ jsxs9(Stack7, { space: 3, children: [
+    /* @__PURE__ */ jsxs9(Flex4, { align: "center", justify: "space-between", gap: 3, children: [
+      /* @__PURE__ */ jsx9(Text7, { weight: "semibold", size: 1, children: "Meta Tags Preview" }),
+      /* @__PURE__ */ jsxs9(Flex4, { gap: 2, align: "center", children: [
+        /* @__PURE__ */ jsxs9(Text7, { size: 0, muted: true, children: [
           tagCount,
           " tags generated"
         ] }),
-        /* @__PURE__ */ jsx8(
-          Button3,
+        /* @__PURE__ */ jsx9(
+          Button4,
           {
             text: copyLabel,
             tone: "default",
@@ -1046,7 +1138,7 @@ var MetaTagsPreview = (props) => {
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs8(
+    /* @__PURE__ */ jsxs9(
       "button",
       {
         type: "button",
@@ -1067,12 +1159,12 @@ var MetaTagsPreview = (props) => {
           color: headerText
         },
         children: [
-          /* @__PURE__ */ jsx8("span", { style: { fontSize: 10 }, children: expanded ? "\u25B2" : "\u25BC" }),
+          /* @__PURE__ */ jsx9("span", { style: { fontSize: 10 }, children: expanded ? "\u25B2" : "\u25BC" }),
           expanded ? "Hide tags" : "Show tags"
         ]
       }
     ),
-    expanded && /* @__PURE__ */ jsxs8(
+    expanded && /* @__PURE__ */ jsxs9(
       "div",
       {
         style: {
@@ -1081,7 +1173,7 @@ var MetaTagsPreview = (props) => {
           overflow: "hidden"
         },
         children: [
-          /* @__PURE__ */ jsxs8(
+          /* @__PURE__ */ jsxs9(
             "div",
             {
               style: {
@@ -1093,7 +1185,7 @@ var MetaTagsPreview = (props) => {
                 gap: 6
               },
               children: [
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx9(
                   "span",
                   {
                     style: {
@@ -1105,11 +1197,11 @@ var MetaTagsPreview = (props) => {
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx8("span", { style: { fontSize: 11, color: headerText, fontFamily: "monospace" }, children: "HTML" })
+                /* @__PURE__ */ jsx9("span", { style: { fontSize: 11, color: headerText, fontFamily: "monospace" }, children: "HTML" })
               ]
             }
           ),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9(
             Box2,
             {
               as: "pre",
@@ -1125,7 +1217,7 @@ var MetaTagsPreview = (props) => {
                 wordBreak: "break-word",
                 backgroundColor: codeBg
               },
-              children: tokens.map((token, idx) => /* @__PURE__ */ jsx8("span", { style: { color: token.color }, children: token.text }, idx))
+              children: tokens.map((token, idx) => /* @__PURE__ */ jsx9("span", { style: { color: token.color }, children: token.text }, idx))
             }
           )
         ]
@@ -1136,21 +1228,21 @@ var MetaTagsPreview = (props) => {
 var MetaTagsPreview_default = MetaTagsPreview;
 
 // src/components/meta/MetaTitle.tsx
-import { Stack as Stack7, Text as Text7 } from "@sanity/ui";
-import { useEffect as useEffect3, useMemo as useMemo6, useState as useState5 } from "react";
-import { PatchEvent as PatchEvent4, set as set4, useClient as useClient2, useFormValue as useFormValue8 } from "sanity";
-import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Stack as Stack8, Text as Text8 } from "@sanity/ui";
+import { useEffect as useEffect3, useMemo as useMemo6, useState as useState6 } from "react";
+import { PatchEvent as PatchEvent5, set as set5, useClient as useClient3, useFormValue as useFormValue9 } from "sanity";
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 var MetaTitle = (props) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e;
   const { value, renderDefault, path, schemaType, onChange } = props;
   const { options } = schemaType;
-  const parent = useFormValue8([path[0]]);
+  const parent = useFormValue9([path[0]]);
   const isParentseoField = parent && (parent == null ? void 0 : parent._type) === "seoFields";
   const keywords = useMemo6(() => (parent == null ? void 0 : parent.keywords) || [], [parent == null ? void 0 : parent.keywords]);
-  const rootDoc = (_a = useFormValue8([])) != null ? _a : {};
-  const client = useClient2({ apiVersion: (_b = options == null ? void 0 : options.apiVersion) != null ? _b : "2024-01-01" });
-  const [groqTitleSuffix, setGroqTitleSuffix] = useState5("");
-  const [isDuplicateTitle, setIsDuplicateTitle] = useState5(false);
+  const rootDoc = (_a = useFormValue9([])) != null ? _a : {};
+  const client = useClient3({ apiVersion: (_b = options == null ? void 0 : options.apiVersion) != null ? _b : "2024-01-01" });
+  const [groqTitleSuffix, setGroqTitleSuffix] = useState6("");
+  const [isDuplicateTitle, setIsDuplicateTitle] = useState6(false);
   const titleSuffixQuery = options == null ? void 0 : options.titleSuffixQuery;
   const titleSuffixOption = options == null ? void 0 : options.titleSuffix;
   useEffect3(() => {
@@ -1185,24 +1277,31 @@ var MetaTitle = (props) => {
     return titleSuffixOption;
   }, [titleSuffixQuery, groqTitleSuffix, titleSuffixOption, rootDoc]);
   const suffixLength = resolvedSuffix ? resolvedSuffix.length + 3 : 0;
+  const keywordsVisible = (_e = (_d = options == null ? void 0 : options.isKeywordsVisible) == null ? void 0 : _d.call(options, rootDoc == null ? void 0 : rootDoc._type)) != null ? _e : true;
   const feedbackItems = useMemo6(
-    () => getMetaTitleValidationMessages(value || "", keywords, isParentseoField, suffixLength),
-    [value, keywords, isParentseoField, suffixLength]
+    () => getMetaTitleValidationMessages(
+      value || "",
+      keywords,
+      isParentseoField,
+      suffixLength,
+      keywordsVisible
+    ),
+    [value, keywords, isParentseoField, suffixLength, keywordsVisible]
   );
-  return /* @__PURE__ */ jsxs9(Stack7, { space: 3, children: [
+  return /* @__PURE__ */ jsxs10(Stack8, { space: 3, children: [
     renderDefault(props),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10(
       SeoGenButton,
       {
         field: "title",
         ai: options == null ? void 0 : options.ai,
         seoFieldPath: String(path[0]),
-        onGenerate: (v) => onChange(PatchEvent4.from(set4(v)))
+        onGenerate: (v) => onChange(PatchEvent5.from(set5(v)))
       }
     ),
-    /* @__PURE__ */ jsxs9(Stack7, { space: 2, children: [
-      feedbackItems.map((item) => /* @__PURE__ */ jsxs9("div", { style: { display: "flex", alignItems: "center", gap: 7 }, children: [
-        /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsxs10(Stack8, { space: 2, children: [
+      feedbackItems.map((item) => /* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: 7 }, children: [
+        /* @__PURE__ */ jsx10(
           "div",
           {
             style: {
@@ -1213,10 +1312,10 @@ var MetaTitle = (props) => {
             }
           }
         ),
-        /* @__PURE__ */ jsx9(Text7, { weight: "bold", muted: true, size: 14, children: item.text })
+        /* @__PURE__ */ jsx10(Text8, { weight: "bold", muted: true, size: 14, children: item.text })
       ] }, item.text)),
-      isDuplicateTitle && /* @__PURE__ */ jsxs9("div", { style: { display: "flex", alignItems: "center", gap: 7 }, children: [
-        /* @__PURE__ */ jsx9(
+      isDuplicateTitle && /* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: 7 }, children: [
+        /* @__PURE__ */ jsx10(
           "div",
           {
             style: {
@@ -1227,7 +1326,7 @@ var MetaTitle = (props) => {
             }
           }
         ),
-        /* @__PURE__ */ jsx9(Text7, { weight: "bold", muted: true, size: 14, children: "Duplicate meta title \u2014 another published document uses this exact title." })
+        /* @__PURE__ */ jsx10(Text8, { weight: "bold", muted: true, size: 14, children: "Duplicate meta title \u2014 another published document uses this exact title." })
       ] })
     ] })
   ] });
@@ -1371,6 +1470,9 @@ var getFieldHiddenFunction = (fieldName, config) => {
     return isFieldHidden(fieldName, config, documentType);
   };
 };
+var getKeywordsVisibilityChecker = (config) => {
+  return (documentType) => !isFieldHidden("keywords", config, documentType);
+};
 
 // src/utils/utils.ts
 var isEmpty = (value) => {
@@ -1381,33 +1483,36 @@ var isEmpty = (value) => {
 import { defineField, defineType } from "sanity";
 
 // src/components/openGraph/OgDescription.tsx
-import { Stack as Stack8, Text as Text8 } from "@sanity/ui";
+import { Stack as Stack9, Text as Text9 } from "@sanity/ui";
 import { useMemo as useMemo7 } from "react";
-import { PatchEvent as PatchEvent5, set as set5, useFormValue as useFormValue9 } from "sanity";
-import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+import { PatchEvent as PatchEvent6, set as set6, useFormValue as useFormValue10 } from "sanity";
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
 var OgDescription = (props) => {
+  var _a, _b;
   const { value, renderDefault, path, schemaType, onChange } = props;
   const { options } = schemaType;
-  const parent = useFormValue9([path[0]]);
+  const parent = useFormValue10([path[0]]);
   const isParentseoField = parent && (parent == null ? void 0 : parent._type) === "seoFields";
   const keywords = useMemo7(() => (parent == null ? void 0 : parent.keywords) || [], [parent == null ? void 0 : parent.keywords]);
+  const rootDoc = useFormValue10([]);
+  const keywordsVisible = (_b = (_a = options == null ? void 0 : options.isKeywordsVisible) == null ? void 0 : _a.call(options, rootDoc == null ? void 0 : rootDoc._type)) != null ? _b : true;
   const feedbackItems = useMemo7(
-    () => getOgDescriptionValidation(value || "", keywords, isParentseoField),
-    [value, keywords, isParentseoField]
+    () => getOgDescriptionValidation(value || "", keywords, isParentseoField, keywordsVisible),
+    [value, keywords, isParentseoField, keywordsVisible]
   );
-  return /* @__PURE__ */ jsxs10(Stack8, { space: 3, children: [
+  return /* @__PURE__ */ jsxs11(Stack9, { space: 3, children: [
     renderDefault(props),
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx11(
       SeoGenButton,
       {
         field: "ogDescription",
         ai: options == null ? void 0 : options.ai,
         seoFieldPath: String(path[0]),
-        onGenerate: (v) => onChange(PatchEvent5.from(set5(v)))
+        onGenerate: (v) => onChange(PatchEvent6.from(set6(v)))
       }
     ),
-    /* @__PURE__ */ jsx10(Stack8, { space: 2, children: feedbackItems.map((item) => /* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: 7 }, children: [
-      /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx11(Stack9, { space: 2, children: feedbackItems.map((item) => /* @__PURE__ */ jsxs11("div", { style: { display: "flex", alignItems: "center", gap: 7 }, children: [
+      /* @__PURE__ */ jsx11(
         "div",
         {
           style: {
@@ -1418,20 +1523,20 @@ var OgDescription = (props) => {
           }
         }
       ),
-      /* @__PURE__ */ jsx10(Text8, { weight: "bold", muted: true, size: 14, children: item.text })
+      /* @__PURE__ */ jsx11(Text9, { weight: "bold", muted: true, size: 14, children: item.text })
     ] }, item.text)) })
   ] });
 };
 var OgDescription_default = OgDescription;
 
 // src/components/openGraph/OgImage.tsx
-import { Stack as Stack9, Text as Text9 } from "@sanity/ui";
+import { Stack as Stack10, Text as Text10 } from "@sanity/ui";
 import { useMemo as useMemo8 } from "react";
-import { useFormValue as useFormValue10 } from "sanity";
-import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+import { useFormValue as useFormValue11 } from "sanity";
+import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 var OgImage = (props) => {
   const { value, renderDefault, path } = props;
-  const seoParent = useFormValue10([path[0]]);
+  const seoParent = useFormValue11([path[0]]);
   const imgValue = value;
   const hasImage = !!(imgValue == null ? void 0 : imgValue.asset);
   const altText = imgValue == null ? void 0 : imgValue.alt;
@@ -1439,10 +1544,10 @@ var OgImage = (props) => {
     () => getOgImageValidation(hasImage, altText, seoParent),
     [hasImage, altText, seoParent]
   );
-  return /* @__PURE__ */ jsxs11(Stack9, { space: 3, children: [
+  return /* @__PURE__ */ jsxs12(Stack10, { space: 3, children: [
     renderDefault(props),
-    /* @__PURE__ */ jsx11(Stack9, { space: 2, children: feedbackItems.map((item) => /* @__PURE__ */ jsxs11("div", { style: { display: "flex", alignItems: "center", gap: 7 }, children: [
-      /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx12(Stack10, { space: 2, children: feedbackItems.map((item) => /* @__PURE__ */ jsxs12("div", { style: { display: "flex", alignItems: "center", gap: 7 }, children: [
+      /* @__PURE__ */ jsx12(
         "div",
         {
           style: {
@@ -1453,25 +1558,25 @@ var OgImage = (props) => {
           }
         }
       ),
-      /* @__PURE__ */ jsx11(Text9, { weight: "bold", muted: true, size: 14, children: item.text })
+      /* @__PURE__ */ jsx12(Text10, { weight: "bold", muted: true, size: 14, children: item.text })
     ] }, item.text)) })
   ] });
 };
 var OgImage_default = OgImage;
 
 // src/components/openGraph/OgImageUrl.tsx
-import { Stack as Stack10, Text as Text10 } from "@sanity/ui";
+import { Stack as Stack11, Text as Text11 } from "@sanity/ui";
 import { useMemo as useMemo9 } from "react";
-import { useFormValue as useFormValue11 } from "sanity";
-import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+import { useFormValue as useFormValue12 } from "sanity";
+import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
 var OgImageUrl = (props) => {
   const { value, renderDefault, path } = props;
-  const seoParent = useFormValue11([path[0]]);
+  const seoParent = useFormValue12([path[0]]);
   const feedbackItems = useMemo9(() => getOgImageUrlValidation(value, seoParent), [value, seoParent]);
-  return /* @__PURE__ */ jsxs12(Stack10, { space: 3, children: [
+  return /* @__PURE__ */ jsxs13(Stack11, { space: 3, children: [
     renderDefault(props),
-    /* @__PURE__ */ jsx12(Stack10, { space: 2, children: feedbackItems.map((item) => /* @__PURE__ */ jsxs12("div", { style: { display: "flex", alignItems: "center", gap: 7 }, children: [
-      /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13(Stack11, { space: 2, children: feedbackItems.map((item) => /* @__PURE__ */ jsxs13("div", { style: { display: "flex", alignItems: "center", gap: 7 }, children: [
+      /* @__PURE__ */ jsx13(
         "div",
         {
           style: {
@@ -1482,40 +1587,43 @@ var OgImageUrl = (props) => {
           }
         }
       ),
-      /* @__PURE__ */ jsx12(Text10, { weight: "bold", muted: true, size: 14, children: item.text })
+      /* @__PURE__ */ jsx13(Text11, { weight: "bold", muted: true, size: 14, children: item.text })
     ] }, item.text)) })
   ] });
 };
 var OgImageUrl_default = OgImageUrl;
 
 // src/components/openGraph/OgTitle.tsx
-import { Stack as Stack11, Text as Text11 } from "@sanity/ui";
+import { Stack as Stack12, Text as Text12 } from "@sanity/ui";
 import { useMemo as useMemo10 } from "react";
-import { PatchEvent as PatchEvent6, set as set6, useFormValue as useFormValue12 } from "sanity";
-import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+import { PatchEvent as PatchEvent7, set as set7, useFormValue as useFormValue13 } from "sanity";
+import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
 var OgTitle = (props) => {
+  var _a, _b;
   const { value, renderDefault, path, schemaType, onChange } = props;
   const { options } = schemaType;
-  const parent = useFormValue12([path[0]]);
+  const parent = useFormValue13([path[0]]);
   const isParentseoField = parent && (parent == null ? void 0 : parent._type) === "seoFields";
   const keywords = useMemo10(() => (parent == null ? void 0 : parent.keywords) || [], [parent == null ? void 0 : parent.keywords]);
+  const rootDoc = useFormValue13([]);
+  const keywordsVisible = (_b = (_a = options == null ? void 0 : options.isKeywordsVisible) == null ? void 0 : _a.call(options, rootDoc == null ? void 0 : rootDoc._type)) != null ? _b : true;
   const feedbackItems = useMemo10(
-    () => getOgTitleValidation(value || "", keywords, isParentseoField),
-    [value, keywords, isParentseoField]
+    () => getOgTitleValidation(value || "", keywords, isParentseoField, keywordsVisible),
+    [value, keywords, isParentseoField, keywordsVisible]
   );
-  return /* @__PURE__ */ jsxs13(Stack11, { space: 3, children: [
+  return /* @__PURE__ */ jsxs14(Stack12, { space: 3, children: [
     renderDefault(props),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       SeoGenButton,
       {
         field: "ogTitle",
         ai: options == null ? void 0 : options.ai,
         seoFieldPath: String(path[0]),
-        onGenerate: (v) => onChange(PatchEvent6.from(set6(v)))
+        onGenerate: (v) => onChange(PatchEvent7.from(set7(v)))
       }
     ),
-    /* @__PURE__ */ jsx13(Stack11, { space: 2, children: feedbackItems.map((item) => /* @__PURE__ */ jsxs13("div", { style: { display: "flex", alignItems: "center", gap: 7 }, children: [
-      /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(Stack12, { space: 2, children: feedbackItems.map((item) => /* @__PURE__ */ jsxs14("div", { style: { display: "flex", alignItems: "center", gap: 7 }, children: [
+      /* @__PURE__ */ jsx14(
         "div",
         {
           style: {
@@ -1526,7 +1634,7 @@ var OgTitle = (props) => {
           }
         }
       ),
-      /* @__PURE__ */ jsx13(Text11, { weight: "bold", muted: true, size: 14, children: item.text })
+      /* @__PURE__ */ jsx14(Text12, { weight: "bold", muted: true, size: 14, children: item.text })
     ] }, item.text)) })
   ] });
 };
@@ -1554,7 +1662,9 @@ function openGraph(config = {}) {
         components: {
           input: OgTitle_default
         },
-        options: __spreadValues({}, config.ai ? { ai: withLicense(config.ai, config.licenseKey) } : {})
+        options: __spreadProps(__spreadValues({}, config.ai ? { ai: withLicense(config.ai, config.licenseKey) } : {}), {
+          isKeywordsVisible: getKeywordsVisibilityChecker(config)
+        })
       })),
       defineField(__spreadProps(__spreadValues({
         name: "description"
@@ -1565,7 +1675,9 @@ function openGraph(config = {}) {
         components: {
           input: OgDescription_default
         },
-        options: __spreadValues({}, config.ai ? { ai: withLicense(config.ai, config.licenseKey) } : {})
+        options: __spreadProps(__spreadValues({}, config.ai ? { ai: withLicense(config.ai, config.licenseKey) } : {}), {
+          isKeywordsVisible: getKeywordsVisibilityChecker(config)
+        })
       })),
       defineField(__spreadProps(__spreadValues({
         name: "siteName"
@@ -1652,33 +1764,36 @@ function openGraph(config = {}) {
 import { defineField as defineField2, defineType as defineType2 } from "sanity";
 
 // src/components/twitter/twitterDescription.tsx
-import { Stack as Stack12, Text as Text12 } from "@sanity/ui";
+import { Stack as Stack13, Text as Text13 } from "@sanity/ui";
 import { useMemo as useMemo11 } from "react";
-import { PatchEvent as PatchEvent7, set as set7, useFormValue as useFormValue13 } from "sanity";
-import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+import { PatchEvent as PatchEvent8, set as set8, useFormValue as useFormValue14 } from "sanity";
+import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
 var TwitterDescription = (props) => {
+  var _a, _b;
   const { value, renderDefault, path, schemaType, onChange } = props;
   const { options } = schemaType;
-  const parent = useFormValue13([path[0]]);
+  const parent = useFormValue14([path[0]]);
   const isParentseoField = parent && (parent == null ? void 0 : parent._type) === "seoFields";
   const keywords = useMemo11(() => (parent == null ? void 0 : parent.keywords) || [], [parent == null ? void 0 : parent.keywords]);
+  const rootDoc = useFormValue14([]);
+  const keywordsVisible = (_b = (_a = options == null ? void 0 : options.isKeywordsVisible) == null ? void 0 : _a.call(options, rootDoc == null ? void 0 : rootDoc._type)) != null ? _b : true;
   const feedbackItems = useMemo11(
-    () => getTwitterDescriptionValidation(value || "", keywords, isParentseoField),
-    [value, keywords, isParentseoField]
+    () => getTwitterDescriptionValidation(value || "", keywords, isParentseoField, keywordsVisible),
+    [value, keywords, isParentseoField, keywordsVisible]
   );
-  return /* @__PURE__ */ jsxs14(Stack12, { space: 3, children: [
+  return /* @__PURE__ */ jsxs15(Stack13, { space: 3, children: [
     renderDefault(props),
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(
       SeoGenButton,
       {
         field: "twitterDescription",
         ai: options == null ? void 0 : options.ai,
         seoFieldPath: String(path[0]),
-        onGenerate: (v) => onChange(PatchEvent7.from(set7(v)))
+        onGenerate: (v) => onChange(PatchEvent8.from(set8(v)))
       }
     ),
-    /* @__PURE__ */ jsx14(Stack12, { space: 2, children: feedbackItems.map((item) => /* @__PURE__ */ jsxs14("div", { style: { display: "flex", alignItems: "center", gap: 7 }, children: [
-      /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(Stack13, { space: 2, children: feedbackItems.map((item) => /* @__PURE__ */ jsxs15("div", { style: { display: "flex", alignItems: "center", gap: 7 }, children: [
+      /* @__PURE__ */ jsx15(
         "div",
         {
           style: {
@@ -1689,20 +1804,20 @@ var TwitterDescription = (props) => {
           }
         }
       ),
-      /* @__PURE__ */ jsx14(Text12, { weight: "bold", muted: true, size: 14, children: item.text })
+      /* @__PURE__ */ jsx15(Text13, { weight: "bold", muted: true, size: 14, children: item.text })
     ] }, item.text)) })
   ] });
 };
 var twitterDescription_default = TwitterDescription;
 
 // src/components/twitter/TwitterImage.tsx
-import { Stack as Stack13, Text as Text13 } from "@sanity/ui";
+import { Stack as Stack14, Text as Text14 } from "@sanity/ui";
 import { useMemo as useMemo12 } from "react";
-import { useFormValue as useFormValue14 } from "sanity";
-import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
+import { useFormValue as useFormValue15 } from "sanity";
+import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
 var TwitterImage = (props) => {
   const { value, renderDefault, path } = props;
-  const seoParent = useFormValue14([path[0]]);
+  const seoParent = useFormValue15([path[0]]);
   const imgValue = value;
   const hasImage = !!(imgValue == null ? void 0 : imgValue.asset);
   const altText = imgValue == null ? void 0 : imgValue.alt;
@@ -1710,10 +1825,10 @@ var TwitterImage = (props) => {
     () => getTwitterImageValidation(hasImage, altText, seoParent),
     [hasImage, altText, seoParent]
   );
-  return /* @__PURE__ */ jsxs15(Stack13, { space: 3, children: [
+  return /* @__PURE__ */ jsxs16(Stack14, { space: 3, children: [
     renderDefault(props),
-    /* @__PURE__ */ jsx15(Stack13, { space: 2, children: feedbackItems.map((item) => /* @__PURE__ */ jsxs15("div", { style: { display: "flex", alignItems: "center", gap: 7 }, children: [
-      /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx16(Stack14, { space: 2, children: feedbackItems.map((item) => /* @__PURE__ */ jsxs16("div", { style: { display: "flex", alignItems: "center", gap: 7 }, children: [
+      /* @__PURE__ */ jsx16(
         "div",
         {
           style: {
@@ -1724,28 +1839,28 @@ var TwitterImage = (props) => {
           }
         }
       ),
-      /* @__PURE__ */ jsx15(Text13, { weight: "bold", muted: true, size: 14, children: item.text })
+      /* @__PURE__ */ jsx16(Text14, { weight: "bold", muted: true, size: 14, children: item.text })
     ] }, item.text)) })
   ] });
 };
 var TwitterImage_default = TwitterImage;
 
 // src/components/twitter/TwitterImageUrl.tsx
-import { Stack as Stack14, Text as Text14 } from "@sanity/ui";
+import { Stack as Stack15, Text as Text15 } from "@sanity/ui";
 import { useMemo as useMemo13 } from "react";
-import { useFormValue as useFormValue15 } from "sanity";
-import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
+import { useFormValue as useFormValue16 } from "sanity";
+import { jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
 var TwitterImageUrl = (props) => {
   const { value, renderDefault, path } = props;
-  const seoParent = useFormValue15([path[0]]);
+  const seoParent = useFormValue16([path[0]]);
   const feedbackItems = useMemo13(
     () => getTwitterImageUrlValidation(value, seoParent),
     [value, seoParent]
   );
-  return /* @__PURE__ */ jsxs16(Stack14, { space: 3, children: [
+  return /* @__PURE__ */ jsxs17(Stack15, { space: 3, children: [
     renderDefault(props),
-    /* @__PURE__ */ jsx16(Stack14, { space: 2, children: feedbackItems.map((item) => /* @__PURE__ */ jsxs16("div", { style: { display: "flex", alignItems: "center", gap: 7 }, children: [
-      /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx17(Stack15, { space: 2, children: feedbackItems.map((item) => /* @__PURE__ */ jsxs17("div", { style: { display: "flex", alignItems: "center", gap: 7 }, children: [
+      /* @__PURE__ */ jsx17(
         "div",
         {
           style: {
@@ -1756,40 +1871,43 @@ var TwitterImageUrl = (props) => {
           }
         }
       ),
-      /* @__PURE__ */ jsx16(Text14, { weight: "bold", muted: true, size: 14, children: item.text })
+      /* @__PURE__ */ jsx17(Text15, { weight: "bold", muted: true, size: 14, children: item.text })
     ] }, item.text)) })
   ] });
 };
 var TwitterImageUrl_default = TwitterImageUrl;
 
 // src/components/twitter/twitterTitle.tsx
-import { Stack as Stack15, Text as Text15 } from "@sanity/ui";
+import { Stack as Stack16, Text as Text16 } from "@sanity/ui";
 import { useMemo as useMemo14 } from "react";
-import { PatchEvent as PatchEvent8, set as set8, useFormValue as useFormValue16 } from "sanity";
-import { jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
+import { PatchEvent as PatchEvent9, set as set9, useFormValue as useFormValue17 } from "sanity";
+import { jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
 var TwitterTitle = (props) => {
+  var _a, _b;
   const { value, renderDefault, path, schemaType, onChange } = props;
   const { options } = schemaType;
-  const parent = useFormValue16([path[0]]);
+  const parent = useFormValue17([path[0]]);
   const isParentseoField = parent && (parent == null ? void 0 : parent._type) === "seoFields";
   const keywords = useMemo14(() => (parent == null ? void 0 : parent.keywords) || [], [parent == null ? void 0 : parent.keywords]);
+  const rootDoc = useFormValue17([]);
+  const keywordsVisible = (_b = (_a = options == null ? void 0 : options.isKeywordsVisible) == null ? void 0 : _a.call(options, rootDoc == null ? void 0 : rootDoc._type)) != null ? _b : true;
   const feedbackItems = useMemo14(
-    () => getTwitterTitleValidation(value || "", keywords, isParentseoField),
-    [value, keywords, isParentseoField]
+    () => getTwitterTitleValidation(value || "", keywords, isParentseoField, keywordsVisible),
+    [value, keywords, isParentseoField, keywordsVisible]
   );
-  return /* @__PURE__ */ jsxs17(Stack15, { space: 3, children: [
+  return /* @__PURE__ */ jsxs18(Stack16, { space: 3, children: [
     renderDefault(props),
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx18(
       SeoGenButton,
       {
         field: "twitterTitle",
         ai: options == null ? void 0 : options.ai,
         seoFieldPath: String(path[0]),
-        onGenerate: (v) => onChange(PatchEvent8.from(set8(v)))
+        onGenerate: (v) => onChange(PatchEvent9.from(set9(v)))
       }
     ),
-    /* @__PURE__ */ jsx17(Stack15, { space: 2, children: feedbackItems.map((item) => /* @__PURE__ */ jsxs17("div", { style: { display: "flex", alignItems: "center", gap: 7 }, children: [
-      /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx18(Stack16, { space: 2, children: feedbackItems.map((item) => /* @__PURE__ */ jsxs18("div", { style: { display: "flex", alignItems: "center", gap: 7 }, children: [
+      /* @__PURE__ */ jsx18(
         "div",
         {
           style: {
@@ -1800,7 +1918,7 @@ var TwitterTitle = (props) => {
           }
         }
       ),
-      /* @__PURE__ */ jsx17(Text15, { weight: "bold", muted: true, size: 14, children: item.text })
+      /* @__PURE__ */ jsx18(Text16, { weight: "bold", muted: true, size: 14, children: item.text })
     ] }, item.text)) })
   ] });
 };
@@ -1849,7 +1967,9 @@ function twitter(config = {}) {
         components: {
           input: twitterTitle_default
         },
-        options: __spreadValues({}, config.ai ? { ai: withLicense(config.ai, config.licenseKey) } : {})
+        options: __spreadProps(__spreadValues({}, config.ai ? { ai: withLicense(config.ai, config.licenseKey) } : {}), {
+          isKeywordsVisible: getKeywordsVisibilityChecker(config)
+        })
       })),
       defineField2(__spreadProps(__spreadValues({
         name: "description",
@@ -1860,7 +1980,9 @@ function twitter(config = {}) {
         components: {
           input: twitterDescription_default
         },
-        options: __spreadValues({}, config.ai ? { ai: withLicense(config.ai, config.licenseKey) } : {})
+        options: __spreadProps(__spreadValues({}, config.ai ? { ai: withLicense(config.ai, config.licenseKey) } : {}), {
+          isKeywordsVisible: getKeywordsVisibilityChecker(config)
+        })
       })),
       defineField2(__spreadProps(__spreadValues({
         name: "imageType"
@@ -1919,7 +2041,7 @@ function twitter(config = {}) {
 }
 
 // src/schemas/index.ts
-var LazySeoPreview = lazy(() => import("./SeoPreview-UNQBKTQO.js"));
+var LazySeoPreview = lazy(() => import("./SeoPreview-TATJQFMP.js"));
 var SeoPreviewWrapper = (props) => createElement(Suspense, { fallback: null }, createElement(LazySeoPreview, props));
 function buildFieldGroupMap(groups) {
   const map = /* @__PURE__ */ new Map();
@@ -1983,7 +2105,9 @@ function getAiOption(config) {
   return config.ai ? { ai: withLicense(config.ai, config.licenseKey) } : {};
 }
 function getTitleFieldOptions(config) {
-  return __spreadValues(__spreadValues(__spreadValues({}, config.apiVersion ? { apiVersion: config.apiVersion } : {}), getSeoPreviewSuffixOptions(config.seoPreview)), getAiOption(config));
+  return __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, config.apiVersion ? { apiVersion: config.apiVersion } : {}), getSeoPreviewSuffixOptions(config.seoPreview)), getAiOption(config)), {
+    isKeywordsVisible: getKeywordsVisibilityChecker(config)
+  });
 }
 function buildGeoChecklistField(config, fieldGroupMap) {
   if (config.geo === false) return [];
@@ -2023,6 +2147,7 @@ function buildMetaTagsPreviewField(config, fieldGroupMap) {
   ];
 }
 function seoFieldsSchema(config = {}) {
+  var _a;
   const groupsCfg = config.fieldGroups;
   const fieldGroupMap = (groupsCfg == null ? void 0 : groupsCfg.length) ? buildFieldGroupMap(groupsCfg) : void 0;
   const sanityGroups = (groupsCfg == null ? void 0 : groupsCfg.length) ? toSanityGroups(groupsCfg) : void 0;
@@ -2078,7 +2203,9 @@ function seoFieldsSchema(config = {}) {
           components: {
             input: MetaDescription_default
           },
-          options: getAiOption(config),
+          options: __spreadProps(__spreadValues({}, getAiOption(config)), {
+            isKeywordsVisible: getKeywordsVisibilityChecker(config)
+          }),
           hidden: getFieldHiddenFunction("description", config)
         })),
         fieldGroupMap
@@ -2147,12 +2274,20 @@ function seoFieldsSchema(config = {}) {
         fieldGroupMap
       ),
       withGroup(
-        defineField3(__spreadProps(__spreadValues({
+        defineField3(__spreadProps(__spreadValues(__spreadProps(__spreadValues({
           name: "hreflangs"
         }, getFieldInfo("hreflangs", config.fieldOverrides)), {
           type: "array",
           of: [{ type: "hreflangEntry" }],
-          description: "Add alternate language/region versions. Include x-default for the fallback URL.",
+          description: "Add alternate language/region versions. Include x-default for the fallback URL."
+        }), ((_a = config.hreflang) == null ? void 0 : _a.autoFill) ? {
+          components: { input: HreflangInput_default },
+          options: {
+            hreflang: config.hreflang,
+            baseUrl: config.baseUrl,
+            apiVersion: config.apiVersion
+          }
+        } : {}), {
           hidden: getFieldHiddenFunction("hreflangs", config)
         })),
         fieldGroupMap