@swr-data-lab/components 1.0.0

package/.storybook/main.ts

@@ -0,0 +1,20 @@
+import type { StorybookConfig } from "@storybook/sveltekit";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|ts|svelte)"],
+  addons: [
+    "@storybook/addon-svelte-csf",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/sveltekit",
+    options: {},
+  },
+  core: {
+    builder: '@storybook/builder-vite'
+  }
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from "@storybook/svelte";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@swr-data-lab/components",
+  "description": "SWR Data Lab component library",
+  "author": "SWR Data Lab",
+  "version": "1.0.0",
+  "publishConfig": {
+    "access": "restricted"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "storybook": "storybook dev -p 6006",
+    "start": "storybook dev -p 6006",
+    "build-storybook": "storybook build --disable-telemetry",
+    "test-storybook": "test-storybook --browsers chromium firefox",
+    "test-storybook:ci": "concurrently -k -s first -n \"Storybook,Test\" -c \"magenta,blue\" \"npm run build-storybook --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && npm run test-storybook\"",
+    "semantic-release": "semantic-release"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^2.0.2",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/npm": "^12.0.1",
+    "@storybook/addon-essentials": "^8.3.0",
+    "@storybook/addon-interactions": "^8.3.0",
+    "@storybook/addon-links": "^8.3.0",
+    "@storybook/addon-svelte-csf": "^4.1.7",
+    "@storybook/blocks": "^8.3.0",
+    "@storybook/builder-vite": "^8.3.0",
+    "@storybook/svelte": "^8.3.0",
+    "@storybook/sveltekit": "^8.3.0",
+    "@storybook/test": "^8.3.0",
+    "@storybook/test-runner": "^0.19.1",
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "concurrently": "^9.0.1",
+    "http-server": "^14.1.1",
+    "sass-embedded": "^1.78.0",
+    "semantic-release": "^24.1.2",
+    "storybook": "^8.3.0",
+    "svelte": "^4.2.7",
+    "svelte-check": "^4.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.3",
+    "wait-on": "^8.0.1"
+  },
+  "type": "module"
+}

package/src/Autocomplete/Autocomplete.stories.js

@@ -0,0 +1,68 @@
+import { userEvent, within, expect, fn } from "@storybook/test"
+import AutoComplete from "."
+
+export default {
+  title: "Example/Autocomplete",
+  tags: ["autodocs"],
+  component: AutoComplete,
+}
+
+const testData = ["Apples", "Oranges", "Pears", "Peaches", "Bananas"].map((el) => {
+  return {
+    value: el,
+    label: el,
+    details: {},
+  }
+})
+
+export const Basic = {
+  args: {
+    data: testData,
+    query: "",
+    placeholder: "Select a fruit",
+  },
+}
+
+const onSelect = fn((e) => {
+  return e.detail
+})
+
+export const Test = {
+  parameters: {
+    docs: {
+      story: {
+        autoplay: true,
+      },
+    },
+  },
+  args: {
+    data: testData,
+    query: "",
+    placeholder: "Select a fruit",
+    event_select: onSelect,
+  },
+  play: async ({ args, canvasElement, step }) => {
+    const canvas = within(canvasElement)
+    const input = canvas.getByTestId("autocomplete-input")
+    await step("Select using the mouse", async () => {
+      await userEvent.click(input)
+      expect(input).toHaveFocus()
+      await userEvent.keyboard("ba")
+      const bananasOption = canvas.getByText("Bananas")
+      await userEvent.click(bananasOption)
+      expect(input).toHaveValue("Bananas")
+      expect(onSelect).toHaveReturnedWith({ item: { label: "Bananas", value: "Bananas", details: {} } })
+    })
+    await userEvent.clear(input)
+    await step("Select using the keyboard", async () => {
+      await userEvent.click(input)
+      expect(input).toHaveFocus()
+      await userEvent.keyboard("ap")
+      await userEvent.keyboard("{ArrowDown}")
+      await userEvent.keyboard("{Enter}")
+      expect(input).toHaveValue("Apples")
+      expect(onSelect).toHaveReturnedWith({ item: { label: "Apples", value: "Apples", details: {} } })
+    })
+    await userEvent.clear(input)
+  },
+}

package/src/Autocomplete/Autocomplete.svelte

