Initial commit

src/components/shared/FillWidthText/FillWidthText.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import React, { useMemo } from "react";
+import useFillWidthText from "./useFillWidthText";
+import { cls } from "@/lib/utils";
+
+type TextElement = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
+
+// Lowercase characters that have descenders (extend below the baseline)
+// Uppercase versions (G, J, P, Q, Y) don't have descenders
+const DESCENDER_CHARS = /[gjpqy]/;
+
+// Utility function to check if text has descender characters
+export const hasDescenders = (text: string): boolean => DESCENDER_CHARS.test(text);
+
+interface FillWidthTextProps {
+    children: string;
+    as?: TextElement;
+    className?: string;
+}
+
+const FillWidthText = ({
+    children,
+    as: Component = "h1",
+    className = "",
+}: FillWidthTextProps) => {
+    const { containerRef, textRef, fontSize, isReady } = useFillWidthText(children);
+
+    // Use tighter line height if text has no descender characters
+    const lineHeight = useMemo(() => {
+        return DESCENDER_CHARS.test(children) ? 1.2 : 0.8;
+    }, [children]);
+
+    return (
+        <div
+            ref={containerRef}
+            className="w-full min-w-0 flex-1"
+        >
+            <Component
+                ref={textRef as React.RefObject<HTMLHeadingElement & HTMLParagraphElement & HTMLSpanElement>}
+                className={cls(
+                    "whitespace-nowrap transition-opacity duration-150",
+                    isReady ? "opacity-100" : "opacity-0",
+                    className
+                )}
+                style={{
+                    fontSize: `${fontSize}px`,
+                    lineHeight,
+                }}
+            >
+                {children}
+            </Component>
+        </div>
+    );
+};
+
+FillWidthText.displayName = "FillWidthText";
+
+export default React.memo(FillWidthText);

src/components/shared/FillWidthText/useFillWidthText.ts

@@ -0,0 +1,109 @@
+'use client';
+
+import { useRef, useEffect, useState, useCallback } from 'react';
+
+interface UseFillWidthTextReturn {
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    textRef: React.RefObject<HTMLElement | null>;
+    fontSize: number;
+    isReady: boolean;
+}
+
+const BASE_FONT_SIZE = 100;
+
+// Shared canvas for text measurement (no DOM manipulation needed)
+let measureCanvas: HTMLCanvasElement | null = null;
+
+function getMeasureCanvas(): CanvasRenderingContext2D | null {
+    if (typeof document === 'undefined') return null;
+    if (!measureCanvas) {
+        measureCanvas = document.createElement('canvas');
+    }
+    return measureCanvas.getContext('2d');
+}
+
+export default function useFillWidthText(text: string): UseFillWidthTextReturn {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const textRef = useRef<HTMLElement>(null);
+    const [fontSize, setFontSize] = useState(BASE_FONT_SIZE);
+    const [isReady, setIsReady] = useState(false);
+
+    // Cache for computed styles
+    const stylesRef = useRef<{ fontFamily: string; fontWeight: string } | null>(null);
+
+    const calculateFontSize = useCallback(() => {
+        if (!containerRef.current || !textRef.current) return;
+
+        const container = containerRef.current;
+        const textElement = textRef.current;
+
+        const containerWidth = container.offsetWidth;
+        if (containerWidth === 0) return;
+
+        // Cache styles on first calculation
+        if (!stylesRef.current) {
+            const computed = getComputedStyle(textElement);
+            stylesRef.current = {
+                fontFamily: computed.fontFamily,
+                fontWeight: computed.fontWeight,
+            };
+        }
+
+        const ctx = getMeasureCanvas();
+        if (!ctx) return;
+
+        // Measure text using canvas (fast, no reflow)
+        const { fontFamily, fontWeight } = stylesRef.current;
+        ctx.font = `${fontWeight} ${BASE_FONT_SIZE}px ${fontFamily}`;
+        const textWidth = ctx.measureText(text).width;
+
+        if (textWidth === 0) return;
+
+        const newFontSize = (containerWidth / textWidth) * BASE_FONT_SIZE;
+
+        setFontSize(newFontSize);
+        setIsReady(true);
+    }, [text]);
+
+    // Initial calculation
+    useEffect(() => {
+        const rafId = requestAnimationFrame(() => {
+            calculateFontSize();
+        });
+        return () => cancelAnimationFrame(rafId);
+    }, [text, calculateFontSize]);
+
+    // Debounced resize observer
+    useEffect(() => {
+        if (!containerRef.current) return;
+
+        let rafId: number | null = null;
+
+        const resizeObserver = new ResizeObserver(() => {
+            // Debounce using RAF - only calculate once per frame
+            if (rafId) cancelAnimationFrame(rafId);
+            rafId = requestAnimationFrame(() => {
+                calculateFontSize();
+            });
+        });
+
+        resizeObserver.observe(containerRef.current);
+
+        return () => {
+            if (rafId) cancelAnimationFrame(rafId);
+            resizeObserver.disconnect();
+        };
+    }, [calculateFontSize]);
+
+    // Reset style cache if text changes (might have different element)
+    useEffect(() => {
+        stylesRef.current = null;
+    }, [text]);
+
+    return {
+        containerRef,
+        textRef,
+        fontSize,
+        isReady
+    };
+}