upgrade dev deps

package.json

@@ -47,27 +47,27 @@
   },
   "devDependencies": {
     "@changesets/changelog-git": "^0.2.0",
-    "@ryanatkn/belt": "^0.26.0",
+    "@ryanatkn/belt": "^0.26.1",
     "@ryanatkn/eslint-config": "^0.5.6",
-    "@ryanatkn/fuz_code": "^0.20.0",
-    "@ryanatkn/gro": "^0.146.0",
-    "@ryanatkn/moss": "^0.20.0",
+    "@ryanatkn/fuz_code": "^0.21.0",
+    "@ryanatkn/gro": "^0.146.2",
+    "@ryanatkn/moss": "^0.20.2",
     "@sveltejs/adapter-static": "^3.0.6",
-    "@sveltejs/kit": "^2.7.3",
+    "@sveltejs/kit": "^2.7.4",
     "@sveltejs/package": "^2.3.7",
     "@sveltejs/vite-plugin-svelte": "^4.0.0",
-    "@types/node": "^22.8.5",
+    "@types/node": "^22.8.6",
     "@types/prismjs": "^1.26.5",
-    "eslint": "^9.13.0",
+    "eslint": "^9.14.0",
     "eslint-plugin-svelte": "^2.46.0",
     "esm-env": "^1.1.4",
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.7",
     "prism-svelte": "^0.5.0",
     "prismjs": "^1.29.0",
-    "svelte": "^5.1.6",
+    "svelte": "^5.1.9",
     "svelte-check": "^4.0.5",
-    "tslib": "^2.8.0",
+    "tslib": "^2.8.1",
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.12.2",
     "uvu": "^0.5.6"

src/routes/+layout.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import '@ryanatkn/moss/style.css';
 	import '@ryanatkn/moss/theme.css';
+	import '@ryanatkn/fuz_code/theme.css';
 	import '$routes/moss.css';
-	import '@ryanatkn/fuz_code/prism.css';
 
 	import {parse_package_meta} from '@ryanatkn/gro/package_meta.js';
 	import type {Snippet} from 'svelte';

src/routes/Theme_Form.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	// TODO @many why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
-	import 'prismjs';
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 	import {swallow} from '@ryanatkn/belt/dom.js';
 	import {render_theme_style, type Theme} from '@ryanatkn/moss/theme.js';

src/routes/library/alert/+page.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	// TODO @many why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
-	import 'prismjs';
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
 	import {get_tome_by_name} from '$lib/tome.js';

src/routes/library/breadcrumb/+page.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	// TODO @many why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
-	import 'prismjs';
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
 	import {get_tome_by_name} from '$lib/tome.js';

src/routes/library/breadcrumb/Breadcrumb_Example.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	// TODO @many why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
-	import 'prismjs';
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 	import {base} from '$app/paths';
 

src/routes/library/card/+page.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
 	import {base} from '$app/paths';
-	// TODO @many why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
-	import 'prismjs';
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
 	import {get_tome_by_name} from '$lib/tome.js';

src/routes/library/contextmenu/Example_Basic.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	// TODO @many why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
-	import 'prismjs';
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
 	import Contextmenu_Root from '$lib/Contextmenu_Root.svelte';

src/routes/library/contextmenu/Example_Custom_Instance.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	// TODO @many why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
-	import 'prismjs';
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 	import {slide} from 'svelte/transition';
 

src/routes/library/contextmenu/Example_Default_Behaviors.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	// TODO @many why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
-	import 'prismjs';
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
 	import Contextmenu_Root from '$lib/Contextmenu_Root.svelte';

src/routes/library/contextmenu/Example_Full.svelte

@@ -2,8 +2,6 @@
 	import {flip} from 'svelte/animate';
 	import {crossfade} from 'svelte/transition';
 	import {quintOut} from 'svelte/easing';
-	// TODO @many why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
-	import 'prismjs';
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
 	import Contextmenu_Root from '$lib/Contextmenu_Root.svelte';

src/routes/library/details/+page.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	// TODO @many why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
-	import 'prismjs';
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
 	import Tome_Content from '$lib/Tome_Content.svelte';

src/routes/library/dialog/+page.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
 	import {slide} from 'svelte/transition';
-	// TODO @many why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
-	import 'prismjs';
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
 	import Alert from '$lib/Alert.svelte';

src/routes/library/hue_input/+page.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	// TODO @many why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
-	import 'prismjs';
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
 	import {get_tome_by_name} from '$lib/tome.js';

src/routes/library/logos/+page.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	// TODO @many why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
-	import 'prismjs';
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 	import {get_tome_by_name} from '$lib/tome.js';
 	import Tome_Content from '$lib/Tome_Content.svelte';

src/routes/library/package_detail/+page.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	// TODO @many why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
-	import 'prismjs';
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
 	import {get_tome_by_name} from '$lib/tome.js';

src/routes/library/package_summary/+page.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	// TODO @many why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
-	import 'prismjs';
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
 	import {get_tome_by_name} from '$lib/tome.js';

src/routes/library/pending_animation/+page.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	// TODO @many why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
-	import 'prismjs';
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
 	import {get_tome_by_name} from '$lib/tome.js';

src/routes/library/pending_button/+page.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	// TODO @many why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
-	import 'prismjs';
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
 	import {get_tome_by_name} from '$lib/tome.js';

src/routes/library/redirect/+page.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	// TODO @many why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
-	import 'prismjs';
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
 	import {get_tome_by_name} from '$lib/tome.js';

src/routes/library/teleport/+page.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	// TODO @many why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
-	import 'prismjs';
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
 	import {get_tome_by_name} from '$lib/tome.js';

src/routes/library/themed/+page.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	// TODO @many why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
-	import 'prismjs';
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 	import type {Theme} from '@ryanatkn/moss/theme.js';
 	import {default_themes} from '@ryanatkn/moss/themes.js';

src/routes/moss.css

@@ -68,7 +68,7 @@ a.chip {
 
 /* TODO other button variants? */
 /* TODO this is slightly strange that it doesn't use --icon_size */
-/* These are used as modifiers to buttons, and so they use `:where` so they cascade.  */
+/* These are used as modifiers to buttons, and so they use `:where` so they cascade. */
 .icon_button {
 	width: var(--input_height);
 	height: var(--input_height);
@@ -240,6 +240,20 @@ a.chip {
 	--button_fill: transparent;
 }
 
+.pre {
+	font-family: var(--font_mono);
+	color: var(--text_color, var(--text_color_3));
+	overflow: auto;
+	max-width: 100%;
+}
+.pre > code {
+	font-size: var(--size_sm); /* TODO @many use a var? maybe computed from generic `--size`? */
+	font-weight: 500;
+}
+.pre:not(.inline) > code {
+	display: block;
+}
+
 .px_lg {
 	padding-left: var(--space_lg);
 	padding-right: var(--space_lg);

src/routes/package.ts

@@ -39,27 +39,27 @@ export const package_json = {
 	peerDependenciesMeta: {'@ryanatkn/gro': {optional: true}},
 	devDependencies: {
 		'@changesets/changelog-git': '^0.2.0',
-		'@ryanatkn/belt': '^0.26.0',
+		'@ryanatkn/belt': '^0.26.1',
 		'@ryanatkn/eslint-config': '^0.5.6',
-		'@ryanatkn/fuz_code': '^0.20.0',
-		'@ryanatkn/gro': '^0.146.0',
-		'@ryanatkn/moss': '^0.20.0',
+		'@ryanatkn/fuz_code': '^0.21.0',
+		'@ryanatkn/gro': '^0.146.2',
+		'@ryanatkn/moss': '^0.20.2',
 		'@sveltejs/adapter-static': '^3.0.6',
-		'@sveltejs/kit': '^2.7.3',
+		'@sveltejs/kit': '^2.7.4',
 		'@sveltejs/package': '^2.3.7',
 		'@sveltejs/vite-plugin-svelte': '^4.0.0',
-		'@types/node': '^22.8.5',
+		'@types/node': '^22.8.6',
 		'@types/prismjs': '^1.26.5',
-		eslint: '^9.13.0',
+		eslint: '^9.14.0',
 		'eslint-plugin-svelte': '^2.46.0',
 		'esm-env': '^1.1.4',
 		prettier: '^3.3.3',
 		'prettier-plugin-svelte': '^3.2.7',
 		'prism-svelte': '^0.5.0',
 		prismjs: '^1.29.0',
-		svelte: '^5.1.6',
+		svelte: '^5.1.9',
 		'svelte-check': '^4.0.5',
-		tslib: '^2.8.0',
+		tslib: '^2.8.1',
 		typescript: '^5.6.3',
 		'typescript-eslint': '^8.12.2',
 		uvu: '^0.5.6',

vite.config.ts

@@ -1,7 +1,6 @@
 import {defineConfig} from 'vite';
 import {sveltekit} from '@sveltejs/kit/vite';
-import {remove_prism_css} from '@ryanatkn/fuz_code/remove_prism_css_vite_plugin.js';
 
 export default defineConfig({
-	plugins: [sveltekit(), remove_prism_css()],
+	plugins: [sveltekit()],
 });