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*

CLAUDE.md

@@ -6,6 +6,16 @@ A modernized fork of PrismJS optimized for runtime syntax highlighting.
 
 See [README.md](./README.md).
 
+## Gro commands
+
+```bash
+gro check     # typecheck, test, lint, format check (run before committing)
+gro typecheck # typecheck only (faster iteration)
+gro test      # run tests with vitest
+gro gen       # regenerate .gen files
+gro build     # build the package for production
+```
+
 ## Commands
 
 ```bash
@@ -48,8 +58,8 @@ The system uses regex-based tokenization inherited from PrismJS, maintaining com
 
 #### Themes
 
-- `src/lib/theme.css` - CSS classes for HTML mode (requires Fuz CSS or theme_variables.css)
-- `src/lib/theme_variables.css` - CSS variable definitions for non-Fuz CSS users
+- `src/lib/theme.css` - CSS classes for HTML mode (requires fuz_css or theme_variables.css)
+- `src/lib/theme_variables.css` - CSS variable definitions for non-fuz_css users
 
 ## How It Works
 
@@ -142,10 +152,12 @@ An experimental alternative component (`CodeHighlight.svelte`) is available that
 for browsers that implement it. This is not recommended for general use due to limited browser support.
 
 **Components:**
+
 - `src/lib/CodeHighlight.svelte` - Hybrid component supporting both HTML and range modes with auto-detection
 - `src/lib/highlight_manager.ts` - Manages CSS Custom Highlights per element
 
 **Theme:**
+
 - `src/lib/theme_highlight.css` - CSS with both `.token_*` classes and `::highlight()` pseudo-elements
 
 #### Range Highlighting Implementation
@@ -203,7 +215,7 @@ Results show relative performance (% of fastest) for each language and content s
 
 ## Color Variables
 
-Theme uses CSS variables from Fuz CSS:
+Theme uses CSS variables from fuz_css:
 
 - `--color_a` - Keywords, tags
 - `--color_b` - Strings, selectors

README.md

@@ -25,8 +25,8 @@ but there are two optional dependencies:
   based on [`prism-svelte`](https://github.com/pngwn/prism-svelte)
   and a [Svelte component](src/lib/Code.svelte) for convenient usage.
 - The [default theme](src/lib/theme.css) integrates
-  with my CSS library [Fuz CSS](https://github.com/fuzdev/fuz_css) for colors that adapt to the user's runtime `color-scheme` preference.
-  Non-Fuz CSS users should import [theme_variables.css](src/lib/theme_variables.css)
+  with my CSS library [fuz_css](https://github.com/fuzdev/fuz_css) for colors that adapt to the user's runtime `color-scheme` preference.
+  Non-fuz_css users should import [theme_variables.css](src/lib/theme_variables.css)
   or otherwise define those variables.
 
 Compared to [Shiki](https://github.com/shikijs/shiki),
@@ -79,14 +79,14 @@ import '@fuzdev/fuz_code/theme.css';
 ```
 
 The primary themes (currently just [one](src/lib/theme.css)) have a dependency
