@reuters-graphics/graphics-components 3.10.1 → 4.0.0

package/dist/llm-docs/components/HeroHeadline.md

@@ -216,14 +216,14 @@ To use a photo as the hero, simply pass the image source to the `img` prop.
 <!-- App.svelte -->
 <script>
   import { HeroHeadline } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+  import { asset } from '$app/paths'; // 👈 If using in the graphics kit...
 
   let { embedded = false } = $props(); // 👈 If using in the graphics kit...
 </script>
 
 <HeroHeadline
   {embedded}
-  img={`${assets}/images/polar-bear.jpg`}
+  img={asset('/images/polar-bear.jpg')}
   ariaDescription="A photo of a polar bear"
   notes="Photo by REUTERS"
   section={'World News'}
@@ -269,7 +269,7 @@ To customise styles, use CSS to target the class passed to `HeroHeadline`.
 
   import QuakeMap from './ai2svelte/graphic.svelte'; // Your ai2svelte component
 
-  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+  import { asset } from '$app/paths'; // 👈 If using in the graphics kit...
 
   let { embedded = false } = $props(); // 👈 If using in the graphics kit...
 </script>
@@ -300,7 +300,7 @@ To customise styles, use CSS to target the class passed to `HeroHeadline`.
     ariaDescription="Earthquake impact map"
   >
     <!-- Pass `assetsPath` if in graphics kit -->
-    <QuakeMap assetsPath={assets || '/'} />
+    <QuakeMap assetsPath={asset('/').replace(/\/$/, '')} />
   </GraphicBlock>
 </HeroHeadline>
 ```
@@ -354,7 +354,7 @@ To add a video as the hero, use the [Video](?path=/docs/components-multimedia-vi
 ```svelte
 <script>
   import { HeroHeadline, Video } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+  import { asset } from '$app/paths'; // 👈 If using in the graphics kit...
 
   let { embedded = false } = $props(); // 👈 If using in the graphics kit...
 </script>
@@ -374,8 +374,8 @@ To add a video as the hero, use the [Video](?path=/docs/components-multimedia-vi
     showControls={false}
     preloadVideo="auto"
     playVideoWhenInView={false}
-    src={`${assets}/videos/intro.mp4`}
-    poster={`${assets}/images/video-poster-intro.jpg`}
+    src={asset('/videos/intro.mp4')}
+    poster={asset('/images/video-poster-intro.jpg')}
     notes="Drone footage from the Village 8 refugee camp in Sudan."
     ariaDescription="Aerial footage of people houses in refugee camp"
   />
@@ -414,7 +414,7 @@ To use a photo, graphic, video, etc. as an inline hero -- i.e., to make the hero
     HeroHeadline,
     GraphicBlock,
   } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+  import { asset } from '$app/paths'; // 👈 If using in the graphics kit...
 
   let { embedded = false } = $props(); // 👈 If using in the graphics kit...
 </script>
@@ -438,7 +438,7 @@ To use a photo, graphic, video, etc. as an inline hero -- i.e., to make the hero
     notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus"
   >
     <!-- Pass `assetsPath` if in graphics kit -->
-    <CrashMap assetsPath={assets || '/'} />
+    <CrashMap assetsPath={asset('/').replace(/\/$/, '')} />
   </GraphicBlock>
 </HeroHeadline>
 ```

package/dist/llm-docs/components/HorizontalScroller.md

@@ -247,7 +247,7 @@ allow_overflow: true
   import AiGraphic from './ai2svelte/ai-graphic.svelte';
 
   // If using with the graphics kit
-  import { assets } from '$app/paths';
+  import { asset } from '$app/paths';
 
   // Optional easing function
   import { sineInOut } from 'svelte/easing';
@@ -256,7 +256,7 @@ allow_overflow: true
 <!-- Wrap `HorizontalScroller` in a fluid container for a full bleed experience -->
 <Block width="fluid">
   <HorizontalScroller height="800lvh" easing={sineInOut} showDebugInfo>
-    <AiGraphic assetsPath={assets} />
+    <AiGraphic assetsPath={asset('/').replace(/\/$/, '')} />
   </HorizontalScroller>
 </Block>
 ```
