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

package/src/components/KeyValueReferenceInput.jsx

@@ -0,0 +1,254 @@
+// Generic key-value pair editor where values are weak Sanity document references — add, remove, reorder, and searchable picker
+
+import React, { useState, useCallback, useEffect } from 'react';
+import { Button, Stack, TextInput, Box, Card, Flex, Text, Dialog, Menu, MenuButton, MenuItem, Autocomplete } from '@sanity/ui';
+import { AddIcon, ArrowDownIcon, ArrowUpIcon, TrashIcon, SyncIcon, EllipsisHorizontalIcon } from '@sanity/icons';
+import { set, useFormValue } from 'sanity';
+import { useSanityClient } from '../hooks/useSanityClient.js';
+import { nanoid } from 'nanoid';
+
+/**
+ * Generic key-value pair editor where values are weak references to Sanity documents.
+ * Handles add/remove/reorder, a searchable reference picker dialog, and cached title display.
+ * @param {Array} value - Current array of { _key, key, value } pairs
+ * @param {Function} onChange - Sanity onChange callback
+ * @param {string} referenceType - Display label for the referenced document type (e.g. 'font')
+ * @param {Function} fetchReferences - async (client, doc) => [{ _id, title }] — populates the picker
+ * @param {ReactNode} topActions - Optional slot rendered above the pairs list (e.g. autofill buttons)
+ * @param {Object} schemaType - Sanity schemaType passed automatically by the Studio
+ */
+export function KeyValueReferenceInput(props) {
+	const { value = [], onChange, schemaType, referenceType, fetchReferences, topActions } = props;
+
+	const [pairs, setPairs] = useState(value);
+	const [referenceData, setReferenceData] = useState({});
+	const [isDialogOpen, setIsDialogOpen] = useState(false);
+	const [editingIndex, setEditingIndex] = useState(null);
+	const [availableReferences, setAvailableReferences] = useState([]);
+
+	const sanityClient = useSanityClient();
+	const formDocument = useFormValue([]);
+
+	/** Fetches and caches display titles for all referenced documents whenever pairs change */
+	useEffect(() => {
+		const refIds = pairs.filter(p => p.value?._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]);
+
+	/** Updates a field on a pair at the given index and syncs to Sanity */
+	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 updatedPairs = [...pairs, { key: '', value: null, _key: nanoid() }];
+		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]);
+
+	/** Opens the reference picker, calling fetchReferences to populate the list */
+	const openReferenceSelector = useCallback(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]);
+
+	/** Closes the picker dialog and clears editing state */
+	const closeDialog = useCallback(() => {
+		setIsDialogOpen(false);
+		setEditingIndex(null);
+	}, []);
+
+	/** Writes the selected item as a weak reference and closes the dialog */
+	const handleReferenceSelect = useCallback((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 }));
+
+	// Infer labels from schemaType if available
+	const keyField = schemaType?.options?.of?.[0]?.fields?.find(f => f.name === 'key');
+	const valueField = schemaType?.options?.of?.[0]?.fields?.find(f => f.name === 'value');
+	const keyTitle = keyField?.title || 'Key';
+	const valueTitle = valueField?.title || 'Value';
+	const keyPlaceholder = keyField?.placeholder || 'Enter key';
+	const pickerLabel = referenceType || valueTitle.toLowerCase();
+
+	return (
+		<Stack space={3}>
+			{topActions && <Box paddingBottom={2}>{topActions}</Box>}
+
+			<Box>
+				<Stack space={2}>
+					{pairs.map((pair, index) => (
+						<Box key={index} style={{ position: 'relative' }}>
+							{/* Reorder buttons */}
+							<div style={{ position: 'absolute', height: '100%', top: '0', left: '-5px', 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>
+
+							<Flex gap={2} align="flex-start">
+								{/* Key input */}
+								<Box flex={1}>
+									<TextInput
+										value={pair.key}
+										onChange={(e) => handlePairChange(index, 'key', e.target.value)}
+										placeholder={keyPlaceholder}
+									/>
+								</Box>
+
+								{/* Reference display or empty-state picker trigger */}
+								<Box flex={1} style={{ minHeight: '100%' }}>
+									{pair.value?._ref ? (
+										<Card className="referenceCard" radius={2} tone="primary" style={{ paddingLeft: '1rem', height: 'fit-content' }}>
+											<Flex align="center" justify="space-between">
+												<Text
+													size={2}
+													style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: '90%' }}
+												>
+													{referenceData[pair.value._ref] || 'Loading...'}
+												</Text>
+												<MenuButton
+													button={<Button icon={EllipsisHorizontalIcon} mode="bleed" title="Options" />}
+													id={`ref-options-${index}`}
+													menu={
+														<Menu>
+															<MenuItem tone="critical" icon={TrashIcon} text="Remove" onClick={() => handlePairChange(index, 'value', null)} />
+															<MenuItem icon={SyncIcon} text="Replace" onClick={() => openReferenceSelector(index)} />
+														</Menu>
+													}
+													popover={{ portal: true, tone: 'default', placement: 'left' }}
+												/>
+											</Flex>
+										</Card>
+									) : (
+										<Box
+											padding={2}
+											style={{ minHeight: '100%', border: '1px dashed #ccc', borderRadius: '4px', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}
+											onClick={() => openReferenceSelector(index)}
+										>
+											<Text muted size={2}>Click to select a {pickerLabel}</Text>
+										</Box>
+									)}
+								</Box>
+							</Flex>
+
+							{/* Remove button */}
+							<button
+								className="manualButton"
+								onClick={() => handleRemovePair(index)}
+								style={{ position: 'absolute', top: '0', right: '-7px', transform: 'translate(100%, 0%)' }}
+							>
+								<TrashIcon />
+							</button>
+						</Box>
+					))}
+				</Stack>
+			</Box>
+
+			<Button tone="primary" mode="ghost" onClick={handleAddPair} icon={AddIcon} text={`Add ${keyTitle}`} />
+
+			{/* Reference picker dialog */}
+			{isDialogOpen && (
+				<Dialog
+					header={`Select a ${pickerLabel}`}
+					id="reference-selector-dialog"
+					onClose={closeDialog}
+					width={1}
+				>
+					<Box padding={4}>
+						<Autocomplete
+							id="reference-autocomplete"
+							options={referenceOptions}
+							placeholder={`Search ${pickerLabel}s...`}
+							renderOption={(option) => (
+								<Card key={option.value} padding={3} radius={2} tone="default" style={{ cursor: 'pointer' }}>
+									<Text size={2}>{option.title}</Text>
+								</Card>
+							)}
+							renderValue={(val) => referenceOptions.find(o => o.value === val)?.title || ''}
+							onChange={(newValue) => {
+								const selected = availableReferences.find(r => r._id === newValue);
+								if (selected) handleReferenceSelect(selected);
+							}}
+							openButton
+							fontSize={2}
+						/>
+					</Box>
+				</Dialog>
+			)}
+		</Stack>
+	);
+}

