unframer 3.0.2 → 3.0.5

package/src/framer.js

@@ -11214,7 +11214,7 @@ function stagger(duration = 0.1, {
   };
 }
 
-// /:https://app.framerstatic.com/framer.6HDYDFRL.mjs
+// /:https://app.framerstatic.com/framer.Q6KVMOJP.mjs
 import { lazy as ReactLazy, } from 'react';
 import React4 from 'react';
 import { startTransition as startTransition2, } from 'react';
@@ -13667,7 +13667,7 @@ function usePopStateHandler(currentRouteId, setCurrentRouteId,) {
     updateCanonicalURL(window.location.href,);
   }, [currentRouteId, monitorNextPaintAfterRender, setCurrentRouteId, startViewTransition2,],);
   const traversalHandler = useCallback((event) => {
-    if (event.navigationType !== 'traverse') return;
+    if (event.navigationType !== 'traverse' || !event.canIntercept) return;
     event.intercept({
       async handler() {
         await new Promise((resolve, reject,) => {
@@ -13792,7 +13792,7 @@ function useNativeLoadingSpinner() {
   const navigationPromise = useRef3(Promise.resolve(),);
   const navigationController = useRef3();
   const navigateListener = useCallback((navigateEvent) => {
-    if (navigateEvent.navigationType === 'traverse') return;
+    if (navigateEvent.navigationType === 'traverse' || !navigateEvent.canIntercept) return;
     const controller = navigationController.current;
     controller == null ? void 0 : controller.signal.addEventListener('abort', () => {
       controller.abort('user aborted',);
@@ -13815,6 +13815,36 @@ function useNativeLoadingSpinner() {
     },);
   }, [navigateListener,],);
 }
+var nonSlugCharactersRegExp = /[^\p{Letter}\p{Number}()]+/gu;
+var trimSlugRegExp = /^-+|-+$/gu;
+function slugify(value,) {
+  return value.toLowerCase().replace(nonSlugCharactersRegExp, '-',).replace(trimSlugRegExp, '',);
+}
+var NodeIdContext = /* @__PURE__ */ React4.createContext(null,);
+function useTracking() {
+  const router = useRouter();
+  const nodeId = useContext(NodeIdContext,);
+  return useCallback((trackingId) => {
+    var _a;
+    if (!((_a = router.pageviewEventData) == null ? void 0 : _a.current)) return;
+    if (slugify(trackingId,) !== trackingId) {
+      throw new Error(`Invalid tracking ID: ${trackingId}`,);
+    }
+    if (router.pageviewEventData.current instanceof Promise) {
+      void router.pageviewEventData.current.then((eventData) => sendCustomTrackingEvent(eventData, nodeId, trackingId,));
+    } else {
+      sendCustomTrackingEvent(router.pageviewEventData.current, nodeId, trackingId,);
+    }
+  }, [router, nodeId,],);
+}
+function sendCustomTrackingEvent(eventData, nodeId, trackingId,) {
+  sendTrackingEvent('published_site_custom_event', {
+    ...eventData,
+    nodeId,
+    // Don't attach a tracking ID if it's empty
+    trackingId: trackingId || null,
+  }, 'eager',);
+}
 function useRouteAnchor(routeId, {
   elementId,
   hash: linkHash,
@@ -22990,6 +23020,7 @@ var isPropValid = /* @__PURE__ */ memoize((prop) =>
   /* Z+1 */
 );
 var LibraryFeaturesContext = /* @__PURE__ */ React4.createContext(void 0,);
+LibraryFeaturesContext.displayName = 'LibraryFeaturesContext';
 var LibraryFeaturesProvider = /* @__PURE__ */ (() => LibraryFeaturesContext.Provider)();
 var useLibraryFeatures = () => {
   const context = React4.useContext(LibraryFeaturesContext,);
@@ -23004,16 +23035,22 @@ var mockWithoutWarning = () => {
   return () => {};
 };
 var implementation = {
-  // We need a default implementation for useImageSource and useImageElement as it is used for rendering image backgrounds which would break otherwise.
-  // The default value is used for HTML export and when using the library without Framer.
+  // We need a default implementation for useImageSource and useImageElement as it is used for
+  // rendering image backgrounds which would break otherwise. The default value is used for HTML
+  // export and when using the library without Framer.
+  imagePlaceholderSvg:
+    `<svg xmlns="http://www.w3.org/2000/svg" width="126" height="126"><path id="a" d="M126 0v21.584L21.584 126H0v-17.585L108.415 0H126Zm0 108.414V126h-17.586L126 108.414Zm0-84v39.171L63.585 126H24.414L126 24.414Zm0 42v39.17L105.584 126h-39.17L126 66.414ZM105.586 0 0 105.586V66.415L66.415 0h39.171Zm-42 0L0 63.586V24.415L24.415 0h39.171Zm-42 0L0 21.586V0h21.586Z" fill="rgb(136, 136, 136, 0.2)" fill-rule="evenodd"/></svg>`,
   useImageSource(image,) {
     return image.src ?? '';
   },
   useImageElement(image, rect, nodeId,) {
-    const element = new Image();
-    element.src = runtime.useImageSource(image, rect, nodeId,);
-    if (image.srcSet) element.srcset = image.srcSet;
-    return element;
+    const src = runtime.useImageSource(image, rect, nodeId,);
+    return useMemo2(() => {
+      const element = new Image();
+      element.src = src;
+      if (image.srcSet) element.srcset = image.srcSet;
+      return element;
+    }, [src, image.srcSet,],);
   },
   canRenderOptimizedCanvasImage() {
     return false;
@@ -23048,16 +23085,12 @@ var wrapperStyle = {
   left: 0,
 };
 function getPlaceholderStyle() {
-  const placeholderStyle = {
+  return {
     backgroundRepeat: 'repeat',
     backgroundPosition: 'left top',
-    backgroundSize: '126px auto',
-    backgroundImage: encodeSVGForCSS(
-      `<svg xmlns="http://www.w3.org/2000/svg" width="126" height="126"><path id="a" d="M126 0v21.584L21.584 126H0v-17.585L108.415 0H126Zm0 108.414V126h-17.586L126 108.414Zm0-84v39.171L63.585 126H24.414L126 24.414Zm0 42v39.17L105.584 126h-39.17L126 66.414ZM105.586 0 0 105.586V66.415L66.415 0h39.171Zm-42 0L0 63.586V24.415L24.415 0h39.171Zm-42 0L0 21.586V0h21.586Z" fill="#888" fill-rule="evenodd"/></svg>`,
-    ),
-    opacity: 0.2,
+    backgroundSize: '64px auto',
+    backgroundImage: encodeSVGForCSS(runtime.imagePlaceholderSvg,),
   };
-  return placeholderStyle;
 }
 function cssObjectFit(imageFit,) {
   switch (imageFit) {
@@ -32092,7 +32125,7 @@ function useLoop({
   const shouldReduceMotion = useReducedMotionConfig();
   const values = useConstant2(makeFXValues,);
   const mirrorStateRef = useRef3(false,);
-  const delay2 = useDelay();
+  const delay3 = useDelay();
   const animationPromiseRef = useRef3(null,);
   const animateValues = useCallback(async () => {
     if (!loop) return;
@@ -32122,9 +32155,9 @@ function useLoop({
   const animateLoop = useCallback(async () => {
     if (!loopEffectEnabled || !shouldRunRef.current) return;
     await animateValues();
-    await delay2(loopRepeatDelay ?? 0,);
+    await delay3(loopRepeatDelay ?? 0,);
     void animateLoop();
-  }, [animateValues, delay2, loopEffectEnabled, loopRepeatDelay,],);
+  }, [animateValues, delay3, loopEffectEnabled, loopRepeatDelay,],);
   const start2 = useCallback(() => {
     if (shouldRunRef.current) return;
     shouldRunRef.current = true;
@@ -33465,12 +33498,15 @@ var ContainerInner = /* @__PURE__ */ React4.forwardRef(({
     ref,
     children: /* @__PURE__ */ jsx3(ComponentContainerContext.Provider, {
       value: true,
-      children: /* @__PURE__ */ jsx3(AutomaticLayoutIds, {
-        enabled: false,
-        children: /* @__PURE__ */ jsx3(LayoutGroup, {
-          id: layoutId ?? '',
-          inherit: 'id',
-          children: childrenWithCodeBoundary,
+      children: /* @__PURE__ */ jsx3(NodeIdContext.Provider, {
+        value: nodeId ?? null,
+        children: /* @__PURE__ */ jsx3(AutomaticLayoutIds, {
+          enabled: false,
+          children: /* @__PURE__ */ jsx3(LayoutGroup, {
+            id: layoutId ?? '',
+            inherit: 'id',
+            children: childrenWithCodeBoundary,
+          },),
         },),
       },),
     },),
@@ -33502,11 +33538,14 @@ var SmartComponentScopedContainer = /* @__PURE__ */ React4.forwardRef((props, re
   const tagName = props.as ?? 'div';
   if (props.rendersWithMotion) {
     const Component17 = htmlElementAsMotionComponent(tagName,);
-    return /* @__PURE__ */ jsx3(Component17, {
-      ...otherProps,
-      ref,
-      style: props.style,
-      children: childrenWithCodeBoundary,
+    return /* @__PURE__ */ jsx3(NodeIdContext.Provider, {
+      value: nodeId ?? null,
+      children: /* @__PURE__ */ jsx3(Component17, {
+        ...otherProps,
+        ref,
+        style: props.style,
+        children: childrenWithCodeBoundary,
+      },),
     },);
   } else {
     const Component17 = tagName;
@@ -33515,17 +33554,15 @@ var SmartComponentScopedContainer = /* @__PURE__ */ React4.forwardRef((props, re
       layoutDependency,
       ...plainHTMLRenderableProps
     } = otherProps;
-    return (
-      // Passing `props.style` explicitly to allow TypeScript to narrow the type of `props.style` according
-      // to the value of `props.rendersWithMotion`.
-      /* @__PURE__ */
-      jsx3(Component17, {
+    return /* @__PURE__ */ jsx3(NodeIdContext.Provider, {
+      value: nodeId ?? null,
+      children: /* @__PURE__ */ jsx3(Component17, {
         ...plainHTMLRenderableProps,
         ref,
         style: props.style,
         children: childrenWithCodeBoundary,
-      },)
-    );
+      },),
+    },);
   }
 },);
 var CustomCursorContext = /* @__PURE__ */ createContext({
@@ -33786,18 +33823,20 @@ var CustomCursorComponent = /* @__PURE__ */ memo2(function CustomCursorComponent
     placement,
   ],);
   if (!hasHoverCapability || !cursor || !Cursor) return null;
-  return /* @__PURE__ */ jsx3(Cursor, {
-    transformTemplate: transformTemplate2,
-    style: {
-      ...staticCursorStyle,
-      x,
-      y,
-      opacity,
-    },
-    globalTapTarget: true,
-    variant: cursor == null ? void 0 : cursor.variant,
-    ref: cursorRef,
-    className: cursorComponentClassName,
+  return /* @__PURE__ */ jsx3(Suspense2, {
+    children: /* @__PURE__ */ jsx3(Cursor, {
+      transformTemplate: transformTemplate2,
+      style: {
+        ...staticCursorStyle,
+        x,
+        y,
+        opacity,
+      },
+      globalTapTarget: true,
+      variant: cursor == null ? void 0 : cursor.variant,
+      ref: cursorRef,
+      className: cursorComponentClassName,
+    },),
   },);
 },);
 function useCustomCursors(webPageCursors,) {
@@ -34561,6 +34600,10 @@ var LazyValue = class _LazyValue {
   static is(value,) {
     return value instanceof _LazyValue;
   }
+  get state() {
+    var _a;
+    return ((_a = this.status) == null ? void 0 : _a.type) ?? 'pending';
+  }
   /** Preload the value so it can be read() later. */
   preload() {
     if (this.status) {
@@ -35308,14 +35351,16 @@ function useTrackLinkClick({
   return useCallback(async (hrefAttribute) => {
     var _a, _b, _c, _d, _e;
     if (!((_a = router.pageviewEventData) == null ? void 0 : _a.current)) return;
-    const pageviewEventData = router.pageviewEventData.current;
+    const pageviewEventData = router.pageviewEventData.current instanceof Promise
+      ? await router.pageviewEventData.current
+      : router.pageviewEventData.current;
     const pageLink = isLinkToWebPage(href,) ? href : linkFromFramerPageLink(href,);
     if (!isLinkToWebPage(pageLink,)) {
       return sendTrackingEvent('published_site_click', {
         ...pageviewEventData,
         href: hrefAttribute ? makeUrlAbsolute(hrefAttribute,) : null,
         nodeId: nodeId ?? null,
-        trackingId: clickTrackingId ?? null,
+        trackingId: clickTrackingId || null,
         targetRoutePath: null,
         targetWebPageId: null,
         targetCollectionItemId: null,
@@ -35764,13 +35809,20 @@ function trackFormSubmit({
 },) {
   var _a;
   if (!((_a = router == null ? void 0 : router.pageviewEventData) == null ? void 0 : _a.current)) return;
-  const pageviewEventData = router.pageviewEventData.current;
-  const eventData = {
+  if (router.pageviewEventData.current instanceof Promise) {
+    void router.pageviewEventData.current.then((pageviewEventData) => {
+      sendFormSubmitTrackingEvent(pageviewEventData, nodeId, submitTrackingId,);
+    },);
+  } else {
+    sendFormSubmitTrackingEvent(router.pageviewEventData.current, nodeId, submitTrackingId,);
+  }
+}
+function sendFormSubmitTrackingEvent(pageviewEventData, nodeId, trackingId,) {
+  return sendTrackingEvent('published_site_form_submit', {
     ...pageviewEventData,
     nodeId: nodeId ?? null,
-    trackingId: submitTrackingId ?? null,
-  };
-  return sendTrackingEvent('published_site_form_submit', eventData, 'eager',);
+    trackingId: trackingId || null,
+  }, 'eager',);
 }
 var pendingState = {
   state: 'pending',
@@ -36055,17 +36107,23 @@ var useSendPageView = (currentRoute, currentRouteId, currentPathVariables, colle
       },);
     };
     void (async () => {
-      pageviewEventData.current = await getFullPageviewEventData();
+      const pageviewEventDataPromise = getFullPageviewEventData();
+      pageviewEventData.current = pageviewEventDataPromise;
       if (skipFirstPageView.current) {
         skipFirstPageView.current = false;
         return;
       }
-      sendTrackingEvent('published_site_pageview', pageviewEventData.current, 'eager',);
+      const eventData = await pageviewEventDataPromise;
+      pageviewEventData.current = eventData;
+      sendTrackingEvent('published_site_pageview', eventData, 'eager',);
     })();
     const listener = async (event) => {
       if (event.persisted) {
-        pageviewEventData.current = await getFullPageviewEventData();
-        sendTrackingEvent('published_site_pageview', pageviewEventData.current, 'eager',);
+        const pageviewEventDataPromise = getFullPageviewEventData();
+        pageviewEventData.current = pageviewEventDataPromise;
+        const eventData = await getFullPageviewEventData();
+        pageviewEventData.current = eventData;
+        sendTrackingEvent('published_site_pageview', eventData, 'eager',);
       }
     };
     window.addEventListener('pageshow', listener,);
@@ -36174,6 +36232,15 @@ function Router({
   const scheduleSideEffect = useScheduleRenderSideEffects(dep,);
   const startNavigation = useNavigationTransition();
   const monitorNextPaintAfterRender = useMonitorNextPaintAfterRender('framer-route-change',);
+  const {
+    synchronousNavigationOnDesktop,
+  } = useLibraryFeatures();
+  const transitionFn = useMemo2(() => {
+    if (!synchronousNavigationOnDesktop || !isDesktop()) {
+      return startTransition2;
+    }
+    return (fn) => fn();
+  }, [synchronousNavigationOnDesktop,],);
   const isInitialNavigationRef = useRef3(true,);
   const currentRouteRef = useRef3(initialRoute,);
   const currentPathVariablesRef = useRef3(initialPathVariables,);
@@ -36247,7 +36314,7 @@ function Router({
           };
           void startNavigation(
             () => {
-              void startViewTransition2(currentRouteId2, currentRouteId2, () => startTransition2(forceUpdate,),// no signal here, because we update the refs above immediately
+              void startViewTransition2(currentRouteId2, currentRouteId2, () => transitionFn(forceUpdate,),// no signal here, because we update the refs above immediately
               );
             },
             nextRender,
@@ -36267,6 +36334,7 @@ function Router({
     startNavigation,
     startViewTransition2,
     monitorNextPaintAfterRender,
+    transitionFn,
   ],);
   const setCurrentRouteId = useCallback(
     (routeId, localeId, hash2, pathVariables, isHistoryTransition, nextRender, smoothScroll = false, updateURL,) => {
@@ -36279,19 +36347,19 @@ function Router({
         updateScrollPosition(hash2, smoothScroll, isHistoryTransition,);
       },);
       if (isHistoryTransition) {
-        startTransition2(forceUpdate,);
+        transitionFn(forceUpdate,);
         return;
       }
       void startNavigation(
         (signal) => {
-          void startViewTransition2(currentRouteId2, routeId, () => startTransition2(forceUpdate,), signal,);
+          void startViewTransition2(currentRouteId2, routeId, () => transitionFn(forceUpdate,), signal,);
         },
         nextRender,
         updateURL,
         true,
       );
     },
-    [forceUpdate, scheduleSideEffect, startNavigation, startViewTransition2,],
+    [forceUpdate, scheduleSideEffect, startNavigation, startViewTransition2, transitionFn,],
   );
   usePopStateHandler(currentRouteRef, setCurrentRouteId,);
   const navigate = useCallback(async (routeId, hash2, pathVariables, smoothScroll, beforeUrlUpdate,) => {
@@ -41677,17 +41745,31 @@ ${stringifyQuery(query,)}`,);
   }
 };
 var QueryCache = class {
-  constructor(queryEngine2,) {
+  constructor(queryEngine2, maxSize = Infinity,) {
     this.queryEngine = queryEngine2;
+    this.maxSize = maxSize;
     __publicField(this, 'cache', /* @__PURE__ */ new Map(),);
   }
+  prune() {
+    if (this.cache.size <= this.maxSize) return;
+    for (const [key7, value,] of this.cache) {
+      if (this.cache.size <= this.maxSize) break;
+      if (value.state === 'pending') continue;
+      this.cache.delete(key7,);
+    }
+  }
   get(query, locale,) {
     const key7 = getCacheKey(query, locale,);
     const existing = this.cache.get(key7,);
-    if (existing) return existing;
+    if (existing) {
+      this.cache.delete(key7,);
+      this.cache.set(key7, existing,);
+      return existing;
+    }
     const resolver = () => this.queryEngine.query(query, locale,);
     const value = new LazyValue(resolver,);
     this.cache.set(key7, value,);
+    this.prune();
     return value;
   }
 };
@@ -42909,15 +42991,18 @@ function withCodeBoundaryForOverrides(Component17, {
     );
     if (shouldWrapWithBoundary) {
       if (appliedOverride.status === 'success') {
-        return /* @__PURE__ */ jsx3(CodeComponentBoundary, {
-          getErrorMessage: getErrorMessageForOverride.bind(null, scopeId, nodeId,),
-          fallback: /* @__PURE__ */ jsx3(Component17, {
-            ...props,
-            ref,
-          },),
-          children: /* @__PURE__ */ jsx3(appliedOverride.Component, {
-            ...props,
-            ref,
+        return /* @__PURE__ */ jsx3(NodeIdContext.Provider, {
+          value: nodeId,
+          children: /* @__PURE__ */ jsx3(CodeComponentBoundary, {
+            getErrorMessage: getErrorMessageForOverride.bind(null, scopeId, nodeId,),
+            fallback: /* @__PURE__ */ jsx3(Component17, {
+              ...props,
+              ref,
+            },),
+            children: /* @__PURE__ */ jsx3(appliedOverride.Component, {
+              ...props,
+              ref,
+            },),
           },),
         },);
       } else {
@@ -42934,9 +43019,12 @@ function withCodeBoundaryForOverrides(Component17, {
       }
     } else {
       if (appliedOverride.status === 'success') {
-        return /* @__PURE__ */ jsx3(appliedOverride.Component, {
-          ...props,
-          ref,
+        return /* @__PURE__ */ jsx3(NodeIdContext.Provider, {
+          value: nodeId,
+          children: /* @__PURE__ */ jsx3(appliedOverride.Component, {
+            ...props,
+            ref,
+          },),
         },);
       } else {
         throw appliedOverride.error;
@@ -43957,6 +44045,736 @@ function createFontFamilyName(font,) {
 function createVariableFontFamilyName(familyName,) {
   return `${familyName} Variable`;
 }
+function assert2(condition, ...msg) {
+  var _a, _b;
+  if (condition) return;
+  const e = Error('Assertion Error' + (msg.length > 0 ? ': ' + msg.join(' ',) : ''),);
+  if (e.stack) {
+    try {
+      const lines = e.stack.split('\n',);
+      if ((_a = lines[1]) == null ? void 0 : _a.includes('assert',)) {
+        lines.splice(1, 1,);
+        e.stack = lines.join('\n',);
+      } else if ((_b = lines[0]) == null ? void 0 : _b.includes('assert',)) {
+        lines.splice(0, 1,);
+        e.stack = lines.join('\n',);
+      }
+    } catch {}
+  }
+  throw e;
+}
+var missing = Symbol('missing',);
+var frozenEmptyArray = Object.freeze([],);
+var errorReporter;
+function reportError({
+  error: maybeError,
+  tags,
+  extras,
+  critical,
+  caller,
+},) {
+  assert2(errorReporter, 'Set up an error callback with setErrorReporter, or configure Sentry with initializeEnvironment',);
+  const error = reportableError(maybeError, caller,);
+  errorReporter({
+    error,
+    tags: {
+      ...error.tags,
+      ...tags,
+    },
+    extras: {
+      ...error.extras,
+      ...extras,
+    },
+    critical: !!critical,
+  },);
+  return error;
+}
+function reportableError(error, caller = reportableError,) {
+  if (error instanceof Error) {
+    return error;
+  }
+  return new UnhandledError(error, caller,);
+}
+var UnhandledError = class extends Error {
+  constructor(error, caller,) {
+    const message = error ? JSON.stringify(error,) : 'No error message provided';
+    super(message,);
+    this.message = message;
+    if (caller && Error.captureStackTrace) {
+      Error.captureStackTrace(this, caller,);
+    } else {
+      try {
+        throw new Error();
+      } catch (e) {
+        this.stack = e.stack;
+      }
+    }
+  }
+};
+var hostname = typeof window !== 'undefined' ? window.location.hostname : void 0;
+var isLocal = Boolean(hostname && ['web.framerlocal.com', 'localhost', '127.0.0.1', '[::1]',].includes(hostname,),);
+var hosts = (() => {
+  if (!hostname) return;
+  if (isLocal) {
+    return {
+      main: hostname,
+      previewLink: void 0,
+    };
+  }
+  const previewHostRegex = /^(([^.]+\.)?beta\.)?((?:development\.)?framer\.com)$/u;
+  const match = hostname.match(previewHostRegex,);
+  if (!match || !match[3]) return;
+  return {
+    previewLink: match[2] && match[0],
+    main: match[3],
+  };
+})();
+var hostInfo = {
+  hosts,
+  isDevelopment: (hosts == null ? void 0 : hosts.main) === 'development.framer.com',
+  isProduction: (hosts == null ? void 0 : hosts.main) === 'framer.com',
+  isLocal,
+};
+var cachedServiceMap;
+function getServiceMap() {
+  if (typeof window === 'undefined') return {};
+  if (cachedServiceMap) return cachedServiceMap;
+  cachedServiceMap = extractServiceMap();
+  return cachedServiceMap;
+}
+function extractServiceMap() {
+  var _a, _b, _c;
+  const location = window.location;
+  let services = (_a = window == null ? void 0 : window.bootstrap) == null ? void 0 : _a.services;
+  if (services) {
+    return services;
+  }
+  let topOrigin;
+  try {
+    const topWindow = window.top;
+    topOrigin = topWindow.location.origin;
+    services = (_c = (_b = window.top) == null ? void 0 : _b.bootstrap) == null ? void 0 : _c.services;
+    if (services) {
+      return services;
+    }
+  } catch (e) {}
+  if (topOrigin && topOrigin !== location.origin) {
+    throw Error(`Unexpectedly embedded by ${topOrigin} (expected ${location.origin})`,);
+  }
+  if (location.origin.endsWith('framer.com',) || location.origin.endsWith('framer.dev',)) {
+    throw Error('ServiceMap data was not provided in document',);
+  }
+  try {
+    const servicesJSON = new URLSearchParams(location.search,).get('services',) ||
+      new URLSearchParams(location.hash.substring(1,),).get('services',);
+    if (servicesJSON) {
+      services = JSON.parse(servicesJSON,);
+    }
+  } catch (e) {}
+  if (services && typeof services === 'object' && services.api) {
+    return services;
+  }
+  throw Error('ServiceMap requested but not available',);
+}
+function jsonSafeCopy(obj, depth = 0, seen = /* @__PURE__ */ new Set(),) {
+  var _a;
+  if (obj === null) return obj;
+  if (typeof obj === 'function') return `[Function: ${obj.name ?? 'unknown'}]`;
+  if (typeof obj !== 'object') return obj;
+  if (obj instanceof Error) return `[${obj.toString()}]`;
+  if (seen.has(obj,)) return '[Circular]';
+  if (depth > 2) return '...';
+  seen.add(obj,);
+  try {
+    if ('toJSON' in obj && typeof obj.toJSON === 'function') {
+      return jsonSafeCopy(obj.toJSON(), depth + 1, seen,);
+    } else if (Array.isArray(obj,)) {
+      return obj.map((v) => jsonSafeCopy(v, depth + 1, seen,));
+    } else if (Object.getPrototypeOf(obj,) !== Object.prototype) {
+      return `[Object: ${'__class' in obj && obj.__class || ((_a = obj.constructor) == null ? void 0 : _a.name)}]`;
+    } else {
+      const result = {};
+      for (const [key7, v,] of Object.entries(obj,)) {
+        result[key7] = jsonSafeCopy(v, depth + 1, seen,);
+      }
+      return result;
+    }
+  } catch (e) {
+    return `[Throws: ${e instanceof Error ? e.message : e}]`;
+  } finally {
+    seen.delete(obj,);
+  }
+}
+var levelNames = ['trace', 'debug', 'info', 'warn', 'error',];
+var postfixNames = [':trace', ':debug', ':info', ':warn', ':error',];
+function applyLogLevelSpec(spec, all,) {
+  const missingSpecs = [];
+  for (const s of spec.split(/[ ,]/u,)) {
+    let match = s.trim();
+    if (match.length === 0) continue;
+    let level = 1;
+    let inverted = false;
+    if (match.startsWith('-',)) {
+      match = match.slice(1,);
+      level = 3;
+      inverted = true;
+    }
+    for (let i = 0; i <= 4; i++) {
+      const postfix = postfixNames[i];
+      if (!postfix) continue;
+      if (match.endsWith(postfix,)) {
+        level = i;
+        if (inverted) {
+          level += 1;
+        }
+        match = match.slice(0, match.length - postfix.length,);
+        if (match.length === 0) {
+          match = '*';
+        }
+        break;
+      }
+    }
+    const regex2 = new RegExp('^' + escapeRegExp(match,).replace(/\\\*/gu, '.*',) + '$',);
+    let loggersUpdated = 0;
+    for (const logger of all) {
+      if (logger.id.match(regex2,)) {
+        logger.level = level;
+        ++loggersUpdated;
+      }
+    }
+    if (loggersUpdated === 0) {
+      missingSpecs.push(s,);
+    }
+  }
+  return missingSpecs;
+}
+var _LogEntry = class _LogEntry2 {
+  constructor(logger, level, parts,) {
+    this.logger = logger;
+    this.level = level;
+    this.parts = parts;
+    __publicField(this, 'id',);
+    __publicField(this, 'time',);
+    __publicField(this, 'stringPrefix',);
+    this.id = _LogEntry2.nextId++;
+    this.time = Date.now();
+  }
+  toMessage() {
+    if (this.stringPrefix) return this.parts;
+    const r = [new Date(this.time,).toISOString().substr(-14, 14,), levelNames[this.level] + ': [' + this.logger.id + ']',];
+    let i = 0;
+    for (; i < this.parts.length; i++) {
+      const part = this.parts[i];
+      if (typeof part === 'string') {
+        r.push(part,);
+        continue;
+      }
+      break;
+    }
+    this.stringPrefix = r.join(' ',);
+    this.parts.splice(0, i, this.stringPrefix,);
+    return this.parts;
+  }
+  toString() {
+    return this.toMessage().map((part) => {
+      const type = typeof part;
+      if (type === 'string') return part;
+      if (type === 'function') return `[Function: ${part.name ?? 'unknown'}]`;
+      if (part instanceof Error) return part.stack ?? part.toString();
+      const json = JSON.stringify(jsonSafeCopy(part,),);
+      if ((json == null ? void 0 : json.length) > 253) {
+        return json.slice(0, 250,) + '...';
+      }
+      return json;
+    },).join(' ',);
+  }
+};
+__publicField(_LogEntry, 'nextId', 0,);
+var LogEntry = _LogEntry;
+var logLevelSpec = '*:app:info,app:info';
+var isNode = typeof process !== 'undefined' && !!process.kill;
+var isCI = isNode && false;
+if (isCI) {
+  logLevelSpec = '-:warn';
+} else if (isNode) {
+  logLevelSpec = '';
+}
+try {
+  if (typeof window !== 'undefined' && window.localStorage) {
+    logLevelSpec = window.localStorage.logLevel || logLevelSpec;
+  }
+} catch {}
+try {
+  if (typeof process !== 'undefined') {
+    logLevelSpec = process.env.DEBUG || logLevelSpec;
+  }
+} catch {}
+try {
+  if (typeof window !== 'undefined') {
+    Object.assign(window, {
+      setLogLevel,
+    },);
+  }
+} catch {}
+try {
+  if (typeof window !== 'undefined' && !!window.postMessage && window.top === window) {
+    window.addEventListener('message', (msg) => {
+      if (!msg.data || typeof msg.data !== 'object') return;
+      const {
+        loggerId,
+        level,
+        parts,
+        printed,
+      } = msg.data;
+      if (typeof loggerId !== 'string') return;
+      if (!Array.isArray(parts,) || parts.length < 1 || typeof level !== 'number') return;
+      const logger = getLogger2(loggerId,);
+      if (level < 0 || level > 5) return;
+      parts[0] = parts[0].replace('[', '*[',);
+      const entry = new LogEntry(logger, level, parts,);
+      entry.stringPrefix = parts[0];
+      replayBuffer.push(entry,);
+      if (printed) return;
+      if (logger.level > level) return;
+      console == null ? void 0 : console.log(...entry.toMessage(),);
+    },);
+  }
+} catch {}
+var postLogEntry;
+try {
+  if (typeof window !== 'undefined' && !!window.postMessage && window.top !== window) {
+    postLogEntry = (entry) => {
+      var _a;
+      try {
+        const parts = entry.toMessage().map((p) => jsonSafeCopy(p,));
+        const logger = entry.logger;
+        const level = entry.level;
+        const printed = logger.level <= entry.level;
+        const data2 = {
+          loggerId: logger.id,
+          level,
+          parts,
+          printed,
+        };
+        (_a = window.top) == null ? void 0 : _a.postMessage(data2, getServiceMap().app,);
+      } catch {}
+    };
+  }
+} catch {}
+var loggers = {};
+var replayBuffer = [];
+var maxReplayBufferEntries = 1e3;
+function createLogEntry(logger, level, parts,) {
+  const entry = new LogEntry(logger, level, parts,);
+  replayBuffer.push(entry,);
+  postLogEntry == null ? void 0 : postLogEntry(entry,);
+  while (replayBuffer.length > maxReplayBufferEntries) {
+    replayBuffer.shift();
+  }
+  return entry;
+}
+function getLogReplayBuffer(maxEntries,) {
+  if (typeof maxEntries === 'number') {
+    maxReplayBufferEntries = maxEntries;
+  }
+  return replayBuffer;
+}
+var pathRegex = /\/(?<filename>[^/.]+)(?=\.(?:debug\.)?html$)/u;
+var cachedFilename;
+function getFilenameFromWindowPathname() {
+  var _a, _b;
+  if (typeof window === 'undefined' || !window.location) return;
+  cachedFilename ??= (_b = (_a = pathRegex.exec(window.location.pathname,)) == null ? void 0 : _a.groups) == null ? void 0 : _b.filename;
+  return cachedFilename;
+}
+function getLogger2(id3,) {
+  const path = getFilenameFromWindowPathname();
+  id3 = (path ? path + ':' : '') + id3;
+  const existing = loggers[id3];
+  if (existing) return existing;
+  const logger = new Logger(id3,);
+  loggers[id3] = logger;
+  applyLogLevelSpec(logLevelSpec, [logger,],);
+  postLogEntry == null ? void 0 : postLogEntry(new LogEntry(logger, -1, [],),);
+  return logger;
+}
+function setLogLevel(spec, replay = true,) {
+  try {
+    if (typeof window !== 'undefined' && window.localStorage) {
+      window.localStorage.logLevel = spec;
+    }
+  } catch {}
+  const previousSpec = logLevelSpec;
+  logLevelSpec = spec;
+  const all = Object.values(loggers,);
+  for (const logger of all) {
+    logger.level = 3;
+  }
+  const missingSpecs = applyLogLevelSpec(spec, all,);
+  if (missingSpecs.length > 0) {
+    console == null ? void 0 : console.warn('Some log level specs matched no loggers:', missingSpecs,);
+  }
+  if (replay && replayBuffer.length > 0) {
+    console == null ? void 0 : console.log('--- LOG REPLAY ---',);
+    for (const entry of replayBuffer) {
+      if (entry.logger.level > entry.level) continue;
+      if (entry.level >= 3) {
+        console == null ? void 0 : console.warn(...entry.toMessage(),);
+      } else {
+        console == null ? void 0 : console.log(...entry.toMessage(),);
+      }
+    }
+    console == null ? void 0 : console.log('--- END OF LOG REPLAY ---',);
+  }
+  return previousSpec;
+}
+var enrichWithLogs = (extras) => {
+  const result = {
+    ...extras,
+    logs: getLogReplayBuffer().slice(-50,).map((entry) => entry.toString().slice(0, 600,)).join('\n',),
+  };
+  if (extras.logs) {
+    console == null ? void 0 : console.warn('extras.logs is reserved for log replay buffer, use another key',);
+  }
+  return result;
+};
+var Logger = class {
+  constructor(id3, errorIsCritical,) {
+    this.id = id3;
+    __publicField(this, 'level', 3,/* Warn */
+    );
+    __publicField(this, 'didLog', {},);
+    __publicField(this, 'errorIsCritical',);
+    __publicField(this, 'trace', (...parts) => {
+      if (this.level > 0) return;
+      const entry = createLogEntry(this, 0, parts,);
+      console == null ? void 0 : console.log(...entry.toMessage(),);
+    },);
+    __publicField(this, 'debug', (...parts) => {
+      const entry = createLogEntry(this, 1, parts,);
+      if (this.level > 1) return;
+      console == null ? void 0 : console.log(...entry.toMessage(),);
+    },);
+    __publicField(this, 'info', (...parts) => {
+      const entry = createLogEntry(this, 2, parts,);
+      if (this.level > 2) return;
+      console == null ? void 0 : console.info(...entry.toMessage(),);
+    },);
+    __publicField(this, 'warn', (...parts) => {
+      const entry = createLogEntry(this, 3, parts,);
+      if (this.level > 3) return;
+      console == null ? void 0 : console.warn(...entry.toMessage(),);
+    },);
+    __publicField(this, 'warnOncePerMinute', (firstPart, ...parts) => {
+      const lastLoggedTime = this.didLog[firstPart];
+      if (lastLoggedTime && lastLoggedTime > Date.now()) return;
+      this.didLog[firstPart] = Date.now() + 1e3 * 60;
+      parts.unshift(firstPart,);
+      const entry = createLogEntry(this, 3, parts,);
+      if (this.level > 3) return;
+      console == null ? void 0 : console.warn(...entry.toMessage(),);
+    },);
+    __publicField(this, 'error', (...parts) => {
+      const entry = createLogEntry(this, 4, parts,);
+      if (this.level > 4) return;
+      console == null ? void 0 : console.error(...entry.toMessage(),);
+    },);
+    __publicField(this, 'errorOncePerMinute', (firstPart, ...parts) => {
+      const lastLoggedTime = this.didLog[firstPart];
+      if (lastLoggedTime && lastLoggedTime > Date.now()) return;
+      this.didLog[firstPart] = Date.now() + 1e3 * 60;
+      parts.unshift(firstPart,);
+      const entry = createLogEntry(this, 4, parts,);
+      if (this.level > 4) return;
+      console == null ? void 0 : console.error(...entry.toMessage(),);
+    },);
+    __publicField(this, 'reportError', (maybeError, extras, tags, critical,) => {
+      extras = enrichWithLogs(extras ?? {},);
+      const reportedError = reportError({
+        caller: this.reportError,
+        error: maybeError,
+        tags: {
+          ...tags,
+          handler: 'logger',
+          where: this.id,
+        },
+        extras,
+        critical: critical ?? this.errorIsCritical,
+      },);
+      extras ? this.error(reportedError, extras,) : this.error(reportedError,);
+    },);
+    __publicField(this, 'reportErrorOncePerMinute', (error, extras,) => {
+      if (!isErrorWithMessage(error,)) return;
+      const lastLoggedTime = this.didLog[error.message];
+      if (lastLoggedTime && lastLoggedTime > Date.now()) return;
+      this.didLog[error.message] = Date.now() + 1e3 * 60;
+      this.reportError(error, extras,);
+    },);
+    __publicField(this, 'reportCriticalError', (maybeError, extras, tags,) => this.reportError(maybeError, extras, tags, true,),);
+    this.errorIsCritical = errorIsCritical ?? (id3 === 'fatal' || id3.endsWith(':fatal',));
+  }
+  extend(name,) {
+    const id3 = this.id + ':' + name;
+    return getLogger2(id3,);
+  }
+  /** Returns the messages this logger created that are still in the global replay buffer. */
+  getBufferedMessages() {
+    return replayBuffer.filter((entry) => entry.logger === this);
+  }
+  /** Set new level and return previous level. */
+  setLevel(level,) {
+    const previous = this.level;
+    this.level = level;
+    return previous;
+  }
+  /** Check if a trace messages will be output. */
+  isLoggingTraceMessages() {
+    return this.level >= 0;
+  }
+};
+function isErrorWithMessage(maybeError,) {
+  return Object.prototype.hasOwnProperty.call(maybeError, 'message',);
+}
+function escapeRegExp(string,) {
+  return string.replace(/[/\-\\^$*+?.()|[\]{}]/gu, '\\$&',);
+}
+var Mixed = Symbol('Mixed',);
+var DEPENDENCIES_MODULE_NAME = 'dependencies';
+var DEPENDENCIES_MODULE_TYPE = 'config';
+var DEPENDENCIES_MODULE_TYPE_SLASH_NAME = `${DEPENDENCIES_MODULE_TYPE}/${DEPENDENCIES_MODULE_NAME}`;
+var IMPORT_MAP_FILE_ID = `${DEPENDENCIES_MODULE_TYPE_SLASH_NAME}/importMap.json`;
+var DEPENDENCIES_FILE_ID = `${DEPENDENCIES_MODULE_TYPE_SLASH_NAME}/dependencies.json`;
+var USE_FREEZE = false;
+var List;
+((List2) => {
+  function push(ls, ...elements) {
+    return ls.concat(elements,);
+  }
+  List2.push = push;
+  function pop(a,) {
+    return a.slice(0, -1,);
+  }
+  List2.pop = pop;
+  function unshift(ls, ...elements) {
+    return elements.concat(ls,);
+  }
+  List2.unshift = unshift;
+  function insert(a, index, ...elements) {
+    const length = a.length;
+    if (index < 0 || index > length) throw Error('index out of range: ' + index,);
+    const copy = a.slice();
+    copy.splice(index, 0, ...elements,);
+    return copy;
+  }
+  List2.insert = insert;
+  function replace(a, index, replacement,) {
+    const length = a.length;
+    if (index < 0 || index >= length) throw Error('index out of range: ' + index,);
+    const itemsToAdd = Array.isArray(replacement,) ? replacement : [replacement,];
+    const copy = a.slice();
+    copy.splice(index, 1, ...itemsToAdd,);
+    return copy;
+  }
+  List2.replace = replace;
+  function remove2(a, index,) {
+    const length = a.length;
+    if (index < 0 || index >= length) throw Error('index out of range: ' + index,);
+    const copy = a.slice();
+    copy.splice(index, 1,);
+    return copy;
+  }
+  List2.remove = remove2;
+  function move(a, from, to,) {
+    const length = a.length;
+    if (from < 0 || from >= length) throw Error('from index out of range: ' + from,);
+    if (to < 0 || to >= length) throw Error('to index out of range: ' + to,);
+    const copy = a.slice();
+    if (to === from) return copy;
+    const element = copy[from];
+    if (from < to) {
+      copy.splice(to + 1, 0, element,);
+      copy.splice(from, 1,);
+    } else {
+      copy.splice(from, 1,);
+      copy.splice(to, 0, element,);
+    }
+    return copy;
+  }
+  List2.move = move;
+  function zip(a, b,) {
+    const res = [];
+    const length = Math.min(a.length, b.length,);
+    for (let i = 0; i < length; i++) {
+      res.push([a[i], b[i],],);
+    }
+    return res;
+  }
+  List2.zip = zip;
+  function update(a, index, body,) {
+    const res = a.slice();
+    const targetElement = res[index];
+    if (targetElement === void 0) return res;
+    res[index] = body(targetElement,);
+    return res;
+  }
+  List2.update = update;
+  function unique(a,) {
+    return Array.from(new Set(a,),);
+  }
+  List2.unique = unique;
+  function union(a, ...collections) {
+    return Array.from(/* @__PURE__ */ new Set([...a, ...collections.flat(),],),);
+  }
+  List2.union = union;
+  function filter2(a, predicate,) {
+    return a.filter(predicate,);
+  }
+  List2.filter = filter2;
+})(List || (List = {}),);
+var objectHasOwnProperty = Object.prototype.hasOwnProperty;
+function hasOwnProperty2(object, property,) {
+  return objectHasOwnProperty.call(object, property,);
+}
+var ValueObject;
+((ValueObject2) => {
+  function morphUsingTemplate(values, template,) {
+    for (const field of Object.keys(values,)) {
+      if (!hasOwnProperty2(template, field,)) {
+        delete values[field];
+      }
+    }
+    for (const field of Object.keys(template,)) {
+      if (values[field] === void 0) {
+        values[field] = template[field];
+      }
+    }
+    Object.setPrototypeOf(values, Object.getPrototypeOf(template,),);
+    if (USE_FREEZE) {
+      Object.freeze(values,);
+    }
+    return values;
+  }
+  ValueObject2.morphUsingTemplate = morphUsingTemplate;
+  function writeOnce(object, values,) {
+    if (values) {
+      Object.assign(object, values,);
+    }
+    if (USE_FREEZE) {
+      Object.freeze(object,);
+    }
+  }
+  ValueObject2.writeOnce = writeOnce;
+  function update(object, values,) {
+    const result = Object.assign(Object.create(Object.getPrototypeOf(object,),), object, values,);
+    if (USE_FREEZE) {
+      Object.freeze(result,);
+    }
+    return result;
+  }
+  ValueObject2.update = update;
+})(ValueObject || (ValueObject = {}),);
+var ReadonlySet;
+((ReadonlySet2) => {
+  function add3(set, ...items) {
+    return /* @__PURE__ */ new Set([...set, ...items,],);
+  }
+  ReadonlySet2.add = add3;
+  function remove2(set, ...items) {
+    const result = new Set(set,);
+    for (const item of items) {
+      result.delete(item,);
+    }
+    return result;
+  }
+  ReadonlySet2.remove = remove2;
+  function union(...sets) {
+    const result = /* @__PURE__ */ new Set();
+    for (const set of sets) {
+      for (const item of set) {
+        result.add(item,);
+      }
+    }
+    return result;
+  }
+  ReadonlySet2.union = union;
+  function toggle(set, item,) {
+    if (set.has(item,)) {
+      return ReadonlySet2.remove(set, item,);
+    }
+    return ReadonlySet2.add(set, item,);
+  }
+  ReadonlySet2.toggle = toggle;
+})(ReadonlySet || (ReadonlySet = {}),);
+var ReadonlyMap;
+((ReadonlyMap2) => {
+  function set(map2, key7, value,) {
+    const result = new Map(map2,);
+    result.set(key7, value,);
+    return result;
+  }
+  ReadonlyMap2.set = set;
+  function remove2(map2, key7,) {
+    const result = new Map(map2,);
+    result.delete(key7,);
+    return result;
+  }
+  ReadonlyMap2.remove = remove2;
+})(ReadonlyMap || (ReadonlyMap = {}),);
+var ResolvablePromise = class extends Promise {
+  constructor() {
+    let res;
+    let rej;
+    super((resolve, reject,) => {
+      res = resolve;
+      rej = reject;
+    },);
+    __publicField(this, '_state', 'initial',);
+    __publicField(this, 'resolve',);
+    __publicField(this, 'reject',);
+    this.resolve = (val) => {
+      this._state = 'fulfilled';
+      res(val,);
+    };
+    this.reject = (reason) => {
+      this._state = 'rejected';
+      rej(reason,);
+    };
+  }
+  get state() {
+    return this._state;
+  }
+  /**
+   * A function that sets the state to "pending".
+   * Useful for when you want to signal that the task started but is not yet completed.
+   */
+  pending() {
+    this._state = 'pending';
+    return this;
+  }
+  isResolved() {
+    return this._state === 'fulfilled' || this._state === 'rejected';
+  }
+};
+ResolvablePromise.prototype.constructor = Promise;
+var hasNativeYield = false;
+var hasNativePostTask = false;
+var hasIsInputPending = false;
+if (typeof window !== 'undefined' && window.scheduler) {
+  hasNativeYield = 'yield' in window.scheduler;
+  hasNativePostTask = 'postTask' in window.scheduler;
+  hasIsInputPending = 'isInputPending' in window.scheduler;
+}
+var log2 = getLogger2('task-queue',);
+function getAssetFilename(asset,) {
+  return asset.key + asset.extension;
+}
+function createAbsoluteAssetURL(filename,) {
+  const serviceMap = getServiceMap();
+  return `${serviceMap.userContent}/assets/${filename}`;
+}
+function createAbsoluteAssetURLFromAsset(asset,) {
+  return createAbsoluteAssetURL(getAssetFilename(asset,),);
+}
 function supportsOpenType(openTypeData,) {
   return Boolean(openTypeData && Array.isArray(openTypeData,),);
 }
@@ -44014,17 +44832,18 @@ var BuiltInFontSource = class {
       const {
         properties,
       } = asset;
-      const fontName = properties.font.preferredFamily || properties.font.fontFamily;
+      const fontName = properties.font.fontFamily;
       const fontFamily = this.createFontFamily(fontName, properties.font.foundryName, properties.font.fontVersion,);
       const openTypeData = properties.font.openTypeData;
       const variationAxesData = properties.font.variationAxes;
       const isVariableFont2 = Array.isArray(variationAxesData,);
-      const variant = isVariableFont2 ? 'variable' : properties.font.preferredSubFamily || properties.font.fontSubFamily || 'regular';
+      const variant = isVariableFont2 ? 'variable' : properties.font.fontSubFamily || 'regular';
+      const url = createAbsoluteAssetURLFromAsset(asset,);
       const font = {
         family: fontFamily,
         selector: this.createSelector(fontName, variant, properties.font.fontVersion,),
         variant,
-        file: asset.url,
+        file: url,
         hasOpenTypeFeatures: supportsOpenType(openTypeData,),
         variationAxes: validateVariationAxes(variationAxesData,),
         category: properties.font.fontCategory,
@@ -44054,10 +44873,9 @@ var BuiltInFontSource = class {
       style: style2,
     };
   }
-  getFontBySelector(selector, createFont = true,) {
+  getFontBySelector(selector,) {
     const locator = this.parseSelector(selector,);
     if (!locator) return;
-    if (!createFont && !this.byFamilyName.get(locator.name,)) return;
     const fontFamily = this.getFontFamilyByName(locator.name,);
     if (!fontFamily) return;
     return fontFamily.fonts.find((f) => f.selector === selector);
@@ -44205,20 +45023,145 @@ function getFontStyle(variant,) {
   if (variant.includes('italic',) || variant.includes('oblique',) || variant.includes('slanted',)) return 'italic';
   return 'normal';
 }
+function getRelatedFontVariants(currentVariant, availableVariants,) {
+  return {
+    ...pickBoldItalicVariants(currentVariant, availableVariants,),
+    ...pickVariableVariants(currentVariant, availableVariants,),
+  };
+}
+function pickBoldItalicVariants(currentVariant, availableVariants,) {
+  if (availableVariants.length === 0) {
+    return {
+      variantBold: void 0,
+      variantBoldItalic: void 0,
+      variantItalic: void 0,
+    };
+  }
+  const {
+    weight: currentWeight,
+    style: currentStyle,
+  } = currentVariant;
+  const variantByWeightAndStyle = /* @__PURE__ */ new Map();
+  const boldVariantByStyle = /* @__PURE__ */ new Map();
+  for (const variant of availableVariants) {
+    if (variant.isVariable !== currentVariant.isVariable) continue;
+    variantByWeightAndStyle.set(`${variant.weight}-${variant.style}`, variant,);
+    if (variant.weight <= currentWeight) continue;
+    if (!boldVariantByStyle.has(variant.style,)) {
+      boldVariantByStyle.set(variant.style, variant,);
+    }
+  }
+  let variantBold = boldVariantByStyle.get(currentStyle,);
+  let variantBoldItalic = boldVariantByStyle.get('italic',);
+  const currentVariantWeight = currentVariant.weight;
+  if (currentVariantWeight <= 300) {
+    variantBold = variantByWeightAndStyle.get(`400-${currentStyle}`,) ?? variantBold;
+    variantBoldItalic = variantByWeightAndStyle.get('400-italic',) ?? variantBoldItalic;
+  } else if (currentVariantWeight <= 500) {
+    variantBold = variantByWeightAndStyle.get(`700-${currentStyle}`,) ?? variantBold;
+    variantBoldItalic = variantByWeightAndStyle.get('700-italic',) ?? variantBoldItalic;
+  } else {
+    variantBold = variantByWeightAndStyle.get(`900-${currentStyle}`,) ?? variantBold;
+    variantBoldItalic = variantByWeightAndStyle.get('900-italic',) ?? variantBoldItalic;
+  }
+  const variantItalic = variantByWeightAndStyle.get(`${currentWeight}-italic`,);
+  return {
+    variantBold,
+    variantItalic,
+    variantBoldItalic,
+  };
+}
+function pickVariableVariants(currentVariant, availableVariants,) {
+  if (availableVariants.length === 0) {
+    return {
+      variantVariable: void 0,
+      variantVariableItalic: void 0,
+    };
+  }
+  const variantByWeightAndStyle = /* @__PURE__ */ new Map();
+  let variantVariable;
+  let variantVariableItalic;
+  let fallbackVariant;
+  let fallbackItalicVariant;
+  for (const variant of availableVariants) {
+    if (!variant.isVariable) continue;
+    const isSameWeight = variant.weight === currentVariant.weight;
+    const isDefaultWeight = variant.weight === 400;
+    if (variant.style === 'normal') {
+      if (isSameWeight) {
+        variantVariable = variant;
+      } else if (isDefaultWeight) {
+        fallbackVariant = variant;
+      } else if (!fallbackVariant) {
+        fallbackVariant = variant;
+      }
+    } else if (variant.style === 'italic') {
+      if (isSameWeight) {
+        variantVariableItalic = variant;
+      } else if (isDefaultWeight) {
+        fallbackItalicVariant = variant;
+      } else if (!fallbackItalicVariant) {
+        fallbackItalicVariant = variant;
+      }
+    }
+  }
+  return {
+    variantVariable: variantVariable ?? fallbackVariant,
+    variantVariableItalic: variantVariableItalic ?? fallbackItalicVariant,
+  };
+}
 var customFontSelectorPrefix = 'CUSTOM;';
+var log3 = getLogger('custom-font-source',);
+function findDuplicateFont(existingFonts, newFont,) {
+  for (let i = 0; i < existingFonts.length; i++) {
+    const existingFont = existingFonts[i];
+    if (
+      existingFont && existingFont.selector === newFont.selector && existingFont.weight === newFont.weight &&
+      existingFont.style === newFont.style
+    ) {
+      return {
+        existingFont,
+        index: i,
+      };
+    }
+  }
+  return void 0;
+}
 function getCustomFontName(fileName, properties,) {
   if (!properties) return fileName.substring(0, fileName.lastIndexOf('.',),);
   const {
     font,
   } = properties;
-  const fontFamily = font.preferredFamily || font.fontFamily;
+  const fontFamily = font.fontFamily;
   const isAssetVariableFont = Array.isArray(font.variationAxes,);
   if (isAssetVariableFont && fontFamily.toLowerCase().includes('variable',)) return fontFamily;
-  const variant = isAssetVariableFont ? 'Variable' : (font.preferredSubFamily || font.fontSubFamily).trim();
+  const variant = isAssetVariableFont ? 'Variable' : font.fontSubFamily.trim();
   if (variant === '') return fontFamily;
   return `${fontFamily} ${variant}`;
 }
-var CustomFontSource = class {
+function getCustomFontInfo({
+  fontFamily,
+  fontSubFamily,
+  variationAxes,
+  faceDescriptors,
+},) {
+  const rawVariant = fontSubFamily.trim() || 'Regular';
+  const containsVariant = rawVariant.toLocaleLowerCase().includes('variable',);
+  const variant = validateVariationAxes(variationAxes,) && !containsVariant ? `Variable ${rawVariant}` : rawVariant;
+  let style2 = 'normal';
+  let weight = 400;
+  if (faceDescriptors) {
+    weight = faceDescriptors.weight;
+    style2 = faceDescriptors.italic || faceDescriptors.oblique ? 'italic' : 'normal';
+  }
+  return {
+    family: fontFamily,
+    variant,
+    weight,
+    style: style2,
+  };
+}
+var CustomFontSource = class _CustomFontSource {
   constructor() {
     __publicField(this, 'name', 'custom',/* Custom */
     );
@@ -44226,8 +45169,8 @@ var CustomFontSource = class {
     __publicField(this, 'byFamilyName', /* @__PURE__ */ new Map(),);
     __publicField(this, 'assetsByFamily', /* @__PURE__ */ new Map(),);
   }
-  importFonts(assets,) {
-    var _a, _b, _c;
+  deprecatedImportFonts(assets,) {
+    var _a, _b;
     this.fontFamilies.length = 0;
     this.byFamilyName.clear();
     this.assetsByFamily.clear();
@@ -44242,12 +45185,12 @@ var CustomFontSource = class {
       const fontFamily = this.createFontFamily(fontName,);
       const openTypeData = (_b = asset.properties) == null ? void 0 : _b.font.openTypeData;
       const variant = isVariableFont2 ? 'variable' : this.inferVariantName(fontName,);
+      const url = createAbsoluteAssetURLFromAsset(asset,);
       const font = {
         family: fontFamily,
         selector: `${customFontSelectorPrefix}${fontName}`,
         variant,
-        postscriptName: (_c = asset.properties) == null ? void 0 : _c.font.postscriptName,
-        file: asset.url,
+        file: url,
         hasOpenTypeFeatures: supportsOpenType(openTypeData,),
         variationAxes: validateVariationAxes(variationAxesData,),
       };
@@ -44258,6 +45201,65 @@ var CustomFontSource = class {
     }
     return fonts;
   }
+  importFonts(assets, enableFontImprovements,) {
+    var _a, _b, _c, _d;
+    if (!enableFontImprovements) {
+      return this.deprecatedImportFonts(assets,);
+    }
+    this.fontFamilies.length = 0;
+    this.byFamilyName.clear();
+    this.assetsByFamily.clear();
+    const fonts = {};
+    for (const asset of assets) {
+      if (!this.isValidCustomFontAsset(asset,)) {
+        continue;
+      }
+      const {
+        family,
+        variant,
+        weight,
+        style: style2,
+      } = getCustomFontInfo(asset.properties.font,);
+      const fontFamily = this.createFontFamily(family,);
+      const openTypeData = (_a = asset.properties) == null ? void 0 : _a.font.openTypeData;
+      const url = createAbsoluteAssetURLFromAsset(asset,);
+      const font = {
+        family: fontFamily,
+        selector: _CustomFontSource.createSelector(fontFamily.name, variant,),
+        variant,
+        weight,
+        style: style2,
+        file: url,
+        hasOpenTypeFeatures: supportsOpenType(openTypeData,),
+        variationAxes: validateVariationAxes((_b = asset.properties) == null ? void 0 : _b.font.variationAxes,),
+      };
+      const duplicateInfo = findDuplicateFont(fontFamily.fonts, font,);
+      if (duplicateInfo) {
+        log3.warn('Duplicate font found for:', font, 'with existing font:', duplicateInfo.existingFont,);
+        const existingFont = duplicateInfo.existingFont;
+        const newIsWoff2 = ((_c = font.file) == null ? void 0 : _c.endsWith('.woff2',)) ?? false;
+        const existingIsWoff2 = ((_d = existingFont.file) == null ? void 0 : _d.endsWith('.woff2',)) ?? false;
+        if (newIsWoff2 && !existingIsWoff2) {
+          fontFamily.fonts[duplicateInfo.index] = font;
+          fonts[font.selector] = font;
+        }
+      } else {
+        fontFamily.fonts.push(font,);
+        fonts[font.selector] = font;
+      }
+      fontFamily.owner = asset.ownerType === 'team' ? 'team' : 'project';
+      this.assetsByFamily.set(family, asset,);
+    }
+    for (const fontFamily of this.fontFamilies) {
+      if (fontFamily.fonts.length > 0) {
+        updateFontRelationships(fontFamily,);
+      }
+    }
+    return Object.values(fonts,);
+  }
+  static createSelector(family, variant,) {
+    return `${customFontSelectorPrefix}${family}${variant ? ` ${variant}` : ''}`;
+  }
   isValidCustomFontAsset(asset,) {
     var _a;
     if (!asset.mimeType.startsWith('font/',)) return false;
@@ -44304,118 +45306,66 @@ var CustomFontSource = class {
     this.fontFamilies.push(fontFamily,);
     this.byFamilyName.set(fontFamily.name, fontFamily,);
   }
-  parseSelector(selector,) {
-    if (!selector.startsWith(customFontSelectorPrefix,)) return null;
-    const tokens = selector.split(customFontSelectorPrefix,);
-    if (tokens[1] === void 0) return null;
-    const locator = {
-      source: 'custom',
-      name: tokens[1],
-    };
-    return locator;
-  }
-  getFontBySelector(selector, createFont = true,) {
-    const locator = this.parseSelector(selector,);
-    if (!locator) return;
-    if (!createFont && !this.byFamilyName.get(locator.name,)) return;
-    const fonts = this.getFontFamilyByName(locator.name,).fonts;
-    const woff2Font = fonts.find((font) => {
-      var _a;
-      return (_a = font.file) == null ? void 0 : _a.endsWith('.woff2',);
-    },);
-    return woff2Font || fonts[0];
+  getFontBySelector(selector,) {
+    if (!selector.startsWith(customFontSelectorPrefix,)) return void 0;
+    const remainingSelector = selector.slice(customFontSelectorPrefix.length,);
+    if (!remainingSelector) return void 0;
+    const matchingFonts = [];
+    for (const [familyName, fontFamily,] of this.byFamilyName) {
+      if (remainingSelector.startsWith(familyName,)) {
+        const exactMatches = fontFamily.fonts.filter((font) => font.selector === selector);
+        matchingFonts.push(...exactMatches,);
+      }
+    }
+    if (matchingFonts.length > 0) {
+      if (matchingFonts.length > 1) {
+        const woff2Font = matchingFonts.find((font) => {
+          var _a;
+          return (_a = font.file) == null ? void 0 : _a.endsWith('.woff2',);
+        },);
+        if (woff2Font) return woff2Font;
+      }
+      return matchingFonts[0];
+    }
+    return void 0;
   }
   getFontFamilyByName(family,) {
     const foundFontFamily = this.byFamilyName.get(family,);
-    if (foundFontFamily) return foundFontFamily;
-    const fontFamily = {
-      source: 'custom',
-      name: family,
-      fonts: [],
-    };
-    fontFamily.fonts.push({
-      selector: `${customFontSelectorPrefix}${family}`,
-      variant: this.inferVariantName(family,),
-      family: fontFamily,
-    },);
-    return fontFamily;
+    if (!foundFontFamily) return null;
+    return foundFontFamily;
   }
 };
-function getRelatedFontVariants(currentVariant, availableVariants,) {
-  return {
-    ...pickBoldItalicVariants(currentVariant, availableVariants,),
-    ...pickVariableVariants(currentVariant, availableVariants,),
-  };
-}
-function pickBoldItalicVariants(currentVariant, availableVariants,) {
-  if (availableVariants.length === 0) {
-    return {
-      variantBold: void 0,
-      variantBoldItalic: void 0,
-      variantItalic: void 0,
-    };
-  }
-  const {
-    weight: currentWeight,
-    style: currentStyle,
-  } = currentVariant;
-  const variantByWeightAndStyle = /* @__PURE__ */ new Map();
-  const boldVariantByStyle = /* @__PURE__ */ new Map();
-  for (const variant of availableVariants) {
-    if (variant.isVariable !== currentVariant.isVariable) continue;
-    variantByWeightAndStyle.set(`${variant.weight}-${variant.style}`, variant,);
-    if (variant.weight <= currentWeight) continue;
-    if (!boldVariantByStyle.has(variant.style,)) {
-      boldVariantByStyle.set(variant.style, variant,);
-    }
-  }
-  let variantBold = boldVariantByStyle.get(currentStyle,);
-  let variantBoldItalic = boldVariantByStyle.get('italic',);
-  const currentVariantWeight = currentVariant.weight;
-  if (currentVariantWeight <= 300) {
-    variantBold = variantByWeightAndStyle.get(`400-${currentStyle}`,) ?? variantBold;
-    variantBoldItalic = variantByWeightAndStyle.get('400-italic',) ?? variantBoldItalic;
-  } else if (currentVariantWeight <= 500) {
-    variantBold = variantByWeightAndStyle.get(`700-${currentStyle}`,) ?? variantBold;
-    variantBoldItalic = variantByWeightAndStyle.get('700-italic',) ?? variantBoldItalic;
-  } else {
-    variantBold = variantByWeightAndStyle.get(`900-${currentStyle}`,) ?? variantBold;
-    variantBoldItalic = variantByWeightAndStyle.get('900-italic',) ?? variantBoldItalic;
-  }
-  const variantItalic = variantByWeightAndStyle.get(`${currentWeight}-italic`,);
+function fontToVariantWithMetadata(font,) {
+  if (!font.weight || !font.style) return void 0;
   return {
-    variantBold,
-    variantItalic,
-    variantBoldItalic,
-  };
-}
-function pickVariableVariants(currentVariant, availableVariants,) {
-  if (availableVariants.length === 0) {
-    return {
-      variantVariable: void 0,
-      variantVariableItalic: void 0,
-    };
+    weight: font.weight,
+    style: font.style,
+    isVariable: isVariableFont(font,),
+    selector: font.selector,
+  };
+}
+function updateFontRelationships(fontFamily,) {
+  var _a, _b, _c, _d, _e;
+  const availableVariants = fontFamily.fonts.map((font) => fontToVariantWithMetadata(font,)).filter((font) => font !== void 0);
+  for (const font of fontFamily.fonts) {
+    const variant = fontToVariantWithMetadata(font,);
+    if (!variant) continue;
+    const relatedVariants = getRelatedFontVariants(variant, availableVariants,);
+    font.selectorVariable = (_a = relatedVariants.variantVariable) == null ? void 0 : _a.selector;
+    font.selectorVariableItalic = (_b = relatedVariants.variantVariableItalic) == null ? void 0 : _b.selector;
+    font.selectorBold = (_c = relatedVariants.variantBold) == null ? void 0 : _c.selector;
+    font.selectorBoldItalic = (_d = relatedVariants.variantBoldItalic) == null ? void 0 : _d.selector;
+    font.selectorItalic = (_e = relatedVariants.variantItalic) == null ? void 0 : _e.selector;
   }
-  const variantByWeightAndStyle = /* @__PURE__ */ new Map();
-  for (const variant of availableVariants) {
-    if (!variant.isVariable) continue;
-    variantByWeightAndStyle.set(`${variant.weight}-${variant.style}`, variant,);
-  }
-  return {
-    variantVariable: variantByWeightAndStyle.get(`${currentVariant.weight}-normal`,) ?? variantByWeightAndStyle.get(`400-normal`,) ??
-      void 0,
-    variantVariableItalic: variantByWeightAndStyle.get(`${currentVariant.weight}-italic`,) ?? variantByWeightAndStyle.get(`400-italic`,) ??
-      void 0,
-  };
 }
 async function loadFontsWithOpenType(source,) {
   switch (source) {
     case 'google': {
-      const supportedFonts = await import('./framer-chunks/google-LHIHIYDX-NVWWNJLR.js');
+      const supportedFonts = await import('./framer-chunks/google-3ASCFEEO-3R47BR2A.js');
       return supportedFonts == null ? void 0 : supportedFonts.default;
     }
     case 'fontshare': {
-      const supportedFonts = await import('./framer-chunks/fontshare-GSJIWLGZ-3DSFZVD7.js');
+      const supportedFonts = await import('./framer-chunks/fontshare-4J2ZFRBB-H5VQLZTM.js');
       return supportedFonts == null ? void 0 : supportedFonts.default;
     }
     default:
@@ -44425,11 +45375,11 @@ async function loadFontsWithOpenType(source,) {
 async function loadFontToOpenTypeFeatures(source,) {
   switch (source) {
     case 'google': {
-      const features = await import('./framer-chunks/google-3GQMHAEU-WSITVUPV.js');
+      const features = await import('./framer-chunks/google-FDB6LUFQ-PFSUZGKF.js');
       return features == null ? void 0 : features.default;
     }
     case 'fontshare': {
-      const features = await import('./framer-chunks/fontshare-SSHBFVID-JIQZ2OLR.js');
+      const features = await import('./framer-chunks/fontshare-622CVMZZ-HFPH543A.js');
       return features == null ? void 0 : features.default;
     }
     case 'framer': {
@@ -44977,10 +45927,10 @@ function loadVariationAxes(source,) {
       const axes = (async () => {
         switch (source) {
           case 'google': {
-            return (await import('./framer-chunks/google-42BCYVR5-QT55MZO3.js')).default;
+            return (await import('./framer-chunks/google-C62SNV32-LCI4F7VO.js')).default;
           }
           case 'fontshare': {
-            return (await import('./framer-chunks/fontshare-X6MCIXW5-UOB5XTBQ.js')).default;
+            return (await import('./framer-chunks/fontshare-JGEKH7YN-QOX3MC3K.js')).default;
           }
           default:
             assertNever(source,);
@@ -45094,13 +46044,13 @@ var FontStore = class {
       this.addFont(font,);
     },);
   }
-  importCustomFonts(assets,) {
+  importCustomFonts(assets, enableFontImprovements,) {
     this.bySelector.forEach((_, key7,) => {
       if (key7.startsWith(customFontSelectorPrefix,)) {
         this.bySelector.delete(key7,);
       }
     },);
-    const importedFonts = this.custom.importFonts(assets,);
+    const importedFonts = this.custom.importFonts(assets, enableFontImprovements,);
     for (const font of importedFonts) {
       this.addFont(font,);
     }
@@ -45108,14 +46058,21 @@ var FontStore = class {
       this.resolveCustomFontsImportPromise();
     }
   }
+  /**
+   * Returns a promise that resolves when custom fonts have been imported
+   * @internal
+   */
+  getCustomFontsImportPromise() {
+    return this.customFontsImportPromise;
+  }
   getFontFamily(info,) {
     const fontFamily = this[info.source].getFontFamilyByName(info.name,);
     return fontFamily;
   }
-  getFontBySelector(selector, createFont = true,) {
+  getFontBySelector(selector,) {
     if (!selector) return void 0;
     if (selector.startsWith(customFontSelectorPrefix,)) {
-      return this.custom.getFontBySelector(selector, createFont,);
+      return this.custom.getFontBySelector(selector,);
     }
     return this.bySelector.get(selector,);
   }
@@ -46090,11 +47047,6 @@ var Image2 = /* @__PURE__ */ React4.forwardRef(function Image3(props, ref,) {
     ],
   },);
 },);
-var nonSlugCharactersRegExp = /[^\p{Letter}\p{Number}()]+/gu;
-var trimSlugRegExp = /^-+|-+$/gu;
-function slugify(value,) {
-  return value.toLowerCase().replace(nonSlugCharactersRegExp, '-',).replace(trimSlugRegExp, '',);
-}
 var frameFromElement = (element) => {
   const frame2 = Rect.fromRect(element.getBoundingClientRect(),);
   frame2.x = frame2.x + safeWindow.scrollX;
@@ -47326,11 +48278,11 @@ function imagePatternPropsForFill(fill, frame2, id3, includeTransform,) {
   };
 }
 var mediaType2 = 'framer/asset-reference,';
-function isAssetReference(value,) {
+function isAssetReference2(value,) {
   return value.startsWith(`data:${mediaType2}`,);
 }
 function imageUrlForAsset(asset, pixelSize,) {
-  if (/^\w+:/u.test(asset,) && !isAssetReference(asset,)) return asset;
+  if (/^\w+:/u.test(asset,) && !isAssetReference2(asset,)) return asset;
   if (typeof pixelSize !== 'number') pixelSize = void 0;
   else if (pixelSize <= 512) pixelSize = 512;
   else if (pixelSize <= 1024) pixelSize = 1024;
@@ -49549,12 +50501,12 @@ var package_default = {
   author: 'Framer',
   license: 'MIT',
   scripts: {
-    coverage: 'yarn :jest --coverage',
-    lint: 'yarn :eslint ./src --ext .ts,.tsx --format codeframe --quiet --cache',
+    coverage: 'jest --coverage',
+    lint: 'eslint ./src --ext .ts,.tsx --format gha-codeframe --quiet --cache',
     'lint:ci': 'yarn lint --cache-strategy content --cache-location $HOME/.cache/eslint/framer-library',
     'lint:fix': 'yarn lint --fix',
-    test: 'yarn :jest',
-    watch: 'yarn :jest --watch',
+    test: 'jest',
+    watch: 'jest --watch',
     postinstall: 'node postinstall.cjs',
   },
   dependencies: {
@@ -49571,17 +50523,19 @@ var package_default = {
     '@testing-library/react': '^13.4.0',
     '@testing-library/user-event': '^14.4.3',
     '@types/dom-navigation': '^1.0.5',
-    '@types/google.fonts': '^1.0.5',
-    '@types/node': '^20.16.5',
-    '@types/react': '^18.2.67',
-    '@types/react-dom': '^18.2.22',
+    '@types/fontfaceobserver': '2.1',
+    '@types/google.fonts': '1.0',
+    '@types/node': '22.16',
+    '@types/react': '18.2',
+    '@types/react-dom': '18.2',
     '@types/yargs': '^17.0.33',
-    '@typescript-eslint/eslint-plugin': '^8.35.0',
-    '@typescript-eslint/parser': '^8.35.0',
+    '@typescript-eslint/eslint-plugin': '^8.36.0',
+    '@typescript-eslint/parser': '^8.36.0',
     chalk: '^4.1.2',
     eslint: '^8.57.1',
     'eslint-plugin-framer-studio': 'workspace:*',
     immutable: '^3.8.2',
+    jest: '29.4.1',
     'jest-diff': '^29.3.1',
     'jest-environment-jsdom': '^29.3.1',
     'jest-environment-jsdom-global': '^4.0.0',
@@ -49589,11 +50543,11 @@ var package_default = {
     react: '^18.2.0',
     'react-dom': '^18.2.0',
     semver: '^7.7.1',
-    typescript: '^5.7.3',
+    typescript: '^5.8.3',
     yargs: '^17.7.2',
   },
   peerDependencies: {
-    'framer-motion': '12.14.0',
+    'framer-motion': '>=12.14.0',
     react: '^18.2.0',
     'react-dom': '^18.2.0',
   },
@@ -50110,6 +51064,7 @@ export {
   useSpring,
   useSVGTemplate,
   useTime,
+  useTracking,
   useTransform,
   useUnmountEffect,
   useVariantState,