fontdue-js 2.28.0 → 3.0.0-alpha10

package/dist/next/config.js

@@ -0,0 +1,193 @@
+// withFontdue(nextConfig): next.config wrapper that installs everything a
+// Fontdue storefront needs — host→path tenant rewrites, image settings, and
+// workarounds for Next behaviors that would otherwise break Fontdue pages.
+// Import it from next.config.mjs (this package is ESM):
+//
+//   import { withFontdue } from 'fontdue-js/next/config';
+//   export default withFontdue({ /* your config */ });
+//
+// This module is evaluated at config-load time, so it must not import React,
+// Relay, or anything else from the component tree.
+
+import { existsSync } from 'node:fs';
+import { join, relative } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+// The tenant rewrites only make sense when the app routes live under the
+// /[domain]/... tree. A single-tenant app with a flat tree (the ejected
+// fontdue/example-next shape) routes normally and needs none of them.
+function hasDomainTree() {
+  return ['src/app/[domain]', 'app/[domain]'].some(dir => existsSync(join(process.cwd(), dir)));
+}
+
+// Minimal structural types so this module doesn't need `next` installed to
+// type-check; the shapes match next/dist/lib/load-custom-routes.
+
+// Every page lives under the /[domain]/... route tree so Next renders and
+// caches each tenant's pages independently. These rewrites turn the request's
+// host into that leading path segment:
+//
+//   acme.fontdue.com/fonts/foo  →  /acme.fontdue.com/fonts/foo (internal)
+//
+// In single-tenant mode the domain is constant (from NEXT_PUBLIC_FONTDUE_URL)
+// so the app behaves exactly like a plain single-site Next app.
+//
+// This is done with config rewrites rather than middleware on purpose:
+// middleware rewrites bypass the ISR page cache on self-hosted next start,
+// turning every request into a full render. beforeFiles rewrites go through
+// the normal routing layer and keep per-tenant ISR working. (beforeFiles also
+// runs before app routes are matched, so the internal /[domain] paths can't
+// be reached directly with a mismatching Host — /evil.com on acme's domain
+// becomes /acme.fontdue.com/evil.com, which 404s.)
+//
+// X-Forwarded-Host (set by the Fontdue proxy in front of this service) wins
+// over Host. The hostname charset is constrained in the patterns; anything
+// else falls through to a 404.
+//
+// beforeFiles rules CHAIN: each rule is evaluated in order against the
+// already-rewritten path, so a rewrite must produce a path no later rule can
+// match. Tenant domains always contain a dot, so the catch-all path rule
+// refuses any path whose first segment contains a dot — that makes the
+// rewritten /acme.fontdue.com/... inert. robots.txt and sitemap.xml (dotted
+// first segments we DO want to serve) get their own explicit rules, which run
+// first. Side effect: a page slug containing a dot can't be routed at the
+// top level.
+const TENANT_HOST = '(?<tenant>[a-zA-Z0-9][a-zA-Z0-9.-]*)';
+const DOTLESS_PATH = '/:path((?!api/|_next/|favicon\\.ico)(?![^/]*\\.[^/]*(?:/|$)).*)';
+
+// One rule set rewriting onto `dest` (either a fixed /domain or the /:tenant
+// capture from `has`). `conditions` is {has?, missing?}.
+function rewriteRules(dest) {
+  let conditions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return [{
+    source: '/',
+    destination: dest,
+    ...conditions
+  }, {
+    source: '/robots.txt',
+    destination: `${dest}/robots.txt`,
+    ...conditions
+  }, {
+    source: '/sitemap.xml',
+    destination: `${dest}/sitemap.xml`,
+    ...conditions
+  }, {
+    source: DOTLESS_PATH,
+    destination: `${dest}/:path`,
+    ...conditions
+  }];
+}
+export function tenantRewrites() {
+  const fontdueUrl = process.env.NEXT_PUBLIC_FONTDUE_URL;
+  const isMultiTenant = process.env.FONTDUE_MULTI_TENANT === '1';
+  if (!isMultiTenant) {
+    return rewriteRules(`/${new URL(fontdueUrl).host}`);
+  }
+  const forwardedHost = {
+    type: 'header',
+    key: 'x-forwarded-host',
+    value: `${TENANT_HOST}(:.*)?`
+  };
+  const noForwardedHost = {
+    type: 'header',
+    key: 'x-forwarded-host'
+  };
+  const host = {
+    type: 'host',
+    value: TENANT_HOST
+  };
+  return [...rewriteRules('/:tenant', {
+    has: [forwardedHost]
+  }),
+  // Host-based rules only apply when X-Forwarded-Host is absent, so the
+  // two sets can't both rewrite one request.
+  ...rewriteRules('/:tenant', {
+    has: [host],
+    missing: [noForwardedHost]
+  })];
+}
+async function resolveRewrites(rewrites) {
+  const result = (await (rewrites === null || rewrites === void 0 ? void 0 : rewrites())) ?? [];
+  // A plain array from rewrites() is afterFiles, per Next's contract.
+  if (Array.isArray(result)) {
+    return {
+      beforeFiles: [],
+      afterFiles: result,
+      fallback: []
+    };
+  }
+  return {
+    beforeFiles: result.beforeFiles ?? [],
+    afterFiles: result.afterFiles ?? [],
+    fallback: result.fallback ?? []
+  };
+}
+export function withFontdue() {
+  let nextConfig = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const fontdueUrl = process.env.NEXT_PUBLIC_FONTDUE_URL;
+  const isMultiTenant = process.env.FONTDUE_MULTI_TENANT === '1';
+  if (!isMultiTenant && !fontdueUrl) {
+    throw new Error('Set NEXT_PUBLIC_FONTDUE_URL (single-tenant) or FONTDUE_MULTI_TENANT=1 (multi-tenant).');
+  }
+  const domainTree = hasDomainTree();
+  if (isMultiTenant && !domainTree) {
+    throw new Error('FONTDUE_MULTI_TENANT=1 requires the app routes to live under src/app/[domain]/ (one cache entry per domain).');
+  }
+  const userImages = nextConfig.images ?? {};
+  return {
+    ...nextConfig,
+    async rewrites() {
+      const user = await resolveRewrites(nextConfig.rewrites);
+      if (!domainTree) return user;
+      return {
+        // App rules run first, against the public (pre-tenant) path; because
+        // beforeFiles rules chain, a dotless path they produce is then
+        // prefixed by the tenant rules like any direct request. afterFiles
+        // and fallback rules run after the tenant prefix is applied, so
+        // their sources must match the internal /[domain]/... form.
+        beforeFiles: [...user.beforeFiles, ...tenantRewrites()],
+        afterFiles: user.afterFiles,
+        fallback: user.fallback
+      };
+    },
+    images: {
+      // With a Cloudflare image transformation host configured, optimization
+      // moves to its edge (image-loader.ts) and the in-process optimizer —
+      // and sharp — stay out of the deployment entirely. The host must be in
+      // the env at build time (the loader is inlined into the client bundle)
+      // as well as at serve time (this config runs again under next start).
+      //
+      // Without one, in multi-tenant dev the GraphQL origin is typically a
+      // container or tunnel from which tenant hostnames don't resolve
+      // publicly, so the optimizer can't fetch the originals — serve them
+      // unoptimized there.
+      ...(process.env.NEXT_PUBLIC_FONTDUE_IMAGE_HOST ? {
+        loader: 'custom',
+        // Next resolves loaderFile against the project root and rejects
+        // absolute paths, so point into this package relative to cwd.
+        loaderFile: relative(process.cwd(), fileURLToPath(new URL('./image-loader.js', import.meta.url)))
+      } : {
+        unoptimized: isMultiTenant && process.env.NODE_ENV !== 'production'
+      }),
+      dangerouslyAllowSVG: true,
+      ...userImages,
+      remotePatterns: [...(fontdueUrl ? [{
+        protocol: 'https',
+        hostname: new URL(fontdueUrl).hostname
+      }] : []), {
+        protocol: 'https',
+        hostname: '*.fontdue.com'
+      },
+      // Multi-tenant: logos and images can live on any tenant custom
+      // domain. The URLs all come from the Fontdue CMS, not user input.
+      ...(isMultiTenant ? [{
+        protocol: 'https',
+        hostname: '**'
+      }] : []), ...(userImages.remotePatterns ?? [])]
+    },
+    // Treat every user agent as HTML-limited so metadata rendering blocks
+    // the response. Streamed metadata locks in a 200 status before
+    // generateMetadata's notFound() can produce a real 404.
+    htmlLimitedBots: nextConfig.htmlLimitedBots ?? /.*/
+  };
+}

