sanity-plugin-pte-interpolation 1.1.1 → 1.2.0

package/README.md

@@ -16,33 +16,44 @@ npm install sanity-plugin-pte-interpolation
 
 ### Peer dependencies
 
-- `sanity` ^3.0.0 || ^4.0.0 || ^5.0.0
-- `react` ^18.0.0 || ^19.0.0
-- `@sanity/ui` ^2.0.0 || ^3.0.0
-- `@sanity/icons` ^3.0.0
+- `sanity ^3.0.0 || ^4.0.0 || ^5.0.0`
+- `react ^18.0.0 || ^19.0.0`
+- `@sanity/ui ^2.0.0 || ^3.0.0`
+- `@sanity/icons ^3.0.0`
 
 ## Usage
 
-Call `interpolationVariables()` inside the `of` array of a Portable Text field. It returns a `block` array member with the variable inline object type injected.
+Call `interpolationVariables()` inside the `of` array of a Portable Text field. It returns a `block` array member augmented with the `pteInterpolationVariable` inline type.
 
 ```ts
 import {defineType, defineField} from 'sanity'
 import {interpolationVariables} from 'sanity-plugin-pte-interpolation'
 
 export default defineType({
-  name: 'email',
-  title: 'Email',
+  name: 'promoCard',
+  title: 'Promo card',
   type: 'document',
   fields: [
     defineField({
-      name: 'body',
-      title: 'Body',
+      name: 'message',
+      title: 'Message',
+      description:
+        'Personalised card message. Use the variable picker to insert recipient-specific values.',
       type: 'array',
       of: [
         interpolationVariables([
-          {id: 'firstName', name: 'First name', description: 'First name of the recipient'},
-          {id: 'lastName', name: 'Last name', description: 'Last name of the recipient'},
-          {id: 'email', name: 'Email address', description: 'Email address of the recipient'},
+          {id: 'firstName', name: 'First name', description: "Recipient's first name"},
+          {
+            id: 'vouchersRemaining',
+            name: 'Vouchers remaining',
+            description: 'Number of vouchers still available for this recipient',
+          },
+          {
+            id: 'totalVouchers',
+            name: 'Total vouchers',
+            description: 'Total number of vouchers allocated',
+          },
+          {id: 'expiryDate', name: 'Expiry date', description: 'Date the vouchers expire'},
         ]),
       ],
     }),
@@ -54,7 +65,7 @@ Each variable requires an `id` (the lookup key used at render time) and a `name`
 
 ### With a custom block definition
 
-If you already have a customised `block` definition, pass it as the second argument and the variable type will be appended to its existing `of` array:
+If you already have a customised `block` definition, pass it as the second argument and `interpolationVariables` appends the variable type to its existing `of` array:
 
 ```ts
 import {defineArrayMember} from 'sanity'
@@ -71,30 +82,70 @@ const customBlock = defineArrayMember({
 interpolationVariables([{id: 'firstName', name: 'First name'}], customBlock)
 ```
 
-## Rendering Variables
+## Stale variable detection
+
+When a variable's `id` no longer exists in the `variables` array - for example after a developer renames or removes it from the schema config - the Studio surfaces warnings in three places:
+
+- **Inline block in the PTE editor** - a warning icon and a "Stale" badge appear next to the variable name, and a tooltip explains the issue.
+- **Autocomplete input when editing the block** - the autocomplete field shows a red border, and a caution card below it reads `Variable "..." is no longer defined. Please select a valid variable.`
+- **Document-level validation** - the Studio raises a validation warning, not an error. Publishing is not blocked, since stale variables are typically caused by a developer schema change rather than an editor mistake.
+
+Editors can resolve the warning by opening the variable block and selecting a currently defined variable from the picker.
+
+## How It Works
+
+Think mail merge for rich text - an editor writes "Hello, `{firstName}`!" and the frontend substitutes the actual value at runtime.
+
+```
+AUTHORING (Sanity Studio)                 RENDERING (React)
+───────────────────────────               ─────────────────────────────────
+Editor writes:                            App provides values:
+"Hi [firstName], you have                 { firstName: "Sarah",
+[vouchersRemaining] of                      vouchersRemaining: "3",
+[totalVouchers] vouchers                    totalVouchers: "5",
+remaining until [expiryDate]."              expiryDate: "30 Feb 2026" }
+
+Stored as Portable Text with              Rendered as:
+inline pteInterpolationVariable           "Hi Sarah, you have 3 of 5
+objects containing variableKey            vouchers remaining until
+                                          30 Feb 2026."
+```
+
+## Related Packages
 
 This package handles the **authoring** side. To resolve variables to actual values in your frontend, use [`pte-interpolation-react`](https://www.npmjs.com/package/pte-interpolation-react):
 
 ```tsx
 import {InterpolatedPortableText} from 'pte-interpolation-react'
-;<InterpolatedPortableText
-  value={body}
-  interpolationValues={{
-    firstName: 'Jo',
-    lastName: 'Smith',
-    email: 'jo@example.com',
-  }}
-/>
+
+function PromoCard({message, recipient}) {
+  return (
+    <InterpolatedPortableText
+      value={message}
+      interpolationValues={{
+        firstName: recipient.firstName,
+        vouchersRemaining: String(recipient.vouchersRemaining),
+        totalVouchers: String(recipient.totalVouchers),
+        expiryDate: recipient.expiryDate,
+      }}
+    />
+  )
+}
 ```
 
 For framework-agnostic use cases - plain string output, variable key extraction, server-side rendering, or any non-React environment - use [`pte-interpolation-core`](https://www.npmjs.com/package/pte-interpolation-core) directly:
 
 ```ts
-import {interpolateToString, extractVariableKeys} from 'pte-interpolation-core'
-
-const keys = extractVariableKeys(blocks) // ['firstName', 'email']
-const text = interpolateToString(blocks, {firstName: 'Jo', email: 'jo@example.com'})
-// "Hello, Jo! Your email is jo@example.com."
+import {
+  interpolateToString,
+  extractVariableKeys,
+  getMissingVariableKeys,
+} from 'pte-interpolation-core'
+
+const keys = extractVariableKeys(blocks) // ['firstName', 'vouchersRemaining']
+const missing = getMissingVariableKeys(blocks, {firstName: 'Sarah'}) // ['vouchersRemaining']
+const text = interpolateToString(blocks, {firstName: 'Sarah', vouchersRemaining: '3'})
+// "Hi, Sarah! You have 3 vouchers remaining."
 ```
 
 ## Data Shape
@@ -105,9 +156,9 @@ Variables are stored as inline objects within Portable Text blocks:
 {
   "_type": "block",
   "children": [
-    {"_type": "span", "text": "Hello, "},
+    {"_type": "span", "text": "Hi, "},
     {"_type": "pteInterpolationVariable", "variableKey": "firstName"},
-    {"_type": "span", "text": "!"}
+    {"_type": "span", "text": ","}
   ]
 }
 ```

package/dist/index.cjs

@@ -1,6 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
 var icons = require("@sanity/icons"), sanity = require("sanity"), jsxRuntime = require("react/jsx-runtime"), ui = require("@sanity/ui"), react = require("react");
+function isStaleVariable(variableKey, variables) {
+  return typeof variableKey > "u" || variableKey.length === 0 ? !1 : variables.some((variable) => variable.id === variableKey) === !1;
+}
+function staleVariableMessage(variableKey) {
+  return `Variable "${variableKey}" is no longer defined. Please select a valid variable.`;
+}
 function VariableKeyField(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.children });
 }
