@liiift-studio/sanity-font-manager 2.4.0 → 2.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@liiift-studio/sanity-font-manager",
-	"version": "2.4.0",
+	"version": "2.5.0",
 	"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",
@@ -51,17 +51,17 @@
 	},
 	"dependencies": {
 		"base-64": "^1.0.0",
-		"buffer": "^6.0.3",
-		"fontkit": "^2.0.2",
+		"lib-font": "^3.0.1",
 		"nanoid": "^5.0.0",
+		"pako": "^2.1.0",
 		"slugify": "^1.6.6"
 	},
 	"peerDependencies": {
+		"@liiift-studio/sanity-advanced-reference-array": ">=1",
 		"@sanity/icons": ">=3",
 		"@sanity/ui": ">=3",
 		"react": ">=18",
-		"sanity": ">=3",
-		"@liiift-studio/sanity-advanced-reference-array": ">=1"
+		"sanity": ">=3"
 	},
 	"peerDependenciesMeta": {
 		"@liiift-studio/sanity-advanced-reference-array": {

package/src/components/BatchUploadFonts.jsx

@@ -1,10 +1,12 @@
 // Batch font uploader — drag-and-drop file list, confirm-to-upload, elapsed timer, Wake Lock, and beforeunload guard for long uploads
 
-import React, { useCallback, useState, useMemo, useRef, useEffect } from 'react';
+import React, { useCallback, useState, useMemo, useRef, useEffect, lazy, Suspense } from 'react';
 import { Card, Box, Flex, Grid, Text, Label, Switch, Button, Spinner, Tooltip, Stack } from '@sanity/ui';
 import { ControlsIcon, InfoOutlineIcon, TrashIcon, UploadIcon, WarningOutlineIcon } from '@sanity/icons';
 import { useFormValue } from 'sanity';
 
+const UploadModal = lazy(() => import('./UploadModal'));
+
 import { useSanityClient } from '../hooks/useSanityClient';
 import { processFontFiles } from '../utils/processFontFiles';
 import { uploadFontFiles } from '../utils/uploadFontFiles';
@@ -39,6 +41,7 @@ export const BatchUploadFonts = () => {
 	const [pendingFiles, setPendingFiles] = useState([]);
 	const [isDragging, setIsDragging] = useState(false);
 	const [elapsedSeconds, setElapsedSeconds] = useState(0);
+	const [showUploadModal, setShowUploadModal] = useState(false);
 
 	const fileInputRef = useRef(null);
 	const elapsedTimerRef = useRef(null);
@@ -522,9 +525,28 @@ export const BatchUploadFonts = () => {
 		);
 	};
 
+	const hasRequiredFields = title && title !== '' && slug && slug !== '';
+
 	return (
 		<>
-			{title && title !== '' && slug && slug !== '' &&
+			{!hasRequiredFields && (
+				<Card border padding={4} radius={2} tone="caution">
+					<Flex align="center" gap={3}>
+						<Text size={2}>
+							<WarningOutlineIcon />
+						</Text>
+						<Stack space={2}>
+							<Text size={1} weight="semibold">
+								{!title || title === '' ? 'Title required to use font uploader' : 'Slug required to use font uploader'}
+							</Text>
+							<Text size={1} muted>
+								Add a {!title || title === '' ? 'title' : 'slug'} to this typeface document, then return to the Styles tab to upload fonts.
+							</Text>
+						</Stack>
+					</Flex>
+				</Card>
+			)}
+			{hasRequiredFields &&
 				<>
 					<StatusDisplay
 						status={status}
@@ -542,9 +564,37 @@ export const BatchUploadFonts = () => {
 						}
 					/>
 
-					<Card border padding={2} shadow={1} radius={2}>
-						{showUtilities ? (
-							<Stack space={4} marginTop={2}>
+					<Button
+						mode="default"
+						tone="primary"
+						icon={UploadIcon}
+						text="Upload Fonts"
+						fontSize={2}
+						padding={4}
+						onClick={() => setShowUploadModal(true)}
+						style={{ width: '100%' }}
+					/>
+
+					{/* New upload modal */}
+					{showUploadModal && (
+						<Suspense fallback={<Spinner />}>
+							<UploadModal
+								open={showUploadModal}
+								onClose={() => setShowUploadModal(false)}
+								client={client}
+								docId={doc_id}
+								typefaceTitle={title}
+								stylesObject={stylesObject}
+								preferredStyleRef={preferredStyleRef}
+								slug={slug}
+							/>
+						</Suspense>
+					)}
+
+					{/* Utilities panel — toggled via the Utilities button */}
+					{showUtilities && (
+						<Card border padding={3} shadow={1} radius={2} marginTop={3}>
+							<Stack space={4}>
 
 								{/* Regenerate Subfamilies */}
 								<Stack space={2}>
@@ -594,45 +644,8 @@ export const BatchUploadFonts = () => {
 								</Stack>
 
 							</Stack>
-						) : (
-							ready
-								? <>
-									<Grid columns={[2]} gap={4} marginTop={1} marginBottom={1}>
-										{/* Left: price */}
-										<Box>
-											<PriceInput inputPrice={inputPrice} handleInputChange={handleInputChange} />
-										</Box>
-										{/* Right: toggles */}
-										<Stack space={3}>
-											<Flex align="center" gap={2}>
-												<Switch
-													checked={preserveShortenedNames}
-													onChange={(e) => setPreserveShortenedNames(e.target.checked)}
-												/>
-												{renderTooltipLabel(
-													'Preserve shortened names',
-													'Abbreviations in font names are kept as-is (e.g. "XNarrow" stays "XNarrow", "Bd" stays "Bd").'
-												)}
-											</Flex>
-											<Flex align="center" gap={2}>
-												<Switch
-													checked={preserveFileNames}
-													onChange={(e) => setPreserveFileNames(e.target.checked)}
-												/>
-												{renderTooltipLabel(
-													'Preserve file names',
-													'Original filename capitalisation is used for asset naming instead of the normalised font title.'
-												)}
-											</Flex>
-										</Stack>
-									</Grid>
-									<Box marginTop={3}>
-										{pendingFiles.length === 0 ? renderDropZone() : renderFileList()}
-									</Box>
-								</>
-								: renderProcessing()
-						)}
-					</Card>
+						</Card>
+					)}
 				</>
 			}
 		</>

package/src/components/BulkActions.jsx

@@ -0,0 +1,99 @@
+// Bulk actions bar — expand/collapse all, search, filter with counts
+
+import React, { useMemo } from 'react';
+import { Flex, Box, Button, TextInput, Select, Text, Label } from '@sanity/ui';
+import { SearchIcon } from '@sanity/icons';
+import { FONT_STATUS, RECOMMENDATION } from '../utils/planTypes';
+
+/** Determines whether a font entry will create or update a document */
+function isUpdateEntry(entry) {
+	const d = entry.decisions?.existingDocument;
+	const choice = d?.userChoice;
+	const rec = d?.recommendation;
+	return choice === 'update' || (!choice && (rec === RECOMMENDATION.USE_EXACT || rec === RECOMMENDATION.USE_CANDIDATE));
+}
+
+/**
+ * Sticky bulk actions bar for the review step.
+ */
+export default function BulkActions({
+	fonts,
+	dispatch,
+	searchQuery,
+	onSearchChange,
+	filterBy,
+	onFilterChange,
+	allExpanded,
+	onToggleExpandAll,
+	visibleTempIds,
+}) {
+	const fontEntries = useMemo(() => Object.values(fonts), [fonts]);
+	const fontCount = fontEntries.length;
+	const visibleCount = visibleTempIds.length;
+
+	// Compute counts for each filter category
+	const filterCounts = useMemo(() => {
+		const createCount = fontEntries.filter(f => f.status !== FONT_STATUS.ERROR && !isUpdateEntry(f)).length;
+		const updateCount = fontEntries.filter(f => f.status !== FONT_STATUS.ERROR && isUpdateEntry(f)).length;
+		const errorCount = fontEntries.filter(f => f.status === FONT_STATUS.ERROR).length;
+		const conflictCount = fontEntries.filter(f => f._idConflict).length;
+		const italicCount = fontEntries.filter(f => f.style === 'Italic' && f.status !== FONT_STATUS.ERROR).length;
+		const regularCount = fontEntries.filter(f => f.style === 'Regular' && f.status !== FONT_STATUS.ERROR).length;
+
+		// Subfamily counts
+		const subfamilyCounts = {};
+		fontEntries.forEach(f => {
+			if (f.status === FONT_STATUS.ERROR) return;
+			const sf = f.subfamily || 'Regular';
+			subfamilyCounts[sf] = (subfamilyCounts[sf] || 0) + 1;
+		});
+
+		return { createCount, updateCount, errorCount, conflictCount, italicCount, regularCount, subfamilyCounts };
+	}, [fontEntries]);
+
+	const subfamilies = useMemo(() =>
+		Object.keys(filterCounts.subfamilyCounts).sort((a, b) => {
+			if (a === 'Regular') return -1;
+			if (b === 'Regular') return 1;
+			return a.localeCompare(b);
+		}),
+		[filterCounts]
+	);
+
+	return (
+		<Flex gap={2} align="center" wrap="wrap" style={{ position: 'sticky', top: 0, zIndex: 10, background: 'var(--card-bg-color)', paddingBottom: 8, paddingTop: 4 }}>
+			{/* Search */}
+			<Box style={{ flex: 1, minWidth: 150 }}>
+				<TextInput
+					icon={SearchIcon}
+					placeholder="Search fonts..."
+					value={searchQuery}
+					onChange={(e) => onSearchChange(e.target.value)}
+					fontSize={1}
+				/>
+			</Box>
+
+			{/* Filter by */}
+			<Flex align="center" gap={1}>
+				<Label size={0} style={{ whiteSpace: 'nowrap' }}>Filter</Label>
+				<Select value={filterBy} onChange={(e) => onFilterChange(e.target.value)} fontSize={1} style={{ minWidth: 140 }}>
+					<option value="all">All ({fontCount})</option>
+					{filterCounts.createCount > 0 && <option value="create">Create ({filterCounts.createCount})</option>}
+					{filterCounts.updateCount > 0 && <option value="update">Update ({filterCounts.updateCount})</option>}
+					{filterCounts.regularCount > 0 && <option value="style:regular">Regular ({filterCounts.regularCount})</option>}
+					{filterCounts.italicCount > 0 && <option value="style:italic">Italic ({filterCounts.italicCount})</option>}
+					{filterCounts.errorCount > 0 && <option value="error">Errors ({filterCounts.errorCount})</option>}
+					{filterCounts.conflictCount > 0 && <option value="conflict">Conflicts ({filterCounts.conflictCount})</option>}
+					{subfamilies.length > 1 && subfamilies.map(sf => (
+						<option key={sf} value={`sf:${sf}`}>{sf} ({filterCounts.subfamilyCounts[sf]})</option>
+					))}
+				</Select>
+			</Flex>
+
+			{/* Visible count */}
+			{visibleCount !== fontCount && (
+				<Text size={0} muted>{visibleCount} of {fontCount}</Text>
+			)}
+		</Flex>
+	);
+}

package/src/components/ExistingDocumentResolver.jsx

@@ -0,0 +1,152 @@
+// Existing document resolution UI — toggle between update existing and create new
+
+import React from 'react';
+import { Card, Stack, Flex, Text, Badge, Button, Label, Switch, Tooltip, Box } from '@sanity/ui';
+import { InfoOutlineIcon } from '@sanity/icons';
+import { RECOMMENDATION } from '../utils/planTypes';
+
+/**
+ * Displays the existing document resolution decision as a toggle.
+ * When "update" is on, shows the matched document. When off, indicates a new document will be created.
+ */
+export default function ExistingDocumentResolver({ decision, tempId, dispatch }) {
+	if (!decision) return null;
+
+	const { recommendation, exact, candidates, userChoice, selectedCandidate, lookupFailed } = decision;
+
+	const effectiveAction = userChoice ||
+		(recommendation === RECOMMENDATION.USE_EXACT || recommendation === RECOMMENDATION.USE_CANDIDATE ? 'update' : 'create');
+	const isUpdating = effectiveAction === 'update';
+	const hasMatch = exact || candidates?.length > 0;
+
+	const handleToggle = () => {
+		dispatch({ type: 'SET_FONT_ACTION', tempId, decision: isUpdating ? 'create' : 'update' });
+	};
+
+	const handleSelectCandidate = (candidate) => {
+		dispatch({ type: 'SET_FONT_CANDIDATE', tempId, candidate });
+	};
+
+	// Lookup failed
+	if (lookupFailed) {
+		return (
+			<Card tone="caution" border padding={2} radius={1}>
+				<Text size={0}>Could not check for existing documents — will create new.</Text>
+			</Card>
+		);
+	}
+
+	// No match at all — just creating
+	if (recommendation === RECOMMENDATION.CREATE && !userChoice) {
+		return (
+			<Stack space={2}>
+				<Label size={0}>Existing Document</Label>
+				<Card tone="default" border padding={2} radius={1}>
+					<Text size={1}>No existing document found — will create new.</Text>
+				</Card>
+			</Stack>
+		);
+	}
+
+	// Has a match (exact, candidate, or ambiguous) — show toggle
+	if (hasMatch) {
+		const matchDoc = exact || selectedCandidate || candidates?.[0];
+		const matchType = exact ? 'Exact Match' : candidates?.length > 1 ? 'Multiple Matches' : 'Likely Match';
+		const matchTone = exact ? 'positive' : 'caution';
+
+		return (
+			<Stack space={2}>
+				<Label size={0}>Existing Document</Label>
+
+				{/* Toggle */}
+				<Flex align="center" gap={2}>
+					<Switch
+						checked={isUpdating}
+						onChange={handleToggle}
+						style={{ cursor: 'pointer' }}
+					/>
+					<Stack space={1}>
+						<Text size={1} weight="semibold">
+							{isUpdating ? 'Update existing document' : 'Create new document'}
+						</Text>
+						<Text size={0} muted>
+							{isUpdating
+								? 'Files will be uploaded to the matched document below.'
+								: 'A new document will be created. You may need to update the Document ID above to avoid conflicts.'
+							}
+						</Text>
+					</Stack>
+				</Flex>
+
+				{/* Match card — greyed out when not updating */}
+				<Card
+					tone={isUpdating ? matchTone : 'default'}
+					border
+					padding={2}
+					radius={1}
+					style={{ opacity: isUpdating ? 1 : 0.5, transition: 'opacity 0.15s ease' }}
+				>
+					<Stack space={2}>
+						<Flex align="center" gap={2}>
+							<Badge tone={isUpdating ? matchTone : 'default'} fontSize={0}>{matchType}</Badge>
+							<Text size={1} style={{ fontFamily: 'monospace' }}>{matchDoc?._id}</Text>
+						</Flex>
+						<Text size={0} muted>
+							{matchDoc?.title} · {matchDoc?.weightName} · {matchDoc?.style}
+							{matchDoc?.subfamily ? ` · ${matchDoc.subfamily}` : ''}
+						</Text>
+					</Stack>
+				</Card>
+
+				{/* Multiple candidates — show selector when updating */}
+				{isUpdating && candidates?.length > 1 && (
+					<Stack space={1}>
+						<Text size={0} muted>Select which document to update:</Text>
+						{candidates.map((candidate) => (
+							<Card
+								key={candidate._id}
+								border
+								radius={1}
+								padding={2}
+								tone={selectedCandidate?._id === candidate._id ? 'positive' : 'default'}
+								style={{ cursor: 'pointer' }}
+								onClick={() => handleSelectCandidate(candidate)}
+							>
+								<Flex align="center" gap={2}>
+									<input
+										type="radio"
+										name={`candidate-${tempId}`}
+										checked={selectedCandidate?._id === candidate._id}
+										onChange={() => handleSelectCandidate(candidate)}
+										style={{ cursor: 'pointer' }}
+									/>
+									<Stack space={1} style={{ flex: 1 }}>
+										<Text size={1} style={{ fontFamily: 'monospace' }}>{candidate._id}</Text>
+										<Text size={0} muted>
+											{candidate.title} · {candidate.weightName} · {candidate.style}
+											{candidate.subfamily ? ` · ${candidate.subfamily}` : ''}
+										</Text>
+									</Stack>
+								</Flex>
+							</Card>
+						))}
+					</Stack>
+				)}
+			</Stack>
+		);
+	}
+
+	// User chose create after initially having a match (fallback)
+	if (userChoice === 'create') {
+		return (
+			<Stack space={2}>
+				<Label size={0}>Existing Document</Label>
+				<Card border padding={2} radius={1}>
+					<Text size={1}>Will create new document</Text>
+				</Card>
+			</Stack>
+		);
+	}
+
+	return null;
+}