package/dist/next/image-loader.d.ts

@@ -0,0 +1,7 @@
+interface ImageLoaderProps {
+    src: string;
+    width: number;
+    quality?: number;
+}
+export default function fontdueImageLoader({ src, width, quality, }: ImageLoaderProps): string;
+export {};

package/dist/next/image-loader.js

@@ -0,0 +1,39 @@
+// Custom next/image loader that serves images through a Cloudflare image
+// transformation host (developers.cloudflare.com/images/transform-images)
+// instead of the in-process Next optimizer, so the deployment needs neither
+// the /_next/image endpoint nor sharp. withFontdue activates it when
+// NEXT_PUBLIC_FONTDUE_IMAGE_HOST is set; see config.ts.
+//
+// NEXT_PUBLIC_FONTDUE_IMAGE_ORIGINS (comma-separated hostnames) should
+// mirror the transformation host's allowed-origins list. Sources on other
+// hosts — e.g. the /logo endpoint a site serves from its own (possibly
+// customer-owned) domain, which can't be allowlisted — are served as-is
+// rather than as transform URLs Cloudflare would refuse (ERROR 9401).
+//
+// Next bundles this file into the client build and inlines the NEXT_PUBLIC_
+// reads at build time, so it must stay dependency-free, and the variables
+// have to be present when `next build` runs (not just at serve time).
+
+function transformable(src) {
+  const origins = process.env.NEXT_PUBLIC_FONTDUE_IMAGE_ORIGINS;
+  if (!origins) return true;
+  let hostname;
+  try {
+    hostname = new URL(src).hostname;
+  } catch {
+    return false;
+  }
+  return origins.split(',').some(origin => origin.trim() === hostname);
+}
+export default function fontdueImageLoader(_ref) {
+  let {
+    src,
+    width,
+    quality
+  } = _ref;
+  const host = process.env.NEXT_PUBLIC_FONTDUE_IMAGE_HOST;
+  // No transform host, a local asset it couldn't fetch, or a source outside
+  // its allowed origins: serve the original, like `unoptimized`.
+  if (!host || src.startsWith('/') || !transformable(src)) return src;
+  return `https://${host}/cdn-cgi/image/width=${width},quality=${quality ?? 75},format=auto/${src}`;
+}