-on my CSS library [Fuz CSS](https://github.com/fuzdev/fuz_css)
+on my CSS library [fuz_css](https://github.com/fuzdev/fuz_css)
 for [color-scheme](https://css.fuz.dev/docs/themes) awareness.
-See the [Fuz CSS docs](https://css.fuz.dev/) for its usage.
+See the [fuz_css docs](https://css.fuz.dev/) for its usage.
 
-If you're not using Fuz CSS, import `theme_variables.css` alongside `theme.css`:
+If you're not using fuz_css, import `theme_variables.css` alongside `theme.css`:
 
 ```ts
-// Without Fuz CSS:
+// Without fuz_css:
 import '@fuzdev/fuz_code/theme.css';
 import '@fuzdev/fuz_code/theme_variables.css';
 ```
@@ -96,9 +96,9 @@ import '@fuzdev/fuz_code/theme_variables.css';
 - [@fuzdev/fuz_code/syntax_styler_global.js](src/lib/syntax_styler_global.ts) - pre-configured instance with all grammars
 - [@fuzdev/fuz_code/syntax_styler.js](src/lib/syntax_styler.ts) - base class for custom grammars
 - [@fuzdev/fuz_code/theme.css](src/lib/theme.css) -
-  default theme that depends on [Fuz CSS](https://github.com/fuzdev/fuz_css)
+  default theme that depends on [fuz_css](https://github.com/fuzdev/fuz_css)
 - [@fuzdev/fuz_code/theme_variables.css](src/lib/theme_variables.css) -
-  CSS variables for non-Fuz CSS users
+  CSS variables for non-fuz_css users
 - [@fuzdev/fuz_code/Code.svelte](src/lib/Code.svelte) -
   Svelte component for syntax highlighting with HTML generation
 

src/lib/Code.svelte

@@ -136,7 +136,7 @@
 >
 
 <style>
-	/* inline code inherits Fuz CSS defaults: pre-wrap, inline-block, baseline alignment */
+	/* inline code inherits fuz_css defaults: pre-wrap, inline-block, baseline alignment */
 
 	code:not(.inline) {
 		/* block code: traditional no-wrap, horizontal scroll */
@@ -148,7 +148,7 @@
 	}
 
 	code.wrap:not(.inline) {
-		/* unset what we set above, otherwise rely on Fuz CSS base styles */
+		/* unset what we set above, otherwise rely on fuz_css base styles */
 		white-space: pre-wrap;
 	}
 

src/lib/CodeHighlight.svelte

@@ -188,7 +188,7 @@
 >
 
 <style>
-	/* inline code inherits Fuz CSS defaults: pre-wrap, inline-block, baseline alignment */
+	/* inline code inherits fuz_css defaults: pre-wrap, inline-block, baseline alignment */
 
 	code:not(.inline) {
 		/* block code: traditional no-wrap, horizontal scroll */
@@ -200,7 +200,7 @@
 	}
 
 	code.wrap:not(.inline) {
-		/* unset what we set above, otherwise rely on Fuz CSS base styles */
+		/* unset what we set above, otherwise rely on fuz_css base styles */
 		white-space: pre-wrap;
 	}
 </style>

src/lib/theme_variables.css

@@ -1,7 +1,7 @@
 /*
 
-CSS variables for syntax highlighting when not using Fuz CSS.
-Import this alongside theme.css if you're not using Fuz CSS.
+CSS variables for syntax highlighting when not using fuz_css.
+Import this alongside theme.css if you're not using fuz_css.
 
 */
 

src/routes/+page.svelte

@@ -12,7 +12,7 @@
 	const library = library_context.get();
 </script>
 
-<main class="box width_100">
+<main class="box width:100%">
 	<div class="width_upto_md">
 		<section class="box" style:padding-top="var(--docs_primary_nav_height, 60px)">
 			<LibrarySummary {library} />

src/routes/CodeTome.svelte

@@ -41,15 +41,15 @@ import '@fuzdev/fuz_code/theme.css'; // add this"
 <section>
 	<h3>Dependencies</h3>
 	<p>
-		By default fuz_code depends on <a href="https://css.fuz.dev">Fuz CSS</a> to provide
+		By default fuz_code depends on <a href="https://css.fuz.dev">fuz_css</a> to provide
 		color-schema-aware color variables. If you're not using it, import
 		<code>theme_variables.css</code> or bring your own:
 	</p>
 	<Code
 		lang="ts"
 		content="// +layout.svelte
 import '@fuzdev/fuz_code/theme.css';
-import '@fuzdev/fuz_code/theme_variables.css'; // also this if not using Fuz CSS"
+import '@fuzdev/fuz_code/theme_variables.css'; // also this if not using fuz_css"
 	/>
 </section>
 <section>

src/routes/about/+page.svelte

@@ -15,7 +15,7 @@
 		</header>
 		<Breadcrumb>{library.package_json.glyph}</Breadcrumb>
 	</section>
-	<section class="box width_100 mb_lg">
+	<section class="box width:100% mb_lg">
 		<div class="panel p_md width_upto_md">
 			<LibraryDetail {library} />
 		</div>

src/routes/benchmark/+page.svelte

@@ -84,7 +84,7 @@
 <div class="box width_upto_lg mx_auto">
 	<h1 class="mt_xl5">benchmark</h1>
 	<p>
-		<code class="font_weight_400 font_size_sm">chromium --js-flags="--expose-gc"</code>
+		<code class="font-weight:400 font_size_sm">chromium --js-flags="--expose-gc"</code>
 	</p>
 
 	<section class="panel p_lg">

src/routes/samples/+page.svelte

@@ -15,7 +15,7 @@
 	</header>
 
 	<section class="mb_xl5">
-		<h2 class="text_align_center">HTML rendering (default)</h2>
+		<h2 class="text-align:center">HTML rendering (default)</h2>
 		<aside
 			class="panel p_md mb_xl3 width_upto_md mx_auto
 		"
@@ -28,7 +28,7 @@
 		</aside>
 		{#each Object.values(samples) as sample (sample.name)}
 			<div class="box mb_xl3">
-				<h3 class="panel p_md mb_xs width_100 box">{sample.lang}</h3>
+				<h3 class="panel p_md mb_xs width:100% box">{sample.lang}</h3>
 				<Code content={sample.content} lang={sample.lang} />
 			</div>
 		{/each}
@@ -37,7 +37,7 @@
 	<hr class="my_xl5" />
 
 	<section id="experimental">
-		<h2 class="text_align_center">CSS Custom Highlight API (experimental)</h2>
+		<h2 class="text-align:center">CSS Custom Highlight API (experimental)</h2>
 		<aside
 			class="panel p_md mb_xl3 width_upto_md mx_auto
 		"
@@ -66,7 +66,7 @@
 		{#each Object.values(samples) as sample (sample.name)}
 			<section>
 				<h2 class="panel p_md mb_0 box">{sample.lang}</h2>
-				<div class="display_flex justify_content_center flex_wrap_wrap gap_sm py_xl5">
+				<div class="display:flex justify-content:center flex-wrap:wrap gap_sm py_xl5">
 					<div class="constrain_width">
 						<h3>{sample.lang} html strings</h3>
 						<CodeHighlight content={sample.content} lang={sample.lang} mode="html" />

src/test/highlight_manager.test.ts

@@ -504,7 +504,7 @@ describe('error handling', () => {
 		const emoji = '🎨';
 		const element = create_code_element(`${emoji} = 1;`);
 
-		// JavaScript string length vs DOM position
+		// JS string length vs DOM position
 		assert.equal(emoji.length, 2); // UTF-16 code units
 
 		const tokens: SyntaxTokenStream = [