diff --git a/package.json b/package.json
index de6e858..5823189 100644
--- a/package.json
+++ b/package.json
@@ -23,10 +23,10 @@
     "update-coverage": "vitest tests/unit --run --coverage && npx istanbul-badges-readme"
   },
   "dependencies": {
-    "@iconify/svelte": "^3.1.4",
-    "@sveltejs/kit": "^1.27.1",
-    "@threlte/core": "6.1.0",
-    "@threlte/extras": "7.5.0",
+    "@iconify/svelte": "^3.1.6",
+    "@sveltejs/kit": "^2.3.2",
+    "@threlte/core": "7.0.12",
+    "@threlte/extras": "8.1.2",
     "d3": "^7.8.5",
     "d3-array": "^3.2.4",
     "d3-color": "^3.1.0",
@@ -36,45 +36,46 @@
     "d3-scale-chromatic": "^3.0.0",
     "d3-shape": "^3.2.0",
     "highlight.js": "^11.9.0",
-    "svelte": "4.2.2",
+    "svelte": "4.2.8",
     "svelte-multiselect": "^10.2.0",
-    "three": "^0.158.0",
-    "svelte-zoo": "^0.4.9"
+    "svelte-zoo": "^0.4.9",
+    "three": "^0.160.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.39.0",
-    "@sveltejs/adapter-static": "2.0.3",
-    "@sveltejs/package": "^2.2.2",
-    "@types/d3-array": "^3.0.9",
-    "@types/d3-color": "^3.1.2",
-    "@types/d3-interpolate-path": "^2.0.2",
-    "@types/d3-scale": "^4.0.6",
-    "@types/d3-scale-chromatic": "^3.0.1",
-    "@types/d3-shape": "^3.1.4",
-    "@types/three": "^0.158.0",
-    "@typescript-eslint/eslint-plugin": "^6.9.0",
-    "@typescript-eslint/parser": "^6.9.0",
-    "@vitest/coverage-v8": "^0.34.6",
-    "eslint": "^8.52.0",
-    "eslint-plugin-svelte": "^2.34.0",
+    "@playwright/test": "^1.40.1",
+    "@sveltejs/adapter-static": "3.0.1",
+    "@sveltejs/package": "^2.2.5",
+    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "@types/d3-array": "^3.2.1",
+    "@types/d3-color": "^3.1.3",
+    "@types/d3-interpolate-path": "^2.0.3",
+    "@types/d3-scale": "^4.0.8",
+    "@types/d3-scale-chromatic": "^3.0.3",
+    "@types/d3-shape": "^3.1.6",
+    "@types/three": "^0.160.0",
+    "@typescript-eslint/eslint-plugin": "^6.18.1",
+    "@typescript-eslint/parser": "^6.18.1",
+    "@vitest/coverage-v8": "^1.2.0",
+    "eslint": "^8.56.0",
+    "eslint-plugin-svelte": "^2.35.1",
     "hastscript": "^8.0.0",
-    "jsdom": "^22.1.0",
+    "jsdom": "^23.2.0",
     "mdsvex": "^0.11.0",
     "mdsvexamples": "^0.4.1",
-    "prettier": "^3.0.3",
-    "prettier-plugin-svelte": "^3.0.3",
-    "rehype-autolink-headings": "^7.0.0",
+    "prettier": "^3.2.2",
+    "prettier-plugin-svelte": "^3.1.2",
+    "rehype-autolink-headings": "^7.1.0",
     "rehype-katex-svelte": "^1.2.0",
     "rehype-slug": "^6.0.0",
     "remark-math": "3.0.0",
-    "sharp": "^0.32.6",
-    "svelte-check": "^3.5.2",
-    "svelte-preprocess": "^5.0.4",
+    "sharp": "^0.33.2",
+    "svelte-check": "^3.6.3",
+    "svelte-preprocess": "^5.1.3",
     "svelte-toc": "^0.5.6",
-    "svelte2tsx": "^0.6.23",
-    "typescript": "5.2.2",
-    "vite": "^4.5.0",
-    "vitest": "^0.34.6"
+    "svelte2tsx": "^0.7.0",
+    "typescript": "5.3.3",
+    "vite": "^5.0.11",
+    "vitest": "^1.2.0"
   },
   "keywords": [
     "svelte",
diff --git a/src/emmet_pydantic_to_ts.py b/src/emmet_pydantic_to_ts.py
index 3a6f364..8461936 100644
--- a/src/emmet_pydantic_to_ts.py
+++ b/src/emmet_pydantic_to_ts.py
@@ -1,3 +1,5 @@
+"""Generate TypeScript definitions for all Emmet pydantic models."""
+
 import os
 import pkgutil
 import shutil
@@ -6,22 +8,25 @@
 import emmet.core as emmet
 from pydantic import BaseModel
 from pydantic2ts import generate_typescript_defs
-from tqdm import tqdm
+
+__author__ = "Janosh Riebesell"
+__date__ = "2024-07-11"
 
 # Set to keep track of written types
 written_types = {"Element"}
 written_files: set[str] = set()
 
 this_dir = os.path.dirname(__file__)
-shutil.rmtree(f"{this_dir}./types", ignore_errors=True)
+if input(f"Delete existing types in {this_dir}/types? [y/n] ").lower() == "y":
+    shutil.rmtree(f"{this_dir}/types", ignore_errors=True)
+os.makedirs(f"{this_dir}/types", exist_ok=True)
 
 modules = pkgutil.walk_packages(
     path=emmet.__path__, prefix=emmet.__name__ + ".", onerror=lambda: None
 )
 modules = list(modules)
 
-# Generate TypeScript definitions for each submodule
-for _, mod_name, _ in tqdm(modules, desc="pydantic2ts"):
+for idx, (mod_path, mod_name, is_pkg) in enumerate(modules):
     if mod_name.startswith("_"):
         continue
     output_file = mod_name.split(".")[-1]
@@ -33,6 +38,7 @@
             if issubclass(obj, BaseModel)
         }
         if not models:  # skip modules without Pydantic models