@@ -287,7 +287,7 @@ This demo has a tagged `png` [layer](https://reuters-graphics.github.io/ai2svelt
   import { sineInOut } from 'svelte/easing';
 
   // If using with the graphics kit
-  import { assets } from '$app/paths';
+  import { asset } from '$app/paths';
 
   // bind progress for advanced interactivity
   let progress: number = $state(0);
@@ -351,7 +351,7 @@ This demo has a tagged `png` [layer](https://reuters-graphics.github.io/ai2svelt
     showDebugInfo={true}
   >
     <AiGraphic
-      assetsPath={assets}
+      assetsPath={asset('/').replace(/\/$/, '')}
       {onArtboardChange}
       taggedText={{
         htext: {

package/dist/llm-docs/components/LanguageButton.md

@@ -10,7 +10,6 @@
 |------|------|---------|:--------:|-------------|
 | `locale` | `string \| undefined` | `'en'` |  | The current locale of the article |
 | `embedded` | `boolean` | `false` |  | Whether the article is embedded |
-| `base` | `string` | — |  | The base URL for the article |
 | `buttonOptions` | `{       locale: string;       label: string;     }` | `{
       locale: 'es',
       label: 'Leer en español',
@@ -71,8 +70,8 @@ The `LanguageButton` component creates a button that switches between an article
 <script>
   import { LanguageButton } from '@reuters-graphics/graphics-components';
 
-  //  If using in the graphics kit, use `base` from `$app/paths` to ensure the toggle links to the correct URL
-  import { base } from '$app/paths';
+  //  If using in the graphics kit, use `resolve` from `$app/paths` to ensure the toggle links to the correct URL
+  import { resolve } from '$app/paths';
 
   // If using in the graphics kit, `embedded` prop will already be available in App.svelte.
   // Additionally, pass `locale = 'en'` as a prop
@@ -80,7 +79,7 @@ The `LanguageButton` component creates a button that switches between an article
 </script>
 
 <!-- Pass `embedded` to `LanguageButton` if the embed page is translated -->
-<LanguageButton {locale} {embedded} {base} />
+<LanguageButton {locale} {embedded} {resolve} />
 ```
 
 ## Customise language and button label
@@ -91,8 +90,8 @@ By default, the toggle button will switch between English and Spanish, and the `
 <script>
   import { LanguageButton } from '@reuters-graphics/graphics-components';
 
-  //  If using in the graphics kit, use `base` from `$app/paths` to ensure the toggle links to the correct URL
-  import { base } from '$app/paths';
+  //  If using in the graphics kit, use `resolve` from `$app/paths` to ensure the toggle links to the correct URL
+  import { resolve } from '$app/paths';
 
   // If using in the graphics kit, `embedded` prop will already be available in App.svelte.
   // Additionally, pass `locale = 'en'` as a prop
@@ -103,7 +102,7 @@ By default, the toggle button will switch between English and Spanish, and the `
 <LanguageButton
   {locale}
   {embedded}
-  {base}
+  {resolve}
   buttonOptions={{
     locale: 'fr',
     label: 'Lire en français',
@@ -140,8 +139,8 @@ To customise this, pass a function to the `setUrl` prop that returns the URLs yo
 <script>
   import { LanguageButton } from '@reuters-graphics/graphics-components';
 
-  //  If using in the graphics kit, use `base` from `$app/paths` to ensure the toggle links to the correct URL
-  import { base } from '$app/paths';
+  //  If using in the graphics kit, use `resolve` from `$app/paths` to ensure the toggle links to the correct URL
+  import { resolve } from '$app/paths';
 
   // If using in the graphics kit, `embedded` prop will already be available in App.svelte.
   // Additionally, pass `locale = 'en'` as a prop
@@ -152,16 +151,16 @@ To customise this, pass a function to the `setUrl` prop that returns the URLs yo
     if (embedded) {
       if (locale === 'es') {
         // If we're in the non-English article, link to the English article
-        return `${base}/embeds/en/custom-embed-url/`;
+        return resolve('/embeds/en/custom-embed-url/');
       } else {
-        return `${base}/embeds/es/custom-embed-url/`;
+        return resolve('/embeds/es/custom-embed-url/');
       }
     } else {
       if (locale === 'es') {
         // If we're in the non-English article, link to the English article
-        return `${base}/`;
+        return resolve('/');
       } else {
-        return `${base}/es/`;
+        return resolve('/es/');
       }
     }
   };

package/dist/llm-docs/components/Lottie.md

@@ -9,38 +9,38 @@
 ### Demo
 
 ```svelte
-{#snippet children(args)}
-  <Lottie src={DemoLottie} {...args} />
+{#snippet template(args)}
+  <Lottie {...args} src={DemoLottie} />
 {/snippet}
 ```
 
 ### Segment
 
 ```svelte
-{#snippet children(args)}
-  <Lottie src={DemoLottie} {...args} />
+{#snippet template(args)}
+  <Lottie {...args} src={DemoLottie} />
 {/snippet}
 ```
 
 ### Marker
 
 ```svelte
-{#snippet children(args)}
-  <Lottie src={MarkerSample} {...args} />
+{#snippet template(args)}
+  <Lottie {...args} src={MarkerSample} />
 {/snippet}
 ```
 
 ### Themes
 
 ```svelte
-{#snippet children(args)}
+{#snippet template(args)}
   <Lottie
+    {...args}
     src={ThemesSample}
     bind:progress
     themeId={progress < 0.33 ? 'Water'
     : progress < 0.66 ? 'air'
     : 'earth'}
-    {...args}
   />
 {/snippet}
 ```
@@ -164,7 +164,7 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
   import { Lottie } from '@reuters-graphics/graphics-components';
 
   // Graphics kit only
-  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+  import { asset } from '$app/paths'; // 👈 If using in the graphics kit...
   import { truthy } from '$utils/propValidators'; // 👈 If using in the graphics kit...
 </script>
 
@@ -172,7 +172,7 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
   <!-- Inside the content.blocks for loop... -->
   {#if block.type == 'lottie'}
     <Lottie
-      src={`${assets}/${block.src}`}
+      src={asset(`/${block.src}`)}
       autoplay={truthy(block.autoplay)}
       loop={truthy(block.loop)}
       showDebugInfo={truthy(block.showDebugInfo)}
@@ -215,7 +215,7 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
   import { Lottie } from '@reuters-graphics/graphics-components';
 
   // Graphics kit only
-  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+  import { asset } from '$app/paths'; // 👈 If using in the graphics kit...
   import { truthy } from '$utils/propValidators'; // 👈 If using in the graphics kit...
 </script>
 
@@ -223,7 +223,7 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
   <!-- Inside the content.blocks for loop... -->
   {#if block.type == 'lottie'}
     <Lottie
-      src={`${assets}/${block.src}`}
+      src={asset(`/${block.src}`)}
       segment={[parseInt(block.segment.start), parseInt(block.segment.end)]}
       showDebugInfo={truthy(block.showDebugInfo)}
       loop={truthy(block.loop)}
@@ -428,7 +428,7 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
     Lottie,
     LottieForeground,
   } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths';
+  import { asset } from '$app/paths';
 
   // Make an object of components to use as foregrounds
   const Components = $state({
@@ -439,7 +439,7 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
 {#each content.blocks as block}
   <!-- Inside the content.blocks for loop... -->
   {#if block.type == 'lottie'}
-    <Lottie src={`${assets}/${block.src}`}>
+    <Lottie src={asset(`/${block.src}`)}>
       {#each block.foregrounds as foreground}
         {#if foreground.type == 'text'}
           <LottieForeground

package/dist/llm-docs/components/PhotoPack.md

@@ -57,8 +57,9 @@ export interface Layout {
 ### Smart layouts
 
 ```svelte
-{#snippet children(args)}
-  {@const { imageCount, ...photoPackProps } = args as SmartDefaultsArgs}
+{#snippet template(args)}
+  {@const { imageCount, ...photoPackProps } =
+    args as unknown as SmartDefaultsArgs}
   <PhotoPack
     {...photoPackProps}
     images={allImages.slice(0, imageCount || 4)}
@@ -172,14 +173,14 @@ gap: 10 # Optional; must be a number.
 <!-- App.svelte -->
 <script>
   import { PhotoPack } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+  import { asset } from '$app/paths'; // 👈 If using in the graphics kit...
 
   import content from '$locales/en/content.json';
 </script>
 
 {#each content.blocks as block}
   {#if block.type === 'photo-pack'}
-    <!-- Pass `assets` into the image source in graphics kit -->
+    <!-- Use `asset` for the image source in graphics kit -->
     <PhotoPack
       id={block.id}
       class={block.class}
@@ -188,7 +189,7 @@ gap: 10 # Optional; must be a number.
       gap={Number(block.gap)}
       images={block.images.map((img) => ({
         ...img,
-        src: `${assets}/${img.src}`,
+        src: asset(`/${img.src}`),
       }))}
       layouts={[
         { breakpoint: 750, rows: [2, 3] },
@@ -225,10 +226,10 @@ The smart defaults use a **bottom-heavy distribution**, meaning earlier rows hav
   import { PhotoPack } from '@reuters-graphics/graphics-components';
 
   const images = [
-    { src: `${assets}/image1.jpg`, altText: 'Photo 1', caption: 'Caption 1' },
-    { src: `${assets}/image2.jpg`, altText: 'Photo 2', caption: 'Caption 2' },
-    { src: `${assets}/image3.jpg`, altText: 'Photo 3', caption: 'Caption 3' },
-    { src: `${assets}/image4.jpg`, altText: 'Photo 4', caption: 'Caption 4' },
+    { src: asset('/image1.jpg'), altText: 'Photo 1', caption: 'Caption 1' },
+    { src: asset('/image2.jpg'), altText: 'Photo 2', caption: 'Caption 2' },
+    { src: asset('/image3.jpg'), altText: 'Photo 3', caption: 'Caption 3' },
+    { src: asset('/image4.jpg'), altText: 'Photo 4', caption: 'Caption 4' },
   ];
 </script>
 

package/dist/llm-docs/components/SEO.md

@@ -88,7 +88,7 @@ shareImgAlt: Alt text for share image.
   import { SEO } from '@reuters-graphics/graphics-components';
   import pkg from '$pkg';
   import content from '$locales/en/content.json';
-  import { assets } from '$app/paths';
+  import { asset } from '$app/paths';
   import { page } from '$app/stores';
 </script>
 
@@ -99,7 +99,7 @@ shareImgAlt: Alt text for share image.
   seoDescription={content.seoDescription}
   shareTitle={content.shareTitle}
   shareDescription={content.shareDescription}
-  shareImgPath={`${assets}/${content.shareImgPath}`}
+  shareImgPath={asset(`/${content.shareImgPath}`)}
   shareImgAlt={content.shareImgAlt}
   publishTime={pkg?.reuters?.graphic?.published}
   updateTime={pkg?.reuters?.graphic?.updated}

package/dist/llm-docs/components/Scroller.md

@@ -131,7 +131,7 @@ In your graphics kit project, import your ai2svelte graphics in `App.svelte` and
   import content from '$locales/en/content.json';
 
   // Graphics kit only
-  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+  import { asset } from '$app/paths'; // 👈 If using in the graphics kit...
   import { truthy } from '$utils/propValidators'; // 👈 If using in the graphics kit...
 
   const aiCharts = {
@@ -198,7 +198,7 @@ Then parse the relevant ArchieML block object before passing to the `Scroller` c
       stackBackground={truthy(block.stackBackground)}
       steps={block.steps.map((step) => ({
         background: aiCharts[step.background],
-        backgroundProps: { assetsPath: assets || '/' },
+        backgroundProps: { assetsPath: asset('/').replace(/\/$/, '') },
         foreground: step.foreground,
         altText: step.altText,
       }))}
@@ -209,7 +209,7 @@ Then parse the relevant ArchieML block object before passing to the `Scroller` c
 
 > **Note:** Some props, like `stackBackground`, expect boolean values. If you're using the graphics kit, use the `truthy()` util function to convert a string value to a boolean.
 
-> **Note:** In the graphics kit, the image source paths in ai2svelte components have to be fixed by passing `assets` to each step object, like in the example above.
+> **Note:** In the graphics kit, the image source paths in ai2svelte components have to be fixed by passing the resolved `asset('/')` root to each step object's `assetsPath`, like in the example above.
 
 ## Custom foreground
 
@@ -269,7 +269,7 @@ In your graphics kit project's `App.svelte`, import your custom foregroud compon
   import Foreground1 from './ai2svelte/my-foreground-1.svelte';
 
   // Graphics kit only
-  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+  import { asset } from '$app/paths'; // 👈 If using in the graphics kit...
   import { truthy } from '$utils/propValidators'; // 👈 If using in the graphics kit...
 
   // Background ai2svelte graphics components
@@ -337,9 +337,9 @@ Then parse the relevant ArchieML block object before passing to the `Scroller` c
       stackBackground={truthy(block.stackBackground)}
       steps={block.steps.map((step) => ({
         background: aiCharts[step.background],
-        backgroundProps: { assetsPath: assets || '/' },
+        backgroundProps: { assetsPath: asset('/').replace(/\/$/, '') },
         foreground: foregroundComponents[step.foreground] || step.foreground,
-        foregroundProps: { assetsPath: assets || '/' },
+        foregroundProps: { assetsPath: asset('/').replace(/\/$/, '') },
         altText: step.altText,
       }))}
     />
@@ -347,4 +347,4 @@ Then parse the relevant ArchieML block object before passing to the `Scroller` c
 {/each}
 ```
 
-> **Note:** You only need to pass `foregroundProps: { assetsPath: assets || '/' }` in the graphics kit if your foreground components are ai2svelte graphicss.
+> **Note:** You only need to pass `foregroundProps: { assetsPath: asset('/').replace(/\/$/, '') }` in the graphics kit if your foreground components are ai2svelte graphicss.

package/dist/llm-docs/components/ScrollerVideo.md

@@ -276,7 +276,7 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
     ScrollerVideo,
     ScrollerVideoForeground,
   } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+  import { asset } from '$app/paths'; // 👈 If using in the graphics kit...
 </script>
 
 {#each content.blocks as block}
@@ -284,7 +284,7 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
   {#if block.type == 'scroller-video'}
     <ScrollerVideo
       id={block.id}
-      src={`${assets}/${block.src}`}
+      src={asset(`/${block.src}`)}
       height={block.height}
     >
       <!-- Loop through foregrounds to add text blurbs that appear/disappear at specific times -->
@@ -364,7 +364,7 @@ endTime: 0.3 # When to stop showing the headline
 
 ```svelte
 <script lang="ts">
-  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+  import { asset } from '$app/paths'; // 👈 If using in the graphics kit...
   import {
     Headline,
     GraphicBlock,
@@ -426,11 +426,11 @@ endTime: 0.3 # When to stop showing the headline
 
     <!-- Render the ScrollVideo snippet for different screen sizes -->
     {#if width < 600}
-      {@render ScrollVideo(block.height, `${assets}/${block.srcSm}`)}
+      {@render ScrollVideo(block.height, asset(`/${block.srcSm}`))}
     {:else if width < 1200}
-      {@render ScrollVideo(block.height, `${assets}/${block.srcMd}`)}
+      {@render ScrollVideo(block.height, asset(`/${block.srcMd}`))}
     {:else}
-      {@render ScrollVideo(block.height, `${assets}/${block.srcLg}`)}
+      {@render ScrollVideo(block.height, asset(`/${block.srcLg}`))}
     {/if}
   {/if}
 {/each}

package/dist/llm-docs/components/Video.md

@@ -156,7 +156,7 @@ loopVideo: true
 <!-- App.svelte -->
 <script>
   import { Video } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+  import { asset } from '$app/paths'; // 👈 If using in the graphics kit...
   import { truthy } from '$utils/propValidators'; // 👈 If using in the graphics kit...
 </script>
 
@@ -164,7 +164,7 @@ loopVideo: true
   {#if block.type === 'video'}
     <Video
       ariaDescription={block.ariaDescription}
-      src={`${assets}/${block.src}`}
+      src={asset(`/${block.src}`)}
       width={block.width}
       loopVideo={truthy(block.loopVideo)}
       notes={block.notes}

package/dist/llm-docs/guides/archieml.md

@@ -69,7 +69,7 @@ Notice all the values in the data are **strings**. More on that soon.
 ```svelte
 <script>
   // These are usually already imported for you
-  import { assets } from '$app/paths';
+  import { asset } from '$app/paths';
   // Your ArchieML doc
   import content from '$locales/en/content.json';
 
@@ -84,7 +84,7 @@ Notice all the values in the data are **strings**. More on that soon.
     <ProfileCard
       name={block.name}
       age={parseInt(block.age)}
-      img={`${assets}/${block.picture}`}
+      img={asset(`/${block.picture}`)}
       birthday={new Date(block.birthday)}
       bio={block.bio}
       isGood={block.isGood === 'true'}
@@ -120,7 +120,7 @@ Once we've identified we have the right block for our component, we need to conv
 <ProfileCard
   name={block.name}
   age={parseInt(block.age)}
-  img={`${assets}/${block.picture}`}
+  img={asset(`/${block.picture}`)}
   birthday={new Date(block.birthday)}
   bio={block.bio}
   isGood={block.isGood === 'true'}
@@ -145,10 +145,10 @@ For example, we're converting Tom's age into a number with JavaScript's [parseIn
 {block.isGood === 'true'}
 ```
 
-**Especially note** how we're using the `assets` module we talked about in ["Using with the graphics kit"](./?path=/docs/guides-using-with-the-graphics-kit--docs) to turn the _relative_ path to Tom's profile pic in our ArchieML doc into an _absolute_ path that will have the full `https://reuters.com...` bit attached.
+**Especially note** how we're using the `asset` helper we talked about in ["Using with the graphics kit"](./?path=/docs/guides-using-with-the-graphics-kit--docs) to turn the _relative_ path to Tom's profile pic in our ArchieML doc into an _absolute_ path that will have the full `https://reuters.com...` bit attached.
 
 ```svelte
-{`${assets}/${block.picture}`}
+{asset(`/${block.picture}`)}
 ```
 
 ### Sum it all up 🏁
@@ -173,7 +173,7 @@ Let's look at another example component:
       date: new Date('1992-01-01'),
       subhed:
         'Cynthia Dwork and Moni Naor come with an idea for "cryptocurrency"',
-      img: `${assets}/images/dwork-naor.jpeg`,
+      img: asset('/images/dwork-naor.jpeg'),
     },
     {
       date: new Date('2008-08-18'),
@@ -183,7 +183,7 @@ Let's look at another example component:
     {
       date: new Date('2013-07-22'),
       subhed: 'The Winklevoss twins buy in',
-      img: `${assets}/images/winkle-boys.jpeg`,
+      img: asset('/images/winkle-boys.jpeg'),
     },
   ]}
 />
@@ -281,7 +281,7 @@ But this is a problem we can solve by looping over our JSON data and making a ne
     let link;
 
     if (d.img) {
-      img = `${assets}/${d.img}`;
+      img = asset(`/${d.img}`);
     }
     if (d.link) {
       link = d.link;
@@ -355,7 +355,7 @@ const timelineDates = timelineBlock.dates.map((d) => {
 
   // If our date has an image, we'll make it an absolute URL
   if (d.img) {
-    img = `${assets}/${d.img}`;
+    img = asset(`/${d.img}`);
   }
 
   // If it has a link, we'll just pass that on, as is

package/dist/llm-docs/guides/graphics-kit.md

@@ -10,16 +10,16 @@ When working with multimedia files like images or videos, components expect all
 
 ❌ `./myImage.jpg`
 
-In the graphics kit, that means you'll need to prefix relative paths with the special [`assets`](https://svelte.dev/docs/kit/$app-paths#assets) SvelteKit module that contains the root URL for your project. Many examples in these docs show how to do it. But it's also easy enough to demo again here!
+In the graphics kit, that means you'll need to prefix relative paths with the special [`asset`](https://svelte.dev/docs/kit/$app-paths#asset) SvelteKit helper that resolves the path to the root URL for your project. Many examples in these docs show how to do it. But it's also easy enough to demo again here!
 
 ```svelte
 <script>
   import { FeaturePhoto } from '@reuters-graphics/graphics-components';
 
-  // Import the assets module if it's not already there.
-  import { assets } from '$app/paths';
+  // Import the asset helper if it's not already there.
+  import { asset } from '$app/paths';
 </script>
 
-<!-- Use the assets module to prefix the path to your image. -->
-<FeautrePhoto src="{assets}/imgs/myImage.jpg" />
+<!-- Use the asset helper to prefix the path to your image. -->
+<FeautrePhoto src={asset('/imgs/myImage.jpg')} />
 ```