<script lang="ts">
  import One from './One.svelte';
  /* import ScrollerBase from './ScrollerBase.svelte';
  import ScrollerDemo from './demo/ScrollerDemo.svelte'; */
  import type { PageData } from '../../$types';
  import {
    EmbedPreviewerLink,
    Theme,
  } from '@reuters-graphics/graphics-components';
  import App from '$lib/App.svelte';
  import pkg from '$pkg';
  import { dev } from '$app/environment';
  import { assets } from '$app/paths';
  import { page } from '$app/state';

  // Styles
  import '@reuters-graphics/graphics-components/scss/main.scss';
  import '$lib/styles/global.scss';

  let { data }: { data: PageData } = $props();
  let content = $derived(data.content);
</script>

<Theme
  base="dark"
  theme={{
    font: {
      family: {
        serif: 'Sentient',
        'sans-serif': "'Atkinson Hyperlegible Next'",
        hed: 'Sentient',
        subhed: 'Sentient',
        body: "'Atkinson Hyperlegible Next'",
        note: "'Atkinson Hyperlegible Next'",
      },
    },
  }}
>
  <App {content} />
</Theme>
<!-- Only visible in dev! -->
<EmbedPreviewerLink {dev} />
