upgrade fuz_css

.gitignore

@@ -1,14 +1,15 @@
 # Deps
-node_modules
+node_modules/
 
 # Output
-/.svelte-kit
-/build
-/dist
-/dist_*
-/target
-/.gro
-/.zzz
+.svelte-kit/
+build/
+dist/
+dist_*/
+target/
+.gro/
+.fuz/
+.zzz/
 
 # Env
 .env*

package.json

@@ -37,17 +37,19 @@
   },
   "devDependencies": {
     "@changesets/changelog-git": "^0.2.1",
-    "@fuzdev/fuz_code": "^0.38.0",
-    "@fuzdev/fuz_css": "^0.42.1",
-    "@fuzdev/fuz_ui": "^0.177.0",
+    "@fuzdev/fuz_code": "^0.40.0",
+    "@fuzdev/fuz_css": "^0.44.1",
+    "@fuzdev/fuz_ui": "^0.179.0",
+    "@fuzdev/fuz_util": "^0.45.3",
     "@ryanatkn/eslint-config": "^0.9.0",
-    "@ryanatkn/gro": "^0.184.0",
+    "@ryanatkn/gro": "^0.186.0",
     "@sveltejs/adapter-node": "^5.4.0",
     "@sveltejs/adapter-static": "^3.0.10",
     "@sveltejs/kit": "^2.49.1",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@types/node": "^24.10.1",
+    "@webref/css": "^8.2.0",
     "eslint": "^9.39.1",
     "eslint-plugin-svelte": "^3.13.1",
     "jsdom": "^27.2.0",
@@ -64,7 +66,6 @@
   },
   "dependencies": {
     "@anthropic-ai/sdk": "^0.71.2",
-    "@fuzdev/fuz_util": "^0.45.1",
     "@google/generative-ai": "^0.24.1",
     "@hono/node-server": "^1.19.6",
     "@hono/node-ws": "^1.2.0",

src/lib/ActionDetail.svelte

@@ -55,11 +55,11 @@
 	</table>
 </div>
 
-<div class="display_flex gap_md mb_sm">
+<div class="display:flex gap_md mb_sm">
 	<CopyToClipboard text={JSON.stringify(action.json, null, 2)} class="plain" />
 </div>
 <pre
-	class="font_family_mono font_size_sm white_space_pre_wrap word_break_break_word p_sm width_100">{JSON.stringify(
+	class="font_family_mono font_size_sm white-space:pre-wrap word-break:break-word p_sm width:100%">{JSON.stringify(
 		action.json,
 		null,
 		2,

src/lib/ActionList.svelte

@@ -32,7 +32,7 @@
 	const items = $derived(actions.items.values.slice(0, limit));
 </script>
 
-<div {...attrs} class="flex_1 unstyled overflow_auto scrollbar_width_thin {attrs?.class}">
+<div {...attrs} class="flex:1 unstyled overflow:auto scrollbar-width:thin {attrs?.class}">
 	<!-- TODO @many more efficient array? maybe add `all` back to the base IndexedCollection? -->
 	<SortableList
 		{items}
@@ -53,7 +53,7 @@
 	</SortableList>
 
 	{#if total_actions > limit}
-		<div class="p_sm text_align_center">
+		<div class="p_sm text-align:center">
 			<small>Showing {limit} of {total_actions} actions</small>
 		</div>
 	{/if}

src/lib/ActionListitem.svelte

@@ -22,18 +22,18 @@
 <ActionContextmenu {action}>
 	<button
 		type="button"
-		class="width_100 text_align_left justify_content_start py_xs px_md border_radius_0 border_style_none box_shadow_none"
+		class="width:100% text-align:left justify-content:start py_xs px_md border_radius_0 border-style:none box_shadow_none"
 		class:selected
 		class:color_c={action.has_error}
 		onclick={() => {
 			onselect?.(action);
 		}}
 		transition:slide
 	>
-		<div class="font_weight_400 display_flex align_items_center gap_xs width_100">
+		<div class="font-weight:400 display:flex align-items:center gap_xs width:100%">
 			<Glyph glyph={get_glyph_for_action_method(action.method)} />
 			<Glyph glyph={get_glyph_for_action_kind(action.kind)} />
-			<span class="font_family_mono flex_1 ellipsis">{action.method}</span>
+			<span class="font_family_mono flex:1 ellipsis">{action.method}</span>
 			{#if action.pending}
 				<PendingAnimation inline />
 			{:else if action.has_error}

src/lib/CapabilitiesView.svelte

@@ -14,7 +14,7 @@
 	// TODO add ping button that forces websocket transport
 </script>
 
-<div class="width_upto_md">
+<div class="width_atmost_md">
 	<section>
 		<section class="mb_xl12">
 			<h2><Glyph glyph={GLYPH_BACKEND} /> backend</h2>

src/lib/CapabilityBackend.svelte

@@ -19,18 +19,18 @@
 	});
 </script>
 
-<div class="display_flex flex_direction_column">
-	<div class="display_flex">
+<div class="display:flex flex-direction:column">
+	<div class="display:flex">
 		<div
-			class="chip px_xl plain font_weight_400 width_upto_sm"
+			class="chip px_xl plain font-weight:400 width_atmost_sm"
 			style:padding="0 var(--space_xl) !important"
 			style:font-weight="400 !important"
 			class:color_b={capabilities.backend.status === 'success'}
 			class:color_c={capabilities.backend.status === 'failure'}
 			class:color_d={capabilities.backend.status === 'pending'}
 			class:color_e={capabilities.backend.status === 'initial'}
 		>
-			<div class="column justify_content_center gap_xs" style:min-height="80px">
+			<div class="column justify-content:center gap_xs" style:min-height="80px">
 				<div class="font_size_xl">
 					backend {capabilities.backend.status === 'success'
 						? 'available'