@abcnews/components-builder 0.0.16 → 0.0.17

package/dist/BuilderFrame/BuilderFrame.stories.svelte

@@ -10,6 +10,7 @@
     tags: ["autodocs"],
     argTypes: {},
     args: {},
+    // @ts-expect-error This is apparently a bug https://github.com/storybookjs/storybook/issues/29951
     decorators: [() => BuilderStyleRoot],
   });
 </script>

package/dist/BuilderStyleRoot/BuilderStyleRoot.stories.svelte

@@ -1,6 +1,7 @@
 <script module>
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import BuilderStyleRoot from "./BuilderStyleRoot.svelte";
+  import { Trash } from "svelte-bootstrap-icons";
 
   // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
   const { Story } = defineMeta({
@@ -86,22 +87,7 @@
   <fieldset>
     <legend>
       <button class="btn-icon" title="Clear focuses" aria-label="Clear focuses">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="16"
-          height="16"
-          fill="currentColor"
-          class="bi bi-trash"
-          viewBox="0 0 16 16"
-          role="img"
-        >
-          <path
-            d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"
-          />
-          <path
-            d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"
-          />
-        </svg>
+        <Trash width="16" height="16" />
       </button>
       With button
     </legend>
@@ -121,22 +107,7 @@
           title="Clear focuses"
           aria-label="Clear focuses"
         >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            fill="currentColor"
-            class="bi bi-trash"
-            viewBox="0 0 16 16"
-            role="img"
-          >
-            <path
-              d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"
-            />
-            <path
-              d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"
-            />
-          </svg>
+          <Trash width="16" height="16" />
         </button>
       {/each}
     </div>

package/dist/ContextMenu/ContextMenu.stories.svelte

@@ -10,6 +10,7 @@
     tags: ["autodocs"],
     argTypes: {},
     args: {},
+    // @ts-expect-error This is apparently a bug https://github.com/storybookjs/storybook/issues/29951
     decorators: [() => BuilderStyleRoot],
   });
 </script>

package/dist/GoogleDocScrollyteller/GoogleDocScrollyteller.stories.svelte

@@ -10,6 +10,7 @@
     tags: ["autodocs"],
     argTypes: {},
     args: {},
+    // @ts-expect-error This is apparently a bug https://github.com/storybookjs/storybook/issues/29951
     decorators: [() => BuilderStyleRoot],
   });
 </script>

package/dist/MarkerAdmin/MarkerAdmin.stories.svelte

@@ -0,0 +1,36 @@
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import MarkerAdmin from "./MarkerAdmin.svelte";
+  import BuilderStyleRoot from "../BuilderStyleRoot/BuilderStyleRoot.svelte";
+
+  const { Story } = defineMeta({
+    title: "Components/MarkerAdmin",
+    component: MarkerAdmin,
+    tags: ["autodocs"],
+    decorators: [() => BuilderStyleRoot],
+    argTypes: {
+      projectName: { control: "text" },
+    },
+    args: {
+      projectName: "storybook-test",
+      prefixes: {
+        "Scrolly mark": "#mark",
+        "Scrolly opener": "#scrollytellerNAMEscrolly1",
+        "Standalone graphic": "#graphic",
+      },
+      defaultMarkerName: () => "My New Marker",
+    },
+  });
+</script>
+
+<Story name="Primary" />
+
+<Story
+  name="Custom Prefixes"
+  args={{
+    prefixes: {
+      "Custom Prefix": "#custom",
+      "Another One": "#another",
+    },
+  }}
+/>

package/dist/MarkerAdmin/MarkerAdmin.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default MarkerAdmin;
+type MarkerAdmin = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const MarkerAdmin: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import MarkerAdmin from "./MarkerAdmin.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/MarkerAdmin/MarkerAdmin.svelte

@@ -1,16 +1,23 @@
 <script lang="ts">
+  import {
+    defaultMarkerNameDefault,
+    prefixesDefault,
+  } from "../shared-defaults.js";
   import { onMount, untrack } from "svelte";
   import { slide } from "svelte/transition";