@@ -11,7 +17,7 @@ function createVariableKeyInput(variables) {
     description: variable.description
   }));
   return function(props) {
-    const autocompleteId = react.useId(), selectedVariable = variables.find((variable) => variable.id === props.value), handleChange = react.useCallback(
+    const autocompleteId = react.useId(), selectedVariable = variables.find((variable) => variable.id === props.value), variableKey = typeof props.value == "string" ? props.value : void 0, stale = isStaleVariable(variableKey, variables), handleChange = react.useCallback(
       (selectedValue) => {
         props.onChange(selectedValue ? sanity.set(selectedValue) : sanity.unset());
       },
@@ -26,7 +32,7 @@ function createVariableKeyInput(variables) {
         {
           id: autocompleteId,
           options,
-          value: typeof props.value == "string" ? props.value : void 0,
+          value: variableKey,
           onChange: handleChange,
           filterOption,
           renderOption,
@@ -35,19 +41,27 @@ function createVariableKeyInput(variables) {
           icon: icons.SearchIcon,
           placeholder: "Search variables...",
           fontSize: 1,
-          padding: 3
+          padding: 3,
+          customValidity: stale && variableKey ? staleVariableMessage(variableKey) : void 0
         }
       ),
+      stale && variableKey && /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { tone: "caution", padding: 3, marginTop: 2, radius: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: /* @__PURE__ */ jsxRuntime.jsx(icons.WarningOutlineIcon, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: staleVariableMessage(variableKey) })
+      ] }) }),
       selectedVariable?.description && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginTop: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, muted: !0, children: selectedVariable.description }) })
     ] });
   };
 }
 function createVariableInlineBlock(variables) {
   return function(props) {
-    const variableKey = props.value?.variableKey, variable = variables.find((candidate) => candidate.id === variableKey);
+    const variableKey = props.value?.variableKey, variable = variables.find((candidate) => candidate.id === variableKey), stale = isStaleVariable(variableKey, variables);
     return props.renderDefault({
       ...props,
-      renderPreview: () => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 0, weight: "medium", children: variable?.name ?? variableKey ?? "Select variable" }) })
+      renderPreview: () => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 0, weight: "medium", children: variable?.name ?? variableKey ?? "Select variable" }),
+        stale && /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { tone: "caution", fontSize: 0, children: "Stale" })
+      ] }) })
     });
   };
 }