@@ -0,0 +1,232 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import Circle from '../assets/icons/times-circle-solid.svg.svelte';
+
+  export let data = [];
+  export let query = '';
+  export let placeholder = 'Platzhalter';
+  
+  
+  const sortData = (a, b) => {
+    return a.value.localeCompare(b.value);
+  }
+  
+  let listRef;
+  let controlsRef;
+  let inputRef;
+  const dispatch = createEventDispatcher();
+
+  let highlightedItemIndex = -1;
+  $: suggestions = data.sort(sortData).slice(0, 50);
+  $: isActive = false;
+
+  // Insert clicked item into search input,
+  // dispatch it as select event and close the dropdown
+  const handleItemClick = (index) => {
+    highlightedItemIndex = index;
+    setSelectedItem(suggestions[highlightedItemIndex]);
+  };
+
+  const setSelectedItem = (item) => {
+    query = item.value;
+    isActive = false;
+    dispatch('select', { item });
+  };
+
+  // Register keyboard events
+  const handleKeyDown = (e) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      highlightedItemIndex =
+        highlightedItemIndex < suggestions.length - 1 ? highlightedItemIndex + 1 : 0;
+      const target = listRef.querySelector(`ul li:nth-child(${highlightedItemIndex + 1})`);
+      target.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      highlightedItemIndex =
+        highlightedItemIndex > 0 ? highlightedItemIndex - 1 : suggestions.length - 1;
+      const target = listRef.querySelector(`ul li:nth-child(${highlightedItemIndex + 1})`);
+      target.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    } else if (e.key === 'Enter') {
+      if (highlightedItemIndex > -1){
+        setSelectedItem(suggestions[highlightedItemIndex]);
+        isActive = false;
+      }
+    }
+  };
+
+  const handleClear = (e) => {
+    query = '';
+    inputRef.focus()
+    setSuggestions()
+    dispatch('select', {
+      item: null
+    });
+  };
+
+
+  const setSuggestions  = () => {
+    suggestions = data.filter((el) =>{
+        return el.value.toLowerCase().startsWith(query.toLowerCase())
+      }).sort(sortData);
+  }
+
+  // update dropdown list if input value changes
+  const handleInput = () => {
+    isActive = true;
+    if (query.length === 0){
+      suggestions = data
+    } else {
+      setSuggestions()
+      highlightedItemIndex = -1;
+    }
+  }
+</script>
+
+<!--
+This component is used to display a list of suggestions for a given query. If an item is clicked or the enter key is pressed, the selected item will be returned by a custom select event.
+
+Data should be provided as array of objects. Each object contains the information for a dropdown entry:
+    - **value** *string* the text that is displayed in the input. Has to be unique!
+    - **label** *string* | *svelte component* | *array of svelte component and props object* text, html or component displayed in the dropdown list
+    - **details** *object* extra data needed by selection handler
+@component
+-->
+
+<div class="autocomplete">
+  <input
+    type="text"
+    {placeholder}
+    autocomplete="off"
+    autocorrect="off"
+    autocapitalize="off"
+    data-testid="autocomplete-input"
+    bind:this={inputRef}
+    on:keydown={handleKeyDown}
+    bind:value={query}
+    on:input={handleInput}
+    on:focus={() => {
+      isActive = true;
+    }}
+    on:blur={(e) => {
+      if (listRef.contains(e.relatedTarget)){
+        window.setTimeout(()=>{
+          isActive = false;
+        }, 100)
+      } else if (!controlsRef.contains(e.relatedTarget)){
+        isActive = false
+      }
+    }}
+  />
+
+  <ul tabindex="-1" bind:this={listRef} class:active={isActive}>
+    {#each suggestions as item, i (item.value)}
+      <li>
+        <button
+          class={`item ${i === highlightedItemIndex ? 'active' : ''}`}
+          tabindex="-1"
+          type="button"
+          on:click={(e) => {
+            e.preventDefault();
+            handleItemClick(i);
+          }}
+        >
+          {item.label}
+        </button>
+      </li>
+    {/each}
+  </ul>
+  <div class="controls" bind:this={controlsRef}>
+    <button type="button" on:click={handleClear} class="clear" class:active={query.length > 0}>
+      <Circle />
+    </button>
+  </div>
+</div>
+
+<style lang="scss">
+  @import '../styles/scss/base.scss';
+
+  .autocomplete {
+    position: relative;
+    display: block;
+    color: white;
+
+    input {
+      @extend %copy;
+      border: 1px solid black;
+      border-radius: $border-radius-input;
+      background: transparent;
+      padding: 0 0.5em;
+      height: $input-height;
+      margin: 0;
+      display: block;
+      width: 100%;
+      &:focus-visible {
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+    input[type='text'] {
+      text-size-adjust: none;
+    }
+
+    ul {
+      position: absolute;
+      top: 100%;
+      border: 1px solid black;
+      border-bottom-left-radius: $border-radius-input;
+      border-bottom-right-radius: $border-radius-input;
+      border-top: 0;
+      left: 0;
+      right: 0;
+      max-height: 10rem;
+      overflow-y: scroll;
+      z-index: 1000;
+      opacity: 0;
+      transition: 100ms;
+      pointer-events: none;
+      &:empty {
+        box-shadow: none;
+      }
+      &.active {
+        opacity: 1;
+        pointer-events: all;
+      }
+
+      .item {
+        @extend %caption;
+        padding: 0.5em;
+        width: 100%;
+        background: transparent;
+        border: 0;
+        text-align: left;
+        border-bottom: 1px solid rgba(black, 0.5);
+        cursor: pointer;
+        &.active, &:hover {
+          text-decoration: underline;
+          background-color: rgba(black, .1);
+        }
+      }
+    }
+
+    .clear {
+      position: absolute;
+      transform: translateY(-50%);
+      top: 50%;
+      right: 0.75rem;
+      width: 1.2rem;
+      height: 1.2rem;
+      background: transparent;
+      border: 0;
+      display: none;
+      &.active {
+        display: block;
+      }
+      &:hover,
+      &:focus {
+        color: $orange--1;
+        cursor: pointer;
+      }
+    }
+  }
+</style>

package/src/Autocomplete/index.js

@@ -0,0 +1,2 @@
+import AutoComplete from "./Autocomplete.svelte"
+export default AutoComplete

package/src/Intro.mdx

@@ -0,0 +1,7 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="About" />
+
+# SWR Components
+
+Experimental component library for SWR Data interactives.

package/src/Switcher/Switcher.stories.js

@@ -0,0 +1,38 @@
+import { userEvent, within, expect } from "@storybook/test"
+import Switcher from "."
+
+export default {
+  title: "Example/Switcher",
+  tags: ["autodocs"],
+  component: Switcher,
+}
+
+export const TwoOptions = {
+  args: {
+    options: ["Option A", "Option B"],
+    groupName: "two-options",
+    value: "Option A",
+  },
+}
+
+export const FourOptions = {
+  args: {
+    options: ["Apples", "Oranges", "Bananas", "Peaches"],
+    groupName: "four-options",
+    value: "Oranges",
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement)
+
+    await step("Clicking selects the expected option", async () => {
+      const optionA = canvas.getByLabelText("Apples")
+      const optionB = canvas.getByLabelText("Bananas")
+      await userEvent.click(optionA)
+      expect(optionA).toBeChecked()
+      expect(optionB).not.toBeChecked()
+      await userEvent.click(optionB)
+      expect(optionB).toBeChecked()
+      expect(optionA).not.toBeChecked()
+    })
+  },
+}

package/src/Switcher/Switcher.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+
+  // The options available in the switcher.
+  export let options: string[] = [];
+  
+  // Machine-readable name for the form field. Should be unique to other fields in the form.
+  export let groupName: string = "";
+    
+  // The currently selected option
+  export let value : string = options[0];
+      
+  function optionToID(o:string) {
+    // TODO: This should use $id() when it comes out, so
+    // input IDs are guaranteed unique across the app
+    // See: https://github.com/sveltejs/svelte/issues/13108
+    return `${groupName}-option-${o.replace(/ /g, '-').toLowerCase()}`;
+  }
+</script>
+
+<!--
+Radio-like form component to choose exactly one of a given set of options.
+@component
+-->
+
+<ol class="container">
+  {#each options as o (o)}
+    <li class:is-selected={o === value}>
+      <label for={optionToID(o)}>
+        {o}
+        <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M19.7054 6.29119C20.0969 6.68077 20.0984 7.31393 19.7088 7.7054L9.75697 17.7054C9.56928 17.894 9.31416 18 9.04809 18C8.78201 18 8.52691 17.8939 8.33925 17.7053L4.2911 13.6365C3.90157 13.245 3.90318 12.6118 4.2947 12.2223C4.68621 11.8327 5.31938 11.8344 5.7089 12.2259L9.04825 15.5823L18.2912 6.2946C18.6808 5.90314 19.3139 5.90161 19.7054 6.29119Z"
+            fill="currentColor"
+          />
+        </svg>
+      </label>
+      <input id={optionToID(o)} name={groupName} value={o} type="radio" bind:group={value} />
+    </li>
+  {/each}
+</ol>
+
+<style lang="scss">
+  @import "../styles/scss/base.scss";
+
+  .container {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    border-radius: $border-radius-input;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    border: 1px solid black;
+    outline-offset: 2px;
+
+    &:focus-within,
+    &:active {
+      outline: 2px solid lightgray;
+    }
+  }
+  li {
+    display: contents;
+    &:last-child label {
+      border-right: 0;
+    }
+  }
+  input {
+    position: absolute;
+    left: -999px;
+  }
+  label {
+    @extend %copy;
+    line-height: 1;
+    padding-top: 0.1em;
+    height: $input-height;
+    cursor: pointer;
+    margin: 0;
+    flex-basis: 0;
+    flex-grow: 1;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    color: black;
+    position: relative;
+    transition: $transition-fast;
+    text-underline-offset: 0.1em;
+    border-right: 1px solid black;
+    &:hover,
+    &:focus-visible {
+      text-decoration: underline;
+    }
+    svg {
+      position: absolute;
+      left: 0.65em;
+      width: 1em;
+      height: auto;
+      opacity: 0;
+      transition: $transition-fast;
+      display: block;
+    }
+    .is-selected & {
+      background: black;
+      color: white;
+      svg {
+        opacity: 1;
+      }
+    }
+  }
+</style>

package/src/Switcher/index.js

@@ -0,0 +1,2 @@
+import Switcher from "./Switcher.svelte"
+export default Switcher

package/src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export { };

package/src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

package/src/assets/icons/close-circle.svg.svelte

@@ -0,0 +1,3 @@
+<svg width="123" height="118" viewBox="0 0 123 118" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M61.5 118C95.4655 118 123 91.5848 123 59C123 26.4152 95.4655 0 61.5 0C27.5345 0 0 26.4152 0 59C0 91.5848 27.5345 118 61.5 118ZM81.9362 27.0104C85.2557 23.6909 90.6376 23.691 93.957 27.0104C97.2765 30.3299 97.2765 35.7118 93.957 39.0312L73.5045 59.4837L93.957 79.9363C97.2765 83.2557 97.2765 88.6376 93.957 91.9571C90.6376 95.2765 85.2556 95.2765 81.9362 91.9571L61.4837 71.5045L42.0312 90.9571C38.7117 94.2765 33.3298 94.2765 30.0103 90.9571C26.6909 87.6376 26.6909 82.2557 30.0103 78.9362L49.4629 59.4837L30.0103 40.0312C26.6909 36.7118 26.6909 31.3299 30.0103 28.0104C33.3298 24.6909 38.7117 24.6909 42.0312 28.0104L61.4837 47.4629L81.9362 27.0104Z" fill="#C4C4C4"/>
+</svg>

package/src/assets/icons/grow.svg.svelte

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">    <!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
+    <path d="M344 0H488c13.3 0 24 10.7 24 24V168c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39-87 87c-9.4 9.4-24.6 9.4-33.9 0l-32-32c-9.4-9.4-9.4-24.6 0-33.9l87-87L327 41c-6.9-6.9-8.9-17.2-5.2-26.2S334.3 0 344 0zM184 496H40c-13.3 0-24-10.7-24-24V328c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39 87-87c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8z"/>
+</svg>

package/src/assets/icons/hand-pointer.svg.svelte

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">    <!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
+    <path d="M128 40c0-22.1 17.9-40 40-40s40 17.9 40 40V188.2c8.5-7.6 19.7-12.2 32-12.2c25.3 0 46 19.5 47.9 44.3c8.5-7.7 19.8-12.3 32.1-12.3c25.3 0 46 19.5 47.9 44.3c8.5-7.7 19.8-12.3 32.1-12.3c26.5 0 48 21.5 48 48v32 64c0 70.7-57.3 128-128 128l-16 0H240l-.1 0h-5.2c-5 0-9.9-.3-14.7-1c-55.3-5.6-106.2-34-140-79L8 336c-13.3-17.7-9.7-42.7 8-56s42.7-9.7 56 8l56 74.7V40zM240 304c0-8.8-7.2-16-16-16s-16 7.2-16 16v96c0 8.8 7.2 16 16 16s16-7.2 16-16V304zm48-16c-8.8 0-16 7.2-16 16v96c0 8.8 7.2 16 16 16s16-7.2 16-16V304c0-8.8-7.2-16-16-16zm80 16c0-8.8-7.2-16-16-16s-16 7.2-16 16v96c0 8.8 7.2 16 16 16s16-7.2 16-16V304z"/>
+</svg>

package/src/assets/icons/shrink.svg.svelte

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">    <!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
+    <path d="M473 7c-9.4-9.4-24.6-9.4-33.9 0l-87 87L313 55c-6.9-6.9-17.2-8.9-26.2-5.2S272 62.3 272 72V216c0 13.3 10.7 24 24 24H440c9.7 0 18.5-5.8 22.2-14.8s1.7-19.3-5.2-26.2l-39-39 87-87c9.4-9.4 9.4-24.6 0-33.9L473 7zM216 272H72c-9.7 0-18.5 5.8-22.2 14.8s-1.7 19.3 5.2 26.2l39 39L7 439c-9.4 9.4-9.4 24.6 0 33.9l32 32c9.4 9.4 24.6 9.4 33.9 0l87-87 39 39c6.9 6.9 17.2 8.9 26.2 5.2s14.8-12.5 14.8-22.2V296c0-13.3-10.7-24-24-24z"/>
+</svg>

package/src/assets/icons/tap.svg.svelte

@@ -0,0 +1,31 @@
+<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.99 55.7"
+  ><defs
+    ><style>
+      .b,
+      .c {
+        stroke-miterlimit: 10;
+      }
+      .c {
+        stroke-width: 2px;
+      }
+    </style></defs
+  ><path
+    class="b"
+    d="M35.54,14.39c-.61,.58-.91,1.4-.91,2.22l-.3-.35c-1.62-2.33-3.75-2.8-5.37-1.17-.71,.7-1.12,1.52-1.32,2.22-1.01-.82-2.54-1.17-3.95,.12-.81,.7-1.22,1.52-1.42,2.33-1.93-2.68-3.75-5.37-3.95-5.48-.61-.93-2.94-1.87-4.77-.23-1.52,1.4-1.22,3.85-.81,5.13,0,.12,.1,.23,.1,.23l8.72,13.3c-1.62-.82-3.55-1.28-4.56-1.05-1.12,.23-2.33,1.87-2.54,3.5-.2,1.52,.41,2.8,1.62,3.62,1.01,.58,1.93,1.52,3.04,2.57,1.42,1.4,3.24,3.03,5.78,4.78,4.06,2.8,10.85,3.38,12.78,3.5l2.13,3.03c2.03,2.92,5.88,3.38,8.42,1.05l5.07-4.78c2.54-2.33,2.94-6.77,.91-9.69l-2.54-3.62c-.1-3.27-1.93-7.7-2.03-7.94,0-.12-.1-.12-.1-.23l-8.72-12.37c-1.32-1.98-3.45-2.33-5.27-.7Zm12.47,14.59c.51,1.4,1.83,5.02,1.83,7.24,0,.23,.1,.58,.2,.7l2.74,3.85c1.42,1.98,1.12,4.78-.61,6.42l-5.07,4.78c-1.72,1.63-4.16,1.28-5.58-.7l-2.33-3.38c-.2-.23-.51-.47-.81-.47-.1,0-8.11-.35-12.27-3.15-2.43-1.63-4.06-3.27-5.48-4.67-1.22-1.17-2.23-2.1-3.35-2.8-.61-.35-.61-.82-.61-1.17,.1-.7,.51-1.28,.71-1.52q.1-.12,.2-.12c.71-.23,3.55,.7,4.97,1.98,.61,.47,1.01,1.05,1.52,1.52,.81,.93,1.42,1.63,2.33,1.63,.41,0,.71-.23,.91-.7,.2-.35,.1-.82-.1-1.17L14.65,18.12c-.1-.47-.41-1.75,.2-2.33,.91-.82,1.93-.12,1.83-.12,.3,.47,7.71,10.85,7.71,10.85,.3,.47,.91,.58,1.42,.23,.41-.35,.51-1.05,.3-1.52l-2.03-3.73c0-.35,0-1.4,.91-2.22,.81-.7,1.52-.12,1.83,.23l3.04,3.27c.41,.47,1.01,.35,1.42,0,.41-.47,.41-1.17,.1-1.63l-1.72-2.33c-.1-.35-.2-1.05,.71-1.87,1.01-.93,1.93-.12,2.54,.82,.81,1.05,3.24,3.5,3.45,3.73,.41,.35,.91,.35,1.32,0,.41-.35,.51-1.05,.2-1.52-.81-1.4-1.42-3.38-.91-3.73,1.12-1.05,2.03-.35,2.54,.35l8.52,12.37h0Z"
+  /><path
+    class="c"
+    d="M21.36,13.18c.28,.8,1.12,1.12,1.83,.8l3.79-2.08c.14,0,.14-.16,.28-.16,.56-.48,.7-1.28,.42-1.92-.28-.8-1.12-1.12-1.83-.8l-3.79,1.92c-.7,.48-.98,1.44-.7,2.24Z"
+  /><path
+    class="c"
+    d="M10.69,10.46c.56-.48,.7-1.6,.28-2.24l-2.67-3.84c-.42-.64-1.4-.8-1.97-.32-.7,.64-.7,1.76-.28,2.4l2.67,3.68c.56,.64,1.4,.8,1.97,.32Z"
+  /><path
+    class="c"
+    d="M17.85,8.54c.28-.16,.42-.48,.56-.96l.84-4.64c.14-.8-.28-1.76-1.12-1.92-.7-.16-1.54,.32-1.68,1.28l-.84,4.64c-.14,.8,.28,1.76,1.12,1.92,.42,.16,.84,0,1.12-.32Z"
+  /><path
+    class="c"
+    d="M6.62,18.3c.28,0,.7-.16,.84-.32,.28-.32,.56-.8,.56-1.28,0-.96-.56-1.6-1.4-1.6H2.4c-.84,0-1.4,.64-1.4,1.6s.56,1.6,1.4,1.6H6.62Z"
+  /><path
+    class="c"
+    d="M8.16,29.17c.14,0,.14-.16,.28-.32l2.67-3.84c.42-.64,.42-1.76-.28-2.24-.56-.48-1.54-.48-1.97,.32l-2.67,3.84c-.42,.64-.42,1.76,.28,2.24,.42,.48,1.12,.48,1.68,0Z"
+  /></svg
+>

package/src/assets/icons/times-circle-solid.svg.svelte

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times-circle" class="svg-inline--fa fa-times-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"></path></svg>

package/src/events/clickOutside.js

@@ -0,0 +1,23 @@
+/**
+ * Dispatch a click event outside of the given element.
+ * @param {Node} node
+ */
+export function clickOutside(node) {
+  const handleClick = (event) => {
+    if (node && !node.contains(event.target) && !event.defaultPrevented) {
+      node.dispatchEvent(
+        new CustomEvent('clickOutside', {
+          detail: { node, event }
+        })
+      );
+    }
+  };
+
+  document.addEventListener('click', handleClick, true);
+
+  return {
+    destroy() {
+      document.removeEventListener('click', handleClick, true);
+    }
+  };
+}

package/src/styles/css/colors.css

@@ -0,0 +1,77 @@
+body {
+  --petrol--1: #00677f;
+  --eisblau--1: #00dbd7;
+  --türkisblau--1: #007e8f;
+  --dunkelblau--1: #0a1e3c;
+  --orange--1: #ff4e3c;
+  --purpur--1: #5c267e;
+  --rosarot--1: #ff003c;
+  --pink--1: #ff0096;
+}
+
+body[data-stationid="swraktuell"] {
+  --swrdata-color-primary: var(--petrol--1);
+  --swrdata-color-highlight: var(--orange--1);
+}
+
+body[data-stationid="swr3"] {
+  --swrdata-color-primary: var(--rosarot--1);
+  --swrdata-color-highlight: var(--pink--1);
+}
+
+/* load fonts for swr3 */
+
+@font-face {
+  font-family: TheMix;
+  src:
+    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-3_Light.woff2) format("woff2"),
+    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-3_Light.woff) format("woff");
+  font-weight: 300;
+  font-display: swap;
+  font-style: normal;
+}
+@font-face {
+  font-family: TheMix;
+  src:
+    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-4_SemiLight.woff2) format("woff2"),
+    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-4_SemiLight.woff) format("woff");
+  font-weight: 400;
+  font-display: swap;
+  font-style: normal;
+}
+@font-face {
+  font-family: TheMix;
+  src:
+    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-5_Plain.woff2) format("woff2"),
+    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-5_Plain.woff) format("woff");
+  font-weight: 500;
+  font-display: swap;
+  font-style: normal;
+}
+@font-face {
+  font-family: TheMix;
+  src:
+    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-6_SemiBold.woff2) format("woff2"),
+    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-6_SemiBold.woff) format("woff");
+  font-weight: 600;
+  font-display: swap;
+  font-style: normal;
+}
+@font-face {
+  font-family: TheMix;
+  src:
+    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-7_Bold.woff2) format("woff2"),
+    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-7_Bold.woff) format("woff");
+  font-weight: 700;
+  font-display: swap;
+  font-style: normal;
+}
+@font-face {
+  font-family: TheMix;
+  src:
+    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-8_ExtraBold.woff2) format("woff2"),
+    url(https://www.swr.de/assets/fonts/transfonter/TheMixC5-8_ExtraBold.woff) format("woff");
+  font-weight: 800;
+  font-display: swap;
+  font-style: normal;
+}