package/dist/next/index.d.ts

@@ -0,0 +1,2 @@
+export { isMultiTenant, isValidDomain, fontdueEndpoint, fontdueServerConfig, configureFontdueRender, prepareFontdueRender, currentFontdueEndpoint, generateStaticParams, type FontdueEndpoint, } from './tenant.js';
+export { setFontdueServerConfig, getFontdueServerConfig, type FontdueServerConfig, } from '../relay/serverConfig.js';

package/dist/next/index.js

@@ -0,0 +1,10 @@
+// Server-side entrypoint for Next.js apps (the App Router / RSC adapter).
+// The config-time wrapper lives in 'fontdue-js/next/config' and the deploy
+// hook route handler in 'fontdue-js/next/revalidate'.
+
+export { isMultiTenant, isValidDomain, fontdueEndpoint, fontdueServerConfig, configureFontdueRender, prepareFontdueRender, currentFontdueEndpoint, generateStaticParams } from './tenant.js';
+
+// The per-render config store consumed by fontdue-js's own server-side
+// fetches. configureFontdueRender covers the common case; these are exported
+// for apps that need to set or inspect the config directly.
+export { setFontdueServerConfig, getFontdueServerConfig } from '../relay/serverConfig.js';

package/dist/next/revalidate.d.ts