+            print(f"{mod_name}: no pydantic models found {is_pkg=} {mod_path=}")
             continue
 
         # Generate TypeScript definitions for all Pydantic models in the current module
diff --git a/src/lib/structure/Structure.svelte b/src/lib/structure/Structure.svelte
index 97ce265..c9c32e7 100644
--- a/src/lib/structure/Structure.svelte
+++ b/src/lib/structure/Structure.svelte
@@ -74,6 +74,9 @@
   export let bond_color: string = `#ffffff` // must be hex code for <input type='color'>
   export let style: string | null = null
   export let show_image_atoms: boolean = true
+  export let directional_light: number = 2
+  export let ambient_light: number = 1.2
+  export let show_full_controls: boolean = false
 
   // interactivity()
   $: $element_colors = element_color_schemes[color_scheme]
@@ -222,6 +225,11 @@
           <input type="checkbox" bind:checked={show_image_atoms} />
           image atoms
         </label>
+        <!-- add a toggle that's to show or hide the full currently visible set of controls. it should be off by default in which case only the controls the user is most likely to need are shown -->
+        <label>
+          <input type="checkbox" bind:checked={show_full_controls} />
+          full controls
+        </label>
         <label>
           <input type="checkbox" bind:checked={show_site_labels} />
           site labels
@@ -252,9 +260,8 @@
         </span>
       </label>
 