package/src/styles/scss/_colors.scss

@@ -0,0 +1,87 @@
+// swr main colors
+$petrol--1: #05556a;
+$eisblau--1: #00dbd7;
+$dunkelblau--1: #0a1e3c;
+$orange--1: #ff4e3c;
+$purpur--1: #5c267e;
+$rosarot--1: #ff003c;
+
+// impfungen
+$erst: #929292;
+$voll: rgb(0, 150, 160);
+$boost: #05556a;
+
+// min max
+$inzidenz--max: #05556a;
+$inzidenz--min: transparentize($inzidenz--max, 0.1);
+
+// scale with 10 options
+$inzidenz--10: rgb(4, 52, 58);
+$inzidenz--9: rgb(5, 70, 84);
+$inzidenz--8: rgb(5, 92, 112);
+$inzidenz--7: rgb(4, 128, 142);
+$inzidenz--6: rgb(1, 165, 172);
+$inzidenz--5: rgb(1, 203, 203);
+$inzidenz--4: rgb(103, 229, 228);
+$inzidenz--3: rgb(177, 245, 250);
+$inzidenz--2: rgb(203, 245, 250);
+$inzidenz--1: rgb(218, 241, 244);
+
+$inzidenz-1--8: rgb(4, 52, 58);
+$inzidenz-1--7: rgb(5, 69, 82);
+$inzidenz-1--6: rgb(5, 86, 107);
+$inzidenz-1--5: rgb(2, 122, 137);
+$inzidenz-1--4: rgb(0, 150, 160);
+$inzidenz-1--3: rgb(0, 218, 214);
+$inzidenz-1--2: rgb(194, 247, 254);
+$inzidenz-1--1: rgb(218, 241, 244);
+
+// Spritpreise
+$diesel-min: #f9ebb7;
+$diesel-max: #b7950d;
+$e5-min: #d0f0f1;
+$e5-max: #05556a;
+$e10-min: #ebd9e1;
+$e10-max: #7e2d41;
+
+// extra colors
+$hellgrau--1: #b8b8b8;
+$hellgrau--2: #929292;
+$hellgrau--3: #7b7b7b;
+$hellgrau--4: #494949;
+$schwarzgrau--1: #383838;
+$schwarzgrau--4: #161616;
+
+$schatten-grau: #eeeeee;
+$hintergrund-grau: #f5f5f5;
+
+body {
+  --petrol--1: #00677f;
+  --eisblau--1: #00dbd7;
+  --türkisblau--1: #007e8f;
+  --dunkelblau--1: #0a1e3c;
+  --orange--1: #ff4e3c;
+  --purpur--1: #5c267e;
+
+  --rosarot--1: #ff003c;
+  --pink--1: #ff0096;
+}
+
+body[stationid='swraktuell'] {
+  --swrdata-color-primary: var(--petrol--1);
+  --swrdata-color-highlight: var(--orange--1);
+}
+
+body[stationid='swr3'] {
+  --swrdata-color-primary: var(--rosarot--1);
+  --swrdata-color-highlight: var;
+}
+
+:export {
+  dieselMin: $diesel-min;
+  dieselMax: $diesel-max;
+  e5Min: $e5-min;
+  e5Max: $e5-max;
+  e10Min: $e10-min;
+  e10Max: $e10-max;
+}

