@boyernick/standard-ui-react 0.1.1-canary.3 → 0.1.1-canary.34

package/src/carousel.tsx

@@ -8,6 +8,8 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useRef,
+  useState,
   useSyncExternalStore,
   type ComponentProps,
   type KeyboardEvent,
@@ -15,19 +17,36 @@ import {
 import { Button } from "./button"
 import { IconChevronRightSmall } from "./icons"
 import { cn } from "./lib/cn"
+import { focusRing, focusRingBorder } from "./lib/focus"
+import { motion } from "./lib/motion"
 
 type CarouselApi = UseEmblaCarouselType[1]
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
 type CarouselOptions = UseCarouselParameters[0]
 type CarouselPlugin = UseCarouselParameters[1]
 
+const TRACKPAD_AXIS_MIN = 2
+/**
+ * Allow ~30° off a pure horizontal swipe. Mac trackpads often emit a
+ * mixed deltaX/deltaY even when the gesture reads as sideways.
+ */
+const TRACKPAD_HORIZONTAL_RATIO = 0.55
+const TRACKPAD_SWIPE_THRESHOLD = 20
+const TRACKPAD_GESTURE_END_DELAY = 100
+/** Match Embla’s in-drag body so free wheel tracks the gesture. */
+const FREE_WHEEL_FRICTION = 0.68
+const FREE_WHEEL_DURATION = 22
+
 type CarouselContextValue = {
   carouselRef: ReturnType<typeof useEmblaCarousel>[0]
   api: CarouselApi
   scrollPrev: () => void
   scrollNext: () => void
+  scrollTo: (index: number) => void
   canScrollPrev: boolean
   canScrollNext: boolean
+  selectedIndex: number
+  scrollSnaps: number[]
   orientation: "horizontal" | "vertical"
 }
 
@@ -46,30 +65,89 @@ export type CarouselProps = ComponentProps<"div"> & {
   plugins?: CarouselPlugin
   orientation?: "horizontal" | "vertical"
   setApi?: (api: CarouselApi) => void
+  /** Adds directional edge fades wherever more slides are available. */
+  fade?: boolean
 }
 
-export type CarouselContentProps = ComponentProps<"div">
+export type CarouselContentProps = ComponentProps<"div"> & {
+  /** Classes for the overflow viewport (Embla root), not the slide track. */
+  viewportClassName?: string
+}
 export type CarouselItemProps = ComponentProps<"div">
 export type CarouselPreviousProps = ComponentProps<typeof Button>
 export type CarouselNextProps = ComponentProps<typeof Button>
+export type CarouselDotsProps = ComponentProps<"div">
+
+const carouselControlClassName = cn(
+  "absolute z-20 !size-6 border border-border-primary/40 bg-surface/55 text-fg-primary shadow-md backdrop-blur-md [&_svg:not([class*='size-'])]:!size-3.5",
+  "hover:bg-surface/80 hover:text-fg-primary",
+  "disabled:pointer-events-none disabled:opacity-0",
+  motion.colors,
+)
+
+const CarouselEdgeFades = () => {
+  const { orientation, canScrollPrev, canScrollNext } = useCarousel()
+  const horizontal = orientation === "horizontal"
+  const sharedClassName =
+    "pointer-events-none absolute z-10 opacity-0 transition-opacity duration-[var(--duration-lg)] ease-enter data-[visible=true]:opacity-100 motion-reduce:transition-none"
+
+  return (
+    <>
+      <div
+        aria-hidden="true"
+        data-slot={horizontal ? "carousel-fade-left" : "carousel-fade-top"}
+        data-visible={canScrollPrev}
+        className={cn(
+          sharedClassName,
+          horizontal
+            ? "-top-px -bottom-px -left-px w-20 bg-linear-to-r from-surface via-surface/60 via-40% to-transparent"
+            : "-top-px -right-px -left-px h-20 bg-linear-to-b from-surface via-surface/60 via-40% to-transparent",
+        )}
+      />
+      <div
+        aria-hidden="true"
+        data-slot={horizontal ? "carousel-fade-right" : "carousel-fade-bottom"}
+        data-visible={canScrollNext}
+        className={cn(
+          sharedClassName,
+          horizontal
+            ? "-top-px -right-px -bottom-px w-20 bg-linear-to-l from-surface via-surface/60 via-40% to-transparent"
+            : "-right-px -bottom-px -left-px h-20 bg-linear-to-t from-surface via-surface/60 via-40% to-transparent",
+        )}
+      />
+    </>
+  )
+}
 
 export const Carousel = ({
   orientation = "horizontal",
+  fade = false,
   opts,
   setApi,
   plugins,
   className,
   children,
   onKeyDownCapture,
+  tabIndex,
+  ref: forwardedRef,
   ...props
 }: CarouselProps) => {
+  const [carouselRoot, setCarouselRoot] = useState<HTMLDivElement | null>(null)
   const [carouselRef, api] = useEmblaCarousel(
     {
+      align: "start",
+      containScroll: "trimSnaps",
+      dragFree: true,
+      duration: 20,
       ...opts,
       axis: orientation === "horizontal" ? "x" : "y",
     },
     plugins,
   )
+  const apiRef = useRef(api)
+  useEffect(() => {
+    apiRef.current = api
+  }, [api])
   // Embla is an external store, so read from it directly rather than mirroring
   // it into state. Seeding mirrored state meant calling setState synchronously
   // inside an effect, costing an extra render on mount and on every slide
@@ -80,9 +158,11 @@ export const Carousel = ({
       if (!api) return () => {}
       api.on("reInit", onStoreChange)
       api.on("select", onStoreChange)
+      api.on("scroll", onStoreChange)
       return () => {
         api.off("reInit", onStoreChange)
         api.off("select", onStoreChange)
+        api.off("scroll", onStoreChange)
       }
     },
     [api],
@@ -98,6 +178,29 @@ export const Carousel = ({
     () => api?.canScrollNext() ?? false,
     () => false,
   )
+  const selectedIndex = useSyncExternalStore(
+    subscribe,
+    () => api?.selectedScrollSnap() ?? 0,
+    () => 0,
+  )
+
+  const scrollSnapsCache = useRef<number[]>([])
+  const scrollSnaps = useSyncExternalStore(
+    subscribe,
+    () => {
+      const next = api?.scrollSnapList() ?? []
+      const prev = scrollSnapsCache.current
+      if (
+        prev.length === next.length &&
+        prev.every((value, index) => value === next[index])
+      ) {
+        return prev
+      }
+      scrollSnapsCache.current = next
+      return next
+    },
+    () => scrollSnapsCache.current,
+  )
 
   const scrollPrev = useCallback(() => {
     api?.scrollPrev()
@@ -107,6 +210,42 @@ export const Carousel = ({
     api?.scrollNext()
   }, [api])
 
+  const scrollTo = useCallback(
+    (index: number) => {
+      api?.scrollTo(index)
+    },
+    [api],
+  )
+
+  const trackpadDelta = useRef(0)
+  const trackpadGestureHandled = useRef(false)
+  const trackpadGestureDirection = useRef(0)
+  const trackpadGestureTimeout = useRef<ReturnType<typeof setTimeout> | null>(
+    null,
+  )
+
+  const clearTrackpadGesture = useCallback(() => {
+    trackpadDelta.current = 0
+    trackpadGestureHandled.current = false
+    trackpadGestureDirection.current = 0
+    if (trackpadGestureTimeout.current) {
+      clearTimeout(trackpadGestureTimeout.current)
+      trackpadGestureTimeout.current = null
+    }
+  }, [])
+
+  const scheduleTrackpadGestureEnd = useCallback(() => {
+    if (trackpadGestureTimeout.current) {
+      clearTimeout(trackpadGestureTimeout.current)
+    }
+    trackpadGestureTimeout.current = setTimeout(() => {
+      trackpadDelta.current = 0
+      trackpadGestureHandled.current = false
+      trackpadGestureDirection.current = 0
+      trackpadGestureTimeout.current = null
+    }, TRACKPAD_GESTURE_END_DELAY)
+  }, [])
+
   const handleKeyDown = useCallback(
     (event: KeyboardEvent<HTMLDivElement>) => {
       onKeyDownCapture?.(event)
@@ -122,6 +261,118 @@ export const Carousel = ({
     [onKeyDownCapture, scrollNext, scrollPrev],
   )
 
+  const handleWheel = useCallback(
+    (event: globalThis.WheelEvent) => {
+      if (event.defaultPrevented || orientation !== "horizontal") return
+
+      const deltaMultiplier =
+        event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? 100 : 1
+      const rawX = event.deltaX * deltaMultiplier
+      const rawY = event.deltaY * deltaMultiplier
+      const absX = Math.abs(rawX)
+      const absY = Math.abs(rawY)
+
+      // Only claim sideways gestures. Vertical trackpad scroll must pass
+      // through to the page. Shift+wheel is the mouse chord for horizontal.
+      let scrollDelta = 0
+      if (event.shiftKey && absY >= TRACKPAD_AXIS_MIN) {
+        scrollDelta = rawY
+      } else if (
+        absX >= TRACKPAD_AXIS_MIN &&
+        absX > absY * TRACKPAD_HORIZONTAL_RATIO
+      ) {
+        scrollDelta = rawX
+      } else {
+        return
+      }
+
+      const carouselApi = apiRef.current
+      if (!carouselApi) return
+
+      const engine = carouselApi.internalEngine()
+
+      // Free-scroll strip (Apple gallery style): scrub continuously and clamp
+      // to Embla limits so the first/last slides never rest past the edge.
+      if (engine.options.dragFree) {
+        const nextTarget = engine.limit.constrain(
+          engine.target.get() - scrollDelta,
+        )
+        if (nextTarget === engine.target.get()) {
+          if (engine.limit.reachedAny(engine.target.get())) {
+            event.preventDefault()
+          }
+          return
+        }
+
+        event.preventDefault()
+        engine.scrollBody
+          .useFriction(FREE_WHEEL_FRICTION)
+          .useDuration(FREE_WHEEL_DURATION)
+        engine.scrollTo.distance(nextTarget - engine.target.get(), false)
+        return
+      }
+
+      const canScrollInDirection =
+        scrollDelta > 0
+          ? carouselApi.canScrollNext()
+          : carouselApi.canScrollPrev()
+      if (!canScrollInDirection) return
+
+      event.preventDefault()
+
+      // Snapping carousels (e.g. lightbox): one slide per gesture.
+      // Same-direction inertia is ignored; reverse unlocks immediately.
+      const direction = scrollDelta > 0 ? 1 : -1
+      if (trackpadGestureHandled.current) {
+        if (direction === trackpadGestureDirection.current) {
+          scheduleTrackpadGestureEnd()
+          return
+        }
+        clearTrackpadGesture()
+      }
+
+      trackpadDelta.current += scrollDelta
+      scheduleTrackpadGestureEnd()
+
+      if (Math.abs(trackpadDelta.current) < TRACKPAD_SWIPE_THRESHOLD) return
+
+      trackpadGestureHandled.current = true
+      trackpadGestureDirection.current = direction
+      trackpadDelta.current = 0
+      if (direction > 0) carouselApi.scrollNext()
+      else carouselApi.scrollPrev()
+    },
+    [
+      clearTrackpadGesture,
+      orientation,
+      scheduleTrackpadGestureEnd,
+    ],
+  )
+
+  useEffect(() => {
+    if (!carouselRoot) return
+
+    carouselRoot.addEventListener("wheel", handleWheel, {
+      passive: false,
+      capture: true,
+    })
+    return () => {
+      carouselRoot.removeEventListener("wheel", handleWheel, {
+        capture: true,
+      })
+      clearTrackpadGesture()
+    }
+  }, [carouselRoot, clearTrackpadGesture, handleWheel])
+
+  const setCarouselRootRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      setCarouselRoot(node)
+      if (typeof forwardedRef === "function") forwardedRef(node)
+      else if (forwardedRef) forwardedRef.current = node
+    },
+    [forwardedRef],
+  )
+
   useEffect(() => {
     if (!api || !setApi) return
     setApi(api)
@@ -134,20 +385,36 @@ export const Carousel = ({
         api,
         scrollPrev,
         scrollNext,
+        scrollTo,
         canScrollPrev,
         canScrollNext,
+        selectedIndex,
+        scrollSnaps,
         orientation,
       }}
     >
       <div
+        ref={setCarouselRootRef}
         role="region"
         aria-roledescription="carousel"
         data-slot="carousel"
-        className={cn("relative", className)}
+        data-fade={fade || undefined}
+        className={cn(
+          "relative",
+          fade &&
+            cn(
+              "rounded-xl",
+              focusRingBorder,
+              focusRing,
+            ),
+          className,
+        )}
         onKeyDownCapture={handleKeyDown}
+        tabIndex={tabIndex ?? (fade ? 0 : undefined)}
         {...props}
       >
         {children}
+        {fade ? <CarouselEdgeFades /> : null}
       </div>
     </CarouselContext.Provider>
   )
@@ -155,16 +422,29 @@ export const Carousel = ({
 
 export const CarouselContent = ({
   className,
+  viewportClassName,
   ...props
 }: CarouselContentProps) => {
   const { carouselRef, orientation } = useCarousel()
 
   return (
-    <div ref={carouselRef} className="overflow-hidden" data-slot="carousel-viewport">
+    <div
+      ref={carouselRef}
+      className={cn(
+        "cursor-grab overflow-hidden active:cursor-grabbing",
+        orientation === "horizontal"
+          ? "touch-pan-y overscroll-x-contain"
+          : "touch-pan-x overscroll-y-contain",
+        viewportClassName,
+      )}
+      data-slot="carousel-viewport"
+    >
       <div
         data-slot="carousel-content"
         className={cn(
           "flex",
+          // Start spacing so the first slide lines up with the page measure.
+          // No end padding — the strip bleeds to the track edge (Apple gallery).
           orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
           className,
         )}
@@ -183,8 +463,12 @@ export const CarouselItem = ({ className, ...props }: CarouselItemProps) => {
       aria-roledescription="slide"
       data-slot="carousel-item"
       className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
+        "min-w-0 shrink-0 grow-0",
+        // Peek the next card by default — override with basis-full when a
+        // single focused slide is required (e.g. lightbox).
+        orientation === "horizontal"
+          ? "basis-[92%] pl-4 sm:basis-[72%] lg:basis-[62%]"
+          : "basis-full pt-4",
         className,
       )}
       {...props}
@@ -194,8 +478,8 @@ export const CarouselItem = ({ className, ...props }: CarouselItemProps) => {
 
 export const CarouselPrevious = ({
   className,
-  variant = "outline",
-  size = "md",
+  variant = "ghost",
+  size = "sm",
   ...props
 }: CarouselPreviousProps) => {
   const { orientation, scrollPrev, canScrollPrev } = useCarousel()
@@ -211,10 +495,10 @@ export const CarouselPrevious = ({
       aria-label="Previous slide"
       data-slot="carousel-previous"
       className={cn(
-        "absolute size-9",
+        carouselControlClassName,
         orientation === "horizontal"
-          ? "top-1/2 -left-12 -translate-y-1/2 active:!-translate-y-1/2"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90 active:!-translate-x-1/2 active:!translate-y-0",
+          ? "top-1/2 left-3 -translate-y-1/2 active:!-translate-y-1/2"
+          : "top-3 left-1/2 -translate-x-1/2 rotate-90 active:!-translate-x-1/2 active:!translate-y-0",
         className,
       )}
       onClick={scrollPrev}
@@ -227,8 +511,8 @@ export const CarouselPrevious = ({
 
 export const CarouselNext = ({
   className,
-  variant = "outline",
-  size = "md",
+  variant = "ghost",
+  size = "sm",
   ...props
 }: CarouselNextProps) => {
   const { orientation, scrollNext, canScrollNext } = useCarousel()
@@ -244,10 +528,10 @@ export const CarouselNext = ({
       aria-label="Next slide"
       data-slot="carousel-next"
       className={cn(
-        "absolute size-9",
+        carouselControlClassName,
         orientation === "horizontal"
-          ? "top-1/2 -right-12 -translate-y-1/2 active:!-translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90 active:!-translate-x-1/2 active:!translate-y-0",
+          ? "top-1/2 right-3 -translate-y-1/2 active:!-translate-y-1/2"
+          : "bottom-3 left-1/2 -translate-x-1/2 rotate-90 active:!-translate-x-1/2 active:!translate-y-0",
         className,
       )}
       onClick={scrollNext}
@@ -258,5 +542,45 @@ export const CarouselNext = ({
   )
 }
 
+export const CarouselDots = ({ className, ...props }: CarouselDotsProps) => {
+  const { scrollSnaps, selectedIndex, scrollTo } = useCarousel()
+
+  if (scrollSnaps.length <= 1) return null
+
+  return (
+    <div
+      data-slot="carousel-dots"
+      role="tablist"
+      aria-label="Slide indicators"
+      className={cn("mt-4 flex items-center justify-start gap-1 pl-4", className)}
+      {...props}
+    >
+      {scrollSnaps.map((_, index) => {
+        const isSelected = index === selectedIndex
+
+        return (
+          <button
+            key={index}
+            type="button"
+            role="tab"
+            aria-label={`Go to slide ${index + 1}`}
+            aria-selected={isSelected}
+            data-selected={isSelected ? "" : undefined}
+            className={cn(
+              "h-1.5 cursor-pointer rounded-full outline-none",
+              motion.all,
+              "focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background-primary",
+              isSelected
+                ? "w-5 bg-fg-tertiary"
+                : "w-1.5 bg-fg-quaternary/50 hover:bg-fg-quaternary",
+            )}
+            onClick={() => scrollTo(index)}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
 export type { CarouselApi }
 export { useCarousel }

package/src/checkbox.tsx

@@ -4,28 +4,51 @@ import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox"
 import type { ComponentProps } from "react"
 import { IconCheckmark1, IconMinus } from "./icons"
 import { cn } from "./lib/cn"
+import { focusRing } from "./lib/focus"
+import { motion } from "./lib/motion"
 
 export type CheckboxProps = ComponentProps<typeof BaseCheckbox.Root>
 
 export const Checkbox = ({ className, ...props }: CheckboxProps) => (
   <BaseCheckbox.Root
     className={cn(
-      "group flex size-4 shrink-0 items-center justify-center rounded-sm border border-border-secondary bg-surface transition-colors duration-[var(--duration-sm)] ease-enter motion-reduce:transition-none outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20 data-checked:border-brand-primary data-checked:bg-brand-primary data-indeterminate:border-brand-primary data-indeterminate:bg-brand-primary data-disabled:cursor-not-allowed data-disabled:opacity-50",
+      "group flex size-4 shrink-0 items-center justify-center rounded-sm border border-border-secondary bg-surface",
+      // motion.all, not motion.colors: the filled state brings a box shadow
+      // with it, which has to fade in alongside the background.
+      motion.all,
+      focusRing,
+      // Ticked and mixed are both filled controls, so they carry the primary
+      // button's treatment: brand fill, the border token that pairs with it,
+      // and the top-edge highlight that makes a solid control read as raised.
+      "data-checked:border-brand-primary-border data-checked:bg-brand-primary data-checked:inset-shadow-solid-top",
+      "data-indeterminate:border-brand-primary-border data-indeterminate:bg-brand-primary data-indeterminate:inset-shadow-solid-top",
+      "data-checked:hover:bg-brand-primary-hover data-indeterminate:hover:bg-brand-primary-hover",
+      "data-checked:active:bg-brand-primary-active data-indeterminate:active:bg-brand-primary-active",
+      "data-disabled:cursor-not-allowed data-disabled:opacity-50",
       className,
     )}
     {...props}
   >
-    <BaseCheckbox.Indicator className="flex text-brand-foreground data-unchecked:hidden">
-      <IconCheckmark1
-        size={12}
-        className="size-3 group-data-indeterminate:hidden"
-        aria-hidden
-      />
-      <IconMinus
-        size={12}
-        className="hidden size-3 group-data-indeterminate:block"
-        aria-hidden
-      />
-    </BaseCheckbox.Indicator>
+    {/* Only the active glyph is mounted. Central Icons give every instance of
+        an icon the same mask id, so a CSS-hidden twin would claim that id for
+        the whole document; a `display: none` subtree renders no mask, leaving
+        the visible instance to paint its backing rect unmasked as a solid
+        block. Mounting one icon keeps every id in the document resolvable. */}
+    {/* No `data-unchecked:hidden` here. Base UI keeps the indicator mounted
+        through its exit and flags it with both `data-unchecked` and
+        `data-ending-style`; hiding on the former would cut the latter's
+        transition short and the mark would vanish instantly. */}
+    <BaseCheckbox.Indicator
+      className={cn("flex text-brand-foreground", motion.checkIndicator)}
+      render={(props, state) => (
+        <span {...props}>
+          {state.indeterminate ? (
+            <IconMinus size={12} className="size-3" aria-hidden />
+          ) : (
+            <IconCheckmark1 size={12} className="size-3" aria-hidden />
+          )}
+        </span>
+      )}
+    />
   </BaseCheckbox.Root>
 )

package/src/code-block.tsx

@@ -4,6 +4,10 @@ import { useState } from "react"
 import { highlight, type LanguageName } from "sugar-high"
 import { Button } from "./button"
 import { IconCheckmark1, IconSquareBehindSquare6 } from "./icons"
+import { cn } from "./lib/cn"
+
+/** 1-based line number, or an inclusive `[start, end]` range. */
+export type CodeBlockHighlightLine = number | readonly [number, number]
 
 export type CodeBlockProps = {
   code: string
@@ -13,12 +17,18 @@ export type CodeBlockProps = {
   showHeader?: boolean
   /** Removes border and radius chrome for nesting inside another frame. */
   bare?: boolean
+  /** 1-based lines (or ranges) to emphasize inside the block. */
+  highlightLines?: readonly CodeBlockHighlightLine[]
+  /** 1-based lines added in a review (green). */
+  addedLines?: readonly CodeBlockHighlightLine[]
+  /** 1-based lines removed in a review (red). */
+  removedLines?: readonly CodeBlockHighlightLine[]
   className?: string
 }
 
 const sizeClass = {
-  sm: "text-2xs p-3",
-  md: "text-xs p-4",
+  sm: "text-2xs py-3",
+  md: "text-xs py-4",
 } as const
 
 const languages = new Set<LanguageName>([
@@ -59,17 +69,60 @@ const getHighlightLanguage = (lang: string): LanguageName => {
   return "typescript"
 }
 
+const toHighlightedLines = (
+  lines?: readonly CodeBlockHighlightLine[],
+): Set<number> => {
+  const set = new Set<number>()
+  if (!lines) return set
+
+  for (const entry of lines) {
+    if (typeof entry === "number") {
+      set.add(entry)
+      continue
+    }
+
+    const [start, end] = entry
+    const from = Math.min(start, end)
+    const to = Math.max(start, end)
+    for (let line = from; line <= to; line += 1) set.add(line)
+  }
+
+  return set
+}
+
 export const CodeBlock = ({
   code: rawCode,
   lang = "tsx",
   size = "md",
   showHeader = true,
   bare = false,
+  highlightLines,
+  addedLines,
+  removedLines,
   className = "",
 }: CodeBlockProps) => {
   const [copied, setCopied] = useState(false)
   const code = rawCode.replace(/^\n/, "").replace(/\n$/, "")
-  const html = highlight(code, { lang: getHighlightLanguage(lang) })
+  const focused = toHighlightedLines(highlightLines)
+  const added = toHighlightedLines(addedLines)
+  const removed = toHighlightedLines(removedLines)
+  const html = highlight(code, {
+    lang: getHighlightLanguage(lang),
+    markLine: (line) => {
+      const number = line.index + 1
+      if (added.has(number)) {
+        line.className += " sh__line--added"
+        return
+      }
+      if (removed.has(number)) {
+        line.className += " sh__line--removed"
+        return
+      }
+      if (focused.has(number)) {
+        line.className += " sh__line--highlighted"
+      }
+    },
+  })
   const frameClass =
     !showHeader && !bare
       ? "rounded-lg border border-border-primary bg-surface"
@@ -87,7 +140,11 @@ export const CodeBlock = ({
 
   const codeContent = (
     <pre
-      className={`sh-code overflow-x-auto font-mono ${sizeClass[size]} ${frameClass}`}
+      className={cn(
+        "sh-code overflow-x-auto font-mono",
+        sizeClass[size],
+        frameClass,
+      )}
       dangerouslySetInnerHTML={{ __html: html }}
     />
   )
@@ -98,7 +155,11 @@ export const CodeBlock = ({
 
   return (
     <div
-      className={`overflow-hidden rounded-xl border border-border-primary bg-surface ${className}`}
+      data-slot="code-block"
+      className={cn(
+        "overflow-hidden rounded-xl border border-border-primary bg-surface",
+        className,
+      )}
     >
       <div className="flex items-center justify-between border-b border-border-primary bg-background-secondary px-3 py-1.5 pl-4">
         <p className="text-xs font-mono text-fg-quaternary">{lang}</p>