sanity-plugin-seofields 1.2.1 → 1.2.2

package/README.md

@@ -21,6 +21,7 @@ A comprehensive Sanity Studio v3 plugin to manage SEO fields like meta titles, d
 - ✅ **Validation**: Built-in character limits and best practices
 - 🎛️ **Field Visibility**: Hide sitewide fields on specific content types
 - 📊 **SEO Health Dashboard**: Studio-wide overview of SEO completeness with scores, issue highlights, and direct document links
+- 🗂️ **Desk Structure Pane**: Embed the dashboard inside the Structure tool with `createSeoHealthPane` — supports split-pane document editing
 
 ## 📦 Installation
 
@@ -531,6 +532,65 @@ seofields({
 
 > **Scoring logic:** each field earns its full points when a non-empty value is present, zero when missing. `query.groq` lets you control exactly which documents are included in the audit.
 
+## 🗂️ Desk Structure Pane
+
+Embed the SEO Health Dashboard **directly inside the Structure tool** as a pane with split-pane document editing — clicking any row opens the document editor to the right.
+
+### Import
+
+```typescript
+import {createSeoHealthPane} from 'sanity-plugin-seofields'
+```
+
+### Usage
+
+`createSeoHealthPane(S, options)` requires both arguments: Sanity's structure builder `S` and an options object with a required `licenseKey`. It returns a **`ComponentBuilder`** — use it **directly** as the `.child()` value.
+
+> ⚠️ **Do NOT wrap in `S.component()`.** The function already calls `S.component()` internally. Wrapping it again causes: _"component is required for component structure item"_.
+
+```typescript
+// sanity.config.ts
+import {defineConfig} from 'sanity'
+import {structureTool} from 'sanity/structure'
+import seofields, {createSeoHealthPane} from 'sanity-plugin-seofields'
+
+export default defineConfig({
+  plugins: [
+    seofields({healthDashboard: false}), // optional: hide the top-level tool tab
+    structureTool({
+      structure: (S) =>
+        S.list()
+          .title('Content')
+          .items([
+            S.documentTypeListItem('post').title('Posts'),
+            S.divider(),
+            S.listItem()
+              .title('SEO Health')
+              .child(
+                createSeoHealthPane(S, {
+                  licenseKey: 'SEOF-XXXX-XXXX-XXXX',
+                  query: `*[_type == "post" && defined(seo)]{
+                    _id, _type, title, slug, seo, _updatedAt
+                  }`,
+                  title: 'Posts SEO Health',
+                }),
+              ),
+          ]),
+    }),
+  ],
+})
+```
+
+### `createSeoHealthPane` options
+
+| Option       | Type      | Default        | Description                                                           |
+| ------------ | --------- | -------------- | --------------------------------------------------------------------- |
+| `licenseKey` | `string`  | **required**   | License key (format `SEOF-XXXX-XXXX-XXXX`).                           |
+| `query`      | `string`  | —              | GROQ query. Must return `_id`, `_type`, `title`, `seo`, `_updatedAt`. |
+| `title`      | `string`  | `'SEO Health'` | Pane title shown in breadcrumb                                        |
+| `openInPane` | `boolean` | `true`         | Enable row links that open the document editor as a pane to the right. |
+| `...rest`    | —         | —              | All other `SeoHealthDashboardProps`                                   |
+
 ## 🌐 Frontend Integration
 
 ### Next.js Example

package/dist/index.d.mts

@@ -1,14 +1,44 @@
+import type {ComponentBuilder} from 'sanity/structure'
 import {JSX} from 'react'
 import {ObjectDefinition} from 'sanity'
 import {Plugin as Plugin_2} from 'sanity'
 import {PreviewConfig} from 'sanity'
 import {default as React_2} from 'react'
 import {SchemaTypeDefinition} from 'sanity'
+import type {StructureBuilder} from 'sanity/structure'
 
 export declare type AllFieldKeys = SeoFieldKeys | openGraphFieldKeys | twitterFieldKeys
 
 export declare function allSchemas(config?: SeoFieldsPluginConfig): SchemaTypeDefinition[]
 
+/**
+ * Creates a desk-structure pane for the SEO Health Dashboard.
+ *
+ * Returns a **`ComponentBuilder`** with a built-in `.child()` resolver so that
+ * clicking any document row opens the document editor as a split pane to the right.
+ *
+ * Use it **directly** as the `.child()` value — do **not** wrap it in `S.component()`.
+ *
+ * ```ts
+ * // sanity.config.ts
+ * structure: (S) =>
+ *   S.list().items([
+ *     S.listItem()
+ *       .title('SEO Health')
+ *       .child(
+ *         createSeoHealthPane(S, {
+ *           licenseKey: 'SEOF-XXXX-XXXX-XXXX',
+ *           query: `*[_type == "post" && defined(seo)]{ _id, _type, title, slug, seo, _updatedAt }`,
+ *         })
+ *       ),
+ *   ])
+ * ```
+ */
+export declare function createSeoHealthPane(
+  optionsOrS: StructureBuilder,
+  optionsWhenS: SeoHealthPaneOptions,
+): ComponentBuilder
+
 export declare interface DocumentWithSeoHealth {
   _id: string
   _type: string
@@ -430,6 +460,18 @@ declare interface SeoHealthDashboardProps {
    * Defaults to `false`.
    */
   previewMode?: boolean
+  /**
+   * When `true`, clicking a document title opens the document editor as a split
+   * pane to the right, keeping the SEO Health pane visible on the left.
+   * This uses Sanity's pane router and requires the component to be rendered
+   * inside a desk-structure pane context (i.e. via `createSeoHealthPane`).
+   *
+   * When `false` (default), clicking navigates to the document via the standard
+   * intent-link system (full navigation).
+   *
+   * This is set to `true` automatically by `createSeoHealthPane`.
+   */
+  openInPane?: boolean
 }
 
 export declare interface SeoHealthMetrics {
@@ -438,6 +480,27 @@ export declare interface SeoHealthMetrics {
   issues: string[]
 }
 
+/**
+ * Options accepted by `createSeoHealthPane`.
+ * All props from `SeoHealthDashboardProps` are supported.
+ *
+ * `licenseKey` is **required** — the dashboard will not render without it.
+ */
+export declare interface SeoHealthPaneOptions extends Omit<SeoHealthDashboardProps, 'customQuery'> {
+  /** Required license key (format: `SEOF-XXXX-XXXX-XXXX`). */
+  licenseKey: string
+  /**
+   * A fully custom GROQ query used to fetch documents for the dashboard.
+   * The query must return documents with at least: `_id`, `_type`, `title`, `seo`, `_updatedAt`.
+   *
+   * Takes precedence over `queryTypes` when both are provided.
+   *
+   * @example
+   * query: `*[_type in ["post","page"] && defined(seo)]{ _id, _type, title, slug, seo, _updatedAt }`
+   */
+  query?: string
+}
+
 export declare type SeoHealthStatus = 'excellent' | 'good' | 'fair' | 'poor' | 'missing'
 
 /**

package/dist/index.d.ts

@@ -1,14 +1,44 @@
+import type {ComponentBuilder} from 'sanity/structure'
 import {JSX} from 'react'
 import {ObjectDefinition} from 'sanity'
 import {Plugin as Plugin_2} from 'sanity'
 import {PreviewConfig} from 'sanity'
 import {default as React_2} from 'react'
 import {SchemaTypeDefinition} from 'sanity'
+import type {StructureBuilder} from 'sanity/structure'
 
 export declare type AllFieldKeys = SeoFieldKeys | openGraphFieldKeys | twitterFieldKeys
 
 export declare function allSchemas(config?: SeoFieldsPluginConfig): SchemaTypeDefinition[]
 
+/**
+ * Creates a desk-structure pane for the SEO Health Dashboard.
+ *
+ * Returns a **`ComponentBuilder`** with a built-in `.child()` resolver so that
+ * clicking any document row opens the document editor as a split pane to the right.
+ *
+ * Use it **directly** as the `.child()` value — do **not** wrap it in `S.component()`.
+ *
+ * ```ts
+ * // sanity.config.ts
+ * structure: (S) =>
+ *   S.list().items([
+ *     S.listItem()
+ *       .title('SEO Health')
+ *       .child(
+ *         createSeoHealthPane(S, {
+ *           licenseKey: 'SEOF-XXXX-XXXX-XXXX',
+ *           query: `*[_type == "post" && defined(seo)]{ _id, _type, title, slug, seo, _updatedAt }`,
+ *         })
+ *       ),
+ *   ])
+ * ```
+ */
+export declare function createSeoHealthPane(
+  optionsOrS: StructureBuilder,
+  optionsWhenS: SeoHealthPaneOptions,
+): ComponentBuilder
+
 export declare interface DocumentWithSeoHealth {
   _id: string
   _type: string
@@ -430,6 +460,18 @@ declare interface SeoHealthDashboardProps {
    * Defaults to `false`.
    */
   previewMode?: boolean
+  /**
+   * When `true`, clicking a document title opens the document editor as a split
+   * pane to the right, keeping the SEO Health pane visible on the left.
+   * This uses Sanity's pane router and requires the component to be rendered
+   * inside a desk-structure pane context (i.e. via `createSeoHealthPane`).
+   *
+   * When `false` (default), clicking navigates to the document via the standard
+   * intent-link system (full navigation).
+   *
+   * This is set to `true` automatically by `createSeoHealthPane`.
+   */
+  openInPane?: boolean
 }
 
 export declare interface SeoHealthMetrics {
@@ -438,6 +480,27 @@ export declare interface SeoHealthMetrics {
   issues: string[]
 }
 
+/**
+ * Options accepted by `createSeoHealthPane`.
+ * All props from `SeoHealthDashboardProps` are supported.
+ *
+ * `licenseKey` is **required** — the dashboard will not render without it.
+ */
+export declare interface SeoHealthPaneOptions extends Omit<SeoHealthDashboardProps, 'customQuery'> {
+  /** Required license key (format: `SEOF-XXXX-XXXX-XXXX`). */
+  licenseKey: string
+  /**
+   * A fully custom GROQ query used to fetch documents for the dashboard.
+   * The query must return documents with at least: `_id`, `_type`, `title`, `seo`, `_updatedAt`.
+   *
+   * Takes precedence over `queryTypes` when both are provided.
+   *
+   * @example
+   * query: `*[_type in ["post","page"] && defined(seo)]{ _id, _type, title, slug, seo, _updatedAt }`
+   */
+  query?: string
+}
+
 export declare type SeoHealthStatus = 'excellent' | 'good' | 'fair' | 'poor' | 'missing'
 
 /**

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var o = require("react"), sanity = require("sanity"), jsxRuntime = require("react/jsx-runtime"), router = require("sanity/router"), ui = require("@sanity/ui");
+var o = require("react"), sanity = require("sanity"), jsxRuntime = require("react/jsx-runtime"), router = require("sanity/router"), structure = require("sanity/structure"), ui = require("@sanity/ui");
 function _interopDefaultCompat(e) {
   return e && typeof e == "object" && "default" in e ? e : { default: e };
 }
@@ -1192,16 +1192,9 @@ const DashboardContainer = dt.div`
   color: #6b7280;
 `, StatsGrid = dt.div`
   display: grid;
-  grid-template-columns: repeat(6, 1fr);
+  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
   gap: 14px;
   margin-bottom: 20px;
-
-  @media (max-width: 1100px) {
-    grid-template-columns: repeat(3, 1fr);
-  }
-  @media (max-width: 600px) {
-    grid-template-columns: repeat(2, 1fr);
-  }
 `, StatCard = dt.div`
   background: #ffffff;
   border-radius: 10px;
@@ -1334,6 +1327,11 @@ const DashboardContainer = dt.div`
   align-items: center;
   gap: 4px;
   flex-wrap: wrap;
+  min-width: 0;
+`, TitleCell = dt.div`
+  min-width: 0;
+  overflow: hidden;
+  flex: 1;
 `, ColType = dt.div`
   flex: 0.8;
   min-width: 80px;
@@ -1532,6 +1530,34 @@ const DashboardContainer = dt.div`
 }) => {
   const { onClick, href } = router.useIntentLink({ intent: "edit", params: { id, type } });
   return /* @__PURE__ */ jsxRuntime.jsx(DocTitleLink, { href, onClick, title: "Open document", children });
+}, PaneLinkWrapper = dt.span`
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+
+  a {
+    font-size: 13px;
+    font-weight: 600;
+    color: #4f46e5;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-decoration: none;
+    display: block;
+    transition: color 0.15s;
+
+    &:hover {
+      color: #4338ca;
+      text-decoration: underline;
+    }
+  }
+`, DocTitleAnchorPane = ({
+  id,
+  type,
+  children
+}) => {
+  const { ChildLink } = structure.usePaneRouter();
+  return /* @__PURE__ */ jsxRuntime.jsx(PaneLinkWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(ChildLink, { childId: id, childParameters: { type }, children }) });
 }, DocBadgeRenderer = ({ doc, docBadge }) => {
   const badge = docBadge(doc);
   return badge ? /* @__PURE__ */ jsxRuntime.jsx(CustomBadge, { $bgColor: badge.bgColor, $textColor: badge.textColor, $fontSize: badge.fontSize, children: badge.label }) : null;
@@ -1773,7 +1799,8 @@ const DashboardContainer = dt.div`
   loadingLicense,
   loadingDocuments,
   noDocuments,
-  previewMode = !1
+  previewMode = !1,
+  openInPane = !1
 }) => {
   const client = sanity.useClient({ apiVersion }), [licenseStatus, setLicenseStatus] = o.useState("loading"), [documents, setDocuments] = o.useState([]), [loading, setLoading] = o.useState(!0), [searchQuery, setSearchQuery] = o.useState(""), [filterStatus, setFilterStatus] = o.useState("all"), [filterType, setFilterType] = o.useState("all"), [sortBy, setSortBy] = o.useState("score"), [activePopover, setActivePopover] = o.useState(null), VALIDATION_ENDPOINT = "https://sanity-plugin-seofields.thehardik.in/api/validate-license", CACHE_TTL_MS = 3600 * 1e3, validateLicense = o.useCallback(
     async (forceRefresh = !1) => {
@@ -2058,8 +2085,8 @@ export default defineConfig({
           ] }),
           filteredAndSortedDocs.map((doc) => /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(ColTitle, { children: /* @__PURE__ */ jsxRuntime.jsxs(TitleWrapper, { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(DocTitleAnchor, { id: doc._id, type: doc._type, children: doc.title || "Untitled" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(TitleCell, { children: [
+                openInPane ? /* @__PURE__ */ jsxRuntime.jsx(DocTitleAnchorPane, { id: doc._id, type: doc._type, children: doc.title || "Untitled" }) : /* @__PURE__ */ jsxRuntime.jsx(DocTitleAnchor, { id: doc._id, type: doc._type, children: doc.title || "Untitled" }),
                 showDocumentId && /* @__PURE__ */ jsxRuntime.jsx(DocId, { children: doc._id })
               ] }),
               docBadge && /* @__PURE__ */ jsxRuntime.jsx(
@@ -3121,9 +3148,17 @@ const resolveDashboardConfig = (healthDashboard) => {
     }
   };
 });
+function createSeoHealthPane(optionsOrS, optionsWhenS) {
+  const S2 = optionsOrS, { query, openInPane = !0, title: paneTitle, ...rest } = optionsWhenS ?? {}, SeoHealthPane = () => /* @__PURE__ */ jsxRuntime.jsx(SeoHealthDashboard, { customQuery: query, openInPane, title: paneTitle, ...rest });
+  return SeoHealthPane.displayName = "SeoHealthPane", S2.component(SeoHealthPane).title(paneTitle ?? "SEO Health").child((docId, { params }) => {
+    const builder = S2.document().documentId(docId);
+    return params?.type ? builder.schemaType(params.type) : builder;
+  });
+}
 exports.SeoHealthDashboard = SeoHealthDashboard;
 exports.SeoHealthTool = SeoHealthTool;
 exports.allSchemas = types;
+exports.createSeoHealthPane = createSeoHealthPane;
 exports.default = seofields;
 exports.metaAttributeSchema = metaAttribute;
 exports.metaTagSchema = metaTag;