package/src/components/SingleUploaderTool.jsx

@@ -627,7 +627,7 @@ export const SingleUploaderTool = (props) => {
 			{renderFontSection('ttf')}
 
 			{status === 'ready' && fileInput?.ttf && (
-				<Grid columns={[2]} gap={2}>
+				<Grid columns={[1, 2]} gap={2}>
 					<Button
 						mode="ghost"
 						tone="primary"

package/src/components/VariableInstanceReferencesInput.jsx

@@ -0,0 +1,190 @@
+// Font-specific wrapper around KeyValueReferenceInput — maps variable font instances to static font documents with autofill
+
+import React, { useState, useCallback } from 'react';
+import { Button, Flex, Dialog, Box, Stack, Text } from '@sanity/ui';
+import { SyncIcon, DocumentTextIcon } from '@sanity/icons';
+import { set, useFormValue } from 'sanity';
+import { KeyValueReferenceInput } from './KeyValueReferenceInput.jsx';
+import { useSanityClient } from '../hooks/useSanityClient.js';
+import { parseVariableFontInstances } from '../utils/parseVariableFontInstances.js';
+import { nanoid } from 'nanoid';
+
+/**
+ * Wraps KeyValueReferenceInput with font-specific autofill for variable font instance mapping.
+ * Autofill with Matching calls parseVariableFontInstances to resolve instance names to static fonts.
+ * Autofill Keys Only populates keys from variableInstances JSON without reference matching.
+ * @param {Array} value - Current array of { _key, key, value } pairs
+ * @param {Function} onChange - Sanity onChange callback
+ * @param {Object} props - Remaining props forwarded to KeyValueReferenceInput
+ */
+export function VariableInstanceReferencesInput(props) {
+	const { value = [], onChange } = props;
+
+	const [isAutofilling, setIsAutofilling] = useState(false);
+	const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+	const [pendingAction, setPendingAction] = useState(null);
+
+	const formDocument = useFormValue([]);
+	const sanityClient = useSanityClient();
+
+	/** Fetches static (non-variable) fonts scoped to the same typeface for the reference picker */
+	const fetchReferences = useCallback(async (client, doc) => {
+		const typefaceName = 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 }
+		);
+	}, []);
+
+	/** Runs parseVariableFontInstances to match instance names to static font documents */
+	const performAutofillWithMatching = useCallback(async (mode) => {
+		setIsAutofilling(true);
+		try {
+			if (!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(set(updatedPairs));
+		} catch (err) {
+			console.error('Error during autofill with matching:', err);
+		} finally {
+			setIsAutofilling(false);
+		}
+	}, [formDocument, sanityClient, value, onChange]);
+
+	/** Populates key names from variableInstances JSON without reference matching */
+	const performAutofillKeysOnly = useCallback(async (mode) => {
+		setIsAutofilling(true);
+		try {
+			if (!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: nanoid() }));
+			const updatedPairs = mode === 'replace'
+				? keyOnlyPairs
+				: [...value, ...keyOnlyPairs.filter(p => !value.some(existing => existing.key === p.key))];
+			onChange(set(updatedPairs));
+		} catch (err) {
+			console.error('Error during keys-only autofill:', err);
+		} finally {
+			setIsAutofilling(false);
+		}
+	}, [formDocument, value, onChange]);
+
+	/** Triggers autofill with matching — prompts confirmation if pairs already exist */
+	const handleAutofillWithMatching = useCallback(() => {
+		if (value.length > 0) {
+			setPendingAction('matching');
+			setShowConfirmDialog(true);
+			return;
+		}
+		performAutofillWithMatching('replace');
+	}, [value, performAutofillWithMatching]);
+
+	/** Triggers keys-only autofill — prompts confirmation if pairs already exist */
+	const handleAutofillKeysOnly = useCallback(() => {
+		if (value.length > 0) {
+			setPendingAction('keysOnly');
+			setShowConfirmDialog(true);
+			return;
+		}
+		performAutofillKeysOnly('replace');
+	}, [value, performAutofillKeysOnly]);
+
+	/** Handles the replace/merge choice from the confirmation dialog */
+	const handleConfirmChoice = useCallback(async (choice) => {
+		setShowConfirmDialog(false);
+		if (pendingAction === 'matching') await performAutofillWithMatching(choice);
+		else if (pendingAction === 'keysOnly') await performAutofillKeysOnly(choice);
+		setPendingAction(null);
+	}, [pendingAction, performAutofillWithMatching, performAutofillKeysOnly]);
+
+	/** Cancels the confirmation dialog */
+	const handleConfirmCancel = useCallback(() => {
+		setShowConfirmDialog(false);
+		setPendingAction(null);
+	}, []);
+
+	// Only show autofill buttons when the document is a variable font with parsed instance data
+	const showAutofill = !!(formDocument?.variableFont && formDocument?.variableInstances);
+
+	const topActions = showAutofill ? (
+		<Flex gap={2}>
+			<Button
+				tone="primary"
+				mode="ghost"
+				onClick={handleAutofillWithMatching}
+				icon={SyncIcon}
+				text="Autofill with Matching"
+				disabled={isAutofilling}
+				loading={isAutofilling}
+			/>
+			<Button
+				tone="default"
+				mode="ghost"
+				onClick={handleAutofillKeysOnly}
+				icon={DocumentTextIcon}
+				text="Autofill Keys Only"
+				disabled={isAutofilling}
+				loading={isAutofilling}
+			/>
+		</Flex>
+	) : null;
+
+	return (
+		<>
+			<KeyValueReferenceInput
+				{...props}
+				referenceType="font"
+				fetchReferences={fetchReferences}
+				topActions={topActions}
+			/>
+
+			{showConfirmDialog && (
+				<Dialog
+					header="Existing entries found"
+					id="autofill-confirm-dialog"
+					onClose={handleConfirmCancel}
+					width={1}
+				>
+					<Box padding={4}>
+						<Stack space={4}>
+							<Text>
+								You already have {value.length} {value.length === 1 ? 'entry' : 'entries'}. How would you like to proceed?
+							</Text>
+							<Flex gap={2} justify="flex-end">
+								<Button text="Cancel" mode="ghost" onClick={handleConfirmCancel} />
+								<Button text="Merge (Add New)" tone="primary" mode="ghost" onClick={() => handleConfirmChoice('merge')} />
+								<Button text="Replace All" tone="critical" onClick={() => handleConfirmChoice('replace')} />
+							</Flex>
+						</Stack>
+					</Box>
+				</Dialog>
+			)}
+		</>
+	);
+}

package/src/index.js

@@ -11,6 +11,9 @@ export { FontScriptUploaderComponent } from './components/FontScriptUploaderComp
 export { default as StatusDisplay } from './components/StatusDisplay.jsx';
 export { default as PriceInput } from './components/PriceInput.jsx';
 export { default as UploadButton } from './components/UploadButton.jsx';
+export { KeyValueInput } from './components/KeyValueInput.jsx';
+export { KeyValueReferenceInput } from './components/KeyValueReferenceInput.jsx';
+export { VariableInstanceReferencesInput } from './components/VariableInstanceReferencesInput.jsx';
 
 // Hooks
 export { useSanityClient } from './hooks/useSanityClient.js';