package/src/styles/scss/_constants.scss

@@ -0,0 +1,43 @@
+$swr-inner-container-width-m: 490px;
+$swr-inner-container-width-l: 730px;
+$swr-inner-container-width-xl: 976px;
+$swr-padding-removal: 20px;
+$reanimation-width: 1440px;
+$reanimation-max-width: 1440px;
+$reanimation-max-text-width: 864px;
+$reanimation-ff-text: "SWR-VAR-Text";
+$reanimation-ff-sans: "SWR-VAR-Sans";
+$reanimation-ff-slab: "SWR-VAR-Slab";
+$transition-fast: 150ms;
+
+// Padding
+$reanimation-padding-s: 16px;
+$reanimation-padding-m: 32px;
+$reanimation-padding-l: 48px;
+$reanimation-padding-xl: 64px;
+$reanimation-padding-xxl: 96px;
+$reanimation-padding-xxxl: 112px;
+
+// Breakpoints
+$break-phone: 510px;
+$break-tablet: 992px;
+$break-desktop-small: 1200px;
+$break-desktop-large: 1400px;
+$break-desktop-xl: 1400px;
+
+// Colors
+$reanimation-black: #0c0c0c;
+$reanimation-violetblue: #1d0b40;
+$reanimation-violetblue-hover: #2d155d;
+$reanimation-violet: #5920c0;
+$reanimation-blue: #3053d9;
+$reanimation-warmgrey: #dbd5cd;
+$reanimation-activeorange: #ff3300;
+
+// Breakout radius
+$border-radius-box: 8px;
+$border-radius-input: 4px;
+
+// max container width
+$app-max-width: 650px !default;
+$input-height: 2.35em;

