@abcnews/components-builder 0.0.2 → 0.0.3

package/README.md

@@ -16,6 +16,14 @@ The update checker extracts the current version number from the URL, and recursi
 
 Please ensure all your application state is kept in the URL, otherwise it may be lost on upgrade.
 
+Please take care when releasing your projects. If the deploy fails and you skip a version this component will get stuck at that point. You must either rewrite your git history to delete and redeploy the missing version, or add an empty index.html on contentftp to trick the updater into skipping it.
+
+To tnclude the update checker, use the following code with optional button text:
+
+```svelte
+<UpdateChecker buttonText="Open new builder" />
+```
+
 ## ScreenshotTool (fallback images)
 
 The screenshot tool allows users to paste an entire article, then extracts all the markers and sends them to a third-party service to screenshot.
@@ -24,6 +32,25 @@ For this to work you must set up a standalone page that can display the visualis
 
 Note that the screenshot tool is not fast. We haven't been able to speed up the server side enough to make this a great experience.
 
+```svelte
+<ScreenshotTool
+  defaultMarkerName={() => "My marker"}
+  prefixes={{
+    "Scrolly mark": "#mark",
+    "Scrolly opener": "#scrollytellerNAMEelectionmap1",
+    "Inline graphic": "#graphicinline",
+  }}
+  iframeUrl={window.location.origin +
+    window.location.pathname.replace("/builder/", "/iframe/")}
+/>
+```
+
+The `defaultMarkerName` Function provides a user-friendly version of the marker for the preview step. This is the same funcitopn as the `MarkerAdmin` component.
+
+Prefixes correlate to the different marker types that have been implemented in the app. This is the same object as the `MarkerAdmin` component.
+
+The iframe URL is the location that the screenshot tool hits to create screenshots. The screenshot tool will pass this iframe config via the hash, e.g. /iframe/#MARKER.
+
 ## Typeahead
 
 The typeahead component uses a native HTML input element, in conjunction with the datalist element, to provide native searching and keyboard accessibility. The component implements its own multi-select functionality as that isn't available natively.
@@ -95,6 +122,55 @@ This uses the native dialogue element, so focus will always be inside the modal.
 <Modal title="Example modal" {children} {footerChildren} />
 ```
 
+## Google Doc Scrollyteller
+
+This component lets edits draft stories in Google Docs and preview to scroll teller in real time. Period this is useful because multiple people can be editing at once and have a real-time preview, whereas the CMS is single user and can be slow to iterate on.
+
+This component must be set up on its own page, as it has two different routes built into it. An example implementation follows:
+
+```svelte
+<script>
+  import {
+    BuilderStyleRoot,
+    GoogleDocScrollyteller,
+  } from "@abcnews/components-builder";
+  import { loadScrollyteller } from "@abcnews/svelte-scrollyteller";
+  import MyScrollyteller from "../components/MyScrollyteller.svelte";
+</script>
+
+<BuilderStyleRoot>
+  <GoogleDocScrollyteller
+    name="electionmap"
+    {loadScrollyteller}
+    ScrollytellerRoot={MyScrollyteller}
+  />
+</BuilderStyleRoot>
+```
+
+You must pass in the loadScrollyteller function, as well as your component that implements svelte-scrollyteller. When the Google doc is loaded, your component will be mounted with the relevant markup in-page.
+
+## MarkerAdmin
+
+This is a component that streamlines how you handle markers. It includes a copy and paste function as well as the ability to save and load markers from localstorage.
+
+As a prerequisite your builder must store its state in window.location.hash. E.g. `/builder/#marker`.
+
+```svelte
+<MarkerAdmin
+  projectName="elections-federal2025-lower-house"
+  prefixes={{
+    "Scrolly mark": "#mark",
+    "Scrolly opener": "#scrollytellerNAMEelectionmap1",
+    "Inline graphic": "#graphicinline",
+  }}
+  defaultMarkerName={() => "My marker"}
+/>
+```
+
+`defaultMarkerName` is a function that returns a user friendly name for the marker when the user clicks the save button. You can use this to customise default marker names based on the current hash, which can be useful if you have several different visualisations with distinct names.
+
+Prefixes correlate to the different marker types that have been implemented in the app. Users can choose which type of marker they want to copy. This is the same object as the `MarkerAdmin` component.
+
 ## Developing
 
 Once you've nstalled dependencies with `npm install`, start a development storybook:

package/dist/BuilderStyleRoot/BuilderStyleRoot.svelte

@@ -1,175 +1,177 @@
 <script lang="ts">
-	let { children } = $props();
+  let { children } = $props();
 </script>
 
 <div class="builder-style-root">
-	{@render children?.()}
+  {@render children?.()}
 </div>
 
-<style>
-	.builder-style-root {
-		font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-		line-height: 1.5;
-		font-weight: 400;
-
-		--text: #222;
-		--text-light: #888;
-		--background: #fff;
-		--border: rgba(122, 123, 135, 0.5);
-		--background-alt: #f2f4f5;
-
-		color: var(--text);
-		background-color: var(--background);
-
-		font-synthesis: none;
-		text-rendering: optimizeLegibility;
-		-webkit-font-smoothing: antialiased;
-		-moz-osx-font-smoothing: grayscale;
-		-webkit-text-size-adjust: 100%;
-
-		color-scheme: dark light;
-		:global(*) {
-			box-sizing: border-box;
-		}
-	}
-
-	@media (prefers-color-scheme: dark) {
-		.builder-style-root {
-			--text: #ccc;
-			--text-light: #888;
-			--background: #1a1a1a;
-			--background-alt: #2c2c2f;
-			--border: rgba(122, 123, 135, 0.5);
-		}
-	}
-
-	/* // builder-style-root */
-	.builder-style-root :global {
-		fieldset {
-			margin-bottom: 1rem;
-			padding: var(--padding);
-			border: 1px solid var(--border);
-			position: relative;
-			display: flex;
-			flex-direction: column;
-			gap: 0.5rem;
-		}
-
-		.fieldset {
-			padding: 0 var(--padding);
-			border: 1px solid transparent;
-		}
-		.fieldset,
-		fieldset {
-			--padding: 0.75rem;
-			margin-bottom: 1rem;
-			border-radius: 0.2rem;
-		}
-		fieldset.builder__spacious,
-		.fieldset.builder__spacious {
-			--padding: 1rem;
-			legend {
-				font-weight: bold;
-			}
-		}
-
-		.builder__inline {
-			display: flex;
-			flex-wrap: wrap;
-			gap: 0.5rem;
-		}
-
-		.buttons {
-			display: flex;
-			flex-wrap: wrap;
-			gap: 2px;
-		}
-
-		label {
-			margin-bottom: 0.5rem;
-			position: relative;
-		}
-		label span {
-			display: block;
-			margin-bottom: 0.3rem;
-		}
-
-		select,
-		button,
-		input,
-		textarea {
-			padding: 0.25rem 0.5rem;
-			background: var(--background);
-			border: 1px solid var(--border);
-			color: var(--text);
-			border-radius: 0.2rem;
-		}
-		select:not([multiple]),
-		button:not(:disabled) {
-			cursor: pointer;
-			&:hover,
-			&:focus-visible {
-				border-color: var(--text);
-				background: Highlight;
-				color: HighlightText;
-			}
-		}
-		button:disabled {
-			color: var(--text-light);
-		}
-
-		select,
-		input[type='text'],
-		input[type='password'],
-		textarea {
-			width: 100%;
-		}
-
-		.btn-icon {
-			padding: 0;
-			display: inline-flex;
-			height: 1.5rem;
-			width: 1.5rem;
-			justify-content: center;
-			align-items: center;
-		}
-
-		.builder__submit-row {
-			text-align: right;
-			border-top: 1px solid var(--border);
-			padding: 0.5rem 0;
-		}
-		hr {
-			width: 100%;
-			border: none;
-			border-bottom: 1px solid var(--border);
-		}
-
-		table.builder__table {
-			border-collapse: separate;
-			border: solid var(--border) 1px;
-			border-radius: 0.2rem;
-			border-spacing: 0;
-
-			td,
-			th {
-				border-left: solid var(--border) 1px;
-				border-top: solid var(--border) 1px;
-				padding: 0.25rem 0.5rem;
-			}
-
-			th {
-				background-color: var(--background-alt);
-			}
-
-			th {
-				border-top: none;
-			}
-
-			td:first-child,
-			th:first-child {
-				border-left: none;
-			}
-		}
-	}
-</style>
+<svelte:head>
+  <style>
+    .builder-style-root {
+      font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+      line-height: 1.5;
+      font-weight: 400;
+
+      --text: #222;
+      --text-light: #888;
+      --background: #fff;
+      --border: rgba(122, 123, 135, 0.5);
+      --background-alt: #f2f4f5;
+
+      color: var(--text);
+      background-color: var(--background);
+
+      font-synthesis: none;
+      text-rendering: optimizeLegibility;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      -webkit-text-size-adjust: 100%;
+
+      color-scheme: dark light;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .builder-style-root {
+        --text: #ccc;
+        --text-light: #888;
+        --background: #1a1a1a;
+        --background-alt: #2c2c2f;
+        --border: rgba(122, 123, 135, 0.5);
+      }
+    }
+
+    /* // builder-style-root */
+    .builder-style-root {
+      * {
+        box-sizing: border-box;
+      }
+      fieldset {
+        margin-bottom: 1rem;
+        padding: var(--padding);
+        border: 1px solid var(--border);
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+      }
+
+      .fieldset {
+        padding: 0 var(--padding);
+        border: 1px solid transparent;
+      }
+      .fieldset,
+      fieldset {
+        --padding: 0.75rem;
+        margin-bottom: 1rem;
+        border-radius: 0.2rem;
+      }
+      fieldset.builder__spacious,
+      .fieldset.builder__spacious {
+        --padding: 1rem;
+        legend {
+          font-weight: bold;
+        }
+      }
+
+      .builder__inline {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+      }
+
+      .buttons {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 2px;
+      }
+
+      label {
+        margin-bottom: 0.5rem;
+        position: relative;
+      }
+      label span {
+        display: block;
+        margin-bottom: 0.3rem;
+      }
+
+      select,
+      button,
+      input,
+      textarea {
+        padding: 0.25rem 0.5rem;
+        background: var(--background);
+        border: 1px solid var(--border);
+        color: var(--text);
+        border-radius: 0.2rem;
+      }
+      select:not([multiple]),
+      button:not(:disabled) {
+        cursor: pointer;
+        &:hover,
+        &:focus-visible {
+          border-color: var(--text);
+          background: Highlight;
+          color: HighlightText;
+        }
+      }
+      button:disabled {
+        color: var(--text-light);
+      }
+
+      select,
+      input[type="text"],
+      input[type="password"],
+      textarea {
+        width: 100%;
+      }
+
+      .btn-icon {
+        padding: 0;
+        display: inline-flex;
+        height: 1.5rem;
+        width: 1.5rem;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .builder__submit-row {
+        text-align: right;
+        border-top: 1px solid var(--border);
+        padding: 0.5rem 0;
+      }
+      hr {
+        width: 100%;
+        border: none;
+        border-bottom: 1px solid var(--border);
+      }
+
+      table.builder__table {
+        border-collapse: separate;
+        border: solid var(--border) 1px;
+        border-radius: 0.2rem;
+        border-spacing: 0;
+
+        td,
+        th {
+          border-left: solid var(--border) 1px;
+          border-top: solid var(--border) 1px;
+          padding: 0.25rem 0.5rem;
+        }
+
+        th {
+          background-color: var(--background-alt);
+        }
+
+        th {
+          border-top: none;
+        }
+
+        td:first-child,
+        th:first-child {
+          border-left: none;
+        }
+      }
+    }
+  </style>
+</svelte:head>

package/dist/GoogleDocScrollyteller/GoogleDocScrollyteller.stories.svelte

@@ -20,5 +20,6 @@
   args={{
     name: "myscrollyteller",
     markerName: "mark",
+    loadScrollyteller: () => ({}),
   }}
 />

package/dist/GoogleDocScrollyteller/GoogleDocScrollyteller.svelte

@@ -11,10 +11,16 @@
     name = "myscrollyteller",
     markerName = "mark",
     ScrollytellerRoot,
+    loadScrollyteller,
   }: {
     name: string;
-    markerName: string;
+    markerName?: string;
     ScrollytellerRoot: Component;
+    loadScrollyteller: (
+      name?: string,
+      className?: string,
+      markerName?: string,
+    ) => any;
   } = $props();
 
   const localStorageKey = `ABC_NEWS_BUILDER_GDOC_PREVIEW`;