+  import {
+    Floppy,
+    Copy,
+    Clipboard,
+    Trash,
+    ArrowCounterclockwise,
+  } from "svelte-bootstrap-icons";
 
   let {
     /** Unique project name used in localStorage (e.g. "elections-federal2025-lower-house")*/
     projectName = "dev",
-    defaultMarkerName = () => "",
-    prefixes = {
-      "Scrolly mark": "#mark",
-      "Scrolly opener": "#scrollytellerNAMEscrolly1",
-      "Standalone graphic": "#graphic",
-    },
+    defaultMarkerName = defaultMarkerNameDefault,
+    prefixes = prefixesDefault,
   } = $props();
 
   type Marker = {
@@ -44,6 +51,7 @@
       return;
     }
     try {
+      console.log("writing localStorage");
       localStorage[localStorageKey] = JSON.stringify({
         version: version,
         lastUpdated: new Date().toISOString(),
@@ -107,93 +115,23 @@
 </script>
 
 {#snippet saveIcon()}
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    fill="currentColor"
-    class="bi bi-floppy"
-    viewBox="0 0 16 16"
-  >
-    <title>Save</title>
-    <path d="M11 2H9v3h2z" />
-    <path
-      d="M1.5 0h11.586a1.5 1.5 0 0 1 1.06.44l1.415 1.414A1.5 1.5 0 0 1 16 2.914V14.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 14.5v-13A1.5 1.5 0 0 1 1.5 0M1 1.5v13a.5.5 0 0 0 .5.5H2v-4.5A1.5 1.5 0 0 1 3.5 9h9a1.5 1.5 0 0 1 1.5 1.5V15h.5a.5.5 0 0 0 .5-.5V2.914a.5.5 0 0 0-.146-.353l-1.415-1.415A.5.5 0 0 0 13.086 1H13v4.5A1.5 1.5 0 0 1 11.5 7h-7A1.5 1.5 0 0 1 3 5.5V1H1.5a.5.5 0 0 0-.5.5m3 4a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5V1H4zM3 15h10v-4.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5z"
-    />
-  </svg>
+  <Floppy width="16" height="16" />
 {/snippet}
 
 {#snippet copyIcon()}
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    fill="currentColor"
-    class="bi bi-copy"
-    viewBox="0 0 16 16"
-  >
-    <title>Copy to clipboard</title>
-    <path
-      fill-rule="evenodd"
-      d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z"
-    />
-  </svg>
+  <Copy width="16" height="16" />
 {/snippet}
 
 {#snippet pasteIcon()}
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    fill="currentColor"
-    class="bi bi-clipboard"
-    viewBox="0 0 16 16"
-  >
-    <title>Paste marker from clipboard</title>
-    <path
-      d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1z"
-    />
-    <path
-      d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0z"
-    />
-  </svg>
+  <Clipboard width="16" height="16" />
 {/snippet}
 
 {#snippet deleteIcon()}
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    fill="currentColor"
-    class="bi bi-trash"
-    viewBox="0 0 16 16"
-  >
-    <path
-      d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"
-    />
-    <path
-      d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"
-    />
-  </svg>
+  <Trash width="16" height="16" />
 {/snippet}
 
 {#snippet undeleteIcon()}
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    fill="currentColor"
-    class="bi bi-arrow-counterclockwise"
-    viewBox="0 0 16 16"
-  >
-    <path
-      fill-rule="evenodd"
-      d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2z"
-    />
-    <path
-      d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466"
-    />
-  </svg>
+  <ArrowCounterclockwise width="16" height="16" />
 {/snippet}
 
 <div class="toolbar">
@@ -317,9 +255,25 @@
           {/if}
         </td>
         <td class="btn-group">
+          {#if !marker.deleted}
+            <button
+              onclick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (confirm(`Overwrite '${marker.name}'?`)) {
+                  marker.hash = window.location.hash.slice(1);
+                }
+              }}
+              title="Overwrite snapshot with current state"
+              style:height="32px"
+            >
+              {@render saveIcon()}
+            </button>
+          {/if}
           <button
             onclick={(e) => {
               e.preventDefault();
+              e.stopPropagation();
               const newMarkers = [...markers];
               const marker = newMarkers[index];
               if (marker.deleted) {

package/dist/MarkerAdmin/MarkerAdmin.svelte.d.ts

@@ -1,7 +1,8 @@
+import { defaultMarkerNameDefault, prefixesDefault } from "../shared-defaults.js";
 declare const MarkerAdmin: import("svelte").Component<{
     projectName?: string;
-    defaultMarkerName?: Function;
-    prefixes?: Record<string, any>;
+    defaultMarkerName?: typeof defaultMarkerNameDefault;
+    prefixes?: typeof prefixesDefault;
 }, {}, "">;
 type MarkerAdmin = ReturnType<typeof MarkerAdmin>;
 export default MarkerAdmin;

package/dist/Modal/Modal.stories.svelte

@@ -1,32 +1,33 @@
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Modal from './Modal.svelte';
-	import BuilderStyleRoot from '../BuilderStyleRoot/BuilderStyleRoot.svelte';
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import Modal from "./Modal.svelte";
+  import BuilderStyleRoot from "../BuilderStyleRoot/BuilderStyleRoot.svelte";
 
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Example/Modal',
-		component: Modal,
-		tags: ['autodocs'],
-		argTypes: {},
-		args: {},
-		decorators: [() => BuilderStyleRoot]
-	});
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    title: "Example/Modal",
+    component: Modal,
+    tags: ["autodocs"],
+    argTypes: {},
+    args: {},
+    // @ts-expect-error This is apparently a bug https://github.com/storybookjs/storybook/issues/29951
+    decorators: [() => BuilderStyleRoot],
+  });
 </script>
 
 {#snippet children()}
-	Hello this is a modal
+  Hello this is a modal
 {/snippet}
 {#snippet footerChildren()}
-	<button>Ok!</button>
+  <button>Ok!</button>
 {/snippet}
 
 <!-- More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -->
 <Story
-	name="Primary"
-	args={{
-		children,
-		footerChildren,
-		title: 'Example modal'
-	}}
+  name="Primary"
+  args={{
+    children,
+    footerChildren,
+    title: "Example modal",
+  }}
 />

package/dist/Modal/Modal.stories.svelte.d.ts

@@ -11,7 +11,7 @@ declare const Modal: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import Modal from './Modal.svelte';
+import Modal from "./Modal.svelte";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/ScreenshotTool/ScreenshotTool.stories.svelte

@@ -10,6 +10,7 @@
     tags: ["autodocs"],
     argTypes: {},
     args: {},
+    // @ts-expect-error This is apparently a bug https://github.com/storybookjs/storybook/issues/29951
     decorators: [() => BuilderStyleRoot],
   });
 </script>
@@ -20,7 +21,5 @@
   args={{
     // Prefixes to look for in the pasted document
     prefixes: { Marker: "#mark" },
-    // Do something with the markers before screenshotting (e.g. turn off animations)
-    parseMarker: (markerString) => "markNewMarkerString",
   }}
 />

package/dist/ScreenshotTool/ScreenshotTool.svelte

@@ -1,26 +1,39 @@
-<script>
+<script lang="ts">
   import { untrack } from "svelte";
   import JSZip from "jszip";
-  import eachLimit from "async/eachLimit";
+  import { eachLimit } from "async";
   import Modal from "../Modal/Modal.svelte";
-  import saveAs from "./saveAs";
+  import saveAs from "./saveAs.js";
+  import {
+    defaultMarkerNameDefault,
+    prefixesDefault,
+  } from "../shared-defaults.js";
+
+  interface Props {
+    defaultMarkerName: DefaultMarkerNameFunction;
+    prefixes: MarkerPrefixes;
+    onMarker: (marker: string) => string;
+    iframeUrl: string;
+  }
+
+  type PreviewConfig = { name: string; marker: string; markerString: string };
 
   const GENERATOR_URL = "https://fallback-automations-yknow.kyd.au/api";
   const GENERATOR_MAX_PARALLEL = 3;
   const GENERATOR_WIDTH = "1000";
 
   let {
-    defaultMarkerName = () => "Marker",
-    prefixes = {},
+    defaultMarkerName = defaultMarkerNameDefault,
+    prefixes = prefixesDefault,
     // Optional function to process markers
-    onMarker = (str) => str,
+    onMarker = (str: string) => str,
     iframeUrl = "",
-  } = $props();
+  }: Props = $props();
 
   // closed => pasting => preview => generate => done
   let status = $state("closed");
-  let pastedState = $state();
-  let preview = $state([]);
+  let pastedState: string = $state("");
+  let preview: PreviewConfig[] = $state([]);
   let progress = $state(0);
   let error = $state("");
 
@@ -50,9 +63,9 @@
       // pass through schema
       const parsedMarkers = await Promise.all(uniqueMarkers.map(onMarker));
 
-      // generate a friendly name &  reencode markers with hexFlip="none"
+      // generate a friendly name
       preview = await Promise.all(
-        parsedMarkers.map(async (marker) => ({
+        parsedMarkers.map(async (marker: string) => ({
           name: defaultMarkerName(marker),
           marker,
           markerString: "#" + marker,
@@ -61,26 +74,37 @@
     })();
   });
 
-  function doFetch(generatorUrl) {
-    return fetch(generatorUrl).then((response) => {
-      if (response.status !== 200) {
-        return null;
-      }
-      return response.blob();
-    });
+  async function doFetch(generatorUrl: string) {
+    const response = await fetch(generatorUrl);
+    if (response.status !== 200) {
+      return null;
+    }
+    return response.blob();
   }
 
-  async function sleep(seconds) {
+  async function sleep(seconds: number): Promise<void> {
     return new Promise((resolve) => setTimeout(resolve, seconds));
   }
 
-  async function createScreenshots({ preview }) {
+  async function retry<T extends () => Promise<any>>(
+    fn: T,
+    attempt: number = 0,
+  ): Promise<Awaited<ReturnType<T>>> {
+    let result = await fn();
+    if (!result && attempt < 5) {
+      await sleep(1000 * 2 * attempt);
+      return retry(fn, attempt + 1);
+    }
+    return result;
+  }
+
+  async function createScreenshots({ preview }: { preview: PreviewConfig[] }) {
     const zip = new JSZip();
     let completed = 0;
     // Put a little bit in the bar at the start so it's clear what it is.
     progress = 0.5 / preview.length;
     error = "";
-    const imageBlobs = [];
+    const imageBlobs: (Blob | null)[] = [];
     await eachLimit(
       preview,
       GENERATOR_MAX_PARALLEL,
@@ -95,18 +119,8 @@
           }).toString(),
         ].join("?");
 
-        let blob;
-        // retry. It fails sometimes.
-        for (let retry = 0; retry < 5; retry++) {
-          console.log(thisIframeUrl, "attempt ", retry);
-          blob = await doFetch(generatorUrl);
-          if (!blob) {
-            await sleep(1000 * 2 * retry);
-          }
-          if (blob) {
-            break;
-          }
-        }
+        const blob = await retry(() => doFetch(generatorUrl));
+
         completed += 1;
         progress = completed / preview.length;
 
@@ -115,7 +129,7 @@
       },
     );
 
-    const errors = [];
+    const errors: string[] = [];
     imageBlobs.forEach((blob, index) => {
       const filename = `${String(index).padStart(3, "0")}-${preview[index].name}.png`;
       if (blob) {

package/dist/ScreenshotTool/ScreenshotTool.svelte.d.ts

@@ -1,17 +1,9 @@
+interface Props {
+    defaultMarkerName: DefaultMarkerNameFunction;
+    prefixes: MarkerPrefixes;
+    onMarker: (marker: string) => string;
+    iframeUrl: string;
+}
+declare const ScreenshotTool: import("svelte").Component<Props, {}, "">;
+type ScreenshotTool = ReturnType<typeof ScreenshotTool>;
 export default ScreenshotTool;
-type ScreenshotTool = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
-declare const ScreenshotTool: import("svelte").Component<{
-    defaultMarkerName?: Function;
-    prefixes?: Record<string, any>;
-    onMarker?: Function;
-    iframeUrl?: string;
-}, {}, "">;
-type $$ComponentProps = {
-    defaultMarkerName?: Function;
-    prefixes?: Record<string, any>;
-    onMarker?: Function;
-    iframeUrl?: string;
-};

package/dist/Typeahead/Typeahead.stories.svelte

@@ -10,6 +10,7 @@
     tags: ["autodocs"],
     argTypes: {},
     args: {},
+    // @ts-expect-error This is apparently a bug https://github.com/storybookjs/storybook/issues/29951
     decorators: [() => BuilderStyleRoot],
   });
 </script>

package/dist/UpdateChecker/UpdateChecker.stories.svelte

@@ -10,6 +10,7 @@
     tags: ["autodocs"],
     argTypes: {},
     args: {},
+    // @ts-expect-error This is apparently a bug https://github.com/storybookjs/storybook/issues/29951
     decorators: [() => BuilderStyleRoot],
   });
 </script>

package/dist/shared-defaults.d.ts

@@ -0,0 +1,2 @@
+export declare const defaultMarkerNameDefault: () => string;
+export declare const prefixesDefault: MarkerPrefixes;

package/dist/shared-defaults.js

@@ -0,0 +1,6 @@
+export const defaultMarkerNameDefault = () => "Marker";
+export const prefixesDefault = {
+    "Scrolly mark": "#mark",
+    "Scrolly opener": "#scrollytellerNAMEscrolly1",
+    "Standalone graphic": "#graphic",
+};

package/dist/types.d.ts

@@ -0,0 +1,2 @@
+type MarkerPrefixes = Record<string, string>;
+type DefaultMarkerNameFunction = (marker: string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abcnews/components-builder",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run prepack",
@@ -46,6 +46,7 @@
     "@sveltejs/kit": "^2.16.0",
     "@sveltejs/package": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "@types/async": "^3.2.25",
     "@types/node": "^20",
     "prettier": "^3.4.2",
     "prettier-plugin-svelte": "^3.3.3",