-      <hr />
-
-      {#if show_cell}
+      {#if show_full_controls && show_cell}
+        <hr />
         <label>
           Unit cell opacity
           <input type="number" min={0} max={1} step={0.05} bind:value={cell_opacity} />
@@ -313,35 +320,68 @@
 
       <hr />
 
-      <label>
-        Auto rotate speed
-        <input type="number" min={0} max={2} step={0.01} bind:value={auto_rotate} />
-        <input type="range" min={0} max={2} step={0.01} bind:value={auto_rotate} />
-      </label>
-      <label>
-        Zoom speed
-        <input type="number" min={0} max={2} step={0.01} bind:value={zoom_speed} />
-        <input type="range" min={0} max={2} step={0.01} bind:value={zoom_speed} />
-      </label>
-      <label>
-        <Tooltip text="pan by clicking and dragging while holding cmd, ctrl or shift">
-          Pan speed
-        </Tooltip>
-        <input type="number" min={0} max={2} step={0.01} bind:value={pan_speed} />
-        <input type="range" min={0} max={2} step={0.01} bind:value={pan_speed} />
-      </label>
-      <!-- rotation damping -->
-      <label>
-        <Tooltip text="damping factor for rotation">Rotation damping</Tooltip>
-        <input
-          type="number"
-          min={0}
-          max={0.3}
-          step={0.01}
-          bind:value={rotation_damping}
-        />
-        <input type="range" min={0} max={0.3} step={0.01} bind:value={rotation_damping} />
-      </label>
+      {#if show_full_controls}
+        <label>
+          Auto rotate speed
+          <input type="number" min={0} max={2} step={0.01} bind:value={auto_rotate} />
+          <input type="range" min={0} max={2} step={0.01} bind:value={auto_rotate} />
+        </label>
+        <label>
+          Zoom speed
+          <input type="number" min={0} max={2} step={0.01} bind:value={zoom_speed} />
+          <input type="range" min={0} max={2} step={0.01} bind:value={zoom_speed} />
+        </label>
+        <label>
+          <Tooltip text="pan by clicking and dragging while holding cmd, ctrl or shift">
+            Pan speed
+          </Tooltip>
+          <input type="number" min={0} max={2} step={0.01} bind:value={pan_speed} />
+          <input type="range" min={0} max={2} step={0.01} bind:value={pan_speed} />
+        </label>
+        <!-- directional light intensity -->
+        <label>
+          <Tooltip text="intensity of the directional light">Directional light</Tooltip>
+          <input
+            type="number"
+            min={0}
+            max={4}
+            step={0.01}
+            bind:value={directional_light}
+          />
+          <input
+            type="range"
+            min={0}
+            max={4}
+            step={0.01}
+            bind:value={directional_light}
+          />
+        </label>
+        <!-- ambient light intensity -->
+        <label>
+          <Tooltip text="intensity of the ambient light">Ambient light</Tooltip>
+          <input type="number" min={0} max={2} step={0.01} bind:value={ambient_light} />
+          <input type="range" min={0} max={2} step={0.01} bind:value={ambient_light} />
+        </label>
+        <!-- rotation damping -->
+        <label>
+          <Tooltip text="damping factor for rotation">Rotation damping</Tooltip>
+          <input
+            type="number"
+            min={0}
+            max={0.3}
+            step={0.01}
+            bind:value={rotation_damping}
+          />
+          <input
+            type="range"
+            min={0}
+            max={0.3}
+            step={0.01}
+            bind:value={rotation_damping}
+          />
+        </label>
+      {/if}
+
       <!-- color scheme -->
       <label>
         Color scheme
@@ -382,6 +422,8 @@
         bind:same_size_atoms
         {bonding_strategy}
         {rotation_damping}
+        {directional_light}
+        {ambient_light}
       >
         <slot slot="atom-label" name="atom-label" let:elem>
           <!-- let:elem needed to fix false positive eslint no-undef -->
@@ -407,7 +449,7 @@
 <style>
   .structure {
     position: relative;
-    container-type: inline-size;
+    container-type: size;
     height: var(--struct-height, 500px);
     width: var(--struct-width);
     max-width: var(--struct-max-width);
@@ -452,7 +494,8 @@
     opacity: 0;
     gap: var(--struct-controls-gap, 4pt);
     text-align: var(--struct-controls-text-align, left);
-    transition: visibility var(--struct-controls-transition-duration),
+    transition:
+      visibility var(--struct-controls-transition-duration),
       opacity var(--struct-controls-transition-duration);
     box-sizing: border-box;
     top: var(--struct-controls-top, 30pt);
@@ -463,6 +506,8 @@
     width: var(--struct-controls-width, 20em);
     max-width: var(--struct-controls-max-width, 90cqw);
     color: var(--struct-controls-text-color);
+    overflow: auto;
+    max-height: var(--struct-controls-max-height, calc(100cqh - 3em));
   }
   dialog.controls hr {
     border: none;
diff --git a/src/lib/structure/StructureScene.svelte b/src/lib/structure/StructureScene.svelte
index fb45a44..cc7cf8b 100644
--- a/src/lib/structure/StructureScene.svelte
+++ b/src/lib/structure/StructureScene.svelte
@@ -63,6 +63,8 @@
   }
   // field of view of the camera. 50 is THREE.js default
   export let fov: number = 50
+  export let ambient_light: number = 1.2
+  export let directional_light: number = 2
 
   $: hovered_site = structure?.sites?.[hovered_idx ?? -1] ?? null
   $: active_site = structure?.sites?.[active_idx ?? -1] ?? null
@@ -96,8 +98,8 @@
   />
 </T.PerspectiveCamera>
 
-<T.DirectionalLight position={[3, 10, 10]} intensity={1} />
-<T.AmbientLight intensity={0.5} />
+<T.DirectionalLight position={[3, 10, 10]} intensity={directional_light} />
+<T.AmbientLight intensity={ambient_light} />
 
 {#if show_atoms && structure?.sites}
   <InstancedMesh>