@@ -0,0 +1 @@
+export declare function POST(request: Request): Promise<Response>;

package/dist/next/revalidate.js

@@ -0,0 +1,37 @@
+// Route handler for Fontdue's deploy hook: re-export it from
+// app/api/revalidate/route.ts:
+//
+//   export { POST } from 'fontdue-js/next/revalidate';
+//
+// Fontdue calls it when a site's content changes. Multi-tenant deployments
+// receive the tenant in the URL, e.g.
+//   POST /api/revalidate?domain=acme.fontdue.com
+// and only that tenant's cache is purged (pages and embed data share the
+// per-domain tag — see fontdueEndpoint/fontdueServerConfig in ./tenant).
+// Single-tenant deployments use the parameterless form and purge everything
+// carrying the 'graphql' tag.
+
+import { revalidateTag } from 'next/cache';
+import { isMultiTenant, isValidDomain } from './tenant.js';
+export async function POST(request) {
+  var _URL$searchParams$get;
+  const domain = (_URL$searchParams$get = new URL(request.url).searchParams.get('domain')) === null || _URL$searchParams$get === void 0 ? void 0 : _URL$searchParams$get.toLowerCase();
+  if (isMultiTenant) {
+    if (!domain || !isValidDomain(domain)) {
+      return Response.json({
+        revalidated: false,
+        error: 'Missing or invalid ?domain='
+      }, {
+        status: 400
+      });
+    }
+    revalidateTag(`graphql:${domain}`);
+  } else {
+    revalidateTag('graphql');
+  }
+  return Response.json({
+    revalidated: true,
+    domain,
+    now: Date.now()
+  });
+}

package/dist/next/tenant.d.ts

@@ -0,0 +1,26 @@
+import { type FontdueServerConfig } from '../relay/serverConfig.js';
+export declare const isMultiTenant: boolean;
+export declare function isValidDomain(domain: string): boolean;
+export interface FontdueEndpoint {
+    /** The site domain this endpoint resolves. */
+    domain: string;
+    /** Base URL the app's own GraphQL fetches should target. */
+    origin: string;
+    /** Headers the Fontdue server needs to resolve the tenant. */
+    headers: Record<string, string>;
+    /**
+     * Cache tags for the app's own fetch calls (pass as `next: { tags }`), so
+     * the revalidate handler (see ./revalidate) can purge one site at a time.
+     */
+    tags: string[];
+}
+export declare function fontdueEndpoint(domain: string): FontdueEndpoint;
+export declare function fontdueServerConfig(domain: string): FontdueServerConfig;
+export declare function configureFontdueRender(domain: string): FontdueEndpoint | null;
+interface RenderProps {
+    params: Promise<Record<string, string | string[] | undefined>>;
+}
+export declare function prepareFontdueRender(props: RenderProps): Promise<FontdueEndpoint>;
+export declare function currentFontdueEndpoint(): FontdueEndpoint;
+export declare function generateStaticParams(): Promise<never[]>;
+export {};

package/dist/next/tenant.js

