fontdue-js 3.2.2 → 3.2.3

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 3.2.3
+
+- **Fixed `TypeTester` text drifting out of alignment at small font sizes.** The automatic columns (`columns: {count: 'auto', width: '40ch', gap: '1em'}` by default) sat on the full-width text container, and `ch` tracks the font size — so once the font was small enough for two columns to fit, multicol partitioned the strip and short content landed in the first column, leaving `alignment="center"` centred within *that column* rather than the tester. Right-aligned and RTL testers drifted the same way. The column properties now ride on the inner `[data-contents]` block, which shrink-wraps (`width: max-content`, capped at 100%) and is placed by alignment-driven auto margins; wrapping content still spans the full width and flows into columns as before. The editable container keeps its full width, so click-anywhere-to-edit and autofit width measurement are unchanged, and the SSR branch renders the same wrapper so the first paint matches. Truncating testers keep their columns on the height-capped container their sideways-overflow design requires. Ships new stylesheet rules, so take the `fontdue-js/dist/fontdue.css` from this version alongside the JS.
+- Also fixed centred testers sitting half the autofit side buffer off centre at *every* size — the buffer was applied entirely on one side and is now split across both.
+- **`FontdueAdminToolbar`: the collapsed pill now carries the Fontdue wordmark** — *Fontdue* idle, *Fontdue · Previewing hidden fonts* while previewing, *Fontdue · Preview expired* when the token lapses, matching the connection-error pill's existing wording. The `F` mark and the warning glyph leave the pill (the mark still brands the panel header, the glyph the expired notice). If you style the toolbar yourself: `__mark` no longer appears inside `__button`, and the expired suffix is a new `__expired-suffix` span. Chrome, sizing, shadow, the panel, and `data-testid="preview-toggle"` are unchanged.
+
 ## 3.2.2
 
 - **Fixed the reCAPTCHA forms failing to server-render under Vite SSR** (Astro, and any framework whose dev SSR externalizes CJS deps through Node's ESM interop). 3.2.1 switched to `react-google-recaptcha`'s default export, which bundlers honouring the `__esModule` marker (webpack/Next, and Vite's browser optimizer) unwrap straight to the widget wrapper — but Node's strict ESM↔CJS interop models that same default import as the whole module *namespace*, so `<ReCAPTCHA>` was an object at SSR time. React threw "Element type is invalid … got: object" and the checkout, `NewsletterSignup` and `TestFontsForm` islands fell back to client rendering with a console error. The re-export now normalises the binding (`__esModule ? .default : obj`), resolving the wrapper on every path. A no-op for webpack and Vite's browser build. No public API change.

package/dist/components/FontdueAdminToolbar/index.js

@@ -262,12 +262,14 @@ export default function FontdueAdminToolbar() {
     onClick: () => setOpen(v => !v),
     "aria-expanded": open,
     "data-testid": "fontdue-admin-toolbar-button"
-  }, expired ? /*#__PURE__*/React.createElement(WarningIcon, null) : /*#__PURE__*/React.createElement(FontdueMark, null), expired ? 'Preview expired' : previewing ? 'Previewing hidden fonts' : 'Preview'));
+  }, /*#__PURE__*/React.createElement("span", null, "Fontdue", expired ? /*#__PURE__*/React.createElement("span", {
+    className: "fontdue-admin-toolbar__expired-suffix"
+  }, ' · Preview expired') : previewing ? ' · Previewing hidden fonts' : null)));
 }
 
-// The Fontdue mark: a serif F on an iris square. Brands the pill and the panel
-// header so the control can name its function ("Preview") instead of the
-// vendor; the full attribution lives in the panel footer.
+// The Fontdue mark: a serif F on an iris square. Brands the panel header —
+// the collapsed pill carries the wordmark itself, so it doesn't also wear
+// the mark (F next to "Fontdue" would say the brand twice).
 function FontdueMark() {
   return /*#__PURE__*/React.createElement("span", {
     className: "fontdue-admin-toolbar__mark",

package/dist/components/TypeTester/TypeTesterContent.js

@@ -46,6 +46,12 @@ const TypeTesterContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     stripPastedStyles: true,
     textDirectionality: direction === 'rtl' ? 'RTL' : 'LTR',
     textAlignment: alignment
-  }) : plainText);
+  }) :
+  /*#__PURE__*/
+  // Mirror Draft's wrapper so the column rules already apply to the
+  // SSR/pre-hydration paint.
+  React.createElement("div", {
+    "data-contents": "true"
+  }, plainText));
 });
 export default TypeTesterContent;

package/dist/components/TypeTester/useTypeTesterStyler.js

@@ -81,12 +81,30 @@ const useTypeTesterStyler = _ref => {
     columnGap: columns.gap
   } : undefined;
 
