fontdue-js 3.4.0 → 3.4.1

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+## 3.4.1
+
+- Fixed the standalone type tester dropping an axis slider when its `variable-settings` starting value is negative. `variable-settings="slnt -11"` was rejected as unparseable, so no slant slider appeared and nothing in the markup explained why. Any axis with a negative range was affected. Extra spaces between an axis and its value are tolerated now too.
+- Fixed the `FeatureTesters` switch knob rendering stretched in Safari 18 and earlier. The fix is in `dist/fontdue.css`.
+
 ## 3.4.0
 
 - Added new `openTypeFeatures.interactionStyle: 'dropdown'` for type testers. The features button opens a compact single-column overlay instead of the panel.

package/dist/__tests__/parseVariableSettings.test.js

@@ -0,0 +1,73 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { parseVariableSettings } from '../components/TypeTester/parseVariableSettings.js';
+describe('parseVariableSettings', () => {
+  let warn;
+  beforeEach(() => {
+    warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    warn.mockRestore();
+  });
+  it('returns null when the attribute is absent or empty', () => {
+    expect(parseVariableSettings(undefined)).toBeNull();
+    expect(parseVariableSettings(null)).toBeNull();
+    expect(parseVariableSettings('')).toBeNull();
+  });
+  it('parses integer and decimal values', () => {
+    expect(parseVariableSettings('wdth 1000, ital 0.5')).toEqual([{
+      axis: 'wdth',
+      value: 1000
+    }, {
+      axis: 'ital',
+      value: 0.5
+    }]);
+    expect(warn).not.toHaveBeenCalled();
+  });
+  it('parses negative values, so axes like slnt keep their slider', () => {
+    expect(parseVariableSettings('slnt -11')).toEqual([{
+      axis: 'slnt',
+      value: -11
+    }]);
+    expect(parseVariableSettings('slnt -11.0')).toEqual([{
+      axis: 'slnt',
+      value: -11
+    }]);
+    expect(parseVariableSettings('ital -0.5')).toEqual([{
+      axis: 'ital',
+      value: -0.5
+    }]);
+    expect(warn).not.toHaveBeenCalled();
+  });
+  it('keeps the sibling axes of a negative setting', () => {
+    // Regression for FD-1137: a single unparsed setting used to be dropped, and
+    // with it the slider for that axis, leaving adjacent testers inconsistent.
+    expect(parseVariableSettings('slnt -11.0, wdth 50.0, wght 300.0')).toEqual([{
+      axis: 'slnt',
+      value: -11
+    }, {
+      axis: 'wdth',
+      value: 50
+    }, {
+      axis: 'wght',
+      value: 300
+    }]);
+    expect(warn).not.toHaveBeenCalled();
+  });
+  it('tolerates whitespace around the separator and between axis and value', () => {
+    expect(parseVariableSettings('  wght   300 ,  slnt -11  ')).toEqual([{
+      axis: 'wght',
+      value: 300
+    }, {
+      axis: 'slnt',
+      value: -11
+    }]);
+    expect(warn).not.toHaveBeenCalled();
+  });
+  it('warns about and drops malformed settings, keeping the valid ones', () => {
+    expect(parseVariableSettings('wght 300, nonsense, wdth abc, slnt -')).toEqual([{
+      axis: 'wght',
+      value: 300
+    }]);
+    expect(warn).toHaveBeenCalledTimes(3);
+  });
+});

package/dist/components/TypeTester/TypeTesterStandaloneElement.js

@@ -1,7 +1,7 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React from 'react';
 import TypeTesterStandalone from './TypeTesterStandalone.js';
-import { notEmpty } from '../../utils.js';
+import { parseVariableSettings } from './parseVariableSettings.js';
 const isAlignment = str => {
   return str === 'left' || str === 'center' || str === 'right';
 };
@@ -14,23 +14,6 @@ const parseBool = input => input === 'true' ? true : false;
 // `axes="wght, opsz"` behaves the same as `axes="wght,opsz"` and a trailing
 // comma doesn't produce a bogus empty entry.
 const splitList = input => (input === null || input === void 0 ? void 0 : input.split(',').map(token => token.trim()).filter(Boolean)) ?? [];
