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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@liiift-studio/sanity-font-manager",
-	"version": "2.3.1",
+	"version": "2.3.3",
 	"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/PrimaryCollectionGeneratorTypeface.jsx

@@ -0,0 +1,116 @@
+// Generates a single primary full-family collection from a typeface's linked fonts and prepends it to the existing collections array
+
+import React, { useCallback, useState } from 'react';
+import { Stack, Flex, Text, Button, Card, Spinner } from '@sanity/ui';
+import { useFormValue } from 'sanity';
+import { nanoid } from 'nanoid';
+
+import { useSanityClient } from '../hooks/useSanityClient';
+import StatusDisplay from './StatusDisplay';
+
+/**
+ * Generates a full-family collection document from the typeface's linked fonts
+ * and prepends it to the existing styles.collections array.
+ */
+export const PrimaryCollectionGeneratorTypeface = () => {
+	const client = useSanityClient();
+
+	const [status, setStatus] = useState('ready');
+	const [ready, setReady] = useState(true);
+	const [price, setPrice] = useState(
+		process.env.SANITY_STUDIO_DEFAULT_COLLECTION_PRICE || 100
+	);
+
+	const fonts = useFormValue(['styles', 'fonts']);
+	const title = useFormValue(['title']);
+	const preferredStyle = useFormValue(['preferredStyle']);
+	const docId = useFormValue(['_id']);
+	const styles = useFormValue(['styles']);
+
+	/** Creates or replaces the full-family collection document and prepends it to the typeface's collections array. */
+	const generateCollection = useCallback(async () => {
+		setStatus('Generating collection...');
+		setReady(false);
+
+		let id = title.toLowerCase().replace(/\s+/g, '-').slice(0, 200);
+		if (!id.includes('collection')) id += '-collection';
+
+		const colTitle = id.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+
+		const collectionDoc = {
+			_key: nanoid(),
+			_id: id,
+			title: colTitle,
+			slug: { _type: 'slug', current: id },
+			price: Number(price) || 0,
+			fonts: Object.values(fonts),
+			preferredStyle: preferredStyle,
+			_type: 'collection',
+			type: 'collection',
+		};
+
+		try {
+			const sanityCollection = await client.createOrReplace(collectionDoc);
+			const collections = styles.collections || [];
+
+			await client.patch(docId)
+				.setIfMissing({ styles: {} })
+				.set({
+					styles: {
+						...styles,
+						collections: [{
+							_type: 'reference',
+							_key: nanoid(),
+							_ref: sanityCollection._id,
+							_weak: true,
+						}, ...collections],
+					},
+				})
+				.commit();
+
+			setStatus('Collection generated');
+		} catch (err) {
+			console.error('Error creating collection:', err.message);
+			setStatus('Error generating collection');
+		}
+
+		setReady(true);
+	}, [docId, fonts, price, preferredStyle, styles, title, client]);
+
+	if (!title || !fonts) return null;
+
+	return (
+		<Stack space={2}>
+			<StatusDisplay status={status} error={false} />
+			<Card border padding={2} shadow={1} radius={2}>
+				{ready ? (
+					<Stack space={3}>
+						<Flex align="center" gap={2} marginTop={1} marginBottom={1}>
+							<Text size={1} muted>Price</Text>
+							<Text size={1} muted>$</Text>
+							<input
+								value={price}
+								onChange={(e) => setPrice(e.target.value)}
+								type="number"
+								style={{ textAlign: 'end', padding: '5px', maxWidth: '75px' }}
+							/>
+							<Text size={1} muted>per full family</Text>
+						</Flex>
+						<Button
+							mode="ghost"
+							tone="primary"
+							style={{ width: '100%' }}
+							onClick={generateCollection}
+							text="Generate Full Family Collection"
+						/>
+					</Stack>
+				) : (
+					<Flex align="center" justify="center" gap={3} padding={4}>
+						<Spinner />
+						<Text muted size={1}>{status}</Text>
+					</Flex>
+				)}
+			</Card>
+		</Stack>
+	);
+};

package/src/components/SetOTF.jsx