@@ -0,0 +1,169 @@
+// Tenant/mode resolution for Next.js apps. An app using this adapter runs in
+// one of two modes:
+//
+// - Single-tenant (default): NEXT_PUBLIC_FONTDUE_URL points at one Fontdue
+//   site and every request renders that site.
+//
+// - Multi-tenant (FONTDUE_MULTI_TENANT=1): the tenant is derived per request
+//   from the (forwarded) Host header, and one deployment serves every
+//   tenant. The rewrites installed by withFontdue (see ./config) turn each
+//   request into the /[domain]/... route tree so pages are rendered and
+//   cached per domain.
+//
+// In multi-tenant mode, GraphQL is fetched from FONTDUE_ORIGIN (the internal
+// Fontdue server, e.g. http://localhost:4000 when running next to it) with
+// the tenant's domain forwarded via X-Forwarded-Host, authenticated by the
+// FONTDUE_PROXY_SECRET shared secret (the Fontdue server refuses to trust
+// X-Forwarded-Host without it). Without FONTDUE_ORIGIN it falls back to
+// fetching the tenant's public URL directly, which is useful for local
+// development against live sites.
+//
+// The fontdue-js components embedded in pages fetch the same way: their
+// server-side preloads read the per-render config set by
+// configureFontdueRender, and in the browser they fetch the relative
+// /graphql on the page's own origin — so multi-tenant mode needs no
+// NEXT_PUBLIC_FONTDUE_URL at all.
+
+import { notFound } from 'next/navigation';
+import { setFontdueServerConfig, getFontdueServerConfig } from '../relay/serverConfig.js';
+export const isMultiTenant = process.env.FONTDUE_MULTI_TENANT === '1';
+const singleTenantUrl = process.env.NEXT_PUBLIC_FONTDUE_URL;
+const internalOrigin = process.env.FONTDUE_ORIGIN;
+const proxySecret = process.env.FONTDUE_PROXY_SECRET;
+
+// Hostnames only: letters/digits/hyphens/dots, no path or port. Anything else
+// is rejected before it can reach the GraphQL fetch or the filesystem cache.
+const DOMAIN_RE = /^[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)+$/;
+export function isValidDomain(domain) {
+  return domain.length <= 253 && DOMAIN_RE.test(domain);
+}
+// Where to fetch GraphQL for a given tenant domain, plus any headers needed
+// for the Fontdue server to resolve that tenant.
+export function fontdueEndpoint(domain) {
+  const tags = ['graphql', `graphql:${domain}`];
+  if (!isMultiTenant) {
+    return {
+      domain,
+      origin: requireSingleTenantUrl(),
+      headers: {},
+      tags
+    };
+  }
+  if (internalOrigin) {
+    return {
+      domain,
+      origin: internalOrigin,
+      headers: {
+        'x-forwarded-host': domain,
+        ...(proxySecret ? {
+          'x-fontdue-proxy-secret': proxySecret
+        } : {})
+      },
+      tags
+    };
+  }
+  return {
+    domain,
+    origin: `https://${domain}`,
+    headers: {},
+    tags
+  };
+}
+function requireSingleTenantUrl() {
+  if (!singleTenantUrl) {
+    throw new Error('fontdue-js/next: set NEXT_PUBLIC_FONTDUE_URL (single-tenant) or FONTDUE_MULTI_TENANT=1 (multi-tenant).');
+  }
+  return singleTenantUrl;
+}
+
+// Per-render config for fontdue-js's own server-side fetches: same endpoint
+// and headers as the app's fetches, plus the per-domain cache tag so the
+// revalidate handler purges embed data (theme config, type testers, store)
+// along with the pages. ('graphql' itself is added by the network layer.)
+export function fontdueServerConfig(domain) {
+  const {
+    origin,
+    headers
+  } = fontdueEndpoint(domain);
+  return {
+    url: origin,
+    headers,
+    cacheTags: [`graphql:${domain}`],
+    domain
+  };
+}
+
+// The one call a data helper needs at the top of every page render:
+// validates the request-derived domain (null means "treat as 404"), then
+// points fontdue-js's server-side fetches at the tenant's endpoint for the
+// rest of this render pass.
+//
+// Call it in a data helper every page goes through, not only in the root
+// layout: an App Router soft navigation re-renders just the page segment,
+// and the per-render config store starts empty on every pass.
+export function configureFontdueRender(domain) {
+  if (!isValidDomain(domain)) return null;
+  setFontdueServerConfig(fontdueServerConfig(domain));
+  return fontdueEndpoint(domain);
+}
+
+// The props every page, layout and generateMetadata receives. Any params
+// object is structurally compatible; only `domain` is read.
+
+// The one line at the top of every page, layout and generateMetadata body
+// in the [domain] route tree:
+//
+//   await prepareFontdueRender(props);
+//
+// Reads the request's site from the [domain] route param, 404s anything
+// that isn't a plain hostname (stray paths can reach the catch-all route
+// with their first segment as the "domain"), and points every Fontdue fetch
+// in the rest of this render pass — the app's fetches via
+// currentFontdueEndpoint and fontdue-js's embedded-component preloads — at
+// that site.
+//
+// It must run per entry point, not only in the layout: a soft navigation
+// re-renders just the page segment, and the per-render store starts empty
+// on every pass. Forgetting it is loud, not subtle: currentFontdueEndpoint
+// throws in multi-tenant mode when no render config was set.
+//
+// Route handlers are not React renders — the render-scoped store doesn't
+// exist there, so use the returned endpoint explicitly instead of relying
+// on currentFontdueEndpoint.
+export async function prepareFontdueRender(props) {
+  const {
+    domain
+  } = await props.params;
+  const endpoint = typeof domain === 'string' ? configureFontdueRender(domain) : null;
+  if (!endpoint) notFound();
+  return endpoint;
+}
+
+// Endpoint for the app's own GraphQL fetches in this render pass: whatever
+// prepareFontdueRender configured, or — in a single-tenant app without the
+// [domain] tree, where prepareFontdueRender is never called — the
+// NEXT_PUBLIC_FONTDUE_URL site. Throwing rather than guessing in
+// multi-tenant mode turns a forgotten prepareFontdueRender into an
+// unmissable error instead of a silent wrong-site fetch on soft
+// navigations.
+export function currentFontdueEndpoint() {
+  var _getFontdueServerConf;
+  const domain = (_getFontdueServerConf = getFontdueServerConfig()) === null || _getFontdueServerConf === void 0 ? void 0 : _getFontdueServerConf.domain;
+  if (domain) return fontdueEndpoint(domain);
+  if (isMultiTenant) {
+    throw new Error('fontdue-js/next: no render config set — call prepareFontdueRender(props) at the top of every page, layout and generateMetadata that fetches.');
+  }
+  return fontdueEndpoint(new URL(requireSingleTenantUrl()).host);
+}
+
+// Re-export from routes in the [domain] tree:
+//
+//   export { generateStaticParams } from 'fontdue-js/next';
+//
+// Domains aren't known at build time, so nothing is prerendered — but
+// providing generateStaticParams is what opts a dynamic route into
+// static-on-demand rendering (generated on first request, then cached until
+// revalidated) instead of fully dynamic rendering.
+export async function generateStaticParams() {
+  return [];
+}

