@fuzdev/fuz_code 0.46.1 → 0.46.3

package/dist/CodeTextarea.svelte

@@ -96,54 +96,47 @@
 <style>
 	.code_textarea {
 		position: relative;
-		width: 100%;
 	}
 
-	/* metrics shared by both layers so characters align exactly */
-	.code_textarea_backdrop,
+	/* The textarea keeps fuz_css's native textarea styling — padding, border (with
+	   its hover/focus) and the page-inherited font size and tab size. Only the
+	   overlay deltas are set: transparent text/background so the backdrop shows
+	   through, a mono font, a visible caret (the text itself is transparent), and
+	   `line-height: inherit` to undo the `line-height: normal` fuz_css forces on
+	   inputs, so it tracks the page and matches the backdrop. */
 	.code_textarea textarea {
-		margin: 0;
-		box-sizing: border-box;
-		width: 100%;
-		padding: var(--space_xs3) var(--space_xs);
-		border: 1px solid transparent;
-		border-radius: var(--radius_xs, 2px);
-		font-family: var(--font_family_mono, monospace);
-		font-size: var(--font_size_sm, 0.9rem);
-		line-height: var(--line_height_md, 1.5);
-		letter-spacing: inherit;
-		tab-size: 2;
-		white-space: pre-wrap;
-		overflow-wrap: break-word;
-		overflow: auto;
-		/* reserve gutter on both layers so the textarea's scrollbar doesn't shrink
-		   its wrap width relative to the backdrop, which would drift highlights */
-		scrollbar-gutter: stable;
+		position: relative;
+		z-index: 1;
+		font-family: var(--font_family_mono);
+		line-height: inherit;
+		background-color: transparent;
+		color: transparent;
+		caret-color: var(--text_color);
 	}
 
-	/* the backdrop is taken out of flow so the in-flow textarea (its `rows`/resize)
-	   defines the box; `inset: 0` makes the backdrop fill and clip to that box,
-	   scrolled programmatically to match the textarea */
+	/* The backdrop `pre` holds the highlighted text under the transparent textarea.
+	   It's pulled out of flow so the textarea sizes the box; `inset: 0` fills and
+	   clips it to that box (scroll-synced in JS). It mirrors the textarea's fuz_css
+	   box — the same padding and border width — and overrides what fuz_css sets
+	   differently on a `pre`: `white-space: pre`, and the flow margin that would
+	   otherwise shrink this absolute box. */
 	.code_textarea_backdrop {
 		position: absolute;
 		inset: 0;
+		margin: 0;
+		padding: var(--space_sm) var(--space_lg); /* fuz_css's textarea padding */
+		border: var(--border_width) var(--border_style) transparent;
+		white-space: pre-wrap;
+		overflow: hidden;
 		pointer-events: none;
 		user-select: none;
-		overflow: hidden;
-		color: var(--text_color, currentColor);
 	}
 
+	/* both layers reserve a scrollbar gutter so the textarea's scrollbar can't
+	   shrink its wrap width relative to the non-scrolling backdrop and drift the
+	   highlights */
+	.code_textarea_backdrop,
 	.code_textarea textarea {
-		/* sits above the backdrop so the caret and selection are visible; the
-		   textarea is the only in-flow layer, so it sizes the container */
-		position: relative;
-		z-index: 1;
-		display: block;
-		background-color: transparent;
-		/* the textarea's own text is invisible; the backdrop shows through */
-		color: transparent;
-		caret-color: var(--text_color, currentColor);
-		border-color: var(--border_color, currentColor);
-		resize: vertical;
+		scrollbar-gutter: stable;
 	}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fuzdev/fuz_code",
-  "version": "0.46.1",
+  "version": "0.46.3",
   "description": "syntax styling utilities and components for TypeScript, Svelte, Markdown, and more",
   "glyph": "🎨",
   "logo": "logo.svg",
@@ -56,7 +56,7 @@
     "@changesets/changelog-git": "^0.2.1",
     "@fuzdev/blake3_wasm": "^0.1.1",
     "@fuzdev/fuz_css": "^0.63.2",
-    "@fuzdev/fuz_ui": "^0.205.0",
+    "@fuzdev/fuz_ui": "^0.205.1",
     "@fuzdev/fuz_util": "^0.65.1",
     "@fuzdev/gro": "^0.204.0",
     "@fuzdev/mdz": "^0.1.0",