+  // Outside truncation the columns apply to Draft's `[data-contents]` block
+  // (via _type-tester.scss), which shrink-wraps — on the full-width container,
+  // short content at small sizes lands in the first column and center/right
+  // alignment goes off-center (FD-1017). Truncation keeps its columns here:
+  // its sideways overflow needs the multicol box to be the height-capped one.
+  const columnVars = columns ? {
+    '--type-tester--column-count': `${columns.count}`,
+    '--type-tester--column-width': columns.width,
+    '--type-tester--column-gap': columns.gap,
+    '--type-tester--content-width': 'max-content'
+  } : undefined;
+
   // A glyph's side bearings — ink that sits outside its advance width, like a
   // leading lowercase 'j' or an italic overhang — would be shorn by the inline
   // clip. Per-glyph bearings aren't in the font metrics, so reserve a flat 0.1em
   // on each inline edge and cancel it with a negative margin so
   // wrapping and text position stay put.
   const sideBearing = shouldTruncate ? '0.1em' : '0px';
+
+  // The autofit slack must sit where it is invisible: after the text for
+  // left, before it for right, half on each side for center — one-sided it
+  // left centered text `sideBuffer / 2` off center (FD-804).
+  const bufferRight = alignment === 'center' ? sideBuffer / 2 : alignment === 'left' ? sideBuffer : 0;
+  const bufferLeft = alignment === 'center' ? sideBuffer / 2 : alignment === 'right' ? sideBuffer : 0;
   const style = {
     fontSize: autofit ? `${size}px` : `calc(var(--type-tester--adjustment, 1) * ${size}px)`,
     lineHeight: `${lineHeight}`,
@@ -127,11 +145,11 @@ const useTypeTesterStyler = _ref => {
     } : {
       height: 'auto',
       overflow: 'visible',
-      ...columnStyle
+      ...columnVars
     }),
     fontFeatureSettings,
-    marginRight: `calc(${alignment !== 'right' ? -sideBuffer : 0}px - ${sideBearing})`,
-    marginLeft: `calc(${alignment === 'right' ? -sideBuffer : 0}px - ${sideBearing})`,
+    marginRight: `calc(${-bufferRight}px - ${sideBearing})`,
+    marginLeft: `calc(${-bufferLeft}px - ${sideBearing})`,
     letterSpacing: `${letterSpacing}em`,
     fontVariationSettings,
     textAlign: alignment

package/dist/fontdue.css

@@ -798,6 +798,23 @@ fontdue-type-tester {
   position: relative;
   z-index: 0;
 }
+.type-tester__text__container [data-contents=true] {
+  column-count: var(--type-tester--column-count, auto);
+  column-width: var(--type-tester--column-width, auto);
+  column-gap: var(--type-tester--column-gap, normal);
+  width: var(--type-tester--content-width, auto);
+  max-width: 100%;
+}
+.type-tester[data-alignment=left] .type-tester__text__container [data-contents=true] {
+  margin-right: auto;
+}
+.type-tester[data-alignment=center] .type-tester__text__container [data-contents=true] {
+  margin-left: auto;
+  margin-right: auto;
+}
+.type-tester[data-alignment=right] .type-tester__text__container [data-contents=true] {
+  margin-left: auto;
+}
 
 .type-tester-select {
   display: flex;
@@ -2872,7 +2889,11 @@ body[data-fontdue-store-modal=open] {
 .cart-item__license-variable__option-name {
   margin-bottom: 0.5em;
 }
+.cart-item__license-variable__text-input-form {
+  flex: 1;
+}
 .cart-item__license-variable__text-input {
+  width: 100%;
   background: transparent;
   color: var(--primary_text_color);
   font-family: inherit;
@@ -3550,6 +3571,10 @@ textarea.text-field__input {
   border-color: #fff;
 }
 
+.fontdue-admin-toolbar__expired-suffix {
+  color: #e8c07a;
+}
+
 .fontdue-admin-toolbar__mark {
   flex: none;
   width: 16px;
@@ -3563,10 +3588,6 @@ textarea.text-field__input {
   font-size: 10px;
   line-height: 1;
 }
-.fontdue-admin-toolbar[data-previewing=true] .fontdue-admin-toolbar__button .fontdue-admin-toolbar__mark {
-  background: #fff;
-  color: var(--fdat-accent);
-}
 
 .fontdue-admin-toolbar__panel {
   width: 280px;

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.2.2";
+export const version = "3.2.3";
 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.2.2",
+  "version": "3.2.3",
   "type": "module",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",
@@ -135,4 +135,4 @@
     "./useFont": "./dist/components/useFont.js",
     "./useFontStyle": "./dist/components/useFont.js"
   }
-}
+}