@@ -63,6 +69,7 @@
       name,
       url: doc,
       markerName,
+      loadScrollyteller,
     })
       .then((data) => {
         title = data.title;

package/dist/GoogleDocScrollyteller/GoogleDocScrollyteller.svelte.d.ts

@@ -1,8 +1,9 @@
 import type { Component } from "svelte";
 type $$ComponentProps = {
     name: string;
-    markerName: string;
+    markerName?: string;
     ScrollytellerRoot: Component;
+    loadScrollyteller: (name?: string, className?: string, markerName?: string) => any;
 };
 declare const GoogleDocScrollyteller: Component<$$ComponentProps, {}, "">;
 type GoogleDocScrollyteller = ReturnType<typeof GoogleDocScrollyteller>;

package/dist/GoogleDocScrollyteller/utils.d.ts

@@ -8,16 +8,17 @@
  * @param {function} [postprocessScrollytellerDefinition] -
  * @returns
  */
-export declare function loadData({ name, className, markerName, url, preprocessCoreEl, postprocessScrollytellerDefinition }: {
+export declare function loadData({ name, className, markerName, url, preprocessCoreEl, postprocessScrollytellerDefinition, loadScrollyteller, }: {
     name: any;
     className?: string | undefined;
     markerName?: string | undefined;
     url: any;
     preprocessCoreEl?: ((el: any) => any) | undefined;
     postprocessScrollytellerDefinition?: ((a: any) => any) | undefined;
+    loadScrollyteller: any;
 }): Promise<{
     title: string | null | undefined;
     coreText: string;
     coreHTML: string;
-    scrollytellerDefinition: import("@abcnews/svelte-scrollyteller/dist/types").ScrollytellerDefinition;
+    scrollytellerDefinition: any;
 } | undefined>;

package/dist/GoogleDocScrollyteller/utils.js

@@ -1,9 +1,8 @@
-import { loadScrollyteller } from '@abcnews/svelte-scrollyteller';
 function mountTextToMountEl(mountText) {
-    const mountEl = document.createElement('div');
-    mountEl.setAttribute('data-mount', '');
-    mountEl.setAttribute('data-component', 'Anchor');
-    mountEl.setAttribute('id', mountText.slice(1));
+    const mountEl = document.createElement("div");
+    mountEl.setAttribute("data-mount", "");
+    mountEl.setAttribute("data-component", "Anchor");
+    mountEl.setAttribute("id", mountText.slice(1));
     return mountEl;
 }
 /**
@@ -16,55 +15,56 @@ function mountTextToMountEl(mountText) {
  * @param {function} [postprocessScrollytellerDefinition] -
  * @returns
  */
-export async function loadData({ name, className = 'u-full', markerName = 'mark', url, preprocessCoreEl = el => el, postprocessScrollytellerDefinition = a => a }) {
+export async function loadData({ name, className = "u-full", markerName = "mark", url, preprocessCoreEl = (el) => el, postprocessScrollytellerDefinition = (a) => a, loadScrollyteller, }) {
     if (!url) {
         return;
     }
-    const pubURL = url.replace(/\/[^/]+?$/, '/pub');
-    const html = await fetch(pubURL).then(response => response.text());
-    const dom = new DOMParser().parseFromString(html, 'text/html');
-    const body = dom.querySelector('#contents > div');
-    const title = dom.querySelector('title')?.textContent;
+    const pubURL = url.replace(/\/[^/]+?$/, "/pub");
+    const html = await fetch(pubURL).then((response) => response.text());
+    const dom = new DOMParser().parseFromString(html, "text/html");
+    const body = dom.querySelector("#contents > div");
+    const title = dom.querySelector("title")?.textContent;
     if (!body) {
-        throw new Error('Body not found');
+        throw new Error("Body not found");
     }
-    Array.from(body.querySelectorAll('*')).forEach(el => {
-        el.removeAttribute('class');
-        el.removeAttribute('id');
+    Array.from(body.querySelectorAll("*")).forEach((el) => {
+        el.removeAttribute("class");
+        el.removeAttribute("id");
     });
     const coreEls = Array.from(body.children).map(preprocessCoreEl);
     const coreText = coreEls.reduce((memo, el) => {
         const text = String(el.textContent).trim();
-        memo = `${memo}\n${text ? `\n${text}` : ''}`;
+        memo = `${memo}\n${text ? `\n${text}` : ""}`;
         return memo;
-    }, '');
+    }, "");
     const coreHTML = coreEls.reduce((memo, el) => {
         const text = String(el.textContent).trim();
         const html = el.outerHTML;
-        memo = `${memo}${text ? `${html}` : ''}`;
+        memo = `${memo}${text ? `${html}` : ""}`;
         return memo;
-    }, '');
+    }, "");
     const { scrollytellingEls } = coreEls.reduce((memo, el) => {
         if (memo.hasEnded) {
             return memo;
         }
         const text = String(el.textContent).trim();
-        if (text.indexOf('#remove') === 0) {
+        if (text.indexOf("#remove") === 0) {
             memo.isRemoving = true;
         }
-        else if (text.indexOf('#endremove') === 0) {
+        else if (text.indexOf("#endremove") === 0) {
             memo.isRemoving = false;
         }
-        else if (text.indexOf('#') === 0) {
-            if (text.indexOf(`#scrollyteller${name ? `NAME${name}` : ''}`) === 0 && !memo.hasBegun) {
+        else if (text.indexOf("#") === 0) {
+            if (text.indexOf(`#scrollyteller${name ? `NAME${name}` : ""}`) === 0 &&
+                !memo.hasBegun) {
                 memo.hasBegun = true;
             }
-            else if (text.indexOf('#endscrollyteller') === 0) {
+            else if (text.indexOf("#endscrollyteller") === 0) {
                 memo.hasEnded = true;
             }
             memo.scrollytellingEls.push(mountTextToMountEl(text));
         }
-        else if (!memo.hasBegun || memo.isRemoving || text === '') {
+        else if (!memo.hasBegun || memo.isRemoving || text === "") {
             // skip
         }
         else {
@@ -75,10 +75,10 @@ export async function loadData({ name, className = 'u-full', markerName = 'mark'
         hasBegun: false,
         hasEnded: false,
         isRemoving: false,
-        scrollytellingEls: []
+        scrollytellingEls: [],
     });
-    const container = document.createElement('div');
-    scrollytellingEls.forEach(scrollytellingEl => container.appendChild(scrollytellingEl));
+    const container = document.createElement("div");
+    scrollytellingEls.forEach((scrollytellingEl) => container.appendChild(scrollytellingEl));
     document.body.appendChild(container);
     let scrollytellerDefinition = loadScrollyteller(name, className, markerName);
     document.body.removeChild(container);
@@ -89,6 +89,6 @@ export async function loadData({ name, className = 'u-full', markerName = 'mark'
         title,
         coreText,
         coreHTML,
-        scrollytellerDefinition
+        scrollytellerDefinition,
     };
 }

package/dist/MarkerAdmin/MarkerAdmin.svelte

@@ -0,0 +1,417 @@
+<script lang="ts">
+  import { onMount, untrack } from "svelte";
+  import { slide } from "svelte/transition";
+
+  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",
+    },
+  } = $props();
+
+  type Marker = {
+    /** human readable name */
+    name: string;
+    /** actual marker string */
+    hash: string;
+    /** Date at which the marker was deleted (for undo) */
+    deleted?: number;
+  };
+
+  let hasLoaded = $state(false);
+  let markers = $state<Marker[]>([]);
+  let mode = $state(Object.keys(prefixes)?.[0]);
+
+  /** which button should show the success indicator */
+  let successIndicator = $state("");
+
+  const [version = "0.0.0"] =
+    window.location.pathname
+      .match(/\/news-projects\/[^/]+\/(\d+\.\d+\.\d+)/)
+      ?.slice(1) || [];
+  const localStorageKey = `ABC_NEWS_BUILDER_${projectName.toUpperCase().replace(/-/g, "_")}`;
+
+  /** Load & sanitise markers from localStorage on initial load */
+  $effect(() => {
+    let _markers = markers;
+    if (!hasLoaded) {
+      return;
+    }
+    try {
+      localStorage[localStorageKey] = JSON.stringify({
+        version: version,
+        lastUpdated: new Date().toISOString(),
+        expiry: 2026,
+        markers: _markers,
+      });
+    } catch (e) {
+      alert("Could not save markers: " + (e as Error).message);
+    }
+  });
+
+  /* ---------------------------------------------------------------------------
+   * slightly more complex delete logic than I hoped. When an item is marked
+   * as deleted, set a timer and actually delete it after ~5sec.
+   * don't delete while the user is still hovering the items.
+   */
+  let isHovering = $state(false);
+  let interval = $state<NodeJS.Timeout>();
+  function clearDeleteCleanup() {
+    const _interval = untrack(() => interval);
+    if (_interval) {
+      clearInterval(_interval);
+      interval = undefined;
+    }
+  }
+  $effect(() => {
+    const _markers = untrack(() => markers);
+
+    clearDeleteCleanup();
+    if (isHovering) {
+      return;
+    }
+
+    interval = setInterval(() => {
+      const goodMarkers = (marker) =>
+        !marker.deleted || marker.deleted > Date.now() - 5000;
+      if (!_markers.every(goodMarkers)) {
+        markers = _markers.filter(goodMarkers);
+      }
+    }, 3000);
+  });
+
+  onMount(function load() {
+    try {
+      const storage = localStorage[localStorageKey];
+      if (!storage) {
+        hasLoaded = true;
+        return;
+      }
+      const parsedStorage = JSON.parse(storage);
+      markers = parsedStorage.markers;
+    } catch (e) {
+      alert("Could not load saved markers: " + (e as Error).message);
+    }
+    hasLoaded = true;
+
+    return () => {
+      clearDeleteCleanup();
+    };
+  });
+</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>
+{/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>
+{/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>
+{/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>
+{/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>
+{/snippet}
+
+<div class="toolbar">
+  <select bind:value={mode}>
+    {#each Object.keys(prefixes) as prefix}
+      <option>{prefix}</option>
+    {/each}
+  </select>
+  <button
+    title="Copy marker"
+    class:success={successIndicator === "copy"}
+    onanimationend={() => {
+      successIndicator = "";
+    }}
+    onclick={(e) => {
+      e.preventDefault();
+      const hash = window.location.hash.slice(1);
+      navigator.clipboard.writeText(prefixes[mode] + hash);
+      successIndicator = "copy";
+    }}
+  >
+    {@render copyIcon()}
+  </button>
+  <button
+    title="Paste marker from clipboard"
+    class:success={successIndicator === "paste"}
+    onanimationend={() => {
+      successIndicator = "";
+    }}
+    onclick={async (e) => {
+      e.preventDefault();
+
+      let text: string | null = await navigator.clipboard
+        .readText()
+        .catch((e) => {
+          console.error("Could not read clipboard");
+          return null;
+        });
+
+      if (!text) {
+        text = prompt("Paste a marker here to import its configuration");
+      }
+
+      if (!text) {
+        return;
+      }
+
+      let sanitisedMarker = text;
+      Object.keys(prefixes).forEach(
+        (prefix) => (sanitisedMarker = sanitisedMarker.replace(prefix, "")),
+      );
+
+      if (window.location.hash.slice(1) === sanitisedMarker) {
+        alert(
+          "Pasted marker is the same as the current state. No changes were necessary.",
+        );
+        return;
+      }
+
+      window.location.hash = sanitisedMarker;
+
+      successIndicator = "paste";
+    }}
+  >
+    {@render pasteIcon()}
+  </button>
+  <div class="divider"></div>
+  <button
+    title="Save marker snapshot"
+    onclick={(e) => {
+      e.preventDefault();
+      const name = prompt(
+        "What would you like to call this snapshot?",
+        defaultMarkerName(),
+      );
+      if (!name) {
+        return;
+      }
+      markers.push({
+        name,
+        hash: window.location.hash.slice(1),
+      });
+    }}
+  >
+    {@render saveIcon()}
+  </button>
+</div>
+
+<svelte:window
+  onblur={() => {
+    isHovering = false;
+  }}
+/>
+
+<table
+  class="saved-markers"
+  onmouseenter={() => {
+    isHovering = true;
+  }}
+  onmouseleave={() => {
+    isHovering = false;
+  }}
+>
+  <tbody>
+    {#each markers as marker, index}
+      <tr
+        class="row"
+        class:row--deleted={marker.deleted}
+        transition:slide
+        onclick={(e) =>
+          //@ts-ignore
+          e.target?.querySelector("a")?.click()}
+      >
+        <td class="name">
+          {#if marker.deleted}
+            {marker.name}
+          {:else}
+            <a href={`#${marker.hash}`}>
+              {marker.name}
+            </a>
+          {/if}
+        </td>
+        <td class="buttons">
+          <button
+            onclick={(e) => {
+              e.preventDefault();
+              const newMarkers = [...markers];
+              const marker = newMarkers[index];
+              if (marker.deleted) {
+                delete marker.deleted;
+              } else {
+                marker.deleted = Date.now();
+              }
+            }}
+            title={marker.deleted ? "Undo delete" : "Delete marker"}
+            style:height="32px"
+          >
+            {#if marker.deleted}
+              {@render undeleteIcon()}
+            {:else}
+              {@render deleteIcon()}
+            {/if}
+          </button>
+        </td>
+      </tr>
+    {/each}
+  </tbody>
+</table>
+
+<style>
+  .toolbar {
+    display: flex;
+    justify-content: space-between;
+    gap: 0.5rem;
+
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--border);
+
+    .divider {
+      border-right: 1px solid var(--border);
+    }
+
+    button.success {
+      animation: success 1s;
+    }
+  }
+
+  @keyframes success {
+    from {
+      outline: 0px solid rgb(114, 191, 114);
+    }
+    to {
+      outline: 10px solid rgb(114, 191, 114, 0);
+    }
+  }
+
+  .saved-markers {
+    &,
+    tr,
+    td,
+    tbody {
+      margin: 0;
+      padding: 0;
+      display: block;
+    }
+    tbody {
+      width: 100%;
+    }
+    .row {
+      display: flex;
+      width: 100%;
+      border-bottom: 1px solid var(--border);
+      width: calc(100% + 1rem);
+      margin-left: -0.5rem;
+      border-radius: 1px;
+      & > * {
+        padding: 0.5rem;
+      }
+      &:not(.row--deleted):hover {
+        cursor: pointer;
+        background: Highlight;
+        color: HighlightText;
+      }
+    }
+    .row a {
+      text-decoration: none;
+      color: inherit;
+      &:focus-visible {
+        text-decoration: underline;
+      }
+    }
+    .name {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      transition: all 0.2s;
+    }
+
+    .row--deleted .name {
+      opacity: 0.2;
+    }
+  }
+</style>

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

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

package/dist/ScreenshotTool/ScreenshotTool.svelte

@@ -12,7 +12,8 @@
   let {
     defaultMarkerName = () => "Marker",
     prefixes = {},
-    parseMarker = (str) => ({}),
+    // Optional function to process markers
+    onMarker = (str) => str,
     iframeUrl = "",
   } = $props();
 
@@ -46,11 +47,8 @@
 
       const uniqueMarkers = Array.from(new Set(markers));
 
-      // parse to object
-      const encodedMarkers = uniqueMarkers.map((marker) => parse(marker));
-
       // pass through schema
-      const parsedMarkers = await Promise.all(encodedMarkers.map(parseMarker));
+      const parsedMarkers = await Promise.all(uniqueMarkers.map(onMarker));
 
       // generate a friendly name &  reencode markers with hexFlip="none"
       preview = await Promise.all(

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

@@ -6,12 +6,12 @@ type ScreenshotTool = {
 declare const ScreenshotTool: import("svelte").Component<{
     defaultMarkerName?: Function;
     prefixes?: Record<string, any>;
-    parseMarker?: Function;
+    onMarker?: Function;
     iframeUrl?: string;
 }, {}, "">;
 type $$ComponentProps = {
     defaultMarkerName?: Function;
     prefixes?: Record<string, any>;
-    parseMarker?: Function;
+    onMarker?: Function;
     iframeUrl?: string;
 };

package/dist/UpdateChecker/UpdateChecker.svelte

@@ -10,9 +10,10 @@
   let {
     overrideNewVersion,
     buttonText = "Open new builder",
-  }: { overrideNewVersion: NewVersion; buttonText: string } = $props();
+  }: { overrideNewVersion?: NewVersion; buttonText?: string } = $props();
 
-  let newVersion = $state<NewVersion>(overrideNewVersion);
+  let newVersion = $state<NewVersion | undefined>(overrideNewVersion);
+  // svelte-ignore state_referenced_locally
   let isOpen = $state(!!newVersion);
 
   /**

package/dist/UpdateChecker/UpdateChecker.svelte.d.ts

@@ -3,8 +3,8 @@ type NewVersion = {
     thisVersion: string;
 };
 type $$ComponentProps = {
-    overrideNewVersion: NewVersion;
-    buttonText: string;
+    overrideNewVersion?: NewVersion;
+    buttonText?: string;
 };
 declare const UpdateChecker: import("svelte").Component<$$ComponentProps, {}, "">;
 type UpdateChecker = ReturnType<typeof UpdateChecker>;

package/dist/index.d.ts

@@ -5,3 +5,4 @@ export { default as Modal } from "./Modal/Modal.svelte";
 export { default as ScreenshotTool } from "./ScreenshotTool/ScreenshotTool.svelte";
 export { default as Typeahead } from "./Typeahead/Typeahead.svelte";
 export { default as UpdateChecker } from "./UpdateChecker/UpdateChecker.svelte";
+export { default as MarkerAdmin } from "./MarkerAdmin/MarkerAdmin.svelte";

package/dist/index.js

@@ -6,3 +6,4 @@ export { default as Modal } from "./Modal/Modal.svelte";
 export { default as ScreenshotTool } from "./ScreenshotTool/ScreenshotTool.svelte";
 export { default as Typeahead } from "./Typeahead/Typeahead.svelte";
 export { default as UpdateChecker } from "./UpdateChecker/UpdateChecker.svelte";
+export { default as MarkerAdmin } from "./MarkerAdmin/MarkerAdmin.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abcnews/components-builder",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run prepack",