@liiift-studio/sanity-font-manager 2.5.1 → 2.5.3

package/package.json

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

@@ -459,7 +459,7 @@ export const BatchUploadFonts = () => {
 										>
 											{ext}
 										</Text>
-										<Box style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+										<Box style={{ flex: 1, minWidth: 0 }}>
 											<Text size={1}>{file.name}</Text>
 										</Box>
 									</Flex>

package/src/components/KeyValueReferenceInput.jsx

@@ -148,72 +148,80 @@ export function KeyValueReferenceInput(props) {
 			<Box>
 				<Stack space={2}>
 					{pairs.map((pair, index) => (
-						<Box key={index} style={{ position: 'relative' }}>
+						<Flex key={index} gap={1} align="center">
 							{/* 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 direction="column" style={{ flexShrink: 0 }}>
+								<Button
+									mode="bleed"
+									icon={ArrowUpIcon}
+									padding={1}
+									fontSize={0}
+									onClick={() => handleMoveUp(index)}
+									disabled={index === 0}
+									style={{ cursor: index === 0 ? 'default' : 'pointer' }}
+								/>
+								<Button
+									mode="bleed"
+									icon={ArrowDownIcon}
+									padding={1}
+									fontSize={0}
+									onClick={() => handleMoveDown(index)}
+									disabled={index === pairs.length - 1}
+									style={{ cursor: index === pairs.length - 1 ? 'default' : 'pointer' }}
+								/>
 							</Flex>
 
+							{/* 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}>
+								{pair.value?._ref ? (
+									<Card radius={2} tone="primary" style={{ paddingLeft: '0.75rem', height: 'fit-content' }}>
+										<Flex align="center" justify="space-between">
+											<Text size={2} style={{ whiteSpace: 'nowrap' }}>
+												{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={{ 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>
+
 							{/* Remove button */}
-							<button
-								className="manualButton"
+							<Button
+								mode="bleed"
+								tone="critical"
+								icon={TrashIcon}
+								padding={2}
 								onClick={() => handleRemovePair(index)}
-								style={{ position: 'absolute', top: '0', right: '-7px', transform: 'translate(100%, 0%)' }}
-							>
-								<TrashIcon />
-							</button>
-						</Box>
+								style={{ flexShrink: 0, cursor: 'pointer' }}
+							/>
+						</Flex>
 					))}
 				</Stack>
 			</Box>

package/src/components/SingleUploaderTool.jsx

@@ -479,7 +479,7 @@ export const SingleUploaderTool = (props) => {
 							{formatUpper}
 						</Text>
 						{hasFile ? (
-							<Box style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+							<Box style={{ flex: 1, minWidth: 0 }}>
 								<a href={fileUrl} target="_blank" rel="noreferrer">{filenames?.[format] || 'File'}</a>
 							</Box>
 						) : (
@@ -520,7 +520,7 @@ export const SingleUploaderTool = (props) => {
 							{label}
 						</Text>
 						{hasFile ? (
-							<Box style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+							<Box style={{ flex: 1, minWidth: 0 }}>
 								<a href={fileUrl} target="_blank" rel="noreferrer">{filename || 'File'}</a>
 							</Box>
 						) : (
@@ -561,7 +561,7 @@ export const SingleUploaderTool = (props) => {
 							CSS
 						</Text>
 						{hasFile ? (
-							<Box style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+							<Box style={{ flex: 1, minWidth: 0 }}>
 								<a href={fileUrl} target="_blank" rel="noreferrer">{filenames?.css || 'File'}</a>
 							</Box>
 						) : (

package/src/components/UploadStep1Settings.jsx

@@ -235,7 +235,7 @@ export default function UploadStep1Settings({ settings, onStartProcessing }) {
 										>
 											{ext.toUpperCase()}
 										</Badge>
-										<Text size={1} style={{ flex: 1, textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+										<Text size={1} style={{ flex: 1 }}>
 											{file.name}
 										</Text>
 										<Button

package/src/components/UploadStep3Execute.jsx

@@ -181,7 +181,7 @@ export default function UploadStep3Execute({
 						return (
 							<Card key={entry.tempId} border radius={1} padding={2}>
 								<Flex align="center" gap={2}>
-									<Text size={1} style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>
+									<Text size={1} style={{ flex: 1 }}>
 										{entry.title}
 									</Text>
 									<Box style={{ width: 120, flexShrink: 0, textAlign: 'right' }}>

package/src/schema/stylesField.js

@@ -2,6 +2,8 @@
 import React from 'react';
 import { AdvancedRefArray } from '@liiift-studio/sanity-advanced-reference-array';
 import { RegenerateSubfamiliesComponent } from '../components/RegenerateSubfamiliesComponent.jsx';
+import { GenerateCollectionsPairsComponent } from '../components/GenerateCollectionsPairsComponent.jsx';
+import { PrimaryCollectionGeneratorTypeface } from '../components/PrimaryCollectionGeneratorTypeface.jsx';
 
 // Returns extra GROQ params scoped to the current typeface document
 const typefaceParams = (doc) => ({ typefaceName: doc?.title || '' });
@@ -93,6 +95,8 @@ export function createStylesField({
 	subfamilyFontFilter = false,
 	subfamilyPreview = false,
 	pairs = true,
+	generateCollections = false,
+	generateFullFamilyCollection = false,
 } = {}) {
 
 	const subfamilyFields = [
@@ -236,6 +240,22 @@ export function createStylesField({
 			type: 'array',
 			of: [subfamilyItem],
 		},
+		...field(generateCollections, {
+			title: 'Generate Collections and Pairs',
+			name: 'generateCollections',
+			type: 'string',
+			description: "Generate Collections and Pairs from the typeface's fonts.",
+			components: { input: GenerateCollectionsPairsComponent },
+			hidden: ({ parent }) => !parent?.fonts?.length,
+		}),
+		...field(generateFullFamilyCollection, {
+			title: 'Generate Full Family Collection',
+			name: 'generateCollectionGroup',
+			type: 'string',
+			description: 'Generate a Collection that includes all styles from this typeface.',
+			components: { input: PrimaryCollectionGeneratorTypeface },
+			hidden: ({ parent }) => !parent?.fonts?.length,
+		}),
 		{
 			title: 'Collections',
 			name: 'collections',

package/src/utils/parseFont.js

@@ -1,26 +1,22 @@
 // Async font parser — wraps lib-font event model in a Promise with decompressor bootstrap
 
-import pako from 'pako';
-
-// Set decompressor globals BEFORE lib-font is imported.
-// lib-font reads globalThis.pako and globalThis.unbrotli at module evaluation time
-// (top of woff.js / woff2.js), not at parse time. These must be set before lib-font
-// is first evaluated, so we use dynamic import() below to guarantee ordering.
-globalThis.pako = pako;
-
-// unbrotli is a UMD that sets globalThis.unbrotli as a side effect on evaluation.
-// We vendor it from lib-font/lib/unbrotli.js because the subpath is not in
-// lib-font's exports map (ERR_PACKAGE_PATH_NOT_EXPORTED).
-import '../vendor/unbrotli.js';
-
 // Lazy-loaded lib-font Font constructor — resolved on first parseFont() call.
-// Using dynamic import() guarantees globalThis.pako and globalThis.unbrotli are
-// set before lib-font evaluates, which static imports cannot guarantee in ESM.
+// All decompressor globals (pako for WOFF, unbrotli for WOFF2) are set dynamically
+// inside getFont() BEFORE lib-font is imported, guaranteeing correct evaluation order
+// regardless of how the bundler (tsup/esbuild/vite) reorders static imports.
 let _Font = null;
 
-/** Returns the lib-font Font constructor, loading it on first call */
+/** Returns the lib-font Font constructor, bootstrapping decompressors on first call */
 async function getFont() {
 	if (!_Font) {
+		// Set pako (zlib) for WOFF decompression
+		const pako = await import('pako');
+		globalThis.pako = pako.default || pako;
+
+		// Set unbrotli for WOFF2 decompression — UMD side-effect sets globalThis.unbrotli
+		await import('../vendor/unbrotli.js');
+
+		// NOW safe to import lib-font — both globals are set
 		const mod = await import('lib-font');
 		_Font = mod.Font;
 	}

package/dist/UploadModal-ADNRGQUI.mjs

@@ -1,6 +0,0 @@
-import {
-  UploadModal
-} from "./chunk-TMDE4A54.mjs";
-export {
-  UploadModal as default
-};

package/dist/UploadModal-WPK2CXLR.js

@@ -1,6 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
-
-var _chunkJCDZ7SWZjs = require('./chunk-JCDZ7SWZ.js');
-
-
-exports.default = _chunkJCDZ7SWZjs.UploadModal;