sanity-plugin-seofields 1.6.1 → 1.6.3

package/README.md

@@ -1,16 +1,26 @@
-# 🔍 Sanity SEO Fields Plugin
+# sanity-plugin-seofields
 
 [![npm version](https://img.shields.io/npm/v/sanity-plugin-seofields.svg?color=brightgreen&label=npm)](https://www.npmjs.com/package/sanity-plugin-seofields)
 [![npm downloads](https://img.shields.io/npm/dm/sanity-plugin-seofields.svg?color=blue)](https://www.npmjs.com/package/sanity-plugin-seofields)
 [![license](https://img.shields.io/npm/l/sanity-plugin-seofields.svg?color=yellow)](./LICENSE)
 [![GitHub stars](https://img.shields.io/github/stars/hardik-143/sanity-plugin-seofields?style=social)](https://github.com/hardik-143/sanity-plugin-seofields)
 
-A Sanity Studio (v3/v4/v5) plugin to manage SEO fields — meta tags, Open Graph, Twitter Cards, robots directives, and structured data.
+**The only Sanity SEO plugin with a built-in audit dashboard.**
+
+Manage meta tags, Open Graph, Twitter Cards, robots directives, and 38 Schema.org/JSON-LD types — all inside Sanity Studio v3/v4/v5.
 
 📖 **[Full Documentation →](https://sanity-plugin-seofields.thehardik.in/docs)**
 
 ---
 
+> ⭐ If this plugin saves you time, please [leave a rating on the Sanity Plugin Directory](https://www.sanity.io/plugins/sanity-plugin-seofields), [star it on GitHub](https://github.com/hardik-143/sanity-plugin-seofields), and [leave a review on the docs site](https://sanity-plugin-seofields.thehardik.in/reviews). It helps other developers find it.
+
+<!-- Demo GIF: SEO Health Dashboard in action -->
+<!-- Add a screen recording here showing the SEO Health Dashboard scoring documents, the live SERP preview, and the Schema.org JSON-LD editor -->
+<!-- Recommended tools: LICEcap (Mac/Windows), Kap (Mac), or ScreenToGif (Windows) -->
+
+---
+
 ## Installation
 
 ```bash
@@ -91,7 +101,9 @@ seofields({
 
 ## SEO Health Dashboard
 
-An optional Studio tool that scores SEO completeness across all documents, highlights missing fields, and links directly to documents.
+> **This is the feature that sets this plugin apart from every other Sanity SEO plugin.**
+
+A built-in Studio tool that audits SEO completeness across all your documents at once — scores each document, highlights missing fields, and links directly to what needs fixing. No external tools. No leaving Studio.
 
 Requires a free license key — [get yours here](https://sanity-plugin-seofields.thehardik.in/get-license).
 

package/dist/SeoHealthDashboard-BEZVLLFG.js

@@ -0,0 +1,4 @@
+export { SeoHealthDashboard_default as default } from './chunk-HQTYQMP5.js';
+import './chunk-2NMEKWO5.js';
+//# sourceMappingURL=SeoHealthDashboard-BEZVLLFG.js.map
+//# sourceMappingURL=SeoHealthDashboard-BEZVLLFG.js.map

package/dist/{SeoHealthDashboard-PY5MKJCZ.js.map → SeoHealthDashboard-BEZVLLFG.js.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"SeoHealthDashboard-PY5MKJCZ.js"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"SeoHealthDashboard-BEZVLLFG.js"}

package/dist/SeoHealthDashboard-D3XU3CUB.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var chunkBHIZQLY7_cjs = require('./chunk-BHIZQLY7.cjs');
+require('./chunk-S367Y35J.cjs');
+
+
+
+module.exports = chunkBHIZQLY7_cjs.SeoHealthDashboard_default;
+//# sourceMappingURL=SeoHealthDashboard-D3XU3CUB.cjs.map
+//# sourceMappingURL=SeoHealthDashboard-D3XU3CUB.cjs.map

package/dist/{SeoHealthDashboard-FZTP4GS7.cjs.map → SeoHealthDashboard-D3XU3CUB.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"SeoHealthDashboard-FZTP4GS7.cjs"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"SeoHealthDashboard-D3XU3CUB.cjs"}

package/dist/{SeoHealthTool-Z3O6NEKF.cjs → SeoHealthTool-4VZMD4TR.cjs}

@@ -1,14 +1,14 @@
 'use strict';
 
-var chunk77U7CMJP_cjs = require('./chunk-77U7CMJP.cjs');
+var chunkBHIZQLY7_cjs = require('./chunk-BHIZQLY7.cjs');
 var chunkS367Y35J_cjs = require('./chunk-S367Y35J.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 
 var SeoHealthTool = (props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(chunk77U7CMJP_cjs.SeoHealthDashboard_default, chunkS367Y35J_cjs.__spreadValues({}, props));
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkBHIZQLY7_cjs.SeoHealthDashboard_default, chunkS367Y35J_cjs.__spreadValues({}, props));
 };
 var SeoHealthTool_default = SeoHealthTool;
 
 module.exports = SeoHealthTool_default;
-//# sourceMappingURL=SeoHealthTool-Z3O6NEKF.cjs.map
-//# sourceMappingURL=SeoHealthTool-Z3O6NEKF.cjs.map
+//# sourceMappingURL=SeoHealthTool-4VZMD4TR.cjs.map
+//# sourceMappingURL=SeoHealthTool-4VZMD4TR.cjs.map

package/dist/{SeoHealthTool-Z3O6NEKF.cjs.map → SeoHealthTool-4VZMD4TR.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SeoHealthTool.tsx"],"names":["jsx","SeoHealthDashboard_default"],"mappings":";;;;;;AAMA,IAAM,aAAA,GAAgB,CAAC,KAAA,KAAmC;AACxD,EAAA,uBAAOA,cAAA,CAACC,mFAAuB,KAAA,CAAO,CAAA;AACxC,CAAA;AAEA,IAAO,qBAAA,GAAQ","file":"SeoHealthTool-Z3O6NEKF.cjs","sourcesContent":["import SeoHealthDashboard, {SeoHealthDashboardProps} from './SeoHealthDashboard'\n\n/**\n * Sanity Tool component for the SEO Health Dashboard\n * This component wraps the SeoHealthDashboard for use as a custom tool in Sanity Studio\n */\nconst SeoHealthTool = (props: SeoHealthDashboardProps) => {\n  return <SeoHealthDashboard {...props} />\n}\n\nexport default SeoHealthTool\n"]}
+{"version":3,"sources":["../src/components/SeoHealthTool.tsx"],"names":["jsx","SeoHealthDashboard_default"],"mappings":";;;;;;AAMA,IAAM,aAAA,GAAgB,CAAC,KAAA,KAAmC;AACxD,EAAA,uBAAOA,cAAA,CAACC,mFAAuB,KAAA,CAAO,CAAA;AACxC,CAAA;AAEA,IAAO,qBAAA,GAAQ","file":"SeoHealthTool-4VZMD4TR.cjs","sourcesContent":["import SeoHealthDashboard, {SeoHealthDashboardProps} from './SeoHealthDashboard'\n\n/**\n * Sanity Tool component for the SEO Health Dashboard\n * This component wraps the SeoHealthDashboard for use as a custom tool in Sanity Studio\n */\nconst SeoHealthTool = (props: SeoHealthDashboardProps) => {\n  return <SeoHealthDashboard {...props} />\n}\n\nexport default SeoHealthTool\n"]}

package/dist/{SeoHealthTool-SKY7FAKK.js → SeoHealthTool-BSTYAKQS.js}

@@ -1,4 +1,4 @@
-import { SeoHealthDashboard_default } from './chunk-KFFDQX22.js';
+import { SeoHealthDashboard_default } from './chunk-HQTYQMP5.js';
 import { __spreadValues } from './chunk-2NMEKWO5.js';
 import { jsx } from 'react/jsx-runtime';
 
@@ -8,5 +8,5 @@ var SeoHealthTool = (props) => {
 var SeoHealthTool_default = SeoHealthTool;
 
 export { SeoHealthTool_default as default };
-//# sourceMappingURL=SeoHealthTool-SKY7FAKK.js.map
-//# sourceMappingURL=SeoHealthTool-SKY7FAKK.js.map
+//# sourceMappingURL=SeoHealthTool-BSTYAKQS.js.map
+//# sourceMappingURL=SeoHealthTool-BSTYAKQS.js.map

package/dist/{SeoHealthTool-SKY7FAKK.js.map → SeoHealthTool-BSTYAKQS.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SeoHealthTool.tsx"],"names":[],"mappings":";;;;AAMA,IAAM,aAAA,GAAgB,CAAC,KAAA,KAAmC;AACxD,EAAA,uBAAO,GAAA,CAAC,+CAAuB,KAAA,CAAO,CAAA;AACxC,CAAA;AAEA,IAAO,qBAAA,GAAQ","file":"SeoHealthTool-SKY7FAKK.js","sourcesContent":["import SeoHealthDashboard, {SeoHealthDashboardProps} from './SeoHealthDashboard'\n\n/**\n * Sanity Tool component for the SEO Health Dashboard\n * This component wraps the SeoHealthDashboard for use as a custom tool in Sanity Studio\n */\nconst SeoHealthTool = (props: SeoHealthDashboardProps) => {\n  return <SeoHealthDashboard {...props} />\n}\n\nexport default SeoHealthTool\n"]}
+{"version":3,"sources":["../src/components/SeoHealthTool.tsx"],"names":[],"mappings":";;;;AAMA,IAAM,aAAA,GAAgB,CAAC,KAAA,KAAmC;AACxD,EAAA,uBAAO,GAAA,CAAC,+CAAuB,KAAA,CAAO,CAAA;AACxC,CAAA;AAEA,IAAO,qBAAA,GAAQ","file":"SeoHealthTool-BSTYAKQS.js","sourcesContent":["import SeoHealthDashboard, {SeoHealthDashboardProps} from './SeoHealthDashboard'\n\n/**\n * Sanity Tool component for the SEO Health Dashboard\n * This component wraps the SeoHealthDashboard for use as a custom tool in Sanity Studio\n */\nconst SeoHealthTool = (props: SeoHealthDashboardProps) => {\n  return <SeoHealthDashboard {...props} />\n}\n\nexport default SeoHealthTool\n"]}

package/dist/{SeoPreview-LWSWTIF5.cjs → SeoPreview-PYYVZMY3.cjs}

@@ -166,7 +166,7 @@ var SeoPreview = (props) => {
     /* @__PURE__ */ jsxRuntime.jsxs(PreviewBody, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(SerpUrl, { children: finalUrl ? urlDisplay : "example.com \u203A page-url" }),
       /* @__PURE__ */ jsxRuntime.jsx(SerpTitle, { children: title && title.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        chunkIFDLKZET_cjs.truncate(title, Math.max(1, 60 - titleSuffix.length)),
+        chunkIFDLKZET_cjs.truncate(title, Math.max(1, 60 - (titleSuffix ? titleSuffix.length + 2 : 0))),
         titleSuffix && /* @__PURE__ */ jsxRuntime.jsxs(
           "span",
           {
@@ -185,5 +185,5 @@ var SeoPreview = (props) => {
 var SeoPreview_default = SeoPreview;
 
 module.exports = SeoPreview_default;
-//# sourceMappingURL=SeoPreview-LWSWTIF5.cjs.map
-//# sourceMappingURL=SeoPreview-LWSWTIF5.cjs.map
+//# sourceMappingURL=SeoPreview-PYYVZMY3.cjs.map
+//# sourceMappingURL=SeoPreview-PYYVZMY3.cjs.map

package/dist/SeoPreview-PYYVZMY3.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SeoPreview.tsx"],"names":["styled","useClient","useState","useEffect","useFormValue","jsx","Box","jsxs","Fragment","truncate"],"mappings":"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","file":"SeoPreview-PYYVZMY3.cjs","sourcesContent":["import {Box} from '@sanity/ui'\nimport {type ReactElement, useEffect, useState} from 'react'\nimport {StringInputProps, useClient, useFormValue} from 'sanity'\nimport styled from 'styled-components'\n\nimport {truncate} from '../utils/seoUtils'\n\nconst PreviewContainer = styled.div`\n  max-width: 600px;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  background: #ffffff;\n  border: 1px solid #dadce0;\n  border-radius: 8px;\n  overflow: hidden;\n`\n\nconst PreviewHeader = styled.div`\n  background: #f8f9fa;\n  padding: 12px 16px;\n  border-bottom: 1px solid #dadce0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n`\n\nconst PreviewBody = styled.div`\n  padding: 16px;\n`\n\nconst SerpUrl = styled.p`\n  margin: 0 0 4px;\n  color: #006621;\n  font-size: 13px;\n  line-height: 1.4;\n  word-break: break-word;\n`\n\nconst SerpTitle = styled.h3`\n  margin: 0 0 8px;\n  color: #1a0dab;\n  font-size: 18px;\n  font-weight: 500;\n  line-height: 1.4;\n  word-break: break-word;\n\n  &:hover {\n    text-decoration: underline;\n  }\n`\n\nconst SerpDescription = styled.p`\n  margin: 0;\n  color: #545454;\n  font-size: 14px;\n  line-height: 1.6;\n  word-break: break-word;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n`\n\nconst LiveIndicator = styled.span`\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: #4f46e5;\n  background: #f0f4ff;\n  padding: 4px 8px;\n  border-radius: 4px;\n`\n\nconst SeoPreview = (props: StringInputProps): ReactElement => {\n  const {path, schemaType} = props\n  const {options} = schemaType as {\n    options?: {\n      baseUrl?: string\n      apiVersion?: string\n      prefix?: ((doc: {_type?: string} & Record<string, unknown>) => string) | string\n      titleSuffix?: ((doc: {_type?: string} & Record<string, unknown>) => string) | string\n      titleSuffixInheritColor?: boolean\n      titleSuffixQuery?: string\n    }\n  }\n  const baseUrl = options?.baseUrl || 'https://www.example.com'\n  const prefixFunction = options?.prefix as\n    | ((doc: {_type?: string} & Record<string, unknown>) => string)\n    | undefined\n  const titleSuffixOption = options?.titleSuffix\n  const titleSuffixInheritColor = options?.titleSuffixInheritColor ?? false\n  const titleSuffixQuery = options?.titleSuffixQuery\n\n  const client = useClient({apiVersion: options?.apiVersion ?? '2024-01-01'})\n  const [groqTitleSuffix, setGroqTitleSuffix] = useState<string>('')\n\n  useEffect(() => {\n    if (!titleSuffixQuery) return\n    client\n      .fetch<string>(titleSuffixQuery)\n      .then((result) => {\n        setGroqTitleSuffix(result === null || result === undefined ? '' : String(result))\n      })\n      .catch(() => {\n        setGroqTitleSuffix('')\n      })\n  }, [titleSuffixQuery, client])\n  const parent = useFormValue([path[0]]) || {\n    title: '',\n    description: '',\n    canonicalUrl: '',\n  }\n  const rootDoc: {\n    slug?: {current: string}\n  } = useFormValue([]) || {\n    slug: {current: ''},\n  }\n  const slug: string = rootDoc?.slug?.current || ''\n\n  const {\n    title,\n    description,\n    canonicalUrl: url,\n  } = parent as {\n    title?: string\n    description?: string\n    canonicalUrl?: string\n  }\n\n  const getTitleSuffix = (): string => {\n    if (titleSuffixQuery) return groqTitleSuffix\n    if (!titleSuffixOption) return ''\n    if (typeof titleSuffixOption === 'function') {\n      return titleSuffixOption(rootDoc as {_type?: string} & Record<string, unknown>)\n    }\n    return titleSuffixOption\n  }\n  const titleSuffix: string = getTitleSuffix()\n\n  // Build full URL\n  const base = (url || baseUrl)?.replace(/\\/+$/, '')\n  const slugStr = String(slug || '').replace(/^\\/+/, '')\n  const pref = String(\n    prefixFunction ? prefixFunction(rootDoc as {slug?: {current: string}}) : '',\n  ).replace(/^\\/+|\\/+$/g, '')\n  const urlPath = [pref, slugStr].filter(Boolean).join('/')\n  const finalUrl = urlPath ? `${base}/${urlPath}` : base\n\n  // Extract domain for display\n  const domain = (() => {\n    try {\n      const u = new URL(finalUrl || base)\n      return u.hostname\n    } catch {\n      return 'example.com'\n    }\n  })()\n\n  // Format URL display with › separator\n  const urlDisplay = `${domain}${urlPath ? ` › ${urlPath.split('/').slice(-1)[0]}` : ''}`\n\n  return (\n    <Box padding={3}>\n      <PreviewContainer>\n        <PreviewHeader>\n          <span\n            style={{\n              fontSize: '11px',\n              color: '#5f6368',\n              textTransform: 'uppercase',\n              letterSpacing: '0.05em',\n            }}\n          >\n            Search Preview\n          </span>\n          <LiveIndicator>\n            <span\n              style={{\n                width: '4px',\n                height: '4px',\n                borderRadius: '50%',\n                backgroundColor: '#4f46e5',\n                display: 'inline-block',\n              }}\n            />\n            Live\n          </LiveIndicator>\n        </PreviewHeader>\n\n        <PreviewBody>\n          <SerpUrl>{finalUrl ? urlDisplay : 'example.com › page-url'}</SerpUrl>\n          <SerpTitle>\n            {title && title.length > 0 ? (\n              <>\n                {truncate(title, Math.max(1, 60 - (titleSuffix ? titleSuffix.length + 2 : 0)))}\n                {titleSuffix && (\n                  <span\n                    style={\n                      titleSuffixInheritColor ? undefined : {color: '#70757a', fontWeight: 400}\n                    }\n                  >\n                    | {titleSuffix}\n                  </span>\n                )}\n              </>\n            ) : (\n              'Your SEO Title will appear here'\n            )}\n          </SerpTitle>\n          <SerpDescription>\n            {description && description.length > 0\n              ? truncate(description, 160)\n              : 'Your meta description will show up here. Make it compelling!'}\n          </SerpDescription>\n        </PreviewBody>\n      </PreviewContainer>\n    </Box>\n  )\n}\n\nexport default SeoPreview\n"]}

package/dist/{SeoPreview-BQBKMYSG.js → SeoPreview-XVAZYHCL.js}

@@ -160,7 +160,7 @@ var SeoPreview = (props) => {
     /* @__PURE__ */ jsxs(PreviewBody, { children: [
       /* @__PURE__ */ jsx(SerpUrl, { children: finalUrl ? urlDisplay : "example.com \u203A page-url" }),
       /* @__PURE__ */ jsx(SerpTitle, { children: title && title.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        truncate(title, Math.max(1, 60 - titleSuffix.length)),
+        truncate(title, Math.max(1, 60 - (titleSuffix ? titleSuffix.length + 2 : 0))),
         titleSuffix && /* @__PURE__ */ jsxs(
           "span",
           {
@@ -179,5 +179,5 @@ var SeoPreview = (props) => {
 var SeoPreview_default = SeoPreview;
 
 export { SeoPreview_default as default };
-//# sourceMappingURL=SeoPreview-BQBKMYSG.js.map
-//# sourceMappingURL=SeoPreview-BQBKMYSG.js.map
+//# sourceMappingURL=SeoPreview-XVAZYHCL.js.map
+//# sourceMappingURL=SeoPreview-XVAZYHCL.js.map

package/dist/SeoPreview-XVAZYHCL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SeoPreview.tsx"],"names":[],"mappings":"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","file":"SeoPreview-XVAZYHCL.js","sourcesContent":["import {Box} from '@sanity/ui'\nimport {type ReactElement, useEffect, useState} from 'react'\nimport {StringInputProps, useClient, useFormValue} from 'sanity'\nimport styled from 'styled-components'\n\nimport {truncate} from '../utils/seoUtils'\n\nconst PreviewContainer = styled.div`\n  max-width: 600px;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  background: #ffffff;\n  border: 1px solid #dadce0;\n  border-radius: 8px;\n  overflow: hidden;\n`\n\nconst PreviewHeader = styled.div`\n  background: #f8f9fa;\n  padding: 12px 16px;\n  border-bottom: 1px solid #dadce0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n`\n\nconst PreviewBody = styled.div`\n  padding: 16px;\n`\n\nconst SerpUrl = styled.p`\n  margin: 0 0 4px;\n  color: #006621;\n  font-size: 13px;\n  line-height: 1.4;\n  word-break: break-word;\n`\n\nconst SerpTitle = styled.h3`\n  margin: 0 0 8px;\n  color: #1a0dab;\n  font-size: 18px;\n  font-weight: 500;\n  line-height: 1.4;\n  word-break: break-word;\n\n  &:hover {\n    text-decoration: underline;\n  }\n`\n\nconst SerpDescription = styled.p`\n  margin: 0;\n  color: #545454;\n  font-size: 14px;\n  line-height: 1.6;\n  word-break: break-word;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n`\n\nconst LiveIndicator = styled.span`\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: #4f46e5;\n  background: #f0f4ff;\n  padding: 4px 8px;\n  border-radius: 4px;\n`\n\nconst SeoPreview = (props: StringInputProps): ReactElement => {\n  const {path, schemaType} = props\n  const {options} = schemaType as {\n    options?: {\n      baseUrl?: string\n      apiVersion?: string\n      prefix?: ((doc: {_type?: string} & Record<string, unknown>) => string) | string\n      titleSuffix?: ((doc: {_type?: string} & Record<string, unknown>) => string) | string\n      titleSuffixInheritColor?: boolean\n      titleSuffixQuery?: string\n    }\n  }\n  const baseUrl = options?.baseUrl || 'https://www.example.com'\n  const prefixFunction = options?.prefix as\n    | ((doc: {_type?: string} & Record<string, unknown>) => string)\n    | undefined\n  const titleSuffixOption = options?.titleSuffix\n  const titleSuffixInheritColor = options?.titleSuffixInheritColor ?? false\n  const titleSuffixQuery = options?.titleSuffixQuery\n\n  const client = useClient({apiVersion: options?.apiVersion ?? '2024-01-01'})\n  const [groqTitleSuffix, setGroqTitleSuffix] = useState<string>('')\n\n  useEffect(() => {\n    if (!titleSuffixQuery) return\n    client\n      .fetch<string>(titleSuffixQuery)\n      .then((result) => {\n        setGroqTitleSuffix(result === null || result === undefined ? '' : String(result))\n      })\n      .catch(() => {\n        setGroqTitleSuffix('')\n      })\n  }, [titleSuffixQuery, client])\n  const parent = useFormValue([path[0]]) || {\n    title: '',\n    description: '',\n    canonicalUrl: '',\n  }\n  const rootDoc: {\n    slug?: {current: string}\n  } = useFormValue([]) || {\n    slug: {current: ''},\n  }\n  const slug: string = rootDoc?.slug?.current || ''\n\n  const {\n    title,\n    description,\n    canonicalUrl: url,\n  } = parent as {\n    title?: string\n    description?: string\n    canonicalUrl?: string\n  }\n\n  const getTitleSuffix = (): string => {\n    if (titleSuffixQuery) return groqTitleSuffix\n    if (!titleSuffixOption) return ''\n    if (typeof titleSuffixOption === 'function') {\n      return titleSuffixOption(rootDoc as {_type?: string} & Record<string, unknown>)\n    }\n    return titleSuffixOption\n  }\n  const titleSuffix: string = getTitleSuffix()\n\n  // Build full URL\n  const base = (url || baseUrl)?.replace(/\\/+$/, '')\n  const slugStr = String(slug || '').replace(/^\\/+/, '')\n  const pref = String(\n    prefixFunction ? prefixFunction(rootDoc as {slug?: {current: string}}) : '',\n  ).replace(/^\\/+|\\/+$/g, '')\n  const urlPath = [pref, slugStr].filter(Boolean).join('/')\n  const finalUrl = urlPath ? `${base}/${urlPath}` : base\n\n  // Extract domain for display\n  const domain = (() => {\n    try {\n      const u = new URL(finalUrl || base)\n      return u.hostname\n    } catch {\n      return 'example.com'\n    }\n  })()\n\n  // Format URL display with › separator\n  const urlDisplay = `${domain}${urlPath ? ` › ${urlPath.split('/').slice(-1)[0]}` : ''}`\n\n  return (\n    <Box padding={3}>\n      <PreviewContainer>\n        <PreviewHeader>\n          <span\n            style={{\n              fontSize: '11px',\n              color: '#5f6368',\n              textTransform: 'uppercase',\n              letterSpacing: '0.05em',\n            }}\n          >\n            Search Preview\n          </span>\n          <LiveIndicator>\n            <span\n              style={{\n                width: '4px',\n                height: '4px',\n                borderRadius: '50%',\n                backgroundColor: '#4f46e5',\n                display: 'inline-block',\n              }}\n            />\n            Live\n          </LiveIndicator>\n        </PreviewHeader>\n\n        <PreviewBody>\n          <SerpUrl>{finalUrl ? urlDisplay : 'example.com › page-url'}</SerpUrl>\n          <SerpTitle>\n            {title && title.length > 0 ? (\n              <>\n                {truncate(title, Math.max(1, 60 - (titleSuffix ? titleSuffix.length + 2 : 0)))}\n                {titleSuffix && (\n                  <span\n                    style={\n                      titleSuffixInheritColor ? undefined : {color: '#70757a', fontWeight: 400}\n                    }\n                  >\n                    | {titleSuffix}\n                  </span>\n                )}\n              </>\n            ) : (\n              'Your SEO Title will appear here'\n            )}\n          </SerpTitle>\n          <SerpDescription>\n            {description && description.length > 0\n              ? truncate(description, 160)\n              : 'Your meta description will show up here. Make it compelling!'}\n          </SerpDescription>\n        </PreviewBody>\n      </PreviewContainer>\n    </Box>\n  )\n}\n\nexport default SeoPreview\n"]}

package/dist/{chunk-77U7CMJP.cjs → chunk-BHIZQLY7.cjs}

@@ -1046,6 +1046,81 @@ var RenderLicenseInvalid = ({ licenseKey, validateLicense }) => /* @__PURE__ */
     }
   )
 ] }) }) });
+var LegacyBannerWrap = styled__default.default.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px 20px;
+  margin-bottom: 20px;
+  background: #fffbeb;
+  border-bottom: 1px solid #fde68a;
+  color: #92400e;
+  font-size: 13px;
+  line-height: 1.5;
+`;
+var LegacyBannerLink = styled__default.default.a`
+  display: inline-block;
+  padding: 5px 14px;
+  background: #f59e0b;
+  color: #fff;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  text-decoration: none;
+  &:hover {
+    background: #d97706;
+  }
+`;
+var ButtonWrapper = styled__default.default.div`
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-top: 6px;
+`;
+var VerifyButton = styled__default.default.button`
+  display: inline-block;
+  padding: 5px 14px;
+  background: #10b981;
+  color: #fff;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  text-decoration: none;
+  &:hover {
+    background: #059669;
+  }
+`;
+var RenderLegacyBanner = ({ upgradeUrl, cutoffDate, onVerifyUpgrade }) => {
+  const deadline = cutoffDate ? new Date(cutoffDate).toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric"
+  }) : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(LegacyBannerWrap, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "18px", lineHeight: 1 }, children: "\u26A0\uFE0F" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Legacy free access \u2014 upgrade required" }),
+      /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+      deadline ? `Your free beta access expires on ${deadline}. After that date, a paid license is required.` : "Your free beta access will be transitioning to paid. Upgrade now to keep access.",
+      /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+      /* @__PURE__ */ jsxRuntime.jsxs(ButtonWrapper, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          LegacyBannerLink,
+          {
+            href: upgradeUrl != null ? upgradeUrl : "https://sanity-plugin-seofields.thehardik.in/get-license",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: "Upgrade for $10/project \u2192"
+          }
+        ),
+        onVerifyUpgrade && /* @__PURE__ */ jsxRuntime.jsx(VerifyButton, { onClick: onVerifyUpgrade, children: "Already paid? Click here to verify your license \u2192" })
+      ] })
+    ] })
+  ] });
+};
 var scoreMetaTitle = (title) => {
   const issues = [];
   let score = 0;
@@ -1330,7 +1405,10 @@ var SeoHealthDashboard = ({
     return Array.from(groups.values());
   }, [allDeprecationWarnings]);
   const client = sanity.useClient({ apiVersion });
-  const [licenseStatus, setLicenseStatus] = react.useState("loading");
+  const [licenseStatus, setLicenseStatus] = react.useState(
+    "loading"
+  );
+  const [legacyInfo, setLegacyInfo] = react.useState({});
   const [documents, setDocuments] = react.useState([]);
   const [loading, setLoading] = react.useState(true);
   const [isRefreshing, setIsRefreshing] = react.useState(false);
@@ -1419,6 +1497,28 @@ var SeoHealthDashboard = ({
     }
     setCurrentPage(1);
   }, []);
+  const applyLicenseState = react.useCallback(
+    ({ valid, legacy = false, upgradeUrl, cutoffDate }) => {
+      if (valid && legacy) {
+        setLegacyInfo({ upgradeUrl, cutoffDate });
+        setLicenseStatus("legacy");
+        return;
+      }
+      setLegacyInfo({});
+      setLicenseStatus(valid ? "valid" : "invalid");
+    },
+    []
+  );
+  const readCachedLicenseState = react.useCallback((cacheKey) => {
+    try {
+      const cached = sessionStorage.getItem(cacheKey);
+      if (!cached) return null;
+      const parsed = JSON.parse(cached);
+      return Date.now() - parsed.ts < CACHE_TTL_MS ? parsed : null;
+    } catch (e) {
+      return null;
+    }
+  }, []);
   const validateLicense = react.useCallback(
     async (forceRefresh = false) => {
       var _a;
@@ -1439,16 +1539,10 @@ var SeoHealthDashboard = ({
         }
       }
       if (!forceRefresh) {
-        try {
-          const cached = sessionStorage.getItem(cacheKey);
-          if (cached) {
-            const { valid, ts } = JSON.parse(cached);
-            if (Date.now() - ts < CACHE_TTL_MS) {
-              setLicenseStatus(valid ? "valid" : "invalid");
-              return;
-            }
-          }
-        } catch (e) {
+        const cachedLicenseState = readCachedLicenseState(cacheKey);
+        if (cachedLicenseState) {
+          applyLicenseState(cachedLicenseState);
+          return;
         }
       }
       setLicenseStatus("loading");
@@ -1458,10 +1552,21 @@ var SeoHealthDashboard = ({
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({ licenseKey, projectId })
         });
+        const data = await res.json().catch(() => ({}));
         const valid = res.ok;
-        setLicenseStatus(valid ? "valid" : "invalid");
+        const legacy = valid && data.legacy === true;
+        applyLicenseState({ valid, legacy, upgradeUrl: data.upgradeUrl, cutoffDate: data.cutoffDate });
         try {
-          sessionStorage.setItem(cacheKey, JSON.stringify({ valid, ts: Date.now() }));
+          sessionStorage.setItem(
+            cacheKey,
+            JSON.stringify({
+              valid,
+              legacy,
+              upgradeUrl: data.upgradeUrl,
+              cutoffDate: data.cutoffDate,
+              ts: Date.now()
+            })
+          );
         } catch (e) {
         }
       } catch (e) {
@@ -1469,8 +1574,11 @@ var SeoHealthDashboard = ({
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [licenseKey, previewMode]
+    [applyLicenseState, licenseKey, previewMode, readCachedLicenseState]
   );
+  const handleVerifyUpgrade = react.useCallback(() => {
+    validateLicense(true);
+  }, [validateLicense]);
   react.useEffect(() => {
     validateLicense();
   }, [licenseKey, previewMode]);
@@ -2041,11 +2149,22 @@ var SeoHealthDashboard = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(DashboardContainer, { style: currentVars, children: [
     licenseStatus === "loading" && /* @__PURE__ */ jsxRuntime.jsx(RenderLicenseLoading, { text: loadingLicense }),
     licenseStatus === "invalid" && /* @__PURE__ */ jsxRuntime.jsx(RenderLicenseInvalid, { licenseKey, validateLicense }),
+    licenseStatus === "legacy" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        RenderLegacyBanner,
+        {
+          upgradeUrl: legacyInfo.upgradeUrl,
+          cutoffDate: legacyInfo.cutoffDate,
+          onVerifyUpgrade: handleVerifyUpgrade
+        }
+      ),
+      renderDashboardContent()
+    ] }),
     licenseStatus === "valid" && renderDashboardContent()
   ] });
 };
 var SeoHealthDashboard_default = SeoHealthDashboard;
 
 exports.SeoHealthDashboard_default = SeoHealthDashboard_default;
-//# sourceMappingURL=chunk-77U7CMJP.cjs.map
-//# sourceMappingURL=chunk-77U7CMJP.cjs.map
+//# sourceMappingURL=chunk-BHIZQLY7.cjs.map
+//# sourceMappingURL=chunk-BHIZQLY7.cjs.map