[BUG]: GlassSurface Tailwind JS variant crashes - TS generics in .jsx (useRef < HTMLDivElement > null)

[MauryaQbit]

Bug Description

The Tailwind JavaScript variant of GlassSurface crashes on render because it contains TypeScript generic syntax with spaces in a .jsx file. Every ref initialization is broken:

// src/tailwind/Components/GlassSurface/GlassSurface.jsx:50-55
const containerRef = useRef < HTMLDivElement > null;
const feImageRef = useRef < SVGFEImageElement > null;
const redChannelRef = useRef < SVGFEDisplacementMapElement > null;
const greenChannelRef = useRef < SVGFEDisplacementMapElement > null;
const blueChannelRef = useRef < SVGFEDisplacementMapElement > null;
const gaussianBlurRef = useRef < SVGFEGaussianBlurElement > null;

In plain JS this parses as comparison chain (useRef < HTMLDivElement) > null, and HTMLDivElement is not defined, so rendering throws ReferenceError: HTMLDivElement is not defined before any glass effect runs. All downstream uses (containerRef.current?.getBoundingClientRect(), feImageRef.current?.setAttribute, ResizeObserver) never get a real ref.

Healthy comparisons on the same commit:

• src/content/Components/GlassSurface/GlassSurface.jsx:34-39: useRef(null) x6 — correct
• src/ts-default/Components/GlassSurface/GlassSurface.tsx:74-79: useRef<HTMLDivElement>(null) — correct TS
• src/ts-tailwind/Components/GlassSurface/GlassSurface.tsx:90-95: correct TS

The broken code also ships in the registry artifact public/r/GlassSurface-JS-TW.json, so CLI installs (shadcn/jsrepo) get the crash too.

Steps to Reproduce

1. Use src/tailwind/Components/GlassSurface/GlassSurface.jsx (Tailwind JS variant).
2. Render minimally:

   <GlassSurface width={200} height={80}>hello</GlassSurface>

3. Observe crash: ReferenceError: HTMLDivElement is not defined.

Minimal logic repro without React/browser:

function useRef(v) { return { current: v }; }
const containerRef = useRef < HTMLDivElement > null;
// -> ReferenceError: HTMLDivElement is not defined

ESLint passes on this file, which is why it is easy to miss — it is a runtime scoping error, not a lint error.

Expected Behavior

Tailwind JS variant behaves like content JS: refs initialize to { current: null }, component mounts, SVG displacement filter attaches, no exception.

Actual Behavior

Render throws immediately on the first useRef < ... > null line. The Tailwind JS variant is completely unusable; the registry copy is equally broken.

Root Cause

Copy-paste from the TS variant into .jsx without stripping generics (and with spaces added: useRef < T > null instead of useRef<T>(null)). JS has no generics, so < HTMLDivElement > becomes comparison operators referencing undefined DOM-type globals.

Suggested Fix

In src/tailwind/Components/GlassSurface/GlassSurface.jsx:50-55 only:

-  const containerRef = useRef < HTMLDivElement > null;
-  const feImageRef = useRef < SVGFEImageElement > null;
-  const redChannelRef = useRef < SVGFEDisplacementMapElement > null;
-  const greenChannelRef = useRef < SVGFEDisplacementMapElement > null;
-  const blueChannelRef = useRef < SVGFEDisplacementMapElement > null;
-  const gaussianBlurRef = useRef < SVGFEGaussianBlurElement > null;
+  const containerRef = useRef(null);
+  const feImageRef = useRef(null);
+  const redChannelRef = useRef(null);
+  const greenChannelRef = useRef(null);
+  const blueChannelRef = useRef(null);
+  const gaussianBlurRef = useRef(null);

Then sync public/r/GlassSurface-JS-TW.json the same way (currently ships the identical broken lines).

Environment / Version

• Repo: DavidHDev/react-bits main @ 3a1c7f2 (verified 2026-09-13)
• Variant affected: Tailwind JS only (GlassSurface-JS-TW); Content JS, TS-Default, TS-Tailwind verified healthy
• Browsers: all

Validations

• I have checked other issues to see if my issue was already reported or addressed
• Checked: search GlassSurface in:title,body returns 5 closed items (fix(GlassSurface): drop the duplicated resize effect #1021 resize effect, [BUG]: components/glass-surface #755 responsive fallback proposal, [BUG]: components/glass-surface: SVG filter ID collision when using multiple instances #325 ID collision, [BUG]: glass-surface: double glass visibility #324 double visibility, plus unrelated Carousel fix(Carousel): make slide indicators keyboard accessible #978) — none cover TS-generics-in-JSX crash. Open issues are only [BUG]: ScrollVelocity Tailwind variants render 'undefined' class when parallaxClassName/scrollerClassName omitted #1078/fix(ScrollVelocity): default parallax/scroller class in tailwind variants #1079 (ScrollVelocity).