add largest MP structure mp-1204603 to demo

bump deps
refactor <MultiSelect> from bind:selected to bind:value

package.json

@@ -36,12 +36,12 @@
     "d3-scale-chromatic": "^3.0.0",
     "d3-shape": "^3.2.0",
     "highlight.js": "^11.8.0",
-    "svelte": "4.0.5",
-    "svelte-multiselect": "^10.0.0",
+    "svelte": "4.1.0",
+    "svelte-multiselect": "^10.1.0",
     "three": "^0.154.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.36.0",
+    "@playwright/test": "^1.36.1",
     "@sveltejs/adapter-static": "2.0.2",
     "@sveltejs/package": "^2.2.0",
     "@types/d3-array": "^3.0.5",
@@ -51,17 +51,17 @@
     "@types/d3-scale-chromatic": "^3.0.0",
     "@types/d3-shape": "^3.1.1",
     "@types/three": "^0.154.0",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.1.0",
+    "@typescript-eslint/parser": "^6.1.0",
     "@vitest/coverage-c8": "^0.33.0",
     "eslint": "^8.45.0",
     "eslint-plugin-svelte": "^2.32.2",
     "hastscript": "^7.2.0",
     "jsdom": "^22.1.0",
     "mdsvex": "^0.11.0",
     "mdsvexamples": "^0.3.3",
-    "prettier": "^2.8.8",
-    "prettier-plugin-svelte": "^2.10.1",
+    "prettier": "^3.0.0",
+    "prettier-plugin-svelte": "^3.0.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-katex-svelte": "^1.2.0",
     "rehype-slug": "^5.1.0",

readme.md

