blodemd 0.0.11 → 0.0.13

package/docs/app/globals.css

@@ -223,6 +223,11 @@
     font-synthesis: none;
     font-kerning: normal;
     font-variant-ligatures: common-ligatures;
+    font-feature-settings: "ss01", "cv11", "calt";
+  }
+
+  :is([data-slot="kbd"], code, pre, .font-mono) {
+    font-variant-numeric: tabular-nums;
   }
 
   [data-slot="layout"] {
@@ -284,6 +289,15 @@
   @apply 3xl:max-w-screen-2xl mx-auto max-w-[1400px] px-4 lg:px-8;
 }
 
+@utility h-display {
+  line-height: 0.95;
+  letter-spacing: -0.02em;
+}
+
+@utility measure {
+  max-width: 65ch;
+}
+
 @utility no-scrollbar {
   -ms-overflow-style: none;
   scrollbar-width: none;
@@ -397,10 +411,10 @@
   [data-line],
   .shiki .line {
     display: inline-block;
-    width: 100%;
     min-height: calc(var(--spacing) * 1);
     padding-top: calc(var(--spacing) * 0.5);
     padding-bottom: calc(var(--spacing) * 0.5);
+    padding-right: calc(var(--spacing) * 10);
   }
 
   [data-line] span,

package/docs/components/api/api-playground.tsx

@@ -397,7 +397,7 @@ export const ApiPlayground = ({
           <Field>
             <FieldLabel htmlFor="api-server">Server</FieldLabel>
             <select
-              className="flex h-[var(--field-height)] w-full rounded-[var(--field-radius)] border border-input bg-card px-[var(--field-padding-x)] py-[var(--field-padding-y)] font-sans text-base text-foreground shadow-input transition-colors hover:border-input-hover focus:border-ring focus:outline-hidden focus:ring-2 focus:ring-ring/15 focus:ring-offset-1 focus:ring-offset-background"
+              className="flex h-[var(--field-height)] w-full rounded-[var(--field-radius)] border border-input bg-card px-[var(--field-padding-x)] py-[var(--field-padding-y)] font-sans text-base text-foreground transition-colors hover:border-input-hover focus:border-ring focus:outline-hidden focus:ring-2 focus:ring-ring/15 focus:ring-offset-1 focus:ring-offset-background"
               id="api-server"
               onChange={handleServerChange}
               value={serverIndex}
@@ -440,7 +440,7 @@ export const ApiPlayground = ({
           <Field>
             <FieldLabel htmlFor="request-body">Request body</FieldLabel>
             <textarea
-              className="flex w-full rounded-[var(--field-radius)] border border-input bg-card px-[var(--field-padding-x)] py-[var(--field-padding-y)] font-sans text-base text-foreground shadow-input transition-colors placeholder:text-placeholder-foreground hover:border-input-hover focus:border-ring focus:outline-hidden focus:ring-2 focus:ring-ring/15 focus:ring-offset-1 focus:ring-offset-background"
+              className="flex w-full rounded-[var(--field-radius)] border border-input bg-card px-[var(--field-padding-x)] py-[var(--field-padding-y)] font-sans text-base text-foreground transition-colors placeholder:text-placeholder-foreground hover:border-input-hover focus:border-ring focus:outline-hidden focus:ring-2 focus:ring-ring/15 focus:ring-offset-1 focus:ring-offset-background"
               id="request-body"
               onChange={handleBodyChange}
               rows={6}

package/docs/components/docs/copy-page-menu.tsx

@@ -2,14 +2,14 @@
 
 import { slugify } from "@repo/common";
 import {
-  Checkmark1Icon,
+  CheckIcon,
   ChevronDownSmallIcon,
   ClaudeaiIcon,
   CopySimpleIcon,
   OpenaiIcon,
 } from "blode-icons-react";
 import type React from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import {
   Popover,
@@ -25,6 +25,8 @@ interface CopyPageMenuProps {
 
 type CopyStatus = "copied" | "error" | "idle";
 
+const MARKDOWN_ACCEPT = "text/markdown,text/plain;q=0.9,*/*;q=0.8";
+
 const LEADING_H1_REGEX = /^#\s+([^\r\n]+)(?:\r?\n(?:\r?\n)?)?/;
 
 const stripMatchingLeadingH1 = (source: string, title: string) => {
@@ -80,7 +82,7 @@ const getCopyDescription = (copyStatus: CopyStatus) => {
 };
 
 const getCopyIcon = (copyStatus: CopyStatus) =>
-  copyStatus === "copied" ? Checkmark1Icon : CopySimpleIcon;
+  copyStatus === "copied" ? CheckIcon : CopySimpleIcon;
 
 const MenuItem = ({
   children,
@@ -141,7 +143,15 @@ export const CopyPageMenu = ({
   const [copyStatus, setCopyStatus] = useState<CopyStatus>("idle");
   const [fetchedContent, setFetchedContent] = useState<string | null>(null);
   const [menuOpen, setMenuOpen] = useState(false);
-  const [pageUrl, setPageUrl] = useState("");
+
+  const pageUrl = useMemo(
+    () =>
+      typeof window === "undefined"
+        ? ""
+        : new URL(contentUrl ?? window.location.href, window.location.href)
+            .href,
+    [contentUrl]
+  );
 
   useEffect(
     () => () => {
@@ -153,10 +163,31 @@ export const CopyPageMenu = ({
   );
 
   useEffect(() => {
-    setPageUrl(
-      new URL(contentUrl ?? window.location.href, window.location.href).href
-    );
-  }, [contentUrl]);
+    if (content || !contentUrl) {
+      return;
+    }
+
+    const controller = new AbortController();
+
+    const prefetch = async () => {
+      try {
+        const res = await fetch(contentUrl, {
+          headers: { accept: MARKDOWN_ACCEPT },
+          signal: controller.signal,
+        });
+        const text = res.ok ? await res.text() : null;
+        if (text) {
+          setFetchedContent(text);
+        }
+      } catch {
+        // Ignore prefetch failures — the copy handler retries on demand
+      }
+    };
+
+    prefetch();
+
+    return () => controller.abort();
+  }, [content, contentUrl]);
 
   const closeMenu = useCallback(() => {
     setMenuOpen(false);
@@ -188,9 +219,7 @@ export const CopyPageMenu = ({
     }
 
     const response = await fetch(contentUrl, {
-      headers: {
-        accept: "text/markdown,text/plain;q=0.9,*/*;q=0.8",
-      },
+      headers: { accept: MARKDOWN_ACCEPT },
     });
     if (!response.ok) {
       throw new Error(`Failed to load page markdown: ${response.status}`);
@@ -203,25 +232,24 @@ export const CopyPageMenu = ({
 
   const handleCopy = useCallback(async () => {
     try {
-      // iOS Safari loses the user gesture context after any async gap (e.g. a
-      // fetch). To keep clipboard access working, we call clipboard.write()
-      // synchronously within the gesture and pass a Promise to ClipboardItem
-      // so the content resolves later while the gesture context stays alive.
-      const blobPromise = (async () => {
+      // Use ClipboardItem with a promise-based blob so the clipboard "slot"
+      // is claimed synchronously during the tap gesture.  iOS Safari revokes
+      // user-activation if an async boundary (e.g. a network fetch) sits
+      // between the tap and the clipboard call, so the old writeText path
+      // fails when tapped before the pre-fetch finishes.
+      if (typeof ClipboardItem !== "undefined" && navigator.clipboard.write) {
+        const blobPromise = (async () => {
+          const text = await getContent();
+          const markdown = formatMarkdownForCopy(text, title);
+          return new Blob([markdown], { type: "text/plain" });
+        })();
+        const item = new ClipboardItem({ "text/plain": blobPromise });
+        await navigator.clipboard.write([item]);
+      } else {
         const nextContent = await getContent();
         const markdown = formatMarkdownForCopy(nextContent, title);
-        return new Blob([markdown], { type: "text/plain" });
-      })();
-
-      if (typeof ClipboardItem === "undefined") {
-        const blob = await blobPromise;
-        await navigator.clipboard.writeText(await blob.text());
-      } else {
-        await navigator.clipboard.write([
-          new ClipboardItem({ "text/plain": blobPromise }),
-        ]);
+        await navigator.clipboard.writeText(markdown);
       }
-
       setTemporaryCopyStatus("copied");
       closeMenu();
     } catch {

package/docs/components/docs/doc-header.tsx

@@ -127,7 +127,7 @@ export const DocHeader = ({
   return (
     <header className="sticky top-0 z-50 w-full bg-background">
       <div className="container-wrapper px-4 lg:px-8">
-        <div className="flex h-(--header-height) items-center gap-2">
+        <div className="flex h-(--header-height) items-center">
           <MobileNav
             activeTabIndex={activeTabIndex}
             basePath={basePath}

package/docs/components/docs/doc-shell.tsx

@@ -170,101 +170,102 @@ export const DocShell = ({
         <main id="main-content">{content}</main>
       ) : (
         <main
-          className={cn(
-            "flex scroll-mt-24 items-stretch gap-1 px-4 lg:px-8",
-            !showSidebar && "mx-auto max-w-[960px]"
-          )}
+          className="flex scroll-mt-24 items-stretch pb-8 text-[1.05rem] sm:text-[15px] xl:w-full"
           id="main-content"
+          role="application"
+          style={{ "--sidebar-width": "14rem" } as React.CSSProperties}
         >
-          <div
-            className={cn(
-              "mx-auto flex w-full min-w-0 flex-1 flex-col gap-6 py-6 text-neutral-800 lg:py-8 dark:text-neutral-300",
-              pageMode === "wide" ? "max-w-[60rem]" : "max-w-[40rem]"
-            )}
-          >
-            <div className="flex flex-col gap-2">
-              <Breadcrumbs basePath={basePath} breadcrumbs={breadcrumbs} />
+          <div className="flex min-w-0 flex-1 flex-col">
+            <div
+              className={cn(
+                "mx-auto flex w-full min-w-0 flex-1 flex-col gap-6 px-4 py-6 text-neutral-800 md:px-0 lg:py-8 dark:text-neutral-300",
+                pageMode === "wide" ? "max-w-[60rem]" : "max-w-[40rem]"
+              )}
+            >
               <div className="flex flex-col gap-2">
-                <div className="flex flex-col items-start gap-3 sm:flex-row sm:justify-between">
-                  <h1 className="min-w-0 scroll-m-24 text-3xl font-semibold tracking-tight sm:text-3xl">
-                    {pageTitle}
-                    {deprecated ? (
-                      <span className="ml-3 inline-flex translate-y-[-2px] items-center rounded-md bg-yellow-100 px-2 py-0.5 align-middle text-xs font-medium text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300">
-                        Deprecated
-                      </span>
-                    ) : null}
-                  </h1>
-                  {headerContextualMenu ??
-                    (rawContent === undefined &&
-                    markdownHref === undefined ? null : (
-                      <CopyPageMenu
-                        content={markdownHref ? undefined : rawContent}
-                        contentUrl={markdownHref}
-                        key={`copy-${currentPath}`}
-                        title={pageTitle}
-                      />
-                    ))}
+                <Breadcrumbs basePath={basePath} breadcrumbs={breadcrumbs} />
+                <div className="flex flex-col gap-2">
+                  <div className="flex flex-col items-start gap-3 sm:flex-row sm:justify-between">
+                    <h1 className="min-w-0 scroll-m-24 text-3xl font-semibold tracking-tight sm:text-3xl">
+                      {pageTitle}
+                      {deprecated ? (
+                        <span className="ml-3 inline-flex translate-y-[-2px] items-center rounded-md bg-yellow-100 px-2 py-0.5 align-middle text-xs font-medium text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300">
+                          Deprecated
+                        </span>
+                      ) : null}
+                    </h1>
+                    {headerContextualMenu ??
+                      (rawContent === undefined &&
+                      markdownHref === undefined ? null : (
+                        <CopyPageMenu
+                          content={markdownHref ? undefined : rawContent}
+                          contentUrl={markdownHref}
+                          key={`copy-${currentPath}`}
+                          title={pageTitle}
+                        />
+                      ))}
+                  </div>
+                  {pageDescription ? (
+                    <p className="text-[1.05rem] text-muted-foreground sm:text-balance sm:text-base md:max-w-[80%]">
+                      {pageDescription}
+                    </p>
+                  ) : null}
                 </div>
-                {pageDescription ? (
-                  <p className="text-[1.05rem] text-muted-foreground sm:text-balance sm:text-base md:max-w-[80%]">
-                    {pageDescription}
-                  </p>
-                ) : null}
               </div>
-            </div>
-            <div className="grid min-w-0 grid-cols-1 gap-4.5 leading-relaxed [&_blockquote]:border-l-3 [&_blockquote]:border-primary [&_blockquote]:pl-3.5 [&_blockquote]:text-muted-foreground [&_h2]:mt-10 [&_h2]:mb-3 [&_h2]:text-2xl [&_h2]:font-bold [&_h3]:mt-8 [&_h3]:mb-2 [&_h3]:text-[1.375rem] [&_h3]:font-semibold [&_h4]:mt-6 [&_h4]:mb-2 [&_h4]:text-base [&_h4]:font-semibold [&_ol]:list-decimal [&_ol]:pl-6 [&_table]:w-full [&_table]:border-collapse [&_table]:text-sm [&_td]:border-b [&_td]:border-border [&_td]:px-2.5 [&_td]:py-2 [&_td]:text-left [&_th]:border-b [&_th]:border-border [&_th]:px-2.5 [&_th]:py-2 [&_th]:text-left [&_ul]:list-disc [&_ul]:pl-6">
-              {content}
-            </div>
-            {!hideFooterPagination && (prevPage || nextPage) ? (
-              <nav
-                className="flex w-full rounded-2xl bg-muted/50 p-1 text-sm"
-                id="pagination"
-              >
-                {prevPage ? (
-                  <Link
-                    className="group flex items-center justify-between gap-1.5 pl-3 pr-6"
-                    href={toDocHref(prevPage.path, basePath)}
-                  >
-                    <ChevronLeftIcon
-                      aria-hidden="true"
-                      className="size-3 text-muted-foreground/50 group-hover:text-muted-foreground"
-                    />
-                    <span className="font-medium tracking-tight text-muted-foreground group-hover:text-foreground">
-                      Previous
-                    </span>
-                  </Link>
-                ) : null}
-                {nextPage ? (
-                  <Link
-                    className="group ml-auto flex w-full min-w-0 flex-1"
-                    href={toDocHref(nextPage.path, basePath)}
-                  >
-                    <div className="flex flex-1 items-center justify-end rounded-xl bg-background hover:ring-1 hover:ring-border sm:h-16">
-                      <div className="flex min-w-0 flex-col items-end justify-center px-5">
-                        <span className="text-right font-semibold text-foreground/80">
-                          {nextPage.title}
-                        </span>
-                        {nextPage.description ? (
-                          <span className="hidden w-full truncate text-right text-muted-foreground lg:block lg:w-72">
-                            {nextPage.description}
+              <div className="grid min-w-0 grid-cols-1 gap-4.5 leading-relaxed [&_blockquote]:border-l-3 [&_blockquote]:border-primary [&_blockquote]:pl-3.5 [&_blockquote]:text-muted-foreground [&_h2]:mt-10 [&_h2]:mb-3 [&_h2]:text-2xl [&_h2]:font-bold [&_h3]:mt-8 [&_h3]:mb-2 [&_h3]:text-[1.375rem] [&_h3]:font-semibold [&_h4]:mt-6 [&_h4]:mb-2 [&_h4]:text-base [&_h4]:font-semibold [&_ol]:list-decimal [&_ol]:pl-6 [&_table]:w-full [&_table]:border-collapse [&_table]:text-sm [&_td]:border-b [&_td]:border-border [&_td]:px-2.5 [&_td]:py-2 [&_td]:text-left [&_th]:border-b [&_th]:border-border [&_th]:px-2.5 [&_th]:py-2 [&_th]:text-left [&_ul]:list-disc [&_ul]:pl-6">
+                {content}
+              </div>
+              {!hideFooterPagination && (prevPage || nextPage) ? (
+                <nav
+                  className="flex w-full rounded-2xl bg-muted/50 p-1 text-sm"
+                  id="pagination"
+                >
+                  {prevPage ? (
+                    <Link
+                      className="group flex items-center justify-between gap-1.5 pl-3 pr-6"
+                      href={toDocHref(prevPage.path, basePath)}
+                    >
+                      <ChevronLeftIcon
+                        aria-hidden="true"
+                        className="size-3 text-muted-foreground/50 group-hover:text-muted-foreground"
+                      />
+                      <span className="font-medium tracking-tight text-muted-foreground group-hover:text-foreground">
+                        Previous
+                      </span>
+                    </Link>
+                  ) : null}
+                  {nextPage ? (
+                    <Link
+                      className="group ml-auto flex w-full min-w-0 flex-1"
+                      href={toDocHref(nextPage.path, basePath)}
+                    >
+                      <div className="flex flex-1 items-center justify-end rounded-xl bg-background hover:ring-1 hover:ring-border sm:h-16">
+                        <div className="flex min-w-0 flex-col items-end justify-center px-5">
+                          <span className="text-right font-semibold text-foreground/80">
+                            {nextPage.title}
                           </span>
-                        ) : null}
-                      </div>
-                      <div className="h-8 w-px bg-border/50" />
-                      <div className="flex items-center gap-1.5 pl-5 pr-3">
-                        <span className="font-medium tracking-tight text-muted-foreground group-hover:text-foreground">
-                          Next
-                        </span>
-                        <ChevronRightIcon
-                          aria-hidden="true"
-                          className="size-3 text-muted-foreground/50 group-hover:text-muted-foreground"
-                        />
+                          {nextPage.description ? (
+                            <span className="hidden w-full truncate text-right text-muted-foreground lg:block lg:w-72">
+                              {nextPage.description}
+                            </span>
+                          ) : null}
+                        </div>
+                        <div className="h-8 w-px bg-border/50" />
+                        <div className="flex items-center gap-1.5 pl-5 pr-3">
+                          <span className="font-medium tracking-tight text-muted-foreground group-hover:text-foreground">
+                            Next
+                          </span>
+                          <ChevronRightIcon
+                            aria-hidden="true"
+                            className="size-3 text-muted-foreground/50 group-hover:text-muted-foreground"
+                          />
+                        </div>
                       </div>
-                    </div>
-                  </Link>
-                ) : null}
-              </nav>
-            ) : null}
+                    </Link>
+                  ) : null}
+                </nav>
+              ) : null}
+            </div>
           </div>
           {hasToc ? (
             <DocToc contextualItems={contextualTocItems} toc={toc} />

package/docs/components/docs/doc-sidebar.tsx

@@ -9,6 +9,8 @@ import type { NavEntry, NavPage } from "@/lib/navigation";
 import { isExternalHref, toDocHref } from "@/lib/routes";
 import { cn } from "@/lib/utils";
 
+import { SidebarScrollArea } from "./sidebar-scroll-area";
+
 const MENU_BUTTON_CLASS =
   "relative flex min-h-[30px] items-center gap-2 overflow-visible rounded-md border border-transparent px-2 text-[0.8rem] font-medium transition-colors hover:bg-accent/70 hover:text-foreground";
 
@@ -81,6 +83,7 @@ const NavPageLink = ({
     return (
       <a
         className={className}
+        data-active={isActive || undefined}
         href={href}
         rel="noopener noreferrer"
         target="_blank"
@@ -91,7 +94,7 @@ const NavPageLink = ({
   }
 
   return (
-    <Link className={className} href={href}>
+    <Link className={className} data-active={isActive || undefined} href={href}>
       {linkContent}
     </Link>
   );
@@ -143,7 +146,7 @@ export const DocSidebar = ({
       <div className="h-9" />
       <div className="absolute top-8 z-10 h-8 w-full shrink-0 bg-gradient-to-b from-background via-background/80 to-background/50 blur-xs" />
       <div className="absolute top-12 right-2 bottom-0 hidden h-full w-px bg-gradient-to-b from-transparent via-border to-transparent lg:flex" />
-      <div className="no-scrollbar mx-auto flex min-h-0 w-full flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden px-2">
+      <SidebarScrollArea className="no-scrollbar mx-auto flex min-h-0 w-full flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden px-2">
         {anchors?.length ? (
           <Section paddedTop title="Pinned">
             <ul className="space-y-1">
@@ -205,7 +208,7 @@ export const DocSidebar = ({
           );
         })}
         <div className="sticky -bottom-1 z-10 h-16 shrink-0 bg-gradient-to-t from-background via-background/80 to-background/50 blur-xs" />
-      </div>
+      </SidebarScrollArea>
     </aside>
   );
 };

package/docs/components/docs/doc-toc.tsx

@@ -16,7 +16,7 @@ export const DocToc = ({
   return (
     <nav
       aria-label="Table of contents"
-      className="sticky top-[calc(var(--header-height,4rem)+1px)] z-30 ml-auto hidden h-[90svh] w-56 shrink-0 flex-col gap-4 overflow-hidden overscroll-none pb-8 xl:flex"
+      className="sticky top-[calc(var(--header-height)+1px)] z-30 ml-auto hidden h-[90svh] w-(--sidebar-width) flex-col gap-4 overflow-hidden overscroll-none pb-8 xl:flex"
     >
       <div className="no-scrollbar flex flex-col gap-8 overflow-y-auto px-8">
         <div className="flex flex-col gap-2 p-4 pt-0 text-sm">

package/docs/components/docs/mobile-nav.tsx

@@ -5,6 +5,7 @@ import { useCallback, useState } from "react";
 import type { ReactNode } from "react";
 
 import { Button } from "@/components/ui/button";
+import { MorphIcon } from "@/components/ui/morph-icon";
 import {
   Popover,
   PopoverContent,
@@ -86,26 +87,17 @@ export const MobileNav = ({
       <PopoverTrigger asChild>
         <Button
           className={cn(
-            "extend-touch-target !p-0 h-8 touch-manipulation items-center justify-start gap-2.5 hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 active:bg-transparent dark:hover:bg-transparent",
+            "extend-touch-target !p-0 -ml-3 size-10 touch-manipulation items-center justify-start gap-2.5 hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 active:bg-transparent dark:hover:bg-transparent",
             className
           )}
           variant="ghost"
         >
-          <div className="relative flex h-8 w-4 items-center justify-center">
-            <div className="relative size-4">
-              <span
-                className={cn(
-                  "absolute left-0 block h-0.5 w-4 bg-foreground transition-all duration-100",
-                  open ? "top-[0.4rem] -rotate-45" : "top-1"
-                )}
-              />
-              <span
-                className={cn(
-                  "absolute left-0 block h-0.5 w-4 bg-foreground transition-all duration-100",
-                  open ? "top-[0.4rem] rotate-45" : "top-2.5"
-                )}
-              />
-            </div>
+          <div className="relative flex size-10 items-center justify-center">
+            <MorphIcon
+              icon={open ? "cross" : "menu"}
+              size={16}
+              strokeWidth={2}
+            />
             <span className="sr-only">Toggle Menu</span>
           </div>
         </Button>

package/docs/components/docs/sidebar-scroll-area.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useEffect, useLayoutEffect, useRef } from "react";
+
+let savedScrollTop = 0;
+
+export const SidebarScrollArea = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    const el = scrollRef.current;
+    if (!el) {
+      return;
+    }
+
+    if (savedScrollTop > 0) {
+      el.scrollTop = savedScrollTop;
+    } else {
+      const active = el.querySelector<HTMLElement>("[data-active]");
+      if (active) {
+        active.scrollIntoView({ behavior: "instant", block: "center" });
+      }
+    }
+  });
+
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) {
+      return;
+    }
+
+    let raf = 0;
+    const onScroll = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => {
+        savedScrollTop = el.scrollTop;
+      });
+    };
+
+    el.addEventListener("scroll", onScroll, { passive: true });
+    return () => {
+      cancelAnimationFrame(raf);
+      el.removeEventListener("scroll", onScroll);
+    };
+  }, []);
+
+  return (
+    <div ref={scrollRef} className={className}>
+      {children}
+    </div>
+  );
+};