@liiift-studio/sanity-font-manager 2.2.0 → 2.3.1

package/dist/index.mjs

@@ -2835,7 +2835,7 @@ var SingleUploaderTool = (props) => {
         }
       )
     }
-  ), renderFontSection("ttf"), status === "ready" && (fileInput == null ? void 0 : fileInput.ttf) && /* @__PURE__ */ React7.createElement(Grid3, { columns: [2], gap: 2 }, /* @__PURE__ */ React7.createElement(
+  ), renderFontSection("ttf"), status === "ready" && (fileInput == null ? void 0 : fileInput.ttf) && /* @__PURE__ */ React7.createElement(Grid3, { columns: [1, 2], gap: 2 }, /* @__PURE__ */ React7.createElement(
     Button5,
     {
       mode: "ghost",
@@ -3499,6 +3499,392 @@ var UploadButton = forwardRef(({ handleUpload }, ref) => {
 UploadButton.displayName = "UploadButton";
 var UploadButton_default = UploadButton;
 
+// src/components/KeyValueInput.jsx
+import React12, { useState as useState8, useCallback as useCallback7 } from "react";
+import { Button as Button9, Grid as Grid5, Stack as Stack8, TextInput as TextInput2 } from "@sanity/ui";
+import { AddIcon, ArrowDownIcon, ArrowUpIcon, TrashIcon as TrashIcon3 } from "@sanity/icons";
+import { set as set4 } from "sanity";
+function KeyValueInput({ value = [], onChange }) {
+  const [pairs, setPairs] = useState8(value);
+  const handlePairChange = useCallback7((index, field, fieldValue) => {
+    const updatedPairs = pairs.map((pair, idx) => idx === index ? { ...pair, [field]: fieldValue } : pair);
+    setPairs(updatedPairs);
+    onChange(set4(updatedPairs));
+  }, [pairs, onChange]);
+  const handleAddPair = useCallback7(() => {
+    const newPair = { key: "", value: "", _key: Math.random().toString(36).substr(2, 9) };
+    const updatedPairs = [...pairs, newPair];
+    setPairs(updatedPairs);
+    onChange(set4(updatedPairs));
+  }, [pairs, onChange]);
+  const handleRemovePair = useCallback7((index) => {
+    const updatedPairs = pairs.filter((_, idx) => idx !== index);
+    setPairs(updatedPairs);
+    onChange(set4(updatedPairs));
+  }, [pairs, onChange]);
+  const handleMoveUp = useCallback7((index) => {
+    if (index === 0) return;
+    const updatedPairs = [...pairs];
+    [updatedPairs[index], updatedPairs[index - 1]] = [updatedPairs[index - 1], updatedPairs[index]];
+    setPairs(updatedPairs);
+    onChange(set4(updatedPairs));
+  }, [pairs, onChange]);
+  const handleMoveDown = useCallback7((index) => {
+    if (index === pairs.length - 1) return;
+    const updatedPairs = [...pairs];
+    [updatedPairs[index], updatedPairs[index + 1]] = [updatedPairs[index + 1], updatedPairs[index]];
+    setPairs(updatedPairs);
+    onChange(set4(updatedPairs));
+  }, [pairs, onChange]);
+  return /* @__PURE__ */ React12.createElement(Stack8, { space: 3 }, pairs.map((pair, index) => /* @__PURE__ */ React12.createElement(Grid5, { className: "manualButtonWrap", columns: [2], key: index, gap: 0, style: { position: "relative" } }, /* @__PURE__ */ React12.createElement("div", { style: { position: "absolute", height: "100%", top: "0", left: "-10px", width: "min-content", transform: "translate(-100%, 0%)" } }, /* @__PURE__ */ React12.createElement("button", { className: "manualButton manualButtonUp", style: { fontSize: "15px", height: "50%" }, onClick: () => handleMoveUp(index) }, /* @__PURE__ */ React12.createElement(ArrowUpIcon, null)), /* @__PURE__ */ React12.createElement("button", { className: "manualButton manualButtonDown", style: { fontSize: "15px", height: "50%" }, onClick: () => handleMoveDown(index) }, /* @__PURE__ */ React12.createElement(ArrowDownIcon, null))), /* @__PURE__ */ React12.createElement(
+    TextInput2,
+    {
+      value: pair.key,
+      onChange: (e) => handlePairChange(index, "key", e.target.value),
+      placeholder: "Key"
+    }
+  ), /* @__PURE__ */ React12.createElement("div", { style: { marginLeft: "-1px" } }, /* @__PURE__ */ React12.createElement(
+    TextInput2,
+    {
+      value: pair.value,
+      onChange: (e) => handlePairChange(index, "value", e.target.value),
+      placeholder: "Value"
+    }
+  )), /* @__PURE__ */ React12.createElement(
+    "button",
+    {
+      className: "manualButton",
+      onClick: () => handleRemovePair(index),
+      style: { position: "absolute", top: "0", right: "-10px", transform: "translate(100%, 0%)" }
+    },
+    /* @__PURE__ */ React12.createElement(TrashIcon3, null)
+  ))), /* @__PURE__ */ React12.createElement(Button9, { tone: "primary", onClick: handleAddPair, icon: AddIcon, text: "Add Row" }));
+}
+
+// src/components/KeyValueReferenceInput.jsx
+import React13, { useState as useState9, useCallback as useCallback8, useEffect as useEffect6 } from "react";
+import { Button as Button10, Stack as Stack9, TextInput as TextInput3, Box as Box4, Card as Card4, Flex as Flex8, Text as Text11, Dialog, Menu as Menu2, MenuButton as MenuButton2, MenuItem as MenuItem2, Autocomplete } from "@sanity/ui";
+import { AddIcon as AddIcon2, ArrowDownIcon as ArrowDownIcon2, ArrowUpIcon as ArrowUpIcon2, TrashIcon as TrashIcon4, SyncIcon, EllipsisHorizontalIcon } from "@sanity/icons";
+import { set as set5, useFormValue as useFormValue8 } from "sanity";
+import { nanoid as nanoid8 } from "nanoid";
+function KeyValueReferenceInput(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const { value = [], onChange, schemaType, referenceType, fetchReferences, topActions } = props;
+  const [pairs, setPairs] = useState9(value);
+  const [referenceData, setReferenceData] = useState9({});
+  const [isDialogOpen, setIsDialogOpen] = useState9(false);
+  const [editingIndex, setEditingIndex] = useState9(null);
+  const [availableReferences, setAvailableReferences] = useState9([]);
+  const sanityClient = useSanityClient();
+  const formDocument = useFormValue8([]);
+  useEffect6(() => {
+    const refIds = pairs.filter((p) => {
+      var _a2;
+      return (_a2 = p.value) == null ? void 0 : _a2._ref;
+    }).map((p) => p.value._ref);
+    if (refIds.length === 0) return;
+    if (!sanityClient) {
+      const fallback = {};
+      refIds.forEach((id) => {
+        fallback[id] = `Reference (${id.substring(0, 6)}...)`;
+      });
+      setReferenceData(fallback);
+      return;
+    }
+    sanityClient.fetch(`*[_id in $ids]{_id, title}`, { ids: refIds }).then((result) => {
+      const map = {};
+      result.forEach((item) => {
+        map[item._id] = item.title;
+      });
+      setReferenceData(map);
+    }).catch((err) => {
+      console.error("Error fetching reference data:", err);
+      const fallback = {};
+      refIds.forEach((id) => {
+        fallback[id] = `Reference (${id.substring(0, 6)}...)`;
+      });
+      setReferenceData(fallback);
+    });
+  }, [pairs, sanityClient]);
+  const handlePairChange = useCallback8((index, field, fieldValue) => {
+    const updatedPairs = pairs.map((pair, idx) => idx === index ? { ...pair, [field]: fieldValue } : pair);
+    setPairs(updatedPairs);
+    onChange(set5(updatedPairs));
+  }, [pairs, onChange]);
+  const handleAddPair = useCallback8(() => {
+    const updatedPairs = [...pairs, { key: "", value: null, _key: nanoid8() }];
+    setPairs(updatedPairs);
+    onChange(set5(updatedPairs));
+  }, [pairs, onChange]);
+  const handleRemovePair = useCallback8((index) => {
+    const updatedPairs = pairs.filter((_, idx) => idx !== index);
+    setPairs(updatedPairs);
+    onChange(set5(updatedPairs));
+  }, [pairs, onChange]);
+  const handleMoveUp = useCallback8((index) => {
+    if (index === 0) return;
+    const updatedPairs = [...pairs];
+    [updatedPairs[index], updatedPairs[index - 1]] = [updatedPairs[index - 1], updatedPairs[index]];
+    setPairs(updatedPairs);
+    onChange(set5(updatedPairs));
+  }, [pairs, onChange]);
+  const handleMoveDown = useCallback8((index) => {
+    if (index === pairs.length - 1) return;
+    const updatedPairs = [...pairs];
+    [updatedPairs[index], updatedPairs[index + 1]] = [updatedPairs[index + 1], updatedPairs[index]];
+    setPairs(updatedPairs);
+    onChange(set5(updatedPairs));
+  }, [pairs, onChange]);
+  const openReferenceSelector = useCallback8(async (index) => {
+    setEditingIndex(index);
+    if (!sanityClient) {
+      console.error("KeyValueReferenceInput: Sanity client not available");
+      return;
+    }
+    try {
+      let refs;
+      if (fetchReferences) {
+        refs = await fetchReferences(sanityClient, formDocument);
+      } else if (referenceType) {
+        refs = await sanityClient.fetch(`*[_type == $type]{_id, title}`, { type: referenceType });
+      } else {
+        console.warn("KeyValueReferenceInput: provide a fetchReferences prop or referenceType");
+        refs = [];
+      }
+      setAvailableReferences(refs);
+      setIsDialogOpen(true);
+    } catch (err) {
+      console.error("Error fetching available references:", err);
+    }
+  }, [sanityClient, fetchReferences, referenceType, formDocument]);
+  const closeDialog = useCallback8(() => {
+    setIsDialogOpen(false);
+    setEditingIndex(null);
+  }, []);
+  const handleReferenceSelect = useCallback8((reference) => {
+    if (editingIndex === null) return;
+    handlePairChange(editingIndex, "value", { _type: "reference", _ref: reference._id, _weak: true });
+    closeDialog();
+  }, [editingIndex, handlePairChange, closeDialog]);
+  const referenceOptions = availableReferences.map((ref) => ({ value: ref._id, title: ref.title }));
+  const keyField = (_d = (_c = (_b = (_a = schemaType == null ? void 0 : schemaType.options) == null ? void 0 : _a.of) == null ? void 0 : _b[0]) == null ? void 0 : _c.fields) == null ? void 0 : _d.find((f) => f.name === "key");
+  const valueField = (_h = (_g = (_f = (_e = schemaType == null ? void 0 : schemaType.options) == null ? void 0 : _e.of) == null ? void 0 : _f[0]) == null ? void 0 : _g.fields) == null ? void 0 : _h.find((f) => f.name === "value");
+  const keyTitle = (keyField == null ? void 0 : keyField.title) || "Key";
+  const valueTitle = (valueField == null ? void 0 : valueField.title) || "Value";
+  const keyPlaceholder = (keyField == null ? void 0 : keyField.placeholder) || "Enter key";
+  const pickerLabel = referenceType || valueTitle.toLowerCase();
+  return /* @__PURE__ */ React13.createElement(Stack9, { space: 3 }, topActions && /* @__PURE__ */ React13.createElement(Box4, { paddingBottom: 2 }, topActions), /* @__PURE__ */ React13.createElement(Box4, null, /* @__PURE__ */ React13.createElement(Stack9, { space: 2 }, pairs.map((pair, index) => {
+    var _a2;
+    return /* @__PURE__ */ React13.createElement(Box4, { key: index, style: { position: "relative" } }, /* @__PURE__ */ React13.createElement("div", { style: { position: "absolute", height: "100%", top: "0", left: "-5px", width: "min-content", transform: "translate(-100%, 0%)" } }, /* @__PURE__ */ React13.createElement("button", { className: "manualButton manualButtonUp", style: { fontSize: "15px", height: "50%" }, onClick: () => handleMoveUp(index) }, /* @__PURE__ */ React13.createElement(ArrowUpIcon2, null)), /* @__PURE__ */ React13.createElement("button", { className: "manualButton manualButtonDown", style: { fontSize: "15px", height: "50%" }, onClick: () => handleMoveDown(index) }, /* @__PURE__ */ React13.createElement(ArrowDownIcon2, null))), /* @__PURE__ */ React13.createElement(Flex8, { gap: 2, align: "flex-start" }, /* @__PURE__ */ React13.createElement(Box4, { flex: 1 }, /* @__PURE__ */ React13.createElement(
+      TextInput3,
+      {
+        value: pair.key,
+        onChange: (e) => handlePairChange(index, "key", e.target.value),
+        placeholder: keyPlaceholder
+      }
+    )), /* @__PURE__ */ React13.createElement(Box4, { flex: 1, style: { minHeight: "100%" } }, ((_a2 = pair.value) == null ? void 0 : _a2._ref) ? /* @__PURE__ */ React13.createElement(Card4, { className: "referenceCard", radius: 2, tone: "primary", style: { paddingLeft: "1rem", height: "fit-content" } }, /* @__PURE__ */ React13.createElement(Flex8, { align: "center", justify: "space-between" }, /* @__PURE__ */ React13.createElement(
+      Text11,
+      {
+        size: 2,
+        style: { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", maxWidth: "90%" }
+      },
+      referenceData[pair.value._ref] || "Loading..."
+    ), /* @__PURE__ */ React13.createElement(
+      MenuButton2,
+      {
+        button: /* @__PURE__ */ React13.createElement(Button10, { icon: EllipsisHorizontalIcon, mode: "bleed", title: "Options" }),
+        id: `ref-options-${index}`,
+        menu: /* @__PURE__ */ React13.createElement(Menu2, null, /* @__PURE__ */ React13.createElement(MenuItem2, { tone: "critical", icon: TrashIcon4, text: "Remove", onClick: () => handlePairChange(index, "value", null) }), /* @__PURE__ */ React13.createElement(MenuItem2, { icon: SyncIcon, text: "Replace", onClick: () => openReferenceSelector(index) })),
+        popover: { portal: true, tone: "default", placement: "left" }
+      }
+    ))) : /* @__PURE__ */ React13.createElement(
+      Box4,
+      {
+        padding: 2,
+        style: { minHeight: "100%", border: "1px dashed #ccc", borderRadius: "4px", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer" },
+        onClick: () => openReferenceSelector(index)
+      },
+      /* @__PURE__ */ React13.createElement(Text11, { muted: true, size: 2 }, "Click to select a ", pickerLabel)
+    ))), /* @__PURE__ */ React13.createElement(
+      "button",
+      {
+        className: "manualButton",
+        onClick: () => handleRemovePair(index),
+        style: { position: "absolute", top: "0", right: "-7px", transform: "translate(100%, 0%)" }
+      },
+      /* @__PURE__ */ React13.createElement(TrashIcon4, null)
+    ));
+  }))), /* @__PURE__ */ React13.createElement(Button10, { tone: "primary", mode: "ghost", onClick: handleAddPair, icon: AddIcon2, text: `Add ${keyTitle}` }), isDialogOpen && /* @__PURE__ */ React13.createElement(
+    Dialog,
+    {
+      header: `Select a ${pickerLabel}`,
+      id: "reference-selector-dialog",
+      onClose: closeDialog,
+      width: 1
+    },
+    /* @__PURE__ */ React13.createElement(Box4, { padding: 4 }, /* @__PURE__ */ React13.createElement(
+      Autocomplete,
+      {
+        id: "reference-autocomplete",
+        options: referenceOptions,
+        placeholder: `Search ${pickerLabel}s...`,
+        renderOption: (option) => /* @__PURE__ */ React13.createElement(Card4, { key: option.value, padding: 3, radius: 2, tone: "default", style: { cursor: "pointer" } }, /* @__PURE__ */ React13.createElement(Text11, { size: 2 }, option.title)),
+        renderValue: (val) => {
+          var _a2;
+          return ((_a2 = referenceOptions.find((o) => o.value === val)) == null ? void 0 : _a2.title) || "";
+        },
+        onChange: (newValue) => {
+          const selected = availableReferences.find((r) => r._id === newValue);
+          if (selected) handleReferenceSelect(selected);
+        },
+        openButton: true,
+        fontSize: 2
+      }
+    ))
+  ));
+}
+
+// src/components/VariableInstanceReferencesInput.jsx
+import React14, { useState as useState10, useCallback as useCallback9 } from "react";
+import { Button as Button11, Flex as Flex9, Dialog as Dialog2, Box as Box5, Stack as Stack10, Text as Text12 } from "@sanity/ui";
+import { SyncIcon as SyncIcon2, DocumentTextIcon } from "@sanity/icons";
+import { set as set6, useFormValue as useFormValue9 } from "sanity";
+import { nanoid as nanoid9 } from "nanoid";
+function VariableInstanceReferencesInput(props) {
+  const { value = [], onChange } = props;
+  const [isAutofilling, setIsAutofilling] = useState10(false);
+  const [showConfirmDialog, setShowConfirmDialog] = useState10(false);
+  const [pendingAction, setPendingAction] = useState10(null);
+  const formDocument = useFormValue9([]);
+  const sanityClient = useSanityClient();
+  const fetchReferences = useCallback9(async (client, doc) => {
+    const typefaceName = doc == null ? void 0 : doc.typefaceName;
+    if (!typefaceName) {
+      return client.fetch(`*[_type == 'font' && variableFont != true]{_id, title}`, {});
+    }
+    return client.fetch(
+      `*[_type == 'font' && typefaceName == $typefaceName && variableFont != true]{_id, title}`,
+      { typefaceName }
+    );
+  }, []);
+  const performAutofillWithMatching = useCallback9(async (mode) => {
+    setIsAutofilling(true);
+    try {
+      if (!(formDocument == null ? void 0 : formDocument.variableInstances)) {
+        console.warn("Cannot autofill: no variableInstances data on this document");
+        return;
+      }
+      const mappings = await parseVariableFontInstances(formDocument, sanityClient);
+      if (mappings.length === 0) {
+        console.warn("No variable instances could be parsed from this font");
+        return;
+      }
+      const updatedPairs = mode === "replace" ? mappings : [...value, ...mappings.filter((m) => !value.some((p) => p.key === m.key))];
+      onChange(set6(updatedPairs));
+    } catch (err) {
+      console.error("Error during autofill with matching:", err);
+    } finally {
+      setIsAutofilling(false);
+    }
+  }, [formDocument, sanityClient, value, onChange]);
+  const performAutofillKeysOnly = useCallback9(async (mode) => {
+    setIsAutofilling(true);
+    try {
+      if (!(formDocument == null ? void 0 : formDocument.variableInstances)) {
+        console.warn("Cannot autofill: no variableInstances data on this document");
+        return;
+      }
+      let instances;
+      try {
+        instances = JSON.parse(formDocument.variableInstances);
+      } catch {
+        console.error("Invalid variableInstances JSON on this document");
+        return;
+      }
+      const keys = Object.keys(instances);
+      if (keys.length === 0) {
+        console.warn("No variable instances found in JSON");
+        return;
+      }
+      const keyOnlyPairs = keys.map((key) => ({ key, value: null, _key: nanoid9() }));
+      const updatedPairs = mode === "replace" ? keyOnlyPairs : [...value, ...keyOnlyPairs.filter((p) => !value.some((existing) => existing.key === p.key))];
+      onChange(set6(updatedPairs));
+    } catch (err) {
+      console.error("Error during keys-only autofill:", err);
+    } finally {
+      setIsAutofilling(false);
+    }
+  }, [formDocument, value, onChange]);
+  const handleAutofillWithMatching = useCallback9(() => {
+    if (value.length > 0) {
+      setPendingAction("matching");
+      setShowConfirmDialog(true);
+      return;
+    }
+    performAutofillWithMatching("replace");
+  }, [value, performAutofillWithMatching]);
+  const handleAutofillKeysOnly = useCallback9(() => {
+    if (value.length > 0) {
+      setPendingAction("keysOnly");
+      setShowConfirmDialog(true);
+      return;
+    }
+    performAutofillKeysOnly("replace");
+  }, [value, performAutofillKeysOnly]);
+  const handleConfirmChoice = useCallback9(async (choice) => {
+    setShowConfirmDialog(false);
+    if (pendingAction === "matching") await performAutofillWithMatching(choice);
+    else if (pendingAction === "keysOnly") await performAutofillKeysOnly(choice);
+    setPendingAction(null);
+  }, [pendingAction, performAutofillWithMatching, performAutofillKeysOnly]);
+  const handleConfirmCancel = useCallback9(() => {
+    setShowConfirmDialog(false);
+    setPendingAction(null);
+  }, []);
+  const showAutofill = !!((formDocument == null ? void 0 : formDocument.variableFont) && (formDocument == null ? void 0 : formDocument.variableInstances));
+  const topActions = showAutofill ? /* @__PURE__ */ React14.createElement(Flex9, { gap: 2 }, /* @__PURE__ */ React14.createElement(
+    Button11,
+    {
+      tone: "primary",
+      mode: "ghost",
+      onClick: handleAutofillWithMatching,
+      icon: SyncIcon2,
+      text: "Autofill with Matching",
+      disabled: isAutofilling,
+      loading: isAutofilling
+    }
+  ), /* @__PURE__ */ React14.createElement(
+    Button11,
+    {
+      tone: "default",
+      mode: "ghost",
+      onClick: handleAutofillKeysOnly,
+      icon: DocumentTextIcon,
+      text: "Autofill Keys Only",
+      disabled: isAutofilling,
+      loading: isAutofilling
+    }
+  )) : null;
+  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(
+    KeyValueReferenceInput,
+    {
+      ...props,
+      referenceType: "font",
+      fetchReferences,
+      topActions
+    }
+  ), showConfirmDialog && /* @__PURE__ */ React14.createElement(
+    Dialog2,
+    {
+      header: "Existing entries found",
+      id: "autofill-confirm-dialog",
+      onClose: handleConfirmCancel,
+      width: 1
+    },
+    /* @__PURE__ */ React14.createElement(Box5, { padding: 4 }, /* @__PURE__ */ React14.createElement(Stack10, { space: 4 }, /* @__PURE__ */ React14.createElement(Text12, null, "You already have ", value.length, " ", value.length === 1 ? "entry" : "entries", ". How would you like to proceed?"), /* @__PURE__ */ React14.createElement(Flex9, { gap: 2, justify: "flex-end" }, /* @__PURE__ */ React14.createElement(Button11, { text: "Cancel", mode: "ghost", onClick: handleConfirmCancel }), /* @__PURE__ */ React14.createElement(Button11, { text: "Merge (Add New)", tone: "primary", mode: "ghost", onClick: () => handleConfirmChoice("merge") }), /* @__PURE__ */ React14.createElement(Button11, { text: "Replace All", tone: "critical", onClick: () => handleConfirmChoice("replace") }))))
+  ));
+}
+
 // src/utils/getEmptyFontKit.js
 import * as fontkit7 from "fontkit";
 import slugify4 from "slugify";
@@ -3581,6 +3967,8 @@ export {
   FontScriptUploaderComponent,
   GenerateCollectionsPairsComponent,
   HtmlDescription,
+  KeyValueInput,
+  KeyValueReferenceInput,
   PriceInput_default as PriceInput,
   RegenerateSubfamiliesComponent,
   SCRIPTS,
@@ -3590,6 +3978,7 @@ export {
   UpdateScriptsComponent,
   UploadButton_default as UploadButton,
   UploadScriptsComponent,
+  VariableInstanceReferencesInput,
   addItalicToFontTitle,
   createFontObject,
   determineWeight,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@liiift-studio/sanity-font-manager",
-	"version": "2.2.0",
+	"version": "2.3.1",
 	"description": "Sanity Studio plugin — full font management suite with batch upload, format conversion, metadata extraction, CSS generation, collection/pair generation, and script variant support. Supports Sanity v3, v4, and v5.",
 	"license": "MIT",
 	"author": "Liiift Studio",

package/src/components/KeyValueInput.jsx

@@ -0,0 +1,95 @@
+// Ordered key-value string pair editor for Sanity Studio — add, remove, and reorder rows
+
+import React, { useState, useCallback } from 'react';
+import { Button, Grid, Stack, TextInput } from '@sanity/ui';
+import { AddIcon, ArrowDownIcon, ArrowUpIcon, TrashIcon } from '@sanity/icons';
+import { set } from 'sanity';
+
+/**
+ * Ordered key-value string pair editor with add, remove, and reorder controls.
+ * Writes an array of { _key, key, value } objects to Sanity.
+ * @param {Array} value - Current array of { _key, key, value } pairs
+ * @param {Function} onChange - Sanity onChange callback
+ */
+export function KeyValueInput({ value = [], onChange }) {
+	const [pairs, setPairs] = useState(value);
+
+	/** Updates a specific field for a pair at the given index */
+	const handlePairChange = useCallback((index, field, fieldValue) => {
+		const updatedPairs = pairs.map((pair, idx) => idx === index ? { ...pair, [field]: fieldValue } : pair);
+		setPairs(updatedPairs);
+		onChange(set(updatedPairs));
+	}, [pairs, onChange]);
+
+	/** Appends a new empty pair */
+	const handleAddPair = useCallback(() => {
+		const newPair = { key: '', value: '', _key: Math.random().toString(36).substr(2, 9) };
+		const updatedPairs = [...pairs, newPair];
+		setPairs(updatedPairs);
+		onChange(set(updatedPairs));
+	}, [pairs, onChange]);
+
+	/** Removes the pair at the given index */
+	const handleRemovePair = useCallback((index) => {
+		const updatedPairs = pairs.filter((_, idx) => idx !== index);
+		setPairs(updatedPairs);
+		onChange(set(updatedPairs));
+	}, [pairs, onChange]);
+
+	/** Swaps a pair with the one above it */
+	const handleMoveUp = useCallback((index) => {
+		if (index === 0) return;
+		const updatedPairs = [...pairs];
+		[updatedPairs[index], updatedPairs[index - 1]] = [updatedPairs[index - 1], updatedPairs[index]];
+		setPairs(updatedPairs);
+		onChange(set(updatedPairs));
+	}, [pairs, onChange]);
+
+	/** Swaps a pair with the one below it */
+	const handleMoveDown = useCallback((index) => {
+		if (index === pairs.length - 1) return;
+		const updatedPairs = [...pairs];
+		[updatedPairs[index], updatedPairs[index + 1]] = [updatedPairs[index + 1], updatedPairs[index]];
+		setPairs(updatedPairs);
+		onChange(set(updatedPairs));
+	}, [pairs, onChange]);
+
+	return (
+		<Stack space={3}>
+			{pairs.map((pair, index) => (
+				<Grid className="manualButtonWrap" columns={[2]} key={index} gap={0} style={{ position: 'relative' }}>
+					<div style={{ position: 'absolute', height: '100%', top: '0', left: '-10px', width: 'min-content', transform: 'translate(-100%, 0%)' }}>
+						<button className="manualButton manualButtonUp" style={{ fontSize: '15px', height: '50%' }} onClick={() => handleMoveUp(index)}>
+							<ArrowUpIcon />
+						</button>
+						<button className="manualButton manualButtonDown" style={{ fontSize: '15px', height: '50%' }} onClick={() => handleMoveDown(index)}>
+							<ArrowDownIcon />
+						</button>
+					</div>
+
+					<TextInput
+						value={pair.key}
+						onChange={(e) => handlePairChange(index, 'key', e.target.value)}
+						placeholder="Key"
+					/>
+					<div style={{ marginLeft: '-1px' }}>
+						<TextInput
+							value={pair.value}
+							onChange={(e) => handlePairChange(index, 'value', e.target.value)}
+							placeholder="Value"
+						/>
+					</div>
+
+					<button
+						className="manualButton"
+						onClick={() => handleRemovePair(index)}
+						style={{ position: 'absolute', top: '0', right: '-10px', transform: 'translate(100%, 0%)' }}
+					>
+						<TrashIcon />
+					</button>
+				</Grid>
+			))}
+			<Button tone="primary" onClick={handleAddPair} icon={AddIcon} text="Add Row" />
+		</Stack>
+	);
+}