@@ -0,0 +1,87 @@
+// Detects and sets active OpenType features on a typeface document from the first linked font's metadata
+
+import { useState } from 'react';
+import { set, useFormValue } from 'sanity';
+import { Stack, Button, Text } from '@sanity/ui';
+import { useSanityClient } from '../hooks/useSanityClient';
+
+/**
+ * Reads the first linked font's opentypeFeatures data and checks which configured
+ * feature keys are supported. Patches the field with the detected features array.
+ */
+export const SetOTF = (props) => {
+	const { onChange, value = {} } = props;
+	const client = useSanityClient();
+	const stylesObject = useFormValue(['styles']);
+	const [message, setMessage] = useState('');
+
+	/** Fetches the first font document and matches its OpenType features against the configured keys. */
+	const detect = async () => {
+		if (!stylesObject?.fonts?.length) {
+			setMessage('Error: No fonts found in styles. Please add at least one font first.');
+			setTimeout(() => setMessage(''), 5000);
+			return;
+		}
+
+		const fontRef = stylesObject.fonts[0]?._ref;
+		if (!fontRef) {
+			setMessage('Error: Invalid font reference in styles.');
+			setTimeout(() => setMessage(''), 5000);
+			return;
+		}
+
+		try {
+			const font = await client.fetch('*[_type == "font" && _id == $id][0]', { id: fontRef });
+
+			if (!font) {
+				setMessage('Error: Could not find the referenced font.');
+				setTimeout(() => setMessage(''), 5000);
+				return;
+			}
+
+			if (!font.opentypeFeatures?.chars) {
+				setMessage(`Error: No OpenType feature data found in "${font.title || 'this font'}". Generate font data first.`);
+				setTimeout(() => setMessage(''), 5000);
+				return;
+			}
+
+			const features = [];
+			Object.keys(value).forEach(key => {
+				if (key !== 'features' && value[key]?.feature) {
+					const requiredFeatures = value[key].feature.split(' ');
+					const approved = requiredFeatures.every(v => font.opentypeFeatures.chars.includes(v));
+					if (approved) features.push(key);
+				}
+			});
+
+			onChange(set({ ...value, features }));
+			setMessage(`Features detected: ${features.length ? features.join(', ') : 'none'}.`);
+			setTimeout(() => setMessage(''), 5000);
+		} catch (err) {
+			setMessage('Error detecting features. Check the console for details.');
+			console.error('SetOTF detect error:', err);
+		}
+	};
+
+	return (
+		<Stack className="openType">
+			{value?.features?.length > 0 && (
+				<Text muted size={1} style={{ marginBottom: '0.5rem' }}>
+					Number of features: {value.features.length}
+				</Text>
+			)}
+			{!!stylesObject?.fonts?.length && (
+				<Button
+					text="Detect OTF"
+					mode="ghost"
+					onClick={detect}
+					style={{ borderRadius: '0 3px 0 0', marginBottom: '1rem' }}
+				/>
+			)}
+			{!!message && (
+				<Text muted size={1}><br />{message}<br /><br /></Text>
+			)}
+			{props.renderDefault(props)}
+		</Stack>
+	);
+};

package/src/components/StyleCountInput.jsx

@@ -0,0 +1,16 @@
+// Displays the total count of static and variable font styles linked to a typeface document
+
+import React from 'react';
+import { Text } from '@sanity/ui';
+import { useFormValue } from 'sanity';
+
+/** Reads styles.fonts and styles.variableFont arrays and displays the combined count. */
+export const StyleCountInput = (props) => {
+	const styles = useFormValue(['styles', 'fonts']) || [];
+	const vfStyles = useFormValue(['styles', 'variableFont']) || [];
+	const count = styles.length + vfStyles.length;
+
+	return (
+		<Text size={1}>{count}</Text>
+	);
+};

package/src/index.js

@@ -14,6 +14,9 @@ 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';
+export { PrimaryCollectionGeneratorTypeface } from './components/PrimaryCollectionGeneratorTypeface.jsx';
+export { SetOTF } from './components/SetOTF.jsx';
+export { StyleCountInput } from './components/StyleCountInput.jsx';
 
 // Hooks
 export { useSanityClient } from './hooks/useSanityClient.js';