sanity-plugin-references 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Félix Péault (Flayks)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,118 @@
+<h2 align="center">
+  🔗 References Plugin for Sanity 🔗
+</h2>
+<p align="center">
+  See which documents reference the current document in your Sanity Studio.<br/>
+  Displays a badge with the reference count and a custom pane with the full list.
+</p>
+
+## Features
+
+- **Reference Badge**: Shows count of documents referencing the current document
+- **References Tab**: Lists all referencing documents with:
+  - 🔍 **Search** by title or document type
+  - ⬇️ **Sorting** by updated date, type, or title (ascending/descending)
+  - 📊 **Live Count** of filtered vs total documents
+  - 🚀 **Click to Navigate** to any referencing document
+
+## Installation
+
+```sh
+# npm
+npm i sanity-plugin-references
+
+# yarn
+yarn add sanity-plugin-references
+
+# pnpm
+pnpm add sanity-plugin-references
+
+# bun
+bun add sanity-plugin-references
+```
+
+## Usage
+
+### Basic Setup
+
+```ts
+import { defineConfig } from 'sanity'
+import { references } from 'sanity-plugin-references'
+
+export default defineConfig({
+  plugins: [references()],
+})
+```
+
+This adds a **reference count badge** to all documents showing how many other documents reference them.
+
+### Adding the References Tab
+
+Add a full References tab with search, filters, and sorting:
+
+```ts
+import { structureTool } from 'sanity/structure'
+import { references, referencesView } from 'sanity-plugin-references'
+
+export default defineConfig({
+  plugins: [
+    references(),
+    structureTool({
+      defaultDocumentNode: (S) => S.document().views([
+        S.view.form(),
+        referencesView(S),
+      ]),
+    }),
+  ],
+})
+```
+
+### Options
+
+**Exclude document types** from showing the badge:
+
+```ts
+references({
+  exclude: ['media.tag', 'sanity.imageAsset'],
+})
+```
+
+**Customize the tab** title or icon:
+
+```ts
+referencesView(S, { title: 'Incoming Links', icon: SomeIcon })
+```
+
+**Show tab only for specific types** by checking `schemaType` in `defaultDocumentNode`.
+
+## API
+
+### `references(config?)`
+
+Main plugin function. Adds reference badges to all documents.
+
+- `exclude?: string[]` - Document types to exclude from showing the badge
+
+### `referencesView(S, options?)`
+
+Creates a References view for Structure Builder.
+
+- `title?: string` - Tab title (default: `'References'`)
+- `icon?: ComponentType` - Tab icon (default: `LinkIcon`)
+
+### Components
+
+- **`ReferencesPane`** - Raw component for `S.view.component()` (use `referencesView()` instead)
+- **`ReferencesBadge`** - Badge component (automatically included via `references()` plugin)
+
+## License
+
+[MIT](LICENSE) © Félix Péault (Flayks)
+
+## Develop & test
+
+This plugin uses [@sanity/plugin-kit](https://github.com/sanity-io/plugin-kit)
+with default configuration for build & watch scripts.
+
+See [Testing a plugin in Sanity Studio](https://github.com/sanity-io/plugin-kit#testing-a-plugin-in-sanity-studio)
+on how to run this plugin with hotreload in the studio.

package/dist/index.d.ts

@@ -0,0 +1,123 @@
+import type {ComponentType} from 'react'
+import {ComponentViewBuilder} from 'sanity/structure'
+import {DocumentBadgeComponent} from 'sanity'
+import {Plugin as Plugin_2} from 'sanity'
+import {LinkIcon as ReferencesIcon} from '@sanity/icons'
+import type {StructureBuilder} from 'sanity/structure'
+import {UserViewComponent} from 'sanity/structure'
+
+/**
+ * Plugin that shows documents referencing the current document.
+ * Displays a badge with the reference count.
+ *
+ * To add the References tab to your documents, use the Structure Builder API
+ * with the exported `ReferencesPane` component.
+ *
+ * @example Basic usage (badge only)
+ * ```ts
+ * // sanity.config.ts
+ * import { references } from 'sanity-plugin-references'
+ *
+ * export default defineConfig({
+ *   plugins: [references()],
+ * })
+ * ```
+ *
+ * @example Exclude specific document types from showing the badge
+ * ```ts
+ * references({ exclude: ['media.tag', 'sanity.imageAsset'] })
+ * ```
+ *
+ * @example Adding the References tab with Structure Builder
+ * ```ts
+ * // sanity.config.ts
+ * import { structureTool } from 'sanity/structure'
+ * import { references, ReferencesPane } from 'sanity-plugin-references'
+ * import { LinkIcon } from '@sanity/icons'
+ *
+ * export default defineConfig({
+ *   plugins: [
+ *     references(),
+ *     structureTool({
+ *       defaultDocumentNode: (S, { schemaType }) => {
+ *         return S.document().views([
+ *           S.view.form(),
+ *           S.view.component(ReferencesPane).title('References').icon(LinkIcon),
+ *         ])
+ *       },
+ *     }),
+ *   ],
+ * })
+ * ```
+ *
+ * @example Using the referencesView helper
+ * ```ts
+ * import { references, referencesView } from 'sanity-plugin-references'
+ *
+ * structureTool({
+ *   defaultDocumentNode: (S) => S.document().views([
+ *     S.view.form(),
+ *     referencesView(S),
+ *   ]),
+ * })
+ * ```
+ */
+export declare const references: Plugin_2<void | ReferencesConfig>
+
+/**
+ * Badge component that displays the count of documents referencing the current document
+ */
+export declare const ReferencesBadge: DocumentBadgeComponent
+
+export declare interface ReferencesConfig {
+  /**
+   * Document types to exclude from showing the References badge
+   * @example ['media.tag', 'sanity.imageAsset']
+   */
+  exclude?: string[]
+}
+
+export {ReferencesIcon}
+
+/**
+ * Structure Builder view component that displays documents referencing the current document.
+ * Use this component with S.view.component() in your structure configuration.
+ *
+ * @example
+ * ```ts
+ * import { references, referencesView } from 'sanity-plugin-references'
+ * import { LinkIcon } from '@sanity/icons'
+ *
+ * S.document().views([
+ *   S.view.form(),
+ *   referencesView(S),
+ * ])
+ * ```
+ */
+export declare const ReferencesPane: UserViewComponent
+
+/**
+ * Helper to create a References view for Structure Builder.
+ *
+ * @example
+ * ```ts
+ * S.document().views([
+ *   S.view.form(),
+ *   referencesView(S),
+ * ])
+ * ```
+ *
+ * @example With custom title and icon
+ * ```ts
+ * referencesView(S, { title: 'Incoming Links', icon: MyIcon })
+ * ```
+ */
+export declare function referencesView(
+  S: StructureBuilder,
+  options?: {
+    title?: string
+    icon?: ComponentType
+  },
+): ComponentViewBuilder
+
+export {}

package/dist/index.js

@@ -0,0 +1,188 @@
+import { useClient, useSchema, Preview, definePlugin } from "sanity";
+import { LinkIcon, SortIcon, SearchIcon } from "@sanity/icons";
+import { LinkIcon as LinkIcon2 } from "@sanity/icons";
+import { useState, useEffect, useMemo, useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRouter } from "sanity/router";
+import { Flex, Spinner, Card, Text, Stack, Select, Inline, Radio, Box, Button, TextInput, Badge } from "@sanity/ui";
+const ReferencesBadge = (props) => {
+  const { id, published, draft } = props, documentId = published?._id || draft?._id || id, [count, setCount] = useState(null), client = useClient({ apiVersion: "2026-01-05" });
+  return useEffect(() => {
+    if (!documentId) return;
+    const cleanId = documentId.replace(/^drafts\./, "");
+    client.fetch(
+      /* groq */
+      'count(*[references($id) && !(_id in path("drafts.**"))])',
+      { id: cleanId }
+    ).then(setCount);
+    const subscription = client.listen(
+      /* groq */
+      "*[references($id)]",
+      { id: cleanId }
+    ).subscribe(() => {
+      client.fetch(
+        /* groq */
+        'count(*[references($id) && !(_id in path("drafts.**"))])',
+        { id: cleanId }
+      ).then(setCount);
+    });
+    return () => subscription.unsubscribe();
+  }, [documentId, client]), count === null || count === 0 ? null : {
+    label: `${count} reference${count > 1 ? "s" : ""}`,
+    title: `${count} document${count > 1 ? "s" : ""} reference this. See "References" tab.`,
+    color: "primary"
+  };
+}, ReferencesPane = (props) => {
+  const { documentId } = props, client = useClient({ apiVersion: "2026-01-05" }), schema = useSchema(), router = useRouter(), [documents, setDocuments] = useState([]), [loading, setLoading] = useState(!0), [error, setError] = useState(null), [searchQuery, setSearchQuery] = useState(""), [typeFilter, setTypeFilter] = useState("all"), [sortBy, setSortBy] = useState("updatedAt"), [sortDesc, setSortDesc] = useState(!0), cleanId = useMemo(() => documentId.replace(/^drafts\./, ""), [documentId]), fetchDocuments = useCallback(async () => {
+    if (cleanId) {
+      setLoading(!0), setError(null);
+      try {
+        const results = await client.fetch(
+          `*[references($id) && !(_id in path("drafts.**"))] {
+                    _id, _type, _updatedAt, "title": coalesce(title, name, "Untitled")
+                } | order(_updatedAt desc)`,
+          { id: cleanId }
+        );
+        setDocuments(results);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Failed to fetch references");
+      } finally {
+        setLoading(!1);
+      }
+    }
+  }, [client, cleanId]);
+  useEffect(() => {
+    fetchDocuments();
+  }, [fetchDocuments]);
+  const documentTypes = useMemo(
+    () => [...new Set(documents.map((doc) => doc._type))].sort(),
+    [documents]
+  ), filteredDocuments = useMemo(() => {
+    const query = searchQuery.toLowerCase().trim();
+    return documents.filter((doc) => typeFilter === "all" || doc._type === typeFilter).filter((doc) => !query || doc.title?.toLowerCase().includes(query) || doc._type.toLowerCase().includes(query)).sort((a, b) => {
+      const cmp = sortBy === "updatedAt" ? new Date(a._updatedAt).getTime() - new Date(b._updatedAt).getTime() : sortBy === "type" ? a._type.localeCompare(b._type) : (a.title || "").localeCompare(b.title || "");
+      return sortDesc ? -cmp : cmp;
+    });
+  }, [documents, typeFilter, searchQuery, sortBy, sortDesc]), getSchemaType = useCallback((type) => schema.get(type), [schema]);
+  if (loading)
+    return /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", padding: 5, children: /* @__PURE__ */ jsx(Spinner, { muted: !0 }) });
+  if (error)
+    return /* @__PURE__ */ jsx(Card, { padding: 4, tone: "critical", children: /* @__PURE__ */ jsx(Text, { children: error }) });
+  if (documents.length === 0)
+    return /* @__PURE__ */ jsx(Card, { padding: 5, children: /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "center", direction: "column", gap: 3, children: [
+      /* @__PURE__ */ jsx(LinkIcon, { style: { fontSize: 32, opacity: 0.4 } }),
+      /* @__PURE__ */ jsx(Text, { muted: !0, children: "No document reference this one" })
+    ] }) });
+  const useSelectForFilters = documentTypes.length > 5;
+  return /* @__PURE__ */ jsxs(Stack, { space: 0, style: { height: "100%" }, children: [
+    /* @__PURE__ */ jsx(Card, { borderBottom: !0, padding: 2, children: /* @__PURE__ */ jsxs(Flex, { gap: 2, align: "center", wrap: "nowrap", children: [
+      useSelectForFilters ? /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: typeFilter,
+          onChange: (e) => setTypeFilter(e.currentTarget.value),
+          fontSize: 1,
+          padding: 2,
+          style: { minWidth: 150, flexShrink: 0 },
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "all", children: "All types" }),
+            documentTypes.map((type) => {
+              const schemaType = getSchemaType(type);
+              return /* @__PURE__ */ jsx("option", { value: type, children: schemaType?.title || type }, type);
+            })
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs(Inline, { space: 2, style: { flexShrink: 0 }, children: [
+        /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 1, as: "label", style: { cursor: "pointer", whiteSpace: "nowrap" }, children: [
+          /* @__PURE__ */ jsx(Radio, { checked: typeFilter === "all", onChange: () => setTypeFilter("all") }),
+          /* @__PURE__ */ jsx(Text, { size: 1, weight: typeFilter === "all" ? "semibold" : "regular", children: "All" })
+        ] }),
+        documentTypes.map((type) => {
+          const schemaType = getSchemaType(type);
+          return /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 1, as: "label", style: { cursor: "pointer", whiteSpace: "nowrap" }, children: [
+            /* @__PURE__ */ jsx(Radio, { checked: typeFilter === type, onChange: () => setTypeFilter(type) }),
+            /* @__PURE__ */ jsx(Text, { size: 1, weight: typeFilter === type ? "semibold" : "regular", children: schemaType?.title || type })
+          ] }, type);
+        })
+      ] }),
+      /* @__PURE__ */ jsx(Box, { flex: 1 }),
+      /* @__PURE__ */ jsxs(Flex, { gap: 1, style: { flexShrink: 0 }, children: [
+        /* @__PURE__ */ jsxs(Select, { value: sortBy, onChange: (e) => setSortBy(e.currentTarget.value), fontSize: 1, padding: 2, children: [
+          /* @__PURE__ */ jsx("option", { value: "updatedAt", children: "Updated" }),
+          /* @__PURE__ */ jsx("option", { value: "type", children: "Type" }),
+          /* @__PURE__ */ jsx("option", { value: "title", children: "Title" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            icon: SortIcon,
+            mode: "ghost",
+            onClick: () => setSortDesc((d) => !d),
+            title: sortDesc ? "Descending" : "Ascending",
+            fontSize: 1,
+            padding: 2
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(Card, { borderBottom: !0, paddingX: 3, paddingY: 0, children: /* @__PURE__ */ jsxs(Flex, { align: "stretch", style: { minHeight: 33 }, children: [
+      /* @__PURE__ */ jsx(Flex, { align: "center", paddingY: 2, style: { flexShrink: 0 }, children: /* @__PURE__ */ jsxs(Text, { size: 1, muted: !0, children: [
+        filteredDocuments.length,
+        " of ",
+        documents.length,
+        " document",
+        documents.length !== 1 ? "s" : ""
+      ] }) }),
+      /* @__PURE__ */ jsx(Box, { style: { flex: 1, minWidth: 180, borderLeft: "1px solid var(--card-border-color)", paddingLeft: 4, marginLeft: 12, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          icon: SearchIcon,
+          placeholder: "Search...",
+          value: searchQuery,
+          onChange: (e) => setSearchQuery(e.currentTarget.value),
+          fontSize: 1,
+          padding: 2,
+          border: !1,
+          style: { boxShadow: "none", width: "100%" }
+        }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ jsx(Box, { style: { flex: 1, overflow: "auto" }, children: /* @__PURE__ */ jsx(Stack, { space: 1, padding: 2, children: filteredDocuments.length === 0 ? /* @__PURE__ */ jsx(Card, { padding: 4, children: /* @__PURE__ */ jsx(Text, { muted: !0, align: "center", children: "No documents match your filters" }) }) : filteredDocuments.map((doc) => {
+      const schemaType = getSchemaType(doc._type);
+      return /* @__PURE__ */ jsx(
+        Card,
+        {
+          as: "button",
+          padding: 2,
+          radius: 2,
+          onClick: () => router.navigateIntent("edit", { id: doc._id, type: doc._type }),
+          style: { cursor: "pointer", textAlign: "left", width: "100%" },
+          children: /* @__PURE__ */ jsxs(Flex, { gap: 3, align: "center", children: [
+            /* @__PURE__ */ jsx(Box, { flex: 1, children: schemaType ? /* @__PURE__ */ jsx(Preview, { schemaType, value: doc, layout: "default" }) : /* @__PURE__ */ jsx(Text, { weight: "medium", children: doc.title }) }),
+            /* @__PURE__ */ jsx(Badge, { tone: "primary", fontSize: 0, children: schemaType?.title || doc._type })
+          ] })
+        },
+        doc._id
+      );
+    }) }) })
+  ] });
+}, references = definePlugin((config) => {
+  const excludeTypes = config?.exclude || [];
+  return {
+    name: "references",
+    document: {
+      badges: (prev, context) => excludeTypes.includes(context.schemaType) ? prev : [...prev, ReferencesBadge]
+    }
+  };
+});
+function referencesView(S, options) {
+  return S.view.component(ReferencesPane).title(options?.title || "References").icon(options?.icon || LinkIcon);
+}
+export {
+  ReferencesBadge,
+  LinkIcon2 as ReferencesIcon,
+  ReferencesPane,
+  references,
+  referencesView
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/badge.tsx","../src/pane.tsx","../src/index.ts"],"sourcesContent":["import { useState, useEffect } from 'react'\nimport { type DocumentBadgeComponent, useClient } from 'sanity'\n\n/**\n * Badge component that displays the count of documents referencing the current document\n */\nexport const ReferencesBadge: DocumentBadgeComponent = (props) => {\n    const { id, published, draft } = props\n    const documentId = published?._id || draft?._id || id\n    const [count, setCount] = useState<number | null>(null)\n\n    const client = useClient({ apiVersion: '2026-01-05' })\n\n    useEffect(() => {\n        if (!documentId) return\n\n        const cleanId = documentId.replace(/^drafts\\./, '')\n\n        // Get count of documents referencing this document\n        client.fetch<number>(\n            /* groq */`count(*[references($id) && !(_id in path(\"drafts.**\"))])`,\n            { id: cleanId }\n        ).then(setCount)\n\n        // Subscribe to changes\n        const subscription = client.listen(\n            /* groq */`*[references($id)]`,\n            { id: cleanId }\n        ).subscribe(() => {\n            client.fetch<number>(\n                /* groq */`count(*[references($id) && !(_id in path(\"drafts.**\"))])`,\n                { id: cleanId }\n            ).then(setCount)\n        })\n\n        return () => subscription.unsubscribe()\n    }, [documentId, client])\n\n    // Don't show badge if no references or still loading\n    if (count === null || count === 0) {\n        return null\n    }\n\n    return {\n        label: `${count} reference${count > 1 ? 's' : ''}`,\n        title: `${count} document${count > 1 ? 's' : ''} reference this. See \"References\" tab.`,\n        color: 'primary',\n    }\n}\n","import { useMemo, useState, useEffect, useCallback } from 'react'\nimport { useClient, useSchema, Preview } from 'sanity'\nimport { type UserViewComponent } from 'sanity/structure'\nimport { useRouter } from 'sanity/router'\nimport { Box, Card, Flex, Inline, Stack, Text, TextInput, Select, Spinner, Button, Badge, Radio } from '@sanity/ui'\nimport { SearchIcon, SortIcon, LinkIcon } from '@sanity/icons'\n\ninterface ReferencingDocument {\n    _id: string\n    _type: string\n    _updatedAt: string\n    title?: string\n}\ntype SortOption = 'updatedAt' | 'type' | 'title'\n\n/**\n * Structure Builder view component that displays documents referencing the current document.\n * Use this component with S.view.component() in your structure configuration.\n *\n * @example\n * ```ts\n * import { references, referencesView } from 'sanity-plugin-references'\n * import { LinkIcon } from '@sanity/icons'\n *\n * S.document().views([\n *   S.view.form(),\n *   referencesView(S),\n * ])\n * ```\n */\nexport const ReferencesPane: UserViewComponent = (props) => {\n    const { documentId } = props\n    const client = useClient({ apiVersion: '2026-01-05' })\n    const schema = useSchema()\n    const router = useRouter()\n\n    const [documents, setDocuments] = useState<ReferencingDocument[]>([])\n    const [loading, setLoading] = useState(true)\n    const [error, setError] = useState<string | null>(null)\n    const [searchQuery, setSearchQuery] = useState('')\n    const [typeFilter, setTypeFilter] = useState('all')\n    const [sortBy, setSortBy] = useState<SortOption>('updatedAt')\n    const [sortDesc, setSortDesc] = useState(true)\n\n    const cleanId = useMemo(() => documentId.replace(/^drafts\\./, ''), [documentId])\n\n    const fetchDocuments = useCallback(async () => {\n        if (!cleanId) return\n        setLoading(true)\n        setError(null)\n        try {\n            const results = await client.fetch<ReferencingDocument[]>(\n                `*[references($id) && !(_id in path(\"drafts.**\"))] {\n                    _id, _type, _updatedAt, \"title\": coalesce(title, name, \"Untitled\")\n                } | order(_updatedAt desc)`,\n                { id: cleanId }\n            )\n            setDocuments(results)\n        } catch (err) {\n            setError(err instanceof Error ? err.message : 'Failed to fetch references')\n        } finally {\n            setLoading(false)\n        }\n    }, [client, cleanId])\n\n    useEffect(() => { fetchDocuments() }, [fetchDocuments])\n\n    const documentTypes = useMemo(() =>\n        [...new Set(documents.map((doc: ReferencingDocument) => doc._type))].sort(),\n        [documents]\n    )\n\n    const filteredDocuments = useMemo(() => {\n        const query = searchQuery.toLowerCase().trim()\n        return documents\n            .filter((doc: ReferencingDocument) => typeFilter === 'all' || doc._type === typeFilter)\n            .filter((doc: ReferencingDocument) => !query || doc.title?.toLowerCase().includes(query) || doc._type.toLowerCase().includes(query))\n            .sort((a: ReferencingDocument, b: ReferencingDocument) => {\n                const cmp = sortBy === 'updatedAt'\n                    ? new Date(a._updatedAt).getTime() - new Date(b._updatedAt).getTime()\n                    : sortBy === 'type'\n                        ? a._type.localeCompare(b._type)\n                        : (a.title || '').localeCompare(b.title || '')\n                return sortDesc ? -cmp : cmp\n            })\n    }, [documents, typeFilter, searchQuery, sortBy, sortDesc])\n\n    const getSchemaType = useCallback((type: string) => schema.get(type), [schema])\n\n    if (loading) {\n        return <Flex align=\"center\" justify=\"center\" padding={5}><Spinner muted /></Flex>\n    }\n\n    if (error) {\n        return <Card padding={4} tone=\"critical\"><Text>{error}</Text></Card>\n    }\n\n    if (documents.length === 0) {\n        return (\n            <Card padding={5}>\n                <Flex align=\"center\" justify=\"center\" direction=\"column\" gap={3}>\n                    <LinkIcon style={{ fontSize: 32, opacity: 0.4 }} />\n                    <Text muted>No document reference this one</Text>\n                </Flex>\n            </Card>\n        )\n    }\n\n    const useSelectForFilters = documentTypes.length > 5\n\n    return (\n        <Stack space={0} style={{ height: '100%' }}>\n            {/* Toolbar */}\n            <Card borderBottom padding={2}>\n                <Flex gap={2} align=\"center\" wrap=\"nowrap\">\n                    {useSelectForFilters ? (\n                        <Select\n                            value={typeFilter}\n                            onChange={e => setTypeFilter(e.currentTarget.value)}\n                            fontSize={1}\n                            padding={2}\n                            style={{ minWidth: 150, flexShrink: 0 }}\n                        >\n                            <option value=\"all\">All types</option>\n                            {documentTypes.map((type: string) => {\n                                const schemaType = getSchemaType(type)\n                                return (\n                                    <option key={type} value={type}>\n                                        {schemaType?.title || type}\n                                    </option>\n                                )\n                            })}\n                        </Select>\n                    ) : (\n                        <Inline space={2} style={{ flexShrink: 0 }}>\n                            <Flex align=\"center\" gap={1} as=\"label\" style={{ cursor: 'pointer', whiteSpace: 'nowrap' }}>\n                                <Radio checked={typeFilter === 'all'} onChange={() => setTypeFilter('all')} />\n                                <Text size={1} weight={typeFilter === 'all' ? 'semibold' : 'regular'}>All</Text>\n                            </Flex>\n                            {documentTypes.map((type: string) => {\n                                const schemaType = getSchemaType(type)\n                                return (\n                                    <Flex key={type} align=\"center\" gap={1} as=\"label\" style={{ cursor: 'pointer', whiteSpace: 'nowrap' }}>\n                                        <Radio checked={typeFilter === type} onChange={() => setTypeFilter(type)} />\n                                        <Text size={1} weight={typeFilter === type ? 'semibold' : 'regular'}>\n                                            {schemaType?.title || type}\n                                        </Text>\n                                    </Flex>\n                                )\n                            })}\n                        </Inline>\n                    )}\n                    <Box flex={1} />\n                    <Flex gap={1} style={{ flexShrink: 0 }}>\n                        <Select value={sortBy} onChange={e => setSortBy(e.currentTarget.value as SortOption)} fontSize={1} padding={2}>\n                            <option value=\"updatedAt\">Updated</option>\n                            <option value=\"type\">Type</option>\n                            <option value=\"title\">Title</option>\n                        </Select>\n                        <Button\n                            icon={SortIcon}\n                            mode=\"ghost\"\n                            onClick={() => setSortDesc((d: boolean) => !d)}\n                            title={sortDesc ? 'Descending' : 'Ascending'}\n                            fontSize={1}\n                            padding={2}\n                        />\n                    </Flex>\n                </Flex>\n            </Card>\n\n            {/* Count + Search */}\n            <Card borderBottom paddingX={3} paddingY={0}>\n                <Flex align=\"stretch\" style={{ minHeight: 33 }}>\n                    <Flex align=\"center\" paddingY={2} style={{ flexShrink: 0 }}>\n                        <Text size={1} muted>\n                            {filteredDocuments.length} of {documents.length} document{documents.length !== 1 ? 's' : ''}\n                        </Text>\n                    </Flex>\n                    <Box style={{ flex: 1, minWidth: 180, borderLeft: '1px solid var(--card-border-color)', paddingLeft: 4, marginLeft: 12, display: 'flex', alignItems: 'center' }}>\n                        <TextInput\n                            icon={SearchIcon}\n                            placeholder=\"Search...\"\n                            value={searchQuery}\n                            onChange={e => setSearchQuery(e.currentTarget.value)}\n                            fontSize={1}\n                            padding={2}\n                            border={false}\n                            style={{ boxShadow: 'none', width: '100%' }}\n                        />\n                    </Box>\n                </Flex>\n            </Card>\n\n            {/* Document list */}\n            <Box style={{ flex: 1, overflow: 'auto' }}>\n                <Stack space={1} padding={2}>\n                    {filteredDocuments.length === 0 ? (\n                        <Card padding={4}><Text muted align=\"center\">No documents match your filters</Text></Card>\n                    ) : (\n                        filteredDocuments.map((doc: ReferencingDocument) => {\n                            const schemaType = getSchemaType(doc._type)\n                            return (\n                                <Card\n                                    key={doc._id}\n                                    as=\"button\"\n                                    padding={2}\n                                    radius={2}\n                                    onClick={() => router.navigateIntent('edit', { id: doc._id, type: doc._type })}\n                                    style={{ cursor: 'pointer', textAlign: 'left', width: '100%' }}\n                                >\n                                    <Flex gap={3} align=\"center\">\n                                        <Box flex={1}>\n                                            {schemaType ? (\n                                                <Preview schemaType={schemaType} value={doc} layout=\"default\" />\n                                            ) : (\n                                                <Text weight=\"medium\">{doc.title}</Text>\n                                            )}\n                                        </Box>\n                                        <Badge tone=\"primary\" fontSize={0}>{schemaType?.title || doc._type}</Badge>\n                                    </Flex>\n                                </Card>\n                            )\n                        })\n                    )}\n                </Stack>\n            </Box>\n        </Stack>\n    )\n}\n","import { definePlugin } from 'sanity'\nimport type { StructureBuilder } from 'sanity/structure'\nimport { LinkIcon } from '@sanity/icons'\nimport type { ComponentType } from 'react'\nimport { ReferencesBadge } from './badge'\nimport { ReferencesPane } from './pane'\n\ninterface ReferencesConfig {\n    /**\n     * Document types to exclude from showing the References badge\n     * @example ['media.tag', 'sanity.imageAsset']\n     */\n    exclude?: string[]\n}\n\n/**\n * Plugin that shows documents referencing the current document.\n * Displays a badge with the reference count.\n *\n * To add the References tab to your documents, use the Structure Builder API\n * with the exported `ReferencesPane` component.\n *\n * @example Basic usage (badge only)\n * ```ts\n * // sanity.config.ts\n * import { references } from 'sanity-plugin-references'\n *\n * export default defineConfig({\n *   plugins: [references()],\n * })\n * ```\n *\n * @example Exclude specific document types from showing the badge\n * ```ts\n * references({ exclude: ['media.tag', 'sanity.imageAsset'] })\n * ```\n *\n * @example Adding the References tab with Structure Builder\n * ```ts\n * // sanity.config.ts\n * import { structureTool } from 'sanity/structure'\n * import { references, ReferencesPane } from 'sanity-plugin-references'\n * import { LinkIcon } from '@sanity/icons'\n *\n * export default defineConfig({\n *   plugins: [\n *     references(),\n *     structureTool({\n *       defaultDocumentNode: (S, { schemaType }) => {\n *         return S.document().views([\n *           S.view.form(),\n *           S.view.component(ReferencesPane).title('References').icon(LinkIcon),\n *         ])\n *       },\n *     }),\n *   ],\n * })\n * ```\n *\n * @example Using the referencesView helper\n * ```ts\n * import { references, referencesView } from 'sanity-plugin-references'\n *\n * structureTool({\n *   defaultDocumentNode: (S) => S.document().views([\n *     S.view.form(),\n *     referencesView(S),\n *   ]),\n * })\n * ```\n */\nexport const references = definePlugin<ReferencesConfig | void>((config) => {\n    const excludeTypes = config?.exclude || []\n\n    return {\n        name: 'references',\n        document: {\n            badges: (prev, context) => {\n                // Don't show badge for excluded types\n                if (excludeTypes.includes(context.schemaType)) {\n                    return prev\n                }\n                return [...prev, ReferencesBadge]\n            },\n        },\n    }\n})\n\nexport type { ReferencesConfig }\n\n\n/**\n * Helper to create a References view for Structure Builder.\n *\n * @example\n * ```ts\n * S.document().views([\n *   S.view.form(),\n *   referencesView(S),\n * ])\n * ```\n *\n * @example With custom title and icon\n * ```ts\n * referencesView(S, { title: 'Incoming Links', icon: MyIcon })\n * ```\n */\nexport function referencesView(S: StructureBuilder, options?: {\n    title?: string\n    icon?: ComponentType\n}) {\n    return S.view\n        .component(ReferencesPane)\n        .title(options?.title || 'References')\n        .icon(options?.icon || LinkIcon)\n}\n\nexport { ReferencesPane } from './pane'\nexport { ReferencesBadge } from './badge'\nexport { LinkIcon as ReferencesIcon } from '@sanity/icons'\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,105 @@
+{
+  "name": "sanity-plugin-references",
+  "version": "1.0.0",
+  "description": "See which documents reference the current document in Sanity Studio",
+  "keywords": [
+    "sanity",
+    "sanity-plugin",
+    "references",
+    "incoming-references",
+    "document-references"
+  ],
+  "homepage": "https://github.com/flayks/sanity-plugin-references#readme",
+  "bugs": {
+    "url": "https://github.com/flayks/sanity-plugin-references/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/flayks/sanity-plugin-references.git"
+  },
+  "license": "MIT",
+  "author": "Félix Péault (Flayks) <hello@flayks.com>",
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "sanity.json",
+    "src",
+    "v2-incompatible.js"
+  ],
+  "scripts": {
+    "build": "plugin-kit verify-package --silent && pkg-utils build --strict --check --clean",
+    "format": "prettier --write --cache --ignore-unknown .",
+    "link-watch": "plugin-kit link-watch",
+    "lint": "eslint .",
+    "prepublishOnly": "npm run build",
+    "watch": "pkg-utils watch --strict"
+  },
+  "dependencies": {
+    "@sanity/icons": "^3.7.4",
+    "@sanity/incompatible-plugin": "^1.0.5",
+    "@sanity/ui": "^3.1.11",
+    "@types/react-dom": "^19.2.3",
+    "react-icons": "^5.5.0"
+  },
+  "devDependencies": {
+    "@sanity/pkg-utils": "^10.2.5",
+    "@sanity/plugin-kit": "^4.0.20",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/commit-analyzer": "^13.0.1",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^12.0.2",
+    "@semantic-release/npm": "^13.1.3",
+    "@semantic-release/release-notes-generator": "^14.1.0",
+    "@types/react": "^19.2.7",
+    "@typescript-eslint/eslint-plugin": "^8",
+    "@typescript-eslint/parser": "^8",
+    "eslint": "^9",
+    "eslint-config-prettier": "^10",
+    "eslint-config-sanity": "^7.1.4",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "prettier": "^3.7.4",
+    "prettier-plugin-packagejson": "^2.5.20",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "sanity": "^5.1.0",
+    "semantic-release": "^25.0.2",
+    "styled-components": "^6.1.19",
+    "typescript": "^5.9"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
+    "sanity": "^3 || ^4 || ^5"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "import": "./dist/index.js",
+        "default": "./dist/index.js"
+      },
+      "./package.json": "./package.json"
+    }
+  },
+  "browserslist": "extends @sanity/browserslist-config",
+  "sanityPlugin": {
+    "verifyPackage": {
+      "eslintImports": false
+    }
+  }
+}

package/sanity.json

@@ -0,0 +1,8 @@
+{
+  "parts": [
+    {
+      "implements": "part:@sanity/base/sanity-root",
+      "path": "./v2-incompatible.js"
+    }
+  ]
+}

package/src/badge.tsx

@@ -0,0 +1,49 @@
+import { useState, useEffect } from 'react'
+import { type DocumentBadgeComponent, useClient } from 'sanity'
+
+/**
+ * Badge component that displays the count of documents referencing the current document
+ */
+export const ReferencesBadge: DocumentBadgeComponent = (props) => {
+    const { id, published, draft } = props
+    const documentId = published?._id || draft?._id || id
+    const [count, setCount] = useState<number | null>(null)
+
+    const client = useClient({ apiVersion: '2026-01-05' })
+
+    useEffect(() => {
+        if (!documentId) return
+
+        const cleanId = documentId.replace(/^drafts\./, '')
+
+        // Get count of documents referencing this document
+        client.fetch<number>(
+            /* groq */`count(*[references($id) && !(_id in path("drafts.**"))])`,
+            { id: cleanId }
+        ).then(setCount)
+
+        // Subscribe to changes
+        const subscription = client.listen(
+            /* groq */`*[references($id)]`,
+            { id: cleanId }
+        ).subscribe(() => {
+            client.fetch<number>(
+                /* groq */`count(*[references($id) && !(_id in path("drafts.**"))])`,
+                { id: cleanId }
+            ).then(setCount)
+        })
+
+        return () => subscription.unsubscribe()
+    }, [documentId, client])
+
+    // Don't show badge if no references or still loading
+    if (count === null || count === 0) {
+        return null
+    }
+
+    return {
+        label: `${count} reference${count > 1 ? 's' : ''}`,
+        title: `${count} document${count > 1 ? 's' : ''} reference this. See "References" tab.`,
+        color: 'primary',
+    }
+}

package/src/index.ts

@@ -0,0 +1,120 @@
+import { definePlugin } from 'sanity'
+import type { StructureBuilder } from 'sanity/structure'
+import { LinkIcon } from '@sanity/icons'
+import type { ComponentType } from 'react'
+import { ReferencesBadge } from './badge'
+import { ReferencesPane } from './pane'
+
+interface ReferencesConfig {
+    /**
+     * Document types to exclude from showing the References badge
+     * @example ['media.tag', 'sanity.imageAsset']
+     */
+    exclude?: string[]
+}
+
+/**
+ * Plugin that shows documents referencing the current document.
+ * Displays a badge with the reference count.
+ *
+ * To add the References tab to your documents, use the Structure Builder API
+ * with the exported `ReferencesPane` component.
+ *
+ * @example Basic usage (badge only)
+ * ```ts
+ * // sanity.config.ts
+ * import { references } from 'sanity-plugin-references'
+ *
+ * export default defineConfig({
+ *   plugins: [references()],
+ * })
+ * ```
+ *
+ * @example Exclude specific document types from showing the badge
+ * ```ts
+ * references({ exclude: ['media.tag', 'sanity.imageAsset'] })
+ * ```
+ *
+ * @example Adding the References tab with Structure Builder
+ * ```ts
+ * // sanity.config.ts
+ * import { structureTool } from 'sanity/structure'
+ * import { references, ReferencesPane } from 'sanity-plugin-references'
+ * import { LinkIcon } from '@sanity/icons'
+ *
+ * export default defineConfig({
+ *   plugins: [
+ *     references(),
+ *     structureTool({
+ *       defaultDocumentNode: (S, { schemaType }) => {
+ *         return S.document().views([
+ *           S.view.form(),
+ *           S.view.component(ReferencesPane).title('References').icon(LinkIcon),
+ *         ])
+ *       },
+ *     }),
+ *   ],
+ * })
+ * ```
+ *
+ * @example Using the referencesView helper
+ * ```ts
+ * import { references, referencesView } from 'sanity-plugin-references'
+ *
+ * structureTool({
+ *   defaultDocumentNode: (S) => S.document().views([
+ *     S.view.form(),
+ *     referencesView(S),
+ *   ]),
+ * })
+ * ```
+ */
+export const references = definePlugin<ReferencesConfig | void>((config) => {
+    const excludeTypes = config?.exclude || []
+
+    return {
+        name: 'references',
+        document: {
+            badges: (prev, context) => {
+                // Don't show badge for excluded types
+                if (excludeTypes.includes(context.schemaType)) {
+                    return prev
+                }
+                return [...prev, ReferencesBadge]
+            },
+        },
+    }
+})
+
+export type { ReferencesConfig }
+
+
+/**
+ * Helper to create a References view for Structure Builder.
+ *
+ * @example
+ * ```ts
+ * S.document().views([
+ *   S.view.form(),
+ *   referencesView(S),
+ * ])
+ * ```
+ *
+ * @example With custom title and icon
+ * ```ts
+ * referencesView(S, { title: 'Incoming Links', icon: MyIcon })
+ * ```
+ */
+export function referencesView(S: StructureBuilder, options?: {
+    title?: string
+    icon?: ComponentType
+}) {
+    return S.view
+        .component(ReferencesPane)
+        .title(options?.title || 'References')
+        .icon(options?.icon || LinkIcon)
+}
+
+export { ReferencesPane } from './pane'
+export { ReferencesBadge } from './badge'
+export { LinkIcon as ReferencesIcon } from '@sanity/icons'

package/src/pane.tsx

@@ -0,0 +1,230 @@
+import { useMemo, useState, useEffect, useCallback } from 'react'
+import { useClient, useSchema, Preview } from 'sanity'
+import { type UserViewComponent } from 'sanity/structure'
+import { useRouter } from 'sanity/router'
+import { Box, Card, Flex, Inline, Stack, Text, TextInput, Select, Spinner, Button, Badge, Radio } from '@sanity/ui'
+import { SearchIcon, SortIcon, LinkIcon } from '@sanity/icons'
+
+interface ReferencingDocument {
+    _id: string
+    _type: string
+    _updatedAt: string
+    title?: string
+}
+type SortOption = 'updatedAt' | 'type' | 'title'
+
+/**
+ * Structure Builder view component that displays documents referencing the current document.
+ * Use this component with S.view.component() in your structure configuration.
+ *
+ * @example
+ * ```ts
+ * import { references, referencesView } from 'sanity-plugin-references'
+ * import { LinkIcon } from '@sanity/icons'
+ *
+ * S.document().views([
+ *   S.view.form(),
+ *   referencesView(S),
+ * ])
+ * ```
+ */
+export const ReferencesPane: UserViewComponent = (props) => {
+    const { documentId } = props
+    const client = useClient({ apiVersion: '2026-01-05' })
+    const schema = useSchema()
+    const router = useRouter()
+
+    const [documents, setDocuments] = useState<ReferencingDocument[]>([])
+    const [loading, setLoading] = useState(true)
+    const [error, setError] = useState<string | null>(null)
+    const [searchQuery, setSearchQuery] = useState('')
+    const [typeFilter, setTypeFilter] = useState('all')
+    const [sortBy, setSortBy] = useState<SortOption>('updatedAt')
+    const [sortDesc, setSortDesc] = useState(true)
+
+    const cleanId = useMemo(() => documentId.replace(/^drafts\./, ''), [documentId])
+
+    const fetchDocuments = useCallback(async () => {
+        if (!cleanId) return
+        setLoading(true)
+        setError(null)
+        try {
+            const results = await client.fetch<ReferencingDocument[]>(
+                `*[references($id) && !(_id in path("drafts.**"))] {
+                    _id, _type, _updatedAt, "title": coalesce(title, name, "Untitled")
+                } | order(_updatedAt desc)`,
+                { id: cleanId }
+            )
+            setDocuments(results)
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to fetch references')
+        } finally {
+            setLoading(false)
+        }
+    }, [client, cleanId])
+
+    useEffect(() => { fetchDocuments() }, [fetchDocuments])
+
+    const documentTypes = useMemo(() =>
+        [...new Set(documents.map((doc: ReferencingDocument) => doc._type))].sort(),
+        [documents]
+    )
+
+    const filteredDocuments = useMemo(() => {
+        const query = searchQuery.toLowerCase().trim()
+        return documents
+            .filter((doc: ReferencingDocument) => typeFilter === 'all' || doc._type === typeFilter)
+            .filter((doc: ReferencingDocument) => !query || doc.title?.toLowerCase().includes(query) || doc._type.toLowerCase().includes(query))
+            .sort((a: ReferencingDocument, b: ReferencingDocument) => {
+                const cmp = sortBy === 'updatedAt'
+                    ? new Date(a._updatedAt).getTime() - new Date(b._updatedAt).getTime()
+                    : sortBy === 'type'
+                        ? a._type.localeCompare(b._type)
+                        : (a.title || '').localeCompare(b.title || '')
+                return sortDesc ? -cmp : cmp
+            })
+    }, [documents, typeFilter, searchQuery, sortBy, sortDesc])
+
+    const getSchemaType = useCallback((type: string) => schema.get(type), [schema])
+
+    if (loading) {
+        return <Flex align="center" justify="center" padding={5}><Spinner muted /></Flex>
+    }
+
+    if (error) {
+        return <Card padding={4} tone="critical"><Text>{error}</Text></Card>
+    }
+
+    if (documents.length === 0) {
+        return (
+            <Card padding={5}>
+                <Flex align="center" justify="center" direction="column" gap={3}>
+                    <LinkIcon style={{ fontSize: 32, opacity: 0.4 }} />
+                    <Text muted>No document reference this one</Text>
+                </Flex>
+            </Card>
+        )
+    }
+
+    const useSelectForFilters = documentTypes.length > 5
+
+    return (
+        <Stack space={0} style={{ height: '100%' }}>
+            {/* Toolbar */}
+            <Card borderBottom padding={2}>
+                <Flex gap={2} align="center" wrap="nowrap">
+                    {useSelectForFilters ? (
+                        <Select
+                            value={typeFilter}
+                            onChange={e => setTypeFilter(e.currentTarget.value)}
+                            fontSize={1}
+                            padding={2}
+                            style={{ minWidth: 150, flexShrink: 0 }}
+                        >
+                            <option value="all">All types</option>
+                            {documentTypes.map((type: string) => {
+                                const schemaType = getSchemaType(type)
+                                return (
+                                    <option key={type} value={type}>
+                                        {schemaType?.title || type}
+                                    </option>
+                                )
+                            })}
+                        </Select>
+                    ) : (
+                        <Inline space={2} style={{ flexShrink: 0 }}>
+                            <Flex align="center" gap={1} as="label" style={{ cursor: 'pointer', whiteSpace: 'nowrap' }}>
+                                <Radio checked={typeFilter === 'all'} onChange={() => setTypeFilter('all')} />
+                                <Text size={1} weight={typeFilter === 'all' ? 'semibold' : 'regular'}>All</Text>
+                            </Flex>
+                            {documentTypes.map((type: string) => {
+                                const schemaType = getSchemaType(type)
+                                return (
+                                    <Flex key={type} align="center" gap={1} as="label" style={{ cursor: 'pointer', whiteSpace: 'nowrap' }}>
+                                        <Radio checked={typeFilter === type} onChange={() => setTypeFilter(type)} />
+                                        <Text size={1} weight={typeFilter === type ? 'semibold' : 'regular'}>
+                                            {schemaType?.title || type}
+                                        </Text>
+                                    </Flex>
+                                )
+                            })}
+                        </Inline>
+                    )}
+                    <Box flex={1} />
+                    <Flex gap={1} style={{ flexShrink: 0 }}>
+                        <Select value={sortBy} onChange={e => setSortBy(e.currentTarget.value as SortOption)} fontSize={1} padding={2}>
+                            <option value="updatedAt">Updated</option>
+                            <option value="type">Type</option>
+                            <option value="title">Title</option>
+                        </Select>
+                        <Button
+                            icon={SortIcon}
+                            mode="ghost"
+                            onClick={() => setSortDesc((d: boolean) => !d)}
+                            title={sortDesc ? 'Descending' : 'Ascending'}
+                            fontSize={1}
+                            padding={2}
+                        />
+                    </Flex>
+                </Flex>
+            </Card>
+
+            {/* Count + Search */}
+            <Card borderBottom paddingX={3} paddingY={0}>
+                <Flex align="stretch" style={{ minHeight: 33 }}>
+                    <Flex align="center" paddingY={2} style={{ flexShrink: 0 }}>
+                        <Text size={1} muted>
+                            {filteredDocuments.length} of {documents.length} document{documents.length !== 1 ? 's' : ''}
+                        </Text>
+                    </Flex>
+                    <Box style={{ flex: 1, minWidth: 180, borderLeft: '1px solid var(--card-border-color)', paddingLeft: 4, marginLeft: 12, display: 'flex', alignItems: 'center' }}>
+                        <TextInput
+                            icon={SearchIcon}
+                            placeholder="Search..."
+                            value={searchQuery}
+                            onChange={e => setSearchQuery(e.currentTarget.value)}
+                            fontSize={1}
+                            padding={2}
+                            border={false}
+                            style={{ boxShadow: 'none', width: '100%' }}
+                        />
+                    </Box>
+                </Flex>
+            </Card>
+
+            {/* Document list */}
+            <Box style={{ flex: 1, overflow: 'auto' }}>
+                <Stack space={1} padding={2}>
+                    {filteredDocuments.length === 0 ? (
+                        <Card padding={4}><Text muted align="center">No documents match your filters</Text></Card>
+                    ) : (
+                        filteredDocuments.map((doc: ReferencingDocument) => {
+                            const schemaType = getSchemaType(doc._type)
+                            return (
+                                <Card
+                                    key={doc._id}
+                                    as="button"
+                                    padding={2}
+                                    radius={2}
+                                    onClick={() => router.navigateIntent('edit', { id: doc._id, type: doc._type })}
+                                    style={{ cursor: 'pointer', textAlign: 'left', width: '100%' }}
+                                >
+                                    <Flex gap={3} align="center">
+                                        <Box flex={1}>
+                                            {schemaType ? (
+                                                <Preview schemaType={schemaType} value={doc} layout="default" />
+                                            ) : (
+                                                <Text weight="medium">{doc.title}</Text>
+                                            )}
+                                        </Box>
+                                        <Badge tone="primary" fontSize={0}>{schemaType?.title || doc._type}</Badge>
+                                    </Flex>
+                                </Card>
+                            )
+                        })
+                    )}
+                </Stack>
+            </Box>
+        </Stack>
+    )
+}

package/v2-incompatible.js

@@ -0,0 +1,11 @@
+const {showIncompatiblePluginDialog} = require('@sanity/incompatible-plugin')
+const {name, version, sanityExchangeUrl} = require('./package.json')
+
+export default showIncompatiblePluginDialog({
+  name: name,
+  versions: {
+    v3: version,
+    v2: undefined,
+  },
+  sanityExchangeUrl,
+})