@@ -89,7 +89,7 @@ See `DispatchPayload` and `PeriodicTableEvents` in `src/lib/index.ts`
 - Big thanks to all sources of element images. See [`fetch-elem-images.ts`](https://github.com/janosh/elementari/blob/-/src/fetch-elem-images.ts) and [`static/elements`](https://github.com/janosh/elementari/tree/main/static/elements).
 - Thanks to [@ixxie](https://github.com/ixxie) ([shenhav.fyi](https://shenhav.fyi)) for a lot of great suggestions, UX ideas, helping me learn [`threlte`](https://threlte.xyz) and contributing the [`Bond.svelte`](https://github.com/janosh/elementari/blob/-/src/lib/structure/Bond.svelte) component.
 
-This project would not have been possible as a one-man side project without many fine open-source projects. 🙏 To name just the most important ones:
+This project would not have been possible as a one-person side project without many fine open-source projects. 🙏 To name just a few:
 
 |           3D graphics           |               2D graphics                |                     Docs                     |               Bundler               |               Testing                |
 | :-----------------------------: | :--------------------------------------: | :------------------------------------------: | :---------------------------------: | :----------------------------------: |

src/lib/plot/ColorScaleSelect.svelte

@@ -23,7 +23,7 @@
   bind:value
   bind:selected
   {placeholder}
-  {...$$props}
+  {...$$restProps}
   let:option
 >
   <ColorBar label={option} color_scale={option} {...cbar_props} {wrapper_style} />

src/routes/(demos)/molecule/+page.md

@@ -4,24 +4,23 @@
   import { molecules } from '$site'
   import Select from 'svelte-multiselect'
 
-  let name = [`water`]
-  let width
-  let height
-  $: molecule = molecules.find((struct) => struct.name === name[0]) || {}
+  let name = `benzene`
+  $: molecule = molecules.find((struct) => struct.name === name) || {}
 </script>
 
 <form>
   <label for="select">Select a molecule:</label>
   <Select
     id="select"
     options={molecules.map((mol) => mol.name)}
-    bind:selected={name}
+    selected={[name]}
+    bind:value={name}
     maxSelect={1}
     minSelect={1}
   />
 
   <details>
-    <summary>JSON for molecule {name[0]}</summary>
+    <summary>JSON for molecule {name}</summary>
     <pre>
     <code>
     {JSON.stringify(molecule, null, 2)}
@@ -31,7 +30,7 @@
 </form>
 
 <h3 align='center'>{name}</h3>
-<Structure structure={molecule} bind:width bind:height />
+<Structure structure={molecule} />
 
 <style>
   form {

src/routes/(demos)/structure/+page.md

@@ -14,25 +14,26 @@
   import { structures } from '$site'
   import Select from 'svelte-multiselect'
 
-  let mp_id = [`mp-756175`]
+  let mp_id = `mp-756175`
   let width
   let height
-  $: href = `https://materialsproject.org/materials/${mp_id[0]}`
-  $: structure = structures.find((struct) => struct.id === mp_id[0]) || {}
+  $: href = `https://materialsproject.org/materials/${mp_id}`
+  $: structure = structures.find((struct) => struct.id === mp_id) || {}
 </script>
 
 <form>
   <label for="select">Select a structure:</label>
   <Select
     id="select"
     options={structures.map((struct) => struct.id)}
-    bind:selected={mp_id}
+    selected={[mp_id]}
+    bind:value={mp_id}
     maxSelect={1}
     minSelect={1}
   />
 
   <details>
-    <summary>JSON for structure {mp_id[0]}</summary>
+    <summary>JSON for structure {mp_id}</summary>
     <pre>
     <code>
     {JSON.stringify(structure, null, 2)}

src/routes/[slug]/+page.svelte

@@ -67,12 +67,11 @@
     $heatmap_key ? el[$heatmap_key] : null
   )
   $: [y_label, y_unit] = $heatmap_key ? property_labels[$heatmap_key] ?? [] : []
-  let color_scale: string
-  let selected: string[]
+  let color_scale: string = `Viridis`
 
   export const snapshot = {
-    capture: () => ({ selected }),
-    restore: (values) => ({ selected } = values),
+    capture: () => ({ color_scale }),
+    restore: (values) => ({ color_scale } = values),
   }
 </script>
 
@@ -100,7 +99,7 @@
 
   <form>
     <PropertySelect minSelect={1} />
-    <ColorScaleSelect bind:value={color_scale} bind:selected minSelect={1} />
+    <ColorScaleSelect bind:value={color_scale} selected={[color_scale]} minSelect={1} />
   </form>
   <section class="viz">
     <ElementPhoto

src/routes/acknowledgements/+page.md

@@ -13,7 +13,7 @@
 - Thanks to [@kadinzhang](https://github.com/kadinzhang) and their [Periodicity project](https://ptable.netlify.app) [[code](https://github.com/kadinzhang/Periodicity)] for the idea to display animated Bohr model atoms and inset a scatter plot into the periodic table to visualize the periodic nature of elemental properties.
 - Thanks to [@ixxie](https://github.com/ixxie) ([shenhav.fyi](https://shenhav.fyi)) for a lot of great suggestions, UX ideas, helping me learn [`threlte`](https://threlte.xyz) and contributing the [`Bond.svelte`](https://github.com/janosh/elementari/blob/-/src/lib/structure/Bond.svelte) component.
 
-This project would not have been possible as a one-man side project without many fine open-source projects. 🙏 To name just the most important ones:
+This project would not have been possible as a one-person side project without many fine open-source projects. 🙏 To name just a few:
 
 |           3D graphics           |               2D graphics                |                     Docs                     |               Bundler               |               Testing                |
 | :-----------------------------: | :--------------------------------------: | :------------------------------------------: | :---------------------------------: | :----------------------------------: |

src/routes/mp-[slug]/+page.svelte

@@ -6,7 +6,8 @@
 
   export let data
 
-  let mp_id: string = `mp-${$page.params.slug}`
+  let input_value = `mp-${$page.params.slug}`
+  $: mp_id = input_value.trim().toLowerCase()
   $: href = `https://materialsproject.org/materials/${mp_id}`
   $: aws_url = `${mp_build_bucket}/summary/${mp_id}.json.gz`
 </script>
@@ -20,7 +21,7 @@
 
     <input
       placeholder="Enter MP material ID"
-      bind:value={mp_id}
+      bind:value={input_value}
       on:keydown={async (event) => {
         if (event.key === `Enter`) {
           goto(`/${mp_id}`)