package/src/styles/scss/_functions.scss

@@ -0,0 +1,30 @@
+@mixin flex-center {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+@mixin respond-min($width) {
+  @media screen and (min-width: $width) {
+    @content;
+  }
+}
+
+@mixin respond-max($width) {
+  @media screen and (max-width: $width) {
+    @content;
+  }
+}
+
+@mixin hover {
+  @media (hover: hover) {
+    &:hover {
+      @content;
+    }
+  }
+  &:active {
+    // &:focus {
+    @content;
+  }
+}

package/src/styles/scss/_typography.scss

@@ -0,0 +1,49 @@
+@use 'sass:math';
+
+@font-face {
+  font-family: 'SWR-VAR-Sans';
+  font-weight: 400 600 700;
+  font-display: swap;
+  src:
+    local('SWR-VAR-Sans'),
+    url('https://www.swr.de/assets/fonts/swr_type/SWR_VAR_WEB/SWR-VAR-Sans.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'SWR-VAR-Text';
+  font-weight: 400 600 700;
+  font-display: swap;
+  src:
+    local('SWR-VAR-Text'),
+    url('https://www.swr.de/assets/fonts/swr_type/SWR_VAR_WEB/SWR-VAR-Text.woff2') format('woff2');
+}
+
+$sans: 'SWR-VAR-Sans', sans-serif;
+$text: 'SWR-VAR-Text', sans-serif;
+
+%caption {
+  font-size: 0.9rem;
+  line-height: 1;
+  letter-spacing: 0.0045em;
+}
+%caption-bold {
+  @extend %caption;
+  font-weight: 700;
+}
+%copy {
+  font-family: $text;
+  font-size: 1.1rem;
+  line-height: 1.45;
+  letter-spacing: 0.0045em;
+}
+%copy-bold {
+  @extend %copy;
+  font-weight: 700;
+}
+%h3 {
+  @extend %copy;
+  font-family: $sans;
+  font-size: 2.2rem;
+  line-height: 1.15;
+  font-weight: 600;
+  letter-spacing: 0.0025em;
+}

package/src/styles/scss/base.scss

@@ -0,0 +1,10 @@
+@import "constants";
+@import "typography";
+@import "functions";
+@import "colors";
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}

package/src/utils/formatDate.js

@@ -0,0 +1,17 @@
+import { timeFormat } from "d3-time-format"
+
+const formats = {
+  dayMonthYear: "%-d.%-m.%Y",
+  dayMonth: "%-d.%-m.",
+  dayMonthYearShort: "%-d.%-m.%y",
+  dayMonthHourMinute: "%-d.%-m., %-H.%M Uhr",
+  dayMonthYearHourMinute: "%-d.%-m.%Y, %-H.%M Uhr",
+  hourMinuteSophora: "%-H:%M Uhr",
+  hourMinute: "%-H.%M",
+}
+
+const formatDate = ({ date, format = "dayMonthYear" }) => {
+  return timeFormat(formats[format] || format)(new Date(date))
+}
+
+export default formatDate

package/src/utils/formatNumber.js

@@ -0,0 +1,13 @@
+import { formatLocale } from 'd3-format';
+
+export const defaultFormat = ',.1f';
+export const defaultLocale = {
+  decimal: ',',
+  thousands: ' ',
+  grouping: [3],
+  currency: ['', '€']
+};
+
+export default formatNumber = ({ number, format = defaultFormat, locale = defaultLocale }) => {
+  return formatLocale(locale).format(format)(number);
+};

package/src/utils/getColorsBetween.js

@@ -0,0 +1,25 @@
+import Color from 'color';
+import { range } from 'd3-array';
+
+/**
+ * Get color range of n colors
+ * @param {*} from
+ * @param {*} to
+ * @param {*} props
+ * @returns
+ */
+const getColorsBetween = (from, to, props = { n: 1, includeFromTo: false }) => {
+  const step = 1 / (props.n + 1);
+  const fromColor = Color(from);
+  const toColor = Color(to);
+  const colorsBetween = range(1, props.n + 1)
+    .map((i) => fromColor.mix(toColor, i * step))
+    .map((c) => c.hex().toString());
+  if (props.includeFromTo) {
+    return [from, ...colorsBetween, to];
+  } else {
+    return colorsBetween;
+  }
+};
+
+export default getColorsBetween;

package/src/utils/getComparisonDiffs.js

@@ -0,0 +1,9 @@
+const getComparisonDiffs = (a, b) => {
+  return {
+    diff: a - b,
+    diffRel: (a / b - 1) * 100,
+    diffTag: a > b ? 'higher' : a === b ? 'equal' : 'smaller'
+  };
+};
+
+export default getComparisonDiffs;

package/src/utils/getEmbedContext.js

@@ -0,0 +1,28 @@
+/**
+ * Get current url params or - if on production - params from embed url.
+ * @param {object} embed root dom element
+ * @returns {object} url params
+ */
+
+const getEmbedContext = (target) => {
+  let url;
+  if (
+    import.meta.env.DEV ||
+    window.location.origin === 'https://d.swr.de' ||
+    window.location.origin === 'https://static.datenhub.net' ||
+    window.location.href.includes('apidata.googleusercontent.com') ||
+    window.location.href.includes('storage.googleapis.com')
+  ) {
+    url = window.location.href;
+  } else {
+    const parent = target.parentNode || target.parentNode.parentNode;
+    url = parent.dataset.url;
+  }
+  const data = {};
+  for (const [key, value] of new URL(url).searchParams) {
+    data[key] = value;
+  }
+  return data;
+};
+
+export default getEmbedContext;

package/src/utils/getLaenderFromTopo.js

@@ -0,0 +1,35 @@
+import { merge } from 'topojson-client';
+import { range } from 'd3-array';
+
+/**
+ * Calc laender borders from kreis or gemeinden topojson
+ * @param {object} topojson
+ * @returns geojson
+ */
+const getLaenderFromTopo = (topo) => {
+  const states = [];
+  const stateIds = range(1, 17).map((n) => String(n).padStart(2, '0'));
+  const key = Object.keys(topo.objects)[0];
+
+  stateIds.forEach((id) => {
+    const state = {
+      geometry: merge(
+        topo,
+        topo.objects[key].geometries.filter(
+          (g) => g.properties.id && g.properties.id.startsWith(id)
+        )
+      ),
+      id,
+      type: 'Feature',
+      properties: { id }
+    };
+    states.push(state);
+  });
+
+  return {
+    type: 'FeatureCollection',
+    features: states
+  };
+};
+
+export default getLaenderFromTopo;

package/src/utils/getLaenderNicenameFromAgs.js

@@ -0,0 +1,27 @@
+const map = {
+  "01": "Schleswig-Holstein",
+  "02": "Hamburg",
+  "03": "Niedersachsen",
+  "04": "Bremen",
+  "05": "Nordrhein-Westfalen",
+  "06": "Hessen",
+  "07": "Rheinland-Pfalz",
+  "08": "Baden-Württemberg",
+  "09": "Bayern",
+  10: "Saarland",
+  11: "Berlin",
+  12: "Brandenburg",
+  13: "Mecklenburg-Vorpommern",
+  14: "Sachsen",
+  15: "Sachsen-Anhalt",
+  16: "Thüringen",
+}
+
+/**
+ * Get nicename for land ags
+ * @param {string} ags
+ * @returns {string} nicename
+ */
+const getLaenderNicenameFromAgs = (ags) => map[ags]
+
+export default getLaenderNicenameFromAgs

package/src/utils/isSvelteComponent.js

@@ -0,0 +1,13 @@
+import { SvelteComponent } from 'svelte';
+
+/**
+ * Check if given component is a svelte component.
+ * @param {*} component
+ * @returns {boolean}
+ */
+
+const isSvelteComponent = (component) => {
+  return SvelteComponent.isPrototypeOf(component) || typeof component === 'function';
+};
+
+export default isSvelteComponent;

package/src/utils/prepareSophoraModel.js

@@ -0,0 +1,31 @@
+const SELECTORS = {
+  showScrollUp: "a.back-to-top",
+  showPlayerbar: "#playerbar",
+  showSharing: ".sharing",
+  showAuthors: ".meta-top .meta-authors",
+  allowZoom: "meta[name=viewport]",
+}
+
+const IS_MOBILE = window.innerWidth < 768
+
+const prepareSophoraModel = (config) => {
+  console.log("###SWRDATA### updating dom with following config: ", config)
+  Object.entries(config).forEach(([k, v], _) => {
+    const element = document.querySelector(SELECTORS[k])
+    // show/hide elements
+    if (k.startsWith("show")) {
+      if ((v === "none" || (v === "mobile" && IS_MOBILE) || (v === "desktop" && !IS_MOBILE)) && element) {
+        element.style.display = "none"
+        element.style.visibility = "hidden"
+      }
+    }
+    // enable/disable zoom
+    if (k === "allowZoom") {
+      if (!v && element) {
+        element.setAttribute("content", "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0")
+      }
+    }
+  })
+}
+
+export default prepareSophoraModel

package/src/utils/scrollIntoViewWithOffset.js

@@ -0,0 +1,14 @@
+const OFFSET = -50;
+
+/**
+ * Scroll to top of given dom element with given offset.
+ * @param {object} ref to dom element
+ * @param {number} offset
+ */
+const scrollIntoViewWithOffset = (ref, offset) => {
+  const yOffset = offset !== 'undefined' ? offset : OFFSET;
+  const y = ref.getBoundingClientRect().top + window.pageYOffset + yOffset;
+  window.scrollTo({ top: y, behavior: 'smooth' });
+};
+
+export default scrollIntoViewWithOffset;

package/src/utils/topoToGeo.js

@@ -0,0 +1,13 @@
+import { feature } from 'topojson-client';
+
+/**
+ * Convert topojson to geojson
+ * @param {object} topojson
+ * @returns {object} geojson
+ */
+const topoToGeo = (topojson) => {
+  const key = Object.keys(topojson.objects)[0];
+  return feature(topojson, topojson.objects[key]);
+};
+
+export default topoToGeo;

package/svelte.config.js

@@ -0,0 +1,18 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
+		adapter: adapter()
+	}
+};
+
+export default config;

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

package/vite.config.ts

@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});