updates docs, svelte 5

src/components/PymChild/PymChild.mdx

@@ -0,0 +1,36 @@
+import { Meta } from '@storybook/blocks';
+
+import * as PymChildStories from './PymChild.stories.svelte';
+
+<Meta of={PymChildStories} />
+
+# PymChild
+
+The `PymChild` component creates a [Pym.js](https://blog.apps.npr.org/pym.js/) child instance for embeddables.
+
+```svelte
+<script>
+  import { PymChild } from '@reuters-graphics/graphics-components';
+</script>
+
+<PymChild polling={500} />
+```
+
+You can access the Pym.js child via `pymChildState` in other components to send custom height updates to parent frames:
+
+```svelte
+<script>
+  import {
+    PymChild,
+    pymChildState,
+  } from '@reuters-graphics/graphics-components';
+
+  const updateHeight = () => {
+    if (pymChildState.pymChild) pymChildState.pymChild.sendHeight();
+  };
+</script>
+
+<PymChild />
+
+<button onclick={updateHeight}>Update height</button>
+```

src/components/PymChild/PymChild.stories.svelte

@@ -1,27 +1,11 @@
 <script module lang="ts">
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import PymChild from './PymChild.svelte';
 
-  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Utilities/PymChild',
     component: PymChild,
-    ...withComponentDocs(componentDocs),
-  };
+  });
 </script>
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-</script>
-
-<Template >
-  {#snippet children({ args })}
-    <PymChild {...args} />
-    <div>Nothing to see here. 😎</div>
-  {/snippet}
-</Template>
-
-<Story name="Default" />
+<Story name="Demo" tags={['!autodocs', '!dev']} />

src/components/PymChild/PymChild.svelte

@@ -1,8 +1,9 @@
 <!-- @component `PymChild` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-utilities-pymchild--docs) -->
 <script lang="ts">
-  import { onMount } from 'svelte';
   import pym from 'pym.js';
-  import { pymChildStore } from './stores.js';
+  import { pymChildState } from './state.svelte.js';
+  import { onMount } from 'svelte';
+
   interface Props {
     /** Pym.js polling interval */
     polling?: number;
@@ -10,10 +11,8 @@
 
   let { polling = 500 }: Props = $props();
 
-  let pymChild;
-
   onMount(() => {
-    pymChild = new pym.Child({ polling });
-    pymChildStore.set(pymChild);
+    let pymChild = new pym.Child({ polling });
+    pymChildState.pymChild = pymChild;
   });
 </script>

src/components/PymChild/state.svelte.ts

@@ -0,0 +1,5 @@
+import pym from 'pym.js';
+
+type PymChildState = { pymChild: pym.Child | null };
+
+export const pymChildState: PymChildState = $state({ pymChild: null });

src/components/PymChild/stores.js

@@ -1,3 +0,0 @@
-import { writable } from 'svelte/store';
-
-export const pymChildStore = writable(null);

src/components/PymChild/stories/docs/component.md

@@ -1,28 +0,0 @@
-A Pym.js child instance for embeddables.
-
-```svelte
-<script>
-  import { PymChild } from '@reuters-graphics/graphics-components';
-</script>
-
-<PymChild polling="{500}" />
-```
-
-You can access the Pym.js child through its store in other components to send custom height updates to parent frames:
-
-```svelte
-<script>
-  import {
-    PymChild,
-    pymChildStore,
-  } from '@reuters-graphics/graphics-components';
-
-  const updateHeight = () => {
-    if ($pymChildStore) $pymChildStore.sendHeight();
-  };
-</script>
-
-<PymChild />
-
-<button on:click="{updateHeight}">Update height</button>
-```