package/dist/react-ranger.d.js

@@ -1 +0,0 @@
-"use strict";

package/dist/react-ranger.js

@@ -1,11 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useRanger = useRanger;
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+import React from 'react';
 const getBoundingClientRect = element => {
   const rect = element.getBoundingClientRect();
   return {
@@ -15,9 +8,9 @@ const getBoundingClientRect = element => {
 };
 const sortNumList = arr => [...arr].sort((a, b) => Number(a) - Number(b));
 const useGetLatest = val => {
-  const ref = _react.default.useRef(val);
+  const ref = React.useRef(val);
   ref.current = val;
-  return _react.default.useCallback(() => ref.current, []);
+  return React.useCallback(() => ref.current, []);
 };
 const linearInterpolator = {
   getPercentageForValue: (val, min, max) => {
@@ -33,7 +26,7 @@ const linearInterpolator = {
     return value + min;
   }
 };
-function useRanger(_ref) {
+export function useRanger(_ref) {
   let {
     interpolator = linearInterpolator,
     tickSize = 10,
@@ -46,8 +39,8 @@ function useRanger(_ref) {
     onDrag,
     stepSize
   } = _ref;
-  const [activeHandleIndex, setActiveHandleIndex] = _react.default.useState(null);
-  const [tempValues, setTempValues] = _react.default.useState();
+  const [activeHandleIndex, setActiveHandleIndex] = React.useState(null);
+  const [tempValues, setTempValues] = React.useState();
   const getLatest = useGetLatest({
     activeHandleIndex,
     onChange,
@@ -55,12 +48,12 @@ function useRanger(_ref) {
     values,
     tempValues
   });
-  const trackElRef = _react.default.useRef();
-  const getValueForClientX = _react.default.useCallback(clientX => {
+  const trackElRef = React.useRef();
+  const getValueForClientX = React.useCallback(clientX => {
     const trackDims = getBoundingClientRect(trackElRef.current);
     return interpolator.getValueForClientX(clientX, trackDims, min, max);
   }, [interpolator, max, min]);
-  const getNextStep = _react.default.useCallback((val, direction) => {
+  const getNextStep = React.useCallback((val, direction) => {
     if (steps) {
       let currIndex = steps.indexOf(val);
       let nextIndex = currIndex + direction;
@@ -83,7 +76,7 @@ function useRanger(_ref) {
       }
     }
   }, [max, min, stepSize, steps]);
-  const roundToStep = _react.default.useCallback(val => {
+  const roundToStep = React.useCallback(val => {
     let left = min;
     let right = max;
     if (steps) {
@@ -111,7 +104,7 @@ function useRanger(_ref) {
     }
     return right;
   }, [max, min, stepSize, steps]);
-  const handleDrag = _react.default.useCallback(e => {
+  const handleDrag = React.useCallback(e => {
     const {
       activeHandleIndex,
       onDrag
@@ -126,7 +119,7 @@ function useRanger(_ref) {
       setTempValues(newValues);
     }
   }, [getLatest, getValueForClientX, roundToStep, values]);
-  const handleKeyDown = _react.default.useCallback((e, i) => {
+  const handleKeyDown = React.useCallback((e, i) => {
     const {
       values,
       onChange = () => {}
@@ -141,7 +134,7 @@ function useRanger(_ref) {
       onChange(sortedValues);
     }
   }, [getLatest, getNextStep]);
-  const handlePress = _react.default.useCallback((e, i) => {
+  const handlePress = React.useCallback((e, i) => {
     setActiveHandleIndex(i);
     const handleRelease = e => {
       const {
@@ -165,14 +158,14 @@ function useRanger(_ref) {
     document.addEventListener('mouseup', handleRelease);
     document.addEventListener('touchend', handleRelease);
   }, [getLatest, handleDrag]);
-  const getPercentageForValue = _react.default.useCallback(val => {
+  const getPercentageForValue = React.useCallback(val => {
     const pct = interpolator.getPercentageForValue(val, min, max);
     // Round to 4 decimal places for consistent SSR/client hydration
     return Math.round(pct * 10000) / 10000;
   }, [interpolator, max, min]);
 
   // Build the ticks
-  const ticks = _react.default.useMemo(() => {
+  const ticks = React.useMemo(() => {
     let ticks = controlledTicks || steps;
     if (!ticks) {
       ticks = [min];
@@ -203,7 +196,7 @@ function useRanger(_ref) {
       }
     }));
   }, [controlledTicks, getPercentageForValue, max, min, steps, tickSize]);
-  const segments = _react.default.useMemo(() => {
+  const segments = React.useMemo(() => {
     const sortedValues = sortNumList(tempValues || values);
     return [...sortedValues, max].map((value, i) => ({
       value,
@@ -228,7 +221,7 @@ function useRanger(_ref) {
       }
     }));
   }, [getPercentageForValue, max, min, tempValues, values]);
-  const handles = _react.default.useMemo(() => (tempValues || values).map((value, i) => ({
+  const handles = React.useMemo(() => (tempValues || values).map((value, i) => ({
     value,
     active: i === activeHandleIndex,
     getHandleProps: function () {

package/dist/reducer.d.ts

@@ -1,9 +1,9 @@
-import { CollectionStyleSkusMap } from './components/Root/productState';
+import { CollectionStyleSkusMap } from './components/Root/productState.js';
 import { Reducer } from 'redux';
-import { productState_Query$data } from './__generated__/productState_Query.graphql';
-import type { RouteConfig } from './components/StoreModal/routes';
-import { collectionSkuIdsDifferences, isSelected } from './utils';
-import { Config } from './components/ConfigContext';
+import { productState_Query$data } from './__generated__/productState_Query.graphql.js';
+import type { RouteConfig } from './components/StoreModal/routes.js';
+import { collectionSkuIdsDifferences, isSelected } from './utils.js';
+import { Config } from './components/ConfigContext.js';
 export { collectionSkuIdsDifferences, isSelected };
 interface LicenseOptionSpec {
     licenseId: string;