-
-// parse a string like "wdth 1000, ital 0.5" into
-// [{ axis: "wdth", value: 1000 }, { axis: "ital", value: 0.5 }]
-function parseVariableSettings(input) {
-  if (!input) return null;
-  return input.split(/\s*,\s*/).map(settingString => {
-    const m = settingString.match(/^([A-Za-z0-9]{4}) (\d+(?:\.\d+)?)$/);
-    if (m && m.length > 2) {
-      return {
-        axis: m[1],
-        value: parseFloat(m[2])
-      };
-    } else {
-      console.warn(`fontdue-type-tester failed to parse variable-settings value: "${settingString}", ignoring`);
-    }
-  }).filter(notEmpty);
-}
 export const TypeTesterStandaloneElement = _ref => {
   let {
     lineHeight,

package/dist/components/TypeTester/parseVariableSettings.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Parse the `variable-settings` attribute of `<fontdue-type-tester>` into the
+ * axis/value pairs the tester expects.
+ *
+ * Whitespace around the commas and between an axis and its value is ignored, so
+ * `"wdth 1000,ital 0.5"` and `"wdth 1000, ital 0.5"` are equivalent, and a
+ * trailing comma is tolerated. Settings that don't parse are warned about and
+ * skipped, leaving their siblings intact.
+ *
+ * @example
+ * parseVariableSettings('wdth 1000, ital 0.5')
+ * // => [{ axis: 'wdth', value: 1000 }, { axis: 'ital', value: 0.5 }]
+ *
+ * parseVariableSettings('slnt -11.0')
+ * // => [{ axis: 'slnt', value: -11 }]
+ */
+export declare function parseVariableSettings(input: string | null | undefined): {
+    axis: string;
+    value: number;
+}[] | null;
+export default parseVariableSettings;

package/dist/components/TypeTester/parseVariableSettings.js

@@ -0,0 +1,41 @@
+import { notEmpty } from '../../utils.js';
+
+// Value group allows a leading minus: several registered OpenType axes are
+// conventionally negative (`slnt` runs about -20 to 0, `ital` can too), and a
+// custom axis can have any range. A setting that fails to parse is dropped, and
+// TypeTesterVariableAxes only renders a slider for an axis that has a value, so
+// rejecting a sign used to make the slider vanish with nothing in the markup to
+// explain it.
+const SETTING = /^([A-Za-z0-9]{4})\s+(-?\d+(?:\.\d+)?)$/;
+
+/**
+ * Parse the `variable-settings` attribute of `<fontdue-type-tester>` into the
+ * axis/value pairs the tester expects.
+ *
+ * Whitespace around the commas and between an axis and its value is ignored, so
+ * `"wdth 1000,ital 0.5"` and `"wdth 1000, ital 0.5"` are equivalent, and a
+ * trailing comma is tolerated. Settings that don't parse are warned about and
+ * skipped, leaving their siblings intact.
+ *
+ * @example
+ * parseVariableSettings('wdth 1000, ital 0.5')
+ * // => [{ axis: 'wdth', value: 1000 }, { axis: 'ital', value: 0.5 }]
+ *
+ * parseVariableSettings('slnt -11.0')
+ * // => [{ axis: 'slnt', value: -11 }]
+ */
+export function parseVariableSettings(input) {
+  if (!input) return null;
+  return input.split(',').map(settingString => settingString.trim()).filter(Boolean).map(settingString => {
+    const m = settingString.match(SETTING);
+    if (m && m.length > 2) {
+      return {
+        axis: m[1],
+        value: parseFloat(m[2])
+      };
+    } else {
+      console.warn(`fontdue-type-tester failed to parse variable-settings value: "${settingString}", ignoring`);
+    }
+  }).filter(notEmpty);
+}
+export default parseVariableSettings;

package/dist/fontdue.css

@@ -963,6 +963,7 @@ fontdue-feature-testers {
   --_sw-knob: var(--fontdue-feature-tester-switch-knob, var(--primary_background_color, canvas));
   --_sw-track: var(--fontdue-feature-tester-switch-track, transparent);
   --_sw-travel: calc(var(--_sw-w) - var(--_sw-h));
+  --_sw-knob-inset-right: calc(var(--_sw-w) - var(--_sw-h) + var(--_sw-p));
   position: relative;
   box-sizing: border-box;
   width: var(--_sw-w);
@@ -980,7 +981,7 @@ fontdue-feature-testers {
   top: var(--_sw-p);
   left: var(--_sw-p);
   bottom: var(--_sw-p);
-  aspect-ratio: 1;
+  right: var(--_sw-knob-inset-right);
   border: var(--_sw-b) solid var(--_sw-color);
   border-radius: var(--_sw-r);
   background: transparent;

package/dist/relay/environment.js

@@ -8,7 +8,7 @@ import { NODE_ACCESS_HEADER } from '../nodeAccess.js';
 // (defineVersionPlugin in .babelrc.cjs) with the literal package.json#version.
 // Exported so UI (the admin toolbar) can surface it without re-reading the
 // build-time global in a 'use client' module.
-export const version = "3.4.0";
+export const version = "3.4.1";
 const IS_SERVER = typeof window === typeof undefined;
 
 // Opt server fetches into Next's data cache only in production; dev stays

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "type": "module",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",