@@ -66,7 +80,10 @@ function interpolationVariables(variables, block) {
         name: "variableKey",
         title: "Variable",
         type: "string",
-        validation: (rule) => rule.required(),
+        validation: (rule) => [
+          rule.required(),
+          rule.custom((value) => isStaleVariable(typeof value == "string" ? value : void 0, variables) === !1 ? !0 : staleVariableMessage(value)).warning()
+        ],
         components: {
           field: VariableKeyField,
           input: createVariableKeyInput(variables)

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../src/components/VariableInlineBlock.tsx","../src/interpolationVariables.ts"],"sourcesContent":["import {SearchIcon} from '@sanity/icons'\nimport {Autocomplete, Box, Card, Text} from '@sanity/ui'\nimport {useCallback, useId} from 'react'\nimport {set, unset} from 'sanity'\nimport type {BlockProps, FieldProps, InputProps} from 'sanity'\nimport type {InterpolationVariable} from '../types'\n\ninterface VariableOption {\n  value: string\n  name: string\n  description?: string\n}\n\nexport function VariableKeyField(props: FieldProps) {\n  return <>{props.children}</>\n}\n\nexport function createVariableKeyInput(variables: InterpolationVariable[]) {\n  const options: VariableOption[] = variables.map((variable) => ({\n    value: variable.id,\n    name: variable.name,\n    description: variable.description,\n  }))\n\n  return function VariableKeyInput(props: InputProps) {\n    const autocompleteId = useId()\n    const selectedVariable = variables.find((variable) => variable.id === props.value)\n\n    const handleChange = useCallback(\n      (selectedValue: string) => {\n        props.onChange(selectedValue ? set(selectedValue) : unset())\n      },\n      [props],\n    )\n\n    const filterOption = useCallback((query: string, option: VariableOption) => {\n      return option.name.toLowerCase().includes(query.toLowerCase())\n    }, [])\n\n    const renderOption = useCallback((option: VariableOption) => {\n      return (\n        <Card as=\"button\" padding={3}>\n          <Text size={1} weight=\"medium\">\n            {option.name}\n          </Text>\n          {option.description && (\n            <Box marginTop={2}>\n              <Text size={0} muted>\n                {option.description}\n              </Text>\n            </Box>\n          )}\n        </Card>\n      )\n    }, [])\n\n    const renderValue = useCallback((_value: string, option?: VariableOption) => {\n      if (option) return option.name\n      const matchedOption = options.find((candidate) => candidate.value === _value)\n      return matchedOption?.name ?? _value\n    }, [])\n\n    return (\n      <>\n        <Autocomplete\n          id={autocompleteId}\n          options={options}\n          value={typeof props.value === 'string' ? props.value : undefined}\n          onChange={handleChange}\n          filterOption={filterOption}\n          renderOption={renderOption}\n          renderValue={renderValue}\n          openButton\n          icon={SearchIcon}\n          placeholder=\"Search variables...\"\n          fontSize={1}\n          padding={3}\n        />\n        {selectedVariable?.description && (\n          <Box marginTop={2}>\n            <Text size={1} muted>\n              {selectedVariable.description}\n            </Text>\n          </Box>\n        )}\n      </>\n    )\n  }\n}\n\nexport function createVariableInlineBlock(variables: InterpolationVariable[]) {\n  return function VariableInlineBlock(props: BlockProps) {\n    const value = props.value as {variableKey?: string}\n    const variableKey = value?.variableKey\n    const variable = variables.find((candidate) => candidate.id === variableKey)\n\n    return props.renderDefault({\n      ...props,\n      renderPreview: () => (\n        <Box padding={2}>\n          <Text size={0} weight=\"medium\">\n            {variable?.name ?? variableKey ?? 'Select variable'}\n          </Text>\n        </Box>\n      ),\n    })\n  }\n}\n","import {TagIcon} from '@sanity/icons'\nimport {defineArrayMember, defineField} from 'sanity'\nimport {\n  createVariableInlineBlock,\n  createVariableKeyInput,\n  VariableKeyField,\n} from './components/VariableInlineBlock'\nimport type {InterpolationVariable} from './types'\n\n/** @public */\nexport const VARIABLE_TYPE_PREFIX = 'pteInterpolationVariable'\n\n/** @public */\nexport function interpolationVariables(\n  variables: InterpolationVariable[],\n  block?: ReturnType<typeof defineArrayMember>,\n) {\n  const variableType = defineArrayMember({\n    type: 'object',\n    name: VARIABLE_TYPE_PREFIX,\n    title: 'Variable',\n    icon: TagIcon,\n    options: {\n      modal: {width: 0},\n    },\n    fields: [\n      defineField({\n        name: 'variableKey',\n        title: 'Variable',\n        type: 'string',\n        validation: (rule) => rule.required(),\n        components: {\n          field: VariableKeyField,\n          input: createVariableKeyInput(variables),\n        },\n      }),\n    ],\n    components: {\n      inlineBlock: createVariableInlineBlock(variables),\n    },\n  })\n\n  const baseBlock = block ?? defineArrayMember({type: 'block'})\n\n  return {\n    ...baseBlock,\n    of: [...((baseBlock as {of?: unknown[]}).of ?? []), variableType],\n  }\n}\n"],"names":["jsx","Fragment","useId","useCallback","set","unset","jsxs","Card","Text","Box","Autocomplete","SearchIcon","defineArrayMember","TagIcon","defineField"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../src/isStaleVariable.ts","../src/components/VariableInlineBlock.tsx","../src/interpolationVariables.ts"],"sourcesContent":["import type {InterpolationVariable} from './types'\n\nexport function isStaleVariable(\n  variableKey: string | undefined,\n  variables: InterpolationVariable[],\n): boolean {\n  if (typeof variableKey === 'undefined' || variableKey.length === 0) return false\n  const hasMatchingVariable = variables.some((variable) => variable.id === variableKey)\n  return hasMatchingVariable === false\n}\n\nexport function staleVariableMessage(variableKey: string): string {\n  return `Variable \"${variableKey}\" is no longer defined. Please select a valid variable.`\n}\n","import {SearchIcon, WarningOutlineIcon} from '@sanity/icons'\nimport {Autocomplete, Badge, Box, Card, Flex, Text} from '@sanity/ui'\nimport {useCallback, useId} from 'react'\nimport {set, unset} from 'sanity'\nimport type {BlockProps, FieldProps, InputProps} from 'sanity'\nimport {isStaleVariable, staleVariableMessage} from '../isStaleVariable'\nimport type {InterpolationVariable} from '../types'\n\ninterface VariableOption {\n  value: string\n  name: string\n  description?: string\n}\n\nexport function VariableKeyField(props: FieldProps) {\n  return <>{props.children}</>\n}\n\nexport function createVariableKeyInput(variables: InterpolationVariable[]) {\n  const options: VariableOption[] = variables.map((variable) => ({\n    value: variable.id,\n    name: variable.name,\n    description: variable.description,\n  }))\n\n  return function VariableKeyInput(props: InputProps) {\n    const autocompleteId = useId()\n    const selectedVariable = variables.find((variable) => variable.id === props.value)\n    const variableKey = typeof props.value === 'string' ? props.value : undefined\n    const stale = isStaleVariable(variableKey, variables)\n\n    const handleChange = useCallback(\n      (selectedValue: string) => {\n        props.onChange(selectedValue ? set(selectedValue) : unset())\n      },\n      [props],\n    )\n\n    const filterOption = useCallback((query: string, option: VariableOption) => {\n      return option.name.toLowerCase().includes(query.toLowerCase())\n    }, [])\n\n    const renderOption = useCallback((option: VariableOption) => {\n      return (\n        <Card as=\"button\" padding={3}>\n          <Text size={1} weight=\"medium\">\n            {option.name}\n          </Text>\n          {option.description && (\n            <Box marginTop={2}>\n              <Text size={0} muted>\n                {option.description}\n              </Text>\n            </Box>\n          )}\n        </Card>\n      )\n    }, [])\n\n    const renderValue = useCallback((_value: string, option?: VariableOption) => {\n      if (option) return option.name\n      const matchedOption = options.find((candidate) => candidate.value === _value)\n      return matchedOption?.name ?? _value\n    }, [])\n\n    return (\n      <>\n        <Autocomplete\n          id={autocompleteId}\n          options={options}\n          value={variableKey}\n          onChange={handleChange}\n          filterOption={filterOption}\n          renderOption={renderOption}\n          renderValue={renderValue}\n          openButton\n          icon={SearchIcon}\n          placeholder=\"Search variables...\"\n          fontSize={1}\n          padding={3}\n          customValidity={stale && variableKey ? staleVariableMessage(variableKey) : undefined}\n        />\n        {stale && variableKey && (\n          <Card tone=\"caution\" padding={3} marginTop={2} radius={2}>\n            <Flex align=\"center\" gap={2}>\n              <Text size={1}>\n                <WarningOutlineIcon />\n              </Text>\n              <Text size={1}>{staleVariableMessage(variableKey)}</Text>\n            </Flex>\n          </Card>\n        )}\n        {selectedVariable?.description && (\n          <Box marginTop={2}>\n            <Text size={1} muted>\n              {selectedVariable.description}\n            </Text>\n          </Box>\n        )}\n      </>\n    )\n  }\n}\n\nexport function createVariableInlineBlock(variables: InterpolationVariable[]) {\n  return function VariableInlineBlock(props: BlockProps) {\n    const value = props.value as {variableKey?: string}\n    const variableKey = value?.variableKey\n    const variable = variables.find((candidate) => candidate.id === variableKey)\n    const stale = isStaleVariable(variableKey, variables)\n\n    return props.renderDefault({\n      ...props,\n      renderPreview: () => (\n        <Box padding={2}>\n          <Flex align=\"center\" gap={2}>\n            <Text size={0} weight=\"medium\">\n              {variable?.name ?? variableKey ?? 'Select variable'}\n            </Text>\n            {stale && (\n              <Badge tone=\"caution\" fontSize={0}>\n                Stale\n              </Badge>\n            )}\n          </Flex>\n        </Box>\n      ),\n    })\n  }\n}\n","import {TagIcon} from '@sanity/icons'\nimport {defineArrayMember, defineField} from 'sanity'\nimport {\n  createVariableInlineBlock,\n  createVariableKeyInput,\n  VariableKeyField,\n} from './components/VariableInlineBlock'\nimport {isStaleVariable, staleVariableMessage} from './isStaleVariable'\nimport type {InterpolationVariable} from './types'\n\n/** @public */\nexport const VARIABLE_TYPE_PREFIX = 'pteInterpolationVariable'\n\n/** @public */\nexport function interpolationVariables(\n  variables: InterpolationVariable[],\n  block?: ReturnType<typeof defineArrayMember>,\n) {\n  const variableType = defineArrayMember({\n    type: 'object',\n    name: VARIABLE_TYPE_PREFIX,\n    title: 'Variable',\n    icon: TagIcon,\n    options: {\n      modal: {width: 0},\n    },\n    fields: [\n      defineField({\n        name: 'variableKey',\n        title: 'Variable',\n        type: 'string',\n        validation: (rule) => [\n          rule.required(),\n          rule\n            .custom((value) => {\n              const variableKey = typeof value === 'string' ? value : undefined\n              if (isStaleVariable(variableKey, variables) === false) return true\n              return staleVariableMessage(value as string)\n            })\n            .warning(),\n        ],\n        components: {\n          field: VariableKeyField,\n          input: createVariableKeyInput(variables),\n        },\n      }),\n    ],\n    components: {\n      inlineBlock: createVariableInlineBlock(variables),\n    },\n  })\n\n  const baseBlock = block ?? defineArrayMember({type: 'block'})\n\n  return {\n    ...baseBlock,\n    of: [...((baseBlock as {of?: unknown[]}).of ?? []), variableType],\n  }\n}\n"],"names":["jsx","Fragment","useId","useCallback","set","unset","jsxs","Card","Text","Box","Autocomplete","SearchIcon","Flex","WarningOutlineIcon","Badge","defineArrayMember","TagIcon","defineField"],"mappings":"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"}

package/dist/index.js

@@ -1,8 +1,14 @@
-import { SearchIcon, TagIcon } from "@sanity/icons";
+import { SearchIcon, WarningOutlineIcon, TagIcon } from "@sanity/icons";
 import { set, unset, defineArrayMember, defineField } from "sanity";
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { Box, Text, Card, Autocomplete } from "@sanity/ui";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { Box, Flex, Text, Badge, Card, Autocomplete } from "@sanity/ui";
 import { useId, useCallback } from "react";
+function isStaleVariable(variableKey, variables) {
+  return typeof variableKey > "u" || variableKey.length === 0 ? !1 : variables.some((variable) => variable.id === variableKey) === !1;
+}
+function staleVariableMessage(variableKey) {
+  return `Variable "${variableKey}" is no longer defined. Please select a valid variable.`;
+}
 function VariableKeyField(props) {
   return /* @__PURE__ */ jsx(Fragment, { children: props.children });
 }
@@ -13,7 +19,7 @@ function createVariableKeyInput(variables) {
     description: variable.description
   }));
   return function(props) {
-    const autocompleteId = useId(), selectedVariable = variables.find((variable) => variable.id === props.value), handleChange = useCallback(
+    const autocompleteId = useId(), selectedVariable = variables.find((variable) => variable.id === props.value), variableKey = typeof props.value == "string" ? props.value : void 0, stale = isStaleVariable(variableKey, variables), handleChange = useCallback(
       (selectedValue) => {
         props.onChange(selectedValue ? set(selectedValue) : unset());
       },
@@ -28,7 +34,7 @@ function createVariableKeyInput(variables) {
         {
           id: autocompleteId,
           options,
-          value: typeof props.value == "string" ? props.value : void 0,
+          value: variableKey,
           onChange: handleChange,
           filterOption,
           renderOption,
@@ -37,19 +43,27 @@ function createVariableKeyInput(variables) {
           icon: SearchIcon,
           placeholder: "Search variables...",
           fontSize: 1,
-          padding: 3
+          padding: 3,
+          customValidity: stale && variableKey ? staleVariableMessage(variableKey) : void 0
         }
       ),
+      stale && variableKey && /* @__PURE__ */ jsx(Card, { tone: "caution", padding: 3, marginTop: 2, radius: 2, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
+        /* @__PURE__ */ jsx(Text, { size: 1, children: /* @__PURE__ */ jsx(WarningOutlineIcon, {}) }),
+        /* @__PURE__ */ jsx(Text, { size: 1, children: staleVariableMessage(variableKey) })
+      ] }) }),
       selectedVariable?.description && /* @__PURE__ */ jsx(Box, { marginTop: 2, children: /* @__PURE__ */ jsx(Text, { size: 1, muted: !0, children: selectedVariable.description }) })
     ] });
   };
 }
 function createVariableInlineBlock(variables) {
   return function(props) {
-    const variableKey = props.value?.variableKey, variable = variables.find((candidate) => candidate.id === variableKey);
+    const variableKey = props.value?.variableKey, variable = variables.find((candidate) => candidate.id === variableKey), stale = isStaleVariable(variableKey, variables);
     return props.renderDefault({
       ...props,
-      renderPreview: () => /* @__PURE__ */ jsx(Box, { padding: 2, children: /* @__PURE__ */ jsx(Text, { size: 0, weight: "medium", children: variable?.name ?? variableKey ?? "Select variable" }) })
+      renderPreview: () => /* @__PURE__ */ jsx(Box, { padding: 2, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
+        /* @__PURE__ */ jsx(Text, { size: 0, weight: "medium", children: variable?.name ?? variableKey ?? "Select variable" }),
+        stale && /* @__PURE__ */ jsx(Badge, { tone: "caution", fontSize: 0, children: "Stale" })
+      ] }) })
     });
   };
 }
@@ -68,7 +82,10 @@ function interpolationVariables(variables, block) {
         name: "variableKey",
         title: "Variable",
         type: "string",
-        validation: (rule) => rule.required(),
+        validation: (rule) => [
+          rule.required(),
+          rule.custom((value) => isStaleVariable(typeof value == "string" ? value : void 0, variables) === !1 ? !0 : staleVariableMessage(value)).warning()
+        ],
         components: {
           field: VariableKeyField,
           input: createVariableKeyInput(variables)

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/components/VariableInlineBlock.tsx","../src/interpolationVariables.ts"],"sourcesContent":["import {SearchIcon} from '@sanity/icons'\nimport {Autocomplete, Box, Card, Text} from '@sanity/ui'\nimport {useCallback, useId} from 'react'\nimport {set, unset} from 'sanity'\nimport type {BlockProps, FieldProps, InputProps} from 'sanity'\nimport type {InterpolationVariable} from '../types'\n\ninterface VariableOption {\n  value: string\n  name: string\n  description?: string\n}\n\nexport function VariableKeyField(props: FieldProps) {\n  return <>{props.children}</>\n}\n\nexport function createVariableKeyInput(variables: InterpolationVariable[]) {\n  const options: VariableOption[] = variables.map((variable) => ({\n    value: variable.id,\n    name: variable.name,\n    description: variable.description,\n  }))\n\n  return function VariableKeyInput(props: InputProps) {\n    const autocompleteId = useId()\n    const selectedVariable = variables.find((variable) => variable.id === props.value)\n\n    const handleChange = useCallback(\n      (selectedValue: string) => {\n        props.onChange(selectedValue ? set(selectedValue) : unset())\n      },\n      [props],\n    )\n\n    const filterOption = useCallback((query: string, option: VariableOption) => {\n      return option.name.toLowerCase().includes(query.toLowerCase())\n    }, [])\n\n    const renderOption = useCallback((option: VariableOption) => {\n      return (\n        <Card as=\"button\" padding={3}>\n          <Text size={1} weight=\"medium\">\n            {option.name}\n          </Text>\n          {option.description && (\n            <Box marginTop={2}>\n              <Text size={0} muted>\n                {option.description}\n              </Text>\n            </Box>\n          )}\n        </Card>\n      )\n    }, [])\n\n    const renderValue = useCallback((_value: string, option?: VariableOption) => {\n      if (option) return option.name\n      const matchedOption = options.find((candidate) => candidate.value === _value)\n      return matchedOption?.name ?? _value\n    }, [])\n\n    return (\n      <>\n        <Autocomplete\n          id={autocompleteId}\n          options={options}\n          value={typeof props.value === 'string' ? props.value : undefined}\n          onChange={handleChange}\n          filterOption={filterOption}\n          renderOption={renderOption}\n          renderValue={renderValue}\n          openButton\n          icon={SearchIcon}\n          placeholder=\"Search variables...\"\n          fontSize={1}\n          padding={3}\n        />\n        {selectedVariable?.description && (\n          <Box marginTop={2}>\n            <Text size={1} muted>\n              {selectedVariable.description}\n            </Text>\n          </Box>\n        )}\n      </>\n    )\n  }\n}\n\nexport function createVariableInlineBlock(variables: InterpolationVariable[]) {\n  return function VariableInlineBlock(props: BlockProps) {\n    const value = props.value as {variableKey?: string}\n    const variableKey = value?.variableKey\n    const variable = variables.find((candidate) => candidate.id === variableKey)\n\n    return props.renderDefault({\n      ...props,\n      renderPreview: () => (\n        <Box padding={2}>\n          <Text size={0} weight=\"medium\">\n            {variable?.name ?? variableKey ?? 'Select variable'}\n          </Text>\n        </Box>\n      ),\n    })\n  }\n}\n","import {TagIcon} from '@sanity/icons'\nimport {defineArrayMember, defineField} from 'sanity'\nimport {\n  createVariableInlineBlock,\n  createVariableKeyInput,\n  VariableKeyField,\n} from './components/VariableInlineBlock'\nimport type {InterpolationVariable} from './types'\n\n/** @public */\nexport const VARIABLE_TYPE_PREFIX = 'pteInterpolationVariable'\n\n/** @public */\nexport function interpolationVariables(\n  variables: InterpolationVariable[],\n  block?: ReturnType<typeof defineArrayMember>,\n) {\n  const variableType = defineArrayMember({\n    type: 'object',\n    name: VARIABLE_TYPE_PREFIX,\n    title: 'Variable',\n    icon: TagIcon,\n    options: {\n      modal: {width: 0},\n    },\n    fields: [\n      defineField({\n        name: 'variableKey',\n        title: 'Variable',\n        type: 'string',\n        validation: (rule) => rule.required(),\n        components: {\n          field: VariableKeyField,\n          input: createVariableKeyInput(variables),\n        },\n      }),\n    ],\n    components: {\n      inlineBlock: createVariableInlineBlock(variables),\n    },\n  })\n\n  const baseBlock = block ?? defineArrayMember({type: 'block'})\n\n  return {\n    ...baseBlock,\n    of: [...((baseBlock as {of?: unknown[]}).of ?? []), variableType],\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/isStaleVariable.ts","../src/components/VariableInlineBlock.tsx","../src/interpolationVariables.ts"],"sourcesContent":["import type {InterpolationVariable} from './types'\n\nexport function isStaleVariable(\n  variableKey: string | undefined,\n  variables: InterpolationVariable[],\n): boolean {\n  if (typeof variableKey === 'undefined' || variableKey.length === 0) return false\n  const hasMatchingVariable = variables.some((variable) => variable.id === variableKey)\n  return hasMatchingVariable === false\n}\n\nexport function staleVariableMessage(variableKey: string): string {\n  return `Variable \"${variableKey}\" is no longer defined. Please select a valid variable.`\n}\n","import {SearchIcon, WarningOutlineIcon} from '@sanity/icons'\nimport {Autocomplete, Badge, Box, Card, Flex, Text} from '@sanity/ui'\nimport {useCallback, useId} from 'react'\nimport {set, unset} from 'sanity'\nimport type {BlockProps, FieldProps, InputProps} from 'sanity'\nimport {isStaleVariable, staleVariableMessage} from '../isStaleVariable'\nimport type {InterpolationVariable} from '../types'\n\ninterface VariableOption {\n  value: string\n  name: string\n  description?: string\n}\n\nexport function VariableKeyField(props: FieldProps) {\n  return <>{props.children}</>\n}\n\nexport function createVariableKeyInput(variables: InterpolationVariable[]) {\n  const options: VariableOption[] = variables.map((variable) => ({\n    value: variable.id,\n    name: variable.name,\n    description: variable.description,\n  }))\n\n  return function VariableKeyInput(props: InputProps) {\n    const autocompleteId = useId()\n    const selectedVariable = variables.find((variable) => variable.id === props.value)\n    const variableKey = typeof props.value === 'string' ? props.value : undefined\n    const stale = isStaleVariable(variableKey, variables)\n\n    const handleChange = useCallback(\n      (selectedValue: string) => {\n        props.onChange(selectedValue ? set(selectedValue) : unset())\n      },\n      [props],\n    )\n\n    const filterOption = useCallback((query: string, option: VariableOption) => {\n      return option.name.toLowerCase().includes(query.toLowerCase())\n    }, [])\n\n    const renderOption = useCallback((option: VariableOption) => {\n      return (\n        <Card as=\"button\" padding={3}>\n          <Text size={1} weight=\"medium\">\n            {option.name}\n          </Text>\n          {option.description && (\n            <Box marginTop={2}>\n              <Text size={0} muted>\n                {option.description}\n              </Text>\n            </Box>\n          )}\n        </Card>\n      )\n    }, [])\n\n    const renderValue = useCallback((_value: string, option?: VariableOption) => {\n      if (option) return option.name\n      const matchedOption = options.find((candidate) => candidate.value === _value)\n      return matchedOption?.name ?? _value\n    }, [])\n\n    return (\n      <>\n        <Autocomplete\n          id={autocompleteId}\n          options={options}\n          value={variableKey}\n          onChange={handleChange}\n          filterOption={filterOption}\n          renderOption={renderOption}\n          renderValue={renderValue}\n          openButton\n          icon={SearchIcon}\n          placeholder=\"Search variables...\"\n          fontSize={1}\n          padding={3}\n          customValidity={stale && variableKey ? staleVariableMessage(variableKey) : undefined}\n        />\n        {stale && variableKey && (\n          <Card tone=\"caution\" padding={3} marginTop={2} radius={2}>\n            <Flex align=\"center\" gap={2}>\n              <Text size={1}>\n                <WarningOutlineIcon />\n              </Text>\n              <Text size={1}>{staleVariableMessage(variableKey)}</Text>\n            </Flex>\n          </Card>\n        )}\n        {selectedVariable?.description && (\n          <Box marginTop={2}>\n            <Text size={1} muted>\n              {selectedVariable.description}\n            </Text>\n          </Box>\n        )}\n      </>\n    )\n  }\n}\n\nexport function createVariableInlineBlock(variables: InterpolationVariable[]) {\n  return function VariableInlineBlock(props: BlockProps) {\n    const value = props.value as {variableKey?: string}\n    const variableKey = value?.variableKey\n    const variable = variables.find((candidate) => candidate.id === variableKey)\n    const stale = isStaleVariable(variableKey, variables)\n\n    return props.renderDefault({\n      ...props,\n      renderPreview: () => (\n        <Box padding={2}>\n          <Flex align=\"center\" gap={2}>\n            <Text size={0} weight=\"medium\">\n              {variable?.name ?? variableKey ?? 'Select variable'}\n            </Text>\n            {stale && (\n              <Badge tone=\"caution\" fontSize={0}>\n                Stale\n              </Badge>\n            )}\n          </Flex>\n        </Box>\n      ),\n    })\n  }\n}\n","import {TagIcon} from '@sanity/icons'\nimport {defineArrayMember, defineField} from 'sanity'\nimport {\n  createVariableInlineBlock,\n  createVariableKeyInput,\n  VariableKeyField,\n} from './components/VariableInlineBlock'\nimport {isStaleVariable, staleVariableMessage} from './isStaleVariable'\nimport type {InterpolationVariable} from './types'\n\n/** @public */\nexport const VARIABLE_TYPE_PREFIX = 'pteInterpolationVariable'\n\n/** @public */\nexport function interpolationVariables(\n  variables: InterpolationVariable[],\n  block?: ReturnType<typeof defineArrayMember>,\n) {\n  const variableType = defineArrayMember({\n    type: 'object',\n    name: VARIABLE_TYPE_PREFIX,\n    title: 'Variable',\n    icon: TagIcon,\n    options: {\n      modal: {width: 0},\n    },\n    fields: [\n      defineField({\n        name: 'variableKey',\n        title: 'Variable',\n        type: 'string',\n        validation: (rule) => [\n          rule.required(),\n          rule\n            .custom((value) => {\n              const variableKey = typeof value === 'string' ? value : undefined\n              if (isStaleVariable(variableKey, variables) === false) return true\n              return staleVariableMessage(value as string)\n            })\n            .warning(),\n        ],\n        components: {\n          field: VariableKeyField,\n          input: createVariableKeyInput(variables),\n        },\n      }),\n    ],\n    components: {\n      inlineBlock: createVariableInlineBlock(variables),\n    },\n  })\n\n  const baseBlock = block ?? defineArrayMember({type: 'block'})\n\n  return {\n    ...baseBlock,\n    of: [...((baseBlock as {of?: unknown[]}).of ?? []), variableType],\n  }\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-pte-interpolation",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "type": "module",
   "license": "MIT",
   "description": "Sanity Studio plugin for interpolating values into Portable Text Editor fields",
@@ -50,6 +50,9 @@
     "@sanity/pkg-utils": "^10.4.4",
     "@sanity/plugin-kit": "^4.0.20",
     "@sanity/ui": "^3.1.13",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "react-dom": "^19.2.4",
     "rimraf": "^6.1.3",
     "typescript": "~5.9.3"
   },

package/src/__tests__/VariableInlineBlock.test.tsx

@@ -1,108 +1,174 @@
-import {type ReactElement} from 'react'
-import {describe, expect, it, vi} from 'vitest'
-import {createVariableInlineBlock, createVariableKeyInput} from '../components/VariableInlineBlock'
-import type {BlockProps, InputProps} from 'sanity'
+import {type ComponentType, type ReactElement, type ReactNode} from 'react'
+import {cleanup, render, screen} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import {ThemeProvider} from '@sanity/ui'
+import {buildTheme} from '@sanity/ui/theme'
+import {afterEach, describe, expect, it, vi} from 'vitest'
+import {
+  VariableKeyField,
+  createVariableInlineBlock,
+  createVariableKeyInput,
+} from '../components/VariableInlineBlock'
 import type {InterpolationVariable} from '../types'
 
-vi.mock('react', async () => {
-  const actual = await vi.importActual('react')
-  return {
-    ...actual,
-    useId: () => 'test-autocomplete-id',
-    useCallback: (callback: unknown) => callback,
-  }
+// jsdom does not implement window.matchMedia, which @sanity/ui components depend on
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation((query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
 })
 
+afterEach(cleanup)
+
+const theme = buildTheme()
+
 const testVariables: InterpolationVariable[] = [
   {id: 'firstName', name: 'First name', description: 'First name of the recipient'},
   {id: 'email', name: 'Email address'},
 ]
 
-function findTextInElement(element: unknown): string[] {
-  if (typeof element === 'string') return [element]
-  if (!element || typeof element !== 'object') return []
-  const el = element as {props?: Record<string, unknown>}
-  if (!el.props) return []
-  const {children} = el.props
-  if (Array.isArray(children)) return children.flatMap(findTextInElement)
-  return findTextInElement(children)
-}
-
-function findPropInElement(element: unknown, propName: string): unknown {
-  if (!element || typeof element !== 'object') return undefined
-  const el = element as {props?: Record<string, unknown>}
-  if (!el.props) return undefined
-  if (propName in el.props) return el.props[propName]
-  const {children} = el.props
-  if (Array.isArray(children)) {
-    for (const child of children) {
-      const found = findPropInElement(child, propName)
-      if (found !== undefined) return found
-    }
-  }
-  return findPropInElement(children, propName)
-}
-
 describe('createVariableInlineBlock', () => {
-  function captureRenderPreview(variableKey: string | undefined): ReactElement | undefined {
+  function renderPreview(variableKey: string | undefined) {
     const VariableInlineBlock = createVariableInlineBlock(testVariables)
-    let capturedRenderPreview: ((...args: unknown[]) => ReactElement) | undefined
-
-    VariableInlineBlock({
-      value: {variableKey},
-      renderDefault: (props: unknown) => {
-        capturedRenderPreview = (props as {renderPreview?: (...args: unknown[]) => ReactElement})
-          .renderPreview
-        return null as unknown as ReactElement
-      },
-    } as unknown as BlockProps)
-
-    return capturedRenderPreview?.()
+    const Block = VariableInlineBlock as unknown as ComponentType<{
+      value: {variableKey?: string}
+      renderDefault: (props: {renderPreview?: () => ReactElement}) => ReactElement
+    }>
+
+    return render(
+      <ThemeProvider theme={theme}>
+        <Block
+          value={{variableKey}}
+          renderDefault={(props) => (props.renderPreview?.() ?? null) as unknown as ReactElement}
+        />
+      </ThemeProvider>,
+    )
   }
 
   it('renders the readable name when variableKey matches a variable id', () => {
-    expect(findTextInElement(captureRenderPreview('firstName'))).toContain('First name')
+    renderPreview('firstName')
+    expect(screen.getByText('First name')).toBeDefined()
   })
 
   it('renders the raw variableKey when no variable matches', () => {
-    expect(findTextInElement(captureRenderPreview('unknown'))).toContain('unknown')
+    renderPreview('unknown')
+    expect(screen.getByText('unknown')).toBeDefined()
   })
 
   it('renders "Select variable" when variableKey is undefined', () => {
-    expect(findTextInElement(captureRenderPreview(undefined))).toContain('Select variable')
+    renderPreview(undefined)
+    expect(screen.getByText('Select variable')).toBeDefined()
+  })
+
+  it('renders a "Stale" badge when variableKey does not match any variable', () => {
+    renderPreview('staleKey')
+    expect(screen.getByText('Stale')).toBeDefined()
+  })
+
+  it('does not render a "Stale" badge when variableKey matches', () => {
+    renderPreview('firstName')
+    expect(screen.queryByText('Stale')).toBeNull()
   })
 })
 
 describe('createVariableKeyInput', () => {
-  function renderInput(value: string | undefined): ReactElement {
+  function renderInput(value: string | undefined, onChange = vi.fn()) {
     const VariableKeyInput = createVariableKeyInput(testVariables)
-    return VariableKeyInput({
-      value,
-      onChange: vi.fn(),
-    } as unknown as InputProps) as ReactElement
+    const Input = VariableKeyInput as unknown as ComponentType<{
+      value?: string
+      onChange: () => void
+    }>
+
+    render(
+      <ThemeProvider theme={theme}>
+        <Input value={value} onChange={onChange} />
+      </ThemeProvider>,
+    )
+
+    return {onChange}
   }
 
   it('includes the description when the selected variable has one', () => {
-    expect(findTextInElement(renderInput('firstName'))).toContain('First name of the recipient')
+    renderInput('firstName')
+    expect(screen.getByText('First name of the recipient')).toBeDefined()
   })
 
-  it('does not include description when the selected variable has none', () => {
-    const element = renderInput('email')
-    const allText = findTextInElement(element)
-    const textsOutsideAutocomplete = allText.filter((text) => text !== 'Search variables...')
-    expect(textsOutsideAutocomplete).toHaveLength(0)
+  it('does not include the description for a variable that has none', () => {
+    renderInput('email')
+    expect(screen.queryByText('First name of the recipient')).toBeNull()
   })
 
-  it('does not include description when no variable is selected', () => {
-    const element = renderInput(undefined)
-    const allText = findTextInElement(element)
-    const textsOutsideAutocomplete = allText.filter((text) => text !== 'Search variables...')
-    expect(textsOutsideAutocomplete).toHaveLength(0)
+  it('does not include the description when no variable is selected', () => {
+    renderInput(undefined)
+    expect(screen.queryByText('First name of the recipient')).toBeNull()
   })
 
   it('renders a search placeholder', () => {
-    const element = renderInput(undefined)
-    const placeholder = findPropInElement(element, 'placeholder')
-    expect(placeholder).toBe('Search variables...')
+    renderInput(undefined)
+    expect(screen.getByPlaceholderText('Search variables...')).toBeDefined()
+  })
+
+  it('renders a stale warning when variableKey is stale', () => {
+    renderInput('staleKey')
+    expect(screen.getByText(/is no longer defined/)).toBeDefined()
+  })
+
+  it('does not render a stale warning for a matched key or undefined value', () => {
+    renderInput('firstName')
+    expect(screen.queryByText(/is no longer defined/)).toBeNull()
+    cleanup()
+
+    renderInput(undefined)
+    expect(screen.queryByText(/is no longer defined/)).toBeNull()
+  })
+
+  it('filters options by name when typing', async () => {
+    const user = userEvent.setup()
+    renderInput(undefined)
+
+    const input = screen.getByPlaceholderText('Search variables...')
+    await user.type(input, 'Email')
+
+    expect(screen.getByText('Email address')).toBeDefined()
+    expect(screen.queryByText('First name')).toBeNull()
+  })
+
+  it('calls onChange when selecting an option', async () => {
+    const user = userEvent.setup()
+    const {onChange} = renderInput(undefined)
+
+    const input = screen.getByPlaceholderText('Search variables...')
+    await user.type(input, 'First')
+
+    const option = await screen.findByText('First name')
+    await user.click(option)
+
+    expect(onChange).toHaveBeenCalled()
+  })
+})
+
+describe('VariableKeyField', () => {
+  const Field = VariableKeyField as unknown as ComponentType<{children: ReactNode}>
+
+  it('renders its children', () => {
+    render(<Field>child content</Field>)
+    expect(screen.getByText('child content')).toBeDefined()
+  })
+
+  it('renders nested element children', () => {
+    render(
+      <Field>
+        <span>nested child</span>
+      </Field>,
+    )
+    expect(screen.getByText('nested child')).toBeDefined()
   })
 })

package/src/__tests__/interpolationVariables.test.ts

@@ -93,4 +93,39 @@ describe('interpolationVariables', () => {
       name: VARIABLE_TYPE_PREFIX,
     })
   })
+
+  describe('variableKey custom validation', () => {
+    function extractCustomValidator(variables: typeof testVariables): (value: unknown) => unknown {
+      const result = interpolationVariables(variables)
+      const ofArray = result.of as Array<{fields?: Array<{validation?: unknown}>}>
+      const variableKeyField = ofArray[0].fields?.[0]
+
+      let capturedCustomValidator: ((value: unknown) => unknown) | undefined
+      const mockRule = {
+        required: () => mockRule,
+        custom: (validator: (value: unknown) => unknown) => {
+          capturedCustomValidator = validator
+          return mockRule
+        },
+        warning: () => mockRule,
+      }
+
+      ;(variableKeyField?.validation as (rule: typeof mockRule) => unknown[])(mockRule)
+
+      if (!capturedCustomValidator) throw new Error('Custom validator was not captured')
+      return capturedCustomValidator
+    }
+
+    it('validation returns a message string for a stale variableKey', () => {
+      const validator = extractCustomValidator(testVariables)
+      const validationResult = validator('removedVariable')
+      expect(validationResult).toBeTypeOf('string')
+      expect(validationResult).toContain('removedVariable')
+    })
+
+    it('validation returns true for a valid variableKey', () => {
+      const validator = extractCustomValidator(testVariables)
+      expect(validator('firstName')).toBe(true)
+    })
+  })
 })

package/src/__tests__/isStaleVariable.test.ts

@@ -0,0 +1,30 @@
+import {describe, expect, it} from 'vitest'
+import {isStaleVariable} from '../isStaleVariable'
+import type {InterpolationVariable} from '../types'
+
+const testVariables: InterpolationVariable[] = [
+  {id: 'firstName', name: 'First name'},
+  {id: 'email', name: 'Email address'},
+]
+
+describe('isStaleVariable', () => {
+  it('returns false when variableKey is undefined', () => {
+    expect(isStaleVariable(undefined, testVariables)).toBe(false)
+  })
+
+  it('returns false when variableKey is empty string', () => {
+    expect(isStaleVariable('', testVariables)).toBe(false)
+  })
+
+  it('returns false when variableKey matches a variable id', () => {
+    expect(isStaleVariable('firstName', testVariables)).toBe(false)
+  })
+
+  it('returns true when variableKey matches no variable id', () => {
+    expect(isStaleVariable('removed', testVariables)).toBe(true)
+  })
+
+  it('returns true when variables array is empty', () => {
+    expect(isStaleVariable('anything', [])).toBe(true)
+  })
+})

package/src/components/VariableInlineBlock.tsx

@@ -1,8 +1,9 @@
-import {SearchIcon} from '@sanity/icons'
-import {Autocomplete, Box, Card, Text} from '@sanity/ui'
+import {SearchIcon, WarningOutlineIcon} from '@sanity/icons'
+import {Autocomplete, Badge, Box, Card, Flex, Text} from '@sanity/ui'
 import {useCallback, useId} from 'react'
 import {set, unset} from 'sanity'
 import type {BlockProps, FieldProps, InputProps} from 'sanity'
+import {isStaleVariable, staleVariableMessage} from '../isStaleVariable'
 import type {InterpolationVariable} from '../types'
 
 interface VariableOption {
@@ -25,6 +26,8 @@ export function createVariableKeyInput(variables: InterpolationVariable[]) {
   return function VariableKeyInput(props: InputProps) {
     const autocompleteId = useId()
     const selectedVariable = variables.find((variable) => variable.id === props.value)
+    const variableKey = typeof props.value === 'string' ? props.value : undefined
+    const stale = isStaleVariable(variableKey, variables)
 
     const handleChange = useCallback(
       (selectedValue: string) => {
@@ -65,7 +68,7 @@ export function createVariableKeyInput(variables: InterpolationVariable[]) {
         <Autocomplete
           id={autocompleteId}
           options={options}
-          value={typeof props.value === 'string' ? props.value : undefined}
+          value={variableKey}
           onChange={handleChange}
           filterOption={filterOption}
           renderOption={renderOption}
@@ -75,7 +78,18 @@ export function createVariableKeyInput(variables: InterpolationVariable[]) {
           placeholder="Search variables..."
           fontSize={1}
           padding={3}
+          customValidity={stale && variableKey ? staleVariableMessage(variableKey) : undefined}
         />
+        {stale && variableKey && (
+          <Card tone="caution" padding={3} marginTop={2} radius={2}>
+            <Flex align="center" gap={2}>
+              <Text size={1}>
+                <WarningOutlineIcon />
+              </Text>
+              <Text size={1}>{staleVariableMessage(variableKey)}</Text>
+            </Flex>
+          </Card>
+        )}
         {selectedVariable?.description && (
           <Box marginTop={2}>
             <Text size={1} muted>
@@ -93,14 +107,22 @@ export function createVariableInlineBlock(variables: InterpolationVariable[]) {
     const value = props.value as {variableKey?: string}
     const variableKey = value?.variableKey
     const variable = variables.find((candidate) => candidate.id === variableKey)
+    const stale = isStaleVariable(variableKey, variables)
 
     return props.renderDefault({
       ...props,
       renderPreview: () => (
         <Box padding={2}>
-          <Text size={0} weight="medium">
-            {variable?.name ?? variableKey ?? 'Select variable'}
-          </Text>
+          <Flex align="center" gap={2}>
+            <Text size={0} weight="medium">
+              {variable?.name ?? variableKey ?? 'Select variable'}
+            </Text>
+            {stale && (
+              <Badge tone="caution" fontSize={0}>
+                Stale
+              </Badge>
+            )}
+          </Flex>
         </Box>
       ),
     })

package/src/interpolationVariables.ts

@@ -5,6 +5,7 @@ import {
   createVariableKeyInput,
   VariableKeyField,
 } from './components/VariableInlineBlock'
+import {isStaleVariable, staleVariableMessage} from './isStaleVariable'
 import type {InterpolationVariable} from './types'
 
 /** @public */
@@ -28,7 +29,16 @@ export function interpolationVariables(
         name: 'variableKey',
         title: 'Variable',
         type: 'string',
-        validation: (rule) => rule.required(),
+        validation: (rule) => [
+          rule.required(),
+          rule
+            .custom((value) => {
+              const variableKey = typeof value === 'string' ? value : undefined
+              if (isStaleVariable(variableKey, variables) === false) return true
+              return staleVariableMessage(value as string)
+            })
+            .warning(),
+        ],
         components: {
           field: VariableKeyField,
           input: createVariableKeyInput(variables),

package/src/isStaleVariable.ts

@@ -0,0 +1,14 @@
+import type {InterpolationVariable} from './types'
+
+export function isStaleVariable(
+  variableKey: string | undefined,
+  variables: InterpolationVariable[],
+): boolean {
+  if (typeof variableKey === 'undefined' || variableKey.length === 0) return false
+  const hasMatchingVariable = variables.some((variable) => variable.id === variableKey)
+  return hasMatchingVariable === false
+}
+
+export function staleVariableMessage(variableKey: string): string {
+  return `Variable "${variableKey}" is no longer defined. Please select a valid variable.`
+}