fontdue-js 2.28.0 → 3.0.0-alpha10

package/dist/fontLoader.js

@@ -1,17 +1,9 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isFontLoaded = isFontLoaded;
-exports.loadFont = loadFont;
-exports.selectFontSource = selectFontSource;
 const cache = new Map();
 const loaded = new Set();
-function isFontLoaded(fontFamily) {
+export function isFontLoaded(fontFamily) {
   return loaded.has(fontFamily);
 }
-async function loadFont(fontFamily, sources, verticalMetrics) {
+export async function loadFont(fontFamily, sources, verticalMetrics) {
   // Return cached promise if loading is in progress or complete
   const existing = cache.get(fontFamily);
   if (existing) return existing;
@@ -42,7 +34,7 @@ async function loadFont(fontFamily, sources, verticalMetrics) {
  * `techSupportCheck` is injectable for tests; defaults to
  * `CSS.supports("font-tech(color-<tech>)")`.
  */
-function selectFontSource(sources) {
+export function selectFontSource(sources) {
   let techSupportCheck = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultTechSupport;
   const valid = sources.filter(s => s != null && s.url != null);
   const supported = valid.filter(s => !s.tech || techSupportCheck(s.tech));

package/dist/fontdue.css

@@ -942,14 +942,6 @@ div[data-component=TypeTesters] {
   border-color: var(--button_hover_border_color, transparent);
 }
 
-:root {
-  --section_spacing: 60px;
-}
-
-.price {
-  font-variant-numeric: tabular-nums;
-}
-
 .character-viewer {
   --size: calc(var(--monitor-width) * 1 / 2);
   --half-gap: calc(var(--line-gap) / 2);
@@ -1199,10 +1191,6 @@ input:checked + .checkbox__icon {
   margin-left: 0;
 }
 
-body[data-fontdue-store-modal=open] {
-  overflow: hidden;
-}
-
 .button {
   background: none;
   color: inherit;
@@ -2380,6 +2368,10 @@ body[data-fontdue-store-modal=open] {
     align-self: flex-end;
   }
 }
+body[data-fontdue-store-modal=open] {
+  overflow: hidden;
+}
+
 .empty-cart__container {
   padding: 40px 0;
 }
@@ -3324,6 +3316,129 @@ textarea.text-field__input {
   display: block;
 }
 
+.fontdue-admin-toolbar {
+  position: fixed;
+  right: 16px;
+  bottom: 16px;
+  z-index: 2147483000;
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 1.45;
+  color: #fff;
+  --fdat-surface: #0a0a0a;
+  --fdat-border: rgba(255, 255, 255, 0.16);
+  --fdat-muted: rgba(255, 255, 255, 0.5);
+}
+.fontdue-admin-toolbar * {
+  box-sizing: border-box;
+}
+
+.fontdue-admin-toolbar__button {
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-decoration: inherit;
+  text-align: inherit;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  margin: 0;
+  appearance: none;
+  text-transform: inherit;
+}
+.fontdue-admin-toolbar__button:active, .fontdue-admin-toolbar__button:focus {
+  outline: none;
+}
+.fontdue-admin-toolbar__button:not(:disabled) {
+  cursor: pointer;
+}
+.fontdue-admin-toolbar__button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  font-size: 13px;
+  background: var(--fdat-surface);
+  color: #fff;
+  border: 1px solid var(--fdat-border);
+}
+.fontdue-admin-toolbar__button:hover {
+  border-color: rgba(255, 255, 255, 0.4);
+}
+.fontdue-admin-toolbar__button:focus-visible {
+  outline: 1px solid #fff;
+  outline-offset: 1px;
+}
+
+.fontdue-admin-toolbar__dot {
+  width: 6px;
+  height: 6px;
+  background: var(--fdat-muted);
+}
+.fontdue-admin-toolbar[data-previewing=true] .fontdue-admin-toolbar__dot {
+  background: #fff;
+}
+
+.fontdue-admin-toolbar__panel {
+  width: 248px;
+  margin-bottom: 8px;
+  padding: 14px;
+  background: var(--fdat-surface);
+  border: 1px solid var(--fdat-border);
+}
+
+.fontdue-admin-toolbar__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.fontdue-admin-toolbar__title {
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  font-size: 11px;
+}
+
+.fontdue-admin-toolbar__user {
+  color: var(--fdat-muted);
+  font-size: 11px;
+}
+
+.fontdue-admin-toolbar__toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+.fontdue-admin-toolbar__toggle input {
+  margin: 0;
+  accent-color: #fff;
+  cursor: pointer;
+}
+
+.fontdue-admin-toolbar__hint {
+  margin: 10px 0 0;
+  color: var(--fdat-muted);
+  font-size: 12px;
+}
+
+.fontdue-admin-toolbar__error {
+  margin: 10px 0 0;
+  color: #ff6b6b;
+  font-size: 12px;
+  word-break: break-word;
+}
+
+:root {
+  --section_spacing: 60px;
+}
+
+.price {
+  font-variant-numeric: tabular-nums;
+}
+
 fontdue-test-fonts-form,
 fontdue-newsletter-signup,
 fontdue-customer-login-form {

package/dist/global-shim.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/global-shim.js

@@ -0,0 +1,8 @@
+// fbjs (transitive via draft-js) references Node's `global` at module init.
+// Browsers don't define `global`, so hydration blows up with a ReferenceError.
+// ESM evaluates imports in source order, so importing this first ensures the
+// alias is in place before fbjs/setImmediate evaluates.
+if (typeof globalThis.global === 'undefined') {
+  globalThis.global = globalThis;
+}
+export {};

package/dist/hooks/useAutofit.js

@@ -1,12 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _resizeObserver = _interopRequireDefault(require("@react-hook/resize-observer"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+import { useRef, useState, useLayoutEffect } from 'react';
+import useResizeObserver from './useResizeObserver.js';
 const REF_SIZE = 100;
 
 // Canvas measurement (fast path)
@@ -63,26 +56,26 @@ const useAutofit = _ref => {
     enabled = true,
     padding = 0
   } = _ref;
-  const ref = (0, _react.useRef)(null);
-  const [fontSize, setFontSize] = (0, _react.useState)(externalFontSize);
-  const [containerWidth, setContainerWidth] = (0, _react.useState)(0);
-  const [fontVersion, setFontVersion] = (0, _react.useState)(0);
-  const [measured, setMeasured] = (0, _react.useState)(false);
-  (0, _resizeObserver.default)(ref, entry => {
+  const ref = useRef(null);
+  const [fontSize, setFontSize] = useState(externalFontSize);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [fontVersion, setFontVersion] = useState(0);
+  const [measured, setMeasured] = useState(false);
+  useResizeObserver(ref, entry => {
     setContainerWidth(entry.contentRect.width);
   });
 
   // Trigger re-measurement when the font becomes available.
   // If already loaded (e.g. parent waited for font), the promise
   // resolves as a microtask and the re-measurement is near-instant.
-  (0, _react.useLayoutEffect)(() => {
+  useLayoutEffect(() => {
     if (!enabled || !fontFamily) return;
     const fontString = `${fontStyle} ${fontWeight} ${REF_SIZE}px ${fontFamily}`;
     document.fonts.load(fontString).then(() => {
       setFontVersion(v => v + 1);
     });
   }, [fontFamily, fontWeight, fontStyle, enabled]);
-  (0, _react.useLayoutEffect)(() => {
+  useLayoutEffect(() => {
     if (!enabled) return;
     const availableWidth = containerWidth - padding;
     if (availableWidth <= 0 || !text) return;
@@ -111,5 +104,4 @@ const useAutofit = _ref => {
     ready: measured
   };
 };
-var _default = useAutofit;
-exports.default = _default;
+export default useAutofit;

package/dist/hooks/useLicenseAndOrderVariables.d.ts

@@ -1,5 +1,5 @@
-import { LicenseOptionsSpec } from '../__generated__/StoreModalProductRefetchQuery.graphql';
+import { LicenseOptionsSpec } from '../__generated__/StoreModalProductRefetchQuery.graphql.js';
 export declare function useLicenseAndOrderVariables(): {
     licenseOptionsSpecs: readonly (LicenseOptionsSpec | null)[];
-    orderVariableSelections: import("../reducer").OrderVariableSelectionState[];
+    orderVariableSelections: import("../reducer.js").OrderVariableSelectionState[];
 };

package/dist/hooks/useLicenseAndOrderVariables.js

@@ -1,20 +1,15 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useLicenseAndOrderVariables = useLicenseAndOrderVariables;
-var _react = require("react");
-var _reactRedux = require("react-redux");
-function useLicenseAndOrderVariables() {
+import { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { shallowEqual } from 'react-redux';
+export function useLicenseAndOrderVariables() {
   // Select raw data from Redux with shallow equality check
-  const licenseOptions = (0, _reactRedux.useSelector)(state => state.licenseOptions, _reactRedux.shallowEqual);
+  const licenseOptions = useSelector(state => state.licenseOptions, shallowEqual);
 
   // Select order variables from Redux
-  const orderVariableSelections = (0, _reactRedux.useSelector)(state => state.orderVariableSelections, _reactRedux.shallowEqual);
+  const orderVariableSelections = useSelector(state => state.orderVariableSelections, shallowEqual);
 
   // Memoize the transformed license options data
-  const licenseOptionsSpecs = (0, _react.useMemo)(() => licenseOptions.length > 0 ? licenseOptions.map(spec => ({
+  const licenseOptionsSpecs = useMemo(() => licenseOptions.length > 0 ? licenseOptions.map(spec => ({
     licenseId: spec.licenseId,
     licenseOptionIds: Object.values(spec.licenseOptions).filter(Boolean)
   })) : [], [licenseOptions]);

package/dist/hooks/useRefetchOnLicenseChanges.d.ts

@@ -1,5 +1,5 @@
 import { Environment, GraphQLTaggedNode } from 'relay-runtime';
-import { LicenseOptionsSpec, OrderVariableSelectionInput } from '../__generated__/StoreModalProductRefetchQuery.graphql';
+import { LicenseOptionsSpec, OrderVariableSelectionInput } from '../__generated__/StoreModalProductRefetchQuery.graphql.js';
 type RefetchFn = (variables: {
     licenseOptions: ReadonlyArray<LicenseOptionsSpec | null>;
     orderVariables: ReadonlyArray<OrderVariableSelectionInput>;

package/dist/hooks/useRefetchOnLicenseChanges.js

@@ -1,19 +1,13 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useRefetchOnLicenseChanges = useRefetchOnLicenseChanges;
-var _react = require("react");
-var _relayRuntime = require("relay-runtime");
-var _useLicenseAndOrderVariables = require("./useLicenseAndOrderVariables");
+import { useEffect } from 'react';
+import { fetchQuery } from 'relay-runtime';
+import { useLicenseAndOrderVariables } from './useLicenseAndOrderVariables.js';
 /**
  * Custom hook to handle refetching data when license options or order variables change.
  * Uses a two-step process to prevent UI flickering:
  * 1. Fetches new data into the store
  * 2. Updates the component with a store-only policy
  */
-function useRefetchOnLicenseChanges(_ref) {
+export function useRefetchOnLicenseChanges(_ref) {
   let {
     environment,
     refetch,
@@ -23,12 +17,12 @@ function useRefetchOnLicenseChanges(_ref) {
   const {
     licenseOptionsSpecs,
     orderVariableSelections
-  } = (0, _useLicenseAndOrderVariables.useLicenseAndOrderVariables)();
-  (0, _react.useEffect)(() => {
+  } = useLicenseAndOrderVariables();
+  useEffect(() => {
     let mounted = true;
 
     // First fetch the data into the store
-    const subscription = (0, _relayRuntime.fetchQuery)(environment, query, {
+    const subscription = fetchQuery(environment, query, {
       ...variables,
       licenseOptions: licenseOptionsSpecs,
       orderVariables: orderVariableSelections

package/dist/hooks/useResizeObserver.d.ts

@@ -0,0 +1,11 @@
+type ResizeObserverCtor = new (callback: ResizeObserverCallback) => {
+    observe: (target: Element) => void;
+    unobserve?: (target: Element) => void;
+    disconnect?: () => void;
+};
+export type UseResizeObserverOptions = {
+    polyfill?: ResizeObserverCtor | null;
+};
+export type UseResizeObserverCallback = (entry: ResizeObserverEntry, observer: ResizeObserver) => void;
+export default function useResizeObserver<T extends Element>(target: React.RefObject<T | null> | T | null, callback: UseResizeObserverCallback, options?: UseResizeObserverOptions): void;
+export {};

package/dist/hooks/useResizeObserver.js

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from 'react';
+
+// Loose constructor type so the SSR no-op polyfills used as fallbacks (which
+// don't implement `disconnect`) still type-check.
+
+export default function useResizeObserver(target, callback) {
+  let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+  useEffect(() => {
+    const element = target && 'current' in target ? target.current : target;
+    if (!element) return;
+    const Ctor = options.polyfill ?? (typeof ResizeObserver !== 'undefined' ? ResizeObserver : null);
+    if (!Ctor) return;
+    const observer = new Ctor(entries => {
+      for (const entry of entries) callbackRef.current(entry, observer);
+    });
+    observer.observe(element);
+    return () => {
+      if (observer.disconnect) observer.disconnect();else if (observer.unobserve) observer.unobserve(element);
+    };
+  }, [target, options.polyfill]);
+}

package/dist/hooks.js

@@ -1,11 +1,5 @@
-"use strict";
+import { useRef, useEffect, useState } from 'react';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useDebouncedValue = useDebouncedValue;
-exports.useNewPortalElement = void 0;
-var _react = require("react");
 // Returns a copy of `value` that only updates `delay` ms after `value` stops
 // changing. Useful for trailing UI that shouldn't react to rapid changes mid
 // interaction (e.g. the variable-font instance name while a slider is dragged).
@@ -16,9 +10,9 @@ var _react = require("react");
 // immediately (no delay). This distinguishes a discrete change — e.g. switching
 // to a different font — from a continuous one (dragging a slider), so the
 // former isn't smoothed and left briefly out of sync with the rest of the UI.
-function useDebouncedValue(value, delay, resetKey) {
-  const [debounced, setDebounced] = (0, _react.useState)(value);
-  const resetKeyRef = (0, _react.useRef)(resetKey);
+export function useDebouncedValue(value, delay, resetKey) {
+  const [debounced, setDebounced] = useState(value);
+  const resetKeyRef = useRef(resetKey);
 
   // Adjust state during render (no extra committed frame) when the reset key
   // changes, so the snap is synchronous with the change that triggered it.
@@ -26,20 +20,19 @@ function useDebouncedValue(value, delay, resetKey) {
     resetKeyRef.current = resetKey;
     if (debounced !== value) setDebounced(value);
   }
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     const timer = setTimeout(() => setDebounced(value), delay);
     return () => clearTimeout(timer);
   }, [value, delay]);
   return debounced;
 }
-const useNewPortalElement = () => {
-  const elementRef = (0, _react.useRef)(document.createElement('div'));
-  (0, _react.useEffect)(() => {
+export const useNewPortalElement = () => {
+  const elementRef = useRef(document.createElement('div'));
+  useEffect(() => {
     document.body.appendChild(elementRef.current);
     return () => {
       elementRef.current.remove();
     };
   }, []);
   return elementRef;
-};
-exports.useNewPortalElement = useNewPortalElement;
+};

package/dist/index.d.ts

@@ -0,0 +1 @@
+export type { Config } from './components/ConfigContext.js';

package/dist/index.js

@@ -0,0 +1 @@
+export {};

package/dist/loadFontdueProviderQuery.d.ts

@@ -0,0 +1,3 @@
+import type { FontdueProviderPreloadedQuery } from './components/FontdueProvider/index.js';
+export type { FontdueProviderPreloadedQuery };
+export default function loadFontdueProviderQuery(): Promise<FontdueProviderPreloadedQuery>;

package/dist/loadFontdueProviderQuery.js

@@ -0,0 +1,10 @@
+import loadSerializableQuery from './relay/loadSerializableQuery.js';
+import FontdueProviderQueryNode from './__generated__/FontdueProviderQuery.graphql.js';
+// Fetches the data aux UI (theme custom properties, test-mode flag) needs to
+// render synchronously on the server and on hydration. Pass the result to
+// `<FontdueProvider preloadedQuery={…}>` in your layout. Without it, aux UI
+// falls back to lazy-fetching on first client render — which causes a visible
+// theming flash because `ThemeConfig` injects CSS variables.
+export default async function loadFontdueProviderQuery() {
+  return loadSerializableQuery(FontdueProviderQueryNode, {});
+}

package/dist/next/config.d.ts

@@ -0,0 +1,41 @@
+interface RouteHas {
+    type: 'header' | 'query' | 'cookie' | 'host';
+    key?: string;
+    value?: string;
+}
+interface Rewrite {
+    source: string;
+    destination: string;
+    has?: RouteHas[];
+    missing?: RouteHas[];
+}
+interface RewriteGroups {
+    beforeFiles: Rewrite[];
+    afterFiles: Rewrite[];
+    fallback: Rewrite[];
+}
+type RewritesResult = Rewrite[] | Partial<RewriteGroups>;
+interface NextConfigLike {
+    rewrites?: () => Promise<RewritesResult> | RewritesResult;
+    images?: {
+        remotePatterns?: unknown[];
+        [key: string]: unknown;
+    };
+    [key: string]: unknown;
+}
+export declare function tenantRewrites(): Rewrite[];
+export declare function withFontdue<C extends NextConfigLike>(nextConfig?: C): C & {
+    rewrites(): Promise<RewriteGroups>;
+    images: {
+        remotePatterns: unknown[];
+        dangerouslyAllowSVG: boolean;
+        loader: "custom";
+        loaderFile: string;
+    } | {
+        remotePatterns: unknown[];
+        dangerouslyAllowSVG: boolean;
+        unoptimized: boolean;
+    };
+    htmlLimitedBots: RegExp;
+};
+export {};